/* ==========================================================================
   Konkret Digital Solutions — feuille de style du site public.
   Dossier client : ce fichier n'est jamais touché par une mise à jour moteur.

   Sobriété assumée : aucune police distante, aucune bibliothèque, aucun
   traceur. Tout tient dans un fichier servi une fois et mis en cache.
   ========================================================================== */

:root {
  /* Identité — relevés au pixel sur le logo */
  --bleu:          #1D59A0;
  --bleu-profond:  #043168;
  --bleu-vif:      #2E90F0;
  --bleu-lien:     #1668C4;
  --lavis:         #EAF3FE;
  --anthracite:    #4A4A48;
  --creme:         #F0F0F0;

  /* Rôles d'interface */
  --page:    #F6F8FB;
  --carte:   #FFFFFF;
  --bord:    #E3E8EF;
  --texte:   #0B0D10;
  --gris:    #5A6472;
  /* Le gris le plus clair qu'on s'autorise sur fond blanc : 4,87:1, soit AA
     tout juste tenu pour du texte de petite taille. L'ancien #8A94A3 tombait à
     3,07:1 — invisible pour beaucoup de monde, et c'est ce qui coûtait le point
     d'accessibilité. Ne pas l'éclaircir sans revérifier le ratio. */
  --gris-clair: #69727F;

  --bon:     #0E9F4F;
  --attention:#B5730A;
  --critique:#D92D3F;

  --rayon:   10px;
  --rayon-s: 7px;
  --rayon-xs: 5px;

  /* Pas d'ombre décorative. La hiérarchie se fait au filet d'un pixel et au
     blanc. Une ombre portée sur chaque bloc, c'est la signature du gabarit
     acheté ; l'ombre ne sert qu'à ce qui flotte réellement au-dessus. */
  --filet:      #E7EBF1;
  --filet-fort: #D6DDE7;
  --encre:      #0E1620;
  --ombre:      none;
  --ombre-forte: 0 24px 48px -24px rgba(11,13,16,.22);

  --large:   1160px;
  --police:  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Une seule courbe pour tout le site : le mouvement paraît décidé, pas mou. */
  --sortie:  cubic-bezier(.22, 1, .36, 1);
  --vif:     cubic-bezier(.34, 1.4, .64, 1);
}

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

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

body {
  margin: 0;
  font-family: var(--police);
  font-size: 16px;
  line-height: 1.65;
  color: var(--texte);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--bleu-lien); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .5em; letter-spacing: -.015em; }
h1 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.1rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 1.15rem + 1.3vw, 2.1rem); font-weight: 750; }
h3 { font-size: 1.15rem; font-weight: 700; }
p  { margin: 0 0 1em; }

:focus-visible {
  outline: 3px solid var(--bleu-vif);
  outline-offset: 2px;
  border-radius: 3px;
}

.conteneur { width: min(100% - 2.5rem, var(--large)); margin-inline: auto; }

.saut {
  position: absolute; left: -9999px;
  background: var(--bleu); color: #fff; padding: .7rem 1.1rem; border-radius: 0 0 var(--rayon-s) 0;
  z-index: 100;
}
.saut:focus { left: 0; top: 0; }

/* ---------------------------------------------------------------- en-tête -- */

.entete {
  position: sticky; top: 0; z-index: 50;
  background: #fff;
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--sortie);
}
/* En haut de page la barre se fond dans le blanc ; dès qu'on défile, un simple
   filet la détache. Rien d'autre : ni flou, ni ombre, ni bandeau coloré. */
.entete.est-defile { border-bottom-color: var(--filet); }

.entete-corps {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 76px;
  transition: min-height .3s var(--sortie);
}
.entete.est-defile .entete-corps { min-height: 64px; }

/* ------------------------------------------------------------------ marque -- */

.marque { display: flex; align-items: center; gap: .65rem; color: var(--texte); flex: none; }
.marque:hover { text-decoration: none; }
.marque img { transition: transform .4s var(--vif); }
.marque:hover img { transform: rotate(-6deg) scale(1.04); }
.marque-texte { display: flex; flex-direction: column; line-height: 1.02; }
.marque-texte strong {
  font-size: 1.08rem; font-weight: 800; letter-spacing: .07em; color: var(--bleu);
}
.marque-texte em {
  font-style: normal; font-size: .625rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gris-clair); margin-top: 2px;
}

/* ---------------------------------------------------------------- navigation */

.nav { display: flex; align-items: center; gap: .1rem; margin-left: auto; }

.nav-lien {
  position: relative;
  padding: .55rem .8rem;
  color: var(--gris);
  font-size: .9rem; font-weight: 500; letter-spacing: -.005em;
  transition: color .2s var(--sortie);
}
.nav-lien:hover { color: var(--texte); text-decoration: none; }

/* Le repère est un trait fin qui se déploie depuis le centre — pas une pastille
   colorée : à cette taille, une pastille fait « menu de tableau de bord ». */
.nav-lien::after {
  content: ""; position: absolute; left: .8rem; right: .8rem; bottom: .3rem; height: 1.5px;
  border-radius: 2px; background: var(--bleu);
  transform: scaleX(0); transform-origin: center;
  transition: transform .28s var(--sortie);
}
.nav-lien:hover::after { transform: scaleX(.42); background: var(--gris-clair); }
.nav-lien[aria-current="page"] { color: var(--bleu); font-weight: 600; }
.nav-lien[aria-current="page"]::after { transform: scaleX(1); }

.entete-actions { display: flex; align-items: center; gap: .5rem; flex: none; }

/* Séparateur discret entre la navigation et les actions. */
.entete-actions::before {
  content: ""; width: 1px; height: 22px; margin-right: .35rem;
  background: var(--filet);
}

.menu-bascule, .menu-bouton { display: none; }

/* ---------------------------------------------------------------- boutons -- */

.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .66rem 1.15rem;
  border-radius: var(--rayon-s); border: 1px solid transparent;
  font-size: .92rem; font-weight: 600; letter-spacing: -.005em; cursor: pointer;
  white-space: nowrap;
  transition: background-color .18s var(--sortie), border-color .18s var(--sortie),
              box-shadow .18s var(--sortie), transform .12s var(--sortie);
}
.bouton:hover { text-decoration: none; }
.bouton:active { transform: translateY(1px) scale(.995); }
.bouton svg { flex: none; transition: transform .28s var(--sortie); }
.bouton:hover svg { transform: translateX(2px); }

/* Un aplat franc. Le dégradé plus le liseré blanc interne, c'est la signature
   du bouton « joli par défaut » : riche de loin, cheap de près. */
.bouton-primaire { background: var(--encre); color: #fff; }
.bouton-primaire:hover { background: #000; transform: translateY(-1px); box-shadow: 0 10px 22px -14px rgba(11, 13, 16, .55); }

.bouton-secondaire { background: transparent; color: var(--texte); border-color: var(--filet-fort); }
.bouton-secondaire:hover { border-color: var(--texte); }

/* Action tertiaire de la barre : lisible, sans peser face au bouton principal. */
.bouton-fantome {
  background: transparent; color: var(--gris); border-color: transparent;
  padding: .55rem .8rem; font-weight: 550;
}
.bouton-fantome:hover { color: var(--bleu-lien); background: rgba(29,89,160,.06); }

.bouton-large { width: 100%; justify-content: center; }

/* --------------------------------------------------------------- sections -- */

.section { padding: clamp(3rem, 2rem + 4vw, 5.5rem) 0; }
.section-claire { background: var(--carte); border-block: 1px solid var(--bord); }

.chapeau { max-width: 62ch; }
.chapeau .sur-titre {
  display: inline-flex; align-items: center; gap: .5rem; margin-bottom: .9rem;
  font-size: .72rem; font-weight: 650; letter-spacing: .17em; text-transform: uppercase;
  color: var(--bleu-lien);
}
/* Un trait court plutôt qu'une pastille : plus sobre, et ça guide l'œil vers
   le titre au lieu de lui faire concurrence. */
.chapeau .sur-titre::before {
  content: ""; width: 20px; height: 1px;
  background: var(--bleu);
}
.chapeau p { color: var(--gris); font-size: 1.06rem; }

/* ------------------------------------------------------------------ héros -- */
/*
   Parti pris : la page s'ouvre sur du TEXTE, pas sur une illustration. Ce
   qu'on vend tient en une phrase ; le visuel vient ensuite l'expliquer.
   Aucun halo, aucun dégradé, aucun verre dépoli — la profondeur vient du
   blanc et de filets d'un pixel, pas d'effets.
*/

.heros {
  position: relative; overflow: hidden;
  padding: clamp(3.2rem, 2rem + 5vw, 6.5rem) 0 clamp(3rem, 2rem + 4vw, 5rem);
  border-bottom: 1px solid var(--filet);
}

/* Une trame technique, alignée sur la colonne de texte : elle évoque le plan
   de construction. À la limite du perceptible — si on la remarque, c'est raté. */
.heros::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(90deg, rgba(14,22,32,.05) 1px, transparent 1px);
  background-size: 96px 100%;
  background-position: center;
  mask-image: linear-gradient(180deg, #000, transparent 78%);
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 78%);
}

.heros-grille {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(2rem, 5vw, 5rem); align-items: center;
}

/* Le sur-titre est en chasse fixe : c'est le signe d'un atelier technique,
   et ça tranche avec la graisse du titre juste en dessous. */
.heros-oeil {
  display: inline-flex; align-items: center; gap: .7rem; margin-bottom: 1.5rem;
  font-family: var(--mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gris);
}
.heros-oeil::before { content: ""; width: 26px; height: 1px; background: var(--bleu); }

.heros h1 {
  font-size: clamp(2.3rem, 1.3rem + 3.6vw, 4.1rem);
  font-weight: 700; line-height: 1.03; letter-spacing: -.035em;
  margin-bottom: 1.1rem; max-width: 15ch;
}
/* Le soulignement est tracé, pas peint : il se dessine à l'ouverture. */
.souligne { position: relative; white-space: nowrap; }
.souligne::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .06em; height: 3px;
  background: var(--bleu-vif); transform-origin: left;
  transform: scaleX(0); animation: trait .7s var(--sortie) .55s forwards;
}
@keyframes trait { to { transform: scaleX(1); } }

.heros .accroche {
  font-size: 1.06rem; line-height: 1.7; color: var(--gris); max-width: 48ch; margin-bottom: 2rem;
}
.heros-actions { display: flex; flex-wrap: wrap; gap: .7rem; }

/* ---- le panneau : un moteur, des sites ------------------------------------ */

.schema {
  border: 1px solid var(--filet); border-radius: var(--rayon);
  background: var(--carte); overflow: hidden;
}
.schema-tete {
  display: flex; align-items: center; gap: .6rem;
  padding: .7rem 1rem; border-bottom: 1px solid var(--filet);
  font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gris);
}
.schema-tete .point {
  width: 6px; height: 6px; border-radius: 50%; background: var(--bon);
  animation: respire 2.6s var(--sortie) infinite;
}
@keyframes respire { 50% { opacity: .35; } }
.schema-tete .droite { margin-left: auto; color: var(--gris-clair); }

.schema-corps { padding: 1.1rem 1rem 1.3rem; }

.schema-titre {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--gris-clair); margin-bottom: .6rem;
}

.puces { display: flex; flex-wrap: wrap; gap: .3rem; }
.puce {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .01em;
  padding: .28rem .55rem; border: 1px solid var(--filet); border-radius: 5px;
  color: var(--gris); background: #FCFDFE;
  opacity: 0; transform: translateY(4px);
  animation: puce-entre .4s var(--sortie) forwards;
}
@keyframes puce-entre { to { opacity: 1; transform: none; } }
.puce:nth-child(1) { animation-delay: .30s } .puce:nth-child(2) { animation-delay: .35s }
.puce:nth-child(3) { animation-delay: .40s } .puce:nth-child(4) { animation-delay: .45s }
.puce:nth-child(5) { animation-delay: .50s } .puce:nth-child(6) { animation-delay: .55s }
.puce:nth-child(7) { animation-delay: .60s } .puce:nth-child(8) { animation-delay: .65s }

/* Le tronc et ses branches : dessinés au filet, avec une impulsion qui
   descend en boucle — la mise à jour qui part vers tous les sites. */
.schema-liens { position: relative; height: 46px; margin: .9rem 0 .2rem; }
.schema-liens .tronc {
  position: absolute; left: 50%; top: 0; width: 1px; height: 22px;
  background: var(--filet-fort);
}
.schema-liens .barre {
  position: absolute; left: 16.6%; right: 16.6%; top: 22px; height: 1px;
  background: var(--filet-fort);
}
.schema-liens .branche {
  position: absolute; top: 22px; width: 1px; height: 24px; background: var(--filet-fort);
}
.schema-liens .branche:nth-of-type(1) { left: 16.6%; }
.schema-liens .branche:nth-of-type(2) { left: 50%; }
.schema-liens .branche:nth-of-type(3) { left: 83.4%; }

.schema-liens .impulsion {
  position: absolute; left: 50%; top: 0; width: 3px; height: 3px; margin-left: -1px;
  border-radius: 50%; background: var(--bleu-vif);
  animation: descend 2.8s var(--sortie) infinite;
}
@keyframes descend {
  0%   { transform: translateY(0);    opacity: 0; }
  12%  { opacity: 1; }
  46%  { transform: translateY(22px); opacity: 1; }
  100% { transform: translateY(22px); opacity: 0; }
}

.schema-sites { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.site-vignette {
  border: 1px solid var(--filet); border-radius: 6px; padding: .55rem .5rem;
  text-align: center; font-family: var(--mono); font-size: .6rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--gris-clair);
}
.site-vignette b {
  display: block; height: 3px; border-radius: 2px; margin-bottom: .45rem;
  background: var(--filet-fort);
}
.site-vignette:nth-child(1) b { background: #2E90F0; width: 70%; }
.site-vignette:nth-child(2) b { background: #1D59A0; width: 45%; }
.site-vignette:nth-child(3) b { background: #0E1620; width: 85%; }

.schema-pied {
  padding: .65rem 1rem; border-top: 1px solid var(--filet);
  font-size: .76rem; color: var(--gris-clair);
}

/* ---- bandeau de preuves : une bande de cellules, pas une soupe d'icônes --- */

.bande {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--filet); border-radius: var(--rayon);
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
  background: var(--carte);
}
.bande > div { padding: 1.1rem 1.2rem; border-left: 1px solid var(--filet); }
.bande > div:first-child { border-left: 0; }
.bande dt {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gris-clair); margin-bottom: .3rem;
}
.bande dd { margin: 0; font-size: .92rem; font-weight: 550; line-height: 1.45; }

/* ------------------------------------------------------------------ cartes */

.grille { display: grid; gap: 1.1rem; }
.grille-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grille-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grille-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.carte {
  position: relative;
  background: var(--carte);
  border: 1px solid var(--filet); border-radius: var(--rayon);
  padding: 1.5rem;
  /* ⚠️ LE MOUVEMENT EST DE TROIS PIXELS, ET C'EST VOLONTAIRE.
     Une carte qui bondit de dix pixels sous le curseur fait sursauter la page
     entière quand on la traverse en diagonale. Trois pixels et une ombre courte
     suffisent à dire « ceci répond » ; au-delà, on décore. */
  transition: border-color .24s var(--sortie), transform .24s var(--sortie),
              box-shadow .24s var(--sortie);
}
.carte:hover {
  transform: translateY(-3px);
  border-color: var(--filet-fort);
  box-shadow: 0 14px 30px -20px rgba(11, 13, 16, .30);
}
.carte:hover .carte-icone { color: var(--bleu); border-color: #C9DDF6; }
.carte-icone { transition: color .24s var(--sortie), border-color .24s var(--sortie); }
.carte h3 { margin-bottom: .4rem; letter-spacing: -.012em; }
.carte p { color: var(--gris); font-size: .945rem; margin-bottom: 0; }

/* L'icône est un trait, pas une pastille de couleur. */
.carte-icone {
  width: 24px; height: 24px; margin-bottom: 1rem;
  display: grid; place-items: center; color: var(--bleu);
}

.carte-lien { display: block; color: inherit; }
.carte-lien:hover { text-decoration: none; border-color: var(--texte); }

/* ------------------------------------------------------------------ offres */

.offre {
  display: flex; flex-direction: column; position: relative;
  background: var(--carte);
  border: 1px solid var(--filet); border-radius: var(--rayon);
  padding: 1.7rem;
  transition: border-color .2s var(--sortie);
}
.offre:hover { border-color: var(--filet-fort); }

/* La mise en avant se joue sur le contraste, pas sur un cadre coloré : une
   seule carte change de camp, et ça suffit à la désigner. */
.offre-mise-en-avant { background: var(--encre); border-color: var(--encre); color: #fff; }
.offre-mise-en-avant h3, .offre-mise-en-avant .prix { color: #fff; }
.offre-mise-en-avant .offre-chapeau, .offre-mise-en-avant li { color: #A9B4C2; }
.offre-mise-en-avant .prix small { color: #8A94A3; }
.offre-mise-en-avant li::before { border-color: var(--bleu-vif); }
.offre-mise-en-avant .bouton-primaire { background: #fff; color: var(--encre); }
.offre-mise-en-avant .bouton-primaire:hover { background: #E7EBF1; }
.offre-mise-en-avant::before {
  content: "Le plus demandé";
  position: absolute; top: 1.75rem; right: 1.7rem;
  font-family: var(--mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--bleu-vif);
}
.offre h3 { font-size: 1.25rem; }
.offre .prix { font-size: 2rem; font-weight: 800; color: var(--bleu-profond); line-height: 1.1; }
.offre .prix small { font-size: .8rem; font-weight: 550; color: var(--gris); display: block; letter-spacing: 0; }
.offre ul { list-style: none; padding: 0; margin: 1.2rem 0; display: grid; gap: .55rem; }
.offre li { position: relative; padding-left: 1.6rem; font-size: .93rem; color: var(--gris); }
.offre li::before {
  content: ""; position: absolute; left: 0; top: .48em;
  width: .78rem; height: .42rem;
  border-left: 2px solid var(--bleu-vif); border-bottom: 2px solid var(--bleu-vif);
  transform: rotate(-45deg);
}
.offre .bouton { margin-top: auto; }

/* ------------------------------------------------------------------ étapes */

.etapes { counter-reset: etape; display: grid; gap: 1.1rem; }
.etape {
  display: grid; grid-template-columns: 46px 1fr; gap: 1.1rem; align-items: start;
  background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 1.3rem;
}
.etape { transition: border-color .28s var(--sortie), box-shadow .28s var(--sortie); }
.etape:hover { border-color: #C9DDF6; box-shadow: var(--ombre); }
.etape::before {
  counter-increment: etape; content: counter(etape);
  width: 46px; height: 46px; border-radius: 50%;
  background: transparent; color: var(--bleu);
  border: 1px solid var(--filet-fort);
  display: grid; place-items: center; font-weight: 600; font-size: .95rem;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
}
.etape h3 { margin-bottom: .2rem; }
.etape p { color: var(--gris); margin: 0; font-size: .95rem; }

/* ---------------------------------------------------------------- journal  */

.billet-liste { display: grid; gap: 1rem; }
.billet-carte { display: grid; grid-template-columns: 150px 1fr; gap: 1.3rem; align-items: baseline; }
.billet-carte time { color: var(--gris-clair); font-size: .85rem; font-variant-numeric: tabular-nums; }
.billet-carte h3 { margin-bottom: .25rem; }
.billet-corps { max-width: 72ch; }
.billet-corps h2 { margin-top: 2rem; }
.billet-corps img { border-radius: var(--rayon); border: 1px solid var(--bord); margin: 1.5rem 0; }
.billet-corps blockquote {
  margin: 1.5rem 0; padding: .2rem 0 .2rem 1.2rem;
  border-left: 3px solid var(--bleu-vif); color: var(--gris); font-style: italic;
}
.billet-corps code { font-family: var(--mono); font-size: .9em; background: var(--creme); padding: .1em .35em; border-radius: 4px; }
.etiquette {
  display: inline-block; font-size: .72rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase;
  color: var(--bleu-lien); background: var(--lavis); padding: .2rem .55rem; border-radius: 999px;
}

/* ----------------------------------------------------------------- statut  */

/* La troisieme colonne a une largeur fixe : en « auto » elle suivait la
   longueur de l'etiquette, si bien que « Maintenance planifiee » decalait sa
   barre par rapport aux autres. Toutes les barres commencent et finissent
   desormais au meme endroit, ce qui est la seule facon de les comparer. */
.statut-ligne {
  display: grid; grid-template-columns: 190px 1fr 172px; gap: 1rem; align-items: center;
  padding: .85rem 0; border-bottom: 1px solid var(--bord);
}
.statut-ligne:last-child { border-bottom: 0; }
/* Trente barres seulement : chacune peut être large, et se survoler sans
   viser. Avec quatre-vingt-dix, on visait deux pixels. */
.statut-barres { display: flex; gap: 4px; height: 30px; }
.statut-jour {
  position: relative; flex: 1 1 0; min-width: 2px; border-radius: 2px;
  background: var(--bon); transition: transform .12s ease;
  min-height: 100%; border-radius: 3px;
}

/* Au survol d'une case, une bulle flottante donne le jour, l'etat et ce que
   Kontrol a constate. Elle est en `attr()` : aucun script, aucun style en
   ligne, et elle disparait avec le pointeur. */
.statut-jour:hover { transform: scaleY(1.22); z-index: 3; }
.statut-jour[data-info]:hover::after {
  content: attr(data-info);
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  z-index: 4; width: max-content; max-width: 15rem;
  padding: .5rem .7rem; border-radius: 8px;
  background: #0B1420; color: #fff;
  font-size: .76rem; line-height: 1.45; font-weight: 500; letter-spacing: 0;
  white-space: pre-line; text-align: left; pointer-events: none;
  box-shadow: 0 8px 24px rgba(11,20,32,.22);
}
.statut-jour[data-info]:hover::before {
  content: ""; position: absolute; bottom: calc(100% + 2px); left: 50%;
  transform: translateX(-50%); z-index: 4;
  border: 6px solid transparent; border-top-color: #0B1420;
  pointer-events: none;
}
/* Aux deux extremites, la bulle sortirait de la carte : elle se recale. */
.statut-jour:first-child[data-info]:hover::after { left: 0; transform: none; }
.statut-jour:last-child[data-info]:hover::after  { left: auto; right: 0; transform: none; }
.statut-barres { overflow: visible; }
/* Les six couleurs de Kontrol, telles quelles. Le vocabulaire est le sien :
   les nommer autrement ici, c'est se préparer à afficher une légende qui ne
   correspond plus à ce qu'on dessine. */
.statut-jour.vert    { background: var(--bon); }
.statut-jour.orange  { background: var(--attention); }
.statut-jour.rouge   { background: var(--critique); }
.statut-jour.bleu    { background: var(--bleu); }
.statut-jour.violet  { background: #7C4DBE; }
/* Pas de mesure ce jour-là. Gris, et surtout pas vert : Kontrol ne dit pas
   « tout va bien », il ne dit rien. */
.statut-jour.gris    { background: var(--bord); }

/* Deux fenêtres le même jour : maintenance en haut, exercice en bas, séparées
   par un trait. Une barre coupée dit tout de suite qu'il s'est passé deux
   choses — une couleur unique en aurait caché une. */
.statut-jour.partagee {
  background: linear-gradient(
    to bottom,
    var(--bleu) 0 calc(50% - 1px),
    #fff calc(50% - 1px) calc(50% + 1px),
    #7C4DBE calc(50% + 1px) 100%
  );
}

.statut-legende {
  display: flex; flex-wrap: wrap; gap: .5rem 1.3rem;
  padding-top: 1rem; border-top: 1px solid var(--bord);
}
.legende-item {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .78rem; color: var(--gris);
}
.legende-pastille { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.legende-pastille.vert   { background: var(--bon); }
.legende-pastille.orange { background: var(--attention); }
.legende-pastille.rouge  { background: var(--critique); }
.legende-pastille.bleu   { background: var(--bleu); }
.legende-pastille.violet { background: #7C4DBE; }
.legende-pastille.gris   { background: var(--bord); }

/* Le verdict d'un service est encadré : un bloc qui se détache invite à
   s'en approcher, là où une ligne de texte nue ne dit rien de ce qu'elle
   cache. Le cadre s'anime au survol pour confirmer qu'il se passe quelque
   chose. */
.statut-verdict {
  /* Le cadre prend toute la colonne : trois largeurs différentes selon la
     longueur du mot faisaient une bordure qui ondule. */
  display: flex; flex-direction: column; align-items: flex-end; gap: .1rem;
  width: 100%; padding: .5rem .75rem;
  border: 1px solid var(--bord); border-radius: 10px;
  transition: border-color .16s ease, background .16s ease;
}
.statut-verdict[data-info] { position: relative; cursor: help; }
.statut-verdict[data-info]:hover,
.statut-verdict[data-info]:focus-visible {
  border-color: var(--filet-fort, var(--gris-clair)); background: var(--carte, #F7F8FA);
}
.statut-verdict .note-mini { white-space: nowrap; }

.statut-verdict[data-info]:hover::after,
.statut-verdict[data-info]:focus-visible::after {
  content: attr(data-info);
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 4;
  width: max-content; max-width: 16rem;
  padding: .5rem .7rem; border-radius: 8px;
  background: #0B1420; color: #fff;
  font-size: .74rem; font-weight: 500; line-height: 1.5;
  white-space: pre-line; text-align: left; pointer-events: none;
  box-shadow: 0 8px 24px rgba(11,20,32,.22);
}

.statut-compteurs { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.statut-compteurs strong { font-size: 1.3rem; }
.pastille {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .84rem; font-weight: 650; color: var(--bon);
}
.pastille::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
/* Le vert est nomme, comme les autres : une pastille sans classe passait
   pour un oubli. */
.pastille.bon       { color: var(--bon); }
.pastille.attention { color: var(--attention); }
.pastille.critique  { color: var(--critique); }
.pastille.inconnu   { color: var(--gris-clair); }
/* Ni vert ni rouge : une intervention prévue n'est pas une panne. */
.pastille.maintenance { color: var(--bleu-lien); }

/* --------------------------------------------------------------- formulaire */

.formulaire { display: grid; gap: 1.05rem; max-width: 640px; }
.champ { display: grid; gap: .35rem; }
.champ label { font-size: .89rem; font-weight: 650; }
.champ .aide { font-size: .82rem; color: var(--gris-clair); }
.champ input, .champ textarea, .champ select {
  font: inherit; font-size: .95rem;
  padding: .68rem .8rem;
  border: 1px solid var(--bord); border-radius: var(--rayon-s);
  background: var(--carte); color: var(--texte);
  width: 100%;
}
.champ input:focus, .champ textarea:focus, .champ select:focus { border-color: var(--bleu-vif); }
.champ textarea { min-height: 150px; resize: vertical; }
.champ-erreur input, .champ-erreur textarea { border-color: var(--critique); }
.message-erreur { color: var(--critique); font-size: .85rem; }

/* Piège à robots : invisible pour l'humain, jamais annoncé aux lecteurs d'écran. */
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.avis {
  padding: .95rem 1.1rem; border-radius: var(--rayon); border: 1px solid var(--bord);
  background: var(--lavis); font-size: .93rem;
}
.avis-succes  { background: #E9F8F0; border-color: #BFE6D2; }
.avis-erreur  { background: #FDECEE; border-color: #F6C7CD; }

/* ---------------------------------------------------------------- assistant */

/* Le lanceur : un objet posé sur la page, pas une pastille collée dans un coin.
   Le symbole de la marque en tient lieu d'icône — il est déjà reconnaissable. */
.assistant-ouvrir {
  position: fixed; right: 24px; bottom: 24px; z-index: 60;
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .55rem 1.05rem .55rem .55rem; border: 0; border-radius: 999px;
  background: #fff; border: 1px solid var(--filet-fort);
  color: var(--texte); font: inherit; font-size: .88rem; font-weight: 600;
  box-shadow: var(--ombre-forte); cursor: pointer;
  transition: border-color .2s var(--sortie);
}
.assistant-ouvrir:hover { border-color: var(--texte); }
.assistant-ouvrir .jeton {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--lavis);
}
.assistant-ouvrir .jeton img { width: 21px; height: 21px; }

.assistant {
  position: fixed; right: 24px; bottom: 24px; z-index: 61;
  width: min(408px, calc(100vw - 32px));
  height: min(624px, calc(100dvh - 48px));
  display: flex; flex-direction: column;
  background: var(--carte);
  border-radius: 20px;
  box-shadow: 0 2px 6px rgba(11,13,16,.06), 0 32px 64px -20px rgba(11,13,16,.34),
              inset 0 0 0 1px rgba(11,13,16,.07);
  overflow: hidden;
  /* Fermé, le panneau reste dans le DOM mais est inerte : l'animation part et
     revient au coin bas-droit, d'où il est censé sortir. */
  visibility: hidden; opacity: 0;
  transform: translateY(14px) scale(.96); transform-origin: 100% 100%;
  transition: opacity .22s var(--sortie), transform .34s var(--vif), visibility 0s .36s;
}
.assistant[data-ouvert="1"] {
  visibility: visible; opacity: 1; transform: none;
  transition: opacity .2s var(--sortie), transform .38s var(--vif), visibility 0s;
}

.assistant-entete {
  display: flex; align-items: center; gap: .7rem;
  padding: .85rem 1rem;
  background: #fff; border-bottom: 1px solid var(--filet);
}
.assistant-avatar {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; flex: none;
  background: var(--lavis);
}
.assistant-avatar img { width: 22px; height: 22px; }
.assistant-entete strong { display: block; font-size: .93rem; letter-spacing: -.01em; }
.assistant-entete small {
  display: inline-flex; align-items: center; gap: .35rem;
  color: var(--gris-clair); font-size: .74rem;
}
.assistant-entete small::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--bon);
  box-shadow: 0 0 0 3px rgba(14,159,79,.14);
}
.assistant-fermer {
  margin-left: auto; border: 0; background: transparent; cursor: pointer;
  color: var(--gris-clair); width: 30px; height: 30px; border-radius: 8px;
  display: grid; place-items: center; font-size: 1.15rem; line-height: 1;
  transition: background-color .2s var(--sortie), color .2s var(--sortie);
}
.assistant-fermer:hover { background: rgba(11,13,16,.05); color: var(--texte); }

.assistant-fil {
  flex: 1; overflow-y: auto; overscroll-behavior: contain;
  padding: 1.1rem 1rem; display: grid; gap: .55rem; align-content: start;
  background: var(--carte);
  scrollbar-width: thin;
}

.assistant-msg {
  max-width: 86%; padding: .62rem .85rem; border-radius: 16px;
  font-size: .905rem; line-height: 1.6; white-space: pre-wrap;
  animation: msg-entre .32s var(--sortie) both;
}
@keyframes msg-entre { from { opacity: 0; transform: translateY(6px); } }

.assistant-msg.visiteur {
  justify-self: end; background: var(--encre); color: #fff; border-bottom-right-radius: 5px;
}
.assistant-msg.robot {
  justify-self: start; background: #F5F7FA; color: var(--texte); border-bottom-left-radius: 5px;
}

/* Trois points qui respirent — un « … » figé fait bricolage. */
.assistant-frappe { display: inline-flex; gap: 4px; align-items: center; padding: .2rem 0; }
.assistant-frappe i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--gris-clair);
  animation: frappe 1.25s var(--sortie) infinite;
}
.assistant-frappe i:nth-child(2) { animation-delay: .16s; }
.assistant-frappe i:nth-child(3) { animation-delay: .32s; }
@keyframes frappe {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

/* Amorces : elles disent ce que l'assistant sait faire, ce qu'un champ vide ne
   dit pas. Elles disparaissent à la première question. */
.assistant-amorces { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .2rem; }
.assistant-amorces button {
  font: inherit; font-size: .8rem; font-weight: 500; cursor: pointer;
  padding: .38rem .7rem; border-radius: 999px;
  border: 1px solid var(--bord); background: #fff; color: var(--gris);
  transition: border-color .2s var(--sortie), color .2s var(--sortie), background-color .2s var(--sortie);
}
.assistant-amorces button:hover { border-color: #C9DDF6; color: var(--bleu-lien); background: #FBFDFF; }

.assistant-pied {
  padding: .7rem; display: grid; gap: .55rem;
  background: #fff; border-top: 1px solid var(--filet);
}
.assistant-saisie {
  display: flex; align-items: center; gap: .4rem;
  padding: .3rem .3rem .3rem .85rem;
  border: 1px solid var(--bord); border-radius: 999px; background: #fff;
  transition: border-color .2s var(--sortie), box-shadow .2s var(--sortie);
}
.assistant-saisie:focus-within {
  border-color: #B9D6F7; box-shadow: 0 0 0 3px rgba(46,144,240,.14);
}
.assistant-saisie input {
  flex: 1; min-width: 0; font: inherit; font-size: .9rem;
  border: 0; outline: 0; background: transparent; padding: .42rem 0;
}
.assistant-envoyer {
  flex: none; width: 34px; height: 34px; border: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center;
  background: var(--encre); color: #fff;
  transition: background-color .2s var(--sortie), opacity .2s var(--sortie);
}
.assistant-envoyer:hover { background: #000; }
.assistant-envoyer[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.assistant-note { font-size: .715rem; color: var(--gris-clair); text-align: center; line-height: 1.5; }

/* --------------------------------------------------------------------- pied */

.pied {
  position: relative; background: #fff; border-top: 1px solid var(--bord);
  padding-top: 3rem; margin-top: 0;
}

.pied-grille {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.4fr; gap: 2rem; padding-bottom: 2.4rem;
}
.pied h2 { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gris-clair); margin-bottom: .9rem; }
.pied nav { display: grid; gap: .45rem; align-content: start; }
.pied nav a { color: var(--gris); font-size: .92rem; }
.pied nav a:hover { color: var(--bleu-lien); }
.pied-note { color: var(--gris); font-size: .9rem; margin-top: .9rem; max-width: 38ch; }
.pied-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.pied-liste li { position: relative; padding-left: 1.15rem; font-size: .87rem; color: var(--gris); }
.pied-liste li::before {
  content: ""; position: absolute; left: 0; top: .58em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--bleu-vif);
}
.pied-bas {
  display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; justify-content: space-between;
  padding: 1.1rem 0; border-top: 1px solid var(--bord); color: var(--gris-clair); font-size: .84rem;
}
.pied-bas p { margin: 0; }
/* Ce lien est seul dans son paragraphe : il ne bénéficie pas de l'exception
   « lien dans une phrase » sur la taille de cible. À 13 px il ne faisait que
   16 px de haut ; le padding vertical le monte au-dessus des 24 px exigés,
   sans rien déplacer puisque .pied-bas est déjà en flex. */
.pied-bas a { display: inline-block; padding: .3rem 0; }
/* La bulle de l'assistant flotte en bas à droite, exactement là où se termine
   la dernière ligne du pied : arrivé en bas de page, elle recouvrait le lien
   de statut. Elle occupe 74 px depuis le bas de la fenêtre (50 de haut, 24
   d'écart) ; on en réserve 88, le reste étant la respiration. À réajuster si
   la bulle grandit. Et seulement sur les pages qui la portent, sinon on
   ajouterait du vide sous le pied pour rien. */
body:has(.assistant-ouvrir) .pied-bas { padding-bottom: 5.5rem; }

/* ------------------------------------------------------------- texte long   */

.texte-long { max-width: 74ch; }
.texte-long h2 { margin-top: 2.2rem; }
.texte-long h3 { margin-top: 1.6rem; }
.texte-long ul, .texte-long ol { padding-left: 1.3rem; color: var(--gris); }
.texte-long li { margin-bottom: .4rem; }
.texte-long table { width: 100%; border-collapse: collapse; margin: 1.2rem 0; font-size: .92rem; }
.texte-long th, .texte-long td { text-align: left; padding: .6rem .7rem; border-bottom: 1px solid var(--bord); vertical-align: top; }
.texte-long th { color: var(--gris); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; }

.tableau-defilant { overflow-x: auto; }

/* ------------------------------------------------------------- adaptatif    */

@media (max-width: 960px) {
  .heros-grille { grid-template-columns: 1fr; }
  .heros-visuel { order: -1; }
  .grille-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pied-grille { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1000px) {
  .menu-bouton {
    display: grid; gap: 5px; place-content: center; margin-left: auto;
    width: 40px; height: 40px; cursor: pointer;
    border: 1px solid var(--bord); border-radius: 10px; background: rgba(255,255,255,.7);
  }
  .menu-bouton span {
    display: block; width: 18px; height: 1.8px; background: var(--anthracite); border-radius: 2px;
    transition: transform .3s var(--sortie), opacity .2s var(--sortie);
  }
  /* Le bouton devient une croix : on voit que le même geste referme. */
  .menu-bascule:checked ~ .menu-bouton span:nth-child(1) { transform: translateY(6.8px) rotate(45deg); }
  .menu-bascule:checked ~ .menu-bouton span:nth-child(2) { opacity: 0; }
  .menu-bascule:checked ~ .menu-bouton span:nth-child(3) { transform: translateY(-6.8px) rotate(-45deg); }

  .nav {
    position: absolute; top: 100%; left: 0; right: 0; margin: 0;
    flex-direction: column; align-items: stretch; gap: .1rem;
    background: #fff;
    border-top: 1px solid var(--filet);
    box-shadow: var(--ombre-forte);
    padding: .7rem 1.25rem 1.1rem;
    visibility: hidden; opacity: 0; transform: translateY(-8px);
    transition: opacity .22s var(--sortie), transform .28s var(--sortie), visibility 0s .3s;
  }
  .menu-bascule:checked ~ .nav {
    visibility: visible; opacity: 1; transform: none;
    transition: opacity .22s var(--sortie), transform .28s var(--sortie), visibility 0s;
  }
  .nav-lien { padding: .7rem .2rem; font-size: 1rem; }
  .nav-lien::after { left: .2rem; right: auto; width: 18px; bottom: .45rem; }
  .entete-actions {
    flex-direction: column; align-items: stretch; gap: .5rem;
    margin: .7rem 0 0; padding-top: .8rem;
    border-top: 1px solid var(--bord);
  }
  .entete-actions::before { display: none; }
  .entete-actions .bouton { justify-content: center; }
}

@media (max-width: 780px) {
  .grille-2, .grille-3, .grille-4 { grid-template-columns: 1fr; }
  .billet-carte { grid-template-columns: 1fr; gap: .2rem; }
  .statut-ligne { grid-template-columns: 1fr; gap: .4rem; }
  .pied-grille { grid-template-columns: 1fr; }
  .assistant { right: 12px; bottom: 12px; width: calc(100vw - 24px); height: calc(100dvh - 24px); border-radius: 16px; }
  .assistant-ouvrir { right: 14px; bottom: 14px; }
}

/* Respect du réglage système : aucune animation imposée. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

@media print {
  .entete, .pied, .assistant, .assistant-ouvrir, .saut { display: none !important; }
  body { background: #fff; }
}

/* ==========================================================================
   Utilitaires et micro-composants.

   Ils existent parce que la politique de contenu du site interdit les styles
   en ligne — et elle a raison : un attribut style="" est du CSS que personne
   ne relit, que le navigateur refuse, et qui obligerait à ouvrir
   'unsafe-inline' pour toute la page. Chaque valeur ponctuelle vit donc ici.

   L'échelle des marges est volontairement courte : cinq crans, pas trente
   valeurs arbitraires.
   ========================================================================== */

.mt-1 { margin-top: .7rem; }
.mt-2 { margin-top: 1.1rem; }
.mt-3 { margin-top: 1.6rem; }
.mt-4 { margin-top: 2.2rem; }
.mt-5 { margin-top: 2.6rem; }
.mt-0 { margin: .4rem 0 0; }          /* colle un complément sous son bloc */

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: .8rem; }
.mb-2 { margin-bottom: 1.2rem; }
.ml-2 { margin-left: .7rem; }

.centre         { text-align: center; }
.aligne-droite  { text-align: right; }
.aligne-haut    { align-items: start; }
.flotte-droite  { float: right; }
.coupe-mot      { word-break: break-all; }
.bloc-aere      { padding-block: 2rem; }

.rangee        { display: flex; flex-wrap: wrap; gap: .7rem; }
.rangee-centre { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; }

/* Un paragraphe d'accompagnement centré : la mesure de lecture reste courte
   même quand le conteneur est large. */
.mesure { color: var(--gris); max-width: 54ch; margin: 0 auto 1.7rem; }

.note       { color: var(--gris-clair); font-size: .86rem; }
.note-mini  { color: var(--gris-clair); font-size: .79rem; }
.note-maj   { color: var(--gris-clair); font-size: .86rem; }
.t-normal   { font-size: .95rem; }
.pastille-large { font-size: 1rem; }
.offre-chapeau  { color: var(--gris); font-size: .93rem; }

/* Cases à cocher : elles ne doivent pas s'étirer comme les champs texte. */
.case       { width: auto; }
.case-haute { margin-top: .25rem; }
.case-libelle {
  display: flex; gap: .6rem; align-items: flex-start; font-weight: 450;
}


/* ==========================================================================
   Composants de la page d'accueil — suite.
   ========================================================================== */

/* Grille au filet : les cellules partagent leurs bordures au lieu de flotter
   chacune dans sa carte. Plus calme, et ça tient tout seul l'alignement. */
.grille-filet {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--filet); border-radius: var(--rayon);
  overflow: hidden; background: var(--carte);
}
.grille-filet > article {
  padding: 1.7rem 1.6rem;
  border-left: 1px solid var(--filet); border-top: 1px solid var(--filet);
  transition: background-color .2s var(--sortie);
}
.grille-filet > article:nth-child(3n + 1) { border-left: 0; }
.grille-filet > article:nth-child(-n + 3) { border-top: 0; }
.grille-filet > article:hover { background: #FCFDFE; }
.grille-filet h3 { font-size: 1.02rem; margin-bottom: .45rem; letter-spacing: -.012em; }
.grille-filet p { color: var(--gris); font-size: .93rem; margin: 0; }
.grille-filet .numero {
  display: block; font-family: var(--mono); font-size: .64rem; letter-spacing: .12em;
  color: var(--bleu); margin-bottom: .9rem;
}

/* Deux colonnes éditoriales, séparées par un filet vertical. */
.deux-colonnes {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 4rem); align-items: start;
}
.colonne-titre {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--gris-clair); padding-bottom: .7rem; margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--filet);
}
.colonne p { color: var(--gris); }
.colonne strong { color: var(--texte); }

/* La seule zone sombre de la page : elle sert de respiration et de conclusion.
   Une bande, pas dix — sinon c'est un thème sombre raté. */
.bloc-sombre {
  background: var(--encre); color: #fff;
  padding: clamp(3.5rem, 2.5rem + 4vw, 6rem) 0;
}
.bloc-sombre h2 {
  font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem); letter-spacing: -.03em;
  max-width: 18ch; margin-bottom: 1rem;
}
.bloc-sombre p { color: #A9B4C2; max-width: 46ch; font-size: 1.02rem; }
.bloc-sombre .bouton-primaire { background: #fff; color: var(--encre); }
.bloc-sombre .bouton-primaire:hover { background: #E7EBF1; }
.bloc-sombre .bouton-secondaire { color: #fff; border-color: #2A3644; }
.bloc-sombre .bouton-secondaire:hover { border-color: #fff; }
.sombre-grille { display: grid; grid-template-columns: 1.2fr .8fr; gap: 3rem; align-items: end; }

/* ---- entrée en scène ------------------------------------------------------
   Rien ne bouge longtemps : 420 ms, une seule fois, et jamais sur le contenu
   déjà lu. Une animation qui fait attendre est une animation ratée.

   L'entrée ne joue plus que sur la position, jamais sur l'opacité. Le fondu
   partait de la transparence totale : tant qu'un bloc n'était pas passé devant
   l'observateur, son texte était invisible — et un audit qui ne fait pas
   défiler la page le lisait comme du texte sans contraste, sur fond de body.
   Le filet de trois secondes rattrapait un visiteur, pas une machine.
   Un contenu ne doit jamais dépendre d'une animation pour être lisible ; ici
   il l'est dès la première image, l'animation ne fait plus que le déplacer.

   La garde « scripting » reste : sans script, rien ne bouge et rien n'est
   décalé, plutôt que de laisser les blocs figés quatorze pixels trop bas. */
@media (scripting: enabled) {
  .rev { transform: translateY(14px); }
}
.rev.vu {
  transform: none;
  transition: transform .48s var(--sortie);
}
.rev-1.vu { transition-delay: .05s } .rev-2.vu { transition-delay: .10s }
.rev-3.vu { transition-delay: .15s } .rev-4.vu { transition-delay: .20s }
.rev-5.vu { transition-delay: .25s } .rev-6.vu { transition-delay: .30s }
.rev-7.vu { transition-delay: .35s } .rev-8.vu { transition-delay: .40s }

/* À l'ouverture, le héros monte tout seul : pas d'observateur, pas d'attente. */
.leve { opacity: 0; transform: translateY(16px); animation: leve .6s var(--sortie) forwards; }
.leve-1 { animation-delay: .04s } .leve-2 { animation-delay: .12s }
.leve-3 { animation-delay: .20s } .leve-4 { animation-delay: .28s }
.leve-5 { animation-delay: .36s }
@keyframes leve { to { opacity: 1; transform: none; } }

@media (max-width: 980px) {
  .heros-grille { grid-template-columns: 1fr; }
  .schema { order: -1; }
  .bande { grid-template-columns: 1fr 1fr; }
  .bande > div:nth-child(3) { border-left: 0; }
  .bande > div:nth-child(n + 3) { border-top: 1px solid var(--filet); }
  .grille-filet { grid-template-columns: 1fr 1fr; }
  .grille-filet > article:nth-child(3n + 1) { border-left: 1px solid var(--filet); }
  .grille-filet > article:nth-child(2n + 1) { border-left: 0; }
  .grille-filet > article:nth-child(-n + 3) { border-top: 1px solid var(--filet); }
  .grille-filet > article:nth-child(-n + 2) { border-top: 0; }
  .deux-colonnes, .sombre-grille { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .bande { grid-template-columns: 1fr; }
  .bande > div { border-left: 0; border-top: 1px solid var(--filet); }
  .bande > div:first-child { border-top: 0; }
  .grille-filet { grid-template-columns: 1fr; }
  .grille-filet > article { border-left: 0; border-top: 1px solid var(--filet); }
  .grille-filet > article:first-child { border-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .rev, .leve, .puce, .souligne::after { opacity: 1; transform: none; animation: none; }
  .schema-liens .impulsion, .schema-tete .point { animation: none; }
}

/* ---- ça arrive l'un après l'autre -----------------------------------------

   Une grille révélée d'un bloc, c'est un rectangle qui glisse : on voit le
   mouvement, pas les cartes. Décalées de soixante millisecondes, les mêmes
   cartes se lisent de gauche à droite — l'œil suit, au lieu de constater.

   ⚠️ SUR LA POSITION SEULEMENT, JAMAIS SUR L'OPACITÉ. C'est la règle déjà
   posée plus haut pour `.rev`, et elle vaut doublement ici : un enfant de
   grille rendu transparent en attendant son tour est du texte invisible pour
   qui n'a pas de script, et du contraste nul pour un audit qui ne défile pas.
   Ici tout est lisible dès la première image ; l'animation ne fait que déplacer.

   ⚠️ ET LE DÉCALAGE S'ARRÊTE À HUIT. Au-delà, le dernier élément attendrait une
   demi-seconde après le premier — assez pour qu'on croie la page bloquée. Les
   suivants arrivent avec le huitième, ce qui ne se remarque pas. */
@media (scripting: enabled) {
  .rev-suite > * { transform: translateY(12px); }
}
.rev-suite.vu > * { transform: none; transition: transform .5s var(--sortie); }
.rev-suite.vu > *:nth-child(1) { transition-delay: .00s }
.rev-suite.vu > *:nth-child(2) { transition-delay: .06s }
.rev-suite.vu > *:nth-child(3) { transition-delay: .12s }
.rev-suite.vu > *:nth-child(4) { transition-delay: .18s }
.rev-suite.vu > *:nth-child(5) { transition-delay: .24s }
.rev-suite.vu > *:nth-child(6) { transition-delay: .30s }
.rev-suite.vu > *:nth-child(7) { transition-delay: .36s }
.rev-suite.vu > *:nth-child(n + 8) { transition-delay: .42s }

/* Le champ de saisie répond au doigt, pas seulement au clic. */
.champ input, .champ textarea, .champ select {
  transition: border-color .2s var(--sortie), box-shadow .2s var(--sortie),
              background-color .2s var(--sortie);
}

/* Une ancre interne ne doit pas atterrir sous la barre collante. */
[id] { scroll-margin-top: 5.5rem; }

@media (prefers-reduced-motion: reduce) {
  .rev-suite > *, .rev-suite.vu > * { transform: none; transition: none; }
  .carte:hover, .bouton-primaire:hover { transform: none; }
}