/* ============================================================
   Spine · www.iamspine.com
   Feuille de style dérivée du système Signal (charte Reverall 2027).
   Trois écarts assumés : la nuit est plus profonde que celle de
   Reverall, le marine de l'offre 4 devient la couleur d'écriture,
   et l'action prend un vert profond — la couleur de ce qui est en
   service, plus lisible que l'or de Signal et que le terracotta.
   ============================================================ */

:root {
  /* Fonds */
  --papier: #F7F5F0;
  --papier-clair: #FDFCF9;
  --blanc: #FFFFFF;

  /* Encre : une nuit plus profonde et plus froide que la nuit Reverall */
  --encre: #0E2238;
  --encre-douce: #23405C;
  --fond-sombre: #0E2238;
  --fond-sombre-profond: #081726;

  /* Marine : la couleur de Spine (offre 4 chez Reverall) */
  --marine: #1B4B87;
  --marine-pale: #E2EAF5;
  --marine-filet: #889CB1;

  /* Action : un vert profond, écrit en papier plutôt qu'en encre */
  --action: #2F6B4F;
  --action-sombre: #215039;
  --action-contraste: #F7F5F0;

  /* Neutres */
  --gris-chaud: #5C6270;
  --gris-clair: #A8BACD;
  --filet: #E2DED4;

  /* Le bleu du personnage, en touche seulement */
  --bleu-mascotte: #86A8CB;

  /* Typo */
  --sans: system-ui, -apple-system, "Helvetica Neue", "Inter", "Segoe UI", Roboto, Arial, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --label: 0.74rem;
  --label-tracking: 0.12em;

  /* Grille */
  --largeur-site: 74rem;
  --largeur-lecture: 44rem;
  --gouttiere: clamp(1.1rem, 4vw, 2.5rem);

  /* Espacements */
  --esp-1: 0.5rem;
  --esp-2: 1rem;
  --esp-3: 1.6rem;
  --esp-4: 2.6rem;
  --esp-5: clamp(3.5rem, 8vw, 6.5rem);
  --esp-bande: clamp(3.25rem, 6.5vw, 5.25rem);
  --esp-bande-dense: clamp(2.5rem, 5vw, 3.5rem);
  --esp-hero: clamp(3.5rem, 7vw, 6.5rem);
  --pad-carte: clamp(1.4rem, 2.5vw, 1.75rem);
  --pad-pave: clamp(1.8rem, 4vw, 2.75rem);

  /* Rayons */
  --r-xs: 6px;
  --r-sm: 12px;
  --r-md: 22px;
  --r-lg: 34px;
  --r-pilule: 999px;

  /* Signes tracés */
  --svg-trace: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M3.5 6.4c26-3.4 62 2.6 96-1.1 24-2.6 63 1.4 97-1.6'/%3E%3Cpath d='M11 11.6c33-3 79 2.4 116-1 22-2 51 1.6 69-.6'/%3E%3C/g%3E%3C/svg%3E");
  --svg-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M4 12h14M12.5 6l6 6-6 6'/%3E%3C/svg%3E");
}

/* ============================================================
   Base
   ============================================================ */

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--encre);
  background: var(--papier);
  -webkit-font-smoothing: antialiased;
}

.site-page {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  background: var(--papier);
  transform-origin: 50% var(--face-pivot-y, 50vh);
  backface-visibility: hidden;
}

body.mode-technique .site-page { background: #07131F; }

img { max-width: 100%; height: auto; display: block; }

a { color: var(--marine); text-underline-offset: 0.16em; }
a:hover { color: var(--encre); }

:focus-visible {
  outline: 3px solid var(--marine);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

.container {
  max-width: var(--largeur-site);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

/* ============================================================
   Typographie
   ============================================================ */

h1, h2, h3 {
  margin: 0 0 var(--esp-3);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.06;
  text-wrap: balance;
}

h1 { font-size: clamp(2.1125rem, 5.13vw, 3.5125rem); }

h2 {
  font-size: clamp(1.8rem, 3.6vw, 2.7rem);
  font-weight: 750;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

h3 {
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin-bottom: var(--esp-2);
}

p { margin: 0 0 var(--esp-2); }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(1.0625rem, 2vw, 1.1875rem);
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--gris-chaud);
  max-width: 38em;
}

.prose { max-width: var(--largeur-lecture); }

.muted { color: var(--gris-chaud); }

.mono {
  font-family: var(--mono);
  font-size: var(--label);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
}

/* Chapeau de section : pastille + monospace en capitales */
.kicker {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-family: var(--mono);
  font-size: var(--label);
  font-weight: 500;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--marine);
  margin-bottom: var(--esp-3);
}

.kicker::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  margin-top: calc((1.65em - 0.5rem) / 2);
  border-radius: var(--r-pilule);
  background: var(--marine);
  flex: none;
}

/* Conviction en serif italique */
.epigraphe {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  line-height: 1.55;
  color: var(--encre);
}

/* Soulignage à main levée : un seul par section */
.trace {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}

.trace::after {
  content: "";
  position: absolute;
  left: -0.06em;
  right: -0.06em;
  bottom: -0.16em;
  height: 0.24em;
  background-color: var(--couleur-signe, var(--marine));
  -webkit-mask-image: var(--svg-trace);
  mask-image: var(--svg-trace);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* ============================================================
   Boutons
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.75rem 1.5rem;
  border: 2px solid var(--encre);
  border-radius: var(--r-pilule);
  background: transparent;
  color: var(--encre);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 650;
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.btn:hover { background: var(--encre); color: var(--papier); }
.btn:active { transform: scale(0.96); }

.btn-primaire {
  background: var(--action);
  border-color: var(--action);
  color: var(--action-contraste);
}

.btn-primaire::after {
  content: "";
  width: 1.1rem;
  height: 1.1rem;
  flex: none;
  background-color: currentColor;
  -webkit-mask-image: var(--svg-chevron);
  mask-image: var(--svg-chevron);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  transition: transform 0.18s ease;
}

.btn-primaire:hover {
  background: var(--action-sombre);
  border-color: var(--action-sombre);
  color: var(--papier);
}

.btn-primaire:hover::after { transform: translateX(0.2rem); }

.groupe-btn {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
  align-items: center;
}

/* ============================================================
   En-tête
   ============================================================ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--papier) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--filet);
}

.header-barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-2);
  min-height: 4.25rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--encre);
}

.brand-visage {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: var(--r-pilule);
  background-image: url("../../bibliotheque/mascotte/mascot-standing.webp");
  background-size: 190%;
  background-position: 50% 14%;
  flex: none;
}

.brand-mot {
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
}

.brand-mot::after {
  content: ".";
  color: var(--action);
}

.header-nav {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2vw, 1.6rem);
}

.header-nav a {
  color: var(--gris-chaud);
  font-size: 0.95rem;
  font-weight: 550;
  text-decoration: none;
}

.header-nav a:hover { color: var(--encre); }

.header-cta {
  inline-size: 10.75rem;
  justify-content: center;
  flex: none;
  white-space: nowrap;
}

.header-cta--large { inline-size: 12.75rem; }

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  flex: none;
}

.mode-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.2rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--gris-chaud);
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  cursor: pointer;
}

.mode-switch[aria-disabled="true"] { cursor: wait; }

.mode-switch-track {
  position: relative;
  width: 2.5rem;
  height: 1.35rem;
  flex: none;
  border: 1px solid var(--marine-filet);
  border-radius: var(--r-pilule);
  background: var(--papier);
}

.mode-switch-thumb {
  position: absolute;
  top: 0.16rem;
  left: 0.17rem;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  background: var(--encre);
  transition: transform 0.28s ease, background-color 0.28s ease;
}

.mode-switch[aria-pressed="true"] .mode-switch-thumb { transform: translateX(1.07rem); }
.mode-switch[aria-pressed="false"] .mode-switch-label:first-child,
.mode-switch[aria-pressed="true"] .mode-switch-label:last-child { color: var(--encre); }

body.mode-technique .site-header {
  background: color-mix(in srgb, #07131F 92%, transparent);
  border-bottom-color: #24415D;
}

body.mode-technique .site-header .brand { color: #F7F5F0; }
body.mode-technique .site-header .header-nav a { color: #A8BACD; }
body.mode-technique .site-header .header-nav a:hover { color: #F7F5F0; }

body.mode-technique .mode-switch {
  background: transparent;
  color: #7F97AD;
}

body.mode-technique .mode-switch-track { border-color: #355674; background: #07131F; }
body.mode-technique .mode-switch-thumb { background: #86A8CB; }
body.mode-technique .mode-switch[aria-pressed="true"] .mode-switch-label:last-child { color: #F7F5F0; }

body.mode-technique .header-cta {
  background: #86A8CB;
  border-color: #86A8CB;
  color: #07131F;
}

@media (max-width: 68rem) {
  .header-nav { display: none; }
}

@media (max-width: 44rem) {
  .header-cta { display: none; }
  /* Exception : un appel à l'action que l'en-tête garde sur petit écran,
     à largeur libre pour tenir à côté de la marque. */
  .header-cta--toujours {
    display: inline-flex;
    inline-size: auto;
    padding: 0.6rem 1.1rem;
    font-size: 0.9rem;
  }
  .mode-switch { gap: 0.42rem; font-size: 0.62rem; }
}

/* ============================================================
   Sections
   ============================================================ */

.section { padding-block: var(--esp-bande); }
.section-dense { padding-block: var(--esp-bande-dense); }

.section-pale { background: var(--marine-pale); }
.section-claire { background: var(--papier-clair); border-block: 1px solid var(--filet); }

.section-encre {
  background: var(--fond-sombre);
  color: var(--gris-clair);
}

.section-encre h2,
.section-encre h3,
.section-encre .epigraphe { color: var(--papier); }

.section-encre .lede { color: var(--gris-clair); }

.section-encre .kicker { color: var(--bleu-mascotte); }
.section-encre .kicker::before { background: var(--bleu-mascotte); }

.section-encre a { color: var(--bleu-mascotte); }
.section-encre a:hover { color: var(--papier); }

.entete-section { max-width: var(--largeur-lecture); margin-bottom: var(--esp-4); }

/* ============================================================
   Hero
   ============================================================ */

.hero { padding-block: var(--esp-hero); }

.hero-grille {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--esp-5);
  align-items: center;
}

.hero h1 { margin-bottom: var(--esp-3); }

.hero .lede { margin-bottom: var(--esp-4); }

.hero-scene {
  position: relative;
  display: grid;
  justify-items: center;
}

.hero-mascotte {
  width: min(100%, 20rem);
  justify-self: start;
  border-radius: var(--r-md);
}

/* La fiche d'assistant : le registre du produit, appuyé contre le personnage.
   Elle reste dans le flux — en `position: absolute` le recouvrement n'était
   pas choisi, il valait ce qui restait de la colonne, et la fiche mangeait
   la moitié de la mascotte dès que la colonne se resserrait. Ici le
   chevauchement vaut la marge négative, et rien d'autre : le visage et le
   carnet restent toujours dégagés. */
.fiche {
  position: relative;
  justify-self: end;
  width: min(17.5rem, 100%);
  margin-top: -6rem;
  margin-right: -0.5rem;
  background: var(--blanc);
  border: 1px solid var(--marine-filet);
  border-radius: var(--r-sm);
  padding: 1rem 1.15rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--encre);
  text-align: left;
  transform: rotate(1.2deg);
}

.fiche-titre {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--marine);
  margin-bottom: 0.55rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--filet);
}

.fiche dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0.15rem 0.8rem; }
.fiche dt { color: var(--gris-chaud); }
.fiche dd { margin: 0; }

.fiche-etat::before {
  content: "";
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.4rem;
  border-radius: var(--r-pilule);
  background: var(--action);
}

@media (max-width: 56rem) {
  .hero-grille { grid-template-columns: 1fr; gap: var(--esp-4); }
  .hero-scene { margin-bottom: var(--esp-3); }
}

/* ============================================================
   Grilles de cartes
   ============================================================ */

.grille-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--esp-3);
}

.grille-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--esp-5);
  align-items: center;
}

@media (max-width: 56rem) {
  .grille-3 { grid-template-columns: 1fr; }
  .grille-2 { grid-template-columns: 1fr; gap: var(--esp-4); }
}

.carte {
  background: var(--papier-clair);
  border: 1px solid color-mix(in srgb, var(--marine-filet) 45%, transparent);
  border-radius: var(--r-md);
  padding: var(--pad-carte);
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.carte:hover { border-color: var(--marine); transform: translateY(-2px); }

.carte .mono { color: var(--marine); display: block; margin-bottom: 0.7rem; }

.carte p { color: var(--gris-chaud); font-size: 0.98rem; }

/* Les douze types : l'étagère de la bibliothèque */
.types {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: var(--esp-3);
  padding: 0;
  list-style: none;
}

.types li {
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  padding: 0.38rem 0.85rem;
  border: 1px solid var(--marine-filet);
  border-radius: var(--r-pilule);
  background: var(--blanc);
  color: var(--encre);
}

.types li.type-skill {
  background: var(--marine);
  border-color: var(--marine);
  color: var(--blanc);
}

/* Le douzième n'est pas le dernier : la liste s'ouvre. */
.types li.type-ouvert {
  background: transparent;
  border-style: dashed;
  border-color: var(--action);
  color: var(--action-sombre);
}

/* Annoncé mais pas encore servi : même pastille, en creux. */
.types li.type-attente {
  background: transparent;
  border-style: dashed;
  border-color: var(--marine-filet);
  color: var(--gris-chaud);
}

/* Liste de définition sur deux colonnes */
.def-liste {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--esp-3) var(--esp-5);
  margin: 0;
}

.def-liste > div { border-top: 1px solid var(--marine-filet); padding-top: var(--esp-2); }

.def-liste dt {
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 0.35rem;
  color: var(--encre);
}

.def-liste dd { margin: 0; font-size: 0.98rem; color: var(--gris-chaud); }

/* Version sur fond sombre */
.section-encre .def-liste > div { border-top-color: var(--encre-douce); }
.section-encre .def-liste dt { color: var(--papier); }
.section-encre .def-liste dd { color: var(--gris-clair); }

/* Les logos des partenaires cités dans la définition, alignés côte à côte
   avec une marge entre eux. Scaleway est servi en blanc sur fond sombre. */
.logos-partenaires {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-4);
  margin-top: var(--esp-2);
}

.logo-partenaire {
  height: 1.7rem;
  width: auto;
  opacity: 0.9;
}

@media (max-width: 56rem) {
  .def-liste { grid-template-columns: 1fr; gap: var(--esp-3); }
}

/* Illustration posée dans une grille */
.illustration {
  border-radius: var(--r-md);
  border: 1px solid var(--filet);
}

.grille-2 > .illustration {
  width: min(100%, 26rem);
  justify-self: center;
}

/* ============================================================
   Le téléphone
   ============================================================ */

.telephone {
  width: min(19.5rem, 100%);
  margin-inline: auto;
  background: var(--encre);
  border-radius: 2.6rem;
  padding: 0.7rem;
  box-shadow: none;
}

/* L'écran est une vraie copie d'écran de l'application, sans coque ni barre
   d'état : la coque, c'est `.telephone`. Le rayon intérieur vaut celui de la
   coque moins son épaisseur — 2,6 rem moins 0,7 rem. */
.telephone-ecran {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1.9rem;
  background: var(--papier);
}

/* ============================================================
   Le face-à-face
   ============================================================ */

/* border-radius sur table : passe par un conteneur */
.comparatif-cadre {
  border: 1px solid var(--filet);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--papier-clair);
}

.comparatif-cadre table { width: 100%; border-collapse: collapse; }

.comparatif-cadre th,
.comparatif-cadre td {
  padding: 1rem 1.25rem;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid var(--filet);
  font-size: 0.98rem;
}

.comparatif-cadre thead th {
  border-top: none;
  font-family: var(--mono);
  font-size: var(--label);
  font-weight: 600;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--gris-chaud);
  padding-block: 0.85rem;
}

.comparatif-cadre thead th.col-spine { color: var(--marine); }

.comparatif-cadre tbody th {
  font-weight: 700;
  font-size: 0.98rem;
  white-space: nowrap;
  color: var(--encre);
}

.comparatif-cadre td.col-spine {
  background: color-mix(in srgb, var(--marine-pale) 55%, var(--papier-clair));
  color: var(--encre);
}

.comparatif-cadre td.col-autres { color: var(--gris-chaud); }

@media (max-width: 56rem) {
  .comparatif-cadre { border: none; background: none; border-radius: 0; }
  .comparatif-cadre table, .comparatif-cadre tbody { display: block; }
  .comparatif-cadre thead { display: none; }
  .comparatif-cadre tr {
    display: block;
    border: 1px solid var(--filet);
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--papier-clair);
    margin-bottom: var(--esp-2);
  }
  .comparatif-cadre tbody th, .comparatif-cadre td { display: block; border-top: none; }
  .comparatif-cadre tbody th { padding-bottom: 0.2rem; }
  .comparatif-cadre td.col-spine::before,
  .comparatif-cadre td.col-autres::before {
    display: block;
    font-family: var(--mono);
    font-size: 0.62rem;
    letter-spacing: var(--label-tracking);
    text-transform: uppercase;
    margin-bottom: 0.25rem;
  }
  .comparatif-cadre td.col-spine::before { content: "Spine"; color: var(--marine); }
  .comparatif-cadre td.col-autres::before { content: "Chatbot généraliste"; color: var(--gris-chaud); }
}

/* L'ouverture : les mêmes modèles, sans l'enfermement */
.ouverture {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--esp-3);
  align-items: center;
  margin-top: var(--esp-4);
  padding: var(--pad-pave);
  background: var(--blanc);
  border: 1px solid var(--filet);
  border-radius: var(--r-lg);
}

.ouverture img { width: 7rem; border-radius: var(--r-sm); }

@media (max-width: 40rem) {
  .ouverture { grid-template-columns: 1fr; }
}

/* ============================================================
   Les étapes
   ============================================================ */

.etapes {
  counter-reset: etape;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--esp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.etapes li {
  counter-increment: etape;
  background: var(--papier-clair);
  border: 1px solid var(--filet);
  border-radius: var(--r-md);
  padding: var(--pad-carte);
}

.etapes li::before {
  content: "0" counter(etape);
  display: block;
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: var(--label-tracking);
  color: var(--action-sombre);
  margin-bottom: 0.8rem;
}

.etapes h3 { margin-bottom: 0.4rem; }
.etapes p { color: var(--gris-chaud); font-size: 0.98rem; }

@media (max-width: 56rem) {
  .etapes { grid-template-columns: 1fr; }
}

/* ============================================================
   La montre de la mascotte
   Un cercle noir cerclé de métal, dans l'espace à droite du
   titre « Commencer ». La mascotte y entre, s'y anime et en
   ressort ; le pilotage des clips est dans assets/js/montre.js.
   ============================================================ */

.commencer-tete {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--esp-5);
  align-items: center;
  margin-bottom: var(--esp-5);
}

.commencer-tete .entete-section { margin-bottom: 0; }

.montre {
  --taille-montre: clamp(12rem, 20vw, 16.5rem);
  position: relative;
  justify-self: center;
  width: var(--taille-montre);
  height: var(--taille-montre);
  border-radius: 50%;
  padding: clamp(0.5rem, 1.1vw, 0.8rem);
  /* La lunette : un acier brossé tourné, alternance de reflets. */
  background:
    conic-gradient(from 218deg,
      #eef1f4 0deg, #aab2bc 40deg, #f4f6f8 82deg, #767f8a 128deg,
      #dfe3e8 172deg, #8f98a2 210deg, #f1f3f6 252deg, #79818c 300deg,
      #cbd1d7 336deg, #eef1f4 360deg);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.75),
    inset 0 -2px 3px rgba(14, 34, 56, 0.35),
    0 24px 46px -20px rgba(8, 23, 38, 0.6),
    0 3px 8px rgba(8, 23, 38, 0.22);
}

/* La couronne (le bouton latéral des montres rondes). */
.montre::before {
  content: "";
  position: absolute;
  top: 50%;
  right: -0.35rem;
  width: 0.5rem;
  height: 1.35rem;
  transform: translateY(-50%);
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, #d9dee3, #8a929c 45%, #6b7580);
  box-shadow: 0 1px 2px rgba(8, 23, 38, 0.35);
  z-index: -1;
}

.montre-ecran {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background: #000;
  /* L'écran est enfoncé sous le verre : ombre interne au ras du cercle. */
  box-shadow:
    inset 0 0 0 2px rgba(8, 23, 38, 0.9),
    inset 0 3px 12px rgba(0, 0, 0, 0.9);
}

.montre-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}

.montre-video.is-active { opacity: 1; }

/* Le reflet du verre : une écharpe de lumière en haut à gauche. */
.montre-ecran::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 28% 12%,
      rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 42%);
  mix-blend-mode: screen;
}

@media (max-width: 56rem) {
  .commencer-tete {
    grid-template-columns: 1fr;
    justify-items: start;
    gap: var(--esp-4);
  }
  .montre { justify-self: start; }
}

/* ============================================================
   Pied de page
   ============================================================ */

.site-footer {
  background: var(--fond-sombre-profond);
  color: var(--gris-clair);
  padding-block: var(--esp-bande) var(--esp-4);
}

.footer-grille {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--esp-5);
  margin-bottom: var(--esp-5);
}

@media (max-width: 56rem) {
  .footer-grille { grid-template-columns: 1fr; gap: var(--esp-4); }
}

.footer-marque .brand { color: var(--papier); margin-bottom: var(--esp-2); }

.footer-marque p { font-size: 0.98rem; max-width: 26em; }

.footer-signature {
  font-family: var(--serif);
  font-style: italic;
  color: var(--papier);
}

.site-footer nav h2 {
  font-family: var(--mono);
  font-size: var(--label);
  font-weight: 600;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--bleu-mascotte);
  margin: 0 0 var(--esp-2);
}

.site-footer nav ul { margin: 0; padding: 0; list-style: none; }
.site-footer nav li { margin-bottom: 0.55rem; }

.site-footer nav a {
  color: var(--gris-clair);
  text-decoration: none;
  font-size: 0.98rem;
}

.site-footer nav a:hover { color: var(--papier); text-decoration: underline; }

.footer-mentions {
  border-top: 1px solid var(--encre-douce);
  padding-top: var(--esp-3);
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}

.footer-mentions a { color: var(--gris-clair); }

/* ============================================================
   Côté technique
   Une seconde lecture de la même promesse : sombre, dense et
   orientée garanties d'architecture plutôt que secrets de code.
   ============================================================ */

[hidden] { display: none !important; }

.tech-site {
  --tech-fond: #07131F;
  --tech-fond-profond: #04101A;
  --tech-panneau: #0B1D2D;
  --tech-panneau-clair: #10273B;
  --tech-filet: #294964;
  --tech-texte: #EDF3F7;
  --tech-muted: #A8BACD;
  --tech-bleu: #86A8CB;
  --tech-vert: #5F9A79;
  --tech-corail: #EF9B78;
  overflow: hidden;
  background: var(--tech-fond);
  color: var(--tech-texte);
}

/* ============================================================
   Le passage entre les deux faces
   La page entière pivote ; le ciel n'apparaît que dans l'espace
   libéré par la feuille au milieu du retournement.
   ============================================================ */

.face-transition-sky {
  position: fixed;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 115%, rgba(255, 255, 255, 0.72), transparent 42%),
    linear-gradient(150deg, #75A9D6 0%, #BBDDF0 54%, #EEF7F8 100%);
}

.face-transition-sky::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, transparent 28%, rgba(255, 255, 255, 0.3) 48%, transparent 68%),
    radial-gradient(circle at 72% 20%, rgba(255, 255, 255, 0.78), transparent 16%);
  mix-blend-mode: screen;
}

.face-cloud {
  position: absolute;
  display: block;
  width: clamp(8rem, 18vw, 15rem);
  height: clamp(2.4rem, 5vw, 4.2rem);
  border-radius: var(--r-pilule);
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 1rem 2rem rgba(48, 91, 128, 0.1);
  filter: blur(0.2px);
}

.face-cloud::before,
.face-cloud::after {
  content: "";
  position: absolute;
  bottom: 0;
  border-radius: 50%;
  background: inherit;
}

.face-cloud::before {
  left: 16%;
  width: 40%;
  aspect-ratio: 1;
}

.face-cloud::after {
  right: 13%;
  width: 52%;
  aspect-ratio: 1;
}

.face-cloud-1 { top: 18%; left: -5rem; opacity: 0.7; }
.face-cloud-2 { top: 63%; right: -3rem; opacity: 0.58; transform: scale(0.72); }
.face-cloud-3 { top: 38%; left: 67%; opacity: 0.3; transform: scale(0.44); }

.face-flight {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(4.6rem, 8vw, 6.8rem);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
}

.face-flight img {
  position: relative;
  z-index: 1;
  width: 100%;
  filter: drop-shadow(0 0.8rem 1rem rgba(14, 34, 56, 0.2));
}

.face-flight-trail {
  position: absolute;
  top: 52%;
  right: 72%;
  width: clamp(5rem, 12vw, 10rem);
  height: 2px;
  border-radius: var(--r-pilule);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.86));
}

body.face-to-usages {
  --face-out-angle: 88deg;
  --face-in-angle: -88deg;
  --flight-start: 11rem;
  --flight-end: -11rem;
  --flight-angle-start: 8deg;
  --flight-angle-end: -8deg;
  --cloud-start: 2rem;
  --cloud-end: -3.5rem;
}

body.face-to-technique {
  --face-out-angle: -88deg;
  --face-in-angle: 88deg;
  --flight-start: -11rem;
  --flight-end: 11rem;
  --flight-angle-start: -8deg;
  --flight-angle-end: 8deg;
  --cloud-start: -2rem;
  --cloud-end: 3.5rem;
}

body.face-to-usages .face-flight-trail {
  right: auto;
  left: 72%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.86), transparent);
}

body.face-transitioning {
  overflow: hidden;
  background: #9CC9E5;
}

body.face-transitioning .face-transition-sky {
  visibility: visible;
  animation: face-sky 0.96s ease both;
}

body.face-transitioning .face-cloud-1 { animation: face-cloud-drift 0.96s ease-in-out both; }
body.face-transitioning .face-cloud-2 { animation: face-cloud-drift-reverse 0.96s ease-in-out both; }
body.face-transitioning .face-cloud-3 { animation: face-cloud-drift 0.96s ease-in-out both; }
body.face-transitioning .face-flight { animation: face-flight 0.96s cubic-bezier(0.3, 0.7, 0.4, 1) both; }
body.face-transitioning .face-flight img { animation: face-flight-bob 0.48s ease-in-out 2 alternate; }

.site-page.face-leaving {
  will-change: transform, opacity;
  animation: face-page-out 0.44s cubic-bezier(0.55, 0.04, 0.82, 0.32) both;
}

.site-page.face-entering {
  will-change: transform, opacity;
  animation: face-page-in 0.52s cubic-bezier(0.18, 0.68, 0.22, 1) both;
}

@keyframes face-page-out {
  from { opacity: 1; transform: perspective(90rem) rotateY(0); }
  to { opacity: 0; transform: perspective(90rem) rotateY(var(--face-out-angle)); }
}

@keyframes face-page-in {
  from { opacity: 0; transform: perspective(90rem) rotateY(var(--face-in-angle)); }
  to { opacity: 1; transform: perspective(90rem) rotateY(0); }
}

@keyframes face-sky {
  0%, 100% { opacity: 0; }
  24%, 76% { opacity: 1; }
}

@keyframes face-cloud-drift {
  from { margin-left: var(--cloud-start); }
  to { margin-left: var(--cloud-end); }
}

@keyframes face-cloud-drift-reverse {
  from { margin-right: var(--cloud-end); }
  to { margin-right: var(--cloud-start); }
}

@keyframes face-flight {
  from { opacity: 0; transform: translate(calc(-50% + var(--flight-start)), -42%) rotate(var(--flight-angle-start)) scale(0.72); }
  32%, 70% { opacity: 1; }
  to { opacity: 0; transform: translate(calc(-50% + var(--flight-end)), -58%) rotate(var(--flight-angle-end)) scale(0.92); }
}

@keyframes face-flight-bob {
  from { transform: translateY(-0.25rem) rotate(-2deg); }
  to { transform: translateY(0.25rem) rotate(2deg); }
}

.tech-site h1,
.tech-site h2,
.tech-site h3 { color: var(--tech-texte); }

.tech-site p { color: var(--tech-muted); }

.tech-kicker,
.tech-label,
.tech-index {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.tech-kicker {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0 0 var(--esp-3);
  color: var(--tech-bleu) !important;
}

.tech-kicker::before {
  content: "";
  width: 1.7rem;
  height: 1px;
  background: currentColor;
}

.tech-lede {
  max-width: 42rem;
  font-size: clamp(1.08rem, 1.9vw, 1.25rem);
  line-height: 1.55;
  color: #C5D1DC !important;
}

.tech-section {
  padding-block: clamp(4.5rem, 8vw, 7rem);
  border-top: 1px solid var(--tech-filet);
}

.tech-section-contraste { background: var(--tech-fond-profond); }

.tech-entete {
  max-width: 50rem;
  margin-bottom: var(--esp-5);
}

.tech-entete h2 { max-width: 18em; }

#tech-architecture .tech-entete {
  margin-bottom: clamp(1.75rem, 4vw, 3.25rem);
}

.tech-grille-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(3rem, 7vw, 6.5rem);
  align-items: center;
}

.tech-grille-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--esp-3);
}

.tech-architecture-figure {
  aspect-ratio: 1200 / 760;
  margin: 0 0 clamp(1.75rem, 3.5vw, 3rem);
  overflow: hidden;
  border: 1px solid var(--tech-filet);
  border-radius: var(--r-md);
  background: #06111C;
  box-shadow: 1rem 1rem 0 rgba(134, 168, 203, 0.04);
}

.tech-architecture-figure svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Vocabulaire du schéma d'architecture. Le SVG est dessiné dans un repère de
   1200 × 760 : ses tailles de texte sont en pixels de ce repère, pas en pixels
   d'écran, et suivent donc l'échelle de la figure. */
.svg-canvas { fill: #06111C; }

.svg-enterprise-bubble {
  fill: rgba(18, 48, 73, 0.5);
  stroke: #496B89;
  stroke-width: 2;
}

.svg-core-bubble {
  fill: #081827;
  stroke: var(--tech-bleu);
  stroke-width: 1.25;
  stroke-dasharray: 4 5;
}

.svg-node { stroke-width: 1.5; }
.svg-node-core { fill: #123049; stroke: #355E80; }
.svg-node-guard { fill: #113128; stroke: #6DA989; }
.svg-node-database { fill: #0E2A24; stroke: #6DA989; }
.svg-node-near { fill: var(--tech-panneau-clair); stroke: #496B89; }
.svg-node-model-near { fill: #123049; stroke: var(--tech-bleu); }
.svg-node-internet { fill: var(--tech-texte); stroke: #B9CBDA; }

.svg-zone-label,
.svg-label,
.svg-label-green,
.svg-label-dark {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.1px;
}

.svg-zone-label-enterprise { fill: #B7C7D5; }
.svg-zone-label-spine { fill: var(--tech-bleu); }
.svg-label { fill: var(--tech-bleu); }
.svg-label-green { fill: #80B898; }
.svg-label-dark { fill: #43617C; }

.svg-title,
.svg-title-dark {
  font-size: 17px;
  font-weight: 750;
}

.svg-title { fill: var(--tech-texte); }
.svg-title-dark { fill: var(--encre); }

.svg-copy { fill: var(--tech-muted); font-size: 14px; }

.svg-flow,
.svg-flow-green {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.svg-flow { stroke: var(--tech-bleu); stroke-width: 2; }
.svg-flow-green { stroke: #6DA989; stroke-width: 2.5; }
.svg-marker-blue { fill: var(--tech-bleu); }
.svg-marker-green { fill: #6DA989; }

.tech-hero {
  position: relative;
  padding-block: clamp(4rem, 8vw, 7rem) 0;
  background: var(--tech-fond-profond);
}

.tech-hero::before {
  content: "SPINE / SYSTEM";
  position: absolute;
  top: 2.5rem;
  right: -0.06em;
  color: rgba(134, 168, 203, 0.035);
  font-family: var(--mono);
  font-size: clamp(4rem, 13vw, 12rem);
  font-weight: 800;
  letter-spacing: -0.08em;
  line-height: 0.8;
  pointer-events: none;
  white-space: nowrap;
}

.tech-hero-grille {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(33rem, 1.1fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}

.tech-hero h1 {
  max-width: 12em;
  font-size: clamp(2.45rem, 5vw, 4.15rem);
  margin-bottom: var(--esp-3);
}

.tech-hero h1 span { color: var(--tech-bleu); }
.tech-hero .tech-lede { margin-bottom: var(--esp-4); }

.tech-btn,
.tech-btn-primaire {
  border-color: var(--tech-filet);
  color: var(--tech-texte);
}

.tech-btn:hover {
  background: var(--tech-texte);
  border-color: var(--tech-texte);
  color: var(--tech-fond);
}

.tech-btn-primaire {
  background: var(--tech-bleu);
  border-color: var(--tech-bleu);
  color: var(--tech-fond);
}

.tech-btn-primaire::after {
  content: "";
  width: 1.1rem;
  height: 1.1rem;
  background: currentColor;
  -webkit-mask: var(--svg-chevron) center / contain no-repeat;
  mask: var(--svg-chevron) center / contain no-repeat;
}

.tech-btn-primaire:hover {
  background: var(--tech-texte);
  border-color: var(--tech-texte);
  color: var(--tech-fond);
}

.tech-schema {
  position: relative;
  border: 1px solid var(--tech-filet);
  border-radius: var(--r-md);
  background: var(--tech-panneau);
  box-shadow: 1rem 1rem 0 rgba(134, 168, 203, 0.055);
  overflow: hidden;
}

.tech-schema-barre {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--tech-filet);
  color: var(--tech-muted);
  font-family: var(--mono);
  font-size: 0.76rem;
}

.tech-schema-etat {
  color: var(--tech-muted);
}

.tech-schema-corps {
  display: grid;
  grid-template-columns: minmax(9.5rem, 0.95fr) minmax(7rem, 0.75fr) minmax(10rem, 1.1fr);
  align-items: stretch;
  gap: 0.75rem;
  padding: clamp(1.25rem, 3vw, 2rem);
}

.tech-schema-entree,
.tech-schema-noeud {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 9rem;
  justify-content: center;
  padding: 0.9rem;
  border: 1px solid var(--tech-filet);
  border-radius: var(--r-sm);
  background: var(--tech-fond);
  overflow-wrap: anywhere;
}

.tech-schema-agent { background: color-mix(in srgb, var(--tech-bleu) 8%, var(--tech-fond)); }

.tech-schema strong { font-size: 1rem; line-height: 1.2; }
.tech-schema small { margin-top: 0.35rem; color: var(--tech-muted); line-height: 1.35; }
.tech-schema .tech-label { margin-bottom: 0.35rem; color: var(--tech-bleu); }
.tech-schema-fleche { display: none; }

.tech-schema-sorties {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--tech-filet);
}

.tech-schema-sorties div {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0.85rem 1rem;
  background: var(--tech-panneau-clair);
  border-radius: var(--r-xs);
  overflow-wrap: anywhere;
}

.tech-schema-sorties span {
  color: var(--tech-muted);
  font-family: var(--mono);
  font-size: 0.67rem;
  text-transform: uppercase;
}

.tech-schema-sorties strong { margin-top: 0.2rem; font-size: 0.85rem; }

.tech-signaux {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem clamp(1rem, 2vw, 2rem);
  margin-top: clamp(3.5rem, 7vw, 6rem);
  margin-bottom: 0;
  padding-block: 1.1rem;
  border-top: 1px solid var(--tech-filet);
  color: var(--tech-muted);
  font-size: 0.82rem;
  font-weight: 650;
  line-height: 1.4;
  list-style: none;
}

.tech-signaux li {
  position: relative;
  padding-left: 1.05rem;
}

.tech-signaux li::before {
  content: "";
  position: absolute;
  top: 0.52em;
  left: 0;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: var(--tech-vert);
}

.tech-carte {
  padding: var(--pad-carte);
  border: 1px solid var(--tech-filet);
  border-radius: var(--r-md);
  background: var(--tech-panneau);
}

.tech-carte h3 { margin-bottom: 0.65rem; }
.tech-carte p { font-size: 0.98rem; }

.tech-liste {
  display: grid;
  gap: 1.1rem;
  padding: 0;
  margin: var(--esp-4) 0 0;
  list-style: none;
}

.tech-liste li {
  position: relative;
  padding-left: 1.55rem;
  color: var(--tech-muted);
}

.tech-liste li::before {
  content: "";
  position: absolute;
  top: 0.55em;
  left: 0;
  width: 0.55rem;
  height: 0.55rem;
  border: 1px solid var(--tech-vert);
  border-radius: 50%;
}

.tech-liste strong { color: var(--tech-texte); }

.rls-preuve {
  border: 1px solid var(--tech-filet);
  border-radius: var(--r-md);
  background: var(--tech-panneau);
  padding: clamp(1.2rem, 3vw, 2rem);
}

.rls-identite,
.rls-regle {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  border: 1px solid var(--tech-filet);
  border-radius: var(--r-sm);
  background: var(--tech-fond);
}

.rls-identite .tech-label,
.rls-regle .tech-label { color: var(--tech-bleu); }

.rls-identite strong { margin-top: 0.25rem; }

.rls-regle {
  position: relative;
  flex-direction: row;
  align-items: center;
  gap: 0.9rem;
  width: calc(100% - 2rem);
  margin: 1rem;
  border-color: var(--tech-vert);
}

.rls-verrou {
  width: 1.7rem;
  height: 1.45rem;
  border: 2px solid var(--tech-vert);
  border-radius: 0.3rem;
}

.rls-verrou::before {
  content: "";
  display: block;
  width: 0.9rem;
  height: 0.75rem;
  margin: -0.72rem auto 0;
  border: 2px solid var(--tech-vert);
  border-bottom: 0;
  border-radius: 0.7rem 0.7rem 0 0;
}

.rls-regle code {
  display: block;
  min-width: 0;
  margin-top: 0.3rem;
  color: var(--tech-texte);
  font-size: 0.78rem;
  overflow-wrap: anywhere;
  white-space: normal;
}

.rls-resultats { display: grid; gap: 0.45rem; }

.rls-ligne {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 0.7rem;
  align-items: center;
  padding: 0.72rem 0.85rem;
  border-radius: var(--r-xs);
  background: var(--tech-panneau-clair);
  font-size: 0.82rem;
}

.rls-ligne small { color: var(--tech-muted); }
.rls-ligne strong { color: var(--tech-vert); font-family: var(--mono); font-size: 0.68rem; text-transform: uppercase; }
.rls-refuse { opacity: 0.42; }
.rls-refuse span { text-decoration: line-through; }
.rls-refuse strong { color: var(--tech-corail); }
.rls-preuve > p { margin-top: 1rem; font-size: 0.82rem; }

.tech-data-grille {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(22rem, 0.85fr);
  gap: var(--esp-4);
  align-items: stretch;
}

.graphe-metier {
  display: grid;
  place-items: center;
  min-height: 29rem;
  padding: clamp(0.75rem, 2vw, 1.5rem);
  border: 1px solid var(--tech-filet);
  border-radius: var(--r-md);
  background: var(--tech-panneau);
}

.graphe-svg { display: block; width: 100%; height: auto; }
.graphe-liens path { fill: none; stroke: #496681; stroke-width: 2; }
.graphe-bulle circle { stroke-width: 2; }
.graphe-bulle text { text-anchor: middle; pointer-events: none; }
.graphe-type { font-family: var(--mono); font-size: 12px; font-weight: 650; letter-spacing: 1.2px; text-transform: uppercase; }
.graphe-nom { font-family: var(--sans); font-size: 15px; font-weight: 700; }
.graphe-nom-grand { font-size: 22px; }
.graphe-bulle-entreprise circle { fill: #F7F5F0; stroke: #86A8CB; }
.graphe-bulle-entreprise text { fill: #07131F; }
.graphe-bulle-reunion circle { fill: #86A8CB; stroke: #B8CCE0; }
.graphe-bulle-reunion text { fill: #07131F; }
.graphe-bulle-projet circle { fill: #1B4B87; stroke: #86A8CB; }
.graphe-bulle-projet text { fill: #F7F5F0; }
.graphe-bulle-note circle { fill: #2F6B4F; stroke: #78A98D; }
.graphe-bulle-note text { fill: #F7F5F0; }
.graphe-bulle-tache circle { fill: #D9E3EB; stroke: #86A8CB; }
.graphe-bulle-tache text { fill: #07131F; }

.rag-parcours {
  padding: var(--pad-carte);
  border: 1px solid var(--tech-filet);
  border-radius: var(--r-md);
  background: var(--tech-fond-profond);
}

.rag-parcours > .tech-label { color: var(--tech-bleu); }
.rag-parcours ol { display: grid; gap: 0; margin: 1rem 0; padding: 0; list-style: none; }

.rag-parcours li {
  display: grid;
  grid-template-columns: 2.2rem 1fr;
  gap: 0.8rem;
  padding-block: 1rem;
  border-top: 1px solid var(--tech-filet);
}

.rag-parcours li > span { color: var(--tech-bleu); font-family: var(--mono); font-size: 0.72rem; }
.rag-parcours li div { display: flex; flex-direction: column; }
.rag-parcours li small { margin-top: 0.2rem; color: var(--tech-muted); line-height: 1.45; }
.connecteurs-grille {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--esp-3);
}

.connecteur-carte,
.tech-grand-bloc {
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  border: 1px solid var(--tech-filet);
  border-radius: var(--r-md);
  background: var(--tech-panneau);
}

.connecteur-tete {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: var(--esp-2);
}

.connecteur-icone {
  display: grid;
  place-items: center;
  width: 3.2rem;
  height: 3.2rem;
  flex: none;
  border: 1px solid var(--tech-filet);
  border-radius: 50%;
  color: var(--tech-bleu);
  font-size: 1.6rem;
}

.connecteur-tete .tech-label { margin: 0 0 0.3rem; color: var(--tech-muted); }
.connecteur-tete h3 { margin: 0; }

#tech-connecteurs .tech-entete { max-width: none; }

.connecteurs-promesse {
  font-size: clamp(1.55rem, 3.4vw, 2.45rem);
  line-height: 1.12;
}

.connecteurs-promesse span { display: block; }

@media (min-width: 44rem) {
  .connecteurs-promesse span { white-space: nowrap; }
}

.tech-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: var(--esp-3);
}

.tech-tags span,
.export-meta span {
  padding: 0.34rem 0.7rem;
  border: 1px solid var(--tech-filet);
  border-radius: var(--r-pilule);
  color: var(--tech-muted);
  font-family: var(--mono);
  font-size: 0.68rem;
}

.tech-grille-modeles { align-items: start; }

.modeles-panneau {
  border: 1px solid var(--tech-filet);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--tech-panneau);
}

.modele-ligne {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  align-items: center;
  padding: 1.15rem 1.25rem;
  border-bottom: 1px solid var(--tech-filet);
}

.modele-ligne div { display: flex; flex-direction: column; }
.modele-ligne .tech-label { color: var(--tech-muted); }
.modele-ligne strong { margin-top: 0.2rem; }
.modele-ligne small { color: var(--tech-muted); text-align: right; }

.modele-actif {
  background: var(--tech-panneau-clair);
  box-shadow: inset 3px 0 var(--tech-vert);
}

.modele-actif .tech-label { color: var(--tech-vert); }

.modele-partenaires {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 2.1rem;
  margin-top: 0.55rem;
  color: var(--tech-muted);
}

.modele-partenaires img {
  width: auto;
  max-width: 7.4rem;
  max-height: 1.65rem;
}

.modele-criteres {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  padding: 1rem 1.25rem;
}

.modele-criteres span {
  padding: 0.3rem 0.6rem;
  border-radius: var(--r-pilule);
  background: var(--tech-fond);
  color: var(--tech-muted);
  font-family: var(--mono);
  font-size: 0.66rem;
}

.tech-duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--esp-3);
}

.tech-grand-bloc h2 { font-size: clamp(1.75rem, 3vw, 2.45rem); }

.tech-export { background: #0A1A29; }

.export-apercu {
  border: 1px solid var(--tech-filet);
  border-radius: var(--r-md);
  background: var(--tech-fond-profond);
  overflow: hidden;
}

.export-barre {
  display: flex;
  justify-content: space-between;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--tech-filet);
  color: var(--tech-muted);
  font-family: var(--mono);
  font-size: 0.72rem;
}

.export-barre small { color: var(--tech-vert); }

.export-apercu pre {
  margin: 0;
  padding: clamp(1.25rem, 3vw, 2rem);
  overflow-x: auto;
  color: var(--tech-texte);
  font-size: 0.88rem;
  line-height: 1.9;
}

.export-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  padding: 1rem;
  border-top: 1px solid var(--tech-filet);
}

.tech-cta { background: var(--tech-fond-profond); }

.tech-cta-interieur {
  display: flex;
  justify-content: space-between;
  gap: var(--esp-4);
  align-items: center;
}

.tech-cta h2 { max-width: 19em; margin-bottom: 0; }
.tech-cta .btn { flex: none; }

body.mode-technique .site-footer { border-top: 1px solid #294964; }

@media (max-width: 62rem) {
  .tech-hero-grille,
  .tech-grille-2,
  .tech-data-grille { grid-template-columns: 1fr; }
  .tech-schema { max-width: 42rem; }
  .tech-data-grille { gap: var(--esp-3); }
  .tech-signaux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Sous cette largeur, le schéma d'architecture est réduit au point que ses
     libellés de 12 unités tombent sous 9 pixels : illisible. Le chapô de la
     section porte déjà le message, la figure se retire. */
  .tech-architecture-figure { display: none; }
}

@media (max-width: 48rem) {
  .tech-grille-3,
  .connecteurs-grille,
  .tech-duo { grid-template-columns: 1fr; }
  .tech-cta-interieur { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 34rem) {
  .tech-schema-corps { grid-template-columns: 1fr; }
  .tech-schema-entree,
  .tech-schema-noeud { min-height: 0; }
  .tech-schema-sorties { grid-column: 1; grid-template-columns: 1fr; }
  .tech-signaux { grid-template-columns: 1fr; }
  .graphe-metier { min-height: 0; padding: 0.35rem; }
  .modele-ligne { align-items: flex-start; flex-direction: column; gap: 0.5rem; }
  .modele-ligne small { text-align: left; }
  .rls-ligne { grid-template-columns: 1fr auto; }
  .rls-ligne small { grid-column: 1; grid-row: 2; }
  .rls-ligne strong { grid-column: 2; grid-row: 1 / span 2; }
}

/* ============================================================
   La page de téléchargement (/download)
   Une page à part, hors navigation : la vitrine renvoie au
   contact, celle-ci sert les binaires. Quatre plateformes en
   grille, la seule disponible s'affirme, les autres attendent.
   ============================================================ */

.telecharge-hero { padding-block: var(--esp-hero) var(--esp-4); }

.telecharge-hero .container {
  max-width: var(--largeur-lecture);
  text-align: center;
}

.telecharge-hero .kicker { justify-content: center; }

.telecharge-hero .lede {
  margin-inline: auto;
  margin-bottom: var(--esp-4);
}

.telecharge-mascotte {
  width: min(100%, 9.5rem);
  margin: 0 auto var(--esp-3);
}

.plateformes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--esp-3);
  padding-bottom: var(--esp-5);
}

@media (max-width: 46rem) {
  .plateformes { grid-template-columns: 1fr; }
}

.plateforme {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  background: var(--papier-clair);
  border: 1px solid color-mix(in srgb, var(--marine-filet) 45%, transparent);
  border-radius: var(--r-md);
  padding: var(--pad-pave);
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.plateforme-prete { border-color: var(--marine); }

.plateforme-prete:hover {
  border-color: var(--action);
  transform: translateY(-2px);
}

.plateforme-tete {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.plateforme-icone {
  flex: none;
  width: 3.1rem;
  height: 3.1rem;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: var(--marine-pale);
  color: var(--marine);
}

.plateforme-icone svg { width: 1.7rem; height: 1.7rem; display: block; }

.plateforme-prete .plateforme-icone {
  background: color-mix(in srgb, var(--action) 14%, var(--papier-clair));
  color: var(--action-sombre);
}

.plateforme-nom {
  font-size: 1.3rem;
  font-weight: 750;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
}

.plateforme-detail {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--gris-chaud);
  margin: 0.15rem 0 0;
}

.plateforme p { color: var(--gris-chaud); font-size: 0.98rem; }

.plateforme-pied { margin-top: auto; }

.plateforme .btn { width: fit-content; }

.badge-bientot {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.1rem;
  border: 1px dashed var(--marine-filet);
  border-radius: var(--r-pilule);
  font-family: var(--mono);
  font-size: var(--label);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--gris-chaud);
}

.badge-bientot::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--r-pilule);
  background: var(--gris-clair);
  flex: none;
}

.badge-invitation {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.1rem;
  border: 1px solid color-mix(in srgb, var(--action) 45%, transparent);
  border-radius: var(--r-pilule);
  font-family: var(--mono);
  font-size: var(--label);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--action);
}

.badge-invitation::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--r-pilule);
  background: var(--action);
  flex: none;
}

.telecharge-note {
  text-align: center;
  padding-bottom: var(--esp-5);
}

.telecharge-note .container { max-width: var(--largeur-lecture); }

/* L'extension de navigateur n'est pas une cinquième plateforme : elle tient
   toute la largeur de la grille, sous les quatre applications, et renvoie
   à sa notice d'installation plus bas. */
.plateforme-large { grid-column: 1 / -1; }

.plateforme-large p { max-width: 62ch; }

.plateforme-pied .groupe-btn { row-gap: var(--esp-1); }

/* La notice (/download#extension) : les cinq gestes se lisent l'un après
   l'autre, la grille des étapes de l'accueil passe donc en colonne unique
   et le numéro se range sur le côté. */
.extension-titre { margin-top: var(--esp-5); }

.etapes-liste { grid-template-columns: 1fr; gap: var(--esp-2); }

.etapes-liste li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 1.2rem;
  padding-block: 1.1rem;
}

.etapes-liste li::before { grid-column: 1; grid-row: 1 / -1; margin-bottom: 0; }

.etapes-liste li > * { grid-column: 2; }

.etapes-liste p { color: var(--gris-chaud); font-size: 0.98rem; }

.etapes-liste p strong { color: var(--encre); }

.extension-notes { margin-top: var(--esp-5); }

/* Les adresses internes du navigateur (chrome://extensions) et les noms de
   dossiers, cités tels qu'ils s'affichent. */
#extension code {
  font-family: var(--mono);
  font-size: 0.86em;
  padding: 0.12em 0.4em;
  border-radius: var(--r-xs);
  background: var(--marine-pale);
  color: var(--marine);
  overflow-wrap: anywhere;
}

@media (max-width: 46rem) {
  .etapes-liste li { grid-template-columns: minmax(0, 1fr); }
  .etapes-liste li::before { grid-column: 1; grid-row: auto; margin-bottom: 0.6rem; }
  .etapes-liste li > * { grid-column: 1; }
}

/* ============================================================
   Contact (/contact)
   ============================================================ */

body.contact-page { background: var(--marine-pale); }

.contact-page-main .contact-spine {
  min-height: calc(100vh - 4.25rem);
  border-top: 0;
}

.contact-page-main .contact-spine-intro h1 { margin-bottom: var(--esp-3); }

.contact-spine {
  padding-block: var(--esp-bande);
  background: var(--marine-pale);
  border-top: 1px solid var(--marine-filet);
}

.contact-spine-grille {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
  gap: var(--esp-4);
  align-items: start;
}

.contact-spine-intro { max-width: var(--largeur-lecture); }

.contact-spine-form {
  position: relative;
  display: grid;
  gap: var(--esp-2);
  padding: var(--pad-pave);
  background: var(--papier-clair);
  border: 1px solid var(--marine-filet);
  border-radius: var(--r-md);
}

.contact-spine-form label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.92rem;
  font-weight: 700;
}

.contact-spine-form label span { color: var(--gris-chaud); font-weight: 450; }

.contact-spine-form input,
.contact-spine-form select,
.contact-spine-form textarea {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--marine-filet);
  border-radius: var(--r-xs);
  color: var(--encre);
  background: var(--blanc);
  font: inherit;
}

.contact-spine-form textarea { resize: vertical; }

.contact-spine-form input:focus-visible,
.contact-spine-form select:focus-visible,
.contact-spine-form textarea:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--marine) 45%, transparent);
  outline-offset: 1px;
  border-color: var(--marine);
}

.contact-spine-ligne {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--esp-2);
}

.contact-spine-accord {
  display: grid !important;
  grid-template-columns: auto 1fr;
  gap: 0.7rem;
  align-items: start;
  margin-bottom: 0 !important;
  line-height: 1.55;
}

.contact-spine-accord input {
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.18rem;
  accent-color: var(--action);
}

.contact-spine-accord span { color: var(--encre) !important; }

.contact-spine-piege {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-spine-form > .btn { justify-self: start; }
.contact-spine-form[aria-busy="true"] > .btn { cursor: wait; opacity: 0.72; }

/* Pas de `display: none` quand le paragraphe est vide : une région `role="status"`
   doit déjà être dans l'arbre d'accessibilité au moment où son texte change,
   sinon le premier message n'est pas annoncé. Le `min-height` réserve la place
   et évite le saut de mise en page à l'envoi. */
.contact-spine-statut {
  min-height: 1.5em;
  margin: 0;
  font-weight: 700;
}

.contact-spine-statut[data-state="success"] { color: var(--action-sombre); }
.contact-spine-statut[data-state="error"] { color: #a33528; }
.contact-spine-statut[data-state="pending"] { color: var(--gris-chaud); }

.contact-spine-note {
  margin: 0;
  padding: 0.8rem 1rem;
  border: 1px solid var(--filet);
  border-radius: var(--r-sm);
  color: var(--gris-chaud);
  background: var(--papier);
  font: 0.78rem/1.6 var(--mono);
}

@media (max-width: 48rem) {
  .contact-spine-grille,
  .contact-spine-ligne { grid-template-columns: 1fr; }
}

/* ============================================================
   Divers
   ============================================================ */

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

.note-marge {
  font-size: 0.95rem;
  color: var(--gris-chaud);
  margin-top: var(--esp-2);
}

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