/* =========================================
   QualiMarché — feuille commune des pages (formulaires, cartes, boutons, états)
   Chantier A (3-01, 08/10/2026) : la palette est CELLE DE LA CHARTE Système Quali. Les jetons ci-dessous ne portent
   plus aucune couleur à eux : ils renvoient aux jetons de public/styles/entete-pied.css (Bleu Marque, Bleu Nuit,
   Encre, Ardoise, Brume, Orange Signal et ses variantes), chargée par la mise en page sur toutes les pages. Fin du
   dégradé indigo → violet des boutons, de l'anneau de focus indigo et du halo lavande du fond. Jamais de rouge : les
   anciens jetons « danger » renvoient à l'orange lisible (codage par intensité, pas par alarme).
========================================= */

/* =========================================================
   1) POLICES — hébergées (public/styles/polices.css) : Poppins pour les titres, Inter pour le corps
========================================================= */

/* =========================================================
   2) JETONS — renvois à la charte (aucune valeur de couleur propre hors de ce bloc)
========================================================= */
:root{
  --qm-max: 1200px;
  --qm-pad: 24px;

  /* Couleurs : la charte */
  --qm-bg: var(--qm-blanc);
  --qm-text: var(--qm-encre);
  --qm-muted: var(--qm-ardoise);
  --qm-faint: var(--qm-ardoise);

  --qm-panel: var(--qm-blanc);
  --qm-panel2: var(--qm-fond);
  --qm-line: var(--qm-brume);
  --qm-line-light: var(--qm-brume);

  /* Rayons : sobres, comme les pages métier (4 à 8 px) */
  --qm-radius: 8px;
  --qm-radius-sm: 4px;
  --qm-radius-lg: 8px;
  --qm-radius-xl: 12px;

  /* Ombres : neutres, teintées d'Encre */
  --qm-shadow-xs: 0 1px 2px rgba(15,27,45,0.04);
  --qm-shadow-sm: 0 1px 2px rgba(15,27,45,0.05), 0 3px 10px rgba(15,27,45,0.04);
  --qm-shadow-md: 0 4px 16px rgba(15,27,45,0.06), 0 2px 4px rgba(15,27,45,0.02);
  --qm-shadow-lg: 0 12px 40px rgba(15,27,45,0.08), 0 4px 12px rgba(15,27,45,0.02);
  --qm-shadow-xl: 0 24px 80px rgba(15,27,45,0.12), 0 8px 24px rgba(15,27,45,0.04);
  --qm-shadow-glow: 0 0 0 1px var(--qm-brume);
  --qm-shadow-card: 0 1px 2px rgba(15,27,45,0.05), 0 3px 10px rgba(15,27,45,0.04);

  --qm-font: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* Anneau de focus : Bleu Marque à 25 % */
  --qm-focus: 0 0 0 3px rgba(30,82,144,.25);

  /* Anciens dégradés : des aplats de la charte (les noms restent, les pages qui les lisent suivent) */
  --qm-gradient-primary: var(--qm-bleu-marque);
  --qm-gradient-secondary: var(--qm-fond);
  --qm-gradient-card: var(--qm-blanc);
  --qm-gradient-hero: var(--qm-fond);
  --qm-gradient-success: var(--qm-signal-ok);
  --qm-gradient-warning: var(--qm-orange-signal);
  --qm-gradient-danger: var(--qm-accent-texte);

  /* Couleurs de marque */
  --qm-primary: var(--qm-bleu-marque);
  --qm-primary-hover: var(--qm-bleu-nuit);
  --qm-primary-light: var(--qm-brume);
  --qm-success: var(--qm-signal-ok);
  --qm-success-light: var(--qm-signal-ok-fond);
  --qm-warning: var(--qm-orange-signal);
  --qm-warning-light: var(--qm-fond-accent);
  --qm-danger: var(--qm-accent-texte);
  --qm-danger-light: var(--qm-fond-accent);

  /* Jetons génériques (anciens noms, lus par quelques pages) */
  --background: var(--qm-blanc);
  --foreground: var(--qm-encre);
  --card: var(--qm-blanc);
  --card-foreground: var(--qm-encre);
  --popover: var(--qm-blanc);
  --popover-foreground: var(--qm-encre);
  --muted: var(--qm-fond);
  --muted-foreground: var(--qm-ardoise);
  --border: var(--qm-brume);
  --input: var(--qm-bordure-forte);
  --ring: rgba(30,82,144,.25);
  --primary: var(--qm-bleu-marque);
  --primary-foreground: var(--qm-blanc);
  --secondary: var(--qm-fond);
  --secondary-foreground: var(--qm-encre);
  --accent: var(--qm-brume);
  --accent-foreground: var(--qm-bleu-marque);
  --radius: 8px;
}

/* =========================================================
   3) BASE & RESET
========================================================= */
*{ box-sizing:border-box; margin:0; padding:0; }
/* Chantier A (3-12) : plus de « html,body{height:100%} » — il bornait le bloc conteneur de l'en-tête collant à une
   hauteur d'écran : l'en-tête ne collait que pendant le premier écran, puis disparaissait (et la barre d'onglets du
   cockpit, collée sous lui, flottait au milieu de l'écran). Une hauteur MINIMALE garde le pied en bas sans borner. */
html{ min-height:100%; scroll-behavior:smooth; }

/* Chantier A (3-05) : un élément « hidden » est caché, quelle que soit sa classe. Les bandeaux de statut
   (.qm-status-banner{display:flex}) l'emportaient sur l'attribut : un cadre vide jaune pâle restait en tête de cinq
   formulaires (contact, alertes, connexion, inscription, mot de passe oublié). */
[hidden]{ display:none !important; }

/* Chantier A (3-09) : le pied de page est POUSSÉ en bas d'une page courte (corps en colonne, contenu extensible),
   au lieu d'une hauteur réservée au contenu (min-height: 100vh − 200 px) qui laissait un demi-écran blanc sous deux
   lignes de texte. */
body{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--qm-bg);
  color: var(--foreground);
  font-family: var(--qm-font);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.01em;
}

a{ color:inherit; text-decoration:none; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:none;
  box-shadow: var(--qm-focus);
  border-radius: var(--qm-radius-sm);
}

:where(section[id]){ scroll-margin-top: 100px; }

/* =========================================================
   4) LAYOUT
========================================================= */
.qm-container{
  max-width: var(--qm-max);
  margin: 0 auto;
  padding: 0 var(--qm-pad);
}

.qm-main{
  padding: 40px 0 80px;
  flex: 1 0 auto; /* 3-09 : remplit l'espace libre d'une page courte ; le pied reste en bas de l'écran */
}

/* Le titre des pages de compte, légales et d'information (.qm-hero) : Poppins, comme les écrans métier (charte). */
.qm-hero h1{
  font-family: var(--qm-titre);
  font-weight: 600;
  font-size: clamp(26px, 4vw, 33px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--qm-encre);
  margin: 0 0 8px;
}

.qm-section{ padding: 32px 0; }

.qm-hidden{ display: none !important; }

/* =========================================================
   5) TYPOGRAPHIE — titres en Poppins (charte)
========================================================= */
.qm-h1{
  font-family: var(--qm-titre);
  font-size: clamp(30px, 5vw, 44px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 16px 0;
  color: var(--foreground);
}

.qm-h2{
  font-family: var(--qm-titre);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 12px 0;
  color: var(--foreground);
}

.qm-h3{
  font-family: var(--qm-titre);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0 0 8px 0;
  color: var(--foreground);
}

.qm-lead{
  font-size: 18px;
  line-height: 1.7;
  color: var(--muted-foreground);
  margin: 0 0 24px 0;
  max-width: 680px;
}

.qm-p{
  margin: 0;
  color: var(--muted-foreground);
  line-height: 1.7;
  font-size: 15px;
}

.qm-muted{ color: var(--muted-foreground); }
.qm-faint{ color: var(--qm-faint); }

/* =========================================================
   6) BOUTONS — mêmes formes que .bouton / .bouton-sobre de l'en-tête (entete-pied.css)
========================================================= */
.qm-actionsRow{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Alias pour éviter l’incohérence pages (.qm-actions-row vs .qm-actionsRow) */
.qm-actions-row{
  display:flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}

/* Chantier A (3-01) : le bouton principal est PLEIN BLEU MARQUE, comme « .bouton » des pages métier — plus de dégradé
   indigo → violet ni de halo coloré (huit pages de conversion : tarifs, contact, alertes, connexion, inscription,
   mot de passe oublié, profil, confiance). */
.qm-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  min-height: 44px;
  border-radius: var(--qm-rayon);
  padding: 10px 20px;
  border: 1px solid transparent;
  font-family: var(--qm-corps);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.4;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
  text-decoration: none;
  position: relative;
}

.qm-btn:disabled{ opacity: 0.55; cursor: not-allowed; }

.qm-btn--primary{
  background: var(--qm-bleu-marque);
  border-color: var(--qm-bleu-marque);
  color: var(--qm-blanc);
}

.qm-btn--primary:hover:not(:disabled){
  background: var(--qm-bleu-nuit);
  border-color: var(--qm-bleu-nuit);
}

.qm-btn--secondary,
.qm-btn--ghost{
  background: var(--qm-blanc);
  color: var(--qm-encre);
  border: 1px solid var(--qm-bordure-forte);
  font-weight: 500;
}

.qm-btn--secondary:hover:not(:disabled),
.qm-btn--ghost:hover:not(:disabled){
  background: var(--qm-fond);
}

.qm-btn--success{
  background: var(--qm-signal-ok);
  border-color: var(--qm-signal-ok);
  color: var(--qm-blanc);
}

.qm-btn-icon{
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* =========================================================
   7) HEADER - GLASSMORPHISM
========================================================= */
.qm-skip{
  position:absolute;
  left:-999px;
  top: 16px;
  background: var(--qm-bleu-marque);
  color: var(--qm-blanc);
  padding: 12px 20px;
  border-radius: var(--qm-radius-sm);
  z-index: 9999;
  font-weight: 600;
  font-size: 14px;
}

.qm-skip:focus{
  left: 16px;
}

.qm-header{
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--qm-blanc);
  border-bottom: 1px solid var(--qm-brume);
}

.qm-nav{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 0;
}

.qm-brand{
  display:flex;
  align-items:center;
  gap: 14px;
  min-width: 240px;
}

.qm-brandMark{
  width: 42px;
  height: 42px;
  border-radius: var(--qm-radius-sm);
  background: var(--qm-bleu-marque);
  display: flex;
  align-items: center;
  justify-content: center;
}

.qm-brandMark::after{
  content: 'Q';
  color: var(--qm-blanc);
  font-weight: 800;
  font-size: 18px;
}

.qm-brandName{
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.02em;
  color: var(--foreground);
}

.qm-brandTag{
  font-size: 14px;
  color: var(--muted-foreground);
  font-weight: 500;
  margin-top: 2px;
}

.qm-navLinks{
  display:flex;
  align-items:center;
  gap: 6px;
  flex-wrap: wrap;
}

.qm-link{
  padding: 10px 16px;
  border-radius: var(--qm-radius-sm);
  color: var(--muted-foreground);
  font-weight: 500;
  font-size: 14px;
  transition: all 0.2s ease;
  position: relative;
}

.qm-link:hover{
  color: var(--foreground);
  background: var(--muted);
}

.qm-link[aria-current="page"]{
  color: var(--qm-primary);
  background: var(--qm-primary-light);
  font-weight: 600;
}

.qm-navCtas{
  display:flex;
  align-items:center;
  gap: 12px;
  flex-wrap: wrap;
}

/* =========================================================
   8) FOOTER - PREMIUM
========================================================= */
.qm-footer{
  border-top: 1px solid var(--border);
  margin-top: 100px;
  background: var(--qm-blanc);
  position: relative;
}

.qm-footerInner{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 48px;
  padding: 56px 0 40px;
}

.qm-footerTitle{
  font-weight: 700;
  font-size: 15px;
  margin: 0 0 16px 0;
  color: var(--foreground);
  letter-spacing: -0.01em;
}

.qm-footerP{
  margin: 0;
  color: var(--muted-foreground);
  line-height: 1.8;
  font-size: 14px;
  max-width: 320px;
}

.qm-footerLinks{
  display:grid;
  gap: 10px;
}

.qm-footerLink{
  color: var(--muted-foreground);
  font-size: 14px;
  font-weight: 500;
  border-radius: var(--qm-radius-sm);
  padding: 8px 12px;
  margin: -8px -12px;
  transition: all 0.2s ease;
}

.qm-footerLink:hover{
  color: var(--foreground);
  background: var(--muted);
}

.qm-footerBottom{
  border-top: 1px solid var(--border);
  padding: 24px 0;
  color: var(--muted-foreground);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* =========================================================
   9) CARTES — sobres ; une carte n'est pas cliquable, elle ne réagit pas au survol
========================================================= */
.qm-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--qm-radius);
  padding: 24px;
  box-shadow: var(--qm-shadow-card);
}

.qm-card--shadow{
  box-shadow: var(--qm-shadow-xl);
}

/* Chantier A (3-01) : un lien du texte se voit — Bleu Marque souligné (charte : « primaire, boutons, liens ») ; la
   règle de base « a{color:inherit} » le rendait identique au texte gris (« Mot de passe oublié ? · Créer un compte »). */
:is(.qm-card, .qm-lead, .qm-hero) a:not([class]){
  color: var(--qm-bleu-marque);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.qm-eyebrow{
  /* Lot R8 (D-R8-3) : plus aucun texte sous 14 px — le surtitre passe à 14 px, en minuscules avec initiale majuscule, en gris
     (texte secondaire de la charte), pour garder la hiérarchie sans alourdir. */
  font-size: 14px;
  font-weight: 700;
  color: var(--qm-muted);
  margin-bottom: 12px;
}

.qm-cardTitle{
  font-family: var(--qm-titre);
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 8px 0;
  letter-spacing: -0.01em;
}

.qm-cardP{
  color: var(--muted-foreground);
  line-height: 1.7;
  margin: 0;
  font-size: 14px;
}

/* =========================================================
   10) FORMULAIRES
========================================================= */
.qm-form{ display:grid; gap: 20px; }
.qm-field{ display:grid; gap: 8px; }

.qm-label{
  font-size: 14px;
  color: var(--foreground);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.qm-input, .qm-select, .qm-textarea{
  width: 100%;
  min-height: 44px;
  border-radius: var(--qm-radius-sm);
  border: 1px solid var(--qm-bordure-forte);
  background: var(--card);
  color: var(--foreground);
  padding: 10px 14px;
  font-family: var(--qm-font);
  font-size: 15px;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.qm-input:focus, .qm-select:focus, .qm-textarea:focus{
  outline: none;
  border-color: var(--qm-primary);
  box-shadow: var(--qm-focus);
}

.qm-input::placeholder{
  color: var(--qm-faint);
}

/* Chantier A (3-10) : les champs écrits sans classe dans un formulaire en carte (page Profil : identité, zone,
   capacité, références, moyens…) prennent l'apparence de .qm-input — 44 px de haut, police du corps, bord de la
   charte — au lieu du champ brut du navigateur (19 px, 13,3 px, bord « inset »). Cases à cocher et boutons exclus. */
form.qm-card :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="file"]), textarea, select):not(.qm-input):not(.qm-select):not(.qm-textarea){
  max-width: 100%;
  min-height: 44px;
  margin-top: 6px;
  border-radius: var(--qm-radius-sm);
  border: 1px solid var(--qm-bordure-forte);
  background: var(--qm-blanc);
  color: var(--qm-encre);
  padding: 10px 12px;
  font: 400 15px/1.4 var(--qm-corps);
}
form.qm-card textarea:not(.qm-textarea){ min-height: 88px; }
form.qm-card :is(input, textarea, select):not(.qm-input):not(.qm-select):not(.qm-textarea):focus{
  outline: none;
  border-color: var(--qm-bleu-marque);
  box-shadow: var(--qm-focus);
}
form.qm-card :is(input, textarea):read-only:not([type="checkbox"]):not([type="radio"]){ background: var(--qm-fond); color: var(--qm-ardoise); }
/* Le libellé d'un champ texte : au-dessus, en gras, avec de l'air sous chaque champ. */
form.qm-card label:has(> input:not([type="checkbox"]):not([type="radio"]), > textarea, > select){
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--qm-encre);
  margin-bottom: 8px;
}
form.qm-card label:has(> input:not([type="checkbox"]):not([type="radio"]), > textarea, > select) :is(input, textarea, select){ font-weight: 400; }
form.qm-card h3{ font-family: var(--qm-titre); font-weight: 600; font-size: 18px; margin-bottom: 10px; }

/* =========================================================
   11) PAGE HEADER - PREMIUM
========================================================= */
.qm-page-header{
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}

.qm-page-title{
  font-family: var(--qm-titre);
  font-size: clamp(28px, 4vw, 36px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--foreground);
  margin: 0 0 8px 0;
}

.qm-page-subtitle{
  font-size: 16px;
  color: var(--muted-foreground);
  margin: 0;
  line-height: 1.7;
}

/* =========================================================
   12) BANDEAUX D'ÉTAT — charte : vert de signalisation pour « fait », fond accentué et orange lisible pour
   « à voir » ; jamais de rouge (l'ancien « error » prend le même codage que « warn » : intensité, pas alarme)
========================================================= */
.qm-status{
  margin-bottom: 24px;
}

.qm-status-banner{
  padding: 12px 16px;
  border-radius: var(--qm-radius-sm);
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 14px;
  line-height: 1.6;
}
.qm-status-banner[hidden]{ display: none; } /* 3-05 — redit ici, au plus près de la règle qui l'emportait */

.qm-status-banner.qm-status-ok{
  background: var(--qm-signal-ok-fond);
  border: 1px solid var(--qm-brume);
  border-left: 3px solid var(--qm-signal-ok);
  color: var(--qm-encre);
}

.qm-status-banner.qm-status-warn,
.qm-status-banner.qm-status-error{
  background: var(--qm-fond-accent);
  border: 1px solid var(--qm-brume);
  border-left: 3px solid var(--qm-orange-signal);
  color: var(--qm-encre);
}

.qm-status-icon{
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
}

/* Success Status Card */
.qm-status-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--qm-radius);
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: var(--qm-shadow-card);
  margin-bottom: 24px;
}

.qm-status-card-icon{
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--qm-success-light);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.qm-status-card-icon svg{
  width: 24px;
  height: 24px;
  color: var(--qm-success);
}

.qm-status-card-content{
  flex: 1;
}

.qm-status-card-title{
  font-weight: 700;
  font-size: 16px;
  color: var(--foreground);
  margin-bottom: 4px;
}

.qm-status-card-subtitle{
  font-size: 14px;
  color: var(--muted-foreground);
}

.qm-status-card-id{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
  background: var(--muted);
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--muted-foreground);
  font-weight: 500;
}

/* =========================================================
   13) UPLOAD SECTION - PREMIUM
========================================================= */
.qm-upload-section{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--qm-radius);
  padding: 28px;
  margin-bottom: 24px;
  box-shadow: var(--qm-shadow-card);
}

.qm-section-header{
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.qm-section-icon{
  width: 28px;
  height: 28px;
  color: var(--qm-primary);
  padding: 6px;
  background: var(--qm-primary-light);
  border-radius: 10px;
}

.qm-section-title{
  font-size: 17px;
  font-weight: 700;
  color: var(--foreground);
  margin: 0;
  letter-spacing: -0.01em;
}

/* Upload Grid */
.qm-upload-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

@media (max-width: 768px){
  .qm-upload-grid { grid-template-columns: 1fr; }
}

/* Upload Zone - Premium */
.qm-upload-zone{
  position: relative;
  border: 2px dashed var(--border);
  border-radius: var(--qm-radius);
  padding: 32px 24px;
  text-align: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: linear-gradient(180deg, var(--card) 0%, var(--muted) 100%);
  cursor: pointer;
}

.qm-upload-zone:hover{
  border-color: var(--qm-primary);
  background: linear-gradient(180deg, var(--card) 0%, var(--qm-primary-light) 100%);
  box-shadow: var(--qm-shadow-md), var(--qm-focus);
}

.qm-upload-zone.has-file{
  border-color: var(--qm-success);
  border-style: solid;
  background: linear-gradient(180deg, var(--card) 0%, var(--qm-success-light) 100%);
}

.qm-upload-zone-icon{
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  padding: 14px;
  background: var(--muted);
  border-radius: 16px;
  color: var(--muted-foreground);
  transition: all 0.3s ease;
}

.qm-upload-zone:hover .qm-upload-zone-icon{
  background: var(--qm-primary-light);
  color: var(--qm-primary);
  transform: scale(1.05);
}

.qm-upload-zone.has-file .qm-upload-zone-icon{
  background: var(--qm-success-light);
  color: var(--qm-success);
}

.qm-upload-zone-title{
  font-size: 16px;
  font-weight: 700;
  color: var(--foreground);
  margin-bottom: 6px;
}

.qm-upload-zone-subtitle{
  font-size: 14px;
  color: var(--muted-foreground);
}

.qm-upload-zone-input{
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.qm-upload-zone-filecount{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 8px 16px;
  background: var(--qm-success);
  color: var(--qm-blanc);
  font-size: 14px;
  font-weight: 600;
  border-radius: 999px;
}

/* Hint */
.qm-hint{
  font-size: 14px;
  color: var(--muted-foreground);
  line-height: 1.5;
}

/* =========================================================
   14) RESULTS SECTION - PREMIUM
========================================================= */
/* Sécurisé : visible par défaut, animation optionnelle */
.qm-results-section{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--qm-radius);
  overflow: hidden;
  margin-bottom: 24px;
  box-shadow: var(--qm-shadow-card);
}

.qm-results-section.is-animated{
  animation: qm-fadeIn 0.5s ease forwards;
  opacity: 0;
}

@keyframes qm-fadeIn{
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.qm-results-header{
  background: linear-gradient(180deg, var(--muted) 0%, transparent 100%);
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
}

.qm-results-title{
  font-size: 17px;
  font-weight: 700;
  color: var(--foreground);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  letter-spacing: -0.01em;
}

.qm-results-body{
  padding: 24px;
}

/* Subsections */
.qm-subsection{
  margin-bottom: 28px;
}

.qm-subsection:last-child{
  margin-bottom: 0;
}

.qm-subsection-title{
  font-size: 14px; /* Lot R8 (D-R8-3) : 14 px, minuscules avec initiale majuscule */
  font-weight: 700;
  color: var(--muted-foreground);
  margin: 0 0 16px 0;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--muted);
  display: flex;
  align-items: center;
  gap: 10px;
}

.qm-subsection-title-icon{
  width: 18px;
  height: 18px;
  color: var(--qm-primary);
}

/* Result Block - Premium */
.qm-result-block{
  background: linear-gradient(180deg, var(--card) 0%, var(--muted) 100%);
  border: 1px solid var(--border);
  border-radius: var(--qm-radius-sm);
  padding: 20px;
}

/* Empty message */
.qm-empty-message{
  color: var(--muted-foreground);
  font-style: italic;
  padding: 16px;
  text-align: center;
}

/* =========================================================
   15) DOC CARDS - PREMIUM
========================================================= */
.qm-doc-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--qm-radius-sm);
  padding: 20px;
  margin-bottom: 12px;
  transition: all 0.25s ease;
  box-shadow: var(--qm-shadow-xs);
}

.qm-doc-card:last-child{
  margin-bottom: 0;
}

.qm-doc-card:hover{
  border-color: var(--qm-primary);
  box-shadow: var(--qm-shadow-md);
  transform: translateX(4px);
}

.qm-doc-title{
  font-size: 15px;
  font-weight: 700;
  color: var(--foreground);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.qm-doc-title-icon{
  width: 20px;
  height: 20px;
  color: var(--qm-danger);
  padding: 4px;
  background: var(--qm-danger-light);
  border-radius: 6px;
}

/* =========================================================
   16) VERDICT CARD - PREMIUM
========================================================= */
.qm-verdict-card{
  background: var(--qm-fond);
  border: 1px solid var(--qm-brume);
  border-radius: var(--qm-radius-sm);
  padding: 24px;
  box-shadow: var(--qm-shadow-sm);
}

.qm-verdict-header{
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--qm-brume);
}

.qm-verdict-badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.qm-verdict-badge.qm-verdict-go{
  background: var(--qm-gradient-success);
  color: var(--qm-blanc);
}

.qm-verdict-badge.qm-verdict-nogo{
  background: var(--qm-gradient-danger);
  color: var(--qm-blanc);
}

.qm-verdict-badge.qm-verdict-maybe{
  background: var(--qm-fond-accent);
  color: var(--qm-accent-texte);
}

.qm-verdict-score{
  font-size: 14px;
  color: var(--muted-foreground);
  font-weight: 500;
}

/* Verdict Section */
.qm-verdict-section{
  margin-top: 20px;
}

.qm-verdict-section-title{
  font-size: 14px;
  font-weight: 700;
  color: var(--foreground);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.qm-verdict-section-title svg{
  width: 16px;
  height: 16px;
  color: var(--qm-primary);
}

.qm-verdict-list{
  margin: 0;
  padding-left: 20px;
  line-height: 1.8;
}

.qm-verdict-list li{
  margin: 8px 0;
  color: var(--muted-foreground);
}

/* =========================================================
   17) DOWNLOADS - PREMIUM
========================================================= */
.qm-downloads-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}

.qm-download-card{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 20px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--qm-radius-sm);
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  box-shadow: var(--qm-shadow-xs);
}

.qm-download-card:hover{
  border-color: var(--qm-primary);
  background: linear-gradient(180deg, var(--card) 0%, var(--qm-primary-light) 100%);
  transform: translateY(-4px);
  box-shadow: var(--qm-shadow-lg);
}

.qm-download-icon{
  width: 52px;
  height: 52px;
  margin-bottom: 14px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

.qm-download-card:hover .qm-download-icon{
  transform: scale(1.1);
}

.qm-download-icon.qm-download-icon-word{
  background: var(--qm-bleu-marque);
  color: var(--qm-blanc);
}

.qm-download-icon.qm-download-icon-pdf{
  background: var(--qm-bleu-nuit);
  color: var(--qm-blanc);
}

.qm-download-icon.qm-download-icon-excel{
  background: var(--qm-signal-ok);
  color: var(--qm-blanc);
}

.qm-download-label{
  font-size: 14px;
  font-weight: 600;
  color: var(--foreground);
  text-align: center;
}

.qm-download-card:hover .qm-download-label{
  color: var(--qm-primary);
}

/* =========================================================
   18) SCROLLBOX - PREMIUM
========================================================= */
.qm-scrollbox{
  max-height: 280px;
  overflow: auto;
  padding: 16px;
  border-radius: var(--qm-radius-sm);
  background: var(--muted);
  border: 1px solid var(--border);
}

.qm-scrollbox.qm-scrollbox-lg{
  max-height: 400px;
}

.qm-scrollbox::-webkit-scrollbar{
  width: 6px;
}

.qm-scrollbox::-webkit-scrollbar-track{
  background: transparent;
}

.qm-scrollbox::-webkit-scrollbar-thumb{
  border-radius: 999px;
  background: var(--border);
}

.qm-scrollbox::-webkit-scrollbar-thumb:hover{
  background: var(--muted-foreground);
}

/* =========================================================
   19) RC KEY/VALUE GRID
========================================================= */
.qm-kv{
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 12px 20px;
  margin-top: 16px;
}

.qm-kv .k{
  font-weight: 600;
  color: var(--foreground);
  font-size: 14px;
  word-break: break-word;
}

.qm-kv .v{
  word-break: break-word;
  line-height: 1.6;
  color: var(--muted-foreground);
  font-size: 14px;
}

.qm-kv .v ul{
  margin: 0;
  padding-left: 18px;
}

/* =========================================================
   20) EXCEL STATS - PREMIUM
========================================================= */
.qm-excel-stats{
  display: flex;
  gap: 32px;
  margin-bottom: 20px;
}

.qm-excel-stat{
  display: flex;
  flex-direction: column;
}

.qm-excel-stat-value{
  font-size: 32px;
  font-weight: 800;
  background: var(--qm-gradient-success);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
}

.qm-excel-stat-label{
  font-size: 14px;
  color: var(--muted-foreground);
  font-weight: 600;
  margin-top: 6px;
}

/* =========================================================
   21) NEXT STEP CTA - PREMIUM
========================================================= */
.qm-next-step{
  background: var(--qm-signal-ok-fond);
  border: 1px solid var(--qm-brume);
  border-radius: var(--qm-radius-sm);
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  box-shadow: var(--qm-shadow-md);
}

.qm-next-step-text{
  font-size: 15px;
  color: var(--qm-signal-ok);
  font-weight: 500;
}

.qm-next-step-text strong{
  font-weight: 700;
}

/* =========================================================
   22) LOADING MODAL - PREMIUM
========================================================= */
.qm-loading-overlay{
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(8px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.qm-loading-overlay.active{
  opacity: 1;
  visibility: visible;
}

.qm-loading-modal{
  background: var(--card);
  border-radius: var(--qm-radius);
  padding: 40px 48px;
  text-align: center;
  box-shadow: var(--qm-shadow-xl);
  max-width: 400px;
  width: 90%;
  transform: scale(0.9) translateY(20px);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.qm-loading-overlay.active .qm-loading-modal{
  transform: scale(1) translateY(0);
}

.qm-loading-spinner{
  width: 64px;
  height: 64px;
  margin: 0 auto 24px;
  position: relative;
}

.qm-loading-spinner::before,
.qm-loading-spinner::after{
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid transparent;
}

.qm-loading-spinner::before{
  border-top-color: var(--qm-primary);
  animation: qm-spin 1s linear infinite;
}

.qm-loading-spinner::after{
  border-bottom-color: var(--qm-orange-signal);
  animation: qm-spin 1.5s linear infinite reverse;
}

@keyframes qm-spin{
  to { transform: rotate(360deg); }
}

.qm-loading-title{
  font-size: 18px;
  font-weight: 700;
  color: var(--foreground);
  margin-bottom: 8px;
}

.qm-loading-subtitle{
  font-size: 14px;
  color: var(--muted-foreground);
  margin-bottom: 20px;
}

.qm-loading-steps{
  text-align: left;
  background: var(--muted);
  border-radius: var(--qm-radius-sm);
  padding: 16px;
}

.qm-loading-step{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  font-size: 14px;
  color: var(--muted-foreground);
}

.qm-loading-step.active{
  color: var(--foreground);
  font-weight: 600;
}

.qm-loading-step.completed{
  color: var(--qm-success);
}

.qm-loading-step-icon{
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.qm-loading-step.active .qm-loading-step-icon{
  border-color: var(--qm-primary);
  background: var(--qm-primary-light);
}

.qm-loading-step.completed .qm-loading-step-icon{
  border-color: var(--qm-success);
  background: var(--qm-success);
  color: var(--qm-blanc);
}

/* =========================================================
   23) FORMATAGE CONTENU - PREMIUM (NOUVEAU)
========================================================= */
.qm-content-formatted{
  line-height: 1.6;
  color: var(--foreground);
  font-size: 14px;
}

.qm-content-formatted p{
  margin: 0 0 12px 0;
  line-height: 1.6;
}

.qm-content-formatted p:last-child{
  margin-bottom: 0;
}

.qm-content-formatted ul{
  margin: 0 0 12px 0;
  padding-left: 20px;
  list-style-type: disc;
}

.qm-content-formatted ul:last-child{
  margin-bottom: 0;
}

.qm-content-formatted ul li{
  margin: 4px 0;
  line-height: 1.5;
  color: var(--muted-foreground);
}

.qm-content-formatted ol{
  margin: 0 0 12px 0;
  padding-left: 20px;
  list-style-type: decimal;
}

.qm-content-formatted ol:last-child{
  margin-bottom: 0;
}

.qm-content-formatted ol li{
  margin: 4px 0;
  line-height: 1.5;
  color: var(--muted-foreground);
}

.qm-content-formatted .qm-list-item{
  display: block;
  margin: 4px 0;
  padding-left: 14px;
  position: relative;
  line-height: 1.5;
}

.qm-content-formatted .qm-list-item::before{
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  background: var(--qm-primary);
  border-radius: 50%;
}

.qm-content-formatted .qm-content-title,
.qm-content-formatted h4{
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--foreground);
  margin: 14px 0 6px 0;
  line-height: 1.4;
}

.qm-content-formatted .qm-content-title:first-child,
.qm-content-formatted h4:first-child{
  margin-top: 0;
}

.qm-content-formatted h4 + p,
.qm-content-formatted .qm-content-title + p{
  margin-top: 4px;
}

.qm-content-formatted strong{
  font-weight: 700;
  color: var(--foreground);
}

.qm-content-formatted a{
  color: var(--qm-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.qm-content-formatted a:hover{
  color: var(--qm-primary-hover);
}

.qm-content-formatted .qm-empty{
  color: var(--muted-foreground);
  font-style: italic;
  text-align: center;
  padding: 20px;
}

.qm-content-formatted table{
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  font-size: 14px;
}

.qm-content-formatted th,
.qm-content-formatted td{
  padding: 12px 16px;
  border: 1px solid var(--border);
  text-align: left;
}

.qm-content-formatted th{
  background: var(--muted);
  font-weight: 700;
  color: var(--foreground);
}

.qm-content-formatted td{
  color: var(--muted-foreground);
}

.qm-content-formatted code{
  background: var(--muted);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 14px;
  color: var(--qm-primary);
}

.qm-content-formatted pre{
  background: var(--qm-encre);
  color: var(--qm-brume);
  padding: 16px;
  border-radius: var(--qm-radius-sm);
  overflow-x: auto;
  margin: 16px 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 14px;
  line-height: 1.6;
}

.qm-content-formatted blockquote{
  border-left: 4px solid var(--qm-primary);
  padding-left: 16px;
  margin: 16px 0;
  color: var(--muted-foreground);
  font-style: italic;
}

.qm-content-formatted hr{
  border: none;
  border-top: 1px solid var(--border);
  margin: 20px 0;
}

/* =========================================================
   24) RESPONSIVE - PREMIUM
========================================================= */
@media (max-width: 980px){
  .qm-footerInner{
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }

  .qm-footerInner > div:first-child{
    grid-column: 1 / -1;
  }
}

@media (max-width: 768px){
  .qm-main{ padding: 24px 0 60px; }

  .qm-navLinks{ display:none; }

  .qm-footerInner{
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .qm-footerInner > div:first-child{
    grid-column: auto;
  }

  .qm-footerBottom{
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }

  .qm-next-step{
    flex-direction: column;
    text-align: center;
  }

  .qm-excel-stats{
    flex-direction: column;
    gap: 16px;
  }

  .qm-kv{
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .qm-verdict-header{
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

@media (max-width: 520px){
  /* Lot AF : la gouttière mobile vit dans LA variable — les pages au pleine-largeur
     (margin: 0 calc(-1 * var(--qm-pad))) la suivent au lieu de déborder de 8 px. */
  :root{ --qm-pad: 16px; }
  .qm-container{ padding: 0 var(--qm-pad); }

  .qm-page-header{
    margin-bottom: 20px;
    padding-bottom: 16px;
  }

  .qm-upload-section{
    padding: 20px;
  }

  .qm-upload-zone{
    padding: 24px 16px;
  }

  .qm-results-body{
    padding: 16px;
  }

  .qm-btn{
    width: 100%;
    justify-content: center;
  }

  .qm-actions-row{
    gap: 10px;
  }

  .qm-downloads-grid{
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   24 bis) CIBLES TACTILES — lot R12 (n° 112)
   Sous 768 px de large, tout bouton ou lien-bouton du contenu mesure 44 px de haut au moins (« Pourquoi cet avis ? » faisait
   21 px, « Marquer comme vu » 28 px). LA règle que vérifie npm run controle:visuel (lib/controle/ciblesTactiles.ts) ; un
   lien-bouton (fond ou cadre visible) devient une boîte en ligne pour que la hauteur s'applique. Le texte reste centré.
========================================================= */
@media (max-width: 767.98px){
  #content button,
  #content [role="button"],
  #content input[type="submit"],
  #content input[type="button"],
  #content input[type="reset"]{
    min-height: 44px;
  }
  #content a.btn,
  #content a.qm-btn,
  #content a.bouton,
  #content a.bouton-sobre,
  #content a.a-lire,
  #content a.agenda-btn,
  #content a.lire{
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* =========================================================
   25) PRINT STYLES
========================================================= */
@media print{
  .no-print { display: none !important; }
  .qm-header, .qm-footer { display: none !important; }
  body * { visibility: hidden !important; }
  #print-area, #print-area * { visibility: visible !important; }
  #print-area { position: absolute; left: 0; top: 0; width: 100%; }
}

@page { size: A4; margin: 12mm; }
/* =========================================================
   26) TABLEAUX LARGES — règle commune du lot AF (AF-2/AF-3)
   Un tableau plus large que son cadre DÉFILE horizontalement
   dans son conteneur, avec un indice visible : ombres de bord
   (présentes seulement quand du contenu est caché) + une ligne
   d'indice posée par /scripts/qmDefilable.js quand ça déborde.
   Aucun contenu coupé sans moyen de le voir.
========================================================= */
.qm-defilable{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  /* Ombres de défilement : visibles uniquement quand une partie du tableau est hors cadre. */
  background:
    linear-gradient(90deg, var(--qm-panel) 30%, rgba(255,255,255,0)) left / 36px 100% no-repeat local,
    linear-gradient(270deg, var(--qm-panel) 30%, rgba(255,255,255,0)) right / 36px 100% no-repeat local,
    linear-gradient(90deg, rgba(15,43,76,.16), rgba(255,255,255,0)) left / 12px 100% no-repeat scroll,
    linear-gradient(270deg, rgba(15,43,76,.16), rgba(255,255,255,0)) right / 12px 100% no-repeat scroll;
}
/* Par défaut le tableau garde sa largeur naturelle : plus large que le cadre, il défile.
   Le modificateur --large impose une largeur minimale aux tableaux à texte (légaux, lots) :
   sans lui, l'écrasement à 390 px fait des colonnes d'un mot et des cellules de 250 px de haut. */
.qm-defilable--large > table{ min-width: 560px; }
.qm-defilable-indice{
  display: none;
  font-size: 14px;
  color: var(--qm-muted);
  margin: 0 0 4px;
}
.qm-defilable-indice.visible{ display: block; }

/* Lot R8 (D-R8-3, décision d'Hassen du 12/10/2026) : aucun texte sous 14 px — un <small> (« plus petit » du navigateur :
   11 à 13 px selon son parent) s'écrit à 14 px ; une page peut le grossir, jamais le réduire en dessous. */
small{ font-size: 14px; }