/* =========================================================
   VILLA M — Saint-Tropez
   Esprit : hôtel Ha(a)ïtza — fond rose poudré, carte marine
   en filigrane, photos encadrées « carte postale ».
   ========================================================= */

/* ---------------------------------------------------------
   Écriture manuscrite des annotations (photos des chambres).
   Police « Parisienne », licence SIL Open Font License 1.1,
   embarquée dans le site : aucune connexion nécessaire.
   --------------------------------------------------------- */
@font-face{
  font-family:"Parisienne";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("../fonts/parisienne-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Parisienne";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("../fonts/parisienne-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  --rose:        #faebdf;   /* fond rose poudré */
  --rose-clair:  #fdf3ec;   /* fond des encadrés texte */
  --rose-fonce:  #f3e0d2;
  --orange:      #e2861a;   /* filet doré/orangé des encadrés */
  --encre:       #2b2724;   /* texte */
  --encre-doux:  #4d443d;
  --noir:        #111111;   /* bandeaux MENU / RÉSERVER */
  --blanc:       #ffffff;

  --serif: "Constantia", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, "Times New Roman", serif;
  --sans:  "Corbel", "Candara", "Gill Sans MT", "Gill Sans", "Segoe UI", "Optima", Avenir, sans-serif;
  --manuscrit: "Parisienne", "Snell Roundhand", "Apple Chancery", "Segoe Script", "Lucida Handwriting", cursive;

  --entete: 74px;
  --max: 1360px;
}

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

html{ scroll-behavior:smooth; scrollbar-gutter:stable; }

body{
  margin:0;
  background:var(--rose);
  color:var(--encre);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* carte marine en filigrane, fixe derrière tout le site */
body::before{
  content:"";
  position:fixed;
  inset:0;
  background:url("../img/carte-marine.svg") center center / cover no-repeat;
  opacity:.14;
  pointer-events:none;
  z-index:0;
}
main, .entete, .panneau, .voile, .pied{ position:relative; z-index:1; }

img{ max-width:100%; display:block; }
a{ color:inherit; }

/* ---------------------------------------------------------
   EN-TÊTE : RÉSERVER à gauche, logo au centre, MENU à droite
   --------------------------------------------------------- */
.entete{
  position:fixed; top:0; left:0; right:0;
  height:var(--entete);
  display:flex; align-items:stretch; justify-content:space-between;
  z-index:60;
  pointer-events:none;
}
.entete > *{ pointer-events:auto; }

.bandeau{
  display:flex; align-items:center; gap:14px;
  background:var(--noir); color:var(--blanc);
  border:0; cursor:pointer;
  font-family:var(--sans);
  font-size:12px; letter-spacing:.26em; text-transform:uppercase;
  padding:0 30px; height:100%;
  text-decoration:none;
  transition:background .3s ease;
}
.bandeau:hover{ background:#2a2a2a; }
.bandeau .barres{ display:inline-block; width:24px; }
.bandeau .barres span{
  display:block; height:1.5px; background:var(--blanc); margin:5px 0;
  transition:transform .3s ease, opacity .3s ease;
}

.logo{
  position:absolute; left:50%; top:0; transform:translateX(-50%);
  height:var(--entete);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-decoration:none; color:var(--encre);
  padding:0 18px;
}
.logo .soleil{ display:block; margin-bottom:2px; }
.logo .mot{
  font-family:var(--sans);
  font-size:clamp(22px,2.5vw,31px); font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  line-height:1; white-space:nowrap;
}
.entete--sur-photo .logo{
  color:var(--encre);
  /* halo renforce : le titre agrandi doit rester lisible sur les photos claires */
  text-shadow:0 1px 3px rgba(255,255,255,.95), 0 0 14px rgba(255,255,255,.85), 0 0 28px rgba(255,255,255,.55);
}
.entete{ transition:background .35s ease, box-shadow .35s ease; }
.entete--defile{ background:rgba(250,235,223,.95); box-shadow:0 1px 0 rgba(176,146,124,.30); }
.entete--defile .logo{ text-shadow:none; }
.entete--sur-photo .logo .soleil path,
.entete--sur-photo .logo .soleil circle,
.entete--sur-photo .logo .soleil line{ stroke:currentColor; }

/* ---------------------------------------------------------
   PANNEAUX MENU (droite) et RÉSERVER (gauche)
   --------------------------------------------------------- */
.voile{
  position:fixed; inset:0; background:rgba(17,17,17,.45);
  opacity:0; visibility:hidden; transition:opacity .4s ease, visibility .4s;
  z-index:70;
}
.voile.ouvert{ opacity:1; visibility:visible; }

.panneau{
  position:fixed; top:0; bottom:0;
  width:min(430px, 88vw);
  background:var(--noir); color:var(--blanc);
  z-index:80;
  padding:calc(var(--entete) + 46px) 44px 44px;
  overflow-y:auto;
  transition:transform .45s cubic-bezier(.4,0,.2,1);
}
#panneau-menu{ right:0; transform:translateX(105%); }
#panneau-reserver{ left:0; transform:translateX(-105%); }
/* NB : les regles ci-dessus utilisent un ID, l'etat ouvert doit donc etre
   qualifie de la meme facon, sinon il ne l'emporte pas. */
#panneau-menu.ouvert,
#panneau-reserver.ouvert,
.panneau.ouvert{ transform:translateX(0); }

.panneau .fermer{
  position:absolute; top:18px; right:22px;
  background:none; border:0; color:var(--blanc);
  font-size:26px; line-height:1; cursor:pointer; opacity:.75;
}
.panneau .fermer:hover{ opacity:1; }

.panneau h2{
  font-family:var(--serif);
  font-weight:400; font-size:15px; letter-spacing:.24em; text-transform:uppercase;
  margin:0 0 26px; padding-bottom:14px;
  border-bottom:1px solid rgba(255,255,255,.22);
  color:#f2e2d5;
}

.nav-liste{ list-style:none; margin:0; padding:0; }
.nav-liste li{ border-bottom:1px solid rgba(255,255,255,.12); }
.nav-liste a{
  display:block; text-align:left; text-decoration:none;
  padding:17px 0;
  font-size:13px; letter-spacing:.22em; text-transform:uppercase;
  color:#f4ece5;
  transition:color .25s ease, padding-left .25s ease;
}
.nav-liste a:hover, .nav-liste a[aria-current="page"]{ color:var(--orange); padding-left:10px; }

.prix-liste{ list-style:none; margin:0 0 36px; padding:0; }
.prix-liste li{
  display:flex; gap:12px; align-items:baseline;
  padding:14px 0; border-bottom:1px solid rgba(255,255,255,.12);
  font-size:14px; line-height:1.6; color:#f4ece5;
}
.prix-liste .etoile{ color:var(--orange); }
.prix-liste .tarif{ display:block; letter-spacing:.06em; }
.prix-liste .saison{ display:block; font-size:12px; letter-spacing:.18em; text-transform:uppercase; opacity:.7; margin-bottom:2px; }
.mention{ font-size:12px; letter-spacing:.12em; opacity:.65; margin:-18px 0 30px; }

.bouton-mail{
  display:block; text-align:center; text-decoration:none;
  border:1px solid rgba(255,255,255,.55);
  padding:15px 18px; margin-top:14px;
  font-size:11.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--blanc);
  transition:background .3s ease, color .3s ease, border-color .3s ease;
  word-break:break-word;
}
.bouton-mail:hover{ background:var(--blanc); color:var(--noir); border-color:var(--blanc); }

/* ---------------------------------------------------------
   HERO
   --------------------------------------------------------- */
.hero{ position:relative; height:100vh; height:100svh; min-height:520px; overflow:hidden; }
.hero--onglet{ height:min(74vh,660px); min-height:420px; }
.hero img{ width:100%; height:100%; object-fit:cover; }

/* bandeau blanc translucide avec le titre, cf. modèle */
.hero-bandeau{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  background:rgba(255,255,255,.74);
  width:min(660px, 78%);
  padding:34px 30px;
  text-align:center;
}
.hero-bandeau h1{
  margin:0;
  font-family:var(--sans); font-weight:300;
  font-size:clamp(20px,3.2vw,34px); letter-spacing:.28em; text-transform:uppercase;
  color:#141414;
}

.fleche-bas{
  position:absolute; left:50%; bottom:34px; transform:translateX(-50%);
  width:38px; height:38px; padding:0;
  background:none; border:0; cursor:pointer;
  opacity:.9; filter:drop-shadow(0 1px 4px rgba(0,0,0,.45));
  animation:flotte 2.4s ease-in-out infinite;
}
.fleche-bas:hover{ opacity:1; }
@keyframes flotte{ 0%,100%{ transform:translate(-50%,0);} 50%{ transform:translate(-50%,9px);} }

/* ---------------------------------------------------------
   ENCADRÉ TEXTE « style livre » (modèle Ha(a)ïtza)
   --------------------------------------------------------- */
.livre{
  background:var(--rose-clair);
  border:1px solid rgba(226,134,26,.55);
  padding:7px;
  box-shadow:0 2px 26px rgba(150,110,80,.10);
}
.livre-interieur{
  border:1px solid rgba(190,150,118,.38);
  padding:clamp(28px,4vw,54px) clamp(22px,3.4vw,46px);
  text-align:center;
}
.livre h2, .titre-livre{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(21px,2.5vw,29px);
  letter-spacing:.13em; text-transform:uppercase;
  margin:0 0 30px; color:#1d1a17;
}
.livre p{
  margin:0 0 22px;
  font-size:15px; line-height:2.05; color:var(--encre-doux);
  text-wrap:pretty;
}
.livre p:last-child{ margin-bottom:0; }
.livre .signature{ font-family:var(--serif); font-style:italic; letter-spacing:.08em; }
.filet{
  width:52px; height:1px; background:var(--orange); opacity:.7;
  margin:0 auto 28px;
}

/* ---------------------------------------------------------
   PHOTOS « CARTE POSTALE » (bord blanc déchiré + inclinaison)
   --------------------------------------------------------- */
.cp{
  position:relative;
  display:block;
  align-self:start;
  margin:0 auto;
  padding:var(--p, 13px);
  width:100%;
  transform:rotate(var(--r, 0deg));
  transition:transform .55s cubic-bezier(.2,.7,.3,1);
}
.cp .papier{
  position:absolute; inset:0;
  background:#fff;
  filter:url(#bord-1);
}
.cp:nth-of-type(2n) .papier{ filter:url(#bord-2); }
.cp:nth-of-type(3n) .papier{ filter:url(#bord-3); }
.cp:nth-of-type(4n) .papier{ filter:url(#bord-4); }
.cp img{ position:relative; width:100%; height:auto; }
.cp .agrandir{
  position:absolute; inset:0; z-index:2;
  background:none; border:0; padding:0; cursor:zoom-in;
  -webkit-appearance:none; appearance:none;
}
.cp figcaption{
  position:relative;
  font-family:var(--serif); font-style:italic;
  font-size:12.5px; letter-spacing:.05em; color:#7a6a5c;
  text-align:center; padding-top:9px;
}
.cp:hover{ transform:rotate(var(--r,0deg)) translateY(-6px); }

/* photo stockée à plat qu'il faut redresser (rotation de 90°) */
.cadre-pivot{ position:relative; width:100%; padding-top:133.3%; overflow:hidden; }
.cadre-pivot img{
  position:absolute; top:0; left:0;
  width:133.3%; max-width:none; height:75%;
  transform-origin:0 0;
  transform:rotate(90deg) translateY(-100%);
}

/* ---------------------------------------------------------
   GABARIT « MODÈLE PAGE 1 » : photos | texte | photos
   --------------------------------------------------------- */
.bloc{ padding:clamp(56px,7vw,110px) clamp(18px,4vw,56px); }
.bloc--serre{ padding-top:clamp(30px,4vw,56px); }

.page1{
  max-width:var(--max); margin:0 auto;
  display:grid;
  grid-template-columns:1.12fr minmax(300px,430px) 1.12fr;
  gap:clamp(24px,3.2vw,58px);
  align-items:start;
}
.page1 .colonne{ display:flex; flex-direction:column; gap:clamp(26px,3vw,52px); }
.colonne--gauche{ align-items:flex-start; }
.colonne--droite{ align-items:flex-end; }
.page1 .centre{ position:sticky; top:calc(var(--entete) + 26px); }

/* largeurs relatives des photos, pour des tailles « différentes » */
.t-xl{ width:100%; }
.t-l { width:92%; }
.t-m { width:80%; }
.t-s { width:64%; }
.t-xs{ width:50%; }

.decale-d{ margin-right:auto; margin-left:8%; }
.decale-g{ margin-left:auto; margin-right:8%; }

/* colonne unique, photos les unes sous les autres */
.pile{
  max-width:820px; margin:0 auto;
  display:flex; flex-direction:column; gap:clamp(46px,6vw,96px);
  align-items:center;
}
.pile .cp{ width:100%; }
.pile .cp.t-m{ width:72%; }
.pile .cp.t-s{ width:56%; }

/* collage en biais et chevauché (modèle terrasse) */
.collage{
  max-width:var(--max); margin:0 auto;
  position:relative;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  row-gap:clamp(20px,2.4vw,44px);
}
.collage .cp{ grid-row:auto; }
.c1{ grid-column:1/8;  --r:-1.6deg; z-index:2; }
.c2{ grid-column:7/12; --r:2.2deg;  margin-top:-14%; z-index:3; }
.c3{ grid-column:2/6;  --r:2.8deg;  margin-top:-11%; z-index:4; }
.c4{ grid-column:5/10; --r:-2.4deg; margin-top:-9%; z-index:5; }
.c5{ grid-column:9/13; --r:1.8deg;  margin-top:-18%; z-index:6; }

/* titre de section sur fond rose */
.titre-section{ text-align:center; padding:clamp(70px,8vw,120px) 20px clamp(6px,1vw,18px); }
.titre-section h1{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(24px,3.4vw,38px); letter-spacing:.22em; text-transform:uppercase;
  margin:0 0 18px; color:#1d1a17;
}
.titre-section .filet{ margin-bottom:0; }

/* ---------------------------------------------------------
   CARRÉ DE FIN D'ONGLET (modèle, sans les rayures)
   --------------------------------------------------------- */
.carre-fin{ padding:clamp(60px,7vw,110px) 20px clamp(70px,8vw,120px); }
.carre-fin .livre{ max-width:640px; margin:0 auto; }
.liste-etoiles{ list-style:none; margin:0 0 30px; padding:0; }
.liste-etoiles li{
  font-size:14.5px; line-height:1.9; color:var(--encre-doux);
}
.liste-etoiles .etoile{ color:var(--orange); margin-right:8px; }
.bouton{
  display:block; width:100%; text-decoration:none; cursor:pointer;
  padding:16px 20px; margin-top:14px;
  font-family:var(--sans); font-size:11.5px; letter-spacing:.2em; text-transform:uppercase;
  text-align:center;
  border:1px solid var(--noir); background:var(--noir); color:var(--blanc);
  transition:background .3s ease, color .3s ease;
  word-break:break-word;
}
.bouton:hover{ background:transparent; color:var(--noir); }
.bouton--vide{ background:transparent; color:var(--noir); border-color:rgba(43,39,36,.55); }
.bouton--vide:hover{ background:var(--noir); color:var(--blanc); border-color:var(--noir); }

/* pied de page */
.pied{
  text-align:center; padding:0 20px 54px;
  font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:#8a7868;
}
.pied a{ text-decoration:none; }
.pied a:hover{ color:var(--orange); }

/* retour en haut */
.haut{
  position:fixed; right:26px; bottom:26px; z-index:50;
  width:46px; height:46px; border-radius:50%;
  background:var(--noir); color:var(--blanc);
  border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .35s ease, transform .35s ease, visibility .35s;
}
.haut.visible{ opacity:1; visibility:visible; transform:translateY(0); }

/* apparition au défilement (l'état masqué n'est posé que si JS tourne) */
.apparait{ transition:opacity .9s ease, transform .9s ease; }
.apparait.cache{ opacity:0; transform:translateY(26px); }
.apparait.vu{ opacity:1; transform:none; }
/* une carte postale qui apparait garde son inclinaison */
.cp.apparait.cache{ transform:rotate(var(--r,0deg)) translateY(26px); }
.cp.apparait.vu{ transform:rotate(var(--r,0deg)); }
.cp.apparait.vu:hover{ transform:rotate(var(--r,0deg)) translateY(-6px); }

/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */
@media (max-width:980px){
  .page1{ grid-template-columns:1fr; }
  .page1 .centre{ position:static; order:-1; }
  .page1 .colonne{ flex-direction:row; flex-wrap:wrap; justify-content:center; align-items:flex-start; }
  .page1 .colonne .cp{ width:min(46%, 340px); }
  .t-xs, .t-s, .t-m, .t-l, .t-xl{ width:auto; }
  .decale-d, .decale-g{ margin-left:0; margin-right:0; }
  .collage{ grid-template-columns:1fr; }
  .collage .cp{ grid-column:1/-1 !important; margin-top:0 !important; width:min(88%,620px); }
}
@media (max-width:640px){
  :root{ --entete:52px; }
  .bandeau{ padding:0 16px; font-size:10.5px; letter-spacing:.18em; gap:10px; }
  .logo .mot{ font-size:17px; letter-spacing:.14em; }
  .panneau{ padding:calc(var(--entete) + 34px) 26px 34px; }
  .page1 .colonne .cp{ width:min(74%, 340px); }
  .pile .cp, .pile .cp.t-m, .pile .cp.t-s{ width:100%; }
  .cp{ --p:9px; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  .apparait.cache{ opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}

/* ---------------------------------------------------------
   GABARIT « JARDIN » : photos à gauche, encadré texte à droite
   --------------------------------------------------------- */
.duo{
  max-width:var(--max); margin:0 auto;
  display:grid;
  grid-template-columns:1.45fr minmax(310px,460px);
  gap:clamp(24px,3.4vw,64px);
  align-items:start;
}
.duo .texte{ position:sticky; top:calc(var(--entete) + 26px); }

.mosaique{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  column-gap:clamp(14px,1.8vw,30px);
  row-gap:clamp(18px,2.4vw,40px);
}
.m1{ grid-column:1/4; --r:-2.2deg; }
.m2{ grid-column:4/7; --r:2.4deg;  margin-top:9%; }
.m3{ grid-column:1/3; --r:3.2deg;  margin-top:-5%; }
.m4{ grid-column:3/6; --r:-1.8deg; }
.m5{ grid-column:2/5; --r:2deg;    margin-top:-4%; }
.m6{ grid-column:5/7; --r:-3deg;   margin-top:-14%; }
.m7{ grid-column:1/5; --r:1.6deg; }
.m8{ grid-column:4/7; --r:-2.6deg; margin-top:-8%; }

@media (max-width:980px){
  .duo{ grid-template-columns:1fr; }
  .duo .texte{ position:static; order:-1; }
  .mosaique{ grid-template-columns:repeat(2,1fr); }
  .mosaique .cp{ grid-column:auto !important; margin-top:0 !important; }
}
@media (max-width:640px){
  .mosaique{ grid-template-columns:1fr; }
}

/* recadrage d'une photo bordée de noir à l'origine */
.cadre-rogne{ overflow:hidden; }
.cadre-rogne img{ width:var(--w,114%); margin:var(--m,-9% -7% -12%); max-width:none; }

/* ---------------------------------------------------------
   VISIONNEUSE : une photo en grand au clic
   --------------------------------------------------------- */
.visionneuse{
  position:fixed; inset:0; z-index:90;
  display:flex; align-items:center; justify-content:center;
  background:rgba(20,15,12,.93);
  padding:clamp(52px,7vw,90px) clamp(56px,7vw,110px);
  opacity:0; visibility:hidden;
  transition:opacity .35s ease, visibility .35s;
}
.visionneuse.ouvert{ opacity:1; visibility:visible; }
.visionneuse figure{ margin:0; max-width:100%; }
.visionneuse .cadre{
  background:#fff; padding:clamp(8px,1.1vw,15px);
  box-shadow:0 24px 70px rgba(0,0,0,.55);
}
.visionneuse .boite{ display:block; }
.visionneuse img{
  display:block;
  max-width:min(1080px, 86vw);
  max-height:74vh;
  width:auto; height:auto;
}
.visionneuse .cadre-pivot{ width:min(52vh, 86vw); }
.visionneuse .cadre-rogne{ width:min(320px, 86vw); }
.visionneuse .cadre-pivot img{
  width:133.3%; height:75%; max-width:none; max-height:none;
}
.visionneuse .cadre-rogne img{
  width:var(--w,114%); height:auto; max-width:none; max-height:none;
}
.visionneuse figcaption{
  max-width:620px; margin:0 auto; padding-top:16px;
  color:#e9ded5; text-align:center;
  font-family:var(--serif); font-style:italic; font-size:13.5px; line-height:1.6;
}
.visionneuse .fermer-v,
.visionneuse .nav-v{
  position:absolute; background:none; border:0; color:#fff;
  cursor:pointer; opacity:.75; padding:0;
  transition:opacity .25s ease;
}
.visionneuse .fermer-v:hover,
.visionneuse .nav-v:hover{ opacity:1; }
.visionneuse .fermer-v{ top:16px; right:22px; font-size:32px; line-height:1; width:44px; height:44px; }
.visionneuse .nav-v{
  top:50%; transform:translateY(-50%);
  width:54px; height:54px;
  display:flex; align-items:center; justify-content:center;
}
.visionneuse .nav-v--prec{ left:10px; }
.visionneuse .nav-v--suiv{ right:10px; }
.visionneuse .compteur{
  position:absolute; left:0; right:0; bottom:20px;
  text-align:center; color:#cbbcb1;
  font-size:11.5px; letter-spacing:.2em;
}
@media (max-width:640px){
  .visionneuse{ padding:64px 14px 74px; }
  .visionneuse .nav-v{ top:auto; bottom:14px; transform:none; width:46px; height:46px; }
  .visionneuse .nav-v--prec{ left:22%; }
  .visionneuse .nav-v--suiv{ right:22%; }
  .visionneuse .compteur{ bottom:76px; }
}

/* mise en évidence au clavier */
a:focus-visible, button:focus-visible{ outline:2px solid var(--orange); outline-offset:3px; }
.panneau a:focus-visible, .panneau button:focus-visible,
.visionneuse button:focus-visible{ outline-color:#fff; }

/* =========================================================
   MODIFICATIONS DEMANDÉES — 15/09/2026
   ========================================================= */

/* ---------------------------------------------------------
   Photos d'onglet : plus jamais coupées par le bas de l'écran.
   La hauteur est plafonnée en vh, la « carte postale » se
   redimensionne autour de la photo (plus d'agrandissement flou).
   --------------------------------------------------------- */
/* La figure se cale sur la photo (jamais agrandie au-dela de sa
   definition : plus de flou), et la photo ne peut plus depasser
   la hauteur de l ecran. */
.pile .cp{ width:fit-content; max-width:min(100%,770px); }
.pile .cp.t-m{ width:fit-content; max-width:min(100%,610px); }
.pile .cp.t-s{ width:fit-content; max-width:min(100%,480px); }
.pile .cp > img{ width:auto; max-width:100%; max-height:74vh; }
.pile .cp--rogne{ width:min(100%, var(--maxw,560px)); max-width:min(100%, var(--maxw,560px)); }
.pile .cp--rogne .cadre-rogne{ max-height:74vh; }

/* ---------------------------------------------------------
   Annotations « écrites à la main », en noir, légèrement
   en biais, posées dans un coin de la photo.
   --------------------------------------------------------- */
.note{
  font-family:var(--manuscrit);
  color:#111111;
  font-size:clamp(21px,2.1vw,30px);
  line-height:1.3;
  margin:0;
}
.cp .note{
  position:absolute; z-index:3; padding:0;
  /* redit ici : .cp figcaption est plus specifique que .note seul */
  font-family:var(--manuscrit);
  font-style:normal;
  font-size:clamp(21px,2.1vw,30px);
  line-height:1.3;
  color:#111111;
  max-width:58%;
  transform:rotate(var(--nr,-6deg));
  text-shadow:0 1px 4px rgba(255,255,255,.8), 0 0 14px rgba(255,255,255,.6);
  pointer-events:none;
}
.note--hg{ top:8%;    left:8%;   text-align:left;  }
.note--hd{ top:8%;    right:8%;  text-align:right; }
.note--bg{ bottom:9%; left:8%;   text-align:left;  }
.note--bd{ bottom:9%; right:8%;  text-align:right; }

/* mot posé à côté de la photo plutôt que dessus */
.avec-note{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(12px,3vw,44px);
  flex-wrap:wrap;
  /* plus large que la pile, pour que le mot tienne a droite de la photo */
  width:min(1040px,94vw);
}
.pile .avec-note .cp{ width:fit-content; max-width:min(100%,548px); }
.pile .avec-note .cp > img{ max-width:100%; }
.avec-note .cp{ margin:0; }
.note--cote{
  flex:0 1 270px;
  transform:rotate(var(--nr,-4deg));
  text-align:center;
}

/* ---------------------------------------------------------
   « Jeu de cartes » : une photo entière au centre, les deux
   autres en éventail de chaque côté (chambre n°1 à l'étage).
   --------------------------------------------------------- */
.jeu{
  display:flex; justify-content:center; align-items:center;
  width:100%;
}
.jeu .cp{ margin:0; width:auto; }
.jeu .cp > img{ width:auto; max-width:none; max-height:46vh; }
.jeu .jeu-c > img{ max-height:52vh; }
.jeu-g{ z-index:1; margin-right:clamp(-72px,-4.5vw,-24px); }
.jeu-c{ z-index:3; }
.jeu-d{ z-index:2; margin-left:clamp(-72px,-4.5vw,-24px); }
.jeu .cp:hover{ z-index:5; }

/* ---------------------------------------------------------
   Panneau MENU : fond blanc, écriture noire.
   --------------------------------------------------------- */
#panneau-menu{ background:var(--blanc); color:var(--noir); }
#panneau-menu .fermer{ color:var(--noir); }
#panneau-menu h2{
  color:var(--noir);
  border-bottom-color:rgba(17,17,17,.20);
}
#panneau-menu .nav-liste li{ border-bottom-color:rgba(17,17,17,.13); }
#panneau-menu .nav-liste a{ color:var(--noir); }
#panneau-menu .nav-liste a:hover,
#panneau-menu .nav-liste a[aria-current="page"]{ color:var(--orange); }

/* ---------------------------------------------------------
   Panneau RÉSERVER : fond rose du site + carte marine en
   filigrane, texte blanc nettement plus grand. Un voile chaud
   très léger passe sous le texte : sans lui, du blanc sur le
   rose poudré serait illisible.
   --------------------------------------------------------- */
#panneau-reserver{
  width:min(500px,92vw);
  color:var(--blanc);
  text-shadow:0 1px 6px rgba(52,32,20,.55);
  background:
    linear-gradient(rgba(86,56,36,.46), rgba(86,56,36,.46)),
    url("../img/carte-marine.svg") center center / cover no-repeat,
    var(--rose);
}
#panneau-reserver .fermer{ color:var(--blanc); font-size:30px; }
#panneau-reserver h2{
  color:var(--blanc);
  font-size:clamp(18px,2.2vw,25px);
  letter-spacing:.17em;
  border-bottom-color:rgba(255,255,255,.45);
  margin-bottom:24px;
}
#panneau-reserver .mention{
  color:var(--blanc); opacity:.92;
  font-size:15px; letter-spacing:.13em;
  margin:-16px 0 32px;
}
#panneau-reserver .prix-liste{ margin-bottom:40px; }
#panneau-reserver .prix-liste li{
  color:var(--blanc);
  border-bottom-color:rgba(255,255,255,.34);
  padding:18px 0;
}
#panneau-reserver .prix-liste .etoile{ color:var(--blanc); }
#panneau-reserver .prix-liste .saison{
  color:var(--blanc); opacity:.93;
  font-size:14px; letter-spacing:.15em; margin-bottom:5px;
}
#panneau-reserver .prix-liste .tarif{
  font-size:clamp(21px,2.5vw,28px); letter-spacing:.03em;
  line-height:1.3;
}
#panneau-reserver .bouton-mail{
  color:var(--blanc);
  border-color:rgba(255,255,255,.75);
  font-size:13.5px; letter-spacing:.11em;
  padding:17px 18px;
}
#panneau-reserver .bouton-mail:hover{
  background:var(--blanc); color:#4a3226; border-color:var(--blanc);
  text-shadow:none;
}

/* ---------------------------------------------------------
   Adaptations petits écrans pour ce qui précède
   --------------------------------------------------------- */
@media (max-width:860px){
  .jeu{ flex-direction:column; gap:clamp(24px,5vw,44px); }
  .jeu-g, .jeu-d{ margin:0; }
  .jeu .cp > img, .jeu .jeu-c > img{ max-height:42vh; max-width:100%; }
}
@media (max-width:640px){
  .pile .cp, .pile .cp.t-m, .pile .cp.t-s{ width:fit-content; max-width:100%; }
  .pile .cp, .pile .cp.t-m, .pile .cp.t-s{ width:fit-content; max-width:100%; }
  .pile .cp > img, .pile .cp.t-m > img, .pile .cp.t-s > img{ max-width:100%; max-height:70vh; }
  .cp .note{ font-size:20px; max-width:66%; }
  .note--cote{ flex-basis:100%; }
}

/* =========================================================
   MODIFICATIONS DEMANDÉES — 26/09/2026
   ========================================================= */

/* ---------------------------------------------------------
   En-tête : RÉSERVER et, juste dessous, RÈGLEMENT INTÉRIEUR,
   chacun encadré d'un filet blanc. Le cadre est un outline
   rentré : il suit le fond au survol, sans bordure à recaler.
   --------------------------------------------------------- */
.bandeaux-g{ display:flex; flex-direction:column; align-self:flex-start; }
.bandeaux-g .bandeau{ height:var(--entete); justify-content:center; }
.bandeau--cadre{ outline:2px solid var(--blanc); outline-offset:-8px; }
.bandeaux-g .bandeau--regle{ height:48px; font-size:11px; }
.bandeau--cadre:focus-visible{ outline-color:var(--orange); }

/* ---------------------------------------------------------
   Panneau RÉSERVER : cinq tarifs + la caution
   --------------------------------------------------------- */
#panneau-reserver .prix-liste{ margin-bottom:0; }
#panneau-reserver .prix-liste li{ padding:14px 0; }
#panneau-reserver .caution{
  display:flex; gap:12px; align-items:baseline;
  margin:0 0 38px; padding:16px 0;
  border-bottom:1px solid rgba(255,255,255,.34);
  font-size:clamp(17px,1.8vw,20px); letter-spacing:.04em;
}

/* ---------------------------------------------------------
   Panneau RÈGLEMENT INTÉRIEUR : même habit que RÉSERVER
   --------------------------------------------------------- */
#panneau-regle{
  left:0; transform:translateX(-105%);
  width:min(500px,92vw);
  color:var(--blanc);
  text-shadow:0 1px 6px rgba(52,32,20,.55);
  background:
    linear-gradient(rgba(86,56,36,.46), rgba(86,56,36,.46)),
    url("../img/carte-marine.svg") center center / cover no-repeat,
    var(--rose);
}
#panneau-regle.ouvert{ transform:translateX(0); }
#panneau-regle .fermer{ color:var(--blanc); font-size:30px; }
#panneau-regle h2{
  color:var(--blanc);
  font-size:clamp(18px,2.2vw,25px);
  letter-spacing:.17em;
  border-bottom-color:rgba(255,255,255,.45);
  margin-bottom:10px;
}
.regle-liste{ list-style:none; margin:0; padding:0; }
.regle-liste li{
  display:flex; gap:12px; align-items:baseline;
  padding:16px 0;
  border-bottom:1px solid rgba(255,255,255,.34);
  font-size:clamp(17px,1.7vw,20px); line-height:1.45;
}

/* ---------------------------------------------------------
   Deux photos côte à côte, en biais, le mot écrit dessous
   (et non plus sur la photo).
   --------------------------------------------------------- */
.duo-legende{
  display:flex; justify-content:center; align-items:center;
  gap:clamp(28px,4.5vw,76px);
  flex-wrap:wrap;
  width:min(1240px,96vw);
}
.carte-legendee{ display:flex; flex-direction:column; align-items:center; }
.pile .duo-legende .cp{ margin:0; width:auto; max-width:none; }
.pile .duo-legende .cp--rogne{ width:var(--largeur,420px); max-width:92vw; }
.pile .duo-legende .carte-legendee > .cp:not(.cp--rogne) > img,
.pile .paire .cp > img{
  width:auto; max-width:none;
  height:min(40vh,340px); max-height:none;
}
.note--dessous{
  margin-top:clamp(14px,1.8vw,26px);
  transform:rotate(var(--nr,-4deg));
  text-align:center;
}
/* la suite 3 : deux vues de la chambre, l'une glissée sous l'autre */
.paire{ display:flex; align-items:center; }
.paire-arriere{ z-index:1; margin-right:clamp(-70px,-4.5vw,-30px) !important; }
.paire-avant{ z-index:2; }
.paire .cp:hover{ z-index:5; }

/* chambre n°2 agrandie, le mot à côté */
.avec-note--large{ width:min(1180px,96vw); }
.pile .avec-note--large .cp{ max-width:min(100%,760px); }

/* ---------------------------------------------------------
   Salon de repos : jeux de cartes plus larges que la pile,
   hauteurs harmonisées dans chaque éventail.
   --------------------------------------------------------- */
.jeu--large{ width:min(1300px,98vw); }
.jeu--large .jeu-g{ margin-right:clamp(-120px,-7vw,-40px); }
.jeu--large .jeu-d{ margin-left:clamp(-120px,-7vw,-40px); }
.jeu--large .jeu-g > img,
.jeu--large .jeu-d > img{ height:min(38vh,320px); max-height:none; }
.jeu--large .jeu-c > img{ height:min(54vh,480px); max-height:none; }

/* ---------------------------------------------------------
   Bassin : photos agrandies, en collage comme la terrasse
   --------------------------------------------------------- */
.collage--bassin{ max-width:1180px; }
.b1{ grid-column:1/7;  --r:-1.8deg; z-index:2; }
.b2{ grid-column:7/13; --r:2.2deg;  margin-top:14%; z-index:3; }
.b3{ grid-column:2/5;  --r:2.6deg;  margin-top:-10%; z-index:4; }
.b4{ grid-column:7/11; --r:-2.4deg; margin-top:-5%; z-index:5; }

/* ---------------------------------------------------------
   Terrasse : dernière photo agrandie, puis la façade à la Moke
   --------------------------------------------------------- */
.c5{ grid-column:7/13; margin-top:-16%; }
.c6{ grid-column:2/9; --r:-2deg; margin-top:-7%; z-index:7; }

/* ---------------------------------------------------------
   Petits écrans
   --------------------------------------------------------- */
@media (max-width:860px){
  .pile .duo-legende .carte-legendee > .cp:not(.cp--rogne) > img,
  .pile .paire .cp > img{ height:min(34vh,280px); }
  .jeu--large .jeu-g > img, .jeu--large .jeu-d > img,
  .jeu--large .jeu-c > img{ height:auto; max-height:42vh; max-width:100%; }
  .jeu--large .jeu-g, .jeu--large .jeu-d{ margin:0; }
  /* les cartes ne depassent plus du bord de l ecran */
  .jeu--large, .duo-legende, .avec-note--large{ width:100%; }
  .pile .duo-legende .cp, .pile .avec-note .cp{ max-width:86vw; }
  .jeu .cp{ max-width:min(86vw,460px); }
  .jeu .cp > img, .jeu .jeu-c > img,
  .jeu--large .jeu-g > img, .jeu--large .jeu-d > img, .jeu--large .jeu-c > img{
    width:auto; height:auto; max-width:100%; max-height:none;
  }
}
@media (max-width:640px){
  .bandeaux-g{ width:112px; }
  .bandeaux-g .bandeau{ padding:0 10px; }
  .bandeaux-g .bandeau--regle{
    height:auto; min-height:46px; padding:9px 12px;
    white-space:normal; text-align:center; line-height:1.35;
    font-size:9.5px; letter-spacing:.14em;
  }
  .bandeau--cadre{ outline-offset:-6px; }
  .duo-legende{ flex-direction:column; }
  .pile .duo-legende .cp--rogne{ max-width:82vw; }
  .paire{ flex-direction:column; gap:22px; }
  .paire-arriere{ margin:0 !important; }
  .pile .duo-legende .carte-legendee > .cp:not(.cp--rogne) > img,
  .pile .paire .cp > img{ height:auto; width:auto; max-width:min(84vw,100%); max-height:60vh; }
}