@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) {
  .heros__grille {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  }
}

.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. */
  font-size: clamp(2.6rem, 1.4rem + 5.1vw, 4.75rem);
  line-height: 1.0;
  letter-spacing: -0.05em;
}

.heros__actions {
  margin-top: 1.9rem;
}

.heros__preuves {
  margin-top: 2.25rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--ligne);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 1.25rem;
}

.preuve__chiffre {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
}
.preuve__mot {
  margin-top: 0.35rem;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--encre-tenue);
}

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

.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: 8px;
  height: 8px;
  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: 112px minmax(0, 1fr);
}

.tour__rail {
  padding: 0.9rem 0.55rem;
  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.45rem;
  padding: 0.3rem 0.45rem;
  border-radius: var(--r-sm);
  font-size: 0.6875rem;
  color: var(--encre-tenue);
  background: transparent;
  animation: tour-onglet var(--cycle) linear infinite both;
}
.tour__onglet .icone {
  width: 13px;
  height: 13px;
}

/* 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);
  min-height: 318px;
}
.tour__ecran {
  grid-area: 1 / 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.95rem;
  opacity: 0;
  animation: tour-ecran var(--cycle) ease-in-out infinite both;
}

.tour__titre {
  font-size: 0.625rem;
  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.7rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--ligne);
  border-radius: 10px;
  background: var(--card);
}
.tour__photo {
  width: 46px;
  height: 36px;
  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.75rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--encre);
}
.tour__detail {
  display: block;
  font-size: 0.6875rem;
  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: 11px;
  height: 11px;
}
.tour__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.tour__chip {
  font-size: 0.6875rem;
  padding: 0.2rem 0.55rem;
  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.6rem;
  padding: 0.42rem 0.6rem;
  border: 1px solid var(--ligne);
  border-radius: 10px;
}
.tour__canal .tour__nom {
  width: 74px;
  flex: none;
}
.tour__jauge {
  flex: 1;
  height: 4px;
  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.6rem 0.75rem;
  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: 11px;
  height: 11px;
}

/* 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: 38px;
    height: 30px;
  }
  .tour__ligne {
    gap: 0.5rem;
    padding: 0.45rem 0.5rem;
  }
  .tour__canal .tour__nom {
    width: 60px;
  }
}

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