/* ═══ jetons de charte ═══════════════════════════════════════════════════ */
:root{
  --n1:#009FE3; --n2:#009CC4; --n3:#009BA4; --n4:#009881; --n5:#4C9C3C;
  --encre:#06090C; --noir:#111517;
  --papier:#E2E8EC; --brume:#8795A0; --filet:#172129; --filet-2:#22303A;
  --accent:var(--n1);
  --pad:clamp(1.25rem,5vw,5.5rem);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--encre);color:var(--papier);
  font-family:"Newsreader",Georgia,serif;font-weight:300;
  font-size:clamp(1rem,.5vw + .92rem,1.14rem);line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--accent);color:var(--encre)}
h1,h2,h3,.sans{font-family:"Archivo",system-ui,sans-serif;font-weight:600;
  font-variation-settings:"wdth" 110;line-height:1.04;margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ═══ bandeau des cinq couleurs, repris de la charte ═════════════════════ */
#bande{position:fixed;top:0;left:0;right:0;height:3px;z-index:8;
  background:linear-gradient(90deg,#009FE3,#009CC4 26%,#009BA4 50%,#009881 74%,#4C9C3C)}

/* ═══ scène ═════════════════════════════════════════════════════════════ */
#gl{position:fixed;inset:0;z-index:0;display:block}
#voile{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(118% 78% at 50% 45%,transparent 24%,rgba(6,9,12,.5) 70%,rgba(6,9,12,.95) 100%)}
main{position:relative;z-index:2}

/* ═══ barre haute ═══════════════════════════════════════════════════════ */
nav{position:fixed;top:3px;left:0;right:0;z-index:6;display:flex;align-items:center;
  justify-content:space-between;padding:1rem var(--pad);
  border-bottom:1px solid transparent;transition:background .4s,border-color .4s}
nav.pose{background:rgba(6,9,12,.82);backdrop-filter:blur(16px);border-bottom-color:var(--filet)}
nav .marque{display:block;line-height:0}
nav .marque img{height:clamp(21px,2.3vw,27px);width:auto;display:block}
nav .liens{display:flex;gap:1.7rem}
nav .liens a{font-family:"Archivo",sans-serif;font-weight:400;font-size:.85rem;
  color:var(--brume);text-decoration:none;transition:color .25s}
nav .liens a:hover{color:var(--papier)}
@media (max-width:820px){nav .liens{display:none}}

/* ═══ rail latéral ══════════════════════════════════════════════════════ */
#rail{position:fixed;right:clamp(.9rem,2.4vw,2.2rem);top:50%;transform:translateY(-50%);
  z-index:6;display:flex;flex-direction:column;list-style:none;margin:0;padding:0}
#rail li{display:flex;align-items:center;justify-content:flex-end;gap:.6rem;
  padding:.32rem 0;cursor:pointer}
#rail span{font-family:"Archivo",sans-serif;font-size:.71rem;color:var(--brume);
  opacity:0;transform:translateX(6px);white-space:nowrap;
  transition:opacity .3s,transform .3s,color .3s}
#rail i{display:block;width:24px;height:1px;background:var(--filet-2);
  transition:width .35s,background .35s}
#rail li:hover span{opacity:1;transform:none}
#rail li.actif span{opacity:1;transform:none;color:var(--papier)}
#rail li.actif i{width:44px;background:var(--accent)}
@media (max-width:1000px){#rail{display:none}}

/* ═══ sections ══════════════════════════════════════════════════════════ */
section{padding:clamp(6rem,13vh,10rem) var(--pad);max-width:1280px}

.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-top:7rem}
.hero .amorce{font-family:"Archivo",sans-serif;font-size:.82rem;color:var(--brume);margin:0 0 1.5rem}
.hero h1{margin:0 0 2rem;line-height:0}
.hero h1 img{width:clamp(230px,31vw,430px);height:auto;display:block}
.hero h1 span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.hero .accroche{max-width:35ch;font-size:clamp(1.05rem,1.5vw,1.4rem);margin:0 0 2.4rem}
.gestes{display:flex;gap:.7rem;flex-wrap:wrap}
.bouton{font-family:"Archivo",sans-serif;font-weight:500;font-size:.9rem;text-decoration:none;
  cursor:pointer;padding:.76rem 1.5rem;border:1px solid var(--accent);background:var(--accent);
  color:var(--encre);transition:filter .25s,background .35s,border-color .35s,color .35s}
.bouton:hover{filter:brightness(1.14)}
.bouton.creux{background:transparent;color:var(--papier);border-color:var(--filet-2)}
.bouton.creux:hover{border-color:var(--accent);filter:none}
.indice{margin-top:3.2rem;font-family:"Archivo",sans-serif;font-size:.76rem;
  color:var(--brume);display:flex;align-items:center;gap:.7rem}
.indice em{display:block;width:1px;height:32px;font-style:normal;
  background:linear-gradient(var(--accent),transparent)}

.credo{max-width:960px}
.credo p{font-size:clamp(1.35rem,2.7vw,2.1rem);line-height:1.4;font-weight:200;max-width:23ch;margin:0}
.credo b{font-weight:200;background:linear-gradient(96deg,var(--n1),var(--n3) 55%,var(--n5));
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* ═══ scènes des sociétés ═══════════════════════════════════════════════ */
.societe{position:relative;min-height:175vh;max-width:none;padding-top:0;padding-bottom:0}
.volet{position:sticky;top:0;min-height:100svh;display:flex;flex-direction:column;
  justify-content:center;max-width:35rem;padding:8rem 0}
.jeton{width:38px;height:32px;margin-bottom:1.5rem;display:block;overflow:visible}
.volet h2{font-size:clamp(2rem,4.5vw,3.4rem);letter-spacing:-.025em;margin-bottom:1.2rem}
.volet .fonction{font-family:"Archivo",sans-serif;font-size:.92rem;color:var(--accent);
  margin:0 0 1.1rem;transition:color .5s}
.volet .texte{color:var(--brume);margin:0 0 2rem;max-width:45ch}
.faits{list-style:none;margin:0;padding:0;border-top:1px solid var(--filet)}
.faits li{display:flex;gap:1.2rem;padding:.7rem 0;border-bottom:1px solid var(--filet);
  font-family:"Archivo",sans-serif;font-size:.85rem;color:var(--brume)}
.faits li b{color:var(--papier);font-weight:500;min-width:9.5rem}
@media (max-width:820px){
  .societe{min-height:145vh}
  .volet{padding:6rem 0;max-width:none}
  .faits li{flex-direction:column;gap:.15rem}
  .faits li b{min-width:0}
}

/* ═══ blocs de texte communs ════════════════════════════════════════════ */
.sourcil{font-family:"Archivo",sans-serif;font-size:.83rem;font-weight:500;
  color:var(--accent);margin:0 0 .9rem;transition:color .5s}
h2.large{font-size:clamp(1.9rem,4.2vw,3rem);letter-spacing:-.02em;max-width:18ch;margin-bottom:1.4rem}
.chapo{color:var(--brume);max-width:52ch;margin:0 0 3rem}

/* ═══ produits ══════════════════════════════════════════════════════════ */
.produits{border-top:1px solid var(--filet)}
.produit{display:grid;grid-template-columns:minmax(0,16rem) minmax(0,1fr) auto;
  gap:1rem 2.4rem;padding:2rem 0;border-bottom:1px solid var(--filet);align-items:start}
.produit h3{font-size:1.3rem;font-variation-settings:"wdth" 104}
.produit p{margin:.45rem 0 0;color:var(--brume);max-width:52ch}
.produit .lien{font-family:"Archivo",sans-serif;font-size:.86rem;text-decoration:none;
  border-bottom:1px solid var(--accent);padding-bottom:2px;white-space:nowrap;transition:color .3s}
.produit .lien:hover{color:var(--accent)}
.produit .etat{font-family:"Archivo",sans-serif;font-size:.76rem;color:var(--brume);
  border:1px solid var(--filet-2);padding:.2rem .55rem;white-space:nowrap}
.produit.futur h3,.produit.futur p{color:var(--brume)}
.produit.futur h3{font-weight:500}
@media (max-width:820px){.produit{grid-template-columns:1fr;gap:.3rem}}

/* ═══ récapitulatif du groupe ═══════════════════════════════════════════ */
.tableau{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  gap:1px;background:var(--filet);border:1px solid var(--filet)}
.case{background:var(--encre);padding:1.7rem 1.4rem}
.case svg{width:30px;height:26px;margin-bottom:1rem;display:block;overflow:visible}
.case h3{font-size:1rem;font-variation-settings:"wdth" 100;margin-bottom:.5rem}
.case p{margin:0;color:var(--brume);font-size:.94rem}

/* ═══ contact ═══════════════════════════════════════════════════════════ */
.duo{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(2rem,6vw,5rem);align-items:start}
@media (max-width:900px){.duo{grid-template-columns:1fr}}
form{display:grid;gap:1.05rem}
.champ{display:grid;gap:.38rem}
label{font-family:"Archivo",sans-serif;font-size:.82rem;color:var(--brume)}
input,textarea,select{font-family:"Newsreader",serif;font-size:1rem;color:var(--papier);width:100%;
  background:rgba(11,16,21,.75);border:1px solid var(--filet);padding:.7rem .82rem;
  transition:border-color .25s,background .25s}
select{font-family:"Archivo",sans-serif;font-size:.92rem}
input:focus,textarea:focus,select:focus{border-color:var(--accent);background:rgba(11,16,21,.96);outline:none}
textarea{min-height:8rem;resize:vertical}
.piege{position:absolute;left:-9999px}
.retour{font-family:"Archivo",sans-serif;font-size:.87rem;min-height:1.3em;margin:0}
.retour.ok{color:var(--accent)}
.retour.ko{color:#E38A6E}
.fiches{border-top:1px solid var(--filet)}
.fiches div{padding:1.05rem 0;border-bottom:1px solid var(--filet)}
.fiches span{display:block;font-family:"Archivo",sans-serif;font-size:.79rem;
  color:var(--brume);margin-bottom:.22rem}
.fiches a{text-decoration:none;border-bottom:1px solid var(--filet)}
.fiches a:hover{border-bottom-color:var(--accent)}

footer{position:relative;z-index:2;padding:2rem var(--pad) 3rem;border-top:1px solid var(--filet);
  display:flex;justify-content:space-between;gap:1.2rem;flex-wrap:wrap;align-items:center;
  font-family:"Archivo",sans-serif;font-size:.79rem;color:var(--brume)}
footer img{display:block}
footer a{text-decoration:none;border-bottom:1px solid var(--filet)}

/* ═══ apparitions ═══════════════════════════════════════════════════════ */
.ap{opacity:0;transition:opacity .85s cubic-bezier(.2,.6,.2,1)}
.ap.vu{opacity:1}
.hero .amorce,.hero h1,.hero .accroche,.hero .gestes,.hero .indice{
  opacity:0;transform:translateY(16px);animation:monte 1s cubic-bezier(.16,.84,.3,1) forwards}
.hero h1{animation-delay:.2s}.hero .accroche{animation-delay:.45s}
.hero .gestes{animation-delay:.6s}.hero .indice{animation-delay:.85s}
@keyframes monte{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ap{opacity:1}
  .hero .amorce,.hero h1,.hero .accroche,.hero .gestes,.hero .indice{
    opacity:1;transform:none;animation:none}
}

/* ═══ pages de texte (mentions légales) ═════════════════════════════════ */
body.page-texte{padding-top:0}
nav.fixe{position:sticky}
nav.fixe .liens{display:flex}
@media (max-width:820px){nav.fixe .liens{display:flex}}
main.texte{max-width:820px;margin:0 auto;padding:clamp(3.5rem,9vh,6rem) var(--pad) 5rem;
  position:relative;z-index:2}
main.texte h1{font-family:"Archivo",sans-serif;font-weight:600;font-variation-settings:"wdth" 110;
  font-size:clamp(2rem,4.6vw,3rem);letter-spacing:-.02em;line-height:1.05;margin:0 0 .6rem}
main.texte .maj{font-family:"Archivo",sans-serif;font-size:.82rem;color:var(--brume);margin:0 0 3.5rem}
main.texte h2{font-family:"Archivo",sans-serif;font-weight:600;font-variation-settings:"wdth" 106;
  font-size:1.35rem;letter-spacing:-.01em;margin:3.2rem 0 .9rem;padding-top:1.6rem;
  border-top:1px solid var(--filet)}
main.texte h2:first-of-type{border-top:none;padding-top:0;margin-top:2rem}
main.texte h3{font-family:"Archivo",sans-serif;font-weight:600;font-size:1rem;
  font-variation-settings:"wdth" 100;margin:1.8rem 0 .5rem}
main.texte p{margin:0 0 1rem;max-width:70ch;line-height:1.7}
main.texte ul{margin:0 0 1rem;padding-left:1.15rem;max-width:70ch}
main.texte li{margin-bottom:.4rem}
main.texte .dl{border-top:1px solid var(--filet);margin:1.2rem 0}
main.texte .dl div{display:grid;grid-template-columns:minmax(0,13rem) minmax(0,1fr);
  gap:.4rem 1.5rem;padding:.8rem 0;border-bottom:1px solid var(--filet)}
main.texte .dl b{font-family:"Archivo",sans-serif;font-weight:500;font-size:.85rem;color:var(--brume)}
main.texte a{text-decoration:none;border-bottom:1px solid var(--filet)}
main.texte a:hover{border-bottom-color:var(--accent)}
@media (max-width:640px){main.texte .dl div{grid-template-columns:1fr}}

/* ═══ bandeau de mise en avant, au-dessus du pied de page ═══════════════ */
.promo{position:relative;z-index:2;border-top:1px solid var(--filet);
  background:linear-gradient(180deg,rgba(13,20,26,.55),rgba(6,9,12,.85))}
.promo::before{content:"";display:block;height:2px;
  background:linear-gradient(90deg,var(--n1),var(--n2) 26%,var(--n3) 50%,var(--n4) 74%,var(--n5))}
.promo-in{max-width:1280px;margin:0 auto;padding:clamp(3rem,7vh,4.6rem) var(--pad);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  gap:clamp(2rem,5vw,4rem);align-items:center}
@media (max-width:900px){.promo-in{grid-template-columns:1fr}}
.promo-sourcil{font-family:"Archivo",sans-serif;font-size:.79rem;color:var(--n1);margin:0 0 .7rem}
.promo h2{font-size:clamp(1.6rem,3.2vw,2.3rem);letter-spacing:-.02em;margin:0 0 .5rem}
.promo-accroche{font-size:clamp(1.02rem,1.5vw,1.2rem);color:var(--papier);margin:0 0 .9rem;max-width:36ch}
.promo-corps{color:var(--brume);margin:0 0 1.4rem;max-width:52ch;font-size:.99rem}
.promo-pts{list-style:none;margin:0 0 1.7rem;padding:0;display:flex;flex-wrap:wrap;gap:.45rem}
.promo-pts li{font-family:"Archivo",sans-serif;font-size:.78rem;color:var(--brume);
  border:1px solid var(--filet-2);padding:.26rem .6rem}
.promo-bas{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap;margin:0}
.promo-prix{font-family:"Archivo",sans-serif;font-size:.82rem;color:var(--brume)}
.promo-img{line-height:0}
.promo-img img{width:100%;height:auto;display:block;border:1px solid var(--filet);
  transition:border-color .3s}
.promo-img a:hover img{border-color:var(--filet-2)}
@media (max-width:900px){.promo-img{display:none}}

/* ── carte de rapport, reconstruite en HTML plutôt qu'en image ────────── */
.promo-carte{border:1px solid var(--filet-2);background:rgba(6,9,12,.7);
  padding:1.5rem 1.6rem 1.3rem}
.pc-tete{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  margin:0 0 .2rem;font-family:"Archivo",sans-serif}
.pc-tete span{font-size:1rem;font-weight:600;color:var(--papier)}
.pc-tete b{font-size:.78rem;font-weight:500;color:var(--n1);border:1px solid var(--filet-2);
  padding:.16rem .5rem}
.pc-note{margin:0 0 1.1rem;font-family:"Archivo",sans-serif;font-size:.74rem;color:var(--brume)}
.pc-lignes{margin:0;padding:0;border-top:1px solid var(--filet)}
.pc-lignes div{display:flex;justify-content:space-between;gap:1rem;
  padding:.62rem 0;border-bottom:1px solid var(--filet)}
.pc-lignes dt{margin:0;font-family:"Archivo",sans-serif;font-size:.85rem;color:var(--brume)}
.pc-lignes dd{margin:0;font-family:"Archivo",sans-serif;font-size:.88rem;font-weight:500;
  white-space:nowrap}
.pc-haut{color:var(--n5)}
.pc-bas{color:#E38A6E}
.pc-total{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  margin:1rem 0 0;font-family:"Archivo",sans-serif}
.pc-total span{font-size:.9rem;color:var(--papier)}
.pc-total b{font-size:1.45rem;font-weight:600;letter-spacing:-.02em;color:var(--n1)}
@media (max-width:900px){.promo-carte{display:none}}

/* ── le même bandeau, posé dans une section plutôt qu'en pied de page ──── */
.promo--section{background:rgba(13,20,26,.5);border:1px solid var(--filet);
  border-top:none;margin:0 0 3.2rem}
.promo--section .promo-in{max-width:none;padding:clamp(1.8rem,3.4vw,2.6rem)}
.promo--section h2{font-size:clamp(1.5rem,2.8vw,2rem)}

/* ═══ carte flottante ═══════════════════════════════════════════════════ */
.flotte{position:fixed;right:clamp(1rem,2vw,1.6rem);bottom:clamp(1rem,2vw,1.6rem);
  z-index:9;width:360px;max-width:calc(100vw - 2rem);
  background:rgba(9,14,19,.94);backdrop-filter:blur(18px);
  border:1px solid var(--filet-2);box-shadow:0 24px 60px rgba(0,0,0,.55);
  opacity:0;transform:translateY(18px);pointer-events:none;
  transition:opacity .5s cubic-bezier(.2,.6,.2,1),transform .5s cubic-bezier(.2,.6,.2,1)}
.flotte.vue{opacity:1;transform:none;pointer-events:auto}
.flotte[hidden]{display:none}
.flotte-x{position:absolute;top:6px;right:6px;z-index:2;width:30px;height:30px;
  border:0;background:rgba(9,14,19,.7);color:var(--brume);font-size:19px;line-height:1;
  cursor:pointer;transition:color .25s,background .25s}
.flotte-x:hover{color:var(--papier);background:rgba(9,14,19,.95)}
.flotte-img{display:block;line-height:0;border-bottom:1px solid var(--filet)}
.flotte-img img{width:100%;height:auto;display:block}
.flotte-txt{padding:1.05rem 1.15rem 1.25rem}
.flotte-sourcil{font-family:"Archivo",sans-serif;font-size:.72rem;color:var(--n1);margin:0 0 .35rem}
.flotte-titre{font-family:"Archivo",sans-serif;font-weight:600;font-size:1.06rem;
  color:var(--papier);margin:0 0 .45rem;letter-spacing:-.01em}
.flotte-corps{color:var(--brume);font-size:.93rem;line-height:1.5;margin:0 0 1rem}
.flotte .bouton{padding:.6rem 1.15rem;font-size:.86rem}
@media (max-width:520px){
  .flotte{width:auto;left:1rem;right:1rem}
  .flotte-img{display:none}
}
@media (prefers-reduced-motion:reduce){
  .flotte{transition:opacity .3s}
  .flotte.vue{transform:none}
}