@import url("https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400&family=Big+Shoulders+Display:wght@800;900&family=IBM+Plex+Mono:wght@500;600&family=Kanit:ital,wght@1,800&display=swap");
/* ==========================================================================
   au-cabinet.fr — feuille commune des pages d'outils
   Charte « Chrome & encre » (docs/charte-graphique.md)
   --------------------------------------------------------------------------
   Les polices de la charte sont chargées par l'@import ci-dessus.
   Chaque page d'outil la charge APRÈS sa propre feuille de style :
     <link rel="stylesheet" href="/_commun/charte.css">
   puis règle sa couleur de rubrique et ses cas particuliers dans un petit bloc
   <style id="ac-charte-page">, et, si elle produit un document final
   (ordonnance, certificat, synthèse…), ajoute la capsule :
     <script src="/_commun/capsule.js" data-cible="#id-du-resultat"
             data-libelle="Ordonnance" defer></script>

   Règles :
   - habillage seulement : aucun texte, calcul ni script de la page n'est touché ;
   - les couleurs ne s'appliquent qu'en mode normal : un mode « contraste
     renforcé » (data-contrast="high") garde les siennes ;
   - les jetons ci-dessous couvrent les noms utilisés par les trois familles de
     pages du site (Fraunces/Plex, Baloo/Atkinson, Archivo) : un jeton qu'une
     page n'utilise pas est sans effet.
   ========================================================================== */

:root{
  --ac-encre:#1B2B38; --ac-encre-2:#3A4A56; --ac-encre-3:#4A5A66;
  --ac-papier:#F5F1E6; --ac-surface:#FFFDF7; --ac-sable:#E6CFA0; --ac-filet:#D3C9B3;
  --ac-flamme:#F47A30; --ac-signal:#E0502C; --ac-rouille-txt:#9A3A24;
  --ac-rubrique:#B5462C;          /* réglée par chaque page (couleur de sa rubrique) */
  --ac-rubrique-txt:#9A3A24;      /* version assez foncée pour du texte sur papier */
  --ac-logo:"Kanit","Arial Black","Helvetica Neue",sans-serif;
  --ac-display:"Big Shoulders Display","Arial Narrow","Roboto Condensed",Impact,sans-serif;
  --ac-body:"Atkinson Hyperlegible","Segoe UI",system-ui,-apple-system,sans-serif;
  --ac-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --ac-arc:linear-gradient(115deg,#B5462C 0 10%,#D08A35 10% 20%,#2F6B4F 20% 30%,#3A8288 30% 40%,#4F6FAE 40% 50%,
           #9468B0 50% 60%,#D09A8A 60% 70%,#E6CFA0 70% 80%,#B8D4CC 80% 90%,#D6E4EA 90%);
}

/* ---------- échelle typographique unique (référence : page MDPH à 1 440 px) ----------
   En rem : suit les deux réglages de taille du texte (bandeau du site, « Texte » des pages).
   Valeurs à 1 440 px et taille 100 % : corps 18 px, h1 et h2 37,4 px, h3 23 px, étiquettes
   14,4 px, petit texte 15,2 px, onglets 19,4 px. Appliquées à toutes les pages par la section
   « échelle commune » plus bas (sauf qui-prescrit/ et pai/, générées ailleurs). */
:root{
  --fs-corps:1.125rem;                      /* 18 px : texte courant (Atkinson Hyperlegible) */
  --fs-h1:clamp(1.8rem,2.6vw,2.34rem);      /* 37,4 px à 1 440 px : titre de la carte d'ouverture */
  --fs-h2:clamp(1.8rem,2.6vw,2.34rem);      /* 37,4 px à 1 440 px : titre de section */
  --fs-h3:1.44rem;                          /* 23 px : intertitre */
  --fs-etiquette:.9rem;                     /* 14,4 px : sur-titres, étiquettes (IBM Plex Mono, capitales espacées) */
  --fs-petit:.95rem;                        /* 15,2 px : notes, légendes, aides */
  --fs-onglet:1.215rem;                     /* 19,4 px : onglets de rubriques (Big Shoulders) */
}
/* téléphone : échelle un peu plus petite (texte courant 16 px au lieu de 18) pour que les pages se lisent d'un coup d'œil ;
   le réglage A− / 100 % / A+ du bandeau reste par-dessus (de 80 % à 140 %). */
@media (max-width:600px){
  :root{--fs-corps:1rem;--fs-h1:1.6rem;--fs-h2:1.6rem;--fs-h3:1.25rem;--fs-etiquette:.8rem;--fs-petit:.875rem;--fs-onglet:1.05rem}
}

/* ---------- jetons des pages, en mode normal ---------- */
:root:not([data-contrast="high"]){
  /* fonds */
  --paper:#F5F1E6; --bg:#F5F1E6; --paper-2:#EDE7D8; --paper-3:#EDE7D8; --bg-2:#EDE7D8;
  --card:#FFFDF7; --surface:#FFFDF7; --white:#FFFDF7;
  /* encre */
  --ink:#1B2B38; --ink-soft:#3A4A56; --ink-2:#3A4A56; --ink-faint:#4A5A66; --ink-3:#4A5A66; --muted:#4A5A66;
  /* filets */
  --line:#D3C9B3; --rule:#D3C9B3; --border:#D3C9B3; --line-strong:#1B2B38;
  /* accent principal = couleur de la rubrique de la page */
  --teal:var(--ac-rubrique); --cyan:var(--ac-rubrique); --accent:var(--ac-rubrique);
  --teal-txt:var(--ac-rubrique-txt); --cyan-txt:var(--ac-rubrique-txt); --accent-txt:var(--ac-rubrique-txt);
  --focus:#F47A30;
}
:root{ --radius:3px; --radius-sm:3px; --radius-lg:4px; --shadow:5px 5px 0 #1B2B38; --shadow-lg:7px 7px 0 #1B2B38 }
:root[data-contrast="high"]{ --shadow:4px 4px 0 #000; --shadow-lg:5px 5px 0 #000 }

/* ---------- typographie ---------- */
body{font-family:var(--ac-body)}
h1,h2,h3{font-family:var(--ac-display);font-weight:900;text-transform:uppercase;letter-spacing:0;
  text-wrap:balance;overflow-wrap:break-word;hyphens:auto}
h1{line-height:.98}
h2{line-height:1}
h3{font-weight:800;line-height:1.08}
h4,h5{font-family:var(--ac-body);font-weight:700;text-transform:none}
h1 em,h2 em{font-family:var(--ac-logo);font-style:italic;font-weight:800;text-transform:none;letter-spacing:.01em;color:var(--ac-rubrique-txt)}
code,kbd,samp{font-family:var(--ac-mono)}
:focus-visible{outline:3px solid #F47A30;outline-offset:3px}
::selection{background:#FFD84F;color:#1B2B38}

/* ---------- cadre commun : bandeau du haut et pied de page ----------
   Leur habillage est posé avec eux par .claude/skills/au-cabinet/scripts/cadre.py
   (bandeau collant arc-en-ciel, taille du texte, pied de page) : rien à régler ici. */

/* ---------- en-têtes compacts et pleine largeur (décision de Jonathan, 28/09/2026) ----------
   On va à l'essentiel : titre sur une ligne, introduction resserrée, crédits et dates en une
   petite ligne (ils sont aussi dans le pied de page), contenu sur toute la largeur de l'écran.
   Aucun texte n'est retiré ; seules les tailles et les marges changent. Les sélecteurs visent
   les trois familles d'en-têtes du site :
     - fiches : <header><div class="wrap"> .eyebrow, h1, .lede, .meta, .fdates ;
     - attelle : <header class="hero"><div class="hero-in"> ;
     - saturnisme : <section class="hero"> + .facts ; scores : <header class="tete">. */
html body .wrap,html body .partsep,html body .hero-in{max-width:min(1600px,100%)}
html body header:has(>.wrap>h1){padding:12px 0 4px!important;border-bottom:0}
html body header:has(>.wrap>h1)>.wrap{padding:26px 22px 12px!important;box-shadow:4px 4px 0 var(--ink,#1B2B38)!important}
html body header:has(>.wrap>h1)>.wrap:not(:has(.eyebrow + h1)){padding-top:14px!important}
html body header:has(>.wrap>h1) .eyebrow{margin-bottom:4px!important;font-size:.68rem}
html body header:has(>.wrap>h1) h1,
html body header.hero h1{font-size:var(--fs-h1)!important;line-height:1.02!important;max-width:none!important;margin:0!important}
html body header.hero h1 em{display:inline!important;font-size:1em!important;margin:0!important}
html body header:has(>.wrap>h1) .lede,html body header.hero .lede{margin-top:6px!important;font-size:.98rem!important;max-width:130ch!important;line-height:1.5}
html body header:has(>.wrap>h1) .meta,html body header.hero .meta{margin-top:6px!important;font-size:.66rem!important;line-height:1.5!important;max-width:none!important}
html body header:has(>.wrap>h1) .fdates,html body header.hero .fdates{margin-top:2px!important;font-size:.64rem!important}
html body header.hero .hero-in{padding-top:18px!important;padding-bottom:16px!important}
html body header.hero .eyebrow{margin-bottom:4px!important}
html body header.hero .hsearch{margin-top:12px!important}
html body header.tete h1{font-size:var(--fs-h1)!important;line-height:1!important;margin-bottom:4px!important}
html body section.hero{padding:22px 0 14px!important;gap:24px!important;align-items:center!important}
html body section.hero h1{font-size:var(--fs-h1)!important;line-height:1!important}
html body .facts{margin:10px 0 30px!important}
html body .facts .fact{padding:12px 14px!important}
html body .facts .fact-num{font-size:2rem!important}
/* Titres sur une seule ligne, sur toute la largeur (ordinateur et tablette en paysage) : plus de largeur
   maximale ni d'équilibrage des lignes, et les retours à la ligne écrits dans les titres deviennent
   des espaces dans les pages elles-mêmes. Sur téléphone, les titres reviennent à la ligne normalement. */
@media (min-width:900px){
  html body h1,html body h2{max-width:none!important;text-wrap:wrap!important}
  html body h1 em{display:inline!important}
  html body section.hero{grid-template-columns:1fr!important}
}
@media (max-width:640px){
  html body header:has(>.wrap>h1)>.wrap{padding:22px 14px 10px!important}
  html body:has(.navtoggle) header:has(>.wrap>h1)>.wrap{padding-top:56px!important}
  html body header:has(>.wrap>h1) .lede,html body header.hero .lede{font-size:.94rem!important}
}

/* ---------- échelle commune (décision de Jonathan, 28/09/2026) ----------
   Mêmes tailles de texte d'un outil à l'autre, celles de la page MDPH (variables --fs-* en tête de
   fichier). Portée : toutes les pages qui chargent cette feuille, sauf
     - la page MDPH elle-même (body.v2), qui est la référence et garde ses réglages ;
     - les pages sur le gabarit commun (body.gm), qui appliquent déjà l'échelle ;
     - le cadre commun (bandeau, pied), et les documents à imprimer montrés à l'écran
       (certificats, ordonnances, fiches d'aperçu), qui gardent leur mise en page.
   qui-prescrit/ et pai/ ne chargent pas cette feuille : elles ne sont pas touchées.
   Une page dont la taille de base n'est pas 16 px (attelle : 18 px) règle les variables dans son
   bloc <style id="ac-charte-page">. Petits textes (notes, sources, légendes) : --fs-petit. */
@media screen{
html body:not(.v2):not(.gm) h1:not(.sm-brand):not(:is(#ac-cadre,#ac-pied,#ac-note,.ac-doc,.cert,.ord,.colonne-apercu,.f-doc) *){
  font-size:var(--fs-h1)!important;line-height:1.02!important}
html body:not(.v2):not(.gm) h2:not(:is(#ac-cadre,#ac-pied,#ac-note,.ac-doc,.cert,.ord,.colonne-apercu,.f-doc,.pd-sec) *){
  font-size:var(--fs-h2)!important;line-height:1.05!important}
html body:not(.v2):not(.gm) h3:not(:is(#ac-cadre,#ac-pied,#ac-note,.ac-doc,.cert,.ord,.colonne-apercu,.f-doc,.pd-box,.pd-sec) *){
  font-size:var(--fs-h3)!important;line-height:1.1!important}
html body:not(.v2):not(.gm) p:not(:is(#ac-cadre,#ac-pied,#ac-note,.ac-doc,.cert,.ord,.colonne-apercu,.f-doc) *){
  font-size:var(--fs-corps)!important}
/* petits textes : notes, sources, légendes, mentions */
html body:not(.v2):not(.gm) :is(p.cap,p.note,p.src,p.csrc,p.meta,p.mono,p.disclaimer,p.v-note,p.ac-note,p.ac-legende,p.resu-sous,
  p.p,p.g-mini-warn,.method-note p,footer p,figcaption,small):not(:is(#ac-cadre,#ac-pied,#ac-note,.ac-doc,.cert,.ord,.colonne-apercu,.f-doc) *){
  font-size:var(--fs-petit)!important}
/* sur-titres et étiquettes (IBM Plex Mono en capitales espacées) */
html body:not(.v2):not(.gm) :is(.eyebrow,.s-num,.navgrp,.partsep span,.k,.kick,.sur,.cat-sur,.etiq,.flabel,.field>label,.fld>label,
  fieldset>legend,.icat-t,.sreg,.vtag,.proof,.medway-h,.vlabel,.vt,.pl,.l,.hint,.num,.res-tag,.cat-cell,.zone-name,.sub,
  .resu-f,span.k,p.k,dt,thead th,.sm-act button,.qz-cat,.tl-when,.navsec,.otag):not(:is(#ac-cadre,#ac-pied,#ac-note,.ac-doc,.cert,.ord,.colonne-apercu,.f-doc) *){
  font-size:var(--fs-etiquette)!important}
/* onglets de rubriques */
html body:not(.v2):not(.gm) :is(nav.tabs>[role="tab"],nav.tabs>button,.sm-tabs a){font-size:var(--fs-onglet)!important}
}

/* ---------- utilitaires que les pages peuvent reprendre ---------- */
.ac-case{background:#FFFDF7;border:3px solid #1B2B38;border-radius:3px;box-shadow:6px 6px 0 #1B2B38}
.ac-trame{background-image:radial-gradient(circle,rgba(27,43,56,.28) 1.3px,transparent 1.8px);background-size:8px 8px}

/* ---------- capsule flottante (téléphone et tablette) ----------
   Posée par /_commun/capsule.js : elle apparaît quand le document final de la
   page (ordonnance, certificat, synthèse…) a du contenu et qu'il n'est pas à
   l'écran ; un toucher y amène. */
.ac-capsule{position:fixed;right:14px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:2147482000;
  display:inline-flex;align-items:center;gap:10px;min-height:58px;max-width:calc(100vw - 28px);padding:6px 18px 6px 8px;
  background:#1B2B38;color:#FFFDF7;border:3px solid #1B2B38;border-radius:32px;box-shadow:4px 4px 0 #F47A30;
  font:700 15px/1.1 var(--ac-body);cursor:pointer;text-align:left;
  transition:transform .18s ease,opacity .18s ease}
.ac-capsule[hidden]{display:none!important}
.ac-capsule:hover{color:#FFD84F}
.ac-capsule:focus-visible{outline:3px solid #FFD84F;outline-offset:3px}
.ac-capsule .ac-gelule{flex-shrink:0;width:44px;height:44px;border-radius:22px;background:#FFFDF7;
  display:flex;align-items:center;justify-content:center}
.ac-capsule .ac-capsule-t{display:grid;gap:2px;min-width:0}
.ac-capsule .ac-capsule-t b{font:800 19px/1 var(--ac-display);letter-spacing:.05em;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ac-capsule .ac-capsule-s{font:600 11px/1.2 var(--ac-mono);letter-spacing:.08em;text-transform:uppercase;color:#FFD84F}
.ac-capsule.ac-pouls{animation:ac-pouls .9s ease}
@keyframes ac-pouls{0%{transform:scale(1)}30%{transform:scale(1.08)}60%{transform:scale(.98)}100%{transform:scale(1)}}
.ac-capsule-arrivee{outline:4px solid #F47A30!important;outline-offset:4px;transition:outline-color 1.2s ease}
@media (prefers-reduced-motion:reduce){.ac-capsule,.ac-capsule.ac-pouls{animation:none;transition:none}}
@media print{.ac-capsule{display:none!important}}

/* ---------- animations de points (« gagner des points ») ----------
   Posées par /_commun/points.js (mode d'emploi en tête du fichier) et décrites
   dans docs/charte-graphique.md, « Dynamisme : gagner des points ».
   Paliers : bas = sapin (rassurant), moyen = ambre, haut = rouille (grave).
   Tout s'arrête si l'utilisateur demande moins d'animations. */
:root{--ac-bas:#2F6B4F;--ac-moyen:#D08A35;--ac-haut:#B5462C}
.ac-pop{animation:ac-pop .42s cubic-bezier(.3,1.6,.5,1)}
@keyframes ac-pop{0%{transform:scale(1)}35%{transform:scale(1.22)}70%{transform:scale(.95)}100%{transform:scale(1)}}
.ac-plus1{position:fixed;z-index:2147482500;pointer-events:none;transform:translate(-50%,-50%);
  padding:2px 8px;background:#FFD84F;color:#1B2B38;border:2px solid #1B2B38;border-radius:3px;box-shadow:2px 2px 0 #1B2B38;
  font:italic 800 1.125rem/1 var(--ac-logo);white-space:nowrap;animation:ac-plus1 .9s cubic-bezier(.2,.7,.3,1) forwards}
.ac-plus1-moins{background:#EDE7D8;color:#4A5A66;box-shadow:none}
@keyframes ac-plus1{0%{opacity:0;transform:translate(-50%,-30%) scale(.6)}18%{opacity:1;transform:translate(-50%,-80%) scale(1.15)}
  100%{opacity:0;transform:translate(-50%,-260%) scale(1)}}
.ac-confetti{position:fixed;z-index:2147482500;pointer-events:none;width:9px;height:9px;margin:-4px 0 0 -4px;border:1.5px solid #1B2B38;
  animation:ac-confetti 1s cubic-bezier(.15,.7,.35,1) forwards}
@keyframes ac-confetti{0%{opacity:1;transform:translate(0,0) rotate(0)}70%{opacity:1}
  100%{opacity:0;transform:translate(var(--dx),calc(var(--dy) + 70px)) rotate(var(--rot))}}
.ac-fete{animation:ac-pop .5s cubic-bezier(.3,1.6,.5,1)}
/* seuil grave : un « tampon » net, sans couleur de fête */
.ac-tampon{animation:ac-tampon .5s cubic-bezier(.2,.9,.3,1.2)}
@keyframes ac-tampon{0%{transform:scale(1.06) rotate(-1.2deg);filter:contrast(1.3)}60%{transform:scale(.99) rotate(0)}100%{transform:none;filter:none}}
.ac-palier-change{animation:ac-eclair .7s ease}
@keyframes ac-eclair{0%{box-shadow:0 0 0 0 rgba(244,122,48,.0)}25%{box-shadow:0 0 0 6px rgba(244,122,48,.55)}100%{box-shadow:0 0 0 0 rgba(244,122,48,0)}}
/* jauge en trois feux : la page pose .ac-palier-bas|moyen|haut sur un parent */
.ac-feux{display:inline-flex;gap:4px;align-items:flex-end}
.ac-feux i{display:block;width:22px;height:10px;border:2px solid #1B2B38;background:#FFFDF7;transition:height .25s ease,background-color .25s ease}
.ac-palier-bas .ac-feux i:nth-child(1){background:var(--ac-bas);height:16px}
.ac-palier-moyen .ac-feux i:nth-child(2){background:var(--ac-moyen);height:16px}
.ac-palier-haut .ac-feux i:nth-child(3){background:var(--ac-haut);height:16px}

/* barre de résultat en bas d'écran (téléphone, tablette) */
.ac-barre{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:2147482000;
  display:flex;align-items:center;gap:12px;min-height:68px;padding:6px 12px 6px 6px;margin:0 auto;max-width:640px;
  background:#1B2B38;color:#FFFDF7;border:3px solid #1B2B38;border-radius:14px;box-shadow:5px 5px 0 #F47A30;
  font:700 .9375rem/1.2 var(--ac-body);text-align:left;cursor:pointer;transform:translateY(0);transition:box-shadow .25s ease}
.ac-barre[hidden]{display:none!important}
.ac-barre-on{animation:ac-barre-monte .5s cubic-bezier(.2,1.4,.4,1)}
@keyframes ac-barre-monte{0%{transform:translateY(130%)}100%{transform:translateY(0)}}
.ac-barre-score{flex:none;display:flex;align-items:baseline;justify-content:center;gap:3px;min-width:74px;height:56px;padding:0 10px;
  background:#FFFDF7;color:#1B2B38;border-radius:9px;border:3px solid #FFFDF7;transition:background-color .25s ease}
.ac-barre-v{display:inline-block;font:900 2.375rem/56px var(--ac-display);font-variant-numeric:tabular-nums;white-space:nowrap}
.ac-barre-sur{font:600 .75rem/1 var(--ac-mono);white-space:nowrap}
.ac-barre.ac-palier-bas .ac-barre-score{background:#D8EFE2}
.ac-barre.ac-palier-moyen .ac-barre-score{background:#FBE3BE}
.ac-barre.ac-palier-haut .ac-barre-score{background:#F6D3C8}
.ac-barre.ac-palier-bas{box-shadow:5px 5px 0 var(--ac-bas)}
.ac-barre.ac-palier-moyen{box-shadow:5px 5px 0 var(--ac-moyen)}
.ac-barre.ac-palier-haut{box-shadow:5px 5px 0 #E0502C}
.ac-barre-t{flex:1;min-width:0;display:grid;gap:3px}
.ac-barre-nom{font:600 .6875rem/1.2 var(--ac-mono);letter-spacing:.1em;text-transform:uppercase;color:#FFD84F;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ac-barre-i{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:.875rem}
.ac-barre-feux{flex:none;display:flex;flex-direction:column-reverse;gap:3px}
.ac-barre-feux i{display:block;width:12px;height:10px;border:2px solid #FFFDF7;background:transparent}
.ac-barre.ac-palier-bas .ac-barre-feux i:nth-child(1){background:#6FC39A}
.ac-barre.ac-palier-moyen .ac-barre-feux i:nth-child(2){background:#FFB840}
.ac-barre.ac-palier-haut .ac-barre-feux i:nth-child(3){background:#FF7A55}
.ac-barre-go{flex:none;font:600 .6875rem/1 var(--ac-mono);letter-spacing:.08em;text-transform:uppercase;color:#FFD84F}
.ac-barre:focus-visible{outline:3px solid #FFD84F;outline-offset:3px}
@media (max-width:380px){.ac-barre-go{display:none}}
html.ac-texte-grand .ac-barre-v{font-size:2rem}
@media (prefers-reduced-motion:reduce){
  .ac-pop,.ac-fete,.ac-tampon,.ac-palier-change,.ac-barre-on{animation:none!important}
  .ac-plus1,.ac-confetti{display:none!important}
  .ac-feux i,.ac-barre,.ac-barre-score{transition:none!important}
}
@media print{.ac-barre,.ac-plus1,.ac-confetti{display:none!important}}