/* =====================================================
   YAKTU — MAIN CSS
   Architecture claire, modulaire et maintenable
   ===================================================== */

/* =====================================================
   SOMMAIRE
   =====================================================

   1. DESIGN TOKENS & VARIABLES GLOBALES
      1.1 Couleurs — fonds
      1.2 Couleurs — texte
      1.3 Couleurs — identité & accents
      1.4 Effets visuels (glass, blur)
      1.5 Rayons (border-radius)
      1.6 Ombres
      1.7 Layout & dimensions structurelles
      1.8 Transitions & animations

   2. RESET & BASE HTML
      2.1 Reset global
      2.2 Base HTML
      2.3 Base body

   3. ÉLÉMENTS NATIFS
      3.1 Liens
      3.2 Listes
      3.3 Images
      3.4 Boutons HTML natifs

   4. TYPOGRAPHIE GLOBALE
      4.1 Titres
      4.2 Paragraphes
      4.3 Textes secondaires
      4.4 Éléments inline

   5. LAYOUT GLOBAL
      5.1 Structure principale
      5.2 Wrappers de contenu
      5.3 Grille principale (desktop)
      5.4 Footer global
      5.5 Ajustements responsive layout

   6. HEADER & NAVIGATION
      6.1 Header sticky
      6.2 Conteneur interne
      6.3 Logo

   7. HERO (GLOBAL)
      7.1 Conteneur hero
      7.2 Overlay
      7.3 Contenu interne
      7.4 Texte — titres & sous-titres
      7.5 Hero — titre éditorial
      7.6 Hero — citation
      7.7 Hero — mobile

   8. COMPOSANTS UI DE BASE
      8.1 Bouton générique
      8.2 Card générique
      8.3 Glass block

   9. BACKGROUND & EFFETS VISUELS
      9.1 Halos décoratifs
      9.2 Animations de fond
      9.3 Désactivation performance mobile

   10. FOOTER (VERSION SIMPLE ACTUELLE)
      10.1 Conteneur footer
      10.2 Contenu interne
      10.3 Texte
      10.4 Liens
      10.5 Ajustements mobile

   11. ARTICLE — LECTURE LONGUE
      11.1 Conteneur article
      11.2 Header article
      11.2 bis Image de couverture
      11.3 Contenu texte
      11.4 Citations éditoriales
      11.5 Aside & encadrés
      11.6 Ajustements mobile

   12. ARTICLE — INTERACTIONS
      12.1 Conteneur d’actions
      12.2 Boutons neutres
      12.3 Icônes
      12.4 Actions Yak
      12.5 Hover discret

   13. ARTICLE — SOURCES
      13.1 Conteneur
      13.2 Titre & liste
      13.3 Version repliable (details / summary)
      13.4 Ajustements mobile

   14. ARTICLE — PÉDAGOGIE & CONNEXES
      14.1 Comprendre la médianalyse
      14.2 Tags
      14.3 Articles connexes

   15. HOME — STRUCTURE GÉNÉRALE
      15.1 Bloc jour
      15.2 En-tête de date
      15.3 Jours antérieurs

   16. HOME — MINI-CARDS
      16.1 Grille des listes
      16.2 Mini-card — base
      16.3 Grille interne
      16.4 Colonne texte
      16.5 Meta (rubrique)
      16.6 Titre
      16.7 Bas de carte
      16.8 Colonne image
      16.9 Variante médianalyse
      16.10 Variante Yak
      16.11 Variante chiffre du jour
      16.12 Variante pépites

   17. HOME — JOURS REPLIABLES
      17.1 Conteneur
      17.2 Bloc <details>
      17.3 Summary cliquable
      17.4 État ouvert
      17.5 Ajustements mobile


   19. RESPONSIVE — MOBILE FIRST
      19.1 Mobile
      19.2 Tablette
      19.3 Desktop
      19.4 Desktop large
      19.5 Ajustements transverses

   20. MICRO-AJUSTEMENTS & PATCHES
      Correctifs temporaires / à refactorer

   ===================================================== */


/* =====================================================
   1. DESIGN TOKENS & VARIABLES GLOBALES
   Socle visuel du système YAKTU
   Mobile = référence canon
   ===================================================== */

:root {

    /* =================================================
       1.1 COULEURS — FONDS
       ================================================= */

    --bg-global:
        linear-gradient(
            to bottom,
            #3a4a73 0%,
            #2c3b63 20%,
            #1e2a4a 45%,
            #141c34 70%,
            #0e1426 100%
        );

    --bg-glass: rgba(255, 255, 255, 0.06);
    --bg-glass-strong: rgba(255, 255, 255, 0.10);


    /* =================================================
       1.2 COULEURS — TEXTE
       ================================================= */

    --text-main: #e6ebf2;
    --text-soft: #cfd6e6;
    --text-muted: #9aa4bf;


    /* =================================================
       1.3 COULEURS — IDENTITÉ & ACCENTS
       ================================================= */

    --color-primary: #16213a;
    --color-accent: #2da3e0;

    /* Accents sémantiques */
    --yak-blue: #5c6bc0;
    --chiffre-blue: #4fc3f7;

    /* Métaux / Pépite */
    --gold: #d4af37;
    --silver: #b0bec5;
    --bronze: #cd7f32;


    /* =================================================
       1.4 EFFETS VISUELS (CANON MOBILE)
       ================================================= */

    --blur-glass: blur(6px);
    --border-glass: 1px solid rgba(255, 255, 255, 0.12);


    /* =================================================
       1.5 RAYONS (MOBILE-FIRST)
       ================================================= */

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;


    /* =================================================
       1.6 OMBRES (MOBILE)
       ================================================= */

    --shadow-soft: 0 6px 16px rgba(0, 0, 0, 0.28);
    --shadow-hover: 0 10px 22px rgba(0, 0, 0, 0.38);


    /* =================================================
       1.7 LAYOUT & DIMENSIONS STRUCTURELLES
       ================================================= */

    --header-height: 64px;
    --content-max-width: 1100px;


    /* =================================================
       1.8 TRANSITIONS & ANIMATIONS
       ================================================= */

    --t-fast: 0.15s ease;
    --t-base: 0.3s ease;
}


/* =====================================================
   SURCHARGE VISUELLE DESKTOP (OPTIONNELLE)
   ===================================================== */

@media (min-width: 1024px) {
    :root {
        --blur-glass: blur(10px);

        --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.35);
        --shadow-hover: 0 16px 40px rgba(0, 0, 0, 0.5);
    }
}


/* =====================================================
   2. RESET & BASE HTML (MOBILE-CANON)
   Neutralisation navigateur + socle document
   ===================================================== */


/* =================================================
   2.1 RESET GLOBAL
   ================================================= */

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


/* =================================================
   2.2 BASE HTML — DÉCOR FIXE
   ================================================= */

html {
    height: 100%;
    font-size: 16px;

    /* 🎯 LE GRADIENT VIT ICI */
    background: var(--bg-global);
    background-attachment: fixed;
}

/* Halos décoratifs globaux — FIXES */
html::before,
html::after {
    content: "";
    position: fixed;
    inset: -20%;
    z-index: -1;
    pointer-events: none;
}

html::before {
    background:
        radial-gradient(
            1200px 600px at 50% -10%,
            rgba(140, 190, 255, 0.25),
            transparent 70%
        );
}

html::after {
    background:
        radial-gradient(
            600px 600px at 80% 70%,
            rgba(92, 107, 192, 0.18),
            transparent 70%
        );
}

/* =================================================
   2.3 BASE BODY — CONTENU SCROLLABLE
   ================================================= */

body {
    margin: 0;
    min-height: 100vh;

    font-family: system-ui, -apple-system, BlinkMacSystemFont,
                 "Segoe UI", Roboto, Ubuntu, sans-serif;

    line-height: 1.7;
    color: var(--text-main);

    background: transparent; /* 🔑 CRITIQUE */
    overflow-x: hidden;
}

/* =====================================================
   3. ÉLÉMENTS NATIFS (MOBILE-CANON)
   - comportements neutres
   - interactions sobres
   ===================================================== */


/* =================================================
   3.1 LIENS
   ================================================= */

a {
    color: var(--color-accent);
    text-decoration: none;

    transition: color var(--t-fast);
}

/* Hover discret (toléré desktop, neutre mobile) */
a:hover {
    color: #7ecbff;
}


/* =================================================
   3.2 LISTES
   ================================================= */

/*
   Padding volontairement serré
   pour correspondre au flux mobile
*/
ul,
ol {
    padding-left: 1.1rem;
}

li {
    margin: 0;
}


/* =================================================
   3.3 IMAGES
   ================================================= */

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


/* =================================================
   3.4 BOUTONS HTML NATIFS
   (hors composants .button)
   ================================================= */

button {
    font-family: inherit;
    color: inherit;
    background: none;
    border: none;

    /* Neutralisation mobile */
    -webkit-tap-highlight-color: transparent;
}


/* =====================================================
   4. TYPOGRAPHIE GLOBALE (MOBILE-CANON)
   - hiérarchie pensée pour le flux mobile
   - aucune adaptation desktop
   ===================================================== */


/* =================================================
   4.1 TITRES
   ================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--text-main);
    font-weight: 500;
    line-height: 1.35;
    margin: 0 0 0.6rem;
}

/* Titre principal (article / hero éditorial) */
h1 {
    font-size: 1.75rem;
}

/* Intertitres */
h2 {
    font-size: 1.3rem;
}

h3 {
    font-size: 1.1rem;
}

h4 {
    font-size: 0.95rem;
}

h5 {
    font-size: 0.85rem;
}

h6 {
    font-size: 0.75rem;
    color: var(--text-muted);
}


/* =================================================
   4.2 PARAGRAPHES
   ================================================= */

p {
    color: var(--text-soft);
    margin: 0 0 0.95rem;
}


/* =================================================
   4.3 TEXTES SECONDAIRES
   ================================================= */

.text-muted {
    color: var(--text-muted);
    font-size: 0.85rem;
}


/* =================================================
   4.4 ÉLÉMENTS INLINE
   ================================================= */

strong {
    font-weight: 600;
    color: var(--text-main);
}

em {
    font-style: italic;
}

small {
    font-size: 0.8em;
    color: var(--text-muted);
}


/* =====================================================
   5. LAYOUT GLOBAL — CANONIQUE STABLE
   ===================================================== */


.site-main {
    position: relative;
    width: 100%;

    /* ✅ compensation du header fixed */
    padding-top: var(--header-height);

    /* ✅ respiration mobile canon */
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-bottom: 1.5rem;
}

@media (min-width: 1280px) {
    .site-main {
        padding-left: 0;
        padding-right: 0;
    }
}


/* =====================================================
   6. HEADER & NAVIGATION (MOBILE-CANON)
   - header sticky
   - structure identique tous supports
   - logo centré
   ===================================================== */


/* =================================================
   6.1 HEADER STICKY — MOBILE CANON
   ================================================= */

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;

    height: var(--header-height);

    background: rgba(14, 22, 40, 0.75);

    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}


/* =================================================
   6.2 CONTENEUR INTERNE (FULLBLEED MOBILE)
   ================================================= */

.header-inner {
    height: 100%;

    /* Full-bleed basé sur le padding du main */
    margin-left: calc(-1 * 1.25rem);
    margin-right: calc(-1 * 1.25rem);
    width: calc(100% + 2.5rem);

    padding: 0 1.25rem;

    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
}


/* =================================================
   6.3 ZONES GAUCHE / CENTRE / DROITE
   (prêtes pour évolutions futures)
   ================================================= */

.header-left,
.header-center,
.header-right {
    display: flex;
    align-items: center;
}

.header-left {
    justify-content: flex-start;
}

.header-center {
    justify-content: center;
}

.header-right {
    justify-content: flex-end;
}


/* =================================================
   6.4 LOGO
   ================================================= */

.header-logo {
    height: 34px;
    display: block;
}

/* =================================================
   6.5 HEADER ACTION BUTTONS (MOBILE / TABLETTE)
   Burger + Fil Info
   ================================================= */

.burger-btn,
.filinfo-btn {
    font-size: 1.5rem;
    line-height: 1;

    color: var(--text-main);
    background: none;
    border: none;

    cursor: pointer;

    padding: 0.35rem 0.6rem;
    border-radius: 6px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    transition:
        opacity var(--t-fast),
        background 0.2s ease,
        transform 0.15s ease;
}

/* Hover léger */
.burger-btn:hover,
.filinfo-btn:hover {
    opacity: 0.9;
    background: rgba(255,255,255,0.05);
}

/* Press effect */
.burger-btn:active,
.filinfo-btn:active {
    transform: scale(0.95);
}

/* État actif (drawer ouvert) */
.burger-btn[aria-expanded="true"],
.filinfo-btn[aria-expanded="true"] {
    background: rgba(var(--color-accent-rgb), 0.18);
}

/* Desktop → boutons masqués */
@media (min-width: 1280px) {
    .burger-btn,
    .filinfo-btn {
        display: none;
    }
}

/* =====================================================
   7. HERO (MODULE HERO)
   - fond natif du site
   - icône à gauche
   - titre + tagline à droite
   ===================================================== */


/* =================================================
   7.1 CONTENEUR HERO
   ================================================= */

.hero {
    position: relative;
    width: auto;

    margin-top: 1.2rem;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 2rem;

    padding: 0;
    text-align: left;

    border: none;
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
    overflow: visible;
}


/* =================================================
   7.2 CONTENU HERO
   ================================================= */

.hero-content {
    max-width: 42rem;
    margin: 0 auto;
}

.hero-content-inline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}


/* =================================================
   7.3 ICÔNE
   ================================================= */

.hero-icon-wrap {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-icon {
    display: block;
    width: 56px;
    height: auto;
}


/* =================================================
   7.4 BLOC TEXTE
   ================================================= */

.hero-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}


/* =================================================
   7.5 TITRE
   ================================================= */

.hero-title {
    margin: 0 0 0.25rem;

    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.2;

    color: var(--text-main);
    letter-spacing: 0.01em;
}


/* =================================================
   7.6 TAGLINE
   ================================================= */

.hero-tagline {
    margin: 0;

    font-size: 1.05rem;
    line-height: 1.5;

    color: var(--color-accent);
    opacity: 0.98;
}


/* =================================================
   7.7 DESCRIPTION
   ================================================= */

.hero-description {
    display: none;
}


/* =================================================
   7.8 ESPACEMENT AVEC LE CONTENU
   ================================================= */

.hero + .day-block {
    margin-top: 0.75rem;
}


/* =================================================
   7.9 RESPONSIVE
   ================================================= */

@media (max-width: 768px) {
    .hero-content-inline {
        gap: 0.8rem;
    }

    .hero-icon {
        width: 56px;
    }

    .hero-title {
        font-size: 1.4rem;
    }

    .hero-tagline {
        font-size: 0.85rem;
    }
}

/* =====================================================
   8. COMPOSANTS UI DE BASE
   - boutons
   - cards génériques
   - blocs neutres
   ===================================================== */


/* =================================================
   8.1 BOUTON GÉNÉRIQUE (MOBILE = RÉFÉRENCE)
   ================================================= */

.button {
    display: inline-block;

    padding: 0.7rem 1.5rem;

    background: rgba(255, 255, 255, 0.08);
    border: var(--border-glass);
    border-radius: var(--radius-sm);

    color: var(--text-main);
    font-weight: 500;

    transition:
        background var(--t-fast),
        color var(--t-fast),
        transform var(--t-fast);
}

.button:hover {
    background: rgba(255, 255, 255, 0.14);
    color: var(--color-accent);
    transform: translateY(-1px);
}


/* =================================================
   8.2 CARD GÉNÉRIQUE (STRUCTURE NEUTRE)
   ================================================= */

.ui-card {
    position: relative;

    background: rgba(255, 255, 255, 0.04);
    border: var(--border-glass);
    border-radius: var(--radius-md);

    padding: 1.25rem;
}


/* =================================================
   8.3 GLASS BLOCK (ENCADRÉ ÉDITORIAL)
   ================================================= */

.glass-block {
    background: rgba(255, 255, 255, 0.06);
    border: var(--border-glass);
    border-radius: var(--radius-md);

    padding: 1.5rem;
}


/* =====================================================
   9. BACKGROUND GLOBAL — CONTINU & STABLE
   ===================================================== */


/* =====================================================
   10. FOOTER — STRUCTURE PRODUIT
   Mobile-first / 3 colonnes desktop
   ===================================================== */

.site-footer {
    margin-top: 4rem;
    padding: 3rem 1.5rem 2.5rem;
    background: rgba(255,255,255,0.03);
    border-top: 1px solid rgba(255,255,255,0.08);
}

/* CONTAINER */
.footer-inner {
    max-width: 1200px;
    margin: 0 auto;

    display: flex;
    flex-direction: column;
    gap: 2.8rem;
}

/* COLONNES */
.footer-col {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* TITRES */
.footer-title {
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-soft);
    margin-bottom:0.35rem;
}

/* TEXTE */
.footer-text-small {
    font-size: 0.82rem;
    color: var(--text-muted);
}

/* PILLS INSTALL */
.footer-pill {
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.18);
    font-size: 0.82rem;
    text-decoration: none;
    color: var(--text-main);
    transition: background 0.2s ease;
}

.footer-pill:hover {
    background: rgba(255,255,255,0.08);
}

.notif-toggle {
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    opacity: 0.6;
    transition: all 0.2s ease;
}

.notif-toggle.active {
    opacity: 1;
    transform: scale(1.1);
}

/* SOCIALS */
.footer-socials {
    display: flex;
    gap: 1rem;
}

.footer-social img {
    width: 22px;
    height: 22px;
    opacity: 0.7;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.footer-social:hover img {
    opacity: 1;
    transform: translateY(-2px);
}

/* FORMS */
.footer-form {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.footer-form input,
.footer-form textarea {
    padding: 0.65rem 0.75rem;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.05);
    color: var(--text-main);
    font-size: 0.85rem;
}

.footer-form button {
    padding: 0.55rem;
    border-radius: 8px;
    border: none;
    background: var(--color-accent);
    color: white;
    font-size: 0.85rem;
    cursor: pointer;
}

.footer-install-help{
    margin-top:0.75rem;
    padding:0.7rem 0.85rem;
    font-size:0.8rem;
    line-height:1.45;
    color:var(--text-soft);
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.10);
    border-radius:10px;
}



/* =====================================================
   INFORMATIONS (COLONNE 3)
   ===================================================== */

.footer-links-vertical {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.footer-links-vertical a {
    font-size: 0.85rem;
    text-decoration: none;
    color: var(--text-muted);
    transition: color 0.2s ease, transform 0.2s ease;
}

.footer-links-vertical a:hover {
    color: var(--color-accent);
    transform: translateX(2px);
}

/* GROUPES DE LIENS */

.footer-links-group{
display:flex;
flex-direction:column;
gap:0.55rem;
margin-bottom:1.8rem;
}

.footer-col-right .footer-links-group:last-child{
margin-bottom:0;
}

/* sous-titres sections */

.footer-subtitle{

font-size:0.72rem;
letter-spacing:0.08em;
text-transform:uppercase;

color:var(--text-soft);

margin-bottom:0.2rem;

opacity:0.85;

}

/* =====================================================
   BOTTOM
   ===================================================== */

.footer-bottom {
    grid-column: 1 / -1;
    margin-top: 3rem;
    padding-top: 2rem;

    border-top: 1px solid rgba(255,255,255,0.08);

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

/* logo cliquable */

.footer-logo-link{

display:inline-flex;

transition:
opacity .2s ease,
transform .2s ease;

}

.footer-logo-link:hover{

opacity:0.9;
transform:translateY(-1px);

}

.footer-bottom img {
    width: 110px;
}

.footer-bottom p {
    font-size: 0.75rem;
    text-align: center;
    max-width: 400px;
}

/* =====================================================
   FOOTER CONTACT FORM (relation Yak)
   ===================================================== */

.footer-contributor-type{
display:flex;
justify-content:center;
gap:1rem;

font-size:0.8rem;
color:var(--text-soft);
}

.footer-contributor-type input{
margin-right:0.25rem;
}


/* organisation field */

.footer-organization-field{
margin-top:0.3rem;
}

.hidden-field{
display:none;
}


/* newsletter switch */

.footer-newsletter-toggle{
display:flex;
align-items:center;
justify-content:center;
gap:0.6rem;

font-size:0.82rem;
color:var(--text-soft);

margin-top:0.3rem;
}

.footer-newsletter-toggle input{
display:none;
}

.newsletter-switch{
width:34px;
height:18px;

background:rgba(255,255,255,0.2);

border-radius:999px;

position:relative;

transition:background .25s ease;
}

.newsletter-switch::after{
content:"";

position:absolute;

top:2px;
left:2px;

width:14px;
height:14px;

border-radius:50%;

background:white;

transition:transform .25s ease;
}

.footer-newsletter-toggle input:checked + .newsletter-switch{
background:var(--color-accent);
}

.footer-newsletter-toggle input:checked + .newsletter-switch::after{
transform:translateX(16px);
}


/* =====================================================
   FOOTER MESSAGE BOX
   ===================================================== */

.footer-message-box{

margin-top:0.5rem;

display:flex;
flex-direction:column;
gap:0.6rem;

}


/* summary bouton */

.footer-message-box summary{

display:block;

padding:0.55rem 0.75rem;

border-radius:8px;

border:1px solid rgba(255,255,255,0.14);

background:rgba(255,255,255,0.05);

font-size:0.82rem;
color:var(--text-soft);

cursor:pointer;

transition:
background .2s ease,
border-color .2s ease;

list-style:none;

}


/* enlever triangle natif */

.footer-message-box summary::-webkit-details-marker{
display:none;
}


/* hover */

.footer-message-box summary:hover{

background:rgba(255,255,255,0.08);
border-color:rgba(255,255,255,0.2);

}


/* quand ouvert */

.footer-message-box[open] summary{

border-color:var(--color-accent);
color:var(--color-accent);

}


/* champs message */

.footer-message-box input,
.footer-message-box textarea{

width:100%;

}


/* textarea confortable */

.footer-message-box textarea{

min-height:140px;

resize:vertical;

line-height:1.5;

}


/* submit button */

.footer-submit{
margin-top:0.5rem;

padding:0.6rem;

border-radius:8px;

border:none;

background:var(--color-accent);
color:white;

font-size:0.85rem;

cursor:pointer;

transition:
transform .15s ease,
box-shadow .15s ease;
}

.footer-submit:hover{

transform:translateY(-1px);

box-shadow:0 6px 14px rgba(0,0,0,0.25);

}

/* DESKTOP */

@media (min-width: 1024px) {

    .footer-inner {
        display: grid;
        grid-template-columns: 1fr 1.2fr 1fr;
        align-items: start;
    }

    .footer-col-left {
        justify-self: start;
        text-align: left;
    }

    .footer-col-interaction {
        justify-self: center;
        text-align: center;
        max-width: 520px;
        width: 100%;
    }

    .footer-col-right {
        justify-self: end;
        text-align: right;
    }

    .footer-links-vertical {
        align-items: flex-end;
    }

    .footer-socials {
        justify-content: flex-start;
    }

    .footer-bottom {
        grid-column: 1 / -1;
        text-align: center;
    }
}

/* =========================================
   INTERACTION FORM EXTENDED
   ========================================= */

.footer-form-extended {
    gap: 0.8rem;
}

.footer-row {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.footer-row input {
    flex: 1 1 100%;
}

.footer-consent {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.footer-consent.small {
    font-size: 0.75rem;
    opacity: 0.8;
}

.footer-consent input {
    margin-top: 3px;
}

/* Desktop optimisation */

@media (min-width: 768px) {
    .footer-row input {
        flex: 1;
    }
}

@media (min-width: 1024px) {
    .footer-form-extended textarea {
        min-height: 90px;
    }
}

/* =====================================================
   FOOTER FORM FEEDBACK (message envoi)
   ===================================================== */

.footer-form-feedback{

margin-top:0.6rem;

font-size:0.82rem;

text-align:center;

min-height:1.2rem;

color:var(--text-muted);

opacity:0;

transform:translateY(4px);

transition:
opacity .25s ease,
transform .25s ease,
color .25s ease;

}

.footer-form-feedback.success,
.footer-form-feedback.error,
.footer-form-feedback.loading{

opacity:1;

transform:translateY(0);

}

.footer-form-feedback.loading{
color:var(--text-muted);
}

.footer-form-feedback.success{
color:#4fd37b;
}

.footer-form-feedback.error{
color:#ff6b6b;
}


/* =====================================================
   11. ARTICLE — LECTURE LONGUE
   - conteneur article
   - header article
   - contenu texte
   - citations
   - aside / encadrés
   ===================================================== */


/* =================================================
   11.1 CONTENEUR ARTICLE
   ================================================= */

.article-full {
    width: 100%;
    margin: 0;
    padding: 1rem 0 3rem;
}


/* =================================================
   11.2 HEADER ARTICLE
   ================================================= */

.article-header {
    margin-bottom: 2.75rem;
}

.article-meta {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:0.45rem;

    font-size:0.85rem;
    line-height:1.4;
    color:var(--text-muted);

    margin-bottom:0.6rem;
}

.article-reading-time{
    display:inline-flex;
    align-items:center;
    gap:0.45rem;

    font-size:0.85rem;
    line-height:1.4;
    color:var(--text-muted);

    margin-left:0;
}

/* icône chrono */

.reading-icon{
    width:14px;
    height:14px;

    flex-shrink:0;

    stroke:var(--text-muted);
    stroke-width:1.5;

    fill:none;
    opacity:0.8;
}

.article-header h1 {
    font-size: 2.1rem;
    line-height: 1.25;
    margin-bottom: 0.9rem;
    color: var(--text-main);
}

.article-chapeau {
    font-style: italic;
    font-size: 1.05rem;
    color: var(--text-soft);
    margin-bottom: 0;
}

/* =================================================
   11.2 BIS — IMAGE DE COUVERTURE
   ================================================= */

.article-cover {
    margin: 1.8rem 0 2.4rem;
}

.article-cover img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;

    border-radius: var(--radius-md);
    object-fit: cover;

    background: rgba(255, 255, 255, 0.04);
}

.article-cover-credit{
    margin:-1.5rem 0 1.5rem;
    font-size:0.68rem;
    line-height:1;
    color:var(--text-muted);
    opacity:0.78;
    text-align:right;
}

/* =================================================
   11.X TOGGLE ARTICLE / RÉSUMÉ
   ================================================= */

.article-view-toggle{

    display:none; /* activé via JS */

    gap:0.4rem;

    margin:0.5rem 0 0.5rem;
}

/* boutons */

.view-btn{

    padding:0.35rem 0.8rem;

    font-size:1.05rem;
    font-weight:600;

    border-radius:999px;

    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.12);

    color:var(--text-muted);

    cursor:pointer;

    transition:
        background var(--t-fast),
        color var(--t-fast),
        transform var(--t-fast);
}

/* actif */

.view-btn.is-active{

    background:rgba(var(--color-accent-rgb), 0.18);
    border-color:rgba(var(--color-accent-rgb), 0.5);

    color:var(--color-accent);
}

/* hover léger */

.view-btn:hover{
    transform:translateY(-1px);
}



/* =================================================
   11.3 CONTENU TEXTE
   ================================================= */

.article-content {
    font-size: 1.05rem;
    line-height: 1.85;
    color: var(--text-soft);
}

.article-content p {
    margin-bottom: 1.35rem;
}

.article-content h2 {
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    font-size: 1.35rem;
    color: var(--text-main);
}

.article-content h3 {
    margin-top: 2rem;
    margin-bottom: 0.8rem;
    font-size: 1.15rem;
    color: var(--text-main);
}

.article-content ul,
.article-content ol {
    margin: 1rem 0 1.5rem 1.25rem;
}

.article-content li {
    margin: 0.35rem 0;
}


/* =================================================
   11.4 CITATIONS ÉDITORIALES
   ================================================= */

.article-content blockquote {
    position: relative;

    margin: 2.5rem 0;
    padding: 1.25rem 1.5rem 1.5rem 1.75rem;

    font-style: italic;
    font-size: 1.05rem;
    line-height: 1.8;

    color: var(--text-soft);

    background: rgba(92, 107, 192, 0.08);
    border-left: 4px solid var(--yak-blue);
    border-radius: var(--radius-sm);
}

.article-content blockquote p {
    margin: 0;
}

.article-content blockquote::before {
    content: "“";
    position: absolute;
    top: -0.6rem;
    left: 0.6rem;

    font-size: 3rem;
    line-height: 1;
    color: var(--yak-blue);
    opacity: 0.35;
}

.article-content blockquote::after {
    content: "Le Yak";
    display: block;

    margin-top: 1rem;
    text-align: right;

    font-size: 0.75rem;
    font-style: normal;
    letter-spacing: 0.05em;
    text-transform: uppercase;

    color: var(--text-muted);

    background-image: url("/static/core/img/yaktu_logo_transparent.b7a9e2df8d6c.png");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 18px 18px;

    padding-right: 1.6rem;
    opacity: 0.75;
}


/* =================================================
   11.5 ASIDE & ENCADRÉS ÉDITORIAUX
   ================================================= */

.article-content aside {
    background: var(--bg-glass-strong);
    backdrop-filter: var(--blur-glass);
    border: var(--border-glass);
    border-radius: var(--radius-md);

    padding: 1.5rem;
    margin: 2.75rem 0;
}



.article-content aside h3 {
    margin-top: 0;
    margin-bottom: 0.8rem;
}

/* Alignement des listes dans l'aside */
.article-content aside ul,
.article-content aside ol {
    margin: 0.75rem 0 0;
    padding-left: 1.1rem;
}

.article-content aside li {
    margin: 0.35rem 0;
}


.article-content aside ul {
    list-style: disc;
}

.article-content aside li::marker {
    color: var(--color-accent);
}

/* =================================================
   MODE RÉSUMÉ — NEUTRALISATION DU ASIDE
   ================================================= */

.article-content.is-summary-mode aside{
    background:none;
    border:none;
    border-radius:0;
    padding:0;
    margin:0;
    backdrop-filter:none;
    box-shadow:none;
}

.article-content.is-summary-mode aside h3{
    display:none;
}

.article-content.is-summary-mode aside ul,
.article-content.is-summary-mode aside ol{
    margin:0;
    padding-left:1.1rem;
}

.article-content.is-summary-mode aside li{
    margin:0 0 0.75rem;
}

.article-content.is-summary-mode aside li:last-child{
    margin-bottom:0;
}


/* =================================================
   11.6 AJUSTEMENTS MOBILE
   ================================================= */

@media (max-width: 768px) {
    .article-full {
        padding: 0 0 2.5rem;
    }

    .article-header h1 {
        font-size: 1.85rem;
    }

    .article-content {
        font-size: 1.02rem;
        line-height: 1.85;
    }
}



/* =====================================================
   12. ARTICLE — INTERACTIONS
   - actions Yak (like / dislike)
   - icônes
   - boutons neutres
   ===================================================== */


/* =================================================
   12.1 CONTENEUR D’ACTIONS
   ================================================= */

.article-actions {
    display: flex;
    gap: 1rem;
    margin: 3rem 0 2.5rem;
}


/* =================================================
   12.2 BOUTONS NEUTRES
   ================================================= */

.article-actions button {
    background: none;
    border: none;
    padding: 0.25rem;

    cursor: pointer;

    opacity: 0.6;
    transition:
        opacity var(--t-fast),
        transform var(--t-fast);
}

.article-actions button:hover {
    opacity: 1;
    transform: translateY(-1px);
}


/* =================================================
   12.3 ICÔNES (SVG)
   ================================================= */

.action-icon {
    width: 22px;
    height: 22px;

    fill: none;
    stroke: var(--text-soft);
    stroke-width: 1.6;
}


/* =================================================
   12.4 ACTION YAK (SPÉCIFIQUE)
   ================================================= */

.action-yak {
    background: none;
    border: none;
    padding: 0.4rem;

    cursor: pointer;

    opacity: 0.65;
    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}

.action-yak img {
    width: 26px;
    height: auto;
    display: block;
}


/* Yak positif = normal */
.action-positive img {
    transform: rotate(0deg);
}

/* Yak négatif = inversé */
.action-negative img {
    transform: rotate(180deg);
}

.action-yak.is-active {
    transform: scale(1.15);
    opacity: 1;
}

.action-yak.is-active img {
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.25));
}

.action-yak:active {
    transform: scale(0.95);
}

.action-yak {
    opacity: 0.5;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.action-share {
    position: relative;
}

.action-share.is-copied::after {
    content: "Lien copié dans le presse-papier";
    position: absolute;

    top: -2.2rem;
    right: 50%;
    transform: translateX(50%) translateY(4px);

    padding: 0.3rem 0.6rem;
    font-size: 0.72rem;
    white-space: nowrap;

    background: rgba(20, 24, 45, 0.85);
    color: var(--text-soft);

    border-radius: 999px;
    opacity: 0;

    pointer-events: none;
    animation: share-toast 1.6s ease forwards;
}

@keyframes share-toast {
    0% {
        opacity: 0;
        transform: translateX(50%) translateY(6px);
    }
    15% {
        opacity: 1;
        transform: translateX(50%) translateY(0);
    }
    85% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateX(50%) translateY(-4px);
    }
}


/* =================================================
   12.5 HOVER DISCRET
   ================================================= */

.action-yak:hover {
    opacity: 1;
    transform: scale(1.05);
}



/* =====================================================
   13. ARTICLE — SOURCES
   - liste
   - version repliable (details / summary)
   ===================================================== */


/* =================================================
   13.1 CONTENEUR SOURCES
   ================================================= */

.article-sources {
    margin-top: 3rem;

    background: var(--bg-glass);
    backdrop-filter: var(--blur-glass);

    border: var(--border-glass);
    border-radius: var(--radius-md);

    padding: 1.25rem 1.5rem;
}


/* =================================================
   13.2 TITRE & LISTE
   ================================================= */

.article-sources h2 {
    margin-bottom: 1rem;
    font-size: 1.15rem;
}

.article-sources ol {
    margin-left: 1.25rem;
}

.article-sources li {
    margin: 0.6rem 0;
    color: var(--text-soft);
}

.article-sources strong {
    color: var(--text-main);
}


/* =================================================
   13.3 VERSION REPLIABLE (DETAILS / SUMMARY)
   ================================================= */

.article-sources details {
    border: none;
}


/* En-tête cliquable */
.article-sources summary {
    list-style: none;
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: space-between;

    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-main);

    user-select: none;
}


/* Supprime le triangle natif */
.article-sources summary::-webkit-details-marker {
    display: none;
}


/* Chevron discret */
.article-sources .chevron {
    font-size: 0.9rem;
    color: var(--text-muted);
    transition: transform 0.25s ease;
}


/* Rotation quand ouvert */
.article-sources details[open] .chevron {
    transform: rotate(180deg);
}


/* Respiration à l’ouverture */
.article-sources details[open] {
    margin-top: 0.75rem;
}


/* =================================================
   13.4 AJUSTEMENT MOBILE
   ================================================= */

@media (max-width: 768px) {
    .article-sources {
        padding: 1.1rem 1.25rem;
    }
}


/* =====================================================
   ARTICLE — COMPRENDRE LA MÉDIANALYSE
   ===================================================== */

.article-about-medianalyse {
    margin: 4rem 0 3rem; /* ↑ respiration avec les sources */
    padding: 2rem 2rem 2.2rem;

    background: var(--bg-glass-strong);
    backdrop-filter: var(--blur-glass);
    border: var(--border-glass);
    border-radius: var(--radius-md);

    position: relative;
}

/* ─────────────────────────────
   Titre
   ───────────────────────────── */

.article-about-medianalyse .article-section-title {
    margin: 0 0 0.5rem;

    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* ─────────────────────────────
   Sous-titre (optionnel)
   ───────────────────────────── */

.article-about-subtitle {
    margin: 0 0 0.9rem;

    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-muted);
}

/* ─────────────────────────────
   Texte pédagogique
   ───────────────────────────── */

.article-about-text {
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--text-soft);
}

.article-about-text p {
    margin: 0;
}

/* ─────────────────────────────
   CTA
   ───────────────────────────── */

.article-about-link {
    display: inline-block;
    margin-top: 1.2rem;

    padding: 0.55rem 1rem;

    background: rgba(255,255,255,0.06);
    border: var(--border-glass);
    border-radius: var(--radius-sm);

    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-main);
    text-decoration: none;

    cursor: pointer;
    transition:
        background var(--t-fast),
        color var(--t-fast),
        transform var(--t-fast);
}

.article-about-link:hover {
    background: rgba(255,255,255,0.12);
    color: var(--color-accent);
    transform: translateY(-1px);
}

/* =====================================================
   ARTICLE — SOUTENIR YAKTU
   ===================================================== */

.article-support-yaktu {

    margin: 3rem 0 3rem;
    padding: 2rem 2rem 2.2rem;

    background: var(--bg-glass-strong);
    backdrop-filter: var(--blur-glass);
    border: var(--border-glass);
    border-radius: var(--radius-md);

    position: relative;
    overflow: hidden;

}


/* légère texture lumineuse */

.article-support-yaktu::before {

    content: "";

    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(255,255,255,0.06),
            transparent 65%
        );

    pointer-events: none;

}


/* titre */

.article-support-yaktu .article-section-title {

    margin: 0 0 0.6rem;

    font-size: 1.1rem;
    font-weight: 600;

    letter-spacing: 0.01em;

}


/* texte */

.article-support-text {

    font-size: 0.95rem;
    line-height: 1.65;

    color: var(--text-soft);

}

.article-support-text p {
    margin: 0;
}


/* CTA */

.article-support-link {

    display: inline-block;

    margin-top: 1.2rem;

    padding: 0.55rem 1rem;

    background: rgba(255,255,255,0.06);
    border: var(--border-glass);

    border-radius: var(--radius-sm);

    font-size: 0.85rem;
    font-weight: 500;

    color: var(--text-main);
    text-decoration: none;

    transition:
        background var(--t-fast),
        transform var(--t-fast),
        color var(--t-fast);

}

.article-support-link:hover {

    background: rgba(255,255,255,0.12);
    color: var(--color-accent);

    transform: translateY(-1px);

}


/* =====================================================
   14. ARTICLE — TAGS & CONNEXES
   - tags
   - articles liés
   ===================================================== */


/* =================================================
   14.1 TAGS — REPÈRES THÉMATIQUES
   ================================================= */

.article-keywords-inline{
    margin-top:1.5rem;
    margin-bottom:0.25rem;

    font-size:0.82rem;
    line-height:1.6;
    color:var(--text-muted);
}

.article-keywords-inline-label{
    font-weight:600;
    color:var(--text-soft);
}

.article-keywords-inline-item{
    color:var(--text-muted);
}


/* =================================================
   14.2 ARTICLES CONNEXES — CONTINUITÉ DE LECTURE
   ================================================= */

.article-related {
    margin-top: 3rem;
}

.related-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}


/* =================================================
   14.3 MINI-CARD CONNEXE
   ================================================= */

.related-card {
    position: relative;

    background: var(--bg-glass);
    backdrop-filter: var(--blur-glass);

    border: var(--border-glass);
    border-radius: var(--radius-sm);

    padding: 1rem 1.1rem;

    transition: background var(--t-fast);
}

.related-card:hover {
    background: rgba(255, 255, 255, 0.08);
}


/* Lien pleine carte */
.related-card-link {
    position: absolute;
    inset: 0;
    z-index: 2;
}


/* =================================================
   14.4 MÉTA & TITRE
   ================================================= */

.related-meta {
    font-size: 0.7rem;
    color: var(--text-muted);

    margin-bottom: 0.35rem;
    letter-spacing: 0.04em;
}

.related-title {
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.4;

    color: var(--text-main);
}



/* =====================================================
   15. HOME — STRUCTURE GÉNÉRALE (CANON MOBILE)
   - blocs jours
   - en-têtes de date
   - structure strictement identique mobile / tablette / desktop
   ===================================================== */


/* =================================================
   15.1 BLOC JOUR
   ================================================= */

.day-block {
    margin-bottom: 2rem;
}


/* =================================================
   15.2 EN-TÊTE DE JOUR
   ================================================= */

/*
   Le header de jour est un simple repère éditorial,
   pas un titre de section “desktop”
*/
.day-header {
    margin: 1.25rem 0 0.75rem;
    text-align: center;
}


/*
   Date = repère temporel, discret, stable
*/
.day-date {
    font-size: 1.05rem;
    font-weight: 500;
    line-height: 1.4;

    color: var(--text-main);
    margin: 0;

    text-transform: capitalize;
}


/* =================================================
   15.3 JOURS ANTÉRIEURS (REGROUPEMENT)
   ================================================= */

/*
   Simple séparation verticale,
   sans logique de “section secondaire”
*/
.days-older {
    margin-top: 1.5rem;
}

/* Ancrage propre sous le header */
.day-block {
    scroll-margin-top: calc(var(--header-height) + 1rem);
}



/* =====================================================
   16. HOME — MINI CARDS
   - mini-card base
   - variantes (médianalyse, yak, chiffre, pépites)
   - objectif : look “mobile-like” sur desktop (colonne centrale)
   ===================================================== */


/* =====================================================
   16. HOME — MINI CARDS
   - flux éditorial continu
   - mobile-canon (identique sur tous supports)
   - full-bleed sans overflow
   ===================================================== */


/* =================================================
   16.1 GRILLE DES LISTES
   ================================================= */

.mini-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.65rem;

    /* Full-bleed mobile-canon */
    margin-left: -1.25rem;
    margin-right: -1.25rem;
}


/* =================================================
   16.2 MINI-CARD — BASE
   ================================================= */

.mini-card {
    position: relative;

    background: var(--bg-glass);

    border-top: 1px solid rgba(255,255,255,0.08);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    border-left: none;
    border-right: none;
    border-radius: 0;

    padding: 1rem 1.25rem;

    box-shadow: none;

    cursor: pointer;

    transition:
        background var(--t-fast),
        transform var(--t-fast);
}

/* Hover discret “presse” */
.mini-card:hover {
    background: rgba(255,255,255,0.08);
}


/* Lien pleine carte */
.mini-card-link {
    position: absolute;
    inset: 0;
    z-index: 2;
}

/* Contenu visible */
.mini-card > *:not(.mini-card-link) {
    position: relative;
    z-index: 1;
    pointer-events: none;
}


/* =================================================
   16.3 STRUCTURE INTERNE
   ================================================= */

.mini-card-grid {
    display: grid;
    grid-template-columns: 1fr 110px;
    gap: 0.75rem;
    align-items: center;
}


/* =================================================
   16.4 COLONNE TEXTE
   ================================================= */

.mini-card-content {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}


/* =================================================
   16.5 META (RUBRIQUE)
   ================================================= */

.mini-card-top {
    min-height: 1em;
    font-size: 0.72rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-muted);
}


/* =================================================
   16.6 TITRE
   ================================================= */

.mini-title {
    font-size: 1rem;
    line-height: 1.35;
    color: var(--text-main);
}


/* =================================================
   16.7 BAS DE CARTE
   ================================================= */

.mini-card-bottom {
    font-size: 0.82rem;
    color: var(--text-muted);
}

.mini-accent {
    color: var(--color-accent);
    font-weight: 600;
}


/* =================================================
   16.8 COLONNE IMAGE
   ================================================= */

.mini-card-media {
    display: flex;
    align-items: center;
    justify-content: center;
}

.mini-card-media img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;

    border-radius: 6px;
    background: rgba(255,255,255,0.04);
}


/* =================================================
   16.9 VARIANTE — MÉDIANALYSE
   ================================================= */

.mini-card-medianalyse {
    background:
        linear-gradient(
            135deg,
            rgba(var(--color-primary), 0.18),
            rgba(255,255,255,0.05)
        );
}

/* =================================================
   16.10 VARIANTE — YAK
   ================================================= */

.mini-card-yak {
    background:
        linear-gradient(
            135deg,
            rgba(212,175,55,0.45),
        );

    box-shadow:
        inset 0 0 0 2px rgba(92,107,192,0.35);

    border-radius: var(--radius-md);
}

.mini-card-dossier {
    background:
        linear-gradient(
            135deg,
            rgba(212,175,55,0.45),
        );

    box-shadow:
        inset 0 0 0 2px rgba(78,122,191,0.35);

    border-radius: var(--radius-md);
}

.mini-yak {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.mini-yak-icon {
    width: 18px;
    height: 18px;
    opacity: 0.75;
    filter: drop-shadow(0 0 6px rgba(92,107,192,0.35));
}


/* =================================================
   16.11 VARIANTE — CHIFFRE DU JOUR
   ================================================= */

.mini-card-chiffre {
    background:
        linear-gradient(
            135deg,
            rgba(212,175,55,0.45),
        );

    box-shadow:
        inset 0 0 0 2px rgba(79,195,247,0.35);

    border-radius: var(--radius-md);
}

.mini-card-chiffre .mini-chiffre {
    font-size: 2.1rem;
    font-weight: 650;
    line-height: 1.1;
    color: var(--chiffre-blue);
    text-shadow: 0 0 12px rgba(79,195,247,0.35);
}


/* =================================================
   16.12 VARIANTE — PÉPITES
   ================================================= */

.mini-card-pepite_or {
    background:
        linear-gradient(
            135deg,
            rgba(212,175,55,0.45),

        );

    box-shadow:
        inset 0 0 0 2px rgba(212,175,55,0.35);

    border-radius: var(--radius-md);
}

.mini-card-pepite_argent {
    background:
        linear-gradient(
            135deg,
            rgba(212,175,55,0.45),
        );

    box-shadow:
        inset 0 0 0 2px rgba(176,190,197,0.35);

    border-radius: var(--radius-md);
}

.mini-card-pepite_bronze {
    background:
        linear-gradient(
            135deg,
            rgba(212,175,55,0.45),
        );

    box-shadow:
        inset 0 0 0 2px rgba(205,127,50,0.35);

    border-radius: var(--radius-md);
}

/* =====================================================
   17. HOME — JOURS REPLIABLES (MOBILE-CANON)
   Même rendu sur mobile / tablette / desktop
   ===================================================== */


/* =================================================
   17.1 CONTENEUR DES JOURS ANTÉRIEURS
   ================================================= */

.days-older {
    margin-top: 1.5rem;
}


/* =================================================
   17.2 BLOC <details> — JOUR
   Élément de flux éditorial
   ================================================= */

.day-details {
    position: relative;

    /* Full-bleed mobile-canon */
    margin-left: -1.25rem;
    margin-right: -1.25rem;

    background: rgba(255, 255, 255, 0.03);

    border: none;
    border-top: 1px solid rgba(255,255,255,0.08);
    border-bottom: 1px solid rgba(255,255,255,0.08);

    border-radius: 0;

    margin-bottom: 0.85rem;
}


/* =================================================
   17.3 SUMMARY — EN-TÊTE DE JOUR
   ================================================= */

.day-summary {
    list-style: none;
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 1rem 1.25rem;

    user-select: none;

    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-main);
}

/* Supprime le triangle natif */
.day-summary::-webkit-details-marker {
    display: none;
}

.day-summary-date {
    text-transform: capitalize;
}

.day-summary-chevron {
    color: var(--text-muted);
    transition: transform 0.25s ease;
}


/* =================================================
   17.4 CONTENU REPLIÉ — MINI-CARDS
   ================================================= */

.day-details .mini-cards {
    padding: 0 1.25rem 1rem;
}


/* =================================================
   17.5 ÉTAT OUVERT
   ================================================= */

.day-details[open] .day-summary-chevron {
    transform: rotate(180deg);
}

/* =================================================
   17.6 CORRECTIF MOBILE — OVERFLOW HORIZONTAL
   Empêche toute bande latérale à l’ouverture des jours
   ================================================= */

@media (max-width: 1023px) {

    .day-details {
        overflow-x: hidden;   /* 🔒 clé du problème */
    }

    .day-details[open] {
        overflow-x: hidden;
    }
}

/* =====================================================
   HOME — BLOC YAKTEUR
   ===================================================== */

.home-yakteur-section{
    margin:2.2rem 0 2.6rem;
    padding:1.15rem 1.1rem 1.2rem;

    background:rgba(255,255,255,0.04);
    border:var(--border-glass);
    border-radius:var(--radius-md);

    backdrop-filter:var(--blur-glass);
}

.home-yakteur-intro{
    margin-bottom:1rem;
}

.home-yakteur-title{
    margin-bottom:0.45rem;
    font-size:1.05rem;
    font-weight:600;
    color:var(--text-main);
}

.home-yakteur-subtitle{
    margin-bottom:0.55rem;
    font-size:0.9rem;
    color:var(--text-muted);
}

.home-yakteur-text{
    font-size:0.94rem;
    line-height:1.65;
    color:var(--text-soft);
}

.home-yakteur-text p:last-child{
    margin-bottom:0;
}

.home-yakteur-cards{
    display:flex;
    flex-direction:column;
    gap:0.7rem;
}

/* tablette + desktop : 2 cards sur la même ligne */
@media (min-width: 768px){
    .home-yakteur-cards{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:0.8rem;
    }
}

/* =====================================================
   18. LAYOUT DESKTOP — BORD À BORD
   Main centré, sidebars au viewport
   ===================================================== */

.layout {
    display: block;
}

@media (min-width: 1280px) {

    .layout {
        display: grid;
        grid-template-columns:
            minmax(0, 280px)   /* sidebar gauche */
            minmax(2rem, 1fr)  /* respiration */
            minmax(0, 720px)   /* main */
            minmax(2rem, 1fr)  /* respiration */
            minmax(0, 320px);  /* sidebar droite */
        align-items: start;
    }

    .sidebar-left {
        grid-column: 1;
        position: sticky;
        top: var(--header-height);
        height: calc(100vh - var(--header-height));
        padding-left: 1.25rem;
    }

    .main-column {
        grid-column: 3;
        width: 100%;
        max-width: 720px;
        justify-self: center;
    }

    .sidebar-right {
        grid-column: 5;
        position: sticky;
        top: var(--header-height);
        height: calc(100vh - var(--header-height));
        overflow: hidden;
        padding-right: 1.25rem;
    }
}

/* =====================================================
   TABLETTE — LECTURE CONFORT
   Main centré, sidebars masquées
   ===================================================== */

@media (min-width: 768px) and (max-width: 1279px) {

    .layout {
        display: block;
    }

    .sidebar-left,
    .sidebar-right {
        display: none;
    }

    .main-column {
        max-width: 720px;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
    }
}

/* =====================================================
   SIDEBAR GAUCHE — NAVIGATION ÉDITORIALE (V5)
   ===================================================== */

.sidebar-left{
display:flex;
flex-direction:column;
font-size:0.85rem;
line-height:1.6;
}

/* séparateur */

.sidebar-separator{
height:1px;
background:linear-gradient(
to right,
transparent,
rgba(255,255,255,0.30),
transparent
);
margin:0.6rem 0;
flex-shrink:0;
}

/* bloc */

.sidebar-block{
flex-shrink:0;
}

/* --- Desktop scroll --- */

@media (min-width:1280px){

.sidebar-left{
overflow-y:auto;
padding-right:0.75rem;
padding-bottom:3rem;

scrollbar-width:thin;
scrollbar-color:rgba(255,255,255,0.18) transparent;
}

.sidebar-left::-webkit-scrollbar{
width:8px;
}

.sidebar-left::-webkit-scrollbar-thumb{
background:rgba(255,255,255,0.18);
border-radius:999px;
}

.sidebar-left::-webkit-scrollbar-thumb:hover{
background:rgba(255,255,255,0.28);
}

}

/* =====================================================
   BLOC IDENTITÉ
   ===================================================== */

.sidebar-identity{
display:flex;
flex-direction:column;
align-items:flex-start;
text-align:left;
}

.sidebar-brand{
display:flex;
width:100%;
}

.sidebar-brand img{
width:130px;
height:auto;
}

.sidebar-tagline{
margin-top:1rem;
font-size:0.95rem;
font-weight:500;
color:var(--text-soft);
}

/* =====================================================
   MÉTHODE
   ===================================================== */

.sidebar-method .sidebar-nav-list{
list-style:none;
margin:0;
padding:0;
}

.sidebar-method .sidebar-nav-list a{

display:flex;
justify-content:space-between;
align-items:center;

padding:0.6rem 0.25rem;

color:var(--text-soft);
text-decoration:none;

border-radius:8px;

transition:
background var(--t-fast),
color var(--t-fast),
transform var(--t-fast);
}

.sidebar-method .sidebar-nav-list a::after{
color:rgba(255,255,255,0.35);
transition:transform var(--t-fast);
}

.sidebar-method .sidebar-nav-list a:hover{

background:rgba(255,255,255,0.06);
color:var(--text-main);

transform:translateX(2px);
}

.sidebar-method .sidebar-nav-list a:hover::after{
transform:translateX(3px);
}

/* =====================================
   GROUPE MINI CARDS YAKTEUR
===================================== */

.sidebar-yakteur-group{
display:flex;
flex-direction:column;
gap:0.7rem;
}


/* =====================================
   MINI CARD YAKTEUR
===================================== */

.sidebar-yakteur-card{

display:flex;
flex-direction:column;
gap:0.42rem;

padding:0.8rem 0.9rem;

background:
linear-gradient(
135deg,
rgba(212,175,55,0.18),
rgba(255,255,255,0.05) 58%
);

border:1px solid rgba(212,175,55,0.28);
border-left:3px solid rgba(212,175,55,0.50);
border-radius:14px;

text-decoration:none;

box-shadow:
inset 0 0 0 1px rgba(212,175,55,0.07),
0 2px 8px rgba(0,0,0,0.20);

transition:
transform .18s ease,
box-shadow .18s ease,
background .18s ease,
border-color .18s ease;

}

/* hover */

.sidebar-yakteur-card:hover{

transform:translateY(-1px);

background:
linear-gradient(
135deg,
rgba(212,175,55,0.24),
rgba(255,255,255,0.07) 58%
);

border-color:rgba(212,175,55,0.38);

box-shadow:
inset 0 0 0 1px rgba(212,175,55,0.10),
0 5px 12px rgba(0,0,0,0.28);

}

/* header */

.sidebar-yakteur-header{

display:flex;
align-items:center;
justify-content:space-between;
gap:0.6rem;

}

/* titre */

.sidebar-yakteur-title{

font-size:0.84rem;
font-weight:700;
line-height:1.2;

color:var(--gold);
letter-spacing:0.04em;
text-transform:uppercase;

}

/* texte */

.sidebar-yakteur-text{

font-size:0.73rem;
font-weight:500;
line-height:1.45;

color:var(--text-soft);
opacity:0.92;

}


/* =====================================
   VARIANTE BUILDER / REMERCIEMENTS
===================================== */

.sidebar-yakteur-card-builder{

background:
linear-gradient(
135deg,
rgba(45,163,224,0.16),
rgba(255,255,255,0.05) 58%
);

border:1px solid rgba(45,163,224,0.26);
border-left:3px solid rgba(45,163,224,0.50);

box-shadow:
inset 0 0 0 1px rgba(45,163,224,0.07),
0 2px 8px rgba(0,0,0,0.20);

}

.sidebar-yakteur-card-builder:hover{

background:
linear-gradient(
135deg,
rgba(45,163,224,0.22),
rgba(255,255,255,0.07) 58%
);

border-color:rgba(45,163,224,0.36);

box-shadow:
inset 0 0 0 1px rgba(45,163,224,0.10),
0 5px 12px rgba(0,0,0,0.28);

}

.sidebar-yakteur-card-builder .sidebar-yakteur-title{
color:var(--color-accent);
}


/* =====================================================
   MODULES
   ===================================================== */

.sidebar-modules{
display:flex;
flex-direction:column;
gap:1.25rem;
padding:1rem 0;
}

/* sections */

.module-section{
display:flex;
flex-direction:column;
gap:0.6rem;
}

.module-section-title{
font-size:0.72rem;
letter-spacing:0.1em;
text-transform:uppercase;
color:var(--text-muted);
opacity:0.8;
}

/* =====================================================
   MINI CARD MODULE
   ===================================================== */

.module-mini-card{
display:flex;
flex-direction:column;
gap:0.62rem;

padding:0.82rem 0.9rem;

background:rgba(255,255,255,0.035);
border:1px solid rgba(255,255,255,0.10);
border-radius:14px;

cursor:pointer;
text-decoration:none;

transition:
background .18s ease,
border-color .18s ease,
transform .18s ease,
box-shadow .18s ease;
}

/* hover */

.module-mini-card:hover{
background:rgba(255,255,255,0.07);
border-color:rgba(255,255,255,0.18);
transform:translateY(-1px);
box-shadow:0 5px 12px rgba(0,0,0,0.24);
}

/* =====================================================
   MODULE ACTIF
   ===================================================== */

.module-mini-card.is-active{
position:relative;

background:rgba(45,163,224,0.14);
border-color:rgba(45,163,224,0.45);

box-shadow:
0 0 0 1px rgba(45,163,224,0.18),
0 5px 12px rgba(0,0,0,0.30);
}

/* accent bar */

.module-mini-card.is-active::before{
content:"";

position:absolute;

left:-1px;
top:10px;
bottom:10px;

width:3px;

background:var(--color-accent);
border-radius:2px;
}

/* garder l'interactivité */

.module-mini-card.is-active:hover{
transform:translateY(-1px);
background:rgba(45,163,224,0.18);
}

/* titre plus lisible */

.module-mini-card.is-active .module-mini-name{
color:#ffffff;
}

/* =====================================================
   HEADER
   ===================================================== */

.module-mini-header{
display:flex;
align-items:center;
justify-content:space-between;
gap:0.7rem;
}

/* bloc identité */

.module-mini-identity{
display:flex;
align-items:center;
gap:0.6rem;
min-width:0;
}

/* icône */

.module-mini-icon{
width:22px;
height:22px;
object-fit:contain;
flex-shrink:0;
}

/* nom */

.module-mini-name{
font-size:0.84rem;
font-weight:600;
line-height:1.25;
color:var(--text-main);

white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

/* pourcentage */

.module-progress-label{
flex-shrink:0;

font-size:0.75rem;
font-weight:700;
line-height:1;

color:var(--color-accent);
opacity:0.95;
}

/* =====================================================
   PROGRESS BAR
   ===================================================== */

.module-mini-progress{
height:7px;

background:rgba(255,255,255,0.08);
border-radius:999px;
overflow:hidden;
}

.module-mini-progress-fill{
height:100%;

background:linear-gradient(
90deg,
#5865f2 0%,
#2da3e0 45%,
#2ecf9a 100%
);

border-radius:999px;

transition:width .45s ease;
}

/* =====================================================
   STATUS
   ===================================================== */

.module-mini-status{
margin-top:0.05rem;

font-size:0.72rem;
line-height:1.35;

color:var(--text-muted);
opacity:0.92;
}

/* module verrouillé : statut un peu plus discret */

.module-mini-card.is-locked .module-mini-status{
color:var(--text-muted);
}

/* module actif : statut légèrement plus lisible */

.module-mini-card.is-active .module-mini-status{
color:var(--text-soft);
}

/* =====================================================
   SÉPARATEUR INTERNE
   ===================================================== */

.sidebar-separator.small{
height:1px;
background:rgba(255,255,255,0.08);
margin:0.5rem 0 0.2rem;
}

/* =====================================================
   19. SIDEBAR DROITE — SOURCES MÉDIATIQUES
   Flux éditorial secondaire
   Même grammaire que le main
   ===================================================== */

.sidebar-right .sidebar-block {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Titre de section */
.sidebar-right .sidebar-title {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;

    color: var(--text-muted);
    margin-bottom: 1rem;
}

/* Wrapper du flux */
.sidebar-sources-wrapper {
    flex: 1;
    overflow: hidden;
}

/* Liste */
.sidebar-sources-list {
    list-style: none;
    margin: 0;
    padding: 0;

    display: flex;
    flex-direction: column;

    will-change: transform;
}

/* Ligne éditoriale */
.sidebar-source-item {
    padding: 0.85rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.sidebar-source-item:first-child {
    border-top: 1px solid rgba(255,255,255,0.08);
}

/* Lien */
.sidebar-source-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.sidebar-source-link:hover .sidebar-source-title {
    color: var(--color-accent);
}

/* Média = rubrique */
.sidebar-source-media {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;

    color: var(--color-accent);
    margin-bottom: 0.3rem;
}

/* Titre */
.sidebar-source-title {
    font-size: 0.82rem;
    line-height: 1.5;
    font-weight: 500;

    color: var(--text-muted);
    transition: color 0.2s ease;
}

/* Animation (durée pilotée par JS) */
@keyframes sidebar-scroll {
    from { transform: translateY(0); }
    to   { transform: translateY(-50%); }
}

.sidebar-sources-list {
    --sidebar-scroll-duration: 0s; /* désactivé par défaut */
    animation-name: sidebar-scroll;
    animation-duration: var(--sidebar-scroll-duration);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-play-state: paused;
}

.sidebar-right:hover .sidebar-sources-list {
    animation-play-state: paused;
}

/* =====================================================
   SIDEBAR DROITE — REMERCIEMENTS
   ===================================================== */

.sidebar-thanks-feed .sidebar-sources-list{
    list-style: none;
    margin: 0;
    padding: 0;
}

.sidebar-thanks-item{
    padding: 0.85rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.sidebar-thanks-item:first-child{
    border-top: 1px solid rgba(255,255,255,0.08);
}

.sidebar-thanks-badge{
    display: inline-flex;
    align-items: center;

    margin-bottom: 0.35rem;
    padding: 0.16rem 0.45rem;

    border-radius: 999px;

    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;

    background: rgba(212,175,55,0.16);
    border: 1px solid rgba(212,175,55,0.32);
    color: var(--gold);
}

.sidebar-thanks-badge-builder{
    background: rgba(45,163,224,0.12);
    border-color: rgba(45,163,224,0.28);
    color: var(--color-accent);
}

.sidebar-thanks-module{
    margin-top: 0.35rem;

    font-size: 0.7rem;
    line-height: 1.4;
    color: var(--text-muted);
}


/* =====================================================
   SIDEBAR MOBILE DRAWER
   ===================================================== */

.sidebar-drawer {
    position: fixed;
    top: 0;
    left: -100%;
    width: 80%;
    max-width: 320px;
    height: 100vh;

    padding: 2rem 1.5rem;

    background: var(--color-primary);

    transition: left 0.3s ease;
    z-index: 2000;

    overflow-y: auto;
}

.sidebar-drawer.is-open {
    left: 0;
}

/* Overlay */

.sidebar-overlay {
    position: fixed;
    inset: 0;

    background: rgba(0,0,0,0.45);

    opacity: 0;
    pointer-events: none;

    transition: opacity 0.3s ease;
    z-index: 1500;
}

.sidebar-overlay.is-visible {
    opacity: 1;
    pointer-events: all;
}

/* Lock scroll */

body.drawer-open {
    overflow: hidden;
}

/* Desktop : drawer désactivé */

@media (min-width: 1280px) {
    .sidebar-drawer,
    .sidebar-overlay {
        display: none;
    }
}

/* =========================================
   SIDEBAR DROITE — DRAWER MOBILE/TABLETTE
   ========================================= */

.sidebar-right-drawer {
    position: fixed;
    top: 0;
    right: -100%;
    width: 85%;
    max-width: 340px;
    height: 100vh;

    padding: 2rem 1.5rem;

    background: var(--color-primary);

    transition: right 0.3s ease;
    z-index: 2000;

    overflow-y: auto;
}

.sidebar-right-drawer.is-open {
    right: 0;
}

/* Desktop → drawer désactivé */
@media (min-width: 1280px) {
    .sidebar-right-drawer {
        display: none;
    }
}

/* =====================================================
   MOBILE + TABLETTE — SIDEbars desktop OFF
   (Important: placé en fin de fichier pour gagner la cascade)
   ===================================================== */

@media (max-width: 1279px) {
    .layout .sidebar-left,
    .layout .sidebar-right {
        display: none !important;
    }
}

/* =================================================
   MODULE SYSTEM
   Progression globale
   ================================================= */

.module-progress-bar{
height:10px;
background:rgba(255,255,255,0.08);
border-radius:999px;
overflow:hidden;
}

.module-progress-fill{
height:100%;
background:linear-gradient(
90deg,
#5865f2 0%,
#2da3e0 45%,
#2ecf9a 100%
);
border-radius:999px;
transition:width .6s ease;
}

/* =================================================
   MODULE LIST (HOME / PAGE MODULES)
   ================================================= */

/* SECTION */

.modules-section{
    margin:2.5rem 0;
}

.modules-section h2{
    font-size:var(--text-lg);
    font-weight:var(--fw-semibold);
    margin-bottom:1.2rem;
    color:var(--text-main);
}

/* GRID */

.modules-grid{
    display:grid;
    grid-template-columns: 1fr;
    gap:1.2rem;
}

.module-card{
    display:flex;
    flex-direction:column;
    gap:0.8rem;

    padding:1rem;

    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.08);

    border-radius:var(--radius-md);

    transition:all var(--t-ui);
}

.module-card-cta{
    margin-top:auto;

    padding:0.5rem;

    text-align:center;

    font-size:0.8rem;
    font-weight:600;

    border-radius:8px;

    background:var(--color-accent);
    border:1px solid rgba(255,255,255,0.12);

    color:var(--text-main);

    text-decoration:none;

    transition:all var(--t-ui);
}

.module-card-cta:hover{
    background:rgba(255,255,255,0.06);
    color:white;
}

.module-card-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:0.8rem;
}

.module-card-identity{
    display:flex;
    align-items:center;
    gap:0.7rem;
    min-width:0;
}

.module-card-icon{
    width:28px;
    height:28px;
    object-fit:contain;
    flex-shrink:0;
}

.module-card-name{
    font-size:0.95rem;
    font-weight:600;
    line-height:1.25;
    color:var(--text-main);
}

.module-card-progress-label{
    flex-shrink:0;
    font-size:0.78rem;
    font-weight:700;
    color:var(--color-accent);
}

.module-card-status{
    margin-top:-0.15rem;
    margin-bottom:0;
    font-size:0.75rem;
    line-height:1.4;
    color:var(--text-muted);
}

/* =================================================
   MODULE LOCKED PAGE
   ================================================= */

.module-locked{
margin:2rem 0;
width:100%;
max-width:720px;
}

/* =================================================
   INTRO
   ================================================= */

.module-locked-intro{
margin-bottom:2rem;
}

.module-locked-title{
font-size:1.45rem;
font-weight:500;
margin-bottom:0.6rem;
text-align: center;
}

.module-locked-text{
font-size:1.05rem;
line-height:1.65;
color:var(--text-soft);
}

.module-locked-description{
margin-top:1rem;
color:var(--text-muted);
font-size:1.05rem;
line-height:1.65;
}

/* =================================================
   PROGRESS
   ================================================= */

.module-progress{
margin:2rem 0;
}

/* -----------------------------------------
BARRE DE PROGRESSION
----------------------------------------- */

.module-progress-bar{
position:relative;
height:10px;
background:rgba(255,255,255,0.08);
border-radius:999px;
overflow:hidden;
}

/* progression totale */

.module-progress-fill{
position:absolute;
left:0;
top:0;
height:100%;
background:linear-gradient(
90deg,
#5865f2 0%,
#2da3e0 45%,
#2ecf9a 100%
);
border-radius:999px;
transition:width .9s ease;
}

/* progression ajoutée par la contribution */

.module-progress-new{
position:absolute;
top:0;
height:100%;
background:#2ecc71;
transition:width .9s ease;
z-index:2;
box-shadow:0 0 8px rgba(46,204,113,0.45);
border-radius:999px;
}

/* animation légère */

@keyframes progressPulse{
0%{
filter:brightness(1);
}
50%{
filter:brightness(1.5);
}
100%{
filter:brightness(1);
}
}

/* -----------------------------------------
STATUT
----------------------------------------- */

.module-progress-status{
margin-top:0.85rem;

display:flex;
align-items:center;
justify-content:space-between;
gap:1rem;
flex-wrap:wrap;

font-size:0.95rem;
line-height:1.4;
color:var(--text-soft);
}

.module-progress-main{
font-size:1rem;
color:var(--text-main);
}

.module-progress-global{
font-size:0.88rem;
font-weight:700;
color:var(--color-accent);
}

.module-progress-label{
margin-top:0.35rem;
font-size:0.82rem;
line-height:1.45;
color:var(--text-muted);
}

/* =================================================
   EXPLANATION
   ================================================= */

.module-funding-explanation{
margin:2.2rem 0;
}

.module-funding-text{
font-size:1.05rem;
line-height:1.65;
}

/* =================================================
   CONTRIBUTE BOX
   ================================================= */

.module-contribute{
margin-top:2.2rem;
padding:1.25rem;

background:rgba(255,255,255,0.05);
border:var(--border-glass);
border-radius:var(--radius-lg);

backdrop-filter:var(--blur-glass);
}

.module-contribute-title{
font-size:0.95rem;
font-weight:500;
margin-bottom:1rem;
}

.module-contribute-form{
display:flex;
flex-direction:column;
gap:0.9rem;
}

.module-points-preview{
text-align: center;
}

/* =================================================
   THANKS WALL
   ================================================= */

.module-thanks{
    margin-top:2.5rem;
}

.module-thanks-wall{
    display:flex;
    flex-direction:column;
    gap:0.5rem;

    padding:1rem;

    background:var(--glass);
    border:var(--border-glass);
    border-radius:var(--radius-lg);

    backdrop-filter:var(--blur-glass);
}

.supporter{
    display:block;

    padding:0.45rem 0.6rem;

    font-size:0.85rem;
    line-height:1.5;

    color:var(--text-soft);

    background:rgba(255,255,255,0.04);
    border-left:3px solid rgba(255,255,255,0.08);

    border-radius:6px;

    cursor:default;
}

.supporter-empty{
    font-size:0.85rem;
    color:var(--text-muted);
    opacity:0.7;
}

.module-thanks-title{
    font-size:0.9rem;
    font-weight:500;
    margin-bottom:0.6rem;
    color:var(--text-muted);
}

/* =====================================================
   REMERCIEMENTS — PAGE COMMUNAUTÉ
   ===================================================== */

.thanks-page-section{
    margin-top: 3rem;
}

.thanks-page-title{
    margin-bottom: 1rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-main);
}

.thanks-page-list{
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.thanks-page-empty{
    font-size: 0.95rem;
    color: var(--text-muted);
    opacity: 0.8;
}


/* =====================================================
   ENTRY — BASE
   ===================================================== */

.thanks-entry{
    padding: 1rem 1rem 1.05rem;

    background: rgba(255,255,255,0.05);
    border: var(--border-glass);
    border-radius: var(--radius-md);

    backdrop-filter: var(--blur-glass);
}

.thanks-entry-top{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    flex-wrap: wrap;

    margin-bottom: 0.65rem;
}

.thanks-entry-date{
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.thanks-entry-message{
    margin-bottom: 0.55rem;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-soft);
}

.thanks-entry-meta{
    margin-bottom: 0;
    font-size: 0.82rem;
    color: var(--text-muted);
}


/* =====================================================
   BADGES
   ===================================================== */

.thanks-entry-badge{
    display: inline-flex;
    align-items: center;

    padding: 0.22rem 0.55rem;

    border-radius: 999px;

    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;

    background: rgba(45,163,224,0.14);
    border: 1px solid rgba(45,163,224,0.35);
    color: var(--color-accent);
}


/* =====================================================
   BÂTISSEUR
   ===================================================== */

.thanks-entry-builder{
    border-left: 3px solid rgba(45,163,224,0.45);
}


/* =====================================================
   MÉCÈNE — VERSION PREMIUM
   ===================================================== */

.thanks-entry-mecene{
    position: relative;

    background:
        linear-gradient(
            135deg,
            rgba(212,175,55,0.18),
            rgba(255,255,255,0.05) 58%
        );

    border: 1px solid rgba(212,175,55,0.28);
    border-left: 3px solid rgba(212,175,55,0.55);

    box-shadow:
        inset 0 0 0 1px rgba(212,175,55,0.10),
        0 4px 12px rgba(0,0,0,0.18);
}

.thanks-entry-mecene .thanks-entry-badge{
    background: rgba(212,175,55,0.18);
    border-color: rgba(212,175,55,0.36);
    color: var(--gold);
}

.thanks-entry-mecene .thanks-entry-message{
    color: var(--text-main);
}




/* =====================================================
   MOBILE
   ===================================================== */

@media (max-width: 768px){

    .thanks-entry{
        padding: 0.9rem;
    }

    .thanks-entry-message{
        font-size: 0.92rem;
    }
}

/* =================================================
   SUPPORT YAKTEUR PAGE
   ================================================= */

.support-yakteur{
display:flex;
flex-direction:column;
gap:2.5rem;
}


/* =================================================
   SECTION GENERALE
   ================================================= */

.support-section{
display:flex;
flex-direction:column;
gap:0.9rem;
}

.support-section h2{
font-weight:500;
margin-top:0.4rem;
}

.support-subtitle{
color:var(--text-muted);
}

.support-text{
font-size:1.05rem;
color:var(--text-soft);
}

.support-text p{
margin-bottom:0.9rem;
}


/* =================================================
   ACTIONS
   ================================================= */

.support-actions{
margin-top:0.9rem;
}


/* =================================================
   BOUTON PARTAGE
   ================================================= */

.support-share{

position:relative;

padding:0.5rem 0.9rem;

border-radius:8px;

border:1px solid rgba(255,255,255,0.14);
background:rgba(255,255,255,0.08);

color:var(--text-main);

font-size:0.85rem;
font-weight:600;

cursor:pointer;

transition:background .2s ease;
}

.support-share:hover{
background:rgba(255,255,255,0.15);
}

.support-share.is-copied::after{

content:"Lien copié !";

position:absolute;
left:105%;
top:50%;
transform:translateY(-50%);

padding:4px 8px;

font-size:0.75rem;

background:rgba(0,0,0,0.85);
color:white;

border-radius:4px;

white-space:nowrap;

animation:fadeCopy 1.5s ease forwards;

}

@keyframes fadeCopy{

0%{opacity:0}
15%{opacity:1}
85%{opacity:1}
100%{opacity:0}

}


/* =================================================
   FORMULAIRE MECENE
   ================================================= */

.support-form-mecene{
margin-top:1rem;
width:100%;
}

.support-form-mecene-main{
display:flex;
flex-direction:column;
gap:0.9rem;
}

.support-form-mecene-main input[type="text"],
.support-form-mecene-main input[type="email"],
.support-form-mecene-main input[type="number"]{
width:100%;
box-sizing:border-box;
}


/* =================================================
   TABS MECENE
   ================================================= */

.support-tabs{
display:flex;
gap:0.5rem;
margin-bottom:0.9rem;
}

.support-tab{

padding:0.45rem 0.8rem;

background:rgba(255,255,255,0.05);

border:var(--border-glass);
border-radius:var(--radius-sm);

font-size:0.8rem;

cursor:pointer;

transition:background .2s ease,color .2s ease;
}

.support-tab.active{
background:var(--color-accent);
color:white;
}


/* =================================================
   MESSAGE MECENE
   ================================================= */

.support-subscription-text{
font-size:0.85rem;
color:var(--text-soft);
line-height:1.5;
margin-bottom:0.4rem;
}


/* =================================================
   TYPE CONTRIBUTEUR
   ================================================= */

.module-contributor-type{
display:flex;
gap:1rem;
font-size:0.8rem;
color:var(--text-soft);
}

.module-contributor-type input{
margin-right:0.25rem;
}

.hidden-field{
display:none;
}


/* =================================================
   INPUTS
   ================================================= */

.module-contribute-form input[type="text"],
.module-contribute-form input[type="email"],
.module-contribute-form input[type="number"]{

padding:0.45rem 0.55rem;

background:rgba(255,255,255,0.06);
border:1px solid rgba(255,255,255,0.10);
border-radius:6px;

font-size:0.85rem;
color:var(--text-main);
}

.module-contribute-form input:focus{
outline:none;
border-color:var(--color-accent);
}


/* =================================================
   MONTANTS
   ================================================= */

.module-contribute-amount{
display:flex;
justify-content:center;
gap:0.6rem;
flex-wrap:wrap;
}

.amount-option{
display:flex;
align-items:center;
gap:0.3rem;

font-size:0.85rem;

padding:0.35rem 0.65rem;

border-radius:20px;
border:1px solid rgba(255,255,255,0.12);
background:rgba(255,255,255,0.05);

cursor:pointer;
}

.amount-option input[type="radio"]{
display:none;
}

.amount-option input:checked + span{
color:var(--color-accent);
font-weight:600;
}

.amount-custom{
gap:0.45rem;
}

.amount-custom input{
width:65px;
padding:0.3rem;
}


/* =================================================
   BOUTON SUBMIT
   ================================================= */

.module-contribute-button{
width:100%;

padding:0.6rem;

border-radius:8px;

border:1px solid rgba(255,255,255,0.14);
background:var(--color-accent);

color:var(--text-main);

font-size:0.85rem;
font-weight:600;

cursor:pointer;

transition:background .2s ease;
}

.module-contribute-button:hover{
background:rgba(255,255,255,0.15);
}


/* =================================================
   MODULES BÂTISSEURS
   ================================================= */

.support-builder-label{
    margin-bottom:0.8rem;
    font-size:0.95rem;
    color:var(--text-soft);
}

.support-builder-group{
    margin-top:1rem;
}

.support-builder-group-title{
    margin-bottom:0.55rem;
    font-size:0.78rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--text-muted);
}

.support-builder-links{
    display:flex;
    flex-direction:column;
    gap:0.55rem;
}

.support-builder-link{
    display:flex;
    flex-direction:column;
    gap:0.38rem;

    padding:0.72rem 0.8rem;

    border-radius:12px;
    background:rgba(255,255,255,0.045);
    border:1px solid rgba(255,255,255,0.10);

    color:var(--text-main);
    text-decoration:none;

    transition:
        background .2s ease,
        border-color .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}

.support-builder-link:hover{
    background:rgba(255,255,255,0.075);
    border-color:rgba(45,163,224,0.28);
    transform:translateY(-1px);
    box-shadow:0 4px 10px rgba(0,0,0,0.18);
}

.support-builder-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:0.7rem;
}

.support-builder-identity{
    display:flex;
    align-items:center;
    gap:0.55rem;
    min-width:0;
}

.support-builder-icon{
    width:20px;
    height:20px;
    object-fit:contain;
    flex-shrink:0;
}

.support-builder-name{
    font-size:0.84rem;
    font-weight:600;
    line-height:1.25;
    color:var(--text-main);

    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.support-builder-progress{
    flex-shrink:0;
    font-size:0.74rem;
    font-weight:700;
    color:var(--color-accent);
}

.support-builder-bar{
    height:5px;
    background:rgba(255,255,255,0.08);
    border-radius:999px;
    overflow:hidden;
}

.support-builder-bar-fill{
    height:100%;
    border-radius:999px;
    background:linear-gradient(
        90deg,
        #5865f2 0%,
        #2da3e0 45%,
        #2ecf9a 100%
    );
    transition:width .45s ease;
}

.support-builder-status{
    font-size:0.7rem;
    line-height:1.35;
    color:var(--text-muted);
}

/* =========================================
POPUP CONFIRMATION SOUTIEN
========================================= */

.support-popup-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
}

.support-popup-modal.is-visible {
    display: block;
}

.support-popup-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(14, 22, 40, 0.72);
    backdrop-filter: blur(6px);
}

.support-popup-dialog {
    position: relative;
    z-index: 1;
    width: min(92vw, 560px);
    margin: 10vh auto 0;
    background: var(--color-accent);
    color: #0e1628;
    border-radius: 22px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
    padding: 30px 26px 22px;
    border: 1px solid rgba(14, 22, 40, 0.08);
}

.support-popup-close {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 38px;
    height: 38px;
    border: 0;
    background: transparent;
    font-size: 34px;
    line-height: 1;
    cursor: pointer;
    color: #0e1628;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.8;
}

.support-popup-close:hover {
    opacity: 1;
}

.support-popup-content h3 {
    margin: 0 0 14px;
    font-size: 2rem;
    line-height: 1.2;
    color: var(--color-primary);
    font-weight: 700;
}

.support-popup-content p {
    margin: 0 0 14px;
    line-height: 1.65;
    font-size: 1.08rem;
    color: var(--color-primary);
}

.support-popup-content strong {
    color: var(--color-primary);
    font-weight: 700;
}

@media (max-width: 640px) {
    .support-popup-dialog {
        width: calc(100vw - 24px);
        margin-top: 8vh;
        padding: 24px 18px 18px;
        border-radius: 16px;
    }

    .support-popup-content h3 {
        font-size: 1.55rem;
    }

    .support-popup-content p {
        font-size: 1rem;
    }
}

/* =========================================
YAKDROP
========================================= */

.yakdrop-card{
    position:relative;
    margin:0 0 1.6rem;
    padding:1rem 1.05rem 1.05rem;

    background:
        linear-gradient(
            135deg,
            rgba(110, 82, 210, 0.24),
            rgba(74, 50, 152, 0.18) 55%,
            rgba(255,255,255,0.04) 100%
        );

    border:1px solid rgba(255,255,255,0.10);
    border-left:3px solid rgba(150, 124, 255, 0.78);
    border-radius:14px;

    backdrop-filter:var(--blur-glass);

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.03),
        0 6px 16px rgba(0,0,0,0.18);
}

.yakdrop-card::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:14px;
    pointer-events:none;

    background:
        radial-gradient(
            circle at 85% 18%,
            rgba(203, 184, 255, 0.12),
            transparent 40%
        );
}

.yakdrop-card-top{
    position:relative;
    z-index:1;
}

.yakdrop-kicker{
    margin-bottom:0.22rem;
    font-size:0.72rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:#cab9ff;
}

.yakdrop-title{
    margin-bottom:0.32rem;
    font-size:1.08rem;
    font-weight:700;
    line-height:1.3;
    color:var(--text-main);
}

.yakdrop-subtitle{
    margin-bottom:0;
    font-size:0.9rem;
    line-height:1.5;
    color:#ddd4ff;
}

.yakdrop-details{
    position:relative;
    z-index:1;
    margin-top:0.9rem;
}

.yakdrop-summary{
    list-style:none;
    cursor:pointer;

    display:grid;
    grid-template-columns:1fr auto auto;
    align-items:center;
    gap:0.7rem;

    padding:0.78rem 0.9rem;

    border-radius:10px;
    border:1px solid rgba(255,255,255,0.10);
    background:rgba(255,255,255,0.05);

    font-size:0.84rem;
    color:var(--text-main);

    transition:
        background .2s ease,
        border-color .2s ease;
}

.yakdrop-summary:hover{
    background:rgba(255,255,255,0.08);
    border-color:rgba(255,255,255,0.16);
}

.yakdrop-summary::-webkit-details-marker{
    display:none;
}

.yakdrop-summary-text{
    font-weight:600;
}

.yakdrop-summary-meta{
    font-size:0.74rem;
    font-weight:700;
    color:#cbb8ff;
    white-space:nowrap;
}

.yakdrop-summary-chevron{
    color:var(--text-muted);
    transition:transform .25s ease;
}

.yakdrop-details[open] .yakdrop-summary-chevron{
    transform:rotate(180deg);
}

.yakdrop-details-inner{
    padding-top:0.95rem;
}

.yakdrop-text{
    margin-bottom:1rem;
    font-size:0.93rem;
    line-height:1.6;
    color:var(--text-soft);
}

.yakdrop-progress-block{
    margin-bottom:1rem;
}

.yakdrop-progress-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:0.8rem;
    flex-wrap:wrap;

    margin-bottom:0.55rem;
}

.yakdrop-progress-main{
    font-size:0.86rem;
    font-weight:600;
    color:var(--text-main);
}

.yakdrop-progress-value{
    font-size:0.78rem;
    font-weight:700;
    color:#cbb8ff;
}

.yakdrop-progress-bar{
    margin-bottom:0.45rem;
}

.yakdrop-progress-fill{
    background:linear-gradient(
        90deg,
        #6c4cc4 0%,
        #8b6ef0 45%,
        #b69cff 100%
    );
}

.yakdrop-progress-label{
    margin-bottom:0;
    font-size:0.76rem;
    line-height:1.45;
    color:#ddd4ff;
}

.yakdrop-form{
    display:flex;
    flex-direction:column;
    gap:0.8rem;
}

.yakdrop-form input[type="text"],
.yakdrop-form input[type="email"]{
    padding:0.58rem 0.68rem;
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.10);
    border-radius:8px;
    font-size:0.85rem;
    color:var(--text-main);
}

.yakdrop-form input[type="text"]:focus,
.yakdrop-form input[type="email"]:focus{
    outline:none;
    border-color:#9d84ff;
    box-shadow:0 0 0 3px rgba(157,132,255,0.12);
}

.yakdrop-submit-button{
    width:100%;
    padding:0.68rem;

    border-radius:8px;
    border:1px solid rgba(255,255,255,0.10);

    background:#7b5ce6;
    color:white;

    font-size:0.85rem;
    font-weight:600;

    cursor:pointer;

    transition:
        background .2s ease,
        transform .15s ease,
        box-shadow .15s ease;
}

.yakdrop-submit-button:hover{
    background:#8b6ef0;
    transform:translateY(-1px);
    box-shadow:0 6px 14px rgba(0,0,0,0.22);
}

.yakdrop-status-banner{
    position:relative;
    z-index:1;

    margin-top:0.85rem;
    margin-bottom:0.75rem;

    padding:0.78rem 0.95rem;
    border-radius:10px;

    font-size:0.84rem;
    line-height:1.5;
    font-weight:500;
}

.yakdrop-status-banner-success{
    color:#baf5c8;
    background:rgba(46, 204, 113, 0.12);
    border:1px solid rgba(46, 204, 113, 0.28);
    border-left:3px solid rgba(46, 204, 113, 0.65);
}

.yakdrop-status-banner-warning{
    color:#ffe2a8;
    background:rgba(255, 193, 7, 0.10);
    border:1px solid rgba(255, 193, 7, 0.22);
    border-left:3px solid rgba(255, 193, 7, 0.55);
}

.yakdrop-module-picker{
    display:flex;
    flex-direction:column;
    gap:0.55rem;
}

.yakdrop-module-picker-title{
    margin-bottom:0.1rem;
    font-size:0.8rem;
    font-weight:600;
    color:var(--text-soft);
}

.yakdrop-module-list{
    display:flex;
    flex-direction:column;
    gap:0.55rem;
}

.yakdrop-module-option{
    display:block;
    cursor:pointer;
}

.yakdrop-module-option input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.yakdrop-module-card{
    display:flex;
    flex-direction:column;
    gap:0.4rem;

    padding:0.72rem 0.8rem;

    border-radius:12px;
    background:rgba(255,255,255,0.045);
    border:1px solid rgba(255,255,255,0.10);

    color:var(--text-main);

    transition:
        background .2s ease,
        border-color .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}

.yakdrop-module-option:hover .yakdrop-module-card{
    background:rgba(255,255,255,0.075);
    border-color:rgba(157,132,255,0.28);
    transform:translateY(-1px);
    box-shadow:0 4px 10px rgba(0,0,0,0.18);
}

.yakdrop-module-option input:checked + .yakdrop-module-card{
    background:rgba(123,92,230,0.14);
    border-color:rgba(157,132,255,0.45);
    box-shadow:
        0 0 0 1px rgba(157,132,255,0.16),
        0 5px 12px rgba(0,0,0,0.22);
}

.yakdrop-module-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:0.7rem;
}

.yakdrop-module-identity{
    display:flex;
    align-items:center;
    gap:0.55rem;
    min-width:0;
}

.yakdrop-module-icon{
    width:20px;
    height:20px;
    object-fit:contain;
    flex-shrink:0;
}

.yakdrop-module-name{
    font-size:0.84rem;
    font-weight:600;
    line-height:1.25;
    color:var(--text-main);

    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.yakdrop-module-progress{
    flex-shrink:0;
    font-size:0.74rem;
    font-weight:700;
    color:#cbb8ff;
}

.yakdrop-module-bar{
    height:5px;
    background:rgba(255,255,255,0.08);
    border-radius:999px;
    overflow:hidden;
}

.yakdrop-module-bar-fill{
    display:block;
    height:100%;
    border-radius:999px;
    background:linear-gradient(
        90deg,
        #6c4cc4 0%,
        #8b6ef0 45%,
        #b69cff 100%
    );
    transition:width .45s ease;
}

.yakdrop-module-status{
    font-size:0.7rem;
    line-height:1.35;
    color:var(--text-muted);
}

@media (max-width: 640px){
    .yakdrop-summary{
        grid-template-columns:1fr auto;
    }

    .yakdrop-summary-meta{
        grid-column:1 / 2;
        justify-self:start;
        margin-top:-0.2rem;
    }

    .yakdrop-summary-chevron{
        grid-column:2 / 3;
        grid-row:1 / 3;
        align-self:center;
    }
}