/*
Theme Name: Carnet Catalan Child
Description: Thème enfant FSE pour Carnet Catalan.
Author: Lead Developer
Template: twentytwentyfour
Version: 1.0.4
*/

/* ==========================================================================
   1. SÉCURITÉ RESPONSIVE ET RESET (Anti-Scroll Horizontal)
   ========================================================================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden; /* Coupe ce qui dépasse pour bloquer le site de gauche à droite */
    width: 100%;
    position: relative;
    background-color: var(--wp--preset--color--paper);
}

img, picture, svg, video {
    display: block;
    max-width: 100%;
    height: auto;
}

/* ==========================================================================
   2. TYPOGRAPHIE GLOBALE & LIENS
   ========================================================================== */
/* Titres de la grille d'articles : Taille ajustée et fluide */
html body .wp-block-post-title {
    font-size: clamp(1.1rem, 2vw, 1.4rem) !important;
    line-height: 1.3 !important;
    margin-top: 0.8rem;
    margin-bottom: 0.5rem;
}

/* Force les titres cliquables en Gris Encre -> Bleu Primaire au survol */
html body h1 a, html body h2 a, html body h3 a, html body h4 a, html body h5 a, html body h6 a,
html body .wp-block-post-title a {
    color: var(--wp--preset--color--ink); 
    text-decoration: none;
    transition: color 0.3s ease-in-out;
}

html body h1 a:hover, html body h2 a:hover, html body h3 a:hover, 
html body h4 a:hover, html body h5 a:hover, html body h6 a:hover,
html body .wp-block-post-title a:hover {
    color: var(--wp--preset--color--primary);
}

/* Liens dans les textes d'articles */
html body p a {
    color: var(--wp--preset--color--primary);
    text-decoration: underline;
    text-underline-offset: 4px;
    transition: color 0.3s ease-in-out;
}

html body p a:hover {
    color: var(--wp--preset--color--secondary);
}

/* Badges / Tags des catégories (Ocre Doré) */
html body .wp-block-post-terms a {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--wp--preset--color--secondary);
    border: 1px solid var(--wp--preset--color--secondary);
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    transition: all 0.3s ease;
}

html body .wp-block-post-terms a:hover {
    background-color: var(--wp--preset--color--secondary);
    color: var(--wp--preset--color--paper);
}

/* ==========================================================================
   3. MENU DE NAVIGATION (PC) - Purifié et Stabilisé
   ========================================================================== */
/* Piliers principaux (Niveau 1) */
html body .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-item > a.wp-block-navigation-item__content,
html body .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-item > a.wp-block-navigation-item__content span {
    font-family: var(--wp--preset--font-family--inter);
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--wp--preset--color--ink);
    transition: color 0.3s ease;
}

html body .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-item:hover > a.wp-block-navigation-item__content,
html body .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-item:hover > a.wp-block-navigation-item__content span {
    color: var(--wp--preset--color--primary);
}

/* Petite flèche du sous-menu */
html body .wp-block-navigation-submenu__toggle {
    color: var(--wp--preset--color--ink);
    transition: color 0.3s ease;
}
html body .wp-block-navigation-item:hover > .wp-block-navigation-submenu__toggle {
    color: var(--wp--preset--color--primary);
}

/* Boîte du Menu Déroulant (Écrase Gutenberg, largeur dynamique parfaite) */
html body .wp-block-navigation__submenu-container,
html body .wp-block-navigation .has-child:not(.open-on-click):hover > .wp-block-navigation__submenu-container,
html body .wp-block-navigation .has-child:not(.open-on-click):not(.open-on-hover-click):focus-within > .wp-block-navigation__submenu-container {
    background-color: var(--wp--preset--color--paper)!important;;
    border: 1px solid rgba(42, 44, 43, 0.08);
    box-shadow: 0px 15px 35px rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    padding: 10px 0;
    min-width: 240px; 
    width: max-content; /* S'adapte au texte */
}

/* Liens du Menu Déroulant (Zone de clic fixe, seul le texte bougera) */
html body .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    display: block;
    padding: 10px 20px;
    white-space: nowrap; /* Empêche le retour à la ligne et maintient la boîte */
    transition: background-color 0.2s ease;
}

/* Le texte à l'intérieur du lien */
html body .wp-block-navigation__submenu-container .wp-block-navigation-item__content span {
    display: inline-block;
    font-family: var(--wp--preset--font-family--inter);
    font-weight: 400;
    font-size: 15px;
    text-transform: none;
    letter-spacing: normal;
    color: var(--wp--preset--color--ink);
    transition: transform 0.3s ease-out, color 0.3s ease-out; 
}

/* L'effet de survol (La boîte reste fixe, le texte glisse) */
html body .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
    background-color: rgba(56, 90, 112, 0.03); /* Repère visuel ultra léger */
}

html body .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover span {
    transform: translateX(6px); /* Glissement anti-saut */
    color: var(--wp--preset--color--primary);
}

/* ==========================================================================
   4. MENU MOBILE (Smartphone & Tablette)
   ========================================================================== */
/* Centre le conteneur du menu */
html body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
html body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
html body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
    align-items: center !important; 
    justify-content: center !important;
    width: 100%;
    position: relative;
}

/* Titres principaux (Centrés mathématiquement) */
html body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item > a.wp-block-navigation-item__content {
    display: flex;
    justify-content: center;
    width: 100%;
    font-size: 20px;
    letter-spacing: 2px;
    padding-right: 0;
}

/* La Flèche (Décrochée à droite pour ne pas fausser le centrage du texte) */
html body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle {
    position: absolute;
    right: 0;
    top: 0;
    padding: 10px 20px;
    height: 100%;
}

html body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
    padding-top: 15px;
    padding-bottom: 20px;
}

/* Sous-menus sur mobile (Centrés, plus gros, sans glissement) */
html body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    text-align: center;
    font-size: 18px;
    padding: 12px 20px;
    white-space: normal;
}

html body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
    background-color: transparent;
}

html body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover span {
    transform: none; /* Désactive le glissement tactile */
    color: var(--wp--preset--color--ink); /* Pas d'effet hover sur mobile */
}

/* ==========================================================================
   5. HERO ACCUEIL (100% Full Width Sécurisé)
   ========================================================================== */
.cc-hero-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 70vh;
    padding: 2rem;
    overflow: hidden;
    
    /* Calcul absolu pour forcer la pleine largeur sans casser la grille ni la scrollbar */
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
}

.cc-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.cc-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
   /* background-color: var(--wp--preset--color--ink);*/
    opacity: 0.6;
    z-index: 2;
}

.cc-hero-inner {
    position: relative;
    z-index: 3;
    text-align: center;
    color: var(--wp--preset--color--paper);
}

html body .cc-hero-title {
    color: var(--wp--preset--color--paper);
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    margin-bottom: 1rem;
}

.cc-hero-desc {
    font-size: clamp(1rem, 2vw, 1.25rem);
    margin-bottom: 2.5rem;
}
@media (max-width: 600px) {


html body .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-item > a.wp-block-navigation-item__content span{
	font-size:18px!important
}

}