/* ============================================================
   base.css — PIC · Premium Immobilier Consulting (Cameroun)
   Langage visuel repris du projet Claude Design de la marque :
   crème / noir / or, Fraunces en display léger et italique doré pour
   l'accent, General Sans en corps, grain, filets fins, gros chiffres.
   Le dispositif signature est « LA COTE » : la ligne de cote de l'architecte,
   qui annote chaque visuel sur son arête basse — numéro, ville, typologie.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--creme);
  color: var(--noir);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; }
::selection { background: var(--or); color: var(--noir); }

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 0.96;
  letter-spacing: -0.03em;
  font-variation-settings: "opsz" 144;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--step-hero); letter-spacing: -0.038em; }
/* .ligne est un SAUT DE LIGNE, pas un état d'animation : elle doit être block
   même sans JavaScript. Sous .has-js seulement, elle gagnait son display:block
   et les titres se recollaient en passe ?audit, sans JS et en mouvement réduit
   (« Ce que ça changesur un chantier »). Vu sur la capture du 14/08. */
.ligne { display: block; }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); letter-spacing: -0.02em; }
/* L'italique doré est l'accent signature de PIC. Mais l'or de marque ne fait que
   2,3:1 sur le crème — il échoue AA même en gros corps (seuil 3,0). Sur fond clair
   il devient donc --or-encre (5,41:1) ; sur fond noir il reprend sa valeur exacte
   de charte. Mesuré par Lighthouse, pas supposé. */
em { font-style: italic; color: var(--or-encre); }
.section--noir em, .hero em, .page-tete em, .bandeau em, .pied em { color: var(--or); }
p  { margin: 0 0 1em; max-width: 60ch; }

/* Le sourcil : le petit label capitale espacé de la charte PIC */
.sourcil {
  font-family: var(--font-body);
  font-size: 0.69rem; letter-spacing: 0.22em; text-transform: uppercase;
  font-weight: 500; color: var(--beton-encre); margin: 0 0 var(--sp-4);
}
.mono { font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: 0.1em; font-feature-settings: "tnum"; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Le grain de la charte — une texture, pas un effet */
.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 100;
  opacity: 0.055; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2' seed='5'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .7 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
}

/* ── Coquille ────────────────────────────────────────────────────────────── */
.enveloppe { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { position: relative; padding-block: clamp(5rem, 13vw, 12rem); }
.section--noir { background: var(--noir); color: var(--creme); isolation: isolate; }
.section--noir .sourcil { color: var(--beton); }
.section--noir p { color: var(--beton); }
.section--blanc { background: var(--blanc); }

/* Titre de chapitre : numéro d'article Fraunces + intitulé, calés sur l'axe */
.chapitre { display: grid; grid-template-columns: 12rem 1fr; gap: var(--gutter); align-items: end; margin-bottom: clamp(3rem, 7vw, 7rem); }
.chapitre__num { font-family: var(--font-display); font-size: var(--step--1); color: var(--beton-encre); }
/* .sourcil est un <span> : sans display:block son margin-bottom est ignoré et le
   libellé de chapitre se colle au sourcil (« §09 — ENGAGEMENTSCe sur quoi… »).
   Vu sur la planche du 14/08. */
.chapitre__num .sourcil { display: block; }
.section--noir .chapitre__num { color: var(--beton); }
@media (max-width: 860px) { .chapitre { grid-template-columns: 1fr; gap: var(--sp-3); align-items: start; } }

/* ── L'AXE : la grille qui se lit de part et d'autre du fil ───────────────── */
.axe { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 7vw, 7rem); row-gap: var(--sp-6); align-items: center; }
/* grid-row: 1 est OBLIGATOIRE, pas cosmétique. Quand le DOM place .droite AVANT
   .gauche (blocs à image à droite : métiers 02 et 04), le placement automatique
   ne revient jamais en arrière : la colonne 1 de la rangée 1 est sautée et le
   texte tombe en rangée 2, très loin sous son image. Défaut vu sur la capture
   desktop du 14/08, invisible dans le code. */
.axe > .gauche { grid-column: 1; grid-row: 1; }
.axe > .droite { grid-column: 2; grid-row: 1; }
@media (max-width: 860px) {
  .axe { grid-template-columns: 1fr; }
  .axe > .gauche, .axe > .droite { grid-column: 1; grid-row: auto; }
}

/* ── Dispositif signature « LA COTE » ─────────────────────────────────────
   La ligne de cote de l'architecte. Elle n'est pas posée SUR la page, elle
   ANNOTE : chaque visuel porte, sur son arête basse et en débord dans la
   gouttière, la cote qui le désigne — numéro de métier, ville, typologie.
   Le trait part de son origine, ses deux tirets d'about se posent, l'étiquette
   monte se ranger dessous. C'est le geste d'un plan qu'on renseigne.
   Remplace le fil à plomb flottant de la v1 : un objet qui n'annote rien ne
   dit rien de l'entreprise. */
.cote { position: relative; margin-top: 1.1rem; padding-top: 0.9rem; }
.cote__trait {
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: var(--or); transform-origin: left center;
  display: block;
}
.cote__about {
  position: absolute; top: -4px; width: 1px; height: 9px;
  background: var(--or); transform-origin: center top;
}
.cote__about--debut { left: 0; }
.cote__about--fin { right: 0; }
.cote__label {
  display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 0.63rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--or-encre); margin: 0;
}
.section--noir .cote__label, .hero .cote__label { color: var(--or); }
.cote__label b { font-weight: 500; color: inherit; }

/* Le visuel coté : le cadre que le décoffrage libère, et sa cote en dessous. */
.visuel { display: block; }

/* Le cadre coffré : c'est lui que le décoffrage libère. */
.cadre { position: relative; overflow: hidden; background: var(--noir-2); }
.cadre img { width: 100%; height: 100%; object-fit: cover; }

/* ── En-tête ──────────────────────────────────────────────────────────────── */
.entete {
  position: fixed; inset: 0 0 auto 0; z-index: 80;
  padding: 1.2rem var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  mix-blend-mode: difference; color: var(--blanc);
}
.marque { display: flex; align-items: center; gap: 0.85rem; text-decoration: none; }
.marque__pastille {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border: 1px solid currentColor; border-radius: 50%;
  font-family: var(--font-body); font-size: 0.63rem; font-weight: 500; letter-spacing: 0.12em;
}
/* Le nom complet chevauchait le premier lien de menu à 1440 px (capture du 14/08).
   Il se replie sur le monogramme dès que la barre est trop étroite pour les deux. */
.marque__nom { font-family: var(--font-display); font-size: 1.15rem; font-weight: 300; letter-spacing: 0.03em; white-space: nowrap; }
@media (max-width: 1400px) { .marque__nom { font-size: 1rem; } }
@media (max-width: 1240px) { .marque__nom { display: none; } }

.nav { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.2rem); }
.lien-nav {
  position: relative; font-size: 0.81rem; letter-spacing: 0.04em;
  text-decoration: none; padding-block: 0.4rem;
}
.lien-nav::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-med) var(--ease);
}
@media (max-width: 980px) { .nav__secondaire { display: none; } }

.bouton {
  display: inline-flex; align-items: center; gap: 0.85rem;
  font-family: var(--font-body); font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none;
  padding: 1.05rem 1.7rem; border-radius: 999px;
  background: var(--or); color: var(--noir); border: 1px solid var(--or);
}
.bouton--creux { background: transparent; color: currentColor; border-color: currentColor; }
.bouton--mince { padding: 0.7rem 1.25rem; font-size: 0.64rem; }
.bouton__point { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.7; flex: none; }

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.hero { position: relative; min-height: 100svh; background: var(--noir); color: var(--creme); overflow: hidden; display: flex; align-items: flex-end; padding-block: 9rem 0; }
.hero__fond { position: absolute; inset: 0; z-index: 0; }
.hero__fond img { width: 100%; height: 100%; object-fit: cover; }
.hero__scrim { position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse at 72% 38%, transparent 0%, color-mix(in srgb, var(--noir) 42%, transparent) 52%, color-mix(in srgb, var(--noir) 92%, transparent) 100%); }
.hero__corps { position: relative; z-index: 2; width: 100%; padding-bottom: 5.5rem; }
.hero__coord { display: flex; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; color: var(--beton); font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; line-height: 1.9; margin-bottom: clamp(2.5rem, 8vh, 7rem); }
.hero__coord b { color: var(--blanc); font-weight: 500; }
.hero h1 { color: var(--creme); }
.hero__mot { display: block; }
.hero__mot--retrait { padding-left: 8vw; }
@media (max-width: 860px) { .hero__mot--retrait { padding-left: 4vw; } }
.hero__bas { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 8vw, 8rem); align-items: end; margin-top: var(--sp-5); }
@media (max-width: 860px) { .hero__bas { grid-template-columns: 1fr; gap: var(--sp-5); } }
.hero__sous { color: var(--beton); max-width: 46ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.bande-metiers { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; border-top: 1px solid color-mix(in srgb, var(--creme) 10%, transparent); display: grid; grid-template-columns: repeat(4, 1fr); font-size: 0.63rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--beton); }
.bande-metiers span { padding: 1.1rem clamp(1rem, 3vw, 2.4rem); border-right: 1px solid color-mix(in srgb, var(--creme) 8%, transparent); }
.bande-metiers span:last-child { border-right: 0; }
.bande-metiers b { color: var(--or); font-weight: 500; margin-right: 0.6rem; }
@media (max-width: 980px) { .bande-metiers { display: none; } }

/* ── Positionnement + repères chiffrés ────────────────────────────────────── */
.phrase-cle { font-family: var(--font-display); font-weight: 300; font-size: var(--step-3); line-height: 1.02; letter-spacing: -0.025em; font-variation-settings: "opsz" 144; max-width: 20ch; }
.reperes { margin-top: clamp(3rem, 9vw, 8rem); display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid color-mix(in srgb, var(--noir) 14%, transparent); }
.repere { padding: 2.6rem 1.8rem 1rem; border-right: 1px solid color-mix(in srgb, var(--noir) 14%, transparent); display: flex; flex-direction: column; gap: 1rem; }
.repere:last-child { border-right: 0; }
.repere__v { font-family: var(--font-display); font-size: clamp(3rem, 6.5vw, 6.5rem); font-weight: 300; line-height: 0.9; letter-spacing: -0.02em; font-variation-settings: "opsz" 144; }
.repere__v sup { font-size: 0.36em; color: var(--or); margin-left: 0.3rem; }
.repere__t { font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 500; }
.repere__l { font-size: 0.83rem; line-height: 1.5; color: var(--beton-encre); margin: 0; }
@media (max-width: 860px) {
  .reperes { grid-template-columns: repeat(2, 1fr); }
  .repere:nth-child(2) { border-right: 0; }
  .repere:nth-child(-n+2) { border-bottom: 1px solid color-mix(in srgb, var(--noir) 14%, transparent); }
}

/* ── Métiers ──────────────────────────────────────────────────────────────── */
.metier { position: relative; padding-block: clamp(3.5rem, 9vw, 8rem); border-top: 1px solid color-mix(in srgb, var(--creme) 12%, transparent); }
.metier__media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--noir-2); }
.metier__media img { width: 100%; height: 100%; object-fit: cover; }
.metier__num { font-family: var(--font-display); font-size: var(--step--1); color: var(--or); margin: 0 0 0.6rem; letter-spacing: 0.06em; }
.metier h3 { font-size: var(--step-3); margin-bottom: 1.2rem; }
.metier__liste { list-style: none; padding: 0; margin: var(--sp-4) 0 0; display: grid; gap: 0.7rem; max-width: 46ch; }
.metier__liste li { position: relative; padding-left: 2rem; font-size: 0.87rem; color: var(--beton); }
.metier__liste li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 1rem; height: 1px; background: var(--or); }

/* ── Bandeau défilant (repris de la charte PIC) ───────────────────────────── */
.bandeau { background: var(--noir); color: var(--creme); overflow: hidden; padding-block: 2.4rem; border-block: 1px solid color-mix(in srgb, var(--creme) 8%, transparent); }
.bandeau__piste { display: flex; gap: 4rem; white-space: nowrap; will-change: transform; animation: defile 42s linear infinite; font-family: var(--font-display); font-size: clamp(2.6rem, 7vw, 7rem); font-weight: 300; letter-spacing: -0.02em; line-height: 1; font-variation-settings: "opsz" 144; }
.bandeau__piste > span { display: inline-flex; align-items: center; gap: 4rem; }
.bandeau__point { width: 12px; height: 12px; border-radius: 50%; background: var(--or); display: inline-block; flex: none; }
@keyframes defile { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .bandeau__piste { animation: none; } }

/* ── Cartes (modèles, matériel) ───────────────────────────────────────────── */
.grille-cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 1px; background: color-mix(in srgb, var(--noir) 14%, transparent); border: 1px solid color-mix(in srgb, var(--noir) 14%, transparent); }
.carte { background: var(--creme); display: block; text-decoration: none; }
.carte__media { overflow: hidden; aspect-ratio: 3 / 2; background: var(--beton); }
.carte__media img { width: 100%; height: 100%; object-fit: cover; }
.carte__corps { padding: var(--sp-4) var(--sp-4) var(--sp-5); }
.carte h3 { font-size: var(--step-1); margin-bottom: 0.5rem; }
.carte p { font-size: 0.85rem; color: var(--beton-encre); margin: 0; }
.carte__meta { display: flex; gap: 1.2rem; flex-wrap: wrap; margin-top: 1.2rem; font-size: 0.63rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--or-encre); }

/* ── Méthode ──────────────────────────────────────────────────────────────── */
.etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: color-mix(in srgb, var(--creme) 12%, transparent); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.etape { background: var(--noir); padding: 2.2rem 1.8rem 2.6rem; }
.etape__num { font-family: var(--font-display); font-size: 2.6rem; font-weight: 300; line-height: 1; color: var(--or); margin: 0 0 1.4rem; }
.etape h3 { font-size: var(--step-1); margin-bottom: 0.7rem; }
.etape p { font-size: 0.85rem; color: var(--beton); margin: 0; }

/* ── Bande d'engagements ──────────────────────────────────────────────────── */
.bande { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--sp-6); }
.bande__item h3 { font-size: var(--step-1); margin-bottom: 0.7rem; }
.bande__item p { font-size: 0.87rem; color: var(--beton-encre); }
.section--noir .bande__item p { color: var(--beton); }
.filet-or { display: block; width: 2.4rem; height: 1px; background: var(--or); margin-bottom: 1.4rem; }

/* ── Fondatrice ───────────────────────────────────────────────────────────── */
.portrait { aspect-ratio: 3 / 4; overflow: hidden; background: var(--beton); }
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.fiche { list-style: none; margin: var(--sp-5) 0 0; padding: var(--sp-4) 0 0; display: grid; gap: 0.7rem; border-top: 1px solid color-mix(in srgb, var(--noir) 14%, transparent); }
.fiche div { display: grid; grid-template-columns: 12rem 1fr; gap: 1rem; font-size: 0.85rem; }
.fiche dt { font-size: 0.63rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--beton-encre); font-weight: 500; padding-top: 0.25em; }
.fiche dd { margin: 0; }
@media (max-width: 620px) { .fiche div { grid-template-columns: 1fr; gap: 0.2rem; } }

/* ── Contact ──────────────────────────────────────────────────────────────── */
.contact__tel { font-family: var(--font-display); font-size: var(--step-2); font-weight: 300; text-decoration: none; display: inline-block; letter-spacing: -0.01em; }
.contact__bloc { display: grid; gap: var(--sp-5); }
.contact__bloc address { font-style: normal; font-size: var(--step-1); line-height: 1.5; }

/* ── Pied ─────────────────────────────────────────────────────────────────── */
.pied { background: var(--noir); color: var(--beton); padding-block: clamp(4rem, 9vw, 8rem) 2rem; font-size: 0.85rem; }
.pied a { color: inherit; }
.pied__logo { font-family: var(--font-display); font-size: 3rem; font-weight: 300; color: var(--creme); letter-spacing: -0.02em; margin: 0 0 0.8rem; }
.pied__grille { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--sp-6); }
@media (max-width: 860px) { .pied__grille { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); } }
.pied__col p { color: var(--beton); }
.pied__titre { font-size: 0.63rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--or); font-weight: 500; margin-bottom: 1rem; }
.pied__bas { margin-top: clamp(3rem, 7vw, 6rem); padding-top: 1.4rem; border-top: 1px solid color-mix(in srgb, var(--creme) 12%, transparent); display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: space-between; font-size: 0.75rem; }
.pied .lien-texte { display: inline-block; padding-block: 0.4rem; }
.pied__col p { line-height: 2.1; }
.lien-texte {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat; background-position: 0 100%; background-size: 100% 1px;
}

/* ── Pages intérieures ────────────────────────────────────────────────────── */
.page-tete { background: var(--noir); color: var(--creme); padding-block: clamp(9rem, 18vw, 14rem) clamp(3rem, 7vw, 6rem); }
.page-tete .sourcil { color: var(--beton); }
.prose { max-width: 64ch; }
.prose h2 { font-size: var(--step-2); margin-top: clamp(2.5rem, 6vw, 4.5rem); margin-bottom: var(--sp-3); }
.prose p { color: var(--beton-encre); }
.prose strong { color: var(--noir); font-weight: 600; }
.source { font-size: 0.68rem; letter-spacing: 0.06em; color: var(--beton-encre); }

/* ══════════════════════════════════════════════════════════════════════════
   MULTIPAGE — composants ajoutés au passage en 9 pages
   ══════════════════════════════════════════════════════════════════════════ */

/* Lien d'évitement : visible seulement au clavier, obligatoire dès qu'un
   en-tête fixe précède le contenu. */
.saut-contenu {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--noir); color: var(--creme);
  padding: 0.9rem 1.4rem; font-size: 0.8rem; text-decoration: none;
}
.saut-contenu:focus-visible { left: 1rem; top: 1rem; }

/* Fil d'Ariane */
.miettes { font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--beton); margin-bottom: var(--sp-5); }
.miettes a { text-decoration: none; }
.page-tete .hero__sous { color: var(--beton); max-width: 52ch; margin-top: var(--sp-4); font-size: var(--step-1); }
.page-tete h1 { font-size: var(--step-4); }
.lien-nav.est-actif::after { transform: scaleX(1); }

/* Cartes de métier (accueil, contact) */
.grille-metiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1px; background: color-mix(in srgb, var(--creme) 14%, transparent); border: 1px solid color-mix(in srgb, var(--creme) 14%, transparent); }
.metier-carte { background: var(--noir); padding: 2.4rem 1.9rem 2.2rem; text-decoration: none; display: flex; flex-direction: column; gap: 0.9rem; }
.metier-carte__num { font-family: var(--font-display); font-size: 0.8rem; color: var(--or); letter-spacing: 0.1em; }
.metier-carte h3 { font-size: var(--step-2); }
.metier-carte p { font-size: 0.87rem; color: var(--beton); margin: 0; flex: 1; }
.metier-carte__lien { display: inline-flex; align-items: center; gap: 0.7rem; font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--or); font-weight: 500; }
.metier-carte--or { background: var(--noir-2); }

/* Postes / étapes en grille (pages métier) */
.grille-postes { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1px; background: color-mix(in srgb, var(--creme) 12%, transparent); }
.poste { background: var(--noir); padding: 2.2rem 1.8rem 2.4rem; }
.poste__num { font-family: var(--font-display); font-size: 2.2rem; font-weight: 300; line-height: 1; color: var(--or); display: block; margin-bottom: 1.1rem; }
.poste h3 { font-size: var(--step-1); margin-bottom: 0.7rem; }
.poste p { font-size: 0.85rem; color: var(--beton); margin: 0; }

/* Familles d'équipement (location) */
.grille-familles { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1px; background: color-mix(in srgb, var(--creme) 12%, transparent); }
.famille { background: var(--noir); padding: 2rem 1.8rem 2.2rem; }
.famille__num { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.2em; color: var(--or); display: block; margin-bottom: 1rem; }
.famille h3 { font-size: var(--step-1); margin-bottom: 0.6rem; }
.famille p { font-size: 0.85rem; color: var(--beton); margin: 0; }
.note-parc { margin-top: var(--sp-5); font-size: 0.83rem; color: var(--beton); max-width: 68ch; }

/* Étapes longues (méthode) */
.etape-longue { display: grid; grid-template-columns: 8rem 1fr; gap: var(--gutter); padding-block: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid color-mix(in srgb, var(--creme) 12%, transparent); }
.etape-longue__num { font-family: var(--font-display); font-size: clamp(3rem, 6vw, 5.5rem); font-weight: 300; line-height: 0.9; color: var(--or); }
.etape-longue h3 { font-size: var(--step-2); margin-bottom: 1rem; }
.etape-longue__accroche { font-family: var(--font-display); font-size: var(--step-1); font-weight: 300; color: var(--creme); max-width: 46ch; }
.etape-longue p { font-size: 0.9rem; color: var(--beton); }
@media (max-width: 720px) { .etape-longue { grid-template-columns: 1fr; gap: var(--sp-3); } }

/* Encart pleine largeur */
.encart { border: 1px solid color-mix(in srgb, var(--noir) 16%, transparent); padding: clamp(2rem, 5vw, 4rem); max-width: 60rem; }
.encart p { color: var(--beton-encre); }

/* FAQ */
.faq { max-width: 62rem; border-top: 1px solid color-mix(in srgb, var(--noir) 16%, transparent); }
.section--noir .faq { border-top-color: color-mix(in srgb, var(--creme) 16%, transparent); }
.qr { border-bottom: 1px solid color-mix(in srgb, var(--noir) 16%, transparent); }
.section--noir .qr { border-bottom-color: color-mix(in srgb, var(--creme) 16%, transparent); }
.qr summary {
  cursor: pointer; list-style: none; padding: 1.5rem 3rem 1.5rem 0; position: relative;
  font-family: var(--font-display); font-size: var(--step-1); font-weight: 300; letter-spacing: -0.015em;
}
.qr summary::-webkit-details-marker { display: none; }
.qr summary::after {
  content: ""; position: absolute; right: 0.6rem; top: 50%; width: 12px; height: 1px;
  background: var(--or); transform: translateY(-50%);
}
.qr summary::before {
  content: ""; position: absolute; right: 1.15rem; top: 50%; width: 1px; height: 12px;
  background: var(--or); transform: translateY(-50%) scaleY(1); transform-origin: center;
  transition: transform var(--dur-med) var(--ease);
}
.qr[open] summary::before { transform: translateY(-50%) scaleY(0); }
.qr__corps { padding-bottom: 1.6rem; }
.qr__corps p { color: var(--beton-encre); margin: 0; max-width: 72ch; }
.section--noir .qr__corps p { color: var(--beton); }

/* ── La plateforme de réservation ─────────────────────────────────────────── */
.axe--resa { align-items: start; }
.resa { background: var(--noir); color: var(--creme); padding: clamp(1.6rem, 3vw, 2.4rem); display: grid; gap: 1.1rem; }
.resa__tete { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-bottom: 1.1rem; border-bottom: 1px solid color-mix(in srgb, var(--creme) 16%, transparent); }
.resa__tete .sourcil { color: var(--beton); margin: 0; }
.resa__ref { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.12em; color: var(--or); }
.champ { display: grid; gap: 0.45rem; }
.champ--duo { grid-template-columns: 1fr 1fr; gap: 1rem; }
.champ--duo > span { display: grid; gap: 0.45rem; }
.resa label { font-size: 0.63rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--beton); font-weight: 500; }
.resa input, .resa select {
  font-family: var(--font-body); font-size: 0.95rem; color: var(--creme);
  background: var(--noir-2); border: 1px solid color-mix(in srgb, var(--creme) 18%, transparent);
  padding: 0.85rem 0.9rem; width: 100%; border-radius: 0;
  transition: border-color var(--dur-fast) var(--ease);
}
.resa input::placeholder { color: var(--beton-fonce); }
.resa input:hover, .resa select:hover { border-color: var(--or); }
.resa input:focus-visible, .resa select:focus-visible { border-color: var(--or); outline: 2px solid var(--or); outline-offset: 1px; }
.resa__recap { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; padding: 1.1rem 0; border-top: 1px solid color-mix(in srgb, var(--creme) 16%, transparent); }
.resa__recap-lab { font-size: 0.63rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--beton); }
.resa__recap-val { font-family: var(--font-display); font-size: var(--step-1); color: var(--or); }
.resa .bouton { justify-content: center; }
.resa__note { font-size: 0.73rem; color: var(--beton); margin: 0; }
.resa__confirme { border: 1px solid var(--or); padding: 1.4rem; display: grid; gap: 0.8rem; }
.resa__confirme .sourcil { color: var(--or); margin: 0; }
.resa__confirme-ref { font-family: var(--font-display); font-size: var(--step-2); color: var(--creme); margin: 0; }
.resa__confirme p { font-size: 0.85rem; color: var(--beton); margin: 0; }
@media (max-width: 480px) { .champ--duo { grid-template-columns: 1fr; } }

/* `display: grid` bat le `display:none` que le navigateur applique à [hidden] :
   sans cette règle, le panneau de confirmation est visible AVANT tout envoi.
   Vu sur la capture desktop de /location-materiel.html le 14/08. */
.resa__confirme[hidden] { display: none; }

/* Six familles : en 4 colonnes, la grille laissait deux cellules vides. */
@media (min-width: 1100px) { .grille-familles { grid-template-columns: repeat(3, 1fr); } }