/* polices */
/* latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(/_theme/fonts/bricolage-grotesque-300-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(/_theme/fonts/bricolage-grotesque-300-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/_theme/fonts/bricolage-grotesque-300-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/_theme/fonts/bricolage-grotesque-300-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/_theme/fonts/bricolage-grotesque-300-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/_theme/fonts/bricolage-grotesque-300-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_theme/fonts/geist-mono-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_theme/fonts/geist-mono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_theme/fonts/geist-mono-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_theme/fonts/geist-mono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ---- /assets/systeme.css ---- */
/* =========================================================
   SYSTEME KABAUN STUDIO
   Feuille unique du site, extraite de la page d'accueil le
   2026-09-09. Toute page du site la charge en PREMIER ; les
   feuilles specifiques (blog.css) ne portent plus que leurs
   propres composants et se chargent APRES.
   Ne pas redefinir ici un composant propre a une seule page.
   ========================================================= */
:root {
  /* Systeme repris de vydera : SIX couleurs portent 95 % du rendu,
     UN SEUL accent, aucune couleur secondaire. Le teal de la marque
     ne sert plus que dans le logo, jamais comme accent d'interface. */

  /* fonds */
  --fond: #F9F8F5;            /* page */
  --fond-carte: #FFFFFF;      /* cartes et sections claires */
  --fond-sombre: #0D1A18;     /* sections pleine largeur */
  --fond-bouton: #101614;     /* noir tirant sur l'encre de marque */

  /* encre */
  --encre-titre: #1A1A18;
  --encre: #14181A;
  --texte-2: #636360;         /* texte secondaire */
  --texte-3: #979793;         /* texte tertiaire, labels */

  /* Accent du studio, en DEUX valeurs de la meme teinte orange.
     Raison : aucune couleur unique ne passe AA a la fois sur le creme
     (#F9F8F5) et sur le vert sombre (#0D1A18) ; les deux fonds sont trop
     ecartes en luminosite, le mieux atteignable est 4,1 et 4,1. L'ancien
     ambre (240 192 64) s'en sortait en n'etant JAMAIS pose sur du clair :
     il y tombait a 1,61, donc il ne pouvait porter ni lien ni etiquette.
       --accent       sur fond sombre : 7,88 sur #0D1A18
       --accent-fonce sur fond clair  : 4,88 sur #F9F8F5
     --accent-rgb existe pour que les rgba() de cette feuille cessent
     d'ecrire la couleur en dur : changer la nuance redevient une ligne.
     L'arc du logo garde l'ambre : c'est le symbole Kabaun. */
  --accent: #FB923C;
  --accent-fonce: #C2410C;
  --accent-rgb: 251, 146, 60;
  --accent-voile: rgba(var(--accent-rgb), 0.16);

  /* bordure quasi unique du site */
  --bord: #DDDDD9;
  --bord-sombre: rgba(255, 255, 255, 0.12);

  /* la marque, reservee au logo */
  --marque-teal: #9AD0C9;

  --font-titre: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-corps: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* echelle de rayons de vydera : sec, jamais arrondi */
  /* Echelle de rayons reprise de corsearch (2026-09-09) : 4 / 8 / 12 / 16 /
     20 / 24 / 32, le 24 servant de rayon signature. On passait de 6px partout,
     ce qui etait le plus gros ecart visuel entre les deux sites. */
  --r-minus: 4px;
  --r-petit: 8px;
  --r: 12px;
  --r-carte-l: 16px;
  --r-bloc: 24px;
  --r-bloc-l: 32px;
  --r-pill: 128px;

  /* hauteur de la barre fixe : les blocs de tete doivent la degager */
  --h-nav: 72px;

  --pas-1: clamp(0.5rem, 0.4rem + 0.4vw, 0.75rem);
  --pas-2: clamp(1rem, 0.8rem + 0.8vw, 1.5rem);
  --pas-3: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem);
  --pas-4: clamp(2.5rem, 1.8rem + 2.8vw, 4rem);
  --pas-5: clamp(4rem, 2.8rem + 4.8vw, 6.5rem);

  /* compatibilite avec les regles existantes */
  --creme: var(--fond);
  --blanc: var(--fond-carte);
  --encre-profonde: var(--fond-sombre);
  --encre-douce: var(--texte-2);
  --teal: var(--encre);
  --teal-400: var(--texte-3);
  --teal-200: rgba(255, 255, 255, 0.72);
  --or: var(--accent);
  --ligne: var(--bord);
  --ligne-fine: var(--bord);
  --ligne-sombre: var(--bord-sombre);
  --ligne-sombre-fine: var(--bord-sombre);
  --surface-sombre: rgba(255, 255, 255, 0.04);
  --r-carte: var(--r-carte-l);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--creme);
  color: var(--encre);
  font-family: var(--font-corps);
  font-size: 16px;
  line-height: 1.5;
  color: var(--encre);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 {
  font-family: var(--font-titre);
  font-weight: 400;
  color: var(--encre-titre);
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
}
h2 { letter-spacing: -0.02em; }
h3 { letter-spacing: -0.02em; }
/* Plus le titre est grand, plus il se resserre : c'est ce qui donne
   la densite editoriale. Les petits titres gardent de l'air. */
h3 { letter-spacing: -0.015em; line-height: 1.2; }
.hero h1 { letter-spacing: -0.04em; }
p { margin: 0; }
a { color: inherit; }
img, svg { max-width: 100%; }
::selection { background: var(--or); color: var(--encre-profonde); }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 6px; }

.conteneur { width: min(1160px, 100% - 3rem); margin-inline: auto; }

/* ---------- Barre de navigation, facon vydera ----------
   Horizontale, en haut, discrete. Elle ne prend pas la place du contenu,
   contrairement aux pilules empilees qui mangeaient la colonne de gauche. */
.nav-pilules {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  display: block;
  padding: 0.9rem 0;
  background: var(--fond);
  border-bottom: 1px solid var(--bord);
}
.pilule {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.5rem 0.85rem;
  background: none; border: 0; border-radius: var(--r);
  font-size: 0.9rem; font-weight: 500;
  text-decoration: none; color: var(--encre);
  transition: color 0.16s;
}
.pilule svg { width: 15px; height: 15px; flex: none; color: var(--texte-3); display: none; }
.pilule:hover { color: var(--accent-fonce); }
.pilule.marque {
  margin-right: auto;
  font-family: var(--font-titre); font-weight: 500; font-size: 1.05rem;
  letter-spacing: -0.02em; padding-left: 0;
}
.pilule.marque svg { display: block; width: 20px; height: 20px; }
.pilule.marque .suffixe { font-weight: 400; color: var(--texte-2); margin-left: 0.3em; }
.pilule.langue {
  border: 1px solid var(--bord); margin-left: 0.5rem;
  font-family: var(--font-mono); font-size: 0.78rem;
}
.pilule.langue svg { display: block; }
/* le dernier lien devient le bouton d'action, comme chez vydera */
.nav-pilules .pilule[href^="mailto"] {
  background: var(--fond-bouton); color: #FFFFFF; padding: 0.55rem 1.1rem;
}
.nav-pilules .pilule[href^="mailto"]:hover { background: var(--accent); color: var(--encre-titre); }
.nav-pilules .pilule[href^="mailto"] svg { display: none; }


/* ---------- Hero asymetrique, facon vydera ----------
   Le titre occupe la colonne de gauche, le texte d'appui la droite en
   petit corps. Rien n'est centre : c'est ce qui fait l'air editorial. */
.hero { text-align: left; }
.hero-grille {
  display: grid; grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2rem, 6vw, 6rem); align-items: start;
}
.hero h1 {
  font-size: clamp(2.4rem, 1.6rem + 3.6vw, 4.2rem);
  line-height: 1.04; letter-spacing: -0.04em;
  max-width: 15ch; margin: 0;
}
.hero .chapeau {
  margin: 0.4rem 0 0; max-width: 42ch;
  font-size: 1rem; line-height: 1.6; color: var(--texte-2);
}
.hero-etat {
  margin-top: 2.25rem; display: flex; flex-wrap: wrap; gap: 0.5rem;
}
@media (max-width: 900px) {
  .hero-grille { grid-template-columns: 1fr; gap: 1.75rem; }
  .hero { padding-top: 7rem; }
}



/* ---------- Bande de logos ---------- */
.bandeau-logos { padding: 3.25rem 0; border-block: 1px solid var(--ligne-fine); background: var(--blanc); }
.bandeau-titre {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--encre-douce);
  margin-bottom: 2.25rem;
}
.piste {
  display: flex;
  overflow: hidden;
  gap: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.piste-groupe {
  display: flex;
  align-items: center;
  gap: 3.25rem;
  padding-right: 3.25rem;
  flex: none;
  animation: defile 38s linear infinite;
}
.piste:hover .piste-groupe { animation-play-state: paused; }
@keyframes defile { to { transform: translateX(-100%); } }
.logo-marque {
  display: inline-flex; align-items: center; gap: 0.6rem;
  flex: none;
  font-family: var(--font-titre); font-weight: 600; font-size: 1.02rem;
  letter-spacing: -0.015em;
  color: var(--encre);
  opacity: 0.72;
  transition: opacity 0.25s;
}
.piste:hover .logo-marque { opacity: 0.45; }
.logo-marque:hover { opacity: 1; }
.logo-carre {
  width: 34px; height: 34px; border-radius: var(--r);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.82rem; color: var(--blanc); flex: none;
}
@media (prefers-reduced-motion: reduce) {
  .piste { -webkit-mask-image: none; mask-image: none; overflow-x: auto; }
  .piste-groupe { animation: none; }
  .piste-groupe.doublon { display: none; }
}

/* ---------- Constat ---------- */
.grille-constat { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.constat {
  background: var(--blanc);
  border: 1px solid var(--ligne-fine);
  border-radius: var(--r);
  padding: 1.9rem;
}
.constat .verbatim {
  font-family: var(--font-titre);
  font-weight: 500;
  font-size: 1.12rem;
  line-height: 1.32;
  letter-spacing: -0.015em;
  margin-bottom: 0.85rem;
}
.constat p { font-size: 0.93rem; color: var(--encre-douce); }
.constat .renvoi {
  display: inline-block;
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: 0.72rem; letter-spacing: 0.06em;
  color: var(--teal);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.constat .renvoi:hover { border-bottom-color: var(--teal); }
.bascule {
  text-align: center;
  margin-top: 3rem;
  font-family: var(--font-titre);
  font-weight: 500;
  font-size: 1.25rem;
  letter-spacing: -0.015em;
}

/* ---------- Tableau avant / avec ---------- */
.tableau-gains { width: 100%; border-collapse: collapse; margin-top: 0.5rem; }
.tableau-gains th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 400;
  color: rgba(154, 208, 201, 0.7);
  padding: 0 0 0.9rem;
  border-bottom: 1px solid var(--ligne-sombre-fine);
}
.tableau-gains td {
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--ligne-sombre-fine);
  font-size: 0.95rem;
  vertical-align: baseline;
}
.tableau-gains tr:last-child td { border-bottom: 0; }
.tableau-gains th + th, .tableau-gains td + td { text-align: right; width: 22%; }
.tableau-gains .avant {
  color: rgba(154, 208, 201, 0.55);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  font-variant-numeric: tabular-nums;
}
.tableau-gains .apres {
  color: var(--or);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.note-source {
  margin-top: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: rgba(154, 208, 201, 0.55);
  line-height: 1.6;
}

/* ---------- Simulateur ---------- */
.simulateur {
  margin-top: 3rem;
  background: var(--surface-sombre);
  border: 1px solid var(--ligne-sombre-fine);
  border-radius: var(--r);
  padding: 2.25rem;
}
.simulateur h3 { font-size: 1.3rem; font-weight: 600; margin-bottom: 0.5rem; }
.simulateur > p { color: var(--teal-200); font-size: 0.94rem; }
.curseurs { margin-top: 2rem; display: grid; gap: 1.75rem; }
.curseur label {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; margin-bottom: 0.6rem;
  font-size: 0.9rem; color: var(--teal-200);
}
.curseur .valeur {
  font-family: var(--font-titre); font-weight: 600; font-size: 1.15rem;
  color: var(--blanc); font-variant-numeric: tabular-nums;
}
.curseur input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px; border-radius: 3px;
  background: rgba(154, 208, 201, 0.18);
  outline: none; cursor: pointer;
}
.curseur input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--or); cursor: pointer;
  border: 3px solid var(--encre-profonde);
  box-shadow: 0 0 0 1px var(--or);
}
.curseur input[type="range"]::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--or); cursor: pointer;
  border: 3px solid var(--encre-profonde);
}
.resultats {
  margin-top: 2.25rem; padding-top: 1.75rem;
  border-top: 1px solid var(--ligne-sombre-fine);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
  text-align: center;
}
.resultat-bloc .chiffre {
  display: block;
  font-family: var(--font-titre); font-weight: 600;
  font-size: clamp(1.7rem, 3.6vw, 2.4rem); line-height: 1;
  color: var(--or);
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.4rem;
}
.resultat-bloc .libelle {
  font-family: var(--font-mono); font-size: 0.71rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(154, 208, 201, 0.7);
}

/* ---------- FAQ ---------- */
.bloc-faq { max-width: 760px; }
.bloc-faq details {
  border-bottom: 1px solid var(--ligne-fine);
  padding: 1.15rem 0;
}
.bloc-faq summary {
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; gap: 1.5rem;
  font-family: var(--font-titre); font-weight: 600; font-size: 1.03rem;
  letter-spacing: -0.01em;
}
.bloc-faq summary::-webkit-details-marker { display: none; }
.bloc-faq summary::after { content: "+"; color: var(--teal); font-weight: 400; flex: none; }
.bloc-faq details[open] summary::after { content: "\2212"; }
.bloc-faq details p { margin: 0.85rem 0 0; color: var(--encre-douce); font-size: 0.95rem; max-width: 66ch; }

/* ==========================================================
   TROIS NIVEAUX DE LECTURE
   1 = l'offre (ce qu'on vend)  2 = la preuve  3 = le detail
   Le poids typographique et l'espacement portent la hierarchie.
   ========================================================== */
.niveau-1 { padding: var(--pas-5) 0; }
.niveau-1 h2 { font-size: clamp(2rem, 4.6vw, 3rem); }
.niveau-1 .entete-section.large { max-width: 62ch; margin-bottom: 3.5rem; }
.niveau-1 .entete-section p { font-size: 1.06rem; }

.niveau-2 { padding: var(--pas-5) 0; }
.niveau-2 h2 { font-size: clamp(1.5rem, 3vw, 2.05rem); }

.niveau-3 { padding: var(--pas-4) 0; }
.niveau-3 h2 { font-size: clamp(1.35rem, 2.5vw, 1.7rem); }
.niveau-3 .entete-section { margin-bottom: 2.25rem; }
.niveau-3 .entete-section p { font-size: 0.94rem; }

/* 01 Full App : trois ecrans epars se rassemblent en un seul */
.famille.vu .fa-ecran { animation: fa-fusion 4.6s cubic-bezier(0.65,0,0.35,1) infinite; }
.famille.vu .fa-ecran:nth-of-type(2) { animation-delay: 0.12s; }
.famille.vu .fa-ecran:nth-of-type(3) { animation-delay: 0.24s; }
@keyframes fa-fusion {
  0%, 12%   { transform: translate(0,0); opacity: 0.55; }
  45%, 72%  { transform: translate(var(--dx), var(--dy)); opacity: 1; }
  92%, 100% { transform: translate(0,0); opacity: 0.55; }
}

/* 02 Agent IA : la bulle parle, le serveur valide la donnee qui engage */
.famille.vu .ag-bulle { animation: ag-pulse 4.6s ease-in-out infinite; }
.famille.vu .ag-jeton { animation: ag-jeton 4.6s cubic-bezier(0.65,0,0.35,1) infinite; }
.famille.vu .ag-sceau { animation: ag-sceau 4.6s ease-out infinite; }
@keyframes ag-pulse { 0%,20% { opacity: 0.35; } 30%,100% { opacity: 1; } }
@keyframes ag-jeton {
  0%, 28%  { transform: translateX(0); opacity: 0; }
  38%      { opacity: 1; }
  62%,100% { transform: translateX(74px); opacity: 1; }
}
@keyframes ag-sceau { 0%,60% { opacity: 0; transform: scale(0.6); } 72%,100% { opacity: 1; transform: scale(1); } }

/* 03 Automatisation : le flux traverse les etapes sans personne */
.famille.vu .au-flux { stroke-dasharray: 8 6; animation: au-defile 2.6s linear infinite; }
.famille.vu .au-etape { animation: au-etape 4.6s ease-in-out infinite; }
.famille.vu .au-etape:nth-of-type(2) { animation-delay: 0.5s; }
.famille.vu .au-etape:nth-of-type(3) { animation-delay: 1s; }
.famille.vu .au-etape:nth-of-type(4) { animation-delay: 1.5s; }
@keyframes au-defile { to { stroke-dashoffset: -28; } }
@keyframes au-etape { 0%,55%,100% { opacity: 0.35; } 20%,35% { opacity: 1; } }

/* 04 Formation : le savoir essaime du noeud central vers l'equipe */
.famille.vu .fo-onde { animation: fo-onde 4.6s ease-out infinite; }
.famille.vu .fo-onde:nth-of-type(2) { animation-delay: 1.1s; }
.famille.vu .fo-onde:nth-of-type(3) { animation-delay: 2.2s; }
.famille.vu .fo-personne { animation: fo-allume 4.6s ease-in-out infinite; }
.famille.vu .fo-personne:nth-of-type(2) { animation-delay: 0.7s; }
.famille.vu .fo-personne:nth-of-type(3) { animation-delay: 1.4s; }
.famille.vu .fo-personne:nth-of-type(4) { animation-delay: 2.1s; }
@keyframes fo-onde { 0% { r: 8; opacity: 0.55; } 100% { r: 46; opacity: 0; } }
@keyframes fo-allume { 0%,60%,100% { opacity: 0.3; } 25%,45% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
}

/* ---------- Familles (niveau 1) ---------- */
.grille-familles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.famille {
  background: rgba(255,255,255,0.03);
  font-size: 0.97rem;
  border: 1px solid var(--ligne-sombre-fine);
  border-radius: var(--r);
  padding: 2.25rem;
  display: flex; flex-direction: column; gap: 0.9rem;
  transition: border-color 0.25s, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.famille:hover { border-color: var(--accent); }
.famille-tete { display: flex; justify-content: space-between; align-items: center; }
.famille-num {
  font-family: var(--font-mono); font-size: 0.78rem;
  letter-spacing: 0.1em; color: var(--or);
}
.famille-icone { width: 26px; height: 26px; color: var(--teal-200); opacity: 0.7; }
.famille h3 { font-size: 1.5rem; font-weight: 400; font-weight: 600; margin-top: 0.4rem; }
.famille-quand {
  color: var(--texte-2); font-size: 0.92rem; font-weight: 500;
  margin-top: -0.45rem;
}
.famille-corps { color: var(--teal-200); font-size: 0.96rem; }
.famille-contenu {
  list-style: none; padding: 0; margin: 0.6rem 0 0;
  display: flex; flex-wrap: wrap; gap: 0.4rem;
}
.famille-contenu li {
  font-family: var(--font-mono); font-size: 0.72rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--ligne-sombre-fine);
  border-radius: var(--r-pill);
  color: rgba(154, 208, 201, 0.85);
}
.famille-lien {
  margin-top: auto; padding-top: 1.1rem;
  color: var(--or); text-decoration: none; font-weight: 500; font-size: 0.94rem;
  display: inline-flex; align-items: center; gap: 0.4rem;
}
.famille-lien:hover span { transform: translateX(3px); }
.famille-lien span { transition: transform 0.2s; }

/* ---------- Galerie de captures (niveau 2) ---------- */
.galerie { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; margin-top: 1.75rem; }
.capture {
  margin: 0;
  border: 1px solid var(--ligne-sombre-fine);
  border-radius: var(--r);
  overflow: hidden;
  background: rgba(154, 208, 201, 0.04);
}
.capture a { display: block; line-height: 0; }
.capture img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 8 / 5;
  object-fit: cover; object-position: top center;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.capture:hover img { transform: none; }
.capture figcaption {
  padding: 0.9rem 1.1rem;
  font-size: 0.86rem;
  color: var(--teal-200);
  border-top: 1px solid var(--ligne-sombre-fine);
  display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
}
.capture figcaption strong { color: var(--blanc); font-weight: 600; font-family: var(--font-titre); }
.capture figcaption .url {
  font-family: var(--font-mono); font-size: 0.72rem;
  color: rgba(154, 208, 201, 0.6);
}

/* ---------- Sous sections de la preuve (niveau 2) ---------- */
.entete-sous { margin: 3.25rem 0 1.5rem; }
.entete-sous:first-of-type { margin-top: 0; }
.titre-sous {
  font-family: var(--font-mono);
  font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 400;
  color: var(--or);
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--ligne-sombre-fine);
}
.entete-sous p { margin-top: 0.9rem; color: var(--teal-200); font-size: 0.94rem; max-width: 62ch; }

/* ---------- Frise des paliers (niveau 3) ---------- */
.frise {
  list-style: none; padding: 0; margin: 0 0 3.5rem;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem;
  counter-reset: none;
}
.frise-etape { display: flex; gap: 1rem; align-items: flex-start; position: relative; }
.frise-etape:not(:last-child)::after {
  content: ""; position: absolute; top: 0.75rem; right: -1rem;
  width: 1rem; height: 1px; background: var(--ligne);
}
.frise-num {
  font-family: var(--font-mono); font-size: 0.72rem;
  color: var(--teal); flex: none; padding-top: 0.3rem;
}
.frise-etape h3 {
  font-size: 1.02rem; font-weight: 600;
  display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap;
  margin-bottom: 0.4rem;
}
.frise-prix {
  font-family: var(--font-mono); font-size: 0.68rem;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--encre-douce);
  border: 1px solid var(--ligne); border-radius: var(--r-pill);
  padding: 0.15rem 0.55rem;
}
.frise-etape p { font-size: 0.9rem; color: var(--encre-douce); }

/* ---------- Deux colonnes methode + faq (niveau 3) ---------- */
.deux-colonnes {
  display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 3.5rem;
  padding-top: 2.75rem; border-top: 1px solid var(--ligne-fine);
}
.titre-colonne {
  font-family: var(--font-mono); font-size: 0.72rem;
  letter-spacing: 0.12em; text-transform: uppercase; font-weight: 400;
  color: var(--teal); margin-bottom: 1.4rem;
}
.liste-regles { margin: 0; }
.liste-regles dt {
  font-family: var(--font-titre); font-weight: 600; font-size: 0.95rem;
  margin-top: 1.1rem;
}
.liste-regles dt:first-child { margin-top: 0; }
.liste-regles dd {
  margin: 0.2rem 0 0; font-size: 0.89rem; color: var(--encre-douce);
}

/* La grille deux colonnes de la section a ete emportee avec l'ancien bloc de
   style du graphe : sans elle le texte prenait toute la largeur et le schema
   s'etalait dessous. */
.bloc-pilotage {
  display: grid; grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
}

/* ==========================================================
   QUI PILOTE
   Refait le 2026-09-09. L'ancien graphe faisait tourner cinq
   noeuds nommes Agent, Flux, Donnees, Mesure, Alerte : un
   acteur, deux objets et deux sorties melanges, en rotation
   donc illisibles, et rien ne montrait le « rend la main »
   qui est pourtant le propos de la section. Chaque agent
   porte maintenant le geste qu'il absorbe, et la fleche de
   retour vers l'humain est explicite.
   ========================================================== */
.graphe { width: 100%; height: auto; display: block; overflow: visible; }
.graphe .ag rect {
  fill: rgba(255, 255, 255, 0.05);
  stroke: var(--bord-sombre); stroke-width: 1;
}
.graphe .ag-1 { fill: rgba(255, 255, 255, 0.92); font-family: var(--font-mono); font-size: 13px; }
.graphe .ag-2 { fill: rgba(255, 255, 255, 0.5); font-family: var(--font-mono); font-size: 11.5px; }
.graphe .humain rect {
  fill: rgba(var(--accent-rgb), 0.12);
  stroke: var(--accent); stroke-width: 1.4;
}
.graphe .ic {
  fill: none; stroke: var(--accent); stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.graphe .h-1 {
  fill: var(--accent); font-family: var(--font-mono); font-size: 12px; text-anchor: middle;
}
.graphe .vers-agent {
  fill: none; stroke: rgba(255, 255, 255, 0.26); stroke-width: 1.2; stroke-dasharray: 4 5;
}
.graphe .retour {
  fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round;
  opacity: 0.55; animation: pi-rend 6s ease-in-out infinite; animation-delay: var(--d, 0s);
}
.graphe .lg { fill: rgba(255, 255, 255, 0.55); font-family: var(--font-mono); font-size: 11.5px; }
.graphe .legende .retour { animation: none; opacity: 1; }

@keyframes pi-rend { 0%, 100% { opacity: 0.35; } 22%, 46% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .graphe .retour { animation: none; opacity: 1; } }
 50% { transform: scale(1.12); opacity: 0.13; } }

/* ==========================================================
   BANDEAU DES DEMANDES REELLES
   Ce qu'on nous demande, mot pour mot. Explique l'offre sans
   une phrase de marketing.
   ========================================================== */
.bandeau-demandes {
  padding: 2.75rem 0;
  border-block: 1px solid var(--ligne-fine);
  background: var(--blanc);
  overflow: hidden;
}
.bandeau-demandes .intitule {
  text-align: center; margin-bottom: 1.75rem;
  font-family: var(--font-mono); font-size: 0.72rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--encre-douce);
}
.piste-demandes {
  display: flex;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.file-demandes {
  display: flex; align-items: center; gap: 1rem; padding-right: 1rem; flex: none;
  animation: demandes-defile 52s linear infinite;
}
.piste-demandes:hover .file-demandes { animation-play-state: paused; }
@keyframes demandes-defile { to { transform: translateX(-100%); } }
.demande {
  flex: none;
  border: 1px solid var(--ligne);
  border-radius: var(--r-pill);
  padding: 0.7rem 1.35rem;
  font-size: 0.95rem;
  color: var(--encre);
  background: var(--creme);
  white-space: nowrap;
}
.demande::before { content: "\201C"; color: var(--teal); margin-right: 0.3rem; }
.demande::after { content: "\201D"; color: var(--teal); margin-left: 0.2rem; }

@media (prefers-reduced-motion: reduce) {
  .graphe * , .file-demandes { animation: none !important; }
  .piste-demandes { -webkit-mask-image: none; mask-image: none; overflow-x: auto; }
  .file-demandes.doublon { display: none; }
}
@media (max-width: 900px) {
  .bloc-pilotage { grid-template-columns: 1fr; gap: 2.25rem; }
}

/* ==========================================================
   CONTRASTE SUR FOND SOMBRE
   Les titres portent une couleur d'encre globale : sur une bande
   sombre elle les rend invisibles. On la reprend explicitement.
   ========================================================== */
.bande-sombre h1, .bande-sombre h2, .bande-sombre h3,
.niveau-1 h1, .niveau-1 h2, .niveau-1 h3 { color: #FFFFFF; }
.bande-sombre p, .niveau-1 p { color: rgba(255, 255, 255, 0.72); }
.bande-sombre .famille-quand { color: var(--accent); }
.bande-sombre .surtitre { color: rgba(255, 255, 255, 0.5); }
.bande-sombre .etiquette,
.bande-sombre .famille-contenu li { color: rgba(255, 255, 255, 0.75); border-color: var(--bord-sombre); }
.bande-sombre .meta-valeur, .bande-sombre .cas h3 { color: #FFFFFF; }
.bande-sombre .lien-produit,
.bande-sombre .famille-lien { color: #FFFFFF !important; }
.bande-sombre .lien-produit:hover,
.bande-sombre .famille-lien:hover { color: var(--accent) !important; }

/* ==========================================================
   ZONE LUMINEUSE
   L'equivalent du grand visuel plein ecran de la reference, obtenu
   par un halo en degrade radial sur une trame fine. Aucun asset,
   aucune librairie, et ca respire la ou la page enchainait trop vite.
   ========================================================== */
.bandeau-produits {
  position: relative;
  display: flex; justify-content: center; align-items: flex-end;
  width: min(1080px, 92vw);
  margin: 0 auto;
}
.cadre {
  margin: 0;
  border: 1px solid var(--bord);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--fond-carte);
}
.cadre img { width: 100%; height: auto; display: block; }
/* les deux ecrans lateraux reculent d'un cran : plus petits, en retrait,
   legerement estompes, pour que le regard tombe sur celui du milieu. */
.cadre.cote {
  width: 31%;
  opacity: 0.72;
  box-shadow: 0 24px 48px -30px rgba(20, 24, 26, 0.3);
}
.cadre.centre {
  width: 46%;
  margin-inline: -3%;
  position: relative; z-index: 2;
  box-shadow: 0 44px 88px -40px rgba(20, 24, 26, 0.45);
}
/* sous 700px les trois ecrans deviennent illisibles : on n'en garde qu'un,
   a une largeur ou la capture reste dechiffrable. */
@media (max-width: 700px) {
  .cadre.cote { display: none; }
  .cadre.centre { width: 84%; margin-inline: 0; }
}

.lumiere {
  position: relative;
  padding-top: clamp(2.5rem, 5vw, 4.5rem);
  min-height: clamp(320px, 30vw, 420px);
  padding-bottom: 1.6rem;
  overflow: hidden;
  border-block: 1px solid var(--bord);
  background: var(--fond-carte);
}
.halo {
  position: absolute; left: 50%; top: 62%;
  width: min(1100px, 130vw); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle at 50% 50%,
      rgba(var(--accent-rgb), 0.9) 0%,
      rgba(var(--accent-rgb), 0.35) 22%,
      rgba(154, 208, 201, 0.22) 44%,
      rgba(154, 208, 201, 0) 68%);
  filter: blur(28px);
  animation: halo-respire 14s ease-in-out infinite;
}
.grille-fond {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--bord) 1px, transparent 1px),
    linear-gradient(90deg, var(--bord) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: 0.5;
  -webkit-mask-image: radial-gradient(circle at 50% 60%, #000 20%, transparent 72%);
  mask-image: radial-gradient(circle at 50% 60%, #000 20%, transparent 72%);
}
@keyframes halo-respire {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-50%, -52%) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) { .halo { animation: none; } }

/* etiquettes : perdues avec l'ancien bloc hero, remises ici */
.etiquette {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--bord);
  border-radius: var(--r);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--texte-2);
  background: var(--fond-carte);
}
.point { width: 5px; height: 5px; border-radius: 50%; background: var(--texte-3); flex: none; }
.point.or { background: var(--accent); }

/* Les anciennes regles de nav mobile (defilement horizontal, pas de burger)
   ont ete retirees le 2026-09-09 au profit du burger. Elles restaient actives
   et leur overflow-x:auto rognait le panneau du menu, invisible en consequence.
   Le nouveau bloc se trouve plus bas, avec les styles du burger. */
@media (max-width: 860px) {
  .pilule.marque { font-size: 1rem; }
  .nav-liens .pilule { white-space: nowrap; }
}

/* Cartes CLAIRES posees sur une bande sombre : la regle generale
   ".bande-sombre h3 { color: #FFF }" les rendait invisibles (blanc sur
   blanc). On rend l'encre a tout ce qui vit sur un fond clair. */
.bande-sombre .carte-client,
.bande-sombre .carte-client h3,
.bande-sombre .carte-client p { color: var(--encre); }
.bande-sombre .carte-client h3 { color: var(--encre-titre); }
.bande-sombre .carte-client .carte-role,
.bande-sombre .carte-client p.corps { color: var(--texte-2); }
.bande-sombre .carte-client .etiquette {
  color: var(--texte-2); border-color: var(--bord); background: var(--fond);
}
/* les labels doivent rester lisibles : #979793 sur creme tombe a 2.9:1 */
.surtitre { color: var(--texte-2); }
.tableau-gains .avant { color: var(--texte-2); }

/* ---------- Bandes ---------- */
/* ==========================================================
   BLOCS ENCARTES
   Reprise du geste structurant de corsearch : les sections ne
   sont plus des bandes pleine largeur bord a bord, mais de
   grands blocs arrondis poses sur le fond de page, avec une
   marge autour. Le rayon de 24px est ce qui distingue le plus
   les deux systemes ; nos couleurs, elles, ne bougent pas.
   ========================================================== */
.bande-sombre,
.bande-blanche,
.bande-claire,
/* Ces sections etaient restees pleine largeur a plat alors que tout le reste
   passait en blocs encartes : le site tournait a deux systemes. Les en-tetes
   de page, le bandeau des demandes, les blocs d'appel, la FAQ, les sources et
   la suite de lecture rejoignent la grille. */
.hero,
.tete-index,
.tete-article,
.tete-metier,
.bandeau-demandes,
.bloc-cta,
.suite-lecture,
footer {
  width: min(1400px, 100% - 3rem);
  margin-inline: auto;
  margin-block: var(--pas-2);
  border-radius: var(--r-bloc);
  padding: var(--pas-5) 0;
  overflow: hidden;
}
.bande-sombre {
  color: var(--blanc);
  /* degrade plutot qu'aplat : c'est ce qui donne sa profondeur au bloc
     sombre de la reference. Sur nos couleurs, pas les siennes. */
  background:
    radial-gradient(85% 75% at 85% 8%, rgba(154, 208, 201, 0.24) 0%, rgba(154, 208, 201, 0) 58%),
    radial-gradient(65% 60% at 10% 95%, rgba(var(--accent-rgb), 0.10) 0%, rgba(var(--accent-rgb), 0) 60%),
    linear-gradient(150deg, #13292400 0%, rgba(0, 0, 0, 0.25) 100%),
    var(--encre-profonde);
  background-color: var(--encre-profonde);
}
.bande-blanche { background: var(--blanc); border: 1px solid var(--ligne-fine); }
.bande-claire { background: var(--creme); border: 1px solid var(--ligne-fine); }

@media (max-width: 720px) {
  /* on garde les blocs arrondis : les mettre a plat bord a bord faisait
     perdre le geste principal du systeme sur la moitie des visites. */
  .bande-sombre, .bande-blanche, .bande-claire {
    width: calc(100% - 1.5rem);
    border-radius: var(--r-carte-l);
  }
}

.entete-section { max-width: 50ch; margin-bottom: 3rem; }
.entete-section h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); }
.entete-section p { margin-top: 0.9rem; color: var(--encre-douce); }
.bande-sombre .entete-section p { color: var(--teal-200); }
.surtitre {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* --texte-3 (#979793) tombe a 2.8:1 sur la creme : le defaut est donc le
     gris fonce, et c'est le fond sombre qui fait exception. L'inverse avait
     ete tente et laissait 26 pages sous le seuil, parce que la correction
     ne visait que les conteneurs de l'accueil. */
  color: var(--texte-2);
  margin-bottom: 1rem;
  display: block;
}
.bande-sombre .surtitre { color: var(--texte-3); }

/* ---------- Sélecteur de produits ---------- */
.rangee-pastilles { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-bottom: 3rem; }
.pastille {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: inherit;
  display: flex; flex-direction: column; align-items: center; gap: 0.7rem;
  width: 92px;
}
.pastille-cadre { position: relative; width: 72px; height: 72px; display: grid; place-items: center; }
/* L'arc du logo Kabaun sert d'indicateur d'état actif */
.pastille-cadre::before {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 2px solid var(--or);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 100%, 50% 50%, 0 50%);
  opacity: 0;
  transform: rotate(-35deg) scale(0.9);
  transition: opacity 0.3s, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.pastille[aria-selected="true"] .pastille-cadre::before { opacity: 1; transform: rotate(0deg) scale(1); }
.pastille-carre {
  width: 72px; height: 72px;
  border-radius: var(--r);
  display: grid; place-items: center;
  font-family: var(--font-titre); font-weight: 600; font-size: 1.5rem; color: var(--blanc);
  border: 1px solid rgba(154, 208, 201, 0.16);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.pastille:hover .pastille-carre { transform: translateY(-3px); }
.pastille-nom { font-size: 0.82rem; font-weight: 500; color: var(--teal-200); text-align: center; }
.pastille[aria-selected="true"] .pastille-nom { color: var(--blanc); }

.fiche {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 3rem;
  padding: 2.5rem;
  background: var(--surface-sombre);
  border: 1px solid var(--ligne-sombre-fine);
  border-radius: var(--r);
}
.fiche h3 { font-size: 1.85rem; font-weight: 600; }
.fiche .categorie {
  font-family: var(--font-mono); font-size: 0.72rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--or); display: block; margin-bottom: 0.7rem;
}
.fiche .pitch { margin-top: 1rem; color: var(--teal-200); max-width: 46ch; }
.fiche-meta { display: flex; flex-direction: column; }
.meta-ligne {
  display: flex; justify-content: space-between; gap: 1.5rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--ligne-sombre-fine);
  font-size: 0.88rem;
}
.meta-ligne:last-child { border-bottom: 0; }
.meta-cle {
  color: rgba(154, 208, 201, 0.65);
  font-family: var(--font-mono); font-size: 0.75rem;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.meta-valeur { text-align: right; font-variant-numeric: tabular-nums; }
.lien-produit { color: var(--encre) !important;
  display: inline-flex; align-items: center; gap: 0.4rem;
  margin-top: 1.6rem; font-weight: 500;
  color: var(--or); text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}
.lien-produit:hover { color: var(--accent) !important; border-bottom-color: var(--accent); }

/* ---------- Réalisations clients ---------- */
.grille-clients { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.carte-client {
  background: var(--blanc);
  border: 1px solid var(--ligne-fine);
  border-radius: var(--r);
  padding: 1.9rem;
  display: flex; flex-direction: column; gap: 1rem;
  transition: border-color 0.2s, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.carte-client:hover { border-color: var(--encre-titre); }
.carte-tete { display: flex; align-items: center; gap: 0.8rem; }
.carte-carre {
  width: 42px; height: 42px; border-radius: var(--r);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-titre); font-weight: 600; font-size: 1rem; color: var(--blanc);
  flex: none;
}
.carte-client h3 { font-size: 1.15rem; font-weight: 600; }
.carte-role { font-size: 0.82rem; color: var(--encre-douce); }
.carte-client p.corps { font-size: 0.93rem; color: var(--encre-douce); }
.carte-pied { margin-top: auto; padding-top: 0.5rem; display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* ---------- Contact ---------- */
.bloc-contact { text-align: center; }
.bloc-contact h2 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); max-width: 20ch; margin-inline: auto; }
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.85rem 1.5rem;
  border-radius: var(--r);
  background: var(--fond-bouton);
  color: #FFFFFF;
  font-weight: 500; font-size: 0.95rem;
  text-decoration: none;
  margin-top: 2rem;
  border: 1px solid var(--fond-bouton);
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.btn:hover { background: var(--accent); color: var(--encre-titre); border-color: var(--accent); }
.btn:hover { transform: translateY(-2px); }
.btn.fantome { background: transparent; border: 1px solid var(--bord); color: var(--encre); margin-left: 0.6rem; }
.btn.fantome:hover { background: var(--fond-carte); color: var(--encre); border-color: var(--bord); }

/* ---------- Formulaire de lead ---------- */
.bloc-contact .formulaire {
  max-width: 620px; margin: 2.5rem auto 0;
  text-align: left;
}
.champs { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.champ { display: flex; flex-direction: column; gap: 0.4rem; }
.champ.large { grid-column: 1 / -1; }
.champ label {
  font-family: var(--font-mono); font-size: 0.72rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--teal-200);
}
.champ input, .champ select, .champ textarea {
  font-family: var(--font-corps); font-size: 0.95rem;
  color: var(--blanc);
  background: rgba(154, 208, 201, 0.07);
  border: 1px solid var(--ligne-sombre-fine);
  border-radius: var(--r);
  padding: 0.75rem 0.9rem;
  width: 100%;
}
.champ textarea { resize: vertical; min-height: 96px; }
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: none; border-color: var(--or);
}
.champ select { appearance: none; cursor: pointer; }
.champ select option { background: var(--encre-profonde); color: var(--blanc); }
.champ input::placeholder, .champ textarea::placeholder { color: rgba(154, 208, 201, 0.45); }
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.pied-formulaire {
  margin-top: 1.4rem;
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.pied-formulaire .btn { margin-top: 0; }
.mention-formulaire {
  font-size: 0.8rem; color: rgba(154, 208, 201, 0.7);
  flex: 1; min-width: 220px;
}
.retour-formulaire {
  margin-top: 1.1rem; font-size: 0.92rem;
  padding: 0.85rem 1.1rem; border-radius: var(--r);
  display: none;
}
.retour-formulaire.ok {
  display: block;
  background: rgba(94, 173, 160, 0.15);
  border: 1px solid rgba(94, 173, 160, 0.4);
  color: var(--blanc);
}
.retour-formulaire.ko {
  display: block;
  background: rgba(var(--accent-rgb), 0.12);
  border: 1px solid rgba(var(--accent-rgb), 0.45);
  color: var(--blanc);
}
.retour-formulaire a { color: var(--or); }
@media (max-width: 620px) {
  .champs { grid-template-columns: 1fr; }
}

/* ---------- Footer ---------- */
footer {
  background: var(--encre-profonde); color: var(--blanc);
  padding: var(--pas-4) 0 var(--pas-3);
  margin-bottom: var(--pas-2);
}
.footer-haut {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 1rem;
  padding-bottom: 1.75rem; border-bottom: 1px solid var(--ligne-sombre-fine);
}
.footer-haut .nom {
  display: inline-flex; align-items: center;
  font-family: var(--font-titre); font-weight: 600; font-size: 1.1rem;
  letter-spacing: -0.015em;
}
.footer-haut .nom svg { margin-right: 0.5rem; }
.footer-haut .suffixe { font-weight: 400; color: var(--teal-200); margin-left: 0.32em; }
.footer-haut a { color: var(--teal-200); text-decoration: none; }
.footer-haut a:hover { color: var(--blanc); }
.colophon {
  margin-top: 1.75rem;
  display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;
  font-size: 0.85rem; color: rgba(154, 208, 201, 0.6);
}
.colophon a { color: var(--teal-200); }

/* ---------- Reveal ---------- */
/* L'apparition au defilement est une AMELIORATION, pas une condition d'affichage.
   Avant le 2026-09-09, .reveal naissait a opacity:0 sans repli : si le JS ne
   partait pas, 34 blocs de l'accueil restaient invisibles pour toujours. Le
   masquage est donc conditionne a la classe .js, posee par le script en tete
   de page. Sans JS, tout est visible, simplement sans animation. */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.js .reveal.vu { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Responsive ---------- */
/* Sous 700px le fragment souligne ne peut plus tenir sur une ligne :
   on libere le retour a la ligne et le trait se dessine par ligne. */
@media (max-width: 700px) {
}

@media (max-width: 1180px) {
  .grille-familles { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .galerie { grid-template-columns: 1fr; }
  .grille-familles { grid-template-columns: 1fr; }
  .frise { grid-template-columns: 1fr; gap: 1.5rem; }
  .frise-etape:not(:last-child)::after { display: none; }
  .deux-colonnes { grid-template-columns: 1fr; gap: 2.5rem; }
  .niveau-1 { padding: 4.5rem 0; }
  .grille-constat { grid-template-columns: 1fr; }
  .fiche { grid-template-columns: 1fr; gap: 2rem; padding: 1.75rem; }
  .grille-clients { grid-template-columns: 1fr; }
  .hero { padding: 10rem 0 4rem; }
}
@media (max-width: 620px) {
  .conteneur { width: min(1160px, 100% - 2rem); }
  .resultats { grid-template-columns: 1fr; gap: 1.75rem; }
  .simulateur { padding: 1.5rem; }
  .tableau-gains th + th, .tableau-gains td + td { width: auto; }
  .tableau-gains td, .tableau-gains th { font-size: 0.88rem; }
  .colophon { grid-template-columns: 1fr; }
  .rangee-pastilles { gap: 1rem; justify-content: space-between; }
  .pastille { width: calc(50% - 0.5rem); }
  .bande-sombre, .bande-claire, .bande-blanche { padding: 4rem 0; }
  .btn.fantome { margin-left: 0; }
}

/* ==========================================================
   CONTRASTE : derniere passe, mesuree
   Le gris de label (#979793) tient sur fond sombre (5.5:1) mais
   tombe a 2.9:1 sur fond clair. On le fonce uniquement la.
   ========================================================== */
.bande-sombre .surtitre, .niveau-1 .surtitre { color: #A9A9A4; }

/* Le "avant" barre du tableau vit sur bande sombre : il lui faut un
   gris CLAIR, pas le gris de texte secondaire prevu pour fond clair. */
.tableau-gains .avant { color: rgba(255, 255, 255, 0.55); }

/* ==========================================================
   ECRAN DE SECTION
   Un site d'agence se juge sur le travail montre, pas decrit.
   La page des cas d'usage n'avait AUCUNE image avant le 2026-09-09 :
   quinze cartes de texte pour prouver quinze realisations.
   Le cadre reste sec (1px, rayon 6px) : c'est la capture qui porte,
   pas son emballage.
   ========================================================== */
.ecran {
  /* Depuis le retrait des cartes de realisations (2026-09-09), la capture etait
     le seul contenu de la section et occupait toute la largeur : elle pesait
     plus qu'avant, alors que la demande etait d'en montrer moins. Elle repasse
     au rang d'illustration, sous le texte qui explique la prestation. */
  max-width: 620px;
  margin: 0 0 var(--pas-4);
  border: 1px solid var(--bord);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--fond-carte);
  box-shadow: 0 32px 64px -40px rgba(20, 24, 26, 0.3);
}
.ecran img { width: 100%; height: auto; display: block; border-bottom: 1px solid var(--bord); }
.ecran figcaption {
  padding: 0.85rem 1.1rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--texte-2);
}
.bande-sombre .ecran { border-color: var(--bord-sombre); background: rgba(255, 255, 255, 0.03); }
.bande-sombre .ecran img { border-bottom-color: var(--bord-sombre); }
.bande-sombre .ecran figcaption { color: rgba(255, 255, 255, 0.72); }

/* ==========================================================
   POINT DE MARQUE DIFFUS
   Reprend le logo (disque teal + arc ambre) mais dissous par un
   flou : c'est une texture pour les grandes surfaces vides, pas
   un decor a poser sur chaque bloc. On l'insere a la main la ou
   il y a un trou, jamais en ::after generalise.
   Purement decoratif : aria-hidden, sous le contenu, et il ne
   passe jamais derriere du texte (contraste inchange).
   ========================================================== */
.a-point { position: relative; overflow: hidden; isolation: isolate; }
.a-point > .conteneur { position: relative; z-index: 1; }

.point-flou {
  position: absolute;
  z-index: 0;
  width: clamp(210px, 24vw, 380px);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  /* Les arrets suivent le logo : un disque plein jusqu'a 26 %, puis un
     anneau mince autour de 48 %. Etales plus large, le flou les fondait
     en un seul lavis et le point n'etait plus reconnaissable. */
  background:
    radial-gradient(circle at 50% 50%,
      rgba(122, 188, 178, 0.80) 0%,
      rgba(130, 194, 185, 0.66) 20%,
      rgba(154, 208, 201, 0.12) 32%,
      rgba(154, 208, 201, 0) 38%),
    radial-gradient(circle at 50% 50%,
      rgba(var(--accent-rgb), 0) 40%,
      rgba(var(--accent-rgb), 0.62) 47%,
      rgba(var(--accent-rgb), 0.62) 52%,
      rgba(var(--accent-rgb), 0) 60%);
  filter: blur(22px);
}

/* Placements. Le point se loge dans le vide de la composition,
   il ne se centre pas sur le bloc. */
.point-flou.droite { right: 7%; top: 50%; transform: translateY(-50%); }
.point-flou.bas-droite { right: 5%; bottom: -14%; }
.point-flou.haut-droite { right: 6%; top: -16%; }

/* Sur creme le teal se noie : on le remonte et on resserre le flou.
   Sur fond sombre il ressort seul, on le calme. */
.bloc-cta .point-flou, .bande-claire .point-flou, .bande-blanche .point-flou {
  filter: blur(24px);
  opacity: 0.5;
}
.bande-sombre .point-flou, .hero-bloc .point-flou {
  filter: blur(28px);
  opacity: 0.42;
}

@media (max-width: 720px) {
  /* Sur telephone le bloc est etroit : un point de 520px le remplirait
     entierement et passerait sous le texte. */
  .point-flou { width: clamp(160px, 46vw, 240px); filter: blur(18px); opacity: 0.34; }
  .point-flou.droite { top: auto; bottom: -8%; right: -6%; transform: none; }
}

/* ---------- SCHEMA DU FRAMEWORK ----------------------------------------
   Deux variantes d'un meme schema : horizontale au dela de 760px, verticale
   en dessous. L'ancienne feuille portait "@media (max-width:900px){.schema
   {display:none}}" : sur telephone le schema n'existait pas, alors que c'est
   la moitie de l'audience.

   Le mouvement n'est pas decoratif : trois demandes circulent en meme temps
   vers trois metiers differents (c'est le propos, treize metiers travaillent
   en parallele), un jeton revient par le canal memoire, et un balayage fait
   le tour des garde fous pour montrer qu'ils couvrent tout le trajet.
   Tout est coupe par prefers-reduced-motion, jetons gares a la porte de
   Livraison. */

.schema { margin: 0 0 var(--pas-4); }
.schema svg { width: 100%; height: auto; display: block; overflow: visible; }
/* Qualifies par .schema : ".schema svg{display:block}" ci dessus vaut 0-1-1
   et ecrasait un simple ".sch-h{display:none}" a 0-1-0. Les deux variantes
   s'affichaient alors l'une au dessus de l'autre. */
.schema .sch-v { display: none; }
@media (max-width: 760px) {
  .schema .sch-h { display: none; }
  .schema .sch-v { display: block; max-width: 420px; margin-inline: auto; }
}

/* --- boites du flux --- */
.sch-bloc rect {
  fill: rgba(255, 255, 255, 0.045);
  stroke: rgba(255, 255, 255, 0.16);
  stroke-width: 1;
}
.sch-bloc.fort rect { fill: rgba(255, 255, 255, 0.10); stroke: rgba(255, 255, 255, 0.26); }
.sch-bloc.livre rect { fill: rgba(var(--accent-rgb), 0.13); stroke: var(--accent); }
.sch-bloc text, .sch-chip text {
  font-family: var(--font-titre);
  font-size: 14px;
  font-weight: 500;
  fill: rgba(255, 255, 255, 0.9);
}
.sch-bloc text { text-anchor: middle; }
.sch-bloc.livre text { fill: var(--accent); }

/* --- les treize metiers --- */
.sch-chip rect {
  fill: rgba(255, 255, 255, 0.03);
  stroke: rgba(255, 255, 255, 0.13);
  stroke-width: 1;
}
.sch-chip.plus rect { fill: none; stroke-dasharray: 3 4; }
.sch-chip.plus text { fill: var(--texte-3); font-weight: 400; }

.sch-lien { fill: none; stroke: rgba(255, 255, 255, 0.17); stroke-width: 1.2; }

/* --- garde fous : un cadre qui entoure, pas une bande posee dessous --- */
.sch-cadre {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1;
  stroke-dasharray: 5 6;
  opacity: 0.34;
}
.sch-balai {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
  stroke-linecap: round;
  opacity: 0.85;
}
.sch-cadre-txt {
  font-family: var(--font-titre);
  font-size: 13px;
  font-weight: 500;
  fill: var(--accent);
  dominant-baseline: middle;
}
.sch-col-txt, .sch-retour-txt {
  font-family: var(--font-titre);
  font-size: 12.5px;
  fill: var(--texte-3);
}

/* --- retour memoire --- */
.sch-retour {
  fill: none;
  stroke: rgba(154, 208, 201, 0.42);
  stroke-width: 1.2;
  stroke-dasharray: 4 6;
}
.sch-fleche {
  fill: none;
  stroke: rgba(154, 208, 201, 0.75);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sch-livre-ok circle { fill: none; stroke: var(--marque-teal); stroke-width: 1.3; }
.sch-livre-ok path {
  fill: none; stroke: var(--marque-teal); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}

/* --- jetons --- */
.sch-jeton { fill: var(--accent); offset-rotate: 0deg; }
.sch-jeton.retour, .sch-jeton.retour-v { fill: var(--marque-teal); }
.sch-jeton.h1 { offset-path: path('M176 215 H312 C342 215 342 95 372 95 H588 C632 95 632 215 672 215 H840'); }
.sch-jeton.v1 { offset-path: path('M170 138 V146 H44 V191 H296 V402 H170 V462'); }
.sch-jeton.h2 { offset-path: path('M176 215 H312 C342 215 342 191 372 191 H588 C632 191 632 215 672 215 H840'); }
.sch-jeton.v2 { offset-path: path('M170 138 V146 H44 V265 H296 V402 H170 V462'); }
.sch-jeton.h3 { offset-path: path('M176 215 H312 C342 215 342 287 372 287 H588 C632 287 632 215 672 215 H840'); }
.sch-jeton.v3 { offset-path: path('M170 138 V146 H44 V339 H296 V402 H170 V462'); }
.sch-jeton.retour { offset-path: path('M908 235 C908 362 800 398 584 398 C368 398 260 362 260 241'); }
.sch-jeton.retour-v { offset-path: path('M264 480 H302 Q312 480 312 470 V130 Q312 120 302 120 H270'); }

@media (prefers-reduced-motion: no-preference) {
  @keyframes sch-file {
    0%   { offset-distance: 0%;   opacity: 0; }
    7%   { opacity: 1; }
    90%  { opacity: 1; }
    100% { offset-distance: 100%; opacity: 0; }
  }
  @keyframes sch-actif {
    0%, 27%   { fill: rgba(255, 255, 255, 0.03); stroke: rgba(255, 255, 255, 0.13); }
    34%, 54%  { fill: rgba(var(--accent-rgb), 0.11); stroke: rgba(var(--accent-rgb), 0.55); }
    62%, 100% { fill: rgba(255, 255, 255, 0.03); stroke: rgba(255, 255, 255, 0.13); }
  }
  @keyframes sch-balayage-h { to { stroke-dashoffset: -3140; } }
  @keyframes sch-balayage-v { to { stroke-dashoffset: -1700; } }
  @keyframes sch-pouls {
    0%, 62%   { opacity: 0; transform: scale(0.7); }
    70%       { opacity: 1; transform: scale(1); }
    92%, 100% { opacity: 0; transform: scale(1); }
  }

  .sch-jeton { animation: sch-file 7.2s cubic-bezier(0.42, 0, 0.58, 1) infinite; }
  .sch-jeton.h2, .sch-jeton.v2 { animation-delay: 2.4s; }
  .sch-jeton.h3, .sch-jeton.v3 { animation-delay: 4.8s; }
  .sch-jeton.retour, .sch-jeton.retour-v {
    animation-duration: 5.4s;
    animation-timing-function: ease-in-out;
    animation-delay: 5.2s;
  }

  .sch-chip.actif rect { animation: sch-actif 7.2s linear infinite; }
  .sch-chip.actif.a2 rect { animation-delay: 2.4s; }
  .sch-chip.actif.a3 rect { animation-delay: 4.8s; }

  .sch-h .sch-balai { stroke-dasharray: 130 3010; animation: sch-balayage-h 11s linear infinite; }
  .sch-v .sch-balai { stroke-dasharray: 110 1590; animation: sch-balayage-v 9s linear infinite; }

  .sch-livre-ok {
    animation: sch-pouls 7.2s ease-out infinite;
    animation-delay: 0.6s;
    transform-box: fill-box;
    transform-origin: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Etat final lisible : les demandes sont arrivees, la preuve est posee. */
  .sch-jeton { offset-distance: 100%; }
  .sch-jeton.retour, .sch-jeton.retour-v { opacity: 0.5; }
  .sch-balai { display: none; }
}

/* Les trois ecrans de la zone lumineuse n'etaient pas legendes : un visiteur
   ne pouvait pas savoir que ce sont NOS produits. Sans ce nom, la capture est
   une decoration, pas une preuve. */
.legende-produits {
  position: relative;
  margin: 1rem auto 0;
  width: min(1080px, 92vw);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--texte-2);
}
@media (max-width: 700px) { .legende-produits { text-align: center; } }

/* Deux ecrans au lieu de trois : la mise en eventail (un grand au centre, deux
   petits en retrait) n'a de sens qu'a trois. A deux, on les met a egalite. */
.bandeau-produits.deux .cadre.centre { width: 46%; margin-inline: -1.5%; }
.bandeau-produits.deux .cadre.centre:first-child { z-index: 1; }
@media (max-width: 700px) {
  .bandeau-produits.deux .cadre.centre:last-child { display: none; }
  .bandeau-produits.deux .cadre.centre:first-child { width: 84%; margin-inline: 0; }
}

/* Titre et capture cote a cote. Empiles, ils laissaient la moitie droite de la
   section vide sur toute la hauteur de l'image. */
.tete-illustree {
  display: grid; grid-template-columns: 1fr 620px;
  gap: clamp(2rem, 5vw, 4rem);
  /* centre plutot que start : la colonne image etant plus haute, le texte
     laissait un creux sous lui qui se lisait comme un oubli. */
  align-items: center;
}
.tete-illustree .ecran { margin: 0; max-width: none; }
@media (max-width: 1100px) {
  .tete-illustree { grid-template-columns: 1fr; }
  .tete-illustree .ecran { max-width: 620px; margin-top: var(--pas-3); }
}

/* Les stacks maitrises. Ils etayent la regle « aucun projet ne depend d'un
   fournisseur unique », qui etait affirmee sans preuve. */
/* Titre a gauche, stacks a droite : empiles, ils laissaient la moitie droite
   de la bande vide. */
.bloc-stacks {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 6vw, 5rem); align-items: center;
}
.bloc-stacks .entete-section { margin: 0; }
.liste-stacks {
  display: flex; flex-wrap: wrap; gap: 0.6rem;
  margin-top: 0;
}
@media (max-width: 900px) {
  .bloc-stacks { grid-template-columns: 1fr; }
  .liste-stacks { margin-top: var(--pas-3); }
}
.liste-stacks .etiquette { font-size: 0.82rem; padding: 0.55rem 1.1rem; }

/* En-tete de section sur deux colonnes. Par defaut .entete-section est plafonne
   a 50ch, ce qui tassait titre et chapo dans la moitie gauche et laissait la
   moitie droite vide sur toute leur hauteur. */
.entete-section.deux-col {
  max-width: none;
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 6vw, 5rem); align-items: end;
}
.entete-section.deux-col p { margin-top: 0; max-width: 48ch; }
@media (max-width: 900px) {
  .entete-section.deux-col { grid-template-columns: 1fr; gap: 0; }
  .entete-section.deux-col p { margin-top: 0.9rem; }
}

/* La capture etait plus haute que la colonne de texte : son bas arrivait a
   quinze pixels des blocs suivants. */
.tete-illustree { margin-bottom: var(--pas-4); }

/* ==========================================================
   HERO EN BLOC
   Le geste le plus reconnaissable de la reference : le hero
   n'est pas une bande a plat mais un grand bloc arrondi sombre,
   titre a gauche, produit a droite. On fusionne l'ancien .hero
   et l'ancienne .lumiere, qui etaient deux sections separees
   avec un filet entre elles.
   ========================================================== */
.hero-bloc {
  position: relative;
  width: min(1400px, 100% - 3rem);
  /* la nav est fixe : sans ce degagement le haut du bloc, coins arrondis
     compris, disparait derriere elle. L'ancienne section .hero avait un
     padding-top de 9rem qui jouait ce role. */
  margin: calc(var(--h-nav) + var(--pas-2)) auto var(--pas-3);
  padding: clamp(3rem, 6vw, 5.5rem) 0 clamp(2.5rem, 5vw, 4rem);
  border-radius: var(--r-bloc-l);
  overflow: hidden;
  color: var(--blanc);
  /* Le teal porte la profondeur, l'ambre ne fait qu'un rappel discret en bas
     a gauche : a 0.14 il virait a l'olive en se melant au vert du fond. */
  background:
    radial-gradient(70% 85% at 92% 0%, rgba(154, 208, 201, 0.46) 0%, rgba(154, 208, 201, 0.14) 34%, rgba(154, 208, 201, 0) 66%),
    radial-gradient(65% 70% at 8% 105%, rgba(var(--accent-rgb), 0.22) 0%, rgba(var(--accent-rgb), 0.05) 40%, rgba(var(--accent-rgb), 0) 68%),
    radial-gradient(120% 100% at 50% 50%, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(152deg, #17332c 0%, #102220 34%, var(--fond-sombre) 66%, #070f0e 100%);
  /* APRES le raccourci, sinon celui-ci remet background-color a transparent.
     Sans ce repli, si les degrades ne rendaient pas, le texte blanc du hero
     tomberait sur la creme et deviendrait illisible. */
  background-color: var(--fond-sombre);
}
.hero-bloc .hero-grille {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.hero-bloc h1 {
  color: #FFFFFF;
  font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.3rem);
  line-height: 1.06; letter-spacing: -0.035em; max-width: 17ch; margin: 0;
}
.hero-bloc .chapeau {
  margin: 1.4rem 0 0; max-width: 52ch;
  font-size: 1rem; line-height: 1.6; color: rgba(255, 255, 255, 0.74);
}
.hero-bloc .hero-etat { margin-top: 1.8rem; }
.hero-bloc .etiquette {
  border-color: var(--bord-sombre);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.82);
}
.hero-bloc .halo { display: none; }
.hero-bloc .grille-fond { display: none; }
.hero-produits { position: relative; }
/* Deux ecrans cote a cote dans une demi colonne devenaient illisibles.
   On les superpose en profondeur : un ecran principal, le second decale
   derriere, comme la maquette produit de la reference. */
.hero-produits .bandeau-produits {
  display: block; position: relative;
  width: 100%; max-width: none;
  padding-bottom: 14%;
}
.hero-produits .cadre.centre { width: 78%; margin: 0; }
.hero-produits .cadre.centre:first-child {
  position: relative; z-index: 2;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6);
}
.hero-produits .cadre.centre:last-child {
  position: absolute; right: 0; bottom: 0; z-index: 1;
  width: 62%; opacity: 0.9;
  box-shadow: 0 24px 48px -26px rgba(0, 0, 0, 0.55);
}
@media (max-width: 1000px) {
  .hero-produits .bandeau-produits { padding-bottom: 10%; }
}
.hero-produits .legende-produits {
  width: 100%; margin-top: 0.9rem; color: rgba(255, 255, 255, 0.55);
}
@media (max-width: 1000px) {
  .hero-bloc .hero-grille { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  /* sous 860px la nav n'est plus fixe (elle porte le burger et son panneau),
     elle occupe donc sa place dans le flux : le degagement de --h-nav ferait
     double emploi et creuserait un vide sous le header. */
  .hero-bloc { margin-top: var(--pas-2); }
}
@media (max-width: 720px) {
  .hero-bloc {
    width: calc(100% - 1.5rem);
    border-radius: var(--r-carte-l);
  }
}

/* ==========================================================
   BOUTONS D'APPEL
   Repris de la reference : une pilule prolongee d'un carre
   arrondi qui porte la fleche (2.75rem, rayon 10px chez eux).
   Le carre est en ambre plutot qu'en noir : sur notre bloc
   sombre, un carre noir disparaitrait.
   ========================================================== */
.hero-actions {
  display: flex; flex-wrap: wrap; gap: 0.75rem;
  margin-top: 2rem;
}
/* Rectangle arrondi, pas pilule. En pilule, l'extremite droite est un demi
   cercle de 28px de rayon : un carre de 44px centre dedans depasse forcement
   par ses coins. La reference elle meme plafonne ses boutons a 12px. */
.bouton-push, .bouton-contour {
  display: inline-flex; align-items: center;
  border-radius: var(--r);
  font-size: 0.95rem; font-weight: 500;
  text-decoration: none;
  transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.bouton-push {
  gap: 0.9rem;
  padding: 0.35rem 0.35rem 0.35rem 1.35rem;
  background: #FFFFFF; color: var(--fond-sombre);
}
.bouton-push .carre {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; flex: none;
  border-radius: var(--r-petit);
  background: var(--accent); color: var(--fond-sombre);
}
.bouton-push .carre svg { width: 18px; height: 18px; }
.bouton-push:hover { transform: translateY(-2px); }
.bouton-contour {
  /* meme hauteur que le bouton principal : 2.5rem de carre + 2 x 0.35rem */
  padding: 0.85rem 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #FFFFFF;
}
.bouton-contour:hover { border-color: var(--accent); color: var(--accent); }
/* Le bouton pousse est blanc : pose sur une surface claire (.bloc-cta est
   creme, les cartes de la page accompagnement aussi) il devenait invisible.
   Sur fond clair il s'inverse, et le contour reprend l'encre. */
.bande-claire .bouton-push, .bloc-cta .bouton-push, .emport .bouton-push {
  background: var(--fond-bouton); color: #FFFFFF;
}
.bande-sombre .emport .bouton-push { background: #FFFFFF; color: var(--fond-sombre); }
.bande-claire .bouton-contour, .bloc-cta .bouton-contour {
  border-color: var(--bord); color: var(--encre);
}
.bande-claire .bouton-contour:hover, .bloc-cta .bouton-contour:hover {
  border-color: var(--encre); color: var(--encre);
}

@media (max-width: 480px) {
  .hero-actions { flex-direction: column; align-items: flex-start; }
  .bouton-push, .bouton-contour { width: 100%; justify-content: space-between; }
  .bouton-contour { justify-content: center; }
}

/* ==========================================================
   SCHEMA ABSTRAIT DU HERO
   Remplace les deux captures produit. Une maquette abstraite
   plutot qu'un ecran reel : le panneau central figure l'outil
   qu'on construit, les quatre pastilles les quatre gestes.
   Tout est en SVG et CSS, donc net a toute taille, leger, et
   indexable. Les animations respectent prefers-reduced-motion.
   ========================================================== */
.schema-hero { margin: 0; }
.schema-hero svg { width: 100%; height: auto; display: block; overflow: visible; }

/* ==========================================================
   SCHEMAS DES CAS D'USAGE
   Un schema abstrait anime par prestation, a la place des
   captures d'ecran produit. Chaque section porte le sien :
   le modele de donnees qui devient des ecrans, le trajet
   d'une question, la chaine d'un traitement.
   Les couleurs s'adaptent a la bande qui les accueille.
   ========================================================== */
.schema-cas { margin: 0 0 var(--pas-4); max-width: 640px; }
.schema-cas svg { width: 100%; height: auto; display: block; overflow: visible; }

/* --- la fenetre, socle commun aux trois maquettes ---
   Les maquettes gardent leur propre lumiere quelle que soit la bande qui les
   accueille : une interface claire sur fond sombre, c'est exactement ce qu'on
   voit sur un ecran. Seules les legendes hors fenetre suivent la bande. */
.schema-cas .mk-ombre { fill: rgba(20, 24, 26, 0.16); }
.bande-sombre .schema-cas .mk-ombre { fill: rgba(0, 0, 0, 0.3); }
.schema-cas .mk-cadre { fill: #FBFBF9; stroke: rgba(20, 24, 26, 0.12); stroke-width: 1; }
.bande-sombre .schema-cas .mk-cadre { stroke: rgba(255, 255, 255, 0.5); }
.schema-cas .mk-point { fill: rgba(20, 24, 26, 0.16); }
.schema-cas .mk-url { fill: rgba(20, 24, 26, 0.07); }
.schema-cas .mk-filet { stroke: rgba(20, 24, 26, 0.09); stroke-width: 1; fill: none; }
.schema-cas .mk-onglet { fill: rgba(20, 24, 26, 0.12); }
.schema-cas .mk-onglet.actif { fill: var(--accent); }
.schema-cas .mk-titre {
  fill: rgba(20, 24, 26, 0.72);
  font-family: var(--font-mono); font-size: 11.5px;
}
.schema-cas .mk-bouton { fill: var(--fond-bouton); }
.schema-cas .mk-plus { stroke: var(--accent); stroke-width: 1.4; stroke-linecap: round; }
.schema-cas .mk-entete rect { fill: rgba(20, 24, 26, 0.14); }

.schema-cas .mk-fond-l { fill: #FFFFFF; stroke: rgba(20, 24, 26, 0.09); stroke-width: 1; }
.schema-cas .mk-vig { fill: rgba(20, 24, 26, 0.10); }
.schema-cas .mk-t1 { fill: rgba(20, 24, 26, 0.4); }
.schema-cas .mk-t2 { fill: rgba(20, 24, 26, 0.16); }
.schema-cas .mk-etat.ok { fill: rgba(154, 208, 201, 0.8); }
.schema-cas .mk-etat.attente { fill: rgba(var(--accent-rgb), 0.85); }
.schema-cas .mk-etat.rate { fill: rgba(var(--accent-rgb), 0.85); }
.schema-cas .mk-roles circle { fill: rgba(20, 24, 26, 0.14); }
.schema-cas .mk-badge { fill: var(--accent-voile); stroke: var(--accent); stroke-width: 1; }

/* legendes et entites hors fenetre : elles, suivent la bande */
.schema-cas .mk-lgd { fill: var(--texte-2); font-family: var(--font-mono); font-size: 11.5px; }
.bande-sombre .schema-cas .mk-lgd { fill: rgba(255, 255, 255, 0.55); }
.schema-cas .mk-lgd.sombre { fill: rgba(20, 24, 26, 0.45); font-size: 10.5px; }
.bande-sombre .schema-cas .mk-lgd.sombre { fill: rgba(20, 24, 26, 0.45); }
.schema-cas .mk-ent rect {
  fill: var(--fond-carte); stroke: var(--bord); stroke-width: 1;
}
.bande-sombre .schema-cas .mk-ent rect {
  fill: rgba(255, 255, 255, 0.05); stroke: rgba(255, 255, 255, 0.16);
}
.schema-cas .mk-ent text {
  fill: var(--encre); text-anchor: middle;
  font-family: var(--font-mono); font-size: 12px;
}
.bande-sombre .schema-cas .mk-ent text { fill: rgba(255, 255, 255, 0.85); }
.schema-cas .mk-t3 { fill: var(--bord); }
.bande-sombre .schema-cas .mk-t3 { fill: rgba(255, 255, 255, 0.28); }
.schema-cas .mk-t3.pale { opacity: 0.6; }
.schema-cas .mk-fil path { fill: none; stroke: var(--bord); stroke-width: 1.2; stroke-dasharray: 3 4; }
.bande-sombre .schema-cas .mk-fil path { stroke: rgba(255, 255, 255, 0.26); }
.schema-cas .mk-jeton { fill: var(--accent); }

/* --- maquette 2 : la conversation --- */
.schema-cas .mk-vivant { fill: rgba(154, 208, 201, 0.95); animation: mk-pouls 2.6s ease-in-out infinite; }
.schema-cas .mk-bulle-v { fill: rgba(20, 24, 26, 0.06); }
.schema-cas .mk-bulle-a { fill: #FFFFFF; stroke: rgba(20, 24, 26, 0.1); stroke-width: 1; }
.schema-cas .mk-source { fill: rgba(154, 208, 201, 0.22); }
.schema-cas .mk-doc { fill: none; stroke: rgba(20, 24, 26, 0.5); stroke-width: 1.1; stroke-linejoin: round; }
.schema-cas .mk-mini {
  fill: rgba(20, 24, 26, 0.6);
  font-family: var(--font-mono); font-size: 10.5px;
}
.schema-cas .mk-mini.fort { fill: rgba(20, 24, 26, 0.82); }
/* le calcul serveur est le point de la section : c'est le seul bloc accentue */
.schema-cas .mk-calcul { fill: var(--accent-voile); stroke: var(--accent); stroke-width: 1; }
.schema-cas .mk-cadenas { fill: none; stroke: var(--fond-bouton); stroke-width: 1.3; stroke-linejoin: round; }
.schema-cas .mk-main { fill: rgba(20, 24, 26, 0.04); }
.schema-cas .mk-fleche-m { fill: none; stroke: rgba(20, 24, 26, 0.55); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }

/* --- maquette 3 : le journal --- */
.schema-cas .mk-chaine rect { fill: rgba(20, 24, 26, 0.05); stroke: rgba(20, 24, 26, 0.1); stroke-width: 1; }
.schema-cas .mk-chaine text {
  fill: rgba(20, 24, 26, 0.75); text-anchor: middle;
  font-family: var(--font-mono); font-size: 11.5px;
}
.schema-cas .mk-fil-c { stroke: rgba(20, 24, 26, 0.2); stroke-width: 1.2; fill: none; }
.schema-cas .mk-heure { fill: rgba(20, 24, 26, 0.45); font-family: var(--font-mono); font-size: 11px; }
.schema-cas .mk-duree { fill: rgba(20, 24, 26, 0.12); }
.schema-cas .mk-duree.rate { fill: rgba(var(--accent-rgb), 0.55); }
.schema-cas .mk-fond-echec { fill: var(--accent-voile); }
.schema-cas .mk-alerte { fill: none; stroke: var(--fond-bouton); stroke-width: 1.3; stroke-linejoin: round; stroke-linecap: round; }

/* Les lignes se posent l'une apres l'autre sans jamais disparaitre : au repos
   la maquette doit etre pleine, sinon toute capture la montre vide. */
.schema-cas .mk-ligne { animation: mk-pose 6.5s ease-in-out infinite; }
.schema-cas .mk-ligne.d2 { animation-delay: .4s; }
.schema-cas .mk-ligne.d3 { animation-delay: .8s; }
.schema-cas .mk-run.echec { animation: mk-alerte 4.5s ease-in-out infinite; }

@keyframes mk-pose { 0%, 100% { opacity: .6; } 26%, 58% { opacity: 1; } }
@keyframes mk-pouls { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes mk-alerte { 0%, 100% { opacity: .78; } 45% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .schema-cas .mk-ligne, .schema-cas .mk-vivant,
  .schema-cas .mk-run.echec { animation: none; opacity: 1; }
}

/* --- schema du hero : de vos systemes reels a l'outil qui manquait ---
   Le panneau de droite etait trois barres grises : il ne montrait pas un
   outil, il montrait un gabarit. Il porte maintenant un vrai chrome de
   fenetre (rail, en-tete, lignes de donnees avec statut, une mesure), parce
   que c'est exactement ce que le texte promet de livrer. */
.schema-hero .lgd {
  fill: rgba(255, 255, 255, 0.55);
  font-family: var(--font-mono); font-size: 12px;
}
.schema-hero .lgd.centre { text-anchor: middle; }
.schema-hero .lgd.petite { font-size: 10.5px; fill: rgba(255, 255, 255, 0.4); }

/* le desordre de depart : liens irreguliers qui se croisent, et des cartes
   qui portent la silhouette de l'outil qu'elles representent */
.schema-hero .fouillis path {
  fill: none; stroke: rgba(255, 255, 255, 0.20); stroke-width: 1.2;
  stroke-dasharray: 3 4;
  animation: sh-derive 22s linear infinite;
}
.schema-hero .src rect {
  fill: rgba(255, 255, 255, 0.05);
  stroke: rgba(255, 255, 255, 0.15); stroke-width: 1;
}
.schema-hero .src .grille path {
  fill: none; stroke: rgba(255, 255, 255, 0.34);
  stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round;
}
.schema-hero .src text {
  fill: rgba(255, 255, 255, 0.7);
  font-family: var(--font-mono); font-size: 11px;
}

/* l'ingenieur, au milieu, pas a distance */
.schema-hero .cadre-i {
  fill: rgba(var(--accent-rgb), 0.12); stroke: var(--accent); stroke-width: 1.4;
}
.schema-hero .icone-i {
  fill: none; stroke: var(--accent); stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.schema-hero .voie {
  fill: none; stroke: rgba(255, 255, 255, 0.28); stroke-width: 1;
  stroke-dasharray: 4 5;
}
.schema-hero .fleche-i { fill: rgba(255, 255, 255, 0.5); }
.schema-hero .jeton-h { fill: var(--accent); }

/* l'outil livre : une fenetre, avec ce qu'une fenetre a vraiment */
.schema-hero .ombre-p { fill: rgba(0, 0, 0, 0.28); }
.schema-hero .cadre-p {
  fill: #FBFBF9;
  stroke: rgba(255, 255, 255, 0.5); stroke-width: 1;
}
.schema-hero .pastille-f { fill: rgba(20, 24, 26, 0.16); }
.schema-hero .url-f { fill: rgba(20, 24, 26, 0.07); }
.schema-hero .filet { stroke: rgba(20, 24, 26, 0.09); stroke-width: 1; fill: none; }
.schema-hero .onglet { fill: rgba(20, 24, 26, 0.12); }
.schema-hero .onglet.actif { fill: var(--accent); }
.schema-hero .etiq {
  fill: rgba(20, 24, 26, 0.62);
  font-family: var(--font-mono); font-size: 10.5px;
}
.schema-hero .etiq.petite { font-size: 9.5px; fill: rgba(20, 24, 26, 0.45); }
.schema-hero .bouton-f { fill: var(--fond-bouton); }
.schema-hero .plus-f { stroke: var(--accent); stroke-width: 1.4; stroke-linecap: round; }

.schema-hero .fond-l { fill: #FFFFFF; stroke: rgba(20, 24, 26, 0.09); stroke-width: 1; }
.schema-hero .vignette { fill: rgba(20, 24, 26, 0.10); }
.schema-hero .txt-1 { fill: rgba(20, 24, 26, 0.42); }
.schema-hero .txt-2 { fill: rgba(20, 24, 26, 0.16); }
.schema-hero .etat.ok { fill: rgba(154, 208, 201, 0.75); }
.schema-hero .etat.attente { fill: rgba(var(--accent-rgb), 0.8); }
/* les lignes se posent l'une apres l'autre, sans jamais disparaitre : une
   capture prise au repos doit montrer le panneau plein */
.schema-hero .ligne { animation: sh-ligne 7s ease-in-out infinite; }
.schema-hero .ligne.l2 { animation-delay: .45s; }
.schema-hero .ligne.l3 { animation-delay: .9s; }

.schema-hero .barres rect { fill: rgba(20, 24, 26, 0.14); transform-origin: center bottom; }
.schema-hero .barres .derniere { fill: var(--accent); }
.schema-hero .barres rect { animation: sh-barre 7s ease-in-out infinite; }
.schema-hero .barres rect:nth-child(2) { animation-delay: .1s; }
.schema-hero .barres rect:nth-child(3) { animation-delay: .2s; }
.schema-hero .barres rect:nth-child(4) { animation-delay: .3s; }
.schema-hero .barres rect:nth-child(5) { animation-delay: .4s; }
.schema-hero .chiffre {
  fill: var(--fond-bouton); text-anchor: end;
  font-family: var(--font-mono); font-size: 15px; font-weight: 500;
}

@keyframes sh-derive { to { stroke-dashoffset: -70; } }
@keyframes sh-ligne { 0%, 100% { opacity: 0.55; } 24%, 56% { opacity: 1; } }
@keyframes sh-barre { 0%, 100% { transform: scaleY(0.82); } 30%, 62% { transform: scaleY(1); } }

@media (prefers-reduced-motion: reduce) {
  .schema-hero .fouillis path, .schema-hero .ligne,
  .schema-hero .barres rect, .schema-hero .jeton-h { animation: none; }
  .schema-hero .ligne { opacity: 1; }
  .schema-hero .barres rect { transform: none; }
}

/* --- Projet a impact : quatre volets, meme grammaire que les cas d'usage --- */
.grille-volets { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.5rem 3rem; }
.volet { display: flex; gap: 1.1rem; }
.volet-num {
  /* l'ambre tombe a 1,6:1 sur la creme : il ne sert qu'a accentuer, jamais
     a porter du texte lisible sur fond clair */
  font-family: var(--font-mono); font-size: 0.75rem; color: var(--texte-2);
  padding-top: 0.3rem; flex: none;
}
.volet h3 { font-size: 1.08rem; font-weight: 500; margin-bottom: 0.5rem; }
.volet p { font-size: 0.95rem; color: var(--texte-2); }
.volet-note {
  display: block; margin-top: 0.65rem;
  font-family: var(--font-mono); font-size: 0.74rem; color: var(--texte-2);
}
@media (max-width: 760px) { .grille-volets { grid-template-columns: 1fr; gap: 2rem; } }

/* ==========================================================
   NAV : GRILLE ALIGNEE SUR LES BLOCS, ET BURGER EN MOBILE
   Deux defauts corriges le 2026-09-09. La marque tombait a 48px
   quand le titre du hero etait a 60 : la nav reproduit maintenant
   la geometrie des blocs, bandeau puis conteneur. Et sous 860px
   quatre pilules sur sept sortaient de l'ecran dans une nav
   defilante sans repere : un burger les remplace.
   ========================================================== */
.nav-bandeau { width: min(1400px, 100% - 3rem); margin-inline: auto; }
.nav-interieur {
  /* Aligne sur le BORD des blocs, pas sur leur contenu interieur : la marque
     etait en retrait de 36px par rapport a l'arete gauche des blocs, ce qui
     faisait flotter le header au dessus de la grille. */
  width: 100%; margin-inline: 0;
  display: flex; align-items: center; gap: 0.35rem;
}
.nav-liens { display: flex; align-items: center; gap: 0.35rem; margin-left: auto; }

/* Le burger n'apparait que si le JS a pose la classe .js : sans JS il ne
   servirait a rien, et la nav retombe sur son comportement defilant. */
.burger { display: none; }

@media (max-width: 860px) {
  .nav-js .burger {
    display: inline-flex; flex-direction: column; justify-content: center;
    gap: 5px; margin-left: auto;
    width: 42px; height: 42px; padding: 0 10px;
    background: none; border: 1px solid var(--bord); border-radius: var(--r);
    cursor: pointer;
  }
  .nav-js .burger span {
    display: block; height: 1.5px; width: 100%;
    background: var(--encre); border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }
  .nav-js .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .nav-js .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-js .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

  .nav-js .nav-liens {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0.3rem;
    margin: 0; padding: 0.8rem 1.25rem 1.1rem;
    background: var(--fond); border-bottom: 1px solid var(--bord);
  }
  .nav-js .nav-liens.ouvert { display: flex; }
  .nav-js .nav-liens .pilule { justify-content: flex-start; padding: 0.7rem 0.9rem; }
  .nav-pilules { position: relative; }
}

/* Les sections nouvellement passees en blocs : fond, degagement de la barre
   fixe, et paddings ramenes a l'echelle commune (elles portaient 8.5rem en
   haut pour degager la nav, ce que fait desormais la marge). */
.hero, .tete-index, .tete-article, .tete-metier {
  background: var(--fond-carte);
  border: 1px solid var(--ligne-fine);
  margin-top: calc(var(--h-nav) + var(--pas-2));
  padding-top: var(--pas-5);
  padding-bottom: var(--pas-4);
}
.bandeau-demandes, .suite-lecture {
  background: var(--fond-carte);
  border: 1px solid var(--ligne-fine);
}
.bloc-cta {
  background: var(--creme);
  border: 1px solid var(--ligne-fine);
}
@media (max-width: 860px) {
  .hero, .tete-index, .tete-article, .tete-metier { margin-top: var(--pas-2); }
}
@media (max-width: 720px) {
  .hero, .tete-index, .tete-article, .tete-metier,
  .bandeau-demandes, .bloc-cta, .suite-lecture, footer {
    width: calc(100% - 1.5rem);
    border-radius: var(--r-carte-l);
  }
}

/* Marge interieure des blocs, fixe plutot que derivee d'un conteneur centre.
   Avec .conteneur plafonne a 1160 dans un bloc de 1392, le contenu se
   retrouvait a 116px du bord, ecart qui bougeait a chaque largeur d'ecran.
   Le logo etant desormais cale sur l'arete du bloc, la grille doit etre
   previsible. */
.hero-bloc > .conteneur,
.bande-sombre > .conteneur,
.bande-blanche > .conteneur,
.bande-claire > .conteneur,
.hero > .conteneur,
.tete-index > .conteneur,
.tete-article > .colonne,
.tete-metier > .conteneur,
.bloc-cta > .conteneur,
.suite-lecture > .conteneur,
footer > .conteneur {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: clamp(1.25rem, 3vw, 2.75rem);
}

/* ---------- Hero photo (reference oliverlist, 2026-09-15) ----------
   Photo pleine largeur dans le bloc arrondi, voile sombre pour la
   lisibilite du texte blanc, preuves chiffrees en bas a droite.
   Les chiffres viennent du site lui-meme : clients des plateformes,
   certifications et clouds listes dans #stacks. */
.hero-photo { background: var(--fond-sombre); min-height: min(88vh, 820px); display: flex; align-items: flex-end;
  padding: clamp(7rem, 16vh, 11rem) 0 clamp(2rem, 4vw, 3.25rem); }
.hero-photo .hero-fond { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; }
.hero-photo .hero-voile { position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(7, 15, 14, 0.86) 0%, rgba(7, 15, 14, 0.62) 42%, rgba(7, 15, 14, 0.12) 75%),
              linear-gradient(0deg, rgba(7, 15, 14, 0.78) 0%, rgba(7, 15, 14, 0) 45%); }
.hero-photo .conteneur { position: relative; z-index: 1; width: 100%;
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 2rem; align-items: end; }
.hero-photo h1 { font-size: clamp(2.3rem, 1.3rem + 3.6vw, 4.4rem); max-width: 15ch; }
.hero-photo .chapeau { color: rgba(255, 255, 255, 0.84); max-width: 50ch; }
.hero-chiffres { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, auto);
  justify-content: end; gap: clamp(1.25rem, 3vw, 2.75rem); }
.hero-chiffres strong { display: block; font-family: var(--font-titre); font-weight: 600; color: #FFFFFF;
  font-size: clamp(2rem, 1.2rem + 2.4vw, 3.1rem); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.hero-chiffres .hc-l { display: block; margin-top: 0.45rem; max-width: 13ch; font-size: 0.9rem; line-height: 1.35; color: rgba(255, 255, 255, 0.78); }
.bande-passage .hero-produits { max-width: 900px; margin: 0 auto; }
@media (max-width: 1000px) {
  .hero-photo .conteneur { grid-template-columns: 1fr; }
  .hero-chiffres { justify-content: start; }
}
@media (max-width: 560px) {
  .hero-photo { min-height: 0; padding-top: 12rem; }
  .hero-photo .hero-fond { object-position: 62% 92%; }
  .hero-photo .hero-voile { background: linear-gradient(0deg, rgba(7, 15, 14, 0.92) 0%, rgba(7, 15, 14, 0.7) 60%, rgba(7, 15, 14, 0.25) 100%); }
  .hero-chiffres { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
}

/* ---------- Bandeaux de projets (use-cases), generes par _projets.py ---------- */
.rail-projets { margin: 2.5rem 0 3rem; }
.rail-tete { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.rail-titre { margin: 0; font-weight: 600; color: var(--accent-fonce); }
.rail-fleches { display: flex; gap: 0.5rem; }
.rail-statique .rail-fleches { display: none; }
.rail-fleche {
  width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--ligne-fine); background: var(--fond-carte); color: var(--encre-titre); cursor: pointer;
  transition: background .2s, color .2s, opacity .2s;
}
.rail-fleche svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rail-fleche:hover:not(:disabled) { background: var(--encre-titre); color: #FFFFFF; }
.rail-fleche:disabled { opacity: 0.35; cursor: default; }
.rail-piste {
  list-style: none; margin: 0; padding: 0 0 0.75rem; display: grid; grid-auto-flow: column;
  grid-auto-columns: min(84%, 22rem); gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain; scrollbar-width: thin;
}
.rail-piste:focus-visible { outline: 2px solid var(--accent-fonce); outline-offset: 4px; }
.carte-projet { scroll-snap-align: start; }
.carte-projet a {
  height: 100%; display: flex; flex-direction: column; gap: 0.5rem; padding: 1.4rem;
  border-radius: 14px; border: 1px solid var(--ligne-fine); background: var(--fond-carte);
  color: var(--encre); text-decoration: none; transition: transform .25s ease, border-color .25s;
}
.carte-projet a:hover { transform: translateY(-3px); border-color: var(--accent-fonce); }
.carte-projet-img { display: block; max-width: none; width: calc(100% + 2.8rem); margin: -1.4rem -1.4rem 0.6rem; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; border-radius: 13px 13px 0 0; }
.carte-projet-type { font-size: 0.9rem; color: var(--texte-2); }
.carte-projet-nom { font-family: var(--font-titre); font-weight: 600; font-size: 1.45rem; line-height: 1.1; letter-spacing: -0.01em; color: var(--encre-titre); }
.carte-projet-resume { color: var(--texte-2); font-size: 0.95rem; line-height: 1.5; }
.carte-projet-chiffre { margin-top: 0.25rem; font-size: 0.92rem; color: var(--texte-2); }
.carte-projet-chiffre strong { display: block; font-family: var(--font-titre); font-size: 1.9rem; line-height: 1; color: var(--accent-fonce); font-variant-numeric: tabular-nums; }
.carte-projet-lien { margin-top: auto; padding-top: 0.75rem; font-weight: 600; color: var(--encre-titre); }
.bande-sombre .rail-titre { color: var(--accent); }
.bande-sombre .rail-fleche { background: transparent; color: #FFFFFF; border-color: rgba(255, 255, 255, 0.25); }
.bande-sombre .rail-fleche:hover:not(:disabled) { background: #FFFFFF; color: var(--encre-titre); }
.bande-sombre .carte-projet a { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.14); color: #FFFFFF; }
.bande-sombre .carte-projet a:hover { border-color: var(--accent); }
.bande-sombre .carte-projet-nom, .bande-sombre .carte-projet-lien { color: #FFFFFF; }
.bande-sombre .carte-projet-type, .bande-sombre .carte-projet-resume, .bande-sombre .carte-projet-chiffre { color: rgba(255, 255, 255, 0.72); }
.bande-sombre .carte-projet-chiffre strong { color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .carte-projet a { transition: none; } .carte-projet a:hover { transform: none; } }
/* Lien de prise de rendez-vous dans la section contact de la home */
.lien-demo { margin: 0.9rem 0 1.6rem; color: rgba(255, 255, 255, 0.8); }
.lien-demo a { color: var(--accent); font-weight: 600; text-underline-offset: 3px; }

/* ---------- CTA flottant (toutes les pages, genere par _nav.py) ---------- */
.cta-flottant {
  position: fixed; z-index: 480; left: 50%; bottom: 1.1rem; transform: translate(-50%, 140%);
  display: flex; gap: 0.35rem; padding: 0.35rem; border-radius: 999px;
  background: rgba(13, 26, 24, 0.9); border: 1px solid rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.55);
  opacity: 0; pointer-events: none; transition: transform .35s ease, opacity .35s ease;
}
.cta-flottant.visible { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.cta-flottant.saisie { transform: translate(-50%, 140%); opacity: 0; pointer-events: none; }
.cf-lien {
  display: inline-flex; align-items: center; gap: 0.5rem; white-space: nowrap;
  padding: 0.7rem 1.05rem; border-radius: 999px; color: #FFFFFF; text-decoration: none;
  font-weight: 600; font-size: 0.92rem; transition: background .2s, color .2s;
}
.cf-lien svg { width: 1.05rem; height: 1.05rem; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cf-lien:hover { background: rgba(255, 255, 255, 0.1); }
.cf-lien.principal { background: var(--accent); color: #0D1A18; }
.cf-lien.principal:hover { background: #FDBA74; }
.cf-lien:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cf-court { display: none; }
@media (max-width: 640px) {
  .cta-flottant { left: 0.6rem; right: 0.6rem; bottom: 0.6rem; transform: translateY(140%); justify-content: space-between; }
  .cta-flottant.visible { transform: none; }
  .cta-flottant.saisie { transform: translateY(140%); }
  .cf-lien { flex: 1; justify-content: center; flex-direction: column; gap: 0.2rem; padding: 0.55rem 0.3rem; font-size: 0.74rem; }
  .cf-long { display: none; } .cf-court { display: inline; }
  footer { padding-bottom: 5.5rem; }
}
@media (prefers-reduced-motion: reduce) { .cta-flottant { transition: none; } }

/* ---------- Parcours en quatre etapes (home, bande-passage) ----------
   Remplace le schema SVG : son texte grossissait avec le conteneur et
   chevauchait les cartes. Ici le texte est du HTML, il passe a la ligne.
   Une seule ligne relie les etapes, un point la parcourt. */
.bande-passage .parcours-tete { max-width: 46rem; }
.parcours { list-style: none; margin: 2.5rem 0 0; padding: 0; position: relative;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; counter-reset: none; }
.parcours::before { content: ""; position: absolute; left: 1.25rem; right: 1.25rem; top: 1.25rem; height: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,.14), rgba(var(--accent-rgb), .7), rgba(255,255,255,.14)); }
.parcours::after { content: ""; position: absolute; top: calc(1.25rem - 4px); left: 1.25rem; width: 10px; height: 10px;
  border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 6px rgba(var(--accent-rgb), .18);
  animation: pc-voyage 6s ease-in-out infinite; }
@keyframes pc-voyage { 0% { left: 1.25rem; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { left: calc(100% - 1.25rem - 10px); opacity: 0; } }
.pc-etape { position: relative; display: flex; flex-direction: column; gap: 0.5rem; }
.pc-num { position: relative; z-index: 1; width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--fond-sombre); border: 2px solid var(--accent); color: #FFFFFF; font-weight: 600; margin-bottom: 0.9rem; }
.pc-etape h3 { margin: 0; font-size: 1.12rem; line-height: 1.25; color: #FFFFFF; }
.pc-etape > p { margin: 0; color: rgba(255,255,255,.7); font-size: 0.95rem; line-height: 1.5; }
.pc-puces { list-style: none; margin: 0.6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.pc-puces li { padding: 0.35rem 0.7rem; border-radius: 999px; border: 1px dashed rgba(255,255,255,.28); color: rgba(255,255,255,.82); font-size: 0.85rem; }
.pc-gestes li { border-style: solid; border-color: rgba(var(--accent-rgb), .55); color: #FFFFFF; background: rgba(var(--accent-rgb), .1); }
.pc-ingenieur { margin-top: 0.6rem; width: 4.25rem; height: 4.25rem; border-radius: 18px; display: grid; place-items: center;
  border: 1.5px solid var(--accent); background: rgba(var(--accent-rgb), .12); }
.pc-ingenieur svg, .pl-ic svg { width: 58%; height: 58%; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; }
.pc-outil { margin-top: 0.6rem; padding: 0.7rem; border-radius: 12px; background: #FFFFFF; display: grid; gap: 0.4rem;
  box-shadow: 0 20px 40px -24px rgba(0,0,0,.6); max-width: 15rem; }
.pc-barre { height: 0.45rem; width: 45%; border-radius: 4px; background: rgba(20,24,26,.12); }
.pc-ligne { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.4rem 0.5rem;
  border: 1px solid rgba(20,24,26,.08); border-radius: 7px; animation: pc-ligne 6s ease-in-out infinite; }
.pc-ligne:nth-child(3) { animation-delay: .4s; } .pc-ligne:nth-child(4) { animation-delay: .8s; }
.pc-ligne i { height: 0.35rem; width: 55%; border-radius: 3px; background: rgba(20,24,26,.3); }
.pc-ligne b { height: 0.5rem; width: 1.6rem; border-radius: 4px; }
.pc-ligne b.ok { background: rgba(154,208,201,.9); } .pc-ligne b.attente { background: var(--accent); }
@keyframes pc-ligne { 0%, 60%, 100% { transform: none; } 70% { transform: translateX(3px); } }
@media (max-width: 900px) {
  .parcours { grid-template-columns: 1fr; gap: 1.75rem; padding-left: 3.5rem; }
  .parcours::before { left: 1.2rem; right: auto; top: 1.25rem; bottom: 1.25rem; width: 2px; height: auto;
    background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(var(--accent-rgb), .7), rgba(255,255,255,.14)); }
  .parcours::after { left: calc(1.2rem - 4px); top: 1.25rem; animation-name: pc-voyage-v; }
  @keyframes pc-voyage-v { 0% { top: 1.25rem; opacity: 0; } 8%, 92% { opacity: 1; } 100% { top: calc(100% - 1.25rem - 10px); opacity: 0; } }
  .pc-num { position: absolute; left: -3.5rem; top: 0; margin: 0; }
  .pc-etape h3 { padding-top: 0.45rem; }
}

/* ---------- Qui pilote (home) ----------
   Deux rangs d'agents autour d'un rang humain pleine largeur : aucun trait
   ne traverse une carte. Chaque agent a deux liens vers l'humain, en tirets
   (il absorbe) et plein (il rend la main), un point remonte le trait plein. */
.pilote { display: grid; gap: 2.5rem; }
.pl-rang { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.pl-agent { position: relative; padding: 0.95rem 1.1rem; border-radius: 14px; background: rgba(255,255,255,.05);
  border: 1px solid var(--bord-sombre); display: grid; gap: 0.2rem; }
.pl-agent strong { color: #FFFFFF; font-weight: 600; font-size: 1rem; }
.pl-agent > span { color: rgba(255,255,255,.62); font-size: 0.9rem; }
.pl-agent::before, .pl-agent::after { content: ""; position: absolute; left: 50%; height: 2.5rem; }
.pl-haut .pl-agent::before, .pl-haut .pl-agent::after { top: 100%; }
.pl-bas .pl-agent::before, .pl-bas .pl-agent::after { bottom: 100%; }
.pl-agent::before { margin-left: -7px; border-left: 1.5px dashed rgba(255,255,255,.3); }
.pl-agent::after { margin-left: 5px; width: 0; border-left: 2px solid var(--accent); opacity: .55;
  animation: pl-rend 6s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes pl-rend { 0%, 100% { opacity: .3; } 22%, 46% { opacity: 1; } }
.pl-humain { position: relative; z-index: 1; display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.25rem;
  border-radius: 18px; border: 1.5px solid var(--accent); background: rgba(var(--accent-rgb), .12); }
.pl-ic { flex: none; width: 3.25rem; height: 3.25rem; border-radius: 14px; display: grid; place-items: center; background: rgba(var(--accent-rgb), .16); }
.pl-humain strong { display: block; color: var(--accent); font-size: 1.15rem; }
.pl-humain span span { display: block; color: rgba(255,255,255,.75); font-size: 0.92rem; margin-top: 0.15rem; }
.pl-legende { list-style: none; margin: -0.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.pl-legende li { display: flex; align-items: center; gap: 0.6rem; color: rgba(255,255,255,.62); font-size: 0.88rem; }
.pl-trait { width: 1.6rem; flex: none; border-top: 2px solid var(--accent); }
.pl-trait.tirets { border-top: 1.5px dashed rgba(255,255,255,.4); }
@media (prefers-reduced-motion: reduce) { .parcours::after, .pc-ligne, .pl-agent::after { animation: none; } .pl-agent::after { opacity: 1; } }

/* ---------- Mega menu (genere par _nav.py, pilote par assets/nav.js) ---------- */
.mega { position: static; }
.mega-bouton { cursor: pointer; font: inherit; font-size: 0.9rem; font-weight: 500; }
.mega-bouton .chevron { display: block; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; color: var(--texte-3); transition: transform .2s ease; }
.mega.ouvert .mega-bouton .chevron { transform: rotate(180deg); }
.mega-bouton[data-courante], .nav-liens .pilule[aria-current="page"] { color: var(--accent-fonce); }
.mega-panneau { position: absolute; left: 0; right: 0; top: 100%; padding: 0 0 1.25rem; background: var(--fond);
  border-bottom: 1px solid var(--bord); box-shadow: 0 30px 50px -30px rgba(13, 26, 24, 0.25); animation: mega-entree .18s ease both; }
@keyframes mega-entree { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.mega-grille { width: min(1400px, 100% - 3rem); margin: 0 auto; padding-top: 1.5rem; display: grid; gap: 2rem; }
.mega-grille.mega-1 { grid-template-columns: minmax(0, 1fr); max-width: 30rem; margin-left: auto; margin-right: max(1.5rem, calc((100% - 1400px) / 2)); }
.mega-grille.mega-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mega-grille.mega-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mega-titre { display: block; margin: 0 0 0.6rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--bord);
  font-weight: 600; font-size: 0.95rem; color: var(--encre-titre); text-decoration: none; }
a.mega-titre:hover { color: var(--accent-fonce); }
.mega-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
.mega-col li a { display: grid; gap: 0.1rem; padding: 0.55rem 0.7rem; margin: 0 -0.7rem; border-radius: 10px; color: var(--encre); text-decoration: none; }
.mega-col li a:hover, .mega-col li a:focus-visible { background: var(--fond-carte); outline: none; }
.mega-col li a:hover .mega-nom { color: var(--accent-fonce); }
.mega-nom { font-weight: 500; font-size: 0.95rem; }
.mega-desc { font-size: 0.85rem; color: var(--texte-2); }
.pilule-contact { background: var(--fond-bouton); color: #FFFFFF; padding: 0.55rem 1.1rem; margin-left: 0.25rem; }
.pilule-contact:hover { background: var(--accent); color: var(--encre-titre); }
@media (max-width: 860px) {
  .nav-js .nav-liens { max-height: calc(100vh - 80px); overflow-y: auto; }
  .mega-bouton { width: 100%; justify-content: space-between; padding: 0.7rem 0.9rem; }
  .mega-panneau { position: static; box-shadow: none; border: 0; padding: 0 0 0.5rem 0.9rem; animation: none; }
  .mega-grille, .mega-grille.mega-1, .mega-grille.mega-2, .mega-grille.mega-3 { width: auto; max-width: none; margin: 0; padding-top: 0.25rem; grid-template-columns: 1fr; gap: 0.9rem; }
  .mega-desc { display: none; }
  .mega-col li a { margin: 0; padding: 0.45rem 0.6rem; }
  .pilule-contact { justify-content: center; margin: 0.4rem 0 0; }
}

/* ---------- Prise de rendez-vous en fenetre (assets/nav.js) ---------- */
.modale-ouverte { overflow: hidden; }
.rdv-modale { position: fixed; inset: 0; z-index: 900; display: grid; place-items: center; padding: 1rem; }
.rdv-modale[hidden] { display: none; }
.rdv-fond { position: absolute; inset: 0; background: rgba(7, 15, 14, 0.62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.rdv-boite { position: relative; width: min(1000px, 100%); height: min(760px, calc(100vh - 2rem)); display: flex; flex-direction: column;
  background: #FFFFFF; border-radius: 20px; overflow: hidden; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.6); animation: mega-entree .2s ease both; }
.rdv-tete { display: flex; align-items: center; justify-content: space-between; padding: 0.8rem 0.9rem 0.8rem 1.25rem; border-bottom: 1px solid var(--bord); }
.rdv-tete strong { font-weight: 600; color: var(--encre-titre); }
.rdv-fermer { width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid var(--bord); background: #FFFFFF; cursor: pointer; display: grid; place-items: center; }
.rdv-fermer svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: var(--encre-titre); stroke-width: 2; stroke-linecap: round; }
.rdv-fermer:hover { border-color: var(--accent-fonce); }
.rdv-corps { position: relative; flex: 1; display: flex; }
.rdv-boite iframe { flex: 1; width: 100%; border: 0; }
/* Etat de chargement et repli (2026-09-25) : une fenetre vide ne doit jamais rester sans explication. */
.rdv-etat { position: absolute; inset: 0; display: grid; place-items: center; padding: 2rem; text-align: center; background: var(--fond-carte); }
.rdv-etat[hidden] { display: none; }
.rdv-etat p { margin: 0; max-width: 32ch; color: var(--texte-2); line-height: 1.5; }
.rdv-bouton { display: block; width: fit-content; margin: 1rem auto 0; padding: .75rem 1.25rem; border-radius: var(--r-pill); background: var(--fond-bouton); color: #FFFFFF; text-decoration: none; font-weight: 600; }
.rdv-bouton:hover { background: var(--accent-fonce); }
.rdv-repli { margin: 0; padding: 0.5rem 1.25rem; font-size: 0.85rem; text-align: right; border-top: 1px solid var(--bord); }
.rdv-repli a { color: var(--texte-2); }
@media (max-width: 640px) { .rdv-modale { padding: 0; } .rdv-boite { height: 100vh; border-radius: 0; } }
@media (prefers-reduced-motion: reduce) { .mega-panneau, .rdv-boite { animation: none; } }
.lien-methode { margin: 2rem 0 0; }
.bande-sombre .lien-methode .bouton-contour { color: #FFFFFF; border-color: rgba(255, 255, 255, 0.3); }
.bande-claire .lien-methode .bouton-contour, .bande-blanche .lien-methode .bouton-contour { color: var(--encre-titre); border-color: var(--bord); }
.mega-une .une-carte { display: grid; gap: 0.35rem; padding: 1rem 1.1rem; border-radius: 14px; background: var(--fond-carte); border: 1px solid var(--bord); color: var(--encre); text-decoration: none; }
.mega-une .une-carte:hover { border-color: var(--accent-fonce); }
.mega-une .une-carte:hover .mega-nom { color: var(--accent-fonce); }
.une-rubrique { font-size: 0.8rem; font-weight: 600; color: var(--accent-fonce); }
.mega-grille.mega-2:has(.mega-une) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); max-width: 48rem; margin-left: auto; margin-right: max(1.5rem, calc((100% - 1400px) / 2)); }
@media (max-width: 860px) { .mega-une .mega-desc { display: block; } }

/* ---------- Declinaisons d'un metier (metiers/_build.py) ---------- */
.declinaisons { padding: var(--pas-4) 0; }
.liste-declinaisons { list-style: none; margin: 1.25rem 0 0; padding: 0; }
.liste-declinaisons li { border-top: 1px solid var(--bord); }
.liste-declinaisons li:last-child { border-bottom: 1px solid var(--bord); }
.liste-declinaisons a { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 0.25rem;
  color: var(--encre-titre); text-decoration: none; font-weight: 600; font-size: 1.05rem; }
.liste-declinaisons a:hover { color: var(--accent-fonce); }
.liste-declinaisons .suite { flex: none; font-weight: 400; font-size: 0.9rem; color: var(--texte-2); }

/* ---------- Icones (_icones.py) ---------- */
.ico { flex: none; display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 14px;
  background: rgba(var(--accent-rgb), 0.12); color: var(--accent-fonce); transition: transform .35s cubic-bezier(0.22, 1, 0.36, 1), background .25s; }
.ico-svg { width: 1.35rem; height: 1.35rem; }
.bande-sombre .ico, .hero-bloc .ico { background: rgba(var(--accent-rgb), 0.16); color: var(--accent); }
li:hover > .ico, li:hover .sp-carte-tete .ico, li:hover .fiche-li-tete .ico { transform: translateY(-2px) rotate(-6deg); background: rgba(var(--accent-rgb), 0.22); }
.sp-carte-tete { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.9rem; }
.sp-carte-tete .sp-num { margin-bottom: 0; }
.sp-liste-ico li { display: grid; grid-template-columns: auto 1fr; gap: 0 1rem; align-items: start; }
.sp-carte, .valeurs li, .piliers li, .membre { transition: transform .35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow .35s, border-color .25s; }
.sp-carte:hover, .valeurs li:hover, .piliers li:hover, .membre:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -28px rgba(13, 26, 24, 0.45); }

/* ---------- Apparitions echelonnees (assets/nav.js pose .vu et --i) ----------
   Le parent est observe, ses enfants arrivent l'un apres l'autre. Sans JS la
   classe .js n'existe pas : rien n'est masque. */
.js .anime > * { opacity: 0; transform: translateY(18px);
  transition: opacity .6s ease, transform .7s cubic-bezier(0.22, 1, 0.36, 1); transition-delay: calc(var(--i, 0) * 80ms); }
.js .anime.vu > * { opacity: 1; transform: none; }
.js .anime.vu > *:hover { transition-delay: 0s; }
.js .parcours.anime > .pc-etape .pc-num { transform: scale(0.6); transition: transform .5s cubic-bezier(0.34, 1.56, 0.64, 1); transition-delay: calc(var(--i, 0) * 80ms + 150ms); }
.js .parcours.anime.vu > .pc-etape .pc-num { transform: none; }
.js .parcours.anime::before { transform: scaleX(0); transform-origin: left; transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1); }
.js .parcours.anime.vu::before { transform: none; }
.js .membre img { transition: transform .6s cubic-bezier(0.22, 1, 0.36, 1); }
.membre:hover img { transform: scale(1.04); }
@media (max-width: 900px) { .js .parcours.anime::before { transform: scaleY(0); transform-origin: top; } .js .parcours.anime.vu::before { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .js .anime > *, .js .parcours.anime > .pc-etape .pc-num, .js .parcours.anime::before { opacity: 1; transform: none; transition: none; }
  .sp-carte:hover, .valeurs li:hover, .piliers li:hover, .membre:hover, li:hover > .ico { transform: none; }
}

/* ---------- Pied : contact et LinkedIn ---------- */
.footer-contact { display: inline-flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
.footer-linkedin { display: inline-flex; align-items: center; gap: 0.4rem; }
.footer-linkedin svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }


/* ---- utilitaires : anciens styles en ligne ---- */
.cv-s1 { height:47px !important; }
.cv-s2 { --h:30px !important; }
.cv-s3 { --h:22px !important; }
.cv-s4 { --h:44px !important; }
.cv-s5 { --h:26px !important; }
.cv-s6 { --h:40px !important; }
.cv-s7 { --h:28px !important; }
.cv-s8 { --h:24px !important; }
.cv-s9 { --h:38px !important; }
.cv-s10 { --h:18px !important; }
.cv-s11 { margin-top:0.9rem !important; color:var(--teal-200) !important; }
.cv-s12 { --d:0s !important; }
.cv-s13 { --d:0.9s !important; }
.cv-s14 { --d:1.8s !important; }
.cv-s15 { --d:2.7s !important; }
.cv-s16 { color:var(--teal-200) !important; }
.cv-s17 { margin-top:2.5rem !important; }
.cv-s18 { padding-bottom:0 !important; }
.cv-s19 { margin-top:1.2rem !important; }

/* pot de miel du noyau (lead_form_fields) : hors écran */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }