/* ============================================================================
   CERFY — Service Carte Grise · feuille de style unique (refonte 10/2026)
   ----------------------------------------------------------------------------
   Principe : toutes les couleurs, polices, rayons et ombres sont des variables
   définies ICI : thème « nuit » par défaut (direction Prestige du 11/10/2026)
   et thème « jour » (html[data-theme="clair"], mémorisé par assets/js/theme.js).
   Aucune page ne redéfinit de couleur dans un bloc <style> local.
   Identité : bleu nuit CERFY + or (actions, filets, chiffres) ; le rouge du logo
   reste réservé au filet d'identité de l'en-tête et aux erreurs.
   Les noms de classes historiques du site sont conservés (entete, carte, btn,
   input, alerte, grille-docs, doc, dropzone, chemin/jalon, bloc…).
   ============================================================================ */

/* ----------------------------------------------------------- Polices */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal; font-weight: 300 800; font-display: swap;
  src: url("../fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal; font-weight: 300 800; font-display: swap;
  src: url("../fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Police des plaques d'immatriculation (D-DIN, licence OFL) */
@font-face {
  font-family: "D-DIN";
  src: local("DIN 1451 Mittelschrift"), local("Alte DIN 1451 Mittelschrift"),
       url("../fonts/d-din-bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ----------------------------------------------------------- Variables */
/* Thème par défaut : « nuit » (direction Prestige retenue le 11/10/2026).
   Thème « jour » : html[data-theme="clair"], même langage sur fond clair.   */
:root {
  /* surfaces */
  --nuit:        #061A4A;
  --nuit-2:      #071D55;
  --fond:        #061A4A;
  --fond-2:      rgba(255,255,255,.06);
  --carte:       rgba(255,255,255,.055);
  --carte-pleine:#0E2660;                 /* surface opaque (modales, listes déroulantes) */
  --bord:        rgba(255,255,255,.14);
  --bord-fort:   rgba(255,255,255,.26);
  --entete-fond: rgba(6,26,74,.78);
  --champ-fond:  rgba(255,255,255,.07);
  --champ-bord:  rgba(255,255,255,.22);
  /* texte */
  --texte:       #F4F6FB;
  --texte-doux:  rgba(244,246,251,.72);
  --texte-inv:   #FFFFFF;
  /* identité */
  --bleu:        #9DBCF7;   /* liens, actifs */
  --bleu-btn:    #2F63D8;   /* fond des boutons principaux */
  --bleu-fonce:  #3B74E8;   /* survol */
  --bleu-clair:  #B5CCFA;
  --bleu-pale:   rgba(110,154,242,.16);
  --or:          #E8C063;   /* actions commerciales, filets, chiffres */
  --or-doux:     #C9A24A;
  --or-fonce:    #F0CC77;
  --or-pale:     rgba(232,192,99,.14);
  --sur-or:      #1A1F2E;   /* texte posé sur l'or */
  --rouge:       #FF8A84;   /* erreurs, suppression */
  --rouge-btn:   #C8161D;
  --rouge-logo:  #E5433C;   /* filet d'identité (rouge du logo) */
  --rouge-pale:  rgba(242,106,98,.16);
  --vert:        #7FE0A5;
  --vert-btn:    #1E8A50;
  --vert-pale:   rgba(79,195,127,.14);
  --ambre:       #F0CF7A;
  --ambre-pale:  rgba(232,192,99,.12);
  --marine:      rgba(255,255,255,.06);   /* bandeaux pleins */
  --sur-marine:  #FFFFFF;
  --bleu-bord:   rgba(110,154,242,.45);
  --or-bord:     rgba(232,192,99,.45);
  --vert-bord:   rgba(79,195,127,.45);
  --rouge-bord:  rgba(242,106,98,.5);
  --ambre-bord:  rgba(232,192,99,.4);
  /* plaque d'immatriculation : couleurs de l'objet réel, identiques dans les deux thèmes */
  --pl-face:     #F6F7F5;
  --pl-noir:     #14171C;
  --pl-bleu:     #123A75;
  --pl-etoile:   #F5C518;
  /* fenêtres et aperçus de documents */
  --voile:       rgba(3,10,30,.72);        /* fond assombri derrière une fenêtre */
  --papier:      #FFFFFF;                  /* feuille A4 d'un aperçu : blanche dans les deux thèmes */
  /* forme */
  --ombre:       0 10px 30px rgba(0,0,0,.28);
  --ombre-haute: 0 18px 50px rgba(0,0,0,.45);
  --rayon:       14px;
  --rayon-s:     9px;
  --anneau:      0 0 0 3px rgba(232,192,99,.35);
  --flou:        blur(14px);
  /* typographie */
  --police:      "Plus Jakarta Sans", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --police-plaque: "D-DIN", "Arial Narrow", "Roboto Condensed", Arial, sans-serif;
  --mono:        ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: dark;
}
/* Noms hérités de l'ancienne feuille (style.css) encore cités par les blocs
   <style> des pages en cours de migration : ils pointent sur les jetons actuels. */
:root {
  --carte-bord:  var(--bord);
  --gris-fond:   var(--fond);
  --gris-fond-2: var(--fond-2);
  --rouge-accent:var(--rouge-logo);
  --doux:        var(--texte-doux);
  --violet:      var(--or);        /* ancien « en cours » violet → or */
  --accent:      var(--or);
  --bordure:     var(--bord);
  --bleu-titre:  var(--texte);
  --bleu2:       var(--bleu-clair);
  --tuile:       var(--fond-2);
}
html[data-theme="clair"] {
  --fond:        #EDF1F8;
  --fond-2:      #E2E8F2;
  --carte:       rgba(255,255,255,.8);
  --carte-pleine:#FFFFFF;
  --bord:        #D3DAE6;
  --bord-fort:   #B4BED0;
  --entete-fond: rgba(255,255,255,.84);
  --champ-fond:  #FFFFFF;
  --champ-bord:  #B4BED0;
  --texte:       #152038;
  --texte-doux:  #56627A;
  --texte-inv:   #FFFFFF;
  --bleu:        #0D3D9E;
  --bleu-btn:    #0D3D9E;
  --bleu-fonce:  #082C73;
  --bleu-clair:  #1E63D6;
  --bleu-pale:   #E8EFFB;
  --or:          #C8961E;
  --or-doux:     #B8891A;
  --or-fonce:    #A77A12;
  --or-pale:     #FBF3DF;
  --sur-or:      #1A1F2E;
  --rouge:       #C8161D;
  --rouge-btn:   #C8161D;
  --rouge-logo:  #D71920;
  --rouge-pale:  #FCE9E9;
  --vert:        #1B7443;
  --vert-btn:    #1E7F49;
  --vert-pale:   #E6F5EC;
  --ambre:       #8A5F08;
  --ambre-pale:  #FBF1D8;
  --marine:      #0D3D9E;
  --sur-marine:  #FFFFFF;
  --bleu-bord:   #B9CCF0;
  --or-bord:     #E6CD8F;
  --vert-bord:   #A9DCBD;
  --rouge-bord:  #F0B9BB;
  --ambre-bord:  #E6CF9A;
  --ombre:       0 10px 30px rgba(6,26,74,.10);
  --ombre-haute: 0 18px 50px rgba(6,26,74,.18);
  --anneau:      0 0 0 3px rgba(13,61,158,.22);
  color-scheme: light;
}

/* ----------------------------------------------------------- Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--police);
  font-size: 15px; line-height: 1.55;
  color: var(--texte);
  background: var(--fond);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
/* Ambiance « nuit » : reflets or et bleu, motif CERFY en filigrane, fixes au défilement. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1100px 600px at 10% -10%, rgba(232,192,99,.14), transparent 60%),
    radial-gradient(900px 700px at 100% 20%, rgba(61,124,196,.35), transparent 60%),
    linear-gradient(180deg, var(--nuit) 0%, var(--nuit-2) 40%, var(--nuit) 100%);
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: url("../img/fond-cerfy.jpg") center / cover no-repeat; opacity: .10; mix-blend-mode: soft-light;
}
html[data-theme="clair"] body::before { background: linear-gradient(180deg, #F3F6FC 0%, var(--fond) 50%, #E9EEF7 100%); }
html[data-theme="clair"] body::after { opacity: .06; mix-blend-mode: normal; }
@media (max-width: 820px) { body::after { display: none; } }
a { color: var(--bleu-clair); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--bleu); }
h1, h2, h3 { color: var(--texte); line-height: 1.2; text-wrap: balance; margin: 0; letter-spacing: -.01em; }
h1 { font-size: 26px; font-weight: 800; margin-bottom: 6px; }
h2 { font-size: 19px; font-weight: 700; margin-bottom: 12px; }
h3 { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
p { margin: 0 0 12px; }
.lead { color: var(--texte-doux); margin: 0 0 22px; font-size: 15.5px; max-width: 70ch; }
small, .petit { font-size: 13px; }
.doux { color: var(--texte-doux); }
.num { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--bleu); outline-offset: 2px; border-radius: 4px; }
img { max-width: 100%; }
button { font: inherit; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ----------------------------------------------------------- Icônes (sprite SVG Lucide) */
.ico { width: 18px; height: 18px; flex: 0 0 auto; vertical-align: -3px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ico-s { width: 15px; height: 15px; vertical-align: -2px; }
.ico-l { width: 24px; height: 24px; }
.ico-tuile { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: var(--or-pale); color: var(--or); flex: 0 0 auto; }
.ico-tuile .ico { width: 20px; height: 20px; }
.ico-tuile.or { background: var(--or-pale); color: var(--or); }
.ico-tuile.bleu { background: var(--bleu-pale); color: var(--bleu); }
.ico-tuile.vert { background: var(--vert-pale); color: var(--vert); }

/* ----------------------------------------------------------- En-tête */
.entete {
  position: sticky; top: 0; z-index: 40;
  background: var(--entete-fond);
  border-bottom: 1px solid var(--bord);
  backdrop-filter: var(--flou); -webkit-backdrop-filter: var(--flou);
}
/* filet d'identité : le souligné bleu / rouge du logo CERFY, en haut de chaque page */
.entete::before {
  content: ""; display: block; height: 3px;
  background: linear-gradient(90deg, var(--bleu) 0 72%, var(--rouge-logo) 72% 100%);
}
.entete-inner {
  max-width: 1120px; margin: 0 auto; padding: 8px 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.marque { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--texte); flex-shrink: 0; }
/* pages du comptoir et de l'administration : navigation longue. Le bloc nom + sous-titre cède d'abord
   (tronqué, 240 px au moins) ; si la navigation ne tient toujours pas à côté du logo, elle passe sur une
   seconde ligne, défilante, au lieu de le recouvrir. */
.entete-admin .entete-inner { flex-wrap: wrap; row-gap: 2px; }
.entete-admin .marque { flex: 1 1 240px; min-width: 0; max-width: max-content; }
.entete-admin .marque > span { min-width: 0; }
.entete-admin .nav { flex-shrink: 0; max-width: 100%; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
.entete-admin .nav::-webkit-scrollbar { display: none; }
.marque .logo-img, .marque .logo-certy { height: 40px; width: auto; display: block; background: #fff; border-radius: 8px; padding: 4px 8px; }
html[data-theme="clair"] .marque .logo-img, html[data-theme="clair"] .marque .logo-certy { background: transparent; padding: 0; height: 36px; }
.marque .nom { font-weight: 800; font-size: 15.5px; line-height: 1.15; white-space: nowrap; display: block; overflow: hidden; text-overflow: ellipsis; }
.marque .sous { font-size: 12.5px; color: var(--texte-doux); white-space: nowrap; display: block; overflow: hidden; text-overflow: ellipsis; }
.nav { display: flex; gap: 2px; align-items: center; margin-left: auto; min-width: 0; flex-wrap: nowrap; justify-content: flex-end; }
.nav a, .nav button.nav-btn {
  display: inline-flex; align-items: center; gap: 6px;
  text-decoration: none; color: var(--texte-doux); background: none; border: 0; cursor: pointer;
  padding: 8px 11px; border-radius: 8px; font-weight: 600; font-size: 14px; line-height: 1.2; white-space: nowrap;
  min-height: 40px; transition: background .15s, color .15s;
}
.nav a:hover, .nav button.nav-btn:hover { background: var(--fond-2); color: var(--texte); }
.nav a.actif { color: var(--or); box-shadow: inset 0 -2px 0 var(--or); border-radius: 8px 8px 0 0; }
.nav a.or { color: var(--or); }
.nav a.deco { color: var(--rouge); }
.nav a.deco:hover { background: var(--rouge-pale); }
.nav .partenaire-nom {
  font-size: 12.5px; color: var(--texte-doux); padding: 5px 10px; background: var(--fond-2);
  border-radius: 999px; white-space: nowrap; max-width: 26ch; overflow: hidden; text-overflow: ellipsis; margin-right: 6px;
}
/* bascule clair / sombre : bouton icône dans la navigation */
#btnTheme {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px; margin-left: 4px;
  border: 1px solid var(--bord); background: var(--carte); color: var(--texte-doux); cursor: pointer;
  transition: background .15s, color .15s;
}
#btnTheme:hover { background: var(--fond-2); color: var(--texte); }
#btnTheme.flottant { position: fixed; bottom: 18px; right: 18px; z-index: 60; box-shadow: var(--ombre); }
#btnTheme .ico-lune { display: none; }
html[data-theme="clair"] #btnTheme .ico-lune { display: block; }
html[data-theme="clair"] #btnTheme .ico-soleil { display: none; }
@media (max-width: 1180px) { .nav a, .nav button.nav-btn { padding: 8px 8px; font-size: 13.5px; } .nav .partenaire-nom { display: none; } }
/* comptoir / administration, écrans moyens : navigation toujours sur sa propre ligne */
@media (max-width: 1180px) and (min-width: 641px) {
  .entete-admin .entete-inner { padding-bottom: 4px; }
  .entete-admin .marque { flex: 0 0 auto; max-width: 100%; }
  .entete-admin .nav { width: 100%; margin-left: 0; }
}
@media (max-width: 900px) { .marque .sous { display: none; } .nav .partenaire-nom { display: none; } }
@media (max-width: 640px) {
  /* petit écran : logo sur la première ligne, navigation sur la seconde, qui défile si elle est longue */
  .entete-inner { padding: 6px 14px 4px; gap: 4px 8px; flex-wrap: wrap; }
  .nav { flex-wrap: nowrap; gap: 0; width: 100%; margin-left: 0; justify-content: flex-start; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a, .nav button.nav-btn { padding: 8px 8px; font-size: 13.5px; }
  .nav .long { display: none; }
  .marque .nom { display: none; }
  .marque .logo-img, .marque .logo-certy { height: 32px; padding: 3px 6px; }
  #btnTheme { width: 36px; height: 36px; margin-left: 2px; }
}

/* ----------------------------------------------------------- Mise en page */
.page { max-width: 1120px; margin: 0 auto; padding-block: 26px 64px; padding-inline: 22px; }
.page-etroite { max-width: 960px; }
.centre { max-width: 460px; margin: 6vh auto 0; }
.tete { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.tete .sous-titre { color: var(--texte-doux); font-size: 14px; margin-top: 2px; }
@media (max-width: 640px) { .page { padding-inline: 16px; padding-block: 18px 48px; } h1 { font-size: 22px; } }

.carte {
  background: var(--carte); border: 1px solid var(--bord);
  border-radius: var(--rayon); padding: 24px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), var(--ombre);
}
html[data-theme="clair"] .carte { box-shadow: var(--ombre); }
.carte-haute { box-shadow: var(--ombre-haute); }
.verre { background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); backdrop-filter: var(--flou); -webkit-backdrop-filter: var(--flou); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), var(--ombre); }
.verre-or { background: linear-gradient(135deg, rgba(232,192,99,.16), rgba(255,255,255,.05) 60%); }
html[data-theme="clair"] .verre-or { background: linear-gradient(135deg, #FBF3DF, rgba(255,255,255,.9) 60%); }
.carte h2 { margin-bottom: 14px; }
@media (max-width: 640px) { .carte { padding: 18px; } }

/* ----------------------------------------------------------- Boutons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--bleu-btn); color: var(--texte-inv); border: 1px solid transparent; cursor: pointer;
  padding: 10px 18px; min-height: 44px; border-radius: 10px; font-size: 15px; font-weight: 700;
  text-decoration: none; line-height: 1.2; transition: background .15s, transform .15s, box-shadow .15s;
}
.btn:hover { background: var(--bleu-fonce); color: var(--texte-inv); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }
.btn-bloc { width: 100%; }
.btn-l { padding: 13px 24px; font-size: 16px; min-height: 50px; }
.btn-s { padding: 6px 12px; min-height: 36px; font-size: 13.5px; border-radius: 8px; }
.btn-or { background: linear-gradient(180deg, var(--or), var(--or-doux)); color: var(--sur-or); box-shadow: 0 8px 22px rgba(232,192,99,.22), inset 0 1px 0 rgba(255,255,255,.4); }
.btn-or:hover { background: linear-gradient(180deg, var(--or-fonce), var(--or-doux)); color: var(--sur-or); transform: translateY(-1px); }
.btn-sec { background: var(--fond-2); color: var(--texte); border-color: var(--bord-fort); }
.btn-sec:hover { background: var(--bleu-pale); color: var(--texte); }
.btn-verre { background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.28); }
.btn-verre:hover { background: rgba(255,255,255,.16); color: #fff; }
html[data-theme="clair"] .btn-verre { background: var(--fond-2); color: var(--texte); border-color: var(--bord-fort); }
html[data-theme="clair"] .btn-verre:hover { background: var(--bleu-pale); color: var(--texte); }
.btn-vert { background: var(--vert-btn); }
.btn-vert:hover { background: var(--vert); }
.btn-danger { background: var(--rouge-btn); }
.btn-danger:hover { background: #a1121a; }
.btn-fantome { background: transparent; color: var(--texte-doux); }
.btn-fantome:hover { background: var(--fond-2); color: var(--texte); }
.lien-discret { background: none; border: none; color: var(--bleu-clair); cursor: pointer; font-size: 14px; padding: 0; text-decoration: underline; text-underline-offset: 2px; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ----------------------------------------------------------- Formulaires */
label.champ, .champ { display: block; font-weight: 600; font-size: 14px; margin: 14px 0 6px; }
.aide { font-size: 12.5px; color: var(--texte-doux); margin-top: 5px; }
.input {
  width: 100%; padding: 11px 13px; font-size: 15px; font-family: inherit;
  border: 1px solid var(--champ-bord); border-radius: var(--rayon-s);
  background: var(--champ-fond); color: var(--texte); min-height: 44px;
  transition: border-color .15s, box-shadow .15s;
}
.input::placeholder { color: var(--texte-doux); opacity: .8; }
.input:focus { outline: none; border-color: var(--or); box-shadow: var(--anneau); }
.input.erreur { border-color: var(--rouge); }
.input:disabled { background: transparent; color: var(--texte-doux); border-style: dashed; }
textarea.input { resize: vertical; min-height: 96px; }
/* Listes déroulantes (12/10/2026) : le menu natif reprend la couleur de fond du <select> ; avec le fond
   translucide des champs, il s'ouvrait sur blanc avec du texte blanc en thème nuit (liste illisible).
   Fond opaque imposé à tous les <select>, options déclarées dans les deux thèmes. */
select { background-color: var(--carte-pleine) !important; color: var(--texte); }
select option, select optgroup { background-color: var(--carte-pleine); color: var(--texte); }
select.input { appearance: none; -webkit-appearance: none; padding-right: 36px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239DA8BF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center; }
.ligne { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .ligne { grid-template-columns: 1fr; } }
.msg-erreur { display: none; color: var(--rouge); font-size: 12.5px; margin-top: 5px; }
.msg-erreur.actif { display: block; }

/* ----------------------------------------------------------- Alertes */
.alerte { border-radius: 10px; padding: 12px 14px; font-size: 14px; display: flex; gap: 10px; align-items: flex-start; border: 1px solid transparent; }
.alerte .ico { margin-top: 1px; }
.alerte-attention { background: var(--ambre-pale); border-color: var(--ambre-bord); color: var(--ambre); }
.alerte-info      { background: var(--bleu-pale);  border-color: var(--bleu-bord);  color: var(--bleu); }
.alerte-ok        { background: var(--vert-pale);  border-color: var(--vert-bord);  color: var(--vert); }
.alerte-err       { background: var(--rouge-pale); border-color: var(--rouge-bord); color: var(--rouge); }
.ok-msg, .err-msg { border-radius: 10px; padding: 12px 14px; font-size: 14px; margin-bottom: 14px; display: flex; gap: 10px; align-items: flex-start; }
.ok-msg  { background: var(--vert-pale); color: var(--vert); }
.err-msg { background: var(--rouge-pale); color: var(--rouge); }

/* ----------------------------------------------------------- Pastilles & étiquettes */
.pastille {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; line-height: 1.5; white-space: nowrap;
  background: var(--fond-2); color: var(--texte-doux);
}
.pastille .ico { width: 14px; height: 14px; }
.pastille-bleu  { background: var(--bleu-pale);  color: var(--bleu); }
.pastille-vert  { background: var(--vert-pale);  color: var(--vert); }
.pastille-or    { background: var(--or-pale);    color: var(--ambre); }
.pastille-rouge { background: var(--rouge-pale); color: var(--rouge); }
.etiquette { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--bord); border-radius: 8px; padding: 5px 10px; font-size: 13px; background: var(--carte); color: var(--texte); }
.etiquette.fourni { border-color: var(--or-bord); background: var(--or-pale); color: var(--ambre); font-weight: 600; }
.etiquette.ok { border-color: var(--vert-bord); background: var(--vert-pale); color: var(--vert); }

/* ----------------------------------------------------------- Plaque d'immatriculation */
/* L'objet-signature du site : numéro d'immatriculation, espaces de la page
   d'accueil, promesse « 48 H ». Couleurs fixes (une plaque reste une plaque). */
.plq {
  display: inline-flex; align-items: stretch; overflow: hidden; vertical-align: middle;
  border: 2px solid var(--pl-noir); border-radius: 6px; background: var(--pl-face); color: var(--pl-noir);
  font-family: var(--police-plaque); font-weight: 700; letter-spacing: .06em; line-height: 1;
}
.plq .bande { background: var(--pl-bleu); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 3px 4px 2px; font-family: var(--police); font-weight: 800; font-size: .55em; letter-spacing: 0; gap: 2px; }
.plq .bande .etoiles { width: .9em; height: .9em; border-radius: 50%; border: 1px dotted var(--pl-etoile); margin-bottom: auto; }
.plq .face { display: flex; align-items: center; padding: 0 .45em; white-space: nowrap; }
.plq-s  { font-size: 15px; height: 26px; border-width: 1.5px; border-radius: 4px; }
.plq-m  { font-size: 19px; height: 34px; }
.plq-s .etoiles, .plq-m .etoiles { display: none; }
.plq-s .bande, .plq-m .bande { justify-content: center; padding: 0 5px; }
.plq-l  { font-size: 28px; height: 48px; border-radius: 8px; }
.plq-xl { font-size: 54px; height: 92px; border-width: 3px; border-radius: 10px; letter-spacing: .1em; box-shadow: 0 2px 4px rgba(15,23,42,.18), 0 10px 26px rgba(15,23,42,.16); }
.plq-xl .bande { padding: 6px 8px 5px; font-size: 13px; }
.plq-xl .bande .etoiles { width: 20px; height: 20px; border-width: 2px; }
.plq .dep { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
.plq .dep img { width: 22px; height: 22px; border-radius: 3px; background: #fff; }
.plq.noire { background: var(--pl-noir); color: #F2F3F0; border-color: #2a2e36; }

/* ----------------------------------------------------------- Parcours (étapes) */
.chemin {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon);
  padding: 16px 10px 12px; margin-bottom: 18px;
}
.jalon { position: relative; text-align: center; font-size: 12.5px; color: var(--texte-doux); text-decoration: none; display: block; }
.jalon .fil { position: absolute; top: 17px; left: -50%; width: 100%; height: 3px; background: var(--bord); z-index: 0; }
.jalon:first-child .fil { display: none; }
.jalon .rond {
  position: relative; z-index: 1; width: 36px; height: 36px; margin: 0 auto 7px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--bord-fort); background: var(--carte); color: var(--texte-doux); font-weight: 800; font-size: 14px;
}
.jalon .rond .ico { width: 18px; height: 18px; }
.jalon .lib { display: block; line-height: 1.25; padding: 0 3px; }
.jalon .lib b { color: var(--texte); display: block; }
.jalon .lib .sous { display: block; font-size: 11.5px; }
.jalon.fait .rond { background: var(--vert-btn); border-color: var(--vert-btn); color: #fff; }
.jalon.fait .fil { background: var(--vert-btn); }
.jalon.fait .lib b { color: var(--vert); }
.jalon.encours .rond { background: linear-gradient(180deg, var(--or), var(--or-doux)); border-color: var(--or); color: var(--sur-or); box-shadow: var(--anneau); }
.jalon.encours .lib b { color: var(--or); }
@media (max-width: 640px) {
  .chemin { padding: 12px 4px 10px; }
  .jalon .lib .sous { display: none; }
  .jalon .lib { font-size: 11px; }
  .jalon .rond { width: 30px; height: 30px; font-size: 12.5px; }
  .jalon .fil { top: 14px; }
}
/* étapes en ligne (dépôt partenaire : 1 Démarche › 2 Documents › 3 Vérification) */
.etapes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }
.etape { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 8px; border-radius: 999px; border: 1px solid var(--bord); background: var(--fond-2); font-size: 13.5px; color: var(--texte-doux); font-weight: 600; }
.etape .n { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--fond-2); color: var(--texte-doux); font-size: 12.5px; font-weight: 800; }
.etape.fait { color: var(--vert); border-color: var(--vert-bord); }
.etape.fait .n { background: var(--vert-btn); color: #fff; }
.etape.encours { color: var(--or); border-color: var(--or-bord); background: var(--or-pale); }
.etape.encours .n { background: linear-gradient(180deg, var(--or), var(--or-doux)); color: var(--sur-or); }
.etapes .sep { color: var(--bord-fort); }

/* ----------------------------------------------------------- Sections de la fiche dossier */
.bloc { background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 18px 20px; margin-bottom: 14px; box-shadow: inset 0 1px 0 rgba(255,255,255,.06), var(--ombre); }
html[data-theme="clair"] .bloc { box-shadow: var(--ombre); }
.bloc > h3 { display: flex; align-items: center; gap: 10px; font-size: 15px; margin-bottom: 14px; }
.num-sec {
  width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, var(--or), var(--or-doux)); color: var(--sur-or); font-size: 13px; font-weight: 800; flex: 0 0 auto;
}
.num-sec.fait { background: var(--vert-btn); }
.num-sec.neutre { background: var(--fond-2); color: var(--texte-doux); border: 1px solid var(--bord-fort); }
.bloc.verrou { opacity: .6; }
.bloc.verrou .btn { pointer-events: none; }
.kv { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--bord); font-size: 14px; }
.kv:last-of-type { border-bottom: 0; }
.kv > span { color: var(--texte-doux); }   /* le libellé seulement : une plaque dans la valeur garde ses couleurs */
.kv b { text-align: right; }
.etape-note { background: var(--bleu-pale); color: var(--bleu); border-radius: 10px; padding: 11px 14px; font-size: 13.5px; margin-bottom: 12px; }
.etape-note.or { background: var(--or-pale); color: var(--ambre); }
.bloc-raison { background: var(--rouge-pale); color: var(--rouge); border-left: 4px solid var(--rouge); border-radius: 0 10px 10px 0; padding: 11px 14px; font-size: 13.5px; margin-bottom: 12px; }
.groupe-pieces { margin: 10px 0 4px; }
.sous-sec { font-size: 14px; font-weight: 700; margin: 16px 0 0; }
.groupe-pieces .titre-groupe { font-size: 12px; font-weight: 700; color: var(--texte-doux); letter-spacing: .04em; text-transform: uppercase; margin: 12px 0 7px; }
.groupe-pieces .liste { display: flex; flex-wrap: wrap; gap: 8px; }

/* ----------------------------------------------------------- Grille de pièces (dépôt partenaire) */
.grille-docs { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.doc { background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 14px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.doc-titre { font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.doc-titre .num { color: var(--texte-doux); font-weight: 600; font-size: 12px; }
.doc.conseillee { border-color: var(--bleu-bord); box-shadow: inset 0 3px 0 var(--bleu); }   /* conseillée : liseré bleu, sans étiquette (décision 09/2026) */
.doc.rempli { border-color: var(--vert-bord); }
.doc.erreur { border-color: var(--rouge); }
.dropzone {
  border: 2px dashed var(--bord-fort); border-radius: 10px; padding: 18px 10px; text-align: center;
  color: var(--texte-doux); font-size: 13px; cursor: pointer; background: var(--fond-2);
  transition: border-color .15s, background .15s; display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.dropzone .plus { color: var(--bleu); display: block; }
.dropzone:hover, .dropzone.survol { border-color: var(--bleu); background: var(--bleu-pale); }
.dropzone.analyse { border-color: var(--or); background: var(--or-pale); cursor: wait; color: var(--ambre); }
.fichier { display: none; align-items: center; gap: 10px; background: var(--vert-pale); border: 1px solid var(--vert-bord); border-radius: 10px; padding: 8px 10px; font-size: 13px; }
.fichier.actif { display: flex; }
.fichier .nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.fichier .mini { width: 34px; height: 44px; object-fit: cover; object-position: top; border: 1px solid var(--bord); border-radius: 4px; background: #fff; flex-shrink: 0; }
.fichier .retirer { background: none; border: none; color: var(--rouge); cursor: pointer; display: inline-flex; padding: 4px; border-radius: 6px; }
.fichier .retirer:hover { background: var(--rouge-pale); }
.barre-envoi {
  position: sticky; bottom: 0; z-index: 30; margin-top: 22px; padding: 14px 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  background: var(--entete-fond); border: 1px solid var(--bord-fort); border-radius: var(--rayon); box-shadow: var(--ombre-haute);
  backdrop-filter: var(--flou); -webkit-backdrop-filter: var(--flou);
}
.compteur { font-size: 14px; color: var(--texte-doux); }
.compteur b { color: var(--texte); font-size: 16px; }
.bandeau-analyse { display: flex; align-items: center; gap: 12px; background: var(--or-pale); color: var(--ambre); border-radius: 10px; padding: 11px 14px; font-size: 14px; font-weight: 600; margin-bottom: 16px; }
.roue { width: 18px; height: 18px; border-radius: 50%; border: 3px solid var(--ambre-bord); border-top-color: var(--ambre); animation: tourne .9s linear infinite; flex: 0 0 auto; }
@keyframes tourne { to { transform: rotate(360deg); } }

/* ----------------------------------------------------------- Listes de dossiers (comptoir) */
.stats { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.stat { background: var(--fond-2); border: 1px solid var(--bord); border-radius: 10px; padding: 9px 14px; font-size: 13.5px; color: var(--texte-doux); display: inline-flex; align-items: center; gap: 8px; }
.stat b { color: var(--texte); font-size: 16px; }
.stat.vert b { color: var(--vert); }
.stat.or b { color: var(--or); }
.recherche { position: relative; margin-bottom: 14px; }
.recherche .ico { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--texte-doux); }
.recherche .input { padding-left: 40px; }
.dossier-ligne {
  display: grid; grid-template-columns: auto 1fr auto; gap: 8px 18px; align-items: center;
  background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 12px 16px; margin-bottom: 10px;
  text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s, background .15s;
}
.dossier-ligne:hover { border-color: var(--or-bord); background: var(--fond-2); box-shadow: var(--ombre); }
.dossier-ligne .identite { min-width: 0; }
.dossier-ligne .client { font-weight: 800; font-size: 15.5px; }
.dossier-ligne .meta { font-size: 12.5px; color: var(--texte-doux); margin-top: 2px; }
.dossier-ligne .cerfas { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.dossier-ligne .droite { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.dossier-ligne .quand { font-size: 12.5px; color: var(--texte-doux); white-space: nowrap; }
@media (max-width: 760px) {
  .dossier-ligne { grid-template-columns: 1fr; }
  .dossier-ligne .droite { justify-content: flex-start; }
}

/* ----------------------------------------------------------- Tableaux */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th, .table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--bord); }
.table th { color: var(--texte-doux); font-weight: 700; font-size: 12.5px; background: var(--fond-2); }
.table-wrap { overflow-x: auto; }

/* ----------------------------------------------------------- Modale */
.modale-fond { display: none; position: fixed; inset: 0; background: var(--voile); z-index: 50; align-items: center; justify-content: center; padding: 20px; }
.modale-fond.actif { display: flex; }
.modale { background: var(--carte-pleine); color: var(--texte); border-radius: 14px; max-width: 440px; width: 100%; padding: 24px; box-shadow: var(--ombre-haute); }

/* ----------------------------------------------------------- Accueil partenaire */
.bienvenue { margin-bottom: 22px; padding: 18px 22px; border-left: 4px solid var(--bleu); }
.bonjour { font-size: 19px; }
.bonjour b { color: var(--bleu); }
.coordonnees { margin-top: 6px; font-size: 13px; color: var(--texte-doux); display: flex; flex-wrap: wrap; gap: 6px 18px; }
.coordonnees span { display: inline-flex; align-items: center; gap: 6px; }

/* ----------------------------------------------------------- Pied de page */
.pied { text-align: center; color: var(--texte-doux); font-size: 12.5px; margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--bord); }

/* ----------------------------------------------------------- Accents « prestige » */
.filet-or { display: inline-block; width: 56px; height: 2px; background: linear-gradient(90deg, var(--or), transparent); margin-bottom: 18px; }
.titre-or { position: relative; padding-top: 16px; }
.titre-or::before { content: ""; position: absolute; top: 0; left: 0; width: 44px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--or), var(--or-doux)); }
.chiffre-or { white-space: nowrap; font-weight: 800; font-size: 40px; letter-spacing: -.02em; background: linear-gradient(180deg, #F3D98B, var(--or-doux)); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; }
html[data-theme="clair"] .chiffre-or { background: linear-gradient(180deg, #C8961E, #8F6A12); -webkit-background-clip: text; background-clip: text; }
.sceau { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border-radius: 999px; background: var(--fond-2); border: 1px solid var(--bord-fort); font-size: 13.5px; font-weight: 600; color: var(--texte); }
.sceau .ico { color: var(--or); }
.plq.lueur { box-shadow: 0 0 0 6px rgba(255,255,255,.06), 0 18px 50px rgba(0,0,0,.45), 0 0 80px rgba(232,192,99,.25); }
@media (prefers-reduced-motion: no-preference) {
  .lueur-anime { animation: respire 4.5s ease-in-out infinite; }
  @keyframes respire { 0%, 100% { box-shadow: 0 0 0 6px rgba(255,255,255,.06), 0 18px 50px rgba(0,0,0,.45), 0 0 60px rgba(232,192,99,.18); } 50% { box-shadow: 0 0 0 6px rgba(255,255,255,.08), 0 18px 50px rgba(0,0,0,.45), 0 0 110px rgba(232,192,99,.38); } }
}
.pied .rs { font-weight: 700; color: var(--texte); }

/* ----------------------------------------------------------- Dépôt partenaire : analyse des pièces */
.ia-carte { border-left: 4px solid var(--or); }
.ia-entete { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.ia-dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 118px;
  border: 2px dashed var(--bord-fort); border-radius: 10px; background: var(--fond-2); color: var(--texte);
  cursor: pointer; text-align: center; padding: 18px; transition: border-color .15s, background .15s;
}
.ia-dropzone:hover, .ia-dropzone.survol { border-color: var(--or); background: var(--or-pale); }
.ia-dropzone span:last-child { color: var(--texte-doux); font-size: 12.5px; }
.ia-plus { display: inline-flex; width: 40px; height: 40px; border-radius: 10px; align-items: center; justify-content: center; background: var(--or-pale); color: var(--or); margin-bottom: 4px; }
.ia-plus .ico { width: 20px; height: 20px; }
.ia-fichiers { display: grid; gap: 6px; margin-top: 10px; }
.ia-fichier { display: flex; justify-content: space-between; gap: 10px; align-items: center; border: 1px solid var(--bord); background: var(--fond-2); border-radius: 8px; padding: 7px 10px; font-size: 12.5px; }
.ia-fichier > span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.ia-fichier > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ia-x { border: 0; background: transparent; color: var(--rouge); cursor: pointer; display: inline-flex; padding: 3px; border-radius: 6px; }
.ia-x:hover { background: var(--rouge-pale); }
.ia-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.ia-table-wrap { overflow-x: auto; }
.ia-table td:nth-child(1) { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.ia-etat { font-size: 12.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
.ia-etat.good { color: var(--vert); } .ia-etat.warn { color: var(--ambre); } .ia-etat.bad { color: var(--rouge); } .ia-etat.info { color: var(--bleu); }
.ia-controles { display: grid; gap: 8px; margin-top: 12px; }
.ia-confidentialite { margin-top: 14px; color: var(--texte-doux); font-size: 12px; display: flex; gap: 8px; align-items: flex-start; }
.ia-confidentialite .ico { color: var(--or); margin-top: 1px; }
.avert-case { margin-top: 8px; padding: 7px 10px; border-radius: 7px; background: var(--ambre-pale); border: 1px solid var(--ambre-bord); color: var(--ambre); font-size: 12px; line-height: 1.45; }
.avert-case .ico { vertical-align: -3px; margin-right: 3px; }
@media (max-width: 640px) { .ia-entete { flex-direction: column; } .ia-badge { align-self: flex-start; } }

/* Fenêtres construites par script (recadrage, règlement, doublon, pièces manquantes, envoi) */
.fen-fond { position: fixed; inset: 0; background: var(--voile); display: flex; align-items: center; justify-content: center; padding: 16px; }
.fen { background: var(--carte-pleine); color: var(--texte); border: 1px solid var(--bord-fort); border-radius: 14px; box-shadow: var(--ombre-haute); width: 100%; max-height: 92vh; overflow: auto; }
.fen-titre { font-weight: 800; font-size: 16px; display: flex; align-items: center; gap: 8px; }
.fen-titre .ico { flex: 0 0 auto; }
.fen-titre.rouge { color: var(--rouge); } .fen-titre.ambre { color: var(--ambre); }
.fen-texte { font-size: 13px; color: var(--texte-doux); margin: 6px 0 12px; }
.fen-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.fen-ligne { display: flex; justify-content: space-between; align-items: center; gap: 10px; border-left: 3px solid var(--rouge); background: var(--rouge-pale); border-radius: 0 8px 8px 0; padding: 8px 11px; margin-bottom: 6px; font-size: 13px; }
.fen-ligne > span { display: inline-flex; align-items: center; gap: 6px; }
.fen-ligne .vers { color: var(--rouge); font-weight: 700; white-space: nowrap; }
.fen-choix { flex: 1; min-width: 130px; display: flex; align-items: center; gap: 8px; border: 2px solid var(--bord-fort); border-radius: 10px; padding: 10px 12px; cursor: pointer; font-size: 13.5px; }
.fen-choix:has(input:checked) { border-color: var(--or); background: var(--or-pale); }
.fen-choix input { width: 17px; height: 17px; accent-color: var(--or); }
.fen-choix span { display: inline-flex; align-items: center; gap: 6px; }

/* Aperçu grand format d'une pièce (feuilles A4) */
.modale-apercu { width: min(96vw, 980px); max-width: 980px; height: 95vh; max-height: 95vh; padding: 16px 18px 14px; display: flex; flex-direction: column; overflow: hidden; }
.apercu-entete { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 12px; flex-shrink: 0; }
.apercu-sous-titre { font-size: 12px; color: var(--texte-doux); margin-top: 3px; }
.fermer-apercu { border: 1px solid var(--bord-fort); background: var(--champ-fond); color: var(--texte); border-radius: 8px; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
.fermer-apercu:hover { background: var(--fond-2); }
.apercu-etat { padding: 10px 12px; margin: 3px 0 10px; border-radius: 8px; background: var(--fond-2); font-size: 13px; color: var(--texte-doux); }
.apercu-pages { flex: 1; overflow: auto; background: var(--fond-2); border-radius: 8px; padding: 18px; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.apercu-feuille-a4 { width: min(210mm, 100%); aspect-ratio: 210 / 297; background: var(--papier); box-shadow: 0 4px 22px rgba(0,0,0,.35); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; flex-shrink: 0; }
.apercu-feuille-a4 canvas { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; }
.apercu-numero-page { position: absolute; right: 8px; bottom: 6px; background: var(--carte-pleine); color: var(--texte-doux); border: 1px solid var(--bord); border-radius: 12px; padding: 2px 7px; font-size: 11px; }
.apercu-pied { flex-shrink: 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 12px; font-size: 12px; color: var(--texte-doux); }
.apercu-legende { font-size: 12px; color: var(--texte-doux); margin-bottom: 4px; font-weight: 600; }
@media (max-width: 700px) { .apercu-pages { padding: 8px; } .apercu-pied span { display: none; } }

/* ----------------------------------------------------------- Divers conservés */
.pwd-box { font-family: var(--mono); font-size: 20px; letter-spacing: 2px; font-weight: 700; background: var(--bleu-pale); color: var(--bleu); padding: 12px 16px; border-radius: 8px; text-align: center; }
.ia-badge { font-size: 12px; font-weight: 700; border-radius: 999px; padding: 5px 10px; }
.ia-badge.ok { color: var(--vert); background: var(--vert-pale); }
.ia-badge.off { color: var(--ambre); background: var(--ambre-pale); }
.ia-progress { height: 8px; background: var(--fond-2); overflow: hidden; border-radius: 99px; margin-top: 12px; }
.ia-progress > div { width: 0%; height: 100%; background: var(--bleu-btn); transition: width .2s ease; }

@media print {
  body { background: #fff !important; color: #000; }
  body::before, body::after { display: none !important; }
  .entete, #btnTheme, .barre-envoi { display: none !important; }
}