/* ==========================================================================
   CREANOR — surcouche du thème parent.

   Deux choses seulement, par-dessus la feuille du parent qui reste maîtresse
   de toute la mise en page :

     § 1  la typographie — Jost prend les titres, Archivo passe aux données ;
     § 2  le panneau des disponibilités dans le hero, et ses chiffres.

   Rien d'autre n'est redéfini.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Typographie
   Le logo CREANOR est composé en Jost 300 : lui confier les titres fait du
   traitement typographique une extension de la marque, là où Archivo était
   une grotesque neutre. Archivo n'est pas abandonnée — elle descend sur les
   chiffres, les libellés et la signalétique, où son alignement tabulaire et
   sa lisibilité en petit corps sont utiles.
   -------------------------------------------------------------------------- */
:root { --v-display: 'Jost', system-ui, sans-serif; }

.c-hero__title {
  font-family: var(--v-display);
  font-weight: 300;
  font-size: clamp(32px, 3.9vw, 56px);
  line-height: 1.04;
  letter-spacing: 0.012em;
}

.c-h2 {
  font-family: var(--v-display);
  font-weight: 300;
  letter-spacing: 0.012em;
  line-height: 1.06;
}

/* Titres de troisième niveau : Jost en gras.
   Ils étaient tous composés en 700 par le thème parent ; cette règle les
   avait aplatis en 400 à l'époque où Jost n'existait ici qu'en maigre. Le
   fichier 700 étant désormais auto-hébergé, ils reprennent leur graisse — et
   parlent d'une seule voix avec les titres de section, eux aussi en gras.
   L'interlettrage repasse à zéro : le 400 avait besoin d'être aéré, pas le
   700. */
.c-espace__title,
.c-service__title,
.c-offre__title,
.c-gcard__title,
.c-parks__title,
.c-footer__h,
.c-legal__block h2,
.c-sent__title,
.c-hero__cardtitle {
  font-family: var(--v-display);
  font-weight: 700;
  letter-spacing: 0;
}

.c-espace__title { font-size: 20px; }
.c-service__title { font-size: 17.5px; }
.c-offre__title { font-size: 18px; }
.c-gcard__title { font-size: 17px; }
.c-footer__h { font-size: 19px; }
.c-legal__block h2 { font-size: 21px; }
.c-sent__title { font-size: 24px; }
.c-legal__title { font-family: var(--v-display); font-weight: 300; letter-spacing: 0.012em; }

/* Le titre de la carte de disponibilités du parent n'existe plus ici : le
   panneau le remplace. Les valeurs chiffrées, elles, restent en Archivo. */
.c-stat__value,
.c-distances__value,
.c-offre__price,
.c-espace__num,
.c-gcard__num { font-family: 'Archivo', sans-serif; }

/* --------------------------------------------------------------------------
   2. Le panneau des disponibilités
   Un tableau d'affichage à volets : le corps est incliné dans un espace en
   perspective et chaque cellule pivote autour de sa charnière. Le motif est
   emprunté aux gares — CREANOR est à trois minutes de l'autoroute et cinq de
   la gare — et il dit « information vivante » là où un tableau ordinaire
   dirait « document ».
   -------------------------------------------------------------------------- */
/* La perspective est portée par la transformation elle-même : le parent
   ne doit pas en imposer une seconde. */
.c-hero__panel { perspective: none; }

/* -- Le fond du hero : un dégradé mélangé, sans motif --
   Le semis de chevrons entrait en concurrence avec le panneau, qui est
   déjà un objet dense. Un dégradé calme le laisse porter la section. */
.c-hero {
  background:
    radial-gradient(64% 52% at 74% 20%, rgba(232, 58, 81, .20), transparent 62%),
    radial-gradient(58% 48% at 24% 6%, rgba(126, 96, 150, .16), transparent 66%),
    radial-gradient(80% 60% at 50% 100%, rgba(4, 14, 22, .75), transparent 70%),
    linear-gradient(163deg, #16222E 0%, #0C1C28 44%, #071620 100%);
}
.c-hero__chevrons { display: none; }
/* La lueur du parent ferait doublon avec le dégradé. */
.c-hero__glow { display: none; }

/* Le hero du parent est un `flex` en ligne, avec le contenu pour unique
   enfant. Le bandeau des distances y serait devenu une seconde colonne :
   on passe donc en colonne, le contenu absorbant l'espace libre par ses
   marges automatiques et le bandeau se plaçant en bas. */
.c-hero { flex-direction: column; }
.c-hero__inner { width: 100%; margin-block: auto; }

/* Le panneau prend un peu plus de place que la carte qu'il remplace : il
   porte trois colonnes de données là où elle n'en portait qu'une. */
.c-hero__inner { grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr); }

/* La v1 faisait flotter la carte ; le panneau, lui, doit rester lisible. */
.c-hero__panel .c-hero__float { animation: none; }

.v-tab { display: grid; gap: 14px; }

/* Pas de `transform-style: preserve-3d` ici : le fond du corps se peignait
   alors dans le même plan 3D que ses lignes, qui le recouvraient — le
   panneau paraissait transparent et laissait voir les chevrons du hero.
   La profondeur des volets est obtenue par une perspective locale, posée
   sur chaque volet. */
.v-tab__corps {
  transform: perspective(1600px) rotateX(9deg) rotateY(-11deg);
  transition: transform .8s cubic-bezier(.16, 1, .3, 1);
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(168deg, #11293A, #0A2030 58%, #061620);
  border: 1px solid rgba(143, 163, 176, .22);
  box-shadow:
    -18px 26px 46px -26px rgba(0, 0, 0, .8),
    inset 0 1px 0 rgba(255, 255, 255, .07);
}
.v-tab:hover .v-tab__corps { transform: perspective(1600px) rotateX(4deg) rotateY(-5deg); }

.v-tab__casque {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 17px;
  background: rgba(4, 18, 28, .75);
  border-bottom: 1px solid rgba(143, 163, 176, .2);
}
.v-tab__temoin {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #7BE2A8;
  animation: v-battement 2.4s ease-in-out infinite;
}
@keyframes v-battement {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(123, 226, 168, .45); }
  60%      { opacity: .5; box-shadow: 0 0 0 5px rgba(123, 226, 168, 0); }
}
.v-tab__titre {
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
}
.v-tab__lieu {
  margin-left: auto;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  color: #8FA3B0;
}

.v-tab__grille { width: 100%; border-collapse: collapse; }
.v-tab__grille thead th {
  padding: 9px 17px;
  text-align: left;
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(143, 163, 176, .85);
  border-bottom: 1px solid rgba(143, 163, 176, .14);
}
.v-tab__grille thead th:last-child { text-align: right; }


/* Chaque cellule est un volet : dégradé continu très doux, et charnière à
   peine marquée. Un dégradé en deux bandes franches se lirait comme un trou
   dans le panneau. */
.v-volet {
  position: relative;
  padding: 14px 17px;
  text-align: left;
  font-weight: 500;
  border-bottom: 1px solid rgba(143, 163, 176, .13);
  background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(0, 0, 0, .05));
  transform-origin: 50% 50%;
  backface-visibility: hidden;
}
.v-volet::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: rgba(0, 0, 0, .18);
}
.v-tab__ligne:last-child .v-volet { border-bottom: 0; }

.v-volet--nom {
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: 14.5px;
  color: #fff;
  white-space: nowrap;
}
.v-volet--detail { font-size: 12.5px; color: #8FA3B0; }
.v-volet--etat {
  text-align: right;
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.v-volet--etat span { display: inline-flex; align-items: center; gap: 7px; }
.v-volet--etat span::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.v-volet--etat.is-libre    { color: #7BE2A8; }
.v-volet--etat.is-reserver { color: #F4677A; }
.v-volet--etat.is-demande  { color: #8FA3B0; }

/* Ce qui est libre clignote : c'est l'information périssable du panneau, et
   c'est elle qui doit accrocher. Les autres états restent stables. */
.v-volet--etat.is-libre span { animation: v-palpite 2.2s ease-in-out infinite; }
.v-volet--etat.is-libre span::before { animation: v-clignote 2.2s ease-in-out infinite; }
@keyframes v-clignote {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(123, 226, 168, .55); }
  55%      { opacity: .35; box-shadow: 0 0 0 5px rgba(123, 226, 168, 0); }
}
@keyframes v-palpite { 0%, 100% { opacity: 1; } 55% { opacity: .72; } }

/* La bascule, déclenchée à l'entrée dans le champ de vision. Sans script,
   tout est déjà en place et lisible. */
.v-tab.is-anime .v-volet { transform: perspective(700px) rotateX(-92deg); opacity: 0; }
.v-tab.is-anime.is-vue .v-volet {
  transform: perspective(700px) rotateX(0deg);
  opacity: 1;
  transition: transform .5s cubic-bezier(.16, 1, .3, 1), opacity .28s linear;
  transition-delay: calc(var(--rang) * 130ms + var(--col, 0) * 55ms);
}
.v-tab.is-anime.is-vue .v-volet--detail { --col: 1; }
.v-tab.is-anime.is-vue .v-volet--etat   { --col: 2; }

.v-tab__pied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 12px 17px;
  background: rgba(4, 18, 28, .6);
  border-top: 1px solid rgba(143, 163, 176, .16);
  font-size: 12px;
  color: #8FA3B0;
}
.v-tab__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: 12.5px;
  color: #F4677A;
}
.v-tab__cta:hover { color: #F4677A; }
.v-tab__cta svg { width: 14px; height: 14px; transition: transform .35s cubic-bezier(.16,1,.3,1); }
.v-tab__cta:hover svg { transform: translateX(4px); }

/* -- Les chiffres du site, sous le panneau -- */
.v-chiffres {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid rgba(143, 163, 176, .2);
}
.v-chiffre { display: grid; gap: 2px; }
.v-chiffre__val {
  display: flex;
  align-items: baseline;
  gap: 2px;
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-size: clamp(1.1rem, 1.7vw, 1.45rem);
  line-height: 1;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  /* Le corail de la marque, comme les chiffres de la v1 — mais éclairci de
     #E83A51 à #F4677A, parce que le rouge de la charte tombe à 4,4:1 sur ce
     fond de nuit alors qu'ici le texte n'est pas assez gros pour bénéficier
     du seuil « grand texte ». Même teinte, contraste porté à 6,2:1. */
  color: #F4677A;
}
.v-chiffre__u { font-size: 0.5em; font-weight: 700; color: #F4677A; opacity: .72; }
.v-chiffre__quoi { margin: 0; font-size: 11.5px; line-height: 1.35; color: #8FA3B0; }

.v-tab__note {
  margin: 0;
  text-align: center;
  font-size: 11.5px;
  color: rgba(143, 163, 176, .8);
}

/* --------------------------------------------------------------------------
   3. Responsive
   Une `table` ne se réduit pas sous sa largeur minimale : en trois colonnes
   elle pousserait la page en débordement horizontal. Chaque ligne devient
   donc un bloc.
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .c-hero__panel { perspective: none; }
  .v-tab__corps { transform: none; }
  .v-tab__grille thead { display: none; }
  .v-tab__grille,
  .v-tab__grille tbody,
  .v-tab__ligne { display: block; width: 100%; }
  .v-tab__ligne {
    padding: 12px 15px;
    border-bottom: 1px solid rgba(143, 163, 176, .13);
  }
  .v-tab__ligne:last-child { border-bottom: 0; }
  .v-volet {
    display: block;
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
  }
  .v-volet::after { display: none; }
  .v-volet--nom { font-size: 15px; margin-bottom: 2px; white-space: normal; }
  .v-volet--detail { margin-bottom: 6px; }
  .v-volet--etat { text-align: left; }
  .v-tab.is-anime .v-volet { transform: none; opacity: 0; }
  .v-tab.is-anime.is-vue .v-volet { opacity: 1; }
  .v-chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   4. Depuis 1920 — la frise et la vue aérienne
   Section ajoutée au parcours du parent, dans son langage : même fond que
   la section « Accès », mêmes sur-titres, mêmes filets.
   -------------------------------------------------------------------------- */
.v-hist {
  background: #EDE9E2;
  border-top: 1px solid rgba(8, 31, 45, 0.1);
}
.v-hist__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 48px 36px;
}
.v-hist__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: clamp(28px, 4vw, 52px);
  align-items: center;
}

/* -- La frise : les dates portent l'information -- */
.v-frise { list-style: none; margin: 0; padding: 0; position: relative; }
.v-frise::before {
  content: "";
  position: absolute;
  left: 5px; top: 8px; bottom: 8px;
  width: 1px;
  background: linear-gradient(180deg, rgba(8, 31, 45, 0.14), rgba(232, 58, 81, 0.5));
}
.v-frise__etape { position: relative; padding: 0 0 24px 40px; }
.v-frise__etape:last-child { padding-bottom: 0; }
.v-frise__etape::before {
  content: "";
  position: absolute;
  left: 0; top: 7px;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: #EDE9E2;
  border: 1px solid #3F5364;
}
.v-frise__etape:last-child::before { background: #E83A51; border-color: #E83A51; }

.v-frise__date {
  display: block;
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #CE2B42;
  margin-bottom: 4px;
}
.v-frise__titre {
  display: block;
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-size: 1.2rem;
  letter-spacing: 0.008em;
  margin-bottom: 5px;
}
.v-frise__texte {
  display: block;
  font-size: 14px;
  line-height: 1.6;
  color: #3F5364;
  max-width: 48ch;
}

/* -- La vue aérienne, couchée dans l'espace --
   Rien n'est posé dessus : c'est une photographie du site, pas un support
   d'annotations. -- */
/* La photo est posée à plat, comme les autres images du site.
   Elle était couchée dans un espace en perspective : la boîte englobante
   d'un plan incliné dépasse son conteneur, ce qui la faisait rogner par le
   bord de page entre 721 et 1310 px — jusqu'à 128 px de photo perdus. Et
   inclinée, elle ne se lisait plus comme une photo mais comme un objet.
   Elle prend donc le même traitement que la perspective de réhabilitation :
   coins arrondis, ombre portée, et un rapprochement lent au survol. */
.v-ciel { margin: 0; }
.v-ciel__scene {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(8, 31, 45, .10);
  box-shadow: 0 26px 48px -28px rgba(8, 31, 45, .45);
  transition: box-shadow .5s ease, border-color .5s ease;
}
/* Le voile corail de « Un nouveau visage » : rien au repos, il ne fait que
   réchauffer au survol. Mêmes valeurs, pour que les deux photos du site
   réagissent de la même façon. */
.v-ciel__scene { position: relative; }
.v-ciel__scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(200deg, rgba(232, 58, 81, .22), rgba(232, 58, 81, 0) 62%);
  opacity: 0;
  transition: opacity .6s ease;
  pointer-events: none;
  z-index: 1;
}
.v-ciel:hover .v-ciel__scene::after,
.v-ciel:focus-within .v-ciel__scene::after { opacity: 1; }

.v-ciel__scene picture { display: block; }
.v-ciel__scene img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 1.1s cubic-bezier(.16, 1, .3, 1);
}
.v-ciel:hover .v-ciel__scene,
.v-ciel:focus-within .v-ciel__scene {
  border-color: rgba(232, 58, 81, .35);
  box-shadow: 0 32px 60px -28px rgba(8, 31, 45, .55);
}
.v-ciel:hover .v-ciel__scene img,
.v-ciel:focus-within .v-ciel__scene img { transform: scale(1.055); }
.v-ciel__legende {
  margin-top: 26px;
  text-align: center;
  font-size: 13px;
  color: #6B7A85;
}

@media (max-width: 900px) {
  .v-hist__grille { grid-template-columns: 1fr; }
  .v-hist__inner { padding: 40px 20px; }
}

/* --------------------------------------------------------------------------
   5. Le formulaire — plus compact
   Les champs de la v1 étaient dimensionnés pour une page aérée ; resserrés,
   ils demandent moins de défilement et se remplissent d'un trait. Les
   mentions légales passent en petit corps, à l'encre dense pour rester
   lisibles.
   -------------------------------------------------------------------------- */
.c-formcard { padding: 20px 20px 18px; border-radius: 16px; }
.c-form { gap: 11px 18px; }
.c-fieldgroup { gap: 11px; }
.c-fieldrow { gap: 11px; }

.c-label {
  font-size: 11.5px;
  font-weight: 500;
  margin-bottom: 4px;
  letter-spacing: 0.01em;
}

.c-input,
.c-textarea {
  height: 38px;
  padding: 0 12px;
  font-size: 13.5px;
  border-radius: 9px;
}
.c-textarea { height: 66px; padding: 9px 12px; }

.c-modes { gap: 6px; padding: 4px; border-radius: 11px; }
.c-modes__btn { padding: 9px 8px; font-size: 12.5px; border-radius: 8px; }

.c-segment { height: 38px; border-radius: 9px; }
.c-segment__btn { font-size: 12.5px; }

.c-choice { padding: 10px 12px; border-radius: 9px; }
.c-choice__title { font-size: 12.5px; }
.c-choice__body { font-size: 11px; }

/* Consentement et RGPD : petits, comme demandé, mais à l'encre dense —
   une mention légale illisible est un problème de conformité autant que
   de confort. */
.c-consent {
  gap: 8px;
  font-size: 11.5px;
  line-height: 1.45;
  color: #33485A;
}
.c-consent input { width: 15px; height: 15px; }

.c-captcha { padding: 9px 12px; gap: 10px; border-radius: 9px; }
.c-captcha__text { font-size: 11.5px; color: #33485A; }
.c-captcha__input { width: 64px; height: 32px; font-size: 13px; }

.c-formerror { font-size: 12px; }

.c-submit {
  padding: 13px;
  font-size: 14.5px;
  border-radius: 10px;
}

.c-rgpd {
  font-size: 10px;
  line-height: 1.5;
  color: #33485A;
}
.c-rgpd a { font-size: 11px; font-weight: 600; }

.c-sent { padding: 34px 0; }
.c-sent__body { font-size: 14.5px; }

@media (max-width: 620px) {
  .c-formcard { padding: 16px; }
}

/* --------------------------------------------------------------------------
   6. Les intervenants du chantier, avec leur logo
   Chaque bloc est centré sur son propre logo : les trois marques ayant des
   largeurs très inégales, un alignement à gauche laissait des blancs
   irréguliers entre le logo et le nom.
   -------------------------------------------------------------------------- */
.v-parts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.v-part {
  display: grid;
  gap: 8px;
  align-content: start;
  justify-items: center;
  text-align: center;
}

/* Les logos prennent la couleur du texte : blancs sur le fond nuit, ils
   s'éclairent au survol. Chaque marque a sa hauteur propre. */
.v-part__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  color: rgba(255, 255, 255, .82);
  transition: color .35s cubic-bezier(.16, 1, .3, 1);
}
.v-part__logo svg,
.v-part__logo img { display: block; width: auto; max-width: 100%; }
.v-part__logo--becity svg { height: 26px; }
.v-part__logo--projex svg { height: 20px; }
.v-part__logo--dhb img    { height: 46px; }
.v-part:hover .v-part__logo { color: #fff; }

@media (max-width: 620px) {
  .v-parts { grid-template-columns: 1fr; gap: 18px; }
}

/* --------------------------------------------------------------------------
   7. Le bandeau des distances, en bas du hero
   L'emplacement est l'argument qui élimine ou retient : il ferme la section
   plutôt que d'attendre le bas de page. Le rouge lui est réservé, les
   chiffres du panneau restant blancs — deux niveaux de lecture distincts.
   -------------------------------------------------------------------------- */
.v-dist {
  position: relative;
  z-index: 2;
  width: 100%;
  flex: none;
  margin-top: clamp(20px, 3vh, 40px);
  border-top: 1px solid rgba(143, 163, 176, .18);
  background: rgba(4, 18, 28, .45);
}
.v-dist__in {
  max-width: 1240px;
  margin: 0 auto;
  padding-inline: 36px;
}
.v-dist__liste {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}
.v-dist__item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 14px 22px 14px 0;
  margin-right: 22px;
  position: relative;
  transition: transform .3s cubic-bezier(.16, 1, .3, 1);
}
.v-dist__item:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  width: 1px; height: 16px;
  background: rgba(143, 163, 176, .22);
}
.v-dist__item:hover { transform: translateY(-2px); }
.v-dist__val {
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  color: #F4677A;
  white-space: nowrap;
}
.v-dist__lieu { font-size: 12.5px; color: #8FA3B0; white-space: nowrap; }

@media (max-width: 1100px) {
  .c-hero__inner { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .v-dist__in { padding-inline: 20px; }
  .v-dist__item { flex: 1 1 44%; }
}

/* L'indicateur « Découvrir » est positionné en absolu par rapport au hero :
   il retombait sur le bandeau des distances. On le remonte de la hauteur de
   ce bandeau, sans rien changer d'autre à son apparence. Sous 1100 px le
   parent le masque déjà, l'offset n'a donc à valoir qu'en desktop. */
/* Position héritée du parent, neutralisée plus bas : l'indicateur passe
   dans le flux du hero. */

/* --------------------------------------------------------------------------
   8. L'appel — le téléphone dans la barre et dans le hero
   Le numéro passe devant : c'est le geste le plus court entre « ce local
   m'intéresse » et une réponse. Il est écrit en clair partout, jamais réduit
   à une icône — un numéro qu'on ne peut pas lire ne se note pas.
   -------------------------------------------------------------------------- */
.v-tel {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: 4px;
  padding: 7px 4px;
  font-family: 'Archivo', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s ease;
}
.v-tel svg { width: 16px; height: 16px; flex: none; color: #E83A51; }
.v-tel:hover, .v-tel:focus-visible { color: #E83A51; }

/* Le hero est sombre : le numéro y prend la craie du parent plutôt que
   l'encre de nuit héritée du corps de page. */
.c-header:not(.c-header--solid) .v-tel { color: var(--craie, #F5F3EF); }

/* -- Le second bouton du hero : « Appelez-nous » --
   Le numéro n'y est pas répété : il est déjà lisible dans la barre, juste
   au-dessus, et l'écrire ici faisait passer les deux boutons à la ligne.
   Il reste dans le lien pour les lecteurs d'écran. */
.v-appel { gap: 9px; }
.v-appel svg { flex: none; }

/* -- La ligne « Rejoignez… » : plus de cadre, la typographie porte seule -- */
.c-hero__social.v-rejoindre {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 22px 0 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.v-rejoindre svg { width: 19px; height: 19px; flex: none; color: #E83A51; }
.v-rejoindre span {
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.4;
  color: #A8BAC6;
  letter-spacing: 0.005em;
}
.v-rejoindre b {
  font-weight: 700;
  color: #FFF;
}

/* L'exemplaire compact, à côté du burger : icône seule, mais cible tactile
   de 44 px comme n'importe quel bouton. Il n'existe que sur petit écran. */
.v-tel--compact { display: none; }

@media (max-width: 900px) {
  /* Dans le menu déroulant, le numéro devient une ligne à part entière,
     alignée sur les autres entrées plutôt que serrée contre le bouton. */
  .v-tel {
    margin-left: 0;
    padding: 10px 0;
    font-size: 16px;
  }
  /* Le numéro est écrit, pas caché derrière une icône. */
  .v-tel--compact {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0 10px 0 auto;
    padding: 0;
    min-height: 44px;
    font-size: 14px;
    color: var(--craie, #F5F3EF);
  }
  .v-tel--compact svg { width: 15px; height: 15px; color: #F4677A; }
  .v-tel--compact .v-tel__num { white-space: nowrap; }
  .c-header--solid .v-tel--compact { color: #081F2D; }
}


/* --------------------------------------------------------------------------
   9. Hauteurs d'écran réelles, contrastes, et confort tactile
   Corrections issues d'un audit mené à hauteur de viewport réelle, et non
   dans une fenêtre haute : c'est là que le hero se révélait trop court.
   -------------------------------------------------------------------------- */

/* Le parent impose au hero `height: calc(100svh - 34px)` avec
   `overflow: hidden`, et ne le libère qu'en dessous de 1100 px. Le bandeau
   des distances, que nous avons ajouté à l'intérieur, se retrouvait donc
   rogné — et purement absent sur un portable 1366×768, où il ne reste que
   ~655 px de fenêtre. Le hero garde sa hauteur d'écran comme plancher, mais
   peut désormais s'étendre pour contenir ce qu'il porte. */
@media (min-width: 1101px) {
  .c-hero {
    height: auto;
    min-height: calc(100svh - 34px);
  }
}

/* Sous 700 px de haut, l'invitation à faire défiler n'a plus la place de
   vivre et venait chevaucher les chiffres. L'écran est de toute façon assez
   court pour que le défilement aille de soi. */
/* L'indicateur ne se cache plus sur les écrans courts — il était posé en
   absolu et venait chevaucher les chiffres, alors le masquer réglait la
   collision en supprimant l'élément. Il prend maintenant sa place dans le
   flux, entre le contenu et le bandeau : plus rien ne peut le recouvrir, et
   il reste visible à toutes les hauteurs. */
.c-scroll {
  position: static;
  order: 2;
  transform: none;
  align-self: center;
  margin: 10px 0 14px;
}
.v-dist { order: 3; }

@media (max-height: 700px) {
  .c-scroll { margin: 4px 0 8px; }
  .c-scroll svg { width: 15px; }
}

/* Le chiffre fantôme des cartes « Espaces » était posé à -18px dans une
   carte en `overflow: hidden` : le haut des chiffres était rasé et le fût
   du « 1 » coupé en deux. Il rentre dans la carte. */
.c-espace__num {
  top: 6px;
  right: 10px;
  font-size: 56px;
}

/* -- Contrastes remontés au seuil AA, mesurés au pixel -- */
.v-ciel__legende { color: #55636D; }  /* 3,4:1 → 4,84:1 */
.v-frise__date   { color: #C21F37; }  /* 4,29:1 → 4,74:1 */

/* -- Le formulaire au doigt --
   Sous 16 px, Safari iOS zoome tout seul à la mise au point du champ et
   décadre la page. Les cibles montent à 44 px, seuil en deçà duquel on vise
   plus qu'on ne touche. */
@media (max-width: 720px) {
  .c-input,
  .c-textarea,
  .c-captcha__input { font-size: 16px; }

  .c-input,
  .c-captcha__input { height: 44px; }

  .c-consent input { width: 22px; height: 22px; }
  .c-modes__btn { padding: 14px 8px; }
  .c-segment { height: 44px; }
}

/* --------------------------------------------------------------------------
   10. Trois retouches d'usage
   -------------------------------------------------------------------------- */

/* -- L'indicateur de défilement bouge franchement --
   Le parent anime déjà la bille dans la souris ; l'ensemble descend d'un
   cran en même temps, ce qui rend le geste lisible du coin de l'œil. */
.c-scroll svg { animation-duration: 1.6s; }
.c-scroll { animation: v-descend 1.6s ease-in-out infinite; }
@keyframes v-descend {
  0%, 100% { transform: translateY(0); }
  45%      { transform: translateY(4px); }
}
.c-scroll:hover svg,
.c-scroll:focus-visible svg { animation-duration: .9s; }

/* -- « Un nouveau visage » : l'image répond au curseur --
   Un rapprochement lent et un voile qui se lève : l'image est un projet, pas
   une vignette de galerie, le mouvement reste retenu. */
.c-reno__figure {
  overflow: hidden;
  transition: box-shadow .5s ease, border-color .5s ease;
}
/* Rien au repos : l'image reste telle qu'elle est. Le voile n'apparaît qu'au
   survol, et il réchauffe plutôt qu'il n'assombrit. */
.c-reno__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(200deg, rgba(232, 58, 81, .22), rgba(232, 58, 81, 0) 62%);
  opacity: 0;
  transition: opacity .6s ease;
  pointer-events: none;
  z-index: 1;
}
.c-reno__media img {
  transition: transform 1.1s cubic-bezier(.16, 1, .3, 1);
}
.c-reno__figure:hover .c-reno__media img,
.c-reno__figure:focus-within .c-reno__media img { transform: scale(1.055); }
.c-reno__figure:hover .c-reno__media::after,
.c-reno__figure:focus-within .c-reno__media::after { opacity: 1; }
.c-reno__figure:hover,
.c-reno__figure:focus-within {
  border-color: rgba(232, 58, 81, .42);
  box-shadow: 0 46px 90px -40px rgba(0, 0, 0, .72);
}

/* -- Le sélecteur de langue, en bout de barre --
   Il ferme la ligne, à droite de l'appel à l'action, et d'un cran plus petit
   que le reste : on en a besoin une fois par visite au plus. */
.v-lang {
  padding: 2px;
  gap: 2px;
  flex: none;
}
.v-lang .c-lang__btn {
  padding: 4px 9px;
  font-size: 10.5px;
  letter-spacing: 0.08em;
}

@media (max-width: 900px) {
  /* Dans le menu déroulant, il retrouve une cible confortable au doigt. */
  .v-lang { align-self: flex-start; }
  .v-lang .c-lang__btn { padding: 9px 15px; font-size: 12.5px; }
}

/* --------------------------------------------------------------------------
   12. Écrans peu hauts : les deux bandeaux restent dans l'écran d'arrivée
   Le bandeau des distances et le bandeau défilant sont les deux éléments qui
   disent immédiatement où l'on est et ce qui se loue. Sur un portable, le
   hero pleine hauteur les repoussait tous deux sous la ligne de flottaison :
   le visiteur arrivait sur un titre et deux boutons. Le hero se resserre donc
   à mesure que l'écran raccourcit, plutôt que de garder ses aises.

   Le rembourrage vit sur .c-hero__inner, pas sur .c-hero : le poser sur le
   second s'ajoutait au premier au lieu de le remplacer.
   -------------------------------------------------------------------------- */
@media (min-width: 1101px) and (max-height: 860px) {
  /* Le hero reste une page d'accueil : il remplit l'écran. On lui retire
     seulement de quoi laisser paraître le bandeau défilant en bas, plutôt
     que de le laisser retomber à la hauteur de son contenu — ce qui
     découvrait la section suivante et donnait une bande crème sous un hero
     rétréci. */
  /* 31 px : la hauteur mesurée du bandeau défilant. Le hero et lui
     remplissent ainsi l'écran au pixel, sans laisser paraître le haut de la
     section suivante — ce qui se lisait comme un aplat vide à l'arrivée. */
  .c-hero { min-height: calc(100svh - 31px); }
  .c-hero__inner { padding-block: 84px 6px; gap: 36px; }
  .c-hero__title { font-size: clamp(30px, 2.9vw, 44px); }
  .c-hero__para { font-size: 14px; }
  .c-badge { margin-bottom: 14px; }
  .c-hero__social.v-rejoindre { margin-top: 14px; }
  .c-hero__actions { margin-top: 14px; }
  .c-btn-lg { padding-block: 12px; }
  .v-tab { gap: 10px; }
  .v-chiffres { padding-top: 10px; gap: 10px; }
  .c-scroll { margin: 4px 0 8px; }
}

@media (min-width: 1101px) and (max-height: 740px) {
  .c-hero__inner { padding-block: 74px 2px; gap: 30px; }
  .c-hero__title { font-size: clamp(27px, 2.4vw, 36px); }
  .c-hero__para { font-size: 13.5px; }
  .v-volet { padding-block: 10px; }
  .v-dist__in { padding-block: 9px; }
  .c-scroll { margin: 2px 0 6px; }
}

/* --------------------------------------------------------------------------
   13. « Précisions » sur toute la largeur
   Le champ libre suit les deux colonnes de champs plutôt que d'en occuper
   une seule : c'est là que la demande se raconte.
   -------------------------------------------------------------------------- */
.v-precisions {
  grid-column: 1 / -1;
  display: grid;
  gap: 4px;
}
.v-precisions .c-textarea { width: 100%; }

/* --------------------------------------------------------------------------
   14. Le formulaire se lit de haut en bas
   Deux colonnes côte à côte — la demande à gauche, l'identité à droite —
   obligeaient l'œil à faire des allers-retours et laissaient une colonne
   plus longue que l'autre. Le formulaire redevient une seule colonne : on
   dit ce qu'on cherche, puis qui on est, puis on précise. Les champs courts
   restent appariés deux par deux, ce qui garde la hauteur contenue.
   -------------------------------------------------------------------------- */
.c-form { grid-template-columns: 1fr; gap: 12px; }

/* Chaque bloc occupe la largeur, il n'y a plus de colonnes à enjamber. */
.c-modes,
.c-panel,
.c-fieldgroup,
.v-precisions,
.c-consent,
.c-captcha,
.c-submit,
.c-rgpd,
.c-formerror { grid-column: 1 / -1; }

/* La date et le créneau tiennent sur une ligne, comme nom et société. */
.c-panel .c-fieldrow,
.c-fieldgroup .c-fieldrow { grid-template-columns: 1fr 1fr; gap: 12px; }

/* La durée de location s'aligne sur la largeur du bloc plutôt que de
   s'étirer sur trois segments larges. */
.c-panel .c-segment { max-width: 340px; }

@media (max-width: 720px) {
  .c-panel .c-fieldrow,
  .c-fieldgroup .c-fieldrow { grid-template-columns: 1fr; }
  .c-panel .c-segment { max-width: none; }
}

/* --------------------------------------------------------------------------
   15. Mobile : tout se centre
   Sur une colonne étroite, le fer à gauche laisse des fins de ligne
   irrégulières et des blocs qui semblent flotter. L'axe central donne au
   défilement une colonne vertébrale.
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  /* L'indicateur de défilement est masqué sous 1100 px par le parent : le
     rembourrage bas du hero, taillé pour lui, laissait un creux avant le
     bandeau. */
  .c-hero__inner { padding-bottom: 26px; }

  .c-hero__copy,
  .c-sectionhead,
  .c-sectionhead > div,
  .c-sectionhead__aside,
  .c-reno__text,
  .v-hist__grille,
  .c-groupe__intro,
  .c-tarifs__intro,
  .c-services__intro,
  .c-espaces__intro,
  .c-reservation__aside,
  .c-footer__grid > * { text-align: center; }

  /* Les éléments en ligne se recentrent par leurs marges. */
  .c-badge,
  .c-hero__social.v-rejoindre,
  .c-hero__actions,
  .c-btn-lg,
  .c-reno__cta,
  .c-footer__route,
  .c-parks__all,
  .c-tarifs__cta { margin-inline: auto; }

  .c-hero__actions,
  .c-hero__social.v-rejoindre { justify-content: center; }
  .c-hero__actions { flex-direction: column; align-items: stretch; }
  .c-hero__actions .c-btn-lg { width: 100%; }

  /* Le bandeau des distances : la valeur au-dessus du lieu, centrés. */
  /* Six distances l'une sous l'autre faisaient trois cents pixels de
     défilement : deux colonnes, et le filet de séparation disparaît — il
     était dessiné pour une ligne horizontale. */
  .v-dist__liste {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 8px;
  }
  .v-dist__item {
    flex-direction: column;
    align-items: center;
    gap: 1px;
    text-align: center;
    padding: 0;
    margin: 0;
  }
  .v-dist__item::after { display: none; }
  .v-dist__item:hover { transform: none; }

  /* Les chiffres du panneau et les cartes suivent le même axe. */
  .v-chiffre,
  .v-chiffre__val { justify-content: center; text-align: center; }
  .v-tab__note,
  .c-espace__tags,
  .c-offre__tags,
  .c-reno__atouts { justify-content: center; text-align: center; }

  /* La frise perd son rail : centré, un fil vertical à gauche avec un texte
     centré à 40 px de retrait ne veut plus rien dire. La date en corail fait
     le marqueur, et un filet sépare les étapes. */
  .v-frise::before { display: none; }
  .v-frise__etape::before { display: none; }
  .v-frise__etape {
    text-align: center;
    padding: 0 0 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid rgba(8, 31, 45, .12);
  }
  .v-frise__etape:last-child { margin-bottom: 0; border-bottom: 0; padding-bottom: 0; }

  .c-footer__addr,
  .c-footer__bar { text-align: center; }

  /* Un bloc en width: fit-content ne se centre pas par text-align : il lui
     faut ses marges automatiques. Le numéro restait à gauche. */
  .c-footer__tel,
  .c-footer__link,
  .c-footer__dim,
  .c-footer__route { margin-inline: auto; }
  .c-footer__bar { justify-content: center; }
  .v-lang { margin-inline: auto; }
}

/* --------------------------------------------------------------------------
   16. Accessibilité — corrections issues de l'audit du 10 août 2026
   Contrastes mesurés au pixel sur les captures et recoupés par le calcul de
   composition ; les deux méthodes concordent.
   -------------------------------------------------------------------------- */

/* -- Le téléphone de la barre disparaissait au défilement --
   Le parent bascule --nav-ink du blanc à l'encre de nuit quand l'en-tête
   prend .is-past, mais la surcouche forçait la craie sans jamais la
   reprendre : 1,05:1, soit un texte blanc sur fond blanc. */
.c-header.is-past:not(.c-header--solid) .v-tel,
.c-header.is-past .v-tel--compact { color: #081F2D; }
.c-header.is-past .v-tel svg,
.c-header.is-past .v-tel--compact svg { color: #C21F37; }

/* -- Le corail de la charte sur fond clair --
   #E83A51 tient 4,07:1 sur blanc et 3,68:1 sur la crème : sous le seuil AA
   partout. #C21F37 est la même teinte assombrie d'un cran, et passe sur les
   quatre fonds du site — blanc 5,92, crème 5,35, beige 4,90, carte 4,89.
   Le plus grave était .c-formerror : le message d'erreur du formulaire. */
.c-kicker,
.c-offre__price,
.c-gcard__num,
.c-gcard__more,
.c-park__chev,
.c-formerror,
.c-rgpd a,
.c-legal__block a { color: #C21F37; }

/* .c-kicker--light vit sur fond nuit à 8,15:1 : on ne le touche pas. */
.c-kicker.c-kicker--light { color: #F79AA8; }

/* L'unité « m² » sous les chiffres du hero : l'opacité la ramenait à 3,55:1. */
.v-chiffre__u { opacity: 1; }

/* -- La vue aérienne débordait du bord de page --
   Sa scène est inclinée : la boîte englobante dépasse le conteneur, et
   l'overflow-x du parent coupait sans laisser de barre. Jusqu'à 128 px de
   photo perdus à 900 px de large. La remise à plat suit désormais la
   bascule de la grille, à 900 px et non à 720. */
/* -- Le panneau des disponibilités entre 721 et 1100 px --
   Le hero passe en une colonne dès 1100 px, mais le panneau restait incliné
   jusqu'à 720 : à 1024 px, l'état « DISPONIBLE » se lisait 29 px au-dessus de
   sa propre ligne, soit presque une hauteur de ligne d'écart. */
@media (max-width: 1100px) {
  .c-hero__panel { perspective: none; }
  .v-tab__corps,
  .v-tab:hover .v-tab__corps { transform: none; }
}

/* -- Cibles tactiles : le seuil AA de WCAG 2.2 est de 24 px --
   Ces liens faisaient 13 à 21 px de haut, et certains sont contigus, ce qui
   écarte l'exception d'espacement. */
.v-tab__cta { padding-block: 6px; }
.c-footer__legal a,
.c-contactlist a,
.c-rgpd a { display: inline-block; padding-block: 6px; }

/* Ceux-là occupent chacun leur ligne dans la colonne du pied de page.
   Le rembourrage descend de 6 à 3 px : le texte fait 12 px sur un interligne
   de 1,55, soit 18,6 px de hauteur de ligne ; 3 px de part et d'autre portent
   la cible à 24,6 px, ce qui reste au-dessus du seuil, et l'écart entre
   EUROCAP et GROUPE BECI passe de 12 à 6 px. */
.c-footer__link,
.c-footer__tel { display: block; width: fit-content; padding-block: 3px; }
.c-footer__legal { line-height: 2; }
.c-footer__legal a { white-space: nowrap; }
.v-lang { gap: 6px; }
.v-lang .c-lang__btn { padding-block: 7px; }

/* -- « Construction management » passe sur deux lignes, « Maîtrise
   d'exécution » sur une : les trois logos du chantier se désalignaient sur
   la version anglaise. Deux hauteurs de ligne réservées dans les deux cas. */
.c-reno__role-label { min-height: 2lh; }

/* -- Le centrage mobile ratait quatre sections --
   Services et Réservation composent leurs titres hors de .c-sectionhead, et
   .c-reservation__aside n'existe pas dans le balisage : le sélecteur visait
   dans le vide. */
@media (max-width: 720px) {
  .c-services__inner > .c-kicker,
  .c-services__inner > .c-h2,
  .c-reservation__inner > div,
  .c-parks__title,
  .c-parks,
  .c-espace__body,
  .c-tarifs__inner > div { text-align: center; }

  /* margin-inline: auto ne centre pas une boîte de niveau ligne : ces boutons
     sont des inline-flex, ils suivent l'alignement de texte de leur parent. */
  .c-reno__text { text-align: center; }
}

/* ==========================================================================
   17. LE HERO EN CLAIR
   ==========================================================================

   Des visiteurs trouvaient le hero anxiogène. Le diagnostic n'était pas le
   bleu — c'est la couleur la plus banale de l'immobilier d'entreprise —, mais
   ce qui l'accompagnait : fond presque noir, rouge saturé en aplats ET en
   texte, pastilles vertes et rouges clignotantes, semis de chevrons. Pris
   ensemble, c'est la grammaire d'un logiciel de surveillance, et le panneau
   des disponibilités en était littéralement le tableau d'état.

   Le hero passe donc sur le crème de la charte, le bleu nuit devient l'encre
   au lieu du fond, et le rouge se réduit à ce sur quoi on clique — le principe
   du hero de groupebeci.com, un seul oiseau rouge parmi des noirs.

   La typographie ne bouge pas.
   -------------------------------------------------------------------------- */

.c-hero {
  color: var(--ink);
  /* Une seule respiration, de haut en bas : un dégradé plus appuyé
     redeviendrait un effet, et c'est justement ce qu'on retire. */
  background: linear-gradient(178deg, #FFFFFF 0%, var(--cream) 46%, var(--cream-deep) 100%);
}

/* -- Le titre : contraste de valeur, pas de couleur --
   La ligne d'accent était rouge. En bleu ardoise, le jeu typographique reste
   entier sans ramener de couleur dans une zone qui n'appelle aucun clic. */
.c-hero__title { color: var(--ink); }
.c-hero__title-accent { color: var(--red); }
.c-hero__para { color: var(--slate); }

.c-badge {
  border-color: rgba(8, 31, 45, .16);
  background: rgba(255, 255, 255, .55);
  color: var(--slate);
}

/* La pastille du badge garde le rouge : c'est un point, pas un aplat. */
.c-badge__dot { background: var(--red); }

.c-hero__social.v-rejoindre span { color: var(--slate); }
.c-hero__social.v-rejoindre b { color: var(--ink); }
.v-rejoindre svg { color: var(--red); }

/* -- Les deux boutons --
   Le plein garde le rouge : c'est sa fonction, et c'est désormais le seul
   aplat coloré de l'écran. Le second passe en contour d'encre. */
.c-btn-lg--primary { box-shadow: 0 14px 30px -18px rgba(232, 58, 81, .75); }
.c-btn-lg--ghost {
  border-color: rgba(8, 31, 45, .28);
  color: var(--ink);
}
.c-btn-lg--ghost:hover,
.c-btn-lg--ghost:focus-visible {
  background: rgba(8, 31, 45, .05);
  color: var(--ink);
}
.v-appel svg { color: var(--red); }

/* --muted tombe à 4,42:1 sur blanc — sous le seuil, de peu mais dessous. */
.c-scroll { color: var(--slate); }
.c-scroll:hover { color: var(--ink); }
.c-scroll svg rect { stroke: rgba(8, 31, 45, .35); }
.c-scroll svg circle { fill: var(--red); }

/* --------------------------------------------------------------------------
   Le panneau des disponibilités passe en clair
   Une carte blanche posée sur le crème, filet d'un pixel : un tableau
   d'affichage imprimé, non un écran de supervision. Les couleurs de la marque
   restent — seules celles qui n'existaient que « parce que le fond était
   sombre » changent de camp.
   -------------------------------------------------------------------------- */
.v-tab__corps {
  background: linear-gradient(168deg, #FFFFFF, #FDFCFB 58%, var(--cream));
  border-color: rgba(8, 31, 45, .12);
  box-shadow:
    -12px 20px 38px -26px rgba(8, 31, 45, .38),
    inset 0 1px 0 rgba(255, 255, 255, .9);
}

.v-tab__casque {
  background: var(--cream-deep);
  border-bottom-color: rgba(8, 31, 45, .10);
}
.v-tab__titre { color: var(--ink); }
.v-tab__lieu  { color: var(--slate); }
/* Le témoin bat de nouveau, mais plus lentement et sans éclat : sur fond
   clair, la pulsation dit « information à jour » là où, sur le fond nuit et
   en vert vif, elle disait « alerte ». Le halo est repris dans le vert
   profond — l'ancien, très pâle, était invisible sur blanc. */
.v-tab__temoin {
  background: var(--green-deep);
  animation: v-battement-clair 3.4s ease-in-out infinite;
}
@keyframes v-battement-clair {
  0%, 100% { opacity: 1;   box-shadow: 0 0 0 0 rgba(30, 122, 75, .28); }
  60%      { opacity: .55; box-shadow: 0 0 0 5px rgba(30, 122, 75, 0); }
}

.v-tab__grille thead th {
  color: var(--slate);
  border-bottom-color: rgba(8, 31, 45, .10);
}
.v-volet {
  background: none;
  border-bottom-color: rgba(8, 31, 45, .08);
}
.v-volet::after { background: rgba(8, 31, 45, .05); }
.v-volet--nom    { color: var(--ink); }
.v-volet--detail { color: var(--slate); }

/* Les trois états gardent leur logique de couleur, dans les valeurs qui
   tiennent sur blanc : le vert clair tombait à 1,4:1, le corail à 3,3:1. */
.v-volet--etat.is-libre    { color: var(--green-deep); }
.v-volet--etat.is-reserver { color: #C21F37; }
.v-volet--etat.is-demande  { color: var(--slate); }
/* La pastille « Disponible » respire de nouveau, au même rythme apaisé. */
.v-volet--etat.is-libre span { animation: v-palpite-clair 3.4s ease-in-out infinite; }
.v-volet--etat.is-libre span::before { animation: v-clignote-clair 3.4s ease-in-out infinite; }
@keyframes v-clignote-clair {
  0%, 100% { opacity: 1;  box-shadow: 0 0 0 0 rgba(30, 122, 75, .34); }
  55%      { opacity: .5; box-shadow: 0 0 0 5px rgba(30, 122, 75, 0); }
}
@keyframes v-palpite-clair { 0%, 100% { opacity: 1; } 55% { opacity: .8; } }
.v-volet--etat.is-libre span::before    { background: var(--green-deep); }
.v-volet--etat.is-reserver span::before { background: #C21F37; }
.v-volet--etat.is-demande span::before  { background: var(--slate); }

.v-tab__pied {
  background: rgba(8, 31, 45, .03);
  border-top-color: rgba(8, 31, 45, .10);
}
.v-tab__mention { color: var(--slate); }
.v-tab__cta { color: #C21F37; }

/* Les chiffres gardent le rouge de la marque, dans sa valeur lisible sur
   clair — #F4677A n'y tenait que 3,3:1. */
.v-chiffres { border-top-color: rgba(8, 31, 45, .14); }
.v-chiffre__val { color: #C21F37; }
.v-chiffre__u   { color: var(--slate); opacity: 1; }
.v-chiffre__quoi { color: var(--slate); }
.v-tab__note { color: var(--slate); }

/* -- Le bandeau des distances, sur le crème du hero -- */
.v-dist {
  background: none;
  border-top-color: rgba(8, 31, 45, .12);
}
.v-dist__val  { color: #C21F37; }
.v-dist__lieu { color: var(--slate); }
.v-dist__item::after { background: rgba(8, 31, 45, .16); }

/* -- L'en-tête suit le hero devenu clair --
   Le parent éclaircit toute la barre tant qu'elle survole le hero, puisqu'il
   était sombre : logo, liens, téléphone et sélecteur de langue passaient en
   blanc. Sur crème, ils devenaient invisibles. On force donc, dès le premier
   pixel, l'habillage que le parent réservait à l'état défilé. */
.c-header:not(.c-header--solid) {
  --nav-ink: var(--ink);
  --logo-ink: var(--ink);
  --logo-ink-soft: rgba(8, 31, 45, .66);
  --nav-line: rgba(8, 31, 45, .10);
  --lang-bg: rgba(255, 255, 255, .55);
  --lang-line: rgba(8, 31, 45, .14);
}
/* Le téléphone n'utilise pas --nav-ink : il était figé sur la craie. */
.c-header:not(.c-header--solid) .v-tel,
.c-header .v-tel--compact { color: var(--ink); }
.c-header .v-tel svg,
.c-header .v-tel--compact svg { color: var(--red); }

/* Le fond de la barre reste transparent en haut de page — le hero est clair,
   rien ne justifie un voile — et le parent le remplit au défilement. */
.c-header:not(.c-header--solid):not(.is-past) { --nav-bg: transparent; }

/* --------------------------------------------------------------------------
   18. Le bandeau défilant, « Un site équipé » et « Un nouveau visage »
   -------------------------------------------------------------------------- */

/* -- Le bandeau : c'était le plus gros aplat de rouge de la page --
   Il devient une bande claire à filets fins. L'information est la même, elle
   ne crie plus. */
.c-marquee {
  background: var(--cream);
  color: var(--ink);
  border-block: 1px solid rgba(8, 31, 45, .12);
}
.c-marquee__item { color: var(--slate); }
.c-marquee__sep { color: var(--red); opacity: 1; }

/* -- « Un site équipé » --
   Le crème profond distingue la section du hero sans repasser au sombre. */
.c-services {
  background: var(--cream-deep);
  color: var(--ink);
}
/* Le semis de chevrons est un des ingrédients de la lecture « cybersécurité »,
   et il n'apporte rien sur fond clair. */
.c-services__chevrons { display: none; }
.c-services__intro { color: var(--slate); }
/* -- Les cartes de services reprennent le traitement des cartes « Espaces » --
   Même lavis rouge dans le blanc, même filet rouge en haut, même basculement
   au survol. Le filet est posé en pseudo-élément : le balisage des services
   n'a pas de <span> dédié, contrairement à celui des espaces, et il n'y a
   aucune raison de le modifier pour une décoration.

   Ce que je ne reprends pas : les chiffres fantômes 01 à 04. Ils ont un sens
   sur les espaces, qui vont du plus petit au plus grand ; les onze services
   ne sont pas une séquence, les numéroter dirait quelque chose de faux. */
.c-service {
  position: relative;
  overflow: hidden;
  /* Fond transparent : la carte n'est plus qu'un filet, un liseré rouge et du
     texte. Onze cartes pleines faisaient un mur ; évidées, elles laissent
     respirer le crème de la section. Le blanc ne revient qu'au survol. */
  background: transparent;
  padding: 14px 16px 15px;
  border-color: rgba(8, 31, 45, .10);
  transform-style: preserve-3d;
  transition: transform .45s var(--ease), box-shadow .45s ease, border-color .45s ease, background .45s ease;
}
/* Le bandeau reste, mais sans rouge : un filet d'encre qui s'évanouit vers la
   droite. Le geste graphique est le même — une amorce en haut de carte —, il
   ne crie simplement plus. Il s'assombrit au survol, ce qui donne au bloc son
   seul mouvement de couleur. */
.c-service::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, rgba(8, 31, 45, .38), rgba(8, 31, 45, 0) 78%);
  transition: background .45s ease;
}
.c-service:hover::before {
  background: linear-gradient(90deg, rgba(8, 31, 45, .62), rgba(8, 31, 45, 0) 88%);
}
.c-service:hover {
  transform: translateY(-6px) rotateX(3deg) rotateY(-3deg);
  box-shadow: 0 34px 60px -34px rgba(8, 31, 45, .45);
  border-color: rgba(8, 31, 45, .26);
  background: rgba(255, 255, 255, .92);
}
.c-service__title { color: var(--ink); }
.c-service__body  { color: var(--slate); }
.c-service__kicker { color: #C21F37; }

/* -- « Un nouveau visage » -- */
.c-reno {
  background: var(--cream);
  color: var(--ink);
}
.c-reno__glow { display: none; }
.c-reno__p { color: var(--slate); }
.c-reno__atout {
  background: #FFFFFF;
  border-color: rgba(8, 31, 45, .10);
  color: var(--ink);
}
.c-reno__role-label { color: var(--slate); }

/* Le sur-titre « clair » est la variante prévue pour les fonds sombres : rose
   pâle, elle tombe à 2:1 sur crème. On ne la corrige que dans les deux
   sections éclaircies — le hero des pages légales, lui, reste sombre. */
/* Le rouge vif ne tient que 3,68:1 sur le crème : c'est le même rouge, d'un
   cran plus foncé, indiscernable à l'œil et lisible pour tout le monde. */
.c-services .c-kicker--light,
.c-reno .c-kicker--light { color: #C21F37; }
.c-reno__role-nom { color: var(--ink); }

/* Les deux logos vectoriels suivent l'encre par currentColor. Le troisième
   est un PNG blanc : il deviendrait invisible sur fond clair, on le teinte
   par filtre plutôt que de régénérer un fichier. */


/* -- Ce qui était blanc sur fond sombre doit devenir sombre --
   Mécanique, pas esthétique : ces éléments n'ont pas d'autre couleur que
   « la couleur du texte », et le texte a changé de camp. */
.c-services__intro,
.c-reno__p { color: var(--slate); }
.c-service__title,
.c-reno__role-nom { color: var(--ink); }
.c-service__body { color: var(--slate); }
.c-reno__atout { background: #FFFFFF; border-color: rgba(8, 31, 45, .10); color: var(--ink); }
.c-reno__role-label { color: var(--slate); }

/* Le bouton « Lire l'actualité » était un contour blanc. */
.c-btn-outline { border-color: rgba(8, 31, 45, .28); color: var(--ink); }
.c-btn-outline:hover { background: var(--red); border-color: var(--red); color: #fff; }

/* Les logos des intervenants suivent la couleur du texte : ils étaient blancs
   sur le fond nuit. Le troisième est un PNG blanc, teinté par filtre. */
.v-part__logo { color: rgba(8, 31, 45, .78); }
.v-part:hover .v-part__logo { color: var(--ink); }
.v-part__logo--dhb img { filter: brightness(0) saturate(100%) opacity(.78); }
.v-part:hover .v-part__logo--dhb img { filter: brightness(0) saturate(100%); }

/* --------------------------------------------------------------------------
   19. Un motif de fond dans les sections éclaircies
   Un aplat clair uniforme paraît vite vide. Plutôt qu'une trame répétée — qui
   était justement l'un des ingrédients de la lecture « technique » qu'on
   cherche à sortir — on pose UN chevron de la marque, surdimensionné et
   coupé par le bord, à quelques pour cent d'opacité. C'est une signature,
   pas une texture : à cette échelle il se lit comme du papier à en-tête.
   Même géométrie que le logo, aux mêmes coordonnées.
   -------------------------------------------------------------------------- */
.c-hero,
.c-services,
.c-reno { position: relative; }

.c-hero::before,
.c-services::before,
.c-reno::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='656%200%20134%2092'%3E%3Cg%20fill='%23081F2D'%3E%3Cpolygon%20points='683.3,1.2%20664.2,1.2%20700.8,37.8%20737.4,1.2%20718.4,1.2%20700.8,18.7'/%3E%3Cpolygon%20points='718.4,89.9%20737.4,89.9%20700.8,53.3%20664.2,89.9%20683.3,89.9%20700.8,72.4'/%3E%3Cpolygon%20points='656.4,63.1%20656.4,82.1%20693,45.5%20656.4,8.9%20656.4,28%20673.9,45.5'/%3E%3Cpolygon%20points='745,70.9%20745,90%20789.4,45.6%20745,1.1%20745,20.1%20770.4,45.6'/%3E%3C/g%3E%3C/svg%3E");
}

/* Le hero : le chevron sort par la gauche, sous le texte, très effacé. */
.c-hero::before {
  background-position: -14% 62%;
  background-size: 62% auto;
  opacity: .035;
}

/* Les services : il sort par la droite, à contre-sens du hero. */
.c-services::before {
  background-position: 116% 12%;
  background-size: 46% auto;
  opacity: .04;
}

/* La réhabilitation : petit, en bas à gauche, pour ne pas concurrencer la
   perspective architecturale qui occupe déjà la moitié gauche. */
.c-reno::before {
  background-position: -6% 108%;
  background-size: 34% auto;
  opacity: .03;
}

/* Le contenu repasse devant : ces sections n'avaient pas toutes de contexte
   d'empilement explicite. */
.c-hero__inner,
.c-hero .v-dist,
.c-services__inner,
.c-reno__inner { position: relative; z-index: 1; }

/* L'indicateur de défilement a besoin du même passage devant, mais le parent
   le centre par `left: 50%` : lui rendre `position: relative` réactivait ce
   décalage, que le `transform: none` du § 10 ne compensait plus. */
.c-hero .c-scroll { position: relative; left: auto; transform: none; z-index: 1; }

@media (max-width: 720px) {
  /* Sur une colonne étroite, un motif de cette taille devient une tache. */
  .c-hero::before,
  .c-services::before,
  .c-reno::before { opacity: .022; background-size: 90% auto; }
}

/* --------------------------------------------------------------------------
   20. Le titre du hero en gras
   Jost n'était auto-hébergée qu'en 300 — la déclaration « 400 » du fichier de
   polices pointe d'ailleurs sur ce même fichier. Demander du gras aurait
   produit un faux gras, que le navigateur fabrique en épaississant les
   contours : illisible à cette taille. Le vrai fichier 700 est donc ajouté.
   L'interlettrage se resserre légèrement : une graisse forte a besoin de
   moins d'air qu'une graisse fine.
   -------------------------------------------------------------------------- */
.c-hero__title {
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.02;
}

/* Le texte suit la réduction : à taille inchangée dans une carte plus petite,
   il paraîtrait à l'étroit. */
.c-service__kicker { font-size: 10px; letter-spacing: 0.16em; }
.c-service__title  { margin: 7px 0 5px; font-size: 14.5px; }
.c-service__body   { font-size: 12.5px; line-height: 1.5; }
.c-services__grid  { gap: 12px; }

/* --------------------------------------------------------------------------
   21. Les titres de section : une seule taille, en gras
   Le parent en avait deux — .c-h2 à 38 px et .c-h2--sm à 34, cette dernière
   employée par neuf titres sur onze. L'écart était trop faible pour se lire
   comme une hiérarchie et trop visible pour passer inaperçu : deux tailles
   presque égales donnent l'impression d'un réglage oublié, pas d'une
   intention. Elles n'en font plus qu'une, celle du plus grand.
   Même graisse que le titre du hero, et mêmes ajustements : une graisse forte
   demande moins d'interlettrage et moins d'interligne qu'une graisse fine.
   -------------------------------------------------------------------------- */
.c-h2,
.c-h2--sm {
  font-weight: 700;
  font-size: clamp(27px, 3vw, 38px);
  line-height: 1.02;
  letter-spacing: -0.005em;
}

/* Les titres des pages légales suivent, pour ne pas créer une troisième
   voix. */
.c-legal__title { font-weight: 700; letter-spacing: -0.005em; }

/* --------------------------------------------------------------------------
   22. Les chiffres prennent le rouge des boutons
   #E83A51 tient 4,07:1 sur blanc et 3,68:1 sur le crème. Les règles
   d'accessibilité demandent 4,5:1 en texte courant, mais seulement 3:1 dès
   18,66 px en gras — un corps auquel l'œil ne peine plus. Il suffit donc que
   ces chiffres, déjà en graisse 800, ne descendent jamais sous ce seuil : on
   relève leur plancher de 17,6 à 19,2 px. Deux pixels que personne ne
   remarquera, et le rouge de la marque devient légitime partout.
   -------------------------------------------------------------------------- */
.v-chiffre__val {
  font-size: clamp(1.2rem, 1.7vw, 1.45rem);
  color: var(--red);
}
.v-dist__val {
  font-size: 1.2rem;
  color: var(--red);
}
/* 11,5 px en capitales : trop petit pour le rouge vif, qui n'y tient que
   4,07:1. Le foncé donne 5,92:1 et se lit pareil. */
.v-volet--etat.is-reserver { color: #C21F37; }
.v-volet--etat.is-reserver span::before { background: #C21F37; }
.v-tab__cta { color: #C21F37; }

/* --------------------------------------------------------------------------
   23. Le survol des photos ne doit plus « casser »
   Les deux photos vivent dans un conteneur à coins arrondis en overflow
   hidden, et c'est l'image elle-même qui grandit. Pendant la transition, le
   navigateur applique le rognage arrondi sur un calque et l'agrandissement
   sur un autre : les angles de l'image débordent un instant du rayon, ce qui
   se voit comme une rupture aux quatre coins.

   La parade est de forcer le conteneur à composer son propre calque : le
   rognage est alors appliqué au résultat, pas avant. On annonce aussi
   l'agrandissement à venir, pour que la texture soit préparée à la bonne
   définition et non ré-échantillonnée pendant le mouvement.
   -------------------------------------------------------------------------- */
.c-reno__figure,
.v-ciel__scene {
  isolation: isolate;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.c-reno__media img,
.v-ciel__scene img {
  will-change: transform;
  /* Le rognage arrondi du parent s'applique au pixel près, sans liseré. */
  backface-visibility: hidden;
}

/* --------------------------------------------------------------------------
   24. Le beige s'allège, et le pied de page suit
   Le crème profond #EDE9E2 pesait trop face au hero. Les sections qui le
   portaient reprennent le dégradé du hero — celui qui a été retenu — dans une
   valeur plus légère : le fond n'est plus un aplat mais une respiration.
   -------------------------------------------------------------------------- */
.c-services {
  background: linear-gradient(178deg, var(--cream) 0%, #F1EFEA 54%, var(--cream-deep) 100%);
}
.v-hist {
  background: linear-gradient(178deg, #FFFFFF 0%, var(--cream) 60%, #F1EFEA 100%);
}
.c-reno {
  background: linear-gradient(178deg, var(--cream-deep) 0%, var(--cream) 38%, #FFFFFF 100%);
}

/* -- Le pied de page passe en clair --
   Il était le dernier aplat bleu nuit de la page d'accueil. Il garde son rôle
   de clôture par un filet haut et une valeur légèrement plus soutenue que la
   section qui le précède, sans repasser au sombre. */
.c-footer {
  background: linear-gradient(178deg, var(--cream) 0%, var(--cream-deep) 100%);
  color: var(--ink);
  border-top: 1px solid rgba(8, 31, 45, .12);
}
.c-footer__glow { display: none; }

.c-footer__h,
.c-footer__name,
.c-footer__link,
.c-footer__tel { color: var(--ink); }
.c-footer__addr-lines,
.c-footer__small { color: var(--slate); }
/* --muted tombe à 3,5:1 sur ce fond : pour du 12 px, il faut l'ardoise. */
.c-footer__dim { color: var(--slate); }
.c-footer__label { color: #C21F37; }
.c-footer__tel:hover,
.c-footer__link:hover { color: #C21F37; }

.c-footer__route {
  border-color: rgba(8, 31, 45, .26);
  color: var(--ink);
}
.c-footer__route:hover { background: rgba(8, 31, 45, .06); color: var(--ink); }

.c-footer__bar { border-top-color: rgba(8, 31, 45, .12); }
.c-footer__legal { color: var(--slate); }
.c-footer__legal a { color: var(--ink); }
.c-footer__legal a:hover { color: #C21F37; }

/* Le logo du pied de page est figé en blanc dans le thème parent : il faut
   le reprendre, sa classe n'utilisant pas la variable d'encre. */
.c-footer .c-logo__ink-footer { fill: var(--ink); }
.c-footer .c-logo__ink-footer-soft { fill: rgba(8, 31, 45, .66); }

/* ==========================================================================
   25. LE FOND PART VERS LE BLANC
   ==========================================================================

   Les aplats crème pesaient encore : ils faisaient huit champs colorés
   successifs, et le blanc n'apparaissait que dans les cartes. On inverse le
   rapport — le blanc devient le fond, et le crème une touche.

   « Touche » veut dire trois choses ici, et rien de plus :
     · une amorce de crème sur les tout derniers pour-cent d'une section, qui
       marque le passage à la suivante sans qu'on voie une bande ;
     · un filet d'un pixel là où deux sections blanches se succèdent, faute
       de quoi la page perdrait toute articulation ;
     · le chevron en filigrane, déjà en place.

   Une valeur unique sert d'accent, #FAF8F5 — assez proche du blanc pour ne
   jamais se lire comme une couleur, assez présente pour que le regard sente
   la limite.
   -------------------------------------------------------------------------- */
:root { --touche: #FAF8F5; }

.c-page,
.c-espaces,
.c-tarifs,
.c-reservation { background: #FFFFFF; }

/* Le hero garde le mouvement de fond qui a été retenu, décalé vers le blanc. */
.c-hero {
  background: linear-gradient(178deg, #FFFFFF 0%, #FDFCFB 52%, var(--touche) 100%);
}

.c-services {
  background: linear-gradient(178deg, #FFFFFF 0%, #FFFFFF 62%, var(--touche) 100%);
}
.v-hist {
  background: linear-gradient(178deg, var(--touche) 0%, #FFFFFF 34%, #FFFFFF 100%);
}
.c-reno {
  background: linear-gradient(178deg, #FFFFFF 0%, #FFFFFF 70%, var(--touche) 100%);
}
.c-groupe {
  background: #FFFFFF;
  border-top-color: rgba(8, 31, 45, .10);
}
.c-footer {
  background: linear-gradient(178deg, var(--touche) 0%, #F7F5F2 100%);
}

/* Là où deux sections blanches se touchent, un filet remplace la limite de
   couleur qui n'existe plus. */
.c-espaces,
.c-tarifs,
.c-reservation { border-top: 1px solid rgba(8, 31, 45, .07); }

/* Le bandeau défilant devient la seule respiration teintée du haut de page. */
.c-marquee {
  background: var(--touche);
  border-block-color: rgba(8, 31, 45, .10);
}

/* Les cartes évidées avaient le crème pour fond : sur blanc, leur filet doit
   se voir un peu plus pour qu'elles ne flottent pas. */
.c-service { border-color: rgba(8, 31, 45, .14); }
.c-gcard,
.c-park { border-color: rgba(8, 31, 45, .12); }

/* « GROUPE BECI SAS » est devenu un lien : il lui faut la cible tactile des
   autres liens du pied de page, et un survol qui le signale. */
.c-footer__dim {
  /* block et non inline-block : sinon il remonte sur la ligne d'« EUROCAP ».
     La largeur suit le texte, pour que la cible ne s'étende pas à toute la
     colonne. */
  display: block;
  width: fit-content;
  padding-block: 3px;
  text-decoration: none;
}
a.c-footer__dim:hover,
a.c-footer__dim:focus-visible { color: #C21F37; }

/* --------------------------------------------------------------------------
   26. La carte du Nord, avec CREANOR épinglé
   Dessinée en propre à partir des limites administratives ouvertes : aucun
   fond de carte tiers n'est autorisé par la politique de sécurité du contenu,
   et de toute façon un tracé vectoriel reste net à toutes les tailles pour
   douze kilo-octets, là où une tuile bitmap en coûterait dix fois plus.
   -------------------------------------------------------------------------- */
.v-carte {
  margin: 28px 0 0;
  display: grid;
  grid-template-columns: minmax(0, 150px) minmax(0, 1fr);
  align-items: center;
  gap: 20px;
}
.v-carte__svg { display: block; width: 100%; height: auto; overflow: visible; }

/* Le département en aplat très léger, sa côte soulignée d'un filet : la forme
   se lit d'un coup d'œil sans jamais concurrencer le texte voisin. */
.v-carte__terre path {
  fill: rgba(8, 31, 45, .07);
  stroke: rgba(8, 31, 45, .28);
  stroke-width: 3;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* La région porte la teinte de la marque, très diluée : elle situe sans
   voler la vedette à l'épingle. */
.v-carte__region path {
  fill: rgba(232, 58, 81, .16);
  stroke: rgba(194, 31, 55, .55);
  stroke-width: 2;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.v-carte__goutte { fill: var(--red); }
.v-carte__oeil   { fill: #FFFFFF; }
.v-carte__halo   { fill: rgba(232, 58, 81, .13); }
.v-carte__halo--2 { fill: rgba(232, 58, 81, .18); }

/* L'épingle respire, au rythme apaisé du panneau. Le halo s'ouvre et
   s'efface : c'est ce qui attire l'œil sur un point de trois pixels. */
.v-carte__halo   { animation: v-onde 3.4s ease-in-out infinite; transform-origin: center; }
.v-carte__halo--2 { animation-delay: .35s; }
@keyframes v-onde {
  0%, 100% { opacity: .9; transform: scale(.72); }
  55%      { opacity: 0;  transform: scale(1.25); }
}

.v-carte__legende { display: grid; gap: 5px; }
.v-carte__lieu {
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
}
.v-carte__adresse { font-size: 13px; line-height: 1.5; color: var(--slate); }
.v-carte__route {
  justify-self: start;
  margin-top: 4px;
  padding: 6px 0;
  font-size: 12.5px;
  font-weight: 700;
  color: #C21F37;
}
.v-carte__route:hover { color: var(--red); }

@media (max-width: 620px) {
  .v-carte { grid-template-columns: 1fr; gap: 14px; justify-items: center; text-align: center; }
  .v-carte__svg { max-width: 190px; }
  .v-carte__legende { justify-items: center; }
  .v-carte__route { justify-self: center; }
}

/* -- La carte au pied de page --
   Le tracé seul, à côté de l'adresse qui est déjà là. Plus petit qu'en
   section Réservation : ici il rappelle, il ne présente pas. */
.v-pied-contact {
  display: grid;
  grid-template-columns: minmax(0, 104px) minmax(0, 1fr);
  align-items: start;
  gap: 18px;
}
.v-carte--pied { margin: 0; display: block; }
.v-carte--pied .v-carte__svg { width: 100%; }

@media (max-width: 900px) {
  .v-pied-contact { grid-template-columns: minmax(0, 84px) minmax(0, 1fr); gap: 14px; }
}
@media (max-width: 720px) {
  /* Sur une colonne, le pied de page est centré : la carte suit. */
  .v-pied-contact { grid-template-columns: 1fr; justify-items: center; gap: 12px; }
  .v-carte--pied .v-carte__svg { max-width: 120px; }
}

/* La mention de copyright était composée en 9,5 px. À ce corps, l'encre est
   presque entièrement diluée par l'anticrénelage : mesurée au pixel, elle
   ressort à 3,89:1 alors que sa couleur en vaut 6,59. Le seuil n'est pas
   franchi par la teinte mais par la taille. 11,5 px la rendent lisible sans
   la faire peser — c'est le corps des autres mentions du pied de page. */
.c-footer__legal { font-size: 11.5px; }

/* Les noms de services en gras. La surcouche typographique du § 1 les avait
   passés en Jost 400 — le parent, lui, les composait en 700. Ils reprennent
   cette graisse, désormais servie par un vrai fichier et non par un faux
   gras. L'interlettrage se resserre, comme sur les autres titres en gras. */
.c-service__title {
  font-weight: 700;
  letter-spacing: 0;
}