/* ==============================================================
   IMMO-2026.11.12-02  —  style_inscription_annonceur.css
   Historique :
   - 2026.11.12-02 : encart ImmoKitLoc (.ip-outils) aux couleurs de la charte
                     ImmoKitLoc : fond sarcelle pale, titre ardoise nuit,
                     logo, bouton sarcelle plein (.ip-bouton-ikl).
   - 2026.11.12-01 : section "Votre propre site de location" (.ip-minisite) :
                     texte + 3 points a gauche, apercu d'une page de
                     mini-site dessine en CSS a droite.
   - 2026.11.09-02 : encart .ip-sync-lien (annonces sur d'autres plateformes,
                     mis en valeur) a la place du second paragraphe.
   - 2026.11.09-01 : .ip-sync p + p (second paragraphe : annonces sur
                     d'autres plateformes).
   - 2026.11.07-01 : FAQ sur deux colonnes, a la largeur de la page
                     (.ip-faq-tete, .ip-faq-liste, .ip-faq-contact,
                     .ip-faq-bouton) ; max-width de .ip-faq retire.
   - 2026.11.06-01 : page "Publier mon logement" refaite (maquette du
                     06/11) : nouvelles regles prefixees ip- en fin de
                     fichier (accroche + carte d'inscription, argument
                     Airbnb et simulateur, etapes, piliers, synchro,
                     outils, FAQ, appel final). La page n'utilise plus
                     .ia-page, .ia-hero, .ia-argu, .ia-piliers,
                     .ia-compare ni .ia-etapes (regles laissees en place,
                     sans effet) ; formulaire (.ia-carte, .ia-form...)
                     et .ia-seul inchanges.
   - 2026.10.29-01 : fenetre "Votre compte est cree" de la page de
                     choix du mode d'annonce (.cm-bienvenue, <dialog>).
   - 2026.10.26-01 : charte EcoVacances. Registre "economie" en
                     vert pin (--eco-pin) : pastilles de l'accroche,
                     colonne EcoVacances du comparatif, carte
                     "paiement en ligne" recommandee. Couleurs en
                     dur remplacees par les variables --eco-*.
   - 2026.10.24-08 : encart paiement retire de l'inscription ; styles
                     de la page de choix du mode d'annonce
                     (I_ChoixModeAnnonce.php, classes cm-) : deux
                     cartes, paiement en ligne mise en avant (fond vert
                     tres pale, liseré), mode actuel signale.
   - 2026.10.24-07 : encart paiement (.ia-paiement) eclairci : fond vert
                     tres pale, liseré vert a gauche, textes fonces,
                     pastille "Recommande" ocre pale (fond vert fonce
                     juge trop sombre).
   - 2026.10.24-06 : liens-boutons de la carte (.sp-btn en <a>) : texte
                     blanc et sans soulignement. La regle commune
                     ".sp-body a { color: inherit }" l'emportait sur
                     .sp-btn-vert (texte vert sur fond vert). Carte
                     "deja connecte" : texte aligne a gauche, espacement.
   - 2026.10.24-05 : encart des services en plus (.ia-paiement-plus).
   - 2026.10.24-04 : bloc "Carte bancaire et caution en ligne"
                     (.ia-paiement) et sous-liste des etapes.
   - 2026.10.24-03 : refonte de l'argumentaire ("Votre logement,
                     votre prix, vos regles !") : zones accroche /
                     formulaire / arguments (grid-template-areas),
                     formulaire collant sur grand ecran haut, trois
                     piliers, tableau comparatif, pastilles.
                     .ia-atouts retire (plus utilise).
   - 2026.10.24-02 : variante "carte seule" (.ia-seul) pour la page
                     de confirmation d'e-mail I_VerificationEmail.php.
   - 2026.10.24-01 : creation. Feuille SPECIFIQUE de la page
                     I_InscriptionAnnonceur.php (chantier 2410).
                     Tout le socle (sp-wrap, sp-btn, sp-alert,
                     sp-eyebrow, variables --sp-*) vient de
                     style_site_public.css : ne rien redefinir ici
                     qui existe deja la-bas.
   ============================================================== */

/* ── Mise en page : accroche + formulaire + arguments ──────────── */
/* Grand ecran : le formulaire occupe la colonne de droite sur toute
   la hauteur. Mobile : accroche, PUIS formulaire, puis arguments,
   pour que le bouton d'inscription arrive vite sous les yeux.       */
.ia-page {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    grid-template-areas:
        "hero  carte"
        "argu  carte";
    column-gap: 56px;
    row-gap: 36px;
    align-items: start;
    padding-top: 48px;
    padding-bottom: 72px;
}
.ia-hero  { grid-area: hero; }
.ia-carte { grid-area: carte; }
.ia-argu  { grid-area: argu; }

/* Formulaire collant seulement si l'ecran est assez haut pour le
   contenir entier (sinon son bas deviendrait inaccessible). */
@media (min-width: 961px) and (min-height: 820px) {
    .ia-page .ia-carte { position: sticky; top: 88px; }
}

/* ── Accroche ──────────────────────────────────────────────────── */
.ia-hero h1 {
    font-size: clamp(32px, 4.4vw, 52px);
    line-height: 1.08;
    margin-bottom: 18px;
}
.ia-hero h1 em { font-style: italic; color: var(--sp-ocre); }

.ia-lead {
    font-size: 18px;
    color: var(--sp-encre-douce);
    max-width: 52ch;
    margin-bottom: 20px;
}

.ia-badges {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.ia-badges li {
    padding: 6px 14px;
    border-radius: 99px;
    background: var(--eco-pin-pale);
    color: var(--eco-pin);
    font-size: 13.5px;
    font-weight: 700;
}

/* ── Trois piliers ─────────────────────────────────────────────── */
.ia-piliers {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 34px;
}
.ia-pilier {
    position: relative;
    background: var(--sp-carte);
    border: 1px solid var(--sp-ligne);
    border-radius: var(--sp-radius);
    padding: 20px 18px 18px;
}
.ia-pilier-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--sp-vert);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 10px;
}
.ia-pilier h2 {
    font-size: 20px;
    margin-bottom: 8px;
}
.ia-pilier p {
    font-size: 14.5px;
    color: var(--sp-encre);
    line-height: 1.5;
}
.ia-pilier b { color: var(--sp-vert); }
.ia-pilier-detail {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--sp-ligne);
    color: var(--sp-encre-douce) !important;
    font-size: 13.5px !important;
}

/* ── Comparatif ────────────────────────────────────────────────── */
.ia-compare { margin-bottom: 34px; }
.ia-compare h2 {
    font-size: 22px;
    margin-bottom: 12px;
}
.ia-compare table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    background: var(--sp-carte);
    border: 1px solid var(--sp-ligne);
    border-radius: var(--sp-radius);
    overflow: hidden;
}
.ia-compare th,
.ia-compare td {
    padding: 11px 14px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--sp-ligne);
}
.ia-compare tbody tr:last-child th,
.ia-compare tbody tr:last-child td { border-bottom: none; }
.ia-compare thead th {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--sp-encre-douce);
    background: var(--sp-fond);
}
.ia-compare tbody th {
    font-weight: 700;
    color: var(--sp-vert);
    width: 26%;
}
.ia-compare td { color: var(--sp-encre-douce); }
.ia-compare .ia-col-eco {
    background: var(--eco-pin-pale);
    color: var(--eco-pin);
    font-weight: 700;
}
.ia-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ── Etapes a venir ────────────────────────────────────────────── */
.ia-etapes {
    background: var(--sp-ocre-pale);
    border-radius: var(--sp-radius);
    padding: 20px 22px;
}
.ia-etapes h2 {
    font-size: 19px;
    margin-bottom: 8px;
}
.ia-etapes p {
    font-size: 14.5px;
    color: var(--sp-encre-douce);
    margin-bottom: 10px;
}
.ia-etapes ol {
    padding-left: 20px;
    font-size: 14.5px;
    color: var(--sp-encre);
    display: grid;
    gap: 4px;
}
.ia-etapes ol ul {
    padding-left: 18px;
    margin-top: 4px;
    display: grid;
    gap: 4px;
}

/* ── Carte formulaire ──────────────────────────────────────────── */
.ia-carte {
    background: var(--sp-carte);
    border: 1px solid var(--sp-ligne);
    border-radius: 18px;
    box-shadow: var(--sp-ombre);
    padding: 26px;
}
.ia-carte h2 {
    font-size: 24px;
    margin-bottom: 4px;
}
.ia-sous-titre {
    font-size: 14.5px;
    color: var(--sp-encre-douce);
    margin-bottom: 16px;
}
.ia-carte .sp-alert { margin: 0 0 16px; }

.ia-form { display: grid; gap: 14px; }

.ia-ligne {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.ia-champ {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ia-champ label {
    font-size: 13px;
    font-weight: 700;
    color: var(--sp-vert);
}
.ia-champ label small {
    font-weight: 400;
    color: var(--sp-encre-douce);
}
.ia-champ input {
    width: 100%;
    min-width: 0;
    border: 1px solid var(--sp-ligne);
    border-radius: 10px;
    padding: 11px 12px;
    font-family: inherit;
    font-size: 15px;
    color: var(--sp-encre);
    background: #fff;
}

.ia-cgu {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 13.5px;
    color: var(--sp-encre-douce);
    line-height: 1.45;
}
.ia-cgu input {
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--sp-vert);
}
.ia-cgu a,
.ia-note a,
.ia-connexion a { color: var(--sp-vert); font-weight: 600; }

.ia-note {
    font-size: 12.5px;
    color: var(--sp-encre-douce);
    text-align: center;
}

.ia-connexion {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--sp-ligne);
    font-size: 14px;
    text-align: center;
    color: var(--sp-encre-douce);
}

/* ── Carte seule (I_VerificationEmail.php) ─────────────────────── */
.ia-seul {
    max-width: 520px;
    padding-top: 64px;
    padding-bottom: 80px;
}
.ia-titre-seul {
    font-size: 26px;
    margin-bottom: 10px;
}
.ia-texte-seul {
    color: var(--sp-encre-douce);
    margin-bottom: 20px;
}

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .ia-piliers { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
    .ia-page {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "hero"
            "carte"
            "argu";
        row-gap: 28px;
        padding-top: 32px;
    }
}
@media (max-width: 640px) {
    .ia-compare th,
    .ia-compare td { padding: 9px 10px; font-size: 13px; }
    .ia-compare tbody th { width: 30%; }
}
@media (max-width: 520px) {
    .ia-ligne { grid-template-columns: 1fr; }
    .ia-carte { padding: 20px; }
}

/* ── Liens presentes en bouton dans la carte ───────────────────── */
/* ".sp-body a" (style_site_public.css) impose color: inherit et pese
   plus lourd que .sp-btn-vert seul : on retablit le texte blanc ici,
   pour cette page et pour I_VerificationEmail.php. */
.ia-carte a.sp-btn {
    text-decoration: none;
    text-align: center;
}
.ia-carte a.sp-btn-vert,
.ia-carte a.sp-btn-vert:hover,
.ia-carte a.sp-btn-vert:visited { color: #fff; }

/* Carte "vous etes deja connecte(e)" */
.ia-texte-connecte {
    font-size: 14.5px;
    color: var(--sp-encre-douce);
    margin: 8px 0 18px;
}

/* ── Choix du mode d'annonce (I_ChoixModeAnnonce.php) ──────────── */
.cm-page {
    max-width: 1000px;
    padding-top: 48px;
    padding-bottom: 72px;
}
.cm-tete { max-width: 720px; margin-bottom: 30px; }
.cm-tete h1 {
    font-size: clamp(26px, 3.4vw, 38px);
    line-height: 1.15;
    margin-bottom: 12px;
}
.cm-intro { color: var(--sp-encre-douce); font-size: 16px; }

.cm-choix {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 22px;
    align-items: stretch;
}
.cm-carte {
    display: flex;
    flex-direction: column;
    background: var(--sp-carte);
    border: 1px solid var(--sp-ligne);
    border-radius: 18px;
    padding: 24px 24px 22px;
}
/* Paiement en ligne : la carte mise en avant. */
.cm-carte-reco {
    background: #F1F7F3;
    border: 1px solid #BFD9CB;
    border-left: 5px solid var(--eco-pin);
}
/* Mode deja choisi (retour depuis l'espace). */
.cm-actuel { box-shadow: 0 0 0 3px var(--sp-ocre-pale); }

.cm-tag {
    align-self: flex-start;
    background: var(--sp-ocre-pale);
    color: var(--eco-terre-fonce);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    border-radius: 99px;
    padding: 4px 12px;
    margin-bottom: 10px;
}
.cm-carte h2 { font-size: 24px; margin-bottom: 4px; }
.cm-prix { font-size: 15px; color: var(--sp-encre-douce); margin-bottom: 10px; }
.cm-prix b { color: var(--sp-vert); font-size: 18px; }
.cm-resume { font-size: 15px; color: var(--sp-encre); margin-bottom: 14px; }

.cm-liste {
    list-style: none;
    display: grid;
    gap: 10px;
    margin-bottom: 16px;
}
.cm-liste li {
    position: relative;
    padding-left: 24px;
    font-size: 14.5px;
    line-height: 1.45;
    color: var(--sp-encre);
}
.cm-liste li::before {
    content: "✓";
    position: absolute;
    left: 2px;
    top: 0;
    font-weight: 700;
    color: var(--sp-feuille);
}
.cm-liste b { color: var(--sp-vert); }

.cm-plus {
    background: #fff;
    border: 1px solid var(--eco-ligne);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 16px;
    font-size: 13.5px;
    color: var(--sp-encre-douce);
}
.cm-plus b { color: var(--sp-vert); }

/* Le bouton descend en bas de chaque carte : alignes cote a cote. */
.cm-carte .sp-btn { margin-top: auto; }

.cm-pied {
    margin-top: 22px;
    font-size: 14px;
    color: var(--sp-encre-douce);
    text-align: center;
}

@media (max-width: 800px) {
    .cm-choix { grid-template-columns: 1fr; }
    .cm-page { padding-top: 32px; }
}

/* ── Fenetre "Votre compte est cree" (I_ChoixModeAnnonce.php) ───── */
.cm-bienvenue {
    width: min(440px, calc(100% - 32px));
    margin: auto;            /* centrage : la remise a zero globale des marges le casse */
    border: 0;
    border-radius: 20px;
    padding: 32px 30px 26px;
    background: var(--eco-creme, #FBF6EE);
    color: var(--eco-texte, #3E3530);
    text-align: center;
    box-shadow: 0 24px 60px rgba(30, 25, 22, .28);
}
.cm-bienvenue::backdrop {
    background: rgba(30, 25, 22, .55);
}
.cm-bienvenue[open] {
    animation: cm-bienvenue-entree .22s ease-out;
}
@keyframes cm-bienvenue-entree {
    from { opacity: 0; transform: translateY(10px) scale(.98); }
    to   { opacity: 1; transform: none; }
}
.cm-bienvenue-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--eco-pin-pale, #DCEBE2);
    color: var(--eco-pin, #1F4D3A);
    margin-bottom: 14px;
}
.cm-bienvenue-icone svg { width: 28px; height: 28px; }
.cm-bienvenue h2 {
    font-family: var(--eco-police-titre, 'Fraunces', serif);
    font-size: 26px;
    color: var(--eco-encre, #2B2420);
    margin: 0 0 10px;
}
.cm-bienvenue p {
    font-size: 15.5px;
    line-height: 1.55;
    margin: 0 0 10px;
    overflow-wrap: anywhere;
}
.cm-bienvenue b { color: var(--eco-encre, #2B2420); }
.cm-bienvenue-suite { color: var(--eco-texte-doux, #6B5D52); }
.cm-bienvenue form { margin: 18px 0 0; }
.cm-bienvenue-bouton {
    display: inline-block;
    min-width: 180px;
    padding: 12px 22px;
    border: 0;
    border-radius: 10px;
    background: var(--eco-terre, #B5532E);
    color: var(--eco-creme, #FBF6EE);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s ease;
}
.cm-bienvenue-bouton:hover,
.cm-bienvenue-bouton:focus-visible { background: var(--eco-terre-fonce, #9A4424); }

/* ==================================================================
   Page "Publier mon logement" (2026.11.06-01) — prefixe ip-
   ================================================================== */

/* ── Entete : liens secondaires masques sur petit ecran ──────────── */
.ip-nav { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
@media (max-width: 760px) { .ip-nav-large { display: none; } }

/* ── Accroche + carte d'inscription ─────────────────────────────── */
.ip-haut { display: flex; flex-wrap: wrap; gap: 40px 56px; align-items: center; padding-top: 56px; padding-bottom: 64px; }
.ip-accroche { flex: 1 1 500px; min-width: 0; }
.ip-accroche h1 { font-size: clamp(34px, 4.4vw, 52px); line-height: 1.08; letter-spacing: -.02em; margin: 0 0 18px; }
.ip-accroche h1 em { font-style: italic; color: var(--eco-terre); }
.ip-lead { font-size: 19px; line-height: 1.6; color: var(--eco-texte); max-width: 56ch; margin: 0 0 22px; }
.ip-lead b { color: var(--eco-encre); }
.ip-atouts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 16px; font-weight: 600; color: var(--eco-encre); }
.ip-atouts li { display: flex; align-items: center; gap: 10px; }
.ip-atouts li > svg:not(.ev-drapeau) { flex: none; color: var(--eco-pin); }
.ip-carte { flex: 1 1 380px; min-width: 0; max-width: 460px; margin: 0 auto; box-shadow: 0 2px 10px rgba(43, 36, 32, .07), 0 18px 40px rgba(43, 36, 32, .10); }

/* ── Sections ───────────────────────────────────────────────────── */
.ip-section { padding-top: 0; padding-bottom: 80px; }
.ip-section > h2, .ip-bande h2, .ip-sync h2 { font-size: clamp(26px, 3vw, 36px); line-height: 1.15; margin: 0 0 12px; }
.ip-intro { color: var(--eco-texte-doux); font-size: 18px; max-width: 60ch; margin: 0 0 32px; }

/* ── Argument Airbnb + simulateur ───────────────────────────────── */
.ip-frais { background: var(--eco-encre); color: var(--eco-sable); border-radius: 24px; padding: 44px; display: flex; flex-wrap: wrap; gap: 40px; align-items: center; }
.ip-frais-texte { flex: 1 1 420px; min-width: 0; }
.ip-frais-texte h2 { color: #fff; font-size: clamp(24px, 2.8vw, 34px); line-height: 1.15; margin: 0 0 14px; }
.ip-frais-texte h2 sup { font-size: .45em; }
.ip-frais-texte p { margin: 0 0 22px; font-size: 17px; line-height: 1.6; max-width: 52ch; }
.ip-sur { margin: 0 0 12px !important; font-size: 13px !important; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--eco-terre-clair); }
.ip-frais label { display: block; font-weight: 700; color: #fff; margin-bottom: 6px; }
.ip-frais label span { color: var(--eco-terre-clair); }
.ip-frais input[type="range"] { width: 100%; accent-color: var(--eco-terre-clair); height: 28px; }
.ip-bornes { display: flex; justify-content: space-between; font-size: 13px; color: #D9CBB7; }
.ip-frais-chiffres { flex: 1 1 360px; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ip-chiffre { background: #3E3530; border-radius: 16px; padding: 20px; }
.ip-chiffre p { margin: 0 0 6px; font-size: 14px; color: #D9CBB7; }
.ip-chiffre .ip-chiffre-val { margin: 0; font-family: var(--eco-police-titre); font-size: 30px; font-weight: 700; color: #fff; }
.ip-chiffre--eco { background: var(--eco-pin-pale); }
.ip-chiffre--eco p, .ip-chiffre--eco .ip-chiffre-val { color: var(--eco-pin); }
.ip-gain, .ip-note { grid-column: 1 / -1; margin: 0; }
.ip-gain b { color: #fff; }
.ip-note { font-size: 12px; line-height: 1.5; color: #D9CBB7; }

/* ── Trois etapes ───────────────────────────────────────────────── */
.ip-etapes { list-style: none; counter-reset: ip-etape; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.ip-etapes li { counter-increment: ip-etape; background: #fff; border: 1px solid var(--eco-ligne); border-radius: 18px; padding: 26px; }
.ip-etapes li::before { content: counter(ip-etape); display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--eco-terre-pale); color: var(--eco-terre-fonce); font-family: var(--eco-police-titre); font-weight: 700; font-size: 22px; margin-bottom: 14px; }
.ip-etapes h3 { font-size: 19px; margin: 0 0 8px; }
.ip-etapes p { margin: 0; line-height: 1.6; color: var(--eco-texte); }

/* ── Bandes pleine largeur (piliers, annonces verifiees) ────────── */
.ip-bande { background: var(--eco-sable); padding: 72px 0; margin-bottom: 80px; }
.ip-bande--blanc { background: #fff; border-top: 1px solid var(--eco-ligne); border-bottom: 1px solid var(--eco-ligne); }
.ip-bande h2 { margin-bottom: 32px; }
.ip-piliers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.ip-piliers--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ip-piliers > div { background: #fff; border-radius: 18px; padding: 24px; }
.ip-bande--blanc .ip-piliers > div { background: transparent; padding: 0; }
.ip-piliers h3 { font-size: 18px; margin: 0 0 8px; }
.ip-piliers p { margin: 0; line-height: 1.6; color: var(--eco-texte); }

/* ── Synchronisation des calendriers ────────────────────────────── */
.ip-sync { display: flex; flex-wrap: wrap; gap: 40px; align-items: center; }
.ip-sync > div { flex: 1 1 440px; min-width: 0; }
.ip-sync p { font-size: 18px; line-height: 1.6; margin: 0; }
.ip-sync-lien { display: flex; align-items: flex-start; gap: 16px; margin: 22px 0 0; padding: 18px 20px; background: var(--eco-pin-pale); border: 1px solid #BFD9CB; border-left: 5px solid var(--eco-pin); border-radius: 14px; }
.ip-sync-lien svg { flex: none; box-sizing: border-box; width: 46px; height: 46px; padding: 11px; border-radius: 50%; background: var(--eco-pin); color: #fff; }
.ip-sync-lien b { display: block; font-size: 19px; line-height: 1.3; margin: 2px 0 6px; color: var(--eco-encre); }
.ip-sync-lien span { display: block; font-size: 16px; line-height: 1.55; color: var(--eco-texte); }
.ip-sync-liste { flex: 1 1 340px; min-width: 0; list-style: none; margin: 0; padding: 22px; display: grid; gap: 12px; background: #fff; border: 1px solid var(--eco-ligne); border-radius: 18px; }
.ip-sync-liste li { display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--eco-sable); }
.ip-sync-liste b { color: var(--eco-encre); }
.ip-sync-liste span { font-size: 14px; font-weight: 700; color: var(--eco-pin); }

/* ── Outils ImmoKitLoc ──────────────────────────────────────────── */
/* Encart ImmoKitLoc : aux couleurs de la charte ImmoKitLoc (sarcelle / ardoise) */
.ip-outils { display: flex; flex-wrap: wrap; gap: 20px 32px; align-items: center; justify-content: space-between; background: #E0F2F1; border: 1px solid #C5E3E0; border-radius: 20px; padding: 32px; }
.ip-outils > div { flex: 1 1 460px; min-width: 0; }
.ip-outils-logo { display: block; height: 28px; width: auto; margin: 0 0 14px; }
.ip-outils h2 { font-size: 24px; margin: 0 0 8px; color: #263238; }
.ip-outils p { margin: 0; line-height: 1.6; color: #455A64; }
.sp-body a.ip-bouton-ikl { color: #fff; background: #1E7D74; font-weight: 800; text-decoration: none; border-radius: 12px; padding: 13px 22px; white-space: nowrap; }
.sp-body a.ip-bouton-ikl:hover { background: #18665F; }

/* ── FAQ ────────────────────────────────────────────────────────── */
.ip-faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 48px; align-items: start; }
.ip-faq-tete { position: sticky; top: 96px; }
.ip-faq .ip-faq-tete h2 { font-size: clamp(26px, 3vw, 36px); line-height: 1.15; margin: 0 0 10px; }
.ip-faq-intro { margin: 0; line-height: 1.6; color: var(--eco-texte-doux); }
.ip-faq-contact { margin-top: 18px; padding: 16px 18px; background: var(--eco-sable); border-radius: 12px; line-height: 1.6; color: var(--eco-texte); }
.ip-faq-contact p { margin: 0 0 12px; }
.sp-body .ip-faq-bouton { display: inline-block; background: var(--eco-terre); color: #fff; font-weight: 700; text-decoration: none; padding: 10px 18px; border-radius: 10px; }
.sp-body .ip-faq-bouton:hover { background: var(--eco-terre-fonce); }
.ip-faq details[open] { border-color: var(--eco-terre); box-shadow: 0 6px 18px rgba(43, 36, 32, .06); }
.ip-faq details { background: #fff; border: 1px solid var(--eco-ligne); border-radius: 14px; padding: 18px 22px; margin-bottom: 12px; }
.ip-faq summary { cursor: pointer; font-weight: 700; font-size: 17px; color: var(--eco-encre); }
.ip-faq details p, .ip-faq details ol { margin: 10px 0 0; line-height: 1.6; color: var(--eco-texte); }
.ip-faq details ol { padding-left: 22px; }

/* ── Appel final + source ───────────────────────────────────────── */
.ip-final { background: var(--eco-terre); color: #fff; border-radius: 22px; padding: 44px 24px; text-align: center; }
.ip-final h2 { color: #fff; font-size: clamp(26px, 3vw, 36px); margin: 0 0 10px; }
.ip-final p { margin: 0 0 24px; font-size: 18px; }
.sp-body .ip-final a { display: inline-block; background: #fff; color: var(--eco-terre-fonce); font-weight: 800; text-decoration: none; padding: 15px 26px; border-radius: 12px; }
.ip-source { margin: 20px 0 0; font-size: 12px; line-height: 1.6; color: var(--eco-texte-doux); }

@media (max-width: 960px) {
    .ip-etapes, .ip-piliers, .ip-piliers--3 { grid-template-columns: 1fr 1fr; }
    .ip-faq { grid-template-columns: 1fr; gap: 20px; }
    .ip-faq-tete { position: static; }
}
@media (max-width: 640px) {
    .ip-haut { padding-top: 28px; padding-bottom: 44px; }
    .ip-section { padding-bottom: 56px; }
    .ip-bande { padding: 48px 0; margin-bottom: 56px; }
    .ip-frais { padding: 26px 20px; }
    .ip-etapes, .ip-piliers, .ip-piliers--3 { grid-template-columns: 1fr; }
    .ip-outils { padding: 24px 20px; }
}

/* ── Votre propre site de location (argument principal) ───────────── */
.ip-minisite {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 56px;
    align-items: center;
}
.ip-minisite h2 { font-size: clamp(28px, 3.2vw, 40px); line-height: 1.12; margin: 6px 0 14px; }
.ip-minisite-lead { font-size: 17px; line-height: 1.65; color: var(--eco-texte); margin: 0 0 26px; }
.ip-minisite-points { list-style: none; padding: 0; margin: 0; display: grid; gap: 20px; }
.ip-minisite-points li { display: flex; gap: 16px; align-items: flex-start; }
.ip-minisite-points h3 { font-size: 18px; margin: 0 0 4px; }
.ip-minisite-points p { font-size: 15.5px; line-height: 1.6; color: var(--eco-texte-doux); margin: 0; }
.ip-minisite-icone {
    flex: none; width: 46px; height: 46px; border-radius: 12px;
    background: var(--eco-terre-pale); color: var(--eco-terre-fonce);
    display: flex; align-items: center; justify-content: center;
}
.ip-minisite-icone svg { width: 24px; height: 24px; }

/* Apercu dessine d'une page de mini-site */
.ip-navigateur {
    background: #fff; border: 1px solid var(--eco-ligne); border-radius: 16px;
    overflow: hidden; box-shadow: 0 18px 40px rgba(43, 36, 32, .10);
}
.ip-navigateur-barre {
    display: flex; align-items: center; gap: 6px; padding: 10px 14px;
    background: var(--eco-sable); border-bottom: 1px solid var(--eco-ligne);
}
.ip-navigateur-barre span { width: 9px; height: 9px; border-radius: 50%; background: var(--eco-champ); }
.ip-navigateur-barre b {
    margin-left: 10px; flex: 1; background: #fff; border-radius: 99px; padding: 5px 12px;
    font-size: 13px; font-weight: 600; color: var(--eco-texte-doux); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ip-navigateur-barre em { font-style: normal; color: var(--eco-terre-fonce); }
.ip-navigateur-page { padding: 20px; background: var(--eco-creme); display: grid; gap: 14px; }
.ip-apercu-tete { display: flex; align-items: center; gap: 12px; }
.ip-apercu-tete i { width: 44px; height: 44px; border-radius: 10px; background: var(--eco-terre); flex: none; }
.ip-apercu-tete b { display: block; font-family: var(--eco-police-titre); font-size: 19px; color: var(--eco-terre); }
.ip-apercu-tete small { font-size: 12.5px; color: var(--eco-texte-doux); }
.ip-apercu-cartes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ip-apercu-cartes i { display: block; aspect-ratio: 4 / 3; border-radius: 8px; background: var(--eco-sable); border: 1px solid var(--eco-ligne); }
.ip-apercu-cartes i:nth-child(2) { background: var(--eco-pin-pale); }
.ip-apercu-cartes i:nth-child(3) { background: var(--eco-terre-pale); }
.ip-apercu-ligne { height: 8px; border-radius: 99px; background: var(--eco-ligne); }
.ip-apercu-ligne--courte { width: 60%; }
.ip-apercu-hote { display: flex; align-items: center; gap: 10px; }
.ip-apercu-hote i { width: 30px; height: 30px; border-radius: 50%; background: var(--eco-champ); flex: none; }
.ip-apercu-hote .ip-apercu-ligne { flex: 1; }
.ip-apercu-legende { text-align: center; font-size: 13.5px; color: var(--eco-texte-doux); margin: 12px 0 0; }

@media (max-width: 900px) {
    .ip-minisite { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}