/* ══════════════════════════════════════════════════════════════════
   SANCTUAIRE — repris de 09_DEMO-scrollytelling.html.
   Toute scène fait exactement un écran, reste collée en sticky, et
   porte son image EN FOND. La suivante monte par-dessus.
   Rien n'est en colonne, rien n'est en arche latérale.
   ══════════════════════════════════════════════════════════════════ */
:root{
  --nuit:#062720; --nuit2:#041914; --malachite:#0B4135;
  --or:#C99D35; --or-clair:#E3C477; --or-vif:#F0D08A;
  --pierre:#F8F6F1; --brume:#DDEDE5; --terre:#9FB3AA;
  --tr:.9s cubic-bezier(.22,.61,.36,1);
  --font-display:"Cormorant Garamond",Georgia,serif;
  --font-body:"Lora",Georgia,serif;
  --font-arabe:"Amiri",serif;
}
*{margin:0;padding:0;box-sizing:border-box}
/* Le smooth-scroll natif est retiré : Lenis prend la main sur l'inertie
   du scroll en JS (voir scrollytelling.js). Les deux ensemble créeraient
   un double lissage qui se contrarie. */
body{background:var(--nuit2);color:var(--pierre);font-family:var(--font-body);
  font-weight:400;overflow-x:hidden;-webkit-font-smoothing:antialiased}

/* ─── la scène : un écran, épinglée par ScrollTrigger (pin:true, voir
   scrollytelling.js) — plus de position:sticky CSS ni de .spacer manuel :
   GSAP possède la fenêtre de scroll et l'ajoute lui-même au flux du
   document, ce qui évite le désaccord entre l'épinglage et les triggers
   secondaires qui a produit les scènes vides constatées en session 3. ─── */
.scene{height:100vh;display:grid;place-items:center;overflow:hidden}
.scene .bg{position:absolute;inset:0;z-index:0}
.scene .bg img{width:100%;height:100%;object-fit:cover;will-change:transform}
.scene .veil{position:absolute;inset:0;z-index:1}

/* ─── le texte : posé au centre, il arrive quand la scène s'active ─── */
/* Opacité, décalage et flou sont entièrement pilotés par GSAP (scrub, lié
   au scroll) — voir scrollytelling.js. Aucune transition CSS ici : les deux
   moteurs sur la même propriété créeraient le même décalage que sur .bg img. */
.txt{position:relative;z-index:3;text-align:center;padding:0 28px;max-width:880px;
  max-height:92vh;overflow:visible;opacity:0}

.kick{font-size:.66rem;letter-spacing:.30em;text-transform:uppercase;color:var(--or);margin-bottom:16px}
h1,h2{font-family:var(--font-display);font-weight:300;line-height:1.08;color:#fff;letter-spacing:-.015em}
h1{font-size:clamp(2.1rem,6.4vw,4.2rem)}
h2{font-size:clamp(1.5rem,3.8vw,2.35rem);margin-bottom:16px}
h1 em,h2 em{font-style:italic;color:var(--or-clair)}
h3{font-family:var(--font-display);font-weight:600;font-size:1.06rem;color:var(--or-clair);
  margin-bottom:6px;line-height:1.3}
.phrase{font-family:var(--font-display);font-style:italic;font-weight:300;
  font-size:clamp(1.4rem,4vw,2.55rem);line-height:1.36;color:#fff;
  text-shadow:0 2px 44px rgba(0,0,0,.85);max-width:26ch;margin-inline:auto}
.phrase b{font-style:normal;font-weight:400;color:var(--or-clair)}
/* SplitText (mode "words", cadence reprise de 14_DEMO) a besoin d'un
   display transformable pour animer y sur chaque mot sans casser le
   flux du texte ni les <b>/<em> dorés qu'il enveloppe. */
.word{display:inline-block}
.corps{color:var(--brume);font-size:.96rem;line-height:1.6;max-width:64ch;margin:0 auto 11px}
.corps:last-child{margin-bottom:0}
.sig{font-family:var(--font-display);font-style:italic;font-size:.9rem;color:var(--or);margin-top:14px}
.terre{color:var(--terre);font-size:.87rem;line-height:1.55;max-width:62ch;margin-inline:auto}
.arabe{font-family:var(--font-arabe);direction:rtl;color:var(--or-clair);
  font-size:clamp(1.5rem,4vw,2.2rem);margin-bottom:8px}

/* ─── entete-marque : logo LULG + nom du programme, scène « seuil »
   uniquement (session 7) — sert de repère de marque en tout premier,
   avant même le kicker/la phrase d'accroche. ─── */
.entete-marque{display:flex;flex-direction:column;align-items:center;gap:12px;
  margin-bottom:26px}
@media(min-width:600px){.entete-marque{flex-direction:row;gap:16px}}
.logo-lulg{width:clamp(42px,9vw,68px);height:auto;flex:0 0 auto;
  filter:drop-shadow(0 4px 18px rgba(0,0,0,.55))}
.nom-programme{font-family:var(--font-display);font-weight:500;
  font-size:clamp(1.35rem,3.6vw,2.05rem);color:var(--pierre);letter-spacing:.005em;
  text-shadow:0 2px 30px rgba(0,0,0,.8)}
.nom-programme em{font-style:italic;color:var(--or-clair)}

/* ─── mini-seuil : phrase des 8 places, scène « seuil » (session 7) ─── */
.mini-seuil{color:var(--brume);font-size:.88rem;line-height:1.55;margin-top:20px;
  max-width:46ch;margin-inline:auto}
.lueur{color:var(--or-vif);font-weight:600;
  text-shadow:0 0 14px rgba(240,208,138,.85),0 0 30px rgba(201,157,53,.5)}

/* ─── blocs compacts : tout doit tenir dans un écran ─── */
.faits{display:grid;gap:1px;background:rgba(201,157,53,.26);border:1px solid rgba(201,157,53,.26);
  border-radius:1rem;overflow:hidden;margin:4px 0 14px}
@media(min-width:600px){.faits{grid-template-columns:repeat(4,1fr)}}
.fait{background:rgba(6,39,32,.82);padding:14px 14px}
.fait .n{font-family:var(--font-display);font-size:1.3rem;color:var(--or-clair);display:block;margin-bottom:2px}
.fait .l{font-size:.74rem;color:var(--terre);line-height:1.4}

.cartes{display:grid;gap:9px;grid-template-columns:1fr;text-align:left;margin-top:4px}
@media(min-width:700px){.cartes{grid-template-columns:repeat(3,1fr)}}
.carte{background:rgba(255,255,255,.045);border:1px solid rgba(201,157,53,.24);
  border-radius:.85rem;padding:13px 16px}
.carte h3{font-size:.93rem;margin-bottom:3px}
.carte p{font-size:.8rem;color:var(--terre);line-height:1.45;margin:0}

ul.clean{list-style:none;max-width:62ch;text-align:left;margin:4px auto 0}
ul.clean li{position:relative;padding-left:24px;margin-bottom:9px}
ul.clean li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;
  background:var(--or);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
ul.clean strong{display:block;color:var(--or-clair);font-weight:400;font-family:var(--font-display);
  font-size:1rem;margin-bottom:1px}
ul.clean span{font-size:.84rem;color:var(--brume);line-height:1.45}

.etapes{max-width:64ch;margin:4px auto 0;text-align:left}
.etape{display:flex;gap:15px;margin-bottom:12px}
.etape .num{flex:0 0 32px;height:32px;border:1px solid var(--or);border-radius:50%;
  display:grid;place-items:center;font-family:var(--font-display);color:var(--or);font-size:.85rem}
.etape p{font-size:.83rem;color:var(--terre);line-height:1.45;margin:0}

.faq{max-width:68ch;margin:4px auto 0;text-align:left}
.faq details{border-bottom:1px solid rgba(201,157,53,.2);padding:9px 0}
.faq summary{cursor:pointer;font-family:var(--font-display);font-size:.97rem;color:#fff;
  list-style:none;display:flex;justify-content:space-between;gap:16px;line-height:1.3;
  align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--or);font-size:1.2rem;line-height:1;flex:0 0 auto}
.faq details[open] summary::after{content:"–"}
.faq details p{margin-top:7px;color:var(--brume);font-size:.84rem;line-height:1.5}

.video-wrap{width:min(84vw,680px);aspect-ratio:16/9;margin:4px auto 16px;border-radius:1rem;
  overflow:hidden;border:1px solid rgba(201,157,53,.3);box-shadow:0 30px 90px rgba(0,0,0,.6);
  background:#000}
.video-wrap video{width:100%;height:100%;object-fit:cover;display:block}

/* ─── video : kicker + lecteur 16/9 + phrase dépassaient 92vh sur cette
   scène (signalé par Nacer, y compris après un premier resserrement —
   le vrai problème sur PC est qu'une fenêtre large mais peu haute fait
   toujours plafonner le lecteur à sa largeur max, sans lien avec la
   hauteur réelle disponible). Deuxième passe, nettement plus conservatrice
   côté largeur du lecteur, pour garder de la marge même sur une fenêtre
   basse. ─── */
#video .video-wrap{width:min(46vw,360px);margin:2px auto 10px}
#video .phrase{font-size:clamp(1rem,2vw,1.5rem);line-height:1.28;max-width:32ch}

.encadre{border:1px solid rgba(201,157,53,.34);border-radius:1rem;padding:15px 20px;
  margin-top:13px;background:rgba(4,25,20,.5);text-align:left;max-width:62ch;margin-inline:auto}
.encadre p{font-size:.83rem;color:var(--terre);line-height:1.5;margin:0}
.montant{font-family:var(--font-display);font-size:clamp(1.5rem,3.6vw,2rem);
  color:var(--or-clair);margin-bottom:12px}

.btn{display:inline-block;margin-top:30px;padding:18px 44px;border-radius:2px;
  background:linear-gradient(140deg,var(--or-vif),var(--or));color:var(--nuit);
  font-family:var(--font-body);font-weight:500;font-size:.79rem;letter-spacing:.22em;
  text-transform:uppercase;text-decoration:none;box-shadow:0 8px 44px rgba(201,157,53,.22);
  transition:var(--tr)}
.btn:hover{transform:translateY(-3px);box-shadow:0 14px 60px rgba(201,157,53,.4)}

/* ─── lien-livre : CTA secondaire discret (scène « livre »), volontairement
   plus léger que .btn pour ne pas concurrencer le bouton de candidature ─── */
.lien-livre{display:inline-block;color:var(--or);font-family:var(--font-body);
  font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;
  border-bottom:1px solid rgba(201,157,53,.45);padding-bottom:3px;transition:var(--tr)}
.lien-livre:hover{color:var(--or-clair);border-color:var(--or-clair)}

/* ─── duo : scène « auteur », portrait en médaillon + texte au côté ─── */
#auteur .txt{max-width:1400px;max-height:96vh}
.duo{display:grid;grid-template-columns:1fr;gap:14px;align-items:center;justify-items:center}
@media(min-width:860px){.duo{grid-template-columns:auto 1fr;gap:52px;text-align:left}
  .duo .duo-txt{text-align:left}
  .duo .kick,.duo .sig{justify-self:start}
  .portrait-cadre{width:min(62vw,900px)}}
.duo-txt{text-align:center}
.duo-txt .corps{font-size:.88rem;line-height:1.5;margin-bottom:8px}
.duo-txt .terre{font-size:.8rem;line-height:1.4}
.duo-txt .corps,.duo-txt .terre{margin-inline:0}
@media(max-width:859px){.duo-txt .corps,.duo-txt .terre{margin-inline:auto}}
.portrait-cadre{position:relative;width:min(70vw,380px);aspect-ratio:1/1;flex:0 0 auto}
.cadre-amazigh{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
.portrait-photo{position:absolute;inset:10.5%;border-radius:50%;overflow:hidden;
  box-shadow:0 18px 50px rgba(0,0,0,.55)}
.portrait-photo img{width:100%;height:100%;object-fit:cover;object-position:center 20%;display:block}

/* ─── kintsugi : tasse agrandie (session 6, ADR-009) — texte resserré en
   conséquence pour tenir sous 92vh (même logique que les scènes denses
   traitées en ADR-003 : la scène ne doit jamais dépasser l'écran, le fond
   du texte se faisait couper par .scene{overflow:hidden}). ─── */
#kintsugi .kintsugi-seq{margin-bottom:12px}
#kintsugi .phrase{font-size:clamp(1.05rem,2.4vw,1.6rem);line-height:1.32;max-width:30ch}
#kintsugi .sig{margin-top:8px;font-size:.82rem}

/* ─── mobile : resserrement défensif (session 6) — sur petit écran, la
   somme kicker+titre+corps+blocs peut dépasser les 92vh de .txt alors que
   .scene{overflow:hidden} coupe net ce qui déborde. On ne touche à AUCUNE
   propriété pilotée par GSAP (opacity/y/filter, cf. LEARNING-002) — ici
   uniquement tailles, marges et paddings, statiques. ─── */
@media (max-width:600px){
  .txt{padding:0 18px}
  .kick{font-size:.6rem;margin-bottom:10px}
  h1{font-size:clamp(1.7rem,7.5vw,2.3rem)}
  h2{font-size:clamp(1.25rem,5.6vw,1.6rem);margin-bottom:10px}
  .phrase{font-size:clamp(1.15rem,5vw,1.5rem);line-height:1.3;margin-bottom:16px}
  .corps{font-size:.82rem;line-height:1.45;margin-bottom:7px}
  .terre{font-size:.78rem;line-height:1.42}
  .arabe{font-size:clamp(1.2rem,5.5vw,1.6rem);margin-bottom:5px}
  .faits{margin:2px 0 10px}
  .fait{padding:9px 10px}
  .fait .n{font-size:1.05rem}
  .fait .l{font-size:.66rem}
  .cartes{gap:6px;margin-top:2px}
  .carte{padding:9px 11px}
  .carte h3{font-size:.85rem}
  .carte p{font-size:.73rem}
  .etapes{margin-top:2px}
  .etape{gap:10px;margin-bottom:8px}
  .etape .num{flex-basis:26px;height:26px;font-size:.72rem}
  .etape p{font-size:.75rem}
  .faq{margin-top:2px}
  .faq details{padding:6px 0}
  .faq summary{font-size:.85rem}
  .faq details p{font-size:.75rem;margin-top:5px}
  .encadre{padding:11px 14px;margin-top:9px}
  .montant{font-size:clamp(1.25rem,5.5vw,1.6rem);margin-bottom:8px}
  .video-wrap{margin:2px auto 10px}
  .btn{margin-top:18px;padding:14px 30px;font-size:.7rem}
  .duo{gap:8px}
  .portrait-cadre{width:min(58vw,220px)}
  .duo-txt .corps,.duo-txt .terre{font-size:.78rem}
  #kintsugi .kintsugi-seq{width:min(78vw,340px)}
  #kintsugi .phrase{font-size:clamp(.95rem,4.4vw,1.2rem);max-width:26ch}
  #video .video-wrap{width:min(78vw,300px);margin:2px auto 10px}
  #video .phrase{font-size:clamp(.92rem,4.6vw,1.15rem);line-height:1.3;max-width:24ch}
  .entete-marque{gap:8px;margin-bottom:18px}
  .nom-programme{font-size:clamp(1.05rem,5.6vw,1.4rem)}
  .mini-seuil{font-size:.78rem;margin-top:14px}
}

/* ─── candidature : bouton « Candidater » (repris tel quel de l'ancien lien
   form.app) qui ouvre un assistant conversationnel — une question à la
   fois, avec reprise (session 9, demande de Nacer). Scène redevenue
   standard (100vh, épinglée comme toutes les autres scènes) : la version
   précédente affichait les 36 champs d'un coup dans une scène à hauteur
   libre (~5000px), ce qui cassait la hauteur totale du document et
   provoquait le bug signalé par Nacer — arrivée sur la dernière scène,
   la page « rebondissait » en scène 1. Cause : ScrollTrigger/Lenis
   recalculent leurs positions sur la hauteur réelle du document, et
   toute la chorégraphie suppose que chaque scène fait un seul écran.
   Voir scrollytelling.js pour le régime d'épinglage restauré côté
   candidature (fondu simple, sans pin — la scène est la dernière, rien
   ne vient après). ─── */
/* Bug trouvé en vérifiant l'image de fond demandée par Nacer (session 9,
   suite) : `.scene .bg{position:absolute;inset:0}` a besoin d'un ancêtre
   positionné pour se cadrer sur SA scène. Les onze autres scènes l'obtiennent
   de GSAP (`position:fixed` appliqué le temps de l'épinglage). `candidature`
   n'est JAMAIS épinglée (voir scrollytelling.js) : `#candidature.scene`
   n'a donc jamais eu de position CSS propre, et son `.bg`/`.veil` (position:
   absolute) remontaient jusqu'au bloc englobant initial (la fenêtre, ancrée
   en haut du DOCUMENT ENTIER) au lieu de rester cadrés sur la scène — image
   et voile de candidature rendus tout en haut de la page, invisibles une
   fois scrollé jusqu'en bas. Présent depuis la session 8 (déjà vrai avec
   08_villa-bassin.jpg, pas seulement avec la nouvelle image) — c'est très
   probablement la cause du bug de « page qui saute » signalé par Nacer :
   ce n'est pas un rebond du scroll, mais l'image/le voile de la dernière
   scène qui se dessinaient en réalité par-dessus la première. Correctif :
   ancrer `#candidature.scene` comme les autres via `position:relative`. */
#candidature.scene{position:relative}
#candidature .txt{max-width:640px}
/* Cette scène n'anime jamais son image de fond (voir scrollytelling.js —
   candidature sort tôt de la boucle, avant le gsap.set(img,{scale:...})
   partagé) : le will-change:transform hérité de la règle de base ne sert
   à rien ici, et sur certains environnements (constaté en bac à sable
   Chromium headless — rendu logiciel sans compositing GPU) une image
   avec will-change:transform mais jamais transformée peut rester rendue
   comme un calque vide (noir). Coût nul de le désactiver ici puisque
   cette image ne bouge jamais. */
#candidature .bg img{will-change:auto}
/* Le questionnaire (fond nébuleuse, sans filtre) vit maintenant sur une
   page séparée, candidature.html, avec son propre <style> — voir ce
   fichier. #candidature ici ne montre plus que l'écran de présentation
   (fond villa-bassin fixe, comme avant la session 9 suite). Ancien essai
   de fondu en place (classes .bg-apres/.cand-en-cours) retiré : rendu
   jugé mauvais par Nacer, remplacé par la redirection ci-dessus. */
.cand-intro{margin-top:8px}

.assistant{margin-top:20px;text-align:left}
.assistant[hidden]{display:none}
.assistant-barre{height:2px;background:rgba(221,237,229,.16);border-radius:2px;
  overflow:hidden;margin-bottom:10px}
.assistant-progres{height:100%;width:0%;
  background:linear-gradient(90deg,var(--or),var(--or-clair));transition:width .4s var(--tr)}
.assistant-compteur{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--or);text-align:center;margin-bottom:20px}
.assistant-questions{min-height:132px}
.q{display:none}
.q.actif{display:block;animation:q-entree .45s var(--tr)}
@keyframes q-entree{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.q-groupe{font-family:var(--font-display);font-style:italic;font-size:.82rem;
  color:var(--or-clair);margin-bottom:8px;text-align:center}
.q label{display:block;font-size:1.02rem;line-height:1.4;color:var(--pierre);
  margin-bottom:15px;text-align:center;font-family:var(--font-display)}
.q label .optionnel{display:block;font-size:.7rem;color:var(--terre);
  font-style:italic;margin-top:5px}
.q input,.q select,.q textarea{width:100%;background:rgba(255,255,255,.045);
  border:1px solid rgba(221,237,229,.22);border-radius:.5rem;padding:12px 14px;
  color:var(--pierre);font-family:var(--font-body);font-size:.92rem;line-height:1.5}
.q textarea{resize:vertical;min-height:88px}
.q input:focus,.q select:focus,.q textarea:focus{outline:none;
  border-color:var(--or);background:rgba(201,157,53,.08)}
.q select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23C99D35' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center}

/* Choix multiples (cases à cocher) — questions « compétences » et
   « décisions », session 9 suite. Ne reprend pas le style plein-largeur de
   .q input : chaque case est une ligne cliquable dans une liste, pas un
   champ de saisie. */
.q-cases{display:flex;flex-direction:column;gap:2px;text-align:left}
.q-case{display:flex;align-items:flex-start;gap:10px;padding:9px 10px;
  border-radius:.4rem;cursor:pointer;font-family:var(--font-body);
  font-size:.88rem;color:var(--brume);line-height:1.4}
.q-case:hover{background:rgba(255,255,255,.045)}
.q-case input[type="checkbox"]{appearance:none;flex:0 0 auto;width:17px;height:17px;
  margin-top:1px;border:1px solid rgba(221,237,229,.35);border-radius:.3rem;
  background:rgba(255,255,255,.04);cursor:pointer;position:relative}
.q-case input[type="checkbox"]:checked{background:var(--or);border-color:var(--or)}
.q-case input[type="checkbox"]:checked::after{content:'';position:absolute;left:5px;top:1px;
  width:5px;height:9px;border:solid var(--nuit2);border-width:0 2px 2px 0;transform:rotate(40deg)}
.q-case input[type="checkbox"]:focus-visible{outline:2px solid var(--or);outline-offset:2px}
.assistant-nav{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:24px}
.assistant-nav .btn{margin-top:0}
.btn-precedent{background:none;border:1px solid rgba(221,237,229,.3);color:var(--brume);
  padding:16px 26px;border-radius:2px;font-family:var(--font-body);font-size:.74rem;
  letter-spacing:.18em;text-transform:uppercase;cursor:pointer;transition:var(--tr)}
.btn-precedent:hover{border-color:var(--or);color:var(--or-clair)}
.btn-precedent[hidden],.btn[hidden]{display:none}
.btn[disabled]{opacity:.35;cursor:not-allowed;pointer-events:none}
.btn-envoyer{border:none;cursor:pointer;font-family:var(--font-body)}
.cand-merci .montant{font-size:clamp(1.1rem,2.6vw,1.4rem)}
@media(max-width:600px){
  .assistant{margin-top:14px}
  .assistant-questions{min-height:150px}
  .q label{font-size:.92rem}
  .q input,.q select,.q textarea{font-size:.85rem;padding:10px 12px}
  .assistant-nav{gap:9px}
  .btn-precedent{padding:12px 18px;font-size:.68rem}
}

.frise-wrap{position:relative;z-index:6;background:var(--nuit2);padding:26px 0;
  opacity:0;transform-origin:50% 50%}
.hint{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);z-index:4;
  color:var(--or);font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;
  animation:breathe 3.4s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.3;transform:translate(-50%,0)}50%{opacity:.85;transform:translate(-50%,7px)}}
.note{position:fixed;left:14px;bottom:14px;z-index:99;font-size:.6rem;color:rgba(201,157,53,.55);
  background:rgba(4,25,20,.85);padding:7px 12px;border:1px solid rgba(201,157,53,.22)}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01ms!important}}

/* ─── i18n : sélecteur langue + région (assets/js/i18n.js), demande de
   Nacer — petit pavé fixe façon .note, coin haut, ne gêne aucune scène.
   Bascule de côté en RTL via une propriété logique (inset-inline-end),
   pour ne rien devoir recalculer en JS. ─── */
.perception-i18n{position:fixed;top:14px;inset-inline-end:14px;z-index:100;
  display:flex;gap:6px;background:rgba(4,25,20,.85);border:1px solid rgba(201,157,53,.3);
  border-radius:6px;padding:6px 8px}
.perception-i18n select{background:transparent;border:none;color:var(--brume,#DDEDE5);
  font-family:var(--font-body,"Lora",Georgia,serif);font-size:.68rem;letter-spacing:.02em;
  cursor:pointer;padding:2px 4px}
.perception-i18n select:focus{outline:1px solid var(--or,#C99D35)}
.perception-i18n select option{background:#062720;color:#F8F6F1}
@media(max-width:600px){.perception-i18n{top:8px;padding:5px 7px;gap:4px}
  .perception-i18n select{font-size:.62rem}}

/* ─── RTL : page entière, sur candidature.html ET index.html (ADR-021 —
   tout le site est désormais traduit, `dir` posé sur <html> dans les deux
   cas). Bascule d'alignement pour les blocs explicitement text-align:left ;
   tout le reste (déjà centré par défaut, `.txt{text-align:center}`) n'a
   besoin d'aucune règle supplémentaire. ─── */
[dir="rtl"] .encadre,[dir="rtl"] .q-cases,[dir="rtl"] ul.clean,
[dir="rtl"] .etapes,[dir="rtl"] .faq,[dir="rtl"] .duo-txt,
[dir="rtl"] .cartes,[dir="rtl"] .assistant{text-align:right}
[dir="rtl"] ul.clean li{padding-left:0;padding-right:24px}
[dir="rtl"] ul.clean li::before{left:auto;right:0}
[dir="rtl"] .etape{flex-direction:row-reverse}
[dir="rtl"] .faq summary{flex-direction:row-reverse}
[dir="rtl"] .q-case{flex-direction:row-reverse}
/* Police arabe : posée sur l'élément qui porte dir="rtl" lui-même (soit
   <html> sur candidature.html, soit le .txt de la seule scène "prix" sur
   index.html) — hérite naturellement à tous ses descendants, sans devoir
   viser chaque classe de texte une à une. */
[dir="rtl"]{font-family:var(--font-arabe)}