/* /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}
.ac-diapo__fond.is-actif{opacity:1}
/* voile sombre GARANTI lisible (« le logo intérieur dépend de la couleur du
   fond » — page 6) : α ≥ 0,62 sur la moitié gauche (zone du texte) assure un
   contraste blanc/fond ≥ 4,5:1 (WCAG AA) quelle que soit la photo — mesuré
   sur les 4 photos de la charte (6,4 à 8,1:1) et prouvé même sur un fond
   blanc pur (5,4:1). Dégradé plus léger côté droit pour laisser vivre la
   photo. */
.ac-diapo__fonds::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,11,16,.72) 0%,rgba(14,11,16,.62) 48%,rgba(14,11,16,.32) 78%,rgba(14,11,16,.40) 100%)}
.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}
.ac-diapo__copy{text-shadow:0 1px 14px rgba(0,0,0,.35)}
.ac-diapo__overline{font-size:12.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.85)}
/* 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:rgba(255,255,255,.9)}
.ac-diapo__actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.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}
.ac-diapo:hover .ac-diapo__points 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 communes ============ */
.ac-overline{font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.ac-voyages h2{font-family:var(--titres);font-weight:800;font-size:clamp(28px,3.6vw,44px);letter-spacing:-.01em;color:var(--ink);margin:8px 0 34px}

/* ============ derniers voyages ============ */
.ac-voyages{position:relative;overflow:hidden;display:flex;align-items:center;min-height:100vh;min-height:100svh;padding:70px 0;background:var(--panel-2)}
/* halos décoratifs en pseudo-éléments animés par TRANSFORM (composés sur
   GPU) — jamais par background-position, qui repeint la section entière
   à chaque frame */
.ac-voyages::before{content:"";position:absolute;top:-120px;right:-80px;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,rgba(255,205,13,.18),transparent 70%);pointer-events:none}
.ac-voyages>.wrap{position:relative;z-index:1}
@media (prefers-reduced-motion: no-preference){
.ac-voyages::before,.ac-comment::before{animation:ac-halo-derive 18s ease-in-out infinite alternate;will-change:transform}
@keyframes ac-halo-derive{from{transform:none}to{transform:translate(-46px,34px)}}
}
.ac-voyages>.wrap{width:100%}
/* Le carrousel de voyages (.ac-carrousel/.ac-grille/.ac-voyage) est un
   composant PARTAGÉ avec la fiche voyage : ses styles vivent dans
   vitrine.css. Ici ne restent que les réglages propres à la page. */
.ac-voyages__tout{text-align:center;margin-top:34px}

/* ============ pourquoi nous — réassurance sur turquoise plein ============ */
.ac-pourquoi{display:flex;align-items:center;min-height:100vh;min-height:100svh;padding:70px 0;background:var(--accent);color:#fff}
.ac-pourquoi>.wrap{width:100%}
.ac-pourquoi .ac-overline{color:var(--jaune)}
.ac-pourquoi h2{font-family:var(--titres);font-weight:800;font-size:clamp(28px,3.6vw,44px);letter-spacing:-.01em;color:#fff;margin:8px 0 34px}
.ac-args{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.ac-arg{display:flex;flex-direction:column;gap:10px;border:1px solid rgba(255,255,255,.22);border-radius:16px;padding:22px;will-change:transform}
.ac-arg__num{font-family:var(--titres);font-weight:800;font-size:30px;color:var(--jaune);line-height:1}
.ac-arg b{font-family:var(--titres);font-weight:700;font-size:17.5px;line-height:1.3}
.ac-arg p{font-size:14px;line-height:1.6;color:rgba(255,255,255,.85)}

/* ============ comment ça se passe — 4 étapes numérotées ============ */
.ac-comment{position:relative;overflow:hidden;display:flex;align-items:center;min-height:100vh;min-height:100svh;padding:70px 0;background:#fff}
.ac-comment::before{content:"";position:absolute;bottom:-120px;left:-80px;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,rgba(255,205,13,.18),transparent 70%);pointer-events:none}
.ac-comment>.wrap{width:100%;position:relative;z-index:1}
.ac-comment h2{font-family:var(--titres);font-weight:800;font-size:clamp(28px,3.6vw,44px);letter-spacing:-.01em;color:var(--ink);margin:8px 0 34px}
.ac-etapes{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.ac-etape{display:flex;flex-direction:column;gap:10px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;box-shadow:0 8px 26px rgba(15,90,104,.08);will-change:transform}
.ac-etape__num{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--jaune);color:var(--ink);font-family:var(--titres);font-weight:800;font-size:19px}
.ac-etape b{font-family:var(--titres);font-weight:700;font-size:17.5px;line-height:1.3}
.ac-etape p{font-size:14px;line-height:1.6;color:var(--ink-dim)}

/* ============ FAQ — details natifs (accessibles, sans JS) ============ */
/* la FAQ prend la teinte JAUNE pâle : les scènes alternent les deux
   couleurs principales (voyages turquoise pâle → pourquoi turquoise →
   comment blanc → faq jaune pâle → bande jaune) */
.ac-faq{display:flex;align-items:center;min-height:100vh;min-height:100svh;padding:70px 0;background:#fff6d8}
.ac-faq>.wrap{width:100%}
.ac-faq h2{font-family:var(--titres);font-weight:800;font-size:clamp(28px,3.6vw,44px);letter-spacing:-.01em;color:var(--ink);margin:8px 0 34px}
.ac-faq__liste{display:flex;flex-direction:column;gap:12px;max-width:760px}
.ac-faq__item{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 6px 20px rgba(15,90,104,.06)}
.ac-faq__item summary{display:flex;align-items:center;justify-content:space-between;gap:16px;list-style:none;cursor:pointer;padding:16px 20px;font-family:var(--titres);font-weight:600;font-size:16px;color:var(--ink)}
.ac-faq__item summary::-webkit-details-marker{display:none}
.ac-faq__item summary i{font-style:normal;font-size:22px;font-weight:400;color:var(--accent);transition:transform .25s;flex:0 0 auto}
.ac-faq__item[open] summary i{transform:rotate(45deg)}
.ac-faq__item p{padding:0 20px 18px;font-size:14.5px;line-height:1.65;color:var(--ink-dim)}
/* ouverture animée : la réponse glisse en se dépliant */
@media (prefers-reduced-motion: no-preference){
.ac-faq__item[open] p{animation:ac-faq-deplie .38s ease both}
@keyframes ac-faq-deplie{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
}

/* ============ bande jaune — page 7 du PDF reproduite à ses cotes (page
   1121×797, recadrée verticalement) : photo portrait à 21,7 %, logo blanc à
   cheval (38 % / 42,8 % de large), et l'appel au devis dans la zone
   haut-droite indiquée par le client (x 56→95 %, au-dessus du logo). */
.ac-bande{display:flex;align-items:center;min-height:100vh;min-height:100svh;background:var(--jaune);color:var(--ink);padding:56px 0}
.ac-bande>.wrap{width:100%}
.ac-bande__visu{position:relative;width:min(1040px,94vw);margin:0 auto;aspect-ratio:1121/680}
/* le cadre reste le rectangle net de la page 7 ; le calque interne porte la
   photo et bouge en transform (parallaxe composée GPU, clippée par le cadre) */
.ac-bande__photo{position:absolute;left:21.7%;top:8.5%;width:29%;height:75.3%;overflow:hidden}
.ac-bande__photo-int{position:absolute;inset:0;background-size:cover;background-position:38% 50%;will-change:transform}
.ac-bande__logo{position:absolute;left:38%;top:56.2%;width:42.8%;height:auto}
.ac-bande__copy{position:absolute;left:55.8%;top:14.7%;width:39.2%}
.ac-bande h2{font-family:var(--titres);font-weight:800;font-size:clamp(20px,2.6vw,34px);letter-spacing:-.01em;margin-bottom:8px}
.ac-bande p{font-size:clamp(13px,1.5vw,16px);margin:0 0 16px;color:rgba(35,31,32,.8)}

/* le footer suit directement la bande jaune */
body.oa-accueil-charte .oa-footer{margin-top:0}

/* ============ responsive ============ */
@media (max-width:960px){
.ac-args,.ac-etapes{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
/* texte centré pleine largeur : voile uniforme ≥ 0,62 sur toute la photo */
.ac-diapo__fonds::after{background:linear-gradient(180deg,rgba(14,11,16,.68) 0%,rgba(14,11,16,.62) 100%)}
/* 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__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}
.ac-voyages{padding:60px 0}
.ac-args,.ac-etapes{grid-template-columns:1fr}
/* bande : en mobile la géométrie de la page ne tient plus — on empile */
.ac-bande__visu{aspect-ratio:auto;width:auto}
.ac-bande__photo{position:relative;display:block;width:min(260px,72vw);aspect-ratio:29/47;margin:0 auto}
.ac-bande__logo{position:static;display:block;width:min(220px,60vw);margin:16px auto 0}
.ac-bande__copy{position:static;width:auto;text-align:center;margin-top:26px}
.ac-bande p{margin-left:auto;margin-right:auto;max-width:46ch}
}