/* ================================================================
 * DATIVO - Audit web cyber · audit-web-cyber.css
 * Styles de la seule page solutions/audit-web-cyber.php ($extra_styles), refaite le 12/11/2026.
 * Fond de page continu, sections en panneaux arrondis dans le conteneur.
 * Jetons de tokens.css uniquement : aucune couleur, aucun radius, aucune ombre en dur.
 * Contrastes (WCAG 2.1, calculés depuis tokens.css) : forest/blanc 11,8:1, gray-700/blanc 10,3:1,
 * gray-600/gray-50 7,2:1, emerald-700/blanc 6,6:1, blanc/emerald-700 6,6:1, error/blanc 6,5:1.
 * ================================================================ */

#awc-page { background: var(--gray-50); padding-bottom: var(--space-16); }
.awc-panneaux { display: grid; gap: var(--space-8); padding-top: var(--space-12); }

.awc-panneau {
    background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-sm); padding: clamp(1.5rem, 4vw, 3rem); scroll-margin-top: calc(var(--header-height) + var(--space-4));
}
.awc-panneau > h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 0 0 var(--space-4); text-wrap: balance; }
.awc-panneau p { color: var(--gray-700); }
.awc-panneau > :last-child { margin-bottom: 0; }
.awc-chapeau { font-size: var(--text-lg); margin-bottom: var(--space-8); }
.awc-panneau a:not(.btn), .awc-panneau a:not(.btn):visited { color: var(--emerald-700); text-decoration: underline; text-underline-offset: 3px; }
.awc-panneau a:not(.btn):hover { color: var(--forest); }

/* Pastilles de preuve dans le hero (sur fond sombre) */
.awc-preuves { list-style: none; padding: 0; }

/* Cartes de même rang : risques (trois), volets et apports du rapport (deux colonnes) */
.awc-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.awc-grille--deux { grid-template-columns: repeat(2, 1fr); }
.awc-suite { margin: var(--space-6) 0 0; }
.awc-carte {
    display: flex; flex-direction: column; background: var(--gray-50); border: 1px solid var(--gray-200);
    border-radius: var(--radius-xl); padding: clamp(1.25rem, 3vw, 2rem);
}
.awc-carte__icone {
    width: 52px; height: 52px; border-radius: var(--radius-lg); display: grid; place-items: center;
    background: var(--emerald-100); color: var(--emerald-700); margin-bottom: var(--space-4);
}
.awc-carte__icone i, .awc-carte__icone svg { width: 28px; height: 28px; }
.awc-carte h3 { font-size: var(--text-xl); margin: 0 0 var(--space-2); }
.awc-carte p { font-size: 0.96rem; margin: 0 0 var(--space-4); }
.awc-carte .awc-carte__pied { margin-top: auto; }

.awc-sources {
    margin: auto 0 0; padding-top: var(--space-4); border-top: 1px solid var(--gray-200);
    font-size: var(--text-sm); color: var(--gray-600);
}
.awc-carte .awc-sources { color: var(--gray-600); margin-bottom: 0; }

/* Parcours : la seule vraie séquence de la page, donc numérotée */
.awc-etapes { list-style: none; counter-reset: awc-etape; padding: 0; margin: 0 0 var(--space-6); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.awc-etapes li {
    counter-increment: awc-etape; position: relative; background: var(--gray-50); border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg); padding: var(--space-6) var(--space-4) var(--space-4);
}
.awc-etapes li::before {
    content: counter(awc-etape); display: grid; place-items: center; width: 2.25rem; height: 2.25rem;
    border-radius: var(--radius-full); background: var(--emerald-700); color: var(--white);
    font-family: var(--font-display); font-weight: 700; margin-bottom: var(--space-3);
}
.awc-etapes h3 { font-size: var(--text-lg); margin: 0 0 var(--space-2); }
.awc-etapes p { font-size: 0.93rem; margin: 0; }

/* Questions fréquentes : éléments natifs details/summary */
.awc-questions { display: grid; gap: var(--space-3); }
.awc-questions details { border: 1px solid var(--gray-200); border-radius: var(--radius-lg); background: var(--gray-50); padding: var(--space-4) var(--space-6); }
.awc-questions summary { cursor: pointer; font-family: var(--font-display); font-weight: 700; color: var(--forest); font-size: var(--text-lg); }
.awc-questions details p { margin: var(--space-3) 0 0; }

/* Commande : panneau clair, la section forte reste le hero */
#awc-commande { border: 2px solid var(--emerald-200); }
.awc-commande { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-8); align-items: center; }
.awc-commande__action { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-4); }
#awc-commande .btn-link-arrow, #awc-commande .btn-link-arrow:visited { color: var(--emerald-700); }
#awc-page .btn-primary, #awc-page .btn-primary:visited { color: var(--white); }

@media (max-width: 991.98px) {
    .awc-grille, .awc-grille--deux, .awc-etapes { grid-template-columns: 1fr; }
    .awc-commande { grid-template-columns: 1fr; }
    .awc-commande__action { align-items: flex-start; }
}
@media (max-width: 575.98px) {
    .awc-questions details { padding: var(--space-4); }
}