/* ==========================================================================
   RVF, courtier en travaux, feuille unique, écrite d'un seul geste le 25/08.

   La ligne : ce que les sites primés de la galerie Framer partagent, ce n'est
   aucun de leurs effets, c'est la retenue. Un seul fond pour toute la page,
   une typographie très grande en graisse légère, des filets fins, des photos
   à angles droits posées en grand, et la couleur en touches rares.

   La charte de Ruben par-dessus, intouchée : Poppins seule, bleu #3588F0,
   orange #FEB100. Le bleu ne porte du texte qu'en grand corps (3,54 de
   contraste, seuil 3,0) ; en petit corps c'est son ton foncé #2670D4 (4,83).
   L'orange ne porte jamais de texte : filets, coches, soulignés seulement.
   ========================================================================== */

:root {
  --papier: #FAFAF7;
  --encre: #141414;
  --gris: #63635D;
  --filet: #E7E5DC;

  --bleu: #3588F0;        /* grand corps et décor uniquement */
  --bleu-fonce: #2670D4;  /* même bleu de la charte, lisible en petit corps */
  --orange: #FEB100;      /* jamais en texte */

  --large: 1280px;
  --gouttiere: clamp(20px, 4.5vw, 56px);
  --section: clamp(96px, 12vw, 176px);

  --d1: clamp(46px, 7.4vw, 104px);
  --d2: clamp(34px, 4.6vw, 62px);
  --t-h3: 21px;
  --t-lead: clamp(17px, 1.5vw, 19px);
  --t-corps: 16.5px;
  --t-petit: 15px;
  --t-micro: 11.5px;

  --duree: 240ms;
  --courbe: cubic-bezier(0.25, 0.6, 0.25, 1);
}

@font-face {
  font-family: "Poppins-attente";
  src: local("Helvetica Neue"), local("Arial");
  size-adjust: 111%;
  ascent-override: 97%;
  descent-override: 33%;
  line-gap-override: 0%;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: "Poppins", "Poppins-attente", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: var(--t-corps);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, picture { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
/* Un display posé par une classe bat le style navigateur de l'attribut
   hidden : le bloc de remerciement du formulaire s'affichait sous l'étape 1.
   La garde rétablit la primauté de l'attribut, partout. */
[hidden] { display: none !important; }
::selection { background: var(--orange); color: var(--encre); }
:focus-visible { outline: 2px solid var(--encre); outline-offset: 3px; }

.enveloppe {
  width: 100%;
  max-width: var(--large);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.saut {
  position: absolute;
  left: -9999px; top: 0;
  z-index: 200;
  padding: 14px 22px;
  background: var(--encre);
  color: #fff;
}
.saut:focus { left: 0; }

/* ====== Typographie ===================================================== */
.d1 {
  font-size: var(--d1);
  font-weight: 300;
  line-height: 1.0;
  letter-spacing: -0.045em;
  text-wrap: balance;
}
.d2 {
  font-size: var(--d2);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -0.038em;
  text-wrap: balance;
}
.d1 .bleu, .d2 .bleu { color: var(--bleu); }
.d1 .pale, .d2 .pale { color: var(--gris); }

.micro {
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gris);
}

.chapeau {
  font-size: var(--t-lead);
  font-weight: 400;
  color: var(--gris);
  line-height: 1.65;
  max-width: 54ch;
  text-wrap: pretty;
}

/* En-tête de section : un filet, le numéro en bleu foncé, l'intitulé, puis le
   titre. Le même dispositif partout : c'est la répétition qui fait la tenue. */
.tete {
  border-top: 1px solid var(--filet);
  padding-top: 22px;
  margin-bottom: clamp(44px, 6vw, 80px);
}
.tete__ligne {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: clamp(26px, 3.6vw, 48px);
}
.tete__num {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--bleu-fonce);
}
.tete .chapeau { margin-top: 20px; }

section { padding-block: calc(var(--section) / 2); }

/* ====== Actions ========================================================= */
.action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 15px 30px;
  background: var(--encre);
  color: #fff;
  font-size: var(--t-petit);
  font-weight: 500;
  line-height: 1.2;
  border-radius: 2px;
  white-space: nowrap;
  transition: background var(--duree) var(--courbe), transform var(--duree) var(--courbe);
}
.action:hover { background: #000; transform: translateY(-1px); }
.action--inverse { background: #fff; color: var(--encre); }
.action--inverse:hover { background: var(--papier); }

.ligne {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: var(--t-petit);
  font-weight: 500;
  color: var(--encre);
  border-bottom: 1px solid var(--encre);
  transition: border-color var(--duree) var(--courbe), color var(--duree) var(--courbe);
}
.ligne:hover { color: var(--bleu-fonce); border-color: var(--bleu-fonce); }

/* ====== Navigation ====================================================== */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 90;
  background: rgba(250, 250, 247, 0.9);
  border-bottom: 1px solid var(--filet);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 72px;
}
.nav__logo { height: 42px; width: auto; }
.nav__inner > a:first-child { display: inline-flex; align-items: center; min-height: 44px; }
.nav__liens { display: none; gap: 34px; }
@media (min-width: 1000px) { .nav__liens { display: flex; } }
.nav__liens a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 14.5px;
  color: var(--gris);
  transition: color var(--duree) var(--courbe);
}
.nav__liens a:hover { color: var(--encre); }
.nav__tel {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--encre);
  border-bottom: 1px solid var(--encre);
}
.nav__tel:hover { color: var(--bleu-fonce); border-color: var(--bleu-fonce); }

/* ====== Ouverture =======================================================
   Un écran de typographie, presque rien d'autre. La photo vient après, seule
   et en très grand. Pas de hauteur en vh : la capture sans interface la fige
   à la taille de la fenêtre virtuelle, relevé du 24/08. */
section.ouverture { padding-top: clamp(140px, 15vw, 200px); padding-bottom: 0; }
.ouverture__meta {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--filet);
  margin-bottom: clamp(48px, 7vw, 104px);
}
.ouverture__meta span:nth-child(2) { display: none; }
@media (min-width: 720px) { .ouverture__meta span:nth-child(2) { display: inline; } }

.ouverture h1 { max-width: 14ch; }

.ouverture__pied {
  display: grid;
  gap: clamp(30px, 4vw, 44px);
  margin-top: clamp(44px, 6vw, 88px);
}
@media (min-width: 940px) {
  .ouverture__pied {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 64px;
  }
}
.ouverture__actions { display: grid; gap: 18px; justify-items: start; }
.ouverture__boutons { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }


/* Les quatre faits, sur deux filets. Pas de cartes : du texte posé. */
.faits {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--filet);
  border-bottom: 1px solid var(--filet);
  margin-top: clamp(56px, 8vw, 120px);
}
@media (min-width: 880px) { .faits { grid-template-columns: repeat(4, 1fr); } }
.faits li {
  padding: clamp(22px, 2.8vw, 34px) clamp(16px, 2vw, 28px) clamp(22px, 2.8vw, 34px) 0;
}
@media (min-width: 880px) {
  .faits li + li { border-left: 1px solid var(--filet); padding-left: clamp(16px, 2vw, 28px); }
}
@media (max-width: 879px) {
  .faits li:nth-child(2n) { border-left: 1px solid var(--filet); padding-left: 18px; }
  .faits li:nth-child(n+3) { border-top: 1px solid var(--filet); }
}
.faits strong {
  display: block;
  font-size: clamp(21px, 1.9vw, 25px);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-bottom: 4px;
}
.faits span { font-size: 14px; color: var(--gris); line-height: 1.5; }

/* La photo pleine page, signée. */
.pleine { margin: 0; padding-block: clamp(20px, 3vw, 40px) 0; }
.pleine img {
  width: 100%;
  height: auto;
  aspect-ratio: 1920 / 830;
  object-fit: cover;
}
@media (max-width: 719px) { .pleine img { aspect-ratio: 4 / 3; } }
.pleine figcaption {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-top: 14px;
  font-size: 13px;
  color: var(--gris);
}

/* ====== Le constat ====================================================== */
.obstacles { display: grid; gap: clamp(36px, 4.5vw, 56px); }
@media (min-width: 880px) { .obstacles { grid-template-columns: repeat(3, 1fr); } }
.obstacles li { border-top: 1px solid var(--filet); padding-top: 24px; }
.obstacles__num {
  display: block;
  font-size: clamp(34px, 3.4vw, 46px);
  font-weight: 300;
  letter-spacing: -0.03em;
  color: var(--bleu-fonce);
  margin-bottom: 16px;
}
.obstacles h3 {
  font-size: var(--t-h3);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.3;
  margin-bottom: 10px;
  max-width: 22ch;
}
.obstacles p { font-size: var(--t-petit); color: var(--gris); }

/* ====== Le prix =========================================================
   Les deux seuls chiffres du site, posés aussi grands que la promesse. */
.montants { display: grid; gap: clamp(40px, 5vw, 0px); }
@media (min-width: 880px) { .montants { grid-template-columns: repeat(2, 1fr); } }
.montants > li { border-top: 1px solid var(--filet); padding-top: clamp(24px, 3vw, 36px); }
@media (min-width: 880px) {
  .montants > li + li { border-left: 1px solid var(--filet); padding-left: clamp(36px, 4.5vw, 72px); }
  .montants > li:first-child { padding-right: clamp(36px, 4.5vw, 72px); }
}
.montants strong {
  display: block;
  font-size: clamp(88px, 12vw, 176px);
  font-weight: 300;
  line-height: 0.9;
  letter-spacing: -0.055em;
  margin-bottom: 22px;
}
.montants strong sup {
  font-size: 0.4em;
  font-weight: 300;
  vertical-align: baseline;
  color: var(--bleu);
  letter-spacing: -0.02em;
}
.montants b {
  display: block;
  font-size: var(--t-h3);
  font-weight: 500;
  letter-spacing: -0.015em;
  margin-bottom: 8px;
}
.montants span { font-size: var(--t-petit); color: var(--gris); display: block; max-width: 44ch; }

.conditions {
  display: grid;
  gap: 0;
  margin-top: clamp(48px, 6vw, 80px);
  border-top: 1px solid var(--filet);
}
.conditions li {
  position: relative;
  padding: 24px 28px 24px 34px;
  border-bottom: 1px solid var(--filet);
}
.conditions li::before {
  content: "";
  position: absolute;
  top: 31px; left: 0;
  width: 16px; height: 16px;
  background: var(--orange);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.conditions b { display: block; font-weight: 500; font-size: 16px; margin-bottom: 4px; }
.conditions span { font-size: 14px; color: var(--gris); }

/* ====== La méthode ====================================================== */
.methode__duo { display: grid; gap: clamp(40px, 5vw, 80px); }
@media (min-width: 1000px) {
  .methode__duo { grid-template-columns: minmax(0, 0.4fr) minmax(0, 0.6fr); align-items: start; }
  .methode__visuel { position: sticky; top: 104px; }
}
.methode__visuel { margin: 0; }
.methode__visuel img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.methode__visuel figcaption { padding-top: 12px; font-size: 13px; color: var(--gris); }

.etapes > li {
  display: grid;
  grid-template-columns: clamp(56px, 6vw, 88px) minmax(0, 1fr);
  gap: 18px;
  border-top: 1px solid var(--filet);
  padding-block: clamp(26px, 3.2vw, 38px);
}
.etapes__num {
  font-size: clamp(26px, 2.6vw, 36px);
  font-weight: 300;
  letter-spacing: -0.03em;
  color: var(--bleu-fonce);
  line-height: 1;
  padding-top: 3px;
}
.etapes h3 {
  font-size: var(--t-h3);
  font-weight: 500;
  letter-spacing: -0.015em;
  margin-bottom: 8px;
}
.etapes p { font-size: var(--t-petit); color: var(--gris); max-width: 62ch; }
.inclus { display: grid; gap: 7px; margin-top: 14px; }
.inclus li {
  position: relative;
  padding-left: 24px;
  font-size: 14px;
}
.inclus li::before {
  content: "";
  position: absolute;
  top: 5px; left: 0;
  width: 14px; height: 14px;
  background: var(--orange);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ====== Le rappel, une phrase entre deux filets ========================= */
.relance { padding-block: 0; }
.relance__inner {
  border-top: 1px solid var(--filet);
  padding-block: clamp(48px, 6vw, 88px);
  display: grid;
  gap: clamp(26px, 3.4vw, 40px);
}
@media (min-width: 940px) {
  .relance__inner { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 64px; }
}
.relance p { font-size: var(--t-petit); color: var(--gris); max-width: 52ch; margin-top: 14px; }
.relance__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }

/* ====== Les chantiers =================================================== */
.onglets {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 28px;
  margin-bottom: clamp(24px, 3vw, 36px);
}
.onglets button {
  min-height: 44px;
  font-size: var(--t-petit);
  color: var(--gris);
  border-bottom: 2px solid transparent;
  transition: color var(--duree) var(--courbe), border-color var(--duree) var(--courbe);
}
.onglets button:hover { color: var(--encre); }
.onglets button[aria-selected="true"] {
  color: var(--encre);
  font-weight: 500;
  border-bottom-color: var(--orange);
}
@media (max-width: 760px) {
  .onglets {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    margin-inline: calc(var(--gouttiere) * -1);
    padding-inline: var(--gouttiere);
    scrollbar-width: none;
  }
  .onglets::-webkit-scrollbar { display: none; }
  .onglets button { flex: 0 0 auto; scroll-snap-align: start; white-space: nowrap; }
}

.compare {
  position: relative;
  --pos: 50%;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--filet);
  user-select: none;
  touch-action: pan-y;
}
.compare__img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.compare__img--avant { clip-path: inset(0 calc(100% - var(--pos)) 0 0); z-index: 2; }
.compare.est-anime .compare__img--avant,
.compare.est-anime .compare__trait,
.compare.est-anime .compare__poignee { transition: clip-path 620ms var(--courbe), left 620ms var(--courbe); }
.compare__trait {
  position: absolute;
  top: 0; bottom: 0; left: var(--pos);
  width: 2px;
  background: #fff;
  transform: translateX(-50%);
  z-index: 3;
  pointer-events: none;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
}
.compare__poignee {
  position: absolute;
  left: var(--pos); top: 50%;
  transform: translate(-50%, -50%);
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--encre);
  color: #fff;
  display: grid;
  place-items: center;
  z-index: 4;
  pointer-events: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9), 0 10px 28px rgba(0, 0, 0, 0.3);
  transition: transform var(--duree) var(--courbe);
}
.compare.est-tire .compare__poignee { transform: translate(-50%, -50%) scale(1.05); }
.compare__etiquette {
  position: absolute;
  top: 16px;
  z-index: 5;
  padding: 7px 13px;
  background: rgba(20, 20, 20, 0.78);
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  pointer-events: none;
}
.compare__etiquette--avant { left: 16px; }
.compare__etiquette--apres { right: 16px; }
.compare__curseur {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  z-index: 6;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}
.compare__curseur::-webkit-slider-thumb { -webkit-appearance: none; width: 60px; height: 100%; }
@media (max-width: 760px) { .compare { margin-inline: calc(var(--gouttiere) * -1); } }

.bascules {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 28px;
  margin-top: 16px;
}
.bascule {
  min-height: 44px;
  font-size: var(--t-petit);
  color: var(--gris);
  border-bottom: 2px solid transparent;
  transition: color var(--duree) var(--courbe), border-color var(--duree) var(--courbe);
}
.bascule:hover { color: var(--encre); }
.bascule[aria-pressed="true"] {
  color: var(--encre);
  font-weight: 500;
  border-bottom-color: var(--orange);
}
.bascules__aide { font-size: 13.5px; color: var(--gris); }

.fiche {
  display: grid;
  gap: 20px;
  border-top: 1px solid var(--filet);
  margin-top: clamp(26px, 3.4vw, 38px);
  padding-top: clamp(20px, 2.6vw, 28px);
}
@media (min-width: 760px) { .fiche { grid-template-columns: repeat(3, 1fr); } }
.fiche li span {
  display: block;
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gris);
  margin-bottom: 4px;
}
.fiche li strong { font-weight: 500; font-size: var(--t-petit); }

.galerie {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 2.6vw, 32px) clamp(14px, 1.8vw, 24px);
  margin-top: clamp(56px, 7vw, 96px);
}
@media (min-width: 620px) { .galerie { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .galerie { grid-template-columns: repeat(3, 1fr); } }
.galerie figure { margin: 0; }
.galerie img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--filet);
}
.galerie figcaption {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-top: 10px;
  font-size: 13px;
  color: var(--gris);
}
.galerie figcaption i { font-style: normal; color: var(--bleu-fonce); }

/* Les métiers : une phrase, pas des boîtes. */
.metiers { border-top: 1px solid var(--filet); margin-top: clamp(56px, 7vw, 96px); padding-top: clamp(24px, 3vw, 36px); }
.metiers h3 { font-size: var(--t-h3); font-weight: 500; letter-spacing: -0.015em; margin-bottom: 8px; }
.metiers > p { font-size: var(--t-petit); color: var(--gris); max-width: 60ch; margin-bottom: 22px; }
.flux { display: flex; flex-wrap: wrap; gap: 8px 0; font-size: var(--t-petit); }
.flux li { display: inline-flex; align-items: center; min-height: 28px; }
.flux li + li::before {
  content: "/";
  margin-inline: 14px;
  color: var(--filet);
  font-weight: 300;
}

/* ====== Ruben =========================================================== */
.ruben__duo { display: grid; gap: clamp(36px, 5vw, 88px); align-items: start; }
@media (min-width: 940px) { .ruben__duo { grid-template-columns: minmax(0, 0.4fr) minmax(0, 0.6fr); } }
.ruben__portrait { margin: 0; }
.ruben__portrait img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.ruben__portrait figcaption { padding-top: 12px; font-size: 13px; color: var(--gris); }
.ruben__texte > p { font-size: var(--t-petit); color: var(--gris); margin-top: 18px; max-width: 58ch; }
.ruben__texte > p strong { color: var(--encre); font-weight: 500; }
.ruben__texte .d2 { margin-top: 20px; }

.citation {
  border-left: 2px solid var(--orange);
  padding-left: clamp(20px, 2.6vw, 32px);
  margin-top: clamp(28px, 3.6vw, 44px);
}
.citation p {
  font-size: clamp(18px, 1.8vw, 22px);
  font-weight: 300;
  line-height: 1.55;
  letter-spacing: -0.012em;
}
.citation cite { display: block; font-style: normal; font-size: 13.5px; color: var(--gris); margin-top: 14px; }

.faits-ruben { margin-top: clamp(28px, 3.6vw, 44px); border-top: 1px solid var(--filet); }
.faits-ruben li {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding-block: 13px;
  border-bottom: 1px solid var(--filet);
  font-size: var(--t-petit);
  color: var(--gris);
}
.faits-ruben strong { color: var(--encre); font-weight: 500; }
.faits-ruben li::before {
  content: "";
  align-self: center;
  flex: 0 0 14px;
  height: 14px;
  background: var(--orange);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ruben__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: clamp(28px, 3.6vw, 40px); }

.secteur { border-top: 1px solid var(--filet); margin-top: clamp(56px, 7vw, 96px); padding-top: clamp(24px, 3vw, 36px); }
.secteur h3 { font-size: var(--t-h3); font-weight: 500; letter-spacing: -0.015em; margin-bottom: 8px; }
.secteur > p { font-size: var(--t-petit); color: var(--gris); max-width: 62ch; margin-bottom: 22px; }
.secteur__note { margin-top: 18px; font-size: 14px; color: var(--gris); }

/* ====== Rendez-vous ===================================================== */
.rdvz__grille { display: grid; gap: clamp(40px, 5vw, 88px); align-items: start; }
@media (min-width: 1000px) { .rdvz__grille { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); } }

.carte-rdv { border: 1px solid var(--filet); padding: clamp(24px, 3.4vw, 48px); background: #fff; }

.rdv__jalons { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.rdv__jalons li {
  width: 30px; height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--filet);
  border-radius: 50%;
  font-size: 13px;
  font-weight: 500;
  color: var(--gris);
}
.rdv__jalons li.est-actif { background: var(--encre); border-color: var(--encre); color: #fff; }
.rdv__jalons li.est-faite { border-color: var(--encre); color: var(--encre); }
.rdv__etape-libelle { font-size: 13.5px; color: var(--gris); margin-bottom: 26px; }
.rdv__etape { border: 0; padding: 0; margin: 0; min-width: 0; }
.rdv__etape legend {
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.15;
  padding: 0;
  margin-bottom: 6px;
}
.rdv__aide { font-size: 14px; color: var(--gris); margin-bottom: 24px; }
.rdv__label {
  display: block;
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gris);
  margin: 24px 0 10px;
}
.rdv__dates, .rdv__moments, .rdv__choix { display: flex; flex-wrap: wrap; gap: 8px; }
.rdv__dates label, .rdv__moments label, .rdv__choix label { cursor: pointer; }
.rdv__dates input, .rdv__moments input, .rdv__choix input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
}
.rdv__dates span, .rdv__moments span, .rdv__choix span {
  display: grid;
  align-content: center;
  gap: 1px;
  min-height: 48px;
  padding: 9px 16px;
  border: 1px solid var(--filet);
  border-radius: 2px;
  font-size: 14px;
  background: #fff;
  transition: border-color var(--duree) var(--courbe), background var(--duree) var(--courbe), color var(--duree) var(--courbe);
}
.rdv__dates span small, .rdv__moments span small { font-size: 12px; color: var(--gris); }
.rdv__dates label:hover span, .rdv__moments label:hover span, .rdv__choix label:hover span { border-color: var(--encre); }
.rdv__dates input:checked + span,
.rdv__moments input:checked + span,
.rdv__choix input:checked + span { background: var(--encre); border-color: var(--encre); color: #fff; }
.rdv__dates input:checked + span small, .rdv__moments input:checked + span small { color: rgba(255, 255, 255, 0.72); }
.rdv__dates input:focus-visible + span,
.rdv__moments input:focus-visible + span,
.rdv__choix input:focus-visible + span { outline: 2px solid var(--encre); outline-offset: 2px; }
.rdv__plus {
  margin-top: 14px;
  min-height: 44px;
  font-size: 14px;
  font-weight: 500;
  color: var(--bleu-fonce);
  border-bottom: 1px solid currentColor;
}
.rdv__champ { display: block; font-size: 14px; font-weight: 500; margin: 18px 0 7px; }
.rdv input[type="text"], .rdv input[type="tel"], .rdv input[type="email"], .rdv textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--filet);
  border-radius: 2px;
  background: #fff;
  font: inherit;
  font-size: 15px;
  color: var(--encre);
  transition: border-color var(--duree) var(--courbe);
}
.rdv textarea { resize: vertical; min-height: 104px; }
.rdv input:focus, .rdv textarea:focus { border-color: var(--encre); outline: none; }
.rdv__grille { display: grid; gap: 0 18px; }
@media (min-width: 640px) { .rdv__grille { grid-template-columns: repeat(2, 1fr); } }
.rdv__recap:not(:empty) {
  margin-top: 24px;
  padding: 16px 18px;
  border-left: 2px solid var(--orange);
  background: var(--papier);
  font-size: 14px;
}
.rdv__consent {
  display: flex;
  gap: 12px;
  margin-top: 22px;
  font-size: 13.5px;
  color: var(--gris);
  line-height: 1.55;
}
.rdv__consent input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--encre); flex-shrink: 0; }
.rdv__consent a { color: var(--bleu-fonce); border-bottom: 1px solid currentColor; }
.rdv__piege { position: absolute; left: -9999px; opacity: 0; height: 0; }
.rdv__erreur {
  margin: 18px 0 0;
  padding: 12px 15px;
  border-left: 2px solid #B3261E;
  background: #FBEeec;
  color: #8C1D18;
  font-size: 14px;
}
.rdv__pied { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.rdv__pied .retour {
  min-height: 54px;
  padding: 15px 24px;
  border: 1px solid var(--filet);
  border-radius: 2px;
  font-size: var(--t-petit);
  font-weight: 500;
  transition: border-color var(--duree) var(--courbe);
}
.rdv__pied .retour:hover { border-color: var(--encre); }
.rdv__merci { display: grid; gap: 12px; justify-items: start; }
.rdv__merci-coche {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--filet);
  position: relative;
}
.rdv__merci-coche::after {
  content: "";
  position: absolute;
  inset: 12px;
  background: var(--orange);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.rdv__merci h3 { font-size: var(--t-h3); font-weight: 500; }
.rdv__merci p { color: var(--gris); font-size: var(--t-petit); }

.joindre h3 { font-size: var(--t-h3); font-weight: 500; letter-spacing: -0.015em; margin-bottom: 10px; }
.joindre ul { border-top: 1px solid var(--filet); }
.joindre li { padding-block: 16px; border-bottom: 1px solid var(--filet); }
.joindre .etiq {
  display: block;
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gris);
  margin-bottom: 4px;
}
.joindre a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-block: -8px;
  font-weight: 500;
  color: var(--encre);
  border-bottom: 1px solid var(--encre);
  overflow-wrap: anywhere;
}
.joindre a:hover { color: var(--bleu-fonce); border-color: var(--bleu-fonce); }
.joindre .valeur { font-weight: 500; }

/* ====== Questions ======================================================= */
.questions__liste { max-width: 880px; border-top: 1px solid var(--filet); }
.question { border-bottom: 1px solid var(--filet); }
.question summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 68px;
  padding-block: 20px;
  font-size: clamp(16.5px, 1.6vw, 19px);
  font-weight: 500;
  letter-spacing: -0.01em;
  cursor: pointer;
  list-style: none;
}
.question summary::-webkit-details-marker { display: none; }
.question summary::after {
  content: "";
  flex: 0 0 16px;
  height: 16px;
  background: var(--encre);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--duree) var(--courbe);
}
.question[open] summary::after { transform: rotate(45deg); }
.question__reponse { padding-bottom: 26px; }
.question__reponse p { font-size: var(--t-petit); color: var(--gris); max-width: 66ch; }

/* ====== Pied de page ==================================================== */
.pied { border-top: 1px solid var(--filet); padding-top: clamp(56px, 7vw, 96px); }
.pied__grille { display: grid; gap: clamp(36px, 4.5vw, 56px); }
@media (min-width: 880px) { .pied__grille { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.pied__logo { height: 48px; width: auto; margin-bottom: 16px; }
.pied__baseline { font-size: var(--t-petit); color: var(--gris); max-width: 30ch; margin-bottom: 6px; }
.pied__devise { font-size: 13.5px; color: var(--gris); }
.pied h2 {
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gris);
  margin-bottom: 14px;
}
.pied li { font-size: var(--t-petit); color: var(--gris); }
.pied li a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--encre);
  transition: color var(--duree) var(--courbe);
}
.pied li:not(:has(a)) { padding-block: 10px; }
.pied li a:hover { color: var(--bleu-fonce); }

.pied__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 26px;
  border-top: 1px solid var(--filet);
  margin-top: clamp(48px, 6vw, 80px);
  padding-block: 20px;
  font-size: 13px;
  color: var(--gris);
}
.pied__legal a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--encre);
}
.pied__legal a:hover { color: var(--bleu-fonce); }

/* ====== Barre d'appel mobile ============================================ */
.barre-mobile {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 80;
  display: flex;
  background: var(--encre);
}
.barre-mobile a {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 56px;
  font-size: 14.5px;
  font-weight: 500;
  color: #fff;
}
.barre-mobile a + a { border-left: 1px solid rgba(255, 255, 255, 0.2); }
@media (min-width: 1000px) { .barre-mobile { display: none; } }
@media (max-width: 999px) { .pied .pied__legal { padding-bottom: 76px; } }

/* ====== Apparition ====================================================== */
.apparait {
  opacity: 0;
  transform: translateY(16px);
  animation: monte 720ms var(--courbe) forwards;
}
.retard-1 { animation-delay: 80ms; }
.retard-2 { animation-delay: 160ms; }
.retard-3 { animation-delay: 240ms; }
@keyframes monte { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .apparait { animation: none; opacity: 1; transform: none; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ====== Pages de texte : mentions légales, 404 ========================== */
.page-texte { padding-top: clamp(140px, 16vw, 210px); padding-bottom: calc(var(--section) / 2); }
.legal { max-width: 760px; }
.legal h1 {
  font-size: var(--d2);
  font-weight: 300;
  letter-spacing: -0.038em;
  line-height: 1.05;
  margin-bottom: 10px;
}
.legal-updated { color: var(--gris); font-size: 14px; margin-bottom: clamp(36px, 4.5vw, 56px); }
.legal section { padding: clamp(22px, 2.8vw, 30px) 0 0; margin-bottom: clamp(20px, 2.6vw, 28px); border-top: 1px solid var(--filet); }
.legal h2 { font-size: var(--t-h3); font-weight: 500; letter-spacing: -0.015em; margin-bottom: 12px; }
.legal p { color: var(--gris); font-size: var(--t-petit); margin-bottom: 12px; }
.legal ul { display: grid; gap: 8px; margin-bottom: 14px; }
.legal li { position: relative; padding-left: 20px; color: var(--gris); font-size: var(--t-petit); }
.legal li::before {
  content: "";
  position: absolute;
  top: 10px; left: 0;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--orange);
}
.legal a { color: var(--bleu-fonce); border-bottom: 1px solid currentColor; }
.legal strong { color: var(--encre); font-weight: 500; }
.legal + .ligne, .page-texte .ligne { margin-top: 20px; }

.egaree { max-width: 720px; }
.egaree h1 { margin: 24px 0 22px; }
.egaree__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin: 32px 0 44px; }
.egaree__liens { border-top: 1px solid var(--filet); }
.egaree__liens li { border-bottom: 1px solid var(--filet); }
.egaree__liens a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  font-size: var(--t-petit);
  font-weight: 500;
  transition: color var(--duree) var(--courbe);
}
.egaree__liens a::after { content: "→"; color: var(--gris); }
.egaree__liens a:hover { color: var(--bleu-fonce); }

/* ====== Reprises du 25/08 au soir, sur les retours de Jonas ============= */

/* Les listes de métiers et de communes : des colonnes réglées sur filets,
   dans la langue du reste de la page. */
.tableau {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 0 clamp(24px, 3vw, 48px);
}
.tableau--communes { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.tableau li {
  border-top: 1px solid var(--filet);
  padding: 12px 0;
  font-size: var(--t-petit);
  color: var(--encre);
}

/* Les cartes de la galerie deviennent des commandes. */
.galerie__carte {
  display: block;
  width: 100%;
  text-align: left;
  cursor: pointer;
}
.galerie__carte figure { margin: 0; }
.galerie__carte img { transition: opacity var(--duree) var(--courbe); }
.galerie__carte:hover img { opacity: 0.9; }
.galerie figcaption i {
  font-style: normal;
  color: var(--bleu-fonce);
  border-bottom: 1px solid currentColor;
  white-space: nowrap;
  transition: color var(--duree) var(--courbe);
}
.galerie__carte:hover figcaption i { color: var(--encre); }

/* Le dossier de chantier : toutes les photos, avant et après côte à côte. */
.dossier {
  width: min(1080px, calc(100% - 32px));
  max-height: min(86vh, 100%);
  margin: auto;
  padding: 0;
  border: 0;
  background: var(--papier);
  color: var(--encre);
}
.dossier::backdrop { background: rgba(20, 20, 20, 0.58); }
.dossier__tete {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: clamp(18px, 2.4vw, 28px) clamp(20px, 3vw, 36px);
  background: var(--papier);
  border-bottom: 1px solid var(--filet);
}
.dossier__tete h3 {
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 400;
  letter-spacing: -0.025em;
}
.dossier__fermer {
  min-height: 44px;
  padding: 10px 20px;
  border: 1px solid var(--filet);
  border-radius: 2px;
  font-size: 14px;
  font-weight: 500;
  transition: border-color var(--duree) var(--courbe);
}
.dossier__fermer:hover { border-color: var(--encre); }
.dossier__grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 2.6vw, 30px) clamp(14px, 2vw, 22px);
  padding: clamp(20px, 3vw, 36px);
}
@media (min-width: 720px) { .dossier__grille { grid-template-columns: repeat(2, 1fr); } }
.dossier__grille figure { margin: 0; }
.dossier__grille img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--filet);
}
.dossier__grille figcaption {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-top: 9px;
  font-size: 13.5px;
  color: var(--gris);
}
.dossier__grille b {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.dossier__grille b.avant { color: var(--gris); }
.dossier__grille b.apres { color: var(--bleu-fonce); }

/* Le champ adresse et son indice. */
.rdv__indice { margin: 7px 0 0; font-size: 13px; color: var(--gris); }

/* ====== Le chantier étape par étape ======================================
   Posé le 06/09 à partir de la sélection violette de Ruben. Ses noms de
   fichiers portent le numéro de vue, ce qui permet d'aligner les étapes d'un
   même point de vue : avant, démolition, gros œuvre, finitions, après. La
   galerie de six photos dépareillées cède la place à ces séries, parce
   qu'elles montrent ce qu'un avant/après ne montre pas, l'ordre de passage
   des métiers, c'est à dire le travail du courtier. */
.series {
  display: grid;
  gap: clamp(36px, 4.5vw, 56px);
  margin-top: clamp(56px, 7vw, 96px);
  padding-top: clamp(24px, 3vw, 36px);
  border-top: 1px solid var(--filet);
}
.series__intro h3 { font-size: var(--t-h3); font-weight: 500; letter-spacing: -0.015em; margin-bottom: 8px; }
.series__intro p { font-size: var(--t-petit); color: var(--gris); max-width: 62ch; }

.etape-serie { display: grid; gap: 0; }
.etape-serie__tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 12px;
}
.etape-serie__tete h4 { font-size: 16px; font-weight: 500; letter-spacing: -0.01em; }
.etape-serie__vue { position: relative; background: var(--filet); overflow: hidden; }
.etape-serie__vue--l { aspect-ratio: 4 / 3; }
.etape-serie__vue--p { aspect-ratio: 3 / 4; }
.etape-serie__vue img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  animation: fondu 320ms var(--courbe);
}
@keyframes fondu { from { opacity: 0; } to { opacity: 1; } }

/* Les étapes se lisent comme une ligne du temps : un filet continu, un repère
   par étape, et celle qu'on regarde marquée à l'orange de la charte. */
.etape-serie__pas {
  display: flex;
  flex-wrap: wrap;
  gap: 0 22px;
  margin-top: 14px;
  border-top: 1px solid var(--filet);
  padding-top: 12px;
}
.etape-serie__pas button {
  position: relative;
  min-height: 40px;
  padding-top: 2px;
  font-size: 13.5px;
  color: var(--gris);
  transition: color var(--duree) var(--courbe);
}
.etape-serie__pas button::before {
  content: "";
  position: absolute;
  top: -13px; left: 0; right: 0;
  height: 2px;
  background: transparent;
  transition: background var(--duree) var(--courbe);
}
.etape-serie__pas button:hover { color: var(--encre); }
.etape-serie__pas button[aria-selected="true"] { color: var(--encre); font-weight: 500; }
.etape-serie__pas button[aria-selected="true"]::before { background: var(--orange); }
@media (prefers-reduced-motion: reduce) { .etape-serie__vue img { animation: none; } }

/* Un paysage à côté d'un portrait laissait un trou d'un demi écran sous le
   plus court. La grille passe à trois colonnes : la série paysage, celle qui
   raconte le plus, prend toute la largeur, et les trois portraits tiennent
   sur une seule rangée à la même hauteur. */
/* Un titre qui passe sur deux lignes faisait descendre son image seule dans
   la rangee. L'en-tete reserve la hauteur de deux lignes pour tout le monde. */
.etape-serie__tete { align-items: flex-start; min-height: 3.1em; }

/* ====== Un chantier a la fois ============================================
   Reprise du 06/09 : les quatre series etaient posees en grille, ce qui
   mettait une agence commerciale a cote de salles de bain de particuliers
   comme si c'etait comparable, et presentait deux points de vue d'un MEME
   chantier comme deux chantiers. Un chantier par carte, une carte a la fois,
   et la categorie annoncee dans le selecteur. */
.series { display: block; }
.series__choix {
  display: flex;
  flex-wrap: wrap;
  gap: 0 clamp(20px, 3vw, 40px);
  border-top: 1px solid var(--filet);
  margin: clamp(26px, 3.4vw, 40px) 0 clamp(22px, 2.8vw, 30px);
}
.series__choix button {
  display: block;
  padding: 16px 0 14px;
  border-bottom: 2px solid transparent;
  text-align: left;
  transition: border-color var(--duree) var(--courbe);
}
.series__choix button { font-size: var(--t-petit); font-weight: 500; color: var(--gris); transition: color var(--duree) var(--courbe); }
.series__choix button:hover { color: var(--encre); }
.series__choix button[aria-selected="true"] { border-bottom-color: var(--orange); }
.series__choix button[aria-selected="true"] { color: var(--encre); }

.serie-carte__vue { position: relative; background: var(--filet); overflow: hidden; }
.serie-carte__vue--l { aspect-ratio: 16 / 9; }
.serie-carte__vue--p { aspect-ratio: 4 / 3; }
@media (max-width: 700px) { .serie-carte__vue--p { aspect-ratio: 3 / 4; } }
.serie-carte__vue img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  animation: fondu 320ms var(--courbe);
}
@media (prefers-reduced-motion: reduce) { .serie-carte__vue img { animation: none; } }

/* ====== Retours de Ruben, 08/09 ==========================================
   Le comparateur occupait presque un ecran a lui seul. Il descend a une
   demi largeur : c'est une preuve, pas le sujet de la page. */
.compare--menu { max-width: 560px; }

/* Sur ecran large, le comparateur passe en colonne de gauche et sa legende,
   ses bascules et le lien vers la page des realisations se rangent a droite.

   Releve du 08/09 : la premiere version faisait s'etirer les rangees de la
   colonne de droite sur toute la hauteur de l'image, ouvrant un vide de pres
   de 400 px. La derniere rangee prend le 1fr pour que tout reste groupe en
   haut, et le bloc est borne pour que le petit comparateur ne flotte pas au
   milieu d'une bande blanche. */
@media (min-width: 760px) {
  [data-realisations] {
    display: grid;
    max-width: 880px;
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    column-gap: clamp(30px, 3.4vw, 46px);
    align-items: start;
  }
  .compare--menu {
    grid-column: 1;
    grid-row: 1 / -1;
    max-width: 420px;
    aspect-ratio: 4 / 3;
  }
  [data-realisations] > .chantiers__legende { grid-column: 2; grid-row: 1; margin-top: -4px; }
  [data-realisations] > .bascules {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    margin-top: 18px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  [data-realisations] > .chantiers__actions { grid-column: 2; grid-row: 3; align-self: start; margin-top: 24px; }
}

.chantiers__legende { display: grid; gap: 5px; margin-top: 18px; }
.chantiers__quoi { font-size: var(--t-h3); font-weight: 500; letter-spacing: -0.015em; }

/* La methode perd sa photo : les etapes prennent toute la largeur et se
   rangent en deux colonnes plutot qu'en colonne unique interminable. */
.methode__duo--seul { display: block; }
@media (min-width: 700px) {
  .etapes--grille {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: clamp(36px, 5vw, 72px);
  }
  .etapes--grille > li { border-top: 1px solid var(--filet); }
  .etapes--grille > li:nth-child(-n + 2) { border-top: 1px solid var(--filet); }
}

/* Le bouton qui ouvre les autres realisations, pose a cote du comparateur. */
.chantiers__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 26px;
  margin-top: clamp(18px, 2.4vw, 26px);
}
.autres { width: min(1100px, calc(100% - 32px)); }
.autres__grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(22px, 3vw, 34px);
  padding: clamp(20px, 3vw, 36px);
}
@media (min-width: 720px) { .autres__grille { grid-template-columns: repeat(2, 1fr); } }
.autres__paire { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.autres__paire img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--filet); }
.autres figcaption {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-top: 9px;
  font-size: 13.5px;
  color: var(--gris);
}
.autres figcaption i { font-style: normal; color: var(--bleu-fonce); }

/* ====== La page des realisations ========================================
   Un comparateur par point de vue. Les photos portrait gardent leur format :
   forcees en 4/3 elles perdaient le haut et le bas de la piece. */
.compare--portrait { aspect-ratio: 3 / 4; }

.reals__tete { padding-top: clamp(40px, 5vw, 74px); padding-bottom: 0; }
.reals__tete .tete { border-top: 0; padding-top: 0; }
.reals__corps { padding-block: clamp(22px, 2.6vw, 34px) clamp(60px, 8vw, 110px); }

/* Les photos portrait et paysage n'ont pas la meme hauteur : en grille, une
   rangee se cale sur la plus haute et laisse un trou sous les autres. Les
   colonnes CSS laissent les cartes se ranger d'elles-memes, sans trou. */
.reals__grille { column-gap: clamp(24px, 3vw, 40px); }
.reals__carte { break-inside: avoid; margin-bottom: clamp(34px, 4.5vw, 56px); }
@media (min-width: 700px) { .reals__grille { column-count: 2; } }
@media (min-width: 1120px) { .reals__grille { column-count: 3; } }

.reals__legende {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px 16px;
  padding-top: 12px;
  border-top: 1px solid var(--filet);
  margin-top: 12px;
}
.reals__quoi { font-size: var(--t-petit); font-weight: 500; }

.reals__pied {
  border-top: 1px solid var(--filet);
  margin-top: clamp(56px, 7vw, 96px);
  padding-top: clamp(34px, 4vw, 54px);
}
.reals__pied .chapeau { margin-bottom: clamp(24px, 3vw, 34px); }

/* Les trois lignes de la section 01 ne sont plus du commentaire mais les
   services eux-memes : elles passent au corps des titres et a l'encre. */
.obstacles--services p {
  font-size: var(--t-h3);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--encre);
  max-width: 24ch;
}

/* Le pied de la page des realisations : un seul appel, centre. */
.reals__pied { text-align: center; }

/* ====== Les plans remis apres la premiere visite ========================
   L'etape 02 promet des plans 2D et 3D : les voici. Fond blanc plutot que
   le fond de page, parce que les plans sont dessines sur blanc et qu'un
   ecart de teinte se verrait comme une tache. */
.plans { margin-top: clamp(46px, 6vw, 80px); }
.plans__grille { display: grid; gap: clamp(18px, 2.4vw, 30px); }
@media (min-width: 700px) { .plans__grille { grid-template-columns: 1fr 1fr; } }
.plans__vue { margin: 0; }
.plans__vue img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--filet);
}
.plans__vue figcaption {
  padding-top: 11px;
  font-size: var(--t-petit);
  color: var(--encre);
  font-weight: 500;
}
.plans__note {
  margin-top: clamp(16px, 2vw, 22px);
  font-size: 13.5px;
  color: var(--gris);
  max-width: 62ch;
}

/* Une demi-journée où Ruben est déjà pris : proposée mais fermée. */
.rdv__moments label.est-pris {
  opacity: 0.4;
  cursor: not-allowed;
  text-decoration: line-through;
}