/*
Theme Name: Twentytwentyfive Child
Author: Christelle Stasse
Description: Thème enfant du site
Version: 1.0
Text Domain: twentytwentyfive-child
Template: twentytwentyfive
*/

/* Taille de l'icône recherche entête */
:root :where(.wp-element-button, .wp-block-button__link) {
    padding-top: 0.6rem;
    padding-right: 2rem;
    padding-bottom: 0.4rem;
    padding-left: 2rem;
    border: 0.1rem solid transparent; /* Réserve l'espace pour éviter le décalage */
}

/* Hover icône recherche entête */
.wp-block-search__button.wp-element-button:hover {
    background-color: #ffffff !important;
    border-color: #8B0000 !important;
    border-width: 0.1rem !important;
    border-style: solid !important;
color: #8B0000 !important; /* Force le texte/l'icône classique en rouge */
}


/*Bloc sous-menu à droite*/
.wp-block-navigation.items-justified-right .wp-block-navigation__container .has-child .wp-block-navigation__submenu-container {
right:auto;
left:0;
}

/* menu hamburger sur tablette */
/** default is 600px pass to 1024px for button burger and container */
@media (max-width: 1024px) {
/* On affiche le hamburger sur tablette, SAUF si le menu est déjà ouvert */
  :not(.has-modal-open) .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex;
  }
}

@media (max-width: 1024px) {
.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
    bottom: 0;
    display: none;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
  }
}

/* Ciblage direct du span interne de WordPress pour court-circuiter l'héritage */
:root .menu-footer-survol .wp-block-navigation-item a:hover .wp-block-navigation-item__label,
:root .menu-footer-survol .wp-block-navigation-item a:focus .wp-block-navigation-item__label {
    text-decoration: underline !important;
    color: #ffffff !important;
}

/* Force la bordure rouge fine au survol pour tous les boutons standards */
:root .wp-block-button__link:hover,
:root .wp-element-button:hover {
    border: 0.1rem solid var(--wp--preset--color--accent-1) !important;
}

/* S'applique aux écrans de 1024px et moins (tablettes et mobiles) */
@media (max-width: 1024px) {
  .topbar-responsive {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important; /* Espacement entre les deux paragraphes empilés */
  }

  .topbar-responsive > * {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }
}

/*---- Accessibilité & Design Recherche -----*/

/* 1. Harmonisation globale du focus du site */
:root a:focus:not(:focus-visible),
:root button:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}

/* On applique le contour haché partout au clavier, sauf sur la recherche */
:root *:focus-visible:not([class*="wp-block-search"]):not([class*="wp-block-search"] *):not(.wp-block-button__link):not(.wp-element-button):not([type="submit"]):not(.ff-btn-submit):not(.wp-block-social-link-anchor) {
    outline: 2px dashed currentcolor !important;
    outline-offset: 4px !important;
}

/* 2. Tailles et structures (Tes règles de base) */
:root :where(.wp-element-button, .wp-block-button__link) {
    padding-top: 0.6rem;
    padding-right: 2rem;
    padding-bottom: 0.4rem;
    padding-left: 2rem;
    border: 0.1rem solid transparent;
}

/* 3. Structure recherche : Correction de la restriction de périmètre */
/* Ces règles ne s'appliquent PAS quand le menu mobile est ouvert (.has-modal-open) */
:root:not(.has-modal-open) .wp-block-search,
:root:not(.has-modal-open) .wp-block-search__inside-wrapper {
    display: inline-flex !important;
    width: max-content !important;
}

/* Hover icône recherche entête */
.wp-block-search__button.wp-element-button:hover {
    background-color: #ffffff !important;
    border-color: #8B0000 !important;
    border-width: 0.1rem !important;
    border-style: solid !important;
}

/* Sécurité : On supprime TOUT focus par défaut sur le bloc recherche au clic */
.wp-block-search, 
.wp-block-search *,
.wp-block-search__input {
    outline: none !important;
    box-shadow: none !important;
}

/* 3. --- LES POINTILLÉS UNIQUEMENT VIA LE CLAVIER (Classe injectée par JS) --- */

/* Focus haché dans le HEADER */
:root header .wp-block-search.is-keyboard-focused {
    outline: 2px dashed #8B0000 !important;
    outline-offset: 4px !important;
    border-radius: 4px;
}

/* Focus haché dans le FOOTER */
:root footer .wp-block-search.is-keyboard-focused {
    outline: 2px dashed #ffffff !important;
    outline-offset: 4px !important;
    border-radius: 4px;
}



/* Style du lien auteur (shortcode) dans le footer*/
Par défaut : blanc et non souligné (comme le menu du footer) */
.site-auteur-link {
    color: #ffffff !important;
    text-decoration: none !important;
    transition: text-decoration 0.2s ease;
}

/* Au survol à la souris */
.site-auteur-link:hover {
    color: #ffffff !important;
    text-decoration: underline !important;
} 

/* Logo plus petit sur des écrans mobiles (moins de 768px) */
@media (max-width: 767px) {
    .wp-block-site-logo img {
        max-width: 120px !important; /* Ajuste la valeur en pixels selon tes besoins */
        height: auto !important;
    }
}

/* Centrage du pied de page ajustement */
@media (max-width: 1024px) {
    /* 1. Force l'empilement et le centrage dans le footer ciblé */
    .footercentre .wp-block-group.alignwide {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 0.5rem !important; /* Espace entre le bloc texte et le bloc menu */
    }

    /* 2. Centre le texte de droits d'auteur du footer */
    .footercentre .wp-block-group.alignwide p {
        text-align: center !important;
        margin-bottom: 0 !important;
        line-height: 1.5 !important;
    }

    /* 3. Resserre le menu du footer comme un paragraphe */
    .footercentre .menu-footer-survol {
        justify-content: center !important;
        gap: 0px 1rem !important; 
    }
    
    .footercentre .menu-footer-survol .wp-block-navigation-item {
        margin: 0 !important;
        line-height: 1.5 !important;
    }
    
    .footercentre .menu-footer-survol .wp-block-navigation-item a {
        display: inline-block !important;
        padding: 0 !important;
    }
}

/*centrage bouto recherche dans la surcharge mobile*/
/* --- Centrage chirurgical du conteneur de recherche --- */
@media (max-width: 1024px) {
    /* 1. On masque le header parasite (sécurité) */
    .has-modal-open .wp-site-header { 
        display: none !important; 
    }

    /* 2. On centre l'intérieur du bloc recherche */
    .has-modal-open .wp-block-navigation__responsive-container .wp-block-search .wp-block-search__inside-wrapper {
        margin-left: auto !important;
        margin-right: auto !important;
        display: flex !important;
        justify-content: center !important;
    }
}


/* ==========================================
   1. LA BASE UNIVERSELLE (S'applique partout : en-tête ET composition)
   ========================================== */
.phone-link-icon {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

.phone-link-icon a {
    display: inline-flex !important;
    align-items: center !important;
    text-decoration: none !important;
    color: inherit !important;
}

.phone-link-icon a::before {
    content: "" !important;
    display: inline-block !important;
    width: 1em !important;
    height: 1em !important;
    flex-shrink: 0 !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 1em 1em !important;
    
    /* LE SÉCURITÉ ESPACE : Appliqué à la base, donc valable pour TOUTES les versions */
    margin-right: 10px !important; 
    
    /* Version par défaut (Blanche) - Trait affiné à 1.8 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'%3E%3C/path%3E%3C/svg%3E") !important;
}

/* ==========================================
   2. VARIATION NOIRE (Pour ta composition)
   ========================================== */
/* Si le bloc a AUSSI la classe phone-black, on remplace UNIQUEMENT le SVG par le noir */
.phone-link-icon.phone-black a::before {
    /* Version Noire - Trait affiné à 1.8 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'%3E%3C/path%3E%3C/svg%3E") !important;
}

/* ==========================================
   3. ICÔNE E-MAIL
   ========================================== */
/* Styles appliqués directement au paragraphe de l'e-mail */
.email-link-icon {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Styles appliqués au lien de l'e-mail */
.email-link-icon a {
    display: inline-flex !important;
    align-items: center !important;
    text-decoration: none !important;
    color: inherit !important;
}

/* Génération de l'icône enveloppe noire avant le lien */
.email-link-icon a::before {
    content: "" !important;
    display: inline-block !important;
    width: 1em !important;
    height: 1em !important;
    flex-shrink: 0 !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 1em 1em !important;
    
    /* Harmonisation de l'espace à 10px comme le téléphone */
    margin-right: 10px !important;
    
    /* Code SVG enveloppe - Trait affiné à 1.8 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'%3E%3C/rect%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'%3E%3C/path%3E%3C/svg%3E") !important;
}


/* ===================================================
   EFFETS AU SURVOL (HOVER) DES BOUTONS DE LA BANNIÈRE
   =================================================== */

/* 1. Survol du bouton rouge (fond rouge de la bannière)
   Quand on le survole, il devient blanc avec texte et bordure rouge */
.bouton-banniere-rouge .wp-block-button__link:hover {
    background-color: var(--wp--preset--color--base) !important; /* Blanc */
    color: var(--wp--preset--color--accent-1) !important;       /* Rouge */
    border-color: var(--wp--preset--color--accent-1) !important; /* Rouge */
}

/* 2. Survol du bouton blanc (dans ton empilement sur fond blanc)
   Quand on le survole, il devient jaune (accent-3) avec texte et bordure rouge */
.bouton-banniere-blanc .wp-block-button__link:hover {
    background-color: var(--wp--preset--color--accent-3) !important; /* Jaune */
    color: var(--wp--preset--color--accent-1) !important;       /* Rouge */
    border-color: var(--wp--preset--color--accent-1) !important; /* Rouge */
}

/* 1. Bouton blanc, hover jaune */
.bouton-fond-blanc .wp-block-button__link {
    background-color: var(--wp--preset--color--base) !important;
    color: var(--wp--preset--color--accent-1) !important;
    border: 2px solid var(--wp--preset--color--accent-1) !important;
}

/* État au survol : Fond jaune, texte rouge, bordure rouge */
.bouton-fond-blanc .wp-block-button__link:hover {
    background-color: var(--wp--preset--color--accent-3) !important;
    color: var(--wp--preset--color--accent-1) !important;
    border-color: var(--wp--preset--color--accent-1) !important;
}

/*===================================================
   Style Rangée bannière avec cadres identiques
   =================================================== */

/* 1. Sur Ordinateur et Tablette (La Rangée) */
.paragraphe-bouton {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 16px !important; /* Espace entre les cadres sur PC */
}

/* On cible TOUS les éléments enfants directs de la rangée (tes boutons/cadres) */
.paragraphe-bouton > * {
    width: 190px !important;       /* Largeur fixe pour aligner tous les cadres */
    min-width: 190px !important;   /* Sécurité anti-écrasement */
    box-sizing: border-box !important;
}

/* On s'assure que le texte à l'intérieur est bien centré */
.paragraphe-bouton > * p {
    text-align: center !important;
    margin: 0 !important;
}

/* 2. Sur Mobile (2 par 2) */
@media (max-width: 767px) {
    .paragraphe-bouton {
        gap: 12px !important; /* Espace réduit sur mobile */
    }

    .paragraphe-bouton > * {
        width: calc(50% - 6px) !important; /* Force les 2 colonnes */
        min-width: unset !important;       /* Libère les 190px du PC */
    }
}

/*FAQ avec titre rouge*/
/* 1. Flèche et titre en rouge */
.faq-rouge > summary {
    color: #8B0000; /* Remplace par ton code couleur rouge */
}

/* 2. On force la réponse (le contenu qui suit) à rester noire ou d'une autre couleur */
.faq-rouge > :not(summary) {
    color: #111111;
}

/* On applique l'arrondi que l'interface visuelle ne propose pas */
.faq-rouge {
    border-radius: 20px;
}

/* 1. On supprime le cadre par défaut lors du clic à la souris */
.faq-rouge > summary:focus {
    outline: none;
}

/* 2. On le réactive UNIQUEMENT pour la navigation au clavier */
.faq-rouge > summary:focus-visible {
    outline: 2px dashed #8B0000; /* Un contour en pointillés */
    outline-offset: 4px;         /* Légèrement décollé pour le design */
}

/* ===================================================
   Style Rangée bannière - 3 cadres identiques
   =================================================== */

/* 1. Sur Ordinateur et Tablette (Reste sur 1 seule ligne, aligné à gauche) */
.triple-bouton-paragraphe {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important; /* CORRECTION : Interdit le passage à la ligne sur PC et Tablette */
    justify-content: flex-start !important; /* Aligné à gauche */
    gap: 16px !important; 
}

/* On cible les 3 éléments enfants directs */
.triple-bouton-paragraphe > *  {  width: 190px !important;       
    min-width: 120px !important;   /* CORRECTION : Permet aux boutons de rétrécir légèrement si l'iPad manque de place, au lieu de sauter à la ligne */
    max-width: 190px !important;
    flex: 1 1 190px !important;    /* Autorise une flexibilité fluide sur tablette */
    box-sizing: border-box !important;
}

/* Centrage du texte */
.triple-bouton-paragraphe > * p {
    text-align: center !important;
    margin: 0 !important;
}

/* 2. Sur Mobile Uniquement (En dessous de 767px : 2 sur la première ligne, le 3ème centré) */
@media (max-width: 767px) {
    .triple-bouton-paragraphe {
        flex-wrap: wrap !important; /* On réactive le passage à la ligne sur mobile */
        gap: 12px !important; 
        justify-content: center !important; 
    }

    .triple-bouton-paragraphe > * {
        width: calc(50% - 6px) !important; 
        min-width: unset !important; 
        max-width: unset !important;
        flex: unset !important;
    }
}

/*Visibillité texte sur image bannière*/
.flou-lecture {
    background-color: rgba(0, 0, 0, 0.3); /* Un fond noir très léger */
    backdrop-filter: blur(8px); /* L'effet magique de flou */
    padding: 20px;
    border-radius: 8px;
}



/* 1. Uniquement pour les GRANDS ÉCRANS (Ordinateurs) */
@media (min-width: 1025px) {
    .banniere-bridee {
        max-height: 680px !important;
        overflow: hidden !important;
    }
}

/* 2. Pour les TABLETTES (iPad Mini, Surface) et MOBILES */
@media (max-width: 1024px) {
    .banniere-bridee {
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        overflow: visible !important;
    }
    
    /* On force le conteneur de colonnes à s'empiler et à ne pas déborder */
    .banniere-bridee .wp-block-columns {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Chaque colonne prend toute la largeur disponible, sans pixel de trop */
    .banniere-bridee .wp-block-column {
        margin-top: 15px !important;
        margin-bottom: 15px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        flex-basis: 100% !important;
        box-sizing: border-box !important;
    }
}

.sommaire-propre, .sommaire-propre ul, .sommaire-propre ol {
    list-style-type: none !important; /* Enlève les points, ronds et numéros */
    padding-left: 20px; /* Garde un joli décalage propre vers la droite pour l'imbrication */
}

/* Fluent form*/
/* 1. Force le curseur "main" sur la case à cocher RGPD */
.fluentform .ff-el-form-check input[type="checkbox"] {
    cursor: pointer !important;
}

/* 2. Remet le curseur par défaut (flèche) sur le texte explicatif */
.fluentform .ff-el-form-check-label {
    cursor: default !important;
}

/* 3. Assure que le curseur "main" s'applique uniquement sur ton lien hypertexte */
.fluentform .ff-el-form-check-label a {
    cursor: pointer !important;
    text-decoration: underline !important;
}

/* ===================================================
   ACCESSIBILITÉ CLAVIER (FOCUS) : BOUTON FLUENT FORM
   =================================================== */

/* Applique les pointillés rouges lors de la navigation au clavier */
.fluentform .ff-btn-submit:focus-visible {
    outline: 2px dashed #8B0000 !important; /* Ton rouge foncé */
    outline-offset: 4px !important;
    box-shadow: none !important;
}

/* Supprime l'effet de focus par défaut du navigateur au clic souris */
.fluentform .ff-btn-submit:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}


/* Hauteur image mise en avant des articles en mobile */

@media (max-width: 767px) {
    /* Le code ne ciblera que le bloc qui possède cette classe précise */
    .img-mise-en-avant-article-seul img,
    .img-mise-en-avant-article-seul {
        height: 200px !important;
    }
}

/* personalisation catégorie avec fond de couleur sur les posts pour ne pas qu'elle prenne toute la largeur*/

/* Réduit le fond pour qu'il épouse uniquement la taille du texte */
.badge-categorie {
    display: table !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
}

.badge-categorie a {
    display: inline-block !important;
    background-color: #fef9c3; /* Mets ta couleur ici */
    padding: 6px 12px;
    border-radius: 4px;
}

/* 1. On retire le soulignement par défaut sur le lien du badge */
.badge-categorie a {
    text-decoration: none !important;
    transition: background-color 0.2s ease, color 0.2s ease; /* Pour une transition fluide */
}

/* 2. L'effet au survol (Hover) et au focus (Accessibilité clavier) */
.badge-categorie a:hover,
.badge-categorie a:focus {
    background-color: #8B0000 !important; 
    color: #ffffff !important; /* Force le texte en blanc */
    text-decoration: none !important; /* Garantit l'absence de soulignement au survol */
}

/*===================================================
Boucle requetes accueil : cartes de même hauteur avec arrondis
===================================================*/

/* 1. ON LAISSE WORDPRESS GÉRER SA GRILLE (GRID)
   On applique le Flexbox uniquement sur les éléments de liste (li) 
   pour qu'ils s'étirent tous sur la hauteur de leur ligne. */
.wp-block-post-template.is-layout-grid {
    align-items: stretch !important;
}

.wp-block-post-template.is-layout-grid li.post:not([style*="display: none"]):not([style*="display:none"]) {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

/* 2. FORCE le masquage des éléments doublons de l'éditeur */
.wp-block-post-template li.post[style*="display: none"],
.wp-block-post-template li.post[style*="display:none"] {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 3. STRUCTURE ET ALIGNEMENTS INTERNES DE LA CARTE */
/* On s'assure que chaque carte prend toute la hauteur disponible et pousse le bouton en bas */
.ma-carte-article {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    flex-grow: 1 !important;
}

.ma-carte-article .wp-block-post-title {
    text-align: left !important;
    margin-left: 0 !important;
}

/* Le groupe interne s'étire pour occuper l'espace */
.ma-carte-article > .wp-block-group {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
}

/* L'extrait (excerpt) s'étire aussi pour pousser le lien "Lire la suite" tout en bas */
.ma-carte-article .wp-block-post-excerpt {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
}

.ma-carte-article .wp-block-post-excerpt__more-text {
    margin-top: auto !important;
    margin-bottom: 0 !important;
    align-self: flex-start; /* Aligne le bouton à gauche */
}

/* 4. GESTION DE L'IMAGE */
.ma-carte-article .wp-block-post-featured-image {
    width: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
    height: 220px !important; /* Hauteur par défaut (Desktop) */
}

@media (min-width: 768px) and (max-width: 1024px) {
    .ma-carte-article .wp-block-post-featured-image {
        height: auto !important; /* Libère la hauteur pour retrouver de belles proportions */
        max-height: 400px !important; /* Sécurité pour éviter qu'une image verticale devienne immense */
    }
}

@media (max-width: 767px) {
    .ma-carte-article .wp-block-post-featured-image {
        height: 180px !important; /* Hauteur Mobile */
    }
}

.ma-carte-article .wp-block-post-featured-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/*===================================================
Correction grille cartes : Passage en 1 colonne sur tablette
===================================================*/
@media (max-width: 1024px) {
    .wp-block-post-template.is-layout-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
    }

    .wp-block-post-template.is-layout-grid li.post {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}


/*===================================================
Alignement à gauche des éléments de la carte article
===================================================*/

/* 1. Force le badge de catégorie à s'aligner à gauche dans les cartes */
.ma-carte-article .badge-categorie,
.ma-carte-article .wp-block-post-terms {
    display: block !important;
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: auto !important;
}

/* On force aussi le lien à l'intérieur à ne pas se centrer */
.ma-carte-article .badge-categorie a,
.ma-carte-article .wp-block-post-terms a {
    margin-left: 0 !important;
    margin-right: auto !important;
}

/* 2. Aligne la date de publication à gauche */
.ma-carte-article .wp-block-post-date {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    display: block !important;
}

/* Pour catégorie dans modèle article */
/* Ce code cible l'interface de l'éditeur Gutenberg uniquement */
.editor-styles-wrapper .badge-categorie {
    background-color: #f0f0f0 !important; /* Ajoute un fond gris temporaire dans l'admin */
    outline: 1px dashed #ccc; /* Crée une petite bordure en pointillés */
}

/* ===================================================
Colonne offres accueil responsive
===================================================*/
/* --- RESPONSIVE TABLETTE (IPAD PRO, AIR, MINI) --- */
@media (max-width: 1024px) {
    /* 1. Force les colonnes à s'empiler l'une sous l'autre */
    .colonnes-offres-responsive {
        flex-direction: column !important;
        gap: var(--wp--preset--spacing--40, 2rem) !important; /* Espace entre les blocs empilés */
    }

    .colonnes-offres-responsive .wp-block-column {
        flex-basis: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* 2. Force l'image à prendre toute la largeur de sa colonne */
    .colonnes-offres-responsive .wp-block-image img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }
}

/* ===================================================
Colonne offres accueil "découvrir l'offre" en bas de la colonne
===================================================*/
/* On force le conteneur principal à s'étirer */
.wp-block-columns.colonnes-offres-alignees {
    display: flex !important;
    align-items: stretch !important;
}

/* On force chaque colonne interne à être une zone flexible */
.wp-block-columns.colonnes-offres-alignees > .wp-block-column {
    display: flex !important;
    flex-direction: column !important;
}

/* On s'assure que ton groupe de texte prend toute la place disponible */
.wp-block-columns.colonnes-offres-alignees .colonne-custom-mobile {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
}

/* On pousse le dernier paragraphe (ton bouton) vers le bas */
.wp-block-columns.colonnes-offres-alignees .colonne-custom-mobile > p:last-child {
    margin-top: auto !important;
}


/* ===================================================
page accueil responsive tablette image Francis Roy et texte
===================================================*/

@media (max-width: 1024px) {
    .force-empilement {
        display: flex !important;
        flex-wrap: wrap !important;
    }
    .force-empilement > .wp-block-column {
        flex-basis: 100% !important;
        width: 100% !important;
        margin-right: 0 !important;
        margin-bottom: 20px;
    }
}

/* ===================================================
   Police plus petite (18 px)pour fil d'ariane Yoast et autre texte
   =================================================== */
/* Style pour les éléments secondaires (Fil d'ariane, Meta, etc.) */
.texte-secondaire, 
.texte-secondaire * {
    font-size: clamp(0.938rem, 0.95rem + 0.1vw, 1.063rem) !important;
    line-height: 1.5;
}


/* ===================================================
   Fil d'ariane lien blanc sur bannière rouge
   =================================================== */
/* Force la couleur sur tous les éléments du fil d'ariane avec la classe ariane-lien-blanc */
/* 1. Couleur blanche sur tout le bloc */
.ariane-lien-blanc, 
.ariane-lien-blanc span, 
.ariane-lien-blanc a, 
.ariane-lien-blanc .breadcrumb_last {
    color: #ffffff !important;
}

/* 2. Trait plein au repos */
.ariane-lien-blanc a {
    text-decoration: solid underline #ffffff 1px !important;
    text-underline-offset: 5px !important;
}

/* 3. Tirets au survol */
.ariane-lien-blanc a:hover {
    text-decoration: dashed underline #ffffff 3px !important;
    text-underline-offset: 5px !important;
}

/* 4. Page en cours (pas de trait, pas de gras) */
.ariane-lien-blanc .breadcrumb_last {
    font-weight: normal !important;
    text-decoration: none !important;
}


/* ===================================================
   ACCESSIBILITÉ CLAVIER (FOCUS) : BOUTONS BANNIÈRE
   =================================================== */

/* 1. PAR DÉFAUT SUR LE SITE (Fonds clairs)
   Tous les boutons génériques ont des pointillés ROUGES */
:root .wp-block-button__link:focus-visible,
:root .wp-element-button:focus-visible {
    outline: 2px dashed #8B0000 !important; /* Rouge foncé */
    outline-offset: 4px !important;
    box-shadow: none !important;
}

/* 2. BOUTON SUR FOND BLANC (.bouton-banniere-blanc)
   On lui applique des pointillés ROUGES pour qu'ils soient visibles sur le blanc */
:root .bouton-banniere-blanc .wp-block-button__link:focus-visible {
    outline: 2px dashed #8B0000 !important; /* Rouge foncé */
    outline-offset: 4px !important;
    box-shadow: none !important;
}

/* 3. BOUTON SUR FOND ROUGE (.bouton-banniere-rouge)
   On lui applique des pointillés BLANCS pour qu'ils soient visibles sur le rouge */
:root .bouton-banniere-rouge .wp-block-button__link:focus-visible {
    outline: 2px dashed #ffffff !important; /* Blanc */
    outline-offset: 4px !important;
    box-shadow: none !important;
}

/* 4. ÉTAT AU SURVOL (HOVER)
   Quand un bouton a le focus clavier et qu'on passe la souris dessus,
   les pointillés passent ou restent en ROUGE pour s'adapter au fond jaune ou blanc */
:root .wp-block-button__link:focus-visible:hover,
:root .wp-element-button:focus-visible:hover,
:root .bouton-banniere-blanc .wp-block-button__link:focus-visible:hover,
:root .bouton-banniere-rouge .wp-block-button__link:focus-visible:hover {
    outline-color: #8B0000 !important;
    outline-style: dashed !important;
}

/* ===================================================
   CORRECTIF RESPONSIVE : Barre de recherche Mobile (notamment pour page 404)
   =================================================== */
/* /* ===================================================
   SECTION RECHERCHE CENTRÉE (Empilement & Centrage 404)
   =================================================== */

/* 1. Force le groupe parent à s'empiler et à tout centrer */
.section-recherche-centree {
    display: flex !important;
    flex-direction: column !important; /* Force l'empilement vertical (Image > Texte > Recherche) */
    align-items: center !important;     /* Centre horizontalement tous les enfants */
    text-align: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 2. Force le bloc de recherche à se centrer et s'élargir */
.section-recherche-centree .wp-block-search {
    display: flex !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    max-width: 450px !important;        /* Largeur élégante sur PC */
    box-sizing: border-box !important;
}

.section-recherche-centree .wp-block-search__inside-wrapper {
    display: flex !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 3. Ajustements pour smartphones (< 768px) */
@media (max-width: 767px) {

    /* Le texte prend toute la largeur utile sur mobile */
    .section-recherche-centree p,
    .section-recherche-centree .wp-block-paragraph {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    /* Réduction de la largeur du bloc pour écran étroit */
    .section-recherche-centree .wp-block-search {
        max-width: 320px !important;
    }

    /* Anti-débordement mobile */
    .section-recherche-centree .wp-block-search__input {
        min-width: 0 !important;
        flex-shrink: 1 !important;
        width: 100% !important;
    }

    .section-recherche-centree .wp-block-search__button {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        flex-shrink: 0 !important;
    }
}

/* ===================================================
   DEBLOCAGE FORCE DU SKIP-LINK (WCAG / TT5)
   =================================================== */

/* On force l'annulation de TOUTE zone de découpe au focus */
a.skip-link.screen-reader-text:focus,
#wp-skip-link:focus {
    /* 1. Neutralisation totale du masquage de screen-reader */
    clip: auto !important;
    clip-path: none !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    overflow: visible !important;
    
    /* 2. Affichage prioritaire au-dessus du flux global */
    display: inline-block !important;
    position: fixed !important;
    top: 20px !important;
    left: 20px !important;
    z-index: 9999999 !important;
    
    /* 3. Style hyper lisible (Texte noir sur Fond blanc) */
    background-color: #ffffff !important;
    color: #8B0000 !important;
    padding: 14px 22px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-decoration: underline !important;
    border: 2px solid #000000 !important;
    border-radius: 6px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;
    
    /* Focus d'accessibilité */
    outline: 3px solid #000000 !important;
    outline-offset: 3px !important;
}

/* ===================================================
   FOCUS LINKEDIN - POINTILLÉS ROUGES (#8B0000)
   =================================================== */

/* 1. Autorise le débordement */
.wp-social-link-linkedin,
.wp-block-social-link-anchor {
    overflow: visible !important;
}

/* 2. Pointillés rouges #8B0000 */
.wp-social-link-linkedin a.wp-block-social-link-anchor:focus-visible {
    border-radius: 50% !important;
    outline: 2px dashed #8B0000 !important;
    outline-offset: 4px !important;
    box-shadow: none !important;
}

/* 1. Reset du conteneur Polylang */
.polylang-languages, 
ul.polylang-languages {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* 2. Style de base du bouton */
.polylang-languages li a,
.polylang-languages .lang-item a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px 14px !important;
    
    font-weight: 600 !important;
    text-decoration: none !important;
    color: #8B0000 !important;
    background-color: transparent !important;
    
    border: 1.5px solid #8B0000 !important;
    border-radius: 6px !important;
    
    min-height: 40px !important;
    box-sizing: border-box !important;
    transition: all 0.15s ease-in-out !important;
}

/* 3. Au survol et au clic */
.polylang-languages li a:hover,
.polylang-languages li a:active,
.polylang-languages li a:focus,
.polylang-languages .lang-item a:hover,
.polylang-languages .lang-item a:active,
.polylang-languages .lang-item a:focus {
    font-weight: 800 !important;
    border-width: 2.5px !important;
    color: #8B0000 !important;
    border-color: #8B0000 !important;
    padding: 5px 13px !important; /* Ajustement d'épaisseur */
}

/*Polylang, bloc langue navigation*/
/* 1. Style du bouton de base */
li.wp-block-polylang-navigation-language-switcher a.wp-block-navigation-item__content {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    padding: 6px 14px !important;
    background-color: transparent !important;
    
    /* On fixe la bordure de base */
    border: 1.5px solid #8B0000 !important;
    border-radius: 6px !important;
    
    min-height: 40px !important;
    box-sizing: border-box !important;
    transition: all 0.15s ease-in-out !important;
    text-decoration: none !important;
    margin-top: 0 !important; 
}

/* 2. Style du texte */
li.wp-block-polylang-navigation-language-switcher a.wp-block-navigation-item__content .wp-block-navigation-item__label {
    color: #8B0000 !important;
    font-weight: 400 !important;
    transition: all 0.15s ease-in-out !important;
}

/* 3. Effet au survol / clic : Ombre interne pour épaissir sans faire bouger la taille */
li.wp-block-polylang-navigation-language-switcher a.wp-block-navigation-item__content:hover,
li.wp-block-polylang-navigation-language-switcher a.wp-block-navigation-item__content:focus,
li.wp-block-polylang-navigation-language-switcher a.wp-block-navigation-item__content:active {
    /* Garder le padding STRICTEMENT identique */
    padding: 6px 14px !important; 
    
    /* Épaissit visuellement le trait vers l'INTÉRIEUR du bouton */
    box-shadow: inset 0 0 0 1px #8B0000 !important; 
}

/* 4. Texte plus gras au survol */
li.wp-block-polylang-navigation-language-switcher a.wp-block-navigation-item__content:hover .wp-block-navigation-item__label,
li.wp-block-polylang-navigation-language-switcher a.wp-block-navigation-item__content:focus .wp-block-navigation-item__label,
li.wp-block-polylang-navigation-language-switcher a.wp-block-navigation-item__content:active .wp-block-navigation-item__label {
    font-weight: 400 !important;
    color: #8B0000 !important;
    text-shadow: 0.3px 0 0 #8B0000, -0.3px 0 0 #8B0000 !important;
}

/* 5. Icône de la Terre placée DEVANT le texte */
li.wp-block-polylang-navigation-language-switcher a.wp-block-navigation-item__content::before {
    content: "" !important;
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B0000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20'/%3E%3Cpath d='M2 12h20'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
}

/* 1. Supprime la marge parasite ajoutée par Gutenberg au-dessus du plugin */
#mysticky-wrap {
    margin-top: 0 !important;
    margin-block-start: 0 !important;
    min-height: 120px !important;
}

/* 2. Verrouille la hauteur exacte du conteneur nav */
#mysticky-nav, 
.wp-block-group.navbar {
    min-height: 120px !important;
}


/* ===================================================
   Personaisation page Complianz Politique de Cookies
   =================================================== */

/* --- COMPLIANZ : DOCUMENTS JURIDIQUES --- */

/* Titres H2 uniquement */
div.cmplz-document h2, 
div.cmplz-document h2 * { 
  font-size: var(--wp--preset--font-size--xx-large) !important; 
}

/* Tout le reste du contenu (Titres H3-H5, textes, tableaux, liens, accordéons, div, span) */
div.cmplz-document :is(h3, h3 *, h4, h4 *, h5, h5 *, p, li, a, table, td, td *, th, th *, div, span, .cmplz-trademark, .cmplz-category-header, .cmplz-category-title, .cmplz-always-active, .cmplz-details) {
  font-size: var(--wp--preset--font-size--large) !important;
}

/* --- COMPLIANZ : BANNIÈRE COOKIES --- */

.cmplz-cookiebanner .cmplz-title {
  display: block !important;
  font-size: var(--wp--preset--font-size--medium) !important;
  font-weight: 700 !important;
}