/* ==========================================================================
   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 ................... Primary, Secondary, Action buttons
   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. ACCOUNT ................... Account 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;
}

/* ========================================================================== */
/* = 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-primary-800) transparent;
}

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

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

    --cms-primary-color: var(--cms-primary-900);

    /* Couleur secondaire */
    --cms-secondary-100: hsl(220, 100%, 90%);
    --cms-secondary-200: hsl(220, 100%, 80%);
    --cms-secondary-300: hsl(220, 100%, 70%);
    --cms-secondary-400: hsl(220, 100%, 60%);
    --cms-secondary-500: hsl(220, 100%, 50%);
    --cms-secondary-600: hsl(220, 100%, 40%);
    --cms-secondary-700: hsl(220, 100%, 30%);
    --cms-secondary-800: hsl(220, 100%, 20%);
    --cms-secondary-900: hsl(220, 100%, 10%);

    --cms--secondary-color-100-hwb: hwb(221 4% 70% / 1);
    --cms--secondary-color-200-hwb: hwb(221 6% 50% / 1);
    
    --cms-secondary-color: var(--cms-secondary-500);

    /* Couleurs de fond */
    --cms-primary-background-color: hsl(0, 0%, 100%); /* Couleur de fond principale */
    --cms-secondary-background-color: var(--cms-primary-50) ; /* Couleur de fond secondaire */
    /* Couleurs neutres*/
    --cms-text-color: var(--cms-primary-700); /* Couleur du texte principal */
    --cms-muted-color: var(--cms-primary-400); /* Couleur de texte plus claire */
    --cms-light-color : hsla(0, 0%, 100%, 0.15);
    /* Couleurs d'état*/
    --cms-accent-color: hsl(6, 78%, 57%); /* Rouge pour les accents */
    --cms-accent-light: hsl(6, 78%, 60%); /* Rouge pour les accents */
    
    --cms-success-color : hsl(135, 59%, 49%);
    --cms-success-color-background : hsl(135, 41%, 88%);
    --cms-success-color-text : hsl(135, 61%, 21%);
    --cms-success-color-border: hsl(135, 41%, 83%);
    --cms-success-color-hover: hsl(135, 41%, 79%);

    --cms-danger-color-background: hsl(355, 71%, 91%);
    --cms-danger-color-background-light: hsl(355, 71%, 95%);
    --cms-danger-color-text: hsl(355, 61%, 28%);
    --cms-danger-color-border: hsl(355, 70%, 87%);
    --cms-danger-color-hover: hsl(355, 70%, 80%);
    
    --cms-warning-color-background: hsl(45, 100%, 90%);
    --cms-warning-color-text: hsl(45, 94%, 27%);
    --cms-warning-color-border: hsl(45, 100%, 86%);
    --cms-warning-color-hover: hsl(45, 100%, 84%);

    --cms-info-color-background: hsl(188, 100%, 90%);
    --cms-info-color-text: hsl(188, 78%, 21%);
    --cms-info-color-border: hsl(188, 53%, 83%);
    --cms-info-color-hover: hsl(188, 53%, 79%);

    /* 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-base: 16px; /* Taille de base */
    --cms-font-size-s: 14px;
    --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.7rem;

    /* 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*/
    --cms-max-width: 1200px;

    /* Ombres et bordures */
    --cms-box-shadow: 0 4px 15px hsla(0, 0%, 0%, 0.1); /* Ombre pour les éléments en relief */
    --cms-border-radius: 10px; /* Pour les coins arrondis */
    --cms-border-color: hsl(0, 0%, 86%);

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

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

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

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

.error-message {
    background-color: var(--cms-danger-color-background);
    color: var(--cms-danger-color-text);
    border: 1px solid var(--cms-danger-color-border);
    padding: var(--cms-spacing-s);
    font-size: var(--cms-font-size-s);
    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-color-text);
        }
    }
}

.success-message {
    background-color: var(--cms-success-color);
    color: white;
    padding: var(--cms-spacing-s);
    font-size: var(--cms-font-size-s);
    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-color-text);
        }
    }
}

/* Erreur 404, 403, etc. */
#error-page-container {
    display: flex;
    flex-direction: column;
    align-items: center;

    span {
        font-size: 22rem;
        text-shadow: 10px -6px 5px rgba(0,0,0,.1);
        color: var(--cms-secondary-color);
        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-accent-color);
        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-color);
    color: white;
    padding: var(--cms-spacing-m);
    border-radius: var(--cms-border-radius);
    box-shadow: var(--cms-box-shadow);
    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-color-background);
    color: var(--cms-danger-color-text);
    border-color: var(--cms-danger-color-border);
    padding: var(--cms-spacing-m);
    border-radius: var(--cms-border-radius);
    box-shadow: var(--cms-box-shadow);
    z-index: 1000;

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

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

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

        pre {
            overflow: auto;
            max-height: 300px;
            background-color: var(--cms-danger-color-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);
        }
    }
}

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

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

.grecaptcha-badge {
    display: none;
}

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

/* 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-base);
    background-color: var(--cms-secondary-background-color);
}

p {
    margin: 1.2em 0;
    line-height: 1.5;
}

a {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

a:has(i, span, svg), span:has(i, span, svg) { /* Pour les icônes */
    display: flex;
    align-items: center;
    gap: var(--cms-spacing-s);
    cursor: pointer;
}

a:hover {
    color: var(--cms-secondary-color);
}

ul, ol {
    padding-left: var(--cms-spacing-l);
}

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

ol {
    display: flex;
    flex-direction: column;
    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.5;
    border-radius: var(--cms-border-radius);
}

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

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

input[readonly], textarea[readonly] {
    background-color: #f5f5f5; /* légèrement grisé */
    color: #555;
    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-color);
    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-secondary-color);
    outline: none;
}

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

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

select {
    max-width: 350px;
    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-secondary-color);
    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: 5px;
}

/* 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-color-border); /* 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 #999;
    border-radius: 4px;
    display: inline-block;
    position: relative;
    cursor: pointer;
    background: #fff;
    transition: all 0.2s ease;
}

input[type="checkbox"]:hover {
    border-color: #666;
}

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

input[type="checkbox"]:checked {
    background: var(--cms-secondary-color);
    border-color: var(--cms-secondary-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 #999;
    border-radius: 50%;
    cursor: pointer;
    background: #fff;
    position: relative;
    transition: all 0.2s ease;
}

input[type="radio"]:hover {
    border-color: #666;
}

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

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

input[type="radio"]:checked {
    border-color: var(--cms-secondary-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-muted-color);
}

pre {
    overflow: auto;
    max-height: 300px;
    background-color: var(--cms-secondary-background-color);
    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);
}

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

/* ACCORDION */

.accordion {

    .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);
        }        
    }

    .accordion-body {
        display: flex;
        flex-direction: column;
        gap: var(--cms-spacing-l);
        margin-top: 0;
        max-height: 0; /* Réduit la hauteur à zéro 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); 
        overflow: auto;

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

}

.open {

    .accordion-body {
        height: auto;
        margin-top: var(--cms-spacing-m);
    }

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

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

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

.tag {
    background-color: var(--cms-secondary-color);
    color: white;
    padding: var(--cms-spacing-xxs) var(--cms-spacing-xs);
    border-radius: var(--cms-border-radius);
    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-secondary-400);
        color: white;
    }
}

/* AUTOCOMPLETE */

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

    .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-color);
        border-radius: var(--cms-border-radius);

        .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-primary-900);
        }
    }

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

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

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

        .dropdown-container {

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

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

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

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

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

    /* Composant multiple values */

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

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

    .selected-tag {
        background-color: var(--cms-secondary-color);
        color: white;
        padding: var(--cms-spacing-xxs) var(--cms-spacing-xs);
        border-radius: var(--cms-border-radius);
        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-box-shadow);
        border-radius: var(--cms-border-radius);
        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-secondary-color);
    }

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

    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-accent-color);
    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-color);*/
    /*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;
        }
    }
}

/* FAQ */
.faq-container {
    width: 1000px;
    display: flex;
    flex-direction: column;
    gap: var(--cms-spacing-s);
    place-self: center;
    /*align-items: center;*/
}

.faq-item {
    box-shadow: var(--cms-box-shadow);
    border-radius: var(--cms-border-radius);
    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);
        overflow: hidden;
    }
}

#burger-menu {
    background: none;
    border: none;
    padding: 0;
}

#burger-icon {
    width: 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
    place-content: center;
    padding: 0;
    gap: 4px;
}

#burger-icon span {
    width: 100%;
    height: 2px;
    background: white;
}

#burger-menu .cross-icon {
    display: none;
    z-index: 1000;
}

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

.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);
        background-color: var(--cms-primary-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-secondary-color) 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-secondary-color); /* Couleur de l'anneau */
}

@keyframes l {
    to {
        transform: rotate(1turn);
    }
}
 
.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); /* 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-base);
    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-box-shadow);
}
/* 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-color-text);
}

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

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

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

.badge-counter {
    background-color: var(--cms-accent-color);
    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-accent-color);
    font-weight: 600;
    font-size: 0.75rem;
}

.tooltip {
    padding: var(--cms-spacing-xs);
    background-color: var(--cms-info-color-background);
    color: var(--cms-info-color-text);
    border-radius: var(--cms-border-radius);
    cursor: help;
    border-bottom: 1px dotted var(--cms-info-color-border);
    outline: none;
}
  
.tooltip:hover,
.tooltip:focus {
position: relative;
}
  
.tooltip:hover::after,
.tooltip:focus::after {
    content: attr(aria-label);
    position: absolute;
    left: 0;
    bottom: 125%;
    background: var(--cms-muted-color);
    color: #fff;
    padding: 6px 8px;
    border-radius: 4px;
    white-space: nowrap;
    z-index: 10;
    font-size: 0.9em;
}

/* 
 * 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; }

.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; }

.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); }

.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); }

.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); }

.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); }

.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); }

.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); }

.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); }

.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); }

.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); }

.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); }

.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-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-sm); }
.text-base { font-size: var(--cms-font-size-base); }
.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.5; }
.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-color); }
.border-0 { border: 0; }
.border-2 { border-width: 2px; }
.border-4 { border-width: 4px; }
.border-radius { border-radius: var(--cms-border-radius); }

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

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

.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%);
    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
/* ========================================================================== */

.main-navigation {
    display: flex;
    width: 100%;
    list-style: none;
    gap: var(--cms-spacing-s);
    align-items: center;
    padding: 0;
}

.utility-navigation {
    display: flex;
    width: 100%;
    list-style: none;
    gap: var(--cms-spacing-s);
    align-items: center;
    padding: 0;
}

.footer-navigation {

}

.social-media-links {

}

/* Header */
header {
    width: 100%;
    color: white;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
    z-index: 100;
    grid-area: header;
}

nav {
    grid-area: nav;
}

header nav {
    display: flex; 
    flex-direction: column;
    height: 100%;
    background-color: var(--cms-primary-color);
    color: white;
}

header nav span {
    font-family: 'Cormorant', serif;
    font-size: var(--cms-font-size-h1);
    font-weight: 400;
    text-align: center;
}

header nav #menu-1 {
    flex-grow: 1; /* Permet à menu-1 de prendre l'espace disponible */
    width: 100%;
    height: 100%;
    display: flex;
    padding: var(--cms-spacing-s);
    align-content: center;
    align-items: center;
    text-align: center;
    background-color: var(--cms-primary-color);
}

header nav #menu-1 .search-icon, header nav #menu-1 .cross-icon {
    fill: white;
}

header nav #menu-1 button {
    display: none;
}

header nav #menu-2 {
    width: 100%;
    background-color: var(--cms-primary-background-color);
}

header nav .menu-content {
    width: 100%;
    padding: var(--cms-spacing-s) 0;
    display: flex;
    align-items: center;

    #main-menu {
        flex: 1;
    }
}

header .menu-content 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-primary-color);
        text-decoration: none;
        padding: var(--cms-spacing-s) var(--cms-spacing-l) var(--cms-spacing-s) 0;
        text-transform: uppercase;

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

img.menu-icon {
    width: 30px;
} 

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

.site-name {
    flex: 1;
    justify-content: center;
    font-size: var(--cms-font-size-h1);
    a {
        color: white;
        text-decoration: none;
    }
}

header .site-logo {
    align-self: center;
    padding-top: var(--cms-spacing-l);
}

.site-logo {

    img {
        width: 250px;
    }

}

#lang-menu {
    margin-right: var(--cms-spacing-xl);

    a {
        padding: 0;
    }
}

.inactive-lang {
    cursor: not-allowed; 
    opacity: 0.6;
}

/* ========================================================================== */
/* = 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: 0.75rem;
}

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-muted-color);
    margin-bottom: var(--cms-spacing-xs);
    font-weight: 700;
}

/* ========================================================================== */
/* = BUTTONS
/* ========================================================================== */

/* Bouton Primaire */
.button-primary, button, .button-action {
    display: inline-flex;
    width: auto;
    align-items: center;
    gap: var(--cms-spacing-xs);
    padding: var(--cms-spacing-xs) var(--cms-spacing-s);
    border: none;
    border-radius: 5px;
    font-family: var(--cms-body-font);
    line-height: 1.2;;
    font-size: 1em;
    text-decoration: none;
    text-align: center;
    background-color: var(--cms-secondary-color); /* Bleu */
    color: #fff;
    transition: background-color 0.3s, color 0.3s, border 0.3s;
    cursor: pointer;
}

button:disabled {
    background: var(--cms-primary-200);
    cursor: not-allowed;
}

.button-primary:hover, button:hover, .button-action:hover {
    background-color: var(--cms-secondary-400);
    color: white;
}

/* Bouton Secondaire */
.button-secondary {
    display: flex;
    align-items: center;
    gap: var(--cms-spacing-xs);
    padding: var(--cms-spacing-xs) var(--cms-spacing-s);
    border-radius: 5px;
    font-size: 1em;
    text-decoration: none;
    text-align: center;
    background-color: var(--cms-primary-color); /* Noir */
    color: white;
    transition: background-color 0.3s, color 0.3s, border 0.3s;
    cursor: pointer;

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

.button-primary, .button-secondary, .button-action {
    align-self: flex-start; /* Le bouton se met à gauche sans s'étirer */
}

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

/* Modificateur pour les boutons carrés/ronds avec icône seule */
.button-icon {
    padding: 0; /* 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;
    }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.text {
    font-size: var(--cms-font-size-base);
    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-muted-color);
}

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

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

    a {
        color: var(--cms-secondary-color);

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

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

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

main {
    grid-area: main;
}
    
section {
    position: relative;
    padding: var(--cms-spacing-xxl) 0;
}

section:nth-child(odd) {
    background-color: var(--cms-secondary-background-color);
}

section:nth-child(even) {
    background-color: var(--cms-primary-background-color);
}

aside {
    height: 100%;

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

    li {
        padding: 0.6em 0;
    }

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

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

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

.checkbox-wrapper {
    padding: 5px 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);
}

.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: 1em;
    line-height: 1.6;
}

.cms-editor-content h2, 
.cms-editor-content h3 {
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    font-weight: 600;
}

/* --- Listes --- */
.cms-list {
    margin-bottom: 1em;
    padding-left: 1.5em;
}

/* --- Bloc Média (Image/Video) --- */
.cms-block-media, 
.cms-block-media-full {
    margin: 2rem 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 #e0e0e0;
    padding: 5px;
    border-radius: 4px;
}

/* Option: Fond */
.cms-media-background {
    background-color: #f8f9fa; /* Gris clair */
    padding: 20px;
    text-align: center;
    border-radius: 8px;
}
/* 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: #666;
    margin-top: 0.5em;
    font-style: italic;
    text-align: center;
}

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

/* Option: Fond sur tout le bloc */
.cms-block-media-text.has-background {
    background-color: #f4f5f7;
    padding: 3rem 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: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

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

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

    /* 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: 8px;
    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);

    &: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: 4px;
}

/* --- Citation (Quote) --- */
.cms-block-quote {
    margin: 2rem auto;
    max-width: 800px;
    padding-left: 20px;
    border-left: 4px solid #333; /* Barre verticale */
}
.cms-block-quote blockquote {
    font-size: 1.25rem;
    font-style: italic;
    color: #333;
    margin: 0;
}
.cms-block-quote figcaption {
    margin-top: 10px;
    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-block-code {
    background-color: #2d2d2d;
    color: #f8f8f2;
    padding: 1.5rem;
    border-radius: 6px;
    overflow-x: auto;
    font-family: 'Fira Code', 'Consolas', monospace;
    margin: 2rem 0;
}

.cms-document-card {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 20px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background-color: #fff;
    text-decoration: none;
    color: #333;
    transition: all 0.2s;
}
.cms-document-card:hover {
    background-color: #f9f9f9;
    border-color: #bbb;
    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: #888;
    font-size: 0.85em;
}

.cms-delimiter {
    border: 0;
    border-top: 1px solid #ddd;
    margin: 3rem auto;
    width: 60%;
}

/* Citation */
.cms-block-quote {
    border-left: 4px solid #ccc;
    padding-left: 20px;
    margin: 2rem 0;
    font-style: italic;
}
.cms-block-quote.text-center {
    border-left: none;
    text-align: center;
}

/* Code */
.cms-block-code {
    background: #f4f4f4;
    padding: 15px;
    border-radius: 5px;
    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: #cecece;
    letter-spacing: 0.5em;
}

/* Wrapper pour scroller horizontalement sur mobile */
.cms-block-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 2rem 0;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
}

/* 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: 12px 15px;
    border-bottom: 1px solid #e0e0e0;
    text-align: left;
    vertical-align: top;
}

/* Style En-tête */
.cms-block-table thead tr {
    background-color: #f8f9fa;
    border-bottom: 2px solid #e0e0e0;
}

.cms-block-table th {
    font-weight: 600;
    color: #333;
}

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

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

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

/* Container */
.cms-block-icon-text {
    display: flex;
    gap: 15px;
    align-items: center;
}

/* Taille de l'icône (ajustable) */
.cms-block-icon-text .material-symbols-outlined {
    font-size: 32px;
    color: #333; /* Couleur primaire par défaut */
}

/* Layout Horizontal (Défaut) */
.cms-block-icon-text.layout-horizontal {
    flex-direction: row;
}

/* Layout Vertical (Colonne) */
.cms-block-icon-text.layout-vertical {
    flex-direction: column;
}

/* Centrage (souvent utilisé avec le mode vertical) */
.cms-block-icon-text.text-center {
    align-items: center;
    text-align: center;
}
.cms-block-icon-text.text-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: 15px;
        }
    }

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

        .media-part {
            margin-bottom: 15px;
        }
    }

    /* 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;
}

/* 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-xxl {
    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: 1100px;
}

.container-s {
    max-width: 640px;
}

.container-xxl {
    max-width: 1500px;
}

/* 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 {
        .material-symbols-outlined {
            color: var(--cms-secondary-color);
        }
    }

    /* 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;
    }

}

.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 */
#features {
    padding: 4rem 1rem;
    background-color: var(--cms-secondary-background-color);
    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-color);
            }
        }
    }
}

.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;
}
  
.card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    box-shadow: var(--cms-box-shadow);
    border-radius: var(--cms-border-radius);
    margin-top: var(--cms-margin-top);
    transition: transform .6s cubic-bezier(.34,1.56,.64,1);

    .card-image {
        overflow: hidden;
        border-radius: var(--cms-border-radius);

        img {
            object-fit: cover;
            transition: transform .35s;
            transition-timing-function: cubic-bezier(.4,0,.2,1);
    
            &:hover {
                transform: scale(1.03);
            }
        }
    }

    .card-content {
        padding: var(--cms-spacing-s);
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: var(--cms-spacing-m);;

        .description {
            flex: 1;
        }

        p, h3  {
            margin: 0;
        }
    }

    &:hover {
        transform: translateY(-6px);
    }
}

.card-thumbnail {
    width: 100%;
    display: flex;
    box-shadow: var(--cms-box-shadow);
    border-radius: var(--cms-border-radius);
    align-items: flex-start;
    margin-top: var(--cms-spacing-l);
    overflow: hidden; /* Assure que le contenu ne dépasse pas -> notamment pour l'image */

    .thumbnail-image {
        width: 30%;
    
        img {
            width: 100%;
            height: 280px;
            object-fit: cover;
            display: block;
        }
    }

    .thumbnail-content {
        flex: 1; /* Prend le reste de l'espace disponible */
        display: flex;
        flex-direction: column;
        align-items: start;
        align-self: center;
        padding: var(--cms-spacing-s);

        p {
            margin-top: 0;
        }
    }
}

.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);
                }

                .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ême radius que l'image */

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

        }

    }
}

#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;
    }
   
}

.items-per-page-count {
    color: var(--cms-muted-color);
    margin-bottom: var(--cms-spacing-xs);
}

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

.form-container {
    display: flex;
    flex-direction: column;
    gap: var(--cms-spacing-s);
    /*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-base) * 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-base) * 0.90);
    font-weight: 600;
    color: var(--cms-muted-color);
    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-h6);
    }
}

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

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

    padding-top: var(--cms-spacing-s);
}

.account-question-container {
    a {
        color: var(--cms-secondary-color);

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

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

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

/* Reset du fieldset */
fieldset.fieldset-card {
    background-color: var(--cms-primary-background-color);
    border: 1px solid var(--cms-border-color);
    border-radius: var(--cms-border-radius);
    box-shadow: var(--cms-box-shadow);
    margin-bottom: var(--cms-spacing-l);
    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-primary-50); 
        color: var(--cms-text-color);
        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 0 var(--cms-spacing-m) 0;
        border-bottom: 1px solid var(--cms-border-color); /* Séparation avec le contenu */
    }

    /* 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-top: 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-muted-color);
}

.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-accent-color);
}

/* ========================================================================== */
/* = ACCOUNT
/* ========================================================================== */

.cms-account-section {
    padding: var(--cms-spacing-xl) 0;
    background-color: var(--cms-secondary-background-color);
    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-primary-background-color);
                border-radius: var(--cms-border-radius);
                box-shadow: var(--cms-box-shadow);
                padding: var(--cms-spacing-l);
                border: 1px solid var(--cms-border-color);

                /* 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-color);

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

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

                /* Navigation Sidebar */
                .account-nav {
                    display: flex;
                    flex-direction: column;
                    gap: 5px;

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

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

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

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

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

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

            .cms-card {
                background: var(--cms-primary-background-color);
                border-radius: var(--cms-border-radius);
                box-shadow: var(--cms-box-shadow);
                padding: var(--cms-spacing-l);
                border: 1px solid var(--cms-border-color);

                .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-color);
                    margin: var(--cms-spacing-l) 0;
                }

                /* 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;
            }
        }
    }
}

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

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

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

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


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

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

/* 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-base);
    box-sizing: border-box;
}

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

/* --- 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-color-text);
}

/* --- Séparateur --- */
.cms-recap-box hr {
    border: none;
    border-top: 1px solid var(--cms-success-color-border);
    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);
    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-color-text); /* Vert foncé pour les labels */
    font-weight: 600;
}

.cms-recap-list li span {
    color: var(--cms-text-color); /* 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-color-border);
}

.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-primary-background-color); /* Fond blanc */
    color: var(--cms-text-color);
    border: 1px solid var(--cms-border-color);
    padding: var(--cms-spacing-xxs) var(--cms-spacing-xs);
    border-radius: calc(var(--cms-border-radius) / 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-primary-background-color);
    border: 1px solid var(--cms-success-color-border);
    border-radius: calc(var(--cms-border-radius) / 2);
    text-align: center;
    font-weight: bold;
    color: var(--cms-success-color);
}

/* --- 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) / 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);
    color: #fff;
    border-color: var(--cms-success-color);
}
.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-color-text);
    border-color: var(--cms-success-color-text);
}
.cms-recap-btn-outline:hover {
    background-color: var(--cms-success-color-text);
    color: var(--cms-success-color-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-color-text);
    opacity: 0.5;
    transition: opacity var(--cms-transition-base);
}
.cms-recap-close:hover {
    opacity: 1;
}

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

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

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

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

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

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

/* Search */
.search-bar-menu {
    display: flex;
    align-items: center;
}

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

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

.search-modal {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .9);
    z-index: 999;
    display: none;
}

.search-modal form {
    display: flex;
    flex-direction: column;
    place-self: center;
    width: 100%;
    max-width: 800px;
    height: 100%;
    gap: var(--cms-spacing-l);
    padding-top: var(--cms-spacing-xl);
}

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

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

.search-modal form 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);
}

.search-modal form input[type=search]:focus {
    outline: 0;
    border-bottom: 1px solid #fff;
}

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

.search-modal form button:hover {
    background-color: var(--cms-primary-200);
}


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

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

/* 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 {
        padding: var(--cms-spacing-l);
        height: 100%;
        display: flex;
        flex-direction: column;
        gap: var(--cms-spacing-s);

        /* HEADER */
        .dialog-header {
            all: unset;
            display: flex;
            align-items: center;
            gap: var(--cms-spacing-s);

            #dialog-title {
                margin: 0;
            }
        }

        /* BODY */
        .dialog-body {
            all: unset;
            text-align: center;
            flex: 1; /* prend l’espace restant */
        }

        /* FOOTER */
        .dialog-footer {
            all: unset;
            display: flex;
            gap: var(--cms-spacing-s);
            justify-content: center;

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

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

    /* 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 */
    }
}

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


.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 */
    color: var(--cms-danger-color-text);

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

    h2 {
        margin: 0;
        font-family: var(--cms-title-font);
        font-size: var(--cms-font-size-h4);
        color: var(--cms-danger-color-text); /* Texte rouge foncé */
    }
}

/* Message de confirmation */
.cms-modal-message {
    margin: var(--cms-spacing-l) 0;
    color: var(--cms-text-color); /* 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-color);
        border: 1px solid var(--cms-border-color);
        /* Effet hover doux */
        &:hover {
            background-color: var(--cms-primary-50);
        }
    }

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

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

footer {
    background-color: var(--cms-primary-color);
    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-light-color); 
}

.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-secondary-color); 
}

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

.pagination {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}

.pagination a {
    margin: 0 5px;
    padding: 5px 10px;
    text-decoration: none;
    background-color: #f1f1f1;
    border: 1px solid #ddd;
    color: #333;
    border-radius: 3px;
}

.pagination a.active {
    background-color: var(--cms-secondary-color);
    color: #fff;
}

.pagination a:hover {
    background-color: var(--cms-secondary-color);
    color: white;
}

/* ===================================================================== */
/* = 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: 0.6em var(--cms-spacing-s);
        border-radius: 5px;
        font-family: var(--cms-body-font);
        line-height: 1.2;
        font-size: 1rem;
        text-decoration: none;
        text-align: center;
        background-color: var(--cms-primary-color); /* 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: 5px;
    background-color: white;
    color: var(--cms-text-color);
    border-radius: var(--cms-border-radius);
    padding: var(--cms-spacing-xxs);

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

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

#custom-width-bar input {
    all: unset;
    font-size: var(--cms-font-size-base);
    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-color-background);
    color: var(--cms-info-color-text);
    font-size: var(--cms-font-size-base);
    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-primary-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-l);
    display: flex;
    flex-direction: column;
    gap: var(--cms-spacing-m);
    background-color: var(--cms--secondary-color-100-hwb);
    color: white;
    border-radius: var(--cms-border-radius);
    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);
        }

        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-primary-800);
        }
    }

    #notifications-container {
        z-index: 999;

        #notifications-badge {
            background-color: var(--cms-accent-color);
            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);
            font-weight: bold;
            box-shadow: var(--cms-box-shadow);

            .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: 5px;
            font-family: var(--cms-body-font);
            line-height: 1.2;
            font-size: 1rem;
            text-decoration: none;
            text-align: center;
            background-color: var(--cms-primary-color); /* 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-secondary-color);
            }

            span.text:not(.logout-button .material-symbols-outlined):not(.logout-button span.text) {
                color: var(--cms-primary-200);
            }

            &#logout-button {
                background-color: var(--cms-accent-color);

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

    button:not(.logout-button):hover {
        background-color: color-mix(in hsl, var(--cms-primary-900) 80%, gray 5%);
    }

    /* Animation bouton s'il y a des erreurs */
    #log-panel-button.has-new-errors {
        background-color: var(--cms-accent-color);
        animation: pulse 1s infinite;

        .material-symbols-outlined, .text {
            color: white;
        }

        &:hover {
            background-color: var(--cms-danger-color-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;
    }
}

#debug-mode {
    position: absolute;
    top: 0;
    z-index: 1000;
    background: var(--cms-warning-color-background);
    color: var(--cms-warning-color-text);
    border: 2px var(--cms-warning-color-border);
    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) {     

}

/* 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 nav #menu-1 button {
        display: flex;
    }

    header nav #menu-2 {
        display: none;
        max-width: 356px;
        width: 100%;
        position: fixed;
        top: 0;
        right: 0;
        height: 100%;
        overflow: auto;
        z-index: 9999;
    }

    header nav span { 
        font-size: 2.3rem;
    }

    .search-modal form {
        max-width: 80%;
    }

    header nav #menu-2 .menu-content {
        flex-direction: column;
    }

    header .menu-content ul {
        flex-direction: column;
        padding: var(--cms-spacing-l);
        border-top: 1px solid var(--cms-muted-color);
        border-bottom: 1px solid var(--cms-muted-color);
    }

    #menu-2 .search-bar-menu, .separator {
        display: none;
    }

    #menu-2 .cross-icon {
        margin-bottom: var(--cms-spacing-s);
        align-self: self-end;
    }

    #burger-cross-icon {
        display: block;
    }

    input, textarea {
        max-width: 100%;
    }

}

/* 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;
    }
}

/* 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;
        }
    }

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

}

/* Style spécifique pour l'impression */
@media print {

    /* Cacher les éléments non nécessaires pour l'impression */
    header nav #menu-1 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.5;
    }

    /* 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;

    }

}