/* ═══════════════════════════════════════════════════════
   LAMSAT SHAMS — la feuille de style du site.

   Le site est UNE page. Les six pages d'avant (accueil, lettre,
   dabke, table, tarab, séjour) sont devenues six sections : un
   visiteur venu d'Instagram ne doit pas avoir à cliquer une
   seconde fois pour s'inscrire à quoi que ce soit.

   Registre : celui de thebreakfast.app, relevé sur ses captures.
   Tout est CENTRÉ, le blanc est la matière principale, les titres de
   section sont des capitales très chassées, et un seul accent appelle
   à l'action. Ce qui vient de chez nous : les photos, l'arabe, le
   texte — et aucun chiffre qu'on n'a pas compté.

   Les valeurs vivent dans tokens.css, jamais ici.
   Une classe nue n'est déclarée qu'UNE fois au niveau haut
   (tests/test_css.py) : les variantes passent par un @media ou par un
   sélecteur porté (.pillars .pil, .doors .door).
   Angles adoucis autorisés ; ni ombre portée ni flou d'arrière-plan
   (tests/test_charter.py) : le relief est un filet d'un pixel.
   ═══════════════════════════════════════════════════════ */

/* ═══════════ SOCLE ═══════════ */

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--ecru);color:var(--ink);font-family:var(--sans);font-size:17px;
  line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
/* width/height servent au ratio, pas à la taille rendue */
img{display:block;max-width:100%;height:auto}
::selection{background:var(--ocre);color:#fff}
a,button{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--atlas);outline-offset:3px}

/* le grain : posé sur toute la page, jamais cliquable. C'est lui qui
   fait du fond un papier plutôt qu'une couleur d'écran. */
body::after{content:"";position:fixed;inset:0;z-index:90;pointer-events:none;
  opacity:.055;background-image:var(--grain)}

/* les ancres ne doivent pas passer sous la barre fixe */
[id]{scroll-margin-top:5.5rem}

@media(min-width:760px){body{font-size:18px}}

/* ═══════════ TRAME ═══════════
   Centrée par défaut. Le texte long garde une mesure courte : centrer
   n'autorise pas des lignes de 90 signes. */

.wrap{max-width:var(--col);margin:0 auto;padding-inline:var(--gut);text-align:center}
.wrap--wide{max-width:var(--col-wide)}

/* ── le rythme des sections ──
   .sec n'avait AUCUNE règle : le silence entre deux blocs venait d'un
   margin-top:var(--air) improvisé sur le premier composant de chacun
   (.three, .piece…), jamais sur la section elle-même. padding (pas
   margin) parce que .pillars pose une couleur de fond sur la bande
   entière : l'air doit être DANS le fond teinté, pas avant lui.
   Deux .sec qui se suivent (dabke/dinners/tarab, manifeste, communaute)
   sommaient alors deux paddings pleins ; le second cède le sien, le
   premier garde le sien — un seul --air à la jointure. */
.sec{padding-block:var(--air)}
.sec+.sec{padding-top:0}

/* l'œilleton : deux lignes chez la référence, capitales + serif italique */
.eyebrow{display:block;font-size:.7rem;letter-spacing:var(--track);
  text-transform:uppercase;color:var(--sauge);margin-bottom:clamp(1.4rem,3.6vh,2rem)}
.eyebrow em{font-family:var(--serif);font-style:italic;text-transform:none;
  letter-spacing:.02em;font-size:1.1em}

/* le titre de section : capitales, très chassées, énormes, centrées.
   C'est la signature de la référence (« EPISODES »). */
.sec__k{font-size:clamp(1.6rem,7.4vw,3.4rem);line-height:1;font-weight:400;
  letter-spacing:var(--track-wide);text-transform:uppercase;
  color:var(--ink);margin-bottom:clamp(1.2rem,3vh,1.8rem)}

/* la phrase qui suit le titre : centrée, courte, jamais un paragraphe */
.sec__h{font-family:var(--serif);font-weight:400;
  font-size:clamp(1.6rem,5.6vw,2.4rem);line-height:1.18;letter-spacing:-.01em;
  max-width:24ch;margin-inline:auto;text-wrap:balance}
.sec__h em{font-style:italic;color:var(--atlas)}
.sec__p{margin-top:clamp(1rem,2.6vh,1.4rem);max-width:44ch;margin-inline:auto;
  color:var(--charbon)}
/* galerie/ et l'ancien libellé de séjour posent .sec__p sur un <span> —
   <p> n'imbrique pas dans un <p> (galerie/, dans .next) : max-width et
   margin-inline:auto restaient sans effet sur un inline. */
span.sec__p{display:block}

/* ═══════════ L'ARABE ═══════════
   Deux emplois, jamais trois : l'arabe EST le titre de section, et
   l'arabe ferme la section en citation. Jamais de translittération,
   jamais d'arabe en étiquette dans le corps du texte.
   En page centrée, un bloc RTL se centre — il n'y a plus de rail dont
   il puisse fuir, et c'est la seule raison pour laquelle le
   text-align:left d'avant disparaît. */

.ar-t{display:block;margin:0 0 .2rem}
/* Amiri porte ses diacritiques haut : on lui laisse le ciel,
   on rogne le blanc mort en dessous. */
.ar-t__ar{display:block;font-family:var(--ar);font-weight:400;
  font-size:clamp(2.2rem,8vw,4rem);line-height:1.26;color:var(--atlas);
  letter-spacing:.01em;max-width:22ch;margin-inline:auto;
  direction:rtl;unicode-bidi:isolate;text-align:center;
  padding-top:.08em;margin-bottom:-.06em}
/* sous un titre arabe, le nom français de la section passe en second */
.ar-t + .sec__k{font-size:clamp(.66rem,2.2vw,.78rem);letter-spacing:var(--track);
  color:var(--sauge);margin-bottom:clamp(1.4rem,3.4vh,2rem)}

/* la citation arabe qui ferme une section */
.qt{position:relative;margin-top:var(--air);padding-top:clamp(1.8rem,4.4vh,2.6rem);
  border-top:1px solid var(--hair)}
.qt::before{content:"";position:absolute;top:-1px;left:50%;transform:translateX(-50%);
  width:3.4rem;height:2px;background:var(--ocre)}
/* un vers est déjà coupé à la césure par ses <span> */
.qt__ar{font-family:var(--ar);font-weight:400;
  font-size:clamp(1.7rem,5.8vw,2.6rem);line-height:1.45;color:var(--atlas);
  direction:rtl;unicode-bidi:isolate;text-align:center;
  max-width:min(100%,34ch);margin-inline:auto;text-wrap:balance}
.qt__ar>span{display:block}
/* sauge/--sable = 4,30:1, sous 4,5 : sur .pillars (fond --sable), la
   citation passe à --atlas (4,58:1). Ailleurs, .qt vit sur l'écru où
   sauge est à 4,80:1 — cette base ne change pas. */
.qt__tr{margin-top:.7rem;font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(1.05rem,3.4vw,1.28rem);line-height:1.34;
  color:var(--sauge);max-width:34ch;margin-inline:auto}
.pillars .qt__tr{color:var(--atlas)}
/* un vers emprunté se signe : plus petit que la traduction, jamais en
   italique. opacity:.72 faisait chuter sauge/--sable à 2,83:1 ; cette
   citation ne vit que sur .pillars (--sable), donc --atlas plein,
   sans opacité : 4,58:1. */
.qt__by{display:block;margin-top:.8rem;font-family:var(--sans);font-style:normal;
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--atlas)}

/* ═══════════ BARRE ═══════════
   La référence ne met QUE son logo et un menu : pas un lien. On garde
   les ancres sur grand écran (une page unique n'a rien à cacher) et on
   se réduit au monogramme, une porte et la langue sur mobile.
   Elle vit sur le papier dès le premier pixel : le hero n'est plus une
   photo, donc plus de bascule clair/sombre à gérer. */

.nav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;
  justify-content:space-between;gap:1rem;padding:.9rem var(--gut);
  background:rgba(246,243,236,.97);border-bottom:1px solid transparent;
  transition:border-color .4s var(--ease)}
.nav.stuck{border-bottom-color:var(--hair)}
/* min-height:44px reste un plancher partout (cible tactile) ; c'est
   padding/font-size qui portent le "le menu recule" plus bas. */
.nav a,.nav button{color:var(--ink);font:500 .7rem/1 var(--sans);letter-spacing:.14em;
  text-transform:uppercase;padding:.9em;min-height:44px;min-width:44px;
  justify-content:center;display:inline-flex;
  align-items:center;background:none;border:0;cursor:pointer;opacity:.75;
  transition:opacity .3s}
.nav a:hover,.nav button:hover{opacity:1}
/* -webkit-tap-highlight-color:transparent tue le retour visuel natif du
   tap : sans :active, chaque appui sur mobile ne montre rien. */
.nav a:active,.nav button:active{opacity:.55}
.nav__r{display:flex;align-items:center;gap:.2rem}
.nav__cta{border:1px solid var(--atlas);border-radius:var(--pill);
  padding:.55em 1.1em;color:var(--atlas);opacity:1}
.nav__cta:hover{background:var(--atlas);color:#fff}

/* le monogramme : un carré ocre, la lettre ش, et le nom sur deux étages.
   La référence empile son nom dans une tuile ; on empile les deux
   alphabets, ce qui dit la même chose de nous.
   min-width:0 sur .lockup et .lockup__tx : par défaut un enfant flex ne
   rétrécit jamais sous la largeur de son contenu (min-width:auto), donc
   sans ça rien ne pouvait vraiment céder de la place au menu — c'était
   la cause réelle du débordement à 320px, masquée par
   body{overflow-x:hidden}. Le mark grossit (2.2rem → 2.6rem, "plus
   confiant") ; si le nom venait à manquer de place, il se tronque
   proprement plutôt que de pousser la barre hors de l'écran. */
.lockup{display:flex;align-items:center;gap:.5rem;padding:0;opacity:1;min-width:0}
/* C'est l'enseigne dessinée qui signe la barre, plus le monogramme :
   le carré ocre et la lettre ش seule étaient un raccourci, pas la
   marque. Le nom arabe du lockup part avec — l'enseigne EST ce nom,
   l'écrire à côté le disait deux fois. */
.lockup__mark{flex:none;width:auto;height:2.4rem;border-radius:0;background:none}
.lockup__tx{display:flex;flex-direction:column;gap:.1rem;text-align:left;min-width:0}
.lockup__la{display:block;font:500 .68rem/1 var(--sans);letter-spacing:.16em;
  text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  color:var(--sauge)}

/* Le menu recule : sous 900px, seuls la pilule d'appel et le bouton de
   langue restent — ils rétrécissent (fonte, chasse, remplissage) pour
   que le lockup agrandi tienne toujours à 320px. La hauteur ne bouge
   pas : min-height:44px, hérité, n'est jamais réduit ici. */
@media(max-width:899px){
  .nav{gap:.6rem}
  .nav__r a:not(.nav__cta){display:none}
  .nav__cta{padding:.45em .8em;font-size:.64rem;letter-spacing:.1em}
  [data-lang]{min-width:2.3rem;padding:.9em .4em}
}

/* Sous 420px, même rétréci, l'appel du menu ne laissait au nom que 52px
   pour 109 : « Lamsat Shams » s'affichait « LAMS… ». On le retire plutôt
   que de tronquer l'enseigne — la barre fixe (.stickybar) porte déjà
   « Rejoindre le cercle » en permanence à l'écran sous 900px, donc rien
   n'est perdu : c'était le même appel, deux fois. */
@media(max-width:419px){
  /* `.nav a` (l.149) pose display:inline-flex et pèse plus lourd qu'une
     classe nue : il faut `.nav a.nav__cta` pour l'emporter. */
  .nav a.nav__cta{display:none}
}

/* ═══════════ BOUTONS ═══════════
   Le bouton-pilule est la signature de la référence. Il est autorisé
   depuis le 12026-09-17 ; l'ombre portée, non. */

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  min-height:54px;padding:0 2em;border-radius:var(--pill);
  font:500 .95rem/1 var(--sans);letter-spacing:.02em;
  border:1px solid transparent;cursor:pointer;text-align:center;
  transition:.35s var(--ease)}
/* blanc sur atlas : 5,67:1. Sur ocre c'était 3,16 — un appel
   principal ne peut pas échouer au contraste. */
.btn--fill{background:var(--atlas);color:#fff}
.btn--fill:hover{background:#8C3A20}
/* rgba(12,24,36,.24) = 1,68:1 — sous les 3:1 de la SC 1.4.11 pour le
   seul contour d'un contrôle. .48 : 3,15:1. */
.btn--ink{border-color:rgba(12,24,36,.48);color:var(--ink)}
.btn--ink:hover{border-color:var(--ink);background:var(--ink);color:var(--ecru)}
/* l'envoi d'un formulaire : encre pleine, la même pilule */
.btn--go{background:var(--ink);color:var(--ecru);border-color:var(--ink);width:100%}
/* blanc sur ocre = 3,16:1, sous 4,5 — au repos le bouton tient 16:1,
   il ne peut pas chuter au survol. atlas : 5,67:1. */
.btn--go:hover{background:var(--atlas);border-color:var(--atlas);color:#fff}
.btn--go[disabled]{opacity:.55;cursor:default}
.btn--send{background:var(--ocre);color:#fff;border-color:var(--atlas)}
/* le retour au tap : un léger tassement, porté par la transition déjà
   posée sur .btn (elle couvre transform, pas seulement la couleur). */
.btn:active{transform:scale(.97)}

/* le lien qui prolonge */
.more{display:inline-flex;align-items:center;gap:.5em;min-height:44px;
  font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--atlas)}
.more span{transition:transform .35s var(--ease)}
.more:hover span,.more:active span{transform:translateX(.25em)}

/* ═══════════ APPARITION ═══════════ */

.r{opacity:0;transform:translateY(16px);
  transition:opacity .95s var(--ease),transform 1s var(--ease);
  transition-delay:var(--d,0ms)}
.r.in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .r{opacity:1!important;transform:none!important;transition:none}
  .pil:hover img,.door:hover .door__ph img,.door:active .door__ph img{transform:none}
  .more:hover span,.more:active span{transform:none}
  .back:hover::before{transform:none}
  .btn:active{transform:none}
  .stickybar{transition:none}
}

/* ═══════════ HERO ═══════════
   Plus de photo ici : du papier, de la typographie, et un silence
   énorme avant l'appel — c'est exactement ce que fait la référence.
   La photo arrive juste dessous, pleine largeur (.plate), pour qu'on
   ne perde pas l'atout qu'elle a et que Breakfast n'a pas. */

/* Le hero tient dans UN écran, appel compris. Il portait
   `calc(4.5rem + var(--air))` en haut, soit près de 270 px de vide sur
   un iPhone : le lettrage tombait au milieu de l'écran et le bouton
   passait sous la ligne de flottaison. Le haut ne dégage plus que la
   barre ; c'est `justify-content:center` qui répartit le reste. */
.hero{min-height:100svh;display:flex;align-items:center;justify-content:center;
  padding:clamp(4.4rem,11vh,6rem) 0 clamp(2rem,5vh,3.5rem)}
.hero__in{width:100%;max-width:46rem;margin:0 auto;padding-inline:var(--gut);
  text-align:center}
.hero__logo{width:clamp(17rem,72vw,26rem);margin:0 auto clamp(1rem,2.6vh,1.8rem)}
.hero__h{font-family:var(--sans);font-weight:300;
  font-size:clamp(2.3rem,9.6vw,4.8rem);line-height:1.02;letter-spacing:-.03em;
  max-width:18ch;margin-inline:auto;text-wrap:balance}
/* l'accent du titre passe en serif italique, à la même échelle */
.hero__h em{font-family:var(--serif);font-style:italic;font-weight:400;
  letter-spacing:-.01em}
.hero__sub{margin-top:clamp(1rem,2.4vh,1.5rem);font-size:clamp(1rem,3.6vw,1.2rem);
  line-height:1.5;max-width:34ch;margin-inline:auto;color:var(--charbon)}

/* le vers fondateur : une inscription, centrée, sous un filet court */
.hero__verse{margin-top:clamp(1.4rem,3.4vh,2.2rem);
  padding-top:clamp(1rem,2.4vh,1.5rem);position:relative}
.hero__verse::before{content:"";position:absolute;top:0;left:50%;
  transform:translateX(-50%);width:2.6rem;height:1px;background:var(--ocre)}
/* deux hémistiches par ligne : un quatrain, pas une ligne qui casse 3+1 */
.hero__verse-ar{display:grid;grid-template-columns:repeat(2,max-content);
  justify-content:center;gap:.1em 1.6em;
  font-family:var(--ar);font-weight:400;
  font-size:clamp(1.35rem,5.4vw,2rem);line-height:1.62;letter-spacing:0;
  color:var(--atlas);direction:rtl;unicode-bidi:isolate;text-align:center}
.hero__verse-tr{margin-top:.6rem;font-family:var(--serif);font-style:italic;
  font-size:clamp(.92rem,3vw,1.1rem);line-height:1.4;color:var(--sauge);
  max-width:36ch;margin-inline:auto}

/* Deux gestes maintenant : rejoindre, et lire la lettre. L'avertissement
   d'origine tient toujours — deux pilules EMPILÉES mangeaient 120 px et
   poussaient l'appel hors de l'écran — donc dès qu'il y a la place elles
   se mettent CÔTE À CÔTE, et le lien des rendez-vous passe à la ligne
   seul. Empilées seulement sous 560 px, là où la hauteur est disponible. */
.hero__cta{display:flex;flex-direction:column;align-items:center;gap:.9rem;
  margin-top:clamp(1.6rem,4vh,2.6rem)}
.hero__cta .btn{width:100%;max-width:22rem}
@media(min-width:560px){
  .hero__cta{flex-flow:row wrap;justify-content:center;gap:.6rem 1.8rem}
  .hero__cta .btn{flex-basis:100%;width:auto;max-width:22rem;margin-inline:auto}
}
/* Écran bas et large : le logo agrandi vaut plus que les trois repères
   et la traduction du vers, qui redisent ce que la page dit déjà plus
   bas. On les retire pour que l'appel reste visible sans défiler. */
@media(max-height:940px) and (min-width:900px){
  /* l'enseigne ne cède rien : c'est le vers qui part. Il est repris mot
     pour mot en bas de page (.join__verse), donc rien n'est perdu. */
  .hero__verse{display:none}
  .hero__h{font-size:clamp(2.8rem,4.4vw,3.9rem)}
  /* une mesure plus large : le sous-titre tient en deux lignes au lieu
     de trois, sans rien perdre du texte */
  .hero__sub{margin-top:clamp(.7rem,1.8vh,1.1rem);max-width:48ch;font-size:1.12rem}
  .hero{padding:clamp(4rem,9vh,5rem) 0 clamp(1.4rem,3vh,2.2rem)}
}
/* Petit téléphone : même arbitrage, l'appel prime sur l'ampleur. */
@media(max-height:730px) and (max-width:899px){
  .hero__verse{display:none}
}

/* les trois repères, centrés sous l'appel */
.hero__marks{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;
  gap:.6rem 1.6rem;margin-top:clamp(1.2rem,3vh,2rem)}
.hero__marks li{display:flex;align-items:center;gap:.5em;font-size:.68rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--sauge)}
/* ocre/écru = 2,85:1, sous les 3:1 des graphiques signifiants. atlas : 5,11:1. */
.hero__marks svg{width:1.1rem;height:1.1rem;flex:none;fill:none;
  stroke:var(--atlas);stroke-width:1.4}

@media(min-width:900px){
  .hero__h{font-size:clamp(3.4rem,5.6vw,5rem)}
  .hero__sub{font-size:1.22rem;max-width:38ch}
}

/* ═══════════ EN-TÊTE D'UNE PAGE INTÉRIEURE ═══════════
   Le même registre que le hero, en deux tiers de hauteur : du papier,
   un œilleton, un titre, l'arabe, les faits, un appel. La photo suit
   en planche pleine largeur. */

.phero{display:flex;align-items:center;justify-content:center;
  min-height:min(72svh,40rem);
  padding:clamp(5.4rem,14vh,8rem) 0 clamp(2rem,5vh,3.5rem)}
.phero__in{width:100%;max-width:42rem;margin:0 auto;padding-inline:var(--gut);
  text-align:center}
.phero__ar{display:block;font-family:var(--ar);font-weight:400;
  font-size:clamp(2.4rem,9vw,3.6rem);line-height:1.2;color:var(--atlas);
  direction:rtl;unicode-bidi:isolate;margin-bottom:.1em}
.phero__h{font-family:var(--sans);font-weight:300;
  font-size:clamp(2.1rem,8.4vw,3.8rem);line-height:1.04;letter-spacing:-.03em;
  max-width:20ch;margin-inline:auto;text-wrap:balance}
.phero__h em{font-family:var(--serif);font-style:italic;font-weight:400}
.phero__sub{margin:clamp(1rem,2.6vh,1.5rem) auto 0;font-size:clamp(1rem,3.4vw,1.15rem);
  line-height:1.5;max-width:34ch;color:var(--charbon)}
.phero__facts{display:flex;flex-wrap:wrap;justify-content:center;gap:.4em 1.2em;
  margin-top:clamp(1rem,2.6vh,1.4rem);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--sauge)}
.phero__facts b{font-weight:500;color:var(--ink)}
.phero__cta{display:flex;flex-direction:column;align-items:center;gap:.9rem;
  margin-top:clamp(1.6rem,4vh,2.4rem)}
.phero__cta .btn{width:100%;max-width:22rem}

/* le fil d'Ariane : une page intérieure doit pouvoir revenir */
.back{display:inline-flex;align-items:center;gap:.5em;min-height:44px;
  font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--sauge)}
.back::before{content:"←";transition:transform .3s var(--ease)}
.back:hover{color:var(--ink)}
.back:hover::before{transform:translateX(-.25em)}

/* le pas suivant, en bas d'une page intérieure.
   margin-top:var(--air) retiré de la règle de base : sur communaute/ et
   manifeste/, .next est seul enfant de son .sec — le padding de .sec
   suffit. Ailleurs (dabke, dinners, tarab, séjour, accueil, galerie),
   .next suit un formulaire ou un titre DANS la même section : il garde
   son grand blanc, porté par le sélecteur ci-dessous. */
.next{padding-top:clamp(1.8rem,4.4vh,2.6rem);
  border-top:1px solid var(--hair)}
.wrap>.next:not(:first-child){margin-top:var(--air)}
.next__k{display:block;font-size:.66rem;letter-spacing:var(--track);
  text-transform:uppercase;color:var(--sauge);margin-bottom:.6rem}

/* ═══════════ LA PLANCHE ═══════════
   Une photo, pleine largeur, sans un mot dessus. Elle tient la place
   que la preuve sociale tient chez la référence : nous n'avons pas
   74 000 membres, nous avons cette lumière. */

.plate{position:relative;overflow:hidden}
.plate img{width:100%;height:clamp(20rem,62vh,40rem);object-fit:cover;
  object-position:50% 58%}
/* Une source trop petite pour la pleine largeur : on borne la planche au
   lieu de l'étirer. dabke.webp ne fait que 474 px de large — à 1440 px
   elle serait agrandie trois fois. */
.plate--small{max-width:46rem;margin-inline:auto}
.plate--small img{height:clamp(18rem,52vh,30rem)}

/* ═══════════ QUI ON EST ═══════════ */

/* margin-top:var(--air) retiré : .three est le premier enfant de son
   .sec (#qui), le padding-top de .sec fait maintenant ce travail. */
.three{list-style:none;display:grid;gap:0}
.three li{display:grid;gap:.5rem;justify-items:center;
  padding-block:clamp(2rem,5vh,3rem);border-top:1px solid var(--hair)}
.three__n{font-size:.64rem;letter-spacing:var(--track);color:var(--atlas)}
.three__i{width:3.4rem;height:3.4rem;display:grid;place-items:center;
  border:1px solid var(--hair);border-radius:var(--pill)}
/* ocre/écru = 2,85:1, sous 3:1 : atlas, 5,11:1. */
.three__i svg{width:1.6rem;height:1.6rem;fill:none;stroke:var(--atlas);stroke-width:1.3}
.three__ar{font-family:var(--ar);font-size:clamp(1.5rem,5.4vw,1.9rem);line-height:1.5;
  color:var(--atlas);direction:rtl;unicode-bidi:isolate}
.three__t{font-family:var(--serif);font-size:clamp(1.2rem,4vw,1.45rem);line-height:1.2}
.three__d{font-size:.95rem;line-height:1.6;color:var(--sauge);max-width:34ch}

@media(min-width:820px){
  .three{grid-template-columns:repeat(3,1fr);gap:clamp(1.6rem,4vw,3rem)}
  .three li{border-top:0;padding-block:0}
}

/* ═══════════ LA LETTRE ═══════════ */

.letter__salut{font-family:var(--serif);font-size:clamp(1.1rem,3.6vw,1.35rem);
  color:var(--atlas)}
.letter__lede{margin-top:1.1em;font-family:var(--serif);max-width:42ch;margin-inline:auto;
  font-size:clamp(1.4rem,5vw,2rem);line-height:1.3;max-width:28ch;margin-inline:auto}
.letter__lede em{font-style:italic;color:var(--atlas);display:block;margin-top:.35em}
/* Une lettre se lit, elle ne se contemple pas : centrée, chaque ligne
   repart d'une abscisse différente et l'œil perd le début de la ligne
   suivante. Le corps passe donc au fer à gauche — c'est le seul bloc du
   site qui quitte le centrage, parce que c'est le seul texte long. */
.letter__p{margin-top:1.5em;max-width:42ch;margin-inline:auto;color:var(--charbon);
  text-align:left}
.letter__closing{margin-top:1.6em;color:var(--sauge)}
.letter__ahlan{font-family:var(--ar);font-size:clamp(2.2rem,10vw,3.4rem);line-height:1.2;
  color:var(--atlas);direction:rtl;unicode-bidi:isolate;margin-top:.3em}
.letter__sign{font-family:var(--serif);font-size:1.25rem;margin-top:1rem}

/* ═══════════ CE QU'ON LAISSE / CE QU'ON BÂTIT ═══════════ */

.matrix{margin-top:var(--air);border-top:1px solid var(--hair-strong);text-align:left}
.matrix__row{display:grid;gap:.9rem;padding-block:clamp(1.6rem,4vh,2.4rem);
  border-bottom:1px solid var(--hair)}
.matrix__k{font-size:.64rem;letter-spacing:var(--track);text-transform:uppercase;
  color:var(--atlas)}
.matrix__out,.matrix__in{display:flex;flex-direction:column;gap:.35rem;max-width:34ch}
.matrix__lab{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--sauge)}
.matrix__out p{color:var(--sauge)}
.matrix__in p{font-family:var(--serif);font-size:1.12rem;line-height:1.36;
  color:var(--ink)}

@media(min-width:820px){
  .matrix__row{grid-template-columns:minmax(7rem,13%) 1fr 1fr;gap:2.4rem;
    align-items:start}
}

/* ═══════════ LES QUATRE PILIERS ═══════════
   Le texte vit SUR la photo : voile global + dégradé bas réglés par
   carte (--veil / --s1..--s5), parce que le surfeur au couchant et le
   ciel étoilé n'ont pas la même luminosité. */

.pillars{background:var(--sable)}
.grid4{display:grid;gap:clamp(.9rem,2vw,1.4rem);margin-top:var(--air)}
.pil{position:relative;display:flex;align-items:flex-end;overflow:hidden;
  min-height:clamp(24rem,52vh,34rem);border-radius:var(--card);isolation:isolate}
.pil img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:var(--focus,50% 50%);transition:transform 1.1s var(--ease)}
.pil::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(to top,
      rgba(10,18,25,var(--s1,.9)) 0%,rgba(10,18,25,var(--s2,.8)) 22%,
      rgba(10,18,25,var(--s3,.5)) 48%,rgba(10,18,25,var(--s4,.2)) 72%,
      rgba(10,18,25,var(--s5,.05)) 100%),
    linear-gradient(0deg,rgba(10,18,25,var(--veil,.06)),rgba(10,18,25,var(--veil,.06)))}
.pil--bright{--veil:.12;--s1:.94;--s2:.88;--s3:.66;--s4:.34;--s5:.10}
.pil--warm{--veil:.05;--s1:.92;--s2:.84;--s3:.58;--s4:.26;--s5:.06}
.pil--dark{--veil:0;--s1:.86;--s2:.74;--s3:.46;--s4:.18;--s5:.03}
.pil__in{position:relative;z-index:2;width:100%;
  padding:clamp(1.4rem,3vw,2rem);padding-bottom:clamp(1.6rem,4.5vh,2.4rem);
  color:#fff;text-align:center}
.pil__n{display:block;margin-bottom:.7rem;font-size:.62rem;
  letter-spacing:var(--track);color:rgba(246,243,236,.6)}
.pil__ar{display:block;font-family:var(--ar);font-size:clamp(1.7rem,6vw,2.1rem);
  line-height:1.4;color:var(--ocre);margin-bottom:.1em;   /* sur photo sombre : 5,97:1 */
  direction:rtl;unicode-bidi:isolate}
.pil__t{display:block;font-family:var(--serif);font-weight:400;
  font-size:clamp(1.3rem,4.4vw,1.6rem);line-height:1.1}
.pil__d{display:block;margin:.6rem auto 0;font-size:.88rem;line-height:1.5;
  max-width:28ch;color:rgba(246,243,236,.82)}

@media(min-width:720px){.grid4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.grid4{grid-template-columns:repeat(4,1fr)}}
@media(hover:hover){.pil:hover img{transform:scale(1.05)}}

/* ═══════════ LES RENDEZ-VOUS ═══════════
   La grille « EPISODES » de la référence : portrait 3:4, un numéro en
   serif italique posé sur la photo, le nom dessus, et la métadonnée
   centrée SOUS la carte. Nos portes s'ouvrent en plus sur place —
   <details> pour que ça marche sans JavaScript. */

.doors{display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(1.2rem,3.4vw,3rem);margin-top:clamp(2rem,5vh,4rem)}
/* Une carte est un LIEN vers sa page. Elle a porté un <details> et son
   formulaire pendant une journée ; Moataz veut l'accueil court, donc le
   détail et le formulaire vivent sur la page de chaque rendez-vous. */
.door{display:block;text-align:center}
.door__ph{position:relative;display:block;overflow:hidden;background:var(--sable);
  border-radius:var(--card)}
.door__ph img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/4;
  transition:transform 1.1s var(--ease)}
/* Le nom arabe est posé en HAUT et AU CENTRE de la photo : c'est lui
   qui nomme la carte, il ne se lit pas comme une légende de bas de page.
   Le voile du haut devient donc le fort — c'est lui qui le porte. */
.door__ph::before{content:"";position:absolute;inset:0 0 auto 0;height:52%;z-index:1;
  pointer-events:none;
  background:linear-gradient(to bottom,rgba(10,18,25,.72),rgba(10,18,25,0))}
.door__ar{position:absolute;top:.8rem;left:0;right:0;z-index:2;
  font-family:var(--ar);font-size:clamp(1.6rem,5.6vw,2rem);line-height:1.35;
  color:#fff;direction:rtl;unicode-bidi:isolate;text-align:center}
/* le numéro descend en bas à droite : au centre-haut il entrait en
   collision avec l'arabe dans une vignette de 165 px */
.door__ph::after{content:"";position:absolute;inset:auto 0 0 0;height:30%;z-index:1;
  pointer-events:none;
  background:linear-gradient(to top,rgba(10,18,25,.55),rgba(10,18,25,0))}
.door__ep{position:absolute;bottom:.7rem;right:.9rem;z-index:2;
  font-family:var(--serif);font-size:clamp(1rem,3.2vw,1.3rem);color:#fff;
  letter-spacing:.01em;opacity:.9}
.door__ep i{font-style:italic;opacity:.85;margin-right:.1em}
.door__t{display:block;margin-top:clamp(.9rem,2.4vh,1.2rem);font-family:var(--serif);
  font-weight:400;font-size:clamp(1.2rem,4.4vw,1.5rem);line-height:1.15}
.door__facts{display:flex;flex-wrap:wrap;justify-content:center;gap:.3em 1em;
  margin-top:.5rem;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--sauge)}
.door__facts b{font-weight:500;color:var(--ink)}
/* le libellé d'ouverture : une pilule fantôme, pas un lien perdu */
.door__go{display:inline-flex;align-items:center;gap:.5em;margin-top:1.1rem;
  min-height:46px;padding:0 1.4em;border:1px solid rgba(12,24,36,.48);
  border-radius:var(--pill);font-size:.74rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink);transition:.3s var(--ease)}
.door__go::after{content:"→";transition:transform .35s var(--ease)}
.apply[open] .door__go::after{transform:rotate(90deg)}

@media(hover:hover){
  .door:hover .door__ph img{transform:scale(1.04)}
  .door:hover .door__go{border-color:var(--atlas);color:var(--atlas)}
  .door:hover .door__go::after{transform:translateX(.25em)}
}
/* le tap n'a pas de :hover : la carte entière EST le lien sur mobile,
   elle doit donc répondre au doigt hors de la garde hover:hover. */
.door:active .door__ph img{transform:scale(1.02)}
.door:active .door__go{border-color:var(--atlas);color:var(--atlas)}
/* Sur téléphone les quatre portes forment un carré régulier : 2 × 2,
   même ratio, comme la grille d'épisodes de la référence. Le séjour ne
   s'étale qu'à partir du moment où il y a trois colonnes, sinon la
   troisième carte reste seule sur sa ligne. */
@media(min-width:760px){
  .doors{grid-template-columns:repeat(3,1fr)}
  .door--wide{grid-column:1 / -1}
  .door--wide .door__ph img{aspect-ratio:16/7}
  .door--wide .door__ar{font-size:clamp(1.8rem,3vw,2.4rem)}
}
/* deux colonnes à 390 px : on resserre ce qui vit sous la carte, et la
   description tombe — le titre, la date et le prix suffisent à décider */
@media(max-width:759px){
  .door__t{font-size:1.05rem;margin-top:.7rem}
  .door__facts{gap:.2em .6em;font-size:.62rem;letter-spacing:.1em}
  /* La carte EST le lien : dans 165 px la pilule passait à deux lignes
     et déréglait la hauteur des cartes voisines. La référence n'en met
     pas non plus sur ses vignettes. Portée à .doors .door__go — la
     même classe, réutilisée sur séjour/ comme pilule "Remplir la
     candidature" dans un <summary>, doit rester visible là : c'est
     l'action principale de la page sur mobile. */
  .doors .door__go{display:none}
  .door__ar{font-size:1.3rem;top:.6rem}
  .door__ep{font-size:.9rem;bottom:.5rem;right:.7rem}
}

/* ═══════════ LA BANDE GALERIE (accueil) ═══════════
   Un cartel de musée, pas une cinquième porte : pas de Nº, pas de
   door__facts, pas de chrome de carte, pas d'image — la seule image de
   calligraphie qui existe EST la pièce vendue sur galerie/, et la
   montrer ici éventerait l'œuvre. Pleine largeur, fond sable pour se
   détacher du papier écru, filet en haut et en bas. */
.gal{background:var(--sable);border-block:1px solid var(--hair)}
.gal .wrap{padding-block:var(--air)}
.gal__p{margin-top:clamp(1rem,2.6vh,1.4rem);max-width:40ch;
  margin-inline:auto;color:var(--charbon)}
.gal__go{margin-top:clamp(1.6rem,4vh,2.2rem)}

/* ═══════════ LA GALERIE — LA PIÈCE ═══════════
   Des pièces de calligraphie, présentées comme au mur : beaucoup de
   papier autour, un filet, et le cartel sous l'œuvre. Une pièce se
   regarde ; elle ne se vend pas dans une vignette.
   Le fond passe au sable pour détacher l'œuvre de la page. */

/* margin-top:var(--air) retiré : .piece est le premier (et seul) enfant
   de son .sec, le padding-top de .sec fait maintenant ce travail. */
.piece__frame{position:relative;background:var(--sable);
  border:1px solid var(--hair-strong);border-radius:var(--card);
  padding:clamp(2.4rem,9vw,5.5rem);display:grid;place-items:center}
.piece__frame img{width:100%;max-width:26rem;height:auto}
/* sauge/--sable (le fond du cadre) = 4,30:1, sous 4,5 : --atlas, 4,58:1. */
.piece__no{position:absolute;top:clamp(.9rem,2.4vw,1.4rem);
  right:clamp(1rem,2.6vw,1.6rem);font-family:var(--serif);
  font-size:clamp(1rem,3vw,1.3rem);color:var(--atlas)}
.piece__no i{font-style:italic;margin-right:.1em}
.piece__ar{margin-top:clamp(1.6rem,4vh,2.4rem);font-family:var(--ar);
  font-size:clamp(1.9rem,7vw,2.8rem);line-height:1.4;color:var(--atlas);
  direction:rtl;unicode-bidi:isolate}
.piece__t{margin-top:.2em;font-family:var(--serif);font-weight:400;
  font-size:clamp(1.3rem,4.6vw,1.7rem);line-height:1.2}
.piece__note{margin:clamp(.9rem,2.4vh,1.2rem) auto 0;max-width:38ch;
  color:var(--charbon)}

/* le cartel : les mêmes étiquettes que la liste pratique */
.piece__plate{margin:clamp(1.8rem,4.4vh,2.6rem) auto 0;max-width:30rem;
  border-top:1px solid var(--hair-strong);text-align:left}
.piece__plate div{display:grid;grid-template-columns:9rem 1fr;gap:1rem;
  padding-block:clamp(.8rem,2.2vh,1.1rem);border-bottom:1px solid var(--hair)}
.piece__plate dt{font-size:.66rem;letter-spacing:var(--track);
  text-transform:uppercase;color:var(--sauge);padding-top:.25em}
.piece__plate dd{font-size:.98rem;line-height:1.5}
.piece__buy{margin-top:clamp(1.6rem,4vh,2.4rem)}

@media(max-width:519px){
  .piece__plate div{grid-template-columns:1fr;gap:.2rem}
}

/* ═══════════ LE PRATIQUE ═══════════
   Une page de rendez-vous doit répondre aux questions qu'on se pose
   avant de venir : quand, combien de temps, où, combien de places,
   combien ça coûte. Ces valeurs vivent déjà dans site/data/paris.json
   et n'étaient affichées nulle part. Une liste étiquetée, un filet par
   ligne : la réponse courte (« des chaussures plates ») se lit alors
   comme une réponse, pas comme une section avortée. */

.practical{margin:clamp(2rem,5vh,3rem) auto 0;max-width:32rem;
  border-top:1px solid var(--hair-strong);text-align:left}
.practical div{display:grid;grid-template-columns:9.5rem 1fr;gap:1rem;
  padding-block:clamp(.9rem,2.4vh,1.2rem);border-bottom:1px solid var(--hair)}
.practical dt{font-size:.66rem;letter-spacing:var(--track);text-transform:uppercase;
  color:var(--sauge);padding-top:.25em}
.practical dd{font-size:.98rem;line-height:1.5;color:var(--ink)}
.practical dd em{font-style:normal;color:var(--sauge);font-size:.88rem;
  display:block;margin-top:.15em}

@media(max-width:519px){
  .practical div{grid-template-columns:1fr;gap:.2rem}
}

/* la narration d'une page de rendez-vous : un seul bloc, pas deux
   titres serif qui se télescopent */
.tale{margin-inline:auto;max-width:38ch}
.tale p{margin-top:1em;color:var(--charbon)}

/* ═══════════ RSVP — trois champs, rien de plus ═══════════ */

.rsvp{display:grid;gap:.9rem;max-width:24rem;margin-inline:auto;position:relative;
  text-align:left}
.rsvp__hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.rsvp__f{display:grid;gap:.4rem}
.rsvp__f span{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--sauge)}
/* 16px : en dessous, iOS zoome au focus et casse la mise en page.
   rgba(12,24,36,.26) = 1,76:1, sous les 3:1 du seul contour visible
   d'un champ (SC 1.4.11). .48 : 3,15:1. */
.rsvp__f input,.step input,.step textarea,.step select,.capture__f input{
  font-size:16px;width:100%;min-height:50px;padding:.75em 1em;background:transparent;
  border:1px solid rgba(12,24,36,.48);border-radius:10px;color:var(--ink);
  font-family:var(--sans)}
.rsvp__f input:focus{outline:2px solid var(--atlas);outline-offset:1px;
  border-color:var(--atlas)}
.rsvp__msg{min-height:1.2em;font-size:.85rem;color:var(--atlas)}
.rsvp__note{font-size:.76rem;line-height:1.5;color:var(--sauge)}
.thanks{font-family:var(--serif);font-size:1.15rem;line-height:1.45;color:var(--ink)}

/* ═══════════ LE SÉJOUR ═══════════ */

.night{position:relative;overflow:hidden;background:var(--nuit);color:var(--ecru);
  padding-block:var(--air)}
.night::before{content:"";position:absolute;inset:0;z-index:0;
  background-image:url("../img/v3/the.webp");background-size:cover;
  background-position:50% 65%;filter:saturate(.75) brightness(.5);opacity:.5}
.night::after{content:"";position:absolute;inset:0;z-index:1;background:
  radial-gradient(110% 75% at 50% 12%,rgba(217,119,54,.26) 0%,rgba(8,17,26,0) 62%),
  linear-gradient(180deg,rgba(8,17,26,.78) 0%,rgba(8,17,26,.5) 40%,rgba(8,17,26,.95) 100%)}
.night>*{position:relative;z-index:2}
.night__k{font-size:clamp(1.5rem,6.6vw,2.8rem);line-height:1;font-weight:400;
  letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--ecru);
  margin-bottom:clamp(1.2rem,3vh,1.8rem)}
.tag{display:block;margin-bottom:1.6em;font-size:.66rem;letter-spacing:.26em;
  text-transform:uppercase;color:rgba(246,243,236,.55)}

.rhythm{list-style:none;margin:1.4em auto 0;max-width:30rem;text-align:left}
.rhythm li{display:flex;gap:1.4em;padding:1em 0;border-top:1px solid var(--hair-light);
  font-size:.98rem;color:rgba(246,243,236,.85)}
.rhythm li:first-child{border-top:0}
.rhythm li span:first-child{color:var(--ocre);min-width:3.6em;
  font-variant-numeric:tabular-nums}

.cal{list-style:none;margin-top:1.4em;text-align:left}
.cal li{display:flex;flex-direction:column;gap:.15em;padding:1.1em 0;
  border-top:1px solid var(--hair-light);font-size:.92rem;
  color:rgba(246,243,236,.85)}
.cal li:first-child{border-top:0}
/* sauge sur le fond composite de .night = 3,57:1, sous 4,5 : le même
   blanc-sur-nuit que le reste de la citation (.rhythm, .tag), à une
   opacité qui tient 7,56:1. */
.cal li span:first-child{color:rgba(246,243,236,.65);font-size:.74rem;letter-spacing:.06em;
  text-transform:uppercase}
.cal li span:nth-child(2){font-family:var(--serif);font-size:1.2rem;color:var(--ecru)}
.cal em{font-style:normal;color:rgba(246,243,236,.55);font-size:.8rem}

/* l'argent et la réassurance restent sur l'écru, jamais sur la nuit */
.money{margin-top:clamp(2rem,5vh,3rem)}
.money__n{font-family:var(--serif);font-weight:400;font-size:clamp(2.6rem,11vw,3.8rem);
  line-height:1}
.money__lede{margin-top:.2em;font-family:var(--serif);
  font-size:clamp(1.15rem,4vw,1.5rem);color:var(--sauge)}
.money__facts{margin:1.6em auto 0;font-size:.9rem;color:var(--sauge);max-width:44ch}
.pair{display:grid;gap:1.8rem;margin-top:2.2em}
.pair h3{font-family:var(--serif);font-weight:400;font-size:1.1rem;margin-bottom:.35em}
.pair p{color:var(--charbon);max-width:32ch;margin-inline:auto}
.guarantee{margin-top:clamp(2rem,5vh,3rem);border-top:1px solid var(--hair);
  border-bottom:1px solid var(--hair);padding-block:clamp(1.8rem,5vh,2.6rem)}
.guarantee h3{font-family:var(--serif);font-weight:400;
  font-size:clamp(1.4rem,5.4vw,2rem);margin-bottom:.5em}
.guarantee p{max-width:44ch;margin-inline:auto;color:var(--charbon)}

.gauge{font-family:var(--serif);font-size:clamp(1.8rem,7vw,2.6rem);margin-top:.3em}
.gauge__bar{position:relative;height:3px;background:var(--hair-strong);
  margin:1em auto 0;max-width:22rem;overflow:hidden;border-radius:var(--pill)}
.gauge__bar span{position:absolute;inset:0 auto 0 0;display:block;
  width:var(--fill,0%);background:var(--ocre)}

@media(min-width:900px){
  .pair{grid-template-columns:1fr 1fr;gap:3vw}
  .rhythm li,.cal li{flex-direction:row;align-items:baseline;
    justify-content:space-between}
  .cal li span:first-child{min-width:12ch}
}

/* ─── la candidature : six étapes, quinze questions, derrière un volet ─── */
.apply{margin-top:clamp(2.4rem,6vh,3.4rem);border-top:1px solid var(--hair);
  padding-top:clamp(1.8rem,4.4vh,2.6rem)}
.apply__sum{display:grid;gap:.7rem;justify-items:center;cursor:pointer;
  list-style:none}
.apply__sum::-webkit-details-marker{display:none}
.quiz{margin:clamp(1.6rem,4vh,2.4rem) auto 0;max-width:32rem;position:relative;
  text-align:left}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.step{border:0;padding:0;margin:0}
.step[hidden]{display:none}
.progress{margin-bottom:2em;font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--sauge)}
.quiz legend{font-family:var(--serif);font-size:1.35rem;margin-bottom:.8em}
.quiz label{display:block;margin-top:1.2em;margin-bottom:.4em;font-size:.88rem;
  color:var(--sauge)}
.quiz textarea{min-height:8em;resize:vertical}
.quiz label input[type="radio"]{width:auto;min-height:auto;margin-right:.5em}
.quiz .radio-row{display:flex;align-items:center;min-height:44px}
/* un groupe de radios porte sa propre question : un <p> muet laissait
   un lecteur d'écran annoncer "Oui" sans dire de quoi. Le <legend> du
   step (gros, serif) ne convient pas à une question — même gabarit que
   .quiz label. */
.radio-group{border:0;padding:0;margin-top:1.2em}
.radio-group legend{all:unset;display:block;margin-bottom:.4em;
  font-size:.88rem;color:var(--sauge)}
.quiz .btn{margin-top:2em;margin-right:.8em;width:auto}
.formmsg{margin-top:1em;font-size:.88rem;color:var(--sauge)}

/* ═══════════ REJOINDRE ═══════════
   Le barreau le plus bas de l'échelle, et pour l'instant le seul
   gratuit : ni le groupe WhatsApp ni le compte Instagram n'existent.
   Tant qu'ils n'existent pas, leurs boutons se retirent d'eux-mêmes
   (links.js) — jamais un lien mort. */

.join{position:relative;overflow:hidden;color:#fff;isolation:isolate;
  padding-block:clamp(3rem,8vh,7rem)}
.join>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.92) contrast(1.04)}
.join::after{content:"";position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(180deg,rgba(8,14,22,.74) 0%,rgba(8,14,22,.46) 40%,rgba(8,14,22,.9) 100%)}
.join .wrap{position:relative;z-index:1}
.join__ar{font-family:var(--ar);font-weight:400;font-size:clamp(3rem,13vw,5.4rem);
  line-height:1;color:var(--ocre);direction:rtl;unicode-bidi:isolate}  /* fond nuit */
.join__t{margin-top:clamp(.8rem,2.2vh,1.2rem);font-family:var(--serif);font-weight:400;
  font-size:clamp(1.9rem,5.4vw,3rem);line-height:1.06;letter-spacing:-.02em;
  max-width:22ch;margin-inline:auto}
.join__p{margin:clamp(.9rem,2.4vh,1.2rem) auto 0;max-width:36ch;
  color:rgba(255,255,255,.86)}

/* la capture : un champ, un bouton, aucune promesse fausse */
.capture{margin:clamp(1.8rem,4.4vh,2.6rem) auto 0;max-width:26rem;position:relative}
.capture__f{display:grid;gap:.4rem;text-align:left}
.capture__f span{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.72)}
.capture__f input{background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.42);color:#fff}
.capture__f input:focus{outline:2px solid var(--atlas);outline-offset:1px}
.capture .btn{margin-top:1rem;width:100%}
.capture__note{margin-top:.9rem;font-size:.74rem;line-height:1.5;
  color:rgba(255,255,255,.6)}
.capture__msg{min-height:1.2em;margin-top:.6rem;font-size:.85rem;color:#F3D9C4}
.capture .thanks{color:#fff}

/* les autres portes, si un jour elles existent */
.join__else{display:flex;flex-wrap:wrap;justify-content:center;gap:1.4rem;
  margin-top:clamp(1.6rem,4vh,2.2rem)}
.join__else a{min-height:44px;display:inline-flex;align-items:center;
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.8);border-bottom:1px solid rgba(255,255,255,.3)}
.join__else a:hover{color:#fff;border-bottom-color:#fff}
.join__verse{display:flex;flex-wrap:wrap;justify-content:center;gap:.4em 1.4em;
  margin-top:clamp(2rem,5vh,3.5rem);font-family:var(--ar);
  font-size:clamp(1.1rem,4.2vw,1.5rem);line-height:1.6;
  color:rgba(248,220,180,.72);direction:rtl;unicode-bidi:isolate}

/* ═══════════ BARRE FIXE MOBILE ═══════════
   Sur un tap Instagram, l'action ne doit jamais être hors-champ. */

/* la barre fixe porte du texte : fond atlas, pas ocre */
.stickybar{position:fixed;left:var(--gut);right:var(--gut);
  bottom:calc(.9rem + env(safe-area-inset-bottom));z-index:70;display:none;
  align-items:center;justify-content:center;gap:.8em;
  padding:1em 1.4em;border-radius:var(--pill);
  background:var(--atlas);color:#fff;font:500 .92rem/1 var(--sans);
  transform:translateY(160%);transition:transform .35s ease}
.stickybar.is-up{transform:none}
/* :active en fond, pas en transform : translateY porte déjà l'état
   affiché/caché de la barre, un scale au tap l'écraserait. */
.stickybar:active{background:#8C3A20}

@media(max-width:899px){
  .stickybar{display:flex}
  body:has(.stickybar) .foot{padding-bottom:calc(14vh + env(safe-area-inset-bottom))}
}

/* ═══════════ PIED ═══════════ */

/* padding-top réduit : les 8 pages ferment toutes sur un .sec, qui
   porte maintenant son propre padding-bottom:var(--air) — sans ce
   réglage les deux s'additionnaient avant le pied. */
.foot{padding:clamp(1.8rem,4.4vh,2.6rem) 0 calc(clamp(2.4rem,6vh,4rem) + env(safe-area-inset-bottom));
  border-top:1px solid var(--hair);font-size:.86rem;color:var(--sauge)}
.foot__in{display:grid;gap:1.8rem;justify-items:center;text-align:center}
.foot b{font-weight:500;color:var(--ink)}
/* .2rem de rangée ≈ 3px entre deux cibles de 44px une fois repliées :
   au doigt, ça colle. */
.foot nav{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem 1.2rem}
.foot nav a{display:inline-flex;align-items:center;min-height:44px;
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
.foot nav a:hover{color:var(--ink)}
.foot__ar{display:block;font-family:var(--ar);font-size:1.6rem;color:var(--atlas);
  direction:rtl;unicode-bidi:isolate;margin-bottom:.3em}
.foot__sign{max-width:40ch;margin-inline:auto}

/* ═══════════ FINITIONS ═══════════ */

/* une liste de classes nues compterait comme une re-déclaration de
   chacune (tests/test_css.py) : on vise donc les éléments de texte. */
p,li,figcaption,dd,h1,h2,h3{text-wrap:pretty}

@media(max-width:719px){
  .foot p a,.foot__in p a{display:inline-flex;align-items:center;min-height:44px}
}
/* un écran court : le vers cède avant l'appel, jamais l'inverse */
@media(max-height:730px) and (max-width:900px){
  .hero__marks{display:none}
  .hero__verse-tr{display:none}
}

/* ═══════════ LA GALERIE — LA GRILLE D'AFFICHES ═══════════
   Un mur, pas une boutique : le cadre est un filet d'un pixel sur le
   sable, l'affiche respire dans sa marge, et le cartel se lit SOUS
   l'image comme au musée. Le numéro est posé dans le cadre, en bas à
   droite, là où un tirage le porterait.
   9:16 : ce sont des formats story, on ne les recadre pas. */
.gx{background:var(--sable);border-block:1px solid var(--hair)}
.gx__g{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(1.6rem,3.4vw,3.2rem);margin-top:clamp(2rem,5vh,3.4rem)}
.gx__it{text-align:center}
.gx__fr{position:relative;display:block;padding:clamp(.7rem,1.8vw,1.1rem);
  background:var(--ecru);border:1px solid var(--hair-strong);
  border-radius:var(--card);transition:border-color .4s var(--ease)}
.gx__fr:hover{border-color:var(--atlas)}
.gx__fr img{width:100%;height:auto;aspect-ratio:1152/2048;object-fit:cover;
  border-radius:calc(var(--card) - 6px)}
.gx__no{position:absolute;right:clamp(1.1rem,2.4vw,1.7rem);
  bottom:clamp(1.1rem,2.4vw,1.7rem);font-family:var(--serif);
  font-size:clamp(.85rem,2.2vw,1.05rem);color:#fff;letter-spacing:.04em}
.gx__no i{font-style:italic;margin-right:.1em}
.gx__ar{margin-top:clamp(.9rem,2.2vh,1.2rem);font-family:var(--ar);
  font-size:clamp(1.25rem,3.4vw,1.6rem);line-height:1.4;color:var(--atlas);
  direction:rtl;unicode-bidi:isolate}
.gx__t{margin-top:.1em;font-family:var(--serif);font-weight:400;
  font-size:clamp(1.05rem,2.8vw,1.3rem);line-height:1.2}
.gx__n{margin:.4em auto 0;max-width:30ch;font-size:.9rem;line-height:1.5;
  color:var(--charbon)}
.gx .piece__plate{margin-top:clamp(2.4rem,6vh,3.6rem)}

@media(max-width:1023px){
  .gx__g{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:639px){
  .gx__g{grid-template-columns:1fr;max-width:22rem;margin-inline:auto}
}

/* Deux crans plus bas encore : un portable 1280×800 et un petit
   téléphone. Même arbitrage que plus haut — l'appel doit rester dans
   l'écran, l'enseigne cède les derniers pixels, jamais le texte. */
@media(max-height:840px) and (min-width:900px){
  .hero__h{font-size:clamp(2.5rem,4vw,3.4rem)}
}
@media(max-height:730px) and (max-width:899px){
  .hero{padding:clamp(3.6rem,8vh,4.4rem) 0 clamp(1.2rem,2.6vh,1.8rem)}
  .hero__verse{margin-top:clamp(.8rem,2vh,1.2rem);padding-top:clamp(.6rem,1.4vh,.9rem)}
}

/* L'enseigne passe à 26rem : sur un téléphone, le quatrain du hero ne
   tient plus avec elle. Il part sur toute la largeur mobile — il est
   repris mot pour mot en bas de page (.join__verse).
   Et sur un écran bas et large, les trois repères cèdent aussi : cette
   règle doit venir APRÈS la déclaration de base de .hero__marks, sinon
   l'ordre des sources la neutralise (c'était le cas de la précédente). */
@media(max-width:899px){
  .hero__verse{display:none}
}
@media(max-height:940px) and (min-width:900px){
  .hero__marks{display:none}
}