/* =============================================================================
   Refonte « Dossier » — plan-maitrise-sanitaire.fr
   =============================================================================

   Direction retenue : fond papier, vert sanitaire, grille filetée, libellés
   techniques en monospace. Aucune ombre : la hiérarchie passe par les filets
   1px et les fonds.

   Périmètre : l'en-tête et le pied de page sur tout le site, plus l'intégralité
   de la page d'accueil (`body.page-home`). Les autres gabarits conservent le
   design précédent — les classes ci-dessous sont donc soit préfixées `dc-`,
   soit portées par `.page-home`, jamais globales.

   Chargée après style.css : ce qui suit gagne à spécificité égale.
   ============================================================================= */

:root {
    /* Surfaces */
    --dc-paper:        #F6F5F1;
    --dc-surface:      #FFFFFF;

    /* Encre */
    --dc-ink:          #14181C;
    --dc-ink-2:        #2E3438;
    --dc-text:         #4A5157;
    --dc-text-3:       #6B7278;

    /* Sur fond sombre */
    --dc-on-dark:      #C4CACE;
    --dc-on-dark-2:    #9AA1A6;
    --dc-on-dark-3:    #7C8489;

    /* Vert sanitaire */
    --dc-green:        #0F6B4F;
    --dc-green-dark:   #0B4F3A;
    --dc-green-bg:     #EEF2EC;
    --dc-green-bg-2:   #FAFCF9;
    --dc-green-line:   #C9CFC9;
    --dc-green-light:  #9ED3BE;
    --dc-green-light-2:#BCE0D3;

    /* Filets */
    --dc-line:         #E0DED6;
    --dc-line-soft:    #F0EEE8;
    --dc-line-dark:    #2A3035;

    /* Signal */
    --dc-red:          #B4453A;
    --dc-terracotta:   #C77B5E;
    --dc-word:         #2A4B7C;
    --dc-empty:        #D6D3CB;
    --dc-track:        #EDEBE4;

    /* Typo */
    --dc-font:         'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --dc-mono:         'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    /* Gabarit */
    --dc-max:          1180px;
    --dc-pad:          28px;
    --dc-section:      clamp(52px, 6vw, 80px);
}

/* -----------------------------------------------------------------------------
   Base
   -----------------------------------------------------------------------------
   Piège de cascade rencontré ici : `body.page-home a` pèse (0,1,2) — deux
   éléments et une classe — et l'emporte donc sur `.dc-btn--green` (0,1,0),
   quel que soit l'ordre de déclaration. Le texte des boutons devenait vert sur
   fond vert. Les composants concernés portent pour cette raison une double
   classe (`.dc-btn.dc-btn--green`, (0,2,0)) ou un parent (`.dc-header .dc-nav a`),
   ce qui les fait gagner sur la règle de lien générique.

   `style.css` souligne tous les liens (`a { text-decoration: underline }`) :
   on le neutralise ici pour l'en-tête et le pied de page, présents sur les
   289 pages du site, et pour toute la page d'accueil.
   ----------------------------------------------------------------------------- */

body.page-home a,
.dc-header a,
.dc-footer a {
    text-decoration: none;
}
body.page-home a         { color: var(--dc-green); }
body.page-home a:hover   { color: var(--dc-green-dark); }
body.page-home table     { border-collapse: collapse; }

/* -----------------------------------------------------------------------------
   Primitives
   ----------------------------------------------------------------------------- */

.dc-wrap {
    max-width: var(--dc-max);
    margin: 0 auto;
    padding-inline: var(--dc-pad);
}

/* Libellé technique de section (eyebrow). */
.dc-eyebrow {
    font-family: var(--dc-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--dc-green);
}
.dc-eyebrow--terracotta { color: var(--dc-terracotta); }
.dc-eyebrow--muted      { color: var(--dc-text-3); letter-spacing: 0.06em; }

.dc-h2 {
    margin: 16px 0 0;
    font-size: clamp(27px, 3.5vw, 40px);
    line-height: 1.1;
    letter-spacing: -0.03em;
    font-weight: 700;
    text-wrap: balance;
}
.dc-h2--sm {
    font-size: clamp(25px, 3.2vw, 36px);
    line-height: 1.12;
}
/* Paragraphe d'accroche (chapô de section). À ne pas confondre avec
   `.dc-leadmagnet`, le bloc de téléchargement du PMS vierge. */
.dc-lead {
    margin: 14px 0 0;
    font-size: 17px;
    line-height: 1.55;
    color: var(--dc-text);
}

/* Boutons — rayon 2px, seul rayon de toute la direction. */
.dc-btn {
    display: inline-block;
    padding: 15px 28px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 2px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.dc-btn.dc-btn--green        { background: var(--dc-green); color: #fff; }
.dc-btn.dc-btn--green:hover  { background: var(--dc-green-dark); color: #fff; }
.dc-btn.dc-btn--outline      { border-color: var(--dc-ink); color: var(--dc-ink); background: none; }
.dc-btn.dc-btn--outline:hover{ background: var(--dc-ink); color: var(--dc-paper); }
.dc-btn.dc-btn--ink          { background: var(--dc-ink); color: var(--dc-paper); }
.dc-btn.dc-btn--ink:hover    { background: var(--dc-green); color: #fff; }
.dc-btn.dc-btn--white        { background: #fff; color: var(--dc-green-dark); }
.dc-btn.dc-btn--white:hover  { background: var(--dc-ink); color: #fff; }
.dc-btn--sm           { padding: 14px 26px; font-size: 15px; }

/* -----------------------------------------------------------------------------
   En-tête — appliqué à tout le site
   -----------------------------------------------------------------------------
   Contrainte structurante : une seule ligne à toutes les largeurs. L'ordre de
   compression est volontaire — le mot-repère se tronque en premier, la nav
   défile ensuite, « Connexion » se tronque, et le bouton « Créer mon PMS » ne
   rétrécit jamais. Il doit rester cliquable à 360px sans débordement.
   ----------------------------------------------------------------------------- */

.dc-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(246, 245, 241, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--dc-line);
}
.dc-header__inner {
    max-width: var(--dc-max);
    margin: 0 auto;
    padding: 12px clamp(12px, 3vw, 28px);
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: clamp(8px, 2vw, 20px);
    min-width: 0;
}
.dc-header .dc-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--dc-ink);
    flex: 0 1 auto;   /* 1er à céder */
    min-width: 0;
    overflow: hidden;
}
.dc-header .dc-logo:hover { color: var(--dc-ink); }
.dc-logo__mark {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;   /* ne rétrécit jamais */
    background: var(--dc-ink);
    color: var(--dc-paper);
    font-family: var(--dc-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.02em;
}
.dc-logo__name {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
/* En dessous de 520 px, le nom cédait jusqu'à ne plus afficher que « p. » :
   une ellipse sur deux lettres ne renseigne personne et occupe la place des
   liens. Le pavé « PMS » porte seul l'identité à cette largeur. */
@media (max-width: 520px) {
    .dc-logo__name { display: none; }
}

/* --- Menu dépliable (sous 780 px) ---
   Au-delà, la barre tient sur une ligne et le bouton n'existe pas. En dessous,
   les liens quittent la barre pour le panneau : compressés, ils devenaient
   illisibles. Le CTA reste dans la barre à toutes les largeurs. */
.dc-burger,
.dc-menu { display: none; }

.dc-burger {
    place-items: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    padding: 0;
    border: 1px solid var(--dc-line);
    background: var(--dc-surface);
    border-radius: 2px;
    cursor: pointer;
}
/* Trois traits : le trait central est l'élément, les deux autres ses pseudos. */
.dc-burger__bars,
.dc-burger__bars::before,
.dc-burger__bars::after {
    display: block;
    width: 17px;
    height: 1.5px;
    background: var(--dc-ink);
}
.dc-burger__bars {
    position: relative;
}
.dc-burger__bars::before,
.dc-burger__bars::after {
    content: '';
    position: absolute;
    left: 0;
}
.dc-burger__bars::before { top: -5.5px; }
.dc-burger__bars::after  { top:  5.5px; }
.dc-burger[aria-expanded="true"] { background: var(--dc-ink); }
.dc-burger[aria-expanded="true"] .dc-burger__bars { background: transparent; }
.dc-burger[aria-expanded="true"] .dc-burger__bars::before,
.dc-burger[aria-expanded="true"] .dc-burger__bars::after {
    top: 0;
    background: var(--dc-paper);
}
.dc-burger[aria-expanded="true"] .dc-burger__bars::before { transform: rotate(45deg); }
.dc-burger[aria-expanded="true"] .dc-burger__bars::after  { transform: rotate(-45deg); }

.dc-menu {
    border-top: 1px solid var(--dc-line);
    background: var(--dc-paper);
}
/* Deux classes : `body.page-article a` et `body.page-home a` valent (0,1,2) et
   repeindraient ces liens en vert ; `.dc-header .dc-menu a` vaut (0,2,1) et
   l'emporte quel que soit l'ordre de déclaration. */
.dc-header .dc-menu a {
    display: block;
    padding: 15px clamp(12px, 3vw, 28px);
    font-size: 16px;
    font-weight: 500;
    color: var(--dc-ink);
    border-bottom: 1px solid var(--dc-line-soft);
}
.dc-header .dc-menu a:last-child { border-bottom: 0; }
.dc-header .dc-menu a:hover      { color: var(--dc-green); }

@media (max-width: 780px) {
    /* `.dc-header` en préfixe : ce bloc précède les déclarations de `.dc-nav`,
       et à spécificité égale la dernière déclarée l'emporterait. */
    .dc-header .dc-nav,
    .dc-header .dc-header__login { display: none; }
    .dc-burger { display: grid; }
    /* Double classe : `.mobile-menu--open` (style.css) seule perdrait contre
       `.dc-menu { display: none }`, déclaré plus tard dans la cascade. */
    .dc-menu.mobile-menu--open { display: block; }
}
.dc-nav {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-left: auto;
    font-size: 13.5px;
    white-space: nowrap;
    overflow-x: auto;
    min-width: 0;
    flex: 0 1 auto;   /* 2e à céder : défile */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.dc-nav::-webkit-scrollbar { display: none; }
.dc-header .dc-nav a       { color: var(--dc-text); }
/* Entrée de nav correspondant à la page courante. */
.dc-header .dc-nav a.is-active { color: var(--dc-ink); font-weight: 600; }
.dc-header .dc-nav a:hover { color: var(--dc-ink); }
.dc-header__actions {
    display: flex;
    align-items: center;
    gap: clamp(8px, 2vw, 14px);
    flex: 0 0 auto;
    overflow: hidden;
}
.dc-header .dc-header__login {
    font-size: 14px;
    color: var(--dc-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 0 1 auto;   /* 3e à céder */
    min-width: 0;
}
.dc-header .dc-header__login:hover { color: var(--dc-ink); }
.dc-header .dc-header__cta {
    display: inline-block;
    flex: 0 0 auto;   /* ne cède jamais */
    padding: 10px clamp(12px, 2.4vw, 18px);
    background: var(--dc-green);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    border-radius: 2px;
    white-space: nowrap;
    transition: background .16s ease;
}
.dc-header .dc-header__cta:hover { background: var(--dc-green-dark); color: #fff; }

/* -----------------------------------------------------------------------------
   Pied de page — appliqué à tout le site
   ----------------------------------------------------------------------------- */

.dc-footer {
    background: var(--dc-ink);
    color: var(--dc-on-dark-2);
    font-family: var(--dc-font);
}
.dc-footer__grid {
    max-width: var(--dc-max);
    margin: 0 auto;
    padding: 64px var(--dc-pad) 28px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
    gap: 40px;
}
.dc-footer .dc-footer__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--dc-paper);
}
.dc-footer .dc-footer__brand:hover { color: #fff; }
.dc-footer__mark {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    background: var(--dc-paper);
    color: var(--dc-ink);
    font-family: var(--dc-mono);
    font-size: 10px;
}
.dc-footer__baseline {
    margin: 16px 0 0;
    font-size: 14px;
    line-height: 1.6;
    max-width: 30em;
}
.dc-footer h4 {
    margin: 0 0 14px;
    font-size: 11px;
    font-family: var(--dc-mono);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--dc-paper);
    font-weight: 400;
}
.dc-footer ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 9px;
    font-size: 14px;
}
.dc-footer ul li a       { color: var(--dc-on-dark-2); }
.dc-footer ul li a:hover { color: #fff; }
.dc-footer__bottom {
    max-width: var(--dc-max);
    margin: 0 auto;
    padding: 20px var(--dc-pad) 44px;
    border-top: 1px solid var(--dc-line-dark);
    display: flex;
    justify-content: space-between;
    gap: 20px;
    font-size: 13px;
    color: var(--dc-on-dark-3);
}

/* -----------------------------------------------------------------------------
   Page d'accueil
   ----------------------------------------------------------------------------- */

body.page-home {
    background: var(--dc-paper);
    color: var(--dc-ink);
    font-family: var(--dc-font);
    overflow-x: hidden;
}
/* `style.css` impose `color: var(--ink)` à tous les titres. Sur fond papier
   c'est la bonne couleur ; sur les sections sombre et verte, cela donnait un
   titre encre sur encre, illisible. On rétablit l'héritage : la couleur vient
   alors du conteneur de section. */
body.page-home h1,
body.page-home h2,
body.page-home h3,
body.page-home h4        { font-family: var(--dc-font); color: inherit; }

.dc-section {
    max-width: var(--dc-max);
    margin: 0 auto;
    padding: var(--dc-section) var(--dc-pad);
}
.dc-band            { background: var(--dc-surface); border-top: 1px solid var(--dc-line); border-bottom: 1px solid var(--dc-line); }
.dc-band--top-only  { background: var(--dc-surface); border-top: 1px solid var(--dc-line); border-bottom: 0; }
.dc-band--dark      { background: var(--dc-ink); color: var(--dc-paper); }
.dc-band--green     { background: var(--dc-green); color: #fff; }

/* --- Hero --- */
.dc-hero {
    max-width: var(--dc-max);
    margin: 0 auto;
    padding: clamp(48px, 7vw, 88px) var(--dc-pad) 72px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
    gap: clamp(32px, 4vw, 64px);
    align-items: start;
}
.dc-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border: 1px solid var(--dc-green-line);
    background: var(--dc-green-bg);
    font-family: var(--dc-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--dc-green);
    text-transform: uppercase;
}
.dc-hero h1 {
    margin: 26px 0 0;
    font-size: clamp(34px, 5.2vw, 60px);
    line-height: 1.03;
    letter-spacing: -0.035em;
    font-weight: 700;
    text-wrap: balance;
}
.dc-hero__sub {
    margin: 24px 0 0;
    font-size: clamp(16.5px, 1.6vw, 19px);
    line-height: 1.55;
    color: var(--dc-text);
    max-width: 34em;
}
.dc-hero__sub strong { color: var(--dc-ink); font-weight: 600; }
.dc-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.dc-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 34px;
    font-family: var(--dc-mono);
    font-size: 12px;
    color: var(--dc-text);
}
.dc-chips span { padding: 7px 11px; border: 1px solid var(--dc-line); background: var(--dc-surface); }
.dc-reassure { margin: 18px 0 0; font-size: 13px; color: var(--dc-text-3); }

/* Carte « Ce que vous recevez » */
.dc-card { background: var(--dc-surface); border: 1px solid var(--dc-line); }
.dc-card__head {
    padding: 16px 20px;
    border-bottom: 1px solid var(--dc-line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.dc-card__count { font-family: var(--dc-mono); font-size: 11px; color: var(--dc-green); }
.dc-file {
    display: flex;
    gap: 14px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--dc-line-soft);
}
.dc-file:last-of-type { border-bottom: 0; }
.dc-file__badge {
    flex: 0 0 44px;
    height: 24px;
    display: grid;
    place-items: center;
    color: #fff;
    font-family: var(--dc-mono);
    font-size: 10px;
    letter-spacing: 0.04em;
}
.dc-file__badge--pdf   { background: var(--dc-ink); }
.dc-file__badge--word  { background: var(--dc-word); }
.dc-file__badge--excel { background: var(--dc-green); }
.dc-file__name { font-size: 15px; font-weight: 600; }
.dc-file__desc { font-size: 13px; color: var(--dc-text-3); line-height: 1.5; margin-top: 3px; }
.dc-card__note {
    padding: 16px 20px;
    background: var(--dc-green-bg);
    border-top: 1px solid var(--dc-line);
    font-size: 13px;
    line-height: 1.6;
    color: var(--dc-ink-2);
}
.dc-card__foot {
    padding: 12px 20px;
    border-top: 1px solid var(--dc-line);
    font-family: var(--dc-mono);
    font-size: 11px;
    color: var(--dc-text-3);
}

/* --- Bandeau chiffres --- */
.dc-stats {
    max-width: var(--dc-max);
    margin: 0 auto;
    padding: 0 var(--dc-pad);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
}
.dc-stats > div { padding: 28px 20px; border-right: 1px solid var(--dc-line-soft); }
.dc-stats > div:first-child { padding-left: 0; }
.dc-stats > div:last-child  { padding-right: 0; border-right: 0; }
.dc-stats strong { display: block; font-size: 32px; font-weight: 700; letter-spacing: -0.03em; }
.dc-stats span   { display: block; font-size: 13px; color: var(--dc-text-3); margin-top: 4px; }

/* --- Métiers --- */
.dc-trades {
    max-width: var(--dc-max);
    margin: 0 auto;
    padding: 26px var(--dc-pad);
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}
.dc-trades__list { display: flex; flex-wrap: wrap; gap: 8px; }
.dc-trades__list span { padding: 6px 12px; border: 1px solid var(--dc-line); font-size: 13px; color: var(--dc-ink-2); }

/* --- Urgence (sombre) --- */
.dc-risk-intro { margin: 16px 0 0; font-size: 17px; color: var(--dc-on-dark-2); max-width: 44em; }
.dc-risks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: 1px;
    margin-top: 44px;
    background: var(--dc-line-dark);
    border: 1px solid var(--dc-line-dark);
}
.dc-risk { background: var(--dc-ink); padding: 28px; }
.dc-risk__label {
    font-family: var(--dc-mono);
    font-size: 11px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--dc-on-dark-2);
}
.dc-risk__figure {
    font-size: clamp(32px, 3.4vw, 44px);
    font-weight: 700;
    letter-spacing: -0.035em;
    margin: 12px 0 10px;
}
.dc-risk p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--dc-on-dark); }
.dc-risk__ref {
    margin-top: 20px;
    padding-top: 14px;
    border-top: 1px solid var(--dc-line-dark);
    font-family: var(--dc-mono);
    font-size: 11px;
    color: var(--dc-on-dark-3);
}

/* --- 3 étapes --- */
.dc-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(265px, 100%), 1fr));
    gap: 24px;
    margin-top: 44px;
}
.dc-step {
    background: var(--dc-surface);
    border: 1px solid var(--dc-line);
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: border-color .18s ease, transform .18s ease;
}
.dc-step:hover { border-color: var(--dc-green); transform: translateY(-2px); }
.dc-step__num { font-family: var(--dc-mono); font-size: 13px; color: var(--dc-green); }
.dc-step h3 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.dc-step p  { margin: 0; font-size: 15px; line-height: 1.6; color: var(--dc-text); }
.dc-step__foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--dc-line-soft); }
.dc-progress__head {
    display: flex;
    justify-content: space-between;
    font-family: var(--dc-mono);
    font-size: 11px;
    color: var(--dc-text-3);
}
.dc-progress__track { height: 4px; background: var(--dc-track); margin-top: 8px; }
.dc-progress__bar   { height: 100%; background: var(--dc-green); }
.dc-progress__note  { margin-top: 8px; font-family: var(--dc-mono); font-size: 11px; color: var(--dc-on-dark-2); }
.dc-filepills {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--dc-line-soft);
    font-family: var(--dc-mono);
    font-size: 11px;
    color: var(--dc-ink-2);
}
.dc-filepills span { padding: 5px 9px; background: var(--dc-paper); border: 1px solid var(--dc-line); }

/* --- Les 10 sections réglementaires --- */
.dc-split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
    gap: clamp(28px, 4vw, 56px);
    align-items: end;
}
.dc-split p { margin: 0; font-size: 16px; line-height: 1.65; color: var(--dc-text); }
.dc-split p strong { color: var(--dc-ink); font-weight: 600; }
.dc-grid-table {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: 1px;
    margin-top: 48px;
    background: var(--dc-line);
    border: 1px solid var(--dc-line);
}
.dc-cell { background: var(--dc-surface); padding: 26px; transition: background .18s ease; }
.dc-cell:hover { background: var(--dc-green-bg-2); }
.dc-cell__head { display: flex; gap: 10px; align-items: baseline; margin-bottom: 14px; }
.dc-cell__num  { font-family: var(--dc-mono); font-size: 12px; color: var(--dc-green); }
.dc-cell h3    { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -0.015em; }
.dc-cell ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 7px;
    font-size: 14.5px;
    color: var(--dc-text);
}
.dc-cell li { padding-left: 16px; position: relative; line-height: 1.5; }
.dc-cell li::before { content: '·'; position: absolute; left: 0; color: var(--dc-green); }

/* --- Comparatif --- */
.dc-compare { margin-top: 36px; background: var(--dc-surface); border: 1px solid var(--dc-line); overflow-x: auto; }
.dc-compare table { width: 100%; font-size: 15px; }
.dc-compare thead tr { background: var(--dc-paper); }
.dc-compare th {
    text-align: left;
    padding: 16px 20px;
    font-weight: 600;
    color: var(--dc-text);
    border-bottom: 1px solid var(--dc-line);
    border-left: 1px solid var(--dc-line);
}
.dc-compare th:first-child {
    font-size: 12px;
    font-family: var(--dc-mono);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--dc-text-3);
    font-weight: 400;
    border-left: 0;
}
.dc-compare td {
    padding: 15px 20px;
    color: var(--dc-text);
    border-bottom: 1px solid var(--dc-line-soft);
    border-left: 1px solid var(--dc-line);
}
.dc-compare td:first-child { color: var(--dc-ink-2); border-left: 0; }
.dc-compare tr:last-child td { border-bottom: 0; }
.dc-compare .is-ours      { background: var(--dc-green-bg-2); font-weight: 600; color: var(--dc-ink); }
.dc-compare th.is-ours    { background: var(--dc-green-bg); color: var(--dc-green); }
.dc-compare .dc-yes { color: var(--dc-green); }
.dc-compare .dc-no  { color: var(--dc-red); }

/* --- Tarif --- */
.dc-pricing {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: 24px;
    margin-top: 44px;
    align-items: start;
}
.dc-price-card { border: 1px solid var(--dc-ink); background: var(--dc-paper); }
.dc-price-card__head {
    padding: 26px 28px;
    border-bottom: 1px solid var(--dc-line);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
.dc-price {
    font-size: clamp(40px, 4.6vw, 56px);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1;
    margin-top: 10px;
}
.dc-price-card__sub { font-size: 14px; color: var(--dc-text-3); margin-top: 8px; }
.dc-price-card ul {
    margin: 0;
    padding: 24px 28px;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: 12px 24px;
    font-size: 14.5px;
    color: var(--dc-ink-2);
}
.dc-price-card li { display: flex; gap: 9px; line-height: 1.5; }
.dc-price-card li::before { content: '✓'; color: var(--dc-green); flex: 0 0 auto; }
.dc-aside { border: 1px solid var(--dc-line); background: var(--dc-surface); padding: 28px; }
.dc-aside h3 { margin: 14px 0 0; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.dc-aside p  { margin: 12px 0 0; font-size: 15px; line-height: 1.6; color: var(--dc-text); }
.dc-aside .dc-btn { margin-top: 22px; padding: 13px 22px; font-size: 15px; }

/* --- Outil gratuit --- */
.dc-tool {
    max-width: var(--dc-max);
    margin: 0 auto;
    padding: var(--dc-section) var(--dc-pad);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
    gap: clamp(32px, 4vw, 56px);
    align-items: center;
}
.dc-tool__text p { margin: 16px 0 0; font-size: 16px; line-height: 1.65; color: var(--dc-text); }
.dc-checklist {
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 9px;
    font-size: 15px;
    color: var(--dc-ink-2);
}
.dc-checklist li { display: flex; gap: 9px; }
.dc-checklist li::before { content: '✓'; color: var(--dc-green); flex: 0 0 auto; }
.dc-tool__text .dc-btn { margin-top: 26px; }
/* Le tableau d'aperçu ne se comprime pas sous ~485px : sans ce conteneur
   défilant, il poussait la page entière en débordement horizontal à 360px.
   La maquette pose la même règle sur le comparatif, elle vaut aussi ici. */
.dc-preview { background: var(--dc-surface); border: 1px solid var(--dc-line); overflow-x: auto; }
.dc-preview__head {
    padding: 14px 18px;
    border-bottom: 1px solid var(--dc-line);
    font-family: var(--dc-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--dc-text-3);
}
.dc-preview table { width: 100%; font-size: 14px; }
.dc-preview thead tr { background: var(--dc-paper); color: var(--dc-text-3); }
.dc-preview th {
    padding: 11px 8px;
    font-weight: 500;
    font-size: 12px;
    border-bottom: 1px solid var(--dc-line);
}
.dc-preview th:first-child { text-align: left; padding: 11px 18px; }
.dc-preview th:last-child  { padding-right: 18px; }
.dc-preview tbody { color: var(--dc-ink-2); }
.dc-preview td { text-align: center; padding: 13px 8px; border-bottom: 1px solid var(--dc-line-soft); }
.dc-preview td:first-child { text-align: left; padding: 13px 18px; }
.dc-preview td:last-child  { padding-right: 18px; }
.dc-preview tr:last-child td { border-bottom: 0; }
.dc-preview .dc-yes  { color: var(--dc-green); }
.dc-preview .dc-none { color: var(--dc-empty); }

/* --- FAQ --- */
.dc-faq {
    max-width: var(--dc-max);
    margin: 0 auto;
    padding: var(--dc-section) var(--dc-pad);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: clamp(28px, 4vw, 56px);
    align-items: start;
}
.dc-accordion { border-top: 1px solid var(--dc-line); }
.dc-accordion__item { border-bottom: 1px solid var(--dc-line); }
.dc-accordion__btn {
    width: 100%;
    display: flex;
    gap: 18px;
    align-items: baseline;
    justify-content: space-between;
    padding: 20px 0;
    background: none;
    border: none;
    font-family: var(--dc-font);
    font-size: 17px;
    font-weight: 600;
    color: var(--dc-ink);
    text-align: left;
    cursor: pointer;
}
.dc-accordion__sign { font-family: var(--dc-mono); font-size: 15px; color: var(--dc-green); flex: 0 0 auto; }
.dc-accordion__panel {
    margin: 0;
    padding: 0 0 22px;
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--dc-text);
    max-width: 52em;
}
.dc-accordion__panel[hidden] { display: none; }

/* --- CTA final --- */
.dc-cta-final {
    max-width: var(--dc-max);
    margin: 0 auto;
    padding: clamp(52px, 6vw, 76px) var(--dc-pad);
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    align-items: flex-end;
    justify-content: space-between;
}
.dc-cta-final .dc-eyebrow { color: var(--dc-green-light); }
.dc-cta-final h2 {
    margin: 16px 0 0;
    font-size: clamp(30px, 4vw, 44px);
    line-height: 1.06;
    letter-spacing: -0.035em;
    font-weight: 700;
    max-width: 22em;
}
.dc-cta-final .dc-btn { padding: 16px 30px; font-size: 17px; }
.dc-cta-final__note { margin-top: 16px; font-size: 13px; color: var(--dc-green-light-2); }

/* Sections sombres : les liens héritent d'un vert illisible sur #14181C. */
.dc-band--dark a,
.dc-band--green a { color: inherit; }

@media (prefers-reduced-motion: reduce) {
    .dc-step, .dc-cell, .dc-btn, .dc-header .dc-header__cta { transition: none; }
    .dc-step:hover { transform: none; }
}

/* -----------------------------------------------------------------------------
   Bandeau CTA mobile — appliqué à tout le site
   -----------------------------------------------------------------------------
   Il fait partie du chrome global, au même titre que l'en-tête et le pied de
   page : il passe donc au vert sanitaire. Sans cela, un bouton bleu de l'ancien
   design restait collé sous un en-tête vert.

   La double classe porte la même contrainte de spécificité que les autres
   boutons : `body.page-home a` (0,1,2) l'emporterait sinon, et le libellé
   redeviendrait vert sur vert.
   ----------------------------------------------------------------------------- */

.sticky-cta .sticky-cta__btn {
    background: var(--dc-green);
    border-color: var(--dc-green);
    color: #fff;
    border-radius: 2px;
    font-family: var(--dc-font);
    font-weight: 600;
}
.sticky-cta .sticky-cta__btn:hover {
    background: var(--dc-green-dark);
    border-color: var(--dc-green-dark);
    color: #fff;
}

/* =============================================================================
   Gabarit éditorial — pages de contenu long
   =============================================================================
   Porté par `body.page-article`, posé par PageController sur les gabarits
   page-pillar, page-article, page-metier, page-douleur, page-comparatif et
   page-geo. `body.page-annuaire` reprend le même socle pour l'annuaire des
   centres de formation, qui partage le hero et la prose mais présente des
   données plutôt qu'un texte long.
   Réutilise les tokens et composants de la home ; n'introduit que ce qui est
   propre à l'article.
   ============================================================================= */

:root {
    --dc-row-warn:   #FDF8F5;   /* ligne de tableau en anomalie */
    --dc-field-bg:   #F9F8F5;
    --dc-field-line: #C9C6BC;
}

body.page-article,
body.page-annuaire {
    background: var(--dc-paper);
    color: var(--dc-ink);
    font-family: var(--dc-font);
    overflow-x: hidden;
}
body.page-article a,
body.page-annuaire a        { color: var(--dc-green); text-decoration: none; }
body.page-article a:hover,
body.page-annuaire a:hover  { color: var(--dc-green-dark); }
body.page-article table,
body.page-annuaire table    { border-collapse: collapse; }
body.page-article h1,
body.page-article h2,
body.page-article h3,
body.page-article h4,
body.page-annuaire h1,
body.page-annuaire h2,
body.page-annuaire h3,
body.page-annuaire h4       { font-family: var(--dc-font); color: inherit; }

/* --- Hero éditorial --- */
.dc-article-hero {
    /* Vert clair, ni blanc ni sombre : les deux ont été écartés. */
    background: var(--dc-green-bg);
    color: var(--dc-ink);
    border-bottom: 1px solid var(--dc-green-line);
}
.dc-article-hero__inner {
    max-width: var(--dc-max);
    margin: 0 auto;
    padding: clamp(28px, 4vw, 52px) clamp(16px, 3vw, 28px) clamp(36px, 4vw, 56px);
}
.dc-crumbs {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-family: var(--dc-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--dc-text-3);
}
.dc-crumbs a            { color: var(--dc-text-3); }
.dc-crumbs a:hover      { color: var(--dc-ink); }
.dc-crumbs .is-current  { color: var(--dc-green); }
.dc-article-hero__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
    gap: clamp(32px, 4vw, 56px);
    align-items: center;
    margin-top: 32px;
}
/* Sans visuel, le texte ne doit pas s'étirer sur toute la largeur. */
.dc-article-hero__grid--solo { display: block; max-width: 46em; }
.dc-article-hero h1 {
    margin: 0;
    font-size: clamp(32px, 4.4vw, 52px);
    line-height: 1.04;
    letter-spacing: -0.035em;
    font-weight: 700;
    text-wrap: balance;
}
.dc-article-hero__sub {
    margin: 20px 0 0;
    font-size: clamp(16.5px, 1.6vw, 19px);
    line-height: 1.55;
    color: var(--dc-text);
    max-width: 34em;
}
.dc-article-meta {
    margin-top: 16px;
    font-family: var(--dc-mono);
    font-size: 11.5px;
    letter-spacing: 0.03em;
    color: var(--dc-text-3);
}
.dc-article-hero .dc-actions { margin-top: 30px; }
.dc-article-hero .dc-chips   { margin-top: 28px; }
.dc-article-hero .dc-chips span { background: var(--dc-surface); border-color: var(--dc-green-line); }
/* Fiche document : le visuel du hero est présenté comme un fichier PDF.
   `hidden` est posé par l'attribut onerror de l'image — sans visuel, la
   grille auto-fit rend la colonne de texte pleine largeur. */
.dc-docsheet {
    margin: 0;
    border: 1px solid var(--dc-green-line);
    background: var(--dc-surface);
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.dc-docsheet[hidden] { display: none; }
.dc-docsheet__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--dc-line);
    font-family: var(--dc-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--dc-text-3);
}
.dc-docsheet__head > span:first-child {
    display: flex;
    align-items: center;
    gap: 9px;
}
.dc-docsheet__badge {
    display: grid;
    place-items: center;
    width: 38px;
    height: 20px;
    background: var(--dc-ink);
    color: #fff;
    font-size: 9.5px;
}
.dc-docsheet__body {
    padding: clamp(14px, 1.8vw, 22px);
    background: var(--dc-paper);
}
.dc-docsheet__body img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--dc-line);
    background: var(--dc-surface);
}
.dc-docsheet__foot {
    padding: 12px 16px;
    border-top: 1px solid var(--dc-line);
    font-size: 12.5px;
    color: var(--dc-text-3);
}
/* --- Colonne de lecture unique ---
   Pas de colonne latérale : sommaire et bloc de conversion vivent dans le flux,
   pleine largeur de cette colonne. La version à deux colonnes a été écartée —
   elle coupait la page en deux. */
.dc-article-main {
    max-width: 860px;
    margin: 0 auto;
    padding: clamp(36px, 4vw, 64px) clamp(16px, 3vw, 28px) 0;
}
.dc-prose {
    min-width: 0;
    max-width: none;
    margin-top: clamp(28px, 3.5vw, 44px);
}

/* --- Corps de texte --- */
.dc-prose p {
    margin: 18px 0 0;
    font-size: 17px;
    line-height: 1.75;
    color: var(--dc-ink-2);
}
.dc-prose > p:first-child { margin-top: 0; }

/* Bloc de section : le numéro d'ordre coiffe le titre, sur un filet épais.
   Le numéro est généré au rendu depuis la position du H2 (numberProseHeadings). */
.dc-h2-block {
    margin-top: 56px;
    padding-top: 26px;
    border-top: 2px solid var(--dc-ink);
}
.dc-h2-block__num {
    font-family: var(--dc-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--dc-green);
}
.dc-prose h2 {
    margin: 10px 0 0;
    padding-top: 0;
    border-top: 0;
    font-size: clamp(26px, 3.2vw, 36px);
    line-height: 1.12;
    letter-spacing: -0.032em;
    font-weight: 700;
}
.dc-prose h3 {
    margin: 36px 0 0;
    padding-left: 16px;
    border-left: 3px solid var(--dc-green);
    font-size: 21px;
    line-height: 1.3;
    letter-spacing: -0.02em;
    font-weight: 600;
}
.dc-h2-block + h3 { margin-top: 30px; }
.dc-h2-block + p,
.dc-prose h3 + p  { margin-top: 14px; }
.dc-prose strong  { font-weight: 600; }
.dc-prose em      { font-style: italic; }

/* Listes : cartes empilées, sans puces. */
.dc-prose ul,
.dc-prose ol {
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--dc-line);
    border: 1px solid var(--dc-line);
}
.dc-prose li {
    background: var(--dc-surface);
    padding: 16px 18px;
    font-size: 16px;
    line-height: 1.65;
    color: var(--dc-ink-2);
}

/* Tableaux : carte filetée, défilement propre à l'étroit. Le conteneur est
   ajouté au rendu par wrapProseTables() — le contenu en base n'a pas à le
   porter. */
.dc-prose table {
    width: 100%;
    min-width: 620px;
    font-size: 14.5px;
    margin: 0;
}
.dc-table-wrap {
    margin: 20px 0 0;
    background: var(--dc-surface);
    border: 1px solid var(--dc-line);
    overflow-x: auto;
}
.dc-prose thead tr { background: var(--dc-paper); }
.dc-prose th {
    text-align: left;
    padding: 13px 16px;
    font-family: var(--dc-mono);
    font-size: 11px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--dc-text-3);
    font-weight: 400;
    border-bottom: 1px solid var(--dc-line);
}
.dc-prose td {
    padding: 14px 16px;
    color: var(--dc-ink-2);
    border-bottom: 1px solid var(--dc-line-soft);
}
.dc-prose tbody tr:last-child td { border-bottom: 0; }
/* Crochets de mise en forme pour les tableaux rédigés en base (content_body,
   HTML de confiance saisi côté admin) : ils n'apparaissent dans aucun gabarit. */
.dc-prose tr.is-warn   { background: var(--dc-row-warn); }
.dc-prose .dc-val-ok   { font-weight: 600; color: var(--dc-green); }
.dc-prose .dc-val-warn { font-weight: 600; color: var(--dc-red); }

/* Encart CTA dans le corps de texte.
   `.cta-inline` est le nom déjà produit par les gabarits et le shortcode
   `[cta]` : on le restyle plutôt que d'imposer un nouveau balisage au
   contenu stocké en base. */
.dc-prose .cta-inline {
    margin: 44px 0 0;
    border: 1px solid var(--dc-ink);
    background: var(--dc-ink);
    color: var(--dc-paper);
    padding: 26px clamp(20px, 3vw, 32px);
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    align-items: center;
    justify-content: space-between;
    border-radius: 0;
}
.dc-prose .cta-inline__title {
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 0;
}
.dc-prose .cta-inline__desc {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--dc-on-dark);
    flex: 1 1 100%;
    margin: 0;
}
.dc-prose .cta-inline .btn-cta {
    display: inline-block;
    padding: 14px 24px;
    background: var(--dc-green);
    color: #fff;
    font-size: 15.5px;
    font-weight: 600;
    border-radius: 2px;
    border: 0;
    transition: background .16s ease, color .16s ease;
    /* style.css impose `white-space: nowrap` à .btn-cta : un libellé long
       (« Mettre mon PMS en conformité maintenant → ») débordait alors de la
       page sous 400 px de large. Le libellé vient du contenu : on le laisse
       revenir à la ligne plutôt que de le raccourcir. */
    white-space: normal;
    max-width: 100%;
    text-align: center;
}
.dc-prose .cta-inline .btn-cta:hover { background: #fff; color: var(--dc-ink); }

/* --- Sommaire (dans le flux, pleine largeur de la colonne de lecture) --- */
.dc-toc { border: 1px solid var(--dc-line); background: var(--dc-surface); }
.dc-toc__btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 13px 16px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--dc-mono);
    font-size: 10.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--dc-text-3);
    text-align: left;
}
.dc-toc__sign { font-size: 13px; color: var(--dc-green); }
/* Sur toute la largeur de lecture, le sommaire tient sur 2-3 colonnes.
   `min(190px, 100%)` évite le débordement horizontal en dessous de 190px. */
.dc-toc__list {
    margin: 0;
    padding: 0 16px 16px;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
    gap: 9px 20px;
    font-size: 13.5px;
}
.dc-toc__list[hidden] { display: none; }
.dc-toc__list a       { color: var(--dc-text); line-height: 1.4; display: block; }
.dc-toc__list a:hover { color: var(--dc-green); }

/* --- Colonne latérale : bloc de téléchargement --- */
.dc-leadmagnet { background: var(--dc-surface); border: 1px solid var(--dc-ink); }
.dc-leadmagnet__head {
    padding: 18px 20px;
    border-bottom: 1px solid var(--dc-line);
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.dc-leadmagnet__head h3 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.02em; }
.dc-leadmagnet__head p  { margin: 8px 0 0; font-size: 14px; line-height: 1.6; color: var(--dc-text); }
.dc-leadmagnet__note {
    margin: 0;
    padding: 12px 20px;
    font-size: 13.5px;
    line-height: 1.5;
    border-bottom: 1px solid var(--dc-line);
}
.dc-note--ok   { background: var(--dc-green-bg); color: var(--dc-green-dark); }
.dc-note--info { background: var(--dc-paper);    color: var(--dc-ink-2); }
.dc-note--err  { background: var(--dc-row-warn); color: var(--dc-red); }
.dc-leadmagnet__form {
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.dc-leadmagnet__form label[for] { font-size: 13.5px; font-weight: 600; }
.dc-leadmagnet__form input[type="email"] {
    padding: 12px 13px;
    border: 1px solid var(--dc-field-line);
    background: var(--dc-field-bg);
    font-size: 15px;
    color: var(--dc-ink);
    border-radius: 2px;
    width: 100%;
    font-family: var(--dc-font);
}
.dc-leadmagnet__form input[type="email"]:focus {
    outline: 2px solid var(--dc-green);
    outline-offset: -1px;
}
.dc-leadmagnet__cgv {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--dc-text-3);
}
.dc-leadmagnet__cgv input { margin-top: 2px; accent-color: var(--dc-green); }
.dc-leadmagnet__form button {
    padding: 13px 18px;
    background: var(--dc-green);
    color: #fff;
    border: none;
    font-family: var(--dc-font);
    font-size: 15px;
    font-weight: 600;
    border-radius: 2px;
    cursor: pointer;
    transition: background .16s ease;
}
.dc-leadmagnet__form button:hover { background: var(--dc-green-dark); }
.dc-leadmagnet__foot {
    padding: 14px 20px;
    border-top: 1px solid var(--dc-line);
    background: var(--dc-green-bg);
    font-size: 13px;
    line-height: 1.55;
    color: var(--dc-ink-2);
}

/* --- FAQ marketing en carte --- */
.dc-faq-card {
    margin-top: 32px;
    background: var(--dc-surface);
    border: 1px solid var(--dc-line);
}
.dc-faq-card__item { border-bottom: 1px solid var(--dc-line); padding: 0 clamp(18px, 2.5vw, 26px); }
.dc-faq-card__item:last-child { border-bottom: 0; }
.dc-faq-card .dc-accordion__panel { max-width: 56em; padding-bottom: 22px; }
/* La réponse peut contenir du HTML (paragraphes, listes) : on style son
   contenu plutôt que le conteneur seul. */
.dc-accordion__panel > p:first-child { margin-top: 0; }
.dc-accordion__panel p { margin: 0 0 12px; font-size: 16px; line-height: 1.7; color: var(--dc-text); }
.dc-accordion__panel p:last-child { margin-bottom: 0; }
.dc-accordion__panel strong { font-weight: 600; color: var(--dc-ink); }

/* --- À lire aussi --- */
.dc-readmore {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 1px;
    margin-top: 28px;
    background: var(--dc-line);
    border: 1px solid var(--dc-line);
}
.dc-readmore a {
    background: var(--dc-surface);
    padding: 24px;
    display: block;
    transition: background .18s ease;
}
.dc-readmore a:hover { background: var(--dc-green-bg-2); }
.dc-readmore h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--dc-ink);
    line-height: 1.35;
}
.dc-readmore p { margin: 10px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--dc-text); }

/* Base typographique du tunnel, sur le modèle de `body.page-home` et
   `body.page-article`. Sans elle, les étapes portent bien les composants
   `dc-` (globaux) mais gardent le fond et la police de style.css. */
body.page-generateur {
    background: var(--dc-paper);
    color: var(--dc-ink);
    font-family: var(--dc-font);
    overflow-x: hidden;
}
body.page-generateur a         { color: var(--dc-green); text-decoration: none; }
body.page-generateur a:hover   { color: var(--dc-green-dark); }
body.page-generateur table     { border-collapse: collapse; }
body.page-generateur h1,
body.page-generateur h2,
body.page-generateur h3,
body.page-generateur h4        { font-family: var(--dc-font); color: inherit; }

/* Base typographique de l outil registre des allergènes, sur le modèle de
   `body.page-home` et `body.page-article`. */
body.page-outil-registre {
    background: var(--dc-paper);
    color: var(--dc-ink);
    font-family: var(--dc-font);
    overflow-x: hidden;
}
body.page-outil-registre a         { color: var(--dc-green); text-decoration: none; }
body.page-outil-registre a:hover   { color: var(--dc-green-dark); }
body.page-outil-registre table     { border-collapse: collapse; }
body.page-outil-registre h1,
body.page-outil-registre h2,
body.page-outil-registre h3,
body.page-outil-registre h4        { font-family: var(--dc-font); color: inherit; }

/* =============================================================================
   Générateur — fil des étapes et formulaire
   =============================================================================

   Portée : les 6 étapes de `/generateur/etape-N/` (`body.page-generateur`).
   Tout le reste de ces pages — sections marketing, boutons, cartes, tableau
   comparatif, accordéon FAQ, CTA final — réutilise les composants de la page
   d'accueil définis plus haut. Ne sont ajoutés ici que le fil des étapes et
   les champs de formulaire, qui n'existaient nulle part ailleurs.
   ============================================================================= */

/* --- Fil des étapes, collé sous l'en-tête ---------------------------------- */

.dc-rail {
    max-width: var(--dc-max);
    margin: 0 auto;
    padding: 0 var(--dc-pad) 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.dc-rail__dot {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    border: 1px solid var(--dc-line);
    background: var(--dc-surface);
    color: var(--dc-on-dark-2);
    font-family: var(--dc-mono);
    font-size: 11px;
    text-decoration: none;
}
.dc-rail__dot.is-done {
    background: var(--dc-green-bg);
    border-color: var(--dc-green-line);
    color: var(--dc-green);
}
a.dc-rail__dot.is-done:hover { background: var(--dc-green-line); color: var(--dc-green-dark); }
.dc-rail__dot.is-current {
    background: var(--dc-green);
    border-color: var(--dc-green);
    color: #fff;
}
.dc-rail__line { flex: 1 1 auto; height: 2px; background: var(--dc-track); min-width: 8px; }

/* --- Zone formulaire : saisie à gauche, réassurance à droite --------------- */

.dc-formzone {
    max-width: var(--dc-max);
    margin: 0 auto;
    padding: clamp(28px, 4vw, 52px) var(--dc-pad) clamp(40px, 5vw, 64px);
    display: grid;
    /* `min(330px, 100%)` et non `330px` : sous 386 px (330 + les deux paddings),
       la piste garderait sa largeur minimale et déborderait de la page. */
    grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
    gap: clamp(28px, 3.5vw, 56px);
    align-items: start;
}
.dc-formzone > div { min-width: 0; }
.dc-formzone h1 {
    margin: 14px 0 0;
    font-size: clamp(30px, 4vw, 44px);
    line-height: 1.06;
    letter-spacing: -0.035em;
    font-weight: 700;
}
.dc-sidecol { display: flex; flex-direction: column; gap: 16px; }
.dc-sidecol .dc-card { margin: 0; }

.dc-formcard {
    margin-top: 32px;
    background: var(--dc-surface);
    border: 1px solid var(--dc-line);
    padding: clamp(20px, 3vw, 32px);
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 620px;
}
.dc-undercard { margin: 20px 0 0; font-size: 14.5px; color: var(--dc-text); }

.dc-alert {
    border: 1px solid var(--dc-red);
    background: #FBF3F1;
    color: var(--dc-red);
    padding: 14px 16px;
    font-size: 14.5px;
    line-height: 1.55;
}
.dc-alert ul { margin: 8px 0 0; padding-left: 20px; }

/* --- Champs --------------------------------------------------------------- */

.dc-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: 24px;
}
.dc-field { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
/* Un champ large (choix multiples, zone de texte, longue liste) prend la ligne
   entière : un input de 16,5 px dans 220 px est illisible. */
.dc-field--full { grid-column: 1 / -1; }

.dc-field__label { font-size: 14.5px; font-weight: 600; line-height: 1.4; color: var(--dc-ink); }
.dc-fields--single .dc-field__label { font-size: 15px; }
.dc-req { color: var(--dc-green); }
.dc-optional {
    font-family: var(--dc-mono);
    font-size: 10.5px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--dc-on-dark-2);
    font-weight: 400;
    margin-left: 6px;
}
.dc-field__help { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--dc-text-3); }

.dc-input,
.dc-select,
.dc-textarea {
    width: 100%;
    padding: 15px 16px;
    border: 1px solid #C9C6BC;
    background: #F9F8F5;
    border-radius: 2px;
    font-family: var(--dc-font);
    font-size: 16.5px;
    line-height: 1.4;
    color: var(--dc-ink);
}
.dc-input:focus,
.dc-select:focus,
.dc-textarea:focus { outline: 2px solid var(--dc-green); outline-offset: -1px; }
.dc-textarea { resize: vertical; min-height: 96px; }
.dc-select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 42px;
    background-image: linear-gradient(45deg, transparent 50%, #4A5157 50%), linear-gradient(135deg, #4A5157 50%, transparent 50%);
    background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
}
.dc-field--invalid .dc-input,
.dc-field--invalid .dc-select,
.dc-field--invalid .dc-textarea { border-color: var(--dc-red); }

.dc-field__error { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--dc-red); }
.dc-field__error::before { content: "!"; font-family: var(--dc-mono); }
.dc-field__error[hidden] { display: none; }

/* --- Grille d'options filetée (radios et cases à cocher multiples) ---------
   Le filet vient d'un `outline` porté par chaque option, pas d'un fond de
   grille : avec un nombre impair d'options, la case vide de la dernière ligne
   resterait sinon peinte en gris. Les outlines de deux options voisines se
   rejoignent dans la gouttière de 1px et ne donnent qu'un seul trait. */

.dc-optiongrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
    gap: 1px;
    margin: 1px;
}
.dc-option {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    min-height: 44px;
    background: var(--dc-surface);
    outline: 1px solid var(--dc-line);
    font-size: 14.5px;
    line-height: 1.45;
    color: var(--dc-ink-2);
    cursor: pointer;
    transition: background .16s ease;
}
.dc-option:hover { background: var(--dc-green-bg-2); }
.dc-option input { position: absolute; opacity: 0; width: 0; height: 0; }
.dc-option__box {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    border: 1px solid #C9C6BC;
    background: #fff;
}
.dc-option--radio .dc-option__box { border-radius: 99px; }
.dc-option input:checked ~ .dc-option__box {
    border-color: var(--dc-green);
    background: var(--dc-green);
    box-shadow: inset 0 0 0 3px #fff;
}
.dc-option:has(input:checked) { background: var(--dc-green-bg); }
.dc-option:has(input:focus-visible) { outline: 2px solid var(--dc-green); outline-offset: -2px; }

/* Case à cocher unique (CGV, opt-in…) */
.dc-check { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; line-height: 1.5; color: var(--dc-ink-2); cursor: pointer; }
.dc-check input { position: absolute; opacity: 0; width: 0; height: 0; }

/* --- Actions et état de sauvegarde ---------------------------------------- */

.dc-formcard .dc-actions { margin-top: 6px; gap: 12px; align-items: center; }
.dc-formcard .dc-actions .dc-btn--green { margin-left: auto; flex: 0 0 auto; }
.dc-formcard .dc-actions--single .dc-btn--green { margin-left: 0; }

.dc-save {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 0;
    font-family: var(--dc-mono);
    font-size: 11.5px;
    color: var(--dc-text-3);
}
.dc-save__dot {
    flex: 0 0 6px;
    width: 6px;
    height: 6px;
    border-radius: 99px;
    background: #C9C6BC;
    transition: background .16s ease;
}
.dc-save.is-saved .dc-save__dot { background: var(--dc-green); }

/* --- Cartes gains / risques de l'étape ------------------------------------ */

.dc-duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr)); gap: 24px; margin-top: 40px; }
.dc-duo__card { border: 1px solid var(--dc-green-line); background: #F7FAF6; }
.dc-duo__card--risk { border-color: #E6D3CB; background: #FBF6F3; }
.dc-duo__head { padding: 18px 22px; border-bottom: 1px solid var(--dc-green-line); font-size: 17px; font-weight: 600; }
.dc-duo__card--risk .dc-duo__head { border-bottom-color: #E6D3CB; }
.dc-duo__list {
    margin: 0;
    padding: 20px 22px;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--dc-ink-2);
}
.dc-duo__list li { display: flex; gap: 12px; }
.dc-duo__list li > span:first-child { flex: 0 0 20px; }

/* Encarts de la colonne latérale du générateur (encouragement, réassurance). */
.dc-sidenote {
    margin: 0;
    border: 1px solid var(--dc-line);
    background: var(--dc-surface);
    padding: 16px 18px;
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--dc-text);
}
.dc-sidenote--green {
    border-color: var(--dc-green-line);
    background: var(--dc-green-bg);
    padding: 18px 20px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--dc-ink-2);
}

/* Spinner du bouton de soumission, pendant l envoi d une étape. */
.dc-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, .4);
    border-top-color: #fff;
    border-radius: 99px;
    animation: dc-spin .7s linear infinite;
}
@keyframes dc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .dc-spinner { animation-duration: 2s; }
}

/* =============================================================================
   Espace client — charte « Dossier »
   =============================================================================

   Portée : `/espace-client/` (`body.page-espace-client`). Les boutons, cartes
   et bandeaux viennent des composants `dc-` définis plus haut ; ne sont
   ajoutés ici que les motifs propres à l'espace : bandeau d'état, ligne de
   liste, pastilles de statut et de fichier, barre de progression.
   ============================================================================= */

body.page-espace-client {
    background: var(--dc-paper);
    color: var(--dc-ink);
    font-family: var(--dc-font);
    overflow-x: hidden;
}
body.page-espace-client a         { color: var(--dc-green); text-decoration: none; }
body.page-espace-client a:hover   { color: var(--dc-green-dark); }
body.page-espace-client table     { border-collapse: collapse; }
body.page-espace-client h1,
body.page-espace-client h2,
body.page-espace-client h3,
body.page-espace-client h4        { font-family: var(--dc-font); color: inherit; }

.ec-wrap {
    max-width: var(--dc-max);
    margin: 0 auto;
    padding: clamp(28px, 3.5vw, 44px) var(--dc-pad) clamp(40px, 5vw, 64px);
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 2.5vw, 28px);
}

/* --- En-tête de compte ---------------------------------------------------- */

.ec-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}
.ec-head h1 {
    margin: 12px 0 0;
    font-size: clamp(28px, 3.6vw, 40px);
    line-height: 1.08;
    letter-spacing: -0.03em;
    font-weight: 700;
}
.ec-head__meta { margin: 10px 0 0; font-family: var(--dc-mono); font-size: 12.5px; color: var(--dc-text-3); }
.ec-head__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.ec-head__actions form { display: inline; }

/* --- Bandeau d'état ------------------------------------------------------- */

.ec-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    gap: 1px;
    background: var(--dc-line);
    border: 1px solid var(--dc-line);
}
.ec-stat { background: var(--dc-surface); padding: 16px 18px; }
.ec-stat__label {
    font-family: var(--dc-mono);
    font-size: 10.5px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--dc-text-3);
}
.ec-stat__value { margin-top: 8px; font-size: 18px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.ec-dot { width: 8px; height: 8px; border-radius: 99px; flex: 0 0 8px; background: var(--dc-green); }
.ec-dot--warn { background: var(--dc-red); }

/* --- Sections et cartes --------------------------------------------------- */

.ec-section__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.ec-section__head h2 { margin: 0; font-size: clamp(20px, 2.2vw, 25px); letter-spacing: -0.025em; font-weight: 700; }
.ec-section__head form { display: inline; }

.ec-list { display: flex; flex-direction: column; gap: 14px; }

.ec-card { background: var(--dc-surface); border: 1px solid var(--dc-line); }
.ec-card--warn { border-color: #E6D3CB; }
.ec-card--muted { opacity: .62; }
.ec-card__head {
    padding: 16px 18px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}
.ec-card__title { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.015em; }
.ec-card__meta { margin: 6px 0 0; font-family: var(--dc-mono); font-size: 11.5px; color: var(--dc-text-3); }
.ec-card__side { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ec-card__foot {
    padding: 14px 18px;
    border-top: 1px solid var(--dc-line);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.ec-card__foot form { display: inline; }
.ec-spacer { flex: 1 1 auto; }

/* --- Pastilles de statut -------------------------------------------------- */

.ec-badge {
    padding: 4px 10px;
    border: 1px solid var(--dc-line);
    background: var(--dc-paper);
    font-family: var(--dc-mono);
    font-size: 10.5px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--dc-text-3);
    white-space: nowrap;
}
.ec-badge--ok   { border-color: var(--dc-green-line); background: var(--dc-green-bg); color: var(--dc-green); }
.ec-badge--warn { border-color: #E6D3CB; background: #FBF6F3; color: #A8583C; }
.ec-badge--err  { border-color: #E6D3CB; background: #FBF6F3; color: var(--dc-red); }
.ec-until { font-family: var(--dc-mono); font-size: 11px; color: var(--dc-text-3); }

/* --- Encarts d'information dans une carte -------------------------------- */

.ec-notice {
    margin: 0 18px 16px;
    padding: 12px 14px;
    border: 1px solid #E6D3CB;
    background: #FBF6F3;
    font-size: 14px;
    line-height: 1.55;
    color: var(--dc-ink-2);
}
.ec-pay {
    padding: 16px 18px;
    border-top: 1px solid #E6D3CB;
    background: #FBF6F3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.ec-pay p { margin: 0; }
.ec-pay__title { font-weight: 600; color: var(--dc-ink); }
.ec-pay__sub { margin-top: 4px !important; font-family: var(--dc-mono); font-size: 11.5px; color: var(--dc-text-3); }
.ec-expired { padding: 14px 18px; border-top: 1px solid var(--dc-line); margin: 0; font-size: 14px; color: var(--dc-red); }

/* --- Pastilles de téléchargement ----------------------------------------- */

.ec-files { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ec-file {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    min-height: 40px;
    border: 1px solid var(--dc-line);
    background: var(--dc-surface);
    border-radius: 2px;
    font-size: 14px;
    color: var(--dc-ink-2);
    transition: border-color .16s ease, background .16s ease;
}
.ec-file:hover { border-color: var(--dc-ink); color: var(--dc-ink); background: var(--dc-paper); }
.ec-file__tag {
    flex: 0 0 44px;
    height: 22px;
    display: grid;
    place-items: center;
    color: #fff;
    font-family: var(--dc-mono);
    font-size: 10px;
}
.ec-file__tag--pdf   { background: var(--dc-ink); }
.ec-file__tag--word  { background: var(--dc-word); }
.ec-file__tag--excel { background: var(--dc-green); }
.ec-file__tag--html  { background: var(--dc-text-3); }

/* --- Ligne de liste (brouillons, registres) ------------------------------ */

.ec-row {
    background: var(--dc-surface);
    border: 1px solid var(--dc-line);
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}
.ec-row__main { flex: 1 1 240px; min-width: 0; }
.ec-row__actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ec-row__actions form { display: inline; }

.ec-progress { margin-top: 10px; height: 4px; background: var(--dc-track); }
.ec-progress__bar { height: 100%; background: var(--dc-green); }

/* --- Boutons discrets de ligne ------------------------------------------- */

.ec-link {
    background: none;
    border: none;
    padding: 6px 2px;
    font-family: var(--dc-mono);
    font-size: 12px;
    color: var(--dc-on-dark-2);
    cursor: pointer;
    transition: color .16s ease;
}
.ec-link:hover { color: var(--dc-ink); }
.ec-link--danger:hover { color: var(--dc-red); }

/* --- États vides et aide -------------------------------------------------- */

.ec-empty {
    background: var(--dc-surface);
    border: 1px solid var(--dc-line);
    padding: clamp(24px, 3vw, 36px);
    text-align: center;
}
.ec-empty p { margin: 0 0 18px; font-size: 15.5px; color: var(--dc-text); }
.ec-empty--flat { text-align: left; }
.ec-empty--flat p { margin: 0; font-size: 14.5px; }

.ec-help {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 1px;
    background: var(--dc-line);
    border: 1px solid var(--dc-line);
}
.ec-help > div { background: var(--dc-surface); padding: 22px; }
.ec-help h3 { margin: 0 0 10px; font-size: 16px; font-weight: 600; letter-spacing: -0.015em; }
.ec-help p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--dc-text); }
.ec-help a { font-weight: 600; }

/* --- Écran de connexion --------------------------------------------------- */

.ec-login { max-width: 560px; margin: 0 auto; padding: clamp(36px, 5vw, 64px) var(--dc-pad); }
.ec-login h1 {
    margin: 14px 0 0;
    font-size: clamp(30px, 4vw, 42px);
    line-height: 1.06;
    letter-spacing: -0.035em;
    font-weight: 700;
}
.ec-login__sub { margin: 14px 0 0; font-size: 17px; line-height: 1.6; color: var(--dc-text); }
.ec-login__card {
    margin-top: 28px;
    background: var(--dc-surface);
    border: 1px solid var(--dc-line);
    padding: clamp(20px, 3vw, 30px);
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.ec-login__card label { font-size: 15px; font-weight: 600; }
.ec-login__help { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--dc-text-3); }
.ec-login__card input[type="email"] {
    width: 100%;
    padding: 15px 16px;
    border: 1px solid var(--dc-field-line);
    background: var(--dc-field-bg);
    border-radius: 2px;
    font-family: var(--dc-font);
    font-size: 16.5px;
    color: var(--dc-ink);
}
.ec-login__card input[type="email"]:focus { outline: 2px solid var(--dc-green); outline-offset: -1px; }
.ec-login__err { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13.5px; color: var(--dc-red); }
.ec-login__err::before { content: "!"; font-family: var(--dc-mono); }
.ec-login__ok {
    margin: 0;
    padding: 14px 16px;
    border: 1px solid var(--dc-green-line);
    background: var(--dc-green-bg);
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--dc-ink-2);
}
.ec-login__note { margin: 20px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--dc-text-3); }
.ec-login__aside {
    margin-top: 20px;
    background: var(--dc-surface);
    border: 1px solid var(--dc-line);
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.ec-login__aside h2 { margin: 0; font-size: 15px; font-weight: 600; }
.ec-login__aside p { margin: 4px 0 0; font-size: 14px; line-height: 1.55; color: var(--dc-text); }

/* =============================================================================
   Annuaire des centres de formation HACCP
   =============================================================================
   Porté par `body.page-annuaire`, posé par AnnuaireController. Ces pages
   présentent des données classées plutôt qu'un texte long : elles reprennent le
   hero et la prose du gabarit éditorial, mais sur la largeur de grille (1180 px)
   plutôt que sur la colonne de lecture (860 px) — un classement à trois colonnes
   et une grille de départements y respirent mal.

   Le même classement est rendu sur les pages `/formation-haccp/{ville}/`, à
   l'intérieur de la colonne de lecture : les composants ci-dessous n'imposent
   donc aucune largeur propre.
   ============================================================================= */

.dc-annu-main {
    max-width: var(--dc-max);
    margin: 0 auto;
    padding: clamp(32px, 4vw, 56px) clamp(16px, 3vw, 28px) 0;
}
.dc-annu-main > section { margin-top: clamp(36px, 4vw, 56px); }
.dc-annu-main > section:first-child { margin-top: 0; }
.dc-annu-main .dc-prose { max-width: 62em; }

/* Titre de section de l'annuaire : même famille que les H2 de la prose, sans
   la numérotation — ces sections ne forment pas une séquence de lecture. */
.dc-annu-h2 {
    margin: 0 0 20px;
    padding-top: 22px;
    border-top: 2px solid var(--dc-ink);
    font-size: clamp(23px, 2.6vw, 30px);
    line-height: 1.15;
    letter-spacing: -0.03em;
    font-weight: 700;
}
.dc-annu-h2__note {
    display: block;
    margin-top: 8px;
    font-size: 14.5px;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--dc-text-3);
}

/* --- Chiffres du hero ---
   Repris de `.dc-stats` de la home, mais sur fond vert : les filets passent au
   filet vert et les tuiles restent lisibles sur #EEF2EC. */
.dc-annu-stats {
    margin-top: 30px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
    border: 1px solid var(--dc-green-line);
    background: var(--dc-surface);
    gap: 1px;
}
.dc-annu-stats > div {
    background: var(--dc-surface);
    padding: 18px 20px;
    box-shadow: 0 0 0 1px var(--dc-green-line);
}
.dc-annu-stats strong {
    display: block;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}
.dc-annu-stats span {
    display: block;
    margin-top: 3px;
    font-family: var(--dc-mono);
    font-size: 10.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--dc-text-3);
}

/* --- Grille de zones (départements, villes) ---
   Gouttière de 1px sur fond filet : les bordures des cartes voisines se
   rejoignent et ne donnent qu'un seul trait, comme `.dc-grid-table`. */
.dc-zones {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
    gap: 1px;
    background: var(--dc-line);
    border: 1px solid var(--dc-line);
}
.dc-zone {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 18px;
    background: var(--dc-surface);
    transition: background .18s ease;
}
.dc-zone:hover { background: var(--dc-green-bg-2); }
.dc-zone__name {
    font-size: 15.5px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--dc-ink);
}
.dc-zone__meta {
    display: block;
    margin-top: 3px;
    font-family: var(--dc-mono);
    font-size: 10.5px;
    letter-spacing: 0.04em;
    color: var(--dc-text-3);
}
.dc-zone__count {
    flex: 0 0 auto;
    font-family: var(--dc-mono);
    font-size: 12px;
    color: var(--dc-green);
    font-variant-numeric: tabular-nums;
}

/* --- Classement des organismes ---
   Le tableau garde une largeur minimale : sous cette largeur il défile dans son
   conteneur plutôt que de pousser la page. */
.dc-rank-wrap {
    border: 1px solid var(--dc-line);
    background: var(--dc-surface);
    overflow-x: auto;
}
.dc-rank {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
    font-size: 14.5px;
}
.dc-rank th {
    text-align: left;
    padding: 12px 16px;
    background: var(--dc-paper);
    border-bottom: 1px solid var(--dc-line);
    font-family: var(--dc-mono);
    font-size: 10.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--dc-text-3);
}
.dc-rank td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--dc-line-soft);
    vertical-align: top;
}
.dc-rank tbody tr:last-child td { border-bottom: 0; }
.dc-rank tbody tr:hover { background: var(--dc-green-bg-2); }
.dc-rank__pos {
    width: 1%;
    white-space: nowrap;
    font-family: var(--dc-mono);
    font-size: 12px;
    color: var(--dc-text-3);
    font-variant-numeric: tabular-nums;
}
/* Les trois premiers rangs sont encadrés : la place compte, c'est l'objet même
   de la page. Au-delà, le numéro seul suffit. */
.dc-rank__pos--top {
    display: inline-grid;
    place-items: center;
    min-width: 24px;
    padding: 3px 6px;
    background: var(--dc-ink);
    color: var(--dc-paper);
}
.dc-rank__name {
    font-size: 15.5px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--dc-ink);
    line-height: 1.3;
}
.dc-rank__addr {
    margin-top: 4px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--dc-text);
}
.dc-rank__maps {
    display: inline-block;
    margin-top: 6px;
    font-family: var(--dc-mono);
    font-size: 11px;
    letter-spacing: 0.03em;
}
.dc-rank__note {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.dc-rank__score {
    font-size: 15px;
    font-weight: 600;
    color: var(--dc-ink);
}
.dc-rank__reviews {
    display: block;
    margin-top: 3px;
    font-family: var(--dc-mono);
    font-size: 10.5px;
    letter-spacing: 0.04em;
    color: var(--dc-text-3);
}
.dc-rank__none { color: var(--dc-text-3); font-size: 13.5px; }

/* Étoiles : deux calques superposés, le calque plein est rogné à la note.
   `aria-label` porte la valeur ; les glyphes sont décoratifs. */
.dc-stars {
    position: relative;
    display: inline-block;
    font-size: 13px;
    line-height: 1;
    letter-spacing: 1px;
    color: var(--dc-empty);
    white-space: nowrap;
}
.dc-stars__fill {
    position: absolute;
    inset: 0;
    overflow: hidden;
    color: var(--dc-green);
}

/* --- Retour de niveau --- */
.dc-annu-back {
    display: inline-block;
    margin-top: 32px;
    font-family: var(--dc-mono);
    font-size: 11.5px;
    letter-spacing: 0.04em;
    color: var(--dc-text-3);
}
.dc-annu-back:hover { color: var(--dc-green); }