/* Site public — refonte « institutionnel premium » (maquette Claude Design, août 2026).
   Aucun JavaScript, aucune ressource tierce : les polices sont servies depuis /fonts/
   (Newsreader et Instrument Sans, licence SIL OFL — voir fonts/LICENCE.txt).
   Palette : encre #211f1a · fond #f7f5f0 · panneau #fffefb · vert profond #365a60 · lignes #e3ded2 */

@font-face {
  font-family: "Newsreader";
  src: url("/fonts/newsreader-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/fonts/instrument-sans-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/fonts/instrument-sans-italique-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

:root {
  --encre: #211f1a;
  --texte-2: #4b463c;
  --muted: #6d675b;
  --discret: #8a8474;
  --fond: #f7f5f0;
  --panneau: #fffefb;
  --ligne: #e3ded2;
  --ligne-2: #c9c2b0;
  --accent: #365a60;
  --accent-fonce: #24444a;
  --sombre: #1f2b29;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--fond); color: var(--encre);
  font-family: "Instrument Sans", system-ui, sans-serif;
  font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: "Newsreader", Georgia, serif; font-weight: 500; letter-spacing: -0.01em; }
a { color: var(--accent); }
a:hover, a:focus { color: var(--accent-fonce); }
.mono {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent);
}
.contenu { max-width: 1240px; margin: 0 auto; padding-left: 48px; padding-right: 48px; }

/* --- En-tête --- */
.entete { border-bottom: 1px solid var(--ligne); }
.entete .contenu { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding-top: 18px; padding-bottom: 18px; }
.marque { display: flex; align-items: center; flex: 0 0 auto; }
.marque a { display: block; line-height: 0; text-decoration: none; }
.marque img { display: block; width: auto; height: 52px; }
.nav-principale { display: flex; align-items: center; flex-wrap: wrap; gap: 26px; }
.nav-principale a { font-size: 15px; color: var(--texte-2); text-decoration: none; }
.nav-principale a:hover { color: var(--encre); }
.nav-principale a[aria-current="page"] { color: var(--encre); font-weight: 600; }
.nav-separateur { width: 1px; height: 20px; background: #d8d2c2; }
.nav-principale .acces-outil { font-weight: 600; color: var(--accent); }
/* Sans ces règles, « .nav-principale a » (plus spécifique que « .bouton ») repeint en
   sombre le texte du bouton de démonstration posé dans la barre. */
.nav-principale .bouton { color: var(--fond); }
.nav-principale .bouton:hover, .nav-principale .bouton:focus { color: #ffffff; }

/* --- Boutons --- */
.bouton, .bouton-secondaire {
  display: inline-block; font-size: 16px; font-weight: 600; text-decoration: none;
  padding: 14px 24px; border-radius: 4px;
}
.bouton { color: var(--fond); background: var(--accent); }
.bouton:hover, .bouton:focus { background: var(--accent-fonce); color: #ffffff; }
.bouton-secondaire { color: var(--encre); border: 1px solid var(--ligne-2); padding: 13px 24px; }
.bouton-secondaire:hover { border-color: var(--encre); color: var(--encre); }
.bouton-petit { font-size: 15px; padding: 10px 18px; }

/* --- Héros (accueil) --- */
.heros { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 64px; align-items: center; padding-top: 84px; padding-bottom: 68px; }
.heros h1 { font-size: 57px; line-height: 1.08; margin: 18px 0 22px; max-width: 570px; letter-spacing: -0.015em; }
.heros .accroche { font-size: 18.5px; line-height: 1.65; color: var(--muted); margin: 0 0 30px; max-width: 540px; text-wrap: pretty; }
.heros-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.heros-note { font-size: 13.5px; color: var(--discret); margin: 18px 0 0; }
.heros-visuel { margin: 0; }
.heros-visuel .cadre { background: var(--panneau); border: 1px solid var(--ligne); border-radius: 6px; padding: 10px; box-shadow: 0 18px 40px rgba(33, 31, 26, 0.07); }
.heros-visuel img, .heros-visuel .visuel-attendu { display: block; width: 100%; height: 370px; object-fit: cover; border-radius: 3px; }
.visuel-attendu { display: grid; place-items: center; background: #efece4; color: var(--discret); font-size: 14px; padding: 24px; text-align: center; }
.heros-visuel figcaption { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--discret); margin: 12px 4px 0; }

/* --- Bandeau de chiffres (accueil) --- */
.chiffres { border-top: 1px solid var(--ligne); border-bottom: 1px solid var(--ligne); background: var(--panneau); }
.chiffres .contenu { display: grid; grid-template-columns: repeat(4, 1fr); padding-top: 30px; padding-bottom: 30px; }
.chiffres div { padding: 6px 28px; }
.chiffres div:first-child { padding-left: 0; }
.chiffres div + div { border-left: 1px solid var(--ligne); }
.chiffres strong { font-family: "Newsreader", Georgia, serif; font-size: 31px; font-weight: 500; }
.chiffres span { display: block; font-size: 13.5px; color: var(--muted); margin-top: 4px; }

/* --- Sections (accueil) --- */
.section { padding-top: 88px; padding-bottom: 80px; }
.section-titre { max-width: 640px; margin-bottom: 44px; }
.section-titre h2, .section h2 { font-size: 40px; line-height: 1.15; margin: 14px 0 0; }

/* --- Grille des outils (accueil et Solutions) --- */
.outils { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.outil {
  text-decoration: none; color: inherit; background: var(--panneau);
  border: 1px solid var(--ligne); border-radius: 6px; padding: 22px 22px 24px; display: block;
}
.outil:hover { border-color: var(--accent); color: inherit; }
.outil .num { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; color: var(--discret); }
.outil strong { display: block; font-size: 17px; margin: 10px 0 8px; }
.outil span:not(.num) { display: block; font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.outil-plus { background: transparent; border-style: dashed; border-color: var(--ligne-2); }
.prose .outils { margin: 0 0 48px; }
.section-suite { margin: 26px 0 0; max-width: 820px; font-size: 15px; line-height: 1.65; color: var(--muted); }
.section-suite a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* --- Chaîne de travail (accueil — la classe `chaine` des listes de pages intérieures
       est stylée plus bas, dans la prose) --- */
section.chaine { border-top: 1px solid var(--ligne); }
.chaine-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 40px; margin-bottom: 40px; }
.chaine-tete h2 { margin: 0; }
.chaine-tete p { font-size: 15px; color: var(--muted); margin: 0; max-width: 380px; }
.etapes { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.etape { border-top: 2px solid #d8d2c2; padding-top: 16px; }
.etape:first-child { border-top-color: var(--accent); }
.etape .num { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; color: var(--discret); }
.etape:first-child .num { color: var(--accent); }
.etape strong { display: block; font-size: 16px; margin: 8px 0 6px; }
.etape span:not(.num) { display: block; font-size: 13.5px; line-height: 1.55; color: var(--muted); }

/* --- Comparatif mesure / modèle (accueil) --- */
.parti-pris { background: var(--sombre); color: #ece7da; }
.parti-pris .contenu { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 72px; align-items: start; padding-top: 88px; padding-bottom: 88px; }
.parti-pris .mono { color: #8fb5ad; }
.parti-pris h2 { font-size: 42px; line-height: 1.12; margin: 16px 0 20px; }
.parti-pris p { font-size: 16px; line-height: 1.7; color: #b9c2bc; margin: 0 0 16px; text-wrap: pretty; }
.parti-pris p.affirmation { color: #ece7da; margin-bottom: 0; }
.comparatif { font-size: 14.5px; }
.comparatif-ligne { display: grid; grid-template-columns: 130px 1fr 1fr; gap: 0 24px; padding: 18px 0; border-bottom: 1px solid rgba(236, 231, 218, 0.12); align-items: start; }
.comparatif-ligne:last-child { border-bottom: 0; }
.comparatif-tete { padding: 0 0 12px; border-bottom: 1px solid rgba(236, 231, 218, 0.25); }
.comparatif-tete span { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #9aa8a2; }
.comparatif-tete span:last-child { color: #8fb5ad; }
.comparatif-ligne strong { font-size: 14px; }
.comparatif .gps { color: #9aa8a2; line-height: 1.55; }
.comparatif .mesure { color: #ffffff; line-height: 1.55; }

/* --- Confiance (accueil) --- */
.confiance { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.confiance .trait { display: block; width: 34px; height: 2px; background: var(--accent); margin-bottom: 16px; }
.confiance strong { display: block; font-size: 16.5px; margin-bottom: 8px; }
.confiance p { font-size: 14.5px; line-height: 1.6; color: var(--muted); margin: 0; }

/* --- Publics (accueil et Pour qui ?) --- */
.publics { border-top: 1px solid var(--ligne); border-bottom: 1px solid var(--ligne); background: var(--panneau); }
.publics .contenu { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; padding-top: 72px; padding-bottom: 72px; }
.publics-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.public-carte { border: 1px solid var(--ligne); border-radius: 6px; padding: 28px; background: var(--fond); }
.public-carte strong { display: block; font-family: "Newsreader", Georgia, serif; font-size: 23px; font-weight: 500; margin-bottom: 10px; }
.public-carte p { font-size: 15px; line-height: 1.6; color: var(--muted); margin: 0 0 18px; }
.public-carte a { font-size: 14.5px; font-weight: 600; text-decoration: none; }

/* --- Appel final (accueil) --- */
.appel-final { padding-top: 100px; padding-bottom: 100px; text-align: center; }
.appel-final h2 { font-size: 42px; line-height: 1.15; margin: 0 auto 18px; max-width: 720px; }
.appel-final p { font-size: 16.5px; line-height: 1.65; color: var(--muted); margin: 0 auto 32px; max-width: 620px; text-wrap: pretty; }
.appel-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; }

/* --- Pied de page --- */
.pied { border-top: 1px solid var(--ligne); }
.pied .contenu { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 32px; padding-top: 34px; padding-bottom: 44px; }
.pied-marque span { font-family: "Newsreader", Georgia, serif; font-size: 20px; font-weight: 600; }
.pied-marque p { font-size: 13.5px; color: var(--discret); margin: 6px 0 0; }
.pied nav { display: flex; flex-wrap: wrap; gap: 26px; }
.pied nav a { font-size: 14px; color: var(--muted); text-decoration: none; }
.pied nav a:hover { color: var(--encre); }

/* --- Accessibilité : lien d'évitement --- */
.evitement { position: absolute; left: -9999px; top: 0; background: var(--encre); color: #fff; padding: 10px 16px; z-index: 100; }
.evitement:focus { left: 12px; top: 12px; }

/* --- Pages intérieures --- */
.page-tete { border-bottom: 1px solid var(--ligne); background: var(--panneau); }
.page-tete .contenu { padding-top: 52px; padding-bottom: 46px; }
.ariane { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--discret); }
.ariane a { color: var(--discret); text-decoration: none; }
.ariane a:hover { color: var(--accent); }
.ariane span[aria-hidden] { margin: 0 2px; }
.page-tete h1 { font-size: 44px; line-height: 1.1; margin: 16px 0 18px; max-width: 780px; letter-spacing: -0.015em; }
.chapo { font-size: 18.5px; line-height: 1.65; color: var(--muted); margin: 0; max-width: 680px; text-wrap: pretty; }
.article { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 64px; align-items: start; padding-top: 56px; padding-bottom: 88px; }
.article-pleine { grid-template-columns: minmax(0, 1fr); }
.prose { max-width: 680px; }
.article-pleine .prose { max-width: none; }
.prose h2 { font-size: 28px; line-height: 1.2; margin: 48px 0 14px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-family: "Instrument Sans", system-ui, sans-serif; font-size: 17px; font-weight: 600; margin: 28px 0 8px; }
.prose p, .prose li, .prose dd { font-size: 16px; line-height: 1.7; color: var(--texte-2); }
.prose p { margin: 0 0 16px; }
.prose ul, .prose ol { margin: 0 0 16px; padding-left: 24px; }
.prose li { margin-bottom: 8px; }
.prose li::marker { color: var(--accent); }
.prose strong { color: var(--encre); }
.prose .appel { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--ligne); }
.prose .note { font-size: 14px; line-height: 1.6; color: var(--muted); border: 1px solid var(--ligne); border-radius: 6px; background: var(--panneau); padding: 14px 18px; }
.prose .encadre-chiffres { border: 1px dashed var(--ligne-2); border-radius: 6px; padding: 18px; color: var(--discret); font-size: 14px; }
.rail { position: sticky; top: 24px; }
.rail-carte { border: 1px solid var(--ligne); border-radius: 6px; background: var(--panneau); padding: 22px; }
.rail-carte strong { display: block; font-family: "Newsreader", Georgia, serif; font-size: 21px; font-weight: 500; margin-bottom: 8px; }
.rail-carte p { font-size: 14px; line-height: 1.55; color: var(--muted); margin: 0 0 16px; }
.rail-lien { display: block; margin-top: 12px; font-size: 14px; font-weight: 600; text-decoration: none; }

/* --- Listes définitions des pages intérieures (glossaire, mentions légales) --- */
.prose .glossaire dt, .prose .identite dt { font-weight: 600; color: var(--encre); margin-top: 16px; }
.prose .glossaire dd, .prose .identite dd { margin: 2px 0 0; color: var(--texte-2); }
.prose ol.chaine li { margin-bottom: 8px; }

/* --- Bandeau des pages incomplètes et marqueur des informations à fournir.
       Volontairement voyants : une page à trous ne doit pas pouvoir être relue sans
       qu'on les voie. Ils disparaissent le jour où la porte de publication passe au vert. --- */
.incomplet {
  font-size: 14px; line-height: 1.6; color: #6b4e0a;
  border: 1px solid #e2c481; border-radius: 6px; background: #fff7e0;
  padding: 14px 18px; margin: 0 0 24px;
}
figcaption.incomplet { display: block; margin-top: 12px; }
.a-completer {
  background: #fff7e0; box-shadow: inset 0 -2px 0 #b8791b;
  padding: 0 3px; font-style: italic;
}

/* --- Responsive --- */
@media (max-width: 1080px) {
  .contenu { padding-left: 28px; padding-right: 28px; }
  .heros { grid-template-columns: 1fr; gap: 40px; padding-top: 48px; }
  .heros h1 { font-size: 42px; }
  .chiffres .contenu, .confiance, .outils { grid-template-columns: repeat(2, 1fr); }
  .chiffres div { padding: 6px 20px 6px 0; border-left: 0 !important; }
  .etapes { grid-template-columns: repeat(3, 1fr); gap: 24px 18px; }
  .parti-pris .contenu, .publics .contenu { grid-template-columns: 1fr; gap: 40px; }
  .publics-grille { grid-template-columns: 1fr; }
  .chaine-tete { flex-direction: column; gap: 12px; }
  .article { grid-template-columns: 1fr; gap: 40px; }
  .rail { position: static; }
  .page-tete h1 { font-size: 34px; }
}
@media (max-width: 640px) {
  .entete .contenu { flex-direction: column; align-items: flex-start; gap: 14px; }
  .marque img { height: 44px; }
  .heros h1 { font-size: 34px; }
  .section-titre h2, .section h2, .parti-pris h2, .appel-final h2 { font-size: 30px; }
  .outils, .confiance, .etapes, .chiffres .contenu { grid-template-columns: 1fr; }
  .comparatif-ligne, .comparatif-tete { grid-template-columns: 1fr; gap: 6px; }
}

/* Formulaire de contact : un formulaire HTML nu, sans script, aux couleurs du site. */
.formulaire { margin: 20px 0 48px; }
.formulaire label { display: block; margin: 0 0 16px; font-size: 14px; font-weight: 600; color: var(--encre); }
.formulaire input[type="text"], .formulaire input[type="email"], .formulaire select, .formulaire textarea {
  display: block; width: 100%; box-sizing: border-box; margin-top: 6px; padding: 10px 12px;
  font: inherit; font-weight: 400; font-size: 15px; color: var(--encre); background: var(--panneau);
  border: 1px solid var(--ligne-2); border-radius: 6px;
}
.formulaire input:focus, .formulaire select:focus, .formulaire textarea:focus {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent);
}
.formulaire textarea { resize: vertical; min-height: 160px; }
.formulaire .champs-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.formulaire .consentement { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: 14px; line-height: 1.55; color: var(--muted); }
.formulaire .consentement input { margin: 3px 0 0; flex: none; }
.formulaire .piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formulaire button { font-size: 15px; }
@media (max-width: 640px) { .formulaire .champs-2 { grid-template-columns: 1fr; } }