/*
Theme Name:   Kadence Thundra
Template:     kadence
Version:      1.2.2
Text Domain:  kadence-thundra
Description:  Child theme Kadence pour la refonte 2026 de thundra.ca.
*/

:root {
  --thundra-green: #00AB84;
  --thundra-white: #FFFFFF;
  --thundra-navy: #002855;
  --thundra-navy-dark: #041C2C;
  --thundra-red: #EF3340;
  --thundra-green-pale: #3CDBC0;
  --thundra-gray-pale: #D9D9D6;
}

*, *::before, *::after { box-sizing: border-box; }

/* Composants maison uniquement — ne jamais mettre de reset global (margin/padding: 0)
   ici, ça écrase les styles de Kadence sur tout le DOM (nav, admin bar, Gutenberg). */

/* ==========================================================================
   Thundra — composants du child theme (préfixe th- pour ne jamais entrer
   en conflit avec les classes de Kadence).
   ========================================================================== */

.th-page {
  background: var(--thundra-white);
  color: var(--thundra-navy-dark);
  font-family: 'Manrope', system-ui, sans-serif;
}

.th-page h1, .th-page h2, .th-page h3 {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  margin: 0;
  color: var(--thundra-navy);
}

/* Couleur des liens — trois niveaux, du plus faible au plus fort :
   1. `:where(a)` ne pèse rien dans la cascade : il neutralise le bleu de
      Kadence sur les liens sans couleur propre, et n'importe quelle classe du
      thème reprend la main sans avoir à lutter.
   2. le vert de marque ne vaut que pour les liens de contenu (paragraphes et
      listes). Une règle `.th-page a` généralisée pèse 0-1-1, assez pour battre
      toutes les classes simples : chaque composant devenu lien (boutons, nav,
      cartes, filtres) devait ensuite être rattrapé un par un.
   3. les composants posent leur propre couleur, chacun chez soi.
   Le soulignement, lui, reste neutralisé partout. */
.th-page :where(a) { color: inherit; }
.th-page a { text-decoration: none; }
.th-page p a,
.th-page li a { color: var(--thundra-green); }
.th-page p a:hover,
.th-page li a:hover { color: var(--thundra-navy); }

.th-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 700;
  padding: 14px 28px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  white-space: nowrap;
}
/* `a.th-btn--*` : les boutons sont souvent des liens, il faut battre la
   spécificité de `.th-page a` (0,1,1) sinon le libellé hérite du vert. */
.th-btn--primary,
a.th-btn--primary { background: var(--thundra-green); color: var(--thundra-white); }
.th-btn--primary:hover,
a.th-btn--primary:hover { background: var(--thundra-navy); color: var(--thundra-white); }
.th-btn--outline,
a.th-btn--outline {
  background: transparent;
  color: var(--thundra-navy);
  border: 1.5px solid var(--thundra-gray-pale);
}
.th-btn--outline:hover,
a.th-btn--outline:hover { border-color: var(--thundra-navy); color: var(--thundra-navy); }
.th-btn--sm { padding: 10px 20px; font-size: 14px; }

/* Nav */
.th-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 80px;
  border-bottom: 1px solid var(--thundra-gray-pale);
}
.th-nav__logo img { height: 34px; width: auto; display: block; }
.th-nav__links { display: flex; align-items: center; gap: 48px; list-style: none; margin: 0; padding: 0; }
.th-nav__links li { margin: 0; }
/* Scopé sous .th-nav : sans ça, `.th-page a` (0-1-1) bat `.th-nav__link` (0-1-0)
   et tous les liens du menu ressortent verts. */
.th-nav .th-nav__link { font-size: 15px; font-weight: 600; color: var(--thundra-navy); }
.th-nav .th-nav__link:hover { color: var(--thundra-green); }
.th-nav .th-nav__link.is-active { color: var(--thundra-green); font-weight: 700; }
/* Burger — masqué par défaut, activé par le media query 1024px plus bas. */
.th-nav__toggle {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; flex-shrink: 0;
  background: none; border: 1px solid var(--thundra-gray-pale);
  border-radius: 10px; color: var(--thundra-navy); cursor: pointer;
}
.th-nav__toggle-bars { position: relative; display: block; }
.th-nav__toggle-bars,
.th-nav__toggle-bars::before,
.th-nav__toggle-bars::after {
  width: 20px; height: 2px; border-radius: 2px; background: currentColor;
  transition: transform .2s ease, background-color .2s ease;
}
.th-nav__toggle-bars::before,
.th-nav__toggle-bars::after { content: ""; position: absolute; left: 0; }
.th-nav__toggle-bars::before { top: -6px; }
.th-nav__toggle-bars::after { top: 6px; }
.th-nav.is-open .th-nav__toggle-bars { background: transparent; }
.th-nav.is-open .th-nav__toggle-bars::before { transform: translateY(6px) rotate(45deg); }
.th-nav.is-open .th-nav__toggle-bars::after { transform: translateY(-6px) rotate(-45deg); }

/* Hero */
.th-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
  padding: 100px 80px 120px;
}
.th-hero__content { max-width: 620px; display: flex; flex-direction: column; gap: 28px; }
.th-hero__badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: #E9F9F4; padding: 8px 16px; border-radius: 999px;
  width: fit-content; font-size: 13px; font-weight: 700;
  color: var(--thundra-navy); letter-spacing: 0.02em;
}
.th-hero__badge-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--thundra-green); }
.th-hero__title { font-size: 56px; line-height: 1.08; font-weight: 800; }
.th-hero__text { font-size: 18px; line-height: 1.6; opacity: 0.75; max-width: 520px; margin: 0; }
.th-hero__actions { display: flex; gap: 16px; margin-top: 8px; flex-wrap: wrap; }
.th-hero__visual {
  position: relative; width: 440px; height: 440px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.th-hero__visual::before {
  content: ""; position: absolute; inset: 0;
  background: var(--thundra-green); opacity: 0.04; border-radius: 48px; transform: rotate(8deg);
}
.th-hero__visual img { position: relative; height: 250px; width: auto; }

/* Hero animé (option "Page d'accueil animée" — voir Options Thundra) */
.th-hero--animated .th-hero__visual::before { animation: th-pop .9s cubic-bezier(.22,1,.36,1) 1.35s both; }
.th-hero--animated .th-hero__visual img { animation: th-icon-in .9s cubic-bezier(.22,1,.36,1) 1.70s both; }

@keyframes th-fly-in {
  0%   { opacity: 0; transform: scale(9) translateX(180px); }
  100% { opacity: 1; transform: scale(1) translateX(0); }
}
.th-zoom { display: inline-block; opacity: 0; transform-origin: center; animation: th-fly-in 1.3s cubic-bezier(.22,1,.36,1) .15s both; }

/* Chaque mot est insécable : les lettres sont des inline-block, sans ce garde-fou
   le navigateur coupe au milieu d'un mot (« Des idées q / ui prennent »). */
.th-word { display: inline-block; white-space: nowrap; }

@keyframes th-type { from { opacity: 0; } to { opacity: 1; } }
/* --th-d-wide / --th-d-narrow sont posés sur chaque lettre dans home-hero.php :
   la séquence desktop remplit une ligne puis revient la compléter, ce qui n'a
   plus de sens quand le titre se recoupe. Sous 1024px on repasse en ordre de
   lecture. */
.th-t { display: inline-block; opacity: 0; animation: th-type .22s ease-out forwards; animation-delay: var(--th-d-wide); }

@keyframes th-zoom-word {
  0%   { opacity: 0; transform: scale(2.2); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes th-spark {
  0%   { color: var(--thundra-navy); filter: brightness(1) drop-shadow(0 0 0 rgba(0,171,132,0)); }
  50%  { color: var(--thundra-green); filter: brightness(1.4) drop-shadow(0 0 14px rgba(0,171,132,0.5)); }
  100% { color: var(--thundra-green); filter: brightness(1) drop-shadow(0 0 0 rgba(0,171,132,0)); }
}
@keyframes th-alive {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.035); }
}
.th-life {
  display: inline-block; opacity: 0; transform-origin: center;
  animation-name: th-zoom-word, th-spark, th-alive;
  animation-duration: .9s, 1s, 3.2s;
  animation-timing-function: cubic-bezier(.22,1,.36,1), ease-in-out, ease-in-out;
  animation-fill-mode: both, both, none;
  animation-iteration-count: 1, 1, infinite;
  animation-delay: 1.50s, 1.50s, 2.50s;
}

@keyframes th-icon-in {
  0%   { opacity: 0; transform: scale(0.5); }
  70%  { opacity: 1; transform: scale(1.06); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes th-pop {
  from { opacity: 0; transform: scale(0.6) rotate(8deg); }
  to   { opacity: 0.04; transform: scale(1) rotate(8deg); }
}
@keyframes th-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.th-fade { opacity: 0; animation: th-rise .9s cubic-bezier(.22,1,.36,1) both; }

@keyframes th-slide-left  { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: translateX(0); } }
@keyframes th-slide-right { from { opacity: 0; transform: translateX(28px); }  to { opacity: 1; transform: translateX(0); } }
.th-slide-left  { opacity: 0; animation: th-slide-left .9s cubic-bezier(.22,1,.36,1) both; }
.th-slide-right { opacity: 0; animation: th-slide-right .9s cubic-bezier(.22,1,.36,1) both; }

/* Tablette et mobile : ordre de lecture (identique à la séquence d'origine). */
@media (max-width: 1024px) {
  .th-t { animation-delay: var(--th-d-narrow); }
  .th-life { animation-delay: 1.35s, 1.35s, 2.35s; }
}

@media (prefers-reduced-motion: reduce) {
  .th-zoom, .th-t, .th-life, .th-hero--animated .th-fade, .th-hero--animated .th-slide-left, .th-hero--animated .th-slide-right,
  .th-hero--animated .th-hero__visual::before, .th-hero--animated .th-hero__visual img {
    animation: none; opacity: 1;
  }
}

/* Sections génériques */
.th-section { padding: 100px 80px; }
.th-section--tint { background: #F7F8F7; }
.th-section--pale { background: #EAF9F5; }
.th-section__header { display: flex; flex-direction: column; gap: 12px; max-width: 560px; margin-bottom: 56px; }
.th-section__eyebrow { font-size: 14px; font-weight: 700; color: var(--thundra-green); letter-spacing: 0.04em; }
.th-section__title { font-size: 36px; font-weight: 800; }

/* Services */
/* 3 colonnes : les cartes viennent des catégories de service, il y en a 6 —
   3×2 tombe juste là où 4 colonnes laissaient deux orphelines. */
.th-services__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.th-card {
  background: #fff; border: 1px solid var(--thundra-gray-pale); border-radius: 20px;
  padding: 32px; display: flex; flex-direction: column; gap: 16px;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
/* La carte est un lien vers l'archive de sa catégorie. `.th-page a` (0-1-1) bat
   les classes simples : sans ces sélecteurs, tout le texte de la carte passe au
   vert. Le titre s'en sort seul, il est ciblé par `.th-page h3`. */
.th-page a.th-card,
.th-page a.th-card:hover { color: inherit; }
.th-page a.th-card:hover {
  border-color: var(--thundra-green);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 40, 85, 0.07);
}
.th-page a.th-card:focus-visible { outline: 2px solid var(--thundra-green); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .th-card { transition: none; }
  .th-page a.th-card:hover { transform: none; }
}
.th-card__icon {
  width: 56px; height: 56px; border-radius: 14px; background: #E9F9F4;
  display: flex; align-items: center; justify-content: center; color: var(--thundra-green);
}
.th-card__title { font-size: 18px; font-weight: 700; }
.th-card__text { font-size: 14px; line-height: 1.55; opacity: 0.7; margin: 0; }

/* Cartes de réalisation (accueil + archive) */
.th-realisations__header {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 56px; gap: 24px; flex-wrap: wrap;
}
.th-realisations__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.th-project-card { display: flex; flex-direction: column; gap: 16px; }
.th-project-card__cover {
  height: 220px; border-radius: 20px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--thundra-green), var(--thundra-navy));
  border: 1px solid #dfdfdf;
}
.th-project-card__cover img { width: 100%; height: 100%; object-fit: cover; }
.th-project-card__eyebrow { font-size: 13px; font-weight: 700; color: var(--thundra-green); letter-spacing: 0.03em; }
.th-project-card__title { font-size: 18px; font-weight: 700; }
.th-more-link { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--thundra-navy); }

/* Contact / CTA */
.th-contact {
  display: flex; align-items: center; justify-content: space-between; gap: 60px; flex-wrap: wrap;
}
.th-contact__intro { display: flex; flex-direction: column; gap: 20px; max-width: 560px; }
.th-contact__card {
  display: flex; flex-direction: column; gap: 16px; background: #fff;
  border-radius: 20px; padding: 36px; min-width: 300px;
}
.th-contact__field { display: flex; flex-direction: column; gap: 4px; }
.th-contact__label { font-size: 12px; font-weight: 700; opacity: 0.55; letter-spacing: 0.04em; }
.th-contact__value { font-size: 16px; font-weight: 600; color: var(--thundra-navy); }
/* Courriel et téléphone sont des liens (mailto: / tel:) : `width: fit-content`
   évite que la zone cliquable s'étende sur toute la largeur de la carte. */
a.th-contact__value { width: fit-content; transition: color .2s ease; }
a.th-contact__value:hover { color: var(--thundra-green); }
a.th-contact__value:focus-visible { outline: 2px solid var(--thundra-green); outline-offset: 3px; border-radius: 4px; }

.th-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap;
}
.th-cta__intro { display: flex; flex-direction: column; gap: 12px; max-width: 560px; }

/* Footer */
.th-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 32px 80px; border-top: 1px solid var(--thundra-gray-pale); flex-wrap: wrap; gap: 12px;
}
.th-footer img { height: 22px; width: auto; opacity: 0.8; }
.th-footer__copy { font-size: 13px; opacity: 0.5; }

/* Archive réalisations */
.th-archive-hero { padding: 80px 80px 24px; display: flex; flex-direction: column; gap: 20px; }
.th-archive-hero__title { font-size: 44px; font-weight: 800; max-width: 680px; }
.th-archive-hero__text { font-size: 17px; line-height: 1.6; opacity: 0.75; max-width: 600px; margin: 0; }
.th-filters { padding: 0 80px 24px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.th-filter {
  font-size: 14px; font-weight: 600; padding: 10px 20px; border-radius: 999px;
  border: 1px solid var(--thundra-gray-pale); background: #fff; color: var(--thundra-navy);
}
.th-filter.is-active { background: var(--thundra-green); color: #fff; border-color: var(--thundra-green); font-weight: 700; }
.th-archive-grid { padding: 32px 80px 100px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
/* La grille garde ses 100px de respiration avant le CTA quand il n'y a qu'une
   page ; sinon c'est la pagination qui les porte. */
.th-archive-grid:has(+ .th-pagination) { padding-bottom: 40px; }

/* Pagination — mêmes pastilles que les filtres de catégorie. */
.th-pagination { padding: 0 80px 100px; }
.th-pagination .nav-links { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.th-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; height: 44px; padding: 0 16px;
  border: 1px solid var(--thundra-gray-pale); border-radius: 999px;
  background: #fff; color: var(--thundra-navy);
  font-size: 14px; font-weight: 600;
  transition: border-color .2s ease, color .2s ease;
}
.th-pagination a.page-numbers:hover { border-color: var(--thundra-green); color: var(--thundra-green); }
.th-pagination a.page-numbers:focus-visible { outline: 2px solid var(--thundra-green); outline-offset: 3px; }
.th-pagination .page-numbers.current { background: var(--thundra-green); border-color: var(--thundra-green); color: var(--thundra-white); font-weight: 700; }
.th-pagination .page-numbers.dots { border-color: transparent; background: none; padding: 0 4px; min-width: 0; }

/* Single réalisation */
.th-back-link { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--thundra-navy); opacity: 0.6; padding: 56px 80px 0; }
.th-single-hero { padding: 24px 80px 48px; display: flex; flex-direction: column; gap: 20px; }
.th-single-hero__title { font-size: 44px; font-weight: 800; max-width: 760px; }
.th-single-hero__text { font-size: 17px; line-height: 1.6; opacity: 0.75; max-width: 640px; margin: 0; }
.th-single-meta { display: flex; align-items: center; gap: 48px; margin-top: 16px; padding-top: 24px; border-top: 1px solid var(--thundra-gray-pale); flex-wrap: wrap; }
.th-single-meta__item { display: flex; flex-direction: column; gap: 4px; }
.th-single-meta__label { font-size: 12px; font-weight: 700; opacity: 0.5; letter-spacing: 0.04em; }
.th-single-meta__value { font-size: 15px; font-weight: 600; color: var(--thundra-navy); }
/* Le lien du site et ceux des catégories vivent dans des <span>, pas dans un
   paragraphe : ils ont besoin de leur propre vert pour rester identifiables. */
.th-single-meta__item a { color: var(--thundra-green); }
.th-single-meta__item a:hover { color: var(--thundra-navy); }
.th-single-cover { padding: 0 80px 80px; }
.th-single-cover__img { height: 520px; border-radius: 24px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--thundra-green), var(--thundra-navy)); }
.th-single-cover__img img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.th-single-body { padding: 0 80px 100px; display: grid; grid-template-columns: 1.6fr 1fr; gap: 64px; }
/* Le bloc « en bref » n'est pas rendu quand aucun champ n'est rempli : sans ça
   le texte resterait coincé dans 1.6fr avec une colonne vide à côté. */
.th-single-body:not(:has(.th-single-sidebar)) { grid-template-columns: 1fr; }
.th-single-body__main { display: flex; flex-direction: column; gap: 40px; }
.th-single-body__block { display: flex; flex-direction: column; gap: 14px; }
/* Contenu libre de l'éditeur : un lien peut y vivre hors paragraphe
   (titre, bouton, tableau) et doit rester vert. */
.th-single-body__block a { color: var(--thundra-green); }
.th-single-body__block a:hover { color: var(--thundra-navy); }
.th-single-body__block p { font-size: 16px; line-height: 1.7; opacity: 0.75; margin: 0; }
.th-single-sidebar { display: flex; flex-direction: column; gap: 16px; background: #F7F8F7; border-radius: 20px; padding: 32px; height: fit-content; }
.th-single-sidebar__item { display: flex; flex-direction: column; gap: 2px; }
.th-single-sidebar__label { font-size: 12px; opacity: 0.5; }
.th-single-sidebar__value { font-size: 14px; font-weight: 600; color: var(--thundra-navy); }
/* Même cas que le bloc méta : get_the_term_list() pose des liens dans un
   <span>, hors paragraphe. */
.th-single-sidebar__item a { color: var(--thundra-green); }
.th-single-sidebar__item a:hover { color: var(--thundra-navy); }
.th-single-gallery { padding: 0 80px 100px; display: flex; flex-direction: column; gap: 32px; }
.th-single-gallery__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.th-single-gallery__grid img { width: 100%; height: 260px; object-fit: cover; border-radius: 18px; }
.th-lightbox { cursor: zoom-in; }
.th-lightbox-overlay {
  display: none; position: fixed; inset: 0; z-index: 1000;
  background: rgba(11, 69, 94, 0.92);
  align-items: center; justify-content: center; padding: 40px;
}
.th-lightbox-overlay.is-open { display: flex; }
.th-lightbox-overlay__img { max-width: 100%; max-height: 100%; border-radius: 12px; object-fit: contain; }
.th-lightbox-close {
  position: absolute; top: 24px; right: 32px; background: none; border: 0;
  color: #fff; font-size: 40px; line-height: 1; cursor: pointer; padding: 8px;
}
body.th-lightbox-locked { overflow: hidden; }
.th-single-pagenav { padding: 40px 80px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--thundra-gray-pale); gap: 16px; flex-wrap: wrap; }
.th-single-pagenav a { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; color: var(--thundra-navy); }

/* ==========================================================================
   Responsive — points de rupture alignés sur les mockups (tablette ~834px,
   mobile ~390px), arrondis à des seuils standards.
   ========================================================================== */
/* Palier tablette à 1024px (et non 960px comme au départ) : entre les deux, le
   hero restait sur deux colonnes dans 620px de large, ce qui cassait le titre
   en cinq lignes et rendait l'animation illisible. Tout bascule d'un coup. */
@media (max-width: 1024px) {
  /* Nav en burger */
  .th-nav { flex-wrap: wrap; justify-content: flex-start; gap: 12px; }
  .th-nav__logo { margin-right: auto; }
  .th-nav__toggle { display: inline-flex; }
  .th-nav__links {
    display: none; order: 4; width: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    margin-top: 4px; border-top: 1px solid var(--thundra-gray-pale);
  }
  .th-nav.is-open .th-nav__links { display: flex; }
  .th-nav__links li + li { border-top: 1px solid var(--thundra-gray-pale); }
  .th-nav .th-nav__link { display: block; padding: 15px 2px; font-size: 16px; }

  /* Mise en page */
  .th-nav, .th-hero, .th-section, .th-archive-hero, .th-filters, .th-archive-grid,
  .th-back-link, .th-single-hero, .th-single-cover, .th-single-body, .th-single-gallery,
  .th-single-pagenav, .th-pagination, .th-footer {
    padding-left: 40px; padding-right: 40px;
  }
  .th-hero { flex-direction: column; align-items: flex-start; padding-top: 56px; padding-bottom: 56px; }
  /* Le T et son cadre disparaissent au même seuil que le burger : en pleine
     largeur ils poussaient le contenu du hero sous la ligne de flottaison. */
  .th-hero__visual { display: none; }
  .th-hero__title { font-size: 40px; }
  .th-services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .th-realisations__grid, .th-archive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .th-single-body { grid-template-columns: 1fr; }
  .th-single-gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .th-nav, .th-hero, .th-section, .th-archive-hero, .th-filters, .th-archive-grid,
  .th-back-link, .th-single-hero, .th-single-cover, .th-single-body, .th-single-gallery,
  .th-single-pagenav, .th-pagination, .th-footer {
    padding-left: 24px; padding-right: 24px;
  }
  /* Logo + CTA + burger tenaient à 2px près sur une ligne de 375px : le burger
     passait à la ligne. On rétrécit le logo et l'écart. */
  .th-nav { gap: 10px; }
  .th-nav__logo img { height: 28px; }
  .th-nav .th-btn--primary { padding: 10px 16px; font-size: 13px; }
  .th-hero__title { font-size: 30px; }
  .th-hero__actions { flex-direction: column; align-items: stretch; }
  .th-section { padding-top: 56px; padding-bottom: 56px; }
  .th-services__grid, .th-realisations__grid, .th-archive-grid, .th-single-gallery__grid { grid-template-columns: 1fr; }
  .th-realisations__header, .th-contact, .th-cta { flex-direction: column; align-items: flex-start; }
  .th-contact__card { width: 100%; min-width: 0; }
  .th-single-hero__title { font-size: 30px; }
  .th-single-meta { gap: 20px; }
  .th-single-cover__img { height: 260px; }
}