/* ===========================================================
   Avenir-Transports — composants globaux (réutilisés site-wide)
   Tokens couleur/typo : voir theme.json (palette accent, band, card…)
   =========================================================== */

/* §6bis — masquer le bloc titre de page sur la home (le hero le remplace).
   FIX : on masque le CONTENEUR .hero-section, pas seulement .entry-header — sinon
   l'espacement du conteneur Blocksy subsiste et crée un bandeau blanc avant le hero. */
.home .hero-section,
.home .entry-header { display: none !important; }

/* « Nos actions » : home + page /nos-actions/ partagent le MÊME bloc synchronisé
   (classes .at-actions-grid / .at-action-card, stylées plus bas). Aucune règle propre au home. */

/* Cartes (gouvernance / stats / actions) : hauteurs égales dans une rangée */
.wp-block-columns { align-items: stretch; }
.wp-block-column.has-background,
.wp-block-column.has-border-color { height: 100%; }

/* Hero sur photo : texte blanc lisible (si image de fond posée) */
.home .wp-block-cover .wp-block-cover__inner-container { color: #fff; }

/* Boutons : arrondi cohérent */
.wp-block-button__link { border-radius: 6px; }

/* Bandes pleine largeur : un peu d'air */
.wp-block-group.alignfull { margin-top: 0; margin-bottom: 0; }

/* ============================================================
   ÉLÉVATION (2026-06-15) — typo éditoriale + composants
   ============================================================ */

/* Typographie globale : corps Inter, titrage Fraunces 500 (audace = ici, un seul endroit) */
body, button, input, select, textarea, .entry-content { font-family: 'Inter', system-ui, -apple-system, sans-serif; }
h1, h2, h3, h4, .wp-block-heading, .site-title, .at-serif {
  font-family: 'Fraunces', 'Spectral', Georgia, serif;
  font-weight: 500;
  letter-spacing: .2px;
}

/* Header — logo image retiré : titre de site en Fraunces + pastille « AT » (CSS, zéro asset) */
.site-title { font-weight: 600 !important; color: #0B1C33; }
.site-title::before {
  content: ""; display: inline-block;
  width: 60px; height: 30px; margin-right: .55em;
  background: url('http://127.0.0.1/avenir-transports/avenir-clean/wp-content/uploads/2026/06/at-picto.png') left center / contain no-repeat;
  vertical-align: middle;
}

/* Déroulant lisible (FIX) : panneau clair, texte foncé, survol bleu, item actif liseré */
.sub-menu {
  background: #fff !important;
  border: 0.5px solid #e2e7ee !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 28px rgba(11,28,51,.12) !important;
  padding: 4px !important;
}
.sub-menu li a { color: #0B1C33 !important; border-radius: 6px; }
.sub-menu li a:hover, .sub-menu li a:focus { background: #FBEAE9 !important; color: #C62828 !important; }
.sub-menu .current-menu-item > a, .sub-menu .current_page_item > a { background: #FBEAE9 !important; box-shadow: inset 2px 0 0 #C62828; }

/* Survols de cartes : discrets (le skill prévient contre le « trop ») */
.wp-block-column.has-background, .wp-block-column.has-border-color { transition: border-color .18s ease, transform .18s ease; }
.wp-block-column.has-border-color:hover { border-color: #C62828 !important; transform: translateY(-2px); }

/* Pastille de date « Mardis » — STYLE prêt, alimenté quand un champ date d'événement existera */
.at-date-pill { display:inline-flex; flex-direction:column; align-items:center; width:60px; padding:.4rem .2rem; border-right:.5px solid #e7ebf0; line-height:1.05; }
.at-date-pill .dow { font-size:11px; font-weight:600; letter-spacing:1px; color:#C62828; }
.at-date-pill .day { font-family:'Fraunces',serif; font-size:26px; font-weight:600; color:#0B1C33; }
.at-date-pill .mon { font-size:11px; color:#7a8699; }

/* ── EN-TÊTE DESKTOP : rangée + déroulants. Tout est scopé à [data-row="middle"], donc le menu
   mobile (#offcanvas, hors de cette rangée) N'EST PAS affecté → mobile-first & PWA intacts. ── */
/* Rangée centrale compacte (le gros logo la mettait à 120px) */
header#header [data-row="middle"] { --height: 84px; }
/* Le déroulant est ancré au BAS de l'item ; Blocksy centre le menu dans la rangée (haute à cause du
   logo), d'où ~20px de vide sous le texte avant le panneau. On colle le déroulant au menu via le
   décalage vertical du sous-menu — le mécanisme même que pilote la variable Blocksy
   `--dropdown-top-offset` (qui alimente `.sub-menu{margin-top:var(--dropdown-top-offset)}`).
   SCOPÉ au 1er niveau : les sous-niveaux (années) gardent margin-top:0 via la règle suivante (plus
   spécifique). Valeur déterministe pour ce header. Le menu mobile (#offcanvas) est hors scope. */
header#header [data-row="middle"] .ct-menu-link { padding-top: .45rem !important; padding-bottom: .45rem !important; }
header#header [data-row="middle"] [class*="header-menu"] { --dropdown-top-offset: -20px; }
header#header [data-row="middle"] .sub-menu { top: 100% !important; margin-top: var(--dropdown-top-offset, 0) !important; }
/* Sous-niveaux (ex. années sous « Les Mardis ») : alignés EN HAUT de leur parent (top:0), pas
   décalés vers le bas -> redeviennent cliquables. (Bug précédent : le top:100% s'appliquait aussi à eux.) */
header#header [data-row="middle"] .sub-menu .sub-menu { top: 0 !important; margin-top: 0 !important; }

/* ── MENU MOBILE (off-canvas) ── traitement délibéré : panneau plein écran, fond clair lisible,
   accents = MÊME rouge que partout via la variable de palette Blocksy (--theme-palette-color-1,
   désormais #C62828). Aucune couleur en dur pour l'accent, aucun bleu résiduel. */
#offcanvas { --side-panel-width: 100%; }
#offcanvas .ct-panel-inner { background-color: #fff !important; }
#offcanvas .ct-menu-link { color: #0B1C33 !important; font-weight: 500; }
#offcanvas .ct-menu-link:hover,
#offcanvas .current-menu-item > .ct-menu-link,
#offcanvas .current_page_item > .ct-menu-link { color: var(--theme-palette-color-1) !important; }
#offcanvas .ct-toggle-dropdown-mobile,
#offcanvas .ct-panel-actions .ct-toggle-close { color: var(--theme-palette-color-1); }
#offcanvas .menu-item { border-color: #e7ebf0 !important; }

/* Cartes « Nos actions » (image + icône + desc + lien) */
.at-actions-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.2rem; margin: 1.4rem 0; }
.at-action-card { border: 1px solid #e2e7ee; border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; transition: border-color .18s ease, transform .18s ease; background: #fff; }
.at-action-card:hover { border-color: #C62828; transform: translateY(-2px); }
.at-action-img { margin: 0; }
.at-action-img img { width: 100%; height: 160px; object-fit: cover; display: block; }
.at-action-body { padding: 1rem 1.2rem 1.3rem; display: flex; flex-direction: column; flex: 1; }
.at-action-body .at-ico { line-height: 0; margin-bottom: .4rem; }
.at-action-body h3 { margin: .2rem 0 .4rem; font-size: 1.2rem; }
.at-action-body p { color: #444; margin: 0 0 1rem; flex: 1; }
.at-action-link { font-weight: 600; color: #C62828; text-decoration: none; }
.at-action-link:hover { text-decoration: underline; }
header#header, header.ct-header\:row, .ct-header, #masthead, .site-header { border-bottom: 1px solid #e7ebf0; }

/* Bande « Contact & réseaux » (footer) : cercles rouges + labels, fond marine, aux couleurs du site */
.at-contact-band { background: #0B1C33; color: #fff; padding: 2.6rem 1.5rem; }
.at-contact-inner { max-width: 1100px; margin: 0 auto; text-align: center; }
.at-contact-social { display: flex; flex-wrap: wrap; justify-content: center; gap: 2.6rem; }
.at-contact-item { display: inline-flex; flex-direction: column; align-items: center; gap: .65rem; color: #fff; text-decoration: none; font-weight: 600; font-size: .95rem; }
.at-contact-icon { width: 66px; height: 66px; border-radius: 50%; background: #C62828; display: inline-flex; align-items: center; justify-content: center; transition: transform .15s ease, background-color .15s ease; }
.at-contact-icon svg { width: 28px; height: 28px; fill: #fff; }
.at-contact-item:hover .at-contact-icon { transform: translateY(-3px); background: #E63329; }
.at-contact-item:hover .at-contact-label { text-decoration: underline; }
.at-contact-address { margin: 1.9rem 0 0; opacity: .82; font-size: .95rem; }
@media (max-width: 600px){ .at-contact-social { gap: 1.6rem; } .at-contact-icon { width: 56px; height: 56px; } .at-contact-icon svg { width: 24px; height: 24px; } }

/* Variante « à cheval » sur le hero : carte flottante centrée, remontée pour chevaucher le bas du
   hero (les cercles à la charnière photo / blanc), avec ombre. Le footer garde la bande pleine largeur. */
.at-contact-hero { max-width: 880px; margin: -78px auto 0; position: relative; z-index: 5; padding: 0 1rem; }
.at-contact-hero .at-contact-band { border-radius: 14px; box-shadow: 0 18px 48px rgba(11,28,51,.38); padding: 1.7rem 1.5rem; }
.at-contact-hero .at-contact-address { display: none; } /* l'adresse reste au footer */
@media (max-width: 600px){ .at-contact-hero { margin-top: -50px; } }

/* Conseil d'Administration — listes de collège (sans photo), 2 colonnes sur large écran */
.at-ca-list { columns: 2; column-gap: 2.6rem; margin: .4rem 0 2rem; padding-left: 1.1rem; }
.at-ca-list li { break-inside: avoid; margin-bottom: .55rem; line-height: 1.45; }
.at-ca-list li strong { color: #0B1C33; }
@media (max-width: 640px){ .at-ca-list { columns: 1; } }

/* Sous-nav par année sur les archives (Les Mardis / Les Visites) — pastilles */
.at-year-nav { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0 0 1.6rem; }
.at-year-link { display: inline-block; padding: .3rem .85rem; border: 1px solid #e2e7ee; border-radius: 999px; font-size: .9rem; line-height: 1.4; color: #0B1C33; text-decoration: none; transition: border-color .15s ease, color .15s ease, background-color .15s ease; }
.at-year-link:hover { border-color: #C62828; color: #C62828; }
.at-year-link.is-active { background: #C62828; border-color: #C62828; color: #fff; }

/* Image à la une en tête d'article (single) — Blocksy ne l'affiche pas par défaut */
.single .at-single-featured { margin: 0 0 1.6rem; }
.single .at-single-featured img { width: 100%; max-height: 420px; object-fit: cover; border-radius: 12px; display: block; }

/* Mise en avant « prochain Mardi » (bloc dynamique avt/prochain-mardi, piloté par post épinglé) */
.at-feature { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1.8rem; align-items: center; }
.at-feature.is-noimg { grid-template-columns: 1fr; }
.at-feature-media { margin: 0; }
.at-feature-media img { width: 100%; height: 100%; max-height: 320px; object-fit: cover; border-radius: 12px; display: block; }
.at-feature-body .at-eyebrow { margin-bottom: .3rem; }
.at-feature-title { margin: .1rem 0 .6rem; font-size: 1.9rem; line-height: 1.15; }
.at-feature-title a { color: #0B1C33; text-decoration: none; }
.at-feature-title a:hover { color: #C62828; }
.at-feature-excerpt { color: #444; margin: 0 0 1rem; }
@media (max-width: 781px){ .at-feature { grid-template-columns: 1fr; } .at-feature-media { order: -1; } }
.at-feature { margin-bottom: 1.6rem; }

/* Zone Actualités : grille des 3 derniers articles (hors mis-en-avant) sous le highlight */
.at-actus-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.2rem; margin: 0 0 1rem; }
.at-actu-card { background: #fff; border: 1px solid #e2e7ee; border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; transition: border-color .18s ease, transform .18s ease; }
.at-actu-card:hover { border-color: #C62828; transform: translateY(-2px); }
.at-actu-img img { width: 100%; height: 150px; object-fit: cover; display: block; }
.at-actu-body { padding: .9rem 1rem 1rem; display: flex; flex-direction: column; gap: .3rem; }
.at-actu-cat { font-size: 11px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: #C62828; }
.at-actu-card h3 { margin: .1rem 0; font-size: 1.05rem; line-height: 1.25; }
.at-actu-card h3 a { color: #0B1C33; text-decoration: none; }
.at-actu-card h3 a:hover { color: #C62828; }
.at-actu-date { font-size: 12px; color: #7a8699; }

/* « Qui sommes-nous » : eyebrow + montage photo (2x2) */
.at-eyebrow { font-size: .8rem; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: .25rem; }
#qui-sommes-nous.wp-block-group { padding-top: 1rem; padding-bottom: 1rem; }
.at-montage.wp-block-gallery img { border-radius: 10px; }
.at-montage.wp-block-gallery { gap: .6rem; }
@media (max-width: 781px){ .at-qsn .wp-block-column { flex-basis: 100% !important; } }

/* Cartes membres / gouvernance — photo + rôle + bio (grille responsive) */
.at-members-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1rem; margin: 1rem 0 1.6rem; align-items: stretch; }
/* Cartes d'une même rangée à hauteur égale : la carte remplit sa cellule (= hauteur de la plus haute) */
.at-member-card { padding: 0 0 1rem; overflow: hidden; height: 100%; }
.at-member-card .at-portrait { margin: 0; }
.at-member-card .at-portrait img, .at-member-card .at-portrait.at-noimg { width: 100%; height: 210px; object-fit: cover; object-position: center 22%; display: flex; border-radius: 10px 10px 0 0; }
.at-member-card .at-noimg { background: #0B1C33; color: #fff; align-items: center; justify-content: center; font-family: 'Fraunces', serif; font-size: 2.2rem; }
.at-member-card .at-role { margin: .8rem 1rem 0; font-size: 11px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: #C62828; }
.at-member-card h3 { margin: .15rem 1rem; font-size: 1.05rem; }
.at-member-card .has-small-font-size { margin: .1rem 1rem 0; color: #555; }
/* En home (gouvernance) : 2 cartes en colonnes, même style */
.wp-block-column.at-member-card { padding: 0 0 1rem; }

/* Co-présidents (bloc synchronisé partagé home/Membres) : 2 cartes cadrées, pas étirées */
.at-copres.at-members-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 300px)); }