/* Suite Nature Dream — feuille de style unique.
   Documentation, décisions de conception et procédures : A-LIRE.txt */

:root {
  color-scheme: light;                 

  --c-terracotta: #B25B3C;
  --c-bordeaux:   #6E2233;
  --c-bois:       #D9B98C;
  --c-pierre:     #8C8377;
  --c-cedre:      #4A5D45;
  --c-or:         #C9A227;

  --s-page:    #E9E5DC;
  --s-profond: #DED8CB;
  --s-sombre:  #6E2233;
  --s-nuit:    #2A2320;
  --s-blanc:   #FFFFFF;                

  --t-principal:  #2A2320;             
  --t-secondaire: #635B52;             
  --t-lien:       #8B4128;             
  --t-inverse:    #F2E9DC;             
  --t-or:         #C9A227;             

  --e-survol:     #9A4A2E;
  --e-actif:      #85401F;
  --e-focus:      #2A2320;
  --e-filet:      #D2CBBC;
  --e-filet-fort: #B4AA97;

  --f-titre: "Fraunces", Georgia, "Times New Roman", serif;
  --f-texte: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;

  --fs-suralignee: 0.75rem;
  --fs-legende:    0.9375rem;
  --fs-texte: clamp(1.0625rem, 1rem + 0.3vw, 1.125rem);
  --fs-h3:    clamp(1.1875rem, 1.1rem + 0.5vw, 1.375rem);
  --fs-h2:    clamp(1.5rem, 1.15rem + 1.7vw, 2.25rem);
  --fs-h1:    clamp(2rem, 1.3rem + 3.4vw, 3.25rem);

  --lh-titre: 1.12;
  --lh-texte: 1.65;
  --ls-titre: -0.012em;
  --ls-suralignee: 0.14em;

  --sp-1: .25rem;  --sp-2: .5rem;  --sp-3: .75rem; --sp-4: 1rem;
  --sp-6: 1.5rem;  --sp-8: 2rem;   --sp-12: 3rem;  --sp-16: 4rem;
  --sp-24: 6rem;
  --sp-section: clamp(4rem, 9vw, 8rem);

  --l-contenu: 1160px;
  --l-texte:   34rem;                  
  --l-marge:   clamp(1.25rem, 4vw, 3rem);
  --r-angle:   3px;
  --h-entete:  4.25rem;
  --z-barre: 100;
  --z-menu:  200;

  --cl-latte:   5px;
  --cl-pas:     14px;
  --cl-hauteur: 28px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--h-entete) + var(--sp-4));
}

body {
  margin: 0;
  background: var(--s-page);
  color: var(--t-principal);
  font: 400 var(--fs-texte)/var(--lh-texte) var(--f-texte);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

body.menu-ouvert { overflow: hidden; }

img {
  display: block;
  max-width: 100%;
  height: auto;
  background: var(--s-profond);        
}

h1, h2, h3 {
  margin: 0 0 var(--sp-4);
  font-family: var(--f-titre);
  font-variation-settings: "SOFT" 30;
  line-height: var(--lh-titre);
  letter-spacing: var(--ls-titre);
}
h1 { font-size: var(--fs-h1); font-weight: 600; }
h2 { font-size: var(--fs-h2); font-weight: 400; }
h3 { font-size: var(--fs-h3); font-weight: 600; }

p  { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--t-lien); text-decoration-thickness: 1px; text-underline-offset: 4px; }
a:hover { text-decoration-thickness: 2px; }

ul { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--e-focus);
  outline-offset: 3px;
  border-radius: var(--r-angle);
}
.sur-sombre :focus-visible { outline-color: var(--c-bois); }

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

.section { padding-block: var(--sp-section); }
.section-profonde { background: var(--s-profond); }

.mesure { max-width: var(--l-texte); }

.surlignee {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-suralignee);
  font-weight: 500;
  letter-spacing: var(--ls-suralignee);
  text-transform: uppercase;
  color: var(--c-cedre);
}
.sur-sombre .surlignee { color: var(--c-bois); }

.legende {
  font-size: var(--fs-legende);
  color: var(--t-secondaire);
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.saut-contenu {
  position: absolute; left: var(--sp-4); top: -100%;
  z-index: 300; padding: var(--sp-3) var(--sp-4);
  background: var(--s-nuit); color: var(--t-inverse);
  border-radius: var(--r-angle); text-decoration: none;
}
.saut-contenu:focus { top: var(--sp-4); }

.claustra {
  height: var(--cl-hauteur);
  background-image: repeating-linear-gradient(to right,
    var(--c-bois) 0 var(--cl-latte),
    transparent var(--cl-latte) var(--cl-pas));
}
.claustra-bord {
  padding-left: var(--sp-6);
  border-radius: 0;
  background: repeating-linear-gradient(to bottom,
    var(--c-bois) 0 var(--cl-latte),
    transparent var(--cl-latte) var(--cl-pas)) left / 4px 100% no-repeat;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2);
  min-height: 48px;
  padding: .9rem 1.75rem;
  font: 500 1rem/1 var(--f-texte);
  border: 1px solid transparent;
  border-radius: var(--r-angle);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.btn-primaire        { background: var(--c-terracotta); color: var(--s-blanc); }
.btn-primaire:hover  { background: var(--e-survol); }
.btn-primaire:active { background: var(--e-actif); }

.btn-secondaire       { background: transparent; color: var(--t-principal);
                        border-color: var(--e-filet-fort); }
.btn-secondaire:hover { background: var(--s-profond); border-color: var(--c-terracotta); }

.sur-sombre .btn-primaire        { background: var(--c-bois); color: var(--s-nuit); }
.sur-sombre .btn-primaire:hover  { background: #E8CDA6; }

/* Tant que l'en-tête est transparente, elle flotte sur la photo du hero :
   son bouton doit adopter la même couleur que celui du hero, sinon deux
   boutons principaux de teintes différentes cohabitent à l'écran.
   Une fois l'en-tête posée sur le fond pierre, il revient au terracotta. */
.entete:not(.est-posee) .btn-primaire       { background: var(--c-bois); color: var(--s-nuit); }
.entete:not(.est-posee) .btn-primaire:hover { background: #E8CDA6; }
.sur-sombre .btn-secondaire      { color: var(--t-inverse);
                                   border-color: rgba(242,233,220,.45); }
.sur-sombre .btn-secondaire:hover{ background: rgba(242,233,220,.10);
                                   border-color: var(--c-bois); }

.actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

.icone {
  width: 22px; height: 22px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}

.entete {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-barre);
  height: var(--h-entete);
  display: flex; align-items: center;
  background: transparent;
  transition: background-color .25s ease, border-color .25s ease;
  border-bottom: 1px solid transparent;
}
.entete.est-posee {
  background: rgba(233, 229, 220, .94);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom-color: var(--e-filet);
}

.entete .contenu { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }

.marque {
  font-family: var(--f-titre); font-weight: 600; font-size: 1.0625rem;
  letter-spacing: -.01em; text-decoration: none;
  color: var(--t-inverse);
  text-shadow: 0 1px 12px rgba(42,35,32,.55);
  transition: color .25s ease, text-shadow .25s ease;
}
.entete.est-posee .marque,
.entete.est-posee .nav-bureau a { text-shadow: none; }
.nav-bureau a, .bouton-menu { text-shadow: 0 1px 12px rgba(42,35,32,.55); }
.entete.est-posee .marque { color: var(--t-principal); }

.nav-bureau { display: none; }

.bouton-menu {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; margin-right: -12px;
  background: none; border: 0; cursor: pointer;
  color: var(--t-inverse);
  transition: color .25s ease;
}
.entete.est-posee .bouton-menu { color: var(--t-principal); }

@media (min-width: 900px) {
  .bouton-menu { display: none; }
  .nav-bureau { display: flex; align-items: center; gap: var(--sp-6); }
  .nav-bureau a {
    color: var(--t-inverse); text-decoration: none; font-size: .9375rem;
    transition: color .25s ease;
  }
  .entete.est-posee .nav-bureau a { color: var(--t-principal); }
  .nav-bureau a:hover { text-decoration: underline; text-underline-offset: 5px; }
  .nav-bureau .btn { min-height: 42px; padding: .65rem 1.25rem; font-size: .9375rem; }
  .nav-bureau .btn:hover { text-decoration: none; }
  .entete.est-posee .nav-bureau .btn { color: var(--s-blanc); }
}

.menu-mobile {
  position: fixed; inset: 0; z-index: var(--z-menu);
  display: flex; flex-direction: column;
  padding: var(--sp-6) var(--l-marge) var(--sp-8);
  background: var(--s-sombre);
  color: var(--t-inverse);
  overflow-y: auto;
}
.menu-mobile[hidden] { display: none; }

.menu-haut { display: flex; justify-content: flex-end; margin-bottom: var(--sp-8); }
.menu-fermer {
  width: 48px; height: 48px; margin-right: -12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; color: inherit; cursor: pointer;
}

.menu-liens { display: flex; flex-direction: column; gap: var(--sp-4); margin-bottom: var(--sp-8); }
.menu-liens a {
  font-family: var(--f-titre); font-size: 1.75rem; font-weight: 400;
  color: var(--t-inverse); text-decoration: none;
}
.menu-liens a:hover { color: var(--c-bois); }

.menu-reseaux {
  display: flex; gap: var(--sp-6); margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: 1px solid rgba(242,233,220,.25);
  font-size: .9375rem;
}
.menu-reseaux a { color: var(--t-or); text-decoration: none; }
.menu-reseaux a:hover { text-decoration: underline; text-underline-offset: 4px; }

.barre-action {
  position: fixed; inset: auto 0 0 0; z-index: var(--z-barre);
  display: flex; gap: var(--sp-2);
  padding: var(--sp-3) var(--l-marge) calc(var(--sp-3) + env(safe-area-inset-bottom));
  background: rgba(233, 229, 220, .96);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--e-filet);
  transform: translateY(110%);
  transition: transform .28s ease;
}
.barre-action.est-visible { transform: translateY(0); }
.barre-action .btn { flex: 1; padding-inline: var(--sp-4); }
.barre-action .btn-secondaire { flex: 0 0 auto; }

@media (min-width: 900px) { .barre-action { display: none; } }

.hero {
  position: relative;
  min-height: 88svh;
  display: flex; align-items: flex-end;
  padding-block: calc(var(--h-entete) + var(--sp-8)) var(--sp-16);
  overflow: hidden;
  color: var(--t-inverse);
  background: var(--s-nuit);
}
.hero-media { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; background: var(--s-nuit); }

.hero-voile {
  position: absolute; inset: 0;
  
  background: linear-gradient(180deg,
    rgba(42,35,32,.45)   0%,
    rgba(42,35,32,.18)  20%,
    rgba(42,35,32,.34)  42%,
    rgba(42,35,32,.62)  58%,
    rgba(42,35,32,.80)  76%,
    rgba(42,35,32,.90) 100%);
}
.hero-contenu {
  position: relative;
  
  text-shadow: 0 1px 2px rgba(42,35,32,.30), 0 2px 30px rgba(42,35,32,.55);
}

.hero .surlignee { color: #EFDCBB; }
.hero h1 { max-width: 18ch; margin-bottom: var(--sp-4); }
.hero-sous {
  margin-bottom: var(--sp-6);
  font-size: var(--fs-legende);
  color: #EDE4D6;
}
.hero-claustra { position: absolute; inset: auto 0 0 0; opacity: .9; }

@media (min-width: 900px) {
  .hero { min-height: 92svh; }
  .hero h1 { max-width: 16ch; }
}

.lieu-grille { display: grid; gap: var(--sp-8); }
.chiffres {
  display: flex; flex-wrap: wrap; gap: var(--sp-6);
  margin-top: var(--sp-6); padding-top: var(--sp-6);
  border-top: 1px solid var(--e-filet);
}
.chiffre-valeur {
  display: block; font-family: var(--f-titre); font-size: 1.75rem;
  font-weight: 600; line-height: 1;
}
.chiffre-libelle { font-size: var(--fs-legende); color: var(--t-secondaire); }

@media (min-width: 900px) {
  .lieu-grille { grid-template-columns: 1fr 1fr; gap: var(--sp-16); align-items: center; }
}

.piliers { display: grid; gap: var(--sp-16); }

.pilier { display: grid; gap: var(--sp-6); }
.pilier-media img { width: 100%; aspect-ratio: 3/2; object-fit: cover; border-radius: var(--r-angle); }
.pilier-texte { max-width: var(--l-texte); }
.pilier-nom { margin-bottom: var(--sp-3); }

.separateur-claustra { margin-block: var(--sp-12); opacity: .75; }

@media (min-width: 900px) {
  .pilier { grid-template-columns: 1fr 1fr; gap: var(--sp-12); align-items: center; }
  .pilier-inverse .pilier-media { order: 2; }
  .pilier-media img { aspect-ratio: 4/5; }
}

.equipements {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-6) var(--sp-4);
  margin-top: var(--sp-8);
}
.equipement { display: flex; align-items: flex-start; gap: var(--sp-3); font-size: var(--fs-legende); }
.equipement .icone { width: 28px; height: 28px; stroke: var(--c-cedre); margin-top: -1px; }

.note-equipements {
  margin-top: var(--sp-8); padding: var(--sp-4) var(--sp-6);
  background: var(--s-page);
  font-size: var(--fs-legende); color: var(--t-secondaire);
}
.section-profonde .note-equipements { background: var(--s-page); }

@media (min-width: 720px) { .equipements { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.grille-photos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
  margin-block: var(--sp-8) 0;
}
.grille-photos .galerie-item {
  margin: 0;
  aspect-ratio: 1;
  border-radius: var(--r-angle);
  overflow: hidden;
}
.grille-photos .galerie-item img {
  width: 100%; height: 100%;
  object-fit: cover; border-radius: 0;
  transition: transform .35s ease, opacity .2s ease;
}
.grille-photos .galerie-item:hover img { transform: scale(1.04); opacity: 1; }

.grille-photos .photo-large { grid-column: span 2; aspect-ratio: 2 / 1; }

@media (min-width: 600px) {
  .grille-photos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
}
@media (min-width: 900px) {
  .grille-photos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .grille-photos .galerie-item:hover img { transform: none; }
}

.acces-grille { display: grid; gap: var(--sp-8); }
.reperes { display: grid; gap: 0; margin-block: var(--sp-6); }
.repere {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4);
  padding-block: var(--sp-3);
  border-bottom: 1px solid var(--e-filet);
  font-size: var(--fs-legende);
}
.repere-distance { font-weight: 500; white-space: nowrap; color: var(--t-secondaire); }

.avertissement {
  padding: var(--sp-4) var(--sp-6);
  background: var(--s-profond);
  font-size: var(--fs-legende);
}
.section-profonde .avertissement { background: var(--s-page); }

@media (min-width: 900px) {
  .acces-grille { grid-template-columns: 1fr 1fr; gap: var(--sp-16); align-items: start; }
}

.avis-liste { display: grid; gap: var(--sp-6); margin-top: var(--sp-8); }
.avis-carte { padding-block: var(--sp-2); }
.avis-carte blockquote {
  margin: 0 0 var(--sp-3);
  font-family: var(--f-titre); font-size: var(--fs-h3); font-weight: 400;
  line-height: 1.4;
}
.avis-source { font-size: var(--fs-legende); color: var(--t-secondaire); }

@media (min-width: 900px) { .avis-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-12); } }

.final {
  position: relative; overflow: hidden;
  background: var(--s-nuit); color: var(--t-inverse);
  padding-block: var(--sp-24);
  text-align: center;
}
.final .contenu { position: relative; }
.final h2 { margin-inline: auto; max-width: 20ch; }
.final .actions { justify-content: center; }
.final .legende { color: rgba(242,233,220,.72); margin-top: var(--sp-6); }

.pied {
  background: var(--s-sombre); color: var(--t-inverse);
  padding-block: var(--sp-16) var(--sp-12);
}
.pied-grille { display: grid; gap: var(--sp-8); }
.pied h3 { font-size: 1rem; font-weight: 600; margin-bottom: var(--sp-3); }
.pied a { color: var(--t-or); text-decoration: none; }
.pied a:hover { text-decoration: underline; text-underline-offset: 4px; }
.pied li { margin-bottom: var(--sp-2); font-size: var(--fs-legende); }
.pied-bas {
  margin-top: var(--sp-12); padding-top: var(--sp-6);
  border-top: 1px solid rgba(242,233,220,.22);
  font-size: var(--fs-legende); color: rgba(242,233,220,.72);
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-6);
  justify-content: space-between;
}
.pied-marque { font-family: var(--f-titre); font-size: 1.25rem; font-weight: 600; margin-bottom: var(--sp-3); }

.pied { padding-bottom: calc(var(--sp-12) + 5rem); }
@media (min-width: 900px) { .pied { padding-bottom: var(--sp-12); } }

@media (min-width: 720px)  { .pied-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px)  { .pied-grille { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--sp-12); } }

html.js .apparait { opacity: 0; transform: translateY(8px); transition: opacity .4s ease-out, transform .4s ease-out; }
html.js .apparait.est-visible { opacity: 1; transform: none; }

html:not(.js) .entete { background: rgba(233, 229, 220, .96); border-bottom-color: var(--e-filet); }
html:not(.js) .marque,
html:not(.js) .bouton-menu,
html:not(.js) .nav-bureau a { color: var(--t-principal); }
html:not(.js) .nav-bureau .btn { color: var(--s-blanc); }

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

@media print {
  .entete, .barre-action, .menu-mobile, .hero-voile { display: none !important; }
  body { background: #fff; color: #000; }
  .final, .pied { background: #fff; color: #000; }
}

.page-entete {
  padding-block: calc(var(--h-entete) + var(--sp-12)) var(--sp-8);
  background: var(--s-profond);
}
.page-entete h1 { max-width: 20ch; }
.page-entete .mesure { color: var(--t-secondaire); }
.page-claustra { opacity: .8; }

.galerie-groupe { padding-block: var(--sp-12); }
.galerie-groupe + .galerie-groupe { border-top: 1px solid var(--e-filet); }
.galerie-titre { margin-bottom: var(--sp-6); }

.galerie-grille { columns: 1; column-gap: var(--sp-3); }
.galerie-item {
  display: block; width: 100%; padding: 0; margin: 0 0 var(--sp-3);
  background: none; border: 0; cursor: zoom-in;
  break-inside: avoid;
  border-radius: var(--r-angle); overflow: hidden;
}
.galerie-item img {
  width: 100%; height: auto;
  transition: opacity .2s ease;
}
.galerie-item:hover img { opacity: .88; }

@media (min-width: 600px) { .galerie-grille { columns: 2; } }
@media (min-width: 980px) { .galerie-grille { columns: 3; } }

.visionneuse {
  position: fixed; inset: 0; z-index: 300;
  display: flex; flex-direction: column;
  background: rgba(42, 35, 32, .96);
  color: var(--t-inverse);
  padding: var(--sp-3);
}
.visionneuse[hidden] { display: none; }

.visionneuse-haut { display: flex; justify-content: flex-end; }
.visionneuse-scene {
  flex: 1; display: flex; align-items: center; justify-content: center;
  min-height: 0; padding-block: var(--sp-2);
}
.visionneuse-scene img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto; object-fit: contain;
  background: none; border-radius: var(--r-angle);
}
.visionneuse-bas {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-2) calc(var(--sp-2) + env(safe-area-inset-bottom));
  font-size: var(--fs-legende);
}
.visionneuse-legende { flex: 1; color: rgba(242,233,220,.82); }
.visionneuse-compteur { color: rgba(242,233,220,.6); white-space: nowrap; }
.visionneuse-nav { display: flex; gap: var(--sp-2); }

.bouton-rond {
  width: 48px; height: 48px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; color: inherit; cursor: pointer;
  border: 1px solid rgba(242,233,220,.35);
  border-radius: var(--r-angle);
  transition: background-color .18s ease, border-color .18s ease;
}
.bouton-rond:hover { background: rgba(242,233,220,.12); border-color: var(--c-bois); }
.visionneuse-haut .bouton-rond { border-color: transparent; }

.etapes { display: grid; gap: var(--sp-8); margin-top: var(--sp-8); counter-reset: etape; }
.etape { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-4); align-items: start; }
.etape::before {
  counter-increment: etape; content: counter(etape);
  display: flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; flex: none;
  font-family: var(--f-titre); font-size: 1.125rem; font-weight: 600;
  color: var(--t-inverse); background: var(--c-cedre);
  border-radius: var(--r-angle);
}
.etape h3 { margin-bottom: var(--sp-2); }

.autour { display: grid; gap: var(--sp-8); margin-top: var(--sp-8); }
.autour-item { border-radius: 0; }
.autour-item h3 { margin-bottom: var(--sp-2); }
.autour-distance {
  display: inline-block; margin-bottom: var(--sp-2);
  font-size: var(--fs-suralignee); font-weight: 500;
  letter-spacing: var(--ls-suralignee); text-transform: uppercase;
  color: var(--c-cedre);
}

@media (min-width: 720px) { .autour { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-8) var(--sp-12); } }

.faq { margin-top: var(--sp-8); max-width: 46rem; }
.faq details { border-bottom: 1px solid var(--e-filet); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding-block: var(--sp-4);
  font-family: var(--f-titre); font-size: var(--fs-h3); font-weight: 600;
  line-height: 1.3; cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 12px; height: 12px;
  border-right: 1.5px solid var(--t-secondaire);
  border-bottom: 1.5px solid var(--t-secondaire);
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.faq summary:hover { color: var(--t-lien); }
.faq-reponse { padding-bottom: var(--sp-6); max-width: var(--l-texte); }

.contact-grille { display: grid; gap: var(--sp-4); margin-top: var(--sp-8); }
.contact-carte {
  display: flex; align-items: flex-start; gap: var(--sp-4);
  padding: var(--sp-6);
  background: var(--s-page);
  border: 1px solid var(--e-filet);
  border-radius: var(--r-angle);
  text-decoration: none; color: var(--t-principal);
  transition: border-color .18s ease, background-color .18s ease;
}
.section-profonde .contact-carte { background: var(--s-page); }
.contact-carte:hover { border-color: var(--c-terracotta); background: var(--s-profond); }
.contact-carte .icone { width: 28px; height: 28px; stroke: var(--c-cedre); margin-top: 2px; }
.contact-titre { display: block; font-weight: 500; margin-bottom: 2px; }
.contact-detail { display: block; font-size: var(--fs-legende); color: var(--t-secondaire); }

@media (min-width: 720px) { .contact-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.erreur { padding-block: calc(var(--h-entete) + var(--sp-24)) var(--sp-24); text-align: center; }
.erreur h1 { margin-inline: auto; max-width: 18ch; }
.erreur .actions { justify-content: center; margin-top: var(--sp-8); }

@media print {
  .visionneuse { display: none !important; }
  .galerie-grille { columns: 2; }
}

h1, h2, h3, .pied-marque { text-wrap: balance; }

p, .faq-reponse li { text-wrap: pretty; }

.chiffre-valeur, .avis-carte blockquote { font-variant-numeric: oldstyle-nums; }

::selection { background: var(--c-bois); color: var(--s-nuit); }
.sur-sombre ::selection { background: var(--c-bois); color: var(--s-nuit); }

html { scrollbar-color: var(--e-filet-fort) var(--s-page); }

ul[role="list"] { list-style: none; padding: 0; margin: 0; }

.visionneuse-scene { touch-action: pan-y; user-select: none; }
.visionneuse-scene img { transition: opacity .15s ease; }
.visionneuse.est-en-charge .visionneuse-scene img { opacity: .35; }

@media (min-width: 900px) {
  .visionneuse-nav .bouton-rond {
    position: fixed; top: 50%; transform: translateY(-50%);
    width: 56px; height: 56px;
    background: rgba(42, 35, 32, .55);
  }
  .visionneuse-nav [data-action="precedent"] { left: var(--sp-6); }
  .visionneuse-nav [data-action="suivant"]   { right: var(--sp-6); }
}

@media print {
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .75em; word-break: break-all; }
  a[href^="#"]::after, .btn::after { content: none; }
}

.carte {
  position: relative;
  aspect-ratio: 16 / 10;
  margin-top: var(--sp-6);
  border: 1px solid var(--e-filet);
  border-radius: var(--r-angle);
  overflow: hidden;
  background: var(--s-profond);
}
.carte iframe { display: block; width: 100%; height: 100%; border: 0; }

.carte-appel {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-6);
  background: var(--s-profond);
  border: 0; cursor: pointer; text-align: center;
  font: inherit; color: var(--t-principal);
  transition: background-color .18s ease;
}
.carte-appel:hover { background: #D6CFC0; }
.carte-appel::before {
  content: ""; width: 100%; max-width: 260px; height: var(--cl-hauteur);
  margin-bottom: var(--sp-2);
  background-image: repeating-linear-gradient(to right,
    var(--c-bois) 0 var(--cl-latte), transparent var(--cl-latte) var(--cl-pas));
}
.carte-titre {
  font-family: var(--f-titre); font-size: var(--fs-h3); font-weight: 600;
}
.carte-note {
  max-width: 34ch; font-size: var(--fs-legende); color: var(--t-secondaire);
}

@media (max-width: 599px) { .carte { aspect-ratio: 4 / 3; } }
@media print { .carte { display: none; } }

.langues {
  display: flex; align-items: center; gap: var(--sp-1);
  font-size: .8125rem; letter-spacing: .02em;
  white-space: nowrap;
}
.langues a {
  padding: .35rem .4rem;
  color: var(--t-inverse); text-decoration: none;
  opacity: .72;
  text-shadow: 0 1px 12px rgba(42,35,32,.55);
  transition: opacity .18s ease, color .25s ease;
}
.langues a:hover { opacity: 1; }
.langues a[aria-current] { opacity: 1; text-decoration: underline;
                           text-underline-offset: 5px; text-decoration-thickness: 1.5px; }
.langues span { opacity: .38; }
.entete.est-posee .langues a { color: var(--t-principal); text-shadow: none; }
.entete.est-posee .langues span { color: var(--t-secondaire); }
html:not(.js) .entete .langues a { color: var(--t-principal); text-shadow: none; }

.langues a[lang="ar"] { font-size: 1.05rem; line-height: 1; padding-block: .1rem; }

.menu-mobile .langues { margin-top: var(--sp-6); font-size: 1rem; }
.menu-mobile .langues a { color: var(--t-inverse); opacity: .8; padding: .5rem .6rem; }
.menu-mobile .langues a[aria-current] { opacity: 1; color: var(--c-bois); }

@media (max-width: 419px) {
  .marque { font-size: .9375rem; }
  .langues { font-size: .75rem; gap: 0; }
}

:root {
  --f-titre-ar: "Amiri", "Noto Naskh Arabic", "Times New Roman", serif;
  --f-texte-ar: "SF Arabic", "Segoe UI", "Noto Sans Arabic", "Geeza Pro", Tahoma, sans-serif;
}

[lang="ar"] body, [dir="rtl"] body { font-family: var(--f-texte-ar); line-height: 1.9; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] .pied-marque,
[dir="rtl"] .avis-carte blockquote, [dir="rtl"] .chiffre-valeur, [dir="rtl"] .marque,
[dir="rtl"] .menu-liens a, [dir="rtl"] .faq summary, [dir="rtl"] .carte-titre {
  font-family: var(--f-titre-ar);
  line-height: 1.35;
  letter-spacing: 0;            
}

[dir="rtl"] .surlignee,
[dir="rtl"] .langues { letter-spacing: 0; text-transform: none; }

[dir="rtl"] .saut-contenu { left: auto; right: var(--l-marge); }
[dir="rtl"] .bouton-menu  { margin-right: 0; margin-left: -12px; }
[dir="rtl"] .menu-fermer  { margin-right: 0; margin-left: -12px; }
[dir="rtl"] .menu-haut    { justify-content: flex-start; }

[dir="rtl"] .claustra-bord {
  padding-left: 0; padding-right: var(--sp-6);
  background-position: right;
}

[dir="rtl"] .etape { grid-template-columns: auto 1fr; }

[dir="rtl"] .faq summary::after { transform: rotate(135deg) translate(-3px, -3px); }
[dir="rtl"] .faq details[open] summary::after { transform: rotate(-45deg) translate(-2px, -2px); }

@media (min-width: 900px) {
  [dir="rtl"] .visionneuse-nav [data-action="precedent"] { left: auto; right: var(--sp-6); }
  [dir="rtl"] .visionneuse-nav [data-action="suivant"]   { right: auto; left: var(--sp-6); }
}
[dir="rtl"] .visionneuse-nav .icone { transform: scaleX(-1); }

[dir="rtl"] .chiffre-valeur, [dir="rtl"] .avis-carte blockquote {
  font-variant-numeric: normal;
}

[dir="rtl"] .chiffre-valeur,
[dir="rtl"] .repere-distance,
[dir="rtl"] .autour-distance,
[dir="rtl"] .visionneuse-compteur {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: right;
}