/* =========================================================
   Altais Immobilier - feuille de style unique
   Palette nuit / or, d'apres la maquette du 03/09/2026.
   Classes en francais, une seule feuille, aucune dependance.
   ========================================================= */

:root{
  --nuit:#0b0c0d;
  --nuit-2:#101113;
  --nuit-3:#16181b;
  --bleu:#0c1a26;
  --carte:rgba(255,255,255,.028);
  --carte-bord:rgba(192,146,83,.24);
  --or:#c09253;
  --or-clair:#e2b26e;
  --or-pale:#f0d9b0;
  --or-sombre:#7f6335;
  --texte:#f1eee8;
  --texte-doux:#b3afa8;
  --texte-faible:#7c7871;
  --ligne:rgba(255,255,255,.09);
  --serif:"Cormorant Garamond",Garamond,Georgia,"Times New Roman",serif;
  --sans:"Roboto",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --max:1520px;
  --pad:clamp(1.25rem,4.6vw,4.5rem);
  --r:0px;
  /* Hauteur reservee au-dessus du heros. Doit rester SUPERIEURE a la hauteur reelle
     de l'entete fixe, sinon le titre passe dessous des que la fenetre est basse :
     l'entete mesure 157 px au-dessus de 1000 px, 86 px en dessous. Valeur mesuree,
     ne pas la baisser sans remesurer (a 140 px, le titre passait 14 px sous la barre
     sur une fenetre de 1440 x 700). */
  --entete:184px;
}

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

/* scroll-padding-top : doit depasser la hauteur de l'entete COLLEE (112 px au-dessus
   de 1000 px, 66 px en dessous), sinon la cible d'une ancre se gare sous la barre.
   A 96 px, le titre « Bareme des honoraires » des mentions legales etait masque de 16 px. */
html{scroll-behavior:smooth;scroll-padding-top:104px;-webkit-text-size-adjust:100%}
@media (min-width:1001px){html{scroll-padding-top:132px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--nuit);
  color:var(--texte);
  font-family:var(--sans);
  font-size:1rem;
  line-height:1.68;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
p{margin:0}

h1,h2,h3,h4{margin:0;font-weight:400;line-height:1.14}
h1,h2,h3{font-family:var(--serif);letter-spacing:.01em}

::selection{background:var(--or);color:#12100b}
:focus-visible{outline:2px solid var(--or-clair);outline-offset:3px}

.contenu{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* le lien d'evitement doit redevenir visible quand on l'atteint au clavier,
   sinon il n'aide personne : il reste invisible pour tout le monde. */
a.sr-only:focus{
  position:fixed;top:12px;left:12px;z-index:100;
  width:auto;height:auto;margin:0;overflow:visible;clip:auto;
  background:var(--or);color:#17120a;padding:.7rem 1.2rem;
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
}

/* ---------- vocabulaire commun ---------- */

.surtitre{
  font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--or-clair);font-weight:400;margin:0 0 1.2rem;
}
.titre-section{font-size:clamp(2rem,4vw,3.1rem);margin:0 0 1.1rem;letter-spacing:.015em}
.chapeau{color:var(--texte-doux);font-size:1.02rem;max-width:64ch}
.filet{width:60px;height:1px;background:var(--or);margin:0 0 1.5rem;opacity:.85}

section{position:relative}
.section{padding-block:clamp(4rem,8.5vw,7.5rem)}
.section--sombre{background:var(--nuit-2)}
.entete-section{margin-bottom:clamp(2.5rem,5vw,4rem);max-width:70ch}
.entete-section--centre{text-align:center;margin-inline:auto}
.entete-section--centre .filet{margin-inline:auto}
.entete-section--centre .chapeau{margin-inline:auto}

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

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:1.1rem;
  font-family:var(--sans);font-size:.8rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;
  padding:1.15rem 2.3rem;border-radius:var(--r);border:1px solid transparent;
  cursor:pointer;transition:background .25s,color .25s,border-color .25s,transform .25s;
}
.btn svg{width:19px;height:19px;flex-shrink:0;transition:transform .25s}
.btn--or{background:var(--or);color:#fbf7f0;border-color:var(--or)}
.btn--or:hover{background:var(--or-clair);color:#17120a;border-color:var(--or-clair);transform:translateY(-1px)}
.btn--or:hover svg{transform:translateX(5px)}
.btn--ligne{background:transparent;color:var(--texte);border-color:rgba(192,146,83,.5)}
.btn--ligne:hover{border-color:var(--or-clair);color:var(--or-clair)}
.btn--ligne:hover svg{transform:translateX(5px)}
.btn--large{width:100%}

.lien-fleche{
  display:inline-flex;align-items:center;gap:.7rem;
  font-size:.76rem;letter-spacing:.22em;text-transform:uppercase;color:var(--or-clair);
  padding-block:.35rem;border-bottom:1px solid rgba(192,146,83,.4);transition:color .22s,border-color .22s;
}
.lien-fleche svg{width:17px;height:17px;transition:transform .25s}
.lien-fleche:hover{color:var(--or-pale);border-bottom-color:var(--or-clair)}
.lien-fleche:hover svg{transform:translateX(5px)}

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

.entete{
  position:fixed;inset:0 0 auto;z-index:60;
  background:transparent;border-bottom:1px solid transparent;
  transition:background .3s,border-color .3s,backdrop-filter .3s,padding .3s;
}
.entete.est-collee{
  background:rgba(11,12,13,.93);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom-color:var(--ligne);
}
.entete__barre{
  display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;
  padding-block:2.3rem 1rem;transition:padding .3s;
}
.entete.est-collee .entete__barre{padding-block:.9rem .75rem}

/* marque : monogramme, puis le nom et le metier, centres dessous */
.marque{display:flex;flex-direction:column;align-items:center;gap:.55rem;flex-shrink:0}
.marque__mots{display:flex;flex-direction:column;align-items:center;gap:.32rem}
/* Monogramme : SVG en ligne, redessine d'apres la maquette. Sa hauteur pilote la
   taille, la largeur suit le rapport de la boite (43/44) - celui de l'image qu'il
   remplace, pour que la geometrie de l'en-tete ne bouge pas. Il prend sa couleur
   par currentColor, comme les autres pictogrammes du site. */
.marque__mono{display:block;height:44px;width:auto;aspect-ratio:43/44;flex-shrink:0;transition:height .3s;color:var(--or-clair)}
.marque__nom{
  font-family:var(--serif);font-size:1.85rem;font-weight:400;line-height:1;
  letter-spacing:.26em;text-indent:.26em;text-transform:uppercase;
  color:var(--texte);white-space:nowrap;transition:font-size .3s;
}
.marque__metier{
  font-size:.6rem;letter-spacing:.42em;text-indent:.42em;text-transform:uppercase;
  color:var(--or);white-space:nowrap;
}
.entete.est-collee .marque__mono{height:32px}
.entete.est-collee .marque__nom{font-size:1.4rem}

.nav{display:flex;align-items:center;gap:clamp(1.6rem,3vw,2.9rem);margin-top:1.3rem}
.nav a{
  font-size:.78rem;font-weight:400;letter-spacing:.15em;text-transform:uppercase;
  color:var(--texte);padding-block:.35rem;position:relative;transition:color .22s;
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:-7px;height:1px;
  background:var(--or-clair);transform:scaleX(0);transform-origin:left;transition:transform .28s;
}
.nav a:hover{color:var(--or-clair)}
.nav a[aria-current="page"]{color:var(--or-clair)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}

.bloc-tel{
  display:inline-flex;align-items:center;gap:.7rem;margin-top:.7rem;
  border:1px solid rgba(192,146,83,.55);border-radius:var(--r);
  padding:.75rem 1.35rem;
  font-size:.92rem;letter-spacing:.05em;color:var(--texte);white-space:nowrap;
  transition:border-color .25s,background .25s,color .25s;
}
.bloc-tel svg{width:16px;height:16px;color:var(--or-clair);flex-shrink:0}
.bloc-tel:hover{border-color:var(--or-clair);background:rgba(192,146,83,.12)}

.burger{display:none;background:none;border:0;padding:.5rem;cursor:pointer;color:var(--texte);margin-top:.8rem}
.burger svg{width:26px;height:26px}

@media (max-width:1160px){
  .nav{gap:1.4rem}
  .nav a{font-size:.72rem;letter-spacing:.1em}
}
@media (max-width:1000px){
  /* entete reelle : 86 px. 120 px laisse 34 px d'air sous la barre (76 px n'en laissait 6). */
  :root{--entete:120px}
  .nav,.bloc-tel{display:none}
  .burger{display:block}
  .entete{background:rgba(11,12,13,.93);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom-color:var(--ligne)}
  .entete__barre{align-items:center;padding-block:.85rem}
  .marque{flex-direction:row;align-items:center;gap:.75rem}
  .marque__mots{display:flex;flex-direction:column;align-items:flex-start;gap:.15rem}
  .marque__mono{height:30px}
  .marque__nom{font-size:1.25rem;letter-spacing:.2em;text-indent:.2em}
  .marque__metier{font-size:.53rem;letter-spacing:.3em;text-indent:.3em}
}

/* menu mobile */
/* Ferme, le menu est seulement pousse hors de l'ecran par translateY : ses sept liens
   restent alors atteignables au clavier et exposes aux lecteurs d'ecran, a TOUTES les
   largeurs, y compris sur le bureau ou le menu ne s'ouvre jamais. visibility:hidden les
   retire de l'ordre de tabulation ; le delai de transition la garde visible le temps de
   l'animation de fermeture. */
.menu-mobile{
  position:fixed;inset:0;z-index:70;background:var(--nuit);
  display:flex;flex-direction:column;justify-content:flex-start;
  padding:var(--pad);
  /* Le contenu doit rester ATTEIGNABLE quand l'ecran est court : telephone tenu
     a l'horizontale (375 a 414 px de haut) ou petit portrait (320 x 480).
     justify-content:center coupait le contenu par les DEUX bouts et la couche
     n'avait aucun defilement - mesure a 667 x 375 : 119 px hors de l'ecran,
     « Accueil », « Biens d'exception », « Nous ecrire » et le numero de telephone
     inaccessibles, et rien pour aller les chercher.
     C'est la LISTE DES LIENS qui defile, pas la couche : le bouton d'appel, le
     numero et surtout le bouton de fermeture restent en place. Faire defiler la
     couche entiere emportait le bouton de fermeture avec elle (mesure : 31 px
     au-dessus du bord haut a 667 x 375), y compris en position:fixed, que le
     transform de la couche ramene au meme comportement qu'un absolute. */
  overflow:hidden;
  transform:translateY(-100%);visibility:hidden;
  transition:transform .4s cubic-bezier(.7,0,.2,1),visibility 0s .4s;
}
/* les marges auto centrent le bloc tant qu'il y a la place, et rendent la place
   au defilement quand il n'y en a plus */
.menu-mobile nav{margin-top:auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.menu-mobile .btn,.menu-mobile__tel{flex-shrink:0}
.menu-mobile__tel{margin-bottom:auto}
.menu-mobile[data-ouvert="true"]{
  transform:translateY(0);visibility:visible;
  transition:transform .4s cubic-bezier(.7,0,.2,1),visibility 0s;
}
.menu-mobile__fermer{
  position:absolute;top:16px;right:var(--pad);
  background:none;border:0;color:var(--texte);cursor:pointer;padding:.5rem;
}
.menu-mobile__fermer svg{width:26px;height:26px}
.menu-mobile nav{display:flex;flex-direction:column}
.menu-mobile nav a{
  font-family:var(--serif);font-size:1.9rem;padding-block:.5rem;
  border-bottom:1px solid var(--ligne);
}
.menu-mobile nav a:last-of-type{border-bottom:0}
.menu-mobile .btn{margin-top:1.8rem}
.menu-mobile__tel{
  display:inline-flex;align-items:center;gap:.7rem;margin-top:1.4rem;
  font-size:1rem;letter-spacing:.06em;color:var(--or-clair);
}
.menu-mobile__tel svg{width:18px;height:18px}

/* ---------- heros ---------- */

.heros{position:relative;background:var(--nuit)}
.heros__cadre{
  position:relative;min-height:max(620px,84svh);
  display:flex;align-items:center;overflow:hidden;
  padding-top:var(--entete);padding-bottom:clamp(3rem,6vw,5rem);
}
.heros__image{position:absolute;inset:0;z-index:0}
.heros__image img{width:100%;height:100%;object-fit:cover;object-position:64% 50%}
.heros__voile{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(90deg,rgba(8,11,15,.94) 0%,rgba(8,11,15,.80) 28%,rgba(8,11,15,.34) 55%,rgba(8,11,15,.06) 100%),
    linear-gradient(0deg,rgba(11,12,13,.96) 0%,rgba(11,12,13,.10) 34%,rgba(11,12,13,0) 55%),
    linear-gradient(180deg,rgba(8,11,15,.62) 0%,rgba(8,11,15,0) 22%);
}
.heros__contenu{position:relative;z-index:2}
.heros__texte{max-width:min(44rem,46vw)}

.heros h1{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(2.3rem,4.45vw,4.4rem);line-height:1.1;letter-spacing:.042em;
  text-transform:uppercase;margin:0 0 1.9rem;
}
.heros h1 span{display:block}
.heros h1 .en-or{color:var(--or-clair)}
.heros__accroche{
  color:#dcd8d1;font-size:clamp(1rem,1.15vw,1.1rem);line-height:1.62;
  max-width:56ch;margin-bottom:2.4rem;
}

/* bloc « bien a la une », pose en bas a droite de la photo */
.heros__pied{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;justify-content:flex-end}
.bien-une{
  width:min(520px,100%);
  background:rgba(23,21,20,.86);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.07);border-bottom:0;
  padding:1.8rem clamp(1.4rem,2vw,2.3rem) 1.9rem;
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:1.4rem;
}
.bien-une__tete{display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem}
.bien-une__tete span{
  font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;color:#ddd8d0;white-space:nowrap;
}
.bien-une__tete i{display:block;height:1px;background:rgba(255,255,255,.28);flex:1}
.bien-une h2{
  font-family:var(--serif);font-size:clamp(1.5rem,2vw,2.05rem);font-weight:400;
  letter-spacing:.06em;text-transform:uppercase;margin:0 0 .35rem;
}
.bien-une__lieu{
  font-size:.82rem;letter-spacing:.22em;text-transform:uppercase;color:var(--or-clair);
  margin-bottom:1.35rem;
}
.bien-une__traits{display:flex;flex-wrap:wrap;gap:.6rem 2rem;list-style:none;margin:0;padding:0}
.bien-une__traits li{display:flex;align-items:center;gap:.6rem;font-size:.92rem;color:#ddd8d0}
.bien-une__traits svg{width:20px;height:20px;color:var(--or-clair);flex-shrink:0}
.bien-une__rond{
  width:64px;height:64px;border-radius:50%;background:var(--or);
  display:grid;place-items:center;color:#fbf7f0;flex-shrink:0;
  transition:background .25s,transform .25s;
}
.bien-une__rond svg{width:24px;height:24px}
.bien-une__rond:hover{background:var(--or-clair);transform:translateY(-2px)}

@media (min-width:861px) and (max-width:1100px){
  .heros__texte{max-width:min(34rem,62vw)}
  .bien-une{width:min(460px,100%)}
}
/* ---- heros en portrait : la MEME composition, en reduction ----
   Modele repris du projet peinture et du site de phare : la photo est servie
   ENTIERE (hauteur naturelle, aucun rognage) dans la meme cellule de grille
   que le texte, le texte reste POSE DESSUS en haut a gauche, et le bloc
   « bien a la une » reste POSE EN BAS A DROITE de la photo, comme sur le
   grand ecran. Rien ne descend sous la photo, rien ne change d'ordre.
   Sous 860 px le <picture> sert la version CARREE (1:1) : servie sur toute la
   largeur, elle mesure donc exactement 100vw de haut. C'est cette valeur qui
   fixe la hauteur du cadre.
   Le voile garde le degrade du grand ecran (sombre a gauche, clair a droite) :
   ses arrets sont en pourcentage, ils se mettent a l'echelle tout seuls. */
/* Le bloc « bien a la une » doit rester ce qu'il est au bureau : une carte
   LARGE ET BASSE, posee sur le bord bas de la photo, a droite. Deux choses le
   deformaient sur telephone.
   1. Sa largeur etait fixee a 40,625vw, soit exactement sa proportion du grand
      ecran (520 sur 1280). Mais son texte ne peut pas descendre sous le plancher
      de 11 px : a 390 px de large la carte ne fait plus que 158 px, « Commune a
      completer » s'y enroule sur trois lignes et Surface, Chambres, Situation
      s'empilent. La carte devient haute et etroite, l'inverse de sa forme au
      bureau. Elle prend donc 78vw sur telephone : meme forme, large et basse,
      avec un texte lisible.
   2. Son ancrage bottom:0 la calait sur le bas du HEROS. Depuis que la photo est
      servie entiere, la hauteur du heros est donnee par le texte et non plus par
      la photo : la carte se retrouvait plantee au milieu de l'image. Elle est
      maintenant calee sur le bord bas de la PHOTO — margin-top l'amene au bas de
      la photo (hauteur = 100vw / 1,5), translateY la remonte de sa propre
      hauteur, quelle qu'elle soit. */
@media (max-width:600px){
  .heros{display:grid;grid-template-columns:minmax(0,1fr)}
  .heros__cadre{grid-area:1/1}
  .heros__pied{
    grid-area:1/1;position:relative;left:auto;right:auto;bottom:auto;
    align-self:start;margin-top:calc(var(--entete) + 66.667vw);transform:translateY(-100%);
  }
  .bien-une{width:min(82vw,420px);padding:clamp(8px,2.4vw,15px) clamp(8px,2.4vw,15px) clamp(9px,2.6vw,17px);gap:clamp(5px,1.6vw,10px)}
  /* les trois traits visent UNE ligne comme au bureau, mais le conteneur garde le
     droit de replier : nowrap sur la ligne entiere faisait deborder la carte hors
     de l'ecran et coupait « Situation ». nowrap reste sur chaque libelle pour
     qu'aucun mot ne se casse. */
  .bien-une__traits{flex-wrap:wrap;gap:clamp(4px,1.2vw,8px)}
  .bien-une__traits li{white-space:nowrap}
  .bien-une__tete{margin-bottom:clamp(5px,1.6vw,10px)}
  .bien-une__lieu{margin-bottom:clamp(5px,1.6vw,10px);white-space:nowrap}
}

@media (max-width:860px){
  .heros__cadre{
    display:grid;grid-template-columns:minmax(0,1fr);align-items:start;
    min-height:0;padding-top:var(--entete);padding-bottom:0;
  }
  .heros__image,.heros__contenu{grid-area:1/1}
  .heros__image{position:relative;align-self:start}
  .heros__image img{height:auto;aspect-ratio:auto}
  .heros__contenu{align-self:start}
}

/* ---------- bandeau des quatre atouts ---------- */

.atouts{background:var(--nuit);border-top:1px solid var(--ligne)}
.atouts__grille{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.atout{
  display:flex;align-items:flex-start;gap:1.15rem;
  padding:2.3rem clamp(1rem,1.8vw,1.9rem);
  border-right:1px solid var(--ligne);
}
.atout:first-child{padding-left:0}
.atout:last-child{border-right:0;padding-right:0}
.atout svg{width:40px;height:40px;color:var(--or-clair);flex-shrink:0;stroke-width:1.05}
.atout h3{
  font-family:var(--sans);font-size:.75rem;font-weight:400;letter-spacing:.13em;
  text-transform:uppercase;color:#e6e2db;margin:.3rem 0 .6rem;
}
.atout p{color:var(--texte-doux);font-size:.9rem;line-height:1.62}

.cue{
  display:flex;justify-content:center;padding-bottom:clamp(2rem,4vw,3.2rem);
  border-top:1px solid var(--ligne);padding-top:clamp(1.8rem,3.5vw,2.6rem);
}
.cue a{
  display:inline-flex;align-items:center;gap:1rem;
  font-size:.78rem;letter-spacing:.28em;text-transform:uppercase;color:var(--or-clair);
  transition:color .22s;
}
.cue a:hover{color:var(--or-pale)}
.cue svg{width:20px;height:20px;flex-shrink:0}

/* La rangee de quatre atouts reste une rangee de quatre a toutes les
   largeurs : voir le bloc de reduction en fin de feuille. */

/* ---------- reserves d'image ---------- */

.reserve{
  position:relative;width:100%;overflow:hidden;
  background:rgba(255,255,255,.035);
  border:1px dashed rgba(192,146,83,.34);
  display:grid;place-items:center;text-align:center;padding:1.4rem;
}
.reserve--sombre{background:rgba(255,255,255,.02)}
.reserve svg{width:34px;height:34px;color:var(--or);margin-bottom:.8rem;stroke-width:1.2}
.reserve span{
  display:block;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--texte-faible);line-height:1.7;
}

/* ---------- biens ---------- */

.biens{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.2rem,2.2vw,2.2rem)}
/* .biens garde ses trois colonnes : voir le bloc de reduction. */

.bien{
  display:flex;flex-direction:column;
  border:1px solid var(--ligne);background:var(--carte);
  transition:border-color .3s,transform .3s;
}
.bien:hover{border-color:var(--carte-bord);transform:translateY(-3px)}
.bien .reserve{border:0;border-bottom:1px dashed rgba(192,146,83,.34);aspect-ratio:4/3}
.bien__corps{padding:clamp(1.4rem,2.2vw,1.9rem);display:flex;flex-direction:column;flex:1}
.bien h3{
  font-family:var(--serif);font-size:1.55rem;letter-spacing:.05em;
  text-transform:uppercase;margin-bottom:.9rem;
}
.bien p{color:var(--texte-doux);font-size:.94rem;flex:1}
.bien__traits{
  list-style:none;margin:1.4rem 0 0;padding:1.2rem 0 0;border-top:1px solid var(--ligne);
  display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;
}
.bien__traits li{display:flex;align-items:center;gap:.55rem;font-size:.82rem;color:var(--texte-faible)}
.bien__traits svg{width:17px;height:17px;color:var(--or);flex-shrink:0}

.note{
  display:flex;gap:1rem;align-items:flex-start;
  margin-top:clamp(1.8rem,3vw,2.6rem);padding:1.5rem 1.7rem;
  border:1px solid var(--carte-bord);background:rgba(192,146,83,.05);
}
.note svg{width:22px;height:22px;color:var(--or-clair);flex-shrink:0;margin-top:.2rem}
.note p{color:var(--texte-doux);font-size:.94rem}
.note strong{color:var(--texte);font-weight:400}
.note a{color:var(--or-clair);text-decoration:underline;text-underline-offset:3px}

/* ---------- services ---------- */

.services{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--ligne);border:1px solid var(--ligne)}
/* .services garde sa grille deux par deux : voir le bloc de reduction. */
.service{background:var(--nuit);padding:clamp(1.8rem,3vw,2.8rem);transition:background .3s}
.service:hover{background:var(--nuit-3)}
.section--sombre .service{background:var(--nuit-2)}
.section--sombre .service:hover{background:var(--nuit-3)}
.service__ico{display:block;width:28px;height:28px;color:var(--or-clair);margin-bottom:1.5rem;stroke-width:1.3}
.service__tete{display:flex;align-items:baseline;gap:1.1rem;margin-bottom:1rem}
.service__num{
  font-family:var(--serif);font-size:2.3rem;line-height:1;color:transparent;
  font-variant-numeric:lining-nums;-webkit-text-stroke:1px var(--or-sombre);
}
.service h3{font-size:1.6rem;letter-spacing:.02em}
.service p{color:var(--texte-doux);font-size:.96rem}
.service ul{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;gap:.6rem}
.service li{display:flex;gap:.75rem;align-items:flex-start;font-size:.9rem;color:var(--texte-faible)}
.service li svg{width:16px;height:16px;color:var(--or);flex-shrink:0;margin-top:.3rem}

/* ---------- a propos ---------- */

.apropos{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2.2rem,5vw,4.5rem);align-items:center}
/* .apropos garde ses deux volets : voir le bloc de reduction. */
.apropos .reserve{aspect-ratio:3/4}
.apropos__liste{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:1.1rem}
.apropos__liste li{display:flex;gap:.9rem;align-items:flex-start;color:var(--texte-doux);font-size:.98rem}
.apropos__liste svg{width:19px;height:19px;color:var(--or);flex-shrink:0;margin-top:.35rem}

/* ---------- avis ---------- */

.avis{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2.2rem,5vw,4.5rem);align-items:center}
/* .avis garde ses deux volets : voir le bloc de reduction. */
.avis .reserve{aspect-ratio:1/1}
.avis__cartes{display:grid;gap:1rem;margin-top:2rem}
.avis__attente{
  display:flex;align-items:center;gap:1rem;
  border:1px dashed rgba(192,146,83,.3);background:rgba(255,255,255,.02);
  padding:1.15rem 1.4rem;
}
.avis__attente svg{width:22px;height:22px;color:var(--or);flex-shrink:0;stroke-width:1.3}
.avis__attente span{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--texte-faible)}

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

.questions{max-width:880px;margin-inline:auto}
.question{border-bottom:1px solid var(--ligne)}
.question summary{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:1.5rem 0;cursor:pointer;list-style:none;
  font-family:var(--serif);font-size:1.35rem;transition:color .22s;
}
.question summary::-webkit-details-marker{display:none}
.question summary:hover{color:var(--or-clair)}
.question__signe{position:relative;width:15px;height:15px;flex-shrink:0}
.question__signe::before,.question__signe::after{content:"";position:absolute;background:var(--or);transition:transform .3s}
.question__signe::before{top:7px;left:0;width:15px;height:1px}
.question__signe::after{left:7px;top:0;width:1px;height:15px}
.question[open] .question__signe::after{transform:scaleY(0)}
.question__corps{padding:0 0 1.7rem;color:var(--texte-doux);font-size:.97rem;max-width:74ch}
.question__corps p+p{margin-top:.9rem}
.question__corps a{color:var(--or-clair);text-decoration:underline;text-underline-offset:3px}

/* ---------- contact ---------- */

.contact{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2.5rem,6vw,5rem)}
/* .contact garde ses deux volets : voir le bloc de reduction. */

.contact__voies{list-style:none;margin:2.2rem 0 0;padding:0;display:grid;gap:1.5rem}
.contact__voies li{display:flex;gap:1.1rem;align-items:flex-start}
.contact__voies svg{width:20px;height:20px;color:var(--or-clair);flex-shrink:0;margin-top:.4rem}
.contact__voies span{
  display:block;font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--texte-faible);margin-bottom:.25rem;
}
.contact__voies a,.contact__voies p{font-size:1.04rem;color:var(--texte)}
.contact__voies a:hover{color:var(--or-clair)}

.form{display:grid;gap:1.3rem}
.form__duo{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem}
/* .form__duo garde ses deux champs cote a cote : voir le bloc de reduction. */
.champ{display:grid;gap:.5rem}
.champ label{font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--texte-faible)}
.champ input,.champ select,.champ textarea{
  width:100%;background:rgba(255,255,255,.03);color:var(--texte);
  border:1px solid var(--ligne);border-radius:var(--r);
  padding:.95rem 1.05rem;font-family:var(--sans);font-size:.98rem;font-weight:300;
  transition:border-color .25s,background .25s;
}
.champ textarea{min-height:132px;resize:vertical}
.champ input:focus,.champ select:focus,.champ textarea:focus{
  outline:none;border-color:var(--or);background:rgba(255,255,255,.05);
}
.champ select{
  appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,#c09253 50%),linear-gradient(135deg,#c09253 50%,transparent 50%);
  background-position:calc(100% - 19px) 50%,calc(100% - 14px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.champ select option{background:var(--nuit-2);color:var(--texte)}
.form__pot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__mention{font-size:.8rem;color:var(--texte-faible);line-height:1.6}
.form__etat{font-size:.9rem;color:var(--or-clair);min-height:1.4em}

/* ---------- pied de page ---------- */

.pied{border-top:1px solid var(--ligne);background:var(--nuit-2);padding-block:3.5rem 2rem}
.pied__haut{
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2.5rem;
  padding-bottom:2.5rem;border-bottom:1px solid var(--ligne);
}
/* .pied__haut garde ses quatre colonnes : voir le bloc de reduction. */
.pied .marque{align-items:flex-start;margin-bottom:1.2rem}
.pied .marque__nom{font-size:1.45rem}
.pied p{color:var(--texte-doux);font-size:.92rem;max-width:44ch}
.pied h4{
  font-family:var(--sans);font-size:.68rem;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:var(--or-clair);margin:0 0 1.2rem;
}
.pied ul{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.pied ul a{font-size:.92rem;color:var(--texte-doux);transition:color .22s}
.pied ul a:hover{color:var(--texte)}
.pied__bas{display:flex;flex-wrap:wrap;gap:.8rem 2rem;justify-content:space-between;padding-top:1.8rem}
.pied__bas p,.pied__bas a{font-size:.8rem;color:var(--texte-faible)}
.pied__bas a:hover{color:var(--texte-doux)}

/* ---------- apparition au defilement ---------- */

.js .apparait{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.js .apparait.est-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .apparait{opacity:1;transform:none;transition:none}
}

/* ---------- page annexe ---------- */

.page-texte{padding-block:clamp(7rem,14vh,10rem) clamp(4rem,8vw,6rem)}
.page-texte h1{font-size:clamp(2rem,5vw,3rem);margin-bottom:2rem;letter-spacing:.03em}
.page-texte h2{font-size:1.5rem;margin:2.8rem 0 .9rem;color:var(--or-clair)}
.page-texte p,.page-texte li{color:var(--texte-doux);font-size:.98rem}
.page-texte p+p{margin-top:.8rem}
.page-texte ul{padding-left:1.2rem;display:grid;gap:.5rem;margin:.6rem 0 0}
.page-texte a{color:var(--or-clair);text-decoration:underline;text-underline-offset:3px}
.page-texte .bloc{max-width:78ch}


/* =========================================================
   LA MEME PAGE, EN REDUCTION (portrait et petites fenetres)
   ---------------------------------------------------------
   Principe : l'ecran de reference fait 1280 px. Toute valeur ci-dessous est
   la mesure relevee sur le grand ecran divisee par 12,8, donc exprimee en vw.
   La page garde ainsi EXACTEMENT sa composition - rangee de quatre atouts,
   rangee de trois biens, grille deux par deux des services, photo a gauche et
   texte a droite, texte a gauche et photo a droite, texte a gauche et
   formulaire a droite, pied en quatre colonnes - et ne fait que retrecir.
   Rien ne change de place ni d'ordre.
   Chaque clamp() porte un PLANCHER EN PIXELS : sans lui, a 375 px, 1,175vw
   tomberait a 4,4 px. Le plancher est a 11 px pour tout texte reel.
   minmax(0,1fr) partout : sans lui un mot insecable impose sa largeur a la
   colonne et pousse la grille hors de l'ecran.
   Ce bloc doit rester en FIN de feuille : plusieurs @media plus haut portent
   les memes selecteurs et, a specificite egale, c'est le dernier qui gagne.
   ========================================================= */
@media (max-width:1000px){

  /* 58,88 px de marge laterale sur 1280 = 4,6vw. Le clamp du grand ecran a un
     plancher de 20 px qui, sous 435 px de large, cesse d'etre une reduction. */
  .contenu{padding-inline:4.6vw}
  .section{padding-block:clamp(24px,8.5vw,120px)}

  /* --- vocabulaire commun --- */
  /* l'interlettrage, pas la taille, est ce qui fait deborder un surtitre :
     a .3em un mot de 19 signes mesure 171 px pour une colonne de 135. */
  .surtitre{font-size:clamp(11px,.9vw,11.52px);letter-spacing:.14em;margin-bottom:clamp(6px,1.5vw,19.2px)}
  .titre-section{font-size:clamp(14.5px,3.875vw,49.6px);margin-bottom:clamp(6px,1.375vw,17.6px)}
  .chapeau{font-size:clamp(11px,1.275vw,16.32px)}
  .filet{width:clamp(14px,4.688vw,60px);margin-bottom:clamp(7px,1.875vw,24px)}
  .entete-section{margin-bottom:clamp(14px,5vw,64px)}

  /* --- boutons --- */
  .btn{
    font-size:clamp(11px,1vw,12.8px);letter-spacing:.1em;
    gap:clamp(5px,1.375vw,17.6px);
    padding:clamp(7px,1.4375vw,18.4px) clamp(9px,2.875vw,36.8px);
  }
  .btn svg{width:clamp(11px,1.484vw,19px);height:clamp(11px,1.484vw,19px)}
  /* le menu mobile est une couche plein ecran, pas une reduction de la page :
     son bouton garde les valeurs du grand ecran. Ecrit en exception plutot
     qu'en :not(), dont la specificite (0,3,0) l'emporterait sur .heros .btn. */
  .menu-mobile .btn{font-size:.8rem;letter-spacing:.2em;gap:1.1rem;padding:1.15rem 2.3rem}
  .menu-mobile .btn svg{width:19px;height:19px}
  .lien-fleche{font-size:clamp(11px,.95vw,12.16px);letter-spacing:.08em;gap:clamp(4px,.875vw,11.2px)}
  .lien-fleche svg{width:clamp(11px,1.328vw,17px);height:clamp(11px,1.328vw,17px)}

  /* --- en-tete : seul le sous-titre remonte au plancher de 11 px --- */
  /* a .3em il mesurerait 101 px, plus large que ALTAIS (98 px) qu'il souligne :
     l'interlettrage descend a .22em pour qu'il reste borne par le nom. */
  .marque__metier{font-size:11px;letter-spacing:.22em;text-indent:.22em}

  /* --- heros : texte pose sur la photo, bloc « bien a la une » pose dessus --- */
  .heros__texte{max-width:46vw}
  .heros__contenu{padding-block:clamp(10px,3.4vw,44px) 0}
  .heros h1{font-size:clamp(17px,4.45vw,70.4px);margin-bottom:clamp(7px,2.375vw,30.4px)}
  .heros__accroche{font-size:clamp(11px,1.25vw,16px);line-height:1.5;margin-bottom:clamp(9px,3vw,38.4px)}
  /* Le bouton du heros garde l'interlettrage commun des boutons reduits (.1em) :
     il n'y a que sur telephone qu'il ne tient pas, voir le bloc max-width:430px. */
  .heros .btn{white-space:nowrap;padding-inline:clamp(8px,2.875vw,36.8px);gap:clamp(4px,1.375vw,17.6px)}

  /* le bloc reste en bas a DROITE de la photo, a sa largeur relative (520/1280) */
  .bien-une{
    width:40.625vw;
    padding:clamp(7px,2.25vw,28.8px) clamp(6px,2vw,25.6px) clamp(7px,2.375vw,30.4px);
    gap:clamp(5px,1.75vw,22.4px);
    grid-template-columns:minmax(0,1fr) auto;
  }
  .bien-une__tete{gap:clamp(4px,1.25vw,16px);margin-bottom:clamp(6px,1.875vw,24px)}
  .bien-une__tete span{font-size:clamp(11px,.85vw,10.88px);letter-spacing:.1em}
  .bien-une h2{font-size:clamp(13px,2vw,25.6px);letter-spacing:.03em;margin-bottom:clamp(2px,.4375vw,5.6px)}
  .bien-une__lieu{font-size:clamp(11px,1.025vw,13.12px);letter-spacing:.08em;margin-bottom:clamp(6px,1.6875vw,21.6px)}
  .bien-une__traits{gap:clamp(4px,.75vw,9.6px) clamp(6px,2.5vw,32px)}
  .bien-une__traits li{font-size:clamp(11px,1.15vw,14.72px);gap:clamp(3px,.75vw,9.6px)}
  .bien-une__traits svg{width:clamp(11px,1.5625vw,20px);height:clamp(11px,1.5625vw,20px)}
  .bien-une__rond{width:clamp(22px,5vw,64px);height:clamp(22px,5vw,64px)}
  .bien-une__rond svg{width:clamp(11px,1.875vw,24px);height:clamp(11px,1.875vw,24px)}

  /* --- la rangee de QUATRE atouts reste une rangee de quatre ---
     L'icone passe AU-DESSUS du texte : a quatre colonnes, l'icone a gauche ne
     laisserait que 43 px de texte a 375 px, ou aucun titre ne tient. Le reste
     de la composition (quatre cellules, filets verticaux) est inchange.
     ATTENTION, ce n'est vrai que sur les ecrans etroits : au-dessus de 740 px
     l'icone REVIENT A GAUCHE, comme sur la maquette (bloc dedie plus bas).
     hyphens:auto : ACCOMPAGNEMENT mesure 97 px a 11 px sans interlettrage pour
     une colonne de 77 px. La cesure francaise (html lang="fr") est le dernier
     cran avant de passer a deux colonnes ; elle suffit ici. */
  .atouts__grille{grid-template-columns:repeat(4,minmax(0,1fr))}
  .atout{
    display:flex;flex-direction:column;align-items:flex-start;
    gap:clamp(5px,1.4375vw,18.4px);
    padding:clamp(11px,2.875vw,36.8px) clamp(5px,1.8vw,30.4px);
    border-right:1px solid var(--ligne);
  }
  .atout>div{min-width:0;width:100%;hyphens:auto}
  .atout svg{width:clamp(17px,3.125vw,40px);height:clamp(17px,3.125vw,40px)}
  .atout h3{font-size:clamp(11px,.9375vw,12px);letter-spacing:normal;margin:0 0 clamp(3px,.75vw,9.6px)}
  .atout p{font-size:clamp(11px,1.125vw,14.4px);line-height:1.4}

  .cue{padding-top:clamp(10px,3.25vw,41.6px);padding-bottom:clamp(12px,4vw,51.2px)}
  .cue a{font-size:clamp(11px,.975vw,12.48px);letter-spacing:.14em;gap:clamp(5px,1.25vw,16px)}
  .cue svg{width:clamp(11px,1.5625vw,20px);height:clamp(11px,1.5625vw,20px)}

  /* --- reserves d'image --- */
  /* La reserve d'un bien fait 108 x 81 px a 375 : son texte y tient sur quatre
     lignes (icone 11 + marge 3 + 4 x 13,2 + 9 de marges = 76 px). Mesure faite,
     les valeurs ci-dessous sont celles qui laissent 5 px de reste ; a 1,75vw de
     marge et 13 px d'icone le texte sortait de 2,9 px sous le filet. */
  .reserve{padding:clamp(2px,1.2vw,22.4px)}
  /* le pictogramme est en ligne : sa boite de ligne vaut 26,9 px (interligne du
     corps de page), pas ses 11 px. En bloc, la reserve d'un bien economise
     15,9 px de haut - la difference entre tenir dans la boite 4:3 et deborder
     par-dessus le titre. Reglage reserve a ce bloc : sur grand ecran la boite
     est assez haute et le changement decalerait le texte centre. */
  .reserve svg{display:block;margin-inline:auto;width:clamp(11px,2.656vw,34px);height:clamp(11px,2.656vw,34px);margin-bottom:clamp(2px,1vw,12.8px)}
  .reserve span{font-size:clamp(11px,.825vw,10.56px);letter-spacing:.04em;line-height:1.2}

  /* --- la rangee de TROIS biens reste une rangee de trois --- */
  .biens{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(6px,2.2vw,28.16px)}
  .bien__corps{padding:clamp(6px,2.2vw,28.16px)}
  /* a 375 px la colonne de texte fait 91 px : APPARTEMENTS mesure 96 px a
     12 px en .05em, 88 px a 11,5 px sans interlettrage. */
  .bien h3{font-size:clamp(11.5px,1.9375vw,24.8px);letter-spacing:.01em;margin-bottom:clamp(5px,1.125vw,14.4px)}
  .bien p{font-size:clamp(11px,1.175vw,15.04px);line-height:1.45}
  .bien__traits{
    margin-top:clamp(7px,1.75vw,22.4px);padding-top:clamp(6px,1.5vw,19.2px);
    gap:clamp(4px,.625vw,8px) clamp(6px,1.875vw,24px);
  }
  .bien__traits li{font-size:clamp(11px,1.025vw,13.12px);gap:clamp(3px,.55vw,7px);line-height:1.35}
  .bien__traits svg{width:clamp(11px,1.328vw,17px);height:clamp(11px,1.328vw,17px)}

  .note{
    margin-top:clamp(10px,3vw,38.4px);gap:clamp(5px,1.25vw,16px);
    padding:clamp(8px,1.875vw,24px) clamp(9px,2.125vw,27.2px);
  }
  .note svg{width:clamp(12px,1.71875vw,22px);height:clamp(12px,1.71875vw,22px);margin-top:.1em}
  .note p{font-size:clamp(11px,1.175vw,15.04px);line-height:1.45}

  /* --- la grille DEUX PAR DEUX des services reste deux par deux --- */
  .services{grid-template-columns:repeat(2,minmax(0,1fr))}
  .service{padding:clamp(9px,3vw,38.4px)}
  .service__ico{width:clamp(14px,2.1875vw,28px);height:clamp(14px,2.1875vw,28px);margin-bottom:clamp(7px,1.875vw,24px)}
  .service__tete{gap:clamp(4px,1.375vw,17.6px);margin-bottom:clamp(5px,1.25vw,16px)}
  .service__num{font-size:clamp(15px,2.875vw,36.8px);-webkit-text-stroke-width:max(.5px,.078vw)}
  .service h3{font-size:clamp(12px,2vw,25.6px)}
  .service p{font-size:clamp(11px,1.2vw,15.36px);line-height:1.45}
  .service ul{margin-top:clamp(7px,1.5vw,19.2px);gap:clamp(4px,.75vw,9.6px)}
  .service li{font-size:clamp(11px,1.125vw,14.4px);gap:clamp(4px,.9375vw,12px);line-height:1.35}
  .service li svg{width:clamp(11px,1.25vw,16px);height:clamp(11px,1.25vw,16px);margin-top:clamp(1px,.375vw,4.8px)}

  /* --- a propos : la photo reste A GAUCHE, le texte A DROITE ---
     align-items:start au lieu de center : reduite, la colonne de texte est
     trois fois plus haute que la photo, et un centrage laisserait la photo
     flotter au milieu d'un vide. Calee en haut, elle retrouve la ligne de tete
     commune du grand ecran. */
  .apropos{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(10px,5vw,64px);align-items:start}
  .apropos__liste{margin-top:clamp(10px,2.5vw,32px);gap:clamp(6px,1.375vw,17.6px)}
  .apropos__liste li{font-size:clamp(11px,1.225vw,15.68px);gap:clamp(4px,1.125vw,14.4px);line-height:1.4}
  .apropos__liste svg{width:clamp(11px,1.484vw,19px);height:clamp(11px,1.484vw,19px);margin-top:clamp(1px,.4375vw,5.6px)}
  /* la marge du bouton est posee en style en ligne dans le HTML : on la met a
     l'echelle sans toucher au HTML */
  .apropos p[style]{margin-top:clamp(10px,2.75vw,35.2px)!important}

  /* --- avis : le texte reste A GAUCHE, la photo A DROITE --- */
  .avis{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(10px,5vw,64px);align-items:start}
  .avis__cartes{margin-top:clamp(10px,2.5vw,32px);gap:clamp(5px,1.25vw,16px)}
  .avis__attente{padding:clamp(6px,1.4375vw,18.4px) clamp(7px,1.75vw,22.4px);gap:clamp(5px,1.25vw,16px)}
  .avis__attente svg{width:clamp(12px,1.71875vw,22px);height:clamp(12px,1.71875vw,22px)}
  .avis__attente span{font-size:clamp(11px,.9vw,11.52px);letter-spacing:.06em;line-height:1.3}

  /* --- questions : la colonne garde sa largeur relative (880/1280) --- */
  .questions{max-width:68.75vw}
  .question summary{font-size:clamp(12px,1.6875vw,21.6px);padding-block:clamp(7px,1.875vw,24px);gap:clamp(6px,1.875vw,24px)}
  /* le signe + est dessine avec des decalages fixes de 7 px : reduits, ils
     sortiraient du carre. On les recalcule en pourcentage. */
  .question__signe{width:clamp(9px,1.171875vw,15px);height:clamp(9px,1.171875vw,15px)}
  .question__signe::before{top:calc(50% - .5px);left:0;width:100%;height:1px}
  .question__signe::after{left:calc(50% - .5px);top:0;width:1px;height:100%}
  .question__corps{font-size:clamp(11px,1.2125vw,15.52px);padding-bottom:clamp(8px,2.125vw,27.2px);line-height:1.5}
  .question__corps p+p{margin-top:clamp(5px,1.125vw,14.4px)}

  /* --- contact : le texte reste A GAUCHE, le formulaire A DROITE --- */
  .contact{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(10px,6vw,76.8px)}
  .contact__voies{margin-top:clamp(10px,2.75vw,35.2px);gap:clamp(7px,1.875vw,24px)}
  .contact__voies li{gap:clamp(4px,1.375vw,17.6px)}
  .contact__voies svg{width:clamp(11px,1.5625vw,20px);height:clamp(11px,1.5625vw,20px);margin-top:clamp(1px,.5vw,6.4px)}
  .contact__voies span{font-size:clamp(11px,.85vw,10.88px);letter-spacing:.08em;margin-bottom:clamp(1px,.3125vw,4px)}
  /* l'adresse de courriel est un mot de 19 signes : 106 px a 11 px pour une
     colonne de 119 px. Elle passe entiere, la coupure n'est qu'un filet. */
  .contact__voies a,.contact__voies p{font-size:clamp(11px,1.3vw,16.64px);overflow-wrap:anywhere;line-height:1.35}
  /* Le telephone et le courriel sont des <a> EN LIGNE : leur boite de ligne ne
     vient pas d'eux mais du <div> qui les porte, reste a 16 px x 1,68 = 26,9 px,
     alors que le texte est descendu a 11 px. Resultat mesure a 375 px : la valeur
     tombait 9,2 px sous son libelle, quand « A completer », qui est un <p> de
     bloc, n'en tombe qu'a 1,2 px - deux ecarts differents dans la meme liste, et
     12 px de haut perdus par ligne. En bloc, le line-height ci-dessus s'applique
     vraiment et les quatre lignes retrouvent le meme ecart. */
  .contact__voies a{display:block}

  .form{gap:clamp(6px,1.625vw,20.8px)}
  .form__duo{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(6px,1.625vw,20.8px)}
  .champ{gap:clamp(2px,.625vw,8px)}
  .champ label{font-size:clamp(11px,.85vw,10.88px);letter-spacing:.06em;line-height:1.25}
  /* « COMMUNE OU SECTEUR » passe a la ligne (30,1 px de haut pour une colonne de
     88,4 px), son voisin « COURRIEL » non (16,4 px) : sans rien, les deux champs
     de la paire se decalent de 6,8 px. Reserver deux lignes a TOUS les libelles
     (min-height:2.5em) alignait bien les champs, mais portait les quatre libelles
     a 29,2 px : pres de 13 px de vide sous « NOM », « TELEPHONE » et « COURRIEL »,
     un blanc que le grand ecran n'a pas. On aligne plutot les champs par le BAS de
     la cellule : chaque libelle garde sa hauteur reelle, les deux champs d'une
     paire restent sur la meme ligne, et rien ne s'ajoute quand aucun libelle ne
     passe a la ligne. */
  .form__duo .champ{grid-template-rows:auto 1fr}
  .form__duo .champ input{align-self:end}
  .champ input,.champ select,.champ textarea{
    padding:clamp(5px,1.1875vw,15.2px) clamp(5px,1.3125vw,16.8px);
    font-size:clamp(11px,1.225vw,15.68px);
  }
  .champ textarea{min-height:clamp(45px,10.3125vw,132px)}
  .champ select{
    background-position:calc(100% - clamp(8px,1.484vw,19px)) 50%,calc(100% - clamp(5px,1.09375vw,14px)) 50%;
  }
  .form__mention{font-size:clamp(11px,1vw,12.8px);line-height:1.4}
  .form__etat{font-size:clamp(11px,1.125vw,14.4px)}

  /* --- pied de page : les QUATRE colonnes restent quatre --- */
  .pied{padding-block:clamp(16px,4.375vw,56px) clamp(10px,2.5vw,32px)}
  .pied__haut{
    grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
    gap:clamp(7px,3.125vw,40px);padding-bottom:clamp(12px,3.125vw,40px);
  }
  .pied .marque{margin-bottom:clamp(6px,1.5vw,19.2px);gap:clamp(4px,.9vw,11.5px)}
  .pied .marque__mono{height:clamp(16px,2.1875vw,28px)}
  /* au plancher de 11 px, IMMOBILIER (10 signes) est plus large que ALTAIS
     (6 signes) : le nom monte a 15 px et le sous-titre perd son interlettrage,
     les deux mesurent alors 68 et 70 px. */
  .pied .marque__nom{font-size:clamp(15px,1.8125vw,23.2px);letter-spacing:.14em;text-indent:.14em}
  .pied .marque__metier{font-size:11px;letter-spacing:.02em;text-indent:.02em}
  .pied p{font-size:clamp(11px,1.15vw,14.72px);line-height:1.4}
  .pied h4{font-size:clamp(11px,.85vw,10.88px);letter-spacing:.06em;margin-bottom:clamp(6px,1.5vw,19.2px)}
  /* plancher a 6 px, pas 4 : le lien etant passe en bloc (voir ci-dessous), c'est
     ce seul intervalle qui separe deux entrees de la liste, alors qu'avant il
     s'ajoutait aux 12,6 px de blanc que la boite de ligne du <li> apportait.
     Le grand ecran separe deux entrees de 38,1 px pour un interligne interne de
     26,9 px, soit 1,42 fois ; a 11 px et un interligne de 14,3 px, il faut donc
     6 px de gouttiere pour retrouver ce rapport. A 4 px, un lien qui passe a la
     ligne (« Biens d'exception ») ne se distinguait plus du lien suivant. */
  .pied ul{gap:clamp(6px,.875vw,11.2px)}
  /* colonne de 68 px : l'adresse de courriel (106 px) est le seul mot qui doit
     se couper. overflow-wrap:anywhere ne coupe que ce qui ne tient pas.
     display:block, et non inline-block : en ligne, le lien restait pose sur la
     boite de ligne du <li>, restee a 16 px x 1,68 = 26,9 px pour un lien de
     14,3 px. Chaque entree du pied coutait 26,9 px au lieu de 14,3, soit un
     interligne de 2,44 fois le corps quand le grand ecran en a 1,83 : plus aere
     que le modele, donc pas une reduction. */
  .pied ul a{font-size:clamp(11px,1.15vw,14.72px);overflow-wrap:anywhere;line-height:1.3;display:block}
  .pied__bas{padding-top:clamp(8px,2.25vw,28.8px);gap:clamp(5px,1vw,12.8px) clamp(8px,2.5vw,32px)}
  /* base de 48 % : les deux mentions restent sur la MEME ligne, comme sur
     grand ecran, au lieu de se mettre l'une sous l'autre */
  .pied__bas p{font-size:clamp(11px,1vw,12.8px);flex:0 1 48%;line-height:1.4}
  .pied__bas p:last-child{text-align:right}

  /* --- page annexe (mentions legales) --- */
  .page-texte h1{font-size:clamp(16px,3.9vw,48px);margin-bottom:clamp(10px,2.5vw,32px)}
  .page-texte h2{font-size:clamp(13px,1.875vw,24px);margin-top:clamp(12px,3.5vw,44.8px)}
  .page-texte p,.page-texte li{font-size:clamp(11px,1.225vw,15.68px);line-height:1.5}
  .page-texte ul{gap:clamp(3px,.625vw,8px)}
}


/* ---------------------------------------------------------------------------
   Les deux degradations du bloc ci-dessus n'ont lieu d'etre que sur ecran
   etroit. Au-dessus des seuils mesures ici, la composition du grand ecran
   revient telle quelle : une degradation ne doit pas depasser la largeur ou la
   mesure la reclame.
   --------------------------------------------------------------------------- */

/* 1. Les quatre atouts retrouvent l'icone A GAUCHE du texte, comme sur la
      maquette. Mesure faite avec la composition du bureau et sans cesure, plus
      grand debordement du texte hors de sa cellule sur les quatre atouts :
      375 px -> 55,0 px ; 480 -> 36,0 ; 600 -> 17,0 ; 700 -> 2,0 ; 710 -> 1,0 ;
      720 -> 0,0 ; 730 -> 0,0 ; 800 -> 0,0 ; 1000 -> 0,0. La composition du
      bureau tient donc des 720 px ; le seuil est pose a 740 px pour garder deux
      crans de marge. En dessous, et seulement en dessous, l'icone monte
      au-dessus du texte. */
@media (min-width:740px) and (max-width:1000px){
  .atout{flex-direction:row;align-items:flex-start}
  /* plus rien a couper a cette largeur : le grand ecran n'a pas de cesure */
  .atout>div{hyphens:manual}
  .atout h3{margin-top:clamp(2px,.375vw,4.8px)}
}

/* 2. Le bouton du heros ne perd son interlettrage que sur telephone. A .1em,
      l'interlettrage commun des boutons reduits, il mesure 178,3 px pour une
      colonne de 172,5 px a 375 px (5,8 px de trop), 179,3 px pour 179,4 px a
      390 px (a egalite), 181,0 px pour 190,4 px a 414 px et 194,3 px pour
      276,0 px a 600 px. Il tient donc des 390 px ; le seuil est pose a 430 px
      pour garder de la marge. Au-dessus, le bouton se comporte comme tous les
      autres boutons de la page. */
@media (max-width:430px){
  .heros .btn{letter-spacing:normal}
}

/* 3. Ecran COURT : le menu se reduit avant d'avoir a defiler. Le menu est une
      couche plein ecran, sa contrainte n'est pas la largeur mais la hauteur.
      Contenu mesure, padding compris, contre la hauteur disponible :
      667 x 375 -> 494 px pour 375 (119 de trop) ; 736 x 414 -> 514 pour 414 ;
      844 x 390 -> 502 pour 390 ; 320 x 480 -> 547 pour 480 ; 320 x 568 -> 591
      pour 568 ; 768 x 600 -> 607 pour 600. Les valeurs en vh ci-dessous le
      ramenent dans l'ecran ; le defilement de la couche reste le filet.
      Le supplement de padding en haut degage le bouton de fermeture, qui est
      en position absolue et passerait sinon sur le premier lien. */
@media (max-height:620px){
  .menu-mobile{padding-top:calc(var(--pad) + 1.6rem)}
  .menu-mobile nav a{font-size:clamp(1.05rem,4.4vh,1.9rem);padding-block:clamp(.15rem,.85vh,.5rem)}
  .menu-mobile .btn{margin-top:clamp(.6rem,2.6vh,1.8rem);padding-block:clamp(.6rem,2vh,1.15rem)}
  .menu-mobile__tel{margin-top:clamp(.5rem,2vh,1.4rem)}
}

/* En dessous de 375 px seulement. Deux mesures, et deux seulement, cessent d'y
   tenir ; les regles ci-dessous ne changent rien a 375 px et au-dessus.
   1. La colonne d'un bien tombe a 92 px et la reserve d'image a 92 x 69 px. Son
      libelle y prend cinq lignes (86,7 px) et sortait de 17,6 px sous le filet,
      par-dessus le titre. Sans interlettrage et a 2 px de marge il repasse a
      quatre lignes, soit 67,6 px : la boite 4:3 est conservee.
   2. Le bouton du heros, tenu sur une ligne, mesure 163 px pour une colonne de
      147 px : il empietait de 7 px sur le bloc « bien a la une ». On le laisse
      revenir a la ligne plutot que de descendre le texte sous 11 px. */
@media (max-width:374px){
  .reserve{padding:2px}
  .reserve span{letter-spacing:normal;line-height:1.1}
  .heros .btn{white-space:normal}
  /* 3. La colonne de titre d'un bien tombe a 76 px : APPARTEMENTS y mesure
        87 px et CONFIDENTIELS 94 px, tous deux hors de la carte. La cesure
        francaise (html lang="fr") les ramene dedans. */
  .bien h3{hyphens:auto}
  /* 4. « BIEN A LA UNE » tenu sur une ligne mesure 103 px pour une colonne de
        89,6 px : le filet qui le suit sortait de 3,4 px du bloc. */
  .bien-une__tete span{white-space:normal}
}

@media print{
  .entete,.menu-mobile,.cue{display:none}
  body{background:#fff;color:#000}
}

/* Photos livrees le 08/09/2026 : la case reservee garde sa geometrie, l'image la remplit. */
.photo-remplie{border:0!important;background:none!important;padding:0!important;overflow:hidden}
.photo-remplie .photo-modele{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}