/**
 * FETCOM - FEUILLE DE STYLE GLOBALE
 * Variable CSS, Reset, Utilitaires
 */

/* Importation des polices GOOGLE FONTS */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* VARIABLES CSS */

:root {
    /* Couleurs principales */
    --couleur-fond:#0E0E11;
    --couleur-accent:#8B1E3F;
    --couleur-texte:#E6E6E6;
    --couleur-luxe:#B08D57;

    /* Couleurs secondaires */
    --couleur-fond-secondaire:#1A1A1F;
    --couleur-fond-tertiaire:#26262E;
    --couleur-bordure:#3A3A45;
    --couleur-texte-secondaire:#A0A0A8;
    --couleur-texte-tertiaire:#6B6B73;

    /* Couleur états */
    --couleur-succes:#27AE60;
    --couleur-erreur:#E74C3C;
    --couleur-avertissement:#F39C12;
    --couleur-info:#3498DB;

    /* Couleur boutons */
    --couleur-bouton-primaire:var(--couleur-accent);
    --couleur-bouton-primaire-hover:#A02347;
    --couleur-bouton-secondaire:var(--couleur-luxe);
    --couleur-bouton-secondaire-hover:#C99D61;

    /* Typographie */
    --police-titres:'Playfair Display', serif;
    --police-texte:'Inter', sans-serif;

    /* Tailles de police */
    --taille-h1:48px;
    --taille-h2:36px;
    --taille-h3:28px;
    --taille-h4:24px;
    --taille-h5:20px;
    --taille-h6:18px;
    --taille-texte:16px;
    --taille-texte-petit:14px;
    --taille-texte-tres-petit:12px;

    /* Espacements */
    --espacement-xs:4px;
    --espacement-sm:8px;
    --espacement-md:16px;
    --espacement-lg:24px;
    --espacement-xl:32px;
    --espacement-xxl:48px;
    --espacement-xxxl:64px;

    /* Bordures */
    --rayon-bordure-petit:4px;
    --rayon-bordure-moyen:8px;
    --rayon-bordure-grand:12px;
    --rayon-bordure-rond:50%;

    /* Ombres */
    --ombre-petite:0 2px 4px rgba(0, 0, 0, 0.2);
    --ombre-moyenne:0 4px 8px rgba(0, 0, 0, 0.3);
    --ombre-grande:0 8px 16px rgba(0, 0, 0, 0.4);
    --ombre-elevation:0 12px 24px rgba(0, 0, 0, 0.5);

    /* Transition */
    --transition-rapide:0.15s ease;
    --transition-normale:0.3s ease;
    --transition-lente:0.5s ease;

    /* Largeurs conteneur */
    --largeur-max-contenu:1200px;
    --largeur-max-texte:800px;

    /* Z-index */
    --z-index-dropdown:1000;
    --z-index-modal:2000;
    --z-index-tooltip:3000;
    --z-index-notification:4000;

    /* Breakpoints (pour référence JS) */
    --breakpoint-mobile:768px;
    --breakpoint-tablette:1024px;
    --breakpoint-desktop:1440px;
}

/* RESET CSS */

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

/* Document */
html {
    line-height:1.6;
    -webkit-text-size-adjust:100%;
    -moz-tab-size:4;
    tab-size:4;
    scroll-behavior:smooth;
}

body {
    margin:0;
    font-family:var(--police-texte);
    font-size:var(--taille-texte);
    color:var(--couleur-texte);
    background-color:var(--couleur-fond);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

/* Typographie */
h1, h2, h3, h4, h5, h6 {
    font-family:var(--police-titres);
    font-weight:700;
    line-height:1.2;
    margin-bottom:var(--espacement-md);
    color:var(--couleur-texte);
}

h1 {
    font-size:var(--taille-h1);
}

h2 {
    font-size:var(--taille-h2);
}

h3 {
    font-size:var(--taille-h3);
}

h4 {
    font-size:var(--taille-h4);
}

h5 {
    font-size:var(--taille-h5);
}

h6 {
    font-size:var(--taille-h6);
}

p {
    margin-bottom:var(--espacement-md);
}

a {
    color:var(--couleur-accent);
    text-decoration:none;
    transition:color var(--transition-normale);
}

/* Listes */
ul, ol {
    list-style:none;
}

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

/* Formulaires */
button,
input, 
textarea,
select {
    font-family:inherit;
    font-size:inherit;
    line-height:inherit;
    color:inherit;
}

button {
    cursor:pointer;
    border:none;
    background:none;
}

input, 
textarea,
select {
    width:100%;
    outline:none;
}

/* Supprimer les spinners des inputs number */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance:none;
    appearance:none;
    margin:0;
}

input[type="number"] {
    -moz-appearance:textfield;
    appearance:textfield;
}

/* Classes Utilitaires */
.conteneur {
    width:100%;
    max-width:var(--largeur-max-contenu);
    margin:0 auto;
    padding:0 var(--espacement-lg);
}

.conteneur-fluide {
    width:100%;
    padding:0 var(--espacement-lg);
}

/* Flexbox */
.flex {
    display:flex;
}

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

.flex-centre {
    display:flex;
    justify-content:center;
    align-items:center;
}

.flex-entre {
    display:flex;
    justify-content:space-between;
    align-items:center;
}

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

/* Grid */
.grille {
    display:grid;
}

.grille-2 {
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:var(--espacement-lg);
}

.grille-3 {
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:var(--espacement-lg);
}

.grille-4 {
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:var(--espacement-lg);
}

/* Espacements */ 
.mt-0 {
    margin-top:0;
}

.mt-sm {
    margin-top:var(--espacement-sm);
}

.mt-md {
    margin-top:var(--espacement-md);
}

.mt-lg {
    margin-top:var(--espacement-lg);
}

.mt-xl {
    margin-top:var(--espacement-xl);
}

.mb-0 {
    margin-bottom:0;
}

.mb-sm {
    margin-bottom:var(--espacement-sm);
}

.mb-md {
    margin-bottom:var(--espacement-md);
}

.mb-lg {
    margin-bottom:var(--espacement-lg);
}

.mb-xl {
    margin-bottom:var(--espacement-xl);
}

.p-0 {
    padding:0;
}

.p-sm {
    padding:var(--espacement-sm);
}

.p-md {
    padding:var(--espacement-md);
}

.p-lg {
    padding:var(--espacement-lg);
}

.p-xl {
    padding:var(--espacement-xl);
}

/* Texte */ 
.texte-centre {
    text-align:center;
}

.texte-gauche {
    text-align:left;
}

.text-droite {
    text-align:right;
}

.text-gras {
    font-weight:700;
}

.texte-leger {
    font-weight:300;
}

.texte-primaire {
    color:var(--couleur-accent);
}

.texte-secondaire {
    color:var(--couleur-texte-secondaire);
}

.texte-luxe {
    color:var(--couleur-luxe);
}

/* Boutons */
.bouton {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:var(--espacement-sm);
    padding:var(--espacement-md) var(--espacement-xl);
    font-family:var(--police-texte);
    font-size:var(--taille-texte);
    font-weight:600;
    border-radius:var(--rayon-bordure-moyen);
    transition:all var(--transition-normale);
    cursor:pointer;
    border:none;
    text-decoration:none;
}

.bouton-primaire {
    background:var(--couleur-bouton-primaire);
    color:var(--couleur-texte);
}

.bouton-primaire:hover {
    background:var(--couleur-bouton-primaire-hover);
    transform:translateY(-2px);
    box-shadow:var(--ombre-moyenne);
}

.bouton-secondaire {
    background:var(--couleur-bouton-secondaire);
    color:var(--couleur-fond);
}

.bouton-secondaire:hover {
    background:var(--couleur-bouton-secondaire-hover);
    transform:translateY(-2px);
    box-shadow:var(--ombre-moyenne);
}

.bouton-outline {
    background:transparent;
    border:2px solid var(--couleur-accent);
}

.bouton-outline:hover {
    background:var(--couleur-erreur);
    color:var(--couleur-texte);
}

.bouton-petit {
    padding:var(--espacement-sm) var(--espacement-md);
    font-size:var(--taille-texte-petit);
}

.bouton-grand {
    padding:var(--espacement-lg) var(--espacement-xxl);
    font-size:18px;
}

/* Formulaires personnalisés */

/* Input de base */
.champ-texte,
.champ-email,
.champ-mot-de-passe,
.champ-nombre,
.champ-zone-texte {
    width:100%;
    padding:var(--espacement-md);
    background:var(--couleur-fond-secondaire);
    border:2px solid var(--couleur-bordure);
    border-radius:var(--rayon-bordure-moyen);
    color:var(--couleur-texte);
    font-family:var(--police-texte);
    font-size:var(--taille-texte);
    transition:all var(--transition-normale);
}

.champ-texte:focus,
.champ-email:focus,
.champ-mot-de-passe:focus,
.champ-nombre:focus,
.champ-zone-texte:focus {
    border-color:var(--couleur-accent);
    box-shadow:0 0 0 3px rgba(139, 30, 63, 0.1);
}

.champ-texte::placeholder,
.champ-email::placeholder,
.champ-mot-de-passe::placeholder,
.champ-zone-texte::placeholder {
    color:var(--couleur-texte-tertiaire);
}

/* Zone de texte (textarea ) */
.champ-zone-texte {
    resize:vertical;
    min-height:120px;
}

/* Labels */
.label-champ {
    display:block;
    margin-bottom:var(--espacement-sm);
    font-weight:600;
    color:var(--couleur-texte);
    font-size:var(--taille-texte-petit);
}

/* Messages d'erreur */
.message-erreur {
    display:block;
    margin-top:var(--espacement-sm);
    color:var(--couleur-erreur);
    font-size:var(--taille-texte-petit);
}

/* Champ invalide */
.champ-invalide {
    border-color:var(--couleur-erreur);
}

.champ-invalide:focus {
    box-shadow:0 0 0 3px rgba(231, 76, 60, 0.1);
}

/* Select personnalisé */
.select-personnalise {
    position:relative;
    width:100%;
}

.select-personnalise select {
    width:100%;
    padding:var(--espacement-md);
    padding-right:var(--espacement-xxl);
    background:var(--couleur-fond-secondaire);
    border:2px solid var(--couleur-bordure);
    border-radius:var(--rayon-bordure-moyen);
    color:var(--couleur-texte);
    font-family:var(--police-texte);
    font-size:var(--taille-texte);
    cursor:pointer;
    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;
    transition:all var(--transition-normale);
}

.select-personnalise select:focus {
    border-color:var(--couleur-accent);
    box-shadow:0 0 0 3px rgba(139, 30, 63, 0.1);
    outline:none;
}

/* Icône flèche personnalisée */
.select-personnalise::after {
    content:'\f107';
    font-family:'Font Awesome 6 Free';
    font-weight:900;
    position:absolute;
    right:var(--espacement-md);
    top:50%;
    transform:translateY(-50%);
    color:var(--couleur-accent);
    pointer-events:none;
    transition:transform var(--transition-normale);
}

.select-personnalise select:focus ~ .select-personnalise::after,
.select-personnalise:has(select:focus)::after {
    transform:translateY(-50%) rotate(180deg);
}

/* Options */
.select-personnalise select option {
    background:var(--couleur-fond-secondaire);
    color:var(--couleur-texte);
    padding:var(--espacement-md);
}

.select-personnalise select option:checked,
.select-personnalise select option:hover {
    background:var(--couleur-accent);
    color:var(--couleur-texte);
}

/* Dropdown personnalisé */
.dropdown {
    position:relative;
    display:inline-block;
}

.dropdown-bouton {
    display:inline-flex;
    align-items:center;
    gap:var(--espacement-sm);
    padding:var(--espacement-md) var(--espacement-lg);
    background:var(--couleur-fond-secondaire);
    border:2px solid var(--couleur-bordure);
    border-radius:var(--rayon-bordure-moyen);
    color:var(--couleur-texte);
    font-family:var(--police-texte);
    font-size:var(--taille-texte);
    cursor:pointer;
    transition:all var(--transition-normale);
}

.dropdown-bouton:hover {
    border-color:var(--couleur-accent);
    background:var(--couleur-fond-tertiaire);
}

.dropdown-bouton i {
    transition:transform var(--transition-normale);
}

.dropdown.ouvert .dropdown-bouton i {
    transform:rotate(180deg);
}

.dropdown-menu {
    position:absolute;
    top:calc(100% + var(--espacement-sm));
    left:0;
    min-width:200px;
    background:var(--couleur-fond-secondaire);
    border:2px solid var(--couleur-bordure);
    border-radius:var(--rayon-bordure-moyen);
    box-shadow:var(--ombre-grande);
    opacity:0;
    visibility:hidden;
    transform:translateY(-10px);
    transition:all var(--transition-normale);
    z-index:var(--z-index-dropdown);
}

.dropdown.ouvert .dropdown-menu {
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.dropdown-item {
    display:flex;
    align-items:center;
    gap:var(--espacement-sm);
    padding:var(--espacement-md);
    color:var(--couleur-texte);
    text-decoration:none;
    transition:all var(--transition-rapide);
    cursor:pointer;
}

.dropdown-item:hover {
    background:var(--couleur-accent);
    color:var(--couleur-texte);
}

.dropdown-item:first-child {
    border-radius:var(--rayon-bordure-moyen) var(--rayon-bordure-moyen) 0 0;
}

.dropdown-item:last-child {
    border-radius:0 0 var(--rayon-bordure-moyen) var(--rayon-bordure-moyen);
}

.dropdown-separateur {
    height:1px;
    background:var(--couleur-bordure);
    margin:var(--espacement-sm) 0;
}

/* Datepicker */
.datepicker-contenur {
    position:relative;
    width:100%;
}

.datepicker-input {
    width:100%;
    padding:var(--espacement-md);
    padding-right:var(--espacement-xxl);
    background:var(--couleur-fond-secondaire);
    border:2px solid var(--couleur-bordure);
    border-radius:var(--rayon-bordure-moyen);
    color:var(--couleur-texte);
    font-family:var(--police-texte);
    font-size:var(--taille-texte);
    cursor:pointer;
    transition:all var(--transition-normale);
}

.datepicker-input:focus {
    border-color:var(--couleur-accent);
    box-shadow:0 0 0 3px rgba(139, 30, 63, 0.1);
    outline:none;
}

/* Icône calendrier */
.datepicker-conteneur::after {
    content:'\f073';
    font-family:'Font Awesome 6 Free';
    font-weight:900;
    position:absolute;
    right:var(--espacement-md);
    top:50%;
    transform:translateY(-50%);
    color:var(--couleur-accent);
    pointer-events:none;
}


.datepicker-dropdown {
    position:absolute;
    top:calc(100% + var(--espacement-sm));
    left:0;
    width:320px;
    background:var(--couleur-fond-secondaire);
    border:2px solid var(--couleur-bordure);
    border-radius:var(--rayon-bordure-moyen);
    box-shadow:var(--ombre-grande);
    padding:var(--espacement-md);
    opacity:0;
    visibility:hidden;
    transform:translateY(-10px);
    transition:all var(--transition-normale);
    z-index:var(--z-index-dropdown);
}

.datepicker-dropdown.ouvert {
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.datepicker-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:var(--espacement-md);
}

.datepicker-bouton-nav {
    width:32px;
    height:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--couleur-fond-tertiaire);
    border-radius:var(--rayon-bordure-petit);
    color:var(--couleur-accent);
    cursor:pointer;
    transition:all var(--transition-rapide);
}

.datepicker-bouton-nav:hover {
    background:var(--couleur-accent);
    color:var(--couleur-texte);
}

.datepicker-mois-annee {
    font-weight:600;
    color:var(--couleur-texte);
}

.datepicker-jours-semaine {
    display:grid;
    grid-template-columns:repeat(7, 1fr);
    gap:var(--espacement-xs);
    margin-bottom:var(--espacement-sm);
}

.datepicker-jour-semaine {
    text-align:center;
    font-size:var(--taille-texte-tres-petit);
    font-weight:600;
    color:var(--couleur-texte-secondaire);
    padding:var(--espacement-sm);
}

.datepicker-jours {
    display:grid;
    grid-template-columns:repeat(7, 1fr);
    gap:var(--espacement-xs);
}

.datepicker-jour {
    aspect-ratio:1;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:var(--rayon-bordure-petit);
    font-size:var(--taille-texte-petit);
    cursor:pointer;
    transition:all var(--transition-rapide);
}

.datepicker-jour:hover {
    background:var(--couleur-fond-tertiaire);
}

.datepicker-jour.autre-mois {
    color:var(--couleur-texte-tertiaire);
}

.datepicker-jour.aujourdhui {
    border:2px solid var(--couleur-accent);
}

.datepicker-jour.selectionne {
    background:var(--couleur-accent);
    color:var(--couleur-texte);
}

.datepicker-jour.desactive {
    opacity:0.3;
    cursor:not-allowed;
}


/* MODAL PERSONNALISÉE */

.modal-overlay {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(14, 14, 17, 0.9);
    backdrop-filter:blur(8px);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:var(--espacement-lg);
    opacity:0;
    visibility:hidden;
    transition:all var(--transition-normale);
    z-index:var(--z-index-modal);
}

.modal-overlay.ouvert {
    opacity:1;
    visibility:visible;
}

.modal-conteneur {
    position:relative;
    width:100%;
    max-width:600px;
    max-height:90vh;
    background:var(--couleur-fond-secondaire);
    border-radius:var(--rayon-bordure-grand);
    box-shadow:var(--ombre-elevation);
    overflow:hidden;
    transform:scale(0.9);
    transition:transform var(--transition-normale);
}

.modal-overlay.ouvert .modal-conteneur {
    transform:scale(1);
}

.modal-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:var(--espacement-lg);
    border-bottom:2px solid var(--couleur-bordure);
}

.modal-titre {
    font-family:var(--police-titres);
    font-size:var(--taille-h4);
    font-weight:700;
    color:var(--couleur-texte);
    margin:0;
}

.modal-bouton-fermer {
    width:40px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--couleur-fond-tertiaire);
    border-radius:var(--rayon-bordure-moyen);
    color:var(--couleur-texte);
    font-size:20px;
    cursor:pointer;
    transition:all var(--transition-rapide);
}

.modal-bouton-fermer:hover {
    background:var(--couleur-erreur);
    color:var(--couleur-texte);
}

.modal-body {
    padding:var(--espacement-lg);
    max-height:calc(90vh - 160px);
    overflow-y:auto;
}

.modal-footer {
    display:flex;
    justify-content:flex-end;
    gap:var(--espacement-md);
    padding:var(--espacement-lg);
    border-top:2px solid var(--couleur-bordure);
}

/* Modal petite */
.modal-conteneur.modal-petite {
    max-width:400px;
}

/* Modal grande */
.modal-conteneur.modal-grande {
    max-width:900px;
}

/* Modal plein écran (mobile) */
@media (max-width:767px) {
    .modal-conteneur {
        max-width:100%;
        max-height:100vh;
        border-radius:0;
    }
    
    .modal-body {
        max-height:calc(100vh - 160px);
    }
}


/* CHECKBOX ET RADIO PERSONNALISÉS*/

.checkbox-personnalise,
.radio-personnalise {
    display:flex;
    align-items:center;
    gap:var(--espacement-sm);
    cursor:pointer;
    user-select:none;
}

.checkbox-personnalise input[type="checkbox"],
.radio-personnalise input[type="radio"] {
    position:absolute;
    opacity:0;
    width:0;
    height:0;
}

.checkbox-indicateur,
.radio-indicateur {
    position:relative;
    width:20px;
    height:20px;
    background:var(--couleur-fond-secondaire);
    border:2px solid var(--couleur-bordure);
    transition:all var(--transition-rapide);
}

.checkbox-indicateur {
    border-radius:var(--rayon-bordure-petit);
}

.radio-indicateur {
    border-radius:var(--rayon-bordure-rond);
}

.checkbox-personnalise input:checked ~ .checkbox-indicateur,
.radio-personnalise input:checked ~ .radio-indicateur {
    background:var(--couleur-accent);
    border-color:var(--couleur-accent);
}

.checkbox-personnalise input:focus ~ .checkbox-indicateur,
.radio-personnalise input:focus ~ .radio-indicateur {
    box-shadow:0 0 0 3px rgba(139, 30, 63, 0.1);
}

/* Coche pour checkbox */
.checkbox-indicateur::after {
    content:'';
    position:absolute;
    display:none;
    left:5px;
    top:2px;
    width:5px;
    height:10px;
    border:solid var(--couleur-texte);
    border-width:0 2px 2px 0;
    transform:rotate(45deg);
}

.checkbox-personnalise input:checked ~ .checkbox-indicateur::after {
    display:block;
}

/* Point pour radio */
.radio-indicateur::after {
    content:'';
    position:absolute;
    display:none;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
    width:8px;
    height:8px;
    background:var(--couleur-texte);
    border-radius:var(--rayon-bordure-rond);
}

.radio-personnalise input:checked ~ .radio-indicateur::after {
    display:block;
}

.checkbox-label,
.radio-label {
    color:var(--couleur-texte);
    font-size:var(--taille-texte);
}


/* SWITCH (TOGGLE) PERSONNALISÉ */

.switch {
    display:flex;
    align-items:center;
    gap:var(--espacement-md);
    cursor:pointer;
    user-select:none;
}

.switch input[type="checkbox"] {
    position:absolute;
    opacity:0;
    width:0;
    height:0;
}

.switch-slider {
    position:relative;
    width:52px;
    height:28px;
    background:var(--couleur-fond-tertiaire);
    border-radius:28px;
    transition:all var(--transition-normale);
}

.switch input:checked ~ .switch-slider {
    background:var(--couleur-accent);
}

.switch-slider::before {
    content:'';
    position:absolute;
    width:20px;
    height:20px;
    left:4px;
    top:4px;
    background:var(--couleur-texte);
    border-radius:50%;
    transition:all var(--transition-normale);
}

.switch input:checked ~ .switch-slider::before {
    transform:translateX(24px);
}

.switch input:focus ~ .switch-slider {
    box-shadow:0 0 0 3px rgba(139, 30, 63, 0.1);
}

.switch-label {
    color:var(--couleur-texte);
    font-size:var(--taille-texte);
}

/* Cartes */
.carte {
    background:var(--couleur-fond-secondaire);
    border-radius:var(--rayon-bordure-moyen);
    padding:var(--espacement-lg);
    box-shadow:var(--ombre-petite);
    transition:all var(--transition-normale);
}

.carte:hover {
    box-shadow:var(--ombre-moyenne);
    transform:translateY(-4px);
}

/* Badges */
.badge {
    display:inline-flex;
    align-items:center;
    padding:var(--espacement-xs) var(--espacement-sm);
    font-size:var(--taille-texte-tres-petit);
    font-weight:600;
    border-radius:var(--rayon-bordure-petit);
    background:var(--couleur-fond-tertiaire);
    color:var(--couleur-texte);
}

.badge-primaire {
    background:var(--couleur-accent);
}

.badge-luxe {
    background:var(--couleur-luxe);
    color:var(--couleur-fond);
}

.badge-succes {
    background:var(--couleur-succes);
}

/* Visibilité */
.cache {
    display:none !important;
}

.visible {
    display:block !important;
}

/* Responsive */ 
.cache-mobile {
    display:none;
}

/* Responsive Mobile First */
@media (min-width:768px) {
    :root {
        --taille-h1:56px;
        --taille-h2:42px;
        --taille-h3:32px;
    }

    .cache-mobile {
        display:block;
    }

    .visible-mobile {
        display:none;
    }

    .grille-2,
    .grille-3,
    .grille-4 {
        gap:var(--espacement-xl);
    }
}

@media (max-width:767px) {
    .grille-2,
    .grille-3,
    .grille-4 {
        grid-template-columns:1fr;
    }
}

/* SCROLLBAR PERSONNALISÉE */
::-webkit-scrollbar {
    width:12px;
}

::-webkit-scrollbar-track {
    background:var(--couleur-fond-secondaire);
}

::-webkit-scrollbar-thumb {
    background:var(--couleur-accent);
    border-radius:var(--rayon-bordure-moyen);
}

::-webkit-scrollbar-thumb:hover {
    background:var(--couleur-bouton-primaire-hover);
}

/* SÉLECTION DE TEXTE */
::selection {
    background:var(--couleur-accent);
    color:var(--couleur-texte);
}

::-moz-selection {
    background:var(--couleur-accent);
    color:var(--couleur-texte);
}

/* ANIMATION GLOBALES */
@keyframes fadeIn {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}

@keyframes slideInUp {
    from {
        transform:translateY(30px);
        opacity:0;
    }
    to {
        transform:translateY(0);
        opacity:1;
    }
}

@keyframes slideInDown {
    from {
        transform:translateY(-30px);
        opacity:0;
    }
    to {
        transform:translateY(0);
        opacity:1;
    }
}

@keyframes pulse {
    0%, 100% {
        opacity:1;
    }
    50% {
        opacity:0.5;
    }
}

.animation-fadeIn {
    animation:fadeIn var(--transition-normale);
}

.animation-slideInUp {
    animation:slideInUp var(--transition-normale);
}

.animation-slideInDown {
    animation:slideInDown var(--transition-normale);
}

/* ACCESSIBILITÉ */
*:focus-visible {
    outline:2px solid var(--couleur-accent);
    outline-offset:2px;
}

/* Cacher visuellement maois garder accessible aux lecteurs d'écran */
.sr-only {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0, 0, 0, 0);
    white-space:nowrap;
    border-width:0;
}

/* Réduire les animations pour les utilisateurs qui préfèrent moins de mouvement */
@media (prefers-reduced-motion:reduce) {
    *,
    *::before,
    *::after {
        animation-duration:0.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:0.01ms !important;
        scroll-behavior:auto !important;
    }
}