/* ========================================= */
/* --- Styles de base et utilitaires --- */
/* ========================================= */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');

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

:root {
    --color-primary: #8C4B3A;
    --color-secondary: #B8860B;
    --color-background: #FDF9F3;
    --color-text: #2c2c2c;
    --font-main: 'Poppins', sans-serif;

    --fdj-blue: #004b90;
    --fdj-red: #d11234;

    --nickel-orange: #FF8C00;
    --pmu-green: #008742;
    --pmu-yellow: #ffc900;

    --nirio-blue: #004B8D;
    --nirio-green: #00A650;

    --service-public-primary: #1a73e8;
    --service-public-secondary: #e53935;

    /* ✅ Header “stable” (anti-pop) */
    --header-padY: 16px;
    /* padding vertical du header */
    --site-logo-h: 160px;
    /* hauteur logo (réservable avant chargement img) */
    --header-height: calc(var(--site-logo-h) + (2 * var(--header-padY)));

    --header-height-mobile: var(--header-height);
    --header-height-desktop: var(--header-height);
}


/* ============================================== */
/* 🌍 BASE GLOBALE RESPONSIVE */
/* ============================================== */

html {
    font-size: 16px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

html,
body {
    font-family: var(--font-main);
    color: var(--color-text);
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
}

/* Empêche le layout de bouger quand la scrollbar apparaît/disparaît */
html {
    scrollbar-gutter: stable;
}

/* Fallback vieux navigateurs (si besoin) */
@supports not (scrollbar-gutter: stable) {
    html {
        overflow-y: scroll;
    }
}

/* ✅ on laisse de la place sous le header fixe */
body {
    padding-top: var(--header-height);
}

/* Conteneur principal fluide */
.page-container {
    background-color: var(--color-background);
    width: 1300px;
    /* limite max lisible sur desktop */
    max-width: 100%;
    /* ne dépasse jamais l’écran */
    margin: 0 auto;
    padding: 30px 20px;
    box-sizing: border-box;
}




/* --- Typographie générale --- */
h1,
h2,
h3 {
    font-family: var(--font-main);
    font-weight: 450;
    color: var(--color-primary);
    margin-bottom: 1rem;
}

h1 {
    font-size: 2.5rem;
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.5rem;
}

p {
    margin-bottom: 1rem;
}

/* --- Images --- */
img {
    -webkit-user-drag: none;
    user-select: none;
    pointer-events: none;
    max-width: 100%;
    height: auto;
    display: block;
}

/* --- Boutons --- */
.btn-primary,
.btn-secondary {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
}

.btn-primary {
    background-color: var(--color-primary);
    color: #fff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.btn-primary:hover {
    background-color: #1e3d2f;
    border: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}

.btn-secondary {
    background-color: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
}

.btn-secondary:hover {
    background-color: var(--color-primary);
    color: #fff;
}

/* ============================================== */
/* 📱 RESPONSIVE ADAPTATION */
/* ============================================== */

/* 🖥️ 4K et très grands écrans */
@media (min-width: 1600px) {
    html {
        font-size: 17px;
    }

    .page-container {
        max-width: 1600px;
        padding: 30px 20px;
    }

    h1 {
        font-size: 3rem;
    }
}

/* 💻 Desktop standard (1200–1599px) */
@media (max-width: 1599px) and (min-width: 1024px) {
    .page-container {
        padding: 30px 20px;
    }
}

/* 📱 Tablettes (768–1023px) */
@media (max-width: 1023px) {
    html {
        font-size: 15px;
    }

    .page-container {
        padding: 30px 20px;
        max-width: 90%;
    }

    h1 {
        font-size: 2.2rem;
    }

    h2 {
        font-size: 1.8rem;
    }
}

/* 📲 Mobiles moyens (480–767px) */
@media (max-width: 767px) {
    html {
        font-size: 14px;
    }

    .page-container {
        padding: 30px 20px;
        max-width: 100%;
    }

    h1 {
        font-size: 1.9rem;
    }

    h2 {
        font-size: 1.6rem;
    }

    h3 {
        font-size: 1.3rem;
    }

    .btn-primary,
    .btn-secondary {
        font-size: 0.95rem;
        padding: 0.65rem 1.2rem;
    }
}

/* 📱 Petits mobiles (≤479px) */
@media (max-width: 479px) {
    html {
        font-size: 13px;
    }

    .page-container {
        padding: 30px 15px;
    }

    h1 {
        font-size: 1.7rem;
    }

    h2 {
        font-size: 1.4rem;
    }

    h3 {
        font-size: 1.15rem;
    }

    .btn-primary,
    .btn-secondary {
        font-size: 0.9rem;
        padding: 0.6rem 1rem;
    }
}







/* ========================================= */
/* --- LOGIN (CONNEXION) --- */
/* ========================================= */

.login-body {
    /* NOUVEAU : Dégradé de fond subtil pour l'ambiance */
    background: linear-gradient(135deg, var(--color-background, #f4f4f4) 0%, #e0e0e0 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    padding: 20px;
    box-sizing: border-box;
}

.login-container {
    width: 100%;
    max-width: 420px;
}

.login-box {
    background: #fff;
    padding: 50px 40px;
    border-radius: 15px;
    /* NOUVEAU : Ombre plus douce et profonde */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15), 0 0 10px rgba(0, 0, 0, 0.05);
    animation: fadeIn 1s ease-in-out;
    position: relative;
    overflow: hidden;
}

/* --- LIEN RETOUR --- */
.back-link {
    position: absolute;
    top: 25px;
    left: 25px;
}

.back-link a {
    color: var(--color-text);
    text-decoration: none;
    transition: color 0.3s ease;
}

.back-link a:hover {
    color: var(--color-secondary);
}

.back-link svg {
    width: 28px;
    height: 28px;
    stroke-width: 2.5;
}

/* --- TITRE --- */
.login-title {
    text-align: center;
    color: var(--color-primary);
    margin-bottom: 30px;
    font-size: 2.8rem;
    font-weight: 700;
}

/* --- MESSAGES D'ERREUR --- */
.con-error-message {
    color: #e74c3c;
    background-color: #fceae9;
    border: 1px solid #e74c3c;
    padding: 10px;
    border-radius: 8px;
    font-size: 1rem;
    text-align: center;
    margin-bottom: 20px;
}

/* --- FORMULAIRE ET CHAMPS --- */
.login-form .input-group {
    margin-bottom: 25px;
}

.password-group {
    position: relative;
}

.login-form input {
    width: 100%;
    padding: 18px 15px;
    border: 2px solid #ddd;
    border-radius: 10px;
    box-sizing: border-box;
    font-size: 1.1rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    padding-right: 3rem;
    background-color: #f9f9f9;
}

.login-form input:focus {
    outline: none;
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 3px rgba(var(--color-secondary-rgb), 0.2);
    background-color: #fff;
}

/* --- BOUTON DE CONNEXION --- */
.login-button {
    width: 100%;
    padding: 18px;
    border: none;
    /* Dégradé pour le bouton */
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
    color: white;
    font-size: 1.2rem;
    font-weight: 700;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.login-button:hover {
    /* Inversion ou léger changement de dégradé au survol */
    background: linear-gradient(90deg, var(--color-secondary), var(--color-primary));
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* ========================================= */
/* --- ŒIL BLEU PREMIUM (iris bouge entier) --- */
/* ========================================= */

.password-group {
    position: relative;
    display: flex;
    align-items: center;
}

/* Champ mot de passe */
.password-group input[type="password"],
.password-group input[type="text"] {
    width: 100%;
    padding-right: 3.8rem;
    /* 🔁 un peu plus d’espace total */
    border: 2px solid #ccc;
    border-radius: 10px;
    font-size: 1rem;
    box-sizing: border-box;
}

/* --- BARRE DE SÉPARATION --- */
.password-group::after {
    content: "";
    position: absolute;
    right: 3.6rem;
    /* 🔁 légèrement décalée à gauche */
    top: 50%;
    transform: translateY(-50%);
    width: 1.5px;
    height: 60%;
    background-color: #ccc;
    border-radius: 2px;
    pointer-events: none;
}

/* --- L’ŒIL (plus décalé à droite) --- */
.toggle-password {
    position: absolute;
    right: 0.6rem;
    /* 🔁 un peu plus de marge droite */
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

.toggle-password:hover {
    transform: translateY(-50%) scale(1.08);
}

.animated-eye {
    width: 40px;
    height: 40px;
    transform-origin: center;
    position: relative;
}


/* --- Couleurs et bases --- */
.eye-outline {
    stroke: black;
}

.eye-iris {
    fill: #1E90FF;
    transition: transform 0.1s ease-out;
}

.eye-pupil {
    fill: black;
}

/* --- Fermeture : ligne visible, iris caché --- */
.animated-eye:not(.open) .iris-group {
    opacity: 0;
}

.animated-eye:not(.open) .eye-closed-line {
    opacity: 1;
}

/* --- Ouvert : iris visible, ligne cachée --- */
.animated-eye.open .iris-group {
    opacity: 1;
}

.animated-eye.open .eye-closed-line {
    opacity: 0;
}

/* --- Clignement réaliste double --- */
.animated-eye.double-blink .eyelid-top,
.animated-eye.double-blink .eyelid-bottom {
    opacity: 1;
    animation: eyelidBlink 0.8s ease-in-out forwards;
}

@keyframes eyelidBlink {

    0%,
    100% {
        transform: scaleY(0);
        opacity: 0;
    }

    10% {
        transform: scaleY(1);
        opacity: 1;
    }

    25% {
        transform: scaleY(0);
        opacity: 0;
    }

    40% {
        transform: scaleY(1);
        opacity: 1;
    }

    60% {
        transform: scaleY(0);
        opacity: 0;
    }
}

/* --- Position des paupières --- */
.eyelid-top,
.eyelid-bottom {
    transform-origin: center;
    transition: opacity 0.2s;
}

/* --- Lueur subtile sur iris --- */
.animated-eye.open .eye-iris {
    fill: radial-gradient(circle at 30% 30%, #62b5ff, #1E90FF 80%);
}


/* ============================================================
   🎭 Honeypot anti-bot fields
   - Invisibles pour les humains
   - Toujours présents dans le DOM (pas display:none)
   - Indétectables par les bots visuels simples
   ============================================================ */

.hp-wrapper {
    position: absolute !important;
    left: -9999px;
    /* complètement hors écran */
    width: 1px;
    height: 1px;
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
    user-select: none;
}

.hp-wrapper input,
.hp-wrapper label {
    display: block;
    opacity: 0;
    height: 0;
    width: 0;
    border: none !important;
    background: transparent !important;
    color: transparent !important;
}







/* ========================================= */
/* --- MODAL (FIXED) --- */
/* ========================================= */

.co-modal {
    /* CRITIQUE : Cet état doit être l'état par défaut (caché) */
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    justify-content: center;
    align-items: center;
}

/* CRITIQUE : Cette classe est appliquée par le JS pour afficher la modale */
.co-modal.is-visible {
    display: flex;
}

.co-modal-content {
    background-color: #fff;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    width: 90%;
    max-width: 450px;
    text-align: center;
    position: relative;
    animation: slideDown 0.4s ease-out;
    border-top: 5px solid var(--color-secondary);
}

.co-modal-close {
    color: #666;
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 35px;
    font-weight: 300;
    cursor: pointer;
    transition: color 0.2s;
}

.co-modal-close:hover,
.co-modal-close:focus {
    color: var(--color-primary);
}

.co-modal-content p {
    font-size: 1.2em;
    margin-bottom: 25px;
    color: #333;
}

.co-modal-btn {
    background: var(--color-primary);
    color: white;
    padding: 14px 25px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.1em;
    transition: background-color 0.2s, transform 0.2s;
}

.co-modal-btn:hover {
    background-color: var(--color-secondary);
    transform: scale(1.05);
}

@keyframes slideDown {
    from {
        transform: translateY(-100px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}











/* ========================================= */
/* === 🌐 HEADER GLOBAL - TABAC BULTEZ === */
/* ========================================= */

.main-header {
    background-color: var(--color-primary);
    color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

    /* ✅ au lieu de 1rem 0 */
    padding: var(--header-padY) 0;

    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}


/* --- Conteneur global équilibré --- */
.header-container {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 4rem;
    position: relative;
}

/* --- Logo --- */
.site-logo {
    height: var(--site-logo-h);
    width: auto;
    display: block;
    object-fit: contain;
}


.site-logo-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

/* --- Navigation principale (Desktop) --- */
.main-nav {
    display: flex;
    justify-self: center;
    grid-column: 2;
}

.main-nav .nav-list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 2.2rem;
    justify-content: center;
}

.main-nav .nav-link {
    text-decoration: none;
    color: #fff;
    font-weight: 600;
    transition: color 0.3s ease;
    white-space: nowrap;
}

.main-nav .nav-link:hover,
.main-nav .nav-link.active {
    color: var(--color-secondary);
}

/* --- Actions à droite (profil + réseaux + burger) --- */
.header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1.4rem;
    flex-wrap: nowrap;
    justify-self: end;
}

/* --- Profil et icônes sociales --- */
.user-profile-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.social-icon-img {
    width: 34px;
    /* 🔼 icônes un peu plus grandes */
    height: 34px;
    object-fit: contain;
    transition: transform 0.2s ease, opacity 0.2s ease;
    display: block;
}

.social-icons a:hover .social-icon-img {
    transform: scale(1.1);
    opacity: 0.85;
}

/* --- Bouton burger --- */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    color: #fff;
    font-size: 2.1rem;
    /* 🔼 burger plus visible */
    cursor: pointer;
    align-items: center;
    justify-content: center;
    padding: 0.4rem;
    line-height: 1;
    position: relative;
    top: 0;
    text-decoration: none;
    /* ✅ support <a> */
}


/* ===================================================== */
/* 👤 PROFIL UTILISATEUR (HEADER) */
/* ===================================================== */

.profile-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.25s ease;
    background: none;
    border: none;
    padding: 0;
}

/* Effet normal */
.profile-link:hover {
    transform: scale(1.08);
}

/* Icône */
.profile-link .social-icon-img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    transition: all 0.3s ease;
}

/* Version connectée : halo vert */
.profile-link.connected .social-icon-img {
    transform: scale(1.05);
    filter: drop-shadow(0 0 6px rgba(0, 255, 128, 0.65));
}

.profile-link.connected:hover .social-icon-img {
    transform: scale(1.12);
    filter: drop-shadow(0 0 10px rgba(0, 255, 128, 0.85));
}

/* Version cachée quand non connecté */
.profile-link-hidden {
    opacity: 0 !important;
    /* totalement invisible */
    cursor: default;
    /* pas de main */
    transform: none !important;
}

.profile-link-hidden:hover {
    opacity: 0 !important;
    transform: none !important;
}

/* --- Dropdown menu --- */
.profile-dropdown-menu {
    display: none;
    position: fixed;
    /* on garde fixed (ne se fait pas clip par le header) */
    top: 0;
    /* sera posé par JS */
    left: 0;
    /* sera posé par JS */
    right: auto;
    /* évite conflit avec anciens right */
    background: rgba(255, 255, 255, 0.98);
    color: #333;
    min-width: 190px;
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    padding: 10px 0;
    z-index: 11000;
    overflow: hidden;
    animation: fadeInProfile 0.25s ease-out forwards;
}


@keyframes fadeInProfile {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.profile-user-name {
    display: block;
    padding: 10px 15px 6px 15px;
    font-weight: 600;
    color: var(--color-primary);
    text-align: center;
}

.dropdown-divider {
    border: none;
    border-top: 1px solid #ddd;
    margin: 8px 0;
}

.logout-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 12px;
    text-decoration: none;
    color: #333;
    font-weight: 600;
    transition: background 0.3s ease, color 0.3s ease;
}

.logout-link i {
    font-size: 1rem;
}

.logout-link:hover {
    background: var(--color-secondary);
    color: #fff;
}

.profile-dropdown-menu.active {
    display: block;
}


/* ========================================= */
/* === RESPONSIVE (≤1360px) === */
/* ========================================= */

/* MENU HAMBURGER — collé sous le header, hauteur auto */
@media (max-width: 1360px) {
    .menu-toggle {
        display: flex;
    }

    .main-nav {
        display: none;
        position: fixed;
        left: 50%;
        top: var(--header-height-mobile);
        /* juste sous le header */
        transform: translateX(-50%);
        width: min(420px, 94vw);
        max-width: 94vw;
        height: auto;
        max-height: calc(100vh - var(--header-height-mobile) - 2rem);
        overflow-y: auto;
        background: rgba(45, 25, 15, 0.96);
        backdrop-filter: blur(10px);
        border-radius: 16px;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
        opacity: 0;
        z-index: 10000;
        transition: opacity 0.25s ease, transform 0.25s ease;
    }

    /* ✅ JS (.active) OU fallback no-JS (:target) */
    .main-nav.active,
    .main-nav:target {
        display: block;
        opacity: 1;
        transform: translateX(-50%) translateY(0);
        animation: fadeDownMenu 0.25s ease-out forwards;
    }

    @keyframes fadeDownMenu {
        from {
            opacity: 0;
            transform: translateX(-50%) translateY(-10px);
        }

        to {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }
    }

    .main-nav .nav-list {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        padding: 1.2rem 0;
        margin: 0;
        gap: 0.4rem;
    }

    .main-nav .nav-list li {
        width: 100%;
    }

    .main-nav .nav-link {
        display: block;
        width: 100%;
        box-sizing: border-box;
        padding: 0.55rem 1rem;
        text-align: center;
        color: #fff;
        font-size: 1rem;
        font-weight: 600;
        text-decoration: none;
        border-radius: 0;
        transition: background .3s ease, color .3s ease;
    }

    .main-nav .nav-link:hover,
    .main-nav .nav-link:focus {
        background: rgba(255, 255, 255, 0.18);
    }

    .header-container {
        height: auto;
        padding: 0 1.5rem;
        /* ✅ plus de padding vertical ici */
    }

    .site-logo-link {
        margin-left: 0;
    }

    .site-logo {
        width: 150px;
        height: auto;
    }

    .social-icons {
        margin-right: 0;
    }

    /* ✅ bouton “fermer” (visible seulement en mode :target / fallback) */
    .nav-close-link {
        display: none;
        position: absolute;
        top: 10px;
        right: 10px;
        width: 42px;
        height: 42px;
        border-radius: 999px;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        color: #fff;
        background: rgba(255, 255, 255, 0.12);
        border: 1px solid rgba(255, 255, 255, 0.16);
    }

    .main-nav:target .nav-close-link {
        display: flex;
    }

    .main-nav:target .nav-list {
        padding-top: 2.2rem;
        /* laisse de la place au X */
    }

    .nav-close-link:hover,
    .nav-close-link:focus-visible {
        background: rgba(255, 255, 255, 0.18);
        outline: 2px solid rgba(255, 255, 255, 0.35);
        outline-offset: 2px;
    }
}


/* === 4K et grands écrans (≥1600px) === */
@media (min-width: 1600px) {
    .header-container {
        max-width: 1900px;
        padding: 0 5rem;
    }

    .main-nav .nav-list {
        gap: 2.4rem;
    }

    .site-logo {
        width: 150px;
    }
}

/* === Desktop standard (1200–1599px) === */
@media (max-width: 1599px) and (min-width: 1200px) {
    .header-container {
        padding: 0 5rem;
    }

    .main-nav .nav-list {
        gap: 1.4rem;
    }
}

/* === Laptop (1024–1199px) === */
@media (max-width: 1199px) and (min-width: 1024px) {
    .header-container {
        padding: 0 5rem;
    }

    .main-nav .nav-list {
        gap: 1.8rem;
    }
}

/* === Tablettes verticales (768–1023px) === */
@media (max-width: 1023px) {
    .site-logo {
        width: 120px;
    }

    .social-icon-img {
        width: 40px;
        /* 🔼 plus gros sur tablette/mobile */
        height: 40px;
    }

    .header-container {
        padding: 0 1.5rem;
    }
}

/* === Petits mobiles (≤479px) === */
@media (max-width: 479px) {
    .header-container {
        padding: 0 1rem;
    }

    .site-logo {
        width: 120px;
    }

    .menu-toggle {
        font-size: 2.1rem;
        /* 🔼 burger bien visible sur petit écran */
        top: -1px;
    }

    .social-icon-img {
        width: 34px;
        /* 🔼 au lieu de 22px */
        height: 34px;
    }
}

@media (min-width: 1600px) {
    :root {
        --site-logo-h: 150px;
    }
}

@media (max-width: 1360px) {
    :root {
        --site-logo-h: 150px;
        --header-padY: 16px;
    }
}

@media (max-width: 1023px) {
    :root {
        --site-logo-h: 150px;
        --header-padY: 16px;
    }
}

@media (max-width: 479px) {
    :root {
        --site-logo-h: 92px;
        --header-padY: 12px;
    }
}

/* =========================================
   🔧 Fix overlay + scroll quand menu ouvert
   ========================================= */
@media (max-width: 1360px) {
    body.nav-open::after {
        content: none;
    }

    body.nav-open {
        overflow: hidden;
    }
}


/* =========================================
   🔥 Overlay derrière le menu mobile
   + blocage scroll
   ========================================= */

@media (max-width: 1360px) {

    /* overlay derrière le header/menu */
    body.nav-open::before {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        backdrop-filter: blur(2px);
        z-index: 900;
        /* ✅ inférieur au header (1000) */
    }

    /* on garde le header au-dessus */
    .main-header {
        z-index: 1000;
        /* (déjà chez toi) */
    }

    /* menu mobile bien au-dessus (dans le header) */
    .main-nav {
        z-index: 10000;
        /* (déjà chez toi) */
    }

    /* bloque le scroll */
    html.nav-open,
    body.nav-open {
        overflow: hidden;
        height: 100%;
        touch-action: none;
    }
}

/* =========================================================
   ✅ FIX : le contenu du header DOIT rester au-dessus des thèmes
   ========================================================= */

.main-header {
    isolation: isolate;
    /* crée un contexte de pile propre */
    overflow: hidden;
    /* on clippe les animations ici */
}

.main-header .header-container {
    position: relative;
    z-index: 10;
    /* contenu au-dessus */
    overflow: visible;
    /* ne coupe pas la nav */
}

.main-header .site-logo-link,
.main-header .header-actions {
    position: relative;
    z-index: 11;
    /* encore au-dessus */
}

@media (min-width: 1361px) {
    .main-header .main-nav {
        position: static !important;
        /* ✅ évite que le JS "top" décale la nav */
    }
}

/* =========================================================
   ✅ FIX MENU BURGER INVISIBLE SUR TABLETTE
   (force le panneau au-dessus des calques thème)
   À COLLER TOUT EN BAS DE style.css
   ========================================================= */

@media (max-width: 1360px) {

    /* Le header ne doit pas clipper le menu overlay */
    .main-header,
    .main-header .header-container {
        overflow: visible !important;
    }

    /* Les calques thème restent derrière (même si un canvas crée un stacking context) */
    .main-header .header-anim-layer,
    .main-header .header-snow-layer,
    .main-header .header-fireworks-layer,
    .main-header .header-halloween-layer,
    .main-header .halloween-fog,
    .main-header .halloween-eyes,
    .main-header .halloween-lightning,
    .main-header .header-valentine-layer,
    .main-header .header-galette-layer,
    .main-header .header-chandeleur-layer,
    .main-header .header-poisson-layer,
    .main-header .header-easter-layer,
    .main-header .header-bastille-layer,
    .main-header .header-fete-travail-layer,
    .main-header .header-sainte-barbe-layer {
        z-index: 0 !important;
    }

    /* Le contenu header au-dessus */
    .main-header .header-container {
        position: relative !important;
        z-index: 1000 !important;
    }

    /* ✅ Panneau menu : toujours au-dessus + jamais "cliquable mais invisible" */
    .main-header .main-nav {
        position: fixed !important;
        z-index: 25000 !important;

        /* on évite le cas "présent mais invisible" */
        display: block !important;
        visibility: hidden;
        opacity: 0;
        pointer-events: none;

        /* garde ton style */
        left: 50%;
        transform: translateX(-50%);
    }

    .main-header .main-nav.active,
    .main-header .main-nav:target {
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: translateX(-50%) translateY(0);
    }

    /* (Optionnel mais safe) le dropdown profil au-dessus aussi */
    .profile-dropdown-menu {
        z-index: 26000 !important;
    }
}


/* =========================================================
   ⚠️ Header Notice "JavaScript désactivé" (affichée via <noscript>)
   ========================================================= */

.noscript-experience-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 40000;
}

.noscript-experience-modal {
    position: relative;
    width: min(520px, 92vw);
    background: rgba(255, 255, 255, 0.98);
    color: #222;
    border-radius: 16px;
    box-shadow: 0 16px 50px rgba(0, 0, 0, 0.35);
    padding: 22px 18px 18px 18px;
    text-align: center;
    overflow: hidden;
}

.noscript-experience-title {
    margin: 8px 0 8px 0;
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--color-primary, #8C4B3A);
}

.noscript-experience-text {
    margin: 0 auto 14px auto;
    max-width: 44ch;
    font-size: 1rem;
    line-height: 1.5;
    color: #333;
}

.noscript-experience-logo {
    display: block;
    width: 140px;
    height: auto;
    margin: 10px auto 14px auto;
    object-fit: contain;
}

.noscript-experience-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 18px;
    border-radius: 12px;
    background: var(--color-secondary, #B8860B);
    color: #fff;
    text-decoration: none;
    font-weight: 800;
    letter-spacing: 0.2px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
    transition: transform .18s ease, opacity .18s ease;
}

.noscript-experience-btn:hover {
    transform: translateY(-1px);
    opacity: 0.95;
}

.noscript-experience-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #444;
    background: rgba(0, 0, 0, 0.06);
    transition: transform .18s ease, background .18s ease;
}

.noscript-experience-close:hover {
    background: rgba(0, 0, 0, 0.10);
    transform: scale(1.03);
}

@media (min-width: 1024px) {
    .no-js .nav-close-link {
        display: none !important;
    }
}

@media (max-width: 480px) {
    .noscript-experience-modal {
        padding: 18px 14px 16px 14px;
    }

    .noscript-experience-logo {
        width: 120px;
    }

    .noscript-experience-title {
        font-size: 1.2rem;
    }
}

/* ============================== */
/* No-JS : évite le contenu sous le header fixe */
/* ============================== */

/* Valeur fallback : ajuste si besoin (90/100/110px) */
:root {
    --header-height-fallback: 185px;
}

@media (max-width: 767px) {
    :root {
        --header-height-fallback: 185px;
    }
}

@media (max-width: 480px) {
    :root {
        --header-height-fallback: 145px;
    }
}

/* on réserve la place du header */
.no-js body {
    padding-top: var(--header-height-fallback) !important;
}

/* optionnel : si ta nav en overlay no-js est aussi sous le header */
.no-js .main-nav {
    top: var(--header-height-fallback) !important;
}


















/* ========================================= */
/* --- FOOTER (Centré et Vertical) --- */
/* ========================================= */
.main-footer {
    background-color: var(--color-text);
    color: #fff;
    padding: 2rem 1rem;
    text-align: center;
    margin-top: 3rem;
}

.footer-content {
    display: flex;
    flex-direction: column;
    /* VERTICAL */
    align-items: center;
    /* CENTRAGE */
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
    gap: 1.5rem;
}

.footer-section {
    flex: 1 1 auto;
    padding: 1rem;
    text-align: center;
    /* TEXTE CENTRÉ */
}

.footer-section h3 {
    color: var(--color-secondary);
    margin-bottom: 1rem;
}

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

.footer-nav li {
    margin-bottom: 0.5rem;
}

.footer-nav a,
.footer-section a {
    color: #fff;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-nav a:hover,
.footer-section a:hover {
    color: var(--color-secondary);
}

.footer-bottom {
    margin-top: 2rem;
    font-size: 0.9rem;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 1rem;
}

.social-icons-down {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
}

.social-icons-down img {
    width: 32px;
    height: 32px;
    transition: transform 0.3s ease;
}

.social-icons-down img:hover {
    transform: scale(1.1);
}

/* --- FIN FOOTER --- */







/* ========================================= */
/* --- Sections de la page d'accueil --- */
/* ========================================= */

/* ------------------------------------------- */
/* --- 1. Section Héro (ANTI-POP / OPTIMISÉE) --*/
/* ------------------------------------------- */

.hero-section {
    position: relative;
    overflow: hidden;

    color: #fff;
    text-align: center;
    padding: 120px 20px;
    min-height: 500px;

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

    /* ✅ fond de secours pendant le chargement */
    background: #0b0b0b;
}

/* le conteneur media prend tout l’espace */
.hero-media {
    position: absolute;
    inset: 0;
    z-index: 0;
}

/* ✅ PAR DÉFAUT : visible (no-JS / JS cassé = OK) */
.hero-bg {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center 40%;
    opacity: 1;
}

/* ✅ Anti-pop SEULEMENT si JS actif */
.js .hero-bg {
    opacity: 0;
    transition: opacity 0.35s ease;
    transform: scale(1.02);
}

.js .hero-bg.is-loaded {
    opacity: 1;
}

/* overlay noir */
.hero-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1;
}

/* texte au-dessus */
.hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
}

.hero-content h1 {
    font-size: 3.5rem;
    margin-bottom: 1rem;
    color: #fff;
}

.hero-content .catchphrase {
    font-size: 1.5rem;
    margin-bottom: 2rem;
}

/* ------------------------------------------------------------------ */
/* --- 2. Styles Généraux et Titres de Section (MODIFIÉS) --- */
/* ------------------------------------------------------------------ */

.nouveautes-accueil-section,
.services-home-section,
.events-section,
.info-section {
    padding: 80px 30px;
    text-align: center;
    max-width: 1600px;
    margin: 0 auto;
}

.nouveautes-accueil-section {
    background-color: var(--color-background);
}

.accueil-main-title {
    color: var(--color-text);
    font-size: 2.8rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-align: center;
    position: relative;
    padding-bottom: 0.5rem;
    margin-bottom: 40px;
}

.accueil-main-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--color-secondary);
    width: 35%;
    height: 3px;
    border-radius: 3px;
}

.accueil-msgExcep {
    background-color: var(--fdj-red, #c20c3d);
    color: #ffffff;
    padding: 1.5rem 2rem;
    margin: 0;
    width: 100%;
    border-radius: 0;
    text-align: center;
    font-size: 1.25rem;
    font-weight: 700;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
    line-height: 1.5;
    position: sticky;
    top: 0;
    z-index: 100;
}

.accueil-msgExcep p {
    margin: 0;
}

.accueil-msgExcep .fas {
    margin-right: 0.75rem;
    color: #ffffff;
}

@media (max-width: 767px) {
    .accueil-msgExcep {
        padding: 1rem 1.5rem;
        font-size: 1rem;
    }
}

/* ------------------------------------------------------------------ */
/* --- 3. Cartes des nouveautés FDJ (RESPONSIVE + CENTRAGE PROPRE) --- */
/* ------------------------------------------------------------------ */

.nouveautes-accueil-grid {
    --grid-gap: 3rem;
    font-family: var(--font-main);
    display: grid;
    gap: var(--grid-gap);
    grid-template-columns: 1fr;
    justify-items: stretch;
    align-items: stretch;
}

.nouveaute-accueil-card {
    width: 100%;
    min-width: 0;
    position: relative;
    overflow: hidden;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.4s ease, box-shadow 0.4s ease, border 0.4s ease;
    text-align: left;
    display: flex;
    flex-direction: column;
    border: 1px solid #eee;
}

.nouveaute-accueil-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    border-color: var(--fdj-red, #c20c3d);
}

@media (max-width: 639px) {
    .nouveautes-accueil-grid .nouveaute-accueil-card:last-child {
        grid-column: auto;
        justify-self: stretch;
        width: 100%;
        max-width: none;
    }
}

@media (min-width: 640px) and (max-width: 1099px) {
    .nouveautes-accueil-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .nouveautes-accueil-grid .nouveaute-accueil-card:last-child:nth-child(2n + 1) {
        grid-column: 1 / -1;
        justify-self: center;
        width: 100%;
        max-width: calc((100% - var(--grid-gap)) / 2);
    }
}

@media (min-width: 1100px) {
    .nouveautes-accueil-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .nouveautes-accueil-grid .nouveaute-accueil-card:last-child:nth-child(3n + 1) {
        grid-column: 1 / -1;
        justify-self: center;
        width: 100%;
        max-width: calc((100% - (2 * var(--grid-gap))) / 3);
    }
}

.nouveaute-accueil-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    aspect-ratio: 4 / 3;
    max-height: 360px;
    overflow: hidden;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    border-bottom: 2px solid transparent;
    border-image: linear-gradient(to right, #c20c3d, #ff8a00) 1;
}

.nouveaute-accueil-image {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    display: block;
    object-fit: contain;
    object-position: center;
    transition: transform 0.3s ease;
}

.nouveaute-accueil-card:hover .nouveaute-accueil-image {
    transform: scale(1.03);
}

.nouveaute-accueil-content {
    padding: 30px;
    flex-grow: 1;
}

.nouveaute-accueil-title {
    font-size: 1.6rem;
    color: var(--color-primary);
    margin-top: 0;
    margin-bottom: 10px;
}

.nouveaute-accueil-description {
    font-size: 1rem;
    color: #555;
}

/* BANDEAU DIAGONAL (RIBBON) */
.ribbon-container {
    position: absolute;
    top: -1px;
    left: -1px;
    z-index: 10;
    width: 180px;
    height: 180px;
    overflow: hidden;
}

.ribbon {
    position: absolute;
    top: 30px;
    left: -60px;
    width: 250px;
    padding: 7px 0;
    background-color: var(--fdj-red, #c20c3d);
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 700;
    text-align: center;
    line-height: 1.2;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
    transform: rotate(-45deg);
    border: 2px dashed rgba(255, 255, 255, 0.6);
}

.ribbon-date {
    display: block;
    font-size: 1.1rem;
    font-weight: 900;
    margin-top: 3px;
}

.ribbon::before,
.ribbon::after {
    display: none;
}

/* ------------------------------------------------------------------ */
/* --- 4. Section Info et Météo (MODIFIÉ) --- */
/* ------------------------------------------------------------------ */

.info-section {
    background-color: var(--color-background);
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 3rem;
    flex-wrap: wrap;
    padding: 60px 30px;
}

.profile-card,
.weather-card {
    background-color: #fff;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    text-align: center;
    flex: 1 1 350px;
    max-width: 500px;
    border-top: 4px solid var(--color-primary);
}

.devanture-image {
    width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 25px;
    filter: grayscale(10%);
    transition: filter 0.3s ease;
}

.profile-card:hover .devanture-image {
    filter: grayscale(0%);
}

.profile-title {
    font-size: 2.2rem;
    margin-bottom: 20px;
}

.profile-info {
    font-size: 1.1rem;
    line-height: 1.8;
}

.profile-info .fas {
    margin-right: 15px;
    color: var(--color-secondary);
}

.weather-card {
    max-width: 400px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.weather-title {
    font-size: 2rem;
    margin-bottom: 30px;
}

.weather-info {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
}

.weather-info .fas {
    font-size: 4rem;
    color: var(--color-secondary);
}

.weather-temp {
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--color-primary);
}

.weather-description {
    font-size: 1.3rem;
    margin-top: 25px;
    font-weight: 500;
}

/* ------------------------------------------------------------------ */
/* --- 5. Services mis en avant (centrage intelligent) --- */
/* ------------------------------------------------------------------ */

.services-home-section {
    background-color: #fff;
}

.services-grid-small {
    --grid-gap: 2.5rem;
    display: grid;
    gap: var(--grid-gap);
    justify-items: stretch;
}

@media (min-width: 1100px) {
    .services-grid-small {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .services-grid-small .service-card-small:last-child:nth-child(4n + 1) {
        grid-column: 2;
    }

    .services-grid-small .service-card-small:nth-last-child(2):nth-child(4n + 1) {
        grid-column: 2;
    }

    .services-grid-small .service-card-small:last-child:nth-child(4n + 2) {
        grid-column: 3;
    }

    .services-grid-small .service-card-small:nth-last-child(3):nth-child(4n + 1) {
        grid-column: 1;
    }

    .services-grid-small .service-card-small:nth-last-child(2):nth-child(4n + 2) {
        grid-column: 2;
    }

    .services-grid-small .service-card-small:last-child:nth-child(4n + 3) {
        grid-column: 3;
    }
}

@media (min-width: 640px) and (max-width: 1099px) {
    .services-grid-small {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .services-grid-small .service-card-small:last-child:nth-child(2n + 1) {
        grid-column: 1 / -1;
        justify-self: center;
        width: min(100%, calc((100% - var(--grid-gap)) / 2));
    }
}

@media (max-width: 639px) {
    .services-grid-small {
        grid-template-columns: 1fr;
    }
}

.service-card-small {
    background-color: var(--color-background);
    padding: 35px;
    border-radius: 12px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
    text-align: center;
    text-decoration: none;
    color: var(--color-text);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.service-card-small:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    background-color: #f7f7f7;
}

.service-card-small .fas {
    font-size: 3rem;
    color: var(--color-secondary);
    margin-bottom: 15px;
    transition: color 0.3s ease;
}

.service-card-small:hover .fas {
    color: var(--color-primary);
}

.service-title-small {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0;
}

/* ------------------------------------------------------------------ */
/* --- Bannière de logos animée (ANTI-POP + anti faux-départs) --- */
/* ------------------------------------------------------------------ */

/* ✅ Valeurs stables (évite le “pop” dû à vw/clamp) */
:root {
    --logo-h: 60px;
    --logo-gap: 40px;
    --logo-ecart: 15px;

    --tail-gap: 40vw;

    /* ✅ vitesse = px / seconde (plus petit = plus lent) */
    --speed: 220;

    --logo-banner-padY: 20px;
}

.logo-banner-container {
    width: 100%;
    overflow: hidden;
    background-color: #f0f0f0;
    position: relative;
    box-sizing: border-box !important;

    /* ✅ anti-pop : hauteur stable dès le 1er paint */
    height: calc(var(--logo-h) + (2 * var(--logo-banner-padY))) !important;
    padding: var(--logo-banner-padY) 0 !important;

    display: flex;
    align-items: center;
}

/* ✅ PAR DÉFAUT : visible (no-JS / JS cassé = OK) */
.logo-banner-strip {
    display: flex;
    align-items: center;
    gap: var(--logo-gap);
    width: max-content;

    height: var(--logo-h) !important;
    min-height: var(--logo-h) !important;

    opacity: 1;
    transform: none;
    animation: none;
    pointer-events: auto;

    line-height: 0;
}

/* ✅ Mode animé + anti-pop SEULEMENT si JS actif */
.js .logo-banner-strip {
    will-change: transform;
    pointer-events: none;

    animation: logo-scroll linear infinite;
    animation-duration: var(--duration, 20s);
    animation-play-state: paused;

    opacity: 0;
    transition: opacity 0.12s ease;
    transform: translate3d(var(--from, -120%), 0, 0);
}

.js .logo-banner-container.is-ready .logo-banner-strip {
    opacity: 1;
    animation-play-state: running;
}

.logo-banner-container .logo-item {
    height: var(--logo-h) !important;
    width: auto !important;
    max-width: none !important;

    display: block !important;
    flex: 0 0 auto;
    object-fit: contain;

    margin: 0 var(--logo-ecart);

    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    opacity: 0.7;

    transition: filter 0.3s ease, -webkit-filter 0.3s ease, opacity 0.3s ease, transform 0.2s ease;
    pointer-events: auto;
}

.logo-item:hover,
.logo-item:active,
.logo-item.logo-item-active {
    filter: grayscale(0%);
    -webkit-filter: grayscale(0%);
    opacity: 1;
    transform: translateY(-2px);
}

@keyframes logo-scroll {
    from {
        transform: translate3d(var(--from, -100%), 0, 0);
    }

    to {
        transform: translate3d(var(--to, 100%), 0, 0);
    }
}

/* ✅ Tablette : plus lent + un peu plus compact */
@media (max-width: 1023px) {
    :root {
        --logo-h: 44px;
        --logo-gap: 24px;
        --logo-ecart: 10px;
        --tail-gap: 55vw;

        --speed: 140;
        /* ✅ tablette plus lent */
        --logo-banner-padY: 18px;
    }
}

/* ✅ Mobile : encore plus lent */
@media (max-width: 767px) {
    :root {
        --logo-h: 40px;
        --logo-gap: 20px;
        --logo-ecart: 8px;
        --tail-gap: 65vw;

        --speed: 110;
        /* ✅ mobile plus lent */
        --logo-banner-padY: 16px;
    }
}

/* ✅ Petit mobile : très lent */
@media (max-width: 480px) {
    :root {
        --logo-h: 38px;
        --logo-gap: 18px;
        --logo-ecart: 6px;
        --tail-gap: 70vw;

        --speed: 95;
        /* ✅ petit mobile */
        --logo-banner-padY: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .js .logo-banner-strip {
        animation: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}
















/* ========================================= */
/* --- Page Horaires --- */
/* ========================================= */

.horaire-main-title {
    color: var(--color-text);
    font-size: clamp(2rem, 2.5vw + 1rem, 2.5rem);
    font-weight: 700;
    letter-spacing: 2px;
    text-align: center;
    position: relative;
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
}

.horaire-main-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--color-secondary);
    width: 70%;
    height: 3px;
}

.page-header {
    text-align: center;
    margin-bottom: 2rem;
}

.subtitle {
    color: #666;
    font-style: italic;
    font-size: 1rem;
}

/* --- Section conteneur des horaires --- */
.horaires-section {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 2rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 1rem;
}

/* --- Cartes des horaires --- */
.horaires-card {
    background-color: #fff;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: 2px solid var(--color-primary);
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.horaires-card.classiques {
    flex: 1 1 35%;
    max-width: 35%;
    border-color: var(--color-primary);
}

.horaires-card.exceptionnel {
    flex: 1 1 60%;
    max-width: 60%;
    border-color: var(--color-secondary);
}

.horaires-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}

/* --- Titre --- */
.card-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    color: var(--color-secondary);
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.horaires-card.classiques .card-title {
    color: var(--color-primary);
    font-size: 1.6rem;
}

/* --- Liste --- */
.horaires-list {
    list-style: none;
    padding: 0;
    margin: 0;
    line-height: 1.8;
}

.horaires-list li {
    margin-bottom: 0.5rem;
    padding: 0.6rem 0;
    border-bottom: 1px dashed #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.horaires-list li:last-child {
    border-bottom: none;
}

.jour {
    font-weight: 600;
    color: #222;
}

.plage {
    color: #555;
    font-style: italic;
    text-align: right;
}

/* --- Icône d’édition --- */
.edit-icon {
    color: #888;
    transition: color 0.3s ease;
    cursor: pointer;
    font-size: 1.2rem;
}

.edit-icon:hover {
    color: #333;
}

/* --- Carte Google Maps --- */
.carte-section {
    text-align: center;
    background-color: #fff;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    max-width: 1000px;
    margin: 0 auto 2rem;
}

.carte-title {
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    color: var(--color-primary);
    margin-bottom: 0.5rem;
}

.carte-adresse {
    font-style: italic;
    margin-bottom: 1.5rem;
    color: #666;
}

/* ========================================================= */
/* 🌟 MODAL ADMIN – Refonte élégante et cohérente Tabac Bultez */
/* ========================================================= */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal-overlay.show {
    display: flex !important;
    opacity: 1 !important;
}

/* ✅ important: scroll + pas de débordement */
.modal-content {
    background: #fffaf7;
    border-radius: 14px;
    box-shadow:
        0 4px 10px rgba(0, 0, 0, 0.15),
        0 0 0 1px rgba(139, 69, 44, 0.05);
    padding: 2rem 2.2rem;
    width: 92%;
    max-width: 680px;
    /* ✅ un peu plus large */
    max-height: 85vh;
    /* ✅ si beaucoup de lignes */
    overflow: auto;
    /* ✅ scroll interne */
    overflow-x: hidden;
    /* ✅ jamais de débordement horizontal */
    color: #3a2b25;
    position: relative;
    animation: fadeIn 0.35s ease;
    transform: translateY(-10px);
    transition: transform 0.3s ease;
}

.modal-overlay.show .modal-content {
    transform: translateY(0);
}

/* --- Titre --- */
.modal-content h2 {
    font-family: "Playfair Display", serif;
    font-size: 1.6rem;
    color: var(--color-primary, #8b452c);
    text-align: center;
    margin-bottom: 1.2rem;
}

/* --- Bouton fermeture --- */
.close-btn {
    position: absolute;
    top: 12px;
    right: 18px;
    font-size: 1.6rem;
    color: #8b452c;
    cursor: pointer;
    border: none;
    background: none;
    transition: transform 0.2s ease, color 0.2s ease;
}

.close-btn:hover {
    color: #5e2e1d;
    transform: scale(1.1);
}

/* --- Formulaire --- */
.modal-form-group-horaire {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    margin-bottom: 1rem;
    padding: 0.4rem 0;
}

.modal-form-group-horaire label {
    flex: 1;
    font-weight: 600;
    color: #4a3227;
}

.modal-form-group-horaire input[type="time"] {
    flex: 1.2;
    padding: 0.45rem 0.6rem;
    border: 1px solid #d6c5bb;
    border-radius: 8px;
    background: #fff;
    font-size: 0.95rem;
    color: #3a2b25;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.modal-form-group-horaire input:focus {
    border-color: var(--color-primary, #8b452c);
    box-shadow: 0 0 0 2px rgba(139, 69, 44, 0.15);
    outline: none;
}

/* ✅ EXCEPTIONNELS: GRID pour que le bouton ne sorte jamais */
#exceptionnels-fields-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.exceptionnel-item {
    display: grid;
    grid-template-columns: 150px 150px 1fr 120px;
    gap: 10px;
    align-items: center;
    padding: 0.4rem 0;
}

.exceptionnel-item input[type="date"],
.exceptionnel-item input[type="text"] {
    width: 100%;
    min-width: 0;
    /* ✅ autorise à shrink */
    padding: 0.45rem 0.6rem;
    border: 1px solid #d6c5bb;
    border-radius: 8px;
    background: #fff;
    font-size: 0.95rem;
    color: #3a2b25;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.exceptionnel-item input:focus {
    border-color: var(--color-primary, #8b452c);
    box-shadow: 0 0 0 2px rgba(139, 69, 44, 0.15);
    outline: none;
}

/* --- Bouton Ajouter --- */
.add-exceptionnel-btn {
    background: var(--color-secondary, #c78f6b);
    border: none;
    border-radius: 8px;
    color: #fff;
    padding: 0.6rem 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.25s ease, transform 0.15s ease;
    margin-top: 10px;
}

.add-exceptionnel-btn:hover {
    background: #a46844;
    transform: translateY(-1px);
}

/* --- Bouton Supprimer --- */
.remove-btn {
    width: 100%;
    background: #d9534f;
    border: none;
    color: #fff;
    border-radius: 8px;
    padding: 0.55rem 0.8rem;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.25s ease;
    justify-self: end;
}

.remove-btn:hover {
    background: #c9302c;
}

/* --- Boutons Enregistrer --- */
.modal-buttons {
    text-align: right;
    margin-top: 1.8rem;
}

.modal-buttons .btn-primary {
    background: var(--color-primary, #8b452c);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    padding: 0.6rem 1.2rem;
    cursor: pointer;
    transition: background 0.25s ease, transform 0.15s ease;
}

.modal-buttons .btn-primary:hover {
    background: #6d3222;
    transform: translateY(-1px);
}

/* --- Animation --- */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.96);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ========================================= */
/* --- Responsive --- */
/* ========================================= */

@media (max-width: 1200px) {

    .page-header {
        padding: 0 1rem;
        text-align: center;
    }

    .horaire-main-title {
        font-size: 2.1rem;
        letter-spacing: 1.5px;
        margin-bottom: 1.2rem;
        word-wrap: break-word;
        line-height: 1.2;
    }

    .horaire-main-title::after {
        width: 60%;
    }

    .subtitle {
        font-size: 0.95rem;
        max-width: 90%;
        margin: 0 auto 1.5rem;
        line-height: 1.4;
        color: #666;
    }

    .horaires-section {
        justify-content: center;
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 2rem;
    }

    .horaires-card {
        flex: 1 1 100%;
        width: 100%;
        max-width: 520px;
        min-width: 0;
        min-height: 0;
        margin: 0 auto;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    }

    .horaires-card.classiques,
    .horaires-card.exceptionnel {
        flex: 1 1 100%;
        max-width: 520px;
    }

    .horaires-card .card-title {
        font-size: 1.4rem;
    }

    .horaires-list li {
        font-size: 0.95rem;
        padding: 0.5rem 0;
    }
}

@media (max-width: 823px) {

    .horaire-main-title {
        font-size: 1.8rem;
        letter-spacing: 1.2px;
    }

    .subtitle {
        font-size: 0.9rem;
        max-width: 95%;
    }

    .horaires-section {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        padding: 0 0.5rem;
        gap: 1.5rem;
    }

    .horaires-card,
    .horaires-card.classiques,
    .horaires-card.exceptionnel {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        min-height: 0;
        margin: 0;
    }

    .card-title {
        font-size: 1.5rem;
    }

    .horaires-list li {
        font-size: 0.95rem;
        gap: 0.75rem;
    }

    .jour {
        font-size: 0.98rem;
    }

    .plage {
        font-size: 0.95rem;
    }

    /* ✅ modal exceptionnels: stack */
    .exceptionnel-item {
        grid-template-columns: 1fr;
    }

    .remove-btn {
        justify-self: stretch;
    }
}

/* ============================= */
/* Fermetures exceptionnelles UI */
/* ============================= */

.exc-next-title {
    font-weight: 800;
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ✅ bloc “prochaine fermeture” plus visible */
.exc-next-block {
    padding: 14px;
    border-radius: 12px;
    background: rgba(199, 143, 107, 0.08);
    border: 1px solid rgba(199, 143, 107, 0.35);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.exc-separator {
    height: 1px;
    background: rgba(0, 0, 0, 0.12);
    margin: 14px 0 10px;
}

.exc-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.exc-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 0;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.08);
}

.exc-row:last-child {
    border-bottom: none;
}

.exc-badge-group {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 110px;
}

.exc-date-badge {
    width: 62px;
    height: 62px;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    line-height: 1;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}

.exc-day {
    font-weight: 800;
    font-size: 1.1rem;
}

.exc-month {
    font-size: 0.85rem;
    opacity: 0.85;
    margin-top: 4px;
    font-weight: 600;
}

.exc-arrow {
    font-weight: 800;
    opacity: 0.55;
}

.exc-text {
    flex: 1;
    min-width: 0;
}

.exc-reason {
    font-weight: 700;
}

/* ✅ badge jours en pill (toujours affiché) */
.exc-days-badge {
    font-weight: 800;
    white-space: nowrap;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.08);
    opacity: 0.9;
}

/* ✅ “next” encore plus visible */
.exc-row-next {
    padding: 12px;
    border-radius: 12px;
    background: rgba(139, 69, 44, 0.06);
    border: 1px solid rgba(139, 69, 44, 0.20);
}

.exc-row-next .exc-date-badge {
    border-color: rgba(139, 69, 44, 0.35);
}

/* ========================================= */
/* ✅ Bandeau statut ouverture (vert/orange/rouge) */
/* ========================================= */

.opening-status {
    margin: 14px auto 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.10);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.06);
    background: #fff;
    color: #1f2937;
    max-width: 95%;
}

.opening-status__dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    flex: 0 0 10px;
}

.opening-status__content {
    display: inline;
    line-height: 1.2;
}

.opening-status__label {
    font-weight: 800;
}

.opening-status__sep {
    margin: 0 6px;
    opacity: 0.55;
}

.opening-status__detail {
    font-weight: 600;
    opacity: 0.9;
}

/* ✅ OUVERT = VERT */
.opening-status.is-open {
    border-color: rgba(22, 163, 74, 0.35);
    background: rgba(22, 163, 74, 0.08);
    color: #065f46;
}

.opening-status.is-open .opening-status__dot {
    background: #16a34a;
}

/* ✅ BIENTÔT FERMÉ = ORANGE */
.opening-status.is-closing {
    border-color: rgba(245, 158, 11, 0.45);
    background: rgba(245, 158, 11, 0.12);
    color: #92400e;
}

.opening-status.is-closing .opening-status__dot {
    background: #f59e0b;
}

/* ✅ FERMÉ = ROUGE */
.opening-status.is-closed {
    border-color: rgba(239, 68, 68, 0.45);
    background: rgba(239, 68, 68, 0.10);
    color: #991b1b;
}

.opening-status.is-closed .opening-status__dot {
    background: #ef4444;
}

/* Petit confort mobile pour le bandeau */
@media (max-width: 540px) {
    .opening-status {
        border-radius: 16px;
        padding: 10px 12px;
    }

    .opening-status__content {
        display: inline;
    }
}

/* ========================================= */
/* ✅ Notice “dernier dimanche du mois” */
/* ========================================= */

.horaires-notice {
    margin: 10px auto 0;
    display: inline-flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(199, 143, 107, 0.10);
    border: 1px solid rgba(199, 143, 107, 0.35);
    color: #4a3227;
    max-width: 820px;
}

.horaires-notice i {
    margin-top: 2px;
    color: var(--color-secondary, #c78f6b);
    font-size: 1.05rem;
}

.horaires-notice__text {
    font-weight: 600;
    line-height: 1.35;
}

.horaires-notice__text strong {
    font-weight: 800;
}

/* ========================================= */
/* ✅ HOME — Opening status en "glass" BEIGE (moins “sticker”, plus tabac) */
/* ========================================= */

.home-opening-status {
    display: flex;
    justify-content: center;
    align-items: center;

    padding: 0 16px;
    margin-top: 16px;
    margin-bottom: 18px;

    position: relative;
    z-index: 6;
}

/* ✅ Override UNIQUEMENT sur la home */
.home-opening-status .opening-status {
    /* Beige translucide (warm) */
    background: rgba(255, 246, 234, 0.72) !important;
    color: rgba(58, 43, 37, 0.95) !important;
    border: 1px solid rgba(139, 69, 44, 0.18) !important;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    box-shadow:
        0 14px 34px rgba(0, 0, 0, 0.28),
        0 0 0 1px rgba(255, 255, 255, 0.35) inset;

    padding: 11px 16px;
}

/* Séparateur & detail un poil plus doux */
.home-opening-status .opening-status__sep {
    opacity: 0.5;
}

.home-opening-status .opening-status__detail {
    opacity: 0.88;
}

/* ✅ Garder le code couleur par état (bordure) */
.home-opening-status .opening-status.is-open {
    border-color: rgba(22, 163, 74, 0.35) !important;
}

.home-opening-status .opening-status.is-closing {
    border-color: rgba(245, 158, 11, 0.42) !important;
}

.home-opening-status .opening-status.is-closed {
    border-color: rgba(239, 68, 68, 0.42) !important;
}

/* ✅ Dot un peu plus “présent” sur fond beige */
.home-opening-status .opening-status__dot {
    box-shadow: 0 0 0 3px rgba(255, 246, 234, 0.9);
}

@media (max-width: 823px) {
    .home-opening-status {
        margin-top: 6px;
        margin-bottom: 14px;
    }

    .home-opening-status .opening-status {
        font-size: 0.92rem;
        padding: 10px 14px;
        max-width: 92%;
        text-align: center;
    }
}












/* ============================================== */
/* --- NOUVEAU STYLE POUR LA PAGE NOUVEAUTÉS --- */
/* ============================================== */

/* --- Général et Titrage --- */

.nouveautes-main-title {
    color: var(--color-text);
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-align: center;
    position: relative;
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
}

/* Pseudo-élément qui crée le trait sous le titre */
.nouveautes-main-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--color-secondary);
    width: 50%;
    height: 3px;
}

/* Le paragraphe d'introduction sous le titre principal */
.nouveautes-intro {
    font-size: 1.125rem;
    text-align: center;
    color: #4b5563;
    margin-bottom: 3rem;
    /* Augmenté pour mieux séparer du contenu */
}

/* La section pour chaque catégorie de nouveauté */
.nouveautes-section {
    margin-bottom: 4rem;
    /* Plus d'espace entre les sections */
    padding-top: 1rem;
    border-top: 1px solid #eee;
    /* Ligne subtile pour séparer les catégories */
}

/* Le titre de chaque section de nouveauté (ex: "Nouveautés sur les Boissons") */
.nouveautes-section-title {
    font-size: 1.8rem;
    /* Augmenté pour plus d'impact */
    font-weight: 700;
    margin-bottom: 2.5rem;
    text-align: center;
    color: var(--color-primary);
    /* Utiliser la couleur primaire pour les titres de section */
    position: relative;
}

/* Soulignement stylisé pour les titres de section */
.nouveautes-section-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background-color: var(--color-secondary);
    margin: 10px auto 0;
    border-radius: 2px;
}

/* --- Grille et Cartes de Nouveauté --- */

.nouveautes-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
}

.nouveautes-card {
    background-color: #fff;
    padding: 1rem;
    border-radius: 0.75rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    /* Ombre plus moderne */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #f0f0f0;
    /* Bordure très claire pour effet de propreté */
    width: 300px;
    position: relative;
    overflow: hidden;
}

/* Effet de survol : plus subtil et élégant */
.nouveautes-card:hover {
    transform: translateY(-5px);
    /* Glisse légèrement vers le haut */
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.15);
}

.nouveautes-image {
    width: 100%;
    max-width: 12rem;
    height: auto;
    max-height: 12rem;
    object-fit: contain;
    margin-bottom: 1rem;
    transition: transform 0.5s ease;
}

.nouveautes-card:hover .nouveautes-image {
    transform: scale(1.05);
    /* Zoom subtil au survol de la carte */
}

.nouveautes-content {
    padding: 0 10px;
    width: 100%;
    /* Permet aux éléments enfants de s'étendre si nécessaire */
}

.nouveautes-title {
    font-size: 1.35rem;
    /* Augmenté pour l'importance */
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--color-text);
}

.nouveautes-description {
    color: #6b7280;
    font-size: 0.95rem;
    margin-bottom: 1rem;
    min-height: 40px;
    /* Assure une hauteur minimale */
}

/* Le prix revient à un style standard et discret */
.nouveautes-price {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-primary);
    /* Garde une couleur visible pour le prix */
    margin-top: 0.5rem;
    /* Suppression des paddings et fonds spécifiques au prix */
}

/* --- Icône Admin (Edition) --- */

.edit-icon {
    position: absolute;
    top: 15px;
    /* Plus loin du bord */
    right: 15px;
    cursor: pointer;
    z-index: 10;
    color: var(--color-primary);
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    padding: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease-in-out;
}

.edit-icon:hover {
    transform: scale(1.1) rotate(5deg);
    color: var(--color-secondary);
    /* Change de couleur au survol */
}

/* --- Messages Admin (Alertes) --- */

.admin-message {
    padding: 15px;
    margin: 20px auto;
    border-radius: 8px;
    text-align: center;
    font-weight: bold;
    max-width: 600px;
}

.alert-danger {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* ============================================== */
/* --- MODALE D'ADMINISTRATION (SANS MODIFICATION) --- */
/* (Récupération des styles originaux) */
/* ============================================== */

.nouv-edit-modal {
    display: none;
    /* Rendu 'flex' par le JS lors de l'ouverture */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
    /* Fond semi-transparent */
    align-items: center;
    justify-content: center;
}

.nouv-edit-modal-content {
    background-color: #fefefe;
    padding: 30px;
    border-radius: 8px;
    width: 90%;
    max-width: 600px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    position: relative;
    animation: fadeIn 0.3s;
}

/* L'ensemble des styles de formulaire de l'ancienne modale est conservé ici */

.close-button {
    position: absolute;
    top: 10px;
    right: 15px;
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close-button:hover,
.close-button:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.edit-form-group {
    margin-bottom: 15px;
}

.edit-form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.edit-form-group input,
.edit-form-group textarea,
.edit-form-group select {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.edit-form-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

.edit-form-buttons button {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
}

.edit-form-buttons .submit-btn {
    background-color: var(--color-primary);
    color: white;
}

.edit-form-buttons .cancel-btn {
    background-color: #ccc;
}

.nouv-file-upload-container {
    margin-bottom: 20px;
}

#nouv-productImageFile {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

.nouv-file-label {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    cursor: pointer;
    width: 100%;
    height: 100px;
    border: 2px dashed #999;
    border-radius: 6px;
    background-color: #f9f9f9;
    color: #333;
    font-size: 1em;
    font-weight: 500;
    transition: all 0.2s ease-in-out;
    padding: 10px;
}

.nouv-file-label:hover,
.nouv-file-label.drag-over {
    border-color: grey;
    background-color: #e6f0ff;
    color: grey;
    border-style: solid;
}

.nouv-file-name-display {
    margin-top: 10px;
    font-size: 0.9em;
    color: #28a745;
    font-style: italic;
    word-break: break-all;
}

#nouv-currentImageDisplay {
    font-weight: bold !important;
    color: #8C4B3A !important;
    margin-left: 5px;
}

/* Animation pour la modale */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideIn {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* --- Media Queries (Ajustement des cartes) --- */

@media (min-width: 768px) {
    .nouveautes-card {
        width: calc(50% - 1rem);
        max-width: 380px;
    }
}

@media (min-width: 1024px) {
    .nouveautes-card {
        width: calc(33.33% - 1.5rem);
        max-width: 300px;
    }
}

@media (max-width: 500px) {
    .nouveautes-main-title {
        font-size: 2rem;
    }

    .nouveautes-card {
        width: 100%;
        max-width: none;
    }
}













/* ============================================== */
/* --- PAGE SERVICES (version finale responsive & stable) --- */
/* ============================================== */

/* --- En-tête de la page --- */
.service-page-header {
    text-align: center;
    margin-bottom: 2rem;
}

.service-page-title {
    color: var(--color-text);
    font-size: 2.3rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-align: center;
    position: relative;
    padding-bottom: 0.4rem;
    margin-bottom: 1.2rem;
}

.service-page-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--color-secondary);
    width: 35%;
    height: 3px;
}

.subtitle {
    font-size: 1.05rem;
    color: #4b5563;
    margin-bottom: 1.5rem;
}

/* ============================================== */
/* --- SECTION DES CARTES --- */
/* ============================================== */

.services-section {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* ✅ 3 colonnes fixes par défaut */
    gap: 2rem;
    padding: 2rem 0;
    max-width: 1400px;
    margin: 0 auto;
    /* ✅ centre la grille */
    justify-items: center;
}

/* Si moins de 3 cartes, centre le contenu */
.services-section:has(.service-card:nth-child(2):last-child) {
    grid-template-columns: repeat(2, 1fr);
    justify-content: center;
}

.services-section:has(.service-card:last-child:first-child) {
    grid-template-columns: 1fr;
}

/* --- Cartes individuelles --- */
.service-card {
    background-color: #fff;
    border-radius: 10px;
    padding: 1.8rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.08);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    cursor: pointer;
    border: 1px solid transparent;
    min-height: 200px;
    width: 100%;
    max-width: 400px;

    /* ✅ iOS / mobile tap comfort */
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* ✅ Fix 2 : si un overlay/pseudo-layer existe, il ne capte jamais le tap */
.service-card::before,
.service-card::after {
    pointer-events: none;
}

/* ✅ Fix 2 : le texte "Voir plus" ne doit jamais intercepter le clic */
.service-card-link {
    pointer-events: none;
}

/* --- Icône / titre / texte (styles de base) --- */
.service-icon {
    font-size: 2.5rem;
    color: var(--color-primary);
    margin-bottom: 0.8rem;
    transition: color 0.3s ease;
}

.service-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 0.5rem;
    transition: color 0.3s ease;
}

.service-description {
    color: #666;
    font-size: 0.95rem;
    line-height: 1.45;
    margin-bottom: 0.8rem;
}

.service-card-link {
    color: var(--color-secondary);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1px;
    transition: color 0.3s ease;
}

/* ========================================================= */
/* ✅ FIX 1 : Hover UNIQUEMENT sur devices avec hover réel     */
/* (évite le “tap 1 = hover / tap 2 = click” sur iOS)          */
/* ========================================================= */
@media (hover: hover) and (pointer: fine) {

    .service-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12);
        border-color: #d2d6dc;
    }

    .service-card:hover .service-icon {
        color: var(--color-secondary);
    }

    .service-card:hover .service-title {
        color: var(--color-secondary);
    }

    .service-card:hover .service-card-link {
        color: var(--color-primary);
    }
}

/* ========================================================= */
/* ✅ iOS / Touch : annule explicitement tout :hover           */
/* même si un autre CSS ajoute des hover plus spécifiques      */
/* ========================================================= */
@media (hover: none),
(pointer: coarse) {

    .service-card:hover {
        transform: none !important;
        box-shadow: 0 3px 5px rgba(0, 0, 0, 0.08) !important;
        border-color: transparent !important;
    }

    .service-card:hover .service-icon {
        color: var(--color-primary) !important;
    }

    .service-card:hover .service-title {
        color: #1f2937 !important;
    }

    .service-card:hover .service-card-link {
        color: var(--color-secondary) !important;
    }

    /* ✅ Bonus : feedback au tap (sans double-clic) */
    .service-card:active {
        transform: translateY(-2px);
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.10);
    }
}

/* ============================================== */
/* --- RESPONSIVE --- */
/* ============================================== */

/* 🖥️ 4K / très grands écrans */
@media (min-width: 1600px) {
    .services-section {
        max-width: 1600px;
        gap: 2.5rem;
    }

    .service-page-title {
        font-size: 2.6rem;
    }

    .service-card {
        max-width: 420px;
    }
}

/* 💻 Desktop moyen (1024–1599px) */
@media (max-width: 1599px) and (min-width: 1024px) {
    .services-section {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }
}

/* 📱 Tablettes horizontales & verticales (768–1023px) */
@media (max-width: 1023px) {
    .services-section {
        grid-template-columns: repeat(2, 1fr);
        /* ✅ 2 colonnes */
        gap: 1.5rem;
        padding: 1.5rem 0;
    }

    .service-card {
        padding: 1.6rem 1.3rem;
        max-width: 100%;
    }

    .service-title {
        font-size: 1.2rem;
    }
}

/* 📲 Mobiles (≤767px) */
@media (max-width: 767px) {
    .services-section {
        grid-template-columns: 1fr;
        /* ✅ une seule colonne */
        gap: 1.2rem;
        padding: 1.2rem 0;
    }

    .service-card {
        min-height: auto;
        padding: 1.5rem 1.2rem;
        max-width: 100%;
    }

    .service-page-title {
        font-size: 2rem;
    }

    .subtitle {
        font-size: 1rem;
    }

    .service-icon {
        font-size: 2.2rem;
    }
}

/* 📱 Petits mobiles (≤480px) */
@media (max-width: 480px) {
    .services-section {
        gap: 1rem;
    }

    .service-card {
        padding: 1.2rem 1rem;
    }

    .service-page-title {
        font-size: 1.7rem;
    }

    .service-title {
        font-size: 1.15rem;
    }

    .service-description {
        font-size: 0.9rem;
    }
}







/* ========================================= */
/* --- BLOC ERREUR SERVICE INDISPONIBLE --- */
/* ========================================= */
.service-error-box {
    color: #c0392b;
    background: #fdecea;
    border: 1px solid #e74c3c;
    padding: 15px 20px;
    border-radius: 10px;
    margin: 20px 0;
    text-align: center;
    font-weight: 600;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.service-error-box i {
    margin-right: 8px;
    color: #e74c3c;
}

.service-error-box small {
    display: block;
    color: #555;
    font-weight: 400;
    margin-top: 5px;
    font-size: 0.9rem;
}




/* ============================================== */
/* --- Page Contact --- */
/* ============================================== */


/* Titre principal */
.contact-main-title {
    color: var(--color-text);
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-align: center;
    position: relative;
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
}

/* Pseudo-élément qui crée le trait sous le titre */
.contact-main-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--color-secondary);
    width: 40%;
    height: 3px;
}

/* Titre de section */
.contact-section-title {
    text-align: center;
    font-size: 1.8rem;
    color: var(--color-primary);
    /* Utilisation d'une couleur plus forte */
    margin-bottom: 30px;
}

/* Texte d'introduction */
.subtitle {
    text-align: center;
    font-size: 1.125rem;
    color: #555;
    margin-bottom: 2rem;
}


/* ------------------------------------------- */
/* --- Nouvelle Carte d'Information Contact --- */
/* ------------------------------------------- */

/* Style du conteneur principal */
.contact-info-card {
    display: flex;
    flex-direction: column;
    /* Par défaut en colonne pour mobile */
    max-width: 800px;
    /* Augmente légèrement la largeur */
    margin: 50px auto;
    padding: 30px;
    background: linear-gradient(135deg, #ffffff, #f9f9f9);
    /* Fond subtil */
    border: 1px solid #e0e0e0;
    border-radius: 15px;
    /* Arrondi plus doux */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    font-family: Arial, sans-serif;
    color: #333;
    overflow: hidden;
    /* Empêche les débordements */
}

/* Logo */
.contact-logo-container {
    width: 100%;
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 2px solid var(--color-secondary, #ccc);
    /* Séparateur plus marqué */
}

.contact-logo {
    width: 120px;
    height: 120px;
    object-fit: contain;
    border-radius: 50%;
    /* Rendre le logo rond */
    border: 4px solid var(--color-primary, #0d2f70);
    /* Bordure colorée */
    padding: 5px;
    background-color: white;
}

/* Nom de la boutique */
.contact-name {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--color-text);
    text-align: center;
    margin-bottom: 20px;
    text-transform: uppercase;
}

/* Liste des informations */
.info-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Ligne d'information */
.info-list .info-line {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    padding: 10px;
    transition: background-color 0.3s ease;
    border-radius: 8px;
    cursor: default;
}

/* Effet au survol pour les infos cliquables (téléphone/mail) */
.info-list .info-line:has(a:hover) {
    background-color: var(--color-light-hover, #f0f8ff);
}

/* Icône */
.info-line i {
    font-size: 1.5rem;
    color: var(--color-secondary, #ff5722);
    margin-right: 15px;
    width: 30px;
    /* Taille fixe pour l'alignement */
    text-align: center;
}

/* Contenu (Label + Valeur) */
.info-content {
    flex-grow: 1;
}

/* Label (Adresse, Téléphone, Email) */
.info-content span {
    display: block;
    font-size: 0.9rem;
    color: #777;
    text-transform: uppercase;
    font-weight: 600;
}

/* Valeur (le contenu réel) */
.info-content p {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1.4;
}

.info-content a {
    color: var(--color-primary, #0d2f70);
    text-decoration: none;
    transition: color 0.3s ease;
}

.info-content a:hover {
    color: var(--color-secondary);
    text-decoration: underline;
}

/* Bouton Itinéraire */
.directions-btn {
    display: block;
    width: fit-content;
    margin: 30px auto 0;
    padding: 12px 25px;
    background-color: var(--color-primary, #0d2f70);
    color: white;
    text-align: center;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 700;
    transition: background-color 0.3s ease, transform 0.2s;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.directions-btn i {
    margin-right: 8px;
}

.directions-btn:hover {
    background-color: var(--color-dark-primary, #092255);
    transform: translateY(-2px);
}

/* --- Media Queries pour Desktop --- */
@media (min-width: 768px) {

    .contact-info-card {
        flex-direction: row;
        /* Revert to row layout for larger screens */
        align-items: flex-start;
        padding: 40px;
    }

    .contact-logo-container {
        width: 180px;
        /* Largeur fixe pour la colonne logo */
        margin-right: 40px;
        margin-bottom: 0;
        padding-bottom: 0;
        border-right: 2px solid var(--color-secondary, #ccc);
        border-bottom: none;
        padding-right: 40px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: auto;
        /* Hauteur ajustée */
    }

    .contact-logo {
        width: 150px;
        height: 150px;
    }

    .contact-name {
        text-align: left;
        margin-top: 0;
        margin-bottom: 30px;
        font-size: 2.5rem;
    }

    .contact-details-list {
        flex-grow: 1;
    }

    .info-list .info-line {
        margin-bottom: 20px;
    }

    .info-line i {
        font-size: 1.8rem;
    }

    .info-content p {
        font-size: 1.2rem;
    }

    .directions-btn {
        margin: 30px 0 0 auto;
        /* Aligner à droite sur desktop */
    }
}









/* =========================================================
   Google Maps – styles partagés (Contact + Horaires)
   Utilise la même structure :
   - Placeholder consentement  : #maps-consent.embed-placeholder
   - Conteneur carte/iframe    : #maps-frame-container.google-map-container
   - Iframe                    : .google-map
   ========================================================= */

/* Conteneur responsive 16:9 pour la carte */
.google-map-container {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    /* moderne ; fallback ci-dessous */
    max-width: 1100px;
    /* borne large commune */
    margin: 0 auto;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.10);
    background: #fff;
}

/* Fallback si aspect-ratio non supporté */
@supports not (aspect-ratio: 16 / 9) {
    .google-map-container {
        height: 0;
        padding-bottom: 56.25%;
    }
}

.google-map-container>.google-map,
.google-map-container>iframe.google-map {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* Révélation douce (après acceptation) */
.google-map-container.gmaps-reveal {
    animation: gmapsFadeIn .25s ease-out 1;
}

@keyframes gmapsFadeIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* -------- Placeholder de consentement (commun) -------- */
.embed-placeholder {
    border: 1px dashed var(--color-secondary, #ff5722);
    border-radius: 10px;
    padding: 18px;
    background: #fff7f2;
    color: #333;
    margin-top: 12px;
}

.embed-placeholder-inner {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

.embed-icon {
    font-size: 2rem;
    margin-bottom: .5rem;
    color: var(--color-secondary, #ff5722);
}

.embed-text {
    margin: .25rem 0 .75rem;
    font-size: 1rem;
}

.embed-actions {
    display: inline-flex;
    gap: .5rem;
    margin-bottom: .5rem;
}

.embed-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border: 1px solid #ddd;
    padding: .55rem .9rem;
    border-radius: 8px;
    cursor: pointer;
    background: #fff;
    transition: transform .15s ease, box-shadow .15s ease, background .2s ease, border-color .2s ease;
    font: inherit;
}

.embed-btn i {
    font-size: .95rem;
}

.embed-btn.accept {
    background: var(--color-primary, #0d2f70);
    color: #fff;
    border-color: var(--color-primary, #0d2f70);
}

.embed-btn.accept:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
}

.embed-btn.refuse:hover {
    background: #fafafa;
    transform: translateY(-1px);
}

.embed-note,
.embed-alt,
.embed-fallback {
    font-size: .9rem;
    color: #555;
    margin: .35rem 0 0;
}

.embed-fallback a {
    color: var(--color-primary, #0d2f70);
    text-decoration: underline;
}






/* ============================================== */
/* --- Page Avis --- */
/* ============================================== */

/* --- 1. En-tête de la page --- */


.avis-main-title {
    color: var(--color-text);
    font-size: 3rem;
    /* Plus grand et plus impactant */
    font-weight: 800;
    letter-spacing: 1px;
    position: relative;
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
}

/* Pseudo-élément qui crée le trait sous le titre (style cohérent avec l'accueil) */
.avis-main-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--color-secondary);
    width: 60px;
    /* Trait court et épais */
    height: 5px;
    border-radius: 3px;
}

.subtitle {
    font-size: 1.25rem;
    color: #555;
    margin-top: 15px;
}

/* --- 2. Bouton "Donnez votre avis" --- */
.avis-div {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    margin-bottom: 40px;
}

/* Style du lien-bouton (Ajusté pour plus d'élégance) */
.avis-boutton {
    text-decoration: none;
    padding: 15px 35px;
    border: none;
    border-radius: 50px;
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    /* Nouveau dégradé pour un look plus moderne */
    background: linear-gradient(90deg, var(--color-primary, #0d2f70), var(--color-secondary, #a00000));
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

/* Effet de survol */
.avis-boutton:hover {
    transform: translateY(-5px);
    /* Effet plus prononcé au survol */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
    background: linear-gradient(90deg, var(--color-secondary, #a00000), var(--color-primary, #0d2f70));
}

/* Style du texte à l'intérieur du bouton */
.avis-boutton span {
    display: block;
    transform: translateY(0);
}


/* ------------------------------------------------------------------ */
/* --- 3. Section des avis (Flux Vertical - NON MODIFIÉ EN FLUX) --- */
/* ------------------------------------------------------------------ */

.avis-section {
    /* Utilisation de Flexbox pour un affichage en colonne vertical simple */
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Centre les cartes */
    gap: 30px;
    padding: 0 20px;
    max-width: 1000px;
    /* Réduit la largeur pour une meilleure lisibilité du texte long */
    margin: 0 auto 80px;
}

/* --- 4. Style de la Carte d'Avis (MODIFIÉ pour la présentation) --- */
.avis-card {
    background-color: #fff;
    border-radius: 12px;
    padding: 30px;
    /* Nouvelle ombre plus douce et élégante */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* Bordure latérale subtile */
    border-left: 4px solid var(--color-secondary);
    width: 100%;
    max-width: 1000px;
    /* La carte prendra la largeur max du .avis-section */
    box-sizing: border-box;
}

.avis-card:hover {
    transform: translateY(-8px);
    /* Effet plus prononcé au survol */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
    border-color: var(--color-primary);
    /* Changement de couleur au survol */
}


/* Contenu de la carte */
.avis-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    position: relative;
    z-index: 1;
}

.avis-auteur {
    font-weight: 700;
    color: var(--color-primary);
    font-size: 1.2rem;
    margin: 0;
}

.avis-etoiles {
    color: #ffc107;
    /* Or vif pour les étoiles (standard) */
    font-size: 1.1rem;
}

.avis-commentaire {
    font-style: italic;
    color: #333;
    /* Texte plus foncé pour meilleure lisibilité */
    margin-bottom: 20px;
    line-height: 1.6;
    position: relative;
    z-index: 1;
}

.avis-date {
    font-size: 0.9rem;
    color: #888;
    display: block;
}

/* Style si aucun avis n'est disponible */
.no-avis {
    text-align: center;
    font-size: 1.2rem;
    color: #777;
    padding: 40px;
    border: 1px dashed #ccc;
    border-radius: 8px;
    max-width: 600px;
    margin: 40px auto;
}

.avis-edit-icon {
    position: absolute;
    top: 15px;
    right: 170px;
    color: var(--color-secondary);
    font-size: 1.4rem;
    cursor: pointer;
    background: #ffffff;
    padding: 8px;
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    z-index: 10;
    transition: background-color 0.2s;
}

.avis-edit-icon:hover {
    color: #ffffff;
    background-color: var(--color-primary);
}




/* ============================================== */
/* --- NOUVEAU: BOUTON RETOUR EN HAUT --- */
/* ============================================== */
.scroll-to-top-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 99;
    width: 50px;
    height: 50px;
    background-color: var(--color-primary);
    /* CHANGEMENT DE COULEUR ICI */
    color: #fff;
    /* Couleur de la flèche, inversée pour la lisibilité */
    border: none;
    border-radius: 50%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    opacity: 0;
    /* Caché par défaut */
    visibility: hidden;
    /* Caché par défaut */
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out, transform 0.3s ease, box-shadow 0.3s ease;
}

.scroll-to-top-btn.show {
    opacity: 1;
    visibility: visible;
}

.scroll-to-top-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

.scroll-to-top-btn i {
    pointer-events: none;
    /* Empêche les clics de se faire sur l'icône, mais sur le bouton */
}





/* ============================================================ */
/* 🎨 PAGE FAQ - TABAC BULTEZ                                   */
/* ============================================================ */

/* --- 1. Conteneur Global et Layout --- */
.page-containerFAQ {
    background-color: var(--color-background, #f7f7f7);
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    padding: 60px 40px 80px;
    box-sizing: border-box;
}

/* ✅ Desktop : layout en GRID (évite que le contenu passe sous le sommaire en fixed JS) */
.page-containerFAQ .faq-container-flex {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 30px;
    align-items: flex-start;
    justify-content: center;
    margin-top: 40px;
    position: relative;
}

/* --- 2. En-tête de la Page (H1) --- */
.faq-main-title {
    color: var(--color-text, #222);
    font-size: 2.8rem;
    font-weight: 800;
    text-align: center;
    position: relative;
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
}

.faq-main-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--color-secondary);
    width: 35%;
    height: 4px;
    border-radius: 3px;
}

.faq-page-intro {
    font-size: 1.1rem;
    text-align: center;
    color: #555;
    margin-bottom: 3rem;
    line-height: 1.6;
}

/* --- 3. Sommaire de navigation (ASIDE) --- */
.faq-summary {
    grid-column: 1;
    align-self: flex-start;

    width: 100%;
    box-sizing: border-box;

    padding: 20px;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    border-left: 5px solid var(--color-primary);

    /* Sticky géré par JS */
    position: relative;
    top: auto;
    left: auto;
    max-height: none;
    overflow: visible;
}

.faq-summary h3 {
    margin-top: 0;
    font-size: 1.5rem;
    color: var(--color-primary);
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
    margin-bottom: 15px;
}

.faq-summary ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.faq-summary li {
    margin-bottom: 5px;
}

.faq-summary li a {
    display: block;
    padding: 8px 10px;
    color: #333;
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.3s ease;
    font-weight: 500;
}

.faq-summary li a:hover {
    background-color: var(--color-primary);
    color: #fff;
}

.faq-summary li a.active {
    font-weight: 700;
    color: var(--color-secondary);
    border-left: 3px solid var(--color-secondary);
    background-color: rgba(0, 128, 255, 0.08);
    border-radius: 4px;
}

/* --- 4. Contenu Principal --- */
.faq-content {
    grid-column: 2;
    min-width: 0;
}

/* --- 5. Sections --- */
.faq-section {
    margin-bottom: 60px;
    border-top: 2px dashed #ddd;
    padding-top: 30px;
}

.faq-section-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-secondary);
    margin-bottom: 30px;
    padding-left: 10px;
    border-left: 4px solid var(--color-secondary);
}

/* --- 6. Grille des Questions --- */
.faq-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    width: 100%;
    justify-items: stretch;
}

/* --- 7. Carte Question-Réponse --- */
.faq-item {
    width: 100%;
    display: block;

    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
    overflow: hidden;
    position: relative;
}

/* ✅ FIX iPad/Safari : sécuriser le comportement natif <details>/<summary> */
.faq-item details {
    display: block;
    width: 100%;
}

.faq-item details>summary {
    display: block;
    width: 100%;
    list-style: none;
    -webkit-appearance: none;
    appearance: none;
}

.faq-item details>summary::-webkit-details-marker {
    display: none;
}

.faq-item details>summary::marker {
    display: none;
}

/* --- Icone édition admin --- */
.faq-edit-icon {
    position: absolute;
    top: 10px;
    right: 70px;
    width: 24px;
    height: 24px;
    text-align: center;
    font-size: 0.85rem;
    border: 1px solid var(--color-primary);
    border-radius: 50%;
    color: var(--color-primary);
    background: #fff;
    cursor: pointer;
    opacity: 0.8;
    transition: all 0.25s ease;
    padding-top: 5px;
    z-index: 2;
}

.faq-edit-icon:hover {
    background-color: var(--color-primary);
    color: #fff;
    opacity: 1;
    transform: scale(1.1);
}

/* --- Question (summary) --- */
/* ✅ Chevron en absolute => largeur stable fermée/ouverte */
.faq-question {
    position: relative;
    width: 100%;
    box-sizing: border-box;

    font-weight: 700;
    font-size: 1.15rem;
    color: var(--color-primary);
    padding: 18px 60px 18px 25px;
    cursor: pointer;
    background-color: #fff;
    transition: background-color 0.3s ease;
    user-select: none;
}

.faq-question:hover {
    background-color: #f9fafb;
}

/* Chevron */
.faq-icon {
    position: absolute;
    right: 22px;
    top: 50%;
    width: 20px;
    height: 20px;
    transform: translateY(-50%) rotate(0deg);
    transition: transform 0.3s ease;
    pointer-events: none;
}

.faq-item details[open] .faq-icon {
    transform: translateY(-50%) rotate(180deg);
}

/* --- Réponse (contenu) --- */
.faq-answer {
    padding: 0 25px 20px;
    color: #444;
    border-top: 1px solid #f0f0f0;
}

.faq-answer p {
    margin-top: 15px;
    line-height: 1.6;
}

/* --- Bouton externe optionnel --- */
.faq-button {
    display: inline-block;
    background-color: var(--color-secondary);
    color: #fff;
    padding: 10px 20px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    margin-top: 15px;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.faq-button:hover {
    background-color: var(--color-primary);
    transform: translateY(-2px);
}

/* --- 8. Carte “ajouter une question” (Admin) --- */
.add-card {
    background-color: #f7f9fc;
    border: 2px dashed var(--color-primary);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    cursor: pointer;
    transition: background-color 0.3s ease;
    padding: 30px;
    text-align: center;
}

.add-card:hover {
    background-color: #eef5ff;
}

/* ========================================================= */
/* 🔁 RESPONSIVE — Breakpoints multi-niveaux                 */
/* ========================================================= */

@media (min-width: 1600px) {
    .page-containerFAQ {
        max-width: 1500px;
        padding: 80px 60px;
    }

    .faq-main-title {
        font-size: 3rem;
    }
}

@media (max-width: 1599px) and (min-width: 1024px) {
    .page-containerFAQ {
        max-width: 1200px;
        padding: 60px 30px;
    }

    .page-containerFAQ .faq-container-flex {
        grid-template-columns: 260px 1fr;
    }

    .faq-main-title {
        font-size: 2.5rem;
    }
}

/* === 🧑‍💻 Tablettes (768–1023px) === */
@media (max-width: 1023px) {
    .page-containerFAQ {
        width: 95%;
        padding: 40px 25px;
    }

    /* ✅ IMPORTANT : sinon “shrink-to-fit” et zone fantôme à droite */
    .page-containerFAQ .faq-container-flex {
        display: flex;
        flex-direction: column;
        gap: 30px;
        align-items: stretch;
        /* ✅ FIX PRINCIPAL */
        justify-content: flex-start;
    }

    .faq-summary {
        width: 100%;
        position: static;
        max-height: none;
        overflow: visible;
        order: -1;
        margin-bottom: 20px;
    }

    /* ✅ Force le contenu à prendre toute la largeur en permanence */
    .faq-content,
    .faq-section,
    .faq-grid,
    .faq-item,
    .faq-item details,
    .faq-item details>summary.faq-question {
        width: 100%;
        max-width: 100%;
        align-self: stretch;
        box-sizing: border-box;
    }

    .faq-main-title {
        font-size: 2.2rem;
    }

    .faq-section-title {
        font-size: 1.5rem;
    }

    .faq-question {
        font-size: 1.05rem;
        padding: 15px 55px 15px 20px;
    }

    .faq-answer {
        padding: 0 20px 15px;
    }

    .faq-icon {
        right: 18px;
        width: 18px;
        height: 18px;
    }
}

/* === 📱 Mobiles moyens (480–767px) === */
@media (max-width: 767px) {
    .page-containerFAQ {
        width: 100%;
        padding: 30px 18px 50px;
    }

    .faq-main-title {
        font-size: 1.9rem;
        margin-bottom: 1.2rem;
    }

    .faq-page-intro {
        font-size: 1rem;
        margin-bottom: 2rem;
    }

    .faq-summary {
        padding: 15px;
        border-left: 4px solid var(--color-primary);
    }

    .faq-section-title {
        font-size: 1.3rem;
    }

    .faq-question {
        font-size: 1rem;
        padding: 14px 52px 14px 16px;
    }

    .faq-icon {
        width: 18px;
        height: 18px;
        right: 16px;
    }

    .faq-button {
        font-size: 0.9rem;
        padding: 8px 15px;
    }
}

/* === 📱 Petits mobiles (≤479px) === */
@media (max-width: 479px) {
    .page-containerFAQ {
        padding: 25px 14px;
    }

    .faq-main-title {
        font-size: 1.6rem;
    }

    .faq-summary {
        padding: 12px;
    }

    .faq-section-title {
        font-size: 1.15rem;
    }

    .faq-question {
        font-size: 0.95rem;
        padding: 12px 48px 12px 14px;
    }

    .faq-answer {
        padding: 0 14px 12px;
    }

    .faq-button {
        font-size: 0.85rem;
        padding: 7px 12px;
    }
}



















/* ========================================= */
/* --- NOUVEAU STYLE POUR LA PAGE FDJ --- */
/* ========================================= */

/* Conteneur principal de la page FDJ */
.fdj-page-wrapper {
    background-color: var(--color-background);
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 20px;
}

.fdj-main-title {
    color: var(--color-text);
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-align: center;
    position: relative;
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
}

/* Pseudo-élément qui crée le trait sous le titre */
.fdj-main-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--color-secondary);
    width: 35%;
    height: 3px;
}

/* Texte d'introduction */
.fdj-page-intro {
    font-size: 1.125rem;
    color: #555;
    text-align: center;
    margin-bottom: 2rem;
}

/* Style de la section entière */
.fdj-section {
    margin-bottom: 3rem;
}

/* Titres des sections (Jeux de tirage, Jeux de grattage) */
.fdj-section-title {
    color: var(--fdj-red);
    font-size: 1.5rem;
    font-weight: 700;
    text-transform: uppercase;
    position: relative;
    margin-bottom: 2rem;
    text-align: center;
}

/* Sous-titre pour la grille des bulletins (Ajouté) */
.fdj-subtitle {
    color: var(--fdj-blue);
    font-size: 1.3rem;
    font-weight: 600;
    text-align: center;
    margin-top: 3rem;
    margin-bottom: 1.5rem;
}

/* Conteneur des cartes en grille */
.fdj-games-grid {
    display: grid;
    /* Utilisation de minmax(280px, 1fr) pour un meilleur responsive */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    justify-items: center;
    justify-content: center;
}

/* --- Séparateur visuel simple --- */
.text-separator {
    width: 50%;
    height: 1px;
    background-color: #ddd;
    margin: 40px auto;
}

/* ------------------------------------------------------------------ */
/* --- STYLES SPÉCIFIQUES AUX JEUX (Cartes) --- */
/* ------------------------------------------------------------------ */

/* Cartes de jeu individuelles */
.fdj-game-card {
    background-color: #fff;
    padding: 1.5rem;
    border-radius: 1rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    position: relative;
    width: 100%;
}

/* Effet au survol des cartes */
.fdj-game-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
    border-color: var(--fdj-blue);
}

/* ========================================================= */
/* ✅ SLOT IMAGE FDJ (bouton trigger) + centrage image        */
/* - évite les décalages (mobile)                            */
/* - garde tes tailles d’images (fdj-game-card-image)         */
/* ========================================================= */

/* Base trigger : on lui donne une “zone” comme Papeterie */
.fdj-lightbox-trigger {
    -webkit-appearance: none;
    appearance: none;

    width: 100%;
    height: 210px;

    border: 1px solid rgba(0, 0, 0, 0.06);
    background: #ffffff;

    padding: 10px;
    margin: 0 0 0.45rem 0;
    border-radius: 0.75rem;
    box-sizing: border-box;

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

    cursor: zoom-in;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    line-height: 0;

    /* annule tes anciens styles bouton */
    outline: none;
}

/* Focus accessible */
.fdj-lightbox-trigger:focus-visible {
    outline: 3px solid var(--color-secondary);
    outline-offset: 3px;
}

/* ✅ IMPORTANT : pour que l’image soit centrée dans le slot
   on ne force PAS width/height sur l’image dans le trigger.
   On laisse l’image gérer sa taille et on limite par max-* */
.fdj-lightbox-trigger .fdj-game-card-image,
.fdj-lightbox-trigger .pmu-game-card-image {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    margin: 0;
    display: block;

    object-fit: contain;
    object-position: center center;
}

/* Petit feedback hover desktop */
@media (hover: hover) and (pointer: fine) {
    .fdj-lightbox-trigger:hover {
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
    }
}

/* Hint “appuyer pour agrandir” (tu l’utilises déjà) */
.papeterie-zoom-hint {
    margin: 0;
    padding: 0;
    font-size: 0.85rem;
    color: #6b7280;
    text-align: center;
    width: 100%;
}

/* Image du jeu (hors lightbox / hors slot) */
.fdj-game-card-image {
    width: 9rem;
    height: 9rem;
    object-fit: contain;
    margin-bottom: 1rem;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
}

.pmu-game-card-image {
    width: 20rem;
    height: 20rem;
    object-fit: contain;
    margin-bottom: 1rem;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
}

/* Titre du jeu dans la carte */
.fdj-game-card-title {
    color: var(--fdj-blue);
    font-size: 1.25rem;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 0.5rem;
}

/* Description du jeu dans la carte */
.fdj-game-card-description {
    color: #555;
    font-size: 0.9rem;
}

/* ------------------------------------------------------------------ */
/* --- RIBBON DE DATE DE SORTIE (AJOUTÉ POUR LES JEUX DE GRATTAGE) --- */
/* ------------------------------------------------------------------ */
.ribbon-container {
    position: absolute;
    top: -2px;
    /* Ajusté pour se coller au haut de la carte */
    left: -2px;
    overflow: hidden;
    width: 150px;
    height: 150px;
    text-align: right;
    pointer-events: none;
    /* Permet de cliquer à travers le ruban */
}

.ribbon {
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    padding: 7px 0;
    width: 200px;
    background-color: var(--fdj-red);
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
    position: absolute;
    top: 25px;
    left: -50px;
    transform: rotate(-45deg);
}

.ribbon-date {
    display: block;
    font-size: 0.85rem;
    margin-top: 2px;
}

/* ------------------------------------------------------------------ */
/* --- STYLES SPÉCIFIQUES PARIONS SPORT --- */
/* ------------------------------------------------------------------ */

/* Conteneur d'introduction général pour Parions Sport (texte d'explication) */
.pmu-page-intro-parions {
    background-color: #f7f9fc;
    border-left: 5px solid var(--fdj-red);
    padding: 20px 25px;
    margin-bottom: 2.5rem;
    border-radius: 8px;
    line-height: 1.6;
    color: #333;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.pmu-page-intro-parions p {
    margin-bottom: 15px;
}

/* Liste des sports */
.sport-list {
    list-style: none;
    padding: 0;
    margin: 15px 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.sport-list li {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 20px;
    padding: 5px 15px;
    margin: 5px 10px;
    font-size: 0.9rem;
    color: var(--fdj-blue);
    font-weight: 500;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Information QR Code (mise en évidence) */
.qr-code-info {
    background-color: #e8f5e9;
    padding: 15px;
    border-radius: 8px;
    text-align: center;
    font-weight: 600;
    border: 1px dashed var(--fdj-red);
    margin-top: 20px;
}

.qr-code-info br {
    display: none;
}

.qr-code-info strong {
    color: var(--fdj-red);
    font-size: 1.1rem;
}

/* Style des cartes Parions Sport (Bulletins) */
.parions-card {
    border: 3px solid var(--fdj-yellow);
    position: relative;
}

/* Tag pour le type de bulletin */
.parions-type-tag {
    position: absolute;
    top: 0;
    right: 0;
    background-color: var(--fdj-red);
    color: white;
    padding: 5px 10px;
    font-size: 0.75rem;
    font-weight: 700;
    border-bottom-left-radius: 1rem;
    text-transform: uppercase;
}

/* ------------------------------------------------------------------ */
/* --- ÉLÉMENTS SPÉCIFIQUES À L'ÉDITION (ADMIN) --- */
/* ------------------------------------------------------------------ */

/* 1. Icône d'édition (le petit crayon) */
.fdj-edit-icon {
    position: absolute;
    top: 15px;
    right: 15px;
    color: var(--fdj-blue);
    font-size: 1.4rem;
    cursor: pointer;
    background: #ffffff;
    padding: 8px;
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    z-index: 10;
    transition: background-color 0.2s;
}

.fdj-edit-icon:hover {
    color: #ffffff;
    background-color: var(--fdj-blue);
}

/* 2. Carte pour l'ajout d'un nouvel élément */
.fdj-game-card.fdj-add-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 3px dashed var(--color-secondary);
    cursor: pointer;
    background-color: var(--color-background-light);
    min-height: 250px;
    box-shadow: none;
}

.fdj-add-card:hover {
    border-color: var(--fdj-red);
    background-color: #ffeaea;
    transform: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.fdj-add-icon {
    font-size: 3rem;
    color: var(--fdj-red);
    margin-bottom: 10px;
}

/* ------------------------------------------------------------------ */
/* --- MODALE D'ÉDITION (CRUD) --- */
/* ------------------------------------------------------------------ */

.fdj-edit-modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
}

.fdj-edit-modal-content {
    background-color: #fefefe;
    margin: 5% auto;
    padding: 30px;
    border: none;
    width: 90%;
    max-width: 600px;
    border-radius: 12px;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.fdj-close-button {
    color: #aaa;
    float: right;
    font-size: 32px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
}

.fdj-close-button:hover,
.fdj-close-button:focus {
    color: var(--fdj-red);
    text-decoration: none;
}

.fin-close-button {
    color: #aaa;
    float: right;
    font-size: 32px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
}

.fin-close-button:hover,
.fin-close-button:focus {
    color: var(--fdj-red);
    text-decoration: none;
}

.fdj-fin-btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
}

.fdj-fin-btn {
    background-color: var(--color-primary);
    color: #fff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.fdj-fin-btn:hover {
    background-color: #1e3d2f;
    border: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}

/* Styles pour le formulaire */
.fdj-edit-form-group {
    margin-bottom: 20px;
}

.fdj-edit-form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #333;
}

.fdj-edit-form-group input[type="text"],
.fdj-edit-form-group input[type="date"],
.fdj-edit-form-group textarea,
.fdj-edit-form-group select {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-sizing: border-box;
    font-size: 1rem;
    transition: border-color 0.2s;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.fdj-edit-form-group textarea {
    min-height: 100px;
    resize: vertical;
}

.fdj-edit-form-group input:focus,
.fdj-edit-form-group input[type="date"]:focus,
.fdj-edit-form-group textarea:focus {
    border-color: var(--fdj-blue);
    outline: none;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.2);
}

/* Boutons d'action */
.fdj-edit-form-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 15px;
    margin-top: 30px;
    padding-top: 15px;
    border-top: 1px solid #eee;
}

.fdj-submit-btn,
.fdj-cancel-btn,
.fdj-delete-btn {
    padding: 12px 25px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 700;
    transition: background-color 0.2s, transform 0.1s;
}

.fdj-submit-btn {
    background-color: var(--fdj-blue);
    color: white;
}

.fdj-submit-btn:hover {
    background-color: darkblue;
}

.fdj-cancel-btn {
    background-color: #e9ecef;
    color: #333;
}

.fdj-cancel-btn:hover {
    background-color: #dee2e6;
}

.fdj-delete-btn {
    background-color: var(--fdj-red);
    color: white;
    margin-right: auto;
}

.fdj-delete-btn:hover {
    background-color: #c82333;
}

/* 3. Styles pour le Drag & Drop (Téléversement d'image) */
.fdj-file-label {
    display: block;
    border: 3px dashed var(--fdj-blue);
    padding: 30px 20px;
    text-align: center;
    margin-top: 10px;
    cursor: pointer;
    background-color: #f8faff;
    transition: background-color 0.3s, border-color 0.3s;
    border-radius: 6px;
    font-weight: 500;
    color: var(--fdj-blue);
}

.fdj-file-label i {
    font-size: 1.2rem;
    margin-right: 10px;
}

.fdj-file-label:hover,
.fdj-file-label.drag-over {
    background-color: #e6f0ff;
    border-color: var(--fdj-dark-blue);
}

/* ------------------------------------------------------------------ */
/* --- APERÇU IMAGE (Modal FDJ) --- */
/* ------------------------------------------------------------------ */

/* Conteneur optionnel si tu veux mieux contrôler l’alignement */
.fdj-preview-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 12px;
    width: 100%;
}

/* L’image preview elle-même */
#fdjPreview {
    display: none;
    max-width: 100%;
    width: min(320px, 100%);
    max-height: 220px;
    object-fit: contain;
    border-radius: 12px;
    border: 1px solid #e6e6e6;
    background: #fff;
    padding: 6px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    margin: 12px auto 0;
}

/* Optionnel : centre visuellement le bloc upload */
.fdj-edit-form-group .fdj-file-label {
    margin-left: auto;
    margin-right: auto;
}

/* Responsive : sur mobile, on réduit un peu la hauteur max */
@media (max-width: 480px) {
    #fdjPreview {
        width: min(260px, 100%);
        max-height: 180px;
    }
}

/* ========================================================= */
/* ✅ FDJ LIGHTBOX (overlay noir) + toolbar zoom +/- reset     */
/* - Zoom UNIQUEMENT par boutons (JS)                         */
/* - Pas de wheel/pinch (géré côté JS)                        */
/* ========================================================= */

/* Lightbox overlay */
.fdj-lightbox {
    position: fixed;
    inset: 0;
    z-index: 5000;

    display: none;
    /* cachée par défaut */
    align-items: center;
    justify-content: center;

    background: rgba(0, 0, 0, 0.92);
    /* noir plus profond */
    padding:
        max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
}

.fdj-lightbox.is-open {
    display: flex;
}

/* Close */
.fdj-lightbox__close {
    position: fixed;
    top: max(12px, env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 32px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.fdj-lightbox__close:hover {
    background: rgba(255, 255, 255, 0.22);
}

/* Toolbar */
.fdj-lightbox__toolbar {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: max(12px, env(safe-area-inset-bottom));
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.fdj-lightbox__btn {
    -webkit-appearance: none;
    appearance: none;
    min-width: 44px;
    height: 44px;
    padding: 0 14px;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    font-weight: 800;
    font-size: 18px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.fdj-lightbox__btn:hover {
    background: rgba(255, 255, 255, 0.20);
}

.fdj-lightbox__btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.fdj-lightbox__btn--reset {
    font-weight: 700;
    font-size: 14px;
}

.fdj-lightbox__zoom {
    color: #fff;
    font-weight: 700;
    min-width: 56px;
    text-align: center;
}

/* Content (scrollable pour naviguer quand zoom > 1) */
.fdj-lightbox__content {
    max-width: 96vw;
    max-height: 92vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 14px;
    background: transparent;
    overscroll-behavior: contain;
}

/* Image */
.fdj-lightbox__img {
    display: block;
    max-width: 96vw;
    max-height: 92vh;
    width: auto;
    height: auto;
    border-radius: 14px;
    margin: auto;
    background: transparent;

    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
    /* empêche drag */
}

/* Scroll lock (utilisé par tes scripts via classe) */
html.scroll-locked,
body.scroll-locked {
    overflow: hidden;
}

body.scroll-locked {
    padding-right: var(--scrollbar-width, 0);
}

/* Responsive slot trigger */
@media (max-width: 1023px) {
    .fdj-lightbox-trigger {
        height: 190px;
        padding: 10px;
    }
}

@media (max-width: 767px) {
    .fdj-lightbox-trigger {
        height: 170px;
        padding: 10px;
    }
}

@media (max-width: 480px) {
    .fdj-lightbox-trigger {
        height: 155px;
        padding: 10px;
    }

    .fdj-lightbox__toolbar {
        gap: 8px;
        padding: 8px 10px;
    }

    .fdj-lightbox__btn {
        min-width: 42px;
        height: 42px;
        padding: 0 12px;
    }

    .fdj-lightbox__content {
        max-width: 94vw;
        max-height: 88vh;
    }

    .fdj-lightbox__img {
        max-width: 94vw;
        max-height: 88vh;
    }
}




/* ========================================================= */
/* FIN-FDJ : layout en LISTE (row) + overrides lightbox slot  */
/* ========================================================= */

/* La liste (pas une grille) */
.fdj-games-grid.fdj-fin-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    justify-content: flex-start;
    align-items: stretch;
}

/* Card fin-fdj */
.fdj-game-card.fdj-fin-card {
    text-align: left;
    align-items: stretch;
    /* override du center */
}

/* Layout interne : image à gauche, contenu à droite */
.fdj-fin-row {
    display: grid;
    grid-template-columns: 170px 1fr;
    gap: 1.25rem;
    align-items: center;
}

/* Zone gauche */
.fdj-fin-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* ✅ IMPORTANT :
   le bouton image fin-fdj utilise .fdj-lightbox-trigger
   MAIS on NE VEUT PAS du "slot" (height:210px, bordure, padding...)
   Donc on override ici pour garder un bouton compact */
.fdj-lightbox-trigger.fdj-fin-imagebtn {
    width: auto;
    height: auto;
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Image fin-fdj (taille stable) */
.fdj-game-card-image.fdj-fin-image {
    width: 140px;
    height: 140px;
    object-fit: contain;
    margin: 0;
}

/* Hint */
.fdj-fin-hint {
    margin: 10px 0 0;
    font-size: 0.9rem;
    opacity: 0.75;
    text-align: center;
}

/* Zone droite */
.fdj-fin-right {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.fdj-fin-title {
    margin: 0;
}

.fdj-meta.fdj-fin-meta {
    margin-top: 0.25rem;
    text-align: left;
    display: grid;
    gap: 0.25rem;
}

.fdj-fin-desc {
    margin: 0;
    max-width: 70ch;
}

/* Card "Ajouter" en pleine largeur dans la liste */
.fdj-game-card.fdj-add-card.fdj-fin-add-card {
    width: 100%;
    min-height: 160px;
}

/* Petit style pour le nom de fichier */
.fdj-file-info {
    margin: 8px 0 0;
    font-size: 0.9rem;
    color: #555;
}

/* Preview fin-fdj (au lieu du style inline) */
#finPreview {
    display: none;
    max-width: 100%;
    width: min(320px, 100%);
    max-height: 220px;
    object-fit: contain;
    border-radius: 12px;
    border: 1px solid #e6e6e6;
    background: #fff;
    padding: 6px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    margin: 12px auto 0;
}

/* Breakpoints */
@media (max-width: 900px) {
    .fdj-fin-row {
        grid-template-columns: 150px 1fr;
        gap: 1rem;
    }

    .fdj-game-card-image.fdj-fin-image {
        width: 130px;
        height: 130px;
    }
}

@media (max-width: 640px) {
    .fdj-fin-row {
        grid-template-columns: 1fr;
        gap: 0.9rem;
    }

    .fdj-fin-left {
        align-items: center;
    }

    .fdj-fin-right {
        text-align: left;
    }

    .fdj-game-card-image.fdj-fin-image {
        width: 150px;
        height: 150px;
    }
}

@media (max-width: 420px) {
    .fdj-game-card-image.fdj-fin-image {
        width: 140px;
        height: 140px;
    }

    .fdj-fin-hint {
        font-size: 0.85rem;
    }
}




/* ------------------------------------------------------------------ */
/* --- Animation chargement FDJ, État, PMU... --- */
/* ------------------------------------------------------------------ */

/* ✅ Par défaut : totalement caché => aucun faux départ */
#loader-container {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(30, 30, 30, 0.95);

    /* important : caché par défaut */
    display: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    justify-content: center;
    align-items: center;
    z-index: 9999;

    /* fade-out */
    transition: opacity 0.4s ease, visibility 0s;
}

/* ✅ ON : on affiche + on rend visible */
html.fdj-loader-ready #loader-container {
    display: flex;
    /* ✅ manquait */
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    /* fade-in */
    transition: opacity 0.2s ease, visibility 0s;
}

/* ✅ HIDE : on garde display:flex le temps de l’opacité, puis visibility coupe les clics */
html.fdj-loader-hide #loader-container {
    display: flex;
    /* ✅ important pour que l’opacité ait le temps */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}

/* ✅ OFF : coupure totale */
html.fdj-loader-off #loader-container {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* ✅ Logo : aucune anim par défaut */
#loader-logo {
    max-width: 250px;
    max-height: 250px;
    opacity: 1;

    animation: none;
    transform: rotate(0deg);
    will-change: transform;
}

/* ✅ on démarre l’anim seulement quand JS ajoute la classe */
#loader-logo.fdj-spin {
    animation: spin 3s ease-in-out forwards;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* 🔒 Blocage du scroll pendant l'animation */
html.scroll-locked,
body.scroll-locked {
    overflow: hidden;
}

/* ✅ Compense la scrollbar pour éviter le “saut” horizontal */
body.scroll-locked {
    padding-right: var(--scrollbar-width, 0);
}








/* ========================================= */
/* --- NOUVEAU STYLE POUR LA PAGE COLIS --- */
/* ========================================= */

.colis-page-wrapper {
    background-color: var(--color-background);
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 20px;
}

.colis-main-title {
    color: var(--color-text);
    font-size: 2.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-align: center;
    position: relative;
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
}

/* Pseudo-élément qui crée le trait sous le titre */
.colis-main-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--color-secondary);
    width: 50%;
    height: 3px;
}

.colis-page-intro {
    font-size: 1.125rem;
    text-align: center;
    color: #4b5563;
    margin-bottom: 2rem;
}

.colis-section {
    margin-bottom: 3rem;
}

.colis-section-title {
    font-size: 1.8rem;
    /* Légèrement augmenté pour les sous-sections */
    font-weight: 600;
    margin-bottom: 1.5rem;
    text-align: center;
    color: #374151;
}

/* --- STYLE DES CARTES DE SERVICE (POINTS RELAIS & TRANSPORTEURS) --- */

/* Renommé pour être plus générique (ancien .colis-games-grid) */
.colis-cards-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
}

/* Renommé pour être plus générique (ancien .colis-game-card) */
.colis-service-card {
    background-color: #fff;
    padding: 1.5rem;
    border-radius: 0.75rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    border: 2px solid transparent;
    width: 300px;
}

.colis-service-card:hover {
    transform: translateY(-5px);
    /* Modification légère pour différencier du scale */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    border-color: var(--color-secondary, #b8bcc2);
}

.colis-game-card-image {
    /* Maintenu car la balise image n'a pas été renommée */
    width: 8rem;
    /* Légèrement réduit pour un meilleur espacement */
    height: 8rem;
    margin-bottom: 1rem;
    object-fit: contain;
}

.colis-game-card-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: #1f2937;
}

.colis-game-card-description {
    color: #6b7280;
    font-size: 0.875rem;
}

/* --- STYLE DE LA GRILLE DES MARQUES PARTENAIRES --- */

.marques-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    /* Espacement plus petit pour les logos */
    margin-top: 2rem;
}

.marque-logo-wrapper {
    /* Conteneur pour s'assurer que tous les logos ont une hauteur égale */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    border-radius: 0.5rem;
    height: 80px;
    /* Hauteur fixe pour aligner les conteneurs */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    /* Ombre légère */
    background-color: #f9fafb;
}

.marque-logo {
    max-height: 50px;
    /* Taille maximale du logo dans son conteneur */
    max-width: 100px;
    object-fit: contain;
    filter: grayscale(80%);
    /* Les logos sont généralement plus beaux en nuance de gris */
    opacity: 0.8;
    transition: filter 0.3s ease, opacity 0.3s ease;
}

.marque-logo-wrapper:hover .marque-logo {
    filter: grayscale(0%);
    /* Couleur au survol */
    opacity: 1;
}

/* --- MEDIA QUERIES --- */

@media (min-width: 768px) {
    .colis-service-card {
        width: calc(50% - 1rem);
        max-width: 400px;
    }

    .marque-logo-wrapper {
        height: 90px;
    }
}

@media (min-width: 1024px) {
    .colis-service-card {
        width: calc(25% - 1.5rem);
        /* Changé à 4 colonnes pour les 4 services (ou 33% si vous n'en avez que 3) */
        max-width: 300px;
    }

    .marque-logo-wrapper {
        height: 100px;
        width: calc(16.66% - 1.5rem);
        /* 6 colonnes de marques */
    }
}




/* ============================================== */
/* --- NOUVEAU STYLE POUR LA PAGE PHOTOCOPIE --- */
/* ============================================== */

/* Styles généraux réutilisés */
.photocopie-page-wrapper {
    background-color: var(--color-background);
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 20px;
    box-sizing: border-box;
}

.photocopie-main-title {
    color: var(--color-text);
    font-size: 2.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-align: center;
    position: relative;
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
}

.photocopie-main-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--color-secondary);
    width: 50%;
    height: 3px;
}

.photocopie-page-intro {
    font-size: 1.125rem;
    text-align: center;
    color: #4b5563;
    margin-bottom: 3rem;
}

.photocopie-section-title {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 2rem;
    text-align: center;
    color: #1f2937;
    text-transform: uppercase;
}

/* ============================================== */
/* --- GRILLE CARTES (A4/A3 + Reliure/Plastif) --- */
/* ============================================== */

/* ✅ Base (mobile) : flex wrap centré */
.photocopie-grid {
    --grid-gap: 3rem;

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--grid-gap);
    margin-bottom: 3rem;
}

/* Cartes */
.photocopie-card {
    background-color: #fff;
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;

    width: 100%;
    max-width: 500px;

    transition: transform 0.3s ease;
    border: 1px solid #e5e7eb;
    box-sizing: border-box;
}

.photocopie-card:hover {
    transform: translateY(-5px);
}

.photocopie-card-image {
    width: 6rem;
    height: 6rem;
    margin-bottom: 1rem;
    object-fit: contain;
}

.photocopie-card-title {
    font-size: 1.6rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    color: var(--color-primary);
}

.photocopie-card-description {
    color: #6b7280;
    font-size: 1rem;
    margin-bottom: 1.5rem;
}

/* NOUVEAUX STYLES pour l'affichage des options (remplace le tableau des prix) */
.photocopie-availability {
    width: 100%;
    padding-top: 1rem;
    border-top: 1px dashed #e5e7eb;
}

.photocopie-availability h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 0.75rem;
}

.photocopie-options-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem 0;
    text-align: center;
    font-size: 1rem;
}

.photocopie-options-list li {
    padding: 5px 0;
    color: #374151;
}

.photocopie-cta-price {
    font-style: italic;
    font-size: 0.95rem;
    color: var(--color-secondary);
    font-weight: 600;
}

/* ============================================== */
/* --- STYLES SPÉCIFIQUES IMPRESSION IMAGE --- */
/* ============================================== */

.image-printing-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 800px;
    margin: 0 auto;
    background-color: #fefcfb;
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
    border: 2px solid var(--color-primary);
    text-align: center;
    box-sizing: border-box;
}

.printing-card-image {
    width: 100%;
    max-width: 200px;
    height: auto;
    margin-bottom: 1.5rem;
    object-fit: contain;
}

.printing-content {
    width: 100%;
}

.printing-description {
    font-size: 1.1rem;
    color: #374151;
    margin-bottom: 1.5rem;
}

.printing-formats-info {
    width: 100%;
    padding-top: 1rem;
    border-top: 1px dashed #e5e7eb;
}

.printing-formats-info h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 0.75rem;
}

.printing-formats-list {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
    text-align: center;
}

.printing-formats-list li {
    padding: 8px 0;
    border-bottom: 1px dashed #e5e7eb;
    font-size: 1.05rem;
}

.printing-formats-list li:last-child {
    border-bottom: none;
}

.printing-format-label {
    font-weight: 700;
    color: var(--color-primary);
}

.printing-format-note {
    font-size: 0.9rem;
    color: #9ca3af;
    margin-left: 10px;
}

.printing-note {
    font-style: italic;
    font-size: 0.95rem;
    color: #6b7280;
    margin-top: 2rem;
    line-height: 1.4;
}

/* ============================================== */
/* --- STYLES SPÉCIFIQUES SCAN --- */
/* ============================================== */

.scan-section {
    padding: 2rem 0;
}

.scan-card {
    max-width: 600px;
    margin: 0 auto;
    background-color: var(--color-secondary);
    color: white;
    padding: 2.5rem;
    border-radius: 1rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    box-sizing: border-box;
}

.scan-icon {
    font-size: 3rem;
    margin-bottom: 0.5rem;
}

.scan-title {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.scan-description {
    font-size: 1rem;
    margin-bottom: 1.5rem;
}

.scan-details {
    width: 100%;
    background-color: rgba(255, 255, 255, 0.15);
    padding: 1rem;
    border-radius: 0.5rem;
}

.scan-details h4 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.scan-details-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

.scan-details-list li {
    padding: 5px 0;
    font-size: 1rem;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.2);
}

.scan-details-list li:last-child {
    border-bottom: none;
}

.scan-note {
    font-size: 0.95rem;
    opacity: 0.9;
    margin-top: 1rem;
    line-height: 1.4;
}

/* ============================================== */
/* --- RESPONSIVE (2 colonnes + dernier centré) --- */
/* ============================================== */

@media (min-width: 768px) {

    /* ✅ On passe en “2 colonnes” */
    .photocopie-grid {
        justify-content: center;
        /* on laisse le centrage */
    }

    .photocopie-card {
        width: calc(50% - (var(--grid-gap) / 2));
        max-width: 520px;
    }

    /* ✅ Si nombre impair (3,5,7...) => dernière carte seule centrée */
    .photocopie-grid> :last-child:nth-child(2n + 1) {
        /* on garde le même width (une demi-ligne) */
        width: calc(50% - (var(--grid-gap) / 2));
        margin-left: auto;
        margin-right: auto;
    }

    .image-printing-card {
        flex-direction: row;
        text-align: left;
        gap: 2rem;
        padding: 3rem;
    }

    .printing-card-image {
        max-width: 250px;
        margin-bottom: 0;
    }

    /* liste formats alignée à gauche sur desktop */
    .printing-formats-list {
        text-align: left;
    }
}

/* petit confort mobile */
@media (max-width: 480px) {
    .photocopie-page-wrapper {
        padding: 60px 16px;
    }

    .photocopie-main-title {
        font-size: 2rem;
    }

    .photocopie-section-title {
        font-size: 1.5rem;
    }

    .photocopie-card {
        padding: 1.6rem;
    }
}








/* ========================================= */
/* --- NOUVEAU STYLE POUR LA PAGE PILES --- */
/* ========================================= */

.piles-page-wrapper {
    background-color: var(--color-background);
    max-width: 1200px;
    /* Ajusté */
    margin: 0 auto;
    padding: 80px 20px;
}

.piles-main-title {
    color: var(--color-text);
    font-size: 2.5rem;
    /* Ajusté */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-align: center;
    position: relative;
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
}

/* Pseudo-élément qui crée le trait sous le titre */
.piles-main-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--color-secondary);
    width: 50%;
    height: 3px;
}

.piles-page-intro {
    font-size: 1.125rem;
    text-align: center;
    color: #4b5563;
    margin-bottom: 2rem;
}

.piles-section {
    margin-bottom: 3rem;
}

.piles-section-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    text-align: center;
    color: #374151;
}

.piles-section-description {
    font-style: italic;
    text-align: center;
    color: #6b7280;
    margin-bottom: 2rem;
}

/* Grille adaptative avec Flexbox pour un meilleur alignement. */
.piles-games-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
}

.piles-game-card {
    background-color: #fff;
    padding: 1.5rem;
    border-radius: 0.75rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    border: 2px solid transparent;
    width: 300px;
    position: relative;

    overflow: visible;
}

.piles-game-card:hover {
    transform: scale(1.05);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    border-color: #b8bcc2;
}

.piles-game-card-image {
    width: 9rem;
    height: 9rem;
    margin-bottom: 1rem;
    object-fit: contain;
}

.piles-game-card-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: #1f2937;
}

.piles-game-card-description {
    color: #6b7280;
    font-size: 0.875rem;
}

/* MEDIA QUERIES pour la grille */
@media (min-width: 768px) {
    .piles-game-card {
        width: calc(50% - 1rem);
        max-width: 350px;
    }
}

@media (min-width: 1024px) {
    .piles-game-card {
        width: calc(33.33% - 1.5rem);
        max-width: 400px;
    }
}








/* ========================================= */
/* Styles pour la page Cartes */
/* ========================================= */

.carte-page-wrapper {
    background-color: var(--color-background);
    max-width: 1200px;
    /* Ajusté */
    margin: 0 auto;
    padding: 80px 20px;
}

.carte-main-title {
    color: var(--color-text);
    font-size: 2.5rem;
    /* Ajusté */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-align: center;
    position: relative;
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
}

/* Pseudo-élément qui crée le trait sous le titre */
.carte-main-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--color-secondary);
    width: 50%;
    height: 3px;
}

.carte-intro {
    font-size: 1.125rem;
    text-align: center;
    color: #4b5563;
    margin-bottom: 2rem;
}

.carte-section {
    scroll-margin-top: 180px;

    /* Conserve la marge inférieure existante */
    margin-bottom: 3rem;
}

.carte-section-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    text-align: center;
    color: #374151;
}

/* Grille adaptative avec Flexbox pour un meilleur alignement. */
.carte-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
}

.carte-card {
    background-color: #ffffff;
    padding: 1.5rem;
    border-radius: 0.75rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition-property: transform, box-shadow, border-color;
    transition-duration: 300ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid transparent;
    width: 300px;
}

.carte-card:hover {
    transform: scale(1.05);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    border-color: #b8bcc2;
}

.carte-card-image {
    width: 9rem;
    height: 9rem;
    margin-bottom: 1rem;
    object-fit: contain;
}

.carte-card-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: #1f2937;
}

.carte-card-description {
    color: #6b7280;
    font-size: 0.875rem;
}

/* ========================================= */
/* Styles pour la Section Cartes Secondaires */
/* ========================================= */

.carte-secondary-logos {
    text-align: center;
    margin-top: 3rem;
}

.secondary-logo-category-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-secondary);
    /* Couleur d'accentuation */
    margin-top: 2rem;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Grille pour les petits logos */
.secondary-logo-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
    /* Espacement plus compact */
    padding: 0 20px;
}

.secondary-logo-item {
    padding: 0.5rem;
    border-radius: 8px;
    background-color: #f9fafb;
    /* Très léger fond gris */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    /* Rendre le conteneur du logo cliquable visuellement */
    cursor: default;
}

.secondary-logo-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}

.secondary-logo-image {
    /* Taille réduite pour l'affichage minimaliste */
    width: 60px;
    height: 60px;
    object-fit: contain;
}

/* ========================================= */
/* Styles pour le Menu d'Ancrage (Navigation rapide) */
/* ========================================= */

.carte-anchor-nav {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin: 2.5rem 0;
    padding: 1rem;

}

.anchor-btn {
    text-decoration: none;
    font-weight: 700;
    color: var(--color-text, #333);
    background-color: #ffffff;
    border: 2px solid var(--color-secondary, #ff6600);
    padding: 0.75rem 1.2rem;
    border-radius: 8px;
    transition: background-color 0.2s ease, transform 0.2s ease;
    white-space: nowrap;
    /* Empêche la coupure du texte */
}

.anchor-btn:hover {
    background-color: var(--color-secondary, #ff6600);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* MEDIA QUERY pour les petits écrans */
@media (max-width: 600px) {
    .carte-anchor-nav {
        flex-direction: column;
        gap: 0.8rem;
        padding: 1rem;
    }

    .anchor-btn {
        width: 100%;
        text-align: center;
    }
}






/* ============================================================ */
/* 🎨 PAGE PRESSE - TABAC BULTEZ                               */
/* ============================================================ */

/* --- 1. Conteneur global --- */
.presse-container {
    background-color: var(--color-background, #f8f8f8);
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    padding: 60px 40px 120px;
    box-sizing: border-box;
    overflow: visible;
    /* important pour le sticky JS */
}

/* --- 2. Structure principale (Sommaire + contenu) --- */
.presse-container .presse-layout {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 40px;
    align-items: flex-start;
    justify-content: center;
    margin-top: 40px;
    /* sommaire sous H1 + intro */
    position: relative;
}

/* --- 3. Titres principaux --- */
.presse-main-title {
    color: var(--color-text);
    font-size: 2.6rem;
    font-weight: 800;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    padding-bottom: 0.5rem;
    margin-bottom: 2rem;
}

.presse-main-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--color-secondary);
    width: 50%;
    height: 3px;
    border-radius: 2px;
}

.presse-page-intro {
    font-size: 1.1rem;
    text-align: center;
    color: #4b5563;
    margin-bottom: 2.4rem;
    line-height: 1.6;
}

/* --- 4. Sommaire latéral --- */
.presse-summary {
    grid-column: 1;
    align-self: flex-start;

    width: 100%;
    box-sizing: border-box;

    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    border-left: 5px solid var(--color-primary);
    padding: 20px;
    z-index: 1;

    /* ✅ le sticky est géré par sticky-summary.js */
    position: relative;
    top: auto;
    left: auto;
    max-height: none;
    overflow: visible;
}

.presse-summary h3 {
    margin-top: 0;
    font-size: 1.5rem;
    color: var(--color-primary);
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
    margin-bottom: 15px;
}

.presse-summary ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.presse-summary li a {
    display: block;
    padding: 8px 10px;
    color: #333;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 500;
    border-left: 3px solid transparent;
    transition: all 0.25s ease;
}

.presse-summary li a:hover {
    background-color: var(--color-primary);
    color: #fff;
}

.presse-summary li a.active {
    font-weight: 700;
    color: var(--color-secondary);
    border-left: 3px solid var(--color-secondary);
    background-color: rgba(0, 128, 255, 0.08);
    border-radius: 4px;
}

/* --- 5. Contenu principal --- */
.presse-content {
    grid-column: 2;
    flex-grow: 1;
    min-width: 0;
}

/* --- 6. Sections --- */
.presse-section {
    margin-bottom: 60px;
    border-top: 2px dashed #ddd;
    padding-top: 30px;
    position: relative;
    z-index: 1;
}

.presse-section-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-primary);
    text-align: center;
    margin-bottom: 30px;
    position: relative;
}

.presse-section-title::after {
    content: '';
    display: block;
    width: 80px;
    height: 3px;
    background-color: var(--color-secondary);
    margin: 10px auto 0;
    border-radius: 2px;
}

/* --- 7. Grille de cartes --- */
.presse-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 1.75rem;
}

/* --- 8. Carte presse --- */
.presse-card {
    background-color: #fff;
    padding: 1.25rem;
    border-radius: 0.75rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    transition: all 0.3s ease;
    width: 220px;
    border: 1px solid #e5e7eb;
    position: relative;
    min-height: 340px;
    overflow: hidden;
}

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

/* --- 9. Icône édition admin --- */
.presse-edit-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.presse-edit-icon i {
    font-size: 0.9rem;
    position: relative;
    top: 1px;
    line-height: 1;
}

.presse-edit-icon:hover {
    background: var(--color-primary);
    color: #fff;
    transform: scale(1.1);
}

/* --- 10. Image --- */
.presse-card-image {
    width: 100%;
    max-width: 8rem;
    height: auto;
    max-height: 10rem;
    object-fit: contain;
    margin-bottom: 0.9rem;
    border-radius: 6px;
    border: 1px solid #ddd;
    transition: transform 0.3s ease;
}

.presse-card:hover .presse-card-image {
    transform: scale(1.03);
}

/* --- 11. Texte --- */
.presse-card-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.4rem;
    color: var(--color-text);
    min-height: 32px;
}

.presse-card-description {
    color: #6b7280;
    font-size: 0.9rem;
    line-height: 1.4;
    margin-bottom: 0.7rem;
    min-height: 40px;
}

/* --- 12. Carte ajout admin (scopée Presse) --- */
.presse-container .add-card {
    cursor: pointer;
    background-color: #f9fafb;
    border: 2px dashed var(--color-secondary);
    color: var(--color-secondary);
    transition: background-color 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 340px;
    font-weight: 600;
    font-size: 1rem;
}

.presse-container .add-card:hover {
    background-color: rgba(0, 128, 255, 0.05);
    transform: translateY(-3px);
}

/* --- 13. Message d’info --- */
.presse-service-info {
    text-align: center;
    background-color: #eef6ff;
    padding: 30px;
    margin-top: 4rem;
    border-radius: 10px;
    border-left: 6px solid var(--color-primary);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
}

/* --- 14. Ancre propre (scopée Presse) --- */
.presse-container :target {
    scroll-margin-top: 180px;
}

/* ========================================================= */
/* 🔁 Responsive                                              */
/* ========================================================= */

@media (max-width: 1250px) {
    .presse-container .presse-layout {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 25px;
    }

    .presse-summary {
        position: static;
        max-height: none;
        overflow: visible;
        width: 100%;
        max-width: 750px;
        margin-bottom: 15px;
        order: -1;
    }

    .presse-content {
        width: 100%;
        max-width: 950px;
        margin: 0 auto;
    }

    .presse-section {
        width: 100%;
        max-width: 950px;
    }

    .presse-section-title {
        text-align: center;
        border: none;
        border-bottom: 3px solid var(--color-secondary);
        padding-bottom: 8px;
        margin-bottom: 25px;
    }
}

/* Tablette / moyennes résolutions */
@media (max-width: 1024px) {
    .presse-card {
        width: calc(33.33% - 1rem);
        max-width: 240px;
        min-height: 300px;
    }
}

/* Mobiles larges */
@media (max-width: 768px) {
    .presse-card {
        width: calc(50% - 1rem);
        max-width: 260px;
        min-height: 280px;
    }

    .presse-main-title {
        font-size: 2rem;
    }
}

/* Petits mobiles */
@media (max-width: 480px) {
    .presse-card {
        width: 90%;
        max-width: none;
        min-height: 260px;
    }
}

/* ========================================================= */
/* ✅ FIX MODAL PRESSE (centrage + scroll interne propre)     */
/* ========================================================= */

#editPresseModal.fdj-edit-modal,
#addCategorieModal.fdj-edit-modal {
    display: none;
    /* contrôlé par JS */
    align-items: center;
    justify-content: center;
    padding: 24px;
    /* évite que ça colle aux bords */
    overflow: auto;
    /* scroll sur overlay si besoin */
}

#editPresseModal .fdj-edit-modal-content,
#addCategorieModal .fdj-edit-modal-content {
    margin: 0;
    /* on supprime le margin:5% auto */
    width: min(600px, 92vw);
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    /* ✅ scroll DANS le bloc blanc */
}

/* ========================================================= */
/* ✅ APERÇU IMAGE PRESSE                                    */
/* ========================================================= */

#presseImagePreviewWrap.fdj-preview-wrap {
    display: none;
    /* JS -> flex */
    justify-content: center;
    align-items: center;
    margin-top: 12px;
    width: 100%;
}

#presseImagePreview {
    display: block;
    max-width: 100%;
    width: min(320px, 100%);
    max-height: 220px;
    object-fit: contain;
    border-radius: 12px;
    border: 1px solid #e6e6e6;
    background: #fff;
    padding: 6px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

/* Responsive */
@media (max-width: 480px) {
    #presseImagePreview {
        width: min(260px, 100%);
        max-height: 180px;
    }
}

/* ========================================================= */
/* ✅ OVERLAY DRAG & DROP FULLSCREEN                         */
/* ========================================================= */

#presseDropOverlay.fdj-drop-overlay {
    position: fixed;
    inset: 0;
    z-index: 2600;
    display: none;
    /* JS */
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
    border: 3px dashed rgba(255, 255, 255, 0.75);
    box-sizing: border-box;
}

#presseDropOverlay .fdj-drop-overlay-box {
    background: rgba(20, 20, 20, 0.85);
    color: #fff;
    padding: 16px 18px;
    border-radius: 12px;
    max-width: 520px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

#presseDropOverlay .fdj-drop-overlay-icon {
    font-size: 26px;
    margin-bottom: 8px;
}

#presseDropOverlay .fdj-drop-overlay-text small {
    display: block;
    opacity: 0.9;
    font-size: 13px;
    margin-top: 4px;
}











/* ========================================= */
/* --- DESIGN MODERNE POUR LA PAGE COMESTIBLE --- */
/* ========================================= */

.comestible-page-wrapper {
    background-color: var(--color-background, #f4f4f4);
    max-width: 1300px;
    margin: 0 auto;
    padding: 60px 20px;
    box-sizing: border-box;
}

/* --- TITRES PRINCIPAUX --- */
.comestible-main-title {
    color: var(--color-text);
    font-size: 3rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-align: center;
    position: relative;
    padding-bottom: 0.5rem;
    margin-bottom: 2rem;
}

.comestible-main-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--color-secondary);
    width: 60px;
    height: 5px;
    border-radius: 3px;
}

.comestible-page-intro {
    font-size: 1.25rem;
    line-height: 1.6;
    text-align: center;
    color: #555;
    margin-bottom: 4rem;
}

/* --- TITRES DE SECTION (H2) --- */
.comestible-section {
    margin-bottom: 60px;
    padding-top: 20px;
}

.comestible-section-title {
    font-size: 2rem;
    font-weight: 700;
    text-align: center;
    color: var(--color-primary);
    margin-bottom: 30px;
    padding: 10px 20px;
    background-color: #e0e0e080;
    border-left: 5px solid var(--color-secondary);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 5px;
}

/* --- GRILLE DES PRODUITS (FIX 1 / 2 / 3 colonnes + centrage dernière carte) --- */
.comestible-grid {
    --grid-gap: 30px;

    display: grid;
    gap: var(--grid-gap);
    justify-items: center;

    /* mobile : 1 colonne */
    grid-template-columns: 1fr;
}

/* tablette : 2 colonnes */
@media (min-width: 600px) and (max-width: 899.98px) {
    .comestible-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* si nombre impair (3,5,7...) => dernier élément centré */
    .comestible-grid> :last-child:nth-child(2n + 1) {
        grid-column: 1 / -1;
        justify-self: center;
        width: calc((100% - var(--grid-gap)) / 2);
    }
}

/* desktop : 3 colonnes */
@media (min-width: 900px) {
    .comestible-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* si total = 3n+1 (4,7,10...) => dernier élément au milieu */
    .comestible-grid> :last-child:nth-child(3n + 1) {
        grid-column: 2 / 3;
        justify-self: stretch;
        width: auto;
    }
}

/* --- CARTES DE PRODUIT --- */
.comestible-card {
    position: relative;
    background-color: #fff;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    width: 100%;
    max-width: 400px;
    border: 3px solid transparent;
    box-sizing: border-box;
}

.comestible-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2);
    border-color: var(--color-secondary);
}

.comestible-card-image {
    width: 10rem;
    height: 10rem;
    object-fit: contain;
    margin-bottom: 15px;
    transition: transform 0.4s ease, filter 0.4s ease;
}

.comestible-card:hover .comestible-card-image {
    transform: scale(1.05);
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.2));
}

.comestible-card-title {
    font-size: 1.4rem;
    font-weight: 800;
    margin-bottom: 10px;
    color: var(--color-primary);
}

.comestible-card-description {
    color: #6b7280;
    font-size: 1rem;
    min-height: 45px;
}

/* --- MESSAGE "AUCUN ITEM" --- */
.no-item-message {
    text-align: center;
    color: #555;
    font-size: 1.05rem;
    margin: 20px 0;
}

/* --- RESPONSIVE GLOBAL --- */
@media (max-width: 768px) {
    .comestible-page-wrapper {
        padding: 50px 16px;
    }

    .comestible-main-title {
        font-size: 2.3rem;
    }

    .comestible-page-intro {
        font-size: 1.1rem;
        margin-bottom: 3rem;
    }

    .comestible-section-title {
        font-size: 1.6rem;
        max-width: 100%;
    }

    .comestible-card {
        padding: 18px;
        max-width: 520px;
        /* laisse respirer sur tablette */
    }

    .comestible-card-title {
        font-size: 1.25rem;
    }
}

@media (max-width: 480px) {
    .comestible-main-title {
        font-size: 2rem;
    }

    .comestible-card-image {
        width: 9rem;
        height: 9rem;
    }

    .comestible-card-description {
        min-height: unset;
    }
}








/* ========================================= */
/* -- NOUVEAU STYLE POUR LA PAGE PAPETERIE -- */
/* ========================================= */

.papeterie-page-wrapper {
    background-color: var(--color-background);
    max-width: 1280px;
    margin: 0 auto;
    padding: 80px 20px;
}

/* --- Titres et Introduction --- */

.papeterie-main-title {
    color: var(--color-text);
    font-size: 2.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-align: center;
    position: relative;
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
}

.papeterie-main-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--color-secondary);
    width: 50%;
    height: 3px;
}

.papeterie-page-intro {
    font-size: 1.125rem;
    text-align: center;
    color: #4b5563;
    margin-bottom: 3rem;
    line-height: 1.6;
}

/* --- Call to Action (Menu d'Ancrage) --- */

.papeterie-anchor-nav {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 4rem;
    padding: 10px;
}

.anchor-btn {
    text-decoration: none;
    background-color: var(--color-primary);
    color: white;
    padding: 12px 25px;
    border-radius: 5px;
    font-weight: 600;
    font-size: 1.05rem;
    transition: background-color 0.3s ease, transform 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.anchor-btn:hover {
    background-color: #004d40;
    transform: translateY(-2px);
}

/* --- Sections et Ancres --- */

.papeterie-section {
    margin-bottom: 5rem;
    scroll-margin-top: 150px;
    padding-top: 1.5rem;
    border-top: 1px solid #e0e0e0;
}

.papeterie-section-title {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 2.5rem;
    text-align: center;
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.section-icon {
    font-size: 2rem;
    color: var(--color-secondary);
}

/* --- Grille et Cartes Standard (Timbres/Fournitures) --- */

.papeterie-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
}

.papeterie-card {
    background-color: #f7f7f7;
    padding: 1rem;
    border-radius: 0.75rem;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    width: 300px;
    border: 3px solid transparent;
}

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

/* (par défaut) */
.papeterie-card-image {
    width: 100%;
    max-width: 10rem;
    height: auto;
    max-height: 10rem;
    object-fit: contain;
    margin-bottom: 1rem;
    transition: transform 0.3s;
}

.papeterie-card:hover .papeterie-card-image {
    transform: scale(1.05);
}

.papeterie-card-content {
    padding: 0 5px;
    width: 100%;
}

.papeterie-card-title {
    font-size: 1.35rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--color-text);
}

.papeterie-card-description {
    color: #6b7280;
    font-size: 0.95rem;
    line-height: 1.4;
    min-height: 35px;
}

.no-item-message {
    color: #999;
    font-style: italic;
    width: 100%;
    text-align: center;
    padding: 20px 0;
}

/* ========================================================= */
/* ✅ TIMBRES : SLOT IMAGE + CENTRAGE (fix)                   */
/* ========================================================= */
/* Base trigger / slot (timbres) */
.papeterie-section--timbres .papeterie-lightbox-trigger,
#timbres .papeterie-lightbox-trigger,
.papeterie-section--timbres .papeterie-media-btn,
#timbres .papeterie-media-btn {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 210px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    background: #ffffff;
    padding: 10px;
    margin: 0 0 0.45rem 0;
    border-radius: 0.75rem;
    box-sizing: border-box;

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

    cursor: zoom-in;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    line-height: 0;
}

.papeterie-section--timbres .papeterie-lightbox-trigger:active,
#timbres .papeterie-lightbox-trigger:active,
.papeterie-section--timbres .papeterie-media-btn:active,
#timbres .papeterie-media-btn:active {
    background: #ffffff;
}

.papeterie-section--timbres .papeterie-lightbox-trigger:focus,
#timbres .papeterie-lightbox-trigger:focus,
.papeterie-section--timbres .papeterie-media-btn:focus,
#timbres .papeterie-media-btn:focus {
    outline: none;
}

.papeterie-section--timbres .papeterie-lightbox-trigger:focus-visible,
#timbres .papeterie-lightbox-trigger:focus-visible,
.papeterie-section--timbres .papeterie-media-btn:focus-visible,
#timbres .papeterie-media-btn:focus-visible {
    outline: 3px solid var(--color-secondary);
    outline-offset: 3px;
}

/* ✅ L'image dans le slot */
.papeterie-section--timbres .papeterie-lightbox-trigger .papeterie-card-image,
#timbres .papeterie-lightbox-trigger .papeterie-card-image,
.papeterie-section--timbres .papeterie-media-btn .papeterie-card-image,
#timbres .papeterie-media-btn .papeterie-card-image {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    margin: 0;
    display: block;
    object-fit: contain;
    object-position: center center;
}

@media (hover: hover) and (pointer: fine) {

    .papeterie-section--timbres .papeterie-lightbox-trigger:hover,
    #timbres .papeterie-lightbox-trigger:hover,
    .papeterie-section--timbres .papeterie-media-btn:hover,
    #timbres .papeterie-media-btn:hover {
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
    }
}

/* ✅ Hint sous l’image */
.papeterie-zoom-hint {
    margin: 0;
    padding: 0;
    font-size: 0.85rem;
    color: #6b7280;
    text-align: center;
    width: 100%;
}

/* ========================================================= */
/* ✅ LIGHTBOX plein écran (fond noir) + Zoom +/-             */
/* ========================================================= */

.pap-lightbox {
    position: fixed;
    inset: 0;
    display: none;
    background: rgba(0, 0, 0, 0.92);
    z-index: 2500;

    padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));

    align-items: center;
    justify-content: center;
}

.pap-lightbox.is-open {
    display: flex;
}

.pap-lightbox__content {
    max-width: 96vw;
    max-height: 92vh;
    overflow: auto;
    /* ✅ indispensable pour "se déplacer" quand zoomé */
    -webkit-overflow-scrolling: touch;
    border-radius: 14px;
    background: transparent;
    overscroll-behavior: contain;
    touch-action: pan-x pan-y;
    /* ✅ scroll 1 doigt, pinch bloqué par JS */
}

.pap-lightbox__img {
    display: block;
    max-width: 96vw;
    max-height: 92vh;
    width: auto;
    height: auto;
    border-radius: 14px;
    margin: auto;
    background: transparent;
    user-select: none;
    -webkit-user-drag: none;
}

.pap-lightbox__close {
    position: fixed;
    top: max(12px, env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 32px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.pap-lightbox__close:hover {
    background: rgba(255, 255, 255, 0.22);
}

.pap-lightbox__toolbar {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: max(12px, env(safe-area-inset-bottom));
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.pap-lightbox__btn {
    -webkit-appearance: none;
    appearance: none;
    min-width: 44px;
    height: 44px;
    padding: 0 14px;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    font-weight: 800;
    font-size: 18px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.pap-lightbox__btn:hover {
    background: rgba(255, 255, 255, 0.20);
}

.pap-lightbox__btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.pap-lightbox__btn--reset {
    font-weight: 700;
    font-size: 14px;
}

.pap-lightbox__zoom {
    color: #fff;
    font-weight: 700;
    min-width: 56px;
    text-align: center;
}

/* Scroll lock */
html.scroll-locked,
body.scroll-locked {
    overflow: hidden;
}

body.scroll-locked {
    padding-right: var(--scrollbar-width, 0);
}

/* ========================================================= */
/* ✅ Trigger générique (sans !important, ne casse pas Timbres) */
/* ========================================================= */

.papeterie-lightbox-trigger {
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    padding: 0;
    margin: 0;
    background: transparent;
    cursor: zoom-in;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    line-height: 0;
}

/* ========================================= */
/* --- Styles spécifiques Cartes Postales --- */
/* ========================================= */

.papeterie-card-postal {
    max-width: 1000px;
    width: 90%;
    margin: 0 auto;
    padding: 2rem;
    background-color: #f7f7f7;
    border-radius: 0.75rem;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border: 3px solid transparent;
}

.papeterie-card-image-postal {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
    margin-bottom: 1.5rem;
}

.papeterie-card-content-postal {
    padding: 0 5px;
    width: 100%;
}

.card-themes-list-postal {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #e0e0e0;
}

.themes-tags-list-postal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 1rem 0 0 0;
    gap: 0.75rem;
}

.theme-tag-postal {
    background-color: var(--color-secondary);
    color: #ffffff;
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: capitalize;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* --- Media Queries (Ajustement des cartes) --- */

@media (min-width: 768px) {
    .papeterie-card {
        width: calc(50% - 1.5rem);
        max-width: 350px;
    }
}

@media (min-width: 1024px) {
    .papeterie-card {
        width: calc(33.33% - 1.333rem);
        max-width: 400px;
    }
}

/* ✅ slot timbres responsive */
@media (max-width: 1023px) {

    .papeterie-section--timbres .papeterie-lightbox-trigger,
    #timbres .papeterie-lightbox-trigger,
    .papeterie-section--timbres .papeterie-media-btn,
    #timbres .papeterie-media-btn {
        height: 190px;
        padding: 10px;
    }
}

@media (max-width: 767px) {
    .papeterie-anchor-nav {
        flex-direction: column;
        gap: 0.8rem;
        padding: 15px;
        margin-bottom: 2rem;
    }

    .papeterie-section-title {
        font-size: 1.6rem;
    }

    .papeterie-card-postal {
        max-width: 95%;
        width: 95%;
    }

    .themes-tags-list-postal {
        gap: 0.5rem;
    }

    .papeterie-card-image-postal {
        max-height: 25rem;
    }

    .papeterie-section--timbres .papeterie-lightbox-trigger,
    #timbres .papeterie-lightbox-trigger,
    .papeterie-section--timbres .papeterie-media-btn,
    #timbres .papeterie-media-btn {
        height: 170px;
        padding: 10px;
    }
}

@media (max-width: 480px) {

    .papeterie-section--timbres .papeterie-lightbox-trigger,
    #timbres .papeterie-lightbox-trigger,
    .papeterie-section--timbres .papeterie-media-btn,
    #timbres .papeterie-media-btn {
        height: 155px;
        padding: 10px;
    }

    .pap-lightbox__toolbar {
        gap: 8px;
        padding: 8px 10px;
    }

    .pap-lightbox__btn {
        min-width: 42px;
        height: 42px;
        padding: 0 12px;
    }

    .pap-lightbox__img {
        max-width: 94vw;
        max-height: 88vh;
    }
}










/* ========================================= */
/* -- NOUVEAU STYLE POUR LA PAGE ACCESSOIRES FUMEUR -- */
/* ========================================= */

.accessoires-fumeur-page-wrapper {
    background-color: var(--color-background);
    max-width: 1200px;
    /* Ajusté */
    margin: 0 auto;
    padding: 80px 20px;
}

.accessoires-fumeur-main-title {
    color: var(--color-text);
    font-size: 2.5rem;
    /* Ajusté */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-align: center;
    position: relative;
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
}

/* Pseudo-élément qui crée le trait sous le titre */
.accessoires-fumeur-main-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--color-secondary);
    width: 50%;
    height: 3px;
}

.accessoires-fumeur-page-intro {
    font-size: 1.125rem;
    text-align: center;
    color: #4b5563;
    margin-bottom: 2rem;
}

.accessoires-fumeur-section {
    margin-bottom: 3rem;
}

.accessoires-fumeur-section-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    text-align: center;
    color: #374151;
}

/* Grille adaptative avec Flexbox pour un meilleur alignement. */
.accessoires-fumeur-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
}

.accessoires-fumeur-card {
    background-color: #fff;
    padding: 1.5rem;
    border-radius: 0.75rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    width: 300px;
    border: 2px solid transparent;
}

.accessoires-fumeur-card:hover {
    transform: scale(1.05);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    border-color: #b8bcc2;
}

.accessoires-fumeur-card-image {
    width: 9rem;
    height: 9rem;
    object-fit: contain;
    margin-bottom: 1rem;
}

.accessoires-fumeur-card-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: #1f2937;
}

.accessoires-fumeur-card-description {
    color: #6b7280;
    font-size: 0.875rem;
}

/* MEDIA QUERIES pour la grille */
@media (min-width: 768px) {
    .accessoires-fumeur-card {
        width: calc(50% - 1rem);
        max-width: 350px;
    }
}

@media (min-width: 1024px) {
    .accessoires-fumeur-card {
        width: calc(33.33% - 1.5rem);
        max-width: 400px;
    }
}

/* Conteneur icône : taille fixe pour l’alignement */
.fumeurs-icon {
    --icon-box: 56px;
    /* taille du bloc (commune) */
    --fa-size: 32px;
    /* taille FontAwesome */
    --img-size: 44px;
    /* taille de TON image uniquement */

    width: var(--icon-box);
    height: var(--icon-box);
    flex: 0 0 var(--icon-box);

    display: grid;
    place-items: center;
}

/* FontAwesome : ne bouge pas */
.fumeurs-icon i {
    font-size: var(--fa-size);
    line-height: 1;
    display: block;
}

/* Image : taille indépendante des icons FA */
.fumeurs-icon-image {
    width: var(--img-size);
    height: var(--img-size);
    display: block;
    object-fit: contain;
}




/* ============================================== */
/* --- Page Compte Nickel --- */
/* ============================================== */

.page-header {
    /* Déjà défini plus haut */
    text-align: center;
}

/* Titre principal de la page nickel */
.nickel-title {
    color: var(--color-text);
    font-size: 2.5rem;
    /* Ajusté */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-align: center;
    position: relative;
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
}

/* Pseudo-élément qui crée le trait sous le titre */
.nickel-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--color-secondary);
    width: 50%;
    height: 3px;
}

.nickel-logo {
    display: block;
    margin: 1.5rem auto;
    max-width: 200px;
    height: auto;
}

.nickel-content {
    padding: 2rem 0;
}

.nickel-section {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 3rem;
    margin-bottom: 4rem;
}

.nickel-section:nth-child(even) {
    flex-direction: row-reverse;
}

.text-content {
    flex: 1;
    line-height: 1.8;
}

.image-content {
    flex: 1;
}

.section-title {
    /* Déjà défini plus haut */
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--nickel-orange);
}

/* Titre principal de la page nickel */
.nickel-section-title {
    color: var(--nickel-orange);
    font-size: 1.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-align: left;
    position: relative;
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
}

/* Pseudo-élément qui crée le trait sous le titre */
.nickel-section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    /* Alignement à gauche */
    transform: translateX(0%);
    /* Pas de décalage */
    background-color: var(--color-secondary);
    width: 50%;
    height: 3px;
}

.nickel-image {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Effet au survol pour les images */
.nickel-image:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.25);
    cursor: pointer;
}

.avantage-list {
    list-style: none;
    padding: 0;
}

.avantage-list li {
    font-size: 1.1rem;
    margin-bottom: 0.8rem;
    display: flex;
    align-items: center;
    color: #4b5563;
}

.avantage-list li .fas {
    color: var(--nickel-orange);
    margin-right: 10px;
}

/* Modification pour centrer le texte du disclaimer */
.nickel-disclaimer {
    text-align: center;
    color: #777;
    font-size: 0.9rem;
    margin-top: 2rem;
}

/* Partie bouton vers nickel*/
.nickel-container2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: auto;
    /* Hauteur automatique */
    background-color: #f5f5f5;
    font-family: var(--font-main);
    padding: 2rem;
    /* Ajout de padding */
}

/* Style du bouton */
.nickel-button2 {
    display: inline-block;
    padding: 15px 30px;
    background-color: var(--nickel-orange);
    color: #fff;
    border: 2px solid var(--nickel-orange);
    font-size: 1.2rem;
    font-weight: bold;
    text-decoration: none;
    border-radius: 50px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

/* Effet au survol du bouton */
.nickel-button2:hover {
    background-color: #00874D;
    /* Un vert un peu plus foncé */
    border-color: #00874D;
    transform: translateY(-2px);
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}

/* Effet au clic */
.nickel-button2:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Style du message de non-responsabilité */
.nickel-disclaimer2 {
    margin-top: 10px;
    color: #777;
    max-width: 100%;
    text-align: center;
}

@media (max-width: 992px) {
    .nickel-section {
        flex-direction: column !important;
        /* Force la colonne pour les tablettes et mobiles */
        gap: 2rem;
    }

    .nickel-section:nth-child(even) {
        flex-direction: column !important;
        /* Force la colonne pour les sections paires */
    }

    .nickel-section-title {
        text-align: center;
        /* Centre les titres de section Nickel */
    }

    .nickel-section-title::after {
        left: 50%;
        /* Centre le trait sous le titre Nickel */
        transform: translateX(-50%);
    }
}

/* ========================================= */
/* --- NOUVEAU STYLE POUR LA PAGE PMU --- */
/* ========================================= */

/* Conteneur principal de la page PMU */
.pmu-page-wrapper {
    background-color: var(--color-background);
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 20px;
}

.pmu-main-title {
    color: var(--color-text);
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-align: center;
    position: relative;
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
}

/* Pseudo-élément qui crée le trait sous le titre */
.pmu-main-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--color-secondary);
    width: 50%;
    height: 3px;
}

/* Texte d'introduction */
.pmu-page-intro {
    font-size: 1.125rem;
    color: #555;
    text-align: center;
    margin-bottom: 2rem;
}

/* Style de la section entière */
.pmu-section {
    margin-bottom: 3rem;
}

/* Titres des sections (Paris hippiques, Paris sportifs) */
.pmu-section-title {
    color: var(--pmu-yellow);
    font-size: 1.5rem;
    font-weight: 700;
    text-transform: uppercase;
    position: relative;
    margin-bottom: 2rem;
    text-align: center;
}

/* Conteneur des cartes en grille */
.pmu-games-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

/* Cartes de jeu individuelles */
.pmu-game-card {
    background-color: #fff;
    padding: 1.5rem;
    border-radius: 1rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

/* Effet au survol des cartes */
.pmu-game-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
    border-color: var(--pmu-green);
}

/* ========================================================= */
/* ✅ SLOT IMAGE PMU (trigger cliquable) + centrage image      */
/* - évite le “grand carré vide”                              */
/* - adapté aux images très larges (bulletins)                */
/* ========================================================= */

/* Le bouton trigger ne doit pas ressembler à un bouton */
.pmu-lightbox-trigger {
    -webkit-appearance: none;
    appearance: none;

    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    border: none;
    background: transparent;
    padding: 0;
    margin: 0 0 0.45rem 0;

    cursor: zoom-in;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    line-height: 0;
}

.pmu-lightbox-trigger:focus-visible {
    outline: 3px solid var(--color-secondary);
    outline-offset: 3px;
    border-radius: 12px;
}

/* ✅ IMPORTANT : on ne force PLUS 20rem x 20rem
   -> on limite par max-height, et on garde width:auto */
.pmu-lightbox-trigger .pmu-game-card-image {
    width: min(520px, 100%);
    height: auto;
    max-height: 220px;
    /* ajuste si tu veux plus grand */
    object-fit: contain;
    object-position: center center;
    margin: 0;
    display: block;

    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
}

/* Hint “appuyer pour agrandir” (si tu l’ajoutes sur PMU) */
.pmu-zoom-hint {
    margin: 0;
    padding: 0;
    font-size: 0.85rem;
    color: #6b7280;
    text-align: center;
    width: 100%;
}

/* ========================================================= */
/* ✅ TITRE / DESCRIPTION                                     */
/* ========================================================= */

.pmu-game-card-title {
    color: var(--pmu-green);
    font-size: 1.25rem;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 0.5rem;
}

.pmu-game-card-description {
    color: #555;
    font-size: 0.9rem;
}

/* ====== Ajouts/ajustements UI spécifiques ====== */

/* Grille 2 colonnes large (mobile: 1) */
.pmu-games-grid.pmu-two-cols {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 768px) {
    .pmu-games-grid.pmu-two-cols {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Section explications (Tiercé / Quarté+ / Quinté+) */
.pmu-explain-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

@media (min-width: 768px) {
    .pmu-explain-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.pmu-explain-card {
    background: #fff;
    border-radius: 1rem;
    padding: 1.25rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
}

.pmu-explain-title {
    margin: 0 0 .5rem 0;
    font-weight: 700;
    color: var(--pmu-green);
}

.pmu-explain-text {
    margin: 0;
    color: #555;
    line-height: 1.55;
}

/* MEDIA QUERIES pour la grille PMU */
@media (min-width: 768px) {
    .pmu-games-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ========================================================= */
/* ✅ PMU LIGHTBOX (overlay noir) + toolbar zoom +/- reset     */
/* - identique logique FDJ : zoom UNIQUEMENT par boutons      */
/* - pas de wheel/pinch (géré côté JS)                        */
/* ========================================================= */

.pmu-lightbox {
    position: fixed;
    inset: 0;
    z-index: 5000;

    display: none;
    align-items: center;
    justify-content: center;

    background: rgba(0, 0, 0, 0.92);
    padding:
        max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
}

.pmu-lightbox.is-open {
    display: flex;
}

/* Close */
.pmu-lightbox__close {
    position: fixed;
    top: max(12px, env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 32px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.pmu-lightbox__close:hover {
    background: rgba(255, 255, 255, 0.22);
}

/* Toolbar */
.pmu-lightbox__toolbar {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: max(12px, env(safe-area-inset-bottom));
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.pmu-lightbox__btn {
    -webkit-appearance: none;
    appearance: none;
    min-width: 44px;
    height: 44px;
    padding: 0 14px;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    font-weight: 800;
    font-size: 18px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.pmu-lightbox__btn:hover {
    background: rgba(255, 255, 255, 0.20);
}

.pmu-lightbox__btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.pmu-lightbox__btn--reset {
    font-weight: 700;
    font-size: 14px;
}

.pmu-lightbox__zoom {
    color: #fff;
    font-weight: 700;
    min-width: 56px;
    text-align: center;
}

/* Content (scrollable pour naviguer quand zoom > 1) */
.pmu-lightbox__content {
    max-width: 96vw;
    max-height: 92vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 14px;
    background: transparent;
    overscroll-behavior: contain;
}

/* Image */
.pmu-lightbox__img {
    display: block;
    max-width: 96vw;
    max-height: 92vh;
    width: auto;
    height: auto;
    border-radius: 14px;
    margin: auto;
    background: transparent;

    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}

/* Scroll lock (utilisé par tes scripts via classe) */
html.scroll-locked,
body.scroll-locked {
    overflow: hidden;
}

body.scroll-locked {
    padding-right: var(--scrollbar-width, 0);
}

/* Responsive PMU images */
@media (max-width: 1023px) {
    .pmu-lightbox-trigger .pmu-game-card-image {
        max-height: 210px;
    }
}

@media (max-width: 767px) {
    .pmu-lightbox-trigger .pmu-game-card-image {
        max-height: 190px;
    }
}

@media (max-width: 480px) {
    .pmu-lightbox-trigger .pmu-game-card-image {
        max-height: 175px;
        width: min(92vw, 520px);
    }

    .pmu-lightbox__toolbar {
        gap: 8px;
        padding: 8px 10px;
    }

    .pmu-lightbox__btn {
        min-width: 42px;
        height: 42px;
        padding: 0 12px;
    }

    .pmu-lightbox__content {
        max-width: 94vw;
        max-height: 88vh;
    }

    .pmu-lightbox__img {
        max-width: 94vw;
        max-height: 88vh;
    }
}

.pmu-lightbox-trigger {
    touch-action: pan-y;
}





/* -------------------------------------------------*/
/* ------------ Mentions Légales ------------------ */
/* ------------------------------------------------ */

.mention-container {
    width: 100%;
    max-width: 1300px;
    margin: 4rem auto;
    padding: 2rem 3rem;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
        0 2px 4px -1px rgba(0, 0, 0, 0.06);
    box-sizing: border-box;
}

.mention-header {
    border-bottom: 2px solid #e5e7eb;
    padding-bottom: 1rem;
    margin-bottom: 2rem;
    text-align: center;
}

.mention-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #1f2937;
}

/* --- Sections principales --- */
.mention-section {
    margin-bottom: 2.5rem;
    position: relative;
    padding-right: 45px;
    overflow: visible;
}

.mention-edit-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    color: var(--color-primary);
    background: #fff;
    border-radius: 50%;
    padding: 10px;
    font-size: 1.4rem;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
}

.mention-edit-icon:hover {
    color: #fff;
    background: var(--color-secondary);
    transform: scale(1.15);
}

.mention-section-title {
    font-size: 1.75rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 1rem;
    border-left: 4px solid #f87171;
    padding-left: 0.75rem;
}

.mention-subsection-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #374151;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

/* --- Texte et listes --- */
.mention-paragraph {
    margin-bottom: 1rem;
    font-size: 1rem;
    color: #4b5563;
    line-height: 1.6;
}

.mention-list {
    list-style-type: disc;
    padding-left: 2rem;
    margin-bottom: 1rem;
}

.mention-list-item {
    margin-bottom: 0.5rem;
    color: #4b5563;
}

.mention-bold {
    font-weight: 600;
    color: #1f2937;
}

/* --- Message vide --- */
.no-mention-msg {
    text-align: center;
    color: #6b7280;
    font-style: italic;
    margin-top: 2rem;
}

/* --- Ligne séparatrice --- */
.text-separator {
    width: 80%;
    max-width: 1000px;
    height: 1px;
    background-color: #d3d3d3;
    margin: 2rem auto;
    border-radius: 1px;
}

/* ------------------------------------------------- */
/* --- Icônes d’édition et suppression admin ------- */
/* ------------------------------------------------- */

.responsable-edit-icon,
.responsable-edit-trash {
    position: absolute;
    top: 10px;
    color: var(--color-primary);
    background: #fff;
    border-radius: 50%;
    padding: 10px;
    font-size: 1.4rem;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
}

.responsable-edit-icon {
    right: 70px;
}

.responsable-edit-trash {
    right: 10px;
}

.responsable-edit-icon:hover,
.responsable-edit-trash:hover {
    color: #fff;
    background: var(--color-secondary);
    transform: scale(1.15);
}

/* ------------------------------------------------- */
/* ------------------ RESPONSIVE ------------------- */
/* ------------------------------------------------- */

/* === 💻 Écrans larges (≥1600px) === */
@media (min-width: 1600px) {
    .mention-container {
        max-width: 1500px;
        padding: 3rem 5rem;
    }

    .mention-title {
        font-size: 2.8rem;
    }

    .mention-section-title {
        font-size: 2rem;
    }
}

/* === 💻 Desktop standard (1200–1599px) === */
@media (max-width: 1599px) and (min-width: 1024px) {
    .mention-container {
        max-width: 1100px;
        padding: 2rem 3rem;
    }

    .mention-title {
        font-size: 2.4rem;
    }
}

/* === 🧑‍💻 Tablettes horizontales (768–1023px) === */
@media (max-width: 1023px) {
    .mention-container {
        margin: 2rem auto;
        padding: 1.8rem 2rem;
        width: 95%;
    }

    .mention-title {
        font-size: 2.1rem;
    }

    .mention-section-title {
        font-size: 1.5rem;
    }

    .mention-paragraph {
        font-size: 0.95rem;
    }

    .mention-edit-icon {
        font-size: 1.2rem;
        padding: 8px;
    }
}

/* === 📱 Mobiles moyens (480–767px) === */
@media (max-width: 767px) {
    .mention-container {
        margin: 1rem;
        padding: 1.5rem;
        width: auto;
    }

    .mention-title {
        font-size: 1.9rem;
    }

    .mention-section-title {
        font-size: 1.3rem;
    }

    .mention-paragraph {
        font-size: 0.95rem;
        line-height: 1.5;
    }

    .mention-edit-icon {
        font-size: 1rem;
        padding: 6px;
        top: 8px;
        right: 8px;
    }

    .text-separator {
        margin: 1.5rem auto;
        width: 90%;
    }
}

/* === 📱 Petits mobiles (≤479px) === */
@media (max-width: 479px) {
    .mention-container {
        margin: 0.8rem;
        padding: 1.2rem;
        border-radius: 10px;
    }

    .mention-title {
        font-size: 1.6rem;
    }

    .mention-section-title {
        font-size: 1.15rem;
        border-left-width: 3px;
        padding-left: 0.5rem;
    }

    .mention-paragraph {
        font-size: 0.9rem;
    }

    .mention-edit-icon {
        font-size: 0.9rem;
        padding: 5px;
        right: 6px;
    }

    .text-separator {
        width: 90%;
        margin: 1rem auto;
    }
}







/* ========================================= */
/* ---           LA PAGE NIRIO           --- */
/* ========================================= */

/* Titre principal de la page NIRIO */
.nirio-title {
    color: var(--color-text);
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-align: center;
    position: relative;
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
}

.nirio-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--color-secondary);
    /* Couleur du trait, peut être ajustée pour NIRIO si vous voulez */
    width: 50%;
    height: 3px;
}

/* Logo NIRIO */
.nirio-logo {
    display: block;
    margin: 1.5rem auto;
    max-width: 200px;
    /* Taille maximale du logo */
    height: auto;
}

/* Contenu principal de la page NIRIO */
.nirio-content {
    padding: 2rem 0;
}

/* Section individuelle (texte + image) */
.nirio-section {
    display: flex;
    flex-direction: row;
    /* Par défaut en ligne pour les grands écrans */
    align-items: center;
    gap: 3rem;
    margin-bottom: 4rem;
}

/* Inversion de l'ordre pour les sections paires */
.nirio-section:nth-child(even) {
    flex-direction: row-reverse;
}

.nirio-section .text-content {
    flex: 1;
    line-height: 1.8;
}

.nirio-section .image-content {
    flex: 1;
}

/* Titres des sous-sections (Qu'est-ce que NIRIO ?, Avantages, etc.) */
.nirio-section-title {
    color: var(--nirio-blue);
    /* Couleur principale de NIRIO pour les titres */
    font-size: 1.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: left;
    position: relative;
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
}

.nirio-section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    transform: translateX(0%);
    background-color: var(--nirio-green);
    /* Soulignement vert NIRIO */
    width: 50%;
    height: 3px;
}

/* Images des sections NIRIO */
.nirio-image {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.nirio-image:hover {
    transform: scale(1.03);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.25);
    cursor: pointer;
}


/* Conteneur du bouton et du disclaimer (réutilise les styles Nickel pour la cohérence, mais avec couleurs NIRIO) */
.nirio-container2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: auto;
    background-color: #f5f5f5;
    /* Fond clair pour la section bouton */
    font-family: var(--font-main);
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    margin-top: 4rem;
}

/* Bouton NIRIO */
.nirio-button2 {
    display: inline-block;
    padding: 15px 30px;
    background-color: var(--nirio-blue);
    color: #fff;
    border: 2px solid var(--nirio-blue);
    font-size: 1.2rem;
    font-weight: bold;
    text-decoration: none;
    border-radius: 50px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.nirio-button2:hover {
    background-color: var(--nirio-green);
    border-color: var(--nirio-green);
    transform: translateY(-2px);
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}

.nirio-button2:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Disclaimer sous le bouton */
.nirio-disclaimer2 {
    margin-top: 10px;
    color: #777;
    max-width: 100%;
    text-align: center;
}


.nirio-avantage-list {
    list-style: none;
    padding: 0;
}

.nirio-avantage-list li {
    font-size: 1.1rem;
    margin-bottom: 0.8rem;
    display: flex;
    align-items: center;
    color: #4b5563;
}

.nirio-avantage-list li .fas {
    color: var(--nirio-green);
    margin-right: 10px;
}

/* --- Responsive pour la page NIRIO --- */
@media (max-width: 992px) {
    .nirio-section {
        flex-direction: column !important;
        gap: 2rem;
    }

    .nirio-section:nth-child(even) {
        flex-direction: column !important;
    }

    .nirio-section-title {
        text-align: center;
    }

    .nirio-section-title::after {
        left: 50%;
        transform: translateX(-50%);
    }
}

/* Pour les très petits écrans, ajustez si nécessaire */
@media (max-width: 550px) {
    .nirio-title {
        font-size: 2rem;
    }

    .nirio-section-title {
        font-size: 1.5rem;
    }
}





/* ============================================== */
/* --- Page Services Publics (Nouveau) --- */
/* ============================================== */

/* Base styles */
.service-public-main-title {
    color: var(--color-text);
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-align: center;
    position: relative;
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
}

.service-public-main-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--color-secondary);
    width: 60%;
    height: 3px;
}

.service-public-content {
    padding: 2rem 0;
}

.service-public-section {
    display: flex;
    /* Active Flexbox */
    flex-direction: column;
    /* Force la disposition en colonne pour toutes les tailles d'écran */
    align-items: center;
    /* Centre les éléments horizontalement (image et texte) */
    gap: 3rem;
    margin-bottom: 1rem;
    background-color: #fff;
    padding: 1rem;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

.service-public-section .image-content {
    flex: none;
    /* L'image ne "grandit" pas, elle prend sa taille définie */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    order: 1;
    /* L'image apparaît toujours en premier */
    width: 100%;
    /* S'assure que le conteneur image prend la pleine largeur pour un bon centrage */
    max-width: 900px;
    /* Optionnel: limite la largeur max du conteneur image */
}

.service-public-section .text-content {
    flex: 1;
    line-height: 1.8;
    text-align: left;
    /* ***MODIFIÉ : Aligne le texte à gauche dans le bloc de contenu texte*** */
    order: 2;
    /* Le contenu texte apparaît toujours en second */
    width: 100%;
    /* S'assure que le bloc de texte prend toute la largeur */
    max-width: 900px;
    /* Aligne le texte à gauche au même niveau que l'image */
}


.service-public-section-title {
    color: var(--color-primary);
    font-size: 2rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
    /* Titres de section centrés partout */
    position: relative;
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
}

.service-public-section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    /* Centre le soulignement des titres de section */
    transform: translateX(-50%);
    background-color: var(--color-secondary);
    width: 50%;
    height: 3px;
}

.subsection-title {
    font-size: 1.35rem;
    font-weight: 600;
    color: #374151;
    margin-top: 2rem;
    margin-bottom: 1rem;
    text-align: center;
    /* Toujours centré pour ces titres */
}

.service-public-image {
    width: 100%;
    /* L'image prend 100% de la largeur de son conteneur parent */
    height: auto;
    max-height: 450px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-public-image:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}

.service-avantage-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
    /* ***MODIFIÉ : Supprime les marges auto pour un alignement à gauche naturel*** */
    max-width: 100%;
    /* Assure que la liste utilise toute la largeur disponible */
}

.service-avantage-list li {
    margin-bottom: 0.8rem;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* ***MODIFIÉ : Aligne les éléments de liste à gauche*** */
    text-align: left;
    /* Le texte lui-même reste aligné à gauche pour la lisibilité */
    word-break: break-word;
}

.service-avantage-list li .fas {
    color: var(--service-public-primary);
    margin-right: 10px;
    flex-shrink: 0;
}

.steps-list li {
    font-weight: 500;
    align-items: flex-start;
    justify-content: flex-start;
    /* ***MODIFIÉ : Aligne les éléments de liste (étapes) à gauche*** */
}

.steps-list li .fas {
    transform: translateY(2px);
}

.en-savoir-plus {
    margin-top: 2rem;
    text-align: center;
    font-size: 0.95rem;
    width: 100%;
    display: block;
}

.en-savoir-plus a {
    color: var(--service-public-primary);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.en-savoir-plus a:hover {
    color: var(--color-secondary);
    text-decoration: underline;
}

.service-public-footer-info {
    margin-top: 4rem;
    padding: 1.5rem;
    background-color: #f0f0f0;
    border-left: 5px solid var(--service-public-primary);
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.service-public-footer-info .disclaimer {
    font-size: 0.9rem;
    color: #666;
    text-align: center;
    margin-bottom: 1rem;
}

.service-public-footer-info .warning-message {
    font-size: 0.95rem;
    color: #cc0000;
    font-weight: 500;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 0;
}

.service-public-footer-info .warning-message .fas {
    font-size: 2rem;
}


/* --- Responsive pour la page Services Publics (Ajustements de taille uniquement) --- */
@media (max-width: 992px) {
    .service-public-section {
        gap: 2rem;
        padding: 2rem;
    }

    .service-public-main-title {
        font-size: 2.2rem;
    }

    .service-public-section-title {
        font-size: 1.8rem;
    }

    .subsection-title {
        font-size: 1.3rem;
    }

    /* Les listes gèrent déjà leur propre centrage via justify-content */
}

@media (max-width: 550px) {
    .service-public-main-title {
        font-size: 2rem;
    }

    .service-public-main-title::after {
        width: 50%;
    }

    .service-public-section {
        padding: 1.5rem;
        gap: 1.5rem;
    }

    .service-public-section-title {
        font-size: 1.6rem;
    }

    .subsection-title {
        font-size: 1.2rem;
    }

    .service-avantage-list li {
        font-size: 0.95rem;
    }
}











/* ============================================== */
/* --- Overlay de vérification d'âge (complet) ---*/
/* ============================================== */

.age-verification-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: none;
    /* ✅ invisible par défaut (anti-flash) */
    justify-content: center;
    align-items: center;
    z-index: 1000;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    will-change: opacity, visibility;
    transition: opacity 0.6s ease-in-out, visibility 0.6s ease-in-out;
    opacity: 0;
    visibility: hidden;
}

/* Masqué (via JS ou côté serveur) */
.age-verification-overlay.hide,
.age-verification-overlay.hidden-by-server {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    display: none;
}

/* Visible (activé par JS) */
.age-verification-overlay.show {
    display: flex;
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

/* --- Contenu de la boîte --- */
.age-verification-content {
    background-color: #ffffff;
    padding: 40px;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    max-width: 500px;
    width: 90%;
    font-family: 'Poppins', sans-serif;
    color: #333;
    transform: scale(0.9);
    opacity: 0;
    animation: fadeInScale 0.8s ease-out forwards;
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.age-verification-logo {
    max-width: 120px;
    display: block;
    /* force l’image à occuper une ligne complète */
    margin: 0 auto 25px auto;
}

.age-verification-title {
    font-size: 2.2em;
    color: var(--color-primary);
    margin-bottom: 15px;
    font-weight: 700;
}

.age-verification-text {
    font-size: 1.1em;
    margin-bottom: 30px;
    line-height: 1.6;
}

/* =============================== */
/* Inputs JJ / MM / AAAA — Overlay */
/* =============================== */

.date-inputs {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 25px;
}

.form-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.form-group label {
    font-size: 0.9em;
    color: #555;
    margin-bottom: 8px;
    font-weight: 600;
}

/* On utilise type="text" + inputmode="numeric" pour contrôler la longueur et l’UX */
.form-group input[type="text"] {
    width: 100%;
    max-width: 130px;
    /* JJ / MM */
    padding: 12px 10px;
    border: 2px solid #ddd;
    border-radius: 8px;
    font-size: 1.2em;
    line-height: 1;
    text-align: center;
    background: #fff;
    color: #111;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
    outline: none;
    caret-color: var(--color-secondary);
    letter-spacing: 0.04em;
}

/* Le champ Année peut être un peu plus large */
#year.formatted-input,
#year.form-group input[type="text"],
#year {
    max-width: 170px;
}

/* Focus */
.form-group input[type="text"]:focus {
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-secondary) 18%, transparent);
}

/* Placeholder */
.form-group input[type="text"]::placeholder {
    color: #aaa;
    opacity: 1;
}

/* États d’erreur / succès (optionnels, si ajoutés via JS) */
.form-group.has-error input[type="text"],
.form-group input[type="text"].is-invalid {
    border-color: #dc3545;
    box-shadow: 0 0 0 4px color-mix(in srgb, #dc3545 18%, transparent);
}

.form-group input[type="text"].is-valid {
    border-color: #28a745;
    box-shadow: 0 0 0 4px color-mix(in srgb, #28a745 18%, transparent);
}

/* Désactivé */
.form-group input[type="text"]:disabled {
    background: #f5f5f5;
    color: #999;
    cursor: not-allowed;
}

/* Empêche l’auto-zoom iOS sur focus */
@supports (-webkit-touch-callout: none) {
    .form-group input[type="text"] {
        font-size: 16px;
    }
}

/* Autofill (Chrome) */
.form-group input[type="text"]:-webkit-autofill {
    -webkit-text-fill-color: #111;
    -webkit-box-shadow: 0 0 0 1000px #fff inset;
    transition: background-color 5000s ease-in-out 0s;
}

/* Message d’erreur */
.error-message {
    color: #dc3545;
    font-size: 0.95em;
    margin-top: -10px;
    margin-bottom: 20px;
    min-height: 20px;
}

/* ===================== */
/* Boutons et liens CTA  */
/* ===================== */

.age-verify-btn {
    background-color: var(--color-secondary);
    color: #fff;
    border: none;
    padding: 15px 30px;
    font-size: 1.2em;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    font-weight: 700;
    letter-spacing: 0.5px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.age-verify-btn:hover {
    background-color: var(--color-secondary-hover, #1e7e34);
    transform: translateY(-2px);
}

.age-verify-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.back-home-btn {
    display: inline-block;
    margin-top: 15px;
    color: var(--color-primary);
    text-decoration: underline;
    font-weight: 500;
    font-size: 0.95em;
    transition: opacity 0.3s;
}

.back-home-btn:hover {
    opacity: 0.8;
}

/* ===================== */
/*      Responsive       */
/* ===================== */

@media (max-width: 600px) {
    .age-verification-content {
        padding: 25px;
    }

    .age-verification-logo {
        max-width: 100px;
        margin-bottom: 20px;
    }

    .age-verification-title {
        font-size: 1.8em;
    }

    .age-verification-text {
        font-size: 1em;
        margin-bottom: 20px;
    }

    .date-inputs {
        flex-direction: column;
        gap: 10px;
    }

    .form-group input[type="text"] {
        max-width: 100%;
        font-size: 1.1em;
        padding: 10px 12px;
    }

    .age-verify-btn {
        padding: 12px 25px;
        font-size: 1.1em;
    }
}













/* ============================================== */
/* --- Page Articles Fumeurs --- */
/* ============================================== */

/* Conteneur principal de la page */
.fumeurs-container {
    background-color: var(--color-background);
    max-width: 1300px;
    margin: 0 auto;
    padding: 80px 20px;
}

/* En-tête de la page */
.fumeurs-header {
    text-align: center;
    margin-bottom: 2rem;
}

.fumeurs-title {
    color: var(--color-text);
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-align: center;
    position: relative;
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
}

/* Trait sous le titre */
.fumeurs-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--color-secondary);
    width: 35%;
    height: 3px;
}

.fumeurs-subtitle {
    font-size: 1.125rem;
    color: #4b5563;
    margin-bottom: 2rem;
}

/* Section contenant toutes les cartes */
.fumeurs-section {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 1rem 0;
}

/* Carte individuelle */
.fumeurs-card {
    background-color: #fff;
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.fumeurs-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

/* Contenu principal de la carte (icone + texte) */
.fumeurs-main-content {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
}

.fumeurs-icon {
    font-size: 3rem;
    color: var(--color-primary);
    margin-right: 1.5rem;
    transition: color 0.3s ease;
}

/* Changement de couleur de l'icône au survol */
.fumeurs-card:hover .fumeurs-icon {
    color: var(--color-secondary);
}

.fumeurs-text-content {
    flex-grow: 1;
}

.fumeurs-title-card {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1f2937;
    transition: color 0.3s ease;
}

/* Changement de couleur du titre au survol */
.fumeurs-card:hover .fumeurs-title-card {
    color: var(--color-secondary);
}

.fumeurs-description {
    color: #666;
    font-size: 1.0rem;
    line-height: 1.5;
    margin-top: 0.25rem;
}

/* Liste des catégories */
.fumeurs-categories {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    border-top: 1px solid #e5e7eb;
    padding-top: 1.5rem;
}

.fumeurs-category-item {
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 1rem;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.fumeurs-category-item:hover {
    background-color: #f1f5f9;
    transform: translateY(-5px);
}

.fumeurs-category-title {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 0.25rem;
}

.fumeurs-category-description {
    font-size: 0.9rem;
    color: #4b5563;
    margin: 0;
}

/* --- Media Queries pour la Responsivité --- */

/* Pour les tablettes (min-width de 768px) */
@media (min-width: 768px) {
    .fumeurs-section {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Pour les grands écrans (min-width de 1024px) */
@media (min-width: 1024px) {
    .fumeurs-section {
        grid-template-columns: repeat(3, 1fr);
    }
}


















/* ============================================== */
/* --- Galerie photos - Tabac Bultez ----------- */
/* ============================================== */

.galerie-main-title {
    color: var(--color-text);
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-align: center;
    position: relative;
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
}

.galerie-main-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--color-primary);
    width: 60%;
    height: 3px;
}

.galerie-page-header .subtitle,
.galerie-page .subtitle {
    text-align: center;
    color: #666;
    margin-bottom: 3rem;
}

/* ✅ wrapper */
.galerie-carousel {
    position: relative;
}

/* ✅ Radios : on veut un fallback no-JS, mais SANS jump/scroll.
   -> position: fixed évite que le navigateur “scroll to focused element” */
.gal-radio {
    position: fixed;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;

    clip-path: inset(50%);
    clip: rect(0 0 0 0);
    overflow: hidden;
    white-space: nowrap;
    border: 0;
}

/* ============================= */
/*  CARROUSEL PRINCIPAL          */
/* ============================= */

.carousel-box {
    width: calc(100% - 2rem);
    max-width: 1150px;
    margin: 0 auto 2rem;

    border-radius: 14px;
    border: 3px solid rgba(0, 0, 0, 0.35);
    background: #000;
    overflow: hidden;
    position: relative;
    box-shadow: 0 18px 35px rgba(0, 0, 0, 0.35);

    aspect-ratio: 16 / 9;
    max-height: 62vh;
}

/* Wrapper des slides (déplacé par le JS OU par CSS radios en no-JS) */
.slides-wrapper {
    display: flex;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    transition: transform 0.4s ease-in-out;
}

/* Chaque slide */
.slide-item {
    flex: 0 0 100%;
    min-width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Image principale : toujours entière, jamais rognée */
.slide-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

/* Ombre intérieure légère */
.carousel-box::after {
    content: "";
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.35);
    pointer-events: none;
}

/* ✅ Controls (JS) */
.carousel-controls {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    z-index: 5;
    pointer-events: none;
}

.carousel-btn {
    pointer-events: auto;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .25);
    background: rgba(0, 0, 0, .55);
    color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: transform .15s ease, background-color .2s ease, opacity .2s ease;
}

.carousel-btn:hover {
    background: rgba(0, 0, 0, .7);
    transform: translateY(-1px);
}

.carousel-btn:active {
    transform: translateY(0);
}

/* ✅ No-JS : on cache les boutons (sinon ils font rien) */
html.no-js .carousel-controls {
    display: none;
}

/* ============================= */
/*  VIGNETTES EN GRID            */
/* ============================= */

#thumbnails-container {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.5rem;

    width: calc(100% - 2rem);
    max-width: 1150px;
    margin: 0 auto 0.5rem;
}

.thumbnail-btn {
    padding: 4px;
    border-radius: 0.5rem;
    border: 3px solid transparent;
    transition: border-color 0.2s, transform 0.15s ease;
    cursor: pointer;

    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #f5f5f5;

    user-select: none;
    -webkit-user-select: none;
}

.thumbnail-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0.25rem;
}

/* Vignette active (JS) */
.thumbnail-btn.is-selected {
    border-color: #ef4444;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

/* Focus clavier */
.thumbnail-btn:focus-visible {
    outline: 3px solid var(--color-secondary);
    outline-offset: 2px;
}

/* ============================= */
/*  BREAKPOINTS RESPONSIVE       */
/* ============================= */

@media (min-width: 1800px) and (max-height: 1100px) {
    .carousel-box {
        max-height: 56vh;
    }
}

@media (min-width: 2560px) {
    .carousel-box {
        max-width: 1400px;
        max-height: 62vh;
    }

    #thumbnails-container {
        max-width: 1400px;
        grid-template-columns: repeat(8, minmax(0, 1fr));
    }
}

@media (min-width: 1440px) and (max-width: 2559px) {
    .carousel-box {
        max-width: 1150px;
    }

    #thumbnails-container {
        max-width: 1150px;
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }
}

@media (max-width: 1439px) and (min-width: 1024px) {
    .carousel-box {
        max-width: 1100px;
        max-height: 60vh;
    }

    #thumbnails-container {
        max-width: 1100px;
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

@media (max-width: 1023px) and (min-width: 768px) {
    .carousel-box {
        width: calc(100% - 1.5rem);
        max-width: 100%;
        max-height: 55vh;
        aspect-ratio: 16 / 10;
        margin-inline: auto;
    }

    #thumbnails-container {
        width: calc(100% - 1.5rem);
        max-width: 100%;
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 767px) and (min-width: 480px) {
    .carousel-box {
        width: calc(100% - 1rem);
        max-width: 100%;
        border-radius: 10px;
        border-width: 2px;

        max-height: 52vh;
        aspect-ratio: 4 / 3;
    }

    #thumbnails-container {
        width: calc(100% - 1rem);
        max-width: 100%;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 479px) {
    .carousel-box {
        width: calc(100% - 1rem);
        max-width: 100%;
        border-radius: 10px;
        border-width: 2px;
        margin: 0 auto 1.5rem;

        max-height: 48vh;
        aspect-ratio: 4 / 3;
    }

    #thumbnails-container {
        width: calc(100% - 1rem);
        max-width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.4rem;
    }

    .thumbnail-btn {
        padding: 3px;
    }
}

/* ============================= */
/*  Utilitaires locaux (option)  */
/* ============================= */

.text-center {
    text-align: center;
}

.mb-6 {
    margin-bottom: 1.5rem;
}

.text-2xl {
    font-size: 1.5rem;
}

.font-semibold {
    font-weight: 600;
}

.text-gray-700 {
    color: #4b5563;
}

.max-w-4xl {
    max-width: 56rem;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.p-6 {
    padding: 1.5rem;
}

.flex {
    display: flex;
}

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

.mt-6 {
    margin-top: 1.5rem;
}

.space-x-2>*+* {
    margin-left: 0.5rem;
}














/* ============================================================
   PAGE DISPATCH (QR / Liens rapides) — mobile-first
   Pensée pour smartphones + encoches, gros touch targets
   ============================================================ */

/* ---------- Safe-area (iPhone encoches) ---------- */
:root {
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
}

/* ---------- Base & structure ---------- */
.dispatch-body {
    background-color: var(--color-background, #f7f7f7);
    font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: stretch;
    /* mieux pour les très petits écrans */
    min-height: 100vh;
    margin: 0;
    padding: calc(16px + var(--safe-top)) calc(16px + var(--safe-right)) calc(16px + var(--safe-bottom)) calc(16px + var(--safe-left));
    box-sizing: border-box;
}

.dispatch-container {
    width: 100%;
    max-width: 560px;
    /* cap agréable même en desktop */
    padding: 12px;
    text-align: center;
    margin: auto;
}

/* ---------- Header ---------- */
.dispatch-header {
    margin-bottom: 1.5rem;
}

.dispatch-logo-wrapper {
    display: inline-block;
    perspective: 1000px;
}

.dispatch-logo {
    position: relative;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    box-shadow: 0 6px 14px rgba(0, 0, 0, .22);
    overflow: hidden;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    cursor: pointer;
    transition: transform .15s linear;
    margin: 0 auto .75rem;
}

.dispatch-face {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
    transform: translateZ(2.5mm);
}

.dispatch-logo::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, #222 10%, #000 90%);
    transform: translateZ(-5mm) rotateY(180deg);
    backface-visibility: hidden;
}

/* ---------- Titres & texte ---------- */
.dispatch-title {
    font-size: 1.5rem;
    line-height: 1.25;
    color: var(--color-text, #222);
    margin: .25rem 0 .5rem;
    font-weight: 800;
    letter-spacing: .2px;
}

.dispatch-intro {
    font-size: .98rem;
    color: var(--color-text, #333);
    opacity: .9;
    max-width: 92%;
    margin: 0 auto .75rem;
}

/* ---------- Liens ---------- */
.dispatch-links-list {
    display: flex;
    flex-direction: column;
    gap: .9rem;
    /* serré pour petit écran */
    padding-bottom: calc(8px + var(--safe-bottom));
}

.dispatch-link-button {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-primary, #6b3b2f);
    border: 2px solid var(--color-primary, #6b3b2f);
    color: #fff;
    padding: 14px 16px;
    /* gros touch target */
    border-radius: 16px;
    text-decoration: none;
    font-size: 1.05rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
    transition: background-color .2s ease, transform .15s ease, box-shadow .2s ease, border-color .2s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .15);
    -webkit-tap-highlight-color: transparent;
    /* iOS tap */
}

.dispatch-link-button i {
    margin-right: 12px;
    font-size: 1.25rem;
    min-width: 20px;
}

.dispatch-link-button:focus-visible {
    outline: 3px solid rgba(255, 184, 40, .7);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(255, 184, 40, .25);
}

.dispatch-link-button:hover {
    background-color: #5e342a;
    border-color: #5e342a;
    transform: scale(.985);
    box-shadow: 0 6px 14px rgba(0, 0, 0, .22);
}

/* Sur écrans tactiles (pas de hover), feedback au tap */
@media (hover: none) {
    .dispatch-link-button:hover {
        transform: none;
    }

    .dispatch-link-button:active {
        transform: scale(.975);
        box-shadow: 0 6px 14px rgba(0, 0, 0, .24);
    }
}

/* ---------- Footer ---------- */
.dispatch-footer {
    margin-top: 1.6rem;
    font-size: .82rem;
    color: var(--color-text, #333);
    opacity: .65;
}

/* ---------- States/animations ---------- */
.dispatch-logo:active {
    transform: scale(.97);
}

.dispatch-logo.animating {
    border-color: transparent;
    box-shadow: 0 0 22px rgba(255, 255, 255, .25);
    transition: border-color .3s ease, box-shadow .3s ease;
}

/* transitions que le JS (thème) viendra recolorer */
.dispatch-body,
.dispatch-title,
.dispatch-intro,
.dispatch-link-button {
    transition: background-color .45s ease, color .45s ease, border-color .45s ease, box-shadow .45s ease;
}

/* ---------- Breakpoints pensés smartphone ---------- */

/* ≥360px (Android/mini iPhone) */
@media (min-width: 360px) {
    .dispatch-logo {
        width: 176px;
        height: 176px;
    }

    .dispatch-title {
        font-size: 1.6rem;
    }

    .dispatch-link-button {
        padding: 15px 18px;
        font-size: 1.06rem;
    }
}

/* ≥390–430px (iPhone/Pro/Max) */
@media (min-width: 390px) {
    .dispatch-logo {
        width: 188px;
        height: 188px;
    }

    .dispatch-title {
        font-size: 1.7rem;
    }

    .dispatch-intro {
        font-size: 1rem;
        max-width: 88%;
    }

    .dispatch-link-button {
        padding: 16px 20px;
    }
}

@media (min-width: 430px) {
    .dispatch-logo {
        width: 200px;
        height: 200px;
    }

    .dispatch-title {
        font-size: 1.8rem;
    }
}

/* ≥600px (petites tablettes / grands téléphones paysage) */
@media (min-width: 600px) {
    .dispatch-container {
        padding: 16px 20px;
    }

    .dispatch-title {
        font-size: 1.95rem;
    }

    .dispatch-intro {
        font-size: 1.05rem;
        max-width: 85%;
    }

    .dispatch-links-list {
        gap: 1rem;
    }

    .dispatch-link-button {
        padding: 18px 22px;
        font-size: 1.08rem;
    }
}

/* ≥768px (tablette/desktop : on garde une colonne compacte) */
@media (min-width: 768px) {
    .dispatch-container {
        max-width: 560px;
    }

    .dispatch-title {
        font-size: 2rem;
    }

    .dispatch-intro {
        max-width: 80%;
    }
}

/* ---------- Accessibilité / Motion ---------- */
@media (prefers-reduced-motion: reduce) {

    .dispatch-logo,
    .dispatch-body,
    .dispatch-title,
    .dispatch-intro,
    .dispatch-link-button {
        transition: none !important;
    }
}






/* ============================================================
   Warning legal
   ============================================================ */
.fumeurs-legal-warning {
    background: linear-gradient(135deg, #fff4f4, #ffecec);
    color: #b30000;
    border: 2px solid #ffb3b3;
    border-radius: 10px;
    padding: 18px 20px;
    text-align: center;
    font-weight: 600;
    line-height: 1.5;
    font-size: 0.95rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    margin: 25px auto 35px;
    max-width: 1200px;
}

.fumeurs-legal-warning i {
    color: #b30000;
    margin-right: 8px;
    font-size: 1.2rem;
}

.fumeurs-legal-warning a {
    color: #b30000;
    text-decoration: underline;
    font-weight: 600;
}

.fumeurs-legal-warning a:hover {
    text-decoration: none;
}








/* ============================================================
   page 404
   Breakpoints :
   - Téléphone : < 600px
   - Tablette  : 600–767px
   - Petit écran : 768–1023px
   - Moyen écran : 1024–1439px
   - Grand écran : >= 1440px
   ============================================================ */

.erreur-main {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px;
    text-align: center;
    width: 100%;
}

.erreur-page-container {
    width: min(92vw, 1200px);
    margin: 0 auto;
    padding: clamp(40px, 6vw, 90px) 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    background-color: var(--color-background);
}

.erreur-header {
    max-width: 70ch;
}

.a404-h1 {
    font-size: clamp(2rem, 5vw, 4rem);
    line-height: 1.1;
    font-family: var(--font-main);
    font-weight: 700;
    color: var(--color-primary);
    margin: 0 0 0.75rem 0;
}

.a404-p {
    font-size: clamp(1rem, 2vw, 1.2rem);
    margin: 0 0 0.75rem 0;
    color: var(--color-text);
}

.erreur-navigation {
    margin-top: 8px;
    display: flex;
    justify-content: center;
    width: 100%;
}

.erreur-a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

/* Liens simples dans les textes (si tu en ajoutes) */
.erreur-page-container a:not(.btn-secondary):not(.btn-primary) {
    color: var(--color-secondary);
    text-decoration: none;
    font-weight: 700;
    border-bottom: 2px solid transparent;
    transition: border-color 0.3s;
}

.erreur-page-container a:not(.btn-secondary):not(.btn-primary):hover {
    border-color: var(--color-secondary);
}

/* ---------- Animation cigarette (responsive) ---------- */

.cigarette-container {
    position: relative;
    width: min(520px, 92vw);
    height: clamp(140px, 22vw, 220px);
    margin: 18px auto 10px auto;
}

/* Cendrier */
.ashtray {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(150px, 26vw, 260px);
    height: clamp(44px, 7vw, 70px);
    background: linear-gradient(to right, #bdc3c7, #95a5a6);
    border-radius: 50%;
    box-shadow: 0 7.5px 15px rgba(0, 0, 0, 0.5);
}

/* Cigarette */
.cigarette {
    position: absolute;
    left: 50%;
    bottom: clamp(44px, 7vw, 70px);
    transform: translateX(-50%) rotate(-10deg);
    width: clamp(90px, 18vw, 140px);
    height: clamp(18px, 3.2vw, 26px);
    background-color: #fff;
    border-radius: 7.5px 0 0 7.5px;
    box-shadow: 0 3px 7.5px rgba(0, 0, 0, 0.3);
    animation: burn 10s linear forwards;
    transform-origin: right center;
}

/* Filtre */
.cigarette::before {
    content: '';
    position: absolute;
    top: 0;
    right: clamp(-40px, -7vw, -28px);
    width: clamp(28px, 7vw, 40px);
    height: 100%;
    background-color: #f2d9a6;
    border-radius: 0 7.5px 7.5px 0;
}

/* Braise */
@keyframes incandescentGlow {
    0% {
        box-shadow: 0 0 5px 2px rgba(255, 0, 0, 0.8), 0 0 10px 5px rgba(255, 100, 0, 0.5);
    }

    100% {
        box-shadow: 0 0 10px 4px rgba(255, 0, 0, 0.9), 0 0 15px 7px rgba(255, 100, 0, 0.7);
    }
}

.cigarette::after {
    content: '';
    position: absolute;
    top: 0;
    left: clamp(-8px, -1.2vw, -6px);
    width: clamp(14px, 2.2vw, 16px);
    height: 100%;
    background-color: rgba(194, 71, 71, 1);
    border-radius: 50%;
    animation: incandescentGlow 0.5s infinite alternate;
}

/* La cigarette se consume */
@keyframes burn {
    0% {
        width: clamp(90px, 18vw, 140px);
    }

    100% {
        width: 0;
    }
}

/* Fumée */
.smoke {
    position: absolute;
    bottom: calc(clamp(44px, 7vw, 70px) + clamp(6px, 1.2vw, 10px));
    left: 50%;
    width: clamp(12px, 2.2vw, 16px);
    height: clamp(12px, 2.2vw, 16px);
    background-color: rgba(168, 168, 168, 0.81);
    border-radius: 50%;
    opacity: 0;
    animation: rise 3s infinite;
}

.smoke-2 {
    animation-delay: 0.6s;
}

.smoke-3 {
    animation-delay: 1.2s;
}

@keyframes rise {
    0% {
        transform: translate3d(-50%, 0, 0);
        opacity: 0;
    }

    40% {
        transform: translate3d(calc(-50% + 12px), -55px, 0);
        opacity: 1;
    }

    100% {
        transform: translate3d(calc(-50% + 22px), -120px, 0);
        opacity: 0;
    }
}

/* ---------- Breakpoints ---------- */

/* Tablette */
@media (min-width: 600px) {
    .erreur-page-container {
        gap: 16px;
    }
}

/* Petit écran (tablette paysage / petit laptop) */
@media (min-width: 768px) {
    .erreur-page-container {
        padding: clamp(52px, 6vw, 90px) 20px;
    }
}

/* Moyen écran */
@media (min-width: 1024px) {
    .erreur-main {
        padding: 20px;
    }

    .erreur-page-container {
        width: min(86vw, 1200px);
    }
}

/* Grand écran */
@media (min-width: 1440px) {
    .erreur-page-container {
        width: min(80vw, 1300px);
    }
}

/* Accessibilité : réduire les animations si demandé */
@media (prefers-reduced-motion: reduce) {

    .cigarette,
    .smoke,
    .cigarette::after {
        animation: none !important;
    }
}







/* ============================================================
   page 403 – Cigarette animée + symbole interdit
   Breakpoints :
   - Téléphone : < 600px
   - Tablette  : 600–767px
   - Petit écran : 768–1023px
   - Moyen écran : 1024–1439px
   - Grand écran : >= 1440px
   ============================================================ */

/* Titres/texte */
.a403-h1 {
    font-size: clamp(2rem, 5vw, 3.6rem);
    line-height: 1.1;
    font-family: var(--font-main);
    font-weight: 700;
    color: var(--color-primary);
    margin: 0 0 0.75rem 0;
}

.a403-p,
.a403-msg {
    font-size: clamp(1rem, 2vw, 1.2rem);
    color: var(--color-text);
    margin: 0 0 0.75rem 0;
}

/* Bouton */
.erreur403-a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

/* --- Animation principale --- */
.forbidden403-animation {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: min(520px, 92vw);
    height: clamp(200px, 28vw, 300px);
    margin: 18px auto 10px auto;
    overflow: hidden;
}

/* --- cigarette --- */
.cigarette403 {
    position: relative;
    width: clamp(140px, 22vw, 200px);
    height: clamp(16px, 2.6vw, 22px);
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    animation: glowCycle403 6s ease-in-out infinite;
}

.filter403 {
    position: absolute;
    left: 0;
    width: clamp(28px, 4.6vw, 38px);
    height: 100%;
    background: #c4814f;
    border-right: 2px dotted #a2622a;
    border-radius: 999px 0 0 999px;
}

.body403 {
    position: absolute;
    left: clamp(28px, 4.6vw, 38px);
    right: clamp(12px, 2vw, 16px);
    height: 100%;
    background: #fff;
}

/* --- Bout incandescent --- */
.tip403 {
    position: absolute;
    right: 0;
    width: clamp(12px, 2vw, 16px);
    height: 100%;
    border-radius: 0 999px 999px 0;
    background: radial-gradient(circle at 50% 50%, #a10000 30%, #2e0000 100%);
    box-shadow: 0 0 0 rgba(255, 90, 0, 0);
    animation: tipGlow403 1s ease-in-out infinite alternate;
}

@keyframes tipGlow403 {
    0% {
        box-shadow: 0 0 3px 1px rgba(255, 60, 0, 0.2);
        background: radial-gradient(circle at 50% 50%, #6a0000 30%, #2e0000 100%);
    }

    50% {
        box-shadow: 0 0 8px 3px rgba(255, 90, 0, 0.5);
        background: radial-gradient(circle at 50% 50%, #ff4a00 20%, #a10000 80%);
    }

    100% {
        box-shadow: 0 0 12px 4px rgba(255, 120, 0, 0.7);
        background: radial-gradient(circle at 50% 50%, #ff6a00 10%, #c70000 70%);
    }
}

/* --- Fumée --- */
.smoke403-container {
    position: absolute;
    bottom: 52%;
    left: 50%;
    transform: translateX(calc(-50% + clamp(70px, 12vw, 105px)));
    width: clamp(70px, 14vw, 120px);
    height: clamp(120px, 20vw, 180px);
    pointer-events: none;
}

.smoke403 {
    position: absolute;
    bottom: 0;
    left: 80%;
    width: clamp(10px, 1.8vw, 14px);
    height: clamp(10px, 1.8vw, 14px);
    background: rgba(120, 120, 120, 0);
    border-radius: 50%;
    opacity: 0;
    animation: smokeUp403 6s ease-in-out infinite;
}

.smoke403-2 {
    animation-delay: 2s;
    left: 75%;
}

.smoke403-3 {
    animation-delay: 4s;
    left: 85%;
}

@keyframes smokeUp403 {
    0% {
        transform: translateY(0) scale(1);
        opacity: 0;
        background: rgba(120, 120, 120, 0);
    }

    10% {
        opacity: 0.4;
        background: rgba(150, 150, 150, 0.6);
    }

    50% {
        transform: translateY(-60px) scale(1.3);
        opacity: 0.3;
    }

    90% {
        opacity: 0;
        transform: translateY(-120px) scale(0.8);
    }

    100% {
        opacity: 0;
    }
}

/* --- Panneau interdit --- */
.forbidden403-symbol {
    position: absolute;
    top: 26%;
    left: 50%;
    width: clamp(80px, 12vw, 120px);
    height: clamp(80px, 12vw, 120px);
    transform: translateX(-50%);
    opacity: 0;
    animation: forbiddenAppear403 6s ease-in-out infinite;
}

.circle403 {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 6px solid #d32f2f;
    border-radius: 50%;
}

.slash403 {
    position: absolute;
    width: 6px;
    height: 130%;
    background: #d32f2f;
    top: -15%;
    left: 50%;
    transform: rotate(-45deg) translateX(-50%);
}

@keyframes forbiddenAppear403 {

    0%,
    40% {
        opacity: 0;
        transform: translateX(-50%) scale(0.85);
    }

    50%,
    70% {
        opacity: 0.95;
        transform: translateX(-50%) scale(1);
    }

    90%,
    100% {
        opacity: 0;
        transform: translateX(-50%) scale(1.15);
    }
}

/* --- Corps qui "respire" --- */
@keyframes glowCycle403 {

    0%,
    90%,
    100% {
        filter: brightness(1);
    }

    20%,
    40% {
        filter: brightness(1.18);
    }
}

/* ---------- Breakpoints ---------- */

@media (min-width: 768px) {
    .forbidden403-animation {
        margin-top: 22px;
    }
}

@media (min-width: 1024px) {
    .forbidden403-animation {
        width: min(560px, 86vw);
    }
}

@media (min-width: 1440px) {
    .forbidden403-animation {
        width: min(620px, 80vw);
    }
}

/* Accessibilité */
@media (prefers-reduced-motion: reduce) {

    .cigarette403,
    .tip403,
    .smoke403,
    .forbidden403-symbol {
        animation: none !important;
    }
}



/* ============================================================
   PAGE 405 – Switch GET/POST bloqué (animation CSS)
   Breakpoints :
   - Téléphone : < 600px
   - Tablette  : 600–767px
   - Petit écran : 768–1023px
   - Moyen écran : 1024–1439px
   - Grand écran : >= 1440px
   ============================================================ */

.a405-h1 {
    font-size: clamp(2rem, 5vw, 3.8rem);
    line-height: 1.1;
    font-family: var(--font-main);
    font-weight: 700;
    color: var(--color-primary);
    margin: 0 0 0.75rem 0;
}

.a405-p,
.a405-msg {
    font-size: clamp(1rem, 2vw, 1.2rem);
    color: var(--color-text);
    line-height: 1.6;
    margin: 0 0 0.75rem 0;
}

/* Animation wrapper */
.method405-animation {
    width: min(520px, 92vw);
    margin: 18px auto 10px auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* Switch */
.method405-switch {
    position: relative;
    width: min(420px, 92vw);
    height: clamp(58px, 10vw, 72px);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(240, 240, 240, .9));
    box-shadow: 0 10px 30px rgba(0, 0, 0, .10), inset 0 0 0 1px rgba(0, 0, 0, .06);
    overflow: hidden;
}

/* Labels */
.method405-label {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 800;
    letter-spacing: 0.5px;
    opacity: 0.75;
    user-select: none;
    font-size: clamp(0.9rem, 2vw, 1rem);
}

.method405-label-get {
    left: 18px;
}

.method405-label-post {
    right: 18px;
}

/* Barrière rouge côté POST */
.method405-barrier {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    width: 12px;
    height: calc(100% - 16px);
    border-radius: 10px;
    background: #d32f2f;
    box-shadow: 0 0 0 4px rgba(211, 47, 47, .12);
}

/* Knob (essaie de passer à droite mais se fait bloquer) */
.method405-knob {
    position: absolute;
    top: 50%;
    left: 8px;
    transform: translateY(-50%);
    width: 54%;
    height: calc(100% - 16px);
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 10px 20px rgba(0, 0, 0, .14);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: knobMove405 2.8s ease-in-out infinite;
}

.method405-knob-text {
    font-weight: 900;
    font-size: clamp(0.75rem, 1.8vw, 0.95rem);
    opacity: 0.8;
}

/* Croix rouge qui pulse quand ça bloque */
.method405-x {
    position: absolute;
    top: 50%;
    left: 50%;
    width: clamp(34px, 7vw, 46px);
    height: clamp(34px, 7vw, 46px);
    transform: translate(-50%, -50%);
    opacity: 0;
    animation: xPulse405 2.8s ease-in-out infinite;
    pointer-events: none;
}

.method405-x::before,
.method405-x::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 120%;
    background: #d32f2f;
    border-radius: 6px;
    transform-origin: center;
    box-shadow: 0 0 0 4px rgba(211, 47, 47, .10);
}

.method405-x::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.method405-x::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.method405-caption {
    font-size: clamp(0.95rem, 2vw, 1.05rem);
    color: var(--color-text);
    opacity: 0.9;
}

/* Mouvement du knob : va à droite, "tape" la barrière, recule */
@keyframes knobMove405 {
    0% {
        left: 8px;
    }

    35% {
        left: calc(46%);
    }

    45% {
        left: calc(46%);
        transform: translateY(-50%) translateX(0);
    }

    52% {
        left: calc(46%);
        transform: translateY(-50%) translateX(-6px);
    }

    /* petit recoil */
    60% {
        left: calc(44%);
        transform: translateY(-50%) translateX(0);
    }

    100% {
        left: 8px;
    }
}

/* La croix apparaît au moment du choc */
@keyframes xPulse405 {

    0%,
    35% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.9);
    }

    45% {
        opacity: 0.95;
        transform: translate(-50%, -50%) scale(1);
    }

    60% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.05);
    }

    100% {
        opacity: 0;
    }
}

/* ---------- Breakpoints ---------- */

@media (min-width: 768px) {
    .method405-animation {
        margin-top: 22px;
    }
}

@media (min-width: 1024px) {
    .method405-switch {
        width: min(460px, 86vw);
    }
}

@media (min-width: 1440px) {
    .method405-switch {
        width: min(520px, 80vw);
    }
}

/* Accessibilité */
@media (prefers-reduced-motion: reduce) {

    .method405-knob,
    .method405-x {
        animation: none !important;
    }

    .method405-x {
        opacity: 0 !important;
    }
}





/* ============================================================
   PAGE 500 – Briquet BIC : roulette + étincelles + flamme
   Breakpoints :
   - Téléphone : < 600px
   - Tablette  : 600–767px
   - Petit écran : 768–1023px
   - Moyen écran : 1024–1439px
   - Grand écran : >= 1440px
   ============================================================ */

.a500-h1 {
    font-size: clamp(2rem, 5vw, 3.6rem);
    line-height: 1.1;
    font-family: var(--font-main);
    font-weight: 700;
    color: var(--color-primary);
    margin: 0 0 0.75rem 0;
}

.a500-p,
.a500-msg {
    font-size: clamp(1rem, 2vw, 1.2rem);
    color: var(--color-text);
    line-height: 1.6;
    margin: 0 0 0.75rem 0;
}

/* ---------- Briquet ---------- */
.bic500 {
    --bic-scale: 1;
    position: relative;
    width: 160px;
    height: 300px;
    margin: 18px auto 10px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .25));
    transform: scale(var(--bic-scale));
    transform-origin: center bottom;
}

/* Corps du briquet */
.bic500-body {
    width: 100px;
    height: 190px;
    background: #ffcc00;
    border-radius: 14px 14px 10px 10px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .08);
}

.bic500-sticker {
    position: absolute;
    top: 58px;
    left: 50%;
    transform: translateX(-50%);
    width: 64px;
    height: 28px;
    background: #fff;
    border-radius: 6px;
    font: 700 14px/28px ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    color: #111;
    text-align: center;
    letter-spacing: .5px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}

/* Tête métallisée */
.bic500-head {
    position: absolute;
    top: 70px;
    left: 50%;
    transform: translateX(-50%);
    width: 101px;
    height: 50px;
    background: linear-gradient(180deg, #ddd, #bbb);
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
}

.bic500-guard {
    position: absolute;
    top: -8px;
    right: 7px;
    width: 24px;
    height: 16px;
    background: #e53935;
    border-radius: 6px 6px 2px 2px;
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
}

/* Roulette moletée */
.bic500-wheel {
    position: absolute;
    top: -10px;
    left: -5px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: repeating-linear-gradient(90deg, #777 0 2px, #999 2px 4px);
    box-shadow: inset 0 0 0 2px #666, 0 1px 2px rgba(0, 0, 0, .25);
    transform-origin: 50% 50%;
}

/* Pierre */
.bic500-flint {
    position: absolute;
    top: -10px;
    left: 35px;
    width: 8px;
    height: 18px;
    border-radius: 4px;
    background: #444;
    box-shadow: inset 0 -2px 0 rgba(255, 255, 255, .2);
}

/* Flamme */
.bic500-flame {
    position: absolute;
    top: -8px;
    left: 70%;
    width: 18px;
    height: 62px;
    transform: translateX(-50%);
    border-radius: 50% 50% 40% 40%/70% 70% 30% 30%;
    background:
        radial-gradient(circle at 50% 85%, #ffd180 0%, #ff9800 50%, rgba(255, 255, 255, 0) 70%),
        radial-gradient(circle at 50% 40%, #ff5722 0%, rgba(255, 255, 255, 0) 60%);
    filter: blur(.3px);
    opacity: 1;
    pointer-events: none;
    animation: flame500 1.6s ease-in-out infinite;
}

@keyframes flame500 {
    0% {
        transform: translateX(-50%) scaleY(.9);
    }

    50% {
        transform: translateX(-50%) scaleY(1.05);
    }

    100% {
        transform: translateX(-50%) scaleY(.92);
    }
}

.bic500-flame.is-off {
    opacity: 0;
    animation: none;
}

/* Étincelles */
.bic500-sparks {
    position: absolute;
    top: 14px;
    left: 30px;
    width: 60px;
    height: 60px;
    pointer-events: none;
    opacity: 0;
}

.bic500-sparks span {
    position: absolute;
    width: 6px;
    height: 6px;
    background: radial-gradient(circle, #fff 0 40%, #ffc107 45% 100%);
    border-radius: 50%;
    transform: translate(0, 0) scale(0);
}

.bic500-sparks.active {
    opacity: 1;
}

.bic500-sparks.active span:nth-child(1) {
    animation: sparkFly 420ms ease-out forwards;
}

.bic500-sparks.active span:nth-child(2) {
    animation: sparkFly 420ms ease-out .05s forwards;
}

.bic500-sparks.active span:nth-child(3) {
    animation: sparkFly 420ms ease-out .1s forwards;
}

@keyframes sparkFly {
    0% {
        transform: translate(10px, 10px) scale(.2);
        opacity: .9;
    }

    60% {
        transform: translate(38px, -18px) scale(.9);
        opacity: .7;
    }

    100% {
        transform: translate(62px, -32px) scale(0);
        opacity: 0;
    }
}

/* Effet rotation roulette */
.bic500-wheel.spin {
    animation: wheelSpin500 280ms cubic-bezier(.3, .7, .2, 1) 1;
}

@keyframes wheelSpin500 {
    0% {
        transform: rotate(0deg);
    }

    70% {
        transform: rotate(210deg);
    }

    100% {
        transform: rotate(180deg);
    }
}

/* ---------- Breakpoints ---------- */

/* Téléphone */
@media (max-width: 599px) {
    .bic500 {
        --bic-scale: .88;
    }
}

/* Tablette */
@media (min-width: 600px) and (max-width: 767px) {
    .bic500 {
        --bic-scale: .95;
    }
}

/* Petit écran */
@media (min-width: 768px) and (max-width: 1023px) {
    .bic500 {
        --bic-scale: 1;
    }
}

/* Moyen écran */
@media (min-width: 1024px) and (max-width: 1439px) {
    .bic500 {
        --bic-scale: 1.05;
    }
}

/* Grand écran */
@media (min-width: 1440px) {
    .bic500 {
        --bic-scale: 1.12;
    }
}

/* Accessibilité */
@media (prefers-reduced-motion: reduce) {

    .bic500-flame,
    .bic500-wheel.spin,
    .bic500-sparks.active span {
        animation: none !important;
    }

    .bic500-sparks {
        opacity: 0 !important;
    }
}










/* ============================================================
   Objets-divers – Grille + Cartes + Modales + Upload dropzone
   ============================================================ */

.objets-grid {
    font-family: var(--font-main);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 20px;
    width: 100%;
    margin: 20px auto 60px auto;
}

/* Cartes */
.objets-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 12px;
    padding: 14px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.objets-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.10);
    border-color: rgba(0, 0, 0, 0.10);
}

.objets-edit-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    color: var(--color-secondary);
    font-size: 18px;
    cursor: pointer;
    transition: transform .2s ease, opacity .2s ease;
    opacity: 0.9;
}

.objets-edit-icon:hover {
    transform: scale(1.08);
    opacity: 1;
}

.objets-thumb {
    width: 100%;
    height: 160px;
    /* ⬅️ Ajuste ici si tu veux + grand */
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.objets-thumb img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
    transform: translateZ(0);
}

.objets-title {
    margin: 4px 2px 8px 2px;
    font-size: 1rem;
    color: var(--color-text);
    font-weight: 600;
    text-align: center;
}

/* Carte d’ajout centrée */
.obj-game-card.obj-add-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 10px;
    min-height: 160px;
    background: #fff;
    border: 2px dashed rgba(0, 0, 0, 0.15);
    border-radius: 12px;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

.obj-game-card.obj-add-card:hover {
    background: #fffaf2;
    border-color: var(--color-secondary);
    transform: translateY(-2px);
}

.obj-add-icon {
    font-size: 28px;
    color: var(--color-secondary);
}

.obj-game-card-title {
    margin: 0;
    font-size: 1rem;
    color: var(--color-text);
    font-weight: 600;
}

/* Modale centrée écran */
.obj-edit-modal {
    position: fixed;
    inset: 0;
    display: none;
    /* sera forcé à l’ouverture */
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1000;
    padding: 16px;
}

/* ⛳ Fix “inline display:none” => on force l’affichage à l’ouverture */
.obj-edit-modal[aria-hidden="false"],
.obj-edit-modal.is-open {
    display: flex !important;
}

.obj-edit-modal-content {
    position: relative;
    width: 100%;
    max-width: 560px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
    padding: 22px;
    transform: translateZ(0);
    will-change: transform, opacity;
}

/* Titre + close */
.obj-close-button {
    position: absolute;
    top: 10px;
    right: 14px;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    border: 0;
    background: transparent;
    color: #444;
}

#objetsModalTitle {
    margin: 0 0 14px 0;
    font-size: 1.25rem;
    color: var(--color-text);
    font-weight: 700;
}

/* Form */
.obj-edit-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

.obj-edit-form-group label {
    font-size: 0.95rem;
    color: #555;
    font-weight: 600;
}

.obj-edit-form-group input[type="text"],
.obj-edit-form-group input[type="number"],
.obj-edit-form-group textarea {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid #eee;
    border-radius: 8px;
    font-size: 1rem;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
    background: #fff;
    color: var(--color-text);
}

.obj-edit-form-group input:focus,
.obj-edit-form-group textarea:focus {
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 4px rgba(184, 134, 11, 0.12);
}

/* Upload dropzone */
.obj-file-label {
    display: block;
    width: 100%;
    text-align: center;
    padding: 18px 14px;
    border: 2px dashed rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    cursor: pointer;
    user-select: none;
    color: #444;
    font-weight: 600;
    transition: background .2s ease, border-color .2s ease;
    background: #fffaf2;
}

.obj-file-label i {
    margin-right: 8px;
    color: var(--color-secondary);
}

.obj-file-label:hover {
    border-color: var(--color-secondary);
    background: #fff6e5;
}

.obj-file-label.is-dragover {
    border-color: var(--color-secondary);
    background: #fff1d1;
}

.obj-file-info {
    margin-top: 8px;
    font-size: 0.92rem;
    color: #666;
}

/* Optionnel preview */
.obj-file-preview {
    margin-top: 10px;
    display: none;
    align-items: center;
    justify-content: center;
    background: #fafafa;
    border: 1px solid #eee;
    border-radius: 10px;
    width: 100%;
    height: 220px;
    overflow: hidden;
}

.obj-file-preview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}

/* Boutons */
.obj-edit-form-buttons {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 4px;
}

.obj-submit-btn {
    background: var(--color-secondary);
    color: #fff;
    border: 0;
    border-radius: 10px;
    padding: 10px 16px;
    font-weight: 700;
    cursor: pointer;
    transition: transform .15s ease, opacity .15s ease;
}

.obj-submit-btn:hover {
    transform: translateY(-1px);
    opacity: .95;
}

.obj-cancel-btn {
    background: #f2f2f2;
    color: #333;
    border: 0;
    border-radius: 10px;
    padding: 10px 14px;
    font-weight: 600;
    cursor: pointer;
}

.obj-delete-btn {
    background: #d9534f;
    color: #fff;
    border: 0;
    border-radius: 10px;
    padding: 10px 14px;
    font-weight: 700;
    cursor: pointer;
}

/* Responsif */
@media (max-width: 680px) {
    .objets-grid {
        gap: 16px;
    }

    .objets-thumb {
        height: 140px;
    }

    .obj-edit-modal-content {
        max-width: 92vw;
        padding: 18px;
    }

    .obj-file-label {
        padding: 16px 12px;
    }
}

@media (max-width: 420px) {
    .objets-thumb {
        height: 130px;
    }

    .obj-edit-form-buttons {
        flex-wrap: wrap;
        justify-content: center;
    }
}

.obj-image-preview-wrap {
    margin-top: .75rem;
    display: none;
}

.obj-image-preview-title {
    margin: 0 0 .4rem 0;
    font-weight: 600;
}

.obj-image-preview {
    width: 100%;
    max-height: 240px;
    object-fit: contain;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, .15);
    background: rgba(0, 0, 0, .03);
}

.obj-drop-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(0, 0, 0, .75);
    backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
}

.obj-drop-overlay-box {
    width: min(520px, 92vw);
    border-radius: 14px;
    padding: 22px 18px;
    background: rgba(255, 255, 255, .08);
    border: 2px dashed rgba(255, 255, 255, .35);
    color: #fff;
    text-align: center;
}

.obj-drop-overlay-icon {
    font-size: 34px;
    margin-bottom: 10px;
}

.obj-drop-overlay-text {
    font-size: 18px;
    line-height: 1.25;
}

.obj-drop-overlay-text small {
    display: block;
    opacity: .85;
    margin-top: 6px;
    font-size: 13px;
}






/* ============================================================
   Page Histoire (style classique) — Nomenclature hist-*
   Effet photo scotchée (2 scotchs) + lightbox au clic
   FIX tablette overflow droite
   ============================================================ */

/* ✅ Sécurise les largeurs/paddings dans la page histoire */
.hist-content,
.hist-content *,
.hist-local-nav,
.hist-local-nav * {
    box-sizing: border-box;
}

/* Titre principal */
.hist-main-title {
    color: var(--color-text);
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-align: center;
    position: relative;
    padding-bottom: .5rem;
    margin-bottom: 1.5rem;
}

.hist-main-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--color-secondary);
    width: 40%;
    height: 3px;
}

/* Sous-titre */
.hist-subtitle {
    text-align: center;
    font-size: 1.125rem;
    color: #555;
    margin-bottom: 2rem;
}

/* Notices */
.hist-notice.hist-error {
    max-width: 1100px;
    width: 100%;
    margin: 0 auto 1rem;
    color: #7f1d1d;
    background: #fee2e2;
    border: 1px solid #fecaca;
    border-radius: 10px;
    padding: .85rem 1rem;
}

/* Sommaire local */
.hist-local-nav {
    max-width: 1100px;
    width: 100%;
    margin: 0 auto 1.25rem;
    padding: 0 16px;
    overflow-x: clip;
    /* ✅ évite scroll horiz si un élément dépasse */
}

.hist-local-nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    justify-content: center;
}

.hist-anchor {
    display: inline-block;
    padding: .4rem .7rem;
    border-radius: 999px;
    border: 1px dashed var(--color-secondary, #ccc);
    color: var(--color-primary, #0d2f70);
    text-decoration: none;
    transition: background .2s, color .2s, border-color .2s;
}

.hist-anchor:hover,
.hist-anchor:focus-visible {
    background: #f0f8ff;
    color: var(--color-secondary, #ff5722);
    border-color: var(--color-primary, #0d2f70);
    outline: none;
}

/* Wrapper contenu */
.hist-content {
    max-width: 1100px;
    width: 100%;
    margin: 0 auto 2rem;
    padding: 0 16px 24px;
    overflow-x: clip;
    /* ✅ coupe les micro-débordements (tablette) */
}

/* Section */
.hist-section {
    background: linear-gradient(135deg, #ffffff, #fafafa);
    border: 1px solid #eaeaea;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .06);
    padding: 26px;
    margin-bottom: 28px;

    /* ✅ sécurité tablette si un décor dépasse */
    overflow-x: clip;
}

/* Titre section */
.hist-section-title {
    font-size: 1.8rem;
    color: var(--color-primary, #0d2f70);
    margin: 0 0 .5rem;
    text-align: left;
}

/* Intro */
.hist-intro {
    color: #555;
    font-style: italic;
    margin: 0 0 1rem;
}

/* Deux colonnes (✅ minmax(0,...) pour éviter overflow) */
.hist-two-columns {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: 26px;
}

.hist-two-columns--invert {
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
}

/* ✅ Important : autorise les colonnes à rétrécir */
.hist-col-text,
.hist-col-media {
    min-width: 0;
}

/* Texte (✅ wrap agressif si long mot/url) */
.hist-col-text p {
    margin: 0 0 1rem;
    font-size: 1rem;
    line-height: 1.7;
    color: #111827;

    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Responsive : 1 colonne */
@media (max-width: 880px) {

    .hist-two-columns,
    .hist-two-columns--invert {
        grid-template-columns: 1fr;
    }
}

/* Grille photos */
.hist-photo-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 14px;
}

.hist-photo-grid .hist-photo-card:nth-child(1),
.hist-photo-grid .hist-photo-card:nth-child(2),
.hist-photo-grid .hist-photo-card:nth-child(3) {
    grid-column: span 12;
}

@media (max-width: 720px) {
    .hist-photo-grid .hist-photo-card {
        grid-column: span 12 !important;
    }
}

/* Carte photo + “polaroid” + scotch */
.hist-photo-card {
    position: relative;
    text-align: center;
}

/* ✅ button reset (sinon certains navigateurs ajoutent padding/outline chelou) */
.hist-photo-button {
    border: 0;
    background: transparent;
    padding: 0;
    width: 100%;
    text-align: inherit;
}

.hist-photo-polaroid {
    position: relative;
    display: block;
    width: 100%;
    max-width: 100%;
    border-radius: 14px;
    overflow: visible;
    padding: 8px 8px 16px;
    background: #fff;
    border: 1px solid #ececec;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .08);
    transition: transform .2s ease, box-shadow .2s ease;
    cursor: zoom-in;
}

.hist-photo-polaroid:hover {
    transform: translateY(-2px) rotate(.15deg);
    box-shadow: 0 16px 42px rgba(0, 0, 0, .14);
}

.hist-photo-polaroid img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    border-radius: 10px;
}

/* Scotch (2 morceaux) — ✅ rentrés pour ne pas créer overflow tablette */
.hist-tape {
    position: absolute;
    width: 72px;
    height: 24px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 40%), #eadbb8;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12);
    opacity: .92;
    border-radius: 4px;
    pointer-events: none;
    z-index: 2;
    transition: transform 520ms ease, opacity 520ms ease;
}

/* ✅ au lieu de -15px on rentre dans la carte */
.hist-tape.tl {
    top: 6px;
    left: -15px;
    transform: rotate(-35deg);
}

.hist-tape.br {
    bottom: 6px;
    right: -15px;
    transform: rotate(-35deg);
}

/* Décollage temporaire au clic (classe ajoutée par JS) */
.hist-photo-button.is-detaching .hist-tape.tl {
    transform: translate(-12px, -12px) rotate(-28deg);
    opacity: 0;
}

.hist-photo-button.is-detaching .hist-tape.br {
    transform: translate(12px, 12px) rotate(12deg);
    opacity: 0;
}

/* Légende */
.hist-photo-caption {
    margin-top: .35rem;
    font-size: .9rem;
    color: #6b7280;
    overflow-wrap: anywhere;
}

/* ---------- Lightbox ---------- */
.hist-lightbox {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(0, 0, 0, .65);
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 420ms cubic-bezier(.25, .8, .25, 1);
}

.hist-lightbox.is-open {
    opacity: 1;
    pointer-events: auto;
}

.hist-lightbox-inner {
    position: relative;
    width: min(92vw, 1200px);
    max-height: 88vh;
    display: grid;
    place-items: center;
}

.hist-lightbox-img {
    width: 100%;
    height: auto;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .45);
    transform: scale(.98);
    transition: transform 420ms cubic-bezier(.25, .8, .25, 1);
}

.hist-lightbox.is-open .hist-lightbox-img {
    transform: scale(1);
}

.hist-lightbox-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(255, 255, 255, .9);
    border: 1px solid #e5e7eb;
    color: #0f172a;
    border-radius: 999px;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(0, 0, 0, .18);
}

.hist-lightbox-close:hover {
    background: #fff;
}

/* Désactiver le scroll du body quand lightbox ouverte */
html.hist-no-scroll,
body.hist-no-scroll {
    overflow: hidden !important;
}