/* ────────────────────────────────────────────────────────────
   FICHIER GÉNÉRÉ — NE PAS MODIFIER À LA MAIN
   Produit par : php socle/publier-assets.php
   Sources     : socle/assets/theme-studio.css + socle/assets/base.css
   Toute modification faite ici sera écrasée à la prochaine
   publication. Modifie les sources dans socle/assets/.
   ──────────────────────────────────────────────────────────── */

/* ============================================================
   COULEURS DE LA MARQUE — STUDIO ALGO
   ============================================================
   Valeurs relevées directement dans le logo « Algo. » :
     fond      #111111
     bleu vif  #4CB1FC   (haut du dégradé du A)
     bleu clair#9BE8FF   (bas du dégradé)
     texte     #D7D7D7

   Même fichier de base que Club Algo, seules les couleurs changent.
   ============================================================ */

:root {
    /* La couleur de la marque */
    --accent:      #4CB1FC;        /* le bleu Studio Algo */
    --accent-2:    #9BE8FF;        /* le bleu clair du bas du dégradé */
    --accent-rgb:  76, 177, 252;   /* le même bleu, pour les transparences */
    --accent-pale:   #DFF4FF;   /* reflet clair du bouton liquide */
    --accent-sombre: #0B3A5C;

    /* Le dégradé du logo, réutilisable tel quel sur les titres et les boutons */
    --accent-degrade: linear-gradient(135deg, #4CB1FC 0%, #9BE8FF 100%);

    /* Les fonds et les textes */
    --noir-fond:   #111111;        /* le noir du logo, plus neutre que celui de Club Algo */
    --noir-fond-rgb: 17, 17, 17;   /* le même, pour la barre du haut translucide */
    --noir-2:      #0C0C0C;        /* fonds sombres secondaires : pied de page, encarts */
    --gris-fonce:  #232323;
    --blanc:       #FFFFFF;
    --gris-texte:  #9C9C9C;        /* texte secondaire */

    /* Alias historique : quelques composants partagés écrivent encore
       var(--jaune). Sur Studio Algo, ils prennent donc le bleu. */
    --jaune: var(--accent);
}


/* ============================================================
   CLUB ALGO — FEUILLE DE STYLE GLOBALE
   Charte graphique : sombre, accents jaune, premium & dynamique
   ============================================================ */

/* ─── Police Milker (titres) ───
   Dépose les fichiers de police dans assets/fonts/ (ex: Milker.woff2).
   Tant que le fichier n'est pas présent, le fallback Impact/Arial Black
   s'applique automatiquement — le site reste lisible. */
@font-face {
    font-family: 'Milker';
    src: url('fonts/Milker.woff2') format('woff2'),
         url('fonts/Milker.woff')  format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ─── Variables de la charte ─── */
/* Les COULEURS ne sont pas ici : elles viennent du fichier de thème
   (theme-club.css, theme-studio.css…) collé juste au-dessus de ce
   fichier au moment de la publication. Ce fichier-ci ne connaît que
   les noms --accent, --noir-fond, --gris-fonce, --blanc, --gris-texte.
   Ne sont définis ci-dessous que les réglages communs aux deux marques. */
:root {
    --titre:  'Milker', 'Impact', 'Arial Black', sans-serif;
    --texte:  'Montserrat', -apple-system, 'Segoe UI', sans-serif;

    --max-largeur: 1200px;
    --rayon: 14px;
    --transition: .25s ease;
}

/* ─── Réinitialisation de base ─── */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--texte);
    background-color: var(--noir-fond);
    color: var(--blanc);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
    font-family: var(--titre);
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1.05;
    font-weight: normal;
}

/* Conteneur centré réutilisable */
.conteneur {
    max-width: var(--max-largeur);
    margin: 0 auto;
    padding: 0 24px;
}

section { padding: 80px 0; }

/* ─── Boutons ─── */
.btn {
    display: inline-block;
    background: var(--jaune);
    color: var(--noir-fond);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: 16px 34px;
    border-radius: 50px;
    border: 2px solid var(--jaune);
    cursor: pointer;
    transition: var(--transition);
    font-family: var(--texte);
    font-size: .95rem;
}
.btn:hover { background: transparent; color: var(--jaune); transform: translateY(-2px); }

.btn-secondaire {
    background: transparent;
    color: var(--blanc);
    border: 2px solid var(--gris-fonce);
}
.btn-secondaire:hover { border-color: var(--jaune); color: var(--jaune); }

/* ============================================================
   EN-TÊTE (header fixe)
   ============================================================ */
.site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 32px;
    background: rgba(var(--noir-fond-rgb), .85);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--gris-fonce);
}
.logo { height: 46px; width: auto; }
/* Si le logo n'est pas encore déposé, on affiche un texte de secours */
.logo[src$="logo.png"] { min-width: 46px; }

.nav-principale { display: flex; align-items: center; gap: 28px; }
.nav-principale a {
    font-weight: 600;
    font-size: .95rem;
    color: var(--blanc);
    transition: var(--transition);
}
.nav-principale a:hover,
.nav-principale a.actif { color: var(--jaune); }

.btn-nav {
    border: 2px solid var(--jaune);
    border-radius: 50px;
    padding: 8px 20px;
    color: var(--jaune) !important;
}
.btn-nav:hover { background: var(--jaune); color: var(--noir-fond) !important; }

/* Bouton burger (caché sur ordinateur) */
.burger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; }
.burger span { width: 26px; height: 3px; background: var(--jaune); border-radius: 2px; }

main { padding-top: 76px; } /* compense la hauteur du header fixe */

/* ============================================================
   HERO (page d'accueil)
   ============================================================ */
.hero {
    min-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 60px 24px;
    background:
        radial-gradient(circle at 50% 0%, rgba(var(--accent-rgb), .10), transparent 55%),
        var(--noir-fond);
}
.hero-logo { height: 120px; margin-bottom: 30px; }
.hero h1 {
    font-size: clamp(2.5rem, 7vw, 5.5rem);
    color: var(--blanc);
}
.hero h1 .jaune { color: var(--jaune); }
.hero .slogan {
    font-size: clamp(1rem, 2.5vw, 1.4rem);
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--jaune);
    margin: 18px 0 34px;
    font-weight: 700;
}

/* ─── Titres de section ─── */
.titre-section { text-align: center; margin-bottom: 50px; }
.titre-section h2 { font-size: clamp(2rem, 5vw, 3.2rem); }
.titre-section .surtitre {
    color: var(--jaune);
    letter-spacing: 3px;
    text-transform: uppercase;
    font-weight: 700;
    font-size: .85rem;
    display: block;
    margin-bottom: 10px;
}

/* ─── Chiffres clés ─── */
.fond-gris { background: var(--gris-fonce); }
.chiffres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; text-align: center; }
.chiffre .nombre {
    font-family: var(--titre);
    font-size: clamp(2.5rem, 6vw, 4rem);
    color: var(--jaune);
}
.chiffre .label { color: var(--gris-texte); text-transform: uppercase; letter-spacing: 1px; font-size: .9rem; }

/* ─── Niches (cartes) ─── */
.grille-niches { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px; }
.carte-niche {
    background: var(--gris-fonce);
    border: 1px solid #4a4a48;
    border-radius: var(--rayon);
    padding: 30px 22px;
    text-align: center;
    transition: var(--transition);
}
.carte-niche:hover { border-color: var(--jaune); transform: translateY(-5px); }
.carte-niche h3 { color: var(--blanc); font-size: 1.3rem; }

/* ─── Grille des créateurs ─── */
.grille-createurs { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 26px; }
.carte-createur {
    background: var(--gris-fonce);
    border-radius: var(--rayon);
    overflow: hidden;
    transition: var(--transition);
    border: 1px solid transparent;
}
.carte-createur:hover { transform: translateY(-6px); border-color: var(--jaune); }
.carte-createur .photo { aspect-ratio: 1/1; background: #2a2a28; object-fit: cover; width: 100%; }
.carte-createur .infos { padding: 20px; }
.carte-createur .niche {
    display: inline-block;
    background: var(--jaune);
    color: var(--noir-fond);
    font-weight: 700;
    font-size: .75rem;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 50px;
    margin-bottom: 10px;
}
.carte-createur h3 { color: var(--blanc); font-size: 1.4rem; }
.carte-createur .plateformes { display: flex; gap: 14px; margin-top: 14px; color: var(--gris-texte); font-size: .85rem; }
.carte-createur .plateformes span { color: var(--jaune); font-weight: 700; }

/* ─── Étapes / processus ─── */
.etapes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 26px; }
.etape { background: var(--gris-fonce); border-radius: var(--rayon); padding: 30px; }
.etape .num {
    font-family: var(--titre);
    font-size: 2.6rem;
    color: var(--jaune);
}
.etape h3 { color: var(--blanc); font-size: 1.25rem; margin: 8px 0; }
.etape p { color: var(--gris-texte); }

/* ─── Services (cartes) ─── */
.grille-services {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 26px;
}
.carte-service {
    background: var(--gris-fonce);
    border-radius: var(--rayon);
    padding: 34px;
    border-top: 4px solid var(--jaune);
    transition: transform .28s ease, box-shadow .28s ease;
}
.carte-service:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .45), 0 0 0 1px rgba(var(--accent-rgb), .35);
}
.carte-service:hover .service-icone {
    transform: scale(1.12) rotate(-5deg);
    background: rgba(var(--accent-rgb), .22);
}
.carte-service h3 { color: var(--jaune); font-size: 1.5rem; margin-bottom: 12px; }
.carte-service p { color: var(--gris-texte); }

/* Icône de service (cercle jaune translucide) */
.service-icone {
    width: 58px; height: 58px;
    border-radius: 16px;
    background: rgba(var(--accent-rgb), .12);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 20px;
    transition: transform .3s ease, background .3s ease;
}
.service-icone svg { width: 28px; height: 28px; color: var(--jaune); }

/* Étapes du processus : léger soulèvement au survol */
.etape { transition: transform .28s ease, box-shadow .28s ease; }
.etape:hover { transform: translateY(-6px); box-shadow: 0 14px 32px rgba(0, 0, 0, .4); }

/* ─── Bandeau d'appel à l'action ─── */
.cta-bandeau {
    background: var(--jaune);
    color: var(--noir-fond);
    text-align: center;
    border-radius: var(--rayon);
    padding: 60px 30px;
}
.cta-bandeau h2 { color: var(--noir-fond); font-size: clamp(1.8rem, 4vw, 2.8rem); }
.cta-bandeau .btn { background: var(--noir-fond); color: var(--jaune); border-color: var(--noir-fond); margin-top: 22px; }
.cta-bandeau .btn:hover { background: transparent; color: var(--noir-fond); }

/* ============================================================
   FORMULAIRES
   ============================================================ */
.formulaire { max-width: 640px; margin: 0 auto; }
.champ { margin-bottom: 20px; }
.champ label { display: block; margin-bottom: 8px; font-weight: 600; font-size: .9rem; }
.champ input, .champ select, .champ textarea {
    width: 100%;
    background: var(--gris-fonce);
    border: 1px solid #6e6e6e;
    border-radius: 10px;
    padding: 14px 16px;
    color: var(--blanc);
    font-family: var(--texte);
    font-size: 1rem;
    transition: var(--transition);
}
.champ input:focus, .champ select:focus, .champ textarea:focus {
    outline: none;
    border-color: var(--jaune);
}
.champ textarea { resize: vertical; min-height: 130px; }

/* Messages (succès / erreur) */
.message { padding: 16px 20px; border-radius: 10px; margin-bottom: 24px; font-weight: 600; }
.message-succes { background: rgba(var(--accent-rgb), .12); border: 1px solid var(--jaune); color: var(--jaune); }
.message-erreur { background: rgba(255,80,80,.12); border: 1px solid #ff5050; color: #ff8a8a; }

/* ============================================================
   PIED DE PAGE
   ============================================================ */
.site-footer { background: var(--noir-2); padding: 60px 24px 24px; border-top: 1px solid var(--gris-fonce); }
.footer-grille {
    max-width: var(--max-largeur);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 40px;
}
.footer-logo { height: 42px; margin-bottom: 16px; }
.footer-slogan { color: var(--jaune); letter-spacing: 2px; text-transform: uppercase; font-size: .8rem; font-weight: 700; }
.footer-col h4 { color: var(--blanc); margin-bottom: 16px; font-size: 1rem; letter-spacing: 1px; }
.footer-col a { display: block; color: var(--gris-texte); margin-bottom: 10px; transition: var(--transition); }
.footer-col a:hover { color: var(--jaune); }
.footer-bas {
    max-width: var(--max-largeur);
    margin: 40px auto 0;
    padding-top: 24px;
    border-top: 1px solid var(--gris-fonce);
    text-align: center;
    color: var(--gris-texte);
    font-size: .85rem;
}

/* ============================================================
   ESPACE CONNEXION / DASHBOARD / ADMIN
   ============================================================ */
.page-auth {
    min-height: calc(100vh - 76px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
}
.carte-auth {
    background: var(--gris-fonce);
    border-radius: var(--rayon);
    padding: 44px;
    width: 100%;
    max-width: 420px;
    border-top: 4px solid var(--jaune);
}
.carte-auth h1 { font-size: 2rem; margin-bottom: 8px; color: var(--blanc); }
.carte-auth .btn { width: 100%; margin-top: 8px; }

/* Sous-onglets (page Réglages) */
.sous-onglets {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-bottom: 28px;
    border-bottom: 1px solid var(--gris-fonce);
}
.sous-onglets a {
    padding: 12px 18px;
    color: var(--gris-texte);
    font-weight: 600;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    transition: color .2s ease, border-color .2s ease;
}
.sous-onglets a:hover { color: var(--blanc); }
.sous-onglets a.actif { color: var(--jaune); border-bottom-color: var(--jaune); }

/* Tableaux (deals, admin) */
.tableau-bloc { overflow-x: auto; }
table.donnees { width: 100%; border-collapse: collapse; margin-top: 10px; }
table.donnees th, table.donnees td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--gris-fonce); }
table.donnees th { color: var(--jaune); text-transform: uppercase; font-size: .8rem; letter-spacing: 1px; }
table.donnees tr:hover td { background: rgba(255,255,255,.03); }

/* Étiquettes de statut */
.statut { padding: 4px 12px; border-radius: 50px; font-size: .75rem; font-weight: 700; text-transform: uppercase; }
.statut-en-cours  { background: rgba(var(--accent-rgb), .15);  color: var(--jaune); }
.statut-termine   { background: rgba(80,220,120,.15);  color: #6fdc8c; }
.statut-en-attente{ background: rgba(180,180,180,.15);  color: var(--gris-texte); }

/* Blocs de stats (dashboard) */
.grille-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 30px; }
.bloc-stat { background: var(--gris-fonce); border-radius: var(--rayon); padding: 26px; border-left: 4px solid var(--jaune); }
.bloc-stat .reseau { color: var(--jaune); font-weight: 700; text-transform: uppercase; font-size: .8rem; letter-spacing: 1px; }
.bloc-stat .valeur { font-family: var(--titre); font-size: 2.2rem; color: var(--blanc); margin: 6px 0; }
.bloc-stat .detail { color: var(--gris-texte); font-size: .85rem; }

/* Cartes / sections génériques de l'espace membre */
.bloc {
    background: var(--gris-fonce);
    border-radius: var(--rayon);
    padding: 30px;
    margin-bottom: 30px;
}
.bloc h2 { font-size: 1.5rem; color: var(--blanc); margin-bottom: 20px; }

/* En-tête de l'espace membre / admin */
.barre-membre {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--noir-2);
    padding: 14px 32px;
    border-bottom: 1px solid var(--gris-fonce);
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
}
.barre-membre .liens { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.barre-membre a { color: var(--blanc); font-weight: 600; font-size: .9rem; }
.barre-membre a:hover { color: var(--jaune); }
.barre-membre .deconnexion { color: var(--jaune); }
.badge-nav { background: var(--jaune); color: var(--noir-fond); border-radius: 50px; padding: 1px 8px; font-size: .72rem; font-weight: 800; margin-left: 2px; }

/* ============================================================
   BARRE D'ONGLETS EXTENSIBLES (icônes qui se déplient)
   ============================================================ */
.barre-onglets-section { display: flex; justify-content: center; padding: 40px 24px 0; }

.onglets-extensibles {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--gris-fonce);
    border: 1px solid #4a4a48;
    border-radius: 18px;
    padding: 6px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}

.onglet {
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 10px 12px;
    border-radius: 12px;
    color: var(--gris-texte);
    font-weight: 600;
    font-size: .9rem;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    /* Courbe douce (ease standard) + durées identiques = mouvement fluide */
    transition: gap .45s cubic-bezier(.4, 0, .2, 1),
                padding .45s cubic-bezier(.4, 0, .2, 1),
                background .3s ease, color .3s ease;
}
.onglet svg { flex: 0 0 auto; width: 20px; height: 20px; }

/* Technique "grille 0fr → 1fr" : la largeur s'anime jusqu'à la taille
   réelle du texte, sans à-coup ni zone morte. */
.onglet .label {
    display: grid;
    grid-template-columns: 0fr;
    opacity: 0;
    transition: grid-template-columns .45s cubic-bezier(.4, 0, .2, 1),
                opacity .35s ease;
}
.onglet .label > span {
    overflow: hidden;
    white-space: nowrap;
}

/* État déplié : au survol, quand sélectionné (.ouvert) ou page active (.actif) */
.onglet:hover,
.onglet.ouvert,
.onglet.actif {
    gap: 8px;
    padding: 10px 16px;
    background: rgba(var(--accent-rgb), .12);
    color: var(--jaune);
}
.onglet:hover .label,
.onglet.ouvert .label,
.onglet.actif .label {
    grid-template-columns: 1fr;
    opacity: 1;
}

.onglet-sep {
    width: 1.2px;
    height: 24px;
    background: rgba(255, 255, 255, .18);
    margin: 0 4px;
    flex: 0 0 auto;
}

/* ============================================================
   ANIMATION D'ENTRÉE DE LA PAGE D'ACCUEIL
   ============================================================ */
@keyframes word-appear {
    0%   { opacity: 0;   transform: translateY(28px) scale(.9);  filter: blur(8px); }
    60%  { opacity: .85; transform: translateY(6px) scale(.98);  filter: blur(1px); }
    100% { opacity: 1;   transform: translateY(0) scale(1);      filter: blur(0); }
}
@keyframes grid-draw {
    0%   { stroke-dashoffset: 1000; opacity: 0; }
    50%  { opacity: .25; }
    100% { stroke-dashoffset: 0; opacity: .12; }
}
@keyframes pulse-glow {
    0%, 100% { opacity: .15; transform: scale(1); }
    50%      { opacity: .5;  transform: scale(1.15); }
}
@keyframes float-dot {
    0%, 100% { transform: translate(0, 0);      opacity: .2; }
    25%      { transform: translate(5px, -10px); opacity: .6; }
    50%      { transform: translate(-3px, -5px); opacity: .35; }
    75%      { transform: translate(7px, -15px); opacity: .75; }
}
@keyframes ripple-anim {
    0%   { transform: translate(-50%, -50%) scale(1);  opacity: .6; }
    100% { transform: translate(-50%, -50%) scale(26); opacity: 0; }
}

/* Le hero devient le cadre des animations */
.hero { position: relative; overflow: hidden; }
.hero-contenu {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Grille de fond qui se dessine */
.hero-grid { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.hero-grid .grid-line {
    stroke: var(--jaune);
    stroke-width: .5;
    opacity: 0;
    stroke-dasharray: 6 6;
    stroke-dashoffset: 1000;
    animation: grid-draw 2.2s ease-out forwards;
}
.hero-grid .detail-dot { fill: var(--jaune); opacity: 0; animation: pulse-glow 3.2s ease-in-out infinite; }

/* Particules flottantes */
.floating-dot {
    position: absolute;
    width: 3px; height: 3px;
    background: var(--jaune);
    border-radius: 50%;
    opacity: 0;
    z-index: 1;
    animation: float-dot 5s ease-in-out infinite;
}

/* Mots qui apparaissent un à un */
.word-animate {
    display: inline-block;
    opacity: 0;
    animation: word-appear .8s ease-out forwards;
    transition: color .3s ease, transform .3s ease;
}
.word-animate:hover { color: var(--jaune); transform: translateY(-2px); }

/* Éléments en fondu simple (logo, bouton) */
.hero-fade { opacity: 0; animation: word-appear .8s ease-out forwards; }

/* Halo qui suit la souris */
#mouse-gradient {
    position: fixed;
    left: 0; top: 0;
    width: 380px; height: 380px;
    pointer-events: none;
    border-radius: 9999px;
    background: radial-gradient(circle, rgba(var(--accent-rgb), .08), rgba(var(--accent-rgb), .03), transparent 70%);
    /* Positionné via transform (accéléré GPU) → fluide. Seule l'opacité est en transition. */
    transform: translate3d(-50%, -50%, 0);
    opacity: 0;
    z-index: 5;
    filter: blur(24px);
    will-change: transform, opacity;
    transition: opacity .35s ease;
}

/* Onde au clic */
.ripple-effect {
    position: fixed;
    width: 6px; height: 6px;
    background: rgba(var(--accent-rgb), .5);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 60;
    animation: ripple-anim 1s ease-out forwards;
}

/* Accessibilité : si l'utilisateur préfère moins d'animations */
@media (prefers-reduced-motion: reduce) {
    .word-animate, .hero-fade { animation: none; opacity: 1; }
    .hero-grid .grid-line { animation: none; opacity: .12; stroke-dashoffset: 0; }
    .hero-grid .detail-dot, .floating-dot { animation: none; opacity: .3; }
    #mouse-gradient, .ripple-effect { display: none; }
}

/* ============================================================
   PREUVE SOCIALE, FAQ, FINITIONS
   ============================================================ */

/* Apparition des sections au scroll */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: none; }

/* Bandeau de logos partenaires (défilement continu) */
.bandeau-partenaires {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.defile-partenaires {
    display: flex;
    gap: 60px;
    align-items: center;
    width: max-content;
    animation: defiler 28s linear infinite;
}
.defile-partenaires:hover { animation-play-state: paused; }
@keyframes defiler { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.partenaire { display: flex; align-items: center; justify-content: center; min-width: 110px; height: 52px; }
.partenaire img { max-height: 46px; width: auto; filter: grayscale(1) brightness(2.2); opacity: .65; transition: .3s; }
.partenaire img:hover { filter: none; opacity: 1; }
.partenaire span { font-family: var(--titre); font-size: 1.7rem; color: var(--gris-texte); letter-spacing: 1px; }

/* Témoignages */
.grille-temoignages { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 26px; }
.carte-temoignage { background: var(--noir-fond); border: 1px solid #4a4a48; border-radius: var(--rayon); padding: 30px; }
.carte-temoignage blockquote { color: var(--blanc); font-size: 1.05rem; line-height: 1.7; margin: 0 0 20px; }
.carte-temoignage figcaption { display: flex; align-items: center; gap: 14px; }
.carte-temoignage .avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.carte-temoignage figcaption strong { display: block; color: var(--jaune); }
.carte-temoignage figcaption em { color: var(--gris-texte); font-style: normal; font-size: .85rem; }

/* FAQ (accordéon) */
.faq-item { background: var(--gris-fonce); border: 1px solid #4a4a48; border-radius: 12px; margin-bottom: 14px; }
.faq-item summary {
    list-style: none; cursor: pointer; padding: 20px 24px;
    font-weight: 600; color: var(--blanc);
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item[open] summary { color: var(--jaune); }
.faq-plus { position: relative; width: 18px; height: 18px; flex: 0 0 auto; }
.faq-plus::before, .faq-plus::after { content: ''; position: absolute; background: var(--jaune); border-radius: 2px; transition: transform .3s ease, opacity .3s ease; }
.faq-plus::before { top: 8px; left: 0; width: 18px; height: 2px; }
.faq-plus::after { left: 8px; top: 0; width: 2px; height: 18px; }
.faq-item[open] .faq-plus::after { transform: rotate(90deg); opacity: 0; }
.faq-reponse { padding: 0 24px 22px; color: var(--gris-texte); line-height: 1.7; }

/* Bouton contact flottant */
.contact-flottant {
    position: fixed; bottom: 22px; right: 22px; z-index: 900;
    display: flex; align-items: center; gap: 10px;
    background: var(--jaune); color: var(--noir-fond);
    font-weight: 800; padding: 14px 20px; border-radius: 50px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .45); transition: transform .25s ease;
}
.contact-flottant:hover { transform: translateY(-3px); }
.contact-flottant svg { width: 20px; height: 20px; }

/* Bandeau cookies */
.cookie-banniere {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 1100;
    background: var(--noir-2); border-top: 1px solid var(--gris-fonce);
    padding: 16px 24px; display: flex; align-items: center; justify-content: center;
    gap: 20px; flex-wrap: wrap;
}
.cookie-banniere p { color: var(--gris-texte); font-size: .9rem; margin: 0; max-width: 680px; }
.cookie-banniere .btn { padding: 10px 22px; }

@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; }
    .defile-partenaires { animation: none; }
}

/* Profil détaillé d'un créateur */
.profil-createur { display: flex; gap: 34px; align-items: center; flex-wrap: wrap; }
.profil-photo { width: 200px; height: 200px; border-radius: var(--rayon); object-fit: cover; background: #2a2a28; flex: 0 0 auto; }
.profil-infos { flex: 1; min-width: 260px; }
.profil-infos h1 { font-size: clamp(2rem, 5vw, 3rem); color: var(--blanc); margin: 10px 0; }
.profil-bio { color: var(--gris-texte); font-size: 1.1rem; line-height: 1.7; }
.profil-liens { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }

/* Carte créateur cliquable */
.lien-carte { color: inherit; text-decoration: none; display: block; }

/* ============================================================
   SIMULATEUR DE CAMPAGNE
   ============================================================ */
.simulateur { display: grid; grid-template-columns: 1.3fr 1fr; gap: 30px; align-items: start; }
.simu-form { background: var(--gris-fonce); border-radius: var(--rayon); padding: 34px; }
.simu-bloc { margin-bottom: 26px; }
.simu-bloc:last-child { margin-bottom: 0; }
.simu-bloc > label { display: block; font-weight: 600; margin-bottom: 12px; }
.simu-cur { color: var(--jaune); }

.simu-pills { display: flex; gap: 10px; flex-wrap: wrap; }
.simu-pill {
    background: var(--noir-fond);
    border: 1px solid #4a4a48;
    color: var(--gris-texte);
    padding: 10px 18px;
    border-radius: 50px;
    cursor: pointer;
    font-family: var(--texte);
    font-weight: 600;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.simu-pill:hover { border-color: var(--jaune); color: var(--blanc); }
.simu-pill.actif { background: var(--jaune); color: var(--noir-fond); border-color: var(--jaune); }

/* Pastilles « radio » (plateforme, envoyées au serveur) */
.simu-pill-radio {
    background: var(--noir-fond);
    border: 1px solid #4a4a48;
    color: var(--gris-texte);
    padding: 10px 18px;
    border-radius: 50px;
    cursor: pointer;
    font-weight: 600;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.simu-pill-radio input { position: absolute; opacity: 0; width: 0; height: 0; }
.simu-pill-radio:hover { border-color: var(--jaune); color: var(--blanc); }
.simu-pill-radio:has(input:checked) { background: var(--jaune); color: var(--noir-fond); border-color: var(--jaune); }

/* Menu déroulant du simulateur */
.simu-form select {
    width: 100%;
    background: var(--noir-fond);
    border: 1px solid #6e6e6e;
    border-radius: 10px;
    padding: 12px 14px;
    color: var(--blanc);
    font-family: var(--texte);
    font-size: 1rem;
}
.simu-form .btn { width: 100%; margin-top: 6px; text-align: center; }

/* Liste des créateurs pressentis */
.simu-liste { margin: 22px 0; border-top: 1px solid var(--gris-fonce); padding-top: 18px; }
.simu-liste-titre { display: block; color: var(--gris-texte); text-transform: uppercase; font-size: .78rem; letter-spacing: 1px; margin-bottom: 12px; }
.simu-createur { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, .05); }
.simu-createur span { font-weight: 700; color: var(--blanc); }
.simu-createur em { color: var(--gris-texte); font-style: normal; font-size: .82rem; text-align: right; }

.simu-form input[type=range] {
    width: 100%;
    accent-color: var(--jaune);
    height: 6px;
    cursor: pointer;
}

.simu-resultat {
    background: linear-gradient(160deg, var(--gris-fonce), #2a2a28);
    border-radius: var(--rayon);
    padding: 34px;
    border-top: 4px solid var(--jaune);
    position: sticky;
    top: 90px;
}
.simu-resultat h3 { color: var(--blanc); font-size: 1.4rem; margin-bottom: 22px; }
.simu-stat { margin-bottom: 20px; }
.simu-chiffre { display: block; font-family: var(--titre); font-size: 2.4rem; color: var(--jaune); line-height: 1; }
.simu-label { color: var(--gris-texte); font-size: .85rem; text-transform: uppercase; letter-spacing: 1px; }
.simu-resultat .btn { width: 100%; margin-top: 10px; text-align: center; }
.simu-note { color: var(--gris-texte); font-size: .78rem; margin-top: 14px; text-align: center; }

@media (max-width: 760px) {
    .simulateur { grid-template-columns: 1fr; }
    .simu-resultat { position: static; }
}

/* ============================================================
   BRIEF GUIDÉ (parcours en étapes)
   ============================================================ */
.brief-progress { height: 6px; background: var(--gris-fonce); border-radius: 50px; overflow: hidden; margin-top: 10px; }
.brief-progress-barre { height: 100%; width: 20%; background: var(--jaune); border-radius: 50px; transition: width .4s cubic-bezier(.4, 0, .2, 1); }
.brief-compteur { color: var(--gris-texte); font-size: .8rem; text-align: center; margin: 12px 0 30px; letter-spacing: 1px; text-transform: uppercase; }

@keyframes brief-apparait { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.brief-etape { display: none; }
.brief-etape.actif { display: block; animation: brief-apparait .4s ease; }
.brief-question { text-align: center; font-size: clamp(1.5rem, 4vw, 2.2rem); color: var(--blanc); margin-bottom: 8px; }
.brief-aide { text-align: center; color: var(--gris-texte); margin-bottom: 26px; }

.brief-cartes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 26px 0; }
.brief-carte {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
    text-align: center;
    background: var(--gris-fonce);
    border: 2px solid #4a4a48;
    border-radius: var(--rayon);
    padding: 30px 20px;
    cursor: pointer;
    font-weight: 700;
    color: var(--blanc);
    transition: border-color .2s ease, transform .2s ease, background .2s ease;
}
.brief-carte input { position: absolute; opacity: 0; width: 0; height: 0; }
.brief-carte svg { width: 34px; height: 34px; color: var(--jaune); }
.brief-carte:hover { border-color: var(--jaune); transform: translateY(-3px); }
.brief-carte:has(input:checked) { border-color: var(--jaune); background: rgba(var(--accent-rgb), .10); }
.brief-carte-large { flex-direction: row; padding: 20px 26px; }
.brief-cartes:has(.brief-carte-large) { grid-template-columns: 1fr; }

/* Champ « précisez » (option Autre) */
.brief-autre { display: none; margin: -6px 0 6px; }
.brief-autre input {
    width: 100%;
    background: var(--gris-fonce);
    border: 1px solid #6e6e6e;
    border-radius: 10px;
    padding: 13px 15px;
    color: var(--blanc);
    font-family: var(--texte);
    font-size: 1rem;
}
.brief-autre input:focus { outline: none; border-color: var(--jaune); }

.brief-nav { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-top: 30px; }
.brief-nav .btn { min-width: 130px; }

.brief-succes { text-align: center; padding: 40px 0; }
.brief-check {
    width: 84px; height: 84px; margin: 0 auto 24px;
    border-radius: 50%; background: var(--jaune); color: var(--noir-fond);
    font-size: 3rem; display: flex; align-items: center; justify-content: center; font-weight: 800;
    animation: brief-apparait .5s ease;
}
.brief-succes h2 { font-size: 2.2rem; margin-bottom: 14px; color: var(--blanc); }
.brief-succes p { color: var(--gris-texte); max-width: 460px; margin: 0 auto 26px; font-size: 1.1rem; }

@media (max-width: 560px) {
    .brief-cartes { grid-template-columns: 1fr; }
}

/* ============================================================
   TABLEAU DE BORD ADMIN (chiffres clés + graphiques)
   ============================================================ */
.kpi-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 18px; margin-bottom: 26px; }
.kpi { background: var(--gris-fonce); border-radius: var(--rayon); padding: 24px; border-left: 4px solid var(--jaune); }
.kpi-label { color: var(--gris-texte); text-transform: uppercase; letter-spacing: 1px; font-size: .76rem; font-weight: 700; }
.kpi-valeur {
    font-family: var(--titre);
    /* la taille s adapte a la largeur : evite que le 'EUR' passe a la ligne */
    font-size: clamp(1.5rem, 2.1vw, 2.3rem);
    white-space: nowrap;
    color: var(--blanc); line-height: 1.1; margin-top: 6px;
}
.kpi-alerte { border-left-color: #ff8a8a; }
.kpi-alerte .kpi-valeur { color: var(--jaune); }

.dash-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.dash-grille .bloc { margin-bottom: 0; }

/* Barres horizontales (magnitude, une seule teinte) */
.barh-ligne { display: grid; grid-template-columns: 130px 1fr 52px; align-items: center; gap: 12px; margin: 14px 0; }
.barh-label { color: var(--gris-texte); font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barh-piste { background: #2a2a28; border-radius: 50px; height: 12px; overflow: hidden; }
.barh-fill { display: block; height: 100%; background: var(--jaune); border-radius: 50px; min-width: 4px; transition: width .5s ease; }
.barh-val { color: var(--blanc); font-weight: 700; text-align: right; font-size: .9rem; }

/* Barres verticales (évolution mensuelle) */
.barv-graph { display: flex; align-items: flex-end; gap: 10px; height: 180px; padding-top: 10px; }
.barv-col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; gap: 6px; }
.barv-fill { width: 100%; max-width: 46px; background: var(--jaune); border-radius: 6px 6px 0 0; min-height: 3px; transition: height .5s ease; }
.barv-val { color: var(--blanc); font-weight: 700; font-size: .85rem; height: 16px; }
.barv-label { color: var(--gris-texte); font-size: .78rem; }

@media (max-width: 760px) { .dash-grille { grid-template-columns: 1fr; } }

/* ============================================================
   RESPONSIVE (mobile)
   ============================================================ */
@media (max-width: 860px) {
    /* La barre d'onglets sert de menu sur mobile : on la compacte */
    .site-header { padding: 10px 14px; }
    .logo { height: 38px; }
    .onglets-extensibles { gap: 2px; padding: 4px; }
    .onglet { padding: 8px 9px; }
    .onglet:hover, .onglet.ouvert, .onglet.actif { padding: 8px 11px; }
    .onglet .label > span { max-width: 120px; text-overflow: ellipsis; }

    .chiffres { grid-template-columns: 1fr; }
    .footer-grille { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 520px) {
    section { padding: 56px 0; }
    .footer-grille { grid-template-columns: 1fr; }
    .barre-membre { padding: 12px 18px; }
    .barre-membre .liens { gap: 14px; }
}

/* ============================================================
   CALENDRIER DES PUBLICATIONS (agent & créateur)
   ============================================================ */
.cal-entete { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.cal-entete h3 { font-size: 1.4rem; color: var(--blanc); margin: 0; min-width: 190px; }
.cal-nav {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--gris-fonce); color: var(--jaune);
    font-size: 1.4rem; line-height: 1; text-decoration: none;
    transition: background .2s ease;
}
.cal-nav:hover { background: rgba(var(--accent-rgb), .18); }
.cal-aujourdhui { margin-left: auto; color: var(--gris-texte); font-size: .85rem; text-decoration: none; }
.cal-aujourdhui:hover { color: var(--jaune); }

.cal-grille { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-jour-nom {
    text-align: center; color: var(--gris-texte);
    font-size: .75rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 1px; padding-bottom: 6px;
}
.cal-case {
    min-height: 88px; background: var(--gris-fonce);
    border: 1px solid #3d3d3b; border-radius: 10px;
    padding: 6px; display: flex; flex-direction: column; gap: 4px;
}
.cal-vide { background: transparent; border-color: transparent; }
.cal-num { color: var(--gris-texte); font-size: .78rem; font-weight: 700; }
.cal-today { border-color: var(--jaune); }
.cal-today .cal-num { color: var(--jaune); }

.cal-chip {
    display: block; font-size: .72rem; font-weight: 700;
    padding: 3px 7px; border-radius: 6px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    text-decoration: none; transition: filter .2s ease;
}
.cal-chip:hover { filter: brightness(1.25); }
.cal-attente { background: rgba(180, 180, 180, .18); color: #d6d6d4; }
.cal-encours { background: rgba(var(--accent-rgb), .18); color: var(--jaune); }
.cal-fait    { background: rgba(80, 220, 120, .16); color: #6fdc8c; }

.cal-legende { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 16px; color: var(--gris-texte); font-size: .82rem; }
.cal-pt { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: middle; }

/* Liste « à faire » */
.afaire-ligne {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 11px 0; border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.afaire-ligne:last-child { border-bottom: none; }
.afaire-date { color: var(--jaune); font-weight: 700; font-size: .85rem; min-width: 74px; }
.afaire-retard .afaire-date { color: #ff8a8a; }
.afaire-info { flex: 1; }
.afaire-info small { color: var(--gris-texte); display: block; }

@media (max-width: 700px) {
    .cal-case { min-height: 62px; padding: 4px; }
    .cal-chip { font-size: .62rem; padding: 2px 4px; }
    .cal-entete h3 { font-size: 1.1rem; min-width: 140px; }
}

/* Types d'événements dans le calendrier */
.evt-tournage   { background: rgba(168, 130, 255, .20); color: #c3aaff; }
.evt-reunion    { background: rgba(96, 165, 250, .20);  color: #93c5fd; }
.evt-invitation { background: rgba(var(--accent-rgb), .22);   color: var(--jaune); }
.evt-deadline   { background: rgba(255, 128, 90, .20);  color: #ffa285; }
.evt-perso      { background: rgba(200, 200, 200, .16); color: #cfcfcd; }
.evt-autre      { background: rgba(200, 200, 200, .16); color: #cfcfcd; }
.evt-google { background: rgba(120, 200, 255, .18); color: #9fd6ff; }

/* Débordement des cases : lien « +N autres » */
.cal-plus {
    display: block; font-size: .7rem; font-weight: 700;
    color: var(--gris-texte); text-decoration: none;
    padding: 2px 6px; margin-top: 2px;
}
.cal-plus:hover { color: var(--jaune); }

/* Journée contenant un événement urgent */
.cal-urgent { border-color: #ff5a5a; background: rgba(255, 90, 90, .07); }
.cal-urgent .cal-num { color: #ff8a8a; }
.evt-urgent { background: rgba(255, 80, 80, .24); color: #ff9b9b; }

/* ============================================================
   FORMULAIRE D'ÉVÉNEMENT (calendrier) — version soignée
   ============================================================ */

.bloc-evt {
    /* Léger dégradé + liseré jaune pour sortir de l'aplat gris */
    background: linear-gradient(160deg, #3d3c3b 0%, var(--gris-fonce) 45%, #313030 100%);
    border: 1px solid #494847;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .28);
    position: relative;
    overflow: hidden;
}
.bloc-evt::before {           /* filet jaune sur le bord gauche */
    content: '';
    position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    background: linear-gradient(180deg, var(--jaune), rgba(var(--accent-rgb), 0));
}

/* En-tête du formulaire */
.evt-tete { display: flex; align-items: center; gap: 18px; margin-bottom: 28px; }
.evt-tete-ico {
    flex: 0 0 auto;
    width: 52px; height: 52px;
    display: grid; place-items: center;
    border-radius: 16px;
    background: var(--jaune); color: var(--noir-fond);
    font-size: 1.5rem; font-weight: 700; line-height: 1;
    box-shadow: 0 8px 22px rgba(var(--accent-rgb), .22);
}
.evt-tete h2 { margin: 0 0 4px; }
.evt-tete p  { margin: 0; color: var(--gris-texte); font-size: .9rem; }

/* Sections numérotées */
.evt-section {
    border-top: 1px solid rgba(255, 255, 255, .07);
    /* on annule le padding des <section> du site vitrine */
    padding: 24px 0 0;
    margin: 24px 0 0;
}
.evt-section:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.evt-section > h3 {
    display: flex; align-items: center; gap: 10px;
    font-family: var(--texte);
    font-size: .78rem; font-weight: 700;
    letter-spacing: 1.4px; text-transform: uppercase;
    color: var(--gris-texte);
    margin: 0 0 18px;
}
.evt-num {
    width: 24px; height: 24px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: rgba(var(--accent-rgb), .14);
    border: 1px solid rgba(var(--accent-rgb), .45);
    color: var(--jaune);
    font-size: .75rem; letter-spacing: 0;
}
.evt-compteur {
    margin-left: auto;
    background: rgba(var(--accent-rgb), .12);
    color: var(--jaune);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: .72rem; letter-spacing: .5px;
}

/* Mention « facultatif » à côté des libellés */
.champ label .opt {
    font-weight: 500; font-size: .72rem;
    color: var(--gris-texte);
    text-transform: none; letter-spacing: 0;
    margin-left: 6px;
}

/* Champs : un focus un peu plus vivant */
.form-evt .champ input:focus,
.form-evt .champ select:focus,
.form-evt .champ textarea:focus {
    border-color: var(--jaune);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .14);
}
.form-evt .champ textarea { min-height: 90px; }

.evt-grille-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0 18px; }

/* Élément masqué (recherche, champ conditionnel) */
.est-cache { display: none !important; }

/* ─── Choix du type sous forme de pastilles colorées ─── */
/* .champ label { display:block } du site s applique aussi ici : on le neutralise */
.champ .evt-types { display: flex; flex-wrap: wrap; gap: 10px; }
.champ .evt-types .evt-type { display: inline-flex; margin-bottom: 0; font-size: 1rem; font-weight: 400; }
.evt-types { display: flex; flex-wrap: wrap; gap: 10px; }
.evt-type {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 10px 16px 10px 13px;
    border-radius: 999px;
    background: var(--noir-fond);
    border: 1px solid #4a4a48;
    cursor: pointer;
    transition: var(--transition);
    user-select: none;
}
.evt-type input { position: absolute; opacity: 0; pointer-events: none; }
.evt-type-point {
    width: 11px; height: 11px; border-radius: 50%;
    background: currentColor;        /* la couleur vient de la classe .evt-* */
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .06);
    flex: 0 0 auto;
}
.evt-type-label { color: var(--blanc); font-size: .88rem; font-weight: 600; }
.evt-type:hover { border-color: #6a6a67; transform: translateY(-1px); }
.evt-type:has(input:checked) {
    border-color: currentColor;
    background: rgba(255, 255, 255, .05);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .05);
}
.evt-type:has(input:focus-visible) { outline: 2px solid var(--jaune); outline-offset: 2px; }

/* ─── Interrupteur « urgent » ─── */
.carte-urgent {
    display: flex; align-items: center; gap: 16px;
    background: var(--noir-fond);
    border: 1px solid #4a4a48;
    border-radius: var(--rayon);
    padding: 18px 20px;
    cursor: pointer;
    transition: var(--transition);
    position: relative;
}
.carte-urgent input { position: absolute; opacity: 0; pointer-events: none; }
.carte-urgent:hover { border-color: rgba(255, 90, 90, .55); }

.urgent-switch {
    flex: 0 0 auto;
    width: 52px; height: 30px;
    border-radius: 999px;
    background: #4a4a48;
    position: relative;
    transition: var(--transition);
}
.urgent-bille {
    position: absolute; top: 3px; left: 3px;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--blanc);
    transition: var(--transition);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}
.carte-urgent input:checked ~ .urgent-switch { background: #ff5050; }
.carte-urgent input:checked ~ .urgent-switch .urgent-bille { transform: translateX(22px); }

.urgent-texte { display: flex; flex-direction: column; gap: 3px; }
.urgent-texte strong { color: var(--blanc); font-size: .98rem; }
.urgent-texte small  { color: var(--gris-texte); font-size: .8rem; }
.urgent-ico { color: #ff8a8a; margin-right: 4px; }

/* Pastille d'état à droite */
.urgent-etat {
    margin-left: auto;
    font-size: .7rem; font-weight: 700; letter-spacing: 1.2px;
    padding: 5px 12px; border-radius: 999px;
    background: rgba(255, 255, 255, .06);
    color: var(--gris-texte);
    white-space: nowrap;
}
.urgent-etat::after { content: 'NORMAL'; }
.carte-urgent input:checked ~ .urgent-etat { background: rgba(255, 80, 80, .2); color: #ff9b9b; }
.carte-urgent input:checked ~ .urgent-etat::after { content: 'URGENT'; }

/* La carte entière s'allume quand c'est urgent */
.carte-urgent:has(input:checked) {
    border-color: #ff5050;
    background: linear-gradient(120deg, rgba(255, 80, 80, .14), rgba(255, 80, 80, .04));
    box-shadow: 0 0 0 3px rgba(255, 80, 80, .12);
}
.carte-urgent:has(input:focus-visible) { outline: 2px solid var(--jaune); outline-offset: 3px; }

/* ─── Invités, rangés par rôle ─── */
.evt-recherche {
    width: 100%;
    background: var(--noir-fond);
    border: 1px solid #4a4a48;
    border-radius: 999px;
    padding: 12px 18px;
    color: var(--blanc);
    font-family: var(--texte); font-size: .92rem;
    margin-bottom: 18px;
    transition: var(--transition);
}
.evt-recherche:focus { outline: none; border-color: var(--jaune); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .14); }

.evt-groupes { display: flex; flex-direction: column; gap: 20px; }

.evt-groupe-tete {
    display: flex; align-items: baseline; gap: 10px;
    margin-bottom: 10px;
    padding-left: 12px;
    border-left: 3px solid var(--jaune);
}
.grp-agent    .evt-groupe-tete { border-left-color: #93c5fd; }
.grp-createur .evt-groupe-tete { border-left-color: #c3aaff; }

.evt-groupe-nom  { color: var(--blanc); font-weight: 700; font-size: .95rem; }
.evt-groupe-sous { color: var(--gris-texte); font-size: .78rem; }
.evt-groupe-nb {
    margin-left: auto;
    background: rgba(255, 255, 255, .07);
    color: var(--gris-texte);
    border-radius: 999px; padding: 2px 10px; font-size: .72rem; font-weight: 700;
}

/* ─── Choisir des personnes dans une liste ───
   Bloc réutilisable : invités d'un événement (calendrier.php), créateurs
   confiés à un agent (admin/createurs/agents.php). La vraie case à cocher
   est cachée mais bien présente : le clavier et les lecteurs d'écran la
   voient, et c'est elle qui pilote l'apparence via :checked. */
.pers-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }

.pers-carte {
    display: flex; align-items: center; gap: 12px;
    background: var(--noir-fond);
    border: 1px solid #454443;
    border-radius: 12px;
    padding: 11px 14px;
    cursor: pointer;
    transition: var(--transition);
    position: relative;
}
.pers-carte input { position: absolute; opacity: 0; pointer-events: none; }
.pers-carte:hover { border-color: #6a6a67; transform: translateY(-2px); }

.pers-avatar {
    flex: 0 0 auto;
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--gris-fonce);
    border: 1px solid #545352;
    color: var(--gris-texte);
    font-weight: 700; font-size: .82rem;
    transition: var(--transition);
}
/* Quand le créateur a une photo, elle remplit la pastille. */
.pers-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.pers-carte input:checked ~ .pers-avatar img { outline: 2px solid var(--jaune); outline-offset: -2px; }

.pers-identite { display: flex; flex-direction: column; min-width: 0; }
.pers-identite strong { color: var(--blanc); font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pers-identite small  {
    color: var(--gris-texte); font-size: .74rem;
    /* Sans ça, une niche un peu longue passe à la ligne et la carte
       devient plus haute que ses voisines : la grille part de travers. */
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.pers-coche {
    margin-left: auto;
    width: 22px; height: 22px;
    display: grid; place-items: center;
    border-radius: 50%;
    border: 1px solid #5a5958;
    color: transparent;
    font-size: .72rem; font-weight: 700;
    transition: var(--transition);
}
.pers-carte input:checked ~ .pers-coche  { background: var(--jaune); border-color: var(--jaune); color: var(--noir-fond); }
.pers-carte input:checked ~ .pers-avatar { background: var(--jaune); border-color: var(--jaune); color: var(--noir-fond); }
.pers-carte:has(input:checked) {
    border-color: var(--jaune);
    background: rgba(var(--accent-rgb), .06);
}
.pers-carte:has(input:focus-visible) { outline: 2px solid var(--jaune); outline-offset: 2px; }

.pers-vide { color: var(--gris-texte); font-size: .9rem; margin: 0; }

/* En-tête d'une liste de personnes : son titre, combien sont cochés,
   et le raccourci pour tout cocher ou tout décocher. */
.pers-tete {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    margin: 24px 0 12px;
}
.pers-tete h3 { margin: 0; color: var(--blanc); font-size: 1.1rem; }
.pers-compte {
    background: rgba(var(--accent-rgb), .12);
    color: var(--jaune);
    border-radius: 999px; padding: 3px 12px;
    font-size: .74rem; font-weight: 700;
}
.pers-compte.est-vide { background: rgba(255, 255, 255, .07); color: var(--gris-texte); }
.pers-bascule {
    margin-left: auto;
    background: none; border: 1px solid #545352;
    color: var(--gris-texte);
    border-radius: 999px; padding: 6px 14px;
    font-family: var(--texte); font-size: .78rem; font-weight: 700;
    cursor: pointer; transition: var(--transition);
}
.pers-bascule:hover { border-color: var(--jaune); color: var(--jaune); }

/* Barre d'actions */
.evt-actions {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    border-top: 1px solid rgba(255, 255, 255, .07);
    margin-top: 28px; padding-top: 24px;
}

@media (max-width: 640px) {
    .evt-tete-ico  { width: 44px; height: 44px; font-size: 1.2rem; }
    .carte-urgent  { flex-wrap: wrap; }
    .urgent-etat   { margin-left: 0; }
    .pers-liste { grid-template-columns: 1fr; }
}

/* ============================================================
   DEALS — étapes, paiement, pipeline, livrables
   ============================================================ */

/* Pastilles d'étape et de paiement */
.badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .3px;
    white-space: nowrap;
}
.et-propose  { background: rgba(200,200,200,.16); color: #cfcfcd; }
.et-negocie  { background: rgba(96,165,250,.20);  color: #93c5fd; }
.et-signe    { background: rgba(var(--accent-rgb), .18);   color: var(--jaune); }
.et-creation { background: rgba(168,130,255,.20); color: #c3aaff; }
.et-publie   { background: rgba(110,231,160,.18); color: #86efac; }

.pa-afacturer { background: rgba(255,128,90,.18); color: #ffa285; }
.pa-facture   { background: rgba(96,165,250,.20); color: #93c5fd; }
.pa-paye      { background: rgba(110,231,160,.18); color: #86efac; }

/* Alerte sur un deal qui demande une action */
.deal-alerte {
    display: block;
    color: #ff9b9b;
    font-size: .78rem;
    margin-top: 4px;
}
.deal-alerte::before { content: '⚠ '; }

/* ─── Pipeline en colonnes ─── */
.pipeline {
    display: grid;
    grid-template-columns: repeat(5, minmax(190px, 1fr));
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 6px;
}
.pipe-col {
    background: var(--noir-fond);
    border: 1px solid #454443;
    border-radius: var(--rayon);
    padding: 14px;
    min-width: 190px;
}
.pipe-tete {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 8px; margin-bottom: 4px;
}
.pipe-nom {
    font-size: .74rem; font-weight: 800;
    letter-spacing: 1.2px; text-transform: uppercase;
    color: var(--gris-texte);
}
.pipe-nb {
    background: rgba(255,255,255,.07);
    color: var(--gris-texte);
    border-radius: 999px; padding: 1px 9px;
    font-size: .7rem; font-weight: 700;
}
.pipe-total {
    color: var(--jaune);
    font-family: var(--titre);
    font-size: 1.25rem;
    margin-bottom: 12px;
}
.pipe-cartes { display: flex; flex-direction: column; gap: 8px; }

.pipe-carte {
    display: block;
    background: var(--gris-fonce);
    border: 1px solid #4a4a48;
    border-left: 3px solid #5a5958;
    border-radius: 10px;
    padding: 10px 12px;
    text-decoration: none;
    transition: var(--transition);
}
.pipe-carte:hover { transform: translateY(-2px); border-color: #6a6a67; }
.pipe-carte.a-relancer { border-left-color: #ff5050; }
.pipe-marque   { display: block; color: var(--blanc); font-weight: 700; font-size: .9rem; }
.pipe-createur { display: block; color: var(--gris-texte); font-size: .76rem; margin-top: 1px; }
.pipe-montant  { display: block; color: var(--jaune); font-weight: 700; font-size: .84rem; margin-top: 5px; }
.pipe-vide     { color: #949491; font-size: .8rem; font-style: italic; }

/* ─── Répartition de l'argent (aperçu dans le formulaire) ─── */
.repartition {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    background: var(--noir-fond);
    border: 1px solid #4a4a48;
    border-radius: var(--rayon);
    padding: 16px 18px;
    margin-bottom: 20px;
}
.repartition > div { border-left: 3px solid var(--jaune); padding-left: 12px; }
.repartition .cle { font-size: .68rem; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; color: var(--gris-texte); }
.repartition .val { font-size: 1.25rem; font-weight: 800; color: var(--blanc); margin-top: 3px; }
.repartition .agence { border-left-color: #93c5fd; }

/* ─── Livrables ─── */
.livrables { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.livrable-ligne {
    display: grid;
    grid-template-columns: 1fr 1fr 90px auto auto;
    gap: 10px;
    align-items: center;
}
.livrable-ligne select,
.livrable-ligne input[type="number"] {
    width: 100%;
    background: var(--noir-fond);
    border: 1px solid #6e6e6e;
    border-radius: 10px;
    padding: 10px 12px;
    color: var(--blanc);
    font-family: var(--texte);
    font-size: .92rem;
}
.livrable-fait {
    display: flex; align-items: center; gap: 7px;
    color: var(--gris-texte); font-size: .8rem; white-space: nowrap; cursor: pointer;
}
.livrable-fait input { width: auto; }
.livrable-suppr {
    background: none; border: 0; cursor: pointer;
    color: #ff8a8a; font-size: 1.1rem; line-height: 1; padding: 4px 8px;
}
.btn-ajout-livrable {
    background: none;
    border: 1px dashed #5a5958;
    border-radius: 10px;
    color: var(--gris-texte);
    padding: 10px 16px;
    cursor: pointer;
    font-family: var(--texte); font-size: .88rem;
    transition: var(--transition);
}
.btn-ajout-livrable:hover { border-color: var(--jaune); color: var(--jaune); }

@media (max-width: 700px) {
    .pipeline { grid-template-columns: repeat(5, 78vw); }
    .livrable-ligne { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   ESPACE AGENT — cartes du portefeuille et fiche créateur
   ============================================================ */

/* ─── Grille de cartes créateurs ─── */
.cartes-createurs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 18px;
    margin-bottom: 30px;
}

.carte-createur {
    display: block;
    background: var(--gris-fonce);
    border: 1px solid #4a4a48;
    border-left: 4px solid var(--jaune);
    border-radius: var(--rayon);
    padding: 20px 22px;
    text-decoration: none;
    transition: var(--transition);
}
.carte-createur:hover {
    transform: translateY(-3px);
    border-color: #6a6a67;
    border-left-color: var(--jaune);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .28);
}
.carte-createur.a-relancer { border-left-color: #ff5050; }

.cc-tete { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.cc-photo {
    width: 52px; height: 52px; flex: 0 0 auto;
    border-radius: 50%; object-fit: cover;
    border: 2px solid var(--jaune);
}
.cc-initiales {
    display: grid; place-items: center;
    background: var(--noir-fond);
    color: var(--jaune);
    font-weight: 800; font-size: 1rem;
}
.cc-nom   { display: block; color: var(--blanc); font-weight: 700; font-size: 1.05rem; }
.cc-niche { display: block; color: var(--gris-texte); font-size: .82rem; margin-top: 2px; }

.cc-chiffres { display: flex; gap: 18px; flex-wrap: wrap; }
.cc-chiffres > div { display: flex; flex-direction: column; }
.cc-cle { color: var(--gris-texte); font-size: .68rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.cc-val { color: var(--blanc); font-weight: 700; font-size: 1.05rem; margin-top: 3px; }

.cc-alerte {
    display: inline-block;
    margin-top: 16px;
    background: rgba(255, 80, 80, .16);
    color: #ff9b9b;
    border-radius: 999px;
    padding: 5px 13px;
    font-size: .76rem; font-weight: 700;
}

/* ─── En-tête d'une fiche créateur ─── */
.fiche-tete {
    display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
    background: linear-gradient(160deg, #3d3c3b 0%, var(--gris-fonce) 60%);
    border: 1px solid #494847;
    border-radius: var(--rayon);
    padding: 24px 28px;
    margin-bottom: 26px;
}
.fiche-photo {
    width: 78px; height: 78px; flex: 0 0 auto;
    border-radius: 50%; object-fit: cover;
    border: 3px solid var(--jaune);
}
.fiche-initiales {
    display: grid; place-items: center;
    background: var(--noir-fond);
    color: var(--jaune);
    font-weight: 800; font-size: 1.5rem;
}
.fiche-identite { flex: 1 1 240px; }
.fiche-identite h2 { margin: 2px 0 8px; }
.fiche-identite p  { margin: 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: .9rem; }
.fiche-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ─── Courbe d'audience sur fond sombre ─── */
.courbe-audience { width: 100%; height: auto; display: block; }
.courbe-legende {
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
    color: var(--gris-texte); font-size: .78rem; margin-top: 8px;
}

@media (max-width: 640px) {
    .fiche-tete    { flex-direction: column; align-items: flex-start; }
    .fiche-actions { width: 100%; }
    .fiche-actions .btn { flex: 1 1 auto; text-align: center; }
}

/* ============================================================
   BARRE « VOIR LE CALENDRIER DE » — champ et bouton soudés
   ============================================================
   Le champ n'était pas dans un .champ : il gardait le style brut
   du navigateur (fond blanc) sur une interface sombre.
   ============================================================ */

.recherche-membre {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin: 0;
}

.rm-label {
    color: var(--gris-texte);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    margin: 0;
}

/* La pilule : bordure unique autour du champ ET du bouton */
.rm-pilule {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--noir-fond);
    border: 1px solid #4a4a48;
    border-radius: 999px;
    padding: 5px 5px 5px 16px;
    transition: var(--transition);
}
.rm-pilule:hover { border-color: #6a6a67; }
/* Le halo suit le focus du champ, comme si la pilule entière était l'input */
.rm-pilule:focus-within {
    border-color: var(--jaune);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .14);
}

.rm-loupe { display: flex; color: var(--gris-texte); flex: 0 0 auto; }
.rm-pilule:focus-within .rm-loupe { color: var(--jaune); }

/* Le champ lui-même n'a plus aucune décoration : c'est la pilule qui la porte */
.rm-pilule input {
    width: 190px;
    background: none;
    border: 0;
    outline: none;
    color: var(--blanc);
    font-family: var(--texte);
    font-size: .92rem;
    padding: 8px 0;
}
.rm-pilule input::placeholder { color: #7a7a77; }
/* Chrome ajoute une petite flèche sur les champs liés à un <datalist> */
.rm-pilule input::-webkit-calendar-picker-indicator { display: none; }

.rm-bouton {
    flex: 0 0 auto;
    background: var(--jaune);
    color: var(--noir-fond);
    border: 0;
    border-radius: 999px;
    padding: 9px 20px;
    font-family: var(--texte);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .4px;
    cursor: pointer;
    transition: var(--transition);
}
.rm-bouton:hover { filter: brightness(1.08); transform: translateY(-1px); }

.rm-retour {
    color: var(--gris-texte);
    font-size: .85rem;
    text-decoration: none;
    transition: var(--transition);
}
.rm-retour:hover { color: var(--jaune); }

@media (max-width: 560px) {
    .recherche-membre { width: 100%; }
    .rm-pilule        { flex: 1 1 100%; }
    .rm-pilule input  { width: 100%; }
}

/* ============================================================
   MENU FLOTTANT DES ESPACES MEMBRES
   ============================================================
   Une pilule jaune qui se déforme au clic : un cercle sombre monte
   du bas, les entrées apparaissent une à une, le hamburger devient
   une croix. Au survol d'une entrée, les lettres roulent.
   Aucune librairie — uniquement des transitions CSS.
   ============================================================ */

/* La courbe d'accélération utilisée partout ici */
:root { --mf-ease: cubic-bezier(0.22, 1, 0.36, 1); }

/* On dégage le bas des pages pour que le menu ne masque rien */
body.avec-menu-flottant main { padding-bottom: 120px; }

.mf {
    position: fixed;
    bottom: 26px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 900;
}

.mf-pilule {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 168px;
    height: 52px;
    border-radius: 72px;
    overflow: hidden;
    cursor: pointer;
    transition: width .8s var(--mf-ease),
                height .15s var(--mf-ease),
                border-radius .8s var(--mf-ease),
                transform .25s var(--mf-ease);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .34);
}
.mf-pilule:hover { transform: scale(1.05); }

.mf.ouvert .mf-pilule {
    width: 292px;
    height: var(--mf-h, 320px);
    border-radius: 32px;
    cursor: default;
    transform: none;
    transition: width .8s var(--mf-ease),
                height .8s var(--mf-ease),
                border-radius .8s var(--mf-ease);
}

/* État de mesure : on déplie sans animation ni affichage, le temps de lire la hauteur */
.mf.mf-mesure .mf-pilule {
    height: auto !important;
    width: 292px !important;
    transition: none !important;
    visibility: hidden;
}
.mf.mf-mesure .mf-liens { flex: none; overflow: visible; }

/* ─── Le fond jaune ─── */
.mf-fond {
    position: absolute; inset: 0;
    background: var(--jaune);
    border: 1px solid #d1bb3b;
    border-radius: inherit;
    transition: border-color .3s var(--mf-ease);
}
.mf.ouvert .mf-fond { border-color: var(--jaune); }

/* ─── Le cercle sombre qui monte du bas ─── */
.mf-cercle {
    position: absolute;
    left: 50%;
    bottom: -200%;
    width: 200%;
    height: 200%;
    background: var(--noir-fond);
    border-radius: 50%;
    transform: translateX(-50%);
    transition: bottom .8s var(--mf-ease);
}
.mf.ouvert .mf-cercle { bottom: -20%; transition-delay: .1s; }

/* ─── Les entrées ─── */
.mf-liens {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 18px 22px 6px;
    flex: 1;
    justify-content: center;
    overflow: hidden;
    pointer-events: none;
}
.mf.ouvert .mf-liens { pointer-events: auto; }

.mf-lien {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 14px 0;
    font-family: var(--titre);
    font-size: 1.28rem;
    /* La police de titres déborde de sa boîte quand line-height vaut 1 :
       le filet du dessous semblait alors collé aux lettres. */
    line-height: 1.2;
    letter-spacing: -.02em;
    text-transform: uppercase;
    color: #f7f1ed;
    text-decoration: none;
    opacity: 0;
    transition: opacity .4s var(--mf-ease), color .25s ease;
}

/* Un filet très discret entre deux entrées (jamais avant la première) */
.mf-lien + .mf-lien::before {
    content: '';
    position: absolute;
    top: 0;
    left: 18%;
    right: 18%;
    height: 1px;
    background: rgba(247, 241, 237, .12);
}

.mf-texte { display: inline-block; }

/* Le repère jaune est un vrai élément du flux : en s'ouvrant il décale
   le texte vers la droite, au lieu de venir se poser par-dessus.
   Sur une entrée longue (« Tableau de bord »), un repère en position
   absolue finissait sous les lettres. */
.mf-puce {
    flex: 0 0 auto;
    width: 0;
    height: 2px;
    margin-right: 0;
    border-radius: 999px;
    background: var(--jaune);
    opacity: 0;
    transition: width .35s var(--mf-ease),
                margin-right .35s var(--mf-ease),
                opacity .25s ease;
}
.mf-lien:hover .mf-puce,
.mf-lien:focus-visible .mf-puce { width: 14px; margin-right: 10px; opacity: 1; }

/* L'entrée courante garde son repère en permanence, plus discret */
.mf-lien.actif .mf-puce  { width: 14px; margin-right: 10px; opacity: .6; }
.mf-lien.sortie .mf-puce { background: #ff9b9b; }
/* Chaque entrée entre avec un léger décalage sur la précédente */
.mf.ouvert .mf-lien {
    opacity: 1;
    transition-delay: calc(.4s + .07s * var(--n));
}
.mf-lien.actif  { color: var(--jaune); }
.mf-lien.sortie { color: #ff9b9b; }
.mf-lien:hover  { color: var(--jaune); }
.mf-lien:focus-visible { outline: 2px solid var(--jaune); outline-offset: 4px; border-radius: 4px; }


/* ─── La barre du bas : « Menu » + hamburger ─── */
.mf-barre {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 52px;
    padding: 0 22px;
    background: none;
    border: 0;
    cursor: pointer;
    font-family: var(--texte);
    transition: padding .8s var(--mf-ease);
}
.mf.ouvert .mf-barre { padding: 0 26px 24px; height: 76px; align-items: flex-end; }

.mf-titre {
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1;
    color: var(--noir-fond);
    transition: color .3s var(--mf-ease);
}
.mf.ouvert .mf-titre { color: #f7f1ed; }

/* Le hamburger : deux traits qui se croisent */
.mf-burger {
    position: relative;
    width: 24px; height: 24px;
    display: grid;
    place-items: center;
}
.mf-burger > span {
    position: absolute;
    display: block;
    width: 18px; height: 2px;
    border-radius: 999px;
    background: var(--noir-fond);
    transition: transform .4s var(--mf-ease), background .4s var(--mf-ease);
}
.mf-burger > span:nth-child(1) { transform: translateY(-3px); }
.mf-burger > span:nth-child(2) { transform: translateY(3px); }

.mf.ouvert .mf-burger > span { background: #f7f1ed; }
.mf.ouvert .mf-burger > span:nth-child(1) { transform: rotate(45deg); }
.mf.ouvert .mf-burger > span:nth-child(2) { transform: rotate(-45deg); }

@media (max-width: 480px) {
    .mf { bottom: 16px; }
    .mf.ouvert .mf-pilule { width: min(292px, calc(100vw - 32px)); }
}

/* Respect du réglage système « animations réduites » */
@media (prefers-reduced-motion: reduce) {
    .mf-pilule, .mf-fond, .mf-cercle, .mf-lien, .mf-puce, .mf-barre, .mf-burger > span {
        transition-duration: .01ms !important;
        transition-delay: 0ms !important;
    }
}

/* ============================================================
   FOND EN TUILES (tableaux de bord)
   ============================================================
   Décor uniquement : une grille peinte en dégradés, sans aucun
   élément ni script. Le z-index négatif la place derrière tout
   le contenu — les blocs du tableau de bord ne sont pas touchés.
   ============================================================ */

.tuiles {
    position: fixed;
    inset: 0;
    z-index: -1;                   /* derrière le contenu, devant le fond de page */
    pointer-events: none;          /* ne vole jamais un clic */

    /* Les deux familles de traits de la grille */
    background-image:
        linear-gradient(to right,  rgba(247, 241, 237, .045) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(247, 241, 237, .045) 1px, transparent 1px);
    background-size: 64px 64px;

    /* La grille s'efface vers le bas : elle ne concurrence pas le contenu */
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 92%);
            mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 92%);
}

@media (max-width: 640px) {
    .tuiles { background-size: 44px 44px; }
}

/* ============================================================
   PAGE SERVICES — offres cliquables et modale de détail
   ============================================================ */

.services-guide {
    color: var(--gris-texte);
    font-size: .92rem;
    margin: 14px 0 0;
}

/* Les cartes sont des boutons : on remet à plat le style natif */
.grille-services .carte-service {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    width: 100%;
    font-family: var(--texte);
    background: var(--gris-fonce);
    border: 1px solid transparent;
    cursor: pointer;
}
.grille-services .carte-service:focus-visible {
    outline: 2px solid var(--jaune);
    outline-offset: 3px;
}
.carte-service.actif {
    border-color: var(--jaune);
    background: linear-gradient(160deg, #454341 0%, var(--gris-fonce) 70%);
}

.service-plus {
    margin-top: auto;
    padding-top: 16px;
    color: var(--jaune);
    font-weight: 700;
    font-size: .85rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.service-fleche { transition: transform .25s ease; }
.carte-service:hover .service-fleche { transform: translateX(4px); }

/* ─── La modale ─── */
body.modale-ouverte { overflow: hidden; }

/* ⚠️ Indispensable : une règle d'auteur (display:flex) écrase l'attribut
   hidden du HTML. Sans cette ligne, la modale reste affichée en
   permanence — invisible, mais elle recouvre la page et intercepte
   tous les clics. */
.modale-offre[hidden] { display: none; }

.modale-offre {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    /* La profondeur se déclare sur le parent : sans elle, une rotation
       en Y aplatirait la carte au lieu de la faire pivoter. */
    perspective: 1500px;
    perspective-origin: 50% 50%;
}
/* Pendant l'animation de fermeture, elle n'intercepte déjà plus la souris */
.modale-offre:not(.ouvert) { pointer-events: none; }
.modale-offre.ouvert       { pointer-events: auto; }

/* ⚠️ On n'anime SURTOUT pas l'opacité du conteneur : cela créerait un
   calque de groupe englobant le flou du voile, que le navigateur devrait
   recalculer à chaque image. Le voile et la boîte s'animent séparément,
   chacun sur sa propre couche. */
.modale-voile {
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 9, .80);
    opacity: 0;
    -webkit-backdrop-filter: blur(0px);
            backdrop-filter: blur(0px);
    transition: opacity .32s ease-out,
                backdrop-filter .32s ease-out,
                -webkit-backdrop-filter .32s ease-out;
    will-change: opacity;
}
.modale-offre.ouvert .modale-voile {
    opacity: 1;
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
}

.modale-boite {
    position: relative;
    width: 100%;
    max-width: 760px;
    max-height: 86vh;
    /* Surtout PAS d'overflow ici : un débordement non visible forcerait
       transform-style à « flat » et les couches internes ne pourraient
       plus flotter. C'est .modale-contenu qui défile. */
    display: flex;
    flex-direction: column;
    background: linear-gradient(165deg, #3b3a39 0%, var(--gris-fonce) 60%);
    border: 1px solid #4f4e4c;
    border-radius: 20px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, .55);

    transform-style: preserve-3d;
    opacity: 0;
    /* Au repos, la carte est tournée et décalée sur la gauche : elle
       pivotera vers nous en glissant vers la droite. */
    transform: translateX(-70px) rotateY(-16deg) scale(.94);
    /* Une courbe qui décélère longuement : la carte arrive et se pose. */
    transition: transform .55s cubic-bezier(0.16, 1, 0.3, 1),
                opacity .3s ease-out;
    will-change: transform, opacity;
}
/* Une fois posée, la carte suit le curseur : c'est la variable qui porte
   l'inclinaison, le reste du transform étant à sa position d'arrivée. */
.modale-offre.ouvert .modale-boite {
    opacity: 1;
    transform: rotateX(var(--mrx, 0deg)) rotateY(var(--mry, 0deg));
}
/* Pendant le suivi, la réponse doit être courte ; au repos elle revient
   lentement, ce qui remplace le ressort du composant d'origine. */
.modale-offre.ouvert .modale-boite.suit {
    transition: transform .2s ease-out, opacity .3s ease-out;
}
/* La fermeture repart vers la gauche, plus vite : on ne fait pas
   attendre quelqu'un qui veut partir. */
.modale-offre:not(.ouvert) .modale-boite {
    transition: transform .24s ease-in, opacity .2s ease-in;
}

/* ─── Passage d'une offre à l'autre sans refermer ───
   La carte sort par la droite, puis la suivante revient par la gauche. */
.modale-boite.sort-droite {
    opacity: 0;
    transform: translateX(80px) rotateY(14deg) scale(.94);
    transition: transform .22s ease-in, opacity .2s ease-in;
}
.modale-boite.sort-gauche {
    opacity: 0;
    transform: translateX(-80px) rotateY(-14deg) scale(.94);
    transition: transform .22s ease-in, opacity .2s ease-in;
}
/* Les deux positions d'entrée : posées sans animation, puis retirées
   pour que la carte glisse jusqu'à sa place. */
.modale-boite.entre-gauche {
    opacity: 0;
    transform: translateX(-80px) rotateY(-14deg) scale(.94);
    transition: none;
}
.modale-boite.entre-droite {
    opacity: 0;
    transform: translateX(80px) rotateY(14deg) scale(.94);
    transition: none;
}

/* ─── Pied de la carte : appel à l'action + navigation ─── */
.modale-pied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}

.modale-nav { display: flex; align-items: center; gap: 12px; }

.modale-fleche {
    width: 38px; height: 38px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .05);
    border: 1px solid #55534f;
    border-radius: 50%;
    color: var(--gris-texte);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    font-family: var(--texte);
    transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease;
}
.modale-fleche:hover {
    color: var(--noir-fond);
    background: var(--jaune);
    border-color: var(--jaune);
    transform: scale(1.08);
}
.modale-fleche:focus-visible { outline: 2px solid var(--jaune); outline-offset: 3px; }

.modale-compteur {
    color: var(--gris-texte);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: 1px;
    min-width: 42px;
    text-align: center;
}

/* La grille de tuiles à l'intérieur de la modale — même motif que
   le fond des espaces membres, en un peu plus serré et plus marqué. */
.modale-tuiles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background-image:
        linear-gradient(to right,  rgba(247, 241, 237, .055) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(247, 241, 237, .055) 1px, transparent 1px);
    background-size: 48px 48px;
    /* Elle s'efface vers le bas pour ne pas gêner la lecture */
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 30%, transparent 85%);
            mask-image: linear-gradient(to bottom, #000 0%, #000 30%, transparent 85%);
}

.modale-contenu {
    position: relative;
    z-index: 1;
    padding: 40px 44px 38px;
    overflow-y: auto;                 /* c'est ici qu'on défile désormais */
    transform-style: preserve-3d;
}

.detail-fermer {
    position: absolute;
    top: 16px; right: 18px;
    z-index: 2;
    background: rgba(255, 255, 255, .06);
    border: 1px solid #55534f;
    color: var(--gris-texte);
    font-size: 1rem;
    line-height: 1;
    width: 34px; height: 34px;
    display: grid;
    place-items: center;
    cursor: pointer;
    border-radius: 50%;
    transition: color .2s ease, background .2s ease, border-color .2s ease;
}
.detail-fermer:hover { color: var(--noir-fond); background: var(--jaune); border-color: var(--jaune); }
.detail-fermer:focus-visible { outline: 2px solid var(--jaune); outline-offset: 3px; }

/* Les couches : chacune remonte vers le lecteur d'une hauteur différente,
   ce qui crée le relief quand la carte pivote. */
.detail-tete      { transform: translateZ(18px); }
.detail-colonnes  { transform: translateZ(10px); }
.modale-pied      { transform: translateZ(22px); }
.detail-fermer    { transform: translateZ(26px); }

.detail-surtitre {
    display: block;
    color: var(--gris-texte);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.detail-tete h3 {
    color: var(--jaune);
    font-size: 1.75rem;
    margin: 0 0 12px;
    padding-right: 40px;
}
.detail-tete p {
    color: var(--gris-texte);
    margin: 0 0 30px;
    max-width: 62ch;
    line-height: 1.75;
}

.detail-colonnes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 30px;
    margin-bottom: 32px;
    padding-top: 26px;
    border-top: 1px solid rgba(247, 241, 237, .10);
}
.detail-bloc { display: flex; flex-direction: column; }

.detail-cle {
    color: var(--gris-texte);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.detail-bloc p  { color: var(--blanc); margin: 0; font-size: .95rem; line-height: 1.6; }
.detail-bloc ul { list-style: none; padding: 0; margin: 0; }
.detail-bloc li {
    position: relative;
    color: var(--blanc);
    font-size: .95rem;
    padding: 7px 0 7px 24px;
}
/* Une coche jaune : on énumère ce que la marque reçoit */
.detail-bloc li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--jaune);
    font-weight: 700;
}

@media (max-width: 560px) {
    .modale-offre   { padding: 14px; }
    .modale-contenu { padding: 32px 22px 28px; }
    .detail-tete h3 { font-size: 1.4rem; }
}

@media (prefers-reduced-motion: reduce) {
    .modale-offre, .modale-boite, .service-fleche, .carte-service {
        transition-duration: .01ms !important;
    }
}
/* ============================================================
   BOUTON « LIQUIDE » — CTA principal
   ============================================================
   Reprise en CSS de l'idée du composant d'origine : trois couches
   empilées en perspective — un anneau animé, une pastille sombre
   par-dessus, le texte au-dessus encore. Le shader WebGL de
   l'original est remplacé par un dégradé conique qui tourne, en
   jaune Club Algo plutôt qu'en chrome.
   ============================================================ */

/* L'angle du dégradé doit être animable : sans @property, un navigateur
   ne sait pas interpoler une variable et l'anneau resterait figé. */
@property --angle-liquide {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

.btn-liquide {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 17px 38px;
    border: 0;
    border-radius: 100px;
    background: none;
    cursor: pointer;
    overflow: hidden;                    /* pour contenir l'onde du clic */
    isolation: isolate;

    font-family: var(--texte);
    font-weight: 800;
    font-size: .95rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    text-decoration: none;
    color: var(--blanc);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .55);

    transition: transform .18s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow .25s ease,
                color .25s ease;

    /* Couche 3 (au fond) : l'ombre portée qui décolle le bouton */
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .35),
                0 18px 26px rgba(0, 0, 0, .30),
                0 6px 10px rgba(0, 0, 0, .22);
}

/* Couche 1 : l'anneau liquide. Il dépasse de 2px de tous les côtés,
   et la pastille sombre vient le recouvrir au centre. */
.btn-liquide::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    z-index: -2;
    background: conic-gradient(
        from var(--angle-liquide),
        #6b6300 0deg,
        var(--jaune) 55deg,
        var(--accent-pale) 90deg,
        var(--jaune) 130deg,
        var(--accent-sombre) 190deg,
        var(--jaune) 250deg,
        var(--accent-pale) 290deg,
        #6b6300 360deg
    );
    animation: liquide-tourne 5s linear infinite;
}

/* Couche 2 : la pastille sombre, 2px plus petite — c'est elle qui
   transforme le dégradé en un simple liseré lumineux. */
.btn-liquide::after {
    content: '';
    position: absolute;
    inset: 2px;
    border-radius: inherit;
    z-index: -1;
    background: linear-gradient(180deg, #2a2a28 0%, #111110 100%);
    transition: background .25s ease;
}

@keyframes liquide-tourne {
    to { --angle-liquide: 360deg; }
}

/* Au survol : le liseré s'accélère, le halo jaune apparaît */
.btn-liquide:hover {
    color: var(--jaune);
    transform: translateY(-2px);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .35),
                0 10px 20px rgba(0, 0, 0, .28),
                0 0 26px rgba(var(--accent-rgb), .22);
}
.btn-liquide:hover::before { animation-duration: 1.8s; }
.btn-liquide:hover::after  { background: linear-gradient(180deg, #333330 0%, #1a1a18 100%); }

/* À l'appui : le bouton s'enfonce */
.btn-liquide:active {
    transform: translateY(1px) scale(.985);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .5),
                0 2px 4px rgba(0, 0, 0, .3);
}
.btn-liquide:active::after {
    background: linear-gradient(180deg, #1a1a18 0%, #0d0d0c 100%);
}

.btn-liquide:focus-visible {
    outline: 2px solid var(--jaune);
    outline-offset: 4px;
}

/* L'onde au clic, posée par le script à l'endroit exact du curseur */
.btn-liquide .onde {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0);
    background: radial-gradient(circle, rgba(var(--accent-rgb), .45) 0%, rgba(var(--accent-rgb), 0) 70%);
    animation: liquide-onde .6s ease-out forwards;
}
@keyframes liquide-onde {
    to { transform: translate(-50%, -50%) scale(5); opacity: 0; }
}

/* Repli : sans @property, l'anneau ne tournerait pas. On fait alors
   glisser un dégradé linéaire, ce qui donne un balayage métallique. */
@supports not (background: conic-gradient(from var(--angle-liquide), red, blue)) {
    .btn-liquide::before {
        background: linear-gradient(100deg, var(--accent-sombre), var(--jaune), var(--accent-pale), var(--jaune), var(--accent-sombre));
        background-size: 300% 100%;
        animation: liquide-balaye 4s linear infinite;
    }
    @keyframes liquide-balaye {
        to { background-position: 300% 0; }
    }
}

@media (prefers-reduced-motion: reduce) {
    .btn-liquide::before { animation: none; background: var(--jaune); }
    .btn-liquide, .btn-liquide .onde { transition: none; animation: none; }
}

/* ============================================================
   RANGÉE DE RÉSEAUX (pied de page)
   ============================================================
   Une icône apparaît au-dessus du libellé survolé. Chaque icône
   gère sa propre transition : quand le curseur passe d'un lien au
   suivant, la sortante s'efface pendant que l'entrante apparaît,
   chacune restant à sa place. Aucun JavaScript.
   ============================================================ */

.reseaux-rangee {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;
    gap: 42px;
    /* ① On réserve la place de l'icône en permanence : sans ce padding,
       la rangée sursauterait à chaque survol. Il doit valoir au moins
       64px (hauteur de l'icône) + 6px (écart) + une marge de confort. */
    padding: 78px 20px 10px;
    border-top: 1px solid var(--gris-fonce);
    margin-top: 40px;
}

.rs-lien {
    position: relative;        /* repère de positionnement de son icône */
    display: inline-block;
    text-align: center;
    text-decoration: none;
    font-family: var(--texte);
    font-size: 17px;
    font-weight: 400;
    color: #8a8a8a;
    cursor: pointer;
    transition: color 150ms ease, font-weight 150ms ease;
}
.rs-lien:hover,
.rs-lien:focus-visible { color: #ffffff; font-weight: 600; }
.rs-lien:focus-visible { outline: 2px solid var(--jaune); outline-offset: 6px; border-radius: 4px; }

/* Le libellé passe en gras au survol, ce qui l'élargirait et ferait
   bouger toute la rangée. On réserve donc dès le départ la largeur
   de la version grasse, dans une copie invisible. */
.rs-lien::after {
    content: attr(data-nom);
    display: block;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    font-weight: 600;
    pointer-events: none;
}

.rs-icone {
    /* ② L'icône est centrée sur SON libellé et posée juste au-dessus.
       Le centrage passe par margin-left plutôt que par translateX,
       pour laisser le transform entièrement à l'animation. */
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    margin-left: -32px;
    width: 64px;
    height: 64px;
    border-radius: 16px;

    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--noir-fond);
    border: 1px solid #3a3a38;
    color: var(--jaune);
    pointer-events: none;

    /* ③ L'effet lui-même : au repos l'icône est effacée, un peu plus bas
       et un peu plus petite. Ajuster ici la distance de montée (6px) et
       les durées (180ms / 140ms). */
    opacity: 0;
    transform: translateY(6px) scale(0.85);
    transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
                opacity   140ms cubic-bezier(0.22, 1, 0.36, 1);
}
.rs-icone svg { width: 32px; height: 32px; display: block; }

/* ─── Logos en volume ───
   La bande contient 25 rendus du logo, de -34° à +34°, côte à côte.
   On la fait défiler par pas d'une image : le logo bascule, sans
   aucune bibliothèque 3D ni WebGL — juste une image de fond.
   --rs-images doit valoir exactement IMAGES dans outils/fbx-rendu.php,
   et --rs-milieu la moitié de ce nombre (l'image de face). */
.rs-icone.rs-3d {
    --rs-images: 25;
    --rs-milieu: 12;
    --rs-taille: 64px;
    background-color: transparent;
    border: 0;
    background-repeat: no-repeat;
    background-size: calc(var(--rs-taille) * var(--rs-images)) var(--rs-taille);
    /* Au repos : l'image du milieu, c'est-à-dire le logo bien de face. */
    background-position: calc(-1 * var(--rs-milieu) * var(--rs-taille)) 0;
}
/* La bascule ne joue qu'au survol : rien ne s'anime en fond de page.
   « alternate » rejoue la bande à l'envers pour le retour — on ne
   stocke donc que l'aller, et l'image pèse deux fois moins lourd. */
.rs-lien:hover .rs-icone.rs-3d,
.rs-lien:focus-visible .rs-icone.rs-3d {
    /* 1,4 s pour 25 images : environ 18 images par seconde, l'œil ne
       distingue plus les paliers. */
    animation: rs-bascule 1.4s steps(var(--rs-images)) infinite alternate;
}
@keyframes rs-bascule {
    from { background-position: 0 0; }
    to   { background-position: calc(-1 * var(--rs-taille) * var(--rs-images)) 0; }
}

.rs-lien:hover .rs-icone,
.rs-lien:focus-visible .rs-icone {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Sans pointeur, il n'y a pas de survol : les icônes restent visibles. */
@media (hover: none) {
    .rs-icone { opacity: 1; transform: none; }
}

/* Mouvement réduit : on garde le fondu, on retire montée et zoom. */
@media (prefers-reduced-motion: reduce) {
    .rs-lien:hover .rs-icone.rs-3d,
    .rs-lien:focus-visible .rs-icone.rs-3d { animation: none; }
    .rs-icone {
        transform: none;
        transition: opacity 140ms ease;
    }
    .rs-lien:hover .rs-icone,
    .rs-lien:focus-visible .rs-icone { transform: none; }
}

/* De 320px à 1920px : on resserre simplement l'écart sur petit écran. */
@media (max-width: 420px) {
    .reseaux-rangee { gap: 26px; padding-top: 72px; }
    .rs-lien { font-size: 15px; }
}