/* Studio Lantier : feuille de style de l'agence d'architecture (Lille).
   Matières du métier : la lumière grise de Lille et le papier calque (fonds
   blancs à peine gris), la mine de plomb (texte graphite), la pierre bleue du
   Nord (pied de page), le béton (surfaces secondaires) et le bleu des tirages
   de plans, unique couleur d'action. La brique et le bois restent dans les
   photographies. Antonio pour les titres et les cotes (le trait étroit des
   lettres de plan), Host Grotesk pour le texte. Angles droits, filets fins,
   beaucoup de blanc. */

@font-face {
  font-family: "Antonio";
  src: url("fonts/antonio-latin.woff2") format("woff2");
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Host Grotesk";
  src: url("fonts/host-grotesk-latin.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

/* Position du calque sur la photo (0 % : enroulé en haut, 100 % : déroulé). */
@property --p {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 60%;
}

:root {
  --lumiere: #F5F6F6;
  --papier: #FCFCFB;
  --beton: #E6E8E8;
  --beton-2: #D3D7D9;
  --beton-3: #BCC2C6;
  --mine: #1E2226;
  --mine-2: #4E565D;
  --mine-3: #5F676E;
  --trait: #7A838A;
  --pierre: #26313A;
  --pierre-2: #313E48;
  --pierre-3: #3E4C57;
  --sur-pierre: #E8EDF0;
  --sur-pierre-2: #AEBBC4;
  --tirage: #11458C;
  --tirage-fonce: #0B3670;
  --tirage-clair: #9DBDF2;
  --tirage-voile: #DCE6F4;
  --sur-tirage: #F8FAFD;
  --erreur: #A8271D;
  --erreur-clair: #F2A39B;
  --calque-voile: rgb(246 247 247 / 0.46);

  --font-titre: "Antonio", "Arial Narrow", "Roboto Condensed", sans-serif;
  --font-texte: "Host Grotesk", "Helvetica Neue", Arial, sans-serif;

  --t-hero: clamp(2.75rem, 1.15rem + 5.4vw, 7rem);
  --t-1: clamp(2.6rem, 1.5rem + 4.4vw, 6rem);
  --t-2: clamp(2rem, 1.4rem + 2.5vw, 3.85rem);
  --t-3: clamp(1.25rem, 1.12rem + 0.55vw, 1.6rem);
  --t-chapo: clamp(1.12rem, 1.02rem + 0.42vw, 1.38rem);
  --t-0: 1.0625rem;
  --t--1: 0.9375rem;
  --t-label: 0.78rem;

  --gouttiere: clamp(16px, 4.6vw, 64px);
  --largeur: 1360px;
  --section: clamp(4.25rem, 2.4rem + 6.6vw, 9rem);
  --rayon: 2px;
  --entete-h: 72px;
  --ease-trait: cubic-bezier(0.25, 0.85, 0.2, 1);
  --filet: 1px solid var(--beton-2);
  --filet-fort: 1.5px solid var(--mine);
}

/* ------------------------------------------------------------------ */
/* Base                                                                 */
/* ------------------------------------------------------------------ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--entete-h) + var(--brnsg-barre, 0px) + 20px);
  scrollbar-color: var(--mine-3) var(--beton);
}

body {
  margin: 0;
  background: var(--lumiere);
  color: var(--mine);
  font-family: var(--font-texte);
  font-size: var(--t-0);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-numeric: lining-nums;
}

img,
picture,
video,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

p {
  margin: 0 0 1rem;
  text-wrap: pretty;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 500;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

address {
  font-style: normal;
}

::selection {
  background: var(--tirage);
  color: var(--sur-tirage);
}

a {
  color: var(--tirage);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: color 0.2s, text-decoration-thickness 0.2s;
}

a:hover {
  color: var(--tirage-fonce);
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 3px solid var(--tirage);
  outline-offset: 3px;
}

.pied :focus-visible {
  outline-color: var(--tirage-clair);
}

/* L'attribut hidden gagne toujours, même sur un élément stylé en flex ou grid. */
[hidden] {
  display: none !important;
}

.colonne {
  width: min(100% - 2 * var(--gouttiere), var(--largeur));
  margin-inline: auto;
}

.visuellement-cache {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.lien-evitement {
  position: absolute;
  left: 1rem;
  top: -140px;
  z-index: 10000;
  padding: 0.75rem 1rem;
  background: var(--tirage);
  color: var(--sur-tirage);
  font-weight: 600;
}

.lien-evitement:focus {
  top: calc(var(--brnsg-barre, 0px) + 0.5rem);
  color: var(--sur-tirage);
}

.icone {
  width: 1.1em;
  height: 1.1em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

/* État d'ouverture calculé (horaires.js) : un petit carré devant le texte. */
[data-brnsg-horaires][data-etat]::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 0.5em;
  vertical-align: 0.08em;
  background: var(--trait);
}

[data-brnsg-horaires][data-etat="ouvert"]::before {
  background: var(--tirage);
}

.pied [data-brnsg-horaires][data-etat="ouvert"]::before {
  background: var(--tirage-clair);
}

/* ------------------------------------------------------------------ */
/* Typographie                                                          */
/* ------------------------------------------------------------------ */

.titre-section {
  font-family: var(--font-titre);
  font-size: var(--t-2);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.003em;
  text-wrap: balance;
}

.chapo,
.page-chapo {
  font-size: var(--t-chapo);
  line-height: 1.5;
  color: var(--mine-2);
  max-width: 40em;
}

.sous-titre {
  font-family: var(--font-texte);
  font-size: var(--t-3);
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 1rem;
}

.note {
  font-size: var(--t--1);
  color: var(--mine-3);
  max-width: 48em;
}

.legende-photo {
  font-size: var(--t--1);
  color: var(--mine-3);
  margin-top: 0.9rem;
  max-width: 62em;
}

.legende-photo .lien-fleche {
  margin-left: 0.4rem;
}

.photo-pleine .legende-photo {
  max-width: none;
}

/* ------------------------------------------------------------------ */
/* Boutons et liens                                                     */
/* ------------------------------------------------------------------ */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 48px;
  padding: 0.85rem 1.5rem;
  border: 1.5px solid var(--tirage);
  border-radius: var(--rayon);
  background: var(--tirage);
  color: var(--sur-tirage);
  font-family: var(--font-texte);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.bouton:hover {
  background: var(--tirage-fonce);
  border-color: var(--tirage-fonce);
  color: var(--sur-tirage);
}

.bouton--petit {
  min-height: 42px;
  padding: 0.6rem 1.05rem;
  font-size: 0.94rem;
}

.bouton--large {
  width: 100%;
}

.bouton--contour {
  background: transparent;
  color: var(--tirage);
}

.bouton--contour:hover {
  background: var(--tirage);
  color: var(--sur-tirage);
}

.bouton[aria-busy="true"] {
  cursor: progress;
  opacity: 0.8;
}

.bouton-lien {
  padding: 0;
  border: 0;
  background: none;
  color: var(--tirage);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.22em;
  cursor: pointer;
}

.bouton-lien:hover {
  color: var(--tirage-fonce);
  text-decoration-thickness: 2px;
}

.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--tirage);
}

.lien-fleche span {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}

.lien-fleche:hover span {
  text-decoration-thickness: 2px;
}

.lien-fleche .icone-fleche {
  transition: transform 0.25s var(--ease-trait);
}

.lien-fleche:hover .icone-fleche {
  transform: translateX(4px);
}

.lien-tel {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-titre);
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--mine);
  text-decoration: none;
}

.lien-tel:hover {
  color: var(--tirage);
}

/* ------------------------------------------------------------------ */
/* En-tête                                                              */
/* ------------------------------------------------------------------ */

.entete {
  position: sticky;
  top: var(--brnsg-barre, 0px);
  z-index: 900;
  background: var(--lumiere);
  border-bottom: var(--filet);
  transition: transform 0.35s var(--ease-trait);
}

.entete--cachee {
  transform: translateY(calc(-100% - var(--brnsg-barre, 0px) - 2px));
}

.entete-grille {
  display: flex;
  align-items: center;
  gap: 2rem;
  min-height: var(--entete-h);
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--mine);
  text-decoration: none;
  flex: none;
}

.logo:hover {
  color: var(--mine);
}

.logo-repere {
  width: 34px;
  height: 34px;
}

.logo-repere .logo-plein {
  fill: var(--tirage);
}

.logo-repere .logo-cercle,
.logo-repere .logo-coupe {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
}

.logo-nom {
  font-family: var(--font-titre);
  font-size: 1.42rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1;
}

.nav {
  margin-left: auto;
}

.nav-liste {
  display: flex;
  gap: clamp(1rem, 2.2vw, 2.1rem);
  list-style: none;
}

.nav-liste a {
  position: relative;
  display: inline-block;
  padding: 0.4rem 0;
  color: var(--mine);
  font-weight: 500;
  text-decoration: none;
}

.nav-liste a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--tirage);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease-trait);
}

.nav-liste a:hover::after,
.nav-liste a[aria-current="page"]::after {
  transform: scaleX(1);
}

.nav-liste a[aria-current="page"] {
  color: var(--tirage);
}

.nav-mobile {
  display: none;
}

.entete-actions {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.entete-tel {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  color: var(--mine);
  text-decoration: none;
  line-height: 1.2;
}

.entete-tel-numero {
  font-family: var(--font-titre);
  font-size: 1.22rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.entete-statut {
  font-size: 0.78rem;
  color: var(--mine-3);
  white-space: nowrap;
}

.entete-tel:hover .entete-tel-numero {
  color: var(--tirage);
}

.menu-bouton {
  display: none;
}

@media (max-width: 1080px) {
  .entete-statut {
    display: none;
  }
}

@media (max-width: 960px) {
  :root {
    --entete-h: 64px;
  }

  .entete-grille {
    gap: 1rem;
  }

  .logo-nom {
    font-size: 1.2rem;
  }

  .logo-repere {
    width: 28px;
    height: 28px;
  }

  .entete-actions {
    margin-left: auto;
    gap: 0.75rem;
  }

  .entete-rdv {
    display: none;
  }

  .menu-bouton {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 44px;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--mine);
    border-radius: var(--rayon);
    background: transparent;
    color: var(--mine);
    font: inherit;
    font-weight: 600;
    font-size: 0.92rem;
    cursor: pointer;
  }

  .menu-bouton-traits {
    position: relative;
    width: 18px;
    height: 12px;
  }

  .menu-bouton-traits::before,
  .menu-bouton-traits::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 1.5px;
    background: currentColor;
    transition: transform 0.25s var(--ease-trait), top 0.25s var(--ease-trait);
  }

  .menu-bouton-traits::before {
    top: 1px;
  }

  .menu-bouton-traits::after {
    top: 9px;
  }

  .menu-bouton[aria-expanded="true"] .menu-bouton-traits::before {
    top: 5px;
    transform: rotate(45deg);
  }

  .menu-bouton[aria-expanded="true"] .menu-bouton-traits::after {
    top: 5px;
    transform: rotate(-45deg);
  }

  .nav {
    position: fixed;
    inset: calc(var(--brnsg-barre, 0px) + var(--entete-h)) 0 0 0;
    z-index: 890;
    display: none;
    flex-direction: column;
    gap: 2rem;
    padding: 2rem var(--gouttiere) calc(2rem + var(--brnsg-onglet, 0px));
    margin: 0;
    overflow-y: auto;
    background: var(--lumiere);
    border-top: var(--filet);
  }

  .nav--ouverte {
    display: flex;
  }

  .nav-liste {
    flex-direction: column;
    gap: 0.3rem;
  }

  .nav-liste a {
    font-family: var(--font-titre);
    font-size: 2.3rem;
    font-weight: 500;
    line-height: 1.25;
  }

  .nav-liste a::after {
    bottom: 0.2rem;
  }

  .nav-mobile {
    display: grid;
    gap: 0.75rem;
    padding-top: 1.5rem;
    border-top: var(--filet);
    color: var(--mine-2);
  }

  .nav-mobile .bouton {
    justify-self: start;
  }

  .nav-mobile p {
    margin: 0;
  }

  body.menu-ouvert {
    overflow: hidden;
  }
}

@media (max-width: 420px) {
  .logo-nom {
    font-size: 1.05rem;
    letter-spacing: 0.05em;
  }

  .entete-tel-numero {
    font-size: 1.06rem;
  }

  /* Le mot reste lisible par les lecteurs d'écran : nom accessible du bouton. */
  .menu-bouton-texte {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

@media (max-width: 360px) {
  .logo-nom {
    display: none;
  }
}

/* ------------------------------------------------------------------ */
/* Sections                                                             */
/* ------------------------------------------------------------------ */

.section {
  padding-block: var(--section);
}

.section--serre {
  padding-block: calc(var(--section) * 0.6);
}

.section--beton {
  background: var(--beton);
}

.section-tete {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 1.5rem clamp(2rem, 5vw, 6rem);
  align-items: end;
  padding-top: 1.4rem;
  margin-bottom: clamp(2.5rem, 4.5vw, 4.5rem);
  border-top: var(--filet-fort);
}

.section-tete .chapo {
  margin: 0;
}

.section-tete--large {
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
}

.section-pied {
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

@media (max-width: 860px) {
  .section-tete,
  .section-tete--large {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Page intérieure : grand titre sur le blanc. */
.page-tete {
  padding-block: clamp(3.5rem, 2rem + 6vw, 7.5rem) clamp(2rem, 4vw, 3.5rem);
}

.page-titre {
  font-family: var(--font-titre);
  font-size: var(--t-1);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.005em;
  margin-bottom: 1.25rem;
  text-wrap: balance;
}

.page-chapo {
  max-width: 34em;
}

/* ------------------------------------------------------------------ */
/* Accueil : le titre et le plan                                        */
/* ------------------------------------------------------------------ */

.hero {
  padding-block: clamp(2.5rem, 1rem + 5vw, 6rem) clamp(3rem, 6vw, 6rem);
}

.hero-grille {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(2rem, 5vw, 6.5rem);
  align-items: end;
}

.hero-titre {
  font-family: var(--font-titre);
  font-size: var(--t-hero);
  font-weight: 500;
  line-height: 1.01;
  letter-spacing: -0.008em;
  text-wrap: balance;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.hero-chapo {
  font-size: var(--t-chapo);
  line-height: 1.5;
  color: var(--mine-2);
  max-width: 34em;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
  margin: 2rem 0 0;
}

.hero-faits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin-top: clamp(2rem, 4vw, 3.25rem);
  list-style: none;
  border-top: var(--filet);
}

.hero-faits li {
  padding: 0.85rem 1rem 0.85rem 0;
  border-bottom: var(--filet);
  font-size: var(--t--1);
  color: var(--mine-2);
}

.hero-faits li:nth-child(odd) {
  padding-right: 1.5rem;
}

.hero-faits li:nth-child(even) {
  padding-left: 1.5rem;
  border-left: var(--filet);
}

.hero-planche {
  align-self: stretch;
  display: flex;
  align-items: flex-end;
}

@media (max-width: 960px) {
  .hero-grille {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-planche {
    max-width: 520px;
  }
}

@media (max-width: 520px) {
  .hero-faits {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-faits li:nth-child(even) {
    padding-left: 0;
    border-left: 0;
  }
}

/* ------------------------------------------------------------------ */
/* Planches : le plan dans sa feuille                                   */
/* ------------------------------------------------------------------ */

.planche {
  width: 100%;
  margin: 0;
  padding: clamp(0.9rem, 2.2vw, 1.75rem);
  background: var(--papier);
  border: var(--filet);
}

.planche-feuille,
.planche-defile {
  position: relative;
}

.planche--hero .plan {
  max-height: min(64vh, 600px);
}

.planche-cartouche {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.15rem 1rem;
  margin-top: 1rem;
  padding-top: 0.7rem;
  border-top: var(--filet-fort);
  font-size: var(--t-label);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1.45;
}

.planche-projet {
  font-weight: 700;
}

.planche-vue {
  grid-column: 1;
  color: var(--mine-2);
}

.planche-agence {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: end;
  text-align: right;
  color: var(--mine-2);
}

.planche-agence a {
  color: var(--mine-2);
}

.planche-glisser {
  display: none;
  margin: 0.75rem 0 0;
  font-size: var(--t-label);
  color: var(--mine-3);
}

@media (max-width: 1000px) {
  .planche-defile {
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .planche-defile .plan {
    min-width: var(--plan-min, 0);
  }

  .planche--large .planche-glisser {
    display: block;
  }
}

/* ------------------------------------------------------------------ */
/* Le dessin : traits, pochés, cotes                                    */
/* ------------------------------------------------------------------ */

.plan {
  width: 100%;
  height: auto;
  overflow: visible;
}

.plan .p-mur {
  fill: none;
  stroke-linejoin: miter;
}

.plan .p-mur--e {
  stroke: var(--mine);
}

.plan .p-mur--c {
  stroke: var(--tirage);
}

.plan .p-poche--c {
  fill: var(--tirage);
}

.plan .p-hachure {
  stroke: var(--mine);
}

.plan .p-demoli {
  fill: none;
  stroke: var(--mine-3);
}

.plan .p-ouv,
.plan .p-esc {
  fill: none;
  stroke: var(--mine);
}

.plan .p-mob {
  fill: none;
  stroke: var(--mine-3);
}

.plan .p-cache {
  fill: none;
  stroke: var(--mine-2);
}

.plan .p-cote {
  fill: none;
  stroke: var(--mine-2);
}

.plan .p-trames {
  fill: none;
  stroke: var(--trait);
}

.plan .p-trame-bulle {
  fill: var(--papier);
  stroke-dasharray: none;
}

.plan .p-poteau--e {
  fill: var(--mine);
}

.plan .p-poteau--c {
  fill: var(--tirage);
}

.plan text {
  font-family: var(--font-texte);
  fill: var(--mine);
  stroke: none;
}

.plan .p-piece {
  font-weight: 600;
  letter-spacing: 0.06em;
}

.plan .p-surface {
  font-weight: 400;
  letter-spacing: 0;
  fill: var(--mine-2);
}

.plan .p-libre {
  font-weight: 600;
  letter-spacing: 0.18em;
  fill: var(--mine-3);
}

.plan .p-cote-texte,
.plan .p-echelle-texte,
.plan .p-trame-texte {
  font-family: var(--font-titre);
  font-weight: 500;
  fill: var(--mine-2);
}

.plan .p-trame-texte {
  fill: var(--mine);
}

.plan .p-nord-cercle {
  fill: none;
  stroke: var(--mine);
}

.plan .p-nord-fleche {
  fill: var(--mine);
}

.plan .p-nord-contour {
  fill: none;
  stroke: var(--mine);
}

.plan .p-nord-texte {
  font-family: var(--font-titre);
  font-weight: 600;
}

.plan .p-echelle-plein {
  fill: var(--mine);
  stroke: var(--mine);
}

.plan .p-echelle-vide {
  fill: var(--papier);
  stroke: var(--mine);
}

/* Plan de situation : rues tirées d'OpenStreetMap, bords au trait, chaussées blanches. */
.plan--situation .s-bord {
  fill: none;
  stroke: var(--mine-2);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.plan--situation .s-chaussee {
  fill: none;
  stroke: var(--papier);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.plan--situation .s-place {
  fill: var(--papier);
  stroke: var(--mine-2);
}

.plan--situation .s-parc {
  fill: var(--beton);
  stroke: var(--beton-3);
}

.plan--situation .s-parking {
  fill: none;
  stroke: var(--mine-3);
  stroke-dasharray: 4 3;
}

.plan--situation .s-pictogramme {
  fill: var(--mine-2);
}

.plan--situation .s-pictogramme-texte,
.plan--situation .s-metro text:first-of-type {
  font-family: var(--font-titre);
  font-weight: 600;
  fill: var(--papier);
}

.plan--situation .s-metro rect {
  fill: var(--mine);
}

.plan--situation .s-legende-point,
.plan--situation .s-rue {
  font-family: var(--font-texte);
  fill: var(--mine-2);
}

.plan--situation .s-rue {
  font-weight: 500;
}

.plan--situation .s-legende-point {
  font-weight: 600;
  fill: var(--mine);
}

.plan--situation .s-agence rect {
  fill: var(--tirage);
}

.plan--situation .s-agence-cercle {
  fill: none;
  stroke: var(--tirage);
  stroke-width: 2;
}

.plan--situation .s-agence-texte {
  font-family: var(--font-titre);
  font-weight: 600;
  letter-spacing: 0.05em;
  fill: var(--tirage);
}

/* Légende du plan, à côté du dessin. */
.legende {
  display: grid;
  gap: 0.55rem;
  margin: 1.75rem 0;
  list-style: none;
  font-size: var(--t--1);
}

.legende li {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.legende-echantillon {
  width: 36px;
  height: 14px;
  flex: none;
}

.legende--e path {
  stroke: var(--mine);
  stroke-width: 0.8;
}

.legende--e .legende-contour,
.legende--d .legende-contour {
  fill: none;
  stroke: var(--mine);
  stroke-width: 1.2;
}

.legende--d .legende-contour {
  stroke: var(--mine-3);
  stroke-dasharray: 4 2.5;
}

.legende--c rect {
  fill: var(--tirage);
}

/* ------------------------------------------------------------------ */
/* Photographies pleine largeur                                         */
/* ------------------------------------------------------------------ */

.photo-pleine {
  margin: 0;
}

.photo-pleine-cadre {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 8.2;
  background: var(--beton);
}

.photo-pleine-cadre picture,
.photo-pleine-cadre img {
  width: 100%;
  height: 100%;
}

.photo-pleine-cadre img {
  object-fit: cover;
}

.photo-pleine--projet .photo-pleine-cadre {
  aspect-ratio: 16 / 8.6;
}

.photo-pleine--agence .photo-pleine-cadre {
  aspect-ratio: 16 / 7;
}

@media (max-width: 760px) {
  .photo-pleine-cadre,
  .photo-pleine--projet .photo-pleine-cadre,
  .photo-pleine--agence .photo-pleine-cadre {
    aspect-ratio: 4 / 3;
  }
}

.photo-detail {
  margin-block: 0;
  padding-block: calc(var(--section) * 0.4) calc(var(--section) * 0.6);
}

.photo-detail-cadre {
  width: min(100%, 1120px);
  margin-left: auto;
  overflow: hidden;
  background: var(--beton);
}

.photo-detail .legende-photo {
  width: min(100%, 1120px);
  margin-left: auto;
}

/* ------------------------------------------------------------------ */
/* Accueil : projets récents en lignes alternées                        */
/* ------------------------------------------------------------------ */

.projets-lignes {
  display: grid;
  gap: clamp(4rem, 9vw, 8.5rem);
}

.projet-ligne {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1.5rem clamp(1rem, 2vw, 2rem);
  align-items: end;
}

.projet-ligne-image {
  grid-column: 1 / span 7;
  display: block;
  overflow: hidden;
  background: var(--beton);
}

.projet-ligne-image img {
  transition: transform 0.9s var(--ease-trait);
}

.projet-ligne:hover .projet-ligne-image img {
  transform: scale(1.025);
}

.projet-ligne-texte {
  grid-column: 9 / span 4;
}

.projet-ligne--inverse .projet-ligne-image {
  grid-column: 6 / span 7;
  grid-row: 1;
}

.projet-ligne--inverse .projet-ligne-texte {
  grid-column: 1 / span 4;
  grid-row: 1;
}

.projet-ligne-type {
  margin-bottom: 1rem;
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--mine-3);
}

.projet-ligne-titre {
  font-family: var(--font-titre);
  font-size: clamp(1.9rem, 1.4rem + 1.6vw, 3rem);
  font-weight: 500;
  line-height: 1.05;
  margin-bottom: 0.6rem;
  text-wrap: balance;
}

.projet-ligne-titre a {
  color: var(--mine);
  text-decoration: none;
}

.projet-ligne-titre a:hover {
  color: var(--tirage);
}

.projet-ligne-accroche {
  color: var(--mine-2);
}

.projet-ligne-chiffres {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  gap: 0 1.5rem;
  margin: 1.5rem 0;
  padding-block: 0.9rem;
  border-block: var(--filet);
}

.projet-ligne-chiffres dt {
  font-size: var(--t-label);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--mine-3);
}

.projet-ligne-chiffres dd {
  margin: 0;
  font-family: var(--font-titre);
  font-size: 1.3rem;
  font-weight: 500;
}

@media (max-width: 860px) {
  .projet-ligne,
  .projet-ligne--inverse {
    grid-template-columns: minmax(0, 1fr);
  }

  .projet-ligne-image,
  .projet-ligne-texte,
  .projet-ligne--inverse .projet-ligne-image,
  .projet-ligne--inverse .projet-ligne-texte {
    grid-column: 1;
    grid-row: auto;
  }
}

@media (max-width: 420px) {
  .projet-ligne-chiffres {
    grid-template-columns: repeat(2, auto);
    gap: 0.6rem 1.25rem;
  }
}

/* ------------------------------------------------------------------ */
/* Le calque : l'état existant sur papier calque, au-dessus du livré    */
/* ------------------------------------------------------------------ */

.calque {
  margin: 0;
}

.calque-cadre {
  position: relative;
  background: var(--beton-2);
}

.calque img {
  width: 100%;
  height: auto;
}

.calque-etiquette {
  margin: 0;
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.calque-annotation {
  display: block;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: none;
  color: var(--mine-2);
}

/* Sans JavaScript : les deux photographies se suivent. */
.no-js .calque-cadre {
  display: grid;
  gap: 1rem;
  aspect-ratio: auto !important;
  background: none;
}

.no-js .calque-feuille {
  order: -1;
}

.no-js .calque-etiquette {
  padding: 0.6rem 0 0;
}

.no-js .calque-rouleau,
.no-js .calque-voile,
.no-js .calque-commandes {
  display: none;
}

/* Avec JavaScript : le calque recouvre la photo, du haut jusqu'à --p. */
.js .calque-cadre {
  overflow: hidden;
  isolation: isolate;
}

.js .calque-apres,
.js .calque-feuille,
.js .calque-avant {
  position: absolute;
  inset: 0;
}

.js .calque-apres picture,
.js .calque-avant picture,
.js .calque-apres img,
.js .calque-avant img {
  width: 100%;
  height: 100%;
}

.js .calque-apres img,
.js .calque-avant img {
  object-fit: cover;
}

.js .calque-feuille {
  clip-path: inset(0 0 calc(100% - var(--p)) 0);
}

.js .calque-avant img {
  filter: grayscale(0.5) contrast(0.95) brightness(1.03);
}

.calque-voile {
  position: absolute;
  inset: 0;
  background: var(--calque-voile);
}

.js .calque-etiquette {
  position: absolute;
  left: clamp(0.75rem, 2vw, 1.5rem);
  z-index: 2;
  padding: 0.5rem 0.75rem;
  background: var(--papier);
  border: 1px solid var(--mine);
}

.js .calque-etiquette--avant {
  top: clamp(0.75rem, 2vw, 1.5rem);
}

.js .calque-etiquette--apres {
  bottom: clamp(0.75rem, 2vw, 1.5rem);
}

.calque.est-anime {
  transition: --p 1.15s var(--ease-trait);
}

.calque-rouleau {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--p);
  z-index: 3;
  height: 56px;
  margin-top: -28px;
  cursor: ns-resize;
  touch-action: none;
  outline: none;
}

/* Le rouleau de calque : un tube de papier, ombre portée sur la photo. */
.calque-tube {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 16px;
  transform: translateY(-50%);
  background: linear-gradient(180deg, #E9ECED 0%, #FDFDFD 30%, #F1F3F4 55%, #CDD2D5 85%, #B9C0C4 100%);
  border-top: 1px solid rgb(255 255 255 / 0.9);
  box-shadow: 0 7px 12px -5px rgb(30 34 38 / 0.45);
}

.calque-languette {
  position: absolute;
  left: 50%;
  top: 50%;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.8rem 0.45rem 0.6rem;
  transform: translate(-50%, -50%);
  background: var(--papier);
  border: 1.5px solid var(--mine);
  color: var(--mine);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color 0.2s, color 0.2s;
}

.calque-rouleau:hover .calque-languette,
.calque.est-tire .calque-languette {
  background: var(--tirage);
  border-color: var(--tirage);
  color: var(--sur-tirage);
}

.calque-rouleau:focus-visible .calque-languette {
  outline: 3px solid var(--tirage);
  outline-offset: 3px;
}

.calque-commandes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  margin-top: 1rem;
}

@media (max-width: 560px) {
  .calque-languette span {
    display: none;
  }

  .calque-languette {
    padding: 0.45rem;
  }

  .js .calque-etiquette {
    padding: 0.35rem 0.55rem;
    font-size: 0.7rem;
  }

  .calque-annotation {
    display: none;
  }
}

/* ------------------------------------------------------------------ */
/* Accueil : agence, honoraires                                         */
/* ------------------------------------------------------------------ */

.duo {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 5.5rem);
  align-items: center;
}

.duo-image {
  overflow: hidden;
  background: var(--beton);
}

.duo-texte .titre-section {
  margin-bottom: 1.5rem;
}

.duo-texte p {
  color: var(--mine-2);
}

@media (max-width: 860px) {
  .duo {
    grid-template-columns: minmax(0, 1fr);
  }
}

.honoraires-accueil {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: end;
}

.honoraires-accueil-texte .titre-section {
  margin-bottom: 1.5rem;
}

.honoraires-accueil-texte p {
  color: var(--mine-2);
  max-width: 36em;
}

.taux {
  margin: 0;
  border-top: var(--filet-fort);
}

.taux-ligne {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--beton-3);
}

.taux-ligne dt {
  color: var(--mine-2);
}

.taux-ligne dd {
  margin: 0;
  font-family: var(--font-titre);
  font-size: clamp(2rem, 1.5rem + 1.6vw, 3rem);
  font-weight: 500;
  line-height: 1;
  color: var(--tirage);
}

@media (max-width: 860px) {
  .honoraires-accueil {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ------------------------------------------------------------------ */
/* Avis au format Google                                                */
/* ------------------------------------------------------------------ */

.avis-entete {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 1.5rem 3rem;
  padding-top: 1.4rem;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
  border-top: var(--filet-fort);
}

.avis-synthese {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0;
}

.avis-chiffre {
  font-family: var(--font-titre);
  font-size: clamp(3.2rem, 2.4rem + 3vw, 5rem);
  font-weight: 500;
  line-height: 0.9;
}

.avis-libelle {
  font-size: var(--t--1);
  color: var(--mine-2);
  line-height: 1.4;
}

.avis-liste {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 0 clamp(2rem, 5vw, 5rem);
  list-style: none;
}

.avis-carte {
  padding-block: 1.5rem;
  border-bottom: var(--filet);
}

.avis-carte:first-child {
  grid-row: span 2;
  padding-top: 0.5rem;
  border-bottom: 0;
}

.avis-carte:first-child .avis-texte p {
  font-family: var(--font-titre);
  font-size: clamp(1.7rem, 1.25rem + 1.6vw, 2.6rem);
  font-weight: 400;
  line-height: 1.18;
  color: var(--mine);
}

.avis-carte:nth-child(n + 4) {
  grid-column: 1 / -1;
}

.avis-note-carte {
  margin: 0 0 0.5rem;
  font-family: var(--font-titre);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--tirage);
}

.avis-texte {
  margin: 0;
}

.avis-texte p {
  color: var(--mine-2);
}

.avis-auteur {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.9rem;
  margin: 0;
  font-size: var(--t--1);
  color: var(--mine-3);
}

.avis-nom {
  font-weight: 600;
  color: var(--mine);
}

@media (max-width: 860px) {
  .avis-liste {
    grid-template-columns: minmax(0, 1fr);
  }

  .avis-carte:first-child {
    grid-row: auto;
    border-bottom: var(--filet);
    padding-bottom: 1.5rem;
  }
}

/* ------------------------------------------------------------------ */
/* Appel au premier rendez-vous                                         */
/* ------------------------------------------------------------------ */

.appel {
  background: var(--papier);
  border-top: var(--filet);
}

.appel-grille {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 2rem clamp(2rem, 6vw, 6rem);
  align-items: end;
}

.appel .titre-section {
  font-size: var(--t-1);
  margin-bottom: 1.25rem;
}

.appel-texte {
  font-size: var(--t-chapo);
  color: var(--mine-2);
  max-width: 32em;
  margin: 0;
}

.appel-actions {
  display: grid;
  justify-items: start;
  gap: 0.9rem;
}

.appel-actions p {
  margin: 0;
  font-size: var(--t--1);
  color: var(--mine-3);
}

@media (max-width: 860px) {
  .appel-grille {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ------------------------------------------------------------------ */
/* Pages projet                                                         */
/* ------------------------------------------------------------------ */

.projet-tete {
  padding-block: clamp(2rem, 1rem + 3.5vw, 4.5rem) clamp(2rem, 4vw, 3.5rem);
}

.fil {
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  font-size: var(--t--1);
  color: var(--mine-3);
}

.projet-titre {
  max-width: 14ch;
  margin-bottom: 0.9rem;
}

.projet-sous-titre {
  font-size: var(--t-chapo);
  color: var(--mine-2);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

/* Le cartouche : chiffres clés comme le cartouche d'une planche. */
.cartouche {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin: 0;
  border: var(--filet-fort);
  background: var(--papier);
}

.cartouche-case {
  padding: 0.9rem 1rem 1rem;
  border-right: 1px solid var(--mine);
  min-width: 0;
}

.cartouche-case:nth-child(6n) {
  border-right: 0;
}

.cartouche-case--large {
  grid-column: span 1;
}

.cartouche dt {
  margin-bottom: 0.45rem;
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mine-3);
}

.cartouche dd {
  margin: 0;
}

.cartouche-valeur {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-titre);
  font-size: clamp(1.45rem, 1.15rem + 0.9vw, 2.05rem);
  font-weight: 500;
  line-height: 1.1;
}

.cartouche-case--large .cartouche-valeur {
  font-family: var(--font-texte);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
}

.cartouche-vers .icone {
  width: 0.8em;
  height: 0.8em;
  stroke-width: 2;
  color: var(--tirage);
}

.cartouche-note {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.86rem;
  line-height: 1.35;
  color: var(--mine-2);
}

.dpe {
  margin-top: 0.55rem;
}

.dpe-echelle {
  display: flex;
  gap: 2px;
  list-style: none;
}

.dpe-case {
  display: grid;
  place-items: center;
  width: 1.15rem;
  height: 1.15rem;
  border: 1px solid var(--beton-3);
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--mine-3);
}

.dpe-case--avant {
  border: 1.5px dashed var(--mine);
  color: var(--mine);
}

.dpe-case--apres {
  border-color: var(--tirage);
  background: var(--tirage);
  color: var(--sur-tirage);
}

@media (max-width: 1100px) {
  .cartouche {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cartouche-case {
    border-bottom: 1px solid var(--mine);
  }

  .cartouche-case:nth-child(3n) {
    border-right: 0;
  }

  .cartouche-case:nth-child(n + 4) {
    border-bottom: 0;
  }
}

@media (max-width: 620px) {
  .cartouche {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cartouche-case,
  .cartouche-case:nth-child(n + 4) {
    border-right: 1px solid var(--mine);
    border-bottom: 1px solid var(--mine);
  }

  .cartouche-case:nth-child(2n) {
    border-right: 0;
  }

  .cartouche-case:nth-child(n + 5) {
    border-bottom: 0;
  }
}

.projet-intro {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: 2rem clamp(2rem, 7vw, 8rem);
  align-items: start;
}

.projet-accroche {
  font-family: var(--font-titre);
  font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.45rem);
  font-weight: 400;
  line-height: 1.2;
  color: var(--mine);
  margin-bottom: 1.75rem;
}

.projet-intro-texte p:not(.projet-accroche) {
  color: var(--mine-2);
  max-width: 38em;
}

.projet-fiche {
  margin: 0;
  border-top: var(--filet-fort);
}

.projet-fiche div {
  padding: 0.9rem 0;
  border-bottom: var(--filet);
}

.projet-fiche dt {
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mine-3);
}

.projet-fiche dd {
  margin: 0.2rem 0 0;
}

@media (max-width: 860px) {
  .projet-intro {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Le plan du projet, à côté de sa légende. */
.projet-plan-grille {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: 2.5rem clamp(2rem, 6vw, 6rem);
  align-items: start;
}

.projet-plan-texte {
  position: sticky;
  top: calc(var(--brnsg-barre, 0px) + var(--entete-h) + 2rem);
}

.projet-plan-texte .titre-section {
  margin-bottom: 1.25rem;
}

.projet-plan-texte > p {
  color: var(--mine-2);
}

.projet-plan-grille--large {
  grid-template-columns: minmax(0, 1fr);
}

.projet-plan-grille--large .projet-plan-texte {
  position: static;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr);
  gap: 1.5rem clamp(2rem, 4vw, 4rem);
  align-items: start;
}

.projet-plan-grille--large .legende {
  margin: 0;
}

.surfaces {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t--1);
}

.surfaces-titre {
  padding-bottom: 0.5rem;
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: left;
  text-transform: uppercase;
  color: var(--mine-3);
}

.surfaces th,
.surfaces td {
  padding: 0.5rem 0;
  border-top: var(--filet);
  font-weight: 400;
  text-align: left;
  vertical-align: top;
}

.surfaces td {
  padding-left: 1rem;
  font-family: var(--font-titre);
  font-size: 1.08rem;
  font-weight: 500;
  text-align: right;
  white-space: nowrap;
}

@media (max-width: 1000px) {
  .projet-plan-grille,
  .projet-plan-grille--large .projet-plan-texte {
    grid-template-columns: minmax(0, 1fr);
  }

  .projet-plan-texte {
    position: static;
  }

}

/* Sections de texte du projet : titre à gauche, texte à droite. */
.projet-sections {
  display: grid;
  gap: 0;
}

.projet-section {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: 0.75rem clamp(2rem, 6vw, 6rem);
  padding-block: 1.75rem;
  border-top: var(--filet);
}

.projet-section:last-child {
  border-bottom: var(--filet);
}

.projet-section-titre {
  font-family: var(--font-titre);
  font-size: clamp(1.45rem, 1.2rem + 0.8vw, 2rem);
  font-weight: 500;
  line-height: 1.1;
}

.projet-section p {
  margin: 0;
  color: var(--mine-2);
  max-width: 40em;
}

@media (max-width: 760px) {
  .projet-section {
    grid-template-columns: minmax(0, 1fr);
  }
}

.projet-deux {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3rem clamp(2rem, 6vw, 6rem);
  align-items: start;
}

.projet-deux .titre-section {
  margin-bottom: 1.75rem;
}

@media (max-width: 860px) {
  .projet-deux {
    grid-template-columns: minmax(0, 1fr);
  }
}

.chronologie {
  list-style: none;
  border-left: 1.5px solid var(--mine);
}

.chronologie li {
  position: relative;
  padding: 0 0 1.4rem 1.5rem;
}

.chronologie li::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 0.55em;
  width: 8px;
  height: 8px;
  background: var(--lumiere);
  border: 1.5px solid var(--mine);
}

.chronologie li:last-child::before {
  background: var(--tirage);
  border-color: var(--tirage);
}

.chronologie p {
  margin: 0;
  color: var(--mine-2);
}

.chronologie .chronologie-date {
  font-family: var(--font-titre);
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--mine);
}

.materiaux {
  margin: 0;
  border-top: var(--filet-fort);
}

.materiaux div {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 0.25rem 1.5rem;
  padding: 0.9rem 0;
  border-bottom: var(--filet);
}

.materiaux dt {
  font-weight: 600;
}

.materiaux dd {
  margin: 0;
  color: var(--mine-2);
}

@media (max-width: 480px) {
  .materiaux div {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Budget lot par lot, avec une barre proportionnelle. */
.projet-budget .titre-section {
  margin-bottom: 2rem;
}

.tableau-enveloppe {
  overflow-x: auto;
}

.tableau {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.tableau th,
.tableau td {
  padding: 0.85rem 1rem 0.85rem 0;
  border-bottom: var(--filet);
  text-align: left;
  vertical-align: top;
}

.tableau thead th {
  padding-top: 0;
  border-bottom: var(--filet-fort);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mine-3);
}

.tableau tbody th {
  font-weight: 500;
}

.section--beton .tableau th,
.section--beton .tableau td {
  border-bottom-color: var(--beton-3);
}

.section--beton .tableau thead th {
  border-bottom-color: var(--mine);
}

.budget-montant {
  white-space: nowrap;
  text-align: right !important;
  font-family: var(--font-titre);
  font-size: 1.15rem;
  font-weight: 500;
}

.tableau--budget thead th:nth-child(2) {
  text-align: right;
}

.budget-barre {
  width: 34%;
  vertical-align: middle !important;
}

.budget-barre {
  white-space: nowrap;
}

.budget-trait {
  display: inline-block;
  width: calc(var(--part, 0%) * 0.82);
  height: 8px;
  margin-right: 0.6rem;
  vertical-align: middle;
  background: var(--tirage);
}

.budget-part {
  font-size: var(--t--1);
  color: var(--mine-2);
  vertical-align: middle;
}

.tableau--budget tfoot th,
.tableau--budget tfoot td {
  border-bottom: 0;
  border-top: var(--filet-fort);
  font-weight: 700;
}

@media (max-width: 560px) {
  .budget-barre {
    display: none;
  }
}

.projet-budget .note {
  margin-top: 1.5rem;
}

/* Projet suivant. */
.projet-suivant-lien {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 1.5rem clamp(2rem, 5vw, 5rem);
  align-items: end;
  color: var(--mine);
  text-decoration: none;
  border-top: var(--filet-fort);
  padding-top: 1.5rem;
}

.projet-suivant-image {
  display: block;
  overflow: hidden;
  background: var(--beton);
}

.projet-suivant-image img {
  transition: transform 0.9s var(--ease-trait);
}

.projet-suivant-lien:hover .projet-suivant-image img {
  transform: scale(1.03);
}

.projet-suivant-texte {
  display: grid;
  gap: 0.5rem;
}

.projet-suivant-libelle {
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mine-3);
}

.projet-suivant-titre {
  font-family: var(--font-titre);
  font-size: var(--t-2);
  font-weight: 500;
  line-height: 1.04;
}

.projet-suivant-lien:hover .projet-suivant-titre {
  color: var(--tirage);
}

.projet-suivant-lieu {
  color: var(--mine-2);
}

.projet-suivant-texte .icone-fleche {
  width: 2rem;
  height: 2rem;
  color: var(--tirage);
  transition: transform 0.3s var(--ease-trait);
}

.projet-suivant-lien:hover .icone-fleche {
  transform: translateX(6px);
}

@media (max-width: 760px) {
  .projet-suivant-lien {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ------------------------------------------------------------------ */
/* Index des projets                                                    */
/* ------------------------------------------------------------------ */

.index-projets {
  position: relative;
}

.tableau--index td,
.tableau--index th {
  padding-block: 1.1rem;
}

.tableau--index tbody th {
  font-family: var(--font-titre);
  font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.7rem);
  font-weight: 500;
  line-height: 1.15;
}

.index-lien {
  color: var(--mine);
  text-decoration: none;
}

.index-lien::after {
  content: "";
  position: absolute;
  inset: 0;
}

.tableau--index tbody tr {
  position: relative;
  transition: background-color 0.2s;
}

.tableau--index tbody tr:hover {
  background: var(--papier);
}

.tableau--index tbody tr:hover .index-lien {
  color: var(--tirage);
}

.tableau--index td {
  color: var(--mine-2);
  white-space: nowrap;
}

/* Aperçu qui suit le pointeur (souris seulement). */
.apercus {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 50;
  width: 300px;
  pointer-events: none;
}

.apercu {
  position: absolute;
  inset: 0 auto auto 0;
  width: 300px;
  border: 6px solid var(--papier);
  box-shadow: 0 18px 40px -18px rgb(30 34 38 / 0.5);
}

@media (hover: none), (pointer: coarse), (max-width: 900px) {
  .apercus {
    display: none;
  }
}

.mosaique {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: clamp(120px, 12vw, 190px);
  gap: clamp(0.75rem, 1.6vw, 1.5rem);
}

.mosaique-carte {
  position: relative;
  min-height: 0;
}

.mosaique-carte--grande {
  grid-column: 1 / span 7;
  grid-row: span 3;
}

.mosaique-carte--haute {
  grid-column: 8 / span 5;
  grid-row: span 3;
}

.mosaique-carte--moyenne {
  grid-column: span 5;
  grid-row: span 2;
}

.mosaique-carte--large {
  grid-column: span 7;
  grid-row: span 2;
}

.mosaique-carte:last-child {
  grid-column: 1 / -1;
  grid-row: span 3;
}

.mosaique-lien {
  display: block;
  height: 100%;
  color: var(--mine);
  text-decoration: none;
}

.mosaique-image,
.mosaique-image picture,
.mosaique-image img {
  display: block;
  width: 100%;
  height: 100%;
}

.mosaique-image {
  overflow: hidden;
  background: var(--beton);
}

.mosaique-image img {
  object-fit: cover;
  transition: transform 0.9s var(--ease-trait);
}

.mosaique-lien:hover img {
  transform: scale(1.03);
}

.mosaique-texte {
  position: absolute;
  left: 0;
  bottom: 0;
  display: grid;
  gap: 0.1rem;
  max-width: calc(100% - 1rem);
  padding: 0.75rem 1rem 0.8rem;
  background: var(--papier);
  border-top: var(--filet-fort);
  border-right: var(--filet);
}

.mosaique-titre {
  font-family: var(--font-titre);
  font-size: clamp(1.15rem, 1rem + 0.5vw, 1.5rem);
  font-weight: 500;
  line-height: 1.15;
}

.mosaique-lien:hover .mosaique-titre {
  color: var(--tirage);
}

.mosaique-lieu {
  font-size: 0.86rem;
  color: var(--mine-2);
}

@media (max-width: 760px) {
  .mosaique {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
  }

  .mosaique-carte,
  .mosaique-carte--grande,
  .mosaique-carte--haute,
  .mosaique-carte--moyenne,
  .mosaique-carte--large,
  .mosaique-carte:last-child {
    grid-column: 1;
    grid-row: auto;
  }

  .mosaique-image {
    aspect-ratio: 4 / 3;
  }

  .mosaique-texte {
    position: static;
    max-width: none;
    padding-inline: 0;
    background: none;
    border-right: 0;
    border-top: 0;
  }
}

/* ------------------------------------------------------------------ */
/* Agence                                                               */
/* ------------------------------------------------------------------ */

.projet-deux p {
  color: var(--mine-2);
}

.chiffres {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  border-top: var(--filet-fort);
}

.chiffres div {
  padding: 1.25rem 1rem 1.25rem 0;
  border-bottom: var(--filet);
}

.chiffres div:nth-child(even) {
  padding-left: 1.5rem;
  border-left: var(--filet);
}

.chiffres dt {
  font-family: var(--font-titre);
  font-size: clamp(2.2rem, 1.7rem + 1.8vw, 3.4rem);
  font-weight: 500;
  line-height: 1;
}

.chiffres dd {
  margin: 0.35rem 0 0;
  color: var(--mine-2);
}

.portraits {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2.5rem clamp(1rem, 2.4vw, 2rem);
  list-style: none;
  margin-bottom: 2rem;
}

.portrait-image {
  overflow: hidden;
  aspect-ratio: 4 / 5;
  margin-bottom: 1.1rem;
  background: var(--beton-2);
}

.portrait-image picture,
.portrait-image img {
  width: 100%;
  height: 100%;
}

.portrait-image img {
  object-fit: cover;
}

.portrait-nom {
  font-family: var(--font-titre);
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.1;
}

.portrait-role {
  margin: 0.25rem 0 0.75rem;
  font-size: var(--t--1);
  font-weight: 600;
  color: var(--tirage);
}

.portrait p:last-child {
  font-size: var(--t--1);
  color: var(--mine-2);
}

@media (max-width: 1000px) {
  .portraits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .portraits {
    grid-template-columns: minmax(0, 1fr);
  }
}

.obligations {
  display: grid;
}

.obligation {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 1rem clamp(2rem, 6vw, 6rem);
  padding-block: 2rem;
  border-top: var(--filet);
}

.obligation-texte {
  display: grid;
  gap: 0.9rem;
  align-content: start;
}

.obligation-titre {
  font-family: var(--font-titre);
  font-size: var(--t-3);
  font-weight: 500;
  font-size: clamp(1.5rem, 1.25rem + 0.8vw, 2.05rem);
  line-height: 1.1;
}

.obligation-texte p {
  margin: 0;
  color: var(--mine-2);
}

@media (max-width: 860px) {
  .obligation {
    grid-template-columns: minmax(0, 1fr);
  }

}

/* Citations de textes officiels. */
.citation {
  margin: 0;
  padding: 1.25rem 1.4rem;
  background: var(--papier);
  border-left: 3px solid var(--tirage);
}

.section--beton .citation {
  background: var(--lumiere);
}

.citation + .citation {
  margin-top: 1rem;
}

.citation blockquote {
  margin: 0;
}

.citation blockquote p {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--mine);
}

.citation blockquote p:last-child {
  margin-bottom: 0.75rem;
}

.citation figcaption a,
.source a,
.sources a,
.obligation-lien a {
  font-size: var(--t--1);
  font-weight: 600;
}

.icone-source {
  display: inline-block;
  width: 0.95em;
  height: 0.95em;
  margin-left: 0.3em;
  vertical-align: -0.12em;
}

.citation-titre {
  margin-bottom: 0.75rem;
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mine-3);
}

.source {
  margin-top: 1rem;
  font-size: var(--t--1);
  color: var(--mine-3);
}

.sources {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  margin-top: 2rem;
  list-style: none;
}

/* ------------------------------------------------------------------ */
/* Méthode et honoraires                                                */
/* ------------------------------------------------------------------ */

.phases {
  list-style: none;
  border-top: var(--filet-fort);
}

.phase {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
  gap: 0.5rem clamp(1.5rem, 4vw, 4rem);
  padding-block: 1.6rem;
  border-bottom: var(--filet);
}

.phase-code {
  margin: 0;
  font-family: var(--font-titre);
  font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.8rem);
  font-weight: 500;
  line-height: 1;
  color: var(--tirage);
}

.phase-corps {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.25rem 2rem;
}

.phase-titre {
  font-size: var(--t-3);
  font-weight: 600;
  line-height: 1.25;
}

.phase-duree {
  margin: 0;
  font-size: var(--t--1);
  font-weight: 600;
  color: var(--mine-3);
  text-align: right;
}

.phase-corps p:not(.phase-duree) {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--mine-2);
  max-width: 46em;
}

.phase-corps .phase-livrable {
  margin-top: 0.4rem;
  font-size: var(--t--1);
  color: var(--mine);
}

.phase-livrable::before {
  content: "Vous recevez : ";
  font-weight: 600;
}

@media (max-width: 760px) {
  .phase {
    grid-template-columns: minmax(0, 1fr);
  }

  .phase-corps {
    grid-template-columns: minmax(0, 1fr);
  }

  .phase-duree {
    text-align: left;
  }
}

.honoraires-grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3rem clamp(2rem, 6vw, 6rem);
  align-items: start;
}

.honoraires-grille p {
  color: var(--mine-2);
}

.tableau--taux td {
  font-family: var(--font-titre);
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--tirage);
  text-align: right;
}

.tableau--taux thead th:last-child {
  text-align: right;
}

.exemple {
  margin-top: 1.25rem;
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--tirage);
  background: var(--lumiere);
  color: var(--mine) !important;
}

.honoraires-grille .sous-titre {
  margin-top: 2.25rem;
}

.honoraires-grille > div > .sous-titre:first-child {
  margin-top: 0;
}

.tableau--forfaits td {
  color: var(--mine);
}

.encadre {
  margin-top: 2.25rem;
  padding: 1.5rem;
  border: var(--filet-fort);
  background: var(--lumiere);
}

.encadre .sous-titre {
  margin-top: 0 !important;
}

.encadre .citation {
  margin-top: 1.25rem;
  background: var(--papier);
}

@media (max-width: 960px) {
  .honoraires-grille {
    grid-template-columns: minmax(0, 1fr);
  }
}

.tableau--couts td {
  white-space: nowrap;
  font-family: var(--font-titre);
  font-size: 1.2rem;
  font-weight: 500;
}

/* Estimateur. */
.estimateur-grille {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 2rem clamp(2rem, 6vw, 6rem);
  align-items: start;
}

.estimateur-grille .titre-section {
  margin-bottom: 1.25rem;
}

.estimateur {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  border: var(--filet-fort);
  background: var(--papier);
}

.estimateur-form {
  display: grid;
  gap: 1.1rem;
  align-content: start;
  padding: clamp(1.25rem, 2.5vw, 2rem);
  border-right: 1px solid var(--mine);
}

.estimateur-form .champ-rangee {
  grid-template-columns: minmax(0, 1fr);
}

.estimateur-form .bouton {
  justify-self: start;
}

.estimateur-resultat {
  display: grid;
  gap: 1rem;
  align-content: start;
  padding: clamp(1.25rem, 2.5vw, 2rem);
}

.estimateur-resultat-titre {
  margin: 0;
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mine-3);
}

.estimateur-chiffres {
  margin: 0;
  border-top: var(--filet);
}

.estimateur-chiffres div {
  padding: 0.8rem 0;
  border-bottom: var(--filet);
}

.estimateur-chiffres dt {
  font-size: var(--t--1);
  color: var(--mine-2);
}

.estimateur-chiffres dd {
  margin: 0.15rem 0 0;
  font-family: var(--font-titre);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem);
  font-weight: 500;
  line-height: 1.15;
}

.estimateur-chiffres dd[data-etat="obligatoire"] {
  color: var(--tirage);
}

.estimateur-raison {
  margin: 0;
  color: var(--mine-2);
}

.estimateur-resultat .bouton {
  justify-self: start;
}

.estimateur-resultat .note {
  margin: 0;
}

@media (max-width: 1100px) {
  .estimateur-grille {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 700px) {
  .estimateur {
    grid-template-columns: minmax(0, 1fr);
  }

  .estimateur-form {
    border-right: 0;
    border-bottom: 1px solid var(--mine);
  }
}

/* La règle des 150 m². */
.regle-grille {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 2rem clamp(2rem, 6vw, 6rem);
  align-items: start;
}

.citation--loi {
  padding: clamp(1.25rem, 3vw, 2.25rem);
  border-left-width: 4px;
}

.citation--loi blockquote p {
  font-size: 1.06rem;
}

.liste-traits {
  list-style: none;
  border-top: var(--filet-fort);
}

.liste-traits li {
  padding: 0.9rem 0 0.9rem 1.5rem;
  border-bottom: var(--filet);
  position: relative;
  color: var(--mine-2);
}

.liste-traits li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.55em;
  width: 0.8rem;
  height: 1.5px;
  background: var(--tirage);
}

@media (max-width: 960px) {
  .regle-grille {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Questions fréquentes. */
.faq-grille {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 2rem clamp(2rem, 6vw, 6rem);
  align-items: start;
}

.faq {
  border-top: var(--filet-fort);
}

.faq-item {
  border-bottom: 1px solid var(--beton-3);
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding: 1.15rem 0;
  font-size: 1.08rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.faq-question::-webkit-details-marker {
  display: none;
}

.faq-question:hover {
  color: var(--tirage);
}

.faq-signe {
  position: relative;
  width: 14px;
  height: 14px;
  flex: none;
}

.faq-signe::before,
.faq-signe::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 6px;
  height: 2px;
  background: currentColor;
  transition: transform 0.25s var(--ease-trait);
}

.faq-signe::after {
  transform: rotate(90deg);
}

.faq-item[open] .faq-signe::after {
  transform: rotate(0deg);
}

.faq-reponse p {
  margin: 0 0 1.25rem;
  color: var(--mine-2);
  max-width: 44em;
}

@media (max-width: 860px) {
  .faq-grille {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ------------------------------------------------------------------ */
/* Contact et formulaires                                               */
/* ------------------------------------------------------------------ */

.contact-grille {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: 3rem clamp(2rem, 6vw, 6rem);
  align-items: start;
}

.contact-formulaire .titre-section {
  margin-bottom: 2rem;
}

.contact-infos {
  display: grid;
  gap: 2rem;
  padding-top: 1.4rem;
  border-top: var(--filet-fort);
}

.contact-bloc-titre {
  margin-bottom: 0.75rem;
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mine-3);
}

.contact-bloc p,
.contact-bloc address {
  margin: 0 0 0.5rem;
}

.contact-tel a {
  font-family: var(--font-titre);
  font-size: 2.1rem;
  font-weight: 500;
  color: var(--mine);
  text-decoration: none;
}

.contact-tel a:hover {
  color: var(--tirage);
}

.horaires {
  list-style: none;
  margin: 0.75rem 0;
}

.horaires li {
  display: grid;
  grid-template-columns: minmax(7.5rem, auto) minmax(0, 1fr);
  gap: 0.15rem 1rem;
  padding: 0.45rem 0;
  border-bottom: var(--filet);
  font-size: var(--t--1);
}

.horaires li span:first-child {
  font-weight: 600;
}

.horaires li span:last-child {
  color: var(--mine-2);
}

@media (max-width: 960px) {
  .contact-grille {
    grid-template-columns: minmax(0, 1fr);
  }
}

.formulaire {
  display: grid;
  gap: 1.15rem;
}

.champ {
  display: grid;
  gap: 0.4rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.champ-rangee {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.15rem;
}

@media (max-width: 620px) {
  .champ-rangee {
    grid-template-columns: minmax(0, 1fr);
  }
}

.champ label,
.champ legend {
  font-weight: 600;
  font-size: 0.97rem;
}

.champ legend {
  margin-bottom: 0.4rem;
  padding: 0;
}

.champ-optionnel {
  font-weight: 400;
  color: var(--mine-3);
}

.champ-aide {
  margin: 0;
  font-size: 0.88rem;
  color: var(--mine-3);
}

.champ input[type="text"],
.champ input[type="email"],
.champ input[type="tel"],
.champ input[type="number"],
.champ select,
.champ textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: var(--papier);
  color: var(--mine);
  font: inherit;
  font-size: 1rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.champ textarea {
  resize: vertical;
  min-height: 8rem;
}

.champ input:focus-visible,
.champ select:focus-visible,
.champ textarea:focus-visible {
  outline: none;
  border-color: var(--tirage);
  box-shadow: 0 0 0 3px var(--tirage-voile);
}

.champ [aria-invalid="true"] {
  border-color: var(--erreur);
}

.select-enveloppe {
  position: relative;
}

.select-enveloppe select {
  appearance: none;
  padding-right: 2.5rem;
}

.select-enveloppe::after {
  content: "";
  position: absolute;
  right: 1rem;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--mine);
  border-bottom: 1.5px solid var(--mine);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

.champ-radios {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
}

.champ-radios legend {
  width: 100%;
}

.radio {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 32px;
  font-weight: 400 !important;
  cursor: pointer;
}

.radio input,
.consentement input {
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
  accent-color: var(--tirage);
  flex: none;
}

.consentement {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.92rem;
  color: var(--mine-2);
  cursor: pointer;
}

.consentement input {
  margin-top: 0.2rem;
}

.champ-erreur {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--erreur);
}

.formulaire-erreur:empty {
  display: none;
}

.champ-piege {
  position: absolute !important;
  left: -10000px !important;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.repere {
  margin: -0.25rem 0 0;
  padding: 0.85rem 1rem;
  border-left: 3px solid var(--tirage);
  background: var(--papier);
  font-size: 0.94rem;
  color: var(--mine);
}

.estimation-jointe {
  padding: 1rem 1.15rem;
  border: 1px dashed var(--tirage);
  background: var(--papier);
}

.estimation-jointe-titre {
  margin: 0 0 0.25rem;
  font-weight: 700;
  color: var(--tirage);
}

.estimation-jointe-texte {
  margin: 0;
  font-size: 0.94rem;
  color: var(--mine-2);
}

.formulaire .note {
  margin: 0;
}

.formulaire-succes {
  padding: 2rem;
  border: var(--filet-fort);
  border-left: 4px solid var(--tirage);
  background: var(--papier);
}

.formulaire-succes:focus {
  outline: none;
}

.formulaire-succes-titre {
  font-family: var(--font-titre);
  font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem);
  font-weight: 500;
  line-height: 1.15;
}

/* Accès et plan de situation. */
.situation-grille {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 2.5rem clamp(2rem, 6vw, 6rem);
  align-items: start;
}

.situation-texte .titre-section {
  margin-bottom: 1.75rem;
}

.acces {
  margin: 0 0 1.5rem;
  border-top: var(--filet-fort);
}

.acces div {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 7fr);
  gap: 0.25rem 1.25rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--beton-3);
}

.acces dt {
  font-weight: 600;
}

.acces dd {
  margin: 0;
  color: var(--mine-2);
}

.planche--situation {
  background: var(--papier);
}

@media (max-width: 960px) {
  .situation-grille {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 420px) {
  .acces div {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ------------------------------------------------------------------ */
/* Pages légales et 404                                                 */
/* ------------------------------------------------------------------ */

.texte-legal {
  max-width: 46rem;
}

.texte-legal h2 {
  margin: 2.5rem 0 0.75rem;
  font-family: var(--font-titre);
  font-size: 1.7rem;
  font-weight: 500;
}

.texte-legal h2:first-child {
  margin-top: 0;
}

.texte-legal p,
.texte-legal li {
  color: var(--mine-2);
}

.texte-legal ul {
  margin: 0 0 1rem 1.25rem;
  list-style: square;
}

.page-tete--404 {
  min-height: 62vh;
}

.page-404-grille {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 2.5rem clamp(2rem, 6vw, 6rem);
  align-items: center;
}

.code-erreur {
  font-family: var(--font-titre);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tirage);
}

.appel-404 {
  margin: 0;
}

.appel-404 a {
  font-weight: 600;
}

@media (max-width: 860px) {
  .page-404-grille {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ------------------------------------------------------------------ */
/* Pied de page : la pierre bleue                                       */
/* ------------------------------------------------------------------ */

.pied {
  padding-block: clamp(3.5rem, 7vw, 6rem) 2rem;
  background: var(--pierre);
  color: var(--sur-pierre);
  font-size: var(--t--1);
}

.pied a {
  color: var(--sur-pierre);
}

.pied a:hover {
  color: var(--tirage-clair);
}

.pied-grille {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 0.8fr) minmax(0, 1.15fr);
  gap: 2.5rem clamp(1.5rem, 4vw, 3.5rem);
}

.pied p {
  margin: 0 0 0.6rem;
  color: var(--sur-pierre-2);
}

.logo--pied {
  margin-bottom: 1.5rem;
  color: var(--sur-pierre);
}

.logo--pied:hover {
  color: var(--sur-pierre);
}

.logo--pied .logo-plein {
  fill: var(--tirage-clair);
}

.pied-adresse {
  margin-bottom: 1rem;
  color: var(--sur-pierre);
  line-height: 1.55;
}

.pied-tel a {
  font-family: var(--font-titre);
  font-size: 1.65rem;
  font-weight: 500;
  text-decoration: none;
}

.pied-titre {
  margin-bottom: 1rem !important;
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--sur-pierre) !important;
}

.pied-horaires {
  list-style: none;
  margin-bottom: 1rem;
}

.pied-horaires li {
  display: grid;
  gap: 0.05rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--pierre-3);
  color: var(--sur-pierre-2);
}

.pied-horaires li span:first-child {
  color: var(--sur-pierre);
}

.pied-statut {
  color: var(--sur-pierre) !important;
}

.pied-liens {
  list-style: none;
  display: grid;
  gap: 0.45rem;
}

.pied-liens a {
  text-decoration: none;
}

.pied-liens a:hover {
  text-decoration: underline;
}

.pied-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--pierre-3);
}

.pied-legal p {
  margin: 0;
}

@media (max-width: 1000px) {
  .pied-grille {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .pied-grille {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }
}

/* ------------------------------------------------------------------ */
/* Barre d'actions mobile                                               */
/* ------------------------------------------------------------------ */

.barre-actions {
  display: none;
}

@media (max-width: 760px) {
  .barre-actions {
    position: fixed;
    right: 0;
    bottom: var(--brnsg-onglet, 0px);
    left: 0;
    z-index: 950;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 0.6rem;
    padding: 0.6rem var(--gouttiere) calc(0.6rem + env(safe-area-inset-bottom));
    border-top: 1px solid var(--beton-3);
    background: var(--lumiere);
  }

  .barre-actions a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 48px;
    border-radius: var(--rayon);
    font-weight: 600;
    text-decoration: none;
  }

  .barre-actions-tel {
    border: 1.5px solid var(--mine);
    color: var(--mine);
  }

  .barre-actions-rdv {
    background: var(--tirage);
    color: var(--sur-tirage);
  }

  .barre-actions-tel:hover {
    color: var(--tirage);
  }

  .barre-actions-rdv:hover {
    background: var(--tirage-fonce);
    color: var(--sur-tirage);
  }

  body {
    padding-bottom: calc(70px + env(safe-area-inset-bottom));
  }

  body.menu-ouvert .barre-actions {
    display: none;
  }
}

/* ------------------------------------------------------------------ */
/* Mouvement : états de départ (seulement si js-motion est posé)        */
/* ------------------------------------------------------------------ */

/* Le plan du hero se trace au chargement : il reste masqué jusqu'au premier
   pas de motion.js, qui le rend visible (2,5 s au plus, sinon js-motion part). */
.js-motion .plan[data-plan-auto] {
  visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .calque.est-anime {
    transition: none;
  }
}