/* =====================================================================
   Riad Soulmate — feuille de style (refonte du 01/11/2026)
   Les valeurs viennent de tokens.css ; ce fichier n'invente pas de couleur.
   ===================================================================== */

/* --- Polices auto-hébergées ------------------------------------------ */
@font-face{font-family:'Poppins';src:url('/assets/fonts/Poppins-300-latin.woff2') format('woff2');font-weight:300;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:'Poppins';src:url('/assets/fonts/Poppins-300-latin-ext.woff2') format('woff2');font-weight:300;font-display:swap;unicode-range:U+0100-02AF,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF}
@font-face{font-family:'Poppins';src:url('/assets/fonts/Poppins-400-latin.woff2') format('woff2');font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:'Poppins';src:url('/assets/fonts/Poppins-400-latin-ext.woff2') format('woff2');font-weight:400;font-display:swap;unicode-range:U+0100-02AF,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF}
@font-face{font-family:'Poppins';src:url('/assets/fonts/Poppins-500-latin.woff2') format('woff2');font-weight:500;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+20AC,U+2122}
/* 700 : la graisse des titres de l'accord 4. Sans elle, le navigateur fabriquait un faux gras. */
@font-face{font-family:'Poppins';src:url('/assets/fonts/Poppins-700-latin.woff2') format('woff2');font-weight:700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:'Source Sans 3';src:url('/assets/fonts/SourceSans3-300-latin.woff2') format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'Source Sans 3';src:url('/assets/fonts/SourceSans3-400-latin.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Source Sans 3';src:url('/assets/fonts/SourceSans3-600-latin.woff2') format('woff2');font-weight:600;font-display:swap}

/* --- Socle ------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5rem}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--fond);color:var(--texte);
  font:400 var(--t-corps)/1.65 var(--police-texte);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body[data-fige="true"]{overflow:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1px}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
strong{font-weight:600}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.sombre :focus-visible{outline-color:var(--accent-inverse)}
.visuellement-cache{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lien-evitement{position:absolute;left:1rem;top:-4rem;z-index:100;background:var(--fond);padding:.75rem 1rem}
.lien-evitement:focus{top:1rem}

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

/* --- Typographie ----------------------------------------------------- */
h1,h2,h3{font-family:var(--police-titre);font-weight:300;color:var(--titre);margin:0;
  letter-spacing:var(--serrage-titre);line-height:1.08;text-wrap:balance}
.geant{font-size:var(--t-geant)}
h1,.h1{font-size:var(--t-h1)}
h2,.h2{font-size:var(--t-h2)}
h3,.h3{font-size:var(--t-h3);letter-spacing:-.025em;line-height:1.2}
.chapo{font-size:var(--t-chapo);line-height:1.45;letter-spacing:-.01em}

/* La petite capitale espacée : navigation, étiquettes, boutons. */
.label,.nav a,.bouton{
  font-family:var(--police-titre);font-weight:500;font-size:var(--t-label);
  letter-spacing:var(--espacement-label);text-transform:uppercase;line-height:1.3;
}
.label{display:block;color:var(--accent);margin-bottom:1rem}
.sombre .label{color:var(--accent-inverse)}

/* --- Boutons --------------------------------------------------------- */
.bouton{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  min-height:2.75rem;padding:.8em 1.8em;border:1px solid currentColor;border-radius:999px;
  color:var(--accent);background:transparent;text-decoration:none;cursor:pointer;
  transition:background var(--duree) var(--courbe),color var(--duree) var(--courbe);
}
.bouton:hover{background:var(--accent);color:var(--fond);border-color:var(--accent)}
.bouton--plein{background:var(--accent);color:var(--fond);border-color:var(--accent)}
.bouton--plein:hover{background:var(--profond);border-color:var(--profond)}
.sombre .bouton{color:var(--accent-inverse)}
.sombre .bouton:hover,.sombre .bouton--plein{background:var(--accent-inverse);color:var(--profond);border-color:var(--accent-inverse)}
.sombre .bouton--plein:hover{background:var(--c-creme);border-color:var(--c-creme)}
.bouton[disabled]{opacity:.45;cursor:not-allowed}

/* --- Sections -------------------------------------------------------- */
.section{padding-block:var(--section)}
.sombre{background:var(--fond-sombre);color:var(--texte-inverse)}
.sombre h1,.sombre h2,.sombre h3{color:var(--texte-inverse)}
.sombre a{color:var(--texte-inverse)}

/* --- En-tête --------------------------------------------------------- */
.entete{position:absolute;inset:0 0 auto;z-index:20;color:var(--c-creme)}
.entete__interieur{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding-block:1.4rem}
.entete__marque img{width:7.5rem}
.nav{display:flex;gap:clamp(1.25rem,2.6vw,2.5rem)}
/* Sélecteur de langue (FR · EN · ES), toujours visible, même sur téléphone */
.langues{display:flex;gap:.15rem;margin-left:clamp(.75rem,2vw,2rem);font:500 .75rem/1 var(--police-titre);letter-spacing:.12em}
.langues a{text-decoration:none;color:inherit;opacity:.6;padding:.45rem .35rem;border-bottom:1px solid transparent}
.langues a:hover{opacity:1}
.langues a[aria-current="page"]{opacity:1;border-bottom-color:currentColor}
.nav a{text-decoration:none;color:inherit;padding-block:.4rem;border-bottom:1px solid transparent;transition:border-color var(--duree)}
.nav a:hover{border-bottom-color:currentColor}
.burger{display:none;background:none;border:0;color:inherit;padding:.5rem;margin-right:-.5rem;cursor:pointer}
.burger span{display:block;width:26px;height:1px;background:currentColor;margin:7px 0;transition:transform var(--duree)}
.burger[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}
.menu-mobile{position:fixed;inset:0;z-index:15;background:var(--profond);color:var(--c-creme);
  display:flex;flex-direction:column;justify-content:center;gap:1.5rem;padding:var(--gouttiere);
  opacity:0;visibility:hidden;transition:opacity var(--duree),visibility var(--duree)}
.menu-mobile[data-ouvert="true"]{opacity:1;visibility:visible}
.menu-mobile a{font-family:var(--police-titre);font-weight:300;font-size:2.25rem;letter-spacing:var(--serrage-titre);text-decoration:none}
@media (max-width:52rem){
  .nav{display:none}
  .burger{display:block;position:relative;z-index:25}
}

/* --- Ouverture ------------------------------------------------------- */
.ouverture{position:relative;height:100svh;min-height:34rem;max-height:62rem;color:var(--c-creme);overflow:hidden}
.ouverture picture,.ouverture picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ouverture__logo{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);width:min(24rem,62vw);
  filter:drop-shadow(0 2px 18px rgba(45,6,22,.35))}
.ouverture__pied{position:absolute;z-index:2;inset:auto 0 0;padding-bottom:1.75rem}
.ouverture__pied .contenu{display:flex;justify-content:space-between;align-items:end;gap:1rem}
.ouverture__pied p{margin:0}

/* --- Intention ------------------------------------------------------- */
.intention{display:grid;gap:clamp(2.5rem,5vw,5rem);align-items:start}
.intention__texte{max-width:34rem}
.intention__texte .chapo{color:var(--titre);margin-bottom:1.5rem}
/* Le chapeau d'intro est le H1 de la page : il garde l'allure d'un chapeau, pas celle d'un titre. */
h1.chapo{font-family:var(--police-texte);letter-spacing:-.01em;line-height:1.45;text-wrap:wrap}
.intention__texte p:not(.chapo){color:var(--texte-doux)}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.5rem,1.2vw,1rem)}
.trio img{aspect-ratio:4/5;object-fit:cover;width:100%}
@media (min-width:56rem){.intention{grid-template-columns:5fr 7fr}}
@media (max-width:40rem){.trio{grid-template-columns:1fr 1fr}.trio > img:last-child{display:none}}

/* --- La maison : grande phrase + quatre colonnes -------------------- */
.manifeste{max-width:22ch;margin-bottom:clamp(3rem,6vw,5rem)}
.colonnes{display:grid;gap:2.5rem 2rem;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}
.colonnes h3{margin-bottom:.9rem}
.colonnes p{color:var(--texte-doux);font-size:var(--t-petit)}

/* --- Photo + liste --------------------------------------------------- */
.duo{display:grid;gap:clamp(2rem,4vw,4rem);align-items:start}
.duo__photo img{width:100%;aspect-ratio:3/2;object-fit:cover}
.liste-fleurie{list-style:none;padding:0;margin:0 0 2.5rem}
.liste-fleurie li{padding:.7rem 0;border-bottom:1px solid var(--filet);display:flex;gap:.9rem;align-items:baseline}
.liste-fleurie li::before{content:"✶";color:var(--accent);font-size:.8em;flex:none}
.duo h2{margin-bottom:1.75rem}
@media (min-width:56rem){.duo{grid-template-columns:7fr 5fr}.duo--inverse{grid-template-columns:5fr 7fr}.duo--inverse .duo__photo{order:2}}

/* --- Les chambres : une galerie, pas un catalogue -------------------- */
.chambres__tete{display:grid;gap:1.5rem 4rem;margin-bottom:clamp(2.5rem,5vw,4rem);align-items:end}
@media (min-width:56rem){.chambres__tete{grid-template-columns:1fr 1fr}}
.chambres__tete p{color:var(--texte-doux);max-width:34rem}
.defile{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(15rem,1fr);gap:clamp(.5rem,1.2vw,1rem);
  overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:1rem;scrollbar-width:thin;scrollbar-color:var(--accent) transparent}
.defile figure{margin:0;scroll-snap-align:start}
.defile img{width:100%;aspect-ratio:3/4;object-fit:cover}
.defile figcaption{font-size:var(--t-petit);color:var(--texte-doux);margin-top:.75rem}
@media (max-width:40rem){.defile{grid-auto-columns:78%}}

/* --- Avis ------------------------------------------------------------ */
.avis__titre{text-align:center;margin-bottom:clamp(3rem,6vw,5rem)}
.avis__note{display:block;font-family:var(--police-titre);font-weight:300;font-size:var(--t-geant);letter-spacing:var(--serrage-titre);line-height:1;color:var(--accent-inverse)}
.avis__grille{display:grid;gap:3rem 2.5rem;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}
.avis blockquote{margin:0}
.avis blockquote p{font-family:var(--police-titre);font-weight:300;font-size:var(--t-h3);letter-spacing:-.025em;line-height:1.3}
.avis cite{display:block;margin-top:1rem;font-style:normal;font-size:var(--t-petit);opacity:.8}

/* --- Demande de séjour ----------------------------------------------- */
.demande__grille{display:grid;gap:clamp(2.5rem,5vw,5rem)}
@media (min-width:62rem){.demande__grille{grid-template-columns:4fr 8fr}}
.demande__intro p{opacity:.9}
.demande__intro .liste-fleurie li{border-color:var(--filet-inverse)}
.demande__intro .liste-fleurie li::before{color:var(--accent-inverse)}

.cal{border-top:1px solid var(--filet-inverse);padding-top:1.5rem}
.cal__barre{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.25rem}
.cal__nav{display:flex;gap:.5rem}
.cal__nav button{width:2.5rem;height:2.5rem;border-radius:50%;border:1px solid var(--filet-inverse);background:none;color:inherit;cursor:pointer;font-size:1rem}
.cal__nav button:hover:not([disabled]){border-color:var(--accent-inverse);color:var(--accent-inverse)}
.cal__nav button[disabled]{opacity:.3;cursor:default}
.cal__mois{display:grid;gap:2rem}
@media (min-width:40rem){.cal__mois{grid-template-columns:1fr 1fr}}
.cal__mois h3{font-size:1.125rem;margin-bottom:.75rem;text-transform:capitalize}
.cal table{width:100%;border-collapse:collapse;table-layout:fixed}
.cal th{font:500 .6875rem/1 var(--police-titre);letter-spacing:.12em;text-transform:uppercase;opacity:.6;padding:.4rem 0}
.cal td{padding:1px;text-align:center}
.cal td button{width:100%;aspect-ratio:1;max-height:3.1rem;border:0;background:none;color:inherit;font:400 .9375rem/1 var(--police-texte);cursor:pointer;border-radius:2px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:0}
.cal__prix{font-size:.62rem;line-height:1;opacity:.75;letter-spacing:0;font-variant-numeric:tabular-nums}
.cal td button.borne .cal__prix{opacity:1}
.cal__legende .l-prix::before{display:none}
.cal td button:hover:not([disabled]):not(.borne){background:rgba(242,231,218,.14)}
.cal td button[disabled]{cursor:default;opacity:.32}
.cal td button.complet{text-decoration:line-through;opacity:.4}
.cal td button.dans{background:rgba(229,192,125,.22)}
.cal td button.borne{background:var(--accent-inverse);color:var(--profond);font-weight:600;opacity:1;text-decoration:none}
.cal td button.aujourdhui{box-shadow:inset 0 -2px 0 var(--accent-inverse)}
.cal__legende{display:flex;flex-wrap:wrap;gap:1.25rem;font-size:.8125rem;opacity:.8;margin-top:1rem}
.cal__legende span::before{content:"";display:inline-block;width:.8rem;height:.8rem;margin-right:.45rem;vertical-align:-1px;border-radius:2px}
.cal__legende .l-libre::before{border:1px solid var(--filet-inverse)}
.cal__legende .l-complet::before{background:rgba(242,231,218,.2)}
.cal__legende .l-choix::before{background:var(--accent-inverse)}
.cal__note{margin:.4rem 0 0;font-size:.95rem;opacity:.8}
.cal__resume{min-height:1.6em;margin-top:1.25rem;font-family:var(--police-titre);font-weight:300;font-size:1.25rem;letter-spacing:-.02em}
.cal__demo{font-size:.8125rem;opacity:.65;margin-top:.5rem}

.formulaire{display:grid;gap:1.25rem 1.5rem;grid-template-columns:1fr 1fr;margin-top:2.5rem}
.formulaire .plein{grid-column:1/-1}
@media (max-width:36rem){.formulaire{grid-template-columns:1fr}}
.champ label{display:block;font:500 var(--t-label)/1.3 var(--police-titre);letter-spacing:var(--espacement-label);text-transform:uppercase;margin-bottom:.5rem;opacity:.85}
.champ input,.champ textarea,.champ select{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--filet-inverse);border-radius:0;
  color:inherit;font:400 1.0625rem/1.4 var(--police-texte);padding:.55rem 0;
}
.champ select option{color:var(--texte)}
.champ textarea{min-height:7rem;resize:vertical}
.champ input:focus,.champ textarea:focus,.champ select:focus{outline:none;border-bottom-color:var(--accent-inverse)}
.champ input::placeholder,.champ textarea::placeholder{color:inherit;opacity:.45}
.miel{position:absolute;left:-9999px}
.formulaire__envoi{display:flex;flex-wrap:wrap;gap:1rem 1.5rem;align-items:center}
.formulaire__envoi small{opacity:.7;font-size:.8125rem}
.message{padding:1rem 1.25rem;border:1px solid var(--accent-inverse);margin-top:1.5rem}
.message[hidden]{display:none}

/* --- Questions ------------------------------------------------------- */
.faq{display:grid;gap:2rem 4rem}
@media (min-width:56rem){.faq{grid-template-columns:5fr 7fr}}
.faq details{border-bottom:1px solid var(--filet)}
.faq details:first-of-type{border-top:1px solid var(--filet)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:1rem;padding:1.15rem 0;font-family:var(--police-titre);font-weight:300;font-size:1.125rem;letter-spacing:-.015em;color:var(--titre)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:300;transition:transform var(--duree)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--texte-doux);padding-bottom:1.25rem;max-width:40rem}

/* --- L'essentiel : fiche de faits courte (docs/14 §3.5) -------------- */
.essentiel{padding-bottom:0}
.essentiel h2{margin-bottom:2rem}
.essentiel__liste{margin:0;display:grid;border-top:1px solid var(--filet)}
@media (min-width:56rem){.essentiel__liste{grid-template-columns:1fr 1fr;column-gap:4rem}}
.essentiel__liste div{display:grid;gap:.25rem;padding:1rem 0;border-bottom:1px solid var(--filet)}
@media (min-width:40rem){.essentiel__liste div{grid-template-columns:9.5rem 1fr;gap:1.5rem;align-items:baseline}}
.essentiel__liste dt{font-family:var(--police-titre);font-weight:500;font-size:var(--t-label);letter-spacing:var(--espacement-label);text-transform:uppercase;line-height:1.3;color:var(--accent)}
.essentiel__liste dd{margin:0;color:var(--texte);font-size:1.0625rem;line-height:1.55}

/* --- Pied de page ---------------------------------------------------- */
.pied{padding-block:clamp(4rem,8vw,6rem) 2rem}
.pied__grille{display:grid;gap:2.5rem;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));align-items:start}
.pied__logo{width:12rem}
.pied p{font-size:var(--t-petit);opacity:.9}
.pied a{text-decoration:none;border-bottom:1px solid var(--filet-inverse)}
.pied a:hover{border-bottom-color:currentColor}
.pied__bas{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;margin-top:4rem;padding-top:1.5rem;border-top:1px solid var(--filet-inverse);font-size:.8125rem;opacity:.75}

/* --- Apparition douce ------------------------------------------------ */
.apparait{transition:opacity .9s var(--courbe),transform .9s var(--courbe)}
/* Le texte n'est masqué (en attendant l'apparition) que si le JS tourne : sans JS, tout reste lisible. */
.js .apparait{opacity:0;transform:translateY(18px)}
.js .apparait.vu{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .apparait{opacity:1;transform:none}}
/* Sans JS : pas de bouton de menu qui ne s'ouvre pas, pas de formulaire qui enverrait les coordonnées dans l'URL
   (le <noscript> du calendrier donne l'adresse e-mail). */
html:not(.js) .burger,html:not(.js) .formulaire{display:none}

/* --- Ouverture en diptyque (le reportage est entièrement vertical) --- */
.ouverture__photos{position:absolute;inset:0;display:grid;grid-template-columns:1fr}
.ouverture__photos img{width:100%;height:100%;object-fit:cover}
.ouverture__seconde{display:none}
@media (min-width:48rem){
  .ouverture__photos{grid-template-columns:1fr 1fr}
  .ouverture__seconde{display:block}
}
.bandeau{margin-bottom:var(--section)}
.bandeau img{aspect-ratio:3/4}
.duo__photo img{aspect-ratio:4/5}

/* =====================================================================
   Identité — les détails qui font que le site ne ressemble qu'à lui
   ===================================================================== */

/* Grain : le reportage est argentique dans l'esprit, la page aussi. */
body::after{content:"";position:fixed;inset:0;z-index:50;pointer-events:none;opacity:.07;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .28 0 0 0 0 .11 0 0 0 0 .06 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E")}

/* En-tête fixe, sur fond clair, une fois l'ouverture passée */
.entete__marque{position:relative;display:block}
.entete__marque .logo-fonce{position:absolute;inset:0;opacity:0}
.entete{transition:background var(--duree),color var(--duree),box-shadow var(--duree)}
.entete--fixe{position:fixed;background:rgba(248,241,233,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--titre);box-shadow:0 1px 0 var(--filet)}
.entete--fixe .entete__interieur{padding-block:.85rem}
.entete--fixe .logo-clair{opacity:0}
.entete--fixe .logo-fonce{opacity:1}
.entete__marque img{transition:opacity var(--duree)}
@media (min-width:52.01rem){.entete--fixe .nav a[href="#demande"]{color:var(--accent);border-bottom-color:currentColor}}

/* Le tampon : le lettrage arabe au centre, la promesse qui tourne autour */
.trio--tampon{position:relative}
.tampon{position:absolute;z-index:2;width:clamp(7rem,11vw,9.5rem);aspect-ratio:1;left:0;top:0;transform:translate(-38%,-38%);
  border-radius:50%;background:var(--c-ocre);display:grid;place-items:center;box-shadow:0 10px 30px rgba(71,28,15,.18)}
.tampon svg{position:absolute;inset:0;width:100%;height:100%;animation:tourne 38s linear infinite}
.tampon text{font:500 13px var(--police-titre);letter-spacing:.14em;fill:var(--profond)}
.trio .tampon img{width:52%;aspect-ratio:auto;object-fit:contain;height:auto}
@keyframes tourne{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.tampon svg{animation:none}}
@media (max-width:56rem){.tampon{width:6rem;left:auto;top:auto;right:0;bottom:0;transform:translate(0,38%)}}

/* La frise : les couleurs de la charte, en pointillé tissé */
.frise{height:4px;margin-block:0 var(--section);width:min(22rem,60%);
  background:repeating-linear-gradient(90deg,var(--profond) 0 14px,transparent 14px 22px,var(--c-ocre) 22px 36px,transparent 36px 44px,var(--c-brique) 44px 58px,transparent 58px 66px,var(--c-sable) 66px 80px,transparent 80px 88px)}

/* La table : un détail posé sur la grande photo */
.duo__photo--incrust{position:relative}
.duo__incrust{position:absolute;z-index:2;width:38%!important;aspect-ratio:2/3!important;right:-6%;bottom:-8%;border:clamp(6px,.8vw,10px) solid var(--fond);box-shadow:0 18px 40px rgba(71,28,15,.18)}
@media (max-width:56rem){.duo__incrust{right:4%;bottom:-6%;width:34%!important}}

/* Une journée au riad : sur le sable de la charte */
.journee{background:var(--c-sable);margin-top:var(--section)}
.journee .label{color:var(--profond)}
.journee__titre{margin-bottom:clamp(2.5rem,5vw,4rem)}
.journee__grille{display:grid;gap:clamp(2rem,3vw,3rem);grid-template-columns:repeat(3,1fr)}
.journee article img{width:100%;aspect-ratio:4/5;object-fit:cover;margin-bottom:1.5rem}
.journee article:nth-child(2){margin-top:clamp(2rem,6vw,5rem)}
.journee__heure{font:500 var(--t-label)/1 var(--police-titre);letter-spacing:var(--espacement-label);text-transform:uppercase;color:var(--c-brique);margin-bottom:.75rem!important}
.journee h3{margin-bottom:.75rem}
.journee article p:last-child{font-size:var(--t-petit);color:var(--c-brun-fonce)}
@media (max-width:56rem){.journee__grille{grid-template-columns:1fr}.journee article:nth-child(2){margin-top:0}}

/* Filigrane : le lettrage répété en fond, comme sur la charte */
.filigrane{position:relative;overflow:hidden}
.filigrane::before{content:"";position:absolute;inset:-10%;opacity:.045;pointer-events:none;transform:rotate(-8deg);
  background:url("/assets/logo/logo-mot-creme.svg") 0 0/260px auto repeat}
.filigrane > .contenu{position:relative}

/* Chambres : légendes de magazine */
.defile figcaption{font-family:var(--police-titre);font-weight:400;font-size:.8125rem;letter-spacing:-.01em;color:var(--texte-doux)}
.defile img{transition:transform 1.2s var(--courbe)}
.defile figure{overflow:hidden}
.defile figure:hover img{transform:scale(1.03)}

/* FAQ : le comité d'accueil */
.faq__photo{margin:2.5rem 0 0;max-width:15rem;transform:rotate(-2.5deg)}
.faq__photo img{width:100%;aspect-ratio:4/5;object-fit:cover;border:8px solid #fff;box-shadow:0 14px 30px rgba(71,28,15,.15)}
.faq__photo figcaption{font-family:var(--police-titre);font-weight:300;font-size:.9375rem;color:var(--texte-doux);margin-top:.6rem;text-align:center}
@media (max-width:56rem){.faq__photo{display:none}}

/* Pied de page : le lettrage géant, coupé par le bas comme sur la charte */
.pied{padding-bottom:0}
.pied__lettrage{overflow:hidden;height:clamp(4rem,15vw,15rem);margin-top:3rem;padding-inline:var(--gouttiere)}
.pied__lettrage img{width:100%;max-width:none;opacity:.95}

/* =====================================================================
   Retours du 02/11/2026
   ===================================================================== */

/* Ouverture minimaliste : une seule photo, le logo, rien d'autre.
   Le mur ensoleillé est clair : le logo et le menu passent en brun foncé. */
.ouverture{color:var(--profond);background:var(--c-creme)}
.ouverture__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 55%}
.ouverture__logo{width:min(20rem,58vw);filter:none;top:44%}
.entete--sur-clair:not(.entete--fixe){color:var(--profond)}
.entete--sur-clair:not(.entete--fixe) .logo-clair{opacity:0}
.entete--sur-clair:not(.entete--fixe) .logo-fonce{opacity:1}
/* Pas de logo par-dessus la photo : le seul logo est celui de l'en-tête,
   un peu plus grand tant qu'on est sur l'ouverture. */
.entete--sur-clair:not(.entete--fixe) .entete__marque img{width:10rem}
.entete--sur-clair:not(.entete--fixe) .entete__interieur{padding-block:2rem}

/* Plus de corps dans le texte : plus grand, plus foncé, plus présent. */
body{font-size:1.1875rem;line-height:1.6}
h1,h2,h3,.geant,.avis__note{font-weight:400}
.chapo{font-size:clamp(1.25rem,1.8vw,1.625rem);font-weight:400}
.intention__texte p:not(.chapo),.colonnes p,.chambres__tete p,.faq details p,.journee article p:last-child,.duo p{color:var(--texte)!important;font-size:1.1875rem!important}
.colonnes h3{font-size:1.5rem}
.liste-fleurie li{font-size:1.125rem}
.label,.nav a,.bouton{font-size:.8125rem}
.defile figcaption{font-size:.9375rem}
.avis blockquote p{font-weight:300}
.cal__demo,.formulaire__envoi small{font-size:.875rem}
.ouverture::before{content:"";position:absolute;inset:0 0 auto;height:9rem;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(248,241,233,.85),rgba(248,241,233,0))}

/* =====================================================================
   Typographie — trois accords, d'après la référence envoyée le 03/11
   (« Google Font Pairings »). On garde les trois qui ont le plus de
   caractère ; <html data-typo="…"> choisit lequel s'applique, et
   ?typo=1|2|3 dans l'adresse permet de les comparer en direct.
     1 — Poppins Bold + Lora      (Poppins = la typo de la charte)
     2 — Abril Fatface + Roboto Light
     3 — Playfair Display + Source Sans
   Les petites capitales (menu, étiquettes, boutons) restent en Poppins.
   ===================================================================== */
@font-face{font-family:'Lora';src:url('/assets/fonts/Lora-400-latin.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Lora';src:url('/assets/fonts/Lora-500-latin.woff2') format('woff2');font-weight:500 600;font-display:swap}
@font-face{font-family:'Lora';src:url('/assets/fonts/Lora-400-italic-latin.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Abril Fatface';src:url('/assets/fonts/AbrilFatface-400-latin.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Roboto';src:url('/assets/fonts/Roboto-300-latin.woff2') format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'Roboto';src:url('/assets/fonts/Roboto-400-latin.woff2') format('woff2');font-weight:400 600;font-display:swap}
@font-face{font-family:'Playfair Display';src:url('/assets/fonts/PlayfairDisplay-400-latin.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Playfair Display';src:url('/assets/fonts/PlayfairDisplay-500-latin.woff2') format('woff2');font-weight:500 700;font-display:swap}
@font-face{font-family:'Playfair Display';src:url('/assets/fonts/PlayfairDisplay-400-italic-latin.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}

:root{--police-affiche:var(--police-titre);--graisse-affiche:400;--serrage-affiche:var(--serrage-titre)}
html[data-typo="1"]{--police-affiche:"Poppins",system-ui,sans-serif;--graisse-affiche:700;--serrage-affiche:-.035em;--police-texte:"Lora",Georgia,serif}
html[data-typo="2"]{--police-affiche:"Abril Fatface",Georgia,serif;--graisse-affiche:400;--serrage-affiche:-.005em;--police-texte:"Roboto",system-ui,sans-serif}
html[data-typo="3"]{--police-affiche:"Playfair Display",Georgia,serif;--graisse-affiche:500;--serrage-affiche:-.02em;--police-texte:"Source Sans 3",system-ui,sans-serif}

h1,h2,h3,.geant,.avis__note,.menu-mobile a,.avis blockquote p,.cal__resume{
  font-family:var(--police-affiche);font-weight:var(--graisse-affiche);letter-spacing:var(--serrage-affiche)}
/* Les petits titres n'ont pas besoin de la pleine graisse de l'affiche */
html[data-typo="1"] h3,html[data-typo="1"] .avis blockquote p,html[data-typo="1"] .cal__resume{font-weight:600}
html[data-typo="2"] h3,html[data-typo="2"] .avis blockquote p,html[data-typo="2"] .cal__resume{font-family:"Roboto",sans-serif;font-weight:400;letter-spacing:-.01em}
html[data-typo="2"] body{font-weight:300}
html[data-typo="2"] .chapo{font-weight:400}
html[data-typo="3"] .avis blockquote p{font-style:italic;font-weight:400}

/* =====================================================================
   Retours du 04/11 — accord choisi, motifs henné, logo miroir
   ===================================================================== */
/* 4 — Poppins Bold + Roboto Light : l'accord choisi par la propriétaire */
html[data-typo="4"]{--police-affiche:"Poppins",system-ui,sans-serif;--graisse-affiche:700;--serrage-affiche:-.035em;--police-texte:"Roboto",system-ui,sans-serif}
html[data-typo="4"] body{font-weight:300}
html[data-typo="4"] .chapo,html[data-typo="4"] strong{font-weight:400}
html[data-typo="4"] h3,html[data-typo="4"] .avis blockquote p,html[data-typo="4"] .cal__resume{font-weight:600}

/* La liane de henné remplace la frise pointillée (trop proche de la référence) */
.liane{display:block;width:min(26rem,70%);height:auto;margin:0 0 var(--section)}

/* Le tampon : couronne de henné, logo miroir SOUL / MATE au centre */
.trio .tampon .tampon__couronne{position:absolute;inset:14%;width:72%;height:72%;aspect-ratio:1;object-fit:contain}
.trio .tampon .tampon__miroir{width:30%;aspect-ratio:auto;object-fit:contain;height:auto;position:relative}

/* La cérémonie du henné */
.henne{margin-top:var(--section)}
.henne__arches{display:block;width:min(30rem,80%);height:auto;margin:0 auto clamp(2.5rem,5vw,4rem)}
.henne__tete{display:grid;gap:1.5rem 5rem;margin-bottom:clamp(2.5rem,5vw,4rem)}
@media (min-width:56rem){.henne__tete{grid-template-columns:1fr 1fr;align-items:end}}
.henne__tete .chapo{margin-bottom:1rem}
.henne__tete p:not(.chapo){opacity:.9;margin-bottom:1.75rem}
.henne__photos{display:grid;grid-template-columns:1fr 1.6fr 1fr;gap:clamp(.5rem,1.2vw,1rem);align-items:center}
.henne__photos img{width:100%;height:auto;aspect-ratio:2/3;object-fit:cover}
.henne__photos img:nth-child(2){aspect-ratio:3/2}
@media (max-width:40rem){.henne__photos{grid-template-columns:1fr 1fr}.henne__photos img:nth-child(2){grid-column:1/-1;order:-1}}
.henne + .journee{margin-top:0}

/* Le logo miroir en emblème de la réservation */
.embleme{display:block;width:4.5rem;height:auto;margin-bottom:1.5rem}

/* Logo miroir plus présent (04/11) */
.trio .tampon .tampon__miroir{width:38%}
.embleme{width:6.5rem}
.pied__marques{display:flex;align-items:center;gap:1.75rem}
.pied__miroir{width:6rem;height:auto}

/* Avis Booking.com avec prénoms (04/11) */
.avis__notes{list-style:none;padding:0;margin:1.75rem 0 0;display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem 2.25rem}
.avis__notes li{font:600 1rem/1 var(--police-affiche);color:var(--accent-inverse)}
.avis__notes span{font:500 var(--t-label)/1 var(--police-titre);letter-spacing:var(--espacement-label);text-transform:uppercase;color:var(--texte-inverse);opacity:.8;margin-right:.5rem}
.avis__grille{grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));gap:1.25rem}
.avis__carte{margin:0;padding:2rem 1.75rem;border:1px solid var(--filet-inverse);display:flex;flex-direction:column;justify-content:space-between;gap:1.75rem;background:rgba(242,231,218,.035)}
.avis__carte blockquote p{font-size:1.1875rem!important;line-height:1.4}
.avis__carte figcaption{display:flex;align-items:center;gap:.9rem;font-size:.875rem;line-height:1.35}
.avis__carte strong{font-family:var(--police-titre);font-weight:600;font-size:1rem}
.avis__initiale{flex:none;width:2.6rem;height:2.6rem;border-radius:50%;display:grid;place-items:center;background:var(--accent-inverse);color:var(--profond);font:700 1.05rem/1 var(--police-titre)}
.avis__lien{text-align:center;margin-top:clamp(2rem,4vw,3rem)}
@media (min-width:62rem){.avis__grille{grid-template-columns:repeat(3,1fr)}}
@media (min-width:40rem) and (max-width:61.99rem){.avis__grille{grid-template-columns:repeat(2,1fr)}}
html[data-typo] .avis__carte blockquote p{font-family:var(--police-texte);font-weight:400;font-style:normal;letter-spacing:0;font-size:1.25rem!important;line-height:1.5}
/* Quatre avis : deux colonnes, pour l'harmonie */
@media (min-width:62rem){.avis__grille{grid-template-columns:repeat(2,1fr);max-width:62rem;margin-inline:auto}}
/* Le tampon retrouve le nom arabe au centre (05/11) */
.trio .tampon .tampon__arabe{width:50%;aspect-ratio:auto;object-fit:contain;height:auto;position:relative}

/* Henné : le prix (05/11) */
.henne__prix{font-size:1rem;opacity:1!important;color:var(--accent-inverse);margin-bottom:1.75rem!important}
.henne__prix strong{font-family:var(--police-titre);font-weight:600;letter-spacing:.02em}

/* Notre histoire — le texte de la propriétaire */
.histoire{background:var(--fond-alt)}
.histoire__grille{display:grid;gap:clamp(2.5rem,5vw,5rem);align-items:center}
@media (min-width:56rem){.histoire__grille{grid-template-columns:5fr 7fr}}
.histoire__photo{margin:0}
.histoire__photo img{width:100%;aspect-ratio:4/5;object-fit:cover}
.histoire__texte{max-width:40rem}
.histoire__texte h2{margin-bottom:1.75rem}
.histoire__texte .chapo{color:var(--titre);margin-bottom:1.5rem}
.histoire__texte p{color:var(--texte)}
.histoire__fin{font-family:var(--police-titre);font-weight:600;color:var(--titre)!important;margin-top:1.5rem}
.histoire .liane{margin:2rem 0 0}
.histoire__signature{font-family:var(--police-titre);font-weight:400;font-size:1.5rem;letter-spacing:-.01em;color:var(--accent)!important;margin:1rem 0 0}
.histoire__signature::before{content:"— "}
.histoire__photo img{object-position:50% 30%}

/* Chambres : les équipements, en petites capitales (06/11) */
.equipements{list-style:none;padding:0;margin:clamp(1.5rem,3vw,2.25rem) 0 0;display:flex;flex-wrap:wrap;gap:.6rem 1.75rem}
.equipements li{font:500 var(--t-label)/1.4 var(--police-titre);letter-spacing:var(--espacement-label);text-transform:uppercase;color:var(--texte);display:flex;align-items:center;gap:.6rem}
.equipements li::before{content:"✶";color:var(--accent);font-size:.9em;letter-spacing:0}

/* Avis sur fond clair (demande de la propriétaire, 07/11/2026) : sans filigrane, cartes légères */
.avis--clair .avis__note{color:var(--c-brique)}
.avis--clair .avis__notes li{color:var(--c-brique)}
.avis--clair .avis__notes span{color:var(--texte);opacity:.7}
.avis--clair .avis__carte{border:0;border-top:1px solid var(--filet);background:none;padding:1.75rem 0 0}
.avis--clair .avis__initiale{background:var(--c-ocre);color:var(--c-brun-fonce)}