/* SafiXperience : la colline des potiers. Voir DESIGN.md.
   Propriétés logiques partout (RTL natif). Pas de dégradé, pas d'ombre, pas de filet décoratif. */

@font-face{font-family:"El Messiri";src:url("/assets/fonts/ElMessiri-var.woff") format("woff");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans Arabic";src:url("/assets/fonts/IBMPlexSansArabic-Regular.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans Arabic";src:url("/assets/fonts/IBMPlexSansArabic-SemiBold.woff") format("woff");font-weight:600;font-style:normal;font-display:swap}

:root{
  --chaux:#F2F2EE;
  --encre:#0E2233;
  --feu:#B8420F;
  --feu-deep:#9C360A;
  --crue:#CDBBA5;
  --cuite:#8E4A2C;
  --bleu:#1B4F7A;
  --vert:#2D6F6B;
  --ardoise:#4A5A66;
  --ease:cubic-bezier(.16,1,.3,1);
  --s1:8px;--s2:16px;--s3:24px;--s4:40px;--s5:64px;--s6:104px;--s7:168px;
  --bar:64px;
  --gut:24px;
  --head:"El Messiri","Noto Naskh Arabic",serif;
  --text:"IBM Plex Sans Arabic",system-ui,-apple-system,"Segoe UI",sans-serif;
  --stage-bg:var(--cuite);
  --stage-ink:var(--chaux);
  --ring:var(--encre);
}
@media (min-width:1024px){:root{--gut:48px;--s5:88px;--s6:152px;--s7:240px;--bar:72px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:16px}
body{margin:0;background:var(--chaux);color:var(--encre);font-family:var(--text);font-size:1.125rem;line-height:1.6;font-weight:400;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;overflow-x:hidden}
html[lang="ar"] body{font-size:1.1875rem;line-height:1.8}
img,svg{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,p,ul,ol,figure,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
[hidden]{display:none!important}

/* Titres : deux lignes au plus */
.display,.h2,h1,h2{font-family:var(--head);font-weight:600;text-wrap:balance}
.display,h1{font-size:clamp(2.75rem,5.4vw,5.25rem);line-height:1;letter-spacing:-.03em}
.h2,h2{font-size:clamp(2rem,4.6vw,3.75rem);line-height:1.04;letter-spacing:-.02em}
html[lang="ar"] .display,html[lang="ar"] h1,html[lang="ar"] .h2,html[lang="ar"] h2{letter-spacing:0;line-height:1.35}
html[lang="ar"] .display,html[lang="ar"] h1{font-size:clamp(2.25rem,4vw,4rem)}
html[lang="ar"] .h2,html[lang="ar"] h2{font-size:clamp(1.75rem,3.8vw,3.25rem)}
h3{font-family:var(--head);font-weight:600;font-size:clamp(1.5rem,2.4vw,1.875rem);line-height:1.15;text-wrap:balance}
html[lang="ar"] h3{line-height:1.35}
.lead{font-size:clamp(1.25rem,2vw,1.5rem);line-height:1.45;max-width:36em;text-wrap:pretty}
html[lang="ar"] .lead{line-height:1.75}
p{text-wrap:pretty;max-width:38em}
.note{font-size:1rem;line-height:1.4;font-weight:600}
.num{font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate;display:inline-block}

.skip{position:absolute;inset-inline-start:var(--gut);top:-100px;z-index:50;background:var(--encre);color:var(--chaux);padding:12px 20px;font-weight:600}
.skip:focus{top:8px}

/* Liens et boutons */
.link{color:inherit;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.25em}
.link:hover{color:var(--feu)}
.on-dark .link:hover,.field-bleu .link:hover,.field-cuite .link:hover,.field-encre .link:hover{color:var(--crue)}
:focus-visible{outline:3px solid var(--ring);outline-offset:2px}
.field-bleu,.field-cuite,.field-encre,.dock-dark{--ring:var(--chaux)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:18px 32px;background:var(--feu);color:#fff;border:0;border-radius:0;font-weight:600;font-size:1rem;line-height:1.4;text-decoration:none;cursor:pointer;transition:background-color .2s var(--ease),transform .12s var(--ease)}
.btn:hover{background:var(--feu-deep)}
.btn:active{transform:translateY(1px)}
.btn-2{background:var(--encre);color:var(--chaux)}
.btn-2:hover{background:var(--bleu)}
.page-text .note{margin-block-start:12px}
.btn[aria-disabled="true"]{background:#B9C0C5;color:var(--encre);cursor:not-allowed}

/* Champs de couleur entiers */
.field-chaux{background:var(--chaux);color:var(--encre)}
.field-crue{background:var(--crue);color:var(--encre)}
.field-cuite{background:var(--cuite);color:var(--chaux)}
.field-bleu{background:var(--bleu);color:var(--chaux)}
.field-encre{background:var(--encre);color:var(--chaux)}
.wrap{padding-inline:var(--gut);max-width:1680px;margin-inline:auto}
.band{padding-block:var(--s5)}
@media (min-width:1024px){.band{padding-block:var(--s6)}}

/* En-tête */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:20px}
.brand{display:block;line-height:0;flex:none}
.brand img{width:96px;height:auto}
.nav{display:none;align-items:center;gap:36px;font-weight:600;font-size:1rem}
.nav a{text-decoration:none;display:inline-flex;align-items:center;min-height:44px;min-width:44px;justify-content:center;padding-inline:4px;border-block-end:2px solid transparent}
.nav a:hover{border-block-end-color:var(--feu)}
.nav a[aria-current="page"]{border-block-end-color:var(--encre)}
.top-side .langs{display:none}
.menu-langs{display:flex!important;padding-block-start:8px}
.top-side{display:flex;align-items:center;gap:20px;font-size:1rem;font-weight:600}
.langs{display:flex;gap:4px}
.langs a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding-inline:8px;text-decoration:none}
.langs a[aria-current="true"]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.3em}
.langs a:hover{color:var(--feu)}
.menu{position:relative}
.menu summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;min-height:44px;padding-inline:12px;font-weight:600;position:relative;z-index:32}
.menu summary::-webkit-details-marker{display:none}
.menu[open] summary{position:fixed;inset-block-start:20px;inset-inline-end:calc(var(--gut) - 12px);color:var(--chaux)}
.menu-panel{display:none}
.menu[open] .menu-panel{position:fixed;inset:0;z-index:31;background:var(--encre);color:var(--chaux);padding:112px var(--gut) var(--s4);display:flex;flex-direction:column;justify-content:center;gap:var(--s1);overflow-y:auto;--ring:var(--chaux);animation:veil .45s var(--ease) both}
.menu-panel a{display:flex;align-items:center;font-family:var(--head);font-weight:600;font-size:clamp(2.25rem,9vw,3.25rem);line-height:1.15;text-decoration:none;min-height:64px}
.menu-panel a:hover{color:var(--crue)}
.menu-panel .menu-langs a{font-family:var(--text);font-size:1.125rem;min-height:48px}
.menu-panel .menu-langs a[aria-current="true"]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.3em}
body:has(.menu[open]){overflow:hidden}
@keyframes veil{from{opacity:0}to{opacity:1}}
.wa-text{display:none;align-items:center;min-height:44px}
@media (min-width:1024px){
  .nav{display:flex}.menu{display:none}.wa-text{display:inline-flex}.top-side .langs{display:flex}
  .brand img{width:112px}
}

/* Accueil : ouverture plein cadre */
.hero{position:relative;display:flex;flex-direction:column;background:var(--encre)}
.hero-media{margin:0;aspect-ratio:1/1;max-height:58svh;width:100%;position:relative;overflow:hidden;order:-1}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:58% 75%}
.hero-text{background:var(--chaux);padding:var(--s4) var(--gut) var(--s5);display:flex;flex-direction:column;gap:var(--s3)}
.hero-text .lead{max-width:28em}
.hero-cta{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
@media (min-width:1024px){
  .hero{min-height:calc(100svh - 112px);justify-content:flex-end;align-items:flex-start}
  .hero-media{position:absolute;inset:0;aspect-ratio:auto;max-height:none;order:0}
  .hero-text{position:relative;z-index:1;width:min(54vw,780px);padding:var(--s5) var(--gut) var(--s5);gap:var(--s4)}
  .hero-text h1{font-size:clamp(2.75rem,4.2vw,3.75rem)}
}
html.js .hero-media img{animation:settle 2.2s var(--ease) both}
@keyframes settle{from{transform:scale(1.08)}to{transform:scale(1)}}

.intro{padding-block:var(--s5)}
.intro .wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
.intro p{font-size:clamp(1.25rem,2vw,1.5rem);line-height:1.5;max-width:30em}
@media (min-width:1024px){
  .intro{padding-block:140px}
  .intro .wrap{grid-template-columns:45fr 55fr;gap:var(--gut);align-items:start}
}

/* Scène : la pièce change d'état avec les chapitres */
.scene{display:block}
.stage{position:sticky;top:0;z-index:3;height:var(--bar);background:var(--stage-bg);color:var(--stage-ink);display:flex;align-items:center;gap:var(--s3);padding:0 var(--gut);transition:background-color .9s var(--ease),color .9s var(--ease)}
.stage[data-state="raw"]{--stage-bg:var(--encre);--stage-ink:var(--chaux)}
.stage[data-state="fired"]{--stage-bg:var(--crue);--stage-ink:var(--encre)}
.stage[data-state="glazed"]{--stage-bg:var(--cuite);--stage-ink:var(--chaux)}
.stage{--ring:var(--stage-ink)}
.vase{height:calc(var(--bar) - 16px);width:auto;flex:none}
.vase-layer{opacity:0;transition:opacity .9s var(--ease)}
.stage[data-state="raw"] .v-raw,.stage[data-state="fired"] .v-fired,.stage[data-state="glazed"] .v-glazed{opacity:1}
.vase-floor{fill:#000;opacity:.16}
.states{display:flex;flex-direction:row;flex-wrap:wrap;gap:4px var(--s3);font-family:var(--head);font-weight:600;font-size:1rem;line-height:1.35}
.states li{opacity:.9;transition:opacity .5s var(--ease)}
.stage[data-state="raw"] .s-raw,.stage[data-state="fired"] .s-fired,.stage[data-state="glazed"] .s-glazed{opacity:1}
.stage[data-state="raw"] .s-raw::before,.stage[data-state="fired"] .s-fired::before,.stage[data-state="glazed"] .s-glazed::before{content:"";display:inline-block;width:.5em;height:.5em;background:currentColor;margin-inline-end:.5em;vertical-align:.05em}
@media (min-width:1024px){.states{font-size:1.125rem;gap:var(--s3) var(--s4)}}

/* Ouverture de chapitre */
.chapter{--ring:var(--chaux)}
.chapter.field-crue{--ring:var(--encre)}
.open{display:grid;grid-template-columns:minmax(0,1fr)}
.open-fig{margin:0;overflow:hidden;background:var(--encre);aspect-ratio:4/5;position:relative}
.open-fig img{width:100%;height:100%;object-fit:cover;will-change:transform}
.open-text{display:grid;gap:var(--s3);align-content:center;padding:var(--s5) var(--gut) var(--s4)}
.chapter-title{font-size:clamp(3.25rem,13vw,5.5rem);line-height:.92;letter-spacing:-.035em}
html[lang="ar"] .chapter-title{line-height:1.2;letter-spacing:0}
.open.full .open-fig{aspect-ratio:4/3}
@media (min-width:1024px){
  .open.split{grid-template-columns:minmax(0,5fr) minmax(0,6fr);min-height:calc(100svh - var(--bar))}
  .open.split .open-fig{aspect-ratio:auto;grid-column:2;grid-row:1}
  .open.split .open-text{grid-column:1;grid-row:1;padding:var(--s6) var(--gut)}
  .open.split.rev{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
  .open.split.rev .open-fig{grid-column:1}
  .open.split.rev .open-text{grid-column:2}
  .open.full .open-fig{aspect-ratio:auto;height:calc(100svh - var(--bar))}
  .open.full .open-text{padding:var(--s5) var(--gut) var(--s5);grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end;gap:var(--s5)}
  .chapter-title{font-size:clamp(5rem,10.5vw,10.5rem)}
}

/* Expériences : composition éditoriale */
.items{padding-block:0 var(--s3)}
.exp{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s3);padding-block:var(--s5) var(--s4)}
.exp figure{margin-inline:calc(var(--gut) * -1);aspect-ratio:4/3;overflow:hidden;background:var(--encre)}
.exp figure img{width:100%;height:100%;object-fit:cover}
.fp-top img{object-position:50% 20%}
.fp-low img{object-position:50% 70%}
.fp-mid img{object-position:50% 45%}
.fp-small{max-width:447px}
.exp-text{display:grid;gap:var(--s2);align-content:center}
.exp-text h3{font-size:clamp(2rem,8vw,2.5rem);line-height:1.08}
.exp-text p{font-size:1.125rem}
.exp .dur{font-size:1rem;line-height:1.4;font-weight:600}
.exp .ask{font-weight:600;font-size:1.125rem;width:fit-content;display:inline-flex;align-items:center;min-height:48px}
@media (min-width:1024px){
  .items{padding-block:var(--s4) var(--s6)}
  .exp{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);align-items:center;padding-block:var(--s5)}
  .exp figure{grid-column:1 / span 7;grid-row:1;margin-inline:0;aspect-ratio:3/2}
  .exp .exp-text{grid-column:9 / span 4;grid-row:1}
  .exp:nth-child(even) figure{grid-column:6 / span 7}
  .exp:nth-child(even) .exp-text{grid-column:1 / span 4}
  .exp figure.fp-small{aspect-ratio:1/1;max-width:447px}
  .exp-text h3{font-size:clamp(2.25rem,3.4vw,3.5rem)}
}
html.js .rise.settle{transform:none}
html.js .rise.settle img{transform:scale(1.07);transition:transform 1.6s var(--ease)}
html.js .rise.settle.in-view img{transform:none}

/* Bande d'émail : image pleine largeur */
.jars{padding:0}
.jars-fig{margin:0;aspect-ratio:3/2;overflow:hidden;background:var(--encre)}
.jars-fig img{width:100%;height:100%;object-fit:cover}
.jars-word{font-family:var(--head);font-weight:600;font-size:clamp(3.25rem,13vw,5.5rem);line-height:1;letter-spacing:-.035em;padding-block:var(--s4) var(--s5);max-width:none}
html[lang="ar"] .jars-word{letter-spacing:0;line-height:1.3}
@media (min-width:1024px){
  .jars-fig{aspect-ratio:auto;height:min(86svh,56vw)}
  .jars-word{font-size:clamp(5rem,10.5vw,10.5rem);padding-block:var(--s5) var(--s6)}
}

/* Composer sa journée */
.day .wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:40px}
.day-head{display:grid;gap:20px}
.fiche{display:grid;gap:32px}
.moment{display:grid;gap:12px}
.moment-label{font-family:var(--head);font-weight:600;font-size:1.5rem;line-height:1.35;margin:0}
.choices{display:flex;flex-wrap:wrap;gap:8px}
.choice{min-height:56px;padding:14px 24px;background:var(--chaux);color:var(--encre);border:0;border-radius:0;font-weight:600;font-size:1.125rem;line-height:1.4;cursor:pointer;transition:background-color .2s var(--ease),color .2s var(--ease)}
.choice:hover{outline:2px solid var(--encre);outline-offset:-2px}
.choice[aria-pressed="true"]{background:var(--feu);color:#fff}
.choice[aria-pressed="true"]:hover{background:var(--feu-deep);outline:0}
.program{background:var(--encre);color:var(--chaux);padding:32px var(--gut);display:grid;gap:24px;align-content:start}
.program h3{font-size:1.5rem}
.program ol{display:grid;gap:12px}
.program li{display:grid;grid-template-columns:7.5em 1fr;gap:12px;align-items:baseline}
.program .m{font-weight:600}
.program .free{color:#C9D1D6}
.program .empty{color:#C9D1D6}
.program .times{font-size:1rem;color:#C9D1D6;line-height:1.4}
.fields{display:grid;gap:16px}
.lab{display:grid;gap:6px;font-size:1rem;font-weight:600}
.in{width:100%;min-height:52px;padding:14px 16px;background:var(--chaux);color:var(--encre);border:2px solid var(--encre);border-radius:0;font-weight:400;font-size:1rem}
.in::placeholder{color:#55656F;opacity:1}
.in:focus-visible{outline:3px solid var(--feu);outline-offset:2px}
.in[aria-invalid="true"]{border-color:var(--feu);border-width:3px}
.program .in{border-color:var(--chaux)}
.live{min-height:1.4em;font-size:1rem;line-height:1.4}
.plain{max-width:34em}
html.js .nojs-only{display:none}
html:not(.js) .js-only{display:none}
@media (min-width:1024px){
  .day .wrap{grid-template-columns:5fr 4fr;gap:80px;align-items:start}
  .day-head{grid-column:1 / -1;max-width:40em}
  .moment{grid-template-columns:11em 1fr;align-items:start;gap:24px}
  .moment-label{padding-block-start:10px}
  .program{position:sticky;top:24px;padding:40px}
}

/* Le riad */
.riad .wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:40px}
.riad-text{display:grid;gap:24px;align-content:center}
.riad-pics{display:grid;gap:16px}
.riad-pics figure{overflow:hidden;background:var(--encre)}
.riad-pics img{width:100%;height:100%;object-fit:cover}
.riad-pics .big{aspect-ratio:3/2}.riad-pics .small{aspect-ratio:4/5;max-width:70%}
@media (min-width:1024px){
  .riad .wrap{grid-template-columns:5fr 6fr;gap:80px;align-items:center}
  .riad-pics{grid-template-columns:3fr 2fr;align-items:end}
  .riad-pics .big{aspect-ratio:4/5}.riad-pics .small{max-width:none}
}

/* Emplacements à remplir */
.todo .wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
.slot{background:var(--ardoise);color:var(--chaux);padding:32px;display:grid;gap:12px;align-content:start}
.slot h2{font-size:clamp(1.5rem,2.6vw,2.25rem);line-height:1.1}
.stack{display:grid;gap:20px}
.todo{padding-block:80px 0}
@media (min-width:1024px){.todo .wrap{grid-template-columns:1fr 1fr;gap:var(--gut)}.todo{padding-block:140px 0}}

/* Contact (bande d'accueil) */
.reach .wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
.reach .acts .link{display:inline-flex;align-items:center;min-height:44px}
.reach .acts{display:flex;flex-wrap:wrap;align-items:center;gap:20px 32px}
@media (min-width:1024px){.reach .wrap{grid-template-columns:5fr 4fr;gap:80px;align-items:end}}

/* Pied de page */
.foot{padding-block:72px 40px}
.wordmark{font-family:var(--head);font-weight:600;font-size:clamp(3rem,13.6vw,13rem);line-height:.95;letter-spacing:-.03em;direction:ltr;text-align:start;white-space:nowrap;margin:0}
html[dir="rtl"] .wordmark{text-align:end}
.foot-cols{display:grid;gap:36px;margin-block-start:56px;font-size:1rem;line-height:1.5}
.foot-cols dt{font-weight:600;margin-block-end:6px}
.foot-cols a{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.25em}
.foot-cols a:hover{color:var(--crue)}
.foot-rights{margin-block-start:48px;font-size:1rem}
@media (min-width:1024px){.foot{padding-block:120px 48px}.foot-cols{grid-template-columns:repeat(4,1fr);gap:var(--gut)}}

/* Barre d'action mobile : une seule */
.dock{position:fixed;inset-inline:0;bottom:0;z-index:40;background:var(--chaux);padding:12px var(--gut) calc(12px + env(safe-area-inset-bottom));transition:transform .4s var(--ease)}
.dock .btn{width:100%}
.dock[data-away="true"]{transform:translateY(110%)}
body.has-dock{padding-bottom:84px}
@media (min-width:1024px){.dock{display:none}body.has-dock{padding-bottom:0}}

/* Pages intérieures */
.page-hero{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.page-text{padding:24px var(--gut) 56px;display:grid;gap:28px;align-content:center}
.page-media{margin:0;width:100%;aspect-ratio:3/2}
.page-media img{width:100%;height:100%;object-fit:cover}
.coords{display:grid;gap:16px;font-size:1.125rem;overflow-wrap:anywhere}
.coords dt{font-weight:600;font-size:1rem}
@media (min-width:1024px){
  .page-hero{grid-template-columns:45fr 55fr;min-height:calc(100svh - 112px)}
  .page-text{padding:48px var(--gut) 72px}
  .page-media{aspect-ratio:auto}
}
.form-wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:32px}
.form{display:grid;gap:24px;max-width:640px}
.err{color:var(--encre);font-size:1rem;line-height:1.4;font-weight:600;min-height:0}
.err:not(:empty)::before{content:"";display:inline-block;width:.5em;height:.5em;background:var(--feu);margin-inline-end:.5em}
@media (min-width:1024px){.form-wrap{grid-template-columns:4fr 5fr;gap:80px}}
.prose{padding-block:48px 120px;display:grid;gap:32px}
.prose .slot{max-width:44em}

/* Mouvement : une seule entrée, une fois */
html.js .rise{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
html.js .rise.d1{transition-delay:.07s}html.js .rise.d2{transition-delay:.14s}
html.js .rise.in-view{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.js .rise{transform:none;transition:opacity .3s linear}
  .stage,.vase-layer,.states li,.btn,.choice,.dock{transition-duration:.01s}
  html.js .hero-media img,.menu[open] .menu-panel{animation:none}
  html.js .rise.settle img{transform:none;transition:none}
}
@media print{.dock,.stage{display:none}}

/* Garde-fou : les colonnes de grille ne dépassent jamais la largeur disponible */
.page-text,.prose,.open-text,.exp,.exp-text,.riad-text,.day-head,.fiche,.program,.slot,.stack,.coords,.form,.fields,.foot-cols,.moment,.hero-text{grid-template-columns:minmax(0,1fr)}
@media (min-width:1024px){.riad-pics{grid-template-columns:3fr 2fr}.foot-cols{grid-template-columns:repeat(4,minmax(0,1fr))}.moment{grid-template-columns:11em minmax(0,1fr)}}
.reach.band{padding-block-end:var(--s6)}