/*
Theme Name: Saint-Dizier Basket
Theme URI: https://saint-dizier-basket.fr
Author: Saint-Dizier Basket
Description: Thème WordPress sur-mesure pour le club amateur de Saint-Dizier Basket, adapté d'une maquette statique HTML/CSS/JS.
Version: 1.0.0
Text Domain: saint-dizier-basket

Ce fichier est déployé automatiquement depuis GitHub (branche master) par la
tâche cron ~/deploy-o2switch.sh. Le modifier directement sur le serveur, par
le gestionnaire de fichiers de cPanel par exemple, ne tient pas : la synchro
suivante l'écrase dans les cinq minutes, sans prévenir. Passer par le dépôt.
*/

/* --- Variables et Reset de base --- */
:root {
    --primary-red: #d6001c;
    /* Le rouge exact de ton image */
    --white: #ffffff;
    --black: #000000;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 100%;
    /* Base par défaut du navigateur (16px) */
}

body {
    font-family: "Nunito", sans-serif;
    font-weight: 400;
    line-height: 1.6;
    color: #333;
    overflow-x: hidden;
}

/* Police "display" arrondie : titres, header, nav, scores */
.section-title,
.matches-carousel-title,
.carousel-category-label,
.match-card-score,
.nav-links li a,
.read-more-link,
.news-card-title,
.matches-empty {
    font-family: "Fredoka", sans-serif;
}

.container {
    max-width: 1200px;
    /* On conserve max-width en px pour limiter la taille sur très grands écrans */
    margin: 0 auto;
    padding: 0 1.25rem;
    /* Utilisation des rem (équivaut à 20px) */
}

/* --- Style du Header --- */
.main-header {
    background-color: var(--primary-red);
    color: var(--white);
    padding: 0;
    /* Suppression du padding vertical pour laisser le logo prendre toute la place */
    position: fixed;
    /* Reste en haut au scroll */
    width: 100%;
    top: 0;
    z-index: 1000;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 100%;
    padding: 0 2%;
    /* Padding en % pour une bonne réactivité sur les bords */
}

/* Flexbox : Répartition en 3 colonnes pour garantir le centrage parfait du menu */
.logo-container {
    flex: 1;
    display: flex;
    justify-content: flex-start;
}

.main-nav {
    flex: 2;
    /* Le menu prend plus de place pour être centré */
    display: flex;
    justify-content: center;
}

/* --- Logo --- */
.site-logo {
    max-height: 6.25rem;
    /* Augmentation à ~100px. Le header garde la même taille car on a retiré son padding */
    display: block;
}

/* --- Navigation Desktop (PC) --- */
.nav-links {
    list-style: none;
    display: flex;
    gap: 3rem;
    /* Espacement augmenté entre les catégories */
    align-items: center;
}

.nav-links li a {
    text-decoration: none;
    color: var(--white);
    font-weight: 500;
    text-transform: uppercase;
    font-size: 1.25rem;
    /* Taille augmentée sur PC (environ 20px) */
    white-space: nowrap;
    /* Empêche le texte de passer à la ligne ("LE" puis "CLUB") */
    transition: color 0.3s ease;
}

.nav-links li a:hover {
    color: #8d0000;
    /* Jaune doré au survol pour le contraste */
}

/* --- Réseaux Sociaux (PC) --- */
.social-links {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    /* Colle à droite */
    gap: 1.25rem;
    /* 20px -> 1.25rem */
}

.social-links a {
    color: var(--white);
    font-size: 1.5rem;
    /* 24px -> 1.5rem */
    text-decoration: none;
    transition: transform 0.2s ease;
}

.social-links a:hover {
    transform: scale(1.1);
    /* Petit effet de zoom au survol */
}

/* Réseaux sociaux dans le menu mobile (cachés sur PC) */
.mobile-socials {
    display: none;
}

/* --- Bouton Hamburger (caché sur PC) --- */
.menu-toggle {
    display: none;
    /* Invisible par défaut */
    background: none;
    border: none;
    cursor: pointer;
    width: 30px;
    /* Conserve les pixels pour le dessin précis du bouton */
    height: 25px;
    position: relative;
}

.menu-toggle span {
    display: block;
    width: 100%;
    height: 3px;
    background-color: var(--white);
    border-radius: 3px;
    position: absolute;
    transition: all 0.3s ease-in-out;
}

.menu-toggle span:nth-child(1) {
    top: 0;
}

.menu-toggle span:nth-child(2) {
    top: 11px;
}

.menu-toggle span:nth-child(3) {
    top: 22px;
}

/* Animation du bouton Hamburger en 'X' quand actif */
.menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg);
    top: 11px;
}

.menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg);
    top: 11px;
}

/* --- Structure Principale --- */
.main-content {
    margin-top: 6.25rem;
    /* Espace pour le header fixe (100px -> 6.25rem) */
    padding-bottom: 2.5rem;
}

/* Défilement animé vers les ancres, plutôt qu'un saut sec. */
html {
    scroll-behavior: smooth;
}

/* L'en-tête est fixe : sans cette marge, la cible d'une ancre se
   retrouverait cachée derrière lui. */
[id] {
    scroll-margin-top: 7.5rem;
}

/* Apparition en fondu des blocs au défilement.
   La classe js-fondu est posée sur <html> par scroll.js : sans JavaScript,
   ces règles ne s'appliquent jamais et tout reste visible. */
.js-fondu .fondu {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    /* Prévient le navigateur du changement à venir : il prépare la couche
       graphique et l'animation reste fluide sur mobile. */
    will-change: opacity, transform;
}

.js-fondu .fondu-visible {
    opacity: 1;
    transform: none;
    will-change: auto;
}

/* Les cartes du bureau se révèlent l'une après l'autre plutôt qu'en bloc :
   le décalage est court, juste de quoi donner du rythme. */
.js-fondu .bureau-card:nth-child(2) {
    transition-delay: 0.08s;
}

.js-fondu .bureau-card:nth-child(3) {
    transition-delay: 0.16s;
}

/* Certains visiteurs souffrent de troubles vestibulaires, pour qui une
   animation de défilement provoque un vrai malaise. Le système permet de
   le signaler : on respecte ce réglage. */
@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    /* Filet de sécurité : si la classe js-fondu a été posée avant que le
       réglage ne soit pris en compte, les blocs restent visibles. */
    .js-fondu .fondu {
        opacity: 1;
        transform: none;
    }
}

/* --- Sections de Page --- */
.page-section {
    padding: 4rem 0;
    text-align: center;
    /* Centrage du texte demandé */
}

.section-title {
    font-size: 2rem;
    color: var(--primary-red);
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    font-weight: 600;
}

.section-text-wrapper {
    max-width: 800px;
    margin: 0 auto 3rem auto;
    /* Centré horizontalement avec une largeur max */
}

.section-description {
    font-size: 1.15rem;
    line-height: 1.8;
    color: #444;
}

/* --- Galerie d'archives (Emplacements photos) --- */
.section-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.gallery-item {
    background-color: #f9f9f9;
    border-radius: 8px;
    height: 250px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #aaa;
    border: 2px dashed #ddd;
    transition: transform 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    cursor: pointer;
}

.gallery-item:hover {
    transform: translateY(-5px);
    border-color: var(--primary-red);
    color: var(--primary-red);
}

.gallery-item>i {
    font-size: 3rem;
    margin-bottom: 1rem;
}

/* --- Page Partenaires --- */

/* Les logos arrivent dans des formats très inégaux : bandeau très large pour
   l'Agence nationale du Sport (1040x363), carrés pleins pour la Ville et
   McDonald's, vectoriel pour la Haute-Marne. Plutôt que de les redimensionner
   un par un, chaque tuile impose une hauteur fixe et « contain » fait rentrer
   le logo dedans sans jamais le déformer ni le rogner. */
/* L'écart ne vaut qu'ENTRE les deux blocs. Sur le premier il s'ajouterait à la
   marge basse de .section-text-wrapper, soit 6rem de blanc sous le titre de la
   page — visible maintenant que les sous-titres ont été retirés. */
.partner-group + .partner-group {
    margin-top: 3rem;
}

/* Une largeur maximale sur les colonnes, plutôt que 1fr : sans elle, le groupe
   de trois logos étirerait ses tuiles sur toute la largeur alors que celui de
   cinq garderait des tuiles étroites, et les deux blocs n'auraient plus rien à
   voir l'un avec l'autre. justify-content centre le reliquat. */
.partner-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 210px));
    justify-content: center;
    gap: 1.5rem;
}

.partner-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    background-color: var(--white);
    border: 1px solid #ececec;
    border-radius: 12px;
    padding: 1.5rem 1.25rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.partner-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.07);
}

/* Les logos les plus denses sont des bandeaux chargés de texte (AXA, FDVA) :
   c'est la largeur de la tuile qui les rend lisibles, pas une limite plus
   étroite. La tuile étant déjà bornée à 230px, laisser le logo l'occuper
   entièrement suffit à le contenir. */
/* Toutes les tuiles réservent la MÊME hauteur à leur logo, agrandi ou non.
   Sans cela la légende des deux logos agrandis descend de 35px et les noms
   partent en escalier d'une tuile à l'autre.

   Le remplissage vertical ramène la zone utile à 95px : comme la boîte est en
   box-sizing: border-box (reset global), object-fit travaille dans la boîte de
   contenu, et le logo garde exactement la taille qu'il avait. Les logos
   agrandis, eux, remettent ce remplissage à zéro et occupent les 130px. */
.partner-logo {
    width: 100%;
    max-width: 100%;
    height: 130px;
    padding: 17.5px 0;
    object-fit: contain;
}

/* Carrefour et le FDVA portent une large marge blanche à même le fichier
   source : à hauteur de boîte égale, leur marque paraît deux fois plus petite
   que celle des voisins. Plutôt que de retoucher les images, on leur donne une
   boîte plus haute et toute la largeur de la tuile, marges intérieures
   comprises — d'où la largeur négative, qui reprend exactement le padding de
   .partner-item.

   Les deux contraintes sont nécessaires : le logo Carrefour (4:3) est bridé par
   la hauteur, celui du FDVA (2:1) par la largeur. Ne jouer que sur l'une des
   deux n'aurait agrandi qu'un seul des deux logos. */
.partner-logo-large {
    padding: 0;
    width: calc(100% + 2.5rem);
    max-width: none;
    margin-inline: -1.25rem;
}

.partner-name {
    font-size: 0.9rem;
    line-height: 1.35;
    color: #555;
    text-align: center;
}

/* Sous 600px la grille tombe à une colonne : une tuile pleine largeur pour un
   logo de 90px de haut est disgracieuse, on passe à deux colonnes serrées. */
@media (max-width: 600px) {
    .partner-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .partner-item {
        padding: 1rem 0.75rem;
    }

    .partner-logo {
        height: 85px;
        padding: 10px 0;
    }

    .partner-logo-large {
        padding: 0;
        width: calc(100% + 1.5rem);
        margin-inline: -0.75rem;
    }

    .partner-name {
        font-size: 0.8rem;
    }
}

/* --- Page de Contact --- */
.contact-page-card {
    width: fit-content;
    /* S'ajuste à la largeur du contenu pour le centrer parfaitement */
    margin: 0 auto;
    background-color: var(--white);
    padding: 3rem 4rem;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.contact-card-content p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    color: #444;
    text-align: left;
}

.contact-card-content p:last-child {
    margin-bottom: 0;
}

.contact-card-content p i {
    color: var(--primary-red);
    font-size: 2rem;
    width: 40px;
    text-align: center;
}

/* Même raison que pour le footer : le téléphone est un lien tel:. */
.contact-card-content a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s;
}

.contact-card-content a:hover {
    color: var(--primary-red);
}

/* Formulaire à gauche, coordonnées à droite */
.contact-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 2.5rem;
    align-items: start;
}

.contact-layout .contact-page-card {
    width: auto;
    /* En grille, la carte suit sa colonne : fit-content la décentrerait */
    margin: 0;
    padding: 2.5rem;
}

.contact-form-card {
    background-color: var(--white);
    padding: 2.5rem;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.contact-form-title {
    font-family: 'Fredoka', sans-serif;
    font-size: 1.6rem;
    color: var(--black);
    margin-bottom: 1.75rem;
}

.contact-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

.contact-form .form-field {
    margin-bottom: 1.25rem;
    text-align: left;
}

.contact-form label {
    display: block;
    font-weight: 700;
    font-size: 0.95rem;
    color: #333;
    margin-bottom: 0.5rem;
}

.contact-form .required {
    color: var(--primary-red);
}

.contact-form input,
.contact-form select,
.contact-form textarea {
    width: 100%;
    padding: 0.85rem 1rem;
    font-family: 'Nunito', sans-serif;
    font-size: 1rem;
    color: #222;
    background-color: #fafafa;
    border: 2px solid #e4e4e4;
    border-radius: 8px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.contact-form textarea {
    resize: vertical;
    min-height: 150px;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--primary-red);
    box-shadow: 0 0 0 3px rgba(214, 0, 28, 0.12);
}

.contact-form .form-note {
    font-size: 0.85rem;
    color: #777;
    text-align: left;
    margin-bottom: 1.5rem;
}

.form-submit {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.9rem 2rem;
    font-family: 'Fredoka', sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--white);
    background-color: var(--primary-red);
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.form-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(214, 0, 28, 0.3);
}

/* Pot de miel : masqué pour les humains, rempli par les robots.
   display:none est évité, certains robots ignorent les champs non rendus. */
.form-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1rem 1.25rem;
    border-radius: 8px;
    margin-bottom: 1.75rem;
    text-align: left;
    font-size: 0.95rem;
}

.form-alert i {
    font-size: 1.25rem;
    line-height: 1.4;
}

.form-alert p {
    margin: 0;
}

.form-alert p+p {
    margin-top: 0.35rem;
}

.form-alert-success {
    color: #17683a;
    background-color: #e8f6ee;
    border-left: 4px solid #1e9e57;
}

.form-alert-error {
    color: #8c0012;
    background-color: #fdecee;
    border-left: 4px solid var(--primary-red);
}

@media (max-width: 900px) {
    .contact-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {

    .contact-form-card,
    .contact-layout .contact-page-card {
        padding: 1.75rem 1.35rem;
    }

    .contact-form .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .form-submit {
        width: 100%;
        justify-content: center;
    }
}

/* =========================================
   === SECTION ACCUEIL (HERO)             ===
   ========================================= */

.hero {
    position: relative;
    display: flex;
    background: var(--primary-red);
    overflow: hidden;
}

/* Bandeau rouge pleine largeur.
   La photo de fond a été retirée : le panneau incliné n'avait plus lieu
   d'être, la diagonale n'étant lisible que par contraste avec l'image. */
.hero-panel {
    position: relative;
    width: 100%;
    background: var(--primary-red);
    color: #fff;
    display: flex;
    align-items: center;
}

.hero-panel-inner {
    /* Mêmes marges que .container : le titre s'aligne verticalement avec
       le contenu des sections situées en dessous. */
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 4.5rem 1.25rem;
}

.hero-title {
    font-family: "Fredoka", sans-serif;
    font-size: 2.8rem;
    font-weight: 600;
    color: #fff;
    line-height: 1.1;
    margin-bottom: 1rem;
}

.hero-text {
    font-size: 1.1rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.7;
    margin-bottom: 1.75rem;
    max-width: 460px;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.6rem;
    border-radius: 999px;
    font-family: "Fredoka", sans-serif;
    font-weight: 500;
    font-size: 1rem;
    text-decoration: none;
    transition: transform 0.2s, background 0.2s, color 0.2s;
}

/* Légèrement plus petites que le texte : l'icône accompagne le libellé
   sans lui voler la vedette. */
.hero-btn i {
    font-size: 0.9em;
}

.hero-btn-primary {
    background: #fff;
    color: var(--primary-red);
}

.hero-btn-secondary {
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.85);
}

.hero-btn:hover {
    transform: translateY(-2px);
}

.hero-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* Section prochains matchs */
.upcoming-section {
    padding: 2.5rem 0 0;
}

.upcoming-carousel-wrap {
    max-width: 600px;
}

/* Le hero se resserre dès 1100px (header déjà en mode hamburger) */
@media (max-width: 1100px) {
    .hero-panel-inner {
        padding: 3rem 1.5rem;
    }
    .hero-title {
        font-size: 2rem;
    }
    .hero-text {
        font-size: 1rem;
        max-width: 100%;
    }
}

/* Sous 560px, les trois boutons tiennent mal côte à côte : ils passent en
   pleine largeur plutôt que de se casser en lignes déséquilibrées. */
@media (max-width: 560px) {
    .hero-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .hero-btn {
        justify-content: center;
    }
}

/* =========================================
   === GRILLE ACCUEIL                     ===
   ========================================= */

.home-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    align-items: stretch;
    gap: 2.5rem;
    padding-top: 2rem;
    padding-bottom: 4rem;
    /* Empêche les colonnes de dépasser leur taille définie */
    min-width: 0;
}

.home-grid>* {
    min-width: 0;
    overflow: hidden;
}

/* Colonne actualités : une grille de cartes verticales, remplie de gauche à
   droite.

   Le nombre d'articles est subi — `per_page=3` renvoie ce qui est publié, et
   le site n'en a qu'un. Toute la mise en page doit donc rester correcte de un
   à trois, ce qui a déjà valu deux défauts :

   1. Les cartes étaient en `flex: 1 1 0` pour que trois articles remplissent
      la hauteur de la colonne de droite. Celle-ci empilant « Prochains
      matchs » ET « Derniers résultats », elle est haute, et
      `align-items: stretch` impose cette hauteur à la colonne de gauche : un
      article seul absorbait tout, vignette gonflée à `height: 100%`.
   2. Une fois la hauteur corrigée, la carte unique s'étalait toujours sur les
      610 px de la colonne — une vignette perdue dans du vide.

   D'où la grille. `auto-fill` et NON `auto-fit` : auto-fit réduit les pistes
   vides à zéro et laisse la carte survivante s'étirer sur toute la largeur,
   soit exactement le défaut nº 2 réintroduit. auto-fill conserve les pistes,
   donc un article seul occupe une case et laisse le reste vide. */
#dernieres-actualites {
    display: flex;
    flex-direction: column;
}

#news-grid {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
    align-content: start;
}

/* La carte est stylée ici et non en `style.cssText` côté JavaScript : un style
   en ligne l'emporte sur toute règle de feuille, media queries comprises, et
   la variante mobile deviendrait alors impossible sans `!important` partout. */
#news-grid .news-card {
    display: flex;
    flex-direction: column;
    height: auto;
    padding: 0;
    overflow: hidden;
    text-align: left;
    /* .gallery-item centre ses enfants et les grise : hérité du bloc
       « galerie » d'origine, sans rapport avec une carte d'article. Les trois
       lignes suivantes le neutralisent. Le style en ligne s'en chargeait
       avant, d'où leur absence jusqu'ici. */
    align-items: stretch;
    justify-content: flex-start;
    color: inherit;
    cursor: pointer;
    background: #fdf6f4;
    border: 1px solid #f0e6e6;
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(214, 0, 28, 0.05);
    transition: transform 0.2s, box-shadow 0.2s;
}

/* Le survol de .gallery-item vire au rouge le texte et la bordure — bon pour
   une vignette de galerie, illisible sur une carte d'article. Le sélecteur
   d'identifiant l'emporte et rend ici un simple relief. */
#news-grid .news-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(214, 0, 28, 0.12);
}

#news-grid .news-card-image {
    width: 100%;
    height: 140px;
    flex-shrink: 0;
    overflow: hidden;
}

#news-grid .news-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: #f0f0f0;
}

/* Repli faute d'image mise en avant : le logo du club, un carré de 2000x2000.
   `cover` n'en garderait que la bande centrale — 48 % de sa hauteur dans une
   case de 290x140, tête et pied coupés. `contain` le montre entier et comble
   les côtés par le fond.

   La distinction se fait à la source, dans index.php, et non par un sélecteur
   sur le nom de fichier : une vraie photo DOIT rester en `cover`, la recadrer
   est le comportement voulu. Ce sont deux natures d'image, pas deux réglages
   possibles de la même. */
#news-grid .news-card-image-repli {
    background: #fff;
}

#news-grid .news-card-image-repli img {
    object-fit: contain;
    padding: 0.6rem;
    box-sizing: border-box;
    background: transparent;
}

#news-grid .news-card-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex-grow: 1;
    padding: 0.9rem 1rem 1rem;
}

/* =========================================
   === CARROUSEL MATCHS                   ===
   ========================================= */

.matches-carousel {
    background: var(--white);
    border-radius: 20px;
    border: 1px solid #f0e6e6;
    box-shadow: 0 8px 24px rgba(214, 0, 28, 0.06);
    padding: 1rem 1.5rem 1.5rem;
    display: inline-flex;
    flex-direction: column;
    width: 100%;
}

.matches-carousel-title {
    font-size: 1.05rem;
    color: #1a1a1a;
    letter-spacing: 0.01em;
    margin-bottom: 1rem;
    text-align: center;
    flex-shrink: 0;
}

.carousel-viewport {
    height: auto;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}

.carousel-track {
    display: flex;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
    align-items: flex-start;
}

.carousel-slide {
    min-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-right: 4px;
}

.carousel-slide-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
}

.carousel-category-label {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--primary-red);
    background: #fde9ec;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
}

.match-card {
    background: #fdf6f4;
    border-radius: 16px;
    padding: 0.9rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    flex-shrink: 0;
}

.match-card-date {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    color: #3a3736;
    background: #f1edeb;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    white-space: nowrap;
}

.match-card-teams {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.match-card-team {
    font-size: 0.9rem;
    font-weight: 600;
    color: #222;
    flex: 1;
}

.match-card-team.home {
    text-align: left;
}

.match-card-team.away {
    text-align: right;
}

.match-card-team.sdb {
    color: var(--primary-red);
    text-transform: uppercase;
}

.match-card-score {
    font-size: 0.95rem;
    font-weight: 600;
    color: #444;
    white-space: nowrap;
    padding: 0.3rem 0.85rem;
    background: #ececec;
    border-radius: 999px;
    flex-shrink: 0;
}

.match-card-score.win {
    color: #1a7a1a;
    background: #d9f2d9;
}

.match-card-score.loss {
    color: #c0001c;
    background: #fcdfe3;
}

.match-card-score.draw {
    color: #555;
}

.match-card-location {
    font-size: 0.75rem;
    color: #222;
    font-weight: normal;
}

.match-card-location i {
    margin-right: 4px;
}

.carousel-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    margin-top: 1rem;
    flex-shrink: 0;
}

.carousel-btn {
    background: #fde9ec;
    border: none;
    border-radius: 50%;
    width: 34px;
    height: 34px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-red);
    font-size: 0.8rem;
    transition: background 0.2s, transform 0.2s;
    flex-shrink: 0;
}

.carousel-btn:hover:not(:disabled) {
    background: var(--primary-red);
    color: #fff;
    transform: scale(1.05);
}

.carousel-btn:disabled {
    opacity: 0.3;
    cursor: default;
}

.carousel-dots {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}

.carousel-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ddd;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s, transform 0.2s;
    flex-shrink: 0;
}

.carousel-dot.active {
    background: var(--primary-red);
    transform: scale(1.3);
}

.matches-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    color: #bbb;
    font-size: 0.95rem;
    font-weight: normal;
    gap: 0.5rem;
    text-align: center;
}

.matches-empty i {
    font-size: 2rem;
}

/* =========================================
   === RESPONSIVE : TABLETTES & MOBILES ===
   ========================================= */

/* Réduction du margin-top sur petits écrans */
/* Mobile et Tablette (Moins de 1400px) */
@media (max-width: 1400px) {
    /* Le header en mode hamburger fait ~6rem : on cale la marge dessus
       pour éviter un liseré blanc (ou un chevauchement) sous le bandeau. */
    .main-content {
        margin-top: 6rem;
    }

    .header-content {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        padding: 0.5rem 2%;
        /* Ajout d'un léger espace en haut et en bas pour agrandir le bandeau */
    }

    .logo-container {
        grid-column: 2;
        grid-row: 1;
        justify-content: center;
        width: auto;
        padding-bottom: 0;
        flex: none;
    }

    .main-nav {
        grid-column: 1;
        grid-row: 1;
        justify-content: flex-start;
        flex: none;
    }

    .site-logo {
        max-height: 5rem;
        /* Taille de base maintenue pour ne pas étirer le bandeau */
        transform: scale(1.2);
        /* Agrandissement visuel du logo de 40% sans impacter la hauteur du header */
    }

    .social-links {
        display: none;
        /* Caché sur mobile */
    }

    .social-links a {
        font-size: 1.2rem;
        /* Icônes légèrement plus petites pour bien s'intégrer */
    }

    .menu-toggle {
        display: block;
        /* Affiche le bouton hamburger */
        margin: 0;
        margin-left: 1rem;
        /* Léger padding à gauche */
    }

    /* Style du menu "tiroir" qui s'ouvre */
    .nav-links {
        position: fixed;
        left: -100%;
        /* Caché sur la gauche */
        top: 6rem;
        /* Ajustement par rapport au nouveau bandeau (5rem + 2x 0.5rem) */
        width: 100%;
        height: calc(100vh - 6rem);
        /* Prend toute la hauteur restante de l'écran (vh) */
        background-color: rgb(214, 0, 28);
        /* Rouge opaque */
        flex-direction: column;
        /* Liens en colonne */
        align-items: center;
        justify-content: flex-start;
        /* Aligné en haut pour éviter de couper les éléments */
        padding-top: 2rem;
        /* Ajout d'espace en haut */
        padding-bottom: 4rem;
        /* Ajout d'espace en bas pour s'assurer que le dernier élément est visible */
        overflow-y: auto;
        /* Permet de scroller si l'écran est trop petit */
        transition: left 0.4s ease;
        /* Animation d'ouverture */
        z-index: 999;
    }

    .nav-links.active {
        left: 0;
        /* Menu affiché */
    }

    .nav-links li {
        margin: 0.5rem 0;
        /* Espacement réduit entre les catégories du menu mobile */
    }

    .nav-links li a {
        font-size: 1.5rem;
        /* Plus gros pour le tactile (24px -> 1.5rem) */
    }

    .mobile-socials {
        display: flex;
        gap: 1.5rem;
        justify-content: center;
        margin-bottom: 0.5rem;
    }

    .mobile-socials a {
        color: var(--white);
        font-size: 1.8rem;
        transition: transform 0.2s ease;
    }

    .mobile-socials a:hover {
        transform: scale(1.1);
    }
}

/* Contenu article WordPress : contraintes globales */
.post-full-content img,
.post-full-content table,
.post-full-content pre,
.post-full-content iframe {
    max-width: 100% !important;
    height: auto !important;
    width: auto !important;
}

.post-full-content figure,
.post-full-content .wp-block-image {
    max-width: 100% !important;
    margin-inline-start: 0 !important;
    margin-inline-end: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Le reset en tête de fichier (* { margin: 0 }) enlève les marges par défaut
   du navigateur, celles des <p> comprises. Dans un article WordPress les
   paragraphes se retrouvent donc collés les uns aux autres, quoi qu'on fasse
   dans l'éditeur : le problème est ici, pas dans la saisie. On rétablit ces
   marges pour le seul contenu d'article, sans toucher au reste du site qui
   est construit sur l'absence de marges. */
.post-full-content p {
    margin-bottom: 1.25em;
}

.post-full-content p:last-child {
    margin-bottom: 0;
}

.post-full-content h2,
.post-full-content h3,
.post-full-content h4 {
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    line-height: 1.3;
    font-family: 'Fredoka', sans-serif;
}

/* Un intertitre en tout début d'article n'a rien au-dessus à espacer. */
.post-full-content > :first-child {
    margin-top: 0;
}

/* Le reset supprime aussi le padding : sans retrait, les puces des listes
   sortiraient du bloc de texte. */
.post-full-content ul,
.post-full-content ol {
    margin: 0 0 1.25em 1.5rem;
}

.post-full-content li {
    margin-bottom: 0.4em;
}

.post-full-content blockquote {
    margin: 1.5rem 0;
    padding-left: 1rem;
    border-left: 3px solid var(--primary-red);
    font-style: italic;
}

/* Grille accueil : bascule en colonne unique sous 900px */
@media (max-width: 900px) {

    /* Empêche tout débordement horizontal sur mobile */
    body {
        overflow-x: hidden;
    }

    .home-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding-top: 1rem;
        padding-bottom: 2rem;
    }

    /* Titre trop large sur mobile */
    #dernieres-actualites h2,
    #matches-section h2 {
        font-size: 1.4rem !important;
        word-break: break-word;
    }

    /* Cartes actualités : une seule colonne. minmax(260px, 1fr) suffirait sur
       la plupart des téléphones, mais pas sur les plus étroits (320 px moins
       les marges), où la piste déborderait. */
    #news-grid {
        width: 100%;
        grid-template-columns: 1fr;
    }

    #news-grid article {
        width: 100%;
        box-sizing: border-box;
    }

    /* Vignette plus basse : sur une carte pleine largeur, les 140 px du
       bureau repousseraient le texte sous la ligne de flottaison. Les
       !important d'avant ne sont plus nécessaires, la mise en forme ayant
       quitté les styles en ligne. */
    #news-grid .news-card-image {
        height: 120px;
    }

    .carousel-viewport {
        height: auto;
    }

    /* Noms d'équipes : empilés verticalement et centrés sur mobile */
    .match-card-teams {
        flex-direction: column;
        align-items: stretch;
        gap: 0.45rem;
    }

    .match-card-team {
        font-size: 0.9rem;
        text-align: center;
        white-space: normal;
        word-break: break-word;
    }

    .match-card-team.home,
    .match-card-team.away {
        text-align: center;
    }

    .match-card-score {
        align-self: center;
        font-size: 0.9rem;
    }

    /* Page article unique : padding réduit */
    .page-section {
        padding: 2rem 0;
    }

    /* Contenu article : padding latéral sur mobile */
    #actualites-container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Titre article responsive */
    #actualites-container h1.section-title {
        font-size: 1.5rem !important;
        word-break: break-word;
    }

    /* Empêche le contenu WordPress de déborder */
    .post-full-content {
        overflow-x: hidden;
        word-break: break-word;
    }

    .post-full-content img,
    .post-full-content table,
    .post-full-content pre,
    .post-full-content iframe {
        max-width: 100% !important;
        height: auto !important;
    }
}

/* =========================================
   === LES ÉQUIPES (hub + page équipe)    ===
   ========================================= */

/* --- Page hub : grille des équipes --- */
.teams-hub {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.team-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 1.6rem;
    background: #fdf6f4;
    border: 1px solid #f0e6e6;
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(214, 0, 28, 0.05);
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s, box-shadow 0.2s;
}

.team-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(214, 0, 28, 0.12);
}

.team-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #fde9ec;
    color: var(--primary-red);
    font-size: 1.3rem;
}

.team-card-name {
    font-family: "Fredoka", sans-serif;
    font-size: 1.4rem;
    font-weight: 600;
    color: #222;
}

.team-card-go {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary-red);
}

.team-card-go i {
    transition: transform 0.2s;
}

.team-card:hover .team-card-go i {
    transform: translateX(4px);
}

/* --- Page équipe (détail) --- */
.team-back {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 1.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary-red);
    text-decoration: none;
}

.team-back:hover {
    text-decoration: underline;
}

.team-page-title {
    text-align: left;
    text-transform: none;
    font-weight: 600;
    font-family: "Fredoka", sans-serif;
    color: var(--primary-red);
    margin: 0.6rem 0 1.5rem;
}

.team-section {
    margin-bottom: 2.5rem;
}

.team-section-title {
    font-family: "Fredoka", sans-serif;
    font-size: 1.5rem;
    font-weight: 500;
    color: #3a3736;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #f1edeb;
}

.team-empty {
    color: #888;
    font-style: italic;
}

.team-empty i {
    margin-right: 6px;
    color: var(--primary-red);
}

/* Effectif */
.players-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 1.5rem;
}

.player-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.6rem;
}

.player-photo {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    background: #fde9ec;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-red);
    font-size: 2.5rem;
    border: 3px solid #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.player-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.player-name {
    font-weight: 600;
    color: #222;
    font-size: 0.95rem;
}

/* Placeholders effectif (en attente des vraies données) */
.player-photo-placeholder {
    background: #f9f9f9;
    border: 2px dashed #ddd;
    box-shadow: none;
    color: #ccc;
    font-size: 2.2rem;
}

.player-name-placeholder {
    width: 70px;
    height: 11px;
    border-radius: 999px;
    background: #ececec;
}

/* Placeholder match (calendrier en attente) */
.match-card-placeholder {
    background: #f9f9f9;
    border: 2px dashed #ddd;
}

.match-card-placeholder .match-card-date {
    background: #ececec;
    color: #aaa;
}

.match-card-placeholder .match-card-team.away {
    color: #bbb;
    font-style: italic;
}

/* Calendrier + Résultats côte à côte */
.team-matches {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.team-matches-list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    max-height: 520px;
    overflow-y: auto;
    padding-right: 0.3rem;
}

.team-notfound {
    text-align: center;
    padding: 3rem 0;
}

@media (max-width: 768px) {
    .team-matches {
        grid-template-columns: 1fr;
    }
}

/* --- Lien "voir tout" à côté des titres de section --- */
.section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.see-all-link {
    flex-shrink: 0;
    white-space: nowrap;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary-red);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.see-all-link:hover {
    text-decoration: underline;
}

.see-all-link i {
    font-size: 0.75rem;
    transition: transform 0.2s;
}

.see-all-link:hover i {
    transform: translateX(3px);
}
/* =========================================
   === FOOTER (composant partagé)         ===
   ========================================= */

.site-footer {
    border-top: 4px solid var(--primary-red);
    background: #fff;
    margin-top: 3rem;
    font-family: "Nunito", sans-serif;
}

.footer-top {
    display: flex;
    justify-content: space-between;
    gap: 2.5rem;
    padding: 3rem 1.25rem 2.5rem;
}

.footer-about {
    max-width: 360px;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 1.1rem;
}

.footer-logo {
    width: 58px;
    height: 58px;
    object-fit: contain;
    flex-shrink: 0;
}

.footer-brand-name {
    font-family: "Fredoka", sans-serif;
    font-weight: 600;
    font-size: 1.35rem;
    color: #3a3736;
    line-height: 1.1;
}

.footer-desc {
    color: #666;
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.6;
    margin-bottom: 1.25rem;
}

.footer-socials {
    display: flex;
    gap: 0.75rem;
}

.footer-socials a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary-red);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: transform 0.2s;
}

.footer-socials a:hover {
    transform: translateY(-2px);
}

.footer-heading {
    font-family: "Fredoka", sans-serif;
    font-weight: 600;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--primary-red);
    margin-bottom: 1.25rem;
}

.footer-links {
    list-style: none;
}

.footer-links li {
    margin-bottom: 0.7rem;
}

.footer-links a {
    color: #555;
    text-decoration: none;
    font-size: 0.95rem;
    transition: color 0.2s;
}

.footer-links a:hover {
    color: var(--primary-red);
}

.footer-contact {
    list-style: none;
    margin-bottom: 1.5rem;
}

.footer-contact li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1rem;
    color: #555;
    font-size: 0.95rem;
    line-height: 1.4;
}

.footer-contact i {
    color: var(--primary-red);
    margin-top: 3px;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}

.footer-contact strong {
    color: #3a3736;
}

/* Le téléphone est un lien tel: — sans cette règle il s'afficherait en
   bleu souligné, seul élément du footer à ne pas suivre la charte. */
.footer-contact a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s;
}

.footer-contact a:hover {
    color: var(--primary-red);
}

.footer-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--primary-red);
    color: #fff;
    padding: 0.7rem 1.4rem;
    border-radius: 999px;
    text-decoration: none;
    font-family: "Fredoka", sans-serif;
    font-weight: 500;
    transition: transform 0.2s;
}

.footer-cta:hover {
    transform: translateY(-2px);
}

.footer-bottom {
    border-top: 1px solid #eee;
}

.footer-bottom-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem;
    font-size: 0.85rem;
    color: #888;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.footer-legal a {
    color: #888;
    text-decoration: none;
    margin-left: 1.5rem;
}

.footer-legal a:hover {
    color: var(--primary-red);
}

@media (max-width: 768px) {
    .footer-top {
        flex-wrap: wrap;
        gap: 1.5rem 2rem;
    }
    /* On "dissout" le bloc à propos pour réordonner ses enfants */
    .footer-about {
        display: contents;
    }
    /* Ligne 1 : marque à gauche, réseaux sociaux à droite */
    .footer-brand {
        order: 1;
        flex: 1 1 auto;
        margin-bottom: 0;
    }
    .footer-socials {
        order: 2;
        flex: 0 0 auto;
        margin-left: auto;
        align-self: center;
    }
    /* Ligne 2 : description pleine largeur */
    .footer-desc {
        order: 3;
        flex: 0 0 100%;
    }
    /* Ligne 3 : Le club + Nous contacter côte à côte */
    .footer-top > .footer-col:not(.footer-about) {
        order: 4;
        flex: 0 0 calc(50% - 1rem);
        min-width: 0;
    }
    .footer-bottom-inner {
        flex-direction: column;
        text-align: center;
    }
    .footer-legal a {
        margin: 0 0.75rem;
    }
}

/* Très petits écrans : on garde les 2 colonnes côte à côte,
   on réduit l'espacement et le texte pour que tout tienne. */
@media (max-width: 480px) {
    .footer-top {
        gap: 1.5rem 1rem;
    }
    .footer-top > .footer-col:not(.footer-about) {
        flex: 0 0 calc(50% - 0.5rem);
    }
    .footer-heading {
        font-size: 0.9rem;
        margin-bottom: 0.8rem;
    }
    .footer-links a {
        font-size: 0.85rem;
    }
    .footer-contact {
        font-size: 0.8rem;
    }
    .footer-contact li {
        gap: 0.5rem;
        margin-bottom: 0.7rem;
    }
    .footer-contact li span {
        overflow-wrap: anywhere;
    }
    .footer-contact i {
        width: 14px;
    }
    .footer-cta {
        padding: 0.6rem 0.9rem;
        font-size: 0.82rem;
    }
}

/* --- Page Mentions légales --- */
.legal-content h2 {
    font-family: "Fredoka", sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: #3a3736;
    margin: 1.75rem 0 0.6rem;
}

.legal-content p {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.7;
    color: #555;
}

.legal-content strong {
    color: #3a3736;
}

.legal-content p+p {
    margin-top: 0.75rem;
}

.legal-content a {
    color: var(--primary-red);
    text-decoration: none;
}

.legal-content a:hover {
    text-decoration: underline;
}

.legal-updated {
    margin-top: 2.5rem;
    font-size: 0.85rem;
    color: #999;
    font-style: italic;
}

/* =========================================
   === PAGE LE CLUB                        ===
   ========================================= */

.club-block-title {
    font-family: "Fredoka", sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--primary-red);
    text-transform: uppercase;
    margin: 3.5rem 0 0.75rem;
}

.club-block-intro {
    font-size: 1.05rem;
    line-height: 1.7;
    color: #555;
    max-width: 640px;
    margin: 0 auto 2rem;
}

.bureau-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
}

.bureau-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: var(--white);
    padding: 2rem 1.5rem;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}

/* Initiales plutôt qu'une silhouette générique : en l'absence de photo,
   c'est moins « fiche vide » et ça reste identifiable. */
.bureau-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 1rem;
    border-radius: 50%;
    background: var(--primary-red);
    color: #fff;
    font-family: "Fredoka", sans-serif;
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: 0.05em;
}

.bureau-name {
    font-family: "Fredoka", sans-serif;
    font-size: 1.15rem;
    font-weight: 600;
    color: #3a3736;
}

.bureau-role {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--primary-red);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-top: 0.2rem;
}

.bureau-mission {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #666;
    margin-top: 0.85rem;
}

/* =========================================
   === PAGE NOUS REJOINDRE                 ===
   ========================================= */

/* --- Intro (élargie pour éviter que la 2e ligne ne se coupe) --- */
.join-intro {
    max-width: 960px;
}

/* --- Étapes d'inscription --- */
.join-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
    margin: 0 auto 3.5rem;
}

.join-step {
    position: relative;
    background: #fdf6f4;
    border: 1px solid #f0e6e6;
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(214, 0, 28, 0.05);
    padding: 2.2rem 1.6rem 1.8rem;
    text-align: center;
}

.join-step-num {
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--primary-red);
    color: #fff;
    font-family: "Fredoka", sans-serif;
    font-weight: 600;
}

.join-step-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 1rem;
    border-radius: 50%;
    background: #fde9ec;
    color: var(--primary-red);
    font-size: 1.5rem;
}

.join-step-title {
    font-family: "Fredoka", sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: #222;
    margin-bottom: 0.6rem;
}

.join-step-text {
    font-size: 1rem;
    line-height: 1.6;
    color: #555;
}

/* --- Titres de blocs --- */
.join-block-title {
    font-family: "Fredoka", sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--primary-red);
    text-transform: uppercase;
    margin: 0 0 1.5rem;
}

.join-block-title span {
    text-transform: none;
    font-size: 1rem;
    font-weight: 400;
    color: #888;
}

/* --- Tableaux (tarifs & planning) --- */
.join-table-wrapper {
    overflow-x: auto;
    margin: 0 auto 1rem;
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(214, 0, 28, 0.05);
}

.join-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    min-width: 480px;
}

.join-table thead th {
    background: var(--primary-red);
    color: #fff;
    font-family: "Fredoka", sans-serif;
    font-weight: 500;
    font-size: 1rem;
    padding: 0.9rem 1.2rem;
    text-align: left;
}

.join-table td {
    padding: 0.9rem 1.2rem;
    text-align: left;
    font-size: 1rem;
    color: #444;
    border-top: 1px solid #f0e6e6;
}

.join-table tbody tr:nth-child(even) {
    background: #fdf6f4;
}

.join-table .join-price {
    font-family: "Fredoka", sans-serif;
    font-weight: 600;
    color: var(--primary-red);
}

/* Planning : une catégorie par ligne, un créneau par .slot.
   Les .slot d'une même ligne se lisent en vis-à-vis (1er jour ↔ 1er horaire
   ↔ 1er gymnase), d'où le min-width plus large : si un libellé passait à la
   ligne, l'alignement entre colonnes serait rompu. */
.join-table-planning {
    min-width: 640px;
}

.join-table-planning .slot {
    display: block;
    white-space: nowrap;
}

.join-table-planning .slot+.slot {
    margin-top: 0.4rem;
}

.join-table-planning td:first-child {
    font-weight: 700;
    color: #333;
}

/* --- Note d'info --- */
.join-note {
    font-size: 0.95rem;
    color: #777;
    margin: 0 0 3.5rem;
    text-align: left;
}

.join-note i {
    color: var(--primary-red);
    margin-right: 0.3rem;
}

/* --- CTA bas de page --- */
.join-cta {
    margin-top: 1rem;
}

.join-cta p {
    font-family: "Fredoka", sans-serif;
    font-size: 1.2rem;
    color: #222;
    margin-bottom: 1.2rem;
}