/* =========================================================================
   audit.css — /portfolio/audit. S'appuie sur portfolio.css (cartes, titres,
   mesures, étiquettes) : seuls les éléments propres au rapport sont ici.
   Couleurs tirées des jetons du thème, les deux thèmes fonctionnent donc
   sans règle dédiée.
   ========================================================================= */

/* Colonne plus étroite que le portfolio : c'est un texte qu'on lit. */
.audit {
    --audit-largeur: 960px;
    padding-bottom: 80px;
}
.audit-entete,
.audit-mesures,
.audit-section,
.audit-etiquettes {
    width: min(var(--audit-largeur), 100% - 2 * var(--gutter));
    margin-inline: auto;
}

.audit-entete { padding-top: calc(var(--nav-height) + clamp(32px, 6vw, 72px)); }
/* flex + fit-content : seul sur sa ligne (le surtitre qui suit est
   inline-flex), mais cliquable seulement sur son texte. */
.audit-retour {
    display: flex;
    width: fit-content;
    margin-bottom: 1.4rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-decoration: none;
}
.audit-retour:hover,
.audit-retour:focus-visible { color: var(--accent-color); }
.audit-entete h1 {
    font-size: clamp(2.1rem, 5.5vw, 3.4rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.05;
    margin-bottom: 1.1rem;
}
.audit-chapo {
    font-size: clamp(1.02rem, 1.7vw, 1.15rem);
    color: var(--text-secondary);
    line-height: 1.7;
    max-width: 44em;
    margin-bottom: 1.1rem;
}

.audit-mesures { margin-top: 2.2rem; margin-bottom: 0; }

.audit-section { padding-top: 56px; }
.audit-intro { color: var(--text-secondary); line-height: 1.7; max-width: 44em; margin: -0.6rem 0 1.2rem; }

.audit-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.audit-carte { padding: 22px 24px; }
.audit-carte h3 { font-size: 1rem; font-weight: 700; margin-bottom: 0.6rem; }
.audit-carte p { color: var(--text-secondary); line-height: 1.65; font-size: 0.95rem; }
.audit-carte p + p { margin-top: 0.8rem; }
.audit-carte code {
    font-family: var(--font-mono);
    font-size: 0.86em;
    padding: 1px 6px;
    border-radius: 6px;
    background: var(--accent-soft);
    color: var(--text-color);
}
.audit-carte--large { padding: 24px 28px; }

/* --- Constats : une ligne par constat, gravité · description · correctif --- */
.audit-constats { list-style: none; display: grid; gap: 10px; }
.audit-constat {
    display: grid;
    grid-template-columns: 92px minmax(0, 1.35fr) minmax(0, 1fr);
    align-items: start;
    gap: 18px;
    padding: 18px 22px;
}
.audit-constat__corps h3 { font-size: 0.98rem; font-weight: 700; margin-bottom: 0.3rem; line-height: 1.4; }
.audit-constat__corps p { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.6; }
.audit-constat__correctif {
    position: relative;
    padding-left: 1.6rem;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-color);
}
/* Coche dessinée en CSS (deux bordures d'un rectangle tourné) : pas d'emoji,
   dont le rendu varie d'un système à l'autre. */
.audit-constat__correctif::before {
    content: "";
    position: absolute;
    left: 4px; top: 0.3em;
    width: 6px; height: 11px;
    border: solid var(--accent-color);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.audit-gravite {
    justify-self: start;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1px solid transparent;
}
.audit-gravite--moyenne { color: var(--accent-warm); background: var(--accent-warm-soft); border-color: var(--accent-warm-soft); }
.audit-gravite--faible  { color: var(--accent-color); background: var(--accent-soft); border-color: var(--accent-soft); }
.audit-gravite--info    { color: var(--text-secondary); border-color: var(--border-color); }

.audit-etiquettes { margin-top: 3rem; }

/* --- Écrans intermédiaires ------------------------------------------------ */
@media (max-width: 860px) {
    .audit-grille { grid-template-columns: 1fr; }
    /* Le correctif passe sous la description, aligné sur elle. */
    .audit-constat { grid-template-columns: 92px minmax(0, 1fr); row-gap: 10px; }
    .audit-constat__correctif { grid-column: 2; }
}

/* --- Téléphone ------------------------------------------------------------ */
@media (max-width: 560px) {
    /* Des chiffres courts : deux par ligne tiennent, et évitent quatre
       cartes empilées avant le premier paragraphe. */
    .audit-mesures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .audit-constat { grid-template-columns: 1fr; padding: 18px; }
    .audit-constat__correctif { grid-column: auto; }
    .audit-carte,
    .audit-carte--large { padding: 20px; }
}