/* L’Élan du Cap · lelanducap.com
   Une seule page : promesse, résultats, offre, déroulé, engagements, tarifs, relais, qui je suis, questions, contact.
   Conteneur de 1 200 px, gouttière de 24 px. Indigo et blanc dominent, une seule touche d’ambre par écran.
   Couleurs, typographie et composants : charte L’Élan du Cap (jetons clair et sombre). */

/* ---------- Polices (licence SIL Open Font) ---------- */
@font-face {
  font-family: "Alexandria";
  src: url("../fonts/alexandria-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-latin-wght-italic.woff2") format("woff2");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}

/* ---------- Jetons : thème clair ---------- */
:root {
  --indigo-nuit: #202B5B;
  --ambre-des-dunes: #E1A23B;
  --rose-des-sables: #E9CDB9;
  --blanc-oryx: #FBFAF7;
  --encre: #161A33;

  --surface: #FBFAF7;
  --surface-raised: #FFFFFF;
  --surface-warm: #F4EAE3;
  --surface-brand: #202B5B;
  --surface-sur-indigo: #283468;
  --line: #DEDBE6;
  --line-strong: #8A8EA8;
  --line-sur-indigo: #3A4577;
  --ink: #161A33;
  --ink-muted: #4D5170;
  --brand: #202B5B;
  --on-brand: #FBFAF7;
  --ambre: #E1A23B;
  --on-ambre: #202B5B;
  --ambre-texte: #85600F;
  --danger: #A8322D;
  --link: #202B5B;
  --logo: #202B5B;
  --selection: #E9CDB9;

  --shadow-sm: 0 1px 2px #161a3314, 0 2px 6px #161a330f;
  --shadow-lg: 0 4px 10px #161a3314, 0 14px 32px -4px #161a3329;
  --focus-ring: 0 0 0 2px #FBFAF7, 0 0 0 4px #202B5B;
  --focus-ring-inverse: 0 0 0 2px #202B5B, 0 0 0 4px #E1A23B;

  --font-display: "Cormorant Garamond", Garamond, "Times New Roman", serif;
  --font-sans: "Alexandria", "Segoe UI", system-ui, -apple-system, sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 12px;
  --radius-xl: 18px;
  --radius-full: 9999px;

  --conteneur: 1200px;
  --gouttiere: 24px;
  --marge: 24px;
  --section: 96px;
  color-scheme: light;
}

/* ---------- Jetons : thème sombre ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface: #121630;
    --surface-raised: #1B2147;
    --surface-warm: #2A2240;
    --surface-brand: #26326A;
    --surface-sur-indigo: #2E3B78;
    --line: #343A63;
    --line-strong: #7C82AE;
    --line-sur-indigo: #46528C;
    --ink: #F3F1EC;
    --ink-muted: #B9BCD6;
    --brand: #C3CAF5;
    --on-brand: #121630;
    --ambre: #E8AE4E;
    --on-ambre: #121630;
    --ambre-texte: #E8AE4E;
    --danger: #F2938C;
    --link: #C3CAF5;
    --logo: #FBFAF7;
    --selection: #46528C;
    --shadow-sm: 0 1px 3px #00000099;
    --shadow-lg: 0 14px 32px -4px #000000cc;
    --focus-ring: 0 0 0 2px #121630, 0 0 0 4px #E8AE4E;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --surface: #121630;
  --surface-raised: #1B2147;
  --surface-warm: #2A2240;
  --surface-brand: #26326A;
  --surface-sur-indigo: #2E3B78;
  --line: #343A63;
  --line-strong: #7C82AE;
  --line-sur-indigo: #46528C;
  --ink: #F3F1EC;
  --ink-muted: #B9BCD6;
  --brand: #C3CAF5;
  --on-brand: #121630;
  --ambre: #E8AE4E;
  --on-ambre: #121630;
  --ambre-texte: #E8AE4E;
  --danger: #F2938C;
  --link: #C3CAF5;
  --logo: #FBFAF7;
  --selection: #46528C;
  --shadow-sm: 0 1px 3px #00000099;
  --shadow-lg: 0 14px 32px -4px #000000cc;
  --focus-ring: 0 0 0 2px #121630, 0 0 0 4px #E8AE4E;
  color-scheme: dark;
}

@media (max-width: 720px) {
  :root {
    --marge: 16px;
    --section: 64px;
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 96px;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 26px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px);
  z-index: 60;
  background: var(--surface-raised);
}
img { max-width: 100%; height: auto; display: block; }
svg { flex-shrink: 0; }
p, h1, h2, h3, h4, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; }
ul[class], ol[class] { list-style: none; }
a { color: var(--link); }
strong { font-weight: 600; }
sup { font-size: 0.68em; line-height: 0; vertical-align: 0.42em; }
::selection { background: var(--selection); color: var(--ink); }
:focus-visible { outline: 2px solid transparent; border-radius: 2px; box-shadow: var(--focus-ring); }
.sur-indigo :focus-visible { box-shadow: var(--focus-ring-inverse); }
[hidden] { display: none !important; }

.visuellement-cache {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.lien-evitement {
  position: absolute;
  left: var(--marge);
  top: -120px;
  z-index: 100;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  color: var(--brand);
  font-weight: 500;
  text-decoration: none;
  box-shadow: var(--shadow-lg);
}
.lien-evitement:focus { top: calc(var(--space-4) + env(safe-area-inset-top, 0px)); }

.conteneur {
  width: 100%;
  max-width: calc(var(--conteneur) + 2 * var(--marge));
  margin-inline: auto;
  padding-left: max(var(--marge), env(safe-area-inset-left, 0px));
  padding-right: max(var(--marge), env(safe-area-inset-right, 0px));
}

/* ---------- Typographie (charte) ---------- */
.edc-label {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ambre-texte);
}
.edc-titre-1, .edc-titre-2, .edc-titre-3 {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  color: var(--brand);
  text-wrap: balance;
  font-variant-numeric: lining-nums;
}
.edc-titre-1 { font-size: 48px; line-height: 52px; }
.edc-titre-2 { font-size: 42px; line-height: 46px; }
.edc-titre-3 { font-size: 28px; line-height: 34px; }
.edc-chapeau {
  margin: 0;
  font-size: 19px;
  line-height: 30px;
  font-weight: 300;
  color: var(--ink-muted);
  text-wrap: pretty;
}
.texte { font-size: 16px; line-height: 27px; color: var(--ink); text-wrap: pretty; }
.source { font-size: 13px; line-height: 20px; color: var(--ink-muted); }
.prose { display: flex; flex-direction: column; gap: var(--space-4); max-width: 40rem; }
.prose p { text-wrap: pretty; }

@media (max-width: 720px) {
  .edc-titre-1 { font-size: 36px; line-height: 40px; }
  .edc-titre-2 { font-size: 32px; line-height: 37px; }
  .edc-titre-3 { font-size: 24px; line-height: 30px; }
  .edc-chapeau { font-size: 17px; line-height: 27px; }
}

/* Motif Passage : deux traits ambre et un espace plus long qu’eux */
.edc-passage { display: inline-flex; align-items: center; gap: 14px; flex-shrink: 0; }
.edc-passage::before, .edc-passage::after {
  content: "";
  display: block;
  width: 12px;
  height: 3px;
  border-radius: 2px;
  background: var(--ambre);
}
.titre-puce { display: flex; align-items: center; gap: var(--space-3); }

/* ---------- Boutons et liens ---------- */
.edc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.edc-btn svg { width: 18px; height: 18px; }
.edc-btn:active { transform: translateY(1px); }
.edc-btn--primaire { background: var(--brand); color: var(--on-brand); }
.edc-btn--primaire:hover { background: var(--ink); color: var(--surface); }
.edc-btn--accent { background: var(--ambre); color: var(--on-ambre); }
.edc-btn--accent:hover { background: var(--rose-des-sables); color: var(--indigo-nuit); }
.edc-btn--secondaire { background: transparent; color: var(--brand); border-color: var(--brand); }
.edc-btn--secondaire:hover { background: var(--surface-warm); }
.edc-btn--inverse { background: transparent; color: var(--blanc-oryx); border-color: var(--rose-des-sables); }
.edc-btn--inverse:hover { background: var(--surface-sur-indigo); }
.edc-btn--grand { min-height: 54px; padding: 0 var(--space-6); font-size: 16px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }

.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--brand);
  font-weight: 500;
  font-size: 15px;
  line-height: 20px;
  text-decoration: none;
  padding-block: var(--space-2);
}
.lien-fleche svg { width: 18px; height: 18px; transition: transform 0.2s ease; }
.lien-fleche:hover { text-decoration: underline; text-underline-offset: 4px; }
.lien-fleche:hover svg { transform: translateX(3px); }

/* ---------- Étiquettes ---------- */
.etiquettes { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.edc-etiquette {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 4px var(--space-3);
  border-radius: var(--radius-full);
  background: var(--surface-raised);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 14px;
  line-height: 18px;
  font-weight: 500;
  white-space: nowrap;
}

/* ---------- En-tête ---------- */
.entete {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 50;
  background: var(--surface-raised);
  border-bottom: 1px solid var(--line);
}
.entete__barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: 80px;
  padding-block: var(--space-3);
}
.entete__logo {
  display: inline-flex;
  color: var(--logo);
  text-decoration: none;
  border-radius: var(--radius-sm);
}
.entete__logo svg { display: block; height: 48px; width: auto; }
.nav { display: flex; align-items: center; gap: var(--space-6); }
.nav__liste { list-style: none; display: flex; align-items: center; gap: var(--space-2) var(--space-5); }
.nav__lien {
  display: inline-block;
  padding: var(--space-2) 0;
  font-size: 15px;
  line-height: 20px;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
}
.nav__lien:hover { color: var(--brand); border-bottom-color: var(--line-strong); }
.entete__menu {
  display: none;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}
.entete__menu svg { width: 20px; height: 20px; }
.entete__menu .icone-fermer { display: none; }
.entete.est-ouvert .entete__menu .icone-menu { display: none; }
.entete.est-ouvert .entete__menu .icone-fermer { display: block; }

@media (max-width: 1080px) {
  .entete__barre { flex-wrap: wrap; min-height: 68px; padding-block: var(--space-3); }
  .entete__logo svg { height: 40px; }
  .entete__menu { display: inline-flex; }
  .nav {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
    padding: var(--space-2) 0 var(--space-5);
    border-top: 1px solid var(--line);
  }
  .entete.est-ouvert .nav { display: flex; }
  .nav__liste { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__liste li { border-bottom: 1px solid var(--line); }
  .nav__lien { display: block; padding: var(--space-4) 0; font-size: 17px; border-bottom: 0; }
  .nav__cta { align-self: flex-start; }
}

/* ---------- Hero ---------- */
.hero { background: var(--surface); }
.hero__grille {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
  gap: var(--space-8) var(--gouttiere);
  padding-block: var(--space-8) var(--space-9);
}
.hero__texte { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); min-width: 0; }
.hero__titre {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 80px;
  line-height: 80px;
  letter-spacing: -0.01em;
  color: var(--brand);
  text-wrap: balance;
}
.hero__chapeau {
  max-width: 34rem;
  font-size: 20px;
  line-height: 32px;
  font-weight: 300;
  color: var(--ink-muted);
  text-wrap: pretty;
}
.hero__actions { padding-top: var(--space-2); }
.hero__garanties {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  padding-top: var(--space-2);
  font-size: 14px;
  line-height: 22px;
  color: var(--ink);
}
.hero__garanties li { display: inline-flex; align-items: center; gap: var(--space-2); }
.hero__garanties svg { width: 18px; height: 18px; color: var(--brand); }

.hero__visuel { position: relative; justify-self: end; width: 100%; max-width: 420px; margin-right: var(--space-5); }
.hero__visuel::before {
  content: "";
  position: absolute;
  inset: var(--space-6) calc(-1 * var(--space-5)) calc(-1 * var(--space-5)) var(--space-6);
  border-radius: var(--radius-xl);
  background: var(--surface-warm);
}
.hero__photo {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--surface-warm);
  box-shadow: var(--shadow-lg);
}
.hero__photo picture { display: block; width: 100%; height: 100%; }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; }
.hero__carte {
  position: absolute;
  left: calc(-1 * var(--space-6));
  bottom: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3) var(--space-5);
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.hero__nom { font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 26px; line-height: 30px; color: var(--brand); white-space: nowrap; }
.hero__role { font-size: 13px; line-height: 18px; color: var(--ink-muted); white-space: nowrap; }

@media (max-width: 1080px) {
  .hero__titre { font-size: 64px; line-height: 66px; }
}
@media (max-width: 900px) {
  .hero__grille { grid-template-columns: minmax(0, 1fr); gap: var(--space-7); padding-block: var(--space-7) var(--space-8); }
  .hero__visuel { justify-self: start; width: calc(100% - var(--space-5)); max-width: 340px; margin-left: var(--space-5); margin-right: 0; }
}
@media (max-width: 720px) {
  .hero__titre { font-size: 48px; line-height: 50px; }
  .hero__chapeau { font-size: 17px; line-height: 28px; }
  .hero__visuel { max-width: 300px; }
  .hero__visuel::before { inset: var(--space-5) calc(-1 * var(--space-3)) calc(-1 * var(--space-3)) var(--space-5); }
  .hero__carte { left: calc(-1 * var(--space-4)); bottom: var(--space-5); padding: var(--space-2) var(--space-4); }
  .hero__nom { font-size: 22px; line-height: 26px; }
}

/* ---------- Sections ---------- */
.section { padding-block: var(--section); }
.section--chaude { background: var(--surface-warm); }
.section--relief { background: var(--surface-raised); }
.section--indigo, .sur-indigo { background: var(--surface-brand); color: var(--blanc-oryx); }
.sur-indigo .edc-label { color: var(--ambre-des-dunes); }
.sur-indigo .edc-titre-1,
.sur-indigo .edc-titre-2,
.sur-indigo .edc-titre-3 { color: var(--blanc-oryx); }
.sur-indigo .edc-chapeau { color: var(--rose-des-sables); }
.sur-indigo .texte { color: var(--blanc-oryx); }
.sur-indigo .source { color: var(--rose-des-sables); }

.section__entete {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  max-width: 46rem;
  margin-bottom: var(--space-7);
}
.section__pied { margin-top: var(--space-7); }

/* ---------- Grilles ---------- */
.grille { display: grid; gap: var(--gouttiere); }
.grille--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grille--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grille--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grille--large { gap: var(--space-7) var(--gouttiere); }
.colonnes-7-5 { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-7) var(--space-8); align-items: start; }
.colonnes-5-7 { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-7) var(--space-8); align-items: start; }
@media (max-width: 1000px) {
  .grille--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .colonnes-7-5, .colonnes-5-7 { gap: var(--space-7) var(--gouttiere); }
}
@media (max-width: 900px) {
  .grille--3 { grid-template-columns: minmax(0, 1fr); }
  .colonnes-7-5, .colonnes-5-7 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .grille--2, .grille--4 { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Résultats ---------- */
.edc-chiffre {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-5);
  border-top: 3px solid var(--ambre);
  min-width: 0;
}
.edc-chiffre__valeur {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 72px;
  line-height: 72px;
  font-variant-numeric: lining-nums;
  color: var(--brand);
  white-space: nowrap;
}
.edc-chiffre__prefixe { font-family: var(--font-sans); font-style: normal; font-weight: 400; font-size: 16px; line-height: 20px; margin-right: 8px; }
.edc-chiffre__libelle { margin: 0; font-size: 16px; line-height: 25px; color: var(--ink); text-wrap: pretty; }
.edc-chiffre__contexte { margin: 0; font-size: 14px; line-height: 22px; color: var(--ink-muted); text-wrap: pretty; }
.sur-indigo .edc-chiffre__valeur { color: var(--blanc-oryx); }
.sur-indigo .edc-chiffre__libelle { color: var(--blanc-oryx); }
.sur-indigo .edc-chiffre__prefixe,
.sur-indigo .edc-chiffre__contexte { color: var(--rose-des-sables); }
@media (max-width: 720px) {
  .edc-chiffre__valeur { font-size: 56px; line-height: 58px; }
}

/* ---------- Ce que je fais ---------- */
.point { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-5); border-top: 1px solid var(--line-strong); min-width: 0; }
.point__icone { width: 30px; height: 30px; color: var(--brand); }
.point__titre { font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 28px; line-height: 32px; color: var(--brand); text-wrap: balance; }
.point__texte { font-size: 15px; line-height: 24px; color: var(--ink-muted); text-wrap: pretty; }
.outils-ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid var(--line);
}
.outils-ligne__titre { font-size: 15px; line-height: 22px; font-weight: 500; color: var(--ink); }

/* ---------- Étapes ---------- */
.etapes { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-7) var(--gouttiere); counter-reset: etape; }
.etape { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--line-strong); min-width: 0; }
.etape__numero { font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 40px; line-height: 44px; color: var(--brand); font-variant-numeric: lining-nums; }
.etape__titre { font-size: 18px; line-height: 27px; font-weight: 500; color: var(--ink); }
.etape__texte { font-size: 15px; line-height: 24px; color: var(--ink-muted); text-wrap: pretty; }
.etape__marque { display: inline-flex; align-self: flex-start; margin-top: var(--space-2); }
.edc-etiquette--offert { background: var(--surface-raised); border-color: var(--brand); color: var(--brand); }
@media (max-width: 900px) { .etapes { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); } }

/* ---------- Engagements ---------- */
.engagements { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--space-6); }
.engagement {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
  padding: var(--space-5) 0;
  border-top: 1px solid var(--line);
}
.engagement svg { width: 24px; height: 24px; color: var(--brand); margin-top: 2px; }
.engagement__titre { font-size: 17px; line-height: 26px; font-weight: 500; color: var(--ink); }
.engagement__texte { font-size: 15px; line-height: 24px; color: var(--ink-muted); text-wrap: pretty; }
@media (max-width: 1000px) { .engagements { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .engagements { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Tarifs ---------- */
.tarifs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gouttiere); }
.tarif {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  min-width: 0;
}
.tarif svg { width: 28px; height: 28px; color: var(--brand); }
.tarif__titre { font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 30px; line-height: 34px; color: var(--brand); }
.tarif__texte { font-size: 15px; line-height: 24px; color: var(--ink-muted); text-wrap: pretty; }
.tarif--garantie { background: var(--surface-brand); border-color: var(--surface-brand); color: var(--blanc-oryx); }
.tarif--garantie svg, .tarif--garantie .tarif__titre { color: var(--blanc-oryx); }
.tarif--garantie .tarif__texte { color: var(--rose-des-sables); }
.tarifs__note { margin-top: var(--space-6); max-width: 46rem; font-size: 15px; line-height: 24px; color: var(--ink-muted); text-wrap: pretty; }
@media (max-width: 900px) { .tarifs { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) { .tarif { padding: var(--space-5); } }

/* ---------- Relais et recrutement ---------- */
.liste-coches { list-style: none; display: flex; flex-direction: column; gap: var(--space-4); }
.liste-coches li { display: flex; gap: var(--space-3); align-items: flex-start; font-size: 16px; line-height: 25px; }
.liste-coches svg { width: 22px; height: 22px; color: var(--brand); margin-top: 2px; }
.sur-indigo .liste-coches svg { color: var(--rose-des-sables); }
.relais__carte {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-6);
  background: var(--surface-sur-indigo);
  border: 1px solid var(--line-sur-indigo);
  border-radius: var(--radius-lg);
  min-width: 0;
}
.relais__titre { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rose-des-sables); }

/* ---------- Qui je suis ---------- */
.citation {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding-left: var(--space-5);
  border-left: 3px solid var(--ambre);
}
.citation p {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 28px;
  line-height: 36px;
  color: var(--brand);
  text-wrap: pretty;
}
@media (max-width: 720px) { .citation p { font-size: 24px; line-height: 31px; } }
.fiche {
  display: flex;
  flex-direction: column;
  padding: var(--space-5) var(--space-6);
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  min-width: 0;
}
.fiche__tete { display: flex; align-items: center; gap: var(--space-4); padding-bottom: var(--space-4); }
.fiche__tete picture { display: block; flex-shrink: 0; }
.fiche__tete img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.fiche__nom { font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 26px; line-height: 30px; color: var(--brand); }
.fiche__role { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.fiche__liste { display: flex; flex-direction: column; }
.fiche__ligne { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3) 0; border-top: 1px solid var(--line); }
.fiche__ligne dt { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-muted); }
.fiche__ligne dd { font-size: 15px; line-height: 23px; color: var(--ink); text-wrap: pretty; }
.fiche__pied { padding-top: var(--space-3); border-top: 1px solid var(--line); }
@media (max-width: 720px) { .fiche { padding: var(--space-4) var(--space-5); } }

/* ---------- Questions fréquentes ---------- */
.faq { border-top: 1px solid var(--line-strong); }
.faq__item { border-bottom: 1px solid var(--line-strong); }
.faq__question {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  cursor: pointer;
  font-size: 17px;
  line-height: 26px;
  font-weight: 500;
  color: var(--ink);
}
.faq__question::-webkit-details-marker { display: none; }
.faq__question::marker { content: ""; }
.faq__question:hover { color: var(--brand); }
.faq__icone { width: 22px; height: 22px; color: var(--brand); transition: transform 0.2s ease; }
.faq__item[open] .faq__icone { transform: rotate(45deg); }
.faq__reponse { padding: 0 var(--space-7) var(--space-5) 0; font-size: 15px; line-height: 25px; color: var(--ink-muted); text-wrap: pretty; max-width: 46rem; }
@media (max-width: 720px) { .faq__reponse { padding-right: 0; } }

/* ---------- Contact et formulaire ---------- */
.contact__rassurance { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-6); }
.contact__rassurance li { display: flex; gap: var(--space-3); align-items: center; font-size: 15px; line-height: 22px; color: var(--ink); }
.contact__rassurance svg { width: 20px; height: 20px; color: var(--brand); }
.coordonnees { list-style: none; display: flex; flex-direction: column; margin-top: var(--space-6); border-top: 1px solid var(--line); }
.coordonnee { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--space-3); padding: var(--space-4) 0; border-bottom: 1px solid var(--line); }
.coordonnee svg { width: 22px; height: 22px; color: var(--brand); margin-top: 2px; }
.coordonnee__libelle { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-muted); }
.coordonnee__valeur { display: block; margin-top: 4px; font-size: 16px; line-height: 24px; color: var(--ink); overflow-wrap: anywhere; }
.coordonnee__valeur a { color: var(--link); }

.panneau-formulaire {
  padding: var(--space-6);
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  min-width: 0;
}
@media (max-width: 720px) { .panneau-formulaire { padding: var(--space-5); } }
.formulaire { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--gouttiere); }
.formulaire .plein { grid-column: 1 / -1; }
@media (max-width: 680px) { .formulaire { grid-template-columns: minmax(0, 1fr); } }
.edc-champ { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.edc-champ__libelle { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink); }
.edc-champ__libelle .facultatif { font-weight: 400; color: var(--ink-muted); }
.edc-input {
  width: 100%;
  height: 46px;
  padding: 0 var(--space-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 24px;
}
textarea.edc-input { height: auto; min-height: 120px; padding: var(--space-3); resize: vertical; }
.edc-input::placeholder { color: var(--ink-muted); opacity: 1; }
.edc-input:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }
.selection { position: relative; }
.selection select.edc-input { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer; }
.selection svg { position: absolute; right: 12px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--ink-muted); pointer-events: none; }
.case { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--space-3); align-items: start; font-size: 14px; line-height: 22px; color: var(--ink-muted); }
.case input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--brand); cursor: pointer; }
.case a { color: var(--link); }
.cache-robot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formulaire__envoi { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.formulaire__note { font-size: 13px; line-height: 20px; color: var(--ink-muted); }
.message-formulaire {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--line-strong);
  background: var(--surface-warm);
  color: var(--ink);
  font-size: 14px;
  line-height: 22px;
}

/* ---------- Bandeau candidats ---------- */
.candidats { padding-block: var(--space-6); border-top: 1px solid var(--line); background: var(--surface-raised); }
.candidats__barre { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); }
.candidats__barre svg { width: 24px; height: 24px; color: var(--brand); }
.candidats__texte { flex: 1 1 28rem; font-size: 15px; line-height: 24px; color: var(--ink); text-wrap: pretty; }
.candidats__texte a { font-weight: 500; overflow-wrap: anywhere; }

/* ---------- Pages simples (légales, merci, 404) ---------- */
.entete-page { padding-block: var(--space-8) var(--space-7); border-bottom: 1px solid var(--line); }
.entete-page__texte { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); max-width: 46rem; }
.entete-page__texte .actions { padding-top: var(--space-3); }
.document { display: flex; flex-direction: column; gap: var(--space-7); max-width: 46rem; }
.document section { display: flex; flex-direction: column; gap: var(--space-3); }
.document h2 { font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 30px; line-height: 36px; color: var(--brand); }
.document h3 { font-size: 16px; line-height: 24px; font-weight: 500; color: var(--ink); margin-top: var(--space-2); }
.document p, .document li { font-size: 15px; line-height: 25px; color: var(--ink); text-wrap: pretty; }
.document ul { list-style: none; display: flex; flex-direction: column; gap: var(--space-2); }
.document ul li { display: flex; gap: var(--space-3); align-items: baseline; }
.document ul li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); flex-shrink: 0; transform: translateY(-2px); }
.document dl { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); border-top: 1px solid var(--line); }
.document dt, .document dd { padding: var(--space-3) 0; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 24px; }
.document dt { color: var(--ink-muted); padding-right: var(--space-4); }
.document dd { color: var(--ink); overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .document dl { grid-template-columns: minmax(0, 1fr); }
  .document dt { padding-bottom: 0; border-bottom: 0; }
}
.mise-a-jour { font-size: 13px; line-height: 20px; color: var(--ink-muted); }

/* ---------- Pied de page ---------- */
.pied { background: var(--surface-brand); color: var(--blanc-oryx); }
.pied__grille {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-7) var(--gouttiere);
  padding-block: var(--space-8) var(--space-6);
  padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
}
.pied__marque { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); min-width: 0; }
.pied__logo img { height: 48px; width: auto; }
.pied__baseline { font-size: 15px; line-height: 23px; color: var(--rose-des-sables); max-width: 24rem; }
.pied__slogan { font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 24px; line-height: 30px; color: var(--blanc-oryx); }
.pied__titre { margin: 0 0 var(--space-4); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ambre-des-dunes); }
.pied__liste { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); font-size: 15px; line-height: 22px; }
.pied__liste a { color: var(--blanc-oryx); text-decoration: none; overflow-wrap: anywhere; }
.pied__liste a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pied__mentions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line-sur-indigo);
  font-size: 13px;
  line-height: 20px;
  color: var(--rose-des-sables);
}
.pied__mentions ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.pied__mentions a { color: var(--rose-des-sables); }
.pied :focus-visible { box-shadow: var(--focus-ring-inverse); }
@media (max-width: 900px) {
  .pied__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pied__marque { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .pied__grille { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
}

/* ---------- Divers ---------- */
.pile { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.pile--5 { gap: var(--space-5); }
.pile--6 { gap: var(--space-6); }
.mt-6 { margin-top: var(--space-6); }

@media print {
  .entete, .pied, .hero__visuel, .lien-evitement, .actions, .panneau-formulaire { display: none !important; }
  body { background: #fff; color: #000; }
  .section, .hero { padding-block: 24px; background: #fff !important; color: #000 !important; }
}