@charset "UTF-8";

/* ═══════════════════════════════════════════════════════════════════════════
   Immo+ — feuille de style du site de présentation.

   Les valeurs ne sont pas choisies ici : elles sont recopiées de
   `packages/ui-tokens` du dépôt applicatif. Ivoire et crème plutôt que gris
   froid, un seul bleu de marque, aucun vert, des cartes qui se détachent par
   leur bordure et non par leur ombre. Le site et l'application doivent
   pouvoir se regarder côte à côte sans qu'on voie la couture.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ------------------------------------------------------------------ fonte */
/* Inter, servie depuis notre domaine. La direction artistique ne tolère
   qu'une sans-serif, et une fonte chargée chez un tiers ferait dépendre
   l'affichage d'un domaine que nous ne maîtrisons pas. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ----------------------------------------------------------------- jetons */
:root {
  --page: #fdfcfa;
  --rail: #fcfaf7;
  --sheet: #fbf9f5;
  --card: #ffffff;

  --sable: #f4f0e8;
  --sable-fort: #eae3d5;

  --aplat: #f5f5f7;
  --aplat-fort: #ececef;
  --aplat-dense: #d9d9de;

  --ligne: #efebe4;
  --ligne-forte: #e2dbce;

  --encre: #0d0e12;
  --encre-douce: #585b63;
  --encre-tenue: #8c8f98;

  --accent: #4052ff;
  --accent-sombre: #2f3fe0;
  --accent-pale: #eef1fd;

  --ambre: #946012;
  --ambre-pale: #f9efe2;

  --terre: #b4432e;
  --terre-pale: #faede9;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-pilule: 999px;

  --ombre-carte: 0 1px 2px rgba(20, 16, 10, 0.03);
  --ombre-relief: 0 2px 8px rgba(20, 16, 10, 0.05);
  --ombre-flottante: 0 12px 32px rgba(20, 16, 10, 0.1);

  --largeur: 1120px;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica,
    Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, "DejaVu Sans Mono", monospace;
}

/* -------------------------------------------------------------- remise à plat */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

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

body {
  margin: 0;
  background: var(--page);
  color: var(--encre);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Chiffres à chasse fixe : un prix et une surface s'alignent en colonne. */
  font-feature-settings: "tnum" 1, "cv05" 1;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
figure,
blockquote {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

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

a {
  color: inherit;
  text-decoration: none;
}

/* Anneau de focus visible au clavier, identique partout. */
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(64, 82, 255, 0.25);
  border-radius: var(--r-sm);
}

::selection {
  background: var(--accent-pale);
  color: var(--encre);
}

/* --------------------------------------------------------------- typographie */
.h1,
h1 {
  font-size: clamp(2.1rem, 1.3rem + 3.4vw, 3.65rem);
  line-height: 1.06;
  letter-spacing: -0.045em;
  font-weight: 700;
}

.h2,
h2 {
  font-size: clamp(1.6rem, 1.2rem + 1.7vw, 2.35rem);
  line-height: 1.14;
  letter-spacing: -0.035em;
  font-weight: 700;
}

.h3,
h3 {
  font-size: 1.0625rem;
  line-height: 1.35;
  letter-spacing: -0.02em;
  font-weight: 600;
}

.sur-titre {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--encre-tenue);
}

.sur-titre::before {
  content: "";
  width: 18px;
  height: 1px;
  background: var(--ligne-forte);
}

.chapeau {
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem);
  line-height: 1.6;
  color: var(--encre-douce);
}

.texte-doux {
  color: var(--encre-douce);
}
.texte-tenu {
  color: var(--encre-tenue);
}
.mesure {
  max-width: 62ch;
}
.mesure-large {
  max-width: 74ch;
}
.mono {
  font-family: var(--mono);
  font-size: 0.9em;
}

/* ------------------------------------------------------------------ structure */
.enveloppe {
  width: 100%;
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: clamp(1.15rem, 4vw, 2.5rem);
}

.section {
  padding-block: clamp(3.5rem, 7vw, 6rem);
}

.section--serree {
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

.section--feuille {
  background: var(--sheet);
  border-block: 1px solid var(--ligne);
}

.section--sable {
  background: var(--sable);
  border-block: 1px solid var(--sable-fort);
}

.entete-section {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.pile {
  display: flex;
  flex-direction: column;
}
.pile-sm {
  gap: 0.5rem;
}
.pile-md {
  gap: 1rem;
}
.pile-lg {
  gap: 1.75rem;
}

.rangee {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.grille {
  display: grid;
  gap: clamp(0.9rem, 1.6vw, 1.25rem);
}
.grille--2 {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.grille--3 {
  grid-template-columns: repeat(auto-fit, minmax(252px, 1fr));
}
.grille--4 {
  grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
}

/* Un contenu large et une colonne latérale — le formulaire et ses
   coordonnées. `auto-fit` ne convient pas ici : les deux colonnes n'ont pas
   le même poids, et l'aparté doit passer **sous** le formulaire sur mobile,
   jamais à côté. */
.grille--aparte {
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}
@media (min-width: 880px) {
  .grille--aparte {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  }
}

/* --------------------------------------------------------------------- logo */
.logo {
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--encre);
  white-space: nowrap;
}
.logo__plus {
  color: var(--accent);
}
.logo--pied {
  font-size: 1.5rem;
}

/* ------------------------------------------------------------------- boutons */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.6875rem 1.125rem;
  border: 1px solid transparent;
  border-radius: 10px;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  /* Un libellé de bouton ne se coupe jamais en deux : « Demander une démo »
     sur deux lignes fait grandir la barre et déplace tout le reste. Quand la
     place manque, c'est le menu replié qui prend la main, pas le bouton qui
     se plie. */
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease,
    color 0.15s ease, transform 0.15s ease;
}

.bouton .icone {
  width: 17px;
  height: 17px;
}

.bouton--principal {
  background: var(--accent);
  color: #fff;
}
.bouton--principal:hover {
  background: var(--accent-sombre);
}

.bouton--secondaire {
  background: var(--card);
  border-color: var(--ligne-forte);
  color: var(--encre);
}
.bouton--secondaire:hover {
  border-color: var(--encre-tenue);
}

.bouton--discret {
  background: transparent;
  color: var(--encre-douce);
  padding-inline: 0.75rem;
}
.bouton--discret:hover {
  background: var(--sable);
  color: var(--encre);
}

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

.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--accent);
}
.lien-fleche .icone {
  width: 16px;
  height: 16px;
  transition: transform 0.15s ease;
}
.lien-fleche:hover .icone {
  transform: translateX(3px);
}

.lien-souligne {
  color: var(--encre-douce);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--ligne-forte);
}
.lien-souligne:hover {
  color: var(--encre);
}

/* ---------------------------------------------------------------- en-tête */
.entete {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(253, 252, 250, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--ligne);
}

.entete__interieur {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 66px;
}

.entete__nav {
  display: none;
  align-items: center;
  gap: 0.125rem;
  margin-inline: auto;
}

.entete__lien {
  padding: 0.5rem 0.7rem;
  border-radius: 10px;
  font-size: 0.9375rem;
  color: var(--encre-douce);
  transition: background-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.entete__lien:hover {
  background: rgba(244, 240, 232, 0.6);
  color: var(--encre);
}
.entete__lien[aria-current="page"] {
  background: var(--sable);
  color: var(--encre);
  font-weight: 600;
}

.entete__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}

/* Sous 1000 px, l'en-tête ne garde que le logo, la langue et le bouton du
   menu. « Se connecter » et l'appel à l'action descendent dans le panneau
   replié : trois boutons côte à côte sur 375 px se chevauchent, et c'est le
   bouton du menu — le seul qui ouvre le reste du site — qui sortait de
   l'écran. */
.entete__actions > .bouton {
  display: none;
}

@media (min-width: 1120px) {
  .entete__nav {
    display: flex;
  }
  .entete__actions {
    margin-left: 0;
  }
  .entete__actions > .bouton {
    display: inline-flex;
  }
}

/* ------------------------------------------------- sélecteur de langue */
.langues {
  position: relative;
}

.langues > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.65rem;
  border-radius: 10px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--encre-douce);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.langues > summary::-webkit-details-marker {
  display: none;
}
.langues > summary:hover {
  background: var(--sable);
  color: var(--encre);
}
.langues .icone {
  width: 16px;
  height: 16px;
}
.langues > summary .chevron {
  width: 13px;
  height: 13px;
  color: var(--encre-tenue);
  transition: transform 0.15s ease;
}
.langues[open] > summary .chevron {
  transform: rotate(180deg);
}

.langues__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 50;
  min-width: 172px;
  padding: 0.3rem;
  background: var(--card);
  border: 1px solid var(--ligne);
  border-radius: var(--r-md);
  box-shadow: var(--ombre-flottante);
}

.langues__menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0.65rem;
  border-radius: var(--r-sm);
  font-size: 0.9375rem;
  color: var(--encre-douce);
}
.langues__menu a:hover {
  background: var(--sheet);
  color: var(--encre);
}
.langues__menu a[aria-current="true"] {
  background: var(--accent-pale);
  color: var(--accent);
  font-weight: 600;
}
.langues__code {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--encre-tenue);
}
.langues__menu a[aria-current="true"] .langues__code {
  color: var(--accent);
}

/* ------------------------------------------------------- menu mobile */
.menu-mobile > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--ligne-forte);
  border-radius: 10px;
  background: var(--card);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.menu-mobile > summary::-webkit-details-marker {
  display: none;
}
.menu-mobile__barres {
  display: grid;
  gap: 3px;
  width: 15px;
}
.menu-mobile__barres span {
  height: 1.5px;
  background: var(--encre);
  border-radius: 2px;
}

.menu-mobile__panneau {
  position: absolute;
  inset-inline: 0;
  top: 100%;
  z-index: 45;
  padding: 0.5rem clamp(1.15rem, 4vw, 2.5rem) 1.25rem;
  background: var(--card);
  border-bottom: 1px solid var(--ligne);
  box-shadow: var(--ombre-flottante);
}

.menu-mobile__panneau a:not(.bouton) {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0.5rem;
  border-radius: 10px;
  color: var(--encre-douce);
  border-bottom: 1px solid var(--ligne);
}
.menu-mobile__panneau a:not(.bouton):last-of-type {
  border-bottom: 0;
}
.menu-mobile__actions {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--ligne);
}
.menu-mobile__actions .bouton {
  width: 100%;
}
.menu-mobile__panneau a:not(.bouton)[aria-current="page"] {
  color: var(--encre);
  font-weight: 600;
}
.menu-mobile__panneau .icone {
  width: 18px;
  height: 18px;
  color: var(--encre-tenue);
}

@media (min-width: 1120px) {
  .menu-mobile {
    display: none;
  }
}

/* ------------------------------------------------------------------- héros */
.heros {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3rem, 7vw, 5.75rem) clamp(2.5rem, 5vw, 4rem);
  background: linear-gradient(180deg, var(--rail) 0%, var(--page) 72%);
  border-bottom: 1px solid var(--ligne);
}

.heros__grille {
  display: grid;
  gap: clamp(2.25rem, 5vw, 3.5rem);
  align-items: center;
}

@media (min-width: 940px) {
  /* La visite guidée prend la moitié la plus large : c'est elle qu'on regarde
     en arrivant, le texte tient de toute façon en cinq mots. */
  .heros__grille {
    grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  }
}

.heros__titre {
  margin-block: 1.1rem 1.15rem;
  text-wrap: balance;
  /* Plus grand que le `h1` commun : la promesse du héros tient en cinq mots,
     elle a la place de les dire fort.

     Le `min()` est ce qui l'empêche de crier plus fort que l'écran ne le
     permet : réglée sur la seule largeur, la promesse pousse les deux boutons
     sous la ligne de flottaison dès qu'une fenêtre est large mais courte —
     ce qu'est un portable. La hauteur devient alors la contrainte, et elle
     seule ; sur un grand écran le `min()` ne mord jamais. */
  font-size: min(clamp(2.6rem, 1.4rem + 5.1vw, 4.75rem), 10.5vh);
  line-height: 1.0;
  letter-spacing: -0.05em;
}

.heros__actions {
  margin-top: 1.9rem;
}

/* Le héros sur un écran court.

   Tout le rythme vertical d'ici est réglé en `vw` : il suit la largeur, et
   ignore que la fenêtre d'un portable est basse. Le héros dépassait alors de
   cent trente pixels sous la ligne de flottaison, et ce qui tombait dessous
   n'était pas un ornement — c'étaient les deux boutons, la seule chose que
   cette page cherche à faire cliquer.

   On resserre donc les blancs quand c'est la hauteur qui manque, et elle
   seule. Le seuil couvre les portables ; au-delà, le dessin ne bouge pas. */
@media (min-width: 940px) and (max-height: 860px) {
  .heros {
    padding-block: clamp(1.5rem, 4vh, 3.25rem) clamp(1.25rem, 3vh, 2.5rem);
  }
  .heros__titre {
    margin-block: 0.65rem 0.75rem;
  }
  .heros__actions {
    margin-top: 1.2rem;
  }
}

/* La vignette du héros : une esquisse de l'écran, au trait du kit, sans
   capture d'écran — une capture vieillit à la première retouche d'interface. */
.vignette {
  position: relative;
  background: var(--card);
  border: 1px solid var(--ligne);
  border-radius: var(--r-lg);
  box-shadow: var(--ombre-relief);
  overflow: hidden;
}

.vignette__barre {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.05rem;
  border-bottom: 1px solid var(--ligne);
  background: var(--rail);
}
.vignette__pastilles {
  display: flex;
  gap: 5px;
}
.vignette__pastilles i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--aplat-dense);
}
.vignette__adresse {
  flex: 1;
  padding: 0.32rem 0.7rem;
  border-radius: var(--r-pilule);
  background: var(--card);
  border: 1px solid var(--ligne);
  font-size: 0.75rem;
  color: var(--encre-tenue);
  text-align: center;
}

.vignette__corps {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  min-height: 300px;
}

.vignette__rail {
  padding: 0.9rem 0.55rem;
  background: var(--rail);
  border-right: 1px solid var(--ligne);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.vignette__onglet {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.45rem;
  border-radius: var(--r-sm);
  font-size: 0.6875rem;
  color: var(--encre-tenue);
}
.vignette__onglet .icone {
  width: 13px;
  height: 13px;
}
.vignette__onglet--actif {
  background: var(--sable);
  color: var(--encre);
  font-weight: 600;
}

.vignette__vue {
  padding: 0.95rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.vignette__ligne {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--ligne);
  border-radius: 10px;
  background: var(--card);
}
.vignette__photo {
  width: 42px;
  height: 34px;
  border-radius: 6px;
  background: var(--sable);
  border: 1px solid var(--sable-fort);
  flex: none;
  display: grid;
  place-items: center;
  color: var(--encre-tenue);
}
.vignette__photo .icone {
  width: 15px;
  height: 15px;
}
.vignette__texte {
  flex: 1;
  min-width: 0;
}
.vignette__titre {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.vignette__detail {
  display: block;
  font-size: 0.6875rem;
  color: var(--encre-tenue);
}

.pastille {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.16rem 0.45rem;
  border-radius: var(--r-pilule);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.pastille--bleue {
  background: var(--accent-pale);
  color: var(--accent);
}
.pastille--sable {
  background: var(--sable);
  color: var(--ambre);
}
.pastille--eteinte {
  background: var(--aplat);
  color: var(--encre-tenue);
}

/* ------------------------------------------------------------------ cartes */
.carte {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: clamp(1.15rem, 2vw, 1.5rem);
  background: var(--card);
  border: 1px solid var(--ligne);
  border-radius: var(--r-md);
  box-shadow: var(--ombre-carte);
  transition: border-color 0.15s ease, box-shadow 0.15s ease,
    transform 0.15s ease;
}

a.carte:hover {
  border-color: var(--ligne-forte);
  box-shadow: var(--ombre-relief);
  transform: translateY(-2px);
}

.carte__texte {
  font-size: 0.9375rem;
  line-height: 1.58;
  color: var(--encre-douce);
}

.carte--sable {
  background: var(--sable);
  border-color: var(--sable-fort);
  box-shadow: none;
}

.carte--accent {
  background: var(--accent-pale);
  border-color: #dfe4fb;
  box-shadow: none;
}

.carte--nue {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

/* Le médaillon : l'aplat ivoire qui porte l'icône. C'est lui qui donne le
   grain de la marque — il ne doit jamais devenir un carré bleu. */
.medaillon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: var(--r-pilule);
  background: var(--sable);
  color: var(--encre);
}
.medaillon .icone {
  width: 18px;
  height: 18px;
}
.medaillon--bleu {
  background: var(--accent-pale);
  color: var(--accent);
}
.medaillon--grand {
  width: 46px;
  height: 46px;
}
.medaillon--grand .icone {
  width: 21px;
  height: 21px;
}

.icone {
  width: 20px;
  height: 20px;
  flex: none;
}

/* --------------------------------------------------------------- listes */
.liste-cochee {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.liste-cochee li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--encre-douce);
}
.liste-cochee .icone {
  width: 17px;
  height: 17px;
  margin-top: 0.24rem;
  color: var(--accent);
}

.liste-points {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.liste-points li {
  position: relative;
  padding-left: 1.1rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--encre-douce);
}
.liste-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.63rem;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--sable-fort);
}

/* Une liste numérotée qui compte pour quelque chose : les étapes d'une
   chaîne de traitement, l'ordre d'un parcours. */
.etapes {
  counter-reset: etape;
  display: grid;
  gap: 1rem;
}
.etape {
  counter-increment: etape;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.etape::before {
  content: counter(etape);
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: var(--r-pilule);
  background: var(--card);
  border: 1px solid var(--ligne-forte);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--encre-douce);
}

/* ------------------------------------------------------------ étiquettes */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.32rem 0.7rem;
  border-radius: var(--r-pilule);
  background: var(--card);
  border: 1px solid var(--ligne);
  font-size: 0.8125rem;
  color: var(--encre-douce);
}
.chip .icone {
  width: 15px;
  height: 15px;
  color: var(--encre-tenue);
}
.chip--sable {
  background: var(--sable);
  border-color: var(--sable-fort);
  color: var(--encre);
}

/* ------------------------------------------------------------------ notes */
.note {
  display: flex;
  gap: 0.8rem;
  padding: 1rem 1.1rem;
  border-radius: var(--r-md);
  border: 1px solid var(--ligne);
  background: var(--card);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--encre-douce);
}
.note .icone {
  width: 18px;
  height: 18px;
  margin-top: 0.15rem;
  color: var(--encre-tenue);
}
.note--ambre {
  background: var(--ambre-pale);
  border-color: #f0e0c9;
  color: #6f4a10;
}
.note--ambre .icone {
  color: var(--ambre);
}
.note--bleue {
  background: var(--accent-pale);
  border-color: #dfe4fb;
  color: #2a3390;
}
.note--bleue .icone {
  color: var(--accent);
}

/* --------------------------------------------------------------- tableaux */
.tableau-enveloppe {
  overflow-x: auto;
  border: 1px solid var(--ligne);
  border-radius: var(--r-md);
  background: var(--card);
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  min-width: 480px;
}
thead th {
  padding: 0.85rem 1.1rem;
  text-align: left;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--encre-tenue);
  border-bottom: 1px solid var(--ligne);
  background: var(--sheet);
  white-space: nowrap;
}
tbody td {
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid var(--ligne);
  color: var(--encre-douce);
  vertical-align: top;
}
tbody tr:last-child td {
  border-bottom: 0;
}
tbody td:first-child {
  color: var(--encre);
  font-weight: 600;
}

/* ---------------------------------------------------------------- tarifs */
.prix {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  letter-spacing: -0.04em;
}
.prix__montant {
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
}
.prix__unite {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--encre-tenue);
  letter-spacing: 0;
}

.carte-tarif {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: clamp(1.4rem, 2.5vw, 1.9rem);
  background: var(--card);
  border: 1px solid var(--ligne);
  border-radius: var(--r-lg);
  box-shadow: var(--ombre-carte);
}
.carte-tarif--mise-en-avant {
  border-color: var(--accent);
  box-shadow: var(--ombre-relief);
}

/* Une offre unique ne s'étire pas sur toute la largeur : une carte de mille
   pixels de large avec sept lignes dedans a l'air d'un formulaire, pas d'une
   proposition. */
.tarif-seul {
  max-width: 560px;
  margin-inline: auto;
}
.carte-tarif__pied {
  margin-top: auto;
  padding-top: 0.25rem;
}

/* ------------------------------------------------------------ formulaire */
.champ {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.libelle-champ {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--encre-tenue);
}
input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea {
  width: 100%;
  padding: 0.65rem 0.875rem;
  border: 1px solid var(--ligne-forte);
  border-radius: 10px;
  background: var(--card);
  font: inherit;
  font-size: 0.9375rem;
  color: var(--encre);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
select {
  padding-right: 2.25rem;
  appearance: auto;
}
textarea {
  min-height: 138px;
  resize: vertical;
  line-height: 1.6;
}
input::placeholder,
textarea::placeholder {
  color: var(--encre-tenue);
}
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(64, 82, 255, 0.1);
}
input[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border-color: var(--terre);
}
.erreur-champ {
  font-size: 0.8125rem;
  color: var(--terre);
}

/* Le pot de miel : invisible à l'œil, atteignable par un robot. Rien de
   `display: none`, que certains remplisseurs automatiques ignorent. */
.pot-de-miel {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --------------------------------------------------------- questions */
.question {
  border-bottom: 1px solid var(--ligne);
}
.question > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 0.25rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  cursor: pointer;
  list-style: none;
}
.question > summary::-webkit-details-marker {
  display: none;
}
.question > summary .icone {
  width: 17px;
  height: 17px;
  color: var(--encre-tenue);
  transition: transform 0.15s ease;
}
.question[open] > summary .icone {
  transform: rotate(180deg);
}
.question__reponse {
  padding: 0 0.25rem 1.2rem;
  font-size: 0.9375rem;
  line-height: 1.62;
  color: var(--encre-douce);
  max-width: 72ch;
}

/* ----------------------------------------------------------- appel final */
.appel {
  position: relative;
  overflow: hidden;
  padding: clamp(2rem, 5vw, 3.25rem);
  border-radius: var(--r-lg);
  background: var(--card);
  border: 1px solid var(--ligne);
  box-shadow: var(--ombre-carte);
  text-align: center;
}
.appel .village {
  width: min(340px, 78%);
  margin: 1.75rem auto 0;
  color: var(--ligne-forte);
}

/* ------------------------------------------------------------------- pied */
.pied {
  background: var(--rail);
  border-top: 1px solid var(--ligne);
  padding-block: clamp(2.5rem, 5vw, 3.5rem) 1.75rem;
}
.pied__grille {
  display: grid;
  gap: 2.25rem;
  grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
}
.pied__colonne h4 {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--encre-tenue);
  margin-bottom: 0.9rem;
}
.pied__colonne a {
  display: block;
  padding-block: 0.28rem;
  font-size: 0.9375rem;
  color: var(--encre-douce);
}
.pied__colonne a:hover {
  color: var(--encre);
}
.pied__signature {
  font-size: 0.875rem;
  color: var(--encre-tenue);
  margin-top: 0.4rem;
}
.pied .village {
  width: 190px;
  margin-top: 1.1rem;
  color: var(--ligne-forte);
}
.pied__bas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  margin-top: 2.5rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--ligne);
  font-size: 0.8125rem;
  color: var(--encre-tenue);
}

/* --------------------------------------------------------------- divers */
.saut-au-contenu {
  position: absolute;
  left: -9999px;
  z-index: 100;
  padding: 0.7rem 1.1rem;
  background: var(--accent);
  color: #fff;
  border-radius: 0 0 var(--r-sm) 0;
  font-weight: 600;
}
.saut-au-contenu:focus {
  left: 0;
  top: 0;
}

.centre {
  text-align: center;
}
.centre .sur-titre,
.centre .rangee {
  justify-content: center;
}
.centre .entete-section {
  align-items: center;
}

.separateur {
  height: 1px;
  background: var(--ligne);
  border: 0;
  margin-block: clamp(2rem, 4vw, 3rem);
}

/* ═══════════════════════════════════════════════════════════════════════════
   La visite guidée et les avantages — deux blocs animés.

   Ni l'un ni l'autre n'est une vidéo : ce sont des écrans dessinés en HTML que
   le CSS fait défiler. Le texte y reste net, se traduit, et ne réclame ni
   téléchargement ni lecteur. Les deux respectent `prefers-reduced-motion` : à
   qui demande moins de mouvement, l'animation se fige sur son premier état et
   la liste écrite en dessous prend le relais.

   Le rythme vit dans deux variables — le nombre de pas et leur durée. Les
   retards se calculent à partir d'elles ; changer la cadence se fait sur une
   ligne.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ------------------------------------------------------------ visite guidée */
.tour {
  --pas: 4;
  --temps: 3.9s;
  --cycle: calc(var(--pas) * var(--temps));

  position: relative;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--ligne);
  border-radius: var(--r-lg);
  box-shadow: var(--ombre-relief);
}

.tour__barre {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--ligne);
  background: var(--rail);
}
.tour__pastilles {
  display: flex;
  gap: 5px;
}
.tour__pastilles i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--aplat-dense);
}
.tour__adresse {
  flex: 1;
  padding: 0.25rem 0.6rem;
  border-radius: var(--r-pilule);
  background: var(--card);
  border: 1px solid var(--ligne);
  font-size: 0.6875rem;
  color: var(--encre-tenue);
  text-align: center;
}

.tour__corps {
  display: grid;
  grid-template-columns: 134px minmax(0, 1fr);
}

.tour__rail {
  padding: 1.05rem 0.6rem;
  background: var(--rail);
  border-right: 1px solid var(--ligne);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tour__onglet {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.42rem 0.55rem;
  border-radius: var(--r-sm);
  font-size: 0.75rem;
  color: var(--encre-tenue);
  background: transparent;
  animation: tour-onglet var(--cycle) linear infinite both;
}
.tour__onglet .icone {
  width: 15px;
  height: 15px;
}

/* La scène : les quatre écrans occupent la même case de grille, un seul est
   visible à la fois. La hauteur est fixée par le plus haut d'entre eux, sinon
   la page sauterait à chaque changement. */
.tour__scene {
  display: grid;
  /* La colonne est bornée à la place disponible. Sans cette contrainte, la
     grille prenait la largeur du plus large des quatre écrans — 249 px là où
     le téléphone n'en offrait que 224 — et `overflow: hidden` rognait la
     droite sans rien dire. Sur un écran large la différence ne se voyait pas ;
     sur un téléphone, les pastilles d'état disparaissaient. */
  grid-template-columns: minmax(0, 1fr);
  /* Assez haute pour que la fenêtre remplisse le premier écran sans pousser
     le reste de la page hors de vue, et bornée pour ne pas devenir un mur sur
     un grand moniteur. */
  min-height: clamp(340px, 56vh, 620px);
}
.tour__ecran {
  grid-area: 1 / 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 1.15rem;
  opacity: 0;
  animation: tour-ecran var(--cycle) ease-in-out infinite both;
}

/* La scène est plus haute que ce que trois des quatre écrans ont à montrer :
   le titre reste en haut de la fenêtre, et le reste se centre dans la place
   qui reste plutôt que de laisser un vide sous lui. Les deux marges
   automatiques se partagent l'espace libre à parts égales — au-dessus du
   groupe et au-dessous — ce qui le centre sans écarter les lignes entre
   elles. L'écran des visuels n'est pas concerné : son image prend la place
   par `flex`, et il ne reste rien à distribuer. */
.tour__ecran > .tour__titre + * {
  margin-top: auto;
}
.tour__ecran > :last-child {
  margin-bottom: auto;
}

.tour__titre {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--encre-tenue);
}

/* --- écran 1 : le portefeuille */
.tour__ligne {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--ligne);
  border-radius: 10px;
  background: var(--card);
}
.tour__photo {
  width: 58px;
  height: 45px;
  flex: none;
  border-radius: 6px;
  object-fit: cover;
  border: 1px solid var(--ligne);
}
.tour__texte {
  flex: 1;
  min-width: 0;
}
.tour__nom {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--encre);
}
.tour__detail {
  display: block;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--encre-tenue);
}

/* --- écran 2 : l'atelier des visuels */
.tour__visuel {
  position: relative;
  flex: 1;
  min-height: 0;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--ligne);
}
.tour__visuel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tour__badge {
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
  background: var(--card);
  box-shadow: var(--ombre-relief);
  animation: tour-surgir var(--cycle) ease-out infinite both;
  animation-delay: calc(var(--temps) * 1 + 0.9s);
}
.tour__badge .icone {
  width: 12px;
  height: 12px;
}
.tour__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.tour__chip {
  font-size: 0.75rem;
  padding: 0.25rem 0.65rem;
  opacity: 0;
  animation: tour-surgir var(--cycle) ease-out infinite both;
}
.tour__chip--0 { animation-delay: calc(var(--temps) * 1 + 0.25s); }
.tour__chip--1 { animation-delay: calc(var(--temps) * 1 + 0.45s); }
.tour__chip--2 { animation-delay: calc(var(--temps) * 1 + 0.65s); }

/* --- écran 3 : la diffusion */
.tour__canal {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--ligne);
  border-radius: 10px;
}
.tour__canal .tour__nom {
  width: 86px;
  flex: none;
}
.tour__jauge {
  flex: 1;
  height: 5px;
  border-radius: var(--r-pilule);
  background: var(--aplat-fort);
  overflow: hidden;
}
.tour__jauge i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--accent);
  animation: tour-jauge var(--cycle) ease-out infinite both;
}
.tour__canal .pastille {
  opacity: 0;
  animation: tour-surgir var(--cycle) ease-out infinite both;
}
.tour__canal--0 i, .tour__canal--0 .pastille { animation-delay: calc(var(--temps) * 2 + 0.3s); }
.tour__canal--1 i, .tour__canal--1 .pastille { animation-delay: calc(var(--temps) * 2 + 0.5s); }
.tour__canal--2 i, .tour__canal--2 .pastille { animation-delay: calc(var(--temps) * 2 + 0.7s); }
.tour__canal--3 i, .tour__canal--3 .pastille { animation-delay: calc(var(--temps) * 2 + 0.9s); }
.tour__canal--4 i, .tour__canal--4 .pastille { animation-delay: calc(var(--temps) * 2 + 1.1s); }

/* --- écran 4 : la messagerie */
.tour__bulle {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  align-items: flex-start;
  max-width: 88%;
  padding: 0.75rem 0.9rem;
  border-radius: 12px;
}
.tour__bulle--recue {
  background: var(--sable);
  border: 1px solid var(--sable-fort);
  border-bottom-left-radius: 4px;
}
.tour__bulle--brouillon {
  align-self: flex-end;
  background: var(--accent-pale);
  border: 1px solid #dfe4fb;
  border-bottom-right-radius: 4px;
  opacity: 0;
  animation: tour-surgir var(--cycle) ease-out infinite both;
  animation-delay: calc(var(--temps) * 3 + 0.8s);
}
.tour__bulle--brouillon .tour__detail {
  color: #2a3390;
}
.tour__bulle .pastille .icone {
  width: 12px;
  height: 12px;
}

/* Un quart du cycle par écran : il entre sur les deux premiers centièmes,
   tient jusqu'à 22 %, sort avant que le suivant n'entre. */
@keyframes tour-ecran {
  0% { opacity: 0; transform: translateY(9px); }
  3%, 21% { opacity: 1; transform: none; }
  24%, 100% { opacity: 0; transform: translateY(-7px); }
}
@keyframes tour-onglet {
  0%, 24.9% { background: transparent; color: var(--encre-tenue); font-weight: 400; }
  2%, 23% { background: var(--sable); color: var(--encre); font-weight: 600; }
  25%, 100% { background: transparent; color: var(--encre-tenue); font-weight: 400; }
}
@keyframes tour-surgir {
  0% { opacity: 0; transform: translateY(6px) scale(0.96); }
  4%, 21% { opacity: 1; transform: none; }
  24%, 100% { opacity: 0; transform: none; }
}
@keyframes tour-jauge {
  0% { width: 0; }
  9%, 21% { width: 100%; }
  24%, 100% { width: 100%; opacity: 0; }
}

/* ---------------------------------------------------------------- avantages */
.avantages {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
@media (min-width: 900px) {
  .avantages {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

/* Le panneau : l'ivoire de la marque, traversé d'un faisceau bleu. Le violet
   du site qui a inspiré ce bloc n'existe pas dans cette palette, et il n'y
   entre pas par la porte de derrière. */
.avantages__scene {
  --pas: 5;
  --temps: 2.7s;
  --cycle: calc(var(--pas) * var(--temps));

  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(266px, 32vw, 340px);
  padding: 1.5rem;
  overflow: hidden;
  border-radius: var(--r-lg);
  border: 1px solid var(--sable-fort);
  background:
    radial-gradient(115% 85% at 80% 90%, rgba(64, 82, 255, 0.26) 0%, rgba(64, 82, 255, 0) 56%),
    linear-gradient(150deg, #fdfbf6 0%, var(--sable) 44%, #dde2fa 100%);
}

/* Le faisceau : une bande claire en diagonale, qui donne la profondeur sans
   demander d'image. */
.avantages__scene::after {
  content: "";
  position: absolute;
  inset: -40% -10%;
  background: linear-gradient(
    118deg,
    transparent 38%,
    rgba(255, 255, 255, 0.65) 50%,
    transparent 62%
  );
  pointer-events: none;
}

.avantages__carte {
  grid-area: 1 / 1;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: min(340px, 100%);
  padding: 0.85rem 1rem;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 30px rgba(20, 16, 10, 0.09);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  animation: avantage-carte var(--cycle) cubic-bezier(0.22, 0.9, 0.3, 1) infinite both;
}
.avantages__carte .medaillon {
  width: 34px;
  height: 34px;
  background: var(--accent-pale);
}
.avantages__carte .medaillon .icone {
  width: 16px;
  height: 16px;
}
.avantages__titre {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--encre);
}
.avantages__detail {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--encre-douce);
}

/* Un cinquième du cycle par carte : elle monte, tient, et s'efface vers le
   haut pendant que la suivante monte à son tour. */
@keyframes avantage-carte {
  0% { opacity: 0; transform: translateY(34px) scale(0.95); }
  4%, 16% { opacity: 1; transform: none; }
  20%, 100% { opacity: 0; transform: translateY(-26px) scale(0.97); }
}

.avantages__liste {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.avantages__liste li {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
}
.avantages__liste strong {
  display: block;
  font-size: 1rem;
  letter-spacing: -0.02em;
  margin-bottom: 0.15rem;
}
.avantages__liste .carte__texte {
  display: block;
}

/* Sur un téléphone, une colonne de navigation de 112 px prend le tiers de la
   largeur pour des mots que personne ne lit dans une image animée. Elle se
   réduit à ses icônes : la vue passe de 224 à 294 px, et les lignes de biens
   respirent. */
@media (max-width: 559px) {
  .tour__corps {
    grid-template-columns: 44px minmax(0, 1fr);
  }
  .tour__rail {
    padding: 0.7rem 0.25rem;
  }
  .tour__onglet {
    justify-content: center;
    padding: 0.45rem 0;
  }
  .tour__onglet > span {
    display: none;
  }
  .tour__photo {
    width: 44px;
    height: 34px;
  }
  .tour__ligne {
    gap: 0.6rem;
    padding: 0.55rem 0.6rem;
  }
  .tour__canal .tour__nom {
    width: 68px;
  }
}

/* --------------------------------------------------------- la cadence
   Le rang d'un élément dans sa boucle. Ces règles closent la section, et
   c'est délibéré : `animation` en raccourci — que posent `.tour__ecran` et
   `.avantages__carte` — remet `animation-delay` à zéro, et à poids égal c'est
   la dernière règle qui gagne. Écrites plus haut, elles étaient silencieusement
   annulées et les cinq cartes montaient toutes en même temps. */
.pas-0 { animation-delay: calc(var(--temps) * 0); }
.pas-1 { animation-delay: calc(var(--temps) * 1); }
.pas-2 { animation-delay: calc(var(--temps) * 2); }
.pas-3 { animation-delay: calc(var(--temps) * 3); }
.pas-4 { animation-delay: calc(var(--temps) * 4); }

/* ------------------------------------------------- moins de mouvement */
/* Aucune des deux animations n'est nécessaire à la compréhension : la visite
   se fige sur son premier écran, les cartes disparaissent au profit de la
   liste écrite, qui dit exactement la même chose. */
@media (prefers-reduced-motion: reduce) {
  .tour__ecran,
  .tour__onglet,
  .tour__chip,
  .tour__badge,
  .tour__jauge i,
  .tour__canal .pastille,
  .tour__bulle--brouillon,
  .avantages__carte {
    animation: none !important;
  }
  .tour__ecran {
    opacity: 0;
  }
  .tour__ecran.pas-0 {
    opacity: 1;
  }
  .tour__onglet.pas-0 {
    background: var(--sable);
    color: var(--encre);
    font-weight: 600;
  }
  .avantages__scene {
    display: none;
  }
  .avantages {
    grid-template-columns: minmax(0, 1fr);
  }
}


/* ═══════════════════════════════════════════════ vidéo et galerie de biens */

/* Une vraie photo de bien, pas une image de banque. Le cadre est celui des
   cartes : bordure d'un pixel, coins de 12, aucune ombre portée. */
.media {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--ligne);
  border-radius: var(--r-md);
  background: var(--sable);
}
.media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.media--large {
  border-radius: var(--r-lg);
}

.media__legende {
  position: absolute;
  left: 0.7rem;
  bottom: 0.7rem;
  padding: 0.3rem 0.7rem;
  border-radius: var(--r-pilule);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--encre);
}

/* La bande de biens : quatre vignettes qui gardent leurs proportions et se
   replient d'elles-mêmes. */
.galerie {
  display: grid;
  gap: clamp(0.6rem, 1.2vw, 0.9rem);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.galerie .media {
  aspect-ratio: 4 / 3;
}

.demonstration {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
@media (min-width: 900px) {
  .demonstration {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  }
}
.demonstration .media {
  aspect-ratio: 4 / 3;
}