/* claude2odoo — système visuel v4
 * ============================================================================
 *
 * Les deux versions précédentes ont été rejetées, et pour deux raisons
 * opposées qu'il faut garder en tête ligne après ligne :
 *
 *   v2 « crème et terracotta » : serif décoratif, halos radiaux, héros centré.
 *       C'était le style par défaut d'un modèle de langage. Reconnu comme tel.
 *   v3 « blanc et filets » : un seul gris, un seul corps de texte, des filets
 *       d'un pixel partout, des tableaux partout. Un panneau d'administration
 *       de 2015, pas un produit.
 *
 * Le diagnostic commun aux deux : dans la v2 la décoration remplaçait la
 * hiérarchie, dans la v3 il n'y avait pas de hiérarchie du tout. Cette
 * version-ci ne décore rien et hiérarchise tout, par quatre moyens et quatre
 * seulement :
 *
 *   1. L'ÉCHELLE. Un titre de page fait 28 px, un corps 15 px, une méta
 *      12 px. Des écarts francs, pas les 13/14/15 px de la v3 où rien ne
 *      dominait rien.
 *   2. LA SURFACE. Trois plans distincts — page, carte, creux — obtenus par
 *      des nuances de neutre et une ombre neutre discrète. Un filet ne crée
 *      pas un plan, il trace une frontière ; la v3 confondait les deux.
 *   3. L'ESPACE. Une base de 4 px, et de la place. La densité d'un outil ne
 *      vient pas de l'étroitesse des marges, elle vient du nombre de choses
 *      utiles par écran.
 *   4. LA COULEUR, comptée. Un accent — outremer — et quatre sémantiques.
 *      L'accent ne sert qu'à trois choses : l'action principale, l'état
 *      courant, le focus. Partout ailleurs, du neutre.
 *
 * Interdits tenus : aucun dégradé, aucune lueur ni ombre colorée, aucun halo,
 * aucun serif, aucun emoji, aucun verre dépoli, aucun texte en dégradé,
 * aucune animation au-delà de 140 ms. Les ombres sont neutres et servent à
 * détacher un plan, jamais à faire joli.
 *
 * Contraintes : aucune ressource externe (polices système, icônes en SVG
 * inline ou en masque data:), rien qui exige un `<style>` en ligne.
 *
 * Compatibilité : 36 gabarits utilisent les noms de classes d'origine et
 * 25 attributs `style=` en ligne utilisent `var(--txt-2)` et `var(--trait)`.
 * Aucun nom n'a été retiré. Voir « ALIAS » en fin de fichier.
 */


/* ══════════════════════════════════════════════════════════════════════════
   1. JETONS
   ══════════════════════════════════════════════════════════════════════════

   Le neutre est légèrement bleuté (teinte 218°). Un gris parfaitement neutre
   posé à côté d'un accent froid paraît sale ; décaler le gris vers l'accent
   fait tenir l'ensemble. C'est le seul « effet » de cette feuille.

   L'accent est un outremer, #3b43e2. Ni le bleu Bootstrap de la v3 — que
   n'importe quel développeur date au premier coup d'œil — ni le violet qui
   sert d'uniforme à tous les produits d'IA depuis deux ans, et qui aurait
   rouvert exactement le procès de la v2. Il est vérifié : 6,8:1 sur blanc en
   texte, 6,8:1 en blanc sur lui en remplissage.
*/

:root{
  color-scheme:light;

  /* ---- neutres ---- */
  --n0:#ffffff;
  --n25:#fbfcfd;
  --n50:#f6f8fa;
  --n100:#eff2f6;
  --n150:#e6eaf0;
  --n200:#dde2e9;
  --n300:#c8cfd9;
  --n400:#949dab;
  --n500:#666e7c;
  --n600:#4b5261;
  --n700:#363d4a;
  --n800:#22272f;
  --n900:#12151a;

  /* ---- plans ---- */
  --fond:var(--n50);          /* fond de page */
  --surface:var(--n0);        /* carte */
  --surface-2:var(--n100);    /* creux : en-tête de tableau, bloc de code */
  --surface-3:var(--n150);    /* survol d'un creux */
  --creux:var(--surface-2);
  --rail:var(--n100);

  /* ---- traits ---- */
  --trait:var(--n150);        /* séparation à l'intérieur d'une surface */
  --trait-fort:var(--n200);   /* contour d'une carte posée sur la page */
  --trait-champ:var(--n400);  /* contour d'un contrôle : doit se voir */

  /* ---- texte ---- */
  --txt:var(--n900);
  --txt-2:var(--n600);
  --txt-3:var(--n500);
  --faint:var(--n500);        /* audit_view.html s'en sert et il n'existait pas */
  --sur-plein:#ffffff;        /* texte posé sur un remplissage saturé */

  /* ---- accent ---- */
  --accent:#3b43e2;
  --accent-fort:#2d34c4;      /* survol / enfoncé */
  --accent-txt:#333bd6;       /* liens : un cran plus sombre, plus lisible */
  --accent-pale:#eceefb;
  --accent-trait:#c3c8f5;
  --accent-voile:rgba(59,67,226,.16);   /* anneau de focus */

  /* ---- encre : l'action neutre forte (bouton sombre, sigle) ---- */
  --encre:var(--n900);
  --sur-encre:#ffffff;

  /* ---- sémantiques ---- */
  --vert:#0a7343;   --vert-pale:#e8f7ef;   --vert-trait:#a8dfc3;
  --ambre:#8a5300;  --ambre-pale:#fdf4e3;  --ambre-trait:#f0d49e;
  --rouge:#bf2f26;  --rouge-pale:#fdeeec;  --rouge-trait:#f3c2bd;
  --info:#0a6a94;   --info-pale:#e6f4fb;   --info-trait:#a9d8ec;
  --bleu:var(--accent); --bleu-fonce:var(--accent-fort); --bleu-pale:var(--accent-pale);
  /* Le rouge de TEXTE et le rouge de REMPLISSAGE ne peuvent pas être le même
     ton : le premier doit être sombre pour se lire sur un fond clair, le
     second doit rester saturé pour qu'un bouton destructeur ait l'air d'un
     bouton destructeur. En thème sombre ils divergent franchement. */
  --rouge-plein:#bf2f26; --sur-rouge:#ffffff;

  /* ---- ombres : neutres, jamais colorées ---- */
  --ombre-1:0 1px 2px rgba(16,20,28,.05), 0 1px 3px rgba(16,20,28,.04);
  --ombre-2:0 2px 4px -1px rgba(16,20,28,.06), 0 6px 14px -4px rgba(16,20,28,.08);
  --ombre-btn:0 1px 2px rgba(16,20,28,.06);

  /* ---- rayons ---- */
  --r:12px;      /* carte */
  --r-2:9px;     /* bouton, champ, avis */
  --r-3:6px;     /* jeton, pastille */
  --r-4:4px;     /* code en ligne */

  /* ---- rythme d'espacement, base 4 ---- */
  --e1:4px;  --e2:8px;  --e3:12px; --e4:16px; --e5:20px;
  --e6:24px; --e7:32px; --e8:40px; --e9:56px; --e10:72px; --e11:96px;

  /* ---- typographie ----
     Pile système uniquement : aucune ressource distante n'est autorisée, et
     une pile bien ordonnée rend mieux qu'une police téléchargée qui arrive en
     retard. L'ordre suit la part de marché réelle : Apple, puis Windows 11
     (Segoe UI Variable), puis Windows 10, puis Android, puis les Linux de
     bureau, puis Arial en dernier recours. */
  --police:-apple-system,BlinkMacSystemFont,"Segoe UI Variable Text","Segoe UI",
           Roboto,"Inter","Noto Sans","Liberation Sans",Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono","Cascadia Mono","JetBrains Mono",
         Menlo,Consolas,"Liberation Mono",monospace;

  --t-2xs:11px; --t-xs:12px; --t-sm:13px; --t-md:15px; --t-lg:17px;
  --t-xl:20px;  --t-2xl:24px; --t-3xl:28px; --t-4xl:34px;

  --vitesse:.13s;
  --courbe:cubic-bezier(.3,.7,.4,1);
}

/* ── thème sombre ──────────────────────────────────────────────────────────
   Ce n'est pas la palette claire inversée. Trois écarts délibérés :
   – le fond de page n'est pas noir mais #0b0d10 : le noir pur fait vibrer le
     texte clair et fatigue en dix minutes de lecture ;
   – les cartes sont PLUS CLAIRES que la page, l'inverse du thème clair : dans
     le noir, l'élévation se lit en lumière, pas en ombre — les ombres sont
     donc réduites à presque rien et le travail passe aux surfaces ;
   – les couleurs sémantiques sont désaturées et éclaircies : un rouge saturé
     sur fond sombre papillote.
*/
@media (prefers-color-scheme:dark){
  :root{
    color-scheme:dark;

    --n0:#0b0d10;
    --n25:#101317;
    --n50:#14171b;
    --n100:#1b1f25;
    --n150:#22272e;
    --n200:#2b313a;
    --n300:#3a414c;
    --n400:#5c6572;
    --n500:#868e9c;
    --n600:#a5adba;
    --n700:#c3cad4;
    --n800:#dde2e9;
    --n900:#eceff3;

    --fond:#0b0d10;
    --surface:#14171b;
    --surface-2:#1b1f25;
    --surface-3:#232830;
    --creux:var(--surface-2);
    --rail:#101317;

    --trait:#22272e;
    --trait-fort:#282e36;
    --trait-champ:#5c6572;

    --txt:#eceff3;
    --txt-2:#a5adba;
    --txt-3:#868e9c;
    --faint:#868e9c;

    --accent:#4b52e6;
    --accent-fort:#5a61f0;
    --accent-txt:#9099ff;
    --accent-pale:#171a3a;
    --accent-trait:#2f3572;
    --accent-voile:rgba(120,128,255,.24);

    --encre:#eceff3;
    --sur-encre:#0b0d10;

    --vert:#46cf94;   --vert-pale:#0e2a1e;   --vert-trait:#1d4f3a;
    --ambre:#e8a94c;  --ambre-pale:#2a1e0a;  --ambre-trait:#54401a;
    --rouge:#ff8478;  --rouge-pale:#2c1412;  --rouge-trait:#5b2925;
    --info:#4fbde8;   --info-pale:#08222e;   --info-trait:#154a5f;
    --bleu:var(--accent); --bleu-fonce:var(--accent-fort); --bleu-pale:var(--accent-pale);
    --rouge-plein:#d13a2e; --sur-rouge:#ffffff;

    --ombre-1:0 1px 2px rgba(0,0,0,.34);
    --ombre-2:0 2px 6px rgba(0,0,0,.4), 0 8px 24px -6px rgba(0,0,0,.5);
    --ombre-btn:0 1px 2px rgba(0,0,0,.3);
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   2. RÉINITIALISATION ET ÉLÉMENTS
   ══════════════════════════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--fond);
  color:var(--txt);
  font-family:var(--police);
  font-size:var(--t-md);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

/* Les chiffres d'une colonne doivent s'aligner verticalement. Réservé aux
   endroits où ils forment une colonne : en prose, la chasse fixe des chiffres
   creuse des trous après un « 1 ». */
table,.num,.mono,.mesures,.faits dd,.prix,code,pre{
  font-variant-numeric:tabular-nums lining-nums}

/* Le pied doit rester en bas de la fenêtre sur les pages courtes — connexion,
   erreur, mot de passe oublié. Sans cela il remontait sous la carte et
   laissait un tiers d'écran vide au-dessous : l'aspect d'une page qui a raté
   son chargement. */
body{min-height:100vh;display:flex;flex-direction:column}
main{display:block;flex:1 0 auto}
.pied{flex:none}

/* Et quand cette page courte est un formulaire d'authentification, elle se
   centre. `:has()` limite la règle à ce seul cas ; là où il n'est pas
   compris, la page reste alignée en haut, ce qui reste correct. */
main:has(> .page-etroite:only-child){display:flex;flex-direction:column;
  justify-content:center}
main:has(> .page-etroite:only-child) > .page-etroite{width:100%}

/* La hiérarchie typographique. Les écarts sont volontairement grands : c'est
   le premier reproche fait à la v3, où un titre de page dépassait le corps de
   texte de sept pixels et ne dominait donc rien. */
h1,h2,h3,h4{margin:0;font-weight:600;color:var(--txt);text-wrap:balance}
h1{font-size:var(--t-3xl);line-height:1.18;letter-spacing:-.022em}
h2{font-size:var(--t-xl);line-height:1.3;letter-spacing:-.014em}
h3{font-size:var(--t-md);line-height:1.4;letter-spacing:-.006em}
h4{font-size:var(--t-sm);line-height:1.4}

p{margin:0 0 var(--e3)}
p:last-child{margin-bottom:0}

a{color:var(--accent-txt);text-decoration:none;
  text-underline-offset:2px;text-decoration-thickness:1px}
a:hover{text-decoration:underline}

strong,b{font-weight:600;color:var(--txt)}
small{font-size:var(--t-xs)}

code,.mono{font-family:var(--mono);font-size:.9em;font-variant-ligatures:none}
code{background:var(--surface-2);border:1px solid var(--trait);
  border-radius:var(--r-4);padding:.1em .35em;color:var(--txt)}

hr{border:0;border-top:1px solid var(--trait);margin:var(--e6) 0}

ul,ol{margin:0 0 var(--e3);padding-left:1.35em}
li{margin-bottom:var(--e1)}
li:last-child{margin-bottom:0}

::selection{background:var(--accent-voile);color:var(--txt)}

/* Défilement : la barre par défaut de Chrome sous thème sombre est claire et
   fait une bande blanche sur le côté. */
*{scrollbar-color:var(--n300) transparent;scrollbar-width:thin}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--n300);border-radius:99px;
  border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--n400);background-clip:content-box}


/* ══════════════════════════════════════════════════════════════════════════
   3. ACCESSIBILITÉ
   ══════════════════════════════════════════════════════════════════════════ */

/* Un focus visible au clavier, invisible à la souris. `:focus-visible` fait
   exactement cette distinction ; l'anneau est décalé de 2 px pour rester
   lisible sur un bouton plein comme sur un fond clair. */
:focus{outline:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;
  border-radius:var(--r-3)}
.btn:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible{outline-offset:2px}

/* Le premier élément focalisable de chaque page saute la navigation. Hors du
   cadre tant qu'il n'a pas le focus. */
.saut{position:fixed;top:var(--e2);left:var(--e2);z-index:100;
  transform:translateY(-200%);
  background:var(--encre);color:var(--sur-encre);
  padding:var(--e2) var(--e4);border-radius:var(--r-2);
  font-size:var(--t-sm);font-weight:600;box-shadow:var(--ombre-2)}
.saut:focus{transform:translateY(0);text-decoration:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    transition-duration:.01ms!important;animation-duration:.01ms!important;
    scroll-behavior:auto!important}
}

/* Icône en ligne : ne rétrécit jamais, s'aligne sur la ligne de base optique
   du texte plutôt que sur la ligne de base réelle. */
.ico{flex:none;display:inline-block;vertical-align:-.16em}


/* ══════════════════════════════════════════════════════════════════════════
   4. ICÔNES POSÉES PAR LA FEUILLE
   ══════════════════════════════════════════════════════════════════════════

   Les 36 gabarits ne peuvent pas être modifiés, et ce sont eux qui portent
   les avis, les constats et les écrans vides. Pour leur donner une icône sans
   y toucher, elle est posée en `mask-image` sur un pseudo-élément : le masque
   découpe un aplat de `currentColor`, donc l'icône prend la couleur du texte
   et suit le thème sombre sans variante.

   `data:` est autorisé par `img-src` de la CSP ; rien ne sort du serveur.
*/
:root{
  --i-bloquant:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='m9.2 9.2 5.6 5.6M14.8 9.2l-5.6 5.6'/%3E%3C/svg%3E");
  --i-avertir:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.7 4.2 2.9 17.4A1.5 1.5 0 0 0 4.2 19.7h15.6a1.5 1.5 0 0 0 1.3-2.3L13.3 4.2a1.5 1.5 0 0 0-2.6 0Z'/%3E%3Cpath d='M12 9.4v4.2M12 16.6v.1'/%3E%3C/svg%3E");
  --i-verifier:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 11.2v5M12 8v.1'/%3E%3C/svg%3E");
  --i-ok:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='m8.4 12.2 2.5 2.5 4.7-5'/%3E%3C/svg%3E");
  --i-coche:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E");
  --i-vide:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 9.5 6 4.8A1.5 1.5 0 0 1 7.3 4h9.4a1.5 1.5 0 0 1 1.3.8l2.5 4.7'/%3E%3Cpath d='M3.5 9.5v8A1.5 1.5 0 0 0 5 19h14a1.5 1.5 0 0 0 1.5-1.5v-8z'/%3E%3Cpath d='M9 12.5h6'/%3E%3C/svg%3E");
  --i-fleche:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12h14M13 6.5 18.5 12 13 17.5'/%3E%3C/svg%3E");
}

/* Fabrique un carré masqué. Toute règle qui pose `--i` sur un élément portant
   `.a-ico::before` obtient l'icône correspondante. */
.a-ico::before{
  content:"";display:block;flex:none;
  width:var(--i-taille,18px);height:var(--i-taille,18px);
  background:currentColor;
  -webkit-mask:var(--i) center/contain no-repeat;
          mask:var(--i) center/contain no-repeat;
}


/* ══════════════════════════════════════════════════════════════════════════
   5. BARRE SUPÉRIEURE
   ══════════════════════════════════════════════════════════════════════════

   Collante : sur un écran d'étape long, revenir en haut pour changer de
   chantier coûtait un défilement complet. Opaque et non translucide — le
   verre dépoli est justement ce qui datera cette page dans deux ans.
*/
.barre{
  position:sticky;top:0;z-index:30;
  background:var(--surface);
  border-bottom:1px solid var(--trait);
}
.barre-dedans{
  display:flex;align-items:center;gap:var(--e5);
  max-width:1220px;margin:0 auto;
  padding:0 var(--e6);min-height:58px;
}

/* ---- sigle ---- */
.marque{display:inline-flex;align-items:center;gap:var(--e2);
  color:var(--txt);font-size:var(--t-md);font-weight:600;
  letter-spacing:-.015em;flex:none}
.marque:hover{text-decoration:none;color:var(--txt)}
.marque .carre{display:block;width:24px;height:24px;line-height:0}
.marque svg{display:block;width:24px;height:24px}
.marque svg .fond{fill:var(--encre)}
.marque svg .ligne{stroke:var(--sur-encre);stroke-width:1.9;fill:none;
  stroke-linecap:round;opacity:.5}
.marque svg .herite{stroke:var(--marque-accent,#8b93ff);opacity:1}
@media (prefers-color-scheme:dark){:root{--marque-accent:#3b43e2}}

/* ---- navigation ----
   L'état courant est une pastille pleine, pas un simple gras. Sur la v3 il
   fallait comparer deux mots pour savoir où l'on était. */
.menu{display:flex;align-items:center;gap:var(--e1);min-width:0}
.menu a{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 10px;border-radius:var(--r-2);
  color:var(--txt-2);font-size:var(--t-sm);font-weight:500;
  white-space:nowrap;
  transition:background var(--vitesse) var(--courbe),
             color var(--vitesse) var(--courbe);
}
.menu a .ico{color:var(--txt-3);transition:color var(--vitesse) var(--courbe)}
.menu a:hover{background:var(--surface-2);color:var(--txt);text-decoration:none}
.menu a:hover .ico{color:var(--txt-2)}
.menu a.actif{background:var(--surface-2);color:var(--txt);font-weight:600}
.menu a.actif .ico{color:var(--accent-txt)}

.pousse{flex:1;min-width:0}

/* ---- bout de barre : compte et sortie ---- */
.bout{display:flex;align-items:center;gap:var(--e2);flex:none}
.bout form{margin:0}
.lien-barre{color:var(--txt-2);font-size:var(--t-sm);font-weight:500;
  padding:6px 8px;border-radius:var(--r-2)}
.lien-barre:hover{color:var(--txt);background:var(--surface-2);
  text-decoration:none}

.qui{display:inline-flex;align-items:center;gap:7px;
  padding:4px 10px 4px 4px;border-radius:99px;
  color:var(--txt-2);font-size:var(--t-sm);max-width:230px;
  transition:background var(--vitesse) var(--courbe)}
.qui:hover{background:var(--surface-2);color:var(--txt);text-decoration:none}
.qui .adresse{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qui .pastille{
  flex:none;width:24px;height:24px;border-radius:99px;
  background:var(--accent-pale);color:var(--accent-txt);
  border:1px solid var(--accent-trait);
  display:flex;align-items:center;justify-content:center;
  font-size:var(--t-xs);font-weight:700;text-transform:uppercase}


/* ══════════════════════════════════════════════════════════════════════════
   6. STRUCTURE DE PAGE
   ══════════════════════════════════════════════════════════════════════════ */

.page{max-width:1220px;margin:0 auto;padding:var(--e7) var(--e6) var(--e11)}
.page-etroite{max-width:440px;margin:0 auto;padding:var(--e10) var(--e5) var(--e11)}

/* En-tête d'écran : le titre porte l'échelle, la phrase sous lui porte le
   contexte. Le tout respire — 32 px avant le premier bloc. */
.entete{display:flex;align-items:flex-start;gap:var(--e4);
  margin-bottom:var(--e7);flex-wrap:wrap}
.entete .titres{flex:1 1 320px;min-width:0}
.entete h1{margin:0}
.entete p{margin:6px 0 0;color:var(--txt-2);font-size:var(--t-md);
  max-width:78ch;line-height:1.6}
/* La ligne d'identité sous un titre (adresse, version, empreinte) : elle est
   en chasse fixe et doit rester une ligne de service, pas un sous-titre. */
.entete p.mono{font-size:var(--t-sm);display:flex;align-items:center;
  gap:var(--e2);flex-wrap:wrap}
.entete .actions{flex:none;padding-top:2px}

/* Fil d'Ariane. Placé AU-DESSUS du titre, en petit : c'est un repère, pas une
   information. */
.fil{font-size:var(--t-sm);color:var(--txt-3);margin-bottom:var(--e3);
  display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.fil a{color:var(--txt-3);font-weight:500}
.fil a:hover{color:var(--txt)}


/* ══════════════════════════════════════════════════════════════════════════
   7. CARTES
   ══════════════════════════════════════════════════════════════════════════

   Une carte, c'est un plan au-dessus de la page : une surface plus claire (ou
   plus lumineuse en thème sombre), un contour, et une ombre neutre de deux
   pixels. Ces trois-là ensemble suffisent — c'est ce qui manquait à la v3, où
   un filet d'un pixel devait tout faire.
*/
.bloc{
  background:var(--surface);
  border:1px solid var(--trait-fort);
  border-radius:var(--r);
  box-shadow:var(--ombre-1);
  position:relative;
}
.bloc + .bloc{margin-top:var(--e5)}

.bloc > header{
  display:flex;align-items:center;gap:var(--e3);flex-wrap:wrap;
  padding:var(--e4) var(--e5);
  border-bottom:1px solid var(--trait);
}
.bloc > header h2{flex:1;min-width:0;font-size:var(--t-md);
  letter-spacing:-.008em}
.bloc > header h3{flex:1;min-width:0}
.bloc > header .actions{flex:none}

.bloc .corps{padding:var(--e5)}
.bloc .corps > :first-child{margin-top:0}
.bloc .corps > :last-child{margin-bottom:0}

/* Une carte qui contient un tableau : le tableau va bord à bord, ses en-têtes
   forment le creux, et la dernière ligne épouse l'arrondi du bas. */
.bloc > table{margin:0}
.bloc > table thead th:first-child{border-top-left-radius:0}
.bloc > header + table thead th{background:var(--surface-2)}
.bloc > table:first-child thead th:first-child{border-top-left-radius:var(--r)}
.bloc > table:first-child thead th:last-child{border-top-right-radius:var(--r)}
.bloc > table:last-child tbody tr:last-child td:first-child{
  border-bottom-left-radius:var(--r)}
.bloc > table:last-child tbody tr:last-child td:last-child{
  border-bottom-right-radius:var(--r)}

/* ---- grilles ---- */
.duo{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);
  gap:var(--e5);align-items:start}
.paire{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--e5);align-items:start;margin-top:var(--e5)}
.trio{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:var(--e5);align-items:start}
/* Dans une grille, l'écart est le `gap`. Sans cette ligne, `.bloc + .bloc`
   décalerait la deuxième colonne d'un cran vers le bas. */
.duo > .bloc + .bloc,.paire > .bloc + .bloc,.trio > .bloc + .bloc,
.tarifs > .bloc + .bloc{margin-top:0}
@media (max-width:940px){
  .duo,.paire{grid-template-columns:minmax(0,1fr)}
}


/* ══════════════════════════════════════════════════════════════════════════
   8. BOUTONS
   ══════════════════════════════════════════════════════════════════════════

   Trois niveaux et pas un de plus : plein d'accent pour l'action de l'écran,
   contour pour tout le reste, nu pour ce qui ne mérite pas un cadre. Le rouge
   n'est pas un quatrième niveau, c'est un avertissement.

   `min-height` et non `height` : « Mes chantiers » dans une colonne étroite
   passe à deux lignes, et un bouton à hauteur fixe l'aurait tronqué.
*/
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:36px;padding:7px 14px;
  border-radius:var(--r-2);
  border:1px solid var(--trait-fort);
  background:var(--surface);color:var(--txt);
  font-family:inherit;font-size:var(--t-sm);font-weight:550;line-height:1.35;
  letter-spacing:-.004em;
  text-align:center;cursor:pointer;
  box-shadow:var(--ombre-btn);
  transition:background var(--vitesse) var(--courbe),
             border-color var(--vitesse) var(--courbe),
             color var(--vitesse) var(--courbe),
             box-shadow var(--vitesse) var(--courbe);
}
.btn:hover{background:var(--surface-2);border-color:var(--n300);
  color:var(--txt);text-decoration:none}
.btn:active{background:var(--surface-3);box-shadow:none}

.btn-primaire{background:var(--accent);border-color:var(--accent);
  color:var(--sur-plein)}
.btn-primaire:hover{background:var(--accent-fort);
  border-color:var(--accent-fort);color:var(--sur-plein)}
.btn-primaire:active{background:var(--accent-fort);box-shadow:none}

.btn-danger{background:var(--rouge-plein);border-color:var(--rouge-plein);
  color:var(--sur-rouge)}
.btn-danger:hover{background:var(--rouge-plein);border-color:var(--rouge-plein);
  filter:brightness(.92);color:var(--sur-rouge)}
@media (prefers-color-scheme:dark){
  .btn-danger:hover{filter:brightness(1.12)}
}

.btn-discret{background:transparent;border-color:transparent;
  color:var(--txt-2);box-shadow:none}
.btn-discret:hover{background:var(--surface-2);border-color:transparent;
  color:var(--txt)}

.btn:disabled,.btn[aria-disabled=true]{opacity:.45;cursor:not-allowed;
  box-shadow:none;pointer-events:none}

.btn-petit{min-height:30px;padding:4px 10px;font-size:var(--t-xs);gap:5px}
.btn-large{width:100%;min-height:42px;font-size:var(--t-md);padding:9px 16px}
.btn-ico .ico{opacity:.75}

.actions{display:flex;gap:var(--e2);align-items:center;flex-wrap:wrap}


/* ══════════════════════════════════════════════════════════════════════════
   9. FORMULAIRES
   ══════════════════════════════════════════════════════════════════════════ */

label{display:block;font-size:var(--t-sm);font-weight:600;color:var(--txt);
  margin:var(--e5) 0 6px;letter-spacing:-.004em}
label:first-child{margin-top:0}

input,select,textarea{
  width:100%;
  min-height:38px;padding:8px 11px;
  border-radius:var(--r-2);
  border:1px solid var(--trait-champ);
  background:var(--surface);color:var(--txt);
  font-family:inherit;font-size:var(--t-sm);line-height:1.4;
  transition:border-color var(--vitesse) var(--courbe),
             box-shadow var(--vitesse) var(--courbe);
}
input::placeholder,textarea::placeholder{color:var(--txt-3);opacity:1}
input:hover,select:hover,textarea:hover{border-color:var(--n500)}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-voile)}
input:disabled,select:disabled,textarea:disabled{
  background:var(--surface-2);color:var(--txt-3);cursor:not-allowed}
/* Une case à cocher n'est pas un champ de saisie : sans cette remise à zéro,
   elle hérite du rembourrage, du contour et de l'arrondi ci-dessus et se
   rend en gros rectangle vide. */
input[type=checkbox],input[type=radio]{
  width:17px;height:17px;min-height:0;flex:none;
  padding:0;border:0;border-radius:0;background:none;
  accent-color:var(--accent);cursor:pointer;
  vertical-align:-3px;margin:0 6px 0 0}
input[type=radio]{border-radius:99px}

/* Un libellé de case à cocher : le texte s'aligne sur la PREMIÈRE ligne de la
   case, pas sur son centre, et les lignes suivantes se rangent sous le texte et
   non sous la case. Sans ça, un libellé de deux lignes — ce qui arrive dès
   qu'on explique ce qu'on coche — passe sous la case et le bloc se lit mal. */
label.case{display:flex;align-items:flex-start;gap:2px;cursor:pointer;
  font-weight:400;font-size:13px;line-height:1.5;color:var(--txt-2)}
label.case input[type=checkbox]{margin-top:2px}

/* Le sélecteur de fichier natif : la moitié gauche du champ est un bouton
   dessiné par le navigateur, gris et carré. On lui donne l'apparence des
   nôtres — sans quoi c'est le seul contrôle de l'application à ne pas suivre
   le thème sombre. */
input[type=file]{padding:5px;background:var(--surface-2);cursor:pointer;
  min-height:40px;line-height:28px;color:var(--txt-2);font-size:var(--t-sm)}
input[type=file]::file-selector-button{
  margin-right:10px;padding:6px 12px;
  border:1px solid var(--trait-fort);border-radius:var(--r-3);
  background:var(--surface);color:var(--txt);
  font-family:inherit;font-size:var(--t-sm);font-weight:550;cursor:pointer;
  transition:background var(--vitesse) var(--courbe)}
input[type=file]::file-selector-button:hover{background:var(--surface-3)}
textarea{resize:vertical;min-height:96px;line-height:1.6;padding:10px 12px}
input.mono,textarea.mono,select.mono{font-family:var(--mono);font-size:var(--t-xs)}

/* Chrome pose un fond jaune sur les champs remplis automatiquement, illisible
   en thème sombre. L'ombre intérieure le recouvre — c'est la seule parade. */
input:-webkit-autofill,input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--txt);
  -webkit-box-shadow:0 0 0 40px var(--surface) inset;
  caret-color:var(--txt)}

fieldset{border:0;padding:0;margin:0;min-width:0}
legend{padding:0;font-size:var(--t-sm);font-weight:600}

.aide{font-size:var(--t-xs);color:var(--txt-3);margin-top:6px;line-height:1.55}

.champs-2{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--e4)}
@media (max-width:680px){.champs-2{grid-template-columns:1fr}}

/* Barre de filtres : trois contrôles courts sur une ligne. */
.filtre{display:flex;gap:var(--e2);flex-wrap:wrap;align-items:center;
  margin-bottom:var(--e4)}
.filtre input{flex:1 1 220px;min-width:0;margin:0}
.filtre select{flex:0 0 auto;margin:0;width:auto;min-width:120px}


/* ══════════════════════════════════════════════════════════════════════════
   10. TABLEAUX
   ══════════════════════════════════════════════════════════════════════════

   Aérés : 12 px de haut, 20 px de côté — l'alignement des cellules de bord
   sur le rembourrage d'une carte. La v3 tenait ses lignes à 8 px et l'œil ne
   distinguait plus une ligne de la suivante.
*/
table{width:100%;border-collapse:collapse;font-size:var(--t-sm)}

th{
  text-align:left;
  font-size:var(--t-2xs);font-weight:600;color:var(--txt-3);
  text-transform:uppercase;letter-spacing:.055em;
  padding:10px var(--e5);
  background:var(--surface-2);
  border-bottom:1px solid var(--trait);
  white-space:nowrap;
}
td{padding:12px var(--e5);border-bottom:1px solid var(--trait);
  vertical-align:middle;color:var(--txt-2)}
td strong{color:var(--txt);font-weight:600}
tbody tr:last-child td{border-bottom:0}
tbody tr{transition:background var(--vitesse) var(--courbe)}

tr.cliquable{cursor:pointer}
tr.cliquable:hover td{background:var(--surface-2)}
tr.cliquable:focus-within td{background:var(--surface-2)}

td.num,th.num{text-align:right;font-family:var(--mono);
  font-size:var(--t-xs);white-space:nowrap}
td .mono{color:var(--txt-2);font-size:var(--t-xs)}


/* ══════════════════════════════════════════════════════════════════════════
   11. AVIS
   ══════════════════════════════════════════════════════════════════════════

   L'icône dit le niveau avant que le texte ne soit lu, et le dit encore à qui
   ne distingue pas le rouge du vert. Le CORPS du message reste en couleur de
   texte normale : la v3 peignait tout le paragraphe en rouge, ce qui coûtait
   de la lisibilité pour une information déjà portée trois fois.
*/
.avis{
  position:relative;
  padding:var(--e4) var(--e4) var(--e4) 46px;
  border:1px solid var(--trait);
  border-radius:var(--r-2);
  background:var(--surface);
  color:var(--txt);
  font-size:var(--t-sm);line-height:1.6;
  margin-bottom:var(--e5);
}
.avis::before{
  content:"";position:absolute;left:var(--e4);top:var(--e4);
  width:18px;height:18px;background:currentColor;
  -webkit-mask:var(--i,var(--i-verifier)) center/contain no-repeat;
          mask:var(--i,var(--i-verifier)) center/contain no-repeat;
  color:var(--txt-3);
}
.avis strong{display:block;margin-bottom:3px;font-size:var(--t-sm);
  letter-spacing:-.004em}
.avis p{margin:0 0 var(--e2)}
.avis p:last-child{margin-bottom:0}
.avis a{font-weight:500}

.avis-err{--i:var(--i-bloquant);background:var(--rouge-pale);
  border-color:var(--rouge-trait);color:var(--txt)}
.avis-err::before{color:var(--rouge)}
.avis-err strong{color:var(--rouge)}

.avis-att{--i:var(--i-avertir);background:var(--ambre-pale);
  border-color:var(--ambre-trait);color:var(--txt)}
.avis-att::before{color:var(--ambre)}
.avis-att strong{color:var(--ambre)}

.avis-ok{--i:var(--i-ok);background:var(--vert-pale);
  border-color:var(--vert-trait);color:var(--txt)}
.avis-ok::before{color:var(--vert)}
.avis-ok strong{color:var(--vert)}

.avis-info{--i:var(--i-verifier);background:var(--info-pale);
  border-color:var(--info-trait);color:var(--txt)}
.avis-info::before{color:var(--info)}
.avis-info strong{color:var(--info)}


/* ══════════════════════════════════════════════════════════════════════════
   12. JETONS
   ══════════════════════════════════════════════════════════════════════════ */

.jeton{
  display:inline-flex;align-items:center;gap:4px;
  padding:2px 8px;border-radius:var(--r-3);
  font-size:var(--t-2xs);font-weight:600;line-height:1.5;
  letter-spacing:.005em;white-space:nowrap;
  border:1px solid transparent;vertical-align:1px;
}
.j-neutre{background:var(--surface-2);color:var(--txt-2);border-color:var(--trait)}
.j-bleu{background:var(--info-pale);color:var(--info);border-color:var(--info-trait)}
.j-vert{background:var(--vert-pale);color:var(--vert);border-color:var(--vert-trait)}
.j-ambre{background:var(--ambre-pale);color:var(--ambre);border-color:var(--ambre-trait)}
.j-rouge{background:var(--rouge-pale);color:var(--rouge);border-color:var(--rouge-trait)}


/* ══════════════════════════════════════════════════════════════════════════
   13. CONSTATS
   ══════════════════════════════════════════════════════════════════════════ */

.constat{
  position:relative;
  padding:var(--e3) var(--e4) var(--e3) 44px;
  border:1px solid var(--trait);border-left-width:3px;
  border-radius:var(--r-2);
  background:var(--surface);
  margin-bottom:var(--e2);
  font-size:var(--t-sm);
}
.constat::before{
  content:"";position:absolute;left:var(--e3);top:14px;
  width:17px;height:17px;background:currentColor;color:var(--txt-3);
  -webkit-mask:var(--i,var(--i-verifier)) center/contain no-repeat;
          mask:var(--i,var(--i-verifier)) center/contain no-repeat;
}
.constat .tete{display:flex;gap:var(--e2);align-items:baseline;
  flex-wrap:wrap;margin-bottom:2px}
.constat .regle,.constat .lvl{font-family:var(--mono);font-size:var(--t-2xs);
  font-weight:600;color:var(--txt-3);letter-spacing:.02em}
.constat .quoi,.constat .what{font-weight:600;color:var(--txt)}
.constat .pourquoi,.constat .why{color:var(--txt-2);font-size:var(--t-xs);
  margin-top:4px;line-height:1.6}
.constat .sortie,.constat .fix{color:var(--txt-2);font-size:var(--t-xs);
  margin-top:5px;line-height:1.6;display:flex;gap:6px;align-items:flex-start}
.constat .sortie::before,.constat .fix::before{
  content:"";flex:none;width:14px;height:14px;margin-top:2px;
  background:var(--txt-3);
  -webkit-mask:var(--i-fleche) center/contain no-repeat;
          mask:var(--i-fleche) center/contain no-repeat}

.BLOQUANT{--i:var(--i-bloquant);border-left-color:var(--rouge)}
.BLOQUANT::before{color:var(--rouge)}
.AVERTIR{--i:var(--i-avertir);border-left-color:var(--ambre)}
.AVERTIR::before{color:var(--ambre)}
.VÉRIFIER{--i:var(--i-verifier);border-left-color:var(--info)}
.VÉRIFIER::before{color:var(--info)}
.propre,.constat.clean{--i:var(--i-ok);border-left-color:var(--vert);
  color:var(--vert)}
.propre::before,.constat.clean::before{color:var(--vert)}


/* ══════════════════════════════════════════════════════════════════════════
   14. RAIL D'ÉTAPES
   ══════════════════════════════════════════════════════════════════════════

   Quatre cartes plutôt qu'un bandeau segmenté : chaque étape porte son rang,
   son nom et son état, et l'étape courante se lit sans comparer. Le rang est
   une pastille — c'est lui qui donne au rail sa forme de parcours.
*/
.etapes{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--e3);margin-bottom:var(--e7);
}
.etape{
  display:flex;flex-direction:column;gap:5px;align-items:flex-start;
  padding:var(--e3) var(--e4);
  border:1px solid var(--trait-fort);border-radius:var(--r);
  background:var(--surface);box-shadow:var(--ombre-1);
  color:var(--txt-2);min-width:0;
  transition:background var(--vitesse) var(--courbe),
             border-color var(--vitesse) var(--courbe),
             box-shadow var(--vitesse) var(--courbe);
}
.etape:hover{background:var(--surface-2);border-color:var(--n300);
  text-decoration:none}
.etape .rang{
  display:inline-flex;align-items:center;gap:5px;
  padding:2px 7px;border-radius:var(--r-3);
  background:var(--surface-2);border:1px solid var(--trait);
  font-family:var(--mono);font-size:var(--t-2xs);font-weight:600;
  color:var(--txt-3);letter-spacing:.01em;white-space:nowrap}
.etape .nom{display:block;font-weight:600;font-size:var(--t-sm);
  color:var(--txt);letter-spacing:-.005em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.etape .etat{display:block;font-size:var(--t-xs);color:var(--txt-3);
  line-height:1.45}

.etape.faite .rang{background:var(--vert-pale);border-color:var(--vert-trait);
  color:var(--vert)}
.etape.faite .rang::after{
  content:"";width:11px;height:11px;background:currentColor;
  -webkit-mask:var(--i-coche) center/contain no-repeat;
          mask:var(--i-coche) center/contain no-repeat}

.etape.courante{background:var(--accent-pale);border-color:var(--accent-trait);
  box-shadow:var(--ombre-1),inset 0 0 0 1px var(--accent-trait)}
.etape.courante .rang{background:var(--accent);border-color:var(--accent);
  color:var(--sur-plein)}
.etape.courante .nom{color:var(--accent-txt)}
.etape.courante .etat{color:var(--txt-2)}
.etape.courante:hover{background:var(--accent-pale)}

.etape.bloquee{opacity:.55;box-shadow:none;background:var(--surface-2)}
.etape.bloquee:hover{background:var(--surface-2)}

@media (max-width:1000px){.etapes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.etapes{grid-template-columns:minmax(0,1fr)}}


/* ══════════════════════════════════════════════════════════════════════════
   15. MESURES
   ══════════════════════════════════════════════════════════════════════════

   Le chiffre d'abord, gros, en chasse fixe ; le libellé après, petit. La v3
   les donnait au même corps, et un bandeau de mesures où rien ne domine ne
   sert à rien.
*/
.mesures{display:grid;grid-template-columns:repeat(auto-fit,minmax(146px,1fr));
  gap:var(--e3);margin-bottom:var(--e5)}
.mesures div{
  display:flex;flex-direction:column-reverse;gap:2px;
  padding:var(--e3) var(--e4);
  border:1px solid var(--trait-fort);border-radius:var(--r);
  background:var(--surface);box-shadow:var(--ombre-1);
  font-size:var(--t-xs);color:var(--txt-3);line-height:1.4}
.mesures b{font-size:var(--t-2xl);font-weight:600;color:var(--txt);
  font-family:var(--mono);letter-spacing:-.03em;line-height:1.1}


/* ══════════════════════════════════════════════════════════════════════════
   16. LISTES DE FAITS
   ══════════════════════════════════════════════════════════════════════════ */

.faits{display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:var(--e2) var(--e5);font-size:var(--t-sm);margin:0}
.faits dt{color:var(--txt-3);font-size:var(--t-xs);white-space:nowrap;
  line-height:1.6;padding-top:1px}
.faits dd{margin:0;font-family:var(--mono);font-size:var(--t-xs);
  color:var(--txt);overflow-wrap:anywhere;line-height:1.6}


/* ══════════════════════════════════════════════════════════════════════════
   17. CODE AFFICHÉ
   ══════════════════════════════════════════════════════════════════════════ */

pre{
  margin:0;padding:var(--e4);
  background:var(--surface-2);
  border:1px solid var(--trait);border-radius:var(--r-2);
  overflow-x:auto;
  font-family:var(--mono);font-size:var(--t-xs);line-height:1.7;
  color:var(--txt);
  font-variant-numeric:normal;
}
pre code{background:none;border:0;padding:0;font-size:inherit}


/* ══════════════════════════════════════════════════════════════════════════
   18. FIL DE DISCUSSION
   ══════════════════════════════════════════════════════════════════════════ */

.fil-discussion{display:flex;flex-direction:column;gap:var(--e5)}
.message{display:flex;gap:var(--e3)}
.message .initiale{
  flex:none;width:32px;height:32px;border-radius:99px;
  background:var(--surface-2);border:1px solid var(--trait);
  font-size:var(--t-xs);font-weight:700;color:var(--txt-2);
  display:flex;align-items:center;justify-content:center;
  text-transform:uppercase}
.message .contenu{flex:1;min-width:0}
.message .meta{font-size:var(--t-xs);color:var(--txt-3);margin-bottom:3px;
  display:flex;gap:var(--e2);align-items:baseline;flex-wrap:wrap}
.message .meta b{color:var(--txt);font-weight:600;font-size:var(--t-sm)}
.message .texte{font-size:var(--t-sm);white-space:pre-wrap;line-height:1.65;
  color:var(--txt-2)}
.message.decision .initiale{background:var(--vert-pale);color:var(--vert);
  border-color:var(--vert-trait)}
.message.decision .contenu{border-left:2px solid var(--vert-trait);
  padding-left:var(--e3)}
.message.decision .texte::before{content:"Décision — ";font-weight:600;
  color:var(--vert)}


/* ══════════════════════════════════════════════════════════════════════════
   19. ÉTAT VIDE
   ══════════════════════════════════════════════════════════════════════════ */

.vide{
  color:var(--txt-3);font-size:var(--t-sm);
  padding:var(--e7) var(--e5);text-align:center;line-height:1.6;
  max-width:52ch;margin-left:auto;margin-right:auto}
.vide::before{
  content:"";display:block;width:26px;height:26px;margin:0 auto var(--e3);
  background:var(--txt-3);opacity:.6;
  -webkit-mask:var(--i-vide) center/contain no-repeat;
          mask:var(--i-vide) center/contain no-repeat}


/* ══════════════════════════════════════════════════════════════════════════
   20. PAGES DE LECTURE — aide, mode d'emploi
   ══════════════════════════════════════════════════════════════════════════

   Une colonne, une mesure bornée, un interligne desserré. Le corps y passe à
   16 px : ce sont les seules pages du produit qu'on lit vraiment, par
   opposition aux écrans de travail qu'on balaie.
*/
/* La mesure est tenue UNE FOIS, par le conteneur — 680 px, soit environ
   soixante-quinze signes à 16 px. Aucune règle intérieure ne la reprend :
   quand chaque élément portait sa propre borne, les paragraphes s'arrêtaient
   à mi-chemin des tableaux et la colonne avait deux bords droits. */
.accueil{max-width:680px;margin:0 auto;padding:var(--e10) var(--e6) var(--e11)}
.accueil h1{font-size:var(--t-4xl);line-height:1.15;letter-spacing:-.026em}
.accueil .chapeau{color:var(--txt-2);font-size:var(--t-lg);
  margin:var(--e4) 0 var(--e8);line-height:1.6;max-width:none}
.accueil section{margin-top:var(--e9)}
.accueil section h2{margin-bottom:var(--e4)}
.accueil h3{font-size:var(--t-lg);margin:var(--e7) 0 var(--e3);
  letter-spacing:-.012em}
.accueil p{font-size:16px;line-height:1.72;color:var(--txt-2);
  max-width:none;margin-bottom:var(--e4)}
.accueil ul,.accueil ol{margin:0 0 var(--e4);padding-left:1.3em;
  color:var(--txt-2);line-height:1.72;font-size:16px;max-width:none}
.accueil li{margin-bottom:var(--e2)}
.accueil ul strong,.accueil ol strong{color:var(--txt)}
.accueil .bloc,.accueil .constat,.accueil .avis,.accueil pre{
  margin:var(--e5) 0}
.accueil .aide{font-size:var(--t-sm)}


/* ══════════════════════════════════════════════════════════════════════════
   21. PAGES LÉGALES
   ══════════════════════════════════════════════════════════════════════════ */

.legal p{color:var(--txt-2);line-height:1.75;max-width:none}
.legal section h2{margin-bottom:var(--e3)}
.legal h3{margin:var(--e6) 0 var(--e2);color:var(--txt)}
.legal .bloc{margin-top:var(--e5)}

/* Un champ que l'exploitant n'a pas rempli. Il doit crever l'œil : une mention
   légale incomplète mise en ligne est une infraction, et la discrétion
   typographique serait ici un défaut. */
.a-completer{background:var(--ambre-pale);color:var(--ambre);
  border:1px dashed var(--ambre-trait);border-radius:var(--r-4);
  padding:1px 5px;font-family:var(--mono);font-size:.88em;font-weight:600}


/* ══════════════════════════════════════════════════════════════════════════
   22. VITRINE — page d'accueil publique
   ══════════════════════════════════════════════════════════════════════════

   Des bandes pleine largeur, alternées par la surface et non par un filet.
   L'accroche n'est pas centrée et ne pose pas un gros bouton au milieu : ce
   qu'on voit en premier est un relevé vérifiable, dans une carte, à droite.
*/
.bande{border-top:1px solid var(--trait)}
.vitrine > .bande:first-child{border-top:0}
.bande-creuse{background:var(--rail)}
.bande > .dedans{max-width:1160px;margin:0 auto;padding:var(--e10) var(--e6)}
.vitrine > .bande:first-child > .dedans{padding-top:var(--e11)}

/* La mesure d'un titre de section n'est pas celle d'un paragraphe : à 24 px,
   couper à 22 signes donnait quatre lignes de trois mots — un empilement, pas
   un titre. 40 signes tiennent la ligne longue sans la laisser filer. */
.bande h2{font-size:var(--t-2xl);margin-bottom:var(--e4);letter-spacing:-.02em;
  max-width:40ch}
.bande .bloc > header h2{font-size:var(--t-md);margin-bottom:0;max-width:none;
  letter-spacing:-.008em}
.bande p{color:var(--txt-2);line-height:1.72;max-width:66ch;
  margin:0 0 var(--e4);font-size:16px}
.bande ul,.bande ol{margin:0;padding-left:1.3em;color:var(--txt-2);
  line-height:1.72;max-width:68ch;font-size:16px}
.bande li + li{margin-top:var(--e2)}
.bande ul strong{color:var(--txt)}
.bande .bloc p:last-child,.bande .actions:last-child{margin-bottom:0}
.bande .bloc p{font-size:var(--t-sm);line-height:1.65}
.bande .aide{color:var(--txt-3);line-height:1.6;max-width:70ch;
  margin:var(--e4) 0 0;font-size:var(--t-sm)}
.bande .repere{color:var(--txt-3);font-size:var(--t-sm);margin:var(--e4) 0 0;
  max-width:66ch;line-height:1.6}
.accroche .repere{max-width:none}
.bande .avis p{color:inherit;max-width:none;font-size:var(--t-sm)}
.bande .actions{margin-top:var(--e6)}
.bande .bloc .actions{margin-top:var(--e4)}
.bande .bloc-etroit{max-width:820px}
.bande table{font-size:var(--t-sm)}

/* La phrase qui porte l'argument. Un filet et du corps, pas une citation
   décorative : l'accent vient du poids du texte. */
.bande .appui{
  border-left:3px solid var(--accent);padding-left:var(--e4);
  margin:var(--e6) 0 0;color:var(--txt);
  font-size:var(--t-xl);font-weight:500;line-height:1.45;
  letter-spacing:-.014em;max-width:48ch}

/* ---- accroche ---- */
.accroche{display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:var(--e10);align-items:start}
/* Pas de `max-width` ici : la colonne de gauche de `.accroche` borne déjà la
   ligne, et une contrainte de plus faisait cinq lignes de quatre mots. */
.accroche h1{
  font-size:clamp(30px,4.4vw,46px);line-height:1.08;letter-spacing:-.032em;
  font-weight:600;text-wrap:pretty}
/* Comme pour le titre : c'est la colonne qui borne. Une borne de plus faisait
   un chapeau nettement plus étroit que le titre au-dessus, et deux bords
   droits décalés dans le même bloc de texte se voient. */
.accroche .chapeau{color:var(--txt-2);font-size:var(--t-lg);line-height:1.62;
  margin:var(--e5) 0 var(--e7);max-width:none}
.accroche .actions{margin-top:0}
.accroche .btn{min-height:42px;padding:10px 18px;font-size:var(--t-md)}
.accroche .faits{gap:var(--e2) var(--e5)}
.accroche .faits + .aide{margin-top:var(--e4)}
.accroche .bloc{position:sticky;top:calc(58px + var(--e5))}

/* ---- parcours ---- */
.parcours{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--e4);margin-top:var(--e6)}
.jalon{
  border:1px solid var(--trait-fort);border-radius:var(--r);
  background:var(--surface);box-shadow:var(--ombre-1);
  padding:var(--e5)}
.jalon .rang{display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:99px;
  background:var(--surface-2);border:1px solid var(--trait);
  font-family:var(--mono);font-size:var(--t-xs);font-weight:600;
  color:var(--txt-2);margin-bottom:var(--e3)}
.jalon h3{margin:0 0 var(--e2);font-size:var(--t-md)}
.jalon p{margin:0;font-size:var(--t-sm);line-height:1.65;color:var(--txt-2);
  max-width:none}

/* ---- tarifs ---- */
.tarifs{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
  gap:var(--e5);margin-top:var(--e6);align-items:stretch}
.tarif{display:flex;flex-direction:column}
.tarif > .corps{flex:1;display:flex;flex-direction:column}
.tarif .prix{font-family:var(--mono);font-size:var(--t-3xl);color:var(--txt);
  letter-spacing:-.035em;margin-bottom:var(--e3);font-weight:600;
  line-height:1.1;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.tarif .prix .par{font-size:var(--t-sm);color:var(--txt-3);font-weight:400;
  letter-spacing:0}
.tarif .pour{color:var(--txt);font-size:var(--t-sm);margin:0 0 var(--e3);
  max-width:none;font-weight:500}
.tarif .ouvre{font-size:var(--t-sm);line-height:1.65;margin:0;max-width:none;
  color:var(--txt-2)}
.tarif .actions{margin-top:auto;padding-top:var(--e5)}

/* Sur une page de vente, ce qui dépasse du cadre n'existe pas — et ce qui
   dépasse ici, ce sont les commentaires de provenance que l'extrait vient
   prouver. Il se replie plutôt que de se laisser couper. */
.bande pre{white-space:pre-wrap;overflow-wrap:anywhere}
/* Un tableau d'écran de travail ne rétrécit pas ; sur une page publique lue au
   téléphone, c'est la page ENTIÈRE qui partirait en défilement horizontal. */
.bande th{white-space:normal}
.bande td .mono{overflow-wrap:anywhere}

@media (max-width:1000px){
  .accroche{grid-template-columns:minmax(0,1fr);gap:var(--e7)}
  .accroche .bloc{position:static}
  .parcours{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .parcours{grid-template-columns:minmax(0,1fr)}
}


/* ══════════════════════════════════════════════════════════════════════════
   23. PIED
   ══════════════════════════════════════════════════════════════════════════ */

.pied{border-top:1px solid var(--trait);background:var(--surface);
  margin-top:0;padding:var(--e8) var(--e6)}
.pied-dedans{max-width:1220px;margin:0 auto}
.pied p{margin:0}
.pied .engagements{
  display:flex;flex-wrap:wrap;gap:var(--e3) var(--e6);
  font-size:var(--t-sm);color:var(--txt-2);line-height:1.5}
.pied .engagements span{display:inline-flex;align-items:center;gap:7px}
.pied .engagements .ico{color:var(--txt-3)}
.pied .legaux{
  display:flex;flex-wrap:wrap;gap:var(--e2) var(--e5);align-items:center;
  margin-top:var(--e6);padding-top:var(--e5);
  border-top:1px solid var(--trait);
  font-size:var(--t-xs)}
.pied .legaux a{color:var(--txt-3)}
.pied .legaux a:hover{color:var(--txt)}
.pied .copyright{color:var(--txt-3);font-weight:600;margin-right:auto}


/* ══════════════════════════════════════════════════════════════════════════
   24. ADAPTATION AUX PETITS ÉCRANS
   ══════════════════════════════════════════════════════════════════════════

   Cible basse : 320 px, sans un seul pixel de défilement horizontal. Le point
   dur n'est pas la mise en page mais les tableaux : un `xmlid` ne se coupe
   nulle part et un en-tête est en `nowrap`. La parade est de faire défiler le
   TABLEAU dans sa carte, pas la page.
*/
@media (max-width:900px){
  .barre-dedans{flex-wrap:wrap;gap:var(--e3) var(--e4);
    padding:var(--e3) var(--e4);align-items:center}
  .menu{order:3;width:100%;
    /* Plutôt que d'entasser cinq entrées : elles défilent, et on voit qu'il y
       en a d'autres. Un menu replié derrière un bouton coûterait un clic à
       chaque navigation. */
    overflow-x:auto;padding-bottom:2px;
    scrollbar-width:none}
  .menu::-webkit-scrollbar{display:none}
  .pousse{display:none}
  .bout{margin-left:auto}
  .qui .adresse{display:none}
  .qui{padding:4px;max-width:none}
  .accroche .bloc{position:static}
}

@media (max-width:680px){
  .page{padding:var(--e5) var(--e4) var(--e9)}
  .page-etroite{padding:var(--e7) var(--e4) var(--e9)}
  .accueil{padding:var(--e7) var(--e4) var(--e9)}
  .bande > .dedans{padding:var(--e8) var(--e4)}
  .vitrine > .bande:first-child > .dedans{padding-top:var(--e7)}
  .pied{padding:var(--e7) var(--e4)}

  h1{font-size:var(--t-2xl)}
  h2{font-size:var(--t-lg)}
  .bande h2{font-size:var(--t-xl)}
  .accueil h1{font-size:var(--t-3xl)}
  .bande .appui{font-size:var(--t-lg)}
  .entete{margin-bottom:var(--e6)}

  .bloc .corps{padding:var(--e4)}
  .bloc > header{padding:var(--e3) var(--e4)}
  th,td{padding-left:var(--e4);padding-right:var(--e4)}

  /* Le tableau devient son propre conteneur de défilement. `display:block`
     génère une boîte de tableau anonyme autour des lignes : les colonnes
     restent alignées, et c'est la carte qui contient le débordement. */
  .bloc > table{display:block;overflow-x:auto;max-width:100%}
  .bloc > table:first-child thead th:first-child,
  .bloc > table:first-child thead th:last-child,
  .bloc > table:last-child tbody tr:last-child td:first-child,
  .bloc > table:last-child tbody tr:last-child td:last-child{border-radius:0}

  .actions{width:100%}
  .actions > .btn{flex:1 1 auto}
  .entete .actions{width:auto}
}

@media (max-width:420px){
  .page,.page-etroite,.accueil{padding-left:var(--e3);padding-right:var(--e3)}
  .bande > .dedans,.pied{padding-left:var(--e3);padding-right:var(--e3)}
  .barre-dedans{padding-left:var(--e3);padding-right:var(--e3)}
  .marque .mot{font-size:var(--t-sm)}
  .bloc .corps{padding:var(--e3)}
  th,td{padding-left:var(--e3);padding-right:var(--e3)}
  .mesures{grid-template-columns:minmax(0,1fr)}
  .tarifs{grid-template-columns:minmax(0,1fr)}
  .avis{padding-left:42px;padding-right:var(--e3)}
  .avis::before{left:var(--e3)}
}


/* ══════════════════════════════════════════════════════════════════════════
   25. ALIAS DE COMPATIBILITÉ
   ══════════════════════════════════════════════════════════════════════════

   Rien n'a été renommé dans les gabarits. Ces quelques règles couvrent les
   noms qui n'appartiennent plus au système mais restent dans le HTML — les
   retirer casserait un rendu, et un rendu cassé coûte plus cher qu'une règle
   morte.
*/
.bande-creuse .bloc{background:var(--surface)}
.note{font-size:var(--t-sm);color:var(--txt-2);line-height:1.6}
/* Restes Bootstrap dans un extrait de code affiché par landing.html : ils y
   sont cités, pas appliqués. Aucune règle ne doit leur répondre. */


/* ══════════════════════════════════════════════════════════════════════════
   26. CLASSES NOUVELLES, DISPONIBLES POUR LES GABARITS
   ══════════════════════════════════════════════════════════════════════════

   Aucune n'est employée aujourd'hui. Elles existent pour remplacer les
   tableaux là où une liste dirait mieux, et pour les écrans à venir.

     .liste > .rangee        une liste de cartes à la place d'un tableau
     .rangee .principal      la colonne qui porte le nom
     .rangee .secondaire     ce qui se lit ensuite
     .rangee .bout-rangee    ce qui s'aligne à droite
     .trio                   grille de cartes, 3 colonnes puis 1
     .pile                   empilement vertical au rythme standard
     .separe                 un filet horizontal au rythme standard
     .cle-valeur             une paire libellé/valeur en ligne
     .etiquette              un libellé de section, petit et capitalisé
     .btn-encre              l'action neutre forte (noir sur clair)
*/

.liste{display:flex;flex-direction:column;gap:var(--e2);margin:0;padding:0;
  list-style:none}
.rangee{
  display:flex;align-items:center;gap:var(--e4);
  padding:var(--e4) var(--e5);
  border:1px solid var(--trait-fort);border-radius:var(--r);
  background:var(--surface);box-shadow:var(--ombre-1);
  transition:background var(--vitesse) var(--courbe),
             border-color var(--vitesse) var(--courbe)}
a.rangee:hover,.rangee.cliquable:hover{background:var(--surface-2);
  border-color:var(--n300);text-decoration:none}
.rangee .principal{flex:1;min-width:0}
.rangee .principal > :first-child{font-weight:600;color:var(--txt);
  font-size:var(--t-md);letter-spacing:-.008em}
.rangee .secondaire{color:var(--txt-3);font-size:var(--t-sm);margin-top:2px}
.rangee .bout-rangee{flex:none;display:flex;align-items:center;gap:var(--e3)}

.pile{display:flex;flex-direction:column;gap:var(--e5)}
.separe{border:0;border-top:1px solid var(--trait);margin:var(--e6) 0}
.cle-valeur{display:flex;justify-content:space-between;gap:var(--e4);
  padding:var(--e2) 0;font-size:var(--t-sm);border-bottom:1px solid var(--trait)}
.cle-valeur:last-child{border-bottom:0}
.cle-valeur > :first-child{color:var(--txt-3)}
.cle-valeur > :last-child{color:var(--txt);font-weight:500;text-align:right}
.etiquette{display:block;font-size:var(--t-2xs);font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;color:var(--txt-3);
  margin-bottom:var(--e2)}
.btn-encre{background:var(--encre);border-color:var(--encre);
  color:var(--sur-encre)}
.btn-encre:hover{background:var(--n800);border-color:var(--n800);
  color:var(--sur-encre)}

/* Une carte destructive. Attribut et non classe : c'est un état du bloc, pas
   une variante — et un `border-color` écrit en dur dans le gabarit donnait un
   contour rose vif sur fond sombre. */
.bloc[data-danger]{border-color:var(--rouge-trait)}
.bloc[data-danger] > header{border-bottom-color:var(--rouge-trait)}