/* Les polices sont servies avec le site, pas depuis un tiers : le rendu est
   le même partout, hors ligne compris, et aucune requête ne part ailleurs. */
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:500;font-display:swap;src:url('polices/InstrumentSans-500.woff2') format('woff2')}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:600;font-display:swap;src:url('polices/InstrumentSans-600.woff2') format('woff2')}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:700;font-display:swap;src:url('polices/InstrumentSans-700.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('polices/IBMPlexSans-400.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('polices/IBMPlexSans-500.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('polices/IBMPlexSans-600.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('polices/IBMPlexMono-400.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('polices/IBMPlexMono-500.woff2') format('woff2')}

/* ============================================================
   myoperiA, site de présentation
   Un seul monde visuel : le navy de la marque, poussé jusqu'à
   la nuit. Le registre technique reste un détail : il ne sert
   qu'aux vraies données : numéros de dossier, montants, scores.
   ============================================================ */

:root {
  /* Le papier : un blanc bleuté, pas un blanc d'imprimante. */
  --fond:        #F2F6FB;
  --surface:     #FFFFFF;
  --surface-2:   #E9F0F8;
  --trait:       #D9E3EF;
  --trait-vif:   #B9C9DC;
  --texte:       #0A1828;
  --texte-doux:  #4C617A;
  --texte-sourd: #5A6F89;

  /* Sur fond clair, le bleu de marque se densifie pour rester lisible. */
  --bleu:       #1668E3;
  --bleu-clair: #2B8CFF;

  /* La couleur d'action ne suit pas le thème : un bouton bleu est le même
     bleu partout sur le site, et son texte est toujours blanc. */
  --action:        #1668E3;
  --action-survol: #1257C4;
  --action-encre:  #FFFFFF;
  --bleu-bg:    rgba(22, 104, 227, 0.07);
  --encre-bleu: #FFFFFF;

  /* Sémantiques, jamais décoratives */
  --ambre: #B87908;
  --rouge: #C8412F;
  --vert:  #0F8A5F;

  --ombre: 0 22px 44px -34px rgba(10, 24, 40, 0.5);
  --voile: rgba(242, 246, 251, 0.9);

  --exp:  "Instrument Sans", "Archivo", "Helvetica Neue", Arial, sans-serif;
  --sans: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  color-scheme: light;
}

/* ------------------------------------------------------------------
   Les bandes sombres : le rail, l'en-tête de page, le pied. Le noir
   encadre la lecture, il ne la porte pas.
   ------------------------------------------------------------------ */
.sombre {
  --fond:        #050C18;
  --surface:     #0B1524;
  --surface-2:   #101E31;
  --trait:       #1A2A40;
  --trait-vif:   #2A405C;
  /* Sur fond sombre, le gris bleuté passait les seuils de contraste mais se
     lisait mal : à cette taille et avec cette graisse, le ratio ne dit pas
     tout. Le texte courant est donc blanc, et seules les mentions les plus
     secondaires descendent d'un cran. */
  --texte:       #FFFFFF;
  --texte-doux:  #F0F5FB;
  --texte-sourd: #C7D7E9;
  /* Lu par ce qui est posé sur la bande sombre mais vit dans un cadre de
     capture, lequel redéfinit tous les autres jetons en clair. */
  --texte-sur-bande: #C7D7E9;

  --bleu:       #2B8CFF;
  --bleu-clair: #5EB8FF;
  --bleu-bg:    rgba(43, 140, 255, 0.10);
  --encre-bleu: #04101F;

  --ambre: #F0A92E;
  --rouge: #FF6455;
  --vert:  #3FD69A;

  --ombre: 0 30px 60px -40px #000;
  --voile: rgba(5, 12, 24, 0.9);

  color-scheme: dark;
  background: var(--fond);
  color: var(--texte);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Une lueur froide en haut de page, comme un plafonnier d'atelier. */
.halo {
  position: absolute;
  top: -18rem; left: 50%;
  width: min(80rem, 150vw); height: 34rem;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(43,140,255,.14), transparent 62%);
  pointer-events: none;
  z-index: 0;
}

.enveloppe { position: relative; z-index: 1; }

/* ---------- Rail ---------- */

.rail {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 50;
  background: var(--fond);
  border-bottom: 1px solid var(--trait);
}
.rail-int {
  max-width: 84rem;
  margin: 0 auto;
  padding: 0.8rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.marque {
  font-family: var(--exp);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.025em;
  color: var(--texte);
  text-decoration: none;
  white-space: nowrap;
}
/* Le logo remplace le mot : une image vectorielle, posée sur la ligne de
   l'îlot, dont seule la hauteur est fixée. */
.marque img { display: block; height: 1.75rem; width: auto; }
@media (max-width: 52rem) { .marque img { height: 1.5rem; } }
.nav { display: flex; gap: 1.5rem; font-size: 0.875rem; }
.nav a {
  color: var(--texte-doux);
  text-decoration: none;
  padding-block: 0.15rem;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
  transition: color 0.15s;
}
.nav a:hover { color: var(--texte); border-bottom-color: var(--bleu); }
.rail-fin { margin-left: auto; }
/* Sous 62rem la barre ne tient plus sur une ligne : le menu passe dessous et
   défile horizontalement. Le masquer laisserait le téléphone sans navigation. */
@media (max-width: 72rem) {
  .rail-int { flex-wrap: wrap; gap: 0.75rem 1.25rem; }
  .nav {
    order: 3;
    width: 100%;
    gap: 1.25rem;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.1rem;
    /* Le dégradé de droite signale qu'il reste des entrées hors écran. */
    -webkit-mask-image: linear-gradient(to right, #000 88%, transparent 100%);
    mask-image: linear-gradient(to right, #000 88%, transparent 100%);
  }
  .nav::-webkit-scrollbar { display: none; }
}

/* Le seul appel à l'action du site. */
.cta {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  border: 1px solid var(--action);
  background: var(--action);
  color: var(--action-encre);
  white-space: nowrap;
  transition: background 0.16s, color 0.16s;
}
.cta:hover { background: var(--action-survol); border-color: var(--action-survol); }
.cta .fleche { font-family: var(--sans); }

/* ---------- Trame ---------- */

.bande { border-bottom: 1px solid var(--trait); position: relative; overflow: hidden; }

/* Toutes les bandes claires sont blanches. Le gris bleuté ne sert plus à les
   séparer : c'est le filet du bas de bande qui le fait, et les captures du
   logiciel, elles-mêmes très claires, se détachent mieux sur du blanc.
   La classe « blanche » reste comprise, elle ne fait simplement plus rien de
   plus que le défaut. */
.bande:not(.sombre) { background: #FFFFFF; }
.dedans {
  max-width: 84rem;
  margin: 0 auto;
  padding-inline: 1.25rem;
  padding-block: 5.5rem;
}
@media (max-width: 52rem) { .dedans { padding-block: 3.75rem; } }


h1, h2, h3, h4 { font-family: var(--exp); text-wrap: balance; margin: 0; }

h2 {
  /* La largeur laisse respirer les titres à deux temps : le retour à la ligne
     est écrit dans le titre, il ne doit pas être imposé une seconde fois. */
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.032em;
  line-height: 1.1;
  margin-bottom: 1.4rem;
  max-width: 30ch;
}
h2 .bleu { color: var(--bleu); }

/* Le paragraphe qui prolonge un titre : plus grand que le corps, il fait
   le pont entre la phrase d'accroche et le détail. */
.chapeau {
  font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
  line-height: 1.55;
  color: var(--texte-doux);
  max-width: 54ch;
  margin-bottom: 2.25rem;
}
.chapeau strong { color: var(--texte); font-weight: 600; }
h3 { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.012em; }

p { margin: 0 0 1.05rem; max-width: 60ch; color: var(--texte-doux); }
p:last-child { margin-bottom: 0; }
p.fort { color: var(--texte); font-size: 1.0625rem; }
strong { color: var(--texte); font-weight: 600; }
em { color: var(--bleu-clair); font-style: normal; }

/* Le registre technique, réduit à ce qui est vraiment une donnée. */
.ref {
  font-family: var(--mono);
  font-size: 0.9em;
  font-variant-numeric: tabular-nums;
  color: var(--bleu-clair);
}

/* ---------- Ouverture ---------- */

.ouverture { padding-block: 4.5rem 4.25rem; }
.ouverture-grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.25rem;
  align-items: end;
}
@media (min-width: 62rem) {
  .ouverture-grille { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 4rem; }
}
.ouverture h1 {
  font-size: clamp(2rem, 4.4vw, 3.1rem);
  font-weight: 700;
  letter-spacing: -0.038em;
  line-height: 1.05;
  margin-bottom: 1.25rem;
  max-width: 17ch;
}
.ouverture h1 .bleu { color: var(--bleu); }
.ouverture-texte { font-size: 1.0625rem; color: var(--texte-doux); max-width: 46ch; }
.ouverture-texte strong { color: var(--texte); }

.repere {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--trait);
  border: 1px solid var(--trait);
  border-radius: 4px;
  overflow: hidden;
}
.repere div { background: var(--surface); padding: 1rem 1.15rem; }
.repere dt {
  font-size: 0.8125rem;
  color: var(--texte-sourd);
  margin-bottom: 0.2rem;
}
.repere dd { margin: 0; font-size: 0.9375rem; color: var(--texte); }

/* ---------- Deux mondes ---------- */

.mondes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  background: var(--trait);
  border: 1px solid var(--trait);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 2.5rem;
}
@media (min-width: 58rem) { .mondes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.monde { background: var(--surface); padding: 1.7rem 1.55rem; }
.monde.nous { background: var(--surface-2); box-shadow: inset 0 2px 0 var(--bleu); }
.monde h3 { margin-bottom: 0.5rem; }
.monde.nous h3 { color: var(--bleu-clair); }
.monde p { font-size: 0.9375rem; }
.monde-eti {
  font-size: 0.875rem;
  color: var(--texte-sourd);
  display: block;
  margin-bottom: 0.5rem;
}
.monde.nous .monde-eti { color: var(--bleu); }

/* ---------- Le parcours ---------- */

.parcours {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  background: var(--trait);
  border: 1px solid var(--trait);
  border-radius: 4px;
  overflow: hidden;
}
@media (min-width: 44rem) { .parcours { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); } }
.pas {
  background: var(--surface);
  padding: 1.35rem 1.3rem 1.55rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  transition: background 0.2s;
}
.pas:hover { background: var(--surface-2); }
.pas h3 { display: flex; gap: 0.6rem; align-items: baseline; }
.pas h3 .n {
  font-family: var(--sans);
  font-weight: 400;
  color: var(--texte-sourd);
  flex: none;
  font-size: 0.9375rem;
}
.pas h3 { font-size: 0.9375rem; }
.pas p { font-size: 0.875rem; line-height: 1.55; }

/* ---------- Fonctionnalités ---------- */

.fonctions { display: flex; flex-direction: column; gap: 5rem; margin-top: 3.25rem; }
@media (max-width: 52rem) { .fonctions { gap: 3.5rem; } }

.fonction {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
}
@media (min-width: 62rem) {
  .fonction { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 3.5rem; }
  /* Un bloc inversé échange l'ordre, pas les largeurs : le texte garde la
     même colonne d'un bloc à l'autre. */
  .fonction.inverse { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .fonction.inverse .fonction-texte { order: 2; }
  .fonction.inverse .capture { order: 1; }
}

/* Le nom de l'écran vit dans la barre de la capture : le texte n'a pas
   besoin de le répéter au-dessus du titre. */
.fonction .fonction-texte h2 {
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.18;
  margin-bottom: 0.85rem;
  max-width: none;
}
.fonction p { font-size: 0.9375rem; }

.details {
  list-style: none;
  padding: 0;
  margin: 1.35rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.details li {
  position: relative;
  padding-left: 1.15rem;
  font-size: 0.875rem;
  color: var(--texte-doux);
}
.details li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62rem;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--bleu);
}
.details strong { color: var(--texte); font-weight: 500; }

/* ---------- Emplacement de capture ---------- */

.capture {
  margin: 0;
  border: 1px solid var(--trait-vif);
  border-radius: 6px;
  background: var(--surface);
  overflow: hidden;
  box-shadow: var(--ombre);
}
.capture-barre {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--trait);
  background: var(--surface-2);
}
.feux { display: flex; gap: 5px; }
.feux i { width: 8px; height: 8px; border-radius: 50%; background: var(--trait-vif); display: block; }
.capture-nom {
  font-size: 0.75rem;
  color: var(--texte-doux);
  letter-spacing: 0.02em;
}
.capture-nom b { color: var(--texte-doux); font-weight: 500; }

.capture-cadre {
  position: relative;
  aspect-ratio: 16 / 10;
  max-width: 100%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(43,140,255,.10), transparent 65%),
    var(--fond);
}
.capture-cadre img { width: 100%; height: 100%; object-fit: contain; display: block; }
.hero .capture-cadre img { object-fit: contain; object-position: top center; }
.attente {
  text-align: center;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.attente .mot {
  font-family: var(--exp);
  font-size: clamp(1.1rem, 2.6vw, 1.7rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  /* Un emplacement vide reste discret, mais le nom de l'écran se lit. */
  color: var(--texte-sourd);
}
.attente .note {
  font-size: 0.8125rem;
  color: var(--texte-sourd);
}

/* ---------- Encadré de règle ---------- */

.regle {
  margin-top: 1.5rem;
  border: 1px solid var(--trait-vif);
  border-left: 2px solid var(--bleu);
  border-radius: 4px;
  background: var(--bleu-bg);
  padding: 1rem 1.2rem;
}
.regle p { font-size: 0.9375rem; color: var(--texte); }
.regle p + p { margin-top: 0.5rem; color: var(--texte-doux); }

/* ---------- Le terrain : la fiche ---------- */

.terrain {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
  align-items: center;
}
@media (min-width: 64rem) { .terrain { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; } }

.fiche {
  border: 1px solid var(--trait-vif);
  border-radius: 6px;
  background: var(--surface);
  overflow: hidden;
}
.fiche-tete {
  padding: 0.9rem 1.15rem;
  border-bottom: 1px solid var(--trait);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.85rem;
  font-size: 0.8125rem;
  color: var(--texte-doux);
  background: var(--surface-2);
}
.fiche-corps { padding: 1.15rem; display: flex; flex-direction: column; gap: 0.95rem; }
.champ { display: flex; flex-direction: column; gap: 0.18rem; }
.champ .lab {
  font-size: 0.8125rem;
  color: var(--texte-sourd);
}
.champ .val { font-size: 0.9375rem; color: var(--texte); }
.champ .val.petit { font-size: 0.875rem; color: var(--texte-doux); }
.signature {
  border-top: 1px solid var(--trait);
  padding-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}
.trace {
  color: var(--texte);
  flex: 1;
  min-width: 130px;
  height: 48px;
  border: 1px solid var(--trait);
  border-radius: 4px;
  background: var(--fond);
  position: relative;
  overflow: hidden;
}
.trace svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.liste-num { list-style: none; padding: 0; margin: 1.5rem 0 0; display: flex; flex-direction: column; gap: 1.1rem; }
.liste-num li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.95rem; align-items: start; }
.liste-num .n {
  font-family: var(--exp);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--bleu);
  padding-top: 0.22rem;
}
.liste-num h3 { font-size: 0.9375rem; margin-bottom: 0.12rem; }
.liste-num p { font-size: 0.875rem; }

/* ---------- L'IA ---------- */

.ia {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
}
@media (min-width: 64rem) { .ia { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr); gap: 4rem; } }
.travaux {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  background: var(--trait);
  border: 1px solid var(--trait);
  border-radius: 4px;
  overflow: hidden;
}
@media (min-width: 34rem) { .travaux { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.travail { background: var(--surface); padding: 1.2rem 1.25rem 1.35rem; display: flex; flex-direction: column; gap: 0.3rem; }
.travail .ou {
  font-size: 0.8125rem;
  color: var(--texte-sourd);
}
.travail h3 { font-size: 0.9375rem; }
.travail p { font-size: 0.8125rem; line-height: 1.5; }

/* ---------- Suisse ---------- */

.suisse {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  background: var(--trait);
  border: 1px solid var(--trait);
  border-radius: 4px;
  overflow: hidden;
}
@media (min-width: 50rem) { .suisse { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 74rem) { .suisse { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fait { background: var(--surface); padding: 1.6rem 1.4rem; display: flex; flex-direction: column; gap: 0.45rem; }
.fait .chiffre {
  font-family: var(--exp);
  font-size: 1.45rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--bleu);
  font-variant-numeric: tabular-nums;
}
.fait h3 { font-size: 0.875rem; }
.fait p { font-size: 0.8125rem; }

/* ---------- Modules ---------- */

.modules {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 1px;
  background: var(--trait);
  border: 1px solid var(--trait);
  border-radius: 4px;
  overflow: hidden;
}
.module { background: var(--surface); padding: 1.05rem 1.1rem 1.25rem; display: flex; flex-direction: column; gap: 0.25rem; transition: background 0.18s; }
.module:hover { background: var(--surface-2); }
.module h3 { font-size: 0.875rem; display: flex; gap: 0.5rem; align-items: baseline; }
.module h3 .n { font-family: var(--sans); font-weight: 400; color: var(--texte-sourd); flex: none; }
.module p { font-size: 0.8125rem; line-height: 1.45; }

/* ---------- Pied ---------- */

.pied { padding-block: 4rem 4.5rem; }
.pied-grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
@media (min-width: 58rem) { .pied-grille { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 4rem; align-items: end; } }
.etat {
  border: 1px solid var(--trait);
  border-radius: 4px;
  background: var(--surface);
  padding: 1.25rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  font-size: 0.875rem;
}
.etat-l { display: flex; justify-content: space-between; gap: 1rem; color: var(--texte-doux); }
.etat-l b { color: var(--texte); font-weight: 500; }
.mentions {
  border-top: 1px solid var(--trait);
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  font-size: 0.75rem;
  color: var(--texte-sourd);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
}

a:focus-visible, .cta:focus-visible {
  outline: 2px solid var(--bleu-clair);
  outline-offset: 3px;
  border-radius: 3px;
}
html { scroll-behavior: smooth; }
:target { scroll-margin-top: 5rem; }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ============================================================
   Ajouts du site multi-pages
   ============================================================ */

/* L'onglet courant se voit dans le rail. */
.nav a.ici { color: var(--texte); border-bottom-color: var(--bleu); }

/* En-tête de page : chaque page s'ouvre par son propre titre. */
.entete { padding-block: 4rem 3.5rem; }
@media (max-width: 52rem) { .entete { padding-block: 3rem 2.5rem; } }
.entete h1 {
  /* Le retour à la ligne est écrit dans le titre : la largeur doit laisser
     chaque moitié tenir sur une ligne, sans orpheline. */
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  font-weight: 700;
  letter-spacing: -0.036em;
  line-height: 1.08;
  margin-bottom: 1.2rem;
  max-width: 32ch;
}
.entete h1 .bleu { color: var(--bleu); }
.entete-texte { font-size: 1.0625rem; color: var(--texte-doux); max-width: 58ch; }
.entete-texte strong { color: var(--texte); }


/* Aperçu des fonctionnalités, sur l'accueil. */
.apercu {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  background: var(--trait);
  border: 1px solid var(--trait);
  border-radius: 4px;
  overflow: hidden;
}
@media (min-width: 40rem) { .apercu { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .apercu { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tuile {
  background: var(--surface);
  padding: 1.35rem 1.3rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  text-decoration: none;
  transition: background 0.18s;
}
.tuile:hover { background: var(--surface-2); }
.tuile h3 { font-size: 1rem; color: var(--texte); }
.tuile p { font-size: 0.8125rem; line-height: 1.5; margin: 0; }
.tuile .aller { font-size: 0.8125rem; color: var(--bleu); margin-top: 0.35rem; }

/* Navigation de page à page, en bas de chaque page. */
.suite {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  background: var(--trait);
  border: 1px solid var(--trait);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 1rem;
}
@media (min-width: 44rem) { .suite { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); } }
.suite a {
  background: var(--surface);
  padding: 1.35rem 1.4rem;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  transition: background 0.18s;
}
.suite a:hover { background: var(--surface-2); }
.suite .sens {
  font-size: 0.8125rem;
  color: var(--texte-sourd);
}
.suite .titre {
  font-family: var(--exp);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--texte);
}
.suite a:hover .titre { color: var(--bleu-clair); }
.suite a.droite { text-align: right; align-items: flex-end; }

/* Pied de page commun. */
.pied-site {
  border-top: 1px solid var(--trait);
  background: var(--fond);
}
.pied-site-int {
  max-width: 84rem;
  margin: 0 auto;
  padding-inline: 1.25rem;
  padding-block: 2.5rem 3rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2.5rem;
  align-items: baseline;
}
.pied-site .plan { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; font-size: 0.8125rem; }
.pied-site .plan a { color: var(--texte-doux); text-decoration: none; }
.pied-site .plan a:hover { color: var(--texte); }
.pied-site .legal {
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--texte-sourd);
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
}

/* ---------- Petits blocs de démonstration ---------- */

.demo {
  border: 1px solid var(--trait);
  border-radius: 4px;
  background: var(--surface);
  padding: 1rem 1.15rem;
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  font-size: 0.875rem;
}
.ligne-demo {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  color: var(--texte-doux);
}
.ligne-demo .nom {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 0.8125rem;
}
.ligne-demo .val {
  color: var(--texte);
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.8125rem;
}
.barre {
  flex: none;
  width: 72px;
  height: 4px;
  background: var(--trait);
  border-radius: 2px;
  overflow: hidden;
}
.barre i {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--bleu), var(--bleu-clair));
}
.barre.pale i { background: var(--trait-vif); }

.cascade {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.3rem 1.5rem;
  font-family: var(--mono);
  font-size: 0.8125rem;
}
.cascade span:nth-child(even) {
  color: var(--texte);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.cascade .tot {
  color: var(--bleu-clair);
  border-top: 1px solid var(--trait);
  padding-top: 0.4rem;
  margin-top: 0.2rem;
}

/* Le bloc de repères de l'accueil ne s'étale pas sur toute la largeur. */
.entete .repere { max-width: 46rem; margin-top: 2rem; }

/* ------------------------------------------------------------------
   Raccords entre les bandes sombres et le corps clair
   ------------------------------------------------------------------ */

/* Une bande sombre ne se termine pas par un filet clair. */
.bande.sombre { border-bottom-color: transparent; }

/* Le halo n'a de sens que sur le sombre. */
.bande:not(.sombre) .halo { display: none; }

/* ==================================================================
   LES FILETS DES GRILLES

   Ces grilles dessinaient leurs séparations en laissant paraître le fond
   du cadre dans une gouttière d'un pixel. Quand la dernière rangée est
   incomplète, la même couleur remplit les cases manquantes : un bloc gris
   apparaît, et il change de taille selon la largeur de l'écran.

   Le filet passe donc sur les cases elles-mêmes. Une case manquante ne
   laisse plus rien, et le cadre extérieur continue de fermer la figure.
   ================================================================== */

.repere,
.mondes,
.parcours,
.apercu,
.suite,
.travaux,
.suisse,
.modules { gap: 0; background: transparent; }

.repere > div,
.monde,
.pas,
.tuile,
.suite > a,
.travail,
.fait,
.module {
  border-right: 1px solid var(--trait);
  border-bottom: 1px solid var(--trait);
}

/* Tous les panneaux portent la même ombre. Certains l'avaient, d'autres
   restaient plats sur la même page : la page se lisait comme deux systèmes.
   `--ombre` est redéfinie sur `.sombre`, une seule règle suffit aux deux. */
.repere,
.mondes,
.parcours,
.apercu,
.suite,
.travaux,
.suisse,
.modules,
.etat,
.demo,
.offre,
.capture,
.fiche { box-shadow: var(--ombre); }

/* Le pied reprend le sombre, sans filet de séparation superflu. */
.pied-site.sombre { border-top-color: var(--trait); }

/* ------------------------------------------------------------------
   Le surlignage du titre d'accueil : il reprend le dégradé du A du
   logo, pour que la promesse porte la marque et non une couleur de
   plus. Plus petit que le titre, il l'accompagne, il ne le double pas.
   ------------------------------------------------------------------ */
.entete h1 .ia {
  display: inline-block;
  margin-top: 0.85rem;
  font-size: 0.4em;
  line-height: 1.15;
  letter-spacing: -0.008em;
  padding: 0.38em 0.72em;
  border-radius: 5px;
  background: var(--action);
  color: var(--action-encre);
  box-shadow: 0 10px 28px -14px rgba(22, 104, 227, 0.7);
}
@media (max-width: 34rem) {
  .entete h1 .ia { font-size: 0.5em; margin-top: 0.7rem; }
}


/* ==================================================================
   HERO : composition centrée, deux actions, maquette du logiciel
   ================================================================== */

/* La hero tient dans un écran : titre, sous-titre, boutons et image du
   logiciel, sans avoir à défiler. La hauteur du rail collant est retranchée
   puisqu'il occupe le flux, et l'image prend ce qui reste. `svh` plutôt que
   `vh` pour que la barre d'adresse du téléphone ne fasse pas déborder. */
.hero {
  --h-rail: 69px;
  min-height: calc(100vh - var(--h-rail));
  min-height: calc(100svh - var(--h-rail));
  padding-block: 2.5rem 1.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
}

/* L'emplacement de capture perd son format fixe ici : il s'étire sur la
   hauteur laissée libre plutôt que d'imposer la sienne. */
.hero .vitrine { flex: 1 1 auto; min-height: 0; display: flex; width: 100%; }
.hero .vitrine .capture { display: flex; flex-direction: column; width: 100%; }
.hero .vitrine .capture-cadre { aspect-ratio: auto; flex: 1 1 auto; min-height: 5rem; }

/* Un cadre qui porte une image reprend le format de l'image et ne rogne rien. */
.hero .vitrine .capture-cadre:has(img) { aspect-ratio: 16 / 10; flex: none; }
.hero .vitrine .capture-cadre img { position: static; width: 100%; height: 100%; }

/* Dès lors que la hero porte une vraie capture, sa hauteur est celle de son
   contenu. L'étirer sur l'écran entier n'ajoutait qu'un blanc sous l'image :
   la hauteur restante tombait dans la vitrine, qui s'allongeait sous le cadre
   sans rien y mettre. Le cadre vide, lui, garde l'étirement : c'est ce qui lui
   donne une taille quand il n'a pas d'image pour la lui donner. */
.hero:has(.vitrine img) { min-height: 0; }
.hero .vitrine:has(img) { flex: 0 0 auto; }
.hero .vitrine:has(img) .capture { align-self: flex-start; }

.hero .hero-texte { max-width: 56rem; margin: 0 auto; width: 100%; }

.hero h1 {
  font-size: clamp(1.8rem, 4.4vw, 3.2rem);
  font-weight: 500;
  letter-spacing: -0.032em;
  line-height: 1.08;
  margin: 0 0 1.1rem;
  max-width: none;
}
.hero h1 .bleu { color: var(--bleu); }

.hero .ia {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  padding: 0.45em 0.95em;
  border-radius: 100px;
  background: var(--action);
  color: var(--action-encre);
  box-shadow: 0 12px 30px -16px rgba(22, 104, 227, 0.8);
  margin-bottom: 1.5rem;
}

.hero-texte p {
  font-size: clamp(1rem, 1.6vw, 1.1875rem);
  line-height: 1.6;
  color: var(--texte-doux);
  max-width: 44rem;
  margin: 0 auto 1.6rem;
}
.hero-texte p strong { color: var(--texte); font-weight: 600; }

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-bottom: 0.9rem;
}
@media (max-width: 30rem) { .actions { flex-direction: column; align-items: stretch; } }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  padding: 0.85rem 1.6rem;
  border-radius: 6px;
  border: 1px solid transparent;
  transition: background 0.16s, color 0.16s, border-color 0.16s;
}
.btn.primaire {
  background: var(--action);
  border-color: var(--action);
  color: var(--action-encre);
  box-shadow: 0 14px 34px -18px rgba(22, 104, 227, 0.75);
}
.btn.primaire:hover { background: var(--action-survol); border-color: var(--action-survol); }
.btn.secondaire { background: transparent; border-color: var(--trait-vif); color: var(--texte); }
.btn.secondaire:hover { border-color: var(--texte); }

/* ---------- Emplacement de l'image du logiciel ---------- */

.vitrine { max-width: 62rem; margin: 0 auto; text-align: left; }


/* ==================================================================
   L'AGENT CONVERSATIONNEL

   La conversation est du vrai texte : elle se replie, se sélectionne
   et se lit par un lecteur d'écran. Seule l'onde du message vocal est
   décorative, et elle est retirée de l'arbre d'accessibilité.
   ================================================================== */

.agent {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 3rem;
  /* L'image se centre sur la colonne de texte. Quand c'était une conversation
     reconstruite, les deux colonnes partaient du même haut et finissaient à peu
     près ensemble ; l'image, plus courte, laissait un trou sous elle. */
  align-items: center;
}

/* Le titre et le chapeau vivent dans la colonne de gauche : la conversation
   commence ainsi à la hauteur du titre, pas à celle des puces. */
.agent-texte h2 { max-width: none; }
.agent-texte .chapeau { max-width: none; margin-bottom: 2rem; }

.atouts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.5rem; }
.atouts li {
  position: relative;
  padding-left: 1.6rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--texte-doux);
}
.atouts li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42rem;
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 2px solid var(--bleu);
}
.atouts strong {
  display: block;
  font-family: var(--exp);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--texte);
  margin-bottom: 0.3rem;
}

.causerie {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  border: 1px solid var(--trait);
  border-radius: 10px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(43,140,255,.10), transparent 65%),
    var(--fond);
  padding: 1.5rem;
  box-shadow: var(--ombre);
}
@media (max-width: 40rem) { .causerie { padding: 1rem; } }

.causerie-tete { margin-bottom: 0.3rem; }
.pastille-ia {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.5em 0.85em;
  border-radius: 100px;
  background: var(--action);
  color: var(--action-encre);
}

.bulle {
  max-width: 88%;
  margin: 0;
  padding: 0.75rem 0.95rem;
  border-radius: 12px;
  font-size: 0.9rem;
  line-height: 1.5;
}
.bulle b { font-weight: 600; }

/* L'artisan parle : la bulle est pleine, calée à droite. */
.bulle.moi {
  margin-left: auto;
  background: var(--action);
  color: var(--action-encre);
  border-bottom-right-radius: 3px;
}
.bulle.moi b { color: inherit; }

/* L'agent répond : bulle de surface, calée à gauche, chiffres en évidence. */
.bulle.lui {
  margin-right: auto;
  background: var(--surface);
  border: 1px solid var(--trait);
  color: var(--texte-doux);
  border-bottom-left-radius: 3px;
}
.bulle.lui b { color: var(--texte); }

/* L'onde du message vocal : neuf barres de hauteurs fixes, pas d'animation. */
/* La mention du vocal tient sa propre ligne : en ligne avec le texte, elle se
   lisait comme le début de la phrase. */
.vocal { display: flex; align-items: center; gap: 0.45rem; margin-bottom: 0.4rem; }
.onde { display: inline-flex; align-items: center; gap: 2px; height: 12px; }
.onde i { display: block; width: 2px; border-radius: 1px; background: currentColor; opacity: 0.75; }
.onde i:nth-child(1), .onde i:nth-child(9) { height: 4px; }
.onde i:nth-child(2), .onde i:nth-child(8) { height: 8px; }
.onde i:nth-child(3), .onde i:nth-child(7) { height: 12px; }
.onde i:nth-child(4), .onde i:nth-child(6) { height: 7px; }
.onde i:nth-child(5) { height: 10px; }
.vocal-duree { font-size: 0.75rem; opacity: 0.85; }

@media (max-width: 62rem) {
  .agent { grid-template-columns: 1fr; gap: 2rem; }
  .causerie { order: 2; }
}

/* ==================================================================
   LA SECTION FINALE : le seul vrai appel à l'action de la page.
   Elle reprend la composition centrée de la hero, en sombre, pour
   que la page s'ouvre et se referme de la même manière.
   ================================================================== */

.final .dedans { padding-block: 5rem; }
@media (max-width: 52rem) { .final .dedans { padding-block: 3.25rem; } }

.final-texte { text-align: center; max-width: 46rem; margin: 0 auto; }
.final-texte h2 {
  font-size: clamp(1.9rem, 4.2vw, 3rem);
  font-weight: 500;
  letter-spacing: -0.032em;
  line-height: 1.1;
  margin: 0 0 1.25rem;
  max-width: none;
}
.final-texte .chapeau { margin: 0 auto 2.25rem; max-width: 42rem; }
.final-texte .actions { margin-bottom: 0; }
.final-texte .rassurance {
  font-size: 0.8125rem;
  font-style: italic;
  font-weight: 600;
  color: var(--texte-sourd);
  margin: 0;
}
/* La note reprend la largeur du bloc : contrainte, elle coupait « du / site ». */
.final .note { margin: 1.75rem auto 0; max-width: none; text-align: center; }


/* Le renvoi qui ouvre une fiche, sous le chapeau d'en-tête. */
.entete-suite { margin-top: 1.5rem; }
.entete-suite .aller {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--bleu-clair);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s;
}
.entete-suite .aller:hover { border-bottom-color: var(--bleu-clair); }

/* Une section dont l'introduction est centrée : le titre, le chapeau et la
   rangée d'onglets. Ce qui suit garde son alignement, pour que le texte d'un
   panneau reste calé sur l'image qui lui fait face. */
.centre > h2,
.centre > .chapeau {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.centre .dom-choix { justify-content: center; }

/* ---------- La légende des trois tons ---------- */

.tons { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.75rem 0 2rem; }
.ton {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 0.5em 0.9em;
  border-radius: 100px;
  border: 1px solid var(--trait-vif);
  color: var(--texte-doux);
}
.ton::before { content: ""; width: 8px; height: 8px; border-radius: 50%; }
.ton.vert::before   { background: var(--vert); }
.ton.orange::before { background: var(--ambre); }
.ton.rouge::before  { background: var(--rouge); }


/* ---------- Emplacements des autres fonctionnalités ----------
   Provisoire : six rectangles vides, le temps que chaque fonctionnalité ait
   sa page. Ils reprennent le cadre des emplacements de capture pour que le
   remplacement ne change pas la mise en page. */

.vitrines {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  margin-top: 2.25rem;
}
@media (min-width: 40rem) { .vitrines { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62rem) { .vitrines { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.vitrine-vide {
  aspect-ratio: 16 / 10;
  border: 1px solid var(--trait);
  border-radius: 10px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(43,140,255,.10), transparent 65%),
    var(--fond);
  box-shadow: var(--ombre);
}


/* ---------- Le menu déroulant des fonctionnalités ----------
   Bâti sur <details>, donc sans JavaScript : il s'ouvre au clic comme au
   clavier, et fonctionne au doigt, ce qu'un survol ne fait pas. */

.deroulant { position: relative; }
.deroulant summary {
  list-style: none;
  cursor: pointer;
  color: var(--texte-doux);
  padding-block: 0.15rem;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
  transition: color 0.15s;
}
.deroulant summary::-webkit-details-marker { display: none; }
.deroulant summary::after {
  content: "";
  display: inline-block;
  width: 5px; height: 5px;
  margin-left: 0.45rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.15s;
}
.deroulant[open] summary::after { transform: translateY(1px) rotate(-135deg); }
.deroulant summary:hover { color: var(--texte); }
.deroulant summary.ici { color: var(--texte); border-bottom-color: var(--bleu); }
.deroulant summary:focus-visible { outline: 2px solid var(--bleu); outline-offset: 3px; }

.deroulant-liste {
  position: absolute;
  top: calc(100% + 0.9rem);
  left: -0.75rem;
  z-index: 60;
  display: flex;
  flex-direction: column;
  min-width: 13rem;
  padding: 0.5rem;
  border: 1px solid var(--trait);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 24px 48px -28px rgba(0, 0, 0, 0.85);
}
.deroulant-liste a {
  padding: 0.5rem 0.7rem;
  border-radius: 5px;
  border-bottom: 0;
  color: var(--texte-doux);
  white-space: nowrap;
}
.deroulant-liste a:hover { background: var(--surface-2); color: var(--texte); border-bottom-color: transparent; }
.deroulant-liste a.ici { color: var(--bleu-clair); }

/* Sur la barre repliée, le panneau se déplie dans le flux plutôt que
   par-dessus : rien ne dépasse d'une barre qui défile déjà. */
@media (max-width: 72rem) {
  .deroulant-liste {
    position: static;
    flex-direction: row;
    gap: 1.25rem;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    min-width: 0;
  }
  .deroulant-liste a { padding: 0; }
}

/* Six tuiles : trois colonnes, puis deux, puis une. Jamais de rangée entamée. */
@media (min-width: 64rem) { .apercu.six { grid-template-columns: repeat(3, minmax(0, 1fr)); } }


/* ---------- Repères, notes, formules ---------- */

.repere.large { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }

.note {
  font-size: 0.875rem;
  color: var(--texte-sourd);
  max-width: 52ch;
  margin-top: 2rem;
}

.offres {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}
@media (min-width: 58rem) { .offres { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.offre {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: 8px;
  padding: 1.75rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.offre.mise-en-avant {
  border-color: var(--bleu);
  box-shadow: 0 18px 40px -30px rgba(22, 104, 227, 0.8);
}
.ruban {
  position: absolute;
  top: -0.7rem;
  left: 1.6rem;
  background: var(--bleu);
  color: #FFFFFF;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  border-radius: 100px;
}
.offre h2 { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 0; max-width: none; }
.offre-qui { font-size: 1rem; line-height: 1.5; margin: 0; }
.offre-prix {
  margin: 0.5rem 0 0.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.offre-prix .montant {
  font-family: var(--exp);
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: var(--bleu);
}
/* L'en-tête des tarifs remplace la bande sombre : un titre, une ligne, et
   les cartes juste en dessous. */
.tarifs-tete { text-align: center; max-width: 46rem; margin: 0 auto 3rem; }
.tarifs-tete h1 {
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  font-weight: 700;
  letter-spacing: -0.036em;
  line-height: 1.08;
  margin-bottom: 1rem;
}
.tarifs-tete p {
  font-size: clamp(1.125rem, 1.8vw, 1.375rem);
  line-height: 1.5;
  color: var(--texte-doux);
  margin: 0;
}
.tarifs-tete p strong { color: var(--texte); font-weight: 600; }

.offre-prix .avant {
  font-size: 0.8125rem;
  color: var(--texte-sourd);
  text-decoration: line-through;
}
.offre-prix .montant .devise {
  font-size: 0.56em;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--texte-sourd);
  margin-left: 0.3em;
}
.offre-liste li strong { color: var(--bleu); font-weight: 600; }

/* La mention sous les trois cartes, du même ton que la ligne d'en-tête. */
.tarifs-pied {
  font-size: 0.9375rem;
  color: var(--texte-sourd);
  text-align: center;
  max-width: 56ch;
  margin: 2rem auto 0;
}

/* ---------- La page Contact : coordonnées à gauche, formulaire à droite ---------- */

.contact-duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
}
@media (min-width: 58rem) {
  .contact-duo { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 3.5rem; }
}
.contact-duo h2 { font-size: 1.3rem; margin-bottom: 1.1rem; max-width: none; }

.coordonnees address {
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  color: var(--texte-doux);
  font-size: 0.9375rem;
}
.coordonnees address .raison { color: var(--texte); font-weight: 600; }
.joindre {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.5rem 1.25rem;
  margin: 1.5rem 0 0;
  font-size: 0.9375rem;
}
.joindre dt { color: var(--texte-sourd); }
.joindre dd { margin: 0; }
.joindre a { color: var(--bleu); text-decoration: none; border-bottom: 1px solid transparent; }
.joindre a:hover { border-bottom-color: var(--bleu); }

/* Le formulaire se pose sur un aplat : sur une bande blanche, un champ blanc
   bordé de gris ne se voit pas. */
.form-contact {
  background: var(--fond);
  border: 1px solid var(--trait);
  border-radius: 10px;
  padding: 1.9rem 1.7rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  box-shadow: var(--ombre);
}
/* Le piège à robots sort du flux sans display:none : certains robots
   ignorent les champs masqués ainsi, et les lecteurs d'écran sont écartés
   par aria-hidden et tabindex. */
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Le serveur renvoie sur contact.html?erreur=1 quand l'envoi échoue. */
.form-echec {
  margin: 0;
  padding: 0.8rem 1rem;
  border-radius: 8px;
  background: rgba(200, 65, 47, 0.10);
  border: 1px solid rgba(200, 65, 47, 0.35);
  color: var(--texte);
  font-size: 0.9375rem;
}
.form-echec a { color: #96301D; }

.champ { display: flex; flex-direction: column; gap: 0.35rem; }
.champ label { font-size: 0.8125rem; font-weight: 500; color: var(--texte); }
.champ input,
.champ textarea {
  font: inherit;
  font-size: 0.9375rem;
  color: var(--texte);
  background: var(--surface);
  border: 1px solid var(--trait-vif);
  border-radius: 6px;
  padding: 0.7rem 0.85rem;
  width: 100%;
}
.champ textarea { resize: vertical; min-height: 7rem; }
.champ input:focus-visible,
.champ textarea:focus-visible {
  outline: 2px solid var(--bleu);
  outline-offset: 1px;
  border-color: var(--bleu);
}
.champ-duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; }
@media (max-width: 30rem) { .champ-duo { grid-template-columns: minmax(0, 1fr); } }
.form-contact button {
  font: inherit;
  cursor: pointer;
  align-self: flex-start;
  margin-top: 0.4rem;
}

/* Le comparatif : un vrai tableau. Cinq colonnes ne tiennent pas sur un
   téléphone, alors il défile horizontalement plutôt que de se tasser. */
.tableau-defile {
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: 4px;
  box-shadow: var(--ombre);
}
.comparatif {
  border-collapse: collapse;
  width: 100%;
  min-width: 48rem;
  font-size: 0.9375rem;
}
.comparatif td,
.comparatif th {
  text-align: left;
  vertical-align: top;
  padding: 1rem 1.15rem;
  border-bottom: 1px solid var(--trait);
}
.comparatif tbody tr:last-child td,
.comparatif tbody tr:last-child th { border-bottom: 0; }
.comparatif thead th {
  font-family: var(--exp);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--texte);
  border-bottom: 1px solid var(--trait-vif);
}
.comparatif thead th span {
  display: block;
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--texte-sourd);
  margin-top: 0.15rem;
}
.comparatif tbody th {
  font-weight: 500;
  color: var(--texte);
  white-space: nowrap;
}
.comparatif tbody td { color: var(--texte-doux); }
.comparatif .chiffre {
  font-family: var(--exp);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--texte);
  white-space: nowrap;
}
.comparatif .nous { background: var(--bleu-bg); }
.comparatif tbody .nous { color: var(--texte); }
.comparatif tbody .nous.chiffre { color: var(--bleu); }
.offre-prix .unite { font-size: 0.8125rem; color: var(--texte-sourd); }
.offre-liste {
  list-style: none;
  padding: 0;
  margin: 0.4rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-top: 1px solid var(--trait);
  padding-top: 1rem;
}
.offre-liste li {
  position: relative;
  padding-left: 1.2rem;
  font-size: 0.875rem;
  color: var(--texte-doux);
}
.offre-liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.58rem;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--bleu);
}



/* ==================================================================
   LES DOMAINES : des onglets sans JavaScript

   L'état vit dans un groupe de boutons radio masqués, placés avant les
   panneaux ; les étiquettes les commandent, le sélecteur voisin révèle
   le panneau correspondant. Les flèches du clavier viennent avec les
   radios, et sans script la page montre les six panneaux à la suite,
   ce qui reste lisible.
   ================================================================== */

.domaines { margin-top: 2.25rem; }

.dom-radio {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

.dom-choix {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 2.25rem;
}
.dom-choix label {
  display: inline-block;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1;
  padding: 0.72em 1.25em;
  border-radius: 100px;
  border: 1.5px solid var(--trait-vif);
  background: var(--surface);
  color: var(--texte-doux);
  cursor: pointer;
  user-select: none;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.dom-choix label:hover { color: var(--texte); border-color: var(--texte-sourd); }

/* Sur la bande sombre, l'onglet au repos se lit en blanc, contour compris :
   le gris des filets se perdait dans le fond. */
.sombre .dom-choix label {
  background: transparent;
  border-color: #FFFFFF;
  color: #FFFFFF;
}
.sombre .dom-choix label:hover { background: rgba(255, 255, 255, 0.10); }

.dom-panneau {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  gap: 3rem;
  align-items: center;
}

.dom-texte h3 {
  font-family: var(--exp);
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.16;
  margin: 0 0 0.9rem;
}
.dom-texte > p {
  font-size: 1rem;
  line-height: 1.62;
  color: var(--texte-doux);
  margin: 0 0 1.25rem;
}
.dom-texte ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.dom-texte li {
  position: relative;
  padding-left: 1.1rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--texte-doux);
}
.dom-texte li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.58rem;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--bleu);
}

/* L'emplacement de capture porte son propre cadre : la colonne de droite
   n'est plus qu'un conteneur. */
.dom-vue { min-width: 0; }

/* Le renvoi vers la fiche détaillée, quand elle existe. */
.dom-texte .aller {
  display: inline-block;
  margin-top: 0.4rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--bleu-clair);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s;
}
.dom-texte .aller:hover { border-bottom-color: var(--bleu-clair); }

.hero .capture-barre { display: none; }

/* ---------- La capture de la hero ----------
   Ici l'image est une vraie copie d'écran : on la présente comme une image
   posée sur la page, pas comme une fenêtre redessinée. La fausse barre de
   navigateur et le bandeau de légende faisaient deux cadres pour rien. */

.hero .capture {
  border: 0;
  border-radius: 14px;
  background: none;
  overflow: visible;
  box-shadow:
    0 2px 6px -2px rgba(10, 24, 40, 0.10),
    0 18px 36px -18px rgba(10, 24, 40, 0.22),
    0 48px 96px -48px rgba(10, 24, 40, 0.40);
}

.hero .capture-cadre {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(10, 24, 40, 0.07);
}

/* ---------- Un emplacement qui porte une vraie image ----------
   Dès qu'une capture contient une image, la fausse barre de navigateur
   redessinée n'a plus de raison d'être : l'image en montre déjà une. On la
   présente alors comme une image posée sur la page, et sa légende passe sous
   elle sans bandeau. Les emplacements encore vides, eux, gardent leur fenêtre
   dessinée : c'est ce qui les signale comme provisoires. */

.capture:has(img) {
  border: 0;
  border-radius: 14px;
  background: none;
  overflow: visible;
  box-shadow:
    0 2px 6px -2px rgba(10, 24, 40, 0.10),
    0 14px 28px -14px rgba(10, 24, 40, 0.20),
    0 36px 72px -36px rgba(10, 24, 40, 0.34);
}
.capture:has(img) .capture-barre { display: none; }
.capture:has(img) .capture-cadre {
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px rgba(10, 24, 40, 0.07);
}

/* Sur une bande sombre, un emplacement de capture garde ses couleurs claires,
   où qu'il soit : c'est une fenêtre du logiciel posée là, elle ne suit pas le
   thème de la bande. Redéfinir les jetons sur le cadre suffit, tout son
   contenu les lit. */
.sombre .capture {
  --fond:        #F2F6FB;
  --surface:     #FFFFFF;
  --surface-2:   #E9F0F8;
  --trait:       #D9E3EF;
  --trait-vif:   #B9C9DC;
  --texte:       #0A1828;
  --texte-doux:  #4C617A;
  --texte-sourd: #5A6F89;
}

/* ---------- L'onglet actif et son panneau ---------- */

.dom-panneau { display: none; }
#dom-tab:checked ~ .dom-choix label[for="dom-tab"] { background: var(--action); border-color: var(--action); color: var(--action-encre); }
#dom-rec:checked ~ .dom-choix label[for="dom-rec"] { background: var(--action); border-color: var(--action); color: var(--action-encre); }
#dom-int:checked ~ .dom-choix label[for="dom-int"] { background: var(--action); border-color: var(--action); color: var(--action-encre); }
#dom-dev:checked ~ .dom-choix label[for="dom-dev"] { background: var(--action); border-color: var(--action); color: var(--action-encre); }
#dom-pla:checked ~ .dom-choix label[for="dom-pla"] { background: var(--action); border-color: var(--action); color: var(--action-encre); }
#dom-aff:checked ~ .dom-choix label[for="dom-aff"] { background: var(--action); border-color: var(--action); color: var(--action-encre); }
#dom-tab:checked ~ #pan-tab { display: grid; }
#dom-rec:checked ~ #pan-rec { display: grid; }
#dom-int:checked ~ #pan-int { display: grid; }
#dom-dev:checked ~ #pan-dev { display: grid; }
#dom-pla:checked ~ #pan-pla { display: grid; }
#dom-aff:checked ~ #pan-aff { display: grid; }
#dom-tab:focus-visible ~ .dom-choix label[for="dom-tab"] { outline: 2px solid var(--bleu); outline-offset: 2px; }
#dom-rec:focus-visible ~ .dom-choix label[for="dom-rec"] { outline: 2px solid var(--bleu); outline-offset: 2px; }
#dom-int:focus-visible ~ .dom-choix label[for="dom-int"] { outline: 2px solid var(--bleu); outline-offset: 2px; }
#dom-dev:focus-visible ~ .dom-choix label[for="dom-dev"] { outline: 2px solid var(--bleu); outline-offset: 2px; }
#dom-pla:focus-visible ~ .dom-choix label[for="dom-pla"] { outline: 2px solid var(--bleu); outline-offset: 2px; }
#dom-aff:focus-visible ~ .dom-choix label[for="dom-aff"] { outline: 2px solid var(--bleu); outline-offset: 2px; }

@media (max-width: 62rem) {
  .dom-panneau { grid-template-columns: 1fr; gap: 1.75rem; }
  .dom-vue { order: 2; }
}
@media (max-width: 40rem) {
  .dom-choix { gap: 0.45rem; margin-bottom: 1.75rem; }
  .dom-choix label { font-size: 0.8125rem; padding: 0.64em 1em; }
  .dom-vue { padding: 0.9rem; }
}


/* Écran bas : on resserre plutôt que d'abandonner la tenue en un écran. */
@media (max-width: 72rem) { .hero { --h-rail: 111px; } }
/* Sur téléphone, un titre de fiche fait cinq lignes là où celui de l'accueil
   en fait quatre : la hero se resserre pour tenir quand même en un écran. */
@media (max-width: 52rem) {
  .hero { padding-block: 1.25rem 0.85rem; }
  .hero h1 { font-size: clamp(1.5rem, 6.7vw, 2.2rem); margin-bottom: 0.75rem; }
  .hero-texte p { font-size: 0.9375rem; line-height: 1.5; margin-bottom: 0.9rem; }
  .hero-texte p.rassurance { font-size: 0.8125rem; margin-bottom: 1rem; }
  .hero .vitrine .capture-cadre:not(:has(img)) { min-height: 3.5rem; }
}

@media (max-height: 820px) {
  .hero { padding-block: 1.25rem 0.75rem; }
  .hero h1 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); margin-bottom: 0.55rem; }
  .hero-texte p { font-size: 0.9375rem; margin-bottom: 0.8rem; }
  .hero .actions { margin-bottom: 0.6rem; }
  .hero-texte p.rassurance { margin-bottom: 0.9rem; }
  .hero .vitrine .capture-cadre:not(:has(img)) { min-height: 3rem; }
}

/* Très bas : la légende de la capture passe à la trappe, elle coûte
   quarante pixels pour une information que le cadre porte déjà. */
@media (max-height: 740px) {
  .hero { padding-block: 1.1rem 0.75rem; }
  .hero h1 { font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: 0.6rem; }
  .hero-texte p { font-size: 0.875rem; line-height: 1.5; margin-bottom: 0.9rem; }
  .hero .actions { margin-bottom: 0.55rem; gap: 0.5rem; }
  .hero .actions .btn { padding: 0.72em 1.1em; font-size: 0.875rem; }
  .hero-texte p.rassurance { margin-bottom: 0.9rem; }
  .hero .vitrine .capture-cadre:not(:has(img)) { min-height: 2.5rem; }
}

/* La ligne de réassurance, sous les boutons. Le sélecteur reprend
   `.hero-texte p`, sinon la taille de celui-ci l'emporte. */
.hero-texte p.rassurance {
  font-size: 0.8125rem;
  font-style: italic;
  font-weight: 600;
  color: var(--texte-sourd);
  margin: 0 auto 2rem;
}

/* ---------- Témoignages en vidéo ----------
   Un rail horizontal de vidéos verticales, avec deux flèches. Sans JavaScript,
   comme le reste du site : les flèches sont des liens vers la carte voisine,
   et c'est le navigateur qui fait défiler le rail jusqu'à elle. Le défilement
   reste libre à la main, au doigt et au trackpad ; les flèches ne font que le
   proposer au clic et au clavier.

   Quelle paire de flèches afficher dépend de la carte visée : on empile les
   six variantes et on ne montre que celle qui correspond. L'index de la
   variante est celui de la carte visée, pour les deux piles à la fois, d'où
   une seule règle par état. */

.temoignages {
  --tem-l: 15.5rem;   /* largeur d'une carte */
  --tem-e: 1.25rem;   /* écart entre deux cartes */
}

/* L'introduction est centrée, comme celle de la section des domaines : titre,
   chapeau, puis la rangée de boutons. Les cartes, elles, gardent leur texte
   aligné à gauche. */
.tem-entete {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.5rem;
  margin-bottom: 2.25rem;
}
.tem-intro { max-width: 46rem; }
.tem-intro h2 { margin-bottom: 1rem; margin-inline: auto; }
.tem-intro .chapeau { margin-bottom: 0; margin-inline: auto; }

.tem-fleches { display: flex; gap: 0.6rem; flex: none; padding-bottom: 0.25rem; }
.tem-pile > * { display: none; }

.tem-fleche {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  place-items: center;
  border: 1px solid var(--trait-vif);
  background: var(--surface);
  color: var(--texte);
  font-size: 1.05rem;
  line-height: 1;
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
a.tem-fleche:hover { border-color: var(--action); color: var(--action); }
a.tem-fleche:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }

/* La flèche qui n'a nulle part où aller reste visible mais éteinte : la place
   des deux boutons ne bouge pas d'une carte à l'autre. */
.tem-fleche.morte { color: var(--trait-vif); border-color: var(--trait); background: none; }

/* Au chargement, aucune carte n'est visée : on affiche la première variante. */
.temoignages:not(:has(.tem-carte:target)) .tem-pile > :nth-child(1) { display: grid; }
.temoignages:has(#tem-1:target) .tem-pile > :nth-child(1) { display: grid; }
.temoignages:has(#tem-2:target) .tem-pile > :nth-child(2) { display: grid; }
.temoignages:has(#tem-3:target) .tem-pile > :nth-child(3) { display: grid; }
.temoignages:has(#tem-4:target) .tem-pile > :nth-child(4) { display: grid; }
.temoignages:has(#tem-5:target) .tem-pile > :nth-child(5) { display: grid; }
.temoignages:has(#tem-6:target) .tem-pile > :nth-child(6) { display: grid; }

.tem-fenetre {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.tem-fenetre::-webkit-scrollbar { display: none; }

.tem-piste {
  display: flex;
  gap: var(--tem-e);
  list-style: none;
  margin: 0;
  padding: 0;
}

.tem-carte {
  flex: 0 0 var(--tem-l);
  scroll-snap-align: start;
  /* Vertical seulement : le rail se cale au bord gauche de la carte visée,
     et la page, si elle doit bouger, ne colle pas le rail sous la barre. */
  scroll-margin: 6rem 0 0 0;
}

.tem-video {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--trait);
  background:
    radial-gradient(ellipse at 50% 15%, rgba(43, 140, 255, 0.12), transparent 60%),
    var(--surface-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  margin-bottom: 0.9rem;
}

/* Le triangle de lecture, dessiné : il dit que la vignette est une vidéo. */
.tem-lecture {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: 1px solid var(--trait-vif);
  background: var(--surface);
  display: grid;
  place-items: center;
}
.tem-lecture::after {
  content: "";
  width: 0;
  height: 0;
  margin-left: 3px;
  border-left: 11px solid var(--trait-vif);
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}
.tem-mot {
  font-family: var(--exp);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--texte-doux);
}
.tem-duree {
  position: absolute;
  right: 0.7rem;
  bottom: 0.7rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--texte-sourd);
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: 999px;
  padding: 0.15rem 0.5rem;
}

.tem-metier {
  font-family: var(--exp);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--texte);
  margin: 0;
}
.tem-lieu {
  font-size: 0.8125rem;
  color: var(--texte-sourd);
  margin: 0.15rem 0 0.5rem;
}
.tem-sujet {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--texte-doux);
  margin: 0;
}

.tem-note {
  margin: 2.25rem 0 0;
  font-size: 0.875rem;
  color: var(--texte-sourd);
}

/* La carte visée se signale : sans cela, rien ne dit où on en est dans le rail. */
.tem-carte:target .tem-video { border-color: var(--action); }

@media (max-width: 52rem) {
  .tem-entete { gap: 1.25rem; margin-bottom: 1.75rem; }
  .temoignages { --tem-l: 13.5rem; --tem-e: 1rem; }
}

/* Une grille de faits à trois colonnes. Sans cette variante, le quatrième
   emplacement resterait vide et le fond de la grille se verrait à travers :
   c'est le défaut de cette façon de dessiner les séparateurs. */
@media (min-width: 56rem) {
  .suisse.trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 74rem) {
  .suisse.trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* La section des quatre portraits a été retirée de « À propos » ; les règles
   de .fondateurs, .fondateur, .portrait et .role sont parties avec elle. */

/* Le séparateur du fil d'Ariane a disparu avec lui ; sa règle aussi. */

/* ---------- Le menu volant de « Fonctionnalités » ----------
   Le panneau remplace la liste de six liens : chaque entrée porte son
   pictogramme et la ligne qui dit ce que l'écran fait, et un renvoi mis en
   avant mène au tour complet. Le panneau reste une balise <details> : il
   s'ouvre au clic, au doigt et au clavier. Le survol n'est qu'un raccourci
   ajouté par-dessus, là où il existe. */

.deroulant-liste {
  width: 44rem;
  max-width: calc(100vw - 2.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 0.5rem;
  padding: 0.6rem;
  min-width: 0;
}
.volant-grille {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.15rem;
}
.volant-grille a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 0.7rem;
  row-gap: 0.1rem;
  align-items: start;
  /* Sans cela, une entrée plus courte que sa voisine étire ses deux lignes
     pour remplir la rangée, et les descriptions ne s'alignent plus. */
  align-content: start;
  padding: 0.6rem 0.65rem;
  border-radius: 7px;
  white-space: normal;
}
.volant-icone {
  grid-row: span 2;
  width: 1.9rem;
  height: 1.9rem;
  display: grid;
  place-items: center;
  border-radius: 7px;
  border: 1px solid var(--trait);
  background: var(--surface-2);
  color: var(--bleu-clair);
  margin-top: 0.1rem;
}
.volant-icone svg { width: 1.05rem; height: 1.05rem; display: block; }
.volant-mot {
  font-family: var(--exp);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--texte);
}
.volant-dit {
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--texte-doux);
}
.volant-grille a:hover .volant-icone { border-color: var(--bleu); color: var(--bleu-clair); }
.volant-grille a.ici .volant-mot { color: var(--bleu-clair); }

/* Le renvoi vers le tour complet : même panneau, fond appuyé. */
.deroulant-liste .volant-tour {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.9rem 0.95rem;
  border-radius: 7px;
  background: var(--surface-2);
  border: 1px solid var(--trait);
  white-space: normal;
}
.deroulant-liste .volant-tour:hover { border-color: var(--bleu); }
.volant-tour .aller { font-size: 0.75rem; color: var(--bleu-clair); margin-top: auto; }
.volant-tour .volant-mot { line-height: 1.3; }

/* Le survol ouvre le panneau sans attendre le clic, quand le navigateur le
   permet. S'il ne le permet pas, le clic reste la façon normale d'ouvrir. */
@media (hover: hover) and (min-width: 72.0625rem) {
  .deroulant:hover > .deroulant-liste,
  .deroulant:focus-within > .deroulant-liste { display: grid; }
  /* Les navigateurs récents cachent le contenu d'un <details> fermé par
     content-visibility, que « display » ne défait pas. Il faut le lever, mais
     seulement pendant le survol : sinon le panneau ne se referme jamais. */
  .deroulant:hover::details-content,
  .deroulant:focus-within::details-content { content-visibility: visible; }
  .deroulant:hover summary::after { transform: translateY(1px) rotate(-135deg); }
}

/* Barre repliée : le panneau redevient une liste dans le flux. */
@media (max-width: 72rem) {
  .deroulant-liste {
    width: auto;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 0;
  }
  .volant-grille { display: flex; gap: 1.25rem; }
  .volant-grille a { display: block; padding: 0; }
  .volant-icone, .volant-dit { display: none; }
  .deroulant-liste .volant-tour { display: none; }
  .volant-mot { font-family: var(--sans); font-weight: 400; font-size: 0.875rem; color: var(--texte-doux); }
}

/* ---------- Le panneau prend toute la barre ----------
   Au-dessus de 1153 px, le panneau n'est plus une petite boîte accrochée sous
   le mot « Fonctionnalités » : il se déploie sur toute la largeur de la barre,
   et il descend en glissant. C'est ce qui le fait voler plutôt que surgir. */

.rail-int { position: relative; }

@media (hover: hover) and (min-width: 72.0625rem) {
  /* Le repère de position passe de l'entrée de menu à la barre entière. */
  .deroulant { position: static; }

  .deroulant-liste {
    left: 0;
    right: 0;
    width: auto;
    max-width: none;
    top: calc(100% + 0.55rem);
    grid-template-columns: minmax(0, 2.3fr) minmax(0, 1fr);
    gap: 0.75rem;
    padding: 0.9rem;
    border-radius: 12px;
    box-shadow: 0 32px 64px -32px rgba(0, 0, 0, 0.9);

    /* L'état fermé du glissement. Le panneau n'est de toute façon pas rendu
       tant qu'il est caché : ces valeurs sont son point de départ. */
    opacity: 0;
    transform: translateY(-0.55rem);
    transition: opacity 0.16s ease-out, transform 0.16s ease-out;
  }
  .deroulant[open] > .deroulant-liste,
  .deroulant:hover > .deroulant-liste,
  .deroulant:focus-within > .deroulant-liste {
    opacity: 1;
    transform: none;
  }
  @starting-style {
    .deroulant[open] > .deroulant-liste,
    .deroulant:hover > .deroulant-liste,
    .deroulant:focus-within > .deroulant-liste {
      opacity: 0;
      transform: translateY(-0.55rem);
    }
  }

  /* Six entrées sur trois colonnes : la barre est large, autant s'en servir. */
  .volant-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .volant-grille a { padding: 0.75rem 0.8rem; }

  /* Le pont invisible entre le mot et le panneau : sans lui, descendre la
     souris de l'un à l'autre traverse un vide et referme le menu. */
  .deroulant::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 0.9rem;
    display: none;
  }
  .deroulant:hover::after { display: block; }
}

/* ---------- La barre flotte ----------
   Elle ne touche plus aucun bord : un îlot arrondi, posé à distance du haut et
   des côtés, et le contenu défile dessous. Les marges laissent voir la page
   qui passe derrière, d'où le fond translucide et le flou : sans eux, un titre
   qui glisse sous la barre se lirait au travers. */

.rail {
  background: none;
  border-bottom: 0;
  padding: 0.75rem 1.25rem;
  top: 0;
}
.rail-int {
  max-width: 82rem;
  padding: 0.7rem 0.8rem 0.7rem 1.25rem;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(5, 12, 24, 0.80);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  backdrop-filter: saturate(150%) blur(14px);
  box-shadow:
    0 2px 6px -2px rgba(0, 0, 0, 0.45),
    0 20px 44px -26px rgba(0, 0, 0, 0.95);
}

/* Le bouton de droite se recale sur le bord intérieur de l'îlot. */
.rail-fin .cta { padding-block: 0.55rem; }

/* La hero cède la hauteur du nouvel îlot, marges comprises. */
.hero { --h-rail: 93px; }

/* Sur les écrans étroits la barre passe sur deux rangées : on resserre les
   marges, sinon l'îlot mange une bande de page pour rien. */
@media (max-width: 52rem) {
  .rail { padding: 0.5rem 0.75rem; }
  .rail-int { border-radius: 12px; padding: 0.6rem 0.6rem 0.6rem 0.9rem; }
}

/* Le panneau reprend le filet de l'îlot : les deux se lisent comme une seule
   pièce qui se déplie, et non comme deux boîtes empilées. */
@media (min-width: 72.0625rem) {
  .deroulant-liste { border-color: rgba(10, 24, 40, 0.10); }
}

/* ---------- L'îlot passe par-dessus la page ----------
   Jusqu'ici la barre occupait sa propre bande, et cette bande montrait le fond
   de page : un bandeau clair au-dessus de la hero. Elle est maintenant hors du
   flux et flotte sur la première section, qui remonte sous elle. En échange,
   cette section doit réserver la hauteur de l'îlot, sans quoi son titre
   passerait dessous. */

:root { --h-barre: 91px; }
@media (max-width: 72rem) { :root { --h-barre: 134px; } }
@media (max-width: 52rem) { :root { --h-barre: 122px; } }
/* Replié derrière son bouton, l'îlot ne fait plus qu'une rangée. */
@media (max-width: 60rem) { :root { --h-barre: 74px; } }

.rail {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

/* La première bande passe sous l'îlot et lui réserve sa hauteur. */
.enveloppe > .bande:first-of-type > .dedans { padding-top: calc(var(--h-barre) + 1.25rem); }

/* La hero n'a plus de barre à déduire : elle peut prendre l'écran entier. */
.hero { --h-rail: 0px; }

/* L'îlot se détache des deux fonds. Posé sur la hero sombre, un fond au ton de
   la bande le rendait invisible ; il prend donc un bleu nuit plus clair que la
   bande sombre et bien plus foncé qu'une bande blanche. */
.rail-int { background: rgba(19, 33, 54, 0.82); }

/* L'accroche de la hero : une ligne posée entre le titre et le paragraphe,
   plus affirmée que lui et plus discrète que lui. Elle reprend la police des
   titres, qui est ce qui la distingue du paragraphe sans la faire crier. */
.hero-texte p.accroche {
  font-family: var(--exp);
  font-size: clamp(1.0625rem, 1.75vw, 1.3125rem);
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.35;
  color: var(--texte);
  max-width: none;
  margin: 0 auto 0.65rem;
}
@media (max-height: 820px) {
  .hero-texte p.accroche { font-size: 1.0625rem; margin-bottom: 0.5rem; }
}

/* ---------- L'îlot passe au bleu clair ----------
   La barre vit dans un bloc marqué « sombre », qui lui donnait ses jetons de
   couleur. On les redéfinit sur l'îlot, comme on le fait déjà pour un cadre de
   capture posé sur une bande sombre : tout ce qu'il contient les lit, le
   panneau déroulant compris, et bascule en clair d'un seul geste. */

.rail-int {
  --fond:        #F2F6FB;
  --surface:     #FFFFFF;
  --surface-2:   #E9F0F8;
  --trait:       #D5E1F0;
  --trait-vif:   #B9C9DC;
  --texte:       #0A1828;
  --texte-doux:  #4C617A;
  --texte-sourd: #5A6F89;
  --bleu:        #1668E3;
  --bleu-clair:  #1257C4;

  color: var(--texte);
  background: rgba(228, 237, 250, 0.95);
  border-color: rgba(10, 24, 40, 0.09);
  box-shadow:
    0 2px 6px -2px rgba(10, 24, 40, 0.14),
    0 20px 44px -26px rgba(10, 24, 40, 0.45);
}

/* Le soulignement de la page courante et le survol suivent le même bleu. */
.rail-int .nav a.ici,
.rail-int .deroulant summary.ici { border-bottom-color: var(--bleu); }

/* ---------- Revue finale ---------- */

/* Trente-deux pixels séparaient le bas de l'îlot du titre : il collait. La
   première bande rend quatre fois plus d'air, quitte à ce que la hero ne
   tienne plus en un écran. */
.enveloppe > .bande:first-of-type > .dedans { padding-top: calc(var(--h-barre) + 4.5rem); }
@media (max-width: 60rem) {
  .enveloppe > .bande:first-of-type > .dedans { padding-top: calc(var(--h-barre) + 2.25rem); }
}

/* Les onglets de modules : plus gros encore, et posés sur un aplat bleu clair
   à 30 % d'opacité. Au-delà, le blanc du libellé ne passerait plus le seuil
   de contraste sur la bande sombre. */
.dom-choix label { font-size: 1.0625rem; padding: 0.78em 1.4em; }
.sombre .dom-choix label { background: rgba(228, 237, 250, 0.30); border-color: rgba(228, 237, 250, 0.45); }
.sombre .dom-choix label:hover { background: rgba(228, 237, 250, 0.42); }
@media (max-width: 40rem) {
  .dom-choix label { font-size: 0.9375rem; padding: 0.7em 1.05em; }
}

/* Le lien vers la fiche se détache du dernier point de la liste. */
.dom-texte .aller { margin-top: 0.4rem; }

/* Le prix d'avant se lit comme une remise. */
.offre-prix .avant { color: var(--rouge); }

/* Sur À propos, les paragraphes prenaient 54 caractères de large et laissaient
   la moitié droite vide. Ils occupent la colonne. */
.a-propos .chapeau,
.a-propos .entete-texte { max-width: none; }
.a-propos h2 { max-width: 40ch; }

/* ---------- Le carrousel des autres fiches ----------
   Il défile tout seul vers la gauche. La piste contient deux fois les mêmes
   cartes : à mi-course, la seconde moitié est exactement là où la première
   était, et la boucle ne se voit pas. L'écart entre les cartes est une marge
   et non un gap, sinon la moitié ne tomberait pas juste. */

.carrousel {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
}
.car-piste {
  list-style: none;
  margin: 0;
  padding: 0.3rem 0 1.4rem;
  display: flex;
  width: max-content;
  animation: car-defile 55s linear infinite;
  will-change: transform;
}
@keyframes car-defile {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.carrousel:hover .car-piste,
.carrousel:focus-within .car-piste { animation-play-state: paused; }

.car-carte { flex: 0 0 23rem; margin-right: 1.25rem; }
.car-carte > a {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
  padding: 1rem 1rem 1.25rem;
  border: 1px solid var(--trait);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: var(--ombre);
  text-decoration: none;
  transition: border-color 0.16s, transform 0.16s;
}
.car-carte > a:hover { border-color: var(--bleu); transform: translateY(-3px); }
.car-carte img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  border: 1px solid var(--trait);
}
.car-texte { display: flex; flex-direction: column; gap: 0.3rem; padding-inline: 0.25rem; }
.car-titre {
  font-family: var(--exp);
  font-size: 1.1875rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--texte);
}
.car-dit { font-size: 0.9375rem; color: var(--texte-doux); }
.car-texte .aller { margin-top: 0.35rem; }
.car-pied { margin-top: 1rem; }

@media (max-width: 52rem) {
  .car-carte { flex-basis: 17.5rem; margin-right: 1rem; }
  .car-titre { font-size: 1.0625rem; }
}

/* Sans animation, la piste ne bouge plus : elle devient une bande que l'on
   fait défiler soi-même, sinon les cartes de droite seraient inatteignables. */
@media (prefers-reduced-motion: reduce) {
  .carrousel {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .car-piste { width: auto; }
  .car-carte[aria-hidden="true"] { display: none; }
}

/* ---------- Le pied de page ---------- */

.pied-site {
  border-top: 1px solid var(--trait);
  background: rgba(228, 237, 250, 0.95);
}
.pied-site-int {
  max-width: 84rem;
  margin: 0 auto;
  padding-inline: 1.25rem;
  padding-block: 3rem 2.5rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
}
@media (min-width: 56rem) {
  .pied-site-int { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; }
}
.pied-logo { display: inline-flex; }
.pied-logo img { display: block; height: 1.9rem; width: auto; }
.pied-raison { font-weight: 600; color: var(--texte); margin: 1.1rem 0 0.35rem; font-size: 0.9375rem; }
.pied-marque address {
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  font-size: 0.9375rem;
  color: var(--texte-doux);
}
.pied-mail {
  display: inline-block;
  margin-top: 0.8rem;
  font-size: 0.9375rem;
  color: var(--action-survol);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.pied-mail:hover { border-bottom-color: var(--action-survol); }
.pied-colonne { display: flex; flex-direction: column; gap: 0.55rem; }
.pied-titre {
  font-family: var(--exp);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--texte);
  margin: 0 0 0.3rem;
}
.pied-colonne a {
  font-size: 0.9375rem;
  color: var(--texte-doux);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  align-self: flex-start;
}
.pied-colonne a:hover { color: var(--texte); border-bottom-color: var(--bleu); }
.pied-bas { border-top: 1px solid rgba(10, 24, 40, 0.10); }
.pied-bas-int {
  max-width: 84rem;
  margin: 0 auto;
  padding: 1.1rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.5rem;
  justify-content: space-between;
  font-size: 0.8125rem;
  color: var(--texte-doux);
}

/* Sur l'aplat bleu de .regle, le bleu vif tombait à 4,33 : le lien prend le
   bleu dense. */
.regle a.aller { color: var(--action-survol); }

/* ---------- Le menu de téléphone ----------
   Sous 60 rem les cinq entrées plus le bouton ne tiennent pas sur une ligne :
   jusqu'ici elles passaient sur une seconde rangée qui défilait sur le côté,
   et « Contact » se retrouvait hors écran. Elles se replient maintenant
   derrière un bouton, sans JavaScript : une case à cocher masquée, et le
   sélecteur ~ pour ouvrir ses voisines. */

.burger-case,
.burger-bouton { display: none; }

@media (max-width: 60rem) {
  .rail-int { flex-wrap: wrap; gap: 0; align-items: center; }
  .marque { margin-right: auto; }

  .burger-case {
    display: block;
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0;
    pointer-events: none;
  }
  .burger-bouton {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 44px;
    padding-inline: 0.4rem;
    cursor: pointer;
    user-select: none;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--texte);
  }
  .burger-trait,
  .burger-trait::before,
  .burger-trait::after {
    display: block;
    width: 20px; height: 2px;
    border-radius: 2px;
    background: currentColor;
  }
  .burger-trait { position: relative; }
  .burger-trait::before,
  .burger-trait::after {
    content: "";
    position: absolute;
    left: 0;
    transition: transform 0.18s;
  }
  .burger-trait::before { top: -6px; }
  .burger-trait::after  { top: 6px; }
  .burger-case:checked ~ .burger-bouton .burger-trait { background: transparent; }
  .burger-case:checked ~ .burger-bouton .burger-trait::before { transform: translateY(6px) rotate(45deg); }
  .burger-case:checked ~ .burger-bouton .burger-trait::after { transform: translateY(-6px) rotate(-45deg); }
  .burger-case:focus-visible ~ .burger-bouton {
    outline: 2px solid var(--bleu);
    outline-offset: 2px;
    border-radius: 6px;
  }

  .rail-int > .nav,
  .rail-int > .rail-fin { display: none; }
  .burger-case:checked ~ .nav { display: flex; }
  .burger-case:checked ~ .rail-fin { display: block; }

  .nav {
    order: 3;
    width: 100%;
    flex-direction: column;
    gap: 0;
    margin-top: 0.55rem;
    padding-top: 0.3rem;
    padding-bottom: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    font-size: 1rem;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .nav > a,
  .nav .deroulant > summary {
    display: flex;
    align-items: center;
    min-height: 46px;
    padding-block: 0;
    border-bottom: 0;
  }
  .rail-fin {
    order: 4;
    width: 100%;
    margin: 0.5rem 0 0.2rem;
  }
  .rail-fin .cta {
    width: 100%;
    justify-content: center;
    min-height: 46px;
  }

  /* Le panneau des fonctionnalités se déplie dans l'îlot au lieu d'en sortir :
     posé en absolu, il débordait de 165 px sur un écran de 360. */
  .deroulant { width: 100%; }
  .deroulant-liste {
    position: static;
    min-width: 0;
    width: auto;
    padding: 0 0 0.3rem;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    opacity: 1;
    transform: none;
  }
  .deroulant-liste .volant-grille {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .deroulant-liste .volant-grille a,
  .deroulant-liste a {
    min-height: 44px;
    align-items: center;
    white-space: normal;
    padding-inline: 0.6rem;
  }
  .deroulant-liste .volant-dit,
  .deroulant-liste .volant-tour { display: none; }

  /* Au doigt, une cible de 21 px se rate. Les liens du pied, ceux du logo
     et les coordonnées prennent la hauteur minimale recommandée. */
  .marque { display: flex; align-items: center; min-height: 44px; }
  .pied-colonne { gap: 0; }
  .pied-colonne a,
  .pied-mail,
  .pied-logo { display: inline-flex; align-items: center; min-height: 44px; }
  .joindre a { display: inline-flex; align-items: center; min-height: 44px; }
  .tuile { padding-block: 1.25rem; }
  .dom-choix label { min-height: 44px; display: inline-flex; align-items: center; }
  .aller { display: inline-flex; align-items: center; min-height: 44px; }
  .deroulant-liste .volant-icone { width: 1.5rem; }
}