/* ═══════════════════════════════════════════════════════════════════
   TARIF V2 — la page /tarif/ réhabillée dans le design de /pros-v2/,
   en aperçu sur /tarif-v2/. Chargée APRÈS `pros-v2.css`, qui est le
   SOCLE (héro `.accroche`, `.offre`, `.carte-gratuit`, `.faq`, `.mq`,
   `.final`, boutons, révélations) : cette feuille ne porte QUE ce que
   la page tarif a en propre. Trois copies d'un même CSS = trois
   divergences ; on n'en fait pas une quatrième.
   ⚠️ Avant de créer une classe ici : `grep` son nom dans pros-v2.css,
   coquille.css et accueil-v2.css (collision `.tel` vécue le 02/09).
   ═══════════════════════════════════════════════════════════════════ */

/* ── Le héro garde le mockup double téléphone de la page actuelle
   (`gg.webp`, fond transparent — mesuré : alpha 0 aux coins). Il flotte
   à droite de la photo, en `drop-shadow` (jamais `box-shadow` sur un
   détouré). Sous 900 px il disparaît : le titre a besoin de toute la
   largeur, et la photo suffit. ── */
  .accroche-mockup{position:absolute; z-index:2; right:clamp(1rem,4vw,5rem); bottom:0;
    height:min(70%, 580px); width:auto; pointer-events:none;
    filter:drop-shadow(0 26px 44px rgba(10,9,7,.45)) drop-shadow(0 4px 12px rgba(10,9,7,.3))}
  .accroche-mockup img{height:100%; width:auto; display:block}
  /* Le titre ne doit pas passer sous le mockup : on borne le contenu. */
  .accroche-tarif .contenu{max-width:min(100%, 62vw)}
  @media(max-width:900px){
    .accroche-mockup{display:none}
    .accroche-tarif .contenu{max-width:none}
  }
  /* « Toutes fonctionnalités comprises, en illimité. » : 44 signes, plus
     long que le titre de /pros-v2/. À 4,5 rem il ne tient pas dans 62 vw
     sur 1526 px ; le plafond descend à 3,9 rem et la mesure passe à 18ch —
     posée SUR le titre, jamais sur le conteneur (piège du `ch`). */
  .accroche-tarif h1{font-size:clamp(2rem,4.8vw,3.9rem); max-width:18ch}
/* ── 30/09 — LE HÉROS EST LA « VUE ÉCLATÉE » (assets/tarif-heros.js,
   eclatee.css) : le mockup n'est plus dans la page (règles ci-dessus sans
   effet, gardées pour un retour arrière ; le contenu reste borné à 62 vw,
   la scène se cale à droite du texte). Sur téléphone et tablette en
   portrait, la scène occupe le haut, le texte descend en bas et le voile ne
   couvre que lui — même mise en page que /pros/. ── */
  @media (max-width:760px), (max-width:1024px) and (orientation:portrait){
    .accroche-tarif .contenu{margin-top:auto; margin-bottom:0}
    .accroche-tarif .accroche-voile{background:linear-gradient(180deg, rgba(10,9,7,0) 0%, rgba(10,9,7,0) 56%, rgba(10,9,7,.5) 68%, rgba(10,9,7,.66) 100%)}
  }

/* ── Le bandeau des quatre promesses : le marquee de la page actuelle,
   réhabillé. Une seule rangée, pastilles texte, même mécanique `.mq`
   (trois copies de la liste, translation d'une largeur). En mouvement
   réduit, le socle replie déjà les copies : il reste quatre pastilles
   centrées, rien ne défile, rien ne dépasse. ── */
  .promesses{padding:1.1rem 0; background:var(--lin);
    border-top:1px solid var(--filet); border-bottom:1px solid var(--filet)}
  .promesses .mq-item{width:auto; padding-inline:.35rem}
  .promesse{display:inline-flex; align-items:center; gap:.55rem; white-space:nowrap;
    background:var(--blanc); border:1px solid var(--filet); border-radius:999px;
    padding:.55rem 1.05rem .55rem .85rem; font-size:.92rem; font-weight:500; color:var(--encre)}
  .promesse svg{flex:none; color:var(--brun)}
  @media (prefers-reduced-motion:reduce){
    .promesses .mq-liste{gap:.5rem; row-gap:.6rem}
  }

/* ── L'offre — reprise telle quelle du socle. Le palier Visibilité garde
   ses cinq points de la page actuelle : une liste courte DANS la carte
   claire, pas une seconde carte noire (deux cartes côte à côte font
   hésiter, parti pris du 02/09). ── */
  .cg-points{list-style:none; margin:.7rem 0 0; padding:0;
    display:grid; grid-template-columns:repeat(auto-fit,minmax(14rem,1fr)); gap:.4rem 1.4rem}
  .cg-points li{position:relative; padding-left:1.4rem; font-size:.95rem; line-height:1.4; color:var(--encre)}
  /* coche en SVG (data URI), pas le caractère « ✓ » qui tombe en police de secours */
  .cg-points li::before{content:""; position:absolute; left:0; top:.2em; width:1em; height:1em;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7.5' stroke='%238A6A45' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
  .cg-prix{font:600 1.05rem/1 "Archivo",sans-serif; color:var(--brun); margin-left:.5rem; letter-spacing:-.01em}
  /* La phrase de renvoi vers les guides (posée dans Elementor le 15/08) :
     note de bas de bloc, pas un argument. */
  .renvoi{margin:1.4rem auto 0; max-width:62rem; text-align:center; font-size:.9rem; color:var(--gris)}
  .renvoi a{color:var(--encre2); text-decoration:underline; text-decoration-color:var(--filet2);
    text-underline-offset:.18em; text-decoration-thickness:1px}
  .renvoi a:hover{text-decoration-color:var(--brun)}

/* ── « CE QUE VOUS NE PAYEZ PAS » (04/09) — le tableau d'ancrage, sous
   l'offre. Même matière que la carte Visibilité juste au-dessus (blanc, filet,
   rayon 20 px) pour qu'il se lise comme la suite du bloc et pas comme une
   publicité rapportée. La colonne Welcome est tenue par le brun, l'autre reste
   grise : la hiérarchie se voit sans une seule couleur criarde. Sur téléphone,
   les deux colonnes de valeurs restent côte à côte — c'est la comparaison qui
   fait le sens, la casser en accordéon la détruirait. ── */
  .compa{max-width:62rem; margin:1.6rem auto 0}
  .compa h3{margin:0 0 .8rem; font-size:clamp(1.1rem,1.9vw,1.35rem); font-weight:600; letter-spacing:-.015em}
  .compa-cadre{background:var(--blanc); border:1px solid var(--filet); border-radius:20px; overflow:hidden}
  .compa table{width:100%; border-collapse:collapse; table-layout:fixed}
  .compa th,.compa td{padding:.78rem 1.1rem; text-align:left; font-size:.95rem; line-height:1.35;
    vertical-align:top; border-top:1px solid var(--filet)}
  .compa thead th{border-top:0; padding-top:1rem; padding-bottom:.7rem;
    font:500 .72rem/1.3 "DM Mono",ui-monospace,monospace; letter-spacing:.14em; text-transform:uppercase;
    color:var(--gris)}
  .compa thead th:nth-child(2){color:var(--brun)}
  .compa tbody th{font-weight:400; color:var(--encre)}
  .compa td{color:var(--gris)}
  .compa td.w{color:var(--encre); font-weight:500; background:var(--lin)}
  .compa thead th:nth-child(2){background:var(--lin)}
  .compa-note{margin:.8rem .2rem 0; font-size:.82rem; line-height:1.5; color:var(--gris)}
  /* Mesuré à 390 px : en `table-layout:auto` le tableau réclamait 348 px pour
     335 disponibles — 13 px de défilement horizontal. On garde donc la mise en
     page fixe, on répartit les colonnes à la main et on resserre : la
     comparaison reste côte à côte, c'est elle qui fait le sens. */
  .compa th:first-child{width:34%}
  @media(max-width:640px){
    .compa th,.compa td{padding:.55rem .5rem; font-size:.8rem; line-height:1.3}
    .compa thead th{font-size:.62rem; letter-spacing:.08em}
    .compa th:first-child{width:30%}
  }

/* ── LE TABLEAU DES FONCTIONNALITÉS — le seul composant neuf de la page.
   Six familles, deux colonnes (Gratuit / L'unique), ~30 lignes reprises
   à l'identique de la page actuelle. Un vrai <table> par famille : les
   lecteurs d'écran et les IA le lisent, et `<details>` replie les
   familles 3 à 6 sans une ligne de JavaScript (« Voir plus » de la page
   actuelle). Sur téléphone, la colonne « intitulé » se resserre et les
   deux valeurs restent côte à côte : pas de défilement horizontal. ── */
  .gf-tete{text-align:center; max-width:min(52rem,100%); margin:0 auto clamp(1.6rem,3vw,2.4rem)}
  .gf-tete h2{font-size:clamp(1.9rem,3.4vw,2.7rem); line-height:1.1; letter-spacing:-.026em; margin:0}
  .gf{max-width:62rem; margin-inline:auto; background:var(--blanc); border:1px solid var(--filet);
    border-radius:20px; overflow:hidden}
  /* Plus d'en-tête collant : posé en `sticky`, il se calait 110 px sous le
     haut du cadre et masquait les deux premières lignes (mesuré en 2.10.15).
     Les deux colonnes se lisent sans lui — le fond lin signe L'unique. */
  .gf-entete{position:static;
    display:grid; grid-template-columns:minmax(0,1fr) 8.5rem 8.5rem; gap:0; align-items:end;
    background:var(--blanc); border-bottom:1px solid var(--filet); padding:.9rem 0 .7rem}
  /* Pas de marge latérale sur l'en-tête : ses deux colonnes de 7,5 rem
     doivent tomber EXACTEMENT sur celles de la table (mesuré : 19 px de
     décalage avec un padding). Le libellé de gauche porte sa propre marge. */
  .gf-entete .col{text-align:center}
  .gf-entete .col b{display:block; font-size:1.05rem; font-weight:600; color:var(--encre)}
  .gf-entete .col small{display:block; margin-top:.15rem; font:400 .72rem/1.4 "DM Mono",ui-monospace,monospace; color:var(--gris); white-space:nowrap}
  .gf table{width:100%; border-collapse:collapse; table-layout:fixed}
  .gf col.v{width:8.5rem}
  .gf-entete .col-t{align-self:end; padding:0 0 .2rem 1.2rem; font:500 .72rem/1.4 "DM Mono",ui-monospace,monospace;
    letter-spacing:.14em; text-transform:uppercase; color:var(--gris)}
  .gf caption{text-align:left; padding:1.1rem 1.2rem .5rem;
    font:500 .72rem/1 "DM Mono",ui-monospace,monospace; letter-spacing:.2em; text-transform:uppercase; color:var(--brun)}
  .gf th,.gf td{padding:.72rem 1.2rem; border-top:1px solid var(--filet); font-size:.95rem; line-height:1.35; vertical-align:middle}
  .gf th{text-align:left; font-weight:400; color:var(--encre)}
  .gf td{width:8.5rem; text-align:center; color:var(--encre2)}
  .gf td.oui{color:var(--vert)}
  .gf td.oui svg{display:inline-block; vertical-align:middle}
  .gf td.non{color:var(--filet2)}
  .gf td.mot{font:500 .7rem/1.3 "DM Mono",ui-monospace,monospace; letter-spacing:.08em; text-transform:uppercase; color:var(--brun)}
  /* la colonne L'unique se distingue d'un fil de lin */
  .gf td:last-child{background:var(--lin)}
  .gf-entete .col:last-child{background:var(--lin); border-radius:12px 12px 0 0; padding:.6rem .4rem .1rem}
  /* Les familles repliées : un <details> autour des tables 3 à 6. */
  .gf-plus{border-top:1px solid var(--filet)}
  .gf-plus summary{list-style:none; cursor:pointer; text-align:center; padding:1rem;
    font-weight:500; color:var(--encre2); display:flex; justify-content:center; align-items:center; gap:.5rem}
  .gf-plus summary::-webkit-details-marker{display:none}
  .gf-plus summary::after{content:"+"; font:300 1.3rem/1 "Archivo"; color:var(--brun)}
  .gf-plus[open] summary::after{content:"–"}
  .gf-plus[open] summary{border-bottom:1px solid var(--filet)}
  .gf-plus[open] summary .ouvrir{display:none}
  .gf-plus:not([open]) summary .fermer{display:none}
  @media(max-width:600px){
    .gf-entete{grid-template-columns:minmax(0,1fr) 5.2rem 5.2rem; padding:.8rem 0 .7rem}
    .gf-entete .col small{white-space:normal}
    .gf th,.gf td{padding:.62rem .8rem; font-size:.88rem}
    .gf td{width:5.2rem}
    .gf col.v{width:5.2rem}
    .gf-entete .col-t{display:none}
    .gf caption{padding:.9rem .8rem .4rem}
  }

/* ── Téléchargement : les deux QR codes et badges de la page actuelle, en
   ligne (le socle ne les connaît que dans la pop-up). Les notes des deux
   magasins (`1.webp`, 270×80) se posent sous le titre. ── */
  .telecharge{text-align:center; max-width:min(52rem,100%); margin-inline:auto}
  .telecharge h2{font-size:clamp(1.9rem,3.4vw,2.7rem); line-height:1.1; letter-spacing:-.026em; margin:0 0 .9rem}
  .telecharge > p{margin:0 auto; font-size:clamp(1.05rem,1.4vw,1.2rem); color:var(--encre2); max-width:40rem}
  .notes-stores{display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:1rem 2.2rem; margin:1.4rem auto 0}
  .notes-stores img{height:54px; width:auto; max-width:44%}
  .telecharge .qr{margin-top:2rem; max-width:420px}
  .telecharge .qr img.code{border:1px solid var(--filet)}


  /* l'en-tête des tables, pour les lecteurs d'écran seulement */
  .visually-hidden{position:absolute !important; width:1px; height:1px; margin:-1px; padding:0;
    overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0}

/* Le bloc texte de la carte Visibilité doit prendre toute la largeur : en
   enfant flex sans `flex:1`, il se rétrécissait au contenu et la grille des
   cinq points tombait en une seule colonne. Mesuré sur /tarif-v2/. */
  .tarif-v2 .carte-gratuit > div{flex:1; min-width:0}

/* ══ LA CARTE D'OFFRE — refonte du 08/09 ═══════════════════════════════
   Remplace `.offre*` (qui reste dans le socle, plus référencé par aucun
   gabarit : à supprimer au prochain ménage du socle, pas aujourd'hui —
   « parcours-client » travaille dans le même fichier).
   Carte CLAIRE, badges des magasins en action, notes sous les badges, et
   la phrase Stripe posée SOUS le bloc (`.co-stripe`), plus dedans. ── */
  .carte-offre{max-width:58rem; margin-inline:auto; background:var(--blanc);
    border:1px solid var(--filet); border-radius:28px; overflow:hidden;
    box-shadow:0 26px 60px rgba(40,30,14,.13)}

  .co-haut{background:linear-gradient(180deg,#F7EADA 0%, #FDF9F3 78%, var(--blanc) 100%);
    padding:clamp(2rem,4vw,2.8rem) clamp(1.2rem,3vw,2.4rem) clamp(1.6rem,3vw,2.1rem);
    display:grid; justify-items:center; gap:.14rem; text-align:center}
  .co-nom{margin:0; font-size:.79rem; font-weight:700; letter-spacing:.19em;
    text-transform:uppercase; color:var(--brun)}
  .co-prix{margin:.35rem 0 0; font:700 clamp(3rem,7vw,4.6rem)/.95 "Archivo",sans-serif;
    letter-spacing:-.05em; color:var(--encre)}
  .co-prix span{font-size:.27em; font-weight:600; color:var(--brun); letter-spacing:0}
  .co-unite{margin:.1rem 0 0; font-size:1rem; color:var(--encre2)}

  /* 13/09 — `.co-stores` (les deux badges de magasin) a laissé la place à un
     CTA vers le tunnel : c'est l'endroit où elle décide, il ne devait pas
     partir au magasin. L'ancienne note « les badges sont l'action » est
     périmée avec eux.
     ⚠️ Le bouton se dimensionne SUR SON TEXTE, il ne s'étire pas sur toute la
     carte : pleine largeur, il écrasait le prix juste au-dessus. `.co-haut`
     étant une grille en `justify-items:center`, il suffit de ne rien imposer —
     l'enfant est centré et à la largeur de son contenu. Ne pas y remettre de
     `width` ni de `justify-self`. */
  .co-cta{margin-top:1.6rem}
  .co-cta .btn{padding:.95rem 2.2rem}
  .co-rass{margin:1rem 0 0; font-size:.92rem; color:var(--encre2)}

  .co-bas{padding:clamp(1.7rem,3.2vw,2.3rem) clamp(1.2rem,3vw,2.4rem);
    border-top:1px solid var(--filet)}
  .co-bas h3{margin:0; font-size:1.2rem; font-weight:600; letter-spacing:-.012em}
  .co-sous{margin:.25rem 0 0; color:var(--encre2); font-size:.96rem}

  .co-grille{margin-top:1.3rem; display:grid; grid-template-columns:1fr 1fr; gap:.85rem}
  @media(max-width:700px){.co-grille{grid-template-columns:1fr}}
  .co-bien{background:var(--lin); border:1px solid var(--filet); border-radius:15px;
    padding:1rem 1.15rem; display:grid; grid-template-columns:auto 1fr; gap:.85rem;
    align-items:start; transition:box-shadow .25s var(--mvt), transform .25s var(--mvt)}
  .co-bien:hover{box-shadow:0 12px 26px rgba(40,30,14,.09); transform:translateY(-1px)}
  .co-ic{width:2.2rem; height:2.2rem; border-radius:11px; background:#F7EADA; color:var(--brun);
    display:grid; place-items:center; flex:none}
  .co-bien b{display:block; font-size:1.04rem; font-weight:600; letter-spacing:-.008em; margin-bottom:.12rem}
  .co-bien .p{display:block; font-size:.94rem; color:var(--encre2); line-height:1.45}
  .co-bien .f{display:block; font-size:.81rem; color:var(--gris); margin-top:.3rem}

  .co-stripe{max-width:52rem; margin:1.1rem auto 0; text-align:center;
    font-size:.84rem; line-height:1.55; color:var(--gris)}