/* Diagnostic d'architecture IA
   Concept : une note d'ingénierie posée sur un plan. Papier blanc à bords nets sur un fond quadrillé,
   cartouche d'en-tête, codes de règle en chasse fixe. Teal réservé à ce qui est retenu, ambre à ce qui est conditionnel. */
:root {
  --teal: #0D9488; --teal-dark: #0F766E; --teal-darker: #115E59; --teal-light: #F0FDFA; --teal-lighter: #CCFBF1;
  --ink: #111827; --ink-2: #1F2937; --ink-3: #374151;
  --amber: #D97706; --amber-light: #FEF3C7; --amber-dark: #B45309;
  --red: #DC2626; --red-light: #FEE2E2; --red-dark: #B91C1C;
  --g50: #F9FAFB; --g100: #F3F4F6; --g200: #E5E7EB; --g300: #D1D5DB; --g400: #9CA3AF; --g500: #6B7280; --g600: #4B5563; --g700: #374151; --g900: #111827;
  --paper: #FFFFFF; --ground: #F1F3F5; --grid: rgba(17, 24, 39, 0.045);
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --mono: 'SF Mono', 'Fira Code', 'JetBrains Mono', Consolas, monospace;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.05); --shadow-md: 0 4px 6px rgba(0,0,0,0.05), 0 2px 4px rgba(0,0,0,0.03);
  --ring: 0 0 0 3px rgba(13,148,136,0.18);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background-color: var(--ground);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px;
  color: var(--g700); font: 15px/1.6 var(--font); -webkit-font-smoothing: antialiased;
  min-height: 100vh; display: flex; flex-direction: column;
}
a { color: var(--teal-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { color: var(--ink); margin: 0; text-wrap: balance; }
p { margin: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mono, .code { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.code { font-size: 11px; color: var(--g400); letter-spacing: 0.02em; }

/* En-tête et pied */
.entete { display: flex; align-items: baseline; gap: 16px; padding: 16px 40px; background: var(--paper); border-bottom: 1px solid var(--g200); }
.marque { font-size: 18px; font-weight: 800; color: var(--ink); letter-spacing: -0.3px; }
.marque span { color: var(--g400); font-weight: 600; }
.marque:hover { text-decoration: none; }
.entete-outil { font-size: 13px; color: var(--g500); }
.page { flex: 1; width: 100%; max-width: 1120px; margin: 0 auto; padding: 40px 24px 64px; }
.pied { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: center; padding: 24px 16px 32px; font-size: 12px; color: var(--g500); }
.pied a { color: var(--g500); }

/* Feuille */
.feuille { background: var(--paper); border: 1px solid var(--g200); border-radius: 4px; box-shadow: var(--shadow-sm); padding: 32px; }
.etroite { max-width: 720px; margin: 0 auto; }
.chargement { display: flex; align-items: center; gap: 12px; color: var(--g500); }
.spinner { width: 20px; height: 20px; border: 2px solid var(--g200); border-top-color: var(--teal); border-radius: 50%; animation: spin .6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Typographie */
.surtitre { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--g500); margin-bottom: 8px; }
.titre-outil { font-size: 44px; line-height: 1.08; font-weight: 800; letter-spacing: -0.025em; }
.sous-titre { font-size: 19px; color: var(--ink-3); margin-top: 14px; }
.intro { margin-top: 18px; max-width: 58ch; }
.note { margin-top: 28px; font-size: 13px; color: var(--g500); border-left: 2px solid var(--g300); padding-left: 12px; max-width: 58ch; }
.h2 { font-size: 20px; line-height: 1.35; font-weight: 700; display: flex; align-items: baseline; gap: 10px; }
.h3 { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink); margin-bottom: 10px; }
.num { font: 600 12px var(--mono); color: var(--g500); border: 1px solid var(--g300); border-radius: 3px; padding: 1px 6px; transform: translateY(-2px); }
.petit { font-size: 13px; color: var(--g500); }
.texte { max-width: 68ch; margin-top: 10px; }
.section-intro { margin-top: 8px; max-width: 70ch; color: var(--g600); font-size: 14px; }

/* Boutons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 11px 18px; border-radius: 8px; font: 600 14px var(--font); cursor: pointer; border: 1px solid transparent; transition: background 150ms ease, box-shadow 150ms ease; }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn-primaire { background: var(--ink); color: #fff; }
.btn-primaire:hover { background: var(--ink-2); }
.btn-primaire:active { background: var(--ink-3); }
.btn-primaire:disabled { background: var(--g300); color: var(--g500); cursor: not-allowed; }
.btn-secondaire { background: var(--paper); color: var(--ink-3); border-color: var(--g300); }
.btn-secondaire:hover { background: var(--g50); }
.btn-fantome { background: transparent; color: var(--teal-dark); padding: 8px 12px; min-height: 36px; }
.btn-fantome:hover { background: var(--teal-light); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* Marques d'état : la forme porte le sens autant que la couleur */
.mark { display: inline-block; flex-shrink: 0; width: 14px; height: 14px; border-radius: 50%; position: relative; vertical-align: -2px; }
.m-compatible { background: var(--teal); }
.m-sous_contrainte { border: 2px solid var(--amber); background: linear-gradient(90deg, var(--amber) 50%, transparent 50%); }
.m-incompatible { border-radius: 0; }
.m-incompatible::before, .m-incompatible::after { content: ""; position: absolute; left: 6px; top: -1px; width: 2px; height: 16px; background: var(--g500); transform: rotate(45deg); }
.m-incompatible::after { transform: rotate(-45deg); }
.m-attente { border: 1.5px dashed var(--g400); }
.m-sans_effet { width: 14px; height: 14px; background: radial-gradient(circle, var(--g300) 3px, transparent 3.5px); }
.m-prerequis { border-radius: 2px; width: 10px; height: 10px; border: 2px solid var(--teal); transform: rotate(45deg); margin: 2px; }

.badge { display: inline-block; padding: 4px 10px; border-radius: 4px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.badge-alerte { background: var(--amber-light); color: var(--amber-dark); }
.pill { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--teal-light); color: var(--teal-darker); border: 1px solid var(--teal-lighter); font-weight: 600; font-size: 13px; }
.tag { display: inline-block; margin-left: 8px; font: 600 10px var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--teal-dark); background: var(--teal-light); border: 1px solid var(--teal-lighter); padding: 1px 6px; border-radius: 3px; vertical-align: 2px; }

/* Accueil */
.accueil { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px; align-items: center; padding: 24px 0; }
.methode { margin: 0; background: var(--paper); border: 1px solid var(--g300); border-radius: 4px; padding: 24px; display: grid; gap: 18px; box-shadow: var(--shadow-md); }
.methode-etape { display: grid; grid-template-columns: 28px 1fr; gap: 12px; }
.methode-etape strong { color: var(--ink); }
.methode-etape p { font-size: 14px; color: var(--g600); margin-top: 2px; }
.methode-n { font: 700 13px var(--mono); width: 28px; height: 28px; border: 1.5px solid var(--ink); border-radius: 50%; display: grid; place-items: center; color: var(--ink); }
.methode-familles { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 12px 14px 12px 54px; font-size: 13px; font-weight: 600; color: var(--ink-3); border-top: 1px dashed var(--g300); border-bottom: 1px dashed var(--g300); }
.methode-familles span { display: inline-flex; align-items: center; gap: 7px; }

/* Parcours */
.rail ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 0; margin: 0 0 24px; padding: 0; }
.rail li { display: flex; align-items: center; font-size: 13px; color: var(--g400); }
.rail li + li::before { content: ""; width: 22px; height: 1px; background: var(--g300); margin: 0 8px; }
.rail li.fait button { font: inherit; color: var(--teal-dark); background: none; border: 0; padding: 4px 2px; cursor: pointer; text-decoration: underline; text-decoration-color: var(--teal-lighter); text-underline-offset: 3px; }
.rail li.actif span { color: var(--ink); font-weight: 700; border-bottom: 2px solid var(--ink); padding-bottom: 2px; }
.rail-mobile { display: none; font-size: 13px; color: var(--g500); margin-bottom: 14px; }
.parcours-corps { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
.question-zone { background: var(--paper); border: 1px solid var(--g200); border-radius: 4px; box-shadow: var(--shadow-sm); padding: 32px; min-width: 0; }
.question { font-size: 26px; line-height: 1.25; font-weight: 750; letter-spacing: -0.01em; }
.question-aide { margin-top: 8px; color: var(--g500); font-size: 15px; max-width: 60ch; }
.options { display: grid; gap: 10px; margin-top: 24px; }
.option { display: block; width: 100%; text-align: left; background: var(--paper); border: 1px solid var(--g300); border-radius: 8px; padding: 14px 16px; cursor: pointer; font: inherit; color: inherit; transition: border-color 150ms ease, background 150ms ease; }
.option:hover { background: var(--g50); border-color: var(--g400); }
.option:focus-visible { outline: none; box-shadow: var(--ring); border-color: var(--teal); }
.option[aria-pressed="true"] { background: var(--teal-light); border-color: var(--teal); }
.option-label { display: block; font-weight: 600; color: var(--ink); font-size: 15px; }
.option-aide { display: block; font-size: 14px; color: var(--g500); margin-top: 2px; }
.form-nom { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.form-nom input, .champ input { flex: 1 1 260px; min-width: 0; height: 46px; padding: 10px 14px; border: 1px solid var(--g300); border-radius: 8px; font: 15px var(--font); color: var(--ink); background: var(--paper); }
.form-nom input:focus, .champ input:focus { outline: none; border-color: var(--teal); box-shadow: var(--ring); }

.panneau { position: sticky; top: 16px; background: var(--paper); border: 1px solid var(--g200); border-radius: 4px; padding: 20px; box-shadow: var(--shadow-sm); }
.panneau-titre { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink); }
.panneau-intro { font-size: 13px; color: var(--g500); margin-top: 4px; }
.panneau-liste { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 0; }
.pf { padding: 12px 0; border-top: 1px solid var(--g100); }
.pf-tete { display: flex; align-items: center; gap: 10px; }
.pf-nom { font-weight: 600; color: var(--ink); font-size: 14px; }
.pf-statut { display: block; font-size: 12px; color: var(--g500); margin: 2px 0 0 24px; }
.pf-incompatible .pf-nom { color: var(--g500); text-decoration: line-through; text-decoration-color: var(--g400); }
.pf-sous_contrainte .pf-statut { color: var(--amber-dark); }
.pf-compatible .pf-statut { color: var(--teal-dark); }
.pf-raisons { list-style: none; margin: 6px 0 0 24px; padding: 0; display: grid; gap: 3px; font-size: 12px; color: var(--g600); }
.pf-raisons .code { margin-right: 6px; }

/* Résultat gratuit */
.resultat { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.reco-titre { font-size: 36px; line-height: 1.12; font-weight: 800; letter-spacing: -0.02em; margin-top: 4px; }
.reco-posture { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; font-size: 14px; color: var(--g600); }
.reco-texte { margin-top: 14px; max-width: 58ch; }
.reco-comment { margin-top: 12px; font-size: 14px; color: var(--g600); max-width: 60ch; }
.etats { list-style: none; margin: 24px 0 0; padding: 14px 0 0; border-top: 1px solid var(--g200); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.etats li { display: grid; grid-template-columns: 14px 1fr; column-gap: 8px; align-items: center; align-content: start; font-size: 13px; }
.etats-nom { font-weight: 700; color: var(--ink); }
.etats-statut { grid-column: 2; color: var(--g500); font-size: 12px; }
.etats li.retenue .etats-statut { color: var(--teal-dark); font-weight: 600; }
.etats li.e-incompatible .etats-nom { color: var(--g500); }
.email-mur { border-top: 3px solid var(--ink); }
.inclus { margin: 8px 0 0; padding-left: 18px; font-size: 14px; display: grid; gap: 4px; }
.champ { display: grid; gap: 6px; margin-top: 20px; }
.champ label { font-size: 13px; font-weight: 500; color: var(--g700); }
.case { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; font-size: 13px; color: var(--g600); line-height: 1.5; }
.case input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--teal); flex-shrink: 0; }
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.erreur { margin-top: 14px; padding: 12px 14px; background: var(--red-light); border: 1px solid var(--red); border-radius: 8px; color: var(--red-dark); font-size: 14px; }
.cf-turnstile { margin-top: 16px; }

/* Note de décision */
.rapport-page { max-width: 980px; margin: 0 auto; }
.barre-actions { position: sticky; top: 0; z-index: 10; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 0; margin-bottom: 16px; background: var(--ground); }
.barre-msg { font-size: 13px; color: var(--teal-dark); }
.note-decision { padding: 40px 48px 32px; }

.cartouche { display: grid; grid-template-columns: 1.1fr 2fr 1fr 0.9fr 1.1fr; border: 1.5px solid var(--ink); }
.cartouche > div { padding: 10px 12px; border-left: 1px solid var(--g300); min-width: 0; }
.cartouche > div:first-child { border-left: 0; background: var(--ink); color: #fff; }
.cartouche > div:first-child .ct-l { color: var(--g400); }
.cartouche > div:first-child strong { color: #fff; }
.ct-l { display: block; font: 600 9.5px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--g500); margin-bottom: 3px; }
.cartouche strong { display: block; color: var(--ink); font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }
.ct-v { font-size: 13px; color: var(--ink); overflow-wrap: anywhere; }

.synthese { padding: 32px 0 8px; }
.synthese-grille { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 40px; }
.pourquoi { margin-top: 16px; font-size: 16px; line-height: 1.6; color: var(--ink-3); max-width: 62ch; }
.chiffres { margin: 0; display: grid; align-content: start; border-left: 1px solid var(--g200); }
.chiffres > div { padding: 12px 0 12px 20px; border-bottom: 1px solid var(--g100); }
.chiffres > div:last-child { border-bottom: 0; }
.chiffres dt { font-size: 12px; color: var(--g500); order: 2; }
.chiffres dd { margin: 0; font-size: 30px; font-weight: 750; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.1; }
.chiffres > div { display: flex; flex-direction: column-reverse; }
.synthese-bas { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 32px; margin-top: 28px; padding: 22px 24px; background: var(--g50); border: 1px solid var(--g200); border-radius: 4px; }
.faire { margin: 0; padding-left: 20px; display: grid; gap: 10px; font-size: 14px; color: var(--ink-3); }
.faire li::marker { font: 700 12px var(--mono); color: var(--g500); }
.qui { display: block; font: 600 11px var(--font); text-transform: uppercase; letter-spacing: .05em; color: var(--teal-dark); margin-bottom: 1px; }
.puces { margin: 0; padding-left: 18px; display: grid; gap: 8px; font-size: 14px; color: var(--ink-3); }

.section { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--g200); }
.defile { overflow-x: auto; margin-top: 18px; }

.matrice { width: 100%; min-width: 600px; border-collapse: collapse; font-size: 13px; }
.matrice th, .matrice td { padding: 11px 12px; border-bottom: 1px solid var(--g200); text-align: left; vertical-align: top; }
.matrice thead th { border-bottom: 1.5px solid var(--ink); vertical-align: bottom; }
.matrice tbody th { width: 24%; font-weight: 600; color: var(--ink-3); }
.mx-fam { display: block; font-size: 15px; font-weight: 750; color: var(--ink); }
.mx-posture { display: block; font-size: 11.5px; font-weight: 500; color: var(--g500); margin-top: 1px; }
.mx-cell { display: flex; align-items: flex-start; gap: 8px; color: var(--ink-3); }
.mx-cell .mark { margin-top: 3px; }
.matrice td .code { display: block; margin: 3px 0 0 22px; }
.x-sans_effet .mx-cell { color: var(--g400); }
.x-prerequis .mx-cell { color: var(--teal-dark); }
.matrice .col-retenue { background: var(--teal-light); }
.matrice thead .col-retenue { box-shadow: inset 0 3px 0 var(--teal); }
.matrice .col-ecartee { background-image: repeating-linear-gradient(135deg, transparent 0 7px, rgba(17,24,39,.035) 7px 8px); }
.matrice .col-ecartee .mx-cell, .matrice thead .col-ecartee .mx-fam { color: var(--g500); }
.mx-statut th, .mx-statut td { border-top: 1.5px solid var(--g300); }
.mx-statut strong { color: var(--ink); }
.mx-priorite th, .mx-priorite td { border-bottom: 0; }
.rang { display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--g300); color: var(--ink-3); background: var(--paper); white-space: nowrap; }
.rang-1 { background: var(--teal); border-color: var(--teal); color: #fff; }
.rang-hors { border-style: dashed; color: var(--g500); background: transparent; }
.rang-change { background: var(--amber-light); border-color: #FCD34D; color: var(--amber-dark); }

.carte { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-top: 18px; }
.voie { border: 1px solid var(--g200); border-radius: 4px; padding: 16px; display: grid; gap: 12px; align-content: start; }
.voie-courante { border: 1.5px solid var(--teal); background: var(--teal-light); }
.voie-posture { font: 700 11px var(--font); text-transform: uppercase; letter-spacing: .06em; color: var(--g600); }
.voie-axes { display: flex; flex-wrap: wrap; gap: 6px; }
.axe { font-size: 13px; padding: 3px 9px; border-radius: 4px; background: var(--g100); color: var(--ink-3); }
.axe-courant { background: var(--ink); color: #fff; font-weight: 600; }
.voie-fam { font-weight: 700; color: var(--ink); font-size: 15px; display: flex; gap: 8px; }
.fleche { color: var(--g400); }

.verifs { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 14px; }
.verifs th { text-align: left; font: 600 10.5px var(--font); text-transform: uppercase; letter-spacing: .06em; color: var(--g500); padding: 8px 12px; border-bottom: 1.5px solid var(--ink); }
.verifs td { padding: 14px 12px; border-bottom: 1px solid var(--g200); vertical-align: top; }
.verifs td:first-child { width: 36px; color: var(--g500); }
.verifs .qui-cell { width: 20%; font-weight: 600; color: var(--teal-dark); }
.verifs strong { color: var(--ink); font-weight: 600; }
.condition { display: block; margin-top: 4px; font-size: 13px; color: var(--g500); }

.variations { list-style: none; margin: 18px 0 0; padding: 0; display: grid; }
.variations li { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr) minmax(0, 0.8fr); gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--g100); font-size: 14px; }
.v-entree { color: var(--g500); font-size: 13px; }
.v-entree::first-letter { text-transform: uppercase; }
.v-mouv { color: var(--ink-3); }
.v-change .v-mouv { color: var(--ink); font-weight: 600; }
.v-res { justify-self: end; text-align: right; }

.detail { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; margin-top: 16px; }
.detail-fam { border-top: 2px solid var(--g300); padding-top: 12px; }
.detail-fam.retenue { border-top-color: var(--teal); }
.detail-tete { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.detail-tete strong { color: var(--ink); }
.detail-tete span:last-child { font-size: 12px; color: var(--g500); }
.detail .petit { margin-top: 6px; }
.raisons { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 13.5px; }
.raisons li { display: grid; grid-template-columns: 30px 1fr; gap: 6px; }
.encadre { margin-top: 20px; padding: 16px 18px; border: 1px solid var(--teal-lighter); background: var(--teal-light); border-radius: 4px; }
.encadre .petit { margin-bottom: 8px; }
.vigilance { padding-left: 12px; border-left: 2px solid var(--amber); }

.note-pied { margin-top: 36px; padding-top: 16px; border-top: 1.5px solid var(--ink); font-size: 12px; color: var(--g500); display: grid; gap: 4px; }

.portef { width: 100%; min-width: 480px; border-collapse: collapse; font-size: 14px; margin-top: 12px; }
.portef td { padding: 10px 8px; border-bottom: 1px solid var(--g200); vertical-align: middle; }
.portef td .petit { display: block; }
.portef tr.courant { background: var(--teal-light); }
.rapport-page > .section { background: var(--paper); border: 1px solid var(--g200); border-radius: 4px; padding: 24px 32px; margin-top: 24px; }

/* Vérifications : sources et socle */
.v-source { display: block; margin-top: 6px; font-size: 12px; color: var(--g500); overflow-wrap: anywhere; }
.v-source a { color: var(--teal-dark); }
.verifs .v-socle-tete th { padding: 22px 12px 8px; border-bottom: 1px solid var(--g300); }
.verifs .v-socle-tete th > span:first-child { display: block; font-size: 11px; font-weight: 700; color: var(--ink-2); }
.verifs .v-socle-tete .petit { display: block; margin-top: 3px; font: 400 13px/1.45 var(--font); text-transform: none; letter-spacing: 0; color: var(--g500); }
.socle-ligne { margin-top: 10px; }

/* Annexes et sections repliées */
.annexes { margin-top: 48px; padding-top: 8px; border-top: 1.5px solid var(--ink); }
.annexes-tete { margin-top: 20px; }
.annexes > .section:first-of-type { border-top: 0; }
.replie { margin-top: 14px; }
.replie summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--teal-dark); padding: 6px 0; }
.replie summary:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 4px; }

/* Résultat gratuit : ce qui ferait changer */
.change-libre { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--g200); }

/* Ce qui fonde cette décision */
.fondements { margin-top: 20px; display: grid; gap: 24px; }
.fd-groupe { border-top: 2px solid var(--g300); padding-top: 12px; }
.fd-groupe .petit { margin-top: 4px; }
.fd-liste { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.fd-liste li { padding-left: 12px; border-left: 2px solid var(--g200); }
.fd-tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 13px; }
.fd-portee { color: var(--g600); font-weight: 600; }
.fd-statut { font: 600 10px var(--mono); text-transform: uppercase; letter-spacing: .05em; padding: 1px 6px; border-radius: 3px; border: 1px solid; }
.fd-clos { color: var(--teal-dark); background: var(--teal-light); border-color: var(--teal-lighter); }
.fd-ouvert { color: var(--amber-dark); background: var(--amber-light); border-color: #FDE68A; }
.fd-enonce { margin-top: 4px; font-size: 14px; color: var(--ink-3); max-width: 70ch; }
.fd-liste .petit { margin-top: 4px; max-width: 70ch; overflow-wrap: anywhere; }
.fd-liste a { color: var(--teal-dark); }
.validites { margin-top: 24px; padding: 16px 18px; border: 1px solid var(--g200); background: var(--g50); border-radius: 4px; }
.validites dl { margin: 10px 0 0; display: grid; gap: 10px; }
.validite { display: grid; grid-template-columns: minmax(0, 220px) 1fr; gap: 4px 16px; font-size: 14px; }
.validite dt { font-weight: 600; color: var(--ink-2); }
.validite dd { margin: 0; color: var(--g600); }
.validite-ouverte dd { color: var(--amber-dark); }
@media (max-width: 640px) { .validite { grid-template-columns: 1fr; } }

/* Téléphone et tablette */
@media screen and (max-width: 900px) {
  .accueil, .resultat { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .parcours-corps { grid-template-columns: minmax(0, 1fr); }
  .panneau { position: static; order: -1; padding: 14px 16px; }
  .panneau-intro { display: none; }
  .panneau-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
  .pf { border-top: 0; padding: 0; }
  .pf-nom { font-size: 13px; }
  .pf-statut { margin-left: 0; }
  .pf-raisons { display: none; }
  .synthese-grille, .synthese-bas { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .chiffres { border-left: 0; border-top: 1px solid var(--g200); grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .chiffres > div { padding: 12px 8px 0 0; border-bottom: 0; }
  .cartouche { grid-template-columns: 1fr 1fr; }
  .cartouche > div { border-left: 0; border-top: 1px solid var(--g300); }
  .cartouche > div:first-child { grid-column: 1 / -1; border-top: 0; }
  .cartouche .ct-cas { grid-column: 1 / -1; }
  .cartouche > div:nth-child(4) { border-left: 1px solid var(--g300); }
}
@media screen and (max-width: 640px) {
  .entete { padding: 14px 16px; }
  .entete-outil { display: none; }
  .page { padding: 20px 16px 48px; }
  .feuille, .question-zone { padding: 20px; }
  .note-decision { padding: 20px 16px; }
  .titre-outil { font-size: 32px; }
  .question { font-size: 21px; }
  .reco-titre { font-size: 28px; }
  .rail ol { display: none; }
  .rail-mobile { display: block; }
  .pf-nom { display: none; }
  .pf-tete::after { content: attr(data-court); }
  .etats { grid-template-columns: minmax(0, 1fr); }
  .variations li { grid-template-columns: minmax(0, 1fr) auto; }
  .v-entree { grid-column: 1 / -1; }
  .chiffres dd { font-size: 24px; }
  .rapport-page > .section { padding: 20px 16px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* Impression : page 1 = cartouche + synthèse, puis le détail */
@page { size: A4; margin: 14mm 13mm; }
@media print {
  body { background: #fff; font-size: 10.5pt; }
  .entete, .pied, .no-print { display: none !important; }
  .page { max-width: none; padding: 0; }
  .feuille, .note-decision { border: 0; box-shadow: none; padding: 0; }
  .synthese-bas { break-inside: avoid; }
  .note-decision > .section:first-of-type { break-before: page; }
  .section { break-inside: avoid-page; }
  .note-pied { break-inside: avoid; }
  .annexes { break-before: page; }
  .synthese-grille { grid-template-columns: minmax(0, 1fr) 190px; }
  .matrice, .verifs { min-width: 0; }
  .matrice .col-retenue, .voie-courante, .pill, .rang-1, .cartouche > div:first-child, .axe-courant { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  a { color: var(--ink); }
}


/* Information RGPD sous le formulaire */
.info-rgpd { margin-top: 14px; max-width: 62ch; }

/* Annexes : rappel des réponses */
.reponses { margin: 14px 0 0; display: grid; gap: 8px; }
.reponses > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 16px; font-size: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--g100); }
.reponses dt { color: var(--g600); }
.reponses dd { margin: 0; color: var(--ink); font-weight: 600; }
@media (max-width: 640px) { .reponses > div { grid-template-columns: minmax(0, 1fr); } }

/* Fondement lu en couches (source, déduction, prudence) */
.fd-couches { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 8px; font-size: 13.5px; color: var(--ink-3); }
.fd-couches p { margin: 0; }
.fd-nature { font: 600 10px var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--g500); margin-left: 6px; }