/* =====================================================================
   Maître Sékou — système de design « Nuit »
   Sombre cosmique · or & braise · Cinzel + Spectral
   Hérité par toutes les pages du site.
   ===================================================================== */

:root{
  /* Fonds */
  --nuit:#0b1418; --nuit-2:#0e1c20; --nuit-3:#13262b; --nuit-4:#080f12;
  /* Or */
  --or:#c79a4b; --or-clair:#e0bd76; --or-pale:#f3dca0;
  /* Braise */
  --braise:#c4502e; --braise-clair:#d96a44;
  /* Crème / titres */
  --creme:#f3ead7; --creme-2:#f5ecd9;
  /* Texte */
  --t1:#dfe7e4; --t2:#c3cfcc; --t3:#9fb0ad; --t4:#8ea09c; --t5:#7c8d8a; --t6:#5e6e6b;
  /* Vert (signal disponibilité / WhatsApp) */
  --vert:#5ec79a; --wa:#25D366;
  /* Lignes */
  --ligne:rgba(199,154,75,0.18); --ligne-faible:rgba(199,154,75,0.12);
  /* Typo */
  --display:'Cinzel',Georgia,serif;
  --serif:'Spectral',Georgia,serif;
  --max:1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--nuit); color:var(--t1);
  font-family:var(--serif); line-height:1.75; font-size:19.5px;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
::selection{background:var(--braise); color:var(--creme)}
a{color:inherit}
img{max-width:100%; display:block}
h1,h2,h3,h4{margin:0}

.wrap{max-width:var(--max); margin:0 auto; padding:0 26px}
.skip{position:absolute; left:-999px}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
.skip:focus{left:8px; top:8px; z-index:200; background:var(--or); color:var(--nuit); padding:8px 14px}

/* ---------- Grain ---------- */
.grain{position:fixed; inset:0; z-index:95; pointer-events:none; opacity:.06; mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:220px 220px}

/* ---------- En-tête ---------- */
.site-header{position:sticky; top:0; z-index:60; background:rgba(11,20,24,.72);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--ligne)}
.site-header .bar{max-width:1280px; margin:0 auto; padding:13px 26px; display:flex; align-items:center;
  justify-content:space-between; gap:24px}
.brand{display:flex; align-items:center; gap:13px; text-decoration:none; color:inherit}
.brand svg,.brand .brand-mark{width:42px; height:42px; flex:none}
.foot-brand .foot-mark{flex:none}
.brand .wm{display:flex; flex-direction:column; line-height:1.15}
.brand .wm b{font-family:var(--display); font-size:20.5px; letter-spacing:2.5px; color:var(--creme); font-weight:600}
.brand .wm span{font-size:11px; letter-spacing:1.5px; color:var(--or)}
.nav{display:flex; align-items:center; gap:24px; flex-wrap:wrap}
.nav a{color:var(--t2); text-decoration:none; font-size:16.5px; letter-spacing:.5px; padding-bottom:3px}
.nav a:hover{color:var(--or-clair)}
.nav a[aria-current="page"]{color:var(--or-clair); border-bottom:2px solid var(--braise)}
.nav .tel{display:inline-flex; align-items:center; gap:8px; background:linear-gradient(135deg,var(--braise-clair),var(--braise));
  color:var(--creme); font-weight:600; padding:10px 18px; border-radius:2px;
  box-shadow:0 6px 20px rgba(196,80,46,.3)}
.nav .tel:hover{color:var(--creme)}
.burger{display:none; background:transparent; border:1px solid rgba(199,154,75,.4); border-radius:2px;
  padding:9px 11px; cursor:pointer}
.mobile-menu{display:none; flex-direction:column; padding:6px 22px 16px}
.mobile-menu a{color:var(--t1); text-decoration:none; font-size:17.5px; padding:13px 4px; border-bottom:1px solid var(--ligne-faible)}
.mobile-menu .tel{margin-top:12px; text-align:center; background:linear-gradient(135deg,var(--braise-clair),var(--braise));
  color:var(--creme); font-weight:600; border:0; border-radius:2px}
@media(max-width:1099px){
  .nav{display:none}
  .burger{display:inline-flex}
  .mobile-menu[data-open="1"]{display:flex}
}

/* ---------- Boutons ---------- */
.btn{display:inline-flex; align-items:center; gap:10px; text-decoration:none; font-weight:600;
  font-size:18.5px; padding:16px 30px; border-radius:2px; letter-spacing:.5px; border:1px solid transparent;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease}
.btn svg{width:18px; height:18px; flex:none}
.btn-or{background:linear-gradient(135deg,var(--or-clair),var(--or)); color:var(--nuit);
  box-shadow:0 12px 34px rgba(199,154,75,.32)}
.btn-or:hover{transform:translateY(-2px); box-shadow:0 16px 40px rgba(199,154,75,.5)}
.btn-ligne{background:rgba(243,234,215,.04); color:var(--creme); border-color:rgba(199,154,75,.45)}
.btn-ligne:hover{border-color:var(--or); background:rgba(199,154,75,.1)}
.btn-wa{background:var(--wa); color:#06351a}
.btn-wa:hover{transform:translateY(-2px)}

/* ---------- Labels & titres de section ---------- */
.kicker{display:inline-flex; align-items:center; gap:9px; color:var(--or);
  font-family:var(--display); font-size:12px; letter-spacing:3px; text-transform:uppercase; margin:0}
.kicker .dot{width:7px; height:7px; border-radius:50%; background:var(--vert); animation:pulse 2.6s infinite}
.section{position:relative; z-index:2; padding:96px 0}
.section--alt{background:linear-gradient(180deg,var(--nuit),var(--nuit-2))}
.section--deep{background:var(--nuit-2)}
.section-titre{font-family:var(--serif); font-weight:500; color:var(--creme-2);
  font-size:clamp(28px,4vw,46px); line-height:1.18; margin:12px 0 0}
.section-intro{color:var(--t3); font-size:19.5px; max-width:640px; margin:16px 0 0}
.section--center{text-align:center}
.section--center .kicker,.section--center .section-titre{margin-left:auto; margin-right:auto}
.section--center .section-intro{margin-left:auto; margin-right:auto}

/* ---------- Héro ---------- */
.hero{position:relative; min-height:92vh; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:80px 26px 96px; overflow:hidden;
  background:radial-gradient(130% 90% at 50% -10%, #1c4048 0%, #122a30 38%, var(--nuit) 100%)}
.hero canvas{position:absolute; inset:0; width:100%; height:100%; pointer-events:none}
.hero .compas{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); pointer-events:none}
.hero .glow{position:absolute; pointer-events:none; filter:blur(36px)}
.hero .glow-1{left:-90px; bottom:-60px; width:420px; height:420px; opacity:.4;
  background:radial-gradient(circle,#1f6b5e 0%,transparent 70%)}
.hero .glow-2{right:-80px; top:-40px; width:380px; height:380px; opacity:.2;
  background:radial-gradient(circle,var(--braise) 0%,transparent 70%)}
.hero .ville{position:absolute; left:30px; top:50%; transform:translateY(-50%) rotate(180deg);
  writing-mode:vertical-rl; font-family:var(--display); font-size:11px; letter-spacing:5px;
  color:rgba(199,154,75,.55); text-transform:uppercase; animation:fadein 2s ease 1.2s both}
.hero-inner{position:relative; max-width:1000px; margin:0 auto; z-index:2}
.hero-eyebrow{display:inline-flex; align-items:center; gap:10px; font-family:var(--display);
  font-size:11.5px; letter-spacing:4px; text-transform:uppercase; color:var(--or-clair);
  animation:rise 1s cubic-bezier(.2,.7,.2,1) both}
.hero-eyebrow .dot{width:7px; height:7px; border-radius:50%; background:var(--vert); animation:pulse 2.6s infinite}
.hero h1{margin:22px 0 0; font-weight:400; line-height:.96}
.hero h1 .l1{display:block; font-family:var(--display); font-size:clamp(15px,2.4vw,22px);
  letter-spacing:7px; text-transform:uppercase; color:#aeb9b6; animation:rise 1s cubic-bezier(.2,.7,.2,1) .12s both}
.hero h1 .l2{display:block; font-family:var(--display); font-weight:800; font-size:clamp(50px,12vw,138px);
  letter-spacing:1px; line-height:.92; margin:6px 0; max-width:100%; animation:rise 1.1s cubic-bezier(.2,.7,.2,1) .26s both}
.hero h1 .l3{display:block; font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:clamp(20px,3.4vw,40px); color:var(--creme); animation:rise 1s cubic-bezier(.2,.7,.2,1) .42s both}
.hero-lede{font-size:clamp(15px,1.9vw,19px); color:#aab8b5; max-width:580px; margin:30px auto 0;
  line-height:1.8; animation:rise 1s cubic-bezier(.2,.7,.2,1) .56s both}
.hero-actions{display:flex; gap:15px; justify-content:center; flex-wrap:wrap; margin-top:36px;
  animation:rise 1s cubic-bezier(.2,.7,.2,1) .7s both}
.hero-note{margin:22px auto 0; font-family:var(--display); font-size:11px; letter-spacing:2.5px;
  text-transform:uppercase; color:var(--t4); animation:rise 1s cubic-bezier(.2,.7,.2,1) .8s both}
.hero-note b{color:var(--or-clair); font-weight:600}
.scroll-cue{position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:8px; text-decoration:none;
  animation:floatcue 2.6s ease-in-out infinite}
.scroll-cue span{font-family:var(--display); font-size:10px; letter-spacing:3px; color:var(--or); text-transform:uppercase}

/* Héro de page intérieure (plus court que l'accueil) */
.hero--page{min-height:auto; padding:118px 26px 84px}
.hero--page .hero-inner{max-width:880px}
.hero-titre{font-family:var(--display); font-weight:700; color:var(--creme-2);
  font-size:clamp(33px,6vw,66px); line-height:1.06; letter-spacing:1px; margin:18px 0 0;
  animation:rise 1s cubic-bezier(.2,.7,.2,1) .12s both}
.hero-titre em{font-family:var(--serif); font-style:italic; font-weight:300; color:var(--or-clair)}

/* Pensée du visiteur (exergue answer-first sur pages service) */
.pensee{font-family:var(--serif); font-style:italic; font-weight:300; color:var(--creme);
  font-size:clamp(22px,3.4vw,34px); line-height:1.32; max-width:760px; margin:0 0 8px}
.pensee .g{color:var(--braise)}
.reponse{color:var(--t2); font-size:20.5px; max-width:720px; margin:18px 0 0}
.reponse strong{color:var(--or-clair); font-weight:600}

/* Prose longue (corps de page service) */
.prose-bloc{max-width:760px}
.prose-bloc p{color:var(--t2); font-size:19px; margin:18px 0 0}
.prose-bloc h3{font-family:var(--serif); font-weight:500; color:var(--creme-2); font-size:clamp(22px,3vw,28px); margin:38px 0 0}
.prose-bloc strong{color:var(--or-clair); font-weight:600}
.prose-bloc ul{margin:18px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:12px}
.prose-bloc ul li{position:relative; padding-left:26px; color:var(--t2); font-size:18.5px}
.prose-bloc ul li::before{content:"✦"; position:absolute; left:0; color:var(--braise)}

/* Texte « sheen » doré animé (titre héro) */
.sheen{background:linear-gradient(100deg,#9a7434 0%,#c79a4b 28%,#f3dca0 50%,#c79a4b 72%,#9a7434 100%);
  background-size:220% auto; -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent; animation:sheen 7s linear infinite}

/* ---------- Bandeau stats ---------- */
.stats{position:relative; z-index:2; background:var(--nuit); border-top:1px solid var(--ligne-faible)}
.stats .row{max-width:1080px; margin:0 auto; padding:0 26px; display:flex; flex-wrap:wrap;
  justify-content:center; align-items:center}
.stat{flex:1; min-width:160px; text-align:center; padding:34px 18px; border-right:1px solid var(--ligne-faible)}
.stat:last-child{border-right:0}
.stat b{display:block; font-family:var(--display); font-size:34px; color:var(--or-clair)}
.stat span{font-size:13.5px; color:var(--t4); letter-spacing:1px; text-transform:uppercase}

/* ---------- Bio / présentation ---------- */
.bio-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:54px; align-items:center}
.bio-quote{font-family:var(--display); font-size:72px; color:rgba(196,80,46,.5); line-height:.5; margin:18px 0 -6px}
.bio h2{font-family:var(--serif); font-size:clamp(26px,3.6vw,40px); color:var(--creme-2);
  font-weight:400; font-style:italic; line-height:1.28; margin:0}
.bio p{color:var(--t2); font-size:19px; margin:22px 0 0}
.bio p.sub{color:var(--t4); font-size:18px; margin-top:14px}
.bio strong{color:var(--or-clair); font-weight:600}
.cadre{position:relative}
.cadre::before{content:""; position:absolute; inset:-12px; border:1px solid rgba(199,154,75,.32)}
.cadre .c-tl,.cadre .c-br{position:absolute; width:24px; height:24px}
.cadre .c-tl{top:-12px; left:-12px; border-top:2px solid var(--braise); border-left:2px solid var(--braise)}
.cadre .c-br{bottom:-12px; right:-12px; border-bottom:2px solid var(--braise); border-right:2px solid var(--braise)}
.cadre img{width:100%; height:auto; aspect-ratio:5/6; max-height:600px;
  object-fit:cover; object-position:center 28%; filter:saturate(.92) contrast(1.02)}
/* Image montrée en entier (aucun recadrage) : le cadre épouse la proportion de la photo */
.cadre--plein img{aspect-ratio:auto; max-height:none}
.cadre figcaption{margin-top:14px; font-family:var(--display); font-size:11px; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--t5)}

/* ---------- Étapes (déroulé) ---------- */
.etapes{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:22px; margin-top:46px}
.etape{position:relative; background:var(--nuit-3); border:1px solid var(--ligne); padding:30px 26px}
.etape .n{font-family:var(--display); font-size:15.5px; letter-spacing:2px; color:var(--braise-clair)}
.etape h3{font-family:var(--serif); font-size:20px; color:var(--creme-2); font-weight:500; margin:10px 0 8px}
.etape p{color:var(--t3); font-size:17px; margin:0; line-height:1.7}

/* ---------- Domaines (index numéroté) ---------- */
.dom-head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap;
  border-bottom:1px solid var(--ligne); padding-bottom:26px}
.dom-head .compteur{font-family:var(--display); color:var(--t6); font-size:15.5px; letter-spacing:2px}
.dom{text-decoration:none; display:grid; grid-template-columns:auto 1fr auto; gap:28px; align-items:center;
  padding:36px 14px; border-bottom:1px solid var(--ligne-faible); transition:background .25s ease}
.dom:hover{background:linear-gradient(90deg,rgba(196,80,46,.1),transparent)}
.dom .num{font-family:var(--display); font-size:clamp(34px,5vw,64px); color:transparent;
  -webkit-text-stroke:1px rgba(199,154,75,.55); line-height:1}
.dom h3{font-family:var(--serif); font-size:clamp(22px,3vw,34px); color:var(--creme-2); font-weight:500; margin:0 0 6px}
.dom p{color:var(--t3); font-size:17.5px; margin:0; max-width:600px}
.dom .arr{color:var(--braise); flex:none}
.dom:hover .arr{transform:translateX(4px); transition:transform .25s ease}

/* ---------- Chance & réussite (section) ---------- */
.chance-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:40px; align-items:center}
.chance-points{list-style:none; padding:0; margin:24px 0 0; display:flex; flex-direction:column; gap:14px}
.chance-points li{position:relative; padding-left:26px; color:var(--t2); font-size:18px}
.chance-points li::before{content:"✦"; position:absolute; left:0; color:var(--braise)}

/* ---------- Zones ---------- */
.zones-tags{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; max-width:860px; margin:28px auto 0}
.zones-tags span{background:rgba(199,154,75,.07); border:1px solid rgba(199,154,75,.26); color:#e2d7bd;
  font-size:16.5px; padding:8px 16px; letter-spacing:.3px}

/* ---------- Avis ---------- */
.avis-grid{max-width:1080px; margin:46px auto 0; display:grid; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); gap:20px}
.avis{background:var(--nuit-3); border:1px solid var(--ligne); padding:30px; margin:0}
.avis .etoiles{color:var(--or-clair); font-size:17.5px; letter-spacing:4px; margin-bottom:14px}
.avis blockquote{margin:0; color:var(--t2); font-size:17.5px; line-height:1.78; font-style:italic}
.avis figcaption{margin-top:18px; display:flex; align-items:center; gap:12px}
.avis .pastille{width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,#1f6b5e,var(--braise));
  display:flex; align-items:center; justify-content:center; font-family:var(--display); color:var(--creme); font-size:18.5px; flex:none}
.avis .who b{display:block; color:var(--creme-2); font-weight:600; font-size:17px}
.avis .who span{color:var(--t5); font-size:13.5px}

/* ---------- Repères chiffrés (information gain) ---------- */
.reperes{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px; margin:40px 0 0}
.repere{border-left:2px solid var(--braise); padding:6px 0 6px 22px}
.repere b{display:block; font-family:var(--display); font-size:30px; color:var(--or-clair)}
.repere span{color:var(--t3); font-size:17px}
.src{color:var(--t6); font-size:13.5px; margin-top:22px}

/* ---------- FAQ ---------- */
.faq{max-width:820px; margin:40px auto 0}
.faq details{border-bottom:1px solid var(--ligne-faible)}
.faq summary{cursor:pointer; list-style:none; padding:22px 36px 22px 0; position:relative;
  font-family:var(--serif); font-size:20.5px; color:var(--creme-2); font-weight:500}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; position:absolute; right:6px; top:18px; font-size:24px; color:var(--or); font-weight:400}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0 0 22px; color:var(--t3); font-size:18px; max-width:740px}

/* ---------- CTA ---------- */
.cta{position:relative; z-index:2; padding:104px 26px; text-align:center; overflow:hidden;
  background:radial-gradient(120% 130% at 50% 0%, #1c4048 0%, #122a30 55%, var(--nuit) 100%);
  border-top:1px solid var(--ligne)}
.cta .compas{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); pointer-events:none}
.cta-inner{position:relative; max-width:700px; margin:0 auto; z-index:2}
.cta h2{font-family:var(--display); font-size:clamp(30px,5vw,56px); color:var(--creme-2); font-weight:600;
  line-height:1.12; letter-spacing:.5px; margin:0}
.cta p{color:var(--t2); font-size:19.5px; margin:20px auto 0; max-width:520px}
.cta .hero-actions{justify-content:center}

/* ---------- Pied ---------- */
.site-footer{position:relative; z-index:2; background:var(--nuit-4); border-top:1px solid var(--ligne); padding:54px 26px 28px}
.foot-grid{max-width:1080px; margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:36px}
.foot-brand{display:flex; align-items:center; gap:12px; margin-bottom:14px}
.foot-brand b{font-family:var(--display); font-size:19.5px; letter-spacing:2px; color:var(--creme)}
.foot-grid p{color:var(--t5); font-size:16.5px; max-width:320px; margin:0}
.site-footer h4{color:var(--or-clair); font-family:var(--display); font-size:12px; letter-spacing:2px;
  text-transform:uppercase; margin:0 0 14px}
.site-footer ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px}
.site-footer a{color:var(--t3); text-decoration:none; font-size:16.5px}
.site-footer a:hover{color:var(--or-clair)}
.site-footer .tel-f{color:var(--creme); font-weight:600; font-size:17.5px}
.site-footer li.muted{color:var(--t5); font-size:16.5px}
.foot-bas{max-width:1080px; margin:34px auto 0; padding-top:22px; border-top:1px solid rgba(255,255,255,.07);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px}
.foot-bas span{color:var(--t6); font-size:13.5px; max-width:560px}

/* ---------- Boutons flottants ---------- */
.float{position:fixed; right:20px; bottom:20px; z-index:90; display:flex; flex-direction:column; gap:12px}
.float a{width:54px; height:54px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,.4)}
.float .wa{background:var(--wa)}
.float .call{background:linear-gradient(135deg,var(--or-clair),var(--or)); box-shadow:0 8px 24px rgba(199,154,75,.45)}

/* ---------- Bandeau image cinématique ---------- */
.bande-image{position:relative; z-index:2; height:clamp(300px,42vw,470px); overflow:hidden; background:var(--nuit)}
.bande-image img{width:100%; height:100%; object-fit:cover; object-position:center 38%; display:block}
.bande-image::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, var(--nuit) 0%, rgba(11,20,24,0) 24%, rgba(11,20,24,0) 76%, var(--nuit) 100%)}
.bande-image.tint::before{content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(155deg, rgba(11,20,24,.5), rgba(28,64,72,.42)); mix-blend-mode:multiply}

/* ---------- Contact : formulaire & coordonnées ---------- */
.contact-grid{display:grid; grid-template-columns:1.2fr 1fr; gap:54px; align-items:start}
.form{display:flex; flex-direction:column; gap:16px}
.champ label{display:block; font-family:var(--display); font-size:11px; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--or); margin-bottom:7px}
.champ input,.champ textarea{width:100%; background:var(--nuit-3); border:1px solid var(--ligne);
  color:var(--t1); font-family:var(--serif); font-size:18.5px; padding:13px 14px; border-radius:2px}
.champ input:focus,.champ textarea:focus{outline:none; border-color:var(--or); background:#16292f}
.champ textarea{min-height:150px; resize:vertical}
.consent{display:flex; gap:10px; align-items:flex-start; color:var(--t4); font-size:15.5px; line-height:1.5}
.consent input{width:18px; height:18px; margin-top:2px; flex:none; accent-color:var(--braise)}
.form .btn{justify-content:center; margin-top:6px}
.form-note{color:var(--t5); font-size:13.5px; margin:4px 0 0}
.coord{border:1px solid var(--ligne); padding:26px; margin-bottom:18px; background:var(--nuit-3)}
.coord h3{font-family:var(--display); font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--or-clair); margin:0 0 14px}
.coord p{margin:0 0 8px; color:var(--t2); font-size:17.5px}
.coord a{color:var(--creme); font-weight:600; text-decoration:none}
.coord .grand{font-family:var(--display); font-size:22px; color:var(--creme-2); letter-spacing:1px}
@media(max-width:820px){ .contact-grid{grid-template-columns:1fr; gap:40px} }

/* ---------- Pages légales (prose simple) ---------- */
.legal{max-width:820px}
.legal h2{font-family:var(--serif); font-weight:500; color:var(--creme-2); font-size:24px; margin:40px 0 0}
.legal h2:first-of-type{margin-top:0}
.legal p{color:var(--t2); font-size:18px; margin:14px 0 0}
.legal a{color:var(--or-clair)}
.legal .maj{color:var(--braise-clair); font-size:15.5px}

/* ---------- Bouton remonter en haut ---------- */
.to-top{position:fixed; left:20px; bottom:20px; z-index:90; width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; background:rgba(11,20,24,.7);
  border:1px solid var(--ligne); color:var(--or); cursor:pointer; padding:0;
  opacity:0; visibility:hidden; transform:translateY(10px);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:opacity .3s ease, transform .3s ease, visibility .3s ease, border-color .2s ease, background .2s ease}
.to-top.show{opacity:1; visibility:visible; transform:none}
.to-top:hover{border-color:var(--or); background:rgba(199,154,75,.12)}

/* ---------- Disclaimer ---------- */
.disclaimer{color:var(--t5); font-size:13.5px; max-width:680px; margin:26px auto 0; line-height:1.6}

/* ---------- Bandeau cookies ---------- */
.cookie-banner{position:fixed; left:16px; right:16px; bottom:16px; z-index:120; max-width:780px; margin:0 auto;
  background:rgba(14,28,32,.97); border:1px solid var(--ligne); border-radius:4px; padding:18px 22px;
  display:flex; align-items:center; gap:20px; flex-wrap:wrap; justify-content:space-between;
  box-shadow:0 16px 44px rgba(0,0,0,.55); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px)}
.cookie-banner p{margin:0; flex:1 1 320px; color:var(--t2); font-size:15px; line-height:1.6}
.cookie-banner a{color:var(--or-clair); text-decoration:underline}
.cookie-actions{display:flex; gap:10px; flex:0 0 auto}
.btn-cookie{cursor:pointer; font-family:var(--serif); font-size:15px; font-weight:600; padding:11px 22px;
  border-radius:2px; border:1px solid transparent; transition:background .2s ease, border-color .2s ease, filter .2s ease}
.btn-cookie.refuse{background:transparent; color:var(--t2); border-color:rgba(199,154,75,.45)}
.btn-cookie.refuse:hover{border-color:var(--or); color:var(--creme)}
.btn-cookie.accept{background:linear-gradient(135deg,var(--or-clair),var(--or)); color:var(--nuit)}
.btn-cookie.accept:hover{filter:brightness(1.06)}
.cookie-manage{display:block; width:100%; margin-top:14px; background:none; border:0; cursor:pointer; padding:0;
  color:var(--t6); font-family:var(--serif); font-size:13px; text-decoration:underline; text-align:left}
.cookie-manage:hover{color:var(--or-clair)}
@media(max-width:560px){
  .cookie-banner{flex-direction:column; align-items:stretch; gap:14px}
  .cookie-actions{justify-content:flex-end}
}

/* ---------- Animations ---------- */
@keyframes rise{from{transform:translateY(44px)}to{transform:none}}
@keyframes fadein{from{transform:translateY(-8px); opacity:0}to{transform:none; opacity:1}}
@keyframes revealUp{from{transform:translateY(30px); opacity:0}to{transform:none; opacity:1}}
@keyframes slowspin{to{transform:rotate(360deg)}}
@keyframes counterspin{to{transform:rotate(-360deg)}}
@keyframes floatcue{0%,100%{transform:translate(-50%,0); opacity:.45}50%{transform:translate(-50%,9px); opacity:1}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(94,199,154,.55)}70%{box-shadow:0 0 0 9px rgba(94,199,154,0)}}
@keyframes sheen{0%{background-position:0% 50%}100%{background-position:200% 50%}}
/* Révélation au scroll = amélioration progressive : masquée seulement si JS actif (classe .js) */
.js [data-reveal]{opacity:0; transform:translateY(28px); transition:opacity .8s ease, transform .85s cubic-bezier(.2,.7,.2,1)}
.js [data-reveal].in{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important}
  .js [data-reveal]{opacity:1!important; transform:none!important}
}

/* ---------- Responsive ---------- */
@media(max-width:760px){
  .section{padding:72px 0}
  .hero .ville{display:none}
  .bio-quote{font-size:56px}
  .dom{grid-template-columns:auto 1fr; gap:18px}
  .dom .arr{display:none}
  .stat{border-right:0}
  .foot-bas{flex-direction:column}
}