/* ------------------------------------------------------------------ *
 * Formation conducteur de travaux — module Management & RH
 * Feuille unique, pensée pour les lecteurs dyslexiques :
 *   - une seule colonne, 68 caractères max par ligne
 *   - texte aligné à gauche, jamais justifié
 *   - interligne large, espacement des lettres et des mots réglable
 *   - pas d'italique pour le corps de texte, pas d'image de texte
 *   - contraste élevé, repères visuels systématiques
 * ------------------------------------------------------------------ */

@font-face {
    font-family: "Atkinson";
    src: local("Atkinson Hyperlegible");
    font-weight: 400;
    font-display: swap;
}

:root {
    --paper: #fbfaf6;
    --paper-2: #ffffff;
    --ink: #17202a;
    --ink-2: #35414f;
    --muted: #5d6b7a;
    --line: #ded8cc;
    --line-strong: #c3baa8;
    --accent: #1c6b58;
    --accent-soft: #e4f1ec;
    --warm: #9a4d08;
    --warm-soft: #fbeedd;
    --danger: #a32020;
    --font-size: 18px;
    --line-height: 1.75;
    --letter: .012em;
    --word: .05em;
    --radius: 12px;
    --wrap: 46rem;
}

body.big { --font-size: 20px; }
body.huge { --font-size: 22px; }
body.air { --line-height: 2.05; }
body.spaced { --letter: .045em; --word: .12em; }
body.sans { --sans: Verdana, Tahoma, "DejaVu Sans", sans-serif; }

*,
*::before,
*::after { box-sizing: border-box; }

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

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans, "Atkinson", Verdana, Tahoma, "DejaVu Sans", sans-serif);
    font-size: var(--font-size);
    line-height: var(--line-height);
    letter-spacing: var(--letter);
    word-spacing: var(--word);
    text-align: left;
    -webkit-font-smoothing: antialiased;
}

p, li, dd, dt { max-width: 68ch; }

a { color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: #0f4d3f; }

strong, b { font-weight: 700; color: #0e1620; }

::selection { background: #cfe9df; color: #0e1620; }

:focus-visible {
    outline: 3px solid var(--warm);
    outline-offset: 3px;
    border-radius: 4px;
}

.skip {
    position: absolute;
    left: -9999px;
    background: var(--ink);
    color: #fff;
    padding: .7rem 1rem;
    border-radius: 8px;
    z-index: 60;
}
.skip:focus { left: 1rem; top: 1rem; }

/* ------------------------------------------------------------- en-tête */

.topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(251, 250, 246, .96);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(8px);
}

.topbar__inner {
    max-width: 74rem;
    margin: 0 auto;
    padding: .7rem 1.2rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    color: var(--ink);
    text-decoration: none;
    flex: 0 0 auto;
}
.brand__mark {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--accent);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: .04em;
}
.brand__text { display: flex; flex-direction: column; line-height: 1.25; }
.brand__text strong { font-size: .95rem; }
.brand__text span { font-size: .76rem; color: var(--muted); }

.nav {
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    gap: .15rem;
}
.nav a {
    padding: .48rem .7rem;
    border-radius: 8px;
    color: var(--ink-2);
    text-decoration: none;
    font-size: .88rem;
    border: 1px solid transparent;
}
.nav a:hover { background: var(--accent-soft); color: #0f4d3f; }
.nav a.is-active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Barre de confort de lecture */
.confort {
    border-top: 1px solid var(--line);
    background: #f4f1e9;
}
.confort__inner {
    max-width: 74rem;
    margin: 0 auto;
    padding: .4rem 1.2rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    font-size: .8rem;
    color: var(--muted);
}
.confort__label { margin-right: .3rem; }
.confort button {
    font: inherit;
    font-size: .8rem;
    padding: .28rem .6rem;
    border-radius: 7px;
    border: 1px solid var(--line-strong);
    background: #fff;
    color: var(--ink-2);
    cursor: pointer;
}
.confort button[aria-pressed="true"] {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

/* --------------------------------------------------------------- page */

.wrap {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 2.4rem 1.2rem 5rem;
}
.wrap--wide { max-width: 74rem; }

.breadcrumb {
    font-size: .82rem;
    color: var(--muted);
    margin: 0 0 1rem;
}
.breadcrumb a { color: var(--muted); }

.lede {
    font-size: 1.06rem;
    color: var(--ink-2);
    margin: .6rem 0 0;
}

h1, h2, h3, h4 {
    line-height: 1.25;
    letter-spacing: -0.005em;
    margin: 0 0 .6rem;
    color: #0e1620;
}
h1 { font-size: clamp(1.85rem, 4vw, 2.5rem); margin-bottom: .4rem; }
h2 { font-size: clamp(1.35rem, 2.6vw, 1.7rem); margin-top: 2.6rem; }
h3 { font-size: 1.15rem; margin-top: 1.9rem; }
h4 { font-size: 1rem; margin-top: 1.4rem; }

h2 .num,
h3 .num {
    display: inline-grid;
    place-items: center;
    width: 1.9em;
    height: 1.9em;
    margin-right: .5rem;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: .62em;
    vertical-align: .18em;
}

p { margin: 0 0 1rem; }
ul, ol { margin: 0 0 1.2rem; padding-left: 1.4rem; }
li { margin-bottom: .45rem; }
li::marker { color: var(--accent); }

hr { border: 0; border-top: 1px solid var(--line); margin: 2.4rem 0; }

blockquote {
    margin: 1.4rem 0;
    padding: .9rem 1.1rem;
    border-left: 4px solid var(--warm);
    background: var(--warm-soft);
    border-radius: 0 8px 8px 0;
    color: #4a2f0c;
}

/* --------------------------------------------------------- composants */

.kicker {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--muted);
    margin: 0 0 .4rem;
    font-weight: 700;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1rem;
    margin: 1.4rem 0 2rem;
}

.card {
    display: block;
    padding: 1.15rem 1.2rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper-2);
    color: var(--ink);
    text-decoration: none;
}
a.card:hover { border-color: var(--accent); background: #f7fbf9; }
.card h3 { margin: .2rem 0 .35rem; font-size: 1.05rem; }
.card p { margin: 0; font-size: .9rem; color: var(--muted); }

.card__meta {
    font-size: .78rem;
    color: var(--accent);
    font-weight: 700;
}

.badge {
    display: inline-block;
    padding: .1rem .55rem;
    border-radius: 999px;
    background: var(--accent-soft);
    color: #14513f;
    font-size: .76rem;
    font-weight: 700;
    border: 1px solid #bfe0d3;
}
.badge--warm { background: var(--warm-soft); color: #6d3706; border-color: #eed3ae; }

.panel {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper-2);
    padding: 1.2rem 1.3rem;
    margin: 1.2rem 0;
}
.panel--accent { border-left: 5px solid var(--accent); background: #f6fbf9; }
.panel--warm { border-left: 5px solid var(--warm); background: #fdf7ee; }
.panel h3, .panel h4 { margin-top: 0; }

.checklist { list-style: none; padding: 0; }
.checklist li {
    position: relative;
    padding-left: 1.9rem;
    margin-bottom: .55rem;
}
.checklist li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: .05em;
    color: var(--accent);
    font-weight: 700;
}

/* Objectifs */
.objectifs {
    background: var(--accent-soft);
    border: 1px solid #bfe0d3;
    border-radius: var(--radius);
    padding: 1rem 1.2rem;
    margin: 1.2rem 0;
}
.objectifs h2, .objectifs h3 { margin-top: 0; font-size: 1rem; color: #14513f; }
.objectifs ol { margin-bottom: 0; }

/* Tableaux : lisibles, jamais collés */
.table-wrap { overflow-x: auto; margin: 1.2rem 0 2rem; }
table {
    border-collapse: collapse;
    width: 100%;
    min-width: 34rem;
    font-size: .92rem;
    background: var(--paper-2);
}
caption {
    caption-side: top;
    text-align: left;
    font-weight: 700;
    padding-bottom: .5rem;
    color: var(--ink-2);
}
th, td {
    border: 1px solid var(--line);
    padding: .6rem .7rem;
    text-align: left;
    vertical-align: top;
}
th { background: #eef4f1; color: #14513f; }
tbody tr:nth-child(even) td { background: #faf8f3; }

/* Sommaire / ancres */
.sommaire {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1rem 1.2rem;
    background: #f7f5ef;
    margin: 1.4rem 0;
}
.sommaire p { margin: 0 0 .5rem; font-weight: 700; }
.sommaire ol { margin: 0; }

/* Déroulé minuté */
.deroule { list-style: none; padding: 0; }
.deroule li {
    display: grid;
    grid-template-columns: 7.5rem 1fr;
    gap: .8rem;
    padding: .7rem 0;
    border-bottom: 1px dashed var(--line);
}
.deroule time {
    font-weight: 700;
    color: var(--accent);
    font-size: .85rem;
}

/* Quiz */
.quiz { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem; background: var(--paper-2); }
.quiz__q { padding: 1rem 0; border-bottom: 1px dashed var(--line); }
.quiz__q:last-of-type { border-bottom: 0; }
.quiz__q p { font-weight: 700; }
.quiz__opt {
    display: block;
    width: 100%;
    text-align: left;
    font: inherit;
    font-size: .95rem;
    padding: .55rem .75rem;
    margin: .3rem 0;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    cursor: pointer;
}
.quiz__opt:hover { border-color: var(--accent); }
.quiz__opt[data-state="good"] { border-color: var(--accent); background: #e4f1ec; }
.quiz__opt[data-state="bad"] { border-color: var(--danger); background: #fbe9e9; }
.quiz__fb { margin: .5rem 0 0; font-size: .9rem; color: var(--ink-2); }
.quiz__score { font-weight: 700; margin-top: 1rem; }

/* Boutons */
.btn {
    display: inline-block;
    padding: .6rem 1rem;
    border-radius: 9px;
    border: 1px solid var(--accent);
    background: var(--accent);
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: .92rem;
}
.btn:hover { background: #14513f; color: #fff; }
.btn--ghost { background: #fff; color: var(--accent); }
.btn--ghost:hover { background: var(--accent-soft); color: #14513f; }
.btn--small { font-size: .82rem; padding: .4rem .7rem; }

.actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.2rem 0; }

/* Téléchargements */
.dl { list-style: none; padding: 0; }
.dl li {
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--paper-2);
    padding: .85rem 1rem;
    margin-bottom: .6rem;
    display: flex;
    gap: 1rem;
    align-items: baseline;
    justify-content: space-between;
}
.dl strong { font-size: .95rem; }
.dl span { font-size: .8rem; color: var(--muted); }

/* Progression stagiaire */
.progress {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1rem 1.2rem;
    background: var(--paper-2);
    margin: 1.2rem 0;
}
.progress__bar {
    height: 12px;
    border-radius: 99px;
    background: #e8e3d8;
    overflow: hidden;
    margin: .5rem 0;
}
.progress__fill {
    height: 100%;
    width: 0;
    background: var(--accent);
    transition: width .3s ease;
}
.marks { list-style: none; padding: 0; margin: 1rem 0 0; }
.marks li { margin-bottom: .4rem; font-size: .92rem; }
.marks input { width: 1.2rem; height: 1.2rem; margin-right: .5rem; vertical-align: -.15rem; accent-color: var(--accent); }

/* Pied de page */
.footer {
    border-top: 1px solid var(--line);
    background: #f4f1e9;
    margin-top: 3rem;
}
.footer__inner {
    max-width: 74rem;
    margin: 0 auto;
    padding: 1.6rem 1.2rem;
    font-size: .84rem;
    color: var(--muted);
    display: flex;
    flex-wrap: wrap;
    gap: .6rem 1.6rem;
}
.footer a { color: var(--muted); }

/* Impression / PDF */
@media print {
    @page { size: A4; margin: 18mm 16mm 20mm; }
    body { background: #fff; font-size: 11.5pt; line-height: 1.55; }
    .topbar, .confort, .footer, .actions, .quiz__opt, .skip, .breadcrumb { display: none !important; }
    .wrap { max-width: none; padding: 0; }
    a { color: #17202a; text-decoration: none; }
    h2 { break-after: avoid; page-break-after: avoid; }
    .panel, .objectifs, .quiz, .card { break-inside: avoid; page-break-inside: avoid; }
    .page-break { break-before: page; page-break-before: always; }
    .quiz__fb { display: block !important; }
    /* Pas d'espacement de lettres à l'impression : il casse l'extraction du texte
       (copier-coller, lecteurs d'écran) et la recherche dans le PDF. */
    .kicker, .badge, .card__meta, .axis__num, .progress__text { letter-spacing: normal; }
}

@media (max-width: 720px) {
    .topbar__inner { padding: .6rem .9rem; }
    .brand { max-width: 100%; min-width: 0; }
    .brand__text { min-width: 0; }
    .brand__text strong { font-size: .86rem; overflow-wrap: anywhere; }
    .brand__text span { display: none; }
    .nav { width: 100%; margin-left: 0; }
    .nav a { font-size: .82rem; padding: .4rem .55rem; }
    .wrap { padding: 1.6rem .9rem 3.5rem; }
    .deroule li { grid-template-columns: 1fr; gap: .2rem; }
    .dl li { flex-direction: column; gap: .2rem; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition-duration: .001ms !important; }
}