/* Albert Sans, auto-hébergée (OFL-1.1, fichiers de @fontsource-variable/albert-sans 5.3.0,
   sous-ensemble latin, qui couvre le français) : aucune requête vers Google Fonts, donc
   aucune IP de visiteur transmise à Google (cf. #2), et une CSP limitée à 'self' (cf. #3). */
@font-face {
  font-family: "Albert Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/AlbertSans-Variable.woff2") format("woff2");
}
@font-face {
  font-family: "Albert Sans";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/AlbertSans-Italic-Variable.woff2") format("woff2");
}

:root {
  /* Jetons Elyroz */
  --bleu-mineral: #1A3644;
  --ardoise-tregor: #2C3E50;
  --rose-granit: #D88A8A;
  --blanc-ecume: #FAFAFA;
  --sable-dune: #EFECE6;
  --rouge-rejet: #C0392B;
  --on-bleu-mineral: #FAFAFA;
  --on-rose-granit: #1A3644;

  --font-sans: "Albert Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --space-xs: 4px;
  --space-sm: 6px;
  --space-md: 8px;
  --space-lg: 20px;
  --space-xl: 22px;
  --space-2xl: 32px;
  --space-3xl: 48px;

  --radius-none: 0;
  --rule-length: 26px;
  --rule-thick: 2px;
  --rule-thin: 1px;

  /* Rôles de surface */
  --page-bg: var(--blanc-ecume);
  --page-fg: var(--ardoise-tregor);
  --titre-fg: var(--bleu-mineral);
  --encart-bg: var(--sable-dune);
  --encart-fg: var(--ardoise-tregor);
  --bande-bg: var(--bleu-mineral);
  --bande-fg: var(--on-bleu-mineral);
  --trait: #E2DED6;

  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page-bg: #122631;
    --page-fg: #E4E9EC;
    --titre-fg: #FAFAFA;
    --encart-bg: #1A3644;
    --encart-fg: #DCE3E7;
    --bande-bg: #0D1D26;
    --bande-fg: #FAFAFA;
    --trait: #27414F;
  }
}

:root[data-theme="dark"] {
  --page-bg: #122631;
  --page-fg: #E4E9EC;
  --titre-fg: #FAFAFA;
  --encart-bg: #1A3644;
  --encart-fg: #DCE3E7;
  --bande-bg: #0D1D26;
  --bande-fg: #FAFAFA;
  --trait: #27414F;
}

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

html { scroll-behavior: smooth; scroll-padding-top: calc(env(safe-area-inset-top, 0px) + 84px); }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--page-fg);
  background: var(--page-bg);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

img { max-width: 100%; display: block; }

a { color: var(--titre-fg); }
/* Design system : le rose-granit ne sert de texte que sur bleu-mineral. Sur fond
   clair, le survol garde la couleur du lien et souligne en rose (décoratif). */
a:hover { text-decoration-color: var(--rose-granit); text-decoration-thickness: 2px; }
/* Focus : anneau de 2 px dans la couleur des titres (bleu-mineral sur fond clair,
   blanc-ecume en mode sombre). Les bandes bleu-mineral (en-tête, hero, contact)
   gardent un anneau rose-granit, un anneau bleu y serait invisible. */
:focus-visible { outline: 2px solid var(--titre-fg); outline-offset: 2px; }

h1, h2, h3 { color: var(--titre-fg); margin: 0; line-height: 1.2; text-wrap: balance; font-weight: 700; }

.wrap {
  width: 100%;
  max-width: 1080px;
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 48px);
}

/* Filet d'accent — signature de la marque */
.filet {
  display: block;
  width: var(--rule-length);
  height: var(--rule-thin);
  background: var(--rose-granit);
  border: 0;
  margin: 0;
  flex-shrink: 0;
}
.filet--thick { height: var(--rule-thick); }

/* --- En-tête --- */
.site-header {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 20;
  background: var(--bande-bg);
  border-bottom: 1px solid rgba(250,250,250,0.12);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  min-height: 64px;
  padding-block: 12px;
  flex-wrap: wrap;
}
.marque { display: flex; align-items: center; gap: var(--space-md); text-decoration: none; }
.marque picture { display: flex; }
.marque img { width: 22px; height: auto; }
.marque__nom {
  color: var(--bande-fg);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
}
.nav { display: flex; align-items: center; gap: clamp(12px, 3vw, 28px); flex-wrap: wrap; }
.nav a {
  color: var(--bande-fg);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  padding: 10px 2px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border-bottom: 2px solid transparent;
}
.nav a:hover, .nav a:focus-visible { color: var(--bande-fg); border-bottom-color: var(--rose-granit); }
.nav a:focus-visible { outline: 2px solid var(--rose-granit); outline-offset: 3px; }

/* --- Boutons --- */
.btn {
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  min-height: 48px;
  padding: 12px var(--space-2xl);
  border-radius: var(--radius-none);
  border: 1px solid var(--bleu-mineral);
  background: transparent;
  color: var(--titre-fg);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-align: center;
}
.btn:hover { color: var(--titre-fg); }
.btn:focus-visible { outline: 2px solid var(--rose-granit); outline-offset: 2px; }
.btn--accent {
  background: var(--rose-granit);
  border-color: var(--rose-granit);
  color: var(--on-rose-granit);
}
.btn--accent:hover { background: #CE7A7A; border-color: #CE7A7A; color: var(--on-rose-granit); }
.btn--sur-fonce { border-color: var(--bande-fg); color: var(--bande-fg); }
.btn--sur-fonce:hover { color: var(--bande-fg); background: rgba(250,250,250,0.08); }

/* --- Hero --- */
.hero {
  background: var(--bande-bg);
  color: var(--bande-fg);
  padding-block: clamp(56px, 10vw, 104px);
}
.hero__grille {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 64px);
  align-items: center;
}
.hero h1 {
  color: var(--bande-fg);
  font-size: clamp(30px, 5.2vw, 50px);
  letter-spacing: -0.01em;
  margin-top: var(--space-lg);
}
.hero__accroche {
  font-size: clamp(16px, 2vw, 19px);
  line-height: 1.6;
  color: var(--bande-fg);
  opacity: 0.88;
  max-width: 44ch;
  margin: var(--space-lg) 0 0;
}
.hero__baseline {
  font-style: italic;
  font-size: 15px;
  color: var(--rose-granit);
  margin: 0;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: var(--space-2xl);
}
.hero__visuel {
  display: flex;
  justify-content: center;
}
.hero__visuel img { width: clamp(120px, 20vw, 190px); height: auto; }

/* --- Sections --- */
.section { padding-block: clamp(48px, 8vw, 88px); }
.section--sable { background: var(--encart-bg); color: var(--encart-fg); }
.section__entete { display: flex; flex-direction: column; gap: 12px; margin-bottom: var(--space-3xl); max-width: 60ch; }
.section__entete h2 { font-size: clamp(24px, 3.6vw, 34px); }
.section__entete p { margin: 0; font-size: 17px; }

/* --- Grilles de cartes --- */
.grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(16px, 2.5vw, 28px);
}
.carte {
  background: var(--page-bg);
  border: 1px solid var(--trait);
  border-radius: var(--radius-none);
  padding: var(--space-2xl);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.section--sable .carte { background: var(--page-bg); }
.carte h3 { font-size: 18px; }
.carte p { margin: 0; font-size: 15px; }
.carte__icone { color: var(--rose-granit); }
.carte__icone svg { display: block; }

/* --- Étapes --- */
.etapes { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: clamp(20px, 3vw, 40px); counter-reset: etape; }
.etape { display: flex; flex-direction: column; gap: 12px; }
.etape__num {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  /* Sur sable-dune : pas de texte rose (design system), bleu-mineral à la place. */
  color: var(--titre-fg);
}
.etape h3 { font-size: 18px; }
.etape p { margin: 0; font-size: 15px; }

/* --- Liste de points --- */
.points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-lg); }
.points li { display: flex; gap: 14px; align-items: flex-start; font-size: 16px; }
.points svg { flex-shrink: 0; margin-top: 4px; color: var(--rose-granit); }

/* --- Encart --- */
.encart {
  background: var(--encart-bg);
  color: var(--encart-fg);
  padding: var(--space-2xl);
  border-radius: var(--radius-none);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.encart h3 { font-size: 16px; }
.encart p { margin: 0; font-size: 15px; }
.section--sable .encart { background: var(--page-bg); border: 1px solid var(--trait); }

.deux-colonnes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}

/* --- Bande de contact --- */
.contact {
  background: var(--bande-bg);
  color: var(--bande-fg);
  padding-block: clamp(48px, 8vw, 88px);
}
.contact h2 { color: var(--bande-fg); font-size: clamp(24px, 3.6vw, 34px); }
.contact p { font-size: 17px; opacity: 0.88; max-width: 52ch; }
.coordonnees { list-style: none; margin: var(--space-2xl) 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.coordonnees li { display: flex; align-items: center; gap: 12px; font-size: 16px; }
.coordonnees svg { flex-shrink: 0; color: var(--rose-granit); }
.coordonnees a { color: var(--bande-fg); text-decoration: underline; text-underline-offset: 3px; min-height: 44px; display: inline-flex; align-items: center; }
.coordonnees a:hover { color: var(--rose-granit); }

/* --- Formulaire --- */
.form { display: flex; flex-direction: column; gap: var(--space-lg); }
.champ { display: flex; flex-direction: column; gap: var(--space-md); }
.champ label { font-size: 14px; font-weight: 600; color: var(--bande-fg); }
.champ__facultatif { font-weight: 400; opacity: 0.8; }
.champ input, .champ textarea {
  font: inherit;
  font-size: 16px;
  padding: 12px 14px;
  min-height: 48px;
  border-radius: var(--radius-none);
  border: 1px solid rgba(250,250,250,0.35);
  background: rgba(250,250,250,0.06);
  color: var(--bande-fg);
}
.champ textarea { min-height: 120px; resize: vertical; }
.champ input::placeholder, .champ textarea::placeholder { color: rgba(250,250,250,0.55); }
.champ input:focus-visible, .champ textarea:focus-visible { outline: 2px solid var(--rose-granit); outline-offset: 2px; border-color: var(--rose-granit); }
.form__mention { font-size: 13px; opacity: 0.75; margin: 0; }

/* --- Pied de page --- */
.site-footer {
  background: var(--page-bg);
  border-top: 1px solid var(--trait);
  padding-block: var(--space-3xl);
  font-size: 14px;
}
.site-footer__inner { display: flex; flex-wrap: wrap; gap: var(--space-2xl); justify-content: space-between; align-items: flex-start; }
.site-footer .marque__nom { color: var(--titre-fg); }
.site-footer nav { display: flex; flex-direction: column; gap: var(--space-md); }
.site-footer nav a { text-decoration: none; }
.site-footer nav a:hover { text-decoration: underline; }

@media (max-width: 820px) {
  .hero__grille { grid-template-columns: minmax(0, 1fr); }
  .hero__visuel { order: -1; justify-content: flex-start; }
  .site-header__inner { min-height: 0; }
  .nav { width: 100%; justify-content: flex-start; gap: 18px; }
}

/* Anciens attributs style="" : la CSP (style-src 'self') les bloque. */
.section__entete--large { margin-bottom: 28px; }
.contact h2 { margin-top: 16px; }
.site-footer .marque { margin-bottom: 10px; }
.site-footer__texte { margin: 0; font-size: 14px; }
.site-footer__texte--italique { font-style: italic; }
.site-footer__texte + .site-footer__texte { margin-top: 6px; }
.champ--piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Skip link pour accessibilite (WCAG 2.1) */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
}
.skip:focus {
  left: 16px;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  z-index: 100;
  background: var(--page-bg);
  padding: 10px 16px;
  border-radius: var(--radius-sm);
}

/* --- Pied de page : liens légaux --- */
.site-footer__liens { margin-top: var(--space-md); }
.site-footer__liens a { text-decoration: underline; text-underline-offset: 3px; }

/* --- Formulaire : aide sous un champ --- */
.champ__aide { margin: 0; font-size: 13px; opacity: 0.8; }

/* --- Pages légales (mentions légales, confidentialité) --- */
.page-legale { max-width: 72ch; }
.page-legale h1 { font-size: clamp(28px, 4vw, 40px); }
.page-legale .filet { margin: var(--space-lg) 0 var(--space-2xl); }
.page-legale h2 { font-size: 20px; margin: var(--space-3xl) 0 var(--space-md); }
.page-legale h3 { font-size: 16px; margin: var(--space-2xl) 0 var(--space-md); }
.page-legale p, .page-legale li { font-size: 16px; line-height: 1.6; }
.page-legale ul { padding-left: 1.2em; }
.page-legale__maj { font-size: 14px; font-style: italic; margin: 0 0 var(--space-md); }
/* Avertissement données de santé : encart sable-dune, sans rouge (réservé aux rejets de facturation). */
.page-legale__alerte { background: var(--encart-bg); color: var(--encart-fg); padding: var(--space-lg); border-radius: var(--radius-none); }
.page-legale__tableau { width: 100%; border-collapse: collapse; font-size: 15px; margin: var(--space-md) 0; }
.page-legale__tableau th, .page-legale__tableau td { text-align: left; vertical-align: top; padding: var(--space-md); border-bottom: 1px solid var(--trait); }
.page-legale__tableau th { color: var(--titre-fg); font-weight: 600; }