/*
 * Styles des pages de lecture (accueil et architecture), par-dessus taskpane.css
 * qui apporte la palette et les boutons. Le volet lui-même n'utilise pas ce
 * fichier : il n'a pas les mêmes contraintes de largeur.
 */

body { background: var(--gris-tres-clair); }

.page {
    max-width: 800px;
    margin: 0 auto;
    padding: 28px 20px 56px;
    font-size: 14px;
}

.page-large { max-width: 1020px; }

.page h1 {
    font-size: 25px;
    margin: 0 0 8px;
    letter-spacing: -0.4px;
}

.page h2 {
    font-size: 17px;
    margin: 36px 0 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--gris-clair);
}

.chapeau {
    color: var(--encre-douce);
    margin: 0 0 22px;
    font-size: 15px;
    line-height: 1.6;
}

.fil {
    margin: 0 0 18px;
    font-size: 12.5px;
}

.fil a, .pied-page a { color: var(--bleu); }

.bloc {
    background: #fff;
    border: 1px solid var(--gris-clair);
    border-radius: 8px;
    padding: 16px 18px;
    margin-bottom: 14px;
}

.bloc p { margin: 0 0 8px; }
.bloc p:last-child { margin-bottom: 0; }

.bloc-titre {
    font-weight: 600;
    font-size: 13.5px;
    color: var(--encre);
}

ol, ul { padding-left: 20px; }
li { margin-bottom: 7px; line-height: 1.6; }

p { line-height: 1.65; }

code {
    background: #eef1f7;
    padding: 1px 5px;
    border-radius: 3px;
    font-family: Consolas, "Courier New", monospace;
    font-size: 12.5px;
}

.actions { display: flex; flex-wrap: wrap; margin: 0 -5px; }

.actions .bouton {
    width: auto;
    margin: 0 5px 8px;
    padding: 10px 18px;
    text-decoration: none;
}

.avertissement {
    background: var(--orange-clair);
    border: 1px solid #f0d9a8;
    color: #8a5f12;
    border-radius: 8px;
    padding: 14px 18px;
    margin-bottom: 20px;
    line-height: 1.6;
}

.avertissement strong { color: #7a5310; }

.recommandation {
    background: var(--vert-clair);
    border: 1px solid #bcd9c8;
    border-radius: 8px;
    padding: 16px 18px;
    margin: 18px 0 8px;
}

.recommandation-titre {
    margin: 0 0 8px;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--vert);
}

.recommandation p { margin: 0 0 10px; }
.recommandation p:last-child { margin-bottom: 0; }

/* ---------- Figures ---------- */

.figure {
    margin: 0 0 18px;
    padding: 16px;
    background: #fff;
    border: 1px solid var(--gris-clair);
    border-radius: 8px;
    /* Un schéma large doit défiler dans son cadre, jamais faire défiler la page. */
    overflow-x: auto;
}

.figure svg {
    display: block;
    width: 100%;
    min-width: 640px;
    height: auto;
}

figcaption {
    margin-top: 12px;
    font-size: 12.5px;
    color: var(--encre-douce);
    line-height: 1.55;
}

/* Textes des schémas. SVG n'hérite pas de tout : on pose police et taille. */
svg text { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }

.s-etiquette {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.6px;
    fill: var(--encre-douce);
}

.s-titre { font-size: 15px; font-weight: 600; fill: var(--encre); }
.s-boite { font-size: 13.5px; font-weight: 600; fill: var(--encre); }
.s-note { font-size: 12px; fill: var(--encre-douce); }
.s-fort { font-weight: 600; fill: var(--encre); }
.s-pale { fill: #9aa6c4; }
.s-frontiere { font-size: 11.5px; font-weight: 600; fill: var(--rouge); }
.s-socle { font-size: 12px; font-style: italic; fill: var(--encre-douce); }
.s-fleche { font-size: 11.5px; fill: var(--encre-douce); }

/* ---------- Grille de bénéfices ---------- */

.grille { display: flex; flex-wrap: wrap; margin: 0 -7px; }

/* Base large : quatre cartes tombent en 2×2 plutôt qu'en 3 + 1 orpheline. */
.grille .bloc {
    flex: 1 1 340px;
    margin: 0 7px 14px;
}

/* ---------- Tableau ---------- */

.tableau {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border: 1px solid var(--gris-clair);
    border-radius: 8px;
    overflow: hidden;
    font-size: 13px;
}

.tableau th {
    text-align: left;
    background: var(--gris-tres-clair);
    padding: 10px 12px;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--encre-douce);
    border-bottom: 1px solid var(--gris-clair);
}

.tableau td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--gris-clair);
    vertical-align: top;
    line-height: 1.5;
}

.tableau tr:last-child td { border-bottom: none; }

.etat-ok, .etat-partiel, .etat-ko { white-space: nowrap; font-weight: 600; }
.etat-ok { color: var(--vert); }
.etat-partiel { color: var(--orange); }
.etat-ko { color: var(--rouge); }

.liste-etapes li { margin-bottom: 10px; }

.pied-page {
    margin-top: 32px;
    padding-top: 14px;
    border-top: 1px solid var(--gris-clair);
    font-size: 12.5px;
    color: var(--encre-douce);
}

.page h3 {
    font-size: 14.5px;
    margin: 24px 0 10px;
    color: var(--encre);
}