/* /accueil-charte/ — page d'accueil au style du PDF de la charte.
   S'appuie sur les tokens de vitrine.css (--accent, --jaune, --ink,
   --titres, --texte, --script…), eux-mêmes pilotés par l'admin
   « Charte graphique ». */

/* ============ hero — carrousel photos + logo blanc (page 6 charte) ============ */
/* chaque section de la page occupe (au moins) un écran : min-height en
   vh/svh — le contenu plus haut que l'écran allonge la section au lieu
   d'être coupé. L'en-tête est fixé par-dessus (fin, 60px, transparent au
   sommet) : le hero occupe tout l'écran. */
.ac-diapo{position:relative;display:flex;align-items:center;min-height:100vh;min-height:100svh;overflow:hidden;color:#fff;background:var(--accent)}
.ac-diapo__fonds{position:absolute;inset:0}
/* la transition sur transform accompagne le DÉZOOM de l'image sortante :
   quand elle perd .is-actif, son animation Ken Burns s'arrête et l'échelle
   revient en douceur, synchronisée avec le fondu (plus d'à-coup) */
.ac-diapo__fond{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.2s ease,transform 1.2s ease;will-change:transform,opacity}
/* Voile sombre du hero, REMIS à la demande du client le 01/09/2026 (il
   avait été retiré en trois temps jusqu'à la v4.37.0 — la consigne d'alors
   « ne pas en remettre » est donc levée par cette demande). Posé sur le
   conteneur des photos : il couvre les diapositives, mais le logo et le
   texte, qui viennent après dans le balisage, restent au-dessus, nets. */
.ac-diapo__fonds::after{content:"";position:absolute;inset:0;background:rgba(14,11,16,.28);pointer-events:none}
/* interrupteur de l'admin « Accueil charte » : « Masquer » retire le voile */
.ac-diapo--sans-voile .ac-diapo__fonds::after{display:none}
.ac-diapo__fond.is-actif{opacity:1}
/* PLUS AUCUN voile sombre sur les photos (retour client v4.37.0 — après
   deux allègements successifs, suppression complète) : la lisibilité du
   texte blanc repose désormais sur la SEULE ombre portée de
   .ac-diapo__copy, renforcée en conséquence — ne pas l'alléger sans
   réintroduire un voile. */
.ac-diapo__logo{position:absolute;right:6%;bottom:14%;width:clamp(180px,26vw,330px);height:auto;filter:drop-shadow(0 6px 24px rgba(0,0,0,.25))}
.ac-diapo__copy{position:relative;z-index:2;padding-top:70px;padding-bottom:90px;animation:ac-monte .9s ease both}
/* HALO DOUX (questionnaire v4.38.0) : aucune ombre décalée — trois couches
   de flou concentriques autour des lettres, invisibles en tant qu'effet
   mais qui assoient le blanc sur ciel/sable/lagon. C'est la seule défense
   de lisibilité du hero depuis la suppression du voile (v4.37.0). */
.ac-diapo__copy{text-shadow:0 0 2px rgba(0,0,0,.35),0 0 10px rgba(0,0,0,.4),0 0 30px rgba(0,0,0,.35)}
/* textes du carrousel en BLANC PUR (retour client v4.41.0 — les niveaux de
   transparence 85/90/78 % rendaient le texte terne sans le voile) */
.ac-diapo__overline{font-size:12.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:#fff}
/* titre en Amithen (script de la charte) — les glyphes absents (accents…)
   retombent sur Kaushan Script via la pile var(--script) */
.ac-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ac-diapo__copy .ac-diapo__titre{font-family:var(--script);font-weight:400;font-size:clamp(48px,6.8vw,96px);line-height:1.08;margin:14px 0 18px;color:#fff}
.ac-diapo__texte{max-width:44ch;font-size:16.5px;line-height:1.65;color:#fff}
.ac-diapo__texte2{max-width:52ch;margin-top:10px;font-size:14px;line-height:1.6;color:#fff}
/* variantes de texte du carrousel : empilées au même endroit (grid 1/1, la
   plus haute donne la hauteur — les boutons dessous ne sautent pas), fondu
   calé sur celui des photos (1,2 s) */
.ac-diapo__variantes{display:grid}
.ac-diapo__variante{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity 1.2s ease,visibility 1.2s ease}
.ac-diapo__variante.is-actif{opacity:1;visibility:visible}
@media (prefers-reduced-motion:reduce){.ac-diapo__variante{transition:none}}
/* les boutons n'héritent PAS de l'ombre du texte : ils ont leur propre fond
   (jaune plein, ou bordure blanche) et l'ombre y bavait sur le libellé */
.ac-diapo__actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.ac-diapo__actions .btn{text-shadow:none}
.ac-diapo__points{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:2;display:flex;gap:10px}
.ac-diapo__points button{appearance:none;border:0;padding:0;width:10px;height:10px;border-radius:999px;background:rgba(255,255,255,.5);cursor:pointer;transition:width .35s,background .35s}
.ac-diapo__points button.is-actif{width:26px;background:var(--jaune)}
@keyframes ac-monte{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion: no-preference){
/* Ken Burns : la photo active zoome très lentement pendant ses 3 s
   (l'animation redémarre à chaque activation de la diapositive) */
.ac-diapo__fond.is-actif{animation:ac-kenburns 9s linear both}
@keyframes ac-kenburns{from{transform:scale(1)}to{transform:scale(1.05)}}
/* point actif : il se remplit pendant les 3 s (pause avec le carrousel) */
.ac-diapo__points button{position:relative;overflow:hidden}
.ac-diapo__points button.is-actif{background:rgba(255,255,255,.45)}
.ac-diapo__points button.is-actif::after{content:"";position:absolute;inset:0;border-radius:999px;background:var(--jaune);transform-origin:left;animation:ac-point-remplit 3s linear both}
/* le remplissage du point suit exactement les zones de pause du JS :
   texte (frère précédent des points) et points eux-mêmes */
.ac-diapo__copy:hover ~ .ac-diapo__points button.is-actif::after,
.ac-diapo__points:hover button.is-actif::after{animation-play-state:paused}
@keyframes ac-point-remplit{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* indicateur de défilement : chevron qui rebondit doucement */
.ac-diapo__deroule{position:absolute;left:50%;bottom:52px;transform:translateX(-50%);z-index:2;width:30px;color:rgba(255,255,255,.85);animation:ac-deroule 2s ease-in-out infinite}
.ac-diapo__deroule svg{display:block;width:100%}
@keyframes ac-deroule{0%,100%{transform:translate(-50%,0);opacity:.85}50%{transform:translate(-50%,9px);opacity:.45}}
}
@media (prefers-reduced-motion:reduce){.ac-diapo__copy{animation:none}.ac-diapo__fond{transition:none}.ac-diapo__deroule{display:none}}


/* boutons déclinés charte (le .btn de base est turquoise/blanc) */
.btn--jaune{background:var(--jaune);border-color:var(--jaune);color:var(--ink)}
.btn--jaune:hover{background:transparent;border-color:var(--jaune);color:var(--jaune)}
.btn--blanc{background:transparent;border-color:#fff;color:#fff}
.btn--blanc:hover{background:#fff;color:var(--accent)}
.btn--encre{background:var(--ink);border-color:var(--ink);color:#fff}
.btn--encre:hover{background:transparent;color:var(--ink)}

/* ============ sections façon relaisrossar.it (v4.25.0) ============
   Style validé par questionnaire : fond blanc, couleurs neutres, beaucoup
   d'air — seules les POLICES de la charte restent (Poppins + script). Dans
   les titres, l'<em> produit par oa_accueil_charte_titre_riche() passe en
   écriture script : c'est l'accent italique du modèle. Les boutons de ces
   sections sont .btn--encre (fond sombre, texte blanc, comme le modèle). */
.ac-overline{font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-faint)}
/* titres de section en Amithen (script de la charte, comme le hero) — les
   glyphes absents (accents, ponctuation…) retombent sur Kaushan Script via
   la pile var(--script). Pas de tracking négatif ni de graisse sur une
   script : elle se déforme. L'<em> des titres riches reste sans effet ici
   (même police), il garde son sens pour les titres non script (.ac-affiche). */
.ac-titre{font-family:var(--script);font-weight:400;font-size:clamp(34px,4.6vw,58px);letter-spacing:0;line-height:1.18;color:var(--ink);margin:10px 0 22px}
.ac-titre em{font-style:normal}
/* têtes de grilles À GAUCHE comme « Tutte le offerte » (questionnaire v4.42.0) */
.ac-tete{text-align:left}
/* …sauf les sections centrées (v4.60.0) : tête au milieu, au-dessus du contenu */
.ac-tete--centre{text-align:center;max-width:680px;margin:0 auto}
.ac-lien{display:inline-block;font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--ink-faint);padding-bottom:3px;transition:border-color .25s}
.ac-lien:hover{border-color:var(--ink)}

/* ============ notre histoire — texte central entre deux photos hautes ============ */
.ac-histoire{background:#fff;padding:clamp(90px,13vh,150px) 0}
.ac-histoire__inner{display:grid;grid-template-columns:1fr 1.25fr 1fr;gap:clamp(24px,4.5vw,72px);align-items:center}
.ac-histoire__img{display:block;aspect-ratio:3/4;background-size:cover;background-position:center;border-radius:6px}
/* léger décalage vertical des deux photos : le rythme éditorial du modèle */
.ac-histoire__img--g{margin-bottom:clamp(28px,5vw,80px)}
.ac-histoire__img--d{margin-top:clamp(28px,5vw,80px)}
.ac-histoire__copy{text-align:center}
.ac-histoire__texte{font-size:16px;line-height:1.85;color:var(--ink-dim);max-width:40ch;margin:0 auto 30px}

/* conteneur des compositions photo : le modèle est quasi bord à bord —
   marges latérales fines (~30-40 px mesurés sur les captures d'un rendu
   1900 px), pas une colonne centrée très marginée (v4.45.0) */
.ac-pleine{--marge:clamp(20px,2.4vw,44px);max-width:1800px;margin:0 auto;padding:0 var(--marge)}
/* grand titre d'affiche des blocs univers */
.ac-affiche{font-family:var(--titres);font-weight:500;font-size:clamp(34px,4.8vw,72px);letter-spacing:-.02em;line-height:1.05;color:var(--ink);margin:0}

/* ============ univers — blocs éditoriaux alternés façon « Corners » ============ */
/* un bloc par Type de voyage : 2 photos d'un côté (hauteurs différentes,
   calées en bas), grand titre en haut et texte + bouton en bas de l'autre ;
   les blocs pairs s'inversent, un filet sépare les blocs comme au modèle. */
.ac-univers{background:#fff;padding-bottom:clamp(60px,8vh,100px)}
/* --gouttiere : la colonne étroite qui porte l'étiquette à gauche du titre
   (mesurée ~110 px sur les captures du modèle) ; la description s'y adosse
   pour s'aligner sur le titre. */
.ac-univer{--gouttiere:clamp(64px,6vw,110px);position:relative;display:grid;grid-template-columns:1.32fr 1fr;gap:clamp(24px,2vw,36px);align-items:stretch;padding:clamp(24px,3vh,40px) 0}
/* filet séparateur BORD À BORD entre deux blocs (capture client v4.46.0) :
   il déborde des marges du conteneur pour rejoindre les bords de l'écran.
   Posé avant chaque bloc sauf le premier — jamais sous le dernier. */
.ac-univer + .ac-univer::before{content:"";position:absolute;top:0;left:calc(-1*var(--marge));right:calc(-1*var(--marge));border-top:1px solid var(--line)}
/* les deux photos ont la MÊME taille (mesuré ~490x610 px sur les captures,
   soit un 4/5 chacune), bas alignés — pas de décalage (v4.47.0) */
.ac-univer__photos{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,1.8vw,34px);align-items:end}
.ac-univer__photo{display:block;background-size:cover;background-position:center;border-radius:6px;transition:opacity .3s ease}
.ac-univer__photo:hover{opacity:.92}
.ac-univer__photo--1,.ac-univer__photo--2{aspect-ratio:4/5}
.ac-univer__photo:only-child{grid-column:1/-1;aspect-ratio:16/10}
/* le texte n'est pas à fleur des photos : ~40 px de retrait en haut et en
   bas (mesuré sur les captures) */
.ac-univer__copy{display:flex;flex-direction:column;justify-content:space-between;gap:34px;padding:clamp(20px,3.5vh,42px) 0}
/* l'étiquette occupe une gouttière à gauche ; le titre commence après elle
   — et la description s'aligne sur le TITRE, pas sur l'étiquette (mesuré :
   étiquette x=50, titre x=160, description x=165) */
.ac-univer__tete{display:grid;grid-template-columns:var(--gouttiere) 1fr;align-items:baseline}
.ac-univer__bas{padding-left:var(--gouttiere)}
.ac-univer__bas p{font-size:15px;line-height:1.75;color:var(--ink-dim);max-width:46ch;margin:0}
/* ALTERNANCE (v4.46.0, comme le modèle) : un bloc sur deux inverse les
   colonnes — photos à droite, texte à gauche. Les LARGEURS s'échangent avec
   l'ordre (v4.48.0) : sans cela les photos tombaient dans la colonne étroite
   un bloc sur deux et rétrécissaient. */
.ac-univer:nth-child(even){grid-template-columns:1fr 1.32fr}
.ac-univer:nth-child(even) .ac-univer__photos{order:2}

/* ============ nos voyages — cartes façon blog du modèle (v4.43.0) ============
   Capture client : panneau très clair, photo carrée INSÉRÉE dans la carte,
   pastille arrondie posée sur l'image (haut droite), ligne nature en
   écriture script + durée à droite (la « date » du modèle), grand titre,
   prix dessous. 4 colonnes larges ; le lien « Tout le catalogue » souligné
   vit en haut à droite de la tête de section. */
.ac-offres{background:#fff;padding-bottom:clamp(90px,13vh,150px)}
.ac-offres__tete{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.ac-offres__tete .ac-titre{margin-bottom:0}
.ac-offres__nav{display:flex;align-items:center;gap:16px;margin-bottom:12px}
.ac-offres__nav .ac-lien{white-space:nowrap}
/* PISTE DÉFILANTE (v4.44.0) : le composant partagé .ac-carrousel/.ac-grille
   apporte le défilement natif, l'aimantation et le câblage des flèches
   (oa-effets.js) ; on ne redéfinit ici que la mesure des cartes — 4 par
   écran, les suivantes se rejoignent à la flèche ou au doigt. */
/* L'ombre des cartes au survol (0 16px 34px, soit ~50 px sous la carte)
   vivait hors de la piste, qui la ROGNAIT : .ac-grille masque ce qui
   dépasse pour pouvoir défiler. On lui laisse donc la place en marge
   INTERNE — 56 px en bas, 20 px sur les côtés — et on annule ce surplus par
   une marge négative de même valeur, pour que rien ne bouge à l'écran
   (v4.56.0). Le retrait latéral de 20 px reste dans la marge du conteneur
   (--marge ≥ 20 px) : aucun débordement de page possible. */
.ac-offres .ac-carrousel{margin:0 -20px -30px}
.ac-offres .ac-grille{--bord:20px;--ecart:clamp(16px,2vw,32px);--carte:calc((100% - 3*var(--ecart))/4);gap:var(--ecart);justify-content:flex-start;padding:clamp(30px,5vh,56px) var(--bord) 56px}
.ac-offre{flex:0 0 var(--carte);scroll-snap-align:start;display:flex;flex-direction:column;background:#faf9f7;border-radius:6px;padding:14px 14px 28px;color:var(--ink);transition:transform .3s ease,box-shadow .3s ease}
.ac-offre:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(35,31,32,.12)}
.ac-offre__photo{position:relative;display:block;aspect-ratio:1/1;background:var(--panel-2) center/cover no-repeat;border-radius:4px;overflow:hidden}
.ac-offre__promo{position:absolute;top:10px;right:10px;background:rgba(255,255,255,.92);border:1px solid var(--line);color:var(--ink);font-size:11px;font-weight:600;letter-spacing:.04em;padding:5px 11px;border-radius:999px}
.ac-offre__ligne{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:16px}
.ac-offre__ligne i{font-style:normal;font-family:var(--script);font-size:17px;line-height:1.2;color:var(--ink)}
.ac-offre__duree{font-size:12.5px;color:var(--ink-dim);white-space:nowrap}
.ac-offre b{display:block;font-family:var(--titres);font-weight:500;font-size:clamp(19px,1.5vw,22px);line-height:1.32;margin-top:8px}
/* description propre à l'accueil, saisie dans « Accueil charte » (v4.69.0) */
.ac-offre__desc{display:block;margin-top:8px;font-size:13.5px;line-height:1.6;color:var(--ink-dim)}
.ac-offre__metas{display:block;margin-top:10px;font-size:13.5px;color:var(--ink-dim)}
.ac-offre__metas s{color:var(--ink-faint)}
/* flèches de la capture : simples traits, dans la tête de section — pas les
   ronds blancs latéraux du composant partagé. En butée elles s'estompent
   sur place (pas de disparition : la tête ne doit pas sauter). */
.ac-offres .ac-carrousel__fleche{position:static;transform:none;display:inline-flex;width:26px;height:26px;border:0;border-radius:0;background:none;box-shadow:none;color:var(--ink);transition:opacity .3s ease,color .2s ease}
.ac-offres .ac-carrousel__fleche:hover{background:none;color:var(--ink-dim)}
.ac-offres .ac-carrousel__fleche svg{width:20px;height:20px}
.ac-offres .ac-carrousel__fleche.is-cachee{visibility:visible;opacity:.22;pointer-events:none}

/* ============ véhicules — la flotte, 3 colonnes photo ============
   Questionnaire v4.65.0 : trois cartes photo côte à côte (le parc en compte
   trois), nom et capacité sous l'image. Pas de lien : le référentiel
   Transport est interne, aucune fiche publique n'existe. */
.ac-flotte{background:#fff;padding-bottom:clamp(70px,10vh,120px)}
.ac-flotte__grille{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,44px);max-width:1240px;margin:clamp(26px,4vh,44px) auto 0}
.ac-veh{margin:0}
.ac-veh__photo{position:relative;display:block;aspect-ratio:4/3;border-radius:6px;overflow:hidden}
.ac-veh figcaption{margin-top:16px}
.ac-veh b{display:block;font-family:var(--titres);font-weight:600;font-size:17px;line-height:1.35;color:var(--ink)}
.ac-veh span{display:block;margin-top:4px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}

/* ============ pourquoi nous — photo + arguments empilés ============
   Questionnaire v4.58.0 : les quatre colonnes maigres cèdent la place à la
   grammaire des blocs « univers » — une photo portrait d'un côté, les
   arguments empilés de l'autre, chacun ouvert par son numéro et séparé par
   un filet fin. La page reste portée par l'image jusqu'au bout. */
.ac-pourquoi{background:#fff;padding-bottom:clamp(70px,10vh,120px)}
/* SANS PHOTO (retour client v4.61.0) : les quatre arguments occupent seuls
   la section, sur deux colonnes centrées sous la tête — une colonne unique
   les étirerait sur toute la largeur pour un texte de 52 caractères. */
.ac-args{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(28px,4vw,64px);max-width:1000px;margin:clamp(26px,4vh,44px) auto 0;padding:0}
.ac-arg{display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,2vw,30px);align-items:baseline;padding:20px 0;border-top:1px solid var(--line)}
.ac-arg:last-child{border-bottom:1px solid var(--line)}
.ac-arg__num{font-family:var(--script);font-size:26px;line-height:1;color:var(--ink-faint)}
.ac-arg b{display:block;font-family:var(--titres);font-weight:600;font-size:17px;line-height:1.35;color:var(--ink);margin-bottom:6px}
.ac-arg p{font-size:14.5px;line-height:1.75;color:var(--ink-dim);margin:0;max-width:52ch}

/* ============ FAQ — titre à gauche, questions dépliables à droite ============ */
.ac-faq{background:#fff;padding-bottom:clamp(90px,13vh,150px)}
.ac-faq__liste{max-width:860px;margin:clamp(26px,4vh,44px) auto 0;border-top:1px solid var(--line)}
.ac-faq__item{border-bottom:1px solid var(--line)}
.ac-faq__item summary{display:flex;align-items:baseline;justify-content:space-between;gap:20px;list-style:none;cursor:pointer;padding:18px 2px;font-family:var(--titres);font-weight:500;font-size:17px;color:var(--ink)}
.ac-faq__item summary::-webkit-details-marker{display:none}
.ac-faq__item summary i{font-style:normal;font-size:20px;font-weight:400;color:var(--ink-faint);transition:transform .25s;flex:0 0 auto}
.ac-faq__item[open] summary i{transform:rotate(45deg)}
.ac-faq__item p{padding:0 2px 20px;max-width:70ch;font-size:14.5px;line-height:1.8;color:var(--ink-dim)}
@media (prefers-reduced-motion: no-preference){
.ac-faq__item[open] p{animation:ac-faq-deplie .35s ease both}
@keyframes ac-faq-deplie{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
}

/* ============ contact — appel final centré sur fond neutre chaud ============ */
.ac-cta{background:#f7f6f3;padding:clamp(90px,13vh,150px) 0;text-align:center}
.ac-cta p{font-size:16px;line-height:1.8;color:var(--ink-dim);max-width:52ch;margin:0 auto 30px}

/* FOND UNI (retour client v4.51.0) : vitrine.css pose deux halos radiaux
   (jaune en haut à droite, turquoise en haut à gauche) sur le body de tout
   le site — la page refondue les annule, son parti est le blanc franc du
   modèle. Les autres pages du site gardent les halos. */
body.oa-accueil-charte{background:var(--paper)}

/* le footer suit directement la dernière section */
body.oa-accueil-charte .oa-footer{margin-top:0}

/* ============ responsive ============ */
@media (max-width:960px){
/* piste : 2 cartes par écran en tablette, la 3e invite à défiler */
.ac-offres .ac-grille{--carte:calc((100% - var(--ecart))/2)}
/* univers : le bloc s'empile, photos toujours au-dessus du texte */
.ac-univer,.ac-univer:nth-child(even){--gouttiere:0px;grid-template-columns:1fr;gap:28px}
.ac-univer:nth-child(even) .ac-univer__photos{order:0}
.ac-univer__tete{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
}
@media (max-width:760px){
.ac-flotte__grille{grid-template-columns:1fr}
/* --- hero --- */
/* 150px de marge basse : le texte ne peut pas toucher le logo (haut du
   logo ≈ 131px du bas — 120px laissaient 11px de chevauchement possible) */
.ac-diapo__copy{text-align:center;padding-top:54px;padding-bottom:150px}
.ac-diapo__texte{margin:0 auto}
.ac-diapo__texte2{margin-left:auto;margin-right:auto}
.ac-diapo__actions{justify-content:center}
.ac-diapo__logo{right:50%;transform:translateX(50%);bottom:64px;width:min(210px,58vw)}
/* le chevron rebondissant (52→82px du bas) chevaucherait le logo centré
   (64→131px) — masqué en mobile, le défilement y est évident de toute façon */
.ac-diapo__deroule{display:none}
/* --- sections : tout s'empile, décalages éditoriaux annulés --- */
.ac-histoire__inner{grid-template-columns:1fr;gap:28px}
.ac-histoire__img--g,.ac-histoire__img--d{margin:0;aspect-ratio:4/3}
/* piste : une carte pleine + un bout de la suivante en mobile */
.ac-offres .ac-grille{--carte:min(78vw,320px)}
}


/* ============================================================
   MOUVEMENT (v4.62.0)
   ============================================================
   Concept : « l'image s'ouvre, puis le paysage continue derrière le
   cadre. » Une seule grammaire pour toute la page — chaque photo est
   dévoilée par un rideau (mécanique .oa-rideau de vitrine.css, réutilisée
   telle quelle), puis dérive plus lentement que son cadre au défilement.
   Le texte arrive APRÈS l'image, jamais avant : c'est la direction
   « les images d'abord » (v4.25.0) rendue au mouvement.

   Avant, les six sections partageaient EXACTEMENT la même apparition
   (opacity + y:42) : ce n'était pas un manque d'animation, c'était une
   seule animation répétée six fois. D'où une grammaire par section.

   Tout ce qui suit est inerte sans JS (cadres = simples photos) et
   entièrement neutralisé en prefers-reduced-motion.
   ============================================================ */

/* --- cadres photo : l'image vit DANS le cadre et peut s'y déplacer ---
   Le gabarit enveloppe chaque photo : le cadre porte la mise en page
   (aspect-ratio, placement en grille, arrondi) et masque ce qui dépasse ;
   l'enfant porte l'image et reçoit la parallaxe. Sans JS l'enfant remplit
   exactement le cadre — rien ne change à l'écran. */
.ac-cadre{position:relative;overflow:hidden}
/* sens du rideau : .oa-rideau découvre depuis la droite (vitrine.css) ;
   dans les blocs univers inversés il vient du bord opposé — l'œil zigzague
   au lieu de descendre tout droit */
.oa-rideau--gauche::after{transform-origin:left}
.ac-cadre__ph{position:absolute;inset:0;background-size:cover;background-position:center;backface-visibility:hidden}

/* zoom lent façon carrousel (le Ken Burns du hero, en boucle aller-retour).
   Il vit sur sa PROPRE couche, à l'intérieur de .ac-cadre__ph : celui-ci
   porte déjà la dérive au défilement et le zoom au survol, dont GSAP écrit
   le transform EN LIGNE — une animation CSS sur la même propriété prendrait
   le dessus et les effacerait ; il est en outre neutralisé sous 861 px,
   alors que ce zoom-ci doit jouer aussi sur mobile. Les cartes voyage n'en
   ont pas : elles gardent le style d'origine voulu par le client. */
.ac-kb{position:absolute;inset:0;background-size:cover;background-position:center;backface-visibility:hidden;animation:ac-kb 16s ease-in-out infinite alternate;will-change:transform}
@keyframes ac-kb{from{transform:scale(1)}to{transform:scale(1.06)}}

/* cartes voyage : la photo zoome DANS son cadre au survol, le cadre ne
   bouge pas (ces photos-là ne sont jamais parallaxées, la transition CSS
   ne peut donc pas entrer en conflit avec GSAP) */
.ac-offre .ac-cadre__ph{transition:transform .65s cubic-bezier(.22,.61,.36,1)}
.ac-offre:hover .ac-cadre__ph{transform:scale(1.06)}

/* --- révélation des titres ---
   Deux registres, et c'est délibéré : les titres en écriture SCRIPT
   (Amithen/Kaushan) sont découpés par MOT sans masque — un overflow:hidden
   rognerait les déliés et les hampes de la script. Seul .ac-affiche
   (Poppins, blocs univers) reçoit la révélation sous masque. Jamais de
   découpe lettre à lettre sur une script : elle est liée. */
.ac-mot{display:inline-block;will-change:transform}
.ac-masque{display:inline-block;overflow:hidden;vertical-align:bottom;padding:.06em .04em .12em;margin:-.06em -.04em -.12em}
.ac-masque__i{display:inline-block}

/* filet qui se trace sous chaque argument de « Pourquoi » (les NUMÉROS ne
   sont pas touchés : le « pop des numéros » a été retiré en v4.25.0) */
.ac-arg{position:relative}
.ac-arg__filet{position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left;pointer-events:none}

/* --- appel final : le bouton se remplit par la gauche --- */
.ac-cta .btn--encre{background-image:linear-gradient(var(--jaune),var(--jaune));background-repeat:no-repeat;background-position:left center;background-size:0 100%;transition:background-size .5s cubic-bezier(.7,0,.25,1),color .3s ease,border-color .3s ease}
.ac-cta .btn--encre:hover{background-color:var(--ink);background-size:100% 100%;border-color:var(--jaune);color:var(--ink)}

@media (prefers-reduced-motion: no-preference){
/* Ken Burns ALTERNÉ (questionnaire v4.62.0) : une diapositive sur deux
   zoome en arrière. Quatre photos qui zooment toutes dans le même sens
   finissaient par se ressembler ; le fondu croisé, lui, reste (un effet
   fort rejoué toutes les 6,5 s en boucle fatigue). */
.ac-diapo__fond--zar.is-actif{animation:ac-kenburns-r 9s linear both}
@keyframes ac-kenburns-r{from{transform:scale(1.06)}to{transform:scale(1)}}
}

/* --- FAQ : ouverture en hauteur animée ---
   Les <details> restent natifs (accessibles, fonctionnels sans JS) ; quand
   le JS prend la main il annule l'apparition sèche du CSS. */
body.ac-faq-js .ac-faq__item[open] p{animation:none}

/* --- allègement mobile ---
   Sous 861px : plus de parallaxe, plus de découpe de titres, plus de piste
   épinglée. Il ne reste que les rideaux et les apparitions simples — ce
   sont eux qui portent le sens, le reste est du raffinement de grand
   écran. Les règles ci-dessous ne font que garantir un état propre si le
   JS a posé des transformations avant un redimensionnement. */
@media (max-width:860px){
.ac-mot,.ac-masque__i{transform:none!important;opacity:1!important}
.ac-cadre__ph{transform:none!important}
}

@media (prefers-reduced-motion:reduce){
.ac-mot,.ac-masque__i{transform:none!important;opacity:1!important}
.ac-cadre__ph{transform:none!important}
.ac-kb{animation:none}
.ac-arg__filet{display:none}
.ac-cta .btn--encre{transition:none}
}