:root{
  --creme:#F4F1EC; --creme-2:#EAE5DC; --blanc:#FFFFFF;
  --nuit:#1B2028; --nuit-2:#252B35; --nuit-3:#333A45;
  --or:#B8965A; --or-clair:#D4B77E;
  --texte:#2A2F36; --gris:#767C85; --gris-clair:rgba(255,255,255,.62);
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --plan:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='320' viewBox='0 0 420 320'%3E%3Cg fill='none' stroke='%238C7A56' stroke-width='1.4'%3E%3Crect x='20' y='20' width='240' height='170'/%3E%3Crect x='20' y='20' width='140' height='95'/%3E%3Crect x='160' y='115' width='100' height='75'/%3E%3Crect x='275' y='60' width='125' height='230'/%3E%3Crect x='40' y='215' width='210' height='80'/%3E%3Cpath d='M160 20v95M20 115h140M275 130h125M330 60v230M60 215v80'/%3E%3Cpath d='M95 115a22 22 0 0 0 22-22M205 190a20 20 0 0 1 20-20M300 130a18 18 0 0 0 18 18'/%3E%3C/g%3E%3Cg fill='none' stroke='%238C7A56' stroke-width='.9' stroke-dasharray='3 4'%3E%3Cpath d='M20 305h230M275 305h125M410 60v230'/%3E%3C/g%3E%3C/svg%3E");
}
*{box-sizing:border-box}
html,body{overflow-x:clip;max-width:100%}
body{margin:0;background:var(--creme);color:var(--texte);font-family:var(--sans);font-size:1rem;line-height:1.65;font-weight:400;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.wrap{max-width:1200px;margin:0 auto;padding:0 20px}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.12;letter-spacing:-.005em;margin:0}
h1{font-size:2.5rem}
h2{font-size:2rem}
h3{font-size:1.3rem}
em.it{font-style:italic}
p{margin:0 0 1rem}
section{padding-top:68px;padding-bottom:68px}
.eyebrow{font-size:.68rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--or);margin:0 0 16px}
.eyebrow::before{content:"/ ";opacity:.55}
.eyebrow.nu::before{content:none}
.centre{text-align:center}
.centre .lede{max-width:56ch;margin-left:auto;margin-right:auto}

/* ---------- BOUTONS ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 26px;border-radius:999px;font-family:var(--sans);font-size:.9rem;font-weight:500;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:.2s;white-space:nowrap}
.btn .ar{transition:transform .2s}
.btn:hover .ar{transform:translateX(4px)}
.btn-or{background:var(--or);color:#fff;border-color:var(--or)}
.btn-or:hover{background:#A5854C}
.btn-nuit{background:var(--nuit);color:#fff}
.btn-nuit:hover{background:var(--nuit-2)}
.btn-ghost{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.35);backdrop-filter:blur(6px)}
.btn-ghost:hover{background:rgba(255,255,255,.2)}
.btn-line{background:transparent;color:var(--texte);border-color:#C9C1B4}
.btn-line:hover{border-color:var(--or);color:var(--or)}

/* ---------- HERO ---------- */
.hero{position:relative;min-height:640px;display:flex;flex-direction:column;overflow:hidden;background:var(--nuit);padding:0}
.hero-bg{position:absolute;inset:0}
.hero-bg img{width:100%;height:100%;object-fit:cover}
.hero-bg img{filter:saturate(.92) brightness(.86)}
.hero-bg::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(16,20,26,.72) 0%,rgba(16,20,26,.34) 30%,rgba(16,20,26,.62) 62%,rgba(16,20,26,.94) 100%),
  linear-gradient(100deg,rgba(16,20,26,.86) 0%,rgba(16,20,26,.52) 42%,rgba(16,20,26,.12) 74%)}
.hero-top{position:relative;z-index:3;padding-top:20px}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:18px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(12px);border-radius:999px;padding:9px 9px 9px 24px}
.nav-in>*{min-width:0}
.brand{font-family:var(--serif);font-size:1.35rem;color:#fff;text-decoration:none;letter-spacing:.01em;white-space:nowrap}
nav.main{display:flex;gap:6px}
nav.main a{font-size:.78rem;font-weight:500;letter-spacing:.04em;color:rgba(255,255,255,.8);text-decoration:none;padding:9px 15px;border-radius:999px;transition:.18s;white-space:nowrap}
nav.main a::before{content:"/";opacity:.45;margin-right:3px}
nav.main a:hover{background:rgba(255,255,255,.14);color:#fff}
nav.main a.on{background:#fff;color:var(--nuit)}
nav.main a.on::before{opacity:.4}

/* Sous-menus du haut de page (2e niveau). Ouverture au survol ET au clavier. */
nav.main .ip{position:relative;display:inline-flex}
nav.main .ip>a{display:inline-flex;align-items:center;gap:5px}
nav.main .ic-ch{width:9px;height:9px;flex:none;opacity:.7;transition:transform .22s}
nav.main .ip:hover .ic-ch,nav.main .ip:focus-within .ic-ch{transform:rotate(180deg)}
nav.main .sous{position:absolute;top:calc(100% + 10px);left:0;min-width:210px;display:flex;flex-direction:column;gap:2px;padding:8px;border-radius:16px;background:rgba(20,24,30,.97);border:1px solid rgba(255,255,255,.14);box-shadow:0 18px 44px rgba(10,13,18,.5);backdrop-filter:blur(12px);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s,transform .24s cubic-bezier(.16,1,.3,1),visibility .2s;z-index:10}
/* Pont invisible : la souris peut descendre sans perdre le survol. */
nav.main .sous::before{content:"";position:absolute;bottom:100%;left:0;right:0;height:12px}
nav.main .ip:hover .sous,nav.main .ip:focus-within .sous{opacity:1;visibility:visible;transform:none}
nav.main .sous a{white-space:normal;padding:8px 12px;border-radius:10px;color:rgba(255,255,255,.82)}
nav.main .sous a::before{display:none}
nav.main .sous a:hover{background:rgba(255,255,255,.12);color:#fff}
.hero-body{position:relative;z-index:2;flex:1;display:flex;align-items:flex-end;padding-top:110px;padding-bottom:34px}
.hero-body>.wrap{position:relative;width:100%}
.hero-txt{display:grid;grid-template-columns:1fr;gap:26px;align-items:end}
.hero-txt>*{min-width:0}
.hero-droite{text-align:left}
.hero-stats{position:relative;z-index:3;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(255,255,255,.22);margin-top:34px}
.hero-stats>*{min-width:0;padding:20px 8px 4px;text-align:center;position:relative}
.hero-stats>*+*::before{content:"";position:absolute;left:0;top:22px;bottom:8px;width:1px;background:rgba(255,255,255,.22)}
.hero-stats .v{font-family:var(--serif);font-size:1.9rem;color:#fff;line-height:1}
.hero-stats .k{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-top:7px}
.hero-grid{display:grid;grid-template-columns:1fr;gap:26px;width:100%;align-items:end}
.hero-grid>*{min-width:0}
.hero h1{color:#fff;font-size:2.5rem;margin-bottom:0}
.hero h1 em.it{display:block;color:var(--or-clair)}
.hero .sous{color:rgba(255,255,255,.8);font-size:1rem;max-width:38ch;margin:0 0 22px}
.hero-act{display:flex;flex-wrap:wrap;gap:12px}
.badge-note{position:absolute;right:20px;top:-52px;z-index:4;box-shadow:0 18px 44px rgba(10,13,18,.45);background:rgba(20,24,30,.5);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(10px);border-radius:4px;padding:16px 20px;color:#fff;width:170px;text-align:center}
.badge-note .st{color:var(--or-clair);letter-spacing:.14em;font-size:.95rem}
.badge-note .n{font-family:var(--serif);font-size:2.1rem;line-height:1.1;margin-top:4px}
.badge-note .c{font-size:.76rem;color:rgba(255,255,255,.66);margin-top:2px}

/* ---------- QUI · COLLAGE SUR PLAN ---------- */
.qui{background:var(--creme)}
.qui-grid{display:grid;grid-template-columns:1fr;gap:44px;align-items:center}
.qui-grid>*{min-width:0}
.collage{position:relative;background-image:var(--plan);background-size:cover;background-position:center;border-radius:4px;padding:34px 26px;min-height:330px}
.collage::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(244,241,236,.28),rgba(244,241,236,.02));border-radius:4px}
.collage-in{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:center}
.collage-in>*{min-width:0}
.collage img{border-radius:3px;box-shadow:0 16px 40px rgba(27,32,40,.22);width:100%;aspect-ratio:4/3;object-fit:cover}
.collage img.tall{aspect-ratio:3/4}
.collage img.dec{margin-top:34px}
.logo-bloc{width:104px;margin:0 0 20px;mix-blend-mode:multiply;opacity:.92}
.chiffres{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:30px;border-top:1px solid #DBD4C7;padding-top:24px}
.chiffres>*{min-width:0}
.chiffres .v{font-family:var(--serif);font-size:2.1rem;line-height:1;color:var(--nuit)}
.chiffres .k{font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gris);margin-top:6px}

/* ---------- SECTIONS SOMBRES ---------- */
.nuit{background:var(--nuit);color:#fff}
.nuit h2{color:#fff}
.nuit .lede{color:var(--gris-clair)}
.miss{display:grid;grid-template-columns:1fr;gap:18px;margin-top:40px}
.miss>*{min-width:0}
.miss article{background:var(--nuit-2);border:1px solid rgba(255,255,255,.07);border-radius:5px;padding:28px 24px;transition:.22s}
.miss article:hover{border-color:rgba(184,150,90,.5);transform:translateY(-3px)}
.miss .num{font-family:var(--serif);font-size:1.5rem;color:var(--or);line-height:1;margin-bottom:16px;display:flex;align-items:center;gap:10px}
.miss .num::after{content:"";flex:1;height:1px;background:rgba(184,150,90,.35)}
.miss h3{color:#fff;margin-bottom:10px;font-size:1.22rem}
.miss p{font-size:.9rem;color:var(--gris-clair);margin:0}

/* ---------- BAREME ---------- */
.bar{background:var(--creme-2)}
.bar-liste{margin-top:38px;border-top:1px solid #D6CEBF}
.bar-l{display:grid;grid-template-columns:1fr;gap:8px;padding:24px 0;border-bottom:1px solid #D6CEBF}
.bar-l>*{min-width:0}
.bar-l h3{font-size:1.35rem}
.bar-l .d{font-size:.88rem;color:var(--gris);margin:6px 0 0}
.bar-l .px{font-family:var(--serif);font-size:2rem;color:var(--or);line-height:1}
.bar-l .px em{display:block;font-style:normal;font-family:var(--sans);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gris);margin-bottom:4px}
.bar-note{margin-top:26px;font-size:.85rem;color:var(--gris);max-width:62ch}

/* ---------- AVANT / APRES ---------- */
.ab-grid{display:grid;grid-template-columns:1fr;gap:34px;margin-top:40px}
.ab-grid>*{min-width:0}
.ab-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ab-pair>*{min-width:0}
.ab-fig{position:relative;margin:0}
.ab-fig img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:3px}
.ab-fig figcaption{position:absolute;top:10px;left:10px;background:rgba(20,24,30,.78);color:#fff;font-size:.62rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;padding:5px 11px;border-radius:999px}
.ab-fig.apres figcaption{background:var(--or)}
.ab-titre{margin-top:14px;font-family:var(--serif);font-size:1.2rem}
.ab-lieu{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--or);font-family:var(--sans);font-weight:600}

/* ---------- NIVEAUX ---------- */
.niv{display:grid;grid-template-columns:1fr;gap:20px;margin-top:40px}
.niv>*{min-width:0}
.niv article{background:var(--nuit-2);border:1px solid rgba(255,255,255,.08);border-radius:5px;padding:32px 26px}
.niv article.or{background:linear-gradient(160deg,#2E2721,#3B3226);border-color:rgba(184,150,90,.45)}
.niv .tag{font-size:.66rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--or);margin-bottom:12px}
.niv h3{color:#fff;margin-bottom:12px;font-size:1.5rem}
.niv>article>p{font-size:.92rem;color:var(--gris-clair)}
.niv ul{list-style:none;margin:18px 0 0;padding:0}
.niv li{font-size:.9rem;color:var(--gris-clair);padding:9px 0 9px 24px;position:relative;border-top:1px solid rgba(255,255,255,.07)}
.niv li::before{content:"";position:absolute;left:0;top:19px;width:11px;height:1px;background:var(--or)}

/* ---------- GALERIE ---------- */
.gal{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:40px}
.gal>*{min-width:0}
.gal figure{margin:0;position:relative;overflow:hidden;border-radius:3px}
.gal img{width:100%;aspect-ratio:1/1;object-fit:cover;transition:transform .5s}
.gal figure:hover img{transform:scale(1.05)}
.gal figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 16px 12px;background:linear-gradient(transparent,rgba(20,24,30,.85));color:#fff;font-family:var(--serif);font-size:1rem}
/* Une photo restee seule sur la derniere ligne prend toute la largeur, quel que soit le nombre de photos (25/09/2026) */
.gal>figure:last-child:nth-child(odd){grid-column:1/-1}
.gal>figure:last-child:nth-child(odd) img{aspect-ratio:2/1}

/* ---------- FAQ ---------- */
.faq{margin-top:40px;border-top:1px solid #D6CEBF}
.faq details{border-bottom:1px solid #D6CEBF}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:18px;padding:22px 0;font-size:1rem;font-weight:500}
.faq summary::-webkit-details-marker{display:none}
.faq summary .n{font-family:var(--serif);font-size:1.05rem;color:var(--or);flex:none;width:26px}
.faq summary .q{flex:1;min-width:0}
.faq summary .p{flex:none;width:34px;height:34px;border:1px solid #C9C1B4;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.95rem;color:var(--gris);transition:.25s}
.faq details[open] summary .p{background:var(--or);border-color:var(--or);color:#fff;transform:rotate(90deg)}
.faq .a{padding:0 0 24px 44px;font-size:.93rem;color:#4A5058;max-width:76ch}

/* ---------- FORMULAIRE ---------- */
.form-grid{display:grid;grid-template-columns:1fr;gap:36px;margin-top:38px}
.form-grid>*{min-width:0}
.coord li{list-style:none;display:flex;gap:12px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.08);font-size:.92rem;color:var(--gris-clair)}
.coord ul{margin:0;padding:0}
.coord .lb{color:var(--or);flex:none;width:22px}
.coord a{color:#fff;text-decoration:none}
form{margin:0}
.f-step{font-size:.64rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--or);margin:0 0 14px}
.f-step+.f-step{margin-top:28px}
fieldset{border:0;margin:0;padding:0}
.chips{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.chips>*{min-width:0}
.chip{display:flex;align-items:center;gap:10px;border:1px solid rgba(255,255,255,.16);background:var(--nuit-2);border-radius:3px;padding:12px 13px;cursor:pointer;font-size:.85rem;color:var(--gris-clair);transition:.16s}
.chip:hover{border-color:rgba(184,150,90,.6);color:#fff}
.chip input{accent-color:var(--or);width:16px;height:16px;margin:0;flex:none}
.chip.on{border-color:var(--or);color:#fff;background:#2C2921}
.row{display:grid;grid-template-columns:1fr;gap:12px;margin-top:14px}
.row>*{min-width:0}
label.fl{display:block;font-size:.72rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--gris-clair);margin-bottom:7px}
input[type=text],input[type=tel],input[type=email],select,textarea{width:100%;font-family:var(--sans);font-size:.93rem;padding:13px 14px;border:1px solid rgba(255,255,255,.16);border-radius:3px;background:var(--nuit-2);color:#fff}
input::placeholder,textarea::placeholder{color:rgba(255,255,255,.32)}
select option{background:var(--nuit-2);color:#fff}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--or)}
textarea{min-height:92px;resize:vertical}
.f-sub{margin-top:24px;display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.f-sub>*{min-width:0}
.f-note{font-size:.76rem;color:rgba(255,255,255,.45);margin:14px 0 0}
.ok{display:none;background:rgba(184,150,90,.14);border:1px solid var(--or);border-radius:3px;padding:15px;margin-top:16px;font-size:.88rem;color:#fff}
.ok.show{display:block}

/* ---------- CAPTURE ---------- */
.capt{background:var(--creme-2)}
.capt-in{display:grid;grid-template-columns:1fr;gap:22px;align-items:center}
.capt-in>*{min-width:0}
.capt form{background:transparent;padding:0}
.cf{display:grid;grid-template-columns:1fr;gap:10px}
.cf>*{min-width:0}
.capt input[type=email]{background:var(--blanc);border-color:#D6CEBF;color:var(--texte)}
.capt input::placeholder{color:#A9A296}
.capt .f-note{color:var(--gris)}
.capt .ok{background:rgba(184,150,90,.12);color:var(--texte)}

/* ---------- FOOTER ---------- */
/* Plus sombre que la section du formulaire, avec un filet dore : depuis le retrait du
   bloc clair « Pas encore prêt ? » (24/09/2026), les deux zones se touchaient sans rien
   pour les separer. */
body>footer{background:#12161C;border-top:1px solid rgba(184,150,90,.45);color:var(--gris-clair);position:relative;overflow:hidden;padding-top:64px;padding-bottom:0}
.f-grid{display:grid;grid-template-columns:1fr;gap:30px;position:relative;z-index:2}
.f-grid>*{min-width:0}
.f-grid .bl{font-family:var(--serif);color:#fff;font-size:1.35rem;margin-bottom:12px}
.f-grid ul{list-style:none;margin:0;padding:0}
.f-grid li{padding:5px 0;font-size:.88rem}
.f-grid a{color:var(--gris-clair);text-decoration:none}
.f-grid a:hover{color:var(--or-clair)}
.f-mark{position:relative;z-index:1;font-family:var(--serif);font-size:14vw;line-height:.8;color:rgba(255,255,255,.05);text-align:center;margin-top:34px;white-space:nowrap;letter-spacing:-.02em}
.f-bot{position:relative;z-index:2;border-top:1px solid rgba(255,255,255,.09);margin-top:18px;padding:16px 0 22px;font-size:.76rem;display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between}
.f-bot>*{min-width:0}
.f-credit a{color:inherit;text-decoration:none;opacity:.75}.f-credit a:hover{opacity:1;color:var(--or-clair)}

/* ============================================================
   MOUVEMENT · tout en CSS + IntersectionObserver, aucune librairie
   Reproductible tel quel dans un theme WordPress custom.
   ============================================================ */

/* ---- rideau d'ouverture ---- */
#rideau{position:fixed;inset:0;z-index:99998;background:var(--nuit);display:flex;align-items:center;justify-content:center;transition:transform 1s cubic-bezier(.76,0,.24,1)}
#rideau .rn{font-family:var(--serif);font-size:clamp(1.6rem,5vw,3rem);color:#fff;opacity:0;letter-spacing:.02em;transform:translateY(14px);transition:opacity .6s ease,transform .8s cubic-bezier(.2,.7,.3,1)}
#rideau .rl{display:block;height:1px;background:var(--or);width:0;margin:16px auto 0;transition:width .9s cubic-bezier(.65,0,.35,1) .15s}
#rideau.go .rn{opacity:1;transform:none}
#rideau.go .rl{width:180px}
#rideau.out{transform:translateY(-101%)}
body.chargement{overflow:hidden}

/* ---- barre de progression de lecture ---- */
#prog{position:fixed;top:0;left:0;height:2px;width:0;background:linear-gradient(90deg,var(--or),var(--or-clair));z-index:99990;transition:width .12s linear}

/* ---- nav compacte au scroll ---- */
.hero-top{transition:transform .45s cubic-bezier(.4,0,.2,1),opacity .35s ease}
.nav-flot{position:fixed;top:14px;left:0;right:0;z-index:9000;transform:translateY(-130%);transition:transform .5s cubic-bezier(.4,0,.2,1)}
.nav-flot.on{transform:none}
.nav-flot .nav-in{background:rgba(20,24,30,.82);border-color:rgba(255,255,255,.14);box-shadow:0 12px 40px rgba(10,13,18,.4)}

/* ---- hero : zoom lent + parallaxe ---- */
.hero-bg img{will-change:transform;transform-origin:52% 48%;animation:zoomlent 26s ease-in-out infinite alternate}
@keyframes zoomlent{from{transform:scale(1.02)}to{transform:scale(1.13)}}
.hero-par{will-change:transform}

/* ---- revelation de titres ligne par ligne ---- */
.ln{display:block;overflow:hidden}
.ln>span{display:block;transform:translateY(105%);transition:transform .95s cubic-bezier(.16,1,.3,1)}
.vu .ln>span,.hero .ln>span{transform:none}
.hero h1 .ln:nth-child(1)>span{transition-delay:.10s}
.hero h1 .ln:nth-child(2)>span{transition-delay:.20s}
.hero h1 .ln:nth-child(3)>span{transition-delay:.30s}
h2 .ln:nth-child(2)>span{transition-delay:.12s}

/* etat initial du hero avant lancement */
body.chargement .hero h1 .ln>span{transform:translateY(105%)}

/* ---- apparitions generiques ---- */
[data-rev]{opacity:0;transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .95s cubic-bezier(.16,1,.3,1),clip-path 1.05s cubic-bezier(.76,0,.24,1)}
[data-rev="up"]{transform:translateY(38px)}
[data-rev="left"]{transform:translateX(-42px)}
[data-rev="right"]{transform:translateX(42px)}
[data-rev="scale"]{transform:scale(.94)}
[data-rev="mask"]{clip-path:inset(0 0 100% 0);opacity:1;transform:none}
[data-rev="maskx"]{clip-path:inset(0 100% 0 0);opacity:1;transform:none}
.vu[data-rev]{opacity:1;transform:none;clip-path:inset(0 0 0 0)}

/* ---- cascade ---- */
.casc>*{opacity:0;transform:translateY(34px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.casc.vu>*{opacity:1;transform:none}
.casc.vu>*:nth-child(1){transition-delay:.05s}
.casc.vu>*:nth-child(2){transition-delay:.14s}
.casc.vu>*:nth-child(3){transition-delay:.23s}
.casc.vu>*:nth-child(4){transition-delay:.32s}
.casc.vu>*:nth-child(5){transition-delay:.41s}
.casc.vu>*:nth-child(6){transition-delay:.50s}

/* ---- hero : entree des blocs ---- */
.hero-droite,.hero-act,.hero-stats,.badge-note{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1)}
body.lance .hero-act{opacity:1;transform:none;transition-delay:.55s}
body.lance .hero-droite{opacity:1;transform:none;transition-delay:.65s}
body.lance .hero-stats{opacity:1;transform:none;transition-delay:.78s}
body.lance .badge-note{opacity:1;transform:none;transition-delay:.9s;animation:flotte 6s ease-in-out 2s infinite}
@keyframes flotte{0%,100%{translate:0 0}50%{translate:0 -9px}}
@keyframes flotte-court{0%,100%{translate:0 0}50%{translate:0 -5px}}

/* ---- bandeau defilant ---- */
.ruban{background:var(--nuit);color:#fff;padding:20px 0;overflow:hidden;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)}
.ruban-piste{display:flex;width:max-content;animation:defile 34s linear infinite}
.ruban:hover .ruban-piste{animation-play-state:paused}
.ruban-piste>span{font-family:var(--serif);font-size:1.5rem;padding:0 30px;white-space:nowrap;display:flex;align-items:center;gap:30px;color:rgba(255,255,255,.88)}
.ruban-piste>span::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--or);flex:none}
@keyframes defile{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---- curseur AVANT / APRES ---- */
.cmp{position:relative;overflow:hidden;border-radius:3px;cursor:ew-resize;user-select:none;touch-action:pan-y;aspect-ratio:4/3;background:var(--nuit-2)}
.cmp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.cmp .av{clip-path:inset(0 calc(100% - var(--x,50%)) 0 0);z-index:2}
.cmp .poignee{position:absolute;top:0;bottom:0;left:var(--x,50%);width:2px;background:rgba(255,255,255,.92);z-index:4;pointer-events:none;box-shadow:0 0 14px rgba(0,0,0,.45)}
.cmp .poignee::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.95);box-shadow:0 6px 22px rgba(0,0,0,.35)}
.cmp .poignee::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;border:2px solid rgba(255,255,255,.55);animation:pulse 2.6s ease-out infinite;z-index:1}
@keyframes pulse{0%{opacity:.9;transform:translate(-50%,-50%) scale(1)}70%,100%{opacity:0;transform:translate(-50%,-50%) scale(1.9)}}
.cmp .fleches{position:absolute;top:50%;left:var(--x,50%);transform:translate(-50%,-50%);z-index:5;pointer-events:none;font-size:.9rem;color:var(--nuit);letter-spacing:2px}
.cmp .et{position:absolute;top:12px;z-index:3;background:rgba(20,24,30,.8);color:#fff;font-size:.6rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;padding:5px 11px;border-radius:999px}
.cmp .et-av{left:12px}
.cmp .et-ap{right:12px;background:var(--or)}
.cmp-note{font-size:.76rem;color:var(--gris);margin:10px 0 0;display:flex;align-items:center;gap:7px}
.cmp-note::before{content:"";width:22px;height:1px;background:var(--or);flex:none}

/* ---- images : leger zoom permanent au survol ---- */
.gal img{will-change:transform}
.collage img{transition:transform .7s cubic-bezier(.16,1,.3,1),box-shadow .5s}
.collage:hover img{transform:translateY(-5px);box-shadow:0 24px 54px rgba(27,32,40,.3)}

/* ---- lignes du bareme ---- */
.bar-l{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.bar-l.vu{opacity:1;transform:none}
.bar-l .px{transition:color .4s}
.bar-l:hover .px{color:var(--or-clair)}

/* ---- filigrane du footer qui derive ---- */
.f-mark{will-change:transform}

/* ---- FAQ : ouverture douce ---- */
.faq .a{overflow:hidden}
.faq details[open] .a{animation:deplie .5s cubic-bezier(.16,1,.3,1)}
@keyframes deplie{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ---- boutons : brillance au survol ---- */
.btn{position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);transition:left .65s cubic-bezier(.4,0,.2,1)}
.btn:hover::after{left:130%}
.btn-or:hover,.btn-nuit:hover{transform:translateY(-2px)}
.btn{transition:.25s cubic-bezier(.16,1,.3,1)}

/* ---- cartes missions ---- */
.miss article{will-change:transform}

/* ---- respect du reglage systeme : on coupe tout ---- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  [data-rev],.casc>*,.bar-l,.hero-droite,.hero-act,.hero-stats,.badge-note{opacity:1 !important;transform:none !important;clip-path:none !important}
  .ln>span{transform:none !important}
  #rideau{display:none}
  .hero-bg img{animation:none}
}

@media(max-width:480px){
  .ruban-piste>span{font-size:1.1rem;padding:0 18px;gap:18px}
  .cmp .poignee::after,.cmp .poignee::before{width:38px;height:38px}
}


/* ---------- AVIS GOOGLE ---------- */
.avis-cta{margin-top:40px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.avis-cta .ac-t{margin:0;color:rgba(255,255,255,.82);font-size:1rem}
.avis-cta .ac-s{margin:0;color:rgba(255,255,255,.5);font-size:.82rem}
@media(max-width:560px){.avis-cta .btn{width:100%;max-width:320px}.avis-cta{margin-top:30px}}
.avis-bandeau{display:grid;grid-template-columns:1fr;gap:20px;align-items:center;margin-top:40px;padding:24px 0;border-top:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14)}
.avis-bandeau>*{min-width:0}
.ab-note{display:flex;align-items:center;gap:14px}
.ab-chiffre{font-family:var(--serif);font-size:3.2rem;line-height:1;color:#fff}
.ab-etoiles{display:flex;gap:2px;color:var(--or-clair)}
.ab-txt{margin:0;font-size:.93rem;color:var(--gris-clair);max-width:52ch}

.avis-grid{display:grid;grid-template-columns:1fr;gap:16px;margin-top:38px}
.avis-grid>*{min-width:0}
.av-c{margin:0;background:var(--nuit-2);border:1px solid rgba(255,255,255,.08);border-radius:5px;padding:28px 26px;display:flex;flex-direction:column;transition:border-color .25s,transform .35s}
.av-c:hover{border-color:rgba(184,150,90,.45);transform:translateY(-3px)}
.av-et{display:flex;gap:2px;color:var(--or);margin-bottom:16px}
.av-q{font-size:.92rem;line-height:1.7;color:var(--gris-clair);margin:0 0 20px;flex:1}
.av-q::before{content:"\201C";font-family:var(--serif);font-size:2.4rem;line-height:0;color:var(--or);margin-right:5px;vertical-align:-.35em}
.av-n{font-family:var(--serif);font-size:1.12rem;color:#fff;margin-top:auto;padding-top:16px;border-top:1px solid rgba(255,255,255,.08)}
.av-n span{display:block;font-family:var(--sans);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--or);margin-top:5px}

/* Avis longs : replies a 5 lignes, « Lire la suite » pour deplier (25/09/2026).
   Le texte complet reste dans la page, mot pour mot. La classe .replie n'est
   posee que par main.js : sans JavaScript, tout le texte s'affiche. */
.av-q.replie{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;line-clamp:5;overflow:hidden;flex:0 0 auto}
.av-plus{align-self:flex-start;margin:-10px 0 20px;padding:0;border:0;background:none;cursor:pointer;
  font:inherit;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--or)}
.av-plus:hover{text-decoration:underline;text-underline-offset:3px}
.av-plus:focus-visible{outline:2px solid var(--or);outline-offset:3px}
.av-fort{background:linear-gradient(160deg,#2E2721,#3B3226);border-color:rgba(184,150,90,.4)}
.av-fort .av-q{font-family:var(--serif);font-size:1.32rem;line-height:1.45;color:#fff}
.av-fort .av-q::before{font-size:3rem}

@media(min-width:701px){
  .avis-grid{grid-template-columns:1fr 1fr}
  .av-fort{grid-column:span 2}
  .avis-bandeau{grid-template-columns:auto 1fr auto;gap:32px}
}
@media(min-width:961px){
  .avis-grid{grid-template-columns:repeat(3,1fr)}
  .av-fort{grid-column:span 3}
  .av-fort .av-q{font-size:1.55rem;max-width:46ch}
}
@media(max-width:480px){
  .ab-chiffre{font-size:2.4rem}
  .av-fort .av-q{font-size:1.12rem}
  .av-c{padding:22px 20px}
}

/* ---------- PORTFOLIO CLIQUABLE + PLEIN ECRAN ---------- */
.gal figure{cursor:zoom-in}
.gal figure::after{content:"";position:absolute;top:12px;right:12px;width:38px;height:38px;border-radius:50%;background:rgba(20,24,30,.55);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.28);opacity:0;transform:scale(.85);transition:opacity .3s,transform .3s;z-index:3}
.gal figure .loupe{position:absolute;top:12px;right:12px;width:38px;height:38px;display:flex;align-items:center;justify-content:center;color:#fff;opacity:0;transform:scale(.85);transition:opacity .3s,transform .3s;z-index:4;pointer-events:none}
.gal figure:hover::after,.gal figure:hover .loupe,.gal figure:focus-visible::after,.gal figure:focus-visible .loupe{opacity:1;transform:none}
.gal figure:focus-visible{outline:2px solid var(--or);outline-offset:3px}

#lb{position:fixed;inset:0;z-index:99995;background:rgba(12,15,20,.96);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s}
#lb.on{opacity:1;visibility:visible}
#lb .lb-scene{position:relative;z-index:1;width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:64px 68px 96px}
#lb img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:3px;box-shadow:0 30px 90px rgba(0,0,0,.6);transform:scale(.94);opacity:0;transition:transform .45s cubic-bezier(.16,1,.3,1),opacity .35s ease}
#lb.on img{transform:none;opacity:1}
#lb.glisse img{transition:none}
#lb .lb-cap{position:absolute;z-index:2;pointer-events:none;left:0;right:0;bottom:34px;text-align:center;color:#fff;font-family:var(--serif);font-size:1.25rem;padding:0 20px}
#lb .lb-cap small{display:block;font-family:var(--sans);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--or);margin-top:7px}
#lb button{position:absolute;z-index:3;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.22);color:#fff;width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.22s;backdrop-filter:blur(6px);padding:0}
#lb button:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.4)}
#lb .lb-x{top:22px;right:22px}
#lb .lb-p{left:22px;top:50%;transform:translateY(-50%)}
#lb .lb-s{right:22px;top:50%;transform:translateY(-50%)}
#lb .lb-n{position:absolute;z-index:2;pointer-events:none;top:30px;left:26px;color:rgba(255,255,255,.5);font-size:.76rem;letter-spacing:.16em}
body.lb-ouvert{overflow:hidden}

@media(max-width:700px){
  #lb .lb-scene{padding:70px 12px 110px}
  #lb .lb-p{left:12px;top:auto;bottom:34px;transform:none}
  #lb .lb-s{right:12px;top:auto;bottom:34px;transform:none}
  #lb .lb-cap{bottom:44px;font-size:1rem;padding:0 74px}
  #lb button{width:44px;height:44px}
}
@media (prefers-reduced-motion: reduce){
  #lb,#lb img{transition:none}
}

/* ---------- MENU REPLIE (BURGER) · obligatoire des que la nav se masque ---------- */
.burger{display:none;flex-direction:column;flex:none;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.24);cursor:pointer;padding:0;align-items:center;justify-content:center;transition:.22s;backdrop-filter:blur(6px)}
.burger:hover{background:rgba(255,255,255,.2)}
.burger span{display:block;width:18px;height:2px;background:#fff;border-radius:2px;transition:transform .3s cubic-bezier(.16,1,.3,1),opacity .2s}
.burger span+span{margin-top:4px}
.burger span:nth-child(2){width:13px;align-self:flex-start;margin-left:13px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}

.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

#menu{position:fixed;inset:0;z-index:9500;background:var(--nuit);display:flex;flex-direction:column;padding:18px 24px 28px;overflow-y:auto;-webkit-overflow-scrolling:touch;opacity:0;visibility:hidden;transform:translateY(-12px);transition:opacity .38s cubic-bezier(.16,1,.3,1),transform .45s cubic-bezier(.16,1,.3,1),visibility .38s}
#menu .m-tete{display:flex;align-items:center;justify-content:space-between;gap:16px;flex:none;position:relative;z-index:2}
#menu .m-tete>*{min-width:0}
#menu.on{opacity:1;visibility:visible;transform:none}
#menu::before{content:"";position:absolute;top:-140px;right:-160px;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle,rgba(184,150,90,.16),transparent 68%);pointer-events:none}
#menu .m-x{flex:none;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.22);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:.22s}
#menu .m-x:hover{background:rgba(255,255,255,.2)}
#menu .m-marque{font-family:var(--serif);font-size:1.2rem;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#menu nav{display:flex;flex-direction:column;position:relative;margin:auto 0;padding:14px 0;flex:none}
#menu nav a{font-family:var(--serif);font-size:clamp(1.5rem,6.6vw,2.3rem);color:#fff;text-decoration:none;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.09);display:flex;align-items:baseline;gap:14px;opacity:0;transform:translateY(18px);transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .55s cubic-bezier(.16,1,.3,1),color .2s}
#menu nav a::before{content:attr(data-n);font-family:var(--sans);font-size:.62rem;font-weight:600;letter-spacing:.16em;color:var(--or);flex:none}
#menu nav a:hover{color:var(--or-clair)}
/* La cascade porte sur les ENFANTS DIRECTS du menu (liens et blocs de sous-menu),
   sinon l'ajout d'un sous-menu decale tout le comptage. */
#menu nav>*{opacity:0;transform:translateY(18px);transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .55s cubic-bezier(.16,1,.3,1)}
#menu.on nav>*{opacity:1;transform:none}
#menu nav .m-sous a{opacity:1;transform:none;transition-delay:0s}
#menu.on nav>*:nth-child(1){transition-delay:.10s}
#menu.on nav>*:nth-child(2){transition-delay:.16s}
#menu.on nav>*:nth-child(3){transition-delay:.22s}
#menu.on nav>*:nth-child(4){transition-delay:.28s}
#menu.on nav>*:nth-child(5){transition-delay:.34s}
#menu.on nav>*:nth-child(6){transition-delay:.40s}
#menu.on nav>*:nth-child(7){transition-delay:.46s}
#menu.on nav>*:nth-child(8){transition-delay:.52s}
#menu.on nav>*:nth-child(9){transition-delay:.58s}
#menu.on nav>*:nth-child(10){transition-delay:.64s}
#menu.on nav>*:nth-child(11){transition-delay:.70s}
#menu.on nav>*:nth-child(12){transition-delay:.76s}

/* Sous-menu dans le menu plein ecran : les liens sont listes sous leur parent. */
#menu .m-sous{display:flex;flex-direction:column;padding:2px 0 12px 32px}
#menu .m-sous a{font-family:var(--sans);font-size:1rem;font-weight:400;letter-spacing:.01em;color:rgba(255,255,255,.72);padding:8px 0;border-bottom:0;gap:9px}
#menu .m-sous a::before{content:"—";font-family:var(--sans);font-size:.78rem;font-weight:400;letter-spacing:0;color:var(--or);opacity:.85}
#menu .m-sous a:hover{color:var(--or-clair)}
#menu .m-bas{position:relative;flex:none;margin-top:8px;display:flex;flex-direction:column;gap:12px;opacity:0;transform:translateY(16px);transition:opacity .5s ease .46s,transform .5s cubic-bezier(.16,1,.3,1) .46s}
#menu.on .m-bas{opacity:1;transform:none}
#menu .m-bas .btn{width:100%}
#menu .m-tel{font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gris-clair);text-align:center;text-decoration:none}
#menu .m-tel strong{display:block;font-family:var(--serif);font-size:1.4rem;letter-spacing:0;text-transform:none;color:#fff;margin-top:3px}
body.menu-ouvert{overflow:hidden}

@media(max-width:960px){
  .burger{display:flex}
  .nav-in .btn{display:none}
}

/* La classe « serre » est posee par le JavaScript quand la barre ne tient plus,
   quel que soit l'ecran : c'est le NOMBRE d'entrees du menu qui la declenche.
   Meme resultat que sous 960 px, le menu passe dans le burger. */
.nav-in.serre nav.main{display:none}
.nav-in.serre .btn{display:none}
.nav-in.serre .burger{display:flex}
@media (prefers-reduced-motion: reduce){
  #menu,#menu nav a,#menu .m-bas,.burger span{transition:none}
  #menu nav a,#menu .m-bas{opacity:1;transform:none}
}

/* ---------- BARRE DU HAUT EN PETIT ECRAN ---------- */
.nav-in .ct{display:none}

/* ---------- LARGEURS INTERMEDIAIRES : 961 a 1180 px ----------
   Le menu burger n'apparait qu'en dessous de 960 px. Entre les deux, le menu
   complet ET le bouton sont affiches, et la barre deborde des que le menu
   compte plus de cinq entrees : le bouton passe par-dessus la derniere.
   C'est une fenetre qu'on ne regarde jamais spontanement, on verifie en grand
   ecran et sur telephone. Constate ici a 1024 px avec six entrees. */
/* --- Style COMPACT : premier palier quand la place manque ---------------
   Pose par la largeur de fenetre OU par le JavaScript quand le menu compte
   trop d'entrees. Le burger (classe « serre ») n'est que le second palier. */
.nav-in.compact{gap:10px;padding:9px 9px 9px 16px}
.nav-in.compact nav.main{gap:0}
.nav-in.compact nav.main a{padding:9px 9px;font-size:.74rem}
.nav-in.compact nav.main a::before{display:none}   /* le « / » decoratif prend de la place */
.nav-in.compact .btn{padding:0 15px;font-size:.75rem}
.nav-in.compact .btn .ar{display:none}             /* la fleche part, le libelle reste */
.nav-in.compact .brand{font-size:1.05rem}
.nav-in.compact nav.main .sous a{font-size:.8rem}
/* ⛔ NE JAMAIS basculer sur le texte court .ct : il vaut « Menu », alors que ce
   bouton mene au FORMULAIRE. C'est un reste inutilise du theme (le bouton est
   masque sous 520 px, donc il ne s'affichait jamais). Le reveiller affichait
   « Menu » sur un bouton d'appel a l'action. Vu le 16/09/2026.  */

/* La fenetre intermediaire : le burger n'arrive qu'a 960 px, et entre les deux
   la barre deborde des que le menu depasse cinq entrees. */
@media(min-width:961px) and (max-width:1180px){
  .nav-in{gap:10px;padding:9px 9px 9px 16px}
  nav.main{gap:0}
  nav.main a{padding:9px 9px;font-size:.74rem}
  nav.main a::before{display:none}
  .nav-in .btn{padding:0 15px;font-size:.75rem}
  .nav-in .btn .ar{display:none}
  .brand{font-size:1.05rem}
  nav.main .sous a{font-size:.8rem}
}

@media(max-width:520px){
  .nav-in .btn{width:auto;min-height:42px;padding:0 15px;font-size:.8rem;gap:0}
  .nav-in .btn .ar{display:none}
  .nav-in .lg{display:none}
  .nav-in .ct{display:inline}
  .nav-in{padding:7px 7px 7px 15px;gap:10px}
  .brand{font-size:1.05rem}
  .nav-flot{top:10px}
}
@media(max-width:340px){
  .brand{font-size:.95rem}
  .nav-in .btn{padding:0 12px;font-size:.75rem}
}

/* ---------- PICTOGRAMMES SVG · aucun emoji dans un livrable client ---------- */
.ic{width:17px;height:17px;flex:none;display:block}
.coord .lb{display:flex;align-items:center;justify-content:center;color:var(--or);width:22px;padding-top:3px}
.ic-chev{width:30px;height:14px;color:var(--nuit);display:block}
.ic-et{width:13px;height:13px;display:inline-block;vertical-align:-1px;margin-right:1px}
.badge-note .st{display:flex;justify-content:center;gap:1px;color:var(--or-clair);line-height:1}
.ic-ar{width:19px;height:11px;display:block}
.btn .ar{display:flex;align-items:center}
.faq summary .p svg{width:15px;height:15px}
.faq details[open] summary .p{transform:rotate(90deg)}

/* ---------- RESPONSIVE ---------- */

/* Sous 760 px la banniere passe sur une colonne : le badge de note, pose en
   absolu, venait se superposer au titre et le coupait. On le remet dans le
   flux, aligne a droite, juste au-dessus de la barre de chiffres. */
@media(max-width:760px){
  .badge-note{position:static;top:auto;right:auto;width:auto;max-width:190px;margin:24px 0 0 auto}
}

@media(min-width:701px){
  .hero h1{font-size:3.4rem}
  .hero-grid{grid-template-columns:1.5fr .9fr;gap:40px}
  .hero-droite{text-align:right;padding-bottom:6px}
  .hero-droite .sous{margin-left:auto}
  .hero-stats>*{text-align:left;padding-left:26px}
  .hero-stats>*:first-child{padding-left:0}
  h2{font-size:2.5rem}
  .miss{grid-template-columns:1fr 1fr}
  .niv{grid-template-columns:1fr 1fr}
  .ab-grid{grid-template-columns:1fr 1fr}
  .gal{grid-template-columns:repeat(3,1fr)}
  .gal>figure:last-child:nth-child(odd){grid-column:auto}
  .gal>figure:last-child:nth-child(odd) img{aspect-ratio:1/1}
  .gal>figure:last-child:nth-child(3n+1){grid-column:1/-1}
  .gal>figure:last-child:nth-child(3n+1) img{aspect-ratio:3/1}
  .bar-l{grid-template-columns:1fr auto;align-items:center;gap:24px}
  .bar-l .px{text-align:right}
  .capt-in{grid-template-columns:1.2fr 1fr}
  .cf{grid-template-columns:1fr auto}
  .f-grid{grid-template-columns:1.5fr 1fr 1fr}
  .chips{grid-template-columns:repeat(3,1fr)}
  .row.c2{grid-template-columns:1fr 1fr}
  .form-grid{grid-template-columns:.85fr 1.15fr}
}
@media(min-width:961px){
  .wrap{padding:0 40px}
  section{padding-top:100px;padding-bottom:100px}
  .hero{min-height:760px}
  .hero h1{font-size:4.1rem}
  .hero-body{padding-top:140px;padding-bottom:64px}
  .hero-grid{grid-template-columns:1.55fr .8fr;gap:56px}
  .hero-stats .v{font-size:2.3rem}
  h2{font-size:3rem}
  .qui-grid{grid-template-columns:1fr 1fr;gap:64px}
  .miss{grid-template-columns:repeat(4,1fr)}
  .ab-grid{grid-template-columns:repeat(3,1fr)}
  .row.c3{grid-template-columns:repeat(3,1fr)}
  .collage{padding:44px 38px;min-height:430px}
}
@media(max-width:960px){
  nav.main{display:none}
}
@media(max-width:480px){
  section{padding-top:52px;padding-bottom:52px}
  .hero{min-height:600px}
  .hero h1{font-size:2.1rem}
  .hero-body{padding-top:96px;padding-bottom:40px}
  h2{font-size:1.75rem}
  .btn{width:100%}
  .nav-in .btn{width:auto}
  .nav-in{padding:8px 8px 8px 18px}
  .brand{font-size:1.15rem}
  body.lance .badge-note{animation-name:flotte-court}
  .badge-note{position:static;width:auto;align-self:flex-start;margin:22px 0 16px;padding:9px 16px 9px 14px;border-radius:999px;text-align:left;
    display:inline-grid;grid-template-columns:auto auto;grid-template-areas:"n st" "n c";align-items:center;gap:0 11px}
  .badge-note .n{grid-area:n;font-size:1.55rem;margin-top:0;line-height:1}
  .badge-note .st{grid-area:st;align-self:end}
  .badge-note .st svg{width:11px;height:11px}
  .badge-note .c{grid-area:c;align-self:start;font-size:.68rem;margin-top:1px}
  .hero-stats .v{font-size:1.4rem}
  .hero-stats .k{font-size:.58rem;letter-spacing:.1em}
  .hero-stats>*{padding:14px 4px 2px}
  nav.main a::before{display:none}
  .chiffres{gap:8px}
  .chiffres .v{font-size:1.6rem}
  .chiffres .k{font-size:.62rem}
  .bar-l h3{font-size:1.15rem}
  .bar-l .px{font-size:1.6rem}
  .gal{grid-template-columns:1fr 1fr}
  .faq .a{padding-left:0}
  .f-mark{font-size:13vw}
}

/* =========================================================================
   PAGE PROJET (gabarit page-projet.php) — carrousel + recit
   Le defilement est natif (scroll-snap) : le glissement au doigt marche
   meme sans JavaScript. Les fleches et les points sont un confort ajoute.
   ========================================================================= */
.pj h1{font-size:clamp(2rem,5vw,3rem);margin:0 0 18px}
.pj-accroche{max-width:62ch;color:var(--gris);font-size:1.12rem;margin:0 0 38px}

.pj-carrousel{position:relative;margin:0 0 48px}
.pj-piste{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;border-radius:14px}
.pj-piste::-webkit-scrollbar{display:none}
.pj-piste:focus-visible{outline:2px solid var(--or);outline-offset:4px}
.pj-vue{flex:0 0 100%;scroll-snap-align:center;margin:0;position:relative}
/* contain et non cover (25/09/2026) : une photo en hauteur etait coupee de moitie.
   Elle s'affiche maintenant en entier, sur le fond creme. */
.pj-vue img{width:100%;aspect-ratio:3/2;object-fit:contain;border-radius:14px;background:var(--creme-2)}
.pj-vue figcaption{position:absolute;left:0;right:0;bottom:0;padding:38px 18px 14px;
  color:#fff;font-size:.9rem;border-radius:0 0 14px 14px;
  background:linear-gradient(to top,rgba(27,32,40,.78),rgba(27,32,40,0))}

.pj-fl{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;
  display:none;place-items:center;border:0;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.92);color:var(--nuit);box-shadow:0 2px 10px rgba(27,32,40,.18);transition:.2s}
.pj-fl svg{width:20px;height:20px}
.pj-fl:hover{background:#fff}
.pj-fl:disabled{opacity:.3;cursor:default}
.pj-prec{left:12px} .pj-suiv{right:12px}
.pj-carrousel.actif .pj-fl{display:grid}

/* Compteur « 3 / 16 » et bande de vignettes : ajoutes par main.js (25/09/2026).
   ⚠️ Les largeurs 34 / 96 / 4 px sont reprises dans main.js (REPLIEE, DEPLIEE, ECART). */
.pj-compteur{position:absolute;top:14px;left:50%;transform:translateX(-50%);margin:0;padding:4px 12px;
  border-radius:999px;background:rgba(27,32,40,.6);color:#fff;font-size:.8rem;letter-spacing:.04em;
  pointer-events:none;display:none}
.pj-carrousel.actif .pj-compteur{display:block}
.pj-vignettes{display:flex;gap:4px;height:64px;margin-top:14px;padding:3px;overflow-x:auto;scrollbar-width:none}
.pj-vignettes[hidden]{display:none}
.pj-vignettes::-webkit-scrollbar{display:none}
.pj-vignettes button{flex:0 0 34px;height:100%;padding:0;border:0;border-radius:6px;overflow:hidden;cursor:pointer;
  background:var(--creme-2);opacity:.55;transition:flex-basis .3s ease-out,opacity .3s}
.pj-vignettes button:hover{opacity:.85}
.pj-vignettes button[aria-current="true"]{flex-basis:96px;opacity:1;outline:2px solid var(--or);outline-offset:1px}
.pj-vignettes button:focus-visible{outline:2px solid var(--nuit);outline-offset:1px}
.pj-vignettes img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}

.pj-bloc{margin:0 0 40px;max-width:68ch}
.pj-bloc h2{font-size:1.7rem;margin:0 0 16px}
.pj-partis{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.pj-partis li{padding-left:22px;position:relative}
.pj-partis li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;
  border:1px solid var(--or);transform:rotate(45deg)}
.pj-partis strong{display:block;font-weight:600}
.pj-partis span{color:var(--gris)}
.pj-fin{color:var(--gris)}
.pj-retour{margin-top:48px}

/* La photo du portfolio qui mene a une page est un LIEN, pas une photo a
   agrandir : curseur main, aucun rond de loupe, et « Voir le projet » dit ou
   l'on va (25/09/2026). */
.gal-lien{display:block;color:inherit;text-decoration:none}
.gal figure.gal-projet{cursor:pointer}
.gal figure.gal-projet::after{display:none}
.gal-voir{display:block;margin-top:4px;font-family:var(--sans,inherit);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--or)}
.gal-lien:focus-visible{outline:2px solid var(--or);outline-offset:3px}

@media (max-width:700px){
  .pj-vue img{aspect-ratio:1/1}
  .pj-fl{width:38px;height:38px}
  .pj-prec{left:6px} .pj-suiv{right:6px}
}
@media (prefers-reduced-motion:reduce){
  .pj-piste{scroll-behavior:auto}
  .pj-vignettes button{transition:none}
}

/* ---------- RETOUR EN HAUT DE PAGE ----------
   z-index 8900 : SOUS la barre flottante (9000), le menu plein ecran (9500) et la
   visionneuse photo (99995), pour ne jamais passer par-dessus. Visible par defaut :
   il ne se cache qu'une fois le JavaScript charge (classe .haut-js). */
.haut{position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:8900;width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--nuit);color:var(--or-clair);border:1px solid rgba(184,150,90,.7);box-shadow:0 8px 24px rgba(12,15,20,.35);text-decoration:none;transition:opacity .3s,visibility .3s,transform .3s,background .2s,color .2s}
.haut svg{width:19px;height:19px;display:block}
.haut:hover{background:var(--or);color:var(--nuit)}
.haut:focus-visible{outline:2px solid var(--or);outline-offset:3px}
.haut-js .haut:not(.vu){opacity:0;visibility:hidden;transform:translateY(12px)}
@media(max-width:480px){.haut{right:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));width:44px;height:44px}}
@media (prefers-reduced-motion:reduce){.haut{transition:none}.haut-js .haut:not(.vu){transform:none}}
/* 1.9.4 (05/10/2026) : en bas de page, le bouton cachait la fin de la derniere
   ligne du pied de page sur telephone. Le bas du pied de page
   s'arrete donc a gauche du bouton, avec 10 px d'air : bouton a 66 px du bord
   (58 px sous 480 px), marge de la page 20 px (40 px des 961 px). Au-dela de
   1300 px, la marge de la page suffit seule : rendu valide inchange. */
@media (max-width:1299px){.f-bot{padding-right:56px}}
/* La ligne retrecie coupait « Creation / ProAgilys » : les deux mots restent ensemble. */
.f-credit a{white-space:nowrap}

/* ---------- RESEAUX SOCIAUX DU PIED DE PAGE (1.7.1, 28/09/2026) ----------
   Discrets : trait dore pale, icone gris clair, or au survol. Cible de 40 px
   pour le doigt. Le selecteur .f-grid est repete pour passer devant
   « .f-grid li » et « .f-grid a », declares plus haut. */
.f-grid .f-reseaux{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0;padding:0;list-style:none}
.f-grid .f-reseaux li{padding:0}
.f-grid .f-reseaux a{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;border:1px solid rgba(184,150,90,.45);color:var(--gris-clair);transition:color .2s,border-color .2s,background .2s}
.f-grid .f-reseaux a:hover{color:var(--or-clair);border-color:var(--or-clair);background:rgba(184,150,90,.08)}
.f-grid .f-reseaux a:focus-visible{outline:2px solid var(--or);outline-offset:3px}
.f-reseaux svg{width:17px;height:17px;display:block}
@media (prefers-reduced-motion:reduce){.f-grid .f-reseaux a{transition:none}}

/* =========================================================================
   PAGE PROJET : AVANT / APRES (1.8.0)
   Sous l'Accroche. Meme curseur que l'ancienne
   rubrique de l'accueil (.cmp, pilote par main.js). Absent sans photos.
   ========================================================================= */
.pj-ab{display:grid;grid-template-columns:1fr;gap:30px;margin:0 0 48px}
.pj-ab{max-width:680px}
.pj-ab-plus{max-width:none}
.pj-ab>*{min-width:0}
.pj-ab .cmp{border-radius:14px}
@media (min-width:760px){ .pj-ab-plus{grid-template-columns:1fr 1fr} }

/* « Mon approche » sur fond creme (1.8.0) : elle suit desormais les
   realisations, passees en sombre, pour garder l'alternance. Cartes claires ;
   la carte mise en avant garde son fond brun dore et son texte blanc. */
.niv-clair .niv article:not(.or){background:#fff;border-color:rgba(42,47,54,.1)}
.niv-clair .niv article:not(.or) h3{color:var(--texte)}
.niv-clair .niv article:not(.or)>p,.niv-clair .niv article:not(.or) li{color:var(--gris)}
.niv-clair .niv article:not(.or) li{border-top-color:rgba(42,47,54,.08)}
.niv-clair .lede{color:var(--gris)}

/* ================= ARTICLES (1.9.0, 30/09/2026) =================
   Liste (home.php) et article seul (single.php), sur fond creme comme les
   pages projet ; le pied de page sombre suit, l'alternance est gardee. */
.art-grille{display:grid;grid-template-columns:1fr;gap:34px;margin-top:34px}
@media (min-width:761px){ .art-grille{grid-template-columns:1fr 1fr;gap:40px 30px} }
.art-carte{min-width:0}
.art-lien{display:block;color:inherit;text-decoration:none}
.art-img{overflow:hidden;border-radius:14px;background:var(--creme);margin-bottom:18px}
.art-img img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .6s}
.art-lien:hover .art-img img{transform:scale(1.04)}
.art-date{font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gris);margin:0 0 8px}
.art-carte h2{font-family:var(--serif);font-weight:400;font-size:1.75rem;line-height:1.15;margin:0 0 10px;transition:color .2s}
.art-lien:hover h2{color:var(--or)}
.art-extrait{color:var(--gris);margin:0 0 14px}
.art-lire{display:inline-flex;align-items:center;gap:8px;font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--or)}
.art-lire .ar{display:flex;transition:transform .2s}
.art-lien:hover .art-lire .ar{transform:translateX(4px)}
.art-lire svg{width:18px;height:auto}
.art-pages{margin-top:48px}
.art-pages .nav-links{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.art-pages .page-numbers{display:inline-flex;align-items:center;min-width:40px;height:40px;padding:0 14px;border:1px solid #C9C1B4;border-radius:999px;text-decoration:none;font-size:.88rem}
.art-pages .page-numbers.current{background:var(--nuit);border-color:var(--nuit);color:#fff}
.art-pages a.page-numbers:hover{border-color:var(--or);color:var(--or)}
.art-pages .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

.art .art-date{margin-top:-6px}
.art-une{margin:30px 0 36px}
.art-une img{width:100%;border-radius:14px}
.art-contenu{font-size:1.05rem;line-height:1.75;overflow-wrap:anywhere}
.art-contenu table{display:block;max-width:100%;overflow-x:auto}
.art-contenu iframe,.art-contenu video{max-width:100%}
.art-contenu>*{max-width:68ch}
.art-contenu h2{font-family:var(--serif);font-weight:400;font-size:1.9rem;line-height:1.15;margin:44px 0 14px}
.art-contenu h3{font-family:var(--serif);font-weight:400;font-size:1.45rem;line-height:1.2;margin:34px 0 10px}
.art-contenu p{margin:0 0 18px}
.art-contenu a{color:var(--or);text-underline-offset:3px}
.art-contenu ul,.art-contenu ol{padding-left:1.3em;margin:0 0 20px}
.art-contenu li{margin:0 0 6px}
.art-contenu li::marker{color:var(--or)}
.art-contenu figure{margin:30px 0;max-width:none}
.art-contenu img{border-radius:10px}
.art-contenu figcaption{font-size:.82rem;color:var(--gris);margin-top:8px}
.art-contenu blockquote{margin:30px 0;padding:4px 0 4px 22px;border-left:2px solid var(--or);font-family:var(--serif);font-size:1.4rem;line-height:1.35}
.art-contenu blockquote p{margin:0 0 8px}
.art-contenu blockquote cite{display:block;font-family:var(--sans);font-size:.8rem;font-style:normal;color:var(--gris)}
.art-contenu hr{border:0;border-top:1px solid #D8D0C3;margin:40px 0}
.art-contenu .wp-block-image.aligncenter,.art-contenu .aligncenter{margin-left:auto;margin-right:auto}
.art-actions{display:flex;flex-wrap:wrap;gap:12px}
.art-vide{margin-top:26px;max-width:60ch;padding:26px 28px;border:1px dashed #C9C1B4;border-radius:14px;color:var(--gris)}
.art-vide p:last-child{margin:18px 0 0}