@charset "utf-8";
/* =========================================================================
   Les Dars de Marrakech
   Palette échantillonnée sur les photos réelles de Dar Djinou.
   Mobile d'abord. Aucune dépendance, aucun framework.
   ========================================================================= */

/* ---------- Polices, hébergées en local ---------- */
/* Titres : Bodoni Moda, didone à fort contraste, axe optique 6 à 96.
   Corps  : Karla, grotesque à détails un peu rêches, chaleureuse en petit corps.
   Les deux sont servies depuis ce domaine, aucune requête vers Google. */
@font-face{font-family:Bodoni;font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/fonts/bodoni-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:Bodoni;font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/fonts/bodoni-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,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}
@font-face{font-family:Karla;font-style:normal;font-weight:300 700;font-display:swap;
  src:url(/fonts/karla-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:Karla;font-style:normal;font-weight:300 700;font-display:swap;
  src:url(/fonts/karla-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,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}

/* ---------- Jetons ---------- */
:root{
  /* échantillonnés au quantize sur les 23 photos */
  --sable-clair:#FBF7F0; --sable:#F4ECE0; --sable-fonce:#E6D9C6; --lin:#D8C7AF;
  --terracotta:#A34B34; --terracotta-vif:#C4603F; --brique:#5B2C1F;
  --rose:#DEB6A4; --safran:#E0A32E;
  --olive:#6E7A4B; --vert-eau:#597A71; --bleu:#3A5264; --prune:#865E82;
  --encre:#2A1C16; --encre-doux:#6B564A; --encre-tres-doux:#786454;

  --fond:var(--sable-clair); --fond-alt:var(--sable); --fond-creux:var(--sable-fonce);
  --texte:var(--encre); --texte-doux:var(--encre-doux); --texte-faible:var(--encre-tres-doux);
  --accent:var(--terracotta); --accent-vif:var(--terracotta-vif);
  --trait:color-mix(in oklab,var(--encre) 14%,transparent);
  --trait-fort:color-mix(in oklab,var(--encre) 26%,transparent);
  --carte:#fff;

  --serif:Bodoni,'Bodoni MT','Didot','Playfair Display',Georgia,serif;
  --sans:Karla,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  --marge:clamp(1.15rem,5vw,4.5rem);
  --large:78rem;      /* colonne large : galeries, grilles */
  --lecture:38rem;    /* colonne de lecture : jamais plus */
  --rythme:clamp(3.5rem,9vw,7.5rem);

  --r-s:6px; --r-m:14px; --r-l:26px;
  --ombre-s:0 1px 2px rgb(42 28 22/.05),0 4px 14px -6px rgb(42 28 22/.10);
  --ombre-m:0 2px 6px rgb(42 28 22/.06),0 18px 44px -20px rgb(42 28 22/.22);
  --ombre-l:0 30px 80px -34px rgb(42 28 22/.42);
  --transition:420ms cubic-bezier(.22,.61,.36,1);
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme=clair]){
    --fond:#17100C; --fond-alt:#1F1610; --fond-creux:#281C14;
    --texte:#F3E9DB; --texte-doux:#C4B2A0; --texte-faible:#9A8674;
    --accent:#D9765A; --accent-vif:#E68A6A;
    --trait:color-mix(in oklab,#F3E9DB 14%,transparent);
    --trait-fort:color-mix(in oklab,#F3E9DB 28%,transparent);
    --carte:#22180F;
    --ombre-s:0 1px 2px rgb(0 0 0/.4),0 4px 14px -6px rgb(0 0 0/.5);
    --ombre-m:0 2px 6px rgb(0 0 0/.4),0 18px 44px -20px rgb(0 0 0/.7);
    --ombre-l:0 30px 80px -34px rgb(0 0 0/.85);
  }
}
:root[data-theme=sombre]{
  --fond:#17100C; --fond-alt:#1F1610; --fond-creux:#281C14;
  --texte:#F3E9DB; --texte-doux:#C4B2A0; --texte-faible:#9A8674;
  --accent:#D9765A; --accent-vif:#E68A6A;
  --trait:color-mix(in oklab,#F3E9DB 14%,transparent);
  --trait-fort:color-mix(in oklab,#F3E9DB 28%,transparent);
  --carte:#22180F;
}

/* ---------- Remise à plat ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5rem}
body{
  margin:0;background:var(--fond);color:var(--texte);
  font-family:var(--sans);font-size:clamp(1rem,.96rem + .22vw,1.1rem);
  line-height:1.65;font-weight:400;letter-spacing:.001em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,picture,video,svg{display:block;max-width:100%}
button,input,textarea,select{font:inherit;color:inherit}
a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:from-font}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px;border-radius:2px}
::selection{background:var(--rose);color:var(--brique)}
hr{border:0;border-top:1px solid var(--trait);margin:var(--rythme) 0}

h1,h2,h3,h4{
  font-family:var(--serif);font-weight:500;line-height:1.12;
  letter-spacing:-.005em;margin:0 0 .5em;text-wrap:balance;
  font-variation-settings:'opsz' 40;
}
/* opsz monte avec la taille : au-dessus de 3rem les deliees s'affinent
   d'elles-memes, en dessous elles s'epaississent pour rester lisibles. */
h1{font-size:clamp(2.35rem,1.4rem + 4.5vw,5rem);font-weight:400;
   line-height:1.02;letter-spacing:-.012em;font-variation-settings:'opsz' 96}
h2{font-size:clamp(1.85rem,1.25rem + 2.7vw,3.3rem);font-weight:400;
   line-height:1.08;letter-spacing:-.008em;font-variation-settings:'opsz' 72}
h3{font-size:clamp(1.3rem,1.08rem + 1vw,1.85rem);font-variation-settings:'opsz' 28}
h4{font-size:clamp(1.05rem,1rem + .45vw,1.25rem);font-variation-settings:'opsz' 16}
p{margin:0 0 1.15em;text-wrap:pretty}
p:last-child{margin-bottom:0}

.sur-titre{
  font-family:var(--sans);font-size:.74rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--accent);
  margin:0 0 1.1rem;display:flex;align-items:center;gap:.7rem;
}
.sur-titre::before{content:"";width:1.8rem;height:1px;background:currentColor;flex:none}
.chapeau{
  font-size:clamp(1.1rem,1rem + .6vw,1.42rem);line-height:1.5;
  color:var(--texte-doux);max-width:34ch;
}

/* ---------- Structure ---------- */
.section{padding-block:var(--rythme);position:relative}
.section--alt{background:var(--fond-alt)}
.section--creux{background:var(--fond-creux)}
.section--sombre{background:var(--brique);color:var(--sable-clair);--texte:var(--sable-clair);--texte-doux:#D8BFAF;--trait:rgb(255 255 255/.16)}
.contenu{width:100%;max-width:var(--large);margin-inline:auto;padding-inline:var(--marge)}
.contenu--lecture{max-width:calc(var(--lecture) + 2 * var(--marge))}
.pleine{width:100%}
.entete-section{max-width:46rem;margin-bottom:clamp(2rem,4vw,3.4rem)}
.duo{display:grid;gap:clamp(1.6rem,4vw,3.5rem)}
@media (min-width:56rem){
  .duo{grid-template-columns:1fr 1fr;align-items:center}
  .duo--large-droite{grid-template-columns:5fr 7fr}
  .duo--large-gauche{grid-template-columns:7fr 5fr}
}
.grille{display:grid;gap:clamp(.8rem,2vw,1.4rem)}
@media (min-width:40rem){
  .grille--2{grid-template-columns:repeat(2,1fr)}
  .grille--3{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:56rem){.grille--3{grid-template-columns:repeat(3,1fr)}}

.saut-contenu{
  position:absolute;left:.6rem;top:.6rem;z-index:200;
  background:var(--accent);color:#fff;padding:.7rem 1.1rem;border-radius:var(--r-s);
  transform:translateY(-160%);transition:transform 180ms;
}
.saut-contenu:focus{transform:none}

/* ---------- L'arche : le motif de la maison ---------- */
/* Toutes les têtes de lit de Dar Djinou sont des arches peintes. */
.arche{clip-path:url(#arche-ronde)}
.arche-pointue{clip-path:url(#arche-pointue)}
.cadre-arche{
  border:1px solid var(--trait-fort);
  border-radius:50% 50% var(--r-m) var(--r-m) / 30% 30% var(--r-m) var(--r-m);
  padding:clamp(1.4rem,4vw,2.6rem);
}

/* ---------- Photos ---------- */
.photo{
  margin:0;position:relative;overflow:hidden;border-radius:var(--r-m);
  background-color:var(--teinte,var(--fond-creux));
  background-image:var(--lqip);background-size:cover;background-position:center;
  aspect-ratio:var(--ratio,1.5);
}
/* <picture> est inline par defaut : sans hauteur definie, le height:100% de
   l'image ne se resout pas et la photo garde son ratio propre au lieu de
   remplir le cadre. Il faut le dimensionner explicitement. */
.photo picture{display:block;width:100%;height:100%}
.photo img{width:100%;height:100%;object-fit:cover}
/* Le fondu n'est appliqué que si le script tourne : sans lui, l'image
   reste visible. Un placeholder flou bloqué serait une panne silencieuse. */
html.js .photo img{opacity:0;transition:opacity 600ms ease}
html.js .photo img.chargee{opacity:1}
.photo figcaption{
  position:absolute;inset:auto 0 0 0;padding:2.4rem 1rem .85rem;
  font-size:.86rem;color:#fff;letter-spacing:.01em;
  background:linear-gradient(transparent,rgb(20 12 8/.72));
  opacity:0;transform:translateY(.5rem);transition:var(--transition);
}
.photo:hover figcaption,.photo:focus-within figcaption{opacity:1;transform:none}
.photo--haute{aspect-ratio:3/4}
.photo--carree{aspect-ratio:1}
.photo--large{aspect-ratio:16/9}

/* ---------- Carte à inclinaison 3D ---------- */
.scene{perspective:1400px}
.carte3d{
  transform-style:preserve-3d;will-change:transform;
  transition:transform 600ms cubic-bezier(.22,.61,.36,1),box-shadow 600ms;
  box-shadow:var(--ombre-m);border-radius:var(--r-m);
}
@media (hover:hover) and (pointer:fine){
  .carte3d{transition:transform 120ms linear,box-shadow 400ms}
  .carte3d:hover{box-shadow:var(--ombre-l)}
  .carte3d:hover .photo img{transform:scale(1.045)}
  .carte3d .photo img{transition:opacity 700ms ease,transform 900ms cubic-bezier(.22,.61,.36,1)}
}
.carte3d__profondeur{transform:translateZ(38px)}

/* ---------- Boutons ---------- */
.bouton{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.95rem 1.65rem;border-radius:999px;border:1px solid transparent;
  font-weight:500;font-size:.98rem;letter-spacing:.005em;
  text-decoration:none;cursor:pointer;position:relative;overflow:hidden;
  transition:transform 240ms,background-color 240ms,color 240ms,border-color 240ms,box-shadow 240ms;
}
.bouton:active{transform:translateY(1px)}
.bouton--plein{background:var(--accent);color:#fff;box-shadow:0 10px 26px -12px var(--accent)}
.bouton--plein:hover{background:var(--accent-vif);box-shadow:0 16px 34px -12px var(--accent)}
.bouton--trait{border-color:var(--trait-fort);color:var(--texte)}
.bouton--trait:hover{border-color:var(--accent);color:var(--accent)}
.bouton--fantome{padding-inline:0;border-radius:0;border-width:0 0 1px 0;
  border-bottom-color:var(--trait-fort);border-style:solid}
.bouton--fantome:hover{border-bottom-color:var(--accent);color:var(--accent)}
.bouton--clair{color:#fff;border-bottom-color:rgb(255 255 255/.5)}
.bouton--clair:hover{color:#fff;border-bottom-color:#fff}
.bouton svg{width:1.05em;height:1.05em;flex:none}
.groupe-boutons{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}

/* ---------- En-tête ---------- */
.entete{
  position:fixed;inset:0 0 auto 0;z-index:100;
  display:flex;align-items:center;gap:1rem;
  padding:.9rem var(--marge);
  color:#fff;transition:background-color 380ms,color 380ms,box-shadow 380ms,padding 380ms;
}
.entete::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(rgb(20 12 8/.55),transparent);
  transition:opacity 380ms;
}
.entete[data-fige]{
  background:color-mix(in oklab,var(--fond) 88%,transparent);
  backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);
  color:var(--texte);box-shadow:0 1px 0 var(--trait);padding-block:.65rem;
}
.entete[data-fige]::before{opacity:0}
.entete__marque{
  font-family:var(--serif);font-size:1.2rem;font-weight:500;letter-spacing:.01em;
  text-decoration:none;line-height:1.1;font-variation-settings:'opsz' 20;
  margin-right:auto;display:flex;align-items:center;gap:.55rem;
}
.entete__marque small{display:block;font-family:var(--sans);font-size:.6rem;
  letter-spacing:.22em;text-transform:uppercase;opacity:.72}
.nav{display:none}
.nav a{text-decoration:none;font-size:.94rem;padding:.35rem 0;position:relative}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:currentColor;transition:right 320ms}
.nav a:hover::after,.nav a[aria-current=page]::after{right:0}
@media (min-width:62rem){
  .nav{display:flex;gap:clamp(1.1rem,2.2vw,2.1rem);align-items:center}
  .burger{display:none}
}
.entete__actions{display:flex;align-items:center;gap:.6rem}
.langue{display:flex;gap:.3rem;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase}
.langue a{text-decoration:none;opacity:.55;padding:.2rem .12rem}
.langue a[aria-current]{opacity:1;font-weight:600}
.burger{
  display:grid;place-items:center;width:2.6rem;height:2.6rem;
  background:none;border:1px solid currentColor;border-radius:999px;cursor:pointer;
}
.burger span{display:block;width:1rem;height:1px;background:currentColor;
  transition:transform 300ms,opacity 200ms}
.burger span+span{margin-top:4px}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
@media (min-width:62rem){.burger{display:none}}

.tiroir{
  position:fixed;inset:0;z-index:99;background:var(--fond);
  padding:6rem var(--marge) 2.5rem;
  display:flex;flex-direction:column;gap:.2rem;
  transform:translateY(-100%);transition:transform 520ms cubic-bezier(.7,0,.2,1);
  overflow-y:auto;
}
.tiroir[data-ouvert]{transform:none}
.tiroir a{
  font-family:var(--serif);font-size:clamp(1.6rem,7vw,2.4rem);
  text-decoration:none;padding:.28em 0;border-bottom:1px solid var(--trait);
  display:flex;justify-content:space-between;align-items:baseline;
}
.tiroir a span{font-family:var(--sans);font-size:.72rem;color:var(--texte-faible);letter-spacing:.1em}

/* ---------- Héros ---------- */
.heros{
  position:relative;min-height:100svh;display:grid;align-items:end;
  isolation:isolate;overflow:clip;
}
.heros__fond{position:absolute;inset:0;z-index:-2;overflow:hidden}
.heros__fond .photo{border-radius:0;height:100%;width:100%;aspect-ratio:auto}
.heros__fond img{animation:respire 26s ease-in-out infinite alternate;transform-origin:58% 62%}
@keyframes respire{from{transform:scale(1.02)}to{transform:scale(1.13)}}
.heros::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(120% 80% at 50% 0%,transparent 38%,rgb(20 12 8/.44) 100%),
    linear-gradient(transparent 24%,rgb(20 12 8/.40) 56%,rgb(20 12 8/.84) 100%);
}
/* Sur mobile le bloc de texte est haut : il lui faut un voile plus tot,
   sinon le titre se pose sur un mur terracotta en plein soleil. */
@media (max-width:52rem){
  .heros::after{background:linear-gradient(
    rgb(20 12 8/.34) 0%,rgb(20 12 8/.10) 20%,rgb(20 12 8/.56) 56%,rgb(20 12 8/.9) 100%)}
}
.heros__corps{
  color:#fff;padding:0 var(--marge) clamp(3.2rem,9vh,6rem);
  width:100%;max-width:var(--large);margin-inline:auto;
}
.heros h1{
  font-size:clamp(2.6rem,1.1rem + 7.4vw,6.4rem);
  text-shadow:0 2px 40px rgb(20 12 8/.35);margin-bottom:.3em;max-width:14ch;
}
.heros .chapeau{color:rgb(255 255 255/.9);max-width:32ch;
  text-shadow:0 1px 20px rgb(20 12 8/.5)}
.heros .sur-titre{color:var(--rose)}
.heros__pied{
  display:flex;flex-wrap:wrap;gap:1rem 1.8rem;align-items:center;
  margin-top:clamp(1.6rem,4vh,2.6rem);
}
.heros__descendre{
  position:absolute;left:50%;bottom:1rem;translate:-50% 0;z-index:2;
  width:1px;height:2.6rem;background:rgb(255 255 255/.4);overflow:hidden;
}
.heros__descendre::after{content:"";position:absolute;inset:0;background:#fff;
  animation:descendre 2.4s cubic-bezier(.7,0,.3,1) infinite}
@keyframes descendre{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

/* La marque en filigrane derrière le titre du héros */
.heros__filigrane{
  position:absolute;right:calc(var(--marge) * -.2);top:18vh;z-index:-1;
  font-family:var(--serif);font-size:min(26vw,17rem);line-height:.8;
  color:rgb(255 255 255/.07);letter-spacing:-.04em;pointer-events:none;
  writing-mode:vertical-rl;
}
@media (max-width:52rem){.heros__filigrane{display:none}}

/* ---------- Bandeau de notes ---------- */
.notes{
  display:flex;flex-wrap:wrap;gap:.5rem 2.2rem;align-items:center;
  padding:1.05rem var(--marge);background:var(--brique);color:var(--sable-clair);
  font-size:.9rem;justify-content:center;text-align:center;
}
.notes strong{font-family:var(--serif);font-size:1.28rem;font-weight:400;margin-right:.35rem}
.notes__etoiles{color:var(--safran);letter-spacing:.12em}
.notes a{color:var(--rose)}

/* ---------- Chiffres ---------- */
.chiffres{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--trait);
  border-block:1px solid var(--trait)}
@media (min-width:52rem){.chiffres{grid-template-columns:repeat(4,1fr)}}
.chiffre{background:var(--fond);padding:clamp(1.3rem,3.5vw,2.2rem) 1rem;text-align:center}
.chiffre dt{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--texte-faible);margin-bottom:.45rem}
.chiffre dd{margin:0;font-family:var(--serif);font-size:clamp(1.7rem,4.5vw,2.6rem);
  line-height:1;font-variation-settings:'opsz' 60}
.chiffre dd small{font-family:var(--sans);font-size:.42em;color:var(--texte-doux);
  display:block;margin-top:.5rem;letter-spacing:.01em;line-height:1.4}

/* ---------- Mosaïque de galerie ---------- */
.mosaique{display:grid;gap:clamp(.5rem,1.5vw,1rem);grid-template-columns:repeat(2,1fr)}
@media (min-width:52rem){.mosaique{grid-template-columns:repeat(4,1fr)}}
.mosaique .photo{aspect-ratio:1;border-radius:var(--r-s)}
.mosaique .photo:nth-child(6n+1){grid-column:span 2;aspect-ratio:1}
@media (min-width:52rem){
  .mosaique .photo:nth-child(6n+1){grid-column:span 2;grid-row:span 2;aspect-ratio:1}
}

/* ---------- Travelling horizontal ---------- */
.travelling{
  display:flex;gap:clamp(.8rem,2vw,1.6rem);overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scrollbar-width:none;
  padding-inline:var(--marge);padding-block:.6rem 1.4rem;
}
.travelling::-webkit-scrollbar{display:none}
.travelling>*{scroll-snap-align:center;flex:0 0 min(78vw,26rem)}
@media (min-width:62rem){.travelling>*{flex-basis:min(38vw,30rem)}}

/* ---------- Espaces de la maison ---------- */
.espace{position:relative;border-radius:var(--r-m);overflow:hidden;background:var(--carte)}
.espace__texte{padding:clamp(1.1rem,3vw,1.7rem)}
.espace h3{margin-bottom:.35em}
.espace p{color:var(--texte-doux);font-size:.96rem}
.espace__puce{
  display:inline-block;width:.6rem;height:.6rem;border-radius:999px;
  background:var(--puce,var(--accent));margin-right:.5rem;vertical-align:.05em;
}

/* ---------- Équipements ---------- */
.equipements{display:grid;gap:clamp(1.6rem,4vw,2.6rem)}
@media (min-width:44rem){.equipements{grid-template-columns:repeat(2,1fr)}}
@media (min-width:68rem){.equipements{grid-template-columns:repeat(3,1fr)}}
.equipement h4{font-family:var(--sans);font-size:.76rem;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--accent);margin-bottom:.9rem;
  padding-bottom:.6rem;border-bottom:1px solid var(--trait)}
.equipement ul{list-style:none;margin:0;padding:0;display:grid;gap:.42rem}
.equipement li{font-size:.95rem;color:var(--texte-doux);padding-left:1.15rem;position:relative}
.equipement li::before{content:"";position:absolute;left:0;top:.66em;
  width:.42rem;height:.42rem;border-radius:999px;background:var(--lin)}
.absents li::before{background:none;content:"×";left:.1rem;top:0;font-size:1.05em;
  color:var(--texte-faible);width:auto;height:auto}

/* ---------- Avis ---------- */
.avis-grille{columns:1;column-gap:clamp(.9rem,2vw,1.4rem)}
@media (min-width:44rem){.avis-grille{columns:2}}
@media (min-width:68rem){.avis-grille{columns:3}}
.avis-carte{
  break-inside:avoid;margin-bottom:clamp(.9rem,2vw,1.4rem);
  background:var(--carte);border:1px solid var(--trait);border-radius:var(--r-m);
  padding:clamp(1.2rem,3vw,1.6rem);
}
.avis-carte blockquote{margin:0 0 1rem;font-size:.97rem;color:var(--texte-doux);line-height:1.62}
.avis-carte blockquote::before{content:"«\00a0";color:var(--lin)}
.avis-carte blockquote::after{content:"\00a0»";color:var(--lin)}
.avis-carte footer{font-size:.82rem;color:var(--texte-faible);display:flex;
  flex-wrap:wrap;gap:.2rem .6rem;align-items:baseline}
.avis-carte cite{font-style:normal;font-weight:600;color:var(--texte);font-size:.92rem}
.avis-carte[data-nuance]{border-left:3px solid var(--lin)}
.etiquette{
  display:inline-block;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.18rem .5rem;border-radius:999px;background:var(--fond-creux);color:var(--texte-faible);
}
.barres{display:grid;gap:.7rem;max-width:26rem}
.barre{display:grid;grid-template-columns:9rem 1fr auto;gap:.8rem;align-items:center;font-size:.88rem}
/* Les deux elements sont des <span> : sans display:block, width et height
   sont ignores et la jauge reste invisible. */
.barre__piste{display:block;height:4px;background:var(--trait);
  border-radius:999px;overflow:hidden}
.barre__jauge{display:block;height:100%;background:var(--accent);border-radius:999px;
  width:var(--part,0%);transform-origin:left}
@media (prefers-reduced-motion:no-preference){
  .barre__jauge{animation:remplir 950ms cubic-bezier(.22,.61,.36,1) both}
}
@keyframes remplir{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- Distances ---------- */
.distances{list-style:none;margin:0;padding:0;display:grid;gap:0}
.distances li{display:grid;grid-template-columns:1fr auto auto;gap:.6rem 1rem;
  align-items:baseline;padding:.85rem 0;border-bottom:1px solid var(--trait)}
.distances b{font-weight:500}
.distances span{font-variant-numeric:tabular-nums;color:var(--texte-doux);font-size:.92rem}
.distances em{font-style:normal;color:var(--texte-faible);font-size:.84rem}

/* ---------- Prose des articles ---------- */
.prose{max-width:var(--lecture);font-size:1.06rem;line-height:1.72}
.prose>*+*{margin-top:1.15em}
.prose h2{margin-top:2.1em;font-size:clamp(1.6rem,1.2rem + 1.6vw,2.35rem)}
.prose h3{margin-top:1.7em}
.prose ul,.prose ol{padding-left:1.25rem}
.prose li+li{margin-top:.42em}
.prose blockquote{
  margin-inline:0;padding:1.1rem 1.4rem;border-left:2px solid var(--accent);
  background:var(--fond-alt);border-radius:0 var(--r-s) var(--r-s) 0;
  font-size:1rem;color:var(--texte-doux);
}
.prose table{width:100%;border-collapse:collapse;font-size:.94rem}
.prose th,.prose td{text-align:left;padding:.62rem .7rem;border-bottom:1px solid var(--trait)}
.prose th{font-family:var(--sans);font-size:.74rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--texte-faible);font-weight:600}
.prose figure{margin-inline:0}
.tableau-defilant{overflow-x:auto;-webkit-overflow-scrolling:touch;
  margin-inline:calc(var(--marge) * -.5);padding-inline:calc(var(--marge) * .5)}
.tableau-defilant table{min-width:30rem}
.prose a{color:var(--accent);text-decoration-color:color-mix(in oklab,var(--accent) 40%,transparent)}
.prose a:hover{text-decoration-color:currentColor}

/* ---------- Questions ---------- */
.questions{border-top:1px solid var(--trait)}
.question{border-bottom:1px solid var(--trait)}
.question summary{
  cursor:pointer;list-style:none;padding:1.15rem 2.4rem 1.15rem 0;position:relative;
  font-family:var(--serif);font-size:clamp(1.05rem,1rem + .5vw,1.3rem);line-height:1.32;
}
.question summary::-webkit-details-marker{display:none}
.question summary::after{
  content:"";position:absolute;right:.35rem;top:1.55rem;width:.8rem;height:.8rem;
  border-right:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);
  transform:rotate(45deg);transition:transform 300ms;
}
.question[open] summary::after{transform:rotate(225deg);top:1.85rem}
.question__reponse{padding-bottom:1.4rem;color:var(--texte-doux);max-width:60ch}
.question__reponse>*+*{margin-top:.9em}

/* ---------- Cartes de lien ---------- */
.carte-lien{
  display:flex;flex-direction:column;background:var(--carte);border-radius:var(--r-m);
  overflow:hidden;border:1px solid var(--trait);text-decoration:none;height:100%;
  transition:border-color 300ms,transform 400ms,box-shadow 400ms;
}
.carte-lien:hover{border-color:var(--trait-fort);transform:translateY(-4px);box-shadow:var(--ombre-m)}
.carte-lien .photo{border-radius:0}
.carte-lien__texte{padding:clamp(1.05rem,2.6vw,1.5rem);display:flex;flex-direction:column;gap:.5rem;flex:1}
.carte-lien h3{font-size:clamp(1.15rem,1rem + .7vw,1.5rem);margin:0}
.carte-lien p{font-size:.93rem;color:var(--texte-doux);margin:0}
.carte-lien__meta{margin-top:auto;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--texte-faible);padding-top:.6rem}

/* ---------- Fil d'Ariane ---------- */
.fil{font-size:.82rem;color:var(--texte-faible);padding-top:clamp(5.5rem,12vh,7rem);
  display:flex;flex-wrap:wrap;gap:.4rem}
.fil a{text-decoration:none}
.fil a:hover{color:var(--accent)}
.fil span[aria-hidden]{opacity:.45}

/* ---------- Appel final ---------- */
.appel{
  position:relative;isolation:isolate;overflow:clip;color:#fff;
  padding-block:clamp(4.5rem,12vw,9rem);text-align:center;
}
.appel .photo{position:absolute;inset:0;z-index:-2;border-radius:0;height:100%;aspect-ratio:auto}
.appel::after{content:"";position:absolute;inset:0;z-index:-1;background:rgb(28 16 10/.58)}
.appel h2{font-size:clamp(2.1rem,1.4rem + 3.4vw,4rem);max-width:18ch;margin-inline:auto}
.appel .chapeau{color:rgb(255 255 255/.88);margin-inline:auto;max-width:44ch}

/* ---------- Pied ---------- */
.pied{background:var(--brique);color:var(--sable-clair);padding-block:clamp(3rem,7vw,5rem) 2rem;
  --texte:var(--sable-clair);--trait:rgb(255 255 255/.14)}
.pied__grille{display:grid;gap:2.4rem}
@media (min-width:52rem){.pied__grille{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.pied h4{font-family:var(--sans);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--rose);margin-bottom:1rem}
.pied ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.pied a{text-decoration:none;font-size:.93rem;color:rgb(255 255 255/.78)}
.pied a:hover{color:#fff}
.pied__bas{margin-top:2.8rem;padding-top:1.5rem;border-top:1px solid var(--trait);
  display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;font-size:.8rem;color:rgb(255 255 255/.55)}
.pied__marque{font-family:var(--serif);font-size:1.5rem;margin-bottom:.6rem}

/* ---------- Révélations au défilement ---------- */
@media (prefers-reduced-motion:no-preference){
  [data-reveler]{opacity:0;transform:translateY(1.6rem);
    transition:opacity 900ms cubic-bezier(.22,.61,.36,1),transform 900ms cubic-bezier(.22,.61,.36,1)}
  [data-reveler].vu{opacity:1;transform:none}
  [data-reveler][data-reveler=voile]{transform:none;clip-path:inset(0 0 100% 0)}
  [data-reveler][data-reveler=voile].vu{clip-path:inset(0 0 0 0);transition:clip-path 1100ms cubic-bezier(.66,0,.2,1),opacity 500ms}
  [data-decalage="1"]{transition-delay:90ms}
  [data-decalage="2"]{transition-delay:180ms}
  [data-decalage="3"]{transition-delay:270ms}
  [data-decalage="4"]{transition-delay:360ms}
  [data-decalage="5"]{transition-delay:450ms}
}

/* ---------- Sobriété de mouvement ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  .heros__fond img{animation:none;transform:scale(1.04)}
  .photo img{opacity:1}
}

/* ---------- Impression ---------- */
@media print{
  .entete,.tiroir,.heros__descendre,.appel,.burger{display:none}
  body{background:#fff;color:#000}
  .photo{break-inside:avoid}
}

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

/* ---------- Visionneuse ---------- */
.visionneuse{
  position:fixed;inset:0;z-index:200;display:none;
  grid-template-columns:auto 1fr auto;align-items:center;gap:.5rem;
  background:rgb(18 11 7/.94);backdrop-filter:blur(6px);padding:1rem;
}
.visionneuse[data-ouvert]{display:grid}
.visionneuse__scene{margin:0;display:grid;place-items:center;gap:1rem;min-width:0}
.visionneuse__scene img{max-width:100%;max-height:82svh;object-fit:contain;
  border-radius:var(--r-s);box-shadow:0 40px 100px -30px rgb(0 0 0/.8)}
.visionneuse figcaption{color:rgb(255 255 255/.72);font-size:.85rem;text-align:center;
  max-width:60ch}
.visionneuse button{
  background:rgb(255 255 255/.08);border:1px solid rgb(255 255 255/.18);color:#fff;
  width:2.9rem;height:2.9rem;border-radius:999px;cursor:pointer;font-size:1.35rem;line-height:1;
  display:grid;place-items:center;transition:background-color 200ms;
}
.visionneuse button:hover{background:rgb(255 255 255/.18)}
.visionneuse__fermer{position:absolute;top:1rem;right:1rem;z-index:2}
@media (max-width:40rem){
  .visionneuse{grid-template-columns:1fr;grid-template-rows:1fr auto}
  .visionneuse__nav{position:static}
  .visionneuse__scene{grid-row:1}
  .visionneuse__nav[data-pas="-1"]{grid-column:1;justify-self:start}
  .visionneuse__nav[data-pas="1"]{grid-column:1;grid-row:2;justify-self:end;margin-top:-2.9rem}
}

/* ---------- Extrait de guide payant ---------- */
.paywall{position:relative}
.paywall::after{
  content:"";position:absolute;inset:auto 0 0 0;height:9rem;pointer-events:none;
  background:linear-gradient(transparent,var(--fond) 88%);
}
.prix{
  font-family:var(--serif);font-size:clamp(2rem,1.5rem + 2vw,3rem);
  font-variation-settings:'opsz' 60;line-height:1;
}