/* ============================================================
   Correctifs de responsivité — chargé par TOUTES les pages.

   À charger APRÈS cp/assets/main.css (build Tailwind compilé),
   dont ces règles corrigent quelques effets de bord sur petit
   écran. Ne pas y mettre de mise en page : uniquement des
   correctifs de débordement, de lisibilité et de confort tactile.
   ============================================================ */

/* ------------------------------------------------------------
   1. Débordement horizontal
   ------------------------------------------------------------
   Les pages posent `html,body{overflow-x:hidden}`, ce qui MASQUE
   les dépassements au lieu de les corriger : le contenu était
   silencieusement coupé au bord droit, sans barre de défilement
   pour s'en rendre compte. On traite donc les causes.
   ------------------------------------------------------------ */

/* `.badge` est en white-space:nowrap. Sur l'accueil, le badge
   « Promotion & construction résidentielle haut de gamme » (51
   caractères) imposait ainsi 364 px de largeur minimale à la
   colonne du hero, large de 335 px : 66 éléments débordaient de
   29 px et la fin des phrases était rognée. */
@media (max-width: 767px) {
  .badge {
    white-space: normal;
    text-align: center;
  }
}

/* Un enfant de grille ne descend pas sous sa largeur min-content
   par défaut (`1fr` = `minmax(auto, 1fr)`) : un seul élément
   incompressible élargit toute la colonne. */
.cf-hero-grid > *,
.grid > * {
  min-width: 0;
}

/* Une grille `grid-cols-12` réserve 11 gouttières AVANT de répartir
   la place restante entre les colonnes. Avec `gap-8` (32 px) il faut
   donc 352 px de gouttières, et 440 px avec `gap-10` — alors que la
   zone utile ne fait que 335 px sur un écran de 375 px. Les colonnes
   tombaient à 0 px et les blocs `col-span-12` dépassaient de 100 px,
   coupés par le `overflow-x:hidden` des pages.
   On borne donc la gouttière horizontale sur petit écran : la
   gouttière verticale (`row-gap`) reste celle du gabarit, et les
   grilles à 2 colonnes du mobile (`col-span-6`) gardent un écart
   visible. */
@media (max-width: 1023px) {
  .grid-cols-12 {
    column-gap: clamp(12px, 4vw, 24px);
  }
}

/* Filet de sécurité : aucune image ne dépasse son conteneur. */
img {
  max-width: 100%;
}

/* ------------------------------------------------------------
   2. Confort tactile
   ------------------------------------------------------------
   Les liens en liste (navigation du pied de page, coordonnées de
   la page contact) ne mesuraient que 17 à 20 px de haut, sans
   remplissage : trop petits pour être visés au doigt.
   ------------------------------------------------------------ */
@media (max-width: 1023px) {
  footer ul li > a,
  .contact-list li > a {
    display: flex;
    align-items: center;
    min-height: 40px;
  }

  /* La hauteur minimale remplace l'espacement de la liste, sinon
     le pied de page gagnerait ~330 px de hauteur inutile.
     Sélecteur calé sur la spécificité de `space-y-3` (0,3,0). */
  footer ul.space-y-3 > li:not([hidden]) ~ li:not([hidden]) {
    margin-top: 0;
  }

  /* Sur la page contact, l'intitulé et le lien forment un seul
     bloc cliquable confortable. */
  .contact-list li > a {
    min-height: 44px;
  }
}

/* La largeur seule est un mauvais critère : une tablette en paysage fait
   1024 px et se touche au doigt. On applique donc aussi la règle à tout
   appareil dont le pointeur est imprécis, quelle que soit sa taille. */
@media (pointer: coarse) {
  footer ul li > a,
  .contact-list li > a {
    display: flex;
    align-items: center;
    min-height: 40px;
  }
  footer ul.space-y-3 > li:not([hidden]) ~ li:not([hidden]) {
    margin-top: 0;
  }
}

/* ------------------------------------------------------------
   3. Lisibilité sur petit écran
   ------------------------------------------------------------ */
@media (max-width: 767px) {
  /* Les libellés en capitales des pages projet descendaient à
     12,5 px : trop juste une fois l'interlettrage appliqué. */
  .pj-crumb,
  .pj-gal-title,
  .pj-meta dt,
  .pj-nav-kicker {
    font-size: 13px;
  }

  /* Le fil d'Ariane du hero peut dépasser sur un titre long. */
  .pj-crumb {
    row-gap: 4px;
  }

  /* Seul lien du fil d'Ariane : 20 px de haut sans remplissage. */
  .pj-crumb a {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
  }
}

/* ------------------------------------------------------------
   4. Typographie commune
   ------------------------------------------------------------
   Ce fichier est le seul chargé par les 16 pages : c'est donc ici que
   vivent les règles de texte valables partout, pas seulement les
   correctifs d'affichage.
   ------------------------------------------------------------ */

/* Titres de cartes en capitales (accueil, services, à propos).
   Passé par text-transform plutôt qu'en réécrivant le texte : les accents
   restent corrects (MAÎTRISE D'ŒUVRE) et le contenu lisible dans le HTML.
   Taille réduite et interlettrage ouvert, sans quoi les capitales
   paraissent lourdes et se resserrent. */
main h3.text-heading-6 {
  text-transform: uppercase;
  letter-spacing: .03em;
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.3;
}