/* =============================================================================
   FEUILLE DE STYLE PRINCIPALE
   =============================================================================
   Design institutionnel B2B : sobre, dense, typographie sérieuse.
   Le parti pris est celui d'un cabinet ou d'un éditeur juridique — pas celui
   d'une startup. Peu de couleurs, beaucoup de blanc, des bordures nettes.

   SOMMAIRE
   1.  Variables (couleurs, espacements, typographie)
   2.  Réinitialisation et base
   3.  Typographie
   4.  Mise en page (conteneurs, grilles)
   5.  En-tête et navigation
   6.  Hero
   7.  Boutons et appels à l'action
   8.  Cartes et blocs
   9.  Tableau de prix
   10. Formulaire de personnalisation
   11. Contenu éditorial (articles)
   12. Réassurance et badges
   13. FAQ
   14. Pied de page
   15. Pages transactionnelles (succès, annulation, admin)
   16. Utilitaires
   17. Responsive
   18. Impression
   19. Sommaires de secteur
   20. Refonte visuelle
   21. Prestations sur mesure (accueil)
   22. Finitions d'interface
   23. Diagnostic de facturation électronique
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. VARIABLES — modifie les couleurs ICI, elles se propagent partout
   -------------------------------------------------------------------------- */
:root {
    /* Palette principale */
    --bleu-marine:      #0A2540;   /* Couleur institutionnelle dominante */
    --bleu-marine-clair:#143A5C;
    --bleu-marine-fonce:#061829;
    --gris-fonce:       #2D3748;   /* Texte courant */
    --gris-moyen:       #4A5568;   /* Texte secondaire */
    --gris-clair:       #A0AEC0;   /* Texte tertiaire, légendes */
    --gris-bordure:     #E2E8F0;
    --gris-fond:        #EDF2F7;
    --blanc-casse:      #F7FAFC;   /* Fond de page */
    --blanc:            #FFFFFF;

    /* Accent — réservé aux appels à l'action et aux éléments à remarquer */
    --or:               #D69E2E;
    --or-fonce:         #B7791F;
    --or-clair:         #FAF089;
    --or-fond:          #FFFBEB;

    /* Couleurs sémantiques */
    --vert:             #276749;
    --vert-fond:        #F0FFF4;
    --rouge:            #9B2C2C;
    --rouge-fond:       #FFF5F5;
    --bleu-info:        #2C5282;
    --bleu-info-fond:   #EBF8FF;

    /* Typographie */
    --police-titre: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --police-texte: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --police-mono:  'SFMono-Regular', Consolas, 'Liberation Mono', monospace;

    /* Échelle typographique (base 16px, ratio 1.25) */
    --t-xs:   0.75rem;    /* 12px */
    --t-sm:   0.875rem;   /* 14px */
    --t-base: 1rem;       /* 16px */
    --t-md:   1.125rem;   /* 18px */
    --t-lg:   1.375rem;   /* 22px */
    --t-xl:   1.75rem;    /* 28px */
    --t-2xl:  1.875rem;   /* 30px */
    --t-3xl:  2.375rem;   /* 38px */

    /* Espacements (échelle de 4px) */
    --e-1: 0.25rem;  --e-2: 0.5rem;   --e-3: 0.75rem;  --e-4: 1rem;
    --e-5: 1.5rem;   --e-6: 2rem;     --e-8: 3rem;     --e-10: 4rem;
    --e-12: 6rem;    --e-16: 8rem;

    /* Divers */
    --rayon:       10px;   /* Angles arrondis : lecture contemporaine */
    --rayon-lg:    16px;
    --largeur-max: 1180px;
    --largeur-texte: 720px;  /* Largeur de lecture confortable pour les articles */

    --ombre-sm: 0 1px 2px rgba(10, 37, 64, 0.06);
    --ombre:    0 4px 16px rgba(10, 37, 64, 0.07), 0 1px 3px rgba(10, 37, 64, 0.05);
    --ombre-lg: 0 8px 28px rgba(10, 37, 64, 0.12);

    --transition: 160ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* -----------------------------------------------------------------------------
   2. RÉINITIALISATION ET BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

/* Respect des préférences système : pas d'animation si l'utilisateur n'en veut pas */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

body {
    margin: 0;
    font-family: var(--police-texte);
    font-size: var(--t-base);
    line-height: 1.65;
    color: var(--gris-fonce);
    background: var(--blanc-casse);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; height: auto; display: block; }

/* Lien d'évitement — accessibilité clavier */
.saut-contenu {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--bleu-marine);
    color: var(--blanc);
    padding: var(--e-3) var(--e-5);
    z-index: 999;
}
.saut-contenu:focus { left: 0; }

/* L'attribut hidden doit l'emporter sur un display: flex ou grid posé plus bas
   dans la feuille. Sans cette règle, un bloc masqué en HTML réapparaît vide. */
[hidden] { display: none !important; }

/* Focus visible partout : obligatoire pour l'accessibilité (WCAG 2.4.7) */
:focus-visible {
    outline: 3px solid var(--or);
    outline-offset: 2px;
}

/* -----------------------------------------------------------------------------
   3. TYPOGRAPHIE
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5 {
    font-family: var(--police-titre);
    color: var(--bleu-marine);
    font-weight: 700;
    line-height: 1.22;
    margin: 0 0 var(--e-4);
    letter-spacing: -0.015em;
}

h1 { font-size: var(--t-3xl); letter-spacing: -0.025em; }
h2 { font-size: var(--t-2xl); margin-top: var(--e-10); }
h3 { font-size: var(--t-lg); margin-top: var(--e-6); }
h4 { font-size: var(--t-md); margin-top: var(--e-5); }

p { margin: 0 0 var(--e-4); }

a {
    color: var(--bleu-marine-clair);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    transition: color var(--transition);
}
a:hover { color: var(--or-fonce); }

strong, b { font-weight: 650; color: var(--bleu-marine); }

small { font-size: var(--t-sm); color: var(--gris-moyen); }

/* Surtitre : petite majuscule au-dessus d'un H2, structure la page */
.surtitre {
    font-family: var(--police-titre);
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--or-fonce);
    margin-bottom: var(--e-2);
    display: block;
}

.chapeau {
    font-size: var(--t-md);
    color: var(--gris-moyen);
    line-height: 1.7;
    max-width: 62ch;
}

/* -----------------------------------------------------------------------------
   4. MISE EN PAGE
   -------------------------------------------------------------------------- */
.conteneur {
    width: 100%;
    max-width: var(--largeur-max);
    margin: 0 auto;
    padding: 0 var(--e-5);
}

.conteneur-texte { max-width: var(--largeur-texte); margin: 0 auto; }

.section        { padding: var(--e-10) 0; }
.section-large  { padding: var(--e-12) 0; }
.section-fond   { background: var(--blanc); border-block: 1px solid var(--gris-bordure); }
.section-sombre { background: var(--bleu-marine); color: rgba(255,255,255,0.88); }
.section-sombre h2, .section-sombre h3 { color: var(--blanc); }
.section-sombre a { color: var(--or-clair); }

.grille    { display: grid; gap: var(--e-5); }
.grille-2  { grid-template-columns: repeat(2, 1fr); }
.grille-3  { grid-template-columns: repeat(3, 1fr); }
.grille-4  { grid-template-columns: repeat(4, 1fr); }

.entete-section { text-align: center; max-width: 700px; margin: 0 auto var(--e-8); }
.entete-section h2 { margin-top: 0; }

/* -----------------------------------------------------------------------------
   5. EN-TÊTE ET NAVIGATION
   -------------------------------------------------------------------------- */
.entete {
    background: var(--blanc);
    border-bottom: 1px solid var(--gris-bordure);
    position: sticky;
    top: 0;
    z-index: 100;
}

.entete-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-5);
    height: 68px;
}

.logo {
    font-family: var(--police-titre);
    font-size: var(--t-md);
    font-weight: 800;
    color: var(--bleu-marine);
    text-decoration: none;
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    gap: var(--e-2);
    white-space: nowrap;
}
.logo:hover { color: var(--bleu-marine); }

/* Marque typographique : un carré marine avec l'initiale. Aucune image à charger. */
.logo-marque {
    width: 30px; height: 30px;
    background: var(--bleu-marine);
    color: var(--blanc);
    display: grid; place-items: center;
    border-radius: var(--rayon);
    font-size: var(--t-sm);
    font-weight: 800;
}
.logo-marque::after { content: ''; }

.nav { display: flex; align-items: center; gap: var(--e-5); }

.nav a {
    color: var(--gris-moyen);
    text-decoration: none;
    font-size: var(--t-sm);
    font-weight: 500;
    padding: var(--e-2) 0;
    border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--bleu-marine); border-bottom-color: var(--or); }

.nav-bascule {
    display: none;
    background: none;
    border: 1px solid var(--gris-bordure);
    border-radius: var(--rayon);
    padding: var(--e-2) var(--e-3);
    cursor: pointer;
    font-size: var(--t-lg);
    line-height: 1;
    color: var(--bleu-marine);
}

/* Fil d'Ariane — utile au SEO et à l'orientation */
.fil-ariane {
    font-size: var(--t-xs);
    color: var(--gris-clair);
    padding: var(--e-4) 0;
}
.fil-ariane a { color: var(--gris-moyen); text-decoration: none; }
.fil-ariane a:hover { text-decoration: underline; }
.fil-ariane span { margin: 0 var(--e-2); color: var(--gris-bordure); }

/* -----------------------------------------------------------------------------
   6. HERO
   -------------------------------------------------------------------------- */
.hero {
    background: linear-gradient(160deg, var(--bleu-marine) 0%, var(--bleu-marine-fonce) 100%);
    color: var(--blanc);
    padding: var(--e-12) 0 var(--e-10);
    position: relative;
    overflow: hidden;
}

/* Motif discret en fond : lignes fines, évoque le papier réglé d'un acte */
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        90deg,
        rgba(255,255,255,0.028) 0px,
        rgba(255,255,255,0.028) 1px,
        transparent 1px,
        transparent 56px
    );
    pointer-events: none;
}

.hero .conteneur { position: relative; z-index: 1; }

.hero-grille {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: var(--e-10);
    align-items: center;
}

.hero h1 { color: var(--blanc); margin-bottom: var(--e-5); }

.hero .chapeau {
    color: rgba(255,255,255,0.82);
    font-size: var(--t-md);
    margin-bottom: var(--e-6);
}

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

/* Carte latérale du hero : le résumé de l'offre, visible sans défilement */
.hero-carte {
    background: var(--blanc);
    border-radius: var(--rayon-lg);
    padding: var(--e-6);
    box-shadow: var(--ombre-lg);
    color: var(--gris-fonce);
}
.hero-carte h3 { margin-top: 0; font-size: var(--t-md); }

.hero-prix {
    font-family: var(--police-titre);
    font-size: var(--t-3xl);
    font-weight: 800;
    color: var(--bleu-marine);
    line-height: 1;
    letter-spacing: -0.03em;
}
.hero-prix-suffixe {
    font-size: var(--t-base);
    font-weight: 500;
    color: var(--gris-moyen);
    letter-spacing: 0;
}

/* -----------------------------------------------------------------------------
   7. BOUTONS
   -------------------------------------------------------------------------- */
.bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--e-2);
    font-family: var(--police-titre);
    font-size: var(--t-sm);
    font-weight: 700;
    letter-spacing: 0.01em;
    padding: var(--e-3) var(--e-6);
    border: 2px solid transparent;
    border-radius: var(--rayon);
    text-decoration: none;
    cursor: pointer;
    transition: all var(--transition);
    text-align: center;
    line-height: 1.4;
    min-height: 46px;   /* Cible tactile ≥ 44px (WCAG 2.5.5) */
}

/* Bouton principal — l'or est réservé à l'action qui rapporte */
.bouton-or {
    background: var(--or);
    color: var(--bleu-marine-fonce);
    border-color: var(--or);
}
.bouton-or:hover {
    background: var(--or-fonce);
    border-color: var(--or-fonce);
    color: var(--blanc);
    transform: translateY(-1px);
    box-shadow: var(--ombre);
}

.bouton-marine {
    background: var(--bleu-marine);
    color: var(--blanc);
    border-color: var(--bleu-marine);
}
.bouton-marine:hover { background: var(--bleu-marine-clair); color: var(--blanc); }

.bouton-fantome {
    background: transparent;
    color: var(--blanc);
    border-color: rgba(255,255,255,0.4);
}
.bouton-fantome:hover { border-color: var(--blanc); background: rgba(255,255,255,0.08); color: var(--blanc); }

.bouton-contour {
    background: transparent;
    color: var(--bleu-marine);
    border-color: var(--gris-bordure);
}
.bouton-contour:hover { border-color: var(--bleu-marine); background: var(--blanc); }

.bouton-large { width: 100%; }
.bouton-grand { font-size: var(--t-base); padding: var(--e-4) var(--e-8); min-height: 54px; }

.bouton:disabled,
.bouton[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }

/* Mention sous le bouton : lève la dernière objection au moment du clic */
.bouton-mention {
    font-size: var(--t-xs);
    color: var(--gris-clair);
    text-align: center;
    margin-top: var(--e-3);
}

/* -----------------------------------------------------------------------------
   8. CARTES ET BLOCS
   -------------------------------------------------------------------------- */
.carte {
    background: var(--blanc);
    border: 1px solid var(--gris-bordure);
    border-radius: var(--rayon-lg);
    padding: var(--e-6);
    transition: border-color var(--transition), box-shadow var(--transition);
}
.carte:hover { border-color: var(--gris-clair); box-shadow: var(--ombre); }
.carte h3 { margin-top: 0; }
.carte > *:last-child { margin-bottom: 0; }

/* Encadré d'appel : pour un point de droit ou un avertissement */
.encadre {
    border-left: 3px solid var(--bleu-marine);
    background: var(--blanc);
    padding: var(--e-5);
    margin: var(--e-6) 0;
    border-radius: 0 var(--rayon) var(--rayon) 0;
}
.encadre-titre {
    font-family: var(--police-titre);
    font-weight: 700;
    color: var(--bleu-marine);
    font-size: var(--t-sm);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: var(--e-2);
}
.encadre > *:last-child { margin-bottom: 0; }

.encadre-info   { border-left-color: var(--bleu-info); background: var(--bleu-info-fond); }
.encadre-alerte { border-left-color: var(--or-fonce);  background: var(--or-fond); }
.encadre-danger { border-left-color: var(--rouge);     background: var(--rouge-fond); }
.encadre-ok     { border-left-color: var(--vert);      background: var(--vert-fond); }

/* Référence légale : citation d'un article de code */
.reference-legale {
    font-family: var(--police-mono);
    font-size: var(--t-xs);
    color: var(--gris-moyen);
    background: var(--gris-fond);
    padding: var(--e-1) var(--e-2);
    border-radius: 2px;
    white-space: nowrap;
}

/* Bloc de clause : rend visible un extrait du document vendu */
.clause-extrait {
    background: var(--blanc);
    border: 1px solid var(--gris-bordure);
    border-radius: var(--rayon);
    padding: var(--e-5);
    margin: var(--e-5) 0;
    font-size: var(--t-sm);
    line-height: 1.75;
    position: relative;
}
.clause-extrait::before {
    content: 'Extrait du document';
    position: absolute;
    top: -9px; left: var(--e-4);
    background: var(--blanc-casse);
    padding: 0 var(--e-2);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gris-clair);
}
.clause-extrait .variable {
    background: var(--or-fond);
    border-bottom: 1px dashed var(--or-fonce);
    padding: 0 2px;
    font-weight: 600;
    color: var(--or-fonce);
}

/* -----------------------------------------------------------------------------
   9. TABLEAU DE PRIX
   -------------------------------------------------------------------------- */
.grille-offres {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--e-5);
    align-items: start;
}

.offre {
    background: var(--blanc);
    border: 1px solid var(--gris-bordure);
    border-radius: var(--rayon-lg);
    padding: var(--e-6);
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    transition: all var(--transition);
}
.offre:hover { box-shadow: var(--ombre); }

/* L'offre mise en avant : plus haute, bordure marine, ruban */
.offre-vedette {
    border: 2px solid var(--bleu-marine);
    box-shadow: var(--ombre-lg);
}

.offre-ruban {
    position: absolute;
    top: -13px; left: 50%;
    transform: translateX(-50%);
    background: var(--bleu-marine);
    color: var(--blanc);
    font-family: var(--police-titre);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: var(--e-1) var(--e-4);
    border-radius: 999px;
    white-space: nowrap;
}

.offre-nom {
    font-family: var(--police-titre);
    font-size: var(--t-md);
    font-weight: 700;
    color: var(--bleu-marine);
    margin-bottom: var(--e-1);
}
.offre-accroche {
    font-size: var(--t-sm);
    color: var(--gris-moyen);
    min-height: 44px;
    margin-bottom: var(--e-4);
}

.offre-prix {
    font-family: var(--police-titre);
    font-size: var(--t-2xl);
    font-weight: 800;
    color: var(--bleu-marine);
    line-height: 1;
    letter-spacing: -0.03em;
    margin-bottom: var(--e-1);
}
.offre-prix small {
    font-size: var(--t-sm);
    font-weight: 500;
    color: var(--gris-moyen);
    letter-spacing: 0;
}
.offre-prix-note {
    font-size: var(--t-xs);
    color: var(--gris-clair);
    margin-bottom: var(--e-5);
}

.offre-liste {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--e-6);
    flex-grow: 1;
    font-size: var(--t-sm);
}
.offre-liste li {
    padding: var(--e-2) 0 var(--e-2) var(--e-6);
    position: relative;
    border-bottom: 1px solid var(--gris-fond);
    line-height: 1.55;
}
.offre-liste li:last-child { border-bottom: none; }
.offre-liste li::before {
    content: '';
    position: absolute;
    left: 2px; top: 14px;
    width: 13px; height: 7px;
    border-left: 2px solid var(--vert);
    border-bottom: 2px solid var(--vert);
    transform: rotate(-45deg);
}
/* Ligne barrée : ce que l'offre ne contient PAS. Dire ce qui manque augmente
   la crédibilité et pousse vers l'offre supérieure sans mentir. */
.offre-liste li.absent { color: var(--gris-clair); }
.offre-liste li.absent::before {
    border: none;
    content: '—';
    top: 6px; left: 4px;
    width: auto; height: auto;
    transform: none;
    color: var(--gris-clair);
    font-weight: 700;
}

/* -----------------------------------------------------------------------------
   10. FORMULAIRE DE PERSONNALISATION
   -------------------------------------------------------------------------- */
.formulaire-bloc {
    background: var(--blanc);
    border: 1px solid var(--gris-bordure);
    border-radius: var(--rayon-lg);
    padding: var(--e-6);
    box-shadow: var(--ombre-sm);
}

.champs-grille {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--e-4);
    margin-bottom: var(--e-5);
}

.champ { display: flex; flex-direction: column; gap: var(--e-2); }
.champ-pleine-largeur { grid-column: 1 / -1; }

.champ label {
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--bleu-marine);
}
.champ .aide { font-size: var(--t-xs); color: var(--gris-clair); font-weight: 400; }

.champ input,
.champ select,
.champ textarea {
    font-family: var(--police-texte);
    font-size: var(--t-base);
    color: var(--gris-fonce);
    padding: var(--e-3) var(--e-4);
    border: 1px solid var(--gris-bordure);
    border-radius: var(--rayon);
    background: var(--blanc);
    width: 100%;
    min-height: 46px;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.champ input:focus,
.champ select:focus,
.champ textarea:focus {
    outline: none;
    border-color: var(--bleu-marine);
    box-shadow: 0 0 0 3px rgba(10, 37, 64, 0.10);
}
.champ input[aria-invalid="true"],
.champ select[aria-invalid="true"] { border-color: var(--rouge); }

.champ-erreur { font-size: var(--t-xs); color: var(--rouge); }

/* Case à cocher d'acceptation des CGV : obligatoire avant paiement */
.champ-case {
    display: flex;
    align-items: flex-start;
    gap: var(--e-3);
    font-size: var(--t-sm);
    color: var(--gris-moyen);
    margin-bottom: var(--e-5);
}
.champ-case input[type="checkbox"] {
    width: 18px; height: 18px;
    min-height: 18px;
    margin-top: 3px;
    flex-shrink: 0;
    accent-color: var(--bleu-marine);
}

/* Champ piège anti-robot : invisible pour l'humain, rempli par les bots */
.pot-de-miel {
    position: absolute !important;
    left: -9999px !important;
    opacity: 0;
    height: 0;
    overflow: hidden;
}

/* -----------------------------------------------------------------------------
   11. CONTENU ÉDITORIAL (pages info)
   -------------------------------------------------------------------------- */
.article { max-width: var(--largeur-texte); margin: 0 auto; }

.article-meta {
    font-size: var(--t-xs);
    color: var(--gris-clair);
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-4);
    padding-bottom: var(--e-5);
    border-bottom: 1px solid var(--gris-bordure);
    margin-bottom: var(--e-6);
}

.article h2 { font-size: var(--t-xl); margin-top: var(--e-10); }
.article h3 { font-size: var(--t-lg); }
.article p  { line-height: 1.75; }

.article ul, .article ol { margin: 0 0 var(--e-5); padding-left: var(--e-5); }
.article li { margin-bottom: var(--e-2); line-height: 1.7; }

.article blockquote {
    margin: var(--e-6) 0;
    padding: var(--e-4) var(--e-5);
    border-left: 3px solid var(--or);
    background: var(--or-fond);
    font-style: normal;
    color: var(--gris-fonce);
}
.article blockquote p:last-child { margin-bottom: 0; }

/* Sommaire d'article : améliore le temps de lecture et les liens de section */
.sommaire {
    background: var(--blanc);
    border: 1px solid var(--gris-bordure);
    border-radius: var(--rayon-lg);
    padding: var(--e-5);
    margin-bottom: var(--e-8);
}
.sommaire-titre {
    font-family: var(--police-titre);
    font-size: var(--t-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--gris-moyen);
    margin-bottom: var(--e-3);
}
.sommaire ol { margin: 0; padding-left: var(--e-5); font-size: var(--t-sm); }
.sommaire li { margin-bottom: var(--e-2); }
.sommaire a { color: var(--gris-moyen); text-decoration: none; }
.sommaire a:hover { color: var(--bleu-marine); text-decoration: underline; }

/* Tableaux comparatifs */
.tableau-conteneur { overflow-x: auto; margin: var(--e-6) 0; -webkit-overflow-scrolling: touch; }

table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--t-sm);
    background: var(--blanc);
    border: 1px solid var(--gris-bordure);
    border-radius: var(--rayon);
}
th {
    background: var(--bleu-marine);
    color: var(--blanc);
    font-family: var(--police-titre);
    font-weight: 600;
    text-align: left;
    padding: var(--e-3) var(--e-4);
    font-size: var(--t-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
td {
    padding: var(--e-3) var(--e-4);
    border-top: 1px solid var(--gris-bordure);
    vertical-align: top;
}
tbody tr:nth-child(even) { background: var(--blanc-casse); }

/* Bloc de conversion en fin d'article */
.cta-article {
    background: var(--bleu-marine);
    color: var(--blanc);
    border-radius: var(--rayon-lg);
    padding: var(--e-8) var(--e-6);
    margin: var(--e-10) 0 var(--e-6);
    text-align: center;
}
.cta-article h3 { color: var(--blanc); margin-top: 0; }
.cta-article p  { color: rgba(255,255,255,0.82); max-width: 52ch; margin: 0 auto var(--e-5); }

/* Maillage interne : liens vers les pages voisines */
.liens-connexes {
    border-top: 1px solid var(--gris-bordure);
    padding-top: var(--e-6);
    margin-top: var(--e-8);
}
.liens-connexes ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e-3); }
.liens-connexes li { padding-left: var(--e-5); position: relative; font-size: var(--t-sm); }
.liens-connexes li::before {
    content: '→';
    position: absolute; left: 0;
    color: var(--or-fonce);
    font-weight: 700;
}

/* -----------------------------------------------------------------------------
   12. RÉASSURANCE ET BADGES
   -------------------------------------------------------------------------- */
/* ⚠️ Ces éléments doivent rester VRAIS. Un badge inventé ou un faux logo de
   client est une pratique commerciale trompeuse (art. L121-2 du Code de la
   consommation : jusqu'à 300 000 € d'amende et 2 ans d'emprisonnement).
   Ne mets ici que ce que tu peux prouver. */

.bandeau-reassurance {
    background: var(--blanc);
    border-block: 1px solid var(--gris-bordure);
    padding: var(--e-5) 0;
}
.reassurance-grille {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--e-5);
    text-align: center;
}
.reassurance-item {
    font-size: var(--t-sm);
    color: var(--gris-moyen);
    line-height: 1.45;
}
.reassurance-item strong {
    display: block;
    font-family: var(--police-titre);
    font-size: var(--t-sm);
    color: var(--bleu-marine);
    margin-bottom: 2px;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--e-2);
    font-size: var(--t-xs);
    font-weight: 600;
    padding: var(--e-1) var(--e-3);
    border-radius: 999px;
    border: 1px solid;
    line-height: 1.6;
}
.badge-neutre  { background: var(--gris-fond);      color: var(--gris-moyen);  border-color: var(--gris-bordure); }
.badge-or      { background: var(--or-fond);        color: var(--or-fonce);    border-color: var(--or); }
.badge-vert    { background: var(--vert-fond);      color: var(--vert);        border-color: #9AE6B4; }
.badge-info    { background: var(--bleu-info-fond); color: var(--bleu-info);   border-color: #BEE3F8; }

.liste-badges { display: flex; flex-wrap: wrap; gap: var(--e-2); margin: var(--e-4) 0; }

/* -----------------------------------------------------------------------------
   13. FAQ
   -------------------------------------------------------------------------- */
.faq { max-width: var(--largeur-texte); margin: 0 auto; }

.faq details {
    background: var(--blanc);
    border: 1px solid var(--gris-bordure);
    border-radius: var(--rayon);
    margin-bottom: var(--e-3);
    overflow: hidden;
}
.faq details[open] { border-color: var(--bleu-marine); }

.faq summary {
    padding: var(--e-4) var(--e-5);
    cursor: pointer;
    font-family: var(--police-titre);
    font-weight: 600;
    font-size: var(--t-base);
    color: var(--bleu-marine);
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--e-4);
    min-height: 46px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: '+';
    font-size: var(--t-lg);
    font-weight: 400;
    color: var(--or-fonce);
    flex-shrink: 0;
    transition: transform var(--transition);
}
.faq details[open] summary::after { content: '−'; }
.faq summary:hover { background: var(--blanc-casse); }

.faq-reponse {
    padding: 0 var(--e-5) var(--e-5);
    font-size: var(--t-sm);
    color: var(--gris-moyen);
    line-height: 1.7;
}
.faq-reponse > *:last-child { margin-bottom: 0; }

/* -----------------------------------------------------------------------------
   14. PIED DE PAGE
   -------------------------------------------------------------------------- */
.pied {
    background: var(--bleu-marine-fonce);
    color: rgba(255,255,255,0.62);
    padding: var(--e-10) 0 var(--e-5);
    font-size: var(--t-sm);
    margin-top: var(--e-12);
}

.pied-grille {
    display: grid;
    grid-template-columns: 1.6fr repeat(3, 1fr);
    gap: var(--e-6);
    padding-bottom: var(--e-8);
    border-bottom: 1px solid rgba(255,255,255,0.10);
}

.pied h4 {
    color: var(--blanc);
    font-size: var(--t-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0 0 var(--e-4);
}
.pied ul { list-style: none; padding: 0; margin: 0; }
.pied li { margin-bottom: var(--e-2); }
.pied a { color: rgba(255,255,255,0.62); text-decoration: none; }
.pied a:hover { color: var(--blanc); text-decoration: underline; }

.pied-bas {
    padding-top: var(--e-5);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--e-4);
    font-size: var(--t-xs);
    color: rgba(255,255,255,0.42);
}

/* Avertissement juridique du pied de page : ne le supprime pas. */
.pied-avertissement {
    font-size: var(--t-xs);
    line-height: 1.6;
    color: rgba(255,255,255,0.48);
    max-width: 68ch;
    margin-top: var(--e-4);
    padding: var(--e-4);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: var(--rayon);
}

/* -----------------------------------------------------------------------------
   15. PAGES TRANSACTIONNELLES
   -------------------------------------------------------------------------- */
.page-etroite {
    max-width: 620px;
    margin: var(--e-10) auto var(--e-12);
    background: var(--blanc);
    border: 1px solid var(--gris-bordure);
    border-radius: var(--rayon-lg);
    padding: var(--e-8);
    box-shadow: var(--ombre);
}

.pastille-etat {
    width: 64px; height: 64px;
    border-radius: 50%;
    display: grid; place-items: center;
    margin: 0 auto var(--e-5);
    font-size: 30px;
    line-height: 1;
}
.pastille-succes { background: var(--vert-fond);  color: var(--vert); }
.pastille-echec  { background: var(--rouge-fond); color: var(--rouge); }

/* Dashboard admin */
.admin-grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: var(--e-4);
    margin-bottom: var(--e-8);
}
.stat {
    background: var(--blanc);
    border: 1px solid var(--gris-bordure);
    border-radius: var(--rayon-lg);
    padding: var(--e-5);
}
.stat-label {
    font-size: var(--t-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gris-clair);
    margin-bottom: var(--e-2);
}
.stat-valeur {
    font-family: var(--police-titre);
    font-size: var(--t-2xl);
    font-weight: 800;
    color: var(--bleu-marine);
    line-height: 1;
    letter-spacing: -0.03em;
}
.stat-note { font-size: var(--t-xs); color: var(--gris-clair); margin-top: var(--e-2); }

/* -----------------------------------------------------------------------------
   16. UTILITAIRES
   -------------------------------------------------------------------------- */
.centre       { text-align: center; }
.mb-0  { margin-bottom: 0 !important; }
.mt-0  { margin-top: 0 !important; }
.mb-4  { margin-bottom: var(--e-4); }
.mb-6  { margin-bottom: var(--e-6); }
.mt-6  { margin-top: var(--e-6); }
.discret { color: var(--gris-clair); font-size: var(--t-sm); }

/* Masqué visuellement mais lu par les lecteurs d'écran */
.lecteur-ecran {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* -----------------------------------------------------------------------------
   17. RESPONSIVE — approche mobile-first inversée (on dégrade depuis le desktop)
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
    .hero-grille   { grid-template-columns: 1fr; gap: var(--e-8); }
    .grille-4      { grid-template-columns: repeat(2, 1fr); }
    .grille-offres { grid-template-columns: 1fr; }
    .offre-vedette { order: -1; }   /* L'offre recommandée passe en premier sur mobile */
    .pied-grille   { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
    :root {
        --t-3xl: 2rem;      /* 32px */
        --t-2xl: 1.625rem;  /* 26px */
        --t-xl:  1.375rem;
        --e-12:  4rem;
        --e-10:  3rem;
    }

    .conteneur { padding: 0 var(--e-4); }

    /* La navigation repliable est définie plus bas, à 1024 px (section 25). */

    .grille-2, .grille-3, .grille-4 { grid-template-columns: 1fr; }
    .champs-grille { grid-template-columns: 1fr; }
    .reassurance-grille { grid-template-columns: repeat(2, 1fr); gap: var(--e-4); text-align: left; }
    .pied-grille { grid-template-columns: 1fr; gap: var(--e-6); }
    .hero { padding: var(--e-8) 0; }
    .page-etroite { padding: var(--e-5); margin: var(--e-5) var(--e-4) var(--e-8); }
    .bouton { width: 100%; }
    .hero-actions .bouton { width: 100%; }
    .article-meta { gap: var(--e-2); }
}

@media (max-width: 420px) {
    .reassurance-grille { grid-template-columns: 1fr; }
    .offre { padding: var(--e-5); }
}

/* -----------------------------------------------------------------------------
   19. SOMMAIRES — choix du secteur, puis fiches de documents
   -----------------------------------------------------------------------------
   Le catalogue affichait quatre cents liens soulignés les uns sous les autres,
   sur une colonne étroite à gauche. Deux niveaux désormais : on choisit son
   métier sur une seule page, puis on voit ses documents en fiches.
   -------------------------------------------------------------------------- */

/* --- Niveau 1 : les secteurs ---------------------------------------------- */
.grille-secteurs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--e-5);
}

.carte-secteur {
    display: flex;
    flex-direction: column;
    gap: var(--e-3);
    padding: var(--e-5);
    background: var(--blanc);
    border: 1px solid var(--gris-bordure);
    border-left: 3px solid var(--bleu-marine);
    border-radius: var(--rayon);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.carte-secteur:hover {
    border-left-color: var(--or);
    box-shadow: var(--ombre);
    transform: translateY(-2px);
    text-decoration: none;
}

.carte-secteur__nom {
    font-family: var(--police-titre);
    font-size: var(--t-lg);
    font-weight: 700;
    color: var(--bleu-marine);
    line-height: 1.25;
}

.carte-secteur__risque {
    font-size: var(--t-sm);
    color: var(--gris-moyen);
    line-height: 1.55;
    flex: 1;
}

.carte-secteur__pied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--e-3);
    border-top: 1px solid var(--gris-bordure);
}

.carte-secteur__compte {
    font-family: var(--police-titre);
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gris-moyen);
}

.carte-secteur__fleche {
    color: var(--or-fonce);
    font-size: var(--t-md);
    transition: transform var(--transition);
}
.carte-secteur:hover .carte-secteur__fleche { transform: translateX(4px); }

/* --- Niveau 2 : les fiches de documents ----------------------------------- */
.grille-fiches {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: var(--e-4);
}

.fiche {
    display: flex;
    flex-direction: column;
    gap: var(--e-2);
    padding: var(--e-4) var(--e-5);
    background: var(--blanc);
    border: 1px solid var(--gris-bordure);
    border-radius: var(--rayon);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.fiche:hover {
    border-color: var(--or);
    box-shadow: var(--ombre);
    text-decoration: none;
}

.fiche__surtitre {
    font-family: var(--police-titre);
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--or-fonce);
}

.fiche__titre {
    font-size: var(--t-base);
    font-weight: 600;
    color: var(--bleu-marine);
    line-height: 1.4;
    flex: 1;
}
.fiche:hover .fiche__titre { color: var(--bleu-marine-clair); }

.fiche__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--e-2);
    margin-top: var(--e-2);
    padding-top: var(--e-3);
    border-top: 1px solid var(--gris-bordure);
}

.fiche__probleme {
    font-size: var(--t-xs);
    color: var(--gris-moyen);
}

@media (max-width: 720px) {
    .grille-secteurs,
    .grille-fiches { grid-template-columns: 1fr; }
}


/* -----------------------------------------------------------------------------
   20. REFONTE VISUELLE
   -----------------------------------------------------------------------------
   Le site avait l'allure d'un document administratif : titres énormes, angles
   coupés au couteau, aucune image, et un bouton d'appel à l'action illisible.
   Ce bloc corrige l'apparence sans toucher à la structure des pages.
   -------------------------------------------------------------------------- */

/* --- Le bug du bouton de navigation ---------------------------------------
   « .nav a » fixait la couleur du texte en gris, et sa spécificité (0,1,1)
   l'emportait sur celle de « .bouton-marine » (0,1,0). Résultat : le bouton le
   plus important du site s'affichait en gris foncé sur bleu marine, donc
   pratiquement invisible. */
.nav a.bouton {
    border-bottom: none;
    text-decoration: none;
}
.nav a.bouton-marine,
.nav a.bouton-marine:hover { color: var(--blanc); }
.nav a.bouton-or,
.nav a.bouton-or:hover     { color: var(--bleu-marine-fonce); }

/* --- Hero : respirer, sans écraser ---------------------------------------- */
.hero { padding: var(--e-10) 0 var(--e-8); }
.hero h1 { max-width: 16ch; }
.hero-grille {
    grid-template-columns: 1.05fr 0.6fr 0.75fr;
    align-items: center;
    gap: var(--e-6);
}

@media (max-width: 1100px) {
    .hero-grille { grid-template-columns: 1fr 1fr; }
    .apercu-doc { grid-row: span 2; }
}
@media (max-width: 820px) {
    .hero-grille { grid-template-columns: 1fr; }
    .apercu-doc { grid-row: auto; }
}

/* --- Aperçu du document ---------------------------------------------------
   Le site ne montrait nulle part ce qu'on achète. C'est la première question
   d'un visiteur : « ça ressemble à quoi ? ». On dessine donc une page de
   contrat en CSS pur — aucune image à charger, aucun poids supplémentaire. */
.apercu-doc {
    position: relative;
    background: var(--blanc);
    border-radius: var(--rayon);
    box-shadow: var(--ombre-lg);
    padding: var(--e-5) var(--e-5) var(--e-6);
    transform: rotate(-1.2deg);
    max-width: 300px;
    margin: 0 auto;
}
.apercu-doc::after {
    /* La feuille du dessous : suggère un dossier, pas une page isolée. */
    content: '';
    position: absolute;
    inset: 10px -10px -10px 10px;
    background: var(--blanc);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
    transform: rotate(3deg);
    z-index: -1;
}
.apercu-doc__entete {
    font-family: var(--police-titre);
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--or-fonce);
    border-bottom: 2px solid var(--gris-bordure);
    padding-bottom: var(--e-2);
    margin-bottom: var(--e-4);
}
.apercu-doc__titre {
    font-family: var(--police-titre);
    font-weight: 700;
    font-size: var(--t-sm);
    color: var(--bleu-marine);
    margin-bottom: var(--e-4);
    line-height: 1.35;
}
/* Les lignes de texte simulées. Largeurs volontairement inégales : des barres
   toutes identiques ne ressemblent pas à du texte. */
.apercu-doc__ligne {
    height: 6px;
    background: var(--gris-fond);
    border-radius: 3px;
    margin-bottom: 9px;
}
.apercu-doc__ligne--courte { width: 62%; }
.apercu-doc__ligne--moyenne { width: 84%; }
.apercu-doc__ligne--accent { background: var(--or-fond); border: 1px solid var(--or-clair); }

.apercu-doc__pied {
    margin-top: var(--e-5);
    padding-top: var(--e-3);
    border-top: 1px solid var(--gris-bordure);
    display: flex;
    align-items: center;
    gap: var(--e-2);
    font-size: var(--t-xs);
    color: var(--gris-moyen);
}
.apercu-doc__sceau {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--or-fond);
    border: 2px solid var(--or);
    display: grid; place-items: center;
    color: var(--or-fonce);
    font-weight: 700;
    font-size: 13px;
    flex: none;
}

/* --- Bandeau de réassurance : des cartes, plus une ligne de texte nu ------ */
.reassurance-grille > * {
    background: var(--blanc);
    border: 1px solid var(--gris-bordure);
    border-radius: var(--rayon);
    padding: var(--e-4);
}

/* --- Cartes : plus d'air, moins de bordure dure --------------------------- */
.carte { border-radius: var(--rayon); }
.hero-carte { border-radius: var(--rayon-lg); }

@media (max-width: 900px) {
    .apercu-doc { transform: none; margin-top: var(--e-6); }
    .apercu-doc::after { display: none; }
}

/* -----------------------------------------------------------------------------
   18. IMPRESSION — un client imprimera son bon de commande ou une page conseil
   -------------------------------------------------------------------------- */
@media print {
    .entete, .pied, .nav, .cta-article, .bouton, .hero::before { display: none !important; }
    body { background: #fff; color: #000; font-size: 11pt; }
    .hero { background: #fff !important; color: #000; padding: 0; }
    .hero h1, .hero .chapeau { color: #000; }
    a { text-decoration: underline; color: #000; }
    a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: 9pt; color: #555; }
    .carte, .encadre, table { break-inside: avoid; }
    h2, h3 { break-after: avoid; }
}


/* =============================================================================
   21. PRESTATIONS SUR MESURE (page d'accueil)
   Section sombre : le site vend des modèles, ce bloc vend du temps de travail.
   Les cartes doivent rester lisibles sur fond marine, d'où les couleurs
   redéfinies plutôt qu'héritées de .carte.
   ========================================================================== */

.carte-prestation {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.14);
    display: flex;
    flex-direction: column;
    gap: var(--e-3);
}

.carte-prestation:hover {
    border-color: var(--or);
    background: rgba(255, 255, 255, 0.07);
    box-shadow: none;
}

.carte-prestation h3 {
    color: var(--blanc);
    margin: 0;
    font-size: var(--t-lg);
}

.carte-prestation p {
    color: rgba(255, 255, 255, 0.78);
    margin: 0;
}

.etiquette-prestation {
    align-self: flex-start;
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--or);
    border: 1px solid rgba(214, 158, 46, 0.45);
    border-radius: 999px;
    padding: 0.25rem 0.7rem;
}

.prestation-prix {
    font-family: var(--police-titre, inherit);
    font-weight: 700;
    font-size: var(--t-lg);
    color: var(--or) !important;
    margin-top: auto !important;
    padding-top: var(--e-2);
}

/* Le bouton fantôme sert de second choix : présent, mais qui ne crie pas. */
.carte-prestation .bouton-mention {
    color: rgba(255, 255, 255, 0.55);
    text-align: center;
    margin: 0;
}

.carte-prestation .bouton-mention a {
    color: var(--or-clair);
}

.prestations-note {
    margin-top: var(--e-8);
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
    font-size: var(--t-sm);
    max-width: 60ch;
    margin-inline: auto;
}

.prestations-note strong { color: var(--blanc); }

/* -----------------------------------------------------------------------------
   22. FINITIONS D'INTERFACE
   -----------------------------------------------------------------------------
   Trois corrections de confort, invisibles quand elles marchent :
   l'ancrage sous l'en-tête collante, le relief de l'en-tête au défilement,
   et le retour en haut sur les pages longues.
   -------------------------------------------------------------------------- */

/* L'en-tête est collante (68 px). Sans marge de défilement, un lien vers une
   ancre place le titre visé DERRIÈRE l'en-tête : le visiteur croit avoir
   atterri au mauvais endroit. */
[id] { scroll-margin-top: 88px; }

/* Relief de l'en-tête dès que la page défile : la barre se détache du contenu
   au lieu de flotter sans limite visible. */
.entete {
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.entete-defilee {
    box-shadow: 0 1px 16px rgba(10, 37, 64, 0.10);
    border-bottom-color: transparent;
}

/* Retour en haut — injecté par le script, absent sans JavaScript. */
.retour-haut {
    position: fixed;
    right: clamp(1rem, 3vw, 2rem);
    bottom: clamp(1rem, 3vw, 2rem);
    z-index: 90;

    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;

    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    background: var(--bleu-marine);
    color: var(--blanc);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;

    box-shadow: 0 4px 18px rgba(10, 37, 64, 0.28);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s, background 0.15s ease;
}

.retour-haut.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.retour-haut:hover,
.retour-haut:focus-visible {
    background: var(--or);
    color: var(--bleu-marine);
}

@media print {
    .retour-haut { display: none; }
}

/* -----------------------------------------------------------------------------
   23. DIAGNOSTIC DE FACTURATION ÉLECTRONIQUE
   -----------------------------------------------------------------------------
   Un questionnaire doit se traverser sans réfléchir à l'interface. Une question
   à l'écran, des réponses assez grandes pour être touchées au doigt, et une
   barre qui montre qu'on avance. Rien d'autre.
   -------------------------------------------------------------------------- */

/* --- Compte à rebours ---------------------------------------------------- */
.diag-rebours {
    display: flex;
    align-items: baseline;
    gap: var(--e-4);
    max-width: 760px;
    margin: 0 auto var(--e-8);
    padding: var(--e-5) var(--e-6);
    background: var(--bleu-marine);
    color: var(--blanc);
    border-radius: var(--rayon, 6px);
}

.diag-rebours-nombre {
    font-family: var(--police-titre);
    font-size: clamp(2rem, 6vw, 3rem);
    font-weight: 800;
    color: var(--or);
    line-height: 1;
    flex-shrink: 0;
}

.diag-rebours-texte {
    font-size: var(--t-sm);
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.5;
}

/* --- Le questionnaire ---------------------------------------------------- */
.diag {
    max-width: 760px;
    margin: 0 auto;
}

.diag-progression {
    height: 4px;
    background: var(--gris-bordure);
    border-radius: 999px;
    overflow: hidden;
}

.diag-progression-barre {
    height: 100%;
    width: 0;
    background: var(--or);
    transition: width 0.25s ease;
}

.diag-etape {
    margin: var(--e-3) 0 var(--e-6);
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gris-moyen);
}

.diag-champ {
    border: 0;
    padding: 0;
    margin: 0;
}

.diag-titre {
    font-family: var(--police-titre);
    font-size: var(--t-xl);
    font-weight: 700;
    color: var(--bleu-marine);
    line-height: 1.25;
    padding: 0;
    margin-bottom: var(--e-3);
}

.diag-aide {
    color: var(--gris-moyen);
    font-size: var(--t-sm);
    margin: 0 0 var(--e-6);
}

.diag-options {
    display: grid;
    gap: var(--e-3);
}

.diag-option {
    display: block;
    width: 100%;
    text-align: left;
    font-family: inherit;
    font-size: var(--t-base);
    line-height: 1.45;
    color: var(--gris-fonce);
    background: var(--blanc);
    border: 1px solid var(--gris-bordure);
    border-left: 3px solid var(--gris-bordure);
    border-radius: 4px;
    padding: var(--e-4) var(--e-5);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}

.diag-option:hover {
    border-color: var(--bleu-marine);
    border-left-color: var(--or);
    background: var(--blanc-casse);
}

.diag-option:active { transform: translateY(1px); }

.diag-option-choisie {
    border-color: var(--bleu-marine);
    border-left-color: var(--or);
    background: var(--or-fond);
    font-weight: 600;
}

.diag-navigation {
    margin-top: var(--e-6);
}


/* --- Le résultat --------------------------------------------------------- */
.diag-resultat {
    max-width: 760px;
    margin: 0 auto;
}

.diag-resultat:focus { outline: none; }

.diag-resultat-entete { margin-bottom: var(--e-8); }
.diag-resultat-entete h2 { margin: var(--e-2) 0 var(--e-4); }

.diag-resume {
    font-size: var(--t-md);
    line-height: 1.6;
    color: var(--gris-fonce);
    margin: 0;
}

.diag-dates {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--e-4);
    margin: var(--e-8) 0;
}

.diag-date {
    display: flex;
    flex-direction: column;
    gap: var(--e-2);
    padding: var(--e-5);
    background: var(--blanc);
    border: 1px solid var(--gris-bordure);
    border-top: 3px solid var(--or);
    border-radius: 4px;
}

.diag-date-libelle {
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--gris-moyen);
    line-height: 1.35;
}

.diag-date-valeur {
    font-family: var(--police-titre);
    font-size: var(--t-md);
    font-weight: 700;
    color: var(--bleu-marine);
    margin-top: auto;
}

/* --- Les actions --------------------------------------------------------- */
.diag-actions {
    list-style: none;
    counter-reset: diag;
    padding: 0;
    margin: 0 0 var(--e-8);
    display: grid;
    gap: var(--e-4);
}

.diag-action {
    counter-increment: diag;
    position: relative;
    padding: var(--e-5) var(--e-5) var(--e-5) calc(var(--e-8) + var(--e-5));
    background: var(--blanc);
    border: 1px solid var(--gris-bordure);
    border-radius: 4px;
}

.diag-action::before {
    content: counter(diag);
    position: absolute;
    left: var(--e-5);
    top: var(--e-5);
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--bleu-marine);
    color: var(--blanc);
    font-family: var(--police-titre);
    font-size: var(--t-xs);
    font-weight: 700;
}

.diag-action-quand {
    display: block;
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--or-fonce);
    margin-bottom: var(--e-2);
}

.diag-action-quoi {
    display: block;
    font-family: var(--police-titre);
    font-weight: 700;
    font-size: var(--t-base);
    color: var(--bleu-marine);
    margin-bottom: var(--e-2);
}

.diag-action-pourquoi {
    display: block;
    color: var(--gris-moyen);
    font-size: var(--t-sm);
    line-height: 1.6;
}

.diag-fin {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-3);
    margin-top: var(--e-8);
}

.diag-note {
    margin-top: var(--e-4);
    font-size: var(--t-xs);
    color: var(--gris-clair);
}

/* --- Écrans étroits ------------------------------------------------------ */
@media (max-width: 760px) {
    .diag-dates { grid-template-columns: 1fr; }
    .diag-rebours { flex-direction: column; gap: var(--e-2); }
    .diag-fin .bouton { width: 100%; }
}

/* --- Impression : le résultat doit tenir sur une feuille ----------------- */
@media print {
    .diag,
    .diag-rebours,
    .diag-fin,
    .diag-note { display: none; }

    .diag-action,
    .diag-date { border: 1px solid #999; break-inside: avoid; }
}

/* =============================================================================
   24. CALCULATEUR DE PÉNALITÉS DE RETARD
   =============================================================================
   Même parti pris que le diagnostic : le résultat doit se lire d'un coup d'œil,
   le chiffre en premier, le détail ensuite. Rien ici ne redéfinit les champs de
   formulaire du site — .champ et .champs-grille servent tels quels.
   ========================================================================== */

.calc { margin-top: var(--e-8); }

.calc-legende {
    font-size: var(--t-lg);
    margin-bottom: var(--e-4);
    color: var(--bleu-marine);
}

.calc-facultatif {
    display: inline-block;
    margin-left: var(--e-2);
    padding: 2px var(--e-2);
    border-radius: 999px;
    background: var(--gris-fond);
    color: var(--gris-moyen);
    font-family: var(--police-texte);
    font-size: var(--t-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    vertical-align: middle;
}

.calc-intro-secondaire {
    color: var(--gris-moyen);
    font-size: var(--t-sm);
    margin-bottom: var(--e-4);
}

#calc-lancer { margin-top: var(--e-4); }

/* --- Le résultat ---------------------------------------------------------- */
.calc-resultat {
    margin-top: var(--e-10);
    padding-top: var(--e-8);
    border-top: 2px solid var(--gris-bordure);
}
.calc-resultat:focus { outline: none; }

.calc-total {
    display: flex;
    flex-direction: column;
    gap: var(--e-2);
    padding: var(--e-8);
    border-radius: var(--rayon-lg);
    background: var(--bleu-marine);
    color: var(--blanc);
    text-align: center;
}

.calc-total-etiquette {
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--or);
}

.calc-total-nombre {
    font-family: var(--police-titre);
    font-weight: 700;
    font-size: var(--t-3xl);
    line-height: 1.1;
}

.calc-total-detail {
    font-size: var(--t-sm);
    color: rgba(255, 255, 255, 0.78);
}

/* --- Le détail ligne à ligne --------------------------------------------- */
.calc-lignes {
    margin-top: var(--e-6);
    border: 1px solid var(--gris-bordure);
    border-radius: var(--rayon);
    overflow: hidden;
    background: var(--blanc);
}

.calc-ligne {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--e-4);
    padding: var(--e-4) var(--e-5);
    border-bottom: 1px solid var(--gris-bordure);
}
.calc-ligne:last-child { border-bottom: none; }

.calc-ligne-nom {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-weight: 600;
    color: var(--bleu-marine);
}

.calc-ligne-detail {
    font-weight: 400;
    font-size: var(--t-xs);
    color: var(--gris-clair);
}

.calc-ligne-valeur {
    font-family: var(--police-titre);
    font-weight: 700;
    font-size: var(--t-base);
    color: var(--bleu-marine);
    white-space: nowrap;
}

.calc-ligne-total {
    background: var(--gris-fond);
    border-top: 2px solid var(--bleu-marine);
}
.calc-ligne-total .calc-ligne-valeur { font-size: var(--t-lg); }

.calc-accroissement {
    margin-top: var(--e-4);
    padding: var(--e-4) var(--e-5);
    border-left: 3px solid var(--or);
    background: var(--or-fond);
    font-size: var(--t-sm);
    color: var(--bleu-marine);
}

/* --- La lettre générée ---------------------------------------------------- */
.calc-titre-lettre { margin-top: var(--e-10); }

.calc-lettre {
    width: 100%;
    padding: var(--e-5);
    border: 1px solid var(--gris-bordure);
    border-radius: var(--rayon);
    background: var(--blanc);
    color: var(--bleu-marine);
    font-family: var(--police-mono);
    font-size: var(--t-sm);
    line-height: 1.65;
    resize: vertical;
}
.calc-lettre:focus {
    outline: none;
    border-color: var(--bleu-marine);
    box-shadow: 0 0 0 3px rgba(10, 37, 64, 0.12);
}

.calc-lettre-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--e-3);
    margin-top: var(--e-4);
}

.calc-copie {
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--vert);
}

.calc-suite { margin-top: var(--e-8); }

.calc-note {
    margin-top: var(--e-4);
    font-size: var(--t-xs);
    color: var(--gris-clair);
}

/* --- Écrans étroits ------------------------------------------------------- */
@media (max-width: 760px) {
    .calc-total { padding: var(--e-6) var(--e-4); }
    .calc-total-nombre { font-size: var(--t-2xl); }
    .calc-ligne { flex-direction: column; align-items: flex-start; gap: var(--e-1); }
    .calc-lettre-actions .bouton { width: 100%; }
}

/* --- Impression : le décompte est une pièce, il doit s'imprimer proprement -- */
@media print {
    .calc,
    .calc-lettre-actions,
    .calc-suite,
    .calc-note { display: none; }

    .calc-resultat { border-top: none; padding-top: 0; }

    .calc-total {
        background: none;
        color: #000;
        border: 2px solid #000;
        padding: 12pt;
    }
    .calc-total-etiquette,
    .calc-total-detail { color: #000; }

    .calc-lignes { border: 1px solid #999; }
    .calc-lettre {
        border: 1px solid #999;
        height: auto;
        font-size: 10pt;
    }
}

/* =============================================================================
   25. NAVIGATION — SEUIL DE REPLI
   =============================================================================
   Le menu passait en burger à 760 px seulement. Entre 760 et 1180 px — un iPad
   en paysage, un petit portable — les entrées se serraient au point que chaque
   libellé se coupait en deux : mesuré à 1025 px, des liens de 64 px de haut
   contre 41 px à 1366 px, et c'était déjà le cas avant l'ajout du calculateur.
   Le repli se déclenche donc à 1180 px, largeur à laquelle la barre complète
   tient encore sur une seule ligne. Les règles sont volontairement
   identiques à celles qui vivaient dans la requête 760 px : c'est le seuil qui
   change, pas l'apparence du menu déplié.
   ========================================================================== */

@media (max-width: 1180px) {
    /* Navigation repliable, pilotée par script.js */
    .nav-bascule { display: block; }
    .nav {
        display: none;
        position: absolute;
        top: 68px; left: 0; right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: var(--blanc);
        border-bottom: 1px solid var(--gris-bordure);
        box-shadow: var(--ombre);
        padding: var(--e-2) var(--e-4) var(--e-4);
    }
    .nav.ouvert { display: flex; }
    .nav a { padding: var(--e-3) 0; border-bottom: 1px solid var(--gris-fond); }
    .nav .bouton { margin-top: var(--e-3); }
}
/* =============================================================================
   26. GÉNÉRATEUR DE MENTIONS OBLIGATOIRES
   =============================================================================
   Une liste dense qui doit rester lisible : chaque mention est un titre, une
   explication, et son fondement en petit. Le fondement est ce qui distingue cet
   outil d'une liste trouvée sur un forum — on lui donne donc sa place, sans
   qu'il concurrence le titre.
   ========================================================================== */

.calc-groupe { margin-top: var(--e-8); }

.calc-sous-titre {
    font-family: var(--police-titre);
    font-size: var(--t-lg);
    color: var(--bleu-marine);
    margin: 0 0 var(--e-4);
    padding-bottom: var(--e-2);
    border-bottom: 2px solid var(--gris-fond);
}

.calc-ligne-mention {
    padding: var(--e-4) 0;
    border-bottom: 1px solid var(--gris-fond);
}
.calc-ligne-mention:last-child { border-bottom: none; }

.calc-mention-titre {
    margin: 0 0 var(--e-1);
    color: var(--bleu-marine);
}

.calc-mention-texte {
    margin: 0 0 var(--e-2);
    color: var(--gris-fonce);
}

.calc-mention-fondement {
    margin: 0;
    font-family: var(--police-mono);
    font-size: var(--t-xs);
    color: var(--gris-moyen);
}

.calc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-3);
    margin-top: var(--e-6);
}

.calc-zone-texte {
    width: 100%;
    font-family: var(--police-mono);
    font-size: var(--t-xs);
    line-height: 1.6;
    color: var(--gris-fonce);
    background: var(--gris-fond);
    border: 1px solid var(--gris-bordure);
    border-radius: var(--rayon);
    padding: var(--e-4);
    resize: vertical;
}
.calc-zone-texte:focus {
    outline: 2px solid var(--or);
    outline-offset: 2px;
}