/* ═══════════════════════════════════════════════════════════════════════
   Professeur FOUTANGO — « Le Portail FOUTANGO »
   Palette du cahier §3. Instrument Serif (titres) + Figtree (texte).
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --ebene:#090807;        /* fond principal, hero, navigation */
  --terre:#391D16;        /* fonds secondaires, profondeur */
  --terracotta:#A34D32;   /* accent, hover, CTA principal */
  --or:#C59A58;           /* lignes, icônes, bordures — mat, jamais jaune vif */
  --or-clair:#E0BE88;     /* survol des liens or */
  --ivoire:#F3EBDD;       /* textes importants */
  --cacao:#201511;        /* cartes, pied, voiles */
  --flamme:#E8A765;       /* lumière intérieure de l’arche */

  --ivoire-doux:rgba(243,235,221,.78);
  --ivoire-pale:rgba(243,235,221,.56);
  --ligne:rgba(197,154,88,.18);
  --ligne-forte:rgba(197,154,88,.42);
  --wa:#25D366;

  /* Serif éditorial à fort contraste pour les titres (§87), sans-serif
     très lisible pour le texte courant. */
  --titre:'Instrument Serif',Georgia,'Times New Roman',serif;
  --sans:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;

  --gout:clamp(20px,5vw,72px);
  --sec-y:clamp(80px,10vw,132px);
  --r:18px;--pill:999px;
  --ease:cubic-bezier(.22,1,.36,1);
  --t-micro:.25s var(--ease);
  --bronze:var(--or);--noir:var(--ebene);
  /* trame de losanges inspirée des portes sculptées — très discrète (§27) */
  --trame:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cpath d='M28 4 52 28 28 52 4 28Z' fill='none' stroke='%23C59A58' stroke-opacity='.07' stroke-width='1'/%3E%3Cpath d='M28 18 38 28 28 38 18 28Z' fill='%23C59A58' fill-opacity='.04'/%3E%3C/svg%3E");
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:86px}
body{font-family:var(--sans);font-size:1.0625rem;line-height:1.7;background:var(--ebene);color:var(--ivoire);
  overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
ul,ol{list-style:none}
h1,h2,h3,h4{font-family:var(--titre);font-weight:400;line-height:1.06;letter-spacing:-.012em;text-wrap:balance}
p{text-wrap:pretty}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--or-clair);outline-offset:3px;border-radius:6px}
::selection{background:rgba(197,154,88,.4);color:var(--ivoire)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:2100;background:var(--or);color:var(--ebene);
  padding:10px 16px;border-radius:var(--pill);font-weight:700;font-size:.875rem}
.skip:focus{top:12px}
.wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 var(--gout)}
.ico{width:18px;height:18px;flex-shrink:0}
.ico--fleche{width:18px;height:11px;transition:transform var(--t-micro)}

/* ── Progression de lecture (cahier §44) ────────────────────────────── */
.progres{position:fixed;top:0;left:0;right:0;height:2px;z-index:1600;background:transparent;pointer-events:none}
.progres i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--terracotta),var(--or));
  transform-origin:left;transition:width .12s linear}

/* ── Typographie ─────────────────────────────────────────────────────── */
.surtitre{display:inline-flex;align-items:center;gap:10px;font-size:.75rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--or)}
.surtitre::before{content:'';width:8px;height:8px;background:var(--terracotta);transform:rotate(45deg);flex-shrink:0}
.tete{margin-bottom:clamp(36px,5vw,60px)}
.tete .surtitre{margin-bottom:16px}
.tete__h2{font-size:clamp(2.625rem,1.5rem + 3.8vw,4.25rem)}
.tete__intro{margin-top:18px;font-size:1.125rem;color:var(--ivoire-doux);max-width:54ch}
.tete--centre{text-align:center}
.tete--centre .surtitre::before{display:none}
.tete--centre .tete__intro{margin-left:auto;margin-right:auto}
.corps{color:var(--ivoire-doux);font-size:1.125rem;line-height:1.8;margin-bottom:16px;max-width:56ch}
@keyframes battement{0%,100%{transform:scale(1)}50%{transform:scale(1.3)}}

/* ── Boutons (cahier §59) ────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;
  padding:13px 26px;border-radius:var(--pill);font-size:.9375rem;font-weight:700;letter-spacing:.02em;
  line-height:1.2;text-align:center;border:1px solid transparent;position:relative;overflow:hidden;isolation:isolate;
  transition:background var(--t-micro),color var(--t-micro),border-color var(--t-micro),transform var(--t-micro),box-shadow var(--t-micro)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn .ico--fleche{transition:transform var(--t-micro)}
.btn:hover .ico--fleche{transform:translateX(4px)}
.btn--sm{min-height:42px;padding:9px 18px;font-size:.8125rem}
.btn--lg{min-height:56px;padding:15px 30px;font-size:1rem}
.btn--bloc{width:100%}
/* Principal : terracotta, texte ivoire — 4,9:1, conforme AA */
.btn--terre{background:var(--terracotta);color:var(--ivoire);box-shadow:0 10px 28px rgba(163,77,50,.32)}
.btn--terre:hover{background:#B85739;box-shadow:0 16px 38px rgba(163,77,50,.45)}
/* Secondaire : laiton mat avec un reflet qui passe lentement */
.btn--laiton{background:linear-gradient(135deg,#DDBA7E 0%,var(--or) 48%,#9E7536 100%);color:#1A0F06;
  box-shadow:0 8px 24px rgba(197,154,88,.24),inset 0 1px 0 rgba(255,255,255,.35)}
.btn--laiton::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.5) 50%,transparent 65%);
  transform:translateX(-120%);animation:reflet 5s ease-in-out 2.5s infinite}
@keyframes reflet{0%,64%{transform:translateX(-120%)}84%,100%{transform:translateX(120%)}}
.btn--verre{background:rgba(243,235,221,.07);border-color:rgba(243,235,221,.4);color:var(--ivoire);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.btn--verre:hover{background:rgba(243,235,221,.14);border-color:var(--ivoire)}
.btn--contour{border-color:var(--ligne-forte);color:var(--ivoire)}
.btn--contour:hover{border-color:var(--or);color:var(--or-clair);background:rgba(197,154,88,.08)}
.btn--wa{background:var(--wa);color:#04210F}
.btn--wa:hover{background:#2EE273}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

/* ── Révélations ─────────────────────────────────────────────────────── */
.rev{transition:opacity .85s var(--ease),transform .85s var(--ease)}
.anim .rev:not(.est-vu){opacity:0;transform:translateY(28px)}
.deplis .rev:nth-child(2){transition-delay:.07s}
.deplis .rev:nth-child(3){transition-delay:.14s}
.deplis .rev:nth-child(4){transition-delay:.21s}
.deplis .rev:nth-child(5){transition-delay:.28s}

/* ── En-tête (cahier §11) ────────────────────────────────────────────── */
.entete{position:fixed;top:0;left:0;right:0;z-index:1000;display:flex;align-items:center;
  justify-content:space-between;gap:20px;padding:calc(18px + env(safe-area-inset-top)) var(--gout) 18px;
  transition:background .4s var(--ease),padding .4s var(--ease),box-shadow .4s}
.entete.est-fixe{background:rgba(9,8,7,.86);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  box-shadow:0 1px 0 var(--ligne);padding-top:calc(11px + env(safe-area-inset-top));padding-bottom:11px}
.logo{display:inline-flex;align-items:center;gap:12px;color:var(--or);flex-shrink:0}
.logo__mark{width:26px;height:34px;filter:drop-shadow(0 0 6px rgba(197,154,88,.4))}
.logo__mark path:first-child{stroke-dasharray:110;animation:trace 2.4s var(--ease) both}
.logo__mark path:nth-child(2){animation:lueurLogo 4s ease-in-out infinite}
@keyframes trace{from{stroke-dashoffset:110}}
@keyframes lueurLogo{0%,100%{opacity:.75}50%{opacity:1}}
.logo__txt{display:flex;flex-direction:column;line-height:1}
.logo__sur{font-size:.5625rem;font-weight:700;letter-spacing:.34em;text-transform:uppercase;color:var(--ivoire-pale);margin-bottom:5px}
.logo__nom{font-family:var(--titre);font-size:1.3125rem;letter-spacing:.17em;color:var(--ivoire)}
.logo__nom em{font-style:normal;color:var(--or)}
.entete__nav{position:absolute;left:50%;transform:translateX(-50%);display:none}
.entete__nav ul{display:flex;gap:clamp(16px,2vw,30px)}
.entete__nav a{font-size:.875rem;font-weight:600;color:var(--ivoire-doux);padding:8px 0;position:relative;transition:color var(--t-micro)}
.entete__nav a::after{content:'';position:absolute;left:50%;bottom:0;width:6px;height:6px;background:var(--or);
  transform:translateX(-50%) rotate(45deg) scale(0);transition:transform .3s var(--ease)}
.entete__nav a:hover{color:var(--ivoire)}
.entete__nav a:hover::after{transform:translateX(-50%) rotate(45deg) scale(1)}
.entete__droite{display:flex;align-items:center;gap:10px}
.entete__cta{display:none}
.burger{width:46px;height:46px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;
  border-radius:50%;border:1px solid var(--ligne-forte);background:rgba(9,8,7,.4)}
.burger span{width:18px;height:1.6px;background:var(--ivoire);border-radius:2px}
.burger span:nth-child(2){width:12px;margin-left:6px;background:var(--or)}
.entete .pays{display:none}
.entete .pays__lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── Sélecteur pays / langue (cahier §17) ───────────────────────────── */
.pays{position:relative}
.pays__btn{display:flex;align-items:center;gap:9px;min-height:44px;padding:8px 13px;border-radius:var(--pill);
  border:1px solid var(--ligne-forte);font-size:.875rem;font-weight:600;color:var(--ivoire);
  transition:border-color var(--t-micro),background var(--t-micro)}
.pays__btn:hover{border-color:var(--or);background:rgba(197,154,88,.09)}
.pays__drapeau{font-size:1.0625rem;line-height:1}
.pays__lbl{display:flex;align-items:center;gap:7px;white-space:nowrap}
.pays__lg{padding:2px 7px;border-radius:5px;background:rgba(197,154,88,.16);color:var(--or);
  font-size:.6875rem;font-weight:800;letter-spacing:.08em}
.pays__chev{width:11px;height:7px;opacity:.65;transition:transform var(--t-micro)}
.pays__btn[aria-expanded=true] .pays__chev{transform:rotate(180deg)}

.pays__liste{position:absolute;right:0;top:calc(100% + 10px);width:290px;z-index:1100;padding:14px;
  background:rgba(26,17,13,.99);border:1px solid var(--ligne-forte);border-radius:16px;
  box-shadow:0 28px 60px rgba(0,0,0,.65);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.pays--haut .pays__liste{top:auto;bottom:calc(100% + 10px);left:0;right:auto}
.pays__titre{font-size:.625rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ivoire-pale);margin-bottom:12px}
.pays__groupe + .pays__groupe{margin-top:6px;padding-top:12px;border-top:1px solid var(--ligne)}
.pays__pays{display:flex;align-items:baseline;gap:8px;font-family:var(--titre);font-size:1.0625rem;
  color:var(--ivoire);margin-bottom:6px}
.pays__pays em{font-family:var(--sans);font-style:normal;font-size:.6875rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--or);margin-left:auto}
.pays__liste a{display:flex;align-items:center;gap:10px;min-height:46px;padding:9px 11px;border-radius:10px;
  transition:background var(--t-micro)}
.pays__liste a:hover,.pays__liste a:focus-visible{background:rgba(197,154,88,.12)}
.pays__langue{font-size:.9375rem;font-weight:600;color:var(--ivoire)}
.pays__url{font-size:.75rem;color:var(--ivoire-pale);font-variant-numeric:tabular-nums}
.pays__coche{margin-left:auto;width:19px;height:19px;display:grid;place-items:center;border-radius:50%;
  background:var(--or);color:var(--ebene);flex-shrink:0}
.pays__coche svg{width:11px;height:11px}
.pays__liste a[aria-current=page] .pays__langue{color:var(--or-clair)}

/* ── Menu mobile ─────────────────────────────────────────────────────── */
.menu{position:fixed;inset:0;z-index:1500;background:var(--trame),radial-gradient(circle at 80% 10%,rgba(163,77,50,.26),transparent 55%),var(--ebene);
  opacity:0;transition:opacity .35s var(--ease);overflow-y:auto}
.menu.est-ouvert{opacity:1}
.menu__panneau{min-height:100%;display:flex;flex-direction:column;padding:calc(18px + env(safe-area-inset-top)) 20px calc(24px + env(safe-area-inset-bottom))}
.menu__haut{display:flex;align-items:center;justify-content:space-between}
.menu__fermer{width:46px;height:46px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--ligne-forte)}
.menu__fermer svg{width:18px;height:18px}
.menu__nav{flex:1;display:flex;align-items:center;padding:32px 0}
.menu__nav ul{display:flex;flex-direction:column;gap:4px;width:100%}
.menu__nav a{display:flex;align-items:baseline;gap:16px;padding:8px 0;font-family:var(--titre);font-size:1.875rem}
.menu__nav a:hover{color:var(--or-clair)}
.menu__num{font-family:var(--sans);font-size:.75rem;font-weight:700;letter-spacing:.12em;color:var(--terracotta)}
.anim .menu__nav li{opacity:0;transform:translateX(-18px);transition:opacity .45s var(--ease),transform .45s var(--ease);transition-delay:calc(var(--i) * 50ms + 80ms)}
.anim .menu.est-ouvert .menu__nav li{opacity:1;transform:none}
.menu__bas{display:flex;flex-direction:column;gap:10px}
.menu__bas .btn{width:100%}
.menu__bas .pays{margin-top:6px}

/* ── Hero (cahier §6) ────────────────────────────────────────────────── */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;
  padding:120px var(--gout) clamp(52px,8vh,96px);isolation:isolate;perspective:1200px}
.hero__fond{position:absolute;inset:-4% 0 0;z-index:-4}
.hero__media,.hero__media img{width:100%;height:100%}
.hero__media img{object-fit:cover;object-position:52% 58%;opacity:.5;animation:respire 26s ease-in-out infinite alternate}
@keyframes respire{from{transform:scale(1.05)}to{transform:scale(1.14) translate(-1.2%,-.8%)}}
.hero__voile{position:absolute;inset:0;z-index:-3;
  background:linear-gradient(180deg,rgba(9,8,7,.78) 0%,rgba(9,8,7,.5) 30%,rgba(9,8,7,.72) 64%,rgba(9,8,7,.98) 100%),
             linear-gradient(90deg,rgba(9,8,7,.92) 0%,rgba(9,8,7,.55) 48%,rgba(9,8,7,.1) 78%)}

/* ── L’arche (cahier §5 à §8) ───────────────────────────────────────────
   Aucune bibliothèque 3D : des couches CSS décalées par --mx/--my, avec une
   ouverture dessinée au border-radius. Le texte s’affiche avant elle. */
.arche{position:absolute;z-index:-2;right:4%;bottom:0;width:min(44vw,480px);aspect-ratio:1/1.32;
  transform-style:preserve-3d;pointer-events:none;--mx:0;--my:0;--entre:0;
  transform:scale(calc(1 + var(--entre) * .28));transition:transform .25s linear}
.arche__halo,.arche__corps,.arche__poussiere{position:absolute;inset:0;
  transform:translate3d(calc(var(--mx) * var(--k,1) * 1px),calc(var(--my) * var(--k,1) * 1px),0);
  transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.arche__halo{--k:3;inset:-28% -24%;border-radius:50%;
  background:radial-gradient(circle,rgba(232,167,101,.3),rgba(163,77,50,.12) 40%,transparent 68%);
  animation:flamme 4.2s ease-in-out infinite}
@keyframes flamme{0%,100%{opacity:.78;transform:scale(1)}26%{opacity:.98;transform:scale(1.04)}48%{opacity:.72}70%{opacity:1;transform:scale(1.06)}86%{opacity:.84}}
.arche__poussiere{--k:6;overflow:hidden}
.arche__poussiere i{position:absolute;bottom:-10px;left:var(--x);width:var(--s);height:var(--s);border-radius:50%;
  background:var(--flamme);box-shadow:0 0 8px 2px rgba(232,167,101,.5);opacity:0;
  animation:monte var(--t) linear var(--r) infinite}
@keyframes monte{0%{transform:translate(0,0);opacity:0}14%{opacity:.85}72%{opacity:.45}100%{transform:translate(var(--dx),-72vh);opacity:0}}
.arche__corps{--k:9;
  transform:translate3d(calc(var(--mx) * 9px),calc(var(--my) * 9px),0)
            rotateY(calc(var(--mx) * 2.6deg)) rotateX(calc(var(--my) * -2deg))}
.arche__ouverture{position:absolute;inset:0;overflow:hidden;
  border-radius:50% 50% 10px 10px / 38% 38% 0 0;
  box-shadow:0 40px 90px rgba(0,0,0,.65),inset 0 0 60px rgba(9,8,7,.5)}
.arche__photo,.arche__photo img{width:100%;height:100%}
.arche__photo img{object-fit:cover;object-position:62% 50%;transform:scale(1.06)}
/* la lumière chaude vient de l’intérieur */
.arche__lumiere{position:absolute;inset:0;
  background:radial-gradient(ellipse 70% 55% at 50% 72%,rgba(232,167,101,.5),rgba(163,77,50,.22) 42%,transparent 72%);
  mix-blend-mode:screen;animation:flamme 4.2s ease-in-out infinite}
.arche__seuil{position:absolute;left:0;right:0;bottom:0;height:34%;
  background:linear-gradient(0deg,var(--ebene) 6%,rgba(9,8,7,.55) 48%,transparent)}
.arche__cadre{position:absolute;inset:-9px;border-radius:50% 50% 14px 14px / 38% 38% 0 0;
  border:1px solid rgba(197,154,88,.42);box-shadow:0 0 36px rgba(197,154,88,.14)}
.arche__cadre::after{content:'';position:absolute;inset:7px;border-radius:inherit;border:1px solid rgba(197,154,88,.16)}
/* ouverture plus franche dans la scène finale (§35) */
.arche--ouverte .arche__lumiere{background:radial-gradient(ellipse 78% 62% at 50% 70%,rgba(232,167,101,.72),rgba(163,77,50,.3) 44%,transparent 74%)}
.arche--ouverte .arche__halo{background:radial-gradient(circle,rgba(232,167,101,.42),rgba(163,77,50,.16) 42%,transparent 70%)}
/* entrée au chargement : opacité seule, pour ne pas écraser l’échelle du défilement */
.anim .arche{opacity:0}
.anim.est-prete .arche{opacity:1;transition:opacity 1.5s var(--ease) .2s,transform .25s linear}

.hero__contenu{position:relative;width:100%;max-width:640px}
.hero .surtitre{margin-bottom:20px}
.hero__h1{font-size:clamp(2.75rem,1.2rem + 6.2vw,6.25rem);line-height:1.05;margin-bottom:22px}
.hero__h1 .ligne{display:block}
.mot{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.1em;margin-bottom:-.1em}
.mot>span{display:inline-block}
.mot--lueur>span{background:linear-gradient(100deg,var(--or) 18%,#F5DCAE 38%,var(--or) 56%,var(--terracotta) 88%);
  background-size:260% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:dore 7s linear infinite;text-shadow:0 0 34px rgba(197,154,88,.18)}
@keyframes dore{from{background-position:100% 0}to{background-position:-160% 0}}
.anim .mot>span{transform:translateY(105%)}
.anim.est-prete .mot>span{transform:none;transition:transform 1s var(--ease) calc(.3s + var(--i) * .085s)}
.hero__p{font-size:clamp(1.0625rem,1rem + .35vw,1.1875rem);color:var(--ivoire-doux);max-width:46ch;margin-bottom:30px}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px}
.anim .hero__anim{opacity:0;transform:translateY(20px)}
.anim.est-prete .hero__anim{opacity:1;transform:none;transition:opacity .9s var(--ease) var(--d),transform .9s var(--ease) var(--d)}

/* Quatre repères sous les boutons (cahier §9) */
.reperes{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:26px}
.reperes li{display:flex;align-items:center;gap:8px;font-size:.875rem;font-weight:600;color:var(--ivoire-doux)}
.reperes .ico{width:16px;height:16px;color:var(--or)}

.defiler{position:absolute;right:var(--gout);bottom:36px;display:none;flex-direction:column;align-items:center;gap:10px;
  font-size:.6875rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ivoire-pale);z-index:2}
.defiler span{writing-mode:vertical-lr}
.defiler i{width:1px;height:46px;background:linear-gradient(to bottom,transparent,var(--or));animation:ligne 2s ease-in-out infinite}
.defiler:hover{color:var(--or)}
@keyframes ligne{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}
  51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ── Bande de confiance (cahier §61) ────────────────────────────────── */
.bande{background:linear-gradient(90deg,var(--terre),#4A261C 50%,var(--terre));border-top:1px solid var(--ligne-forte);
  border-bottom:1px solid var(--ligne-forte);overflow:hidden;padding:16px 0;position:relative}
.bande::before{content:'';position:absolute;inset:0;background:var(--trame);opacity:.9;pointer-events:none}
.bande__piste{display:flex;width:max-content;animation:defile 44s linear infinite}
.bande:hover .bande__piste{animation-play-state:paused}
.bande__ligne{display:flex;align-items:center;gap:26px;padding-right:26px;white-space:nowrap;
  font-family:var(--titre);font-size:clamp(1rem,.9rem + .5vw,1.3rem);letter-spacing:.06em;color:var(--ivoire)}
.bande__ligne i{font-style:normal;font-size:.7em;color:var(--or)}
@keyframes defile{to{transform:translateX(-50%)}}
/* ── Sections ────────────────────────────────────────────────────────── */
/* ── Widget « Votre situation » (cahier §15 et §16) ─────────────────── */
/* ── CTA rapide (cahier §60.05) ─────────────────────────────────────── */

/* ── Cadres photo : arche reprise en petit (cahier §58) ─────────────── */
.cadre{position:relative;overflow:hidden;aspect-ratio:4/5;background:var(--terre);isolation:isolate;
  border-radius:var(--r);box-shadow:0 30px 70px rgba(0,0,0,.55)}
.cadre--arc{border-radius:50% 50% var(--r) var(--r) / 30% 30% 0 0}
.cadre::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(0deg,rgba(9,8,7,.68),transparent 44%),linear-gradient(135deg,rgba(232,167,101,.14),transparent 52%)}
.cadre::after{content:'';position:absolute;inset:10px;z-index:2;border-radius:inherit;border:1px solid rgba(197,154,88,.34);pointer-events:none}
.cadre__media,.cadre__media img{width:100%;height:100%}
.cadre__media img{object-fit:cover;transition:transform 1.6s var(--ease)}
.cadre:hover .cadre__media img{transform:scale(1.05)}
.cadre.rev{transition:clip-path 1.5s var(--ease)}
.anim .cadre.rev:not(.est-vu){opacity:1;transform:none;clip-path:inset(0 50% 0 50%)}
.cadre.rev.est-vu{clip-path:inset(0 0 0 0)}
.anim .cadre.rev:not(.est-vu) .cadre__media img{transform:scale(1.18)}
/* profondeur photographique au défilement (cahier §23) */
[data-portrait] .cadre__media img{transform:translateY(calc(var(--par,0) * -14px)) scale(1.06)}
.cadre__legende{position:absolute;left:26px;right:26px;bottom:24px;z-index:3;font-size:.8125rem;color:var(--ivoire-doux)}
.cadre__legende span{display:block;font-family:var(--titre);font-size:1.25rem;color:var(--ivoire);margin-bottom:2px}
.media--vide{width:100%;height:100%;background:var(--trame),radial-gradient(circle at 70% 25%,rgba(197,154,88,.24),transparent 60%),linear-gradient(160deg,var(--terre),var(--ebene))}

/* ── Dépliants ───────────────────────────────────────────────────────── */
.deplis{border-top:1px solid var(--ligne)}
.depli{border-bottom:1px solid var(--ligne)}
.depli h3,.depli h4{font-family:var(--sans);font-size:inherit;letter-spacing:0}
.depli__btn{width:100%;display:flex;align-items:center;gap:16px;min-height:66px;padding:18px 0;text-align:left;
  font-size:1.0625rem;font-weight:700;line-height:1.4;transition:color var(--t-micro),padding var(--t-micro)}
.depli__btn:hover{color:var(--or-clair);padding-left:6px}
.depli__btn[aria-expanded=true]{color:var(--or-clair)}
.depli__titre{flex:1}
.plus{width:30px;height:30px;flex-shrink:0;display:grid;place-items:center;border:1px solid var(--ligne-forte);transform:rotate(45deg);
  transition:transform .4s var(--ease),border-color .3s,background .3s,color .3s}
.plus svg{width:10px;height:10px;transform:rotate(-45deg)}
.depli__btn[aria-expanded=true] .plus{background:var(--or);border-color:var(--or);color:var(--ebene);transform:rotate(225deg)}
.depli__corps{overflow:hidden}
.depli__corps p{padding:0 46px 22px 0;font-size:1.0625rem;color:var(--ivoire-doux);line-height:1.8}
.deplis--grille{border-top:0;display:grid;gap:0 40px;align-items:start}
.deplis--grille .depli:first-child{border-top:1px solid var(--ligne)}
/* ── Section sentimentale ────────────────────────────────────────────── */

/* ── FOUTANGO ────────────────────────────────────────────────────────── */
.apropos .cadre{max-width:460px}
.ico--check{width:22px;height:22px;color:var(--or);margin-top:1px}
/* ── Pourquoi prendre contact ────────────────────────────────────────── */
/* ── Comment cela se passe : la ligne s’illumine (cahier §25) ───────── */
/* ── Cartes d’accompagnement ─────────────────────────────────────────── */
.pratiques__titre{font-size:clamp(1.625rem,1.3rem + 1.4vw,2.25rem);margin-bottom:26px;text-align:center}
.pratiques__note{text-align:center;color:var(--flamme);font-size:.875rem;margin-bottom:16px}
/* ── Témoignages : rail à inertie native (cahier §28 et §29) ────────── */
.avis__txt{flex:1;font-size:1rem;line-height:1.8;color:var(--ivoire)}
.avis__txt p::before{content:'“';display:block;font-family:var(--titre);font-size:3.25rem;line-height:.7;color:var(--terracotta);margin-bottom:6px}
.avis__auteur{display:flex;align-items:center;gap:14px;font-size:.8125rem;color:var(--ivoire-pale)}
.avis__auteur b{display:block;font-size:.9375rem;font-weight:700;color:var(--ivoire)}
.avis__init{width:46px;height:46px;display:grid;place-items:center;flex-shrink:0;border-radius:50%;
  background:linear-gradient(135deg,var(--or-clair),var(--terracotta));color:var(--ebene);font-weight:800;font-size:.875rem}
.temoins__cadre{max-width:640px;margin:0 auto;text-align:center;color:var(--ivoire-doux)}
/* ── Cabinets Belgique / Suisse (cahier §31) ────────────────────────── */
.cab__pays{font-size:.75rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--or)}
.cab__ville{font-size:2rem;margin:6px 0 4px}
.cab__adr{font-size:1.0625rem;font-weight:700;color:var(--ivoire);margin-bottom:4px}
.cab__mod{font-size:.875rem;color:var(--or);margin-bottom:20px}
.cab__act{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px}

/* ── FAQ ─────────────────────────────────────────────────────────────── */

/* ── Contact et parcours (cahier §18 et §54) ───────────────────────── */
.contact{position:relative;padding:var(--sec-y) 0;overflow:hidden;isolation:isolate;border-top:1px solid var(--ligne)}
.contact__fond{position:absolute;inset:0;z-index:-2}
.contact__media,.contact__media img{width:100%;height:100%}
.contact__media img{object-fit:cover;object-position:38% 50%}
.contact__voile{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(9,8,7,.93),rgba(9,8,7,.84) 50%,rgba(9,8,7,.96)),
             radial-gradient(circle at 14% 78%,rgba(232,167,101,.16),transparent 56%)}
.contact__grille{display:grid;gap:clamp(40px,6vw,80px);align-items:start}
.contact__grille>*, .pied__grille>*, .apropos__grille>*{min-width:0}
.coord__lien>span:last-child,.pied__liens a{overflow-wrap:anywhere;min-width:0}
.coord{display:flex;flex-direction:column;gap:10px}
.coord__lien{display:flex;align-items:center;gap:16px;padding:14px 18px;min-height:66px;border-radius:12px;
  background:rgba(32,21,17,.72);border:1px solid var(--ligne);font-size:1.0625rem;font-weight:700;
  transition:border-color var(--t-micro),background var(--t-micro),transform var(--t-micro)}
a.coord__lien:hover{border-color:var(--or);background:rgba(197,154,88,.1);transform:translateX(4px)}
.coord__ico{width:42px;height:42px;display:grid;place-items:center;flex-shrink:0;transform:rotate(45deg);
  border:1px solid var(--ligne-forte);color:var(--or)}
.coord__ico .ico{transform:rotate(-45deg)}
.coord__ico--wa{color:var(--wa);border-color:rgba(37,211,102,.4)}
.coord__lbl{display:block;font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ivoire-pale);margin-bottom:2px}
.contact__note{margin-top:22px;font-size:.875rem;color:var(--ivoire-pale)}
.contact__form{background:linear-gradient(180deg,rgba(57,29,22,.94),rgba(32,21,17,.96));border:1px solid var(--ligne-forte);
  border-radius:22px;padding:clamp(24px,3.5vw,40px);box-shadow:0 30px 70px rgba(0,0,0,.5);position:relative}
.contact__form::before{content:'';position:absolute;left:50%;top:-9px;width:16px;height:16px;background:var(--or);transform:translateX(-50%) rotate(45deg);
  box-shadow:0 0 18px rgba(232,167,101,.55)}
.form__titre{display:flex;align-items:center;gap:10px;font-family:var(--titre);font-size:1.5rem;margin-bottom:8px}
.form__titre .ico{color:var(--or);width:24px;height:24px}
.form__intro{font-size:.9375rem;color:var(--ivoire-pale);margin-bottom:22px}
/* pastilles d’avancement */
.pas{display:flex;gap:7px;margin-bottom:22px}
.pas li{height:3px;flex:1;border-radius:2px;background:var(--ligne);transition:background .35s}
.pas li.est-actif,.pas li.est-fait{background:var(--terracotta)}
fieldset{border:0;min-width:0}
.etape-q{border:0}
.etape-q legend{font-family:var(--titre);font-size:1.25rem;color:var(--ivoire);margin-bottom:16px;padding:0}
.choix{display:grid;gap:10px}
.choix--2{grid-template-columns:1fr 1fr}
.choix__item{position:relative;display:block}
.choix__item input{position:absolute;opacity:0;width:0;height:0}
.choix__item span{display:flex;align-items:center;min-height:54px;padding:12px 18px;border-radius:12px;
  border:1px solid rgba(243,235,221,.2);background:rgba(243,235,221,.05);font-size:1rem;font-weight:600;cursor:pointer;
  transition:border-color var(--t-micro),background var(--t-micro),transform var(--t-micro)}
.choix__item span:hover{border-color:var(--or);background:rgba(197,154,88,.1);transform:translateX(3px)}
.choix__item input:checked+span{border-color:var(--terracotta);background:rgba(163,77,50,.26)}
.choix__item input:focus-visible+span{outline:2px solid var(--or-clair);outline-offset:3px}
.parcours__retour{margin-top:16px;min-height:40px;font-size:.8125rem;font-weight:700;color:var(--ivoire-pale)}
.parcours__retour:hover{color:var(--or-clair)}
.champ{margin-bottom:18px}
.champ label,.champ legend{display:block;font-size:.9375rem;font-weight:700;margin-bottom:8px;padding:0}
.req{color:var(--or)}
.fac{font-weight:400;color:var(--ivoire-pale)}
.champ input,.champ textarea,.champ select{width:100%;min-height:54px;padding:14px 16px;border-radius:12px;font-size:1.0625rem;
  background:rgba(243,235,221,.06);border:1px solid rgba(243,235,221,.2);transition:border-color var(--t-micro),background var(--t-micro),box-shadow var(--t-micro)}
.champ input::placeholder{color:rgba(243,235,221,.36)}
.champ input:focus,.champ textarea:focus,.champ select:focus{outline:none;border-color:var(--or);background:rgba(243,235,221,.09);box-shadow:0 0 0 3px rgba(197,154,88,.22)}
.champ [aria-invalid=true]{border-color:#E8857A}
.aide{font-size:.8125rem;color:var(--ivoire-pale);margin-top:7px}
.err{font-size:.875rem;color:#F4A79B;margin-top:7px}
.form__err{padding:12px 14px;border-radius:10px;background:rgba(232,133,122,.12);border:1px solid rgba(232,133,122,.4);
  color:#F6C3BC;font-size:.9375rem;margin-bottom:16px}
.form__legal{font-size:.8125rem;color:var(--ivoire-pale);margin-top:14px;text-align:center}
.form__legal a{color:var(--or-clair);text-decoration:underline;text-underline-offset:2px}
.pot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.btn__spin{display:none;width:18px;height:18px;border-radius:50%;border:2px solid rgba(243,235,221,.3);border-top-color:var(--ivoire);animation:tour .8s linear infinite}
[aria-busy=true] .btn__spin{display:block}
[aria-busy=true] .btn__lbl{opacity:.7}
@keyframes tour{to{transform:rotate(360deg)}}
.succes{text-align:center;padding:24px 8px}
.coche{width:64px;height:64px;margin:0 auto 18px;stroke:var(--or);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.succes__titre{font-family:var(--titre);font-size:1.5rem;margin-bottom:8px}
.succes__txt{color:var(--ivoire-doux)}

/* ── Scène finale (cahier §35 et §70) ──────────────────────────────── */
.final{position:relative;padding:clamp(90px,14vw,170px) 0 clamp(70px,10vw,120px);overflow:hidden;isolation:isolate;
  text-align:center;background:radial-gradient(ellipse 80% 60% at 50% 100%,rgba(163,77,50,.2),transparent 60%),var(--ebene);
  border-top:1px solid var(--ligne)}
.final .arche{right:auto;left:50%;margin-left:min(-21vw,-230px);opacity:.52;z-index:-1}
.final__in{position:relative;z-index:1}
.final__in::before{content:'';position:absolute;inset:-14% -8%;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 62% 58% at 50% 46%,rgba(9,8,7,.9),rgba(9,8,7,.62) 52%,transparent 78%)}
.final__titre{font-size:clamp(2.25rem,1.4rem + 3.4vw,3.75rem);margin-bottom:16px}
.final__sous{font-size:1.125rem;color:var(--ivoire-doux);max-width:46ch;margin:0 auto 34px}
.final__act{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.signature{position:absolute;left:50%;bottom:-2vw;transform:translateX(-50%);z-index:-2;pointer-events:none;
  font-family:var(--titre);font-size:min(23vw,300px);line-height:.8;letter-spacing:.04em;white-space:nowrap;
  color:var(--ivoire);opacity:.04;transform:translateX(calc(-50% + var(--par,0) * 26px))}

/* ── Modale de rappel (cahier §20) ─────────────────────────────────── */
.modale{position:fixed;inset:0;z-index:1800;display:grid;place-items:center;padding:16px}
.modale__fond{position:absolute;inset:0;background:rgba(9,8,7,.82);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  opacity:0;transition:opacity .3s var(--ease)}
.modale.est-ouverte .modale__fond{opacity:1}
.modale__boite{position:relative;width:min(480px,100%);max-height:calc(100vh - 32px);overflow-y:auto;
  padding:clamp(24px,4vw,36px);border-radius:22px;border:1px solid var(--ligne-forte);
  background:linear-gradient(180deg,var(--terre),var(--cacao));box-shadow:0 40px 90px rgba(0,0,0,.6);
  opacity:0;transform:translateY(18px) scale(.97);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.modale.est-ouverte .modale__boite{opacity:1;transform:none}
.modale__x{position:absolute;right:14px;top:14px;width:42px;height:42px;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--ligne);color:var(--ivoire-doux)}
.modale__x:hover{border-color:var(--or);color:var(--or-clair)}
.modale__x svg{width:16px;height:16px}
.modale__titre{font-size:1.625rem;margin-bottom:8px;padding-right:44px}
.modale__intro{font-size:.9375rem;color:var(--ivoire-pale);margin-bottom:22px}

/* ── Barre mobile (§14) et bulle WhatsApp retardée (§19) ───────────── */
.barre{position:fixed;left:0;right:0;bottom:0;z-index:900;display:flex;gap:8px;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(9,8,7,.95);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--ligne-forte);
  transition:transform .4s var(--ease)}
.barre--reduite{transform:translateY(110%)}
.barre__btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:56px;
  padding:8px 6px;border-radius:12px;border:1px solid var(--ligne-forte);font-size:.75rem;font-weight:700;color:var(--ivoire)}
.barre__btn .ico{width:20px;height:20px}
.barre__btn--terre{background:var(--terracotta);border-color:var(--terracotta);color:var(--ivoire)}
.barre__btn--wa{background:var(--wa);border-color:var(--wa);color:#04210F}
.wa-flot{position:fixed;right:20px;bottom:calc(92px + env(safe-area-inset-bottom));z-index:890;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.bulle-wa{display:none;width:58px;height:58px;border-radius:50%;place-items:center;background:var(--wa);color:#fff;
  box-shadow:0 6px 22px rgba(37,211,102,.4);transition:transform var(--t-micro)}
.bulle-wa .ico{width:28px;height:28px}
.bulle-wa:hover{transform:scale(1.08)}
.wa-flot__bulle{position:relative;width:min(280px,calc(100vw - 40px));padding:16px 18px 16px;border-radius:16px;
  background:var(--cacao);border:1px solid var(--ligne-forte);box-shadow:0 20px 50px rgba(0,0,0,.55);
  font-size:.875rem;line-height:1.55;color:var(--ivoire-doux);
  opacity:0;transform:translateY(10px) scale(.96);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.wa-flot__bulle.est-vue{opacity:1;transform:none}
.wa-flot__x{position:absolute;right:8px;top:8px;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;color:var(--ivoire-pale)}
.wa-flot__x svg{width:12px;height:12px}
.wa-flot__cta{display:inline-flex;align-items:center;min-height:40px;margin-top:10px;padding:8px 16px;border-radius:var(--pill);
  background:var(--wa);color:#04210F;font-weight:700;font-size:.8125rem}
.bandeau{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(90px + env(safe-area-inset-bottom));z-index:950;
  width:min(520px,calc(100vw - 24px));display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:12px 14px 12px 18px;
  background:rgba(32,21,17,.97);border:1px solid var(--ligne-forte);border-radius:14px;box-shadow:0 20px 50px rgba(0,0,0,.55);font-size:.9375rem;font-weight:600}
.bandeau p{flex:1 1 200px}
.bandeau__act{display:flex;gap:6px;margin-left:auto}
.bandeau__ok{display:inline-flex;align-items:center;min-height:42px;padding:8px 18px;border-radius:var(--pill);background:var(--or);color:var(--ebene);font-weight:700;font-size:.875rem}
.bandeau__non{min-height:42px;padding:8px 12px;font-size:.875rem;color:var(--ivoire-pale)}
.bandeau__non:hover{color:var(--ivoire)}

/* ── Bannière de consentement (cahier §50) — discrète, jamais bloquante ── */
.cookies{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(90px + env(safe-area-inset-bottom));z-index:960;
  width:min(640px,calc(100vw - 24px));padding:16px 18px;border-radius:16px;
  background:rgba(32,21,17,.98);border:1px solid var(--ligne-forte);box-shadow:0 20px 50px rgba(0,0,0,.6);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.cookies__txt{font-size:.875rem;line-height:1.6;color:var(--ivoire-doux)}
.cookies__act{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px}
.cookies__perso{min-height:42px;padding:8px 12px;font-size:.8125rem;font-weight:700;color:var(--ivoire-pale);
  text-decoration:underline;text-underline-offset:3px}
.cookies__perso:hover{color:var(--or-clair)}
.cookies__detail{margin-top:14px;padding-top:14px;border-top:1px solid var(--ligne)}
.cookies__opt{display:flex;gap:12px;align-items:flex-start;font-size:.8125rem;color:var(--ivoire-pale);line-height:1.55;cursor:pointer}
.cookies__opt input{width:20px;height:20px;flex-shrink:0;margin-top:2px;accent-color:var(--terracotta)}
.cookies__opt b{display:block;font-size:.875rem;color:var(--ivoire);margin-bottom:2px}

/* ── Curseur personnalisé, pointeur fin seulement (cahier §43) ─────── */
.curseur{position:fixed;top:0;left:0;z-index:2000;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;
  border:1px solid var(--or);pointer-events:none;opacity:0;
  transition:opacity .3s,width .25s var(--ease),height .25s var(--ease),margin .25s var(--ease),background .25s}
.curseur.est-vu{opacity:.75}
.curseur.est-gros{width:46px;height:46px;margin:-23px 0 0 -23px;background:rgba(197,154,88,.14)}

/* ── Pied de page (cahier §36) ─────────────────────────────────────── */
.pied{background:var(--cacao);background-image:var(--trame);border-top:1px solid var(--ligne-forte);
  padding:clamp(48px,6vw,72px) 0 calc(86px + env(safe-area-inset-bottom))}
.pied__grille{display:grid;grid-template-columns:1fr 1fr;gap:34px 26px;padding-bottom:clamp(34px,5vw,50px)}
.pied__marque{grid-column:1/-1}
.pied__base{font-size:.875rem;color:var(--ivoire-pale);margin:16px 0 18px;max-width:30ch}
.pied__marque .pays{display:inline-block}
.pied__titre{font-size:.75rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--or);margin-bottom:16px}
.pied__liens{display:flex;flex-direction:column;gap:4px}
.pied__liens a,.pied__liens span{display:inline-flex;align-items:center;gap:10px;min-height:34px;font-size:.9375rem;color:var(--ivoire-doux);transition:color var(--t-micro)}
.pied__liens a:hover{color:var(--or-clair)}
.pied__liens .ico{width:16px;height:16px;color:var(--or)}
.pied__bas{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;
  border-top:1px solid var(--ligne);padding-top:22px;padding-bottom:14px;font-size:.8125rem;color:var(--ivoire-pale)}
.pied__bas ul{display:flex;flex-wrap:wrap;gap:6px 22px}
.pied__bas a{display:inline-flex;min-height:34px;align-items:center}
.pied__bas a:hover{color:var(--ivoire)}
.pied__avert{font-size:.75rem;line-height:1.6;color:rgba(243,235,221,.42)}

/* ── Pages légales ─────────────────────────────────────────────────── */
.doc{padding:clamp(56px,10vh,110px) 0 var(--sec-y);background-image:var(--trame)}
.doc__in{max-width:780px}
.doc__marque{display:inline-flex;align-items:center;gap:11px;color:var(--or);margin-bottom:28px}
.doc__marque .logo__mark{width:24px;height:31px}
.doc__marque span{font-family:var(--titre);font-size:1.125rem;letter-spacing:.14em;color:var(--ivoire)}
.doc__retour{display:flex;align-items:center;min-height:44px;width:max-content;color:var(--or-clair);font-size:.9375rem;font-weight:700;margin-bottom:18px}
.doc h1{font-size:clamp(2.125rem,1.5rem + 2.6vw,3.25rem);margin-bottom:10px}
.doc__maj{font-size:.75rem;font-weight:800;color:var(--or);letter-spacing:.14em;text-transform:uppercase;margin-bottom:30px}
.doc h2{font-size:clamp(1.375rem,1.2rem + .8vw,1.75rem);margin:36px 0 12px}
.doc p,.doc li{color:var(--ivoire-doux);margin-bottom:10px}
.doc ul{display:flex;flex-direction:column;gap:4px;margin:0 0 1em}
.doc ul li{padding-left:20px;position:relative}
.doc ul li::before{content:'';position:absolute;left:2px;top:.62em;width:7px;height:7px;transform:rotate(45deg);background:var(--terracotta)}
.doc a{color:var(--or-clair);text-decoration:underline;text-underline-offset:2px}
.doc a.doc__marque,.doc a.doc__retour{text-decoration:none}
.doc .avis-conf{border:1px solid var(--ligne-forte);border-radius:var(--r);padding:18px 20px;background:rgba(197,154,88,.07);margin-bottom:10px}
.doc .avis-conf p{margin:0;color:var(--ivoire)}
.doc~.pied{padding-bottom:28px}
.doc~.pied .pied__bas{border-top:0;padding-top:0}

/* ── Rappel de configuration (aperçu local seulement) ──────────────── */
.cfg{position:fixed;right:14px;bottom:98px;z-index:1200;width:min(340px,calc(100vw - 28px));max-height:60vh;display:flex;flex-direction:column;
  background:rgba(32,21,17,.98);border:1px dashed rgba(232,167,101,.6);border-radius:14px;font-size:.8125rem;box-shadow:0 16px 40px rgba(0,0,0,.5)}
.cfg--replie{width:auto}
.cfg__bascule{display:flex;align-items:center;gap:9px;width:100%;min-height:42px;padding:9px 14px;font-weight:700;text-align:left}
.cfg__pastille{display:grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--flamme);color:var(--ebene);font-size:.6875rem;font-weight:800}
.cfg__corps{overflow-y:auto;padding:0 14px 14px}
.cfg ul{display:flex;flex-direction:column;gap:5px;margin-bottom:10px}
.cfg li{padding-left:14px;position:relative;color:var(--ivoire-doux)}
.cfg li::before{content:'';position:absolute;left:0;top:.55em;width:5px;height:5px;transform:rotate(45deg);background:var(--flamme)}
.cfg__cacher{min-height:32px;padding:5px 12px;border:1px solid rgba(232,167,101,.5);border-radius:var(--pill);font-size:.75rem}

/* ═════════════════ Points de rupture ═════════════════════════════════ */
@media (min-width:600px){
  .deplis--grille{grid-template-columns:1fr 1fr}
  .deplis--grille .depli:nth-child(2){border-top:1px solid var(--ligne)}
  .pied__grille{grid-template-columns:1.4fr 1fr 1fr}
  .pied__marque{grid-column:auto}
}
@media (min-width:900px){
  .apropos__grille{grid-template-columns:.85fr 1.15fr}
  .contact__grille{grid-template-columns:1fr 1fr}
  .barre{display:none}
  .wa-flot{bottom:28px;right:28px}
  .bulle-wa{display:grid}
  .bandeau{bottom:28px}
  .cookies{bottom:28px}
  .cfg{bottom:28px;left:14px;right:auto}
  .pied{padding-bottom:28px}}
@media (min-width:1080px){
  .entete__nav{display:block}
  .entete .pays{display:block}
  .entete__cta{display:inline-flex}
  .burger{display:none}
  .defiler{display:flex}
  .hero__contenu{max-width:680px}
  .hero__actions{width:max-content;max-width:calc(100vw - 2 * var(--gout))}
  .defiler{bottom:120px}
  .pied__grille{grid-template-columns:1.5fr 1fr 1fr}}
@media (max-width:899px){
  /* L’arche passe derrière le texte et s’efface pour préserver la lecture */
  .arche{right:-14%;width:min(76vw,420px);opacity:.42}
  .final .arche{left:50%;margin-left:min(-38vw,-210px);opacity:.3}}
/* Sous 360 px, « confidentiellement. » dépasserait : on descend le titre
   d’un cran, en dessous du gabarit §4 mais au-dessus du débordement. */
@media (max-width:360px){
  .hero__h1{font-size:2.05rem}
}
@media (max-width:599px){
  .hero{padding-bottom:calc(104px + env(safe-area-inset-bottom))}
  .hero__actions .btn, .actions .btn, .final__act .btn{width:100%}
  .depli__corps p{padding-right:0}
  .choix--2{grid-template-columns:1fr}}
/* Mouvement réduit : tout est affiché, rien ne défile (cahier §38 et §55) */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .arche__poussiere,.curseur{display:none}
  .bande__piste{width:auto;flex-wrap:wrap;justify-content:center}
  .bande__ligne[aria-hidden]{display:none}
  .bande__ligne{flex-wrap:wrap;justify-content:center;white-space:normal;padding:0 20px}
  .arche{opacity:.3}
}

/* ═══════════════════════════════════════════════════════════════════════
   Expérience narrative — chapitres, porte d'entrée, variations de pays
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Variations de marché (cahier §22, §23) ─────────────────────────────
   Même marque, deux températures. La Belgique tire vers la terre cuite,
   la Suisse vers l'ivoire et une lumière plus froide. */
[data-ambiance="terre"]{--accent:var(--terracotta);--lueur:rgba(232,167,101,.3)}
[data-ambiance="ivoire"]{--accent:#B5703F;--lueur:rgba(243,235,221,.22)}
[data-ambiance="ivoire"] .services{background:#13100E}
[data-ambiance="ivoire"] .arche__lumiere{background:radial-gradient(ellipse 70% 55% at 50% 72%,rgba(243,235,221,.4),rgba(197,154,88,.2) 42%,transparent 72%)}
[data-ambiance="ivoire"] .bande{background:linear-gradient(90deg,#2A1C15,#3A271D 50%,#2A1C15)}

/* ── Porte d'entrée (cahier §11 à §13) ──────────────────────────────── */
.porte__body{min-height:100vh;display:grid;place-items:center;padding:clamp(28px,6vw,64px) var(--gout);
  background:radial-gradient(ellipse 70% 50% at 50% 0%,rgba(163,77,50,.16),transparent 60%),var(--ebene);
  background-image:var(--trame),radial-gradient(ellipse 70% 50% at 50% 0%,rgba(163,77,50,.16),transparent 60%)}
.porte__in{width:100%;max-width:980px;text-align:center}
.porte__marque{display:flex;flex-direction:column;align-items:center;gap:12px;margin-bottom:clamp(26px,5vw,44px)}
.porte__embleme{width:40px;height:52px;color:var(--or);filter:drop-shadow(0 0 14px rgba(197,154,88,.45))}
.porte__nom{font-family:var(--titre);font-size:.9375rem;letter-spacing:.3em;color:var(--ivoire)}
.porte__titre{font-size:clamp(2rem,1.3rem + 2.8vw,3.25rem);color:var(--ivoire);margin-bottom:8px}
.porte__sous{font-size:1rem;color:var(--ivoire-pale);margin-bottom:clamp(34px,6vw,56px)}
.porte__choix{display:grid;gap:20px}
.porte__arche{position:relative;padding:clamp(30px,4vw,44px) 24px clamp(26px,3vw,34px);border-radius:var(--r);
  border:1px solid var(--ligne);background:linear-gradient(180deg,rgba(32,21,17,.7),rgba(32,21,17,.25));
  overflow:hidden;isolation:isolate;--mx:0;--my:0;
  transform:perspective(900px) rotateY(calc(var(--mx) * 3deg)) rotateX(calc(var(--my) * -2.4deg));
  transition:transform .4s var(--ease),border-color .4s,box-shadow .4s}
.porte__arche:hover{border-color:var(--ligne-forte);box-shadow:0 26px 60px rgba(0,0,0,.5)}
.porte__arc{position:absolute;left:50%;top:-14%;width:min(62%,230px);height:128%;transform:translateX(-50%);
  border-radius:50% 50% 0 0 / 34% 34% 0 0;border:1px solid rgba(197,154,88,.22);z-index:-1;overflow:hidden}
.porte__lueur{position:absolute;inset:0;opacity:.3;transition:opacity .5s var(--ease);
  background:radial-gradient(ellipse 72% 56% at 50% 78%,var(--teinte,rgba(232,167,101,.55)),transparent 70%)}
.porte__arche:hover .porte__lueur{opacity:1}
.porte__arche--be{--teinte:rgba(232,167,101,.6)}
.porte__arche--ch{--teinte:rgba(243,235,221,.42)}
.porte__pays{font-family:var(--titre);font-size:clamp(1.75rem,1.4rem + 1.4vw,2.375rem);color:var(--ivoire)}
.porte__ville{font-size:.8125rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--or);margin:4px 0 22px}
.porte__langues{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.porte__langues a{display:inline-flex;align-items:center;min-height:48px;padding:12px 26px;border-radius:var(--pill);
  border:1px solid var(--ligne-forte);font-size:.9375rem;font-weight:700;color:var(--ivoire);
  transition:background var(--t-micro),color var(--t-micro),border-color var(--t-micro)}
.porte__langues a:hover{background:var(--terracotta);border-color:var(--terracotta);color:var(--ivoire)}
.porte__note{margin-top:clamp(28px,4vw,40px);font-size:.8125rem;color:var(--ivoire-pale)}
@media (min-width:760px){ .porte__choix{grid-template-columns:1fr 1fr;gap:26px}}

/* ── Navigation narrative latérale (cahier §62, §63) ────────────────── */
.fil-nav{display:none;position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:880}
.fil-nav ul{display:flex;flex-direction:column;gap:4px}
.fil-nav a{display:flex;align-items:center;justify-content:flex-end;gap:10px;height:30px;padding-right:4px;
  font-size:.6875rem;font-weight:700;letter-spacing:.1em;color:var(--ivoire-pale);transition:color var(--t-micro)}
.fil-nav__num{opacity:.5;transition:opacity var(--t-micro)}
.fil-nav__nom{max-width:0;overflow:hidden;white-space:nowrap;opacity:0;
  transition:max-width .35s var(--ease),opacity .25s}
.fil-nav a::after{content:'';width:7px;height:7px;flex-shrink:0;border:1px solid currentColor;transform:rotate(45deg);
  transition:background var(--t-micro),transform var(--t-micro)}
.fil-nav a:hover,.fil-nav a.est-actif{color:var(--or-clair)}
.fil-nav a:hover .fil-nav__nom{max-width:130px;opacity:1}
.fil-nav a:hover .fil-nav__num,.fil-nav a.est-actif .fil-nav__num{opacity:1}
.fil-nav a.est-actif::after{background:var(--or);transform:rotate(45deg) scale(1.2)}
@media (min-width:1180px){ .fil-nav{display:block}}

/* ── Chapitre 02 — défilement horizontal (cahier §33 à §35) ─────────── */
.situation{position:relative;background:var(--ebene)}
.situation__collant{padding:var(--sec-y) 0}
.rail-h{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  padding:4px var(--gout) 20px}
.rail-h::-webkit-scrollbar{display:none}
.rail-h__piste{display:flex;gap:18px;width:max-content}
.sit{flex:0 0 min(78vw,420px);scroll-snap-align:center}
.sit__btn{width:100%;height:100%;display:flex;flex-direction:column;align-items:flex-start;gap:12px;
  padding:clamp(26px,3vw,36px) clamp(22px,2.4vw,30px);text-align:left;border-radius:var(--r);
  border:1px solid var(--ligne);background:linear-gradient(180deg,rgba(32,21,17,.82),rgba(32,21,17,.4));
  transition:transform .45s var(--ease),border-color .35s,box-shadow .45s,background .35s}
.sit__btn:hover,.sit__btn:focus-visible{transform:translateY(-6px);border-color:var(--ligne-forte);
  box-shadow:0 24px 54px rgba(0,0,0,.5)}
.sit__btn[aria-pressed=true],.sit.est-choisi .sit__btn{border-color:var(--accent);
  background:linear-gradient(180deg,rgba(163,77,50,.24),rgba(32,21,17,.6))}
.sit__num{font-family:var(--titre);font-size:.9375rem;color:var(--or)}
.sit__ico{width:48px;height:48px;display:grid;place-items:center;transform:rotate(45deg);
  border:1px solid var(--ligne-forte);color:var(--or);transition:background .35s,color .35s}
.sit__ico .ico{transform:rotate(-45deg);width:21px;height:21px}
.sit__btn:hover .sit__ico{background:var(--or);color:var(--ebene)}
.sit__titre{font-family:var(--titre);font-size:1.5rem;color:var(--ivoire)}
.sit__txt{font-size:.9375rem;color:var(--ivoire-doux);line-height:1.65}
.rail-h__bas{display:flex;flex-direction:column;gap:24px;margin-top:10px}
.rail-h__progres{display:flex;align-items:center;gap:14px;font-family:var(--titre);font-size:1rem;color:var(--or)}
.rail-h__ligne{flex:1;max-width:260px;height:1px;background:var(--ligne-forte);position:relative;overflow:hidden}
.rail-h__ligne i{position:absolute;inset:0;background:var(--accent);transform:scaleX(var(--p,0));transform-origin:left;
  transition:transform .25s linear}
.rail-h__cta p{font-family:var(--titre);font-size:clamp(1.25rem,1.1rem + .8vw,1.625rem);color:var(--ivoire);margin-bottom:16px}
.rail-h__cta .actions{margin-top:0}

/* ── Chapitre 03 — portrait collé (cahier §37, §42) ─────────────────── */
.apropos{padding:var(--sec-y) 0;background:var(--terre);background-image:var(--trame)}
.apropos__grille{display:grid;gap:clamp(36px,5vw,72px);align-items:start}
.apropos .cadre{max-width:460px}
.jalons{display:flex;flex-direction:column;gap:2px;margin:30px 0 0;border-top:1px solid var(--ligne)}
.jalon{padding:22px 0 22px 54px;position:relative;border-bottom:1px solid var(--ligne);
  opacity:.45;transition:opacity .5s var(--ease)}
.jalon.est-actif{opacity:1}
.jalon__num{position:absolute;left:0;top:24px;font-family:var(--titre);font-size:.875rem;color:var(--or)}
.jalon__num::after{content:'';position:absolute;left:3px;top:26px;bottom:-30px;width:1px;background:var(--ligne)}
.jalon:last-child .jalon__num::after{display:none}
.jalon__titre{font-size:1.25rem;margin-bottom:6px}
.jalon__txt{font-size:1rem;color:var(--ivoire-doux);line-height:1.7}
@media (min-width:900px){
  .apropos__grille{grid-template-columns:.9fr 1.1fr}
  .apropos__visuel{position:sticky;top:120px}}

/* ── Chapitre 04 — cartes empilées, fond clair (cahier §43 à §45) ───── */
.methode{padding:var(--sec-y) 0;background:linear-gradient(180deg,#EFE4D2,#E6D8C2);color:#241710;position:relative}
.methode::before,.methode::after{content:'';position:absolute;left:0;right:0;height:60px;pointer-events:none}
.methode::before{top:0;background:linear-gradient(180deg,var(--ebene),transparent)}
.methode::after{bottom:0;background:linear-gradient(0deg,var(--ebene),transparent)}
.methode .tete__h2,.methode .pile__titre{color:#241710}
.methode .surtitre{color:#9C4A24}
.methode .surtitre::before{background:#9C4A24}
.methode .tete__intro{color:rgba(36,23,16,.72)}
.pile{position:relative;max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:18px}
.pile__carte{display:grid;grid-template-columns:62px 1fr;gap:20px;align-items:start;
  padding:clamp(24px,3vw,34px);border-radius:var(--r);background:#FBF5EA;
  border:1px solid rgba(36,23,16,.12);box-shadow:0 14px 34px rgba(36,23,16,.1);
  transition:transform .5s var(--ease),box-shadow .5s}
.pile__num{width:54px;height:54px;display:grid;place-items:center;transform:rotate(45deg);
  border:1px solid #9C4A24;color:#9C4A24;font-family:var(--titre);font-size:1.0625rem}
.pile__num{text-indent:0}
.pile__titre{font-size:1.375rem;margin:8px 0 6px}
.pile__txt{font-size:1rem;color:rgba(36,23,16,.72);line-height:1.7}
.methode__note{margin-top:30px;text-align:center;font-size:.9375rem;color:rgba(36,23,16,.6)}
@media (min-width:900px){
  /* L'empilement : chaque carte se colle sous la précédente (§45). */
  .pile{gap:0}
  .pile__carte{position:sticky;top:calc(120px + var(--i) * 16px);margin-bottom:18px}
  .pile__carte:not(:last-child){box-shadow:0 18px 40px rgba(36,23,16,.14)}}

/* ── Chapitre 05 — identité (cahier §46, §47) ───────────────────────────
   L'objet signature est une photographie, pas un décor : il occupe sa propre
   colonne et ne passe jamais sous le texte. */
.identite{position:relative;padding:clamp(80px,11vw,140px) 0;background:var(--ebene);overflow:hidden;isolation:isolate}
.identite::before{content:'';position:absolute;left:50%;top:50%;width:min(80vw,700px);aspect-ratio:1;
  transform:translate(-50%,-50%);z-index:-1;pointer-events:none;
  background:radial-gradient(circle,rgba(232,167,101,.14),transparent 68%)}
.identite__in{display:grid;gap:clamp(30px,5vw,60px);align-items:center;text-align:center}
.identite__objet{position:relative;margin:0 auto;width:min(62vw,300px)}
.identite__objet .media{aspect-ratio:4/5;overflow:hidden;border-radius:var(--r)}
.identite__objet img{width:100%;height:100%;object-fit:contain;
  transform:translateY(calc(var(--par,0) * -16px));filter:drop-shadow(0 30px 60px rgba(0,0,0,.6))}
.identite__titre{font-size:clamp(1.75rem,1.2rem + 2vw,2.625rem);margin:14px 0 18px;color:var(--ivoire)}
.identite__txt{font-size:1.0625rem;color:var(--ivoire-doux);line-height:1.8;max-width:56ch;margin:0 auto}
@media (min-width:900px){
  .identite__in{grid-template-columns:.8fr 1.2fr;text-align:left}
  .identite__objet{width:100%;max-width:340px}
  .identite__txt{margin:0}
  .identite .surtitre::before{display:block}}

/* ── Chapitre 06 — approches, navigation verticale (cahier §48, §49) ── */
.services{padding:var(--sec-y) 0;background:var(--terre);background-image:var(--trame)}
.serv{display:grid;gap:28px}
.serv__nav{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
.serv__nav::-webkit-scrollbar{display:none}
.serv__nav button{display:flex;align-items:center;gap:10px;white-space:nowrap;min-height:50px;padding:12px 18px;
  border-radius:var(--pill);border:1px solid var(--ligne);font-size:.9375rem;font-weight:700;color:var(--ivoire-doux);
  transition:border-color var(--t-micro),background var(--t-micro),color var(--t-micro)}
.serv__nav button:hover{border-color:var(--ligne-forte);color:var(--ivoire)}
.serv__nav button[aria-selected=true]{background:var(--accent);border-color:var(--accent);color:var(--ivoire)}
.serv__num{font-family:var(--titre);font-size:.8125rem;opacity:.8}
.serv__panneau{display:grid;gap:26px;animation:entreeServ .35s var(--ease)}
@keyframes entreeServ{from{opacity:0;transform:translateY(12px)}}
.serv__media .media,.serv__media img{width:100%;border-radius:var(--r)}
.serv__media .media{aspect-ratio:4/5;overflow:hidden;border:1px solid var(--ligne)}
.serv__media img{height:100%;object-fit:cover}
.serv__txt{position:relative}
.serv__grand-num{position:absolute;right:0;top:-18px;font-family:var(--titre);font-size:5rem;line-height:1;
  color:var(--ivoire);opacity:.06;pointer-events:none}
.serv__titre{font-size:clamp(1.625rem,1.3rem + 1.2vw,2.125rem);margin-bottom:14px}
.serv__corps{font-size:1.0625rem;color:var(--ivoire);line-height:1.8;margin-bottom:14px}
.serv__detail{font-size:.9375rem;color:var(--ivoire-pale);line-height:1.75;padding-left:16px;border-left:2px solid var(--ligne-forte)}
@media (min-width:900px){
  .serv{grid-template-columns:230px 1fr;gap:44px;align-items:start}
  .serv__nav{flex-direction:column;overflow:visible;position:sticky;top:120px}
  .serv__nav button{width:100%;justify-content:flex-start;border-radius:12px}
  .serv__panneau{grid-template-columns:.85fr 1.15fr;align-items:center;gap:36px}}

/* ── Chapitre 07 — témoignages coverflow (cahier §50, §51) ──────────── */
.temoins{padding:var(--sec-y) 0;overflow:hidden;background:var(--ebene)}
.flow{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  padding:10px var(--gout) 16px;perspective:1100px}
.flow::-webkit-scrollbar{display:none}
.avis{flex:0 0 min(400px,84vw);scroll-snap-align:center;display:flex;flex-direction:column;gap:20px;
  padding:32px 28px;border-radius:var(--r);background:linear-gradient(180deg,rgba(243,235,221,.07),rgba(243,235,221,.02));
  border:1px solid var(--ligne);opacity:.5;transform:scale(.9) rotateY(0deg);
  transition:transform .5s var(--ease),opacity .5s,border-color .4s}
.avis.est-centre{opacity:1;transform:scale(1);border-color:var(--ligne-forte)}
.avis__txt{flex:1;font-size:1rem;line-height:1.8;color:var(--ivoire)}
.avis__txt p::before{content:'“';display:block;font-family:var(--titre);font-size:3.25rem;line-height:.7;color:var(--accent);margin-bottom:6px}
.avis__auteur{display:flex;align-items:center;gap:14px;font-size:.8125rem;color:var(--ivoire-pale)}
.avis__auteur b{display:block;font-size:.9375rem;font-weight:700;color:var(--ivoire)}
.avis__init{width:46px;height:46px;display:grid;place-items:center;flex-shrink:0;border-radius:50%;
  background:linear-gradient(135deg,var(--or-clair),var(--accent));color:var(--ebene);font-weight:800;font-size:.875rem}
.flow__cmd{display:flex;justify-content:center;gap:12px;margin-top:22px}
.flow__btn{width:48px;height:48px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--ligne-forte);
  color:var(--ivoire);transition:border-color var(--t-micro),background var(--t-micro),color var(--t-micro)}
.flow__btn:hover{border-color:var(--or);color:var(--or-clair);background:rgba(197,154,88,.08)}
.flow__btn svg{width:18px;height:11px}
.temoins__cadre{max-width:640px;margin:0 auto;text-align:center;color:var(--ivoire-doux)}
@media (min-width:900px){ .flow{padding-left:max(var(--gout),calc((100vw - 1200px) / 2 + var(--gout)))}}

/* ── Chapitre 08 — présence locale (cahier §53 à §56) ───────────────── */
.local{padding:var(--sec-y) 0;background:var(--terre);background-image:var(--trame),radial-gradient(circle at 12% 0%,rgba(163,77,50,.16),transparent 52%)}
.cab{display:grid;gap:30px;padding:clamp(28px,4vw,42px);border-radius:var(--r);border:1px solid var(--ligne-forte);
  background:linear-gradient(180deg,rgba(9,8,7,.55),rgba(9,8,7,.2))}
.cab__pays{font-size:.75rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--or)}
.cab__ville{font-size:clamp(2rem,1.5rem + 2vw,2.75rem);margin:6px 0 8px}
.cab__adr{font-size:1.125rem;font-weight:700;color:var(--ivoire);margin-bottom:4px}
.cab__mod{font-size:.9375rem;color:var(--or);margin-bottom:22px}
.cab__act{display:flex;flex-wrap:wrap;gap:10px}
.cab__zone-lbl{font-size:.6875rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--or);margin-bottom:12px}
.cab__villes{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.cab__villes li{padding:7px 14px;border-radius:var(--pill);border:1px solid var(--ligne);font-size:.875rem;color:var(--ivoire-doux)}
.cab__zone-note{font-size:.8125rem;color:var(--ivoire-pale);line-height:1.6}
@media (min-width:900px){ .cab{grid-template-columns:1.1fr .9fr;gap:46px;align-items:start}}

/* ── FAQ et contact : fonds explicites (cahier §88) ─────────────────── */
.faq{padding:var(--sec-y) 0;background:var(--ebene)}
.faq__in{max-width:840px}