/* ============================================================
   Portail éditorial — styles globaux
   ------------------------------------------------------------
   ADOPTION du Système de design v2 (design-system/tokens.css).
   Règle : chrome = plateforme (pétrole) · statut = sémantique · accent = maison.
   Les jetons v2 (--petrole-*, --ok-*, --encre-*, --papier…) sont la SOURCE DE VÉRITÉ.
   Les anciens noms de l'app (--pf-*, --status-*, --ink, --paper…) sont conservés
   comme ALIAS vers les valeurs v2, pour que les ~800 styles inline existants
   adoptent immédiatement le look v2 sans être réécrits. La migration inline→classes
   se fait ensuite écran par écran, puis on retire ces alias.
   Exception : la barre latérale reste sombre (--side-*) — choix de marque à trancher.
   ============================================================ */

html, body { height: 100%; }
#root { height: 100%; }

:root {
  /* ===== Jetons v2 canoniques (= design-system/tokens.css) ===== */
  --petrole-900:#08303f; --petrole-800:#0e445c; --petrole-700:#0b3a4f;
  --petrole-600:#1c5e78; --petrole-400:#3f8298; --petrole-100:#e3edf1; --petrole-50:#e9f1f4;

  --papier:#faf8f3; --surface-v2:#f2efe7; --ligne-faible:#efece4; --ligne:#e6e2d9; --ligne-forte:#dcd7cc;
  --encre:#1f2630; --discret:#5d6470; --muet:#7c828d;

  --ok:#0c8a3e;        --ok-fond:#e6f3ea;        --ok-texte:#096e32;
  --attention:#e7920f; --attention-fond:#fdf1dc; --attention-texte:#8f5c06;
  --retard:#c0392b;    --retard-fond:#fbe6e6;    --retard-texte:#a72e21;
  --nouveau:#6553a8;   --nouveau-fond:#edeaf6;   --nouveau-texte:#55459a;
  --neutre:#7c828d;    --neutre-fond:#eeece6;    --neutre-texte:#5d6470;

  --charesso:#a4232f; --charesso-fond:#f7e7e8;
  --edpaca:#fd5602;   --edpaca-fond:#fedebe; --edpaca-texte:#a53a00; --edpaca-plein:#c74400;
  --puh:#0077b6;      --puh-fond:#caf0f8;    --puh-texte:#03045e;

  --police:'Inter', system-ui, sans-serif;
  --titre:'Fraunces', Georgia, 'Times New Roman', serif;   /* face éditoriale : titres uniquement */
  --esp-1:4px; --esp-2:8px; --esp-3:12px; --esp-4:16px; --esp-5:20px; --esp-6:32px; --esp-7:44px;
  --rayon-s:6px; --rayon-m:9px; --rayon-l:14px; --rayon-pastille:999px;
  --ombre-flottante:0 8px 24px rgba(31,38,48,.14);
  --anneau-focus:0 0 0 3px rgba(28,94,120,.35);
  --survol-chrome:#ebe7dd;

  /* ===== ALIAS — anciens noms de l'app → valeurs v2 (compat des styles inline) ===== */
  /* Pétrole (chrome, boutons, focus) */
  --pf-900:var(--petrole-900); --pf-800:var(--petrole-800); --pf-700:var(--petrole-800);
  --pf-600:var(--petrole-600); --pf-400:var(--petrole-400); --pf-300:#6fa3b6; --pf-200:#9cc0cd;
  --pf-100:var(--petrole-100); --pf-50:var(--petrole-50);
  --pf-primary:var(--petrole-800); --pf-mark:#2f7f99; --pf-ink:#04222c;

  /* Barre latérale — CONSERVÉE SOMBRE (non alignée sur le chrome clair v2 ; à trancher) */
  --side-text:#cfe0e6; --side-muted:#9cc0cd; --side-faint:#8fa9b4;
  --side-accent:#a9d4e0; --side-chip:#143f52; --side-warn:#e6c886; --toast-accent:#74d6c6;

  /* Statuts → v2 (nouveau = violet ; retard = teinte v2) */
  --status-ok:var(--ok);           --status-ok-ink:var(--ok-texte);        --status-ok-bg:var(--ok-fond);
  --status-due:var(--attention);   --status-due-ink:var(--attention-texte);--status-due-bg:var(--attention-fond); --status-due-line:#f4e0b8;
  --status-late:var(--retard);     --status-late-ink:var(--retard-texte);  --status-late-bg:var(--retard-fond);   --status-late-line:#f2cdcd;
  --status-new:var(--nouveau);     --status-new-ink:var(--nouveau-texte);  --status-new-bg:var(--nouveau-fond);   --status-new-line:#dcd5ef;

  /* Neutres → v2 (bascule des surfaces froides vers chaudes) */
  --ink:var(--encre); --ink-2:#2c333d; --ink-3:#3a414c;
  --muted:var(--discret); --muted-2:#6d7582; --muted-3:var(--muet);
  --paper:var(--papier); --surface:#ffffff; --surface-2:var(--surface-v2); --surface-3:var(--ligne-faible);
  --line:var(--ligne); --line-2:var(--ligne-faible);

  /* Maisons → v2 (EDPACA orange · PUH azur) */
  --house-charesso:var(--charesso); --house-charesso-2:#6b6b6b; --house-charesso-bg:var(--charesso-fond);
  --house-edpaca:var(--edpaca); --house-edpaca-2:var(--edpaca-plein); --house-edpaca-3:#f5a01e; --house-edpaca-bg:var(--edpaca-fond);
  --house-puh:var(--puh); --house-puh-accent:var(--puh-texte); --house-puh-bg:var(--puh-fond);

  /* Rayons (échelle de l'app) */
  --r-sm:6px; --r-md:9px; --r-lg:14px; --r-xl:18px;
}

/* ===== Inter — auto-hébergé (design-system v2), latin, poids 400–800 ===== */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url("fonts/inter-latin-400-normal.woff2") format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url("fonts/inter-latin-500-normal.woff2") format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url("fonts/inter-latin-600-normal.woff2") format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url("fonts/inter-latin-700-normal.woff2") format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url("fonts/inter-latin-800-normal.woff2") format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* ===== Fraunces — auto-hébergé (@fontsource), face éditoriale pour les TITRES ===== */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:500;font-display:swap;src:url("fonts/fraunces-latin-500-normal.woff2") format('woff2');}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:600;font-display:swap;src:url("fonts/fraunces-latin-600-normal.woff2") format('woff2');}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:700;font-display:swap;src:url("fonts/fraunces-latin-700-normal.woff2") format('woff2');}

*{box-sizing:border-box}
body{margin:0;font-family:var(--police);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
button,input,select,textarea{font-family:inherit;font-size:inherit}
:focus-visible{outline:2px solid var(--petrole-400);outline-offset:2px;border-radius:4px}

/* ============================================================
   Couche de POLISH (v2.1) — profondeur + réactivité.
   Principe anti-conflit : l'app est stylée en INLINE (les styles inline
   gagnent toujours sur une classe pour la MÊME propriété). On pilote donc
   le survol/appui uniquement via des propriétés JAMAIS posées inline :
   box-shadow, filter, transform, transition. Zéro collision, zéro réécriture.
   ============================================================ */

/* Titres : face éditoriale Fraunces (Inter reste pour toute l'UI). Léger resserrement. */
h1,h2,h3,h4,.titre{font-family:var(--titre);letter-spacing:-.006em}

/* Cartes : ombre-murmure (les <section> étaient plates). */
.pf-card{box-shadow:0 1px 2px rgba(31,38,48,.05),0 1px 3px rgba(31,38,48,.035);transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease}

/* Cartes cliquables (tuiles stat, etc.) : léger soulèvement au survol. */
.pf-tap{cursor:pointer}
.pf-tap:hover{box-shadow:var(--ombre-flottante);transform:translateY(-2px);border-color:var(--ligne-forte)}
.pf-tap:active{transform:translateY(0);box-shadow:0 1px 2px rgba(31,38,48,.06)}

/* Boutons : retour visuel au survol/à l'appui (filter+ombre, jamais inline). */
.pf-btn{transition:filter .15s ease,box-shadow .15s ease,transform .1s ease}
.pf-btn:hover:not(:disabled){filter:brightness(1.05);box-shadow:0 2px 8px rgba(31,38,48,.1)}
.pf-btn:active:not(:disabled){transform:translateY(1px);filter:brightness(.98)}

/* Lignes de liste cliquables : fond au survol (aucun fond posé inline). */
.pf-row{transition:background .14s ease}
.pf-row:hover{background:var(--surface-2)}

/* Étape (barre horizontale) : bord + soulèvement au survol pour les non-sélectionnées. */
.pf-step{transition:border-color .15s ease,background .15s ease,box-shadow .15s ease,transform .1s ease}
.pf-step:hover{border-color:var(--pf-400);transform:translateY(-1px)}
.pf-step:active{transform:translateY(0)}

/* Liens « Ouvrir » de fichiers : soulignement discret au survol. */
.pf-link{transition:opacity .14s ease}
.pf-link:hover{opacity:.72;text-decoration:underline}

@media (prefers-reduced-motion: reduce){
  .pf-card,.pf-tap,.pf-btn,.pf-row,.pf-step,.pf-link{transition:none}
  .pf-tap:hover,.pf-step:hover,.pf-btn:active,.pf-step:active,.pf-tap:active{transform:none}
}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#d7d2c6;border-radius:8px;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:#c6c0b2;background-clip:content-box}
@keyframes toastIn{from{transform:translate(-50%,10px);opacity:0}to{transform:translate(-50%,0);opacity:1}}
@keyframes modalIn{from{transform:translateY(14px) scale(.99);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}