@charset "UTF-8";
/* ==========================================================================
   SPHERIS — Feuille de style principale
   Aucune dépendance, aucun build, aucune ressource externe.
   Les polices sont hébergées localement : aucune donnée visiteur ne quitte
   le serveur (pas de CDN Google Fonts, donc pas de transfert hors UE).
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Polices auto-hébergées
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('../fonts/bricolage-grotesque-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('../fonts/bricolage-grotesque-latin-600-normal.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('../fonts/bricolage-grotesque-latin-700-normal.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Figtree';
  src: url('../fonts/figtree-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Figtree';
  src: url('../fonts/figtree-latin-600-normal.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Figtree';
  src: url('../fonts/figtree-latin-700-normal.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
/* Italique authentique réservé aux mots accentués des titres */
@font-face {
  font-family: 'Newsreader';
  src: url('../fonts/newsreader-latin-400-italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}

/* --------------------------------------------------------------------------
   1. Jetons de design
   -------------------------------------------------------------------------- */
:root {
  /* Couleurs de base */
  --nuit:   #2B2D4A;
  --nuit-2: #454868;
  --brume:  #F8F7FC;
  --lin:    #EFECF7;
  --ligne:  #DFDAEF;
  --blanc:  #FFFFFF;
  --iris:   #6C63C0;

  /* Couleurs des quatre routes 4R */
  --menthe: #93D7C0;   /* 01 Compréhension */
  --azur:   #A3BDF2;   /* 02 Gouvernance   */
  --rose:   #EFA9C2;   /* 03 Usages        */
  --soleil: #F6D384;   /* 04 Adoption      */

  /* Bleu de la mascotte EGO */
  --ego:    #3E74B4;

  /* Typographie */
  --f-display: 'Bricolage Grotesque', 'Trebuchet MS', sans-serif;
  --f-body:    'Figtree', 'Segoe UI', system-ui, sans-serif;
  --f-mono:    'IBM Plex Mono', ui-monospace, monospace;
  --f-accent:  'Newsreader', Georgia, serif;

  /* Rayons */
  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-full: 999px;

  /* Ombres */
  --sh-card:  0 1px 2px rgba(43,45,74,.04);
  --sh-hover: 0 18px 40px -22px rgba(43,45,74,.35);
  --sh-deep:  0 24px 50px -28px rgba(43,45,74,.45);

  /* Rythme */
  --gut: 20px;
  --max: 1152px;
}

/* --------------------------------------------------------------------------
   2. Réinitialisation
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--brume);
  color: var(--nuit);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 700;
  line-height: 1.1;
  margin: 0;
  letter-spacing: -.01em;
}

p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--iris);
  outline-offset: 3px;
  border-radius: 6px;
}

/* --------------------------------------------------------------------------
   3. Mise en page
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.section { padding-block: 80px; }
.section--tight { padding-block: 56px; }

@media (min-width: 768px) {
  body { font-size: 17px; }
  .container { padding-inline: 32px; }
  .section { padding-block: 112px; }
  .section--tight { padding-block: 72px; }
}

.section--dark {
  background: var(--nuit);
  color: var(--brume);
}
.section--lin {
  background: var(--lin);
  border-block: 1px solid var(--ligne);
}
.relative { position: relative; }
.overflow-hidden { overflow: hidden; }
.center { text-align: center; }

.grid { display: grid; gap: 24px; }
@media (min-width: 640px)  { .g-sm-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .g-md-2 { grid-template-columns: repeat(2, 1fr); }
                             .g-md-3 { grid-template-columns: repeat(3, 1fr); }
                             .g-md-4 { grid-template-columns: repeat(4, 1fr); } }

.flex { display: flex; }
.wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-sm { gap: 10px; }
.gap-md { gap: 18px; }
.shrink-0 { flex-shrink: 0; }

.measure    { max-width: 40rem; }
.measure-lg { max-width: 46rem; }

.mt-1 { margin-top: 8px }   .mt-2 { margin-top: 16px }
.mt-3 { margin-top: 24px }  .mt-4 { margin-top: 32px }
.mt-6 { margin-top: 48px }  .mt-8 { margin-top: 64px }
.mb-1 { margin-bottom: 8px } .mb-2 { margin-bottom: 16px }
.mb-3 { margin-bottom: 24px } .mb-4 { margin-bottom: 32px }
.mb-6 { margin-bottom: 48px } .mb-8 { margin-bottom: 64px }

/* --------------------------------------------------------------------------
   4. Typographie
   -------------------------------------------------------------------------- */
.eyebrow {
  font-family: var(--f-mono);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--iris);
}
.eyebrow--muted { color: rgba(69,72,104,.6); }
.eyebrow--menthe { color: var(--menthe); }

.h1 { font-size: clamp(2.4rem, 7vw, 3.75rem); }
.h2 { font-size: clamp(1.85rem, 4.5vw, 2.75rem); }
.h3 { font-size: clamp(1.35rem, 3vw, 1.65rem); }
.h4 { font-size: 1.2rem; }

.accent,
.accent--menthe {
  font-family: var(--f-accent);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  /* Newsreader a une hauteur d'x plus faible : compensation optique */
  font-size: 1.08em;
}
.accent { color: var(--iris); }
.accent--menthe { color: var(--menthe); }

.lead {
  font-size: 1.1rem;
  line-height: 1.65;
  color: var(--nuit-2);
}
.section--dark .lead,
.section--dark .prose { color: rgba(248,247,252,.78); }

.prose p + p { margin-top: 16px; }
.prose { color: var(--nuit-2); }

.small { font-size: .95rem; }
.mono  { font-family: var(--f-mono); font-size: .8rem; }
.muted { color: rgba(69,72,104,.65); }
.section--dark .muted { color: rgba(248,247,252,.55); }

/* --------------------------------------------------------------------------
   5. Boutons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-block;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  padding: 13px 26px;
  border-radius: var(--r-full);
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color .25s, border-color .25s, color .25s, transform .25s;
}
.btn:hover { transform: translateY(-1px); }

.btn--dark  { background: var(--nuit); color: var(--brume); }
.btn--dark:hover { background: var(--iris); }

.btn--ghost { border-color: rgba(43,45,74,.25); color: var(--nuit); }
.btn--ghost:hover { border-color: var(--iris); color: var(--iris); }

.btn--light { background: var(--brume); color: var(--nuit); }
.btn--light:hover { background: var(--menthe); }

.btn--menthe { background: var(--menthe); color: var(--nuit); }
.btn--menthe:hover { background: var(--brume); }

.section--dark .btn--ghost { border-color: rgba(255,255,255,.25); color: var(--brume); }
.section--dark .btn--ghost:hover { border-color: var(--menthe); color: var(--menthe); }

.btn--sm { padding: 10px 20px; font-size: .95rem; }

.link {
  font-weight: 600;
  color: var(--iris);
  text-decoration: none;
}
.link:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   6. Cartes, panneaux, étiquettes
   -------------------------------------------------------------------------- */
.card {
  background: var(--blanc);
  border: 1px solid var(--ligne);
  border-radius: var(--r-lg);
  padding: 28px;
  box-shadow: var(--sh-card);
}
@media (min-width: 768px) { .card { padding: 36px; } }
.card--flat { box-shadow: none; }

.card--lift { transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s; }
.card--lift:hover { transform: translateY(-4px); box-shadow: var(--sh-hover); }

.panel {
  background: var(--blanc);
  border: 1px solid var(--ligne);
  border-radius: var(--r-lg);
  padding: 28px;
}
@media (min-width: 768px) { .panel { padding: 36px; } }

.tag {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: .72rem;
  padding: 5px 13px;
  border-radius: var(--r-full);
  background: var(--lin);
  color: var(--nuit);
}
.tag--menthe { background: rgba(147,215,192,.3); }
.tag--azur   { background: rgba(163,189,242,.3); }
.tag--rose   { background: rgba(239,169,194,.3); }
.tag--soleil { background: rgba(246,211,132,.38); }

.pill {
  display: inline-block;
  padding: 9px 20px;
  border: 1px solid var(--ligne);
  background: var(--blanc);
  border-radius: var(--r-full);
  font-weight: 600;
  font-size: .95rem;
}

.icon-box {
  width: 46px; height: 46px;
  border-radius: 14px;
  display: grid; place-items: center;
}
.icon-box--menthe { background: rgba(147,215,192,.38); }
.icon-box--azur   { background: rgba(163,189,242,.38); }
.icon-box--rose   { background: rgba(239,169,194,.38); }
.icon-box--soleil { background: rgba(246,211,132,.45); }

/* Vignette numérotée d'étape */
.step-num {
  width: 48px; height: 48px;
  border-radius: var(--r-full);
  border: 3px solid var(--ligne);
  background: var(--blanc);
  display: grid; place-items: center;
  font-family: var(--f-display);
  font-weight: 700;
  flex-shrink: 0;
}
.step-num--menthe { border-color: var(--menthe); background: rgba(147,215,192,.3); }
.step-num--azur   { border-color: var(--azur);   background: rgba(163,189,242,.3); }
.step-num--rose   { border-color: var(--rose);   background: rgba(239,169,194,.3); }
.step-num--soleil { border-color: var(--soleil); background: rgba(246,211,132,.35); }

/* Liste à tirets colorés */
.dash-list li { display: flex; gap: 12px; }
.dash-list li + li { margin-top: 10px; }
.dash-list .dash { font-weight: 700; flex-shrink: 0; }

/* Citation */
.quote {
  border-left: 2px solid var(--menthe);
  padding-left: 24px;
}
.quote p {
  font-family: var(--f-accent);
  font-size: 1.3rem;
  font-style: italic;
  line-height: 1.45;
}

/* --------------------------------------------------------------------------
   7. Halos décoratifs
   -------------------------------------------------------------------------- */
.blob {
  position: absolute;
  border-radius: var(--r-full);
  filter: blur(70px);
  opacity: .5;
  pointer-events: none;
  z-index: 0;
}
.blob--menthe { background: var(--menthe); }
.blob--azur   { background: var(--azur); }
.blob--rose   { background: var(--rose); }
.blob--soleil { background: var(--soleil); }
.blob--iris   { background: var(--iris); }
.above { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   8. Barre d'urgence, navigation
   -------------------------------------------------------------------------- */
.topbar {
  background: var(--nuit);
  color: var(--brume);
  font-family: var(--f-mono);
  font-size: .78rem;
  letter-spacing: .04em;
  text-align: center;
  padding: 9px 16px;
}
.topbar .dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: var(--r-full);
  background: var(--rose);
  margin-right: 8px;
  vertical-align: middle;
}
.topbar .alert { color: var(--rose); }
.topbar .sep { opacity: .4; margin-inline: 8px; }
.topbar a { text-decoration: none; }
.topbar a:hover { text-decoration: underline; text-decoration-color: rgba(255,255,255,.5); }
.topbar .tel { opacity: .8; }
@media (max-width: 639px) { .topbar .hide-xs { display: none; } }

#progressbar {
  position: fixed; top: 0; left: 0;
  height: 3px; width: 0;
  background: linear-gradient(90deg, var(--menthe), var(--azur), var(--rose), var(--soleil));
  z-index: 60;
}

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(248,247,252,.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ligne);
}
.site-header .bar {
  height: 70px;
  display: flex; align-items: center; justify-content: space-between;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none;
  font-family: var(--f-display);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -.02em;
}

.nav-main { display: none; }
@media (min-width: 1140px) {
  .nav-main { display: flex; align-items: center; gap: 17px; }
}
.nav-main a {
  text-decoration: none;
  font-weight: 600;
  font-size: .93rem;
  transition: color .2s;
}
.nav-main a:hover { color: var(--iris); }
.nav-main a[aria-current="page"] { color: var(--iris); }

.burger {
  display: flex; flex-direction: column; gap: 5px;
  background: none; border: 0; padding: 8px;
}
.burger span {
  width: 24px; height: 2px; border-radius: 2px; background: var(--nuit);
}
@media (min-width: 1140px) { .burger { display: none; } }

.nav-mobile {
  max-height: 0; overflow: hidden;
  border-top: 1px solid var(--ligne);
  background: var(--brume);
  transition: max-height .35s ease;
}
.nav-mobile nav {
  display: flex; flex-direction: column; gap: 16px;
  padding: 20px;
}
.nav-mobile a { text-decoration: none; font-weight: 600; }
@media (min-width: 1140px) { .nav-mobile { display: none; } }

/* --------------------------------------------------------------------------
   9. En-tête de page intérieure
   -------------------------------------------------------------------------- */
.page-head { position: relative; overflow: hidden; padding-block: 64px 56px; }
@media (min-width: 768px) { .page-head { padding-block: 88px 72px; } }

.breadcrumb {
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(69,72,104,.6);
  margin-bottom: 18px;
}
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { color: var(--iris); }
.breadcrumb .sep { margin-inline: 8px; opacity: .5; }

/* --------------------------------------------------------------------------
   10. Chiffres
   -------------------------------------------------------------------------- */
.stat { border-top: 2px solid var(--ligne); padding-top: 20px; }
.stat--menthe { border-color: var(--menthe); }
.stat--azur   { border-color: var(--azur); }
.stat--rose   { border-color: var(--rose); }
.stat--soleil { border-color: var(--soleil); }
.stat .num {
  font-family: var(--f-display);
  font-size: 2.9rem;
  font-weight: 700;
  line-height: 1;
}
.stat p { font-size: .92rem; color: var(--nuit-2); margin-top: 8px; }
.section--dark .stat { border-color: rgba(255,255,255,.15); }
.section--dark .stat p { color: rgba(248,247,252,.7); }

/* --------------------------------------------------------------------------
   11. Mascottes
   -------------------------------------------------------------------------- */
.masc-stage {
  position: relative;
  display: flex; align-items: flex-end; justify-content: center;
  min-height: 300px;
  padding: 40px 24px 24px;
}
.masc-stage--now { background: linear-gradient(135deg, rgba(147,215,192,.3), rgba(163,189,242,.25) 50%, rgba(239,169,194,.3)); }
.masc-stage--ego { background: linear-gradient(135deg, rgba(163,189,242,.35), var(--lin) 55%, rgba(147,215,192,.25)); }
.masc-stage .ground {
  position: absolute; bottom: 24px; left: 50%;
  transform: translateX(-50%);
  width: 150px; height: 16px;
  border-radius: var(--r-full);
  background: rgba(43,45,74,.1);
  filter: blur(8px);
}
.masc-img {
  position: relative;
  height: 230px; width: auto;
  filter: drop-shadow(0 12px 18px rgba(43,45,74,.18));
  animation: bob 6s ease-in-out infinite;
}
.masc-card:last-child .masc-img { animation-delay: -3s; }
.masc-card:hover .masc-img { animation-duration: 2.4s; }
.mini-masc { animation: bob 7s ease-in-out infinite; }
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

.masc-card {
  background: var(--blanc);
  border: 1px solid var(--ligne);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .4s cubic-bezier(.2,.7,.3,1), box-shadow .4s;
}
.masc-card:hover { transform: translateY(-6px); box-shadow: var(--sh-deep); }
.masc-body { padding: 28px; flex: 1; }
@media (min-width: 768px) { .masc-body { padding: 36px; } }
.masc-credo {
  font-family: var(--f-accent);
  font-size: 1.25rem;
  font-style: italic;
  color: var(--iris);
}

/* --------------------------------------------------------------------------
   12. Sphère orbitale
   -------------------------------------------------------------------------- */
#sphere-wrap { animation: float 9s ease-in-out infinite; max-width: 400px; margin-inline: auto; }
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
.orbit, .orbit-dot { transition: stroke-width .45s, opacity .45s, r .45s; }
.chip {
  border: 1px solid var(--ligne);
  background: transparent;
  border-radius: var(--r-full);
  padding: 7px 17px;
  font-size: .92rem;
  font-weight: 600;
  transition: background-color .25s, border-color .25s, transform .25s;
}
.chip:hover { transform: translateY(-2px); }
.sphere-label { min-height: 52px; text-align: center; margin-top: 8px; }
.sphere-label .t { font-family: var(--f-display); font-weight: 600; font-size: 1.1rem; }
.sphere-label .s { font-size: .93rem; color: var(--nuit-2); }

/* --------------------------------------------------------------------------
   13. Méthode 4R — routes et bornes
   -------------------------------------------------------------------------- */
.road { transition: stroke .45s, stroke-width .45s; }
.mark { transition: opacity .45s; }
.mark.travel { animation: travel 1.6s linear infinite; }
@keyframes travel { to { stroke-dashoffset: -44; } }

.road-hit { cursor: pointer; }
.road-hit rect { transition: fill .3s, stroke .3s; }
.road-hit text { transition: fill .3s; }

.borne { transform-box: fill-box; transform-origin: center; }
.borne.on { animation: bornePop .55s cubic-bezier(.2,.9,.3,1); }
@keyframes bornePop {
  0%   { transform: translateY(0); }
  45%  { transform: translateY(-9px); }
  100% { transform: translateY(0); }
}
.borne-badge { transition: transform .35s cubic-bezier(.2,.9,.3,1); }
.borne-badge:hover { transform: translateY(-7px); }

.road-panel { display: none; }
.road-panel.active { display: block; animation: fadeUp .5s cubic-bezier(.2,.7,.3,1); }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   14. Diagnostic
   -------------------------------------------------------------------------- */
.diag-box {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--r-lg);
  padding: 24px;
  backdrop-filter: blur(6px);
}
@media (min-width: 768px) { .diag-box { padding: 40px; } }

.opt {
  display: block; width: 100%;
  text-align: left;
  border: 1px solid rgba(255,255,255,.25);
  background: transparent;
  color: inherit;
  border-radius: var(--r-md);
  padding: 16px 20px;
  font-weight: 600;
  transition: border-color .2s, background-color .2s;
}
.opt:hover { border-color: var(--menthe); background: rgba(255,255,255,.05); }
.opt[aria-pressed="true"] { background: var(--brume); color: var(--nuit); border-color: var(--brume); }

.q-dots { display: flex; gap: 6px; }
.q-dots span {
  width: 8px; height: 8px; border-radius: var(--r-full);
  background: rgba(255,255,255,.2);
}
.q-dots span.done { background: var(--menthe); }
.q-dots span.now  { background: var(--brume); }

#gauge-arc { transition: stroke-dashoffset 1.1s cubic-bezier(.2,.7,.3,1); }
.prio-box {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--r-md);
  padding: 20px;
}
.hidden { display: none !important; }

/* --------------------------------------------------------------------------
   15. Livrables (page intérieure)
   -------------------------------------------------------------------------- */
.deliver {
  display: flex; gap: 16px;
  padding: 20px 0;
  border-top: 1px solid var(--ligne);
}
.deliver .check {
  width: 26px; height: 26px; flex-shrink: 0;
  border-radius: var(--r-full);
  background: rgba(147,215,192,.4);
  display: grid; place-items: center;
}

/* Accordéon FAQ */
.faq { border-top: 1px solid var(--ligne); }
.faq summary {
  cursor: pointer;
  padding: 22px 0;
  font-family: var(--f-display);
  font-size: 1.1rem;
  font-weight: 600;
  list-style: none;
  display: flex; justify-content: space-between; gap: 20px;
  align-items: flex-start;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  font-family: var(--f-mono);
  font-size: 1.4rem;
  line-height: 1;
  color: var(--iris);
  flex-shrink: 0;
  transition: transform .25s;
}
.faq[open] summary::after { transform: rotate(45deg); }
.faq .answer { padding-bottom: 24px; color: var(--nuit-2); }

/* Encart d'avertissement / note */
.note {
  border-left: 3px solid var(--soleil);
  background: rgba(246,211,132,.16);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: 18px 22px;
  font-size: .95rem;
}

/* Emplacement réservé pour une capture d'écran */
.shot {
  border: 1px dashed var(--ligne);
  border-radius: var(--r-md);
  background: var(--lin);
  min-height: 260px;
  display: grid; place-items: center;
  text-align: center;
  padding: 32px;
  color: rgba(69,72,104,.6);
  font-family: var(--f-mono);
  font-size: .82rem;
}

/* --------------------------------------------------------------------------
   16. Pied de page
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--brume);
  border-top: 1px solid var(--ligne);
  padding-block: 40px;
  font-family: var(--f-mono);
  font-size: .76rem;
  color: rgba(69,72,104,.72);
}
.site-footer .rows {
  display: flex; flex-direction: column; gap: 24px;
  justify-content: space-between;
}
@media (min-width: 640px) { .site-footer .rows { flex-direction: row; } }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--iris); }
.site-footer .links { display: flex; flex-wrap: wrap; gap: 6px 20px; }

/* --------------------------------------------------------------------------
   17. Apparitions au défilement
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);
}
.reveal.is-in { opacity: 1; transform: none; }

.intro { opacity: 0; transform: translateY(18px); animation: rise .9s cubic-bezier(.2,.7,.3,1) forwards; }
.d1 { animation-delay: .05s } .d2 { animation-delay: .18s }
.d3 { animation-delay: .31s } .d4 { animation-delay: .44s }
@keyframes rise { to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------------
   18. Respect des préférences de mouvement réduit
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .intro  { opacity: 1; transform: none; animation: none; }
  #sphere-wrap, .masc-img, .mini-masc { animation: none; }
  .card--lift:hover, .chip:hover, .masc-card:hover, .btn:hover, .borne-badge:hover { transform: none; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* --------------------------------------------------------------------------
   19. Page Microsoft — Le poste de contrôle
       Déclaration d'embarquement, portiques en cascade, page de passeport.
   -------------------------------------------------------------------------- */

.ctrl-desk { display: grid; gap: 32px; }
@media (min-width: 980px) { .ctrl-desk { grid-template-columns: 0.92fr 1.08fr; align-items: start; } }

/* ---- Déclaration : les trois choix ---- */
.decl-group + .decl-group { margin-top: 26px; }
.decl-label {
  font-family: var(--f-mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(248,247,252,.5);
  margin-bottom: 10px;
  display: flex; align-items: center; gap: 10px;
}
.decl-label::after {
  content: ''; flex: 1; height: 1px;
  background: rgba(255,255,255,.12);
}
.decl-opts { display: grid; gap: 8px; grid-template-columns: repeat(3, 1fr); }

.decl-btn {
  appearance: none; -webkit-appearance: none;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.16);
  color: var(--brume);
  border-radius: 14px;
  padding: 14px 10px 12px;
  cursor: pointer;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  transition: background-color .2s, border-color .2s, transform .2s;
}
.decl-btn svg { opacity: .75; transition: opacity .2s; }
.decl-btn .t {
  font-weight: 600; font-size: .88rem; line-height: 1.15;
}
.decl-btn .s {
  font-family: var(--f-mono);
  font-size: .6rem; letter-spacing: .05em;
  opacity: .5; line-height: 1.2;
}
.decl-btn:hover { border-color: var(--menthe); transform: translateY(-2px); }
.decl-btn:hover svg { opacity: 1; }
.decl-btn[aria-pressed="true"] {
  background: var(--brume); color: var(--nuit);
  border-color: var(--brume);
  box-shadow: 0 6px 18px -8px rgba(0,0,0,.5);
}
.decl-btn[aria-pressed="true"] svg { opacity: 1; }
.decl-btn[aria-pressed="true"] .s { opacity: .6; }

/* ---- Les cinq portiques ---- */
.gates {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 6px; position: relative;
  margin-bottom: 4px;
}
.gate { text-align: center; position: relative; }

/* Le couloir qui relie les portiques */
.gate::before {
  content: ''; position: absolute;
  top: 26px; left: -3px; right: 50%;
  height: 2px; background: rgba(43,45,74,.12);
  z-index: 0;
}
.gate:first-child::before { display: none; }

.gate-arch {
  position: relative; z-index: 1;
  width: 40px; height: 52px; margin: 0 auto 8px;
  border: 2.5px solid rgba(43,45,74,.18);
  border-bottom: none;
  border-radius: 20px 20px 0 0;
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 6px;
  background: var(--blanc);
  transition: border-color .35s, background-color .35s, box-shadow .35s;
}
.gate-arch .sym {
  font-family: var(--f-mono); font-size: .8rem; font-weight: 500;
  color: rgba(43,45,74,.35);
  transition: color .35s;
}
.gate-name {
  font-family: var(--f-mono);
  font-size: .56rem; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(43,45,74,.45);
  line-height: 1.25;
  transition: color .35s;
}

/* États des portiques */
.gate.is-pass .gate-arch { border-color: #4CAF8F; background: rgba(147,215,192,.22); }
.gate.is-pass .gate-arch .sym { color: #2E7D63; }
.gate.is-pass .gate-name { color: var(--nuit); }

.gate.is-warn .gate-arch { border-color: #D9A22B; background: rgba(246,211,132,.3); }
.gate.is-warn .gate-arch .sym { color: #8A6410; }
.gate.is-warn .gate-name { color: var(--nuit); }

.gate.is-stop .gate-arch {
  border-color: #D4547E; background: rgba(239,169,194,.32);
  box-shadow: 0 0 0 4px rgba(239,169,194,.22);
}
.gate.is-stop .gate-arch .sym { color: #A32B54; }
.gate.is-stop .gate-name { color: var(--nuit); font-weight: 600; }

.gate.is-skip { opacity: .3; }

/* Cascade d'apparition */
.gate { transition: opacity .3s; }
.gate:nth-child(1) .gate-arch { transition-delay: 0ms }
.gate:nth-child(2) .gate-arch { transition-delay: 90ms }
.gate:nth-child(3) .gate-arch { transition-delay: 180ms }
.gate:nth-child(4) .gate-arch { transition-delay: 270ms }
.gate:nth-child(5) .gate-arch { transition-delay: 360ms }

/* ---- La page de passeport ---- */
.passport {
  position: relative;
  background: linear-gradient(160deg, #FBFAF6, #F1EEE6);
  color: var(--nuit);
  border-radius: 14px;
  padding: 26px 26px 28px;
  box-shadow: 0 20px 44px -20px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.7);
  overflow: hidden;
}
/* Trame de sécurité, comme sur un document officiel */
.passport::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(45deg, rgba(43,45,74,.035) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(-45deg, rgba(43,45,74,.03) 0 1px, transparent 1px 11px);
  pointer-events: none;
}
.passport > * { position: relative; }

.passport-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; flex-wrap: wrap;
  font-family: var(--f-mono);
  font-size: .6rem; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(43,45,74,.5);
  padding-bottom: 12px;
  border-bottom: 1.5px dashed rgba(43,45,74,.2);
  margin-bottom: 20px;
}

/* ---- Le tampon encreur ---- */
.stamp-wrap {
  position: absolute; top: 58px; right: 18px;
  z-index: 3; pointer-events: none;
}
.stamp {
  border: 3px solid currentColor;
  border-radius: 8px;
  padding: 7px 14px 6px;
  text-align: center;
  transform: rotate(-11deg);
  opacity: .82;
  animation: stampIn .5s cubic-bezier(.2,1.6,.35,1);
  box-shadow: inset 0 0 0 1.5px currentColor;
}
.stamp .sv {
  font-family: var(--f-display); font-weight: 700;
  font-size: 1.15rem; letter-spacing: .06em; text-transform: uppercase;
  line-height: 1.05; display: block;
}
.stamp .sl {
  font-family: var(--f-mono); font-size: .5rem;
  letter-spacing: .16em; text-transform: uppercase;
  display: block; opacity: .8; margin-top: 2px;
}
@keyframes stampIn {
  0%   { transform: rotate(-24deg) scale(2.4); opacity: 0 }
  55%  { transform: rotate(-11deg) scale(.93); opacity: .9 }
  100% { transform: rotate(-11deg) scale(1);   opacity: .82 }
}
.stamp--ok     { color: #2E7D63; }
.stamp--mfa    { color: #3E63B4; }
.stamp--limite { color: #9A6B0F; }
.stamp--bloque { color: #B02F58; }

/* ---- Motifs relevés ---- */
.findings { margin-top: 20px; }
.findings li {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 10px 0;
  border-top: 1px solid rgba(43,45,74,.12);
  font-size: .9rem; line-height: 1.45;
}
.findings li:last-child { border-bottom: 1px solid rgba(43,45,74,.12); }
.findings .fm {
  flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px;
  border-radius: var(--r-full);
  display: grid; place-items: center;
  font-family: var(--f-mono); font-size: .62rem; font-weight: 500;
  color: #fff;
}
.findings .fm--pass { background: #4CAF8F; }
.findings .fm--warn { background: #D9A22B; }
.findings .fm--stop { background: #D4547E; }
.findings .fl {
  display: block;
  font-family: var(--f-mono); font-size: .62rem;
  letter-spacing: .08em; text-transform: uppercase;
  color: rgba(43,45,74,.55);
  margin-bottom: 2px;
}

@media (max-width: 520px) {
  .decl-opts { grid-template-columns: 1fr; }
  .decl-btn { flex-direction: row; text-align: left; gap: 12px; }
  .gates { gap: 3px; }
  .gate-arch { width: 32px; height: 42px; }
  .gate-name { font-size: .48rem; }
  .stamp-wrap { top: auto; bottom: 18px; right: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .stamp { animation: none; transform: rotate(-11deg); }
  .decl-btn:hover { transform: none; }
  .gate-arch { transition-delay: 0ms !important; }
}

/* --------------------------------------------------------------------------
   20. Page Microsoft — comparatif, couches, encart sombre
   -------------------------------------------------------------------------- */

/* Comparatif château fort / aéroport */
.compare { display: grid; gap: 20px; }
@media (min-width: 780px) { .compare { grid-template-columns: 1fr 1fr; } }
.compare-card {
  border-radius: var(--r-lg);
  padding: 28px;
  border: 1px solid var(--ligne);
  background: var(--blanc);
}
.compare-card--old { background: var(--lin); }
.compare-card--old .compare-title { color: var(--nuit-2); }
.compare-title {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.3rem;
  margin-bottom: 6px;
}

/* Couches de sécurité empilées */
.layer {
  border-left: 4px solid var(--ligne);
  padding: 4px 0 4px 22px;
}
.layer + .layer { margin-top: 26px; }
.layer--menthe { border-color: var(--menthe); }
.layer--azur   { border-color: var(--azur); }
.layer--rose   { border-color: var(--rose); }
.layer--soleil { border-color: var(--soleil); }
.layer .num {
  font-family: var(--f-mono);
  font-size: .7rem;
  letter-spacing: .1em;
  color: rgba(69,72,104,.55);
  display: block;
  margin-bottom: 4px;
}

/* Encart clair sur fond sombre (section sauvegarde du tenant) */
.verdict {
  border-radius: var(--r-lg);
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.06);
  padding: 28px;
}
.chain li {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 11px 0;
  border-top: 1px solid rgba(255,255,255,.1);
  font-size: .93rem; line-height: 1.45;
}
.chain li:last-child { border-bottom: 1px solid rgba(255,255,255,.1); }
.chain .mark {
  flex-shrink: 0; width: 20px; height: 20px; margin-top: 2px;
  border-radius: var(--r-full);
  display: grid; place-items: center;
  font-family: var(--f-mono); font-size: .68rem; font-weight: 500;
  color: #F8F7FC;
}
.chain .mark--pass { background: rgba(147,215,192,.35); }
.chain .mark--warn { background: rgba(246,211,132,.4); }
.chain .mark--stop { background: rgba(239,169,194,.4); }
.chain .lbl {
  display: block;
  font-family: var(--f-mono); font-size: .66rem;
  letter-spacing: .07em; text-transform: uppercase;
  opacity: .55; margin-bottom: 2px;
}

/* --------------------------------------------------------------------------
   21. Page Conformité — exercice d'hameçonnage & registre
   -------------------------------------------------------------------------- */

.phish-wrap { display: grid; gap: 28px; }
@media (min-width: 980px) { .phish-wrap { grid-template-columns: 1.15fr .85fr; align-items: start; } }

/* Fausse fenêtre de messagerie */
.mail {
  background: var(--blanc);
  border: 1px solid var(--ligne);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: 0 18px 40px -24px rgba(43,45,74,.4);
}
.mail-bar {
  background: var(--lin);
  border-bottom: 1px solid var(--ligne);
  padding: 10px 16px;
  display: flex; align-items: center; gap: 8px;
}
.mail-bar .dots { display: flex; gap: 5px; }
.mail-bar .dots i {
  width: 9px; height: 9px; border-radius: var(--r-full);
  background: rgba(43,45,74,.18); display: block;
}
.mail-bar .lbl {
  font-family: var(--f-mono); font-size: .62rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(69,72,104,.55);
  margin-left: 6px;
}
.mail-meta {
  padding: 16px 20px;
  border-bottom: 1px solid var(--ligne);
  font-size: .88rem;
}
.mail-meta .row { display: flex; gap: 10px; padding: 3px 0; flex-wrap: wrap; }
.mail-meta .k {
  font-family: var(--f-mono); font-size: .64rem;
  letter-spacing: .08em; text-transform: uppercase;
  color: rgba(69,72,104,.5);
  min-width: 62px; padding-top: 3px;
}
.mail-subject { font-weight: 700; font-size: 1rem; }
.mail-body { padding: 20px; font-size: .93rem; line-height: 1.65; color: var(--nuit-2); }
.mail-body p + p { margin-top: 12px; }
.mail-cta {
  display: inline-block; margin: 6px 0;
  background: #2F6FB8; color: #fff;
  padding: 9px 18px; border-radius: 4px;
  font-weight: 600; font-size: .88rem;
}
.mail-attach {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--ligne); border-radius: 6px;
  padding: 8px 12px; margin-top: 4px;
  font-family: var(--f-mono); font-size: .74rem;
  background: var(--brume);
}

/* Indices cliquables */
.ph-spot {
  appearance: none; -webkit-appearance: none;
  background: rgba(246,211,132,.28);
  border: 0; border-bottom: 2px dotted #C79412;
  color: inherit; font: inherit;
  padding: 1px 3px; margin: 0; cursor: pointer;
  border-radius: 3px 3px 0 0;
  transition: background-color .2s, color .2s;
}
.ph-spot:hover { background: rgba(246,211,132,.55); }
.ph-spot.found {
  background: rgba(212,84,126,.16);
  border-bottom-color: #D4547E;
  color: #A32B54;
  font-weight: 600;
  cursor: default;
}
.ph-spot.found::after {
  content: attr(data-n);
  display: inline-block;
  margin-left: 5px;
  background: #D4547E; color: #fff;
  font-family: var(--f-mono); font-size: .58rem;
  width: 14px; height: 14px; line-height: 14px;
  border-radius: var(--r-full); text-align: center;
  vertical-align: 1px; font-weight: 500;
}

/* Panneau de score et de relevés */
.ph-score {
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap; margin-bottom: 18px;
}
.ph-pips { display: flex; gap: 6px; }
.ph-pips i {
  width: 22px; height: 6px; border-radius: 3px;
  background: var(--ligne); display: block;
  transition: background-color .3s;
}
.ph-pips i.on { background: #D4547E; }
.ph-count {
  font-family: var(--f-display); font-weight: 700;
  font-size: 1.15rem;
}

.ph-list li {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 13px 0;
  border-top: 1px solid var(--ligne);
  font-size: .9rem; line-height: 1.5;
  color: var(--nuit-2);
}
.ph-list li:last-child { border-bottom: 1px solid var(--ligne); }
.ph-list .n {
  flex-shrink: 0; width: 20px; height: 20px; margin-top: 2px;
  border-radius: var(--r-full);
  background: #D4547E; color: #fff;
  display: grid; place-items: center;
  font-family: var(--f-mono); font-size: .64rem; font-weight: 500;
}
.ph-list .t {
  display: block; color: var(--nuit); font-weight: 600;
  margin-bottom: 2px;
}
.ph-empty {
  border: 1px dashed var(--ligne);
  border-radius: var(--r-md);
  padding: 22px;
  color: rgba(69,72,104,.6);
  font-size: .9rem;
  text-align: center;
}
.ph-done {
  background: rgba(147,215,192,.22);
  border: 1px solid rgba(147,215,192,.5);
  border-radius: var(--r-md);
  padding: 18px 20px;
  margin-top: 18px;
}

/* Registre de traitements */
.reg { width: 100%; border-collapse: collapse; font-size: .86rem; }
.reg th {
  text-align: left;
  font-family: var(--f-mono); font-size: .62rem;
  letter-spacing: .09em; text-transform: uppercase;
  color: rgba(69,72,104,.6); font-weight: 500;
  padding: 0 12px 10px 0;
  border-bottom: 1.5px solid var(--ligne);
  white-space: nowrap;
}
.reg td {
  padding: 13px 12px 13px 0;
  border-bottom: 1px solid var(--ligne);
  vertical-align: top;
  color: var(--nuit-2);
}
.reg td strong { color: var(--nuit); }
.reg-wrap { overflow-x: auto; }
.reg-badge {
  display: inline-block; white-space: nowrap;
  font-family: var(--f-mono); font-size: .62rem;
  padding: 4px 9px; border-radius: var(--r-full);
}
.reg-badge--ok   { background: rgba(147,215,192,.35); }
.reg-badge--warn { background: rgba(246,211,132,.45); }
.reg-badge--todo { background: rgba(239,169,194,.35); }

@media (prefers-reduced-motion: reduce) {
  .ph-spot { transition: none; }
}

/* --------------------------------------------------------------------------
   22. Page IA — table de tri des documents
   -------------------------------------------------------------------------- */

.triage { display: grid; gap: 28px; }
@media (min-width: 980px) { .triage { grid-template-columns: 1fr 1fr; align-items: start; } }

/* Compteurs de progression */
.tri-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 18px;
}
.tri-step {
  font-family: var(--f-mono); font-size: .68rem;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(248,247,252,.55);
}
.tri-pips { display: flex; gap: 5px; }
.tri-pips i {
  width: 8px; height: 8px; border-radius: var(--r-full);
  background: rgba(255,255,255,.2); display: block;
  transition: background-color .3s;
}
.tri-pips i.ok  { background: #4CAF8F; }
.tri-pips i.ko  { background: #D4547E; }
.tri-pips i.now { background: var(--brume); }

/* La fiche document */
.doc {
  background: linear-gradient(165deg, #FBFAF6, #F0EDE5);
  color: var(--nuit);
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 16px 36px -20px rgba(0,0,0,.5);
  position: relative;
  overflow: hidden;
}
.doc::after {
  /* coin corné, pour l'effet feuille */
  content: '';
  position: absolute; top: 0; right: 0;
  width: 34px; height: 34px;
  background: linear-gradient(225deg, rgba(43,45,74,.14) 50%, transparent 50%);
}
.doc-kind {
  font-family: var(--f-mono); font-size: .62rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(69,72,104,.55);
  padding-bottom: 12px; margin-bottom: 14px;
  border-bottom: 1.5px dashed rgba(43,45,74,.18);
}
.doc-title {
  font-family: var(--f-display); font-weight: 700;
  font-size: 1.35rem; line-height: 1.2;
  margin-bottom: 10px;
}
.doc-desc { font-size: .92rem; line-height: 1.55; color: var(--nuit-2); }

/* Les trois plateaux */
.tri-choices { display: grid; gap: 8px; margin-top: 20px; }
.tri-btn {
  appearance: none; -webkit-appearance: none;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.18);
  color: var(--brume);
  border-radius: 12px;
  padding: 13px 16px;
  cursor: pointer; text-align: left;
  display: flex; align-items: center; gap: 12px;
  font-weight: 600; font-size: .95rem;
  transition: border-color .2s, background-color .2s, transform .2s;
}
.tri-btn:hover:not(:disabled) { border-color: var(--menthe); transform: translateX(3px); }
.tri-btn:disabled { cursor: default; opacity: .45; }
.tri-btn .lvl {
  flex-shrink: 0; width: 12px; height: 12px;
  border-radius: 3px;
}
.tri-btn .lvl--ok   { background: #4CAF8F; }
.tri-btn .lvl--cond { background: #D9A22B; }
.tri-btn .lvl--no   { background: #D4547E; }
.tri-btn.picked-right { background: rgba(76,175,143,.2); border-color: #4CAF8F; opacity: 1; }
.tri-btn.picked-wrong { background: rgba(212,84,126,.2); border-color: #D4547E; opacity: 1; }
.tri-btn.is-answer   { border-color: #4CAF8F; opacity: 1; }

/* Retour pédagogique */
.tri-fb {
  border-radius: var(--r-md);
  padding: 20px;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.06);
}
.tri-fb .verdict-line {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--f-mono); font-size: .68rem;
  letter-spacing: .1em; text-transform: uppercase;
  margin-bottom: 10px;
}
.tri-fb .verdict-line .tick {
  width: 20px; height: 20px; border-radius: var(--r-full);
  display: grid; place-items: center;
  font-size: .68rem; color: #fff;
}
.tri-fb .tick--ok { background: #4CAF8F; }
.tri-fb .tick--ko { background: #D4547E; }

.tri-empty {
  border: 1px dashed rgba(255,255,255,.22);
  border-radius: var(--r-md);
  padding: 24px; text-align: center;
  color: rgba(248,247,252,.55); font-size: .92rem;
}

/* Récapitulatif final */
.tri-recap li {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 11px 0;
  border-top: 1px solid rgba(255,255,255,.1);
  font-size: .9rem; line-height: 1.45;
}
.tri-recap li:last-child { border-bottom: 1px solid rgba(255,255,255,.1); }
.tri-recap .chip-lvl {
  flex-shrink: 0;
  font-family: var(--f-mono); font-size: .58rem;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 4px;
  color: #fff; margin-top: 1px; min-width: 74px; text-align: center;
}
.chip-lvl--ok   { background: #3E9C7E; }
.chip-lvl--cond { background: #C0901F; }
.chip-lvl--no   { background: #BC4A6E; }

@media (prefers-reduced-motion: reduce) {
  .tri-btn:hover:not(:disabled) { transform: none; }
}

/* --------------------------------------------------------------------------
   23. Page Cabinet — organigramme à deux lectures
   -------------------------------------------------------------------------- */

/* Interrupteur de vue */
.vue-switch {
  display: inline-flex;
  background: var(--lin);
  border: 1px solid var(--ligne);
  border-radius: var(--r-full);
  padding: 4px;
  gap: 4px;
}
.vue-btn {
  appearance: none; -webkit-appearance: none;
  background: transparent; border: 0;
  color: var(--nuit-2);
  font-weight: 600; font-size: .92rem;
  padding: 9px 20px;
  border-radius: var(--r-full);
  cursor: pointer;
  transition: background-color .25s, color .25s;
}
.vue-btn[aria-pressed="true"] {
  background: var(--nuit); color: var(--brume);
}

/* Scène de l'organigramme */
.org {
  position: relative;
  padding: 32px 0 8px;
}
.org-view { display: none; }
.org-view.active { display: block; animation: orgIn .45s cubic-bezier(.2,.7,.3,1); }
@keyframes orgIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

.org-row {
  display: flex; justify-content: center;
  gap: 16px; flex-wrap: wrap;
}
.org-node {
  background: var(--blanc);
  border: 1px solid var(--ligne);
  border-radius: var(--r-md);
  padding: 14px 22px;
  text-align: center;
  min-width: 150px;
}
.org-node .lbl {
  font-family: var(--f-mono); font-size: .6rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(69,72,104,.55);
  display: block; margin-bottom: 3px;
}
.org-node .nm {
  font-family: var(--f-display); font-weight: 700;
  font-size: 1.05rem;
}
.org-node--you { background: var(--nuit); color: var(--brume); border-color: var(--nuit); }
.org-node--you .lbl { color: rgba(248,247,252,.55); }
.org-node--hub { border-color: var(--iris); border-width: 2px; background: rgba(108,99,192,.07); }
.org-node--sph { border-color: var(--azur); border-width: 2px; background: rgba(163,189,242,.14); }
.org-node--sf  { border-color: var(--menthe); border-width: 2px; background: rgba(147,215,192,.16); }

/* Connecteurs verticaux */
.org-link {
  width: 2px; height: 26px;
  background: var(--ligne);
  margin: 0 auto;
}
.org-fork {
  height: 26px; position: relative;
  max-width: 420px; margin: 0 auto;
}
.org-fork::before {
  content: ''; position: absolute; top: 0; left: 50%;
  width: 2px; height: 12px; background: var(--ligne);
}
.org-fork::after {
  content: ''; position: absolute; top: 12px;
  left: 25%; right: 25%; height: 2px; background: var(--ligne);
}
.org-fork .drop {
  position: absolute; top: 12px; width: 2px; height: 14px;
  background: var(--ligne);
}
.org-fork .drop--l { left: 25%; }
.org-fork .drop--r { right: 25%; }

/* Services rattachés */
.org-svc {
  display: flex; flex-wrap: wrap; gap: 6px;
  justify-content: center; margin-top: 12px;
}
.org-svc span {
  font-family: var(--f-mono); font-size: .66rem;
  background: var(--lin); border-radius: var(--r-full);
  padding: 5px 11px;
}

/* Cloison d'indépendance */
.org-wall {
  max-width: 420px; margin: 20px auto 0;
  border-top: 2px dashed var(--iris);
  padding-top: 10px;
  text-align: center;
  font-family: var(--f-mono); font-size: .64rem;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--iris);
}

/* Colonnes d'entités */
.org-cols {
  display: grid; gap: 16px;
  max-width: 560px; margin: 0 auto;
}
@media (min-width: 620px) { .org-cols { grid-template-columns: 1fr 1fr; } }

/* Frise chronologique */
.frise { position: relative; padding-left: 26px; }
.frise::before {
  content: ''; position: absolute; left: 5px; top: 6px; bottom: 6px;
  width: 2px; background: var(--ligne);
}
.frise-item { position: relative; padding-bottom: 26px; }
.frise-item:last-child { padding-bottom: 0; }
.frise-item::before {
  content: ''; position: absolute; left: -26px; top: 5px;
  width: 12px; height: 12px; border-radius: var(--r-full);
  background: var(--blanc);
  border: 2.5px solid var(--iris);
}
.frise-an {
  font-family: var(--f-mono); font-size: .68rem;
  letter-spacing: .1em; color: var(--iris);
  display: block; margin-bottom: 3px;
}

/* --------------------------------------------------------------------------
   24. Page Équipe — organigramme par pôles & recrutement
   -------------------------------------------------------------------------- */

/* Bandeau de direction */
.dir-card {
  background: var(--nuit); color: var(--brume);
  border-radius: var(--r-lg);
  padding: 26px 28px;
  display: flex; align-items: center; gap: 20px;
  flex-wrap: wrap;
}
.dir-card .av {
  width: 58px; height: 58px; flex-shrink: 0;
  border-radius: var(--r-full);
  background: linear-gradient(150deg, var(--iris), var(--nuit));
  border: 2px solid rgba(255,255,255,.25);
  display: grid; place-items: center;
  font-family: var(--f-display); font-weight: 700; font-size: 1.3rem;
}

/* Pôles */
.poles { display: grid; gap: 20px; }
@media (min-width: 760px)  { .poles { grid-template-columns: 1fr 1fr; } }

.pole--span { grid-column: 1 / -1; }
.pole-ia-grid { display: grid; gap: 22px; margin-top: 16px; }
@media (min-width: 820px) { .pole-ia-grid { grid-template-columns: 1.15fr 1fr; align-items: start; } }

.pole {
  background: var(--blanc);
  border: 1px solid var(--ligne);
  border-radius: var(--r-lg);
  padding: 24px;
  position: relative;
}
.pole--sph { border-top: 3px solid var(--azur); }
.pole--sf  { border-top: 3px solid var(--menthe); }
.pole--app { border-top: 3px solid var(--rose); }
.pole--grp { border-top: 3px solid var(--soleil); }
.pole--cyb { border-top: 3px solid var(--ego); }
.pole--ia  {
  border: 1.5px dashed var(--iris);
  background: rgba(108,99,192,.05);
}

.pole-ent {
  font-family: var(--f-mono); font-size: .6rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(69,72,104,.55);
  display: block; margin-bottom: 4px;
}
.pole-nom {
  font-family: var(--f-display); font-weight: 700;
  font-size: 1.2rem; margin-bottom: 4px;
}
.pole-desc { font-size: .88rem; color: var(--nuit-2); line-height: 1.5; }

/* Membres */
.members { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.member {
  display: flex; align-items: center; gap: 9px;
  background: var(--lin);
  border-radius: var(--r-full);
  padding: 5px 14px 5px 5px;
}
.member .av {
  width: 26px; height: 26px; flex-shrink: 0;
  border-radius: var(--r-full);
  display: grid; place-items: center;
  font-family: var(--f-mono); font-size: .68rem; font-weight: 500;
  color: #fff;
}
.member .nm { font-weight: 600; font-size: .86rem; line-height: 1.1; }
.member .rl {
  font-family: var(--f-mono); font-size: .58rem;
  letter-spacing: .04em; color: rgba(69,72,104,.6);
  display: block; margin-top: 1px;
}
.av--azur   { background: #5B7FC4; }
.av--menthe { background: #3E9C7E; }
.av--rose   { background: #C05A80; }
.av--soleil { background: #B8890F; }
.av--iris   { background: var(--iris); }
.av--ego    { background: var(--ego); }

/* Mascotte en ambassadeur de pôle */
.pole-masc {
  position: absolute; right: 16px; bottom: 16px;
  height: 66px; width: auto; opacity: .9;
  pointer-events: none;
}
@media (max-width: 560px) { .pole-masc { display: none; } }

/* Valeurs */
.val-card {
  border-radius: var(--r-md);
  padding: 22px;
  border: 1px solid var(--ligne);
  background: var(--blanc);
}
.val-card .n {
  font-family: var(--f-mono); font-size: .68rem;
  letter-spacing: .12em; color: var(--iris);
  display: block; margin-bottom: 6px;
}

/* Offres / recrutement */
.job {
  border-top: 1px solid var(--ligne);
  padding: 20px 0;
  display: flex; gap: 20px; align-items: flex-start;
  flex-wrap: wrap;
}
.job:last-child { border-bottom: 1px solid var(--ligne); }
.job .meta { flex: 1; min-width: 220px; }
.job .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

/* --------------------------------------------------------------------------
   25. Bandeau de direction à deux — complémentarité en parité
   -------------------------------------------------------------------------- */

.duo {
  display: grid; gap: 22px;
  align-items: center;
}
@media (min-width: 780px) {
  .duo { grid-template-columns: 1fr auto 1fr; gap: 28px; }
}

.duo-person {
  display: flex; align-items: center; gap: 16px;
}
.duo-person .av {
  width: 60px; height: 60px; flex-shrink: 0;
  border-radius: var(--r-full);
  display: grid; place-items: center;
  font-family: var(--f-display); font-weight: 700; font-size: 1.35rem;
  border: 2px solid rgba(255,255,255,.28);
}
.duo-person .av--tech { background: linear-gradient(150deg, #6C63C0, #2B2D4A); }
.duo-person .av--gest { background: linear-gradient(150deg, #3E9C7E, #2B2D4A); }
.duo-person .nm {
  font-family: var(--f-display); font-weight: 700;
  font-size: 1.4rem; line-height: 1.1;
}
.duo-person .fn {
  font-family: var(--f-mono); font-size: .62rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(248,247,252,.55);
  display: block; margin-bottom: 3px;
}
.duo-person .rl {
  font-size: .88rem; color: rgba(248,247,252,.78);
  line-height: 1.4; margin-top: 4px;
}

/* Le lien entre les deux */
.duo-sep {
  display: flex; align-items: center; justify-content: center;
  gap: 10px;
}
.duo-sep::before,
.duo-sep::after {
  content: ''; flex: 1; height: 1px;
  background: rgba(255,255,255,.18);
}
@media (min-width: 780px) {
  .duo-sep { flex-direction: column; align-self: stretch; }
  .duo-sep::before, .duo-sep::after { width: 1px; height: auto; flex: 1; }
}

.duo-note {
  margin-top: 24px; padding-top: 20px;
  border-top: 1px dashed rgba(255,255,255,.2);
}

/* --------------------------------------------------------------------------
   26. Page Sauvegarde — le curseur du regret
   -------------------------------------------------------------------------- */

.regret { display: grid; gap: 32px; }
@media (min-width: 980px) { .regret { grid-template-columns: 1fr 1fr; align-items: start; } }

/* Réglages */
.rg-group + .rg-group { margin-top: 26px; }
.rg-label {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; margin-bottom: 10px;
}
.rg-label .k {
  font-family: var(--f-mono); font-size: .66rem;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(248,247,252,.55);
}
.rg-label .v {
  font-family: var(--f-display); font-weight: 700;
  font-size: 1.05rem; color: var(--brume);
}

/* Curseur */
.rg-range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px;
  background: rgba(255,255,255,.16);
  border-radius: 999px; outline: none; cursor: pointer;
}
.rg-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 999px;
  background: var(--brume);
  border: 3px solid var(--iris);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.rg-range::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 999px;
  background: var(--brume);
  border: 3px solid var(--iris);
  cursor: pointer;
}
.rg-ticks {
  display: flex; justify-content: space-between;
  margin-top: 7px;
  font-family: var(--f-mono); font-size: .56rem;
  letter-spacing: .03em;
  color: rgba(248,247,252,.4);
}

/* La frise de l'incident */
.tl {
  position: relative;
  height: 96px;
  border-radius: var(--r-md);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.14);
  overflow: hidden;
  margin-bottom: 18px;
}
.tl-zone {
  position: absolute; top: 0; bottom: 0;
  transition: width .45s cubic-bezier(.2,.7,.3,1);
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 8px;
}
.tl-lost {
  right: 50%;
  background: repeating-linear-gradient(-45deg,
    rgba(212,84,126,.42) 0 6px, rgba(212,84,126,.24) 6px 12px);
  border-right: 0;
}
.tl-down {
  left: 50%;
  background: repeating-linear-gradient(45deg,
    rgba(248,247,252,.16) 0 6px, rgba(248,247,252,.07) 6px 12px);
}
.tl-zone .zl {
  font-family: var(--f-mono); font-size: .56rem;
  letter-spacing: .08em; text-transform: uppercase;
  color: rgba(248,247,252,.85);
  white-space: nowrap;
}
.tl-now {
  position: absolute; left: 50%; top: 0; bottom: 0;
  width: 2px; background: var(--rose);
  transform: translateX(-1px);
  z-index: 2;
}
.tl-now::after {
  content: 'INCIDENT';
  position: absolute; top: 8px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--f-mono); font-size: .55rem;
  letter-spacing: .12em;
  color: var(--rose);
  background: var(--nuit);
  padding: 2px 7px; border-radius: 3px;
  white-space: nowrap;
}
.tl-axis {
  position: absolute; left: 0; right: 0; top: 50%;
  height: 1px; background: rgba(255,255,255,.18);
}

/* Bilan chiffré */
.rg-out {
  border-radius: var(--r-md);
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.06);
  padding: 22px;
}
.rg-kpis { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
.rg-kpi {
  border-top: 2px solid rgba(255,255,255,.2);
  padding-top: 12px;
}
.rg-kpi--lost { border-color: #D4547E; }
.rg-kpi--down { border-color: rgba(248,247,252,.5); }
.rg-kpi .n {
  font-family: var(--f-display); font-weight: 700;
  font-size: 1.7rem; line-height: 1.05;
}
.rg-kpi .u {
  font-family: var(--f-mono); font-size: .58rem;
  letter-spacing: .08em; text-transform: uppercase;
  color: rgba(248,247,252,.55);
  display: block; margin-top: 4px;
}
.rg-total {
  margin-top: 18px; padding-top: 16px;
  border-top: 1px dashed rgba(255,255,255,.22);
}
.rg-total .big {
  font-family: var(--f-display); font-weight: 700;
  font-size: 2rem; line-height: 1.05;
  color: var(--brume);
}

/* Règle 3-2-1-1-0 */
.rule321 { display: grid; gap: 12px; }
@media (min-width: 700px) { .rule321 { grid-template-columns: repeat(5, 1fr); } }
.rule-cell {
  border: 1px solid var(--ligne);
  border-radius: var(--r-md);
  background: var(--blanc);
  padding: 20px 16px;
  text-align: center;
}
.rule-cell .chiffre {
  font-family: var(--f-display); font-weight: 700;
  font-size: 2.4rem; line-height: 1;
  display: block; margin-bottom: 8px;
}
.rule-cell:nth-child(1) .chiffre { color: #3E9C7E; }
.rule-cell:nth-child(2) .chiffre { color: #5B7FC4; }
.rule-cell:nth-child(3) .chiffre { color: #C05A80; }
.rule-cell:nth-child(4) .chiffre { color: #B8890F; }
.rule-cell:nth-child(5) .chiffre { color: var(--iris); }
.rule-cell .t {
  font-weight: 600; font-size: .92rem;
  display: block; margin-bottom: 5px;
}
.rule-cell .d { font-size: .8rem; color: var(--nuit-2); line-height: 1.45; }

@media (prefers-reduced-motion: reduce) {
  .tl-zone { transition: none; }
}

/* --------------------------------------------------------------------------
   29. Page Infogérance — vider la tête
   -------------------------------------------------------------------------- */

.oubli-wrap { display: grid; gap: 32px; }
@media (min-width: 900px) { .oubli-wrap { grid-template-columns: 1fr 300px; align-items: start; } }

.oubli-list { display: grid; gap: 4px; }

.oubli-item {
  appearance: none; -webkit-appearance: none;
  background: transparent;
  border: 0; border-bottom: 1px solid var(--ligne);
  width: 100%; text-align: left;
  padding: 13px 4px;
  cursor: pointer;
  display: flex; align-items: flex-start; gap: 13px;
  font-size: .96rem; line-height: 1.4;
  color: var(--nuit);
  font-family: inherit;
  transition: color .4s ease, opacity .4s ease;
}
.oubli-item:hover:not(.is-done) { color: var(--iris); }

.oubli-mark {
  flex-shrink: 0; width: 21px; height: 21px; margin-top: 1px;
  border-radius: var(--r-full);
  border: 2px solid var(--ligne);
  display: grid; place-items: center;
  transition: background-color .35s ease, border-color .35s ease, transform .35s cubic-bezier(.2,1.6,.4,1);
}
.oubli-mark svg { opacity: 0; transition: opacity .3s ease .12s; }
.oubli-item:hover:not(.is-done) .oubli-mark { border-color: var(--iris); }

/* Le texte, avec sa barre qui se trace */
.oubli-txt { position: relative; display: inline-block; }
.oubli-txt::after {
  content: ''; position: absolute;
  left: -2px; top: 52%;
  height: 2px; width: 0;
  background: currentColor;
  border-radius: 2px;
  transition: width .45s cubic-bezier(.3,.7,.2,1);
}

/* État rayé */
.oubli-item.is-done { color: rgba(69,72,104,.42); cursor: default; }
.oubli-item.is-done .oubli-mark {
  background: var(--menthe); border-color: var(--menthe);
  transform: scale(1.08);
}
.oubli-item.is-done .oubli-mark svg { opacity: 1; }
.oubli-item.is-done .oubli-txt::after { width: calc(100% + 4px); }

/* Compteur */
.oubli-score {
  background: var(--nuit); color: var(--brume);
  border-radius: var(--r-lg);
  padding: 26px;
  text-align: center;
  position: sticky; top: 96px;
}
.oubli-score .big {
  font-family: var(--f-display); font-weight: 700;
  font-size: 3.4rem; line-height: 1;
  display: block;
}
.oubli-score .lbl {
  font-family: var(--f-mono); font-size: .6rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(248,247,252,.55);
  display: block; margin-top: 6px;
}
.oubli-score .msg {
  font-size: .88rem; line-height: 1.5;
  color: rgba(248,247,252,.8);
  margin-top: 16px; min-height: 60px;
}
.oubli-btn {
  appearance: none; -webkit-appearance: none;
  width: 100%;
  background: var(--menthe); color: var(--nuit);
  border: 0; border-radius: var(--r-full);
  padding: 13px 20px;
  font-weight: 600; font-size: .95rem;
  font-family: inherit;
  cursor: pointer; margin-top: 16px;
  transition: background-color .25s, transform .25s;
}
.oubli-btn:hover:not(:disabled) { background: var(--brume); transform: translateY(-1px); }
.oubli-btn:disabled { opacity: .45; cursor: default; transform: none; }

@media (max-width: 899px) {
  .oubli-score { position: static; }
}
@media (prefers-reduced-motion: reduce) {
  .oubli-item, .oubli-mark, .oubli-txt::after { transition: none; }
  .oubli-btn:hover:not(:disabled) { transform: none; }
}

/* --------------------------------------------------------------------------
   30. Page Infogérance — le référentiel : moyeu et rayons
   -------------------------------------------------------------------------- */

.hub-wrap { position: relative; }
.hub-core {
  max-width: 260px; margin: 0 auto 6px;
  background: var(--nuit); color: var(--brume);
  border-radius: var(--r-md);
  padding: 18px; text-align: center;
}
.hub-core .t { font-family: var(--f-display); font-weight: 700; font-size: 1.15rem; }
.hub-core .s {
  font-family: var(--f-mono); font-size: .58rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(248,247,252,.55); display: block; margin-top: 3px;
}
.spokes { display: grid; gap: 10px; margin-top: 18px; }
@media (min-width: 640px)  { .spokes { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .spokes { grid-template-columns: repeat(3, 1fr); } }
.spoke {
  border: 1px solid var(--ligne);
  border-radius: var(--r-sm);
  background: var(--blanc);
  padding: 14px 16px;
}
.spoke .n {
  font-weight: 600; font-size: .92rem;
  display: block; margin-bottom: 3px;
}
.spoke .d { font-size: .8rem; color: var(--nuit-2); line-height: 1.45; }
.spoke--meth { border-color: var(--iris); background: rgba(108,99,192,.07); }

/* --------------------------------------------------------------------------
   31. Page Infogérance — quand ça sonne
   -------------------------------------------------------------------------- */

.ring-wrap { display: grid; gap: 28px; }
@media (min-width: 900px) { .ring-wrap { grid-template-columns: 270px 1fr; align-items: start; } }

/* La sonnerie */
.ring-call {
  background: var(--nuit); color: var(--brume);
  border-radius: var(--r-lg);
  padding: 26px 24px;
  text-align: center;
}
.ring-icon {
  width: 62px; height: 62px; margin: 0 auto 14px;
  border-radius: var(--r-full);
  background: rgba(147,215,192,.22);
  border: 2px solid var(--menthe);
  display: grid; place-items: center;
}
.ring-icon.is-ringing { animation: ringShake 1s ease-in-out infinite; }
@keyframes ringShake {
  0%, 100% { transform: rotate(0) }
  10% { transform: rotate(-12deg) } 20% { transform: rotate(12deg) }
  30% { transform: rotate(-9deg) }  40% { transform: rotate(9deg) }
  50% { transform: rotate(0) }
}
.ring-call .who {
  font-family: var(--f-display); font-weight: 700;
  font-size: 1.3rem; line-height: 1.15;
}
.ring-call .meta {
  font-family: var(--f-mono); font-size: .6rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(248,247,252,.55);
  display: block; margin-top: 6px;
}
.ring-btn {
  appearance: none; -webkit-appearance: none;
  width: 100%; margin-top: 18px;
  background: var(--menthe); color: var(--nuit);
  border: 0; border-radius: var(--r-full);
  padding: 11px 18px;
  font-family: inherit; font-weight: 600; font-size: .92rem;
  cursor: pointer;
  transition: background-color .25s;
}
.ring-btn:hover { background: var(--brume); }

/* La fiche qui se remplit */
.pop {
  background: var(--blanc);
  border: 1px solid var(--ligne);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 18px 40px -26px rgba(43,45,74,.4);
}
.pop-head {
  background: var(--lin);
  border-bottom: 1px solid var(--ligne);
  padding: 13px 20px;
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; flex-wrap: wrap;
  font-family: var(--f-mono); font-size: .6rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(69,72,104,.6);
}
.pop-body { padding: 6px 20px 18px; min-height: 300px; }

.pop-row {
  display: flex; gap: 16px; align-items: baseline;
  padding: 11px 0;
  border-bottom: 1px solid var(--ligne);
  opacity: 0;
  animation: popIn .45s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes popIn {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: none; }
}
.pop-row:last-child { border-bottom: 0; }
.pop-row .k {
  flex-shrink: 0; width: 118px;
  font-family: var(--f-mono); font-size: .6rem;
  letter-spacing: .08em; text-transform: uppercase;
  color: rgba(69,72,104,.55);
}
.pop-row .v { font-size: .93rem; line-height: 1.45; }
.pop-row--human { background: rgba(147,215,192,.14); border-radius: var(--r-sm); padding: 11px 12px; margin: 4px -12px; border-bottom: 0; }
.pop-row--human .k { color: #2E7D63; }
@media (max-width: 560px) {
  .pop-row { flex-direction: column; gap: 3px; }
  .pop-row .k { width: auto; }
}

/* La chute */
.pop-foot {
  border-top: 1px dashed var(--ligne);
  padding: 16px 20px 4px;
  font-size: .92rem; line-height: 1.55;
  color: var(--nuit-2);
  opacity: 0;
  animation: popIn .5s ease forwards;
}

/* Principes de support */
.sup-grid { display: grid; gap: 14px; }
@media (min-width: 700px) { .sup-grid { grid-template-columns: repeat(2, 1fr); } }
.sup-item {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 16px 0;
  border-top: 1px solid var(--ligne);
}
.sup-item .ic {
  flex-shrink: 0; width: 34px; height: 34px;
  border-radius: 10px;
  display: grid; place-items: center;
  background: rgba(163,189,242,.35);
}
.sup-item .t { font-weight: 600; font-size: .98rem; display: block; margin-bottom: 3px; }
.sup-item .d { font-size: .87rem; color: var(--nuit-2); line-height: 1.5; }

@media (prefers-reduced-motion: reduce) {
  .ring-icon.is-ringing { animation: none; }
  .pop-row, .pop-foot { animation: none; opacity: 1; }
}

/* --------------------------------------------------------------------------
   32. Bloc statistique sourcé
   -------------------------------------------------------------------------- */

.stat-pair { display: grid; gap: 18px; }
@media (min-width: 700px) { .stat-pair { grid-template-columns: 1fr 1fr; } }

.stat-card {
  border-radius: var(--r-lg);
  padding: 26px;
  border: 1px solid var(--ligne);
  background: var(--blanc);
}
.stat-card--alert {
  background: rgba(239,169,194,.16);
  border-color: rgba(212,84,126,.4);
}
.stat-card--calm {
  background: rgba(147,215,192,.18);
  border-color: rgba(147,215,192,.5);
}
.stat-card .chiffre {
  font-family: var(--f-display); font-weight: 700;
  font-size: 3.4rem; line-height: 1;
  display: block; margin-bottom: 10px;
}
.stat-card--alert .chiffre { color: #B02F58; }
.stat-card--calm .chiffre { color: #2E7D63; }
.stat-card .quoi {
  font-size: 1rem; line-height: 1.5;
  color: var(--nuit);
  font-weight: 600;
}

.stat-src {
  margin-top: 18px; padding-top: 14px;
  border-top: 1px solid var(--ligne);
  font-family: var(--f-mono); font-size: .66rem;
  line-height: 1.6; letter-spacing: .02em;
  color: rgba(69,72,104,.65);
}
.stat-src a { color: var(--iris); text-decoration: underline; }
.stat-src a:hover { text-decoration: none; }

.stat-lesson {
  margin-top: 20px;
  background: var(--nuit); color: var(--brume);
  border-radius: var(--r-lg);
  padding: 24px 26px;
}
.stat-lesson .t {
  font-family: var(--f-display); font-weight: 700;
  font-size: 1.25rem; line-height: 1.3; margin-bottom: 8px;
}
.stat-lesson p { font-size: .95rem; line-height: 1.6; color: rgba(248,247,252,.82); }

/* --------------------------------------------------------------------------
   33. Page Cyber — méthode AINSI, main courante, artefacts
   -------------------------------------------------------------------------- */

/* Les cinq lettres */
.ainsi-row {
  display: grid; gap: 8px;
  grid-template-columns: repeat(5, 1fr);
}
@media (max-width: 600px) { .ainsi-row { grid-template-columns: repeat(5, 1fr); gap: 5px; } }

.ainsi-cell {
  appearance: none; -webkit-appearance: none;
  background: var(--blanc);
  border: 1px solid var(--ligne);
  border-radius: var(--r-md);
  padding: 18px 10px 14px;
  cursor: pointer; text-align: center;
  font-family: inherit;
  transition: border-color .25s, background-color .25s, transform .25s;
}
.ainsi-cell:hover { transform: translateY(-3px); border-color: var(--iris); }
.ainsi-cell .lettre {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(2.1rem, 7vw, 3.2rem);
  line-height: 1; display: block;
  color: var(--nuit);
  transition: color .25s;
}
.ainsi-cell .verbe {
  font-weight: 600; font-size: .82rem;
  display: block; margin-top: 8px;
  color: var(--nuit-2);
}
.ainsi-cell .heure {
  font-family: var(--f-mono); font-size: .55rem;
  letter-spacing: .08em;
  display: block; margin-top: 4px;
  color: rgba(69,72,104,.5);
}
@media (max-width: 600px) {
  .ainsi-cell { padding: 12px 4px 10px; }
  .ainsi-cell .verbe { font-size: .62rem; }
  .ainsi-cell .heure { display: none; }
}

.ainsi-cell[aria-pressed="true"] {
  background: var(--nuit); border-color: var(--nuit);
}
.ainsi-cell[aria-pressed="true"] .lettre { color: var(--menthe); }
.ainsi-cell[aria-pressed="true"] .verbe  { color: var(--brume); }
.ainsi-cell[aria-pressed="true"] .heure  { color: rgba(248,247,252,.5); }

/* Piste horizontale reliant les lettres */
.ainsi-track {
  height: 1px; background: var(--ligne);
  margin: 0 34px 10px;
}

/* Panneau de détail */
.ainsi-panel {
  background: var(--blanc);
  border: 1px solid var(--ligne);
  border-radius: var(--r-lg);
  padding: 26px;
  margin-top: 14px;
  min-height: 210px;
}
@media (min-width: 768px) { .ainsi-panel { padding: 32px; } }
.ainsi-panel .fenetre {
  font-family: var(--f-mono); font-size: .62rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--iris); display: block; margin-bottom: 6px;
}
.ainsi-panel .titre {
  font-family: var(--f-display); font-weight: 700;
  font-size: 1.4rem; line-height: 1.2; margin-bottom: 10px;
}
.ainsi-grid { display: grid; gap: 24px; margin-top: 20px; }
@media (min-width: 760px) { .ainsi-grid { grid-template-columns: 1fr 1fr; } }
.ainsi-col .k {
  font-family: var(--f-mono); font-size: .6rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(69,72,104,.55);
  display: block; margin-bottom: 8px;
}
.ainsi-col li {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 7px 0; font-size: .9rem; line-height: 1.45;
  color: var(--nuit-2);
}
.ainsi-col li .p { color: var(--iris); font-weight: 700; flex-shrink: 0; }

/* La main courante */
.courante {
  background: linear-gradient(168deg, #FBFAF6, #F1EEE6);
  border-radius: 12px;
  padding: 0 0 20px;
  box-shadow: 0 18px 42px -24px rgba(43,45,74,.45);
  overflow: hidden;
}
.courante-head {
  padding: 14px 22px;
  border-bottom: 1.5px dashed rgba(43,45,74,.2);
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-family: var(--f-mono); font-size: .6rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(43,45,74,.55);
}
.log-line {
  display: grid; grid-template-columns: 62px 1fr;
  gap: 14px; align-items: baseline;
  padding: 10px 22px;
  border-bottom: 1px solid rgba(43,45,74,.08);
  font-size: .88rem; line-height: 1.5;
  color: var(--nuit);
}
.log-line:last-child { border-bottom: 0; }
.log-line .h {
  font-family: var(--f-mono); font-size: .68rem;
  color: var(--iris); font-weight: 500;
}
.log-line .who {
  font-family: var(--f-mono); font-size: .58rem;
  letter-spacing: .05em; text-transform: uppercase;
  color: rgba(43,45,74,.5);
  display: block; margin-top: 2px;
}
.log-line--key { background: rgba(147,215,192,.22); }

/* Artefacts examinés */
.art-grid { display: grid; gap: 10px; }
@media (min-width: 640px)  { .art-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .art-grid { grid-template-columns: repeat(3, 1fr); } }
.art-item {
  border: 1px solid var(--ligne);
  border-left: 3px solid var(--azur);
  border-radius: var(--r-sm);
  background: var(--blanc);
  padding: 14px 16px;
}
.art-item .n {
  font-weight: 600; font-size: .9rem;
  display: block; margin-bottom: 3px;
}
.art-item .d { font-size: .8rem; color: var(--nuit-2); line-height: 1.45; }
.art-item--persist { border-left-color: var(--rose); }

@media (prefers-reduced-motion: reduce) {
  .ainsi-cell:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   35. Labels de maturité — configurateur, médailles, vérification
   -------------------------------------------------------------------------- */

/* Couleurs de médaille — distinctes des couleurs des 4 routes */
:root {
  --bronze: #B4783F;
  --bronze-d: #7A4F26;
  --argent: #9BA3AC;
  --argent-d: #6B7178;
  --or:     #D4AF37;
  --or-d:   #8F6E13;
}

/* Sélecteurs du configurateur */
.lab-switch { display: inline-flex; background: var(--lin); border: 1px solid var(--ligne); border-radius: var(--r-full); padding: 4px; gap: 4px; }
.lab-switch button {
  appearance: none; -webkit-appearance: none; background: transparent; border: 0;
  color: var(--nuit-2); font-weight: 600; font-size: .9rem; padding: 9px 18px;
  border-radius: var(--r-full); cursor: pointer; transition: background-color .25s, color .25s;
}
.lab-switch button[aria-pressed="true"] { background: var(--nuit); color: var(--brume); }

.tier-switch { display: flex; gap: 8px; flex-wrap: wrap; }
.tier-btn {
  appearance: none; -webkit-appearance: none;
  border: 2px solid var(--ligne); background: var(--blanc);
  border-radius: var(--r-md); padding: 10px 18px;
  font-weight: 700; font-size: .92rem; cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  transition: border-color .25s, transform .2s, background-color .25s;
}
.tier-btn .dot { width: 10px; height: 10px; border-radius: 999px; }
.tier-btn:hover { transform: translateY(-2px); }
.tier-btn[aria-pressed="true"] { color: #fff; }
.tier-btn[data-tier="bronze"] .dot { background: var(--bronze); }
.tier-btn[data-tier="argent"] .dot { background: var(--argent); }
.tier-btn[data-tier="or"]     .dot { background: var(--or); }
.tier-btn[data-tier="bronze"][aria-pressed="true"] { background: var(--bronze); border-color: var(--bronze); }
.tier-btn[data-tier="argent"][aria-pressed="true"] { background: var(--argent-d); border-color: var(--argent-d); }
.tier-btn[data-tier="or"][aria-pressed="true"]     { background: var(--or-d); border-color: var(--or-d); }

/* Scène du configurateur */
.lab-stage {
  display: grid; gap: 32px;
  background: var(--nuit); color: var(--brume);
  border-radius: var(--r-lg); padding: 28px;
  position: relative; overflow: hidden;
}
@media (min-width: 860px) { .lab-stage { grid-template-columns: 280px 1fr; align-items: center; } }

.medal-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.medal-svg { filter: drop-shadow(0 14px 30px rgba(0,0,0,.4)); animation: medalIn .5s cubic-bezier(.2,1.4,.4,1); }
@keyframes medalIn { from { transform: scale(.7) rotate(-8deg); opacity:0 } to { transform: scale(1) rotate(0); opacity:1 } }
.medal-code {
  font-family: var(--f-mono); font-size: .72rem; letter-spacing: .08em;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--r-full); padding: 6px 14px; color: rgba(248,247,252,.85);
}

.lab-detail .type { font-family: var(--f-mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(248,247,252,.5); }
.lab-detail .titre { font-family: var(--f-display); font-weight: 700; font-size: 1.5rem; margin: 6px 0 12px; }
.lab-req { display: grid; gap: 8px; margin-top: 6px; }
.lab-req li {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: .92rem; line-height: 1.45; color: rgba(248,247,252,.82);
}
.lab-req li .c { flex-shrink: 0; width: 18px; height: 18px; border-radius: 999px; display: grid; place-items: center; font-size: .62rem; margin-top: 1px; }
.lab-req li.on .c  { background: var(--menthe); color: #14382c; }
.lab-req li.off .c { background: rgba(255,255,255,.12); color: rgba(248,247,252,.4); }
.lab-req li.off { opacity: .5; }

/* Mini carte des 4 routes, allumées selon le palier */
.mini-routes { display: flex; gap: 8px; margin-top: 16px; }
.mini-routes .r {
  flex: 1; height: 8px; border-radius: 999px;
  background: rgba(255,255,255,.14); transition: background-color .4s;
}
.mini-routes .r.on:nth-child(1) { background: var(--menthe); }
.mini-routes .r.on:nth-child(2) { background: var(--azur); }
.mini-routes .r.on:nth-child(3) { background: var(--rose); }
.mini-routes .r.on:nth-child(4) { background: var(--soleil); }
.mini-routes-lbl { font-family: var(--f-mono); font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(248,247,252,.5); margin-top: 6px; }

/* Table des critères par palier */
.crit-table { width: 100%; border-collapse: collapse; font-size: .87rem; }
.crit-table th, .crit-table td { padding: 12px 10px; text-align: left; border-bottom: 1px solid var(--ligne); }
.crit-table th { font-family: var(--f-mono); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(69,72,104,.55); }
.crit-table td.chk { text-align: center; font-size: 1rem; }
.crit-table tr td:first-child { font-weight: 600; }

/* Démo de vérification (illustrative) */
.verif-demo {
  background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--r-lg);
  padding: 26px;
}
.verif-row { display: flex; gap: 10px; flex-wrap: wrap; }
.verif-row input {
  flex: 1; min-width: 220px;
  font-family: var(--f-mono); font-size: .95rem; letter-spacing: .04em;
  border: 1.5px solid var(--ligne); border-radius: var(--r-md);
  padding: 12px 16px; background: var(--brume);
}
.verif-row input:focus { outline: none; border-color: var(--iris); }

.verif-card { margin-top: 18px; border-radius: var(--r-md); padding: 20px; display: none; }
.verif-card.show { display: block; animation: fadeUp .4s ease; }
.verif-card.ok   { background: rgba(147,215,192,.2); border: 1px solid rgba(147,215,192,.5); }
.verif-card.bad  { background: rgba(239,169,194,.2); border: 1px solid rgba(212,84,126,.4); }
.verif-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.verif-badge { font-family: var(--f-mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; font-weight: 600; }
.verif-card.ok .verif-badge  { background: #2E7D63; color: #fff; }
.verif-card.bad .verif-badge { background: #A32B54; color: #fff; }
.verif-rows { display: grid; gap: 4px; font-size: .88rem; }
.verif-rows .r { display: flex; gap: 8px; }
.verif-rows .k { font-family: var(--f-mono); font-size: .68rem; letter-spacing: .05em; text-transform: uppercase; color: rgba(69,72,104,.55); min-width: 110px; }

@media (prefers-reduced-motion: reduce) {
  .medal-svg { animation: none; }
  .verif-card.show { animation: none; }
  .tier-btn:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   36. Labels — refonte : badge borne, valorisation, kit de communication
   -------------------------------------------------------------------------- */

/* Le sélecteur passe à quatre labels : il doit pouvoir passer à la ligne */
.lab-switch { flex-wrap: wrap; }
@media (max-width: 700px) {
  .lab-switch { width: 100%; }
  .lab-switch button { flex: 1 1 45%; padding: 9px 12px; font-size: .84rem; }
}

/* Le badge borne */
.badge-svg {
  filter: drop-shadow(0 16px 34px rgba(0,0,0,.42));
  animation: badgeIn .5s cubic-bezier(.2,1.35,.4,1);
}
@keyframes badgeIn {
  from { transform: translateY(14px) scale(.9); opacity: 0 }
  to   { transform: none; opacity: 1 }
}

/* Les quatre labels en vitrine */
.lab-grid { display: grid; gap: 16px; }
@media (min-width: 620px)  { .lab-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .lab-grid { grid-template-columns: repeat(4, 1fr); } }

.lab-card {
  border: 1px solid var(--ligne);
  border-radius: var(--r-lg);
  background: var(--blanc);
  padding: 22px 20px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
  transition: transform .25s, box-shadow .25s;
}
.lab-card:hover { transform: translateY(-4px); box-shadow: var(--sh-card); }
.lab-card .mini-badge { margin-bottom: 14px; }
.lab-card .por {
  font-family: var(--f-mono); font-size: .56rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(69,72,104,.5); margin-bottom: 4px;
}
.lab-card .nm { font-family: var(--f-display); font-weight: 700; font-size: 1.12rem; }
.lab-card .sc { font-size: .8rem; line-height: 1.4; color: var(--nuit-2); margin-top: 6px; }
.lab-card .pr { font-size: .84rem; line-height: 1.5; color: var(--nuit-2); margin-top: 10px; }

/* Valorisation : ce que le label rapporte */
.val-grid { display: grid; gap: 14px; }
@media (min-width: 700px)  { .val-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .val-grid { grid-template-columns: repeat(3, 1fr); } }
.val-item {
  border-left: 3px solid var(--iris);
  padding: 4px 0 4px 16px;
}
.val-item .t { font-weight: 600; font-size: .98rem; display: block; margin-bottom: 4px; }
.val-item .d { font-size: .86rem; line-height: 1.55; color: var(--nuit-2); }

/* Bloc anti-usurpation */
.anti-grid { display: grid; gap: 14px; }
@media (min-width: 760px) { .anti-grid { grid-template-columns: 1fr 1fr; } }
.anti-item {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--r-md);
  padding: 18px 20px;
}
.anti-item .n {
  font-family: var(--f-mono); font-size: .6rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--menthe); display: block; margin-bottom: 6px;
}
.anti-item .t { font-family: var(--f-display); font-weight: 700; font-size: 1.05rem; margin-bottom: 6px; }
.anti-item .d { font-size: .88rem; line-height: 1.55; color: rgba(248,247,252,.78); }

/* Extrait de code à copier */
.snippet {
  background: #1F2138; color: #E8E6F5;
  border-radius: var(--r-md);
  padding: 18px 20px;
  font-family: var(--f-mono); font-size: .74rem;
  line-height: 1.7; overflow-x: auto;
  white-space: pre;
  border: 1px solid rgba(255,255,255,.14);
}
.snippet .tag { color: #93D7C0; background: none; padding: 0; }
.snippet .att { color: #F6D384; }
.snippet .val { color: #EFA9C2; }

/* Kit de communication */
.kit-grid { display: grid; gap: 12px; }
@media (min-width: 700px)  { .kit-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .kit-grid { grid-template-columns: repeat(3, 1fr); } }
.kit-item {
  border: 1px solid var(--ligne);
  border-radius: var(--r-sm);
  background: var(--blanc);
  padding: 15px 17px;
  display: flex; gap: 12px; align-items: flex-start;
}
.kit-item .ic {
  flex-shrink: 0; width: 30px; height: 30px;
  border-radius: 9px; display: grid; place-items: center;
  background: rgba(163,189,242,.32);
}
.kit-item .t { font-weight: 600; font-size: .92rem; display: block; margin-bottom: 3px; }
.kit-item .d { font-size: .8rem; line-height: 1.45; color: var(--nuit-2); }

/* Cycle de vie du label */
.cycle { display: grid; gap: 12px; counter-reset: cyc; }
@media (min-width: 860px) { .cycle { grid-template-columns: repeat(4, 1fr); } }
.cyc-step {
  border-top: 3px solid var(--ligne);
  padding-top: 14px;
  position: relative;
}
.cyc-step:nth-child(1) { border-color: var(--menthe); }
.cyc-step:nth-child(2) { border-color: var(--azur); }
.cyc-step:nth-child(3) { border-color: var(--rose); }
.cyc-step:nth-child(4) { border-color: var(--soleil); }
.cyc-step .q {
  font-family: var(--f-mono); font-size: .58rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(69,72,104,.5); display: block; margin-bottom: 5px;
}
.cyc-step .t { font-family: var(--f-display); font-weight: 700; font-size: 1.02rem; margin-bottom: 5px; }
.cyc-step .d { font-size: .84rem; line-height: 1.5; color: var(--nuit-2); }

@media (prefers-reduced-motion: reduce) {
  .badge-svg { animation: none; }
  .lab-card:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   37. Assistance à distance — TeamViewer QuickSupport
   -------------------------------------------------------------------------- */

.qs-band {
  background: var(--nuit); color: var(--brume);
  border-radius: var(--r-lg);
  padding: 26px 28px;
  display: grid; gap: 22px;
  position: relative; overflow: hidden;
}
@media (min-width: 760px) { .qs-band { grid-template-columns: 120px 1fr auto; align-items: center; } }

.qs-video-wrap {
  border-radius: var(--r-md);
  overflow: hidden;
  background: #fff;
  width: 100px; height: 100px;
  display: grid; place-items: center;
  margin: 0 auto;
}
.qs-video-wrap video { width: 100%; height: 100%; object-fit: cover; display: block; }

.qs-txt .eyebrow { color: var(--menthe); }
.qs-txt .t {
  font-family: var(--f-display); font-weight: 700;
  font-size: 1.15rem; line-height: 1.3; margin: 4px 0 3px;
}
.qs-txt .d { font-size: .86rem; line-height: 1.5; color: rgba(248,247,252,.72); max-width: 40rem; }

.qs-cta { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
@media (min-width: 760px) { .qs-cta { align-items: flex-end; } }
.qs-cta .note-fine {
  font-family: var(--f-mono); font-size: .62rem; color: rgba(248,247,252,.45);
}

/* --------------------------------------------------------------------------
   38. Vitrine labels sur la home
   -------------------------------------------------------------------------- */

.home-lab-grid { display: grid; gap: 14px; }
@media (min-width: 620px)  { .home-lab-grid { grid-template-columns: repeat(4, 1fr); } }
.home-lab-card {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r-md); padding: 16px;
  text-align: center; text-decoration: none; color: inherit;
  display: flex; flex-direction: column; align-items: center;
  transition: transform .25s, border-color .25s;
}
.home-lab-card:hover { transform: translateY(-3px); border-color: var(--menthe); }
.home-lab-card .nm { font-family: var(--f-display); font-weight: 700; font-size: .95rem; margin-top: 8px; }
.home-lab-card .sc { font-size: .74rem; color: rgba(248,247,252,.55); margin-top: 2px; }

/* --------------------------------------------------------------------------
   39. Repères — liste et article
   -------------------------------------------------------------------------- */

/* Vignettes de la liste */
.rep-grid { display: grid; gap: 20px; }
@media (min-width: 700px)  { .rep-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .rep-grid { grid-template-columns: repeat(3, 1fr); } }

.rep-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--ligne); border-radius: var(--r-lg);
  background: var(--blanc); overflow: hidden;
  text-decoration: none; color: inherit;
  transition: transform .25s, box-shadow .25s;
}
.rep-card:hover { transform: translateY(-4px); box-shadow: var(--sh-card); }
/* Vignette : image si l'article en a une, sinon bandeau coloré */
.rep-card .bande {
  aspect-ratio: 16 / 10; position: relative; overflow: hidden;
  background: var(--lin);
}
.rep-card .bande--img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .4s ease;
}
.rep-card:hover .bande--img img { transform: scale(1.04); }

/* Repli sans image : dégradé, trame de points et nom de rubrique en filigrane —
   moins plat qu'un aplat, et rien à produire côté rédaction. */
.rep-card .bande--vide {
  display: grid; align-items: end;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.55) 1px, transparent 0);
  background-size: 14px 14px;
}
.rep-card .bande--vide::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.35), rgba(255,255,255,0) 60%);
}
.rep-card .bande--vide::after {
  content: attr(data-cat); position: relative;
  padding: 0 18px 14px;
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(1.4rem, 3.4vw, 1.9rem); line-height: 1.1;
  color: rgba(255,255,255,.8);
  text-shadow: 0 1px 0 rgba(69,72,104,.12);
}
.rep-card .bande--menthe { background-color: rgba(147,215,192,.45); }
.rep-card .bande--azur   { background-color: rgba(163,189,242,.45); }
.rep-card .bande--rose   { background-color: rgba(239,169,194,.45); }
.rep-card .bande--soleil { background-color: rgba(246,211,132,.5); }
.rep-card .bande--iris   { background-color: rgba(108,99,192,.3); }
.rep-card .corps { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.rep-card .meta {
  font-family: var(--f-mono); font-size: .6rem;
  letter-spacing: .09em; text-transform: uppercase;
  color: rgba(69,72,104,.55); margin-bottom: 8px;
}
.rep-card .t {
  font-family: var(--f-display); font-weight: 700;
  font-size: 1.12rem; line-height: 1.28; margin-bottom: 8px;
}
.rep-card .r { font-size: .87rem; line-height: 1.55; color: var(--nuit-2); flex: 1; }
.rep-card .lire { margin-top: 14px; }

/* Étiquettes et barre de filtres */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: var(--r-full);
  border: 1px solid var(--ligne); background: var(--blanc);
  font-family: var(--f-mono); font-size: .68rem;
  letter-spacing: .04em; color: var(--nuit-2);
  text-decoration: none; white-space: nowrap;
  transition: border-color .2s, background .2s, color .2s;
}
a.tag:hover { border-color: var(--iris); color: var(--iris); }
.tag .n {
  font-size: .62rem; opacity: .55;
  padding-left: 6px; border-left: 1px solid var(--ligne);
}
.tag--on {
  background: var(--iris); border-color: var(--iris); color: #fff;
}
.tag--on .n { opacity: .75; border-left-color: rgba(255,255,255,.35); }
.tag--mini { padding: 3px 9px; font-size: .62rem; background: var(--lin); border-color: transparent; }

.rep-filtres { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.rep-filtre-etat {
  font-size: .87rem; color: var(--nuit-2); margin-bottom: 22px;
}
.rep-filtre-etat .link { margin-left: 6px; }
.rep-card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }

.art-tags {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin-bottom: 22px;
}
.art-tags .eyebrow { margin-right: 4px; }

/* Article : bandeau de tête */
.art-head { padding-block: 52px 34px; }
.art-meta {
  font-family: var(--f-mono); font-size: .66rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(69,72,104,.55);
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
}
.art-meta .sep { opacity: .4; }

/* Corps de l'article : typographie de lecture longue */
.art-corps { max-width: 44rem; font-size: 1.02rem; line-height: 1.75; color: var(--nuit-2); }
.art-corps > p { margin-bottom: 20px; }
.art-corps > p strong { color: var(--nuit); }
.art-corps .art-titre { color: var(--nuit); margin: 40px 0 14px; }
.art-corps .art-titre:first-child { margin-top: 0; }
.art-corps .art-liste { margin: 0 0 22px; padding-left: 0; list-style: none; counter-reset: art; }
.art-corps ul.art-liste li,
.art-corps ol.art-liste li {
  position: relative; padding-left: 30px; margin-bottom: 12px; line-height: 1.65;
}
.art-corps ul.art-liste li::before {
  content: '—'; position: absolute; left: 0; color: var(--iris); font-weight: 700;
}
.art-corps ol.art-liste li { counter-increment: art; }
.art-corps ol.art-liste li::before {
  content: counter(art); position: absolute; left: 0; top: 1px;
  width: 21px; height: 21px; border-radius: var(--r-full);
  background: var(--iris); color: #fff;
  font-family: var(--f-mono); font-size: .68rem; font-weight: 500;
  display: grid; place-items: center;
}
.art-corps .art-cite {
  border-left: 3px solid var(--iris);
  padding: 4px 0 4px 20px; margin: 0 0 22px;
  font-family: var(--f-accent); font-style: italic; font-size: 1.12rem;
  color: var(--nuit);
}
.art-corps .art-cite p { margin-bottom: 8px; }
.art-corps .art-cite p:last-child { margin-bottom: 0; }
.art-corps .art-hr {
  border: 0; border-top: 1px solid var(--ligne);
  margin: 36px 0;
}
.art-corps code.mono {
  background: var(--lin); border-radius: 4px;
  padding: 2px 6px; font-size: .88em;
}

/* Images d'article : ![alt](/chemin.jpg "Légende") */
.art-corps .art-figure { margin: 34px 0; }
.art-corps .art-figure img {
  display: block; width: 100%; height: auto;
  border-radius: var(--r-md);
  border: 1px solid var(--ligne);
  background: var(--lin);
}
.art-corps .art-figure figcaption {
  margin-top: 10px;
  font-family: var(--f-mono); font-size: .72rem;
  letter-spacing: .04em; line-height: 1.5;
  color: rgba(69,72,104,.7);
}
.art-corps img.art-img {
  max-width: 100%; height: auto;
  border-radius: var(--r-sm); vertical-align: middle;
}

/* Pied d'article */
.art-pied {
  max-width: 44rem; margin-top: 44px; padding-top: 26px;
  border-top: 1px solid var(--ligne);
}

@media (prefers-reduced-motion: reduce) {
  .rep-card:hover { transform: none; }
  .rep-card:hover .bande--img img { transform: none; }
}