/* ==================================================    General Styles    ========================================== */
/* Define CSS Variables for Color Scheme */
:root {
    --main-bg-color: #EFFAFD;
    --navbar-footer-color: #28323B;
    --footer-link-color: #A0966F;
    --jumbotron-bg-image: url('/static/img/bandeau/terrapartus.webp');
    --custom-font-color: #F8ECB6;
    --form-bg-color: #FFE5D0;
    --slate-accent-color: #f3ebdf;
    /* --font-custom: 'OldEnglishTextMT', sans-serif;*/
    --font-custom: 'BlackChancery', sans-serif;
}

/* General Body Styles */
html, body {
    height: 100%;
    background-color: var(--main-bg-color);
}

body {
    display: flex;
    flex-direction: column;
    min-vh-100: 100%;
}

.content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* SVG image */
svg {
  background-color: transparent !important;
}

/* ==================================================    Navbar Styles    =========================================== */
/* Navbar Styles */
.navbar {
    background-color: var(--navbar-footer-color);
}

/* =================================================    Footer Styles    ============================================ */
/* Footer Styles */
footer {
    background-color: var(--navbar-footer-color);
    color: #F9EBB2;
    margin-top: auto;
}

/* Footer Link Styles */
footer a:link {
    color: var(--footer-link-color);
}

/* ==================================================    Jumbotron Styles    ======================================== */
/* Jumbotron Image Overrides */
.jumbotron-image {
    margin-top: 0px;
    background-image: var(--jumbotron-bg-image);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Placeholder Image Styles */
.bd-placeholder-img {
    font-size: 1.125rem;
    text-anchor: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Placeholder Image Styles for Large Screens */
@media (min-width: 768px) {
    .bd-placeholder-img-lg {
        font-size: 3.5rem;
    }
}

/* ==================================================    Map Styles    ============================================== */
/* Map Styles */
#map {
    height: 800px;
    width: 100%;
}

/* ==================================================    Card Styles    ============================================= */
/* Anchor Styles */
a.anchor {
    display: block;
    position: relative;
    top: -190px;
    visibility: hidden;
}

/* ==================================================    Font Styles    ============================================= */
/* Custom Font-Face */
/*@font-face {
    font-family: 'CaliforniaSun';
    src: url("/static/fonts/California sun.woff2") format('woff2'),
         url("/static/fonts/California sun.woff") format('woff'),
         url("/static/fonts/California sun.ttf") format('truetype'),
         url("/static/fonts/California sun.otf") format('opentype');
    font-weight: normal;
    font-style: normal;
}*/
@font-face {
    font-family: 'BlackChancery';
    src: url('/static/fonts/BlackChancery.woff2') format('woff2'),
        url('/static/fonts/BlackChancery.woff') format('woff'),
        url('/static/fonts/BlackChancery.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

/* Custom Font Application */
.font-custom {
    font-family: var(--font-custom);
}

/* Custom Font for Specific Elements */
.card-header, .card-title, .btn-custom {
    /*font-family: var(--font-custom);*/
    background-color: #443B2B;
    color: var(--custom-font-color);
    padding: 5px;
    border-radius: 5px;
}

/* ==================================================    Menu Icon Styles    ======================================== */
/* For 2 stacked icon */
.fa-stack-2 {
  display: inline-block; /* To align with other inline elements like text */
  position: relative; /* To position the inner icons */
  width: 2em; /* Adjust width to fit the content area */
  height: 1em; /* Adjust height to fit the content area */
  line-height: 1em; /* Align the icons vertically */
  vertical-align: middle; /* Align with surrounding text */
}

/* For tree stacked icons */
.fa-stack-3 {
  display: inline-block; /* To align with other inline elements like text */
  position: relative; /* To position the inner icons */
  width: 2em; /* Adjust width to fit the content area */
  height: 1em; /* Adjust height to fit the content area */
  line-height: 1em; /* Align the icons vertically */
  vertical-align: middle; /* Align with surrounding text */
}

/* Specific positioning for the top left icon */
.fa-top-left {
  width: 2em;
  position: absolute;
  font-size: 0.60em;
  top: -5px;
  left: 5px;
  text-shadow:
    -1px -1px 0 #FFF,
     1px -1px 0 #FFF,
    -1px  1px 0 #FFF,
     1px  1px 0 #FFF;
}

.fa-bottom-right {
  position: absolute;
  font-size: 0.5em; /* Adjust the size of the gear icon */
  bottom: -3px;
  right: 2px;
  text-shadow:
    -1px -1px 0 #FFF,
     1px -1px 0 #FFF,
    -1px  1px 0 #FFF,
     1px  1px 0 #FFF;
}

.fa-stack-2x {
  font-size: 1em;
}

.fa-stack-3x {
  font-size: 0.5em;
}

.color-mars {
  color: #0dcaf0;
}

.color-venus {
  color: #d63384;
}

.color-user-tie {
  color: #20c997;
}

.color-users {
  color: #20c997;
}

/* ==================================================    Sidebar Styles    ========================================== */
/* Sidebar Styles */
/* Hide the sidebar when 'sidebar-hidden' class is added */

.sidebar-hidden {
    display: none;
}

/* Adjust main content when sidebar is hidden */
.content-expanded {
    margin-left: 0 !important;
}

/* Main content should flex-grow */
#main-content {
    flex-grow: 1;
    min-width: 0;
}

/* Transition for smooth effect */
#sidebar-parent,
#main-content {
    transition: all 0.3s ease;
}

/* Prevent horizontal overflow */
body {
    overflow-x: hidden;
}

/* Existing Sidebar Styles */
/* Repeat the css in the parent when in larger screen and goes until the botton */
#sidebar-parent {
    width: 195px;
    box-shadow: inset -1.5em 0 .5em -1.4em rgba(0, 0, 0, .1), inset -1.5em 0 .125em -1.45em rgba(0, 0, 0, .15);
}

#sidebar-nav {
    flex-grow: 1;
    box-shadow: inset -1.5em 0 .5em -1.4em rgba(0, 0, 0, .1), inset -1.5em 0 .125em -1.45em rgba(0, 0, 0, .15);
    display: flex;
    flex-direction: column; /* Ensure content inside the sidebar stacks */
    height: 100%; /* Ensures that the sidebar itself is as tall as its parent */
}

/* Icon rotation when collapse is shown */
.collapse.show ~ a .fa-angle-right {
    transform: rotate(90deg);
    transition: transform 0.3s ease;
}

/* Icon styling */
.nav-link .fa-angle-right {
    transition: transform 0.3s ease;
    color: #000000;
}

/* Nav link hover */
.nav-link:hover {
    cursor: pointer;
}

/* Active nav link */
.nav-link.active {
    font-weight: bold;
    color: #28323B;
}

a.nav-link {
    color: #000000;
}

/* ==================================================    Responsive Sidebar    ======================================= */
/* For smaller devices, make the sidebar overlay the content */
/* Navbar on small screens should adjust dynamically */
/* Responsive layout for small screens */
@media (max-width: 768px) {
    /* Parent container for sidebar and content should be a flexbox container */
    .d-flex.flex-nowrap {
        display: flex;
        flex-direction: column; /* Ensure items stack vertically */
        min-height: 100vh; /* Full viewport height */
    }

    /* Navbar */
    .navbar {
        flex-shrink: 0; /* Prevent shrinking of the navbar */
        position: relative;
        z-index: 1040;
        width: 100%;
    }

    /* Sidebar should take up space beneath the navbar and expand vertically */
    #sidebar-parent {
        position: relative;
        z-index: 1030;
        width: 250px; /* Sidebar width */
        flex-grow: 1; /* Allow the sidebar to grow and take the remaining height */
        background-color: white;
        transform: translateX(-100%); /* Initially hidden off-screen */
        transition: transform 0.3s ease;
    }

    /* When the sidebar is open */
    #sidebar-parent.sidebar-open {
        transform: translateX(0); /* Bring the sidebar into view */
    }

    /* Main content */
    #main-content {
        flex-grow: 1; /* Main content should take the available space */
        padding-top: 56px; /* Ensure the content is not hidden under the navbar */
        margin-left: 0;
        transition: margin-left 0.3s ease;
    }

    /* When the sidebar is open, adjust the margin of main content */
    body.sidebar-open #main-content {
        margin-left: 250px; /* Adjust based on the width of the sidebar */
    }

    /* Prevent horizontal scroll when sidebar is open */
    body.sidebar-open {
        overflow-x: hidden;
    }
}




/* Small screen styling for the navbar */
.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Ensure proper spacing */
}

/* Keep the sidebar hidden initially on smaller screens */
.sidebar-hidden {
    transform: translateX(-100%);
}

/* Expand main content fully when the sidebar is hidden */
.content-expanded {
    margin-left: 0 !important;
}



/* ==================================================    Form Styles    ============================================= */
/* Form Elements Background Color */
.form-element {
    background-color: var(--form-bg-color);
}


/* ==================================================    Tooltip Styles    =========================================== */
/* Custom black tooltip */
.tooltip .tooltip-inner {
    background-color: #000;
    color: #fff;
}

/* Arrow color for different tooltip positions */
.tooltip.bs-tooltip-top .arrow::before,
.tooltip.bs-tooltip-auto[data-popper-placement^="top"] .arrow::before {
    border-top-color: #000;
}

.tooltip.bs-tooltip-end .arrow::before,
.tooltip.bs-tooltip-auto[data-popper-placement^="right"] .arrow::before {
    border-right-color: #000;
}

.tooltip.bs-tooltip-bottom .arrow::before,
.tooltip.bs-tooltip-auto[data-popper-placement^="bottom"] .arrow::before {
    border-bottom-color: #000;
}

.tooltip.bs-tooltip-start .arrow::before,
.tooltip.bs-tooltip-auto[data-popper-placement^="left"] .arrow::before {
    border-left-color: #000;
}

/* ==========================================    CSS Scrollable Shadow    =========================================== */
/* from https://css-tricks.com/books/greatest-css-tricks/scroll-shadows/ */

.scroll-shadows {
  max-height: 100px;
  overflow: auto;

  background:
    /* Shadow Cover TOP */
    linear-gradient(
      white 30%,
      rgba(255, 255, 255, 0)
    ) center top,

    /* Shadow Cover BOTTOM */
    linear-gradient(
      rgba(255, 255, 255, 0),
      white 70%
    ) center bottom,

    /* Shadow TOP */
    radial-gradient(
      farthest-side at 50% 0,
      rgba(0, 0, 0, 0.2),
      rgba(0, 0, 0, 0)
    ) center top,

    /* Shadow BOTTOM */
    radial-gradient(
      farthest-side at 50% 100%,
      rgba(0, 0, 0, 0.2),
      rgba(0, 0, 0, 0)
    ) center bottom;

  background-repeat: no-repeat;
  background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
  background-attachment: local, local, scroll, scroll;
}

/* ==================================================    Custom Stacked icon    ==================================== */


/* custom stacked icons */

.icon-stack {
    position: relative;
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
}

.icon-stack .fa-square {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 2em;
}

.icon-stack .letter-icon {
    position: absolute;
    top: 60%;
    left: 57%;
    transform: translate(-50%, -50%);
    font-size: 100%;
    font-weight: bold;
    color: black;
}

.icon-right-left {
    font-size: 1.5em;
}

.m-color {
    color: #20c997;
}

.s-color {
    color: #0dcaf0;
}

.a-color {
    color: #ffc107;
}

/* ==================================================    Camé Styles    ========================================= */

.cameo-container {
    width: 100%;
    max-width: 100px; /* Ajustez selon vos besoins */
    aspect-ratio: 3 / 4; /* Proportion classique de camée */
    position: relative;
}

.cameo-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid #000;
    padding: 3px;
    display: block;
}

/* Alternative si aspect-ratio n'est pas supporté */
@supports not (aspect-ratio: 3 / 4) {
    .cameo-container {
        position: relative;
        width: 100%;
        max-width: 100px;
    }

    .cameo-container::before {
        content: '';
        display: block;
        padding-top: 133.33%; /* 4/3 * 100% pour ratio 3:4 */
    }

    .cameo-image {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
}

/* Variations de proportions si besoin */
.cameo-container.ratio-4-5 { aspect-ratio: 4 / 5; }
.cameo-container.ratio-round { aspect-ratio: 1 / 1; }


/* ============================================= CLASSES CSS ARDOISE RESTAURANT ===================================== */


/* Classe principale pour l'effet ardoise */
.slate-header {
    background: linear-gradient(135deg, #495057 0%, #343a40 25%, #212529 50%, #343a40 75%, #495057 100%);
    color: var(--slate-accent-color, #f3ebdf);
    text-align: center;
    /*border: 4px solid #6c757d;*/
    /*border-radius: 0.75rem;*/
    box-shadow:
        inset 0 0 25px rgba(0, 0, 0, 0.4),
        inset 0 0 50px rgba(0, 0, 0, 0.2),
        0 8px 16px rgba(0, 0, 0, 0.3),
        0 0 0 2px rgba(255, 255, 255, 0.05);
    position: relative;
    overflow: hidden;
    width: 100%; /* S'étale sur tout l'espace horizontal */
    z-index: 1;
}

/* Texture d'ardoise subtile */
.slate-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 40%, rgba(255, 255, 255, 0.008) 50%, transparent 60%);
    pointer-events: none;
    border-radius: 0.75rem;
}

/* Container pour les séparateurs */
.slate-separator {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Change pour étaler sur tout l'espace */
    margin: 0.5rem 0;
    position: relative;
    z-index: 1;
}

/* Lignes des séparateurs avec effet craie */
.slate-separator hr.left {
    flex: 1; /* Prend tout l'espace disponible */
    height: 3px;
    background: linear-gradient(to right, transparent, #ffffff);
    border: none;
    box-shadow: 0 0 3px rgba(255, 255, 255, 0.5);
}

.slate-separator hr.right {
    flex: 1; /* Prend tout l'espace disponible */
    height: 3px;
    background: linear-gradient(to left, transparent, #ffffff);
    border: none;
    box-shadow: 0 0 3px rgba(255, 255, 255, 0.5);
}

/* Images SVG avec effet lumineux */
.slate-separator img {
    height: 80px;
    margin: 0 10px;
    filter:
        brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(1%) hue-rotate(32deg) brightness(103%) contrast(101%)
        drop-shadow(0 0 3px rgba(255, 255, 255, 0.3));
}

/* Titre principal avec effet craie */
.slate-title {
    font-size: 2.8rem;
    /* font-family: 'Brush Script MT', cursive, serif, 'Georgia', serif;*/
    font-weight: 300;
    letter-spacing: 1px;
    margin: 1.5rem 0;
    text-shadow:
        0 0 5px rgba(255, 255, 255, 0.3),
        0 0 10px rgba(255, 255, 255, 0.1),
        1px 1px 0 rgba(255, 255, 255, 0.1),
        -1px -1px 0 rgba(255, 255, 255, 0.05);
    color: var(--slate-accent-color, #f3ebdf);
    position: relative;
    z-index: 1;
}

/* Sous-titre avec effet craie plus subtil */
.slate-subtitle {
    font-size: 1.2rem;
    font-family: 'Georgia', serif;
    font-style: italic;
    font-weight: 300;
    margin: 1rem 0;
    text-shadow:
        0 0 3px rgba(255, 255, 255, 0.2),
        0 0 6px rgba(255, 255, 255, 0.1);
    color: var(--slate-accent-color, #f3ebdf);
    position: relative;
    z-index: 1;
}

/* ===== VARIATIONS ===== */

/* Version compacte */
.slate-header.compact {
    margin: 0.5rem;
}

.slate-header.compact .slate-title {
    font-size: 2.2rem;
    margin: 1rem 0;
}

.slate-header.compact .slate-separator {
    margin: 1rem 0;
}

.slate-header.compact .slate-separator img {
    height: 60px;
}

/* Version sans bordure (pour intégration dans conteneurs existants) */
.slate-header.borderless {
    border: none;
    border-radius: 0;
    margin: 0;
    box-shadow:
        inset 0 0 25px rgba(0, 0, 0, 0.4),
        inset 0 0 50px rgba(0, 0, 0, 0.2);
}

/* Version sombre (pour backgrounds clairs) */
.slate-header.dark {
    background: linear-gradient(135deg, #343a40 0%, #212529 25%, #0d1117 50%, #212529 75%, #343a40 100%);
    border-color: #495057;
}

/* Version avec bordure */
.slate-header.bordered {
    border: 4px solid #6c757d;
}

/* ===== VERSIONS AVEC ENCOCHES ===== */

/* Version avec encoches rectangulaires */
.slate-header.notched {
    border: none;
    clip-path: polygon(
        20px 0%,
        calc(100% - 20px) 0%,
        100% 20px,
        100% calc(100% - 20px),
        calc(100% - 20px) 100%,
        20px 100%,
        0% calc(100% - 20px),
        0% 20px
    );
}

.slate-header.notched::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    background: #6c757d;
    clip-path: polygon(
        24px 0%,
        calc(100% - 24px) 0%,
        100% 24px,
        100% calc(100% - 24px),
        calc(100% - 24px) 100%,
        24px 100%,
        0% calc(100% - 24px),
        0% 24px
    );
    z-index: -2;
}

/* Version avec encoches arrondies */
.slate-header.round-notches {
    border: none;
    clip-path: polygon(
        0% 15px,
        15px 0%,
        calc(100% - 15px) 0%,
        100% 15px,
        100% calc(100% - 15px),
        calc(100% - 15px) 100%,
        15px 100%,
        0% calc(100% - 15px)
    );
    border-radius: 15px;
}

.slate-header.round-notches::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    background: #6c757d;
    clip-path: polygon(
        0% 19px,
        19px 0%,
        calc(100% - 19px) 0%,
        100% 19px,
        100% calc(100% - 19px),
        calc(100% - 19px) 100%,
        19px 100%,
        0% calc(100% - 19px)
    );
    border-radius: 19px;
    z-index: -2;
}

/* Version avec encoches circulaires sur les côtés */
.slate-header.circular-notches {
    border: 4px solid #6c757d;
    border-radius: 8px;
    position: relative;
}

.slate-header.circular-notches::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background: white; /* À adapter selon votre couleur de fond */
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    left: -10px;
    z-index: 1;
}

.slate-header.circular-notches::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background: white; /* À adapter selon votre couleur de fond */
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    right: -10px;
    z-index: 1;
}

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

@media (max-width: 768px) {
    .slate-header {
        margin: 0.5rem;
        border-width: 3px;
    }

    .slate-title {
        font-size: 2.2rem;
        letter-spacing: 0.5px;
        margin: 1rem 0;
    }

    .slate-subtitle {
        font-size: 1rem;
    }

    .slate-separator {
        margin: 1rem 0;
    }

    .slate-separator img {
        height: 60px;
        margin: 0 5px;
    }
}

@media (max-width: 480px) {
    .slate-header {
        border-width: 2px;
    }

    .slate-title {
        font-size: 1.8rem;
    }

    .slate-separator img {
        height: 50px;
    }
}

/* ===== UTILITAIRES ===== */

/* Classe pour centrer le contenu */
.slate-content {
    position: relative;
    z-index: 1;
}

/* Classe pour les éléments avec effet craie */
.chalk-effect {
    text-shadow:
        0 0 5px rgba(255, 255, 255, 0.3),
        0 0 10px rgba(255, 255, 255, 0.1);
    color: #f8f9fa;
}

/* Classe pour les icônes/symboles décoratifs */
.slate-icon {
    color: #f8f9fa;
    font-size: 2rem;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
    margin: 0 15px;
}

/* ===== PADDING PERSONNALISABLES ===== */

/* Petits paddings */
.slate-header.padding-sm {
    padding: 1rem;
}

/* Paddings moyens */
.slate-header.padding-md {
    padding: 2rem 1rem;
}

/* Grands paddings */
.slate-header.padding-lg {
    padding: 3rem 1.5rem;
}

/* Paddings extra-larges */
.slate-header.padding-xl {
    padding: 4rem 2rem;
}

/* boutons personnalisés */

.btn-outline-inner {
    box-shadow: inset 0 0 0 4px #212529, inset 0 0 0 5px white;
    border-radius: 0 0 10px 10px !important;
    /*margin-top:-6px;*/
}

/* ==================================================    Camé Styles    ========================================= */

.cameo-container {
    width: 100%;
    max-width: 100px; /* Ajustez selon vos besoins */
    aspect-ratio: 3 / 4; /* Proportion classique de camée */
    position: relative;
}

.cameo-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid #000;
    padding: 3px;
    display: block;
}

/* Alternative si aspect-ratio n'est pas supporté */
@supports not (aspect-ratio: 3 / 4) {
    .cameo-container {
        position: relative;
        width: 100%;
        max-width: 100px;
    }

    .cameo-container::before {
        content: '';
        display: block;
        padding-top: 133.33%; /* 4/3 * 100% pour ratio 3:4 */
    }

    .cameo-image {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
}

/* Variations de proportions si besoin */
.cameo-container.ratio-4-5 { aspect-ratio: 4 / 5; }
.cameo-container.ratio-round { aspect-ratio: 1 / 1; }


/* ============================================= CLASSES CSS ARDOISE RESTAURANT ===================================== */


/* Classe principale pour l'effet ardoise */
.slate-header {
    background: linear-gradient(135deg, #495057 0%, #343a40 25%, #212529 50%, #343a40 75%, #495057 100%);
    color: var(--slate-accent-color, #f3ebdf);
    text-align: center;
    /*border: 4px solid #6c757d;*/
    /*border-radius: 0.75rem;*/
    box-shadow:
        inset 0 0 25px rgba(0, 0, 0, 0.4),
        inset 0 0 50px rgba(0, 0, 0, 0.2),
        0 8px 16px rgba(0, 0, 0, 0.3),
        0 0 0 2px rgba(255, 255, 255, 0.05);
    position: relative;
    overflow: hidden;
    width: 100%; /* S'étale sur tout l'espace horizontal */
    z-index: 1;
}

/* Texture d'ardoise subtile */
.slate-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 40%, rgba(255, 255, 255, 0.008) 50%, transparent 60%);
    pointer-events: none;
    border-radius: 0.75rem;
}

/* Container pour les séparateurs */
.slate-separator {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Change pour étaler sur tout l'espace */
    margin: 0.5rem 0;
    position: relative;
    z-index: 1;
}

/* Lignes des séparateurs avec effet craie */
.slate-separator hr.left {
    flex: 1; /* Prend tout l'espace disponible */
    height: 3px;
    background: linear-gradient(to right, transparent, #ffffff);
    border: none;
    box-shadow: 0 0 3px rgba(255, 255, 255, 0.5);
}

.slate-separator hr.right {
    flex: 1; /* Prend tout l'espace disponible */
    height: 3px;
    background: linear-gradient(to left, transparent, #ffffff);
    border: none;
    box-shadow: 0 0 3px rgba(255, 255, 255, 0.5);
}

/* Images SVG avec effet lumineux */
.slate-separator img {
    height: 80px;
    margin: 0 10px;
    filter:
        brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(1%) hue-rotate(32deg) brightness(103%) contrast(101%)
        drop-shadow(0 0 3px rgba(255, 255, 255, 0.3));
}

/* Titre principal avec effet craie */
.slate-title {
    font-size: 2.8rem;
    /* font-family: 'Brush Script MT', cursive, serif, 'Georgia', serif;*/
    font-weight: 300;
    letter-spacing: 1px;
    margin: 1.5rem 0;
    text-shadow:
        0 0 5px rgba(255, 255, 255, 0.3),
        0 0 10px rgba(255, 255, 255, 0.1),
        1px 1px 0 rgba(255, 255, 255, 0.1),
        -1px -1px 0 rgba(255, 255, 255, 0.05);
    color: var(--slate-accent-color, #f3ebdf);
    position: relative;
    z-index: 1;
}

/* Sous-titre avec effet craie plus subtil */
.slate-subtitle {
    font-size: 1.2rem;
    font-family: 'Georgia', serif;
    font-style: italic;
    font-weight: 300;
    margin: 1rem 0;
    text-shadow:
        0 0 3px rgba(255, 255, 255, 0.2),
        0 0 6px rgba(255, 255, 255, 0.1);
    color: var(--slate-accent-color, #f3ebdf);
    position: relative;
    z-index: 1;
}

/* ===== VARIATIONS ===== */

/* Version compacte */
.slate-header.compact {
    margin: 0.5rem;
}

.slate-header.compact .slate-title {
    font-size: 2.2rem;
    margin: 1rem 0;
}

.slate-header.compact .slate-separator {
    margin: 1rem 0;
}

.slate-header.compact .slate-separator img {
    height: 60px;
}

/* Version sans bordure (pour intégration dans conteneurs existants) */
.slate-header.borderless {
    border: none;
    border-radius: 0;
    margin: 0;
    box-shadow:
        inset 0 0 25px rgba(0, 0, 0, 0.4),
        inset 0 0 50px rgba(0, 0, 0, 0.2);
}

/* Version sombre (pour backgrounds clairs) */
.slate-header.dark {
    background: linear-gradient(135deg, #343a40 0%, #212529 25%, #0d1117 50%, #212529 75%, #343a40 100%);
    border-color: #495057;
}

/* Version avec bordure */
.slate-header.bordered {
    border: 4px solid #6c757d;
}

/* ===== VERSIONS AVEC ENCOCHES ===== */

/* Version avec encoches rectangulaires */
.slate-header.notched {
    border: none;
    clip-path: polygon(
        20px 0%,
        calc(100% - 20px) 0%,
        100% 20px,
        100% calc(100% - 20px),
        calc(100% - 20px) 100%,
        20px 100%,
        0% calc(100% - 20px),
        0% 20px
    );
}

.slate-header.notched::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    background: #6c757d;
    clip-path: polygon(
        24px 0%,
        calc(100% - 24px) 0%,
        100% 24px,
        100% calc(100% - 24px),
        calc(100% - 24px) 100%,
        24px 100%,
        0% calc(100% - 24px),
        0% 24px
    );
    z-index: -2;
}

/* Version avec encoches arrondies */
.slate-header.round-notches {
    border: none;
    clip-path: polygon(
        0% 15px,
        15px 0%,
        calc(100% - 15px) 0%,
        100% 15px,
        100% calc(100% - 15px),
        calc(100% - 15px) 100%,
        15px 100%,
        0% calc(100% - 15px)
    );
    border-radius: 15px;
}

.slate-header.round-notches::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    background: #6c757d;
    clip-path: polygon(
        0% 19px,
        19px 0%,
        calc(100% - 19px) 0%,
        100% 19px,
        100% calc(100% - 19px),
        calc(100% - 19px) 100%,
        19px 100%,
        0% calc(100% - 19px)
    );
    border-radius: 19px;
    z-index: -2;
}

/* Version avec encoches circulaires sur les côtés */
.slate-header.circular-notches {
    border: 4px solid #6c757d;
    border-radius: 8px;
    position: relative;
}

.slate-header.circular-notches::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background: white; /* À adapter selon votre couleur de fond */
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    left: -10px;
    z-index: 1;
}

.slate-header.circular-notches::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background: white; /* À adapter selon votre couleur de fond */
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    right: -10px;
    z-index: 1;
}

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

@media (max-width: 768px) {
    .slate-header {
        margin: 0.5rem;
        border-width: 3px;
    }

    .slate-title {
        font-size: 2.2rem;
        letter-spacing: 0.5px;
        margin: 1rem 0;
    }

    .slate-subtitle {
        font-size: 1rem;
    }

    .slate-separator {
        margin: 1rem 0;
    }

    .slate-separator img {
        height: 60px;
        margin: 0 5px;
    }
}

@media (max-width: 480px) {
    .slate-header {
        border-width: 2px;
    }

    .slate-title {
        font-size: 1.8rem;
    }

    .slate-separator img {
        height: 50px;
    }
}

/* ===== UTILITAIRES ===== */

/* Classe pour centrer le contenu */
.slate-content {
    position: relative;
    z-index: 1;
}

/* Classe pour les éléments avec effet craie */
.chalk-effect {
    text-shadow:
        0 0 5px rgba(255, 255, 255, 0.3),
        0 0 10px rgba(255, 255, 255, 0.1);
    color: #f8f9fa;
}

/* Classe pour les icônes/symboles décoratifs */
.slate-icon {
    color: #f8f9fa;
    font-size: 2rem;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
    margin: 0 15px;
}

/* ===== PADDING PERSONNALISABLES ===== */

/* Petits paddings */
.slate-header.padding-sm {
    padding: 1rem;
}

/* Paddings moyens */
.slate-header.padding-md {
    padding: 2rem 1rem;
}

/* Grands paddings */
.slate-header.padding-lg {
    padding: 3rem 1.5rem;
}

/* Paddings extra-larges */
.slate-header.padding-xl {
    padding: 4rem 2rem;
}

/* boutons personnalisés */

.btn-outline-inner {
    box-shadow: inset 0 0 0 4px #212529, inset 0 0 0 5px white;
    border-radius: 0 0 10px 10px !important;
    /*margin-top:-6px;*/
}