:root {
  --marque: #243935;
  --marque-or: #c3a673;
  --marque-pale: #e9eeeb;
  --marque-nuit: #1b2c28;
  --encre: #19211f;
  --gris: #434e4a;
  --gris-moyen: #5e6964;
  --gris-clair: #e2e5e1;
  --fond: #ffffff;
  --fond-doux: #f3f1eb;
  --serif: "Libre Baskerville", Georgia, serif;
  --serif-vf: normal;
  --sans: "Barlow", Helvetica, Arial, sans-serif;
  --max: 1180px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--encre);
  background: var(--fond);
  font-size: 17.5px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--serif); font-weight: 700; line-height: 1.2; margin: 0 0 .6em;
  font-variation-settings: var(--serif-vf); font-optical-sizing: auto;
}
h1 { font-size: clamp(2.2rem, 5.2vw, 3.9rem); letter-spacing: -.01em; }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
h3 { font-size: 1.22rem; }
p { margin: 0 0 1.1em; }
a { color: inherit; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 28px; }

/* Le sur-titre reprend la regle typographique du logo lui-meme : dans « A7
   PROPERTY », le mot PROPERTY est en capitales tres espacees et en graisse
   legere. On fait pareil ici — c est ce qui donne le calme. Le gras 600 et
   l espacement serre d avant donnaient un petit bloc compact et terne.
   Le filet qui precede le texte est la signature des marques de patrimoine :
   il pose le mot sans crier. */
.surtitre {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: .3em;
  font-size: .7rem;
  font-weight: 500;
  color: var(--marque);
  margin-bottom: 1.5em;
  display: flex;
  align-items: center;
  gap: 16px;
}
.surtitre::before {
  content: "";
  flex: 0 0 40px;
  height: 1px;
  background: currentColor;
  opacity: .55;
}

section { padding: 96px 0; }
/* La barre du haut reste affichee pendant le defilement. Sans cette marge,
   un clic sur « Le constat » amenerait le titre du chapitre PILE SOUS la
   barre, donc invisible. On reserve sa hauteur. */
section, .hero { scroll-margin-top: 92px; }
section.doux { background: var(--fond-doux); }

/* ---------- En-tete ---------- */
header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--gris-clair);
}
/* L en-tete est plus large que la colonne de texte (1180 px). Il le faut :
   avec sept liens, le bouton « Nous contacter » et DEUX portes d acces, le
   contenu reclame environ 1320 px. Mesure a l appui — avant cet elargissement,
   le bouton « A7 Reporter » sortait de la barre de 137 px, invisible mais bien
   la. Le corps du site, lui, garde sa colonne etroite : c est le confort de
   lecture qui commande la, pas l encombrement du menu. */
.barre { display: flex; align-items: center; gap: 22px; height: 78px; max-width: 1360px; }
/* Le logo complet porte sa signature « Au plus près de vos actifs » : a 34 px
   de haut elle n est plus qu une tache grise. En en-tete on ne garde donc que
   le monogramme, et le nom est ecrit en vrai texte a cote — plus net a l ecran,
   et lisible par les moteurs de recherche, ce qu une image ne sera jamais. */
.barre img { height: 38px; width: auto; }
.marque { display: flex; align-items: center; gap: 13px; text-decoration: none; }
/* Les deux monogrammes occupent la meme case : on les superpose et on fait
   apparaitre celui qui convient. Resultat : aucun sautillement de la barre
   au moment du basculement, contrairement a un simple changement de src. */
.marque { position: relative; }
.marque .clair { position: absolute; left: 0; top: 50%; transform: translateY(-50%); opacity: 0; transition: opacity .25s; }
.marque .sombre { transition: opacity .25s; }
.marque .dept {
  font-family: var(--sans);
  font-size: .63rem; text-transform: uppercase; letter-spacing: .19em;
  color: var(--gris); font-weight: 600; line-height: 1.3;
  /* « PROPERTY MANAGEMENT » doit rester sur UNE ligne. Depuis que le menu
     compte une entree de plus, le navigateur cherchait a le couper en deux
     pour gagner de la place, et la barre devenait bancale. */
  white-space: nowrap;
}
.marque .dept b {
  display: block;
  font-family: var(--serif); font-weight: 700;
  font-size: 1.22rem; letter-spacing: .01em; line-height: 1;
  text-transform: none; color: var(--marque); margin-bottom: 4px;
}
/* Sept entrees de menu depuis l ajout de « Gestion locative ». On resserre
   l ecart et on reduit legerement le corps, sinon la barre deborde a droite
   sur un portable de 1280 px. */
nav { margin-left: auto; display: flex; align-items: center; gap: 16px; }
nav a { text-decoration: none; font-size: .855rem; font-weight: 500; color: var(--gris); white-space: nowrap; }
nav .bouton { padding: 12px 17px; font-size: .88rem; }
/* « Gestion locative » : une offre a part, donc un traitement a part.
   Cerne dore, fond pale, texte plus gras et plus grand que les autres liens.
   On ne lui donne PAS le vert plein du bouton « Nous contacter » : deux
   boutons pleins cote a cote se neutralisent, et le visiteur ne sait plus
   lequel est l action principale. */
.lien-fort {
  font-size: .9rem; font-weight: 600; color: var(--marque);
  padding: 11px 18px; border-radius: 2px;
  border: 1.5px solid var(--marque-or); background: rgba(195, 166, 115, .10);
  transition: background .18s, border-color .18s, color .18s;
}
.lien-fort:hover { background: var(--marque-or); border-color: var(--marque-or); color: #16241f; }
/* Sur la video d ouverture, l en-tete est transparent : le lien passe en
   ivoire pour rester lisible sur l image. */
body.accueil header:not(.pose) .lien-fort {
  color: #fff; border-color: rgba(195, 166, 115, .85); background: rgba(195, 166, 115, .16);
}
body.accueil header:not(.pose) .lien-fort:hover {
  background: var(--marque-or); color: #16241f;
}
nav a:hover { color: var(--marque); }

.bouton {
  display: inline-block; text-decoration: none;
  background: var(--marque); color: #fff;
  padding: 14px 28px; border-radius: 2px;
  font-weight: 600; font-size: .93rem;
  letter-spacing: .03em;
  border: 1px solid var(--marque);
  transition: background .18s, color .18s;
}
.bouton:hover { background: var(--marque-nuit); border-color: var(--marque-nuit); }
.bouton.vide { background: transparent; color: var(--marque); }
.bouton.vide:hover { background: var(--marque); color: #fff; }
/* L ACTION PRINCIPALE EST LA SEULE SURFACE DOREE DU SITE.
   L or etait partout — titres, filets, pastilles — donc il ne designait
   rien. Reserve au bouton qui compte, il devient une indication : le
   regard va dessus avant de lire. L encre est sombre, pas blanche : du
   texte fonce sur or donne un contraste de 6,9 pour 1, la ou du blanc sur
   or tombe a 2,3 — illisible pour beaucoup de gens. */
.bouton.clair {
  background: var(--marque-or); color: #16241f; border-color: var(--marque-or);
  font-weight: 700; box-shadow: 0 10px 26px rgba(12, 20, 18, .30);
}
.bouton.clair:hover { background: #d4bb8c; border-color: #d4bb8c; color: #16241f; }

/* L action secondaire n est plus un bouton. Deux boutons cote a cote se
   disputent le regard ; un lien souligne se lit comme « et si vous voulez
   d abord regarder ». */
.bouton.discret {
  background: transparent; border-color: transparent; color: #fff;
  text-decoration: underline; text-underline-offset: 5px;
  padding-left: 10px; padding-right: 10px; box-shadow: none; font-weight: 500;
}
.bouton.discret:hover { background: transparent; border-color: transparent; color: var(--marque-or); }

/* Acces client : volontairement distinct du bouton commercial — c'est une porte, pas un appel. */
.acces {
  display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
  background: var(--marque-pale); color: var(--marque-nuit);
  border: 1px solid #cfd8d3; border-radius: 2px;
  padding: 10px 15px; font-size: .87rem; font-weight: 600; white-space: nowrap;
  transition: background .18s, border-color .18s, color .18s;
}
.acces svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; }
.acces:hover { background: var(--marque-nuit); border-color: var(--marque-nuit); color: #fff; }
/* La porte « A7 Reporter », pour les intervenants. Foncee, parce que l outil
   derriere l est aussi, et parce qu un visiteur ordinaire n a rien a y faire :
   on la rend reconnaissable sans la rendre attirante. */
.acces.manager { background: var(--marque); border-color: var(--marque); color: #fff; }
.acces.manager:hover { background: var(--marque-or); border-color: var(--marque-or); color: #16241f; }
body.accueil header:not(.pose) .acces.manager {
  background: rgba(195, 166, 115, .22); border-color: rgba(195, 166, 115, .75); color: #fff;
}
body.accueil header:not(.pose) .acces.manager:hover { background: var(--marque-or); color: #16241f; }

/* ---------- La barre, d apres le croquis du 15 octobre 2026 ----------
   Les chapitres reviennent sur la barre, separes par des filets. A droite,
   deux etages : « Nous contacter » au-dessus, les deux portes en dessous.
   Le hamburger ne reparait que lorsque la place manque pour de bon. */
header .menu-btn { display: none; }

nav {
  display: flex; align-items: center; gap: 0;
  margin-left: 34px; position: static; background: none;
  border: 0; box-shadow: none; padding: 0; min-width: 0;
}
/* Les filets de separation sont dessines par le CSS, pas tapes au clavier :
   ils ne seront pas lus a voix haute par un lecteur d ecran, et ils gardent
   la meme epaisseur quelle que soit la police. */
nav a {
  padding: 4px 15px; font-size: .855rem; font-weight: 500;
  color: var(--gris); white-space: nowrap; text-decoration: none;
  border-left: 1px solid var(--gris-clair); border-bottom: 0;
}
nav a:first-child { border-left: 0; padding-left: 0; }
nav a:hover { color: var(--marque); }

/* Les trois pastilles sur une seule rangee, a droite : les deux portes, puis
   l action principale. Une rangee plutot que deux etages — c est plus lisible,
   et ca laisse la barre sur une seule hauteur. */
.portes { margin-left: auto; display: flex; align-items: center; gap: 9px; }
.portes .bouton { padding: 10px 18px; font-size: .86rem; white-space: nowrap; }

/* Sur l ouverture, les filets doivent se voir sur l image sombre. */
body.accueil header:not(.pose) nav a { border-left-color: rgba(255, 255, 255, .28); }

/* Ces deux entrees ne servent qu au menu replie. */
nav .repli-locative, nav .repli-contact { display: none; }

/* Chaque porte a deux libelles : le long, et le court qui garde le mot
   essentiel — « Proprietaires », « Reporter ». */
.acces .court { display: none; }

/* ---------- La pastille « Gestion locative » sur l ouverture ---------- */
/* ---------- La pastille « Gestion locative » ----------
   Elle se tient sur la meme ligne que les deux boutons de l ouverture, mais
   repoussee a droite : on la lit comme une offre a part, pas comme un
   troisieme bouton de la serie.

   Le mot qui doit frapper n est pas le chiffre, c est « PRIX FIXE ». C est lui
   qui dit en deux mots ce que tout le reste de la page explique en paragraphes
   — un forfait, jamais un pourcentage sur les loyers. Il est donc ecrit en
   grand, dans l or de la marque, sur un fond vert plein qui le detache de la
   photo. Le montant vient apres, en appui. */
/* « center » et non « stretch » : la pastille est bien plus haute que les
   boutons, et un stretch les etirait a sa hauteur — deux grandes boites
   vides de 150 px. Ils gardent leur taille, elle se centre sur eux. */
.actions { align-items: center; }
/* Les deux pastilles forment un bloc : c est LUI qui se pousse a droite et qui
   deborde du cadre de 900 px, pas chaque pastille separement. */
/* Les pastilles s alignent sur le bord droit des boutons de l en-tete, pas sur
   le cadre du texte. L en-tete est large de 1360 px, le texte de 900 : il faut
   donc deborder de 230 px — mais seulement quand l ecran est assez large pour
   le permettre, sinon elles sortiraient de la page. D ou le clamp, qui vaut 0
   vers 900 px de large et plafonne a 230 au-dela de 1360. */
.vignettes {
  margin-left: auto;
  margin-right: calc(-1 * clamp(0px, 50vw - 450px, 230px));
  display: flex; gap: 10px; align-items: stretch;
  max-width: 480px;
}
/* Les deux pastilles disaient la meme chose avec la meme force : cote a
   cote, elles s annulaient. Celle de gauche porte le coeur du metier, elle
   garde son or et prend plus de place ; celle de droite est une option
   qu on ajoute, elle s efface d un cran. On lit maintenant « voila l offre,
   et voila ce qu on peut y ajouter » au lieu de deux promesses jumelles. */
.vignettes .pastille-locative { flex: 1.25 1 0; min-width: 0; }
.vignettes .pastille-locative.option { flex: 1 1 0; }
.pastille-locative {
  display: block; text-align: center; text-decoration: none;
  padding: 10px 16px; border-radius: 3px;
  background: var(--marque); border: 2px solid var(--marque-or);
  box-shadow: 0 14px 34px rgba(12, 20, 18, .34);
  transition: background .2s, transform .2s;
}
.pastille-locative:hover { background: var(--marque-or); transform: translateY(-2px); }

.pastille-locative.option {
  background: rgba(27, 44, 40, .78);
  border-color: rgba(195, 166, 115, .45);
  box-shadow: 0 8px 20px rgba(12, 20, 18, .22);
}
.pastille-locative.option .fixe { font-size: 1rem; color: rgba(255, 255, 255, .92); }
.pastille-locative.option .eti  { color: rgba(255, 255, 255, .58); }

.pastille-locative .eti {
  display: block; font-size: .62rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase;
  color: rgba(255, 255, 255, .72); margin-bottom: 3px;
}
.pastille-locative .fixe {
  display: block; font-family: var(--serif); font-weight: 700;
  font-size: 1.18rem; line-height: 1; color: var(--marque-or);
  text-transform: uppercase; letter-spacing: .02em;
}
.pastille-locative .detail {
  display: block; margin-top: 5px; font-size: .81rem; font-weight: 600; color: #fff;
}
.pastille-locative .sous {
  display: block; margin-top: 5px; padding-top: 5px;
  border-top: 1px solid rgba(195, 166, 115, .40);
  font-size: .68rem; color: rgba(255, 255, 255, .74);
}
.pastille-locative:hover .eti { color: rgba(22, 36, 31, .70); }
.pastille-locative:hover .fixe { color: #16241f; }
.pastille-locative:hover .detail { color: #16241f; }
.pastille-locative:hover .sous { color: rgba(22, 36, 31, .76); border-top-color: rgba(22, 36, 31, .28); }
.pastille-locative:hover b, .pastille-locative:hover span { color: #16241f; }

/* ---------- Quand la place manque ---------- */
@media (max-width: 1500px) {
  .acces .long { display: none; }
  .acces .court { display: inline; }
  nav { margin-left: 22px; }
  nav a { padding: 4px 11px; font-size: .82rem; }
}
/* En dessous, les chapitres rentrent dans le hamburger : les garder sur la
   barre ferait deborder l en-tete, ce qui etait deja arrive de 158 px a
   1100 px de large. */
@media (max-width: 1180px) {
  header .menu-btn { display: block; margin-left: 10px; }
  nav {
    display: none; position: absolute; top: 78px; left: 28px;
    min-width: 250px; flex-direction: column; align-items: stretch;
    background: #fff; padding: 8px 22px 14px; margin-left: 0;
    border: 1px solid var(--gris-clair); border-top: 0; border-radius: 0 0 4px 4px;
    box-shadow: 0 18px 44px rgba(25, 33, 31, .14);
  }
  nav.ouvert { display: flex; }
  nav a {
    padding: 12px 0; border-left: 0;
    border-bottom: 1px solid var(--gris-clair); font-size: .95rem;
  }
  nav a:last-child { border-bottom: 0; }
  nav .repli-locative { display: block; color: var(--marque); font-weight: 600; }
  body.accueil header:not(.pose) nav.ouvert a { color: var(--gris); }
  body.accueil header:not(.pose) nav.ouvert .repli-locative { color: var(--marque); }
}
@media (max-width: 760px) {
  .portes { gap: 6px; }
  .portes .bouton { display: none; }
  nav .repli-contact {
    display: block; margin-top: 8px; text-align: center; border-bottom: 0;
    background: var(--marque); color: #fff; border-radius: 2px;
    padding: 12px 14px; font-weight: 600;
  }
  body.accueil header:not(.pose) nav.ouvert .repli-contact { color: #fff; }
  .acces { padding: 8px 10px; font-size: .82rem; gap: 7px; }
  .acces svg { width: 14px; height: 14px; }
  /* Sur telephone la pastille ne peut plus flotter : elle venait se poser sur
     « Decouvrez-nous », les deux etaient illisibles. Elle reprend sa place
     dans le flux, juste au-dessus. */
  /* Sur telephone elle passe sous les boutons, sur toute la largeur : la
     rangee ne peut pas porter trois elements de front. */
  /* Les deux pastilles cote a cote debordaient l ecran (409 px pour 375) et
     se faisaient couper. Sur telephone elles s empilent, et le bloc perd le
     debordement de 90 px qui n a de sens que sur grand ecran. */
  .vignettes {
    flex-direction: column; gap: 10px;
    margin-left: 0; margin-right: 0; width: 100%;
  }
  .pastille-locative {
    margin: 4px 0 0; padding: 13px 18px; width: 100%;
    text-align: center; border-radius: 2px;
  }
  .pastille-locative span { font-size: 1.02rem; }
}

/* ---------- En-tete pose sur la video (page d accueil uniquement) ----------
   Sur l accueil, la barre ne surmonte plus l ouverture : elle est DEDANS.
   Le logo se retrouve donc en haut a gauche de l image, en ivoire, comme la
   signature d un photographe sur son tirage. Des que le visiteur descend,
   la barre blanche revient (classe « pose » posee par le script en bas de
   index.html) et tout reprend ses couleurs de lecture.
   Elle passe en « fixed » : sans cela elle occuperait 78 px de hauteur
   au-dessus de la video, et le film commencerait trop bas. */
body.accueil header {
  position: fixed; left: 0; right: 0; top: 0;
  background: transparent;
  backdrop-filter: none;
  border-bottom-color: transparent;
  transition: background .3s, border-color .3s, backdrop-filter .3s;
}
body.accueil header.pose {
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--gris-clair);
}
/* Etat « sur la video » : tout passe en ivoire. */
body.accueil header:not(.pose) .marque .clair { opacity: 1; }
body.accueil header:not(.pose) .marque .sombre { opacity: 0; }
body.accueil header:not(.pose) .marque .dept { color: rgba(255, 255, 255, .80); }
body.accueil header:not(.pose) .marque .dept b { color: #fff; }
body.accueil header:not(.pose) nav a { color: rgba(255, 255, 255, .88); }
body.accueil header:not(.pose) nav a:hover { color: #fff; }
body.accueil header:not(.pose) nav .bouton {
  background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45);
}
body.accueil header:not(.pose) nav .bouton:hover { background: #fff; color: var(--marque); border-color: #fff; }
body.accueil header:not(.pose) .acces {
  background: rgba(255, 255, 255, .10); color: #fff; border-color: rgba(255, 255, 255, .38);
}
body.accueil header:not(.pose) .acces:hover { background: #fff; color: var(--marque); border-color: #fff; }
body.accueil header:not(.pose) .menu-btn { color: #fff; }

.menu-btn { display: none; background: none; border: 0; font-size: 1.6rem; color: var(--marque); cursor: pointer; }

/* ---------- Hero ---------- */
/* L ouverture est maintenant une vidéo. Trois couches empilées, dans cet ordre :
   1. le fond vert dégradé — c est le filet de sécurité, il s affiche si la vidéo
      ET l image échouent (connexion coupée, vieux navigateur) ;
   2. la vidéo elle-même, qui remplit tout le cadre sans se déformer ;
   3. un voile vert sombre, plus dense à gauche, qui garantit que le texte reste
      lisible — c est le point sur lequel on ne transige pas : l image ne doit
      jamais gagner contre les mots. */
.hero {
  background:
    radial-gradient(880px 520px at 84% -12%, rgba(195, 166, 115, .16), transparent 64%),
    linear-gradient(168deg, #16241f 0%, #1b2c28 55%, #2c4740 100%);
  color: #fff; padding: 128px 0 112px; position: relative; overflow: hidden;
  isolation: isolate;
}
/* Sur l accueil la barre est DANS l image : on rend a l ouverture les 78 px
   de hauteur que l en-tete n occupe plus, sinon le texte passerait dessous. */
/* La hauteur utile d un navigateur varie beaucoup (barre de favoris, onglets,
   dock). On fait donc respirer le haut en fonction de la fenetre : genereux
   sur un grand ecran, resserre sur un portable, pour que le cadre « prix
   fixe » reste toujours visible sans avoir a faire defiler. */
body.accueil .hero { padding-top: clamp(128px, 16vh, 206px); padding-bottom: 86px; }
.hero-film {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 42%;
  z-index: -2; pointer-events: none;
}
/* Le voile. Dense à gauche (là où se trouve le texte), il s allège vers la
   droite pour laisser respirer le bâtiment et le soleil. La bande du bas
   raccroche la vidéo au bandeau chiffres qui suit, sans couture visible. */
.hero-voile {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(100deg,
      rgba(12, 20, 18, .93) 0%,
      rgba(12, 20, 18, .86) 34%,
      rgba(18, 30, 26, .66) 62%,
      rgba(22, 36, 31, .46) 100%),
    linear-gradient(to top, rgba(12, 20, 18, .85) 0%, transparent 34%),
    radial-gradient(760px 460px at 86% 4%, rgba(195, 166, 115, .20), transparent 66%);
}
.hero .wrap { position: relative; z-index: 1; max-width: 900px; }
.hero .surtitre, .contact .surtitre, .encadre .surtitre { color: var(--marque-or); }
.hero h1 { color: #fff; }
.hero h1 em { font-style: italic; color: #c3a673; }
/* Le titre d accueil tient en deux phrases qui se repondent : « a vous » /
   « a nous ». Elles sont courtes, donc on les ecrit grand : c est une
   signature, pas un paragraphe. Les deux lignes restent tres rapprochees
   (1.08) pour qu on les lise comme un seul bloc, et le retour a la ligne est
   force dans le HTML — jamais laisse au hasard de la largeur d ecran. */
body.accueil .hero h1 { font-size: clamp(2.5rem, 6vw, 4.4rem); line-height: 1.08; }
.hero .relance {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.15rem, 1.9vw, 1.55rem);
  color: rgba(255, 255, 255, .93); max-width: 780px;
  margin: -.2em 0 clamp(18px, 3.2vh, 35px);
}
.hero .chapo { font-size: 1.16rem; color: rgba(255, 255, 255, .95); max-width: 680px; }
.hero .actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(20px, 3.6vh, 34px); }
.hero .mention {
  margin-top: 30px; font-size: .88rem; color: rgba(255, 255, 255, .84);
  border-left: 2px solid var(--marque-or); padding-left: 14px;
}

/* ---------- Pastille « Découvrez-nous » ----------
   Elle ferme l ouverture et ouvre le site. Volontairement discrete : un
   contour clair, pas un bloc plein — elle invite, elle ne vend pas. Le petit
   chevron respire doucement vers le bas : c est le seul mouvement de la page,
   et c est ce qui dit « il y a une suite » sans ecrire le mot. */
.pastille-decouvrir {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 11px;
  width: -moz-fit-content; width: fit-content;
  margin: clamp(30px, 5.2vh, 58px) auto 0;
  padding: 13px 26px 13px 28px;
  border: 1px solid rgba(255, 255, 255, .42);
  border-radius: 100px;
  background: rgba(12, 20, 18, .28);
  backdrop-filter: blur(6px);
  color: #fff; text-decoration: none;
  font-size: .9rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  transition: background .2s, border-color .2s, color .2s;
}
/* Il faut sortir le lien du centrage « auto » qui ne marche qu en bloc. */
.hero > .pastille-decouvrir { display: flex; }
.pastille-decouvrir svg {
  width: 17px; height: 17px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  animation: respire 2.4s ease-in-out infinite;
}
@keyframes respire {
  0%, 100% { transform: translateY(0); opacity: .85; }
  50%      { transform: translateY(4px); opacity: 1; }
}
.pastille-decouvrir:hover {
  background: var(--marque-or); border-color: var(--marque-or); color: #16241f;
}
@media (prefers-reduced-motion: reduce) {
  .pastille-decouvrir svg { animation: none; }
}

/* ---------- Bandeau chiffres ---------- */
.chiffres { background: var(--marque-nuit); color: #fff; padding: 0; }
/* Trois colonnes et non quatre : la quatrieme case disait « En charges »,
   qui n est pas un chiffre. L oeil parcourt une serie et butait sur un mot.
   Le message de la refacturation n est pas perdu — il est deja sous le
   hero, et repris dans la page tarifs. */
.chiffres .wrap { display: grid; grid-template-columns: repeat(3, 1fr); }
.chiffre { padding: 38px 24px; border-left: 1px solid rgba(255, 255, 255, .12); }
.chiffre:first-child { border-left: 0; padding-left: 0; }
.chiffre b { display: block; font-family: var(--serif); font-size: 2.1rem; color: var(--marque-or); line-height: 1.1; }
.chiffre span { font-size: .87rem; color: rgba(255, 255, 255, .88); }

/* ---------- Grilles ---------- */
.deux { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }

.cartes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 46px; }
.carte {
  background: #fff; border: 1px solid var(--gris-clair);
  padding: 32px 28px 28px; border-radius: 3px;
  transition: box-shadow .2s, transform .2s, border-color .2s;
}
.carte:hover { box-shadow: 0 14px 40px rgba(36, 57, 53, .10); transform: translateY(-3px); border-color: var(--marque-or); }
/* L abonnement auquel la mission se rattache. Pose en bas de carte, detache
   par un filet : le lecteur voit CE QU ON FAIT, puis AVEC QUEL PACK. Les
   cartes n ont pas la meme hauteur de texte, donc on pousse la mention en bas
   avec margin-top:auto, pour que la ligne soit alignee d une carte a l autre. */
.carte { display: flex; flex-direction: column; }
.carte .rattache {
  margin: auto 0 0; padding-top: 16px;
  border-top: 1px solid var(--gris-clair);
  font-size: .82rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--gris-moyen);
}
.carte .rattache b { color: var(--marque); font-weight: 700; }
.carte .ico {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--marque-pale); color: var(--marque);
  display: grid; place-items: center; margin-bottom: 18px;
}
.carte .ico svg { width: 22px; height: 22px; stroke: var(--marque); fill: none; stroke-width: 1.7; }
.carte p { font-size: .96rem; color: var(--gris); margin: 0; }

/* ---------- Rythme de passage ---------- */
.rythme-bloc {
  margin-top: 56px; padding-top: 46px; border-top: 1px solid var(--gris-clair);
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
}
/* Deux cadences depuis le 7 octobre 2026, plus trois : le rythme bimestriel a
   ete retire de l offre. Les deux cartes restantes se partagent la largeur. */
.cadences { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.cadences div {
  background: #fff; border: 1px solid var(--gris-clair); border-top: 3px solid var(--marque-or);
  padding: 22px 18px; border-radius: 3px;
}
.cadences b {
  display: block; font-family: var(--serif); font-size: 1.55rem;
  color: var(--marque); line-height: 1; margin-bottom: 10px;
}
.cadences span { font-size: .86rem; color: var(--gris); line-height: 1.5; display: block; }

/* ---------- Constat ---------- */
.douleurs { list-style: none; padding: 0; margin: 28px 0 0; }
.douleurs li {
  position: relative; padding: 0 0 18px 34px; margin-bottom: 18px;
  border-bottom: 1px solid var(--gris-clair); color: var(--gris); font-size: 1rem;
}
.douleurs li:last-child { border-bottom: 0; }
.douleurs li::before {
  content: "\2715"; position: absolute; left: 0; top: 1px;
  color: #c0505a; font-size: .95rem; font-weight: 700;
}
/* Meme liste que .douleurs, mais a l endroit. Depuis le 9 octobre 2026 le site
   ne dit plus ce que les autres font mal : il dit ce que nous savons faire.
   D ou la coche doree a la place de la croix rouge. */
.missions { list-style: none; padding: 0; margin: 28px 0 0; }
.missions li {
  position: relative; padding: 0 0 18px 34px; margin-bottom: 18px;
  border-bottom: 1px solid var(--gris-clair); color: var(--gris); font-size: 1rem;
}
.missions li:last-child { border-bottom: 0; }
.missions li::before {
  content: "\2713"; position: absolute; left: 0; top: 1px;
  color: var(--marque-or); font-size: 1rem; font-weight: 700;
}
.encadre {
  background: var(--marque); color: #fff; padding: 40px 36px; border-radius: 3px;
}
.encadre h3 { color: #fff; font-size: 1.5rem; }
.encadre p { color: rgba(255, 255, 255, .94); font-size: 1rem; margin-bottom: 0; }
.encadre .sep { width: 46px; height: 2px; background: var(--marque-or); margin: 22px 0; }
/* La chute de l encadre : « Vous decidez. Nous executons. » Elle est detachee
   par un filet d or parce que c est la phrase que l on veut voir retenue. */
.encadre .chute {
  margin-top: 26px; padding-top: 20px;
  border-top: 1px solid rgba(195, 166, 115, .40);
  font-family: var(--serif); font-size: 1.12rem; color: var(--marque-or);
}

/* ---------- Signature (bandeau sous l ouverture) ---------- */
/* Volontairement nu : une phrase, du blanc autour, et rien d autre a regarder.
   C est une respiration entre la video et la bande de chiffres. */
.signature { background: #fff; padding: 72px 0 64px; text-align: center; }
.signature .phrase {
  font-family: var(--serif); font-size: 1.85rem; line-height: 1.45;
  color: var(--encre); margin: 0 auto; max-width: 820px;
}
.signature .phrase em { color: var(--marque); font-style: italic; }
.signature .sous {
  margin: 22px auto 0; max-width: 620px; color: var(--gris); font-size: 1rem;
}

/* ---------- Bloc « la distance » ---------- */
.distance { margin-top: 64px; }
.distance > h3 {
  font-family: var(--serif); font-size: 1.62rem; line-height: 1.4;
  max-width: 880px; margin: 0 0 34px;
}
.distance .trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.distance .trio h4 {
  font-size: 1.02rem; font-weight: 600; color: var(--marque);
  margin: 0 0 10px; padding-top: 16px; border-top: 2px solid var(--marque-or);
}
.distance .trio p { margin: 0; font-size: .95rem; color: var(--gris); }
.distance .alerte {
  margin: 34px 0 0; padding: 18px 22px;
  background: var(--marque-pale); border-left: 3px solid var(--marque);
  font-size: .98rem; color: var(--encre);
}
.distance .alerte strong { color: var(--marque); }

/* ---------- Encart « la valeur de l actif » ---------- */
.valeur {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start;
  margin-top: 54px; padding: 40px 38px;
  background: var(--marque-pale); border-left: 3px solid var(--marque-or); border-radius: 3px;
}
.valeur h3 { font-size: 1.5rem; margin: 0 0 .5em; }
/* La phrase courte qui porte tout l argument : on la met en exergue, parce
   qu elle se retient en une seconde et qu elle justifie la depense. */
.valeur .sentence {
  font-family: var(--serif); font-style: italic; font-size: 1.22rem;
  color: var(--marque); margin: 0;
}
.valeur p { color: var(--gris); }
.valeur > div:last-child p:last-child { margin-bottom: 0; }

/* ---------- Etapes ---------- */
.etapes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 50px; }
.etape { padding: 0 34px; border-left: 1px solid var(--gris-clair); }
.etape:first-child { border-left: 0; padding-left: 0; }
.etape .num {
  font-family: var(--serif); font-size: 2.6rem; color: var(--marque);
  line-height: 1; display: block; margin-bottom: 14px;
}
.etape p { font-size: .96rem; color: var(--gris); margin: 0; }

/* ---------- Reporting ---------- */
.rapport {
  background: #fff; border: 1px solid var(--gris-clair); border-radius: 3px;
  box-shadow: 0 22px 60px rgba(36, 57, 53, .10); overflow: hidden;
}
.rapport .tete {
  background: var(--marque); color: #fff; padding: 20px 26px;
  display: flex; align-items: center; justify-content: space-between;
}
.rapport .tete strong { font-family: var(--serif); font-size: 1.05rem; font-weight: 600; }
.rapport .tete span { font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: #c3a673; }
.rapport .corps { padding: 26px; }
.rapport .ligne {
  display: flex; justify-content: space-between; gap: 18px;
  padding: 13px 0; border-bottom: 1px dashed var(--gris-clair); font-size: .93rem;
}
.rapport .ligne:last-child { border-bottom: 0; }
.rapport .ligne em { font-style: normal; color: var(--gris); }
.rapport .ligne b { font-weight: 600; white-space: nowrap; }
.etat { font-size: .78rem; padding: 3px 11px; border-radius: 20px; font-weight: 600; letter-spacing: .02em; }
.etat.ok { background: #e4f3ea; color: #1f7a45; }
.etat.attn { background: #fdf1e0; color: #a96912; }
.etat.ko { background: #fbe9ea; color: #ab3742; }
.photos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 20px; }
.photos div {
  aspect-ratio: 4 / 3; border-radius: 2px;
  background: linear-gradient(135deg, var(--marque-pale), #dce3de);
  display: grid; place-items: center; color: var(--marque); opacity: .9;
}
.photos svg { width: 20px; height: 20px; stroke: var(--marque); fill: none; stroke-width: 1.5; }

/* Le plan de prise de vue. On ne montre plus quatre vignettes vides : on montre
   la LISTE des cliches imposes, parce que c est elle qui rassure. Trois colonnes
   serrees, chaque case porte le sujet et le nombre de photos attendues. */
.plan-photo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 20px; }
.plan-photo div {
  background: var(--marque-pale); border-radius: 2px; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 2px;
}
.plan-photo b { font-size: .78rem; color: var(--marque); font-weight: 600; line-height: 1.25; }
.plan-photo span { font-size: .72rem; color: var(--gris); }

/* ---------- Comparatif ---------- */
table.comparatif { width: 100%; border-collapse: collapse; margin-top: 44px; font-size: .97rem; }
table.comparatif th, table.comparatif td { padding: 18px 20px; text-align: left; border-bottom: 1px solid var(--gris-clair); }
table.comparatif thead th { font-family: var(--sans); font-size: .76rem; text-transform: uppercase; letter-spacing: .15em; color: var(--gris); font-weight: 600; }
table.comparatif thead th:last-child { color: var(--marque); }
table.comparatif td:first-child { font-weight: 600; width: 27%; }
table.comparatif td:nth-child(2) { color: var(--gris); }
table.comparatif td:last-child { background: var(--marque-pale); color: var(--marque-nuit); font-weight: 500; }
table.comparatif tbody tr:last-child td { border-bottom: 0; }

/* ---------- Abonnements ---------- */
/* Trois packs depuis la refonte du 7 octobre 2026, plus quatre. Les cartes sont
   donc plus larges : on laisse respirer un peu plus entre elles. */
.formules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 50px; align-items: stretch; }
.formule {
  border: 1px solid var(--gris-clair); background: #fff;
  padding: 30px 24px; border-radius: 3px; display: flex; flex-direction: column;
}
.formule.phare { border: 2px solid var(--marque); box-shadow: 0 18px 50px rgba(36, 57, 53, .12); position: relative; }
.formule.phare::before {
  content: "Le plus demandé"; position: absolute; top: -13px; left: 24px;
  background: var(--marque); color: #fff; font-size: .68rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; padding: 5px 13px; border-radius: 2px;
}
.medaille {
  align-self: flex-start; font-size: .68rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  padding: 5px 13px; border-radius: 20px; margin-bottom: 16px;
}
.medaille.bronze { background: #f4e7da; color: #6b421a; }
.medaille.argent { background: #eceae4; color: #434e4a; }
.medaille.or { background: #f9edc9; color: #6f5310; }
.medaille.diamant { background: var(--marque-pale); color: var(--marque); }
.formule h3 { margin-bottom: 4px; font-size: 1.32rem; }
.formule .rythme { font-size: .78rem; color: var(--marque); font-weight: 600; text-transform: uppercase; letter-spacing: .11em; margin-bottom: 18px; min-height: 3.4em; }
.formule .prix { font-family: var(--serif); font-size: 2.2rem; color: var(--marque); line-height: 1; }
.formule .prix small { font-family: var(--sans); font-size: .8rem; color: var(--gris); display: block; margin-top: 8px; font-weight: 400; }
.formule .resume {
  font-size: .92rem; color: var(--encre); margin: 20px 0 0;
  padding-top: 18px; border-top: 1px solid var(--gris-clair); font-style: italic;
  min-height: 6.2em;
}
.formule ul { list-style: none; padding: 0; margin: 20px 0 26px; }
.formule li { position: relative; padding-left: 24px; margin-bottom: 11px; font-size: .91rem; color: var(--gris); }
.formule li strong { color: var(--encre); font-weight: 600; }
.formule li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 11px; height: 6px; border-left: 2px solid var(--marque);
  border-bottom: 2px solid var(--marque); transform: rotate(-45deg);
}
.formule .bouton { margin-top: auto; text-align: center; }
.formule .paliers {
  margin-top: 12px; font-size: .85rem; color: var(--gris); line-height: 1.55; min-height: 4.6em;
}
.formule .paliers b { color: var(--marque); font-weight: 600; }
.note-prix { margin-top: 26px; font-size: .88rem; color: var(--gris); text-align: center; }

/* ---------- Grille complète ---------- */
.grille-bloc { margin-top: 74px; padding-top: 58px; border-top: 1px solid var(--gris-clair); }
.grille-bloc h3 {
  font-family: var(--serif); font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 400;
  line-height: 1.25; margin: 0 0 18px; max-width: 780px;
}
table.grille { width: 100%; border-collapse: collapse; font-size: .97rem; background: #fff; }
table.grille th, table.grille td {
  padding: 15px 18px; text-align: left; border-bottom: 1px solid var(--gris-clair);
}
table.grille thead th {
  font-family: var(--sans); font-size: .76rem; text-transform: uppercase; letter-spacing: .13em;
  color: var(--gris); font-weight: 600; vertical-align: bottom; border-bottom: 2px solid var(--marque-nuit);
}
table.grille thead th small {
  display: block; margin-top: 5px; font-size: .72rem; letter-spacing: .04em;
  text-transform: none; font-weight: 400; color: var(--gris-moyen);
}
table.grille td:first-child { font-weight: 600; width: 34%; }
table.grille td:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
table.grille tbody tr:hover td { background: #f8f7f2; }
table.grille tr.groupe td { border-top: 2px solid var(--gris-clair); }
table.grille tbody tr:last-child td { border-bottom: 0; color: var(--gris); }

.repere { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 40px; }
.repere > div {
  border: 1px solid var(--gris-clair); border-radius: 3px; padding: 26px 24px; background: #fff;
}
.repere > div.fort { border-color: var(--marque); background: var(--marque-pale); }
.repere b {
  display: block; font-family: var(--serif); font-size: 2.1rem; color: var(--marque-nuit);
  line-height: 1; margin-bottom: 12px;
}
.repere > div.fort b { color: var(--marque); }
.repere span { display: block; font-size: .92rem; color: var(--gris); }
.source {
  margin-top: 22px; font-size: .84rem; line-height: 1.65; color: var(--gris-moyen); max-width: 900px;
}

/* ---------- Portefeuille multi-sites ---------- */
.paliers-grille {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 46px;
}
.paliers-grille > div {
  border: 1px solid var(--gris-clair); border-radius: 3px; padding: 26px 22px; background: #fff;
}
.paliers-grille > div.fort { border-color: var(--marque); background: var(--marque-pale); }
.paliers-grille b {
  display: block; font-family: var(--serif); font-size: 1.28rem; color: var(--encre); margin-bottom: 12px;
}
.paliers-grille .remise {
  display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--marque); background: var(--marque-pale);
  padding: 5px 12px; border-radius: 20px;
}
.paliers-grille > div.fort .remise { background: #fff; }
.paliers-grille p { margin: 16px 0 0; font-size: .9rem; color: var(--gris); }

/* ---------- Hors grille (au-dela de 3 000 m²) ---------- */
.hors-grille {
  margin: 22px 0 0; padding: 16px 20px;
  background: var(--marque-pale); border-left: 3px solid var(--marque-or);
  font-size: .95rem; color: var(--encre);
}

/* ---------- Remise pour volume ---------- */
.volume { display: grid; grid-template-columns: 1.15fr 1fr; gap: 54px; align-items: start; margin-top: 46px; }
.volume h3 { font-size: 1.5rem; margin: 0 0 .5em; }
.volume p { color: var(--gris); }
.volume-points > div {
  border-top: 2px solid var(--marque-or); padding: 16px 0 18px;
}
.volume-points b {
  display: block; font-family: var(--serif); font-size: 1.2rem;
  color: var(--marque); margin-bottom: 6px;
}
.volume-points span { font-size: .93rem; color: var(--gris); }

/* ---------- Gestion locative ---------- */
/* Tenue a part du reste de l offre : c est un pourcentage, pas un forfait.
   Le bloc de prix est fonce pour qu on le distingue au premier coup d oeil
   des cartes de packs, qui sont claires. */
.gl-grille { display: grid; grid-template-columns: 1.4fr 1fr; gap: 54px; align-items: start; margin-top: 46px; }
.gl-grille h3 { font-size: 1.25rem; margin: 0 0 16px; }
.gl-liste { list-style: none; padding: 0; margin: 0; }
.gl-liste li {
  padding: 14px 0; border-top: 1px solid var(--gris-clair);
  font-size: .96rem; color: var(--gris); line-height: 1.55;
}
.gl-liste li strong { display: block; color: var(--encre); font-weight: 600; margin-bottom: 2px; }
.gl-plus {
  margin-top: 34px; padding: 26px 28px;
  border: 1px solid var(--marque-or); border-radius: 3px; background: #fff;
}
.gl-plus h3 { color: var(--marque); margin-bottom: 12px; }
.gl-plus p { margin: 0; color: var(--gris); font-size: .96rem; }
.gl-tarif {
  background: var(--marque); color: #fff; border-radius: 3px; padding: 34px 30px;
}
.gl-prix {
  font-family: var(--serif); font-size: clamp(2.3rem, 4.4vw, 3rem);
  color: var(--marque-or); line-height: 1; margin-bottom: 10px;
}
.gl-tarif .gl-detail { color: rgba(255, 255, 255, .88); font-size: .93rem; margin-bottom: 20px; }
.gl-second {
  margin: 0 0 20px; padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .22);
  color: rgba(255, 255, 255, .94); font-size: .95rem;
}
.gl-second strong { color: #fff; }
.gl-tarif .bouton { width: 100%; justify-content: center; }
.gl-note {
  margin: 20px 0 0; font-size: .82rem; line-height: 1.6;
  color: rgba(255, 255, 255, .66);
}

/* ---------- FAQ ---------- */
details {
  border-bottom: 1px solid var(--gris-clair); padding: 20px 0;
}
details summary {
  cursor: pointer; font-weight: 600; font-size: 1.04rem; list-style: none;
  display: flex; justify-content: space-between; gap: 20px; align-items: center;
}
details summary::-webkit-details-marker { display: none; }
details summary::after { content: "+"; color: var(--marque); font-size: 1.5rem; font-weight: 400; }
details[open] summary::after { content: "\2013"; }
details p { margin: 14px 0 0; color: var(--gris); font-size: .97rem; max-width: 820px; }

/* ---------- Contact ---------- */
.contact { background: var(--marque-nuit); color: #fff; }
.contact h2 { color: #fff; }
.contact p { color: rgba(255, 255, 255, .92); }
.contact .deux { gap: 72px; align-items: center; }
.coord { list-style: none; padding: 0; margin: 28px 0 0; }
.coord li { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; font-size: 1rem; }
.coord svg { width: 19px; height: 19px; stroke: var(--marque-or); fill: none; stroke-width: 1.7; flex: none; }
.coord a { color: #fff; text-decoration: none; }
.coord a:hover { color: var(--marque-or); }
form { background: rgba(255, 255, 255, .06); padding: 34px; border-radius: 3px; border: 1px solid rgba(255, 255, 255, .14); }
form label { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: var(--marque-or); margin-bottom: 7px; font-weight: 600; }
form input, form select, form textarea {
  width: 100%; padding: 13px 14px; margin-bottom: 18px;
  background: rgba(255, 255, 255, .95); border: 0; border-radius: 2px;
  font-family: var(--sans); font-size: .97rem; color: var(--encre);
}
form textarea { min-height: 110px; resize: vertical; }
form button { width: 100%; cursor: pointer; }

/* ---------- Pied ---------- */
footer { background: #16241f; color: rgba(255, 255, 255, .78); padding: 46px 0; font-size: .87rem; }
footer .wrap { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
footer img { height: 38px; opacity: .9; }
footer a { color: rgba(255, 255, 255, .88); text-decoration: none; }
footer a:hover { color: var(--marque-or); }

/* ---------- Tablette ---------- */
@media (max-width: 1100px) and (min-width: 901px) {
  .formules { grid-template-columns: repeat(2, 1fr); gap: 22px; }
  .formule.phare::before { left: 24px; }
  .rythme-bloc { grid-template-columns: 1fr; gap: 34px; }
  .paliers-grille { grid-template-columns: repeat(2, 1fr); gap: 22px; }
  table.grille th, table.grille td { padding: 14px 12px; font-size: .92rem; }
  table.grille td:first-child { width: 30%; }
  .distance .trio { grid-template-columns: 1fr; gap: 24px; }
  .valeur, .volume, .gl-grille { grid-template-columns: 1fr; gap: 30px; }
}

/* ---------- Mobile ---------- */
/* Sur téléphone, pas de vidéo : 15 Mo sur un forfait mobile, c est indélicat,
   et la page mettrait du temps à s afficher. On garde la même scène, en image
   fixe. Le visiteur ne perd rien : il voit exactement le premier plan du film. */
@media (max-width: 900px) {
  .hero-film { display: none; }
  .hero {
    background-image:
      linear-gradient(100deg, rgba(12, 20, 18, .93) 0%, rgba(12, 20, 18, .80) 48%, rgba(22, 36, 31, .60) 100%),
      url("a7-ouverture.jpg?v=2");
    background-size: cover;
    background-position: center 42%;
  }
  body.accueil .hero { padding-top: 152px; padding-bottom: 72px; }
  .hero-voile { display: none; }
  .pastille-decouvrir { margin-top: 44px; padding: 12px 22px; font-size: .82rem; }
}

/* Certains visiteurs ont demandé à leur appareil de limiter les animations
   (confort visuel, mal des transports, fatigue). On respecte ce réglage :
   pour eux, l ouverture est une image fixe, pas un film. */
@media (prefers-reduced-motion: reduce) {
  .hero-film { display: none; }
  .hero {
    background-image:
      linear-gradient(100deg, rgba(12, 20, 18, .93) 0%, rgba(12, 20, 18, .80) 48%, rgba(22, 36, 31, .60) 100%),
      url("a7-ouverture.jpg?v=2");
    background-size: cover;
    background-position: center 42%;
  }
  .hero-voile { display: none; }
}

@media (max-width: 900px) {
  .rythme-bloc { grid-template-columns: 1fr; gap: 28px; margin-top: 40px; padding-top: 34px; }
  .cadences { grid-template-columns: 1fr; }
  .formules { gap: 30px; }
  .formule.phare::before { left: 24px; }
  .formule .rythme, .formule .resume, .formule .paliers { min-height: 0; }
  .paliers-grille { grid-template-columns: 1fr; gap: 16px; margin-top: 34px; }

  section { padding: 66px 0; }
  .deux, .cartes, .etapes, .formules, .chiffres .wrap { grid-template-columns: 1fr; gap: 32px; }
  .distance .trio, .valeur, .volume, .gl-grille { grid-template-columns: 1fr; gap: 24px; }
  .plan-photo { grid-template-columns: repeat(2, 1fr); }
  .gl-tarif { padding: 26px 22px; }
  .signature { padding: 48px 0 44px; }
  .signature .phrase { font-size: 1.42rem; }
  .distance > h3 { font-size: 1.32rem; }
  .valeur { padding: 28px 24px; }
  .encadre .chute { font-size: 1.04rem; }
  .etape, .chiffre { border-left: 0; padding: 0; }
  .chiffres .wrap { gap: 0; }
  .chiffre { padding: 22px 0; border-top: 1px solid rgba(255, 255, 255, .12); }
  .chiffre:first-child { border-top: 0; }
  /* Le menu, les portes et le hamburger sont desormais regles une fois pour
     toutes plus haut dans ce fichier, a toute largeur. Les anciennes regles
     qui vivaient ici redefinissaient le menu en panneau pleine largeur et
     recalaient « .acces » a droite — elles cassaient la nouvelle barre, car
     ecrites plus bas elles l emportaient. Elles sont retirees. */
  nav { left: 24px; right: auto; min-width: 230px; }
  .marque .dept { display: none; }
  .photos { grid-template-columns: repeat(2, 1fr); }

  table.comparatif thead { display: none; }
  table.comparatif, table.comparatif tbody, table.comparatif tr, table.comparatif td { display: block; width: 100%; }
  table.comparatif tr { border: 1px solid var(--gris-clair); background: #fff; margin-bottom: 16px; }
  table.comparatif td { border-bottom: 0; padding: 16px 20px; }
  table.comparatif td:first-child {
    width: 100%; font-family: var(--serif); font-size: 1.18rem; font-weight: 600;
    background: var(--marque-nuit); color: #fff; padding: 14px 20px;
  }
  table.comparatif td[data-label]::before {
    content: attr(data-label); display: block; margin-bottom: 5px;
    font-size: .68rem; letter-spacing: .15em; text-transform: uppercase; font-weight: 600;
  }
  table.comparatif td[data-label="Mandat classique"]::before { color: var(--gris-moyen); }
  table.comparatif td[data-label="A7"]::before { color: var(--marque); }

  .grille-bloc { margin-top: 48px; padding-top: 40px; }
  table.grille thead { display: none; }
  table.grille, table.grille tbody, table.grille tr, table.grille td { display: block; width: 100%; }
  table.grille tr { border: 1px solid var(--gris-clair); background: #fff; margin-bottom: 16px; }
  table.grille tr.groupe td { border-top: 0; }
  table.grille td { border-bottom: 0; padding: 14px 20px; text-align: left; }
  table.grille td:first-child {
    width: 100%; font-family: var(--serif); font-size: 1.12rem; font-weight: 600;
    background: var(--marque-nuit); color: #fff; padding: 13px 20px;
  }
  table.grille td:not(:first-child) {
    text-align: left; display: flex; justify-content: space-between; align-items: baseline;
    border-top: 1px solid var(--gris-clair); font-weight: 600;
  }
  table.grille td[data-label]::before {
    content: attr(data-label); font-size: .68rem; letter-spacing: .15em;
    text-transform: uppercase; font-weight: 600; color: var(--marque);
  }
  table.grille tbody tr:last-child td:first-child { background: var(--gris-clair); color: var(--encre); }
  .repere { grid-template-columns: 1fr; gap: 16px; margin-top: 30px; }
}

/* ---------- Les deux portes du reporting ---------- */
.deux-portes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.precision-portes { margin: 16px 0 0; font-size: .88rem; color: var(--gris); line-height: 1.6; max-width: 540px; }
@media (max-width: 560px) {
  .deux-portes { flex-direction: column; }
  .deux-portes .bouton { text-align: center; }
}

/* ---------- Fenetres basses (portable avec barre de favoris) ----------
   En dessous de 820 px de hauteur utile, le seul plancher du retrait ne
   suffit plus : c est le titre, ecrit tres grand, qui mange l ecran. On le
   reduit d un cran et on resserre le reste, uniquement sur ordinateur
   (min-width 761px), pour que l ouverture — jusqu au cadre « prix fixe » —
   tienne entiere sans defilement. Le telephone garde ses propres reglages. */
@media (min-width: 761px) and (max-height: 820px) {
  body.accueil .hero { padding-top: 104px; padding-bottom: 64px; }
  body.accueil .hero h1 { font-size: clamp(2.2rem, 4.6vw, 3.5rem); }
  .hero .relance { font-size: clamp(1.05rem, 1.6vw, 1.3rem); margin-bottom: 16px; }
  .hero .chapo { font-size: 1.05rem; }
  .hero .actions { margin-top: 22px; }
  .vignettes { gap: 10px; }
  .pastille-locative { padding: 9px 16px; }
  .pastille-locative .eti { font-size: .66rem; margin-bottom: 3px; }
  .pastille-locative .fixe { font-size: 1.24rem; }
  .pastille-locative .detail { margin-top: 5px; font-size: .84rem; }
  .pastille-locative .sous { margin-top: 5px; padding-top: 5px; font-size: .72rem; }
}