:root{
  --bleu:#138acb; --bleu-fonce:#1075ad; --encre:#2f2f2f; --blanc:#fefefe;
  --gris:#8a8a8a; --gris-clair:#c0cedb; --trait:#e5e7e9; --pale:#f2f3f4;
}
*{box-sizing:border-box}
html{font-size:1.125rem}
body{
  margin:0;background:#fff;color:var(--encre);
  font-family:"Droid Sans","Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;
  font-size:.88889rem;line-height:1.6;-webkit-font-smoothing:antialiased;
}
a{color:var(--bleu);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{margin:0 0 .5rem;line-height:1.4;font-weight:700}
h2{font-size:1.77778rem;line-height:1.25}
h3{font-size:1.05556rem}
p{margin:0 0 1.1rem}
img{max-width:100%}
.rangee{max-width:1180px;margin:0 auto;padding:0 22px}
.etroit{max-width:820px}
.centre{text-align:center}

/* le ciel étoilé, fixe derrière tout — .hero-background-poster de l'original */
.fond-poster{position:fixed;inset:0;z-index:-10;height:100vh;
  background:#000 url(/assets/bg_space.jpg) no-repeat center/cover}
.fond-poster:after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.1)}

/* barre noire */
.barre{background:#000;position:relative;z-index:2}
/* En-tête calqué sur celui de Bénédicte : aucun nom de site — il ne dit rien à
   qui ne connaît pas — le menu à gauche, un bouton d'action à droite, et la
   barre qui reste accessible au défilement. « Accueil » ouvre le menu, sinon
   plus rien ne ramènerait à la racine. */
.barre{position:sticky;top:0}
.barre .rangee{display:flex;align-items:center;justify-content:space-between;
  min-height:70px;gap:24px;flex-wrap:wrap}
.bouton-barre{background:var(--bleu);color:var(--blanc);border-radius:5px;
  padding:.7em 1.1em;font-size:.83333rem;font-weight:700;white-space:nowrap;
  transition:background-color .25s ease-out}
.bouton-barre:hover{background:var(--bleu-fonce);color:var(--blanc);text-decoration:none}
.barre nav{display:flex;align-items:center}
.barre nav a{color:var(--blanc);font-size:.83333rem;opacity:.92}
.barre nav a:hover{opacity:1;text-decoration:none}
.entree{position:relative;display:inline-block;margin-right:30px}
.barre nav .entree:last-child{margin-right:0}
.barre nav a[aria-current]{opacity:1;border-bottom:2px solid var(--bleu);padding-bottom:3px}
.fleche{display:inline-block;margin-left:7px;border:4px solid transparent;
  border-top:5px solid currentColor;transform:translateY(2px)}
.deroulant{position:absolute;top:100%;left:-18px;padding-top:18px;
  min-width:16rem;display:none;z-index:5}
.entree:hover .deroulant{display:block}
.deroulant a{display:block;background:#000;color:var(--blanc);
  padding:13px 18px;font-size:.83333rem;border-bottom:1px solid #1c1c1c}
.deroulant a:first-child{border-radius:5px 5px 0 0}
.deroulant a:last-child{border-bottom:0;border-radius:0 0 5px 5px}
.deroulant a:hover{background:var(--bleu)}

/* hero, sur le ciel */
.hero{color:var(--blanc);padding:40px 20px 92px}
.hero .rangee{display:flex;align-items:center;gap:40px;flex-wrap:wrap}
.hero .colonne{flex:1 1 380px;min-width:0}
.hero .illu{width:80%;height:auto;display:block;margin:0 auto}
.hero h1{font-size:3.72222rem;line-height:4.33333rem;margin-bottom:15px;color:var(--blanc)}
.hero p{color:var(--blanc);font-size:1rem;max-width:34rem}
.hero.simple{padding:64px 20px 78px;text-align:center}
.hero.simple .rangee{display:block}
.hero.simple h1{font-size:2.77778rem;line-height:1.2}
.hero.simple p{margin:0 auto;max-width:36rem}
.fil{padding:18px 0 0;font-size:.77778rem;color:var(--gris-clair);position:relative;z-index:1}
.fil a{color:var(--gris-clair)}

.bouton{display:inline-block;margin:20px 0 0;padding:.85em 1em;
  border:1px solid transparent;border-radius:5px;background:var(--bleu);
  color:var(--blanc);font-size:.9rem;line-height:1;font-weight:700;text-align:center;
  transition:background-color .25s ease-out}
.bouton:hover{background:var(--bleu-fonce);color:var(--blanc);text-decoration:none}
.lien-suite{font-size:.77778rem;font-weight:700;letter-spacing:.6px;text-transform:uppercase}

/* Corps de page. Le fond n'est PAS porté par .contenu mais par chaque section :
   c'est ce qui permet à une section d'être transparente et de laisser réapparaître
   le ciel étoilé au milieu de la page — le .block.transparent de l'original. */
.contenu{position:relative;z-index:1}
section{padding:90px 0;background:#fefefe}      /* .block */
.pale-fond{background:var(--pale)}              /* .block.grey  #f2f3f4 */
.ciel{background:0 0;border:none;color:var(--blanc)}   /* .block.transparent */
.ciel h2,.ciel h3,.ciel p,.ciel strong{color:var(--blanc)}
.ciel .chapeau p,.ciel .detail{color:var(--gris-clair)}
.ciel .etages li{border-bottom-color:rgba(255,255,255,.18)}
.chapeau{text-align:center;max-width:44rem;margin:0 auto 50px}
.chapeau p{color:var(--gris)}
.texte{max-width:44rem;margin:0 auto}
.texte h2{margin-bottom:18px}

/* les deux spécimens */
.specimens{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:52px}
.specimens img{width:100%;height:auto;display:block;margin-bottom:22px}
.specimens h3{font-size:1.33333rem}

/* les piliers */
.piliers{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:38px}
.pilier{text-align:center}
.pilier p{color:var(--gris);font-size:.83333rem}
.pilier img{width:88px;height:88px;display:block;margin:0 auto 18px}

/* les chiffres */
.chiffres{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:34px;text-align:center}
.chiffre span{color:var(--gris);font-size:.83333rem}

/* la pile */
.stack{display:flex;align-items:center;gap:56px;flex-wrap:wrap}
.stack>div{flex:1 1 320px;min-width:0}
.stack img{width:78%;max-width:320px;height:auto;display:block;margin:0 auto}
/* Liste numérotée, fondation en premier — comme l'original. Les chiffres
   comptent : ils disent que les couches se posent dans cet ordre-là. */
.etages{margin:34px 0 0;padding:0 0 0 1.6rem;font-size:.94444rem}
.etages li{padding:9px 0}
.etages li::marker{color:var(--gris-clair)}
.detail{color:var(--gris)}
.ciel .etages li::marker{color:rgba(255,255,255,.55)}
.lien-souligne{display:inline-block;margin-top:26px;text-decoration:underline}

/* Les grilles : compétences, formats. Titres en bleu vif et corps en noir,
   comme .learn-everything li h3 {color:#0d46f6} et li p {color:#000}. */
.grille{display:grid;grid-template-columns:repeat(4,1fr);gap:64px 40px}
.grille h3{color:#0d46f6;font-size:1.05556rem;margin-bottom:14px}
.grille p{color:#000;font-size:.88889rem;line-height:1.4;margin:0}
.lien-souligne{display:block;text-align:center;margin-top:56px;text-decoration:underline}

/* Les offres — .stages-of-evolution : image plein cadre, voile noir à 40 %,
   titre calé en haut à gauche, cartes blanches posées dessus. */
.evolution{position:relative;background:#000 url(/assets/bg_evolution.jpg) center/cover no-repeat;color:var(--blanc);
  padding:78px 0 90px}
.evolution:after{content:'';position:absolute;inset:0;background:#000;opacity:.4}
.evolution>.rangee{position:relative;z-index:10}
.evolution .chapeau{text-align:left;margin:0 0 300px;max-width:30rem}
.evolution h2{color:var(--blanc)}
.evolution .chapeau p{color:var(--blanc)}
.offres{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:30px}
.offre{background:#fff;border-radius:2px;overflow:hidden;text-align:center;
  color:var(--encre);display:flex;flex-direction:column}
.monogramme{background:#000;color:var(--blanc);padding:30px 0;
  font-size:2.44444rem;font-weight:700;line-height:1}
.offre-corps{padding:26px 24px 30px;display:flex;flex-direction:column;flex:1}
.offre h3{margin-bottom:10px}
.offre p{flex:1;font-size:.83333rem;color:var(--encre)}
.niveau{font-size:.72222rem;font-weight:700;color:var(--encre);margin-bottom:12px}
.jauge{height:.55556rem;border-radius:5px;background:#e7e7e7;margin:0 0 20px;overflow:hidden}
.jauge span{display:block;height:100%;background:#00c042;border-radius:5px}
.bouton-rouge{display:inline-block;align-self:center;background:#cc4b37;color:var(--blanc);
  border-radius:2px;padding:.85em 1.2em;font-size:.72222rem;font-weight:700;
  letter-spacing:.6px;text-transform:uppercase;transition:background .25s ease-out}
.bouton-rouge:hover{background:#b23f2d;color:var(--blanc);text-decoration:none}

/* les cartes simples (pages internes) */
.cartes{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:26px}
.carte{border:1px solid var(--trait);border-radius:5px;padding:30px 26px}

/* les témoignages — vignettes 16:9 */
.temoins{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:32px}
.temoins.duo{grid-template-columns:repeat(auto-fit,minmax(420px,1fr));gap:38px}
.temoins.presse{grid-template-columns:repeat(auto-fit,minmax(330px,1fr));max-width:790px;
  margin:0 auto}
.temoin{display:block;color:var(--encre)}
.temoin:hover{text-decoration:none}
.ecran{position:relative;display:block;aspect-ratio:16/9;border-radius:5px;
  overflow:hidden;background:#000}
.ecran img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .3s ease-out}
.temoin:hover .ecran img{transform:scale(1.04)}
/* le bouton est en bas à gauche : au centre il recouvrait les chiffres que
   portent les vignettes en surimpression */
.play{position:absolute;bottom:12px;left:12px;width:42px;height:42px;border-radius:50%;
  background:rgba(0,0,0,.62);transition:background .2s ease-out}
.temoin:hover .play{background:var(--bleu)}
.play:after{content:'';position:absolute;top:50%;left:55%;transform:translate(-50%,-50%);
  width:0;height:0;border-left:14px solid #fff;
  border-top:9px solid transparent;border-bottom:9px solid transparent}
.legende{display:block;padding-top:14px;font-size:.83333rem}
.legende strong{font-size:.94444rem}
.metier{color:var(--gris)}
.metier:before{content:' — '}
.resultat{display:block;color:var(--bleu);font-weight:700;margin-top:3px}
.temoins.duo .resultat{font-size:1.16667rem;line-height:1.3}
.dessous{display:block;color:var(--gris);margin-top:4px}
[id]{scroll-margin-top:90px}
.sous-titre{text-align:center;color:var(--gris);font-size:.83333rem;
  max-width:38rem;margin:0 auto 30px}
.etiquettes{margin-top:44px;text-align:center}
.etiquette{display:inline-block;margin:5px;padding:8px 16px;border:1px solid var(--trait);
  border-radius:40px;font-size:.77778rem;color:var(--gris);background:#fff}

/* Pied de page en colonnes, comme celui de consulting.com */
footer.site{background:#000;color:var(--gris-clair);position:relative;z-index:1;
  padding:62px 0 40px;font-size:.77778rem}
.colonnes-pied{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:40px;padding-bottom:44px;border-bottom:1px solid #1f1f1f}
.colonnes-pied h4{margin:0 0 14px;color:var(--blanc);font-size:.77778rem;
  text-transform:uppercase;letter-spacing:.8px}
.colonnes-pied a{display:block;color:var(--gris-clair);padding:5px 0;opacity:.8}
.colonnes-pied a:hover{opacity:1}
.bas-pied{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding-top:26px;align-items:center}
.bas-pied a{color:var(--gris-clair);margin-right:18px}

/* l'appel final, pleine largeur, sur le ciel */
.appel{text-align:center}
.appel h2{font-size:2.55556rem;margin-bottom:26px}

/* ce qui n'est pas confirmé : jaune, visible, et deploy.py refuse de publier */
.aconfirmer{display:block;background:#fff6d5;border:1px solid #e8cf7a;
  border-left:4px solid #d4a900;color:#6b5200;padding:13px 17px;border-radius:4px;
  font-size:.77778rem;line-height:1.5;max-width:44rem;margin:0 auto 34px;text-align:left}
.aconfirmer strong{display:block;text-transform:uppercase;letter-spacing:.6px;
  font-size:.66667rem;margin-bottom:4px}
.creux{background:linear-gradient(100deg,#e9ecef,#f6f7f8,#e9ecef);border-radius:4px;
  height:54px;margin:8px 0}
.pale-fond .creux{background:linear-gradient(100deg,#e2e5e8,#eceef0,#e2e5e8)}

@media (max-width:900px){
  .hero h1{font-size:2.77778rem;line-height:1.15}
  .hero.simple h1{font-size:2.11111rem}
  .hero .illu{width:66%;max-width:330px}
  .barre .rangee{min-height:0;padding-top:16px;padding-bottom:16px}
  .barre nav{flex-wrap:wrap;gap:8px 18px}
  .entree{margin-left:0}
  /* au doigt, :hover n'existe pas : on déplie le sous-menu en ligne */
  .fleche{display:none}
  .deroulant{position:static;display:inline;padding:0;min-width:0}
  .deroulant a{display:inline-block;background:none;padding:0 0 0 18px;
    border:0;opacity:.7}
  .deroulant a:hover{background:none}
  section{padding:56px 0}
}
@media (max-width:600px){ .hero h1{font-size:1.88889rem} }