/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/
/* ===== Palette + layout large (home) ===== */
:root{
  --geri-accent:#c9d315;
  --geri-accent-dark:#a7b20f;
  --geri-text:#212121;
  --geri-muted:#6c757d;
  --geri-bg:#f7f7f8;
  --geri-section:#eeeeef;
  --geri-link:#1466cc;
}
body{ color:var(--geri-text); background:var(--geri-bg); }
a{ color:var(--geri-link); }

@media (min-width:1200px){
  .home .grid-container,
  .home .gp-container,
  .home .site.grid-container,
  .home .site-content .grid-container{ max-width:1440px !important; }
}
.home .grid-container,
.home .gp-container{ padding-left:20px; padding-right:20px; }
.home.separate-containers .site-main .inside-article{
  background:transparent !important; box-shadow:none !important; padding:0 !important;
}
.home .entry-content{ margin:0 !important; }
.home .site-content{ padding-top:6px; }

/* ===== Ticker Les Plus lus ===== */
.gp-trending-bar{ background:#fff; border:1px solid #e5e5e5; margin:4px 0 16px; }
.ticker-row{ display:flex; align-items:center; gap:18px; }
.gp-trending-title{ margin:0; padding:10px 0; font-weight:800; color:#6b6b6b; white-space:nowrap; }
.ticker{ position:relative; overflow:hidden; white-space:nowrap; flex:1; }
.ticker-track{ display:inline-flex; align-items:center; gap:28px; will-change:transform; animation:ticker-left 38s linear infinite; }
.ticker:hover .ticker-track{ animation-play-state:paused; }
.ticker-item{ display:inline-block; padding:10px 0; }
.ticker .dot{ color:#bdbdbd; }
@keyframes ticker-left{ 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
@media (prefers-reduced-motion:reduce){ .ticker-track{ animation:none; } }

/* ===== Hero ===== */
.gp-hero-section{ position:relative; margin:20px 0 34px; }
.gp-hero-article img{ width:100%; aspect-ratio:21/9; max-height:420px; object-fit:cover; border-radius:6px; }
.gp-hero-content{ position:absolute; left:20px; bottom:20px; background:rgba(0,0,0,.55); color:#fff; padding:14px 18px; border-radius:4px; max-width:70%; }
.gp-hero-category{ font-size:.85rem; color:var(--geri-accent); margin-bottom:6px; }
.gp-hero-title a{ color:#fff; text-decoration:none; text-shadow:0 1px 2px rgba(0,0,0,.6); }
.gp-hero-title a:hover{ text-decoration:underline; }

/* ===== Sections catégories ===== */
.gp-category-section{ background:var(--geri-section); padding:24px 0; margin:36px 0; border-top:1px solid #e5e5e5; border-bottom:1px solid #e5e5e5; }
.gp-category-title{ font-size:1.8rem; margin:0 0 18px; color:#333; border-left:6px solid var(--geri-accent); padding-left:12px; }
.gp-category-grid{ display:grid; grid-template-columns:2fr 1fr; gap:20px; }
.gp-category-main{ position:relative; }
.gp-category-main img{ width:100%; aspect-ratio:16/9; max-height:320px; object-fit:cover; border-radius:4px; }
.gp-category-main-content{ position:absolute; left:10px; bottom:10px; background:rgba(0,0,0,.55); color:#fff; padding:10px 12px; border-radius:4px; max-width:90%; }
.gp-category-main-title a{ color:#fff; text-decoration:none; text-shadow:0 1px 2px rgba(0,0,0,.6); }
.gp-category-main-title a:hover{ text-decoration:underline; }
.gp-category-main-excerpt{ margin:6px 0 0; font-size:.95rem; }
.gp-category-side{ border-bottom:1px solid #e5e5e5; padding-bottom:10px; margin-bottom:10px; }
.gp-category-side:last-child{ border-bottom:none; margin-bottom:0; }
.gp-category-side-title a{ color:#111; text-decoration:none; }
.gp-category-side-title a:hover{ text-decoration:underline; }
.gp-category-side-desc{ margin:4px 0 0; font-size:.95rem; color:#333; }

/* Responsive */
@media (max-width:991px){
  .gp-hero-content{ max-width:90%; left:10px; bottom:10px; font-size:.95rem; }
  .gp-category-grid{ grid-template-columns:1fr; }
}
@media (max-width:575px){
  .gp-hero-title{ font-size:1.35rem; }
  .gp-category-title{ font-size:1.5rem; }
}

/* ===== CTA NEWSLETTER ===== */
.geri-newsletter{ background:#f1f1f3; border:1px solid #e0e0e0; margin:42px 0; padding:36px 0; }
.geri-newsletter-inner{ max-width:860px; margin:0 auto; text-align:center; }
.geri-newsletter h2{ font-size:clamp(1.6rem, 3vw, 2.25rem); margin:0 0 10px; font-weight:800; }
.geri-newsletter-sub{ margin:0 0 18px; color:#444; font-size:1.05rem; }
.geri-newsletter-form{ display:flex; flex-direction:column; align-items:center; gap:12px; }
.geri-newsletter-form .geri-input{
  width:100%; max-width:520px; height:48px; padding:0 14px;
  border:1px solid #cfd3d7; border-radius:3px; font-size:1rem; background:#fff;
}
.geri-newsletter-form .geri-btn{
  height:48px; padding:0 22px; border:none; border-radius:3px;
  background:var(--geri-accent); color:#111; font-weight:800; text-transform:uppercase; cursor:pointer;
}
.geri-newsletter-form .geri-btn:hover{ background:var(--geri-accent-dark); }
.geri-newsletter-options{ display:flex; flex-direction:column; gap:8px; margin-top:6px; color:#333; font-size:.95rem; }
.geri-legal{ margin-top:8px; font-size:.9rem; color:#666; }
.geri-legal a{ color:#111; text-decoration:underline; }

/* Alignement input + bouton côte à côte dès le md+ */
@media (min-width:768px){
  .geri-newsletter-form{ flex-direction:row; flex-wrap:wrap; justify-content:center; }
  .geri-newsletter-form .geri-input{ flex:0 1 520px; }
  .geri-newsletter-form .geri-btn{ margin-left:8px; }
  .geri-newsletter-options{ flex:0 0 100%; align-items:center; }
  .geri-legal{ flex:0 0 100%; }
}

/* Accessibilité */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ===== Tagline (slogan) à droite du logo, style Fit&Well ===== */
.site-branding { display: flex; align-items: center; gap: 16px; }

/* Titre du site (logo/texte) — optionnel si tu veux un peu plus proéminent */
.site-title a { color: #2c2c2c; text-decoration: none; }

/* Slogan */
.site-description {
  /* placement et typo */
  display: inline-block;
  margin: 0;
  padding: 0;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  line-height: 1.1;
  /* couleurs proches Fit&Well */
  color: #1f1f1f;                 /* texte foncé */
  opacity: .9;
  /* équilibre visuel */
  font-size: clamp(12px, 1.4vw, 15px);
  white-space: nowrap;            /* reste sur une ligne comme Fit&Well */
}

/* Variante avec un mot accentué vert citron (si tu ajoutes par ex. “Savoirs & soins gériatriques”) */
/* Tu ne peux pas mettre de HTML dans le slogan WP, mais on peut cibler un motif simple via after :
   Dé-commente ce bloc si tu veux souligner "gériatriques" en vert.
.site-description::after{
  content: "";
}
*/

/* Alignement responsive : repasse sous le logo sur écrans étroits */
@media (max-width: 600px){
  .site-branding { flex-direction: column; align-items: flex-start; gap: 6px; }
  .site-description { white-space: normal; line-height: 1.2; }
}

/* Option : barre de nav verte type Fit&Well (si tu veux harmoniser la marque) */
.main-navigation{ background:#c9d315 !important; }
.main-navigation .main-nav ul li a{ color:#1f1f1f !important; font-weight:600; }
.main-navigation .main-nav ul li a:hover{ color:#000 !important; }

/* ==== style.css — AJOUTER À LA FIN ==== */

/* Conteneur logo + slogan : empilé, le slogan SOUS l’image */
.logo-with-tagline{
  display:inline-flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
}

/* Slogan (style Fit&Well : uppercase, gras, tracking) */
.site-description{
  margin:0;
  padding:0;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
  line-height:1.15;
  color:#1f1f1f;
  opacity:.9;
  font-size:clamp(12px,1.4vw,15px);
  white-space:nowrap;   /* reste sur une ligne à large écran */
}

/* Sur mobile : autoriser le retour à la ligne */
@media (max-width:600px){
  .site-description{ white-space:normal; }
}

/* Option : si ton header met le logo et le titre sur la même ligne, garde l’équilibre */
.site-branding{ display:flex; align-items:center; gap:12px; }

/* ============ MOBILE FIX PACK (homepage) ============ */
:root{
  --overlay-dark: rgba(0,0,0,.45);
  --overlay-darker: rgba(0,0,0,.6);
}

/* Général mobile */
@media (max-width: 768px){
  /* gouttières plus fines */
  .home .grid-container, .home .gp-container{
    padding-left: 12px;
    padding-right: 12px;
  }

  /* Ticker en sécurité (évitons qu'il passe sous le hero) */
  .gp-trending-bar{ 
    position: relative; 
    z-index: 2; 
    margin-top: 6px; 
  }
  .ticker-row{ 
    flex-direction: column; 
    align-items: flex-start; 
    gap: 6px; 
  }
  .gp-trending-title{ 
    padding: 0; 
    font-size: .95rem; 
  }
  .ticker-track{ gap: 22px; }

  /* Le header/menu ne doit pas flotter au milieu de l'écran */
  .inside-header, .site-header, .main-navigation{ z-index: 999; background:#fff; }
  .main-navigation .menu-toggle{ z-index: 1000; }

  /* HERO : image moins haute + gradient, pas de pavé opaque géant */
  .gp-hero-section{ position: relative; z-index: 1; margin-top: 10px; }
  .gp-hero-article{ position: relative; }
  .gp-hero-article img{
    width: 100%;
    aspect-ratio: 16/9;
    max-height: 260px;
    object-fit: cover;
    border-radius: 10px;
  }
  /* gradient appliqué sur l'image (lisibilité du texte) */
  .gp-hero-article::after{
    content:"";
    position:absolute;
    left:0; right:0; bottom:0;
    height:55%;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, var(--overlay-dark) 40%, var(--overlay-darker) 100%);
    border-radius: 10px;
    pointer-events:none;
  }
  /* contenu sans fond opaque */
  .gp-hero-content{
    position:absolute;
    left:10px; right:10px; bottom:10px;
    background: transparent;
    padding: 0;
    max-width: 100%;
    text-shadow: 0 1px 2px rgba(0,0,0,.6);
  }
  .gp-hero-category{
    font-size: .8rem;
    margin-bottom: 4px;
  }
  .gp-hero-title{
    margin: 0 0 6px;
    font-size: clamp(1.05rem, 5vw, 1.4rem);
  }
  .gp-hero-title a{ color:#fff; }
  .gp-hero-excerpt{
    margin:0;
    font-size: .95rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;       /* 2 lignes max */
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* CARTES PRINCIPALES des sections : même traitement que le hero */
  .gp-category-main{ position: relative; }
  .gp-category-main img{
    width:100%;
    aspect-ratio: 16/9;
    max-height: 220px;
    object-fit: cover;
    border-radius: 10px;
  }
  .gp-category-main::after{
    content:"";
    position:absolute; left:0; right:0; bottom:0;
    height:60%;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, var(--overlay-dark) 40%, var(--overlay-darker) 100%);
    border-radius: 10px;
    pointer-events:none;
  }
  .gp-category-main-content{
    position:absolute; left:10px; right:10px; bottom:10px;
    background: transparent;
    padding: 0;
    max-width: 100%;
    text-shadow: 0 1px 2px rgba(0,0,0,.55);
  }
  .gp-category-main-title a{ color:#fff; }
  .gp-category-main-excerpt{
    margin:4px 0 0;
    font-size: .9rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Liste secondaire : description courte et lisible */
  .gp-category-side-desc{
    font-size: .9rem;
    color:#444;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 4px 0 0;
  }

  /* Grille : 1 colonne sur mobile (déjà prévu, on confirme) */
  .gp-category-grid{ grid-template-columns: 1fr !important; gap: 16px; }
}

/* Très petits écrans : alléger encore */
@media (max-width: 360px){
  .gp-hero-excerpt{ display:none; }
}

/* ========= TAGLINE / SLOGAN — STYLE & RESPONSIVE ========= */

/* Conteneur logo + slogan empilé (logo au-dessus, slogan dessous) */
.logo-with-tagline{
  display:inline-flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
}

/* Slogan (le bon sélecteur est .site-description ou p.site-description) */
.site-description{
  margin:0;
  padding:0;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
  line-height:1.15;
  color:#1f1f1f;
  opacity:.92;
  font-size:clamp(12px, 1.4vw, 15px);
  white-space:nowrap; /* une ligne sur grand écran */
}

/* Ajustements header (évite que le menu chevauche le slogan) */
.site-branding{ display:flex; align-items:center; gap:12px; }
.inside-header, .site-header{ position:relative; z-index:5; }

/* Mobile : autoriser le retour à la ligne et réduire l’espace */
@media (max-width:600px){
  .site-branding{ flex-direction:column; align-items:flex-start; gap:6px; }
  .site-description{ white-space:normal; font-size:12px; }
}

/* (Optionnel) Si le slogan semble “gris/clairement masqué” par un style du thème,
   on l’impose en affichage : */
.site-description{ display:block !important; visibility:visible !important; }

/* === PATCH "Les Plus lus" (sans changer la taille) === */

/* 1) Look + plus gris */
.gp-trending-bar{
  background:#f1f1f3;          /* plus gris */
  border-color:#e0e0e5;        /* bord plus doux */
}

/* 2) Couleur des titres différente */
.gp-trending-bar .ticker-item{
  color:#2a2a2a;               /* gris foncé lisible */
  font-weight:600;
  text-decoration:none;
}
.gp-trending-bar .ticker-item:hover{
  color:#111;
  text-decoration:underline;
}

/* 3) Enlever les points entre les titres (sans toucher au PHP) */
.gp-trending-bar .dot{ display:none !important; }

/* 4) Réduire la vitesse de moitié (desktop + mobile) */
.gp-trending-bar .ticker-track{
  animation-duration:76s !important;   /* au lieu de 38s */
}

/* 5) Empêcher le débord à droite en mobile/étroit */
.gp-trending-bar .ticker{
  width:100%;
  display:block;      /* force 100% du conteneur */
}

/* 6) Mobile : mise en colonne, pas de dépassement */
@media (max-width:768px){
  .gp-trending-bar .ticker-row{
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
  }
  .gp-trending-bar .gp-trending-title{
    padding:0;               /* pas d’agrandissement */
    font-size:.95rem;        /* reste discret */
  }
  .gp-trending-bar .ticker-track{
    gap:22px;                /* espace régulier sans points */
  }
}
/* === PATCH Les Plus lus : encadré + coins arrondis + titres + soulignement fin === */
.gp-trending-bar{
  background:#f2f3f5;          /* un peu plus gris */
  border-color:#d9dbe2;        /* bord plus visible */
  border-radius:10px;          /* coins arrondis */
  overflow:hidden;             /* évite que le contenu dépasse les coins */
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 1px 2px rgba(0,0,0,.04);  /* relief léger */
}

/* petit padding interne, sans grossir la section */
.gp-trending-bar .ticker-row{ padding:6px 12px; }

/* titres un peu plus petits */
.gp-trending-bar .gp-trending-title{ font-size:.95rem; color:#555; }

/* texte défilant : plus petit + souligné finement */
.gp-trending-bar .ticker-item{
  font-size:.95rem;
  color:#2a2a2a;
  text-decoration: underline;
  text-decoration-thickness: 1px;   /* soulignement fin */
  text-underline-offset: 2px;       /* petit écart sous le texte */
}

/* responsive mobile : garde la lisibilité sans agrandir */
@media (max-width:768px){
  .gp-trending-bar .gp-trending-title{ font-size:.9rem; }
  .gp-trending-bar .ticker-item{ font-size:.9rem; }
}

/* === Petites touches de vert (subtiles & responsives) === */

/* 1) Les Plus lus : liseré vert + pastille devant le titre (discret) */
.gp-trending-bar{
  border-bottom: 1px solid var(--geri-accent);
}
.gp-trending-title::before{
  content:"";
  display:inline-block;
  width:8px; height:8px;
  background: var(--geri-accent);
  border-radius:50%;
  margin-right:8px;
  vertical-align:middle;
}
@media (max-width:768px){
  .gp-trending-title::before{ width:6px; height:6px; margin-right:6px; }
}

/* 2) Catégories sur les visuels : petit "pill" vert translucide */
.gp-hero-category a{
  display:inline-block;
  margin-right:6px;
  padding:2px 8px;
  background: rgba(201,211,21,.16);                  /* vert léger */
  border: 1px solid rgba(201,211,21,.45);
  color:#2a2a2a !important;
  border-radius:9999px;
  text-decoration:none;
  line-height:1.2;
}
/* Séparateur + lisibilité entre items d'une même section (couleur inchangée) */
.gp-category-side{
  border-bottom-width: 2px;   /* +visible (au lieu de 1px) */
  border-bottom-style: solid; /* on garde la même couleur (#e5e5e5 déjà définie) */
  padding-bottom: 14px;       /* un peu plus d’air */
  margin-bottom: 14px;
}
.gp-category-side:last-child{
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}
/* Icône + layout compact pour les items secondaires */
.gp-category-side{
  display:flex;                /* aligne icône + contenu */
  gap:12px;
  align-items:flex-start;
}

.gp-side-thumb{ flex:0 0 auto; }
.gp-side-icon{
  width:40px; height:40px;
  border-radius:6px;           /* petit arrondi */
  object-fit:cover;
  display:block;
  box-shadow:0 0 0 1px rgba(0,0,0,.06) inset; /* trait subtil, même couleur perçue */
}
/* Empile le titre au-dessus de la méta description dans les items secondaires */
.gp-category-side{
  display:block;          /* stop flex -> empile verticalement */
}
.gp-category-side-title{
  display:block;
  margin:0 0 6px;         /* un petit espace sous le titre */
}
.gp-category-side-desc{
  display:block;
  margin:0;
  overflow-wrap: anywhere; /* évite toute casse de ligne bizarre */
}

/* Si un jour tu réactives une mini-icône (.gp-side-thumb), on remet flex SEULEMENT dans ce cas */
@supports selector(.gp-category-side:has(.gp-side-thumb)) {
  .gp-category-side:has(.gp-side-thumb){
    display:flex;
    gap:12px;
    align-items:flex-start;
  }
}
/* --- Forcer le slogan SOUS le logo (tous écrans) --- */
.site-branding,
.logo-with-tagline{
  display:flex;
  flex-direction:column !important;   /* empile logo + titre + slogan */
  align-items:flex-start !important;
  gap:6px;
}

/* s'assure que le conteneur texte ne force pas un affichage en ligne */
.site-branding .site-branding-container{ display:block; }

/* slogan lisible quand il passe dessous */
.site-description{
  white-space:normal;                  /* autorise le retour à la ligne */
  line-height:1.2;
  margin-top:2px;
}