/* ============================================================
   SHIKARA COSMOS — Feuille de styles globale
   Palette, typographie et motifs issus de l'identité visuelle
   ============================================================ */

:root{
  /* Couleurs de la charte */
  --noir:#000000;
  --blanc:#f5f5f5;
  --cuivre:#b8734c;
  --nuit:#212166;
  --gris:#6b7280;

  /* Nuances de travail */
  --encre:#08080d;
  --encre-2:#101018;
  --encre-3:#16161f;
  --nuit-clair:#2d2d80;
  --cuivre-clair:#d08d63;
  --ligne:rgba(245,245,245,.14);
  --ligne-sombre:rgba(0,0,0,.13);
  --texte-doux:rgba(245,245,245,.68);
  --texte-doux-sombre:#4b5160;

  --display:"Creato Display","Archivo",system-ui,sans-serif;
  --texte:"Creato Display","Manrope",system-ui,sans-serif;

  --marge:clamp(20px,5vw,88px);
  --section:clamp(72px,9vw,148px);
  --max:1440px;
  --entete-h:84px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--noir);color:var(--blanc);
  font-family:var(--texte);font-size:clamp(15px,1.05vw,17px);line-height:1.68;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body.verrouille{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}
figure{margin:0}
::selection{background:var(--cuivre);color:#fff}
:focus-visible{outline:2px solid var(--cuivre);outline-offset:3px}

h1,h2,h3,h4,h5{font-family:var(--display);font-weight:800;letter-spacing:-.025em;line-height:1.04;margin:0}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

.enveloppe{max-width:var(--max);margin-inline:auto;padding-inline:var(--marge)}
.centre{text-align:center}

/* ---------- Éléments signature ---------- */
.surtitre{
  font-family:var(--display);font-size:.72rem;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--cuivre);display:flex;align-items:center;gap:14px;margin:0 0 24px;
}
.surtitre::before{content:"";width:48px;height:2px;background:var(--cuivre);flex:none}
.surtitre.centre-h{justify-content:center}

.bouton{
  display:inline-flex;align-items:center;gap:11px;font-family:var(--display);
  font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:15px 28px;border:1px solid var(--blanc);border-radius:999px;
  transition:background .3s,color .3s,border-color .3s,transform .3s;
}
.bouton:hover{background:var(--blanc);color:var(--noir);transform:translateY(-2px)}
.bouton--cuivre{background:var(--cuivre);border-color:var(--cuivre);color:#fff}
.bouton--cuivre:hover{background:#fff;color:var(--noir);border-color:#fff}
.bouton--sombre{border-color:rgba(0,0,0,.35);color:var(--noir)}
.bouton--sombre:hover{background:var(--noir);color:var(--blanc);border-color:var(--noir)}
.bouton .fleche{transition:transform .3s}
.bouton:hover .fleche{transform:translateX(5px)}

.lien-fleche{
  display:inline-flex;align-items:center;gap:10px;font-family:var(--display);
  font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
}
.lien-fleche svg{transition:transform .3s}
.lien-fleche:hover svg{transform:translateX(5px)}
.lien-fleche:hover{color:var(--cuivre)}

/* ============================ INTRO / PRÉLOADER ============================ */
#intro{
  position:fixed;inset:0;z-index:2000;background:var(--noir);
  display:grid;place-items:center;
}
#intro.parti{opacity:0;visibility:hidden;transition:opacity .8s ease,visibility .8s}
.intro-logo{display:flex;flex-direction:column;align-items:center;gap:22px}
.intro-logo .symbole{width:clamp(88px,12vw,132px);color:var(--blanc);animation:introSymbole 1.5s cubic-bezier(.2,.8,.2,1) both}
.intro-logo .lettrage{width:clamp(170px,22vw,260px);color:var(--blanc);
  clip-path:inset(0 100% 0 0);animation:introMot .9s .55s cubic-bezier(.6,0,.2,1) forwards}
.intro-barre{width:min(220px,42vw);height:1px;background:var(--ligne);position:relative;overflow:hidden;margin-top:8px}
.intro-barre i{position:absolute;inset:0;background:var(--cuivre);transform-origin:left;transform:scaleX(0);animation:introBarre 1.8s .2s cubic-bezier(.5,0,.2,1) forwards}
@keyframes introSymbole{
  0%{opacity:0;transform:scale(.55) rotate(-38deg)}
  60%{opacity:1}
  100%{opacity:1;transform:scale(1) rotate(0)}
}
@keyframes introMot{to{clip-path:inset(0 0 0 0)}}
@keyframes introBarre{to{transform:scaleX(1)}}

/* Voile de transition entre les pages */
#voile{
  position:fixed;inset:0;z-index:1500;background:var(--noir);pointer-events:none;
  transform:translateY(100%);
}
#voile.sortie{transform:translateY(0);transition:transform .5s cubic-bezier(.6,0,.2,1)}
#voile.entree{transform:translateY(-100%);transition:transform .6s cubic-bezier(.6,0,.2,1)}

/* ============================ EN-TÊTE ============================ */
.entete{
  position:fixed;inset:0 0 auto 0;z-index:1000;padding:20px 0;
  transition:transform .45s cubic-bezier(.6,0,.2,1),background .4s,padding .4s,border-color .4s;
  border-bottom:1px solid transparent;
}
.entete.compacte{background:rgba(4,4,8,.88);backdrop-filter:blur(18px);padding:12px 0;border-bottom-color:var(--ligne)}
.entete.cachee{transform:translateY(-105%)}
.entete .enveloppe{display:flex;align-items:center;justify-content:space-between;gap:24px}

.logo{display:flex;align-items:center;gap:12px;color:var(--blanc)}
.logo .symbole{width:40px;flex:none;transition:transform .6s cubic-bezier(.3,.8,.3,1)}
.logo .lettrage{width:132px;flex:none}
.logo:hover .symbole{transform:rotate(-12deg) scale(1.06)}

.nav{display:flex;align-items:center;gap:clamp(16px,2vw,32px)}
.nav a{
  font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(245,245,245,.78);position:relative;padding:6px 0;transition:color .25s;
}
.nav a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--cuivre);transition:width .3s}
.nav a:hover{color:#fff}
.nav a:hover::after,.nav a.actif::after{width:100%}
.nav a.actif{color:#fff}

.burger{display:none;padding:10px;margin-right:-10px}
.burger span{display:block;width:26px;height:2px;background:var(--blanc);margin:5px 0;transition:.32s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ============================ HÉROS ACCUEIL ============================ */
.heros{position:relative;min-height:100svh;display:flex;align-items:flex-end;padding:150px 0 clamp(40px,6vw,72px);overflow:hidden}
.heros-fond{position:absolute;inset:0;z-index:0}
.heros-fond img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);will-change:transform}
.heros-fond::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.94) 6%,rgba(0,0,0,.55) 45%,rgba(0,0,0,.72) 100%);
}
.arc{position:absolute;left:50%;bottom:-62%;width:min(178vw,2200px);transform:translateX(-50%);z-index:1;pointer-events:none}
.arc .trait{fill:none;stroke:rgba(245,245,245,.35);stroke-width:1.1}
.heros .enveloppe{position:relative;z-index:2;width:100%}
.heros h1{font-size:clamp(2.6rem,6.6vw,6.1rem);max-width:16ch;letter-spacing:-.035em;line-height:.99}
.heros h1 .fin{display:block;color:var(--cuivre)}
.heros .accroche{margin:28px 0 38px;max-width:56ch;font-size:clamp(1rem,1.25vw,1.2rem);color:var(--texte-doux);font-weight:300}
.heros-actions{display:flex;flex-wrap:wrap;gap:14px}

/* Mots révélés ligne par ligne */
.ligne{display:block;overflow:hidden}
.ligne > span{display:block;transform:translateY(105%);transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.pret .ligne > span{transform:none}
.pret .ligne:nth-child(2) > span{transition-delay:.12s}

/* Bandeau défilant */
.bandeau{position:relative;z-index:2;margin-top:clamp(40px,6vw,74px);border-top:1px solid var(--ligne);border-bottom:1px solid var(--ligne);padding:18px 0;overflow:hidden}
.bandeau-piste{display:flex;width:max-content;margin:0;padding:0;animation:defile 44s linear infinite}
.bandeau-piste li{
  list-style:none;display:flex;align-items:center;gap:clamp(24px,3.2vw,52px);padding-right:clamp(24px,3.2vw,52px);
  font-family:var(--display);font-size:.78rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(245,245,245,.6);white-space:nowrap;
}
.bandeau-piste li::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--cuivre)}
@keyframes defile{to{transform:translateX(-50%)}}

.defilement{position:absolute;right:var(--marge);bottom:clamp(40px,6vw,72px);z-index:3;display:flex;align-items:center;gap:12px;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(245,245,245,.5)}
.defilement i{display:block;width:1px;height:54px;background:linear-gradient(var(--cuivre),transparent);animation:pulse 2.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.3;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}}

/* ============================ HÉROS PAGES INTÉRIEURES ============================ */
.heros-page{position:relative;padding:calc(var(--entete-h) + clamp(70px,10vw,140px)) 0 clamp(50px,7vw,110px);overflow:hidden;border-bottom:1px solid var(--ligne)}
.heros-page-fond{position:absolute;inset:0;z-index:0}
.heros-page-fond img{width:100%;height:100%;object-fit:cover;opacity:.42;transform:scale(1.06)}
.heros-page-fond::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.95),rgba(0,0,0,.55))}
.heros-page .enveloppe{position:relative;z-index:2}
.heros-page h1{font-size:clamp(2.2rem,5.4vw,4.6rem);max-width:18ch}
.heros-page .intro{margin-top:24px;max-width:60ch;color:var(--texte-doux);font-size:clamp(1rem,1.2vw,1.15rem);font-weight:300}
.fil{display:flex;gap:10px;align-items:center;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(245,245,245,.5);margin-bottom:22px}
.fil a:hover{color:var(--cuivre)}

/* ============================ BLOCS ============================ */
.bloc{padding:var(--section) 0;position:relative}
.bloc--clair{background:var(--blanc);color:var(--noir)}
.bloc--nuit{background:var(--nuit)}
.bloc--encre{background:var(--encre-2)}
.bloc--serre{padding-block:clamp(52px,6vw,96px)}
.bloc--clair p{color:var(--texte-doux-sombre)}
.bloc--clair .surtitre{color:var(--cuivre)}

.entete-bloc{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:28px;margin-bottom:clamp(36px,4.6vw,64px)}
.entete-bloc h2{font-size:clamp(1.9rem,4.2vw,3.6rem);max-width:17ch}
.entete-bloc .aparte{margin:0;max-width:40ch;color:var(--texte-doux)}
.bloc--clair .entete-bloc .aparte{color:var(--texte-doux-sombre)}

/* Manifeste */
.manifeste{display:grid;gap:clamp(28px,4vw,60px)}
.manifeste .grand{font-family:var(--display);font-weight:500;font-size:clamp(1.45rem,3vw,2.8rem);line-height:1.18;letter-spacing:-.025em;max-width:24ch;color:inherit}
.manifeste .grand em{font-style:normal;color:var(--cuivre)}
.colonnes{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(22px,3vw,50px)}
.colonnes h4{font-size:1.02rem;margin-bottom:10px}
.colonnes p{max-width:44ch;font-size:.96rem}

/* Duo texte / image */
.duo-media{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:clamp(30px,5vw,80px);align-items:center}
.duo-media.inverse .visuel{order:-1}
.visuel{position:relative;overflow:hidden}
.visuel img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.visuel:hover img{transform:scale(1.05)}
.visuel--haut{aspect-ratio:4/5}
.visuel--large{aspect-ratio:16/10}
.visuel .etiquette{
  position:absolute;left:0;bottom:0;padding:14px 20px;background:rgba(0,0,0,.62);backdrop-filter:blur(6px);
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--blanc);
}

/* Chiffres */
.chiffres{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:clamp(24px,3vw,46px)}
.chiffre{border-top:1px solid var(--ligne);padding-top:20px}
.bloc--clair .chiffre{border-top-color:var(--ligne-sombre)}
.chiffre .valeur{font-family:var(--display);font-weight:800;font-size:clamp(2.2rem,4.6vw,3.9rem);line-height:1;letter-spacing:-.045em;display:flex;align-items:baseline;gap:2px}
.chiffre .valeur small{font-size:.42em;font-weight:700}
.chiffre p{margin:12px 0 0;font-size:.85rem;color:var(--texte-doux);max-width:22ch}
.bloc--clair .chiffre p{color:#525869}

/* Grille expertises */
.grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(285px,1fr));gap:1px;background:var(--ligne)}
.carte{position:relative;background:var(--noir);padding:clamp(28px,3vw,44px);min-height:290px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;transition:background .45s}
.bloc--clair .grille{background:var(--ligne-sombre)}
.bloc--clair .carte{background:var(--blanc)}
.bloc--clair .carte:hover{background:#ececec}
.carte::before{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--cuivre);transform:scaleX(0);transform-origin:left;transition:transform .5s}
.carte:hover{background:var(--encre-2)}
.carte:hover::before{transform:scaleX(1)}
.carte .index{font-family:var(--display);font-size:.72rem;letter-spacing:.2em;color:var(--cuivre);font-weight:700}
.carte h3{font-size:clamp(1.2rem,1.6vw,1.55rem);margin:24px 0 12px}
.carte p{font-size:.94rem;color:var(--texte-doux)}
.bloc--clair .carte p{color:var(--texte-doux-sombre)}
.carte .glyphe{position:absolute;right:-38px;bottom:-54px;width:180px;opacity:.05;transition:opacity .5s,transform .6s;pointer-events:none;color:currentColor}
.carte:hover .glyphe{opacity:.13;transform:translate(-8px,-10px) rotate(-8deg)}
.carte .lien-fleche{margin-top:26px}

/* Étapes */
.etapes{display:grid;grid-template-columns:repeat(auto-fit,minmax(225px,1fr));gap:1px;background:rgba(245,245,245,.18)}
.etape{background:var(--nuit);padding:clamp(26px,3vw,40px)}
.etape .temps{font-family:var(--display);font-size:.72rem;font-weight:700;letter-spacing:.2em;color:var(--cuivre-clair);display:block;margin-bottom:22px}
.etape h3{font-size:1.25rem;margin-bottom:11px}
.etape p{font-size:.93rem;color:rgba(245,245,245,.74)}

/* Accordéon */
.accordeon{border-top:1px solid var(--ligne)}
.bloc--clair .accordeon{border-top-color:var(--ligne-sombre)}
.item{border-bottom:1px solid var(--ligne)}
.bloc--clair .item{border-bottom-color:var(--ligne-sombre)}
.item-tete{width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:26px 0;text-align:left}
.item-tete h3{font-size:clamp(1.05rem,1.8vw,1.5rem);font-weight:700}
.item-tete .plus{position:relative;width:20px;height:20px;flex:none}
.item-tete .plus::before,.item-tete .plus::after{content:"";position:absolute;background:var(--cuivre);transition:transform .35s}
.item-tete .plus::before{left:0;top:9px;width:20px;height:2px}
.item-tete .plus::after{left:9px;top:0;width:2px;height:20px}
.item.ouvert .plus::after{transform:scaleY(0)}
.item-corps{max-height:0;overflow:hidden;transition:max-height .5s cubic-bezier(.4,0,.2,1)}
.item-corps-int{padding:0 0 30px;max-width:74ch;color:var(--texte-doux)}
.bloc--clair .item-corps-int{color:var(--texte-doux-sombre)}
.item-corps-int ul{margin:14px 0 0;padding-left:18px}
.item-corps-int li{margin-bottom:7px}

/* Citation */
.citation{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(30px,5vw,80px);align-items:center}
.citation blockquote{margin:0;font-family:var(--display);font-weight:500;font-size:clamp(1.3rem,2.6vw,2.4rem);line-height:1.2;letter-spacing:-.025em}
.citation blockquote span{color:var(--cuivre)}
.signature{margin-top:28px;display:flex;align-items:center;gap:16px}
.signature .barre{width:44px;height:2px;background:var(--cuivre);flex:none}
.signature p{margin:0;font-size:.85rem;color:var(--texte-doux)}
.signature strong{display:block;color:var(--blanc);font-family:var(--display)}

/* Galerie / réalisations */
.galerie{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:14px}
.galerie figure{position:relative;overflow:hidden;cursor:zoom-in;background:var(--encre-2)}
.galerie img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform 1s cubic-bezier(.2,.8,.2,1),opacity .4s}
.galerie figure:hover img{transform:scale(1.06)}
.galerie figcaption{position:absolute;left:0;right:0;bottom:0;padding:16px 18px;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;background:linear-gradient(to top,rgba(0,0,0,.8),transparent);color:var(--blanc)}
.galerie .large{grid-column:span 2}

/* Visionneuse */
#visionneuse{position:fixed;inset:0;z-index:1800;background:rgba(0,0,0,.95);display:grid;place-items:center;padding:40px;opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
#visionneuse.ouverte{opacity:1;visibility:visible}
#visionneuse img{max-width:min(1200px,92vw);max-height:82vh;object-fit:contain}
#visionneuse .fermer{position:absolute;top:22px;right:26px;font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--blanc)}
#visionneuse .legende{position:absolute;bottom:28px;left:0;right:0;text-align:center;font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--texte-doux)}

/* Actualités */
.actus{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(22px,2.6vw,38px)}
.actu{display:flex;flex-direction:column}
.actu .vignette{aspect-ratio:16/10;overflow:hidden;margin-bottom:20px;background:var(--encre-2)}
.actu .vignette img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.actu:hover .vignette img{transform:scale(1.06)}
.actu .date{font-size:.73rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cuivre);font-weight:600}
.actu h3{font-size:1.14rem;margin:12px 0 10px;line-height:1.28;transition:color .3s}
.actu:hover h3{color:var(--cuivre)}
.actu p{font-size:.93rem;color:var(--texte-doux)}
.bloc--clair .actu p{color:var(--texte-doux-sombre)}

/* Bande d'appel */
.bande{background:var(--cuivre);color:#fff;padding:clamp(48px,6vw,80px) 0}
.bande .enveloppe{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px}
.bande h2{font-size:clamp(1.6rem,3.2vw,2.9rem);max-width:18ch}
.bande p{margin:12px 0 0;max-width:46ch;color:rgba(255,255,255,.9)}
.bande .bouton{border-color:#fff;color:#fff}
.bande .bouton:hover{background:#fff;color:var(--cuivre)}

/* Postes */
.postes{display:grid;gap:1px;background:var(--ligne)}
.poste{background:var(--noir);padding:clamp(24px,2.6vw,34px);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;transition:background .35s}
.poste:hover{background:var(--encre-2)}
.poste h3{font-size:1.15rem;margin-bottom:8px}
.poste .meta{display:flex;flex-wrap:wrap;gap:16px;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--texte-doux)}
.poste .meta span::before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--cuivre);margin-right:9px;vertical-align:middle}

/* ============================ FORMULAIRES ============================ */
.contact-grille{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(34px,5vw,84px)}
.formulaire{display:grid;gap:20px}
.champ{display:flex;flex-direction:column;gap:8px}
.champ label{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(245,245,245,.62)}
.champ input,.champ textarea,.champ select{
  background:transparent;border:0;border-bottom:1px solid var(--ligne);color:var(--blanc);
  font:inherit;padding:12px 2px;transition:border-color .3s;border-radius:0;
}
.champ select option{background:var(--encre);color:var(--blanc)}
.champ input:focus,.champ textarea:focus,.champ select:focus{outline:none;border-bottom-color:var(--cuivre)}
.champ textarea{resize:vertical;min-height:120px}
.champ.erreur input,.champ.erreur textarea,.champ.erreur select{border-bottom-color:#e0724a}
.champ .aide{font-size:.76rem;color:rgba(245,245,245,.45)}
.champ .message-erreur{font-size:.78rem;color:#e0724a}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.pot-de-miel{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.consentement{display:flex;gap:12px;align-items:flex-start;font-size:.84rem;color:var(--texte-doux)}
.consentement input{width:18px;height:18px;accent-color:var(--cuivre);margin-top:3px;flex:none}
.captcha{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.captcha .question{font-family:var(--display);font-weight:700;font-size:1.02rem;letter-spacing:.02em}
.captcha input{max-width:120px}

.alerte{padding:18px 22px;border-left:3px solid var(--cuivre);background:rgba(184,115,76,.12);font-size:.94rem}
.alerte--ok{border-color:#3fa66e;background:rgba(63,166,110,.13)}
.alerte--ko{border-color:#e0724a;background:rgba(224,114,74,.13)}

.coordonnees{display:grid;gap:28px;align-content:start}
.coordonnee{border-top:1px solid var(--ligne);padding-top:18px}
.coordonnee h4{font-size:.73rem;letter-spacing:.18em;text-transform:uppercase;color:var(--cuivre);margin-bottom:10px;font-weight:700}
.coordonnee p{font-size:1.01rem;line-height:1.6}
.coordonnee a:hover{color:var(--cuivre)}
.carte-plan{margin-top:6px;border:1px solid var(--ligne);aspect-ratio:16/10;filter:grayscale(1) contrast(1.05) brightness(.85);transition:filter .5s}
.carte-plan:hover{filter:grayscale(0) brightness(1)}
.carte-plan iframe{width:100%;height:100%;border:0;display:block}

/* ============================ PIED DE PAGE ============================ */
.pied{background:var(--noir);border-top:1px solid var(--ligne);padding:clamp(54px,6vw,84px) 0 32px}
.pied-haut{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(auto-fit,minmax(145px,1fr));gap:clamp(30px,4vw,60px)}
.pied .logo{margin-bottom:22px}
.pied .baseline{max-width:34ch;color:var(--texte-doux);font-size:.95rem}
.pied h5{font-family:var(--display);font-size:.73rem;letter-spacing:.18em;text-transform:uppercase;color:var(--cuivre);margin:0 0 16px;font-weight:700}
.pied ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.pied ul a{font-size:.92rem;color:rgba(245,245,245,.72)}
.pied ul a:hover{color:var(--blanc)}
.reseaux{display:flex;gap:11px;margin-top:24px}
.reseaux a{width:38px;height:38px;border:1px solid var(--ligne);border-radius:50%;display:grid;place-items:center;transition:.3s}
.reseaux a:hover{background:var(--cuivre);border-color:var(--cuivre);transform:translateY(-3px)}
.pied-bas{margin-top:clamp(40px,5vw,66px);padding-top:22px;border-top:1px solid var(--ligne);display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;font-size:.78rem;color:rgba(245,245,245,.5)}
.pied-bas a:hover{color:var(--blanc)}

/* Bouton retour haut */
#haut{
  position:fixed;right:calc(var(--marge) / 1.6);bottom:26px;z-index:900;width:46px;height:46px;border-radius:50%;
  border:1px solid var(--ligne);background:rgba(4,4,8,.75);backdrop-filter:blur(10px);display:grid;place-items:center;
  opacity:0;visibility:hidden;transform:translateY(12px);transition:.35s;
}
#haut.visible{opacity:1;visibility:visible;transform:none}
#haut:hover{background:var(--cuivre);border-color:var(--cuivre)}

/* Barre de progression de lecture */
#progression{position:fixed;top:0;left:0;height:2px;width:0;background:var(--cuivre);z-index:1100;transition:width .1s linear}

/* Révélations */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .85s cubic-bezier(.2,.7,.2,1),transform .85s cubic-bezier(.2,.7,.2,1)}
.reveal.vu{opacity:1;transform:none}
.reveal.d1{transition-delay:.1s}.reveal.d2{transition-delay:.2s}.reveal.d3{transition-delay:.3s}

/* ============================ RESPONSIVE ============================ */
@media (max-width:1180px){
  .nav{gap:16px}
  .nav a{font-size:.74rem}
  .logo .lettrage{width:112px}
}
@media (max-width:1024px){
  .citation{grid-template-columns:1fr}
  .contact-grille{grid-template-columns:1fr}
  .galerie .large{grid-column:span 1}
}
@media (max-width:880px){
  .burger{display:block}
  .entete .bouton{display:none}
  .nav{
    position:fixed;inset:0;background:rgba(4,4,8,.97);backdrop-filter:blur(20px);
    flex-direction:column;justify-content:center;gap:22px;transform:translateY(-100%);
    transition:transform .5s cubic-bezier(.6,0,.2,1);
  }
  .nav.ouvert{transform:none}
  .nav a{font-size:1.45rem;letter-spacing:-.01em;text-transform:none;font-family:var(--display);font-weight:700;opacity:0;transform:translateY(14px);transition:opacity .4s,transform .4s,color .25s}
  .nav.ouvert a{opacity:1;transform:none}
  .nav.ouvert a:nth-child(1){transition-delay:.08s}
  .nav.ouvert a:nth-child(2){transition-delay:.13s}
  .nav.ouvert a:nth-child(3){transition-delay:.18s}
  .nav.ouvert a:nth-child(4){transition-delay:.23s}
  .nav.ouvert a:nth-child(5){transition-delay:.28s}
  .nav.ouvert a:nth-child(6){transition-delay:.33s}
  .nav.ouvert a:nth-child(7){transition-delay:.38s}
  .heros{align-items:center;padding-top:126px}
  .defilement{display:none}
  .duo{grid-template-columns:1fr}
  .pied-haut{grid-template-columns:1fr 1fr}
  .duo-media.inverse .visuel{order:0}
}
@media (max-width:520px){
  .pied-haut{grid-template-columns:1fr}
  .bande .enveloppe{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
  .ligne > span{transform:none}
}

/* ============================================================
   COMPLÉMENTS — architecture éditoriale du groupe
   (méga-menu, pôles d'activité, valeurs, philosophie,
    audiences, documents, chronologie, pages juridiques)
   ============================================================ */

/* ---------------------------------------------------------
   Méga-menu « Nos activités »
   --------------------------------------------------------- */
.nav-deroulant{position:relative;display:flex;align-items:center}
.nav-tete{display:inline-flex;align-items:center;gap:7px}
.nav-tete .chevron{transition:transform .3s;flex:none}
.nav-deroulant.ouvert .nav-tete .chevron{transform:rotate(180deg)}
.nav-chevron{display:none}

/* Défaut le plus restrictif : le panneau reste masqué tant qu'une règle
   explicite ne l'affiche pas. Si la feuille de styles est incomplète, en
   cache ou partiellement chargée, rien ne peut déborder sur la page. */
.mega{display:none}

@media (min-width:881px){
  .mega{
    display:block;
    position:fixed;left:0;right:0;top:84px;
    background:#06060a;background:rgba(6,6,10,.97);
    -webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);
    border-top:1px solid var(--ligne);border-bottom:1px solid var(--ligne);
    opacity:0;visibility:hidden;transform:translateY(-10px);
    transition:opacity .32s ease,transform .32s cubic-bezier(.2,.8,.2,1),visibility .32s;
    box-shadow:0 30px 60px rgba(0,0,0,.5);
  }
  .entete.compacte .mega{top:68px}
  .nav-deroulant.ouvert .mega{opacity:1;visibility:visible;transform:none}
}
.mega-grille{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.4vw,44px);padding-block:clamp(28px,3vw,44px)}
.mega-colonne h6{
  font-family:var(--display);font-size:.68rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--cuivre);margin:0 0 6px;
}
.mega-colonne .devise{font-size:.8rem;color:rgba(245,245,245,.42);margin:0 0 18px;line-height:1.45;font-style:italic}
.mega-colonne ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.mega-colonne a{
  display:block;padding:8px 10px;margin-left:-10px;border-radius:3px;font-size:.86rem;
  color:rgba(245,245,245,.8);letter-spacing:0;text-transform:none;font-weight:500;transition:.25s;
}
.mega-colonne a::after{display:none}
.mega-colonne a:hover{background:rgba(184,115,76,.14);color:#fff;padding-left:16px}
.mega-pied{
  border-top:1px solid var(--ligne);padding:16px 0;display:flex;flex-wrap:wrap;gap:16px;
  align-items:center;justify-content:space-between;
}
.mega-pied p{margin:0;font-size:.84rem;color:var(--texte-doux);max-width:62ch}
.mega-pied .lien-fleche{font-size:.72rem}

/* ---------------------------------------------------------
   Familles & pôles d'activité
   --------------------------------------------------------- */
.famille-tete{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:clamp(30px,3.6vw,52px)}
.famille-tete h2{font-size:clamp(1.7rem,3.6vw,3rem);max-width:19ch}
.famille-tete .devise{
  margin:0;max-width:34ch;font-family:var(--display);font-style:italic;font-weight:500;
  font-size:clamp(1rem,1.5vw,1.25rem);line-height:1.4;color:var(--cuivre);
}
.bloc--nuit .famille-tete .devise{color:var(--cuivre-clair)}

.poles{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1px;background:var(--ligne)}
.bloc--clair .poles{background:var(--ligne-sombre)}
.pole{
  position:relative;background:var(--noir);padding:clamp(26px,2.8vw,40px);
  display:flex;flex-direction:column;gap:14px;overflow:hidden;transition:background .45s;
}
.bloc--clair .pole{background:var(--blanc)}
.bloc--encre .pole{background:var(--encre-2)}
.bloc--nuit .pole{background:var(--nuit)}
.pole:hover{background:var(--encre-3)}
.bloc--clair .pole:hover{background:#ececec}
.bloc--nuit .pole:hover{background:var(--nuit-clair)}
.pole::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--cuivre);transform:scaleY(0);transform-origin:top;transition:transform .5s}
.pole:hover::before{transform:scaleY(1)}
.pole .numero{font-family:var(--display);font-size:.72rem;font-weight:700;letter-spacing:.2em;color:var(--cuivre)}
.pole h3{font-size:clamp(1.1rem,1.5vw,1.4rem);line-height:1.14}
.pole p{font-size:.93rem;color:var(--texte-doux);margin:0}
.bloc--clair .pole p{color:var(--texte-doux-sombre)}
.pole .glyphe{position:absolute;right:-46px;bottom:-58px;width:170px;opacity:.045;pointer-events:none;transition:opacity .5s,transform .6s}
.pole:hover .glyphe{opacity:.11;transform:translate(-10px,-12px) rotate(-8deg)}

.etiquettes{display:flex;flex-wrap:wrap;gap:7px;margin-top:auto;padding-top:6px}
.etiquettes span{
  font-size:.7rem;letter-spacing:.06em;padding:5px 11px;border-radius:999px;
  border:1px solid var(--ligne);color:rgba(245,245,245,.68);white-space:nowrap;
}
.bloc--clair .etiquettes span{border-color:var(--ligne-sombre);color:#5a6072}

/* ---------------------------------------------------------
   Valeurs (5 piliers)
   --------------------------------------------------------- */
.valeurs{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:1px;background:var(--ligne)}
.bloc--clair .valeurs{background:var(--ligne-sombre)}
.valeur{background:var(--noir);padding:clamp(26px,2.8vw,38px);transition:background .4s}
.bloc--clair .valeur{background:var(--blanc)}
.bloc--encre .valeur{background:var(--encre-2)}
.valeur:hover{background:var(--encre-3)}
.bloc--clair .valeur:hover{background:#ececec}
.valeur .marque{width:34px;height:34px;border:1px solid var(--cuivre);border-radius:50%;display:grid;place-items:center;color:var(--cuivre);font-family:var(--display);font-size:.72rem;font-weight:700;margin-bottom:20px}
.valeur h3{font-size:1.12rem;margin-bottom:10px}
.valeur p{font-size:.92rem;color:var(--texte-doux);margin:0}
.bloc--clair .valeur p{color:var(--texte-doux-sombre)}

/* ---------------------------------------------------------
   Philosophie d'investissement (3 leviers)
   --------------------------------------------------------- */
.leviers{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:clamp(24px,3vw,54px)}
.levier{border-top:2px solid var(--cuivre);padding-top:24px}
.levier .rang{font-family:var(--display);font-size:2.6rem;font-weight:800;letter-spacing:-.05em;line-height:1;color:rgba(245,245,245,.16);display:block;margin-bottom:14px}
.bloc--clair .levier .rang{color:rgba(0,0,0,.13)}
.levier h3{font-size:1.22rem;margin-bottom:12px}
.levier p{font-size:.95rem;color:var(--texte-doux);margin:0}
.bloc--clair .levier p{color:var(--texte-doux-sombre)}

/* ---------------------------------------------------------
   Audiences — « Vous êtes… »
   --------------------------------------------------------- */
.audiences{display:grid;gap:1px;background:var(--ligne)}
.bloc--clair .audiences{background:var(--ligne-sombre)}
.audience{
  background:var(--noir);padding:clamp(22px,2.4vw,32px) clamp(20px,2.4vw,34px);
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr) auto;
  align-items:center;gap:clamp(16px,2.4vw,40px);transition:background .35s;
}
.bloc--clair .audience{background:var(--blanc)}
.bloc--encre .audience{background:var(--encre-2)}
.audience:hover{background:var(--encre-3)}
.bloc--clair .audience:hover{background:#ececec}
.audience h3{font-size:1.08rem}
.audience p{margin:0;font-size:.92rem;color:var(--texte-doux)}
.bloc--clair .audience p{color:var(--texte-doux-sombre)}
.audience .fleche-ronde{
  width:44px;height:44px;border:1px solid var(--ligne);border-radius:50%;display:grid;place-items:center;
  flex:none;transition:.35s;color:inherit;
}
.bloc--clair .audience .fleche-ronde{border-color:var(--ligne-sombre)}
.audience:hover .fleche-ronde{background:var(--cuivre);border-color:var(--cuivre);color:#fff;transform:translateX(4px)}

/* ---------------------------------------------------------
   Chronologie
   --------------------------------------------------------- */
.chrono{display:grid;gap:0;border-left:1px solid var(--ligne);margin-left:6px}
.bloc--clair .chrono{border-left-color:var(--ligne-sombre)}
.jalon{position:relative;padding:0 0 clamp(30px,3.4vw,46px) clamp(26px,3vw,44px)}
.jalon:last-child{padding-bottom:0}
.jalon::before{content:"";position:absolute;left:-5px;top:7px;width:9px;height:9px;border-radius:50%;background:var(--cuivre)}
.jalon .date{font-family:var(--display);font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--cuivre);display:block;margin-bottom:10px}
.jalon h3{font-size:1.14rem;margin-bottom:9px}
.jalon p{font-size:.94rem;color:var(--texte-doux);margin:0;max-width:62ch}
.bloc--clair .jalon p{color:var(--texte-doux-sombre)}

/* ---------------------------------------------------------
   Documents à télécharger
   --------------------------------------------------------- */
.docs{display:grid;gap:1px;background:var(--ligne)}
.bloc--clair .docs{background:var(--ligne-sombre)}
.doc{
  background:var(--noir);padding:clamp(20px,2.2vw,28px) clamp(20px,2.4vw,32px);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;transition:background .35s;
}
.bloc--clair .doc{background:var(--blanc)}
.bloc--encre .doc{background:var(--encre-2)}
.doc:hover{background:var(--encre-3)}
.bloc--clair .doc:hover{background:#ececec}
.doc h3{font-size:1.02rem;margin-bottom:6px}
.doc .format{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--texte-doux)}
.bloc--clair .doc .format{color:#5a6072}
.doc .format em{font-style:normal;color:var(--cuivre)}

/* ---------------------------------------------------------
   Encadré / note
   --------------------------------------------------------- */
.encadre{
  border-left:2px solid var(--cuivre);padding:22px 26px;background:rgba(184,115,76,.09);
  font-size:.95rem;color:var(--texte-doux);
}
.bloc--clair .encadre{background:rgba(184,115,76,.09);color:var(--texte-doux-sombre)}
.encadre strong{color:inherit;font-family:var(--display)}

/* Liste à puces cuivrées */
.liste-puces{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:11px}
.liste-puces li{position:relative;padding-left:24px;font-size:.96rem;color:var(--texte-doux)}
.bloc--clair .liste-puces li{color:var(--texte-doux-sombre)}
.liste-puces li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:1px;background:var(--cuivre)}
.liste-puces--2{grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:11px clamp(22px,3vw,48px)}

/* ---------------------------------------------------------
   Pages juridiques
   --------------------------------------------------------- */
.juridique{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:clamp(30px,5vw,80px);align-items:start}
.sommaire{position:sticky;top:calc(var(--entete-h) + 24px);border-top:1px solid var(--ligne);padding-top:20px}
.sommaire h4{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--cuivre);margin-bottom:16px;font-weight:700}
.sommaire ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.sommaire a{font-size:.9rem;color:var(--texte-doux);transition:.25s}
.sommaire a:hover{color:var(--cuivre)}
.texte-legal h2{font-size:clamp(1.3rem,2.2vw,1.85rem);margin:0 0 18px}
.texte-legal section{padding-bottom:clamp(38px,4.4vw,62px);margin-bottom:clamp(38px,4.4vw,62px);border-bottom:1px solid var(--ligne)}
.texte-legal section:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.texte-legal p,.texte-legal li{color:var(--texte-doux);font-size:.97rem}
.texte-legal h3{font-size:1.05rem;margin:26px 0 10px}
.texte-legal ul{padding-left:18px;margin:0}
.texte-legal li{margin-bottom:8px}
.texte-legal a{color:var(--cuivre)}
.texte-legal a:hover{text-decoration:underline}

/* ---------------------------------------------------------
   Contacts par département
   --------------------------------------------------------- */
.departements{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:var(--ligne)}
.departement{background:var(--noir);padding:clamp(22px,2.4vw,32px)}
.bloc--encre .departement{background:var(--encre-2)}
.departement h4{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--cuivre);margin-bottom:12px;font-weight:700}
.departement p{font-size:.95rem;margin:0;color:var(--texte-doux)}
.departement a:hover{color:var(--cuivre)}

/* ---------------------------------------------------------
   Ajustements responsive des compléments
   --------------------------------------------------------- */
@media (max-width:1180px){
  .mega-grille{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1024px){
  .juridique{grid-template-columns:1fr}
  .sommaire{position:static}
}
@media (max-width:880px){
  .mega{
    position:static;opacity:1;visibility:visible;transform:none;background:none;
    border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;
    display:none;padding:0;
  }
  .nav-deroulant.ouvert .mega{display:block}
  .nav-deroulant{flex-direction:column;align-items:center;width:100%}
  .mega .enveloppe{padding-inline:0}
  .mega-grille{grid-template-columns:1fr;gap:18px;padding-block:14px;max-height:46svh;overflow-y:auto}
  .mega-colonne h6{font-size:.62rem;margin-bottom:8px}
  .mega-colonne .devise{display:none}
  .mega-colonne a{font-size:.95rem;padding:6px 0;margin-left:0;text-align:center}
  .mega-colonne a:hover{padding-left:0;background:none}
  .mega-pied{display:none}
  .nav-chevron{
    display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--ligne);
    border-radius:50%;margin-top:10px;transition:.3s;
  }
  .nav-deroulant.ouvert .nav-chevron{background:var(--cuivre);border-color:var(--cuivre);transform:rotate(180deg)}
  .nav-tete .chevron{display:none}
  .audience{grid-template-columns:1fr;gap:12px}
  .audience .fleche-ronde{display:none}
}

/* ---------------------------------------------------------
   Palette de marque (médiathèque)
   --------------------------------------------------------- */
.palette{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1px;background:var(--ligne)}
.bloc--clair .palette{background:var(--ligne-sombre)}
.teinte{background:var(--noir);padding:0}
.bloc--clair .teinte{background:var(--blanc)}
.teinte .aplat{height:120px;border-bottom:1px solid var(--ligne-sombre)}
.teinte .infos{padding:18px 20px 22px}
.teinte h4{font-size:.95rem;margin-bottom:8px}
.teinte p{margin:0;font-size:.78rem;letter-spacing:.08em;color:var(--texte-doux);line-height:1.7}
.bloc--clair .teinte p{color:#5a6072}

.typo{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:clamp(24px,3vw,54px)}
.typo .demo{font-family:var(--display);font-weight:800;font-size:clamp(3rem,7vw,5.4rem);line-height:1;letter-spacing:-.045em;margin-bottom:14px}

/* Mentions à compléter par le client avant mise en ligne */
.a-completer{
  display:inline-block;padding:1px 8px;border:1px dashed var(--cuivre);border-radius:3px;
  font-size:.85em;color:var(--cuivre);
}

/* Menu mobile : liste plus dense et défilable (7 entrées + sous-menu) */
@media (max-width:880px){
  .nav{
    justify-content:flex-start;gap:16px;overflow-y:auto;
    padding:calc(var(--entete-h) + 28px) 24px 56px;
  }
  .nav a{font-size:1.25rem}
}

/* Ligne juridique du pied de page : passage à la ligne propre */
.pied-legal{display:flex;flex-wrap:wrap;gap:4px 10px;justify-content:flex-end;align-items:center}

@media (max-width:520px){.pied-legal{justify-content:flex-start}}

/* L'enveloppe du méga-menu ne doit pas hériter de la mise en page de l'en-tête */
.mega > .enveloppe{display:block;gap:0}

/* Sous-menu mobile : lecture confortable, défilement porté par le menu lui-même */
@media (max-width:880px){
  .nav .mega-colonne a{font-size:.98rem;line-height:1.5;padding:5px 0}
  .nav .mega-colonne h6{margin-top:10px}
  .mega-grille{max-height:none;overflow:visible}
}

/* Galerie en mosaïque : plus de trous entre les visuels */
.galerie{grid-auto-rows:clamp(170px,16vw,240px)}
.galerie figure{height:100%}
.galerie img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
.galerie .large{grid-column:span 2;grid-row:span 2}
@media (max-width:1024px){
  .galerie .large{grid-column:span 1;grid-row:span 1}
}

/* ============================================================
   COMPATIBILITÉ — navigateurs mobiles anciens
   Sur Android WebView et iOS < 14, la propriété raccourcie
   « inset », les unités « svh », « aspect-ratio » et l'espacement
   « gap » en flexbox ne sont pas reconnus : sans les valeurs de
   repli ci-dessous, l'en-tête et le menu se superposent au texte.
   ============================================================ */

/* 1. Positionnement fixe : offsets explicites en plus de « inset » */
#intro,#voile,#visionneuse,.nav,.heros-fond,.heros-fond::after,
.heros-page-fond,.heros-page-fond::after{top:0;right:0;bottom:0;left:0}
.entete{top:0;right:0;left:0;bottom:auto}
.carte::before,.pole::before{}
.pot-de-miel{top:auto}

/* 2. Hauteur du héros : repli en vh avant svh */
.heros{min-height:100vh;min-height:100svh}

/* 3. Flou d'arrière-plan : préfixe WebKit */
.entete.compacte,.mega,#haut,.visuel .etiquette{-webkit-backdrop-filter:blur(18px)}

/* 4. Menu mobile : marges au lieu de « gap » (compatible partout) */
@media (max-width:880px){
  .nav{gap:0}
  .nav > a,.nav-deroulant{margin-bottom:16px}
  .nav > a:last-child{margin-bottom:0}
}

/* 5. Rapports d'image : repli par remplissage proportionnel */
@supports not (aspect-ratio: 1 / 1){
  .visuel--haut,.visuel--large,.actu .vignette,.carte-plan,.galerie figure{
    position:relative;height:0;overflow:hidden;
  }
  .visuel--haut{padding-top:125%}
  .visuel--large{padding-top:62.5%}
  .actu .vignette{padding-top:62.5%}
  .carte-plan{padding-top:62.5%}
  .galerie figure{padding-top:75%}
  .visuel--haut > img,.visuel--large > img,.actu .vignette img,
  .carte-plan iframe,.galerie img{position:absolute;top:0;left:0;width:100%;height:100%}
  .galerie{grid-auto-rows:auto}
  .galerie .large{grid-row:span 1}
}

/* ============================================================
   FIABILITÉ D'AFFICHAGE — appareils et navigateurs anciens
   Les propriétés récentes (inset, svh, backdrop-filter) sont
   ignorées par certains navigateurs mobiles : chaque règle est
   précédée d'un équivalent universellement reconnu.
   ============================================================ */

/* Hauteur du héros : repli sur vh si svh n'est pas reconnu */
.heros{min-height:100vh;min-height:100svh}

/* Colonnes du méga-menu : la devise n'est plus affichée dans le menu */
.mega-colonne h6{margin-bottom:16px}

@media (max-width:880px){
  /* Panneau de navigation plein écran : positionnement explicite,
     fond entièrement opaque (aucun texte de la page ne transparaît),
     et hauteur garantie même sans prise en charge de « inset ». */
  .nav{
    top:0;right:0;bottom:0;left:0;
    width:100%;height:100%;max-height:100%;
    background:#040408;
    -webkit-backdrop-filter:blur(20px);
    -webkit-overflow-scrolling:touch;
    z-index:1200;
  }
  /* Le bouton d'ouverture reste toujours au-dessus du panneau */
  .burger{position:relative;z-index:1300}
  /* Le bouton « haut de page » ne doit pas flotter par-dessus le menu */
  body.verrouille #haut{display:none}
}

/* ============================================================
   LISIBILITÉ MOBILE
   ============================================================ */

/* En-tête compact : fond opaque, pour qu'aucun contenu de la page
   ne transparaisse derrière le logotype et le menu. */
.entete.compacte{background:#040408;-webkit-backdrop-filter:blur(18px)}

/* Ligne juridique : aucun séparateur, uniquement des espaces. Un point
   médian se retrouvait isolé en fin de ligne sur les écrans étroits. */
.pied-legal{gap:8px 20px}

/* Interlignage des titres : 1,04 convient à une ligne unique sur grand
   écran, mais fait se toucher les accents et les jambages dès que le
   titre passe sur deux ou trois lignes sur téléphone. */
@media (max-width:880px){
  main h1, main h2, .heros h1, .heros-page h1,
  .entete-bloc h2, .famille-tete h2, .bande h2{line-height:1.14}

  main h3, main h4, main h5,
  .pole h3, .valeur h3, .actu h3, .audience h3, .doc h3, .jalon h3,
  .etape h3, .poste h3, .carte h3, .levier h3, .coordonnee h4,
  .departement h4, .colonnes h4, .teinte h4{line-height:1.3}

  .mega-colonne h6{line-height:1.5}
  .surtitre{line-height:1.6}
  .devise{line-height:1.5}
}

/* Ancres : le titre visé ne doit pas passer sous l'en-tête fixe */
[id]{scroll-margin-top:calc(var(--entete-h) + 24px)}