/* ============================================================
   DOCTEUR WEB : la tech des petites entreprises du Québec
   Palette : papier #F5EFE0 · crème #F8E8C8 · or #E8C870→#D4A017
   nuit #1A1614 · encre #2A2A2A · cinabre #B22222 · or #C9A227
   ============================================================ */

:root {
  --paper: #F5EFE0;
  --paper-soft: #F8E8C8;
  --night: #1A1614;
  --night-fg: #F5EFE0;
  --ink: #2A2A2A;
  --ink-soft: #3B3733;
  --ink-mute: #6E6258;
  --ink-faint: #9C8E7E;
  --signal: #B22222;
  --signal-deep: #8B1A1A;
  --gold: #C9A227;
  --gold-soft: #EAD58F;
  --line: #D9CDB1;
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --sans: 'Inter Tight', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Garde-fou responsive : aucune image/média ne déborde son conteneur. */
img, svg, video { max-width: 100%; height: auto; }

html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink-soft);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: rgba(178, 34, 34, 0.18); }

a { color: var(--signal); text-decoration: none; transition: color 0.25s ease; }
a:hover { color: var(--signal-deep); }

/* ---------- Structure ---------- */

.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 40px;
}

section { scroll-margin-top: 88px; }

.section {
  padding: 140px 0;
}

.section--paper { background: var(--paper); color: var(--ink-soft); }
.section--soft { background: var(--paper-soft); color: var(--ink-soft); }
.section--gold {
  background: linear-gradient(180deg, #E8C870, #D4A017);
  color: var(--ink);
}
.section--night { background: var(--night); color: var(--night-fg); }

/* ---------- Typographie ---------- */

.label {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 28px;
  color: var(--signal);
}
.section--night .label { color: var(--gold-soft); }
.section--gold .label { color: var(--signal-deep); }

h1, h2 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--ink);
  /* ⚠ Anti-veuve typographique (Laeka, 2026-07-24) : un titre ne doit JAMAIS finir sur
     un mot seul sur sa dernière ligne (« ...en / paperasse. »). balance équilibre les
     lignes d'un titre court et supprime l'orphelin. Vérifié aux 3 résolutions. */
  text-wrap: balance;
}

/* ⚠ Descendu de 4.6rem à 3.6rem le 2026-07-24 : les héros de landing/services héritent
   de CE h1 (le hero de l'accueil a le sien, plus bas). À 4.6rem, une phrase de hero
   débordait sur 3 lignes avec un mot orphelin. 3.6rem tient la promesse sur 2 lignes. */
h1 { font-size: clamp(2.4rem, 4.4vw, 3.6rem); }
h2 { font-size: clamp(2.1rem, 4vw, 3.3rem); margin-bottom: 32px; }

h1 em, h2 em {
  font-style: italic;
  color: var(--signal);
}

.section--night h1, .section--night h2 { color: var(--night-fg); }
.section--night h2 em { color: var(--gold-soft); }
.section--gold h2 em { color: var(--signal-deep); }

/* § — numéros de section */
.secnum {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(3.2rem, 6vw, 5rem);
  line-height: 1;
  display: block;
  color: var(--ink);
}
.section--night .secnum { color: var(--signal); }
.secnum--block { margin-bottom: 40px; }

/* En-tête de section, EMPILÉ (2026-07-14).
   L'ancienne version était une grille à 2 colonnes : le numéro à gauche, le titre
   poussé dans la colonne de droite. Résultat, le titre flottait au milieu de la page
   sans être aligné sur rien, et les labels un peu longs se cassaient en 2 lignes dans
   une colonne trop étroite. Tout est maintenant à gauche, sur la même marge que le
   texte qui suit. */
.sechead {
  display: block;
  max-width: 900px;
  margin-bottom: 24px;
}
.sechead .secnum { margin-bottom: 6px; }
.sechead .label { margin-bottom: 22px; white-space: nowrap; }
.sechead h2 { margin-bottom: 0; font-size: clamp(1.9rem, 3.1vw, 2.7rem); }

@media (max-width: 560px) {
  .sechead .label { white-space: normal; }
}

.lede {
  max-width: 660px;
  font-family: var(--serif);
  font-size: 19px;
  color: var(--ink-soft);
  text-wrap: pretty;   /* pas de mot orphelin en fin de sous-titre (hero landing/vitrine) */
}
.section--night .lede { color: rgba(245, 239, 224, 0.78); }
.section--gold .lede { color: rgba(42, 42, 42, 0.82); }

.lede em { font-style: italic; }
.lede strong { font-weight: 500; }

/* ---------- Boutons ---------- */

.btn {
  display: inline-block;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 15px 30px;
  border: 1px solid var(--signal);
  color: var(--paper);
  background: var(--signal);
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.btn:hover { background: var(--signal-deep); border-color: var(--signal-deep); color: var(--paper); }

.btn--ghost {
  background: transparent;
  border-color: rgba(42, 42, 42, 0.3);
  color: var(--ink-soft);
}
.btn--ghost:hover { background: transparent; border-color: var(--ink); color: var(--ink); }

.section--night .btn--ghost {
  border-color: rgba(245, 239, 224, 0.3);
  color: rgba(245, 239, 224, 0.8);
}
.section--night .btn--ghost:hover { border-color: var(--night-fg); color: var(--night-fg); background: transparent; }

.section--gold .btn--ghost {
  border-color: rgba(42, 42, 42, 0.4);
  color: var(--ink);
}
.section--gold .btn--ghost:hover { border-color: var(--ink); color: var(--ink); background: transparent; }

.btn-row { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 48px; }

/* ---------- Nav ---------- */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(245, 239, 224, 0.8);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  transition: background 0.4s ease;
}
.nav.is-scrolled { background: rgba(245, 239, 224, 0.94); }

.nav__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 40px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.nav__logo {
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: 0.34em;
  color: var(--ink);
  font-weight: 500;
}
.nav__logo:hover { color: var(--signal); }
.nav__logo span { color: var(--signal); }

.nav__links {
  display: flex;
  align-items: center;
  /* gap 36->28 le 2026-07-24 : 7 entrées (+ Ton métier + La Vitrine au PIVOT⁵) tiennent
     dans la barre desktop sans se serrer. Sous 1120px, la barre passe au burger. */
  gap: 28px;
  /* Le bouton Urgence a été sorti de ce bloc (pour le menu mobile) : sans ce
     margin-left, .nav__inner répartissait les 3 enfants et les liens se
     centraient. On garde le groupe liens + Urgence collé à droite, comme avant. */
  margin-left: auto;
}

.nav__links a {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 14.5px;
  letter-spacing: 0.04em;
  color: rgba(42, 42, 42, 0.72);
  /* ⚠ Un item de menu ne se coupe JAMAIS en deux (« Ton / métier ») : si la barre
     manque de place, elle bascule au burger (<=1120px), elle ne casse pas les mots. */
  white-space: nowrap;
}
.nav__links a:hover { color: var(--signal); }
.nav__links a.is-active { color: var(--signal); }

/* Le sélecteur .nav__links a (spécificité 0,2,0) écrase .btn (0,1,0) : sans cette
   règle, le bouton rouge du menu hérite de l'encre sombre et son texte devient
   illisible sur le cinabre. On rétablit explicitement, survol compris. */
.nav__links a.btn { color: var(--paper); }
.nav__links a.btn:hover { color: var(--paper); }

.nav .btn { padding: 10px 20px; font-size: 11px; }

/* Le bout droit de la barre : Urgence, plus le burger (caché en desktop).
   36px pour reproduire exactement l'espacement d'avant, quand le bouton était
   le dernier enfant de .nav__links (gap 36). */
.nav__end { display: flex; align-items: center; gap: 14px; margin-left: 36px; }

.nav__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--line);
  background: transparent;
  cursor: pointer;
}
.nav__burger span {
  display: block;
  width: 18px;
  height: 1.5px;
  margin: 0 auto;
  background: var(--ink);
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ---------- Sous-menu Services (mega-menu, CSS pur : hover + focus-within).
   Au toucher (pas de hover), le lien « Services » mène à la page services :
   le sous-menu est un raccourci, jamais le seul chemin. ---------- */

.nav__item { position: relative; }
.nav__item > a::after {
  content: "▾";
  font-size: 9px;
  margin-left: 6px;
  color: rgba(42, 42, 42, 0.45);
}

.nav__menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%);
  display: none;
  grid-template-columns: repeat(3, minmax(170px, 1fr));
  gap: 8px 36px;
  padding: 28px 32px 24px;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 18px 50px rgba(42, 42, 42, 0.14);
  width: max-content;
  max-width: min(760px, calc(100vw - 48px));
}
/* pont invisible entre le lien et le panneau, pour ne pas perdre le hover */
.nav__menu::before {
  content: "";
  position: absolute;
  top: -16px; left: 0; right: 0;
  height: 16px;
}
.nav__item:hover .nav__menu,
.nav__item:focus-within .nav__menu { display: grid; }

/* Le menu « Ton métier » : 2 colonnes (liens | diagramme décoratif). Le mega-menu
   Services garde ses 3 colonnes auto ; celui-ci n'a qu'une colonne de liens, d'où le
   vide à droite que le diagramme comble (Laeka, 2026-07-24). */
.nav__menu--prof {
  grid-template-columns: minmax(160px, 1fr) 190px;
  align-items: center;
}
.nav__menu-art {
  display: flex;
  align-items: center;
  justify-content: center;
}
.nav__menu-art svg { width: 168px; height: 168px; }

.nav__menu-col { display: flex; flex-direction: column; gap: 2px; }

.nav__menu-head {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--signal);
  margin-bottom: 8px;
  white-space: nowrap;
}

.nav__menu-col a {
  font-size: 13.5px;
  padding: 4px 0;
  white-space: nowrap;
}

.nav__menu-all {
  grid-column: 1 / -1;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 160px 0 120px;
  background: var(--paper);
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 60px;
  align-items: center;
}

.hero h1 {
  margin: 26px 0 34px;
  /* Plus petit que le h1 global : la colonne texte du hero fait ~55 % de la
     grille ; chaque phrase doit tenir sur UNE ligne (2 lignes au total, pas 4).
     ⚠ Plafond descendu à 2.4rem le 2026-07-24 (2e passe). Le piège : au-delà de
     ~1180px, .container est FIGÉ à 1180 (donc la colonne du hero cesse de grandir)
     mais la police, elle, continuait de grossir jusqu'à 2.8rem. Résultat : à
     ~1500px+ la 2e phrase débordait et « vrai. » retombait seul. Le plafond doit
     tenir dans la colonne FIGÉE, pas dans le viewport. Vérifié 1080 → 1920. */
  font-size: clamp(2.15rem, 2.7vw, 2.4rem);
}

.hero__sub {
  max-width: 620px;
  font-family: var(--serif);
  font-size: 18.5px;
  color: var(--ink-soft);
  text-wrap: pretty;   /* pas de mot orphelin sur la dernière ligne du paragraphe */
}
.hero__sub em { font-style: italic; }

.hero__diagram {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 520px;
  justify-self: end;
  width: 100%;
}
.hero__diagram svg { width: 100%; height: 100%; display: block; }

@keyframes rot-slow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes rot-slow-rev { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
@keyframes pulse-soft { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }

.ring-a { animation: rot-slow 160s linear infinite; transform-origin: center; }
.ring-b { animation: rot-slow-rev 220s linear infinite; transform-origin: center; }
.node-pulse { animation: pulse-soft 5s ease-in-out infinite; }

/* ---------- Bande de chiffres ---------- */

.stats {
  background: var(--paper-soft);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 56px 0;
}

.stats__grid {
  display: grid;
  /* auto-fit : 3 OU 4 stats se placent seuls en colonnes (les pages à 4 stats
     empilaient tout en lignes avec l'ancien repeat(3) figé). */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 40px;
}

.stat { text-align: left; }

.stat__num {
  font-family: var(--serif);
  font-size: clamp(2.6rem, 4vw, 3.6rem);
  line-height: 1;
  color: var(--signal);
  font-weight: 400;
}

.stat__cap {
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  max-width: 300px;
  line-height: 1.6;
}

/* ---------- Cartes (angles morts) ---------- */

.cards3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 72px;
}

.card {
  padding: 40px 34px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.45);
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: border-color 0.35s ease;
}

.card__title {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--ink);
}

.card__body {
  font-size: 15.5px;
  color: var(--ink-mute);
  flex: 1;
}

.card__take {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: var(--signal);
  border-top: 1px solid var(--line);
  padding-top: 18px;
  line-height: 1.4;
}

.prose { max-width: 720px; display: flex; flex-direction: column; gap: 22px; }
.prose p {
  font-family: var(--serif);
  font-size: 18.5px;
  color: var(--ink-soft);
}
.prose strong { font-weight: 600; color: var(--ink); }

.section--night .prose p { color: rgba(245, 239, 224, 0.78); }
.section--night .prose strong { color: var(--night-fg); }
.section--gold .prose p { color: rgba(42, 42, 42, 0.85); }
.section--gold .prose strong { color: var(--ink); }

/* ---------- Dimensions de l'intégrité (sur or) ---------- */

.axes { margin-top: 72px; border-top: 1px solid rgba(42, 42, 42, 0.25); }

.axe {
  display: grid;
  grid-template-columns: 72px minmax(0, 0.9fr) minmax(0, 1.3fr);
  gap: 28px;
  align-items: baseline;
  padding: 26px 0;
  border-bottom: 1px solid rgba(42, 42, 42, 0.25);
}

.axe__num {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--signal-deep);
  letter-spacing: 0.1em;
}

.axe__title {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--ink);
}

.axe__pain {
  font-size: 15.5px;
  color: rgba(42, 42, 42, 0.72);
}

/* ---------- Analyses ---------- */

.flagship {
  margin-top: 64px;
  padding: 56px 52px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: 48px;
  align-items: start;
}

.flagship__title {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 2.6vw, 2.4rem);
  font-weight: 500;
  line-height: 1.15;
  color: var(--paper);
}

.flagship__tag {
  display: block;
  margin-top: 20px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}

.flagship__body { font-size: 16.5px; color: rgba(245, 239, 224, 0.78); }
.flagship__note {
  margin-top: 18px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: var(--gold);
}

.cards2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  margin-top: 28px;
}

/* Une carte qui prend la ligne au complet dans une grille .cards2 : sert à mettre
   en tête celle qui porte le positionnement, et à ne pas laisser un trou quand le
   nombre de cartes est impair. En bas de 1000px la grille passe à une colonne et
   cette règle n'a plus d'effet, ce qui est le comportement voulu. */
.card--wide { grid-column: 1 / -1; }

.card--dark {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.45);
}
.card--dark .card__title { color: var(--ink); }
.card--dark .card__body { color: var(--ink-mute); }
.card--dark:hover { border-color: var(--gold); }

.analyses__foot {
  margin-top: 64px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  border-top: 1px solid var(--line);
  padding-top: 44px;
}
.analyses__foot p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 19px;
  color: var(--ink-mute);
  max-width: 560px;
}

/* ---------- Méthode ---------- */

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  margin-top: 72px;
}

.step { border-top: 1px solid rgba(42, 42, 42, 0.25); padding-top: 26px; }

.step__num {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--signal);
  display: block;
  margin-bottom: 16px;
}

.step__title {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 500;
  margin-bottom: 12px;
  color: var(--ink);
}

.step__body { font-size: 15px; color: var(--ink-mute); }

/* ---------- Indépendance (sur nuit) ---------- */

.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 64px;
}

.pillar {
  border-top: 2px solid var(--gold-soft);
  padding-top: 22px;
}

.pillar__title {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  font-weight: 500;
  margin-bottom: 10px;
  color: var(--gold-soft);
}

.pillar__body { font-size: 15px; color: rgba(245, 239, 224, 0.6); }

.section--paper .pillar { border-top-color: var(--gold); }
.section--paper .pillar__title { color: var(--ink); }
.section--paper .pillar__body { color: var(--ink-mute); }

/* ---------- Le lab ---------- */

.lab__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 80px;
  align-items: start;
}

.lab__stats {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--line);
}

.lab__stat {
  display: flex;
  align-items: baseline;
  gap: 24px;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
}

.lab__stat-num {
  font-family: var(--serif);
  font-size: 2.4rem;
  font-weight: 400;
  color: var(--signal);
  min-width: 150px;
  line-height: 1;
}

.lab__stat-cap {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* ---------- Rythmes ---------- */

.rhythms {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 64px;
}
/* Une seule fiche (ex : le prix unique de la Vitrine) : pleine largeur, pas coincée
   dans la 1re des 3 colonnes (Laeka, 2026-07-24). */
.rhythms--solo { grid-template-columns: 1fr; }

.rhythm {
  padding: 44px 36px;
  border: 1px solid var(--line);
  background: var(--paper);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.rhythm__price {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--signal);
}

.rhythm__title {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 500;
  line-height: 1.1;
  color: var(--ink);
}

.rhythm__body { font-size: 15.5px; color: var(--ink-mute); }

.rhythms__note {
  margin-top: 48px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 19px;
  color: var(--ink-mute);
  max-width: none;
}

/* ---------- Contact (sur or, texte + formulaire) ---------- */

.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 72px;
  align-items: start;
}

.contact__text .btn-row { margin-top: 40px; }

.contact__note {
  margin-top: 36px;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.1em;
  color: rgba(42, 42, 42, 0.72);
}

.contact__form {
  background: var(--paper);
  padding: 44px 40px;
  border: 1px solid rgba(42, 42, 42, 0.2);
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.field { display: flex; flex-direction: column; gap: 8px; }

.field__label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.field__input {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 15.5px;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line);
  padding: 13px 15px;
  outline: none;
  transition: border-color 0.3s ease;
  width: 100%;
}
.field__input::placeholder { color: var(--ink-faint); }
.field__input:focus { border-color: var(--signal); }

.field__area { resize: vertical; min-height: 130px; line-height: 1.6; }

.btn--submit { width: 100%; text-align: center; margin-top: 6px; }

.contact__small {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  text-align: center;
}

/* ---------- Footer (nuit) ---------- */

.footer {
  background: var(--night);
  border-top: 1px solid rgba(245, 239, 224, 0.08);
  padding: 64px 0 48px;
  color: var(--night-fg);
}

.footer .nav__logo { color: var(--night-fg); }
.footer .nav__logo:hover { color: var(--gold-soft); }

.footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
}

.footer__links { display: flex; flex-wrap: wrap; gap: 28px; }
.footer__links a {
  font-size: 14px;
  color: rgba(245, 239, 224, 0.6);
}
.footer__links a:hover { color: var(--gold-soft); }

/* Duo image + texte (portrait à gauche, prose à droite ; empile en mobile). */
.duo {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  gap: 56px;
  align-items: start;
}
.duo img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--line);
}
@media (max-width: 760px) {
  .duo { grid-template-columns: 1fr; gap: 32px; }
  .duo img { max-width: 420px; }
}

/* Le pied en colonnes titrées (5 groupes, repli automatique en mobile). */
/* ⚠ 4 colonnes FIXES, pas auto-fit. L'auto-fit rangeait les 6 groupes en 5 + 1 tout
   seul sur une deuxième rangée, ce qui avait l'air d'un accident (Laeka, 2026-07-22).
   Quatre groupes assumés + le légal dans la barre du bas : chaque rangée est pleine. */
.footer__cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 36px 32px;
  margin: 34px 0 40px;
}
.footer__col { display: flex; flex-direction: column; gap: 9px; }
.footer__col-head {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin-bottom: 6px;
}
.footer__col a {
  font-size: 13.5px;
  color: rgba(245, 239, 224, 0.6);
}
.footer__col a:hover { color: var(--gold-soft); }

.footer__mission {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  color: rgba(234, 213, 143, 0.75);
  max-width: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 20px;
}

.footer__copy {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  color: var(--ink-faint);
}

/* La barre du bas : copyright à gauche, pages légales à droite, séparées par un filet.
   Les légales n'ont pas besoin d'une colonne : elles se cherchent, elles ne se lisent pas. */
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px 28px;
  padding-top: 22px;
  border-top: 1px solid rgba(245, 239, 224, 0.08);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.footer__legal a {
  font-size: 12.5px;
  color: rgba(245, 239, 224, 0.42);
}
.footer__legal a:hover { color: var(--gold-soft); }
/* Séparateur en point médian, sauf devant le premier : pas d'élément vide dans le HTML. */
.footer__legal a + a::before {
  content: "·";
  margin-right: 16px;
  color: rgba(245, 239, 224, 0.22);
}

/* --- Le cinabre (#B22222) sur fond nuit ne donne que 2,69:1, sous le seuil WCAG AA.
       Mesuré au navigateur. On garde le rouge (c'est la signature), mais éclairci
       pour le fond sombre : même famille, contraste réel au-dessus de 4,5:1. --- */
.section--night .secnum,
.footer .nav__logo span { color: #E8776F; }

/* Ligne de rassurance sous le formulaire : --ink-faint donnait 2,78:1. */
.contact__small { color: var(--ink-mute); }

/* ============================================================
   CONTRASTE PAR FOND (ajouté 2026-07-14)

   Faiblesse du design system d'origine : chaque composant avait sa couleur codée
   en dur pour la SEULE section où le vieux site l'utilisait. Poser un .step sur
   fond nuit ou un .pillar sur fond crème donnait du texte de la couleur du fond,
   donc invisible. Constaté à l'écran par Laeka sur 3 pages.

   Règle : tout composant doit rester lisible sur n'importe lequel des 4 fonds.
   ============================================================ */

/* --- .steps sur fond NUIT (fiche fournisseur : la procédure d'incident) --- */
.section--night .step { border-top-color: rgba(245, 239, 224, 0.28); }
.section--night .step__num { color: var(--gold-soft); }
.section--night .step__title { color: var(--night-fg); }
.section--night .step__body { color: rgba(245, 239, 224, 0.72); }

/* --- .steps sur fond OR --- */
.section--gold .step { border-top-color: rgba(42, 42, 42, 0.3); }
.section--gold .step__num { color: var(--signal-deep); }
.section--gold .step__title { color: var(--ink); }
.section--gold .step__body { color: rgba(42, 42, 42, 0.78); }

/* --- .pillars sur fond CRÈME (à propos : « ce que je ne fais pas »).
       Laeka veut ce bloc en encre franche, pas en gris pâle. --- */
.section--soft .pillar { border-top-color: var(--gold); }
.section--soft .pillar__title { color: var(--ink); }
.section--soft .pillar__body { color: var(--ink); }

/* --- .pillars sur fond OR --- */
.section--gold .pillar { border-top-color: var(--signal-deep); }
.section--gold .pillar__title { color: var(--ink); }
.section--gold .pillar__body { color: rgba(42, 42, 42, 0.8); }

/* --- .contact__note sur fond NUIT (les lignes « en vigueur depuis… ») --- */
.section--night .contact__note { color: rgba(245, 239, 224, 0.62); }

/* --- .cards sur fond NUIT --- */
.section--night .card { border-color: rgba(245, 239, 224, 0.18); background: rgba(255, 255, 255, 0.04); }
.section--night .card__title { color: var(--night-fg); }
.section--night .card__body { color: rgba(245, 239, 224, 0.7); }
.section--night .card__take { color: var(--gold-soft); border-top-color: rgba(245, 239, 224, 0.18); }

/* --- .rhythm sur fond CRÈME : sans ça la carte a le même fond que la section --- */
.section--soft .rhythm { background: var(--paper); }
.section--gold .rhythm { background: var(--paper); }

/* --- .rhythms__note et .analyses__foot p sur fond NUIT --- */
.section--night .rhythms__note,
.section--night .analyses__foot p { color: rgba(234, 213, 143, 0.8); }

/* ---------- Reveal ---------- */

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .ring-a, .ring-b, .node-pulse { animation: none; }
}

/* ---------- Responsive ---------- */

@media (max-width: 1000px) {
  .section { padding: 100px 0; }
  .hero { min-height: auto; align-items: flex-start; }
  .hero__grid { grid-template-columns: 1fr; }
  .hero__diagram { display: none; }  /* caché <=1000px (iPad/phone) : l'anim ne rentre à droite qu'en 2 colonnes */
  .cards2, .cards3, .pillars, .rhythms { grid-template-columns: 1fr; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .flagship { grid-template-columns: 1fr; gap: 24px; }
  .lab__grid { grid-template-columns: 1fr; gap: 48px; }
  .axe { grid-template-columns: 48px 1fr; }
  .axe__pain { grid-column: 2; }
  .sechead { grid-template-columns: 1fr; gap: 24px; }
  .contact__grid { grid-template-columns: 1fr; gap: 48px; }
  /* 4 colonnes fixes au pied : elles doivent se replier explicitement, l'auto-fit
     ne le fait plus pour nous. */
  .footer__cols { grid-template-columns: repeat(2, 1fr); }
  .footer__mission { white-space: normal; }
}

/* ⚠ REPLI DE LA NAV au burger : monté de 720px à 1120px le 2026-07-24. Au PIVOT⁵ santé,
   la barre a gagné « Ton métier » et « La Vitrine » (7 entrées). Entre ~720 et 1180px,
   la barre desktop se serrait et cassait les mots (capture Laeka : « Ton / métier »,
   Urgence collé au bord). Sous 1120px on bascule au panneau burger, propre ; au-dessus,
   les 7 entrées tiennent au large. Le padding mobile (24px) reste, lui, à 720px. */
@media (max-width: 1120px) {
  /* ⚠ Avant le 2026-07-22, cette bascule masquait toute la nav sauf Urgence : cul-de-sac
     pour le trafic mobile venu des groupes Facebook. Le panneau ci-dessous le remplace.
     Le sous-menu Services reste masqué au toucher : le lien mène à solutions.html. */
  .nav__burger { display: inline-flex; }
  .nav__item > a::after { content: none; }

  .nav__links {
    display: none;
    position: absolute;
    top: 72px; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 4px 24px 18px;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 40px rgba(42, 42, 42, 0.12);
  }
  .nav__links.is-open { display: flex; }
  .nav__links a {
    font-size: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    white-space: normal;   /* dans le panneau vertical, le retour à la ligne est correct */
  }
  .nav__links > *:last-child a { border-bottom: 0; }
  .nav__menu { display: none !important; }   /* pas de mega-menu au toucher */
}

@media (max-width: 720px) {
  .container, .nav__inner { padding: 0 24px; }
  .section { padding: 80px 0; }
  .hero { padding: 130px 0 80px; }
  .stats__grid { grid-template-columns: 1fr; gap: 32px; }
  .steps { grid-template-columns: 1fr; }
  .btn-row { flex-direction: column; align-items: flex-start; }
  .contact__form { padding: 32px 24px; }
  .footer__cols { grid-template-columns: 1fr; gap: 28px; }
}