/* ============================================================
   SECTIONS COURANTES
   Métier, personne, formats, parcours, qui je suis, pied.
   ============================================================ */

.section{
  padding-block:clamp(52px, 5vw, 104px);
  border-block-start:var(--trait) solid var(--rule);
}

.section__tete{
  max-width:52ch;
  margin-block-end:clamp(32px, 3vw, 56px);
}
.section__num{
  font-family:var(--font-mono);
  font-size:var(--fs-micro);
  letter-spacing:var(--ls-caps);
  text-transform:uppercase;
  color:var(--ink-3);
  margin-block-end:var(--e-4);
}
.section__titre{
  font-size:var(--fs-h1);
  line-height:var(--lh-titre);
  letter-spacing:var(--ls-titre);
  max-width:18ch;
}
.section__lede{
  margin-block-start:var(--e-5);
  font-size:var(--fs-lede);
  color:var(--ink-2);
  max-width:var(--mesure);
}

/* ============================================================
   CE QUE JE FAIS — les quatre domaines, à parts égales.
   ============================================================ */
.domaines{
  display:grid;
  gap:var(--e-4);
  grid-template-columns:1fr;
}
@media (min-width:640px){ .domaines{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (min-width:1080px){ .domaines{ grid-template-columns:repeat(4,minmax(0,1fr)) } }

.domaine{
  display:flex; flex-direction:column; gap:var(--e-3);
  padding:var(--e-6);
  background:var(--bg-leve);
  border:var(--trait) solid var(--rule);
  border-radius:var(--r-3);
  min-width:0;
  /* Le survol soulève la carte, sans jamais toucher au flux. */
  transition:transform var(--t-etat) var(--courbe);
}
@media (hover:hover){
  .domaine:hover{ transform:translateY(calc(var(--e-1) * -1)) }
}
.domaine__num{
  font-family:var(--font-mono);
  font-size:var(--fs-nano);
  letter-spacing:var(--ls-caps);
  color:var(--ink-3);
}
.domaine__titre{
  font-family:var(--font-titre);
  font-weight:var(--fw-gras);
  font-size:var(--fs-h3);
  letter-spacing:var(--ls-titre);
}
.domaine__texte{ font-size:var(--fs-small); color:var(--ink-2) }

/* ---------- Pour qui / comment : deux colonnes ---------- */
.deux{
  display:grid; gap:var(--e-12);
  margin-block-start:clamp(48px, 5vw, 96px);
}
@media (min-width:900px){
  .deux{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--e-16) }
}
.deux__titre{
  font-family:var(--font-titre);
  font-weight:var(--fw-gras);
  font-size:var(--fs-h3);
  letter-spacing:var(--ls-titre);
  margin-block-end:var(--e-5);
}

/* Les métiers servis */
.pour-qui{ display:flex; flex-direction:column; gap:0 }
.pour-qui li{
  padding-block:var(--e-4);
  border-block-start:var(--trait) solid var(--rule);
  color:var(--ink-2);
  font-size:var(--fs-small);
}
.pour-qui li:first-child{ border-block-start:0; padding-block-start:0 }

/* Les communes */
.communes{
  display:flex; flex-wrap:wrap; gap:var(--e-2);
  margin-block-start:var(--e-6);
}
.commune{
  padding:var(--e-1) var(--e-3);
  border:var(--trait) solid var(--rule);
  border-radius:var(--r-rond);
  font-family:var(--font-mono);
  font-size:var(--fs-nano);
  color:var(--ink-3);
}

/* Comment je travaille — trois temps */
.temps{ display:flex; flex-direction:column; gap:0 }
.temps li{
  display:flex; gap:var(--e-4);
  padding-block:var(--e-5);
  border-block-start:var(--trait) solid var(--rule);
}
.temps li:first-child{ border-block-start:0; padding-block-start:0 }
.temps__idx{
  font-family:var(--font-mono);
  font-size:var(--fs-nano);
  color:var(--ink-3);
  flex:none;
  padding-block-start:var(--e-1);
}
.temps__quoi{ font-size:var(--fs-small); color:var(--ink-2) }
.temps__quoi strong{ color:var(--ink); font-weight:var(--fw-normal) }

/* ============================================================
   UNE PERSONNE — trois arguments.
   ============================================================ */
.arguments{
  display:grid; gap:var(--e-4);
  grid-template-columns:1fr;
}
@media (min-width:900px){ .arguments{ grid-template-columns:repeat(3,minmax(0,1fr)) } }

.argument{
  display:flex; flex-direction:column; gap:var(--e-4);
  padding:var(--e-6);
  border:var(--trait) solid var(--rule);
  border-radius:var(--r-3);
  min-width:0;
}
.argument__titre{
  font-family:var(--font-titre);
  font-weight:var(--fw-gras);
  font-size:var(--fs-h3);
  letter-spacing:var(--ls-titre);
}
.argument__texte{ font-size:var(--fs-small); color:var(--ink-2) }
.argument__pas{
  margin-block-start:auto;
  padding-block-start:var(--e-4);
  border-block-start:var(--trait) solid var(--rule);
  font-family:var(--font-mono);
  font-size:var(--fs-nano);
  color:var(--ink-3);
}

/* ============================================================
   TROIS FORMATS — par le problème du client.
   ============================================================ */
.formats{ display:flex; flex-direction:column; gap:0 }
.format{
  display:grid; gap:var(--e-4);
  padding-block:clamp(28px, 3vw, 48px);
  border-block-start:var(--trait) solid var(--rule);
  align-items:start;
}
@media (min-width:900px){
  .format{ grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) auto; gap:var(--e-10) }
}
.format__probleme{
  font-family:var(--font-texte);
  font-size:var(--fs-h3);
  color:var(--ink);
  font-style:italic;
}
.format__reponse{ font-size:var(--fs-small); color:var(--ink-2) }
.format__nom{
  font-family:var(--font-mono);
  font-size:var(--fs-nano);
  letter-spacing:var(--ls-caps);
  text-transform:uppercase;
  color:var(--ink-3);
  white-space:nowrap;
}

/* ============================================================
   COMMENT ÇA SE PASSE — quatre étapes.
   ============================================================ */
.etapes{
  display:grid; gap:var(--e-4);
  grid-template-columns:1fr;
  counter-reset:etape;
}
@media (min-width:700px){ .etapes{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (min-width:1080px){ .etapes{ grid-template-columns:repeat(4,minmax(0,1fr)) } }

.etape{
  display:flex; flex-direction:column; gap:var(--e-3);
  padding-block-start:var(--e-5);
  border-block-start:var(--trait-fort) solid var(--rule-fort);
  min-width:0;
}
.etape__idx{
  font-family:var(--font-mono);
  font-size:var(--fs-nano);
  letter-spacing:var(--ls-caps);
  color:var(--ink-3);
}
.etape__titre{
  font-family:var(--font-titre);
  font-weight:var(--fw-gras);
  font-size:var(--fs-h3);
  letter-spacing:var(--ls-titre);
}
.etape__texte{ font-size:var(--fs-small); color:var(--ink-2) }

/* ============================================================
   QUI JE SUIS
   ============================================================ */
.qui{ display:grid; gap:var(--e-10) }
@media (min-width:900px){
  .qui{ grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:var(--e-16) }
}
.qui__texte{ display:flex; flex-direction:column; gap:var(--e-5); max-width:var(--mesure) }
.qui__texte p{ color:var(--ink-2) }
.qui__texte p:first-child{
  font-size:var(--fs-lede);
  color:var(--ink);
}
.qui__faits{ display:flex; flex-direction:column; gap:0; align-self:start }
.qui__fait{
  display:flex; flex-direction:column; gap:var(--e-1);
  padding-block:var(--e-4);
  border-block-start:var(--trait) solid var(--rule);
}
.qui__fait:first-child{ border-block-start:0; padding-block-start:0 }
.qui__fait-k{
  font-family:var(--font-mono);
  font-size:var(--fs-nano);
  letter-spacing:var(--ls-caps);
  text-transform:uppercase;
  color:var(--ink-3);
}
.qui__fait-v{ font-size:var(--fs-small) }

/* ============================================================
   PIED DE PAGE — le téléphone, le logotype, rien d'autre.
   ============================================================ */
.pied{
  padding-block:clamp(56px, 6vw, 112px);
  border-block-start:var(--trait) solid var(--rule);
}
.pied__in{
  display:flex; flex-wrap:wrap; gap:var(--e-8);
  align-items:center; justify-content:space-between;
}
.pied__tel{
  font-family:var(--font-titre);
  font-weight:var(--fw-gras);
  font-size:var(--fs-h2);
  letter-spacing:var(--ls-titre);
  font-variant-numeric:tabular-nums;
  text-decoration:none;
  color:var(--ink);
  display:inline-flex; align-items:center;
  min-block-size:var(--tap-min);
  transition:opacity var(--t-reaction) var(--courbe);
}
.pied__tel:hover{ opacity:.75 }

/* « Pour qui » occupe seul le bas de la section : le déroulé de
   travail vit dans « Comment ça se passe », il n'a pas à être
   raconté deux fois. */
.pour-qui-bloc{
  margin-block-start:clamp(36px, 3.5vw, 64px);
  max-width:var(--mesure);
}

/* Les commerces servis sont des repères, pas un argumentaire :
   des pastilles, pas six lignes bordées. */
.commune--metier{
  font-family:var(--font-texte);
  font-size:var(--fs-small);
  letter-spacing:0;
  color:var(--ink-2);
  border-color:var(--rule-fort);
  padding:var(--e-2) var(--e-4);
}
.pour-qui-bloc .communes + .micro{ margin-block-start:var(--e-6) }