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

/* ==========================================================================
   Accueil : l'ouverture
   La photographie en bandeau pleine largeur, puis le titre a gauche et,
   a droite, le propos, les deux actions et les faits pratiques. Aucun
   texte n'est pose sur l'image : ni voile, ni degrade a justifier.
   ========================================================================== */

.ouvre { padding-top: var(--header-h); }
.ouvre__photo {
  margin: 0;
  height: clamp(260px, 40vw, 580px);
  background: var(--bone-200);
  overflow: hidden;
}
.ouvre__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }

.ouvre__grille {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 5rem);
  padding-block: clamp(2.5rem, 4.5vw, 4rem) clamp(3rem, 5vw, 4.5rem);
  border-bottom: 1px solid var(--rule);
}
.ouvre__titre {
  font-size: clamp(2.6rem, 1.5rem + 3.9vw, 5rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
}
.ouvre__chapeau { font-size: var(--step-0); line-height: 1.65; color: var(--text-muted); }
.ouvre__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem 1.75rem; margin-top: 1.75rem; }
.ouvre__faits {
  margin: 1.75rem 0 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.4rem 1.5rem;
  font-size: var(--step--1);
}
.ouvre__faits > div { display: contents; }
.ouvre__faits dt { font-weight: 600; color: var(--text); }
.ouvre__faits dd { margin: 0; color: var(--text-muted); }
.ouvre__faits a { color: var(--text); text-decoration: underline; text-decoration-color: var(--sand-300); text-underline-offset: .25em; }
.ouvre__faits a:hover { text-decoration-color: currentColor; }

@media (max-width: 1023px) {
  .ouvre__grille { grid-template-columns: 1fr; gap: 1.25rem; }
}

/* ==========================================================================
   Fond de section
   « band » etait un bandeau blanc a filets pour le texte defilant. Il ne
   reste qu'un fond, un gris a peine teinte de bleu, pour rythmer la page.
   ========================================================================== */

.band,
.section--sunk { background: var(--bg-sunk); }

/* Tete de section : le titre, puis sa phrase. Remplace l'etiquette
   « NOS MÉTIERS » posee au-dessus de chaque titre de l'ancienne version. */
.tete-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem var(--gutter);
  align-items: end;
  margin-bottom: clamp(1.75rem, 3.5vw, 3rem);
}
.tete-section h2 { font-size: var(--step-5); margin: 0; }
.tete-section p { max-width: 52ch; color: var(--text-muted); }
.tete-section--lien { align-items: baseline; }
.tete-section--lien .link { justify-self: end; }
@media (max-width: 860px) {
  .tete-section { grid-template-columns: 1fr; }
  .tete-section--lien .link { justify-self: start; }
}

/* ==========================================================================
   Qualification, sur l'accueil
   ========================================================================== */

.ouvre + .qualif-zone { margin-top: 0; padding-top: clamp(2.5rem, 4.5vw, 4rem); }
.qualif__titre { font-family: var(--font-display); font-weight: 400; font-size: var(--step-3); letter-spacing: -0.01em; max-width: none; }
.qualif__pied { max-width: none; }

/* ==========================================================================
   Les Domaines, en direct
   ========================================================================== */

.dd__grille {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.dd__texte h2 { font-size: var(--step-5); }
.dd__chapeau { margin-top: 1rem; font-size: var(--step-0); color: var(--text-muted); line-height: 1.65; }

.dd__chiffres {
  margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--encre);
}
.dd__chiffre { padding: 1rem 1rem 1rem 0; border-bottom: 1px solid var(--rule); }
.dd__chiffre:nth-child(even) { padding-left: 1.25rem; border-left: 1px solid var(--rule); }
.dd__chiffre dt { font-size: var(--step--2); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-600); }
.dd__chiffre dd {
  margin: 0.35rem 0 0;
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.2;
  font-variant-numeric: lining-nums;
  white-space: nowrap;
}
.dd__chiffre dd .num { font-family: inherit; font-weight: 400; letter-spacing: 0; }

.dd__source { margin-top: 0.7rem; font-size: var(--step--2); color: var(--ink-600); }
.dd__actions { display: flex; flex-wrap: wrap; gap: 0.75rem 1.75rem; align-items: center; margin-top: clamp(1.5rem, 3vw, 2.25rem); }

.dd__plan { margin: 0; }
.dd__cadre {
  position: relative;
  background: #fff;
  border: 1px solid var(--rule);
  padding: clamp(0.75rem, 2.2vw, 1.75rem);
}
.dd__cadre svg { width: 100%; height: auto; overflow: visible; }

.pa-lot { cursor: pointer; outline: none; }
.pa-lot rect { fill: #ECEEF0; stroke: #fff; stroke-width: 0.6; transition: fill var(--dur-fast) var(--ease-out); }
.pa-lot--libre rect { fill: #DFEBDD; }
.pa-lot--option rect { fill: #EFE6D2; }
.pa-lot text {
  font-family: var(--font-sans);
  font-size: 3.2px;
  font-weight: 500;
  text-anchor: middle;
  fill: #9BA4AB;
  pointer-events: none;
}
.pa-lot--libre text { fill: #274F25; font-weight: 600; }
.pa-lot--option text { fill: #6B5420; }
.pa-lot:hover rect, .pa-lot:focus-visible rect { stroke: var(--encre); stroke-width: 0.8; }
.pa-lot--libre:hover rect { fill: #CFE2CC; }

.dd__bulle {
  position: absolute;
  top: 0.75rem; right: 0.75rem;
  margin: 0;
  max-width: none;
  display: flex; flex-direction: column; gap: 0.1rem;
  padding: 0.55rem 0.8rem;
  background: #fff;
  border: 1px solid var(--encre);
  font-size: var(--step--1);
  pointer-events: none;
}
.dd__bulle[hidden] { display: none; }
.dd__bulle b { font-weight: 600; }
.dd__bulle span { color: var(--text-muted); }

.dd__legende {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.5rem 1.25rem;
  margin-top: 0.85rem;
  font-size: var(--step--1);
  color: var(--text-muted);
}
.dd__cle { display: inline-flex; align-items: center; gap: 0.45rem; }
.dd__cle::before { content: ''; width: 11px; height: 11px; background: #ECEEF0; border: 1px solid #D5DADE; }
.dd__cle--libre::before { background: #DFEBDD; border-color: #B9D3B6; }
.dd__cle--option::before { background: #EFE6D2; border-color: #DCCDA8; }
.dd__note { margin-left: auto; }
@media (hover: none) { .dd__note { display: none; } }

@media (max-width: 1023px) {
  .dd__grille { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .pa-lot text { display: none; }
  .dd__note { display: none; }
}
@media (max-width: 420px) {
  .dd__chiffres { grid-template-columns: 1fr; }
  .dd__chiffre:nth-child(even) { padding-left: 0; border-left: 0; }
}

/* ==========================================================================
   Les metiers : un sommaire en deux colonnes
   ========================================================================== */

.metiers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(2rem, 5vw, 4.5rem);
  border-top: 1px solid var(--encre);
}
.metier {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: 0.35rem 1.5rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.metier__nom { font-family: var(--font-display); font-size: var(--step-1); line-height: 1.25; }
.metier__quoi { color: var(--text-muted); font-size: var(--step--1); line-height: 1.55; }
.metier:hover .metier__nom { color: var(--mpg-blue); }
@media (max-width: 1100px) { .metier { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .metiers { grid-template-columns: 1fr; } }

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

.diaspora-bloc__grille {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.diaspora-bloc h2 { font-size: var(--step-5); }
.diaspora-bloc h2 + p { margin-top: 1rem; }
.heure-dakar {
  margin-top: 1.75rem;
  display: flex; align-items: baseline; gap: 0.6rem;
  font-size: var(--step--1);
  color: var(--text-muted);
}
.heure-dakar b {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-4);
  color: var(--text);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -0.01em;
}

.diaspora-bloc__liste { border-top: 1px solid var(--encre); }
.diaspora-bloc__liste li {
  display: grid;
  grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
  gap: 0.3rem 1.5rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--rule);
  color: var(--text-muted);
  font-size: var(--step--1);
  line-height: 1.55;
  align-items: baseline;
}
.diaspora-bloc__liste b { color: var(--text); font-weight: 600; font-size: var(--step-0); }
@media (max-width: 1023px) { .diaspora-bloc__grille { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .diaspora-bloc__liste li { grid-template-columns: 1fr; } }

/* ==========================================================================
   Zones
   ========================================================================== */

.zones-liste {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  border-top: 1px solid var(--encre);
}
.zones-liste > div { padding: 1.1rem 1.25rem 1.1rem 0; }
.zones-liste > div + div { padding-left: 1.25rem; border-left: 1px solid var(--rule); }
.zones-liste dt { font-family: var(--font-display); font-size: var(--step-2); }
.zones-liste dd { margin: 0.4rem 0 0; color: var(--text-muted); font-size: var(--step--1); line-height: 1.55; }
@media (max-width: 860px) {
  .zones-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zones-liste > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .zones-liste > div:nth-child(n+3) { border-top: 1px solid var(--rule); }
}
@media (max-width: 480px) {
  .zones-liste { grid-template-columns: 1fr; }
  .zones-liste > div, .zones-liste > div + div { padding-left: 0; border-left: 0; }
  .zones-liste > div + div { border-top: 1px solid var(--rule); }
}

/* ==========================================================================
   Actualites : une liste de titres, sans vignettes generees
   ========================================================================== */

.actus {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--encre);
}
.actus__item + .actus__item { border-left: 1px solid var(--rule); }
.actus__lien { display: flex; flex-direction: column; gap: 0.75rem; height: 100%; padding: 1.35rem 1.5rem 1.5rem 0; }
.actus__item + .actus__item .actus__lien { padding-left: 1.5rem; }
.actus__meta { display: flex; gap: 0.75rem; align-items: center; font-size: var(--step--2); color: var(--text-muted); max-width: none; }
.actus__rubrique { font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-lisible); }
.actus__titre { font-family: var(--font-display); font-size: var(--step-2); line-height: 1.2; font-weight: 400; letter-spacing: -0.005em; }
.actus__chapeau { font-size: var(--step--1); color: var(--text-muted); line-height: 1.55; }
.actus__lien:hover .actus__titre { color: var(--mpg-blue); }
@media (max-width: 860px) {
  .actus { grid-template-columns: 1fr; }
  .actus__item + .actus__item { border-left: 0; border-top: 1px solid var(--rule); }
  .actus__lien, .actus__item + .actus__item .actus__lien { padding: 1.2rem 0; }
}

/* ==========================================================================
   Nous joindre : la bande de contact en fin de page
   Sur le gris des sections, avec les cercles de la charte en filigrane.
   ========================================================================== */

.joindre {
  position: relative;
  overflow: hidden;
  background: var(--bg-sunk);
  border-top: 1px solid var(--rule);
  padding-block: clamp(3.25rem, 6vw, 5.5rem);
}
.joindre__arcs {
  width: clamp(320px, 40vw, 600px);
  right: calc(clamp(320px, 40vw, 600px) * -0.3);
  top: 50%;
  transform: translateY(-50%);
  color: rgba(14, 33, 48, .07);
}
.joindre__grille {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.joindre__tete h2 { font-size: var(--step-5); }
.joindre__tete p { margin: 1rem 0 1.75rem; color: var(--text-muted); font-size: var(--step-0); line-height: 1.65; max-width: 38ch; }
.joindre__voies {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--encre);
}
.joindre__voies > div { padding: 1rem 1rem 1rem 0; border-bottom: 1px solid var(--rule); }
.joindre__voies > div:nth-child(even) { padding-left: 1.25rem; border-left: 1px solid var(--rule); }
.joindre__voies dt { font-size: var(--step--2); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-600); }
.joindre__voies dd { margin: 0.4rem 0 0; font-size: var(--step-0); line-height: 1.5; }
.joindre__voies a { text-decoration: underline; text-decoration-color: var(--sand-300); text-underline-offset: .25em; }
.joindre__voies a:hover { color: var(--mpg-blue); text-decoration-color: currentColor; }
@media (max-width: 1023px) { .joindre__grille { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .joindre__voies { grid-template-columns: 1fr; }
  .joindre__voies > div:nth-child(even) { padding-left: 0; border-left: 0; }
}

/* ==========================================================================
   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; } }

/* ==========================================================================
   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-family: var(--font-display); font-size: var(--step-4); color: var(--encre); 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; }
}

/* ==========================================================================
   En-tête de page interne
   Sur papier : le fil d'Ariane, le titre, une phrase, un filet.
   ========================================================================== */

.page-head__inner { position: relative; z-index: 1; }
.page-head__titre {
  font-size: var(--step-7);
  letter-spacing: -0.02em;
  line-height: 1.02;
  max-width: 16ch;
}
.page-head__chapeau { color: var(--text-muted); margin-top: 1.25rem; max-width: 56ch; }
.page-head--court .page-head__titre { font-size: var(--step-6); }


/* ==========================================================================
   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: 10px; height: 1px;
  background: var(--encre);
  flex: none; margin-top: 0.8em;
}
@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; }
}

/* Regles : un terme, une phrase, un filet */
.regles { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 5vw, 4.5rem); border-top: 1px solid var(--encre); }
.regles > div { padding: 1.15rem 0; border-bottom: 1px solid var(--rule); }
.regles dt { font-family: var(--font-display); font-size: var(--step-2); line-height: 1.2; }
.regles dd { margin: 0.45rem 0 0; color: var(--text-muted); font-size: var(--step--1); line-height: 1.6; max-width: 46ch; }
@media (max-width: 720px) { .regles { grid-template-columns: 1fr; } }

.regles--une { grid-template-columns: 1fr; }
.regles--une > div { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 0.3rem 1.5rem; align-items: baseline; }
.regles--une dt { font-size: var(--step-1); }
.regles--une dd { margin: 0; }
@media (max-width: 560px) { .regles--une > div { grid-template-columns: 1fr; } }

/* Listes a tirets fins : ce que comprend un programme, une zone */
.ticks { display: flex; flex-direction: column; gap: 0.6rem; font-size: var(--step--1); color: var(--text-muted); }
.ticks li { display: flex; align-items: flex-start; gap: 0.75rem; }
.ticks li::before { content: ''; width: 10px; height: 1px; background: currentColor; flex: none; margin-top: 0.8em; }
.ticks svg { display: none; }

/* 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: 9px; height: 9px; border-radius: 50%;
  background: var(--encre);
  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(--stone-500); 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 {
  min-height: 40px;
  padding: 0.55em 1.1em;
  border-radius: 0;
  border: 1px solid var(--rule);
  font-size: var(--step--1);
  font-weight: 500;
  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; } }

/* Une fiche de projet sans photographie : l'etat, le lieu, le titre, la
   mission. Un filet d'encre en tete, pas de cadre. */
.fiche-projet { border: 0; border-top: 1px solid var(--encre); border-radius: 0; background: transparent; }
.fiche-projet .card__body { padding: 1.1rem 0 1.5rem; }
.fiche-projet:hover { border-top-color: var(--encre); }
.fiche-projet__titre { font-family: var(--font-display); font-weight: 400; font-size: var(--step-3); line-height: 1.15; letter-spacing: -0.01em; }
.fiche-projet .card__body > .muted { font-size: var(--step--1); line-height: 1.6; }
.fiche-projet .card__media { margin-bottom: 0.25rem; }

/* 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(--encre); border-color: var(--encre); color: #fff; }
#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: #fff;
}

.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: #fff;
}
.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.8; font-style: italic; }
#simu-echeancier .eyebrow { color: rgba(255, 255, 255, .72); }

/* 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-blue); outline-offset: 4px; }

/* ==========================================================================
   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(--encre); }
.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(--encre); 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(--encre);
  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: 1fr;
  align-items: baseline;
  gap: 0.9rem;
  padding: 0.9rem 0.9rem 0.9rem 0;
  text-align: left;
  border-radius: 0;
  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(--encre);
  color: #fff;
  border-color: var(--encre);
  padding-left: 1rem;
}
.selecteur__num {
  font-family: var(--font-display);
  font-size: var(--step--1);
  opacity: 0.55;
  font-variant-numeric: tabular-nums;
}
.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: 0;
    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: 1.1rem; padding-top: 0.2rem; }
.selecteur__titre { font-size: var(--step-5); }
.selecteur__corps > .muted { font-size: var(--step-0); line-height: 1.7; max-width: 60ch; }
.selecteur__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; margin-top: 0.6rem; }
.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: #DCE3E8;
  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: 0;
  border: 1px solid #fff;
  background: #fff;
  color: var(--encre);
  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(--encre); }
.villa-hud button.is-active { background: var(--encre); border-color: var(--encre); color: #fff; 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 cote a cote, chacune sous un filet d'encre.
   Plus de cartes ni de numeros verts : un numero de clause, un titre, une
   phrase, et ce qu'on en garde. */
.steps--bande {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0 clamp(1.25rem, 2.5vw, 2rem);
  border-top: 0;
}
.steps--bande .step {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 1.1rem 0 1.4rem;
  border: 0;
  border-top: 1px solid var(--encre);
  background: transparent;
  position: relative;
}
.steps--bande .step:hover { background: transparent; }
.steps--bande .step__num {
  font-family: var(--font-display);
  font-size: var(--step-4);
  line-height: 1;
  color: var(--encre);
}
.steps--bande .step__tag {
  align-self: flex-start;
  margin-top: auto;
  padding-top: 0.6rem;
}
.steps--bande .step__body p { font-size: var(--step--1); color: var(--text-muted); }

/* 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(--encre); }
.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: var(--rule);
}
.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: 1px solid var(--encre);
  transition: background-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.steps--ligne .step:hover::before { background: var(--encre); }
.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: 1px solid var(--encre);
    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: 0;
  border: 1px solid #fff;
  background: #fff;
  color: var(--encre);
  font-size: var(--step--2);
}
.agrandir:hover { border-color: var(--encre); }
.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: #EEF1F3;
  border: 1px solid var(--rule);
}

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

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

/* 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: #FFFFFF; stroke-width: 13; }
.c-voies .c-petite { stroke: #FFFFFF; stroke-width: 7.5; }

/* La rue du bureau, soulignee */
.c-bureau-voie path {
  fill: none;
  stroke: var(--mpg-blue);
  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: #7C8B96;
  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-blue); opacity: .18; }
.c-repere .c-onde {
  fill: none;
  stroke: var(--mpg-blue);
  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: #FFFFFF; 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; }
}

/* ==========================================================================
   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; }
}

/* ==========================================================================
   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(--ink-600);
  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-blue); transform: rotate(180deg);
}
.acc--registre .acc__btn[aria-expanded='true'] .acc__num { color: var(--mpg-blue); }
.acc--registre .acc__btn[aria-expanded='true'] .acc__q { color: var(--mpg-blue); }

/* 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: 1px solid var(--encre);
  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-blue); }
}

/* ------------------------------------------------------------------ *
 * 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;
}

/* ==========================================================================
   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-blue); 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(--encre); }
.galerie__une:hover img { transform: scale(calc(var(--cadre-zoom, 1) * 1.06)); }
.galerie__une:focus-visible { outline: 2px solid var(--mpg-blue); 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: #fff; border-color: #fff; color: var(--encre); }
.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.
   ========================================================================== */

/* --- 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); }
}

/* --- 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; }
}

/* Deux gris a la suite se lisent comme une seule bande molle : apres une
   section sur fond gris, la bande de contact repasse sur le papier. */
.band + .joindre,
.section--sunk + .joindre { background: #fff; }

/* ==========================================================================
   Sans photographie
   Les images generees retirees, les blocs qui les portaient tiennent sur
   leur texte : l'article a la une passe sur une colonne, la mediatheque
   dit ce qu'elle attend plutot que de montrer une grille vide.
   ========================================================================== */

.une.une--sans-image { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.mediatheque-vide {
  max-width: 640px;
  padding: clamp(2rem, 5vw, 3.5rem) 0;
  border-top: 1px solid var(--encre);
}
.mediatheque-vide[hidden] { display: none; }
.mediatheque-vide h2 { font-size: var(--step-4); margin-bottom: 1rem; }
.mediatheque-vide p { color: var(--text-muted); }
.mediatheque-vide p + p { margin-top: 0.75rem; }
[data-mediatheque-outils][hidden] { display: none; }
/* Un article sans photographie : le texte prend toute la ligne, le
   titre passe en serif de titrage. */
.fil__lien:not(:has(.fil__media)) { grid-template-columns: minmax(0, 1fr); }
.fil__corps h3 { font-family: var(--font-display); font-weight: 400; font-size: var(--step-3); line-height: 1.15; letter-spacing: -0.01em; }
@media (max-width: 620px) {
  .fil__lien:not(:has(.fil__media)) .fil__corps p.muted { display: block; }
}
/* Sans vignettes, le fil se lit sur deux colonnes : une seule laissait la
   moitie droite de la page vide. */
@media (min-width: 900px) {
  .fil:not(:has(.fil__media)) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 5vw, 4.5rem); }
}