/* Échappée Studio — feuille générée par build.py à partir de src/css/. Ne pas modifier ici. */

/* ==== 00-tokens.css ==== */
/* ==========================================================================
   00 — Jetons du design system (charte Échappée Studio v1.0, octobre 2026)
   Toutes les valeurs partagées passent par ces variables.
   ========================================================================== */

:root {
  /* « only » : les navigateurs qui assombrissent d'office les pages (Chrome Android,
     Samsung Internet) laissent ce site tel quel (sinon le logo devient illisible) */
  color-scheme: only light;

  /* --- Couleurs de la charte ------------------------------------------- */
  --c-blue: #2457FF;        /* Bleu Échappée : actions, chiffres clés, barre de tête */
  --c-black: #171717;       /* Noir Studio : textes, fonds sombres */
  --c-ivory: #F5F3ED;       /* Ivoire : fond principal */
  --c-white: #FFFFFF;       /* Blanc : cartes, version inversée */
  --c-gray: #61646C;        /* Gris : textes secondaires (5,4:1 sur ivoire) */

  /* --- Dérivés (filets, survols, fonds sombres) ------------------------ */
  --c-blue-hover: #1740E0;  /* survol du bouton principal */
  --c-ivory-deep: #ECE9E1;  /* fond secondaire sur ivoire */
  --c-line: #DDD9CF;        /* filet sur ivoire / blanc */
  --c-line-strong: #BDB8AC; /* filet appuyé, bordures de contrôle */
  --c-on-dark: #FFFFFF;     /* sur fond noir, tout texte est blanc (charte) :
                               la hiérarchie passe par la taille et la graisse */
  --c-line-dark: #33343A;   /* filet sur noir */
  --c-surface-dark: #202023;/* carte sur noir */

  /* --- Typographie ------------------------------------------------------ */
  --font-display: "Nimbus Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-text: "DejaVu Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --fs-display: max(3rem, min(2.52rem + 1.98vw, 4rem));       /* H1 : 48 (mobile) → 64 (≥ 1200 px) */
  --fs-h2: max(2rem, min(1.75rem + 0.9vw, 2.5rem));           /* H2 : 32 → 40 */
  --fs-h3: max(1.25rem, min(1.17rem + 0.3vw, 1.5rem));        /* H3 : 20 → 24 */
  --fs-lead: max(1.125rem, min(1.06rem + 0.3vw, 1.3125rem));  /* chapô : 18 → 21 */
  --fs-body: max(1rem, min(0.97rem + 0.15vw, 1.0625rem));     /* corps : 16 → 17 */
  --fs-small: 0.875rem;                                    /* 14 */
  --fs-xs: 0.75rem;                                        /* 12 : mentions, légendes fines */
  --fs-stat: max(2.5rem, min(2.1rem + 1.4vw, 3.5rem));        /* chiffres clés : 40 → 56 */

  --lh-display: 1.05;
  --lh-h2: 1.15;
  --lh-h3: 1.25;
  --lh-body: 1.5;
  --lh-caption: 1.4;

  --tracking-display: -0.03em;  /* grands titres serrés */
  --tracking-h2: -0.022em;
  --tracking-eyebrow: 0.06em;

  /* --- Espacements : multiples de 8 px ---------------------------------- */
  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 32px;
  --s-5: 40px;
  --s-6: 48px;
  --s-7: 56px;
  --s-8: 64px;
  --s-10: 80px;
  --s-12: 96px;
  --s-14: 112px;
  --s-16: 128px;

  /* --- Grille : 12 colonnes, gouttières 24 px --------------------------- */
  --grid-cols: 12;
  --grid-gap: 24px;
  --container: 1200px;      /* largeur de contenu maximale */
  --gutter: 24px;           /* marge latérale (mobile : 24 px) */
  --section-pad: var(--s-10);

  /* --- Rayons ----------------------------------------------------------- */
  --r-card: 12px;
  --r-btn: 0;               /* boutons à angles droits (choix d’octobre 2026, comme la maquette p. 10) */

  /* --- Obliques : géométrie exacte du symbole ---------------------------
     Coupe des barres ≈ 62° → décalage horizontal = hauteur × 0,5317 (1 / tan 62°).
     Montée de la barre de tête ≈ 8,7° → 0,153 de hauteur par unité de largeur.
     --clip-lead : barre de tête du symbole (boîte 2,394:1).
     --clip-bar  : barre basse du symbole, sans montée (boîte 4,574:1). */
  --cut: 0.5317;
  --rise: 0.153;
  --clip-lead: polygon(18.82% 29.58%, 100% 0%, 83.53% 70.42%, 0% 100%);
  --clip-bar: polygon(11.63% 0%, 100% 0%, 87.91% 100%, 0% 100%);

  /* --- Logo ------------------------------------------------------------- */
  --logo-w: 184px;          /* logo complet : jamais moins de 180 px */
  --logo-ratio: 0.26349;    /* hauteur / largeur du logo (196,09 / 744,21) */

  /* --- Mouvement -------------------------------------------------------- */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 180ms;
}

@media (min-width: 600px) {
  :root { --gutter: 32px; }
}

@media (min-width: 900px) {
  :root {
    --gutter: 40px;
    --section-pad: var(--s-14);
    --logo-w: 200px;
  }
}

@media (min-width: 1200px) {
  :root { --section-pad: var(--s-16); }
}

/* ==== 10-base.css ==== */
/* ==========================================================================
   10 — Base : reset léger, typographie, liens, focus, accessibilité
   ========================================================================== */

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

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

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--c-ivory);
  color: var(--c-black);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6,
p, ul, ol, dl, dd, figure, blockquote { margin: 0; }

/* listes à classe : ni puces ni retrait. Sélecteur simple plutôt que :where(), que
   Safari < 14 et Chrome < 88 ignorent (puces partout, jusque dans le menu) : pour
   donner un retrait à une liste à classe, viser au moins aussi précis (ul.x, .x > li). */
ul[class], ol[class] { list-style: none; padding: 0; }

/* --- Titres : Nimbus Sans Bold (repli Helvetica / Arial), serrés --------- */
h1, h2, h3, h4,
.h1, .h2, .h3 {
  font-family: var(--font-display);
  font-weight: 700;
  color: inherit;
  text-wrap: balance;
}

h1, .h1 {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
}
/* Petits écrans (< 375 px) : à 48 px, un mot long (« Confidentialité. »,
   « l’entraînement ») dépasse la colonne. Césure française (lang="fr") plutôt
   qu'une coupure en plein mot ou un débordement dans la marge. */
@media (max-width: 374.98px) {
  h1, .h1 {
    -webkit-hyphens: auto;
    hyphens: auto;
  }
}

h2, .h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--tracking-h2);
}

h3, .h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: -0.012em;
}

h4 { font-size: 1.0625rem; line-height: 1.3; }

p, li { text-wrap: pretty; }

strong, b { font-weight: 700; }

small { font-size: var(--fs-small); }

img, svg, video, picture { display: block; max-width: 100%; }
img { height: auto; }

/* --- Liens ---------------------------------------------------------------- */
a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}
a:hover { text-decoration-thickness: 2px; }

/* lien dans un texte courant : bleu souligné (4,9:1 sur ivoire).
   Spécificité faible (:where) : toute classe de composant l'emporte. */
:where(.prose, p, li) > a:not([class]) { color: var(--c-blue); }
:where(.band--black, .band--blue, .cta-block) :where(.prose, p, li) > a:not([class]) { color: inherit; }

/* --- Sélection et focus ---------------------------------------------------- */
::selection { background: var(--c-blue); color: var(--c-white); }

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

.band--black :focus-visible,
.band--blue :focus-visible,
.site-footer :focus-visible,
.cta-block :focus-visible { outline-color: var(--c-white); }

main:focus { outline: none; }

/* --- Lien d'évitement ------------------------------------------------------ */
.skip-link {
  position: absolute;
  top: var(--s-2);
  left: var(--s-2);
  z-index: 100;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--s-1) var(--s-2);
  border-radius: var(--r-btn);
  background: var(--c-black);
  color: var(--c-white);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-200%);
}
/* deux règles séparées : un navigateur qui ignore :focus-visible écarterait toute
   la liste, et le lien d'évitement ne se montrerait jamais */
.skip-link:focus { transform: none; outline-color: var(--c-blue); }
.skip-link:focus-visible { transform: none; outline-color: var(--c-blue); }

/* --- Mot composé qui ne doit pas être coupé à la ligne (« Parlons-en ») -------- */
.nowrap { white-space: nowrap; }

/* --- Utilitaires d'accessibilité ------------------------------------------ */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

[id] { scroll-margin-top: var(--s-3); }

hr {
  height: 1px;
  margin: 0;
  border: 0;
  background: var(--c-line);
}

/* --- Mouvement réduit : aucune animation ni transition -------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==== 20-layout.css ==== */
/* ==========================================================================
   20 — Mise en page : conteneur, grille 12 colonnes, sections, bandes
   ========================================================================== */

/* --- Conteneur : 1200 px de contenu max, marges 24 / 32 / 40 px ----------- */
.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-left: auto; margin-right: auto;
  padding-left: var(--gutter); padding-right: var(--gutter);
}

.container--narrow { max-width: calc(800px + 2 * var(--gutter)); }

/* --- Grille 12 colonnes, gouttières 24 px ---------------------------------
   Mobile : une colonne (chaque enfant occupe toute la largeur).
   ≥ 600 px : .sm-span-N ; ≥ 900 px : .span-N et .start-N. */
.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  column-gap: var(--grid-gap);
  row-gap: var(--s-4);
}
.grid > * { grid-column: 1 / -1; }

.grid--gap-lg { row-gap: var(--s-6); }
.grid--center { align-items: center; }
.grid--end { align-items: end; }

@media (min-width: 600px) {
  .sm-span-4 { grid-column: auto / span 4; }
  .sm-span-6 { grid-column: auto / span 6; }
  .sm-span-12 { grid-column: auto / span 12; }
}

@media (min-width: 900px) {
  .span-1 { grid-column: auto / span 1; }
  .span-2 { grid-column: auto / span 2; }
  .span-3 { grid-column: auto / span 3; }
  .span-4 { grid-column: auto / span 4; }
  .span-5 { grid-column: auto / span 5; }
  .span-6 { grid-column: auto / span 6; }
  .span-7 { grid-column: auto / span 7; }
  .span-8 { grid-column: auto / span 8; }
  .span-9 { grid-column: auto / span 9; }
  .span-10 { grid-column: auto / span 10; }
  .span-11 { grid-column: auto / span 11; }
  .span-12 { grid-column: auto / span 12; }

  .start-1 { grid-column-start: 1; }
  .start-2 { grid-column-start: 2; }
  .start-3 { grid-column-start: 3; }
  .start-4 { grid-column-start: 4; }
  .start-5 { grid-column-start: 5; }
  .start-6 { grid-column-start: 6; }
  .start-7 { grid-column-start: 7; }
  .start-8 { grid-column-start: 8; }
  .start-9 { grid-column-start: 9; }
  .start-10 { grid-column-start: 10; }
}

/* --- Sections -------------------------------------------------------------- */
.section { padding-top: var(--section-pad); padding-bottom: var(--section-pad); }
.section--tight { padding-top: var(--s-10); padding-bottom: var(--s-10); }
.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }

/* --- Bandes de couleur (≈ 65 % ivoire, 25 % noir, 10 % bleu) ---------------
   Le blanc est réservé aux cartes et panneaux : pas de bande blanche pleine largeur. */
.band--ivory { background: var(--c-ivory); color: var(--c-black); }
.band--black { background: var(--c-black); color: var(--c-on-dark); }
.band--blue  { background: var(--c-blue);  color: var(--c-white); }

/* --- Deux sections de même fond qui se suivent : filet aligné sur le contenu */
.section--ruled { padding-top: 0; }
.section--ruled > .container::before {
  content: "";
  display: block;
  height: 1px;
  margin-bottom: var(--section-pad);
  background: var(--c-line);
}

/* --- En-tête de section : sur-titre, H2 (7 col.), chapô (5 col. à droite) -- */
.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: var(--grid-gap);
  row-gap: var(--s-3);
  margin-bottom: var(--s-6);
}
.section-head > * { grid-column: 1 / -1; }

@media (min-width: 900px) {
  .section-head {
    grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
    margin-bottom: var(--s-8);
  }
  .section-head__title { grid-column: 1 / span 7; }
  .section-head__intro { grid-column: 9 / span 4; align-self: end; }
  .section-head--stacked .section-head__intro { grid-column: 1 / span 7; }
}

.section-head__intro {
  color: var(--c-gray);
  font-size: var(--fs-body);
}
.band--black .section-head__intro { color: var(--c-on-dark); }
.band--blue .section-head__intro { color: var(--c-white); }

/* --- Empilement vertical régulier ----------------------------------------- */
.stack > * + * { margin-top: var(--stack, var(--s-3)); }
.stack--sm { --stack: var(--s-2); }
.stack--lg { --stack: var(--s-5); }

/* --- Largeurs de lecture ---------------------------------------------------- */
.measure { max-width: 36em; }
.measure--wide { max-width: 44em; }

/* --- Texte courant long (pages éditoriales) -------------------------------- */
.prose > * + * { margin-top: var(--s-2); }
.prose > h2 { margin-top: var(--s-8); }
.prose > h3 { margin-top: var(--s-5); }
.prose > h2 + *,
.prose > h3 + * { margin-top: var(--s-2); }
.prose ul,
.prose ol { padding-left: 1.25em; }
.prose li + li { margin-top: var(--s-1); }

/* ==== 30-components.css ==== */
/* ==========================================================================
   30 — Composants partagés
   Sommaire : logo · en-tête et navigation · boutons · liens · sur-titre ·
   obliques · cartes · chiffres clés · étapes · valeurs · hero · produit et
   captures · appel final · pied de page · mentions · utilitaires
   ========================================================================== */

/* --- Logo et symbole inline (fill = currentColor, barre de tête .es-lead) --- */
.es-logo,
.es-symbol { display: block; height: auto; }
.es-lead { fill: var(--c-blue); }
/* sur fond bleu, tout est blanc (version « fond bleu » de la charte) */
.band--blue .es-lead,
.cta-block .es-lead,
.es-mono .es-lead { fill: currentColor; }

/* ==========================================================================
   En-tête et navigation
   ========================================================================== */
.site-header {
  position: relative;
  z-index: 50;
  background: var(--c-ivory);
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-1) var(--s-3);
  padding-top: var(--s-3); padding-bottom: var(--s-3);
}

/* zone de protection du logo : x = 1/6 de la hauteur du symbole, tout autour */
.site-header__brand {
  --protect: calc(var(--logo-w) * var(--logo-ratio) / 6);
  display: block;
  flex: none;
  padding: var(--protect);
  margin: calc(-1 * var(--protect));
  border-radius: 4px;
  color: var(--c-black);
}
.site-header__brand .es-logo { width: var(--logo-w); }

/* Sans JavaScript (et en mobile) : la navigation s'affiche en ligne sous le logo. */
.site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1) var(--s-3);
  width: 100%;
}

.site-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--s-3);
}

.site-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--c-black);
  font-size: 1rem;
  text-decoration: none;
}

/* soulignement oblique (coupe 62°) au survol et sur la page active */
.site-nav__link::after {
  --h: 4px;
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  height: var(--h);
  background: var(--c-blue);
  clip-path: polygon(calc(var(--h) * var(--cut)) 0, 100% 0, calc(100% - var(--h) * var(--cut)) 100%, 0 100%);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur) var(--ease);
}
.site-nav__link:hover::after,
.site-nav__link[aria-current]::after { transform: scaleX(1); }

@media (min-width: 900px) {
  .site-header__inner {
    flex-wrap: nowrap;
    padding-top: var(--s-4); padding-bottom: var(--s-4);
  }
  .site-nav {
    width: auto;
    flex-wrap: nowrap;
    gap: var(--s-5);
  }
  .site-nav__list {
    flex-wrap: nowrap;
    gap: var(--s-4);
  }
}

/* --- Bouton du menu mobile (révélé par site.js) --------------------------- */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  min-height: 44px;
  padding: 0 var(--s-2);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-btn);
  background: transparent;
  color: var(--c-black);
  font: 700 1rem/1 var(--font-text);
  cursor: pointer;
}
.nav-toggle:hover { border-color: var(--c-black); }
.nav-toggle[hidden] { display: none; }

/* icône : deux barres obliques, celle du haut en bleu comme le symbole */
.nav-toggle__icon {
  position: relative;
  flex: none;
  width: 22px;
  height: 14px;
}
.nav-toggle__icon::before,
.nav-toggle__icon::after {
  --h: 4px;
  content: "";
  position: absolute;
  width: 17px;
  height: var(--h);
  clip-path: polygon(calc(var(--h) * var(--cut)) 0, 100% 0, calc(100% - var(--h) * var(--cut)) 100%, 0 100%);
  transition: transform var(--dur) var(--ease);
}
.nav-toggle__icon::before { top: 2px; left: 5px; background: var(--c-blue); }
.nav-toggle__icon::after { bottom: 2px; left: 0; background: var(--c-black); }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon::before { transform: translate(-2.5px, 3px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon::after { transform: translate(2.5px, -3px) rotate(-45deg); }

@media (min-width: 900px) {
  .nav-toggle,
  .nav-toggle:not([hidden]) { display: none; }
}

/* --- Menu mobile (classe .js-nav posée par site.js) ----------------------- */
@media (max-width: 899.98px) {
  .js-nav .site-nav { display: none; }

  .js-nav.is-open .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0 var(--gutter) var(--s-4);
    background: var(--c-ivory);
    border-top: 1px solid var(--c-line);
    border-bottom: 1px solid var(--c-line);
  }
  .js-nav.is-open .site-nav__list {
    flex-direction: column;
    gap: 0;
  }
  .js-nav.is-open .site-nav__link {
    display: flex;
    width: 100%;
    min-height: 64px;
    border-bottom: 1px solid var(--c-line);
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.02em;
  }
  .js-nav.is-open .site-nav__link::after {
    --h: 5px;
    right: auto;
    bottom: 10px;
    width: 40px;
  }
  .js-nav.is-open .site-nav__cta {
    width: 100%;
    min-height: 56px;
    margin-top: var(--s-3);
  }
  /* menu ouvert : il masque la page, son bouton redevient l'action principale */
  .js-nav.is-open .site-nav__cta:not([aria-current]) {
    border-color: transparent;
    background: var(--c-blue);
    color: var(--c-white);
  }
  .js-nav.is-open .site-nav__cta:not([aria-current]):hover { background: var(--c-blue-hover); }
}

/* Bouton d'en-tête : contour noir (le bouton bleu plein reste celui du contenu,
   une seule action principale par zone). Sur /contact/, il marque la page en
   cours : fond noir, comme le soulignement des liens de navigation. */
.site-nav__cta[aria-current] {
  border-color: var(--c-black);
  background: var(--c-black);
  color: var(--c-ivory);
}

/* ==========================================================================
   Boutons (angles droits) — un seul bouton plein bleu par zone de contenu
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
  min-height: 48px;
  padding: var(--s-1) var(--s-3);
  border: 2px solid transparent;
  border-radius: var(--r-btn);
  font-family: var(--font-text);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.btn--primary {
  background: var(--c-blue);
  color: var(--c-white);
}
.btn--primary:hover { background: var(--c-blue-hover); }

.btn--secondary {
  background: transparent;
  border-color: currentColor;
  color: var(--c-black);
}
.btn--secondary:hover {
  background: var(--c-black);
  border-color: var(--c-black);
  color: var(--c-ivory);
}
.band--black .btn--secondary { color: var(--c-white); }
.band--black .btn--secondary:hover {
  background: var(--c-white);
  border-color: var(--c-white);
  color: var(--c-black);
}

/* bouton blanc sur fond bleu (ou noir) */
.btn--inverse {
  background: var(--c-white);
  color: var(--c-black);
}
.btn--inverse:hover {
  background: var(--c-black);
  color: var(--c-white);
}
.band--black .btn--inverse:hover { background: var(--c-ivory); color: var(--c-black); }

.btn--sm {
  min-height: 44px;
  padding: var(--s-1) var(--s-2);
  font-size: 1rem;
}

.btn--block { width: 100%; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-4);
}

/* --- Lien-flèche (action secondaire) --------------------------------------
   Cible de 44 px de haut. La flèche est posée en fin de lien, hors du flux :
   elle n'est pas soulignée et ne passe jamais seule à la ligne. */
.link-arrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-right: 1.5em;
  color: var(--c-blue);
  font-weight: 700;
  line-height: 1.4;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}
.link-arrow::after {
  content: "\2192";
  content: "\2192" / "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: transform var(--dur) var(--ease);
}
.link-arrow:hover { text-decoration-thickness: 2px; }
.link-arrow:hover::after { transform: translateX(4px); }

/* lien externe : flèche montante */
.link-arrow--out::after {
  content: "\2197";
  content: "\2197" / "";
}
.link-arrow--out:hover::after { transform: translate(3px, -3px); }

.band--black .link-arrow,
.band--blue .link-arrow,
.cta-block .link-arrow { color: var(--c-white); }

/* ==========================================================================
   Sur-titre « 01 / EXPERTISES »
   ========================================================================== */
.eyebrow {
  font-family: var(--font-text);
  font-size: var(--fs-small);
  font-weight: 700;
  line-height: var(--lh-caption);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--c-blue);
}

/* sur fond noir, le bleu n'est pas lisible en petit : texte blanc + pastille bleue */
.band--black .eyebrow,
.band--blue .eyebrow {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--c-white);
}
.band--black .eyebrow::before,
.band--blue .eyebrow::before {
  content: "";
  flex: none;
  width: 29px;
  aspect-ratio: 161.5 / 67.45;
  background: var(--c-blue);
  clip-path: var(--clip-lead);
}
.band--blue .eyebrow::before { background: var(--c-white); }

/* ==========================================================================
   Accents obliques (détails uniquement)
   ========================================================================== */

/* pastille : barre de tête du symbole (montée 8,7°, coupe ≈ 62°) */
.slash {
  display: inline-block;
  flex: none;
  width: 32px;
  aspect-ratio: 161.5 / 67.45;
  background: var(--c-blue);
  clip-path: var(--clip-lead);
  vertical-align: middle;
}
.slash--sm { width: 20px; }
.slash--lg { width: 64px; }
.slash--black { background: var(--c-black); }
.slash--white { background: var(--c-white); }

/* filet oblique : barre basse du symbole (coupe 62°, sans montée) */
.oblique-rule {
  --h: 6px;
  display: block;
  width: 48px;
  height: var(--h);
  background: var(--c-blue);
  clip-path: polygon(calc(var(--h) * var(--cut)) 0, 100% 0, calc(100% - var(--h) * var(--cut)) 100%, 0 100%);
}

/* liste à puces obliques */
.list-oblique {
  display: grid;
  gap: var(--s-1);
}
.list-oblique > li {
  position: relative;
  padding-left: var(--s-3);
}
.list-oblique > li::before {
  --h: 5px;
  content: "";
  position: absolute;
  left: 0;
  top: calc(0.75em - 2px);
  width: 16px;
  height: var(--h);
  background: var(--c-black);
  clip-path: polygon(calc(var(--h) * var(--cut)) 0, 100% 0, calc(100% - var(--h) * var(--cut)) 100%, 0 100%);
}
.band--black .list-oblique > li::before { background: var(--c-white); }

/* ==========================================================================
   Cartes (rayon 12 px, sans ombre)
   ========================================================================== */
.cards {
  display: grid;
  gap: var(--grid-gap);
}
@media (min-width: 600px) {
  .cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-3);
  border: 1px solid transparent;
  border-radius: var(--r-card);
  background: var(--c-white);
}
@media (min-width: 900px) {
  .card { padding: var(--s-5) var(--s-4); }
}
.band--black .card {
  background: var(--c-surface-dark);
  border-color: var(--c-line-dark);
}
.card--outline {
  background: transparent;
  border-color: var(--c-line-strong);
}

.card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
}
.card__index {
  font-size: var(--fs-small);
  line-height: var(--lh-caption);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--c-gray);
}
.card__title { font-size: var(--fs-h3); }
.card__text { color: var(--c-gray); }
.band--black .card__text,
.band--black .card__index { color: var(--c-on-dark); }
.card__foot {
  margin-top: auto;
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-line);
}
.band--black .card__foot { border-color: var(--c-line-dark); }

/* .cards--aligned : les 4 enfants de chaque carte (en-tête, titre, texte, pied)
   s'alignent d'une carte à l'autre (≥ 900 px, sous-grille) */
@media (min-width: 900px) {
  @supports (grid-template-rows: subgrid) {
    .cards--aligned > .card {
      display: grid;
      grid-row: span 4;
      grid-template-rows: subgrid;
      row-gap: var(--s-2);
    }
    .cards--aligned { row-gap: var(--grid-gap); }
    .cards--aligned .card__head { margin-bottom: var(--s-1); }
    .cards--aligned .card__foot { margin-top: var(--s-1); }
  }
}

/* carte entièrement cliquable : le lien .card__link couvre la carte */
.card__link { text-decoration: none; }
.card__link::before {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  border-radius: inherit;
}
.card--link { transition: border-color var(--dur) var(--ease); }
.card--link:hover { border-color: var(--c-black); }
.band--black .card--link:hover { border-color: var(--c-white); }
.card--link:focus-within { outline: 3px solid var(--c-blue); outline-offset: 3px; }
.card--link .card__link:focus-visible { outline: none; }

/* ==========================================================================
   Chiffres clés
   ========================================================================== */
.stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-5) var(--grid-gap);
}
@media (min-width: 600px) {
  .stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .stats--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.stat {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-line-strong);
}
.stat::before {
  --h: 6px;
  content: "";
  position: absolute;
  top: -3.5px;
  left: 0;
  width: 40px;
  height: var(--h);
  background: var(--c-blue);
  clip-path: polygon(calc(var(--h) * var(--cut)) 0, 100% 0, calc(100% - var(--h) * var(--cut)) 100%, 0 100%);
}
.stat__value {
  font-family: var(--font-display);
  font-size: var(--fs-stat);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--c-blue);
  white-space: nowrap;
}
.stat__label {
  font-size: var(--fs-small);
  line-height: var(--lh-caption);
  color: var(--c-gray);
}
.band--black .stat { border-color: var(--c-line-dark); }
.band--black .stat__value { color: var(--c-white); }
.band--black .stat__label { color: var(--c-on-dark); }

/* ==========================================================================
   Étapes numérotées (la barre bleue s'allonge : le calme, puis l'accélération)
   ========================================================================== */
.steps {
  display: grid;
  gap: var(--s-6) var(--grid-gap);
}
@media (min-width: 600px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding-top: var(--s-4);
  border-top: 1px solid var(--c-black);
}
.step::before {
  --h: 6px;
  content: "";
  position: absolute;
  top: -3.5px;
  left: 0;
  width: var(--bar, 24px);
  height: var(--h);
  background: var(--c-blue);
  clip-path: polygon(calc(var(--h) * var(--cut)) 0, 100% 0, calc(100% - var(--h) * var(--cut)) 100%, 0 100%);
}
.step:nth-child(2) { --bar: 40px; }
.step:nth-child(3) { --bar: 56px; }
.step:nth-child(4) { --bar: 72px; }
.step:nth-child(n+5) { --bar: 88px; }

@media (min-width: 1024px) {
  @supports (grid-template-rows: subgrid) {
    .step {
      display: grid;
      grid-row: span 3;
      grid-template-rows: subgrid;
      row-gap: var(--s-2);
      align-content: start;
    }
  }
}

.step__num {
  font-size: var(--fs-small);
  line-height: var(--lh-caption);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--c-blue);
}
.step__title { font-size: var(--fs-h3); }
.step__text { color: var(--c-gray); }
.band--black .step { border-color: var(--c-white); }
.band--black .step__num { color: var(--c-white); }
.band--black .step__text { color: var(--c-on-dark); }

/* ==========================================================================
   Valeurs (01 Initiative · 02 Exigence · 03 Progression)
   ========================================================================== */
.panel {
  padding: var(--s-5) var(--s-3);
  border-radius: var(--r-card);
  background: var(--c-white);
}
@media (min-width: 900px) {
  .panel { padding: var(--s-6) var(--s-6); }
}

.panel__title {
  margin-bottom: var(--s-4);
  font-size: var(--fs-h3);
}

.values {
  display: grid;
  gap: var(--s-4);
}
@media (min-width: 900px) {
  .values {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--grid-gap);
  }
}
.value {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}
@media (min-width: 900px) {
  .value + .value {
    padding-left: var(--grid-gap);
    border-left: 1px solid var(--c-line);
  }
}
.value__num {
  font-size: var(--fs-small);
  line-height: var(--lh-caption);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--c-blue);
}
.value__name {
  font-family: var(--font-display);
  font-size: max(1.75rem, min(1.5rem + 0.8vw, 2.25rem));
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
}
.value__text { color: var(--c-gray); }

/* ==========================================================================
   Hero d'accueil et en-tête des pages intérieures
   ========================================================================== */
.hero { padding-top: var(--s-6); padding-bottom: var(--s-10); }
@media (min-width: 900px) {
  .hero { padding-top: var(--s-12); padding-bottom: var(--s-14); }
}

.hero__grid { align-items: center; }
.hero__eyebrow { margin-bottom: var(--s-3); }
.hero__lead {
  max-width: 30em;
  margin-top: var(--s-3);
  font-size: var(--fs-lead);
  color: var(--c-gray);
}
.hero__actions { margin-top: var(--s-5); }

.hero__visual {
  display: flex;
  justify-content: flex-end;
}
.hero__symbol {
  width: 52%;
  max-width: 440px;
  color: var(--c-black);
}
@media (min-width: 900px) {
  .hero__symbol { width: 100%; }
}

/* apparition globale du symbole (les barres ne bougent jamais entre elles) */
@media (prefers-reduced-motion: no-preference) {
  .hero__symbol { animation: es-appear 900ms var(--ease) 150ms both; }
}
@keyframes es-appear {
  from { opacity: 0; transform: translate(-24px, 3.7px); }
  to { opacity: 1; transform: none; }
}

.page-hero { padding-top: var(--s-6); padding-bottom: var(--s-8); }
@media (min-width: 900px) {
  .page-hero { padding-top: var(--s-10); padding-bottom: var(--s-12); }
}
.page-hero__title { margin-top: var(--s-3); max-width: 18ch; }
.page-hero__lead {
  max-width: 36em;
  margin-top: var(--s-3);
  font-size: var(--fs-lead);
  color: var(--c-gray);
}
.page-hero__actions { margin-top: var(--s-5); }

/* fil d'Ariane */
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--s-1);
  font-size: var(--fs-small);
  line-height: var(--lh-caption);
  color: var(--c-gray);
}
/* séparateur décoratif : non lu par les lecteurs d'écran */
.breadcrumb li + li::before {
  content: "/";
  content: "/" / "";
  margin-right: var(--s-1);
}
.breadcrumb a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--c-gray);
}
.breadcrumb [aria-current] { color: var(--c-black); }

/* ==========================================================================
   Produit SaaS et cadres de capture d'écran
   ========================================================================== */
.product {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: var(--grid-gap);
  row-gap: var(--s-6);
  align-items: center;
}
.product > * { grid-column: 1 / -1; }
@media (min-width: 1024px) {
  .product { grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr)); }
  .product__body { grid-column: 1 / span 5; }
  .product__media { grid-column: 6 / span 7; }
}

.product__brand {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.product__logo {
  flex: none;
  width: auto;
  height: 48px;
}
.product__name { font-size: var(--fs-h2); }
.product__kicker {
  font-size: var(--fs-small);
  line-height: var(--lh-caption);
  color: var(--c-gray);
}
.band--black .product__kicker { color: var(--c-on-dark); }
.product__text {
  margin-top: var(--s-4);
  font-size: var(--fs-lead);
}
.product__role {
  margin-top: var(--s-3);
  padding-top: var(--s-2);
  border-top: 1px solid var(--c-line);
  font-size: var(--fs-small);
  line-height: var(--lh-caption);
  color: var(--c-gray);
}
.product__role strong { color: var(--c-black); }
.band--black .product__role {
  border-color: var(--c-line-dark);
  color: var(--c-on-dark);
}
.band--black .product__role strong { color: var(--c-on-dark); }
.product__actions { margin-top: var(--s-4); }
.product__stats { margin-top: var(--s-10); }

/* composition bureau + téléphone */
.shots {
  position: relative;
  padding-bottom: var(--s-5);
}
.shots .shot--desktop { width: 86%; }
.shots .shot--phone {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 24%;
}

/* cadre de capture : bord fin, rayon 12, barre d'adresse sobre */
.shot {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  background: var(--c-white);
}
.shot img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;
  background: var(--c-ivory-deep);
}
.shot__bar {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  height: 32px;
  padding-left: var(--s-2); padding-right: var(--s-2);
  border-bottom: 1px solid var(--c-line);
  background: var(--c-ivory);
}
.shot__bar i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-line-strong);
}
.shot__url {
  margin-left: var(--s-1);
  font-size: var(--fs-xs);
  line-height: 1;
  color: var(--c-gray);
}
.band--black .shot {
  border-color: var(--c-line-dark);
  background: var(--c-surface-dark);
}
.band--black .shot__bar {
  border-color: var(--c-line-dark);
  background: var(--c-black);
}
.band--black .shot__bar i { background: var(--c-gray); }
.band--black .shot__url { color: var(--c-on-dark); }

/* téléphone : coque Noir Studio, filet sombre (gris de la charte sur fond noir) */
.shot--phone {
  padding: var(--s-1);
  border: 1px solid var(--c-line-dark);
  border-radius: 28px;
  background: var(--c-black);
}
.band--black .shot--phone { border-color: var(--c-gray); }
.shot--phone img {
  aspect-ratio: 780 / 1688;
  border-radius: 22px;
}

.shot__caption {
  margin-top: var(--s-2);
  font-size: var(--fs-xs);
  line-height: var(--lh-caption);
  color: var(--c-gray);
}

/* ligne de note (ex. « d'autres produits sont en préparation ») */
.note-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-1) var(--s-4);
  padding-top: var(--s-2); padding-bottom: var(--s-2);
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}
.note-row__text { color: var(--c-gray); }
.band--black .note-row { border-color: var(--c-line-dark); }
.band--black .note-row__text { color: var(--c-on-dark); }

/* ==========================================================================
   Signature (fondateur)
   ========================================================================== */
.signature {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.signature__avatar {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
}
.signature__name { font-weight: 700; }
.signature__role {
  font-size: var(--fs-small);
  line-height: var(--lh-caption);
  color: var(--c-gray);
}

/* ==========================================================================
   Appel final (bloc bleu, texte blanc) — partial cta.html
   ========================================================================== */
.cta-final { padding-top: var(--section-pad); padding-bottom: var(--section-pad); }

.cta-block {
  position: relative;
  display: grid;
  gap: var(--s-4);
  padding: var(--s-6) var(--s-3);
  overflow: hidden;
  border-radius: var(--r-card);
  background: var(--c-blue);
  color: var(--c-white);
}
@media (min-width: 900px) {
  .cta-block {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--s-8);
    padding: var(--s-10) var(--s-8);
  }
}
.cta-block__title { max-width: 24em; }
.cta-block__break { display: block; }
.cta-block__text {
  max-width: 34em;
  margin-top: var(--s-2);
  font-size: var(--fs-lead);
}
.cta-block__actions { margin-top: var(--s-5); }
.cta-block__mail {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
  color: var(--c-white);
  overflow-wrap: anywhere;
}
.cta-block__symbol {
  order: -1;
  width: 72px;
  color: var(--c-white);
}
@media (min-width: 900px) {
  .cta-block__symbol {
    order: 0;
    width: 200px;
    margin-right: var(--s-2);
  }
}

/* ==========================================================================
   Pied de page (fond noir, logo fond sombre)
   ========================================================================== */
.site-footer {
  padding-top: var(--s-10); padding-bottom: var(--s-4);
  background: var(--c-black);
  color: var(--c-on-dark);
  font-size: var(--fs-small);
  line-height: var(--lh-caption);
}

.site-footer__top {
  row-gap: var(--s-6);
}
/* mobile : « Le site » et « Informations » côte à côte, « Contact » en dessous */
.site-footer__col { grid-column: auto / span 6; }
.site-footer__col--contact { grid-column: 1 / -1; }
@media (min-width: 600px) and (max-width: 899.98px) {
  .site-footer__brand { grid-column: 1 / -1; }
  .site-footer__col,
  .site-footer__col--contact { grid-column: auto / span 4; }
}
@media (min-width: 900px) {
  .site-footer__brand { grid-column: 1 / span 4; }
  .site-footer__col { grid-column: auto / span 2; }
  .site-footer__col--site { grid-column-start: 6; }
  .site-footer__col--contact { grid-column: auto / span 3; }
}

.site-footer__logo {
  --protect: calc(var(--logo-w) * var(--logo-ratio) / 6);
  display: inline-block;
  padding: var(--protect);
  margin: calc(-1 * var(--protect));
  color: var(--c-white);
}
.site-footer__logo .es-logo { width: var(--logo-w); }

.site-footer__tagline {
  margin-top: var(--s-4);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.site-footer__desc {
  margin-top: var(--s-1);
  color: var(--c-on-dark);
}

.site-footer__title {
  margin-bottom: var(--s-1);
  font-family: var(--font-text);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--c-on-dark);
}
.site-footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--c-white);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.site-footer__links a:hover { text-decoration: underline; }

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-1) var(--s-3);
  margin-top: var(--s-10);
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-line-dark);
  font-size: var(--fs-xs);
  line-height: var(--lh-caption);
  color: var(--c-on-dark);
}

/* ==========================================================================
   Mention légale fine (ex. TOEIC®)
   ========================================================================== */
.legal-note {
  max-width: 60em;
  font-size: var(--fs-xs);
  line-height: var(--lh-caption);
  color: var(--c-gray);
}
.band--black .legal-note { color: var(--c-on-dark); }
.band--blue .legal-note { color: var(--c-white); }

/* ==========================================================================
   Utilitaires (évitent tout attribut style="", interdit par la CSP)
   ========================================================================== */
.text-muted { color: var(--c-gray); }
.band--black .text-muted { color: var(--c-on-dark); }
.text-lead { font-size: var(--fs-lead); }
.mt-1 { margin-top: var(--s-1); }
.mt-2 { margin-top: var(--s-2); }
.mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); }
.mt-8 { margin-top: var(--s-8); }
.mt-10 { margin-top: var(--s-10); }

/* ==== 40-signature.css ==== */
/* ==========================================================================
   40 — Détails de signature : bouton à coupe oblique, survols, grande signature
   Chargé après 30-components.css : complète les composants sans les réécrire.
   ========================================================================== */

/* --- Bouton principal à coupe oblique ----------------------------------------
   Le bord droit est coupé à 62°, l'angle des barres du symbole. La forme est
   dessinée par un pseudo-élément : le bouton lui-même n'est pas découpé, son
   contour de focus reste donc entier. */
.btn--primary,
.btn--inverse {
  --btn-bg: var(--c-blue);
  --btn-cut: calc(48px * var(--cut));   /* ≈ 26 px de décalage sur 48 px de haut */
  position: relative;
  isolation: isolate;
  padding-right: calc(var(--s-3) + var(--s-2));
  background: none;
  transition: color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn--primary::before,
.btn--inverse::before {
  content: "";
  position: absolute;
  top: -2px; right: -2px; bottom: -2px; left: -2px;
  z-index: -1;
  background: var(--btn-bg);
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--btn-cut)) 100%, 0 100%);
  transition: background-color var(--dur) var(--ease);
}
.btn--primary:hover { background: none; --btn-bg: var(--c-blue-hover); }

.btn--inverse { --btn-bg: var(--c-white); }
.btn--inverse:hover,
.band--black .btn--inverse:hover { background: none; --btn-bg: var(--c-black); }
.band--black .btn--inverse:hover { --btn-bg: var(--c-ivory); }

/* survol : le bouton prend quelques pixels d'avance */
@media (prefers-reduced-motion: no-preference) {
  .btn--primary:hover,
  .btn--inverse:hover { transform: translateX(4px); }
  .btn--primary:active,
  .btn--inverse:active { transform: translateX(2px); }
}

/* bouton pleine largeur : même coupe */
.btn--block.btn--primary,
.btn--block.btn--inverse { padding-right: var(--s-3); }

/* --- Liens-flèches : soulignement discret qui s'affirme au survol ----------- */
.link-arrow {
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  transition: text-decoration-color var(--dur) var(--ease), text-decoration-thickness var(--dur) var(--ease);
}
.link-arrow:hover {
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
}
@media (prefers-reduced-motion: no-preference) {
  .link-arrow:hover::after { transform: translateX(6px); }
  .link-arrow--out:hover::after { transform: translate(4px, -4px); }
}

/* liens du pied de page : même trait oblique que la navigation */
.site-footer__links a {
  position: relative;
}
.site-footer__links a::after {
  --h: 3px;
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  height: var(--h);
  background: var(--c-blue);
  clip-path: polygon(calc(var(--h) * var(--cut)) 0, 100% 0, calc(100% - var(--h) * var(--cut)) 100%, 0 100%);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur) var(--ease);
}
.site-footer__links a:hover { text-decoration: none; }
.site-footer__links a:hover::after { transform: scaleX(1); }

/* --- Grande signature en bas de chaque page -------------------------------- */
.site-footer__signature {
  margin-top: var(--s-10);
  font-family: var(--font-display);
  font-size: min(17vw, 5.5rem);          /* mobile : deux lignes */
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.045em;
  color: var(--c-white);
}
.site-footer__signature > span { display: block; }
.site-footer__signature-dot { color: var(--c-blue); }
@media (min-width: 900px) {
  .site-footer__signature {
    margin-top: var(--s-12);
    font-size: min(10vw, 8.5rem);        /* une ligne, presque toute la largeur du contenu */
    white-space: nowrap;
  }
  .site-footer__signature > span { display: inline; }
}
.site-footer__desc { margin-top: var(--s-3); }

/* ==== 50-accueil.css ==== */
/* ==========================================================================
   50 — Accueil (page-accueil) : seulement ce qui est propre à cette page
   ========================================================================== */

/* filet bas du hero : signature factuelle du studio */
.hero__note {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-1) var(--s-3);
  margin-top: var(--s-8);
  padding-top: var(--s-2);
  border-top: 1px solid var(--c-line);
  font-size: var(--fs-small);
  line-height: var(--lh-caption);
  color: var(--c-gray);
}
@media (min-width: 900px) {
  .hero__note { margin-top: var(--s-12); }
}

/* teaser « Le studio » : signature du fondateur + lien */
.studio-teaser__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2) var(--s-4);
  margin-top: var(--s-5);
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-line);
}

/* 01 / Expertises : liste éditoriale (une ligne par métier, séparées par des filets) */
.xp-list {
  border-bottom: 1px solid var(--c-line);
}
.xp {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-2);
  padding-top: var(--s-5); padding-bottom: var(--s-5);
  border-top: 1px solid var(--c-black);
}
.xp__num {
  font-size: var(--fs-small);
  line-height: var(--lh-caption);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--c-blue);
}
.xp__title {
  font-size: max(1.75rem, min(1.4rem + 1.2vw, 2.5rem));
  line-height: var(--lh-h2);
  letter-spacing: var(--tracking-h2);
}
.xp__text {
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
}
.xp__points {
  margin-top: var(--s-3);
  color: var(--c-gray);
}
@media (min-width: 900px) {
  .xp {
    grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
    column-gap: var(--grid-gap);
    align-items: baseline;
    padding-top: var(--s-6); padding-bottom: var(--s-6);
  }
  .xp__num { grid-column: 1 / span 1; }
  .xp__title { grid-column: 2 / span 4; }
  .xp__body { grid-column: 7 / span 6; }
}

/* 02 / SaaS : un texte libre, sans cartes */
.saas-statement {
  font-family: var(--font-display);
  font-size: max(1.5rem, min(1.25rem + 1vw, 2.25rem));
  font-weight: 700;
  line-height: var(--lh-h2);
  letter-spacing: var(--tracking-h2);
}
.saas-intro__text {
  margin-top: var(--s-3);
  max-width: 40em;
}
@media (min-width: 900px) {
  .saas-intro > .span-7 { padding-top: var(--s-5); }
}

/* 03 / Méthode : les trois valeurs en liste compacte */
.values-block {
  margin-top: var(--s-10);
  padding-top: var(--s-4);
  border-top: 1px solid var(--c-line);
}
.values-block__title {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
}
.values-list__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-1) var(--s-3);
  padding-top: var(--s-2); padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--c-line);
}
.values-list__row:first-child { padding-top: 0; }
.values-list dt {
  min-width: 7.5em;
  font-family: var(--font-display);
  font-size: max(1.5rem, min(1.3rem + 0.6vw, 1.875rem));
  font-weight: 700;
  line-height: var(--lh-h2);
  letter-spacing: -0.025em;
}
.values-list dd { color: var(--c-gray); }

/* 01 / Expertises : « Pour qui ? » — une phrase, les publics en bleu */
.audience {
  margin-top: var(--s-10);
}
.audience__title {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
}
.audience__statement {
  font-family: var(--font-display);
  font-size: max(1.5rem, min(1.25rem + 1vw, 2.25rem));
  font-weight: 700;
  line-height: var(--lh-h2);
  letter-spacing: var(--tracking-h2);
}
.audience__statement strong { color: var(--c-blue); }
.audience__text {
  margin-top: var(--s-3);
  max-width: 40em;
  color: var(--c-gray);
}
.audience .link-arrow { display: inline-flex; }

/* Hero sur téléphone et tablette : le grand symbole est masqué (le logo de
   l'en-tête suffit) et l'espace resserré, pour que les expertises remontent. */
@media (max-width: 899.98px) {
  .hero { padding-bottom: var(--s-6); }
  .hero__visual { display: none; }
  .hero__note { margin-top: var(--s-5); }
}

/* ==== 50-saas.css ==== */
/* ==========================================================================
   50 — Pages SaaS : /saas/ (page-saas) et /saas/cap990/ (page-cap990)
   Seulement ce qui est propre à ces pages : tout le reste vient de
   20-layout.css et 30-components.css (product, shots, stats, steps, cards…).
   Préfixes : .saas-* (communs aux SaaS), .cap-* (fiche CAP990).
   ========================================================================== */

/* --- Logo d'un SaaS dans son cadre (tuile d'appli : l'identité du produit
       reste à l'intérieur du cadre, la page garde les couleurs du studio) --- */
.saas-logo {
  flex: none;
  width: 64px;
  height: 64px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  background: var(--c-white);
}

/* ==========================================================================
   /saas/ — liste des SaaS (une grande carte par produit)
   ========================================================================== */
.saas-list {
  display: grid;
  gap: var(--s-4);
}

.saas-card {
  padding: var(--s-4) var(--s-3);
  border-radius: var(--r-card);
  background: var(--c-white);
}
@media (min-width: 900px) {
  .saas-card { padding: var(--s-6); }
}
@media (min-width: 1200px) {
  .saas-card { padding: var(--s-8); }
}

/* faits clés : 2 × 2, plus compacts que les chiffres clés d'une section */
.saas-card__stats {
  margin-top: var(--s-5);
  row-gap: var(--s-4);
}
.saas-card__stats .stat { gap: var(--s-1); padding-top: var(--s-2); }
.saas-card__stats .stat__value { font-size: max(2rem, min(1.85rem + 0.6vw, 2.5rem)); }

.saas-card .product__role { margin-top: var(--s-4); }
.saas-card__media { padding-bottom: var(--s-4); }

/* « D'autres SaaS sont en préparation » : pastille + texte sur la même ligne */
.saas-next {
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--s-2);
}
.saas-next > .slash { margin-top: 0.5em; }

/* trois piliers (concevoir, développer, faire vivre) : 3 colonnes au lieu de 4 */
@media (min-width: 600px) and (max-width: 1023.98px) {
  .saas-pillars > .step:last-child { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .saas-pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.saas-pillars__foot { margin-top: var(--s-6); }

/* ==========================================================================
   /saas/cap990/ — fiche produit
   ========================================================================== */

/* --- En-tête : texte + captures (2 colonnes à partir de 1024 px) ---------- */
.cap-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* la colonne ne s'élargit pas au mot le plus long du H1 */
  gap: var(--s-8) var(--grid-gap);
  align-items: center;
  margin-top: var(--s-2);
}
@media (min-width: 1024px) {
  .cap-hero__grid { grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr)); }
  .cap-hero__text { grid-column: 1 / span 6; }
  .cap-hero__media { grid-column: 7 / span 6; }
}

.cap-hero__brand {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.cap-hero__note {
  margin-top: var(--s-2);
  font-size: var(--fs-small);
  line-height: var(--lh-caption);
  color: var(--c-gray);
}
.cap-hero__media { padding-bottom: var(--s-4); }

/* --- Captures au format réel (le cadre .shot impose 16:10 par défaut) ----- */
.cap-figure { margin: 0; }
.cap-shot--fonctions img { aspect-ratio: 1600 / 1328; }
.cap-shot--detail img { aspect-ratio: 1600 / 1902; }

/* --- 01 / Le produit -------------------------------------------------------- */
.cap-product { align-items: center; }
.cap-product__text { max-width: 36em; }
/* capture portrait : 480 px au plus, sinon elle occupe tout l'écran d'une tablette */
.cap-product__figure { width: 100%; max-width: 480px; }
@media (min-width: 900px) {
  .cap-product__figure { justify-self: end; }
}

/* --- 02 / Fonctionnalités : liste numérotée + capture qui reste visible ---- */
.cap-features__grid { align-items: start; }
@media (min-width: 900px) {
  .cap-features__media {
    position: sticky;
    top: var(--s-4);
  }
}

.cap-features { border-bottom: 1px solid var(--c-line-strong); }
.cap-feature {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  column-gap: var(--s-2);
  row-gap: var(--s-1);
  padding-top: var(--s-3); padding-bottom: var(--s-3);
  border-top: 1px solid var(--c-line-strong);
}
/* numéro aligné sur la ligne de base du titre */
.cap-feature__num,
.cap-feature__title { align-self: baseline; }
.cap-feature__num {
  grid-row: span 2;
  font-size: var(--fs-small);
  line-height: var(--lh-caption);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--c-blue);
}
.cap-feature__title { font-size: 1.25rem; }
.cap-feature__text { color: var(--c-gray); }

/* --- 03 / Vérification (bande noire) ---------------------------------------- */
.cap-verif__source {
  margin-top: var(--s-8);
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-line-dark);
  font-size: var(--fs-small);
  line-height: var(--lh-caption);
}

/* --- 04 / Tarifs -------------------------------------------------------------- */
.cap-price__tag {
  font-size: var(--fs-small);
  line-height: var(--lh-caption);
  font-weight: 700;
  color: var(--c-gray);
}
.cap-price__amount {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--s-1);
}
.cap-price__amount strong {
  font-family: var(--font-display);
  font-size: var(--fs-stat);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--c-blue);
  white-space: nowrap;
}
.cap-price__amount span {
  font-size: var(--fs-small);
  line-height: var(--lh-caption);
  color: var(--c-gray);
}
.cap-prices__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-1) var(--s-4);
  margin-top: var(--s-5);
}

/* --- 05 / Ce que le studio a réalisé ---------------------------------------- */
.cap-roles {
  display: grid;
  gap: 0 var(--grid-gap);
}
@media (min-width: 600px) {
  .cap-roles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.cap-role {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  padding-top: var(--s-3); padding-bottom: var(--s-3);
  border-top: 1px solid var(--c-line);
}
.cap-role__head {
  display: flex;
  align-items: center;
  gap: var(--s-1);
}
.cap-role__num {
  font-size: var(--fs-small);
  line-height: var(--lh-caption);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--c-gray);
}
.cap-role__title { font-size: 1.25rem; }
.cap-role__text { color: var(--c-gray); }

/* fiche technique (hébergement, comptes, paiement) */
.cap-stack {
  margin-top: var(--s-5);
  border-top: 1px solid var(--c-line);
  font-size: var(--fs-small);
  line-height: var(--lh-caption);
}
.cap-stack > div {
  display: grid;
  grid-template-columns: minmax(0, 9em) minmax(0, 1fr);
  gap: var(--s-2);
  padding-top: var(--s-2); padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--c-line);
}
.cap-stack dt { font-weight: 700; }
.cap-stack dd { margin: 0; color: var(--c-gray); }

/* --- Fil d'Ariane : liens (cible de 44 px) et page courante sur la même ligne */
.saas-breadcrumb { align-items: baseline; }

/* --- Détails typographiques ---------------------------------------------- */
/* ® en exposant dans les grands titres (le symbole plein corps alourdit le H1) */
.saas-reg {
  margin-left: 0.04em;
  font-size: 0.42em;
  line-height: 0;
  letter-spacing: 0;
  vertical-align: 1.1em;
}

/* ==== 51-pages.css ==== */
/* ==========================================================================
   51 — Pages intérieures : Le studio, Contact, Mentions légales,
   Confidentialité, 404. Seulement ce qui manque aux composants partagés.
   Préfixes : .studio-* · .contact-* · .legal-* · .notfound-* · .page-eyebrow
   (+ .steps--3, variante à 3 colonnes du composant .steps).
   ========================================================================== */

/* --- En-tête de page ------------------------------------------------------
   Fil d'Ariane : <ol class="page-breadcrumb"> (la classe retire les puces via
   :where(ol[class]) ; le lien fait 44 px de haut, d'où l'alignement sur la ligne de base). */
.page-breadcrumb { align-items: baseline; }

/* sur-titre placé sous le fil d'Ariane */
.breadcrumb + .page-eyebrow,
.breadcrumb + .contact-hero__grid { margin-top: var(--s-3); }

/* --- Étapes sur 3 colonnes (récit du studio, suite d'un contact) ---------- */
@media (min-width: 900px) {
  .steps.steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ==========================================================================
   Le studio (page-studio)
   ========================================================================== */
.studio-hero__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2) var(--s-4);
  margin-top: var(--s-8);
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-line);
}
@media (min-width: 900px) {
  .studio-hero__foot { margin-top: var(--s-10); }
}

/* liste « Réalisé par le studio » dans le bloc CAP990 */
.studio-proof__list {
  gap: var(--s-1);
  margin-top: var(--s-1);
}

/* capture de détail : on garde son format d'origine (1600 × 1328) */
.studio-proof__shot img {
  aspect-ratio: 1600 / 1328;
  object-fit: contain;
}

/* ==========================================================================
   Contact (page-contact)
   ========================================================================== */
.contact-hero__grid {
  row-gap: var(--s-6);
  align-items: end;
}
.contact-hero__hint {
  margin-top: var(--s-2);
  font-size: var(--fs-small);
  line-height: var(--lh-caption);
  color: var(--c-gray);
}

/* carte « adresse e-mail » : l'adresse en clair, sélectionnable d'un clic */
.contact-card {
  container-type: inline-size; /* l'adresse se dimensionne sur la largeur de la carte */
  padding: var(--s-4) var(--s-3);
  border-radius: var(--r-card);
  background: var(--c-white);
}
@media (min-width: 900px) {
  .contact-card { padding: var(--s-5) var(--s-4); }
}
.contact-card__label {
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: var(--lh-caption);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--c-gray);
}
.contact-card__address {
  margin-top: var(--s-1);
  padding: var(--s-2);
  border: 1px solid var(--c-line);
  border-radius: 8px;
  background: var(--c-ivory);
  font-family: var(--font-display);
  font-size: max(1.125rem, min(0.95rem + 0.75vw, 1.625rem)); /* repli sans unités cqi */
  /* tient sur une ligne dès que possible : texte ≈ 13,2 em + 34 px de marge intérieure et bordure */
  font-size: max(1rem, min((100cqi - 34px) / 13.5, 1.625rem));
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  overflow-wrap: break-word; /* si l'adresse ne tient pas, elle passe à la ligne après « @ » (<wbr>) */
  -webkit-user-select: all;
  user-select: all;
  cursor: text;
}
.contact-card__hint {
  margin-top: var(--s-2);
  font-size: var(--fs-small);
  line-height: var(--lh-caption);
  color: var(--c-gray);
}
.contact-card__foot {
  margin-top: var(--s-3);
  padding-top: var(--s-2);
  border-top: 1px solid var(--c-line);
}
.contact-card__question {
  font-size: var(--fs-small);
  line-height: var(--lh-caption);
  color: var(--c-gray);
}

/* liste « ce qu'il est utile d'indiquer » */
.contact-list { border-bottom: 1px solid var(--c-line); }
.contact-list__item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: baseline; /* numéro aligné sur la ligne de base du titre */
  gap: var(--s-2);
  padding-top: var(--s-3); padding-bottom: var(--s-3);
  border-top: 1px solid var(--c-line);
}
.contact-list__num {
  font-size: var(--fs-small);
  line-height: var(--lh-caption);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--c-blue);
}
.contact-list__title { font-size: 1.25rem; }
.contact-list__text {
  margin-top: var(--s-1);
  color: var(--c-gray);
}

/* ==========================================================================
   Mentions légales et confidentialité (page-legal)
   ========================================================================== */
.legal-hero__date {
  margin-top: var(--s-2);
  font-size: var(--fs-small);
  line-height: var(--lh-caption);
  color: var(--c-gray);
}
.legal-stats { margin-top: var(--s-8); }
/* mobile : trois lignes compactes « 0 — libellé » plutôt qu'une grille 2 + 1 */
@media (max-width: 599.98px) {
  .legal-stats {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-3);
  }
  .legal-stats .stat {
    flex-direction: row;
    align-items: center;
    gap: var(--s-3);
    padding-top: var(--s-2);
  }
  .legal-stats .stat__value { flex: none; min-width: 1ch; }
}

.legal-layout {
  row-gap: var(--s-6);
  align-items: start;
}

/* sommaire : en tête sur mobile, collant à gauche sur ordinateur */
.legal-toc {
  padding: var(--s-3);
  border-radius: var(--r-card);
  background: var(--c-white);
}
@media (min-width: 900px) {
  .legal-toc {
    position: sticky;
    top: var(--s-3);
  }
}
.legal-toc__title {
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: var(--lh-caption);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--c-gray);
}
.legal-toc__list { margin-top: var(--s-1); }
.legal-toc__list a {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--fs-small);
  line-height: var(--lh-caption);
  text-decoration: none;
}
.legal-toc__list li + li a { border-top: 1px solid var(--c-line); }
.legal-toc__list a:hover { text-decoration: underline; }

.legal-prose { max-width: 46em; }
/* rubriques : taille H2 de la charte (32 → 40 px, 10-base.css) */
.legal-prose > h2 { margin-top: var(--s-8); }
.legal-prose > h2:first-child { margin-top: 0; }
/* petit filet oblique bleu au-dessus de chaque rubrique */
.legal-prose > h2::before {
  --h: 5px;
  content: "";
  display: block;
  width: 32px;
  height: var(--h);
  margin-bottom: var(--s-2);
  background: var(--c-blue);
  clip-path: polygon(calc(var(--h) * var(--cut)) 0, 100% 0, calc(100% - var(--h) * var(--cut)) 100%, 0 100%);
}
.legal-prose > h2 + * { margin-top: var(--s-3); }

/* tableau « intitulé / valeur » (éditeur, hébergeur) */
.legal-dl { border-top: 1px solid var(--c-line-strong); }
.legal-dl > div {
  display: grid;
  gap: 0 var(--s-3);
  padding-top: var(--s-2); padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--c-line);
}
@media (min-width: 600px) {
  .legal-dl > div { grid-template-columns: 10em minmax(0, 1fr); }
}
.legal-dl dt {
  font-weight: 700;
}
.legal-dl dd {
  margin: 0;
  overflow-wrap: anywhere;
}
/* lien seul dans sa cellule : cible de 44 px, sans agrandir la ligne de texte */
.legal-dl a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: calc((1lh - 44px) / 2); margin-bottom: calc((1lh - 44px) / 2);
  color: var(--c-blue);
}

.legal-prose > .legal-prose__updated {
  margin-top: var(--s-8);
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-line);
  font-size: var(--fs-small);
  line-height: var(--lh-caption);
  color: var(--c-gray);
}

/* ==========================================================================
   Page introuvable (page-404)
   ========================================================================== */
.notfound { padding-top: var(--s-8); padding-bottom: var(--s-12); }
@media (min-width: 900px) {
  .notfound { padding-top: var(--s-12); padding-bottom: var(--s-16); }
}
.notfound__grid { align-items: center; }
.notfound__visual {
  display: flex;
  justify-content: flex-end;
}
.notfound__symbol {
  width: 40%;
  max-width: 400px;
  color: var(--c-black);
}
@media (min-width: 900px) {
  .notfound__symbol { width: 88%; }
}

/* ==== 59-maison-bodoni.css ==== */
/* 59 — Cette version emploie la police de la charte (62-charte.css) : la Bodoni
   n'est ni déclarée ni publiée (voir le fichier exclude). */

/* ==== 60-maison.css ==== */
/* ==========================================================================
   60 — VARIANTE « MAISON » (v2)
   Maison de luxe discrète : Didone droite (Bodoni Moda, licence SIL OFL 1.1,
   hébergée sur le site) associée au grotesque de la charte ; aucune italique.
   Papier ivoire, encre, un seul aplat bleu. Compositions centrées, filets
   fins, petites capitales espacées. Matière : symbole gaufré dans le papier,
   barre de tête dorée à chaud en bleu.
   ========================================================================== */

/* (déclaration de la police Bodoni Moda : 59-maison-bodoni.css) */
:root {
  --mx-serif: "Bodoni Moda", "Didot", "Bodoni 72", "Bodoni MT", Georgia, serif;
  --mx-ink: #171717;
  --mx-paper: #F5F3ED;
  --mx-stone: #ECE8DF;
  --mx-hair: rgba(23, 23, 23, 0.14);
  --mx-hair-light: rgba(245, 243, 237, 0.22);
  --mx-ease: cubic-bezier(0.65, 0, 0.35, 1);
  --mx-out: cubic-bezier(0.16, 1, 0.3, 1);
  --fs-h2: max(2.25rem, min(1.4rem + 2.4vw, 3.75rem));
  /* respiration : écart entre les parties, passe-partout autour des aplats */
  --mx-gap: max(88px, min(9.5vw, 160px));
  --mx-mat: max(10px, min(1.6vw, 24px));
  /* grain de papier très léger (bruit SVG, aucune requête) */
  --mx-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .22  0 0 0 0 .19  0 0 0 0 .14  0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Didone lisible : graisse 600 et taille optique basse (en grand, la Bodoni
   pousse le contraste au maximum et ses déliés deviennent des fils). Sans effet
   sur les polices sans axe « opsz ». */
body { font-variation-settings: "opsz" 16; }

/* aucune italique sur ce site */
em, i, cite, address { font-style: normal; }

html { scroll-padding-top: calc(var(--mx-header) + 8px); }
/* le contenu contient les marges de ses blocs : sinon, la marge du premier
   (ou du dernier) bloc « traverse » <main> et laisse voir le pied de page
   en rideau, qui attend derrière la page */
main { display: flow-root; }
::selection { background: var(--c-blue); color: var(--mx-paper); }
/* focus clavier : cadre ivoire sur les aplats bleu et encre (le cadre bleu
   y serait invisible ou trop faible) */
.mx-saas :focus-visible,
.mx-founder :focus-visible { outline-color: var(--mx-paper); }

/* --- Titres en Didone sur tout le site ---------------------------------------- */
h1, h2, .h1, .h2,
.page-hero__title,
.section-head__title {
  font-family: var(--mx-serif);
  font-weight: 600;
  letter-spacing: -0.01em;
}
h2, .h2 { line-height: 1.08; }
.page-hero__title {
  max-width: 14ch;
  font-size: max(3rem, min(1.3rem + 5.6vw, 6.75rem));
  line-height: 1.02;
}
.eyebrow { color: var(--mx-ink); letter-spacing: 0.2em; }
.band--black .eyebrow, .band--blue .eyebrow { color: var(--mx-paper); }
/* pages intérieures : angles droits et boutons au même filet que l'accueil */
:root { --r-card: 0; }
.btn {
  min-height: 54px;
  padding: 0 36px;
  border-width: 1px;
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.btn--primary,
.btn--inverse { padding-right: 36px; }
.btn--primary::before,
.btn--inverse::before { top: 0; right: 0; bottom: 0; left: 0; clip-path: none; transition: background-color 0.5s var(--mx-ease); }
.btn--primary { --btn-bg: var(--mx-ink); }
.btn--primary:hover { --btn-bg: var(--c-blue); }
.btn--primary:hover,
.btn--inverse:hover,
.btn--primary:active,
.btn--inverse:active { transform: none; }
.btn--block.btn--primary,
.btn--block.btn--inverse { padding-right: 36px; }
.link-arrow {
  color: var(--mx-ink);
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-underline-offset: 0.6em;
}
.band--black .link-arrow,
.band--blue .link-arrow { color: var(--mx-paper); }
.link-arrow:hover,
.link-arrow:hover::after { transform: none; }

/* ==========================================================================
   En-tête : logo au centre, liens à gauche, contact à droite
   ========================================================================== */
/* l'en-tête reste accessible : il s'efface en descendant, revient en remontant */
.site-header {
  position: sticky;
  top: 0;
  background: var(--mx-paper);
  border-bottom: 1px solid var(--mx-hair);
}
.site-header__inner { column-gap: var(--s-2); }
.site-nav__link {
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.site-nav__link::after { background: var(--mx-ink); height: 1px; clip-path: none; bottom: 13px; }
.site-nav__cta {
  min-height: 40px;
  padding: 0 20px;
  border: 1px solid var(--mx-ink);
  border-radius: 0;
  background: none;
  color: var(--mx-ink);
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.site-nav__cta:hover { background: var(--mx-ink); border-color: var(--mx-ink); color: var(--mx-paper); }
.nav-toggle {
  padding: 0;
  border: 0;
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
@media (min-width: 900px) {
  .site-header__inner { position: relative; padding-top: var(--s-3); padding-bottom: var(--s-3); }
  .site-header__brand {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: 0;
    transform: translate(-50%, -50%);
  }
  .site-nav { flex: 1; justify-content: space-between; }
}
@media (max-width: 899.98px) {
  .js-nav.is-open .site-nav { background: var(--mx-paper); }
  .js-nav.is-open .site-nav__link {
    font-family: var(--mx-serif);
    font-size: 2.25rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-transform: none;
  }
  .js-nav.is-open .site-nav__link::after { display: none; }
  .js-nav.is-open .site-nav__cta,
  .js-nav.is-open .site-nav__cta:not([aria-current]),
  .js-nav.is-open .site-nav__cta:not([aria-current]):hover {
    justify-content: center;
    border-color: var(--mx-ink);
    background: var(--mx-ink);
    color: var(--mx-paper);
  }
}

/* ==========================================================================
   Briques
   ========================================================================== */
.mx-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.mx-dot { color: var(--c-blue); }

.mx-label,
.mx-over {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mx-ink);
}
.mx-label::before,
.mx-center .mx-label::after,
.mx-head .mx-label::after,
.mx-over::before,
.mx-over::after {
  content: "";
  flex: none;
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}
.mx-label--light { color: var(--mx-paper); }

.mx-roman { font-family: var(--mx-serif); font-weight: 600; }

/* bouton : filet fin, se remplit d'encre par le bas */
.mx-btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 36px;
  overflow: hidden;
  border: 1px solid var(--mx-ink);
  color: var(--mx-ink);
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.6s var(--mx-ease);
}
.mx-btn::before {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: -1;
  background: var(--mx-ink);
  transform: scaleY(0);
  transform-origin: center bottom;
  transition: transform 0.6s var(--mx-ease);
}
.mx-btn:hover { color: var(--mx-paper); }
.mx-btn:hover::before { transform: scaleY(1); }
@media (max-width: 359.98px) { .mx-btn { padding-left: 20px; padding-right: 20px; letter-spacing: 0.16em; } }
.mx-btn--light { border-color: var(--mx-paper); color: var(--mx-paper); }
.mx-btn--light::before { background: var(--mx-paper); }
.mx-btn--light:hover { color: var(--c-blue); }

/* lien : petites capitales soulignées, le filet repart au survol */
.mx-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--mx-ink);
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
}
.mx-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0.22em;
  bottom: 10px;
  height: 1px;
  background: currentColor;
  transform-origin: right center;
}
.mx-link:hover::after { animation: mx-redraw 0.9s var(--mx-ease); }
.mx-link--light { color: var(--mx-paper); }
@keyframes mx-redraw {
  0% { transform: scaleX(1); transform-origin: right center; }
  49% { transform: scaleX(0); transform-origin: right center; }
  50% { transform: scaleX(0); transform-origin: left center; }
  100% { transform: scaleX(1); transform-origin: left center; }
}

.mx-section { padding-top: var(--mx-gap); padding-bottom: var(--mx-gap); }
.mx-section + .mx-section { padding-top: calc(var(--mx-gap) * 0.6); }
.mx-hero + .mx-intro { padding-top: calc(var(--mx-gap) * 0.7); }
.mx-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.mx-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: max(64px, min(7.5vw, 120px));
  text-align: center;
}
.mx-title {
  max-width: 17ch;
  margin-top: var(--s-3);
  font-size: max(2.25rem, min(1.1rem + 3.4vw, 4.5rem));
  line-height: 1.06;
  text-wrap: balance;
}
.mx-title--light { color: var(--mx-paper); }

/* ==========================================================================
   Hero
   ========================================================================== */
/* le haut de page est une couverture : titre au centre, informations en pied */
.mx-hero {
  display: flex;
  flex-direction: column;
  padding-bottom: var(--s-3);
}
@media (min-height: 600px) {
  .mx-hero { min-height: calc(100vh - var(--mx-header)); min-height: calc(100svh - var(--mx-header)); }
}
.mx-hero__inner {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: max(32px, min(6vh, 80px)); padding-bottom: max(32px, min(6vh, 80px)); padding-top: max(32px, min(6svh, 80px)); padding-bottom: max(32px, min(6svh, 80px));
  text-align: center;
}
.mx-hero__title {
  margin-top: var(--s-4);
  font-size: max(2.5rem, min(0.6rem + 8.8vw, 8.75rem));
  line-height: 1.02;
  letter-spacing: -0.02em;
}
.mx-line { display: block; overflow: hidden; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.mx-line > span { display: inline-block; }
.mx-hero__lead {
  max-width: 36em;
  margin-top: var(--s-5);
  color: var(--c-gray);
}
.mx-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-2) var(--s-5);
  margin-top: var(--s-5);
}

/* pied de couverture : lieu et heure, invitation à défiler, savoir-faire */
.mx-hero__base {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: end;
  gap: var(--s-3);
  position: relative;
  padding-top: var(--s-3);
  font-family: var(--font-display);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(23, 23, 23, 0.72);
}
.mx-hero__base::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--gutter);
  right: var(--gutter);
  height: 1px;
  background: var(--mx-hair);
}
.mx-hero__info--end { text-align: right; }
/* heure en retrait, mais lisible (gris chaud : 6,3:1 sur l'ivoire) */
.mx-clock { color: var(--c-gray); }
.mx-scroll {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.mx-scroll__line {
  position: relative;
  width: 1px;
  height: max(28px, min(4.5vh, 44px)); height: max(28px, min(4.5svh, 44px));
  overflow: hidden;
  background: var(--mx-hair);
}
@media (max-width: 699.98px) {
  .mx-hero__base { grid-template-columns: minmax(0, 1fr) auto; }
  .mx-hero__info--end { display: none; }
  .mx-over { gap: 12px; white-space: nowrap; letter-spacing: 0.18em; }
  .mx-over::before, .mx-over::after { width: 16px; }
}

/* matière : symbole et barres gaufrés (planches, aplat bleu, sceau) */
.mx-emboss { display: block; overflow: visible; }
.mx-emboss__blind { fill: #E1DBCE; }
.mx-emboss__foil { fill: url(#mx-foil); }
.mx-emboss__blue { fill: #1F50F2; }

/* ==========================================================================
   Manifeste
   ========================================================================== */
.mx-statement {
  max-width: 21em;
  margin-top: var(--s-5); margin-bottom: var(--s-4);
  font-family: var(--mx-serif);
  font-weight: 600;
  font-size: max(1.625rem, min(0.95rem + 2.1vw, 2.875rem));
  line-height: 1.3;
  text-wrap: balance;
}

/* ==========================================================================
   Expertises : trois savoir-faire, image et texte en alternance
   ========================================================================== */
.mx-craft__item { display: grid; gap: var(--s-5) var(--grid-gap); align-items: center; }
.mx-craft__item + .mx-craft__item { margin-top: max(88px, min(10vw, 168px)); }
@media (min-width: 900px) {
  .mx-craft__item { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .mx-figure { grid-column: 1 / span 6; grid-row: 1; }
  .mx-craft__body { grid-column: 8 / span 5; grid-row: 1; }
  .mx-craft__item:nth-of-type(even) .mx-figure { grid-column: 7 / span 6; }
  .mx-craft__item:nth-of-type(even) .mx-craft__body { grid-column: 1 / span 5; }
}
.mx-craft__no {
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-gray);
}
.mx-craft__title {
  margin-top: var(--s-2);
  font-family: var(--mx-serif);
  font-size: max(2.125rem, min(1.3rem + 2.4vw, 3.75rem));
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.015em;
}
.mx-craft__text { max-width: 30em; margin-top: var(--s-3); margin-bottom: var(--s-2); color: var(--c-gray); }

.mx-vignette { position: relative; aspect-ratio: 5 / 4; overflow: hidden; }
.mx-vignette__in {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  display: grid;
  place-items: center;
  transition: transform 1.6s var(--mx-out);
}
.mx-vignette__in::before {
  content: "";
  position: absolute;
  top: max(12px, min(1.4vw, 18px)); right: max(12px, min(1.4vw, 18px)); bottom: max(12px, min(1.4vw, 18px)); left: max(12px, min(1.4vw, 18px));
  border: 1px solid rgba(245, 243, 237, 0.2);
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .mx-craft__item:hover .mx-vignette__in { transform: scale(1.025); }
}

/* planches : dessins techniques, comme sur une planche d'architecte */
.mx-figure { margin: 0; }
.mx-figcap {
  display: flex;
  gap: 14px;
  align-items: baseline;
  margin-top: var(--s-2);
  font-family: var(--font-display);
  font-size: 0.625rem;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-gray);
}
.mx-figcap::before {
  content: "";
  flex: none;
  width: 20px;
  height: 1px;
  background: currentColor;
  transform: translateY(-3px);
}
.mx-drawing { display: block; width: 92%; height: auto; overflow: visible; }
.mx-drawing text {
  font-family: var(--font-display);
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: 1.7px;
}
.mx-ann text { fill: rgba(245, 243, 237, 0.86); }
.mx-ann line { stroke: rgba(245, 243, 237, 0.55); stroke-width: 0.75; }
.mx-ann circle { fill: rgba(245, 243, 237, 0.86); }
.mx-guide line { stroke: rgba(23, 23, 23, 0.3); stroke-width: 0.75; stroke-dasharray: 3 3; }
.mx-arc { fill: none; stroke: var(--c-blue); stroke-width: 1; }
.mx-vignette--brand .mx-ann text,
.mx-vignette--brand .mx-ann circle { fill: rgba(23, 23, 23, 0.7); }
.mx-vignette--brand .mx-ann line { stroke: rgba(23, 23, 23, 0.45); }
/* sur petit écran, les légendes deviendraient illisibles : le dessin reste seul */
@media (max-width: 599.98px) {
  .mx-ann { display: none; }
  /* sans ses légendes à droite, la planche I se recentre sur l'interface */
  .mx-vignette--saas .mx-drawing { transform: translateX(8%) scale(1.1); }
}

.mx-vignette--saas .mx-vignette__in { background: var(--c-blue); }
.mx-vignette--web .mx-vignette__in { background: var(--mx-ink); }
.mx-vignette--brand .mx-vignette__in { background-color: var(--mx-stone); background-image: var(--mx-grain); }
.mx-vignette--brand .mx-vignette__in::before { border-color: rgba(23, 23, 23, 0.09); }

/* ==========================================================================
   Pour qui
   ========================================================================== */
.mx-who__list {
  display: grid;
  border-block: 1px solid var(--mx-hair);
  text-align: center;
}
.mx-who__list li { padding: var(--s-5) var(--s-3); }
.mx-who__list li + li { border-top: 1px solid var(--mx-hair); }
@media (min-width: 360px) {
  .mx-who__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mx-who__list li + li { border-top: 0; }
  .mx-who__list li:nth-child(even) { border-left: 1px solid var(--mx-hair); }
  .mx-who__list li:nth-child(n + 3) { border-top: 1px solid var(--mx-hair); }
}
@media (min-width: 1024px) {
  .mx-who__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mx-who__list li { padding-top: var(--s-6); padding-bottom: var(--s-6); }
  .mx-who__list li:nth-child(n + 3) { border-top: 0; }
  .mx-who__list li + li { border-left: 1px solid var(--mx-hair); }
}
.mx-who__list .mx-roman { display: block; font-size: 1.125rem; color: var(--c-blue); }
.mx-who__list h3 {
  margin-top: var(--s-2); margin-bottom: var(--s-1);
  font-family: var(--mx-serif);
  font-size: max(1.5rem, min(1.25rem + 0.6vw, 1.875rem));
  font-weight: 600;
  line-height: 1.15;
}
.mx-who__list p { max-width: 18em; margin-left: auto; margin-right: auto; color: var(--c-gray); font-size: 0.9375rem; }
.mx-note { max-width: 34em; margin: var(--s-6) auto 0; color: var(--c-gray); text-align: center; }

/* ==========================================================================
   SaaS : le grand aplat bleu
   ========================================================================== */
/* aplats bleu et encre : encadrés d'un passe-partout ivoire */
.mx-saas {
  position: relative;
  overflow: hidden;
  margin-left: var(--mx-mat); margin-right: var(--mx-mat);
  padding-top: max(96px, min(11vw, 184px)); padding-bottom: max(96px, min(11vw, 184px));
  background: var(--c-blue);
  color: var(--mx-paper);
}
.mx-saas__grid { display: grid; gap: var(--s-8) var(--grid-gap); align-items: center; }
@media (min-width: 900px) {
  .mx-saas__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .mx-saas__text { grid-column: 1 / span 6; }
  .mx-saas__plate { grid-column: 8 / span 5; }
}
.mx-saas .mx-title { max-width: 15ch; }
/* ivoire plein sur le bleu : 4,9:1 (à 82 %, le texte n'atteignait que 3,8:1) */
.mx-saas__lead { max-width: 30em; margin-top: var(--s-4); margin-bottom: var(--s-5); color: var(--mx-paper); }
.mx-saas__plate {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  background: #2A5BFF;
}
.mx-saas__plate::before {
  content: "";
  position: absolute;
  top: max(12px, min(1.4vw, 18px)); right: max(12px, min(1.4vw, 18px)); bottom: max(12px, min(1.4vw, 18px)); left: max(12px, min(1.4vw, 18px));
  border: 1px solid rgba(245, 243, 237, 0.2);
}
.mx-saas__plate .mx-emboss { width: 56%; }
@media (max-width: 899.98px) { .mx-saas__plate { aspect-ratio: 4 / 3; } }

/* ==========================================================================
   Méthode
   ========================================================================== */
.mx-method__grid { display: grid; gap: var(--s-6) var(--grid-gap); }
@media (min-width: 900px) {
  .mx-method__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
  .mx-method__aside { grid-column: 1 / span 5; position: sticky; top: 120px; }
  .mx-steps { grid-column: 7 / span 6; }
}
.mx-method .mx-title { max-width: 11ch; }
.mx-method__intro { max-width: 26em; margin-top: var(--s-3); color: var(--c-gray); }
.mx-steps li {
  display: grid;
  grid-template-columns: max(44px, min(5vw, 64px)) minmax(0, 1fr);
  gap: 6px var(--s-3);
  padding-top: var(--s-4); padding-bottom: var(--s-4);
  border-top: 1px solid var(--mx-hair);
}
.mx-steps li:last-child { border-bottom: 1px solid var(--mx-hair); }
.mx-steps .mx-roman { grid-row: span 2; font-size: 1.375rem; line-height: 1.5; color: var(--c-blue); }
.mx-steps h3 {
  font-family: var(--mx-serif);
  font-size: max(1.5rem, min(1.15rem + 1vw, 2.125rem));
  font-weight: 600;
  line-height: 1.15;
}
.mx-steps p { color: var(--c-gray); }

/* ==========================================================================
   Le fondateur (encre)
   ========================================================================== */
.mx-founder {
  margin-left: var(--mx-mat); margin-right: var(--mx-mat);
  padding-top: max(96px, min(11vw, 184px)); padding-bottom: max(96px, min(11vw, 184px));
  background: var(--mx-ink);
  color: var(--mx-paper);
}
.mx-quote {
  max-width: 19ch;
  margin-top: var(--s-5);
  font-family: var(--mx-serif);
  font-weight: 600;
  font-size: max(2rem, min(1rem + 3.3vw, 4.25rem));
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
/* sceau : le symbole gaufré noir sur noir */
.mx-seal { display: block; width: max(84px, min(8vw, 116px)); margin-bottom: var(--s-5); }
.mx-emboss__ink { fill: #121212; }
.mx-founder__sign { margin-top: var(--s-6); }
.mx-founder__name { font-family: var(--mx-serif);
  font-weight: 600; font-size: 1.5rem; }
.mx-founder__role,
.mx-founder__values {
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(245, 243, 237, 0.76);
}
.mx-founder__role { margin-top: var(--s-1); }
.mx-founder__role span { white-space: nowrap; }
.mx-founder__values {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--s-5); margin-bottom: var(--s-2);
}
.mx-founder__values span { padding-left: var(--s-3); padding-right: var(--s-3); }
.mx-founder__values span + span { border-left: 1px solid var(--mx-hair-light); }

/* ==========================================================================
   Contact
   ========================================================================== */
.mx-contact__title {
  margin-top: var(--s-4);
  font-size: max(3rem, min(1rem + 6.6vw, 8rem));
  line-height: 1.02;
  letter-spacing: -0.02em;
}
.mx-contact__text { max-width: 32em; margin-top: var(--s-4); color: var(--c-gray); }
.mx-mail {
  margin-top: var(--s-4); margin-bottom: var(--s-5);
  font-family: var(--mx-serif);
  font-weight: 600;
  font-size: max(1.375rem, min(0.9rem + 1.8vw, 2.5rem));
  color: var(--mx-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  overflow-wrap: break-word;   /* coupure après « @ » (balise <wbr>), jamais en plein mot */
  transition: color 0.4s ease;
}
.mx-mail:hover { color: var(--c-blue); }

/* ==========================================================================
   Pied de page
   ========================================================================== */
.mx-footer {
  padding: 0 var(--mx-mat) var(--mx-mat);
  background: var(--mx-paper);
  color: var(--mx-paper);
}
.mx-footer__panel { padding-top: max(72px, min(8vw, 128px)); padding-bottom: var(--s-4); background: var(--mx-ink); }
.mx-footer__top { display: grid; gap: var(--s-6) var(--grid-gap); }
@media (min-width: 900px) {
  .mx-footer__top { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
  .mx-footer__claim { grid-column: 1 / span 6; }
  .mx-footer__nav { grid-column: 7 / span 3; }
  .mx-footer__contact { grid-column: 10 / span 3; }
}
.mx-footer__claim { font-family: var(--mx-serif);
  font-weight: 600; font-size: max(2.25rem, min(1.4rem + 2.6vw, 3.75rem)); line-height: 1.05; letter-spacing: -0.015em; }
.mx-footer__nav,
.mx-footer__contact { display: grid; align-content: start; justify-items: start; }
.mx-footer__h {
  margin-bottom: var(--s-1);
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(245, 243, 237, 0.66);
}
.mx-footer__nav a,
.mx-footer__contact a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--mx-paper);
  font-family: var(--mx-serif);
  font-weight: 600;
  font-size: 1.25rem;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  overflow-wrap: break-word;
  transition: text-decoration-color 0.4s ease;
}
.mx-footer__nav a:hover,
.mx-footer__contact a:hover { text-decoration-color: currentColor; }
.mx-footer__logo {
  display: block;
  overflow: hidden;
  margin-top: max(64px, min(9vw, 140px));
  color: var(--mx-paper);
}
.mx-footer__logo .es-logo { width: 100%; height: auto; }
.mx-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-1) var(--s-4);
  margin-top: var(--s-5);
  padding-top: var(--s-3);
  border-top: 1px solid rgba(245, 243, 237, 0.2);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: rgba(245, 243, 237, 0.65);
}
.mx-footer__bottom a { color: inherit; }
/* liens en petits caractères : zone de toucher agrandie (34 px de haut) sans
   rien déplacer, la marge négative compensant le rembourrage */
.mx-footer__bottom a { display: inline-block; padding: 10px 0; margin: -10px 0; }
@media (min-width: 900px) {
  /* deux lignes : mentions à gauche, liens à droite */
  .mx-footer__bottom { display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--s-1); }
  .mx-footer__bottom > :nth-child(even) { text-align: right; }
}
.mx-top { text-decoration: none; }
.mx-top:hover { color: var(--mx-paper); }

/* ==== 61-maison-pages.css ==== */
/* ==========================================================================
   61 — « MAISON » : pages intérieures et finitions
   Les composants hérités de la version sobre prennent le langage de la maison :
   filets fins au lieu des barres obliques bleues, encre au lieu des aplats,
   petites capitales espacées, plus de cartes blanches arrondies.
   ========================================================================== */

/* gris chaud, accordé au papier ivoire (contraste 6:1 sur l'ivoire) */
:root { --c-gray: #5E5A53; }

/* textes d'introduction un peu plus amples */
.page-hero__lead,
.section-head__intro,
.mx-hero__lead,
.mx-craft__text,
.mx-contact__text,
.mx-saas__lead { font-size: 1.0625rem; line-height: 1.65; }

/* --- Étiquettes : le même filet que l'accueil --------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.22em;
}
.eyebrow::before,
.band--black .eyebrow::before,
.band--blue .eyebrow::before {
  content: "";
  flex: none;
  width: 28px;
  height: 1px;
  aspect-ratio: auto;
  background: currentColor;
  clip-path: none;
  opacity: 0.5;
}

/* --- Accents : la barre oblique bleue devient un filet d'encre --------------- */
.slash,
.oblique-rule {
  width: 24px;
  height: 1px;
  aspect-ratio: auto;
  background: currentColor;
  clip-path: none;
}
.list-oblique > li::before {
  top: 0.8em;
  width: 12px;
  height: 1px;
  clip-path: none;
}
.legal-prose > h2::before {
  width: 28px;
  height: 1px;
  background: var(--mx-ink);
  clip-path: none;
}

/* --- Cartes : plus de fond blanc, un filet d'encre en tête ----------------- */
.card {
  padding: var(--s-4) 0 0;
  border: 0;
  border-top: 1px solid var(--mx-ink);
  border-radius: 0;
  background: transparent;
}
.band--black .card { background: transparent; border-top-color: rgba(245, 243, 237, 0.4); }
.card--outline { border-color: var(--mx-hair); }
.card__index,
.step__num,
.contact-list__num,
.value__num {
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.22em;
}
.card__foot { border-top-color: var(--mx-hair); }
.card .slash { display: none; }

/* --- Chiffres et étapes : sans barre bleue ---------------------------------- */
.stat::before,
.step::before { display: none; }
.stat__value { color: var(--mx-ink); }
.step { border-top-color: var(--mx-hair); }
.band--black .step { border-top-color: rgba(245, 243, 237, 0.3); }

/* --- Fiche SaaS : posée sur la page, entre deux filets ---------------------- */
.saas-card {
  padding-left: 0; padding-right: 0;
  border-block: 1px solid var(--mx-hair);
  border-radius: 0;
  background: transparent;
}

/* --- Contact : la carte devient un encadré à filet ------------------------ */
.contact-card {
  border: 1px solid var(--mx-hair);
  border-radius: 0;
  background: transparent;
}
.contact-card__label {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0.22em;
}
.contact-card__address { border-radius: 0; background: var(--mx-stone); border-color: transparent; }
.contact-list,
.contact-list__item { border-color: var(--mx-hair); }

/* ==========================================================================
   Appel final des pages intérieures (partials/cta.html de la variante)
   ========================================================================== */
.mx-cta-final {
  padding-top: var(--mx-gap); padding-bottom: var(--mx-gap);
  border-top: 1px solid var(--mx-hair);
}
.mx-cta-final__title {
  max-width: 16ch;
  margin-top: var(--s-4);
  font-size: max(2.25rem, min(1rem + 4.2vw, 5.25rem));
  line-height: 1.04;
  text-wrap: balance;
}
.mx-cta-final__title .cta-block__break { display: inline; }

/* ==========================================================================
   Accueil : finitions
   ========================================================================== */

/* fiche de chaque savoir-faire : ce que le studio livre, en petites capitales */
.mx-spec {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  gap: 8px max(24px, min(3vw, 40px));
  max-width: 30em;
  margin-top: var(--s-3); margin-bottom: var(--s-3);
  border-top: 1px solid var(--mx-hair);
  font-family: var(--font-display);
  font-size: 0.625rem;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mx-ink);
}
/* retrait du haut : ul.mx-spec, aussi précis que la remise à zéro des listes */
ul.mx-spec { padding-top: var(--s-3); }
.mx-spec li { position: relative; padding-left: 16px; }
.mx-spec li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.9em;
  width: 7px;
  height: 1px;
  background: var(--c-blue);
}

/* plaque de l'aplat bleu : légendée comme une planche */
.mx-saas__plate { overflow: hidden; }
.mx-plate__cap {
  position: absolute;
  font-family: var(--font-display);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mx-paper);   /* 4,7:1 sur le bleu de la plaque */
}
.mx-plate__cap--tl { top: max(28px, min(2.8vw, 40px)); left: max(28px, min(2.8vw, 40px)); }
.mx-plate__cap--br { right: max(28px, min(2.8vw, 40px)); bottom: max(28px, min(2.8vw, 40px)); text-align: right; }

/* --- Éléments collants : sous l'en-tête, qui réapparaît en remontant --------- */
@media (min-width: 900px) {
  .legal-toc { top: calc(var(--mx-header) + var(--s-3)); }
  .cap-features__media { top: calc(var(--mx-header) + var(--s-4)); }
}

/* ==== 62-charte.css ==== */
/* ==========================================================================
   62 — « MAISON », POLICE DE LA CHARTE
   Même maison que la variante « maison » (src-maison/, appliquée d'abord),
   mais les titres passent dans la police de la charte : Nimbus Sans Bold
   (Helvetica Neue sur Mac, Arial ailleurs), gras et serrés comme le logo.
   ========================================================================== */
:root { --mx-serif: var(--font-display); }
body { font-variation-settings: normal; }

/* grands titres : gras et serrés, comme le logo */
h1, h2, .h1, .h2,
.page-hero__title,
.section-head__title,
.mx-title,
.mx-contact__title,
.mx-quote,
.mx-craft__title,
.mx-footer__claim {
  font-weight: 700;
  letter-spacing: -0.035em;
}
.mx-hero__title {
  font-size: min(max(2.5rem, min(0.4rem + 8vw, 8.25rem)), 14vh); font-size: min(max(2.5rem, min(0.4rem + 8vw, 8.25rem)), 14svh);
  line-height: 1;
  letter-spacing: -0.045em;
}
.mx-contact__title { font-size: max(2.5rem, min(0.8rem + 5.6vw, 6.75rem)); letter-spacing: -0.045em; }
.mx-title { font-size: max(2rem, min(1rem + 3vw, 4rem)); line-height: 1.05; }
.mx-method .mx-title { max-width: 14ch; }
.page-hero__title { font-size: max(2.75rem, min(1.3rem + 4.6vw, 5.75rem)); letter-spacing: -0.04em; }
.mx-statement {
  font-size: max(1.5rem, min(0.9rem + 1.8vw, 2.5rem));
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.mx-quote { font-size: max(1.875rem, min(1rem + 2.8vw, 3.75rem)); line-height: 1.1; }
.mx-craft__title { font-size: max(1.875rem, min(1.2rem + 2vw, 3.25rem)); }
.mx-who__list h3,
.mx-steps h3,
.mx-founder__name { font-weight: 700; letter-spacing: -0.02em; }
.mx-roman { font-weight: 700; letter-spacing: 0.04em; }
.mx-mail { font-weight: 500; letter-spacing: -0.02em; }
.mx-footer__nav a,
.mx-footer__contact a { font-size: 1.125rem; font-weight: 500; letter-spacing: -0.01em; }
@media (max-width: 899.98px) {
  .js-nav.is-open .site-nav__link { font-weight: 700; letter-spacing: -0.03em; }
}

/* --- Téléphone : titres plus présents (la police de la charte est large) --- */
@media (max-width: 699.98px) {
  .mx-hero__title { font-size: max(2.375rem, min(13.4vw, 3.5rem)); letter-spacing: -0.05em; }
  .mx-title { font-size: max(2rem, min(9.4vw, 2.75rem)); }
  .mx-statement { font-size: max(1.375rem, min(6vw, 1.75rem)); }
  .mx-craft__title { font-size: max(2rem, min(9.6vw, 2.5rem)); }
  .mx-quote { font-size: max(1.875rem, min(8.6vw, 2.375rem)); }
  .mx-contact__title { font-size: max(2.5rem, min(12.6vw, 3.5rem)); }
  .mx-cta-final__title { font-size: max(2.125rem, min(10vw, 2.875rem)); }
  .page-hero__title { font-size: max(2.5rem, min(12.4vw, 3.5rem)); }
  .mx-footer__claim { font-size: max(2rem, min(10vw, 2.75rem)); }
  .js-nav.is-open .site-nav__link { font-size: max(2rem, min(10vw, 2.75rem)); letter-spacing: -0.04em; }
}

/* ==== 64-maison-mobile.css ==== */
/* ==========================================================================
   64 — « MAISON » : téléphone et tablette
   La version ordinateur est la référence ; sur petit écran, la page garde la
   même tenue : en-tête plus fin, menu plein écran, titres plus présents,
   planches en pleine largeur, grilles resserrées au lieu de longues colonnes.
   ========================================================================== */

:root { --mx-header: 93px; }
/* hauteur réelle de l'en-tête entre 700 et 899 px (logo et bouton plus hauts) */
@media (min-width: 700px) and (max-width: 899.98px) {
  :root { --mx-header: 98px; }
}

/* --- Menu plein écran (téléphone et tablette) ----------------------------- */
@media (max-width: 899.98px) {
  .js-nav.is-open .site-nav {
    /* hauteur de l'écran visible à l'instant (barre d'adresse repliée ou non) */
    height: calc(100vh - var(--mx-header));
    height: calc(100dvh - var(--mx-header));
    flex-wrap: nowrap;   /* en paysage, le bouton reste sous les liens */
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--s-4) var(--gutter) var(--s-5);
    border-top: 1px solid var(--mx-hair);
    border-bottom: 0;
  }
  .js-nav.is-open .site-nav__list { counter-reset: mx-nav; }
  .js-nav.is-open .site-nav__link {
    gap: var(--s-2);
    min-height: 76px;
    border-bottom-color: var(--mx-hair);
    font-size: max(2rem, min(9vw, 2.75rem));
  }
  /* numéro de rubrique, comme un sommaire */
  .js-nav.is-open .site-nav__link::before {
    content: "0" counter(mx-nav);
    counter-increment: mx-nav;
    align-self: center;
    min-width: 2.4em;
    font-family: var(--font-display);
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    color: var(--c-gray);
  }
  .js-nav.is-open .site-nav__cta,
  .js-nav.is-open .site-nav__cta:not([aria-current]) {
    min-height: 56px;
    margin-top: auto;
  }
}

/* --- Téléphone ---------------------------------------------------------------- */
@media (max-width: 699.98px) {
  :root { --mx-header: 78px; }

  /* en-tête plus fin (le logo garde sa taille de charte) */
  .site-header__inner { padding-top: 14px; padding-bottom: 14px; }

  /* haut de page : bouton pleine largeur, lien centré dessous */
  .mx-hero__inner { padding-top: var(--s-5); padding-bottom: var(--s-6); }
  .mx-hero__lead { margin-top: var(--s-4); }
  .mx-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: var(--s-1);
    margin-top: var(--s-5);
  }
  .mx-actions .mx-btn { width: 100%; }
  .mx-actions .mx-link { align-self: center; }

  /* manifeste et têtes de section */
  .mx-statement { margin-top: var(--s-4); margin-bottom: var(--s-3); line-height: 1.32; }
  .mx-head { margin-bottom: var(--s-8); }

  /* planches en pleine largeur, comme des pages de livre */
  .mx-figure { margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); }
  .mx-figcap { padding-left: var(--gutter); padding-right: var(--gutter); }
  .mx-vignette__in::before { top: 10px; right: 10px; bottom: 10px; left: 10px; }
  .mx-drawing { width: 96%; }
  .mx-craft__item { gap: var(--s-4); }
  .mx-craft__item + .mx-craft__item { margin-top: var(--s-12); }
  .mx-craft__title { margin-top: var(--s-1); }
  .mx-spec {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px var(--s-2);
    max-width: none;
    letter-spacing: 0.14em;
  }

  /* pour qui : grille de 2 × 2 */
  .mx-who__list li { padding: var(--s-4) var(--s-1); }
  .mx-who__list h3 { margin-top: var(--s-1); margin-bottom: 6px; font-size: 1.1875rem; line-height: 1.2; }
  .mx-who__list p { font-size: 0.875rem; line-height: 1.5; }
  .mx-note { margin-top: var(--s-5); font-size: 0.9375rem; }

  /* aplat bleu : plaque plus basse, légendes plus près du bord */
  .mx-saas__grid { gap: var(--s-6); }
  .mx-saas__plate { aspect-ratio: 16 / 11; }
  .mx-saas__plate .mx-emboss { width: 36%; }
  .mx-plate__cap--tl { top: 22px; left: 22px; }
  .mx-plate__cap--br { right: 22px; bottom: 22px; }

  /* méthode */
  .mx-method__intro { margin-top: var(--s-2); }
  .mx-steps li { padding-top: var(--s-3); padding-bottom: var(--s-3); }

  /* fondateur : valeurs alignées en trois colonnes */
  .mx-seal { width: 72px; margin-bottom: var(--s-4); }
  .mx-founder__values {
    display: grid;
    grid-template-columns: repeat(3, auto);
    justify-content: center;
    letter-spacing: 0.14em;
  }
  .mx-founder__values span { padding-left: var(--s-2); padding-right: var(--s-2); }

  /* contact */
  .mx-mail { margin-top: var(--s-3); margin-bottom: var(--s-4); }
  .mx-contact .mx-btn,
  .mx-cta-final .mx-btn { width: 100%; }

  /* pied de page : plan du site sur deux colonnes, contacts dessous */
  .mx-footer__panel { padding-top: var(--s-8); }
  .mx-footer__top { gap: var(--s-5); }
  .mx-footer__nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--s-3);
  }
  .mx-footer__nav .mx-footer__h { grid-column: 1 / -1; }
  .mx-footer__logo { margin-top: var(--s-8); }
  .mx-footer__bottom { gap: var(--s-1); line-height: 1.6; }
  .mx-footer__bottom p { width: 100%; }

  /* pages intérieures : titres plus présents, cartes resserrées */
  .page-hero__title { max-width: none; }
  .card { padding-top: var(--s-3); }
  main .btn { width: 100%; }
  .contact-card { padding: var(--s-3); }
}

/* très petits écrans : listes sur une seule colonne */
@media (max-width: 359.98px) {
  .mx-spec { grid-template-columns: 1fr; }
  .mx-founder__values { grid-template-columns: 1fr; row-gap: var(--s-1); }
  .mx-founder__values span + span { border-left: 0; }
}

/* --- Sans JavaScript, la navigation s'affiche en ligne sous le logo : l'en-tête,
   plus haut, ne reste pas collé en haut de l'écran du téléphone ------------- */
@media (max-width: 899.98px) {
  .site-header:not(.js-nav) { position: relative; }
}

/* --- Menu plein écran : la page derrière ne défile pas ------------------------
   Seul le document est bloqué : bloquer aussi <body> en ferait un conteneur de
   défilement, et l'en-tête collant (avec son menu) sortirait de l'écran.
   html.nav-open est posé par site.js (plutôt que :has(), inconnu de Safari < 15.4
   et de Firefox < 121). */
@media (max-width: 899.98px) {
  html.nav-open { overflow: hidden; }
}

/* --- Navigateurs anciens (Safari 14 et moins) --------------------------------
   Sans « aspect-ratio », les planches et la plaque bleue n'auraient aucune
   hauteur (leur contenu est positionné) : on la leur donne autrement. */
@supports not (aspect-ratio: 1 / 1) {
  .mx-vignette::before { content: ""; display: block; padding-top: 80%; }
  .mx-vignette__in { top: 0; right: 0; bottom: 0; left: 0; }
  .mx-saas__plate { min-height: 320px; }
}

/* Safari < 14.1 (iOS 12 à 14.4) ignore « gap » entre les éléments d'une rangée
   flexible ; il est arrivé dans la même version qu'« inset », d'où ce test.
   site.js recrée ces écarts par des marges ; ici, ceux des filets décoratifs
   (pseudo-éléments, hors de portée du script). */
@supports not (inset: 0) {
  .mx-label::before,
  .mx-over::before,
  .eyebrow::before { margin-right: 16px; }
  .mx-center .mx-label::after,
  .mx-head .mx-label::after,
  .mx-over::after { margin-left: 16px; }
  .mx-figcap::before { margin-right: 14px; }
  @media (max-width: 699.98px) {
    .mx-over::before { margin-right: 12px; }
    .mx-over::after { margin-left: 12px; }
  }
}

/* ==== 66-echappee.css ==== */
/* ==========================================================================
   66 — « MAISON », L'ÉCHAPPÉE EN IMAGE
   Variante de la version de base (src-maison-charte/). Un seul motif, sans
   vocabulaire de course : une trajectoire qui se détache du groupe et prend
   de l'avance, son extrémité en bleu. En bas de la couverture, dans la
   méthode (le calme, puis l'accélération) et en écho dans le pied de page.
   ========================================================================== */

/* --- La ligne d'échappée -------------------------------------------------- */
.mx-break {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 100%;
  height: max(40px, min(6vw, 76px));
  pointer-events: none;
}
.mx-break__svg { display: block; width: 100%; height: 100%; overflow: visible; }
.mx-break__pack,
.mx-break__lead { fill: none; vector-effect: non-scaling-stroke; }
.mx-break__pack { stroke: rgba(23, 23, 23, 0.22); stroke-width: 1; }
.mx-break__lead { stroke: url(#mx-break-grad); stroke-width: 1.5; }
.mx-break__dot {
  position: absolute;
  top: calc(3% - 4px);
  right: -4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-blue);
}

/* couverture : la ligne remplace le filet du pied de couverture */
.mx-hero__inner { padding-bottom: 0; }
.mx-hero__base { margin-top: max(64px, min(9vh, 112px)); margin-top: max(64px, min(9svh, 112px)); }
.mx-hero__base::before { display: none; }

/* pied de page : la même ligne, en clair, au-dessus du grand logo */
.mx-break--footer {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  display: block;
  margin-top: max(64px, min(8vw, 128px));
}
.mx-break--footer .mx-break__pack { stroke: rgba(245, 243, 237, 0.25); }
.mx-break--footer .mx-break__lead { stroke: url(#mx-break-grad-light); }
.mx-footer__logo { margin-top: var(--s-5); }

/* --- La méthode en profil : le calme, puis l'accélération ------------------- */
.mx-stage { margin: var(--s-6) 0 0; }
.mx-stage__svg { display: block; width: 100%; height: auto; overflow: visible; }
.mx-stage__axis { stroke: var(--mx-ink); stroke-width: 1; }
.mx-stage__sep line { stroke: rgba(23, 23, 23, 0.2); stroke-width: 1; stroke-dasharray: 3 4; }
.mx-stage__area { fill: rgba(23, 23, 23, 0.05); }
.mx-stage__line { fill: none; stroke: var(--mx-ink); stroke-width: 1.5; stroke-linejoin: round; }
.mx-stage__lead { fill: none; stroke: var(--c-blue); stroke-width: 2.25; stroke-linecap: round; }
.mx-stage__dot { fill: var(--c-blue); }
.mx-stage text {
  font-family: var(--font-display);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 1.7px;
  fill: var(--c-gray);
}
.mx-stage__num text { font-size: 12px; font-weight: 700; letter-spacing: 1px; fill: var(--c-blue); }
.mx-stage__note text { fill: var(--mx-ink); }
@media (max-width: 699.98px) {
  .mx-stage { margin-top: var(--s-5); }
  .mx-stage text { font-size: 12px; letter-spacing: 1.2px; }
  .mx-stage__num text { font-size: 14px; }
}

/* --- Point bleu en fin des grands titres des pages intérieures ------------- */
.title-dot { color: var(--c-blue); }

/* --- Page introuvable : la ligne sort du cadre, le point a pris le large ---- */
.mx-lost {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--mx-header));
  min-height: calc(100svh - var(--mx-header));
}
.mx-lost__inner {
  flex: 1;
  justify-content: center;
  padding-top: max(40px, min(7vh, 104px)); padding-bottom: var(--s-4); padding-top: max(40px, min(7svh, 104px)); padding-bottom: var(--s-4);
}
.mx-lost__title {
  max-width: 22ch;
  margin-top: var(--s-4);
  font-size: max(2.5rem, min(1rem + 4.6vw, 5.5rem));
  text-wrap: balance;
  line-height: 1.02;
  letter-spacing: -0.04em;
}
.mx-lost__text { max-width: 30em; margin-top: var(--s-4); color: var(--c-gray); font-size: 1.0625rem; }
.mx-lost__track {
  height: max(110px, min(15vw, 200px));
  overflow: hidden;
}
.mx-lost__svg { display: block; width: 100%; height: 100%; overflow: visible; }
.mx-lost__lead {
  fill: none;
  stroke: url(#mx-lost-grad);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

/* ==== 69-maison-print.css ==== */
/* ==========================================================================
   69 — IMPRESSION (et « Enregistrer en PDF »)
   La page imprimée garde la mise en page du site, sans ce qui ne sert qu'à
   l'écran : menu, invitation à défiler, en-tête qui suit le défilement, pied
   de page en rideau. Les aplats sombres ou bleus gardent leur couleur (sans
   quoi leur texte clair s'imprimerait blanc sur blanc) ; le fond ivoire de la
   page, lui, reste le blanc du papier.
   Les états d'animation (contenu pas encore apparu) sont remis à zéro dans
   anim.css.
   ========================================================================== */
@media print {
  .site-header { position: static; border-bottom: 0; }
  .site-nav,
  .nav-toggle,
  .skip-link,
  .mx-scroll,
  .legal-toc { display: none !important; }
  html.mx-curtain main,
  html.mx-curtain .mx-footer { position: static; }
  /* la couverture plein écran ne déborde pas sur une deuxième feuille */
  .mx-hero,
  .mx-lost { min-height: 0; }

  .band--black,
  .band--blue,
  .mx-saas,
  .mx-founder,
  .mx-footer__panel,
  .mx-vignette__in,
  .mx-saas__plate,
  .mx-break__dot {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* un titre reste avec ce qui le suit ; tableaux, images et panneaux ne se coupent pas */
  h1, h2, h3 { break-after: avoid; }
  img, svg, figure, .mx-vignette, .mx-stage, .legal-dl, .mx-footer__panel { break-inside: avoid; }
}