/* ==========================================================================
   MAN PROPERTIES GROUP : Sections de page
   ========================================================================== */

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding: calc(var(--header-h) + 1rem) 0 0;
  isolation: isolate;
  color: var(--bone-50);
}

.hero__frame {
  position: absolute;
  inset: 10px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  z-index: -2;
  background: var(--blue-950);
  --bg: var(--bone-100);
}
.hero__frame img { width: 100%; height: 100%; object-fit: cover; }

/* Voile de lisibilité */
.hero::after {
  content: '';
  position: absolute;
  inset: 10px;
  border-radius: var(--radius-xl);
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(2,19,32,.62) 0%, rgba(2,19,32,.12) 30%, rgba(2,19,32,.52) 68%, rgba(2,19,32,.88) 100%),
    linear-gradient(90deg, rgba(2,19,32,.45) 0%, rgba(2,19,32,0) 55%);
}

.hero__inner {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  grid-template-rows: auto 1fr auto;
  gap: var(--gutter);
  align-items: end;
  padding-block: clamp(1.5rem, 3vw, 2.75rem);
}
.hero__eyebrow { grid-column: 1 / -1; grid-row: 1; align-self: start; color: var(--bone-50); margin: 0; }
.hero__title { grid-column: 1; grid-row: 3; margin: 0; }
.hero__aside { grid-column: 2; grid-row: 3; display: flex; flex-direction: column; gap: 1.6rem; padding-bottom: 0.4rem; }
.hero__lead {
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--bone-50);
  max-width: 40ch;
}

/* Le voile ne peut pas tout : sur une facade claire, du blanc a 78 ou 84
   pour cent se dissolvait. L'os plein tient sur n'importe quelle image, et
   l'ombre courte le detache sans poser d'aplat par-dessus la photographie. */
.hero__eyebrow,
.hero__title,
.hero__lead,
.hero__bar-inner { text-shadow: 0 1px 12px rgb(var(--voile) / .78); }

.hero__bar {
  position: relative;
  z-index: 1;
  margin: 0 10px 10px;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  border-top: 1px solid rgba(255, 255, 255, .16);
  background: rgba(2, 19, 32, .34);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
}
.hero__bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-block: 1.1rem;
}
.hero__bar-stats { display: flex; align-items: center; gap: 1.1rem; font-size: var(--step--1); }
/* Les trois chiffres de la ligne sont desormais du meme corps que le « 1 »
   de « 1 seule exigence », qui n'est qu'un mot dans sa phrase. Seule la
   graisse distingue les deux compteurs. */
.hero__bar-stats b { font-size: inherit; margin-right: 0.3em; }
.hero__bar-sep { width: 1px; height: 1.4em; background: rgba(255,255,255,.24); }
.hero__scroll svg { transition: transform 520ms var(--ease-out); }
.hero__scroll:hover svg { transform: translateY(4px); }

@media (max-width: 900px) {
  .hero { min-height: 92svh; }
  .hero__inner { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto auto; }
  .hero__title { grid-column: 1; grid-row: 3; }
  .hero__aside { grid-column: 1; grid-row: 4; }
  .hero__bar-stats { display: none; }
}

/* ==========================================================================
   Bandeau
   ========================================================================== */

.band {
  border-block: 1px solid var(--rule);
  background: var(--bg-raised);
  padding-block: clamp(1.4rem, 2.4vw, 2.2rem);
  overflow: hidden;
}
.band .marquee__item { color: var(--text); opacity: .82; }

/* ==========================================================================
   Bloc scindé titre / texte
   ========================================================================== */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.split__aside { --flow: 1.25rem; padding-top: 0.6rem; }
.split__aside p { max-width: 48ch; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

/* ==========================================================================
   Les métiers : grille bento
   ========================================================================== */

.metiers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gutter);
}
/* Les deux cartes illustrées passent à l'horizontale : hauteurs de rangée maîtrisées */
.metier--wide, .metier--tall {
  grid-column: span 2;
  flex-direction: row;
  align-items: stretch;
  min-height: 310px;
}
.metier--wide .card__media, .metier--tall .card__media {
  flex: 0 0 46%;
  aspect-ratio: auto;
  align-self: stretch;
}
.metier .card__body { gap: 0.6rem; }
.metier h3 { margin-block: 0.15rem 0.2rem; }
.metier p { font-size: var(--step--1); line-height: 1.55; }

@media (max-width: 980px) {
  .metiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metier--wide, .metier--tall { grid-column: span 2; }
}
@media (max-width: 620px) {
  .metiers { grid-template-columns: 1fr; }
  .metier--wide, .metier--tall { grid-column: span 1; }
}

/* ==========================================================================
   LES DOMAINES MPG : bloc phare
   ========================================================================== */

.domaines-feature { position: relative; overflow: hidden; isolation: isolate; }
.domaines-feature__bg { position: absolute; inset: 0; z-index: -2; opacity: .30; }
.domaines-feature__bg img { width: 100%; height: 100%; object-fit: cover; }
.domaines-feature::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, var(--blue-900) 12%, rgba(5,36,53,.82) 48%, rgba(5,36,53,.52) 100%);
}
.domaines-feature__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}
.domaines-feature__head h2 { margin-top: 0.4rem; }
.domaines-feature__body { display: flex; flex-direction: column; gap: 1.8rem; }

.ticks { display: flex; flex-direction: column; gap: 0.75rem; font-size: var(--step--1); }
.ticks li { display: flex; align-items: flex-start; gap: 0.8rem; }
.ticks svg {
  width: 1.1rem; height: 1.1rem; flex: none;
  color: var(--mpg-green);
  margin-top: 0.28rem;
}

.domaines-feature__project {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.75rem;
  flex-wrap: wrap;
  padding: clamp(1.4rem, 2.4vw, 2rem);
  border-radius: var(--radius-lg);
  border: 1px solid var(--rule);
  background: rgba(255, 255, 255, .05);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.domaines-feature__project p { font-size: var(--step--1); max-width: 34ch; margin-top: 0.35rem; }

@media (max-width: 940px) {
  .domaines-feature__inner { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Méthode : rangées numérotées
   ========================================================================== */

.steps { border-top: 1px solid var(--rule); }
.step {
  display: grid;
  grid-template-columns: clamp(70px, 8vw, 118px) minmax(0, 1fr) auto;
  gap: clamp(1rem, 3vw, 3rem);
  align-items: start;
  padding-block: clamp(1.6rem, 3vw, 2.6rem);
  border-bottom: 1px solid var(--rule);
  transition: background-color var(--dur-fast) var(--ease-out);
}
.step:hover { background: color-mix(in srgb, var(--bone-50) 60%, transparent); }
.step__num { font-size: var(--step-4); color: var(--accent-lisible); line-height: 1; }
.step__body { display: flex; flex-direction: column; gap: 0.5rem; }
.step__body p { font-size: var(--step--1); max-width: 56ch; }
.step__tag {
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  padding-top: 0.35rem;
}
@media (max-width: 720px) {
  .step { grid-template-columns: 56px minmax(0, 1fr); }
  .step__tag { grid-column: 2; padding-top: 0.2rem; }
}

/* ==========================================================================
   Vignettes projets
   ========================================================================== */

.tile--tall { aspect-ratio: 3 / 4; }
.tile--wide { aspect-ratio: 16 / 10; }
@media (max-width: 860px) { .tile--tall { aspect-ratio: 4 / 3; } }

/* ==========================================================================
   Diaspora
   ========================================================================== */

.diaspora__card {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--bg-raised);
  border: 1px solid var(--rule);
}
.diaspora__media { min-height: 100%; }
.diaspora__media img { width: 100%; height: 100%; object-fit: cover; min-height: 340px; }
.diaspora__body {
  padding: clamp(1.8rem, 4vw, 3.75rem);
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  justify-content: center;
}
.diaspora__body p { max-width: 52ch; }
@media (max-width: 860px) { .diaspora__card { grid-template-columns: 1fr; } }

/* ==========================================================================
   Appel final
   ========================================================================== */

.cta-final { text-align: center; overflow: hidden; position: relative; }
.cta-final__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 1.4rem; }
.cta-final__inner h2 { margin-block: 0.4rem; }
.cta-final__inner .lead { text-align: center; }
.cta-final__arcs {
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: min(120vw, 1100px);
  color: color-mix(in srgb, var(--blue-200) 16%, transparent);
}

/* ==========================================================================
   En-tête de page interne : variantes
   ========================================================================== */

.page-head__inner { position: relative; z-index: 1; }
.page-head h1 { max-width: 18ch; }
.page-head .lead { color: color-mix(in srgb, var(--bone-100) 76%, transparent); margin-top: 1.4rem; }

/* ==========================================================================
   Blocs de contenu réutilisables
   ========================================================================== */

/* Service détaillé en alternance */
.service-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
  border-bottom: 1px solid var(--rule);
  scroll-margin-top: calc(var(--header-h) + 2rem);
}
.service-row:last-child { border-bottom: 0; }
.service-row__media { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 3; }
.service-row__media img { width: 100%; height: 100%; object-fit: cover; }
.service-row:nth-child(even) .service-row__media { order: 2; }
.service-row__body { display: flex; flex-direction: column; gap: 1.1rem; }
.service-row__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem 1.5rem;
  font-size: var(--step--1);
  margin-top: 0.4rem;
}
.service-row__list li { display: flex; align-items: flex-start; gap: 0.6rem; color: var(--text-muted); }
.service-row__list li::before {
  content: '';
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--mpg-green);
  flex: none; margin-top: 0.62em;
}
@media (max-width: 860px) {
  .service-row { grid-template-columns: 1fr; }
  .service-row:nth-child(even) .service-row__media { order: 0; }
  .service-row__list { grid-template-columns: 1fr; }
}

/* Valeurs / piliers */
.pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--gutter); }
.pillar {
  padding: clamp(1.4rem, 2.4vw, 2rem);
  border-radius: var(--radius-lg);
  border: 1px solid var(--rule);
  background: var(--bg-raised);
  display: flex; flex-direction: column; gap: 0.65rem;
}
.pillar__k { font-size: var(--step--2); letter-spacing: .18em; text-transform: uppercase; color: var(--accent-lisible); font-weight: 600; }
.pillar p { font-size: var(--step--1); }

/* Frise chronologique */
.timeline { border-left: 2px solid var(--rule); padding-left: clamp(1.5rem, 3vw, 2.5rem); display: flex; flex-direction: column; gap: clamp(2rem, 4vw, 3.25rem); }
.tl-item { position: relative; display: flex; flex-direction: column; gap: 0.55rem; }
.tl-item::before {
  content: '';
  position: absolute;
  left: calc(-1 * clamp(1.5rem, 3vw, 2.5rem) - 7px);
  top: 0.5rem;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--mpg-green);
  border: 3px solid var(--bg);
}
.tl-item__year { font-family: var(--font-display); font-size: var(--step-2); line-height: 1; }
.tl-item p { font-size: var(--step--1); max-width: 54ch; }

/* Équipe */
.team { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--gutter); }
.member__media { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 3 / 4; background: var(--bg-sunk); margin-bottom: 1rem; }
.member__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-out); }
.member:hover .member__media img { transform: scale(1.05); }
.member__role { font-size: var(--step--1); color: var(--text-muted); }

/* Contact */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.15rem; }
.form-grid .field--full { grid-column: 1 / -1; }
@media (max-width: 620px) { .form-grid { grid-template-columns: 1fr; } }

.contact-card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--rule);
  background: var(--bg-raised);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: flex; flex-direction: column; gap: 1.5rem;
}
.contact-line { display: flex; gap: 1rem; align-items: flex-start; }
.contact-line svg { width: 1.15rem; height: 1.15rem; color: var(--mpg-green); flex: none; margin-top: 0.35rem; }
.contact-line b { display: block; font-size: var(--step--2); letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; margin-bottom: 0.2rem; }
.contact-line a, .contact-line p { font-size: var(--step-0); }

.map-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--rule);
  aspect-ratio: 16 / 9;
  background: var(--bg-sunk);
}
.map-frame iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(1) contrast(.92); }

/* Filtres de projets */
.filters { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.filter {
  padding: 0.55em 1.15em;
  border-radius: var(--pill);
  border: 1px solid var(--rule);
  font-size: var(--step--1);
  font-weight: 520;
  color: var(--text-muted);
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.filter:hover { border-color: currentColor; }
.filter.is-active { background: var(--blue-900); border-color: var(--blue-900); color: var(--bone-50); }

.projects-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
.projects-grid > * { transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out); }
.projects-grid > [hidden] { display: none; }
@media (max-width: 980px) { .projects-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .projects-grid { grid-template-columns: 1fr; } }

/* Fiche technique d'un projet */
.fiche {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem 1.2rem;
  margin-top: 1.15rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--rule);
}
.fiche dt {
  font-size: var(--step--2);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 0.15rem;
}
.fiche dd { font-size: var(--step--1); margin: 0; }
@media (max-width: 480px) { .fiche { grid-template-columns: 1fr; } }

/* ==========================================================================
   LES DOMAINES MPG : plan de masse interactif
   ========================================================================== */

.plan {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(300px, 26vw, 380px);
  gap: var(--gutter);
  align-items: start;
}
@media (max-width: 1000px) { .plan { grid-template-columns: 1fr; } }

.plan__stage {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(180deg, #F2EDE1 0%, #E4DCCB 100%);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow);
  touch-action: none;
}
@media (max-width: 620px) { .plan__stage { aspect-ratio: 4 / 3; } }

.plan__stage canvas { display: block; width: 100%; height: 100%; cursor: grab; }
.plan__stage canvas:active { cursor: grabbing; }
.plan__stage.is-fallback { display: none; }

.plan__bulle {
  position: absolute;
  transform: translate(-50%, calc(-100% - 14px));
  pointer-events: none;
  background: var(--blue-950);
  color: var(--bone-50);
  padding: 0.5rem 0.8rem;
  border-radius: var(--radius-xs);
  font-size: var(--step--2);
  line-height: 1.35;
  white-space: nowrap;
  box-shadow: var(--shadow);
  z-index: 3;
}
.plan__bulle b { display: block; font-weight: 620; }
.plan__bulle span { opacity: 0.72; }
.plan__bulle[hidden] { display: none; }

.plan__legende {
  position: absolute;
  left: 1rem; bottom: 1rem;
  display: flex; flex-wrap: wrap; gap: 0.4rem 1rem;
  padding: 0.6rem 0.95rem;
  border-radius: var(--pill);
  background: color-mix(in srgb, var(--bone-50) 86%, transparent);
  backdrop-filter: blur(8px);
  border: 1px solid var(--rule);
  font-size: var(--step--2);
  z-index: 2;
}
.plan__legende span { display: inline-flex; align-items: center; gap: 0.45rem; }
.plan__legende i { width: 10px; height: 10px; border-radius: 3px; display: block; }

.plan__outils {
  position: absolute;
  right: 1rem; top: 1rem;
  display: flex; flex-direction: column; gap: 0.5rem;
  z-index: 2;
}
.plan__outils .icon-btn {
  background: color-mix(in srgb, var(--bone-50) 90%, transparent);
  backdrop-filter: blur(8px);
  border: 1px solid var(--rule);
}
.plan__outils .icon-btn:hover { background: var(--mpg-green); border-color: var(--mpg-green); color: var(--blue-950); }
#plan-vue-haut svg { transform: rotate(0deg); }
#plan-reset svg { transform: rotate(-45deg); }

.plan__avis {
  margin-top: 1rem;
  padding: 1rem 1.2rem;
  border-radius: var(--radius-sm);
  background: var(--bg-sunk);
  border: 1px solid var(--rule);
  font-size: var(--step--1);
  color: var(--text-muted);
}
.plan__avis[hidden] { display: none; }

/* Fiche de la parcelle selectionnee */
.plan-fiche {
  position: sticky;
  top: calc(var(--header-h) + 1.2rem);
  padding: clamp(1.4rem, 2.4vw, 2rem);
  border-radius: var(--radius-lg);
  background: var(--bg-raised);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-sm);
}
@media (max-width: 1000px) { .plan-fiche { position: static; } }

.plan-fiche__tete {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  margin: 0.6rem 0 1.2rem;
}
.plan-fiche__tete h3 { margin: 0; }
.plan-fiche .fiche { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; }
.plan-fiche__prix {
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1.1;
  color: var(--mpg-blue);
  margin: 1.3rem 0 1.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--rule);
}
.plan-fiche .link { display: inline-flex; }

/* Liste complete des parcelles */
.lot-blocs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--gutter);
}
.lot-bloc__titre {
  font-size: var(--step--2);
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-muted);
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 0.4rem;
}
.lot-liste { display: flex; flex-direction: column; }
.lot-liste li { border-bottom: 1px solid var(--rule); }
.lot-liste li[hidden] { display: none; }

.lot-item {
  width: 100%;
  display: grid;
  grid-template-columns: 3.2rem 1fr auto;
  grid-template-areas: 'id surface chip' 'id prix prix';
  align-items: center;
  gap: 0.15rem 0.8rem;
  padding: 0.85rem 0.6rem;
  text-align: left;
  border-radius: var(--radius-xs);
  transition: background-color var(--dur-fast) var(--ease-out),
              padding-left var(--dur-fast) var(--ease-out);
}
.lot-item:hover { background: var(--bg-sunk); padding-left: 0.95rem; }
.lot-item.is-active { background: var(--blue-950); color: var(--bone-50); padding-left: 0.95rem; }
.lot-item.is-active .lot-item__surface,
.lot-item.is-active .lot-item__prix { color: color-mix(in srgb, var(--bone-50) 74%, transparent); }

.lot-item__id {
  grid-area: id;
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1;
}
.lot-item__surface { grid-area: surface; font-size: var(--step--1); color: var(--text-muted); }
.lot-item__prix { grid-area: prix; font-size: var(--step--1); color: var(--text-muted); }
.lot-item .chip { grid-area: chip; justify-self: end; }

/* ==========================================================================
   Simulateur d'echeancier
   ========================================================================== */

.simu {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--gutter);
  align-items: start;
}
@media (max-width: 900px) { .simu { grid-template-columns: 1fr; } }

.simu__reglages {
  display: flex; flex-direction: column; gap: 1.6rem;
  padding: clamp(1.5rem, 2.6vw, 2.2rem);
  border-radius: var(--radius-lg);
  background: var(--bg-raised);
  border: 1px solid var(--rule);
}
.simu__reglages .field label { display: flex; justify-content: space-between; gap: 1rem; }
.simu__reglages .field label span { color: var(--mpg-blue); font-weight: 700; }

.simu__resultat {
  padding: clamp(1.5rem, 2.6vw, 2.2rem);
  border-radius: var(--radius-lg);
  background: var(--blue-950);
  color: var(--bone-50);
  box-shadow: var(--shadow-lg);
}

.simu-ligne {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1.2rem;
  padding: 0.95rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--bone-50) 14%, transparent);
  font-size: var(--step--1);
}
.simu-ligne span { opacity: 0.76; }
.simu-ligne b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.simu-ligne--fort b {
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.1;
  color: var(--mpg-green);
}
.simu-note {
  margin-top: 1.2rem;
  font-size: var(--step--2);
  line-height: 1.65;
  opacity: 0.62;
}

.simu-mois { margin-top: 1.8rem; display: flex; flex-direction: column; }
.simu-mois li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.6rem 0;
  font-size: var(--step--1);
  border-bottom: 1px dashed color-mix(in srgb, var(--bone-50) 14%, transparent);
}
.simu-mois li span { opacity: 0.72; text-transform: capitalize; }
.simu-mois li b { font-variant-numeric: tabular-nums; }
.simu-mois__reste { opacity: 0.62; font-style: italic; }
#simu-echeancier .eyebrow { color: var(--mpg-green); }

/* Curseur de l'apport */
input[type='range'] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px;
  border-radius: var(--pill);
  background: var(--bg-sunk);
  border: 1px solid var(--rule);
  padding: 0;
}
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--mpg-blue);
  border: 3px solid var(--bone-50);
  box-shadow: var(--shadow-sm);
  cursor: grab;
}
input[type='range']::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--mpg-blue);
  border: 3px solid var(--bone-50);
  box-shadow: var(--shadow-sm);
  cursor: grab;
}
input[type='range']:focus-visible { outline: 2px solid var(--mpg-green); outline-offset: 4px; }

/* ==========================================================================
   Globe diaspora
   ========================================================================== */

.globe-scene {
  position: relative;
  overflow: hidden;
  /* La photo donnait sa hauteur au bloc ; le canvas etant en position
     absolue, il faut la poser explicitement, sinon le bloc s'ecrase
     des que la carte passe en colonne unique. */
  min-height: clamp(320px, 78vw, 460px);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 90% at 50% 8%, #0B3A57 0%, #05202F 58%, #041824 100%);
  isolation: isolate;
  touch-action: pan-y;
}

.globe-scene canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
  z-index: 1;
}

/* La photo ne sert que de repli : masquee des que le globe est la */
.globe-repli {
  width: 100%; height: 100%;
  object-fit: cover;
  display: none;
}
.globe-scene.is-fallback canvas,
.globe-scene.is-fallback .globe-etiquette,
.globe-scene.is-fallback .globe-legende { display: none; }
.globe-scene.is-fallback .globe-repli { display: block; }

.globe-etiquette {
  position: absolute;
  left: clamp(1rem, 3vw, 1.8rem);
  top: clamp(1rem, 3vw, 1.8rem);
  z-index: 2;
  margin: 0;
  padding: 0.7rem 1.05rem;
  border-radius: var(--radius-xs);
  background: color-mix(in srgb, #041824 72%, transparent);
  backdrop-filter: blur(10px);
  border: 1px solid color-mix(in srgb, var(--mpg-green) 34%, transparent);
  color: var(--bone-50);
  line-height: 1.35;
  pointer-events: none;
}
.globe-etiquette b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 500;
}
.globe-etiquette span {
  font-size: var(--step--2);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mpg-green);
}

.globe-legende {
  position: absolute;
  left: clamp(1rem, 3vw, 1.8rem);
  right: clamp(1rem, 3vw, 1.8rem);
  bottom: clamp(1rem, 3vw, 1.6rem);
  z-index: 2;
  margin: 0;
  font-size: var(--step--2);
  color: color-mix(in srgb, var(--bone-50) 62%, transparent);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .globe-scene canvas { cursor: default; }
}

/* ==========================================================================
   La carte : le Plateau de Dakar en maquette
   ========================================================================== */

.carte-scene {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--rule);
  background: linear-gradient(180deg, #F6F1E6 0%, #E9E1D1 100%);
  box-shadow: var(--shadow);
  min-height: clamp(340px, 62vh, 620px);
  touch-action: none;
}
.carte-scene canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; }
.carte-scene canvas:active { cursor: grabbing; }

.carte-scene.is-fallback canvas,
.carte-scene.is-fallback .carte-hud,
.carte-scene.is-fallback .carte-source { display: none; }
.carte-scene.is-fallback::after {
  content: 'La maquette du Plateau nécessite un navigateur récent. L\'adresse et l\'itinéraire restent accessibles ci-dessous.';
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: 2rem; text-align: center;
  font-size: var(--step--1); color: var(--text-muted);
}

.carte-hud {
  position: absolute; left: 1rem; top: 1rem; z-index: 2;
  display: flex; flex-direction: column; gap: 0.75rem;
  align-items: flex-start;
  pointer-events: none;
}
.carte-hud > * { pointer-events: auto; }

.carte-adresse {
  padding: 0.85rem 1.1rem;
  border-radius: var(--radius-xs);
  background: color-mix(in srgb, var(--bone-50) 88%, transparent);
  backdrop-filter: blur(10px);
  border: 1px solid var(--rule);
  line-height: 1.4;
  max-width: 15rem;
}
.carte-adresse b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-0);
  margin-bottom: 0.2rem;
}
.carte-adresse span { font-size: var(--step--2); color: var(--text-muted); }

.carte-vues { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.carte-vues button {
  padding: 0.5rem 0.85rem;
  border-radius: var(--pill);
  border: 1px solid var(--rule);
  background: color-mix(in srgb, var(--bone-50) 88%, transparent);
  backdrop-filter: blur(10px);
  font-size: var(--step--2);
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.carte-vues button:hover { border-color: var(--mpg-green); }
.carte-vues button.is-active { background: var(--blue-950); border-color: var(--blue-950); color: var(--bone-50); }

.carte-source {
  position: absolute; right: 0.9rem; bottom: 0.8rem; z-index: 2;
  margin: 0;
  font-size: 0.68rem;
  color: color-mix(in srgb, var(--ink-700) 52%, transparent);
}
.carte-source a { text-decoration: underline; text-underline-offset: 2px; }

/* Itineraire */
.itineraire { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.itineraire a {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.7rem 1.1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--rule);
  background: var(--bg-raised);
  font-size: var(--step--1);
  transition: border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.itineraire a:hover { border-color: var(--mpg-green); transform: translateY(-2px); }
.itineraire svg { width: 1rem; height: 1rem; }

/* ==========================================================================
   Documents juridiques : sommaire colle, colonne de lecture etroite
   ========================================================================== */

.doc {
  display: grid;
  grid-template-columns: clamp(180px, 20vw, 240px) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
@media (max-width: 860px) { .doc { grid-template-columns: 1fr; } }

.doc__sommaire {
  position: sticky;
  top: calc(var(--header-h) + 1.5rem);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding-left: 1rem;
  border-left: 2px solid var(--rule);
}
.doc__sommaire .eyebrow { margin-bottom: 0.9rem; }
.doc__sommaire a {
  font-size: var(--step--1);
  color: var(--text-muted);
  padding: 0.35rem 0;
  transition: color var(--dur-fast) var(--ease-out), padding-left var(--dur-fast) var(--ease-out);
}
.doc__sommaire a:hover { color: var(--mpg-blue); padding-left: 0.35rem; }
@media (max-width: 860px) {
  .doc__sommaire {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.4rem 1.1rem;
    border-left: 0;
    padding-left: 0;
    padding-bottom: 1.4rem;
    border-bottom: 1px solid var(--rule);
    margin-bottom: 2rem;
  }
  .doc__sommaire .eyebrow { width: 100%; margin-bottom: 0.4rem; }
}

.doc__corps { max-width: 68ch; }
.doc__bloc { padding-bottom: clamp(2rem, 4vw, 3.25rem); }
.doc__bloc + .doc__bloc { padding-top: clamp(2rem, 4vw, 3.25rem); border-top: 1px solid var(--rule); }
.doc__bloc h2 { margin-bottom: 1.1rem; scroll-margin-top: calc(var(--header-h) + 1.5rem); }
.doc__bloc p { margin-bottom: 0.95rem; line-height: 1.72; }
.doc__bloc p:last-child { margin-bottom: 0; }
.doc__bloc .ticks { margin: 1rem 0; }
.doc__bloc .fiche { grid-template-columns: 1fr; gap: 0.7rem; }
.doc__bloc .fiche dd { font-size: var(--step-0); }

/* ==========================================================================
   Rail : une rangee qui defile au doigt plutot qu'une grille qui allonge
   la page. Sur mobile c'est un balayage, sur grand ecran une bande tenue.
   ========================================================================== */

.rail-tete {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.4rem;
}
.rail-nav { display: flex; gap: 0.5rem; flex: none; }
@media (max-width: 700px) { .rail-nav { display: none; } }

.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(258px, 27vw, 342px);
  gap: var(--gutter);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  /* « proximity » plutot que « mandatory » : le balayage ample n'est plus
     ramene de force au lot suivant a chaque geste. */
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--gutter);
  padding-bottom: 1.4rem;
  /* on laisse la bande filer jusqu'aux bords de l'ecran */
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }

/* La premiere carte du rail est mise en avant */
.rail__vedette { grid-row: span 1; grid-auto-columns: auto; }
.rail > .rail__vedette { grid-column: span 2; }
@media (max-width: 700px) { .rail > .rail__vedette { grid-column: span 1; } }

.rail__jauge {
  height: 2px;
  background: var(--rule);
  border-radius: var(--pill);
  overflow: hidden;
  margin-top: 0.2rem;
}
.rail__jauge i {
  display: block;
  height: 100%;
  width: 30%;
  background: var(--mpg-green);
  border-radius: var(--pill);
  transition: transform 220ms var(--ease-out), width 220ms var(--ease-out);
}

.rail .card { height: 100%; }
.rail .metier--wide, .rail .metier--tall {
  grid-column: auto;
  flex-direction: column;
  min-height: 0;
}
.rail .metier--wide .card__media, .rail .metier--tall .card__media {
  flex: none;
  aspect-ratio: 16 / 10;
}

/* ==========================================================================
   Selecteur : liste tenue a gauche, un seul panneau a droite.
   Sept services sur un ecran au lieu de huit.
   ========================================================================== */

.selecteur {
  display: grid;
  grid-template-columns: clamp(230px, 26vw, 320px) minmax(0, 1fr);
  gap: clamp(1.8rem, 4vw, 4rem);
  align-items: start;
}
@media (max-width: 900px) { .selecteur { grid-template-columns: 1fr; gap: 1.6rem; } }

.selecteur__liste {
  position: sticky;
  top: calc(var(--header-h) + 1.5rem);
  display: flex;
  flex-direction: column;
}
@media (max-width: 900px) {
  .selecteur__liste {
    position: static;
    flex-direction: row;
    overflow-x: auto;
    gap: 0.5rem;
    scroll-snap-type: x proximity;
    padding-bottom: 0.7rem;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .selecteur__liste::-webkit-scrollbar { display: none; }
}

.selecteur__item {
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  align-items: baseline;
  gap: 0.9rem;
  padding: 0.95rem 0.9rem 0.95rem 0.6rem;
  text-align: left;
  border-radius: var(--radius-sm);
  border-bottom: 1px solid var(--rule);
  transition: background-color var(--dur-fast) var(--ease-out),
              padding-left var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.selecteur__item:last-child { border-bottom: 0; }
.selecteur__item:hover { padding-left: 1rem; color: var(--mpg-blue); }
.selecteur__item.is-active {
  background: var(--blue-950);
  color: var(--bone-50);
  border-color: transparent;
  padding-left: 1rem;
}
.selecteur__num {
  font-family: var(--font-display);
  font-size: var(--step--1);
  opacity: 0.55;
  font-variant-numeric: tabular-nums;
}
.selecteur__item.is-active .selecteur__num { color: var(--mpg-green); opacity: 1; }
.selecteur__nom { font-size: var(--step-0); line-height: 1.25; }

@media (max-width: 900px) {
  .selecteur__item {
    flex: none;
    scroll-snap-align: start;
    grid-template-columns: auto;
    gap: 0.2rem;
    min-width: 9.5rem;
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
    padding: 0.7rem 0.9rem;
  }
  .selecteur__nom { font-size: var(--step--1); }
}

/* Le panneau */
.selecteur__panneau[hidden] { display: none; }
.selecteur__panneau.is-entrant { animation: panneau-entre 520ms var(--ease-out) both; }
@keyframes panneau-entre {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .selecteur__panneau.is-entrant { animation: none; }
}

.selecteur__media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  margin-bottom: 1.6rem;
  background: var(--bg-sunk);
}
.selecteur__media img { width: 100%; height: 100%; object-fit: cover; }

.selecteur__corps { display: flex; flex-direction: column; gap: 1rem; }
.selecteur__corps .service-row__list { margin-top: 0.3rem; }

/* ==========================================================================
   La villa type : rendu temps reel
   ========================================================================== */

.villa-scene {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--rule);
  background: linear-gradient(180deg, #C9DCEA 0%, #E4E9E4 100%);
  box-shadow: var(--shadow-lg);
  aspect-ratio: 16 / 9;
  touch-action: none;
}
@media (max-width: 700px) { .villa-scene { aspect-ratio: 4 / 3; } }

.villa-scene canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; }
.villa-scene canvas:active { cursor: grabbing; }

.villa-scene.is-fallback canvas,
.villa-scene.is-fallback .villa-hud { display: none; }
.villa-scene.is-fallback::after {
  content: 'La visite en trois dimensions demande un navigateur recent.';
  position: absolute; inset: 0; display: grid; place-items: center;
  padding: 2rem; text-align: center; font-size: var(--step--1); color: var(--text-muted);
}

.villa-attente {
  position: absolute; inset: 0; z-index: 3;
  display: grid; place-items: center;
  background: linear-gradient(180deg, #C9DCEA 0%, #E4E9E4 100%);
  font-size: var(--step--1);
  color: var(--ink-700);
  letter-spacing: .04em;
}
.villa-attente[hidden] { display: none; }
.villa-attente span { display: inline-flex; align-items: center; gap: .7rem; }
.villa-attente i {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: villa-tourne 900ms linear infinite;
}
@keyframes villa-tourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .villa-attente i { animation: none; } }

.villa-hud {
  position: absolute; left: 1rem; bottom: 1rem; right: 1rem; z-index: 2;
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  align-items: center; justify-content: space-between;
}
.villa-vues { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.villa-hud button {
  padding: 0.5rem 0.9rem;
  border-radius: var(--pill);
  border: 1px solid color-mix(in srgb, var(--bone-50) 42%, transparent);
  background: color-mix(in srgb, #0B1A22 52%, transparent);
  backdrop-filter: blur(10px);
  color: var(--bone-50);
  font-size: var(--step--2);
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.villa-hud button:hover { border-color: var(--mpg-green); }
.villa-hud button.is-active { background: var(--mpg-green); border-color: var(--mpg-green); color: var(--blue-950); font-weight: 600; }
#villa-nuit { background: color-mix(in srgb, #0B1A22 72%, transparent); }

/* ==========================================================================
   Depliant : un bloc long qu'on ouvre seulement si on en a besoin.
   Motif volontairement different des accordeons de la FAQ.
   ========================================================================== */

.depliant {
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--bg-raised);
  overflow: hidden;
}
.depliant > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: clamp(1.1rem, 2.2vw, 1.6rem) clamp(1.2rem, 2.5vw, 1.9rem);
  cursor: pointer;
  list-style: none;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.depliant > summary::-webkit-details-marker { display: none; }
.depliant > summary:hover { background: var(--bg-sunk); }
.depliant__titre { display: flex; flex-direction: column; gap: 0.2rem; }
.depliant__titre b { font-family: var(--font-display); font-size: var(--step-1); font-weight: 500; }
.depliant__titre span { font-size: var(--step--2); color: var(--text-muted); }
.depliant__signe {
  flex: none;
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: var(--step--2);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--mpg-blue);
}
.depliant__signe svg { width: 1rem; height: 1rem; transition: transform 420ms var(--ease-out); }
.depliant[open] .depliant__signe svg { transform: rotate(180deg); }
.depliant[open] > summary { border-bottom: 1px solid var(--rule); }
.depliant__corps { padding: clamp(1.4rem, 3vw, 2.2rem); }
.depliant[open] .depliant__corps { animation: depliant-ouvre 420ms var(--ease-out) both; }
@keyframes depliant-ouvre { from { opacity: 0; transform: translate3d(0,-8px,0); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .depliant[open] .depliant__corps { animation: none; } }

/* ==========================================================================
   Etapes : deux ecritures pour ne pas repeter le meme bloc de page en page
   ========================================================================== */

/* Variante bande : les etapes defilent a l'horizontale */
.steps--bande {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(210px, 21vw, 268px);
  gap: var(--gutter);
  border-top: 0;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: 1.2rem;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  scrollbar-width: none;
}
.steps--bande::-webkit-scrollbar { display: none; }
.steps--bande .step {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  scroll-snap-align: start;
  padding: 1.4rem 1.3rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--bg-raised);
  position: relative;
}
.steps--bande .step:hover { background: var(--bg-raised); border-color: var(--mpg-green); }
.steps--bande .step__num {
  font-size: var(--step-5);
  line-height: 0.9;
  color: color-mix(in srgb, var(--accent-lisible) 78%, transparent);
}
.steps--bande .step__tag {
  align-self: flex-start;
  margin-top: auto;
  padding-top: 0.6rem;
}
.steps--bande .step__body p { font-size: var(--step--2); }

/* Variante grille : quatre colonnes serrees */
.steps--grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: var(--gutter);
  border-top: 0;
}
.steps--grille .step {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 0 0 0 1.1rem;
  border-left: 2px solid var(--rule);
}
.steps--grille .step:hover { background: transparent; border-left-color: var(--mpg-green); }
.steps--grille .step__num { font-size: var(--step-3); }
.steps--grille .step__body p { font-size: var(--step--2); }
.steps--grille .step__tag { align-self: flex-start; margin-top: auto; }

/* Bande de preuves : photos bord a bord, sans habillage de carte */
.bande-photos {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(240px, 30vw, 420px);
  gap: 2px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  border-radius: var(--radius-lg);
  overflow-y: hidden;
  scrollbar-width: none;
}
.bande-photos::-webkit-scrollbar { display: none; }
.bande-photos figure { position: relative; margin: 0; scroll-snap-align: start; aspect-ratio: 4 / 5; overflow: hidden; }
.bande-photos img { width: 100%; height: 100%; object-fit: cover; transition: transform 1200ms var(--ease-out); }
.bande-photos figure:hover img { transform: scale(1.06); }
.bande-photos figcaption {
  position: absolute; inset: auto 0 0 0;
  padding: 2.6rem 1.2rem 1.1rem;
  background: linear-gradient(180deg, rgba(2,19,32,0) 0%, rgba(2,19,32,.82) 62%);
  color: var(--bone-50);
}
.bande-photos figcaption b { display: block; font-family: var(--font-display); font-size: var(--step-0); font-weight: 500; }
.bande-photos figcaption span { font-size: var(--step--2); opacity: 0.74; }
@media (max-width: 620px) { .bande-photos figure { aspect-ratio: 3 / 4; } }

/* Variante ligne : une progression tendue, jalonnee. Compacte, et
   graphiquement distincte de la bande et de la grille. */
.steps--ligne {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(1.4rem, 3vw, 2.6rem) 0;
  border-top: 0;
  position: relative;
  padding-top: 2.6rem;
}
.steps--ligne::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 1.05rem;
  height: 1px;
  background: linear-gradient(90deg,
    var(--rule) 0%, var(--mpg-green) 18%, var(--mpg-green) 82%, var(--rule) 100%);
}
.steps--ligne .step {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0 1.4rem 0 0;
  position: relative;
}
.steps--ligne .step:hover { background: transparent; }
.steps--ligne .step::before {
  content: '';
  position: absolute;
  left: 0; top: -2.1rem;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--mpg-green);
  transition: background-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.steps--ligne .step:hover::before { background: var(--mpg-green); transform: scale(1.25); }
.steps--ligne .step__num {
  font-size: var(--step--2);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-weight: 600;
}
.steps--ligne .step__body { gap: 0.4rem; }
.steps--ligne .step__body p { font-size: var(--step--2); max-width: none; }
.steps--ligne .step__tag { align-self: flex-start; margin-top: 0.3rem; }
@media (max-width: 700px) {
  .steps--ligne { padding-top: 0; }
  .steps--ligne::before { display: none; }
  .steps--ligne .step { padding-left: 1.2rem; border-left: 2px solid var(--rule); }
  .steps--ligne .step::before { left: -8px; top: 0.25rem; }
}

/* ==========================================================================
   Passe mobile : on remplace l'empilement par du balayage
   ========================================================================== */

@media (max-width: 700px) {

  /* Etapes en grille : elles deviennent une bande qu'on balaye */
  .steps--grille {
    grid-auto-flow: column;
    grid-auto-columns: 74vw;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    gap: 0.9rem;
    padding-bottom: 1rem;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .steps--grille::-webkit-scrollbar { display: none; }
  .steps--grille .step {
    scroll-snap-align: start;
    padding: 1.1rem 1.1rem 1.1rem 1rem;
    border-left: 2px solid var(--mpg-green);
    background: var(--bg-raised);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  }

  /* La selection de projets de l'accueil : balayage plutot qu'empilement */
  .grid-3 {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 78vw;
    grid-template-columns: none;
    gap: 0.9rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: 1rem;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .grid-3::-webkit-scrollbar { display: none; }
  .grid-3 > * { scroll-snap-align: start; }
  .tile--tall, .tile--wide { aspect-ratio: 3 / 4; }

  /* Les projets filtrables : deux colonnes valent mieux qu'une pile */
  .projects-grid { grid-template-columns: 1fr; gap: 1.1rem; }
  .projects-grid .fiche { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Les photographies sont livrees en 900x560. Le cadre en 4/3 les rognait
     et coutait 44 px par fiche : sur six dossiers, un tiers d'ecran. */
  .projects-grid .card__media { aspect-ratio: 16 / 10; }

  /* Piliers et valeurs : deux colonnes */
  .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }
  .pillar { padding: 1.1rem; }
  .pillar p:last-child { font-size: var(--step--2); }

  /* Equipe : deux colonnes */
  .team { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
  .member__media { margin-bottom: 0.7rem; }
  .member__role { font-size: var(--step--2); }

  /* Les rails prennent presque toute la largeur du telephone */
  .rail { grid-auto-columns: 78vw; gap: 0.9rem; }
  .steps--bande { grid-auto-columns: 72vw; gap: 0.9rem; }
  .lot-blocs { grid-template-columns: 1fr; gap: 1.6rem; }

  /* Frise : les jalons se resserrent */
  .timeline { gap: 1.6rem; padding-left: 1.2rem; }
  .tl-item p { font-size: var(--step--2); }

  /* Le simulateur : les reglages avant le resultat, sans blanc inutile */
  .simu { gap: 1.2rem; }
  .simu__reglages { padding: 1.2rem; gap: 1.2rem; }
  .simu__resultat { padding: 1.2rem; }
  .simu-ligne { padding: 0.7rem 0; }

  /* La fiche de parcelle et la carte respirent moins */
  .plan { gap: 1.2rem; }
  .plan-fiche { padding: 1.2rem; }
  .carte-scene { min-height: clamp(300px, 52vh, 420px); }
}

/* ==========================================================================
   Scene agrandie : le plein ecran sans API capricieuse
   ========================================================================== */

.est-agrandie {
  position: fixed !important;
  inset: 0 !important;
  z-index: 180;
  border-radius: 0 !important;
  border: 0 !important;
  aspect-ratio: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
}
.est-agrandie canvas { cursor: grab; }

.agrandir {
  position: absolute;
  right: 1rem; top: 1rem;
  z-index: 4;
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.5rem 0.85rem;
  border-radius: var(--pill);
  border: 1px solid color-mix(in srgb, var(--bone-50) 40%, transparent);
  background: color-mix(in srgb, #04131E 58%, transparent);
  backdrop-filter: blur(10px);
  color: var(--bone-50);
  font-size: var(--step--2);
}
.agrandir:hover { border-color: var(--mpg-green); }
.agrandir svg { width: 0.85rem; height: 0.85rem; transition: transform var(--dur-fast) var(--ease-out); }
.agrandir .mot-fermer { display: none; }
.est-agrandie .agrandir .mot-ouvrir { display: none; }
.est-agrandie .agrandir .mot-fermer { display: inline; }
.est-agrandie .agrandir svg { transform: rotate(-135deg); }

/* Sur la carte les outils sont deja en haut a droite : on decale */
.carte-scene .agrandir { top: auto; bottom: 1rem; right: 1rem; }

/* ==========================================================================
   Le Plateau de Dakar, carte vectorielle
   Bati et voirie reels redessines aux couleurs de la maison. Pas d'iframe,
   pas de 3D : un trace net a toutes les tailles, leger sur telephone.
   ========================================================================== */

.carte {
  position: relative;
  min-width: 0;
  max-width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #F2ECDD;
  border: 1px solid var(--rule);
  box-shadow: var(--shadow);
}

/* remplacee par le plein cadre, plus bas */

/* Le bati : deux valeurs, la ville se lit sans surcharge */
.c-bati path { stroke: #D8CEB8; stroke-width: 0.9; stroke-linejoin: round; }
.c-bati .c-bati { fill: #E0D7C2; }
.c-bati .c-gros { fill: #D5CAB1; }

/* La voirie, en creux clair comme sur une carte imprimee */
.c-voies path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.c-voies .c-grande { stroke: #FBF7EC; stroke-width: 13; }
.c-voies .c-petite { stroke: #FBF7EC; stroke-width: 7.5; }

/* La rue du bureau, soulignee */
.c-bureau-voie path {
  fill: none;
  stroke: var(--mpg-green);
  stroke-width: 8.5;
  stroke-linecap: round;
  opacity: .92;
}

/* Le trait de cote */
.c-cote path { fill: none; stroke: #9CC3D6; stroke-width: 4; stroke-linecap: round; }

/* Les noms de rues */
.c-noms text {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .09em;
  fill: #8A7F66;
  text-transform: uppercase;
}

.c-anneau { fill: none; stroke: var(--rule); stroke-width: 2; }

/* Le point du bureau */
.c-repere .c-point { fill: var(--mpg-blue); }
.c-repere .c-halo { fill: var(--mpg-green); opacity: .34; }
.c-repere .c-onde {
  fill: none;
  stroke: var(--mpg-green);
  stroke-width: 2.5;
  transform-origin: center;
  animation: carte-onde 2600ms var(--ease-out) infinite;
}
@keyframes carte-onde {
  0%   { transform: scale(.42); opacity: .85; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .c-repere .c-onde { animation: none; opacity: .4; }
}

/* Rose des vents et echelle */
.c-nord-fond { fill: #FBF7EC; stroke: var(--rule); stroke-width: 1.5; }
.c-nord-fleche { fill: var(--mpg-blue); }
.c-nord-lettre {
  font-family: var(--font-sans); font-size: 11px; font-weight: 700;
  fill: #8A7F66; letter-spacing: .06em;
}
.c-echelle path { stroke: #8A7F66; stroke-width: 1.6; fill: none; }
.c-echelle text {
  font-family: var(--font-sans); font-size: 11px; font-weight: 600;
  fill: #8A7F66; letter-spacing: .08em;
}

/* L'etiquette d'adresse, posee sur la carte */
.carte__adresse {
  position: absolute;
  left: clamp(.9rem, 2.4vw, 1.5rem);
  top: clamp(.9rem, 2.4vw, 1.5rem);
  z-index: 2;
  margin: 0;
  padding: .85rem 1.1rem;
  border-radius: var(--radius-xs);
  background: color-mix(in srgb, var(--bone-50) 92%, transparent);
  backdrop-filter: blur(8px);
  border: 1px solid var(--rule);
  line-height: 1.4;
  max-width: 14rem;
  box-shadow: var(--shadow-sm);
}
.carte__adresse b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 500;
  margin-bottom: .15rem;
}
.carte__adresse span { font-size: var(--step--2); color: var(--text-muted); }

.carte__source {
  position: absolute;
  right: .85rem; bottom: .7rem;
  z-index: 2; margin: 0;
  font-size: .66rem;
  color: var(--ink-600);
}
.carte__source a { text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 560px) {
  .carte__adresse { max-width: 11.5rem; padding: .7rem .9rem; }
  .c-noms text { font-size: 15px; }
  .c-echelle, .c-nord { display: none; }
}

/* ==========================================================================
   Hero sur telephone
   Il debordait de 15 px et la barre de signature passait sous le pli.
   On le cale exactement sur la hauteur utile et on resserre le rythme.
   ========================================================================== */

@media (max-width: 700px) {
  .hero {
    min-height: 100svh;
    padding-top: calc(var(--header-h) + 0.5rem);
    display: grid;
    grid-template-rows: 1fr auto;
  }

  .hero__inner {
    padding-block: 0.8rem 1.2rem;
    grid-template-rows: auto 1fr auto auto;
    gap: 0.9rem;
    align-content: end;
  }

  .hero__eyebrow { font-size: 0.66rem; letter-spacing: .16em; }

  /* Le titre reste imposant sans manger l'ecran */
  .hero__title { font-size: clamp(2.9rem, 13.4vw, 3.6rem); line-height: 0.98; }

  .hero__aside { gap: 1.05rem; padding-bottom: 0; }
  .hero__lead {
    font-size: var(--step--1);
    line-height: 1.55;
  }
  .hero__aside .stack-h { gap: 0.6rem; }
  .hero__aside .btn { flex: 1; justify-content: center; padding-inline: 1em; }

  /* La barre de signature : compacte, et enfin visible en entier */
  .hero__bar { margin: 0 10px 10px; }
  .hero__bar-inner { padding-block: 0.75rem; gap: 0.8rem; flex-wrap: nowrap; }
  .hero__bar-inner .signature { font-size: var(--step--2); }
  .hero__scroll { font-size: var(--step--2); white-space: nowrap; }
}

/* Tres petits ecrans : on descend encore d'un cran */
@media (max-width: 380px) {
  .hero__title { font-size: clamp(2.5rem, 12.8vw, 3.1rem); }
}

/* ==========================================================================
   Histoire : l'ancienne enseigne face a la frise
   ========================================================================== */

.histoire {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(1.8rem, 4vw, 3.6rem);
  align-items: start;
}
@media (max-width: 860px) { .histoire { grid-template-columns: 1fr; } }

.histoire__logo {
  margin: 0;
  position: sticky;
  top: calc(var(--header-h) + 1.5rem);
}
@media (max-width: 860px) { .histoire__logo { position: static; } }
.histoire__logo img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  border: 1px solid var(--rule);
  background: #fff;
  filter: saturate(.9);
}
.histoire__logo figcaption {
  margin-top: 0.85rem;
  font-size: var(--step--2);
  color: var(--text-muted);
  line-height: 1.6;
  max-width: 34ch;
}

/* Photographie reelle dans la section d'implantation */
.implantation { margin: 0 0 0.4rem; }
.implantation img {
  width: 100%;
  height: auto;
  max-height: 26rem;
  object-fit: cover;
  object-position: center 30%;
  border-radius: var(--radius-lg);
  display: block;
}
.implantation figcaption {
  margin-top: 0.7rem;
  font-size: var(--step--2);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Le defilement des bandes reste fluide sur telephone */
.rail, .steps--bande, .steps--grille, .grid-3,
.bande-photos, .selecteur__liste, .rdv__jours {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  .rail, .steps--bande, .steps--grille, .grid-3,
  .bande-photos, .selecteur__liste, .rdv__jours { scroll-behavior: auto; }
}

/* ==========================================================================
   Zone d'intervention et apercu des actualites (accueil)
   ========================================================================== */

.zones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.zone {
  background: var(--bg);
  padding: clamp(1.3rem, 2.6vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.zone__nom {
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.15;
  margin: 0;
}
.zone__detail { margin: 0; font-size: var(--step--2); color: var(--text-muted); line-height: 1.6; }
@media (hover: hover) and (pointer: fine) {
  .zone:hover { background: var(--bg-raised); }
}
@media (max-width: 700px) { .zones { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .zones { grid-template-columns: 1fr; } }

.apercus {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gutter);
}
@media (max-width: 900px) {
  .apercus {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 74vw;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    gap: 0.9rem;
    padding-bottom: 1rem;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .apercus::-webkit-scrollbar { display: none; }
  .apercus > * { scroll-snap-align: start; }
}

.apercu { display: flex; flex-direction: column; gap: 0.75rem; }
.apercu__media {
  border-radius: var(--radius-sm);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--bg-sunk);
}
.apercu__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .apercu:hover .apercu__media img { transform: scale(1.05); }
  .apercu:hover h3 { color: var(--mpg-blue); }
}
.apercu__meta {
  display: flex; align-items: center; gap: 0.6rem;
  margin: 0; font-size: var(--step--2); color: var(--text-muted);
}
.apercu h3 { margin: 0; max-width: 26ch; transition: color var(--dur-fast) var(--ease-out); }

/* ==========================================================================
   Questions frequentes : le registre
   L'en-tete tient dans un rail lateral qui reste en place pendant la
   lecture, ce qui rend a la page toute la hauteur qu'un titre empile lui
   prenait. Les questions deviennent des lignes serrees, en une seule ligne
   de texte quand la largeur le permet, et rien n'est ouvert au depart.
   ========================================================================== */

.faq {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.55fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

/* Le rail suit la lecture sans jamais depasser la section */
.faq__rail { position: sticky; top: clamp(5rem, 12vh, 7.5rem); }
.faq__rail h2 { margin: 0.3rem 0 0.9rem; }
.faq__rail .muted { max-width: 30ch; }

.faq__reste {
  margin-top: 1.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--rule);
  font-size: var(--step--1);
  color: var(--text-muted);
  max-width: 30ch;
}
.faq__reste .link { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.35rem; }
.faq__reste .link svg { width: 0.75rem; height: 0.75rem; }

/* ------------------------------------------------------------------ *
 * Le registre lui-meme : une variante de l'accordeon, meme mecanique,
 * autre echelle. Le numero tient la colonne de gauche, la question
 * occupe une seule ligne, le signe reste discret.
 * ------------------------------------------------------------------ */
.acc--registre { border-top: 1px solid var(--rule); }

.acc--registre .acc__btn {
  display: grid;
  grid-template-columns: 2.1rem minmax(0, 1fr) 1.4rem;
  align-items: baseline;
  gap: 0.9rem;
  padding: 0.92rem 0;
  font-family: var(--font-sans);
  font-size: var(--step-0);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0;
}

.acc--registre .acc__num {
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
  color: var(--accent-lisible);
  transition: color var(--dur-fast) var(--ease-out);
}
.acc--registre .acc__q { min-width: 0; }

/* Un signe simple, sans pastille : deux traits qui deviennent un */
.acc--registre .acc__sign {
  width: 0.85rem; height: 0.85rem;
  border: 0; border-radius: 0;
  background: none;
  align-self: center;
  justify-self: end;
  transform: none;
  transition: transform 420ms var(--ease-out);
}
.acc--registre .acc__sign::before { width: 0.85rem; height: 1.5px; }
.acc--registre .acc__sign::after  { width: 1.5px; height: 0.85rem; }
.acc--registre .acc__btn[aria-expanded='true'] .acc__sign {
  background: none; border: 0; color: var(--mpg-green); transform: rotate(180deg);
}
.acc--registre .acc__btn[aria-expanded='true'] .acc__num { color: var(--mpg-green); }
.acc--registre .acc__btn[aria-expanded='true'] .acc__q { color: var(--mpg-green); }

/* La reponse s'aligne sous la question, pas sous le numero, et porte un
   filet vert qui la rattache visuellement a la ligne ouverte. */
.acc--registre .acc__panel .acc__inner { padding: 0; }
.acc--registre .acc__inner p {
  margin: 0 1.4rem 1.25rem 0.5rem;
  padding: 0.1rem 0 0.1rem 2.5rem;
  border-left: 2px solid var(--mpg-green);
  font-size: var(--step--1);
  line-height: 1.62;
  color: var(--text-muted);
  max-width: 62ch;
}

@media (hover: hover) and (pointer: fine) {
  .acc--registre .acc__btn:hover .acc__num { color: var(--mpg-green); }
}

/* ------------------------------------------------------------------ *
 * Sous 900 px le rail passe au-dessus : garder une colonne collante
 * n'aurait plus de sens, et le registre prend toute la largeur.
 * ------------------------------------------------------------------ */
@media (max-width: 900px) {
  .faq { grid-template-columns: 1fr; gap: 1.9rem; }
  .faq__rail { position: static; }
  .faq__rail .muted, .faq__reste { max-width: 46ch; }
}

@media (max-width: 600px) {
  .acc--registre .acc__btn {
    grid-template-columns: 1.7rem minmax(0, 1fr) 1.1rem;
    gap: 0.7rem;
    padding: 0.82rem 0;
    font-size: var(--step--1);
  }
  .acc--registre .acc__inner p { margin: 0 0 1.05rem 0.35rem; padding-left: 1.1rem; }
}


/* La carte en plein cadre, et ses reperes en HTML */
.carte { aspect-ratio: 5 / 4; }
@media (max-width: 900px) { .carte { aspect-ratio: 4 / 3; } }
.carte-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* Rose des vents et echelle : sorties du dessin, elles tiennent les angles
   du cadre quel que soit le recadrage de la carte. */
.carte__nord {
  position: absolute; top: 0.9rem; right: 0.9rem; z-index: 3;
  width: 2.5rem; height: 2.5rem;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: color-mix(in srgb, var(--bg-raised) 78%, transparent);
  backdrop-filter: blur(6px);
}
.carte__nord svg { width: 1.5rem; height: 1.5rem; fill: var(--mpg-green); }
.carte__nord span {
  position: absolute; bottom: 0.24rem;
  font-size: 0.56rem; font-weight: 700; letter-spacing: .08em;
  color: var(--text-muted);
}
.carte__echelle {
  position: absolute; left: 0.95rem; bottom: 0.85rem; z-index: 3;
  display: flex; flex-direction: column; gap: 0.22rem;
  font-size: 0.62rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-muted);
}
.carte__echelle i {
  display: block; width: 3.6rem; height: 6px;
  border: 1px solid currentColor; border-top: 0;
}

/* ==========================================================================
   Les sept metiers : une grille en claustra
   Un seul panneau a joints fins, comme un mur de brise-soleil dakarois.
   Deux cellules sont ouvertes et portent une image, cinq sont pleines.
   Volontairement different du selecteur des services et des rails :
   aucune page ne doit donner l'impression de repeter la precedente.
   ========================================================================== */

.claustra {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* La composition, dans cet ordre precis : la base d'abord, sinon elle
   ecrase les modificateurs qui la suivent.
     rangees 1-2 : un phare sur deux hauteurs, deux cellules empilees
     rangee 3    : trois cellules egales
     rangee 4    : une bande pleine largeur */
.claustra__cell { grid-column: span 3; }

.claustra__cell--phare { grid-row: span 2; }

.claustra__cell:nth-child(4),
.claustra__cell:nth-child(5),
.claustra__cell:nth-child(6) { grid-column: span 2; }

.claustra__cell--large { grid-column: 1 / -1; }

.claustra__cell {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  min-height: 180px;
  padding: clamp(1.15rem, 2.2vw, 1.75rem);
  background: var(--bg);
  color: var(--text);
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}

/* Le trait vert qui se tire sous la cellule survolee */
.claustra__cell::after {
  content: '';
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 2px;
  background: var(--mpg-green);
  transition: right 520ms var(--ease-out);
  z-index: 3;
}
@media (hover: hover) and (pointer: fine) {
  .claustra__cell:hover { background: var(--bg-raised); }
  .claustra__cell:hover::after { right: 0; }
  .claustra__cell:hover .claustra__fleche { transform: rotate(45deg); }
  .claustra__cell--image:hover .claustra__media img { transform: scale(1.05); }
}
.claustra__cell:focus-visible { outline: 2px solid var(--mpg-green); outline-offset: -3px; }

/* Le numero, pose comme un reperage de plan */
.claustra__num {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  line-height: 1;
  /* A 34 % le numero tombait a 1,8 pour 1 sur le fond creme : il se lisait
     comme une tache, pas comme un chiffre. A 60 % il tient 3,2 pour 1, le
     seuil des grands caracteres, et reste le reperage discret qu'il doit
     etre. */
  color: color-mix(in srgb, var(--mpg-blue) 60%, transparent);
  font-variant-numeric: tabular-nums;
  z-index: 2;
}

.claustra__corps { display: flex; flex-direction: column; gap: 0.4rem; z-index: 2; }
.claustra__titre {
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.15;
  letter-spacing: -0.015em;
}
.claustra__texte {
  font-size: var(--step--2);
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 42ch;
}

.claustra__pied {
  margin-top: auto;
  padding-top: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  z-index: 2;
}
.claustra__mention {
  font-size: var(--step--2);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.claustra__fleche {
  width: 1rem; height: 1rem; flex: none;
  color: var(--mpg-blue);
  transition: transform 420ms var(--ease-spring);
}

/* Les cellules ouvertes : la photographie tient toute la cellule */
.claustra__cell--image { color: var(--bone-50); justify-content: flex-end; min-height: 320px; }
.claustra__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.claustra__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1100ms var(--ease-out);
}
/* Le voile creusait au milieu, a .36, et c'est precisement la que tombe le
   paragraphe. Sur une facade claire, le fond compose y remontait a 160 de
   luminosite : du blanc a 76 % dessus donnait 1,2 pour 1, c'est-a-dire
   illisible. Le creux est desormais a .62, ce qui tient 4,5 pour 1 meme
   sur la zone la plus claire d'une photographie. La photographie reste
   visible : elle passe a 38 % la ou elle etait a 64 %, et le reste du
   degrade la laisse respirer. */
.claustra__cell--image::before {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg,
    rgb(var(--voile) / .76) 0%, rgb(var(--voile) / .62) 52%, rgb(var(--voile) / .90) 100%);
}
.claustra__cell--image .claustra__num { color: color-mix(in srgb, var(--mpg-green) 88%, transparent); }
/* Un texte deja pose sur photographie n'a pas de marge pour etre attenue
   en plus : la nuance se perdait, la lisibilite avec. */
.claustra__cell--image .claustra__texte,
.claustra__cell--image .claustra__mention { color: color-mix(in srgb, var(--bone-50) 92%, transparent); }
.claustra__cell--image .claustra__fleche { color: var(--mpg-green); }
@media (hover: hover) and (pointer: fine) {
  .claustra__cell--image:hover { background: transparent; }
}

/* La bande finale, plus basse et en ligne */
.claustra__cell--large { min-height: 0; }
.claustra__cell--large .claustra__corps { flex-direction: row; align-items: baseline; gap: 1.2rem; flex-wrap: wrap; }
.claustra__cell--large .claustra__texte { max-width: 58ch; }

/* ------------------------------------------------------------------ *
 * Tablette : deux colonnes, la composition se simplifie
 * ------------------------------------------------------------------ */
@media (max-width: 900px) {
  .claustra { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .claustra__cell,
  .claustra__cell--ouverte,
  .claustra__cell:nth-child(4),
  .claustra__cell:nth-child(5),
  .claustra__cell:nth-child(6) { grid-column: span 1; grid-row: auto; }
  .claustra__cell--phare,
  .claustra__cell--large { grid-column: span 2; grid-row: auto; }
  .claustra__cell--phare { min-height: 300px; }
  .claustra__cell--ouverte { min-height: 260px; }
}

/* ------------------------------------------------------------------ *
 * Telephone : une colonne, cellules compactes. Pas de bande a balayer,
 * il y en a deja ailleurs sur la page.
 * ------------------------------------------------------------------ */
@media (max-width: 600px) {
  .claustra { grid-template-columns: 1fr; }
  /* On reprend toutes les places, y compris celles posees par nth-child,
     qui l'emportent sur la simple classe. */
  .claustra__cell,
  .claustra__cell--phare,
  .claustra__cell--ouverte,
  .claustra__cell--large,
  .claustra__cell:nth-child(4),
  .claustra__cell:nth-child(5),
  .claustra__cell:nth-child(6) { grid-column: 1 / -1; grid-row: auto; min-height: 0; }
  .claustra__cell { padding: 1.05rem 1.1rem; gap: 0.5rem; }
  .claustra__cell--image { min-height: 210px; }
  .claustra__titre { font-size: var(--step-0); }
  .claustra__texte { font-size: var(--step--2); }
  /* Sur petite cellule pleine, le texte s'efface : le titre suffit */
  .claustra__cell:not(.claustra__cell--image):not(.claustra__cell--large) .claustra__texte {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .claustra__pied { padding-top: 0.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .claustra__cell::after,
  .claustra__fleche,
  .claustra__media img { transition: none; }
}

/* ==========================================================================
   Mediatheque : la mosaique
   Douze colonnes, des tuiles de trois largeurs. La page des projets montre
   des dossiers avec leur mission et leurs chiffres ; ici on ne montre que
   l'image, et la legende ne vient qu'au survol ou au focus. Deux pages qui
   parlent d'images ne doivent pas se ressembler.
   ========================================================================== */

.mosaic {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(0.5rem, 1vw, 0.9rem);
}

.mosaic__item {
  position: relative;
  grid-column: span 4;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--radius-sm);
  border: 1px solid var(--rule);
  background: var(--bg-sunk);
  padding: 0;
  cursor: zoom-in;
  isolation: isolate;
}
.mosaic__item--l { grid-column: span 6; }
.mosaic__item--h { grid-column: span 4; aspect-ratio: 3 / 4; }

/* Le grossissement du cadrage passe par une variable : ecrit en ligne, il
   gagnerait contre la regle de survol juste dessous, et le mouvement au
   passage de la souris disparaitrait sur les images recadrees. */
.mosaic__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(var(--cadre-zoom, 1));
  transition: transform 900ms var(--ease-out), filter 420ms var(--ease-out);
}

/* Le voile ne se leve que sous le curseur : au repos la mosaique est
   une planche d'images, rien d'autre. */
.mosaic__legende {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  padding: 2.6rem 0.95rem 0.85rem;
  text-align: left;
  background: linear-gradient(180deg, rgb(var(--voile) / 0) 0%, rgb(var(--voile) / .88) 62%);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 380ms var(--ease-out), transform 380ms var(--ease-out);
}
.mosaic__titre {
  font-family: var(--font-display);
  font-size: var(--step--1);
  line-height: 1.2;
  color: var(--bone-50);
}
.mosaic__lieu {
  font-size: 0.68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--bone-50) 68%, transparent);
}

@media (hover: hover) and (pointer: fine) {
  .mosaic__item:hover img { transform: scale(calc(var(--cadre-zoom, 1) * 1.045)); }
  .mosaic__item:hover .mosaic__legende { opacity: 1; transform: none; }
}
.mosaic__item:focus-visible { outline: 2px solid var(--mpg-green); outline-offset: 2px; }
.mosaic__item:focus-visible .mosaic__legende { opacity: 1; transform: none; }

/* Sur ecran tactile il n'y a pas de survol : la legende reste posee. */
@media (hover: none) {
  .mosaic__legende { opacity: 1; transform: none; padding-top: 2rem; }
}

/* ------------------------------------------------------------------ *
 * Tablette puis telephone : la composition se simplifie, les tuiles
 * hautes redeviennent normales pour ne pas etirer la page.
 * ------------------------------------------------------------------ */
@media (max-width: 900px) {
  .mosaic { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .mosaic__item, .mosaic__item--h { grid-column: span 3; aspect-ratio: 3 / 2; }
  .mosaic__item--l { grid-column: span 6; }
}
@media (max-width: 560px) {
  .mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem; }
  .mosaic__item, .mosaic__item--h, .mosaic__item--l { grid-column: span 1; aspect-ratio: 1 / 1; }
  .mosaic__item--l { grid-column: span 2; aspect-ratio: 3 / 2; }
  /* Une tuile seule en fin de grille laissait un demi-vide : elle prend
     la largeur et ferme proprement la mosaique. */
  .mosaic__item:last-child { grid-column: span 2; aspect-ratio: 3 / 2; }
  .mosaic__titre { font-size: var(--step--2); }
  /* Dans un carre de 170 px le lieu poussait le titre sur trois lignes :
     sur les tuiles etroites le titre suffit. */
  .mosaic__item:not(.mosaic__item--l):not(:last-child) .mosaic__lieu { display: none; }
  .mosaic__lieu { font-size: 0.6rem; }
}

/* ==========================================================================
   La visionneuse
   ========================================================================== */

/* ==========================================================================
   La galerie d'un article
   Une maison ne se vend pas avec une photographie. Une bande de vignettes
   sous le texte, et la visionneuse les ouvre l'une apres l'autre. Le format
   est celui d'une planche-contact : on compare avant d'ouvrir.
   ========================================================================== */

.galerie {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 1.1rem;
}

.galerie__une {
  position: relative;
  width: 104px;
  height: 72px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--bg-sunk);
  cursor: zoom-in;
  transition: border-color .18s ease, transform .18s ease;
}
.galerie__une img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(var(--cadre-zoom, 1));
  transition: transform .3s ease;
}
.galerie__une:hover { border-color: var(--mpg-green); }
.galerie__une:hover img { transform: scale(calc(var(--cadre-zoom, 1) * 1.06)); }
.galerie__une:focus-visible { outline: 2px solid var(--mpg-green); outline-offset: 2px; }

/* Le compte de ce qui n'est pas montre. Six vues cachees derriere quatre
   vignettes ne se devinent pas. */
.galerie__reste {
  display: grid;
  place-items: center;
  min-width: 44px;
  height: 72px;
  padding: 0 .55rem;
  border: 1px solid var(--rule);
  border-radius: 10px;
  font: 600 .85rem/1 var(--font-ui, inherit);
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

@media (max-width: 560px) {
  .galerie__une, .galerie__reste { width: 84px; height: 58px; }
  .galerie__reste { width: auto; min-width: 38px; }
}

.visio {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(0.4rem, 2vw, 1.6rem);
  padding: clamp(1rem, 4vw, 3rem);
  /* Toujours sombre, meme en theme clair : une visionneuse sur fond
     blanc delave les photographies qu'elle est censee montrer. */
  background: rgba(9, 12, 16, .95);
  color: #F2EFE7;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  animation: visio-entree 260ms var(--ease-out);
}
.visio[hidden] { display: none; }
@keyframes visio-entree { from { opacity: 0; } to { opacity: 1; } }

.visio__cadre {
  margin: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  align-items: center;
  justify-self: center;
}
.visio__cadre img {
  max-width: 100%;
  max-height: 76vh;
  width: auto;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  animation: visio-image 320ms var(--ease-out);
}
@keyframes visio-image { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }

.visio__legende {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.3rem 0.9rem;
  text-align: center;
}
.visio__legende b { font-family: var(--font-display); font-size: var(--step-0); font-weight: 400; }
.visio__legende span { font-size: var(--step--2); letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.visio__compte { font-variant-numeric: tabular-nums; }

.visio__legende b { color: #F2EFE7; }
.visio__legende span { color: #A9A79E; }
.visio__nav,
.visio__fermer {
  width: clamp(2.4rem, 5vw, 3.1rem);
  height: clamp(2.4rem, 5vw, 3.1rem);
  border-radius: 50%;
  border: 1px solid rgba(242, 239, 231, .22);
  background: rgba(242, 239, 231, .10);
  color: #F2EFE7;
  display: grid; place-items: center;
  flex: none;
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.visio__nav:hover,
.visio__fermer:hover { background: var(--mpg-green); border-color: var(--mpg-green); color: #0E0F0D; }
.visio__nav svg { width: 42%; height: 42%; }
.visio__nav--prec svg { transform: rotate(180deg); }

.visio__fermer {
  position: absolute;
  top: clamp(0.9rem, 2.4vw, 1.6rem);
  right: clamp(0.9rem, 2.4vw, 1.6rem);
  z-index: 3;
}
/* La croix est dessinee, pas empruntee a une police */
.visio__fermer span {
  position: absolute; width: 42%; height: 1.5px; background: currentColor; border-radius: 2px;
}
.visio__fermer span:first-child { transform: rotate(45deg); }
.visio__fermer span:last-child  { transform: rotate(-45deg); }

/* Sous 700 px les fleches passent sous l'image : les garder sur les cotes
   volerait la moitie de la largeur utile. */
@media (max-width: 700px) {
  .visio {
    grid-template-columns: 1fr;
    grid-template-areas: 'cadre' 'nav';
    align-content: center;
    gap: 1.1rem;
  }
  .visio__cadre { grid-area: cadre; }
  .visio__cadre img { max-height: 62vh; }
  .visio__nav--prec { grid-area: nav; justify-self: center; margin-right: 4.2rem; }
  .visio__nav--suiv { grid-area: nav; justify-self: center; margin-left: 4.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .visio, .visio__cadre img { animation: none; }
  .mosaic__item img, .mosaic__legende { transition: none; }
}

/* ==========================================================================
   Tenue d'ecran
   Quatre regles de cadrage qui valent pour tout le site : le hero tient
   dans la fenetre meme sur un portable court, aucun titre ne deborde de sa
   colonne, les huit metiers ne coutent plus deux ecrans sur telephone, et
   rien ne se touche a moins de 44 px.
   ========================================================================== */

/* --- 1. Portables courts : 1366x768 et compagnie --------------------------
   Le hero mesurait 803 px pour 768 px utiles : la barre de signature
   tombait sous la ligne de flottaison. On reprend la hauteur sur le corps
   du titre, qui en avait de reste, plutot que de rogner le contenu. */
@media (min-width: 901px) and (max-height: 860px) {
  .hero { padding-top: calc(var(--header-h) + 0.35rem); }
  .hero__title { font-size: clamp(3.2rem, 6.4vw, 5.4rem); }
  .hero__inner {
    padding-block: clamp(0.9rem, 1.6vw, 1.5rem);
    gap: calc(var(--gutter) * 0.72);
  }
  .hero__lead { font-size: var(--step--1); }
  .hero__aside { gap: 1.1rem; padding-bottom: 0; }
  .hero__bar-inner { padding-block: 0.85rem; }

  /* Les en-tetes de page souffraient du meme mal : celui des Actualites
     mesurait 788 px pour 768 utiles, son titre a lui seul 372. On rend la
     hauteur au corps du titre et aux marges, le propos ne bouge pas. */
  .page-head {
    padding-top: calc(var(--header-h) + clamp(2.4rem, 4.6vw, 4.4rem));
    padding-bottom: clamp(1.9rem, 3.4vw, 3.2rem);
  }
  .page-head h1 { font-size: clamp(3rem, 5.4vw, 4.6rem); }
  .page-head .lead { margin-top: 1rem; }
}

/* --- 2. Titres de capitales sur petit ecran -------------------------------
   `--step-8` avait ete calibre sur PATRIMOINE, dix signes. CONNAISSANCE en
   compte douze et debordait de 22 px de chaque cote a 375 px. On aligne les
   titres de capitales sur la taille deja eprouvee du hero, sans toucher au
   hero lui-meme, qui a ses propres regles plus bas dans la cascade. */
@media (max-width: 560px) {
  .t-hero.t-caps:not(.hero__title) { font-size: clamp(2.35rem, 11.2vw, 3.4rem); }
}

/* --- 3. Les huit metiers en deux colonnes ---------------------------------
   Empiles, ils faisaient 1787 px, soit deux ecrans pour un seul bloc. La
   cellule phare garde sa photographie et son propos ; les sept autres
   deviennent un index, numero et intitule, que la page Services detaille.
   Leur habillage photo est neutralise en entier : masquer l'image en
   gardant la couleur de texte claire rendait trois titres illisibles. */
@media (max-width: 600px) {
  .claustra { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .claustra__cell,
  .claustra__cell--ouverte,
  .claustra__cell--image,
  .claustra__cell:nth-child(4),
  .claustra__cell:nth-child(5),
  .claustra__cell:nth-child(6) { grid-column: span 1; min-height: 116px; }
  .claustra__cell--phare,
  .claustra__cell--large { grid-column: 1 / -1; min-height: 244px; }
  /* La huitieme ne reste pas seule sur sa rangee */
  .claustra__cell:last-child { grid-column: 1 / -1; min-height: 96px; }

  /* Retour au registre clair partout ou la photographie disparait */
  .claustra__cell--image:not(.claustra__cell--phare) {
    color: var(--text);
    justify-content: flex-start;
  }
  .claustra__cell--image:not(.claustra__cell--phare)::before,
  .claustra__cell:not(.claustra__cell--phare) .claustra__media { display: none; }
  .claustra__cell--image:not(.claustra__cell--phare) .claustra__num {
    color: color-mix(in srgb, var(--mpg-blue) 34%, transparent);
  }
  .claustra__cell--image:not(.claustra__cell--phare) .claustra__fleche { color: var(--mpg-blue); }

  /* Le texte courant s'efface : sur 160 px de large il ne dit plus rien.
     Le selecteur est prefixe par .claustra pour atteindre les 0-4-0 de la
     regle de troncature posee plus haut, et l'emporter par l'ordre. */
  .claustra .claustra__cell:not(.claustra__cell--phare) .claustra__texte,
  .claustra .claustra__cell:not(.claustra__cell--phare) .claustra__mention { display: none; }

  .claustra__cell:not(.claustra__cell--phare) { padding: 0.85rem 0.8rem; gap: 0.35rem; }
  .claustra__cell:not(.claustra__cell--phare) .claustra__pied {
    padding-top: 0; margin-top: auto;
  }
  .claustra__titre { font-size: var(--step--1); line-height: 1.25; }
}

/* --- 4. Cibles tactiles ---------------------------------------------------
   Releve avant correction : la recherche a 32 px, les filtres a 38, le
   bouton d'agrandissement a 36, les liens de pied de page entre 18 et 25.
   Le pied passe en deux colonnes : chaque lien gagne sa hauteur de doigt
   et la colonne perd la moitie de ses rangees. */
@media (max-width: 700px) {
  .chercher,
  .filter,
  .agrandir,
  .qualif__intention { min-height: 44px; }

  .footer__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 1rem;
  }
  .footer__list a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
  .footer__list > p { grid-column: 1 / -1; padding-top: 0.6rem; }
  .footer__legal a { display: inline-flex; align-items: center; min-height: 40px; }
  .lettre__choix label { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; }
}

/* --- 5. En-tete a l'etroit ------------------------------------------------
   Entre 901 et 1440 px, le logo, les huit liens et le bloc d'actions se
   partagent 1280 px : il ne restait que 24 px entre le logo et « Accueil ».
   Le mot de la recherche s'efface, la loupe et le raccourci suffisent, et
   la navigation retrouve de l'air. */
@media (min-width: 901px) and (max-width: 1440px) {
  .header__inner { gap: 2.25rem; }
  .header .chercher span,
  .header .chercher kbd { display: none; }
  .header .chercher { padding: 0.5rem 0.62rem; }
}

/* --- 6. Le reste des cibles tactiles --------------------------------------
   Second releve : le telephone et l'adresse du tiroir a 22 px, les trois
   contacts sous le formulaire de qualification a 18, et les liens souligne
   au survol entre 21 et 25. Tous sont des inline-flex : une hauteur
   minimale suffit, sans toucher au dessin. */
@media (max-width: 1080px) {
  .drawer__foot a { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (max-width: 700px) {
  .link,
  .qualif__pied a,
  .footer__legal a { min-height: 44px; }
  .socials a { width: 2.75rem; height: 2.75rem; }
}

/* ==========================================================================
   Actualites : le bloc manquant
   La page avait ete portee avec son HTML mais sans sa feuille : .une et
   .fil n'avaient aucune regle, l'article a la une occupait 2328 px et le
   fil 3421 px, en une seule colonne. Regles reprises de la seconde refonte,
   ou elles s'appuient deja sur les memes jetons.
   ========================================================================== */
.une {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(1.8rem, 4vw, 3.6rem);
  align-items: start;
}
@media (max-width: 900px) { .une { grid-template-columns: 1fr; } }

.une__media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  position: sticky;
  top: calc(var(--header-h) + 1.4rem);
}
@media (max-width: 900px) { .une__media { position: static; aspect-ratio: 16 / 10; } }
.une__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(var(--cadre-zoom, 1)); }

.une__corps { display: flex; flex-direction: column; gap: 1rem; }
.une__corps h2 { margin: 0.2rem 0 0; }
.une__texte { max-width: 62ch; }
.une__texte p { line-height: 1.75; }
.une__texte p:first-child::first-letter {
  float: left;
  font-family: var(--font-display);
  font-size: 3.1em;
  line-height: 0.82;
  padding: 0.06em 0.12em 0 0;
  color: var(--mpg-blue);
}

.fil__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.7rem;
  margin: 0;
  font-size: var(--step--2);
  color: var(--text-muted);
}

/* Le fil : des filets, pas des cartes */
.fil { border-top: 1px solid var(--rule); }
.fil__item { border-bottom: 1px solid var(--rule); }
.fil__item[hidden] { display: none; }

.fil__lien {
  display: grid;
  grid-template-columns: clamp(120px, 16vw, 210px) minmax(0, 1fr);
  gap: clamp(1rem, 2.6vw, 2.2rem);
  align-items: center;
  padding: clamp(1.1rem, 2.2vw, 1.7rem) 0;
}
@media (max-width: 620px) {
  .fil__lien { grid-template-columns: 92px minmax(0, 1fr); gap: 1rem; align-items: start; }
}

.fil__media {
  border-radius: var(--radius-sm);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--bg-sunk);
}
.fil__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(var(--cadre-zoom, 1)); }

.fil__corps { display: flex; flex-direction: column; gap: 0.5rem; }
.fil__corps h3 { margin: 0; max-width: 30ch; }
.fil__corps p.muted { font-size: var(--step--1); max-width: 62ch; }
@media (max-width: 620px) {
  .fil__corps h3 { font-size: var(--step-0); }
  .fil__corps p.muted { display: none; }
}

/* L'etat du texte est affiche, pas masque */
.fil__etat {
  align-self: flex-start;
  margin: 0.2rem 0 0;
  padding: 0.3em 0.8em;
  border-radius: var(--pill);
  border: 1px dashed var(--sand-300);
  font-size: var(--step--2);
  color: var(--stone-600);
}

.fil__avis {
  margin-top: 2rem;
  padding: 1.1rem 1.3rem;
  border-radius: var(--radius-sm);
  background: var(--bg-sunk);
  border: 1px solid var(--rule);
  font-size: var(--step--1);
  color: var(--text-muted);
  max-width: 66ch;
}

/* --- 7. Derniers controles sous la hauteur de doigt -----------------------
   Le fil d'Ariane a 18 px, les bascules de vue a 36, et le curseur du
   simulateur a 4 : c'etait la piste elle-meme qui portait le decor. On la
   deplace sur le pseudo-element et on rend a l'element sa hauteur utile,
   sans rien changer au dessin. */
@media (max-width: 700px) {
  .crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
  .crumbs { margin-bottom: 0.9rem; }

  .villa-hud button,
  .carte-vues button { min-height: 44px; }

  input[type='range'] {
    height: 44px;
    background: transparent;
    border: 0;
    border-radius: 0;
  }
  /* Les deux pistes restent separees : un navigateur qui ne connait pas le
     prefixe de l'autre jetterait la regle entiere. */
  input[type='range']::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: var(--pill);
    background: var(--bg-sunk);
    border: 1px solid var(--rule);
  }
  input[type='range']::-moz-range-track {
    height: 4px;
    border-radius: var(--pill);
    background: var(--bg-sunk);
    border: 1px solid var(--rule);
  }
  input[type='range']::-webkit-slider-thumb { margin-top: -10px; }
}

/* --- 8. En-tete mobile : deux boutons, un seul registre -------------------
   Le burger a perdu son anneau. La loupe posee juste a cote gardait le
   sien, plus un aplat clair qui tranchait sur la photographie du hero :
   deux commandes voisines, deux traitements. Elles redeviennent de simples
   pictogrammes de la couleur du texte, la ou le burger se montre. */
@media (max-width: 1080px) {
  .header .chercher {
    width: 44px; height: 44px;
    padding: 0;
    justify-content: center;
    background: none;
    border: 0;
    color: inherit;
  }
  .header .chercher:hover {
    background: color-mix(in srgb, currentColor 10%, transparent);
    border-radius: 50%;
    color: inherit;
  }
  .header .chercher svg { width: 1.1rem; height: 1.1rem; }

  /* Dans le tiroir la place ne manque pas, et le libelle doit revenir : il
     etait le seul nom de ce bouton, qui n'a pas d'aria-label. Masque, il
     laissait une commande sans nom du tout pour un lecteur d'ecran. */
  .drawer .chercher span { display: inline; }
  .drawer .chercher { padding: 0.62rem 1.05rem; }
}

/* --- 9. La villa type sur telephone --------------------------------------
   Cinq boutons flottants sur une scene de 16/9, soit 200 px de haut a
   375 px de large, la recouvraient entierement : on ne voyait plus la
   villa. Le cadre se redresse, les cadrages passent sur une seule rangee
   qui se balaye, et la bascule jour/nuit se pose dessous. Le HUD reste
   dans la scene, sinon il disparaitrait en plein ecran. */
@media (max-width: 700px) {
  .villa-scene { aspect-ratio: 4 / 5; }

  .villa-hud {
    flex-direction: column;
    align-items: stretch;
    gap: 0.45rem;
  }
  .villa-vues {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .villa-vues::-webkit-scrollbar { display: none; }
  .villa-vues button { flex: none; scroll-snap-align: start; }
  .villa-hud button { min-height: 44px; }
  #villa-nuit { align-self: flex-start; }

  /* En plein ecran la scene reprend toute la hauteur disponible */
  .villa-scene.est-agrandie { aspect-ratio: auto; }
}