/**
 * formation.css — Styles dédiés au sous-site formation.3677.fr
 *
 * Fichier propre, séparé de learnpress.css.
 * On y migre progressivement les blocs UX/contenu pédagogique
 * (bannières persona, accordéons, warnings, etc.).
 *
 * Design system : voir docs/design-system-3677.md
 *   Primary #D41116 | Secondary #6A0927 | Crème #F8F4F5 | Font Montserrat
 */

/* ═══════════════════════════════════════════════════════════════
   PERSONA BANNER — encart « rencontre avec un personnage »
   Markup type (à coller dans une leçon LP) :

   <div class="persona-banner persona-maiwenn">
       <div class="persona-banner__avatar"></div>
       <div class="persona-banner__body">
           <div class="persona-banner__name">Maïwenn</div>
           <div class="persona-banner__location">À la Mairie</div>
           <blockquote class="persona-banner__quote">
               Rencontre Maïwenn à la Mairie. Elle répondra aux questions…
           </blockquote>
       </div>
   </div>

   On ajoute un persona en créant une règle .persona-{prenom} qui ne
   définit QUE l'image de l'avatar (background-image). Le reste est commun.
   ═══════════════════════════════════════════════════════════════ */

.persona-banner {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 24px;
    margin: 24px 0;
    background: linear-gradient(135deg, #F8F4F5 0%, #FFFFFF 100%);
    border-left: 6px solid #6A0927;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    font-family: 'Montserrat', sans-serif;
}

.persona-banner__avatar {
    flex: 0 0 96px;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background-color: #EDEDED;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    box-shadow: 0 4px 14px rgba(106, 9, 39, 0.18);
}

.persona-banner__body {
    flex: 1;
    min-width: 0;
}

.persona-banner__name {
    font-size: 18px;
    font-weight: 800;
    text-transform: uppercase;
    color: #6A0927;
    letter-spacing: 0.5px;
    line-height: 1.2;
}

.persona-banner__location {
    font-size: 13px;
    color: #7C7C7C;
    font-style: italic;
    margin: 2px 0 8px;
}

.persona-banner__quote {
    margin: 0;
    padding: 0;
    border: none;
    font-size: 14.5px;
    line-height: 1.55;
    color: #000000;
    font-style: normal;
    quotes: "« " " »";
}
.persona-banner__quote::before {
    content: open-quote;
    color: #D41116;
    font-weight: 900;
    margin-right: 2px;
}
.persona-banner__quote::after {
    content: close-quote;
    color: #D41116;
    font-weight: 900;
    margin-left: 2px;
}

@media (max-width: 600px) {
    .persona-banner {
        flex-direction: column;
        text-align: center;
        gap: 12px;
        padding: 18px;
    }
    .persona-banner__avatar { flex: 0 0 80px; width: 80px; height: 80px; }
    .persona-banner__name   { font-size: 16px; }
}

/* ─── Personas (1 règle par personnage = juste l'image) ───
   Convention de nommage médiathèque WP :
   .../uploads/sites/2/AAAA/MM/3677-SOS-Maltraitance-Animale-Plateforme-Formation-Enqueteurs-avatars-{Prenom}.png
*/
.persona-maiwenn   .persona-banner__avatar { background-image: url('/wp-content/uploads/sites/2/2026/05/3677-SOS-Maltraitance-Animale-Plateforme-Formation-Enqueteurs-avatars-Maiwenn.png'); }
.persona-max       .persona-banner__avatar { background-image: url('/wp-content/uploads/sites/2/2026/05/3677-SOS-Maltraitance-Animale-Plateforme-Formation-Enqueteurs-avatars-Max.png'); }
.persona-camille   .persona-banner__avatar { background-image: url('/wp-content/uploads/sites/2/2026/05/3677-SOS-Maltraitance-Animale-Plateforme-Formation-Enqueteurs-avatars-Camille.png'); }
.persona-esperanza .persona-banner__avatar { background-image: url('/wp-content/uploads/sites/2/2026/05/3677-SOS-Maltraitance-Animale-Plateforme-Formation-Enqueteurs-avatars-Esperanza.png'); }
.persona-rachel    .persona-banner__avatar { background-image: url('/wp-content/uploads/sites/2/2026/05/3677-SOS-Maltraitance-Animale-Plateforme-Formation-Enqueteurs-avatars-Rachel.png'); }
.persona-christophe .persona-banner__avatar { background-image: url('/wp-content/uploads/sites/2/2026/05/3677-SOS-Maltraitance-Animale-Plateforme-Formation-Enqueteurs-avatars-Christophe.png'); }
.persona-justin    .persona-banner__avatar { background-image: url('/wp-content/uploads/sites/2/2026/05/3677-SOS-Maltraitance-Animale-Plateforme-Formation-Enqueteurs-avatars-Justin.png'); }
.persona-cluesko   .persona-banner__avatar { background-image: url('/wp-content/uploads/sites/2/2026/05/3677-SOS-Maltraitance-Animale-Plateforme-Formation-Enqueteurs-avatars-Detective-CluesKo.png'); }
.persona-loic      .persona-banner__avatar { background-image: url('/wp-content/uploads/sites/2/2026/05/3677-SOS-Maltraitance-Animale-Plateforme-Formation-Enqueteurs-avatars-Loic-Dombreval.png'); }

/* ═══════════════════════════════════════════════════════════════
   HOMEPAGE — Désactiver underline au hover des liens
   ═══════════════════════════════════════════════════════════════
   Override de la règle globale Site Kit Elementor `.elementor-kit-25 a:hover`
   (post-25.css) qui force `text-decoration: underline` sur tous les liens.
   Scope : uniquement body.home (page-id-364), pour ne pas affecter le footer
   (qui a sa propre règle d'underline intentionnel pour le contraste sur fond noir). */
body.home a:hover,
body.home a:focus {
    text-decoration: none !important;
}