/* ============================================================
   type-socle.css — le socle commun aux trois modèles
   Ce qui ne change pas d'un modèle à l'autre : le fil d'Ariane,
   l'échelle de titre, le bloc d'appel, et le rappel de fin de
   page au traitement de l'accueil. Chaque modèle n'ajoute que
   son héros.
   ============================================================ */

:root{--th-nuit:#071526;--th-encre:#0E1117;--th-ocre:#C28840}

/* ---- le fil d'Ariane ----------------------------------------
   Il doit se voir sans être marqué. Une plaque à 9 % de blanc
   suffit : le texte se détache du fond sombre, et rien ne crie.
   Pas de filet de couleur. */
.th-fil ol{display:flex;flex-wrap:wrap;align-items:center;gap:0;margin:0;padding:0;list-style:none}
.th-fil li+li::before{content:"/";margin:0 9px;color:rgba(244,246,248,.45)}
.th-fil a,.th-fil span{font-family:var(--fm);font-size:9.5px;letter-spacing:.15em;
  text-transform:uppercase;color:rgba(244,246,248,.74);text-decoration:none}
.th-fil a:hover{color:rgba(244,246,248,.85)}
.th-fil span[aria-current]{color:rgba(244,246,248,.92)}
.th-hero .th-fil{display:inline-block;background:rgba(14,17,23,.55);padding:7px 14px}

/* ---- le titre -----------------------------------------------
   Note de cascade : chaque page porte dans son propre <style> un
   « main .hero h1{font-size:..!important} » pose pour l'ancien
   heros. Il bat un « section.th-a h1 ». Les modeles ecrivent donc
   leur taille en « main .hero.th-a h1 », une classe de plus.
   Archivo, et l'écart de graisse comme seul effet : le très
   maigre pour la phrase, le gras franc pour ce que la page
   vend. La graisse se choisit au plus petit corps, parce que
   c'est là qu'on la paie : 200 tient à 46 px, pas à 28. */
.th-hero h1{margin:0!important;font-family:'Archivo',system-ui,sans-serif!important;
  font-weight:200!important;line-height:1.02!important;letter-spacing:-.038em!important;
  color:var(--text-w)!important;font-feature-settings:'tnum'}
.th-hero h1 b{font-weight:640!important;letter-spacing:-.042em!important}
.th-lead{margin:14px 0 0;font-size:15.5px;line-height:1.62;color:var(--text-w2);max-width:50ch}

/* ---- l'appel ------------------------------------------------ */
.th-act{display:flex;align-items:flex-end;gap:clamp(16px,2vw,26px);flex-wrap:wrap}
.th-tel{display:inline-flex;flex-direction:column;text-decoration:none}
.th-tel .k{font-family:var(--fm);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--th-ocre);margin-bottom:7px}
.th-tel .n{font-weight:220;letter-spacing:-.04em;color:var(--text-w);
  font-feature-settings:'tnum';font-size:clamp(25px,2.4vw,33px)}
.th-cta{display:inline-flex;align-items:center;padding:13px 22px;
  border:1px solid rgba(244,246,248,.42);color:var(--text-w);text-decoration:none;font-size:14px}
.th-cta:hover{background:rgba(244,246,248,.08)}
.th-meta{margin:0;font-family:var(--fm);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(244,246,248,.5);line-height:1.9}
.th-meta span{display:block}

/* ---- la légende de la photo ---------------------------------
   Le lieu, rien d'autre. Un chantier se situe, il ne se commente
   pas sur une photo. */
.th-hero figcaption{position:absolute;left:0;bottom:0;background:rgba(7,21,38,.78);
  color:var(--text-w2);font-family:var(--fm);font-size:9px;letter-spacing:.15em;
  text-transform:uppercase;padding:7px 13px}

/* ---- le rappel de fin de page -------------------------------
   C'est le point relevé : l'accueil et les pages de service
   n'avaient pas le même thème à cet endroit. Elles l'ont. */
section.pz-rappel{background:var(--th-nuit)!important;
  padding-block:clamp(40px,4.6vw,66px)!important}
.pz-rappel-in{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  gap:clamp(26px,3.4vw,64px)!important;align-items:end!important}
.pz-rappel .pz-k{color:var(--th-ocre)!important}
.pz-rappel-n{display:block;margin-top:12px;font-size:clamp(34px,4.4vw,62px)!important;
  font-weight:200!important;letter-spacing:-.05em!important;line-height:.95!important;
  color:var(--text-w)!important;text-decoration:none;font-feature-settings:'tnum'}
.pz-rappel-h{margin:14px 0 0!important;font-family:var(--fm);font-size:9.5px;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(244,246,248,.5)!important}
.pz-rappel-x{font-family:'Archivo',system-ui,sans-serif;font-weight:230;
  font-size:clamp(17px,1.5vw,21px)!important;line-height:1.5!important;
  letter-spacing:-.025em;color:var(--text-w2)!important;max-width:36ch}
.pz-rappel-x b{font-weight:600}
/* le bouton était dessiné pour un fond clair : sur le bleu nuit
   il disparaissait. Il reprend l'encre claire du héros. */
.pz-rappel .pz-btn2{border:1px solid rgba(244,246,248,.42)!important;
  color:var(--text-w)!important;background:transparent!important;
  margin-top:18px;display:inline-flex;align-items:center;padding:13px 22px}
.pz-rappel .pz-btn2:hover{background:rgba(244,246,248,.08)!important}

@media(max-width:860px){
  /* au téléphone le titre descend à 28 px : la graisse 200 n'y
     tient pas, elle devient un fantôme. */
  .th-hero h1{font-weight:340!important;letter-spacing:-.03em!important}
  .th-hero h1 b{font-weight:700!important}
  .pz-rappel-in{grid-template-columns:minmax(0,1fr)!important}
}