/* Hallmark · genre: modern-minimal · macrostructure: Split Studio (en-tête) puis fiche (F3) et étapes (F4) · theme: custom
 * Page d'accueil de sonnette.app depuis le 14/10/2026 : variante E = variante A, avec le téléphone vidéo et l'autocollant QR de la variante B (14/10/2026).
 * vibe: « dire ce que c'est, sans détour » · paper #FFFFFF / #F3F5F8 · accent #0057D9 (bleu vif) · surligneur #F2A900
 * display: Bricolage Grotesque 700 · body: Atkinson Hyperlegible 400/700 · outlier: Young Serif (téléphone de démo seul)
 * nav: N1b (marque, sections, actions) · footer: Ft4 colophon dense · enrichment: démo HTML vivante, aucune image générée
 * axes: light / grotesk-sans / cool · Hallmark · pre-emit critique: P4 H5 E4 S5 R4 V4
 *
 * Palette : règles daltoniennes de Charles (bleu #0057D9, jaune #F2A900, foncé en #9A6A00 en texte, rouge #E3000F,
 * noir #2B2B2B, gris clair #C4CCD4). Les valeurs restent en hexadécimal, comme dans ses règles. Mode clair seulement. */

@font-face{font-family:"Atkinson Hyperlegible";src:url("/assets/fonts/atkinson-hyperlegible-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url("/assets/fonts/atkinson-hyperlegible-700.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Bricolage Grotesque";src:url("/assets/fonts/bricolage-grotesque-700.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Young Serif";src:url("/assets/fonts/young-serif-400.woff2") format("woff2");font-weight:400;font-display:swap}

:root{
  /* Couleurs */
  --color-paper:#FFFFFF;
  --color-paper-2:#F3F5F8;
  --color-ink:#2B2B2B;
  --color-ink-2:#454A50;
  --color-muted:#5C636B;
  --color-rule:#C4CCD4;
  --color-rule-fort:#7A838C;
  --color-accent:#0057D9;
  --color-accent-appui:#0046AE;
  --color-on-accent:#FFFFFF;
  --color-surligneur:#F2A900;
  --color-jaune-texte:#9A6A00;
  --color-alerte:#E3000F;
  --color-focus:#0057D9;
  --color-focus-sombre:#FFFFFF;
  --color-texte-sombre:#E1E4E8;
  --color-ombre:rgb(43 43 43 / .18);

  /* Ambiances des apps d'établissement : seulement dans le téléphone de démo */
  --sn-terracotta:#9A4A21;--sn-terracotta-doux:#F4E3D7;--sn-terracotta-fond:#FDF6EF;
  --sn-pinede:#2F5233;--sn-pinede-doux:#E4EBE1;--sn-pinede-fond:#F7F6EE;
  --sn-lagune:#17605F;--sn-lagune-doux:#DDEBE8;--sn-lagune-fond:#FAF5EC;
  --sn-drapeau:#1E7A3C;--sn-encre:#1F1A17;--sn-gris:#5D4F47;--sn-carte:#FFFBF5;--sn-filet:#E7DDD2;--sn-filet-fort:#E2D6C9;--sn-sur-primaire:#FFFFFF;--sn-ombre:rgb(0 0 0 / .35);

  /* Polices */
  --font-display:"Bricolage Grotesque",system-ui,sans-serif;
  --font-body:"Atkinson Hyperlegible",system-ui,sans-serif;
  --font-outlier:"Young Serif",Georgia,serif;

  /* Tailles */
  --text-sm:.875rem;
  --text-base:1.0625rem;
  --text-md:clamp(1.0625rem,.98rem + .45vw,1.25rem);
  --text-lg:clamp(1.25rem,1.1rem + .7vw,1.625rem);
  --text-xl:clamp(1.75rem,1.25rem + 2.2vw,2.75rem);
  --text-display:clamp(1.9rem,1.25rem + 3.1vw,3.5rem);

  /* Espaces (pas de 4 px) */
  --space-3xs:.25rem;--space-2xs:.5rem;--space-xs:.75rem;--space-sm:1rem;--space-md:1.5rem;
  --space-lg:2rem;--space-xl:3rem;--space-2xl:4.5rem;--space-3xl:7rem;
  --marge:clamp(1rem,4vw,3rem);
  --largeur:75rem;

  /* Formes et mouvement */
  --radius-bouton:999px;--radius-carte:16px;--radius-champ:12px;--radius-ecran:28px;
  --rule-fin:1px solid var(--color-rule);
  --ease-out:cubic-bezier(.16,1,.3,1);--ease-in:cubic-bezier(.7,0,.84,0);--ease-in-out:cubic-bezier(.65,0,.35,1);
  --dur-court:160ms;--dur-moyen:260ms;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:clip}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--color-paper);color:var(--color-ink);font:400 var(--text-base)/1.55 var(--font-body)}
img{max-width:100%;display:block}
picture{display:contents}
p{margin:0;text-wrap:pretty}
a{color:var(--color-ink);font-weight:700;text-underline-offset:.18em;text-decoration-thickness:1.5px}
a:hover{color:var(--color-accent)}
:focus-visible{outline:3px solid var(--color-focus);outline-offset:3px}
svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.evitement{position:absolute;left:-9999px;top:8px;z-index:50;padding:10px 16px;border-radius:10px;background:var(--color-ink);color:var(--color-paper)}
.evitement:focus{left:8px;color:var(--color-paper)}
.s-piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- Typographie ---------- */
.titre-2{margin:0;font:700 var(--text-xl)/1.06 var(--font-display);letter-spacing:-.02em;text-wrap:balance;overflow-wrap:anywhere;min-width:0}
.titre-3{margin:0;font:700 var(--text-lg)/1.15 var(--font-display);letter-spacing:-.01em;text-wrap:balance;overflow-wrap:anywhere}
.chapo{font-size:var(--text-md);line-height:1.5;color:var(--color-ink-2);max-width:38em}
/* Surligneur : un trait de marqueur jaune derrière le texte, qui reste noir */
.surligne{color:inherit;background:linear-gradient(var(--color-surligneur),var(--color-surligneur)) no-repeat 0 88% / 100% .5em;padding:0 .05em;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* ---------- Boutons ---------- */
.bouton{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2xs);min-height:52px;padding:0 var(--space-md);border:2px solid var(--color-accent);border-radius:var(--radius-bouton);background:var(--color-accent);color:var(--color-on-accent);font:700 var(--text-base)/1 var(--font-body);text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color var(--dur-court) var(--ease-out),border-color var(--dur-court) var(--ease-out),color var(--dur-court) var(--ease-out)}
.bouton:hover{background:var(--color-accent-appui);border-color:var(--color-accent-appui);color:var(--color-on-accent)}
.bouton:active{transform:translateY(1px)}
.bouton[disabled]{opacity:.55;cursor:not-allowed}
.bouton--trait{background:var(--color-paper);color:var(--color-ink);border-color:var(--color-ink)}
.bouton--trait:hover{background:var(--color-ink);border-color:var(--color-ink);color:var(--color-paper)}
.bouton--petit{min-height:44px;padding:0 var(--space-sm);font-size:var(--text-sm)}
.bouton svg{width:20px;height:20px}

/* ---------- En-tête de page (N1b) ---------- */
.tete{max-width:var(--largeur);margin:0 auto;padding:var(--space-xs) var(--marge);display:flex;align-items:center;gap:var(--space-sm)}
.marque{display:flex;align-items:center;gap:var(--space-2xs);min-height:44px;font:700 1.5rem/1 var(--font-display);letter-spacing:-.01em;text-decoration:none;white-space:nowrap}
.marque svg{width:26px;height:26px;stroke:var(--color-accent);stroke-width:2}
.tete__nav{display:none}
.tete__connexion{margin-left:auto;min-height:44px;display:flex;align-items:center;font-size:var(--text-sm);white-space:nowrap}
.tete__cta{display:none}
@media (min-width:30rem){.tete__cta{display:inline-flex}.tete__connexion{margin-left:auto}}
@media (min-width:62rem){
  .tete{gap:var(--space-md)}
  .tete__nav{display:flex;gap:var(--space-3xs);margin-left:var(--space-lg)}
  .tete__nav a{min-height:44px;display:flex;align-items:center;padding:0 var(--space-xs);font-weight:400;text-decoration:none;white-space:nowrap}
  .tete__nav a:hover{text-decoration:underline}
}

/* ---------- En-tête de contenu : Split Studio ---------- */
.heros{max-width:var(--largeur);margin:0 auto;padding:var(--space-2xs) var(--marge) var(--space-lg);display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-lg)}
.heros__texte{display:flex;flex-direction:column;gap:var(--space-sm);min-width:0}
.heros__titre{margin:0;font:700 var(--text-display)/1.05 var(--font-display);letter-spacing:-.025em;text-wrap:balance;overflow-wrap:anywhere;min-width:0}
.heros__suite{display:block;margin-top:.18em;color:var(--color-accent)}
.heros__chapo{font-size:var(--text-md);line-height:1.5;color:var(--color-ink-2);max-width:32em}
.heros__actions{display:flex;flex-wrap:wrap;gap:var(--space-xs);margin-top:var(--space-2xs)}
.heros__note{font-size:var(--text-sm);line-height:1.5;color:var(--color-muted)}
.lien-tel{white-space:nowrap}
@media (min-width:62rem){
  .heros{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:var(--space-2xl);align-items:center;padding-top:var(--space-xl)}
  .heros__texte{gap:var(--space-md)}
  .heros{padding-bottom:var(--space-2xl)}
  .heros__suite{margin-top:.12em}
  .heros__note{font-size:var(--text-base)}
}

/* ---------- Scène : la vraie app en vidéo et le QR code de la démo (reprise de la variante B) ---------- */
.scene{display:flex;flex-direction:column;align-items:center;gap:var(--space-sm);min-width:0}
.scene fieldset{border:0;margin:0;padding:0;min-width:0}
.scene legend{padding:0;margin-bottom:var(--space-2xs);font-size:var(--text-sm);font-weight:700;color:var(--color-ink)}
.scene__activites{width:min(340px,100%)}
.onglets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3xs);padding:var(--space-3xs);border:var(--rule-fin);border-radius:var(--radius-bouton);background:var(--color-paper-2);position:relative}
.onglets input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.onglets label{min-height:44px;display:flex;align-items:center;justify-content:center;padding:0 var(--space-2xs);border-radius:var(--radius-bouton);font-size:var(--text-sm);font-weight:700;white-space:nowrap;cursor:pointer;transition:background-color var(--dur-court) var(--ease-out),color var(--dur-court) var(--ease-out)}
.onglets label:hover{background:var(--color-paper)}
.onglets input:checked+label{background:var(--color-ink);color:var(--color-paper)}
.onglets input:focus-visible+label{outline:3px solid var(--color-focus);outline-offset:2px}

/* Une seule app à la fois, en CSS seul : le camping par défaut (thème de la publicité Meta active).
   Le masquage reste plus spécifique que .boucle{display:block}, sinon une autre vidéo couvre la bonne. */
.scene .pour-restaurant,.scene .pour-hotel{display:none}
.scene:has(#m-restaurant:checked) .pour-restaurant,.scene:has(#m-hotel:checked) .pour-hotel{display:block}
.scene:has(.onglets input:not(#m-camping):checked) .pour-camping{display:none}

/* Au téléphone, l'autocollant est collé sur le bord de l'écran ; le toucher ouvre la démo. */
.scene__ecran{position:relative;display:flex;justify-content:flex-end;width:min(100%,400px);min-width:0;margin-top:var(--space-2xs)}
.scene__annotations{position:absolute;z-index:2;left:0;top:-6px;display:flex;flex-direction:column;gap:var(--space-sm)}
.autocollant{display:flex;flex-direction:column;gap:6px;width:clamp(110px,29vw,140px);padding:8px 8px 9px;border-radius:12px;background:var(--color-surligneur);color:var(--color-ink);text-decoration:none;box-shadow:0 18px 30px -18px var(--color-ombre);transform:rotate(-4deg);transition:transform var(--dur-moyen) var(--ease-out)}
.autocollant:hover{color:var(--color-ink);transform:rotate(-1deg) translateY(-2px)}
.autocollant:focus-visible{outline:3px solid var(--color-ink);outline-offset:3px}
.autocollant__tete{display:flex;align-items:center;gap:4px;font:700 clamp(15px,4vw,18px)/1 var(--font-display);white-space:nowrap}
.autocollant__tete svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.qr{position:relative;display:block;padding:5px;border-radius:6px;background:var(--color-paper);color:var(--color-ink);overflow:hidden;--qr-course:84px}
.qr svg{display:block;width:100%;height:auto;shape-rendering:crispEdges;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter}
.autocollant__legende{display:none;max-width:110px;font-size:var(--text-sm);line-height:1.4;color:var(--color-ink-2)}

/* L'écran est une vraie capture de l'app (barre d'état comprise) : aucun cadre dessiné, un filet suffit. */
.telephone{margin:0;width:min(300px,calc(100% - 40px));display:flex;flex-direction:column;gap:var(--space-xs)}
.telephone__vitre{position:relative;aspect-ratio:608/1316;border-radius:var(--radius-ecran);overflow:hidden;border:1.5px solid var(--color-rule);background:var(--color-paper-2);box-shadow:0 30px 60px -34px var(--color-ombre)}
.boucle{display:block;width:100%;height:100%;object-fit:cover}
.telephone__legende{font-size:var(--text-sm);line-height:1.4;color:var(--color-ink-2);text-align:center}

/* Pause : la vidéo démarre seule, il faut pouvoir l'arrêter (bouton affiché par e.js) */
.pause{position:absolute;z-index:1;right:10px;bottom:10px;width:44px;height:44px;display:grid;place-items:center;padding:0;border:2px solid var(--color-paper);border-radius:50%;background:var(--color-ink);color:var(--color-paper);cursor:pointer}
.pause[hidden]{display:none}
.pause:hover{background:var(--color-surligneur);color:var(--color-ink)}
.pause svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.pause__lecture{display:none}
.pause[data-etat="arret"] .pause__barres{display:none}
.pause[data-etat="arret"] .pause__lecture{display:inline;fill:currentColor;stroke-width:1.5}

/* Le scan : une ligne passe deux fois sur le QR code, puis s'arrête. */
@media (prefers-reduced-motion:no-preference){
  .autocollant .qr::after{content:"";position:absolute;left:4px;right:4px;top:6px;height:3px;border-radius:2px;background:var(--color-accent);opacity:0;animation:scan 1.6s var(--ease-in-out) .8s 2 both}
}
@keyframes scan{0%{opacity:0;transform:translateY(0)}12%{opacity:.85}88%{opacity:.85}100%{opacity:0;transform:translateY(var(--qr-course,130px))}}

/* Sur ordinateur, la légende de l'autocollant dit de le scanner avec son téléphone. */
@media (min-width:62rem){
  .scene{width:min(400px,100%);justify-self:end}
  .scene__activites{width:100%}
  .scene__ecran{width:100%}
  .scene__annotations{left:-46px;top:56px}
  .autocollant{width:150px;padding:10px 10px 12px;gap:8px}
  .autocollant__tete{font-size:19px;gap:6px}
  .autocollant__tete svg{width:20px;height:20px}
  .qr{padding:7px;--qr-course:112px}
  .autocollant__legende{display:block}
  .telephone{width:min(250px,calc(100% - 110px))}
  .telephone__legende{text-align:left}
}

/* ---------- Blocs de contenu ---------- */
.bloc{max-width:var(--largeur);margin:0 auto;padding:var(--space-xl) var(--marge)}
@media (min-width:48rem){.bloc{padding-block:var(--space-2xl)}}
.bloc__tete{display:flex;flex-direction:column;gap:var(--space-sm);max-width:44rem;margin-bottom:var(--space-xl)}
.bande{background:var(--color-paper-2);border-block:1px solid var(--color-rule)}

/* Ce que vos clients trouvent : une fiche (F3), une ligne par métier, toute la ligne mène à la page du métier */
.fiche{list-style:none;margin:0;padding:0;border-top:2px solid var(--color-ink)}
.fiche li{border-bottom:var(--rule-fin)}
.fiche a{display:grid;grid-template-columns:minmax(0,1fr) 24px;gap:var(--space-3xs) var(--space-sm);align-items:center;padding:var(--space-md) 0;text-decoration:none;font-weight:400;color:var(--color-ink)}
.fiche b{font:700 var(--text-lg)/1.15 var(--font-display)}
.fiche span{grid-column:1;font-size:var(--text-base);line-height:1.45;color:var(--color-ink-2)}
.fiche svg{grid-column:2;grid-row:1 / span 2;width:24px;height:24px;stroke-width:2.2;color:var(--color-accent);transition:transform var(--dur-court) var(--ease-out)}
.fiche a:hover b{color:var(--color-accent)}
.fiche a:hover svg{transform:translateX(4px)}
.fiche__pied{margin-top:var(--space-md);max-width:44rem;color:var(--color-ink-2)}
@media (min-width:48rem){
  .fiche a{grid-template-columns:minmax(0,15rem) minmax(0,1fr) 24px;gap:var(--space-lg)}
  .fiche span{grid-column:2}
  .fiche svg{grid-column:3;grid-row:1}
}

/* Ce que vous avez à faire : trois lignes numérotées (F4) */
.etapes{list-style:none;margin:0;padding:0;border-top:2px solid var(--color-ink)}
.etape{display:grid;grid-template-columns:3rem minmax(0,1fr);gap:var(--space-sm) var(--space-md);padding:var(--space-xl) 0;border-bottom:var(--rule-fin)}
.etape__num{font:700 2.75rem/1 var(--font-display);color:var(--color-accent);font-variant-numeric:tabular-nums}
.etape__texte{display:flex;flex-direction:column;gap:var(--space-xs);min-width:0}
.etape__texte p{max-width:36em;color:var(--color-ink-2)}
.etape__photo{grid-column:1 / -1;position:relative;aspect-ratio:4 / 3;border-radius:var(--radius-carte);overflow:hidden;background:var(--color-paper-2)}
.etape__photo img{width:100%;height:100%;object-fit:cover}
.etape__photo--haut{aspect-ratio:4 / 5}
.etape__photo--haut img{object-position:top}
.etape__photo--qr{overflow:visible}
.etape__photo--qr img{border-radius:var(--radius-carte)}
.pastille-qr{position:absolute;z-index:1;left:var(--space-xs);top:var(--space-xs);width:96px;height:96px;border-radius:50%;background:var(--color-accent);color:var(--color-on-accent);border:4px solid var(--color-paper);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-3xs);font:700 1rem/1 var(--font-display);text-align:center;transform:rotate(-8deg);box-shadow:0 6px 14px -6px var(--color-ombre)}
.pastille-qr svg{width:26px;height:26px;stroke-width:2}
@media (min-width:48rem){
  .etape{grid-template-columns:4.5rem minmax(0,1fr) minmax(0,22rem);align-items:start;gap:var(--space-lg)}
  .etape__num{font-size:4rem}
  .etape__photo,.etape__photo--haut{grid-column:3;aspect-ratio:4 / 3}
}

/* Votre côté du comptoir : les vraies captures, cadre fin seulement */
.ecrans{display:grid;grid-auto-flow:column;grid-auto-columns:min(72vw,280px);gap:var(--space-md);overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(-1 * var(--marge));padding:0 var(--marge) var(--space-sm);scroll-padding-inline:var(--marge)}
.ecrans__item{margin:0;display:flex;flex-direction:column;gap:var(--space-sm);scroll-snap-align:start}
.ecrans__capture{border-radius:22px;overflow:hidden;border:1px solid var(--color-rule-fort);background:var(--color-paper);max-height:560px}
.ecrans__capture img{width:100%;height:auto}
.ecrans__item figcaption{font-size:var(--text-base);line-height:1.45;color:var(--color-ink-2)}
.ecrans__item figcaption b{display:block;margin-bottom:var(--space-3xs);font:700 var(--text-lg)/1.2 var(--font-display);color:var(--color-ink)}
@media (min-width:62rem){
  .ecrans{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible;margin-inline:0;padding:0;gap:var(--space-xl)}
  .ecrans__item:nth-child(2){margin-top:var(--space-2xl)}
}

/* Référence : photo et texte côte à côte */
.reference{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-lg);align-items:center}
.reference__photo{border-radius:var(--radius-carte);overflow:hidden;aspect-ratio:16 / 10;background:var(--color-paper-2)}
.reference__photo img{width:100%;height:100%;object-fit:cover}
.reference__texte{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-sm)}
.reference__texte p{max-width:34em;color:var(--color-ink-2)}
.reference__texte .titre-2{font-size:clamp(1.6rem,1.2rem + 1.6vw,2.4rem)}
.reference__depuis{display:inline-flex;align-items:center;gap:var(--space-2xs);padding:var(--space-3xs) var(--space-xs);border:1.5px solid var(--color-ink);border-radius:999px;font-size:var(--text-sm);font-weight:700;color:var(--color-ink)}
.reference__depuis::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--color-accent)}
.reference__texte .bouton{margin-top:var(--space-2xs)}
@media (min-width:62rem){.reference{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:var(--space-2xl)}}

/* Le prix */
.prix{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-xl)}
.prix__texte{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-md)}
.prix__formules{margin:0;width:100%;border-top:2px solid var(--color-ink)}
.prix__formules>div{display:flex;flex-direction:column;gap:var(--space-3xs);padding:var(--space-sm) 0;border-bottom:var(--rule-fin)}
@media (min-width:48rem){.prix__formules>div{flex-direction:row;align-items:baseline;justify-content:space-between;gap:var(--space-md)}}
.prix__formules dt{font-weight:700}
.prix__formules dd{margin:0;color:var(--color-ink-2)}
.prix__formules dd b{font:700 var(--text-xl)/1 var(--font-display);color:var(--color-ink);font-variant-numeric:tabular-nums;margin-right:var(--space-3xs)}
.prix__note{color:var(--color-ink-2);max-width:34em}
.prix__inclus{align-self:start;padding:var(--space-md);border:1px solid var(--color-rule-fort);border-radius:var(--radius-carte);background:var(--color-paper)}
.prix__inclus-titre{font:700 var(--text-lg)/1.2 var(--font-display);margin-bottom:var(--space-xs)}
.prix__inclus ul{list-style:none;margin:0;padding:0}
.prix__inclus li{display:flex;gap:var(--space-xs);align-items:flex-start;padding:var(--space-xs) 0;border-top:var(--rule-fin)}
.prix__inclus li::before{content:"";flex:none;width:14px;height:8px;margin-top:.4em;border:solid var(--color-accent);border-width:0 0 3px 3px;transform:rotate(-45deg)}
@media (min-width:62rem){.prix{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--space-2xl);align-items:start}}

/* Questions */
.questions{display:grid;grid-template-columns:minmax(0,1fr)}
.faq{border-top:2px solid var(--color-ink)}
.faq details{border-bottom:var(--rule-fin)}
.faq summary{min-height:60px;display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);padding:var(--space-sm) 0;cursor:pointer;list-style:none;font-weight:700;font-size:var(--text-md);line-height:1.35}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:12px;height:12px;margin-right:var(--space-2xs);border:solid var(--color-ink);border-width:0 2.5px 2.5px 0;transform:rotate(45deg) translateY(-3px);transition:transform var(--dur-court) var(--ease-out)}
.faq details[open] summary::after{transform:rotate(-135deg) translateY(-3px)}
.faq summary:hover{color:var(--color-accent)}
.faq p{padding:0 var(--space-xl) var(--space-md) 0;max-width:46em;color:var(--color-ink-2)}
@media (min-width:62rem){
  .questions{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--space-2xl);align-items:start}
  .questions .bloc__tete{margin-bottom:0;position:sticky;top:var(--space-lg)}
}

/* Contact : Charles décroche */
.contact{background:var(--color-ink);color:var(--color-paper)}
.contact a{color:var(--color-paper)}
.contact__boite{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-xl)}
.contact__texte{display:flex;flex-direction:column;gap:var(--space-sm)}
.contact__texte p{max-width:32em;color:var(--color-texte-sombre)}
.contact__tel{font:700 clamp(2.25rem,1.6rem + 3vw,3.75rem)/1 var(--font-display);letter-spacing:-.02em;text-decoration:none;white-space:nowrap;min-height:44px;display:flex;align-items:center}
.contact__tel:hover{color:var(--color-paper);text-decoration:underline}
.contact :focus-visible{outline-color:var(--color-focus-sombre)}
.formulaire{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-sm);align-content:start}
.formulaire label{display:flex;flex-direction:column;gap:var(--space-2xs);font-weight:700;font-size:var(--text-sm)}
.formulaire small{font-weight:400}
.formulaire input,.formulaire select,.formulaire textarea{min-height:48px;width:100%;border:2px solid transparent;border-radius:var(--radius-champ);background:var(--color-paper);padding:0 var(--space-sm);font:400 var(--text-base) var(--font-body);color:var(--color-ink)}
.formulaire input:hover,.formulaire select:hover,.formulaire textarea:hover{border-color:var(--color-rule)}
.formulaire input::placeholder{color:var(--color-muted)}
.formulaire textarea{padding-block:var(--space-xs);resize:vertical}
.formulaire .bouton{justify-self:start;background:var(--color-paper);border-color:var(--color-paper);color:var(--color-ink)}
.formulaire .bouton:hover{background:var(--color-paper-2);border-color:var(--color-paper-2);color:var(--color-ink)}
.contact__statut{margin:0;font-weight:700}
.contact__statut:empty{display:none}
.contact__statut.est-erreur{color:var(--color-on-accent);padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-champ);background:var(--color-alerte)}
.contact__statut.est-erreur::before{content:"Erreur : "}
@media (min-width:48rem){
  .formulaire{grid-template-columns:repeat(2,minmax(0,1fr))}
  .formulaire__large{grid-column:1 / -1}
}
@media (min-width:62rem){.contact__boite{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--space-2xl)}}

/* Pied (Ft4, colophon dense) */
.pied__boite{display:flex;flex-direction:column;gap:var(--space-md);padding-block:var(--space-xl)}
.pied__devise{display:flex;align-items:center;gap:var(--space-2xs);font:700 var(--text-lg)/1.2 var(--font-display)}
.pied__devise svg{flex:none;width:26px;height:26px;stroke:var(--color-accent);stroke-width:2}
.pied__liens{display:flex;flex-wrap:wrap;gap:0 var(--space-md)}
.pied__liens a{min-height:44px;display:flex;align-items:center;font-size:var(--text-sm);font-weight:400;white-space:nowrap}
.pied__tampon{align-self:flex-start;padding:var(--space-3xs) var(--space-xs);border:1.5px solid var(--color-ink);border-radius:999px;font-size:.8125rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}

/* Barre du bas, au téléphone seulement, une fois l'en-tête dépassé (a.js) */
.barre-bas{position:fixed;z-index:20;left:0;right:0;bottom:0;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:var(--space-2xs);padding:var(--space-2xs) var(--marge) max(var(--space-2xs),env(safe-area-inset-bottom));background:var(--color-paper);border-top:1px solid var(--color-rule-fort);box-shadow:0 -8px 20px -16px var(--color-ombre);transform:translateY(110%);transition:transform var(--dur-moyen) var(--ease-out),visibility 0s linear var(--dur-moyen)}
.barre-bas[hidden]{display:none}
html.sn-cookies-ouverte .barre-bas{transform:translateY(110%);visibility:hidden}
.barre-bas{visibility:hidden}
.barre-bas.est-visible{transform:none;visibility:visible;transition:transform var(--dur-moyen) var(--ease-out),visibility 0s}
.barre-bas .bouton{min-height:48px;padding:0 var(--space-sm)}
@media (max-width:47.99rem){.pied__boite{padding-bottom:calc(var(--space-xl) + 4.5rem)}}
@media (min-width:48rem){.barre-bas{display:none}}

/* Mouvement réduit : rien ne glisse, rien ne s'anime */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms !important;animation:none !important}
  .barre-bas{transition:none}
}

/* Promesse de l'annonce sous le titre (style du chapo, plus petit), note courte sous le bouton du prix,
   ligne des saisonniers près du prix (18/10/2026). */
.heros__promesse{font-size:var(--text-sm);line-height:1.5;color:var(--color-ink-2);max-width:34em;text-wrap:pretty}
@media (min-width:62rem){.heros__promesse{font-size:var(--text-base)}}
.prix__saisonnier{color:var(--color-ink-2);max-width:34em}
.note-bouton{margin-top:calc(var(--space-2xs) - var(--space-md));font-size:var(--text-sm);line-height:1.4;color:var(--color-muted)}