/* ===== SKAL — accessibilité (site public, espace personnel, administration) =====
 *
 * Chargé après les feuilles de style de chaque espace. Par défaut, RIEN ne change à l'apparence du site :
 *  - éléments invisibles : texte réservé aux lecteurs d'écran, lien « Aller au contenu » (visible seulement
 *    quand on le sélectionne au clavier) ;
 *  - réglages du téléphone ou de l'ordinateur suivis automatiquement (animations réduites, contraste
 *    augmenté, mode « Contraste élevé » de Windows) ;
 *  - réglages choisis par la personne sur la page /accessibilite : classes « a-… » sur <html>
 *    (app/noyau/accessibilite.php), ajoutées aussi par assets/js/accessibilite-auto.js.
 */

/* ----- Texte lu par les lecteurs d'écran, jamais affiché ----- */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ----- Lien « Aller au contenu » : hors de l'écran, il apparaît quand on le sélectionne au clavier ----- */
.lien-evitement {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 5000;
    padding: 0.75rem 1.25rem;
    background: #ffffff;
    color: #000000;
    font-weight: 600;
    text-decoration: underline;
    border: 3px solid #800000;
    border-radius: 6px;
    transform: translateY(-200%);
}

.lien-evitement:focus {
    transform: none;
}

/* Le contenu reçoit le focus après « Aller au contenu » : pas de cadre autour de toute la page. */
#contenu:focus {
    outline: none;
}

/* ----- Symboles décoratifs (puces, coches) : ignorés par les lecteurs d'écran -----
 * Seulement dans les navigateurs qui comprennent cette écriture : les autres gardent la règle d'origine. */
@supports (content: "x" / "") {
    .card li::before { content: '▸' / ''; }
    .services-list p::before { content: '●' / ''; }
    .bandeau-cookie-garanties li::before { content: "✓" / ""; }
    .module-ouvrir::before { content: '▸ ' / ''; }
    .module-ouvrir[aria-expanded="true"]::before { content: '▾ ' / ''; }
}

/* ----- Formulaire des réglages d'affichage (/accessibilite, Compte, Administrateurs) ----- */
.affichage-choix {
    border: 0;
    padding: 0;
    margin: 0 0 1.25rem;
    min-width: 0;
}

.affichage-choix legend {
    padding: 0;
    margin-bottom: 0.75rem;
    font-weight: 600;
}

.affichage-option {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.15rem 0.75rem;
    margin-bottom: 0.9rem;
    text-align: left;
}

.affichage-option input {
    width: 1.4rem;
    height: 1.4rem;
    margin: 0;
    accent-color: #800000;
    cursor: pointer;
}

.affichage-option label {
    display: block;
    margin: 0;
    font-weight: 600;
    cursor: pointer;
}

.affichage-formulaire .affichage-aide {
    grid-column: 2;
    margin: 0;
    max-width: none;
    font-size: 0.9rem;
    line-height: 1.4;
    color: #555555;
}

/* Page /accessibilite */
.accessibilite h2 {
    margin-top: 3rem;
}

.accessibilite ul {
    margin: 0 0 1.5rem 1.5rem;
    line-height: 1.7;
}

.accessibilite li {
    margin-bottom: 0.5rem;
}

/* =====================================================================
 * Réglages du téléphone ou de l'ordinateur, suivis automatiquement
 * ===================================================================== */

/* « Réduire les animations » : aucun mouvement. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Mode « Contraste élevé » de Windows : les boutons dessinés par leur seul fond gardent un contour,
 * et le menu « burger » reste visible. */
@media (forced-colors: active) {
    .btn-submit,
    .bandeau-cookie-accepter,
    .bouton-pointer,
    .btn,
    .btn-plein {
        border: 2px solid ButtonText;
    }

    .menu-toggle span {
        forced-color-adjust: none;
        background: CanvasText;
    }

    .lien-evitement {
        border-color: CanvasText;
    }
}

/* =====================================================================
 * Réglages choisis par la personne (classes sur <html>)
 * ===================================================================== */

/* ----- Texte plus grand ----- */
html.a-texte {
    font-size: 125%;
}

html.a-texte body {
    font-size: 1rem;
}

html.a-texte input,
html.a-texte textarea,
html.a-texte select,
html.a-texte button {
    font-size: max(1rem, 16px);
}

/* ----- Police plus lisible ----- */
html.a-police body,
html.a-police button,
html.a-police input,
html.a-police select,
html.a-police textarea {
    font-family: Verdana, Tahoma, 'DejaVu Sans', 'Segoe UI', sans-serif !important;
}

html.a-police h1,
html.a-police h2,
html.a-police h3,
html.a-police .hero h1 {
    font-weight: 600;
}

html.a-police body {
    font-weight: 400;
}

/* ----- Texte plus espacé (critère WCAG 1.4.12) ----- */
html.a-espacement body,
html.a-espacement body * {
    line-height: 1.8 !important;
    letter-spacing: 0.12em !important;
    word-spacing: 0.16em !important;
}

html.a-espacement p + p {
    margin-top: 1em;
}

/* ----- Sans animations ----- */
html.a-animations *,
html.a-animations *::before,
html.a-animations *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
}

html.a-animations .btn-submit:hover,
html.a-animations .logo:hover,
html.a-animations .card:hover,
html.a-animations .expertise-card:hover,
html.a-animations a.expertise-card::after,
html.a-animations .client-item:hover,
html.a-animations .gallery-item:hover img,
html.a-animations .tuile:hover,
html.a-animations .bouton-pointer:active {
    transform: none !important;
}

/* ----- Contraste renforcé ----- */
/* Commun : liens soulignés, repère du clavier très visible (contour noir et halo blanc, lisible sur fond
 * clair comme sur fond noir). */
html.a-contraste a:not(.btn-submit):not(.btn):not(.btn-secondaire):not(.btn-petit):not(.tuile):not(.carte):not(.card):not(.expertise-card) {
    text-decoration: underline !important;
}

html.a-contraste :focus-visible {
    outline: 3px solid #000000 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 5px #ffffff !important;
}

/* Site public */
html.a-contraste {
    --color-gray: #333333;
}

html.a-contraste nav a:hover,
html.a-contraste nav a.active,
html.a-contraste .footer-section .first-letter,
html.a-contraste .contact-info .first-letter,
html.a-contraste .cta-card .first-letter,
html.a-contraste .footer-section a:hover,
html.a-contraste .footer-bottom a:hover,
html.a-contraste .contact-item a:hover,
html.a-contraste .hero .first-letter {
    color: #ff7a7a;
}

html.a-contraste nav a::after,
html.a-contraste .hero h1::after,
html.a-contraste .cta-card h2::after {
    background-color: #ff7a7a;
}

html.a-contraste .footer-bottom,
html.a-contraste .header-tagline,
html.a-contraste .contact-icon {
    color: #e0e0e0;
}

html.a-contraste .form-group input,
html.a-contraste .form-group textarea,
html.a-contraste .bandeau-cookie-refuser {
    border-color: #555555;
}

html.a-contraste .bandeau-cookie-refuser,
html.a-contraste .bandeau-cookie-actions a {
    color: #222222;
}

html.a-contraste .gallery-legende {
    color: #222222;
}

/* Logos en couleur et bien nets ; cartes à icône bien délimitées */
html.a-contraste .client-logo img {
    filter: none;
    opacity: 1;
}

html.a-contraste .expertise-card {
    border-color: #555555;
}

/* Espace personnel */
html.a-contraste {
    --gris: #333333;
    --bord: #8a8a8a;
}

html.a-contraste .onglets a {
    color: #e6e6e6;
}

html.a-contraste .entete-nom {
    opacity: 1;
}

html.a-contraste .carte {
    box-shadow: none;
    outline: 1px solid #8a8a8a;
}

html.a-contraste input[type="text"],
html.a-contraste input[type="password"],
html.a-contraste input[type="datetime-local"],
html.a-contraste input[type="time"],
html.a-contraste textarea,
html.a-contraste .jour span {
    border-color: #555555;
}

html.a-contraste .mois-fleche.inactif {
    opacity: 0.5;
}

/* Administration */
html.a-contraste {
    --gris-texte: #333333;
    --gris-bord: #8a8a90;
}

html.a-contraste .barre-utilisateur {
    color: #e6e6e6;
}

html.a-contraste .affichage-formulaire .affichage-aide {
    color: #222222;
}

/* =====================================================================
 * Mots de passe : bouton « Afficher » dans le champ (assets/js/mot-de-passe.js)
 * ===================================================================== */
.mdp-zone {
    position: relative;
    display: block;
}

.mdp-zone input {
    width: 100%;
    padding-right: 5.5rem;
}

.mdp-voir {
    position: absolute;
    top: 50%;
    right: 0.4rem;
    transform: translateY(-50%);
    min-height: 2rem;
    padding: 0.2rem 0.6rem;
    border: 1px solid #c8c8c8;
    border-radius: 6px;
    background: #ffffff;
    color: #333333;
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
}

.mdp-voir:hover,
.mdp-voir[aria-pressed="true"] {
    border-color: #800000;
    color: #800000;
}

/* Règles à respecter, écrites en petit sous le champ */
.regles-mdp {
    margin-top: 0.3rem;
    font-size: 0.85rem;
    line-height: 1.4;
    color: #555555;
}

html.a-contraste .regles-mdp {
    color: #222222;
}