/* EMI ASSIST — feuille de style unique. Mobile d'abord. */

:root {
  /* Couleurs */
  --bleu: #5170FF;            /* bleu signature du logo, figé */
  --bleu-fonce: #3455D9;      /* boutons avec texte blanc (contraste) */
  --bleu-nuit: #1B2A6B;
  --bleu-pale: #EEF1FF;
  --bleu-voile: #F5F7FF;
  --bleu-clair-sur-nuit: #C9D3FF;
  --encre: #1F2230;
  --texte: #3D3B3A;           /* anthracite du logo */
  --texte-doux: #55596A;
  --trait: #DDE2F2;
  --blanc: #FFFFFF;
  --fond: #FBFCFF;
  --orange: #E8833A;          /* ce qui pose problème */
  --orange-fonce: #A4561A;
  --orange-pale: #FDF0E6;
  --vert: #1E8E5A;            /* ce qui est vérifié par Emilie */
  --vert-fonce: #145F3D;
  --vert-pale: #E6F5EE;

  /* Typographie (police système en attendant le choix d'Emilie) */
  --police: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --police-signature: Georgia, "Times New Roman", serif;
  --taille-base: 1.0625rem;
  --taille-petite: 0.9375rem;
  --taille-h1: clamp(2.1rem, 6.6vw, 3.5rem);
  --taille-h2: clamp(1.65rem, 4.4vw, 2.45rem);
  --taille-h3: 1.2rem;
  --mesure: 38em;

  /* Espacements */
  --gouttiere: 16px;
  --largeur-max: 1160px;
  --section: clamp(64px, 9vw, 112px);
  --rayon: 18px;
  --rayon-petit: 10px;
  --ombre: 0 18px 50px rgba(27, 42, 107, 0.12);
  --ombre-legere: 0 6px 20px rgba(27, 42, 107, 0.08);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; accent-color: var(--bleu-fonce); }
[id] { scroll-margin-top: 88px; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--police);
  font-size: var(--taille-base);
  line-height: 1.65;
  overflow-x: hidden;
  caret-color: var(--bleu-fonce);
}
::selection { background: var(--bleu); color: var(--blanc); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--bleu-fonce); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { color: var(--bleu-nuit); }
:focus-visible { outline: 3px solid var(--bleu); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { color: var(--encre); line-height: 1.15; margin: 0 0 0.6em; letter-spacing: -0.02em; text-wrap: balance; }
h1 { font-size: var(--taille-h1); font-weight: 800; letter-spacing: -0.03em; }
h2 { font-size: var(--taille-h2); font-weight: 800; }
h3 { font-size: var(--taille-h3); font-weight: 700; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.2em; }
html { scrollbar-color: #B9C3EA var(--fond); }

.conteneur { width: 100%; max-width: var(--largeur-max); margin: 0 auto; padding: 0 var(--gouttiere); }
.section { padding: var(--section) 0; }
.section--teinte { background: var(--bleu-voile); }
.section--nuit { background: var(--bleu-nuit); color: #DCE3FF; }
.section--nuit h2, .section--nuit h3 { color: var(--blanc); }
.intro { font-size: 1.15rem; color: var(--texte-doux); max-width: var(--mesure); }
.section--nuit .intro { color: var(--bleu-clair-sur-nuit); }
.entete-section { max-width: 760px; margin-bottom: clamp(32px, 5vw, 56px); }

.lien-evitement {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--encre); color: var(--blanc); padding: 10px 16px; border-radius: var(--rayon-petit);
}
.lien-evitement:focus { top: 12px; color: var(--blanc); }

/* ---------- Boutons ---------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 22px;
  border: 2px solid transparent; border-radius: 999px;
  font: inherit; font-weight: 700; font-size: 1rem; line-height: 1.2;
  text-decoration: none; text-align: center; cursor: pointer; white-space: nowrap;
  transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease, color .2s ease;
}
.bouton--plein { background: var(--bleu-fonce); color: var(--blanc); box-shadow: 0 8px 22px rgba(52, 85, 217, .28); }
.bouton--plein:hover { background: var(--bleu-nuit); color: var(--blanc); transform: translateY(-2px); }
.bouton--plein:active { transform: translateY(0); }
.bouton--contour { border-color: var(--bleu-fonce); color: var(--bleu-fonce); background: var(--blanc); }
.bouton--contour:hover { background: var(--bleu-pale); color: var(--bleu-nuit); }
.bouton--clair { background: var(--blanc); color: var(--bleu-nuit); }
.bouton--clair:hover { background: var(--bleu-pale); color: var(--bleu-nuit); transform: translateY(-2px); }
.bouton--fantome { border-color: rgba(255,255,255,.55); color: var(--blanc); }
.bouton--fantome:hover { background: rgba(255,255,255,.1); color: var(--blanc); }
.boutons { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 420px) { .bouton { white-space: normal; } }

/* Flèches dessinées (pas de caractères) */
.fleche {
  display: inline-block; flex: 0 0 auto; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .2s ease;
}
.fleche--bas { transform: rotate(90deg); }
a:hover .fleche { transform: translateX(4px); }
a:hover .fleche--bas { transform: rotate(90deg) translateX(3px); }

/* ---------- En-tête ---------- */
.entete {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251, 252, 255, .94);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--trait);
}
.entete__barre { display: flex; align-items: center; gap: 10px; min-height: 72px; flex-wrap: wrap; }
.marque { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--encre); margin-right: auto; }
.marque img { width: 52px; height: auto; }
.marque__nom { font-weight: 800; letter-spacing: .06em; font-size: 1.05rem; }
.marque__nom small { display: block; font-weight: 600; letter-spacing: .02em; font-size: .72rem; color: var(--texte-doux); }
@media (max-width: 459px) {
  .marque img { width: 44px; }
  .marque__nom small { display: none; }
}
.entete__appel { min-height: 44px; padding: 8px 16px; font-size: .95rem; box-shadow: none; }
@media (max-width: 459px) {
  .menu-bouton { padding: 8px 13px; }
  .menu-bouton__texte { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 359px) { .marque__nom { display: none; } }

.menu-bouton {
  display: none;
  align-items: center; gap: 8px;
  min-height: 44px; padding: 8px 14px;
  border: 1px solid var(--trait); border-radius: 999px; background: var(--blanc);
  font: inherit; font-weight: 700; color: var(--encre); cursor: pointer;
}
.menu-bouton__icone, .menu-bouton__icone::before, .menu-bouton__icone::after {
  display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; position: relative;
}
.menu-bouton__icone::before, .menu-bouton__icone::after { content: ""; position: absolute; left: 0; }
.menu-bouton__icone::before { top: -6px; }
.menu-bouton__icone::after { top: 6px; }

.nav { width: 100%; padding-bottom: 14px; }
.nav__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.nav__liste a {
  display: block; padding: 10px 12px; border-radius: var(--rayon-petit);
  color: var(--encre); text-decoration: none; font-weight: 600; white-space: nowrap;
}
.nav__liste a:hover, .nav__liste a[aria-current="page"] { background: var(--bleu-pale); color: var(--bleu-nuit); }
.nav__liste .bouton { margin-top: 8px; color: var(--blanc); }
.nav__liste .bouton:hover { background: var(--bleu-nuit); color: var(--blanc); }

/* Avec JavaScript : menu repliable sur mobile */
.js .menu-bouton { display: inline-flex; }
.js .nav { display: none; }
.js .nav.est-ouvert { display: block; }

@media (min-width: 1060px) {
  .entete__barre { flex-wrap: nowrap; }
  .entete__appel { display: none; }
  .js .menu-bouton, .menu-bouton { display: none; }
  .nav, .js .nav { display: block; width: auto; padding: 0; }
  .nav__liste { flex-direction: row; align-items: center; gap: 2px; }
  .nav__liste a { padding: 8px 12px; font-size: .97rem; }
  .nav__liste .bouton { margin: 0 0 0 10px; padding: 10px 18px; min-height: 44px; }
}

/* ---------- Accroche ---------- */
.hero { position: relative; padding: clamp(36px, 7vw, 88px) 0 clamp(56px, 8vw, 104px); overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: -20% -10% auto auto; width: 70vw; height: 70vw; max-width: 760px; max-height: 760px;
  background: radial-gradient(circle, rgba(81, 112, 255, .14), rgba(81, 112, 255, 0) 65%);
  pointer-events: none;
}
.hero__grille { position: relative; display: grid; gap: 40px; align-items: center; }
.hero h1 { margin-bottom: .4em; }
.hero h1 .accent { color: var(--bleu-fonce); }
.devise { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0 0 22px; font-weight: 800; font-size: clamp(1.15rem, 2.6vw, 1.35rem); letter-spacing: -.01em; color: var(--encre); list-style: none; padding: 0; }
.devise li { display: flex; align-items: center; gap: 10px; }
.devise li::before { content: ""; flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--bleu); }
.devise__humain { color: var(--encre); }
.devise__humain::before { background: var(--vert) !important; }
.devise__ia { color: var(--bleu-fonce); }

/* ---------- Réassurance : une personne, pas un robot ---------- */
.section--courte { padding: clamp(48px, 7vw, 80px) 0; border-top: 1px solid var(--trait); }
.engagements { display: grid; gap: 28px; align-items: start; }
.engagements h2 { font-size: clamp(1.5rem, 3.6vw, 2.1rem); }
.engagements .intro { margin-bottom: 0; }
.engagements__liste { gap: 18px; margin: 0; }
.engagements__liste li { color: var(--texte); }
.engagements__liste strong { display: block; color: var(--encre); }
@media (min-width: 900px) { .engagements { grid-template-columns: .9fr 1.1fr; gap: 56px; } .engagements__liste { grid-template-columns: 1fr 1fr; gap: 22px 32px; } }
.hero .intro { margin-bottom: 28px; }
.insecable { white-space: nowrap; }
.preuves { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 4px; font-size: var(--taille-petite); color: var(--texte-doux); }
.preuves li { position: relative; padding-left: 24px; }
.preuves li::before { content: ""; position: absolute; left: 0; top: .8em; width: 14px; height: 1px; background: #9AA5D6; }
.preuves strong { color: var(--encre); font-weight: 700; }

/* Portrait dans un cercle à trait fin, en écho au logo */
.portrait { position: relative; max-width: 420px; width: 100%; margin: 0 auto; }
.portrait__cercle {
  position: relative; aspect-ratio: 1; border-radius: 50%; padding: 14px;
  border: 1px solid var(--bleu);
}
.portrait__cercle::after { /* les points bleus du logo, posés sur le trait */
  content: ""; position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--bleu);
  top: 14.6%; right: 14.6%; transform: translate(50%, -50%);
}
.portrait__cercle img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%;
  border-radius: 50%; background: var(--bleu-pale);
  box-shadow: var(--ombre);
}
.etiquette {
  position: absolute; left: 50%; bottom: 2%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 999px; background: var(--blanc); box-shadow: var(--ombre-legere);
  font-size: .85rem; font-weight: 700; color: var(--encre); white-space: nowrap;
}
.etiquette svg { width: 18px; height: 18px; color: var(--vert); flex: 0 0 auto; }
@media (max-width: 599px) { .portrait { max-width: 320px; } }
@media (min-width: 600px) and (max-width: 899px) { .hero__grille { grid-template-columns: 1.4fr .6fr; gap: 28px; } .portrait { max-width: 260px; } }
@media (min-width: 900px) { .hero__grille { grid-template-columns: 1.2fr .8fr; gap: 56px; } }

/* ---------- Pourquoi déléguer ---------- */
.pourquoi { display: grid; gap: 40px; }
.roles { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--trait); }
.roles li { display: grid; gap: 4px; padding: 18px 0; border-bottom: 1px solid var(--trait); }
.roles strong { color: var(--encre); font-size: 1.1rem; }
.roles span { color: var(--texte-doux); }
.changement p { max-width: var(--mesure); }
.pourquoi__titre { font-size: 1.35rem; margin-bottom: 14px; }
.roles strong { font-size: 1.15rem; }
.citation-forte {
  margin: 26px 0 0; padding: 0 0 0 0;
  font-size: clamp(1.3rem, 3.2vw, 1.65rem); font-weight: 800; line-height: 1.3; letter-spacing: -.015em; color: var(--encre);
  max-width: 24em;
}
.citation-forte span { color: var(--bleu-fonce); }
@media (min-width: 900px) {
  .pourquoi { grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: start; }
}

/* ---------- Comment ça marche : scène 3D ---------- */
.comparaison { display: grid; gap: 28px; align-items: center; }
.comparaison > * { min-width: 0; }
@media (min-width: 980px) { .comparaison { grid-template-columns: 1.15fr .85fr; gap: 48px; } }

/* Interrupteur « Activer mes outils d'IA » */
.interrupteur {
  display: none; align-items: center; gap: 16px; margin: 0 0 26px; padding: 6px 4px;
  background: none; border: 0; border-radius: 999px; cursor: pointer;
  font: inherit; font-weight: 800; font-size: 1.12rem; letter-spacing: -.01em; color: var(--blanc); text-align: left;
}
.js .interrupteur { display: inline-flex; }
.interrupteur:focus-visible { outline: 3px solid var(--bleu); outline-offset: 4px; }
.interrupteur__piste {
  position: relative; flex: 0 0 auto; width: 68px; height: 38px; border-radius: 999px;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .32);
  box-shadow: inset 0 2px 6px rgba(4, 8, 32, .45);
  transition: background-color .35s ease, border-color .35s ease;
}
.interrupteur__curseur {
  position: absolute; top: 4px; left: 4px; width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(180deg, #FFFFFF, #E4E9FF);
  box-shadow: 0 3px 8px rgba(4, 8, 32, .45);
  transition: transform .4s cubic-bezier(.2, .8, .2, 1);
}
.interrupteur:hover .interrupteur__piste { border-color: rgba(255, 255, 255, .6); }
.interrupteur[aria-checked="true"] .interrupteur__piste { background: var(--bleu); border-color: var(--bleu); box-shadow: 0 0 0 6px rgba(81, 112, 255, .22); }
.interrupteur[aria-checked="true"] .interrupteur__curseur { transform: translateX(30px); }
.interrupteur[aria-checked="true"] .interrupteur__texte { color: #C9D3FF; }
/* Tant qu'on n'y a pas touché : le curseur esquisse le geste et la piste respire */
.interrupteur:not(.deja-essaye)[aria-checked="false"] .interrupteur__curseur { animation: pousse 3.2s ease-in-out 1.2s infinite; }
.interrupteur:not(.deja-essaye)[aria-checked="false"] .interrupteur__piste { animation: invite 3.2s ease-out 1.2s infinite; }
@keyframes pousse {
  0%, 62%, 100% { transform: translateX(0); }
  72% { transform: translateX(11px); }
  82% { transform: translateX(0); }
  88% { transform: translateX(5px); }
}
@keyframes invite {
  0%, 60% { box-shadow: inset 0 2px 6px rgba(4, 8, 32, .45), 0 0 0 0 rgba(126, 149, 255, .6); }
  90% { box-shadow: inset 0 2px 6px rgba(4, 8, 32, .45), 0 0 0 12px rgba(126, 149, 255, 0); }
  100% { box-shadow: inset 0 2px 6px rgba(4, 8, 32, .45), 0 0 0 0 rgba(126, 149, 255, 0); }
}

/* Invitation dans la scène quand les dossiers s'empilent */
.scene-appel {
  display: none; position: absolute; left: 0; right: 0; bottom: 18px; z-index: 6; margin: 0 auto;
  width: max-content; align-items: center; justify-content: center; gap: 10px; max-width: calc(100% - 32px);
  padding: 11px 18px; border: 0; border-radius: 999px;
  background: var(--blanc); color: var(--bleu-nuit);
  font: inherit; font-weight: 800; font-size: .92rem; line-height: 1.25; text-align: center; cursor: pointer;
  box-shadow: 0 12px 30px rgba(4, 8, 32, .45);
  opacity: 0; pointer-events: none; transform: translateY(10px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.2, .8, .2, 1), background-color .2s ease;
}
.js .scene-appel { display: inline-flex; }
.scene-appel.est-visible { opacity: 1; pointer-events: auto; transform: none; }
.scene-appel:hover { background: var(--bleu-pale); }
@media (min-width: 420px) { .scene-appel { white-space: nowrap; font-size: .9rem; } }
.scene-appel:hover .fleche { transform: translateX(4px); }

.scene-cadre {
  position: relative; border-radius: 24px; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 20%, #2B3E92 0%, #16225A 70%);
  border: 1px solid rgba(255,255,255,.12);
  aspect-ratio: 6 / 5; max-width: 640px; width: 100%; margin: 0 auto;
}
.scene-cadre.webgl-actif {
  background:
    radial-gradient(70% 55% at 50% 42%, rgba(126, 149, 255, .22), rgba(126, 149, 255, 0) 70%),
    radial-gradient(130% 100% at 50% 0%, #24357F 0%, #121C4E 62%, #0C1438 100%);
}
.scene-cadre::after { /* grain et vignettage du cadre */
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 0 90px rgba(4, 8, 32, .55), inset 0 1px 0 rgba(255, 255, 255, .08);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
.scene-legende {
  position: absolute; left: 14px; top: 14px; z-index: 5;
  padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.12); color: var(--blanc);
  font-size: .8rem; font-weight: 700;
}
.scene-webgl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .9s ease; }
.scene-webgl.pret { opacity: 1; }
.webgl-actif .scene { display: none; }
.etiquette-3d {
  position: absolute; left: 0; top: 0; z-index: 4; pointer-events: none;
  margin-top: -6px; padding: 4px 11px; border-radius: 999px;
  background: rgba(255, 255, 255, .95); color: var(--bleu-nuit);
  font-size: 12px; font-weight: 800; letter-spacing: .01em; white-space: nowrap;
  box-shadow: 0 6px 18px rgba(4, 8, 32, .35);
  transition: opacity .5s ease;
}
.etiquette-3d::after {
  content: ""; position: absolute; left: 50%; bottom: -4px; width: 8px; height: 8px; margin-left: -4px;
  background: inherit; transform: rotate(45deg); border-radius: 1px;
}
.etiquette-3d--emilie { background: var(--bleu-fonce); color: var(--blanc); font-size: 13px; padding: 5px 14px; box-shadow: 0 8px 22px rgba(52, 85, 217, .45); }
.etiquette-3d--outils { background: var(--bleu-pale); color: var(--bleu-nuit); font-weight: 800; }
.mode-seule .etiquette-3d--outils { opacity: 0; }

/* Scène CSS de secours (sans WebGL) */
.scene { position: absolute; inset: 0; perspective: 1400px; perspective-origin: 50% 30%; display: grid; place-items: center; }
.iso {
  position: relative; width: 340px; height: 340px;
  transform-style: preserve-3d;
  transform: translateY(8%) rotateX(58deg) rotateZ(-45deg) scale(var(--echelle, 1));
  transition: transform .6s ease;
}
@media (max-width: 520px) { .iso { --echelle: .78; } .scene-cadre { aspect-ratio: 1 / 1; } }
@media (max-width: 360px) { .iso { --echelle: .66; } }
.sol {
  position: absolute; inset: 0; border-radius: 26px;
  background:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px) 0 0 / 34px 34px,
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px) 0 0 / 34px 34px,
    linear-gradient(135deg, #3A50B5, #24358A);
}
.bloc { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--d); transform-style: preserve-3d; }
.bloc > i { position: absolute; display: block; }
.bloc .dessus { inset: 0; transform: translateZ(var(--h)); background: var(--c-dessus, #F4F6FF); border-radius: 3px; }
.bloc .face { left: 0; width: 100%; top: calc(100% - var(--h)); height: var(--h); transform-origin: bottom; transform: rotateX(-90deg); background: var(--c-face, #C9D2F2); }
.bloc .cote { top: 0; left: 0; width: var(--h); height: 100%; transform-origin: left; transform: rotateY(-90deg); background: var(--c-cote, #AEB9E6); }
.debout { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d; transform: translate3d(var(--x, 0px), var(--y, 0px), var(--z, 0px)); }
.debout > * { position: absolute; left: 0; bottom: 0; transform-origin: 0 100%; transform: rotateZ(45deg) rotateX(-90deg) translateX(-50%); }
.debout > .halo { transform: none; left: 0; top: 0; bottom: auto; }
.perso { width: 34px; height: 64px; }
.perso svg, .agent svg { width: 100%; height: 100%; overflow: visible; }
.agent { width: 30px; height: 40px; }
.panneau { white-space: nowrap; padding: 3px 9px; border-radius: 999px; background: var(--blanc); color: var(--bleu-nuit); font-size: 11px; font-weight: 800; box-shadow: 0 4px 10px rgba(0,0,0,.25); }
.panneau--clair { background: rgba(255,255,255,.16); color: var(--blanc); box-shadow: none; }
.doc { width: 22px; height: 28px; border-radius: 3px; background: var(--blanc); box-shadow: 0 3px 8px rgba(0,0,0,.3); }
.doc::before, .doc::after { content: ""; position: absolute; left: 4px; right: 4px; height: 2px; background: #C3CBEA; border-radius: 2px; }
.doc::before { top: 7px; }
.doc::after { top: 13px; right: 8px; }
.doc--ok { background: #DFF6EA; }
.doc--ok::after { background: var(--vert); top: 18px; left: 6px; right: 10px; }
.doc--alerte { background: #FFE9D8; }
.halo { width: 70px; height: 70px; margin-left: -35px; margin-top: -35px; border-radius: 50%; background: radial-gradient(circle, rgba(126,149,255,.55), rgba(126,149,255,0) 70%); }
.calque-animation { position: absolute; inset: 0; transform-style: preserve-3d; }
.mode-seule .pour-agents { opacity: 0; }
.mode-agents .pour-seule { opacity: 0; }
.pour-agents, .pour-seule { transition: opacity .5s ease; }
.agent-poste .halo { opacity: .35; transition: opacity .3s ease; }
.agent-poste.travaille .halo { opacity: 1; }

/* Texte de la comparaison */
.js .comparaison__texte .etat[hidden] { display: none; }
.etat h3 { margin-bottom: 14px; }
.section--nuit .etat + .etat { margin-top: 28px; }
.js .section--nuit .etat + .etat { margin-top: 0; }
.liste-coches { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 12px; }
/* Repères discrets : un trait fin, pas de pastille */
.liste-coches li { position: relative; padding-left: 26px; }
.liste-coches li::before {
  content: ""; position: absolute; left: 0; top: .78em; width: 14px; height: 2px; border-radius: 2px;
  background: var(--vert);
}
.liste-croix li::before { background: var(--orange); }
.section--nuit .liste-coches li { color: #DCE3FF; }
.section--nuit .liste-coches li::before { background: #5EE0A0; }
.section--nuit .liste-croix li::before { background: #F2A56B; }

/* Aujourd'hui / Avec moi : deux colonnes typographiques */
.colonne h2 { font-size: clamp(1.4rem, 3vw, 1.75rem); margin-bottom: 18px; }
.colonne--apres h2 { color: var(--bleu-fonce); }
.lignes { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--encre); }
.lignes li { position: relative; padding: 14px 0 14px 28px; border-bottom: 1px solid var(--trait); }
.lignes li::before { content: ""; position: absolute; left: 0; top: 1.45em; width: 14px; height: 2px; border-radius: 2px; }
.lignes--avant li { color: var(--texte-doux); }
.lignes--avant li::before { background: var(--orange); }
.lignes--apres li { color: var(--encre); font-weight: 600; }
.lignes--apres li::before { background: var(--bleu-fonce); }
@media (min-width: 900px) {
  .colonne--apres { padding-left: 48px; border-left: 1px solid var(--trait); }
}
.note-scene { font-size: .9rem; color: var(--bleu-clair-sur-nuit); margin-top: 14px; }

/* ---------- Méthode (relation de travail) ---------- */
.etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; counter-reset: etape; }
.etape { counter-increment: etape; padding-top: 18px; border-top: 2px solid var(--encre); }
.etape::before { content: counter(etape); display: block; font-size: .95rem; font-weight: 800; color: var(--bleu-fonce); margin-bottom: 8px; }
.etape h3 { font-size: 1.35rem; margin-bottom: 8px; }
.etape p:last-child { margin-bottom: 0; }
@media (min-width: 860px) { .etapes { grid-template-columns: repeat(3, 1fr); gap: 40px; } }

/* ---------- Exemples (problème → démarche) ---------- */
.problemes { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--trait); }
.probleme { position: relative; display: grid; gap: 10px 48px; padding: 28px 0; border-bottom: 1px solid var(--trait); }
.probleme__libelle { display: block; font-size: .8rem; font-weight: 700; letter-spacing: .02em; margin-bottom: 6px; }
.probleme__libelle--pb { color: var(--orange-fonce); }
.probleme__libelle--sol { color: var(--vert-fonce); }
.probleme h3 { font-size: clamp(1.25rem, 2.6vw, 1.55rem); margin: 0; max-width: 18em; }
.probleme__solution { margin: 0 0 12px; color: var(--texte); max-width: var(--mesure); }
.probleme__lien { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; text-decoration: none; }
.probleme__lien::after { content: ""; position: absolute; inset: 0; }
.probleme:hover h3 { color: var(--bleu-nuit); }
.probleme:hover .probleme__lien { text-decoration: underline; }
@media (min-width: 860px) { .probleme { grid-template-columns: 1fr 1fr; padding: 34px 0; } }
.quotidien__titre { font-size: 1.35rem; margin: clamp(48px, 7vw, 72px) 0 18px; }
.quotidien { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 40px; border-top: 1px solid var(--trait); }
.quotidien li { display: grid; gap: 2px; padding: 16px 0; border-bottom: 1px solid var(--trait); }
.quotidien strong { color: var(--encre); font-size: 1.05rem; }
.quotidien span { color: var(--texte-doux); }
@media (min-width: 860px) { .quotidien { grid-template-columns: 1fr 1fr; } }
.fil-rouge { margin-top: 40px; display: grid; gap: 18px; align-items: center; }
.fil-rouge p { margin: 0; max-width: 40em; font-size: 1.08rem; }
.fil-rouge strong { color: var(--encre); }
@media (min-width: 860px) { .fil-rouge { grid-template-columns: 1fr auto; gap: 40px; } }

/* ---------- Qui suis-je ---------- */
.profil { display: grid; gap: 32px; align-items: center; }
.profil > * { min-width: 0; }
.profil__carte { position: relative; background: var(--blanc); border-radius: 28px; padding: 28px 24px; box-shadow: var(--ombre); border: 1px solid var(--trait); }
.profil__logo { width: 120px; margin-bottom: 18px; }
.reperes { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 0; grid-template-columns: 1fr; border-top: 1px solid var(--trait); }
.reperes li { padding: 12px 0; border-bottom: 1px solid var(--trait); font-size: var(--taille-petite); color: var(--texte-doux); overflow-wrap: break-word; }
.reperes strong { color: var(--encre); font-size: 1rem; margin-right: 6px; }
.signature { font-family: var(--police-signature); font-style: italic; font-size: 1.45rem; color: var(--bleu-fonce); margin: 18px 0 0; }
@media (min-width: 900px) { .profil { grid-template-columns: 1.1fr .9fr; gap: 56px; } .profil__carte { padding: 36px; } }

/* ---------- Contact ---------- */
.contact-bandeau {
  position: relative; overflow: hidden; border-radius: 28px; padding: clamp(32px, 6vw, 64px) clamp(22px, 5vw, 64px);
  background: linear-gradient(135deg, var(--bleu-fonce), var(--bleu-nuit)); color: var(--blanc);
}
.contact-bandeau h2 { color: var(--blanc); }
.contact-bandeau .intro { color: var(--blanc); }
.contact__tete { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; }
.contact__tete h2 { margin: 0; }
.contact__photo { flex: 0 0 auto; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; object-position: 50% 22%; border: 2px solid rgba(255,255,255,.7); }
.contact-liens { display: grid; gap: 12px; margin-top: 26px; }
.contact-liens .bouton { width: 100%; }
@media (min-width: 760px) { .contact-liens { grid-template-columns: repeat(3, auto); justify-content: start; } .contact-liens .bouton { width: auto; } }
.zone { margin: 22px 0 0; font-size: var(--taille-petite); color: var(--bleu-clair-sur-nuit); }

/* ---------- Pages exemples ---------- */
.fil-ariane { font-size: var(--taille-petite); margin-bottom: 22px; color: var(--texte-doux); }
.fil-ariane ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; }
.fil-ariane li + li::before { content: "/"; margin-right: 6px; color: #9AA5D6; }
.fil-ariane a { color: var(--texte-doux); }
.hero--theme h1 { font-size: clamp(1.9rem, 5.4vw, 2.9rem); }
.hero--theme .hero__grille { align-items: start; }
.encart-solution { border-radius: var(--rayon); padding: 24px; background: var(--blanc); border: 1px solid var(--trait); box-shadow: var(--ombre-legere); }
.encart-solution .probleme__libelle { margin-bottom: 8px; }
.encart-solution p:last-child { margin-bottom: 0; }

.deux-colonnes { display: grid; gap: 28px; }
.deux-colonnes > * { min-width: 0; }
@media (min-width: 900px) { .deux-colonnes { grid-template-columns: 1fr 1fr; gap: 48px; } }

.parcours { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: parcours; }
.parcours li {
  position: relative; counter-increment: parcours;
  padding: 18px 18px 18px 64px; background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon);
}
.parcours li::before {
  content: counter(parcours); position: absolute; left: 18px; top: 16px;
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: var(--bleu-fonce); color: var(--blanc); font-weight: 800;
}
.parcours strong { display: block; color: var(--encre); margin-bottom: 2px; }
.qui { display: inline-block; margin-top: 8px; padding: 2px 10px; border-radius: 999px; font-size: .8rem; font-weight: 700; background: var(--bleu-pale); color: var(--bleu-nuit); }
.qui--humain { background: var(--vert-pale); color: var(--vert-fonce); }

.benefices { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--trait); }
.benefices li { padding: 14px 0; border-bottom: 1px solid var(--trait); }
.benefices strong { display: block; color: var(--encre); }

.vigilance { padding: 20px 22px; border-radius: var(--rayon); background: var(--blanc); border: 1px solid var(--trait); }
.vigilance p:last-child { margin-bottom: 0; }

.autres { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.autres a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 18px; border-radius: var(--rayon); background: var(--blanc); border: 1px solid var(--trait);
  text-decoration: none; color: var(--encre); font-weight: 700;
}
.autres a:hover { border-color: var(--bleu); color: var(--bleu-nuit); }
@media (min-width: 760px) { .autres { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Pied de page ---------- */
.pied { background: var(--encre); color: #B9BED0; padding: 56px 0 28px; font-size: var(--taille-petite); }
.pied a { color: #E4E8F7; text-decoration: none; }
.pied a:hover { color: var(--blanc); text-decoration: underline; }
.pied__grille { display: grid; gap: 32px; }
.pied__marque { display: flex; align-items: center; gap: 12px; color: var(--blanc); font-weight: 800; letter-spacing: .06em; margin-bottom: 12px; }
.pied__marque img { width: 56px; background: var(--blanc); border-radius: 50%; padding: 3px; }
.pied h2 { font-size: .9rem; letter-spacing: .02em; color: var(--blanc); margin-bottom: 14px; }
.pied ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.pied__bas { margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12); display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; }
@media (min-width: 860px) { .pied__grille { grid-template-columns: 2fr 1fr; } }

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

/* ---------- Mentions légales ---------- */
.texte-legal { max-width: 46em; }
.texte-legal h2 { font-size: 1.35rem; margin-top: 2em; }


/* ---------- Bandeau : les 4 entrées toujours visibles en liste ---------- */
[id] { scroll-margin-top: 136px; }
.onglets { border-top: 1px solid var(--trait); }
.onglets__liste { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px 34px; }
.onglets__liste a {
  display: block; padding: 12px 0 10px; white-space: nowrap;
  font-size: .97rem; font-weight: 600; color: var(--texte-doux); text-decoration: none;
  border-bottom: 2px solid transparent;
}
.onglets__liste a:hover { color: var(--encre); border-bottom-color: var(--trait); }
.onglets__liste a[aria-current="page"], .onglets__liste a.est-actif { color: var(--bleu-fonce); border-bottom-color: var(--bleu-fonce); }
.entete__cta { display: none; }
@media (min-width: 1060px) { .entete__cta { display: inline-flex; min-height: 44px; padding: 10px 18px; } }
@media (max-width: 599px) {
  .onglets__liste { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
  .onglets__liste a { font-size: .9rem; padding: 9px 0 7px; }
}


/* ---------- Univers de prestation reliés (page « Ce que vous gagnez ») ---------- */
.univers { margin-top: clamp(48px, 7vw, 72px); }
.univers .quotidien__titre { margin-top: 0; }
.univers__grille { display: grid; gap: 32px; align-items: center; }
.univers__carte { position: relative; width: 100%; max-width: 460px; aspect-ratio: 1; margin: 0 auto; }
.univers__liens { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.univers__liens line, .univers__anneau { stroke: #C3CCEC; stroke-width: 1.5px; vector-effect: non-scaling-stroke; fill: none; transition: stroke .3s ease, stroke-width .3s ease; }
.univers__anneau { stroke-dasharray: 4 6; }
.univers__liens line.est-actif { stroke: var(--bleu-fonce); stroke-width: 2.5px; }
.univers__centre {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 24%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; text-align: center; padding: 8px;
  background: var(--bleu-nuit); color: var(--blanc); font-weight: 800; font-size: .82rem; line-height: 1.2;
  box-shadow: 0 10px 26px rgba(27, 42, 107, .25);
}
.univers__bulle {
  position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%);
  width: 27%; aspect-ratio: 1; border-radius: 50%; padding: 10px;
  display: grid; place-items: center; text-align: center;
  background: var(--blanc); border: 1.5px solid var(--bleu); color: var(--bleu-nuit);
  font: inherit; font-weight: 700; font-size: .84rem; line-height: 1.2; cursor: pointer;
  box-shadow: var(--ombre-legere);
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), background-color .3s ease, color .3s ease, box-shadow .3s ease;
}
.univers__bulle:hover, .univers__bulle[aria-expanded="true"] {
  background: var(--bleu-fonce); border-color: var(--bleu-fonce); color: var(--blanc);
  transform: translate(-50%, -50%) scale(1.07); box-shadow: 0 12px 28px rgba(52, 85, 217, .32);
}
.univers__bulle:focus-visible { outline: 3px solid var(--bleu); outline-offset: 4px; }

.univers__panneaux { min-height: 0; }
.univers__invite { display: none; margin: 0; padding: 24px; border: 1px dashed #C3CCEC; border-radius: var(--rayon); color: var(--texte-doux); text-align: center; }
.js .univers__invite { display: block; }
.js .univers__panneaux.a-un-actif .univers__invite { display: none; }
.univers__panneau { padding: 26px 24px; margin-bottom: 14px; background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon); box-shadow: var(--ombre-legere); }
.js .univers__panneau { display: none; margin-bottom: 0; }
.js .univers__panneau.est-actif { display: block; animation: apparition-panneau .35s ease; }
@keyframes apparition-panneau { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.univers__panneau h4 { margin: 0 0 6px; font-size: 1.35rem; color: var(--encre); letter-spacing: -.01em; }
.univers__accroche { margin: 0 0 16px; color: var(--texte-doux); }
.univers__taches { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--trait); }
.univers__taches li { position: relative; padding: 10px 0 10px 24px; border-bottom: 1px solid var(--trait); color: var(--texte); }
.univers__taches li::before { content: ""; position: absolute; left: 0; top: 1.3em; width: 12px; height: 2px; border-radius: 2px; background: var(--bleu-fonce); }
@media (max-width: 520px) {
  .univers__bulle { font-size: .7rem; padding: 6px; }
  .univers__centre { font-size: .68rem; }
}
@media (min-width: 900px) { .univers__grille { grid-template-columns: 1.05fr .95fr; gap: 56px; } }

/* Titre principal posé dans une en-tête de section (page « Ce que vous gagnez ») */
.entete-section h1 { font-size: var(--taille-h2); }
.univers__bulle--autre { border-style: dashed; border-width: 2px; color: var(--bleu-fonce); }
.univers__panneau .bouton { margin-top: 6px; }

/* ---------- Onglet « Ce que vous gagnez » : même langage visuel que la carte des univers ---------- */
.pourquoi--offre { display: block; }
.pourquoi--offre .pourquoi__titre { margin-bottom: 26px; }
.pourquoi--offre .roles { display: grid; gap: 32px 28px; border-top: 0; }
.pourquoi--offre .roles li { display: block; padding: 0; border: 0; }
.pourquoi--offre .roles li::before {
  content: ""; display: block; width: 46px; height: 46px; margin-bottom: 16px; border-radius: 50%;
  border: 1.5px solid var(--bleu); box-shadow: var(--ombre-legere);
  background: radial-gradient(circle, var(--bleu-fonce) 0 5px, var(--blanc) 5.5px);
}
.pourquoi--offre .roles strong { display: block; margin-bottom: 6px; font-size: 1.1rem; line-height: 1.3; }
.pourquoi--offre .changement { max-width: 44em; margin-top: clamp(48px, 7vw, 72px); padding-top: 32px; border-top: 1px solid var(--trait); }
@media (min-width: 640px) { .pourquoi--offre .roles { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .pourquoi--offre .roles { grid-template-columns: repeat(4, 1fr); } }
.resume-gains { max-width: 34em; margin: 0; font-size: clamp(1.2rem, 2.6vw, 1.5rem); font-weight: 700; line-height: 1.45; color: var(--encre); letter-spacing: -.01em; }
#pourquoi + #exemples { padding-top: 0; }
#exemples > .conteneur > .univers:first-child { margin-top: 0; }
@media (max-width: 599px) { .onglets__liste a { white-space: normal; line-height: 1.3; } }

/* ---------- Paragraphes justifiés à partir de la tablette (sur téléphone, la colonne est trop étroite : grands blancs entre les mots) ---------- */
@media (min-width: 600px) {
  main p, main li, .pied__grille p {
    text-align: justify;
    -webkit-hyphens: auto; hyphens: auto;
    hyphenate-limit-chars: 7 3 3;
  }
  /* Textes courts, centrés ou manuscrits : restent tels quels */
  main .univers__invite { text-align: center; hyphens: manual; }
  main .signature { text-align: left; hyphens: manual; }
  main .univers__accroche, main .zone, main .domaines__note { hyphens: manual; }
  /* Les petits titres en gras des listes restent alignés à gauche */
  main li > strong { text-align: left; hyphens: manual; }
}
/* Accueil : « Gardez votre cur de métier. » sur une seule ligne dés la tablette (taille ajustée à la colonne) */
@media (min-width: 600px) {
  .hero__grille > div:first-child { container-type: inline-size; }
  .hero h1 { font-size: min(var(--taille-h1), 7cqi); }
  .hero__ligne1 { white-space: nowrap; }
}
/* ---------- Carte des univers : détail à cté de la carte dès 700 px, mieux mis en évidence ---------- */
@media (min-width: 700px) and (max-width: 899px) {
  .univers__grille { grid-template-columns: 1fr 1fr; gap: 28px; }
  .univers__bulle { font-size: .74rem; padding: 6px; }
  .univers__centre { font-size: .7rem; }
}
.js .univers__panneau.est-actif {
  border-color: #C9D3FF; border-top: 4px solid var(--bleu-fonce);
  box-shadow: 0 18px 44px rgba(52, 85, 217, .16);
}
.js .univers__panneau.est-actif .univers__taches li { animation: apparition-tache .4s ease both; }
.js .univers__panneau.est-actif .univers__taches li:nth-child(2) { animation-delay: .05s; }
.js .univers__panneau.est-actif .univers__taches li:nth-child(3) { animation-delay: .1s; }
.js .univers__panneau.est-actif .univers__taches li:nth-child(4) { animation-delay: .15s; }
.js .univers__panneau.est-actif .univers__taches li:nth-child(5) { animation-delay: .2s; }
.js .univers__panneau.est-actif .univers__taches li:nth-child(6) { animation-delay: .25s; }
.js .univers__panneau.est-actif .univers__taches li:nth-child(7) { animation-delay: .3s; }
@keyframes apparition-tache { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .js .univers__panneau.est-actif, .js .univers__panneau.est-actif .univers__taches li { animation: none; }
}main .univers__panneau p, main .univers__panneau li { text-align: left; }
/* Les 4 engagements gardent leur présentation d’origine (alignés à gauche) */
main .engagements__liste li { text-align: left; hyphens: manual; }