/*
Theme Name: Overflow Child - Et Voilà Paris
Theme URI: https://codesupply.co/themes/overflow
Description: Thème enfant personnalisé pour "Et Voilà Paris !" - Guide touristique parisien
Author: Et Voilà Paris
Author URI: https://etvoilaparis.fr
Template: overflow
Version: 2.0.1
*/

/* ============================================================
   TABLE DES MATIÈRES
   ============================================================
   1. VARIABLES CSS - PALETTE "ET VOILÀ PARIS"
   2. COULEURS PRINCIPALES
   3. TYPOGRAPHIE
   4. NAVIGATION
   5. BOUTONS & CTA
   6. LIENS
   7. BADGES & ENCADRÉS
   8. MODE SOMBRE (FasterTools)
   9. ACCESSIBILITÉ WCAG 1.4.4
   10. VISIBILITÉ AUTEUR - E-E-A-T & GEO
   11. AUTHOR ARCHIVE
   12. CORRECTIONS UX DARK MODE
   ============================================================ */


/* Appliquer Inter par défaut sur tout le site */
body, button, input, select, textarea {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11'; /* Options GEO/Lisibilité propres à Inter */
}

/* Titres plus marqués */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
}



/* ============================================================
   1. VARIABLES CSS - PALETTE "ET VOILÀ PARIS"
   ============================================================ */

:root {
  /* Couleurs principales */
  --evp-bleu-parisien: #2C5F8D;
  --evp-bleu-parisien-hover: #234a6f;
  --evp-terracotta: #D4816B;
  --evp-terracotta-hover: #c46d57;
  --evp-or-champagne: #E8B863;
  --evp-or-champagne-hover: #dda646;

  /* Couleurs neutres */
  --evp-anthracite: #3D3D3D;
  --evp-creme-paris: #F8F6F2;
  --evp-gris-perle: #E5E3DF;
  --evp-blanc: #FFFFFF;

  /* Transparences utiles */
  --evp-bleu-light: rgba(44, 95, 141, 0.1);
  --evp-terracotta-light: rgba(212, 129, 107, 0.1);
  --evp-or-light: rgba(232, 184, 99, 0.1);
}

/* ============================================================
   2. COULEURS PRINCIPALES
   ============================================================ */

/* Fond général */
body {
  background-color: var(--evp-creme-paris);
  color: var(--evp-anthracite);
}

/* Titres */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--evp-bleu-parisien);
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a,
.h1 a, .h2 a, .h3 a, .h4 a, .h5 a, .h6 a {
  color: var(--evp-bleu-parisien);
  transition: color 0.2s ease;
}

h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover,
.h1 a:hover, .h2 a:hover, .h3 a:hover, .h4 a:hover, .h5 a:hover, .h6 a:hover {
  color: var(--evp-terracotta);
}


/* ============================================================
   3. TYPOGRAPHIE
   ============================================================ */

/* Meta textes (dates, auteur, etc.) */
.post-meta,
.cs-breadcrumbs,
figcaption,
caption,
.archive-count,
.page-subtitle {
  color: var(--evp-anthracite);
  opacity: 0.7;
}

/* Séparateurs */
hr,
.wp-block-separator {
  border-top-color: var(--evp-gris-perle);
}


/* ============================================================
   4. NAVIGATION
   ============================================================ */

/* Header/Navbar */
.navbar-primary {
  background-color: var(--evp-blanc);
  border-bottom: 1px solid var(--evp-gris-perle);
}

.navbar-nav li a {
  color: var(--evp-bleu-parisien);
}

.navbar-nav li:hover a,
.navbar-nav li.current-menu-item a,
.navbar-nav li.current-menu-ancestor a {
  color: var(--evp-terracotta);
}

/* Sous-menus */
.navbar-nav .sub-menu {
  background-color: var(--evp-blanc);
  border-color: var(--evp-gris-perle);
}

.navbar-nav .sub-menu li a {
  color: var(--evp-anthracite);
}

.navbar-nav .sub-menu li:hover a {
  color: var(--evp-bleu-parisien);
  background-color: var(--evp-bleu-light);
}

/* Toggle menu mobile */
.toggle-offcanvas,
.toggle-search {
  color: var(--evp-bleu-parisien);
}

.toggle-offcanvas:hover,
.toggle-search:hover {
  color: var(--evp-terracotta);
}

/* Loupe header (desktop + mobile) - taille visuelle */
.toggle-search svg,
.toggle-search .cs-icon,
.toggle-search .cs-icon svg {
  width: 20px;
  height: 20px;
  display: block;
}

/* Fallback si la loupe est rendue en font-icon */
.toggle-search {
  font-size: 20px;
  line-height: 1;
}


/* ============================================================
   5. BOUTONS & CTA
   ============================================================ */

/*
IMPORTANT:
On scope volontairement aux contenus (entry-content) pour ne pas casser
les boutons "techniques" du thème (search, offcanvas, header icons).
*/
.entry-content button,
.entry-content input[type="button"],
.entry-content input[type="reset"],
.entry-content input[type="submit"],
.entry-content .button {
  background-color: var(--evp-bleu-parisien);
  color: var(--evp-blanc);
  border: 1px solid var(--evp-bleu-parisien);
  transition: all 0.2s ease;
}

.entry-content button:hover,
.entry-content button:focus,
.entry-content input[type="button"]:hover,
.entry-content input[type="reset"]:hover,
.entry-content input[type="submit"]:hover,
.entry-content .button:hover,
.entry-content .button:focus {
  background-color: var(--evp-bleu-parisien-hover);
  border-color: var(--evp-bleu-parisien-hover);
  color: var(--evp-blanc);
}

/* Boutons secondaires (ex: "Lire la suite") */
.entry-more a {
  background-color: var(--evp-terracotta);
  color: var(--evp-blanc);
}

.entry-more a:hover {
  background-color: var(--evp-terracotta-hover);
  color: var(--evp-blanc);
}

/* Boutons "Bon plan" (avec badge Or) */
.evp-bon-plan-btn,
.evp-badge-premium {
  background-color: var(--evp-or-champagne);
  color: var(--evp-anthracite);
  border: 1px solid var(--evp-or-champagne);
}

.evp-bon-plan-btn:hover,
.evp-badge-premium:hover {
  background-color: var(--evp-or-champagne-hover);
  border-color: var(--evp-or-champagne-hover);
}

/* Bouton "En savoir plus" sur les archives / cartes */
.entry-more a.button,
.entry-more .cs-link-more {
  background-color: var(--evp-bleu-parisien);
  color: var(--evp-blanc);
  border: 1px solid var(--evp-bleu-parisien);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.02em;
  padding: 0.75rem 1.5rem;
}

/* Hover / focus bien contrasté */
.entry-more a.button:hover,
.entry-more a.button:focus,
.entry-more .cs-link-more:hover,
.entry-more .cs-link-more:focus {
  background-color: var(--evp-bleu-parisien-hover);
  border-color: var(--evp-bleu-parisien-hover);
  color: var(--evp-blanc);
  text-decoration: none;
}

/* Focus clavier visible (WCAG) */
.entry-more a.button:focus-visible,
.entry-more .cs-link-more:focus-visible {
  outline: 3px solid var(--evp-terracotta);
  outline-offset: 2px;
}


/* ============================================================
   6. LIENS
   ============================================================ */

/* Liens généraux */
a {
  color: var(--evp-bleu-parisien);
  transition: color 0.2s ease;
}

a:hover,
a:focus {
  color: var(--evp-terracotta);
}

/* Liens dans le contenu */
.entry-content a,
.entry-content p a {
  color: var(--evp-bleu-parisien);
  text-decoration: underline;
}

.entry-content a:hover,
.entry-content p a:hover {
  color: var(--evp-terracotta);
  text-decoration: none;
}

/* Catégories */
.post-categories a {
  color: var(--evp-terracotta);
}

.post-categories a:hover {
  color: var(--evp-bleu-parisien);
}


/* ============================================================
   7. BADGES & ENCADRÉS
   ============================================================ */

/* Badge "Bon plan" */
.evp-badge-bonplan {
  background-color: var(--evp-or-light);
  border-left: 3px solid var(--evp-or-champagne);
  padding: 1rem 1.5rem;
  margin: 2rem 0;
}

.evp-badge-bonplan::before {
  content: "💡";
  font-size: 1.25rem;
  margin-right: 0.5rem;
}

/* Encadré "Astuce" */
.evp-encadre-astuce {
  background-color: var(--evp-terracotta-light);
  border-left: 3px solid var(--evp-terracotta);
  padding: 1rem 1.5rem;
  margin: 2rem 0;
}

.evp-encadre-astuce::before {
  content: "✨";
  font-size: 1.25rem;
  margin-right: 0.5rem;
}

/* Encadré "Info importante" */
.evp-encadre-info {
  background-color: var(--evp-bleu-light);
  border-left: 3px solid var(--evp-bleu-parisien);
  padding: 1rem 1.5rem;
  margin: 2rem 0;
}

/* Tags de posts */
.post-tags a {
  background-color: var(--evp-gris-perle);
  color: var(--evp-anthracite);
  border: 1px solid var(--evp-gris-perle);
}

.post-tags a:hover {
  background-color: var(--evp-bleu-parisien);
  color: var(--evp-blanc);
  border-color: var(--evp-bleu-parisien);
}


/* ============================================================
   8. MODE SOMBRE (FasterTools) - ADAPTÉ PALETTE
   ============================================================ */

/* Bouton toggle mode sombre - Mode clair */
.ft-dark-mode-toggle {
  background: transparent;
  border-color: var(--evp-gris-perle);
  color: var(--evp-anthracite);
  margin-left: 1rem;
}

.ft-dark-mode-toggle:hover {
  background: var(--evp-bleu-light);
  border-color: var(--evp-bleu-parisien);
  color: var(--evp-bleu-parisien);
}

/* Bouton toggle mode sombre - Style spécifique dark mode */
html.is-dark-mode .ft-dark-mode-toggle {
  background: transparent;
  border-color: #2a2a2a;
  color: var(--evp-creme-paris);
}

html.is-dark-mode .ft-dark-mode-toggle:hover {
  background: rgba(122, 174, 214, 0.15);
  border-color: #7AAED6;
  color: #7AAED6;
}

/* IMPORTANT : Ne pas override :focus-visible (WCAG) */
html.is-dark-mode .ft-dark-mode-toggle:focus-visible {
  outline: 3px solid #7AAED6;
  outline-offset: 2px;
}

/* Mode sombre global */
html.is-dark-mode body {
  background-color: #1a1a1a;
  color: var(--evp-creme-paris);
}

html.is-dark-mode .site-header,
html.is-dark-mode .site-footer,
html.is-dark-mode .site-content {
  background-color: #1a1a1a;
  color: var(--evp-creme-paris);
}

/* === FIX HEADER DARK MODE === */
/* Header principal en #2a2a2a */
html.is-dark-mode .site-header,
html.is-dark-mode #masthead,
html.is-dark-mode .header-large,
html.is-dark-mode .navbar-topbar,
html.is-dark-mode .navbar-wrap,
html.is-dark-mode .navbar-primary {
  background-color: #2a2a2a !important;
  border-bottom-color: #404040 !important;
}

html.is-dark-mode h1,
html.is-dark-mode h2,
html.is-dark-mode h3,
html.is-dark-mode h4,
html.is-dark-mode h5,
html.is-dark-mode h6 {
  color: #7AAED6;
}

html.is-dark-mode a {
  color: #7AAED6;
}

html.is-dark-mode a:hover,
html.is-dark-mode a:focus {
  color: #E89A84;
}

html.is-dark-mode .navbar-primary {
  background-color: #0d0d0d;
  border-bottom-color: #2a2a2a;
}

html.is-dark-mode .entry-content button,
html.is-dark-mode .entry-content .button {
  background-color: #7AAED6;
  border-color: #7AAED6;
}

html.is-dark-mode .entry-content button:hover,
html.is-dark-mode .entry-content .button:hover {
  background-color: #5a8eb6;
}

/* Textes secondaires en dark mode */
html.is-dark-mode .post-meta,
html.is-dark-mode .cs-breadcrumbs,
html.is-dark-mode figcaption,
html.is-dark-mode caption,
html.is-dark-mode .archive-count,
html.is-dark-mode .page-subtitle {
  color: var(--evp-creme-paris);
  opacity: 0.7;
}

/* Formulaires en dark mode */
html.is-dark-mode input[type="search"],
html.is-dark-mode input[type="text"],
html.is-dark-mode input[type="email"],
html.is-dark-mode input[type="url"],
html.is-dark-mode input[type="password"],
html.is-dark-mode input[type="tel"],
html.is-dark-mode input[type="number"],
html.is-dark-mode input[type="date"],
html.is-dark-mode textarea,
html.is-dark-mode select {
  background-color: #2a2a2a;
  border-color: #404040;
  color: var(--evp-creme-paris);
}

html.is-dark-mode input::placeholder,
html.is-dark-mode textarea::placeholder {
  color: var(--evp-creme-paris);
  opacity: 0.5;
}

html.is-dark-mode input:focus,
html.is-dark-mode textarea:focus,
html.is-dark-mode select:focus {
  background-color: #1a1a1a;
  border-color: #7AAED6;
  outline: 2px solid #7AAED6;
  outline-offset: 2px;
}
/* ============================================
   SEARCH DARK MODE - CORRECTIONS COMPLÈTES
   ============================================ */

/* Container global de recherche en #1a1a1a */
html.is-dark-mode .site-search,
html.is-dark-mode .site-search-wrap,
html.is-dark-mode .offcanvas.offcanvas-search,
html.is-dark-mode div[class*="site-search"] {
  background-color: #1a1a1a !important;
}

/* Barre de recherche (input) en #2a2a2a */
html.is-dark-mode .site-search input.search-field,
html.is-dark-mode .site-search .cs-input-group,
html.is-dark-mode .search-form input[type="search"],
html.is-dark-mode input[type="search"].search-field {
  background-color: #2a2a2a !important;
  color: var(--evp-creme-paris) !important;
  border-color: #404040 !important;
}

/* Placeholder en mode sombre */
html.is-dark-mode .site-search input.search-field::placeholder,
html.is-dark-mode .search-form input[type="search"]::placeholder {
  color: var(--evp-creme-paris);
  opacity: 0.5;
}

/* Focus de la barre de recherche */
html.is-dark-mode .site-search input.search-field:focus,
html.is-dark-mode .search-form input[type="search"]:focus {
  background-color: #2a2a2a !important;
  border-color: #7AAED6 !important;
  outline: 2px solid #7AAED6;
  outline-offset: 2px;
  color: var(--evp-creme-paris);
}

/* Boutons submit et close de la recherche */
html.is-dark-mode .site-search .search-submit,
html.is-dark-mode .site-search .search-close,
html.is-dark-mode .site-search button[type="submit"],
html.is-dark-mode .site-search .cs-icon,
html.is-dark-mode .site-search .cs-icon-search {
  color: var(--evp-creme-paris) !important;
  background-color: transparent !important;
}

html.is-dark-mode .site-search .search-submit:hover,
html.is-dark-mode .site-search .search-close:hover,
html.is-dark-mode .site-search button[type="submit"]:hover {
  color: #7AAED6 !important;
  background-color: transparent !important;
}

/* Icône de recherche (loupe) */
html.is-dark-mode .site-search .search-icon,
html.is-dark-mode .site-search .cs-icon svg,
html.is-dark-mode .toggle-search svg {
  fill: var(--evp-creme-paris);
  color: var(--evp-creme-paris);
}

html.is-dark-mode .site-search .search-icon:hover,
html.is-dark-mode .toggle-search:hover svg {
  fill: #7AAED6;
  color: #7AAED6;
}

/* Si la div de recherche a un overlay/backdrop */
html.is-dark-mode .site-overlay,
html.is-dark-mode .search-overlay {
  background-color: rgba(26, 26, 26, 0.95) !important;
}

/* Résultats FasterTools en dark mode */
html.is-dark-mode .ft-search-results,
html.is-dark-mode .ft-search-results * {
  background-color: #2a2a2a !important;
  color: var(--evp-creme-paris) !important;
  border-color: #404040 !important;
}

html.is-dark-mode .ft-search-results li:hover {
  background-color: #1a1a1a !important;
}

html.is-dark-mode .ft-search-results h1,
html.is-dark-mode .ft-search-results h2,
html.is-dark-mode .ft-search-results h3,
html.is-dark-mode .ft-search-results h4,
html.is-dark-mode .ft-search-results a {
  color: #7AAED6 !important;
}

html.is-dark-mode .ft-search-results a:hover {
  color: #E89A84 !important;
}

/* Hover sur les résultats FasterTools */
html.is-dark-mode .ft-search-results li:hover,
html.is-dark-mode .ft-search-results > ul > li:hover {
  background-color: #1a1a1a !important;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

/* Si le hover doit être sur le lien <a> */
html.is-dark-mode .ft-search-results li a:hover,
html.is-dark-mode .ft-search-results a:hover {
  background-color: #1a1a1a !important;
  text-decoration: none;
}

/* Focus clavier (WCAG) */
html.is-dark-mode .ft-search-results li:focus-within,
html.is-dark-mode .ft-search-results a:focus {
  background-color: #1a1a1a !important;
  outline: 2px solid #7AAED6;
  outline-offset: 2px;
}

/* Titre en hover */
html.is-dark-mode .ft-search-results li:hover h2,
html.is-dark-mode .ft-search-results li:hover h3,
html.is-dark-mode .ft-search-results li:hover h4,
html.is-dark-mode .ft-search-results a:hover .entry-title {
  color: #E89A84 !important;
}
/* Forcer TOUT le container en #1a1a1a */
html.is-dark-mode .site-search,
html.is-dark-mode .site-search *,
html.is-dark-mode .cs-input-group,
html.is-dark-mode .cs-input-group * {
  background-color: #1a1a1a !important;
}

/* PUIS forcer UNIQUEMENT l'input et les résultats en #2a2a2a */
html.is-dark-mode .site-search input.search-field,
html.is-dark-mode .ft-search-results {
  background-color: #2a2a2a !important;
}

html.is-dark-mode .ft-search-results li {
  background-color: #2a2a2a !important;
}

html.is-dark-mode .ft-search-results li * {
  background-color: transparent !important;
}

/* Border-radius sur le container global */
html.is-dark-mode .cs-input-group {
  border-radius: 8px;
  overflow: hidden;
}




/* ============================================================
   9. ACCESSIBILITÉ WCAG 1.4.4 - RESIZE TEXT
   ============================================================ */

/* Respecter les paramètres utilisateur */
html {
  font-size: 100%;
}

/* Convertir les tailles de police px en rem */
.cs-breadcrumbs {
  font-size: 0.75rem;
}

.tagcloud a {
  font-size: 0.6875rem !important;
}

.post-meta,
.entry-excerpt {
  font-size: 0.875rem;
}

/* Tailles de base */
body { font-size: 1rem; }

h1, .h1 { font-size: 3rem; }
h2, .h2 { font-size: 2rem; }
h3, .h3 { font-size: 1.75rem; }
h4, .h4 { font-size: 1.5rem; }
h5, .h5 { font-size: 1.25rem; }
h6, .h6 { font-size: 1rem; }

p, li, dl, address, blockquote {
  font-size: 1rem;
}

/* WCAG: éléments de formulaire -> limiter au contenu uniquement */
.entry-content input[type="search"],
.entry-content input[type="text"],
.entry-content input[type="email"],
.entry-content input[type="url"],
.entry-content input[type="password"],
.entry-content textarea,
.entry-content button,
.entry-content .button {
  height: auto;
  min-height: 2.5rem;
}

/* Fix définitif: Search Overflow (header) */
.site-search .cs-input-group { 
  height: 60px; 
  line-height: 60px; 
}

.site-search input.search-field {
  height: 60px;
  line-height: 60px;
  padding: 0 70px;
}

.site-search .search-submit,
.site-search .search-close {
  height: 60px;
  line-height: 60px;
}

/* Pour Chrome, Safari, Edge et Opera */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  display: none;
}


/* ============================================================
   10. VISIBILITÉ AUTEUR - E-E-A-T & GEO
   ============================================================ */

/* Auteur dans les meta posts (archives, featured, cartes) */
.post-meta .meta-author,
.entry-meta .meta-author,
.cs-entry__post-meta .meta-author {
  font-weight: 600;
  color: var(--evp-bleu-parisien);
}

/* Lien auteur plus visible */
.post-meta .meta-author a,
.entry-meta .meta-author a,
.cs-entry__post-meta .meta-author a {
  color: var(--evp-bleu-parisien);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s ease;
}

.post-meta .meta-author a:hover,
.entry-meta .meta-author a:hover,
.cs-entry__post-meta .meta-author a:hover {
  color: var(--evp-terracotta);
  text-decoration: underline;
}

/* Préfixe "Par" moins dominant */
.post-meta .meta-author .by,
.entry-meta .meta-author .by {
  font-weight: 400;
  opacity: 0.7;
  margin-right: 0.25rem;
}

/* Avatar auteur dans les cartes (si présent) */
.post-meta .avatar,
.entry-meta .avatar,
.meta-author .avatar {
  border: 2px solid var(--evp-bleu-parisien);
  border-radius: 50%;
}

/* Séparation visuelle entre date et auteur */
.post-meta .meta-author::before {
  content: "•";
  margin: 0 0.5rem;
  opacity: 0.5;
}

/* Si auteur est le premier élément, pas de séparateur */
.post-meta .meta-author:first-child::before {
  content: none;
}

/* Dark mode - auteur bien visible */
html.is-dark-mode .post-meta .meta-author,
html.is-dark-mode .entry-meta .meta-author {
  color: #7AAED6;
}

html.is-dark-mode .post-meta .meta-author a,
html.is-dark-mode .entry-meta .meta-author a {
  color: #7AAED6;
}

html.is-dark-mode .post-meta .meta-author a:hover,
html.is-dark-mode .entry-meta .meta-author a:hover {
  color: #E89A84;
}

html.is-dark-mode .post-meta .avatar,
html.is-dark-mode .entry-meta .avatar,
html.is-dark-mode .meta-author .avatar {
  border-color: #7AAED6;
}

/* Mobile : auteur toujours visible */
@media (max-width: 768px) {
  .post-meta .meta-author {
    display: inline-flex !important;
    align-items: center;
  }
  
  .post-meta .meta-author a {
    font-size: 0.9375rem;
  }
}


/* ============================================================
   11. AUTHOR ARCHIVE
   ============================================================ */

.author-archive .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

.author-header {
  margin-bottom: 3rem;
  padding-bottom: 2rem;
  border-bottom: 2px solid var(--evp-gris-perle);
}

.author-bio-wrapper {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
}

@media (max-width: 768px) {
  .author-bio-wrapper {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

.author-avatar img {
  border-radius: 50%;
  width: 150px;
  height: 150px;
  object-fit: cover;
}

.author-info {
  flex: 1;
}

.author-name {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  font-weight: 700;
}

.author-description {
  font-size: 1.125rem;
  line-height: 1.6;
  margin-bottom: 1rem;
  color: var(--evp-anthracite);
  opacity: 0.85;
}

.author-meta {
  margin-bottom: 1rem;
  color: var(--evp-anthracite);
  opacity: 0.7;
}

.author-social-links ul {
  display: flex;
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

@media (max-width: 768px) {
  .author-social-links ul {
    justify-content: center;
  }
}

.author-social-links a {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: var(--evp-gris-perle);
  border-radius: 4px;
  text-decoration: none;
  color: var(--evp-anthracite);
  transition: background 0.3s ease;
}

.author-social-links a:hover,
.author-social-links a:focus {
  background: var(--evp-anthracite);
  color: var(--evp-blanc);
  outline: 2px solid var(--evp-anthracite);
  outline-offset: 2px;
}

/* Author page en dark mode */
html.is-dark-mode .author-header {
  border-bottom-color: #404040;
}

html.is-dark-mode .author-description {
  color: var(--evp-creme-paris);
  opacity: 0.85;
}

html.is-dark-mode .author-meta {
  color: var(--evp-creme-paris);
  opacity: 0.7;
}

html.is-dark-mode .author-social-links a {
  background: #2a2a2a;
  color: var(--evp-creme-paris);
}

html.is-dark-mode .author-social-links a:hover,
html.is-dark-mode .author-social-links a:focus {
  background: #7AAED6;
  color: #1a1a1a;
}

.author-posts {
  margin-top: 3rem;
}

.author-posts h2 {
  font-size: 2rem;
  margin-bottom: 2rem;
  border-left: 4px solid var(--evp-anthracite);
  padding-left: 1rem;
}

.posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
  margin-bottom: 2rem;
}

.no-results {
  text-align: center;
  padding: 3rem 1rem;
}

.no-results h2 {
  font-size: 1.75rem;
  margin-bottom: 1rem;
}


/* ============================================================
   12. CORRECTIONS UX DARK MODE
   ============================================================ */

/* Fond crème pour la zone archive */
.archive-main.archive-list {
  background-color: var(--evp-creme-paris);
}

/* Tous les articles de l'archive en blanc */
.archive-main.archive-list article.post {
  background-color: var(--evp-blanc);
}

/* Texte des archives en mode clair */
.archive-main.archive-list .entry-excerpt,
.archive-main.archive-list .post-meta {
  color: var(--evp-anthracite);
  opacity: 0.9;
}

/* Archives en dark mode - éviter les cartes blanches éblouissantes */
html.is-dark-mode .archive-main.archive-list {
  background-color: #1a1a1a;
}

html.is-dark-mode .archive-main.archive-list article.post {
  background-color: #2a2a2a;
  color: var(--evp-creme-paris);
  border-color: #404040;
}

/* Titres d'articles en archives dark */
html.is-dark-mode .archive-main.archive-list article.post h2,
html.is-dark-mode .archive-main.archive-list article.post h3 {
  color: #7AAED6;
}

/* Liens d'articles en archives dark */
html.is-dark-mode .archive-main.archive-list article.post a {
  color: #7AAED6;
}

html.is-dark-mode .archive-main.archive-list article.post a:hover {
  color: #E89A84;
}

/* Metas d'articles en archives dark */
html.is-dark-mode .archive-main.archive-list article.post .post-meta,
html.is-dark-mode .archive-main.archive-list article.post .entry-excerpt {
  color: var(--evp-creme-paris);
  opacity: 0.85;
}

/* Boutons "Lire la suite" en dark mode */
html.is-dark-mode .entry-more a,
html.is-dark-mode .archive-main.archive-list .entry-more a.button,
html.is-dark-mode .archive-main.archive-list .entry-more .cs-link-more {
  background-color: #7AAED6;
  color: #1a1a1a;
  border-color: #7AAED6;
  font-weight: 600;
}

html.is-dark-mode .entry-more a:hover,
html.is-dark-mode .archive-main.archive-list .entry-more a.button:hover,
html.is-dark-mode .archive-main.archive-list .entry-more .cs-link-more:hover,
html.is-dark-mode .archive-main.archive-list .entry-more a.button:focus,
html.is-dark-mode .archive-main.archive-list .entry-more .cs-link-more:focus {
  background-color: #5a8eb6;
  border-color: #5a8eb6;
  color: #1a1a1a;
}

/* Section featured posts en dark mode */
html.is-dark-mode .section-featured-posts,
html.is-dark-mode .cs-featured-posts {
  background-color: #0d0d0d;
}

html.is-dark-mode .section-featured-posts article,
html.is-dark-mode .cs-featured-posts article {
  background-color: #2a2a2a;
  border-color: #404040;
}

html.is-dark-mode .section-featured-posts article h2,
html.is-dark-mode .section-featured-posts article h3,
html.is-dark-mode .cs-featured-posts article h2,
html.is-dark-mode .cs-featured-posts article h3 {
  color: #7AAED6;
}

/* Container posts principal en dark mode */
html.is-dark-mode .cs-mm-posts-container {
  background-color: #0d0d0d;
}

/* Contenu article en dark mode */
html.is-dark-mode .entry-content,
html.is-dark-mode .entry-content p,
html.is-dark-mode .entry-content li,
html.is-dark-mode .entry-content td,
html.is-dark-mode .entry-content th,
html.is-dark-mode .entry-content blockquote {
  color: var(--evp-creme-paris);
}

/* Table of Contents / Block Quote en dark mode */
html.is-dark-mode .wp-block-quote,
html.is-dark-mode .entry-content .wp-block-quote {
  background-color: #2a2a2a;
  border-color: #404040;
  color: var(--evp-creme-paris);
}

/* Toutes les cartes Overflow en dark mode */
html.is-dark-mode .cs-card,
html.is-dark-mode .cs-card--style-1,
html.is-dark-mode .cs-card--style-2,
html.is-dark-mode .cs-card--style-3 {
  background-color: #2a2a2a !important;
  border-color: #404040 !important;
  color: var(--evp-creme-paris);
}

/* Contenu des cartes en dark mode */
html.is-dark-mode .cs-card .cs-entry__title a,
html.is-dark-mode .cs-card .cs-entry__title h2,
html.is-dark-mode .cs-card .cs-entry__title h3 {
  color: #7AAED6;
}

html.is-dark-mode .cs-card .cs-entry__title a:hover {
  color: #E89A84;
}

/* Extrait et meta dans les cartes */
html.is-dark-mode .cs-card .entry-excerpt,
html.is-dark-mode .cs-card .post-meta,
html.is-dark-mode .cs-card .cs-entry__meta {
  color: var(--evp-creme-paris);
  opacity: 0.85;
}

/* Boutons dans les cartes */
html.is-dark-mode .cs-card .entry-more a,
html.is-dark-mode .cs-card .cs-link-more {
  background-color: #7AAED6 !important;
  color: #1a1a1a !important;
}

/* Featured posts / sections spéciales */
html.is-dark-mode .section-featured-posts .cs-card,
html.is-dark-mode .cs-featured-posts .cs-card {
  background-color: #2a2a2a !important;
}

/* cs-card-inner dans les featured posts */
html.is-dark-mode .cs-card-inner,
html.is-dark-mode .cs-featured-post .cs-card-inner,
html.is-dark-mode .cs-featured-posts .cs-card-inner {
  background-color: #2a2a2a !important;
  border-color: #404040 !important;
}

html.is-dark-mode .cs-card-inner .entry-excerpt,
html.is-dark-mode .cs-card-inner .post-meta,
html.is-dark-mode .cs-card-inner .entry-title {
  color: var(--evp-creme-paris);
}

html.is-dark-mode .cs-card-inner .entry-title a {
  color: #7AAED6;
}

html.is-dark-mode .cs-card-inner .entry-title a:hover {
  color: #E89A84;
}

/* Toggle responsive mobile */
@media (max-width: 768px) {
  .ft-dark-mode-toggle__text {
    display: none;
  }

  .ft-dark-mode-toggle {
    padding: 8px;
    min-width: auto;
    margin-left: 0.5rem;
  }

  .ft-dark-mode-toggle__icon {
    margin: 0;
  }
}

/* Bouton géolocalisation header - aligné sur la loupe */
.evp-header-action--geo {
  background: transparent;
  border: none;
  padding: 0;
  margin-left: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  cursor: pointer;
  color: var(--evp-bleu-parisien);
}

.evp-header-action--geo .evp-header-action__icon,
.evp-header-action--geo svg {
  width: 23px;
  height: 23px;
  display: block;
}

.evp-header-action--geo:hover,
.evp-header-action--geo:focus {
  background: transparent;
  color: var(--evp-terracotta);
}

.evp-header-action--geo:focus-visible {
  outline: 2px solid var(--evp-bleu-parisien);
  outline-offset: 2px;
}

.evp-header-action--geo[aria-busy="true"] {
  opacity: 0.7;
}

@media (max-width: 768px) {
  .evp-header-action--geo .evp-header-action__icon,
  .evp-header-action--geo svg {
    width: 23px;
    height: 23px;
  }
}

/* Forcer la limite supérieure (priorité max) */
.sidebar,
.widget-area,
aside[class*="sidebar"],
.cs-sidebar {
  position: sticky !important;
  top: 65px !important;
  margin-top: 0 !important;
  transform: none !important;
}

/* Empêcher les transformations JS */
.sidebar[style*="transform"],
.widget-area[style*="transform"] {
  transform: none !important;
}

/* Limite basse : arrêter avant le footer */
.sidebar {
  margin-bottom: 20px;
}

/* ============================================
   LOGO - COULEURS DIV.LARGE-TITLE
   ============================================ */

/* Logo par défaut en bleu parisien */
.large-title,
.large-title a,
div.large-title,
div.large-title a {
  color: #2C5F8D !important;
  transition: color 0.2s ease;
}

/* Logo en hover : terracotta */
.large-title:hover,
.large-title a:hover,
div.large-title:hover,
div.large-title a:hover {
  color: #D4816B !important;
}

/* Si c'est un lien dans large-title */
.large-title > a {
  color: #2C5F8D !important;
}

.large-title > a:hover {
  color: #D4816B !important;
}

/* Mode sombre */
html.is-dark-mode .large-title,
html.is-dark-mode .large-title a {
  color: #7AAED6 !important;
}

html.is-dark-mode .large-title:hover,
html.is-dark-mode .large-title a:hover {
  color: #E89A84 !important;
}

/* ============================================
   TAGLINE - COULEUR BLEU PARISIEN
   ============================================ */

/* Tagline par défaut */
.site-description,
.tagline,
.site-tagline,
p.site-description {
  color: #2C5F8D !important;
}

/* Mode sombre : bleu clair */
html.is-dark-mode .site-description,
html.is-dark-mode .tagline,
html.is-dark-mode .site-tagline {
  color: #7AAED6 !important;
}

/* ============================================
   TAILLES DE POLICE - AJUSTEMENTS
   ============================================ */

/* follow-text en 1em */
.follow-text {
  font-size: 1em !important;
  line-height: 1.4;
}

/* tagline en 0.9rem */
.site-description,
.tagline,
.site-tagline,
p.site-description {
  font-size: 0.9rem !important;
  line-height: 1.5;
}

/* navbar-follow-text en 0.8rem */
/*.navbar-follow-text {
  font-size: 0.8rem !important;
  line-height: 1.3;
}


/* navbar-follow-title en 0.8rem avec couleur */
.navbar-follow-title {
  font-size: 0.8rem !important;
  line-height: 1.3;
  color: #234a6f !important;
}

/* Mode sombre */
html.is-dark-mode .navbar-follow-title {
  color: #7AAED6 !important;
}



/* ============================================
   NAVBAR FOLLOW BUTTON - COULEUR TEXTE
   ============================================ */

.navbar-follow-button .navbar-follow-text {
  margin-bottom: 0.3333333333rem;
  color: #234a6f !important;
  word-break: initial;
  white-space: normal;
  font-size: 0.8rem;
}

/* Mode sombre */
html.is-dark-mode .navbar-follow-button .navbar-follow-text {
  color: #7AAED6 !important;
}