/* ==========================================================
   Mise en page — dispositions reprises de Rumaya
   Grille 12 colonnes, gouttiere 20px, contenu 1400px.
   ========================================================== */

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
html.lenis{ height:auto }
.lenis.lenis-smooth{ scroll-behavior:auto !important }
.lenis.lenis-stopped{ overflow:hidden }

body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:var(--t-body); font-weight:var(--fw-sans);
  line-height:var(--lh-body); letter-spacing:var(--track);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
/* le serif partage la meme approche negative que sur Rumaya */
.hero__title,.about__title,.stay__h,.bloc__h,.bloc__p,.around__title,.journal__title,
.post__h,.rev__q,.faq__title,.book__title,.foot__addr,.foot__brand,.place__n,
.figs dd,.menu__link,.hero__lab p,.mcard__h{ letter-spacing:var(--track) }
img,video{ display:block; max-width:100%; height:auto }
/* Anneau de focus clavier : le defaut du navigateur jurait avec la
   charte. Les elements qui ont deja leur propre marque de focus
   (pastilles de carte, barres de carrousel) gardent la leur, leur
   selecteur etant plus specifique. */
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px }
.around :focus-visible,.reviews :focus-visible,.bloc :focus-visible,
.menu :focus-visible{ outline-color:var(--on-dark) }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }
dl,dd,ol,ul{ margin:0; padding:0; list-style:none }
h1,h2,h3,p,blockquote,figure{ margin:0; font-weight:inherit }
/* le serif est toujours en 400, meme dans un corps en 500 */
.hero__title,.about__title,.stay__h,.bloc__h,.bloc__p,.around__title,
.journal__title,.post__h,.rev__q,.faq__title,.book__title,.foot__addr,
.foot__brand,.place__n,.figs dd,.menu__link,.hero__lab p,.mcard__h,
.fact__v{ font-weight:400 }

.grid{
  display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:20px;
  width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter);
}

/* ---------------- primitives ---------------- */
.tag{ font-family:var(--sans); font-size:var(--t-body); color:var(--accent);
  line-height:var(--lh-tight); font-weight:var(--fw-sans) }
.lead{ font-family:var(--sans); font-size:var(--t-body); color:var(--accent);
  line-height:var(--lh-tight) }
.body{ font-family:var(--sans); font-size:var(--t-body); color:var(--ink-soft);
  line-height:var(--lh-body) }

/* titres : lignes empilees, interligne 0.9, italique en accent */
.ln{ display:block }
.ln em,em{ font-style:italic }

/* lien souligne qui se deploie — courbe du template */
.link-u{ letter-spacing:normal; position:relative; display:inline-flex; align-items:center; gap:12px;
  width:max-content; padding-bottom:5px; font-family:var(--sans); font-size:var(--t-body) }
.link-u::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:currentColor; transform:scaleX(1); transform-origin:left;
  transition:transform var(--dur-hover) var(--ease-hover) }
.link-u:hover::after{ transform:scaleX(0); transform-origin:right }
.link-u i{ font-style:normal; transition:transform var(--dur-hover) var(--ease-hover) }
.link-u:hover i{ transform:translateX(5px) }

.is-hidden{ opacity:.001; transform:translateY(20px) }

/* ══════════════ NAVIGATION ══════════════ */
.nav{ position:fixed; inset:0 0 auto 0; z-index:40; display:flex; align-items:center;
  justify-content:space-between; gap:16px; padding:20px var(--gutter);
  mix-blend-mode:difference; color:#fff; font-family:var(--sans); font-size:var(--t-body) }
.nav__brand span{ opacity:.65 }
.nav__menu{ display:flex; align-items:center; gap:10px }
.nav__icon{ display:flex; flex-direction:column; gap:5px; width:22px }
.nav__icon i{ display:block; height:1px; background:currentColor;
  transition:transform var(--dur-hover) var(--ease-hover) }
.menu-open .nav__icon i:first-child{ transform:translateY(3px) rotate(45deg) }
.menu-open .nav__icon i:last-child{ transform:translateY(-3px) rotate(-45deg) }
.nav__swap{ position:relative; display:inline-block }
.nav__swap [data-close]{ position:absolute; left:0; top:0; opacity:0 }
.menu-open .nav__swap [data-open]{ opacity:0 }
.menu-open .nav__swap [data-close]{ opacity:1 }
.nav__book::after{ background:#fff }

/* ---------------- menu plein ecran ---------------- */
.menu{ position:fixed; inset:0; z-index:35; pointer-events:none }
.menu__panel{ position:absolute; inset:0 0 auto 0; min-height:min(70vh,620px);
  background:var(--ink); color:var(--on-dark); padding:120px var(--gutter) 44px;
  transform:translateY(-101%); transition:transform .8s var(--ease-hover);
  display:flex; flex-direction:column; justify-content:space-between; gap:40px }
.menu-open .menu{ pointer-events:auto }
.menu-open .menu__panel{ transform:translateY(0) }
.menu__grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px;
  width:100%; max-width:var(--maxw); margin-inline:auto }
.menu__col{ display:flex; flex-direction:column; gap:8px }
.menu__col .tag{ color:var(--muted); margin-bottom:10px }
.menu__link{ position:relative; width:max-content; overflow:hidden;
  font-family:var(--serif); font-size:var(--t-mid); line-height:1.15;
  opacity:0; transform:translateY(14px);
  transition:opacity .6s var(--ease-reveal), transform .6s var(--ease-reveal) }
.menu-open .menu__link{ opacity:1; transform:none }
.menu__col:nth-child(1) .menu__link{ transition-delay:.30s }
.menu__col:nth-child(2) .menu__link{ transition-delay:.36s }
.menu__col:nth-child(3) .menu__link{ transition-delay:.42s }
.menu__link i{ position:absolute; left:0; right:0; bottom:2px; height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:right; transition:transform var(--dur-hover) var(--ease-hover) }
.menu__link:hover i{ transform:scaleX(1); transform-origin:left }
.menu__foot{ font-family:var(--sans); font-size:var(--t-body); color:var(--muted);
  width:100%; max-width:var(--maxw); margin-inline:auto }

/* ══════════════ 1. HERO ══════════════
   Rumaya : labels 24px serif a 40% de hauteur, titre 120px centre en bas. */
.hero{ position:relative; min-height:100svh; overflow:hidden; background:var(--ink);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:0 var(--gutter) clamp(30px,3.4vw,50px) }
.hero__media{ position:absolute; inset:0; z-index:0 }
.hero__still,.hero__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.hero__video{ opacity:0; transition:opacity 1.2s var(--ease-reveal) }
.hero__video.is-ready{ opacity:1 }
/* Le voile doit rester lisible sur une photo de ciel clair : les
   labels sont a 40 pour cent de hauteur, la ou le degrade etait au
   plus faible. On garde du contraste sur toute la bande utile. */
.hero__veil{ position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.46) 0%, rgba(0,0,0,.20) 30%,
                            rgba(0,0,0,.16) 46%, rgba(0,0,0,.58) 100%),
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.10)) }
.hero__labels{ position:absolute; z-index:2; left:var(--gutter); right:var(--gutter); top:40%;
  display:flex; justify-content:space-between; gap:20px; color:#fff }
.hero__lab p{ font-family:var(--serif); font-size:var(--t-lead); line-height:1.22 }
.hero__lab--r{ text-align:right }
.hero__title{ position:relative; z-index:2; color:#fff; text-align:center;
  font-family:var(--serif); font-size:var(--t-hero); line-height:var(--lh-disp);
  letter-spacing:-.015em }
.hero__l1,.hero__l2{ display:block }
.hero__l2{ display:flex; align-items:flex-start; justify-content:center; gap:.18em }
.hero__small{ display:inline-flex; flex-direction:column; font-size:var(--t-mini);
  line-height:.92; padding-top:.16em }

/* ══════════════ 2. LE SEUIL (About) ══════════════
   Rumaya : etiquette a l'extreme gauche, titre 80px en escalier vers la
   droite (lignes decalees), colonne de texte a droite.                   */
.about{ padding-block:var(--section-y); background:var(--bg) }
.about .grid{ row-gap:clamp(40px,5vw,86px) }
.about__title{ grid-column:1 / -1; grid-row:1;
  font-family:var(--serif); font-size:var(--t-disp); line-height:var(--lh-disp) }
.about__title .ln{ margin-left:var(--i,50%) }
/* colonne de gauche : lever, coucher, chiffres — trois blocs separes
   par un filet, qui remplissent la hauteur laissee par le titre decale */
.facts{ grid-column:2 / span 3; grid-row:1 / span 2; align-self:stretch;
  display:flex; flex-direction:column; justify-content:space-between;
  gap:24px; padding-top:calc(var(--t-body) * 3.4) }
.fact{ display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  gap:16px; padding:22px 0; border-top:1px solid var(--line) }
.fact__ico{ display:block; width:32px; color:var(--accent) }
.fact__ico svg{ display:block; width:100%; height:auto }
.fact__v{ font-family:var(--serif); font-size:var(--t-mid); line-height:1;
  letter-spacing:var(--track) }
.figs{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px;
  padding:22px 0 0; border-top:1px solid var(--line) }
.figs dt{ margin-bottom:6px }
.figs dd{ font-family:var(--serif); font-size:var(--t-lead); line-height:1.1 }
.facts__note{ color:var(--muted); margin-top:18px }

.about__col{ grid-column:7 / span 5; grid-row:2; padding-top:clamp(24px,3vw,48px); display:flex; flex-direction:column;
  align-items:flex-start; gap:22px }
.about__col .body{ max-width:58ch }
.figs{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; width:100%;
  padding-top:20px; border-top:1px solid var(--line) }
.figs dt{ margin-bottom:5px }
.figs dd{ font-family:var(--serif); font-size:var(--t-lead); line-height:1.1 }

/* ══════════════ 3. SHOWCASE ══════════════
   Rumaya : tout est centre. "the" 64px italique au-dessus du nom,
   trait vertical, paragraphe 24px serif centre sur 380px, puis lien.   */
.stay{ padding-top:var(--section-y); background:var(--bg) }
.stay__intro{ text-align:center; margin-bottom:clamp(32px,4vw,64px) }
.stay__intro .tag{ margin-bottom:16px }
.stay__h{ font-family:var(--serif); font-size:var(--t-disp); line-height:var(--lh-disp) }
/* Empilement, comme Rumaya : chaque panneau est colle en haut et
   avance de 1,1 viewport. Les suivants glissent par-dessus les
   precedents, qui restent en place — d'ou l'effet de cartes. */
.stay__track{ position:relative }
.bloc{ position:sticky; top:0; height:100svh; overflow:hidden;
  margin-bottom:10vh; color:var(--on-dark) }
.bloc:last-child{ margin-bottom:0 }
.bloc__pin{ position:relative; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:0 var(--gutter); text-align:center }
.bloc__media{ position:absolute; inset:0; z-index:0; background:var(--sand) }
.bloc__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.bloc__media img[data-suite]{ opacity:0 }
/* Le texte du bloc est centre verticalement : le voile doit rester
   dense au milieu, pas seulement aux extremites. Un leger assombrissement
   general garantit la lisibilite sur les photos de ciel clair. */
.bloc__media::after{ content:''; position:absolute; inset:0;
  background:
    radial-gradient(58% 46% at 50% 50%, rgba(0,0,0,.42), rgba(0,0,0,0) 100%),
    linear-gradient(180deg, rgba(0,0,0,.34) 0%, rgba(0,0,0,.14) 40%,
                            rgba(0,0,0,.20) 62%, rgba(0,0,0,.5) 100%) }
.bloc__in{ position:relative; z-index:2; display:flex; flex-direction:column;
  align-items:center; gap:0 }
.bloc__h{ font-family:var(--serif); font-size:var(--t-bloc); line-height:var(--lh-disp) }
.bloc__h em{ display:block; font-style:italic }
.bloc__rule{ width:1px; height:clamp(70px,11vw,150px); background:var(--on-dark);
  margin:clamp(20px,2.6vw,36px) 0 }
.bloc__p{ font-family:var(--serif); font-size:var(--t-lead); line-height:1.2;
  max-width:min(640px, 78vw); color:var(--on-dark);
  /* Sans cela le navigateur remplit la premiere ligne au maximum et
     laisse un mot seul sur la suivante (« rangements. »). balance
     repartit les lignes a peu pres egales et supprime l'orphelin. */
  text-wrap:balance }
.bloc__cta{ display:inline-flex; margin-top:clamp(30px,3.6vw,52px) }

/* Indicateurs de carrousel, facon stories : un trait par photo, celui
   en cours se remplit sur sa duree. Ils sont cliquables et remplacent
   des fleches de navigation. */
.bloc__barres{ display:flex; gap:6px; margin-top:clamp(18px,2.2vw,30px) }
.bloc__barre{ padding:10px 2px; background:none; border:0; cursor:pointer;
  line-height:0 }
.bloc__piste{ display:block; position:relative; width:34px; height:2px;
  background:rgba(251,247,240,.34); overflow:hidden }
.bloc__piste i{ position:absolute; inset:0; background:var(--on-dark);
  transform:scaleX(0); transform-origin:left }
.bloc__barre:focus{ outline:none }
.bloc__barre:focus-visible .bloc__piste{ outline:1px solid var(--on-dark);
  outline-offset:3px }
.bloc__barre:hover .bloc__piste{ background:rgba(251,247,240,.55) }
.bloc__num{ position:absolute; z-index:2; right:var(--gutter); bottom:clamp(28px,3vw,44px);
  font-family:var(--sans); font-size:var(--t-body); color:var(--on-dark) }

/* ══════════════ 4. AUTOUR ══════════════
   Section sombre sur toute sa largeur : plus de rectangle noir
   pose au milieu du creme. La carte tient dans le viewport.   */
.around{ padding-block:clamp(52px,5.4vw,80px); background:var(--ink); color:var(--on-dark) }
.around .tag{ color:var(--muted) }
.around__head{ row-gap:0; margin-bottom:clamp(20px,2.4vw,36px) }
.around__title{ grid-column:1 / span 8; grid-row:1;
  font-family:var(--serif); font-size:var(--t-disp); line-height:var(--lh-disp) }
.around__title .ln:nth-child(2){ margin-left:.08em }
.around__body{ align-items:center }
.around__map{ grid-column:1 / span 7; position:relative;
  /* hauteur explicite : la section entiere doit tenir dans un viewport */
  height:min(54vh, 560px); display:flex; justify-content:center }
.around__map svg{ display:block; width:auto; height:100%; max-width:100%; overflow:visible }
.around__list{ grid-column:9 / span 4; display:flex; flex-direction:column }

/* ══════════════ 5. JOURNAL ══════════════
   Releve sur Rumaya @1440 : fond creme identique a la page, TOUT le
   texte en terracotta, titre sur deux lignes a gauche, lien en haut a
   droite, etiquette en bas a gauche. Trois cartes de 3 colonnes qui
   demarrent a la colonne 4, image quasi carree debordant de 17px.   */
.journal{ padding-block:clamp(84px,9vw,124px) clamp(52px,5.6vw,80px);
  background:var(--bg); color:var(--accent) }
.journal .tag{ color:var(--accent) }
.journal__head{ row-gap:0 }
.journal__title{ grid-column:1 / span 7; grid-row:1;
  font-family:var(--serif); font-size:var(--t-disp); line-height:var(--lh-disp) }
.journal__more{ grid-column:10 / span 3; grid-row:1; justify-self:end;
  align-self:start; margin-top:calc(var(--t-disp) * 0.58) }
.journal__grid{ margin-top:clamp(44px,5vw,72px); row-gap:44px; align-items:stretch }
/* hauteur egale : le lien reste aligne d'une carte a l'autre meme si
   les titres n'ont pas le meme nombre de lignes */
.post{ grid-column:span 3; height:100%; display:flex; flex-direction:column;
  align-items:flex-start; gap:18px }
.post .link-u{ margin-top:auto }
.post:nth-child(1){ grid-column:4 / span 3 }
.post:nth-child(2){ grid-column:7 / span 3 }
.post:nth-child(3){ grid-column:10 / span 3 }
/* L'image occupe exactement sa colonne. Chez Rumaya la boite mesuree
   est plus large que ce qui est peint : un balayage par
   elementFromPoint montre bien du fond entre deux visuels. */
.post__img{ width:100%; aspect-ratio:1 / 1.01; overflow:hidden; background:var(--sand) }
.post__img img{ width:100%; height:100%; object-fit:cover;
  transition:transform 1.2s var(--ease-reveal) }
.post:hover .post__img img{ transform:scale(1.04) }
.post__h{ font-family:var(--serif); font-size:var(--t-quote); line-height:1.12;
  color:var(--accent) }

/* ══════════════ 6. AVIS ══════════════
   Releve sur Rumaya @1440 : image plein cadre en fond, quatre cartes
   de 373x302 en 2x2 centrees (x 337/730, y 138/460, gouttiere 20),
   fonds alternes creme / terracotta en diagonale, padding 20.      */
.reviews{ position:relative; min-height:100svh; overflow:hidden; background:var(--ink);
  display:flex; align-items:center; justify-content:center;
  padding:clamp(48px,6vw,90px) var(--gutter) }
.reviews__bg{ position:absolute; inset:0; z-index:0 }
.reviews__bg img{ width:100%; height:100%; object-fit:cover; transform:scale(1.06) }
.reviews__bg::after{ content:''; position:absolute; inset:0; background:rgba(24,18,14,.28) }
.reviews__grid{ position:relative; z-index:2;
  display:grid; grid-template-columns:repeat(2,373px); gap:20px }
.rev{ margin:0; width:373px; min-height:302px; padding:20px;
  display:flex; flex-direction:column }
.rev--clair{ background:var(--bg) }
.rev--fonce{ background:var(--accent) }
.rev__q{ margin:0; font-family:var(--serif); font-size:var(--t-quote);
  line-height:1; letter-spacing:var(--track) }
.rev__b{ margin:22px 0 0; font-size:var(--t-body); line-height:var(--lh-body) }
.rev__w{ margin-top:auto; padding-top:24px; font-size:var(--t-body);
  line-height:var(--lh-tight); font-weight:var(--fw-sans) }
.rev__ico{ position:absolute; width:24px; height:24px }
.rev{ position:relative }
.rev__ico{ right:20px; bottom:20px }
.rev__ico svg{ width:100%; height:100% }
.rev--clair{ color:var(--accent) }
.rev--clair .rev__b{ color:#724f48 }
.rev--fonce{ color:var(--on-dark) }
.rev--fonce .rev__b{ color:#e8d9cf }

/* ══════════════ 7. FAQ ══════════════
   Pile de cartes reprise de Foreal (gouttiere 12, padding 32/36,
   question a 24px), mais sur une seule colonne : chez eux le titre
   occupe une colonne etroite a gauche des cartes, ce qui creusait un
   vide sur notre grille plus large. Le bandeau de titre reprend donc
   le gabarit des autres sections du site — etiquette colonne 1,
   titre colonne 6 — et les cartes tiennent toute la largeur.
   Matiere : cartes chaudes sur fond creme plutot que blanc sur gris,
   serif pour les questions, et aucun rayon (le site n'en compte pas
   un seul, celui de Foreal serait le seul arrondi de la page).      */
.faq{ padding-block:var(--section-y); background:var(--bg) }
.faq__top{ margin-bottom:clamp(36px,4.4vw,72px) }
.faq__title{ grid-column:1 / -1; font-family:var(--serif);
  font-size:var(--t-disp); line-height:var(--lh-disp) }
.faq__title em{ font-style:italic }

.faq__list{ grid-column:1 / -1; display:flex; flex-direction:column; gap:12px }

/* Sur grand ecran les cartes pleine largeur faisaient des accordeons
   trop longs a parcourir. Le bloc se resserre au centre. 940px est
   choisi pour que le titre tienne encore sur une seule ligne : il en
   mesure 891 a 80px. */
@media (min-width:1200px){
  .faq__title,.faq__list,.faq__ask{
    width:100%; max-width:940px; margin-inline:auto }
}

/* La relance ferme la section : on a parcouru les huit questions,
   la sienne n'y etait pas. */
.faq__ask{ grid-column:1 / -1; margin-top:clamp(34px,4vw,60px);
  display:flex; align-items:baseline; gap:clamp(14px,2vw,28px); flex-wrap:wrap }
.faq__ask p{ color:var(--muted) }

/* Une carte par question. */
.qa{ background:var(--bg-warm);
  transition:background var(--dur-hover) var(--ease-hover) }
.qa:hover{ background:#efe6d6 }
.qa__q{ display:flex; align-items:flex-start; justify-content:space-between;
  gap:28px; width:100%; text-align:left; padding:32px 36px;
  font-family:var(--serif); font-size:var(--t-lead); line-height:1.15;
  letter-spacing:normal }
.qa__ico{ position:relative; flex:none; width:14px; height:14px; margin-top:.4em }
.qa__ico::before,.qa__ico::after{ content:''; position:absolute; inset:50% 0 auto 0;
  height:1px; background:currentColor;
  transition:transform var(--dur-hover) var(--ease-hover) }
.qa__ico::after{ transform:rotate(90deg) }
.qa.is-open .qa__ico::after{ transform:rotate(0) }
.qa__a{ overflow:hidden; height:0; transition:height .55s var(--ease-hover) }
.qa__a p{ padding:0 36px 32px; max-width:58ch; color:var(--ink-soft) }

/* ══════════════ 8. RESERVATION ══════════════ */
.book{ padding-block:var(--section-y); background:var(--bg-warm) }
.book__top{ margin-bottom:clamp(36px,4.4vw,72px) }
.book__title{ grid-column:6 / span 7; font-family:var(--serif);
  font-size:var(--t-disp); line-height:var(--lh-disp) }
.book__title .ln--in{ margin-left:1.4em }
.args{ grid-column:1 / -1; display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:32px; margin-bottom:clamp(40px,5vw,80px) }
.args li{ display:flex; flex-direction:column; gap:10px; padding-top:16px;
  border-top:1px solid var(--line) }
.args p{ color:var(--ink-soft) }
.lodgify{ grid-column:1 / -1; min-height:clamp(320px,38vw,500px); border:1px solid var(--line);
  background:var(--bg); display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:8px; text-align:center; padding:32px }
.lodgify p:last-child{ color:var(--muted) }

/* ══════════════ 9. PIED DE PAGE ══════════════
   Releve sur Rumaya @1440 : hauteur 810, fond brun tres sombre,
   quatre colonnes (x 20 / 730 / 967 / 1203), en-tetes 16px sans et
   liens 24px serif ; mentions legales et copyright, filet pleine
   largeur, puis la marque en 230px. Il est fixe et se devoile en
   fin de page derriere le contenu.                                */
/* .page ne peint aucun fond : sinon elle recouvre le pied de page fixe
   place en dessous, et le spacer apparait comme un bloc creme.
   Chaque section porte donc son propre fond. */
.page{ position:relative; z-index:2 }
.foot-spacer{ height:var(--footer-h) }
.foot-fixed{ position:fixed; left:0; right:0; bottom:0; z-index:1; height:var(--footer-h) }
.foot{ height:100%; background:var(--ink-deep); color:var(--on-dark);
  display:flex; flex-direction:column; padding:48px 0 0; overflow:hidden }
.foot .tag{ color:var(--on-dark); margin-bottom:22px }

.foot__cols{ row-gap:32px }
.foot__c1{ grid-column:1 / span 5 }
.foot__c2{ grid-column:7 / span 2 }
.foot__c3{ grid-column:9 / span 2 }
.foot__c4{ grid-column:11 / span 2 }
.foot__addr{ font-family:var(--serif); font-size:var(--t-lead); line-height:1.28;
  letter-spacing:var(--track); margin-bottom:26px }
.foot__nav{ position:relative; display:block; width:max-content; overflow:hidden;
  font-family:var(--serif); font-size:var(--t-lead); line-height:1.52;
  letter-spacing:var(--track) }
.foot__line{ position:relative; display:block; width:max-content; overflow:hidden;
  font-size:var(--t-body); line-height:2.2 }
.foot__nav i,.foot__line i{ position:absolute; left:0; right:0; bottom:.28em; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform var(--dur-hover) var(--ease-hover) }
.foot__line i{ transform:scaleX(1); transform-origin:left }
.foot__nav:hover i{ transform:scaleX(1); transform-origin:left }
.foot__line:hover i{ transform:scaleX(0); transform-origin:right }

.foot__legal{ margin-top:clamp(84px,9.5vw,138px); align-items:end; row-gap:12px }
.foot__legalL{ grid-column:1 / span 5 }
.foot__legalL .foot__line{ color:#e8d9cf }
.foot__copy{ grid-column:9 / span 4; justify-self:end; font-size:var(--t-body);
  color:#8a6a5e }
.foot__rule{ height:1px; background:rgba(251,247,240,.22);
  width:calc(100% - 2*var(--gutter)); max-width:var(--maxw);
  margin:26px auto 0 }
/* La marque : « Le Petit » en petit, puis le reste calibre par
   app.js pour occuper exactement la largeur du contenu. */
.foot__brand{ padding-inline:var(--gutter); max-width:var(--maxw);
  margin:18px auto 0; width:100%; color:var(--on-dark) }
.foot__brand-sm{ display:block; font-family:var(--serif); font-size:var(--t-lead);
  line-height:1; letter-spacing:var(--track) }
.foot__brand-lg{ display:block; font-family:var(--serif); font-size:var(--t-brand);
  line-height:.82; letter-spacing:var(--track); white-space:nowrap }

/* ---------------- CTA persistant ---------------- */
.cta-fixed{ position:fixed; right:var(--gutter); bottom:24px; z-index:30;
  display:inline-flex; align-items:center; gap:10px;
  background:var(--accent); color:var(--on-dark); padding:13px 20px;
  font-family:var(--sans); font-size:var(--t-body);
  opacity:0; transform:translateY(12px); pointer-events:none;
  transition:opacity .5s var(--ease-reveal), transform .5s var(--ease-reveal) }
.cta-fixed.is-on{ opacity:1; transform:none; pointer-events:auto }
.cta-fixed i{ font-style:normal }

/* ══════════════ TABLETTE ══════════════ */
@media (max-width:1199.98px){
  .about__title .ln{ margin-left:calc(var(--i,50%) * .55) }
  .about__col{ grid-column:1 / -1; grid-row:3 }
    .around__map{ grid-column:1 / -1 }
  .around__list{ grid-column:1 / -1; margin-top:40px }
  .journal__title{ grid-column:1 / span 9 }
  .post,.post:nth-child(1),.post:nth-child(2),.post:nth-child(3){ grid-column:span 4 }
  .reviews__grid{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .book__title{ grid-column:1 / -1 }
  .qa__q{ padding:28px 30px }
  .qa__a p{ padding:0 30px 28px }
  .args{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  /* en tablette les colonnes passent sur deux rangees : on resserre
     le bloc legal pour que la marque tienne dans les 810px du pied. */
  .foot__c1{ grid-column:1 / span 6 }
  .foot__c2,.foot__c3,.foot__c4{ grid-column:span 4 }
  .foot__cols{ row-gap:22px }
  .foot__legal{ margin-top:clamp(20px,3vw,44px) }
  .foot{ padding-top:36px }
  .foot__copy{ grid-column:1 / -1; justify-self:start }
  .reviews__grid{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .rev{ width:100%; min-height:0 }
}

/* ══════════════ MOBILE ══════════════ */
@media (max-width:809.98px){
  .nav__brand span{ display:none }
  .hero__labels{ top:auto; bottom:calc(100% - 46vh); flex-direction:column; gap:6px }
  .hero__lab--r{ text-align:left }
  .hero__l2{ flex-direction:column; align-items:center; gap:0 }
  .hero__small{ flex-direction:row; gap:.3em; padding-top:0 }
  .about__title .ln{ margin-left:0 }
  .figs{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .bloc{ margin-bottom:6vh }
  .bloc__num{ display:none }
  .around__title{ grid-column:1 / -1 }
  .qa__q{ padding:24px 26px }
  .qa__a p{ padding:0 26px 24px }
  .journal__title{ grid-column:1 / -1 }
  .journal__title .ln--in{ margin-left:1.2em }
  .journal__more{ grid-column:1 / -1; justify-self:start; grid-row:3 }
  /* ---- Carrousels mobiles ----
     Empilees verticalement, les trois journees et les quatre avis
     faisaient defiler tres longtemps pour peu de contenu. On passe
     en defilement horizontal a accroche native : pas une ligne de JS,
     le geste tactile est celui du systeme.

     La geometrie porte l'affordance : la carte fait 72vw et le
     conteneur est retreci de 14vw de chaque cote, donc la premiere
     carte tombe pile au centre a l'arret, et la suivante deborde
     d'une quarantaine de pixels a droite. C'est ce bout de carte qui
     dit qu'il y a autre chose a voir. 14vw = (100 - 72) / 2 : changer
     l'une des deux valeurs sans l'autre decentre tout.             */
  .journal__grid,.reviews__grid{
    display:flex; grid-template-columns:none; align-items:stretch;
    width:100%; max-width:none;
    overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    gap:12px; padding-inline:14vw; scroll-padding-inline:14vw;
    scrollbar-width:none }
  .journal__grid::-webkit-scrollbar,
  .reviews__grid::-webkit-scrollbar{ display:none }

  .post,.post:nth-child(1),.post:nth-child(2),.post:nth-child(3){
    grid-column:auto; flex:0 0 72vw; scroll-snap-align:center }
  .post__img{ aspect-ratio:1 / 1.01 }

  /* la section porte deja sa gouttiere ; on la rend au carrousel pour
     qu'il file d'un bord a l'autre */
  /* Le vide au-dessus et en dessous ne venait pas du padding mais du
     min-height:100svh : la carte flottait au centre d'un plein ecran,
     soit 290px de fond de chaque cote. 66svh ramene ces marges a
     environ 145px, la moitie. */
  .reviews{ padding-inline:0; min-height:66svh }
  .rev{ flex:0 0 72vw; width:auto; min-height:0; scroll-snap-align:center }
  .args{ grid-template-columns:1fr }
  .menu__grid{ grid-template-columns:1fr; gap:20px }
  .foot-spacer{ display:none }
  .foot-fixed{ position:relative; height:auto }
  .foot{ padding-bottom:24px }
  /* Les trois listes de liens tiennent sur une seule rangee : le lien
     le plus long (« Le bungalow ») fait 76px, une colonne sur trois en
     offre 83 meme a 320px de large. Empilees, ces trois listes
     mangeaient 472px a elles seules. */
  .foot__c1{ grid-column:1 / -1 }
  .foot__c2{ grid-column:1 / span 4 }
  .foot__c3{ grid-column:5 / span 4 }
  .foot__c4{ grid-column:9 / span 4 }
  .foot__cols{ row-gap:26px }
  .foot{ padding-top:36px }
  .foot .tag{ margin-bottom:14px }
  .foot__addr{ margin-bottom:18px }
  .foot__legal{ margin-top:clamp(36px,9vw,52px) }
  .foot__legalL,.foot__copy{ grid-column:1 / -1; justify-self:start }
  .foot__brand-lg{ font-size:clamp(40px,13vw,86px) }
  .cta-fixed{ left:var(--gutter); right:var(--gutter); justify-content:center }
}


/* ══════════════ CARTE ══════════════
   Fond : ombrage de relief recadre pile sur l'ile, donc sa boite
   correspond a l'emprise geographique. Les pastilles, reperes, rose
   des vents et echelle vivent dans un SVG superpose au meme repere. */
.around__map{ position:relative }
/* La boite adopte le ratio exact du relief : relief et calques s'y
   superposent pixel pour pixel, aucun letterbox possible. */
.map__box{ position:relative; height:100%; max-width:100%; margin-inline:auto }
.relief,.relief img,.calques{ position:absolute; inset:0; width:100%; height:100% }
.relief img{ display:block; object-fit:fill;
  opacity:0; transition:opacity 1.2s var(--ease-reveal) }
.is-drawn .relief img{ opacity:1 }
.calques{ overflow:visible }

.towns circle{ fill:rgba(251,247,240,.5) }
.towns text{ font-family:var(--sans); font-size:15px; letter-spacing:.06em;
  fill:rgba(251,247,240,.55); text-transform:uppercase }
.towns{ opacity:0; transition:opacity 1s var(--ease-reveal) .5s }
.is-drawn .towns{ opacity:1 }

.pin{ cursor:pointer; opacity:0; transition:opacity .6s var(--ease-reveal) }
.is-drawn .pin{ opacity:1; transition-delay:.75s }
.pin__dot{ fill:var(--accent); transition:r var(--dur-hover) var(--ease-hover) }
.pin__ring{ fill:none; stroke:var(--accent); stroke-width:1.6; opacity:.6;
  transition:r var(--dur-hover) var(--ease-hover), opacity var(--dur-hover) var(--ease-hover) }
.pin__halo{ fill:var(--accent); opacity:0;
  transition:r var(--dur-hover) var(--ease-hover), opacity var(--dur-hover) var(--ease-hover) }
/* la tige se trace vers le haut, puis la fiche eclot a son extremite */
.pin__stem{ stroke:var(--accent); stroke-width:1.6; opacity:0;
  stroke-dasharray:1; stroke-dashoffset:1;
  transition:opacity .12s linear, stroke-dashoffset .3s var(--ease-hover) }
.pin:hover .pin__dot,.pin.is-on .pin__dot{ r:8 }
.pin:hover .pin__ring,.pin.is-on .pin__ring{ r:22; opacity:1 }
.pin:hover .pin__halo,.pin.is-on .pin__halo{ r:38; opacity:.24 }
.pin:hover .pin__stem,.pin.is-on .pin__stem{ opacity:1; stroke-dashoffset:0 }
.pin:focus{ outline:none }
.pin:focus-visible .pin__halo{ r:38; opacity:.32 }
.pin--home{ pointer-events:none }
.pin--home .pin__dot{ fill:var(--green) }
.pin--home .pin__ring{ stroke:var(--green); opacity:.85 }
.pin--home .pin__halo{ fill:var(--green); opacity:.22 }
.pin--home text{ font-family:var(--sans); font-size:17px; letter-spacing:.06em;
  text-transform:uppercase; fill:var(--on-dark); text-anchor:middle }

.rose text{ font-family:var(--sans); font-size:16px; fill:rgba(251,247,240,.5); text-anchor:middle }
.rose line,.rose path{ stroke:rgba(251,247,240,.35); stroke-width:1.6; fill:none }
.scale text{ font-family:var(--sans); font-size:14px; letter-spacing:.08em;
  fill:rgba(251,247,240,.45) }
.scale line{ stroke:rgba(251,247,240,.35); stroke-width:1.6 }
.rose,.scale{ opacity:0; transition:opacity .8s var(--ease-reveal) .8s }
.is-drawn .rose,.is-drawn .scale{ opacity:1 }

/* fiche : plus grande, et surtout atteignable a la souris */
/* La fiche eclot au bout de la tige : elle part minuscule a son point
   d'ancrage (transformOrigin pose par app.js sur la base, au niveau de
   la pastille) et grandit jusqu'a sa taille reelle. Le decalage de
   0,22 s laisse la tige se tracer d'abord. */
.mcard{ position:absolute; z-index:6; width:380px; pointer-events:auto;
  display:flex; align-items:stretch;
  opacity:0; visibility:hidden;
  transform:scale(.12) translateY(6px);
  transition:opacity .3s var(--ease-reveal) .18s,
             transform .42s var(--ease-reveal) .18s,
             visibility 0s linear .6s }
.mcard.is-on{ opacity:1; visibility:visible; transform:none;
  transition:opacity .28s var(--ease-reveal) .22s,
             transform .44s cubic-bezier(.2,.9,.3,1) .22s,
             visibility 0s linear .22s }
.mcard__txt{ flex:1 1 auto; background:#332d26; border:1px solid rgba(251,247,240,.14);
  color:var(--on-dark); padding:18px 20px }
.mcard__h{ font-family:var(--serif); font-size:22px; line-height:1.15; margin-bottom:8px }
.mcard__h span{ color:var(--muted); font-family:var(--sans); font-size:13px }
.mcard__d{ font-size:13px; line-height:1.5; color:rgba(251,247,240,.75);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden }
.mcard__a{ position:relative; display:inline-block; margin-top:12px; font-size:13px;
  color:var(--on-dark); padding-bottom:3px }
.mcard__a::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:currentColor; transform:scaleX(1); transform-origin:left;
  transition:transform var(--dur-hover) var(--ease-hover) }
.mcard__a:hover::after{ transform:scaleX(0); transform-origin:right }
.mcard__a i{ font-style:normal; margin-left:5px }
.mcard__img{ flex:none; width:112px; align-self:center; aspect-ratio:1; object-fit:cover;
  margin:0 -14px 0 -12px; background:var(--sand); box-shadow:0 10px 28px rgba(0,0,0,.4) }

/* liste des lieux, sur fond sombre */
.place{ position:relative; display:flex; align-items:baseline; justify-content:space-between;
  gap:16px; padding:16px 0; border-bottom:1px solid rgba(251,247,240,.16); cursor:pointer;
  transition:color var(--dur-hover) var(--ease-hover) }
.place:first-child{ border-top:1px solid rgba(251,247,240,.16) }
.place::after{ content:''; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:var(--accent); transform:scaleX(0); transform-origin:right;
  transition:transform var(--dur-hover) var(--ease-hover) }
.place:hover,.place.is-on,.place:focus-visible{ color:var(--accent) }
.place:hover::after,.place.is-on::after{ transform:scaleX(1); transform-origin:left }
.place:focus{ outline:none }
.place__n{ font-family:var(--serif); font-size:var(--t-lead); line-height:1.2 }
.place__t{ font-family:var(--sans); font-size:var(--t-body); color:var(--muted); white-space:nowrap }
.place:hover .place__t,.place.is-on .place__t{ color:var(--accent) }

/* En colonne, la carte reprend sa largeur : plus de hauteur imposee.
   .map__box n'a que des enfants en position absolue, donc aucune
   largeur propre : sans le width:100% ci-dessous elle se reduisait a
   0x0 des que le parent passait en height:auto, et toute la section
   Autour disparaissait sous 1200px. */
@media (max-width:1199.98px){
  .around__map{ height:auto }
  .map__box{ width:100%; height:auto }
  .around__map svg{ width:100%; height:auto }
}
@media (max-width:809.98px){
  .mcard{ width:min(300px,86vw) }
  .mcard__img{ width:84px }
}