/* ============================================================
   type-c.css — modèle C, « encre »
   Le fond n'est plus le marine mais l'encre du pied de page, et
   la photo n'est plus une image : incrustée à 38 %, désaturée,
   elle ne se lit plus que comme une matière. Un filet traverse
   au pied, carré ocre à un bout, provenance à l'autre, et tout
   le texte se tient dessous. C'est le plus sévère des trois.
   Se charge après type-socle.css.

   Note : le fil d'Ariane et le bas restent DANS LE FLUX. Posés
   en absolu, ils ignoraient le padding haut de 108 px que la
   page donne à son héros, et le fil passait sous la barre de
   navigation. Seule la photo est en absolu, derrière.
   ============================================================ */

section.th-c{background:var(--th-encre);color:var(--text-w);position:relative;
  padding-bottom:clamp(30px,3.4vw,40px)!important;overflow:hidden;
  display:flex;flex-direction:column;
  min-height:100svh}

/* la photo en matière : elle tient tout le fond, on ne la
   regarde pas, on la sent */
.th-c-fond{position:absolute;inset:0;opacity:.78;pointer-events:none;z-index:0}
.th-c-fond img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(.12) contrast(1.04)}
/* un voile du bas vers le haut, pour que le texte tienne sans
   avoir à poser une boîte derrière lui */
.th-c-voile{position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(to top,rgba(14,17,23,.93) 0%,rgba(14,17,23,.58) 46%,rgba(14,17,23,.22) 100%)}

.th-c-bar{position:relative;z-index:2;padding:0 var(--px)}
.th-c-bas{position:relative;z-index:2;margin-top:auto;padding:clamp(70px,9vw,120px) var(--px) 0}

/* le filet qui traverse : il tient la composition au lieu de la
   décorer, et il donne au héros son arête basse */
.th-c-fil{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.th-c-fil .c{width:9px;height:9px;background:var(--th-ocre);flex:none}
.th-c-fil .t{flex:1;height:1px;background:rgba(244,246,248,.18)}
.th-c-fil .o{font-family:var(--fm);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(244,246,248,.5)}

.th-c-txt{display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(24px,3.4vw,50px);align-items:end}
main .hero.th-c h1{font-size:clamp(28px,3.6vw,48px)!important;font-weight:180!important}
section.th-c h1 b{font-weight:620!important}
.th-c-txt .th-lead{max-width:48ch;font-size:15px}
.th-c-act{text-align:right}
.th-c-act .th-tel{align-items:flex-end}
.th-c-act .th-tel .n{font-size:clamp(26px,2.7vw,38px);font-weight:200}
.th-c-act .th-cta{margin-top:16px}
.th-c-act .th-meta{margin-top:18px;text-align:right;max-width:40ch;margin-left:auto}

@media(max-width:860px){
  section.th-c{min-height:0}
  .th-c-bas{padding-top:clamp(150px,44vw,230px)}
  .th-c-txt{grid-template-columns:minmax(0,1fr);gap:22px}
  main .hero.th-c h1{font-weight:340!important}
  .th-c-act{text-align:left}
  .th-c-act .th-tel{align-items:flex-start}
  .th-c-act .th-meta{text-align:left}
}