/* ============================================================
   DECOTISSU - CSS SEUL
   Menu gauche avec bouton apparent
   Logo haut droite sans voiture
   Suppression des ombres
   ============================================================ */

/* Couleurs principales */
html,
body {
    margin: 0;
    padding: 0;
    opacity: 0 !important;
    color: #4a3021;
    font-family: Georgia, "Times New Roman", serif;
}

/* Suppression globale des ombres */
* {
    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;
}

/* Fond général transparent */
#container,
#header,
#content,
#footer,
.gutter {
    background: transparent !important;
    background-image: none !important;
}

/* ============================================================
   HEADER
   ============================================================ */

#header {
    min-height: 95px;
    padding: 35px 320px 25px 55px;
    border-bottom: 1px solid #c8a878;
    box-sizing: border-box;
}

/* Remplacement du titre Headline */
#header h1 {
    margin: 0;
    padding: 0;
    color: transparent;
    font-size: 0;
    line-height: 1.1;
}

#header h1:before {
    content: "Déco Création Tissus";
    display: block;
    color: #9d3b2f;
    font-size: 34px;
    font-weight: normal;
    letter-spacing: 1px;
}

/* Masque l'image header.jpg, donc plus de voiture */
#header img {
    display: none !important;
}

/* ============================================================
   LOGO HAUT DROITE SANS VOITURE
   ============================================================ */

#header:after {
    content: "Déco Création\A tissus et ouvrages uniques";
    white-space: pre;
    position: fixed;
    top: 18px;
    right: 24px;
    z-index: 10000;
    width: 235px;
    padding: 13px 15px 12px 15px;
    box-sizing: border-box;
    background: #f3e6d2;
    border: 1px solid #c8a878;
    color: #9d3b2f;
    text-align: center;
    font-size: 22px;
    line-height: 1.16;
    font-family: Georgia, "Times New Roman", serif;
}

/* ============================================================
   TEXTES NOIRS -> BLANCS
   Les textes déjà colorés restent colorés
   ============================================================ */

/* Couleur générale du site : blanc */
body,
#container,
#header,
#content,
#footer,
.gutter {
    color: #ffffff !important;
}

/* Textes classiques héritant du noir */
#content,
#content p,
#content div,
#content section,
#content article,
#content h1,
#content h2,
#content h3,
#content h4,
#content h5,
#content h6,
#content li,
#content td,
#content th,
#content label,
#content strong,
#content em,
#footer,
#footer p,
#footer div,
#footer li {
    color: #ffffff;
}

/* Liens non colorés : blancs */
#content a:not([style*="color"]),
#footer a:not([style*="color"]) {
    color: #ffffff;
}

/* Liens au survol */
#content a:not([style*="color"]):hover,
#footer a:not([style*="color"]):hover {
    color: #ffffff;
    text-decoration: underline;
}

/* Si Jimdo a enregistré du noir en style direct */
[style*="color: black"],
[style*="color:black"],
[style*="color: #000"],
[style*="color:#000"],
[style*="color: #000000"],
[style*="color:#000000"],
[style*="color: rgb(0, 0, 0)"],
[style*="color:rgb(0, 0, 0)"] {
    color: #ffffff !important;
}

/* Les textes colorés directement dans Jimdo restent colorés */
[style*="color: red"],
[style*="color:red"],
[style*="color: blue"],
[style*="color:blue"],
[style*="color: green"],
[style*="color:green"],
[style*="color: orange"],
[style*="color:orange"],
[style*="color: purple"],
[style*="color:purple"],
[style*="color: #"],
[style*="color:#"],
[style*="color: rgb"] {
    color: inherit;
}

/* Exception : si la couleur directe est noire, elle redevient blanche */
[style*="color: #000"],
[style*="color:#000"],
[style*="color: #000000"],
[style*="color:#000000"],
[style*="color: black"],
[style*="color:black"],
[style*="color: rgb(0, 0, 0)"],
[style*="color:rgb(0, 0, 0)"] {
    color: #ffffff !important;
}

/* ============================================================
   MENU FERMÉ : CACHER LE TEXTE À L'INTÉRIEUR
   ============================================================ */

/* Quand le menu est fermé, on cache tout son contenu */
#navigation:not(:hover):not(:focus-within) ul,
#navigation:not(:hover):not(:focus-within) li,
#navigation:not(:hover):not(:focus-within) a,
#navigation:not(:hover):not(:focus-within) #sidebar {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* On cache aussi le titre "Menu" généré en CSS */
#navigation:not(:hover):not(:focus-within) > ul:first-of-type:before {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* On peut aussi cacher la bordure couture quand le menu est fermé */
#navigation:not(:hover):not(:focus-within):after {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Quand le menu s'ouvre, le texte réapparaît */
#navigation:hover ul,
#navigation:hover li,
#navigation:hover a,
#navigation:hover #sidebar,
#navigation:focus-within ul,
#navigation:focus-within li,
#navigation:focus-within a,
#navigation:focus-within #sidebar {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Le titre Menu réapparaît à l'ouverture */
#navigation:hover > ul:first-of-type:before,
#navigation:focus-within > ul:first-of-type:before {
    opacity: 1 !important;
    visibility: visible !important;
}

/* La bordure interne réapparaît à l'ouverture */
#navigation:hover:after,
#navigation:focus-within:after {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Transition douce du contenu */
#navigation ul,
#navigation li,
#navigation a,
#sidebar,
#navigation > ul:first-of-type:before,
#navigation:after {
    transition: opacity 0.12s ease-out, visibility 0.12s ease-out !important;
}
/* Sous-texte simulé par couleur générale impossible en double couleur,
   donc on garde un logo propre et simple. */

/* ============================================================
   MENU LATÉRAL GAUCHE
   ============================================================ */

#navigation {
    position: fixed;
    top: 0;
    left: -285px;
    z-index: 9999;
    width: 285px;
    height: 100vh;
    padding: 95px 22px 28px 22px;
    box-sizing: border-box;
    overflow-y: auto;
    background: #f3e6d2 !important;
    background-image: none !important;
    border-right: 1px solid #c8a878;
    transition: left 0.28s ease;
}

/* Apparition au survol */
#navigation:hover,
#navigation:focus-within {
    left: 0;
}

/* Bouton apparent à gauche */
#navigation:before {
    content: "☰";
    position: fixed;
    top: 22px;
    left: 18px;
    z-index: 10001;
    width: 52px;
    height: 52px;
    display: block;
    background: #f3e6d2;
    border: 1px solid #c8a878;
    border-radius: 50%;
    color: #4a3021;
    font-size: 28px;
    line-height: 50px;
    text-align: center;
    cursor: pointer;
    box-sizing: border-box;
}

/* Quand le menu est ouvert, le bouton suit le menu */
#navigation:hover:before,
#navigation:focus-within:before {
    left: 303px;
    content: "×";
    color: #9d3b2f;
}

/* Effet couture autour du menu */
#navigation:after {
    content: "";
    position: absolute;
    top: 6px;
    right: 6px;
    bottom: 6px;
    left: 6px;
    border: 1px dashed rgba(122, 86, 56, 0.45);
    pointer-events: none;
}

/* Titre Menu */
#navigation > ul:first-of-type:before {
    content: "Menu";
    display: block;
    margin-bottom: 18px;
    padding-bottom: 13px;
    border-bottom: 1px solid #c8a878;
    color: #9d3b2f;
    font-size: 22px;
    line-height: 1.1;
}

/* Navigation générée automatiquement par Jimdo */
#navigation ul {
    position: relative;
    z-index: 2;
    margin: 0;
    padding: 0;
    list-style: none;
}

#navigation li {
    margin: 0;
    padding: 0;
    list-style: none;
}

#navigation a {
    display: block;
    margin-bottom: 5px;
    padding: 11px 12px;
    border-left: 3px solid transparent;
    color: #4a3021;
    background: transparent;
    font-size: 16px;
    line-height: 1.25;
    text-decoration: none;
}

#navigation a:hover,
#navigation a:focus,
#navigation .current a,
#navigation .active a,
#navigation .cc-nav-current a {
    background: #ead6b9;
    border-left-color: #9d3b2f;
    color: #9d3b2f;
}

/* Sous-menus */
#navigation ul ul {
    margin-left: 10px;
    margin-top: 4px;
    margin-bottom: 8px;
}

#navigation ul ul a {
    font-size: 14px;
    padding-top: 8px;
    padding-bottom: 8px;
}

/* Sidebar dans le menu */
#sidebar {
    position: relative;
    z-index: 2;
    margin-top: 25px;
    padding-top: 18px;
    border-top: 1px solid #c8a878;
    color: #7a5638;
}

/* ============================================================
   CONTENU
   ============================================================ */

#content {
    max-width: 1050px;
    margin: 0 auto;
    padding: 35px 45px 60px 45px;
    box-sizing: border-box;
}

#content img {
    box-shadow: none !important;
    filter: none !important;
}

/* Footer */
#footer {
    border-top: 1px solid #c8a878;
    color: #7a5638;
}

#footer .gutter {
    max-width: 1050px;
    margin: 0 auto;
    padding: 25px 45px;
}

/* ============================================================
   MOBILE
   ============================================================ */

@media screen and (max-width: 760px) {
    #header {
        min-height: 88px;
        padding: 88px 22px 22px 22px;
    }

    #header h1:before {
        font-size: 25px;
    }

    #header:after {
        top: 14px;
        right: 12px;
        width: 190px;
        padding: 10px 12px;
        font-size: 18px;
    }

    #navigation {
        left: -82vw;
        width: 82vw;
        padding-top: 85px;
    }

    #navigation:hover,
    #navigation:focus-within {
        left: 0;
    }

    #navigation:before {
        top: 14px;
        left: 12px;
        width: 46px;
        height: 46px;
        font-size: 25px;
        line-height: 44px;
    }

    #navigation:hover:before,
    #navigation:focus-within:before {
        left: calc(82vw + 12px);
    }

    #content {
        padding: 25px 22px 45px 22px;
    }

    #footer .gutter {
        padding: 22px;
    }
}
/* ============================================================
   GARDER LA PHOTO D'ARRIÈRE-PLAN
   SUPPRIMER UNIQUEMENT LE VOILE
   ============================================================ */

/* Ne jamais supprimer l'image de fond */
html,
body {
    background-color: transparent !important;
    opacity: 1 !important;
    filter: none !important;
}

/* Les grands blocs doivent laisser voir la photo */
#container,
#header,
#content,
#footer,
.gutter {
    background-color: transparent !important;
    opacity: 1 !important;
    filter: none !important;
}

/* Supprime les voiles ajoutés par pseudo-éléments */
#container:before,
#container:after,
#header:before,
#content:before,
#content:after,
#footer:before,
#footer:after,
.gutter:before,
.gutter:after {
    display: none !important;
    content: none !important;
    background-color: transparent !important;
    opacity: 0 !important;
    filter: none !important;
}

/* Supprime seulement les fonds semi-transparents du contenu */
#content,
#content .gutter,
#content .j-module,
#content .cc-m-text,
#content .cc-m-image,
#content .cc-m-hgrid,
#content .cc-m-hgrid-column {
    background-color: transparent !important;
    opacity: 1 !important;
    filter: none !important;
}

/* Ne pas toucher à la photo : seulement empêcher le voile blanc/noir */
#content div {
    opacity: 1 !important;
    filter: none !important;
}

/* Menu gauche : il reste visible, légèrement transparent */
#navigation {
    background-color: rgba(243, 230, 210, 0.82) !important;
    opacity: 1 !important;
    filter: none !important;
}

/* Texte du menu lisible */
#navigation,
#navigation ul,
#navigation li,
#navigation a,
#sidebar {
    opacity: 1 !important;
    filter: none !important;
}

/* Logo en haut à droite conservé */
#header:after {
    opacity: 1 !important;
    filter: none !important;
}

/* ============================================================
   CORRECTION MENU TRANSPARENT
   - pas de logo dans le bouton menu
   - pas de beige opaque
   - background visible à travers le menu
   ============================================================ */

/* ------------------------------------------------------------
   PHOTO D'ARRIÈRE-PLAN CONSERVÉE
   ------------------------------------------------------------ */

html,
body,
#container,
#header,
#content,
#footer,
.gutter {
    background-color: transparent !important;
    opacity: 1 !important;
    filter: none !important;
}

/* Ne jamais supprimer l'image de fond du site */
html,
body {
    background-image: inherit;
}

/* ------------------------------------------------------------
   LOGO HAUT DROITE : image conservée, sans fond beige ajouté
   ------------------------------------------------------------ */

#header:after {
    content: "";
    position: fixed;
    top: 18px;
    right: 24px;
    z-index: 10000;
    width: 170px;
    height: 125px;

    background-color: transparent !important;
    background-image: url("https://u.jimcdn.com/cms/o/sfa188f5f90193a85/userlayout/img/logo04-04-2.png?t=1778750365") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: contain !important;

    border: none !important;
    box-shadow: none !important;
    opacity: 1 !important;
    filter: none !important;
    pointer-events: none;
}

/* ------------------------------------------------------------
   MENU GAUCHE : même fonctionnement, mais transparent
   ------------------------------------------------------------ */

#navigation {
    position: fixed;
    top: 0;
    left: -285px;
    z-index: 9999;
    width: 285px;
    height: 100vh;
    padding: 95px 22px 28px 22px;
    box-sizing: border-box;
    overflow-y: auto;
    transition: left 0.28s ease;

    /* transparent : laisse voir la photo derrière */
    background-color: rgba(0, 0, 0, 0.18) !important;
    background-image: none !important;

    border-right: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: none !important;
    opacity: 1 !important;
    filter: none !important;
}

/* fonctionnement d'apparition conservé */
#navigation:hover,
#navigation:focus-within {
    left: 0;
}

/* Supprime le logo en filigrane dans le menu */
#navigation:after {
    content: "";
    position: absolute;
    top: 6px;
    right: 6px;
    bottom: 6px;
    left: 6px;
    border: 1px dashed rgba(255, 255, 255, 0.35);
    pointer-events: none;

    background: transparent !important;
    background-image: none !important;
    opacity: 1 !important;
}

/* ------------------------------------------------------------
   BOUTON MENU : sans logo, sans fond beige
   ------------------------------------------------------------ */

#navigation:before {
    content: "☰";
    position: fixed;
    top: 22px;
    left: 18px;
    z-index: 10001;
    width: 58px;
    height: 58px;
    display: block;
    box-sizing: border-box;

    /* bouton transparent */
    background-color: rgba(0, 0, 0, 0.22) !important;
    background-image: none !important;

    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 50%;

    color: #ffffff;
    font-size: 28px;
    line-height: 56px;
    text-align: center;
    font-weight: bold;
    cursor: pointer;

    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;
}

/* bouton quand le menu est ouvert */
#navigation:hover:before,
#navigation:focus-within:before {
    left: 303px;
    content: "×";

    background-color: rgba(0, 0, 0, 0.22) !important;
    background-image: none !important;

    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.65);
}

/* ------------------------------------------------------------
   LIENS DU MENU : lisibles mais sans fond beige
   ------------------------------------------------------------ */

#navigation ul,
#navigation li,
#navigation a,
#sidebar {
    position: relative;
    z-index: 2;
    opacity: 1 !important;
    filter: none !important;
    background-image: none !important;
}

#navigation > ul:first-of-type:before {
    content: "Menu";
    display: block;
    margin-bottom: 18px;
    padding-bottom: 13px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    color: #ffffff;
    font-size: 22px;
    line-height: 1.1;
}

/* liens transparents */
#navigation a {
    display: block;
    margin-bottom: 5px;
    padding: 11px 12px;
    border-left: 3px solid transparent;

    color: #ffffff !important;
    background-color: transparent !important;
    background-image: none !important;

    font-size: 16px;
    line-height: 1.25;
    text-decoration: none;
}

/* survol : léger voile blanc, pas beige */
#navigation a:hover,
#navigation a:focus,
#navigation .current a,
#navigation .active a,
#navigation .cc-nav-current a {
    background-color: rgba(255, 255, 255, 0.16) !important;
    border-left-color: #ffffff;
    color: #ffffff !important;
}

/* sous-menus */
#navigation ul ul {
    margin-left: 10px;
    margin-top: 4px;
    margin-bottom: 8px;
}

#navigation ul ul a {
    font-size: 14px;
    padding-top: 8px;
    padding-bottom: 8px;
}

/* sidebar du menu */
#sidebar {
    margin-top: 25px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.35);
    color: #ffffff;
    background-color: transparent !important;
}

/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */

@media screen and (max-width: 760px) {
    #header:after {
        top: 14px;
        right: 12px;
        width: 125px;
        height: 92px;
    }

    #navigation {
        left: -82vw;
        width: 82vw;
        padding-top: 85px;
        background-color: rgba(0, 0, 0, 0.22) !important;
        background-image: none !important;
    }

    #navigation:hover,
    #navigation:focus-within {
        left: 0;
    }

    #navigation:before {
        top: 14px;
        left: 12px;
        width: 50px;
        height: 50px;
        line-height: 48px;
        font-size: 24px;

        background-color: rgba(0, 0, 0, 0.22) !important;
        background-image: none !important;
    }

    #navigation:hover:before,
    #navigation:focus-within:before {
        left: calc(82vw + 12px);

        background-color: rgba(0, 0, 0, 0.22) !important;
        background-image: none !important;
    }
}

/* ============================================================
   CORRECTION FINALE
   - menu gauche avec même fonctionnement d'apparition
   - pas de logo dans le bouton menu
   - pas de fond beige dans le bouton
   - pas de fond beige dans le menu
   - arrière-plan photo visible à travers le menu
   - logo image conservé en haut à droite
   ============================================================ */

/* ------------------------------------------------------------
   1. Conserver la photo d'arrière-plan
   ------------------------------------------------------------ */

html,
body {
    margin: 0;
    padding: 0;
    opacity: 1 !important;
    filter: none !important;
    background-color: transparent !important;
}

#container,
#header,
#content,
#footer,
.gutter {
    background-color: transparent !important;
    opacity: 1 !important;
    filter: none !important;
}

/* Ne pas supprimer la photo globale */
body {
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
    background-attachment: fixed !important;
}

/* ------------------------------------------------------------
   2. Supprimer uniquement les voiles du template
   ------------------------------------------------------------ */

#container:before,
#container:after,
#header:before,
#content:before,
#content:after,
#footer:before,
#footer:after,
.gutter:before,
.gutter:after {
    content: none !important;
    display: none !important;
    background: transparent !important;
    opacity: 0 !important;
    filter: none !important;
}

/* ------------------------------------------------------------
   3. Logo haut droite avec ton image, sans fond beige CSS
   ------------------------------------------------------------ */

#header:after {
    content: "" !important;
    position: fixed;
    top: 18px;
    right: 24px;
    z-index: 10000;

    width: 170px;
    height: 125px;

    background-color: transparent !important;
    background-image: url("https://u.jimcdn.com/cms/o/sfa188f5f90193a85/userlayout/img/logo04-04-2.png?t=1778750365") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: contain !important;

    border: none !important;
    box-shadow: none !important;
    opacity: 1 !important;
    filter: none !important;
    pointer-events: none;
}

/* ------------------------------------------------------------
   4. Menu gauche : même fonctionnement, mais transparent
   ------------------------------------------------------------ */

#navigation {
    position: fixed !important;
    top: 0 !important;
    left: -285px !important;

    z-index: 9999 !important;
    width: 285px !important;
    height: 100vh !important;

    padding: 95px 22px 28px 22px !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;

    transition: left 0.28s ease !important;

    /* transparent : laisse voir la photo */
    background-color: rgba(0, 0, 0, 0.16) !important;
    background-image: none !important;

    border-right: 1px solid rgba(255, 255, 255, 0.35) !important;
    box-shadow: none !important;
    opacity: 1 !important;
    filter: none !important;
}

/* Apparition du menu au survol */
#navigation:hover,
#navigation:focus-within {
    left: 0 !important;
}

/* Bordure interne légère, sans fond */
#navigation:after {
    content: "" !important;
    position: absolute !important;
    top: 6px !important;
    right: 6px !important;
    bottom: 6px !important;
    left: 6px !important;

    border: 1px dashed rgba(255, 255, 255, 0.35) !important;
    background: transparent !important;
    background-image: none !important;

    pointer-events: none !important;
    opacity: 1 !important;
}

/* ------------------------------------------------------------
   5. Bouton menu : sans logo, sans beige
   ------------------------------------------------------------ */

#navigation:before {
    content: "☰" !important;

    position: fixed !important;
    top: 22px !important;
    left: 18px !important;
    z-index: 10001 !important;

    width: 58px !important;
    height: 58px !important;
    display: block !important;
    box-sizing: border-box !important;

    /* aucun logo, aucun beige */
    background-color: rgba(0, 0, 0, 0.18) !important;
    background-image: none !important;

    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    border-radius: 50% !important;

    color: #ffffff !important;
    font-size: 28px !important;
    line-height: 56px !important;
    text-align: center !important;
    font-weight: bold !important;

    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;
    cursor: pointer !important;
}

/* Bouton quand le menu est ouvert */
#navigation:hover:before,
#navigation:focus-within:before {
    left: 303px !important;
    content: "×" !important;

    background-color: rgba(0, 0, 0, 0.18) !important;
    background-image: none !important;

    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.7) !important;
}

/* ------------------------------------------------------------
   6. Liens du menu : transparents, lisibles sur la photo
   ------------------------------------------------------------ */

#navigation ul,
#navigation li,
#navigation a,
#sidebar {
    position: relative !important;
    z-index: 2 !important;

    background-color: transparent !important;
    background-image: none !important;

    opacity: 1 !important;
    filter: none !important;
}

/* Titre Menu */
#navigation > ul:first-of-type:before {
    content: "Menu" !important;
    display: block !important;

    margin-bottom: 18px !important;
    padding-bottom: 13px !important;

    border-bottom: 1px solid rgba(255, 255, 255, 0.45) !important;

    color: #ffffff !important;
    font-size: 22px !important;
    line-height: 1.1 !important;
}

/* Liens normaux */
#navigation a {
    display: block !important;

    margin-bottom: 5px !important;
    padding: 11px 12px !important;

    border-left: 3px solid transparent !important;

    color: #ffffff !important;
    background-color: transparent !important;
    background-image: none !important;

    font-size: 16px !important;
    line-height: 1.25 !important;
    text-decoration: none !important;
}

/* Liens au survol */
#navigation a:hover,
#navigation a:focus,
#navigation .current a,
#navigation .active a,
#navigation .cc-nav-current a {
    background-color: rgba(255, 255, 255, 0.14) !important;
    border-left-color: #ffffff !important;
    color: #ffffff !important;
}

/* Sous-menus */
#navigation ul ul {
    margin-left: 10px !important;
    margin-top: 4px !important;
    margin-bottom: 8px !important;
}

#navigation ul ul a {
    font-size: 14px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

/* Sidebar */
#sidebar {
    margin-top: 25px !important;
    padding-top: 18px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.35) !important;
    color: #ffffff !important;
}

/* ------------------------------------------------------------
   7. Mobile
   ------------------------------------------------------------ */

@media screen and (max-width: 760px) {
    #header:after {
        top: 14px !important;
        right: 12px !important;
        width: 125px !important;
        height: 92px !important;
    }

    #navigation {
        left: -82vw !important;
        width: 82vw !important;
        padding-top: 85px !important;

        background-color: rgba(0, 0, 0, 0.18) !important;
        background-image: none !important;
    }

    #navigation:hover,
    #navigation:focus-within {
        left: 0 !important;
    }

    #navigation:before {
        top: 14px !important;
        left: 12px !important;

        width: 50px !important;
        height: 50px !important;

        line-height: 48px !important;
        font-size: 24px !important;

        background-color: rgba(0, 0, 0, 0.18) !important;
        background-image: none !important;
    }

    #navigation:hover:before,
    #navigation:focus-within:before {
        left: calc(82vw + 12px) !important;

        background-color: rgba(0, 0, 0, 0.18) !important;
        background-image: none !important;
    }
}

/* ============================================================
   AMÉLIORATION SLIDE MENU
   - ouverture plus rapide
   - zone de déclenchement plus large
   ============================================================ */

/* Menu fermé : on laisse une zone de 62px visible/sensible */
#navigation {
    left: -223px !important; /* 285px - 62px = zone sensible de 62px */
    transition: left 0.13s ease-out !important;
}

/* Menu ouvert */
#navigation:hover,
#navigation:focus-within {
    left: 0 !important;
    transition: left 0.11s ease-out !important;
}

/* Bouton menu fermé : placé dans la zone sensible */
#navigation:before {
    left: 12px !important;
    transition: left 0.13s ease-out, background-color 0.13s ease-out, color 0.13s ease-out !important;
}

/* Bouton menu ouvert */
#navigation:hover:before,
#navigation:focus-within:before {
    left: 303px !important;
    transition: left 0.11s ease-out, background-color 0.11s ease-out, color 0.11s ease-out !important;
}

/* Zone de menu visible mais discrète quand fermé */
#navigation:not(:hover):not(:focus-within) {
    background-color: rgba(0, 0, 0, 0.08) !important;
}

/* Zone de menu plus lisible quand ouvert */
#navigation:hover,
#navigation:focus-within {
    background-color: rgba(0, 0, 0, 0.18) !important;
}

/* Mobile : zone sensible plus large aussi */
@media screen and (max-width: 760px) {
    #navigation {
        left: calc(-82vw + 62px) !important;
        transition: left 0.13s ease-out !important;
    }

    #navigation:hover,
    #navigation:focus-within {
        left: 0 !important;
        transition: left 0.11s ease-out !important;
    }

    #navigation:before {
        left: 12px !important;
        transition: left 0.13s ease-out !important;
    }

    #navigation:hover:before,
    #navigation:focus-within:before {
        left: calc(82vw + 12px) !important;
        transition: left 0.11s ease-out !important;
    }
}