/* Corrections retours associés (sept. 2026) — chargé APRÈS global.css (surcharges).
   Séparé car global.css est trop volumineux pour l'upload FTP Hostinger. */

/* 1) Chiffres clés : traits verticaux fins (comme les secteurs d'activités) */
.stat + .stat::before { width: 1.5px; }

/* 2) Sous-filtres : mêmes crochets verts que les filtres principaux (plus de pastille) */
.proj-subfilter {
  padding: 6px 4px;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--muted);
}
.proj-subfilter:hover { color: var(--ink); }
.proj-subfilter.is-active {
  color: var(--ink);
  font-weight: 700;
  background: none;
  border-color: transparent;
}
.proj-subfilter.is-active::before { content: '['; margin-right: 5px; color: var(--accent); font-weight: 700; }
.proj-subfilter.is-active::after  { content: ']'; margin-left: 5px; color: var(--accent); font-weight: 700; }

/* 3) Mosaïque : espace sous les titres réduit pour équilibrer l'horizontal */
.proj-collection.is-mosaique { gap: 18px 14px; }

/* 4) Vue liste : vignette réduite au minimum */
.proj-collection.is-liste .proj-card {
  grid-template-columns: 40px minmax(0, 1fr) 150px 120px 104px 60px;
}
.is-liste .proj-card__media {
  display: block;
  width: 40px;
  height: 40px;
  align-self: center;
}
@media (hover: hover) and (pointer: fine) {
  .proj-collection.is-liste .proj-card {
    grid-template-columns: 40px minmax(0, 1fr) 150px 120px 104px 60px;
  }
  .is-liste .proj-card__media { display: block; }
}
@media (max-width: 720px) {
  .proj-collection.is-liste .proj-card { grid-template-columns: 40px 1fr auto; }
}

/* 5) Fiche projet : titre en MAJUSCULES, objet (après l'article) en gras */
.proj-detail__title {
  text-transform: uppercase;
  font-weight: 400;
  letter-spacing: 0.005em;
  line-height: 1.12;
  font-size: clamp(23px, 2.7vw, 34px);
}
.proj-detail__title strong { font-weight: 700; }

/* Page « Nos réalisations » : intro éditable sous le titre */
.proj-page__intro { margin-top: 12px; max-width: 62ch; font-size: clamp(15px, 1.5vw, 17px); line-height: 1.6; color: var(--ink-soft); }

/* Formulaire de contact (Contact Form 7) — reprend le style .contact-form */
.contact-form br { display: none; }
.contact-form p { margin: 0; }
.contact-form .wpcf7-form-control-wrap { display: block; }
.contact-form input[type=text],
.contact-form input[type=email],
.contact-form textarea { width: 100%; }
.contact-form input[type=submit] {
  align-self: flex-start; width: auto; cursor: pointer; border: none;
  background: var(--accent); color: #fff;
  padding: 13px 30px; font-size: 14px; font-weight: 600; letter-spacing: 0.02em;
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.contact-form input[type=submit]:hover { transform: translateY(-2px); }
.contact-form .wpcf7-not-valid-tip { color: #c0392b; font-size: 12px; margin-top: 4px; }
.contact-form .wpcf7-response-output { margin: 12px 0 0 !important; padding: 10px 14px; font-size: 13px; }
.contact-form .wpcf7-spinner { margin-left: 10px; }

/* Page Contact : plus d'espace entre les blocs de libellés */
.contact-block + .contact-block { margin-top: 40px; }
.contact-form { gap: 28px; }

/* 6) Mosaïque sur mobile : correction du débordement horizontal.
   La colonne « 1fr » vaut en réalité « minmax(auto, 1fr) » : son minimum suit le
   min-content des tuiles (images 800-1024px), donc la grille refusait de descendre
   sous ~510px et débordait un écran de 375px. minmax(0, 1fr) + min-width:0 la
   laissent se réduire à la largeur réelle du conteneur. */
@media (max-width: 900px) {
  .proj-collection.is-mosaique { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .is-mosaique .proj-card { min-width: 0; }
  .is-mosaique .proj-card__media { min-width: 0; }
}
@media (max-width: 560px) {
  .proj-collection.is-mosaique { grid-template-columns: minmax(0, 1fr); }
}

/* 7) Footer sur mobile : la colonne Navigation (Accueil/Agence/Projets/Contact)
   repasse à gauche au lieu d'être poussée et alignée à droite. */
@media (max-width: 720px) {
  .footer__col--nav { margin-left: 0; text-align: left; }
  .footer__navlinks { align-items: flex-start; }
}

/* 8) Menu burger mobile : correction du panneau tronqué.
   Le header porte un backdrop-filter (verre dépoli). Comme un transform, un
   backdrop-filter fait de l'élément le bloc conteneur de ses descendants
   position:fixed. Résultat : le menu plein écran se limitait à la hauteur du
   header (~86px) dès que celui-ci devenait « solide » (au scroll et sur les
   pages intérieures) — d'où le menu cassé « certaines fois », la page visible
   dessous et les libellés qui se chevauchent. On force la hauteur plein écran
   du menu ouvert (le header reste collé en haut, donc top:0 + 100dvh = tout
   l'écran) et on retire le flou pendant l'ouverture. */
@media (max-width: 720px) {
  .site-header.nav-open {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .nav.is-open {
    height: 100vh;
    height: 100dvh;
    bottom: auto;
    overflow-y: auto;
  }
}

/* 9) Page Agence : mosaïque de photos de l'agence (façade en grand à gauche +
   grille 2×2 des intérieurs à droite), à la place de la grande photo de groupe. */
.agence-photos-sec { margin: clamp(6px, 1.5vw, 16px) 0 clamp(30px, 5vw, 64px); }
.agence-photos {
  width: 100%;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
  grid-template-columns: 1.3fr 1fr 1fr; /* pleine largeur, bord à bord (retour client) */
  grid-template-rows: repeat(2, minmax(160px, 250px));
}
.agence-photos figure { margin: 0; overflow: hidden; background: #ececec; }
.agence-photos img { width: 100%; height: 100%; object-fit: cover; display: block; }
.agence-photos__main { grid-row: 1 / 3; }
@media (max-width: 760px) {
  .agence-photos {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;
    gap: 8px;
  }
  .agence-photos__main { grid-column: 1 / 3; aspect-ratio: 16 / 10; }
  .agence-photos__cell { aspect-ratio: 1 / 1; }
}

/* 10) Intros accueil (rubrique agence) + page agence : pleine largeur (largeur de
   l'image en dessous), pour tenir sur ~2 lignes au lieu de 3 (retour client). */
.agence-hero__lede { max-width: none; }
.team__intro { max-width: none; }

/* 11) Bouton « Télécharger la fiche » : sa visibilité est désormais gérée dans
   WordPress (réglage « Masquer le bouton » sur la page Nos réalisations + champ
   « Fiche PDF personnalisée » par projet), plus par CSS. */

/* 12) Page agence — retours associés (jour J, 18 sept.) */
/* a) plus d'espace entre l'intro et les photos (comme sur l'accueil) */
.agence-photos-sec { margin-top: clamp(38px, 5vw, 64px); }
/* b) « Notre histoire » (paragraphe du haut) : police + interlignes réduits,
      calés sur le paragraphe du bas */
.agence-history__body p { font-size: clamp(15px, 1.4vw, 17px); line-height: 1.55; }
.agence-history__body p + p { margin-top: 14px; }
/* c) bloc du bas : saut de ligne visible entre les deux idées, paragraphe vide
      (créé par l'éditeur) masqué, colonnes nettes alignées en haut */
.agence-after p { margin: 0 0 16px; font-size: clamp(15px, 1.4vw, 17px); line-height: 1.55; color: var(--ink-soft); break-inside: avoid; }
.agence-after strong { color: var(--ink-soft); }
.agence-after p:empty { display: none; margin: 0; }