/* ==========================================================================
   accueil.css — LA PAGE D'ACCUEIL DE PHONODESK.FR (prompt 118)
   --------------------------------------------------------------------------
   Chargée par `/` seulement (`$page['css']`), APRÈS `charte.css`, `theme.css`
   et `style.css`. Elle ne connaît AUCUNE couleur : tout se résout en un jeton
   de `charte.css` (`--pd-*`, `--st-*`, `--signal-*`). `banc-vitrine.php`
   refuse un hexa ici.

   Toutes les classes sont préfixées `ac-` : `style.css` a déjà `.hero`,
   `.chiffres`, `.etapes`, `.faq`, et les autres pages de la vitrine les
   emploient. Deux noms pour deux choses, plutôt qu'une surcharge.

   Mise en page : une colonne de lecture bornée (`--large`, 1120 px), des
   bandes pleine largeur qui alternent les halos marine et le clair de la
   charte ; la pervenche une fois par bloc au plus.

   LE BOUTON PLEIN EST EN `--pd-peri-survol` ET NON EN `--pd-peri` : blanc sur
   #6C6CFF donne 4,02:1, sous le seuil AA d'un texte de 16 px ; #5B5BF0 donne
   5,00:1. Même décision que `theme.css` pour le site clair.
   ========================================================================== */

body.accueil{background:var(--pd-clair); color:var(--pd-encre); font-family:var(--pd-texte)}
.accueil h1,.accueil h2,.accueil h3{font-family:var(--pd-titre); font-weight:700; letter-spacing:-.02em;
  line-height:1.1; text-wrap:balance; color:inherit}
.accueil h3{font-size:1.15rem; font-weight:600; letter-spacing:-.01em}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ---------- la barre : marine translucide, collante ---------- */
.accueil .entete{position:sticky; top:0; z-index:20; background:rgba(var(--pd-marine-rgb),.88);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-bottom:1px solid color-mix(in srgb,var(--pd-carte) 8%,transparent); color:var(--pd-carte)}
.accueil .entete .nav a{color:var(--pd-sur-sombre); background:none}
.accueil .entete .nav a:hover{color:var(--pd-carte); background:color-mix(in srgb,var(--pd-carte) 8%,transparent)}
.accueil .entete .bouton--ligne{color:var(--pd-carte); border-color:color-mix(in srgb,var(--pd-carte) 28%,transparent);
  background:color-mix(in srgb,var(--pd-carte) 6%,transparent)}
.accueil .entete .bouton--ligne:hover{color:var(--pd-carte); background:color-mix(in srgb,var(--pd-carte) 12%,transparent)}
.accueil .entete .bouton--plein{background:var(--pd-peri-survol); color:var(--pd-carte); box-shadow:var(--pd-ombre-peri)}
.accueil .burger{color:var(--pd-carte)}
.accueil .menu-mobile{background:var(--pd-marine); border-color:color-mix(in srgb,var(--pd-carte) 10%,transparent)}
.accueil .menu-mobile ul a{color:var(--pd-carte)}
.accueil .marque svg{height:30px; width:auto; display:block}

/* ---------- les briques ---------- */
.ac-sombre{background:var(--pd-halos); color:var(--pd-carte)}
.ac-bande{padding-block:clamp(64px,9vw,120px)}
.ac-bande--suite{padding-top:0}
/* `.ac-oeil` : la bulle est dans style.css (prompt 119, une seule règle). Le
   sur-titre du fondateur est un vrai <h2> : il garde la bulle malgré
   `.accueil h2`. */
.accueil h2.ac-oeil{font:600 .74rem/1 var(--pd-texte); letter-spacing:.1em; color:var(--pd-carte)}
.ac-lead{font-size:1.12rem; max-width:62ch; margin:18px 0 0}
.ac-sombre .ac-lead{color:var(--pd-sur-sombre)}
.ac-doux{color:var(--pd-encre-douce)}
.ac-tete{max-width:64ch; margin-bottom:clamp(32px,4vw,56px)}
.ac-tete h2,.ac-pro h2,.ac-final h2{font-size:clamp(1.8rem,3.4vw,2.7rem)}

.ac-btn{display:inline-flex; align-items:center; gap:10px; min-height:48px; padding:12px 22px;
  border-radius:var(--pd-rayon); font:600 1rem var(--pd-texte); text-decoration:none;
  border:1.5px solid transparent; transition:transform .15s, box-shadow .15s, background .15s}
.ac-btn:hover{transform:translateY(-1px); text-decoration:none}
.ac-btn:focus-visible,.accueil a:focus-visible,.accueil summary:focus-visible{outline:3px solid var(--pd-ciel); outline-offset:3px}
.ac-btn--plein{background:var(--pd-peri-survol); color:var(--pd-carte); box-shadow:var(--pd-ombre-peri)}
.ac-btn--plein:hover{background:var(--pd-peri-fonce); color:var(--pd-carte)}
.ac-btn--ligne{background:var(--pd-carte); color:var(--pd-encre); border-color:var(--pd-ligne)}
.ac-btn--ligne:hover{color:var(--pd-encre); border-color:var(--pd-peri-survol)}
.ac-sombre .ac-btn--ligne,.ac-offre--pro .ac-btn--ligne{background:color-mix(in srgb,var(--pd-carte) 6%,transparent);
  color:var(--pd-carte); border-color:color-mix(in srgb,var(--pd-carte) 28%,transparent)}
.ac-boutons{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px}

/* ---------- 1. le hero ---------- */
.ac-hero{padding-top:clamp(48px,7vw,96px); overflow:hidden}
.ac-hero__grille{display:grid; gap:clamp(36px,5vw,72px); align-items:center}
@media (min-width:920px){.ac-hero__grille{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}}
.ac-hero h1{font-size:clamp(2.3rem,5.4vw,4.2rem); margin:0}
.ac-hero h1 span{color:var(--pd-ciel)}
.ac-preuve{display:flex; flex-wrap:wrap; gap:10px 22px; margin:28px 0 0; font-size:.92rem; color:var(--pd-sur-sombre)}
.ac-preuve b{color:var(--pd-carte); font-weight:600}
.ac-etoiles{display:inline-flex; gap:1px; vertical-align:-2px; color:rgb(var(--signal-ambre))}

.ac-demo{position:relative; background:var(--pd-surface); border:1px solid color-mix(in srgb,var(--pd-carte) 10%,transparent);
  border-radius:var(--pd-rayon-carte); box-shadow:var(--pd-ombre-sombre); padding:18px 18px 112px; isolation:isolate}
.ac-demo__tete{display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:.8rem;
  color:var(--pd-sur-sombre-doux); margin-bottom:12px}
.ac-demo__tete b{color:var(--pd-carte); font-weight:600; font-size:.9rem}
.ac-demo__vues{display:inline-flex; gap:6px}
.ac-demo__vues span{padding:3px 9px; border-radius:999px; border:1px solid color-mix(in srgb,var(--pd-carte) 14%,transparent)}
.ac-demo__vues .on{background:color-mix(in srgb,var(--pd-carte) 12%,transparent); color:var(--pd-carte)}
.ac-lignes{display:grid; grid-template-columns:44px 1fr}
.ac-lignes .h{font:500 .72rem var(--pd-texte); color:var(--pd-sur-sombre-doux); padding:10px 0; font-variant-numeric:tabular-nums}
.ac-lignes .c{border-top:1px dashed color-mix(in srgb,var(--pd-carte) 12%,transparent); min-height:40px; position:relative}
.ac-lignes .c:last-child{border-bottom:1px dashed color-mix(in srgb,var(--pd-carte) 12%,transparent)}
.ac-fiche{position:absolute; inset:5px 6px auto; height:30px; border-radius:8px; display:flex; align-items:center; gap:8px;
  padding:0 10px; font-size:.78rem; font-weight:500; color:var(--pd-carte); white-space:nowrap; overflow:hidden;
  background:color-mix(in srgb,var(--pd-carte) 10%,transparent); border:1px solid color-mix(in srgb,var(--pd-carte) 14%,transparent)}
.ac-fiche i{width:8px; height:8px; border-radius:50%; flex:none; background:var(--pd-peri)}
.ac-fiche i.st-encours{background:var(--st-encours)}
.ac-fiche i.st-pret{background:var(--st-pret)}
.ac-fiche i.st-commande{background:var(--st-commande)}
.ac-fiche--neuve{background:color-mix(in srgb,var(--pd-peri) 28%,transparent); border-color:var(--pd-peri); animation:ac-pose 12s infinite both}

.ac-appel{position:absolute; right:-10px; top:66px; width:min(270px,80%); background:var(--pd-carte); color:var(--pd-encre);
  border-radius:16px; box-shadow:var(--pd-ombre-clair); padding:14px 16px; z-index:2; animation:ac-appel 12s infinite both}
.ac-appel__qui{display:flex; align-items:center; gap:10px; font-weight:600; font-size:.92rem}
.ac-appel__qui small{display:block; color:var(--pd-encre-douce); font-size:.78rem; font-weight:400}
.ac-appel__av{width:34px; height:34px; border-radius:50%; background:var(--pd-ciel-pale); color:var(--pd-marine);
  display:grid; place-items:center; flex:none; animation:ac-sonne 1.2s infinite}
.ac-appel__barre{margin-top:10px; height:4px; border-radius:4px; background:var(--pd-ligne); overflow:hidden}
.ac-appel__barre::after{content:""; display:block; height:100%; width:0; background:var(--pd-peri-survol); animation:ac-barre 12s infinite both}
.ac-compris{position:absolute; left:14px; right:14px; bottom:16px; background:var(--pd-marine); border:1px solid var(--pd-peri);
  border-radius:14px; padding:12px 14px; font-size:.82rem; color:var(--pd-carte); z-index:2; animation:ac-compris 12s infinite both}
.ac-compris b{display:block; color:var(--pd-ciel); font-weight:600; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:4px}
.ac-compris .l{display:flex; flex-wrap:wrap; gap:6px 14px; color:var(--pd-sur-sombre)}
.ac-compris strong{color:var(--pd-carte); font-weight:500}

@keyframes ac-pose{0%,52%{opacity:0; transform:translateY(-10px) scale(.96)} 60%,100%{opacity:1; transform:none}}
@keyframes ac-appel{0%,4%{opacity:0; transform:translateY(12px)} 10%,42%{opacity:1; transform:none} 50%,100%{opacity:0; transform:translateY(-8px)}}
@keyframes ac-sonne{0%,100%{transform:rotate(0)} 20%{transform:rotate(-12deg)} 40%{transform:rotate(10deg)} 60%{transform:rotate(-6deg)}}
@keyframes ac-barre{0%,12%{width:0} 42%,100%{width:100%}}
@keyframes ac-compris{0%,44%{opacity:0; transform:translateY(10px)} 50%,92%{opacity:1; transform:none} 98%,100%{opacity:0}}

/* MOUVEMENT RÉDUIT : TOUT VISIBLE, IMMOBILE. La fiche est posée, l'appel et
   la carte sont là ; l'appel monte en haut pour ne pas masquer la fiche. */
@media (prefers-reduced-motion:reduce){
  .ac-fiche--neuve,.ac-appel,.ac-appel__av,.ac-appel__barre::after,.ac-compris{animation:none !important; opacity:1; transform:none}
  .ac-appel__barre::after{width:100%}
  .ac-appel{top:auto; bottom:118px}
}
@media (max-width:520px){.ac-appel{right:6px}}

.ac-chiffres{border-top:1px solid color-mix(in srgb,var(--pd-carte) 10%,transparent); padding-block:26px; margin-top:clamp(40px,6vw,72px)}
.ac-chiffres__grille{display:grid; grid-template-columns:repeat(2,1fr); gap:18px}
@media (min-width:760px){.ac-chiffres__grille{grid-template-columns:repeat(4,1fr)}}
.ac-chiffre{margin:0; font-size:.9rem; color:var(--pd-sur-sombre)}
.ac-chiffre b{display:block; font-family:var(--pd-titre); font-size:1.5rem; color:var(--pd-carte); line-height:1.1; margin-bottom:4px}

/* ---------- 2. le comptoir : la vidéo, puis le bento ---------- */
.ac-video{max-width:860px; margin:0 auto clamp(40px,5vw,64px)}
.ac-video__note{text-align:center; margin:12px 0 0; font-size:.95rem}
.ac-video__note a{color:var(--pd-peri-survol); text-decoration:underline; text-underline-offset:3px}
.ac-bento{display:grid; grid-template-columns:repeat(6,1fr); gap:16px}
.ac-tuile{grid-column:span 6; background:var(--pd-carte); border:1px solid var(--pd-ligne); border-radius:var(--pd-rayon-carte);
  padding:26px; display:flex; flex-direction:column; gap:12px; min-width:0}
.ac-tuile h3{margin:0}
.ac-tuile p{margin:0; color:var(--pd-encre-douce); font-size:.97rem}
@media (min-width:640px){.ac-tuile,.ac-tuile--large{grid-column:span 3}}
@media (min-width:960px){.ac-tuile{grid-column:span 2} .ac-tuile--large{grid-column:span 4} .ac-tuile--pleine{grid-column:span 6}}
.ac-tuile--marine{background:var(--pd-marine); color:var(--pd-carte); border-color:transparent}
.ac-tuile--marine p{color:var(--pd-sur-sombre)}
.ac-ic{width:42px; height:42px; border-radius:12px; background:var(--pd-ciel-pale); color:var(--pd-marine); display:grid; place-items:center}
.ac-tuile--marine .ac-ic{background:color-mix(in srgb,var(--pd-carte) 10%,transparent); color:var(--pd-ciel)}
.ac-ticket{margin-top:auto; font:500 .75rem/1.5 var(--pd-mono); background:var(--pd-clair); border:1px dashed var(--pd-ligne);
  border-radius:10px; padding:12px 14px; color:var(--pd-encre)}
.ac-ticket b{display:block; font-weight:600}
.ac-sms{margin-top:auto; display:flex; flex-direction:column; gap:8px; font-size:.82rem}
.ac-sms span{align-self:flex-start; background:var(--pd-clair); border:1px solid var(--pd-ligne); padding:8px 12px;
  border-radius:14px 14px 14px 4px; max-width:92%}
.ac-sms span.moi{align-self:flex-end; background:var(--pd-peri-survol); color:var(--pd-carte); border-color:transparent; border-radius:14px 14px 4px 14px}
.ac-familles{margin:auto 0 0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:8px}
.ac-familles li{display:inline-flex; align-items:center; gap:7px; font-size:.8rem; font-weight:500; padding:6px 11px;
  border-radius:999px; background:color-mix(in srgb,var(--pd-carte) 8%,transparent); border:1px solid color-mix(in srgb,var(--pd-carte) 14%,transparent)}
.ac-familles svg{color:var(--pd-ciel)}

/* ---------- 3. Pro ---------- */
.ac-pro__grille{display:grid; gap:clamp(36px,5vw,80px); align-items:center}
@media (min-width:880px){.ac-pro__grille{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.ac-pro h2{margin:0}
.ac-liste{list-style:none; padding:0; margin:28px 0 0; display:grid; gap:16px}
.ac-liste li{display:grid; grid-template-columns:28px 1fr; gap:14px; align-items:start}
.ac-liste svg{color:var(--pd-ciel)}
.ac-liste b{display:block; font-weight:600; color:var(--pd-carte)}
.ac-liste span{color:var(--pd-sur-sombre); font-size:.95rem}
.ac-tel{margin:0 auto; width:min(300px,100%)}
.ac-tel__ecran{background:var(--pd-marine-fond); border:12px solid var(--pd-encre); border-radius:38px; padding:22px 16px;
  min-height:480px; box-shadow:var(--pd-ombre-sombre); font-size:.82rem}
.ac-tel__heure{text-align:center; font:600 .78rem var(--pd-texte); color:var(--pd-sur-sombre-doux); margin:0 0 18px}
.ac-tel__titre{font:700 1.1rem var(--pd-titre); margin:0 0 4px; color:var(--pd-carte)}
.ac-tel__sous{color:var(--pd-sur-sombre); margin:0 0 16px}
.ac-recap{display:grid; gap:8px}
.ac-recap div{display:flex; justify-content:space-between; gap:10px; background:color-mix(in srgb,var(--pd-carte) 6%,transparent);
  border:1px solid color-mix(in srgb,var(--pd-carte) 8%,transparent); border-radius:12px; padding:10px 12px; color:var(--pd-sur-sombre)}
.ac-recap b{font-weight:600; color:var(--pd-carte); font-variant-numeric:tabular-nums}
.ac-recap .tot{background:color-mix(in srgb,var(--pd-peri) 22%,transparent); border-color:var(--pd-peri)}
.ac-tel__legende{margin-top:12px; text-align:center; font-size:.8rem; color:var(--pd-sur-sombre-doux)}

/* ---------- 4. trois étapes ---------- */
.ac-etapes{list-style:none; margin:0; padding:0; display:grid; gap:30px; counter-reset:ac-e}
@media (min-width:760px){.ac-etapes{grid-template-columns:repeat(3,1fr); gap:20px}}
.ac-etapes li{position:relative; padding:28px 26px 26px; background:var(--pd-carte); border:1px solid var(--pd-ligne);
  border-radius:var(--pd-rayon-carte); counter-increment:ac-e; min-width:0}
.ac-etapes li::before{content:counter(ac-e); position:absolute; top:-16px; left:22px; width:34px; height:34px; border-radius:50%;
  background:var(--pd-peri-survol); color:var(--pd-carte); font:700 .95rem var(--pd-titre); display:grid; place-items:center; box-shadow:var(--pd-ombre-peri)}
.ac-etapes h3{margin:4px 0 0}
.ac-etapes p{color:var(--pd-encre-douce); margin:8px 0 0; font-size:.97rem}

/* ---------- 5. deux offres ---------- */
.ac-offres{display:grid; gap:20px; max-width:900px}
@media (min-width:720px){.ac-offres{grid-template-columns:1fr 1fr}}
.ac-offre{border-radius:var(--pd-rayon-carte); padding:34px 30px; border:1px solid var(--pd-ligne); background:var(--pd-carte);
  display:flex; flex-direction:column; gap:14px; min-width:0}
.ac-offre h3{margin:0}
.ac-offre--pro{background:var(--pd-marine); color:var(--pd-carte); border-color:transparent; box-shadow:var(--pd-ombre-sombre)}
.ac-offre--pro .ac-doux{color:var(--pd-sur-sombre)}
.ac-prix{margin:0; font-family:var(--pd-titre); font-size:2.2rem; font-weight:700; letter-spacing:-.02em}
.ac-prix small{font:500 .9rem var(--pd-texte); letter-spacing:0; margin-left:6px}
.ac-offre ul{list-style:none; margin:6px 0 10px; padding:0; display:grid; gap:9px; font-size:.95rem}
.ac-offre li{display:flex; gap:10px; align-items:flex-start}
.ac-offre li::before{content:""; flex:none; width:18px; height:18px; margin-top:3px; border-radius:50%; background:var(--pd-ciel-pale)}
.ac-offre--pro li::before{background:color-mix(in srgb,var(--pd-ciel) 30%,transparent)}
.ac-offre .ac-doux{margin:0; font-size:.9rem}
.ac-offre .ac-btn{align-self:flex-start; margin-top:auto}

/* ---------- prompt 119 : les quatre offres de l'accueil ---------- */
.ac-offres4{display:grid; gap:16px}
@media (min-width:640px){.ac-offres4{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){.ac-offres4{grid-template-columns:repeat(4,1fr)}}
.ac-offre4{border-radius:var(--pd-rayon-carte); padding:26px 24px; border:1px solid var(--pd-ligne); background:var(--pd-carte);
  display:flex; flex-direction:column; gap:10px; min-width:0; box-shadow:var(--pd-ombre-clair)}
.ac-offre4 h3{margin:0}
.ac-offre4 .ac-prix{font-size:1.9rem}
.ac-offre4 .ac-doux{margin:0; font-size:.92rem}
.ac-offre4--pro{background:var(--pd-marine); color:var(--pd-carte); border-color:transparent; box-shadow:var(--pd-ombre-sombre)}
.ac-offre4--pro .ac-doux{color:var(--pd-sur-sombre)}
.ac-offres-note{margin:14px 0 0; font-size:.9rem}

/* ---------- prompt 119 : l'offre qui ouvre chaque tuile ---------- */
.ac-tuile p.ac-offre-tag{margin-top:auto; align-self:flex-start; padding:5px 11px; border-radius:999px;
  background:var(--pd-peri-pale); color:var(--pd-indigo-charte); font:600 .78rem/1.3 var(--pd-texte)}
.ac-tuile--marine p.ac-offre-tag{background:color-mix(in srgb,var(--pd-carte) 12%,transparent); color:var(--pd-carte)}

/* ---------- prompt 119 : le défilement aimanté ----------
   Sur / et /tarifs seulement (ce fichier n'est chargé que par elles).
   `proximity` et non `mandatory` : une section plus haute que l'écran reste
   lisible sans sauter. `scroll-padding-top` (style.css) garde le début de
   chaque section sous la barre collante. Coupé sous prefers-reduced-motion. */
html{scroll-snap-type:y proximity}
main > section,.pied{scroll-snap-align:start}
@media (prefers-reduced-motion:reduce){html{scroll-snap-type:none}}

/* ---------- 6. le fondateur ---------- */
.ac-fondateur{margin:0; display:grid; gap:40px; align-items:center}
@media (min-width:780px){.ac-fondateur{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:48px}}
.ac-fondateur blockquote{margin:0; font-family:var(--pd-titre); font-weight:600; font-size:clamp(1.3rem,2.4vw,1.8rem);
  line-height:1.35; letter-spacing:-.01em; color:var(--pd-marine)}
.ac-fondateur figcaption{margin-top:18px; color:var(--pd-encre-douce); font-size:.95rem}
.ac-fondateur figcaption b{color:var(--pd-encre); font-weight:600}
.ac-fondateur--apres{margin-top:clamp(56px,8vw,96px)}
/* 118 quater : l'appel vers la fiche Google de la boutique de l'auteur. Sous
   la légende sur grand écran ; pleine largeur sous la photo sur téléphone. */
.ac-fondateur-cta{margin:0}
.ac-fondateur-cta .ac-btn{width:100%; justify-content:center}
.ac-fondateur-cta .ac-g{margin-left:0}
@media (min-width:780px){
  .ac-fondateur{grid-template-areas:"texte photo" "cta photo"; row-gap:20px}
  .ac-fondateur > div:first-child{grid-area:texte; align-self:end}
  .ac-fondateur > .ac-portrait{grid-area:photo}
  .ac-fondateur-cta{grid-area:cta; align-self:start}
  .ac-fondateur-cta .ac-btn{width:auto}
}
.ac-portrait{max-width:360px; width:100%; margin:0 auto}
.ac-portrait img{display:block; width:100%; height:auto; border-radius:var(--pd-rayon-carte);
  border:1px solid var(--pd-ligne); box-shadow:var(--pd-ombre-clair)}

/* ---------- 6. les avis de la fiche Google de Phonodesk ----------
   Une piste `scroll-snap` : une carte par écran sur téléphone, trois sur
   ordinateur. Sans script elle défile au doigt et au clavier ; `js/site.js`
   ajoute les points, les flèches et le défilement automatique. */
.ac-carrousel{position:relative}
.ac-piste{display:grid; grid-auto-flow:column; grid-auto-columns:100%; align-items:start; gap:16px; overflow-x:auto;
  scroll-snap-type:x mandatory; scrollbar-width:none; padding:4px 4px 8px; scroll-padding:4px}
@media (min-width:760px){.ac-piste{grid-auto-columns:calc((100% - 16px) / 2)}}
@media (min-width:1040px){.ac-piste{grid-auto-columns:calc((100% - 32px) / 3)}}
.ac-piste::-webkit-scrollbar{display:none}
.ac-piste:focus-visible{outline:3px solid var(--pd-ciel); outline-offset:3px; border-radius:var(--pd-rayon)}
.ac-avis-carte{scroll-snap-align:start; min-width:0; display:flex; flex-direction:column; gap:10px; padding:22px;
  background:var(--pd-carte); border:1px solid var(--pd-ligne); border-radius:var(--pd-rayon-carte); box-shadow:var(--pd-ombre-clair)}
.ac-avis-carte p{margin:0}
.ac-avis-texte{font-size:.95rem; white-space:pre-line; overflow-wrap:anywhere}
/* UN AVIS LONG EST REPLIÉ, PAS COUPÉ : le texte entier est dans la page, le
   script le replie à huit lignes et pose « Lire tout l’avis ». Sans script,
   rien n'est replié. Sans cela, la piste prenait la hauteur de l'avis le plus
   long, et les avis courts flottaient au-dessus d'un grand vide. */
.ac-avis-texte.ac-replie{display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:8; line-clamp:8; overflow:hidden}
.ac-avis-plus{align-self:flex-start; padding:0; border:0; background:none; cursor:pointer;
  font:600 .9rem var(--pd-texte); color:var(--pd-lien-clair); text-decoration:underline}
.ac-avis-qui{display:flex; align-items:center; gap:12px}
.ac-avis-qui b{display:block; font-weight:600; font-size:.95rem}
.ac-avis-qui b a{color:var(--pd-encre)}
.ac-avis-qui small{color:var(--pd-encre-douce); font-size:.8rem}
.ac-av{width:40px; height:40px; border-radius:50%; flex:none; display:grid; place-items:center; object-fit:cover;
  background:var(--pd-ciel-pale); color:var(--pd-marine); font:600 .85rem var(--pd-texte)}
.ac-g{margin-left:auto; flex:none; width:28px; height:28px; border-radius:50%; border:1px solid var(--pd-ligne);
  display:grid; place-items:center; font:700 .85rem var(--pd-titre); color:var(--pd-peri-survol); text-decoration:none}
.ac-g:hover{border-color:var(--pd-peri)}
.ac-etoiles .off{color:var(--pd-ligne)}
.ac-carrousel__pied{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:10px}
/* Douze avis, douze points sur un téléphone : ils passent à la ligne plutôt
   que de pousser les flèches hors de l’écran. */
.ac-points{display:flex; flex-wrap:wrap; gap:4px; flex:1 1 auto; min-width:0}
.ac-points button{width:24px; height:24px; border:0; padding:0; background:none; cursor:pointer; display:grid; place-items:center}
.ac-points button::before{content:""; width:8px; height:8px; border-radius:4px; background:var(--pd-ligne)}
.ac-points button[aria-current="true"]::before{width:22px; background:var(--pd-peri-survol)}
.ac-fleches{display:flex; gap:8px}
.ac-fleche{width:44px; height:44px; border-radius:50%; border:1px solid var(--pd-ligne); background:var(--pd-carte);
  color:var(--pd-encre); cursor:pointer; display:grid; place-items:center}
.ac-fleche:hover{border-color:var(--pd-peri); color:var(--pd-peri-survol)}
.ac-avis-cta{margin-top:26px; padding:22px 26px; border-radius:var(--pd-rayon-carte); background:var(--pd-clair-doux);
  display:flex; flex-wrap:wrap; gap:18px 28px; align-items:center; justify-content:space-between}
.ac-avis-cta p{margin:0}
.ac-avis-cta .ac-doux{margin-top:6px; font-size:.9rem}
.ac-avis-cta__note{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.ac-note{font-family:var(--pd-titre); font-size:2rem; font-weight:700; line-height:1; color:var(--pd-marine)}
.ac-avis-cta a:not(.ac-btn){color:var(--pd-lien-clair); text-decoration:underline}
.ac-avis-cta .ac-boutons{margin:0}

/* ---------- 7. la FAQ (le balisage de `faq_html()`) ---------- */
.accueil #faq .faq{max-width:760px; display:grid; gap:10px}
.accueil #faq details{background:var(--pd-carte); border:1px solid var(--pd-ligne); border-radius:16px; padding:0 22px}
.accueil #faq summary{cursor:pointer; list-style:none; font-weight:600; padding:18px 0; display:flex; justify-content:space-between;
  gap:16px; align-items:center; color:var(--pd-encre)}
.accueil #faq summary::-webkit-details-marker{display:none}
/* 118 TER — UN CHEVRON, PAS UN « + » SUR UN CHEVRON. La règle `.faq summary::after`
   de style.css dessine un chevron par deux bordures, déjà pivoté : le « + » d'ici
   en héritait. Le chevron est maintenant AUTONOME (bordures, position et rotation
   remises à zéro). Sa couleur, %235B5BF0, est --pd-peri-survol : un var() n'est
   pas lisible dans une URL data: SVG, et banc-vitrine compare la valeur au jeton. */
.accueil #faq summary::after{content:""; position:static; flex:none; width:22px; height:22px; margin:0; border:0; border-radius:50%;
  background:var(--pd-ciel-pale) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B5BF0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>") center/14px no-repeat;
  transform:none; transition:transform .2s}
.accueil #faq details[open] summary::after{transform:rotate(180deg); margin:0}
.accueil #faq .faq__corps p{margin:0; padding:0 0 18px; color:var(--pd-encre-douce); max-width:62ch}

/* ---------- 8. l'appel final ---------- */
.ac-final{text-align:center}
.ac-final .ac-lead{margin-inline:auto}
.ac-final .ac-boutons{justify-content:center}
.ac-final .ac-oeil{justify-content:center}

/* ---------- le pied, marine, avec le NAP ---------- */
.accueil .pied{background:var(--pd-marine); color:var(--pd-sur-sombre); border-top:0}
.accueil .pied a,.accueil .pied__desc,.accueil .pied__adresse{color:var(--pd-sur-sombre)}
.accueil .pied a:hover{color:var(--pd-carte)}
.accueil .pied__titre,.accueil .pied__adresse b{color:var(--pd-carte)}
.accueil .pied__bas{border-top-color:color-mix(in srgb,var(--pd-carte) 10%,transparent); color:var(--pd-sur-sombre-doux)}

/* ============================================================
   /tarifs — prompt 119 §2. Les cartes reprennent `.ac-offre` ; tout le
   reste est préfixé `tf-`.
============================================================ */
.tf-hero{padding-block:clamp(48px,7vw,88px) clamp(56px,8vw,96px)}
.tf-tete{text-align:center; max-width:820px}
.tf-tete h1{font-size:clamp(2.1rem,5vw,3.4rem)}
.tf-tete .ac-lead{margin-inline:auto; color:var(--pd-sur-sombre)}
.tf-bascule{display:inline-flex; align-items:center; gap:4px; margin-top:28px; padding:5px; border-radius:999px;
  background:color-mix(in srgb,var(--pd-carte) 8%,transparent); border:1px solid color-mix(in srgb,var(--pd-carte) 14%,transparent)}
.tf-bascule[hidden]{display:none}
.tf-bascule button{min-height:40px; padding:8px 18px; border:0; border-radius:999px; background:none; color:var(--pd-sur-sombre);
  font:600 .92rem var(--pd-texte); cursor:pointer}
.tf-bascule button[aria-pressed="true"]{background:var(--pd-carte); color:var(--pd-marine)}
.tf-eco{margin:0 10px 0 6px; font:600 .8rem var(--pd-texte); color:var(--pd-ciel)}
.tf-cartes{display:grid; gap:16px; margin-top:44px; align-items:stretch}
@media (min-width:640px){.tf-cartes{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.tf-cartes{grid-template-columns:repeat(4,1fr)}}
.tf-cartes .ac-offre{position:relative; padding:28px 24px; color:var(--pd-encre); box-shadow:var(--pd-ombre-clair)}
.tf-cartes .ac-offre--pro{color:var(--pd-carte)}
.tf-nom{margin:0; font:600 .8rem var(--pd-texte); letter-spacing:.1em; text-transform:uppercase; color:var(--pd-peri-survol)}
.accueil .tf-nom{font:600 .8rem var(--pd-texte); letter-spacing:.1em; color:var(--pd-peri-survol)}
.accueil .ac-offre--pro .tf-nom{color:var(--pd-ciel)}
.tf-pour{margin:0; font-size:.92rem; color:var(--pd-encre-douce); min-height:2.8em}
.ac-offre--pro .tf-pour{color:var(--pd-sur-sombre)}
.tf-cartes .ac-prix{display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; line-height:1.1}
.tf-cartes .ac-prix small{margin-left:0; color:var(--pd-encre-douce)}
.tf-cartes .ac-offre--pro .ac-prix small{color:var(--pd-sur-sombre)}
.tf-barre{font:500 1rem var(--pd-texte); color:var(--pd-encre-douce)}
.tf-etiquette{position:absolute; top:-13px; left:24px; padding:5px 11px; border-radius:999px; background:var(--pd-peri-survol);
  color:var(--pd-carte); font:600 .72rem var(--pd-texte); letter-spacing:.08em; text-transform:uppercase; box-shadow:var(--pd-ombre-peri)}
.ac-offre li.tf-herite{color:var(--pd-encre-douce)}
.ac-offre--pro li.tf-herite{color:var(--pd-sur-sombre)}
.ac-offre li.tf-herite::before{background:transparent; border:1.5px solid var(--pd-ligne)}
.tf-sms{margin:4px 0 0; padding:10px 12px; border-radius:10px; background:var(--pd-clair); font-size:.85rem;
  display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap}
.ac-offre--pro .tf-sms{background:color-mix(in srgb,var(--pd-carte) 8%,transparent)}
.tf-sms b{font-weight:600}
.tf-cartes .ac-btn{align-self:stretch; justify-content:center; margin-top:auto}
.ac-offre .tf-pied{font-size:.8rem}
.tf-deux{display:grid; gap:20px}
@media (min-width:860px){.tf-deux{grid-template-columns:1fr 1fr}}
.tf-encart{background:var(--pd-carte); border:1px solid var(--pd-ligne); border-radius:var(--pd-rayon-carte); padding:28px; min-width:0}
.tf-encart h2{font-size:clamp(1.3rem,2.4vw,1.6rem); margin:0 0 10px}
.tf-encart p{color:var(--pd-encre-douce); font-size:.97rem; margin:10px 0 0}
.tf-encart p.ac-oeil{color:var(--pd-carte); font-size:.74rem; margin:0 0 14px}
.tf-encart a{color:var(--pd-lien-clair); text-decoration:underline}
.tf-pas{list-style:none; counter-reset:pas; display:grid; gap:12px; margin:16px 0 0; padding:0}
.tf-pas li{counter-increment:pas; display:grid; grid-template-columns:30px 1fr; gap:12px; align-items:start; font-size:.95rem}
.tf-pas li::before{content:counter(pas); width:30px; height:30px; border-radius:50%; background:var(--pd-ciel-pale);
  color:var(--pd-marine); display:grid; place-items:center; font:700 .85rem var(--pd-titre)}
.tf-calc{display:grid; gap:12px; margin-top:16px}
.tf-calc label{display:grid; gap:6px; font-size:.85rem; color:var(--pd-encre-douce)}
.tf-calc select,.tf-calc input{font:500 1rem var(--pd-texte); padding:10px 12px; border:1px solid var(--pd-ligne);
  border-radius:var(--pd-rayon); background:var(--pd-clair); color:var(--pd-encre)}
.tf-total{margin:0; padding:16px 18px; border-radius:14px; background:var(--pd-marine); color:var(--pd-carte);
  display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap}
.tf-encart .tf-total{color:var(--pd-carte)}
.tf-total b{font:700 1.6rem var(--pd-titre); font-variant-numeric:tabular-nums}
.tf-total small{color:var(--pd-sur-sombre); font-size:.85rem}
.tf-tableau{overflow-x:auto; margin-top:32px}
.tf-tableau table{border-collapse:collapse; width:100%; min-width:640px; font-size:.92rem}
.tf-tableau th,.tf-tableau td{padding:12px 14px; border-bottom:1px solid var(--pd-ligne); text-align:left; vertical-align:top}
.tf-tableau thead th{font:600 .78rem var(--pd-texte); letter-spacing:.08em; text-transform:uppercase; color:var(--pd-encre-douce)}
.tf-tableau tbody th{font:500 .92rem var(--pd-texte); color:var(--pd-encre)}
.tf-tableau td.tf-oui::before{content:""; display:inline-block; width:8px; height:8px; margin-right:7px; border-radius:50%;
  background:var(--pd-peri-survol); vertical-align:1px}
.tf-tableau td.tf-non{color:var(--pd-encre-douce)}
.tf-note{margin:18px 0 0; font-size:.85rem; max-width:70ch}
.tf-info{display:flex; align-items:center; gap:8px; margin:10px 0 0; font-size:.85rem}
.tf-info svg{flex:none; color:var(--pd-peri-survol)}