/* Remise à zéro minimale : la page ne dépend plus d'aucune feuille d'hôte. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0}
button,input,select,textarea{font:inherit;color:inherit}

@font-face{font-family:'Fraunces';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/fraunces.woff2) format('woff2')}
@font-face{font-family:'Hanken';font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/fonts/hanken.woff2) format('woff2')}

:root{
  --pierre-000:#FCFAF6; --pierre-050:#F5F0E7; --pierre-100:#EDE7DB; --pierre-200:#DFD5C4; --pierre-300:#C4B7A1;
  --encre:#1F2523; --encre-doux:#55605C;
  --baise:#2F5147; --baise-vif:#3F6E5E; --baise-voile:#DEE7E1;
  --rouge:#BE3A26; --rouge-vif:#BE3A26;
  --ocre:#A96A34;
  --band:#1F2523; --band-txt:#F5F0E7; --band-txt-doux:rgba(245,240,231,.74);
  --band-trait:rgba(245,240,231,.16); --band-accent:#D9A05F; --band-survol:rgba(245,240,231,.04);
  --ombre:0 1px 2px rgba(31,37,35,.05), 0 12px 32px -18px rgba(31,37,35,.35);
  --ombre-forte:0 2px 4px rgba(31,37,35,.06), 0 28px 60px -28px rgba(31,37,35,.45);
  --trait:rgba(31,37,35,.13);
  color-scheme:light;
}
/* Le site est en clair, et seulement en clair. Décision de l'agence, pas un
   oubli : la clientèle et ses enfants lisent mieux du texte sombre sur fond
   clair, et le contraste de chaque écran a été mesuré dans ce sens. Les
   bandes volontairement sombres, Nérac et les chiffres, gardent leurs propres
   jetons `--band-*` et ne dépendent d'aucun thème. */

/* La façade sert deux fois, en fond d'ouverture et dans la bande Nérac. Elle
   passe par une propriété personnalisée pour n'être encodée qu'une seule fois :
   deux `src` identiques, ce sont deux fois 320 Ko de base64. */
:root{ --ph-facade:url("/assets/img/facade-1600.jpg") }

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--pierre-100); color:var(--encre);
  font-family:'Hanken',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:19px; line-height:1.62; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
@media (max-width:640px){ body{font-size:18px} }

h1,h2,h3,.chiffre,blockquote{font-family:'Fraunces',Georgia,'Times New Roman',serif;font-variation-settings:'opsz' 96;font-weight:600;line-height:1.06;letter-spacing:-.015em;text-wrap:balance;margin:0}
h1{font-size:clamp(2.5rem,6.4vw,5.05rem);font-variation-settings:'opsz' 144}
h2{font-size:clamp(2rem,4.2vw,3.3rem)}
h3{font-size:clamp(1.24rem,1.9vw,1.55rem);font-variation-settings:'opsz' 36;letter-spacing:-.005em}
p{margin:0}
a{color:inherit}
img{display:block;max-width:100%}
ul,ol{margin:0;padding:0;list-style:none}

.enveloppe{width:min(1220px,100% - 3rem);margin-inline:auto}
@media (max-width:640px){ .enveloppe{width:min(1220px,100% - 2.2rem)} }

.etiquette{
  font-size:.735rem;font-weight:700;letter-spacing:.19em;text-transform:uppercase;
  color:var(--baise);display:flex;align-items:center;gap:.6rem;
}
.etiquette::before{content:"";width:1.6rem;height:1px;background:currentColor;opacity:.55;flex:none}
.plomb{color:var(--encre-doux);font-size:1.06rem;line-height:1.66;max-width:56ch}

/* ---------- boutons ---------- */
.bouton{
  display:inline-flex;align-items:center;gap:.6rem;border:0;cursor:pointer;
  font-family:inherit;font-size:1rem;font-weight:700;letter-spacing:.005em;
  padding:.92rem 1.55rem;border-radius:2px;text-decoration:none;
  transition:transform .18s cubic-bezier(.2,.7,.3,1), background-color .18s, color .18s, box-shadow .18s;
}
.bouton--plein{background:var(--rouge-vif);color:#fff;box-shadow:0 10px 24px -14px var(--rouge-vif)}
.bouton--plein:hover{transform:translateY(-2px);box-shadow:0 16px 30px -14px var(--rouge-vif)}
.bouton--fil{background:transparent;color:var(--encre);box-shadow:inset 0 0 0 1.5px var(--trait)}
.bouton--fil:hover{box-shadow:inset 0 0 0 1.5px var(--encre);transform:translateY(-2px)}
.bouton--clair{background:rgba(252,250,246,.14);color:#FCFAF6;box-shadow:inset 0 0 0 1.5px rgba(252,250,246,.4);backdrop-filter:blur(6px)}
.bouton--clair:hover{background:#FCFAF6;color:#1F2523;transform:translateY(-2px)}
:focus-visible{outline:3px solid var(--rouge);outline-offset:3px;border-radius:2px}

/* ---------- entete ---------- */
/* En haut de page l'en-tête est transparent et la photo passe dessous, donc
   il est `fixed` et non `sticky` : en `sticky` il occupe une place dans le
   flux et repousse l'ouverture de sa hauteur. Dès qu'on descend, il reprend
   un fond plein, parce qu'un menu posé sur une photo qui défile devient
   illisible au premier aplat clair qui passe dessous.

   Les couleurs de son contenu passent par des jetons locaux : c'est une seule
   déclaration à basculer, au lieu de reprendre chaque lien un par un. */
.entete{
  --ent-txt:#FCFAF6;
  --ent-txt-doux:rgba(252,250,246,.9);
  --ent-accent:#F0C9A0;
  --ent-trait:rgba(252,250,246,.42);
  --ent-survol:rgba(252,250,246,.16);
  position:fixed;top:0;left:0;right:0;z-index:60;
  color:var(--ent-txt);
  background-color:transparent;
  border-bottom:1px solid transparent;
  transition:background-color .28s ease, border-color .28s ease, color .28s ease;
}
/* Le voile sombre du haut est une couche à part, dont seule l'opacité change.
   Mis dans le raccourci `background` avec la couleur, le dégradé disparaîtrait
   d'un coup pendant que la couleur se fond : `background-image` ne s'anime
   pas, `background-color` si, et l'à-coup se voit. */
.entete::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom, rgba(9,14,12,.66) 0%, rgba(9,14,12,.36) 58%, rgba(9,14,12,0) 100%);
  transition:opacity .28s ease;
}
.entete[data-colle="oui"]{
  --ent-txt:var(--encre);
  --ent-txt-doux:var(--encre-doux);
  --ent-accent:var(--baise);
  --ent-trait:var(--trait);
  --ent-survol:var(--pierre-200);
  background-color:color-mix(in srgb, var(--pierre-100) 92%, transparent);
  backdrop-filter:blur(14px) saturate(1.3);
  border-bottom-color:var(--trait);
}
.entete[data-colle="oui"]::before{opacity:0}
/* Sans `color-mix`, un fond plein plutôt qu'un en-tête resté translucide. */
@supports not (background-color: color-mix(in srgb, red 50%, blue)){
  .entete[data-colle="oui"]{background-color:var(--pierre-100)}
}
.entete-grille{display:flex;align-items:center;gap:1.6rem;padding:.72rem 0;justify-content:space-between}
.marque{display:flex;align-items:center;gap:.72rem;text-decoration:none;flex:none}
.marque svg{width:34px;height:34px;flex:none}
.marque-mots{display:flex;flex-direction:column;line-height:1.03}
.marque-nom{font-family:'Fraunces',serif;font-variation-settings:'opsz' 24;font-weight:600;font-size:1.06rem;letter-spacing:-.01em;color:var(--ent-txt)}
/* Le nom de l'établissement dit « auberge », ce qui le fait passer pour un
   hôtel. La qualification vient donc juste dessous, dans le verrou de marque,
   et non dans une baseline qu'on ne lit qu'en bas de page. */
.marque-sous{font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ent-accent);font-weight:800;margin-top:.2rem;transition:color .28s ease}
@media (max-width:900px){ .marque-ville{display:none} }
.nav{display:flex;gap:.3rem;align-items:center}
.nav a{text-decoration:none;font-size:.93rem;font-weight:600;padding:.5rem .7rem;border-radius:2px;color:var(--ent-txt-doux);transition:color .16s,background-color .16s}
.nav a:hover{color:var(--ent-txt);background:var(--ent-survol)}
.entete-actions{display:flex;align-items:center;gap:.55rem;flex:none}
.tel{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;font-weight:700;font-size:.95rem;padding:.62rem 1.1rem;border-radius:2px;color:var(--ent-txt);box-shadow:inset 0 0 0 1.5px var(--ent-trait);transition:box-shadow .16s,color .28s ease}
.tel:hover{box-shadow:inset 0 0 0 1.5px var(--ent-txt)}
@media (max-width:1080px){ .nav{display:none} }
@media (max-width:560px){ .tel span{display:none} .tel{padding:.62rem .8rem} }
@media (max-width:430px){
  .entete-grille{gap:.6rem}
  .marque svg{width:30px;height:30px}
  .marque-nom{font-size:.94rem}
  .marque-sous{font-size:.55rem}
}

/* ---------- ouverture ---------- */
/* La façade au-dessus de l'eau est le fond. Elle est posée en `background`
   d'un bloc absolu, et surtout **pas** avec `grid-area` : dans un conteneur en
   grille, un élément absolument positionné se cale sur sa zone de grille et
   non sur le bloc parent, ce qui laissait un vide de 74 px sous l'en-tête. */
.ouverture{
  position:relative;overflow:hidden;isolation:isolate;
  min-height:clamp(620px,86vh,900px);
  display:flex;align-items:center;
  padding-block:clamp(2.4rem,4.5vw,4rem);
}
.ouverture-fond{
  position:absolute;inset:-4%;z-index:0;
  background-image:var(--ph-facade);background-size:cover;background-position:54% 56%;
  animation:derive 28s ease-in-out infinite alternate;
}
@keyframes derive{from{transform:scale(1)}to{transform:scale(1.08) translate(-1.4%,-1.2%)}}
/* Voile léger, et non plus un aplat sombre : le texte est sur un carton
   opaque, il n'a pas besoin qu'on éteigne la photo pour rester lisible. Le
   voile ne sert plus qu'à asseoir les ombres portées. */
.ouverture-voile{position:absolute;inset:0;z-index:1;background:
  linear-gradient(102deg, rgba(9,14,12,.52) 0%, rgba(9,14,12,.34) 38%, rgba(9,14,12,.12) 68%, rgba(9,14,12,.04) 100%)}
.ouverture-grille{
  position:relative;z-index:2;width:min(1220px,100% - 3rem);margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(1.6rem,3.4vw,3.2rem);align-items:center;
}
@media (max-width:980px){ .ouverture-grille{grid-template-columns:1fr} }
@media (max-width:640px){ .ouverture-grille{width:min(1220px,100% - 2.2rem)} }

/* Le texte n'est jamais posé sur la photo, il est sur un carton opaque. Son
   contraste ne dépend donc pas de ce que montre l'image, ce qui compte quand
   le lectorat a soixante-dix ans ou lit par-dessus l'épaule de quelqu'un. */
.ouverture-panneau{
  background:var(--pierre-000);border-radius:4px;
  padding:clamp(1.7rem,2.9vw,2.85rem);
  box-shadow:0 44px 90px -44px rgba(5,9,8,.8), 0 2px 6px rgba(5,9,8,.3);
}
.ouverture-panneau h1{margin-block:1rem .95rem;font-size:clamp(2.3rem,3.85vw,3.6rem)}
.ouverture-lede{font-size:clamp(1.08rem,1.35vw,1.22rem);line-height:1.62;color:var(--encre-doux);max-width:44ch}
.ouverture-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.8rem}
.ouverture-actions .bouton{font-size:1.04rem;padding:1.02rem 1.7rem}

/* Deux photos posées par-dessus la façade. Le passe-partout crème est ce qui
   permet à une photo sur une photo de se lire comme un objet distinct plutôt
   que comme une tache. */
.ouverture-cartes{position:relative;min-height:clamp(370px,35vw,500px)}
.carte-photo{margin:0;position:absolute;opacity:0;animation:pose .9s cubic-bezier(.16,.8,.3,1) forwards}
.carte-photo .mat{
  background:var(--pierre-000);padding:.55rem;border-radius:3px;
  box-shadow:0 34px 64px -30px rgba(5,9,8,.85), 0 2px 4px rgba(5,9,8,.28);
  transform:translate3d(var(--px,0px),var(--py,0px),0);
  transition:transform .45s cubic-bezier(.2,.7,.3,1);
}
.carte-photo img{display:block;width:100%;object-fit:cover;border-radius:1px}
.carte-photo figcaption{padding:.58rem .3rem .12rem;font-size:.82rem;font-weight:600;color:var(--encre-doux);text-align:center}
/* La carte du haut passe devant : c'est elle qui porte la légende, et une
   légende à moitié recouverte ne se lit pas. */
.carte-photo--une{width:64%;top:0;right:0;z-index:2;--tourne:1.7deg;animation-delay:.5s}
.carte-photo--une img{aspect-ratio:4/3}
.carte-photo--une .mat{animation:flotte 9s ease-in-out 1.6s infinite alternate}
.carte-photo--deux{width:47%;bottom:0;left:0;z-index:1;--tourne:-2.6deg;animation-delay:.72s}
.carte-photo--deux img{aspect-ratio:4/3}
.carte-photo--deux .mat{animation:flotte 11.5s ease-in-out 2.1s infinite alternate-reverse}
@keyframes pose{from{opacity:0;transform:rotate(var(--tourne)) translateY(34px) scale(.94)}
                to{opacity:1;transform:rotate(var(--tourne)) translateY(0) scale(1)}}
@keyframes flotte{from{translate:0 0}to{translate:0 -11px}}

/* En colonne étroite, la photo ne couvre plus toute la section : sur un bloc
   de 1100 px de haut pour 375 de large, `cover` n'en montre qu'une tranche
   verticale, et cette tranche est du ciel. Elle reçoit donc une bande à sa
   propre hauteur, où l'image tient presque entière. */
@media (max-width:980px){
  .ouverture{min-height:auto;display:block;background:var(--pierre-100);
    padding-top:clamp(12rem,28vh,17rem);padding-bottom:clamp(2.2rem,5vw,3.2rem)}
  .ouverture-fond{inset:0 0 auto 0;height:clamp(15rem,34vh,20rem);animation:none;background-position:50% 56%}
  .ouverture-voile{inset:0 0 auto 0;height:clamp(15rem,34vh,20rem);
    background:linear-gradient(180deg, rgba(9,14,12,.06) 0%, rgba(9,14,12,.26) 100%)}
  .ouverture-cartes{min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:.85rem;margin-top:1.1rem}
  .carte-photo{position:static;width:auto;opacity:1;animation:none}
  .carte-photo .mat{animation:none;transform:none}
}

.leve{opacity:0;transform:translateY(22px);animation:leve .82s cubic-bezier(.16,.8,.3,1) forwards}
@keyframes leve{to{opacity:1;transform:none}}

/* ---------- bandeau de chiffres ---------- */
/* Sorti de la photo et posé sur un fond plein : quatre chiffres qu'on doit
   pouvoir lire d'un coup d'oeil n'ont rien à faire sur une image. */
.chiffres{background:var(--band);color:var(--band-txt);padding-block:clamp(1.7rem,3vw,2.4rem)}
.chiffres-grille{display:grid;grid-template-columns:repeat(4,1fr);gap:1.3rem}
.chiffres-grille div{display:flex;flex-direction:column;gap:.2rem}
.chiffres-grille div + div{border-left:1px solid var(--band-trait);padding-left:1.3rem}
.chiffres-grille b{
  font-family:'Fraunces',serif;font-variation-settings:'opsz' 48;font-weight:600;
  font-size:clamp(1.55rem,2.6vw,2.2rem);letter-spacing:-.025em;font-variant-numeric:tabular-nums;line-height:1.1;
}
.chiffres-grille span{font-size:.79rem;letter-spacing:.13em;text-transform:uppercase;color:var(--band-txt-doux);font-weight:700}
@media (max-width:760px){
  .chiffres-grille{grid-template-columns:repeat(2,1fr);gap:1.3rem 1.1rem}
  .chiffres-grille div + div{border-left:0;padding-left:0}
}

/* ---------- sections ---------- */
section{padding-block:clamp(4rem,8vw,7.5rem);scroll-margin-top:5.2rem}
.section-tete{display:grid;gap:1.05rem;max-width:62ch;margin-bottom:clamp(2.4rem,4vw,3.6rem)}

/* ce que c'est */
.definition{background:var(--pierre-050);padding-block:clamp(3.4rem,6.5vw,5.8rem)}
/* La photo tient la moitié large de la grille : c'est le seul endroit du site
   où l'on voit les habitantes ensemble, et c'est ce moment qui explique le
   concept mieux qu'un paragraphe. */
.definition-grille{display:grid;grid-template-columns:1.14fr .86fr;gap:clamp(1.6rem,3.6vw,3rem);align-items:center}
@media (max-width:900px){ .definition-grille{grid-template-columns:1fr} }
.definition-photo{margin:0;border-radius:3px;overflow:hidden;box-shadow:var(--ombre-forte);background:var(--pierre-000)}
.definition-photo img{width:100%;aspect-ratio:5/4;object-fit:cover;object-position:50% 42%}
.definition-photo figcaption{padding:.9rem 1.15rem;font-size:.92rem;color:var(--encre-doux)}
.definition h2{margin-block:1rem .9rem}
.nest-pas{display:grid;gap:.75rem;margin-top:1.7rem}
.nest-pas li{display:flex;gap:.8rem;font-size:1rem;color:var(--encre-doux)}
.nest-pas li::before{
  content:"×";flex:none;width:1.35rem;height:1.35rem;margin-top:.2rem;
  display:grid;place-items:center;border-radius:50%;
  background:var(--rouge-vif);color:#fff;font-size:.9rem;font-weight:800;line-height:1;
}
.nest-pas b{color:var(--encre);font-weight:800}

/* deux entrees */
.portes{padding-top:clamp(3rem,6vw,5rem)}
.portes-grille{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem}
@media (max-width:860px){ .portes-grille{grid-template-columns:1fr} }
.porte{
  background:var(--pierre-000);border-radius:3px;padding:clamp(1.7rem,3vw,2.6rem);
  box-shadow:var(--ombre);position:relative;overflow:hidden;
  display:flex;flex-direction:column;gap:1rem;
  transition:transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s;
}
.porte::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--baise)}
.porte:nth-child(2)::before{background:var(--ocre)}
.porte:hover{transform:translateY(-4px);box-shadow:var(--ombre-forte)}
.porte h3{margin-bottom:.1rem}
.porte p{color:var(--encre-doux);font-size:1.02rem}
.porte a{margin-top:auto;padding-top:.55rem;font-weight:700;text-decoration:none;color:var(--baise);display:inline-flex;align-items:center;gap:.45rem;font-size:.98rem}
.porte a::after{content:"→";transition:transform .2s}
.porte a:hover::after{transform:translateX(5px)}
.porte:nth-child(2) a{color:var(--ocre)}

/* le principe */
.principe{background:var(--pierre-050)}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.3rem,3vw,2.4rem)}
@media (max-width:860px){ .duo{grid-template-columns:1fr} }
.carte-part{background:var(--pierre-000);border-radius:3px;overflow:hidden;box-shadow:var(--ombre);display:flex;flex-direction:column}
.carte-part img{width:100%;aspect-ratio:4/3;object-fit:cover}
.carte-part-texte{padding:clamp(1.5rem,2.6vw,2.1rem);display:grid;gap:1rem}
.liste-coches{display:grid;gap:.62rem}
.liste-coches li{display:flex;gap:.75rem;align-items:flex-start;font-size:1rem;color:var(--encre-doux)}
.liste-coches li::before{
  content:"";flex:none;width:.52rem;height:.52rem;margin-top:.56rem;border-radius:50%;
  background:var(--baise);box-shadow:0 0 0 3px var(--baise-voile);
}
.carte-part:nth-child(2) .liste-coches li::before{background:var(--ocre);box-shadow:0 0 0 3px color-mix(in srgb, var(--ocre) 18%, transparent)}

/* etage par etage : la cage d'ascenseur */
.etages-grille{display:grid;grid-template-columns:78px 1fr;gap:0}
@media (max-width:760px){ .etages-grille{grid-template-columns:34px 1fr} }
.cage{position:relative}
.cage-rail{
  position:absolute;left:50%;transform:translateX(-50%);top:.6rem;bottom:.6rem;width:34px;
  border-left:1px solid var(--trait);border-right:1px solid var(--trait);
  background:repeating-linear-gradient(to bottom, transparent 0 9px, var(--trait) 9px 10px);
  opacity:.75;
}
@media (max-width:760px){ .cage-rail{width:14px} }
.cabine{
  position:absolute;left:50%;transform:translate(-50%,-50%);width:30px;height:44px;
  background:var(--encre);border-radius:1px;top:0;
  box-shadow:0 6px 18px -8px rgba(0,0,0,.6);
  display:grid;place-items:center;
  transition:top .12s linear;
}
.cabine::after{content:"";width:12px;height:1.5px;background:var(--pierre-100);opacity:.85}
@media (max-width:760px){ .cabine{width:14px;height:26px} .cabine::after{width:6px} }
.niveaux{display:grid;gap:clamp(2.6rem,5vw,4.4rem);padding-left:clamp(1rem,2.4vw,2.2rem)}
.niveau{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.4rem,3vw,2.6rem);align-items:center}
@media (max-width:860px){ .niveau{grid-template-columns:1fr;gap:1.3rem} }
.niveau-num{
  font-family:'Fraunces',serif;font-variation-settings:'opsz' 20;font-weight:700;
  font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--baise);
  display:flex;align-items:baseline;gap:.7rem;margin-bottom:.7rem;
}
.niveau-num em{font-style:normal;font-size:2.4rem;line-height:.8;letter-spacing:-.03em;font-variation-settings:'opsz' 72;color:var(--pierre-300)}
.niveau h3{margin-bottom:.7rem}
.niveau p{color:var(--encre-doux);font-size:1.02rem}
.niveau-detail{display:flex;flex-wrap:wrap;gap:.42rem;margin-top:1.1rem}
.jeton{
  font-size:.82rem;font-weight:700;letter-spacing:.01em;padding:.36rem .78rem;border-radius:100px;
  background:var(--baise-voile);color:var(--baise);
}
.niveau figure{margin:0;border-radius:3px;overflow:hidden;box-shadow:var(--ombre-forte)}
.niveau figure img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.niveau figure:hover img{transform:scale(1.04)}
.niveau--miroir{direction:rtl}
.niveau--miroir > *{direction:ltr}
@media (max-width:860px){ .niveau--miroir{direction:ltr} }

/* chambres */
.chambres{background:var(--pierre-050)}
.chambres-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.3rem}
.chambre{background:var(--pierre-000);border-radius:3px;overflow:hidden;box-shadow:var(--ombre);display:flex;flex-direction:column;transition:transform .25s cubic-bezier(.2,.7,.3,1),box-shadow .25s}
.chambre:hover{transform:translateY(-5px);box-shadow:var(--ombre-forte)}
.chambre-image{position:relative;aspect-ratio:4/3;overflow:hidden}
.chambre-image img{width:100%;height:100%;object-fit:cover}
.pastille{
  position:absolute;top:.85rem;left:.85rem;font-size:.72rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  padding:.35rem .7rem;border-radius:100px;background:var(--baise);color:var(--pierre-000);
}
.pastille--prise{background:rgba(20,26,24,.72);color:rgba(252,250,246,.92);backdrop-filter:blur(4px)}
.chambre-corps{padding:1.4rem 1.5rem 1.6rem;display:grid;gap:.85rem;flex:1}
.chambre-corps h3{font-size:1.3rem}
.chambre-faits{display:flex;flex-wrap:wrap;gap:.35rem .85rem;font-size:.93rem;color:var(--encre-doux)}
.chambre-faits span{display:inline-flex;align-items:baseline;gap:.85rem}
.chambre-faits span + span::before{content:"·";color:var(--pierre-300);font-weight:900}
.prix{display:flex;align-items:baseline;gap:.5rem;margin-top:auto;padding-top:.9rem;border-top:1px solid var(--trait)}
.prix b{font-family:'Fraunces',serif;font-variation-settings:'opsz' 60;font-weight:600;font-size:1.9rem;letter-spacing:-.025em;font-variant-numeric:tabular-nums;line-height:1}
.prix small{font-size:.86rem;color:var(--encre-doux);font-weight:600}
.chambre--prise{opacity:.72}
.chambre--prise:hover{transform:none}

/* tarifs */
.compte{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(1.5rem,4vw,3.4rem);align-items:start}
@media (max-width:900px){ .compte{grid-template-columns:1fr} }
.ardoise{background:var(--band);color:var(--band-txt);border-radius:3px;padding:clamp(1.6rem,3vw,2.4rem);box-shadow:var(--ombre-forte)}
.ardoise .etiquette{color:var(--band-accent)}
.ligne-prix{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.95rem 0;border-bottom:1px solid var(--band-trait);font-size:1rem}
.ligne-prix:last-of-type{border-bottom:0}
.ligne-prix span{color:var(--band-txt-doux)}
.ligne-prix b{font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap}
.ligne-prix--total{margin-top:.6rem;padding-top:1.1rem;border-top:2px solid var(--band-accent);border-bottom:0}
.ligne-prix--total span{color:var(--band-txt);font-weight:700}
.ligne-prix--total b{font-family:'Fraunces',serif;font-variation-settings:'opsz' 60;font-weight:600;font-size:1.85rem;letter-spacing:-.025em;color:var(--band-accent)}
.mention{font-size:.86rem;color:var(--band-txt-doux);margin-top:1.1rem;line-height:1.5}
.inclus{display:grid;gap:.9rem}
.inclus h3{margin-bottom:.3rem}

/* nerac */
.nerac{background:var(--band);color:var(--band-txt);position:relative;overflow:hidden}
.nerac h2,.nerac h3{color:var(--band-txt)}
.nerac .etiquette{color:var(--band-accent)}
.nerac .plomb{color:var(--band-txt-doux)}
.nerac-grille{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(1.8rem,4vw,3.6rem);align-items:center}
@media (max-width:900px){ .nerac-grille{grid-template-columns:1fr} }
.nerac-images{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.nerac-images figure{margin:0;border-radius:3px;overflow:hidden}
.nerac-images img{width:100%;height:100%;object-fit:cover}
.nerac-images figure:first-child{grid-row:span 2}
.nerac-images figure:first-child img{aspect-ratio:3/4}
.nerac-images figure:not(:first-child) img{aspect-ratio:4/3}
.photo-jeton{width:100%;aspect-ratio:4/3;background-size:cover;background-position:50% 48%}
.photo-jeton--facade{background-image:var(--ph-facade)}
.autour{display:grid;grid-template-columns:1fr 1fr;gap:.6rem 1.4rem;margin-top:1.8rem}
@media (max-width:520px){ .autour{grid-template-columns:1fr} }
.autour li{display:flex;gap:.7rem;align-items:baseline;font-size:1rem;color:var(--band-txt-doux);padding:.42rem 0;border-bottom:1px solid var(--band-trait)}
.autour li::before{content:"";flex:none;width:.4rem;height:.4rem;border-radius:50%;background:var(--band-accent);transform:translateY(-2px)}

/* temoignages */
.paroles-grille{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.5rem,3vw,2.6rem);align-items:center}
@media (max-width:900px){ .paroles-grille{grid-template-columns:1fr} }
.paroles{display:grid;gap:1.2rem}
blockquote{
  margin:0;background:var(--pierre-000);border-radius:3px;padding:clamp(1.5rem,2.6vw,2.1rem);
  box-shadow:var(--ombre);font-family:'Fraunces',serif;font-variation-settings:'opsz' 30;
  font-weight:400;font-size:1.16rem;line-height:1.5;letter-spacing:-.005em;position:relative;
}
blockquote p{margin-bottom:1rem}
blockquote footer{font-family:'Hanken',sans-serif;font-size:.82rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--baise)}
.paroles-photo{margin:0;border-radius:3px;overflow:hidden;box-shadow:var(--ombre-forte)}
.paroles-photo img{width:100%;aspect-ratio:4/3;object-fit:cover}
.paroles-photo figcaption{padding:.9rem 1.1rem;background:var(--pierre-000);font-size:.9rem;color:var(--encre-doux)}

/* questions */
.questions{background:var(--pierre-050)}
.questions-liste{display:grid;gap:.55rem;max-width:820px}
details{background:var(--pierre-000);border-radius:3px;box-shadow:var(--ombre);overflow:hidden}
summary{
  cursor:pointer;list-style:none;padding:1.25rem 1.5rem;font-weight:700;font-size:1.05rem;
  display:flex;justify-content:space-between;align-items:center;gap:1.2rem;transition:color .16s;
}
summary::-webkit-details-marker{display:none}
summary:hover{color:var(--baise)}
summary::after{content:"+";font-family:'Fraunces',serif;font-size:1.5rem;color:var(--baise);flex:none;transition:transform .22s;line-height:1}
details[open] summary::after{transform:rotate(45deg)}
details p{padding:0 1.5rem 1.45rem;color:var(--encre-doux);font-size:1rem;max-width:70ch}

/* visiter */
.visiter{background:var(--baise-voile)}
.visiter-grille{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(1.8rem,4vw,3.4rem);align-items:start}
@media (max-width:900px){ .visiter-grille{grid-template-columns:1fr} }
.coordonnees{display:grid;gap:1.5rem;margin-top:2rem}
.coordonnee{display:grid;gap:.2rem}
.coordonnee dt{font-size:.74rem;font-weight:800;letter-spacing:.17em;text-transform:uppercase;color:var(--baise)}
.coordonnee dd{margin:0;font-size:1.14rem;font-weight:600}
.coordonnee dd a{text-decoration:none}
.coordonnee dd a:hover{text-decoration:underline;text-underline-offset:4px}
.repere{margin:2.2rem 0 0;border-radius:3px;overflow:hidden;box-shadow:var(--ombre);background:var(--pierre-000);max-width:32rem}
.repere img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:50% 44%}
.repere figcaption{padding:.85rem 1.1rem;font-size:.9rem;color:var(--encre-doux)}
.formulaire{background:var(--pierre-000);border-radius:3px;padding:clamp(1.6rem,3vw,2.4rem);box-shadow:var(--ombre-forte);display:grid;gap:1rem}
.champ{display:grid;gap:.4rem}
.champ label{font-size:.8rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--encre-doux)}
.champ input,.champ textarea,.champ select{
  font-family:inherit;font-size:1.02rem;padding:.82rem .95rem;border-radius:2px;
  border:1.5px solid var(--trait);background:var(--pierre-050);color:var(--encre);width:100%;
  transition:border-color .16s, background-color .16s;
}
.champ input:focus,.champ textarea:focus,.champ select:focus{outline:none;border-color:var(--baise);background:var(--pierre-000)}
.champ textarea{resize:vertical;min-height:110px}
.paire{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:560px){ .paire{grid-template-columns:1fr} }
.formulaire .bouton{justify-content:center;margin-top:.3rem}
.note-form{font-size:.85rem;color:var(--encre-doux);line-height:1.45}

/* annexe */
.annexe{background:var(--band);color:var(--band-txt)}
.annexe h2,.annexe h3{color:var(--band-txt)}
.annexe .etiquette{color:var(--band-accent)}
.annexe .plomb{color:var(--band-txt-doux)}
.pages{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:1rem;margin-top:2.6rem}
.page-carte{border:1px solid var(--band-trait);border-radius:3px;padding:1.5rem;display:grid;gap:.75rem;align-content:start;transition:border-color .2s,background-color .2s}
.page-carte:hover{border-color:var(--band-accent);background:var(--band-survol)}
.page-carte b{font-family:'Fraunces',serif;font-variation-settings:'opsz' 28;font-weight:600;font-size:1.14rem;color:var(--band-txt)}
.page-carte ul{display:grid;gap:.4rem}
.page-carte li{font-size:.93rem;color:var(--band-txt-doux);display:flex;gap:.6rem}
.page-carte li::before{content:"·";color:var(--band-accent);font-weight:900}
.signature{margin-top:3rem;padding-top:1.6rem;border-top:1px solid var(--band-trait);font-size:.88rem;color:var(--band-txt-doux);max-width:70ch;line-height:1.6}

/* pied */
.pied{background:var(--pierre-050);padding-block:3rem 2.2rem;border-top:1px solid var(--trait)}
.pied-grille{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:2rem}
@media (max-width:760px){ .pied-grille{grid-template-columns:1fr;gap:1.8rem} }
.pied h4{margin:0 0 .8rem;font-size:.74rem;font-weight:800;letter-spacing:.17em;text-transform:uppercase;color:var(--encre-doux)}
.pied li{margin-bottom:.42rem}
.pied a{text-decoration:none;color:var(--encre-doux);font-size:.97rem}
.pied a:hover{color:var(--encre);text-decoration:underline;text-underline-offset:4px}
.pied-bas{margin-top:2.4rem;padding-top:1.4rem;border-top:1px solid var(--trait);display:flex;flex-wrap:wrap;gap:.8rem 1.6rem;justify-content:space-between;align-items:center;font-size:.86rem;color:var(--encre-doux)}
.pied-bas a{font-size:inherit}
/* Un nom de société qui renvoie ailleurs doit se voir cliquable sans survol :
   dans une barre de mentions légales, personne ne promène sa souris. */
.pied-bas .lien-marque{color:var(--encre);font-weight:700;text-decoration:underline;text-decoration-color:var(--pierre-300);text-underline-offset:3px}
.pied-bas .lien-marque:hover{text-decoration-color:currentColor}
/* La signature de l'agence est un lien, pas une mention légale : elle porte
   donc le nom en gras et l'accent au survol, sans crier plus fort que le
   client dont c'est le site. */
.signe-studio{display:inline-flex;align-items:baseline;gap:.34rem;text-decoration:none}
.signe-studio b{font-weight:800;color:var(--encre);transition:color .18s}
.signe-studio:hover{text-decoration:none}
.signe-studio:hover b{color:var(--rouge)}

/* apparitions */
.parait{opacity:0;transform:translateY(26px);transition:opacity .75s cubic-bezier(.16,.8,.3,1), transform .75s cubic-bezier(.16,.8,.3,1)}
.parait.vu{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-delay:0ms !important;transition-duration:.001ms !important}
  .parait{opacity:1;transform:none}
  .leve{opacity:1;transform:none}
}

/* Le fond d'ouverture est servi à la taille de l'écran, et non toujours en
   1600 px : c'est la seule image que tout visiteur télécharge, quel qu'il soit. */
@media (max-width:1400px){ :root{ --ph-facade:url("/assets/img/facade-1200.jpg") } }
@media (max-width:820px){ :root{ --ph-facade:url("/assets/img/facade-700.jpg") } }