/*
Theme Name: Twenty Twenty-Four (enfant)
Description: Thème enfant pour Twenty Twenty-Four
Author: Jonathan BESSON
Author URI: https://www.jonathan-besson.fr/
Template: twentytwentyfour
Version: 1.1.0
Text Domain: twentytwentyfourchild
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
*/

/* DEBUT DU CODE CSS : */

/* faites appel à un fichier externe pour organiser votre code CSS : */
@import url(./_partials/_variables.css);

/* 
OU (les deux sont compatible et s'utilise en fonction de vos choix d'organisation) 
écrivez directement votre code CSS ci-dessous : 
*/
:root :where(body) {
  /* test par l'application, modification de la variable de couleur du fond de page du thème parent */
  --wp--preset--color--base: rgb(255, 255, 255);
}

/* Masquer la pagination UAGB */
.uagb-post-pagination-wrap {
    display: none;
}

@media only screen and (max-width: 600px) {
    /* Exemple de media query pour les petits écrans */
    .width-auto, .width-auto a, .width-auto a span {
        width: 100%;
        display :inline-block;
    }
}

/* Footer : alignement responsive */
@media (max-width: 782px) {

  .footer-nav-responsive {
    text-align: center !important;
    align-items: center !important;
  }

  .footer-nav-responsive a,
  .footer-nav-responsive p,
  .footer-nav-responsive li {
    justify-content: center !important;
  }

  .footer-nav-responsive .wp-block-social-links {
    justify-content: center !important;
  }
}

/* =============================
   BLOG — Cartes (Query Loop) : grille + largeur + alignement
   ============================= */

/* Grille : meme largeur de colonnes + espaces reguliers */
.wp-block-post-template.is-layout-grid{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 28px !important;            /* espace entre colonnes/lignes */
  align-items: start !important;
}

/* Responsive : 2 colonnes */
@media (max-width: 1024px){
  .wp-block-post-template.is-layout-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Mobile : 1 colonne */
@media (max-width: 600px){
  .wp-block-post-template.is-layout-grid{
    grid-template-columns: 1fr !important;
  }
}

/* Chaque item occupe toute la colonne */
.wp-block-post-template.is-layout-grid > li.wp-block-post{
  width: 100% !important;
}

/* L'image mise en avant = pleine largeur, hauteur fixe */
.wp-block-post-template.is-layout-grid .wp-block-post-featured-image{
  width: 100% !important;
  margin: 0 0 10px 0 !important;   /* petit espace avant la carte */
  overflow: hidden !important;
}

.wp-block-post-template.is-layout-grid .wp-block-post-featured-image img{
  width: 100% !important;
  height: 220px !important;
  object-fit: cover !important;
  display: block !important;
}

/* La "carte" (groupe avec bordure) doit remplir la largeur */
.wp-block-post-template.is-layout-grid .wp-block-group{
  width: 100% !important;
  max-width: none !important;
}

/* Extrait + bouton (si present) */
.wp-block-post-excerpt{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}




/* ==========================================
   MOBILE : garder picto + texte sur la meme ligne
   Groupe : .liste-pictos
========================================== */
@media (max-width: 768px) {

  /* Chaque item = un bloc Colonnes */
  .liste-pictos .wp-block-columns {
    flex-wrap: nowrap !important;  /* ne pas empiler */
    align-items: center;
    gap: 10px;
  }

  /* Annule la regle WP qui force 100% en mobile */
  .liste-pictos .wp-block-columns > .wp-block-column {
    flex-basis: auto !important;
  }

  /* Colonne picto (1ere colonne) */
  .liste-pictos .wp-block-columns > .wp-block-column:first-child {
    flex: 0 0 28px !important;
    width: 28px;
  }

  /* Colonne texte (2e colonne) */
  .liste-pictos .wp-block-columns > .wp-block-column:last-child {
    flex: 1 1 auto !important;
    min-width: 0;
  }

  /* Picto centré */
  .liste-pictos figure,
  .liste-pictos .wp-block-image {
    margin: 0 !important;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .liste-pictos img {
    width: 28px;
    height: 28px;
    display: block;
  }

  /* Texte sans marges parasites */
  .liste-pictos p {
    margin: 0 !important;
    text-align: left;
  }
}

.h1-fuchsia {
  color: #FF009D;
}

/* =====================================================
   HEADER – GTRANSLATE (EN / FR / ES)
   ✔ Aligné à droite du menu
   ✔ Couleur blanche fiable
   ✔ Aucun impact sur le menu
   ✔ Desktop / Tablet / Mobile
   (ciblage basé sur ton HTML : .translate_wrapper + .glink.nturl.notranslate)
===================================================== */

/* Le shortcode dans le header */
header .wp-block-shortcode{
  display: inline-flex !important;
  align-items: center !important;
  margin-left: auto !important;     /* pousse à droite */
  white-space: nowrap !important;
}

/* Le wrapper réel de GTranslate chez toi */
header .wp-block-shortcode .translate_wrapper{
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px;
}

/* Liens EN / FR / ES (classes réelles) */
header .wp-block-shortcode a.glink.nturl.notranslate,
header .wp-block-shortcode a.glink.nturl.notranslate:visited,
header .wp-block-shortcode a.glink.nturl.notranslate:active{
  color: #ffffff !important;
  font-family: inherit !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  text-decoration: none !important;
  line-height: 1 !important;
  opacity: 1 !important;
}

/* Hover */
header .wp-block-shortcode a.glink.nturl.notranslate:hover{
  color: #ffffff !important;
  opacity: .85 !important;
}

/* Langue active */
header .wp-block-shortcode a.gt-current-lang{
  color: #ffffff !important;
  font-weight: 800 !important;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* =========================
   TABLETTE
========================= */
@media (max-width: 1024px){
  header .wp-block-shortcode a.glink.nturl.notranslate{
    font-size: 0.95em !important;
  }
}

/* =========================
   MOBILE
========================= */
@media (max-width: 782px){
  header .wp-block-shortcode{
    margin-left: auto !important;
  }
  header .wp-block-shortcode a.glink.nturl.notranslate{
    font-size: 1em !important;
  }
}

/* =====================================================
   FIX COULEUR GTRANSLATE – HEADER UNIQUEMENT
   ✔️ Blanc forcé
   ✔️ Aucun impact sur le menu
   ✔️ Desktop / Tablet / Mobile
===================================================== */

header .gtranslate_wrapper a.glink,
header .gtranslate_wrapper a.glink:visited,
header .gtranslate_wrapper a.glink:hover,
header .gtranslate_wrapper a.glink:active,
header .gtranslate_wrapper a.glink.nturl.notranslate,
header .gtranslate_wrapper a.glink.nturl.notranslate.gt-current-lang {
  color: #ffffff !important;
  text-decoration: none !important;
  font-weight: 600;
  opacity: 1 !important;
}

/* Supprime toute couleur injectée par spans internes */
header .gtranslate_wrapper a span {
  color: #ffffff !important;
}

/* Optionnel : langue active légèrement plus visible */
header .gtranslate_wrapper a.gt-current-lang {
  font-weight: 700;
}

/* ==========================================
   NAVBAR – supprimer le soulignement
   de l’item actif "Contactez-nous"
   (sans impacter les autres styles)
========================================== */

/* Supprime tout soulignement sur l’item actif */
header .wp-block-navigation .current-menu-item a,
header .wp-block-navigation .current-menu-item .wp-block-navigation-item__label {
  text-decoration: none !important;
  border-bottom: none !important;
}

/* Sécurité : empêche underline au hover aussi */
header .wp-block-navigation a:hover,
header .wp-block-navigation a:focus {
  text-decoration: none;
}

/* ==========================================
   NAVBAR – Ajustement uniquement en espagnol
   (évite le retour à la ligne)
========================================== */
html[lang^="es"] header nav.wp-block-navigation a {
  font-size: 0.92em;              /* un peu plus petit */
}

html[lang^="es"] header .wp-block-navigation-item__content {
  padding-left: 10px;
  padding-right: 10px;
}

/* Bonus : empêcher les mots de casser bizarrement */
html[lang^="es"] header .wp-block-navigation-item__label {
  white-space: nowrap;
}

/* =====================================================
   FIX TABLETTE – langues restent sur la ligne du menu
   Plage : 601px → 1341px
   Aucun impact desktop / mobile
===================================================== */

@media (min-width: 601px) and (max-width: 1341px) {

  /* Le conteneur nav accepte le wrap */
  header .wp-block-navigation__container {
    flex-wrap: wrap !important;
  }

  /* Le shortcode langues reste FORCÉ sur la 1re ligne */
  header .wp-block-shortcode {
    order: 99;                 /* toujours après le menu */
    align-self: flex-start;    /* reste sur la ligne haute */
    margin-left: auto !important;
    white-space: nowrap;
  }
}


/* =====================================================
   FIX TABLETTE – GTranslate reste à droite
   Zone problématique : 600px → 1342px
===================================================== */
@media (min-width: 600px) and (max-width: 1342px) {

  /* Le header reste en une seule ligne */
  header .wp-block-group.is-layout-flex {
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
  }

  /* Le menu peut passer sur 2 lignes */
  header nav.wp-block-navigation {
    flex-wrap: wrap !important;
  }

  /* MAIS le shortcode langues ne descend jamais */
  header .wp-block-shortcode {
    align-self: flex-start !important;
    margin-left: auto !important;
    padding-top: 4px; /* alignement visuel */
  }
}

/* =====================================================
   UI/UX PRO – LANGUES (GTranslate) RESPONSIVE
   - Desktop: visibles à droite
   - Tablette (600–1342): restent à droite, ne descendent pas
   - Mobile (<600): sous le menu, centré
   (ne touche pas au menu)
===================================================== */

/* ---- Base (toutes tailles) : blanc + propre ---- */
header .wp-block-shortcode a.glink.nturl.notranslate,
header .wp-block-shortcode a.glink.nturl.notranslate:visited,
header .wp-block-shortcode a.glink.nturl.notranslate:hover,
header .wp-block-shortcode a.glink.nturl.notranslate:active,
header .wp-block-shortcode a.gt-current-lang{
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1;
  opacity: 1;
}

/* wrapper réel chez toi */
header .wp-block-shortcode .translate_wrapper{
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px;
}

/* ---- Desktop : à droite ---- */
@media (min-width: 1342px){
  header .wp-block-shortcode{
    margin-left: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
  }
}

/* ---- Tablette : reste à droite, ne descend pas ---- */
@media (min-width: 600px) and (max-width: 1341px){
  header .wp-block-shortcode{
    margin-left: auto !important;
    align-self: flex-start !important;
    white-space: nowrap !important;
    padding-top: 4px; /* petit ajustement visuel */
  }
}

/* ---- Mobile : sous le menu, centré ---- */
@media (max-width: 599px){
  header .wp-block-shortcode{
    width: 100% !important;
    margin-left: 0 !important;
    justify-content: center !important;
    padding-top: 10px;
  }

  header .wp-block-shortcode .translate_wrapper{
    justify-content: center !important;
  }
}

/* ================================
   AddToAny – Placement & Responsive
   Projet Fil Rouge
================================ */

/* Conteneur des boutons */
.a2a_kit {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin: 40px auto 30px;
  padding: 0;
}

/* Icônes */
.a2a_kit a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Mobile : boutons plus larges et confortables */
@media (max-width: 768px) {
  .a2a_kit {
    flex-wrap: wrap;
    gap: 18px;
  }

  .a2a_kit a {
    min-width: 44px;
    min-height: 44px;
  }
}

/* ================================
   AddToAny – Alignement Desktop / Mobile
================================ */

/* Desktop : aligné comme le texte */
.a2a_kit {
  display: flex;
justify-content: center;
  gap: 14px;
  margin: 32px 0 24px;
}

/* Mobile : centré */
@media (max-width: 768px) {
  .a2a_kit {
    justify-content: center;
    flex-wrap: wrap;
    gap: 18px;
  }
}

/* =========================================
   AddToAny – Alignement propre (Desktop/Mobile)
   Ciblé uniquement sur les articles
========================================= */

/* 1) On cible uniquement les pages d’articles (single) */
.single .a2a_kit {
  display: flex !important;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;

  /* IMPORTANT : on force le kit à rester dans la largeur du contenu */
  width: 100%;
  max-width: var(--wp--style--global--content-size, 900px);
  margin: 28px auto 18px;

  /* Desktop = aligné au texte (gauche du bloc contenu) */
  justify-content: flex-start;
}

/* 2) Mobile : centré */
@media (max-width: 768px) {
  .single .a2a_kit {
    justify-content: center;
    gap: 16px;
  }

  /* Confort tactile */
  .single .a2a_kit a {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}


/* =========================================
   AddToAny – Desktop centré au milieu
========================================= */

/* On limite le conteneur à la largeur du contenu
   et on le centre dans la page */
.single .entry-content .addtoany_content {
  max-width: var(--wp--style--global--content-size, 900px);
  margin-left: auto;
  margin-right: auto;
}

/* Desktop : boutons centrés */
.single .entry-content .addtoany_content .a2a_kit {
  display: flex !important;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin: 32px auto 24px;
  width: 100%;
}

/* Mobile : reste centré (sécurité) */
@media (max-width: 768px) {
  .single .entry-content .addtoany_content .a2a_kit {
    justify-content: center;
    gap: 16px;
  }
}

.header-sticky {
  position: sticky;
  top: 0;
  z-index: 9999;
}

/* Sticky fiable sur le HEADER */
header.wp-block-template-part {
  position: sticky;
  top: var(--wp-admin--admin-bar--position-offset, 0px);
  z-index: 99999;
}

/* Optionnel : évite transparence au scroll */
header.wp-block-template-part > .wp-block-group {
  background: inherit;
}