/* ==========================================================================
   assets/css/main.css
   Styles des composants réutilisables identifiés dans la maquette Figma :
   header, bandeau intranet, hero, vignettes diagonales, cartes, footer, etc.
   ========================================================================== */

/* --------------------------------------------------------------------------
   RESET & BASE
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--gtv-text);
  background: var(--gtv-white);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--gtv-blue);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--gtv-blue-dark);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--gtv-dark);
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 var(--space-sm);
}

ul {
  padding-left: 1.2em;
}

.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--space-sm);
}

/* Accessibilité : focus visible clavier */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--gtv-blue);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  background: var(--gtv-dark);
  color: var(--gtv-white);
  padding: 0.75em 1.5em;
  z-index: 10000;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* --------------------------------------------------------------------------
   TOPBAR — logo à gauche, boutons à droite
   Filet tricolore orange/vert/bleu en haut, fond blanc.
   -------------------------------------------------------------------------- */
.gtv-topbar {
  background: var(--gtv-white);
  border-top: 4px solid;
  border-image: linear-gradient(to right,
    var(--gtv-orange) 0%,   var(--gtv-orange) 33%,
    var(--gtv-green)  33%,  var(--gtv-green)  66%,
    var(--gtv-blue)   66%,  var(--gtv-blue)   100%) 1;
}

.gtv-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem var(--space-sm);
}

/* Logo à gauche */
.gtv-topbar__logo img,
.gtv-topbar__logo a {
  display: block;
}

.gtv-topbar__logo img {
  height: 60px;
  width: auto;
  max-width: 240px;
  object-fit: contain;
  object-position: left center;
}

/* Zone boutons + réseaux à droite */
.gtv-topbar__actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}

/* Boutons topbar — base commune */
.gtv-topbar__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-decoration: none;
  padding: 0.4em 0.9em;
  border-radius: var(--radius-sm);
  border: 1.5px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}

/* "Se connecter" — vert (comme l'ancien badge Intranet) */
.gtv-topbar__btn--login {
  background: var(--gtv-green);
  color: var(--gtv-white);
  text-transform: uppercase;
}

.gtv-topbar__btn--login:hover {
  background: #55963f;
  color: var(--gtv-white);
}

/* Connecté — bleu avec nom de l'utilisateur */
.gtv-topbar__btn--connected {
  background: var(--gtv-blue);
  color: var(--gtv-white);
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gtv-topbar__btn--connected:hover {
  background: var(--gtv-blue-dark);
  color: var(--gtv-white);
}

/* "Adhérer à l'OVVT" — contour bleu, fond transparent */
.gtv-topbar__btn--adhesion {
  background: transparent;
  color: var(--gtv-blue);
  border-color: var(--gtv-blue);
}

.gtv-topbar__btn--adhesion:hover {
  background: var(--gtv-blue);
  color: var(--gtv-white);
}

/* Bouton déconnexion (icône seule) */
.gtv-topbar__logout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: none;
  border: 1.5px solid var(--gtv-border);
  border-radius: var(--radius-sm);
  color: var(--gtv-text-light);
  font-size: 0.85rem;
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease;
  flex-shrink: 0;
}

.gtv-topbar__logout:hover {
  border-color: var(--gtv-orange);
  color: var(--gtv-orange);
}

/* Réseaux sociaux */
.gtv-topbar__social {
  display: flex;
  gap: 0.6rem;
  margin-left: 0.4rem;
  padding-left: 0.8rem;
  border-left: 1px solid var(--gtv-border);
}

.gtv-topbar__social a {
  color: var(--gtv-text-light);
  font-size: 1.1rem;
  text-decoration: none;
  transition: color 0.15s ease;
}

.gtv-topbar__social a:hover {
  color: var(--gtv-blue);
}

/* Mobile : topbar compacte mais libellés conservés */
@media (max-width: 700px) {
  .gtv-topbar__logo img { height: 46px; }
  .gtv-topbar__social { display: none; }
  .gtv-topbar__btn { font-size: 0.6rem; padding: 0.35em 0.6em; }
}

/* --------------------------------------------------------------------------
   NAVIGATION PRINCIPALE (barre bleue)
   -------------------------------------------------------------------------- */
.gtv-nav {
  background: var(--gtv-blue);
}

.gtv-nav__list {
  list-style: none;
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0;
  flex-wrap: nowrap;
}

.gtv-nav__list li {
  position: relative;
}

.gtv-nav__list a {
  display: block;
  color: var(--gtv-white);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
  padding: 1rem 1rem;
  white-space: nowrap;
}

.gtv-nav__list a:hover,
.gtv-nav__list .current-menu-item > a {
  background: var(--gtv-blue-dark);
  color: var(--gtv-white);
}

/* Icône insérée par GTV_Nav_Walker devant chaque libellé (inc/nav-walker.php).
   Masquée par défaut sur desktop : la maquette de référence n'affiche
   des icônes que sur la version mobile "style application". */
.gtv-nav__icon {
  display: none;
}

.gtv-nav__inner {
  position: relative;
  display: flex;
  align-items: center;
}

.gtv-nav__mobile-logo {
  display: none;
}

.gtv-nav__toggle {
  display: none;
  background: none;
  border: none;
  color: var(--gtv-white);
  font-size: 1.5rem;
  padding: 1rem;
  cursor: pointer;
}

/* Bouton chevron des sous-menus : masqué sur desktop (décalage visuel),
   visible seulement sur mobile où il est utile */
.submenu-toggle {
  display: none;
}

/* Sous-menus */
.gtv-nav__list ul {
  list-style: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: var(--gtv-blue-dark);
  padding: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  z-index: 100;
}

.gtv-nav__list li:hover > ul,
.gtv-nav__list li:focus-within > ul {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   HERO (image pleine largeur + titre + CTA)
   -------------------------------------------------------------------------- */
.gtv-hero {
  position: relative;
  min-height: 480px;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.gtv-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.55) 70%);
}

.gtv-hero__content {
  position: relative;
  z-index: 2;
  max-width: 640px;
  margin-left: auto;
  padding: var(--space-lg) var(--space-md);
  text-align: right;
}

.gtv-hero__title-accent {
  display: block;
  color: var(--gtv-blue);
  font-size: var(--text-2xl);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.3;
}

.gtv-hero__title-main {
  display: block;
  color: var(--gtv-white);
  font-size: var(--text-xl);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.25;
  margin-top: 0.3em;
}

.gtv-hero__actions {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  margin-top: var(--space-md);
}

/* --------------------------------------------------------------------------
   HERO MOBILE : hauteur réduite, polices adaptées, flèche de scroll
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
  .gtv-hero {
    min-height: 0;
    height: 40svh;
    height: 40vh;
    align-items: center;
  }

  .gtv-hero__content {
    text-align: left;
    margin-left: 0;
    padding: var(--space-sm) var(--space-sm) 2.5rem;
    max-width: 100%;
  }

  .gtv-hero__title-accent {
    font-size: 1.1rem;
    line-height: 1.25;
  }

  .gtv-hero__title-main {
    font-size: 1.4rem;
    line-height: 1.2;
    margin-top: 0.2em;
  }

  .gtv-hero__actions {
    justify-content: flex-start;
    gap: 0.6rem;
    margin-top: 0.9rem;
  }

  .gtv-hero__actions .btn {
    font-size: 0.75rem;
    padding: 0.6em 1.2em;
  }

  /* Flèche de scroll animée en bas du hero */
  .gtv-hero::after {
    content: '';
    position: absolute;
    bottom: 0.75rem;
    left: 50%;
    width: 24px;
    height: 24px;
    border-right: 3px solid rgba(255,255,255,0.8);
    border-bottom: 3px solid rgba(255,255,255,0.8);
    transform: translateX(-50%) rotate(45deg);
    animation: gtv-scroll-hint 1.4s ease-in-out infinite;
    z-index: 3;
  }

  @keyframes gtv-scroll-hint {
    0%   { opacity: 0; transform: translateX(-50%) rotate(45deg) translateY(-6px); }
    50%  { opacity: 1; }
    100% { opacity: 0; transform: translateX(-50%) rotate(45deg) translateY(6px); }
  }
}

/* --------------------------------------------------------------------------
   BOUTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.85em 1.8em;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn-primary {
  background: var(--gtv-orange);
  color: var(--gtv-white);
}

.btn-primary:hover {
  background: #d63a1f;
  color: var(--gtv-white);
}

.btn-secondary {
  background: var(--gtv-white);
  color: var(--gtv-dark);
  border-color: var(--gtv-white);
}

.btn-secondary:hover {
  background: transparent;
  color: var(--gtv-white);
}

.btn-blue {
  background: var(--gtv-blue);
  color: var(--gtv-white);
}

.btn-blue:hover {
  background: var(--gtv-blue-dark);
}

/* Variantes modificateurs (BEM) utilisées dans les shortcodes et cards */
.btn--sm {
  font-size: 0.75rem;
  padding: 0.55em 1.2em;
}

.btn--blue {
  background: var(--gtv-blue);
  color: var(--gtv-white);
  border-color: var(--gtv-blue);
}

.btn--blue:hover {
  background: var(--gtv-blue-dark);
  border-color: var(--gtv-blue-dark);
  color: var(--gtv-white);
}

/* --------------------------------------------------------------------------
   SECTION TITLE (titre centré + petit séparateur en pointillés, vu partout)
   -------------------------------------------------------------------------- */
.section {
  padding: var(--space-lg) 0;
}

.section--alt {
  background: var(--gtv-bg-light);
}

.section-title {
  text-align: center;
  margin-bottom: var(--space-md);
}

.section-title h2 {
  font-size: var(--text-lg);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}

.section-title__divider {
  display: inline-block;
  position: relative;
  width: 90px;
  border-top: 2px solid var(--gtv-dark);
}

.section-title__divider::before,
.section-title__divider::after {
  content: '··';
  position: absolute;
  top: -0.7em;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.section-title__divider::before { left: -1.4em; }
.section-title__divider::after { right: -1.4em; }

/* --------------------------------------------------------------------------
   VIGNETTES DIAGONALES (Qui sommes-nous / OVVT / OMMA)
   -------------------------------------------------------------------------- */
.diag-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

.diag-card {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-sm);
  color: var(--gtv-white);
  display: block;
}

.diag-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.diag-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  clip-path: polygon(0 0, 65% 0, 0% 100%);
  background: var(--diag-color, var(--gtv-orange));
}

.diag-card--qsn { --diag-color: var(--gtv-orange); }
.diag-card--ovvt { --diag-color: var(--gtv-green); }
.diag-card--omma { --diag-color: var(--gtv-yellow); }

.diag-card__label {
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  z-index: 3;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-lg);
  text-transform: uppercase;
  line-height: 1.2;
  max-width: 60%;
}

.diag-card:hover img {
  transform: scale(1.05);
  transition: transform 0.4s ease;
}

/* --------------------------------------------------------------------------
   CARTES ICÔNES (4 cartes "maladies", page Dispositif sanitaire / Accueil)
   -------------------------------------------------------------------------- */
.icon-card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-sm);
}

.icon-card {
  background: var(--gtv-white);
  border: 1px solid var(--gtv-border);
  border-radius: var(--radius-md);
  text-align: center;
  padding: var(--space-md) var(--space-sm);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.icon-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-4px);
}

.icon-card__icon {
  color: var(--gtv-blue);
  font-size: 2.25rem;
  margin-bottom: 0.75rem;
}

.icon-card__icon svg {
  width: 40px;
  height: 40px;
}

.icon-card h3 {
  font-size: var(--text-sm);
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}

.icon-card p {
  font-size: var(--text-xs);
  color: var(--gtv-text-light);
  margin: 0;
}

/* --------------------------------------------------------------------------
   CARTES ACTUALITÉS / FORMATIONS (avec pastille date)
   -------------------------------------------------------------------------- */
.post-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

.post-card {
  background: var(--gtv-white);
  border: 1px solid var(--gtv-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.post-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-4px);
}

.post-card__image {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
}

.post-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.post-card__date {
  position: absolute;
  bottom: -1px;
  left: 1.25rem;
  background: var(--gtv-orange);
  color: var(--gtv-white);
  text-align: center;
  line-height: 1.1;
  padding: 0.5em 0.9em;
  font-family: var(--font-heading);
  border-radius: 2px 2px 0 0;
}

.post-card__date span {
  display: block;
  font-size: var(--text-xs);
  text-transform: uppercase;
}

.post-card__date strong {
  display: block;
  font-size: var(--text-lg);
}

.post-card__body {
  padding: 1.5rem 1.25rem;
}

.post-card__body h3 {
  font-size: var(--text-sm);
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.post-card__body p {
  font-size: var(--text-sm);
  color: var(--gtv-text-light);
  margin: 0;
}

/* --------------------------------------------------------------------------
   SECTIONS TEXTE + IMAGE ALTERNÉES (Nos Actions, Dispositif sanitaire)
   -------------------------------------------------------------------------- */
.split-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  align-items: center;
  margin-bottom: var(--space-lg);
}

.split-row:last-child {
  margin-bottom: 0;
}

.split-row--reverse .split-row__media {
  order: 2;
}

.split-row__media img {
  border-radius: var(--radius-md);
  width: 100%;
}

.split-row__content ul {
  margin-top: 0.75rem;
}

.split-row__content li {
  margin-bottom: 0.4rem;
}

/* --------------------------------------------------------------------------
   BLOG : ARTICLES + SIDEBAR (page Actualités)
   -------------------------------------------------------------------------- */
.blog-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-lg);
}

.blog-article {
  display: flex;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--gtv-border);
}

.blog-article__image {
  flex: 0 0 280px;
}

.blog-article__image img {
  border-radius: var(--radius-sm);
  aspect-ratio: 16/10;
  object-fit: cover;
}

.blog-article__date-badge {
  display: inline-block;
  background: var(--gtv-orange);
  color: var(--gtv-white);
  text-align: center;
  line-height: 1.1;
  padding: 0.4em 0.8em;
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  margin-bottom: 0.6rem;
}

.blog-article h2 {
  font-size: var(--text-base);
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

/* Sidebar */
.widget {
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--gtv-border);
}

.widget-title {
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 1rem;
}

.widget_search .search-form {
  display: flex;
}

.widget_search input[type="search"] {
  flex: 1;
  border: 1px solid var(--gtv-border);
  padding: 0.6em 0.8em;
  font-size: var(--text-sm);
}

.widget_search button {
  background: var(--gtv-blue);
  color: var(--gtv-white);
  border: none;
  padding: 0 1em;
  cursor: pointer;
}

.widget ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.widget ul li {
  padding: 0.5em 0;
  border-bottom: 1px solid var(--gtv-border);
  display: flex;
  justify-content: space-between;
  font-size: var(--text-sm);
}

.recent-post-item {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 0.9rem;
}

.recent-post-item img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.recent-post-item .meta {
  font-size: var(--text-xs);
  color: var(--gtv-text-light);
}

/* Pagination */
.gtv-pagination {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: var(--space-md);
}

.gtv-pagination a,
.gtv-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--gtv-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}

.gtv-pagination .current {
  background: var(--gtv-dark);
  color: var(--gtv-white);
  border-color: var(--gtv-dark);
}

/* --------------------------------------------------------------------------
   FORMULAIRES (connexion intranet)
   -------------------------------------------------------------------------- */
.form-card {
  max-width: 480px;
  margin: 0 auto;
  text-align: center;
}

.form-field {
  margin-bottom: 1rem;
  text-align: left;
}

.form-field input,
.form-field textarea {
  width: 100%;
  border: 1px solid var(--gtv-border);
  border-radius: var(--radius-sm);
  padding: 0.8em 1em;
  font-family: var(--font-body);
  font-size: var(--text-sm);
}

.form-field textarea {
  min-height: 140px;
  resize: vertical;
}

.login-error {
  background: #fdecea;
  border: 1px solid #f5c2bd;
  color: #9c2b1f;
  padding: 0.8em 1em;
  border-radius: var(--radius-sm);
  margin-bottom: 1rem;
  font-size: var(--text-sm);
  text-align: left;
}

/* --------------------------------------------------------------------------
   CONTACT FORM 7 — habillage aux couleurs/espacements du thème.
   CF7 génère son propre balisage (.wpcf7-form, .wpcf7-form-control...),
   ce bloc reproduit le look du formulaire de contact de la maquette
   (3 champs sur une ligne, puis 2, puis le message) sans toucher au
   plugin : la disposition en lignes se règle directement dans l'éditeur
   de formulaire CF7 à l'aide de balises <p> ou de classes "gtv-row".
   -------------------------------------------------------------------------- */
.wpcf7-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.wpcf7-form p {
  margin: 0;
}

.wpcf7-form .gtv-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.wpcf7-form .gtv-row--2 {
  grid-template-columns: repeat(2, 1fr);
}

.wpcf7-form label {
  display: block;
  font-size: var(--text-sm);
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea {
  width: 100%;
  border: 1px solid var(--gtv-border);
  border-radius: var(--radius-sm);
  padding: 0.8em 1em;
  font-family: var(--font-body);
  font-size: var(--text-sm);
}

.wpcf7-form textarea {
  min-height: 140px;
  resize: vertical;
}

.wpcf7-form input[type="submit"] {
  display: inline-block;
  align-self: center;
  background: var(--gtv-blue);
  color: var(--gtv-white);
  border: none;
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: var(--text-sm);
  padding: 0.85em 2.2em;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}

.wpcf7-form input[type="submit"]:hover {
  background: var(--gtv-blue-dark);
  transform: translateY(-2px);
}

.wpcf7-form input[type="submit"]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Messages de validation / envoi (succès, erreur) */
.wpcf7-not-valid-tip {
  color: #c0392b;
  font-size: var(--text-xs);
  margin-top: 0.3em;
  display: block;
}

.wpcf7-response-output {
  border-radius: var(--radius-sm);
  padding: 0.8em 1.2em;
  font-size: var(--text-sm);
  margin-top: 1rem !important;
}

.wpcf7-mail-sent-ok {
  background: #eafaf1;
  border-color: #6cb52d !important;
  color: #1e7e34;
}

.wpcf7-validation-errors,
.wpcf7-mail-sent-ng {
  background: #fdecea;
  border-color: #ec4124 !important;
  color: #9c2b1f;
}

.wpcf7-spinner {
  margin: 0 0.5em;
}

@media (max-width: 700px) {
  .wpcf7-form .gtv-row,
  .wpcf7-form .gtv-row--2 {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   RESTRICTED CONTENT NOTICE (accès non connecté)
   -------------------------------------------------------------------------- */
.restricted-notice {
  text-align: center;
  padding: var(--space-lg) var(--space-sm);
}

.restricted-notice h2 {
  font-size: var(--text-lg);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* --------------------------------------------------------------------------
   BANNIÈRE D'INSTALLATION PWA
   Bandeau jaune affiché en haut de page (sous le header) quand le site est
   installable, reproduisant le design vu dans la maquette mobile.
   Masqué par défaut (hidden), révélé en JS quand le navigateur indique
   que le site peut être installé (événement beforeinstallprompt).
   -------------------------------------------------------------------------- */
.gtv-pwa-banner {
  background: var(--gtv-yellow);
  padding: 0.65rem var(--space-sm);
  position: relative;
  z-index: 200;
}

.gtv-pwa-banner[hidden] {
  display: none;
}

.gtv-pwa-banner__inner {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  max-width: var(--container-width);
  margin: 0 auto;
  flex-wrap: wrap;
}

.gtv-pwa-banner__logo {
  height: 36px;
  width: auto;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
}

.gtv-pwa-banner__text {
  flex: 1;
  font-size: var(--text-sm);
  margin: 0;
  color: var(--gtv-dark);
  min-width: 0;
}

.gtv-pwa-banner__btn {
  background: var(--gtv-green);
  color: var(--gtv-white);
  border: none;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-sm);
  padding: 0.55em 1.4em;
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s ease;
}

.gtv-pwa-banner__btn:hover {
  background: #5a9a25;
}

.gtv-pwa-banner__dismiss {
  background: none;
  border: none;
  color: var(--gtv-dark);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0.25rem 0.4rem;
  flex-shrink: 0;
  opacity: 0.6;
}

.gtv-pwa-banner__dismiss:hover {
  opacity: 1;
}

@media (max-width: 600px) {
  .gtv-pwa-banner__text {
    font-size: var(--text-xs);
  }

  .gtv-pwa-banner__btn {
    font-size: var(--text-xs);
    padding: 0.5em 1em;
  }
}
.newsletter-band {
  background: var(--gtv-yellow);
  padding: var(--space-sm) 0;
}

.newsletter-band__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.newsletter-band h3 {
  font-size: var(--text-sm);
  text-transform: uppercase;
  margin: 0;
  white-space: nowrap;
}

.newsletter-band form {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.newsletter-band input[type="text"],
.newsletter-band input[type="email"] {
  border: none;
  padding: 0.7em 1em;
  font-size: var(--text-sm);
  border-radius: var(--radius-sm);
  min-width: 200px;
}

.newsletter-band button {
  background: var(--gtv-dark);
  color: var(--gtv-white);
  border: none;
  padding: 0.7em 1.6em;
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  font-size: var(--text-sm);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.newsletter-band button:hover {
  background: #000;
}

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */
.gtv-footer {
  padding: var(--space-lg) 0 var(--space-md);
}

.gtv-footer__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: var(--space-md);
}

.gtv-footer__logo img {
  height: 60px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
  object-position: left center;
  margin-bottom: 1rem;
}

.gtv-footer__about {
  font-size: var(--text-xs);
  color: var(--gtv-text-light);
}

.gtv-footer h4 {
  font-size: var(--text-sm);
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.gtv-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.gtv-footer ul li {
  margin-bottom: 0.6rem;
  font-size: var(--text-sm);
}

.gtv-footer__partners {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
}

.gtv-footer__partner-logo {
  height: 50px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  object-position: left center;
}

.gtv-footer__partner-logo--large {
  height: 100px;
  max-width: 280px;
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* Réduction du menu sur tablettes / petits laptops
     pour maintenir une seule ligne */
  .gtv-nav__list a {
    font-size: 0.72rem;
    padding: 1rem 0.65rem;
  }

  .diag-grid,
  .icon-card-grid,
  .post-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .split-row,
  .blog-layout,
  .gtv-footer__grid {
    grid-template-columns: 1fr;
  }

  .split-row--reverse .split-row__media {
    order: 0;
  }

  .blog-article {
    flex-direction: column;
  }

  .blog-article__image {
    flex: none;
  }
}

@media (max-width: 700px) {
  /* -----------------------------------------------------------------------
     TAB BAR FIXE EN BAS (style application)
     La nav se détache du flux et se colle en bas de l'écran en position
     fixe. Le logo compact intégré dans la nav est masqué (le logo du
     .gtv-header reste visible en haut). Un padding-bottom est ajouté au
     body pour que le contenu ne passe jamais sous la barre.
  ----------------------------------------------------------------------- */

  /* Le logo compact dans la nav n'est plus nécessaire en mode barre fixe
     en bas — le vrai logo en haut du header suffit. */
  .gtv-nav__mobile-logo {
    display: none;
  }

  /* Le .gtv-header (logo blanc au-dessus) reste visible sur mobile */
  .gtv-header {
    display: block;
  }

  .gtv-nav__toggle {
    display: none;
  }

  /* Nav fixée en bas de l'écran */
  .gtv-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 500;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Ombre pour la détacher visuellement du contenu */
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.18);
    /* Safe area iPhone X+ : la barre d'accueil iOS empiète en bas */
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .gtv-nav::-webkit-scrollbar {
    display: none;
  }

  .gtv-nav .container {
    padding: 0;
  }

  .gtv-nav__inner {
    padding: 0;
  }

  /* Body padding : réserve l'espace de la barre (hauteur ~75px + safe area) */
  body {
    padding-bottom: calc(75px + env(safe-area-inset-bottom, 0px));
  }

  .gtv-nav__list {
    display: flex !important;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .gtv-nav__list li {
    flex: 1 1 0;
  }

  .gtv-nav__list a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    padding: 0.7rem 0.25rem;
    text-align: center;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    white-space: normal;
    line-height: 1.15;
  }

  .gtv-nav__icon {
    display: block;
    font-size: 1.4rem;
    line-height: 1;
    margin-bottom: 0.25rem;
  }

  /* Page active : icône et texte en blanc légèrement plus brillant,
     fond légèrement plus sombre pour l'indiquer */
  .gtv-nav__list .current-menu-item > a {
    background: var(--gtv-blue-dark);
  }

  /* Sous-menus désactivés sur mobile */
  .gtv-nav__list ul,
  .submenu-toggle {
    display: none !important;
  }

  /* Ajustements de mise en page du reste du site */
  .gtv-hero__content {
    text-align: left;
    margin-left: 0;
    padding: var(--space-md) var(--space-sm);
  }

  .gtv-hero__actions {
    justify-content: flex-start;
  }

  .diag-grid,
  .icon-card-grid,
  .post-card-grid,
  .form-row,
  .form-row--2 {
    grid-template-columns: 1fr;
  }

  .newsletter-band__inner {
    flex-direction: column;
    text-align: center;
  }
}