@charset "UTF-8";
/* ============================================
   DENIS TALLON COACHING
   Feuille de style unique, partagée par les 11 pages.

   Direction visuelle : content/brief-design.md, qui fait autorité
   et écrase le tableau de détection d'ambiance par défaut.

   Ambiance retenue : sobre et chaleureux. Beaucoup d'air,
   blocs de texte courts, fonds crème pour les sections qui doivent
   rassurer, blanc pour celles qui doivent se lire vite. Le bleu de
   marque reste un accent structurant : en grands aplats il produirait
   un site clinique, exactement l'inverse de ce que le client demande.

   Ce que ce fichier ne fait PAS, et pourquoi :
   . aucune animation d'apparition au défilement. Le public lit
     fatigué, souvent le soir, souvent sur téléphone. Un lecteur
     épuisé n'a pas à attendre qu'un texte veuille bien s'afficher.
   . aucun appel de police vers un serveur distant. Les polices sont
     servies depuis /fonts. La politique de confidentialité affirme
     l'absence totale de cookies et de traceurs : cette affirmation
     doit rester vérifiable dans l'onglet réseau du navigateur.
   ============================================ */

/* ============================================
   0. POLICES AUTO-HÉBERGÉES
   Source Serif 4 (titres) et Inter (corps), licence SIL OFL 1.1.
   Voir fonts/LICENSE.txt.
   ============================================ */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/source-serif-4-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/source-serif-4-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/source-serif-4-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/source-serif-4-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================================
   1. VARIABLES (custom properties)
   ============================================ */

:root {
  /* --- Couleurs. Palette et contrastes : content/brief-design.md --- */
  --color-primary: #1231d4;        /* bleu déclaré par le client, 8,7:1 sur blanc */
  --color-primary-dark: #0d2296;   /* survol, états actifs */
  --color-primary-soft: #eaeeff;   /* fond très clair dérivé du bleu */
  --color-secondary: #f4efe6;      /* crème. Le « orange clair » du questionnaire */
  --color-accent: #e4661f;         /* orange décoratif : filets, puces, icônes */
  --color-accent-text: #b34a12;    /* orange version texte, 5,4:1 sur blanc */
  --color-accent-soft: #fdf1e7;

  --color-bg: #ffffff;
  --color-bg-alt: #f4efe6;
  --color-bg-dark: #16181f;
  --color-text: #16181f;           /* encre bleutée, 17,7:1. Pas de noir pur */
  --color-text-light: #ffffff;
  --color-text-muted: #4b5060;     /* gris ardoise, 8,0:1 sur blanc */
  --color-text-on-dark: #e8e6e1;
  --color-text-on-dark-muted: #b3b6bf;

  --color-border: #e2dccf;
  --color-border-strong: #cfc6b4;
  --color-border-dark: #2f323d;

  /* Marqueurs de production, volontairement visibles à l'écran */
  --color-todo-bg: #fff4e0;
  --color-todo-border: #e4661f;
  --color-todo-text: #8a3d0e;

  /* --- Typographie --- */
  --font-heading: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;

  /* 18 px minimum sur mobile, 19 à 20 px sur grand écran (brief-design.md) */
  --font-size-base: clamp(1.125rem, 1.05rem + 0.32vw, 1.25rem);
  --font-size-sm: clamp(0.9375rem, 0.9rem + 0.16vw, 1rem);
  --font-size-xs: 0.875rem;
  --font-size-lg: clamp(1.25rem, 1.15rem + 0.42vw, 1.4375rem);
  --font-size-xl: clamp(1.4375rem, 1.28rem + 0.66vw, 1.75rem);
  --font-size-2xl: clamp(1.75rem, 1.45rem + 1.28vw, 2.4375rem);
  /* Valeur adaptée au brief : un serif à 4,5rem écraserait la page */
  --font-size-hero: clamp(2.125rem, 1.4rem + 3vw, 3.4375rem);

  --line-height-body: 1.72;        /* 1,7 minimum imposé par le brief */
  --line-height-heading: 1.16;

  /* --- Espacements --- */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 2rem;
  --spacing-lg: 4rem;
  --spacing-xl: 7rem;
  --section-padding: clamp(3.25rem, 7vw, 6rem);

  /* --- Mise en page --- */
  --max-width: 1120px;
  --max-width-text: 40rem;         /* 65 à 70 caractères */
  --header-height: 72px;
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 20px;
  --radius-full: 999px;

  /* --- Effets. Sobres : le brief demande de l'air, pas du relief --- */
  --shadow-sm: 0 1px 2px rgba(22, 24, 31, 0.06);
  --shadow-md: 0 4px 16px rgba(22, 24, 31, 0.08);
  --shadow-lg: 0 14px 40px rgba(22, 24, 31, 0.12);
  --transition: 0.2s ease;
  --transition-slow: 0.35s ease;

  --focus-ring: 3px solid var(--color-primary);
  --focus-offset: 3px;
}

/* ============================================
   2. RESET & BASE
   ============================================ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 1rem);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-body);
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

h1, h2, h3, h4 {
  margin: 0 0 var(--spacing-sm);
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: var(--line-height-heading);
  letter-spacing: -0.005em;
  color: var(--color-text);
  text-wrap: balance;
}

h1 { font-size: var(--font-size-hero); }
h2 { font-size: var(--font-size-2xl); }
h3 { font-size: var(--font-size-xl); }
h4 { font-size: var(--font-size-lg); }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--color-primary);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:hover { color: var(--color-primary-dark); }

strong, b { font-weight: 600; }

ul, ol { margin: 0 0 1.1em; padding-left: 1.25em; }
li { margin-bottom: 0.5em; }
li:last-child { margin-bottom: 0; }

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

blockquote { margin: 0; }

hr {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: var(--spacing-md) 0;
}

address { font-style: normal; }

table { border-collapse: collapse; width: 100%; }

:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-sm);
}

::selection {
  background: var(--color-primary);
  color: var(--color-text-light);
}

/* ============================================
   3. LAYOUT : header, nav, main, footer, conteneur
   ============================================ */

.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 2.25rem);
}

.container--narrow { max-width: 46rem; }

main { display: block; }

.section { padding-block: var(--section-padding); }
.section--alt { background-color: var(--color-bg-alt); }
.section--dark {
  background-color: var(--color-bg-dark);
  color: var(--color-text-on-dark);
}
.section--dark h2,
.section--dark h3 { color: var(--color-text-light); }

/* --- Lien d'évitement --- */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--color-primary);
  color: var(--color-text-light);
  font-size: var(--font-size-sm);
  font-weight: 600;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  text-decoration: none;
  transition: top var(--transition);
}
.skip-link:focus { top: 0; color: var(--color-text-light); }

/* --- En-tête --- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-bg);
  border-bottom: 1px solid transparent;
  transition: box-shadow var(--transition), border-color var(--transition);
}
.site-header.is-scrolled {
  border-bottom-color: var(--color-border);
  box-shadow: var(--shadow-sm);
}

.main-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
  min-height: var(--header-height);
}

.brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  text-decoration: none;
  border-radius: var(--radius-sm);
}
.brand img { height: 38px; width: auto; }

/* --- Navigation bureau --- */
.nav-list {
  display: none;
  align-items: center;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav-list > li { margin: 0; position: relative; }

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  color: var(--color-text);
  font-size: var(--font-size-sm);
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--radius-sm);
  border: 0;
  background: none;
  font-family: inherit;
  cursor: pointer;
  transition: color var(--transition), background-color var(--transition);
}
.nav-link:hover { color: var(--color-primary); background: var(--color-primary-soft); }
.nav-link.active,
.nav-link[aria-current="page"] {
  color: var(--color-primary);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--color-accent);
}

.nav-caret {
  width: 0.6em;
  height: 0.6em;
  flex: 0 0 auto;
  transition: transform var(--transition);
}
.nav-item--has-menu.is-open > .nav-link .nav-caret { transform: rotate(180deg); }

.nav-submenu {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  min-width: 17rem;
  margin: 0;
  padding: 0.5rem;
  list-style: none;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--transition), transform var(--transition),
    visibility var(--transition);
}
.nav-item--has-menu.is-open > .nav-submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  /* visibility bascule sans delai a l'ouverture : sinon le premier lien
     du sous-menu n'est pas focusable au clavier (fleche bas). */
  transition: opacity var(--transition), transform var(--transition),
    visibility 0s;
}
.nav-submenu li { margin: 0; }
.nav-submenu a {
  display: block;
  padding: 0.7rem 0.75rem;
  color: var(--color-text);
  font-size: var(--font-size-sm);
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--radius-sm);
}
.nav-submenu a:hover,
.nav-submenu a:focus-visible {
  background: var(--color-primary-soft);
  color: var(--color-primary);
}
.nav-submenu a[aria-current="page"] {
  color: var(--color-primary);
  font-weight: 600;
}

/* --- Troisieme item du deroulant : un public, pas une offre ---
   Ce menu liste des accompagnements. Le lien vers managers-dirigeants.html
   n'en est pas un : c'est une porte d'entree pour un autre public. Le filet
   marque la rupture de nature, l'allegement typographique la confirme.
   Sans ces deux marques, le visiteur compterait trois offres. */
.nav-submenu-sep {
  height: 1px;
  margin: 0.45rem 0.35rem;
  padding: 0;
  background: var(--color-border);
  list-style: none;
}
.nav-submenu a.nav-submenu-aside {
  font-size: var(--font-size-xs);
  font-weight: 400;
  color: var(--color-text-muted);
}
.nav-submenu a.nav-submenu-aside:hover,
.nav-submenu a.nav-submenu-aside:focus-visible {
  color: var(--color-primary);
}
/* Qualifie par .main-nav : sans cela, .btn (déclarée plus bas, même
   spécificité) écrase ce display:none et le bouton reste visible en
   mobile, ce qui fait déborder l'en-tête sous 400 px. */
.main-nav .nav-cta { display: none; }

/* --- Bouton hamburger --- */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  min-width: 44px;
  padding: 0.5rem 0.75rem;
  background: none;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}
.nav-toggle:hover { border-color: var(--color-primary); color: var(--color-primary); }
.nav-toggle-bars {
  position: relative;
  width: 18px;
  height: 12px;
  flex: 0 0 auto;
}
.nav-toggle-bars span,
.nav-toggle-bars span::before,
.nav-toggle-bars span::after {
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}
.nav-toggle-bars span { top: 5px; }
.nav-toggle-bars span::before { content: ""; top: -5px; }
.nav-toggle-bars span::after { content: ""; top: 5px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span::before { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span::after { transform: translateY(-5px) rotate(-45deg); }

/* --- Panneau mobile, entrée par la droite --- */
.nav-panel {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(22rem, 88vw);
  z-index: 130;
  padding: 1.25rem 1.25rem 2.5rem;
  background: var(--color-bg);
  border-left: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--transition-slow), visibility var(--transition-slow);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.nav-panel.is-open {
  transform: translateX(0);
  visibility: visible;
  /* Ouverture : visibility immediate, pour que le focus puisse entrer
     dans le panneau. Fermeture : visibility differee, pour laisser
     l'animation de sortie se jouer. */
  transition: transform var(--transition-slow), visibility 0s;
}

.nav-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  margin-bottom: 1.25rem;
}
.nav-panel-title {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.nav-panel-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  cursor: pointer;
}
.nav-panel-close:hover { border-color: var(--color-primary); color: var(--color-primary); }
.nav-panel-close svg { width: 16px; height: 16px; }

.nav-panel-list { margin: 0; padding: 0; list-style: none; }
.nav-panel-list > li {
  margin: 0;
  border-bottom: 1px solid var(--color-border);
}
.nav-panel-list a,
.nav-panel-list .nav-panel-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  min-height: 52px;
  padding: 0.85rem 0.25rem;
  background: none;
  border: 0;
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--font-size-base);
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.nav-panel-list a[aria-current="page"] {
  color: var(--color-primary);
  font-weight: 600;
}
.nav-panel-toggle .nav-caret { transition: transform var(--transition); }
.nav-panel-toggle[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }

.nav-panel-submenu {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--transition-slow);
}
.nav-panel-toggle[aria-expanded="true"] + .nav-panel-submenu {
  grid-template-rows: 1fr;
}
.nav-panel-submenu > ul {
  overflow: hidden;
  visibility: hidden;
  margin: 0;
  padding: 0;
  list-style: none;
  transition: visibility var(--transition-slow);
}
.nav-panel-toggle[aria-expanded="true"] + .nav-panel-submenu > ul {
  visibility: visible;
  transition: visibility 0s;
}
.nav-panel-submenu li { margin: 0; border: 0; }
.nav-panel-submenu a {
  padding-left: 1.1rem;
  font-size: var(--font-size-sm);
  font-weight: 400;
  color: var(--color-text-muted);
  border-left: 2px solid var(--color-border);
}
.nav-panel-submenu a[aria-current="page"] {
  color: var(--color-primary);
  border-left-color: var(--color-accent);
}

/* Meme distinction dans le panneau mobile. Les liens y sont deja en
   gris attenue : l'allegement passe par la taille et par la perte du
   filet vertical, qui reste l'apanage des deux accompagnements. */
.nav-panel-submenu a.nav-submenu-aside {
  font-size: var(--font-size-xs);
  font-style: italic;
  border-left-color: transparent;
}

.nav-panel-cta { margin-top: 1.5rem; }
.nav-panel-cta .btn { width: 100%; }
.nav-panel-note {
  margin-top: 0.65rem;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-align: center;
}

.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: rgba(22, 24, 31, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-slow), visibility var(--transition-slow);
}
.nav-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--transition-slow), visibility 0s;
}

body.nav-is-open { overflow: hidden; }

/* --- Pied de page --- */
.site-footer {
  background: var(--color-bg-dark);
  color: var(--color-text-on-dark);
  padding-block: clamp(2.75rem, 6vw, 4.25rem) 2rem;
  font-size: var(--font-size-sm);
  line-height: 1.65;
}
.site-footer a {
  color: var(--color-text-on-dark);
  text-decoration: none;
  border-bottom: 1px solid rgba(232, 230, 225, 0.28);
}
.site-footer a:hover {
  color: var(--color-text-light);
  border-bottom-color: var(--color-accent);
}
.site-footer :focus-visible { outline-color: var(--color-accent); }

.footer-grid {
  display: grid;
  gap: var(--spacing-md);
  grid-template-columns: 1fr;
}

.footer-logo { height: 34px; width: auto; margin-bottom: 1.1rem; }

.footer-col h2 {
  margin: 0 0 0.9rem;
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-text-on-dark-muted);
}

.footer-list { margin: 0; padding: 0; list-style: none; }
.footer-list li { margin-bottom: 0.6rem; }
.footer-list a { display: inline-block; min-height: 24px; }

.footer-contact-line {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: 0.7rem;
}
.footer-contact-line .icon {
  flex: 0 0 auto;
  margin-top: 0.28em;
  color: var(--color-accent);
}
.footer-muted { color: var(--color-text-on-dark-muted); }
.footer-social {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.footer-social .icon { flex: 0 0 auto; color: var(--color-accent); }

.footer-bottom {
  margin-top: clamp(2rem, 5vw, 3rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border-dark);
}

/* Disclaimer secteur : 15 px plancher, jamais raccourci, jamais replié */
.disclaimer {
  max-width: 60rem;
  margin: 0 0 1.25rem;
  padding: 1rem 1.15rem;
  background: rgba(255, 255, 255, 0.045);
  border-left: 3px solid var(--color-accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.9375rem;
  line-height: 1.62;
  color: var(--color-text-on-dark);
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
  font-size: var(--font-size-xs);
  color: var(--color-text-on-dark-muted);
}
.footer-legal p { margin: 0; }

/* ============================================
   4. COMPOSANTS
   ============================================ */

/* --- Boutons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 52px;              /* plancher de 44 px imposé par le brief */
  padding: 0.85rem 1.6rem;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition), border-color var(--transition),
    color var(--transition);
}
.btn svg { width: 1.05em; height: 1.05em; flex: 0 0 auto; }

.btn-primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-light);
}
.btn-primary:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: var(--color-text-light);
}

.btn-secondary {
  background: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.btn-secondary:hover { background: var(--color-primary); color: var(--color-text-light); }

.btn-on-dark {
  background: var(--color-bg);
  border-color: var(--color-bg);
  color: var(--color-primary);
}
.btn-on-dark:hover {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  color: var(--color-primary-dark);
}

.btn-block { width: 100%; }

.btn[disabled],
.btn[aria-disabled="true"] { opacity: 0.65; cursor: progress; }

/* Ligne de réassurance sous le bouton. Le mot « gratuit » vit ici,
   jamais dans le libellé du bouton (décision client). */
.cta-block { margin-top: var(--spacing-md); }
.cta-note {
  max-width: 34rem;
  margin: 0.85rem 0 0;
  font-size: var(--font-size-sm);
  line-height: 1.6;
  color: var(--color-text-muted);
}
.cta-note strong { color: var(--color-text); font-weight: 600; }
.section--dark .cta-note { color: var(--color-text-on-dark-muted); }
.section--dark .cta-note strong { color: var(--color-text-light); }

/* --- Bandeau de passerelle entre les deux versions --- */
.bridge {
  background: var(--color-secondary);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-sm);
}
.bridge-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.7rem;
  padding-block: 0.7rem;
  color: var(--color-text-muted);
}
.bridge-inner .icon { color: var(--color-accent); flex: 0 0 auto; }
.bridge a { color: var(--color-primary); font-weight: 600; min-height: 24px; }

/* --- Hero de page d'accueil --- */
.hero {
  background: var(--color-secondary);
  padding-block: clamp(2.75rem, 7vw, 5.5rem);
  border-bottom: 1px solid var(--color-border);
}
.hero-grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}
.hero-media, .page-hero-media { width: 100%; max-width: 25rem; }
.hero h1 { margin-bottom: 1.1rem; }
.hero-lead {
  max-width: var(--max-width-text);
  font-size: var(--font-size-lg);
  line-height: 1.62;
  color: var(--color-text-muted);
}

/* --- Hero de page interne --- */
.page-hero {
  background: var(--color-secondary);
  border-bottom: 1px solid var(--color-border);
  padding-block: clamp(2.25rem, 5vw, 3.75rem) clamp(2.5rem, 6vw, 4.25rem);
}
.page-hero-grid {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: center;
}
.page-hero h1 { margin-bottom: 1rem; }
.page-hero-lead {
  max-width: var(--max-width-text);
  font-size: var(--font-size-lg);
  line-height: 1.62;
  color: var(--color-text-muted);
}
.page-hero--plain { padding-block: clamp(2rem, 5vw, 3.25rem); }

/* --- Fil d'Ariane --- */
.breadcrumb {
  margin-bottom: 1.4rem;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.breadcrumb li { margin: 0; display: flex; align-items: center; gap: 0.55rem; }
.breadcrumb li + li::before {
  content: "\00B7";
  color: var(--color-border-strong);
}
.breadcrumb a { color: var(--color-text-muted); }
.breadcrumb a:hover { color: var(--color-primary); }
.breadcrumb [aria-current="page"] { color: var(--color-text); font-weight: 500; }


/* --- Images de contenu ---
   Le ratio est impose en CSS et les dimensions sont ecrites dans le HTML :
   la place est reservee avant le chargement, il n'y a donc aucun saut de
   mise en page. */
.media {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-bg-alt);
}
.media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.media--portrait { aspect-ratio: 4 / 5; }
.media--quatre-tiers { aspect-ratio: 4 / 3; }
.media--large { aspect-ratio: 16 / 9; }

/* --- Marqueur [À COMPLÉTER], volontairement visible --- */
.todo {
  display: inline-block;
  padding: 0.45rem 0.7rem;
  background: var(--color-todo-bg);
  border: 1px dashed var(--color-todo-border);
  border-radius: var(--radius-sm);
  color: var(--color-todo-text);
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: 500;
  line-height: 1.5;
}
.todo::before {
  content: "À compléter · ";
  font-weight: 700;
  letter-spacing: 0.02em;
}
.todo--block { display: block; }
p.todo, li .todo { margin-block: 0.35rem; }

/* --- En-tête de section --- */
.section-head { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-head p {
  margin-top: 0.9rem;
  font-size: var(--font-size-lg);
  line-height: 1.6;
  color: var(--color-text-muted);
}
/* Filet orange decoratif, place au-dessus d'un titre de section.
   Aucun libelle : le texte editorial vient des fichiers de contenu,
   l'etape developpement n'en ecrit pas. */
.rule {
  display: block;
  width: 2.5rem;
  height: 4px;
  margin: 0 0 1.35rem;
  background: var(--color-accent);
  border-radius: 2px;
}
.section--dark .section-head p { color: var(--color-text-on-dark-muted); }

/* --- Corps de texte à mesure contrôlée (65 à 70 caractères) --- */
.prose { max-width: var(--max-width-text); }
.prose > * + * { margin-top: 1.1em; }
.prose p, .prose li { line-height: var(--line-height-body); }
.prose h2 { margin-top: 2.2em; }
.prose h3 { margin-top: 1.8em; margin-bottom: 0.6em; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose-lead {
  font-family: var(--font-heading);
  font-size: var(--font-size-xl);
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text);
}

/* --- Grilles de cartes --- */
.card-grid {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  grid-template-columns: 1fr;
}

.card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: clamp(1.35rem, 3vw, 2rem);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.card h3 { margin: 0; font-size: var(--font-size-xl); }
.card p { color: var(--color-text-muted); }

.card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: auto;
  padding-top: 0.5rem;
  min-height: 44px;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
}
.card-link span { border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.card-link svg { width: 1em; height: 1em; transition: transform var(--transition); }
.card-link:hover svg { transform: translateX(3px); }

/* Carte numérotée, pour les listes de raisons */
.card-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: 0.35rem;
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-full);
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-accent-text);
}

/* Carte de service */
.card--service { border-top: 4px solid var(--color-primary); }

/* --- Liste de preuves, parcours --- */
.proof-list {
  display: grid;
  gap: 0.9rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.proof-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  margin: 0;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--color-border);
  line-height: 1.6;
}
.proof-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.proof-list .icon { flex: 0 0 auto; margin-top: 0.3em; color: var(--color-accent); }
.proof-list strong { color: var(--color-text); }

/* --- Liste à puces marquées --- */
.marked-list { margin: 0; padding: 0; list-style: none; }
.marked-list li {
  position: relative;
  margin-bottom: 0.95em;
  padding-left: 1.6rem;
  line-height: var(--line-height-body);
}
.marked-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.6rem;
  height: 3px;
  background: var(--color-accent);
  border-radius: 2px;
}
.marked-list li:last-child { margin-bottom: 0; }

/* --- Méthode CORE : stepper à lettres --- */
.stepper {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.stepper li {
  position: relative;
  margin: 0;
  padding: 0 0 1.75rem 3.6rem;
}
.stepper li:last-child { padding-bottom: 0; }
.stepper li::before {
  content: attr(data-letter);
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  background: var(--color-bg);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-full);
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--color-primary);
  z-index: 1;
}
.section--alt .stepper li::before { background: var(--color-bg-alt); }
.stepper li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 1.3rem;
  top: 2.6rem;
  bottom: 0.4rem;
  width: 2px;
  background: var(--color-border-strong);
}
.stepper h3,
.stepper h4 { margin: 0.3rem 0 0.35rem; font-size: var(--font-size-lg); }
.stepper p { color: var(--color-text-muted); }

/* --- Témoignages --- */
.quote-grid {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  grid-template-columns: 1fr;
}
.quote {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  margin: 0;
  padding: clamp(1.35rem, 3vw, 2rem);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.quote-mark { width: 1.6rem; height: 1.6rem; color: var(--color-accent); flex: 0 0 auto; }
.quote blockquote {
  font-family: var(--font-heading);
  font-size: var(--font-size-lg);
  font-weight: 400;
  line-height: 1.55;
  color: var(--color-text);
}
.quote figcaption {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 0.35rem;
  font-size: var(--font-size-sm);
}
.quote-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-full);
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-primary);
}
.quote-name { display: block; font-weight: 600; color: var(--color-text); }
.quote-role { display: block; color: var(--color-text-muted); font-size: var(--font-size-xs); }

.quote--single { max-width: 46rem; border-left: 4px solid var(--color-accent); }

.quote-disclaimer {
  max-width: 46rem;
  margin-top: clamp(1.5rem, 3vw, 2rem);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* --- Encadré d'information --- */
.note {
  padding: clamp(1.1rem, 3vw, 1.6rem);
  background: var(--color-bg-alt);
  border-left: 4px solid var(--color-primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.note h3 { margin: 0 0 0.5rem; font-size: var(--font-size-lg); }
.note p { color: var(--color-text-muted); }
.note--accent { border-left-color: var(--color-accent); background: var(--color-accent-soft); }
.note--plain {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
}

/* --- Liste de spécifications (cadre de l'accompagnement) --- */
.spec-list { margin: 0; }
.spec-list > div {
  display: grid;
  gap: 0.25rem 1.5rem;
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--color-border);
}
.spec-list > div:first-child { padding-top: 0; }
.spec-list > div:last-child { border-bottom: 0; }
.spec-list dt {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.spec-list dd { margin: 0; }

/* --- FAQ, accordéon natif --- */
.faq { max-width: 46rem; }
.faq details { border-bottom: 1px solid var(--color-border); }
.faq details:first-of-type { border-top: 1px solid var(--color-border); }
.faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  min-height: 56px;
  padding: 1.1rem 0;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { margin: 0; font-size: var(--font-size-lg); font-weight: 600; }
.faq summary:hover h3 { color: var(--color-primary); }
.faq details[open] summary h3 { color: var(--color-primary); }
.faq-icon {
  position: relative;
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.35em;
}
.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--color-accent);
  border-radius: 2px;
  transform: translateY(-50%);
  transition: transform var(--transition), opacity var(--transition);
}
.faq-icon::after { transform: translateY(-50%) rotate(90deg); }
.faq details[open] .faq-icon::after { transform: translateY(-50%) rotate(0deg); opacity: 0; }
.faq-answer { padding-bottom: 1.25rem; color: var(--color-text-muted); }
.faq-answer > *:last-child { margin-bottom: 0; }

/* --- Formulaire --- */
.form-wrap {
  padding: clamp(1.35rem, 3.5vw, 2.25rem);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.form-grid { display: grid; gap: 1.15rem; }

.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field label { font-size: var(--font-size-sm); font-weight: 600; color: var(--color-text); }
.field-hint { font-size: var(--font-size-xs); line-height: 1.5; color: var(--color-text-muted); }
.required { color: var(--color-accent-text); }

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field select,
.field textarea {
  width: 100%;
  min-height: 52px;
  padding: 0.75rem 0.9rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: 1.5;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.field textarea { min-height: 11rem; resize: vertical; }
.field select {
  appearance: none;
  padding-right: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%234B5060' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px 8px;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible { outline: var(--focus-ring); outline-offset: 1px; }
.field ::placeholder { color: #8b8f9c; }

.field-consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: start;
  padding: 1rem;
  background: var(--color-bg-alt);
  border-radius: var(--radius-sm);
}
.field-consent input[type="checkbox"] {
  width: 1.35rem;
  height: 1.35rem;
  margin: 0.15rem 0 0;
  accent-color: var(--color-primary);
  flex: 0 0 auto;
}
.field-consent label { font-size: var(--font-size-sm); font-weight: 400; line-height: 1.55; }

.form-legal {
  margin: 0;
  font-size: var(--font-size-xs);
  line-height: 1.6;
  color: var(--color-text-muted);
}

.form-result { margin: 0; padding: 0; font-size: var(--font-size-sm); line-height: 1.6; }
.form-result:not(:empty) {
  padding: 0.95rem 1.1rem;
  border-radius: var(--radius-sm);
  border-left: 4px solid transparent;
}
.form-result.is-success {
  background: #edf7ee;
  border-left-color: #2c7a39;
  color: #1e5527;
}
.form-result.is-error {
  background: #fdecec;
  border-left-color: #b3261e;
  color: #8c1d18;
}

.spinner {
  width: 1.05em;
  height: 1.05em;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: currentColor;
  border-radius: var(--radius-full);
  animation: spin 0.7s linear infinite;
}

.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Coordonnées directes --- */
.contact-list { display: grid; gap: 1.35rem; margin: 0; padding: 0; list-style: none; }
.contact-list li { display: flex; gap: 0.9rem; margin: 0; }
.contact-list .icon { flex: 0 0 auto; margin-top: 0.28em; color: var(--color-accent); }
.contact-list b {
  display: block;
  margin-bottom: 0.15rem;
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.contact-list a { font-weight: 500; }
.contact-list p { margin: 0; }
.contact-note { font-size: var(--font-size-sm); color: var(--color-text-muted); }

/* Les adresses email et les URL sont des chaînes insécables plus larges que
   la colonne sur petit écran. « overflow-wrap: break-word » ne réduit pas la
   taille min-content d'un enfant flex ou grid : il faut « anywhere », plus
   min-width: 0 sur les conteneurs, sinon la page déborde sous 360 px. */
.contact-list li > div,
.footer-contact-line > span,
.footer-contact-line > a,
.spec-list dt,
.spec-list dd { min-width: 0; }

a[href^="mailto:"],
a[href^="tel:"],
a[href^="http"] { overflow-wrap: anywhere; }

/* --- État vide, blog --- */
.empty-state {
  max-width: 40rem;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.empty-state h2 { margin-top: 0; font-size: var(--font-size-xl); }

/* --- Pages légales --- */
.legal { max-width: 44rem; }
.legal h2 {
  margin-top: 2.4em;
  padding-top: 1.4rem;
  border-top: 1px solid var(--color-border);
  font-size: var(--font-size-xl);
}
.legal h2:first-of-type { margin-top: 1.6em; }
.legal h3 { margin-top: 1.7em; font-size: var(--font-size-lg); }
.legal dl { margin: 0 0 1.1em; }
.legal .meta { font-size: var(--font-size-sm); color: var(--color-text-muted); }

/* --- Icônes inline --- */
.icon {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon--sm { width: 1rem; height: 1rem; }
.icon--fill { fill: currentColor; stroke: none; }

/* ============================================
   5. ANIMATIONS

   Le brief-design.md interdit explicitement les apparitions au
   défilement : « Un lecteur épuisé n'a pas à attendre qu'un texte
   veuille bien s'afficher. » Les classes .fade-in / .slide-up /
   .slide-left / .slide-right / .visible du gabarit standard ne sont
   donc pas implémentées, et script.js ne contient aucun
   IntersectionObserver. Il ne reste ici que le retour visuel
   nécessaire au formulaire.
   ============================================ */

@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================
   6. UTILITAIRES
   ============================================ */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.text-center { text-align: center; }
.text-muted { color: var(--color-text-muted); }
.text-sm { font-size: var(--font-size-sm); }
.measure { max-width: var(--max-width-text); }
.mt-0 { margin-top: 0; }
.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.mb-0 { margin-bottom: 0; }
.stack > * + * { margin-top: 1.1em; }
.section-padding { padding-block: var(--section-padding); }

/* ============================================
   7. MEDIA QUERIES, mobile-first
   ============================================ */

@media (min-width: 640px) {
  .card-grid--2 { grid-template-columns: repeat(2, 1fr); }
  /* Les grilles de 3 passent par 2 colonnes sur tablette : 1 puis 3
     directement laisserait une colonne unique jusqu'à 960 px. */
  .card-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .quote-grid { grid-template-columns: repeat(2, 1fr); }
  .spec-list > div { grid-template-columns: 12rem 1fr; }
}

@media (min-width: 960px) {
  :root { --header-height: 80px; }

  .nav-list { display: flex; }
  .main-nav .nav-cta {
    display: inline-flex;
    margin-left: 0.75rem;
    min-height: 46px;
    padding: 0.6rem 1.15rem;
  }
  .nav-toggle { display: none; }
  .nav-panel, .nav-overlay { display: none; }
  .brand img { height: 44px; }

  .hero-grid { grid-template-columns: 1.15fr 0.85fr; }
  .hero-media { margin-left: auto; }
  .page-hero-grid { grid-template-columns: 1.15fr 0.85fr; }
  .page-hero-media { max-width: 27rem; margin-left: auto; }

  .card-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .quote-grid--3 { grid-template-columns: repeat(3, 1fr); }

  .split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
  }
  .split--wide-first { grid-template-columns: 1.2fr 0.8fr; }

  .contact-split {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: clamp(2rem, 5vw, 3.5rem);
    align-items: start;
  }

  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(2rem, 4vw, 3.5rem); }

  .form-grid--2 { grid-template-columns: 1fr 1fr; }
  .field--full { grid-column: 1 / -1; }

  .stepper { grid-template-columns: repeat(2, 1fr); gap: 0 clamp(1.5rem, 3vw, 2.5rem); }
  .stepper li { padding-bottom: 2rem; }
  .stepper li:not(:last-child)::after { display: none; }
}

/* --- Impression --- */
@media print {
  .site-header, .nav-panel, .nav-overlay, .bridge, .btn, .cta-block {
    display: none !important;
  }
  body { font-size: 11pt; color: #000; background: #fff; }
  .site-footer { background: #fff; color: #000; }
  .site-footer a { color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
}