/* ==========================================================================
   TechToolGeek — édition cristalline (v4 candidate)
   Site vitrine statique multi-pages. Aucune dépendance externe.

   Vocabulaire de grille et de composants repris de Bootstrap
   (container / row / col-* / card / btn / badge / navbar), réimplémenté
   localement : rien n'est chargé depuis un CDN.

   Deux garde-fous par rapport à une grille Bootstrap standard :
     - chaque colonne porte min-width:0, ce qui empêche un contenu large
       (mot long, tableau, image) de faire déborder la ligne ;
     - la somme des colonnes d'une même .row est contrôlée automatiquement
       à la construction : à chaque point de rupture, elle tient sur 12 ou
       se remplit exactement sur plusieurs lignes. Une somme intermédiaire
       laisse une dernière ligne incomplète — c'est exactement le défaut de
       la version 1, où 41,67 + 58,33 + 41,67 = 141,67 % (17 colonnes sur
       12) laissait 7/12 de vide.

   Palette cristalline : neutres froids, surfaces claires, effet de verre.
   Aucune nuance de vert. Contraste minimal mesuré : 4,76:1 (AA).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Polices auto-hébergées — IBM Plex Sans (SIL Open Font License 1.1)
   -------------------------------------------------------------------------- */
@font-face{font-family:"IBM Plex Sans";src:url("fonts/IBMPlexSans-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("fonts/IBMPlexSans-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("fonts/IBMPlexSans-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("fonts/IBMPlexSans-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* --------------------------------------------------------------------------
   2. Jetons de conception
   -------------------------------------------------------------------------- */
:root{
  /* Bleus de charte */
  --nuit:#081a33;
  --nuit-clair:#0e2748;
  --institutionnel:#135eab;
  --institutionnel-fonce:#0f4d8d;
  --electrique:#39a8ff;
  --bleu-clair:#dceeff;

  /* Surfaces cristallines — neutres froids */
  --fond:#f5f9fd;
  --surface:#ffffff;
  --givre:#eef5fd;
  --verre:rgba(255,255,255,.72);

  /* Encres */
  --encre:#0d1b2a;
  --encre-douce:#44586b;
  --encre-tenue:#5d7186;

  /* Traits */
  --trait:#dbe7f4;
  --trait-fin:#e8f0f9;
  --trait-nuit:rgba(220,238,255,.18);

  /* Accents */
  --orange:#ed6a3d;
  --rouge:#d94a4a;
  --rouge-fonce:#c23838;

  /* Ombres — superposées, douces, jamais dures */
  --ombre-1:0 1px 2px rgba(8,26,51,.04), 0 2px 8px rgba(8,26,51,.04);
  --ombre-2:0 2px 6px rgba(8,26,51,.05), 0 12px 28px -12px rgba(8,26,51,.16);
  --ombre-3:0 4px 10px rgba(8,26,51,.06), 0 24px 48px -20px rgba(19,94,171,.28);
  --ombre-verre:0 1px 0 rgba(255,255,255,.7) inset, 0 1px 20px rgba(8,26,51,.05);

  /* Typographie */
  --pile:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,Helvetica,sans-serif;

  /* Structure — conventions Bootstrap */
  --largeur:1180px;
  --gouttiere:1.5rem;
  --rayon-sm:.375rem;
  --rayon:.625rem;
  --rayon-lg:1rem;
  --rayon-pilule:100rem;
  --header-h:70px;

  /* Mouvement */
  --transition:200ms cubic-bezier(.22,.61,.36,1);
  --revelation:560ms cubic-bezier(.22,.61,.36,1);
}

/* --------------------------------------------------------------------------
   3. Réinitialisation et bases
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 20px);
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  font-family:var(--pile);
  font-size:17px;
  font-weight:400;
  line-height:1.68;
  color:var(--encre);
  background-color:var(--fond);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4{
  margin:0 0 .5em;
  line-height:1.16;
  letter-spacing:-.021em;
  font-weight:600;
  color:var(--nuit);
  text-wrap:balance;
}
h1{font-size:clamp(2rem,4.6vw,3.25rem);font-weight:700;letter-spacing:-.032em}
h2{font-size:clamp(1.6rem,3.2vw,2.35rem)}
h3{font-size:clamp(1.08rem,2vw,1.32rem)}
h4{font-size:1rem}

p{margin:0 0 1.1em;max-width:70ch}
p:last-child{margin-bottom:0}
.lead{font-size:clamp(1.04rem,1.8vw,1.16rem);color:var(--encre-douce);max-width:66ch;line-height:1.62}

a{color:var(--institutionnel);text-decoration:none;transition:color var(--transition)}
a:hover{color:var(--institutionnel-fonce);text-decoration:underline}

ul,ol{margin:0;padding:0}
img{max-width:100%;height:auto;display:block}
strong{font-weight:600}

a:focus-visible,button:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--electrique);
  outline-offset:3px;
  border-radius:var(--rayon-sm);
}
main:focus{outline:none}

.saut-contenu{
  position:absolute;left:-9999px;top:0;z-index:1080;
  padding:12px 20px;background:var(--nuit);color:#fff;font-weight:600;
  border-radius:0 0 var(--rayon) 0;
}
.saut-contenu:focus{left:0;top:0;text-decoration:none;color:#fff}

.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* --------------------------------------------------------------------------
   4. Grille 12 colonnes (conventions Bootstrap)
   -------------------------------------------------------------------------- */
.container{
  width:100%;max-width:var(--largeur);margin-inline:auto;
  padding-inline:var(--gouttiere);
}

.row{
  display:flex;flex-wrap:wrap;
  margin-inline:calc(var(--gouttiere) * -.5);
  --espace-y:0rem;
  margin-top:calc(var(--espace-y) * -1);
}
.row > *{
  flex:0 0 auto;width:100%;max-width:100%;
  min-width:0;                    /* empêche tout débordement du contenu */
  padding-inline:calc(var(--gouttiere) * .5);
  margin-top:var(--espace-y);
}
.g-3{--espace-y:1rem;--gouttiere:1rem}
.g-4{--espace-y:1.5rem;--gouttiere:1.5rem}
.g-5{--espace-y:2.25rem;--gouttiere:2.25rem}

.col-12{width:100%}
.col-6{width:50%}
@media (min-width:576px){
  .col-sm-4{width:33.333333%}
  .col-sm-6{width:50%}
}
@media (min-width:768px){
  .col-md-4{width:33.333333%}
  .col-md-5{width:41.666667%}
  .col-md-6{width:50%}
  .col-md-7{width:58.333333%}
  .col-md-8{width:66.666667%}
}
@media (min-width:992px){
  .col-lg-3{width:25%}
  .col-lg-4{width:33.333333%}
  .col-lg-5{width:41.666667%}
  .col-lg-6{width:50%}
  .col-lg-7{width:58.333333%}
  .col-lg-8{width:66.666667%}
  .col-lg-9{width:75%}
  .col-lg-12{width:100%}
}
.align-items-center{align-items:center}

/* --------------------------------------------------------------------------
   5. Sections et fonds
   -------------------------------------------------------------------------- */
.section{padding:clamp(60px,8vw,104px) 0;position:relative}
.section-sm{padding:clamp(40px,5vw,64px) 0}
.bg-blanc{background:var(--surface)}
.bg-givre{background:var(--givre)}
.bg-nuit{background:var(--nuit);color:var(--bleu-clair)}
.bg-nuit h2,.bg-nuit h3,.bg-nuit h4{color:#fff}
.bg-nuit p,.bg-nuit .lead{color:var(--bleu-clair)}

/* Voile cristallin : dégradé très doux, remplace les aplats lourds */
.bg-cristal{
  background:
    radial-gradient(1100px 460px at 88% -8%, rgba(57,168,255,.13), transparent 62%),
    radial-gradient(820px 380px at 4% 104%, rgba(19,94,171,.09), transparent 60%),
    linear-gradient(180deg, var(--surface) 0%, var(--fond) 100%);
}

/* Filet dégradé entre deux sections claires */
.filet::before{
  content:"";position:absolute;inset-inline:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--trait) 18%,var(--trait) 82%,transparent);
}

.section-entete{max-width:780px;margin-bottom:clamp(34px,4vw,54px)}

.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:.74rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--institutionnel);margin-bottom:16px;
  padding:6px 14px;border-radius:var(--rayon-pilule);
  background:var(--bleu-clair);
}
.bg-nuit .eyebrow{color:var(--bleu-clair);background:rgba(220,238,255,.12)}

.text-muted{color:var(--encre-douce)}

/* --------------------------------------------------------------------------
   6. Barre de navigation — effet de verre
   -------------------------------------------------------------------------- */
.navbar{
  position:sticky;top:0;z-index:1030;
  background:var(--verre);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color var(--transition),box-shadow var(--transition),background-color var(--transition);
}
.navbar.est-defile{
  border-bottom-color:var(--trait);
  box-shadow:var(--ombre-verre);
  background:rgba(255,255,255,.86);
}
.navbar__interieur{
  display:flex;align-items:center;justify-content:space-between;
  min-height:var(--header-h);gap:16px;
}

.navbar-brand{
  display:inline-flex;align-items:center;gap:11px;
  font-size:1.14rem;font-weight:700;letter-spacing:-.02em;
  color:var(--nuit);white-space:nowrap;
}
.navbar-brand:hover{color:var(--institutionnel);text-decoration:none}
.navbar-brand img{width:28px;height:28px;flex:0 0 auto;border-radius:7px;box-shadow:var(--ombre-1)}

.progression{
  position:absolute;inset-inline:0;bottom:-1px;height:2px;
  transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--institutionnel),var(--electrique));
  pointer-events:none;
}

.navbar-nav{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0}
.nav-link{
  position:relative;display:block;padding:9px 14px;
  font-size:.94rem;font-weight:500;color:var(--encre-douce);
  border-radius:var(--rayon-sm);
  transition:color var(--transition),background-color var(--transition);
}
.nav-link::after{
  content:"";position:absolute;left:14px;right:14px;bottom:3px;height:2px;
  background:linear-gradient(90deg,var(--institutionnel),var(--electrique));
  border-radius:2px;transform:scaleX(0);transform-origin:0 50%;
  transition:transform var(--transition);
}
.nav-link:hover{color:var(--nuit);text-decoration:none;background:rgba(220,238,255,.5)}
.nav-link:hover::after{transform:scaleX(1)}
.nav-link[aria-current]{color:var(--institutionnel);font-weight:600}
.nav-link[aria-current]::after{transform:scaleX(1)}

.navbar-toggler{
  display:none;align-items:center;justify-content:center;
  width:46px;height:46px;padding:0;background:var(--surface);
  border:1px solid var(--trait);border-radius:var(--rayon);
  cursor:pointer;color:var(--nuit);box-shadow:var(--ombre-1);
}
.navbar-toggler:hover{background:var(--givre);border-color:var(--institutionnel)}
.navbar-toggler svg{width:22px;height:22px}
.navbar-toggler .icone-fermer{display:none}
.navbar-toggler[aria-expanded="true"] .icone-ouvrir{display:none}
.navbar-toggler[aria-expanded="true"] .icone-fermer{display:block}

@media (max-width:991px){
  .navbar-toggler{display:flex}
  .navbar-collapse{
    position:absolute;inset-inline:0;top:100%;
    background:rgba(255,255,255,.97);
    backdrop-filter:saturate(180%) blur(14px);
    -webkit-backdrop-filter:saturate(180%) blur(14px);
    border-bottom:1px solid var(--trait);
    box-shadow:var(--ombre-2);display:none;
  }
  .navbar-collapse.est-ouvert{display:block}
  .navbar-nav{flex-direction:column;align-items:stretch;gap:0;padding:10px var(--gouttiere) 18px}
  .nav-link{padding:14px 12px;font-size:1rem;border-bottom:1px solid var(--trait-fin);border-radius:0}
  .nav-link::after{display:none}
  .navbar-nav li:last-child .nav-link{border-bottom:0}
}

/* --------------------------------------------------------------------------
   7. Boutons
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:48px;padding:12px 26px;
  font-family:inherit;font-size:1rem;font-weight:600;line-height:1.3;text-align:center;
  border:1px solid transparent;border-radius:var(--rayon);cursor:pointer;
  transition:background-color var(--transition),color var(--transition),
             border-color var(--transition),transform var(--transition),
             box-shadow var(--transition);
}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn svg{width:17px;height:17px;flex:0 0 auto;transition:transform var(--transition)}
.btn:hover svg{transform:translateX(3px)}
.btn-lg{min-height:54px;padding:14px 30px;font-size:1.04rem}

.btn-primary{
  background:linear-gradient(180deg,#1a6cbe,var(--institutionnel));
  color:#fff;box-shadow:0 1px 2px rgba(8,26,51,.12), 0 8px 20px -10px rgba(19,94,171,.7);
}
.btn-primary:hover{background:linear-gradient(180deg,#155fa8,var(--institutionnel-fonce));color:#fff;box-shadow:var(--ombre-3)}

.btn-outline-primary{
  background:var(--surface);color:var(--institutionnel);
  border-color:var(--trait);box-shadow:var(--ombre-1);
}
.btn-outline-primary:hover{
  background:var(--givre);border-color:var(--institutionnel);
  color:var(--institutionnel-fonce);box-shadow:var(--ombre-2);
}

.btn-clair{background:var(--electrique);color:var(--nuit);box-shadow:0 8px 22px -12px rgba(57,168,255,.9)}
.btn-clair:hover{background:var(--bleu-clair);color:var(--nuit)}

.btn-fantome{background:rgba(255,255,255,.06);color:var(--bleu-clair);border-color:rgba(220,238,255,.34)}
.btn-fantome:hover{background:rgba(220,238,255,.14);border-color:var(--electrique);color:#fff}

.groupe-btn{display:flex;flex-wrap:wrap;gap:14px}

/* --------------------------------------------------------------------------
   8. Cartes
   -------------------------------------------------------------------------- */
.card{
  display:flex;flex-direction:column;height:100%;
  background:var(--surface);
  border:1px solid var(--trait-fin);border-radius:var(--rayon-lg);
  box-shadow:var(--ombre-1);
  transition:border-color var(--transition),box-shadow var(--transition),transform var(--transition);
  overflow:hidden;
}
.card:hover{border-color:var(--trait);box-shadow:var(--ombre-3);transform:translateY(-3px)}
.card-body{padding:clamp(22px,2.4vw,30px);display:flex;flex-direction:column;flex:1 1 auto}
.card-title{margin-bottom:12px}
.card-text{color:var(--encre-douce);font-size:.97rem;max-width:none}
.card-media{
  background:linear-gradient(180deg,var(--givre),var(--surface));
  border-bottom:1px solid var(--trait-fin);padding:18px 22px 0;
}
.card-media img{width:100%;height:auto;border-radius:var(--rayon) var(--rayon) 0 0}
.card-aller{
  margin-top:auto;padding-top:20px;display:inline-flex;align-items:center;gap:8px;
  font-weight:600;font-size:.94rem;color:var(--institutionnel);
}
.card-aller svg{width:16px;height:16px;transition:transform var(--transition)}
.card:hover .card-aller svg,a.card:hover .card-aller svg{transform:translateX(4px)}
a.card{color:inherit}
a.card:hover{text-decoration:none;color:inherit}
.card-numero{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;margin-bottom:14px;
  font-size:.78rem;font-weight:700;letter-spacing:.04em;
  color:var(--institutionnel);background:var(--bleu-clair);
  border-radius:var(--rayon-sm);font-variant-numeric:tabular-nums;
}

.liste-marquee{list-style:none;padding:0;margin:14px 0 0}
.liste-marquee li{
  position:relative;padding-left:20px;margin-bottom:7px;
  font-size:.95rem;color:var(--encre-douce);
}
.liste-marquee li::before{
  content:"";position:absolute;left:0;top:.66em;
  width:7px;height:2px;border-radius:1px;background:var(--electrique);
}
.liste-marquee li:last-child{margin-bottom:0}
.bg-nuit .liste-marquee li{color:var(--bleu-clair)}

/* Offre d’entrée et accès aux preuves */
.offre-pilote{
  padding:clamp(28px,4vw,46px);background:rgba(255,255,255,.86);
  border:1px solid var(--trait);border-radius:var(--rayon-lg);
  box-shadow:var(--ombre-3);backdrop-filter:blur(10px);
}
.offre-pilote__surtitle,.cas-mvdg__surtitle{
  display:block;margin-bottom:10px;font-size:.74rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--institutionnel);
}
.offre-etape{
  height:100%;padding:20px;background:var(--givre);
  border:1px solid var(--trait-fin);border-radius:var(--rayon);
}
.offre-etape__rang{
  display:block;margin-bottom:8px;font-size:.76rem;font-weight:700;
  letter-spacing:.11em;color:var(--institutionnel);font-variant-numeric:tabular-nums;
}
.offre-etape h4{margin-bottom:7px;color:var(--nuit)}
.offre-etape p{font-size:.91rem;line-height:1.55;color:var(--encre-douce);max-width:none}
.offre-pilote__cadre{
  height:100%;padding:28px;background:var(--nuit);color:var(--bleu-clair);
  border-radius:var(--rayon-lg);box-shadow:var(--ombre-2);
}
.offre-pilote__cadre h3{color:#fff}
.liste-coche{list-style:none;padding:0;margin:18px 0}
.liste-coche li{
  position:relative;padding-left:28px;margin-bottom:11px;color:var(--encre-douce);
}
.liste-coche li::before{
  content:"✓";position:absolute;left:0;top:-.05em;
  color:var(--institutionnel);font-weight:700;
}
.offre-pilote__cadre .liste-coche li{color:var(--bleu-clair)}
.offre-pilote__cadre .liste-coche li::before{color:var(--electrique)}
.offre-pilote__condition{
  padding-top:18px;border-top:1px solid var(--trait-nuit);
  color:var(--bleu-clair);font-size:.93rem;
}
.preuve-lien{
  display:block;height:100%;padding:28px;background:var(--surface);color:inherit;
  border:1px solid var(--trait-fin);border-radius:var(--rayon-lg);box-shadow:var(--ombre-1);
  transition:border-color var(--transition),box-shadow var(--transition),transform var(--transition);
}
.preuve-lien:hover{
  color:inherit;text-decoration:none;border-color:var(--electrique);
  box-shadow:var(--ombre-3);transform:translateY(-3px);
}
.preuve-lien p{color:var(--encre-douce)}
.preuve-lien .card-aller{padding-top:8px}

/* --------------------------------------------------------------------------
   9. Hero
   -------------------------------------------------------------------------- */
.hero{position:relative;padding:clamp(64px,9vw,120px) 0 clamp(56px,7vw,96px);overflow:clip}
.hero::after{
  content:"";position:absolute;inset-inline:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--trait) 20%,var(--trait) 80%,transparent);
}
/* Éclat cristallin : deux losanges de lumière, très discrets */
.hero__eclat{
  position:absolute;top:-120px;right:-80px;width:640px;height:640px;
  pointer-events:none;opacity:.5;
  background:
    conic-gradient(from 210deg at 50% 50%, rgba(57,168,255,.22), rgba(220,238,255,0) 38%,
                   rgba(19,94,171,.16) 62%, rgba(220,238,255,0) 88%);
  filter:blur(28px);border-radius:46% 54% 52% 48%;
}
.hero > .container{position:relative;z-index:1}

.hero__titre{margin-bottom:26px}
.hero__titre span{display:block;overflow-wrap:anywhere}
.hero__titre span:nth-child(2){color:var(--institutionnel)}
.hero__titre span:nth-child(3){
  background:linear-gradient(96deg,var(--institutionnel) 8%,var(--electrique) 68%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero__contact{margin-top:26px;font-size:.95rem;color:var(--encre-tenue)}
.hero__contact a{font-weight:500}

/* Chaîne de valeur */
.chaine{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  margin-top:clamp(40px,5vw,58px);padding:16px 20px;
  background:var(--verre);border:1px solid var(--trait-fin);
  border-radius:var(--rayon-pilule);box-shadow:var(--ombre-1);
  width:fit-content;max-width:100%;
}
.chaine__maillon{
  display:inline-flex;align-items:center;gap:9px;
  font-size:.8rem;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--nuit);
}
.chaine__point{
  width:9px;height:9px;border-radius:50%;flex-shrink:0;
  background:var(--electrique);box-shadow:0 0 0 3px rgba(57,168,255,.18);
}
.chaine__fleche{color:var(--institutionnel);opacity:.55;font-size:.9rem}

/* En-tête des pages intérieures */
.entete-page{position:relative;padding:clamp(52px,7vw,86px) 0 clamp(44px,5vw,64px);overflow:clip}
.entete-page::after{
  content:"";position:absolute;inset-inline:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--trait) 20%,var(--trait) 80%,transparent);
}
.entete-page > .container{position:relative;z-index:1}
.fil{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  font-size:.85rem;color:var(--encre-tenue);margin-bottom:20px;
}
.fil span[aria-hidden]{color:var(--trait)}

/* --------------------------------------------------------------------------
   10. Chiffres clés
   -------------------------------------------------------------------------- */
.chiffre{
  height:100%;padding:24px 22px;background:var(--surface);
  border:1px solid var(--trait-fin);border-radius:var(--rayon-lg);
  box-shadow:var(--ombre-1);position:relative;overflow:hidden;
  transition:box-shadow var(--transition),transform var(--transition);
}
.chiffre:hover{box-shadow:var(--ombre-2);transform:translateY(-2px)}
.chiffre::before{
  content:"";position:absolute;inset-inline:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--institutionnel),var(--electrique));
}
.chiffre__valeur{
  display:block;font-size:clamp(1.85rem,3.4vw,2.35rem);font-weight:700;
  line-height:1.1;letter-spacing:-.03em;color:var(--nuit);margin-bottom:6px;
  font-variant-numeric:tabular-nums;
}
.chiffre__valeur--long{font-size:clamp(1.45rem,2.3vw,1.8rem)}
.chiffre__libelle{font-size:.94rem;color:var(--encre-douce)}

/* --------------------------------------------------------------------------
   11. Badges, pastilles, références
   -------------------------------------------------------------------------- */
.badge{
  display:inline-block;padding:6px 14px;
  font-size:.78rem;font-weight:700;letter-spacing:.11em;
  border-radius:var(--rayon-sm);
}
.badge-allow{background:var(--electrique);color:var(--nuit)}
.badge-review{background:var(--orange);color:var(--nuit)}
.badge-block{background:var(--rouge-fonce);color:#fff}

.pastilles{display:flex;flex-wrap:wrap;gap:9px;list-style:none;padding:0;margin:0}
.pastille{
  padding:8px 16px;font-size:.92rem;font-weight:500;color:var(--nuit);
  background:var(--surface);border:1px solid var(--trait-fin);
  border-radius:var(--rayon-pilule);box-shadow:var(--ombre-1);
  transition:border-color var(--transition),transform var(--transition),box-shadow var(--transition);
}
.pastille:hover{border-color:var(--electrique);transform:translateY(-2px);box-shadow:var(--ombre-2)}
.pastille--bleue{background:var(--bleu-clair);border-color:transparent;box-shadow:none}

.encadre{
  padding:24px 26px;background:var(--surface);
  border:1px solid var(--trait-fin);border-left:4px solid var(--institutionnel);
  border-radius:0 var(--rayon-lg) var(--rayon-lg) 0;box-shadow:var(--ombre-1);
}
.encadre h2,.encadre h3{font-size:1.05rem;margin-bottom:10px}
.encadre__societes{font-size:1.04rem;font-weight:600;color:var(--nuit);margin-bottom:8px}
.encadre__note{font-size:.92rem;color:var(--encre-douce);margin:0}

/* --------------------------------------------------------------------------
   12. AXIOM
   -------------------------------------------------------------------------- */
.enonce{
  margin:clamp(28px,4vw,42px) 0;
  padding:clamp(26px,3vw,36px) clamp(28px,3vw,40px);
  background:linear-gradient(135deg,var(--surface),var(--givre));
  border:1px solid var(--trait);border-left:4px solid var(--electrique);
  border-radius:0 var(--rayon-lg) var(--rayon-lg) 0;
  box-shadow:var(--ombre-2);
}
.enonce p{
  font-size:clamp(1.06rem,1.9vw,1.26rem);line-height:1.56;
  color:var(--nuit);font-weight:500;max-width:62ch;
}
.enonce strong{color:var(--institutionnel);font-weight:700}
.bg-nuit .enonce{
  background:linear-gradient(135deg,var(--nuit-clair),rgba(19,94,171,.16));
  border-color:var(--trait-nuit);box-shadow:none;
}
.bg-nuit .enonce p{color:#fff}
.bg-nuit .enonce strong{color:var(--electrique)}

.pipeline{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(136px,1fr));gap:12px;
  margin:36px 0;list-style:none;padding:0;
}
.pipeline__etape{
  padding:18px 16px;background:var(--surface);
  border:1px solid var(--trait-fin);border-top:2px solid var(--electrique);
  border-radius:var(--rayon-sm) var(--rayon-sm) var(--rayon) var(--rayon);
  box-shadow:var(--ombre-1);
  transition:transform var(--transition),box-shadow var(--transition);
}
.pipeline__etape:hover{transform:translateY(-2px);box-shadow:var(--ombre-2)}
.pipeline__rang{
  display:block;font-size:.72rem;font-weight:700;letter-spacing:.12em;
  color:var(--institutionnel);margin-bottom:6px;font-variant-numeric:tabular-nums;
}
.pipeline__nom{display:block;font-size:.95rem;font-weight:600;letter-spacing:.03em;color:var(--nuit)}

.etat{
  height:100%;padding:26px;background:var(--surface);
  border:1px solid var(--trait-fin);border-radius:var(--rayon-lg);
  border-top-width:4px;border-top-style:solid;box-shadow:var(--ombre-1);
  transition:transform var(--transition),box-shadow var(--transition);
}
.etat:hover{transform:translateY(-3px);box-shadow:var(--ombre-3)}
.etat--allow{border-top-color:var(--electrique)}
.etat--review{border-top-color:var(--orange)}
.etat--block{border-top-color:var(--rouge)}
.etat .badge{margin-bottom:15px}
.etat p{font-size:.97rem;color:var(--encre-douce);max-width:none}
.etat__glose{display:block;margin-top:10px;font-size:.89rem;color:var(--encre-tenue)}

.principes-axiom{columns:2;column-gap:34px;list-style:none;padding:0;margin-top:8px}
@media (max-width:575px){.principes-axiom{columns:1}}
.principes-axiom li{
  break-inside:avoid;position:relative;padding-left:22px;margin-bottom:9px;
  font-size:.95rem;color:var(--encre-douce);
}
.principes-axiom li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:8px;height:8px;border-radius:50%;
  border:2px solid var(--electrique);background:var(--surface);
}

.mention-cadre{
  margin-top:36px;padding:24px 28px;
  background:linear-gradient(135deg,rgba(57,168,255,.09),rgba(220,238,255,.4));
  border:1px solid var(--trait);border-left:4px solid var(--electrique);
  border-radius:0 var(--rayon-lg) var(--rayon-lg) 0;
}
.mention-cadre p{color:var(--encre-douce)}

.principe{
  height:100%;padding:28px;background:var(--surface);
  border:1px solid var(--trait-fin);border-radius:var(--rayon-lg);
  box-shadow:var(--ombre-1);
  transition:box-shadow var(--transition),transform var(--transition);
}
.principe:hover{box-shadow:var(--ombre-3);transform:translateY(-3px)}
.principe__cle{
  display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--institutionnel);
  background:var(--bleu-clair);padding:5px 12px;border-radius:var(--rayon-pilule);
  margin-bottom:14px;
}
.principe p{font-size:.97rem;color:var(--encre-douce);max-width:none}

/* Exemple AXIOM en trente secondes */
.scenario-axiom{
  padding:clamp(28px,4vw,44px);background:var(--surface);
  border:1px solid var(--trait-fin);border-radius:var(--rayon-lg);box-shadow:var(--ombre-2);
}
.scenario-axiom__flux{list-style:none;padding:0;margin:0}
.scenario-axiom__flux li{
  display:flex;gap:18px;padding:17px 0;border-bottom:1px solid var(--trait-fin);
}
.scenario-axiom__flux li:first-child{padding-top:0}
.scenario-axiom__flux li:last-child{padding-bottom:0;border-bottom:0}
.scenario-axiom__rang{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;background:var(--bleu-clair);
  color:var(--institutionnel);font-size:.78rem;font-weight:700;font-variant-numeric:tabular-nums;
}
.scenario-axiom__flux strong{display:block;margin-bottom:4px;color:var(--nuit)}
.scenario-axiom__flux p{margin:0;color:var(--encre-douce);max-width:none}
.scenario-axiom__verdict{
  height:100%;padding:28px;background:var(--nuit);color:var(--bleu-clair);
  border-radius:var(--rayon-lg);box-shadow:var(--ombre-2);
}
.scenario-axiom__verdict h3{margin-top:18px;color:#fff}
.scenario-axiom__verdict p{color:var(--bleu-clair)}
.trace-axiom{
  display:grid;gap:7px;margin-top:22px;padding:18px;
  background:rgba(255,255,255,.06);border:1px solid var(--trait-nuit);
  border-radius:var(--rayon);font-family:Menlo,Monaco,"Courier New",monospace;
  font-size:.78rem;line-height:1.5;color:#fff;overflow-wrap:anywhere;
}
.distinction-axiom{
  padding:26px 28px;background:var(--surface);border:1px solid var(--trait);
  border-left:4px solid var(--electrique);border-radius:0 var(--rayon-lg) var(--rayon-lg) 0;
  box-shadow:var(--ombre-1);
}
.distinction-axiom p{margin:0;color:var(--encre-douce);max-width:none}

/* --------------------------------------------------------------------------
   13. MVDG
   -------------------------------------------------------------------------- */
.etapes{
  background:var(--surface);border:1px solid var(--trait-fin);
  border-radius:var(--rayon-lg);box-shadow:var(--ombre-1);overflow:hidden;
}
.etape{display:flex;gap:18px;padding:16px 22px;border-bottom:1px solid var(--trait-fin)}
.etape:last-child{border-bottom:0}
.etape:hover{background:var(--givre)}
.etape__rang{
  flex:0 0 auto;width:34px;font-size:.9rem;font-weight:700;
  color:var(--institutionnel);font-variant-numeric:tabular-nums;
}
.etape__intitule{font-size:.99rem;color:var(--encre);margin:0;max-width:none}

.livrable{
  height:100%;padding:22px;background:var(--surface);
  border:1px solid var(--trait-fin);border-radius:var(--rayon-lg);
  box-shadow:var(--ombre-1);font-weight:500;color:var(--nuit);
  transition:border-color var(--transition),transform var(--transition),box-shadow var(--transition);
}
.livrable:hover{border-color:var(--electrique);transform:translateY(-2px);box-shadow:var(--ombre-2)}

.principes-mvdg{
  padding:28px;background:var(--nuit);border-radius:var(--rayon-lg);
  box-shadow:var(--ombre-2);
}
.principes-mvdg h2,.principes-mvdg h3{color:#fff;font-size:1.06rem}
.principes-mvdg ul{list-style:none;padding:0;margin:0}
.principes-mvdg li{
  position:relative;padding-left:24px;margin-bottom:11px;
  color:var(--bleu-clair);font-size:.97rem;
}
.principes-mvdg li:last-child{margin-bottom:0}
.principes-mvdg li::before{
  content:"";position:absolute;left:0;top:.55em;
  width:9px;height:9px;border:2px solid var(--electrique);border-radius:50%;
}
.note-cadre{margin-top:22px;font-size:.9rem;color:var(--encre-tenue)}

/* Cas MVDG démontré */
.chiffre--preuve{background:linear-gradient(180deg,var(--surface),var(--fond))}
.cas-mvdg{
  padding:clamp(28px,4vw,44px);background:var(--givre);
  border:1px solid var(--trait);border-radius:var(--rayon-lg);box-shadow:var(--ombre-2);
}
.cas-mvdg__etapes{list-style:none;padding:0;margin:20px 0 0}
.cas-mvdg__etapes li{
  display:flex;gap:16px;padding:14px 0;border-bottom:1px solid var(--trait);
}
.cas-mvdg__etapes li:last-child{border-bottom:0}
.cas-mvdg__etapes span{
  flex:0 0 auto;width:34px;color:var(--institutionnel);font-size:.8rem;
  font-weight:700;font-variant-numeric:tabular-nums;
}
.cas-mvdg__etapes p{margin:0;color:var(--encre-douce);max-width:none}
.cas-mvdg__livrables{
  height:100%;padding:28px;background:var(--surface);
  border:1px solid var(--trait-fin);border-radius:var(--rayon-lg);box-shadow:var(--ombre-1);
}
.cas-mvdg__decision{
  margin-top:24px;padding-top:20px;border-top:1px solid var(--trait-fin);
}
.cas-mvdg__decision .badge{margin-bottom:10px}
.cas-mvdg__decision p{font-size:.92rem;color:var(--encre-douce)}
.limites-cas{
  padding:26px 28px;background:var(--surface);border:1px solid var(--trait-fin);
  border-radius:var(--rayon-lg);box-shadow:var(--ombre-1);
}
.limites-cas h3{font-size:1.05rem}
.limites-cas p{margin:0;color:var(--encre-douce);max-width:none}

/* --------------------------------------------------------------------------
   14. Parcours et habilitations
   -------------------------------------------------------------------------- */
.parcours{position:relative;padding-left:28px;list-style:none;margin:0}
.parcours::before{
  content:"";position:absolute;left:0;top:6px;bottom:6px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,var(--electrique),var(--bleu-clair));
}
.parcours__entree{position:relative;padding:0 0 30px}
.parcours__entree:last-child{padding-bottom:0}
.parcours__entree::before{
  content:"";position:absolute;left:-34px;top:7px;
  width:12px;height:12px;border-radius:50%;
  background:var(--surface);border:2px solid var(--institutionnel);
  box-shadow:0 0 0 4px var(--fond);
  transition:background-color var(--transition),transform var(--transition);
}
.parcours__entree:hover::before{background:var(--electrique);transform:scale(1.2)}
.parcours__lieu{font-size:1.1rem;font-weight:600;color:var(--nuit);margin-bottom:4px}
.parcours__detail{font-size:.97rem;color:var(--encre-douce);margin:0}

.habilitation{
  height:100%;padding:26px 28px;background:var(--surface);
  border:1px solid var(--trait-fin);border-radius:var(--rayon-lg);
  box-shadow:var(--ombre-1);
}
.habilitation__sceau{
  display:inline-flex;align-items:center;gap:9px;
  padding:7px 15px;margin-bottom:16px;
  font-size:.74rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--institutionnel);background:var(--bleu-clair);
  border-radius:var(--rayon-pilule);
}
.habilitation__sceau svg{width:15px;height:15px}
.titres{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:12px}
.titres li{
  padding:14px 18px;background:var(--givre);
  border:1px solid var(--trait-fin);border-radius:var(--rayon);
}
.titres b{display:block;color:var(--nuit);font-weight:600;font-size:.98rem}
.titres span{display:block;font-size:.91rem;color:var(--encre-douce);margin-top:2px}

/* --------------------------------------------------------------------------
   15. Fondateur
   -------------------------------------------------------------------------- */
.portrait{
  width:100%;max-width:360px;border-radius:var(--rayon-lg);
  border:1px solid var(--trait-fin);box-shadow:var(--ombre-3);
}

/* --------------------------------------------------------------------------
   16. Contact
   -------------------------------------------------------------------------- */
.contact__titre{max-width:20ch}
.contact__liste{list-style:none;padding:0;margin:0 0 1.1em}
.contact__liste li{
  position:relative;padding-left:22px;margin-bottom:9px;
  color:var(--bleu-clair);font-size:.97rem;
}
.contact__liste li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:8px;height:2px;border-radius:1px;background:var(--electrique);
}
.contact__adresse{margin-top:26px;font-size:1.02rem}
.contact__adresse a{color:var(--electrique);font-weight:600;overflow-wrap:anywhere}
.contact__adresse a:hover{color:#fff}

/* --------------------------------------------------------------------------
   17. Pied de page
   -------------------------------------------------------------------------- */
.pied{
  background:var(--nuit);color:rgba(220,238,255,.82);
  padding:52px 0 34px;
}
.pied__marque{font-size:1.1rem;font-weight:700;color:#fff;margin-bottom:8px}
.pied__signature{font-size:.94rem;color:var(--bleu-clair);margin-bottom:0}
.pied__titre{
  font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--electrique);margin-bottom:15px;
}
.pied__nav{display:flex;flex-direction:column;gap:9px;align-items:flex-start}
.pied__nav a{color:rgba(220,238,255,.82);font-size:.94rem}
.pied__nav a:hover{color:var(--electrique);text-decoration:none}
.pied__bas{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 20px;
  margin-top:36px;padding-top:22px;border-top:1px solid var(--trait-nuit);
  font-size:.87rem;color:rgba(220,238,255,.62);
}
.pied__bas a{color:rgba(220,238,255,.62)}

/* --------------------------------------------------------------------------
   18. Pages légales et 404
   -------------------------------------------------------------------------- */
.carte-legale{
  height:100%;padding:clamp(24px,3vw,32px);background:var(--surface);
  border:1px solid var(--trait-fin);border-radius:var(--rayon-lg);
  box-shadow:var(--ombre-1);
}
.carte-legale h2{font-size:1.28rem}
.carte-legale p{color:var(--encre-douce);max-width:none}
.carte-legale a{overflow-wrap:anywhere}

.page-404{
  min-height:62vh;display:flex;align-items:center;
  padding:clamp(56px,9vw,110px) 0;
  position:relative;overflow:clip;   /* contient l'éclat cristallin */
}
.page-404__code{
  display:block;font-size:clamp(3.6rem,11vw,6.5rem);font-weight:700;
  line-height:1;letter-spacing:-.045em;margin-bottom:12px;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(96deg,var(--institutionnel),var(--electrique));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* --------------------------------------------------------------------------
   19. Retour en haut
   -------------------------------------------------------------------------- */
.retour-haut{
  position:fixed;right:20px;bottom:20px;z-index:1020;
  display:flex;align-items:center;justify-content:center;
  width:48px;height:48px;color:#fff;border:0;border-radius:50%;cursor:pointer;
  background:linear-gradient(180deg,#1a6cbe,var(--institutionnel));
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity var(--transition),visibility var(--transition),
             transform var(--transition),box-shadow var(--transition);
  box-shadow:var(--ombre-3);
}
.retour-haut.est-visible{opacity:1;visibility:visible;transform:translateY(0)}
.retour-haut:hover{transform:translateY(-3px)}
.retour-haut svg{width:20px;height:20px}

/* --------------------------------------------------------------------------
   20. Animations
   Le contenu est visible par défaut. Les effets ne s'activent que si
   .js-anime est posée sur <html>, ce que le script ne fait qu'après avoir
   installé ses observateurs : une défaillance du JavaScript ne peut pas
   masquer de contenu.
   -------------------------------------------------------------------------- */
.js-anime .reveal{opacity:0;transform:translateY(16px)}
.js-anime .reveal.est-visible{
  opacity:1;transform:none;
  transition:opacity var(--revelation),transform var(--revelation);
  transition-delay:var(--retard,0ms);
}
.js-anime .apparition{opacity:0;transform:translateY(14px)}
.js-anime .apparition.est-entree{
  opacity:1;transform:none;
  transition:opacity 660ms cubic-bezier(.22,.61,.36,1),transform 660ms cubic-bezier(.22,.61,.36,1);
  transition-delay:var(--retard,0ms);
}

/* --------------------------------------------------------------------------
   21. Préférence de mouvement réduit
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .js-anime .reveal,.js-anime .apparition{opacity:1;transform:none}
  .btn:hover,.card:hover,.etat:hover,.principe:hover,.pastille:hover,
  .livrable:hover,.chiffre:hover,.retour-haut:hover,.pipeline__etape:hover{transform:none}
  .progression{display:none}
}

/* --------------------------------------------------------------------------
   22. Utilitaires
   -------------------------------------------------------------------------- */
.mt-3{margin-top:1.5rem}
.mt-4{margin-top:2.25rem}
.mt-5{margin-top:3rem}
.mb-4{margin-bottom:2.25rem}