/* =========================================================================
   FEUILLE DE STYLE UNIQUE DU SITE
   Fusion de tous les fichiers styles/*.css utilisés + de tous les <style>
   inline qui étaient répétés dans chaque page PHP.

   Organisation :
   1) Polices
   2) Reset & utilitaires globaux (toutes les pages)
   3) En-tête / navigation (toutes les pages)
   4) Pied de page (toutes les pages)
   5) Bannière de consentement cookies (toutes les pages)
   6) Page d'accueil (index.php)
   7) Pages tutoriels (tuto, kickflip, ollie, shove, materiel, quisuisje, wakepark)
   8) Page Blog (liste des articles)
   9) Pages "article" (bases-du-wakeskate, mon-retour, championnats2025,
       comment-choisir, quesque-le-wakeskate)
   10) Page 404
   11) Mentions légales
   12) Politique de confidentialité

   Les sections 6 à 12 sont spécifiques à une page (ou un groupe de pages) et
   ne s'appliquent que si le <body> de la page porte la classe correspondante
   (theme-index, theme-tuto, theme-blog, theme-article, theme-article-table,
   theme-quesque, theme-championnats, theme-404, theme-mentions,
   theme-politique), afin d'éviter que des classes de même nom utilisées
   différemment d'une page à l'autre (.content, h1...) ne se marchent dessus.
   ========================================================================= */


/* =========================================================================
   0) COULEURS (variables globales)
   Centralise la charte "Braise" (brun presque noir / orange vif / crème) pour
   pouvoir la faire évoluer en un seul endroit à l'avenir.
   ========================================================================= */
:root {
    --color-primary: #FAF0E4;
    --color-accent: #FF6B35;
    --color-bg: #FAF0E4;
    --color-bg-alt: #EFE2D2;
    --color-bg-muted: #F4E7D7;
    --color-text: #2F2420;
    --color-text-dark: #1C1410;
    --color-nav-footer-bg: #2A1A14;
    --color-nav-footer-text: #F7E6D3;
}


/* =========================================================================
   1) POLICES
   ========================================================================= */
@font-face {
    font-family: 'marianne';
    src: url(../font/Marianne-Regular.woff2) format('woff2');
    font-display: swap;
}

@font-face {
    font-family: 'brockmann';
    src: url(../font/brockmann-medium-webfont.woff) format('woff');
    font-display: swap;
}

body {
    font-family: 'DM Sans', 'marianne', sans-serif;
}


/* =========================================================================
   2) RESET & UTILITAIRES GLOBAUX (toutes les pages)
   ========================================================================= */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

*:before,
*:after {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

html {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.5s ease-in;
}

#loading-bar-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: rgba(0, 0, 0, 0.1);
    z-index: 9999;
}

#loading-bar {
    width: 0;
    height: 100%;
    transition: width 0.25s;
}

.no-scroll {
    overflow: hidden;
}

.italic-reverse {
    display: inline-block;
    transform: skewX(12deg);
    font-size: inherit;
    line-height: inherit;
}


/* =========================================================================
   3) EN-TÊTE / NAVIGATION (toutes les pages)
   ========================================================================= */
/* Barre flottante façon Apple : pilule centrée, reflet qui suit la souris,
   loupe "Dock macOS" sur les liens, réduction au scroll (voir js/header.js) */
.site-header {
    --nav-ease: cubic-bezier(0.16, 1, 0.3, 1);
    position: sticky;
    top: 0;
    z-index: 999;
    height: 84px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.float-nav {
    --mouse-x: 50%;
    --spotlight-opacity: 0;
    pointer-events: auto;
    position: relative;
    flex: 0 1 auto;
    width: 100%;
    max-width: 945px;
    margin: 0 auto;
    padding: 10px 14px 10px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background-color: var(--color-nav-footer-bg);
    /* Relief : grain léger + lumière venant du haut, plus sombre en bas */
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.03 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
        linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.06) 100%);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(243, 232, 214, 0.12);
    border-radius: 14px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 1px 2px rgba(28, 20, 16, 0.14),
        0 12px 30px -10px rgba(28, 20, 16, 0.25);
    /* "backwards" : le clip-path de l'animation ne reste pas appliqué et ne coupe pas l'ombre */
    animation: float-nav-reveal 0.85s var(--nav-ease) backwards;
    transition: max-width 0.5s cubic-bezier(0.34, 1.3, 0.64, 1),
        padding 0.38s var(--nav-ease),
        border-radius 0.38s var(--nav-ease),
        border-color 0.25s ease,
        box-shadow 0.35s var(--nav-ease);
}

.float-nav:hover {
    max-width: 1015px;
    border-color: rgba(243, 232, 214, 0.18);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 1px 2px rgba(28, 20, 16, 0.14),
        0 16px 36px -10px rgba(28, 20, 16, 0.3);
}

.site-header.is-scrolled .float-nav {
    max-width: 835px;
    padding: 6px 12px 6px 20px;
    border-radius: 12px;
}

.site-header.is-scrolled .float-nav:hover {
    max-width: 895px;
}

@keyframes float-nav-reveal {
    from {
        clip-path: inset(0 50% 0 50% round 14px);
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        clip-path: inset(0 0 0 0 round 14px);
        opacity: 1;
        transform: translateY(0);
    }
}

/* Reflet net sur la bordure, qui suit la souris */
.float-nav-shine-top,
.float-nav-shine {
    position: absolute;
    pointer-events: none;
    opacity: var(--spotlight-opacity);
    transition: opacity 0.25s var(--nav-ease), border-radius 0.38s var(--nav-ease);
}

.float-nav-shine-top {
    top: -1px;
    left: 12px;
    right: 12px;
    height: 1px;
    z-index: 10;
    background: radial-gradient(150px 1px at var(--mouse-x) 0px,
            #fff 0%, rgba(255, 255, 255, 0.95) 25%, rgba(255, 255, 255, 0.25) 55%, transparent 100%);
}

.float-nav-shine {
    inset: -1px;
    z-index: 9;
    padding: 1px;
    border-radius: inherit;
    background: radial-gradient(160px 40px at var(--mouse-x) 0px,
            #fff 0%, rgba(255, 255, 255, 0.95) 25%, rgba(255, 255, 255, 0.25) 55%, transparent 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.logo {
    position: relative;
    z-index: 20;
    font-size: 25px;
    text-transform: uppercase;
    color: var(--color-nav-footer-text);
    font-weight: lighter;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    transition: font-size 0.38s var(--nav-ease);
}

/* Icône sombre à l'origine : passée en crème pour ressortir sur le fond sombre */
.logo-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    filter: brightness(0) invert(94%) sepia(12%) saturate(400%) hue-rotate(345deg);
    transition: width 0.38s var(--nav-ease), height 0.38s var(--nav-ease);
}

.site-header.is-scrolled .logo {
    font-size: 21px;
}

.site-header.is-scrolled .logo-icon {
    width: 24px;
    height: 24px;
}

.float-nav-links {
    position: relative;
    z-index: 20;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 22px;
    transition: gap 0.38s var(--nav-ease);
}

.site-header.is-scrolled .float-nav-links {
    gap: 16px;
}

.float-nav-item {
    display: inline-flex;
    will-change: transform;
}

.float-nav-item a {
    display: inline-flex;
    padding: 6px;
    color: rgba(243, 232, 214, 0.7);
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 1.05px;
    text-decoration: none;
    user-select: none;
    transition: color 0.2s var(--nav-ease), font-size 0.38s var(--nav-ease), padding 0.38s var(--nav-ease);
}

.site-header.is-scrolled .float-nav-item a {
    font-size: 13px;
    padding: 4px;
}

.float-nav-item a:hover,
.float-nav-item a:focus-visible {
    color: var(--color-nav-footer-text);
}

/* Soulignement orange qui se déroule de gauche à droite */
.float-nav-item a span {
    position: relative;
}

.float-nav-item a span::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 100%;
    height: 2px;
    border-radius: 999px;
    background: var(--color-accent);
    box-shadow: 0 1px 8px rgba(255, 107, 53, 0.65);
    transform: scaleX(0);
    transform-origin: left center;
    opacity: 0;
    transition: transform 0.3s var(--nav-ease), opacity 0.2s ease;
}

.float-nav-item a:hover span::after,
.float-nav-item a:focus-visible span::after {
    transform: scaleX(1);
    opacity: 1;
}

/* Menu déroulant "Tutoriel" : petite pilule sous le lien */
.float-nav-item.has-dropdown {
    position: relative;
}

.float-nav-item.has-dropdown>a {
    align-items: center;
    gap: 5px;
}

.float-nav-chevron {
    opacity: 0.6;
    transition: transform 0.28s var(--nav-ease), opacity 0.2s ease, color 0.2s ease;
}

.float-nav-item.has-dropdown:hover .float-nav-chevron,
.float-nav-item.has-dropdown:focus-within .float-nav-chevron {
    opacity: 1;
    color: var(--color-accent);
    transform: translateY(1px) rotate(180deg);
}

.float-nav-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 170px;
    margin-top: 20px;
    padding: 6px;
    white-space: nowrap;
    background-color: var(--color-nav-footer-bg);
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(0, 0, 0, 0.06) 100%);
    border: 1px solid rgba(243, 232, 214, 0.12);
    border-radius: 16px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 1px 2px rgba(28, 20, 16, 0.14),
        0 12px 30px -10px rgba(28, 20, 16, 0.25);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -6px) scale(0.96);
    transform-origin: top center;
    transition: opacity 0.2s ease, transform 0.35s var(--nav-ease), visibility 0s linear 0.2s;
}

/* zone invisible qui relie le lien à la pilule pour ne pas perdre le survol */
.float-nav-dropdown::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -22px;
    height: 22px;
}

.float-nav-item.has-dropdown:hover .float-nav-dropdown,
.float-nav-item.has-dropdown:focus-within .float-nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0) scale(1);
    transition: opacity 0.2s ease, transform 0.35s var(--nav-ease), visibility 0s;
}

.float-nav-dropdown a {
    display: block;
    padding: 8px 14px;
    border-radius: 10px;
    color: rgba(243, 232, 214, 0.75);
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.float-nav-dropdown a:hover,
.float-nav-dropdown a:focus-visible {
    color: var(--color-nav-footer-text);
    background-color: rgba(243, 232, 214, 0.1);
}

@media (prefers-reduced-motion: reduce) {
    .float-nav {
        animation: none;
    }
}

.mobile-toggle {
    display: none;
    cursor: pointer;
    width: 30px;
    flex-shrink: 0;
}

.mobile-toggle span {
    display: block;
    width: 30px;
    height: 4px;
    margin-bottom: 6px;
    background: var(--color-nav-footer-text);
    border-radius: 1000px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Navigation mobile en panneau latéral (sidenav) */
.sidenav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(28, 20, 16, 0.55);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 1000;
}

.sidenav-overlay.is-visible {
    opacity: 1;
    visibility: visible;
}

.sidenav {
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: min(300px, 80vw);
    background-color: var(--color-nav-footer-bg);
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.15);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 1001;
    overflow-y: auto;
}

.sidenav.is-open {
    transform: translateX(0);
}

.sidenav-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 100px 30px 30px;
}

.sidenav-list li {
    margin: 10px 0;
}

.sidenav-list li a {
    display: block;
    padding: 5px 0;
    color: rgba(243, 232, 214, 0.7);
    transition: color 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 16px;
    font-family: 'brockmann', 'marianne', sans-serif;
    text-decoration: none;
}

.sidenav-list li a:hover {
    color: var(--color-nav-footer-text);
}

@media (max-width: 766px) {

    /* Sur mobile : barre pleine largeur classique, liens dans le sidenav */
    .site-header {
        height: auto;
        padding: 20px 0;
        background-color: var(--color-nav-footer-bg);
        pointer-events: auto;
    }

    .float-nav,
    .float-nav:hover,
    .site-header.is-scrolled .float-nav,
    .site-header.is-scrolled .float-nav:hover {
        max-width: none;
        min-height: 40px;
        padding: 0 2%;
        justify-content: center;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background-image: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        animation: none;
    }

    .float-nav-shine-top,
    .float-nav-shine,
    .float-nav-links {
        display: none;
    }

    .logo,
    .site-header.is-scrolled .logo {
        font-size: 25px;
        text-align: center;
        z-index: 1001;
    }

    .mobile-toggle {
        display: block;
        position: absolute;
        top: 50%;
        left: 20px;
        transform: translateY(-50%);
        z-index: 1002;
    }

    .mobile-toggle[aria-expanded="true"] span:nth-child(1) {
        transform: translateY(10px) rotate(45deg);
    }

    .mobile-toggle[aria-expanded="true"] span:nth-child(2) {
        opacity: 0;
    }

    .mobile-toggle[aria-expanded="true"] span:nth-child(3) {
        transform: translateY(-10px) rotate(-45deg);
    }
}


/* =========================================================================
   4) PIED DE PAGE (toutes les pages)
   ========================================================================= */
.site-footer {
    position: relative;
    max-width: 100%;
    background-color: var(--color-nav-footer-bg);
    color: var(--color-nav-footer-text);
    font-family: 'marianne', Arial, sans-serif;
    font-size: 14px;
    border-top: 1px solid var(--color-nav-footer-bg);
}

.footer-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: start;
    gap: 40px;
    width: 100%;
    padding: 50px 24px 30px;
    text-align: left;
}

.footer-col {
    min-width: 0;
}

.footer-nav {
    justify-self: center;
}

.footer-contact {
    justify-self: end;
    align-self: end;
}

.footer-col h3 {
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--color-accent);
    margin: 0 0 16px;
}

.footer-brand .footer-logo {
    display: inline-block;
    font-family: 'brockmann', 'marianne', sans-serif;
    font-size: 32px;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--color-nav-footer-text);
    text-decoration: none;
    margin-bottom: 10px;
}

.footer-brand p {
    margin: 0;
    color: var(--color-nav-footer-text);
    opacity: 0.75;
    max-width: 220px;
}

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

.footer-nav ul li {
    margin-bottom: 10px;
}

.footer-col a {
    color: var(--color-nav-footer-text);
    text-decoration: none;
    transition: color 0.3s;
}

.footer-col a:hover {
    color: var(--color-accent);
    text-decoration: underline;
}

.footer-social {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.footer-social i {
    font-size: 18px;
}

.footer-contact-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.footer-bottom {
    border-top: 1px solid rgba(243, 232, 214, 0.2);
    padding: 18px 30px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    max-width: 1100px;
    margin: 0 auto;
}

.footer-bottom p {
    margin: 0;
    opacity: 0.7;
}

.footer-bottom ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin: 0;
    padding: 0;
}

.footer-bottom a,
.footer-preferences-btn {
    color: var(--color-nav-footer-text);
    text-decoration: none;
    font-size: 13px;
    opacity: 0.85;
}

.footer-preferences-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    font-family: 'marianne';
}

.footer-bottom a:hover,
.footer-preferences-btn:hover {
    text-decoration: underline;
    opacity: 1;
}

.icon:hover {
    color: rgba(255, 106, 0, 0.951);
}

@media screen and (max-width: 700px) {
    .footer-inner {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 40px 24px 24px;
        text-align: center;
    }

    .footer-nav,
    .footer-contact {
        justify-self: center;
    }

    .footer-brand p {
        max-width: none;
    }

    .footer-bottom {
        flex-direction: column;
        padding: 18px 24px;
        text-align: center;
    }

    .footer-bottom ul {
        justify-content: center;
    }
}


/* =========================================================================
   5) BANNIÈRE DE CONSENTEMENT COOKIES (toutes les pages)
   ========================================================================= */
.consent-banner {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #f9f9f9;
    border-top: 1px solid #ccc;
    padding: 15px;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: #333;
    animation: slideUp 0.5s ease-out;
}

.consent-banner a {
    color: #4c6baf;
    text-decoration: none;
    font-weight: bold;
}

.consent-banner .accept-cookies {
    background-color: #4c6baf;
    color: white;
    border: none;
    border-radius: 20px;
    padding: 10px 20px;
    cursor: pointer;
    font-weight: bold;
}

.decline-cookies {
    background-color: transparent;
    color: black;
    border: solid #4c6baf;
    border-radius: 20px;
    padding: 10px 20px;
    cursor: pointer;
    font-weight: bold;
}

.consent-banner p {
    margin: 0;
    padding-right: 10px;
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

@media screen and (max-width: 600px) {
    .consent-banner {
        flex-direction: column;
        text-align: center;
    }

    .consent-banner button {
        margin-top: 10px;
        width: 100%;
    }

    .consent-banner p {
        padding-right: 0;
    }
}


/* =========================================================================
   6) PAGE D'ACCUEIL (index.php) — <body class="theme-index">
   ========================================================================= */
body.theme-index {
    color: var(--color-text-dark);
    font-family: 'marianne';
    overflow-x: hidden;
    background-color: var(--color-bg);
    font-weight: 200;
}

body.theme-index .grid-item a {
    text-decoration: none;
    color: #2a2a2a;
    cursor: pointer;
}

body.theme-index .form-note a {
    text-decoration: none;
    color: var(--color-accent);
    cursor: pointer;
    transition: all 0.3s ease-in;
}

body.theme-index .form-note a:hover {
    color: var(--color-nav-footer-bg);
    text-decoration: underline solid;
}

body.theme-index .form-note p {
    font-size: 1.2em;
}

@media screen and (max-width: 1200px) {
    body.theme-index .brockmanTitle p a {
        font-size: 25px;
    }

    body.theme-index .brockmanTitle {
        max-width: 100%;
    }
}

body.theme-index .color-container {
    z-index: -2;
    width: 100%;
    padding: 20px;
}

body.theme-index .color-container::before {
    content: "";
    position: absolute;
    top: 900px;
    left: 0;
    width: 50%;
    height: 400px;
    background-color: var(--color-primary);
    z-index: -1;
}

.hero-image {
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
    margin: 0 auto;
}

@media screen and (max-width: 900px) {
    body.theme-index .color-container::before {
        top: 800px;
        width: 60%;
        height: 500px;
    }
}

@media screen and (max-width: 600px) {
    body.theme-index .color-container::before {
        top: 800px;
        width: 60%;
        height: 800px;
    }
}

body.theme-index .brockmanTitle p {
    position: relative;
    display: inline-block;
    font-family: 'brockmann';
    font-size: 2.5em;
    text-align: center;
    line-height: 0.85;
    color: var(--color-accent);
    cursor: pointer;
}

body.theme-index .brockmanTitle a {
    text-decoration: none;
    color: var(--color-accent);
}

body.theme-index .brockmanTitle p::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 0;
    height: 2px;
    background-color: currentColor;
    transition: width 0.3s ease;
}

body.theme-index .brockmanTitle p:hover::after {
    width: 100%;
}

body.theme-index .brockmanTitle i {
    font-size: inherit;
    line-height: inherit;
}

body.theme-index .brockmanTitle {
    width: max-content;
    margin: 20px auto;
    text-align: center;
}

/* Bandeau "Voir le tuto" : photo + appel vers le tuto ollie */
body.theme-index .tuto-band {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px;
    align-items: center;
    max-width: 1100px;
    margin: 40px auto 0;
    padding: 50px 40px;
    background-color: var(--color-bg-muted);
    border-radius: 30px;
}

body.theme-index .tuto-band-photo {
    position: relative;
    aspect-ratio: 4 / 3;
    max-width: 100%;
}

body.theme-index .tuto-band-photo::before {
    content: '';
    position: absolute;
    top: 18%;
    left: -40px;
    width: 38%;
    height: 55%;
    background: var(--color-bg-alt);
    border-radius: 0 30px 30px 0;
}

body.theme-index .tuto-band-photo img {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 26px;
}

body.theme-index .tuto-band-content h3 {
    font-family: 'brockmann', 'marianne', sans-serif;
    font-weight: 500;
    font-size: 32px;
    line-height: 1.1;
    margin-bottom: 12px;
    color: var(--color-text-dark);
}

body.theme-index .tuto-band-content p {
    max-width: 42ch;
    margin-bottom: 24px;
    font-size: 1.1em;
    font-weight: 400;
    line-height: 1.55;
    color: var(--color-text);
}

body.theme-index .tuto-band-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 999px;
    background-color: var(--color-accent);
    /* texte foncé : le blanc manque de contraste sur l'orange vif */
    color: var(--color-text-dark);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

body.theme-index .tuto-band-btn:hover,
body.theme-index .tuto-band-btn:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -6px rgba(255, 107, 53, 0.6);
}

body.theme-index .tuto-band-link {
    margin-left: 18px;
    color: var(--color-text-dark);
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: var(--color-accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

@media screen and (max-width: 800px) {
    body.theme-index .tuto-band {
        grid-template-columns: 1fr;
        gap: 28px;
        margin: 30px 16px 0;
        padding: 30px 24px;
    }

    body.theme-index .tuto-band-photo::before {
        left: -24px;
    }

    body.theme-index .tuto-band-content h3 {
        font-size: 26px;
    }
}

body.theme-index .separator {
    width: 90%;
    height: 1px;
    background-color: rgb(98, 98, 98);
    margin: 40px auto;
    border-radius: 1px;
}

body.theme-index .grid-container {
    display: grid;
    grid-template-columns: 1fr 2fr 3fr 4fr;
    gap: 20px;
    align-items: start;
    text-align: start;
    margin: 0 20px;
    margin-bottom: 20px;
}

body.theme-index .grid-item:nth-child(1) {
    text-align: start;
    width: 250px;
    margin: 20px;
}

body.theme-index .grid-item i {
    font-size: inherit;
    line-height: inherit;
}

body.theme-index .grid-item h2 {
    color: var(--color-accent);
}

body.theme-index .grid-item:nth-child(2) {
    text-align: end;
}

body.theme-index .grid-item:nth-child(3) {
    text-align: start;
}

body.theme-index .grid-item:nth-child(4) {
    text-align: start;
}

body.theme-index .grid-item p {
    margin: 0;
    font-size: 1.2em;
}

@media screen and (max-width: 900px) {
    body.theme-index .grid-container {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 20px;
    }

    body.theme-index .grid-item:nth-child(4) {
        display: none;
    }

    body.theme-index .grid-item:nth-child(2),
    body.theme-index .grid-item:nth-child(3) {
        grid-column: auto;
        text-align: start;
    }
}

@media screen and (max-width: 600px) {
    body.theme-index .grid-container {
        grid-template-columns: 1fr;
        gap: 12px;
        margin: 0 10px 30px;
    }

    body.theme-index .grid-item,
    body.theme-index .grid-item:nth-child(1),
    body.theme-index .grid-item:nth-child(2) {
        grid-column: auto;
        text-align: start;
        width: auto;
        margin: 0;
    }

    body.theme-index .grid-item:nth-child(4) {
        display: block;
    }
}

body.theme-index .form-container {
    position: relative;
    margin-top: 20px;
    padding: 100px;
    max-width: 100%;
    width: 100%;
    text-align: start;
    justify-content: start;
    color: var(--color-text);
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}

body.theme-index .form-container::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0px;
    width: 80%;
    height: 90%;
    background-color: var(--color-primary);
    z-index: -1;
}

body.theme-index .form-container input {
    background-color: white;
    color: black;
    border-radius: 4px;
    border: 1px solid #ccc;
    padding: 8px;
    width: 70%;
    box-sizing: border-box;
    margin-top: 5px;
    margin-bottom: 15px;
    justify-content: flex-start;
}

body.theme-index .form-container textarea {
    background-color: white;
    color: black;
    border-radius: 4px;
    border: 1px solid #ccc;
    padding: 8px;
    width: 70%;
    box-sizing: border-box;
    margin-top: 5px;
    margin-bottom: 15px;
}

body.theme-index .form-container button {
    background-color: white;
    color: black;
    border-radius: 4px;
    border: 1px solid #ccc;
    padding: 8px;
    width: 70%;
    box-sizing: border-box;
    margin-top: 5px;
    margin-bottom: 15px;
}

body.theme-index .form-container button:hover {
    background-color: black;
    color: white;
    border-radius: 4px;
    border: 1px solid #ccc;
    padding: 8px;
    box-sizing: border-box;
    margin-top: 5px;
    margin-bottom: 15px;
}

@media screen and (max-width: 800px) {
    body.theme-index .form-container {
        grid-template-columns: 1fr 1fr;
        padding: 20px;
    }

    body.theme-index .form-container input,
    body.theme-index .form-container textarea,
    body.theme-index .form-container button {
        width: 100%;
    }
}

@media screen and (max-width: 600px) {
    body.theme-index .form-container {
        grid-template-columns: 1fr;
        padding: 20px 15px;
    }
}

@media screen and (max-width: 1000px) {
    body.theme-index {
        font-size: 14px;
    }

    body.theme-index {
        max-width: 100%;
        margin: 5px;
    }
}


/* =========================================================================
   7) PAGES TUTORIELS — <body class="theme-tuto">
   (tuto, kickflip, ollie, shove, materiel, quisuisje, wakepark)
   ========================================================================= */
body.theme-tuto {
    overflow: scroll;
    font-family: 'marianne';
    line-height: 1.6;
    color: #2f2e2e;
    background-color: var(--color-bg);
}

body.theme-tuto #loading-bar {
    background: var(--color-primary);
}

body.theme-tuto .grid-container {
    display: grid;
    grid-template-columns: 1fr 2fr 3fr 4fr;
    gap: 20px;
    align-items: start;
    text-align: start;
    justify-content: flex-start;
    margin: 0 20px;
    margin-bottom: 20px;
    margin-top: 100px;
}

body.theme-tuto .grid-item:nth-child(1) {
    text-align: start;
    justify-content: flex-start;
    width: 250px;
}

body.theme-tuto .grid-item i {
    font-size: inherit;
    line-height: inherit;
}

body.theme-tuto .grid-item h1,
body.theme-tuto .grid-item h2 {
    color: var(--color-accent);
}

body.theme-tuto .grid-item:nth-child(2) {
    text-align: end;
}

body.theme-tuto .grid-item:nth-child(3) {
    text-align: start;
    font-size: 13px;
}

body.theme-tuto .grid-item:nth-child(4) {
    text-align: start;
    font-size: 13px;
}

body.theme-tuto .grid-item p {
    margin: 0;
    font-size: 1.2em;
}

body.theme-tuto .grid-item a {
    text-decoration: none;
    color: inherit;
    display: inline-block;
}

body.theme-tuto .grid-item a:hover {
    background-color: seashell;
    width: 100px;
    height: 80px;
}

body.theme-tuto .color-container {
    z-index: -2;
    width: 100%;
    padding: 20px;
}

body.theme-tuto .color-container::before {
    content: "";
    position: absolute;
    top: 900px;
    left: 0;
    width: 50%;
    height: 400px;
    background-color: var(--color-primary);
    z-index: -1;
}

body.theme-tuto .color-container__2 {
    z-index: -2;
    width: 100%;
    padding: 20px;
}

body.theme-tuto .color-container__2::before {
    content: "";
    position: absolute;
    top: 1850px;
    width: 50%;
    height: 400px;
    background-color: var(--color-primary);
    z-index: -1;
}

.grid-item a h2 {
    transition: all 0.3s ease-in;
}

.grid-item a h2:hover {
    color: #2A1A14;
    text-decoration: line-through;
}

@media screen and (max-width: 768px) {
    body.theme-tuto .grid-container {
        grid-template-columns: 1fr 1fr;
    }

    body.theme-tuto .grid-item:nth-child(1),
    body.theme-tuto .grid-item:nth-child(4) {
        display: none;
    }

    body.theme-tuto .color-container__2::before {
        left: 100px;
    }
}

@media screen and (max-width: 600px) {
    body.theme-tuto .grid-container {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    body.theme-tuto .grid-item,
    body.theme-tuto .grid-item:nth-child(1),
    body.theme-tuto .grid-item:nth-child(2) {
        grid-column: auto;
        text-align: start;
        width: auto;
        justify-content: flex-start;
    }

    body.theme-tuto .grid-item:nth-child(1),
    body.theme-tuto .grid-item:nth-child(4) {
        display: block;
    }
}


/* =========================================================================
   8) PAGE BLOG — <body class="theme-blog">
   (liste des articles)
   ========================================================================= */
body.theme-blog {
    font-family: 'marianne';
    line-height: 1.6;
    background-color: var(--color-bg);
    color: var(--color-text);
}

/* Les cartes ci-dessous servent aussi à la liste des tutos (pages/tuto/tuto.php) */
body.theme-blog .article-section,
body.theme-tuto .article-section {
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px;
}

body.theme-blog .article-section h2,
body.theme-tuto .article-section h2 {
    font-family: 'brockmann';
    text-align: center;
    font-size: 1.8em;
    color: var(--color-accent);
    margin: 20px 0 30px;
}

/* Une carte par ligne, comme le bandeau de l'accueil */
body.theme-blog .articles-container,
body.theme-tuto .articles-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}

/* Cartes articles : même style que le bandeau "Voir le tuto" de l'accueil */
/* Photo à gauche, texte à droite : les lignes 1fr en haut et en bas
   centrent verticalement le texte à côté de la photo */
body.theme-blog .article-card,
body.theme-tuto .article-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: 1fr auto auto auto auto 1fr;
    column-gap: 48px;
    background-color: var(--color-bg-muted);
    border-radius: 30px;
    padding: 50px 40px;
    text-align: left;
    overflow: hidden;
}

body.theme-blog .article-card> :not(img),
body.theme-tuto .article-card> :not(img) {
    grid-column: 2;
}

body.theme-blog .article-card h3,
body.theme-tuto .article-card h3 {
    grid-row: 2;
}

body.theme-blog .article-card .info,
body.theme-tuto .article-card .info {
    grid-row: 3;
}

body.theme-blog .article-card>p,
body.theme-tuto .article-card>p {
    grid-row: 4;
}

body.theme-blog .article-card .customButton,
body.theme-tuto .article-card .customButton {
    grid-row: 5;
}

/* Forme décalée derrière la photo */
body.theme-blog .article-card::before,
body.theme-tuto .article-card::before {
    content: '';
    position: absolute;
    top: 22%;
    left: 0;
    width: 20%;
    height: 50%;
    background: var(--color-bg-alt);
    border-radius: 0 30px 30px 0;
}

body.theme-blog .article-card img,
body.theme-tuto .article-card img {
    position: relative;
    grid-column: 1;
    grid-row: 1 / 7;
    width: 100%;
    height: 100%;
    min-height: 320px;
    object-fit: cover;
    border-radius: 26px;
    display: block;
}

body.theme-blog .article-card h3,
body.theme-tuto .article-card h3 {
    font-family: 'brockmann', 'marianne', sans-serif;
    font-weight: 500;
    font-size: 1.9em;
    line-height: 1.1;
    margin: 0 0 14px;
    text-align: left;
}

body.theme-blog .article-card h3 a,
body.theme-tuto .article-card h3 a {
    color: var(--color-text-dark);
    text-decoration: none;
    transition: color 0.2s ease;
}

body.theme-blog .article-card h3 a:hover,
body.theme-tuto .article-card h3 a:hover {
    color: var(--color-accent);
}

body.theme-blog .info,
body.theme-tuto .info {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    font-size: 13px;
    color: var(--color-text);
    opacity: 0.7;
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(28, 20, 16, 0.12);
}

body.theme-blog .info p,
body.theme-tuto .info p {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 5px;
}

body.theme-blog .article-card p,
body.theme-tuto .article-card p {
    margin: 0 0 24px;
    max-width: 48ch;
    line-height: 1.55;
}

body.theme-blog .customButton a,
body.theme-tuto .customButton a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 999px;
    background-color: var(--color-accent);
    /* texte foncé : le blanc manque de contraste sur l'orange vif */
    color: var(--color-text-dark);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, gap 0.2s ease;
    cursor: pointer;
}

body.theme-blog .customButton a:hover,
body.theme-tuto .customButton a:hover,
body.theme-blog .customButton a:focus-visible,
body.theme-tuto .customButton a:focus-visible {
    transform: translateY(-2px);
    gap: 12px;
    box-shadow: 0 8px 20px -6px rgba(255, 107, 53, 0.6);
}

/* Tablette / mobile : photo au-dessus, texte en dessous */
@media screen and (max-width: 800px) {

    body.theme-blog .article-card,
    body.theme-tuto .article-card {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        padding: 30px 24px;
    }

    body.theme-blog .article-card>*,
    body.theme-tuto .article-card>*,
    body.theme-blog .article-card img,
    body.theme-tuto .article-card img,
    body.theme-blog .article-card h3,
    body.theme-tuto .article-card h3,
    body.theme-blog .article-card .info,
    body.theme-tuto .article-card .info,
    body.theme-blog .article-card>p,
    body.theme-tuto .article-card>p,
    body.theme-blog .article-card .customButton,
    body.theme-tuto .article-card .customButton {
        grid-column: 1;
        grid-row: auto;
    }

    body.theme-blog .article-card::before,
    body.theme-tuto .article-card::before {
        top: 70px;
        height: 150px;
        width: 38%;
    }

    body.theme-blog .article-card img,
    body.theme-tuto .article-card img {
        height: 240px;
        min-height: 0;
        margin-bottom: 24px;
    }
}

@media screen and (max-width: 600px) {

    body.theme-blog .article-section,
    body.theme-tuto .article-section {
        padding: 14px;
    }

    body.theme-blog .articles-container,
    body.theme-tuto .articles-container {
        gap: 20px;
    }

    body.theme-blog .article-card,
    body.theme-tuto .article-card {
        padding: 22px;
        border-radius: 24px;
    }

    body.theme-blog .article-card h3,
    body.theme-tuto .article-card h3 {
        font-size: 1.35em;
    }

    body.theme-blog .info,
    body.theme-tuto .info {
        font-size: 12px;
        gap: 6px 14px;
    }
}

body.theme-blog .section-tuto,
body.theme-tuto .section-tuto {
    background-color: transparent;
    padding: 20px;
    margin-top: 20px;
}

body.theme-blog .section-tuto h2,
body.theme-tuto .section-tuto h2 {
    font-family: 'brockmann';
    color: var(--color-accent);
    font-size: 1.3em;
    text-align: left;
    margin: 0 0 16px;
}

body.theme-blog .section-tuto ul,
body.theme-tuto .section-tuto ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

body.theme-blog .section-tuto li a,
body.theme-tuto .section-tuto li a {
    color: var(--color-text);
    text-decoration: none;
}

body.theme-blog .section-tuto li a:hover,
body.theme-tuto .section-tuto li a:hover {
    color: var(--color-accent);
    text-decoration: underline;
}


/* =========================================================================
   9) PAGES "ARTICLE" — <body class="theme-article">
   (bases-du-wakeskate-guide-pour-debutants, mon-retour-sur-la-progression,
   championnats2025, comment-choisir-son-wakeskate-en-2026,
   quesque-le-wakeskate)

   Les deux dernières ajoutent aussi la classe "theme-article-table" (tableau
   comparatif). quesque-le-wakeskate ajoute en plus "theme-quesque".
   championnats2025 ajoute en plus "theme-championnats" (couleur du
   loading-bar).
   ========================================================================= */
body.theme-article {
    font-family: 'marianne';
    line-height: 1.7;
    background-color: var(--color-primary);
    color: var(--color-text);
}

body.theme-article .article-section {
    max-width: 720px;
    margin: 0 auto;
    padding: 40px 20px;
}

/* Bloc titre (image + h1/h2/h3 selon la page — le niveau varie, le style non) */
body.theme-article .article-card {
    margin-bottom: 24px;
}

body.theme-article .article-card img,
body.theme-article .article-inline-image img {
    width: 100%;
    height: 360px;
    object-fit: cover;
    border-radius: 14px;
    display: block;
}

body.theme-article .article-card h1 {
    font-family: 'brockmann';
    font-size: clamp(28px, 4vw, 2.2em);
    line-height: 1.2;
    text-align: left;
    color: var(--color-text-dark);
    margin: 20px 0 0;
    padding: 0;
}

/* Image de coupure en plein milieu d'un article (sans titre dupliqué) */
body.theme-article .article-inline-image {
    margin: 30px 0;
}

/* Barre méta (auteur / date / catégorie / temps de lecture) */
body.theme-article .info {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    font-size: 13px;
    color: rgba(33, 34, 33, 0.6);
    padding: 14px 0;
    margin-bottom: 30px;
    border-top: 1px solid rgba(33, 34, 33, 0.12);
    border-bottom: 1px solid rgba(33, 34, 33, 0.12);
}

body.theme-article .info p {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Titres de section dans le corps de l'article (h1/h2/h3 selon la page) */
body.theme-article .articles-container>h1,
body.theme-article .articles-container>h2,
body.theme-article .articles-container>h3,
body.theme-article .articles-container>u>h2,
body.theme-article .articles-container>i>h3 {
    font-family: 'brockmann';
    font-size: 1.4em;
    line-height: 1.3;
    color: var(--color-accent);
    margin: 36px 0 14px;
    padding: 0;
}

body.theme-article .articles-container>p {
    margin: 0 0 20px;
    padding: 0;
    max-width: 68ch;
}

body.theme-article .articles-container>ul {
    margin: 0 0 20px;
    padding-left: 22px;
}

body.theme-article .articles-container>ul li {
    margin-bottom: 8px;
}

@media screen and (max-width: 600px) {
    body.theme-article .article-section {
        padding: 24px 16px;
    }

    body.theme-article .article-card img,
    body.theme-article .article-inline-image img {
        height: 220px;
        border-radius: 10px;
    }

    body.theme-article .info {
        font-size: 12px;
        gap: 6px 14px;
    }

    body.theme-article .articles-container>h1,
    body.theme-article .articles-container>h2,
    body.theme-article .articles-container>h3,
    body.theme-article .articles-container>u>h2,
    body.theme-article .articles-container>i>h3 {
        font-size: 1.2em;
    }
}

body.theme-article .section-tuto {
    background-color: transparent;
    padding: 30px 0 0;
    margin-top: 20px;
    border-top: 1px solid rgba(33, 34, 33, 0.12);
}

body.theme-article .section-tuto h2 {
    font-family: 'brockmann';
    color: var(--color-accent);
    font-size: 1.3em;
    margin: 0 0 16px;
}

body.theme-article .section-tuto ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
}

body.theme-article .section-tuto li a {
    color: var(--color-text);
    text-decoration: none;
}

body.theme-article .section-tuto li a:hover {
    color: var(--color-accent);
    text-decoration: underline;
}

body.theme-championnats #loading-bar {
    background: #FF5C35;
}

/* Variante avec tableau comparatif (comment-choisir, quesque-le-wakeskate) */
body.theme-article-table table {
    width: 100%;
    margin: 30px 0;
    border-collapse: collapse;
    font-size: 14px;
    background-color: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 14px rgba(28, 20, 16, 0.08);
}

body.theme-article-table caption {
    text-align: left;
    font-family: 'brockmann';
    font-size: 1.1em;
    color: var(--color-accent);
    margin-bottom: 14px;
    caption-side: top;
}

body.theme-article-table th,
body.theme-article-table td {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(33, 34, 33, 0.1);
    text-align: left;
}

body.theme-article-table tbody tr:last-child td {
    border-bottom: none;
}

body.theme-article-table tbody tr:hover {
    background-color: rgba(77, 66, 76, 0.05);
}

@media screen and (max-width: 600px) {
    body.theme-article-table table {
        font-size: 13px;
    }

    body.theme-article-table th,
    body.theme-article-table td {
        padding: 8px 10px;
    }
}


/* =========================================================================
   10) PAGE 404 — <body class="theme-404">
   ========================================================================= */
body.theme-404 {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: 'marianne';
    color: var(--color-text);
    background-color: var(--color-bg);
}

body.theme-404 .site-footer {
    margin-top: auto;
}

body.theme-404 .error-404 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 60px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 60px 20px;
}

body.theme-404 .error-404__text {
    flex: 1 1 320px;
    min-width: 280px;
}

body.theme-404 .eyebrow {
    font-family: ui-monospace, "SF Mono", "Roboto Mono", monospace;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-accent);
    margin: 0 0 20px;
}

body.theme-404 .error-404 h1 {
    font-family: 'brockmann';
    font-size: clamp(60px, 12vw, 120px);
    line-height: 0.9;
    color: var(--color-text-dark);
    margin: 0 0 20px;
}

body.theme-404 .error-404 .lead {
    font-size: 1.3em;
    font-weight: 600;
    margin: 0 0 12px;
}

body.theme-404 .error-404 p {
    max-width: 42ch;
    line-height: 1.6;
    margin: 0 0 24px;
}

body.theme-404 .error-404__cta {
    display: inline-block;
    padding: 12px 28px;
    background-color: var(--color-accent);
    color: #fff;
    text-decoration: none;
    border-radius: 999px;
    font-weight: 600;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

body.theme-404 .error-404__cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(28, 20, 16, 0.2);
}

body.theme-404 .error-404__image {
    flex: 1 1 380px;
    min-width: 280px;
    margin: 0;
}

body.theme-404 .error-404__image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 16px;
    border: 1px solid rgba(28, 20, 16, 0.1);
    box-shadow: 0 12px 32px rgba(28, 20, 16, 0.1);
    background-color: #fff;
}

body.theme-404 .error-404__image figcaption {
    margin-top: 12px;
    text-align: center;
    font-size: 13px;
    opacity: 0.6;
}

@media screen and (max-width: 700px) {
    body.theme-404 .error-404 {
        flex-direction: column;
        text-align: center;
        padding: 40px 20px;
        gap: 30px;
    }

    body.theme-404 .error-404 p {
        max-width: none;
    }
}


/* =========================================================================
   11) MENTIONS LÉGALES — <body class="theme-mentions">
   ========================================================================= */
body.theme-mentions {
    font-family: Arial, sans-serif;
    line-height: 1.7;
    padding: 20px;
    max-width: 100%;
    background-color: #f9f9f9;
    overflow: scroll;
}

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

    body.theme-mentions h1 {
        font-size: 1.8em;
    }
}

body.theme-mentions h1 {
    font-size: 2.5em;
    color: #2c3e50;
    border-bottom: 2px solid #2c3e50;
    padding-bottom: 10px;
    text-align: center;
    padding: 20px;
    margin-top: 30px;
}

body.theme-mentions h2 {
    color: #2c3e50;
}

body.theme-mentions a {
    color: #2980b9;
    text-decoration: none;
}

body.theme-mentions a:hover {
    text-decoration: underline;
}

body.theme-mentions .section {
    margin: 10px;
    margin-bottom: 30px;
    color: black;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 8px;
    border-left: 4px solid #2c3e50;
}

/* Plan du site : un conteneur, une card dépliable par section */
body.theme-mentions .sitemap-title {
    border-bottom: none;
}

body.theme-mentions .sitemap {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 1100px;
    margin: 0 auto 60px;
}

body.theme-mentions .sitemap-item {
    background-color: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
}

body.theme-mentions .sitemap-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    cursor: pointer;
    list-style: none;
}

body.theme-mentions .sitemap-item summary::marker {
    content: "";
}

body.theme-mentions .sitemap-item summary::-webkit-details-marker {
    display: none;
}

body.theme-mentions .sitemap-item h2 {
    margin: 0;
    font-size: 1.1em;
}

body.theme-mentions .sitemap-item[open] summary i {
    transform: rotate(180deg);
}

body.theme-mentions .sitemap-item ul {
    margin: 0;
    padding: 0 20px 16px 40px;
}


/* =========================================================================
   12) POLITIQUE DE CONFIDENTIALITÉ — <body class="theme-politique">
   ========================================================================= */
body.theme-politique {
    font-family: Arial, sans-serif;
    line-height: 1.7;
    margin: 20px;
    max-width: 100%;
    background-color: #f9f9f9;
}

body.theme-politique .container {
    max-width: 800px;
    margin: auto;
    background: white;
    padding: 20px;
}

body.theme-politique h1,
body.theme-politique h2 {
    color: #2c3e50;
}

body.theme-politique h1 {
    border-bottom: 2px solid #2c3e50;
    padding-bottom: 10px;
}

body.theme-politique a {
    color: #2980b9;
    text-decoration: none;
}

body.theme-politique a:hover {
    text-decoration: underline;
}