/* ============================================================
   orpalia.fr — feuille de style commune à toutes les pages
   Charte : marine #12314A (dominante, texte), teal #1F6F68
   (structure, liens, accents), or #B8934A en filet décoratif
   uniquement, fond clair #F4F2EE. Direction typographique B
   (26/08/2026) : Inter pour le texte, IBM Plex Mono pour les
   données et étiquettes. Polices auto-hébergées (dette D10).

   Contrastes WCAG 2.1 (formule officielle), calculés le 24/09/2026 :
   clair  — marine/#F4F2EE 12,01 · marine/blanc 13,43
            ink-soft #3D5266/#F4F2EE 7,23 · /blanc 8,09
            ink-faint #56687A/#F4F2EE 5,14 · /blanc 5,74
            teal/#F4F2EE 5,32 · teal/blanc 5,95
            bouton : #F4F2EE sur teal 5,32
            bordure bouton secondaire (teal)/#F4F2EE 5,32 (≥ 3:1)
            or/#F4F2EE 2,57 → filet décoratif seulement, jamais texte
   sombre — blanc/#12314A 13,43 · blanc/#0D2537 15,71
            ink-soft #C8D3DD/#12314A 8,84 · /#0D2537 10,34
            ink-faint #A9B8C6/#12314A 6,62 · /#0D2537 7,75
            teal éclairci #7CCBC1/#12314A 7,14 · /#0D2537 8,35
            bouton : #12314A sur #7CCBC1 7,14
            bordure bouton secondaire (#7CCBC1)/#12314A 7,14
   ============================================================ */

@font-face{
  font-family:"Inter";
  font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/inter-latin-400-normal.woff2") format("woff2");
}
@font-face{
  font-family:"Inter";
  font-style:normal; font-weight:600; font-display:swap;
  src:url("../fonts/inter-latin-600-normal.woff2") format("woff2");
}
@font-face{
  font-family:"IBM Plex Mono";
  font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
}
@font-face{
  font-family:"IBM Plex Mono";
  font-style:normal; font-weight:500; font-display:swap;
  src:url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
}

/* ---------- Jetons — thème clair par défaut ---------- */
:root{
  color-scheme:light dark;
  --paper:       #F4F2EE;
  --raised:      #FFFFFF;
  --ink:         #12314A;
  --ink-soft:    #3D5266;
  --ink-faint:   #56687A;
  --rule:        #DDD8CE;   /* filet décoratif, non signifiant */
  --accent:      #1F6F68;
  --on-accent:   #F4F2EE;
  --gold:        #B8934A;   /* filet / point décoratif uniquement */

  --measure: 36rem;
  --s1: .375rem;  --s2: .75rem;   --s3: 1.25rem;
  --s4: 2rem;     --s5: 3.25rem;  --s6: 5rem;

  --body: "Inter", "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

/* ---------- Thème sombre : fond marine, texte blanc, teal éclairci ---------- */
@media (prefers-color-scheme: dark){
  :root{
    --paper:     #12314A;
    --raised:    #0D2537;
    --ink:       #FFFFFF;
    --ink-soft:  #C8D3DD;
    --ink-faint: #A9B8C6;
    --rule:      #2A4760;
    --accent:    #7CCBC1;
    --on-accent: #12314A;
  }
}

/* ---------- Base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:1.0625rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{ margin:0; font-weight:600; line-height:1.2; letter-spacing:-.015em; text-wrap:balance; }
p{ margin:0; }
a{ color:var(--accent); text-underline-offset:.18em; }
a:hover{ text-decoration-thickness:2px; }
img{ max-width:100%; height:auto; }

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

.skip{
  position:absolute; left:var(--s3); top:-4rem;
  background:var(--raised); color:var(--ink);
  padding:var(--s1) var(--s2); z-index:10;
}
.skip:focus{ top:var(--s2); }

.wrap{ width:100%; max-width:68rem; margin-inline:auto; padding-inline:1rem; }
@media (min-width:48rem){ .wrap{ padding-inline:var(--s4); } }

.eyebrow{
  font-family:var(--mono);
  font-size:.75rem;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--accent);
  margin:0 0 var(--s2);
}
.lede{ font-size:1.1875rem; line-height:1.6; color:var(--ink-soft); max-width:var(--measure); }

/* ---------- En-tête ---------- */
.masthead{ border-bottom:1px solid var(--rule); }
.masthead__in{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:var(--s2) var(--s3);
  padding-block:var(--s3);
}
.logo{ display:inline-block; line-height:0; }
.logo img{ width:147px; height:42px; }
.masthead__note{
  font-family:var(--mono);
  font-size:.75rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-faint);
}

/* ---------- Hero ---------- */
.hero{ padding-block:var(--s6) var(--s5); }
.hero__grid{ display:grid; gap:var(--s5); }
@media (min-width:60rem){
  .hero__grid{ grid-template-columns:minmax(0,1fr) minmax(0,24rem); align-items:start; }
}
.hero h1{ font-size:clamp(2rem, 1.4rem + 2.6vw, 3rem); margin-bottom:var(--s3); }
.hero h1 em{ font-style:normal; color:var(--accent); }
.hero__lede{ margin-bottom:var(--s4); }

.actions{ display:flex; flex-wrap:wrap; gap:var(--s2) var(--s3); align-items:center; }
.btn{
  display:inline-block;
  font-size:.9375rem;
  font-weight:600;
  text-decoration:none;
  padding:.75rem 1.4rem;
  background:var(--accent);
  color:var(--on-accent);
  border:2px solid var(--accent);
  border-radius:3px;
}
.btn:hover{ text-decoration:underline; }
.btn--ghost{ background:transparent; color:var(--ink); }
.note-rgpd{ margin-top:var(--s3); font-size:.875rem; color:var(--ink-faint); max-width:var(--measure); }
.note-rgpd a{ color:var(--accent); }

/* ---- aperçu de la structure d'un fichier ---- */
.registre{
  background:var(--raised);
  border:1px solid var(--rule);
  border-top:3px solid var(--accent);
}
.registre__head{ padding:var(--s3) var(--s3) var(--s2); border-bottom:1px solid var(--rule); }
.registre__title{
  font-family:var(--mono); font-size:.75rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; margin-bottom:var(--s1);
}
.registre__sub{ font-size:.8125rem; line-height:1.45; color:var(--ink-faint); }
.registre__body{ padding:var(--s2) 0; }
.row{
  display:grid; grid-template-columns:1fr auto; gap:.15rem var(--s3);
  padding:.7rem var(--s3); border-bottom:1px solid var(--rule);
}
.row:last-child{ border-bottom:0; }
.row__name{ font-family:var(--mono); font-size:.875rem; font-weight:500; }
.row__naf{ font-family:var(--mono); font-size:.8125rem; color:var(--accent); text-align:right; white-space:nowrap; }
.row__meta{ grid-column:1 / -1; font-size:.8125rem; color:var(--ink-faint); font-variant-numeric:tabular-nums; }
.registre__foot{
  padding:var(--s2) var(--s3); border-top:1px solid var(--rule);
  font-family:var(--mono); font-size:.75rem; letter-spacing:.05em; color:var(--ink-faint);
}

/* ---------- Sections ---------- */
.band{ border-top:1px solid var(--rule); padding-block:var(--s6); }
.band--raised{ background:var(--raised); }
.band h2{ font-size:clamp(1.5rem, 1.25rem + 1vw, 1.95rem); margin-bottom:var(--s3); max-width:30rem; }
.band__intro{ max-width:var(--measure); color:var(--ink-soft); }
.prose{ max-width:var(--measure); display:flex; flex-direction:column; gap:var(--s3); color:var(--ink-soft); }
.prose strong{ color:var(--ink); font-weight:600; }

.steps{ list-style:none; margin:var(--s5) 0 0; padding:0; display:grid; gap:var(--s4); }
@media (min-width:52rem){ .steps{ grid-template-columns:repeat(3,1fr); } }
.step{ display:flex; flex-direction:column; gap:var(--s2); padding-top:var(--s3); border-top:2px solid var(--accent); }
.step__n{ font-family:var(--mono); font-size:.75rem; font-weight:500; letter-spacing:.1em; color:var(--accent); }
.step h3{ font-size:1.125rem; }
.step p{ font-size:.9375rem; color:var(--ink-soft); }

/* ---- colonnes du fichier ---- */
.fields-group{ margin-top:var(--s5); }
.fields-group h3{ font-size:1.0625rem; margin-bottom:var(--s1); }
.fields-group > p{ font-size:.9375rem; color:var(--ink-soft); max-width:var(--measure); }
.fields{ margin:var(--s3) 0 0; border-top:1px solid var(--ink-faint); }
.field{ display:grid; gap:var(--s1) var(--s4); padding:var(--s3) 0; border-bottom:1px solid var(--rule); margin:0; }
@media (min-width:44rem){ .field{ grid-template-columns:15rem minmax(0,1fr); align-items:baseline; } }
.field dt{ font-family:var(--mono); font-size:.8125rem; font-weight:500; }
.field dd{ margin:0; font-size:.9375rem; color:var(--ink-soft); }
.fields-note{ margin-top:var(--s3); font-size:.875rem; color:var(--ink-faint); max-width:var(--measure); }

/* ---- partis pris ---- */
.tenets{ list-style:none; margin:var(--s5) 0 0; padding:0; display:grid; gap:var(--s4); }
@media (min-width:52rem){ .tenets{ grid-template-columns:repeat(3,1fr); } }
.tenet{ display:flex; flex-direction:column; gap:var(--s2); }
.tenet h3{ font-size:1.0625rem; letter-spacing:0; }
.tenet p{ font-size:.9375rem; color:var(--ink-soft); }
.tenet__rule{ width:2.5rem; height:2px; background:var(--gold); } /* filet décoratif or */

/* ---- contact ---- */
.contact__grid{ display:grid; gap:var(--s4); align-items:start; }
@media (min-width:52rem){ .contact__grid{ grid-template-columns:minmax(0,1fr) auto; gap:var(--s6); } }
.contact__mail{ font-family:var(--mono); font-size:1rem; }

/* ---------- Pages de texte (légal, 404) ---------- */
.doc{ padding-block:var(--s5) var(--s6); }
.doc h1{ font-size:clamp(1.75rem, 1.4rem + 1.4vw, 2.4rem); margin-bottom:var(--s3); }
.doc h2{ font-size:1.25rem; margin:var(--s5) 0 var(--s2); }
.doc p, .doc ul, .doc dl{ max-width:var(--measure); color:var(--ink-soft); }
.doc p + p{ margin-top:var(--s2); }
.doc ul{ padding-left:1.2rem; margin:var(--s2) 0 0; }
.doc li + li{ margin-top:var(--s1); }
.doc strong{ color:var(--ink); font-weight:600; }
.doc .maj{ font-family:var(--mono); font-size:.8125rem; color:var(--ink-faint); }
.doc dl{ margin:var(--s2) 0 0; display:grid; gap:var(--s1) var(--s3); }
@media (min-width:40rem){ .doc dl{ grid-template-columns:13rem minmax(0,1fr); } }
.doc dt{ font-family:var(--mono); font-size:.8125rem; font-weight:500; color:var(--ink); padding-top:.15rem; }
.doc dd{ margin:0; }

/* ---------- Pied ---------- */
.foot{ border-top:1px solid var(--rule); padding-block:var(--s4); font-size:.875rem; color:var(--ink-faint); }
.foot__in{ display:flex; flex-wrap:wrap; gap:var(--s2) var(--s4); justify-content:space-between; align-items:center; }
.foot nav ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:var(--s1) var(--s3); }
.foot a{ color:var(--ink-soft); }
.foot a:hover{ color:var(--ink); }

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
}