/* ==========================================================================
   Vigilance & Perspectives Talange — feuille de style du site
   Charte « Vigilance Bleue ». Aucune ressource n'est chargée depuis un
   serveur extérieur : la page annonce l'absence de traceur, un appel à
   Google Fonts transmettrait l'IP de chaque visiteur à un tiers.
   ========================================================================== */

:root{
  --ground:#F5F5F0;
  --surface:#FFFFFF;
  --surface-2:#EAECEF;
  --primary:#0C3A77;
  --deep:#062C61;
  --sage:#5A8A5E;
  /* Le vert de la charte donne 3,67:1 sur le fond clair : conforme pour un
     filet ou une bordure, insuffisant pour du texte. Variante assombrie
     réservée au texte — 5,06:1 sur le fond, 4,68:1 sur le gris. */
  --sage-texte:#457346;
  --ink:#3C4A56;
  --muted:#5F6B78;
  --rule:#DDE1E6;
  --on-deep:#EDF1F7;
  --on-deep-muted:#A9BBD4;
  --shadow:0 1px 2px rgba(6,44,97,.06), 0 8px 24px rgba(6,44,97,.05);

  /* Montserrat et Roboto si le visiteur les possède, police système sinon. */
  --titre:Montserrat,"Segoe UI Semibold","Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --corps:Roboto,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",Arial,sans-serif;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0F1926;
    --surface:#16233A;
    --surface-2:#1D2C46;
    --primary:#8FB4E8;
    --deep:#0A1424;
    --sage:#8CBE91;
    --sage-texte:#8CBE91;
    --ink:#D3DBE5;
    --muted:#93A2B5;
    --rule:#2A3A55;
    --on-deep:#E6ECF5;
    --on-deep-muted:#9FB2CC;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25);
  }
}
:root[data-theme="dark"]{
  --ground:#0F1926;
  --surface:#16233A;
  --surface-2:#1D2C46;
  --primary:#8FB4E8;
  --deep:#0A1424;
  --sage:#8CBE91;
  --sage-texte:#8CBE91;
  --ink:#D3DBE5;
  --muted:#93A2B5;
  --rule:#2A3A55;
  --on-deep:#E6ECF5;
  --on-deep-muted:#9FB2CC;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25);
}

*{box-sizing:border-box;}

body{
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--corps);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{font-family:var(--titre);color:var(--primary);text-wrap:balance;margin:0;}
h1{font-size:clamp(1.7rem,3.4vw,2.35rem);font-weight:700;line-height:1.18;letter-spacing:-.015em;}
h2{font-size:clamp(1.25rem,2.2vw,1.5rem);font-weight:700;line-height:1.25;}
h3{font-size:1.05rem;font-weight:600;color:var(--ink);}
p{margin:0;}
a{color:var(--primary);}
a:focus-visible,button:focus-visible{outline:2px solid var(--sage);outline-offset:3px;}
img{max-width:100%;}

.wrap{max-width:1080px;margin:0 auto;padding:0 24px;}
.prose{max-width:66ch;display:flex;flex-direction:column;gap:1.05em;}
.prose h2{margin-top:.4em;}
.eyebrow{font-size:.7rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
.note{font-size:.86rem;color:var(--muted);}
.tnum{font-variant-numeric:tabular-nums;}

/* Texte réservé aux lecteurs d'écran : présent dans le DOM et dans l'ordre
   de lecture, invisible à l'œil. Ni display:none ni visibility:hidden, qui
   le retireraient aussi de la restitution vocale. */
.hors-ecran{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

/* --- lien d'évitement (accessibilité clavier) --- */
.evitement{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--primary);color:#FFF;padding:10px 18px;text-decoration:none;
  font-family:var(--titre);font-weight:600;font-size:.9rem;
}
.evitement:focus{left:0;}

/* --- bandeau supérieur --- */
.topbar{background:var(--deep);color:var(--on-deep-muted);font-size:.78rem;letter-spacing:.02em;}
.topbar .wrap{display:flex;justify-content:space-between;gap:16px;padding-top:7px;padding-bottom:7px;flex-wrap:wrap;}
.topbar a{color:var(--on-deep);text-decoration:none;}
.topbar a:hover{text-decoration:underline;}

/* --- en-tête --- */
header.site{background:var(--surface);position:sticky;top:0;z-index:40;}
header.site .barre{background:var(--surface);border-bottom:1px solid var(--rule);}
header.site .barre .wrap{display:flex;align-items:center;gap:28px;min-height:70px;flex-wrap:wrap;}
.brand{display:flex;align-items:center;margin-right:auto;text-decoration:none;background:none;padding:0;}
.brand img{height:44px;width:auto;display:block;}
/* Le logo complet ne va jamais sur fond foncé : carte blanche en thème sombre. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .brand{background:#FFFFFF;padding:6px 10px;border-radius:3px;}
}
:root[data-theme="dark"] .brand{background:#FFFFFF;padding:6px 10px;border-radius:3px;}
:root[data-theme="light"] .brand{background:none;padding:0;}

nav.main{display:flex;gap:2px;flex-wrap:wrap;}
nav.main a{
  font-family:var(--titre);font-size:.83rem;font-weight:600;letter-spacing:.01em;
  color:var(--ink);text-decoration:none;padding:9px 13px;border-bottom:2px solid transparent;
}
nav.main a:hover{color:var(--primary);}
nav.main a[aria-current="page"]{color:var(--primary);border-bottom-color:var(--sage);}

@media (max-width:860px){
  header.site .topbar{display:none;}
}

/* --- sections --- */
main{flex:1 0 auto;}
section{padding:52px 0;}
section + section{border-top:1px solid var(--rule);}
.sec-head{display:flex;flex-direction:column;gap:6px;margin-bottom:26px;}

/* --- introduction de la page d'accueil --- */
.intro{padding:60px 0 54px;}
.intro .wrap{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:48px;align-items:start;}
.intro h1{margin-bottom:18px;}
.intro .lede{font-size:1.06rem;}
@media (max-width:860px){
  .intro{padding:40px 0 36px;}
  .intro .wrap{grid-template-columns:1fr;gap:30px;}
  section{padding:38px 0;}
}

.identite{
  background:var(--surface);border:1px solid var(--rule);border-left:3px solid var(--sage);
  padding:20px 22px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:11px;font-size:.86rem;
}
.identite dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:5px 14px;}
.identite dt{color:var(--muted);font-size:.76rem;letter-spacing:.05em;text-transform:uppercase;align-self:center;}
.identite dd{margin:0;font-weight:500;}

/* --- registre de documents --- */
.registre{border-top:1px solid var(--rule);}
.doc{
  display:grid;grid-template-columns:104px minmax(0,1fr) auto;gap:6px 22px;
  align-items:baseline;padding:18px 0;border-bottom:1px solid var(--rule);
}
.doc .ref{font-size:.76rem;letter-spacing:.06em;color:var(--muted);font-variant-numeric:tabular-nums;}
.doc .titre{font-family:var(--titre);font-weight:600;font-size:1rem;color:var(--primary);line-height:1.35;}
.doc .meta{grid-column:2;font-size:.83rem;color:var(--muted);}
.doc .meta span + span::before{content:"·";margin:0 .5em;color:var(--rule);}
/* La colonne et la ligne sont toutes deux explicites : un élément dont
   seule la ligne est définie est placé avant les autres par l'algorithme
   de grille et atterrit en première colonne. */
.doc .pdf{grid-column:3;grid-row:1 / span 2;align-self:center;}
@media (max-width:640px){
  .doc{grid-template-columns:1fr;gap:4px;}
  .doc .ref{grid-column:1;}
  .doc .titre{grid-column:1;}
  .doc .meta{grid-column:1;}
  .doc .pdf{grid-column:1;grid-row:auto;justify-self:start;margin-top:8px;}
}

.pdf{
  display:inline-flex;align-items:center;gap:7px;text-decoration:none;
  font-family:var(--titre);font-size:.78rem;font-weight:600;letter-spacing:.02em;
  color:var(--primary);border:1px solid var(--primary);padding:7px 13px;white-space:nowrap;
}
.pdf:hover{background:var(--primary);color:#FFFFFF;}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .pdf:hover{color:var(--deep);}
}
:root[data-theme="dark"] .pdf:hover{color:var(--deep);}
/* L'icône suit le texte : elle indique l'ouverture dans un nouvel onglet.
   Légèrement plus petite que le texte, et calée sur sa couleur. */
.pdf .ico{width:12px;height:12px;flex:none;opacity:.85;}

.statut{
  display:inline-block;font-size:.72rem;font-weight:500;letter-spacing:.07em;
  text-transform:uppercase;padding:3px 9px;border:1px solid currentColor;white-space:nowrap;
}
.statut.encours{color:var(--sage-texte);}
.statut.attente{color:var(--muted);}

/* --- liste de dossiers --- */
.dossiers{border-top:1px solid var(--rule);}
.dossier{
  display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:10px 34px;
  padding:24px 0;border-bottom:1px solid var(--rule);align-items:start;
}
.dossier .d-titre{
  font-family:var(--titre);font-weight:600;font-size:1.12rem;
  color:var(--primary);line-height:1.3;text-decoration:none;display:inline-block;
}
.dossier .d-titre:hover{text-decoration:underline;text-underline-offset:3px;}
.dossier p{font-size:.93rem;margin-top:7px;max-width:60ch;}
.d-side{display:flex;flex-direction:column;gap:8px;align-items:flex-start;font-size:.83rem;color:var(--muted);}
@media (max-width:720px){.dossier{grid-template-columns:1fr;}}

/* --- fiche à deux colonnes --- */
.fiche{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:52px;align-items:start;}
@media (max-width:820px){.fiche{grid-template-columns:1fr;gap:34px;}}
.fiche-side{background:var(--surface-2);padding:20px 22px;font-size:.86rem;display:flex;flex-direction:column;gap:14px;}
.fiche-side dl{margin:0;display:flex;flex-direction:column;gap:11px;}
.fiche-side dt{font-size:.71rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);}
.fiche-side dd{margin:2px 0 0;}
.retour{font-size:.83rem;display:inline-block;margin-bottom:20px;}

.chrono{border-top:1px solid var(--rule);margin-top:6px;}
.chrono div{display:grid;grid-template-columns:118px 1fr;gap:18px;padding:11px 0;border-bottom:1px solid var(--rule);font-size:.92rem;}
.chrono time{color:var(--muted);font-variant-numeric:tabular-nums;font-size:.85rem;}
@media (max-width:560px){.chrono div{grid-template-columns:1fr;gap:2px;}}

/* --- adhésion --- */
.tarifs{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);}
.tarif{background:var(--surface);padding:24px;display:flex;flex-direction:column;gap:6px;}
.tarif .montant{font-family:var(--titre);font-size:1.9rem;font-weight:700;color:var(--primary);line-height:1.1;font-variant-numeric:tabular-nums;}
.tarif .qui{font-family:var(--titre);font-weight:600;font-size:.95rem;color:var(--ink);}
.tarif .det{font-size:.88rem;color:var(--muted);}

/* --- actualités --- */
.breve{display:grid;grid-template-columns:118px minmax(0,1fr);gap:24px;padding:22px 0;border-bottom:1px solid var(--rule);}
.breve time{font-size:.83rem;color:var(--muted);font-variant-numeric:tabular-nums;padding-top:3px;}
.breve h2{font-size:1.05rem;margin-bottom:6px;}
.breve p{font-size:.94rem;max-width:62ch;}
@media (max-width:620px){.breve{grid-template-columns:1fr;gap:5px;}}

/* --- coordonnées --- */
.coords{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:24px 34px;margin-top:8px;}
.coords section{padding:0;border:0;display:flex;flex-direction:column;gap:3px;}
.coords h2{font-family:var(--corps);font-size:.71rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:4px;}
.coords a{text-decoration:none;font-weight:500;}
.coords a:hover{text-decoration:underline;}

.ecrire{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  font-family:var(--titre);font-weight:600;font-size:.9rem;letter-spacing:.02em;
  background:var(--primary);color:#FFFFFF;padding:12px 22px;align-self:flex-start;
}
.ecrire:hover{background:var(--deep);color:#FFFFFF;}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .ecrire{color:var(--deep);}
  :root:not([data-theme="light"]) .ecrire:hover{background:var(--surface-2);color:var(--primary);}
}
:root[data-theme="dark"] .ecrire{color:var(--deep);}
:root[data-theme="dark"] .ecrire:hover{background:var(--surface-2);color:var(--primary);}

/* --- bandeau d'appel --- */
.bandeau{background:var(--surface-2);}
.bandeau .wrap{display:flex;gap:32px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding-top:36px;padding-bottom:36px;}
.bandeau p{max-width:56ch;}

/* --- pied de page --- */
footer.site{flex:none;background:var(--deep);color:var(--on-deep-muted);font-size:.87rem;}
/* Blason à gauche, puis les trois rubriques côte à côte sur trois colonnes
   de largeur égale. minmax(0,1fr) et non 1fr : sans le minimum à zéro, une
   adresse électronique longue élargit sa colonne au détriment des autres. */
/* « > .wrap » et non « .wrap » : la barre légale contient elle aussi un
   .wrap, et la grille s'y appliquerait en découpant son texte en colonnes. */
footer.site > .wrap{
  padding-top:44px;padding-bottom:34px;
  display:grid;grid-template-columns:auto repeat(3,minmax(0,1fr));
  gap:36px;align-items:start;
}
/* Sous 900 px le blason passe seul sur sa ligne, les trois colonnes restent. */
@media (max-width:900px){
  footer.site > .wrap{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;}
  footer.site > .wrap > :first-child{grid-column:1 / -1;}
}
/* Sous 600 px trois colonnes deviennent illisibles : on empile. */
@media (max-width:600px){
  footer.site > .wrap{grid-template-columns:1fr;gap:24px;}
  footer.site > .wrap > :first-child{grid-column:auto;}
}
footer.site img{height:62px;width:auto;}
/* Limité aux colonnes de liens : appliqué à tout le pied, ce réglage casse
   aussi le lien des mentions légales en bas. */
.fcol a{overflow-wrap:anywhere;}
footer.site h2{color:var(--on-deep);font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;font-family:var(--corps);margin-bottom:11px;}
footer.site a{color:var(--on-deep);text-decoration:none;display:block;padding:3px 0;}
footer.site a:hover{text-decoration:underline;}
.fcol{display:flex;flex-direction:column;}
.legal{border-top:1px solid rgba(255,255,255,.13);}
footer.site .legal .wrap{display:flex;justify-content:space-between;gap:8px 20px;flex-wrap:wrap;padding-top:16px;padding-bottom:22px;font-size:.79rem;}
/* Le lien ne se comprime pas : il passe à la ligne entier plutôt que de se
   couper en trois. La mention d'inscription, elle, peut se réduire. */
footer.site .legal .wrap > span:first-child{flex:1 1 20ch;min-width:0;}
footer.site .legal .wrap > span:last-child{flex:0 0 auto;}
/* Sélecteur aussi spécifique que « footer.site a » plus haut, sinon le lien
   reste en display:block et se coupe sur trois lignes. */
footer.site .legal a{display:inline;padding:0;}

/* --- tableaux et listes --- */
.tbl-wrap{overflow-x:auto;}
table{border-collapse:collapse;width:100%;font-size:.9rem;min-width:440px;}
th,td{text-align:left;padding:10px 14px 10px 0;border-bottom:1px solid var(--rule);vertical-align:top;}
th{font-family:var(--titre);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600;}

code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"DejaVu Sans Mono",monospace;
  font-size:.9em;background:var(--surface-2);padding:1px 5px;border-radius:2px;
}

ul.pucee{margin:0;padding-left:1.15em;display:flex;flex-direction:column;gap:.5em;}
ul.pucee li::marker{color:var(--sage);}

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

@media print{
  .topbar,header.site,footer.site,.bandeau{display:none;}
  body{background:#FFF;color:#000;}
  a{color:#000;}
}