/* ============================================================================= *
 *  L'ÉCOLE IMMO DURABLE — DESIGN SYSTEM / CAHIER DES CHARGES VISUEL
 * ============================================================================= *
 *
 *  OBJET
 *  -----
 *  Ce fichier définit l'ADN visuel de la marque (couleurs, typographie,
 *  espacements, composants) tel qu'utilisé sur la landing immobilier-durable.com.
 *  Il est pensé pour être RÉUTILISÉ tel quel sur n'importe quelle page satellite
 *  (outils, formulaires, espace membre, e-mails HTML, etc.) afin de garantir une
 *  cohérence de marque parfaite. Un humain OU une autre IA doit pouvoir repartir
 *  de ce fichier sans autre contexte.
 *
 *  PRINCIPE DIRECTEUR
 *  ------------------
 *  Dark, sobre, premium. Fond quasi-noir, texte blanc, UN SEUL accent : le vert
 *  menthe (#3FE3A6). L'accent est rare et intentionnel (titres-clés, boutons,
 *  focus, filets) — jamais utilisé en aplat sur de grandes surfaces. Beaucoup
 *  d'air (sections aérées), coins arrondis, micro-animations discrètes au survol.
 *
 *  RÈGLES D'OR (à respecter pour rester "on brand")
 *  ------------------------------------------------
 *   1. Le menthe est un ACCENT, pas une couleur de fond. Sur menthe plein, le
 *      texte est le vert très foncé --on-mint (#04130D), jamais blanc.
 *   2. Deux polices seulement : Sora (titres, boutons, surtitres) + Inter (texte).
 *   3. Titres = Sora, interlignage serré (1.08) et letter-spacing négatif (-.02em).
 *   4. Bordures = blanc à très faible opacité (--line / --line-soft), jamais gris plein.
 *   5. Rayons généreux : 100px pour les boutons (pilules), 16px pour les cartes.
 *   6. Animations : douces (.2s–.3s ease), légers translate au survol, halos menthe.
 *   7. On ne multiplie pas les couleurs : pas de rouge/bleu/orange décoratifs.
 *      (Le rouge n'apparaît que pour un astérisque de champ obligatoire.)
 *
 *  PALETTE (hex — usage)
 *  ---------------------
 *   #06070A  ink        Fond principal (quasi-noir bleuté)
 *   #0C0E13  ink-2       Fond secondaire / sections alternées / encarts
 *   #101218  surface     Fond des champs de formulaire
 *   #14171F  card        Fond des cartes
 *   #FFFFFF  paper       Texte principal / titres
 *   #9AA3AD  mist        Texte secondaire ("muted")
 *   #6A727C  mist-dim    Texte tertiaire / placeholders / mentions
 *   #3FE3A6  mint        ACCENT unique (surtitres, boutons, focus, filets)
 *   #1FB985  mint-deep   Menthe foncé (dégradés, survols)
 *   #04130D  on-mint     Texte posé SUR un fond menthe plein
 *   rgba(255,255,255,.10) line       Bordures standard
 *   rgba(255,255,255,.06) line-soft  Séparateurs discrets
 *   #F2777A  danger      Uniquement pour l'astérisque "champ requis"
 *
 *  TYPOGRAPHIE
 *  -----------
 *   Sora   : 400 / 500 / 600 / 700 / 800  → titres, .eyebrow, .tag, boutons
 *   Inter  : 400 / 500 / 600              → corps de texte
 *   Corps  : 17px, line-height 1.6
 *   Titres : line-height 1.08, letter-spacing -.02em
 *   Échelle (clamp mini→maxi) :
 *     Display/Hero   clamp(40px, 6vw, 72px)   poids 800
 *     H2             clamp(28px, 3.6vw, 42px) poids 700
 *     H3             clamp(20px, 2.6vw, 28px) poids 700
 *     Eyebrow/surtitre 12.5px, .22em, MAJ, menthe
 *
 *  ESPACEMENTS (rythme vertical des sections)
 *  ------------------------------------------
 *   Section standard : 96px haut/bas  (.block)
 *   Section resserrée: 72px           (.block-tight)
 *   Largeur max contenu : 1120px (--maxw) ; colonne de lecture/formulaire : 760px
 *   Gouttière de page : 24px
 *
 *  DÉPENDANCE POLICES — AUTO-HÉBERGÉES (Charte §10.6 ; CSP font-src 'self')
 *  ----------------------------------------------------------------------
 *   Les polices sont servies EN PROPRE (pas de Google Fonts : la CSP du portail
 *   bloque les tiers, et la souveraineté l'exige). Déposer Sora-Variable.woff2
 *   et Inter-Variable.woff2 dans /fonts. Les @font-face sont déclarés juste
 *   sous cet en-tête. NE PAS ajouter de <link> vers fonts.googleapis.com/gstatic.com.
 *
 * ============================================================================= */


/* ============================================================================= *
 *  0. POLICES AUTO-HÉBERGÉES (Charte §10.6)
 *  -----------------------------------------------------------------------------
 *  Fichiers .woff2 à placer dans /fonts (licence SIL OFL, redistribuables).
 *  Versions VARIABLES recommandées (2 fichiers couvrant toutes les graisses).
 *  Où les récupérer : dépôt « Sora », rsms.me/inter, ou google-webfonts-helper.
 * ============================================================================= */

@font-face {
  font-family: 'Sora';
  src: url('/fonts/Sora-Variable.woff2') format('woff2-variations'),
       url('/fonts/Sora-Variable.woff2') format('woff2');
  font-weight: 100 800;      /* couvre 400/500/600/700/800 */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-Variable.woff2') format('woff2-variations'),
       url('/fonts/Inter-Variable.woff2') format('woff2');
  font-weight: 100 900;      /* couvre 400/500/600 */
  font-style: normal;
  font-display: swap;
}
/* (Alternative : un @font-face par graisse — Sora-400.woff2, etc. — si tu ne
    veux pas de police variable.) */


/* ============================================================================= *
 *  1. TOKENS  —  variables de design (source unique de vérité)
 *  -----------------------------------------------------------------------------
 *  Modifier une valeur ICI la répercute partout. Ne jamais coder une couleur
 *  "en dur" dans un composant : toujours passer par une variable.
 * ============================================================================= */
:root {
  /* Active le rendu natif sombre des contrôles (dates, selects, scrollbars) */
  color-scheme: dark;

  /* — Fonds — */
  --ink:        #06070A;   /* fond principal */
  --ink-2:      #0C0E13;   /* fond secondaire / encarts / sections alt */
  --surface:    #101218;   /* fond des champs de saisie */
  --card:       #14171F;   /* fond des cartes */

  /* — Textes — */
  --paper:      #FFFFFF;   /* texte principal + titres */
  --mist:       #9AA3AD;   /* texte secondaire (.muted) */
  --mist-dim:   #6A727C;   /* texte tertiaire / placeholders */

  /* — Accent unique : menthe — */
  --mint:       #3FE3A6;   /* accent principal */
  --mint-deep:  #1FB985;   /* menthe foncé (dégradés, survols) */
  --on-mint:    #04130D;   /* texte SUR fond menthe plein */

  /* — Accent dérivé (halos, bordures teintées) — */
  --mint-glow-a: rgba(63,227,166,.08);  /* haut de dégradé d'encart menthe */
  --mint-glow-b: rgba(63,227,166,.02);  /* bas de dégradé d'encart menthe */
  --mint-border: rgba(63,227,166,.22);  /* bordure teintée menthe (encarts) */
  --mint-hover:  rgba(63,227,166,.35);  /* bordure de carte au survol */
  --mint-ring:   rgba(63,227,166,.18);  /* halo de focus des champs */

  /* — Lignes / séparateurs (blanc très transparent) — */
  --line:       rgba(255,255,255,.10);  /* bordures standard */
  --line-soft:  rgba(255,255,255,.06);  /* séparateurs discrets */

  /* — Sémantique — */
  --danger:     #F2777A;   /* astérisque "champ requis" uniquement */

  /* — Rayons — */
  --radius:      16px;     /* cartes */
  --radius-lg:   22px;     /* grands encarts (.panel) */
  --radius-md:   18px;     /* encarts moyens (.insight) */
  --radius-field:11px;     /* champs de formulaire */
  --radius-pill: 100px;    /* boutons, puces, tags */

  /* — Largeurs — */
  --maxw:        1120px;   /* largeur max d'une section large */
  --maxw-read:   760px;    /* colonne de lecture / formulaire */

  /* — Polices — */
  --font-title:  'Sora', system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:   'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;

  /* — Transitions types — */
  --t-fast: .18s ease;
  --t-med:  .25s ease;
  --t-slow: .3s ease;
}


/* ============================================================================= *
 *  2. RESET & BASE
 * ============================================================================= */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; transition: color var(--t-med); }
a:hover { color: var(--mint); }

/* Sélection de texte teintée marque */
::selection { background: var(--mint); color: var(--on-mint); }


/* ============================================================================= *
 *  3. TYPOGRAPHIE
 *  -----------------------------------------------------------------------------
 *  Tous les titres passent en Sora, interligne serré, letter-spacing négatif.
 *  Utiliser .display pour un très grand titre (hero), sinon h1..h4.
 * ============================================================================= */
h1, h2, h3, h4, .display {
  font-family: var(--font-title);
  line-height: 1.08;
  letter-spacing: -.02em;
  font-weight: 700;
  color: var(--paper);
}

/* Très grand titre (hero) — poids extra-bold */
.display {
  font-weight: 800;
  font-size: clamp(40px, 6vw, 72px);
}

/* Tailles de titres recommandées (fluides) */
h1 { font-size: clamp(40px, 6vw, 72px); font-weight: 800; }
h2 { font-size: clamp(28px, 3.6vw, 42px); }
h3 { font-size: clamp(20px, 2.6vw, 28px); }
h4 { font-size: 1.15rem; }

/* Accent menthe posé dans un titre (ex. dernière ligne d'un hero) */
.accent { color: var(--mint); }

/* Texte secondaire */
.muted { color: var(--mist); }

/* SURTITRE ("eyebrow") — petite étiquette au-dessus d'un titre.
   Signature forte de la marque : Sora, MAJ, très espacé, menthe,
   précédé d'un petit tiret menthe. */
.eyebrow {
  font-family: var(--font-title);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--mint);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
/* Trait menthe retiré : le tiret « — » est déjà présent dans le texte des surtitres. */
.eyebrow::before { content: none; }

/* TAG — variante de surtitre sans tiret (ex. au-dessus d'une carte) */
.tag {
  font-family: var(--font-title);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mint);
  display: block;
  margin-bottom: 12px;
}


/* ============================================================================= *
 *  4. LAYOUT  —  conteneurs & rythme des sections
 * ============================================================================= */

/* Conteneur centré, largeur max, gouttières latérales */
.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

/* Variante colonne de lecture (articles, formulaires) */
.wrap-read {
  max-width: var(--maxw-read);
  margin: 0 auto;
  padding: 0 24px;
}

section { position: relative; }

/* Rythme vertical des sections */
.block        { padding: 96px 0; }   /* section standard */
.block-tight  { padding: 72px 0; }   /* section resserrée */

/* Fond alterné : léger éclaircissement au centre pour rythmer la page */
.section-alt {
  background: linear-gradient(180deg,
    var(--ink) 0%, var(--ink-2) 16%, var(--ink-2) 84%, var(--ink) 100%);
}

/* Halo d'ambiance menthe (à poser sur un conteneur en position:relative,
   typiquement en haut de page). Purement décoratif. */
.glow-top {
  background:
    radial-gradient(1100px 520px at 50% -8%, var(--mint-glow-a), transparent 60%),
    var(--ink);
}

/* Séparateur fin */
.divider { height: 1px; background: var(--line-soft); border: 0; }

/* Grilles utilitaires (3 colonnes → 1 sur mobile, voir §9 responsive) */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }


/* ============================================================================= *
 *  5. BOUTONS
 *  -----------------------------------------------------------------------------
 *  Base .btn (forme pilule) + variantes .btn-primary (menthe plein) et
 *  .btn-ghost (contour). Toujours en Sora 600.
 * ============================================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 15.5px;
  padding: 15px 28px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  border: 0;
  transition: transform var(--t-med), box-shadow var(--t-med), background var(--t-med), color var(--t-med);
}

/* Bouton principal : menthe plein, texte vert très foncé, halo au survol */
.btn-primary {
  background: var(--mint);
  color: var(--on-mint);
  box-shadow: 0 0 0 0 rgba(63,227,166,.45);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 40px -10px rgba(63,227,166,.55);
}
.btn-primary:active { transform: translateY(0); }
.btn-primary:disabled { opacity: .55; cursor: wait; transform: none; box-shadow: none; }

/* Bouton secondaire : transparent, contour discret → devient menthe au survol */
.btn-ghost {
  background: transparent;
  color: var(--paper);
  border: 1px solid var(--line);
}
.btn-ghost:hover { border-color: var(--mint); color: var(--mint); }

/* Focus clavier visible et accessible sur tous les boutons */
.btn:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 3px;
}


/* ============================================================================= *
 *  6. CARTES & ENCARTS
 *  -----------------------------------------------------------------------------
 *  .card          → carte standard (léger lift + bordure menthe au survol)
 *  .card-glow     → carte "accent" avec dégradé menthe subtil
 *  .insight       → encart mis en avant (dégradé menthe, bordure teintée)
 *  .panel         → grand bloc calme (fond ink-2), pour contenu dense
 * ============================================================================= */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px;
  transition: transform var(--t-slow), border-color var(--t-slow);
}
.card:hover {
  transform: translateY(-4px);
  border-color: var(--mint-hover);
}

/* Carte accentuée : dégradé menthe très léger + bordure teintée */
.card-glow {
  background: linear-gradient(140deg, var(--mint-glow-a), var(--mint-glow-b));
  border-color: var(--mint-border);
}

/* Encart "insight" : pour mettre en valeur une info clé */
.insight {
  background: linear-gradient(140deg, var(--mint-glow-a), var(--mint-glow-b));
  border: 1px solid var(--mint-border);
  border-radius: var(--radius-md);
  padding: 38px;
  margin: 40px 0;
}

/* Grand panneau calme (contenu dense, blocs "à propos", etc.) */
.panel {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 48px;
}


/* ============================================================================= *
 *  7. PUCES / BADGES / LOGOS
 * ============================================================================= */

/* Petite puce menthe (numéro d'article, label court) */
.pill {
  display: inline-block;
  font-family: var(--font-title);
  font-size: .78rem;
  font-weight: 600;
  color: var(--mint);
  background: rgba(63,227,166,.12);
  border: 1px solid var(--mint-border);
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

/* Emplacement logo presse / partenaire (hauteur fixe, léger fondu) */
.press-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  opacity: .92;
  transition: opacity var(--t-fast);
}
.press-logo:hover { opacity: 1; }


/* ============================================================================= *
 *  8. FORMULAIRES
 *  -----------------------------------------------------------------------------
 *  Champs sur fond sombre, bordure discrète, focus menthe (halo).
 *  Cases/radios en accent menthe. Prévu pour un rendu impeccable en dark.
 * ============================================================================= */

/* Libellé de champ */
.label, label {
  font-size: .86rem;
  font-weight: 500;
  color: var(--paper);
}

/* Astérisque champ obligatoire */
.req { color: var(--danger); }

/* Mention "facultatif" / annotation discrète */
.optional {
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--mist-dim);
  font-size: .78rem;
}

/* Saisies texte, nombre, date, listes, zones de texte */
.input,
input[type="text"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="date"],
select,
textarea {
  font-family: var(--font-body);
  font-size: .96rem;
  width: 100%;
  padding: 12px 13px;
  color: var(--paper);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-field);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
::placeholder { color: var(--mist-dim); }

/* Survol : bordure un peu plus marquée */
.input:hover,
input:hover, select:hover, textarea:hover { border-color: rgba(255,255,255,.20); }

/* Focus : bordure menthe + halo (remplace l'outline par défaut) */
.input:focus,
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--mint);
  box-shadow: 0 0 0 3px var(--mint-ring);
  background: var(--ink-2);
}

textarea { resize: vertical; line-height: 1.5; }

/* Indice sous un champ (ex. montant en toutes lettres) — menthe, Sora */
.hint {
  font-family: var(--font-title);
  font-size: .78rem;
  color: var(--mint);
  margin-top: 2px;
  min-height: 1.1em;
}

/* Ligne case à cocher / radio */
.checkbox-line,
.radio-line {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .92rem;
  color: var(--mist);
  cursor: pointer;
}
.checkbox-line input,
.radio-line input {
  margin-top: 3px;
  width: 17px; height: 17px;
  accent-color: var(--mint);   /* coche/point en menthe */
  flex-shrink: 0;
}

/* Variante "carte cochable" : la ligne devient un bloc encadré */
.checkbox-line--block {
  padding: 11px 14px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--ink-2);
  transition: border-color var(--t-fast), background var(--t-fast);
}
.checkbox-line--block:hover { border-color: var(--mint-hover); }

/* Radios en ligne façon "chips" */
.radio-line {
  align-items: center;
  padding: 11px 16px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-pill);
  background: var(--ink-2);
}

/* Encart d'avertissement / mention légale (accent menthe doux) */
.notice {
  padding: 18px 20px;
  background: linear-gradient(140deg, rgba(63,227,166,.07), var(--mint-glow-b));
  border: 1px solid var(--mint-border);
  border-radius: 14px;
}
.notice p { margin: 0; font-size: .85rem; color: var(--mist); line-height: 1.6; }

/* États de retour (feedback) — messages d'erreur et de succès.
   Le design system réservait --danger à l'astérisque « champ requis » ;
   on l'étend ici aux messages d'ERREUR (déviation assumée), et on utilise
   la menthe pour le SUCCÈS. Utilisés par les parcours d'authentification. */
.alert {
  padding: 12px 16px;
  margin: 14px 0;
  border-radius: var(--radius-field);
  background: rgba(242, 119, 122, .10);
  border: 1px solid var(--danger);
  color: var(--danger);
  font-size: .9rem;
  line-height: 1.5;
}
.ok {
  padding: 12px 16px;
  margin: 14px 0;
  border-radius: var(--radius-field);
  background: rgba(63, 227, 166, .10);
  border: 1px solid var(--mint-border);
  color: var(--mint);
  font-size: .9rem;
  line-height: 1.5;
}


/* ============================================================================= *
 *  9. EN-TÊTE DES OUTILS / GÉNÉRATEURS  —  letterhead + masthead
 *  -----------------------------------------------------------------------------
 *  RÈGLE : toute page « outil » (générateurs de documents, calculateurs,
 *  simulateurs…) DOIT reprendre exactement cet en-tête. Référence : le
 *  générateur d'offre d'achat. Ne pas improviser d'autre variante.
 *
 *  Structure HTML canonique (à copier telle quelle) :
 *
 *    <body class="glow-top">
 *
 *    <div class="letterhead">
 *      <div class="letterhead__gradient" aria-hidden="true"></div>
 *    </div>
 *
 *    <div class="page">
 *      <header class="masthead">
 *        <div class="masthead__ref">
 *          <span class="masthead__label">Dossier n°</span>
 *          <span class="masthead__value" id="refNumber">—</span>
 *        </div>
 *        <span class="masthead__eyebrow">L'École Immo Durable</span>
 *        <h1 class="masthead__title">Nom du document</h1>
 *        <p class="masthead__sub">Une ou deux phrases de contexte. Rien n'est
 *        enregistré : les données saisies servent uniquement à produire votre
 *        PDF, puis disparaissent.</p>
 *      </header>
 *      …
 *    </div>
 *
 *  Conventions de contenu :
 *   - Surtitre (.masthead__eyebrow) = TOUJOURS « L'École Immo Durable »
 *     (la marque), en Sora MAJ menthe, SANS le tiret du .eyebrow générique.
 *   - Titre (h1) = le nom du DOCUMENT produit (« Offre d'achat immobilier »,
 *     « Bail d'habitation »…), pas « Générateur de… ».
 *   - Sous-titre = contexte + mention de confidentialité (« Rien n'est
 *     enregistré… »).
 *   - Le n° de dossier vient AVANT le surtitre.
 * ============================================================================= */

/* Filet menthe pleine largeur, tout en haut de la page (écho de la landing) */
.letterhead__gradient {
  height: 3px;
  width: 100%;
  background: linear-gradient(90deg, var(--mint-deep), var(--mint));
  box-shadow: 0 0 24px rgba(63,227,166,.35);
}

/* Colonne de lecture de l'outil */
.page {
  max-width: var(--maxw-read);
  margin: 0 auto;
  padding: 52px 24px 96px;
}

/* Bloc d'en-tête, séparé du contenu par un filet discret */
.masthead {
  margin-bottom: 40px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line-soft);
}

/* N° de dossier (référence générée côté client) */
.masthead__ref {
  display: flex;
  gap: 8px;
  align-items: baseline;
  font-family: var(--font-title);
  font-size: .76rem;
  color: var(--mist-dim);
  margin-bottom: 20px;
  letter-spacing: .04em;
}
.masthead__label { text-transform: uppercase; letter-spacing: .14em; }
.masthead__value { color: var(--mint); font-weight: 600; }

/* Surtitre de marque — variante du .eyebrow SANS tiret, réservée au masthead */
.masthead__eyebrow {
  font-family: var(--font-title);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--mint);
  display: inline-block;
  margin-bottom: 14px;
}

/* Titre du document */
.masthead__title {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  line-height: 1.1;
  margin: 0 0 14px;
  letter-spacing: -0.02em;
  color: var(--paper);
}

/* Sous-titre / mention de confidentialité */
.masthead__sub {
  font-size: .98rem;
  color: var(--mist);
  max-width: 58ch;
  margin: 0;
}


/* ============================================================================= *
 *  10. ACCESSIBILITÉ & RESPONSIVE
 *  -----------------------------------------------------------------------------
 *  - Contrastes : blanc sur #06070A et menthe sur fond sombre passent AA.
 *    Ne jamais écrire en menthe sur blanc (illisible) ni blanc sur menthe.
 *  - Focus clavier toujours visible (outline menthe / halo).
 *  - Respecte la réduction de mouvement.
 * ============================================================================= */

/* Focus clavier générique pour éléments interactifs custom */
:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }

/* Réduction de mouvement : coupe les animations pour qui le demande */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Points de rupture. Les grilles 2/3 colonnes repassent en 1 colonne. */
@media (max-width: 860px) {
  .grid-3 { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .block       { padding: 72px 0; }
  .block-tight { padding: 56px 0; }
  .panel   { padding: 32px; }
  .insight { padding: 28px; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .wrap, .wrap-read { padding: 0 16px; }
}

/* ============================================================================= *
 *  MÉMO D'UTILISATION RAPIDE (pour reprise humaine ou IA)
 *  -----------------------------------------------------------------------------
 *  Section type :
 *    <section class="block section-alt">
 *      <div class="wrap-read">
 *        <span class="eyebrow">Surtitre</span>
 *        <h2>Un titre fort</h2>
 *        <p class="muted">Un paragraphe secondaire.</p>
 *        <a class="btn btn-primary" href="#">Action principale</a>
 *        <a class="btn btn-ghost" href="#">Action secondaire</a>
 *      </div>
 *    </section>
 *
 *  Carte :
 *    <div class="card">…</div>              (standard)
 *    <div class="card card-glow">…</div>    (accentuée)
 *
 *  Champ de formulaire :
 *    <label for="x">Libellé <span class="req">*</span></label>
 *    <input id="x" class="input" type="text">
 *
 *  En-tête d'outil / générateur (OBLIGATOIRE sur toute page outil, voir §9) :
 *    <body class="glow-top">
 *    <div class="letterhead"><div class="letterhead__gradient" aria-hidden="true"></div></div>
 *    <div class="page">
 *      <header class="masthead">
 *        <div class="masthead__ref"><span class="masthead__label">Dossier n°</span><span class="masthead__value" id="refNumber">—</span></div>
 *        <span class="masthead__eyebrow">L'École Immo Durable</span>
 *        <h1 class="masthead__title">Nom du document</h1>
 *        <p class="masthead__sub">Contexte + « Rien n'est enregistré… »</p>
 *      </header>
 *      …
 *    </div>
 * ============================================================================= */


/* ============================================================================= *
 *  10. PORTAIL / ESPACE ÉLÈVE  —  mise en page propre au portail
 *  -----------------------------------------------------------------------------
 *  Composants spécifiques au portail élève (hors « outils / documents »).
 *  Le Lot 1 enrichira cette section (en-tête, vignettes d'étape, progression,
 *  Premium grisé + infobulle, glossaire…). Fusionné ici pour un CSS unique.
 * ============================================================================= */

/* Écran centré : connexion, changement de mot de passe, fin d'accès */
.auth {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.auth-card {
  width: 100%;
  max-width: 460px;                 /* plus étroit qu'une colonne de lecture */
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px 28px;
}
.auth-card h1 { font-size: 1.35rem; }

/* Deux boutons côte à côte */
.btn + .btn { margin-left: 10px; }


/* ---- Lot 1 : chrome du portail (en-tête, nav, pied de page, gabarit) -------- */

/* En-tête collant */
.portal-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 24px;
  background: rgba(6, 7, 10, .85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.portal-brand {
  display: flex; align-items: baseline; gap: 8px;
  font-family: var(--font-title); font-weight: 700; font-size: 1rem;
  color: var(--paper); text-decoration: none;
}
.portal-brand span { color: var(--mist); font-weight: 500; font-size: .82rem; }

/* Navigation */
.portal-nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.nav-link {
  padding: 8px 14px; border-radius: var(--radius-pill);
  color: var(--mist); text-decoration: none; font-size: .92rem; font-weight: 600;
  background: transparent; border: 0; cursor: pointer; font-family: var(--font-body);
  transition: color var(--t-fast), background var(--t-fast);
}
.nav-link:hover { color: var(--paper); background: var(--line-soft); }
.nav-link.is-active { color: var(--on-mint); background: var(--mint); }

/* Premium grisé + infobulle « Bientôt » */
.nav-premium { position: relative; opacity: .5; cursor: not-allowed; }
.nav-premium:hover { background: transparent; color: var(--mist); }
.nav-premium .tip {
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: var(--card); color: var(--paper); border: 1px solid var(--line);
  padding: 6px 10px; border-radius: 8px; font-size: .78rem; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity var(--t-fast);
}
.nav-premium:hover .tip, .nav-premium:focus-visible .tip { opacity: 1; }

/* Conteneur principal */
.portal-main { max-width: var(--maxw); margin: 0 auto; padding: 32px 24px; min-height: 55vh; }

/* Pied de page */
.portal-footer {
  margin-top: 56px; padding: 26px 24px;
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  color: var(--mist); font-size: .85rem;
}
.footer-links { display: flex; flex-wrap: wrap; gap: 16px; margin: 0; padding: 0; list-style: none; }
.footer-links a { color: var(--mist); text-decoration: none; }
.footer-links a:hover { color: var(--mint); }

/* Gabarit « page à remplir » (contenu en préparation) */
.gabarit { max-width: var(--maxw-read); margin: 40px auto; padding: 32px 24px; text-align: center; }
.gabarit-badge {
  display: inline-block; padding: 6px 14px; margin-bottom: 16px;
  border-radius: var(--radius-pill); background: var(--line-soft);
  color: var(--mist); font-size: .78rem; font-weight: 600; letter-spacing: .02em;
}
.gabarit h1 { margin: 4px 0 8px; }

/* Mobile : en-tête empilé */
@media (max-width: 640px) {
  .portal-header { flex-direction: column; align-items: flex-start; gap: 10px; }
  .portal-nav { gap: 2px; }
  .nav-link { padding: 7px 11px; font-size: .88rem; }
}


/* ---- Lot 2 : tableau de bord (vignettes d'étape) --------------------------- */

.dash-intro { margin-bottom: 8px; }
.dash-note {
  display: inline-block; margin: 6px 0 8px; padding: 6px 12px;
  border-radius: var(--radius-pill); background: var(--line-soft);
  color: var(--mist); font-size: .8rem;
}

.grid-vignettes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
  margin-top: 20px;
}

.vignette {
  display: flex; flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  transition: border-color var(--t-fast), transform var(--t-fast);
}
.vignette:hover { border-color: var(--mint-hover); transform: translateY(-2px); }
.vignette-emoji { font-size: 1.8rem; line-height: 1; }
.vignette-title { font-family: var(--font-title); font-size: 1.12rem; margin: 10px 0 2px; }
.vignette-sub { color: var(--mist); font-size: .88rem; margin: 0 0 14px; }

.vignette-actions { display: flex; gap: 8px; margin-top: auto; }
.vignette-link {
  padding: 7px 15px; border-radius: var(--radius-pill);
  border: 1px solid var(--line); color: var(--paper);
  text-decoration: none; font-size: .85rem; font-weight: 600;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.vignette-link:hover { border-color: var(--mint); }
.vignette-link.is-agir { background: var(--mint); color: var(--on-mint); border-color: var(--mint); }
.vignette-link.is-agir:hover { background: var(--mint-deep); }


/* ---- Formation : liste des leçons d'une étape (aperçu) --------------------- */

.lecon-list { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lecon {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-field);
}
.lecon-num { font-family: var(--font-title); color: var(--mint); font-weight: 700; font-size: .9rem; min-width: 1.6em; text-align: right; }
.lecon-titre { flex: 1; font-size: .95rem; }
.lecon-etat { color: var(--mist-dim); font-size: .76rem; white-space: nowrap; }


/* ---- Lot 3 : pages d'étape (onglets Se former / Agir, outils) -------------- */

/* Bascule Se former / Agir */
.etape-tabs {
  display: inline-flex; gap: 4px; margin: 18px 0 6px; padding: 4px;
  background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius-pill);
}
.etape-tab {
  padding: 8px 20px; border-radius: var(--radius-pill);
  color: var(--mist); text-decoration: none; font-weight: 600; font-size: .92rem;
  transition: color var(--t-fast), background var(--t-fast);
}
.etape-tab:hover { color: var(--paper); }
.etape-tab.is-active { background: var(--mint); color: var(--on-mint); }

/* Leçon cliquable (Se former) */
a.lecon { text-decoration: none; color: inherit; transition: border-color var(--t-fast); }
a.lecon:hover { border-color: var(--mint-hover); }

/* Liste d'outils (Agir) */
.outil-list {
  list-style: none; margin: 18px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px;
}
.outil {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-field);
  color: inherit; text-decoration: none;
}
a.outil:hover { border-color: var(--mint-hover); }
.outil-nom { font-size: .95rem; }
.badge { font-size: .72rem; font-weight: 700; padding: 3px 10px; border-radius: var(--radius-pill); white-space: nowrap; }
.badge-pret    { background: rgba(63,227,166,.14); color: var(--mint); }
.badge-dev     { background: var(--line-soft); color: var(--mist); }
.badge-premium { background: rgba(242,119,122,.12); color: var(--danger); }


/* ---- Améliorations : accessibilité (lien d'évitement) & 404 ---------------- */

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--mint); color: var(--on-mint);
  padding: 8px 16px; border-radius: 0 0 8px 0; font-weight: 700; text-decoration: none;
}
.skip-link:focus { left: 0; }


/* ---- Hub d'accueil : cartes cliquables, progression globale, fil d'Ariane -- */

a.vignette { text-decoration: none; color: inherit; }
.vignette-desc { color: var(--mist); font-size: .9rem; margin: 0 0 14px; }
.vignette-arrow { margin-top: auto; color: var(--mint); font-weight: 700; }

/* Barre de progression (globale ou par formation) */
.progress-block { margin: 18px 0 10px; max-width: 520px; }
.progress-bar { height: 10px; background: var(--line-soft); border-radius: var(--radius-pill); overflow: hidden; }
.progress-fill { height: 100%; background: var(--mint); border-radius: var(--radius-pill); transition: width var(--t-med); }
.progress-label { color: var(--mist); font-size: .82rem; margin-top: 6px; }

/* Fil d'Ariane */
.breadcrumb { font-size: .85rem; color: var(--mist); margin: 0 0 10px; }
.breadcrumb a { color: var(--mist); text-decoration: none; }
.breadcrumb a:hover { color: var(--mint); }
.breadcrumb .sep { margin: 0 7px; opacity: .55; }
.breadcrumb .current { color: var(--paper); }


/* ---- Lot 4 : progression (côté client, IndexedDB) ------------------------- */

/* Défaut : barre vide ; la largeur est posée par progression.js (CSSOM,
   autorisé par la CSP) — jamais en style inline (bloqué par style-src 'self'). */
.progress-fill { width: 0; }

/* Barre compacte dans une vignette d'étape */
.vignette-progress { margin: 12px 0 2px; }
.vignette-progress .progress-bar { height: 7px; }
.progress-count { color: var(--mist); font-size: .78rem; margin-top: 4px; }

/* Leçon terminée (liste « Se former ») */
.lecon.is-done { border-color: var(--mint-border); }
.lecon.is-done .lecon-etat { color: var(--mint); }
.lecon.is-done .lecon-num  { color: var(--mint-deep); }

/* Case « J'ai terminé » sur la page de leçon */
.lecon-done {
  display: flex; align-items: center; gap: 10px;
  margin: 18px 0; padding: 14px 16px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-field);
  cursor: pointer; font-weight: 600;
}
.lecon-done input { width: 18px; height: 18px; accent-color: var(--mint); cursor: pointer; }

/* Sauvegarde / restauration de la progression (hub) */
.progress-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 2px 0 10px; }
.progress-tools .btn { font-size: .85rem; }
.progress-import-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* Utilitaires (remplacent des styles inline bloqués par style-src 'self') */
.mt-lg { margin-top: 28px; }
.link-back { padding-left: 0; }


/* ---- Lot 5 : catalogue d'outils filtrable --------------------------------- */

.filtres { display: flex; flex-direction: column; gap: 12px; margin: 18px 0; }
.filtre-recherche { max-width: 360px; }
.filtre-groupe { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  padding: 6px 14px; border-radius: var(--radius-pill);
  border: 1px solid var(--line); background: transparent;
  color: var(--mist); font-size: .85rem; font-weight: 600; cursor: pointer;
  font-family: var(--font-body);
  transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast);
}
.chip:hover { color: var(--paper); border-color: var(--mint-hover); }
.chip.is-active { background: var(--mint); color: var(--on-mint); border-color: var(--mint); }

.outil-info { display: flex; flex-direction: column; gap: 2px; }
.outil-meta { color: var(--mist); font-size: .76rem; }


/* ---- Lot 6 : contenus « Se former » (vidéo, ressources, glossaire) --------- */

/* Bandeau de consentement vidéo */
.video-consent {
  margin: 18px 0; padding: 22px; text-align: center;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
}
.video-consent p { max-width: 46ch; margin: 0 auto 14px; }

/* Cadre vidéo responsive 16:9 */
.video-wrap {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  margin: 18px 0; border-radius: var(--radius); overflow: hidden;
  background: #000; border: 1px solid var(--line);
}
.video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Ressources */
.ressource-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ressource {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; text-decoration: none; color: inherit;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-field);
  transition: border-color var(--t-fast);
}
.ressource:hover { border-color: var(--mint-hover); }
.ressource-type {
  font-size: .72rem; font-weight: 700; padding: 3px 10px; border-radius: var(--radius-pill);
  background: var(--line-soft); color: var(--mist); white-space: nowrap;
}
.ressource-titre { color: var(--paper); }

/* Glossaire */
.glossaire { margin: 12px 0 0; }
.glossaire dt { font-weight: 700; color: var(--paper); margin-top: 12px; }
.glossaire dd { margin: 2px 0 0; color: var(--mist); }


/* ---- Lot 7 : Communauté (agenda) ------------------------------------------ */

.agenda { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.evenement {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-field);
}
.evenement-date {
  flex: 0 0 auto; width: 56px; text-align: center;
  background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius-field); padding: 8px 0;
}
.evenement-jour { display: block; font-family: var(--font-title); font-size: 1.4rem; font-weight: 700; color: var(--mint); line-height: 1; }
.evenement-mois { display: block; font-size: .68rem; font-weight: 700; color: var(--mist); letter-spacing: .04em; margin-top: 2px; }
.evenement-corps { flex: 1; }
.evenement-titre { margin: 0 0 2px; font-size: 1.02rem; }
.evenement-meta { color: var(--mist); font-size: .82rem; margin: 0 0 6px; }


/* ---- Lot 8 : pages légales (prose) ---------------------------------------- */

.legal { max-width: var(--maxw-read); }
.legal h2 { font-size: 1.12rem; margin: 26px 0 8px; }
.legal p, .legal li { line-height: 1.65; }
.legal ul { padding-left: 20px; }
.legal .placeholder { color: var(--mint); font-weight: 600; }


/* ---- Lot 9 : back-office comptes (admin) ---------------------------------- */

.admin-table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: .9rem; }
.admin-table th, .admin-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.admin-table th { color: var(--mist); font-size: .8rem; font-weight: 700; }
.admin-table code { color: var(--paper); }
.admin-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.admin-actions form { margin: 0; }
.admin-inline { display: flex; gap: 4px; align-items: center; }
.input-sm { padding: 4px 8px; font-size: .82rem; width: auto; max-width: 150px; }


/* ---- FF·3 : éditeur JSON du back-office formation ------------------------- */

.json-area {
  width: 100%; min-height: 360px; resize: vertical;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: .82rem; line-height: 1.5;
  color: var(--paper); background: var(--ink-2);
  border: 1px solid var(--line); border-radius: var(--radius-field);
  padding: 12px 14px; tab-size: 2;
}
.json-area:focus { outline: none; border-color: var(--mint); }
.alert ul, .notice code { margin: 6px 0 0; }


/* ============================================================================= *
 *  THÈME « LISIBLE » — variante de TEST (v1)
 *  -----------------------------------------------------------------------------
 *  Ne remplace pas le style de base : ces règles sont APPENDUES et surchargent
 *  les valeurs ci-dessus. Objectif : titres plus compacts, marges réduites,
 *  plus de place aux contenus et aux vignettes, meilleur contraste du texte.
 *  Pour tester : déployer ce fichier à la place de design-system.css.
 *  Pour revenir en arrière : remettre design-system.css (inchangé).
 * ============================================================================= */

:root {
  --maxw:      1240px;    /* largeur utile accrue (base : 1120) */
  --mist:      #B4BCC6;   /* texte secondaire plus lisible (base : #9AA3AD) */
  --mist-dim:  #828B95;   /* tertiaire un peu plus clair */
}

/* Titres nettement plus compacts (base : 40–72 / 28–42 / 20–28 px) */
h1 { font-size: clamp(24px, 3.0vw, 31px); font-weight: 700; line-height: 1.15; margin-bottom: 6px; }
h2 { font-size: clamp(20px, 2.3vw, 25px); line-height: 1.18; margin-bottom: 6px; }
h3 { font-size: clamp(16px, 1.7vw, 19px); line-height: 1.2;  margin-bottom: 4px; }
h4 { font-size: 1.02rem; }

/* Marges de page réduites → contenu plus large et plus haut dans l'écran */
.portal-main { padding: 20px 20px 40px; }
.gabarit     { margin: 24px auto; padding: 24px 20px; }

/* En-tête de page resserré */
.eyebrow { font-size: 11.5px; letter-spacing: .18em; }
.portal-main > .muted { margin-bottom: 12px; }

/* Vignettes plus denses : plus de colonnes, moins de marge perdue */
.grid-vignettes { grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 14px; margin-top: 14px; }
.vignette       { padding: 16px; }
.vignette-emoji { font-size: 1.5rem; }
.vignette-title { font-size: 1.04rem; margin: 8px 0 2px; }
.vignette-sub, .vignette-desc { font-size: .85rem; margin-bottom: 10px; }

/* Cartes et barres de progression un peu plus compactes */
.card          { padding: 18px; }
.progress-block { margin: 12px 0 8px; }


/* ---- Bascule de thème (bouton) — commun aux deux thèmes -------------------- */
.theme-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 100px; cursor: pointer;
  font-family: var(--font-body); font-size: .82rem; font-weight: 600;
  color: var(--mist); background: transparent; border: 1px solid var(--line);
}
.theme-toggle:hover { color: var(--paper); border-color: var(--mint-border); }
.theme-toggle .theme-ico { width: 15px; height: 15px; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* Sombre : on garde les emojis (pastille numéro et icônes masquées) */
.numbadge, .ico { display: none; }
.theme-label { white-space: nowrap; }

/* Outil « prêt » mais dont l'URL n'est pas encore renseignée (CDC §7) */
.badge-bientot { background: var(--mint-ring); color: var(--mint); }

/* Navigation entre leçons (précédente / suivante) — CDC §6 */
.lecon-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 24px; }
.lecon-nav-lien {
  display: flex; flex-direction: column; gap: 2px; max-width: 48%;
  padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius-card);
  background: var(--card); text-decoration: none;
}
.lecon-nav-lien:hover { border-color: var(--mint-border); }
.lecon-nav-prec { text-align: left; }
.lecon-nav-suiv { text-align: right; margin-left: auto; }
.lecon-nav-sens { font-family: var(--font-title); font-size: .78rem; font-weight: 700; color: var(--mint); }
.lecon-nav-titre { font-size: .9rem; color: var(--paper); }
@media (max-width: 560px) { .lecon-nav { flex-direction: column; } .lecon-nav-lien { max-width: 100%; } .lecon-nav-suiv { text-align: left; } }

/* Catalogue d'outils : description + back-office (CDC §7) */
.outil-desc { display: block; font-size: .84rem; color: var(--mist); margin-top: 2px; }
.outil-meta-bloc { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.lecon-outils-titre { margin-top: 26px; }
.admin-fieldset { border: 1px solid var(--line); border-radius: var(--radius-card); padding: 12px 14px; margin: 12px 0; }
.admin-fieldset legend { padding: 0 6px; font-weight: 600; font-size: .88rem; color: var(--paper); }
.admin-case { display: inline-flex; align-items: center; gap: 6px; margin: 4px 14px 4px 0; font-size: .88rem; }
.admin-case input { accent-color: var(--mint); }

/* Lignes répétables des formulaires admin (ressources, glossaire) */
.admin-ligne { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.admin-ligne .input { flex: 1; min-width: 140px; }
.admin-fieldset [data-ajouter] { margin-top: 4px; }

/* Page Outils : compteur de résultats + réinitialisation des filtres (CDC §7) */
.filtre-resume {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 4px 0 14px; font-size: .86rem; color: var(--mist);
}
.chip-reinit { font-size: .78rem; }

/* Déconnexion en POST : le lien de nav devient un bouton (CDC §23) */
.nav-logout { display: inline; margin: 0; }
.nav-link-bouton {
  background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; color: inherit;
}

/* Champ mot de passe avec bouton « afficher / masquer » */
.champ-mdp { position: relative; display: block; }
.champ-mdp .input { padding-right: 44px; width: 100%; }
.mdp-voir {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0;
  background: none; border: none; border-radius: 8px; cursor: pointer;
  color: var(--mist);
}
.mdp-voir:hover { color: var(--mint); }
.mdp-voir:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
.mdp-ico { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8;
           stroke-linecap: round; stroke-linejoin: round; }
.mdp-ico-barre { display: none; }
.mdp-voir.is-visible .mdp-ico-ouvert { display: none; }
.mdp-voir.is-visible .mdp-ico-barre { display: block; }

/* Recherche transverse (leçons + outils) — CDC §23 réalisé */
.recherche-form { display: flex; gap: 8px; align-items: center; margin: 12px 0 18px; flex-wrap: wrap; }
.recherche-form .input { flex: 1; min-width: 200px; }
.recherche-hub { margin-bottom: 26px; }

/* Identifiants : copie en un clic (back-office) */
.creds-ligne { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.creds-cle { min-width: 180px; color: var(--mist); font-size: .88rem; }
.creds-valeur {
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .95rem;
  padding: 4px 10px; border-radius: 8px;
  background: var(--card); border: 1px solid var(--line); user-select: all;
}
.chip.is-copie { border-color: var(--mint); color: var(--mint); }
.chip.is-echec { border-color: var(--terre); color: var(--terre); }

/* Masqué à l'œil, mais lu par les lecteurs d'écran (labels de recherche) */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* QCM — item d'étape (CDC §24) */
.badge-qcm { background: var(--mint-ring); color: var(--mint); margin-left: 8px; }
.lecon-qcm .lecon-num { background: var(--mint-ring); color: var(--mint); }

.qcm { margin-top: 8px; }
.qcm-question {
  border: 1px solid var(--line); border-radius: var(--radius-card);
  padding: 16px 18px; margin-bottom: 14px; background: var(--card);
}
.qcm-question.est-juste  { border-color: var(--mint); }
.qcm-question.est-ratee  { border-color: var(--terre); }
.qcm-enonce { display: flex; gap: 10px; align-items: baseline; font-weight: 600; margin-bottom: 10px; padding: 0; }
.qcm-num {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; height: 24px; border-radius: 999px;
  background: var(--mint-ring); color: var(--mint);
  font-size: .8rem; font-weight: 700; flex: none;
}
.qcm-reponse {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; margin-bottom: 6px;
  border: 1px solid var(--line); border-radius: 10px; cursor: pointer;
}
.qcm-reponse:hover { border-color: var(--mint-border); }
.qcm-reponse input { accent-color: var(--mint); }
.qcm-texte { flex: 1; }
.qcm-reponse.est-bonne  { border-color: var(--mint); background: var(--mint-ring); }
.qcm-reponse.est-fausse { border-color: var(--terre); }
.qcm-reponse.est-bonne  .qcm-marque::after { content: '✓'; color: var(--mint); font-weight: 700; }
.qcm-reponse.est-fausse .qcm-marque::after { content: '✕'; color: var(--terre); font-weight: 700; }
.qcm-explication {
  margin-top: 8px; padding: 10px 12px; border-radius: 10px;
  background: var(--ink2); color: var(--mist); font-size: .9rem;
}
.qcm-pied { display: flex; gap: 10px; align-items: center; margin-top: 6px; }
.qcm-score { margin-top: 12px; font-weight: 600; }
.qcm-score.est-reussi    { color: var(--mint); }
.qcm-score.est-a-refaire { color: var(--terre); }

/* Back-office : éditeur de questions de QCM */
.admin-question {
  border: 1px solid var(--line); border-radius: 12px;
  padding: 12px; margin-bottom: 10px; background: var(--ink2);
}
.admin-question > .input { margin-bottom: 8px; }
.admin-reponses { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 8px; }
.admin-question-pied { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.admin-question-pied .input { flex: 1; min-width: 160px; }
@media (max-width: 620px) { .admin-reponses { grid-template-columns: 1fr; } }

/* « Bonjour Prénom » dans l'en-tête élève */
.portal-bonjour { color: var(--mist); font-size: .9rem; margin-right: auto; padding-left: 4px; }

/* Page Outils : classement par étape (CDC §7) */
.outils-etape { margin-bottom: 22px; }
.outils-etape h2 { font-size: 1.05rem; margin-bottom: 10px; }
.outil-fleche { color: var(--mist); font-size: 1.1rem; flex: none; }