/* JBH-ACTULINE — Proposition B (structure d'inspiration Beryl Consulting)
   Couleurs de la plaquette : bleu logo #0000FF, bleu royal #3366FF, bleu nuit #002060,
   gris argent #C0C0C0, bleu ciel #BDD6EE, cercles #7BA0CE / #A7BFDE */


:root{
  color-scheme:light;
  --bleu:#0000FF;
  --royal:#3366FF;
  --royal-dk:#2450DB;
  --nuit:#002060;
  --nuit-2:#0A2B6E;
  --argent:#C0C0C0;
  --ciel:#BDD6EE;
  --ciel-l:#EEF3FA;
  --cercle:#7BA0CE;
  --cercle-2:#A7BFDE;
  --encre:#1C2433;
  --texte:#3B4454;
  --doux:#6B7486;
  --trait:#DCE3EE;
  --blanc:#FFFFFF;
  --royal-rgb:51,102,255;
  --royal-dk-rgb:36,80,219;
  --nuit-rgb:0,32,96;
  --nuit-2-rgb:10,43,110;
  --bleu-rgb:0,0,255;
  --ciel-rgb:189,214,238;
  --on-dark:#C8D6EC;
  --on-dark-2:#DCE7F7;
  --caps:uppercase;
  --titre:"Montserrat","Segoe UI",Arial,sans-serif;
  --corps:"Roboto","Segoe UI",Arial,sans-serif;
  --wrap:1170px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font:400 16px/1.7 var(--corps);color:var(--texte);background:var(--blanc)}
img{max-width:100%;display:block}
a{color:var(--royal-dk);text-decoration:none}
a:hover{color:var(--bleu)}
h1,h2,h3,h4{font-family:var(--titre);color:var(--encre);margin:0;line-height:1.25;text-wrap:balance}
p{margin:0}
:focus-visible{outline:3px solid var(--royal);outline-offset:3px}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:20px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Titres de section centrés, en capitales (signature Beryl) */
.sec{padding-block:90px;scroll-margin-top:64px}
.sec--tint{background:var(--ciel-l)}
.sec__head{text-align:center;display:grid;gap:12px;justify-items:center;margin-bottom:52px}
.sec__head h2{font-size:clamp(1.6rem,2.8vw,2.1rem);font-weight:700;text-transform:var(--caps);letter-spacing:.04em;color:var(--nuit)}
.sec__head h2::after{content:"";display:block;width:64px;height:3px;background:var(--royal);margin:16px auto 0}
.sec__head p{font-size:1.1rem;color:var(--doux);max-width:62ch}
.sec__head--light h2{color:#fff}.sec__head--light h2::after{background:var(--ciel)}.sec__head--light p{color:var(--ciel)}

/* Boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:600 .82rem/1 var(--titre);text-transform:var(--caps);letter-spacing:.08em;padding:15px 24px;border:2px solid transparent;border-radius:2px;cursor:pointer;transition:background .2s,color .2s,border-color .2s;white-space:nowrap}
.btn svg{width:17px;height:17px}
.btn--primary{background:var(--royal);color:#fff}
.btn--primary:hover{background:var(--bleu);color:#fff}
.btn--line{border-color:var(--royal);color:var(--royal-dk);background:transparent}
.btn--line:hover{background:var(--royal);color:#fff}
.btn--white{background:#fff;color:var(--nuit)}
.btn--white:hover{background:var(--ciel);color:var(--nuit)}
.btn--ghost{border-color:rgba(255,255,255,.75);color:#fff}
.btn--ghost:hover{background:#fff;color:var(--nuit)}
.tag{display:inline-block;background:#fff;color:var(--nuit);font:700 .74rem/1 var(--titre);text-transform:var(--caps);letter-spacing:.1em;padding:9px 14px;border-radius:2px}

/* En-tête : bandeau blanc + barre de menu bleue */
.brandbar{background:#fff}
.brandbar .wrap{display:flex;align-items:center;gap:28px;min-height:92px}
.brandbar img{height:62px;width:auto;border-radius:2px}
.brandbar__line{font:500 1.02rem/1.35 var(--titre);color:var(--cercle);border-left:1px solid var(--trait);padding-left:26px;max-width:36ch}
.brandbar__contact{margin-left:auto;display:grid;gap:4px;font-size:.88rem;text-align:right}
.brandbar__contact a{color:var(--texte);display:inline-flex;align-items:center;gap:8px;justify-content:flex-end}
.brandbar__contact a:hover{color:var(--royal-dk)}
.brandbar__contact svg{width:15px;height:15px;color:var(--royal)}
.navbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--royal);box-shadow:0 6px 18px -12px rgba(var(--nuit-rgb),.6)}
.navbar .wrap{display:flex;align-items:center;min-height:56px;gap:8px}
.navbar ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap}
.navbar a{display:block;padding:19px 13px;font:600 .78rem/1 var(--titre);text-transform:var(--caps);letter-spacing:.06em;color:#fff;border-bottom:3px solid transparent}
.navbar a:hover{background:rgba(var(--nuit-rgb),.25);color:#fff}
.navbar a.is-active{border-bottom-color:#fff;background:rgba(var(--nuit-rgb),.25)}
.navbar__right{margin-left:auto;display:flex;gap:6px;align-items:center}
.navbar .navbar__icon{display:grid;place-items:center;width:34px;height:34px;padding:0;background:#fff;color:var(--royal);border-radius:2px;border:0}
.navbar__icon svg{width:18px;height:18px}
.navbar .navbar__icon:hover{background:var(--ciel);color:var(--nuit)}
.burger{display:none;background:none;border:0;color:#fff;padding:10px;cursor:pointer;align-items:center;gap:10px;font:600 .8rem var(--titre);text-transform:var(--caps);letter-spacing:.08em}
.burger svg{width:24px;height:24px}

/* Accueil : grande photo + 4 tuiles superposées */
.hero{position:relative;overflow:hidden;background:var(--nuit);color:#fff;isolation:isolate}
.hero__bg{position:absolute;inset:-60px 0 0;z-index:-2;will-change:transform}
.hero__img{position:absolute;inset:0;background:center 40%/cover no-repeat}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,rgba(var(--nuit-rgb),.94) 0%,rgba(var(--nuit-rgb),.78) 45%,rgba(var(--royal-rgb),.35) 100%)}
.hero .wrap{position:relative;padding-block:110px 170px;display:grid;gap:24px;justify-items:start}
.hero h1{color:#fff;font-size:clamp(1.8rem,3.6vw,2.7rem);font-weight:700;text-transform:var(--caps);letter-spacing:.02em;max-width:24ch;line-height:1.22}
.hero p{font-size:1.12rem;color:var(--on-dark-2);max-width:58ch}
.hero__actions{display:flex;gap:12px;flex-wrap:wrap}
.hero .rings{position:absolute;right:-80px;top:-60px;width:420px;height:420px;opacity:.22;pointer-events:none}
.rings span{position:absolute;border-radius:50%;inset:0;border:26px solid var(--cercle-2)}
.rings span:nth-child(2){inset:14%;border-color:var(--argent)}
.rings span:nth-child(3){inset:28%;border-color:var(--cercle)}
.tiles{position:relative;z-index:2;margin-top:-110px}
.tiles .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:2px}
.tile{background:rgba(var(--royal-rgb),.93);color:#fff;padding:30px 22px 26px;display:grid;justify-items:center;gap:14px;text-align:center;transition:background .2s,transform .2s}
.tile:nth-child(2){background:rgba(var(--royal-dk-rgb),.95)}
.tile:nth-child(3){background:rgba(var(--nuit-2-rgb),.95)}
.tile:nth-child(4){background:rgba(var(--nuit-rgb),.97)}
.tile:hover{background:var(--bleu);color:#fff;transform:translateY(-4px)}
.tile__ico{width:66px;height:66px;border-radius:50%;border:2px solid rgba(255,255,255,.8);display:grid;place-items:center}
.tile__ico svg{width:30px;height:30px}
.tile b{font:700 .84rem/1.35 var(--titre);text-transform:var(--caps);letter-spacing:.05em}
.tile small{font-size:.86rem;color:var(--on-dark-2);line-height:1.45}

/* À propos */
.about{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:start}
.about__text{display:grid;gap:16px}
.about__text .lead{font-size:1.14rem;color:var(--encre)}
.vmv{display:grid;gap:14px}
.vmv__item{display:grid;grid-template-columns:52px 1fr;gap:16px;padding:22px;background:#fff;border:1px solid var(--trait);border-top:3px solid var(--royal)}
.vmv__item:nth-child(2){border-top-color:var(--nuit)}
.vmv__item:nth-child(3){border-top-color:var(--cercle)}
.vmv__ico{width:52px;height:52px;border-radius:50%;background:var(--ciel);color:var(--nuit);display:grid;place-items:center}
.vmv__ico svg{width:24px;height:24px}
.vmv h3{font-size:.9rem;text-transform:var(--caps);letter-spacing:.08em;color:var(--nuit);margin-bottom:6px}
.vmv p,.vmv li{font-size:.95rem}
.vmv ul{margin:0;padding-left:18px;display:grid;gap:4px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);margin-top:64px;border:1px solid var(--trait);background:#fff}
.stat{padding:28px 22px;text-align:center;border-left:1px solid var(--trait);display:grid;gap:6px}
.stat:first-child{border-left:0}
.stat b{font:800 2.6rem/1 var(--titre);color:var(--royal);font-variant-numeric:tabular-nums}
.stat > span{font-size:.9rem;color:var(--doux);line-height:1.45}

/* Expertise : onglets */
.xtabs{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:2px solid var(--trait)}
.xtab{background:none;border:0;border-bottom:3px solid transparent;margin-bottom:-2px;padding:18px 14px;cursor:pointer;display:flex;gap:12px;align-items:center;text-align:left;font:700 .8rem/1.35 var(--titre);text-transform:var(--caps);letter-spacing:.04em;color:var(--doux)}
.xtab svg{width:26px;height:26px;flex:none;color:var(--cercle)}
.xtab:hover{color:var(--nuit)}
.xtab[aria-selected="true"]{color:var(--nuit);border-bottom-color:var(--royal)}
.xtab[aria-selected="true"] svg{color:var(--royal)}
.xpanel{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;padding-top:40px;align-items:start}
.xpanel h3{font-size:1.45rem;color:var(--nuit);margin-bottom:14px}
.xpanel p{font-size:1.05rem}
.xpanel .btn{margin-top:22px}
.checks{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.checks li{display:grid;grid-template-columns:22px 1fr;gap:10px;line-height:1.5}
.checks svg{width:18px;height:18px;margin-top:4px;color:var(--royal)}
.xpanel .checks{background:var(--ciel-l);padding:28px;border-left:4px solid var(--royal)}
.domains{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:64px}
.domain{border:1px solid var(--trait);padding:24px;background:#fff}
.domain h4{font-size:.86rem;text-transform:var(--caps);letter-spacing:.07em;color:var(--nuit);margin-bottom:12px}
.domain ul{margin:0;padding-left:18px;display:grid;gap:6px;font-size:.93rem}

/* Équipe */
.member__photo img{width:100%;height:100%;object-fit:cover;object-position:top}
.member h3 span{text-transform:var(--caps)}
.member__role{font:600 .78rem var(--titre);text-transform:var(--caps);letter-spacing:.08em;color:var(--royal-dk)}
.partners{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:56px}
.partner{display:grid;gap:8px;padding:26px;background:var(--ciel-l);border-left:4px solid var(--cercle)}
.partner small{font:700 .72rem var(--titre);text-transform:var(--caps);letter-spacing:.1em;color:var(--royal-dk)}
.partner h3{font-size:1.05rem;color:var(--nuit)}
.partner address{font-style:normal;font-size:.9rem;color:var(--doux)}

/* Secteurs : bande bleu nuit */
.sectors{background:var(--nuit);color:#fff;position:relative;overflow:hidden}
.sectors .rings{position:absolute;left:-140px;bottom:-160px;width:420px;height:420px;opacity:.12;pointer-events:none}
.sectors__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;position:relative}
.sector{background:rgba(255,255,255,.06);border:1px solid rgba(var(--ciel-rgb),.22);padding:26px 18px;display:grid;gap:12px;justify-items:center;text-align:center;align-content:start;color:#fff;transition:background .2s,border-color .2s}
.sector:hover{background:rgba(var(--royal-rgb),.35);border-color:var(--ciel);color:#fff}
.sector__ico{width:60px;height:60px;border-radius:50%;background:var(--royal);display:grid;place-items:center}
.sector__ico svg{width:28px;height:28px}
.sector b{font:700 .82rem/1.35 var(--titre);text-transform:var(--caps);letter-spacing:.05em}
.sector small{font-size:.86rem;color:var(--ciel);line-height:1.5}
.sector-detail{margin-top:34px;background:#fff;color:var(--texte);padding:34px;display:grid;grid-template-columns:1fr 1fr;gap:36px;position:relative}
.sector-detail h3{font-size:1.25rem;color:var(--nuit);margin-bottom:10px}
.sector-detail .btn{margin-top:18px}

/* Missions */
.filters{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:30px}
.fbtn{padding:10px 16px;border:1px solid var(--trait);background:#fff;cursor:pointer;font:600 .74rem/1 var(--titre);text-transform:var(--caps);letter-spacing:.06em;color:var(--texte);border-radius:2px}
.fbtn:hover{border-color:var(--royal);color:var(--royal-dk)}
.fbtn[aria-pressed="true"]{background:var(--nuit);border-color:var(--nuit);color:#fff}
.fbtn em{font-style:normal;opacity:.6;margin-left:4px}
.mlist{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.mrow{display:grid;grid-template-columns:88px 1fr;gap:20px;background:#fff;border:1px solid var(--trait);padding:22px}
.mrow__year{font:800 1.7rem/1 var(--titre);color:var(--royal);font-variant-numeric:tabular-nums}
.mrow__year small{display:block;font:500 .72rem/1.4 var(--corps);color:var(--doux);margin-top:8px}
.mrow__body{display:grid;gap:6px}
.mrow__client{font:700 .72rem/1.45 var(--titre);text-transform:var(--caps);letter-spacing:.05em;color:var(--royal-dk)}
.mrow h3{font-size:1rem;color:var(--nuit)}
.mrow p{font-size:.92rem}
.mrow__dom{justify-self:start;font:600 .7rem var(--titre);text-transform:var(--caps);letter-spacing:.06em;background:var(--ciel-l);color:var(--nuit);padding:5px 9px}
.more{text-align:center;margin-top:30px}

/* Références : grille de logos */
.logos{display:grid;grid-template-columns:repeat(6,1fr);border-top:1px solid var(--trait);border-left:1px solid var(--trait)}
.logo{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:118px;padding:16px;border-right:1px solid var(--trait);border-bottom:1px solid var(--trait);background:#fff;text-align:center;transition:background .2s}
.logo:hover{background:var(--ciel-l)}
.logo img{max-height:62px;max-width:100%;width:auto;object-fit:contain;filter:grayscale(1);opacity:.8;transition:filter .2s,opacity .2s}
.logo:hover img{filter:none;opacity:1}
.logo span{font:700 .82rem/1.3 var(--titre);color:var(--nuit)}
.logo small{font-size:.72rem;color:var(--doux)}

/* Nous rejoindre */
.join{display:grid;grid-template-columns:.9fr 1.1fr;gap:44px;align-items:start}
.jobs{display:grid;gap:14px}
.job{border:1px solid var(--trait);border-left:4px solid var(--royal);padding:20px;background:#fff;display:grid;gap:6px}
.job b{font:700 1rem var(--titre);color:var(--nuit)}
.job small{font:600 .74rem var(--titre);text-transform:var(--caps);letter-spacing:.07em;color:var(--royal-dk)}
.job p{font-size:.93rem}

/* Formulaires */
.form{background:#fff;border:1px solid var(--trait);padding:32px;display:grid;gap:16px;box-shadow:0 20px 40px -30px rgba(var(--nuit-rgb),.45)}
.form h3{font-size:1.1rem;text-transform:var(--caps);letter-spacing:.05em;color:var(--nuit)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:grid;gap:6px}
.field label{font:600 .76rem var(--titre);text-transform:var(--caps);letter-spacing:.06em;color:var(--encre)}
.field input,.field select,.field textarea{font:400 .98rem var(--corps);padding:12px 14px;border:1px solid #C8D2E2;border-radius:2px;background:#fff;color:var(--encre);width:100%}
.field input[type=file]{padding:9px;background:var(--ciel-l)}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--royal);box-shadow:0 0 0 3px rgba(var(--royal-rgb),.15)}
.field textarea{min-height:120px;resize:vertical}
.field small{color:var(--doux);font-size:.8rem}
.hp{position:absolute;left:-9999px}
.notice{padding:13px 15px;font-weight:500;font-size:.94rem}
.notice--ok{background:#E3F4EC;color:#0F6B45}
.notice--err{background:#FDECEC;color:#9B1C1C}
.muted{color:var(--doux);font-size:.82rem}

/* Contact */
.contact{display:grid;grid-template-columns:.8fr 1.2fr;gap:40px;align-items:start}
.cinfo{display:grid;gap:0;background:var(--nuit);color:#fff}
.ci{display:grid;grid-template-columns:44px 1fr;gap:14px;padding:22px 24px;border-bottom:1px solid rgba(var(--ciel-rgb),.15)}
.ci:last-child{border-bottom:0}
.ci__ico{width:44px;height:44px;border-radius:50%;background:var(--royal);display:grid;place-items:center}
.ci__ico svg{width:20px;height:20px;color:#fff}
.ci b{display:block;font:700 .74rem var(--titre);text-transform:var(--caps);letter-spacing:.08em;color:var(--ciel);margin-bottom:4px}
.ci span,.ci a{display:block;color:#fff;font-size:.95rem}
.ci a:hover{color:var(--ciel)}
.ci .btn{margin-top:12px;display:inline-flex;padding:11px 16px}
.ci .btn--white{color:var(--nuit)}
.ci .btn--white:hover{color:var(--nuit)}

/* Pied de page */
.footer{background:var(--nuit);color:var(--on-dark);padding-top:56px}
.footer__grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:40px;padding-bottom:44px}
.footer img{height:58px;width:auto;border-radius:2px;margin-bottom:16px}
.footer h4{color:#fff;font-size:.82rem;text-transform:var(--caps);letter-spacing:.1em;margin-bottom:14px}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:.93rem}
.footer a{color:var(--on-dark)}
.footer a:hover{color:#fff}
.footer p{font-size:.93rem;max-width:42ch}
.copy{background:var(--cercle);color:#fff;font-size:.84rem}
.copy .wrap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-block:14px}
.copy a{color:#fff;text-decoration:underline}

/* Tiroir mobile */
.drawer{position:fixed;inset:0;z-index:80}
.drawer__bg{position:absolute;inset:0;background:rgba(var(--nuit-rgb),.5)}
.drawer__panel{position:absolute;left:0;top:0;bottom:0;width:min(320px,86vw);background:var(--nuit);padding:calc(18px + env(safe-area-inset-top,0px)) 0 24px;overflow:auto;display:flex;flex-direction:column}
.drawer__panel a{padding:15px 24px;font:600 .82rem var(--titre);text-transform:var(--caps);letter-spacing:.07em;color:#fff;border-bottom:1px solid rgba(var(--ciel-rgb),.12)}
.drawer__panel a:hover{background:var(--royal)}
.drawer__close{align-self:flex-end;margin-right:14px;background:none;border:0;color:#fff;cursor:pointer}
.drawer__close svg{width:26px;height:26px}

.demo-bar{background:#FFF6DA;color:#6B4E00;font-size:.84rem;text-align:center;padding:8px 16px}
.demo-bar a{color:#6B4E00;font-weight:700;text-decoration:underline}

@media (max-width:1100px){
  .navbar ul,.navbar__right{display:none}
  .burger{display:inline-flex}
  .brandbar__contact{display:none}
  .sectors__grid{grid-template-columns:repeat(3,1fr)}
  .logos{grid-template-columns:repeat(4,1fr)}
  .xtabs{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .sec{padding-block:64px}
  .tiles .wrap{grid-template-columns:1fr 1fr}
  .about,.xpanel,.join,.contact,.sector-detail{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .stat:nth-child(3){border-left:0}
  .stat:nth-child(n+3){border-top:1px solid var(--trait)}
  .domains,.partners,.mlist{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr}
  .hero .wrap{padding-block:70px 150px}
}
@media (max-width:560px){
  .brandbar .wrap{min-height:74px}
  .brandbar img{height:48px}
  .brandbar__line{font-size:.8rem;padding-left:14px}
  .sectors__grid,.xtabs{grid-template-columns:1fr 1fr}
  .logos{grid-template-columns:1fr 1fr}
  .row2{grid-template-columns:1fr}
  .form{padding:22px}
  .mrow{grid-template-columns:1fr;gap:10px}
  .tile{padding:22px 12px}
  .tile small{display:none}
  .sector-detail{padding:22px}
  .hero__actions .btn{flex:1 1 auto}
}


/* =========================================================
   Animations (actives seulement quand <html class="anim">)
   ========================================================= */
.count{font-variant-numeric:lining-nums tabular-nums;display:inline-block;min-width:1ch}
.stat b,.mrow__year,.tile b,.fbtn em{font-variant-numeric:lining-nums tabular-nums}

/* Apparition au défilement */
.anim [data-rv]{opacity:0;transition:opacity .75s ease,transform .85s cubic-bezier(.16,.84,.3,1);transition-delay:var(--d,0ms);will-change:opacity,transform}
.anim [data-rv="up"]{transform:translateY(38px)}
.anim [data-rv="left"]{transform:translateX(-46px)}
.anim [data-rv="right"]{transform:translateX(46px)}
.anim [data-rv="zoom"]{transform:scale(.9) translateY(18px)}
.anim [data-rv].in{opacity:1;transform:none}
.anim .sec__head h2::after{transform:scaleX(0);transition:transform .9s cubic-bezier(.16,.84,.3,1) .3s}
.anim .sec__head.in h2::after{transform:scaleX(1)}
.anim .stat.in b{animation:statGlow 1.9s ease-out var(--d,0ms) both}
@keyframes statGlow{0%{color:var(--cercle)}100%{color:var(--royal)}}

/* Contenu redessiné (onglets, filtres, secteurs) */
.anim .pop{animation:popIn .55s cubic-bezier(.16,.84,.3,1) var(--d,0ms) both}
@keyframes popIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* Accueil : entrée en séquence, zoom lent, cercles qui tournent */
.anim .hero__img{animation:kenburns 26s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:scale(1.02)}to{transform:scale(1.14) translate(-1.5%,1%)}}
.anim .hero .tag{animation:heroIn .8s cubic-bezier(.16,.84,.3,1) .15s both}
.anim .hero h1{animation:heroIn .9s cubic-bezier(.16,.84,.3,1) .3s both}
.anim .hero p{animation:heroIn .9s cubic-bezier(.16,.84,.3,1) .5s both}
.anim .hero__actions{animation:heroIn .9s cubic-bezier(.16,.84,.3,1) .68s both}
@keyframes heroIn{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
.anim .tile{animation:tileIn .8s cubic-bezier(.16,.84,.3,1) both}
.anim .tile:nth-child(1){animation-delay:.75s}.anim .tile:nth-child(2){animation-delay:.87s}.anim .tile:nth-child(3){animation-delay:.99s}.anim .tile:nth-child(4){animation-delay:1.11s}
@keyframes tileIn{from{opacity:0;translate:0 60px}to{opacity:1;translate:0 0}}
.rings span:nth-child(2){border-style:dashed}
.anim .rings span:nth-child(2){animation:spin 60s linear infinite}
.anim .rings span:nth-child(3){animation:spin 90s linear infinite reverse;border-style:dotted}
@keyframes spin{to{transform:rotate(360deg)}}
.anim .tile__ico{animation:breathe 4.5s ease-in-out infinite}
.anim .tile:nth-child(2) .tile__ico{animation-delay:-1.1s}.anim .tile:nth-child(3) .tile__ico{animation-delay:-2.2s}.anim .tile:nth-child(4) .tile__ico{animation-delay:-3.3s}
@keyframes breathe{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.28)}50%{box-shadow:0 0 0 10px rgba(255,255,255,0)}}

/* Effets au survol */
.tile__ico,.sector__ico,.vmv__ico{transition:transform .35s cubic-bezier(.34,1.56,.64,1),background .25s}
.tile:hover .tile__ico{transform:scale(1.1) rotate(-8deg);background:rgba(255,255,255,.14)}
.sector{transition:background .25s,border-color .25s,transform .3s cubic-bezier(.16,.84,.3,1)}
.sector:hover{transform:translateY(-6px)}
.sector:hover .sector__ico{transform:scale(1.12) rotate(8deg);background:var(--bleu)}
.vmv__item{transition:transform .3s,box-shadow .3s}
.vmv__item:hover{transform:translateX(-6px);box-shadow:0 18px 34px -24px rgba(var(--nuit-rgb),.5)}
.vmv__item:hover .vmv__ico{transform:scale(1.1)}
.member__photo img{transition:transform .8s cubic-bezier(.16,.84,.3,1)}
.mrow,.domain,.job,.partner{transition:transform .3s,box-shadow .3s,border-color .3s}
.mrow:hover,.domain:hover,.job:hover{transform:translateY(-4px);box-shadow:0 18px 34px -26px rgba(var(--nuit-rgb),.5);border-color:var(--ciel)}
/* Références : zoom proportionnel du logo au survol (la case passe au premier plan, sans recadrage) */
.logo{position:relative;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,background .25s,border-color .25s;transform-origin:center}
.logo img{transition:filter .25s,opacity .25s}
.logo:hover,.logo:focus-within{transform:scale(1.45);z-index:3;background:#fff;border-color:transparent;border-radius:6px;box-shadow:0 22px 46px -18px rgba(var(--nuit-rgb),.55),0 0 0 1px var(--ciel)}
.logo:hover img,.logo:focus-within img{filter:none;opacity:1}
/* les cases du bord gauche et du bord droit grossissent vers l'intérieur de la grille */
@media (min-width:1101px){.logo:nth-child(6n+1){transform-origin:left center}.logo:nth-child(6n){transform-origin:right center}}
@media (min-width:561px) and (max-width:1100px){.logo:nth-child(4n+1){transform-origin:left center}.logo:nth-child(4n){transform-origin:right center}}
@media (max-width:560px){.logo:nth-child(2n+1){transform-origin:left center}.logo:nth-child(2n){transform-origin:right center}}
.stat{transition:background .3s}
.stat:hover{background:var(--ciel-l)}
.xtab svg{transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.xtab:hover svg,.xtab[aria-selected="true"] svg{transform:scale(1.15)}
/* Reflet qui balaie les boutons pleins */
.btn--primary,.btn--white{position:relative;overflow:hidden}
.btn--primary::after,.btn--white::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);transition:left .6s}
.btn--primary:hover::after,.btn--white:hover::after{left:130%}
.btn svg{transition:transform .25s}
.btn:hover svg{transform:translateX(3px)}

/* Barre de menu, progression de lecture, retour en haut */
.navbar{transition:box-shadow .3s,background .3s}
.navbar.scrolled{box-shadow:0 10px 26px -12px rgba(var(--nuit-rgb),.75);background:var(--royal-dk)}
.readbar{position:fixed;left:0;right:0;top:0;height:4px;z-index:90;background:linear-gradient(90deg,var(--royal),var(--bleu) 70%,var(--cercle));transform-origin:0 50%;transform:scaleX(0);pointer-events:none}
.totop{position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:70;width:48px;height:48px;border-radius:50%;background:var(--nuit);color:#fff;display:grid;place-items:center;box-shadow:0 12px 26px -10px rgba(var(--nuit-rgb),.7);opacity:0;transform:translateY(16px) scale(.9);pointer-events:none;transition:opacity .3s,transform .3s,background .2s}
.totop svg{width:22px;height:22px}
.totop.show{opacity:1;transform:none;pointer-events:auto}
.totop:hover{background:var(--royal);color:#fff}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* =========================================================
   Sections ajoutées dans l'administration
   ========================================================= */
.csec{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
.csec--left .csec__media{order:-1}
.csec__text{display:grid;gap:16px;font-size:1.05rem}
.csec__text--center{max-width:760px;margin:0 auto;text-align:center;justify-items:center}
.csec__media{position:relative}
.csec__media img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:4px;box-shadow:0 30px 60px -34px rgba(var(--nuit-rgb),.6)}
.csec__media::before{content:"";position:absolute;inset:18px -18px -18px 18px;border:3px solid var(--royal);border-radius:4px;z-index:-1}
.csec--left .csec__media::before{inset:18px 18px -18px -18px}
.csec__actions{margin-top:6px}
.csec__intro{max-width:760px;margin:0 auto 34px;text-align:center;display:grid;gap:12px;font-size:1.05rem}
.ccards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.ccard{background:#fff;border:1px solid var(--trait);border-top:4px solid var(--royal);padding:26px 22px;display:grid;gap:10px;align-content:start;transition:transform .3s,box-shadow .3s}
.ccard:hover{transform:translateY(-4px);box-shadow:0 18px 34px -26px rgba(var(--nuit-rgb),.5)}
.ccard__ico{width:50px;height:50px;border-radius:50%;background:var(--ciel);color:var(--nuit);display:grid;place-items:center}
.ccard__ico svg{width:24px;height:24px}
.ccard h3{font-size:1.05rem;color:var(--nuit)}
.ccard p{font-size:.95rem}
.csec-wrap .csec__actions{text-align:center}
.csec-wrap .csec:not(.csec__text--center) .csec__actions{text-align:left}
.csec-banner{max-width:780px;margin:0 auto;text-align:center;display:grid;gap:18px;justify-items:center;padding-block:30px}
.csec-banner h2{font-size:clamp(1.8rem,3.4vw,2.6rem);font-weight:700;text-transform:var(--caps);letter-spacing:.02em;color:#fff}
.csec-banner p{color:var(--on-dark-2);font-size:1.08rem}
.csec-banner__sub{font-size:1.2rem!important;color:#fff!important}

/* =========================================================
   Fond de section choisi dans l'administration
   ========================================================= */
.sec{position:relative}
.sec > .wrap{position:relative;z-index:1}
.look-white{background:#fff!important}
.look-tint{background:var(--ciel-l)!important}
.look-dark{background:var(--nuit)!important}
.look-image{background:var(--nuit) var(--look-img) center/cover no-repeat!important;isolation:isolate}
.look-image::before{content:"";position:absolute;inset:0;background:rgba(var(--nuit-rgb),var(--veil,.7));z-index:0;pointer-events:none}
/* textes posés directement sur un fond foncé ou une image */
.look-dark .sec__head h2,.look-image .sec__head h2{color:#fff}
.look-dark .sec__head h2::after,.look-image .sec__head h2::after{background:var(--ciel)}
.look-dark .sec__head p,.look-image .sec__head p{color:var(--on-dark-2)}
.look-dark .about__text,.look-image .about__text,.look-dark .xpanel > div:first-child p,.look-image .xpanel > div:first-child p,
.look-dark .join > div:first-child > p,.look-image .join > div:first-child > p,.look-dark .csec__text,.look-image .csec__text,
.look-dark .csec__intro,.look-image .csec__intro{color:var(--on-dark-2)}
.look-dark .about__text .lead,.look-image .about__text .lead,.look-dark .xpanel h3,.look-image .xpanel h3{color:#fff}
.look-dark .xtabs,.look-image .xtabs{border-bottom-color:rgba(var(--ciel-rgb),.25)}
.look-dark .xtab,.look-image .xtab{color:var(--on-dark)}
.look-dark .xtab[aria-selected="true"],.look-image .xtab[aria-selected="true"]{color:#fff}
.look-dark .team .member,.look-image .team .member{border-color:transparent}
/* bande « Secteurs » (foncée à l'origine) posée sur un fond clair */
.look-white .sec__head--light h2,.look-tint .sec__head--light h2{color:var(--nuit)}
.look-white .sec__head--light h2::after,.look-tint .sec__head--light h2::after{background:var(--royal)}
.look-white .sec__head--light p,.look-tint .sec__head--light p{color:var(--doux)}
.look-white .sector,.look-tint .sector{background:#fff;border-color:var(--trait);color:var(--encre)}
.look-white .sector small,.look-tint .sector small{color:var(--doux)}
.look-white .sector:hover,.look-tint .sector:hover{background:var(--ciel-l);color:var(--encre)}
.look-white.sectors,.look-tint.sectors{color:var(--texte)}

/* =========================================================
   Figures décoratives
   ========================================================= */
.has-decor{overflow-x:clip}
.has-decor .decor{max-height:100%}
.decor{position:absolute;z-index:0;pointer-events:none;width:clamp(200px,30vw,420px);aspect-ratio:1;top:50%;transform:translateY(-50%)}
.decor--right{right:calc(clamp(200px,30vw,420px) * -.38)}
.decor--left{left:calc(clamp(200px,30vw,420px) * -.38)}
.decor--rings span{position:absolute;inset:0;border-radius:50%;border:clamp(14px,2vw,26px) solid var(--cercle-2);opacity:.45}
.decor--rings span:nth-child(2){inset:14%;border-color:var(--argent);border-style:dashed}
.decor--rings span:nth-child(3){inset:28%;border-color:var(--cercle);border-style:dotted}
.decor--dots{background:radial-gradient(circle,rgba(var(--royal-rgb),.45) 2.2px,transparent 2.6px) 0 0/22px 22px;-webkit-mask-image:radial-gradient(circle,#000 35%,transparent 70%);mask-image:radial-gradient(circle,#000 35%,transparent 70%)}
.decor--lines{background:repeating-linear-gradient(-45deg,rgba(var(--royal-rgb),.22) 0 3px,transparent 3px 18px);-webkit-mask-image:radial-gradient(circle,#000 30%,transparent 68%);mask-image:radial-gradient(circle,#000 30%,transparent 68%)}
.decor--blob{border-radius:42% 58% 70% 30%/45% 45% 55% 55%;background:linear-gradient(135deg,rgba(var(--royal-rgb),.22),rgba(var(--ciel-rgb),.45));filter:blur(.5px)}
.look-dark .decor--dots,.look-image .decor--dots,.sectors:not(.look-white):not(.look-tint) .decor--dots{background-image:radial-gradient(circle,rgba(var(--ciel-rgb),.4) 2.2px,transparent 2.6px)}
.look-dark .decor--lines,.look-image .decor--lines{background:repeating-linear-gradient(-45deg,rgba(var(--ciel-rgb),.18) 0 3px,transparent 3px 18px)}
.look-dark .decor--rings span,.look-image .decor--rings span{opacity:.25}
.anim .decor--rings span:nth-child(2){animation:spin 70s linear infinite}
.anim .decor--rings span:nth-child(3){animation:spin 100s linear infinite reverse}
.anim .decor--blob{animation:blobMorph 18s ease-in-out infinite alternate}
@keyframes blobMorph{0%{border-radius:42% 58% 70% 30%/45% 45% 55% 55%;transform:translateY(-50%) rotate(0)}100%{border-radius:65% 35% 38% 62%/55% 62% 38% 45%;transform:translateY(-50%) rotate(18deg)}}

/* Contacts des membres de l'équipe */





@media (max-width:860px){
  .csec{grid-template-columns:1fr;gap:32px}
  .csec--left .csec__media{order:0}
  .csec__media::before{display:none}
  .decor{opacity:.6}
}
@media (prefers-reduced-motion:reduce){.decor,.decor *{animation:none!important}}

/* Les blocs qui entrent en glissant depuis le côté ne doivent jamais élargir la page */
body{overflow-x:clip}
.sec,.footer{overflow-x:clip}
/* L'en-tête ne doit pas enfermer la barre de menu : elle reste ainsi collée en haut au défilement */
#site-top{display:contents}
/* Boutons à contour posés sur un fond foncé ou une image */
.look-dark .btn--line,.look-image .btn--line{border-color:rgba(255,255,255,.8);color:#fff}
.look-dark .btn--line:hover,.look-image .btn--line:hover{background:#fff;color:var(--nuit)}

/* Menu « Plus » quand les sections ne tiennent pas sur une ligne */
.navbar ul{flex-wrap:nowrap}
.nav-more{position:relative}
.nav-more > button{display:flex;align-items:center;gap:6px;padding:19px 13px;background:none;border:0;border-bottom:3px solid transparent;color:#fff;cursor:pointer;font:600 .78rem/1 var(--titre);text-transform:var(--caps);letter-spacing:.06em}
.nav-more > button svg{width:14px;height:14px}
.nav-more > button:hover,.nav-more.is-active > button{background:rgba(var(--nuit-rgb),.25)}
.nav-more.is-active > button{border-bottom-color:#fff}
.nav-more__menu{position:absolute;right:0;top:100%;min-width:230px;background:var(--nuit);box-shadow:0 18px 40px -18px rgba(0,0,0,.5);padding:6px 0;display:none;z-index:60}
.nav-more:hover .nav-more__menu,.nav-more:focus-within .nav-more__menu,.nav-more.open .nav-more__menu{display:block}
.navbar .nav-more__menu a{padding:13px 18px;border-bottom:0;white-space:nowrap}
.navbar .nav-more__menu a:hover,.navbar .nav-more__menu a.is-active{background:var(--royal)}
.navbar ul > li{flex:none}
.navbar a,.nav-more > button{white-space:nowrap}

/* Carte et position GPS (section Contacts) */
.cmap{position:relative;margin-top:36px;border:1px solid var(--trait);background:var(--ciel-l);overflow:hidden;box-shadow:0 24px 50px -36px rgba(var(--nuit-rgb),.55)}
.cmap iframe{display:block;width:100%;height:420px;border:0}
.cmap__btn{position:absolute;left:16px;top:16px;box-shadow:0 10px 24px -10px rgba(var(--nuit-rgb),.6)}
.cmap__ph{position:relative;overflow:hidden;min-height:300px;display:grid;place-items:center;align-content:center;gap:10px;text-align:center;padding:40px 20px;background:linear-gradient(135deg,var(--ciel-l),var(--ciel))}
.cmap__ph .rings{position:absolute;right:-90px;top:-90px;width:300px;height:300px;opacity:.4}
.cmap__ph > *:not(.rings){position:relative}
.cmap__ph b{color:var(--nuit);font:700 1.05rem var(--titre)}
.cmap__ph small{color:var(--doux)}
.ci__gps{font-size:.84rem!important;color:var(--ciel)!important;font-variant-numeric:tabular-nums;margin-top:4px}
@media (max-width:560px){.cmap iframe{height:320px}}

/* =========================================================
   Notre équipe : 4 fiches par ligne au maximum, détail au survol
   ========================================================= */
.team{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:24px;margin:0 auto;width:100%}
.team--c1{--cols:1;max-width:340px}
.team--c2{--cols:2;max-width:660px}
.team--c3{--cols:3;max-width:940px}
.team--c4{--cols:4}
.member{position:relative;background:#fff;border:1px solid var(--trait);display:flex;flex-direction:column;cursor:default;outline:none;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.member--more{cursor:pointer}
.member__photo{position:relative;aspect-ratio:4/4.6;background:var(--ciel-l);overflow:hidden}
.member__photo img{width:100%;height:100%;object-fit:cover;object-position:top}
.member__initials{display:grid;place-items:center;width:100%;height:100%;font:700 clamp(2rem,5vw,3.4rem)/1 var(--titre);color:var(--royal);background:linear-gradient(135deg,var(--ciel-l),var(--ciel));letter-spacing:.04em}
.member__hint{position:absolute;right:12px;bottom:12px;width:34px;height:34px;border-radius:50%;background:var(--royal);color:#fff;display:grid;place-items:center;box-shadow:0 8px 18px -8px rgba(var(--nuit-rgb),.7);transition:opacity .25s,transform .25s}
.member__hint svg{width:18px;height:18px}
.member__id{padding:16px 14px 18px;border-top:4px solid var(--royal);display:grid;gap:5px;text-align:center;flex:1;align-content:start}
.member h3{font-size:1.05rem;color:var(--nuit);line-height:1.3}
.member__role{font:600 .72rem/1.45 var(--titre);text-transform:var(--caps);letter-spacing:.07em;color:var(--royal-dk)}
/* Volet de détail : couvre la fiche et s'allonge au besoin pour tout montrer */
.member__more{position:absolute;left:-1px;right:-1px;top:-1px;min-height:calc(100% + 2px);z-index:2;padding:20px 18px 22px;display:grid;gap:12px;align-content:start;
  background:linear-gradient(170deg,var(--nuit),var(--nuit-2));color:var(--on-dark-2);font-size:.88rem;line-height:1.55;
  box-shadow:0 30px 60px -24px rgba(var(--nuit-rgb),.75);opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .3s,transform .35s cubic-bezier(.2,.8,.2,1),visibility .3s}
.member__head{display:flex;gap:12px;align-items:center;padding-bottom:12px;border-bottom:1px solid rgba(var(--ciel-rgb),.22)}
.member__head img,.member__head .member__initials{width:56px;height:56px;border-radius:50%;object-fit:cover;object-position:top;flex:none;border:2px solid var(--ciel);font-size:1.2rem}
.member__more h3{color:#fff;font-size:1rem}
.member__more .member__role{color:var(--ciel)}
.member__more ul{margin:0;padding-left:18px;display:grid;gap:6px}
.member__more li::marker{color:var(--ciel)}
.member__more p{margin:0}
.member__contact{display:grid;gap:7px;padding-top:12px;border-top:1px solid rgba(var(--ciel-rgb),.22)}
.member__contact a{display:flex;align-items:center;gap:9px;color:#fff;overflow-wrap:anywhere;font-size:.86rem}
.member__contact a:hover{color:var(--ciel)}
.member__contact svg{width:16px;height:16px;flex:none;color:var(--ciel)}
.member--more:hover,.member--more:focus-within,.member--more:focus,.member.open{z-index:8;transform:translateY(-4px)}
.member--more:hover .member__more,.member--more:focus .member__more,.member--more:focus-within .member__more,.member.open .member__more{opacity:1;visibility:visible;transform:none}
.member--more:hover .member__hint,.member--more:focus .member__hint,.member.open .member__hint{opacity:0;transform:scale(.6)}
.member:focus-visible{outline:3px solid var(--royal);outline-offset:3px}
@media (max-width:860px){
  .team--c3,.team--c4{--cols:2;max-width:660px}
}
@media (max-width:420px){
  .team{gap:14px}
  .member__id{padding:12px 8px 14px}
  .member h3{font-size:.92rem}
  .member__more{padding:14px 12px 16px;font-size:.82rem;left:-1px;right:-1px}
}

.member__close{display:none}
/* Écrans tactiles : le détail s'ouvre dans un panneau qui remonte du bas de l'écran */
@media (hover:none){
  .member--more:hover,.member--more:focus,.member--more:focus-within{transform:none}
  .member--more:hover .member__more,.member--more:focus .member__more,.member--more:focus-within .member__more{opacity:0;visibility:hidden}
  .member.open{transform:none;z-index:120}
  .member.open::before{content:"";position:fixed;inset:0;background:rgba(var(--nuit-rgb),.5);z-index:119}
  .member.open .member__more{position:fixed;left:0;right:0;top:auto;bottom:0;min-height:0;max-height:82vh;overflow-y:auto;z-index:121;opacity:1;visibility:visible;transform:none;
    border-radius:18px 18px 0 0;padding:24px 20px calc(26px + env(safe-area-inset-bottom,0px));font-size:.92rem;animation:sheetUp .35s cubic-bezier(.2,.8,.2,1)}
  .member.open .member__close{display:grid;place-items:center;position:absolute;right:12px;top:12px;width:36px;height:36px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;cursor:pointer}
  .member__close svg{width:18px;height:18px}
  .member.open .member__head{padding-right:40px}
}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:none}}