#header {
    border-bottom: none;
}
body.header-transparent #header {
    border-bottom: 1px solid var(--q2-nav-border);
}
body.scrolled #header {
    box-shadow: none;
}

:root[data-theme="dark"] {
    --q2-link: color-mix(in oklab,#242424 10%,white 90%);   
}


/*Général*/
/*p {
    text-align: justify;
}*/
.navbar-brand svg {
  height: 50px; 
}
.mobile-menu {
    right: 25px;
}
ul li {
    list-style: none;
}
h1 a,
.nav a {
    text-decoration: none;
}
/*Page accueil*/
.feature-content h2 {
    margin-top: 0;
    color: #ffffff;
}
.feature-content a {
    text-decoration: none;
    color:#ffffff !important;
}
body.custom_columns .modular-features .columns {
  display: grid;
  gap: clamp(1.25rem, 2vw, 1.75rem);
  grid-template-columns: repeat(auto-fit, minmax(261px, 1fr));
  margin-top: 2.5rem;
}
body.custom_padd h2::before {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  border-radius: 2px;
  background: #ffffff;
  margin-bottom: 0.7rem;
  opacity: 0.9;
}
body.custom_padd .modular-features {
    padding-block: clamp(1.5rem, 5vw, 3.5rem);
}

.feature-counter-wrapper {
    font-size: 3rem; /* Ajustez la taille selon vos goûts */
    font-weight: 800;
    background: linear-gradient(135deg, #FFCF56 0%, #3AB795 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--primary); /* Réutilise la couleur principale définie par Pico CSS */
    line-height: 1;
    margin-bottom: 0.5rem;
    display: inline-block;
}
.feature-suffix {
    font-size: 2rem; /* Le % ou le + légèrement plus petit que le chiffre */
    font-weight: 600;
}
/* Grands écrans / PC */
@media (min-width: 992px) {
    /* Si le Markdown demande grid-3 */
    .columns.grid-2 {
        grid-template-columns: repeat(2, 1fr);
    }
    .columns.grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    
    /* Si le Markdown demande grid-4 */
    .columns.grid-4 {
        grid-template-columns: repeat(4, 1fr);
    }
}
/* Style du bloc colonne quand il possède une image de fond */
.modular-features .column.has-bg {
    /* Mix entre un voile protecteur sombre et l'image injectée par le Twig */
    background-image: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)), var(--feature-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    /* Habillage pour que ça ressemble à une belle carte */
    padding: var(--pico-spacing, 1.5rem);
    border-radius: var(--pico-border-radius, 0.5rem);
    transition: transform var(--pico-transition, 0.2s ease-in-out);
}

/* Effet au survol optionnel pour rendre le tout interactif */
.modular-features .column.has-bg:hover {
    transform: translateY(-4px);
}

/* Assurer la lisibilité du texte (blanc) sur le fond sombre */
.modular-features .column.has-bg,
.modular-features .column.has-bg h6,
.modular-features .column.has-bg p,
.modular-features .column.has-bg i {
    color: #ffffff !important;
}

/* Optionnel : Donner une couleur légèrement différente à l'icône sur l'image */
.modular-features .column.has-bg .feature-icon i {
    color: var(--pico-primary, #10b981) !important; /* Utilise la couleur principale de ton Pico */
    margin-bottom: 0.5rem;
}

/* Listing Offres apprentissage */
.tags-navigation-header {
    margin: 0 0 1.5rem;
}
/*.tags-navigation-header .tags a:hover {
    margin: 0 0 1.5rem;
}*/
.tags-navigation-header .tags .label-primary:hover {
  color: var(--q2-text-strong) !important;
}
.offre-content a {
    text-decoration: none;
}
.card-taxonomy,
.list-formations .card .tags {
    position: absolute;
    padding: 1.25rem 1.375rem 0.625rem;
}
.formation-details article {
    padding: 1.25rem 1.375rem 0.625rem;
}
.strip_org {
    /* Définit l'épaisseur et le style de la bordure gauche */
    border-left: 1.25rem solid #2060df; /* Utilise la couleur 'primary' par défaut de Spectre */
    padding-left: 1rem;               /* Ajoute un espace entre la bordure et le texte */
    margin-bottom: 1rem;              /* Espacement sous le div */
}
.strip_prog {
    /* Définit l'épaisseur et le style de la bordure gauche */
    border-left: 1.25rem solid #007a50; /* Utilise la couleur 'primary' par défaut de Spectre */
    padding-left: 1rem;               /* Ajoute un espace entre la bordure et le texte */
    margin-bottom: 1rem;              /* Espacement sous le div */
}
.strip_deb {
    /* Définit l'épaisseur et le style de la bordure gauche */
    border-left: 1.25rem solid #ff9500; /* Utilise la couleur 'primary' par défaut de Spectre */
    padding-left: 1rem;               /* Ajoute un espace entre la bordure et le texte */
    margin-bottom: 1rem;              /* Espacement sous le div */
}
.strip_etu {
    /* Définit l'épaisseur et le style de la bordure gauche */
    border-left: 1.25rem solid #c52f21; /* Utilise la couleur 'primary' par défaut de Spectre */
    padding-left: 1rem;               /* Ajoute un espace entre la bordure et le texte */
    margin-bottom: 1rem;              /* Espacement sous le div */
}
.strip_compl {
    /* Définit l'épaisseur et le style de la bordure gauche */
    border-left: 1.25rem solid #ccc6b4; /* Utilise la couleur 'primary' par défaut de Spectre */
    padding-left: 1rem;               /* Ajoute un espace entre la bordure et le texte */
    margin-bottom: 1rem;              /* Espacement sous le div */
}

/* Sidebar offres */
.btn-sidebar {
    margin-top:1.25em;
}
.sidebar-content .card-image img {
    border-radius: 12px 12px 0 0;
}
.sidebar-content a, .pfooter a {
    text-decoration: none !important;
}
.title_autre {
    margin: 1rem;
}
.autre {
    margin-bottom: 1.25rem;
}
/*Map Google*/
.map-responsive-container {
    overflow: hidden;
    padding-bottom: 56.25%; /* Ratio 16:9 */
    position: relative;
    height: 0;
}

.map-responsive-container iframe {
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    position: absolute;
    border-radius: 4px; /* Optionnel : aligné sur les radii du design system */
}
.footer_max { 
    max-width: 1200px;
    width: 100%;
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2rem);
}
.footer_max ul {
    padding-left: 0px;
}
.theme-logo svg * {
  fill: var(--q2-text-strong);
}
.theme-logo svg {
  width: auto;
  display: block;
  height: 85px;  
  margin: auto;
}
.features-comment {
    text-align: center;
    margin-top: 2rem; /* Espace par rapport aux blocs de chiffres au-dessus */
    color: var(--muted-color); /* Utilise la couleur de texte secondaire de Pico CSS */
    font-style: italic;
}

/* Si vous utilisez du markdown (comme l'étoile pour l'italique), Grav génère un <p> qu'on aligne aussi */
.features-comment p {
    margin: 0;
    font-size: 0.8rem;
}