/* ==========================================================================
   Kristell Calvez — feuille de style principale
   Site statique (remplacement de WordPress / Divi)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens de design
   -------------------------------------------------------------------------- */
:root {
  /* Couleurs reprises de la charte d'origine */
  --accent: #19ab8e;
  --accent-dark: #14907a;
  --accent-soft: rgba(25, 171, 142, 0.05);
  --accent-tint: rgba(25, 171, 142, 0.12);
  --navy: #0e0f30;
  --mint: #f1fcfc;
  --cream: #fcf9f5;
  --text: #323232;
  --text-light: #5d5f6b;
  --white: #ffffff;
  --border: rgba(14, 15, 48, 0.12);

  /* Typographie */
  --font-title: "Newsreader", Georgia, "Times New Roman", serif;
  --font-body: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Rythme */
  --container: 1240px;
  --container-narrow: 860px;
  --gutter: 24px;
  --section-y: 96px;
  --radius: 18px;
  --radius-lg: 28px;
  --shadow: 0 18px 50px rgba(14, 15, 48, 0.08);
  --shadow-lg: 0 28px 70px rgba(14, 15, 48, 0.14);
  --header-h: 96px;
}

/* --------------------------------------------------------------------------
   2. Réinitialisation
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 20px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.7;
  color: var(--text);
  background: var(--white);
  overflow-x: hidden;
}

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

a { color: inherit; text-decoration: none; }

button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }

ul, ol { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-title);
  font-weight: 500;
  line-height: 1.14;
  margin: 0 0 0.5em;
  color: var(--navy);
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.4rem, 5.2vw, 4rem); }
h2 { font-size: clamp(1.9rem, 3.7vw, 2.9rem); }
h3 { font-size: clamp(1.35rem, 2.2vw, 1.75rem); }
h4 { font-size: 1.2rem; }

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

strong, b { font-weight: 700; }

::selection { background: var(--accent); color: #fff; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   3. Utilitaires de mise en page
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: 64px; }

.section--mint  { background: var(--mint); }
.section--navy  { background: var(--navy); color: rgba(255, 255, 255, 0.86); }
.section--soft  { background: var(--accent-soft); }
.section--cream { background: var(--cream); }

.section--navy h1,
.section--navy h2,
.section--navy h3,
.section--navy h4 { color: var(--cream); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--navy);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* Suréti­quette de section */
.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}

.section--navy .eyebrow { color: #58d8bd; }

.lead {
  font-size: 1.16rem;
  line-height: 1.75;
  color: var(--text-light);
}

.section--navy .lead { color: rgba(255, 255, 255, 0.78); }

.section-head { max-width: 760px; margin-bottom: 56px; }
.section-head--center { margin-inline: auto; text-align: center; }

.accent { color: var(--accent); }
.serif-italic { font-family: var(--font-title); font-style: italic; }

/* --------------------------------------------------------------------------
   4. Boutons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 32px;
  border-radius: 50px;
  font-family: var(--font-body);
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  transition: transform 0.22s ease, background-color 0.22s ease,
              color 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 10px 26px rgba(25, 171, 142, 0.3);
}
.btn--primary:hover { background: var(--accent-dark); }

.btn--outline {
  border: 2px solid var(--accent);
  color: var(--accent);
  background: transparent;
}
.btn--outline:hover { background: var(--accent); color: #fff; }

.btn--light {
  border: 2px solid rgba(255, 255, 255, 0.65);
  color: #fff;
}
.btn--light:hover { background: #fff; color: var(--navy); border-color: #fff; }

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

/* --------------------------------------------------------------------------
   5. En-tête / navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--mint);
  border-bottom: 1px solid rgba(14, 15, 48, 0.06);
}

.site-header.is-scrolled { box-shadow: 0 6px 24px rgba(14, 15, 48, 0.08); }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

.brand img { width: 46px; height: auto; }

.brand__name {
  font-family: var(--font-body);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--navy);
  white-space: nowrap;
}

.nav { display: flex; align-items: center; gap: 6px; }

.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--navy);
  transition: color 0.2s ease;
}

.nav__link:hover,
.nav__link[aria-current="page"] { color: var(--accent); }

.nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
}

/* Sous-menu « Mes prestations » */
.nav__item { position: relative; }

.nav__caret {
  width: 10px;
  transition: transform 0.25s ease;
  flex-shrink: 0;
}

.nav__item.is-open > .nav__link .nav__caret { transform: rotate(180deg); }

.subnav {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 310px;
  padding: 10px;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
}

.nav__item:hover > .subnav,
.nav__item:focus-within > .subnav,
.nav__item.is-open > .subnav {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.subnav a {
  display: block;
  padding: 11px 16px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--navy);
  transition: background-color 0.18s ease, color 0.18s ease;
}

.subnav a:hover { background: var(--mint); color: var(--accent); }

.header__cta { flex-shrink: 0; }

/* Le bouton « Contact » de la barre disparaît sous 980 px. Cette entrée le
   remplace au bas du menu déroulant : sur téléphone, la prise de contact reste
   à un geste de distance, sans surcharger l'en-tête. */
.nav__item--cta { display: none; }

/* Bouton hamburger */
.nav-toggle {
  display: none;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  align-items: center;
  justify-content: center;
  background: rgba(14, 15, 48, 0.05);
}

.nav-toggle span {
  display: block;
  position: relative;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--navy);
  transition: background-color 0.2s ease;
}

.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--navy);
  transition: transform 0.25s ease, top 0.25s ease;
}

.nav-toggle span::before { top: -7px; }
.nav-toggle span::after { top: 7px; }

.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 660px;
  padding-block: 110px;
  background: var(--navy) center / cover no-repeat;
  background-image: var(--hero-img);
  color: var(--cream);
  isolation: isolate;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    100deg,
    rgba(14, 15, 48, 0.94) 0%,
    rgba(14, 15, 48, 0.86) 38%,
    rgba(14, 15, 48, 0.35) 68%,
    rgba(14, 15, 48, 0.15) 100%
  );
}

.hero__inner { max-width: 660px; }

.hero__eyebrow {
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #58d8bd;
  margin-bottom: 18px;
}

.hero h1 { color: var(--cream); margin-bottom: 28px; }

.hero p { color: rgba(255, 255, 255, 0.86); font-size: 1.1rem; }

.hero__punch {
  margin-top: 26px;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #58d8bd;
}

/* Hero secondaire (pages intérieures) */
.page-hero {
  position: relative;
  padding-block: 120px 104px;
  background: var(--navy) center / cover no-repeat;
  background-image: var(--hero-img);
  color: var(--cream);
  isolation: isolate;
}

.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    100deg,
    rgba(14, 15, 48, 0.95) 0%,
    rgba(14, 15, 48, 0.8) 55%,
    rgba(14, 15, 48, 0.45) 100%
  );
}

.page-hero--plain { background: var(--navy); }

/* Bandeau éclairci (page audit de gouvernance). Sa photo a été assombrie et
   bleuie à la fabrication : sous le voile commun, la salle disparaissait dans la
   pénombre. Deux corrections, et une seule des deux ne suffisait pas :
   l'image est réexposée (gamma 0,74 sur la seule partie photo, l'aplat bleu de
   gauche reste #0e0f30), et le voile s'arrête à 0,30 au lieu de 0,45 — la même
   valeur que le bandeau de la page formation. */
.page-hero--clair::before {
  background: linear-gradient(
    100deg,
    rgba(14, 15, 48, 0.95) 0%,
    rgba(14, 15, 48, 0.8) 55%,
    rgba(14, 15, 48, 0.3) 100%
  );
}

/* Page couple dirigeant. Même principe, poussé d'un cran : la photo est en
   contre-jour et le visage de l'homme reste dans l'ombre. Réexposition plus
   franche (gamma 0,68) et voile à 0,22. Valeurs retenues le 8 septembre 2026
   après comparaison avec une variante plus douce (0,30 / gamma 0,80). */
.page-hero--tres-clair::before {
  background: linear-gradient(
    100deg,
    rgba(14, 15, 48, 0.95) 0%,
    rgba(14, 15, 48, 0.78) 52%,
    rgba(14, 15, 48, 0.22) 100%
  );
}

/* Page associés. Le bandeau utilise exactement le même dégradé que toutes les
   autres pages : aucune surcharge, la photo se voit en transparence de la même
   façon partout. Le seul réglage propre à cette page est la largeur de la
   colonne de texte, resserrée à 580 px au lieu de 780, pour que le titre
   s'arrête avant les visages. C'est la largeur du texte qui crée l'espacement,
   pas le dégradé ni le cadrage de l'image : les deux sujets sont indépendants. */
/* Voile localisé, uniquement sur le quart haut-gauche du bandeau, là où une
   troisième personne apparaît derrière le titre. Il monte au maximum à cet
   endroit précis et s'éteint complètement avant le milieu : partout ailleurs,
   et notamment sur les deux hommes, le rendu reste celui du dégradé commun. */
.page-hero--narrow::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    ellipse 34% 78% at 4% 34%,
    rgba(14, 15, 48, 0.97) 0%,
    rgba(14, 15, 48, 0.9) 45%,
    rgba(14, 15, 48, 0) 100%
  );
}

.page-hero--narrow .page-hero__inner { max-width: 580px; }

/* En colonne unique, le texte reprend toute la largeur disponible */
@media (max-width: 980px) {
  .page-hero--narrow .page-hero__inner { max-width: none; }
}
.page-hero__inner { max-width: 780px; }
.page-hero h1 { color: var(--cream); }
.page-hero p { color: rgba(255, 255, 255, 0.82); font-size: 1.1rem; }

/* --------------------------------------------------------------------------
   7. Grilles et cartes
   -------------------------------------------------------------------------- */
.grid { display: grid; gap: 28px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.split--media-right { direction: ltr; }

.card {
  padding: 34px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow);
  border-color: transparent;
}

.card h3 { margin-bottom: 12px; }
.card p { color: var(--text-light); }

.card__icon {
  width: 56px;
  height: 56px;
  margin-bottom: 22px;
  object-fit: contain;
  object-position: left center;
}

.section--navy .card {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.14);
}
.section--navy .card p { color: rgba(255, 255, 255, 0.75); }

/* Carte prestation numérotée */
.offer {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 40px 34px 34px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.offer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.offer:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.offer:hover::before { transform: scaleX(1); }

.offer__num {
  font-family: var(--font-title);
  font-size: 2.6rem;
  line-height: 1;
  color: var(--accent-tint);
  margin-bottom: 14px;
}

.offer__kicker {
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}

.offer h3 { font-size: 1.4rem; margin-bottom: 18px; }

.offer__list { margin-bottom: 26px; }

.offer__list li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 9px;
  color: var(--text-light);
  font-size: 0.98rem;
}

.offer__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent-tint);
  box-shadow: inset 0 0 0 4px var(--accent);
}

.offer .btn { margin-top: auto; align-self: flex-start; }

/* Liste « Vous reconnaissez-vous ? » — bulles de questions */
.quotes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }

.quote-bubble {
  position: relative;
  padding: 24px 28px;
  background: #fff;
  border-radius: 20px 20px 20px 4px;
  box-shadow: 0 10px 30px rgba(14, 15, 48, 0.06);
  font-size: 1.02rem;
  font-style: italic;
  color: var(--navy);
}

.quote-bubble::before {
  content: "“";
  position: absolute;
  top: 6px;
  left: 12px;
  font-family: var(--font-title);
  font-size: 2.4rem;
  line-height: 1;
  color: var(--accent-tint);
}

/* Liste à puces avec icône check */
.check-list li {
  position: relative;
  padding-left: 34px;
  margin-bottom: 14px;
  line-height: 1.6;
}

.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='11' fill='black'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='11' fill='black'/></svg>") center/contain no-repeat;
}

.check-list li::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 11px;
  width: 10px;
  height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}

.section--navy .check-list li { color: rgba(255, 255, 255, 0.82); }

/* Liste « alerte » (points de douleur) */
.warn-list li {
  position: relative;
  padding-left: 32px;
  margin-bottom: 13px;
}

.warn-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: #e0685f;
  transform: rotate(45deg);
}

/* Étapes numérotées de la méthode */
.steps { counter-reset: step; display: grid; gap: 22px; }

.step {
  position: relative;
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 24px;
  align-items: start;
  padding: 30px 32px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.step:hover { transform: translateX(5px); box-shadow: var(--shadow); }

.step__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--accent-soft);
  font-family: var(--font-title);
  font-size: 1.5rem;
  color: var(--accent);
}

.step h3 { font-size: 1.28rem; margin-bottom: 8px; }
.step p { color: var(--text-light); }

.section--navy .step {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.14);
}
.section--navy .step p { color: rgba(255, 255, 255, 0.75); }
.section--navy .step__num { background: rgba(88, 216, 189, 0.14); color: #58d8bd; }

/* Colonnes d'impacts */
.impact {
  padding: 32px;
  border-radius: var(--radius-lg);
  background: #fff;
  border-top: 5px solid var(--accent);
  box-shadow: 0 12px 34px rgba(14, 15, 48, 0.06);
}

.impact h3 { font-size: 1.25rem; margin-bottom: 20px; }

/* --------------------------------------------------------------------------
   8. Compteurs / chiffres clés
   -------------------------------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; text-align: center; }

.stat img { width: 62px; height: 62px; margin: 0 auto 20px; object-fit: contain; }

.stat__value {
  font-family: var(--font-title);
  font-size: clamp(2.4rem, 4vw, 3.2rem);
  font-weight: 700;
  line-height: 1;
  color: #58d8bd;
  margin-bottom: 12px;
}

/* Le :not() est indispensable : sans lui, cette règle est plus spécifique que
   .stat__value et écrase la taille et la couleur des chiffres. */
.stat p:not(.stat__value) { color: rgba(255, 255, 255, 0.78); font-size: 1rem; }

/* Statistiques inline (76 % / 1 dirigeant sur 2) */
.figure-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; margin-block: 34px; }

.figure {
  padding: 26px 28px;
  border-left: 4px solid var(--accent);
  background: var(--accent-soft);
  border-radius: 0 16px 16px 0;
}

.figure strong {
  display: block;
  font-family: var(--font-title);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.2;
  margin-bottom: 4px;
}

.figure span { color: var(--text-light); font-size: 0.98rem; }

.figure__source {
  display: block;
  margin-top: 10px;
  font-size: 0.78rem;
  font-style: normal;
  line-height: 1.45;
  color: var(--text-light);
  opacity: 0.75;
}

/* --------------------------------------------------------------------------
   9. Témoignages
   -------------------------------------------------------------------------- */
.testimonials { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }

.testimonial {
  position: relative;
  padding: 44px 38px 38px;
  background: var(--mint);
  border-radius: var(--radius-lg);
  font-family: var(--font-title);
  font-size: 1.3rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--navy);
}

.testimonial::before {
  content: "“";
  position: absolute;
  top: 12px;
  left: 26px;
  font-family: var(--font-title);
  font-size: 4rem;
  line-height: 1;
  color: var(--accent-tint);
}

/* --------------------------------------------------------------------------
   10. Bandeau d'appel à l'action
   -------------------------------------------------------------------------- */
.cta-band { text-align: center; }
.cta-band h2 { max-width: 720px; margin-inline: auto; }
.cta-band p { max-width: 620px; margin-inline: auto; }

/* --------------------------------------------------------------------------
   11. Partenaires
   -------------------------------------------------------------------------- */
.partners {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 56px;
}

.partners img {
  max-height: 62px;
  width: auto;
  filter: grayscale(1);
  opacity: 0.62;
  transition: filter 0.28s ease, opacity 0.28s ease;
}

.partners img:hover { filter: grayscale(0); opacity: 1; }

/* --------------------------------------------------------------------------
   12. Articles / actualités
   -------------------------------------------------------------------------- */
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }

.post-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.post-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }

.post-card__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--mint); }

.post-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.post-card:hover .post-card__media img { transform: scale(1.05); }

.post-card__body { display: flex; flex-direction: column; flex: 1; padding: 28px; }

.post-card p.post-card__date {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: 10px;
}

.post-card h3 { font-size: 1.24rem; margin-bottom: 12px; }

.post-card p { color: var(--text-light); font-size: 0.98rem; margin-bottom: 22px; }

.post-card__link {
  margin-top: auto;
  align-self: flex-start;
  font-weight: 800;
  font-size: 0.92rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
}

.post-card__link::after { content: " →"; transition: margin-left 0.2s ease; }
.post-card:hover .post-card__link::after { margin-left: 4px; }

/* Corps d'article */
.article-body { max-width: 760px; margin-inline: auto; }
.article-body > * + * { margin-top: 1.2em; }

.article-body h2 {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  margin-top: 1.9em;
  margin-bottom: 0.55em;
}

.article-body h3 {
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  margin-top: 1.6em;
  margin-bottom: 0.5em;
}

.article-body p { font-size: 1.06rem; line-height: 1.82; }

.article-body ul { margin-block: 1.2em; }

.article-body ul li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 11px;
}

.article-body ul li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 12px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

.article-body blockquote {
  margin: 2em 0;
  padding: 26px 32px;
  border-left: 4px solid var(--accent);
  background: var(--accent-soft);
  border-radius: 0 16px 16px 0;
  font-family: var(--font-title);
  font-size: 1.24rem;
  font-style: italic;
  color: var(--navy);
}

.article-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

.article-body img { border-radius: var(--radius); margin-block: 2em; }

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 20px;
}

.tag {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 50px;
  background: rgba(88, 216, 189, 0.16);
  color: #58d8bd;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sources { font-size: 0.92rem; color: var(--text-light); word-break: break-word; }
.sources a { color: var(--accent); }

/* --------------------------------------------------------------------------
   13. Formulaire de contact
   -------------------------------------------------------------------------- */
.contact-layout { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 60px; align-items: start; }

.contact-info__item { display: flex; gap: 18px; margin-bottom: 30px; }

.contact-info__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--accent-soft);
  color: var(--accent);
}

.contact-info__icon svg { width: 22px; height: 22px; }

.contact-info__item h3 { font-size: 1.05rem; margin-bottom: 3px; }
.contact-info__item a { color: var(--accent); font-weight: 700; }
.contact-info__item p { color: var(--text-light); font-size: 0.96rem; }

.form {
  padding: 42px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.form__row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }

.field { margin-bottom: 22px; }

.field label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--navy);
}

.field .req { color: #e0685f; }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 14px 16px;
  font-family: inherit;
  font-size: 1rem;
  color: var(--text);
  background: var(--mint);
  border: 2px solid transparent;
  border-radius: 12px;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.field textarea { min-height: 150px; resize: vertical; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--accent);
}

.field--check { display: flex; align-items: flex-start; gap: 12px; }

.field--check input { width: 20px; height: 20px; flex-shrink: 0; margin-top: 3px; accent-color: var(--accent); }

.field--check label { margin: 0; font-weight: 500; font-size: 0.95rem; color: var(--text-light); }

.field--check a { color: var(--accent); text-decoration: underline; }

.form__note { margin-top: 18px; font-size: 0.86rem; color: var(--text-light); }

.form__status {
  margin-top: 18px;
  padding: 14px 18px;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 600;
  display: none;
}

.form__status.is-visible { display: block; }
.form__status--ok { background: var(--accent-soft); color: var(--accent-dark); }
.form__status--err { background: rgba(224, 104, 95, 0.1); color: #c4453b; }

/* --------------------------------------------------------------------------
   14. Pages légales
   -------------------------------------------------------------------------- */
.legal { max-width: 820px; margin-inline: auto; }
.legal h2 { font-size: 1.65rem; margin-top: 2em; }
.legal h3 { font-size: 1.2rem; margin-top: 1.6em; }
.legal a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.legal ul { margin-block: 1em; }
.legal ul li { position: relative; padding-left: 26px; margin-bottom: 10px; }
.legal ul li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 11px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

.legal table { width: 100%; border-collapse: collapse; margin-block: 1.4em; font-size: 0.95rem; }
.legal th, .legal td { padding: 12px 14px; border: 1px solid var(--border); text-align: left; vertical-align: top; }
.legal th { background: var(--mint); font-weight: 700; color: var(--navy); }

/* Les sources d'articles citent des adresses complètes. Sans point de coupure,
   un lien de 305 px pousse la page hors de l'écran sur un téléphone de 320 px :
   on autorise la césure, mais seulement quand le mot ne tient pas. */
p a, li a, dd a, td a { overflow-wrap: break-word; }

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* --------------------------------------------------------------------------
   15. Pied de page
   -------------------------------------------------------------------------- */
.site-footer { background: var(--navy); color: rgba(255, 255, 255, 0.72); padding-block: 76px 0; }

.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 56px;
  padding-bottom: 56px;
}

.footer__brand { display: inline-flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.footer__brand img { width: 46px; }
.footer__brand span {
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream);
}

.site-footer h2 {
  font-family: var(--font-body);
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #58d8bd;
  margin-bottom: 22px;
}

.footer__links li { margin-bottom: 12px; }

.footer__links a { color: rgba(255, 255, 255, 0.72); transition: color 0.2s ease; }
.footer__links a:hover { color: #58d8bd; }

.footer__contact a { color: rgba(255, 255, 255, 0.9); font-weight: 700; }
.footer__contact a:hover { color: #58d8bd; }
.footer__contact p { margin-bottom: 12px; }

.socials { display: flex; gap: 12px; margin-top: 24px; }

.socials a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  transition: background-color 0.22s ease, transform 0.22s ease;
}

.socials a:hover { background: var(--accent); transform: translateY(-3px); }
.socials svg { width: 18px; height: 18px; }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding-block: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.55);
}

.footer__bottom a { color: rgba(255, 255, 255, 0.72); }
.footer__bottom a:hover { color: #58d8bd; }

/* --------------------------------------------------------------------------
   16. Bandeau cookies
   -------------------------------------------------------------------------- */
.cookie-banner {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 200;
  width: min(560px, calc(100vw - 32px));
  transform: translate(-50%, 140%);
  padding: 30px 32px;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.cookie-banner.is-visible { transform: translate(-50%, 0); }

.cookie-banner h3 { font-size: 1.2rem; text-align: center; margin-bottom: 14px; }
.cookie-banner p { font-size: 0.92rem; color: var(--text-light); margin-bottom: 22px; }

.cookie-banner__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.cookie-banner__actions .btn { flex: 1; padding-block: 12px; font-size: 0.92rem; }

.cookie-banner__link {
  display: block;
  margin-top: 16px;
  text-align: center;
  font-size: 0.86rem;
  color: var(--accent);
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   17. Retour en haut
   -------------------------------------------------------------------------- */
.to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  box-shadow: 0 10px 26px rgba(25, 171, 142, 0.34);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity 0.28s ease, transform 0.28s ease, visibility 0.28s;
}

.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--accent-dark); }
.to-top svg { width: 20px; height: 20px; }

/* --------------------------------------------------------------------------
   18. Animations d'apparition
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.is-in { opacity: 1; transform: none; }

/* Les photos de bandeau font 2560 px de large : sur un téléphone, c'est cinq
   fois plus de pixels que l'écran n'en affiche, pour 165 à 217 Ko chacune. La
   page porte l'adresse des deux tailles dans --hero-img et --hero-img-sm ;
   sous 820 px, on sert la petite. Le repli garde la grande si une page n'a pas
   encore de variante. */
@media (max-width: 820px) {
  .hero,
  .page-hero { background-image: var(--hero-img-sm, var(--hero-img)); }
}

/* --------------------------------------------------------------------------
   19. Adaptatif
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .split { gap: 44px; }
  .contact-layout { grid-template-columns: 1fr; gap: 44px; }
}

@media (max-width: 980px) {
  :root { --section-y: 72px; --header-h: 80px; }

  .nav-toggle { display: flex; }

  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-height: calc(100dvh - var(--header-h));
    padding: 20px var(--gutter) 34px;
    background: var(--mint);
    border-top: 1px solid rgba(14, 15, 48, 0.08);
    box-shadow: 0 20px 40px rgba(14, 15, 48, 0.1);
    overflow-y: auto;
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.28s ease, transform 0.28s ease, visibility 0.28s;
  }

  .nav.is-open { opacity: 1; visibility: visible; transform: none; }

  .nav__link { padding: 14px 4px; font-size: 1.05rem; border-radius: 0; }
  .nav__link[aria-current="page"]::after { display: none; }

  .nav__item { border-bottom: 1px solid rgba(14, 15, 48, 0.07); }

  .subnav {
    position: static;
    min-width: 0;
    padding: 0 0 10px 14px;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
  }

  .nav__item.is-open > .subnav { display: block; }
  .nav__item:hover > .subnav { display: none; }
  .nav__item.is-open:hover > .subnav { display: block; }

  .subnav a { padding: 10px 12px; }

  .header__cta { display: none; }

  /* Le bouton Contact reprend sa place au bas du menu déroulant */
  .nav__item--cta { display: block; margin-top: 22px; border-bottom: 0; }
  .nav__item--cta .btn { width: 100%; }

  /* Liens du pied de page : 22 px de haut et serrés, ils étaient difficiles à
     viser au pouce. Le remplissage vertical les porte à ~44 px, la cible
     minimale recommandée, sans changer l'apparence du texte. */
  .footer__links li { margin-bottom: 0; }
  .footer__links a,
  .footer__contact a { display: inline-block; padding-block: 11px; }
  .footer__contact p { margin-bottom: 0; }

  .grid--4, .grid--3, .grid--2, .post-grid, .split, .stats,
  .quotes, .testimonials, .figure-row, .form__row { grid-template-columns: 1fr; }

  .split { gap: 36px; }
  .stats { gap: 44px; }

  .hero { min-height: 0; padding-block: 84px; }
  .hero__inner { max-width: none; }
  .hero::before {
    background: linear-gradient(
      175deg,
      rgba(14, 15, 48, 0.9) 0%,
      rgba(14, 15, 48, 0.94) 60%,
      rgba(14, 15, 48, 0.97) 100%
    );
  }

  .page-hero { padding-block: 76px 68px; }

  /* En colonne unique, le texte reprend toute la largeur et passe donc sur la
     photo. Le voile éclairci du bandeau audit se redresse et remonte, sinon les
     dernières lignes se lisent sur la partie claire de l'image. */
  .page-hero--clair::before,
  .page-hero--tres-clair::before {
    background: linear-gradient(
      175deg,
      rgba(14, 15, 48, 0.86) 0%,
      rgba(14, 15, 48, 0.91) 55%,
      rgba(14, 15, 48, 0.94) 100%
    );
  }

  .footer__grid { grid-template-columns: 1fr; gap: 40px; }

  .partners { gap: 36px; }
  .partners img { max-height: 48px; }
}

@media (max-width: 620px) {
  :root { --gutter: 18px; --section-y: 60px; }

  body { font-size: 16px; }

  .card, .offer, .form { padding: 26px 22px; }
  .step { grid-template-columns: 1fr; gap: 16px; padding: 24px 22px; }
  .testimonial { padding: 38px 26px 28px; font-size: 1.12rem; }
  .btn { width: 100%; }
  .btn-row { flex-direction: column; }
  .cookie-banner { padding: 24px 22px; }
  .cookie-banner__actions { flex-direction: column; }
  .footer__bottom { flex-direction: column; text-align: center; }
}

/* Sur écran tactile, la case à cocher du formulaire passe de 20 à 24 px et son
   libellé gagne du remplissage : c'est le libellé, bien plus large, qui sert de
   cible réelle, mais la case elle-même devait rester visable. */
@media (pointer: coarse) {
  .field--check { align-items: center; padding-block: 4px; }
  .field--check input { width: 24px; height: 24px; margin-top: 0; }
  .field--check label { padding-block: 8px; }
}

/* Tableau des cookies. Quatre colonnes dans 340 px, cela donnait un mot par
   ligne sur une hauteur d'écran : illisible, même en faisant défiler. On reprend
   le principe déjà utilisé par la fiche de formation — une ligne devient une
   carte —, l'en-tête de colonne repassant au-dessus de chaque valeur. */
.cookie-table { width: 100%; border-collapse: collapse; font-size: 0.98rem; }
.cookie-table th,
.cookie-table td {
  padding: 14px 18px;
  border: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}
.cookie-table th {
  background: var(--mint);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--navy);
}
.cookie-table td { background: #fff; color: var(--text-light); }

@media (max-width: 700px) {
  /* L'en-tête de colonne est repris par data-label devant chaque valeur : on
     masque la ligne d'en-tête à l'œil en la gardant lisible aux lecteurs
     d'écran, comme le fait .sr-only ailleurs sur le site. */
  .cookie-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .cookie-table,
  .cookie-table tbody,
  .cookie-table tr,
  .cookie-table td { display: block; width: auto; }
  .cookie-table tr {
    margin-bottom: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
  }
  .cookie-table td { border: 0; padding: 12px 18px; }
  .cookie-table td + td { padding-top: 0; }
  .cookie-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 3px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--navy);
  }
  .table-wrap { overflow-x: visible; }
}

/* --------------------------------------------------------------------------
   20. Impression et préférences d'accessibilité
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

@media print {
  .site-header, .site-footer, .cookie-banner, .to-top, .btn-row { display: none !important; }
  body { color: #000; }
  .section { padding-block: 20px; }
}

/* --------------------------------------------------------------------------
   Questions fréquentes (FAQ)
   -------------------------------------------------------------------------- */
.faq { display: flex; flex-direction: column; gap: 14px; }

.faq__item {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.faq__item[open] { border-color: var(--accent); box-shadow: var(--shadow); }

.faq__item summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 26px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-title);
  font-size: 1.12rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.4;
}

.faq__item summary::-webkit-details-marker { display: none; }

.faq__item summary::after {
  content: "";
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  margin-top: 6px;
  border-right: 2.5px solid var(--accent);
  border-bottom: 2.5px solid var(--accent);
  transform: rotate(45deg);
  transition: transform 0.25s ease;
}

.faq__item[open] summary::after { transform: rotate(-135deg); }

.faq__item summary:hover { color: var(--accent); }

.faq__answer { padding: 0 26px 24px; }

.faq__answer p { color: var(--text-light); margin: 0; }

/* Réponses en plusieurs blocs : espacement et puces.
   Le reset global supprime les marqueurs de liste, il faut les redessiner. */
.faq__answer p + p,
.faq__answer p + ul,
.faq__answer ul + p { margin-top: 14px; }

.faq__answer ul { color: var(--text-light); }

.faq__answer li {
  position: relative;
  padding-left: 20px;
  line-height: 1.6;
}

.faq__answer li + li { margin-top: 8px; }

.faq__answer li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

@media (max-width: 640px) {
  .faq__item summary { padding: 18px 20px; font-size: 1.02rem; }
  .faq__answer { padding: 0 20px 20px; }
}

/* Titre de section réservé aux lecteurs d'écran et aux moteurs de recherche */
.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;
}

/* Phrases de mise en avant : rendu identique aux anciens <h3> d'article */
.article-body .pull {
  font-family: var(--font-title);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--navy);
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  margin-top: 1.6em;
  margin-bottom: 0.5em;
}

/* --------------------------------------------------------------------------
   20. Accueil — blocs alignés sur le site publié
   -------------------------------------------------------------------------- */

/* Les 5 piliers « Structurer les relations », sur une seule ligne */
.grid--5 { grid-template-columns: repeat(5, 1fr); gap: 20px; }

.card--pillar {
  padding: 30px 20px 34px;
  background: rgba(255, 255, 255, 0.55);
  border-color: rgba(25, 171, 142, 0.35);
  border-radius: var(--radius);
  text-align: center;
}

.card--pillar .card__icon {
  width: 40px;
  height: 40px;
  margin: 0 auto 20px;
  object-position: center;
}

.card--pillar h3 {
  margin-bottom: 0;
  font-size: 1.12rem;
  font-style: italic;
  line-height: 1.35;
  color: var(--accent-dark);
}

/* Citation seule, sans encadré */
.quote-line {
  margin: 56px 0 0;
  text-align: center;
  font-family: var(--font-title);
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  font-weight: 700;
  line-height: 1.35;
  color: var(--accent);
  text-wrap: balance;
}

/* Phrase de réassurance sous les chiffres clés */
.claim {
  position: relative;
  max-width: 1060px;
  margin: 64px auto 0;
  padding-inline: 72px;
  text-align: center;
  font-size: clamp(1.5rem, 3vw, 2.15rem);
  font-weight: 800;
  line-height: 1.3;
  color: var(--white);
  text-wrap: balance;
}

.claim span { color: #58d8bd; }

.claim::before,
.claim::after {
  position: absolute;
  font-family: var(--font-title);
  font-size: 4.5rem;
  line-height: 1;
  color: #58d8bd;
}

.claim::before { content: "\201C"; left: 0; top: 10px; }
.claim::after { content: "\201D"; right: 0; top: 10px; }

/* Les 3 colonnes « Consolidez vos liens » */
.section-head--wide { max-width: none; }

.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }

.pillar { padding-inline: 40px; }
.pillar:first-child { padding-left: 0; }
.pillar:last-child { padding-right: 0; }
.pillar + .pillar { border-left: 1px solid var(--accent-tint); }

.pillar__icon {
  width: 30px;
  height: 30px;
  margin-bottom: 18px;
  object-fit: contain;
}

.pillar h3 {
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  line-height: 1.2;
  color: var(--accent);
  margin-bottom: 24px;
}

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

.pillar__highlight { color: var(--accent); font-weight: 700; }

.pillars__closing {
  margin: 48px 0 0;
  text-align: center;
  font-size: 1.12rem;
  color: var(--navy);
}

.btn-row--center { justify-content: center; }

@media (max-width: 1080px) {
  .grid--5 { grid-template-columns: repeat(3, 1fr); }
  .pillar { padding-inline: 28px; }
}

@media (max-width: 980px) {
  .grid--5 { grid-template-columns: repeat(2, 1fr); }
  .pillars { grid-template-columns: 1fr; gap: 44px; }
  .pillar { padding-inline: 0; }
  .pillar + .pillar { border-left: 0; border-top: 1px solid var(--accent-tint); padding-top: 44px; }
  .claim { padding-inline: 40px; margin-top: 52px; }
  .claim::before, .claim::after { font-size: 3.2rem; }
}

@media (max-width: 620px) {
  .grid--5 { grid-template-columns: 1fr; }
  .card--pillar { padding: 26px 20px; }
}

/* Variante « 3 bonnes raisons » : trois colonnes numérotées, sans encadré */
.steps--reasons { grid-template-columns: repeat(3, 1fr); gap: 0; }

.steps--reasons .step {
  display: block;
  padding: 4px 44px;
  background: none;
  border: 0;
  border-radius: 0;
  transition: none;
}

.steps--reasons .step:first-child { padding-left: 0; }
.steps--reasons .step:last-child { padding-right: 0; }
.steps--reasons .step + .step { border-left: 1px solid rgba(255, 255, 255, 0.18); }
.steps--reasons .step:hover { transform: none; box-shadow: none; }

.steps--reasons .step__num {
  display: block;
  width: auto;
  height: auto;
  margin-bottom: 26px;
  border-radius: 0;
  background: none;
  font-family: var(--font-body);
  font-size: clamp(2.2rem, 3.4vw, 3.1rem);
  font-weight: 800;
  line-height: 1;
  color: #58d8bd;
}

.steps--reasons .step__num::after { content: "."; }

.steps--reasons .step h3 {
  font-family: var(--font-body);
  font-size: 1.06rem;
  font-weight: 800;
  line-height: 1.55;
  letter-spacing: 0;
  color: var(--white);
  margin-bottom: 4px;
}

.steps--reasons .step p { font-size: 1.06rem; line-height: 1.55; }

/* Sur fond clair, mêmes règles avec les couleurs de texte du site */
.section:not(.section--navy) .steps--reasons .step + .step { border-left-color: var(--border); }
.section:not(.section--navy) .steps--reasons .step h3 { color: var(--navy); }

@media (max-width: 980px) {
  .steps--reasons { grid-template-columns: 1fr; gap: 36px; }
  .steps--reasons .step { padding: 0; }
  .steps--reasons .step + .step {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    padding-top: 36px;
  }
  .section:not(.section--navy) .steps--reasons .step + .step { border-top-color: var(--border); }
  .steps--reasons .step__num { margin-bottom: 14px; }
}

/* --------------------------------------------------------------------------
   21. Composants repris du site publié
   -------------------------------------------------------------------------- */

/* Pastilles encadrées, en italique — libellés courts */
.pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 22px;
}

.pill-list li {
  padding: 12px 22px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  font-family: var(--font-title);
  font-style: italic;
  font-size: 1.12rem;
  line-height: 1.3;
  color: var(--navy);
}

.section--navy .pill-list li { color: var(--cream); border-color: rgba(88, 216, 189, 0.55); }

/* Points de vigilance présentés en lignes encadrées à icône */
.warn-list--boxed { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }

.warn-list--boxed li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border: 1px solid var(--accent-tint);
  border-radius: var(--radius);
  background: var(--accent-soft);
  font-family: var(--font-title);
  font-style: italic;
  font-size: 1.06rem;
  line-height: 1.3;
  color: var(--navy);
}

.warn-list--boxed li::before {
  content: "";
  position: static;
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 0;
  background: #e0685f;
  transform: none;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2 1 21h22L12 2Zm0 6v7m0 3v.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2 1 21h22L12 2Zm0 6v7m0 3v.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/></svg>") center/contain no-repeat;
}

.section--navy .warn-list--boxed li {
  color: var(--cream);
  border-color: rgba(88, 216, 189, 0.45);
  background: rgba(255, 255, 255, 0.04);
}

/* Étapes de méthode en liste à filets, sans encadré */
.steps--method { gap: 0; }

.steps--method .step {
  grid-template-columns: 62px 1fr;
  gap: 22px;
  padding: 28px 0;
  background: none;
  border: 0;
  border-radius: 0;
  transition: none;
}

.steps--method .step:first-child { padding-top: 0; }
.steps--method .step:last-child { padding-bottom: 0; }
.steps--method .step + .step { border-top: 1px solid var(--accent-tint); }
.steps--method .step:hover { transform: none; box-shadow: none; }

.steps--method .step__num {
  width: auto;
  height: auto;
  justify-content: flex-start;
  border-radius: 0;
  background: none;
  font-family: var(--font-body);
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--accent);
}

.steps--method .step h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); margin-bottom: 6px; }

.section--navy .steps--method .step { background: none; border-color: rgba(255, 255, 255, 0.16); }
.section--navy .steps--method .step__num { background: none; color: #58d8bd; }

@media (max-width: 620px) {
  .steps--method .step { grid-template-columns: 1fr; gap: 10px; padding: 24px 0; }
  .steps--method .step__num { font-size: 1.35rem; }
}

/* --------------------------------------------------------------------------
   22. Page coaching de couple dirigeant
   -------------------------------------------------------------------------- */

/* Cartes d'impact sur fond marine */
.section--navy .impact {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(88, 216, 189, 0.28);
  border-top: 1px solid rgba(88, 216, 189, 0.28);
  box-shadow: none;
}

.section--navy .impact h3 { color: #34c9a6; }

/* Pastilles avec coche */
.pill-list--check li { display: flex; align-items: center; gap: 12px; }

.pill-list--check li::before {
  content: "";
  flex: none;
  width: 22px;
  height: 22px;
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='10' fill='none' stroke='black' stroke-width='2'/><path d='m8 12 3 3 5-6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='10' fill='none' stroke='black' stroke-width='2'/><path d='m8 12 3 3 5-6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
}

.pill-list--center { justify-content: center; }
.pill-list--stack { flex-direction: column; align-items: flex-start; }

/* Citation encadrée sur fond marine */
.quote-box {
  position: relative;
  margin: 0 0 92px;
  padding: 34px 96px;
  border: 1px solid rgba(88, 216, 189, 0.45);
  border-radius: var(--radius-lg);
  text-align: center;
  font-size: clamp(1.2rem, 2.4vw, 1.75rem);
  font-weight: 700;
  line-height: 1.35;
  color: var(--white);
  text-wrap: balance;
}

.quote-box span { color: #58d8bd; }

.quote-box::before,
.quote-box::after {
  position: absolute;
  font-family: var(--font-title);
  font-size: 3.6rem;
  line-height: 1;
  color: #58d8bd;
}

.quote-box::before { content: "\201C"; left: 32px; top: 34px; }
.quote-box::after { content: "\201D"; right: 32px; top: 34px; }

/* --------------------------------------------------------------------------
   Bandeau de réassurance encadré
   Icône à gauche, chiffre puis légende à droite, séparateurs entre colonnes.
   Les chiffres s'animent en décompte croissant (voir main.js, data-count).
   -------------------------------------------------------------------------- */
.stats--framed {
  padding: 42px 26px;
  border: 1px solid rgba(88, 216, 189, 0.42);
  border-radius: var(--radius-lg);
  gap: 0;
  text-align: left;
}

.stats--framed .stat {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 24px;
  padding-inline: 30px;
}

.stats--framed .stat:first-child { padding-left: 12px; }
.stats--framed .stat:last-child { padding-right: 12px; }
.stats--framed .stat + .stat { border-left: 1px solid rgba(255, 255, 255, 0.16); }

.stats--framed .stat img {
  grid-row: 1 / 3;
  align-self: center;
  width: 66px;
  height: 66px;
  margin: 0;
}

.stats--framed .stat__value {
  font-family: var(--font-body);
  font-size: clamp(1.8rem, 2.4vw, 2.3rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.05;
  margin-bottom: 8px;
  /* Réserve la largeur du chiffre final pour que l'animation ne décale rien */
  font-variant-numeric: tabular-nums;
}

.stats--framed .stat p:not(.stat__value) {
  font-size: 1.02rem;
  line-height: 1.45;
}

/* Bandeau de réassurance : tablette, on resserre avant le passage en pile */
@media (max-width: 1140px) {
  .stats--framed .stat { column-gap: 16px; padding-inline: 18px; }
  .stats--framed .stat img { width: 52px; height: 52px; }
  .stats--framed .stat__value { font-size: 1.65rem; }
  .stats--framed .stat p:not(.stat__value) { font-size: 0.94rem; }
}

/* Bandeau de réassurance : en pile, les séparateurs passent à l'horizontale */
@media (max-width: 980px) {
  .stats--framed .stat { padding: 26px 4px; column-gap: 22px; }
  .stats--framed .stat:first-child { padding-top: 0; padding-left: 4px; }
  .stats--framed .stat:last-child { padding-bottom: 0; padding-right: 4px; }
  .stats--framed .stat + .stat {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
  }
  .stats--framed .stat img { width: 58px; height: 58px; }
  .stats--framed .stat__value { font-size: 1.9rem; }
  .stats--framed .stat p:not(.stat__value) { font-size: 1rem; }
}

/* Méthode : intro à gauche, cartes numérotées à droite */
.method {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 64px;
  align-items: start;
}

.method__intro h2 { margin-bottom: 28px; }
.method__intro .pill-list { margin-bottom: 8px; }

.method__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }

.method-card {
  position: relative;
  padding: 32px 30px 34px;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 34px rgba(14, 15, 48, 0.06);
}

.method-card .method-card__num {
  font-family: var(--font-title);
  font-size: 2.5rem;
  font-weight: 500;
  line-height: 1;
  color: var(--accent);
  margin-bottom: 34px;
}

.method-card__icon {
  position: absolute;
  top: 30px;
  right: 30px;
  width: 46px;
  height: 46px;
  padding: 11px;
  border: 1px solid var(--border);
  border-radius: 50%;
  object-fit: contain;
}

.method-card h3 {
  font-family: var(--font-body);
  font-size: 1.16rem;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0;
  color: var(--accent);
  margin-bottom: 16px;
}

.method-card p { color: var(--text-light); margin-bottom: 0; }

@media (max-width: 1080px) {
  .method { grid-template-columns: 1fr; gap: 48px; }
}

@media (max-width: 620px) {
  .method__grid { grid-template-columns: 1fr; }
  .quote-box { padding: 56px 24px 28px; }
  .quote-box::before { left: 24px; top: 18px; }
  .quote-box::after { right: 24px; top: 18px; }
  .stats--framed { padding: 28px 20px; }
}

/* --------------------------------------------------------------------------
   23. Page audit stratégique
   -------------------------------------------------------------------------- */

/* Accroche colorée du hero */
.page-hero .hero__claim {
  font-weight: 700;
  color: #58d8bd;
}

/* Grande affirmation centrée */
.statement {
  max-width: 1000px;
  margin: 64px auto 0;
  text-align: center;
  font-family: var(--font-title);
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  font-weight: 500;
  line-height: 1.2;
  color: var(--navy);
  text-wrap: balance;
}

.section--navy .statement { color: var(--cream); }
.statement .accent { color: var(--accent); }
.section--navy .statement .accent { color: #17b28f; }

.statement.statement--small {
  margin-top: 34px;
  margin-bottom: 64px;
  font-family: var(--font-body);
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  font-weight: 800;
  color: #17b28f;
}
.section--navy .statement--small { color: #17b28f; }

/* Cartes de déroulé, version claire */
.method__grid--3 { grid-template-columns: repeat(3, 1fr); }

.method-card--soft {
  background: rgba(88, 216, 189, 0.07);
  border: 1px solid var(--accent-tint);
  box-shadow: none;
}

.check-list--tight { margin-block: 12px; }
.check-list--tight li { margin-bottom: 8px; }

/* Liste de bénéfices séparée par des filets */
.benefit-list { display: flex; flex-direction: column; }

.benefit-list li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 0;
  font-family: var(--font-title);
  font-size: clamp(1.1rem, 1.9vw, 1.35rem);
  line-height: 1.35;
  color: var(--navy);
}

.benefit-list li + li { border-top: 1px solid var(--accent-tint); }

.benefit-list li::before {
  content: "";
  flex: none;
  width: 24px;
  height: 24px;
  margin-top: 2px;
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='10' fill='none' stroke='black' stroke-width='2'/><path d='m8 12 3 3 5-6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='10' fill='none' stroke='black' stroke-width='2'/><path d='m8 12 3 3 5-6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
}

.section--navy .benefit-list li { color: var(--cream); }
.section--navy .benefit-list li + li { border-top-color: rgba(255, 255, 255, 0.16); }

@media (max-width: 1080px) {
  .method__grid--3 { grid-template-columns: 1fr; }
}

/* Suréti­quette et accent du hero, sur fond photo sombre */
.page-hero .eyebrow { color: #58d8bd; }
.page-hero h1 .accent { color: #34c9a6; }
.page-hero .lead { color: rgba(255, 255, 255, 0.9); }
.page-hero .lead .accent { color: #58d8bd; }

/* Cartes de bénéfices : titre vert en serif, sans pictogramme */
.card--benefit h3 {
  color: var(--accent);
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  margin-bottom: 26px;
}

/* --------------------------------------------------------------------------
   24. Page « Pourquoi moi »
   -------------------------------------------------------------------------- */

/* Portrait à gauche, texte à droite */
.split--portrait { grid-template-columns: 0.85fr 1.15fr; align-items: start; }

/* Pastilles porteuses d'un titre */
.pill-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  margin-top: 64px;
}

.pill-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 26px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.5);
}

.pill-card__icon { width: 22px; height: 22px; flex: none; }

.pill-card h3 {
  margin-bottom: 0;
  font-size: 1.12rem;
  font-style: italic;
  line-height: 1.3;
  color: var(--accent-dark);
}

/* Citation encadrée, version fond clair */
.quote-box--light {
  margin-top: 64px;
  border-color: var(--accent);
  color: var(--navy);
}

.quote-box--light span { color: var(--accent); }
.quote-box--light::before,
.quote-box--light::after { color: var(--accent); }

/* Carte bordée sur fond clair, titre vert */
.card--outline {
  border: 1px solid var(--accent);
  background: rgba(25, 171, 142, 0.04);
  box-shadow: none;
}

.card--outline h3 { color: var(--accent); margin-bottom: 20px; }
.card--outline:hover { transform: none; box-shadow: none; border-color: var(--accent); }

/* Cartes d'expertise sur fond marine */
.card--expertise {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(88, 216, 189, 0.28);
  padding: 40px 38px;
}

.card--expertise h3 { color: var(--cream); margin-bottom: 24px; }
.card--expertise h3 .accent { color: #34c9a6; }
.card--expertise p { color: rgba(255, 255, 255, 0.82); }
.card--expertise .accent { color: #34c9a6; }
.card--expertise:hover { transform: none; box-shadow: none; }

/* Note sous un bouton */
.btn-note {
  margin-top: 18px;
  font-size: 0.98rem;
  color: rgba(255, 255, 255, 0.72);
}

.section:not(.section--navy) .btn-note { color: var(--text-light); }

/* Grille de raisons, une pastille par ligne */
.check-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.check-grid li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 22px;
  border: 1px solid var(--accent-tint);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.6);
  line-height: 1.5;
}

.check-grid li::before {
  content: "";
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='10' fill='none' stroke='black' stroke-width='2'/><path d='m8 12 3 3 5-6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='10' fill='none' stroke='black' stroke-width='2'/><path d='m8 12 3 3 5-6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
}

.check-grid__wide { grid-column: 1 / -1; }

@media (max-width: 980px) {
  .split--portrait { grid-template-columns: 1fr; }
  .check-grid { grid-template-columns: 1fr; }
}

/* Section ouverte par une citation encadrée : on la remonte et on lui
   redonne l'air que « p:last-child » lui retirait sous la boîte. */
.section--quote-lead { padding-top: 52px; }
.section--quote-lead p.quote-box { margin-bottom: 68px; }

@media (max-width: 980px) {
  .section--quote-lead { padding-top: 44px; }
  .section--quote-lead p.quote-box { margin-bottom: 52px; }
}

/* --------------------------------------------------------------------------
   25. Page contact
   -------------------------------------------------------------------------- */

/* Encart « je vous réponds personnellement » : portrait rond + promesse de délai */
.reply-card {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 24px 26px;
  margin-bottom: 36px;
  background: var(--accent-soft);
  border-radius: var(--radius);
}

.reply-card img {
  flex: none;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 4%;
}

.reply-card p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text);
}

/* Champ piège anti-robots : hors écran, jamais visible ni tabulable. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Champ en erreur : bordure rouge et message sous le champ */
.field--error input,
.field--error select,
.field--error textarea {
  border-color: #e0685f;
  background: rgba(224, 104, 95, 0.04);
}

.field__error {
  margin-top: 7px;
  font-size: 0.86rem;
  font-weight: 600;
  color: #c4453b;
}

.field--check.field--error { flex-wrap: wrap; }
.field--check .field__error { width: 100%; }

/* Lien de secours affiché dans le bandeau d'état du formulaire */
.form__status a {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
}

@media (max-width: 560px) {
  /* Sur téléphone la colonne est étroite : la photo repasse au-dessus du texte. */
  .reply-card { flex-direction: column; text-align: center; padding: 26px 20px 24px; gap: 18px; }
  .reply-card img { width: 180px; height: 180px; }
}

/* --------------------------------------------------------------------------
   Page formation — tarifs et fiche pratique
   Qualiopi (indicateur 1) impose que la durée, les prérequis, les tarifs, les
   délais d'accès, les méthodes et les modalités d'évaluation soient publiés,
   accessibles et vérifiables. Ils sont rassemblés dans un tableau unique, pour
   qu'un auditeur comme un client les trouve d'un seul coup d'œil.
   -------------------------------------------------------------------------- */
.offer__price {
  font-family: var(--font-title);
  font-size: 2rem;
  line-height: 1.05;
  color: var(--navy);
  margin-bottom: 18px;
}
.offer__price small {
  display: block;
  margin-top: 6px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-light);
}

.spec-table { width: 100%; border-collapse: collapse; font-size: 0.98rem; }
.spec-table th,
.spec-table td {
  padding: 16px 18px;
  border: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}
.spec-table th {
  width: 32%;
  background: var(--mint);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--navy);
}
.spec-table td { background: #fff; color: var(--text-light); }
.spec-table td strong { color: var(--navy); }
.spec-table td ul { margin: 8px 0 0; }
.spec-table td li { margin-bottom: 5px; }

@media (max-width: 700px) {
  /* Deux colonnes dans 340 px couperaient chaque mot : l'intitulé repasse
     au-dessus de la valeur, une ligne du tableau devient une carte. */
  .spec-table,
  .spec-table tbody,
  .spec-table tr,
  .spec-table th,
  .spec-table td { display: block; width: auto; }
  .spec-table tr {
    margin-bottom: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
  }
  .spec-table th,
  .spec-table td { border: 0; }
  .spec-table th { width: auto; }
  .spec-table td { padding-top: 12px; }
}

/* Encadré réglementaire (déclaration d'activité, réclamations, handicap) :
   volontairement sobre, il doit se lire comme une mention légale et non
   comme un argument commercial. */
.notice {
  padding: 30px 32px;
  background: var(--cream);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
}
.notice h3 { margin-bottom: 12px; font-size: 1.15rem; }
.notice p { color: var(--text-light); }
.notice p + p { margin-top: 12px; }
.notice a { color: var(--accent); font-weight: 700; }

@media (max-width: 560px) {
  .notice { padding: 24px 20px; }
}

/* Bandeau de la page formation. La photo verticale d'origine (768 x 1344) a été
   composée en bandeau large de 2560 x 1164 : voiture effacée, rue prolongée à
   gauche puis fondue dans le bleu nuit — voir la recette dans le README.

   Le réglage qui compte est `background-size: auto 100%` : la hauteur du bandeau
   est toujours affichée entière, et ce que le navigateur rogne, ancré à droite,
   c'est le bleu de gauche — jamais le sujet. En `cover` (le réglage commun), un
   bandeau de 1280 x 856 est deux fois moins large que l'image ne l'exige : le
   navigateur cadrait sur la hauteur et rognait 250 px de chaque côté, ce qui
   coupait le bras droit du sujet. Ce qui n'est pas couvert à gauche sur un très
   grand écran est exactement le même bleu que celui de l'image. */
.page-hero--portrait {
  background-size: auto 100%;
  background-position: right center;
  background-repeat: no-repeat;
}

/* Le voile reprend le dégradé commun à toutes les pages (100 degrés, 0,95 puis
   0,80 au milieu) ; seule la valeur d'arrivée est allégée, 0,30 au lieu de 0,45,
   pour que le visage reste lumineux. */
.page-hero--portrait::before {
  background: linear-gradient(
    100deg,
    rgba(14, 15, 48, 0.95) 0%,
    rgba(14, 15, 48, 0.8) 55%,
    rgba(14, 15, 48, 0.3) 100%
  );
}

/* Le texte s'arrête avant le sujet — c'est la largeur de la colonne qui crée
   l'espacement, comme sur la page associés, pas le cadrage de l'image. */
.page-hero--portrait .page-hero__inner { max-width: 600px; }

@media (max-width: 1180px) {
  .page-hero--portrait .page-hero__inner { max-width: 520px; }
}

/* Sous 980 px la page passe en colonne unique : superposer le texte au bandeau
   large demanderait un voile si dense qu'on ne verrait plus le sujet. C'est la
   photo verticale seule qui est servie, calée en haut, et le voile devient
   vertical : elle se dissout dans le bleu au niveau des épaules, puis le texte
   se lit sur l'aplat. `--photo-h` porte la hauteur visible de la photo : elle
   sert à la fois de remplissage haut et de repère aux arrêts du dégradé. */
@media (max-width: 980px) {
  .page-hero--portrait {
    --photo-h: clamp(320px, 82vw, 470px);
    padding-top: var(--photo-h);
    background-image: var(--hero-img-mobile);
    background-size: 100% auto;
    background-position: top center;
  }

  .page-hero--portrait::before {
    background: linear-gradient(
      180deg,
      rgba(14, 15, 48, 0) 0%,
      rgba(14, 15, 48, 0) calc(var(--photo-h) - 90px),
      rgba(14, 15, 48, 0.86) calc(var(--photo-h) - 10px),
      rgb(14, 15, 48) calc(var(--photo-h) + 40px)
    );
  }

  .page-hero--portrait .page-hero__inner { max-width: none; }
}

/* Dans une page « .legal », tous les liens sont verts et soulignés. Un bouton n'est
   pas un lien de texte : il reprend ses propres couleurs, sinon un .btn--primary
   affiche du vert sur du vert et son libellé disparaît. */
.legal .btn { text-decoration: none; }
.legal .btn--primary { color: #fff; }
.legal .btn--outline { color: var(--accent); }
.legal .btn--light { color: #fff; }