/* ─────────────────────────────────────────────────────────────────────────────
   sections/fin.css — avis, tarifs, questions, appel final, pied de page.

   S'appuie sur les règles d'index.html pour les composants existants (.rev,
   .rc, .marq, .tog, .plans, .plan, .row, .note, .faqg, .faq, .final, .ctas,
   .foot) et sur sections.css (.sx, .sx--paper, .incl, .tog--s, .reassure,
   .go, .rv). Ici : la mise en page de la refonte, les variantes téléphone et
   les corrections de contraste. Tout est rangé sous #avis, #tarifs, #faq,
   #final et .fin-pied pour ne rien déborder ailleurs.

   UN ÉCRAN PAR SECTION (21/10, retour de Jordan) : sur ordinateur, les avis,
   chaque onglet des tarifs et l'appel final tiennent en entier dans la
   hauteur du navigateur, 88 px laissés libres en haut pour le menu. Les
   titres et la respiration suivent donc aussi la HAUTEUR de l'écran (vh) ;
   on resserre les marges et les listes, jamais les prix ni le texte courant.
   Hauteurs mesurées : 1440×800, 1536×730, 1280×720, 1920×950 (voir le rapport
   de la refonte).
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Rythme vertical de la fin de page ───────────────────────────────────────
   --fin-y : la respiration au-dessus de chaque bloc. Une ancre (#avis,
   #tarifs) pose le titre juste sous le menu : la marge négative retire ce
   blanc du calcul du défilement. */
#avis,#tarifs,#final{--fin-y:var(--sx-y);--fin-g:clamp(14px,2.4vh,26px)}
@media (min-width:901px){#avis,#tarifs,#final{--fin-y:clamp(40px,9vh,112px)}}
@media (max-width:700px){#avis,#tarifs,#final{--fin-y:48px;--fin-g:16px}}
#avis,#tarifs{scroll-margin-top:calc(-1 * var(--fin-y))}

/* ── Titres : la même échelle que les sections .sx, plafonnée par la hauteur ── */
#avis .rev__head h2,#tarifs .fin-tete h2{font-size:min(clamp(36px,4.6vw,72px),8.2vh);font-weight:500;line-height:1.02;letter-spacing:-.05em;text-wrap:balance}
#faq .fin-faq__tete h2{font-size:min(clamp(36px,4.6vw,72px),8.2vh);font-weight:500;line-height:1.02;letter-spacing:-.05em;text-wrap:balance}
@media(max-width:900px){#avis .rev__head h2,#tarifs .fin-tete h2,#faq .fin-faq__tete h2{font-size:clamp(30px,8vw,40px)}}

/* ── Focus clavier hors des .sx (avis, appel final, pied) ────────────────── */
#avis a:focus-visible,.fin-pied a:focus-visible{outline:2px solid var(--acc-t);outline-offset:3px;border-radius:4px}
#final a:focus-visible{outline:2px solid #FFB36B;outline-offset:3px}
#tarifs .plan--f :focus-visible{outline-color:#FFB36B}

/* ═════════ AVIS ═════════════════════════════════════════════════════════ */
#avis.rev{padding-top:var(--fin-y)}
/* En-tête : le titre (une ligne) et son lien ; puis la note et la phrase. */
#avis .rev__head{display:block;margin-bottom:var(--fin-g)}
.fin-avis__titre{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px 32px}
#avis .rev__head h2{margin:0;max-width:none}
.fin-avis__titre .go{flex:none;font-size:17px}
.fin-avis__meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin-top:clamp(10px,1.6vh,18px)}
#avis .rev__head .fin-avis__meta p{max-width:none;font-size:clamp(17px,1.3vw,20px);line-height:1.45}
#avis .rev__score{padding:6px 15px}

/* La carte brune à gauche, les quatre autres en 2 × 2 à droite. */
#avis .rev__grid{grid-template-columns:minmax(0,1fr) minmax(0,2fr);align-items:stretch;gap:16px}
#avis .rc--f{grid-row:auto;padding:clamp(22px,3.4vh,40px) clamp(22px,2.2vw,36px);gap:clamp(12px,2vh,20px);border-radius:24px}
#avis .rc--f .big{font-size:min(clamp(56px,5vw,96px),9.5vh)}
#avis .rc--f .big small{margin-top:6px;font-size:16px}
#avis .rc--f q{font-size:min(clamp(20px,1.75vw,30px),3.5vh);line-height:1.3}
.fin-rang{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;min-width:0}
/* Cartes compactes : les étoiles et la pastille sur la même ligne. */
.fin-rang>.rc{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 1fr auto;align-items:center;gap:clamp(7px,1.2vh,12px) 12px;padding:clamp(14px,2.1vh,22px) clamp(18px,1.6vw,24px);border-radius:22px}
.fin-rang>.rc>.st{grid-column:1;grid-row:1;font-size:15px;line-height:1}
.fin-rang>.rc>.chip{grid-column:2;grid-row:1;padding:4px 11px;font-size:14px;line-height:1.35}
.fin-rang>.rc>q{grid-column:1/-1;grid-row:2;align-self:start;font-size:16.5px;line-height:1.4;text-wrap:pretty}
.fin-rang>.rc>.who{grid-column:1/-1;grid-row:3}
#avis .who{gap:12px}
#avis .who i{width:36px;height:36px;font-size:14px}
#avis .who b{font-size:16px;line-height:1.25}
#avis .who span{display:block;font-size:14.5px;line-height:1.3;text-wrap:balance}
.fin-points{display:none}
@media(max-width:1000px){
  #avis .rev__grid{grid-template-columns:minmax(0,1fr)}
  #avis .rc--f{grid-column:auto}
}
/* Téléphone : la carte brune en tête, puis une rangée à faire glisser. */
@media(max-width:640px){
  #avis .rev__head{margin-bottom:22px}
  .fin-avis__titre{gap:12px}
  .fin-avis__meta{gap:12px;margin-top:14px}
  #avis .rev__head .fin-avis__meta p{font-size:17px}
  #avis .rev__score{gap:8px;padding:8px 14px;font-size:15px}
  #avis .rev__score .st{letter-spacing:1px}
  #avis .rev__score span:last-child{white-space:nowrap}
  #avis .rev__grid{display:block}
  #avis .rc--f{margin-bottom:14px}
  #avis .rc--f .big{font-size:56px}
  #avis .rc--f q{font-size:22px}
  .fin-rang{display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);
    margin:0 calc(-1 * var(--pad));padding:2px var(--pad) 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .fin-rang::-webkit-scrollbar{display:none}
  .fin-rang>.rc{flex:0 0 82%;min-width:0;scroll-snap-align:start;padding:20px}
  .fin-rang>.rc:hover{transform:none;box-shadow:none}
  .fin-rang>.rc>q{font-size:17px}
  .fin-rang:focus-visible{outline:2px solid var(--acc-t);outline-offset:-2px;border-radius:30px}
  .fin-points{display:flex;justify-content:center;gap:8px;margin-top:10px}
  .fin-points i{display:block;width:7px;height:7px;border-radius:99px;background:rgba(26,21,16,.2);transition:width .25s,background-color .25s}
  .fin-points i.on{width:22px;background:var(--acc)}
}
/* Bandeau : focusable pour l'arrêter au clavier ; le masque en dégradé
   effacerait un contour, on marque donc les pastilles. Hors de l'écran, il
   s'arrête (fin.js pose .fin-roule quand il est visible). */
#avis .marq{margin-top:var(--fin-g);outline:none}
#avis .marq span{padding:10px 18px;font-size:16px}
html.js #avis .marq:not(.fin-roule) .marq__t{animation-play-state:paused}
#avis .marq:focus-visible .marq__t>span{border-color:var(--acc-t)}

/* ═════════ TARIFS ═══════════════════════════════════════════════════════ */
/* Une colonne d'étiquettes commune à la bande « Dans toutes les offres » et à
   la frise des mariés : les deux onglets s'alignent. */
#tarifs{--fin-col:clamp(240px,23vw,380px);--fin-col-g:clamp(20px,2.4vw,40px)}
#tarifs.sx--paper{margin-top:var(--fin-y);padding-top:var(--fin-y);padding-bottom:var(--fin-y)}

/* En-tête : titre et phrase à gauche, bascule photographe / mariés à droite. */
.fin-tarifs__tete{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:18px 40px}
.fin-tete h2{max-width:16ch}
.fin-tete__ch{margin-top:clamp(8px,1.4vh,14px);font-size:20px;line-height:1.45;color:var(--soft);max-width:52ch;text-wrap:pretty}
#tarifs .togs{margin-top:0;justify-content:flex-end}
/* Bascule de facturation : .tog--s posée hors de .tog (voir le HTML), on lui
   rend l'allure de .tog. */
#tarifs .fin-per{display:inline-flex;background:#fff;border:1px solid var(--line)}
#tarifs .fin-per button{border:0;background:none;font-family:var(--s);font-weight:600;color:var(--soft);cursor:pointer}
#tarifs .fin-per button[aria-pressed="true"]{background:var(--ink);color:#fff}
#tarifs .fin-per button em{font-style:normal;font-weight:500;opacity:.75}
#tarifs .fin-per button:focus-visible{outline:2px solid var(--acc-t);outline-offset:2px}
/* Facturation annuelle coupée (data-annuel="non") : ni bascule, ni ligne annuelle. */
#tarifs[data-annuel="non"] .fin-per,#tarifs[data-annuel="non"] .plan__y{display:none!important}
#tarifs .fin-a{display:none}
#tarifs.fin-an .fin-a{display:inline}
#tarifs.fin-an .fin-m{display:none}
/* .incl, .tog--s… ont leur propre display : [hidden] doit l'emporter. */
html.js #tarifs [hidden]{display:none!important}

/* La bande « Dans toutes les offres » : l'étiquette et sa phrase à gauche,
   les six fonctions en trois colonnes. */
#tarifs .fin-bande{display:grid;grid-template-columns:var(--fin-col) minmax(0,1fr);column-gap:var(--fin-col-g);row-gap:10px;align-items:start;margin-top:var(--fin-g);padding-top:clamp(12px,1.8vh,18px);border-top:1px solid var(--line)}
.fin-bande__k{display:flex;flex-direction:column;gap:6px;min-width:0}
#tarifs .fin-bande .incl__k{flex:none}
#tarifs .fin-bande .incl__p{flex:none;margin:0;font-size:15px;line-height:1.4}
#tarifs .fin-bande .incl__l{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 24px;min-width:0}

/* Les cartes : nom et prix sur une ligne, les chiffres en trois colonnes. */
#tarifs .plans{margin-top:var(--fin-g);gap:16px}
#tarifs .plan{position:relative;padding:clamp(18px,2.6vh,26px) clamp(18px,1.6vw,28px);gap:clamp(10px,1.6vh,16px);border-radius:24px}
.fin-haut{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px}
.fin-prix{min-width:0}
#tarifs .plan__t{display:block}
#tarifs .plan__t h3{font-size:24px;line-height:1.15}
/* « Recommandé », « Bientôt » : une étiquette posée sur le bord de la carte. */
#tarifs .plan__t em{position:absolute;top:0;left:clamp(18px,1.6vw,28px);transform:translateY(-50%);background:var(--acc);color:var(--ink);font-size:13px;padding:5px 12px;white-space:nowrap}   /* encre sur orange : 6,6:1 */
#tarifs .plan__p{white-space:nowrap}
#tarifs .plan__p small{opacity:1;color:var(--soft)}                    /* l'opacité .55 tombait sous 4,5:1 */
#tarifs .plan--f .plan__p small{color:rgba(240,237,228,.72)}
#tarifs .plan__y{color:var(--soft)}                                     /* --mute ne faisait que 2,6:1 */
#tarifs .plan--f .plan__y,#tarifs .plan--f .row span,#tarifs .plan--f .plan__c{color:rgba(240,237,228,.72)}
#tarifs .rows{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:12px;padding:clamp(8px,1.3vh,12px) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
#tarifs .plan--f .rows{border-color:rgba(240,237,228,.14)}
#tarifs .row{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:3px;min-width:0;padding:0;border:0}
#tarifs .row span{font:600 12px/1.3 var(--m);letter-spacing:.08em;text-transform:uppercase;color:var(--soft)}
#tarifs .row b{font-size:20px;line-height:1.2;white-space:normal;text-wrap:balance}
#p-pro .row b,#tarifs .plan__c{white-space:nowrap}             /* « ≈ 400 000 » ne se coupe pas */
#tarifs .plan__c{font-size:16px;font-weight:500;color:var(--ink)}
.fin-cta{margin-top:auto;display:flex;flex-direction:column;align-items:stretch;gap:8px;padding-top:2px}
#tarifs .fin-choisir{-webkit-appearance:none;appearance:none;margin:0;display:flex;align-items:center;justify-content:center;min-height:min(58px,7.4vh);padding:0 20px;border:0;border-radius:16px;
  background:var(--ivory);color:var(--ink);font:600 18px/1.2 var(--s);letter-spacing:-.01em;text-align:center;cursor:pointer;transition:background-color .2s}
#tarifs .fin-choisir:hover{background:#E6E0D4;color:var(--ink)}
#tarifs .plan--f .fin-choisir{background:var(--acc);color:var(--ink)}   /* encre sur orange : 6,6:1 (blanc : 2,7:1) */
#tarifs .plan--f .fin-choisir:hover{background:#FF8A26;color:var(--ink)}
#tarifs .fin-men{margin:0;text-align:center}
#tarifs .plan--f .fin-men{color:rgba(240,237,228,.72)}

/* Notes : quatre colonnes sous les cartes, chacune à la mesure de sa phrase
   (toutes tiennent alors en deux lignes). */
.fin-notes{list-style:none;margin:var(--fin-g) 0 0;padding:0;display:grid;grid-template-columns:minmax(0,7.6fr) minmax(0,6fr) minmax(0,10fr) minmax(0,5fr);gap:8px 28px}
.fin-notes li{position:relative;padding-left:16px;font-size:15.5px;line-height:1.42;color:var(--soft);text-wrap:pretty}
.fin-notes li::before{content:'';position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--acc)}

/* Mariés : la phrase d'accueil à gauche de la frise, puis les trois formules. */
.fin-mar{grid-column:1/-1;display:grid;grid-template-columns:var(--fin-col) minmax(0,1fr);grid-template-rows:auto 1fr;grid-template-areas:"k vie" "i vie";column-gap:var(--fin-col-g);align-items:start;padding-top:clamp(12px,1.8vh,18px);border-top:1px solid var(--line)}
.fin-mar>.fin-vie__k{grid-area:k}
.fin-mar>.fin-intro{grid-area:i}
.fin-mar>.fin-vie{grid-area:vie}
.fin-intro{position:relative;margin:0;padding:14px 16px 14px 46px;border:1px solid var(--line);border-radius:16px;background:#fff;font-size:17px;line-height:1.45;color:var(--ink);text-wrap:pretty}
.fin-intro::before{content:'';position:absolute;left:16px;top:17px;width:18px;height:18px;border-radius:50%;
  background:#0F7D46 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat}
.fin-intro b{font-weight:600}
/* Album : une phrase plutôt que trois lignes, la formule n'existe pas encore. */
.fin-alb{margin:0;padding:clamp(8px,1.3vh,12px) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:16px;line-height:1.45;color:var(--soft);text-wrap:pretty}

/* Album, affiché « bientôt » (grille du 21/10/2026) : visible, mais en retrait,
   et sans bouton tant que la formule n'existe pas. */
#tarifs .plan--bientot{background:transparent;border:1px dashed #D9CFBE;box-shadow:none}
#tarifs .plan--bientot .plan__t em{background:var(--paper);color:var(--soft);border:1px solid var(--line)}
#tarifs .plan--bientot .plan__p{color:var(--soft)}
#tarifs .fin-bientot{margin:0;min-height:min(58px,7.4vh);display:flex;align-items:center;justify-content:center;border-radius:16px;
  background:var(--ivory);color:var(--soft);font:600 16px/1 var(--s)}

/* ── La vie de la galerie (onglet mariés) ────────────────────────────────────
   Une frise de l'année : les étapes sur une ligne, puis une barre par formule,
   allumée sur sa durée (le nom de la formule est écrit dans sa barre). La
   ligne du temps est tassée après la première semaine (pointillés) : c'est un
   schéma, pas une échelle. Animation (fin.js, .joue) : la ligne se remplit,
   chaque étape s'allume à son passage, Découverte s'arrête à 15 jours,
   Galerie va jusqu'au bout, Album apparaît en pointillés « bientôt » à la fin.
   Sans JavaScript, avec « réduire les animations » ou une fois jouée : tout
   est allumé. */
.fin-vie{--duree:2.6s;--trait:#DCD2C1;margin:0;min-width:0}
.fin-vie__k{margin:0 0 clamp(8px,1.4vh,12px);padding-top:1px;font:600 12px/1.4 var(--m);letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
.fin-vie__axe{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:26fr 22fr 28fr 24fr}
.fin-vie__axe li:nth-child(1){--x:0}
.fin-vie__axe li:nth-child(2){--x:.26}
.fin-vie__axe li:nth-child(3){--x:.48}
.fin-vie__axe li:nth-child(4){--x:1}
/* La ligne du temps (fond) et son remplissage, en pointillés après 62 %. */
.fin-vie__axe::before,.fin-vie__axe::after{content:'';position:absolute;left:0;right:0;top:6px;height:2px;border-radius:2px;
  -webkit-mask:linear-gradient(90deg,#000 0 62%,transparent 62%),repeating-linear-gradient(90deg,#000 0 6px,transparent 6px 11px);
  mask:linear-gradient(90deg,#000 0 62%,transparent 62%),repeating-linear-gradient(90deg,#000 0 6px,transparent 6px 11px)}
.fin-vie__axe::before{background:var(--trait)}
.fin-vie__axe::after{background:var(--acc)}
.fin-vie__axe li{position:relative;z-index:1;min-width:0;padding:22px 16px 0 0}
.fin-vie__axe li:last-child{padding-right:0;padding-left:12px;text-align:right}
.fin-vie__axe li::before{content:'';position:absolute;left:0;top:0;width:14px;height:14px;border-radius:50%;box-sizing:border-box;border:2px solid var(--acc);background:var(--acc);box-shadow:0 0 0 4px var(--paper)}
.fin-vie__axe li:last-child::before{left:auto;right:0}
.fin-vie__axe b{display:block;font:600 12px/1.35 var(--m);letter-spacing:.1em;text-transform:uppercase;color:var(--ink);text-wrap:balance}
.fin-vie__axe span{display:block;margin-top:4px;font-size:15px;line-height:1.38;color:var(--soft);text-wrap:pretty}
/* Une barre par formule, sur la même échelle que la ligne. */
.fin-vie__barres{list-style:none;margin:clamp(10px,1.6vh,14px) 0 0;padding:0;display:grid;gap:5px}
.fin-vie__b{position:relative;height:23px;border-radius:8px;background:rgba(26,21,16,.05)}
.fin-vie__b>i{position:absolute;left:0;top:0;bottom:0;width:calc(var(--a) * 100%);border-radius:inherit;background:var(--c)}
.fin-vie__b>span{position:absolute;top:0;bottom:0;left:0;display:flex;align-items:center;gap:6px;padding:0 10px;font-size:13.5px;font-weight:500;line-height:1;white-space:nowrap;color:var(--ink)}
.fin-vie__b>span b{font-weight:700}
.fin-vie__b>span b::after{content:'·';margin-left:6px;font-weight:500}
.fin-vie__b--d{--a:.14;--c:#D9CDB8}
.fin-vie__b--d>span{left:calc(var(--a) * 100%)}
.fin-vie__b--g{--a:1;--c:var(--acc)}                                         /* encre sur orange : 6,6:1 */
.fin-vie__b--a{height:21px;background:none;border:1.5px dashed #CDBFA9}
.fin-vie__b--a>i{display:none}
.fin-vie__b--a>span{color:var(--soft)}

/* État de départ de la démo (avec JavaScript, avant .joue). */
html.js .fin-vie:not(.joue) .fin-vie__axe::after,html.js .fin-vie:not(.joue) .fin-vie__b>i{clip-path:inset(0 100% 0 0)}
html.js .fin-vie:not(.joue) .fin-vie__axe li::before{background:var(--paper);border-color:var(--trait)}
html.js .fin-vie:not(.joue) .fin-vie__axe li>*,html.js .fin-vie:not(.joue) .fin-vie__b>span{opacity:.28}
html.js .fin-vie:not(.joue) .fin-vie__b--a{opacity:0}
/* La démo : tout est réglé sur la ligne (linéaire), chaque étape à son passage. */
.fin-vie__axe::after,.fin-vie__b>i{clip-path:inset(0 0 0 0)}
.fin-vie.joue .fin-vie__axe::after{transition:clip-path var(--duree) linear}
.fin-vie.joue .fin-vie__axe li::before{transition:background-color .3s ease calc(var(--x) * var(--duree)),border-color .3s ease calc(var(--x) * var(--duree))}
.fin-vie.joue .fin-vie__axe li>*{transition:opacity .45s ease calc(var(--x) * var(--duree))}
.fin-vie.joue .fin-vie__b--d>i{transition:clip-path calc(var(--a) * var(--duree)) linear}
.fin-vie.joue .fin-vie__b--d>span{transition:opacity .4s ease calc(var(--a) * var(--duree))}
.fin-vie.joue .fin-vie__b--g>i{transition:clip-path var(--duree) linear}
.fin-vie.joue .fin-vie__b--g>span{transition:opacity .45s ease calc(.3 * var(--duree))}
.fin-vie.joue .fin-vie__b--a{transition:opacity .6s ease var(--duree)}
/* Remise à zéro hors de l'écran : sans transition. */
.fin-vie.net *,.fin-vie.net *::before,.fin-vie.net *::after{transition:none!important}

/* Sans JavaScript : pas de bascule, les deux grilles l'une sous l'autre, titrées. */
.fin-gl{margin:34px 0 0;font:600 12px/1.4 var(--m);letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
html.js .fin-gl{display:none}
html:not(.js) #tarifs .togs{display:none}
html:not(.js) #tarifs .plans{display:grid;margin-top:12px}

/* Ordinateur moyen : la bande passe ses fonctions sur deux colonnes. */
@media(max-width:1180px){
  #tarifs .fin-bande .incl__l{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fin-notes{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Tablette et téléphone : cartes empilées, compactes (nom et prix sur une ligne). */
@media(max-width:1000px){
  #tarifs .plans{gap:12px}
  #tarifs .plan{padding:24px 22px 20px;gap:14px;border-radius:22px}
  .fin-haut{flex-wrap:nowrap}
  #tarifs .plan__t h3{font-size:23px}
  #tarifs .plan__p{font-size:36px}
  #tarifs .plan__p small{font-size:15px}
  #tarifs .row b{font-size:18px}
  #tarifs .plan__c{font-size:15px}
  #tarifs .fin-choisir,#tarifs .fin-bientot{min-height:52px;font-size:17px}
  #tarifs .fin-bientot{font-size:16px}
}
@media(max-width:900px){
  .fin-tarifs__tete{grid-template-columns:minmax(0,1fr);gap:18px}
  #tarifs .togs{justify-content:flex-start}
  #tarifs .fin-bande{grid-template-columns:minmax(0,1fr);row-gap:12px}
  .fin-mar{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:"i" "k" "vie";row-gap:0}
  .fin-mar>.fin-intro{margin-bottom:20px}
}
@media(max-width:700px){
  .fin-tete__ch{font-size:17px;margin-top:10px}
  .fin-tarifs__tete{gap:16px}
  #tarifs .togs{gap:10px}
  #tarifs .fin-per button{flex:1 1 0;min-height:44px;padding:0 10px}
  /* Les six fonctions à la suite, en une phrase (virgules, point final) :
     deux fois moins de hauteur que deux colonnes de coches. */
  #tarifs .fin-bande{row-gap:8px;padding-top:14px}
  #tarifs .fin-bande .incl__l{display:block}
  #tarifs .fin-bande .incl__l li{display:inline;padding:0;font-size:15.5px;line-height:1.5}
  #tarifs .fin-bande .incl__l li::before{display:none}
  #tarifs .fin-bande .incl__l li::after{content:', '}
  #tarifs .fin-bande .incl__l li:last-child::after{content:'.'}
  /* Cartes resserrées : chiffres sans filets, moins de blanc entre les lignes. */
  #tarifs .plans{gap:10px}
  #tarifs .plan{padding:16px 16px 12px;gap:10px;border-radius:20px}
  #tarifs .plan__p{font-size:34px}
  #tarifs .rows{padding:2px 0 0;border:0;gap:8px}
  #tarifs .row b{font-size:17px}
  #tarifs .fin-alb{padding:0;border:0}
  .fin-cta{gap:6px}
  #tarifs .fin-choisir,#tarifs .fin-bientot{min-height:48px}
  .fin-notes{grid-template-columns:minmax(0,1fr);gap:6px}
  .fin-notes li{font-size:15px;line-height:1.38}
  .fin-intro{font-size:16px;padding:12px 14px 12px 42px}
  .fin-intro::before{left:14px;top:15px}
  /* La frise se lit de haut en bas : les étapes en liste, la ligne à gauche. */
  .fin-vie__axe{display:flex;flex-direction:column;gap:12px;padding-left:24px}
  .fin-vie__axe::before,.fin-vie__axe::after{left:6px;right:auto;top:8px;bottom:8px;width:2px;height:auto;-webkit-mask:none;mask:none}
  html.js .fin-vie:not(.joue) .fin-vie__axe::after{clip-path:inset(0 0 100% 0)}
  .fin-vie__axe li,.fin-vie__axe li:last-child{padding:0;text-align:left}
  .fin-vie__axe li::before,.fin-vie__axe li:last-child::before{left:-24px;right:auto;top:2px}
  .fin-vie__axe span{margin-top:2px}
  /* Les barres gardent leur échelle ; un libellé trop long passe à la ligne. */
  .fin-vie__b{height:auto;min-height:24px}
  .fin-vie__b>span{position:relative;min-height:24px;padding:4px 10px;flex-wrap:wrap;white-space:normal;line-height:1.25}
  .fin-vie__b--d>span{left:auto;margin-left:calc(var(--a) * 100%)}
  .fin-vie__b--a{min-height:22px}
  .fin-vie__b--a>span{min-height:19px;padding:2px 10px}
}

/* ═════════ QUESTIONS ════════════════════════════════════════════════════
   Deux groupes, photographes (#faq-pro) et mariés-invités (#faq-cpl), qui
   suivent la bascule de la page ([data-for] ; la bascule d'ici est une
   .tog button[data-t] comme celle des tarifs).
   Ordinateur, avec JavaScript : la liste des questions à gauche, la réponse
   ouverte à droite dans une carte (fin.js en garde une seule ouverte et
   donne au groupe la hauteur de la carte si elle dépasse) : un groupe tient
   sur un écran. Téléphone, tablette et sans JavaScript : un accordéon.
   Chaque réponse commence par sa phrase directe, en gras (strong). */
#faq{--fin-y:var(--sx-y);--fin-g:clamp(14px,2.4vh,26px);--fq-q:44%;--fq-cg:clamp(24px,2.8vw,56px);scroll-margin-top:calc(-1 * var(--fin-y))}
@media (min-width:901px){#faq{--fin-y:clamp(40px,9vh,112px)}}
@media (max-width:700px){#faq{--fin-y:48px;--fin-g:16px}}
#faq.sx{padding-top:var(--fin-y)}

/* En-tête sur une ligne : le titre, la bascule qui le complète (« Questions.
   Photographes | Mariés et invités »), l'adresse de contact à droite. */
.fin-faq__tete{display:flex;flex-wrap:wrap;align-items:center;gap:14px clamp(20px,2.4vw,36px)}
#faq .fin-faq__tete h2{flex:none;margin:0}
.fin-faq__ch{margin:0 0 0 auto;font-size:17px;line-height:1.5;color:var(--soft)}
.fin-faq__ch a{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--acc);text-decoration-thickness:2px;text-underline-offset:4px;display:inline-block;max-width:100%;overflow-wrap:anywhere}
.fin-faq__ch a:hover{color:var(--acc-t)}
#faq .fin-faq__tog{flex:none;margin-top:0}
/* Sans JavaScript : pas de bascule, les deux groupes l'un sous l'autre, titrés,
   et un lien qui descend au second. */
.fin-faq__saut{flex:1 0 100%;margin:0}
html.js .fin-faq__saut{display:none}
html:not(.js) .fin-faq__tog{display:none}
.fin-faq__gt{margin:0 0 12px;font:600 12px/1.4 var(--m);letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
html:not(.js) #faq-cpl{margin-top:44px}
html.js .fin-faq__gt{position:absolute;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}
/* .faq a son propre display : [hidden] doit l'emporter (sauf sans JavaScript). */
html.js #faq .fin-faq__g[hidden],#faq .faq details[hidden]{display:none!important}
html:not(.js) #faq .fin-faq__g[hidden]{display:flex}

/* ── L'accordéon (téléphone, tablette, sans JavaScript) ── */
.fin-faq__corps{margin-top:var(--fin-g)}
#faq .faq{gap:0}
#faq .faq details{position:relative;padding:0;border:0;border-top:1px solid var(--line);border-radius:0;background:none}
#faq .faq details:last-of-type{border-bottom:1px solid var(--line)}
#faq .faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:0;padding:16px 8px;font-size:18px;font-weight:600;line-height:1.3;letter-spacing:-.02em;color:var(--ink);text-wrap:balance;-webkit-tap-highlight-color:transparent;transition:color .2s}
#faq .faq summary:hover{color:var(--acc-t)}
/* Le chevron (celui des listes .lo) : vers le bas fermé, vers le haut ouvert. */
#faq .faq summary::after{content:'';display:block;flex:none;width:9px;height:9px;margin:0 4px 4px 0;border:solid var(--soft);border-width:0 2px 2px 0;border-radius:0;background:none;font-size:0;transform:rotate(45deg);transition:transform .25s}
#faq .faq details[open]>summary::after{transform:rotate(-135deg);margin-bottom:-4px}
/* La question ouverte devient une carte, avec la barre orange à gauche. */
#faq .faq details[open]{margin:6px 0;border:1px solid var(--line);border-radius:20px;background:#fff;box-shadow:0 24px 50px -40px rgba(43,24,16,.35)}
#faq .faq details[open]::before{content:'';position:absolute;left:-1px;top:16px;bottom:16px;width:3px;border-radius:0 3px 3px 0;background:var(--acc)}
#faq .faq details[open]+details,#faq .faq details[open]+details[hidden]+details{border-top-color:transparent}
#faq .faq details[open]>summary{padding:18px 20px 10px}
#faq .faq details[open]>summary:hover{color:var(--ink)}
#faq .fin-faq__r{padding:0 20px 20px}
#faq .fin-faq__r p{max-width:70ch;padding:0;font-size:17px;line-height:1.6;color:var(--soft);text-wrap:pretty}
#faq .fin-faq__r strong{font-weight:600;color:var(--ink)}
html.js #faq details[open]>.fin-faq__r{animation:fq-in .35s cubic-bezier(.2,.8,.2,1)}
@keyframes fq-in{from{opacity:0;transform:translateY(8px)}}

/* ── Ordinateur, avec JavaScript : la liste à gauche, la réponse à droite ── */
@media (min-width:901px){
  html.js #faq .fin-faq__g{position:relative;display:grid;grid-template-columns:minmax(0,var(--fq-q)) minmax(0,1fr);column-gap:var(--fq-cg);align-content:start;min-height:var(--fq-h,0px)}
  html.js #faq .fin-faq__g>details{grid-column:1;position:static;margin:0;border:0;border-top:1px solid var(--line);border-radius:0;background:none;box-shadow:none}
  html.js #faq .fin-faq__g>details:last-of-type{border-bottom:1px solid var(--line)}
  html.js #faq .fin-faq__g>details::before{display:none}
  html.js #faq .fin-faq__g>details[open],html.js #faq .fin-faq__g>details[open]+details,html.js #faq .fin-faq__g>details[open]+details[hidden]+details{border-top-color:transparent}
  html.js #faq .fin-faq__g>details:last-of-type[open]{border-bottom-color:transparent}
  html.js #faq .fin-faq__g>details>summary{position:relative;gap:18px;padding:clamp(8px,1.25vh,13px) 18px;border-radius:14px;font-size:clamp(16px,1.15vw,18px);font-weight:500;line-height:1.3}
  html.js #faq .fin-faq__g>details:not([open])>summary:hover{background:rgba(255,255,255,.6)}
  /* Le chevron pointe vers la réponse ; orange sur la question ouverte. */
  html.js #faq .fin-faq__g>details>summary::after{margin:0 2px 0 0;transform:rotate(-45deg)}
  html.js #faq .fin-faq__g>details[open]>summary{padding:clamp(8px,1.25vh,13px) 18px;background:#fff;font-weight:600;cursor:default;box-shadow:0 0 0 1px var(--line),0 18px 40px -30px rgba(43,24,16,.45)}
  html.js #faq .fin-faq__g>details[open]>summary::before{content:'';position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:var(--acc)}
  html.js #faq .fin-faq__g>details[open]>summary::after{margin:0 2px 0 0;border-color:var(--acc-t);transform:rotate(-45deg)}
  /* La carte de la réponse, posée dans la colonne de droite, en haut. */
  html.js #faq .fin-faq__g>details>.fin-faq__r{position:absolute;top:0;right:0;left:calc(var(--fq-q) + var(--fq-cg));padding:clamp(22px,3.4vh,40px) clamp(24px,2.6vw,44px);border:1px solid var(--line);border-radius:24px;background:#fff;box-shadow:0 30px 60px -44px rgba(43,24,16,.42)}
  html.js #faq .fin-faq__g>details>.fin-faq__r p{max-width:none;font-size:17px;line-height:1.62}
}
/* Grand écran : la liste s'élargit et la réponse grossit, pour garder des
   lignes de lecture d'environ 80 signes. */
@media (min-width:1600px){
  #faq{--fq-q:48%}
  html.js #faq .fin-faq__g>details>.fin-faq__r p{font-size:18px}
}
@media (min-width:1800px){#faq{--fq-q:50%}}

/* ── Petit portable et tablette : l'adresse de contact passe sous le titre et
   la bascule, alignée à gauche. ── */
@media(max-width:1100px){
  .fin-faq__ch{flex:1 0 100%;margin:0}
}
/* ── Téléphone : titre, contact, puis la bascule juste au-dessus des questions ── */
@media(max-width:700px){
  .fin-faq__tete{flex-direction:column;align-items:stretch;gap:12px}
  .fin-faq__ch{order:1;font-size:16px}
  #faq .fin-faq__tog{order:2;margin-top:4px}
  .fin-faq__saut{order:3}
  #faq .fin-faq__tog{display:flex;width:100%}
  #faq .fin-faq__tog button{flex:1 1 0;min-height:44px;padding:0 10px;font-size:15px}
  html:not(.js) #faq .fin-faq__tog{display:none}
  #faq .faq summary{gap:14px;padding:12px 4px;font-size:17px}
  #faq .faq details[open]{border-radius:18px}
  #faq .faq details[open]>summary{padding:16px 16px 8px}
  #faq .fin-faq__r{padding:0 16px 18px}
  #faq .fin-faq__r p{font-size:16px;line-height:1.58}
}
@media(prefers-reduced-motion:reduce){
  html.js #faq details[open]>.fin-faq__r{animation:none}
  #faq .faq summary,#faq .faq summary::after{transition:none}
}

/* ═════════ APPEL FINAL ══════════════════════════════════════════════════ */
/* La photo du mariage sous un voile brun, plus sombre à gauche derrière le
   texte (contraste ≥ 4,5:1), plus ouvert à droite où revient l'appareil. */
#final.final{margin:var(--fin-y) var(--pad) 0;padding:clamp(40px,8.5vh,104px) clamp(24px,5vw,88px);isolation:isolate;align-items:stretch;text-align:left}
#final>.fin-final__ph{position:absolute;inset:0;z-index:-2;width:100%;height:100%;max-width:none;object-fit:cover;object-position:62% 40%;opacity:.9}
#final::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(43,24,16,.9) 0%,rgba(43,24,16,.84) 42%,rgba(43,24,16,.6) 68%,rgba(43,24,16,.46) 100%),linear-gradient(180deg,rgba(43,24,16,.12),rgba(43,24,16,.42))}
/* Texte à gauche, l'appareil à droite, centrés l'un par rapport à l'autre. */
.fin-final__in{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:1fr auto auto auto 1fr;
  grid-template-areas:". a" "t a" "c a" "f a" ". a";column-gap:clamp(28px,4vw,72px);width:100%;max-width:1360px;margin:0 auto}
#final h2{grid-area:t;margin:0 0 clamp(22px,3.6vh,36px);max-width:14ch;font-size:min(clamp(40px,5.4vw,96px),9.6vh);color:#FAF8F3;text-align:left;text-shadow:0 2px 30px rgba(20,10,5,.35)}
#final .ctas{grid-area:c;align-self:start;justify-content:flex-start;margin:0}
#final .cta1{color:var(--ink)}                                     /* encre sur orange : 6,6:1 */
#final .cta1:hover{color:var(--ink);background:#FF8A26}
/* Les garanties : chacune précédée d'un point, la liste décalée de la largeur
   d'un point et rognée d'autant : le point qui ouvrirait une ligne disparaît. */
.fin-final__fine{grid-area:f;list-style:none;margin:clamp(16px,2.6vh,24px) 0 0 -28px;padding:0;display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:center;row-gap:6px;
  clip-path:inset(0 0 0 28px);font-size:16px;line-height:1.45;color:rgba(240,237,228,.86)}
.fin-final__fine li{display:inline-flex;align-items:center}
.fin-final__fine li::before{content:'';flex:none;width:4px;height:4px;margin:0 12px;border-radius:50%;background:currentColor;opacity:.8}

/* L'appareil photo : l'écran passe de la photo brute à « Galerie livrée ».
   Le calque « livrée » est découpé à l'écran (322→808 × 315→686 px sur
   1100 × 794) : l'ombre portée, identique, n'est dessinée qu'une fois. */
.fin-app{grid-area:a;align-self:center;position:relative;width:clamp(280px,27vw,380px);aspect-ratio:1100/794}
.fin-app::before{content:'';position:absolute;left:-16%;right:-16%;top:-26%;bottom:-26%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,224,186,.42),rgba(249,119,8,.2) 52%,rgba(249,119,8,0) 100%)}
.fin-app img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none}
.fin-app__b{clip-path:inset(39.3% 26.4% 13.4% 29%)}
/* La démo (fin.js, .joue) : l'appareil monte un peu en apparaissant, puis son
   écran se fond en « Galerie livrée ». */
html.js .fin-app:not(.joue){opacity:0;transform:translateY(22px)}
html.js .fin-app:not(.joue) .fin-app__b{opacity:0}
.fin-app.joue{transition:opacity .8s ease,transform 1.1s cubic-bezier(.16,.84,.24,1)}
.fin-app.joue .fin-app__b{transition:opacity .9s ease 1.15s}
.fin-app.net,.fin-app.net *{transition:none!important}

@media(max-width:900px){
  /* L'appareil en tête de carte, puis le titre, qui le désigne (« comme ça »). */
  .fin-final__in{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:"a" "t" "c" "f";justify-items:center;text-align:center}
  .fin-app{width:min(250px,64vw);margin-bottom:18px}
  #final h2{text-align:center}
  #final .ctas{justify-content:center}
  .fin-final__fine{justify-content:center;margin-left:0;clip-path:none}
  .fin-final__fine li:first-child::before{display:none}
}
@media(max-width:700px){
  #final.final{border-radius:26px;padding:44px var(--pad) 48px}
  #final>.fin-final__ph{object-position:70% 35%}
  #final::after{background:radial-gradient(ellipse 80% 70% at 50% 58%,rgba(43,24,16,.86),rgba(43,24,16,.72) 60%,rgba(43,24,16,.5) 100%)}
  #final h2{font-size:clamp(34px,9vw,44px);margin-bottom:24px}
  .fin-app{width:min(220px,60vw);margin-bottom:14px}
  .fin-final__fine{flex-direction:column;gap:4px;margin-top:18px;font-size:14px}
  .fin-final__fine li::before{display:none}
}

/* ═════════ PIED DE PAGE ═════════════════════════════════════════════════ */
.fin-pied.foot{gap:18px 40px;padding:40px var(--pad) 44px}
.fin-pied .brand{color:var(--ink)}
.fin-pied .fin-pied__nav{flex:1 1 520px;display:flex;flex-direction:column;align-items:center;gap:0}
.fin-pied__g{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;column-gap:26px}
.fin-pied__g a{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:16px;color:var(--soft);transition:color .2s}
.fin-pied__g:first-child a{color:var(--ink);font-weight:500}
.fin-pied__g a:hover{color:var(--acc-t)}
.fin-pied__g a i{font-style:normal}
.fin-pied__c{margin:0;font-size:16px;color:var(--soft)}
@media(max-width:700px){
  .fin-pied.foot{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;padding:32px var(--pad) calc(24px + env(safe-area-inset-bottom))}
  .fin-pied .fin-pied__nav{align-items:stretch;gap:12px}
  .fin-pied__g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;justify-content:stretch}
  .fin-pied__g--ext{padding-top:12px;border-top:1px solid var(--line)}
  .fin-pied__code{grid-column:1/-1}
  .fin-pied__c{padding-top:6px;font-size:15px}
}

/* ── « Réduire les animations » : états finaux, sans mouvement ─────────────── */
@media(prefers-reduced-motion:reduce){
  .fin-points i,#tarifs .fin-choisir,.fin-pied__g a{transition:none}
  .fin-rang{scroll-behavior:auto}
  .fin-vie *,.fin-vie *::before,.fin-vie *::after,.fin-app,.fin-app *{transition:none!important}
}

/* 21/10 soir : la question « Et si j'arrête mon abonnement ? » est publiée (11 questions
   côté photographes). Sur les écrans bas (≈ 720 px), on resserre un peu les rangées
   pour que le groupe tienne toujours sous le menu. */
@media (min-width:901px) and (max-height:760px){
  html.js #faq .fin-faq__g>details>summary{padding-block:clamp(6px,1.05vh,13px)}
}