/* ==========================================================================
   veille-ao : feuille commune du site (servie par /statique/design.css)
   Sections 1 a 14 : docs/design/maquettes/design.css (maquettes du 2026-10-10), sans
   la note de maquette (12) ni la planche d'etats (14.7), qui ne sont pas du produit ;
   un test (tests/test_e2_design_socle.py) verifie que chaque regle des maquettes est ici.
   Section 15 : complements du produit ; section 16 : pages pas encore refondues.
   Polices systeme, aucune ressource externe, aucun script requis.
   Contrastes calcules (formule WCAG 2.2) : voir DESIGN.md, section 5.1.
   ========================================================================== */

/* ---------- 1. Jetons ---------- */
:root{
  /* Couleurs : surfaces */
  --c-fond:#f4f5f7;          /* fond de page */
  --c-surface:#ffffff;       /* cartes, champs */
  --c-surface-2:#eef1f5;     /* panneaux discrets, en-tetes de tableau */
  --c-trait:#dde2e8;         /* separateurs decoratifs (jamais seul repere d'un controle) */
  --c-bord:#7a8494;          /* bord des champs et controles : 3,78:1 sur blanc */
  /* Couleurs : texte */
  --c-encre:#101828;         /* texte principal : 17,75:1 */
  --c-texte-2:#475467;       /* texte secondaire : 7,69:1 */
  --c-texte-3:#5d6b7e;       /* meta, aides : 5,43:1 sur blanc, 4,97:1 sur fond */
  /* Couleurs : marque et action */
  --c-marque:#0b1f3f;        /* barre d'en-tete */
  --c-marque-texte-2:#c3cede;/* texte secondaire sur la barre : 10,30:1 */
  --c-action:#1f4bd1;        /* liens, bouton principal : 7,03:1 */
  --c-action-fonce:#1a3ca8;  /* survol, appui : 9,31:1 */
  --c-action-pale:#e9effd;   /* selection (toujours avec un bord ou une coche) */
  /* Couleurs : etats (texte sur fond pale, toujours avec icone et mot) */
  --c-succes:#0d6b3c;  --c-succes-pale:#e3f3ea;
  --c-attention:#8a4a00; --c-attention-pale:#fdf0d9;
  --c-danger:#b42318;  --c-danger-pale:#fdeceb;
  --c-neutre-pale:#eceff3;
  --c-focus:#1f4bd1; --c-focus-inverse:#ffffff;

  /* Typographie : polices systeme */
  --f-texte:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  --f-chasse:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --t-petit:.875rem;   /* 14 px : meta, aides */
  --t-base:1rem;       /* 16 px : texte */
  --t-moyen:1.125rem;  /* 18 px : titres de carte */
  --t-grand:1.375rem;  /* 22 px : h2 */
  --t-titre:1.75rem;   /* 28 px : h1 */
  --t-vitrine:2.5rem;  /* 40 px : accueil public */
  --l-texte:1.5; --l-titre:1.25;

  /* Espacements (base 4 px) */
  --e-1:4px; --e-2:8px; --e-3:12px; --e-4:16px; --e-5:24px; --e-6:32px; --e-7:48px; --e-8:64px;
  /* Rayons */
  --r-1:4px; --r-2:8px; --r-3:12px; --r-rond:999px;
  /* Elevations */
  --o-1:0 1px 2px rgba(16,24,40,.06);
  --o-2:0 6px 16px rgba(16,24,40,.12);
  /* Mise en page */
  --largeur-app:1200px; --largeur-lecture:760px; --colonne-droite:360px;
  --cible:44px;        /* cible tactile des actions principales */
  --barre-collante:72px;
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:var(--e-4);scroll-padding-bottom:calc(var(--barre-collante) + var(--e-4))}
body{margin:0;overflow-wrap:break-word;font-family:var(--f-texte);font-size:var(--t-base);line-height:var(--l-texte);color:var(--c-encre);background:var(--c-fond)}
h1,h2,h3,h4{line-height:var(--l-titre);margin:0 0 var(--e-3);font-weight:700;text-wrap:balance}
h1{font-size:var(--t-titre)} h2{font-size:var(--t-grand)} h3{font-size:var(--t-moyen)} h4{font-size:var(--t-base)}
p{margin:0 0 var(--e-3)}
a{color:var(--c-action);text-underline-offset:.15em}
a:hover{color:var(--c-action-fonce)}
img,svg{max-width:100%}
ul,ol{margin:0 0 var(--e-3);padding-left:1.25rem}
/* Titres, URL, mots composes allemands et neerlandais : jamais de debordement */
h1,h2,h3,.titre-avis,td,dd,.casse{overflow-wrap:anywhere;hyphens:auto}
/* Neerlandais et allemand : mots composes coupes partout ou il y a du texte courant (revision) */
:lang(de) :is(p,li,dd,dt,label,legend,summary,.bouton,.badge,.pastille),:lang(nl) :is(p,li,dd,dt,label,legend,summary,.bouton,.badge,.pastille){hyphens:auto;overflow-wrap:anywhere}
time,.nombre,.montant,.echeance{font-variant-numeric:tabular-nums}
:focus-visible{outline:3px solid var(--c-focus);outline-offset:2px;border-radius:2px}
.sur-marque :focus-visible{outline-color:var(--c-focus-inverse)}
.visuellement-cache{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.evitement{position:absolute;left:var(--e-3);top:-60px;z-index:20;background:var(--c-surface);color:var(--c-action);padding:var(--e-2) var(--e-4);border-radius:var(--r-2);font-weight:600;box-shadow:var(--o-2)}
.evitement:focus{top:var(--e-3)}
.piege{display:none!important}

/* ---------- 3. Mise en page ---------- */
.entete{background:var(--c-marque);color:#fff}
.entete .bandeau{position:relative;max-width:var(--largeur-app);margin:0 auto;padding:0 var(--e-4);display:flex;align-items:center;gap:var(--e-4);min-height:60px;flex-wrap:wrap}
.marque{display:inline-flex;align-items:center;gap:var(--e-2);color:#fff;text-decoration:none;font-weight:700;font-size:1.0625rem;margin-right:auto;padding:var(--e-2) 0}
.marque:hover{color:#fff}
.marque .logo{width:28px;height:28px;border-radius:7px;background:#fff;position:relative;flex:none}
.marque .logo::before{content:"";position:absolute;inset:7px 6px 7px 6px;border-left:4px solid var(--c-action);border-bottom:4px solid var(--c-action);transform:skewX(-12deg)}
.nav-principale{display:flex;gap:var(--e-1);flex-wrap:wrap}
.nav-principale a{display:inline-flex;align-items:center;gap:6px;min-height:var(--cible);padding:0 var(--e-3);color:var(--c-marque-texte-2);text-decoration:none;font-weight:600;border-radius:var(--r-2)}
.nav-principale a:hover{color:#fff;background:rgba(255,255,255,.08)}
.nav-principale a[aria-current="page"]{color:#fff;box-shadow:inset 0 -3px 0 #fff;border-radius:0}
.nav-principale .compte-nb{font-size:.75rem;background:rgba(255,255,255,.16);color:#fff;border-radius:var(--r-rond);padding:0 7px;line-height:1.5}
.outils-entete{display:flex;align-items:center;gap:var(--e-2)}
/* Menu deroulant sans JavaScript (details/summary) */
.menu{position:relative}
.menu>summary{list-style:none;display:inline-flex;align-items:center;gap:6px;min-height:var(--cible);padding:0 var(--e-3);border-radius:var(--r-2);cursor:pointer;font-weight:600}
.menu>summary::-webkit-details-marker{display:none}
.menu>summary::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);margin-left:2px}
.menu[open]>summary::after{transform:rotate(225deg) translateY(-1px)}
.sur-marque .menu>summary{color:#fff}
.menu .panneau-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:15;min-width:220px;background:var(--c-surface);color:var(--c-encre);border:1px solid var(--c-bord);border-radius:var(--r-3);box-shadow:var(--o-2);padding:var(--e-2)}
.menu .panneau-menu a{display:flex;align-items:center;min-height:var(--cible);padding:0 var(--e-3);color:var(--c-encre);text-decoration:none;border-radius:var(--r-2)}
.menu .panneau-menu a:hover{background:var(--c-surface-2)}
.menu .panneau-menu a[aria-current="true"],.menu .panneau-menu a[aria-current="page"]{font-weight:700}
.menu .panneau-menu a[aria-current]::before{content:"✓";width:1.2em;color:var(--c-action)}
.menu .panneau-menu hr{border:0;border-top:1px solid var(--c-trait);margin:var(--e-2) 0}
.menu-mobile{display:none}

.page{max-width:var(--largeur-app);margin:0 auto;padding:var(--e-5) var(--e-4) var(--e-8)}
.page.lecture{max-width:var(--largeur-lecture)}
.en-tete-page{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--e-3) var(--e-5);margin-bottom:var(--e-4)}
.en-tete-page h1{margin:0}
.en-tete-page .sous-titre{color:var(--c-texte-2);margin:var(--e-1) 0 0}
.fil{font-size:var(--t-petit);margin-bottom:var(--e-3)}
.fil a{color:var(--c-texte-2)}
.deux-colonnes{display:grid;grid-template-columns:minmax(0,1fr) var(--colonne-droite);gap:var(--e-5);align-items:start}
.colonne-collante{position:sticky;top:var(--e-4)}
.grille{display:grid;gap:var(--e-4);grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.pile>*+*{margin-top:var(--e-4)}
.pied{border-top:1px solid var(--c-trait);background:var(--c-surface)}
.pied .bandeau{max-width:var(--largeur-app);margin:0 auto;padding:var(--e-5) var(--e-4);display:flex;flex-wrap:wrap;gap:var(--e-3) var(--e-5);font-size:var(--t-petit);color:var(--c-texte-2)}
.pied a{color:var(--c-texte-2)}
.pied nav{display:flex;flex-wrap:wrap;gap:var(--e-2) var(--e-4)}

/* ---------- 4. Texte ---------- */
.meta{color:var(--c-texte-2);font-size:var(--t-petit)}
.aide{color:var(--c-texte-3);font-size:var(--t-petit);margin:var(--e-1) 0 0}
.chapeau{font-size:var(--t-moyen);color:var(--c-texte-2)}
.fort{font-weight:700}
.sans-marge{margin:0}
.separateur{color:var(--c-texte-3);padding:0 2px}
abbr[title]{text-decoration:underline dotted;cursor:help}
.original{font-style:normal}
.etiquette-langue{display:inline-flex;align-items:center;gap:4px;font-size:.8125rem;color:var(--c-texte-2);background:var(--c-neutre-pale);border-radius:var(--r-1);padding:1px 6px;font-weight:600}

/* ---------- 5. Boutons ---------- */
.bouton{display:inline-flex;align-items:center;justify-content:center;gap:var(--e-2);min-height:var(--cible);padding:var(--e-2) var(--e-4);border-radius:var(--r-2);border:1px solid var(--c-action);background:var(--c-action);color:#fff;font:inherit;font-weight:600;line-height:1.25;text-align:center;text-decoration:none;cursor:pointer;white-space:normal}
.bouton:hover{background:var(--c-action-fonce);border-color:var(--c-action-fonce);color:#fff}
.bouton.secondaire{background:var(--c-surface);color:var(--c-action);border-color:var(--c-bord)}
.bouton.secondaire:hover{background:var(--c-action-pale);color:var(--c-action-fonce);border-color:var(--c-action)}
.bouton.discret{background:transparent;border-color:transparent;color:var(--c-action);padding-left:var(--e-2);padding-right:var(--e-2)}
.bouton.discret:hover{background:var(--c-action-pale)}
.bouton.danger{background:var(--c-surface);color:var(--c-danger);border-color:var(--c-danger)}
.bouton.danger:hover{background:var(--c-danger-pale)}
.bouton.grand{min-height:52px;padding:var(--e-3) var(--e-5);font-size:var(--t-moyen)}
.bouton.petit{min-height:36px;padding:var(--e-1) var(--e-3);font-size:var(--t-petit)}
.bouton.plein{width:100%}
.bouton[disabled],.bouton[aria-disabled="true"]{background:var(--c-surface-2);border-color:var(--c-trait);color:var(--c-texte-3);cursor:not-allowed}
/* Bouton occupe (aria-busy="true", pose par le script pendant l'attente, ex. « Trouver mon entreprise ») : un anneau
   tourne dans la marge droite du bouton, hors du flux, a largeur et hauteur inchangees (a 320 px, « Mijn onderneming
   zoeken » et « Mein Unternehmen finden » passaient a la ligne avec un anneau dans le flux). Animations reduites : anneau
   immobile mais visible (le selecteur * de la regle globale ne touche pas ::after, d'ou la regle dediee). Un bouton
   seulement desactive garde son etat. */
.bouton[aria-busy="true"]{position:relative;cursor:progress;padding-left:var(--e-2);padding-right:calc(var(--e-4) + var(--e-2))}
.bouton[aria-busy="true"]::after{content:"";position:absolute;top:50%;right:calc((var(--e-4) + var(--e-2) - .875em) / 2);width:.875em;height:.875em;margin-top:-.4375em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:tourner .8s linear infinite}
@keyframes tourner{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.bouton[aria-busy="true"]::after{animation:none}}
/* Couleurs forcees : le navigateur rendrait opaque le bord transparent, l'anneau deviendrait un cercle plein dont on ne
   voit pas la rotation (mesure en navigateur reel, couleurs forcees emulees). On garde l'arc ouvert, en GrayText, la
   couleur forcee du texte d'un bouton desactive (currentColor donnerait ici la couleur d'auteur, non forcee). */
@media (forced-colors:active){.bouton[aria-busy="true"]::after{forced-color-adjust:none;border-color:GrayText;border-right-color:transparent}}
.groupe-boutons{display:flex;flex-wrap:wrap;gap:var(--e-2);align-items:center}
form.en-ligne{display:inline}
.icone{width:1.1em;height:1.1em;flex:none;display:inline-block;vertical-align:-.15em}

/* ---------- 6. Champs et formulaires ---------- */
.champ{margin-bottom:var(--e-4)}
.champ>label,.libelle,legend{display:block;font-weight:600;margin-bottom:var(--e-1)}
legend{padding:0;font-size:var(--t-base)}
fieldset{border:0;padding:0;margin:0 0 var(--e-4);min-width:0}
input[type=text],input[type=email],input[type=number],input[type=search],input[type=file],select,textarea{width:100%;min-height:var(--cible);padding:var(--e-2) var(--e-3);border:1px solid var(--c-bord);border-radius:var(--r-2);font:inherit;color:var(--c-encre);background:var(--c-surface)}
textarea{min-height:120px;resize:vertical}
::placeholder{color:var(--c-texte-3);opacity:1} /* 5,43:1 ; jamais porteur d'information (exemple seulement) */
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--c-focus);outline-offset:1px;border-color:var(--c-focus)}
.champ.erreur input,.champ.erreur textarea,.champ.erreur select,[aria-invalid="true"]{border:2px solid var(--c-danger)}
.message-champ{display:flex;gap:6px;color:var(--c-danger);font-weight:600;font-size:var(--t-petit);margin:var(--e-1) 0 0}
.message-champ::before{content:"!";display:inline-grid;place-items:center;width:1.25em;height:1.25em;border-radius:50%;background:var(--c-danger);color:#fff;font-size:.75rem;flex:none;margin-top:.1em}
.ligne-champs{display:grid;gap:var(--e-3) var(--e-4);grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
/* Cases et boutons radio en cartes (cible entiere cliquable) */
.choix{display:grid;gap:var(--e-2)}
.choix.en-ligne{grid-template-columns:repeat(auto-fit,minmax(min(100%,9.5rem),1fr))}
.option{display:flex;align-items:flex-start;gap:var(--e-3);min-height:var(--cible);padding:var(--e-3);border:1px solid var(--c-bord);border-radius:var(--r-2);background:var(--c-surface);cursor:pointer;font-weight:400}
.option:hover{border-color:var(--c-action)}
.option input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--c-action);flex:none}
.option:has(input:checked){border:2px solid var(--c-action);background:var(--c-action-pale);padding:calc(var(--e-3) - 1px)}
.option:has(input:disabled){border-style:dashed;color:var(--c-texte-3);cursor:not-allowed}
.option .titre-option{font-weight:600;display:block}
.option .aide{margin:0}
.resume-erreurs{border:2px solid var(--c-danger);border-radius:var(--r-3);padding:var(--e-4);background:var(--c-surface);margin-bottom:var(--e-5)}
.resume-erreurs h2{font-size:var(--t-moyen);color:var(--c-danger)}
.resume-erreurs ul{margin:0}
.formulaire-carte{background:var(--c-surface);border:1px solid var(--c-trait);border-radius:var(--r-3);padding:var(--e-5)}

/* ---------- 7. Puces de filtre (formulaire GET : fonctionne sans JS) ---------- */
.filtres{display:flex;flex-wrap:wrap;gap:var(--e-2);align-items:center;margin:0 0 var(--e-4);padding:0;border:0}
.filtres legend{float:left;font-size:var(--t-petit);color:var(--c-texte-2);font-weight:600;margin:0 var(--e-2) 0 0;line-height:36px}
.puce{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 var(--e-3);border:1px solid var(--c-bord);border-radius:var(--r-rond);background:var(--c-surface);font-size:var(--t-petit);font-weight:600;color:var(--c-encre);cursor:pointer;text-decoration:none}
.puce input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.puce:hover{border-color:var(--c-action)}
.puce:has(input:checked),.puce[aria-current="true"]{background:var(--c-action-pale);border-color:var(--c-action);color:var(--c-action-fonce)}
.puce:has(input:checked)::before,.puce[aria-current="true"]::before{content:"✓"}
.puce:has(input:focus-visible){outline:3px solid var(--c-focus);outline-offset:2px}
.puce .nombre{color:var(--c-texte-2);font-weight:400}
.puce-retirer::after{content:"×";font-size:1.1em;margin-left:2px}

/* ---------- 8. Badges ---------- */
.badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:var(--r-1);font-size:.8125rem;font-weight:700;line-height:1.4;background:var(--c-neutre-pale);color:var(--c-texte-2);border:1px solid transparent;white-space:normal;max-width:100%}
.badge.nouveau{background:var(--c-action-pale);color:var(--c-action-fonce)}
.badge.modifie,.badge.a-verifier{background:var(--c-attention-pale);color:var(--c-attention)}
.badge.modifie::before{content:"↻"}
.badge.a-verifier::before{content:"?";font-weight:800}
.badge.retenu,.badge.gagne,.badge.ok{background:var(--c-succes-pale);color:var(--c-succes)}
.badge.retenu::before,.badge.ok::before{content:"✓"}
.badge.ecarte{background:var(--c-neutre-pale);color:var(--c-texte-2)}
.badge.clos,.badge.annule,.badge.perdu{background:var(--c-danger-pale);color:var(--c-danger)}
.badge.contour{background:transparent;border-color:var(--c-bord);color:var(--c-texte-2)}

/* ---------- 9. Onglets (liens, aria-current) ---------- */
.onglets{display:flex;flex-wrap:wrap;gap:var(--e-1);border-bottom:1px solid var(--c-trait);margin:0 0 var(--e-4)}
.onglets a{display:inline-flex;align-items:center;gap:var(--e-2);min-height:var(--cible);padding:0 var(--e-4);color:var(--c-texte-2);text-decoration:none;font-weight:600;border-bottom:3px solid transparent;margin-bottom:-1px;white-space:nowrap}
.onglets a:hover{color:var(--c-encre)}
.onglets a[aria-current="page"]{color:var(--c-encre);border-bottom-color:var(--c-action)}
.onglets .nombre{display:inline-grid;place-items:center;min-width:24px;height:22px;padding:0 6px;border-radius:var(--r-rond);background:var(--c-surface-2);color:var(--c-encre);font-size:.8125rem}
.onglets a[aria-current="page"] .nombre{background:var(--c-action);color:#fff}

/* ---------- 10. Bannieres ---------- */
.banniere{display:flex;gap:var(--e-3);align-items:flex-start;padding:var(--e-3) var(--e-4);border-radius:var(--r-3);border:1px solid;border-left-width:5px;margin:0 0 var(--e-4);background:var(--c-surface)}
.banniere>.icone-banniere{flex:none;display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;color:#fff;font-weight:800;font-size:.8125rem;margin-top:1px}
.banniere p:last-child{margin-bottom:0}
.banniere .titre-banniere{font-weight:700;margin-bottom:2px}
.banniere.info{border-color:var(--c-action)} .banniere.info>.icone-banniere{background:var(--c-action)}
.banniere.succes{border-color:var(--c-succes)} .banniere.succes>.icone-banniere{background:var(--c-succes)}
.banniere.attention{border-color:var(--c-attention);background:#fffaf1} .banniere.attention>.icone-banniere{background:var(--c-attention)}
.banniere.erreur{border-color:var(--c-danger)} .banniere.erreur>.icone-banniere{background:var(--c-danger)}
.banniere .groupe-boutons{margin-top:var(--e-2)}

/* ---------- 11. Cartes ---------- */
.carte{background:var(--c-surface);border:1px solid var(--c-trait);border-radius:var(--r-3);padding:var(--e-4) var(--e-5);box-shadow:var(--o-1)}
.carte>h2:first-child,.carte>h3:first-child{margin-top:0}
.carte.accent{border-top:4px solid var(--c-action)}
.titre-section{display:flex;align-items:baseline;justify-content:space-between;gap:var(--e-3);flex-wrap:wrap;margin:var(--e-6) 0 var(--e-3)}
.titre-section h2{margin:0}

/* 11.1 Carte d'avis : composant partage (apercu, liste, courriel en version tableaux) */
.liste-avis{list-style:none;margin:0;padding:0;display:grid;gap:var(--e-3)}
.carte-avis{position:relative;background:var(--c-surface);border:1px solid var(--c-trait);border-radius:var(--r-3);box-shadow:var(--o-1);padding:var(--e-4) var(--e-5);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--e-1) var(--e-5);scroll-margin-top:var(--e-4)}
.carte-avis>*{grid-column:1;min-width:0}
.carte-avis.urgent{border-left:5px solid var(--c-danger);padding-left:calc(var(--e-5) - 4px)}
.carte-avis>.tete,.carte-avis .tete{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:var(--e-2);align-items:center;margin-bottom:var(--e-1)}
.carte-avis .corps{min-width:0}
/* La date limite : a droite sur ordinateur (lignes du titre et de l'acheteur), sous le titre sur telephone */
.carte-avis>.echeance{grid-column:2;grid-row:2/span 2;align-self:start;text-align:right;min-width:170px}
.titre-avis{font-size:var(--t-moyen);font-weight:700;line-height:1.3;margin:0}
.titre-avis a{color:var(--c-encre);text-decoration:none}
.titre-avis a:hover{text-decoration:underline;color:var(--c-action-fonce)}
.ligne-acheteur{color:var(--c-texte-2);margin:0}
.faits-courts{display:flex;flex-wrap:wrap;gap:var(--e-1) var(--e-4);margin:0;padding:0;list-style:none;font-size:var(--t-petit);color:var(--c-texte-2)}
.faits-courts li{display:block;min-width:0;max-width:100%;overflow-wrap:anywhere}
.faits-courts strong{color:var(--c-encre);font-weight:600}
.raison{margin:var(--e-1) 0 0;font-size:var(--t-petit);color:var(--c-encre)}
.raison .mot{font-weight:700}
.carte-avis .cote{display:flex;flex-direction:column;align-items:flex-end;gap:var(--e-2);text-align:right;min-width:180px}
.carte-avis>.complements{grid-column:1/-1;display:grid;gap:var(--e-1);font-size:var(--t-petit)}
.liens-avis{display:flex;flex-wrap:wrap;gap:var(--e-1) var(--e-4);margin:0}
.liens-avis a{font-weight:600}
.externe::after{content:" ↗";content:" ↗" / "";font-weight:400}
.raison-desactive{grid-column:1/-1;margin:0;font-size:var(--t-petit);color:var(--c-texte-2)}
.carte-avis .actions{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:var(--e-2);align-items:flex-start;padding-top:var(--e-2);margin-top:var(--e-1)}
.carte-avis .actions .pousser{margin-left:auto}
/* Raison d'un geste desactive : sous la rangee des gestes, jamais dans la rangee (verification S2) */
.actions>.raison-desactive{flex:1 0 100%}
.carte-avis.compacte{padding:var(--e-3) var(--e-4)}
.carte-avis.compacte .titre-avis{font-size:var(--t-base)}

/* 11.2 Verdict */
.pastille{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:var(--r-rond);font-weight:700;font-size:var(--t-petit);border:1px solid;white-space:normal;max-width:100%;line-height:1.3}
/* Un signe distinct par verdict, jamais la couleur seule ; le signe est decoratif (le mot suit) */
.pastille::before{flex:none;display:inline-grid;place-items:center;width:1.05em;font-weight:800;line-height:1}
.pastille.prioritaire::before{content:"✓";content:"✓" / ""}
.pastille.a-etudier::before{content:"!";content:"!" / ""}
.pastille.trop-juste::before{content:"✕";content:"✕" / ""}
.pastille.peu-adapte::before{content:"–";content:"–" / ""}
.pastille.prioritaire{color:var(--c-succes);background:var(--c-succes-pale);border-color:var(--c-succes)}
.pastille.a-etudier{color:var(--c-attention);background:var(--c-attention-pale);border-color:var(--c-attention)}
.pastille.peu-adapte{color:var(--c-texte-2);background:var(--c-neutre-pale);border-color:var(--c-bord)}
.pastille.trop-juste{color:var(--c-danger);background:var(--c-danger-pale);border-color:var(--c-danger)}
.verdict{border:1px solid var(--c-trait);border-radius:var(--r-3);background:var(--c-surface);overflow:hidden}
.verdict .tete-verdict{display:flex;justify-content:space-between;align-items:center;gap:var(--e-3);padding:var(--e-3) var(--e-4);background:var(--c-surface-2)}
.verdict .tete-verdict h2{font-size:var(--t-base);margin:0}
.questions{list-style:none;margin:0;padding:0}
.questions>li{border-top:1px solid var(--c-trait)}
.questions details>summary{list-style:none;display:grid;grid-template-columns:28px minmax(0,1fr) 16px;gap:var(--e-2) var(--e-3);padding:var(--e-3) var(--e-4);cursor:pointer;align-items:start}
.questions details>summary::-webkit-details-marker{display:none}
.questions details>summary::after{content:"";width:7px;height:7px;margin-top:8px;border-right:2px solid var(--c-texte-3);border-bottom:2px solid var(--c-texte-3);transform:rotate(45deg)}
.questions details[open]>summary::after{transform:rotate(225deg);margin-top:11px}
.questions .question{font-weight:700;display:block}
.questions .reponse{display:block;font-size:var(--t-petit);color:var(--c-encre)}
.questions .preuve{padding:0 var(--e-4) var(--e-3) calc(var(--e-4) + 28px + var(--e-3));font-size:var(--t-petit);color:var(--c-texte-2)}
.questions .preuve blockquote{margin:var(--e-1) 0 0;padding:var(--e-2) var(--e-3);border-left:3px solid var(--c-trait);background:var(--c-fond);color:var(--c-encre)}
.signe{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;font-weight:800;font-size:.875rem;border:2px solid}
.signe.oui{color:var(--c-succes);background:var(--c-succes-pale);border-color:var(--c-succes)}
.signe.oui::before{content:"✓"}
.signe.doute{color:var(--c-attention);background:var(--c-attention-pale);border-color:var(--c-attention)}
.signe.doute::before{content:"!"}
.signe.non{color:var(--c-danger);background:var(--c-danger-pale);border-color:var(--c-danger)}
.signe.non::before{content:"✕"}
.verdict .pied-verdict{padding:var(--e-3) var(--e-4);border-top:1px solid var(--c-trait);font-size:var(--t-petit);color:var(--c-texte-2)}

/* 11.3 Echeance : date absolue + relative, jamais de compte a rebours qui bouge */
.echeance{display:inline-flex;flex-direction:column;align-items:flex-end;gap:0;line-height:1.3}
.echeance .absolue{font-weight:700;color:var(--c-encre)}
.echeance .relative{font-size:var(--t-petit);color:var(--c-texte-2);display:inline-flex;align-items:center;gap:4px}
.echeance.bientot .relative{color:var(--c-attention);font-weight:700}
.echeance.urgent .relative{color:var(--c-danger);font-weight:700}
.echeance.bientot .relative::before,.echeance.urgent .relative::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.echeance.a-verifier .absolue{color:var(--c-attention)}
.echeance.gauche{align-items:flex-start}
.echeance-grande{display:flex;gap:var(--e-3);align-items:center;padding:var(--e-3) var(--e-4);border-radius:var(--r-3);background:var(--c-surface);border:1px solid var(--c-trait)}
.echeance-grande .jours{display:grid;place-items:center;min-width:64px;padding:var(--e-2);border-radius:var(--r-2);background:var(--c-surface-2);text-align:center;line-height:1.1}
.echeance-grande .jours strong{font-size:1.5rem}
.echeance-grande .jours span{font-size:.75rem;color:var(--c-texte-2)}
.echeance-grande.bientot .jours{background:var(--c-attention-pale);color:var(--c-attention)}
.echeance-grande.urgent .jours{background:var(--c-danger-pale);color:var(--c-danger)}

/* 11.4 Faits cles (liste de synthese) */
.faits{display:grid;grid-template-columns:minmax(120px,190px) minmax(0,1fr);margin:0;border-top:1px solid var(--c-trait)}
.faits>dt,.faits>dd{margin:0;padding:var(--e-3) 0;border-bottom:1px solid var(--c-trait)}
.faits>dt{font-weight:600;color:var(--c-texte-2);padding-right:var(--e-4)}
.faits>dd .source{display:block;font-size:.8125rem;color:var(--c-texte-3);margin-top:2px}
.faits .valeur-forte{font-weight:700}
.lots{list-style:none;margin:0;padding:0;display:grid;gap:var(--e-1)}
.lots li{display:flex;gap:var(--e-2);align-items:baseline;padding:4px var(--e-2);border-radius:var(--r-1)}
.lots li.pour-vous{background:var(--c-succes-pale);outline:1px solid var(--c-succes)}
.lots .numero{font-weight:700;min-width:3.2em}
.criteres{list-style:none;margin:0;padding:0;display:grid;gap:var(--e-2)}
.criteres li{display:grid;grid-template-columns:minmax(0,1fr) 3.5em;gap:2px var(--e-3);align-items:center}
.criteres .barre{grid-column:1/-1;height:8px;border-radius:var(--r-rond);background:var(--c-surface-2);overflow:hidden}
.criteres .barre span{display:block;height:100%;background:var(--c-action)}
.criteres .poids{text-align:right;font-weight:700}

/* 11.5 Chronologie et etapes */
.chronologie{list-style:none;margin:0;padding:0;position:relative}
.chronologie li{position:relative;padding:0 0 var(--e-4) var(--e-6)}
.chronologie li::before{content:"";position:absolute;left:9px;top:6px;bottom:-6px;width:2px;background:var(--c-trait)}
.chronologie li:last-child::before{display:none}
.chronologie li::after{content:"";position:absolute;left:3px;top:4px;width:14px;height:14px;border-radius:50%;background:var(--c-surface);border:3px solid var(--c-action)}
.chronologie li.a-venir::after{border-color:var(--c-bord);border-style:dashed}
.chronologie li.alerte::after{border-color:var(--c-attention)}
.chronologie .quand{font-weight:700}
.etapes{list-style:none;margin:0 0 var(--e-5);padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,120px),1fr));gap:var(--e-2);counter-reset:etape}
.etapes li{counter-increment:etape;position:relative;padding:var(--e-3);border-radius:var(--r-2);background:var(--c-surface);border:1px solid var(--c-trait);font-size:var(--t-petit)}
.etapes li::before{content:counter(etape);display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;margin-bottom:var(--e-1);background:var(--c-surface-2);font-weight:700}
.etapes li.faite::before{content:"✓";background:var(--c-succes);color:#fff}
.etapes li.en-cours{border:2px solid var(--c-action);padding:calc(var(--e-3) - 1px)}
.etapes li.en-cours::before{background:var(--c-action);color:#fff}
.etapes .nom-etape{display:block;font-weight:700;color:var(--c-encre)}

/* 11.6 Tableaux (devient une pile sous 640 px) */
.cadre-tableau{border:1px solid var(--c-trait);border-radius:var(--r-3);background:var(--c-surface);overflow:hidden}
table{width:100%;border-collapse:collapse}
caption{text-align:left;font-weight:700;padding:var(--e-3) var(--e-4)}
th,td{text-align:left;vertical-align:top;padding:var(--e-3) var(--e-4);border-top:1px solid var(--c-trait)}
thead th{background:var(--c-surface-2);color:var(--c-texte-2);font-size:var(--t-petit);font-weight:700;border-top:0}
td.nombre,th.nombre{text-align:right}

/* 11.7 Pagination */
.pagination{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--e-3);margin-top:var(--e-4);font-size:var(--t-petit);color:var(--c-texte-2)}

/* 11.8 Etats vides */
.vide{text-align:center;padding:var(--e-7) var(--e-5);border:1px dashed var(--c-bord);border-radius:var(--r-3);background:var(--c-surface)}
.vide .titre-vide{font-size:var(--t-moyen);font-weight:700;margin-bottom:var(--e-2)}
.vide p{color:var(--c-texte-2);max-width:52ch;margin-left:auto;margin-right:auto}

/* 11.9 Compteurs actionnables (filtres, pas decoration) */
.compteurs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:var(--e-3);margin:0 0 var(--e-4)}
.compteur{display:flex;flex-direction:column;gap:2px;padding:var(--e-3) var(--e-4);border:1px solid var(--c-trait);border-radius:var(--r-3);background:var(--c-surface);color:var(--c-encre);text-decoration:none}
.compteur:hover{border-color:var(--c-action)}
.compteur strong{font-size:1.5rem;line-height:1.2}
.compteur span{font-size:var(--t-petit);color:var(--c-texte-2)}
.compteur.urgent strong{color:var(--c-danger)}

/* 11.10 Divulgation (details) */
details.depliant{border:1px solid var(--c-trait);border-radius:var(--r-3);background:var(--c-surface)}
details.depliant>summary{cursor:pointer;min-height:var(--cible);display:flex;align-items:center;gap:var(--e-2);padding:var(--e-2) var(--e-4);font-weight:700;list-style:none}
details.depliant>summary::-webkit-details-marker{display:none}
details.depliant>summary::before{content:"";width:8px;height:8px;border-right:2px solid var(--c-texte-2);border-bottom:2px solid var(--c-texte-2);transform:rotate(-45deg);margin-right:var(--e-1)}
details.depliant[open]>summary::before{transform:rotate(45deg)}
details.depliant>.contenu{padding:0 var(--e-4) var(--e-4)}
.source-technique{font-family:var(--f-chasse);font-size:.8125rem;color:var(--c-texte-2)}

/* 11.11 Ecarter avec motif (details, deux gestes, sans JS) */
.ecarter{position:relative}
.ecarter>summary{list-style:none}
.ecarter>summary::-webkit-details-marker{display:none}
.ecarter .motifs{margin-top:var(--e-2);background:var(--c-surface);border:1px solid var(--c-bord);border-radius:var(--r-3);box-shadow:var(--o-1);padding:var(--e-3)}
.actions>.ecarter[open],.groupe-boutons>.ecarter[open]{flex-basis:100%}
.ecarter .motifs .groupe-boutons{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,9.5rem),1fr))}
.ecarter .motifs p{font-weight:700;font-size:var(--t-petit);margin-bottom:var(--e-2)}
.ecarter .motifs .groupe-boutons .bouton{flex:1 1 auto}

/* 11.12 Barre d'action collante (telephone) */
.barre-actions{display:none}

/* 11.13 Selecteur de langue */
.langues{display:flex;flex-wrap:wrap;gap:var(--e-1) var(--e-3)}
.langues a[aria-current="true"]{font-weight:700;color:var(--c-encre);text-decoration:none}

/* 11.14 Apercu en direct (parametres) */
.apercu-direct .grand-nombre{font-size:2.25rem;font-weight:800;line-height:1.1}
.repartition{list-style:none;margin:var(--e-3) 0;padding:0;display:grid;gap:var(--e-2)}
.repartition li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px var(--e-3);font-size:var(--t-petit)}
.repartition .barre{grid-column:1/-1;height:6px;border-radius:var(--r-rond);background:var(--c-surface-2);overflow:hidden}
.repartition .barre span{display:block;height:100%;background:var(--c-action)}

/* 11.15 Accueil public */
.vitrine{background:var(--c-marque);color:#fff;padding:var(--e-8) var(--e-4) var(--e-7)}
.vitrine .interieur{max-width:var(--largeur-app);margin:0 auto;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:var(--e-7);align-items:center}
.vitrine h1{font-size:var(--t-vitrine);letter-spacing:-.01em;margin-bottom:var(--e-4)}
.vitrine .chapeau{color:var(--c-marque-texte-2);font-size:1.1875rem}
.vitrine .bouton.secondaire{background:transparent;color:#fff;border-color:#c3cede}
.vitrine .bouton.secondaire:hover{background:rgba(255,255,255,.08)}
.vitrine .garanties{list-style:none;padding:0;margin:var(--e-5) 0 0;display:flex;flex-wrap:wrap;gap:var(--e-2) var(--e-5);color:var(--c-marque-texte-2);font-size:var(--t-petit)}
.vitrine .garanties li::before{content:"✓ ";color:#fff;font-weight:700}
.vitrine .exemple{color:var(--c-encre)}
.section-publique{max-width:var(--largeur-app);margin:0 auto;padding:var(--e-7) var(--e-4)}
.trois-etapes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:var(--e-4);counter-reset:pas}
.trois-etapes li{counter-increment:pas;background:var(--c-surface);border:1px solid var(--c-trait);border-radius:var(--r-3);padding:var(--e-5)}
.trois-etapes li::before{content:counter(pas);display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--c-action);color:#fff;font-weight:800;margin-bottom:var(--e-3)}
.tarifs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:var(--e-4)}
.tarif{background:var(--c-surface);border:1px solid var(--c-trait);border-radius:var(--r-3);padding:var(--e-5);display:flex;flex-direction:column;gap:var(--e-3)}
.tarif.mis-en-avant{border:2px solid var(--c-action);box-shadow:var(--o-2)}
.tarif .prix{font-size:2rem;font-weight:800;line-height:1.1}
.tarif .prix small{font-size:var(--t-petit);font-weight:600;color:var(--c-texte-2)}
.tarif ul{list-style:none;padding:0;margin:0;display:grid;gap:var(--e-2)}
.tarif li::before{content:"✓ ";color:var(--c-succes);font-weight:800}
.tarif .bouton{margin-top:auto}

/* ---------- 13. Responsive ---------- */
@media (max-width:960px){
  .deux-colonnes{grid-template-columns:minmax(0,1fr)}
  .colonne-collante{position:static}
  .vitrine .interieur{grid-template-columns:minmax(0,1fr)}
  .ordre-avant{order:-1}
}
@media (max-width:760px){
  .nav-principale{display:none}
  .menu-mobile{display:block}
  .entete .bandeau{min-height:56px;gap:var(--e-2)}
  .page{padding:var(--e-4) var(--e-4) calc(var(--barre-collante) + var(--e-6))}
  h1{font-size:1.5rem}
  .vitrine{padding:var(--e-6) var(--e-4)}
  .vitrine h1{font-size:2rem}
  .carte-avis{grid-template-columns:minmax(0,1fr);padding:var(--e-4)}
  .carte-avis.urgent{padding-left:calc(var(--e-4) - 4px)}
  .carte-avis>.echeance{grid-column:1;grid-row:auto;min-width:0;text-align:left;flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:0 var(--e-2);margin:var(--e-1) 0}
  .carte-avis .cote{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;text-align:left;min-width:0;grid-column:1}
  .carte-avis .cote .echeance{align-items:flex-start}
  /* Trois gestes de tri sur une ligne, de largeur egale, au pouce ; a 98 px de large (375 px, trois gestes),
     le texte le plus long (neerlandais « Selecteren », allemand « Vormerken », « Aussortieren ») coupait sur
     deux lignes avec le rembourrage de .bouton (16 px) : reduit ici seulement, sans toucher aux autres boutons */
  .carte-avis .actions>form,.carte-avis .actions>details{flex:1 1 0;min-width:0}
  .carte-avis .actions .bouton,.carte-avis .actions .ecarter>summary{width:100%}
  /* regle separee de celle des maquettes (test_e2_design_socle : copie fidele) pour garder son texte intact */
  .carte-avis .actions .bouton,.carte-avis .actions .ecarter>summary{padding-left:var(--e-1);padding-right:var(--e-1)}
  .carte-avis .actions>details[open]{flex-basis:100%}
  .carte-avis .actions .pousser{margin-left:0}
  /* Menus de l'en-tete : panneau accroche a toute la largeur du bandeau, jamais hors de l'ecran (1.4.10) */
  .entete .menu{position:static}
  .entete .menu .panneau-menu{left:var(--e-2);right:var(--e-2);min-width:0}
  .faits{grid-template-columns:minmax(0,1fr)}
  .faits>dt{padding-bottom:0;border-bottom:0}
  .faits>dd{padding-top:2px}
  /* Tableau -> pile : chaque cellule porte son libelle (data-libelle) */
  table.empilable thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  table.empilable,table.empilable tbody,table.empilable tr,table.empilable td{display:block;width:100%}
  table.empilable tr{border-top:1px solid var(--c-trait);padding:var(--e-2) 0}
  /* Libelle au-dessus de la valeur : tient a 320 px meme avec le texte a 200 % */
  table.empilable td{border:0;padding:var(--e-1) var(--e-4);display:block;text-align:left;overflow-wrap:anywhere}
  table.empilable td::before{content:attr(data-libelle);display:block;font-weight:600;color:var(--c-texte-2);font-size:var(--t-petit)}
  table.empilable td.nombre{text-align:left}
  /* legende pleine largeur : un tableau devenu bloc garde sinon sa legende en colonne etroite (couture E2-E3,
     parcours reel a 375 px : « Commandes de ... » sur 129 px de large et 288 de haut) */
  table.empilable caption{display:block;width:100%}
  /* Barre d'action collante : position sticky, aucun JS ; scroll-padding evite de masquer le focus (2.4.11) */
  .barre-actions{display:flex;gap:var(--e-2);position:sticky;bottom:0;z-index:12;margin:var(--e-5) calc(-1 * var(--e-4)) 0;padding:var(--e-2) var(--e-4) calc(var(--e-2) + env(safe-area-inset-bottom));background:var(--c-surface);border-top:1px solid var(--c-bord);box-shadow:0 -4px 12px rgba(16,24,40,.08)}
  .barre-actions .bouton{flex:1 1 0;min-width:0;padding-left:var(--e-2);padding-right:var(--e-2)}
  .masque-telephone{display:none!important}
  .onglets a{flex:1 1 auto;justify-content:center;padding:0 var(--e-2);gap:6px}
  .compteurs{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--e-2)}
  .compteur{padding:var(--e-2) var(--e-3)}
  .compteur strong{font-size:1.25rem}
  .compteur span{font-size:.8125rem;line-height:1.3}
  .en-tete-page .bouton{width:100%}
  .en-tete-page .sous-titre{font-size:var(--t-petit)}
}
@media (max-width:400px){
  /* En-tete sur une ligne a 320 px : marque reduite, Menu colle a droite */
  .entete .bandeau{padding:0 var(--e-3);column-gap:var(--e-1)}
  .marque{font-size:.9375rem;gap:6px}
  .marque .logo{width:24px;height:24px}
  .marque .logo::before{inset:6px 5px}
  .menu>summary{padding:0 var(--e-2)}
}
@media (max-width:360px){.compteurs{grid-template-columns:minmax(0,1fr)}}
@media (min-width:761px){.seulement-telephone{display:none!important}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
@media (forced-colors:active){
  .badge,.pastille,.puce,.bouton,.signe,.onglets a[aria-current="page"]{border:1px solid CanvasText}
  .lots li.pour-vous{outline:2px solid Highlight}
}
@media print{
  .entete,.pied,.barre-actions,.actions,.note-maquette,.filtres{display:none!important}
  body{background:#fff}
  .carte,.carte-avis{box-shadow:none;break-inside:avoid}
}

/* Filtres actifs (puces retirables) et filtres replies : la liste reste au premier ecran du telephone */
.filtres-actifs{display:flex;flex-wrap:wrap;gap:var(--e-2);align-items:center;margin:0 0 var(--e-3)}
@media (max-width:760px){
  .outils-entete>.menu:not(.menu-mobile){display:none}
  .marque{font-size:1rem}
}
@media (max-width:760px){
  .onglets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible;gap:0}
  .onglets a{flex-direction:column;gap:2px;padding:6px 4px;font-size:.9375rem;white-space:normal;text-align:center;line-height:1.2}
}
input[type=file]{min-width:0;max-width:100%}
/* Faits cles dans une colonne etroite : une seule colonne, le libelle au-dessus */
aside .faits{grid-template-columns:minmax(0,1fr)}
aside .faits>dt{padding-bottom:0;border-bottom:0}
aside .faits>dd{padding-top:2px}

/* ---------- 14. Revision du 2026-10-10 (critique integree) ---------- */
/* 14.1 Trace d'un tri : ligne compacte a la place de la carte traitee, avec Annuler (remplace la banniere) */
.trace{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--e-1) var(--e-3);padding:var(--e-2) var(--e-3) var(--e-2) var(--e-4);border:1px dashed var(--c-bord);border-radius:var(--r-3);background:var(--c-surface-2);font-size:var(--t-petit);color:var(--c-encre);scroll-margin-top:var(--e-4)}
.trace p{margin:0;min-width:0}
.trace .bouton{min-height:36px}
/* 14.2 Raccourcis : compteurs replies en une ligne de puces (filtres GET), et le panneau Filtrer dans la meme ligne */
.raccourcis{display:flex;flex-wrap:wrap;gap:var(--e-2);align-items:center;margin:0 0 var(--e-3)}
.raccourcis .puce strong{font-weight:800}
.puce.urgent{border-color:var(--c-danger);color:var(--c-danger)}
.filtrer{flex-basis:auto}
.filtrer>summary{list-style:none}
.filtrer>summary::-webkit-details-marker{display:none}
.filtrer>summary::after{content:"";width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);margin-left:4px}
.filtrer[open]{flex-basis:100%}
.filtrer .panneau-filtres{margin-top:var(--e-2);padding:var(--e-3) var(--e-4);border:1px solid var(--c-trait);border-radius:var(--r-3);background:var(--c-surface)}
/* 14.3 Fiche : une seule section verdict et decision, placee juste apres la date limite dans le DOM ;
   sur ordinateur, colonne de droite collante par la grille (ordre du DOM = ordre de lecture) */
.fiche>*+*{margin-top:var(--e-4)}
.liens-officiels{display:flex;flex-wrap:wrap;gap:var(--e-2)}
.liens-officiels .bouton{flex:1 1 0;min-width:0}
.liens-officiels .note-lien{flex-basis:100%;margin:0;font-size:var(--t-petit);color:var(--c-texte-2)}
@media (min-width:961px){
  .fiche{display:grid;grid-template-columns:minmax(0,1fr) var(--colonne-droite);column-gap:var(--e-5);row-gap:0;align-items:start}
  .fiche>*{grid-column:1;margin:0 0 var(--e-4)}
  .fiche>*+*{margin-top:0}
  /* a droite, a hauteur de la date limite qui la precede dans le DOM */
  .fiche>.fiche-cote{grid-column:2;grid-row:2/span 30;position:sticky;top:var(--e-4)}
}
.fiche-cote>*+*{margin-top:var(--e-4)}
/* 14.4 Verdict : ce qui n'est pas lu est dit a part, hors du verdict */
.verdict .hors-avis{display:grid;grid-template-columns:28px minmax(0,1fr);gap:var(--e-3);padding:var(--e-3) var(--e-4);border-top:1px solid var(--c-trait);font-size:var(--t-petit);color:var(--c-encre)}
.signe.info{color:var(--c-texte-2);background:var(--c-neutre-pale);border-color:var(--c-bord)}
.signe.info::before{content:"i"}
/* 14.5 Etapes des retenus (onglet Retenus, tableau d'etapes sans script) */
.colonnes-etapes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:var(--e-4);align-items:start}
.colonne-etape{background:var(--c-surface-2);border-radius:var(--r-3);padding:var(--e-3)}
.colonne-etape>h2{font-size:var(--t-base);display:flex;justify-content:space-between;gap:var(--e-2);margin:0 0 var(--e-3)}
.colonne-etape .liste-avis{gap:var(--e-2)}
/* 14.6 Fil d'Ariane en nav + liste */
nav.fil ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 var(--e-1)}
nav.fil li+li::before{content:"›";content:"›" / "";color:var(--c-texte-3);padding:0 var(--e-1)}
/* 14.8 Le panneau de motifs en allemand ou neerlandais : boutons a la ligne, jamais coupes */
.ecarter .motifs .bouton{white-space:normal}
/* 14.9 Texte agrandi a 200 % (1.4.4) et mots longs : aucun element de grille ou de flex ne force la largeur */
.pile>*,.deux-colonnes>*,.planche>*,.choix>*,.liste-simple>li{min-width:0}
.option>span,.liste-simple>li,.source-technique,.chapeau,.trace p{overflow-wrap:anywhere}
.liste-simple{list-style:none;margin:0;padding:0;display:grid;gap:var(--e-2)}
.onglets a,.menu .panneau-menu a,.puce,.compteur span{overflow-wrap:anywhere;min-width:0}
:lang(de) .onglets a,:lang(nl) .onglets a,:lang(de) .panneau-menu a,:lang(nl) .panneau-menu a{hyphens:auto}
.banniere>div{min-width:0;overflow-wrap:anywhere}
.carte-avis.compacte{grid-template-columns:minmax(0,1fr)}
.carte-avis.compacte>.echeance{grid-column:1;grid-row:auto;text-align:left;min-width:0}
/* 14.10 La carte s'adapte a la largeur de sa liste (colonnes d'etapes, colonne de droite), pas seulement a l'ecran */
.liste-avis{container-type:inline-size}
@container (max-width:34rem){
  .carte-avis{grid-template-columns:minmax(0,1fr);padding:var(--e-3) var(--e-4)}
  .carte-avis.urgent{padding-left:calc(var(--e-4) - 4px)}
  .carte-avis>.echeance{grid-column:1;grid-row:auto;min-width:0;text-align:left;flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:0 var(--e-2);margin:var(--e-1) 0}
}
/* 14.11 Tablette : l'en-tete peut passer sur deux lignes ; les menus s'accrochent au bandeau, jamais hors de l'ecran */
@media (max-width:960px){
  .entete .menu{position:static}
  .entete .menu .panneau-menu{left:auto;right:var(--e-2);max-width:calc(100vw - 2 * var(--e-2))}
}
@media (max-width:760px){
  .entete .menu .panneau-menu{left:var(--e-2);right:var(--e-2);max-width:none}
}

/* 14.12 Vague E5 (chantier UX, 2026-10-11) : marche precedent dans notre avis, resultats et lettre de demande des
   motifs, radar des renouvellements, mes donnees (maquettes 11, 13, 16, 19) */
.verdict .precedent{padding:var(--e-3) var(--e-4);border-top:1px solid var(--c-trait);font-size:var(--t-petit)}
.verdict .titre-precedent{font-size:var(--t-petit);font-weight:700;margin:0 0 var(--e-1)}
.verdict .precedent ul{padding-left:var(--e-4)}
.verdict .precedent li+li{margin-top:2px}
.resultat>.faits+.faits{margin-top:var(--e-3)}
.resultat .lettre{margin-top:var(--e-4);padding-top:var(--e-4);border-top:1px solid var(--c-trait)}
.lettre h3{margin-top:0}
.lettre textarea{min-height:18rem;font-size:var(--t-petit);line-height:1.5}
.durees>li{padding-bottom:var(--e-2);border-bottom:1px solid var(--c-trait)}
.durees>li:last-child{border-bottom:0;padding-bottom:0}
.durees .duree{display:block;color:var(--c-texte-2)}
.zone-danger{border-color:var(--c-danger)}
td .source{display:block;font-size:.8125rem;color:var(--c-texte-3);margin-top:2px}

/* 14.13 Vague E5, chantier UX, etape B (2026-10-11) : dossier de reponse offert (maquettes 14, 15 et 22) */
.section-memoire+.section-memoire{margin-top:var(--e-5)}
.paragraphe-memoire{padding:var(--e-3) 0;border-top:1px solid var(--c-trait)}
.paragraphe-memoire>details{margin-top:var(--e-2)}
.preuves blockquote{margin:var(--e-1) 0 var(--e-2);padding:var(--e-2) var(--e-3);border-left:3px solid var(--c-trait);background:var(--c-fond)}

/* ---------- 15. Produit : complements des maquettes ---------- */
/* 15.1 Date limite : le fuseau est ecrit apres l'heure, la date relative dessous (DESIGN 4.4) */
.echeance .fuseau,.echeance-grande .fuseau{font-weight:400;color:var(--c-texte-2);font-size:var(--t-petit)}
.echeance .absolue{display:inline}
.echeance-grande .absolue-grande{font-size:var(--t-moyen);font-weight:700}
.echeance-grande .jours.clos{background:var(--c-danger-pale);color:var(--c-danger)}
/* 15.2 Pied de page : la marque, puis les liens */
.pied .nom-pied{font-weight:700;color:var(--c-encre)}
/* 15.3 Carte d'avis : la raison et les faits passent a la ligne */
.carte-avis .raison,.carte-avis .faits-courts li{overflow-wrap:anywhere}
.carte-avis .etat-ferme{font-size:var(--t-petit);color:var(--c-texte-2)}
.liste-avis+.liste-avis{margin-top:var(--e-3)}
/* 15.4 Verdict hors fiche (apercu de l'essai, tri) : questions en liste simple */
.questions .question-simple{display:grid;grid-template-columns:28px minmax(0,1fr);gap:var(--e-3);padding:var(--e-3) var(--e-4);align-items:start}
/* 15.5 Tableaux empilables (faits cles de la fiche, equipe, veilles ; constat de la verification S1 : tableaux
   hors de l'ecran a 375 et 768 px). Largeur de leur cadre, jamais au-dela : colonnes fixes, une adresse longue
   se coupe ; sous 760 px, une cellule vide ne prend pas de place, un bouton tient dans sa cellule et les
   en-tetes caches ne debordent pas. */
table.empilable{width:100%;table-layout:fixed}
table.empilable td,table.empilable th,table.empilable td a{overflow-wrap:anywhere}
@media (max-width:760px){
  table.empilable td:empty{display:none}
  table.empilable td form.ligne{display:block;margin:var(--e-1) 0}
  table.empilable td .bouton,table.empilable td button{max-width:100%}
  table.empilable thead tr,table.empilable thead th{display:block;width:1px;overflow:hidden}
}
/* 15.6 Selecteur de langue dans l'en-tete (langue servie mais pas encore ouverte : retour au francais) */
.outils-entete .langues a{display:inline-flex;align-items:center;min-height:var(--cible);padding:0 var(--e-2);color:#fff;font-weight:600}
/* Choix de langue de l'en-tete, codes courts (DX65 : quatre langues des la beta, choix visible sans le pied de page) ;
   sur telephone, seconde ligne a droite : la premiere garde la marque et le Menu sur une ligne a 320 px */
.entete .langues-entete{gap:0;flex-wrap:nowrap}
.entete .langues-entete a,.entete .langues-entete strong{display:inline-flex;align-items:center;justify-content:center;min-height:var(--cible);min-width:var(--cible);padding:0 6px;font-size:var(--t-petit)}
.entete .langues-entete a{font-weight:600;color:var(--c-marque-texte-2);text-decoration:none}
.entete .langues-entete a:hover{color:#fff}
.entete .langues-entete strong{font-weight:700;color:#fff;box-shadow:inset 0 -3px 0 #fff}
@media (max-width:760px){.entete .langues-entete{flex-basis:100%;justify-content:flex-end;margin-top:calc(-1 * var(--e-2))}
  .entete .langues-entete a,.entete .langues-entete strong{min-height:36px}}
/* 15.7 Mes marches (lot 2) : veilles de la colonne en liste simple */
.sans-puces{list-style:none;margin:0 0 var(--e-3);padding:0;display:grid;gap:var(--e-2)}
/* 15.8 Essai, inscription, lien envoye, connexion (vague E2, etape S4, lot 5 ; maquettes 02 a 06) */
.sous-option{padding:0 var(--e-3) var(--e-2) calc(var(--e-3) + 32px)}
.centre{text-align:center}
.titre-carte{font-size:var(--t-moyen)}
.bilan h1{font-size:var(--t-grand)}
.apres-bilan{margin-top:var(--e-5)}
.envoye{padding:var(--e-6) var(--e-5)}
.envoye+.banniere,.formulaire-carte+.banniere{margin-top:var(--e-5)}
.bilan form.en-ligne,.groupe-boutons form.en-ligne{display:inline-flex}
@media (max-width:760px){.envoye{padding:var(--e-5) var(--e-4)}.sous-option{padding-left:var(--e-3)}
  /* etapes de l'essai sur une ligne au telephone (premier ecran de l'apercu), une colonne avec le texte agrandi */
  .etapes{grid-template-columns:repeat(auto-fit,minmax(min(100%,6rem),1fr));gap:var(--e-1);margin-bottom:var(--e-4)}
  .etapes li{padding:var(--e-2);font-size:.8125rem;overflow-wrap:anywhere}
  .etapes li.en-cours{padding:calc(var(--e-2) - 1px)}
  .etapes li::before{width:20px;height:20px;font-size:.75rem}}
.case-acceptation{margin:0 0 var(--e-2)}
.case-acceptation.erreur .option{border:2px solid var(--c-danger)}
/* 15.9 Accueil, Ma veille, abonnement, equipe, aide (vague E2, etape S4, lots 5 et 7 ; maquettes 01, 12, 13, 17) */
.sans-marge-haut{margin-top:0}
.section-publique.sans-haut{padding-top:0}
.section-publique.sans-bas{padding-bottom:0}
.vitrine .legende-exemple{color:var(--c-marque-texte-2)}
.tarif .prix-texte{font-size:var(--t-grand);font-weight:800;line-height:1.25;margin:0}
.description-veille{background:var(--c-surface-2);border-radius:var(--r-2);padding:var(--e-3);margin:0 0 var(--e-2)}
.liste-membres{list-style:none;margin:0;padding:0;display:grid;gap:var(--e-3)}
.liste-membres>li{padding-bottom:var(--e-3);border-bottom:1px solid var(--c-trait)}
.liste-membres>li:last-child{border-bottom:0;padding-bottom:0}
.liste-membres .badge{margin-left:var(--e-1)}
.faq .depliant+.depliant{margin-top:var(--e-2)}
/* 15.10 Page de presentation des services (accueil, demande de Xavier du 20 octobre 2026) : jetons existants seulement,
   paires de couleurs deja calculees (DESIGN 5.1) ; telephone d'abord, deux colonnes a partir de 960 px */
.vitrine .interieur.une-colonne{grid-template-columns:minmax(0,1fr)}
.vitrine .interieur.une-colonne>div{max-width:48rem}
.vitrine .surtitre{color:var(--c-marque-texte-2);font-size:var(--t-petit);font-weight:700;letter-spacing:.02em;margin:0 0 var(--e-3)}
.bande-claire{background:var(--c-surface);border-top:1px solid var(--c-trait);border-bottom:1px solid var(--c-trait)}
.probleme-reponse{display:grid;gap:var(--e-4);grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.probleme-reponse>.carte+.carte{margin-top:0}
.atouts-et-exemple{display:grid;gap:var(--e-5);grid-template-columns:minmax(0,1fr);align-items:start}
.atouts{list-style:none;margin:0;padding:0;display:grid;gap:var(--e-4)}
.atouts>li{border-left:4px solid var(--c-action);padding:var(--e-1) 0 var(--e-1) var(--e-4)}
.atouts h3{margin-bottom:var(--e-1)}
.pastilles-avis{display:flex;flex-wrap:wrap;gap:var(--e-2);margin:var(--e-2) 0 0}
.couverture-pays{list-style:none;margin:0 0 var(--e-4);padding:0;display:grid;gap:var(--e-3);grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.couverture-pays>li{background:var(--c-fond);border:1px solid var(--c-trait);border-radius:var(--r-3);padding:var(--e-3) var(--e-4)}
.appel-final{margin-top:var(--e-5);padding:var(--e-4) var(--e-5);border:1px solid var(--c-trait);border-radius:var(--r-3);background:var(--c-surface);display:grid;gap:var(--e-3)}
@media (min-width:960px){
  .atouts-et-exemple{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .atouts-et-exemple.sans-exemple{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .section-publique{padding-top:var(--e-6);padding-bottom:var(--e-6)}
  .vitrine .groupe-boutons .bouton{width:100%}
}

/* ---------- 16. Pages pas encore refondues (lots 2 a 7 du plan) ---------- */
/* Anciens noms de couleurs (pages d'administration, tri) : alias des jetons */
:root{--encre:var(--c-encre);--doux:var(--c-texte-2);--trait:var(--c-trait);--fond:var(--c-fond);
--carte:var(--c-surface);--accent:var(--c-action);--accent-fonce:var(--c-action-fonce);--vert:var(--c-succes);
--orange:var(--c-attention);--rouge:var(--c-danger)}
main.page>h2{margin-top:var(--e-6)}
main.page>.carte,main.page>.tableau,main.page>.grille,main.page>form,main.page>.liste-avis{margin:var(--e-4) 0}
.carte+.carte{margin-top:var(--e-4)}
.grille>.carte,.grille>.carte+.carte{margin:0}
.petit:not(.bouton){font-size:var(--t-petit);color:var(--c-texte-2)}
.legende{color:var(--c-texte-2);font-size:var(--t-petit)}
.chiffre{font-size:1.75rem;font-weight:700;line-height:1.2}
.tableau{overflow-x:auto;border:1px solid var(--c-trait);border-radius:var(--r-3);background:var(--c-surface)}
.tableau table{background:var(--c-surface)}
.tableau thead th{background:var(--c-surface-2);color:var(--c-texte-2);font-size:var(--t-petit);font-weight:700;border-top:0}
.message{padding:var(--e-3) var(--e-4);border-radius:var(--r-3);border:1px solid var(--c-action);border-left-width:5px;background:var(--c-surface);margin:0 0 var(--e-4)}
.message.erreur{border-color:var(--c-danger)}
.message p:last-child{margin-bottom:0}
.badge.vert{background:var(--c-succes-pale);color:var(--c-succes)}
.badge.orange{background:var(--c-attention-pale);color:var(--c-attention)}
.badge.rouge{background:var(--c-danger-pale);color:var(--c-danger)}
.averifier{color:var(--c-attention);font-weight:600}
form.ligne{display:inline}
main form label:not([class]){display:block;font-weight:600;margin:var(--e-3) 0 var(--e-1)}
main button:not(.bouton):not(.tri-oui):not(.tri-non){display:inline-flex;align-items:center;justify-content:center;gap:var(--e-2);min-height:var(--cible);padding:var(--e-2) var(--e-4);border-radius:var(--r-2);border:1px solid var(--c-action);background:var(--c-action);color:#fff;font:inherit;font-weight:600;line-height:1.25;cursor:pointer;white-space:normal}
main button:not(.bouton):not(.tri-oui):not(.tri-non):hover{background:var(--c-action-fonce);border-color:var(--c-action-fonce)}
main button.secondaire:not(.bouton){background:var(--c-surface);color:var(--c-action);border-color:var(--c-bord)}
main button.secondaire:not(.bouton):hover{background:var(--c-action-pale);color:var(--c-action-fonce)}
main button.danger:not(.bouton){background:var(--c-surface);color:var(--c-danger);border-color:var(--c-danger)}
/* Une adresse affichee en clair se coupe au lieu d'elargir la page (constat de l'integration E1) */
main a,.carte p,.carte li{overflow-wrap:anywhere}td a,th a{overflow-wrap:normal}
/* Vague E2, etape S3 (lot 4) : notre avis d'un coup d'oeil en tete de la fiche, lien vers la section « Notre avis » */
.lien-pastille{display:inline-flex;text-decoration:none;border-radius:var(--r-rond)}
.lien-pastille:hover .pastille{text-decoration:underline}