/* ==========================================================================
   TABLE OF CONTENTS
   ==========================================================================
   
   1.  FONTS ..................... Import fonts & Icon definitions
   2.  RESET ..................... Box-sizing, margins cleanup
   3.  VARIABLES ................. Colors, spacing, typography, shadows
   4.  ERRORS & SUCCESS .......... Input states, popups, toast messages
   5.  BASE STYLES ............... Body, links, lists structure
   6.  FORM ELEMENTS ............. Inputs, selects, checkbox/radio custom styles
   7.  UI COMPONENTS ............. Accordion, Tags, Autocomplete, Switch, FAQ, Loader
   8.  UTILITY COMPONENTS ........ Log panel, Badges, Tooltips, Skip-link
   9.  UTILITY CLASSES ........... Helpers (hidden, flex, margins, spacing)
   10. NAVIGATION ................ Main nav, Menus, Header specific layout
   11. HEADINGS .................. H1-H6 sizes, Overtitles
   12. BUTTONS & BADGES .......... Primary, Secondary, Action buttons, Badge styles
   13. TYPOGRAPHY ................ Text utilities, helpers, small text
   14. MAIN CONTENT .............. Section wrappers, Aside structure
   15. ANIMATIONS / TRANSITIONS .. Fade, slide, hover effects
   16. LAYOUT .................... Grid system, Containers, Hero, Cards
   17. FORMS (LAYOUT) ............ Fieldsets, Groups, visual arrangement
   18. AUTH & ACCOUNT ............ Authentication and account management styles
   19. ALERT COMPONENTS .......... Contextual alerts (Success, Danger, Info), Recap box
   20. BREADCRUMB ................ Breadcrumb navigation styles
   21. SEARCH ENGINE ............. Search engine styles
   22. DIALOG .................... Native <dialog> styling
   23. FOOTER .................... Footer layout and links
   24. PAGINATION ................ Pagination controls
   25. RESPONSIVE PREVIEW ........ Iframe container & controls (CMS feature)
   26. ADMIN UI .................. Admin side-panel styling
   27. RESPONSIVE ................ Media Queries (Tablet, Mobile, Print)

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

@view-transition {
    navigation: auto;
}

/* ========================================================================== */
/* = FONTS                                                          
/* ========================================================================== */

/*Manrope*/

@font-face {
    font-family: 'Manrope';
    src: url('../fonts/Manrope/Manrope-Regular.woff2') format('woff2');
    font-weight: 400; /* Regular */
    font-style: normal;
}

@font-face {
    font-family: 'Manrope';
    src: url('../fonts/Manrope/Manrope-medium.woff2') format('woff2');
    font-weight: 500; /* Medium */
    font-style: normal;
}

@font-face {
    font-family: 'Manrope';
    src: url('../fonts/Manrope/Manrope-SemiBold.woff2') format('woff2');
    font-weight: 600; /* SemiBold */
    font-style: normal;
}

@font-face {
    font-family: 'Manrope';
    src: url('../fonts/Manrope/Manrope-Bold.woff2') format('woff2');
    font-weight: 700; /* Bold */
    font-style: normal;
}

/*Inter*/

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter/Inter-Regular.woff2') format('woff2');
    font-weight: 400; /* Regular */
    font-style: normal;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter/Inter-Italic.woff2') format('woff2');
    font-weight: 400; /* Italic */
    font-style: italic;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter/Inter-SemiBold.woff2') format('woff2');
    font-weight: 600; /* SemiBold */
    font-style: normal;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter/Inter-Bold.woff2') format('woff2');
    font-weight: 700; /* Bold */
    font-style: normal;
}

/* Icônes Google Material Symbols */
@font-face {
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    src: url('../icons/Material-Symbols/MaterialSymbolsOutlined[FILL\,GRAD\,opsz\,wght].woff2') format('woff');
}

.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;  /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
}

/* ========================================================================== */
/* = VARIABLES                                                              
/* ========================================================================== */

:root {
    /* Couleurs primaires */
    --cms-primary-50: hsl(220, 92%, 95%);
    --cms-primary-100: hsl(220, 90%, 84%);
    --cms-primary-200: hsl(220, 92%, 76%);
    --cms-primary-300: hsl(220, 92%, 65%);
    --cms-primary-400: hsl(220, 100%, 60%);
    --cms-primary-500: hsl(220, 100%, 50%);
    --cms-primary-600: hsl(220, 94%, 45%);
    --cms-primary-700: hsl(220, 96%, 35%);
    --cms-primary-800: hsl(220, 96%, 27%);
    --cms-primary-900: hsl(220, 96%, 21%);

    /*
    --cms-primary-100-hwb: hwb(221 4% 70%);
    --cms-primary-200-hwb: hwb(221 6% 50% / 1);
    */

    /* Couleurs neutres */
    --cms-neutral-0: hsl(0, 0%, 100%);
    --cms-neutral-50: hsl(0, 0%, 96%);
    --cms-neutral-100: hsl(0, 0%, 86%);
    --cms-neutral-200: hsl(0, 0%, 70%);
    --cms-neutral-300: hsl(0, 0%, 62%);
    --cms-neutral-400: hsl(0, 0%, 56%);
    --cms-neutral-500: hsl(0, 0%, 42%);
    --cms-neutral-600: hsl(0, 0%, 36%);
    --cms-neutral-700: hsl(0, 0%, 26%);
    --cms-neutral-800: hsl(0, 0%, 16%);
    --cms-neutral-900: hsl(0, 0%, 6%);

    /* Couleurs alphas */
    --cms-white-a10: hsla(0, 0%, 100%, 0.1);
    --cms-white-a15: hsla(0, 0%, 100%, 0.15);
    --cms-black-a05: hsla(0, 0%, 0%, 0.05);
    --cms-black-a10: hsla(0, 0%, 0%, 0.1);
    --cms-black-a20: hsla(0, 0%, 0%, 0.2);

    /* Couleurs de fond */
    --cms-background-main: var(--cms-neutral-0); /* Couleur de fond principale */
    --cms-background-subtle: var(--cms-neutral-50) ; /* Couleur de fond subtile/secondaire */
    --cms-background-inverse: var(--cms-neutral-900);
    /* Couleurs sémantiques */
    --cms-text-default: var(--cms-neutral-700); /* Couleur du texte principal */
    --cms-text-muted: var(--cms-neutral-500); /* Couleur de texte plus claire */
    --cms-text-strong: var(--cms-neutral-900);
    --cms-text-on-dark: var(--cms-neutral-100);
    --cms-text-on-dark-muted: var(--cms-neutral-200);
    --cms-text-link: var(--cms-primary-500);
    --cms-text-link-hover: var(--cms-primary-600);
    --cms-action-primary: var(--cms-primary-500);
    --cms-action-primary-hover: var(--cms-primary-600);
    --cms-action-primary-active: var(--cms-primary-700);
    /* Couleurs d'état*/
    --cms-success-background : hsl(135, 71%, 90%);
    --cms-success-hover: hsl(135, 59%, 80%);
    --cms-success-main: hsl(135, 59%, 42%); /* Couleur pour bordures/boutons */
    --cms-success-content : hsl(135, 59%, 21%); /* Couleur pour textes/icônes */

    --cms-danger-background: hsl(355, 71%, 90%);
    --cms-danger-background-light: hsl(355, 71%, 95%);
    --cms-danger-hover: hsl(355, 70%, 80%);
    --cms-danger-main: hsl(355, 59%, 42%);
    --cms-danger-content: hsl(355, 61%, 28%);
    
    --cms-warning-background: hsl(45, 100%, 90%);
    --cms-warning-hover: hsl(45, 100%, 84%);
    --cms-warning-main: hsl(45, 59%, 42%);
    --cms-warning-content: hsl(45, 94%, 27%);

    --cms-info-background: hsl(188, 100%, 90%);
    --cms-info-hover: hsl(188, 53%, 79%);
    --cms-info-main: hsl(188, 59%, 42%);
    --cms-info-content: hsl(188, 78%, 21%);

    /* Typographie */
    --cms-title-font: 'Manrope', sans-serif; /* Police pour les titres */
    --cms-body-font: 'Inter', sans-serif; /* Police pour le corps du texte */
    --cms-font-size-caption: 13px;
    --cms-font-size-label: 14px;
    --cms-font-size-body: 16px;
    --cms-font-size-display: 3.75rem;
    --cms-font-size-h1: 3rem;
    --cms-font-size-h2: 2.2rem;
    --cms-font-size-h3: 1.75rem;
    --cms-font-size-h4: 1.5rem;
    --cms-font-size-h5: 1.3rem;
    --cms-font-size-h6: 1.2rem;
    --cms-font-size-overtitle: 0.75rem;

    /* Espacements */
    --cms-spacing-xxl: 4rem;
    --cms-spacing-xl : 3rem;
    --cms-spacing-l : 2rem;
    --cms-spacing-m : 1.5rem;
    --cms-spacing-s : 1rem;
    --cms-spacing-xs : 0.5rem;
    --cms-spacing-xxs : 0.25rem;

    /* Largeurs Containers */
    --cms-container-s: 640px;
    --cms-container-m: 848px;
    --cms-container-l: 1200px;
    --cms-container-xl: 1500px;

    /* Ombres */
    --cms-shadow-surface: 0 1px 4px hsla(0, 0%, 0%, 0.1); /* Minimal Cards & light sections */
    --cms-shadow-xs: 0 1px 6px hsla(0, 0%, 0%, 0.1); /* Buttons, Checkboxes & Inputs*/
    --cms-shadow-s: 0 4px 12px hsla(0, 0%, 0%, 0.1); /* Cards */
    --cms-shadow-m: 0 8px 16px hsla(0, 0%, 0%, 0.1); /* Dropdowns, Tooltips & Select Menus */
    --cms-shadow-l: 0 12px 20px hsla(0, 0%, 0%, 0.1); /* Popups & Modals */
    --cms-shadow-xl: 0 20px 40px hsla(0, 0%, 0%, 0.1); /* Modals, Dialogs & Side Panels*/

    /* Bordures */
    --cms-border-radius-s: 4px; /* Checkboxes, radios, tooltips, badges */
    --cms-border-radius-m: 8px; /* Boutons, inputs & images */
    --cms-border-radius-l: 16px; /* Cards, modals, containers */
    --cms-border-radius-xl: 24px; /* Banner, hero, sections majeures */
    --cms-border-radius-full: 9999px; /* Pills buttons, avatars et badges circulaires */
    --cms-border-default: var(--cms-neutral-100);
    --cms-border-subtle: var(--cms-black-a10);
    --cms-border-strong: var(--cms-neutral-500);

    /* Transitions */
    --cms-transition-base: 0.25s ease-in-out; /* Transition pour hover et animations */

    /* Autres */
    --cms-input-height: 40px;
}

/* ========================================================================== */
/* = RESET                                                             
/* ========================================================================== */

/* RESET CSS (pour s'assurer que tous les navigateurs ont les mêmes bases) */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scrollbar-color: var(--cms-neutral-700) transparent;
}

/* ========================================================================== */
/* = ERRORS & SUCCESS                                                     
/* ========================================================================== */

/* Bordure rouge pour le champ en erreur */
.error-input {
    border: 2px solid var(--cms-danger-main)!important;
}

.error-message {
    background-color: var(--cms-danger-background);
    color: var(--cms-danger-content);
    border: 1px solid var(--cms-danger-main);
    padding: var(--cms-spacing-s);
    font-size: var(--cms-font-size-label);
    margin: var(--cms-spacing-s) 0;
    word-break: break-word;

    .content {
        display: flex;
        align-items: center;
        gap: var(--cms-spacing-xs);

        .icon {
            color: var(--cms-danger-content);
        }
    }
}

.success-message {
    background-color: var(--cms-success-color-text);
    color: white;
    padding: var(--cms-spacing-s);
    font-size: var(--cms-font-size-label);
    margin-top: var(--cms-spacing-xxs);
    width: max-content;

    .content {
        display: flex;
        align-items: center;
        gap: var(--cms-spacing-xs);

        .icon {
            color: var(--cms-success-content);
        }
    }
}

/* Erreur globale (en haut du form) */
form {
    > .alert-message.error-message {
        margin-bottom: var(--cms-spacing-l);
        border-left: 5px solid var(--cms-danger-main);
    }
}

/* Erreur de champ (dans .form-container) */
.form-container {
    .alert-message.error-message {
        margin-top: var(--cms-spacing-xs);
        padding: var(--cms-spacing-xs);
        font-size: 0.85rem;
        background: transparent;
        color: var(--cms-danger-content);
        box-shadow: none;
        border: none;

        .icon {
            font-size: 1rem;
        }
    }
}

/* Grille pour les formulaires (2 colonnes) */
.form-row-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--cms-spacing-m);
}

/* Responsive */
@media (max-width: 768px) {
    .cms-account-layout {
        flex-direction: column;

        .cms-account-sidebar {
            width: 100%;
        }

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

/* État visuel de l'input */
.is-invalid {
    border-color: var(--cms-danger-main) !important;
}

/* Erreur 404, 403, etc. */
#error-page {
    display: flex;
    align-items: center;
    height: 100%;

    #error-page-container {
        display: flex;
        flex-direction: column;
        align-items: center;

        .error-description {
            text-align: center;
            margin: 0;
        }

        .error-code {
            font-size: 22rem;
            text-shadow: 10px -6px 5px rgba(0,0,0,.1);
            color: var(--cms-primary-500);
            font-weight: bold;
        }
        
    }
}


/* Panneau d'affichage d'erreurs */

#erreur-panneau {
    position: fixed;
    left: 0;
    width: 100%;
    bottom: 0;
    z-index: 100;

    p {
        background-color: var(--cms-danger-content);
        color: white;
        text-align: center;
        margin: 0;
        padding: var(--cms-spacing-s);
    }
}

.popup-success {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 50vh;
    max-height: 50vh;
    overflow: auto;
    background-color: var(--cms-success-background);
    color: var(--cms-success-content);
    padding: var(--cms-spacing-m);
    border-radius: var(--cms-border-radius-m);
    border-color: var(--cms-success-main);
    box-shadow: var(--cms-shadow-s);
    z-index: 1000;
}

.popup-error {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 50vh;
    max-height: 50vh;
    overflow: auto;
    background-color: var(--cms-danger-background);
    color: var(--cms-danger-content);
    border-color: var(--cms-danger-main);
    padding: var(--cms-spacing-m);
    border-radius: var(--cms-border-radius-m);
    box-shadow: var(--cms-shadow-s);
    min-width: 320px;
    z-index: 1000;

    .popup-header {
        display: flex;
        justify-content: space-between;

        .close-btn {
            background-color: var(--cms-danger-content);
        }
    }

    .popup-body {
        margin: var(--cms-spacing-s) 0;
        display: flex;
        flex-direction: column;

        pre {
            overflow: auto;
            max-height: 300px;
            background-color: var(--cms-danger-background-light);
            white-space: pre-wrap;    /* autorise le retour à la ligne automatique */
            word-wrap: break-word;    /* casse les mots trop longs */
            max-width: 100%;          /* s’adapte à la largeur du parent */
            overflow-wrap: break-word; /* assure la casse */
            padding: var(--cms-spacing-s);
            border-radius: var(--cms-border-radius-m);
        }
    }
}

button.copy-to-clipboard {
    background: none;
    color: var(--cms-danger-content);
    padding: var(--cms-spacing-xs);
    align-self: flex-end;

    &:hover {
        background-color: unset;
        color: var(--cms-danger-hover);
    }
}

.grecaptcha-badge {
    display: none;
}

/* ========================================================================== */
/* = Base Styles / UI Foundation
/* ========================================================================== */

html, body {
    overflow-x: hidden;
    width: 100%;
    position: relative;
}

/* Body - Utilisation de Grid pour une structure pleine page */
body {
    display: grid;
    grid-template-areas:
        "header"
        "layout"
        "footer"
    ;
    grid-template-rows: auto 1fr auto; /* header, main, footer */
    min-height: 100vh; /* 100% de la hauteur de la fenêtre */
    font-family: var(--cms-body-font);
    font-size: var(--cms-font-size-body);
}

p {
    margin: var(--cms-spacing-m) 0;
    line-height: 1.4;
}

a {
    text-decoration: none;
    cursor: pointer;
    color: var(--cms-primary-500);
    
    &:hover {
        color: var(--cms-primary-400);
    }
}

.cms-editor-content {
    --cms-grid-gap: var(--cms-spacing-l, 30px);

    a {
        text-decoration: underline;
    }
}

.cms-row {
    display: grid;
    gap: var(--cms-grid-gap);
    width: 100%;
    margin: var(--cms-spacing-xl) 0;

    /* Layout 50/50 */
    &.layout-1-1 { grid-template-columns: repeat(2, 1fr); }
    /* Layout 33/33/33 */
    &.layout-1-1-1 { grid-template-columns: repeat(3, 1fr); }
    /* Layout 70/30 */
    &.layout-2-1 { grid-template-columns: 2fr 1fr; }
    /* Layout 30/70 */
    &.layout-1-2 { grid-template-columns: 1fr 2fr; }
}

.cms-col {
    min-width: 0;
    /* On peut ajouter du style pour les containers à l'intérieur des colonnes */
    .container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }
}

/* Mobile : on empile tout */
@media (max-width: 1024px) {
    .cms-row {
        grid-template-columns: 1fr !important;
    }
}

.inline-icon {
    display: inline-flex;
    align-items: center;
    gap: var(--cms-spacing-s);
}

ul, ol { /* RESET GLOBAL */
    list-style: none;
    padding: 0;
    margin: 0;
}

ul li a.active, ul li.active {
    color: var(--cms-primary-500);
}

.cms-content, .cms-editor-content, .note-editor, .cms-callout { /* STYLE DE CONTENU (Cible tout le texte riche) */
    
    /* On cible les listes nues (sans classe) dans le texte */
    ul, ol {
        padding-left: var(--cms-spacing-l);
        margin-bottom: var(--cms-spacing-m);
        
        li {
            line-height: 1.6;
            margin-bottom: var(--cms-spacing-s);
            list-style: disc; /* Remet les puces pour le texte */

            &:last-child {
                margin-bottom: 0;
            }
        }
    }

    ol li {
        list-style: decimal; /* Remet les chiffres */
    }

    /* Optionnel : On peut aussi styliser les p, h1, h2 ici */
    p { margin-bottom: var(--cms-spacing-m); }
}

nav ul {
    list-style: none; /* on supprime les puces */
    padding-left: 0; 

    li {
        display: flex;
        align-items: center;
        gap: var(--cms-spacing-s);
        line-height: 1.4;
        margin: 0;

        a {
            display: flex;
            align-items: center;
            gap: var(--cms-spacing-s);
        }
    }
}

/* ========================================================================== */
/* = FORM ELEMENTS
/* ========================================================================== */

input, select, textarea, button {
    font-size: inherit; /* Hérite de body */
    font-family: inherit; /* Hérite de body */
    line-height: 1.4;
    border-radius: var(--cms-border-radius-m);
}

input[type="file"] {
    border-radius: initial;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--cms-primary-500);
    outline-offset: 2px;
}

input[readonly], textarea[readonly] {
    background-color: var(--cms-neutral-50); /* légèrement grisé */
    color: var(--cms-text-default);
    cursor: not-allowed;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="url"],
input[type="tel"],
textarea {
    border : 1px solid var(--cms-border-default);
    padding: var(--cms-spacing-xs) var(--cms-spacing-s);
    width: 100%;
    box-sizing: border-box;
    display: block;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]),
select {
    height: var(--cms-input-height);
}

input[type="text"], input[type="email"], input[type="password"], input[type="tel"] {
    max-width: 350px;
}

input[type="text"]:focus,
textarea:focus {
    border-color: var(--cms-primary-500);
    outline: none;
}

/* <datalist> and <option> */
input[list] {
    position: relative;
}

textarea {
    resize: vertical;
    min-height: 100px;
}

select {
    max-width: 350px;
    width: 100%;
    appearance: none; /*Retire la flèche native*/
    -webkit-appearance: none;
    -moz-appearance: none;
    background: url('data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 8 8%22 fill%3D%22none%22%3E%3Cpath d%3D%22M1 2L4 5L7 2%22 stroke%3D%22black%22 stroke-width%3D%22.8%22%2F%3E%3C%2Fsvg%3E'); /*Ajoute la nouvelle flèche*/
    background-size: 0.8em;
    padding: 0.6em var(--cms-spacing-l) 0.4em var(--cms-spacing-xs);
    background-repeat: no-repeat;
    background-position: calc(100% - var(--cms-spacing-xs)) 55%; /* Position de la flèche */
}

datalist {
    position: absolute;
    max-height: 20rem;
    border: 0 none;
    overflow-x: hidden;
    overflow-y: auto;
    display: block;
}
  
datalist option {
    padding: 0.3em var(--cms-spacing-s);
    background-color: var(--cms-primary-800);
    cursor: pointer;
}
  
datalist option:hover, datalist option:focus {
    color: white;
    background-color: var(--cms-primary-500);
    outline: 0 none;
}

input[type="number"] {
    width: 60px; /* Permet de rentrer un chiffre à 3 chiffres sans que l'input ne devienne trop petit */
    text-align: center; /* Centrer le texte */
    padding: var(--cms-spacing-xs);
}

/* Change la couleur pour les cases à cocher et les boutons radio */
input[type="checkbox"].error-input,
input[type="radio"].error-input {
    outline: 2px solid var(--cms-danger-main); /* Utilisation d'outline si on ne souhaite pas toucher à la bordure existante */
}

input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid var(--cms-neutral-300);
    border-radius: var(--cms-border-radius-s);
    display: inline-block;
    position: relative;
    cursor: pointer;
    background: #fff;
    transition: all 0.2s ease;
}

input[type="checkbox"]:hover {
    border-color: var(--cms-neutral-500);
}

input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--cms-primary-500);
    outline-offset: 2px;
}

input[type="checkbox"]:checked {
    background: var(--cms-primary-500);
    border-color: var(--cms-primary-600);
}

input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 10px;
    border: solid #fff; /* couleur du tick */
    border-width: 0 2px 2px 0; /* crée le “tick” */
    transform: translate(-50%, -55%) rotate(45deg);
}

/* Style global pour input type color */
input[type="color"] {
    -webkit-appearance: none;
    border: none;
    width: 3rem;
    height: 3rem;
    border-radius: 0.5rem;
    padding: 0;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
    background: none;
}

input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid var(--cms-neutral-300);
    border-radius: 50%;
    cursor: pointer;
    background: #fff;
    position: relative;
    transition: all 0.2s ease;
}

input[type="radio"]:hover {
    border-color: var(--cms-neutral-500);
}

input[type="radio"]:focus-visible {
    outline: 2px solid var(--cms-primary-500);
    outline-offset: 2px;
}

/* Cercle interne centré */
input[type="radio"]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    background: var(--cms-primary-600);;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
}

input[type="radio"]:checked {
    border-color: var(--cms-primary-600);
}

input[type="radio"]:checked::after {
    transform: translate(-50%, -50%) scale(1);
}

/* Chrome/Safari specific: masque le carré par défaut */
input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
    border-radius: 0.5rem;
}

input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: 0.5rem;
}

/* Firefox specific */
input[type="color"]::-moz-color-swatch {
    border: none;
    border-radius: 0.5rem;
}

/* Focus effect */
input[type="color"]:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(100, 150, 250, 0.4);
}

/* Hover effect */
input[type="color"]:hover {
    transform: scale(1.1);
}

i {
    color: var(--cms-text-muted);
}

pre {
    overflow: auto;
    max-height: 300px;
    background-color: var(--cms-background-subtle);
    white-space: pre-wrap;    /* autorise le retour à la ligne automatique */
    word-wrap: break-word;    /* casse les mots trop longs */
    max-width: 100%;          /* s’adapte à la largeur du parent */
    overflow-wrap: break-word; /* assure la casse */
    padding: var(--cms-spacing-s);
    border-radius: var(--cms-border-radius-m);
}

/* ========================================================================== */
/* = UI COMPONENTS
/* ========================================================================== */

/* ACCORDION */

.accordion-container {
    display: flex;
    flex-direction: column;
    gap: var(--cms-spacing-s);
    /*align-items: center;*/
}

.cms-block-accordion {
    display: flex;
    flex-direction: column;
    gap: var(--cms-spacing-s);
    padding: 15px; /* Laisse 15px de vide pour que l'ombre s'affiche sans toucher les bords du parent */
    margin: -15px; /* Recule l'élément de 15px pour qu'il reste parfaitement aligné avec ton texte au-dessus/en-dessous */
}

.accordion {

    &.accordion-item {
        box-shadow: var(--cms-shadow-surface);
        border-radius: var(--cms-border-radius-m);
        border: 1px solid var(--cms-neutral-100);
        padding: var(--cms-spacing-s);
    }

    span {
        font-weight: bold;
    }

    .accordion-img {
        width: 100%;
        height: 200px;
        object-fit: cover;
        object-position: center; 
        display: block; 
        border-radius: var(--cms-border-radius-m);
        overflow: hidden;
    }

    .accordion-header {
        display: flex;
        gap: var(--cms-spacing-xs);
        align-items: center;
        cursor: pointer;
        font-weight: bold;

        .accordion-title {
            font-size: var(--cms-font-size-h6);
            font-weight: bold;
        }

        .accordion-icon {
            transition: transform var(--cms-transition-base);
        }

        .accordion-arrow {
            width: 25px;
            height: 25px;
            margin-right: var(--cms-spacing-xs);
            transition: transform 0.3s ease;
        }        
    }

    .accordion-body {
        display: flex;
        flex-direction: column;
        gap: var(--cms-spacing-l);
        margin-top: 0;
        max-height: 0; /* Réduit la hauteur à zéro car c'est fermé par défaut */
        overflow: hidden; /* Masque le contenu excédentaire */
        transition: max-height var(--cms-transition-base), /* Transition sur la hauteur */
                    margin-top var(--cms-transition-base); 

        .accordion-inner {
            padding-left: var(--cms-spacing-s);
            display: flex;
            flex-direction: column;
            gap: var(--cms-spacing-m);
        }
    }

    /* On gère l'état ouvert spécifiquement pour CHAQUE niveau */
    &.open {
        /* On cible uniquement le corps de l'accordéon ACTUEL */
        & > .accordion-body {
            /* Note : le JS gère déjà le max-height, 
               mais on garde le padding-top ici */
            padding-top: var(--cms-spacing-s);
        }

        /* On cible uniquement l'icône du header de cet accordéon */
        & > .accordion-header .accordion-icon {
            transform: rotate(180deg);
        }
    }

    /* Quand l'accordéon contient une page active ou est ouvert */
    &.is-active, &.open {
        & > .accordion-header {
            span.text {
                color: var(--cms-neutral-900); /* Le texte devient noir */
            }
            
            /* L'icône à gauche (inventory, collections, etc.) devient bleue */
            & > .material-symbols-outlined:first-child {
                color: var(--cms-primary-500);
            }

            /* La flèche peut aussi changer de couleur si on veut */
            .accordion-arrow {
                color: var(--cms-neutral-900);
            }
        }
    }

    /* Style spécifique si l'accordéon est actif MAIS fermé 
    (pour montrer à l'utilisateur que la page active est "cachée" ici) */
    &.is-active:not(.open) {
        & > .accordion-header {
            border-left: 3px solid var(--cms-primary-500);
            padding-left: calc(initial + 5px); /* Optionnel : petit décalage */
        }
    }

}

.accordion-box {
    box-shadow: var(--cms-shadow-s);
    border-radius: var(--cms-border-radius-m);
    padding: var(--cms-spacing-s);
}

.cms-tags-container {
    display: flex;
    gap: var(--cms-spacing-s);
    margin-bottom: var(--cms-spacing-xs);
}

.cms-tag {
    background-color: var(--cms-primary-500);
    color: white;
    padding: var(--cms-spacing-xxs) var(--cms-spacing-xs);
    border-radius: var(--cms-border-radius-m);
    display: flex;
    align-items: center;
    gap: var(--cms-spacing-xs);
    white-space: nowrap; /* Empêche le texte de se diviser en plusieurs lignes */

    &:hover {
        background-color: var(--cms-primary-400);
        color: white;
    }
}

/* AUTOCOMPLETE */

.autocomplete-component {
    position: relative;
    width: auto;
    background-color: white;
    border-radius: var(--cms-border-radius-m);

    .autocomplete-search-container {
        display: flex;
        align-items: center;
        gap: var(--cms-spacing-xxs);
        flex-wrap: wrap;
        background-color: white;
        padding: var(--cms-spacing-xxs) var(--cms-spacing-s);
        border: 1px solid var(--cms-border-default);
        border-radius: var(--cms-border-radius-m);

        .autocomplete-search-input-container {
            flex: 1;
            min-width: 150px;
            display: flex;
            align-items: center;
        }

        input.autocomplete-search {
            flex: 1;
            border: none;
            padding: 0;
            width: 100%;
            max-width: unset;
        }

        .autocomplete-button {
            padding: var(--cms-spacing-xs);
            cursor: pointer;
            user-select: none; 
            color: var(--cms-neutral-900);
        }
    }

    .autocomplete-list {
        position: absolute;
        max-height: 200px;
        width: 100%;
        overflow: auto;
        background-color: var(--cms-neutral-600);
        color: white;
        border-radius: var(--cms-border-radius-m);
        padding: 0;
        gap: 0;
        z-index: 10;

        .autocomplete-item {
            cursor: pointer;
            list-style-type: none;
            padding: var(--cms-spacing-xs) var(--cms-spacing-s);
            margin: 0;

            &:hover {
                background-color: var(--cms-primary-500);
            }
        }

        .dropdown-container {

            .dropdown-header {
                width: 100%;
                justify-content: space-between;
                border-radius: unset;
                background-color: var(--cms-background-inverse);
                text-align: start;

                &.selected {
                    background-color: var(--cms-primary-500);

                    &:hover {
                        background-color: var(--cms-primary-500);
                    }
                }

                &:hover {
                    background-color: var(--cms-neutral-700);
                }
            }

            .dropdown-content {
                width: 100%;
                gap: 0;
            }
        }

        .autocomplete-hint {
            padding: var(--cms-spacing-xs) var(--cms-spacing-s);
            text-align: center;
            font-style: italic;
            color: var(--text-muted);
            font-size: 0.9em;
            pointer-events: none; /* Non cliquable */
        }

    }

    /* Composant multiple values */

    .selected {
        background-color: var(--cms-primary-500);
        &:hover {
            background-color: var(--cms-primary-400);
        }
    }

    .selected-tags {
        display: flex;
        flex-wrap: wrap;
        gap: var(--cms-spacing-xs);
    }

    .selected-tag {
        background-color: var(--cms-primary-500);
        color: white;
        padding: var(--cms-spacing-xxs) var(--cms-spacing-xs);
        border-radius: var(--cms-border-radius-m);
        display: flex;
        align-items: center;
        gap: var(--cms-spacing-xs);
        /* white-space: nowrap; /* Empêche le texte de se diviser en plusieurs lignes */
    }
    

    .selected-tag .remove-tag {
        cursor: pointer;
        font-weight: bold;
    }

    .more-tag {
        cursor: pointer;
    }

    .hidden-tags-popup {
        position: absolute;
        background: #fff;
        box-shadow: var(--cms-shadow-s);
        border-radius: var(--cms-border-radius-m);
        padding: var(--cms-spacing-xs);
        z-index: 1000;
        display: flex;
        flex-wrap: wrap;
        gap: var(--cms-spacing-xxs);
        max-width: 250px;
        max-height: 150px;
        overflow-y: auto;
    }

}

/* SWITCH BUTTON */

/* The switch - the box around the slider */
.switch-component {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;

    /* Hide default HTML checkbox */
    input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    /* The slider */
    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        -webkit-transition: .4s;
        transition: .4s;
    }

    .slider:before {
        position: absolute;
        content: "";
        height: 26px;
        width: 26px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }

    input:checked + .slider {
        background-color: var(--cms-primary-500);
    }

    input:focus + .slider {
        box-shadow: 0 0 1px var(--cms-primary-500);
    }

    input:checked + .slider:before {
        -webkit-transform: translateX(26px);
        -ms-transform: translateX(26px);
        transform: translateX(26px);
    }

    /* Rounded sliders */
    .slider.round {
        border-radius: 34px;
    }

    .slider.round:before {
        border-radius: 50%;
    }

}

.delete-item-button {
    background-color: var(--cms-danger-content);
    padding: var(--cms-spacing-xs);
    height: 30px;
}

.file-previews {
    display: flex;
    flex-direction: column;
    gap: var(--cms-spacing-m);
    /*border: 1px solid var(--cms-border-default);*/
    /*padding: var(--cms-spacing-s);*/
    
    .file-item {
        display: flex;
        gap: var(--cms-spacing-s);
        align-items: center;

        .delete-item-button {
            align-self: center;
        }

        img {
            max-width: 100px;
            max-height: 100px;
        }
    }
}

.progress-bars {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 10px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); /* auto-fit va créer autant de colonnes qu’il y a d’enfants Chaque colonne prendra au moins 0 (donc minimal) et au maximum une fraction égale (1fr). */
    gap: var(--cms-spacing-xs);
    
    .progress-bar {
        border-radius: var(--cms-border-radius-m);
        background-color: var(--cms-neutral-100);
        transition: background-color 0.3s ease;
    }
}

/* HTML: <div class="loader"></div> */
.loader {
    --size: 20px;      /* Taille globale du loader par défaut */
    --thickness: calc(var(--size) * 0.15);  /* Épaisseur de l’anneau (ex: 15% de la taille) */

    display: inline-block; /* pour que transform fonctionne */
    position: relative;    /* éviter glissement */
    transform-origin: center center;

    width: var(--size);
    aspect-ratio: 1;
    border-radius: 50%;
    z-index: 1000;

    /* Masques combinés : anneau + rotation */
    --_m:
        conic-gradient(
            from 90deg at 50% 50%,
            #0000 20%, /* zone transparente */
            var(--cms-primary-500) 20% 80%, /* zone colorée (le spinner visible) */
            #0000 80% /* zone transparente */
        ), /* Crée le 'spinner' */
        radial-gradient(
            farthest-side, 
            #0000 calc(100% - var(--thickness)), 
            #000 calc(100% - var(--thickness) + 1px)
        ); /* Crée le trou central basé sur l'épaisseur */

    -webkit-mask: var(--_m);
    mask: var(--_m);
    -webkit-mask-composite: source-in; /* Ou destination-in, source-out selon l'effet désiré avec le nouveau masque */
    mask-composite: intersect; /* 'intersect' est souvent l'équivalent standard pour 'source-in' */

    animation: l 1s linear infinite;
    background-color: var(--cms-primary-500); /* Couleur de l'anneau */
}

@keyframes l {
    to {
        transform: rotate(1turn);
    }
}

.loader-text {
    margin-top: var(--cms-spacing-s);
    color: var(--text-color);
    font-size: var(--cms-font-size-label);
    font-weight: bold;
    text-align: center;
    animation: pulse-text 1.5s infinite; /* un petit effet d'animation */
}

@keyframes pulse-text {
    0% { opacity: 0.6; }
    50% { opacity: 1; }
    100% { opacity: 0.6; }
}
 
.cms-spinner {
    display: inline-block;
    width: 1rem;          /* taille du spinner */
    height: 1rem;
    border: 2px solid rgba(0, 0, 0, 0.2); /* couleur du contour */
    border-top-color: var(--cms-success-color-text); /* couleur animée */
    border-radius: 50%;
    animation: cms-spin 0.6s linear infinite;
    vertical-align: text-bottom;
}

@keyframes cms-spin {
    to { transform: rotate(360deg); }
}

/* ========================================================================== */
/* = UTILITY COMPONENTS
/* ========================================================================== */

/* GESTION DES ERREURS ET AFFICHAGE DES MESSAGES DE SUCCÉS OU D'ERREUR */
/* Panneau log */
#log-panel {
    position: fixed;
    background-color: white;
    font-family: var(--cms-body-font);
    font-size: var(--cms-font-size-body);
    padding: var(--cms-spacing-l);
    line-height: 1.2;
    z-index: 1000;
    right: 0;
    top: 0;
    bottom: 0;
    width: 50%;
    opacity: 0;  /* Opacity est utilisée pour cacher le panneau et permettre l'effet de transition */
    transform: translateX(100%); /* Le panneau est décalé hors de l'écran */
    transition: transform var(--cms-transition-base), opacity var(--cms-transition-base);  /* Transition pour les deux propriétés */
    box-shadow: var(--cms-shadow-s);
}
/* Quand le panneau est actif, on modifie l'opacité et la position */
#log-panel.show {
    transform: translateX(0%);
    opacity: 1;  /* Afficher avec une opacité de 1 */
}

.log-error {
    color: var(--cms-danger-content);
}

.log-success {
    color: var(--cms-success-content);
}

.log-warning {
    color: var(--cms-warning-content);
}

.log-info {
    color: var(--cms-info-content);
}

.badge-counter {
    background-color: var(--cms-danger-content);
    padding: 0 10px;         /* petit padding horizontal pour les grands nombres */
    height: 25px;
    width: 25px;
    border-radius: 50%;
    display: flex;
    align-items: center;        /* centre verticalement */
    justify-content: center;    /* centre horizontalement */
    font-family: var(--cms-body-font);
    font-weight: 600;
    line-height: 1;
}

.counter-text {
    color: var(--cms-danger-content);
    font-weight: 600;
    font-size: 0.75rem;
}

/* TOOLTIP */

.cms-tooltip {
    /* Styles généraux pour tous les tooltips */
    position: relative;
    cursor: help;
    pointer-events: none;
    font-size: 0.9em;
    z-index: 10;

    padding: var(--cms-spacing-xs);
    background-color: var(--cms-info-background);
    color: var(--cms-info-content);
    border-radius: var(--cms-border-radius-m);
    border-bottom: 1px dotted var(--cms-info-main);
    outline: none;
    pointer-events: auto;

    &:hover::after,
    &:focus::after {
        content: attr(aria-label);
        position: absolute;
        left: 50%;
        bottom: 125%;
        transform: translateX(-50%);
        background: var(--cms-neutral-500);
        color: #fff;
        padding: 6px 8px;
        border-radius: 4px;
        white-space: nowrap;
    }

    /* Tooltip icône */
    &.tooltip-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        background: transparent;
        border-radius: 50%;
        color: var(--cms-text-muted);
        font-size: 0.75rem;
        cursor: help;
        text-align: center;
        line-height: 1;
        transition: background-color 0.3s ease;

        &:hover, &:focus {
            color: var(--cms-neutral-900);
            outline: none;
        }
    }
}


/* 
 * Style de base pour le lien "Skip to main content".
 * Il est caché hors de l'écran mais reste accessible aux lecteurs d'écran et à la navigation au clavier.
 */
.skip-link {
    position: absolute; /* Essentiel pour le positionnement hors écran */
    left: -9999px;      /* Le déplace loin à gauche, hors de la vue */
    top: auto;          /* On peut le laisser en auto ou le fixer */
    width: 1px;         /* Le rend minuscule */
    height: 1px;
    overflow: hidden;   /* S'assure que son contenu ne dépasse pas */
    z-index: 99999;     /* S'assure qu'il passe au-dessus de tout lorsqu'il est focus */
    
    /* Styles pour quand il deviendra visible */
    padding: 1rem;
    background-color: #333;
    color: #fff;
    text-decoration: none;
    border-radius: 0 0 5px 5px; /* Coins arrondis en bas */
    font-weight: bold;
}

/* 
 * Style qui s'applique UNIQUEMENT lorsque le lien reçoit le focus.
 * C'est la partie la plus importante.
 */
.skip-link:focus {
    left: 50%; /* Le recentre horizontalement */
    top: 0; /* Le place en haut de la page */
    transform: translateX(-50%); /* Ajustement fin pour un centrage parfait */
    width: auto; /* Lui permet de prendre la largeur de son contenu */
    height: auto;
    overflow: visible; /* Affiche le contenu */
}

/* ========================================================================== */
/* = UTILITY CLASSES
/* ========================================================================== */

/* ------------------------- */
/* Display / Flex / Grid */
/* ------------------------- */

.hidden { display: none!important; }

.block        { display: block; }
.inline-block { display: inline-block; }
.inline       { display: inline; }
.table      { display: table; }
.table-row  { display: table-row; }
.table-cell { display: table-cell; }

.flex { display: flex; }

.flex-row { 
    display: flex; 
    flex-direction: row; 
}
.flex-column {
    display: flex;
    flex-direction: column;
}

.flex-wrap    { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }

.flex-1 { flex: 1 1 0%; }
.flex-grow-0   { flex-grow: 0; }
.flex-grow     { flex-grow: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.flex-auto     { flex: 1 1 auto; }

.grid { display: grid; }

.grid-inline { display: inline-grid; }

.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
.grid-cols-6 { grid-template-columns: repeat(6, 1fr); }
.grid-cols-12 { grid-template-columns: repeat(12, 1fr); }

/* Fractional columns pour cas particuliers */
.grid-cols-1-2 { grid-template-columns: 1fr 2fr; }
.grid-cols-2-1 { grid-template-columns: 2fr 1fr; }
.grid-cols-1-3-1 { grid-template-columns: 1fr 3fr 1fr; }

/* Grid responsive : minimum 300px, s’étire */
.grid-auto-fit-150 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.grid-auto-fit-200 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.grid-auto-fit-300 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-auto-fit-400 { grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); }

/* Grid responsive : minimum 150px, s’étire */
.grid-auto-fill-150 { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.grid-auto-fill-200 { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.grid-auto-fill-300 { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

.grid-rows-1 { grid-template-rows: repeat(1, 1fr); }
.grid-rows-2 { grid-template-rows: repeat(2, 1fr); }
.grid-rows-3 { grid-template-rows: repeat(3, 1fr); }
.grid-rows-4 { grid-template-rows: repeat(4, 1fr); }

.grid-flow-row { grid-auto-flow: row; }
.grid-flow-col { grid-auto-flow: column; }
.grid-flow-dense { grid-auto-flow: dense; }

.col-span-1 { grid-column: span 1 / span 1; }
.col-span-2 { grid-column: span 2 / span 2; }
.col-span-3 { grid-column: span 3 / span 3; }
.col-span-4 { grid-column: span 4 / span 4; }

.col-full { grid-column: 1 / -1; }

.col-start-1 { grid-column-start: 1; }
.col-start-2 { grid-column-start: 2; }
.col-start-3 { grid-column-start: 3; }
.col-start-4 { grid-column-start: 4; }
.col-start-5 { grid-column-start: 5; }
.col-start-6 { grid-column-start: 6; }

.col-end-2 { grid-column-end: 2; }
.col-end-3 { grid-column-end: 3; }
.col-end-4 { grid-column-end: 4; }
.col-end-5 { grid-column-end: 5; }
.col-end-6 { grid-column-end: 6; }
.col-end--1 { grid-column-end: -1; }

.row-span-1 { grid-row: span 1 / span 1; }
.row-span-2 { grid-row: span 2 / span 2; }
.row-span-3 { grid-row: span 3 / span 3; }
.row-span-4 { grid-row: span 4 / span 4; }

.row-start-1 { grid-row-start: 1; }
.row-start-2 { grid-row-start: 2; }
.row-start-3 { grid-row-start: 3; }

.row-end-2 { grid-row-end: 2; }
.row-end-3 { grid-row-end: 3; }
.row-end--1 { grid-row-end: -1; }

.row-full { grid-row: 1 / -1; }

.order-1 { order: 1; }
.order-2 { order: 2; }
.order-3 { order: 3; }

/* ------------------------- */
/* Flex Align / Justify */
/* ------------------------- */

.items-start   { align-items: flex-start; }
.items-center  { align-items: center; }
.items-end     { align-items: flex-end; }
.items-stretch { align-items: stretch; }

.content-start { align-content: flex-start; }
.content-center { align-content: center; }
.content-end { align-content: flex-end; }
.content-between { align-content: space-between; }
.content-around { align-content: space-around; }

.self-start { align-self: flex-start; }
.self-center { align-self: center; }
.self-end { align-self: flex-end; }

.justify-items-start   { justify-items: start; }
.justify-items-center  { justify-items: center; }
.justify-items-end     { justify-items: end; }
.justify-items-stretch { justify-items: stretch; }

.justify-start    { justify-content: flex-start; }
.justify-center   { justify-content: center; }
.justify-end      { justify-content: flex-end; }
.justify-between  { justify-content: space-between; }
.justify-around  { justify-content: space-around; }
.justify-evenly  { justify-content: space-evenly; }

/* ------------------------- */
/* Spacing (margin / padding) */
/* ------------------------- */

.m-xxs { margin: var(--cms-spacing-xxs); }
.m-xs  { margin: var(--cms-spacing-xs); }
.m-s   { margin: var(--cms-spacing-s); }
.m-m   { margin: var(--cms-spacing-m); }
.m-l   { margin: var(--cms-spacing-l); }
.m-xl   { margin: var(--cms-spacing-xl); }
.m-xxl  { margin: var(--cms-spacing-xxl); }
.m-0  { margin: 0!important; }

.mt-xxs { margin-top: var(--cms-spacing-xxs); }
.mt-xs  { margin-top: var(--cms-spacing-xs); }
.mt-s   { margin-top: var(--cms-spacing-s); }
.mt-m   { margin-top: var(--cms-spacing-m); }
.mt-l   { margin-top: var(--cms-spacing-l); }
.mt-xl  { margin-top: var(--cms-spacing-xl); }
.mt-xxl { margin-top: var(--cms-spacing-xxl); }

.mb-xxs { margin-bottom: var(--cms-spacing-xxs); }
.mb-xs  { margin-bottom: var(--cms-spacing-xs); }
.mb-s   { margin-bottom: var(--cms-spacing-s); }
.mb-m   { margin-bottom: var(--cms-spacing-m); }
.mb-l   { margin-bottom: var(--cms-spacing-l); }
.mb-xl { margin-bottom: var(--cms-spacing-xl); }
.mb-xxl { margin-bottom: var(--cms-spacing-xxl); }

.ml-xxs { margin-left: var(--cms-spacing-xxs); }
.ml-xs  { margin-left: var(--cms-spacing-xs); }
.ml-s   { margin-left: var(--cms-spacing-s); }
.ml-m   { margin-left: var(--cms-spacing-m); }
.ml-l   { margin-left: var(--cms-spacing-l); }
.ml-xl { margin-left: var(--cms-spacing-xl); }
.ml-xxl { margin-left: var(--cms-spacing-xxl); }

.mr-xxs { margin-right: var(--cms-spacing-xxs); }
.mr-xs  { margin-right: var(--cms-spacing-xs); }
.mr-s   { margin-right: var(--cms-spacing-s); }
.mr-m   { margin-right: var(--cms-spacing-m); }
.mr-l   { margin-right: var(--cms-spacing-l); }
.mr-xl { margin-right: var(--cms-spacing-xl); }
.mr-xxl { margin-right: var(--cms-spacing-xxl); }

.p-xxs { padding: var(--cms-spacing-xxs); }
.p-xs  { padding: var(--cms-spacing-xs); }
.p-s   { padding: var(--cms-spacing-s); }
.p-m   { padding: var(--cms-spacing-m); }
.p-l   { padding: var(--cms-spacing-l); }
.p-xl   { padding: var(--cms-spacing-xl); }
.p-xxl  { padding: var(--cms-spacing-xxl); }

.pt-xxs { padding-top: var(--cms-spacing-xxs); }
.pt-xs  { padding-top: var(--cms-spacing-xs); }
.pt-s   { padding-top: var(--cms-spacing-s); }
.pt-m   { padding-top: var(--cms-spacing-m); }
.pt-l   { padding-top: var(--cms-spacing-l); }
.pt-xl   { padding-top: var(--cms-spacing-xl); }
.pt-xxl  { padding-top: var(--cms-spacing-xxl); }

.pb-xxs { padding-bottom: var(--cms-spacing-xxs); }
.pb-xs  { padding-bottom: var(--cms-spacing-xs); }
.pb-s   { padding-bottom: var(--cms-spacing-s); }
.pb-m   { padding-bottom: var(--cms-spacing-m); }
.pb-l   { padding-bottom: var(--cms-spacing-l); }
.pb-xl   { padding-bottom: var(--cms-spacing-xl); }
.pb-xxl  { padding-bottom: var(--cms-spacing-xxl); }

.pl-xxs { padding-left: var(--cms-spacing-xxs); }
.pl-xs  { padding-left: var(--cms-spacing-xs); }
.pl-s   { padding-left: var(--cms-spacing-s); }
.pl-m   { padding-left: var(--cms-spacing-m); }
.pl-l   { padding-left: var(--cms-spacing-l); }
.pl-xl   { padding-left: var(--cms-spacing-xl); }
.pl-xxl  { padding-left: var(--cms-spacing-xxl); }

.pr-xxs { padding-right: var(--cms-spacing-xxs); }
.pr-xs  { padding-right: var(--cms-spacing-xs); }
.pr-s   { padding-right: var(--cms-spacing-s); }
.pr-m   { padding-right: var(--cms-spacing-m); }
.pr-l   { padding-right: var(--cms-spacing-l); }
.pr-xl   { padding-right: var(--cms-spacing-xl); }
.pr-xxl  { padding-right: var(--cms-spacing-xxl); }

.mx-auto { margin-left: auto; margin-right: auto; } /* centrer horizontalement */
.my-auto { margin-top: auto; margin-bottom: auto; } /* centrer verticalement */

/* Gap for flex/grid */
.gap-xxs { gap: var(--cms-spacing-xxs); }
.gap-xs  { gap: var(--cms-spacing-xs); }
.gap-s   { gap: var(--cms-spacing-s); }
.gap-m   { gap: var(--cms-spacing-m); }
.gap-l   { gap: var(--cms-spacing-l); }
.gap-xl  { gap: var(--cms-spacing-xl); }
.gap-xxl { gap: var(--cms-spacing-xxl); }

.gap-x-s { column-gap: var(--cms-spacing-s); }
.gap-y-s { row-gap: var(--cms-spacing-s); }

/* ------------------------- */
/* Width / Height */
/* ------------------------- */

.w-auto { width: auto; }
.w-full { width: 100%; }
.w-1-2 { width: 50%; }
.w-1-3 { width: 33.333%; }
.w-2-3 { width: 66.666%; }
.w-1-4 { width: 25%; }
.w-3-4 { width: 75%; }
.w-1-5 { width: 20%; }
.w-2-5 { width: 40%; }
.w-3-5 { width: 60%; }
.w-4-5 { width: 80%; }

.h-auto { height: auto; }
.h-full { height: 100%; }
.h-screen { height: 100vh; }
.h-1-2-screen { height: 50vh; }
.h-1-3-screen { height: 33.333vh; }
.h-2-3-screen { height: 66.666vh; }

.max-w-full { max-width: 100%; }
.min-w-0 { min-width: 0; } /* utile pour flex items */
.min-h-0 { min-height: 0; }

/* ------------------------- */
/* Typography */
/* ------------------------- */

.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

.text-xs { font-size: var(--cms-font-size-xs); }
.text-sm { font-size: var(--cms-font-size-labelm); }
.text-base { font-size: var(--cms-font-size-body); }
.text-lg { font-size: var(--cms-font-size-lg); }
.text-xl { font-size: var(--cms-font-size-xl); }

.font-light  { font-weight: 300; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-bold   { font-weight: 700; }
.font-italic    { font-style: italic; }
.font-uppercase { text-transform: uppercase; }
.font-lowercase { text-transform: lowercase; }
.font-capitalize{ text-transform: capitalize; }

.leading-tight  { line-height: 1.25; }
.leading-normal { line-height: 1.4; }
.leading-loose  { line-height: 2; }

.tracking-tight { letter-spacing: -0.02em; }
.tracking-wide  { letter-spacing: 0.05em; }

.text-nowrap { white-space: nowrap; }
.text-ellipsis, .text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Line clamp pour multi-line text truncation (CSS moderne) */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ------------------------- */
/* Colors / Backgrounds */
/* ------------------------- */

.text-primary { color: var(--cms-color-primary); }
.text-secondary { color: var(--cms-color-secondary); }
.text-success { color: var(--cms-color-success); }
.text-error { color: var(--cms-color-error); }

.bg-primary { background-color: var(--cms-color-primary); }
.bg-secondary { background-color: var(--cms-color-secondary); }
.bg-success { background-color: var(--cms-color-success); }
.bg-error { background-color: var(--cms-color-error); }

/* ------------------------- */
/* Border / Radius / Shadow */
/* ------------------------- */
.border { border: 1px solid var(--cms-border-default); }
.border-0 { border: 0; }
.border-2 { border-width: 2px; }
.border-4 { border-width: 4px; }
.border-radius { border-radius: var(--cms-border-radius-m); }

.border-t { border-top: 1px solid var(--cms-border-default); }
.border-b { border-bottom: 1px solid var(--cms-border-default); }

/* Radius */
.rounded       { border-radius: var(--cms-border-radius-m); }
.rounded-t { border-top-left-radius: var(--cms-border-radius-m); border-top-right-radius: var(--cms-border-radius-m); }
.rounded-b { border-bottom-left-radius: var(--cms-border-radius-m); border-bottom-right-radius: var(--cms-border-radius-m); }
.rounded-l     { border-top-left-radius: var(--cms-border-radius-m); border-bottom-left-radius: var(--cms-border-radius-m);}
.rounded-r     { border-top-right-radius: var(--cms-border-radius-m); border-bottom-right-radius: var(--cms-border-radius-m);}
.rounded-tl    { border-top-left-radius: var(--cms-border-radius-m);}
.rounded-tr    { border-top-right-radius: var(--cms-border-radius-m);}
.rounded-bl    { border-bottom-left-radius: var(--cms-border-radius-m);}
.rounded-br    { border-bottom-right-radius: var(--cms-border-radius-m);}
.rounded-full {
  border-radius: 9999px;
}

.shadow-sm { box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.shadow-md { box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
.shadow-lg { box-shadow: 0 10px 15px rgba(0,0,0,0.15); }

/* ------------------------- */
/* Position / Z-index */
/* ------------------------- */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }

.center-absolute {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
}

.center-fixed {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 9999;
}

.z-1  { z-index: 1; }
.z-10 { z-index: 10; }
.z-100 { z-index: 100; }

/* ------------------------- */
/* Overflow / Visibility */
/* ------------------------- */

.overflow-hidden { overflow: hidden; }
.overflow-auto   { overflow: auto; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap; /* empêche le retour à la ligne */
    border: 0;
}

/* ------------------------- */
/* Cursor / Pointer / Opacity */
/* ------------------------- */

.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }
.cursor-wait    { cursor: wait; }
.cursor-move    { cursor: move; }

.pointer-none { pointer-events: none; }

.opacity-0  { opacity: 0; }
.opacity-50 { opacity: 0.5; }
.opacity-100 { opacity: 1; }

/* ------------------------- */
/* Transform / Rotate */
/* ------------------------- */

.rotate-180 { transform: rotate(180deg); }

.aspect-square { aspect-ratio: 1 / 1; }
.aspect-video { aspect-ratio: 16 / 9; }

/* ------------------------- */
/* Hover / Focus States */
/* ------------------------- */
.hover\\:text-primary:hover { color: var(--cms-color-primary); }
.hover\\:bg-primary:hover { background-color: var(--cms-color-primary); }

.focus\\:outline-none:focus { outline: none; }
.focus\\:ring:focus { box-shadow: 0 0 0 3px rgba(0,0,0,0.1); }

.disabled { opacity: 0.5; pointer-events: none; }

/* ========================================================================== */
/* = NAVIGATION
/* ========================================================================== */

/* Header */
header {
    grid-area: header;

    &.site-header {
        position: relative;
        width: 100%;
        color: white;
        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
        z-index: 100;

        nav.main-nav {
            position: relative;
            display: flex; 
            flex-direction: column;
            align-items: center;
            height: 100%;
            background-color: var(--cms-background-inverse);
            color: white;

            .nav-logo {
                display: flex;
                align-items: center;
                padding-right: var(--cms-spacing-l);
            
                .site-logo {
                    display: inline-flex;
                    align-self: center;

                    img {
                        width: 220px;
                    }
                    
                }
            }

            .search-icon {
                display: flex;
                color: var(--cms-neutral-900);
            }

        }
    }
}

nav {
    grid-area: nav;
}

.site-name {
    display: flex;
    justify-content: center;
    flex: 1;
    font-size: var(--cms-font-size-h1);

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

.main-navigation {
    display: flex;
    width: 100%;
    height: 100%;
    list-style: none;
    align-items: center;
    background-color: var(--cms-background-main);

    > li { /* SEULEMENT les li du premier niveau */
        padding: var(--cms-spacing-l) var(--cms-spacing-s); /* zone tampon pour hover stable */
        display: flex;
        align-items: center;
        align-self: stretch;
    }

    > ul { /* SEULEMENT le premier ul */
        display: flex;
        list-style: none;
        gap: var(--cms-spacing-s);
        align-items: center;
        padding: 0;
    
        li a {
            display: flex;
            align-items: center;
            gap: var(--cms-spacing-xs);
            font-family: var(--cms-body-font);
            font-weight: 700;
            font-size: 0.8rem;
            color: var(--cms-text-strong);
            text-decoration: none;
            padding: var(--cms-spacing-s) var(--cms-spacing-l) var(--cms-spacing-s) 0;
            text-transform: uppercase;

            &:hover {
                color: var(--cms-primary-500);
            }
        }
    }

    /* Submenus */
    ul ul { /* Tous les ul qui sont dans un li (niveau 2+) */
        padding: 0;
        margin: 0;
    }
}

.utility-navigation {
    list-style: none;
    padding: 0;
    width: 100%;
    height: 100%;
    display: flex;
    gap: var(--cms-spacing-s);
    padding: var(--cms-spacing-s);
    align-content: center;
    align-items: center;
    flex-grow: 1; /* Permet de prendre l'espace disponible */
    text-align: center;
    background-color: var(--cms-background-inverse);
}

.footer-navigation {

}

.social-media-links {

}

.nav-actions-mobile {
    display: none;
}

/* Boutons d'interaction UI (Cachés sur Desktop) */
.nav-actions-mobile { display: none; }
.js-nav-close { display: none; }

/* Conteneur principal du menu */
.nav-menu {
    background-color: var(--cms-neutral-0);
    width: 100%;
    display: flex;
    justify-content: center;
    align-self: stretch;

    .nav-menu-wrapper {
        display: flex; 
        align-items: center;
        justify-content: space-between;
        max-width: var(--cms-container-l);
        width: 100%;

        ul {
            padding: 0;
        }
    }
}

.cross-icon {
    display: none;
    width: 20px;
    height: 30px;
    overflow: visible;
}

img.menu-media { /* Gère les médias dans les liens du header/footer */
    width: 30px;
} 

#header a, #footer a {
    display: inline-flex;
    align-items: center;
    gap: var(--cms-spacing-s);
}

#nav-admin {
    display: flex;
    width: 100%;
    padding: var(--cms-spacing-l);

    .site-name img {
        height: 48px;
    }
}

/* ========================================================================== */
/* = COMPOSANT : SÉLECTEUR DE LANGUE (Hybride Flat/Dropdown)
/* ========================================================================== */

.cms-language-selector {
    position: relative;
    display: inline-flex;
    align-items: center;

    /* --- Style Commun pour les liens --- */
    a {
        text-decoration: none;
        transition: all 0.2s ease;
        padding: 0;
        
        &.active-lang {
            font-weight: 800;
            color: var(--cms-primary-500) !important;
        }

        &.inactive-lang {
            cursor: not-allowed;
            opacity: 0.4;
            /* On peut ajouter un style au survol pour expliquer l'inactivité */
            &:hover { color: var(--cms-danger-content); }
        }
    }

    /* Mode À PLAT (2-3 langues) */
    &.is-flat {
        ul {
            list-style: none;
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: var(--cms-spacing-s);
            padding: 0;
            margin: 0;
            

            li {
                position: relative;
                display: flex;
                align-items: center;

                a {
                    font-size: 0.85rem;
                    color: var(--cms-neutral-0); /* Couleur header */
                    text-transform: uppercase;
                    
                    &:hover:not(.inactive-lang) {
                        color: var(--cms-primary-500);
                    }
                }
            }
        }
    }

    /* Mode DROPDOWN (> 3 langues) */
    &.is-dropdown {
        cursor: pointer;
        padding: var(--cms-spacing-xxs);

        .lang-trigger {
            background: none; 
            border: none;
            color: white; 
            cursor: pointer;
            display: flex; 
            align-items: center; 
            gap: var(--cms-spacing-xxs);
            font-weight: 600; 
            padding: var(--cms-spacing-xs);
            
            .icon-globe { font-size: 18px; }
            .icon-chevron { font-size: 16px; transition: transform 0.2s; }
        }

        .lang-dropdown-list {
            /* État masqué */
            opacity: 0; 
            visibility: hidden;
            position: absolute;
            top: 100%; 
            right: 0;
            min-width: 150px;
            background-color: white;
            border-radius: var(--cms-border-radius-m);
            box-shadow: var(--cms-shadow-l);
            padding: var(--cms-spacing-s) 0;
            z-index: 1000;
            list-style: none;
            transform: translateY(10px);
            transition: all 0.3s ease;

            li a {
                display: block;
                padding: var(--cms-spacing-xs) var(--cms-spacing-s);
                color: var(--cms-neutral-900);
                font-size: 0.9rem;

                &:hover:not(.inactive-lang) {
                    background-color: var(--cms-neutral-50);
                    color: var(--cms-primary-500);
                }
            }
        }

        /* --- HOVER LOGIC --- */
        &:hover {
            .lang-dropdown-list {
                opacity: 1;
                visibility: visible;
                transform: translateY(0);
            }
            .icon-chevron {
                transform: rotate(180deg);
            }
        }
    }
}


/* ========================================================================== */
/* = HEADINGS
/* ========================================================================== */

h1, h2, h3, h4, h5, h6 {
    line-height: 1.2;
}

h1 {
    font-size: var(--cms-font-size-h1);
    font-family: var(--cms-title-font);
    font-weight: 700;
    margin-bottom: 1.5rem; 
}

h2 {
    font-size: var(--cms-font-size-h2);
    margin-bottom: 1.25rem;
}

h3 {
    font-size: var(--cms-font-size-h3);
    margin-bottom: var(--cms-spacing-s);
}

h4 {
    font-size: var(--cms-font-size-h4);
    margin-bottom: var(--cms-spacing-s);
}

h5 {
    font-size: var(--cms-font-size-h5);
    margin-bottom: var(--cms-spacing-xs);
}

h6 {
    font-size: var(--cms-font-size-h6);
    margin-bottom: 0.25rem;
}

.overtitle { /*Surtitre */
    font-size: var(--cms-font-size-overtitle);
    line-height: var(--cms-spacing-s);
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--cms-text-muted);
    margin-bottom: var(--cms-spacing-xs);
    font-weight: 700;
}

/* ========================================================================== */
/* = BUTTONS & BADGES
/* ========================================================================== */

button, .button {
    display: inline-flex;
    width: auto;
    align-items: center;
    gap: var(--cms-spacing-xs);
    padding: var(--cms-spacing-xs) var(--cms-spacing-s);
    border-radius: var(--cms-border-radius-s);
    font-family: var(--cms-body-font);
    line-height: 1.2;;
    font-size: 1em;
    background-color: var(--cms-background-inverse); /* Couleur secondaire/neutre */
    color: white;
    border: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.3s, color 0.3s, border 0.3s;

    &:hover {
        background-color: var(--cms-neutral-800);
    }

    &:disabled {
        background: var(--cms-neutral-200);
        cursor: not-allowed;
    }
}

/* Bouton Primaire */
.button-primary, .button-action {
    background-color: var(--cms-primary-500); /* Bleu */
    color: #fff;

    &:hover {
        background-color: var(--cms-primary-400);
        color: white;
    }
}

/* Bouton Secondaire */
.button-secondary {
    background-color: var(--cms-background-inverse); /* Noir */
    color: white;

    &:hover {
        background-color: var(--cms-neutral-800);
        color: white;
    }
}

.button-small {
    font-size: var(--cms-font-size-label);
}

/* Modificateur pour les boutons carrés/ronds avec icône seule */
.button-icon {
    padding: var(--cms-spacing-s); /* On tue le padding global pour reprendre le contrôle des dimensions */
    width: 24px;
    height: 24px;
    justify-content: center;
    flex-shrink: 0; /* On empêche le bouton de s'écraser s'il est dans une flexbox serrée */
    /* border-radius: 50%; */ /* (Optionnel) Si on veut des ronds parfaits */

    /* Variante pour une taille un peu plus confortable (ex: bouton delete dans une liste) */
    &.medium {
        width: 32px;
        height: 32px;
    }
}

.button-circle {
    width: 40px;
    height: 40px;
    padding: 0;
    justify-content: center;
    border-radius: 9999px;
}

/* ---------------- Danger / Success / Warning ---------------- */

.button-danger {
    background-color: var(--cms-danger-background);
    color: var(--cms-danger-content);
    border: 1px solid var(--cms-danger-main);

    &:hover {
        background-color: var(--cms-danger-hover);
    }
}

.button-success {
    background-color: var(--cms-success-background);
    color: var(--cms-success-content);
    border: 1px solid var(--cms-success-main);

    &:hover {
        background-color: var(--cms-success-hover);
    }
}

.button-warning {
    background-color: var(--cms-warning-background);
    color: var(--cms-warning-content);
    border: 1px solid var(--cms-warning-main);

    &:hover {
        background-color: var(--cms-warning-hover);
    }
}

button.alert-danger:hover {
    background-color: var(--cms-danger-hover);
}
button.alert-warning:hover {
    background-color: var(--cms-warning-hover);
}

/* ---------------------------------------------------------- */

.button-close {
    background-color: var(--cms-danger-background);
    color: var(--cms-danger-content);
}

/* Bouton de déconnexion */
.logout-button, .admin-aside .logout-button  {
    background-color: var(--cms-danger-content);

    &:hover {
        background-color: var(--cms-danger-hover);
        color: var(--cms-danger-content);
    }
}

.delete-file-btn {
    background-color: var(--cms-danger-background);
    color: var(--cms-danger-content);
    justify-content: center;
}

/* Badge styles */
.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--cms-spacing-xs);
    padding: var(--cms-spacing-xs) var(--cms-spacing-s);
    border-radius: var(--cms-border-radius-s);
    font-family: var(--cms-body-font);
    line-height: 1.2;;
    font-size: 0.9em;
    text-decoration: none;
    text-align: center;
}

.background-dark {
    background-color: var(--cms-neutral-900);
    color: var(--cms-neutral-0);
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;

    &.published, &.active {
        background-color: var(--cms-success-content);
    }

    &.draft, &.inactive {
        background-color: var(--cms-warning-content);
    }

    &.archived {
        background-color: var(--cms-neutral-500);
    }

    &.scheduled {
        background-color: var(--cms-info-content);
    }
}

/* ========================================================================== */
/* = TYPOGRAPHY
/* ========================================================================== */

.text {
    font-size: var(--cms-font-size-body);
    font-family: var(--cms-body-font);
    transition: opacity var(--cms-transition-base), max-width var(--cms-transition-base);
    white-space: nowrap; /* empêche retour à la ligne */
}

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

.small {
    font-size: calc(var(--cms-font-size-body) * 0.90); /* 90% de la taille normale */
}

.help-text {
    padding: var(--cms-spacing-s);
    background-color: var(--cms-info-background);
    color: var(--cms-info-content);
    border: 1px solid var(--cms-info-main);
    border-radius: var(--cms-border-radius-m);

    a {
        color: var(--cms-primary-500);

        &:hover {
            color: var(--cms-primary-600);
        }
    }
}

.text-danger {
    font-family: var(--cms-body-font);
    font-size: var(--cms-font-size-body);
    color: var(--cms-danger-content);
}

/* ========================================================================== */
/* = MAIN CONTENT
/* ========================================================================== */

main {
    grid-area: main;
}

#main-content-wrapper {
    height: 100%;
     width: 100%;
    max-width: 100%;
    box-sizing: border-box; /* Indispensable pour inclure les paddings dans les 100% */
}
    
section {
    position: relative;
    padding: var(--cms-spacing-xxl) 0;
}

.cms-page-section:nth-child(odd) {
   background-color: var(--cms-background-subtle);
}

.cms-page-section:nth-child(even) {
   background-color: var(--cms-background-main);
}

aside {
    height: 100%;

    ul {
        list-style: none;
        font-weight: bold;
        padding: 0;
    }

    li {
        padding: 0.6em 0;
    }

    a {
        color: var(--cms-text-default);
    }
}

#time-container .form-group {
    justify-content: space-between;
}

form {
    .form-field {
        display: flex;
        flex-direction: column;
        gap: var(--cms-spacing-s);
    }
}

.checkbox-wrapper {
    padding: var(--cms-spacing-xs) 0;
    display: flex;
    gap: 0.8rem;
}

.image-4-3 {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center;
    width: 100%;
    border-radius: var(--cms-border-radius-m);
}

.media-gallery {
	display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--cms-spacing-s);

	img {
		width: 100%;
		max-height: 400px;
		object-fit: cover;
	}
}

.preview {
    width: 250px;
}

.small-preview {
    width: 150px;
}

#landing-hero-title {
    padding: var(--cms-spacing-m);
    display: flex;
    text-align: center;
    height: 40vh;
    justify-content: center;
}

#landing-hero-title h1 {
    font-size: var(--cms-font-size-h1);
}

#landing-hero-title h2 {
    font-size: 1.2rem;
    margin: 0;
}

/* --- CMS Builder / Editor Content --- */
/* Styles pour le contenu généré par Editor.js ou Summernote en Front */
.cms-editor-content {
    /* Assure que les images ne dépassent jamais */
    max-width: 100%;
    /* overflow-x: hidden; */
}

.cms-editor-content p {
    margin-bottom: var(--cms-spacing-s);
    line-height: 1.6;
}

.cms-editor-content h2, 
.cms-editor-content h3 {
    margin-top: var(--cms-spacing-m);
    margin-bottom: var(--cms-spacing-l);
    font-weight: 600;
}

.cms-subblock-row {
    line-height: 1.6;
}

.cms-subblock-row:not(:last-child) {
    margin-bottom: var(--cms-spacing-s);
}

/* --- Indentation --- */

/* Niveau 1 : ~40px */
.indent-level-1 { 
    padding-left: 2.5rem !important; 
}

/* Niveau 2 : ~80px */
.indent-level-2 { 
    padding-left: 5rem !important; 
}

/* Niveau 3 : ~120px */
.indent-level-3 { 
    padding-left: 7.5rem !important; 
}

/* Responsive : On réduit l'indentation sur mobile pour ne pas écraser le texte */
@media (max-width: 768px) {
    .indent-level-1 { padding-left: 1rem !important; }
    .indent-level-2 { padding-left: 2rem !important; }
    .indent-level-3 { padding-left: 3rem !important; }
}

/* --- Listes --- */

ul.cms-list, ol.cms-list {
    margin-top: var(--cms-spacing-s);
    margin-bottom: var(--cms-spacing-s);
    color: var(--cms-text-default);
}

ul.cms-list {
    list-style-type: disc;

    > li {
        list-style-type: disc;
    }
}

ol.cms-list {
    list-style-type: decimal;

    > li {
        list-style-type: decimal;
    }
}

/* --- Bloc Média (Image/Video) --- */
.cms-block-media, 
.cms-block-media-full {
    margin: var(--cms-spacing-l) 0;
    display: block;
}

/* Image Responsive de base */
.cms-media-element {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Style Centré (Par défaut pour figure) */
figure.cms-block-media {
    margin: 0;
    text-align: center;
}

/* Option: Bordure */
.cms-media-bordered {
    border: 1px solid var(--cms-neutral-50);
    padding: var(--cms-spacing-xs);
    border-radius: var(--cms-border-radius-s);
}

/* Option: Fond */
.cms-media-background {
    background-color: var(--cms-neutral-50); /* Gris clair */
    padding: var(--cms-spacing-m);
    text-align: center;
    border-radius: var(--cms-border-radius-m);
}
/* Quand il y a un fond, l'image est souvent un peu plus petite */
.cms-media-background.cms-media-element {
    max-width: 80%; 
    margin: 0 auto;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

/* Option: Stretched (Pleine largeur) */
.cms-media-stretched {
    width: 100%;
    object-fit: cover; /* Assure que l'image couvre tout sans déformation */
}

/* Légende (Figcaption) */
figcaption {
    font-size: 0.9em;
    color: var(--cms-neutral-100);
    margin-top: var(--cms-spacing-xs);
    font-style: italic;
    text-align: center;
}

.cms-inline-code {
    display: inline;
    font-family: var(--cms-body-font);
    background-color: var(--cms-primary-50);
    color: var(--cms-text-link);
    padding: 2px 4px;
    border: 1px solid var(--cms-primary-400);
    border-radius: var(--cms-border-radius-s);
}

/* --- Bloc Média & Texte (Grid 2 Colonnes) --- */
.cms-block-media-text {
    margin: var(--cms-spacing-xl) 0;
}

/* Option: Fond sur tout le bloc */
.cms-block-media-text.has-background {
    background-color: var(--cms-neutral-50);
    padding: var(--cms-spacing-xl) 0; /* Padding vertical pour aérer */
}

/* Option: Stretched (Pleine largeur) */
.cms-block-media-text.is-stretched {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}
/* Si stretched, on ajoute un container interne pour que le contenu ne touche pas les bords */
.cms-block-media-text.is-stretched .cms-grid-2cols {
    max-width: var(--cms-container-l);
    margin: 0 auto;
    padding: 0 var(--cms-spacing-m);
}

/* La Grille (CSS Grid) */
.cms-grid-2cols {
    display: grid;
    grid-template-columns: 1fr; /* Mobile : 1 colonne */
    gap: var(--cms-spacing-l);
    align-items: center; /* Centré verticalement */
}

@media (min-width: 768px) {
    .cms-grid-2cols {
        grid-template-columns: 1fr 1fr; /* Desktop : 2 colonnes */
        gap: var(--cms-spacing-xl);
    }

    /* Option: Image à droite (Inversion) */
    .cms-grid-2cols.reversed .col-media {
        order: 2;
    }
    .cms-grid-2cols.reversed .col-text {
        order: 1;
    }
}

/* Images dans le bloc Media-Text */
.cms-grid-2cols .col-media img,
.cms-grid-2cols .col-media video {
    width: 100%;
    height: auto;
    border-radius: var(--cms-border-radius-m);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08); /* Ombre légère pour le relief */
}

/* --- Formulaire intégré --- */
.cms-block-form {
    /* margin: var(--cms-spacing-l) 0; */
    border-radius: var(--cms-border-radius-m);

    /* 
    &:last-child {
        margin-bottom: 0;
    } 
    */
}

/* --- Boutons --- */
.cms-block-button {
    margin: var(--cms-spacing-l) 0;
}

/* --- Embed (Video/Map) --- */
.cms-block-embed {
    margin: var(--cms-spacing-l) 0;
    position: relative;
    /* Ratio 16:9 responsive */
    width: 100%;
    /* height est géré inline par le PHP, mais on peut forcer le responsive ici */
}
.cms-block-embed iframe {
    max-width: 100%;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    border-radius: var(--cms-border-radius-s);
}

/* --- Citation (Quote) --- */
.cms-block-quote {
    margin: var(--cms-spacing-l) auto;
    max-width: 800px;
    padding-left: var(--cms-spacing-m);
    border-left: 4px solid var(--cms-text-default); /* Barre verticale */
}
.cms-block-quote blockquote {
    font-size: var(--cms-font-size-body);
    font-style: italic;
    color: var(--cms-text-default);
    margin: 0;
}
.cms-block-quote figcaption {
    margin-top: var(--cms-spacing-xs);
    font-weight: 600;
    font-style: normal;
    text-align: left; /* Aligné avec la barre */
}
.cms-block-quote.text-center {
    border-left: none;
    text-align: center;
}
.cms-block-quote.text-center figcaption {
    text-align: center;
}

/* --- Code Block --- */
.cms-code-wrapper {
    position: relative;
    background: var(--cms-background-main);
    border-radius: var(--cms-border-radius-m);
    margin: var(--cms-spacing-s) 0;
    overflow: hidden;
    border: 1px solid var(--cms-border-subtle);

    .cms-code-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: var(--cms-spacing-xs) var(--cms-spacing-m);
        background: var(--cms-background-subtle);
        border-bottom: 1px solid var(--cms-border-subtle);
    }

    .cms-code-lang {
        font-family: var(--cms-body-font);
        font-size: var(--cms-font-size-caption);
        color: var(--cms-text-link);
        background-color: var(--cms-primary-50);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        padding: var(--cms-spacing-xxs) var(--cms-spacing-xs);
        border-radius: var(--cms-border-radius-s);
    }

    .cms-code-copy-button {
        background: transparent;
        border: none;
        color: var(--cms-text-on-dark-muted);
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: var(--cms-spacing-xxs);
        padding: var(--cms-spacing-xxs) var(--cms-spacing-xs);
        border-radius: var(--cms-border-radius-s);
        transition: all var(--cms-transition-base);

        &:hover {
            background: var(--cms-white-a10);
            color: var(--cms-text-on-dark);
        }

        .material-symbols-outlined {
            font-size: 16px;
        }

        .copy-text {
            font-size: var(--cms-font-size-caption);
            font-weight: 600;
        }
    }

    .cms-block-code {
        pre {
            margin: 0;
            padding: var(--cms-spacing-m);
            overflow-x: auto;
            background: transparent;
        }

        code {
            font-family: 'Fira Code', monospace;
            font-size: 0.9rem;
            line-height: 1.5;
            color: var(--cms-text-default);
        }
    }
}

.cms-document-card {
    display: inline-flex;
    align-items: center;
    gap: var(--cms-spacing-xs);
    padding: var(--cms-spacing-s) var(--cms-spacing-m);
    border: 1px solid #ddd;
    border-radius: var(--cms-border-radius-m);
    background-color: var(--cms-neutral-0);
    text-decoration: none;
    color: var(--cms-text-default);
    transition: all 0.2s;
}
.cms-document-card:hover {
    background-color: var(--cms-neutral-50);
    border-color: var(--cms-neutral-100);
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
.cms-document-card .doc-name {
    font-weight: 600;
}
.cms-document-card .doc-size {
    color: var(--cms-neutral-100);
    font-size: 0.85em;
}

.cms-delimiter {
    border: 0;
    border-top: 1px solid #ddd;
    margin: var(--cms-spacing-xl) auto;
    width: 60%;
}

/* Citation */
.cms-block-quote {
    border-left: 4px solid #ccc;
    padding-left: var(--cms-spacing-m);
    margin: var(--cms-spacing-l) 0;
    font-style: italic;
}
.cms-block-quote.text-center {
    border-left: none;
    text-align: center;
}

/* Code */
.cms-block-code {
    background: var(--cms-neutral-0);
    padding: var(--cms-spacing-s);
    border: 1px solid var(--cms-neutral-50);
    border-radius: var(--cms-border-radius-s);
    font-family: monospace;
    overflow-x: auto;
}

/* Delimiter (Style astérisques Editor.js classique) */
.cms-block-delimiter {
    font-size: 30px;
    line-height: 65px;
    height: 65px;
    text-align: center;
    color: var(--cms-neutral-50);
    letter-spacing: 0.5em;
}

/* Wrapper pour scroller horizontalement sur mobile */
.cms-block-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: var(--cms-spacing-l) 0;
    border: 1px solid var(--cms-neutral-50);
    border-radius: var(--cms-border-radius-m);
}

/* Le Tableau */
.cms-block-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
    min-width: 600px; /* Force le scroll si trop petit */
}

.cms-block-table th,
.cms-block-table td {
    padding: var(--cms-spacing-xs) var(--cms-spacing-s);
    border-bottom: 1px solid #e0e0e0;
    text-align: left;
    vertical-align: top;
}

/* Style En-tête */
.cms-block-table thead tr {
    background-color: var(--cms-neutral-50);
    border-bottom: 2px solid var(--cms-neutral-100);
}

.cms-block-table th {
    font-weight: 600;
    color: var(--cms-text-default);
}

/* Style Zébré (Optionnel mais joli) */
.cms-block-table tbody tr:nth-of-type(even) {
    background-color: var(--cms-neutral-50);
}

/* Dernier bordure */
.cms-block-table tbody tr:last-of-type {
    border-bottom: none;
}

/* --- Icon Text --- */

.cms-block-icon-text {
    display: flex;
    gap: var(--cms-spacing-s);
    align-items: center;

    /* Taille de l'icône */
    .material-symbols-outlined {
        font-size: 32px;
    }

    /* Layouts */
    &.layout-horizontal {
        flex-direction: row;
    }

    &.layout-vertical {
        flex-direction: column;
    }

    /* Centrage */
    &.text-center {
        align-items: center;
        text-align: center;

        &.layout-horizontal {
            justify-content: center;
        }
    }
}

/* --- ACCORDION --- */

/* Wrapper Flexbox dans l'accordéon */
.accordion-content-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--cms-spacing-m);

    /* 1. Image en BAS (défaut) */
    &.pos-bottom {
        flex-direction: column;

        .media-part {
            margin-top: var(--cms-spacing-s);
        }
    }

    /* 2. Image en HAUT */
    &.pos-top {
        flex-direction: column;

        .media-part {
            margin-bottom: var(--cms-spacing-s);
        }
    }

    /* 3. Image à GAUCHE */
    &.pos-left {
        flex-direction: row;
        align-items: flex-start;
    }

    /* 4. Image à DROITE */
    &.pos-right {
        flex-direction: row; /* Le HTML a déjà mis l'image en 2ème position */
        align-items: flex-start;
    }

    /* Responsive : mobile */
    @media (max-width: 600px) {
        &.pos-left,
        &.pos-right {
            flex-direction: column;
        }

        img {
            width: 100% !important;
            margin-bottom: 15px;
        }
    }
}

/* ========================================================================== */
/* = ANIMATIONS / TRANSITIONS
/* ========================================================================== */

/* ------------------------- */
/* Fade-in / Fade-out        */
/* ------------------------- */

.cms-anim-fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;

    &.visible {
        opacity: 1;
        transform: translateY(0);
    }
}

.cms-anim-fade-in-fast { transition-duration: 0.3s; }
.cms-anim-fade-in-slow { transition-duration: 1s; }

.cms-anim-fade-out {
    opacity: 1;
    transition: opacity 0.5s ease;

    &.hidden {
        opacity: 0;
    }
}

/* ------------------------- */
/* Slide                     */
/* ------------------------- */

/* Slide depuis le bas */
.cms-anim-slide-up {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease;

    &.visible {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Slide depuis le haut */
.cms-anim-slide-down {
    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.5s ease;

    &.visible {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Slide depuis la gauche / droite */
.cms-anim-slide-left {
    opacity: 0;
    transform: translateX(-20px);
    transition: all 0.5s ease;

    &.visible { 
        opacity: 1; 
        transform: translateX(0); 
    }
}


.cms-anim-slide-right {
    opacity: 0;
    transform: translateX(20px);
    transition: all 0.5s ease;

    &.visible { 
        opacity: 1; 
        transform: translateX(0); 
    }
}

/* Slide-in depuis les bords */

.cms-anim-slide-in-left {
    opacity: 0;                   /* invisible au départ */
    transform: translateX(-100%); /* complètement à gauche hors écran */
    transition: opacity 0.8s ease, transform 0.8s ease;

    &.visible {
        opacity: 1;
        transform: translateX(0); /* revient à sa position normale */
    }
}

.cms-anim-slide-in-right {
    opacity: 0;
    transform: translateX(100%);
    transition: opacity 0.8s ease, transform 0.8s ease;

    &.visible {
        opacity: 1;
        transform: translateX(0);
    }
}

.cms-anim-slide-in-top {
    opacity: 0;
    transform: translateY(-100%);
    transition: opacity 0.8s ease, transform 0.8s ease;

    &.visible {
        opacity: 1;
        transform: translateY(0);
    }
}

.cms-anim-slide-in-bottom {
    opacity: 0;
    transform: translateY(100%);
    transition: opacity 0.8s ease, transform 0.8s ease;

    &.visible {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ------------------------- */
/* Hover effects             */
/* ------------------------- */

/* Scale léger au survol */
.cms-anim-hover-scale {
    transition: transform 0.3s ease;

    &:hover {
        transform: scale(1.05);
    }
}

/* Ombre au survol */
.cms-anim-hover-shadow {
    transition: box-shadow 0.3s ease;

    &:hover {
        box-shadow: 0 8px 20px rgba(0,0,0,0.2);
    }
}

/* Légère rotation / tilt */
.cms-anim-hover-rotate {
    transition: transform 0.3s ease;

    &:hover {
        transform: rotate(2deg);
    }
}

/* Overlay / image fade */
.cms-anim-hover-fade img {
    transition: opacity 0.3s ease;
}

.cms-anim-hover-fade:hover img {
    opacity: 0.8;
}

/* ------------------------- */
/* Transitions               */
/* ------------------------- */

.transition { transition: all var(--cms-transition-base); }
.transition-fast { transition-duration: 0.2s; }
.transition-slow { transition-duration: 0.6s; }

/* ------------------------- */
/* Repetitives animations    */
/* ------------------------- */

/* Pulse (zoom) */
@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}
.animate-pulse {
    animation: pulse 1s infinite;
}

.button-pulse {
    animation: pulse 1s ease-in-out infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.6);
    }
    70% {
        transform: scale(1.05);
        box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(0, 123, 255, 0);
    }
}

/* Bounce vertical */
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
.animate-bounce {
    animation: bounce 1s infinite;
}

/* Rotation continue */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.animate-spin {
    animation: spin 2s linear infinite;
}

/* ========================================================================== */
/* = LAYOUT
/* ========================================================================== */

.container, .container-s, .container-m, .container-xl {
    display: block;
    box-sizing: border-box; /* Le padding ne grossit pas la boîte */
    width: 100%;
    padding: 0 var(--cms-spacing-s); /* Empêche le contenu de coller aux bords sur mobile */
    margin: 0 auto; /* Centrage horizontal */
}

.container {
    max-width: var(--cms-container-l);
}

.container-s {
    max-width: var(--cms-container-s);
}

.container-m {
    max-width: var(--cms-container-m);
}

.container-xl {
    max-width: var(--cms-container-xl);
}

/* Conteneur "plein écran" sans bords */
.container-fluid {
    width: 100%;
    padding: 0;
    margin: 0;
}

/* Contenu des pages statiques */
.page-content {
    padding-top: var(--cms-spacing-l); /* Espace intérrieur au dessus du contenu */
    padding-bottom: var(--cms-spacing-l); /* Espace intérrieur en dessous du contenu */
}

/* L'image "Stretched" (Pleine largeur) */
.cms-editor-content > .cms-block-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Optionnel : Un peu d'espace vertical entre les blocs */
.cms-editor-content > .container > * {
    margin-bottom: 1.5em;
}

.layout-container {
    display: grid;
    grid-template-areas: "main";
    grid-template-columns: 1fr;
    grid-area: layout;
    height: 100%;

    .sidebar-left {
        grid-area: sidebar-left;
    }

    .sidebar-right {
        grid-area: sidebar-right;
    }

    .sidebar-left, .sidebar-right {
       
    }

    /* Si la sidebar gauche est présente */
    &:has(.sidebar-left) {
        grid-template-areas: "sidebar-left main";
        grid-template-columns: auto 1fr;
    }

    /* Si la sidebar droite est présente */
    &:has(.sidebar-right) {
        grid-template-areas: "main sidebar-right";
        grid-template-columns: 1fr auto;
    }

    /* Si les DEUX sont présentes */
    &:has(.sidebar-left):has(.sidebar-right) {
        grid-template-areas: "sidebar-left main sidebar-right";
        grid-template-columns: auto 1fr auto;
    }
}

.group-container {
    display: flex;
    flex-direction: column;
    gap: var(--cms-spacing-s);
    margin-bottom: var(--cms-spacing-xxl);
    flex-wrap: wrap;
}

.grid-container {
    display: grid;
    grid-gap: 64px 32px; /* Gouttières */
    grid-template-columns: repeat(12, minmax(0, 1fr)); /* Crée 12 colonnes flexibles avec une largeur minimale de 0 et maximale de 1 fraction de l'espace disponible */
    padding-top: var(--cms-spacing-l);
    /*padding-bottom: 64px;*/
    /*align-items: flex-start;*/

    .grid-item-full {
        grid-column: 1/-1; /* Occupation complète de la grille (toutes colonnes) */
    }

    .grid-item-1-col {
        grid-column: 4/-4; /*L'élément commence à partir de 4ème colonne et se termine 4 colonnes avant la fin*/
    }

    .grid-item-2-col {
        grid-column: span 6; /*L'élément s'étend sur 6 colonnes*/
    }

    .grid-item-3-col {
        grid-column: span 4;
    }
    
    .grid-item-4-col {
        grid-column: span 3;
    }

}

.cms-hero-container {
    position: relative;
    height: 40vh;


    .hero-title {
        z-index: 2;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        height: 100%;
    }

    .hero-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0;

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
        }

        .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.4); /* Couche sombre */
            z-index: 1;
        }

        .blur {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            backdrop-filter: blur(6px); /* flou sur tout ce qui est derrière */
            -webkit-backdrop-filter: blur(6px); /* pour Safari */
            z-index: 1;
            pointer-events: none; /* pour que le clic passe au dessous */
        }
    }
}

/* Features Section */
#cms-features {
    padding: 4rem 1rem;
    background-color: var(--cms-background-subtle);
    text-align: center;

    h2 {
        font-size: 2.5rem;
        margin-bottom: var(--cms-spacing-l);
    }

    .features-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 2rem;

        .feature {
            background: #fff;
            padding: var(--cms-spacing-l) var(--cms-spacing-s);
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            text-align: center;

            h3 {
                font-size: 1.5rem;
                margin-bottom: var(--cms-spacing-s);
            }

            p {
                font-size: 1rem;
                color: var(--cms-text-default);
            }
        }
    }
}

.content-wrapper {
    display: flex;
    align-items: center; /* vertical align */
    gap: var(--cms-spacing-l); /* espace entre texte et image */
}

.content-wrapper .text {
    flex: 1; /* occupe la moitié ou plus */
}

.content-wrapper .image {
    flex: 1;
}

/* Pour inverser (image à gauche, texte à droite) */
.content-wrapper.reverse {
    flex-direction: row-reverse;
}
  
/* --- COMPOSANT: CMS CARD --- */

.cms-card {
    /* --- Base Style --- */
    position: relative; /* INDISPENSABLE : sert de repère au lien étendu */
    display: flex;
    flex-direction: column;
    background-color: var(--cms-neutral-0);
    border-radius: var(--cms-border-radius-m);
    position: relative;
    transition: all var(--cms-transition-base);
    height: 100%; /* Pour qu'elles aient la même hauteur dans une grille */

    /* --- Variantes de Style --- */
    
    /* 1. Style "Elevated" (Défaut pour les Cards principales) */
    &.shadowed {
        box-shadow: var(--cms-shadow-s);
        border: 1px solid transparent; /* Pour éviter le saut au hover */
    }

    /* 2. Style "Flat" (Pour les items du Dashboard, Stats, etc.) */
    &.flat {
        background-color: var(--cms-neutral-0);
        border: none;
        box-shadow: none;
    }

    /* 3. Style "Bordered" (Fond blanc, juste une bordure) */
    &.bordered {
        background-color: var(--cms-neutral-0);
        border: 1px solid var(--cms-border-default);
        box-shadow: none;
    }

    /* 4. Tone Subtle et Strong */

    &.tone-subtle {
        background-color: var(--cms-neutral-50);
    }

    &.tone-strong {
        background-color: var(--cms-neutral-100);
    }

    /* --- Interaction (Hover) --- */

    &.interactive {
        cursor: pointer;

        &:hover {
            transform: translateY(-4px);
            box-shadow: var(--cms-shadow-m); /* Une ombre un peu plus forte */
            border-color: var(--cms-primary-200); /* Petite touche de couleur */

            /* Animation de la flèche si c'est un lien textuel */
            .card-link-text .material-symbols-outlined {
                transform: translateX(4px);
            }
            .card-link-text span {
                border-bottom-color: var(--cms-primary-500);
            }
        }
    }

    /* --- Overlay link (lien fantôme) --- */

    .cms-card-overlay-link {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1; /* Niveau 1 : Couvre tout le fond */
        content: "";
        opacity: 0; /* Invisible */
    }

    /* Éléments interactifs au-dessus (boutons, tags, ...) */
    .card-action, .card-tags a, .card-tags span {
        /* On doit le soulever au-dessus du lien fantôme */
        position: relative; 
        z-index: 2; /* Niveau 2 : Au-dessus du lien global */
        pointer-events: auto; /* S'assure qu'il reçoit le clic */
    }

    /* --- Zones Internes --- */

    /* Zone Image (Optionnelle) */
    .card-image {
        width: 100%;
        height: 200px; /* Hauteur standard, peut être surchargée */
        flex-shrink: 0;
        background-color: var(--cms-neutral-100); /* Placeholder color */
        overflow: hidden; /* Important pour que l'image respecte les coins */

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: transform 0.5s ease;
        }
    }

    /* Effet de zoom sur l'image au hover de la carte parente */
    &:hover .card-image img {
        transform: scale(1.05);
    }

    /* Icône */
    .icon {
        font-size: 40px;
        color: var(--cms-neutral-600);
        display: flex;
    }

    /* Zone Contenu */
    .card-content {
        padding: var(--cms-spacing-m);
        display: flex;
        flex-direction: column;
        gap: var(--cms-spacing-s);
        flex-grow: 1; /* Pousse le footer vers le bas */
        width: 100%;

        /* Header interne (ex: Icône + Titre) */
        .card-header {
            display: flex;
            align-items: center;
            gap: var(--cms-spacing-s);
            
            /* Variante grosse icône au dessus (Dashboard help) */
            &.icon-top {
                flex-direction: column;
                align-items: center;
                text-align: center;
            }

            .header-stat {
                font-size: var(--cms-font-size-h5);
                font-weight: 700;
                color: var(--cms-text-default);
            }
        }

        .card-title-container {
            display: flex;
            flex-direction: column;
            gap: var(--cms-spacing-xxs);
        }

        .card-title-wrapper {
            display: flex;
            align-items: center;
            gap: var(--cms-spacing-xs);
        }

        h3.card-title {
            margin: 0;
            font-size: var(--cms-font-size-h5);
            font-weight: bold;
            color: var(--cms-neutral-900);
        }

        .card-description {
            p:first-of-type {
                margin-top: 0;
            }

            p:last-child {
                margin-bottom: 0;
            }

            p {
                font-size: var(--cms-font-size-body);
                color: var(--cms-text-muted);
                line-height: 1.4;
            }
        }
        
        /* Gros chiffres (Stats) */
        .card-stat-value {
            font-size: var(--cms-font-size-h1);
            font-weight: 700;
            color: var(--cms-text-default);
        }
    }

    /* --- Zone Footer (Actions) --- */
    /* Pour aligner les tags et la date en bas */
    .card-footer {
        margin-top: auto; /* Pousse ce bloc tout en bas de la card */
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
        gap: var(--cms-spacing-s);

        &.has-left {
            justify-content: space-between; /* si tags/meta présentes */
        }

        /* Si pas de left (juste le bouton d'action), on le met à gauche par défaut ou à droite selon ton besoin */
        &:not(.has-left) {
            justify-content: flex-start; /* Aligne le bouton '+' à gauche comme sur le Figma "Articles" */
        }

        .card-tags {
            display: flex;
            gap: var(--cms-spacing-xxs);
        }

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

        /* --- STYLES DES ACTIONS --- */
        .card-action {
            /* 1. Bouton Cercle (Style Dashboard) */
            a.button-circle {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 36px;
                height: 36px;
                border-radius: 50%;
                background-color: var(--cms-primary-500);
                color: var(--cms-neutral-0);
                font-size: 20px;
                text-decoration: none;
                transition: background-color 0.3s ease;

                &:hover { background-color: var(--cms-primary-600); }
            }

            /* 2. Lien Texte (Style Marketing / Doc) */
            .card-link-text {
                display: flex;
                align-items: center;
                gap: var(--cms-spacing-xs);
                text-decoration: none;
                color: var(--cms-primary-500);
                font-weight: 600;
                font-size: var(--cms-font-size-body);
                transition: color 0.3s ease;

                span {
                    border-bottom: 1px solid transparent;
                    transition: border-color 0.3s ease;
                }

                .material-symbols-outlined {
                    font-size: 1.2rem;
                    transition: transform 0.3s ease;
                }

                &:hover {
                    color: var(--cms-primary-600);
                }
            }
        }
    }

    .badge {
        /* Style pour le petit label "Article" ou "Page" */
        background-color: var(--cms-primary-50);
        color: var(--cms-primary-500);
        padding: var(--cms-spacing-xxs) var(--cms-spacing-xs);
        border-radius: var(--cms-border-radius-s);
        font-size: var(--cms-font-size-label);
        font-weight: 600;
        text-transform: uppercase;
        position: absolute;
        top: calc(-1 * var(--cms-spacing-xs));
        left: 50%;             /* Centre par rapport au parent */
        transform: translateX(-50%);  /* Ajuste le centrage exact */
    }

    /* --- VARIANTE : VERTICAL (Comportement par défaut, mais explicite) --- */
    &.vertical {
        flex-direction: column; /* Assure l'empilement vertical */

        .card-image {
            width: 100%; /* L'image prend toute la largeur */
            /* La hauteur est déjà gérée par .card-image par défaut (ex: 200px) */
            
            /* S'assure que l'image reste en haut */
            order: -1; 
        }

        .card-header {
            flex-direction: column;
            align-items: start;
        }
    }

    /* --- VARIANTE : HORIZONTAL --- */
    &.horizontal {
        flex-direction: row; /* La clé : on passe de colonne à ligne */
        align-items: stretch; /* Pour que l'image prenne toute la hauteur */

        .card-image {
            width: 30%; /* Largeur fixe de l'image à gauche */
            height: auto; /* Hauteur automatique pour suivre le contenu */
            min-height: 200px; /* Hauteur minimale de sécurité */
        }

        .card-content {
            /* justify-content: center; /* Centre verticalement le texte */
            padding: var(--cms-spacing-l); /* Un peu plus d'espace sur les côtés */
        }

        /* Responsive : retour en colonne sur mobile */
        @media (max-width: 768px) {
            flex-direction: column;
            
            .card-image {
                width: 100%;
                height: 200px;
            }
        }
    }

    /* --- Layout centered --- */

    &.layout-centered {

        .card-content {
            justify-content: center;
            align-items: center;
            text-align: center;
        }

        .card-centered {
            display: flex;
            flex-direction: column;
            align-items: center;  /* centré horizontalement */
            justify-content: flex-start; /* aligné en haut verticalement */
            gap: var(--cms-spacing-s);
            height: 100%;
        }

        .centered-title {
            margin: 0;
            font-weight: bold;
        }

        .centered-description {
            max-width: 28rem;
            color: var(--cms-text-muted);
        }
    }

    &.layout-centered-vertical {
        .card-centered {
            justify-content: center;
        }
    }

    /* --- Tooltip --- */

    .tooltip-icon {
        cursor: help;
    }

    &.highlighted {
        box-shadow: 0 0 20px var(--cms-primary-500);
    }

}

/* CAROUSEL */
.carousel-container {
    padding: var(--cms-spacing-s);

    .carousel-wrapper {
        overflow: hidden; /* Cache les débordements */

        .carousel-item-container {
            display: grid;
            grid-template-columns: repeat(15, 1fr); /* 15 items, adaptables */
            gap: var(--cms-spacing-s);
            width: calc(20% * 15); /* 5 items visibles, donc 20% de la largeur chacun */
            transition: transform 0.3s ease; /* Transition douce si besoin de défilement */

            .carousel-item {
                position: relative;
                height: 450px;

                a {
                    height: 100%;
                }

                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    border-radius: var(--cms-border-radius-m);
                }

                .carousel-text-container {
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    padding: var(--cms-spacing-m);
                    color: white;
                    width: 100%;
                    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
                    display: flex;
                    flex-direction: column;
                    gap: var(--cms-spacing-xs);
                    overflow: hidden;  /* Coupure du débordement */
                    border-radius: var(--cms-border-radius-m);  /* Même radius que l'image */

                    a span {
                        font-size: var(--cms-font-size-h3);
                        font-weight: bold;
                        color: white;
                    }
                }
            }

        }

    }
}

/* COMPOSANT CALLOUT */
.cms-callout {
    display: flex;
    gap: var(--cms-spacing-s);
    padding: var(--cms-spacing-m);
    border-radius: var(--cms-border-radius-m);
    margin-bottom: var(--cms-spacing-m);
    border: 1px solid var(--cms-neutral-100);

    .callout-icon {
        span {
            font-size: 24px;
        }
    }

    .callout-text {
        strong {
            display: block;
            margin-bottom: var(--cms-spacing-xs);
            font-size: 1.05rem;
        }
    }

    .callout-content {

        .callout-content-row {
            line-height: 1.6;
        }

        p {
            color: inherit;
        }

        p:last-child {
            margin-bottom: 0; /* Évite un espace vide en bas de la boîte */
        }
    }

    .callout-body-flow {
        display: flex;
        flex-direction: column;
        /* gap: var(--cms-spacing-m); /* Espace entre les paragraphes et les blocs de code */
    }

    .callout-title-main {
        display: block;
        margin-bottom: var(--cms-spacing-xs);
        font-size: 1.1rem;
    }

    .callout-code-row pre {
        padding: var(--cms-spacing-xs);
        margin: 0;
        font-size: 0.85rem;
    }

    /* Variantes */
    &.callout-info {
        background-color: var(--cms-info-background);
        border-color: var(--cms-info-main);
        color: var(--cms-info-content);

        .callout-icon span {
            color: var(--cms-info-main);
        }

        .cms-inline-code {
            background-color: color-mix(in srgb, var(--cms-info-background), var(--cms-black-a10));
            border: 1px solid var(--cms-info-main);
            color: var(--cms-info-content);
        }

        ul.cms-list, ol.cms-list {
            color: var(--cms-info-content);
        }
    }

    &.callout-success {
        background-color: var(--cms-success-background);
        border-color: var(--cms-success-main);
        color: var(--cms-success-content);

        .callout-icon span {
            color: var(--cms-success-main);
        }

        .cms-inline-code {
            background-color: color-mix(in srgb, var(--cms-success-background), var(--cms-black-a10));
            border: 1px solid var(--cms-success-main);
            color: var(--cms-success-content);
        }

        ul.cms-list, ol.cms-list {
            color: var(--cms-success-content);
        }
    }

    &.callout-warning {
        background-color: var(--cms-warning-background);
        border-color: var(--cms-warning-main);
        color: var(--cms-warning-content);

        .callout-icon span {
            color: var(--cms-warning-main);
        }

        .cms-inline-code {
            background-color: color-mix(in srgb, var(--cms-warning-background), var(--cms-black-a10));
            border: 1px solid var(--cms-warning-main);
            color: var(--cms-warning-content);
        }

        ul.cms-list, ol.cms-list {
            color: var(--cms-warning-content);
        }
    }

    &.callout-danger {
        background-color: var(--cms-danger-background);
        border-color: var(--cms-danger-main);
        color: var(--cms-danger-content);

        .callout-icon span {
            color: var(--cms-danger-main);
        }

        .cms-inline-code {
            background-color: color-mix(in srgb, var(--cms-danger-background), var(--cms-black-a10));
            border: 1px solid var(--cms-danger-main);
            color: var(--cms-danger-content);
        }

        ul.cms-list, ol.cms-list {
            color: var(--cms-danger-content);
        }
    }

    &.callout-tip {
        background-color: var(--cms-neutral-50);
        border-color: var(--cms-neutral-200);
        color: var(--cms-neutral-700);

        .callout-icon span {
            color: var(--cms-neutral-600);
        }

        .cms-inline-code {
            background-color: color-mix(in srgb, var(--cms-neutral-50), var(--cms-black-a10));
            border: 1px solid var(--cms-neutral-200);
            color: var(--cms-neutral-700);
        }

        ul.cms-list, ol.cms-list {
            color: var(--cms-text-default);
        }
    }

   
}

/* HERO IMAGE */
#hero-image {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;

    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #00000010;
    }
   
}

/* PAGINATION */
.items-per-page-count {
    display: flex;
    color: var(--cms-text-muted);
    margin-bottom: var(--cms-spacing-xs);
}

#taxonomy-term-page {
    .items-per-page-count {
        margin-bottom: var(--cms-spacing-l);
    }
}

/* ========================================================================== */
/* = FORMS (LAYOUT)
/* ========================================================================== */

.form-container {
    display: flex;
    flex-direction: column;
    gap: var(--cms-spacing-s);
    align-items: flex-start; /* évite le stretch global */
    /*margin-top: var(--cms-spacing-l);*/
    margin-bottom: var(--cms-spacing-l);

    /*
    button {
        align-self: self-start;
    }
    */

    ul, ol {
        display: flex;
        flex-direction: column;
        gap : var(--cms-spacing-s);
    }
}

.form-row-container {
    display: flex;
    flex-wrap: wrap; 
    margin-left: -10px; 
    margin-right: -10px;
}

.form-label {
    font-weight: bold;
    font-size: var(--cms-font-size-h4);
}

.sub-field {
    display: flex;
    flex-direction: column;
    gap: var(--cms-spacing-xs);

    label {
        font-size: calc(var(--cms-font-size-body) * 0.90); /* 90% de la taille normale */
    }
}

.form-control  {

}


.form-group {
    display: flex;
    align-items: center;
    gap: var(--cms-spacing-xs);
}

.form-subtitle {
    font-size: calc(var(--cms-font-size-body) * 0.90);
    font-weight: 600;
    color: var(--cms-text-muted);
    margin-bottom: var(--cms-spacing-xs);
}

.checkbox-group, .radio-group {
    display: flex;
    flex-direction: column;
    gap: var(--cms-spacing-s);
}

.form-check {
    display: flex;
    gap: var(--cms-spacing-s);
    align-items: center;

    label {
        font-size: var(--cms-font-size-label);
    }
}

.field-header {
    display: flex;
    align-items: center;
    gap: var(--cms-spacing-xs);

    .help-trigger-button {
        background-color: unset;
        padding: 0;
        align-self: center;

        > * {
            font-size: 24px;
            color: var(--cms-neutral-400);
        }

        &:hover > * {
            color: var(--cms-neutral-600);
        }
    }

    h2 {
        margin: 0;
    }
}

.form-help-text {
    color: var(--cms-text-muted);
    font-family: var(--cms-body-font);
    font-size: calc(var(--cms-font-size-body) * 0.90); /* 90% de la taille normale */
}

.help-panel {
    display: none; /* Caché par défaut, affiché via JS */
    flex-direction: column;
    gap: var(--cms-spacing-s);
    background-color: var(--cms-info-background);
    color: var(--cms-info-content);
    padding: var(--cms-spacing-m);
    border-radius: var(--cms-border-radius-m);
    border: 1px solid var(--cms-info-main);

    &.open {
        display: flex;
    }
}

.form-actions {
    display: flex;
    flex-direction: column;
    gap: var(--cms-spacing-m);
}

.form-footer-text {
    font-size: var(--cms-font-size-label);
}

/* Lien secondaire discret, petite taille */
.small-link {
    font-size: var(--cms-font-size-caption);
    color: var(--cms-primary-500);
    text-decoration: none;
    font-weight: 500;
    transition: color var(--cms-transition-base);
    
    &:hover {
        color: var(--cms-primary-600);
        text-decoration: underline;
    }
}

fieldset {
    border: none;
    padding: 0;
    margin-bottom: var(--cms-spacing-l);
    background: transparent;
}

/* Reset du fieldset */
fieldset.fieldset-card {
    display: flex;
    flex-direction: column;
    gap: var(--cms-spacing-m);
    background-color: var(--cms-background-main);
    border: 1px solid var(--cms-border-default);
    border-radius: var(--cms-border-radius-m);
    box-shadow: var(--cms-shadow-xs);
    padding: 0; /* IMPORTANT : On retire tout padding du parent pour coller les bords */
    min-width: 0; /* Fix pour flexbox/grid */
    /*overflow: hidden; /* Pour que les coins du header suivent l'arrondi de la carte */

    /* Le Header (Anciennement Legend) */
    legend {
        width: 100%; /* On force la largeur à 100% */
        box-sizing: border-box;
        float: left; /* LA CLÉ : Le float sort l'élément du calcul de bordure standard */
        display: block;
        /* Style "Card Header" */
        background-color: var(--cms-neutral-50); 
        color: var(--cms-text-default);
        font-family: var(--cms-body-font);
        font-weight: 700; /* Gras pour la hiérarchie */
        font-size: var(--cms-font-size-h4);
        padding: var(--cms-spacing-s) var(--cms-spacing-l);
        margin: 0;
        border-bottom: 1px solid var(--cms-border-default); /* Séparation avec le contenu */
    }

    .fieldset-card-content {
        display: flex;
        flex-direction: column;
        gap: var(--cms-spacing-s);
        margin-bottom: var(--cms-spacing-s);
    }

    /* Gestion du contenu à l'intérieur */
    /* On cible tous les éléments directs après la légende */
    > * {
        margin-left: var(--cms-spacing-l);
        margin-right: var(--cms-spacing-l);
    }

    /* Le premier élément après la légende doit "nettoyer" le float */
    > *:not(legend):first-of-type {
        clear: both; /* Indispensable pour que le contenu passe SOUS le titre */
        /* margin-bottom: var(--cms-spacing-m); */
    }

    /* Le dernier élément a besoin d'une marge en bas */
    > *:last-child {
        margin-bottom: var(--cms-spacing-m);
    }
}

.fieldset-inline {
    display: flex;
    flex-direction: row;
    gap: var(--cms-spacing-xs);
}

#email-help {
    font-size: 0.8rem;
    color: var(--cms-text-muted);
}

.password-container {
    position: relative;
    width: 100%;
    max-width: 350px;

    span {
        position: absolute;
        right: 8px;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
        user-select: none;
    }
}

#message {
    min-height: 100px;
}

.required {
    color: var(--cms-danger-content);
}

/* ========================================================================== */
/* = AUTH & ACCOUNT
/* ========================================================================== */

header.auth-header {
    padding: var(--cms-spacing-l) 0;

    .site-logo {
        display: flex;
        flex-direction: column;
        align-items: center;

        img {
            width: 320px;
            height: auto;
        }
    }
}

.cms-auth-section {
    background-color: var(--cms-background-subtle);
    height: 100%;
}

main .auth-header {
    display: flex;
    flex-direction: column;
    align-items: center;

    p {
        margin: 0;
    }
}

.login-card {
    margin-top: var(--cms-spacing-xl);
    place-self: center;
    width: 500px;
    background-color: var(--cms-neutral-0);
    border-radius: var(--cms-border-radius-m);
    padding: var(--cms-spacing-l);

    .login-title {
        text-align: center;
        margin-bottom: var(--cms-spacing-xl);
    }

    form {

        input[type="email"], .password-container, input[type="password"] {
            max-width: 100%;
            width: 100%;
        }

        .form-container-password {
            label {
                display:flex; 
                width: 100%;
                justify-content: space-between; 
                align-items: center;
                gap: var(--cms-spacing-xs);
            }
        }

        .password-container {
            input[type="text"] {
                max-width: 100%;
            }
        }

        .account-question-container {
            span, a {
                font-size: var(--cms-font-size-label);

            }

            a {
                color: var(--cms-primary-500);

                &:hover {
                    color: var(--cms-primary-400);
                }
            }
        }
    }

    button {
        align-self: start;
    }
}

.remember-me-group label {
    font-weight: 500;
}

.reset-password-section {
    height: 100%;
}

.reset-password-card {
    .reset-password-header {
        text-align: center;
        margin-bottom: var(--cms-spacing-xl);
    }

    form {
        display: flex;
        flex-direction: column;

        .reset-password-button {
            margin-bottom: var(--cms-spacing-l);
        }

        a.back-to-login-button {
            color: var(--cms-neutral-900);
        }
    }
}

.front-register-card {
    h1 {
        text-align: center;
        margin-bottom: var(--cms-spacing-xl);
    }
}

.cms-account-section {
    padding: var(--cms-spacing-xl) 0;
    background-color: var(--cms-background-subtle);
    min-height: 80vh;

    .cms-account-layout {
        display: flex;
        gap: var(--cms-spacing-l);
        align-items: flex-start;

        /* Sidebar */
        .cms-account-sidebar {
            width: 280px;
            flex-shrink: 0;

            /* Cartes (Card style) */
            .cms-card {
                background: var(--cms-background-main);
                border-radius: var(--cms-border-radius-m);
                box-shadow: var(--cms-shadow-s);
                padding: var(--cms-spacing-l);
                border: 1px solid var(--cms-border-default);

                /* Sidebar Header (Avatar) */
                .profile-header {
                    text-align: center;
                    margin-bottom: var(--cms-spacing-m);
                    padding-bottom: var(--cms-spacing-m);
                    border-bottom: 1px solid var(--cms-border-default);

                    .profile-avatar {
                        width: 80px;
                        height: 80px;
                        border-radius: 50%;
                        object-fit: cover;
                        margin-bottom: var(--cms-spacing-s);
                        border: 2px solid var(--cms-primary-500);
                    }

                    .profile-name {
                        strong {
                            display: block;
                            font-size: 1.1rem;
                            color: var(--cms-text-default);
                        }
                        small {
                            color: var(--cms-text-muted);
                        }
                    }
                }

                /* Navigation Sidebar */
                .account-nav {
                    display: flex;
                    flex-direction: column;
                    gap: var(--cms-spacing-xs);

                    a {
                        display: flex;
                        align-items: center;
                        gap: var(--cms-spacing-xs);
                        padding: var(--cms-spacing-xs) var(--cms-spacing-s);
                        text-decoration: none;
                        color: var(--cms-text-default);
                        border-radius: var(--cms-border-radius-s);
                        transition: background-color 0.2s;
                        font-weight: 500;

                        &:hover {
                            background-color: var(--cms-background-subtle);
                        }

                        &.active {
                            background-color: var(--cms-primary-100);
                            color: var(--cms-primary-500);
                        }

                        &.text-danger {
                            color: var(--cms-danger-content);

                            &:hover {
                                background-color: var(--cms-danger-background);
                            }
                        }
                    }
                }
            }
        }

        /* Zone Principale */
        .cms-account-main {
            flex: 1;

            .cms-card {
                background: var(--cms-background-main);
                border-radius: var(--cms-border-radius-m);
                box-shadow: var(--cms-shadow-s);
                padding: var(--cms-spacing-l);
                border: 1px solid var(--cms-border-default);

                .card-title {
                    margin-top: 0;
                    margin-bottom: var(--cms-spacing-l);
                    font-family: var(--cms-title-font);
                    font-size: var(--cms-font-size-h3);
                }

                .section-title {
                    font-size: var(--cms-font-size-h5);
                    margin-bottom: var(--cms-spacing-m);
                    margin-top: 0;
                }

                .cms-divider {
                    border: 0;
                    border-top: 1px solid var(--cms-border-default);
                    margin: var(--cms-spacing-l) 0;
                }
            }
        }
    }
}

/* ========================================================================== */
/* = ALERT COMPONENTS
/* ========================================================================== */

/* Style général pour les alertes */
.alert {
    padding: var(--cms-spacing-s);
    border-radius: var(--cms-border-radius-m);
    display: flex;
    flex-direction: column;
    gap: var(--cms-spacing-s);
    align-items: start;
    justify-content: space-between;
    transition: opacity 0.3s ease-in-out;

    p {
        margin: var(--cms-spacing-xxs) 0;
    }

    i {
        color: var(--cms-info-content);
    }
}

/* Style spécifique pour les alertes de succès */
.alert-success {
    background-color: var(--cms-success-background);
    color: var(--cms-success-content);
    border: 1px solid var(--cms-success-main);
}

/* Style spécifique pour les alertes d'erreur */
.alert-danger {
    background-color: var(--cms-danger-background);
    color: var(--cms-danger-content);
    border: 1px solid var(--cms-danger-main);
}


/* Style spécifique pour les alertes d'avertissement */
.alert-warning {
    background-color: var(--cms-warning-background);
    color: var(--cms-warning-content);
    border: 1px solid var(--cms-warning-main);
}

/* Style spécifique pour les alertes d'information */
.alert-info {
    background-color: var(--cms-info-background);
    color: var(--cms-info-content);
    border: 1px solid var(--cms-info-main);
}

/* Styles pour rendre les alertes plus visibles */
.alert:hover {
    opacity: 0.9;
}

/* --- Conteneur Principal --- */
#recap-message {
    max-width: 800px; /* On garde une limite pour la lisibilité */
    margin: var(--cms-spacing-l) auto;
    font-family: var(--cms-body-font);
    font-size: var(--cms-font-size-body);
    box-sizing: border-box;
}

/* --- La Boîte (Alert) --- */
.cms-recap-box {
    background-color: var(--cms-success-background);
    color: var(--cms-success-content);
    border: 1px solid var(--cms-success-main);
    border-radius: var(--cms-border-radius-m);
    padding: var(--cms-spacing-m);
    position: relative;
    box-shadow: var(--cms-shadow-s);
}

/* --- Titre --- */
.cms-recap-box h4 {
    font-family: var(--cms-title-font);
    font-size: var(--cms-font-size-h5);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: var(--cms-spacing-xs);
    margin-top: 0;
    margin-bottom: var(--cms-spacing-xs);
    color: var(--cms-success-content);
}

/* --- Séparateur --- */
.cms-recap-box hr {
    border: none;
    border-top: 1px solid var(--cms-success-main);
    margin: var(--cms-spacing-s) 0 var(--cms-spacing-m);
    opacity: 0.6;
}

.cms-recap-box p {
    margin-top: 0;
    margin-bottom: var(--cms-spacing-xs);
}

/* --- Liste des champs --- */
.cms-recap-list {
    list-style: none;
    padding-left: var(--cms-spacing-s);
    border-left: 3px solid var(--cms-success-color-text);
    margin-bottom: 0;
    margin-top: var(--cms-spacing-s);
}

.cms-recap-list li {
    margin-bottom: var(--cms-spacing-xxs);
}

.cms-recap-list li strong {
    text-transform: capitalize;
    margin-right: var(--cms-spacing-xxs);
    color: var(--cms-success-content); /* Vert foncé pour les labels */
    font-weight: 600;
}

.cms-recap-list li span {
    color: var(--cms-text-default); /* Texte principal du site pour les valeurs */
}

/* --- Section Fichiers --- */
.cms-recap-files {
    margin-top: var(--cms-spacing-m);
    padding-top: var(--cms-spacing-s);
    border-top: 1px solid var(--cms-success-main);
}

.cms-recap-files ul {
    margin-top: var(--cms-spacing-xxs);
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--cms-spacing-xs);
}

.cms-recap-files li {
    display: inline-flex;
    align-items: center;
    gap: var(--cms-spacing-xxs);
    background-color: var(--cms-background-main); /* Fond blanc */
    color: var(--cms-text-default);
    border: 1px solid var(--cms-border-default);
    padding: var(--cms-spacing-xxs) var(--cms-spacing-xs);
    border-radius: calc(var(--cms-border-radius-m) / 2); /* Arrondi plus petit */
    font-size: 0.9em;
}

/* --- Message Personnalisé --- */
.cms-recap-custom-msg {
    margin-top: var(--cms-spacing-m);
    padding: var(--cms-spacing-s);
    background-color: var(--cms-background-main);
    border: 1px solid var(--cms-success-main);
    border-radius: calc(var(--cms-border-radius-m) / 2);
    text-align: center;
    font-weight: bold;
    color: var(--cms-success-color-text);
}

/* --- Actions (Boutons) --- */
.cms-recap-actions {
    margin-top: var(--cms-spacing-m);
    display: flex;
    gap: var(--cms-spacing-s);
    justify-content: center;
}

/* Bouton de base */
.cms-recap-btn {
    font-family: var(--cms-body-font);
    font-size: 0.9em;
    padding: var(--cms-spacing-xs) var(--cms-spacing-m);
    border-radius: calc(var(--cms-border-radius-m) / 2);
    cursor: pointer;
    border: 1px solid transparent;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    transition: all var(--cms-transition-base);
}

/* Style Bouton Vert Plein */
.cms-recap-btn-primary {
    background-color: var(--cms-success-color-text);
    color: #fff;
    border-color: var(--cms-success-color-text);
}
.cms-recap-btn-primary:hover {
    /* On assombrit légèrement via filter pour rester compatible sans nouvelle variable */
    filter: brightness(90%); 
    color: #fff;
}

/* Style Bouton Vert Contour */
.cms-recap-btn-outline {
    background-color: transparent;
    color: var(--cms-success-content);
    border-color: var(--cms-success-content);
}
.cms-recap-btn-outline:hover {
    background-color: var(--cms-success-content);
    color: var(--cms-success-background);
}

/* --- Bouton Fermer (Croix) --- */
.cms-recap-close {
    position: absolute;
    top: var(--cms-spacing-xs);
    right: var(--cms-spacing-xs);
    width: 1.5rem;
    height: 1.5rem;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--cms-success-content);
    opacity: 0.5;
    transition: opacity var(--cms-transition-base);
}
.cms-recap-close:hover {
    opacity: 1;
}

/* ========================================================================== */
/* = BREADCRUMB
/* ========================================================================== */

.breadcrumb {
    background-color: var(--cms-background-subtle);
    padding: var(--cms-spacing-s) 0;

    .breadcrumb-container {
        display: flex;
        gap: var(--cms-spacing-s);
        align-items: center;

        a { 
            color: var(--cms-text-strong);
        }
        
        a:hover {
            color: var(--cms-primary-500);
        }
        
        span:last-child {
            color: var(--cms-primary-500);
        }

        .breadcrumb-separator svg {
            width: 6px;
        }
    }
   
}

/* ========================================================================== */
/* = SEARCH ENGINE
/* ========================================================================== */

/* Search */
.search-bar-button {
    display: flex;
    align-items: center;
    padding: var(--cms-spacing-s);

    &:hover {
        background: none;
    }
}

.search-icon-button {
    background: none;
    border: none;
    padding: 0;
}

.search-icon {
    display: block;
    width: 20px;
    height: 20px;
}

.search-modal {
    position: fixed;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--cms-spacing-s);
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .9);
    z-index: 999;
    display: none;

    .search-modal-container {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: var(--cms-container-m);
        padding-top: var(--cms-spacing-xl);

        .search-icon {
            display: none;
        }

        .search-bar-button {
            align-self: end;

            .cross-icon {
                display: block!important;
                margin: var(--cms-spacing-xs) var(--cms-spacing-s) 0 var(--cms-spacing-s);
            }

            &:hover {
                background: none;
            }
        }
        
        form {
            display: flex;
            flex-direction: column;
            place-self: center;
            width: 100%;
            height: 100vh;
            gap: var(--cms-spacing-l);
            padding-top: var(--cms-spacing-m);

            button {
                align-self: flex-start;
                padding-left: var(--cms-spacing-m);
                padding-right: var(--cms-spacing-m);
                background-color: white;
                color: black;

                &:hover {
                    background-color: var(--cms-neutral-200);
                }
            }
        }

        label {
            display: flex;
            flex-direction: column;
            gap: var(--cms-spacing-s);
            color: white;
            text-align: left;

            span {
                text-align: left;
                font-family: var(--cms-body-font);
                font-weight: 600;
                font-size: 0.8rem;
                text-transform: uppercase;
            }
        }

        input[type=search] {
            margin: 0;
            padding: 20px 40px 20px 0;
            display: block;
            width: 100%;
            background: 0 0;
            border-radius: 0;
            font-family: var(--cms-body-font);
            font-weight: 600;
            font-size: 2rem;
            line-height: 1.256em;
            color: #fff;
            border: 0;
            border-bottom: 1px solid rgba(255, 255, 255, .2);

            &:focus {
                outline: 0;
                border-bottom: 1px solid #fff;
            }
        }
    }
}

/* Live Search Results */
.live-search-results {
    margin-top: var(--cms-spacing-m);
    background: var(--cms-background-main);
    border-radius: var(--cms-border-radius-m);
    box-shadow: var(--cms-shadow-m);
    max-height: 400px;
    overflow-y: auto;

    .search-no-results {
        padding: var(--cms-spacing-m);
        text-align: center;
        color: var(--cms-text-muted);
    }
}

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

.search-result-item {
    display: flex;
    align-items: center;
    gap: var(--cms-spacing-s);
    padding: var(--cms-spacing-s) var(--cms-spacing-m);
    text-decoration: none;
    color: var(--cms-text-default);
    border-bottom: 1px solid var(--cms-border-default);
    transition: background-color 0.2s;

    &:hover {
        background-color: var(--cms-background-subtle);
        color: var(--cms-primary-500);
    }
}

.search-result-item .badge {
    font-size: 0.7rem;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--cms-neutral-200);
}

.view-all-results {
    padding: var(--cms-spacing-s);
    text-align: center;
    background: var(--cms-neutral-50);
    
    a {
        font-weight: bold;
        color: var(--cms-primary-500);
        text-decoration: none;
    }
}

/* ========================================================================== */
/* = DIALOG
/* ========================================================================== */

dialog[open] {
    display: flex;
    flex-direction: column;
    place-self: center;
    gap: var(--cms-spacing-m);
    padding: var(--cms-spacing-l);
    min-width: 300px;
    min-height: 200px;
    max-width: var(--cms-container-l);
    border-radius: var(--cms-border-radius-m);
}

/* Fond semi-transparent derrière le dialog */
dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
}

.dialog-content {
    display: flex;
    flex-direction: column;
    gap: var(--cms-spacing-s);
    overflow: auto;
    padding: var(--cms-spacing-l);
}

#custom-dialog {
    padding: 0;

    form {
        height: 100%;
        display: flex;
        flex-direction: column;

        /* HEADER */
        .dialog-header {
            all: unset;
            display: flex;
            align-items: center;
            gap: var(--cms-spacing-s);
            padding: var(--cms-spacing-m) var(--cms-spacing-l);
            border-bottom: 1px solid var(--cms-border-default);

            #dialog-title {
                margin: 0;
            }

            .dialog-icon {
                width: 40px;
            }
        }

        /* BODY */
        .dialog-body {
            all: unset;
            flex: 1; /* prend l’espace restant */
            padding: var(--cms-spacing-m) var(--cms-spacing-l);
            background-color: var(--cms-neutral-50);
        }

        /* FOOTER */
        .dialog-footer {
            all: unset;
            display: flex;
            gap: var(--cms-spacing-s);
            justify-content: flex-end;
            padding: var(--cms-spacing-m) var(--cms-spacing-l);
            border-top: 1px solid var(--cms-border-default);

            button {
                justify-content: center;
            }
        }
    }
}

.cms-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--cms-spacing-m) var(--cms-spacing-l);
    border-bottom: 1px solid var(--cms-border-default);
    
    h2 { 
        margin: 0;
        font-size: var(--cms-font-size-h2); 
    }
}

.cms-modal-body-split {
    display: flex;
    flex: 1; /* Prend toute la hauteur restante */
    overflow: hidden; 
}

/* Style de base de la modale Danger */
dialog.cms-modal-danger {
    background-color: var(--cms-danger-background);
    border: 1px solid var(--cms-danger-main);
    border-radius: var(--cms-border-radius-m);
    padding: 0; /* On gère le padding dans .cms-modal-content */
    max-width: 400px;
    width: 90%;
    box-shadow: var(--cms-shadow-s);
    color: var(--cms-danger-content);

    /* Backdrop (fond derrière la modale) */
    &::backdrop {
        background-color: hsla(0, 0%, 0%, 0.4); /* Assombri légèrement */
        backdrop-filter: blur(2px); /* Flou moderne */
    }

    .cms-modal-header {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center; /* Centré horizontalement */
        gap: var(--cms-spacing-s); /* Espace entre icône et titre */

        /* En-tête avec icône */
        .icon-danger {
            font-size: 48px;
            color: var(--cms-danger-content); /* Rouge vif pour l'alerte */
            display: block;
        }

        h2 {
            font-size: var(--cms-font-size-h4);
            color: var(--cms-danger-content);
        }
    }
}

/* Contenu interne */
.cms-modal-content {
    padding: var(--cms-spacing-l);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Message de confirmation */
.cms-modal-message {
    margin: var(--cms-spacing-l) 0;
    color: var(--cms-text-default); /* Retour au texte normal pour lisibilité */
    font-size: 1rem;
    opacity: 0.8;
}

/* Actions (Boutons) */
.dialog-actions {
    display: flex;
    gap: var(--cms-spacing-m);
    width: 100%;
    justify-content: center;

    /* Bouton "Non" (Secondaire) */
    .button-secondary {
        background-color: white;
        color: var(--cms-text-default);
        border: 1px solid var(--cms-border-default);
        /* Effet hover doux */
        &:hover {
            background-color: var(--cms-neutral-50);
        }
    }

    /* Bouton "Oui" (Danger) */
    .button-danger {
        background-color: var(--cms-danger-content); /* Rouge vif */
        color: white;
        border: none;
        font-weight: bold;
        /* Effet hover */
        &:hover {
            background-color: var(--cms-danger-hover); /* Rouge un peu plus clair */
        }
    }
}

.cms-modal-footer {
    padding: var(--cms-spacing-m) var(--cms-spacing-l);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--cms-border-default);

    .actions-group {
        display: flex;
        gap: var(--cms-spacing-s);
    }
}

/* ========================================================================== */
/* = FOOTER
/* ========================================================================== */

footer {
    background-color: var(--cms-background-inverse);
    color: white;
    padding: var(--cms-spacing-s) 0;
    display: flex;
    flex-direction: column;
    place-content: center;
    grid-area: footer;
}

footer a {
    color: white;
}

/* Footer: texte */
footer p {
    font-size: 1em;
    letter-spacing: 1px;
}

/* Container du footer */
.footer-section-container {
    padding: var(--cms-spacing-l) 0;
}

/* Sections du footer */
.footer-section {
    display: flex;
    flex-direction: column; /* Alignement vertical */
}

.footer-section h3 {
    margin-bottom: var(--cms-spacing-s);
}

.footer-section ul {
    list-style-type: none;
    padding: 0;
}

.footer-section ul li {
    margin-bottom: var(--cms-spacing-xs); 
}

/* Section inférieure du footer */
.footer-bottom {
    text-align: center;
    padding-top: var(--cms-spacing-l);
}

.divider { /* Ligne de séparation */
    width: 100%;
    height: 0.05rem;
    background-color: var(--cms-white-a15); 
}

hr.cms-divider {
    border: 0;
    border-top: 1px solid var(--cms-border-default);
    margin: var(--cms-spacing-m) 0;
    opacity: 0.6;
}

.separator {
    width: 1px;
    height: 30px;
    background: #ebebeb;
    margin-left: 16px;
}

/* Liens du footer */
.footer-links {
    display: flex;
    flex-wrap: wrap; /* Permet de passer à la ligne si nécessaire */
    justify-content: center;
    gap: var(--cms-spacing-s); 
    list-style: none;
}

.footer-links a {
    color: white; 
    text-decoration: none; 
    transition: color 0.3s; /* Animation de la couleur */
}

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

/* ========================================================================== */
/* = PAGINATION
/* ========================================================================== */

.pagination {
    display: flex;
    justify-content: center;
    margin: var(--cms-spacing-m) 0;

    a {
        margin: 0 var(--cms-spacing-xxs);
        padding: var(--cms-spacing-xxs) var(--cms-spacing-xs);
        text-decoration: none;
        background-color: var(--cms-neutral-50);
        border: 1px solid var(--cms-neutral-50);
        color: var(--cms-text-default);
        border-radius: var(--cms-border-radius-s);

        &:hover,
        &.active {
            background-color: var(--cms-primary-500);
            color: var(--cms-neutral-0);
        }
    }
}

/* ===================================================================== */
/* = RESPONSIVE PREVIEW
/* ===================================================================== */

/* Le conteneur principal qui prend tout l'écran et se place au-dessus de tout */
#responsive-preview-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999; /* z-index très élevé pour être au-dessus de tout le site */
    display: none; /* Masqué par défaut, géré par JS */

    button {
        all: unset;
        display: flex;
        align-items: center;
        gap: var(--cms-spacing-xs);
        padding: var(--cms-spacing-xs) var(--cms-spacing-s);
        border-radius: var(--cms-border-radius-s);
        font-family: var(--cms-body-font);
        line-height: 1.2;
        font-size: 1rem;
        text-decoration: none;
        text-align: center;
        background-color: var(--cms-background-inverse); /* Noir */
        color: #fff; /* Blanc */
        border: 2px solid transparent; /* Bordure transparente */
        transition: background-color 0.3s, color 0.3s, border 0.3s;
        cursor: pointer;

        &:hover {
            background-color: var(--cms-primary-800);
            color: white;
        }
    }
}

/* L'overlay de flou devient le fond du conteneur */
#responsive-preview-container #blur-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    pointer-events: none; /* N'intercepte pas les clics */
}

/* La barre de contrôles supérieure */
#responsive-controls {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333; /* Ou votre variable de couleur */
    color: white;
    padding: 10px 20px;
    border-radius: 0 0 12px 12px;
    z-index: 2; /* Pour être au-dessus de l'overlay et du viewport */
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.responsive-title {
    font-family: var(--cms-body-font);
    font-size: var(--cms-font-size-h3);
    font-weight: bold;
    margin-right: 15px;
}

/* La barre pour les dimensions custom, maintenant dans les contrôles */
#custom-width-bar {
    display: none; /* Géré par JS */
    align-items: center;
    gap: var(--cms-spacing-xxs);
    background-color: white;
    color: var(--cms-text-default);
    border-radius: var(--cms-border-radius-m);
    padding: var(--cms-spacing-xxs);

    span {
        all: unset;
        font-size: var(--cms-font-size-body);
        font-family: var(--cms-body-font);
    }
}

#custom-width-bar label {
    all: unset;
    font-size: var(--cms-font-size-body);
    font-family: var(--cms-body-font);
    margin-right: var(--cms-spacing-xxs);
}

#custom-width-bar input {
    all: unset;
    font-size: var(--cms-font-size-body);
    font-family: var(--cms-body-font);
    width: 80px;
}

/* Le viewport qui contient l'iframe */
#viewport {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
    z-index: 1; /* Au-dessus de l'overlay, mais sous les contrôles */
    overflow: hidden; /* Important pour les barres de redimensionnement */
    resize: both; /* Permet un redimensionnement natif si vous le souhaitez un jour */
}

/* Info sur la largeur pour les modes non-custom */
#viewport-width-info {
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--cms-info-background);
    color: var(--cms-info-content);
    font-size: var(--cms-font-size-body);
    font-family: var(--cms-body-font);
    padding: var(--cms-spacing-xs);
    z-index: 1001; /* Au-dessus de l'iframe */
    border-radius: 0 0 10px 0;
}

/* Le bouton de rotation */
#rotation-container {
    position: absolute;
    top: 5rem; /* Positionné sous la barre de contrôle */
    left: 50%;
    transform: translateX(-50%);
    padding: var(--cms-spacing-s);
    color: white;
    background-color: var(--cms-neutral-700);
    cursor: pointer;
    z-index: 2; /* Au-dessus du viewport */
    display: none; /* Géré par JS */
    border-radius: 50%;
}

/* Les barres de redimensionnement (resizers) */
.resizer {
    position: absolute;
    top: 0;
    width: 12px;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3); /* Un peu transparent */
    cursor: ew-resize;
    z-index: 1002; /* Au-dessus de tout dans le viewport */
    user-select: none;
    transition: background-color 0.2s; /* Effet de survol doux */
}
.resizer:hover {
    background-color: var(--cms-primary-800);
}

/* Styles spécifiques pour les resizers horizontaux (gauche/droite) */
.resizer-horizontal {
    top: 0;
    width: 12px;
    height: 100%;
    cursor: ew-resize; /* Curseur Est-Ouest */
}

/* Styles spécifiques pour les resizers verticaux (haut/bas) */
.resizer-vertical {
    left: 0;
    height: 12px;
    width: 100%;
    cursor: ns-resize; /* Curseur Nord-Sud */
}

#resizer-left {
    left: 0;
}
#resizer-right {
    right: 0;
}
#resizer-top { 
    top: 0; 
}
#resizer-bottom { 
    bottom: 0; 
}

/* ===================================================================== */
/* = ADMIN UI
/* ===================================================================== */

/* Panneau d'admin */
#admin-panel {
    position: fixed;
    left: var(--cms-spacing-l);
    top: var(--cms-spacing-xl);
    display: flex;
    flex-direction: column;
    gap: var(--cms-spacing-m);
    background-color: var(--cms-primary-900);
    color: white;
    border-radius: var(--cms-border-radius-m);
    padding: var(--cms-spacing-s);
    width: 100%;
    max-width: 256px;
    z-index: 10000;

    #admin-profile {
        display: flex;
        align-items: center;
        gap: var(--cms-spacing-s);
        cursor: pointer;

        img {
            width: 50px;
            aspect-ratio: 1/1;
            border-radius: var(--cms-border-radius-m);
        }

        span {
            font-size: var(--cms-font-size-h5);
            font-weight: 600;
            font-family: var(--cms-body-font);
        }
    }

    #admin-params {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-between;
        gap: var(--cms-spacing-xs);

        button:not(.logout-button):hover {
            background-color: var(--cms-neutral-800);
        }

        .logout-button {
            background-color: var(--cms-danger-content);
            color: var(--cms-neutral-0);

            &:hover {
                background-color: var(--cms-danger-main);
            }
        }
    }

    #notifications-container {
        z-index: 999;

        #notifications-badge {
            background-color: var(--cms-danger-content);
            padding: var(--cms-spacing-s);
            height: 25px;
            width: 25px;
            border-radius: 50%;
            display: flex;
            align-items: center;        /* centre verticalement */
            justify-content: center;    /* centre horizontalement */
        }

        #notifications-list {
            position: absolute;
            top: 0;
            left: 16rem;
            background: white;
            min-width: 15rem;   /* ~240px, minimum pour être lisible */
            max-width: 25rem;   /* ~400px, limite sur grand écran */
            width: auto;        /* s’adapte au contenu */
            padding: var(--cms-spacing-xs) var(--cms-spacing-s);
            margin-bottom: var(--cms-spacing-s);
            border-radius: var(--cms-border-radius-m);
            font-weight: bold;
            box-shadow: var(--cms-shadow-s);

            .notification {
                display: flex;
                justify-content: space-between;
                gap: var(--cms-spacing-s);
            }
        }
    }

    button {
            all: unset;
            display: flex;
            align-items: center;
            gap: var(--cms-spacing-xs);
            padding: 0.6em var(--cms-spacing-s);
            border-radius: var(--cms-border-radius-s);
            font-family: var(--cms-body-font);
            line-height: 1.2;
            font-size: 1rem;
            text-decoration: none;
            text-align: center;
            background-color: var(--cms-background-inverse); /* Noir */
            color: #fff; /* Blanc */
            border: 2px solid transparent; /* Bordure transparente */
            transition: background-color 0.3s, color 0.3s, border 0.3s;
            cursor: pointer;

            &:hover {
                background-color: var(--cms-primary-800);
                color: white;
            }

            .material-symbols-outlined:not(.logout-button .material-symbols-outlined) {
                color: var(--cms-primary-500);
            }

            span.text:not(.logout-button .material-symbols-outlined):not(.logout-button span.text) {
                color: var(--cms-neutral-200);
            }

            &#logout-button {
                background-color: var(--cms-danger-content);

                &:hover {
                    background-color: var(--cms-danger-hover);
                }
            }
    }

    button:not(.logout-button):hover {
        background-color: color-mix(in hsl, var(--cms-neutral-900) 80%, gray 5%);
    }

    /* Animation bouton s'il y a des erreurs */
    #log-panel-button.has-new-errors {
        background-color: var(--cms-danger-content);
        animation: pulse 1s infinite;

        .material-symbols-outlined, .text {
            color: white;
        }

        &:hover {
            background-color: var(--cms-danger-background-light);
        }
    }
}

/* Définition de l'animation pulse */
@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.7;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* ========================================================================== */
/* = MAINTENANCE
/* ========================================================================== */

#cms-maintenance {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100vh;

    .maintenance-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: var(--cms-spacing-l);
    }

    /* Animation douce du titre */
    .maintenance-title {
        animation: fadeInUp 0.8s ease-out;

        h1 {
            margin: 0;
        }
    }

    /* Sous-texte avec animation légère */
    .maintenance-subtitle {
        opacity: 0.8;
        animation: fadeIn 1.2s ease-in;
    }

    /* ANIMATION */

    .maintenance-animation {
        display: inline-block;
    }

    .one, .two, .three {
        display: block;
        float: left;
        margin-right: 10px;
    }

    .spin-one {
        animation: spin-one 1.5s infinite linear;
    }

    .spin-two {
        animation: spin-two 2s infinite linear;
    }

    @keyframes spin-one {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(-359deg); }
    }

    @keyframes spin-two {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(359deg); }
    }

    /* Couleurs via Design System */
    .one .st0 {
        fill: var(--cms-neutral-700);
    }

    .two .st0 {
        fill: var(--cms-primary-500);
    }

    .three .st0 {
        fill: var(--cms-neutral-700);
    }

    .spin-one {
        -webkit-animation: spin-one 1.5s infinite linear;
        animation: spin-one 1.5s infinite linear;
    }

    .spin-two {
        -webkit-animation: spin-two 2s infinite linear;
        animation: spin-two 2s infinite linear;
    }
    
}

/* ------------------- Keyframes globaux ------------------- */
@keyframes spin-one {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(-359deg);
        transform: rotate(-359deg);
    }
}

@keyframes spin-two {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(-359deg);
        transform: rotate(359deg);
    }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 0.8; }
}

#debug-mode {
    position: absolute;
    top: 0;
    z-index: 1000;
    background: var(--cms-warning-background);
    color: var(--cms-warning-content);
    border: 2px var(--cms-warning-main);
    padding: var(--cms-spacing-xs);
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: var(--cms-spacing-xs);
}

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

/* Wide Desktop */
@media (min-width: 1921px) { 


    
}

/* Desktop */
@media (max-width: 1920px) { 


    
}

/* Petites ordinateurs portables*/
@media (max-width: 1280px) {     

}

/* ========================================================================== */
/* STYLES DROPDOWN : DESKTOP UNIQUEMENT (Écrans > 1024px)                     */
/* ========================================================================== */
@media (min-width: 1025px) {
     /* Styles pour les sous-menus (P.S.: non inséré en css imbriqué sinon cause problème à l'aperçu crud index menu-items) */
    .has-dropdown {
        
        > a {
            gap: var(--cms-spacing-xxs);
        }

        ul.submenu {
            opacity: 0; /* Masqué par défaut */
            visibility: hidden;
            pointer-events: none;
            transition: opacity 0.3s ease, visibility 0.3s ease;
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: var(--cms-spacing-xl);
            padding: var(--cms-spacing-l);
            box-shadow: var(--cms-shadow-l);
            background-color: var(--cms-neutral-0);
            border-radius: var(--cms-border-radius-m);

            li {
                list-style: none;

                a {
                    color: var(--cms-neutral-900);
                    gap: var(--cms-spacing-xs);

                    .icon {
                        fill: white;
                    }
                }
            }
        }

        &:hover > ul.submenu {
            opacity: 1; /* Affiche au survol */
            visibility: visible;
            pointer-events: auto;
        }
        
    }
}

/* Tablettes en paysage et petits ordinateurs portables (jusqu'à 1024px) */
@media (max-width: 1024px) { 

    .grid-container {
        grid-gap: 48px 24px;
        grid-template-columns: repeat(8, minmax(0, 1fr));

        .grid-item-1-col {
            grid-column: 3/-3;
        }

        .grid-item-2-col {
            grid-column: span 4;
        }

        .grid-item-4-col {
            grid-column: span 2;
        }
    }
    
    header.site-header {
        
        nav.main-nav {
            flex-direction: row;
            padding: var(--cms-spacing-s);
            justify-content: space-between;

            ul {
                flex-direction: column;
                padding: var(--cms-spacing-l);
                border-top: 1px solid var(--cms-border-strong);
                border-bottom: 1px solid var(--cms-border-strong);
            }

            /* --- LE MENU MOBILE (Tiroir Fixed) --- */
            .nav-menu {
                position: fixed; /* Fixe par rapport à l'écran */
                top: 0;
                right: 0;
                bottom: 0;
                width: 100%; /* Prend tout l'écran, ou 360px si on veut un tiroir */
                max-width: 360px; /* Tiroir latéral sur tablette */
                height: 100vh;
                z-index: 10000;
                overflow-y: auto;/* On permet le scroll interne s'il y a beaucoup de liens */

                /* Animation de slide depuis la droite */
                transform: translateX(100%); 
                transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s;

                /* Quand le JS ajoute la classe .is-open */
                &.is-open {
                    transform: translateX(0);
                    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.2); /* Ombre pour détacher le tiroir */
                }

                .nav-menu-wrapper {
                    flex-direction: column;
                    justify-content: start;
                    padding: var(--cms-spacing-l);

                    /* Bouton Croix (Fermer) dans le menu */
                    .nav-close-btn {
                        display: flex;
                        align-self: flex-end; /* Aligné à droite en haut du menu */
                        background: transparent;
                        border: none;
                        cursor: pointer;
                        padding: var(--cms-spacing-xs);
                        color: var(--cms-text-default); /* Couleur selon le fond du menu */
                    }

                    ul {
                        border: none;
                    }

                    .search-bar-button {
                        display: none;
                    }

                    #lang-menu {
                        margin: 0;
                    }

                    .main-navigation {
                        flex-direction: column;
                        justify-content: start;

                        .search-bar-button, .separator {
                            display: none;
                        }

                        /* --- SURCHARGE TECHNIQUE DU DROPDOWN SUR MOBILE --- */
                        .has-dropdown {
                            display: flex;
                            flex-direction: column;
                            align-items: flex-start;
                            width: 100%;

                            > a {
                                display: flex;
                                justify-content: space-between;
                                width: 100%;
                            }

                            /* Notre sous-menu s'intègre naturellement sous le lien */
                            ul.submenu {
                                display: none; /* Masqué par défaut */
                                padding: var(--cms-spacing-s) var(--cms-spacing-m);
                                background-color: transparent;
                                width: 100%;

                                &.is-open {
                                    display: flex;
                                    flex-direction: column;
                                    gap: var(--cms-spacing-s);
                                }

                                li {
                                    list-style: none;

                                    a {
                                        color: var(--cms-neutral-0); /* Blanc par défaut (lisible sur fond sombre) */
                                        display: flex;
                                        align-items: center;
                                        gap: var(--cms-spacing-xs);

                                        &:hover, &:active, &.active-lang {
                                            color: var(--cms-primary-500); /* Devient bleu au clic */
                                        }

                                        .icon {
                                            color: var(--cms-primary-500);
                                        }
                                    }
                                }
                            }
                        }

                        > li {
                            padding: var(--cms-spacing-s) 0;
                            width: 100%;
                        }

                        .cross-icon {
                            margin-bottom: var(--cms-spacing-s);
                            align-self: self-end;
                        }
                    }

                    .separator {
                        display: none;
                    }
                }

                .utility-navigation button {
                    display: flex;
                }
            }

            /* Actions Mobile (Search + Burger) visibles */
            .nav-actions-mobile {
                display: flex;
                align-items: center;
                gap: var(--cms-spacing-s);

                /* Bouton Burger (Ouvrir) */
                .burger-btn {
                    background: transparent;
                    border: none;
                    color: white;
                    cursor: pointer;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    padding: var(--cms-spacing-xs);
                }

                .search-icon {
                    color: var(--cms-neutral-0); /* Blanc sur fond foncé */
                    width: 100%;
                    height: 100%;
                }
            }

            span { 
                font-size: 2.3rem;
            }

            .search-icon {
                display: flex;
            }
        }
    }

    input, textarea {
        max-width: 100%;
    }

    .cms-cards-grid {
        grid-template-columns: auto!important;
    }

}

/* Tablettes en portrait */
@media (max-width: 768px) { 
    
    .grid-container {
        grid-gap: 40px 16px;
        grid-template-columns: repeat(8, minmax(0, 1fr));

        .grid-item-1-col {
            grid-column: 2/-2;
        }

        .grid-item-2-col {
            grid-column: 2/-2;
        }

        .grid-item-4-col {
            grid-column: span 2;
        }   
    }

    section {
        padding: var(--cms-spacing-xl) 0;
    }

    .button-primary, .button-secondary, .button-action {
        align-self: stretch;
    }

    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;

        th, td {
            padding: var(--cms-spacing-xs) var(--cms-spacing-s);
            font-size: 0.85rem;
        }
    }

    .cms-anim-slide-in-left {
        transform: translateX(-50px);
    }

    .cms-anim-slide-in-right {
        transform: translateX(50px);
    }
}

/* Smartphones */
@media (max-width: 500px) { 

    .grid-container {
        grid-gap: 40px 16px;
        grid-template-columns: repeat(6, minmax(0, 1fr));

        .grid-item-1-col {
            grid-column: 1/-1;
        }

        .grid-item-2-col {
            grid-column: 1/-1;
        }

        .grid-item-4-col {
            grid-column: span 2;
        }   

        section {
            padding: var(--cms-spacing-l) 0;
        }
    }

    header nav .nav-logo .site-logo img {
        width: 160px;
    }

}

/* Style spécifique pour l'impression */
@media print {

    /* Cacher les éléments non nécessaires pour l'impression */
    header nav .utility-navigation button, footer, .breadcrumb, #print-button, #admin-panel, .no-print {
        display: none;
    }

    /* Modification des marges notamment pour enlever les informations par défaut (date et title) */
    @page {
        margin-top: 8.33mm; /* Enleve les informations par défaut (date et title) en dessous de 8.34mm */
        margin-left: 10mm;
        margin-right: 10mm;
    }

    /* Ajustement de la mise en page de la recette */
    body {
        -webkit-print-color-adjust:exact !important;
        print-color-adjust:exact !important;
        font-size: 12pt;
        line-height: 1.4;
    }

    /* Mise en forme des titres, paragraphes, etc. */
    h1 {
        
    }

    h2 {
        font-size: 20pt;  
    }

    section {
        padding: 0;
    }

    /* Formatage des images */
    img, .image-4-3 {
        width: 100mm; /* Ajuster les images à la largeur de la page */
    }

    /* Gérer les marges et les espacements */
    .container {
        margin: 0;
        padding: 0;
    }

    .grid-container {
        display: block;

    }

}