/* =========================================================================
   PATRIIM - feuille de style de la vitrine publique
   Ecrite a la main, sans etape de compilation : le serveur la sert telle
   quelle. Le systeme reprend la palette arretee sur la maquette v3.3 :
   un vert petrole pour l'institution, un or sourd pour la distinction,
   un creme pour le fond. Les titres sont en serif, le texte en sans.
   ========================================================================= */

:root {
  /*
   | La base institutionnelle vient du logo, pas d'ailleurs.
   |
   | Le portail portait un bleu-canard que le logo PATRIIM ne contient pas :
   | un visiteur voyait deux marques. Ces trois valeurs sont desormais des
   | assombrissements du vert du logo (#006738), assez sourds pour rester
   | « l'institution » et laisser les deux registres - le vert vif de
   | l'immobilier, l'orange du foncier - se detacher dessus. Les noms de
   | variables sont conserves : ils sont cites partout dans cette feuille.
   */
  --teal:      #063A28;
  --teal-clair:#0A5B3C;
  --nuit:      #04281B;
  --or:        #BAA360;
  --or-fonce:  #8C6F2A;
  --creme:     #FAF8F3;
  --blanc:     #FFFFFF;
  --gris:      #6E685B;
  --gris-clair:#9A9382;
  --bord:      #E4DECD;
  --bord-pale: #EFEAE0;
  --vert:      #2F7D4F;
  --vert-clair:#E8F2EA;
  --rouge:     #B4483F;
  --rouge-clair:#F7ECEA;
  --ambre:     #8C6F2A;
  --ambre-clair:#F6EFDD;
  --encre:     #17170F;
  --encre-doux:#4A473C;

  --serif: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  --sans:  -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --ombre-1: 0 1px 2px rgba(6, 58, 40, .06);
  --ombre-2: 0 8px 24px rgba(6, 58, 40, .10);
  --ombre-3: 0 18px 48px rgba(6, 58, 40, .16);

  --rayon:   12px;
  --rayon-s: 8px;
  --rayon-l: 18px;

  --gouttiere: 22px;
  --largeur:   1180px;
}

/* --------------------------------------------------------------- socle */

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

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

body {
  margin: 0;
  background: var(--creme);
  color: var(--encre);
  font-family: var(--sans);
  font-size: 17.5px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
a.lien { color: var(--teal); border-bottom: 1px solid rgba(6, 58, 40, .25); }
a.lien:hover { border-bottom-color: var(--teal); }

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

h1, h2, h3, h4 { font-family: var(--serif); color: var(--teal); margin: 0; font-weight: 700; line-height: 1.2; }
h1 { font-size: clamp(34px, 4.8vw, 54px); letter-spacing: -.015em; }
/* Le titre d'une vue de bandeau : il a l'allure d'un h1 sans en etre un,
   la page n'en portant qu'un seul, independant du nombre de vues. */
.titre-vue { font-family: var(--serif); color: var(--teal); font-weight: 700;
  line-height: 1.2; font-size: clamp(34px, 4.8vw, 54px); letter-spacing: -.015em; }
h2 { font-size: clamp(27px, 3.3vw, 37px); }
h3 { font-size: 22px; }
h4 { font-size: 18px; }

p { margin: 0 0 14px; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--or); color: #fff; }

:focus-visible {
  outline: 2px solid var(--or-fonce);
  outline-offset: 3px;
  border-radius: 4px;
}

.saut-contenu {
  position: absolute; left: -9999px; top: 0;
  background: var(--teal); color: #fff; padding: 10px 16px; z-index: 100;
  border-radius: 0 0 var(--rayon-s) 0;
}
.saut-contenu:focus { left: 0; }

/* --------------------------------------------------------- structure */

.wrap { max-width: var(--largeur); margin: 0 auto; padding: 0 var(--gouttiere); }
.wrap-etroit { max-width: 780px; margin: 0 auto; padding: 0 var(--gouttiere); }

section { padding: 54px 0; }
section.serre { padding: 34px 0; }
section.blanche {
  background: var(--blanc);
  border-top: 1px solid var(--bord);
  border-bottom: 1px solid var(--bord);
}
section.nuit { background: var(--nuit); color: #CCDED2; }
section.nuit h2, section.nuit h3 { color: #fff; }

.grille { display: grid; gap: 18px; }
/* Une piste de grille vaut « auto » comme largeur minimale : elle refuse
   donc de descendre sous la largeur intrinseque de ce qu'elle contient, et
   un dessin un peu large fait deborder toute la page sur un telephone.
   C'est ce qui poussait la fiche d'un lot a 414 px dans 390. */
.grille > * { min-width: 0; }
.c2 { grid-template-columns: repeat(2, 1fr); }
.c3 { grid-template-columns: repeat(3, 1fr); }
.c4 { grid-template-columns: repeat(4, 1fr); }
.c21 { grid-template-columns: 2fr 1fr; }
.c12 { grid-template-columns: 1fr 2fr; }
.aligne-centre { align-items: center; }

.pile > * + * { margin-top: 14px; }
.rang { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.rang-fin { justify-content: flex-end; }
.pousse { margin-left: auto; }

/* ------------------------------------------------------------ typographie */

.sourcil {
  font-size: 13px; letter-spacing: .14em; color: var(--or-fonce);
  font-weight: 700; text-transform: uppercase; margin-bottom: 10px;
}
.chapeau { color: var(--encre-doux); max-width: 68ch; font-size: 19.5px; line-height: 1.62; }
.meta { font-size: 15px; color: var(--gris); line-height: 1.6; }
.meta b { color: var(--encre-doux); }
.num { font-variant-numeric: tabular-nums; }
.prix {
  font-family: var(--serif); font-size: 23.5px; color: var(--teal);
  font-weight: 700; font-variant-numeric: tabular-nums;
}
.prix.gros { font-size: 34px; }
.muet { color: var(--gris-clair); }

/* ---------------------------------------------------------------- boutons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--teal); background: var(--blanc); color: var(--teal);
  border-radius: var(--rayon-s); padding: 11px 18px;
  font-size: 15.5px; font-family: var(--sans); font-weight: 500;
  cursor: pointer; transition: background .16s, color .16s, box-shadow .16s, transform .16s;
  text-align: center;
}
.btn:hover { background: var(--teal); color: #fff; box-shadow: var(--ombre-1); }
.btn:active { transform: translateY(1px); }
.btn.or { background: var(--or-fonce); border-color: var(--or-fonce); color: #fff; }
.btn.or:hover { background: #755C22; border-color: #755C22; }

/* Le bouton d'appel prend la couleur du registre ou il se trouve : sur une
   page foncier, un bouton or a cote d'un orange se lit comme une faute. Les
   deux teintes ci-dessous sont assombries pour porter du blanc a 4,8:1 au
   moins - l'orange du logo, lui, ne passe pas en fond de texte. */
[data-registre] .btn.or {
  background: var(--registre-bouton); border-color: var(--registre-bouton);
}
[data-registre] .btn.or:hover {
  background: var(--registre-bouton-vif); border-color: var(--registre-bouton-vif);
}
.btn.pleine { background: var(--teal); color: #fff; }
.btn.pleine:hover { background: var(--teal-clair); }
.btn.fantome { border-color: var(--bord); color: var(--gris); background: transparent; }
.btn.fantome:hover { border-color: var(--teal); background: var(--blanc); color: var(--teal); }
.btn.claire { border-color: rgba(255,255,255,.4); color: #fff; background: transparent; }
.btn.claire:hover { background: #fff; color: var(--teal); border-color: #fff; }
.btn.sm { padding: 7px 13px; font-size: 14px; }
.btn.bloc { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ----------------------------------------------------------------- cartes */

.carte {
  background: var(--blanc); border: 1px solid var(--bord);
  border-radius: var(--rayon); overflow: hidden;
}
.carte.pad { padding: 20px; }
.carte.douce { box-shadow: var(--ombre-1); }
.carte.survol { transition: box-shadow .18s, transform .18s, border-color .18s; }
.carte.survol:hover { box-shadow: var(--ombre-2); transform: translateY(-3px); border-color: #D8CFB5; }

.encart {
  background: var(--blanc); border: 1px solid var(--bord);
  border-left: 4px solid var(--or); border-radius: var(--rayon-s);
  padding: 15px 18px; font-size: 15px; color: var(--encre-doux);
}
.encart.alerte { border-left-color: var(--rouge); background: var(--rouge-clair); }
.encart.bien   { border-left-color: var(--vert); background: var(--vert-clair); }
.encart b { color: var(--encre); }

hr { border: 0; border-top: 1px solid var(--bord-pale); margin: 16px 0; }

/* ------------------------------------------------------------- etiquettes */

.et {
  display: inline-block; padding: 3px 11px; border-radius: 999px;
  font-size: 13px; font-weight: 700; letter-spacing: .01em; white-space: nowrap;
}
.et.dispo { background: var(--vert-clair); color: var(--vert); }
.et.opt   { background: var(--ambre-clair); color: var(--ambre); }
.et.res   { background: #EFEDE6; color: #6B6657; }
.et.vendu { background: #E9E6DE; color: #807A6A; }
.et.susp  { background: var(--rouge-clair); color: var(--rouge); }
.et.neutre{ background: var(--bord-pale); color: var(--gris); }
/* L'attente n'est ni un feu vert ni un feu rouge : la piece existe, elle
   n'a pas encore ete vue. L'ambre le dit sans accuser personne. */
.et.attente { background: var(--ambre-clair); color: var(--or-fonce); border: 1px solid rgba(140,111,42,.26); }

.puce {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--bord); border-radius: 999px; padding: 5px 13px;
  font-size: 14.5px; color: var(--gris); background: var(--blanc);
  cursor: pointer; transition: all .15s;
}
.puce:hover { border-color: var(--teal); color: var(--teal); }
.puce.on { background: var(--teal); border-color: var(--teal); color: #fff; font-weight: 600; }

/* ------------------------------------------------------------------ sceau */

.sceau {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--blanc); border: 1px solid var(--or); border-radius: 999px;
  padding: 5px 14px 5px 8px; font-size: 13px; color: var(--or-fonce); font-weight: 700;
}
.sceau svg { width: 18px; height: 18px; flex: none; }
.sceau { max-width: 100%; }
.pcarte .vignette .coin { max-width: calc(100% - 24px); }
/* Le sceau en attente : la meme forme, une teinte qui ne promet rien. Un
   visiteur doit voir du premier coup d'oeil que ce dossier n'est pas encore
   verifie, sans qu'on lui crie dessus. */
.sceau.attente { border-color: var(--bord); color: var(--gris); background: var(--creme); }
.sceau.attente.sombre {
  background: rgba(20,20,14,.66); border-color: rgba(255,255,255,.34); color: #E7E2D6;
  backdrop-filter: saturate(140%) blur(7px); box-shadow: 0 3px 14px rgba(0,0,0,.28);
}

/* Sur une photographie, un sceau translucide ne se lit plus : il lui faut
   un fond a lui. C'est la piece qui certifie le programme, elle doit rester
   lisible quelle que soit l'image qui passe dessous. */
.sceau.sombre {
  background: rgba(4,26,22,.72); border-color: rgba(217,196,138,.72); color: #F0E4BE;
  backdrop-filter: saturate(140%) blur(7px);
  box-shadow: 0 3px 14px rgba(0,0,0,.28);
}

/* Le pied de carte tient sur une ligne : le nom d'un promoteur long
   repoussait la carte d'un cran et cassait l'alignement de la grille. */
.pcarte .pied .rang { flex-wrap: nowrap; gap: 12px; align-items: center; }
.pcarte .pied .rang > .meta:last-of-type {
  margin-left: auto; text-align: right; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pcarte .pied .rang > .meta:first-of-type { white-space: nowrap; flex: none; }

/* --------------------------------------------------------------- en-tete */

header.principal {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .94);
  border-bottom: 1px solid var(--bord);
  backdrop-filter: saturate(140%) blur(8px);
  transition: box-shadow .2s, background .2s;
}
header.principal.defile { box-shadow: 0 2px 16px rgba(6, 58, 40,.08); background: rgba(255,255,255,.98); }

.barre { display: flex; align-items: center; gap: 24px; padding: 13px 0; }

/* La marque : le logo depose, et la devise que le back-office ecrit. */
.marque { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.marque .logo { height: 30px; width: auto; display: block; flex: none; }
.marque .devise {
  display: block; font-size: 13px; color: var(--gris);
  letter-spacing: .03em; line-height: 1.25;
}
.logo-plaque {
  display: inline-block; background: #fff; border-radius: var(--rayon-s);
  padding: 9px 12px; line-height: 0;
}
@media (max-width: 640px) {
  .marque .logo { height: 26px; }
  .marque .devise { display: none; }
}

nav.principale { display: flex; gap: 2px; margin-left: auto; align-items: center; }
nav.principale a {
  padding: 9px 14px; border-radius: var(--rayon-s); font-size: 15.5px;
  color: #2B2A22; transition: background .15s, color .15s;
}
nav.principale a:hover { background: var(--creme); color: var(--teal); }
nav.principale a.on { color: var(--teal); font-weight: 700; }
nav.principale a.on::after {
  content: ''; display: block; height: 2px; background: var(--or-fonce);
  border-radius: 2px; margin-top: 5px;
}

.burger {
  display: none; margin-left: auto; border: 1px solid var(--bord); background: #fff;
  border-radius: var(--rayon-s); padding: 9px 11px; cursor: pointer;
}
.burger span { display: block; width: 18px; height: 2px; background: var(--teal); border-radius: 2px; }
.burger span + span { margin-top: 4px; }

/* ------------------------------------------------------------------- hero */

.hero { position: relative; overflow: hidden; background: var(--nuit); color: #DCE9EA; }
.hero .fond { position: absolute; inset: 0; opacity: .5; }
.hero .fond svg { width: 100%; height: 100%; }
.hero .contenu { position: relative; padding: 76px 0 66px; }
.hero h1, .hero .titre-vue { color: #fff; }
.hero .chapeau { color: #BDD4C4; }
.hero .sourcil { color: var(--or); }

.compteurs {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: rgba(255, 255, 255, .14); border-radius: var(--rayon); overflow: hidden;
}
.compteurs.large { grid-template-columns: repeat(4, 1fr); }
.compteurs div { background: rgba(4, 40, 27,.85); padding: 18px 16px; }
.compteurs b {
  display: block; font-family: var(--serif); font-size: 32px; color: #fff;
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.compteurs span { font-size: 13.5px; color: #9FBDA8; }

/* --------------------------------------------------------- barre de tri */

.recherche-rapide {
  background: var(--blanc); border: 1px solid var(--bord); border-radius: var(--rayon-l);
  padding: 14px; box-shadow: var(--ombre-3); display: grid;
  grid-template-columns: 1.4fr 1fr 1fr auto; gap: 12px; align-items: end;
}

.filtres {
  background: var(--blanc); border: 1px solid var(--bord); border-radius: var(--rayon);
  padding: 16px; display: flex; flex-direction: column; gap: 14px;
}
/* Les criteres replies : la grille d'origine vit maintenant la-dedans. */
.filtres-grille {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; align-items: end;
  padding-top: 14px;
}
.filtres-plus { min-width: 0; }
.filtres-plus > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 600; color: var(--teal);
  border: 1px solid var(--bord); border-radius: 999px; padding: 8px 14px; width: max-content;
}
.filtres-plus > summary::-webkit-details-marker { display: none; }
.filtres-plus > summary::after {
  content: ''; width: 7px; height: 7px; border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor; transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .18s ease;
}
.filtres-plus[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.filtres-plus > summary:hover { border-color: var(--teal); }
.filtres-plus .compte {
  background: var(--teal); color: #fff; border-radius: 999px;
  min-width: 20px; height: 20px; padding: 0 6px; font-size: 12px;
  display: inline-flex; align-items: center; justify-content: center;
}
.champ { min-width: 0; }

/* La recherche libre tient toute la premiere ligne de la grille : c'est le
   geste premier, et un champ de la largeur d'un menu deroulant ne se
   propose pas, il se subit. */
.champ-recherche { grid-column: 1 / -1; }
.champ-recherche input[type=search] { font-size: 16px; padding: 12px 14px; }
.champ > label, .etiquette {
  font-size: 12.5px; letter-spacing: .1em; color: var(--gris); text-transform: uppercase;
  display: block; margin-bottom: 6px; font-weight: 700;
}

select, input[type=text], input[type=email], input[type=tel], input[type=search], input[type=number], input[type=date], textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--bord); border-radius: var(--rayon-s);
  background: var(--blanc); font-size: 15px; font-family: var(--sans); color: var(--encre);
  transition: border-color .15s, box-shadow .15s;
}
select:focus, input:focus, textarea:focus {
  outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(6, 58, 40,.10);
}
textarea { resize: vertical; min-height: 96px; }
input[type=range] { width: 100%; accent-color: var(--or-fonce); }

.aide { font-size: 14.5px; color: var(--gris); margin-top: 6px; line-height: 1.55; }
.erreur { font-size: 13.5px; color: var(--rouge); margin-top: 5px; font-weight: 600; }

/* ------------------------------------------------------- carte programme */

.pcarte {
  background: var(--blanc); border: 1px solid var(--bord); border-radius: var(--rayon);
  overflow: hidden; display: flex; flex-direction: column;
  transition: box-shadow .18s, transform .18s, border-color .18s;
}
.pcarte:hover { box-shadow: var(--ombre-2); transform: translateY(-3px); border-color: #D8CFB5; }
.pcarte .vignette { position: relative; aspect-ratio: 16 / 9; background: var(--teal); overflow: hidden; }
.pcarte .vignette > svg { width: 100%; height: 100%; display: block; }
.pcarte .vignette .bandeau {
  position: absolute; inset: auto 0 0 0; padding: 14px 16px;
  background: linear-gradient(to top, rgba(4, 40, 27,.92), rgba(4, 40, 27,0));
  color: #fff;
}
.pcarte .vignette .nom { font-family: var(--serif); font-size: 19px; font-weight: 700; }
.pcarte .vignette .lieu { font-size: 13.5px; color: #CCDED2; }
.pcarte .vignette .coin { position: absolute; top: 12px; right: 12px; }
.pcarte .corps { padding: 16px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.pcarte .pied { margin-top: auto; }

.jauge { height: 8px; background: #EDE8DA; border-radius: 999px; overflow: hidden; display: flex; }
.jauge i { display: block; height: 100%; transition: width .6s cubic-bezier(.22,.61,.36,1); }
.jauge i.d { background: var(--vert); }
.jauge i.o { background: var(--or); }
.jauge i.r { background: #B9B2A0; }
.jauge i.v { background: #8E8878; }

.legende { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--gris); }
.legende span { display: inline-flex; align-items: center; gap: 6px; }
.pastille { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }

/* ------------------------------------------------------------- galerie */

/* ------------------------------------------------------------- la galerie */
/*
   Toutes les vues ont la meme taille. La grille precedente donnait une
   grande tuile a gauche et deux petites a droite, ce qui laissait un quart
   vide des qu'il y avait trois images - et deux legendes ecrasees sur un
   dessin trop petit pour elles. Une vue ne vaut pas plus qu'une autre tant
   que personne ne l'a dit : elles se partagent la largeur a egalite.
*/
.galerie {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 900px) { .galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .galerie { grid-template-columns: 1fr; gap: 12px; } }
.galerie .item {
  position: relative; margin: 0;
  border-radius: var(--rayon-l); overflow: hidden; isolation: isolate;
  border: 1px solid var(--bord); background: var(--bord-pale);
  aspect-ratio: 4 / 3; cursor: zoom-in;
  box-shadow: var(--ombre-1);
  transition: transform .42s var(--sortie), box-shadow .42s var(--sortie),
              border-color .42s var(--sortie);
}
.galerie .item svg, .galerie .item img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .8s cubic-bezier(.2, .7, .25, 1), filter .5s ease;
}

/* Le voile : il n'existe que pour rendre la legende lisible, donc il ne
   couvre que le bas de l'image et s'epaissit quand on s'approche. */
.galerie .item::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top,
              rgba(2, 22, 15, .78) 0%, rgba(2, 22, 15, .34) 26%, rgba(2, 22, 15, 0) 52%);
  transition: opacity .42s var(--sortie);
}

/* La loupe : elle dit que la vue s'ouvre, et n'apparait qu'au survol. */
.galerie .item .loupe {
  position: absolute; z-index: 2; top: 12px; right: 12px;
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .92); color: var(--teal);
  opacity: 0; transform: scale(.7) translateY(-4px);
  transition: opacity .3s var(--sortie), transform .42s var(--sortie);
  box-shadow: var(--ombre-1);
}
.galerie .item .loupe svg { width: 17px; height: 17px; transition: none; }

.galerie .item:hover, .galerie .item:focus-visible {
  transform: translateY(-5px);
  box-shadow: var(--ombre-3);
  border-color: var(--registre-bord, var(--bord));
}
.galerie .item:hover img, .galerie .item:focus-visible img,
.galerie .item:hover svg, .galerie .item:focus-visible svg { transform: scale(1.075); }
.galerie .item:hover::after, .galerie .item:focus-visible::after { opacity: .88; }
.galerie .item:hover .loupe, .galerie .item:focus-visible .loupe {
  opacity: 1; transform: scale(1) translateY(0);
}
.galerie .item:focus-visible { outline: 3px solid var(--registre-vif, var(--or-fonce)); outline-offset: 3px; }

/* La legende tient sur une ligne et ne monte jamais sur le sujet. */
.galerie .item .tag {
  position: absolute; z-index: 2; left: 12px; right: 12px; bottom: 12px;
  color: #fff; font-size: 13.5px; font-weight: 600; letter-spacing: .01em;
  text-shadow: 0 1px 3px rgba(2, 22, 15, .6);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transform: translateY(0); transition: transform .42s var(--sortie);
}
.galerie .item:hover .tag { transform: translateY(-2px); }

/* Chaque tuile arrive apres la precedente, pas toutes d'un coup.
   L'etat cache est porte par la section revelable qui les contient : une
   galerie posee ailleurs reste visible, quoi qu'il arrive au script. */
.revele .galerie .item { opacity: 0; transform: translateY(12px); }
.revele.vu .galerie .item { animation: monte .55s var(--sortie) forwards; }
.revele.vu .galerie .item:nth-child(2) { animation-delay: .09s; }
.revele.vu .galerie .item:nth-child(3) { animation-delay: .18s; }
.revele.vu .galerie .item:nth-child(4) { animation-delay: .27s; }
.revele.vu .galerie .item:nth-child(5) { animation-delay: .36s; }
@keyframes monte { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .revele .galerie .item { opacity: 1; transform: none; animation: none !important; }
  .galerie .item img, .galerie .item svg, .galerie .item .tag,
  .galerie .item .loupe { transition: none !important; }
  .galerie .item:hover { transform: none; }
  .galerie .item:hover img, .galerie .item:hover svg { transform: none; }
  .galerie .item .loupe { opacity: 1; transform: none; }
}

.visionneuse {
  position: fixed; inset: 0; background: rgba(4, 40, 27,.94); z-index: 90;
  display: none; align-items: center; justify-content: center; padding: 30px;
}
.visionneuse.on { display: flex; }
.visionneuse figure { margin: 0; max-width: 1000px; width: 100%; }
.visionneuse figcaption { color: #CCDED2; font-size: 14px; margin-top: 12px; text-align: center; }
.visionneuse .fermer {
  position: absolute; top: 18px; right: 22px; background: none; border: 0;
  color: #fff; font-size: 32px; cursor: pointer; line-height: 1;
}
.visionneuse .nav {
  position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.12);
  border: 0; color: #fff; font-size: 28px; width: 46px; height: 46px; border-radius: 50%;
  cursor: pointer;
}
.visionneuse .nav.prec { left: 18px; }
.visionneuse .nav.suiv { right: 18px; }

/* ---------------------------------------------------------- plan des lots */

.plan { display: flex; flex-wrap: wrap; gap: 6px; }
.plan .lot {
  width: 46px; height: 46px; border-radius: var(--rayon-s); border: 1px solid transparent;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #fff; cursor: pointer;
  transition: transform .12s, box-shadow .12s;
}
.plan .lot:hover { transform: scale(1.12); box-shadow: var(--ombre-2); z-index: 2; }
.plan .lot.d { background: var(--vert); }
.plan .lot.o { background: var(--or-fonce); }
.plan .lot.r { background: #8D8672; }
.plan .lot.v { background: #C9C3B2; color: #6B6657; }
.groupe-plan + .groupe-plan { margin-top: 18px; }
.groupe-plan .titre {
  font-size: 13px; font-weight: 700; color: var(--gris); margin-bottom: 8px;
  letter-spacing: .06em; text-transform: uppercase;
}

/* ------------------------------------------------------------- tableaux */

table.donnees {
  border-collapse: collapse; width: 100%; background: var(--blanc);
  border: 1px solid var(--bord); border-radius: var(--rayon); overflow: hidden; font-size: 15px;
}
table.donnees th {
  background: var(--teal); color: #fff; text-align: left; padding: 11px 14px;
  font-weight: 600; font-size: 13.5px; letter-spacing: .03em;
}
table.donnees td { padding: 11px 14px; border-top: 1px solid var(--bord-pale); vertical-align: top; }
table.donnees th.num, table.donnees td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.donnees tbody tr:hover td { background: #FCFAF5; }

.paires { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 38px; row-gap: 0; }
.paires > div {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 12px 0; border-bottom: 1px solid var(--bord-pale); font-size: 16px;
}
.paires dt, .paires .cle { color: var(--gris); }
.paires dd, .paires .val { margin: 0; font-weight: 600; text-align: right; }

/* ---------------------------------------------------------------- frise */

.frise { border-left: 2px solid var(--bord); margin-left: 9px; padding-left: 22px; }
.evt { position: relative; padding-bottom: 24px; }
.evt::before {
  content: ''; position: absolute; left: -29px; top: 5px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--or-fonce); border: 2px solid var(--creme);
  box-shadow: 0 0 0 2px var(--or);
}
.evt .date { font-size: 13px; letter-spacing: .08em; color: var(--or-fonce); font-weight: 700; text-transform: uppercase; }
.evt .titre { font-family: var(--serif); font-weight: 700; color: var(--teal); font-size: 18px; margin: 3px 0 5px; }

/* ------------------------------------------------------------- onglets */

.onglets { display: flex; gap: 2px; border-bottom: 1px solid var(--bord); overflow-x: auto; }
.onglets button {
  border: 0; background: none; padding: 12px 16px; font-size: 15.5px; color: var(--gris);
  cursor: pointer; border-bottom: 2px solid transparent; font-family: var(--sans); white-space: nowrap;
  transition: color .15s, border-color .15s;
}
.onglets button:hover { color: var(--teal); }
.onglets button.on { color: var(--teal); font-weight: 700; border-bottom-color: var(--or-fonce); }
.volet { display: none; padding-top: 24px; }
.volet.on { display: block; animation: apparait .3s ease both; }

/* ------------------------------------------------------------ accordeon */

.accordeon > details {
  background: var(--blanc); border: 1px solid var(--bord); border-radius: var(--rayon-s);
  margin-bottom: 8px; overflow: hidden;
}
.accordeon > details > summary {
  padding: 14px 18px; cursor: pointer; font-weight: 600; color: var(--teal);
  list-style: none; display: flex; align-items: center; gap: 10px;
}
.accordeon > details > summary::-webkit-details-marker { display: none; }
.accordeon > details > summary::after { content: '+'; margin-left: auto; font-size: 19px; color: var(--or-fonce); }
.accordeon > details[open] > summary::after { content: '\2013'; }
.accordeon > details .corps { padding: 0 18px 16px; font-size: 15px; color: var(--encre-doux); }

/* ------------------------------------------------------------ simulateur */

.simulateur { background: var(--creme); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 18px; }
.simulateur .sortie {
  background: var(--blanc); border: 1px solid var(--bord); border-radius: var(--rayon-s);
  padding: 14px; margin-top: 14px;
}
.barre-etapes { display: flex; border-radius: 999px; overflow: hidden; height: 28px; background: #EDE8DA; }
.barre-etapes i {
  display: flex; align-items: center; justify-content: center; height: 100%;
  font-size: 13px; font-weight: 700; color: #fff; font-style: normal;
  border-right: 1px solid rgba(255,255,255,.5);
}
.barre-etapes i:last-child { border-right: 0; }

/* ------------------------------------------------------- comparateur */

.barre-comparateur {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  background: var(--nuit); color: #fff; padding: 12px 0;
  transform: translateY(110%); transition: transform .26s cubic-bezier(.22,.61,.36,1);
}
.barre-comparateur.on { transform: translateY(0); }
.barre-comparateur .wrap { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.barre-comparateur .liste { display: flex; gap: 8px; flex-wrap: wrap; }
.barre-comparateur .jeton {
  background: rgba(255,255,255,.12); border-radius: 999px; padding: 5px 10px 5px 13px;
  font-size: 13.5px; display: inline-flex; align-items: center; gap: 8px;
}
.barre-comparateur .jeton button { background: none; border: 0; color: #CCDED2; cursor: pointer; font-size: 16px; line-height: 1; }

/* ------------------------------------------------------------ apparition */

.apparait { opacity: 0; transform: translateY(14px); }
.apparait.vu { animation: apparait .6s cubic-bezier(.22,.61,.36,1) both; }
@keyframes apparait { to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------- message */

.message {
  border-radius: var(--rayon); padding: 14px 18px; font-size: 15.5px;
  border: 1px solid var(--bord); background: var(--blanc);
}
.message.succes { background: var(--vert-clair); border-color: #CDE2D3; color: #1F5B39; }
.message.echec  { background: var(--rouge-clair); border-color: #E7C9C5; color: #8E352E; }

/* ------------------------------------------------------------ fil d'ariane */

.ariane { font-size: 14px; color: var(--gris); padding: 16px 0 0; }
.ariane a:hover { color: var(--teal); }
.ariane span { margin: 0 7px; color: var(--bord); }

/* ----------------------------------------------------------------- pied */

footer.principal { background: var(--nuit); color: #9FBDA8; margin-top: 0; padding: 48px 0 26px; }
footer.principal .mot { color: #fff; }
footer.principal .marque-pied { display: block; }
footer.principal h4 { color: #fff; font-size: 15px; margin-bottom: 12px; letter-spacing: .04em; }
footer.principal a { color: #CFE0E1; }
footer.principal a:hover { color: #fff; }
footer.principal ul { list-style: none; margin: 0; padding: 0; font-size: 15px; }
footer.principal li { margin-bottom: 8px; }
.coul {
  border-top: 1px solid rgba(255,255,255,.12); margin-top: 30px; padding-top: 18px;
  font-size: 13.5px; display: flex; gap: 16px; flex-wrap: wrap; align-items: center;
}

/* ------------------------------------------------------------ vide */

.vide {
  text-align: center; padding: 60px 20px; background: var(--blanc);
  border: 1px dashed var(--bord); border-radius: var(--rayon); color: var(--gris);
}
.vide h3 { margin-bottom: 8px; }

/* ------------------------------------------------------------ pagination */

.pagination { display: flex; gap: 6px; justify-content: center; margin-top: 30px; flex-wrap: wrap; }
.pagination a, .pagination span {
  min-width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--bord); border-radius: var(--rayon-s); background: var(--blanc);
  font-size: 15px; color: var(--gris); padding: 0 10px;
}
.pagination a:hover { border-color: var(--teal); color: var(--teal); }
.pagination .on { background: var(--teal); border-color: var(--teal); color: #fff; font-weight: 700; }
.pagination .off { opacity: .4; }

/* ---------------------------------------------------------- responsive */

@media (max-width: 980px) {
  .c4 { grid-template-columns: repeat(2, 1fr); }
  .c3 { grid-template-columns: repeat(2, 1fr); }
  .c21, .c12 { grid-template-columns: 1fr; }
  .filtres-grille { grid-template-columns: repeat(2, 1fr); }
  .champ-recherche { grid-column: 1 / -1; }
  .recherche-rapide { grid-template-columns: 1fr 1fr; }
  nav.principale { display: none; }
  nav.principale.ouverte {
    display: flex; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; background: var(--blanc);
    border-bottom: 1px solid var(--bord); padding: 10px var(--gouttiere) 16px; gap: 2px;
    box-shadow: var(--ombre-2);
  }
  nav.principale.ouverte a.on::after { display: none; }
  .burger { display: block; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  section { padding: 38px 0; }
  .c2, .c3, .c4 { grid-template-columns: 1fr; }
  .filtres, .recherche-rapide { grid-template-columns: 1fr; }
  .paires { grid-template-columns: 1fr; }
  .hero .contenu { padding: 46px 0 40px; }
  .marque .devise { display: none; }
  table.donnees { font-size: 14px; }
  table.donnees th, table.donnees td { padding: 9px 10px; }
}

/* ----------------------------------------------------------- impression */

/* L'acquereur ivoirien montre un papier a sa famille et a sa banque.
   Aucune bibliotheque PDF n'etant installable sur ce poste, la feuille
   d'impression fait le travail : « Imprimer » du navigateur rend un PDF
   propre, et le portail n'embarque pas une dependance de plus. */

@media print {
  header.principal, footer.principal, .barre-comparateur, .btn, .visionneuse,
  .joindre, .joindre-flottant, .saut-contenu, .filtres, .ariane,
  .diaporama, .banniere-registre, .partager, .mettre-de-cote,
  nav.principale, .burger, .pastilles, .fleche, [data-cote] { display: none !important; }

  body { background: #fff; color: #000; font-size: 11pt; }
  .wrap { max-width: none; padding: 0; }
  section { padding: 0 0 10pt !important; }
  h1 { font-size: 20pt; }
  h2 { font-size: 14pt; margin-top: 12pt; }
  h3 { font-size: 12pt; }
  a { text-decoration: none; color: #000; }

  /* Une adresse imprimee sert a revenir sur la page : sans elle, le
     papier ne dit pas d'ou il vient. */
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8.5pt; color: #444; }

  .carte, table.donnees, figure, .encart { break-inside: avoid; }
  img { max-width: 100% !important; height: auto !important; }

  /* L'en-tete de page imprimee : la marque et l'origine du document. */
  .entete-impression { display: block !important; margin-bottom: 10pt;
    border-bottom: 1pt solid #000; padding-bottom: 6pt; }
  .entete-impression b { font-size: 13pt; }
  .entete-impression span { display: block; font-size: 9pt; color: #333; }
}

/* Hors impression, l'en-tete de page imprimee n'existe pas. */
.entete-impression { display: none; }


/* ------------------------------------------- plan d'ecoulement par ilot */
.plan-masse { width: 100%; height: auto; display: block; border-radius: var(--rayon-s); }

/* =======================================================================
   Le plan du site, les offres, les ilots qui se deroulent
   ======================================================================= */

/* ------------------------------------------------------- plan du site */
.plan-site {
  margin: 0;
  background: var(--blanc);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  overflow: hidden;
  box-shadow: var(--ombre-1);
}
.plan-site img { width: 100%; height: auto; display: block; }
.plan-site figcaption {
  padding: 13px 18px;
  font-size: 15px;
  color: var(--gris);
  border-top: 1px solid var(--bord-pale);
  background: linear-gradient(to bottom, #FDFCF9, var(--blanc));
}
.plan-site figcaption b { color: var(--teal); }

/* ------------------------------------------------------------ la cite */
.cite { margin-bottom: 34px; }
.cite:last-child { margin-bottom: 0; }
.cite-tete {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding-bottom: 12px; margin-bottom: 18px;
  border-bottom: 1px solid var(--bord);
}
.cite-tete .puce {
  width: 11px; height: 11px; border-radius: 3px;
  background: var(--cite, var(--teal)); flex: none;
  transform: translateY(-1px);
}
.cite-tete h3 { font-size: 21.5px; color: var(--cite, var(--teal)); }
.cite-tete .meta { margin-left: auto; font-size: 14px; }

/* --------------------------------------------------------- les offres */
.offres {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: 20px;
}
.offre {
  background: var(--blanc);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: var(--ombre-1);
  transition: transform .22s cubic-bezier(.22,.61,.36,1),
              box-shadow .22s, border-color .22s;
}
.offre:hover {
  transform: translateY(-5px);
  box-shadow: var(--ombre-2);
  border-color: color-mix(in srgb, var(--cite, var(--teal)) 40%, var(--bord));
}
.offre:focus-visible { outline: 2px solid var(--or-fonce); outline-offset: 3px; }

.offre .dessin { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--teal); }
.offre .dessin svg { width: 100%; height: 100%; display: block; transition: transform .5s cubic-bezier(.22,.61,.36,1); }
.offre:hover .dessin svg { transform: scale(1.055); }
.offre .gamme {
  position: absolute; left: 10px; bottom: 10px;
  font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  background: rgba(255,255,255,.93); color: var(--teal);
  padding: 4px 9px; border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0,0,0,.14);
}

.offre .dedans { padding: 14px 15px 13px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.offre .nom {
  font-family: var(--serif); font-size: 20.5px; font-weight: 700;
  color: var(--teal); letter-spacing: -.005em; line-height: 1.15;
}
.offre .traits { display: flex; flex-wrap: wrap; gap: 5px; }
.offre .traits span {
  font-size: 14px; color: var(--encre-doux);
  background: var(--creme); border: 1px solid var(--bord-pale);
  padding: 3px 8px; border-radius: 999px;
}
.offre .prix-rang { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.offre .prix { font-family: var(--serif); font-size: 22.5px; font-weight: 700; color: var(--encre); }
.offre .prix-rang .meta { font-size: 12.5px; }

.offre .ecoulement { height: 5px; background: #ECE7D9; border-radius: 999px; overflow: hidden; }
.offre .ecoulement i {
  display: block; height: 100%;
  background: var(--cite, var(--teal));
  transition: width .8s cubic-bezier(.22,.61,.36,1);
}
.offre .pied-offre {
  margin-top: auto; padding-top: 10px; border-top: 1px solid var(--bord-pale);
  font-size: 14.5px; color: var(--gris); display: flex; align-items: center; gap: 5px;
}
.offre .pied-offre b { color: var(--vert); font-size: 14.5px; }
.offre .fleche {
  margin-left: auto; color: var(--or-fonce); font-size: 18px;
  transition: transform .22s;
}
.offre:hover .fleche { transform: translateX(4px); }

/* ---------------------------------------------- les ilots se deroulent */
details.groupe-plan { border-bottom: 1px solid var(--bord-pale); }
details.groupe-plan:last-of-type { border-bottom: 0; }
details.groupe-plan > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  padding: 11px 2px; user-select: none;
  transition: color .15s;
}
details.groupe-plan > summary::-webkit-details-marker { display: none; }
details.groupe-plan > summary:hover { color: var(--teal); }
details.groupe-plan > summary:focus-visible { outline: 2px solid var(--or-fonce); outline-offset: 2px; border-radius: 4px; }
details.groupe-plan > summary .chevron {
  width: 9px; height: 9px; flex: none;
  border-right: 2px solid var(--or-fonce); border-bottom: 2px solid var(--or-fonce);
  transform: rotate(-45deg) translate(-1px, -1px);
  transition: transform .22s cubic-bezier(.22,.61,.36,1);
}
details.groupe-plan[open] > summary .chevron { transform: rotate(45deg) translate(-2px, -2px); }
details.groupe-plan > summary .titre {
  font-size: 16px; font-weight: 600; color: var(--encre);
  font-family: var(--sans); letter-spacing: 0;
}
details.groupe-plan > summary .compte {
  margin-left: auto; font-size: 13.5px; color: var(--gris-clair); white-space: nowrap;
}
details.groupe-plan > summary .compte b { color: var(--vert); margin-left: 6px; }
details.groupe-plan > .plan { padding: 4px 0 16px; animation: deroule .26s cubic-bezier(.22,.61,.36,1); }

@keyframes deroule {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  details.groupe-plan > .plan { animation: none; }
  .offre, .offre .dessin svg, .offre .fleche { transition: none; }
}

@media (max-width: 720px) {
  .offres { grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 14px; }
  .cite-tete .meta { margin-left: 0; width: 100%; }
}

/* ------------------------------------------- le plan du stock par tranche */
.tranche-plan { margin-bottom: 22px; }
.tranche-plan:last-of-type { margin-bottom: 0; }
.tranche-tete {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 0 2px 9px; margin-bottom: 4px;
  border-bottom: 2px solid var(--cite, var(--teal));
}
.tranche-tete .puce {
  width: 9px; height: 9px; border-radius: 2px; flex: none;
  background: var(--cite, var(--teal)); transform: translateY(-1px);
}
.tranche-tete b { font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--cite, var(--teal)); }
.tranche-tete .meta { margin-left: auto; font-size: 13.5px; }
.etiq-ilot {
  font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--or-fonce); background: var(--ambre-clair);
  border: 1px solid rgba(140,111,42,.28); border-radius: 999px; padding: 2px 8px;
}

/* =======================================================================
   Le bandeau du promoteur, et la barre de navigation du programme
   ======================================================================= */

/* -------------------------------------------------- bandeau du promoteur */
.bandeau-promoteur {
  background:
    radial-gradient(120% 180% at 12% 0%, rgba(186,163,96,.22), transparent 58%),
    linear-gradient(105deg, var(--nuit) 0%, var(--teal) 52%, var(--teal-clair) 100%);
  color: #fff;
  border-top: 1px solid rgba(186,163,96,.30);
  border-bottom: 1px solid rgba(186,163,96,.30);
  position: relative;
  overflow: hidden;
}
.bandeau-promoteur::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(to right, var(--or), rgba(186,163,96,0) 62%);
}
/* Le bandeau porte sa propre respiration : la regle generale des sections
   lui donnait 54 px en haut et en bas, et le faisait flotter. */
.bandeau-promoteur { padding: 0; }
.bandeau-promoteur .dedans {
  display: flex; align-items: center; gap: 22px;
  padding: 20px 0 22px;
}

.bandeau-promoteur .medaillon {
  width: 66px; height: 66px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(217,196,138,.55);
  background: radial-gradient(circle at 34% 28%, rgba(255,255,255,.18), rgba(255,255,255,.03) 62%);
  font-family: var(--serif); font-size: 27px; font-weight: 700;
  letter-spacing: .04em; color: #E9DCB4;
  box-shadow: inset 0 0 0 4px rgba(255,255,255,.05), 0 6px 20px rgba(0,0,0,.18);
}

.bandeau-promoteur .identite { min-width: 0; }
.bandeau-promoteur .sur {
  display: block; font-size: 13px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(217,196,138,.86);
}
.bandeau-promoteur h2 {
  font-family: var(--serif); font-size: 28px; font-weight: 700;
  color: #fff; line-height: 1.12; margin: 5px 0 4px; letter-spacing: -.005em;
}
.bandeau-promoteur .ligne { font-size: 14.5px; color: rgba(255,255,255,.76); margin: 0; }
.bandeau-promoteur .co {
  display: inline-block; margin-top: 9px;
  font-size: 13px; letter-spacing: .04em;
  padding: 3px 10px; border-radius: 999px;
  background: rgba(186,163,96,.20); color: #E9DCB4;
  border: 1px solid rgba(186,163,96,.42);
}

.bandeau-promoteur .preuves {
  margin-left: auto; display: flex; align-items: center; gap: 26px;
  flex: none;
}
.bandeau-promoteur .preuve { display: flex; flex-direction: column; gap: 2px; }
.bandeau-promoteur .preuve .cle {
  font-size: 13px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: rgba(217,196,138,.80);
}
.bandeau-promoteur .preuve .val { font-size: 16px; font-weight: 700; color: #fff; }
.bandeau-promoteur .preuve .fin { font-size: 13px; color: rgba(255,255,255,.62); }

@media (max-width: 1020px) {
  .bandeau-promoteur .dedans { flex-wrap: wrap; gap: 16px; }
  .bandeau-promoteur .preuves { margin-left: 0; width: 100%; flex-wrap: wrap; gap: 18px; }
}
@media (max-width: 640px) {
  .bandeau-promoteur .medaillon { width: 54px; height: 54px; font-size: 22.5px; }
  .bandeau-promoteur h2 { font-size: 22.5px; }
  .bandeau-promoteur .preuves { gap: 14px 22px; }
  .bandeau-promoteur .btn { width: 100%; text-align: center; }
}

/* ------------------------------------------ la barre du programme, collee */
.barre-programme {
  position: sticky; top: var(--tete, 66px); z-index: 40;
  background: rgba(255,255,255,.93);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--bord);
  transition: box-shadow .2s, background .2s, border-color .2s;
}
.barre-programme.detachee {
  background: rgba(255,255,255,.985);
  box-shadow: 0 6px 22px rgba(6, 58, 40,.10);
}
.barre-programme > .wrap {
  display: flex; align-items: center; gap: 16px;
}

.barre-programme .onglets {
  border-bottom: 0; flex: 1; min-width: 0;
  align-items: center; gap: 0;
  scrollbar-width: none;
}
.barre-programme .onglets::-webkit-scrollbar { display: none; }
.barre-programme .onglets .groupe { display: flex; align-items: center; gap: 2px; }
.barre-programme .onglets .sep {
  width: 1px; height: 20px; flex: none; margin: 0 12px;
  background: var(--bord);
}

/* Les liens d'ancre : ils menent, ils ne retiennent pas d'etat */
.barre-programme .onglets button.lien {
  padding: 10px 12px; font-size: 14.5px; color: var(--gris);
  border-bottom: 0; border-radius: var(--rayon-s);
  transition: background .15s, color .15s;
}
.barre-programme .onglets button.lien:hover { background: var(--creme); color: var(--teal); }
.barre-programme .onglets button.lien::before {
  content: ''; display: inline-block;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--or); opacity: .55;
  margin-right: 7px; transform: translateY(-1px);
}

/* Les volets : un segment, et un seul actif */
.barre-programme .onglets .segments {
  background: var(--creme);
  border: 1px solid var(--bord-pale);
  border-radius: 999px;
  padding: 3px;
  gap: 1px;
}
.barre-programme .onglets .segments button {
  padding: 8px 15px; font-size: 14.5px; border-bottom: 0;
  border-radius: 999px; color: var(--gris);
  transition: background .18s, color .18s, box-shadow .18s;
}
.barre-programme .onglets .segments button:hover { color: var(--teal); }
.barre-programme .onglets .segments button.on {
  background: var(--blanc); color: var(--teal); font-weight: 700;
  box-shadow: var(--ombre-1), 0 0 0 1px var(--bord) inset;
}
.barre-programme .onglets button:focus-visible {
  outline: 2px solid var(--or-fonce); outline-offset: 2px; border-radius: 999px;
}
.barre-programme .visite { flex: none; }

@media (max-width: 980px) {
  .barre-programme > .wrap { gap: 10px; }
  .barre-programme .onglets { overflow-x: auto; flex-wrap: nowrap; }
  .barre-programme .onglets .groupe { flex: none; }
  .barre-programme .visite { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .barre-programme, .barre-programme .onglets button { transition: none; }
}

/* ============ la fiche programme : le corps, le rail, les reperes ==== */

/* La fiche se lit en deux colonnes : le dossier a gauche, l'action a droite.
   Le rail reste sous la main pendant toute la descente - sur une fiche de
   cette longueur, redescendre chercher le bouton de visite est une perte. */

.fiche-wrap { padding-top: 30px; padding-bottom: 60px; }
.fiche {
  display: grid; grid-template-columns: minmax(0, 1fr) 340px;
  gap: 44px; align-items: start;
}
/* Une colonne de grille prend par defaut la largeur de son plus large
   enfant : un tableau ou un plan de lots faisait deborder la page sur
   telephone. On lui dit qu'elle a le droit d'etre plus etroite. */
.fiche > .corps, .fiche > .rail { min-width: 0; }
.fiche > .corps > section {
  margin: 0 0 46px;
  scroll-margin-top: calc(var(--tete, 66px) + var(--barre, 51px) + 22px);
}
.fiche > .corps > section:last-child { margin-bottom: 0; }
.corps h2 { font-size: 27px; }

.tete-bloc { padding-bottom: 12px; margin-bottom: 20px; border-bottom: 1px solid var(--bord); }
.tete-bloc .meta { margin-top: 6px; max-width: 70ch; }

.rail {
  position: sticky; top: calc(var(--tete, 66px) + var(--barre, 51px) + 20px);
  display: flex; flex-direction: column; gap: 14px;
}
.rail .prix.gros { font-size: 29px; }
.rail hr { border: 0; border-top: 1px solid var(--bord-pale); margin: 14px 0; }
.rail .paires { gap: 0; }
.rail .aide { font-size: 13px; line-height: 1.5; }
.rail .dossier {
  background: linear-gradient(140deg, var(--nuit), var(--teal)); color: #fff;
  border: 1px solid rgba(186,163,96,.4); border-radius: var(--rayon); padding: 16px 17px;
}
.rail .dossier h4 { color: #fff; font-family: var(--serif); font-size: 17px; margin-bottom: 6px; }
.rail .dossier p { font-size: 13.5px; color: rgba(255,255,255,.76); margin-bottom: 12px; }

/* Les quatre chiffres qui decident : prix, delai, choix, stock */
.chiffres { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 24px; }
.chiffres .c {
  background: var(--blanc); border: 1px solid var(--bord);
  border-radius: var(--rayon-s); padding: 13px 15px;
}
.chiffres .cle {
  display: block; font-size: 13px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--gris-clair);
}
.chiffres .val {
  display: block; font-family: var(--serif); font-size: 22.5px; font-weight: 700;
  color: var(--teal); margin-top: 5px; line-height: 1.1;
}
.chiffres .fin { display: block; font-size: 13px; color: var(--gris); margin-top: 2px; }

/* Le stock : vingt-neuf ilots ne doivent pas faire une page a eux seuls */
details.groupe-plan + details.groupe-plan { margin-top: 0; }
.corps .plan { gap: 5px; }
.corps .plan .lot { width: 32px; height: 32px; border-radius: 6px; font-size: 12.5px; }
details.tranche-bloc { margin-bottom: 10px; }
details.tranche-bloc > summary { list-style: none; cursor: pointer; }
details.tranche-bloc > summary::-webkit-details-marker { display: none; }
details.tranche-bloc > summary:focus-visible { outline: 2px solid var(--or-fonce); outline-offset: 2px; border-radius: 4px; }
details.tranche-bloc > summary .tranche-tete { margin-bottom: 0; }
details.tranche-bloc > summary .chevron {
  width: 9px; height: 9px; flex: none; margin-left: 12px;
  border-right: 2px solid var(--or-fonce); border-bottom: 2px solid var(--or-fonce);
  transform: rotate(-45deg); transition: transform .22s cubic-bezier(.22,.61,.36,1);
}
details.tranche-bloc[open] > summary .chevron { transform: rotate(45deg); }
details.tranche-bloc > .dedans { padding: 6px 0 4px 4px; }

/* Les offres, plus serrees dans la colonne de gauche */
.corps .offres { grid-template-columns: repeat(auto-fill, minmax(206px, 1fr)); gap: 16px; }
.offre .notice {
  font-size: 14.5px; color: var(--gris); line-height: 1.55; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.offre .nom { font-size: 18.5px; }
.offre .traits span { font-size: 12.5px; padding: 2px 7px; }
.offre .prix { font-size: 20.5px; }

/* L'echeancier : le cumul se lit d'un trait */
.jauge-fine {
  height: 5px; width: 90px; background: #ECE7D9; border-radius: 999px;
  overflow: hidden; display: inline-block; vertical-align: middle;
}
.jauge-fine i { display: block; height: 100%; background: var(--teal); }
table.donnees td.cum span { font-size: 13px; color: var(--gris); margin-left: 8px; }
table.donnees th.rang, table.donnees td.rang {
  width: 34px; text-align: center; font-family: var(--serif);
  font-weight: 700; color: var(--or-fonce); font-size: 17px;
}

/* Un tableau large ne fait jamais defiler la page entiere */
.defilant { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Sur telephone, l'action ne doit pas attendre le bas de la page */
.action-mobile {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 46;
  background: rgba(255,255,255,.97); border-top: 1px solid var(--bord);
  box-shadow: 0 -4px 18px rgba(6, 58, 40,.10);
  padding: 10px 0 calc(10px + env(safe-area-inset-bottom, 0px));
  backdrop-filter: saturate(150%) blur(10px);
}
.action-mobile .wrap { display: flex; align-items: center; gap: 12px; }
.action-mobile .prix {
  font-family: var(--serif); font-size: 18px; font-weight: 700;
  color: var(--teal); line-height: 1.1;
}
.action-mobile .fin { font-size: 12.5px; color: var(--gris); }
.action-mobile .btn { margin-left: auto; flex: none; }

@media (max-width: 1080px) {
  .fiche { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .rail { position: static; }
  .chiffres { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .action-mobile { display: block; }
  body { padding-bottom: 78px; }
  .corps .offres { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 12px; }
  .fiche-wrap { padding-top: 22px; padding-bottom: 36px; }
  .bandeau-promoteur .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  details.tranche-bloc > summary .chevron { transition: none; }
}

/* ------------------------------------- les logos deposes par le catalogue */

/* Le programme porte sa propre marque quand le promoteur l'a deposee ;
   sinon la fiche se contente de son nom, en toutes lettres. */
.logo-programme {
  max-height: 88px; max-width: 340px; width: auto; height: auto;
  display: block; margin-bottom: 14px;
}
/* Le bandeau : le logo du promoteur remplace le monogramme. */
.bandeau-promoteur .medaillon.depose {
  width: auto; min-width: 66px; max-width: 200px; height: 66px;
  border-radius: var(--rayon-s); background: #fff; border: 0;
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
  padding: 8px 12px;
}
.bandeau-promoteur .medaillon.depose img {
  max-height: 100%; max-width: 100%; width: auto; height: auto; display: block;
}
@media (max-width: 640px) {
  .logo-programme { max-height: 64px; max-width: 220px; }
  .bandeau-promoteur .medaillon.depose { height: 54px; max-width: 160px; }
}

/* Le nom reste dans le document meme quand c'est le logo qu'on voit :
   un lecteur d'ecran et un moteur de recherche lisent le titre, pas l'image. */
.visuellement-cache {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ----------------------------------------------- les videos du programme */

/* Le portail n'heberge pas ces videos : il montre la vignette et laisse le
   visiteur declencher la lecture. Rien n'est charge chez la plateforme tant
   qu'il n'a pas clique - une fiche ne previent pas YouTube de sa visite. */
.videos { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.video { margin: 0; }
.video .cadre {
  position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: var(--rayon-s); background: var(--nuit);
  border: 1px solid var(--bord); cursor: pointer;
}
.video .cadre img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.22,.61,.36,1); }
.video .cadre:hover img { transform: scale(1.04); }
.video .cadre iframe { width: 100%; height: 100%; border: 0; display: block; }
.video .jouer {
  position: absolute; inset: 0; margin: auto; width: 56px; height: 56px;
  border: 0; border-radius: 50%; background: rgba(255,255,255,.94);
  display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 6px 20px rgba(0,0,0,.28); transition: transform .18s, background .18s;
}
.video .cadre:hover .jouer { transform: scale(1.07); background: #fff; }
.video .jouer span {
  width: 0; height: 0; margin-left: 4px;
  border-left: 16px solid var(--teal);
  border-top: 10px solid transparent; border-bottom: 10px solid transparent;
}
.video .cadre.lien-externe { display: grid; place-items: center; }
.video .plateforme {
  position: absolute; left: 10px; top: 10px;
  font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: rgba(255,255,255,.92); color: var(--teal);
  padding: 4px 9px; border-radius: 999px;
}
.video figcaption { padding-top: 10px; }
.video figcaption b { display: block; font-size: 15.5px; color: var(--encre); line-height: 1.3; }
.video figcaption .meta { font-size: 13px; }
.video figcaption p.meta { margin-top: 5px; }

@media (prefers-reduced-motion: reduce) {
  .video .cadre img, .video .jouer { transition: none; }
}

/* --------------------------------------------- l'etat du stock, en clair */

/* La barre ne veut rien dire sans ses chiffres : on les met dessous, avec
   la couleur qui leur correspond, et la date a laquelle le promoteur a
   declare ce stock. Une barre sans date ne prouve rien. */
.etat-stock {
  display: flex; flex-wrap: wrap; gap: 4px 12px;
  margin-top: 8px; font-size: 13px; color: var(--gris);
}
.etat-stock span { display: inline-flex; align-items: center; gap: 5px; }
.etat-stock b { color: var(--vert); font-size: 14px; }
.etat-stock .pastille { width: 9px; height: 9px; border-radius: 2px; }
.etat-stock .sur { color: var(--gris-clair); }
.fraicheur { margin-top: 6px; font-size: 13px; color: var(--gris-clair); }
.fraicheur.alerte { color: var(--rouge); font-weight: 600; }

@media (max-width: 420px) {
  .etat-stock { gap: 3px 9px; font-size: 13px; }
}

/* ------------------------------------------- les deux portes du catalogue */

/* Immobilier et foncier ne se melangent pas : deux entrees, chacune avec sa
   ligne d'explication. Un visiteur qui cherche un terrain ne doit pas avoir
   a deviner qu'il se cache derriere le mot « programmes ». */
nav.principale a.menu-double {
  display: flex; flex-direction: column; gap: 1px;
  padding: 7px 14px; line-height: 1.2;
}
nav.principale a.menu-double .quoi { font-size: 15.5px; }
nav.principale a.menu-double .aide {
  font-size: 13px; color: var(--gris); letter-spacing: .01em;
}
nav.principale a.menu-double:hover .aide { color: var(--or-fonce); }
nav.principale a.menu-double.on .quoi { color: var(--teal); font-weight: 700; }
nav.principale a.menu-double.on::after {
  content: ''; display: block; height: 2px; background: var(--or-fonce);
  border-radius: 2px; margin-top: 4px;
}

@media (max-width: 1080px) {
  nav.principale a.menu-double .aide { display: none; }
  nav.principale a.menu-double { padding: 9px 12px; }
}

/* ================== deux registres d'offre, deux couleurs ================= */

/*
   Un acquereur qui cherche une maison et un investisseur qui cherche un
   terrain ne lisent pas la meme chose. Le portail le dit par la couleur :
   le vert de la marque tient l'immobilier, l'orange tient le foncier. La
   page entiere prend la teinte du registre ou l'on se trouve, et l'on ne
   change pas de registre sans s'en apercevoir.

   Les teintes viennent du logo, pas d'ailleurs.
*/
:root {
  --registre:       var(--teal);
  --registre-vif:   var(--teal-clair);
  --registre-pale:  #EAF1F1;
  --registre-bord:  #CFE0E0;
}
/* Les deux teintes sont prises au pixel dans le logo : le vert du mot
   PATRIIM est #006738, l'orange du P est #F07100. --registre-vif porte
   l'orange exact du logo partout ou c'est une surface ; --registre le
   fonce juste assez pour qu'un texte reste lisible sur le creme, sans
   changer de teinte (l'orange du logo tombe a 2,8 de contraste, il ne
   peut pas porter un titre). */
[data-registre="immobilier"] {
  --registre:       #006738;   /* le vert du logo, au pixel */
  --registre-vif:   #0A8449;
  --registre-pale:  #E8F2EC;
  --registre-bord:  #C6E0D1;
  --registre-bouton:     #006738;  /* 7,0:1 sur blanc */
  --registre-bouton-vif: #00522C;
}
[data-registre="foncier"] {
  --registre:       #C05A00;   /* l'orange du logo, fonce pour le texte */
  --registre-vif:   #F07100;   /* l'orange du logo, au pixel */
  --registre-pale:  #FDF1E4;
  --registre-bord:  #F3D3AC;
  --registre-bouton:     #B35300;  /* 4,9:1 sur blanc */
  --registre-bouton-vif: #964500;
}

/* Le filet sous l'en-tete : c'est lui qui change quand on change de porte. */
[data-registre] header.principal { border-bottom-color: var(--registre-bord); }
[data-registre] header.principal::after {
  content: ''; display: block; height: 3px; background: var(--registre-vif);
}

/* Le titre de la page porte la couleur du registre : c'est la premiere
   chose que l'oeil prend, elle doit dire ou l'on est. */
[data-registre] h1, [data-registre] .titre-vue { color: var(--registre); }

/* Le menu : l'entree active prend la couleur de son registre. */
[data-registre] nav.principale a.menu-double.on .quoi { color: var(--registre); }
[data-registre] nav.principale a.menu-double.on::after { background: var(--registre-vif); }
[data-registre] nav.principale a.menu-double:hover .aide { color: var(--registre); }

/* L'etiquette du registre, sur les cartes et l'en-tete de fiche. */
.et.registre {
  background: var(--registre-pale); color: var(--registre);
  border: 1px solid var(--registre-bord); font-weight: 700;
}

/* Les chiffres qui decident prennent la teinte du registre. */
[data-registre] .chiffres .val { color: var(--registre); }
[data-registre] .chiffres .c { border-color: var(--registre-bord); }

/* La fiche : le bandeau du promoteur et le titre de section suivent. */
[data-registre="foncier"] .bandeau-promoteur {
  background:
    radial-gradient(120% 180% at 12% 0%, rgba(240,113,0,.30), transparent 58%),
    linear-gradient(105deg, #2B1A08 0%, #7A4F13 52%, #C05A00 100%);
}
[data-registre="immobilier"] .bandeau-promoteur {
  background:
    radial-gradient(120% 180% at 12% 0%, rgba(186,163,96,.22), transparent 58%),
    linear-gradient(105deg, #04261A 0%, #04422A 52%, #075C3A 100%);
}

/* La barre du programme : le repere ouvert porte la couleur du registre. */
[data-registre] .barre-programme .onglets .segments button.on { color: var(--registre); }

/* Le catalogue : la carte s'eclaire dans la teinte de son registre. */
/* La carte porte son propre registre : sur l'accueil, les deux se cotoient
   et chacune doit dire lequel elle est. */
.pcarte:hover { border-color: var(--registre-bord); }
.pcarte[data-registre="foncier"] .vignette { background: #5C3A10; }
[data-registre] .tete-bloc { border-bottom-color: var(--registre-bord); }

/* -------------------------------------------- la banniere du registre */

/* Une scene dessinee, pas une photographie : le portail ne pose pas sur sa
   propre page la vue d'un chantier qui appartient a quelqu'un. Le cabinet
   depose une image quand il en a une, et elle prend la place. */
.banniere-registre {
  position: relative; overflow: hidden; padding: 0;
  background: var(--registre, var(--teal));
  border-bottom: 3px solid var(--registre-vif, var(--teal));
}
.banniere-registre .fond {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
  transform: scale(1.05); transition: transform 6s var(--sortie);
}
.banniere-registre.vu .fond { transform: scale(1); }

/* Le voile : une photographie ne porte pas un titre blanc sans lui. Il est
   teinte du registre, pour que l'image appartienne a la page. */
.banniere-registre .teinte {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(0,30,18,.92) 0%, rgba(0,45,26,.74) 38%,
                    rgba(0,60,34,.30) 68%, rgba(0,60,34,.06) 100%),
    linear-gradient(to top, rgba(4,21,15,.70), transparent 55%);
}
/* Une creation livree porte deja sa composition et son aplat de couleur :
   le voile du portail l'assombrirait pour rien. On se contente d'un rappel
   tres leger du cote du texte, juste de quoi tenir le blanc.            */
.banniere-registre.creation .teinte,
[data-registre="foncier"] .banniere-registre.creation .teinte {
  background: linear-gradient(100deg,
    rgba(0,0,0,.20) 0%, rgba(0,0,0,.10) 34%, rgba(0,0,0,0) 58%);
}
.banniere-registre.creation .fond { transform: none; }
/* La creation reserve sa zone calme a gauche : le texte s'y tient, il ne
   deborde pas sur la photographie du cote droit.                        */
/* « dedans » porte aussi la gouttiere de la page : la retrecir recentrerait
   tout le bloc. On borne donc les lignes, pas le conteneur. */
.banniere-registre.creation .dedans > * { max-width: 560px; }
.banniere-registre.creation .sourcil { color: rgba(255,255,255,.88); }
/* Sur petit ecran la creation est recadree : sa zone calme retrecit et le
   texte retombe sur la photographie. Le voile revient donc, franc.      */
@media (max-width: 900px) {
  .banniere-registre.creation .dedans > * { max-width: none; }
  .banniere-registre.creation .teinte,
  [data-registre="foncier"] .banniere-registre.creation .teinte {
    background: linear-gradient(180deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,.62) 100%);
  }
}

[data-registre="foncier"] .banniere-registre .teinte {
  background:
    linear-gradient(100deg, rgba(38,20,4,.92) 0%, rgba(90,48,8,.74) 38%,
                    rgba(183,86,0,.30) 68%, rgba(240,113,0,.06) 100%),
    linear-gradient(to top, rgba(24,12,3,.70), transparent 55%);
}
.banniere-registre .dedans {
  position: relative; z-index: 1;
  padding-top: 52px; padding-bottom: 52px;
  max-width: var(--largeur);
}
.banniere-registre .sourcil {
  color: #F2D79A; letter-spacing: .14em; font-size: 12.5px; font-weight: 700;
  text-transform: uppercase;
}
.banniere-registre h1 {
  color: #fff; font-size: clamp(30px, 3.8vw, 45px);
  margin: 8px 0 0; text-wrap: balance;
  text-shadow: 0 2px 18px rgba(0,0,0,.34);
}
.banniere-registre .chapeau {
  color: rgba(255,255,255,.90); margin-top: 12px; max-width: 62ch;
  text-shadow: 0 1px 12px rgba(0,0,0,.30);
}
.banniere-registre .bascule-registre { margin-top: 22px; gap: 8px; }
.banniere-registre .puce {
  background: rgba(255,255,255,.13); color: #fff;
  border: 1px solid rgba(255,255,255,.34);
  backdrop-filter: blur(4px);
}
.banniere-registre .puce:hover { background: rgba(255,255,255,.22); }
.banniere-registre .puce.on { background: #fff; color: var(--registre, var(--teal)); border-color: #fff; font-weight: 700; }

@media (max-width: 640px) {
  .banniere-registre .dedans { padding-top: 34px; padding-bottom: 34px; }
  .banniere-registre .chapeau { font-size: 15.5px; }
}

/* ======================================================================
   La couche d'interaction
   ======================================================================

   Rien ici n'est decoratif au sens ou rien n'invente d'information : ce
   qui bouge montre une donnee reelle. La jauge se remplit jusqu'a la part
   qu'occupe vraiment chaque statut, le compteur monte jusqu'au nombre
   reellement reference, la notice qui se deroule est celle que le
   promoteur a ecrite. Le mouvement sert a faire lire, pas a distraire.

   Tout s'arrete si le visiteur a demande moins d'animation.
   ====================================================================== */

:root { --sortie: cubic-bezier(.22,.61,.36,1); }

/* ------------------------------------------- ce qui se devoile au defilement */
.revele { opacity: 0; transform: translateY(20px);
  transition: opacity .6s ease, transform .6s var(--sortie); }
.revele.vu { opacity: 1; transform: none; }

/* ------------------------------------------------- la carte du programme */
.pcarte { transform-style: preserve-3d; will-change: transform; }
.pcarte:hover {
  transform: translateY(-7px);
  box-shadow: 0 22px 54px rgba(6, 58, 40,.20);
  border-color: var(--registre-bord, #D8CFB5);
}
.pcarte .vignette > svg, .pcarte .vignette > img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1.02); transition: transform 1.1s var(--sortie);
}
.pcarte:hover .vignette > svg, .pcarte:hover .vignette > img { transform: scale(1.13); }

/* la lueur qui traverse le visuel : elle dit que la carte est vivante */
.pcarte .lueur {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.22) 50%, transparent 65%);
  transform: translateX(-60%);
}
.pcarte:hover .lueur { opacity: 1; animation: balaye 1.05s var(--sortie); }
@keyframes balaye { from { transform: translateX(-60%); } to { transform: translateX(120%); } }

.pcarte .vignette .coin { transition: transform .3s var(--sortie); }
.pcarte:hover .vignette .coin { transform: translateY(-2px); }
.pcarte .bandeau { transition: transform .38s var(--sortie); }
.pcarte:hover .bandeau { transform: translateY(-3px); }
.pcarte .prix { transition: color .3s, transform .3s var(--sortie); transform-origin: left; }
.pcarte:hover .prix { color: var(--registre, var(--teal)); transform: scale(1.045); }
.pcarte .fleche { color: var(--registre, var(--or-fonce)); font-size: 19px;
  transition: transform .3s var(--sortie); }
.pcarte:hover .fleche { transform: translateX(6px); }

/* -------------------------------------- la jauge se remplit a l arrivee */
.jauge i { width: 0; transition: width 1.1s var(--sortie); }
.jauge.posee i { transition: width 1.1s var(--sortie); }

/* ------------------------------------------ la notice d une offre se deroule */
.offre .notice {
  max-height: 0; opacity: 0; overflow: hidden; margin: 0;
  transition: max-height .42s var(--sortie), opacity .3s ease, margin .42s var(--sortie);
}
.offre:hover .notice, .offre:focus-within .notice { max-height: 104px; opacity: 1; margin-bottom: 2px; }
.offre .gamme { transition: transform .34s var(--sortie); }
.offre:hover .gamme { transform: translateY(-3px); }
.offre:hover .traits span { background: var(--registre-pale, var(--creme)); border-color: var(--registre-bord, var(--bord-pale)); }
.offre .traits span { transition: background .25s, border-color .25s; }

/* --------------------------------------- le lot dit ce qu il est au survol */
.plan .lot { position: relative; }
.plan .lot .bulle {
  position: absolute; bottom: calc(100% + 9px); left: 50%;
  transform: translate(-50%, 6px);
  background: var(--nuit); color: #fff; font-size: 13px; font-weight: 400;
  white-space: nowrap; padding: 7px 11px; border-radius: 7px;
  opacity: 0; pointer-events: none; z-index: 5;
  box-shadow: var(--ombre-2);
  transition: opacity .2s, transform .2s var(--sortie);
}
.plan .lot .bulle::after {
  content: ''; position: absolute; top: 100%; left: 50%; margin-left: -5px;
  border: 5px solid transparent; border-top-color: var(--nuit);
}
.plan .lot:hover .bulle, .plan .lot:focus-visible .bulle { opacity: 1; transform: translate(-50%, 0); }

/* --------------------------- l ilot se deroule sur sa hauteur, sans a-coup */
details.groupe-plan > .plan > .lot { opacity: 0; transform: translateY(6px) scale(.92); }
details.groupe-plan[open] > .plan > .lot { animation: pose .34s var(--sortie) forwards; }
@keyframes pose { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .revele { opacity: 1; transform: none; }
  .pcarte, .pcarte .vignette > svg, .pcarte .vignette > img,
  .pcarte .prix, .pcarte .fleche, .offre .notice, .plan .lot .bulle {
    transition: none !important; animation: none !important;
  }
  .pcarte .lueur { display: none; }
  details.groupe-plan > .plan > .lot { opacity: 1; transform: none; animation: none; }
}

/* =========================================================================
   Typographie et registres : les finitions de la nuit du 25 septembre
   ========================================================================= */

/* Un titre qui se coupe la ou la phrase le veut, plutot qu'au bord de la
   colonne. Remplace les <br> qu'on placait a la main et qui tombaient au
   mauvais endroit des que la fenetre changeait de largeur. */
.equilibre { text-wrap: balance; }
p.chapeau, .encart p { text-wrap: pretty; }

/* La liste des conditions du sceau : numerotee, aeree, lisible d'un coup
   d'oeil. C'est la page ou l'on vient verifier une promesse. */
ol.conditions {
  margin: 18px 0 0; padding: 0; list-style: none; counter-reset: cond;
}
ol.conditions li {
  counter-increment: cond;
  position: relative; padding: 10px 0 10px 44px;
  border-top: 1px solid var(--bord-pale);
  font-size: 16.5px; line-height: 1.6;
}
ol.conditions li:first-child { border-top: 0; }
ol.conditions li::before {
  content: counter(cond);
  position: absolute; left: 0; top: 11px;
  width: 27px; height: 27px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--registre-pale, var(--vert-clair));
  color: var(--registre, var(--teal));
  border: 1px solid var(--registre-bord, var(--bord));
  font-family: var(--sans); font-size: 13px; font-weight: 700;
}

/* Une section peut porter son propre registre au milieu d'une page qui n'en
   a pas : c'est le cas du bloc « terrains a batir » sur l'accueil, qui doit
   annoncer l'orange avant meme qu'on y entre. */
section[data-registre] .sourcil { color: var(--registre); }
section[data-registre] h2 { color: var(--registre); }
section[data-registre] .btn.fantome:hover {
  border-color: var(--registre); color: var(--registre);
}

/* ------------------------------------------------- le pied, ses cinq blocs */
/* La grille a quatre colonnes laissait le cinquieme bloc tomber seul sur une
   deuxieme ligne, avec un trou de trois colonnes a cote. Le bloc de marque
   prend maintenant sa largeur propre, les quatre listes se partagent le
   reste, et rien ne retombe. */
.pied-colonnes {
  display: grid; gap: 28px;
  grid-template-columns: 1.5fr repeat(4, 1fr);
  align-items: start;
}
@media (max-width: 1080px) {
  .pied-colonnes { grid-template-columns: 1fr 1fr 1fr; }
  .pied-colonnes > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .pied-colonnes { grid-template-columns: 1fr 1fr; gap: 22px; }
}

/* Un nombre impair de compteurs laissait une case vide : le dernier prend
   toute la largeur plutot que de montrer un trou. */
.compteurs > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.compteurs.large > div:last-child:nth-child(odd) { grid-column: auto; }

/* Une grille de trois colonnes avec une seule carte dedans donne une page
   qui a l'air cassee. En dessous de trois, la grille se resserre sur ce
   qu'elle a reellement a montrer. */
.grille.c3:has(> :first-child:last-child) { grid-template-columns: minmax(0, 460px); }
.grille.c3:has(> :first-child:nth-last-child(2)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grille.c4:has(> :first-child:last-child) { grid-template-columns: minmax(0, 460px); }
.grille.c4:has(> :first-child:nth-last-child(2)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grille.c4:has(> :first-child:nth-last-child(3)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ------------------------------------------- le comparatif, croix de lecture */
/* La ligne et la colonne survolees s'eclairent ensemble : c'est ce qui
   permet de suivre « prix au m2 » jusqu'au bon lot sans se tromper de
   colonne. Aucune cellule n'est designee comme la meilleure. */
table.comparatif td, table.comparatif th { transition: background-color .12s; }
table.comparatif tr.croix > td, table.comparatif tr.croix > th { background: var(--bord-pale); }
table.comparatif td.croix, table.comparatif th.croix { background: var(--registre-pale, var(--vert-clair)); }
table.comparatif th.croix { box-shadow: inset 0 -3px 0 var(--registre, var(--teal)); }
@media (hover: none) {
  table.comparatif tr.croix > td, table.comparatif td.croix, table.comparatif th.croix { background: none; }
}

/* L'etiquette qui distingue une illustration d'une vue reelle. Discrete,
   mais jamais absente : c'est elle qui autorise le portail a montrer une
   image d'ambiance sans tromper personne. */
.pcarte .vignette .et-illustration {
  position: absolute; z-index: 2; left: 10px; top: 10px;
  background: rgba(2, 22, 15, .72); color: #fff;
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; backdrop-filter: blur(3px);
}

/* ===================================================================== */
/*  L'ESPACE ACQUEREUR                                                   */
/*                                                                       */
/*  Une page qui change avec le moment du parcours, et non un tableau de  */
/*  bord ou l'acquereur irait chercher ce qui le concerne. D'ou trois     */
/*  partis pris de mise en page :                                        */
/*                                                                       */
/*  - le bloc du haut repond toujours a la meme question, « qu'est-ce     */
/*    que je dois faire », et sa couleur dit le ton de la reponse ;       */
/*  - les chiffres sont gros, parce qu'ils se lisent sur un telephone,    */
/*    souvent dehors, souvent en vitesse ;                               */
/*  - rien n'est cache derriere un onglet.                               */
/* ===================================================================== */

.dossier-tete {
  background: var(--teal); color: #fff; padding: 18px 0 20px;
}
.dossier-tete .wrap { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
/*
   La barre de la vitrine remet son propre remplissage a zero sur les cotes.
   L'utiliser ici collait la plaque du logo au bord de l'ecran sur telephone.
*/
.dossier-tete .marque-ligne { padding-top: 4px; padding-bottom: 4px; }
.dossier-tete .ref {
  font-family: var(--serif); font-size: clamp(20px, 3vw, 26px); font-weight: 700;
  line-height: 1.15; margin: 0;
}
.dossier-tete .sous { color: rgba(255,255,255,.82); font-size: 14.5px; margin-top: 3px; }
.dossier-tete .pousse { margin-left: auto; }
.dossier-tete .sortie {
  color: rgba(255,255,255,.88); font-size: 14px; text-decoration: underline;
  text-underline-offset: 3px; background: none; border: 0; cursor: pointer;
  font-family: var(--sans); padding: 0;
}
.dossier-tete .sortie:hover { color: #fff; }

/* Les liens du dossier : une barre, pas un menu deroulant. */
.dossier-liens { border-bottom: 1px solid var(--bord); background: var(--blanc); }
.dossier-liens .wrap { display: flex; gap: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.dossier-liens a {
  padding: 13px 14px; font-size: 15px; font-weight: 600; color: var(--encre-doux);
  white-space: nowrap; border-bottom: 3px solid transparent;
}
.dossier-liens a:hover { color: var(--teal); }
.dossier-liens a.on { color: var(--teal); border-bottom-color: var(--teal); }

/*
   Le bloc « ce que je dois faire ».
   Trois tons seulement : il faut agir, il ne faut surtout pas agir, il n'y
   a rien a faire. Un quatrieme ton n'apporterait rien et rendrait les
   trois autres moins lisibles.
*/
.bloc-action {
  border: 1px solid var(--bord); border-left: 5px solid var(--ambre);
  background: var(--ambre-clair); border-radius: var(--rayon);
  padding: 20px 22px; margin-bottom: 18px;
}
.bloc-action .titre {
  font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 700; color: var(--or-fonce); margin-bottom: 8px;
}
.bloc-action .gros {
  font-family: var(--serif); font-size: clamp(22px, 3.4vw, 30px); font-weight: 700;
  color: var(--encre); line-height: 1.18;
}
.bloc-action .note { margin-top: 9px; font-size: 15.5px; color: var(--encre-doux); max-width: 62ch; }
/* Un bouton clair sur fond ambre disparaitrait : ici il se tient. */
.bloc-action .btn.claire {
  background: rgba(255,255,255,.92); border-color: var(--bord); color: var(--encre);
}
.bloc-action .suite { margin-top: 14px; }

.bloc-action.alerte { border-left-color: var(--rouge); background: var(--rouge-clair); }
.bloc-action.alerte .titre { color: var(--rouge); }
.bloc-action.calme  { border-left-color: var(--vert); background: var(--vert-clair); }
.bloc-action.calme .titre { color: var(--vert); }

/* Le chiffre qui compte, dans une carte. */
.somme { font-family: var(--serif); font-size: clamp(21px, 3vw, 27px); font-weight: 700; color: var(--teal); }
.somme.douce { color: var(--encre-doux); }
.ligne-chiffre {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; padding: 9px 0; border-top: 1px solid var(--bord-pale);
}
.ligne-chiffre:first-child { border-top: 0; }
.ligne-chiffre .quoi { color: var(--encre-doux); font-size: 15px; }
.ligne-chiffre .valeur { font-weight: 700; font-variant-numeric: tabular-nums; }

/*
   La frise des etapes de la livraison.
   Numerotee et non pointee : a ce stade, l'acquereur veut savoir ou il en
   est sur cinq etapes, pas suivre une chronologie.
*/
.etapes { display: grid; gap: 2px; }
.etape { display: flex; gap: 14px; align-items: flex-start; padding: 12px 0; }
.etape + .etape { border-top: 1px solid var(--bord-pale); }
.etape .rond {
  flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-size: 14px;
  background: var(--creme); color: var(--gris); border: 1px solid var(--bord);
}
.etape.fait .rond { background: var(--vert); color: #fff; border-color: var(--vert); }
.etape.cle  .rond { background: var(--or); color: var(--nuit); border-color: var(--or-fonce); }
.etape .nom { font-weight: 700; color: var(--encre); }
.etape.cle .nom { color: var(--or-fonce); }
.etape .quand { font-size: 14px; color: var(--gris); margin-top: 2px; }

/* Le fil d'une demande : qui a parle, quand, et le silence quand il y en a. */
.fil { display: grid; gap: 10px; }
.fil .msg {
  border: 1px solid var(--bord); border-radius: var(--rayon-s);
  padding: 12px 14px; background: var(--blanc);
}
.fil .msg.portail { background: var(--vert-clair); border-color: #CDE3D6; }
.fil .msg.promoteur { background: var(--creme); }
.fil .msg .qui {
  font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase;
  font-weight: 700; color: var(--gris); margin-bottom: 5px;
}
.fil .msg p { margin: 0; font-size: 15px; }
.fil .attente {
  border: 1px dashed var(--bord); border-radius: var(--rayon-s);
  padding: 12px 14px; font-size: 14.5px; color: var(--gris);
}

/* Les trois options de la difficulte de paiement. */
.options { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.options > * { min-width: 0; }
.option {
  border: 1px solid var(--bord); border-radius: var(--rayon);
  background: var(--blanc); padding: 18px;
}
.option .nom { font-family: var(--serif); font-size: 19px; font-weight: 700; color: var(--teal); }
.option p { font-size: 15px; color: var(--encre-doux); margin: 9px 0 12px; }
.option .consequence {
  font-size: 14px; color: var(--encre); background: var(--creme);
  border-radius: var(--rayon-s); padding: 10px 12px;
}

/* Le constat de chantier : une photographie, datee, et ce qu'elle montre. */
.constat { border: 1px solid var(--bord); border-radius: var(--rayon); overflow: hidden; background: var(--blanc); }
.constat img { display: block; width: 100%; height: 220px; object-fit: cover; }
.constat .legende { padding: 11px 14px; font-size: 14px; color: var(--gris); }
.constat .legende b { color: var(--encre); }
.constat .sans {
  height: 160px; display: grid; place-items: center; text-align: center;
  padding: 16px; color: var(--gris); font-size: 14.5px; background: var(--creme);
}

@media (max-width: 860px) {
  .options { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .dossier-tete .pousse { margin-left: 0; width: 100%; }
  .bloc-action { padding: 16px 16px; }
}

/* ------------------------------------------- le bandeau photographique */

/* L'accueil ne demontre rien : il donne envie d'entrer. Une photographie,
   une phrase, deux gestes. La preuve du controle vit plus bas, dans la
   section qui lui est consacree. */
.hero-photo { min-height: clamp(420px, 56vh, 560px); display: flex; align-items: center; }
.hero-photo > .fond {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 42%; display: block;
  opacity: 1; transform: scale(1.04); transition: transform 8s var(--sortie);
}
.hero-photo.vu > .fond { transform: scale(1); }
/* Le voile : un titre blanc ne tient pas sur une photographie sans lui. Il
   est teinte du vert de la marque, pour que l'image appartienne au site. */
.hero-photo .teinte {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(3,32,21,.94) 0%, rgba(4,45,29,.80) 40%,
                    rgba(5,58,38,.34) 72%, rgba(5,58,38,.08) 100%),
    linear-gradient(to top, rgba(3,22,14,.62), transparent 58%);
}
.hero-photo .contenu { position: relative; z-index: 1; width: 100%; padding: 64px 0; }
.hero-photo .dedans { max-width: 640px; }
.hero-photo h1, .hero-photo .titre-vue { font-size: clamp(32px, 4.4vw, 52px); margin: 8px 0 0; text-shadow: 0 2px 22px rgba(0,0,0,.36); }
.hero-photo .chapeau { margin-top: 16px; max-width: 34em; }

@media (max-width: 680px) {
  .hero-photo > .fond { object-position: center 38%; }
  .hero-photo .teinte { background: linear-gradient(to top, rgba(3,22,14,.93), rgba(4,40,26,.78) 62%, rgba(4,45,29,.62)); }
  .hero-photo .contenu { padding: 48px 0; }
}

/* ------------------------------------------------ les blocs a hauteur bornee */

/* Une liste de deux cents lignes ne se lit pas, elle se parcourt. Le bloc
   montre de quoi juger, et se deroule entierement d'un geste. Sans
   JavaScript il reste ouvert : mieux vaut long que tronque. */
.borne { position: relative; }
.borne.repliee { overflow: hidden; max-height: var(--borne, 460px); }
.borne.repliee::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 110px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), var(--blanc) 78%);
  pointer-events: none; border-radius: 0 0 var(--rayon) var(--rayon);
}
.blanche .borne.repliee::after,
.borne.repliee.sur-creme::after {
  background: linear-gradient(to bottom, rgba(250,248,243,0), var(--creme) 78%);
}
.borne-action { display: flex; justify-content: center; margin-top: 14px; }
.borne-action[hidden] { display: none; }

/* ------------------------------------------- l'offre choisie, et son stock */

/* Choisir une offre restreint le plan du stock. La carte choisie le porte,
   pour qu'on sache d'ou vient le filtre en cours. */
.offre.choisie {
  border-color: var(--teal);
  box-shadow: 0 0 0 2px rgba(6, 58, 40, .14), var(--ombre-2);
}
.offre.choisie .pied-offre .fleche { transform: rotate(90deg); }

/* Le bandeau qui dit ce que le plan montre. Il ne se confond pas avec une
   alerte : c'est un etat, pas un probleme. */
.filtre-offre {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-bottom: 20px; padding: 13px 16px;
  background: var(--blanc); border: 1px solid var(--bord);
  border-left: 3px solid var(--or); border-radius: var(--rayon);
}
.filtre-offre .quoi { flex: 1; min-width: 0; font-size: 14.5px; color: var(--encre); }
.filtre-offre .quoi b { color: var(--teal); }
.filtre-offre .quoi b.vert { color: var(--vert); }

@media (max-width: 680px) {
  .filtre-offre { align-items: flex-start; flex-direction: column; gap: 10px; }
}

/* ------------------------------------------------------ les commodites */

/* Onze lignes de texte se sautent ; onze pictogrammes se lisent en trois
   secondes. Le dessin est en traits, la couleur suit celle du texte. */
.commodites {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 22px;
}
.commodite { display: flex; align-items: center; gap: 12px; min-width: 0; }
.commodite .dessin {
  width: 42px; height: 42px; flex: none; border-radius: 10px;
  background: var(--ambre-clair); color: var(--or-fonce);
  display: flex; align-items: center; justify-content: center;
}
.commodite .dessin svg { width: 21px; height: 21px; display: block; }
.commodite .quoi { font-size: 14.5px; font-weight: 600; color: var(--encre); line-height: 1.3; }

@media (max-width: 980px) { .commodites { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 680px) {
  .commodites { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
  .commodite .dessin { width: 36px; height: 36px; }
  .commodite .dessin svg { width: 18px; height: 18px; }
  .commodite .quoi { font-size: 13.5px; }
}

/* ---------------------------------------------------------- le cout d'entree
   La derniere ligne d'un tableau de cout n'est pas une ligne comme les
   autres : c'est celle que l'acquereur retient, et celle qu'on lui reproche
   de ne pas avoir vue. Elle se detache du reste du tableau.
   Le vert marque un montant favorable ou un total assume ; il etait jusqu'ici
   enferme dans le bandeau de filtre, il sert maintenant partout.            */
b.vert { color: var(--vert); }

table.donnees tr.total td {
  background: var(--ambre-clair);
  border-top: 2px solid var(--or-fonce);
  padding-top: 14px; padding-bottom: 14px;
}
table.donnees tr.total td b { font-size: 16px; color: var(--teal); }
table.donnees tr.total td.num b { font-size: 18px; }

/* Le rappel du cout, dans la carte de droite. */
.rappel-cout {
  margin-top: 12px; padding: 10px 12px; border-radius: 10px;
  background: var(--ambre-clair); font-size: 13.5px; line-height: 1.45;
}
.rappel-cout .quoi { color: var(--or-fonce); font-weight: 600; }
.rappel-cout .combien { display: block; font-size: 18px; font-weight: 700; color: var(--teal); }
.rappel-cout a { font-size: 13px; }

/* ------------------------------------------------------------- le diaporama
   Le bandeau qui defile. Chaque vue porte la creation du graphiste et, par
   dessus, les mots saisis au back-office : le texte n'est jamais grave dans
   l'image, donc il se corrige sans nouveau fichier et il se recadre sur
   telephone sans couper une phrase.
   Les vues sont empilees et non posees cote a cote : le fondu ne demande
   aucun calcul de largeur, donc rien ne saute au chargement.             */
.diaporama {
  position: relative; width: 100%; overflow: hidden;
  height: clamp(420px, 52vw, 560px); background: var(--teal);
}
.diaporama .vues { position: absolute; inset: 0; }
/* La vue entre par le cote et sort par l'autre. Un fondu seul ne se voit
   pas : l'oeil lit un changement d'image, pas un mouvement, et le bandeau
   passe pour fige alors qu'il tourne. Le sens suit le geste - la fleche
   « suivant » pousse vers la gauche, « precedent » ramene vers la droite. */
.diaporama .vue {
  position: absolute; inset: 0; opacity: 0; visibility: hidden;
  transform: translate3d(var(--entre, 7%), 0, 0) scale(1.03);
  transition: opacity .75s ease, transform .95s cubic-bezier(.22,.61,.36,1),
              visibility 0s linear .95s;
}
.diaporama .vue.active {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .75s ease, transform .95s cubic-bezier(.22,.61,.36,1);
}
.diaporama .vue.sortante {
  opacity: 0; visibility: visible;
  transform: translate3d(var(--sort, -7%), 0, 0) scale(1.03);
  transition: opacity .75s ease, transform .95s cubic-bezier(.22,.61,.36,1);
}
.diaporama[data-sens="arriere"] { --entre: -7%; --sort: 7%; }

.diaporama .vue .fond {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  will-change: transform;
}
/* La derive : tant qu'une vue est a l'ecran, elle avance doucement. Rien
   n'est jamais parfaitement immobile, et le bandeau respire meme entre
   deux changements. L'amplitude reste faible - la creation garde sa
   composition, et le cartouche du graphiste ne se decale pas. */
.diaporama .vue.active .fond { animation: derive-bandeau 9s linear both; }
@keyframes derive-bandeau {
  from { transform: scale(1.015) translate3d(0, 0, 0); }
  to   { transform: scale(1.085) translate3d(-1.1%, -.7%, 0); }
}
/* Le voile n'assombrit que sous le texte, et s'efface vers la creation :
   il sert la lisibilite, il ne repeint pas le travail du graphiste.      */
.diaporama .voile {
  position: absolute; inset: 0;
  background: radial-gradient(120% 90% at var(--x,6%) var(--y,50%),
    rgba(6,58,40,var(--voile,.45)) 0%,
    rgba(6,58,40,calc(var(--voile,.45) * .55)) 38%,
    rgba(6,58,40,0) 66%);
}
/* Le bloc de texte se pose ou le cabinet l'a vise, en pourcentage. */
.diaporama .contenu { position: absolute; inset: 0; }
.diaporama .dedans {
  position: absolute; left: var(--x,6%); top: var(--y,42%);
  width: var(--l,46%); color: var(--couleur,#fff); text-align: var(--align,left);
}
.diaporama .dedans .rang { justify-content: var(--boutons, flex-start); }
.diaporama .sourcil { color: var(--or); margin-bottom: 10px; }
.diaporama h1, .diaporama .titre-vue { color: inherit; font-size: clamp(28px, 3.6vw, 44px); }
.diaporama .chapeau { color: inherit; opacity: .94; font-size: clamp(14px, 1.15vw, 17px); margin: 0; line-height: 1.35; }
/* La creation porte sa propre composition : on la montre en entier plutot
   que de la rogner, sinon le cartouche laisse par le graphiste se decale
   et le texte tombe a cote.                                              */
/* La deuxieme serie du graphiste est une bande large : 2000 sur 523. On
   suit son format exact plutot que de la rogner, sinon le logo grave
   dedans sort du cadre. */
.diaporama.ratio-2 { height: auto; aspect-ratio: 2000 / 523; max-height: 560px; }
.diaporama.ratio-3 { height: auto; aspect-ratio: 3 / 1; max-height: 520px; }

/* Sur telephone, cette bande ferait cent pixels de haut et ne se lirait
   plus. Le bloc a 860 px plus bas rend la main a la creation elle-meme,
   qui y prend son format droit. */

/* Les fleches et les pastilles n'existent qu'a partir de deux vues. */
.diaporama .fleche {
  position: absolute; top: 50%; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.34); cursor: pointer; color: #fff;
  background: rgba(10,30,22,.28); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  transition: background .25s ease, border-color .25s ease, transform .3s var(--sortie), opacity .3s ease;
}
/* Les fleches ne s'imposent pas : la creation se regarde d'abord. Elles
   arrivent sous la souris, et restent la ou le doigt les attend. */
.diaporama .fleche { opacity: 0; }
.diaporama:hover .fleche, .diaporama:focus-within .fleche { opacity: 1; }
@media (hover: none) { .diaporama .fleche { opacity: 1; } }
.diaporama .fleche:hover { background: rgba(10,30,22,.52); border-color: var(--or); }
.diaporama .fleche:focus-visible { opacity: 1; outline: 2px solid var(--or); outline-offset: 3px; }
.diaporama .fleche svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.diaporama .fleche.avant { left: 18px; transform: translateY(-50%) translateX(-6px); }
.diaporama .fleche.apres { right: 18px; transform: translateY(-50%) translateX(6px); }
.diaporama:hover .fleche.avant,
.diaporama:hover .fleche.apres { transform: translateY(-50%); }
.diaporama .fleche.avant:hover { transform: translateY(-50%) translateX(-3px); }
.diaporama .fleche.apres:hover { transform: translateY(-50%) translateX(3px); }

.diaporama .pastilles {
  position: absolute; left: 0; right: 0; bottom: 20px;
  display: flex; gap: 10px; justify-content: center;
}
/* La pastille active se vide pendant que le temps passe : on voit venir le
   changement au lieu de le subir. C'est aussi ce qui dit, sans un mot, que
   le bandeau tourne tout seul. */
.diaporama .pastille {
  position: relative; overflow: hidden;
  width: 30px; height: 4px; border: 0; border-radius: 3px; padding: 0; cursor: pointer;
  background: rgba(255,255,255,.38);
  transition: background .25s ease, width .35s var(--sortie);
}
.diaporama .pastille:hover { background: rgba(255,255,255,.62); }
.diaporama .pastille.active { width: 62px; background: rgba(255,255,255,.28); }
.diaporama .pastille::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  background: var(--or); border-radius: 3px;
}
.diaporama .pastille.active::after {
  animation: remplir-pastille var(--duree, 5800ms) linear forwards;
}
.diaporama.en-pause .pastille.active::after { animation-play-state: paused; }
@keyframes remplir-pastille { from { width: 0; } to { width: 100%; } }

/* Sur telephone, le calage au pourcentage n'a plus de sens : une zone
   libre de 16 % de large y fait une colonne d'un mot. Le texte descend
   donc sous la creation, en pleine largeur, sur un fond vert franc.
   La creation garde son cadrage carre pour rester lisible.              */
@media (max-width: 860px) {
  .diaporama.ratio-2, .diaporama.ratio-3 { aspect-ratio: auto; max-height: none; height: auto; }
  .diaporama .vues { position: relative; }
  .diaporama .vue { position: absolute; inset: 0; }
  .diaporama .vue.active { position: relative; }
  /* La creation recomposee pour le telephone est droite : photographie
     au-dessus, bloc de marque au-dessous. Le cadre suit donc son format,
     sinon on la comprime en paysage et le logo grave dedans se rogne.
     Une creation sans variante droite garde le cadrage carre d'avant. */
  .diaporama .vue .fond { position: relative; height: auto; aspect-ratio: 16 / 10; }
  .diaporama .vue.avec-mobile .fond { aspect-ratio: 900 / 1120; }
  .diaporama .fleche { display: none; }
  .diaporama .voile { display: none; }
  .diaporama .contenu { position: relative; inset: auto; background: var(--teal); }
  .diaporama .dedans {
    position: relative; left: auto; top: auto; width: auto;
    color: #fff; text-align: left;
    padding: 20px 16px 54px;
  }
  .diaporama .dedans .rang { justify-content: flex-start; margin-top: 16px; }
  .diaporama .chapeau { font-size: 16px; }
  .diaporama .pastilles { bottom: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .diaporama .vue { transition: none; }
}

/* ------------------------------------------------------------- la preuve
   Trois blocs, dans l'ordre ou un visiteur se pose ses questions : ce qu il
   y a, ce que ca coute, ce qu il doit faire. Les deux premiers sortent de
   la base : si le catalogue change, la page change avec lui.            */
.preuve { background: var(--creme); }

/* 1. le stock en direct */
.offres-vives {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
  /* Chaque carte garde sa hauteur. Etirees, celles qui restent fermees se
     vident en grands rectangles blancs des que la voisine s'ouvre. */
  align-items: start;
}
.offre-vive {
  display: block; text-decoration: none; color: inherit;
  background: #fff; border: 1px solid var(--trait, #E2DDD0); border-radius: 14px;
  padding: 18px 18px 16px; position: relative; overflow: hidden;
  transition: transform .25s var(--sortie), box-shadow .25s var(--sortie), border-color .25s;
}
.offre-vive::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--vert);
}
.offre-vive[data-registre="foncier"]::before { background: var(--or-fonce); }
.offre-vive:hover {
  transform: translateY(-3px); border-color: var(--or);
  box-shadow: 0 14px 30px rgba(6,58,40,.10);
}
.offre-vive .tete { margin-bottom: 12px; }
.offre-vive .quoi {
  display: block; font-weight: 700; font-size: 16px; color: var(--teal); line-height: 1.25;
}
.offre-vive .ou { display: block; margin-top: 3px; font-size: 13px; color: var(--gris); }
.offre-vive .ou .sep { opacity: .5; }
.offre-vive .prix { margin-bottom: 10px; }
.offre-vive .prix .mention { font-size: 12.5px; color: var(--gris); }
.offre-vive .prix b { display: block; font-size: 24px; color: var(--teal); line-height: 1.15; }
.offre-vive .traits { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.offre-vive .traits span {
  font-size: 12.5px; color: var(--gris);
  background: var(--ambre-clair); border-radius: 20px; padding: 3px 9px;
}
.offre-vive .reste { border-top: 1px solid var(--trait, #E2DDD0); padding-top: 11px; }
.offre-vive .jauge {
  height: 5px; border-radius: 3px; background: #E8E4DA; overflow: hidden; margin-bottom: 7px;
}
.offre-vive .jauge span { display: block; height: 100%; background: var(--vert); border-radius: 3px; }
.offre-vive[data-registre="foncier"] .jauge span { background: var(--or-fonce); }
.offre-vive .chiffre { font-size: 13px; color: var(--encre); }
.offre-vive .chiffre b { color: var(--vert); }
.offre-vive[data-registre="foncier"] .chiffre b { color: var(--or-fonce); }
.offre-vive .chiffre .sur { color: var(--gris); }

/* 2. le cout reel */
.cout-vif {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 0;
  margin-top: 34px; border-radius: 16px; overflow: hidden;
  border: 1px solid var(--trait, #E2DDD0); background: #fff;
}
.cout-vif .gauche { padding: 26px 26px 22px; }
.cout-vif .gauche h3 { margin: 4px 0 8px; }
.cout-vif .gauche .meta { font-size: 14.5px; line-height: 1.5; }
.cout-vif .choix { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.cout-vif .choix .puce {
  border: 1px solid var(--trait, #E2DDD0); background: #fff; color: var(--encre);
  border-radius: 20px; padding: 5px 12px; font-size: 13px; cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
}
.cout-vif .choix .puce:hover { border-color: var(--or); }
.cout-vif .choix .puce.on { background: var(--teal); border-color: var(--teal); color: #fff; }
.cout-vif .droite { background: var(--teal); color: #fff; padding: 24px 26px; }
.cout-vif .ligne {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.14);
}
.cout-vif .ligne span { font-size: 14px; color: rgba(255,255,255,.80); }
.cout-vif .ligne b { font-size: 16px; white-space: nowrap; }
.cout-vif .ligne.total { border-bottom: 0; padding-top: 13px; }
.cout-vif .ligne.total span { color: #fff; font-weight: 600; }
.cout-vif .ligne.total b { font-size: 23px; color: var(--or); }
.cout-vif .ligne.depot {
  border-top: 1px solid rgba(255,255,255,.14); border-bottom: 0; margin-top: 4px;
}
.cout-vif .droite .aide { color: rgba(255,255,255,.62); font-size: 12.5px; margin-top: 12px; }

/* 3. le parcours d'achat
   Les classes « etapes » et « rail » servent deja au dossier de
   l'acquereur : celles-ci portent leur propre nom.                      */
.parcours { margin-top: 34px; }
.parcours h3 { margin-bottom: 18px; }
.parcours-rail {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px;
  align-items: start;
}
.parcours-etape {
  display: block; padding: 16px 18px;
  background: #fff; border: 1px solid var(--trait, #E2DDD0); border-radius: 12px;
}
.parcours-etape .rang {
  display: block; font-size: 13px; font-weight: 700; color: var(--or-fonce);
  letter-spacing: .1em; margin-bottom: 8px;
}
.parcours-etape b {
  display: block; color: var(--teal); font-size: 15px; line-height: 1.3; margin-bottom: 6px;
}
.parcours-etape .quoi { display: block; font-size: 13.5px; color: var(--gris); line-height: 1.5; }

@media (max-width: 1040px) {
  .offres-vives { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .parcours-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cout-vif { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .offres-vives { grid-template-columns: 1fr; }
  .parcours-rail { grid-template-columns: 1fr; }
}

/* ------------------------------------------------- la preuve, en mouvement
   Les blocs de la preuve ne sont pas des images : on s'en approche et ils
   repondent. Chaque geste montre une donnee de plus, jamais une decoration.
   Rien ne bouge quand le systeme demande moins d'animation.             */

/* La carte s'ouvre : la photographie du programme monte en fond, et un
   tiroir de vrais lots se deroule.                                       */
.offre-vive { cursor: pointer; }
.offre-vive .fond-carte {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity .45s var(--sortie), transform 6s var(--sortie);
  transform: scale(1.06); pointer-events: none;
}
.offre-vive::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.93) 62%, rgba(255,255,255,.99) 100%);
  opacity: 0; transition: opacity .45s var(--sortie);
}
/* Le focus ouvre comme le survol : au clavier, la carte doit montrer la
   meme chose qu'a la souris, sinon le tiroir n'existe que pour elle. */
.offre-vive:hover .fond-carte,
.offre-vive:focus-visible .fond-carte,
.offre-vive.ouverte .fond-carte { opacity: .30; transform: scale(1); }
.offre-vive:hover::after,
.offre-vive:focus-visible::after,
.offre-vive.ouverte::after { opacity: 1; }
.offre-vive:focus-visible {
  outline: 2px solid var(--or); outline-offset: 3px;
  transform: translateY(-3px); border-color: var(--or);
}
.offre-vive > *:not(.fond-carte) { position: relative; z-index: 1; }

.offre-vive .tiroir {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .4s var(--sortie);
}
.offre-vive:hover .tiroir,
.offre-vive:focus-visible .tiroir,
.offre-vive.ouverte .tiroir { grid-template-rows: 1fr; }
.offre-vive .dedans-tiroir { overflow: hidden; }
.offre-vive .titre-tiroir {
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--or-fonce); font-weight: 700; margin: 14px 0 8px;
}
.lot-vif {
  display: flex; align-items: baseline; gap: 8px; text-decoration: none;
  padding: 7px 9px; border-radius: 8px; margin-bottom: 4px;
  background: rgba(255,255,255,.72); border: 1px solid var(--trait, #E2DDD0);
  transition: border-color .2s, background .2s;
}
.lot-vif:hover { border-color: var(--or); background: #fff; }
.lot-vif .ref { font-weight: 700; font-size: 13px; color: var(--teal); }
.lot-vif .surf { font-size: 12.5px; color: var(--gris); }
.lot-vif b { margin-left: auto; font-size: 13.5px; color: var(--encre); white-space: nowrap; }
.tout-voir {
  display: block; margin-top: 8px; font-size: 13px; font-weight: 600;
  color: var(--or-fonce); text-decoration: none;
}
.tout-voir:hover { text-decoration: underline; }

.offre-vive .jauge span { width: 0; transition: width 1.1s var(--sortie); }

/* Le bloc du cout : le detail des frais se deroule a la demande. */
.cout-vif .deplier {
  display: flex; align-items: center; gap: 7px; margin-top: 12px;
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--or); font-size: 13px; font-weight: 600;
}
.cout-vif .deplier svg {
  width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2;
  transition: transform .3s var(--sortie);
}
.cout-vif .deplier[aria-expanded="true"] svg { transform: rotate(180deg); }
.cout-vif .detail-frais { margin-top: 8px; }
.cout-vif .detail-frais .f {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 13px; padding: 6px 0; color: rgba(255,255,255,.80);
  border-bottom: 1px dashed rgba(255,255,255,.14);
}
.cout-vif .detail-frais .f b { color: #fff; font-weight: 600; white-space: nowrap; }
.cout-vif .detail-frais .f .quoi { display: block; font-size: 11.5px; color: rgba(255,255,255,.50); }
.cout-vif .ligne b { transition: color .2s; }

/* Les etapes se deplient. */
.parcours-etape {
  width: 100%; text-align: left; cursor: pointer; font: inherit;
  position: relative; padding-right: 34px;
  transition: border-color .25s, box-shadow .25s, transform .25s var(--sortie);
}
.parcours-etape:hover { border-color: var(--or); transform: translateY(-2px); }
.parcours-etape .chevron {
  position: absolute; top: 14px; right: 12px; color: var(--gris);
  transition: transform .3s var(--sortie), color .2s;
}
.parcours-etape .chevron svg {
  width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; display: block;
}
.parcours-etape[aria-expanded="true"] { border-color: var(--or); }
.parcours-etape[aria-expanded="true"] .chevron { transform: rotate(180deg); color: var(--or-fonce); }
.parcours-etape .quoi {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .35s var(--sortie), margin-top .35s var(--sortie);
}
.parcours-etape .quoi > span { overflow: hidden; }
.parcours-etape[aria-expanded="true"] .quoi { grid-template-rows: 1fr; }

@media (hover: none) {
  /* Sans survol, tout passe par le doigt : la carte ne s'ouvre qu'au toucher. */
  .offre-vive:hover .tiroir { grid-template-rows: 0fr; }
  .offre-vive:hover .fond-carte { opacity: 0; }
  .offre-vive:hover::after { opacity: 0; }
  .offre-vive.ouverte .tiroir { grid-template-rows: 1fr; }
  .offre-vive.ouverte .fond-carte { opacity: .30; }
  .offre-vive.ouverte::after { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .offre-vive .fond-carte, .offre-vive::after, .offre-vive .tiroir,
  .parcours-etape .quoi, .parcours-etape .chevron, .cout-vif .deplier svg,
  .offre-vive .jauge span { transition: none; }
}

/* Ce que le prix ne comprend pas. Pose dans la colonne claire du bloc du
   cout, sous le choix des offres : la liste change avec l'offre, et le
   vide qui restait sous les puces se remplit d'une information au lieu
   d'un decor.                                                            */
.cout-vif .exclu { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--trait, #E2DDD0); }
.cout-vif .titre-exclu {
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--or-fonce); font-weight: 700; margin-bottom: 9px;
}
.cout-vif .exclu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.cout-vif .exclu li {
  font-size: 12.5px; color: var(--gris); background: var(--ambre-clair, #F6EFDD);
  border-radius: 999px; padding: 5px 11px; line-height: 1.3;
}

/* ==================================================== la banniere qui vit
   La creation du graphiste reserve un aplat calme a gauche et pose sa
   photographie a droite, separees par une courbe blanche. Le portail
   ecrit dans l'aplat. Trois corrections et trois gestes.

   Les lignes se bornent plus tot : le paragraphe touchait la courbe, et
   une phrase qui passe sous le blanc ne se lit plus. Le texte arrive en
   cascade quand la page s'ouvre, du sourcil au bouton, parce qu'une
   banniere qui se pose vaut mieux qu'une banniere deja posee. Et la
   creation derive tres lentement - assez pour n'etre jamais figee, trop
   peu pour deplacer la courbe sous le texte.                            */

.banniere-registre.creation .dedans > * { max-width: 470px; }
.banniere-registre.creation .chapeau { font-size: 15.5px; line-height: 1.5; }

.banniere-registre.creation .fond {
  transform: none;
  animation: derive-banniere 26s ease-out both;
  will-change: transform;
}
@keyframes derive-banniere {
  from { transform: scale(1.005); }
  to   { transform: scale(1.045); }
}

/* La cascade. Chaque element part de plus bas que le precedent et arrive
   un souffle plus tard : l'oeil suit l'ordre de lecture au lieu de
   recevoir le bloc entier d'un coup.                                    */
.banniere-registre .dedans > * { animation: monte-banniere .7s var(--sortie) both; }
.banniere-registre .dedans > .sourcil { animation-delay: .05s; }
.banniere-registre .dedans > h1, .banniere-registre .dedans > .titre-vue { animation-delay: .16s; }
.banniere-registre .dedans > .chapeau { animation-delay: .27s; }
.banniere-registre .dedans > .rang    { animation-delay: .38s; }
@keyframes monte-banniere {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to   { opacity: 1; transform: none; }
}

/* La bascule entre les deux catalogues : un vrai sectionneur, pose sur le
   verre, plutot que deux pastilles posees sur l'image. Celle qui porte le
   catalogue ouvert est pleine, l'autre attend.                          */
.bascule-registre {
  display: inline-flex; gap: 0; margin-top: 22px; padding: 4px;
  border-radius: 999px; border: 1px solid rgba(255,255,255,.28);
  background: rgba(8,26,19,.40); backdrop-filter: blur(7px);
}
.bascule-registre .puce {
  padding: 9px 20px; border-radius: 999px; text-decoration: none;
  font-size: 14px; font-weight: 600; color: rgba(255,255,255,.86);
  transition: background .25s ease, color .25s ease, transform .25s var(--sortie);
}
.bascule-registre .puce:hover { color: #fff; transform: translateY(-1px); }
.bascule-registre .puce.on {
  background: #fff; color: var(--registre, var(--teal));
  box-shadow: 0 3px 12px rgba(0,0,0,.18);
}
.bascule-registre .puce.on:hover { transform: none; }

/* Le fil d'Ariane collait au-dessus de la banniere comme une bande
   rapportee. Il se fond dans le haut de la page.                        */
.ariane { padding-bottom: 14px; }

@media (max-width: 900px) {
  .banniere-registre.creation .dedans > * { max-width: none; }
  .banniere-registre.creation .chapeau { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .banniere-registre .dedans > *,
  .banniere-registre.creation .fond,
  .diaporama .vue.active .fond,
  .diaporama .pastille.active::after { animation: none; }
  .diaporama .vue, .diaporama .vue.active, .diaporama .vue.sortante { transform: none; }
}

/* =================================================== la bande des partenaires
   Les logos ne sont pas une decoration : ils disent qui porte l'agrement.
   La bande se lit donc comme une carte de visite, pas comme un bandeau
   de confiance - chaque operateur y porte sa qualite et son numero.   */
.partenaires { background: #fff; border-top: 1px solid var(--trait, #E2DDD0); }
.rangee-partenaires {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px; margin-top: 24px; align-items: start;
}
.partenaire {
  display: block; text-decoration: none; color: inherit;
  background: var(--creme); border: 1px solid var(--trait, #E2DDD0);
  border-radius: 14px; padding: 20px 18px 18px; text-align: center;
  transition: transform .25s var(--sortie), box-shadow .25s var(--sortie), border-color .25s;
}
a.partenaire:hover {
  transform: translateY(-3px); border-color: var(--or);
  box-shadow: 0 14px 30px rgba(6,58,40,.10);
}
/* Le logo d'un tiers garde ses couleurs et ses proportions : on lui donne
   une boite de hauteur fixe et on l'y pose en entier, sans le rogner. */
.logo-partenaire {
  display: flex; align-items: center; justify-content: center;
  height: 86px; margin-bottom: 14px;
}
.logo-partenaire img { max-height: 86px; max-width: 100%; width: auto; object-fit: contain; }
.logo-partenaire.sans {
  background: var(--ambre-clair, #F6EFDD); border-radius: 12px;
  color: var(--or-fonce); font-size: 26px; letter-spacing: .04em;
}
.nom-partenaire {
  display: block; font-weight: 700; color: var(--teal); font-size: 16px; line-height: 1.25;
}
.qualite-partenaire {
  display: block; margin-top: 5px; font-size: 13px; color: var(--gris); line-height: 1.4;
}
.agrement-partenaire {
  display: block; margin-top: 9px; padding-top: 9px;
  border-top: 1px solid var(--trait, #E2DDD0);
  font-size: 12px; color: var(--or-fonce); line-height: 1.4;
}
.agrement-partenaire .sep { opacity: .5; }

@media (prefers-reduced-motion: reduce) {
  .partenaire { transition: none; }
}

/* ============================================= le controle des pieces
   La fiche affichait une colonne de verdicts : Absente, Absent, Non
   etablie. Exact, et illisible - cinq negations d'affilee se lisent
   comme un acte d'accusation, alors que le fait decrit est un dossier
   en cours d'instruction. Une barre dit l'avancement, et chaque piece
   porte son etat au lieu de son manque.                               */
.controle-pieces .avancee-controle { margin: 10px 0 18px; }
.jauge-controle {
  height: 6px; border-radius: 4px; background: var(--trait, #E2DDD0); overflow: hidden;
}
.jauge-controle span {
  display: block; height: 100%; border-radius: 4px; background: var(--vert);
  transition: width 1.1s var(--sortie);
}
.compte-controle { margin: 9px 0 0; font-size: 13.5px; }

.liste-pieces { list-style: none; margin: 0; padding: 0; }
.piece {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 0; border-top: 1px solid var(--trait, #E2DDD0);
}
.piece:first-child { border-top: 0; padding-top: 4px; }

/* La marque dit l'etat avant la lecture : coche, horloge, pointille,
   croix. Quatre formes, quatre couleurs, aucune ambiguite.            */
.piece .marque {
  flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; margin-top: 1px;
}
.piece .marque svg {
  width: 15px; height: 15px; fill: none; stroke: currentColor;
  stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
}
.piece[data-etat="verifie"]  .marque { background: #E6F2EA; color: var(--vert); }
.piece[data-etat="en_cours"] .marque { background: var(--ambre-clair, #F6EFDD); color: var(--or-fonce); }
.piece[data-etat="attendu"]  .marque { background: #F1F0EC; color: var(--gris); }
.piece[data-etat="perime"]   .marque { background: #FBE9E9; color: #B3261E; }

.dedans-piece { flex: 1 1 auto; min-width: 0; }
.dedans-piece b { display: block; font-size: 14.5px; color: var(--teal); line-height: 1.3; }
.ref-piece {
  display: inline-block; margin-top: 4px; padding: 2px 8px; border-radius: 6px;
  background: var(--creme); border: 1px solid var(--trait, #E2DDD0);
  font-size: 12.5px; color: var(--encre); word-break: break-word;
}
.dit-piece { display: block; margin-top: 4px; font-size: 12.5px; color: var(--gris); }
.piece[data-etat="verifie"] .dit-piece { color: var(--vert); }
.piece[data-etat="perime"]  .dit-piece { color: #B3261E; }

@media (prefers-reduced-motion: reduce) {
  .jauge-controle span { transition: none; }
}

/* ------------------------------------------------------- partager une fiche
   Un acquereur montre un lot a son conjoint ou a son banquier. Jusqu'ici il
   devait recopier l'adresse a la main, geste que personne ne fait sur
   telephone. Les boutons restent discrets : ils accompagnent la fiche, ils
   ne lui disputent pas l'attention. */
.partager {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 18px;
}
.partager-mot { font-size: 12.5px; letter-spacing: .04em; margin-right: 2px; }
.partager .btn { display: inline-flex; align-items: center; gap: 6px; }
.partager .btn svg { flex: 0 0 auto; }
.partager-whatsapp svg { fill: currentColor; }
.partager-copier[data-fait="oui"] { border-color: var(--vert); color: var(--vert); }

/* --------------------------------------------- mettre un lot de cote
   Le geste avait disparu des fiches : la barre du comparateur existait
   toujours, mais plus rien ne pouvait la remplir, et comparer etait donc
   impossible en silence. Le bouton reste discret tant que le lot n'est pas
   retenu, et se marque des qu'il l'est. */
.mettre-de-cote { display: inline-flex; align-items: center; gap: 6px; }
.mettre-de-cote svg { flex: 0 0 auto; }
.mettre-de-cote.on {
  border-color: var(--or-fonce); color: var(--or-fonce); background: var(--ambre-clair);
}
.mettre-de-cote.on svg { fill: currentColor; }
.barre-comparateur [data-cote-compte] { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------- la vie d'une offre
   Un programme vend souvent une villa basse, un duplex et un appartement
   qui n'ont en commun que le terrain. Les vues et les videos de chacun ne
   se melangent plus. */
.vie-offre { margin: 18px 0 26px; }
.offre .dessin { position: relative; }
.offre .dessin .films {
  position: absolute; right: 10px; bottom: 10px;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: 999px;
  background: rgba(6, 58, 40, .86); color: #FAF8F3;
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
}

/* ------------------------------------------------- les vues des projets
   Le catalogue dit ce qu'on achete ; cette section dit ce que c'est
   devenu. On n'y montre que du reel, donc rien n'y est decoratif : les
   images portent leur date sous les yeux et non au survol, parce qu'un
   telephone n'a pas de survol. */
.projet-en-vues { display: block; overflow: hidden; }
.projet-en-vues .couverture {
  position: relative; aspect-ratio: 16 / 10; background: var(--creme);
  display: block; overflow: hidden;
}
.projet-en-vues .couverture img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s ease;
}
.projet-en-vues:hover .couverture img { transform: scale(1.04); }
.projet-en-vues .compte-vues {
  position: absolute; left: 10px; bottom: 10px; display: flex; gap: 6px;
}
.projet-en-vues .compte-vues span {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 999px;
  background: rgba(6, 58, 40, .86); color: #FAF8F3;
  font-size: 12px; font-weight: 700;
}

.mur-de-vues {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.vue-reelle {
  margin: 0; border: 1px solid var(--bord); border-radius: var(--rayon);
  overflow: hidden; background: var(--blanc);
}
.vue-reelle img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.vue-reelle figcaption { padding: 10px 12px 12px; }
.vue-reelle figcaption b { display: block; font-size: 14px; color: var(--teal); line-height: 1.35; }
.vue-reelle figcaption b.mention { color: var(--or-fonce); }
.vue-reelle figcaption .meta { display: block; margin-top: 3px; font-size: 12.5px; }

@media (prefers-reduced-motion: reduce) {
  .projet-en-vues:hover .couverture img { transform: none; }
}

/* ------------------------------------------------------- joindre le cabinet

   Le portail recueillait des demandes et n'offrait aucun autre geste.
   Rien ici ne s'affiche tant qu'aucun numero n'est saisi au back-office :
   le gabarit ne pose le bloc que si App\Support\Marque::joignable().        */

.joindre { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.joindre .quoi { font-size: 13.5px; color: var(--gris); margin-right: 2px; }
.joindre .btn { display: inline-flex; align-items: center; gap: 7px; }
.joindre .btn svg { flex: none; }

.btn.whatsapp { background: #1F8A4C; border-color: #1F8A4C; color: #fff; }
.btn.whatsapp:hover { background: #17703D; border-color: #17703D; color: #fff; }

/* Flottant : atteignable au milieu d'une fiche de 4 000 px. Il se place
   au-dessus de la barre du comparateur quand elle s'ouvre, sinon les deux
   se superposent et aucun des deux n'est cliquable. */
.joindre-flottant {
  position: fixed; right: 16px; bottom: 16px; z-index: 44;
  flex-direction: column; align-items: stretch; gap: 8px;
  transition: bottom .26s cubic-bezier(.22,.61,.36,1);
}
.joindre-flottant .btn {
  box-shadow: var(--ombre-2, 0 6px 20px rgba(0,0,0,.18));
  background: #fff; justify-content: center;
}
.joindre-flottant .btn.whatsapp { background: #1F8A4C; }
body.comparateur-ouvert .joindre-flottant { bottom: 82px; }

@media (max-width: 760px) {
  .joindre-flottant { right: 12px; bottom: 12px; }
  body.comparateur-ouvert .joindre-flottant { bottom: 96px; }
}
@media print { .joindre-flottant { display: none; } }

/* Le titre de page lu mais non vu : la page porte un h1 meme quand le
   bandeau est une creation dont le texte est grave dans l'image. Il n'est
   pas display:none, qui le retirerait aussi de l'arbre d'accessibilite. */
.titre-de-page {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ------------------------------------------------- les lots voisins

   Parcourir un programme obligeait a revenir au plan de masse entre
   chaque fiche. */

.voisins { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.voisin {
  display: inline-flex; flex-direction: column; gap: 2px;
  border: 1px solid var(--bord); border-radius: var(--rayon-s);
  padding: 10px 16px; min-width: 160px; background: var(--blanc);
}
.voisin:hover { border-color: var(--teal); }
.voisin .sens { font-size: 12.5px; color: var(--gris); }
.voisin b { font-size: 15px; color: var(--teal); }
.voisin.apres { text-align: right; margin-left: auto; }
@media print { .voisins { display: none; } }

/* Ou se trouve le programme : une adresse, des coordonnees, un lien.
   Pas de carte incrustee - voir App\Support\Localisation. */
.situer { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.situer .meta { display: block; margin-top: 3px; font-size: 13px; }

/* -------------------------------------------------- questions frequentes */

.questions { display: flex; flex-direction: column; gap: 10px; }
.question {
  background: var(--blanc); border: 1px solid var(--bord); border-radius: var(--rayon);
}
.question > summary {
  list-style: none; cursor: pointer; padding: 15px 18px;
  font-weight: 600; color: var(--teal); display: flex; justify-content: space-between; gap: 14px;
}
.question > summary::-webkit-details-marker { display: none; }
.question > summary::after {
  content: ''; flex: none; width: 8px; height: 8px; margin-top: 6px;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg); transition: transform .18s ease;
}
.question[open] > summary::after { transform: rotate(-135deg); }
.question .reponse { padding: 0 18px 16px; color: var(--gris); line-height: 1.6; }
@media print { .question { break-inside: avoid; } .question .reponse { display: block !important; } }