/* ===========================================================================
   PAGES SOMBRES — « Notre vision », « La méthode ».

   Ces pages n'ont rien à vendre : elles expliquent. Le fond noir les détache
   du parcours commercial (catalogue, compte, dépôt) et leur donne le temps
   long. Elles partagent donc un seul système, ici — sinon elles auraient
   divergé dès la première retouche.

   Conséquence : toutes les couleurs sont posées explicitement. Rien n'est
   hérité d'une page claire, sinon le texte deviendrait illisible.
   =========================================================================== */

    .v-page{
        --v-noir:#0B0B0C;
        --v-carte:#141416;
        --v-carte-2:#17171A;
        --v-filet:#26262B;
        --v-filet-clair:#333338;
        --v-blanc:#FFFFFF;
        --v-gris:#B4AFAB;
        --v-gris-2:#837D78;
        --v-marque:#FF385C;
        --v-marque-clair:#FF617D;
    }


    /* ================================================================
       VARIANTE CLAIRE
       ================================================================
       La meme page, sur fond blanc. Rien n'est duplique : seules les onze
       variables de palette sont redefinies, et les 1 300 lignes de mise en
       page en heritent telles quelles.

       CE N'EST PAS UNE SIMPLE INVERSION. Un fond sombre pardonne des gris
       peu contrastes ; sur du blanc, les memes gris deviennent illisibles.
       Les tons de texte sont donc choisis pour leur contraste reel, pas
       pour leur symetrie :

         --v-gris    5,7:1 sur blanc  (texte courant)
         --v-gris-2  4,6:1            (mentions secondaires)

       Le rouge de marque, lui, ne bouge pas : c'est l'identite, elle doit
       etre la meme d'une page a l'autre. */
    .v-page.v-clair{
        --v-noir:#FFFFFF;          /* le fond de page */
        --v-carte:#F7F5F2;         /* les cartes, a peine detachees du fond */
        --v-carte-2:#FFFFFF;
        --v-filet:#E4DFD9;
        --v-filet-clair:#D6CFC7;
        --v-blanc:#14212B;         /* ce qui etait blanc devient l'encre */
        --v-gris:#55606B;
        /* #6E7883 tombait a 4,49 sur blanc — juste sous le seuil AA. Sur
           fond sombre le meme gris passait tres bien : c'est exactement le
           piege d'une inversion faite par symetrie plutot que par mesure. */
        --v-gris-2:#636D77;
        --v-marque:#FF385C;
        --v-marque-clair:#CA0025;  /* la variante claire du sombre serait
                                      illisible sur blanc : on prend la
                                      version encre, celle des textes */
    }

    body.v-body.v-clair-body{
        background:#FFFFFF;
        color:#14212B;
    }

    /* Les surfaces qui portaient une couleur EN DUR — un aplat noir, un
       liseré — doivent suivre elles aussi, sinon il reste des ilots sombres
       au milieu de la page. */
    .v-page.v-clair .v-sec--noir,
    .v-page.v-clair .v-bandeau{
        background:var(--v-carte);
        color:var(--v-blanc);
    }

    .v-page.v-clair .v-carte{
        background:var(--v-carte);
        border-color:var(--v-filet);
    }

    /* Les pictogrammes du systeme sombre sont dessines en blanc : sur fond
       clair ils disparaitraient purement et simplement. */
    .v-page.v-clair .v-ico-boite{
        background:#14212B;
        color:#FFFFFF;
    }

    .v-page.v-clair .v-ico-boite svg{color:#FFFFFF}

    /*
     * LA BARRE DE NAVIGATION RESTE SOMBRE, ET SON TEXTE DOIT LE RESTER.
     *
     * Elle est A L'INTERIEUR de .v-page : elle heritait donc de la palette
     * claire tout en gardant son fond noir — le numero de telephone
     * s'affichait en encre sombre sur noir, contraste 1,20, illisible.
     * On lui rend sa palette d'origine plutot que de la repeindre : un
     * bandeau sombre en tete d'une page blanche est un choix, pas un defaut.
     */
    .v-page.v-clair .v-nav{
        --v-blanc:#FFFFFF;
        --v-gris:#B4AFAB;
        --v-gris-2:#837D78;
        --v-filet:#26262B;
    }

    /*
     * LE BANDEAU FINAL EST SOMBRE, MEME SUR UNE PAGE BLANCHE — son texte
     * doit donc l'etre aussi.
     *
     * Exactement le meme piege que le numero de telephone de la barre haute,
     * et pour la meme raison : le bandeau garde son fond fonce, mais ses
     * textes prenaient l'encre de la page claire. Titre et boutons se
     * retrouvaient en bleu nuit — #14212B — sur un degrade bordeaux.
     * Illisibles.
     *
     * MON AUDIT DE CONTRASTE NE L'AVAIT PAS VU, et c'est le plus instructif :
     * le fond de ce bandeau n'est pas une couleur mais un DEGRADE, pose en
     * background-image. Ma fonction ne lisait que background-color, l'a
     * trouve transparent, et a conclu « texte fonce sur fond blanc » —
     * parfaitement lisible. L'audit sait desormais lire les degrades.
     *
     * On rend au bandeau sa palette d'origine plutot que de repeindre chaque
     * element : un seul endroit a corriger le jour ou la palette bouge.
     */
    .v-page.v-clair .v-final{
        --v-blanc:#FFFFFF;
        --v-gris:#B4AFAB;
        --v-gris-2:#9A948F;
        --v-filet:#26262B;
        --v-filet-clair:#3A3A42;
        color:#FFFFFF;
    }

    /*
     * LE VERT DES TARIFS ETAIT DESSINE POUR LE NOIR.
     *
     * #5FD6A0 tombe a 1,66 sur fond clair — « Gratuit » et « 0 % », les deux
     * mots qui doivent sauter aux yeux, devenaient les plus pales de la page.
     */
    /*
     * ON PREFIXE LES MEMES SELECTEURS, on n'en invente pas de plus lourds.
     *
     * La regle d'origine est « .v-tarif-etapes li.is-ok .v-tarif-combien » :
     * trois classes et un element. Un simple « .v-clair .v-tarif-combien »
     * perdait la bataille de specificite en silence — la couleur ne changeait
     * pas et rien ne le signalait. En reprenant le selecteur d'origine
     * prefixe, on gagne toujours d'exactement une classe, sans surenchere
     * ni !important.
     */
    .v-page.v-clair .v-tarif-combien,
    .v-page.v-clair .v-tarif-etapes li.is-ok .v-tarif-combien,
    .v-page.v-clair .v-tarif--pro .v-tarif-etapes li.is-phare .v-tarif-combien{color:#0E7A52}

    /*
     * LE ROUGE DE MARQUE EN PETIT TEXTE.
     *
     * #FF385C donne 3,52 sur blanc : suffisant pour un grand titre, pas pour
     * une surtitre en petites capitales. On prend sa variante encre, la meme
     * que celle des textes du site, qui garde la teinte et gagne le
     * contraste.
     */
    .v-page.v-clair .v-eyebrow,
    .v-page.v-clair .v-guillemet{color:#CA0025}

    /* La pastille centrale de la balance restait un ilot noir au milieu
       d'une page blanche. */
    .v-page.v-clair .v-balance{
        background:#14212B;
        color:#FFFFFF;
        border-color:var(--v-filet);
    }

    .v-page *{box-sizing:border-box;margin:0;padding:0}

    /*
     * COULEUR LITTERALE, ET SURTOUT PAS UNE VARIABLE.
     *
     * Cette ligne a dit « color:var(--v-blanc) » pendant une journee, et les
     * trois pages sombres ont eu leurs TITRES EN NOIR SUR NOIR : « Reinventer
     * l'achat immobilier », « Pourquoi Trylidays fait la difference »,
     * « Explorez nos destinations ». Illisibles.
     *
     * La raison est une regle de CSS qu'on oublie facilement : --v-blanc est
     * declaree sur .v-page, qui est un ENFANT de body. Une variable descend,
     * elle ne remonte jamais. Sur body, elle n'existait donc pas ; la
     * declaration devenait invalide, et la couleur retombait au noir par
     * defaut.
     *
     * Les paragraphes, eux, restaient blancs — ils prennent leur couleur a
     * l'interieur de .v-page, la ou la variable existe. C'est ce qui rendait
     * le defaut discret : seuls les titres, qui heritent du body, tombaient.
     *
     * La page claire ne l'a jamais eu : body.v-clair-body pose « #14212B »,
     * une couleur litterale. C'est ce qu'on fait ici aussi.
     */
    body.v-body{
        font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
        background:#0B0B0C;
        color:#FFFFFF;
        -webkit-font-smoothing:antialiased;
    }

    .v-page a{color:inherit;text-decoration:none}

    .v-page :focus-visible{
        outline:2px solid var(--v-marque-clair);
        outline-offset:3px;
        border-radius:4px;
    }

    .v-in{max-width:1240px;margin:0 auto;padding:0 5vw}

    /* ---------- Barre haute ---------- */
    .v-nav{
        position:sticky;
        top:0;
        z-index:30;
        display:flex;
        align-items:center;
        gap:24px;
        padding:15px 5vw;
        background:rgba(11,11,12,.86);
        backdrop-filter:saturate(150%) blur(14px);
        -webkit-backdrop-filter:saturate(150%) blur(14px);
        border-bottom:1px solid var(--v-filet);
    }

    .v-logo{
        font-size:22px;
        font-weight:800;
        letter-spacing:-.055em;
        color:var(--v-blanc);
    }

    .v-logo span{color:var(--v-marque)}

    /*
     * LA MEME BARRE QUE SUR L'ACCUEIL.
     *
     * L'accueil et ces pages ont deux barres distinctes — .tl-nav et .v-nav —
     * et elles avaient diverge : blanc 14 px graisse 500 d'un cote, gris
     * #B4AFAB 14,5 px graisse 550 de l'autre. En passant d'une page a
     * l'autre, le menu changeait de teinte et de graisse sous les yeux du
     * visiteur : le genre de detail qui fait « bricole » sans qu'on sache
     * dire pourquoi.
     *
     * Les trois valeurs sont alignees sur l'accueil. Le blanc gagne aussi en
     * lisibilite : 9,05 de contraste sur la barre sombre contre 5,6 pour le
     * gris.
     */
    .v-nav-liens{
        display:flex;
        align-items:center;
        gap:30px;
        margin-left:auto;
        font-size:14px;
        font-weight:500;
        color:#FFFFFF;
    }

    .v-nav-liens a:hover{color:var(--v-blanc)}

    /*
     * LE NUMERO DE TELEPHONE DISPARAISSAIT SUR LES PAGES CLAIRES.
     *
     * « .v-page a{color:inherit} » pese 0,1,1 ; « .v-contact{color:...} »
     * ne pese que 0,1,0. C'est donc inherit qui gagnait, et le bouton
     * prenait la couleur du corps de page.
     *
     * Sur fond noir cela ne se voyait pas : le corps etait deja blanc,
     * l'heritage donnait la bonne couleur par accident. Le jour ou la page
     * est passee en blanc, l'encre du corps est devenue #14212B — et le
     * numero s'est retrouve en bleu nuit sur une barre noire, a 1,19 de
     * contraste. Illisible, mesure.
     *
     * On ne touche pas a la regle d'origine : on la double d'un selecteur
     * qui pese assez lourd pour ne plus dependre d'un heritage.
     */
    .v-nav .v-contact{color:var(--v-blanc)}

    .v-contact{
        display:inline-flex;
        align-items:center;
        gap:9px;
        min-height:44px;
        padding:0 20px;
        border:1px solid var(--v-marque);
        border-radius:100px;
        font-size:14px;
        font-weight:650;
        color:var(--v-blanc);
        font-variant-numeric:tabular-nums;
        transition:background .18s ease;
    }

    .v-contact:hover{background:var(--v-marque)}

    /* Sous 980 px la barre garde le logo et le contact : les liens vivent
       déjà dans le menu de l'accueil, les répéter ici serrerait la barre. */
    @media(max-width:980px){
        .v-nav-liens{display:none}
        .v-contact{margin-left:auto}
    }

    /* ---------- Héros ---------- */
    .v-hero{
        display:grid;
        grid-template-columns:minmax(0,1fr) minmax(0,1fr);
        align-items:stretch;
        border-bottom:1px solid var(--v-filet);
    }

    .v-hero-txt{
        display:flex;
        flex-direction:column;
        justify-content:center;
        padding:clamp(48px,6vw,86px) clamp(28px,5vw,72px) clamp(48px,6vw,86px) 5vw;
    }

    .v-eyebrow{
        display:block;
        margin-bottom:20px;
        font-size:12px;
        font-weight:700;
        letter-spacing:.18em;
        text-transform:uppercase;
        color:var(--v-marque);
    }

    .v-hero h1{
        /* 16ch et non 15 : a 15, « Parce qu'acheter un lieu de vie merite
           mieux qu'une simple visite » tombait sur quatre lignes dont une
           tres courte. */
        max-width:16ch;
        font-size:clamp(34px,3.9vw,50px);
        font-weight:780;
        line-height:1.12;
        letter-spacing:-.032em;
        text-wrap:balance;
    }

    .v-hero-lead{
        max-width:52ch;
        margin-top:24px;
        font-size:16px;
        line-height:1.72;
        color:var(--v-gris);
    }

    .v-actions{
        display:flex;
        flex-wrap:wrap;
        align-items:center;
        gap:14px 26px;
        margin-top:34px;
    }

    .v-btn{
        display:inline-flex;
        align-items:center;
        gap:12px;
        min-height:52px;
        padding:0 28px;
        border-radius:100px;
        background:var(--v-marque);
        color:var(--v-blanc);
        font-size:15.5px;
        font-weight:680;
        border:0;
        cursor:pointer;
        font-family:inherit;
        transition:background .18s ease,transform .18s ease;
    }

    .v-btn:hover{background:var(--v-marque-clair);transform:translateY(-1px)}

    .v-btn-nu{
        display:inline-flex;
        align-items:center;
        gap:10px;
        min-height:52px;
        padding:0 4px;
        border:0;
        border-bottom:1px solid var(--v-filet-clair);
        background:none;
        color:var(--v-blanc);
        font-size:15.5px;
        font-weight:650;
        font-family:inherit;
        cursor:pointer;
        transition:border-color .18s ease,color .18s ease;
    }

    .v-btn-nu:hover{border-color:var(--v-marque);color:var(--v-marque-clair)}

    .v-fleche{width:17px;height:17px;flex:none}

    .v-hero-img{position:relative;min-height:340px;overflow:hidden}

    .v-hero-img img{
        position:absolute;
        inset:0;
        width:100%;
        height:100%;
        object-fit:cover;
    }

    /* Fondu vers le noir : la photo entre dans la page au lieu d'y être collée. */
    .v-hero-img::after{
        content:"";
        position:absolute;
        inset:0;
        background:linear-gradient(90deg,rgba(11,11,12,.96) 0%,rgba(11,11,12,.35) 26%,rgba(11,11,12,0) 58%);
    }

    @media(max-width:900px){
        .v-hero{grid-template-columns:minmax(0,1fr)}
        .v-hero-txt{order:2;padding:40px 5vw 52px}
        .v-hero-img{order:1;min-height:250px;aspect-ratio:16/10}
        .v-hero-img::after{
            background:linear-gradient(180deg,rgba(11,11,12,.25) 0%,rgba(11,11,12,.1) 40%,rgba(11,11,12,.98) 100%);
        }
        .v-hero h1{max-width:none}
    }

    /* ---------- Titres de section ---------- */
    .v-sec{padding:clamp(56px,7vw,96px) 0}

    .v-sec-t{
        margin:0 auto 12px;
        max-width:34ch;
        font-size:clamp(25px,3vw,34px);
        font-weight:760;
        line-height:1.16;
        letter-spacing:-.026em;
        text-align:center;
        text-wrap:balance;
    }

    /* Le tiret sous le titre est le seul ornement de la page : il rythme,
       il ne décore pas. */
    .v-tiret{
        width:44px;
        height:2px;
        margin:0 auto clamp(34px,4vw,52px);
        background:var(--v-marque);
        border-radius:2px;
    }

    /* ---------- Cartes ---------- */
    .v-grille{
        display:grid;
        gap:20px;
        grid-template-columns:repeat(auto-fit,minmax(268px,1fr));
    }

    .v-carte{
        display:flex;
        flex-direction:column;
        padding:26px 26px 28px;
        background:var(--v-carte);
        border:1px solid var(--v-filet);
        border-radius:16px;
        transition:border-color .2s ease,background .2s ease,transform .2s ease;
    }

    .v-carte:hover{
        border-color:var(--v-filet-clair);
        background:var(--v-carte-2);
        transform:translateY(-2px);
    }

    .v-ico-boite{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        flex:none;
        width:46px;
        height:46px;
        margin-bottom:20px;
        border:1px solid rgba(255, 56, 92,.42);
        border-radius:12px;
        color:var(--v-marque);
    }

    .v-ico{width:22px;height:22px}

    .v-carte-t{
        margin-bottom:11px;
        font-size:16.5px;
        font-weight:700;
        line-height:1.34;
        letter-spacing:-.014em;
        color:var(--v-blanc);
        text-wrap:balance;
    }

    .v-carte-p{
        font-size:14.8px;
        line-height:1.66;
        color:var(--v-gris-2);
    }

    /* Cartes à icône en ligne (« Ce que nous voulons changer ») : le titre
       tient à côté de l'icône, le texte passe dessous. */
    .v-carte--ligne .v-ico-boite{width:40px;height:40px;margin:0}
    .v-carte--ligne .v-ico{width:19px;height:19px}

    .v-carte-tete{
        display:flex;
        align-items:center;
        gap:14px;
        margin-bottom:16px;
    }

    .v-carte--ligne .v-carte-t{margin:0;font-size:15.5px}

    /* ---------- Notre conviction ---------- */
    .v-conv{
        display:grid;
        grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
        align-items:stretch;
        border-top:1px solid var(--v-filet);
        border-bottom:1px solid var(--v-filet);
    }

    .v-conv-img{position:relative;min-height:330px;overflow:hidden}

    .v-conv-img img{
        position:absolute;
        inset:0;
        width:100%;
        height:100%;
        object-fit:cover;
    }

    .v-conv-img::after{
        content:"";
        position:absolute;
        inset:0;
        background:linear-gradient(270deg,rgba(11,11,12,.95) 0%,rgba(11,11,12,.28) 34%,rgba(11,11,12,0) 66%);
    }

    .v-conv-txt{
        display:flex;
        gap:clamp(20px,2.6vw,36px);
        align-items:flex-start;
        padding:clamp(44px,5.5vw,76px) 5vw clamp(44px,5.5vw,76px) clamp(24px,3vw,44px);
    }

    .v-guillemet{
        flex:none;
        font-size:clamp(62px,7vw,96px);
        font-weight:800;
        line-height:.72;
        color:var(--v-marque);
        /* Le glyphe porte son propre blanc en haut : on le remonte pour
           l'aligner sur la première ligne de la citation. */
        margin-top:-.06em;
    }

    .v-conv-dit{
        max-width:34ch;
        margin-bottom:22px;
        font-size:clamp(21px,2.3vw,29px);
        font-weight:700;
        line-height:1.28;
        letter-spacing:-.022em;
        text-wrap:balance;
    }

    .v-conv-p{
        max-width:56ch;
        font-size:15.5px;
        line-height:1.72;
        color:var(--v-gris);
    }

    @media(max-width:900px){
        .v-conv{grid-template-columns:minmax(0,1fr)}
        .v-conv-img{min-height:220px;aspect-ratio:16/9}
        .v-conv-img::after{
            background:linear-gradient(180deg,rgba(11,11,12,.2) 0%,rgba(11,11,12,.1) 45%,rgba(11,11,12,.96) 100%);
        }
        .v-conv-txt{padding:34px 5vw 46px;gap:16px}
    }

    /* ---------- Les 3 temps ---------- */
    .v-temps{
        display:grid;
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:24px;
        /* Place au-dessus des cartes pour la pastille numérotée, qui
           chevauche volontairement leur bord. */
        padding-top:22px;
    }

    .v-temps-item{position:relative}

    .v-num{
        position:absolute;
        top:-22px;
        left:22px;
        z-index:2;
        display:flex;
        align-items:center;
        justify-content:center;
        width:44px;
        height:44px;
        border-radius:100px;
        background:var(--v-marque);
        color:var(--v-blanc);
        font-size:17px;
        font-weight:750;
        font-variant-numeric:tabular-nums;
        box-shadow:0 0 0 5px var(--v-noir);
    }

    .v-temps .v-carte{height:100%;padding-top:34px}

    /* Le pointillé relie les trois temps : il dit qu'il s'agit d'une suite,
       pas de trois options. Il disparaît dès que les cartes s'empilent —
       une flèche horizontale entre des blocs verticaux ne veut plus rien dire. */
    .v-temps-item:not(:last-child)::after{
        content:"";
        position:absolute;
        top:0;
        left:calc(100% + 2px);
        width:20px;
        border-top:2px dashed rgba(255, 56, 92,.5);
    }

    @media(max-width:860px){
        .v-temps{grid-template-columns:minmax(0,1fr);gap:34px}
        .v-temps-item:not(:last-child)::after{display:none}
    }

    /* ---------- Bandeau final ---------- */
    .v-final{
        position:relative;
        overflow:hidden;

        /* LE BANDEAU FINAL ETAIT LE SEUL ELEMENT HORS COLONNE.
           Toute la page vit dans .v-in — max-width 1240 moins 5vw de
           respiration de chaque cote. Le bandeau, lui, n'avait qu'une marge
           de 5vw : sur un grand ecran il s'etalait sur 1728 px quand le
           reste de la page en tenait 1048. On reproduit ici exactement la
           boite de contenu de .v-in, a toutes les largeurs. */
        width:calc(100% - 10vw);
        max-width:calc(1240px - 10vw);
        margin:0 auto clamp(56px,7vw,90px);
        padding:clamp(44px,5.5vw,72px) clamp(24px,4vw,56px);
        border:1px solid rgba(255, 56, 92,.3);
        border-radius:22px;
        background:
            radial-gradient(120% 150% at 88% 50%,rgba(255, 56, 92,.24) 0%,rgba(255, 56, 92,0) 62%),
            linear-gradient(180deg,#151016 0%,#100D12 100%);
        text-align:center;
    }

    /* Arcs concentriques très fins, à droite : la seule texture de la page.
       Purement décoratifs, donc invisibles aux lecteurs d'écran. */
    .v-final::before{
        content:"";
        position:absolute;
        top:50%;
        right:-140px;
        width:520px;
        height:520px;
        transform:translateY(-50%);
        background:repeating-radial-gradient(circle at 50% 50%,
            rgba(255, 56, 92,.19) 0 1px,
            rgba(255, 56, 92,0) 1px 15px);
        pointer-events:none;
    }

    .v-final-in{position:relative;z-index:1}

    .v-final h2{
        max-width:20ch;
        margin:0 auto 30px;
        font-size:clamp(24px,3vw,33px);
        font-weight:760;
        line-height:1.2;
        letter-spacing:-.026em;
        text-wrap:balance;
    }

    .v-final-actions{
        display:flex;
        flex-wrap:wrap;
        justify-content:center;
        gap:14px;
    }

    .v-btn-cadre{
        display:inline-flex;
        align-items:center;
        gap:12px;
        min-height:52px;
        padding:0 28px;
        border:1px solid var(--v-filet-clair);
        border-radius:100px;
        background:none;
        color:var(--v-blanc);
        font-size:15.5px;
        font-weight:650;
        font-family:inherit;
        cursor:pointer;
        transition:border-color .18s ease,background .18s ease;
    }

    .v-btn-cadre:hover{border-color:var(--v-marque);background:rgba(255, 56, 92,.1)}

    @media(prefers-reduced-motion:reduce){
        .v-page *{transition:none!important}
        .v-btn:hover,.v-carte:hover{transform:none}
    }

/* ===========================================================================
   COMPOSANTS PROPRES À « LA MÉTHODE »
   =========================================================================== */

/* ---------- Les 4 étapes ----------
   Même principe que les 3 temps, en quatre colonnes et texte centré : ici
   l'icône est le repère, pas le titre. */
.v-etapes{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:22px;
    padding-top:22px;

    /* Les etapes sont numerotees par les pastilles rondes posees sur les
       cartes. Le marqueur decimal de la liste s'affichait EN PLUS, hors des
       cartes : « 1. » a gauche d'une pastille « 1 ». La liste ordonnee reste
       le bon balisage — c'est bien une sequence — mais sa numerotation
       native n'a plus rien a dessiner. */
    list-style:none;
}

.v-etapes .v-temps-item{text-align:center}

.v-etapes .v-num{left:50%;transform:translateX(-50%)}

.v-etapes .v-carte{
    height:100%;
    align-items:center;
    padding:40px 22px 26px;
}

.v-etapes .v-ico-boite{
    /* Cerclée plutôt que carrée : elle fait écho à la pastille numérotée
       posée juste au-dessus. */
    border-radius:100px;
    width:50px;
    height:50px;
}

.v-etapes .v-carte-p{text-align:center}

.v-etapes .v-temps-item:not(:last-child)::after{
    content:"";
    position:absolute;
    top:0;
    left:calc(100% + 2px);
    width:18px;
    border-top:2px dashed rgba(255, 56, 92,.5);
}

@media(max-width:1000px){
    .v-etapes{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 22px}
    /* En deux colonnes, le pointillé ne relierait plus que les paires :
       il dirait une suite qui n'existe pas dans cette disposition. */
    .v-etapes .v-temps-item::after{display:none!important}
}

@media(max-width:620px){
    .v-etapes{grid-template-columns:minmax(0,1fr)}
}

/* ---------- Cartes à icône et titre sur la même ligne ----------
   « Ce que vous validez vraiment » : le titre est court, l'icône le porte. */
.v-carte--titre .v-carte-tete{
    align-items:center;
    gap:15px;
    margin-bottom:14px;
}

.v-carte--titre .v-ico-boite{
    width:44px;
    height:44px;
    margin:0;
    border-radius:100px;
}

.v-carte--titre .v-carte-t{margin:0;font-size:16.5px}

/* ---------- Les deux côtés ----------
   Acheteur et vendeur face à face : c'est la forme qui porte l'argument —
   la même méthode sert les deux, elle n'arbitre pas entre eux. */
.v-duo{
    position:relative;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:56px;
}

.v-duo .v-carte{padding:30px 30px 32px}

.v-duo-tete{
    display:flex;
    align-items:center;
    gap:16px;
    margin-bottom:22px;
}

.v-duo-tete .v-ico-boite{
    width:52px;
    height:52px;
    margin:0;
    border-radius:100px;
    background:rgba(255, 56, 92,.1);
}

.v-duo-tete .v-ico{width:24px;height:24px}

.v-duo-t{
    font-size:21px;
    font-weight:730;
    letter-spacing:-.02em;
    color:var(--v-blanc);
}

.v-liste{list-style:none;margin:0;padding:0}

.v-liste li{
    display:flex;
    align-items:flex-start;
    gap:12px;
    padding:9px 0;
    font-size:14.8px;
    line-height:1.6;
    color:var(--v-gris);
}

.v-liste svg{
    flex:none;
    width:16px;
    height:16px;
    margin-top:3px;
    color:var(--v-marque);
}

/* La balance au centre : elle ne dit rien de plus que la mise en page, elle
   la scelle. Purement décorative, donc absente du flux de lecture. */
.v-balance{
    position:absolute;
    top:50%;
    left:50%;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:center;
    width:56px;
    height:56px;
    transform:translate(-50%,-50%);
    border:1px solid rgba(255, 56, 92,.42);
    border-radius:100px;
    background:#17111A;
    color:var(--v-marque);
    box-shadow:0 0 0 6px var(--v-noir);
}

.v-balance .v-ico{width:25px;height:25px}

@media(max-width:860px){
    .v-duo{grid-template-columns:minmax(0,1fr);gap:20px}
    /* Empilée, la balance viendrait masquer le haut de la seconde carte. */
    .v-balance{display:none}
}

/* ===========================================================================
   COMPOSANTS PROPRES À « POURQUOI NOUS »
   =========================================================================== */

/* ---------- Carte à titre en ligne, texte centré ---------- */
.v-carte--centre .v-carte-tete{
    align-items:center;
    gap:14px;
    margin-bottom:18px;
}

.v-carte--centre .v-ico-boite{
    width:44px;
    height:44px;
    margin:0;
    border-radius:100px;
}

.v-carte--centre .v-carte-t{margin:0;font-size:16px}

.v-carte--centre .v-carte-p{text-align:center}

/* ---------- Sans / Avec ----------
   La comparaison EST l'argument : les deux colonnes doivent se lire d'un
   seul regard. Seule celle de droite est teintée — c'est elle qu'on retient. */
.v-versus{
    position:relative;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:56px;
}

.v-versus-panneau{
    padding:28px 30px 32px;
    border:1px solid var(--v-filet);
    border-radius:16px;
    background:var(--v-carte);
}

.v-versus-panneau--avec{
    border-color:rgba(255, 56, 92,.42);
    background:linear-gradient(180deg,#1C0E16 0%,#150B12 100%);
}

.v-versus-t{
    margin-bottom:20px;
    font-size:20px;
    font-weight:730;
    letter-spacing:-.02em;
    text-align:center;
    color:var(--v-blanc);
}

.v-versus-panneau--avec .v-versus-t{color:var(--v-marque)}

/* Le bloc de liste se centre, mais son texte reste aligné à gauche : des
   phrases centrées se relisent mal dès qu'elles passent à la ligne. */
.v-versus .v-liste{
    width:fit-content;
    max-width:100%;
    margin-inline:auto;
}

.v-liste--sans li{color:var(--v-gris-2)}
.v-liste--sans svg{color:var(--v-gris-2)}

.v-vs{
    position:absolute;
    top:50%;
    left:50%;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:center;
    width:52px;
    height:52px;
    transform:translate(-50%,-50%);
    border:1px solid var(--v-filet-clair);
    border-radius:100px;
    background:#17171A;
    font-size:13.5px;
    font-weight:760;
    letter-spacing:.06em;
    color:var(--v-gris);
    box-shadow:0 0 0 6px var(--v-noir);
}

@media(max-width:860px){
    .v-versus{grid-template-columns:minmax(0,1fr);gap:20px}
    /* Empilé, le « VS » recouvrirait le haut du second panneau. */
    .v-vs{display:none}
}

/* ---------- Pourquoi les utilisateurs adhèrent ----------
   Icône à gauche, texte à droite : trois moments courts, qu'on lit en
   diagonale plutôt qu'en s'arrêtant sur chacun. */
.v-adhere{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:24px;
    padding-top:22px;
}

.v-adhere .v-carte{
    flex-direction:row;
    align-items:flex-start;
    gap:16px;
    height:100%;
    padding:32px 24px 26px;
}

.v-adhere .v-ico-boite{
    width:46px;
    height:46px;
    margin:0;
    border-radius:100px;
}

.v-adhere .v-carte-t{margin-bottom:7px;font-size:16px}

.v-adhere .v-temps-item:not(:last-child)::after{
    content:"";
    position:absolute;
    top:50%;
    left:calc(100% + 2px);
    width:20px;
    border-top:2px dashed rgba(255, 56, 92,.5);
}

@media(max-width:860px){
    .v-adhere{grid-template-columns:minmax(0,1fr);gap:34px}
    .v-adhere .v-temps-item::after{display:none!important}
}

/* ===========================================================================
   COMPOSANTS PROPRES À « DESTINATIONS »
   =========================================================================== */

/* Le point rose qui clôt le titre : Trylidays signe déjà son logo ainsi. */
.v-point{color:var(--v-marque)}

.v-dests{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:22px;
}

@media(max-width:1080px){.v-dests{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.v-dests{grid-template-columns:minmax(0,1fr)}}

.v-dest{
    /* La vignette est devenue un lien (elle etait un <article>) : sans ces
       deux lignes elle heriterait du souligne et du bleu de lien du
       navigateur, par-dessus le dessin. */
    text-decoration:none;
    color:inherit;
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    /* 3/4 : le format vertical du visuel. aspect-ratio plutôt qu'une hauteur
       fixe, sinon la carte casse dès que le texte passe à la ligne. */
    aspect-ratio:3/4;
    min-height:270px;
    padding:22px;
    overflow:hidden;
    border:1px solid var(--v-filet);
    border-radius:16px;
    background:var(--v-carte);
    transition:transform .22s ease,border-color .22s ease;
}

.v-dest:hover{transform:translateY(-3px);border-color:var(--v-filet-clair)}

.v-dest img,
.v-dest-art{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
}

/* Le voile : sans lui, le texte blanc se perdrait sur les parties claires
   du paysage. Il descend en s'opacifiant, jamais uniforme. */
.v-dest-voile{
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,
        rgba(9,9,11,.04) 0%,
        rgba(9,9,11,.22) 44%,
        rgba(9,9,11,.86) 78%,
        rgba(9,9,11,.96) 100%);
}

.v-dest-ico{
    position:absolute;
    top:18px;
    left:18px;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    border-radius:100px;
    background:var(--v-marque);
    color:var(--v-blanc);
    box-shadow:0 6px 18px rgba(0,0,0,.35);
}

.v-dest-ico .v-ico{width:21px;height:21px}

.v-dest-txt{position:relative;z-index:2}

.v-dest-t{
    margin-bottom:7px;
    font-size:18px;
    font-weight:730;
    letter-spacing:-.018em;
    color:var(--v-blanc);
}

.v-dest-p{
    font-size:14px;
    line-height:1.58;
    color:rgba(255,255,255,.76);
}

/* ---------- Paysages dessinés ----------
   Aucune photo de mer, de montagne ou de vignoble n'existe dans le thème, et
   les photos de la médiathèque appartiennent à des biens réels : illustrer
   « Bord de mer » avec la maison de quelqu'un serait faux.
   Chaque vignette est donc composée en CSS, à partir de trois teintes posées
   sur la carte. Le gabarit accepte une photo dès qu'il y en a une — elle
   remplace alors ce dessin sans rien changer d'autre. */
.v-dest-art{background:linear-gradient(180deg,var(--c1) 0%,var(--c2) 62%,var(--c2) 100%)}

.v-dest-art span{position:absolute;display:block}

/* Mer : bande d'eau, halo de soleil bas, ligne d'horizon. */
.v-dest--mer .v-l1{left:0;right:0;bottom:0;height:44%;background:linear-gradient(180deg,var(--c3) 0%,var(--c4) 100%)}
.v-dest--mer .v-l2{top:12%;right:14%;width:64px;height:64px;border-radius:100px;background:radial-gradient(circle,rgba(255,236,196,.85) 0%,rgba(255,236,196,0) 70%)}
.v-dest--mer .v-l3{left:0;right:0;bottom:44%;height:2px;background:rgba(255,255,255,.28)}

/* Montagne : deux sommets, un névé. */
.v-dest--montagne .v-l1{left:-12%;bottom:0;width:82%;height:62%;background:var(--c3);clip-path:polygon(50% 0,100% 100%,0 100%)}
.v-dest--montagne .v-l2{right:-16%;bottom:0;width:88%;height:76%;background:var(--c4);clip-path:polygon(50% 0,100% 100%,0 100%)}
.v-dest--montagne .v-l3{right:14%;bottom:60%;width:26%;height:12%;background:rgba(255,255,255,.5);clip-path:polygon(50% 0,100% 100%,0 100%)}

/* Campagne : collines qui se recouvrent. */
.v-dest--campagne .v-l1{left:-20%;bottom:-24%;width:96%;height:62%;border-radius:50%;background:var(--c3)}
.v-dest--campagne .v-l2{right:-24%;bottom:-30%;width:104%;height:60%;border-radius:50%;background:var(--c4)}
.v-dest--campagne .v-l3{left:-10%;bottom:-42%;width:130%;height:56%;border-radius:50%;background:rgba(0,0,0,.22)}

/* Ville : deux plans d'immeubles, le second plus haut et plus sombre. */
.v-dest--ville .v-l1{left:0;right:0;bottom:0;height:52%;background:repeating-linear-gradient(90deg,var(--c3) 0 17px,transparent 17px 25px)}
.v-dest--ville .v-l2{left:9px;right:0;bottom:0;height:38%;background:repeating-linear-gradient(90deg,var(--c4) 0 13px,transparent 13px 27px)}
.v-dest--ville .v-l3{left:0;right:0;bottom:0;height:14%;background:linear-gradient(180deg,transparent,rgba(0,0,0,.5))}

/* Vignoble : la colline, puis les rangs de vigne qui l'épousent. */
.v-dest--vignoble .v-l1{left:-14%;bottom:-16%;width:128%;height:56%;border-radius:50%;background:var(--c3)}
.v-dest--vignoble .v-l1::before{content:"";position:absolute;left:6%;bottom:74%;width:64%;height:36%;border-radius:50%;background:var(--c4);opacity:.7}
.v-dest--vignoble .v-l2{left:-14%;bottom:-16%;width:128%;height:56%;border-radius:50%;background:repeating-linear-gradient(97deg,rgba(30,26,10,.42) 0 4px,rgba(255,244,205,.16) 4px 13px)}
.v-dest--vignoble .v-l3{left:0;right:0;bottom:0;height:26%;background:linear-gradient(180deg,transparent,var(--c4))}

/* Soleil : le disque, son halo, et la ligne de terre. */
.v-dest--soleil .v-l1{top:2%;left:50%;width:190px;height:190px;margin-left:-95px;border-radius:100px;background:radial-gradient(circle,rgba(255,240,205,.92) 0%,rgba(255,214,140,.5) 32%,rgba(255,196,110,.16) 58%,rgba(255,196,110,0) 74%)}
.v-dest--soleil .v-l2{top:15%;left:50%;width:58px;height:58px;margin-left:-29px;border-radius:100px;background:#FFF6DF;box-shadow:0 0 34px 12px rgba(255,229,168,.6)}
.v-dest--soleil .v-l3{left:0;right:0;bottom:0;height:40%;background:linear-gradient(180deg,rgba(184,104,60,0) 0%,var(--c4) 42%,rgba(0,0,0,.5) 100%)}

/* Île : l'eau tout autour, la plage, et le relief qui en sort. Neuvième
   cadre de vie, ajouté avec lui — les huit autres avaient leur dessin, une
   carte grise au milieu se serait vue avant tout le reste. */
.v-dest--ile .v-l1{left:0;right:0;top:46%;bottom:0;background:linear-gradient(180deg,var(--c1) 0%,#2E7E8C 40%,#14454F 100%)}
.v-dest--ile .v-l2{left:14%;right:14%;top:40%;height:26%;border-radius:50%;background:linear-gradient(180deg,#F2E3C4 0%,var(--c3) 55%,var(--c4) 100%)}
/* Le relief, pose sur la plage : sans lui l'ile n'etait qu'un banc de sable. */
.v-dest--ile .v-l2::before{content:"";position:absolute;left:26%;bottom:52%;width:48%;height:150%;background:var(--c4);clip-path:polygon(50% 0,100% 100%,0 100%)}
.v-dest--ile .v-l3{left:0;right:0;top:72%;height:2px;background:rgba(255,255,255,.3);box-shadow:0 14px 0 rgba(255,255,255,.16),0 28px 0 rgba(255,255,255,.1)}

/* Lac : la rive boisée, puis l'eau qui la reflète. */
.v-dest--lac .v-l1{left:-16%;top:26%;width:88%;height:30%;border-radius:50%;background:var(--c3)}
.v-dest--lac .v-l1::before{content:"";position:absolute;right:-84%;top:16%;width:96%;height:26%;border-radius:50%;background:var(--c3);opacity:.78}
.v-dest--lac .v-l2{left:0;right:0;top:52%;bottom:0;background:linear-gradient(180deg,var(--c3) 0%,var(--c4) 22%,#2C4653 62%,#1B2E39 100%)}
.v-dest--lac .v-l2::before{content:"";position:absolute;left:30%;top:6%;width:40%;height:70%;background:linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,0));filter:blur(5px)}
.v-dest--lac .v-l3{left:0;right:0;top:52%;height:2px;background:rgba(255,255,255,.34)}

/* Patrimoine : la tour, son toit, et le corps de bâtiment. */
.v-dest--patrimoine .v-l1{left:0;right:0;bottom:0;height:26%;background:var(--c3)}
/* L'aile basse, decalee : sans elle le donjon flottait seul au centre. */
.v-dest--patrimoine .v-l1::before{content:"";position:absolute;left:8%;bottom:100%;width:44%;height:76%;background:var(--c4);opacity:.85}
.v-dest--patrimoine .v-l2{left:54%;bottom:26%;width:52px;height:50%;background:var(--c4)}
/* Les creneaux, tires d'un degrade repete : quatre merlons, pas de dessin. */
.v-dest--patrimoine .v-l2::before{content:"";position:absolute;left:-5px;right:-5px;top:-12px;height:14px;background:repeating-linear-gradient(90deg,var(--c4) 0 9px,transparent 9px 16px)}
.v-dest--patrimoine .v-l2::after{content:"";position:absolute;left:50%;top:26%;width:9px;height:22px;margin-left:-4.5px;border-radius:9px 9px 0 0;background:rgba(20,14,8,.5)}
.v-dest--patrimoine .v-l3{left:0;right:0;bottom:0;height:24%;background:linear-gradient(180deg,transparent,rgba(0,0,0,.55))}

/* ---------- Bandeau final de la page ---------- */
.v-dest-fin{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:26px 38px;
    text-align:left;
}

.v-dest-fin-ico{
    position:relative;
    flex:none;
    display:flex;
    align-items:center;
    justify-content:center;
    width:112px;
    height:112px;
    border:1px solid rgba(255, 56, 92,.34);
    border-radius:100px;
    color:var(--v-marque);
}

/* Le pointillé autour de l'épingle : un itinéraire, pas un ornement — c'est
   ce que la page raconte, des lieux qu'on va voir. */
.v-dest-fin-ico::after{
    content:"";
    position:absolute;
    left:16%;
    bottom:22%;
    width:68%;
    height:26%;
    border:1.5px dashed rgba(255, 56, 92,.45);
    border-radius:50%;
}

.v-dest-fin-ico .v-ico{width:40px;height:40px;position:relative;z-index:1}

.v-dest-fin-txt{flex:1 1 320px;min-width:0}

.v-dest-fin-t{
    margin-bottom:12px;
    font-size:clamp(20px,2.4vw,27px);
    font-weight:750;
    line-height:1.26;
    letter-spacing:-.024em;
    color:var(--v-blanc);
    text-wrap:balance;
}

.v-dest-fin-p{
    max-width:58ch;
    font-size:15.5px;
    line-height:1.68;
    color:var(--v-gris);
}

.v-dest-fin .v-btn{flex:none}

@media(max-width:760px){
    .v-dest-fin{gap:22px}
    .v-dest-fin-ico{width:84px;height:84px}
    .v-dest-fin-ico .v-ico{width:30px;height:30px}
}

/* =========================================================================
   TARIFS — PARTICULIER / PROFESSIONNEL, COTE A COTE (page « La méthode »).

   Un particulier et une agence ne paient pas la même chose, et surtout pas
   au même moment. Mélangés dans un seul paragraphe, chacun lisait la moitié
   qui ne le concernait pas. D'où deux colonnes strictement parallèles : les
   MÊMES trois moments dans le MÊME ordre, pour que la comparaison se fasse
   à l'horizontale, ligne par ligne.

   La différence qui compte — le professionnel ne verse aucune commission sur
   ses ventes — porte le vert et un cadre : c'est la seule ligne qu'on doit
   voir avant d'avoir lu.

   Les chiffres viennent des classes du plugin ; cette feuille ne fait que
   les habiller pour le fond sombre.
   ========================================================================= */

.v-sec-lead{
    max-width:74ch;
    margin:0 0 16px;
    font-size:16.5px;
    line-height:1.7;
    color:var(--v-gris);
}

.v-sec-lead strong{color:var(--v-blanc);font-weight:600}

.v-tarifs{
    display:grid;
    grid-template-columns:1fr;
    gap:20px;
    margin-top:30px;
}

@media (min-width:900px){
    .v-tarifs{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
}

.v-tarif{
    display:flex;
    flex-direction:column;
    padding:28px 26px;
    background:var(--v-carte);
    border:1px solid var(--v-filet);
    border-radius:20px;
}

/* La colonne professionnelle est celle qu'on cherche à faire lire : un
   liseré de marque suffit à la désigner, sans crier. */
.v-tarif--pro{
    border-color:rgba(255, 56, 92,.42);
    background:linear-gradient(180deg,rgba(255, 56, 92,.06),transparent 42%),var(--v-carte);
}

.v-tarif-tete{margin-bottom:22px}

.v-tarif-eyebrow{
    display:block;
    margin-bottom:8px;
    font-size:11.5px;
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--v-gris-2);
}

.v-tarif-t{
    margin:0 0 10px;
    font-size:27px;
    font-weight:800;
    letter-spacing:-.01em;
    color:var(--v-blanc);
}

.v-tarif--pro .v-tarif-t{color:var(--v-marque-clair)}

.v-tarif-accroche{
    margin:0;
    font-size:15.5px;
    line-height:1.6;
    color:var(--v-gris);
}

/* LES TROIS MOMENTS. Numérotés parce qu'ils se suivent réellement dans le
   temps : déposer, accueillir, vendre. */
.v-tarif-etapes{
    margin:0;
    padding:0;
    list-style:none;
    counter-reset:none;
}

.v-tarif-etapes li{
    display:flex;
    gap:14px;
    padding:16px 0;
    border-top:1px solid var(--v-filet);
}

.v-tarif-num{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:none;
    width:26px;
    height:26px;
    margin-top:1px;
    border-radius:100px;
    background:var(--v-carte-2);
    border:1px solid var(--v-filet-clair);
    font-size:12.5px;
    font-weight:700;
    color:var(--v-gris);
}

.v-tarif-corps{display:flex;flex-direction:column;gap:5px;min-width:0;flex:1 1 auto}

.v-tarif-ligne{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:14px;
}

.v-tarif-quoi{
    font-size:16px;
    font-weight:600;
    color:var(--v-blanc);
}

.v-tarif-combien{
    flex:none;
    font-size:16px;
    font-weight:800;
    color:var(--v-blanc);
    font-variant-numeric:tabular-nums;
    white-space:nowrap;
}

.v-tarif-detail{
    font-size:14px;
    line-height:1.6;
    color:var(--v-gris-2);
}

.v-tarif-detail strong{color:var(--v-gris)}
.v-tarif-detail em{font-style:normal;color:var(--v-gris)}

/* Gratuit : vert, parce que c'est une bonne nouvelle et non un simple chiffre. */
.v-tarif-etapes li.is-ok .v-tarif-combien{color:#5FD6A0}

/* LA LIGNE QUI DÉCIDE. Encadrée et détachée du reste : c'est elle qu'on doit
   voir avant même d'avoir lu la colonne. */
.v-tarif-etapes li.is-phare{
    margin-top:6px;
    padding:16px;
    border:1px solid var(--v-filet-clair);
    border-radius:14px;
    background:var(--v-carte-2);
}

.v-tarif--pro .v-tarif-etapes li.is-phare{
    border-color:rgba(95,214,160,.4);
    background:rgba(95,214,160,.08);
}

.v-tarif--pro .v-tarif-etapes li.is-phare .v-tarif-combien{
    font-size:24px;
    color:#5FD6A0;
}

.v-tarif-grille{
    margin-top:22px;
    padding-top:20px;
    border-top:1px solid var(--v-filet);
}

.v-tarif-grille-t{
    margin:0 0 4px;
    font-size:11.5px;
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--v-gris-2);
}

.v-bareme-l{margin:0;padding:0;list-style:none}

.v-bareme-l li{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:18px;
    padding:11px 0;
    border-bottom:1px solid var(--v-filet);
}

.v-bareme-l li:last-child{border-bottom:0}

.v-bareme-l span{font-size:15px;color:var(--v-gris)}

.v-bareme-l strong{
    flex:none;
    font-size:15.5px;
    font-weight:700;
    color:var(--v-blanc);
    /* Les taux s'alignent au chiffre près d'une ligne à l'autre. */
    font-variant-numeric:tabular-nums;
    white-space:nowrap;
}

.v-bareme-l strong small{font-size:12px;font-weight:600;color:var(--v-gris-2)}

.v-bareme-n{
    margin:14px 0 0;
    font-size:13px;
    line-height:1.6;
    color:var(--v-gris-2);
}

.v-grille--pourquoi{margin-top:34px}

@media (max-width:640px){
    .v-tarif{padding:22px 18px}
    .v-tarif-t{font-size:23px}

    /* « De 500 001 € à 1 000 000 € » ne tient pas à côté de son taux sur
       390 px : on empile plutôt que de couper un montant au milieu. */
    .v-bareme-l li,
    .v-tarif-ligne{flex-wrap:wrap;row-gap:2px}
    .v-bareme-l strong,
    .v-tarif-combien{margin-left:auto}
}

/* =========================================================================
   LES VILLES (page « Destinations »).

   Des noms, pas des liens : le catalogue n'a aucun filtre par commune, et
   huit cents liens menant tous a la meme liste seraient un defaut. Ce que
   les moteurs indexent, c'est du texte reel — ces noms en sont.

   Chaque famille porte une phrase qui dit CE QU'ELLE EST : sans elle, la
   liste se lirait comme un empilement de mots-cles, ce qui dessert plus
   qu'il ne sert.
   ========================================================================= */

.v-villes{
    display:grid;
    grid-template-columns:1fr;
    gap:2px;
    margin-top:28px;
    background:var(--v-filet);
    border:1px solid var(--v-filet);
    border-radius:18px;
    overflow:hidden;
}

@media (min-width:900px){
    .v-villes{grid-template-columns:repeat(2,minmax(0,1fr))}

    /* Sept familles dans deux colonnes laissent une case vide a cote de la
       derniere. Elle prend donc la ligne entiere — et c'est justement celle
       des grandes villes, la plus longue. */
    .v-villes-bloc:last-child:nth-child(odd){grid-column:1 / -1}
}

.v-villes-bloc{
    padding:24px 26px;
    background:var(--v-carte);
}

.v-villes-t{
    margin:0 0 8px;
    font-size:17px;
    font-weight:700;
    letter-spacing:-.005em;
    color:var(--v-blanc);
}

.v-villes-p{
    margin:0 0 12px;
    font-size:14px;
    line-height:1.6;
    color:var(--v-gris-2);
}

/* La liste elle-meme : un peu plus dense que du texte courant, pour qu'on
   la parcoure du regard sans la lire mot a mot. */
.v-villes-l{
    margin:0;
    font-size:14.5px;
    line-height:1.75;
    color:var(--v-gris);
}

.v-villes-note{
    max-width:74ch;
    margin:22px 0 0;
    font-size:13.5px;
    line-height:1.65;
    color:var(--v-gris-2);
}

@media (max-width:640px){
    .v-villes-bloc{padding:20px 16px}
    .v-villes-t{font-size:16px}
}


/* ----------------------------------------------------------------------
   LES VISUELS DEBORDAIENT DE L'ECRAN SUR TELEPHONE.

   Mesure : sur un ecran de 360 px, la page en occupait 400. Le texte partait
   a droite et l'on pouvait faire defiler lateralement — sur quatre pages, et
   sur les deux tailles de telephone les plus courantes.

   LA CAUSE EST UN PIEGE CLASSIQUE DE aspect-ratio, et il m'a fallu deux
   tentatives ratees pour la voir. Ce n'etait ni l'image (elle mesurait deja
   100 % de son cadre), ni le min-width:auto des elements de grille.

   Sous 900 px, le cadre recoit min-height:250px ET aspect-ratio:16/10. Quand
   la hauteur est imposee et la largeur libre, le navigateur calcule la
   LARGEUR A PARTIR DE LA HAUTEUR : 250 x 1,6 = 400 px. La colonne de 360 px
   ne pouvait rien y faire — l'element ne cherchait meme pas a y tenir.

   width:100% renverse le calcul : la largeur suit la colonne, et c'est la
   hauteur qui en decoule. min-height reste un plancher, comme prevu.
   ---------------------------------------------------------------------- */
@media (max-width:900px) {
    .v-hero-img,
    .v-conv-img {
        width: 100%;
        min-width: 0;
    }
}

/* ----------------------------------------------------------------------
   LES VIGNETTES DE DESTINATION MENENT AU CATALOGUE FILTRE.

   Elles ne menaient nulle part tant qu'il n'y avait rien a filtrer. Deux
   choses manquaient donc a leur allure de lien : un repere au clavier, et
   le signe qu'il va se passer quelque chose au clic.
   ---------------------------------------------------------------------- */
.v-dest:focus-visible{
    outline:2px solid var(--v-accent,#FF385C);
    outline-offset:3px;
}

/* L'INVITE EST TOUJOURS LA, ELLE NE FAIT QUE PALIR. Apparue au seul survol,
   elle n'aurait jamais existe sur un telephone — la ou la moitie des
   visiteurs lisent cette page. */
.v-dest-lien{
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin-top:10px;
    font-size:13.5px;
    font-weight:700;
    letter-spacing:.2px;
    color:#fff;
    opacity:.72;
    transition:opacity .2s ease,gap .2s ease;
}

.v-dest:hover .v-dest-lien,
.v-dest:focus-visible .v-dest-lien{opacity:1;gap:10px}

@media (hover:none){
    .v-dest-lien{opacity:.92}
}