@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 400; font-display: swap; src: url("/polices/newsreader-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 500; font-display: swap; src: url("/polices/newsreader-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Public Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/polices/public-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Public Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/polices/public-sans-latin-600-normal.woff2") format("woff2"); }
:root {
  color-scheme: light dark;
  --paper: #F7F6F2;
  --surface-raised: #FFFFFF;
  --ink: #15181D;
  --ink-muted: #545B66;
  --line: #D9D7D0;
  --marine: #0F2A47;
  --ciel: #60A8F0;
  --ciel-soft: #DCEBFB;
  --ciel-ink: #1F5FA8;
  --on-ciel: #0F2A47;
  --focus-ring: #1F5FA8;
  --space-1: 4px;
  --space-2: 8px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-16: 64px;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --font-serif: "Newsreader", Georgia, serif;
  --font-sans: "Public Sans", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #121417;
    --surface-raised: #1A1D22;
    --ink: #ECEDEF;
    --ink-muted: #A3AAB5;
    --line: #2E323A;
    --marine: #1E3D63;
    --ciel: #60A8F0;
    --ciel-soft: #17324F;
    --ciel-ink: #8CC3F7;
    --on-ciel: #0F2A47;
    --focus-ring: #8CC3F7;
  }
}
/* Composants du site. Aucune valeur de couleur, d'espacement ni de rayon en dur : tout passe par les
   variables issues de donnees/tokens.json (le design system). Ce fichier est aussi le bundle.css du
   design system dans Claude. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 28px;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--ciel-ink); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); }

.cadre { max-width: 1120px; margin: 0 auto; padding: 0 var(--space-4); }
@media (min-width: 768px) { .cadre { padding: 0 var(--space-8); } }

.evitement { position: absolute; left: -9999px; }
.evitement:focus { left: var(--space-4); top: var(--space-4); z-index: 10; background: var(--surface-raised); padding: var(--space-2) var(--space-4); }

/* En-tête */
.entete { border-bottom: 1px solid var(--line); }
.entete .cadre { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-6); padding-top: var(--space-4); padding-bottom: var(--space-4); }
.entete__nom { font-family: var(--font-serif); font-size: 26px; line-height: 32px; font-weight: 500; color: var(--ink); text-decoration: none; letter-spacing: -.01em; }
.entete__nav ul { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-6); margin: 0; padding: 0; list-style: none; }
.entete__nav a { color: var(--ink); text-decoration: none; font-size: 15px; line-height: 24px; }
.entete__nav a:hover { text-decoration: underline; }
.entete__nav a[aria-current="page"] { color: var(--ciel-ink); text-decoration: underline; text-decoration-thickness: 2px; }

/* Typographie */
h1, h2, .titre-serif { font-family: var(--font-serif); font-weight: 500; letter-spacing: -.01em; margin: 0; }
h1 { font-size: 36px; line-height: 42px; }
h2 { font-size: 28px; line-height: 34px; }
h3 { font-size: 20px; line-height: 28px; font-weight: 600; margin: 0; }
@media (min-width: 768px) {
  h1 { font-size: 40px; line-height: 46px; }
  .une h1 { font-size: 56px; line-height: 60px; }
}
.surtitre { font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); margin: 0 0 var(--space-4); }
.chapo { font-size: 20px; line-height: 30px; color: var(--ink-muted); margin: var(--space-4) 0 0; max-width: 680px; }
p { margin: 0; }
p + p { margin-top: var(--space-4); }
.discret { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.note { margin-top: var(--space-6); max-width: 680px; }

/* Sections */
.section { padding: var(--space-8) 0; }
@media (min-width: 768px) { .section { padding: var(--space-16) 0; } }
.section + .section { border-top: 1px solid var(--line); }
.section--relief { background: var(--ciel-soft); border-top: 0; }
.section--relief + .section { border-top: 0; }
.section__tete { max-width: 720px; margin-bottom: var(--space-8); }
.section__tete p { margin-top: var(--space-2); color: var(--ink-muted); }
.une { padding: var(--space-8) 0; }
@media (min-width: 768px) { .une { padding: var(--space-16) 0; } }

/* Boutons */
.actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-8); }
.bouton { display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--space-6); border-radius: var(--radius-md); border: 1px solid var(--ink); color: var(--ink); background: transparent; font-weight: 600; font-size: 16px; text-decoration: none; }
.bouton:hover { background: var(--surface-raised); text-decoration: none; }
.bouton--principal { background: var(--ciel); border-color: var(--ciel); color: var(--on-ciel); }
.bouton--principal:hover { background: var(--ciel); text-decoration: underline; }

/* Grilles et cartes */
.grille { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
@media (min-width: 768px) { .grille--2 { grid-template-columns: repeat(2, 1fr); } .grille--3 { grid-template-columns: repeat(3, 1fr); } }
.carte { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-6); }

.famille__phrase { font-family: var(--font-serif); font-size: 24px; line-height: 30px; font-weight: 500; margin: 0 0 var(--space-4); }
.famille__phrase::before { content: "« "; }
.famille__phrase::after { content: " »"; }
.famille__exemples { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--line); font-size: 15px; line-height: 24px; color: var(--ink-muted); }
.famille__exemples strong { color: var(--ink); font-weight: 600; }

.etapes { counter-reset: etape; list-style: none; margin: 0; padding: 0; }
.etape { counter-increment: etape; }
.etape h3::before { content: counter(etape) ". "; color: var(--ciel-ink); }
.etape p { margin-top: var(--space-2); }

.marque { display: flex; flex-direction: column; gap: var(--space-2); }
.marque__categorie { font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.marque__nom { font-family: var(--font-serif); font-size: 28px; line-height: 34px; font-weight: 500; margin: 0; }
.marque__lien { margin-top: auto; padding-top: var(--space-4); font-weight: 600; }

.liste-simple { margin: 0; padding-left: var(--space-6); }
.liste-simple li + li { margin-top: var(--space-2); }

/* Fiche d'identité : un registre, une ligne par donnée */
.fiche { margin: 0; border-top: 1px solid var(--line); max-width: 760px; }
.fiche__ligne { display: grid; grid-template-columns: 1fr; gap: 0 var(--space-6); padding: var(--space-4) 0; border-bottom: 1px solid var(--line); }
@media (min-width: 640px) { .fiche__ligne { grid-template-columns: 220px 1fr; } }
.fiche dt { font-size: 14px; line-height: 20px; color: var(--ink-muted); padding-top: 4px; }
.fiche dd { margin: 0; }

/* Texte long (pages juridiques) */
.texte { max-width: 720px; }
.texte h1 { margin-bottom: var(--space-4); }
.texte h2 { font-size: 24px; line-height: 30px; margin: var(--space-8) 0 var(--space-2); }
.texte p, .texte ul { margin: var(--space-2) 0 0; }
.texte ul { padding-left: var(--space-6); }

/* Pied : l'identité de la société, sur aplat marine */
.pied { background: var(--marine); color: var(--paper); padding: var(--space-8) 0; margin-top: var(--space-16); font-size: 15px; line-height: 24px; }
.pied a { color: var(--paper); }
.pied .cadre { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
@media (min-width: 768px) { .pied .cadre { grid-template-columns: 2fr 1fr; } }
.pied__nom { font-family: var(--font-serif); font-size: 24px; line-height: 30px; margin: 0 0 var(--space-2); }
.pied address { font-style: normal; }
.insecable { white-space: nowrap; }
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li + li { margin-top: var(--space-1); }
@media (prefers-color-scheme: dark) {
  .pied, .pied a { color: var(--ink); }
}