/* Copie locale de https://skynium.fr/ressources/style.css (récupérée le 15/10/2026).
   Le site des 30 ans ne charge rien depuis l’extérieur : à remettre à jour à la main si Skynium modifie sa feuille. */
/* =================================================== */
/* 1. CONFIGURATION GLOBALE ET VARIABLES DE COULEUR   */
/* =================================================== */

:root {
    /* Ta palette de couleurs */
    --primary: #1D0469;     /* Dominante (bleu/violet foncé) */
    --secondary: #FA5DFF;   /* Secondaire (rose vif) */
    --tertiary: #FF8A3F;    /* Tertiaire (orange) */
    
    /* Couleurs neutres */
    --bg-color: #FAFAFA;    /* Fond "blanc cassé" */
    --text-color: #333333; /* Texte principal (plus doux que le noir pur) */
    --white: #FFFFFF;

    /* Variantes LISIBLES des couleurs de marque, pour le texte.
       Le rose (#FA5DFF) plafonne à 2,5:1 sur fond clair et l'orange
       (#FF8A3F) à 2,3:1 : en dessous de 4,5:1, un texte n'est pas lisible
       pour une partie des visiteurs — et c'est précisément le public de
       PETAL. Les deux teintes vives restent employées en FOND et en
       accent, où elles sont parfaites ; ces deux-ci les remplacent partout
       où la couleur porte du texte. */
    --secondary-texte: #A6008F;  /* rose lisible  — 6,7:1 sur fond clair */
    --tertiary-texte:  #A85000;  /* orange lisible — 5,3:1 sur fond clair */
    --text-muted:      #666666;  /* gris secondaire — 5,5:1 (les #888, #999
                                    et #aaa employés jusqu'ici tombaient
                                    entre 2,2 et 3,4:1) */

    /* Anciens noms, conservés parce que plusieurs règles plus bas les
       emploient. Ils valaient #D830E0 (3,7:1) et #E67A2E (2,8:1) : le
       commentaire d'origine annonçait 4,52:1, c'était faux. Ils pointent
       maintenant sur les variantes réellement lisibles. */
    --secondary-dark:  var(--secondary-texte);
    --tertiary-dark:   var(--tertiary-texte);
    
    /* Variables de style */
    --border-radius: 8px;   /* Bords arrondis */
    --transition-speed: 0.3s; /* Vitesse d'animation fluide */
    --container-width: 1200px;
}

/* Réinitialisation de base pour un style cohérent */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Calcule les bordures et paddings dans la largeur totale */
}

/* Style de base du corps de la page */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.6;
}

a {
    /* Tous les liens de tous les sites Skynium passent par ici. En rose vif
       ils étaient à 2,5:1 : illisibles. Même famille de teinte, assombrie
       jusqu'à 6,7:1. */
    color: var(--secondary-texte);
    text-decoration: none;
    transition: color var(--transition-speed) ease;
}

a:hover, a:focus-visible {
    color: var(--tertiary-texte); /* Au survol, on passe à l'orange lisible */
    text-decoration: underline;
}

/* Un lien au milieu d'un paragraphe ne doit pas se repérer à la seule
   couleur : souligné dans le contenu, pas dans la navigation ni dans les
   cartes, où la forme du bloc suffit. */
main p a,
main li a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

ul {
    list-style: none;
}

/* =================================================== */
/* 2. BANDEAU / HEADER                                 */
/* =================================================== */

header {
    display: flex; /* Aligne le logo/nom et la nav horizontalement */
    justify-content: space-between; /* Pousse les éléments aux extrémités */
    align-items: center; /* Centre verticalement */
    padding: 1.5rem 5%; /* Marge intérieure (haut/bas | gauche/droite) */
    background-color: var(--white);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    position: sticky; /* Le header reste en haut quand on défile */
    top: 0;
    z-index: 100;
}

/* Logo et Nom */
header > div {
    display: flex;
    align-items: center;
}

header img {
    height: 50px; /* Taille du logo */
    margin-right: 15px;
}

header p {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--primary);
}

/* =================================================== */
/* 3. NAVIGATION PRINCIPALE                          */
/* =================================================== */

nav > ul {
    display: flex; /* Met les boutons du menu en ligne */
}

nav > ul > li {
    margin-left: 20px; /* Espace entre les boutons */
    position: relative; /* Nécessaire pour le menu déroulant */
}

nav > ul > li > a {
    font-size: 1rem;
    font-weight: 500;
    color: var(--primary);
    padding: 10px 15px;
    border-radius: var(--border-radius);
    transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
}

/* Animation au survol des liens du menu.
   Le blanc sur le rose vif ne fait que 2,60:1 : au survol, le libellé
   devenait moins lisible qu'au repos. Le bleu foncé donne 6,34:1. */
nav > ul > li > a:hover {
    background-color: var(--secondary);
    color: var(--primary);
}

/* --- Menu déroulant "Partenaires" --- */

nav ul li ul {
    /* Caché par défaut */
    visibility: hidden;
    opacity: 0;
    transform: translateY(10px); /* Léger décalage pour l'animation */
    
    position: absolute; /* Sort du flux normal */
    top: 100%; /* Se place juste en dessous du parent */
    left: 0;
    background-color: var(--white);
    border-radius: var(--border-radius);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    min-width: 250px; /* Largeur minimale */
    padding: 10px 0;
    transition: all var(--transition-speed) ease-in-out;
}

nav ul li ul li a {
    display: block; /* Prend toute la largeur */
    padding: 10px 20px;
    color: var(--primary);
    transition: background-color var(--transition-speed) ease;
}

nav ul li ul li a:hover {
    background-color: var(--bg-color); /* Léger fond au survol */
}

/* Au survol du <li> parent, ou quand le focus entre dedans, on montre
   le <ul> enfant.
   Avec « :hover » seul, le sous-menu restait en visibility: hidden pour
   un utilisateur au clavier : les liens partenaires n'etaient pas
   seulement invisibles, ils etaient hors du parcours de tabulation.
   Ils etaient donc inatteignables sans souris. */
nav > ul > li:hover > ul,
nav > ul > li:focus-within > ul {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

#mobile-menu-icon {
    display: none; /* Caché sur ordinateur */
    font-size: 1.5rem; /* Taille de l'icône */
    color: var(--primary);
    cursor: pointer; /* Montre que c'est cliquable */
    padding: 10px;
}

/* =================================================== */
/* 4. CONTENU PRINCIPAL (ACCUEIL)                      */
/* =================================================== */

main {
    max-width: var(--container-width); /* Limite la largeur du contenu */
    margin: 4rem auto; /* Centre le contenu et ajoute de l'espace en haut/bas */
    padding: 0 5%;
}

main h1 {
    font-size: 3rem;
    color: var(--primary);
    margin-bottom: 1rem;
}

main h2 {
    font-size: 2rem;
    /* L'orange vif plafonne à 2,25:1 sur le fond clair : tous les <h2> de
       tous les sites Skynium étaient sous le seuil, y compris pour du
       grand texte (3:1). Même teinte, assombrie à 5,3:1. */
    color: var(--tertiary-texte);
    margin-bottom: 1.5rem;
}

main p {
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
}

/* =================================================== */
/* 6. PIED DE PAGE / FOOTER                            */
/* =================================================== */

footer {
    background-color: var(--primary);
    color: var(--white);
    padding: 3rem 5%;
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 2rem;
}

footer div {
    min-width: 200px;
    flex: 1;
}

footer h3 {
    font-size: 1.25rem;
    color: var(--secondary);
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

footer p {
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
    color: #e0e0e0; /* 👈 CORRECTION : texte visible */
}

footer ul {
    list-style: none;
    padding: 0;
}

footer ul li {
    margin-bottom: 0.5rem;
}

/* 👇 CORRECTION IMPORTANTE : Liens du footer en blanc clair */
footer a {
    color: #e0e0e0 !important; /* Force la couleur blanche */
    font-size: 0.95rem;
    text-decoration: none;
    transition: color 0.3s ease;
}

footer a:hover {
    color: var(--secondary) !important; /* Rose au survol */
    text-decoration: underline;
}

/* 1. On force l'affichage vertical (l'un sous l'autre) */
footer nav ul {
    display: flex !important;       /* Active Flexbox */
    flex-direction: column !important; /* Force la direction verticale */
    gap: 0.5rem !important;         /* Espace propre entre chaque réseau */
    margin: 0 !important;           /* Enlève les marges héritées */
}

/* 2. On réinitialise les liens pour enlever le style "bouton" du header */
footer nav ul li a {
    background-color: transparent !important; /* 🛑 SUPPRIME LE FOND ROSE */
    padding: 0 !important;          /* Enlève le gros rembourrage du header */
    border-radius: 0 !important;    /* Enlève les bords ronds du header */
    display: inline-flex !important; /* Aligne parfaitement l'icône et le texte */
    align-items: center;            /* Centre verticalement l'icône */
    gap: 10px;                      /* Espace entre l'icône et le texte "Instagram" */
    width: auto !important;
    height: auto !important;
}

/* 3. On définit un survol propre (juste le texte qui change de couleur) */
footer nav ul li a:hover {
    background-color: transparent !important; /* Toujours pas de fond au survol */
    color: var(--secondary) !important;       /* Le texte devient rose */
    box-shadow: none !important;              /* Enlève les ombres s'il y en a */
}

/* Copyright en bas du footer */
/* =========================================================
   FOOTER SKYNIUM — BARRE DU BAS (logo + "Groupe Skynium")
   👉 Dans ton style.css, REMPLACE ton ancien bloc ".footer-bottom"
      par tout ce qui suit. Le reste de ton footer ne bouge pas.
========================================================= */

.footer-bottom {
    flex: 0 0 100%;               /* 👈 LA CORRECTION : prend toute la largeur, sur sa propre ligne */
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-top: 2.5rem;
    padding-top: 1.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.15);  /* ligne de séparation pleine largeur */
}

/* Bloc logo + nom : cliquable vers groupe-skynium.com, texte centré sous le logo */
.footer-brand {
    display: inline-flex;
    flex-direction: column;
    align-items: center;          /* "Groupe Skynium" pile au centre, sous le logo */
    text-align: center;
    text-decoration: none !important;
    line-height: 1;
}

.footer-brand img {
    height: 34px;
    width: auto;
    filter: brightness(0) invert(1);   /* rend le logo full blanc */
    margin-bottom: 10px;
}

.footer-brand .brand-name {
    color: var(--white);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.5px;
    white-space: nowrap;          /* pas de retour à la ligne / débordement */
}

/* Survol discret : on évite le soulignement hérité des liens du footer */
.footer-brand:hover {
    text-decoration: none !important;
}
.footer-brand:hover img,
.footer-brand:hover .brand-name {
    opacity: 0.8;
    transition: opacity var(--transition-speed) ease;
}

.footer-copyright {
    font-size: 0.85rem;
    color: #aaa;
}

/* Mobile : on empile et on centre */
@media (max-width: 768px) {
    .footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: 1.25rem;
    }
}

/* =================================================== */
/* 7. SECTION RESPONSIVE (LA NOUVELLE PARTIE)          */
/* =================================================== */

/* Ces styles s'appliquent SEULEMENT si la largeur de l'écran 
  est de 768px OU MOINS (tablettes et mobiles).
*/
@media (max-width: 768px) {

    /* --- Réglages du Header --- */
    
    header {
        padding: 1rem 5%; /* Header moins haut */
    }

    header img {
        height: 40px; /* Logo plus petit */
    }

    header p {
        font-size: 1.5rem; /* Nom "Skynium" plus petit */
    }

    /* --- GESTION DU MENU HAMBURGER --- */

    /* 1. On cache le menu de bureau */
    nav > ul#main-nav {
        display: none; 
        
        /* On le prépare à devenir le menu mobile */
        position: absolute;
        top: 100%; /* Se place sous le header */
        left: 0;
        right: 0;
        background-color: var(--white);
        box-shadow: 0 10px 10px rgba(0, 0, 0, 0.05);
        flex-direction: column; /* Les liens s'empileront verticalement */
        width: 100%;
    }

    /* 2. On affiche le menu mobile quand il a la classe ".open" (gérée par JS) */
    nav > ul#main-nav.open {
        display: flex; 
    }

    /* 3. On ré-initialise les styles des liens pour le mobile */
    nav > ul > li {
        margin-left: 0; /* Plus de marge à gauche */
    }

    nav > ul > li > a {
        display: block; /* Prend toute la largeur */
        padding: 1.25rem; /* Plus facile à cliquer */
        text-align: center;
        border-bottom: 1px solid var(--bg-color);
    }
    
    /* 4. On affiche l'icône hamburger (qui était cachée) */
    #mobile-menu-icon {
        display: block;
    }

    /* 5. On gère le sous-menu pour qu'il s'intègre */
    nav ul li ul {
        visibility: visible;
        opacity: 1;
        position: relative; /* Il n'est plus "flottant" */
        transform: none;
        box-shadow: none;
        background-color: rgba(0,0,0, 0.03); /* Légère couleur de fond */
        padding: 0;
    }
    
    nav ul li ul li a {
        padding-left: 3rem; /* On indente les sous-liens */
        font-size: 0.9rem;
    }
    
    nav > ul > li:hover > ul {
        /* On désactive l'effet de survol sur mobile */
        transform: none;
    }


    /* --- Réglages du Contenu --- */

    main {
        margin-top: 2rem;
    }

    main h1 {
        font-size: 2.2rem; /* Titres plus petits */
    }

    main h2 {
        font-size: 1.5rem;
    }

    /* --- Réglages du Footer --- */
    
    footer {
        /* Le footer était déjà responsive, mais on peut 
           forcer l'alignement à gauche pour plus de propreté */
        justify-content: flex-start;
        text-align: center; /* Centrer le texte dans chaque colonne */
    }
    
    footer div {
        /* Force chaque colonne à prendre 100% de la largeur */
        min-width: 100%; 
    }

    .legal-page h1 {
        display: block;
        border: none;
    }

}

/* --- BOUTON CONNEXION HEADER (NOUVEAU) --- */

.header-auth-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: var(--primary) !important; /* Force le fond bleu */
    color: var(--white) !important;
    padding: 8px 20px !important;
    border-radius: 50px !important; /* Pilule */
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    border: 2px solid transparent !important;
    margin-left: 10px;
}

.header-auth-btn:hover {
    background-color: var(--secondary) !important; /* Rose au survol */
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* État connecté ("Bonjour") */
.header-auth-btn.connected {
    background-color: var(--white) !important;
    color: var(--primary) !important;
    border: 2px solid var(--primary) !important;
}

.header-auth-btn.connected:hover {
    background-color: var(--primary) !important;
    color: var(--white) !important;
}

/* =================================================== */
/* 8. STYLE SPECIFIQUE PAGE ASSISTANCE                 */
/* =================================================== */

/* Conteneur des 3 cartes */
.assistance-cards-container {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap; /* Passe à la ligne sur mobile */
    margin-bottom: 4rem;
}

/* Style d'une carte individuelle */
.support-card {
    background-color: var(--white);
    border-radius: var(--border-radius);
    padding: 2.5rem 2rem;
    width: 320px; /* Largeur fixe pour uniformité */
    text-align: center;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05); /* Ombre légère */
    border: 1px solid rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

/* Effet au survol de la carte */
.support-card:hover {
    transform: translateY(-5px); /* La carte monte un peu */
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

/* Carte mise en avant (Chat) */
.support-card.featured {
    border: 2px solid var(--secondary); /* Bordure rose */
    transform: scale(1.05); /* Un peu plus grosse */
}

.support-card.featured:hover {
    transform: scale(1.05) translateY(-5px);
}

/* Icônes */
.card-icon {
    font-size: 3rem;
    color: var(--primary);
    margin-bottom: 1.5rem;
}

.support-card h3 {
    color: var(--primary);
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

.support-card p {
    color: var(--text-color);
    font-size: 1rem;
    margin-bottom: 2rem;
    line-height: 1.5;
}

/* Boutons dans les cartes */
.btn-card {
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    font-size: 1rem;
    display: inline-block;
    width: 100%;
    transition: all 0.3s ease;
}

/* Bouton plein (Chat)
   Le blanc donnait 2,60:1 sur le rose et 2,34:1 sur l'orange. Le bleu
   foncé donne 6,34:1 et 7,03:1 sur ces deux mêmes fonds. */
.btn-fill {
    background-color: var(--secondary);
    color: var(--primary);
    border: none;
}

.btn-fill:hover {
    background-color: var(--tertiary); /* Devient orange au survol */
    color: var(--primary);
}

/* Bouton contour (Wiki / Ticket) */
.btn-outline {
    background-color: transparent;
    border: 2px solid var(--primary);
    color: var(--primary);
}

.btn-outline:hover {
    background-color: var(--primary);
    color: white;
}

/* Section Formulaire Tally en bas */
.tally-section {
    background-color: var(--white);
    padding: 3rem;
    border-radius: var(--border-radius);
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    text-align: center;
}

.tally-section h2 {
    color: var(--primary);
    margin-bottom: 0.5rem;
}

/* Ajustements Mobile */
@media (max-width: 768px) {
    .support-card {
        width: 100%; /* Prend toute la largeur sur mobile */
    }
    
    .support-card.featured {
        transform: scale(1); /* On enlève l'agrandissement sur mobile pour pas que ça déborde */
    }
    
    .tally-section {
        padding: 1.5rem; /* Moins de marge sur mobile */
    }
}

/* =================================================== */
/* 9. SECTION RESEAUX SOCIAUX (GRID)                   */
/* =================================================== */

.social-contact-section {
    text-align: center;
    margin: 4rem auto;
    padding: 0 5%;
    max-width: 1000px;
}

.social-contact-section h2 {
    font-size: 2rem;
    color: var(--primary);
    margin-bottom: 0.5rem;
}

.social-contact-section p {
    color: #666;
    margin-bottom: 2rem;
}

/* La Grille */
.social-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* S'adapte auto */
    gap: 20px;
}

/* Boutons Réseaux */
.social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px;
    border: 2px solid var(--primary); /* Bordure couleur thème */
    border-radius: 8px; /* Un peu carré comme ton ancien site */
    color: var(--primary);
    font-size: 1.1rem;
    font-weight: 600;
    transition: all 0.3s ease;
    text-decoration: none;
    position: relative;
    background-color: var(--white);
}

.social-btn i {
    font-size: 1.5rem;
}

/* Effet au survol des boutons classiques */
.social-btn:hover {
    background-color: var(--primary);
    color: var(--white);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(29, 4, 105, 0.2);
}

/* --- STYLE SPECIAL WHATSAPP (PRIORITAIRE) --- */
.whatsapp-priority {
    background-color: var(--primary); /* Fond plein direct */
    color: var(--white);
    border-color: var(--primary);
    grid-column: span 1; /* Prend 1 place (ou span 2 si tu veux qu'il soit large) */
    box-shadow: 0 4px 15px rgba(29, 4, 105, 0.3);
}

/* Au survol de WhatsApp (Devient vert ou rose Skynium ?) */
.whatsapp-priority:hover {
    background-color: #25D366; /* Vert WhatsApp officiel */
    border-color: #25D366;
    transform: scale(1.05); /* Grossit un peu plus */
}

/* Le petit badge "Recommandé" */
.whatsapp-priority .badge {
    position: absolute;
    top: -12px;
    right: -10px;
    background-color: var(--secondary); /* Rose Skynium */
    color: var(--primary); /* blanc sur ce rose = 2,60:1 */
    font-size: 0.7rem;
    padding: 4px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* Responsive Mobile */
@media (max-width: 768px) {
    .social-grid {
        grid-template-columns: 1fr; /* Une seule colonne sur mobile */
    }
    .whatsapp-priority {
        order: -1; /* Force WhatsApp à être TOUT en haut sur mobile */
        padding: 25px; /* Plus gros sur mobile */
    }
}

/* =================================================== */
/* 10. PAGES LÉGALES (Mentions, Politique)    */
/* =================================================== */

.legal-page h1 {
    text-align: center;
    margin-bottom: 3rem;
    border-bottom: 2px solid var(--secondary);
    padding-bottom: 1rem;
    display: inline-block;
}

.legal-page h2 {
    margin-top: 2.5rem;
    font-size: 1.5rem;
    color: var(--primary);
    border-left: 4px solid var(--secondary);
    padding-left: 1rem;
}

.legal-page p, .legal-page ul {
    margin-bottom: 1rem;
    color: #444;
    /* Plus de « justify » : il creuse des rivières de blanc irrégulières
       entre les mots, ce qui gêne particulièrement les lecteurs
       dyslexiques (WCAG 1.4.8). Alignement à gauche, espacement régulier. */
    text-align: left;
}

.legal-page ul {
    list-style: disc;
    padding-left: 2rem;
}

/* =================================================== */
/* AJOUTS ACCESSIBILITÉ - À INTÉGRER DANS style.css   */
/* =================================================== */

/* 1. CLASSE SR-ONLY (Screen Reader Only) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Visible au focus (pour liens d'évitement) */
.sr-only:focus {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* 2. LIEN D'ÉVITEMENT "Aller au contenu principal" */
.skip-link {
    position: absolute;
    top: -100px;
    left: 10px;
    z-index: 9999;
    padding: 12px 20px;
    background-color: var(--primary);
    color: var(--white);
    font-weight: 700;
    border-radius: var(--border-radius);
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    transition: top 0.3s ease;
}

.skip-link:focus {
    top: 10px; /* Apparaît en haut à gauche au focus */
}

/* 3. FOCUS VISIBLE RENFORCÉ (ne jamais supprimer outline)
   L'orange seul ne faisait que 2,34:1 sur fond clair : l'indicateur de
   focus lui-même doit atteindre 3:1 (WCAG 1.4.11 / 2.4.11). Double
   anneau : un trait foncé + un halo rose. Sur un fond clair c'est le
   trait foncé qui se voit, sur un fond sombre c'est le halo — il y a
   donc toujours au moins un des deux de lisible, quel que soit le fond. */
*:focus {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 6px rgba(250, 93, 255, 0.9);
}

/* Le footer est bleu foncé : on y inverse les deux anneaux. */
footer *:focus {
    outline-color: var(--secondary);
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.9);
}

/* 4. CORRECTIONS DE CONTRASTE
   Il y avait ici un second bloc « :root » qui redéclarait toute la
   palette. Comme il venait après le premier, c'est lui qui gagnait : la
   règle « a { color: var(--secondary-dark) } » qu'il posait juste en
   dessous écrasait la couleur de lien définie en haut du fichier. Un seul
   :root désormais, tout est déclaré au début. */

/* 5. BOUTON ACCESSIBILITÉ FIXE (en bas à gauche) */
#accessibility-button {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 10000;
    width: 60px;
    height: 60px;
    background-color: var(--primary);
    color: var(--white);
    border: none;
    border-radius: 50%;
    font-size: 1.8rem;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

#accessibility-button:hover,
#accessibility-button:focus {
    background-color: var(--secondary);
    transform: scale(1.1);
}

/* 6. PANNEAU D'ACCESSIBILITÉ (à droite, caché par défaut) */
/* Ferme, le panneau glisse hors champ par translation et devient
   « visibility: hidden ». Le decalage par « right: -400px » le laissait
   deborder de la page (scroll horizontal) et, surtout, le laissait
   focusable au clavier et lu par les lecteurs d'ecran alors qu'il etait
   invisible. */
#accessibility-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: min(400px, 100vw);
    height: 100vh;
    background-color: var(--white);
    box-shadow: -5px 0 20px rgba(0,0,0,0.3);
    z-index: 10001;
    overflow-y: auto;
    padding: 20px;
    transform: translateX(100%);
    visibility: hidden;
    pointer-events: none;
    transition: transform .4s ease, visibility 0s linear .4s;
}

#accessibility-panel.open {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
    transition: transform .4s ease, visibility 0s linear 0s;
}

/* Bouton fermer le panneau */
#accessibility-panel .close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    color: var(--text-color);
}

/* Titre du panneau */
#accessibility-panel h2 {
    color: var(--primary);
    margin-bottom: 1.5rem;
    border-bottom: 2px solid var(--secondary);
    padding-bottom: 0.5rem;
}

/* Sections du panneau */
.accessibility-section {
    margin-bottom: 2rem;
}

.accessibility-section h3 {
    font-size: 1.1rem;
    color: var(--secondary-dark);
    margin-bottom: 1rem;
    font-weight: 600;
}

/* Boutons d'options */
.accessibility-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    margin-bottom: 10px;
    background-color: var(--bg-color);
    border-radius: var(--border-radius);
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.3s ease;
}

.accessibility-option:hover,
.accessibility-option:focus {
    border-color: var(--secondary);
    background-color: #f0f0f0;
}

.accessibility-option.active {
    border-color: var(--tertiary);
    background-color: #fff4e6;
}

/* Toggle switch */
.toggle-switch {
    position: relative;
    width: 50px;
    height: 24px;
    background-color: #8a8a8a;
    border-radius: 20px;
    transition: background-color 0.3s;
}

.toggle-switch.active {
    background-color: var(--secondary);
}

.toggle-switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background-color: white;
    border-radius: 50%;
    transition: transform 0.3s;
}

.toggle-switch.active::after {
    transform: translateX(26px);
}

/* Sliders (pour taille texte, espacement, etc.) */
.slider-container {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.slider-container input[type="range"] {
    flex: 1;
    height: 8px;
    border-radius: 5px;
    background: linear-gradient(to right, var(--secondary) 0%, var(--tertiary) 100%);
    outline: none;
}

.slider-container input[type="range"]::-webkit-slider-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--primary);
    cursor: pointer;
}

.slider-container span {
    min-width: 40px;
    text-align: center;
    font-weight: 600;
    color: var(--primary);
}

/* 7. CLASSES MODES ACCESSIBILITÉ (appliquées au <body>) */

/* Mode Malvoyant (contraste élevé) */
body.high-contrast {
    --primary: #000000;
    --secondary-texte: #8E007A;  /* 8,6:1 sur blanc */
    --tertiary-texte:  #8A4100;  /* 8,1:1 sur blanc */
    --secondary-dark: #8E007A;
    --tertiary-dark: #8A4100;
    --bg-color: #FFFFFF;
    --text-color: #000000;
}

body.high-contrast a,
body.high-contrast button {
    text-decoration: underline;
    font-weight: 700;
}

/* Mode Sombre.
   Attention au piège : « --white » est ici détourné pour servir de fond
   de carte sombre, alors qu'ailleurs dans la feuille il sert aussi de
   COULEUR DE TEXTE (nom du groupe dans le pied de page, libellé du bouton
   d'accessibilité…). En mode sombre ces textes devenaient donc gris très
   foncé sur fond très foncé — environ 1,4:1, illisible. On introduit un
   jeton distinct pour le texte clair, et on le fixe pour les cas
   concernés. */
body.dark-mode {
    --bg-color: #1a1a1a;
    --text-color: #FFFFFF;
    --white: #2a2a2a;
    --on-dark: #FFFFFF;
}

body.dark-mode header,
body.dark-mode footer {
    background-color: #0a0a0a;
}

body.dark-mode .footer-brand .brand-name,
body.dark-mode #accessibility-button,
body.dark-mode footer h3 {
    color: var(--on-dark);
}

/* Mode Cécité (optimisé lecteur d'écran)
   Le script pose « screen-reader » sur <body> ; seule « screen-reader-mode »
   était stylée ici, la règle ne s'appliquait donc jamais. Les deux sont
   prises en charge, comme dans a11y.js. */
body.screen-reader *:focus,
body.screen-reader-mode *:focus {
    outline: 5px solid yellow !important;
    outline-offset: 3px;
}

/* Police Dyslexie */
/* =================================================== */
/* 1. IMPORTATION DE LA POLICE LOCALE                  */
/* =================================================== */
@font-face {
    font-family: 'OpenDyslexic';
    src: url('/ressources/fonts/OpenDyslexic-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap; 
}

/* =================================================== */
/* 2. APPLICATION DE LA POLICE (Ton code actuel)       */
/* =================================================== */
/* Police Dyslexie (OpenDyslexic en local) */
body.dyslexia-font {
    font-family: 'OpenDyslexic', 'Comic Sans MS', sans-serif;
}

/* Titres en surbrillance */
body.highlight-headings h1,
body.highlight-headings h2,
body.highlight-headings h3 {
    background-color: yellow;
    padding: 5px;
    color: #000;
}

/* Liens en surbrillance (Priorité absolue) */
body.highlight-links a {
    background-color: #FFFF99 !important; /* Force le jaune par dessus le footer */
    color: #000000 !important; /* Force le texte noir pour le contraste */
    text-decoration: underline !important;
    padding: 0 5px !important;
    box-shadow: none !important; /* Enlève les ombres potentielles */
}

/* Grand curseur */
body.big-cursor-dark,
body.big-cursor-light {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><circle cx="20" cy="20" r="18" fill="black" stroke="white" stroke-width="2"/></svg>') 20 20, auto;
}

body.big-cursor-light {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><circle cx="20" cy="20" r="18" fill="white" stroke="black" stroke-width="2"/></svg>') 20 20, auto;
}

/* 8. RESPONSIVE (mobile) */
@media (max-width: 768px) {
    #accessibility-panel {
        width: 100%;
        right: -100%;
    }
    
    #accessibility-button {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
        bottom: 15px;
        left: 15px;
    }
}

/* =================================================== */
/* MODES D'ACCESSIBILITÉ - EFFETS VISUELS             */
/* =================================================== */

/* Les filtres de couleur passent par une surcouche, jamais par
   « filter » sur body.
   Un « filter » autre que « none » fait de l'élément un bloc conteneur
   pour ses descendants en position: fixed. Poser un filtre sur body
   décrochait donc TOUS les éléments fixes du site : le bouton
   d'accessibilité se figeait en bas de page au lieu de rester en bas de
   l'écran, et les en-têtes collants tombaient avec lui. Une surcouche
   fixe en « backdrop-filter » teinte ce qui est peint derrière elle sans
   rien décrocher.
   Le bouton (10000) et le panneau (10001) passent au-dessus : ils
   restent lisibles, ce qui est le but — un panneau filtré au point
   d'être illisible priverait l'utilisateur du moyen de faire marche
   arrière. */
#skynium-a11y-filter {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9998;
    display: none;
    backdrop-filter: var(--sky-a11y-filter, none);
    -webkit-backdrop-filter: var(--sky-a11y-filter, none);
}

body.monochrome #skynium-a11y-filter,
body.high-saturation #skynium-a11y-filter,
body.low-saturation #skynium-a11y-filter,
body.epilepsy-safe #skynium-a11y-filter,
body.visually-impaired #skynium-a11y-filter,
body.adhd-friendly #skynium-a11y-filter { display: block; }

/* Mode Monochrome (noir et blanc) */
body.monochrome {
    --sky-a11y-filter: grayscale(100%);
}

/* Haute saturation (couleurs vives) */
body.high-saturation {
    --sky-a11y-filter: saturate(200%);
}

/* Faible saturation (couleurs atténuées) */
body.low-saturation {
    --sky-a11y-filter: saturate(50%);
}

/* Mode épilepsie (atténue les couleurs) */
body.epilepsy-safe {
    --sky-a11y-filter: brightness(0.9) contrast(0.9);
    animation: none !important; /* Supprime toutes les animations */
}

body.epilepsy-safe * {
    animation: none !important;
    transition: none !important;
}

/* Mode malvoyant (renforce visuellement) */
body.visually-impaired {
    --sky-a11y-filter: contrast(1.2) brightness(1.1);
}

body.visually-impaired * {
    font-weight: 500 !important; /* Texte plus gras */
}

/* Mode TDAH (réduit les distractions) */
body.adhd-friendly {
    --sky-a11y-filter: saturate(80%);
}

body.adhd-friendly img,
body.adhd-friendly video {
    opacity: 0.7; /* Atténue les médias */
}

/* Mode handicap cognitif (simplifie) */
body.cognitive-disability * {
    font-family: Arial, sans-serif !important; /* Police simple */
    line-height: 1.8 !important;
}

/* Surbrillance du curseur */
body.highlight-cursor {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><circle cx="20" cy="20" r="18" fill="none" stroke="yellow" stroke-width="4"/></svg>') 20 20, auto;
}

/* Section "Modes actifs" dans le panneau */
.accessibility-status {
    background-color: rgba(29, 4, 105, 0.1); /* Fond bleu très léger */
    border-left: 4px solid var(--secondary);
    padding: 12px 15px;
    margin-bottom: 20px;
    border-radius: 6px;
}

.accessibility-status p {
    margin: 0;
    font-size: 0.95rem;
    color: var(--text-color);
}

.accessibility-status strong {
    color: var(--primary);
}

#active-modes-count {
    color: var(--secondary-dark);
    font-weight: bold;
}

/* =================================================== */
/* 10. PAGE TÉMOIGNAGES                                */
/* =================================================== */

.testimonials-hero {
    text-align: center;
    padding: 3rem 1rem;
    margin-bottom: 2rem;
    background-color: var(--white);
    border-radius: var(--border-radius);
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.testimonials-hero h1 {
    color: var(--primary);
    margin-bottom: 1rem;
}

.testimonials-hero p {
    color: #666;
    margin-bottom: 2rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Grille des avis */
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
    padding-bottom: 4rem;
}

/* Carte individuelle */
.testimonial-card {
    background: var(--white);
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: transform var(--transition-speed) ease;
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
}

.testimonial-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    border-color: var(--secondary);
}

/* En-tête de la carte */
.testimonial-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.testimonial-header img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--bg-color);
}

.testimonial-info h3 {
    font-size: 1.1rem;
    color: var(--primary);
    margin: 0 0 0.2rem 0;
}

.testimonial-info .role {
    display: block;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

/* --- BADGES DE SERVICES (NOUVEAU) --- */
.service-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.service-badge {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Couleurs spécifiques aux marques */
.service-badge.skynium {
    background-color: rgba(29, 4, 105, 0.1); /* Bleu clair */
    color: var(--primary);
    border: 1px solid var(--primary);
}

.service-badge.ats {
    background-color: rgba(255, 138, 63, 0.1); /* Orange clair */
    color: var(--tertiary-texte); /* l'orange vif tombait à 2,3:1 */
    border: 1px solid var(--tertiary);
}

/* Étoiles, texte et date.
   Le jaune #FFC107 tombait à 1,6:1 sur blanc — la note n'était pas lisible.
   Ambre foncé, 5,2:1, qui reste une étoile dorée à l'œil. */
.stars {
    color: #946200;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.testimonial-text {
    font-style: italic;
    color: #444;
    line-height: 1.6;
    flex-grow: 1;
}

.testimonial-date {
    display: block;
    margin-top: 1rem;
    font-size: 0.8rem;
    color: #666;
    text-align: right;
}

/* =================================================== */
/* Formulaires maison (assistance, avis) — remplacent Tally, 8 octobre 2026 */
/* =================================================== */
.fp-section { max-width: 760px; margin-left: auto; margin-right: auto; }
.fp { text-align: left; margin-top: 1.5rem; }
.fp label { display: block; font-weight: 600; margin: 1rem 0 .35rem; color: var(--primary); }
.fp input[type=text], .fp input[type=tel], .fp input[type=email], .fp textarea {
    width: 100%; box-sizing: border-box; padding: .8rem .9rem; font: inherit; font-size: 1.05rem;
    border: 1.5px solid #cfcadf; border-radius: 10px; background: #fff; color: #222; }
.fp input:focus, .fp textarea:focus { outline: 3px solid var(--secondary); outline-offset: 1px; border-color: var(--primary); }
.fp-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.fp-plein { grid-column: 1 / -1; }
@media (max-width: 640px) { .fp-grille { grid-template-columns: 1fr; } }
.fp-aide { color: #555; font-size: .92rem; margin: .35rem 0 0; }
.fp-facultatif { font-weight: 400; color: #666; }
.fp-piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.fp-bouton { margin-top: 1.2rem; border: none; border-radius: 999px; padding: .95rem 1.8rem; background: var(--primary);
    color: #fff; font: inherit; font-size: 1.05rem; font-weight: 700; cursor: pointer; }
.fp-bouton:hover { filter: brightness(1.2); }
.fp-bouton:focus-visible { outline: 3px solid var(--secondary); outline-offset: 2px; }
.fp-bouton:disabled { opacity: .55; cursor: wait; }
.fp-etat:focus { outline: none; }
.fp-message { border-radius: 10px; padding: .9rem 1rem; margin-top: 1rem; font-weight: 600; }
.fp-message.ok { background: #dcfce7; color: #14532d; }
.fp-message.erreur { background: #fef2f2; color: #991b1b; }
.fp-case { display: flex !important; gap: .6rem; align-items: flex-start; font-weight: 400 !important; color: #333 !important; }
.fp-case input { width: 1.3rem; height: 1.3rem; flex: 0 0 auto; margin-top: .15rem; }
.fp-etoiles { border: none; padding: 0; margin: 1rem 0 0; }
.fp-etoiles legend { font-weight: 600; color: var(--primary); padding: 0; margin-bottom: .2rem; }
.fp-etoiles-ligne { display: inline-flex; gap: .15rem; }
.fp-etoiles-ligne input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fp-etoiles-ligne label { margin: 0; font-size: 2.2rem; line-height: 1; color: #c9c4d6; cursor: pointer; padding: .1rem; }
.fp-etoiles-ligne label.allume { color: #f5a623; }
.fp-etoiles-ligne input:focus-visible + label { outline: 3px solid var(--secondary); border-radius: 6px; }
.fp-lecteur { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }