/* ============================================================
   AKRAME — Page "Opening Soon"
   ============================================================ */

/* ---------- Scène (une seule page, sans scroll) ---------- */
/* Page d'accueil : un seul écran, jamais de défilement. Règle volontairement
   placée ici et non dans base.css, que partagent les pages légales. */
body{ height:100svh; overflow:hidden; }

.stage{ position:relative; height:100svh; display:flex; flex-direction:column;
  isolation:isolate; overflow:hidden; }

/* Fond : image plein cadre + Ken-Burns lent */
.hero__media{ position:absolute; inset:0; z-index:-3; }
.hero__img{ width:100%; height:100%; object-fit:cover; object-position:center 52%;
  /* rendu terrasse HD (1470→2058 px) traité "heure dorée / crépuscule" :
     assombri + chaud pour l'ambiance étoilée et la lisibilité du texte */
  filter:contrast(1.1) saturate(1.05) brightness(.74) sepia(.06);
  transform:scale(1.05); animation:kenburns 34s var(--ease) infinite alternate; }
/* zoom volontairement limité : sur une source non-HD, trop zoomer révélerait le flou */
@keyframes kenburns{ from{ transform:scale(1.04) translate3d(0,0,0);} to{ transform:scale(1.11) translate3d(0,-1.5%,0);} }

/* Voile pour la lisibilité + vignette + grain */
.hero__scrim{ position:absolute; inset:0; z-index:-2; background:var(--scrim); }
.hero__vignette{ position:absolute; inset:0; z-index:-2; pointer-events:none;
  background:radial-gradient(130% 100% at 50% 44%, transparent 52%, rgba(6,4,3,.56) 100%); }
.hero__grain{ position:absolute; inset:-50%; z-index:-1; pointer-events:none; opacity:.10;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(6) infinite; }
@keyframes grain{ 0%{transform:translate(0,0)}100%{transform:translate(-6%, -4%)} }

/* ---------- Barre haute : marque + langue ---------- */
.topbar{ position:relative; z-index:2; display:flex; align-items:center; justify-content:flex-end;
  gap:16px; padding:clamp(18px,3.4vw,30px) var(--pad); }
.lang{ display:inline-flex; align-items:center; gap:2px; border:1px solid rgba(200,168,122,.32);
  border-radius:var(--radius); padding:4px; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  background:rgba(8,6,4,.28); }
.lang__btn{ font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--c-muted); padding:5px 11px; border-radius:var(--radius); transition:.25s var(--ease); }
.lang__btn[aria-pressed="true"]{ background:var(--c-gold); color:var(--c-noir); }
.lang__btn:hover{ color:var(--c-cream); }
.lang__btn[aria-pressed="true"]:hover{ color:var(--c-noir); }

/* ---------- Contenu central ---------- */
.hero{ position:relative; z-index:1; flex:1 1 auto; min-height:0; display:grid; place-items:center;
  text-align:center; padding:6px var(--pad) 10px; overflow:hidden; }
.hero__inner{ width:100%; max-width:var(--maxw); }


.wordmark{ font-size:var(--fs-display); line-height:.92; color:var(--c-cream); margin:0; }

/* ---- Logo officiel : hampe Λ (masque teintable) + KRAME typographié ---- */
.lock{ position:relative; display:inline-flex; align-items:flex-end; justify-content:center; line-height:1; }
/* halo chaud très diffus : le logo semble éclairé par la salle, pas "collé" */
.lock::before{ content:""; position:absolute; inset:-55% -34%; z-index:-1; pointer-events:none;
  background:radial-gradient(48% 56% at 50% 46%, rgba(176,144,80,.13), transparent 68%); filter:blur(20px); }
.lock__mark{ display:block; height:1.42em; width:auto; color:var(--c-cream);
  margin:0 .05em -.07em -.02em; overflow:visible;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.5)); }
.lock__name{ font-family:var(--ff-sans); font-weight:300; font-size:.56em; letter-spacing:.24em;
  color:var(--c-cream); padding-left:.04em;
  text-shadow:0 10px 44px rgba(0,0,0,.5); }

.rule{ width:0; height:1px; margin:clamp(20px,3vw,30px) auto; background:var(--c-gold);
  box-shadow:0 0 18px rgba(176,144,80,.5); animation:rule-in 1.4s .5s var(--ease-out) forwards; }
@keyframes rule-in{ to{ width:clamp(54px,8vw,96px); } }

.lead{ font-family:var(--ff-serif); font-style:italic; font-weight:300;
  font-size:var(--fs-sub); line-height:1.34; color:var(--c-cream); margin:0 auto;
  max-width:22ch; text-shadow:0 2px 26px rgba(6,4,3,.72); }
.subline{ margin:14px auto 0; max-width:40ch; color:var(--c-stone-2); font-size:var(--fs-body);
  text-shadow:0 2px 20px rgba(6,4,3,.7); }

/* ---------- Formulaire newsletter ---------- */
.notify{ margin-top:clamp(30px,4.5vw,44px); }
.notify__label{ display:block; font-size:11px; font-weight:600; letter-spacing:var(--ls-mid);
  text-transform:uppercase; color:var(--c-stone); margin-bottom:14px; }
.field{ display:flex; align-items:stretch; width:min(460px,100%); margin:0 auto;
  border:1px solid rgba(200,168,122,.42); border-radius:var(--radius); overflow:hidden;
  background:rgba(17,16,9,.42); -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px);
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease); }
/* Focus : double anneau doré, diffus puis net. Plus lisible (accessibilité)
   et plus habillé qu'un simple contour. */
.field:focus-within{ border-color:var(--c-gold);
  box-shadow:0 0 0 3px rgba(176,144,80,.20), 0 0 26px rgba(176,144,80,.16); }
.field input[type="email"]{ flex:1; min-width:0; border:0; outline:0; background:transparent;
  color:var(--c-cream); padding:0 20px; font-size:15px;
  caret-color:var(--c-gold); }          /* curseur de saisie doré : détail couture */
.field input::placeholder{ color:var(--c-muted); transition:color .25s var(--ease); }
.field:focus-within input::placeholder{ color:rgba(200,168,122,.55); }
.field button{ position:relative; display:inline-flex; align-items:center; gap:9px; white-space:nowrap;
  background:var(--c-gold); color:var(--c-noir); font-weight:700; font-size:12px;
  letter-spacing:.14em; text-transform:uppercase; padding:15px 26px;
  transition:filter .2s var(--ease), transform .2s var(--ease), color .2s var(--ease); }
.field button:hover{ filter:brightness(1.07); }
.field button:active{ transform:translateY(1px); }

/* Pendant l'envoi : le libellé s'efface et un fin anneau tourne à sa place.
   Sans cela le clic paraît mort le temps de l'aller-retour réseau. */
.notify.is-sending .field button{ color:transparent; cursor:progress; }
.notify.is-sending .field button::after{
  content:""; position:absolute; inset:0; margin:auto; width:15px; height:15px;
  border:2px solid rgba(8,6,4,.28); border-top-color:var(--c-noir);
  border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.consent{ display:flex; gap:9px; align-items:flex-start; justify-content:center;
  max-width:440px; margin:14px auto 0; font-size:12px; line-height:1.5; color:var(--c-muted);
  text-align:left; cursor:pointer; }
.consent input{ margin-top:2px; flex:none; width:15px; height:15px; accent-color:var(--c-gold); }
.consent a{ color:var(--c-stone); text-decoration:underline; text-underline-offset:2px; }
/* Le message arrive en fondu-montée plutôt qu'en surgissant. */
.form-msg{ min-height:1.2em; margin-top:12px; font-size:13px; font-weight:500;
  color:var(--c-stone-2); opacity:0; transform:translateY(-4px);
  transition:opacity .34s var(--ease-out), transform .34s var(--ease-out); }
.form-msg.is-shown{ opacity:1; transform:none; }
.form-msg.is-ok{ color:var(--c-stone-2); text-shadow:0 0 18px rgba(176,144,80,.45); }
.form-msg.is-error{ color:#E7B4A0; text-shadow:none; }
.hp{ position:absolute; left:-9999px; opacity:0; height:0; width:0; }

/* ---------- Objectifs secondaires ---------- */
.secondary{ display:flex; align-items:center; justify-content:center; gap:14px 20px;
  flex-wrap:wrap; margin-top:clamp(26px,4vw,38px); }
.pill{ display:inline-flex; align-items:center; gap:9px; padding:11px 20px;
  border:1px solid rgba(200,168,122,.32); border-radius:var(--radius);
  font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--c-text);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); background:rgba(8,6,4,.24);
  transition:.25s var(--ease); }
.pill:hover{ border-color:var(--c-gold); color:var(--c-cream); transform:translateY(-1px); }
.pill svg{ width:16px; height:16px; }

/* ---------- Pied ---------- */
.footer{ position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between;
  gap:12px 24px; flex-wrap:wrap; padding:clamp(18px,3vw,26px) var(--pad);
  font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--c-muted); }
.footer a{ color:var(--c-muted); transition:color .2s var(--ease); }
.footer a:hover{ color:var(--c-cream); }
.footer__find{ display:inline-flex; align-items:center; gap:8px; color:var(--c-stone)!important; }
.footer__find:hover{ color:var(--c-cream)!important; }
.footer__find svg{ width:14px; height:14px; flex:none; color:var(--c-gold); }
.footer__legal{ display:flex; gap:14px; flex-wrap:wrap; }
/* Signature du studio : présente, jamais concurrente de la marque du restaurant.
   Un cran plus effacée que le reste du pied de page, elle remonte au survol. */
.footer__by{ opacity:.55; transition:opacity .25s var(--ease), color .2s var(--ease); }
.footer__by::before{ content:"· "; opacity:.6; }
.footer__by:hover, .footer__by:focus-visible{ opacity:1; }
.dot{ opacity:.5; }

/* Le bandeau cookies a été retiré : la page ne dépose aucun cookie et ne charge
   aucun traceur. Les styles .cookie et .btn ne servaient qu'à lui. */

/* ---------- Révélations à l'apparition ---------- */
/* Fondu-flou : l'élément semble se poser plutôt que d'apparaître. */
.reveal{ opacity:0; transform:translateY(16px); filter:blur(7px); }
.is-ready .reveal{ animation:reveal-up 1s var(--ease-out) forwards; animation-delay:var(--d,0s); }
@keyframes reveal-up{ to{ opacity:1; transform:none; filter:blur(0); } }

/* ---------- Responsive ---------- */
@media (max-width:560px){
  .field{ flex-direction:column; border-radius:22px; }
  .field input[type="email"]{ padding:15px 18px; text-align:center; }
  .field button{ justify-content:center; padding:14px; }
  .footer{ justify-content:center; text-align:center; }
  /* recadrage portrait de l'image paysage : on montre une zone plus claire, moins assombrie */
  .hero__img{ object-position:center 60%; filter:contrast(1.08) saturate(1.05) brightness(.96) sepia(.05); }
  /* En portrait le contenu descend beaucoup plus bas, sur les zones claires de
     la photo — feuillage et pilier. Le voile d'origine, calibré pour le paysage,
     y laissait la ligne de consentement à la limite du lisible. On assombrit la
     moitié basse sans toucher au cadrage du haut, qui porte le logotype. */
  .hero__scrim{ background:linear-gradient(180deg,
      rgba(8,6,4,.66) 0%,
      rgba(8,6,4,.54) 26%,
      rgba(8,6,4,.84) 64%,
      rgba(8,6,4,.96) 100%); }
}
@media (min-width:1100px){ :root{ --maxw:680px; } }

/* ---------- Page unique sans scroll : compaction par hauteur d'écran ---------- */
@media (max-height:860px){
  .rule{ margin:14px auto; }
  .notify{ margin-top:22px; }
  .secondary{ margin-top:18px; }
  .footer{ padding-block:12px; }
}
@media (max-height:760px){
  .wordmark{ font-size:clamp(38px,11vw,72px); }
  .rule{ margin:11px auto; }
  .lead{ font-size:clamp(15px,4.6vw,20px); }
  .subline{ display:none; }               /* on garde l'essentiel */
  .notify{ margin-top:16px; }
  .notify__label{ margin-bottom:10px; }
  .secondary{ margin-top:14px; }
  .consent{ margin-top:10px; }
}
@media (max-height:640px){
  .rule{ margin:8px auto; }
  .lead{ display:none; }
  .field input[type="email"], .field button{ padding-block:12px; }
  .secondary{ margin-top:10px; }
  .footer__find{ display:none; }           /* l'adresse reste dans les mentions/Google */
}


/* ------------------------------------------------------------
   Respect de la préférence système « réduire les animations »
   La page compte cinq animations, dont un zoom de 34 secondes sur
   la photographie et un grain animé. Pour une personne sujette au
   mal des transports ou à des troubles vestibulaires, ce mouvement
   lent et continu peut provoquer un véritable inconfort. Le système
   d'exploitation permet de le signaler ; on l'écoute.
   Le contenu reste entièrement visible : on ne fige que le mouvement.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .hero__img { transform: none; }
  .reveal, .fu { opacity: 1 !important; transform: none !important; }
}


/* ------------------------------------------------------------
   descente-logo
   Le bloc du héros est centré d'un seul tenant : le logo, qui le
   coiffe, se retrouve donc nettement au-dessus du centre de la page.
   Mesuré sur une fenêtre de 824 px : centre du logo à 249 px pour un
   centre de page à 412 px.
   On le fait descendre de la marge réellement disponible — 51 px
   avant que le bas du bloc n'atteigne le pied de page. Le décalage
   passe par transform, qui ne déplace rien dans le flux et ne peut
   donc pas provoquer de chevauchement au recalcul.
   Il ne s'applique qu'au-delà de 760 px de hauteur : sous cette
   taille il n'y a aucune marge à prendre.
   ponytail: un centrage parfait du logo supposerait de sortir le
   formulaire du premier écran. Ce n'est pas le compromis voulu.
   ------------------------------------------------------------ */
@media (min-height: 760px) {
  .hero__inner { transform: translateY(clamp(0px, 4vh, 46px)); }
}






/* ------------------------------------------------------------
   Instagram : une pastille qui s'élargit
   Le pictogramme ne bouge jamais. Au survol — ou à l'appui sur
   téléphone — le mot « Instagram » se replie et les deux comptes
   se déploient à sa place, dans la même pastille qui s'allonge.
   Choisi après essai d'un panneau flottant, qui recouvrait le
   formulaire. Ici rien ne se superpose et rien ne descend : la
   pastille est centrée, elle grandit donc symétriquement.
   Les cibles sont immobiles une fois l'ouverture terminée, ce qui
   n'est pas le cas d'un bouton qui se dédouble sous le curseur.
   ------------------------------------------------------------ */
/* gap:0 annule l'espacement hérité de .pill. Il s'appliquait entre le bouton
   et le bloc des deux comptes, y compris quand celui-ci est réduit à zéro :
   9 px de vide fantôme à droite, qui décalaient « Instagram » vers la gauche.
   Mesuré : 21 px à gauche contre 30 à droite. */
.ig { padding: 0; gap: 0; overflow: hidden; max-width: 100%; }

.ig__btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 0 11px 20px; border: 0; background: none;
  font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit;
  cursor: pointer;
}
.ig__glyph { width: 16px; height: 16px; flex: none; }

.ig__word {
  display: inline-block; overflow: hidden; white-space: nowrap;
  min-width: 0; flex: 0 0 auto;
  /* 12em, très au-dessus des 80 px que mesure « INSTAGRAM » padding compris.
     Une valeur juste suffisante rognait le mot : max-width sert ici à replier,
     pas à dimensionner — l'élément se cale de toute façon sur son contenu. */
  max-width: 12em; padding-right: 20px;
  transition: max-width .42s var(--ease), opacity .3s var(--ease), padding-right .42s var(--ease);
}
.ig.is-open .ig__word { max-width: 0; opacity: 0; padding-right: 0; }

.ig__pair {
  display: flex; align-items: center; overflow: hidden; white-space: nowrap;
  /* Deux réglages indissociables, tous deux constatés à l'essai :
     min-width:0 — sans lui, un enfant flexible refuse de descendre sous la
       largeur de son contenu et max-width:0 reste sans effet ;
     flex:0 0 auto — sans lui, l'enfant se laisse comprimer par le parent qui
       se dimensionne sur lui, et la pastille ne s'ouvre plus jamais. */
  min-width: 0; flex: 0 0 auto;
  max-width: 0; opacity: 0;
  transition: max-width .46s var(--ease), opacity .34s var(--ease) .06s;
}
.ig.is-open .ig__pair { max-width: 30em; opacity: 1; }

.ig__item {
  display: flex; flex-direction: column; gap: 1px;
  padding: 7px 16px; border-radius: 4px;
  text-align: left; transition: background .2s var(--ease);
}
.ig__item:hover, .ig__item:focus-visible { background: rgba(200, 168, 122, .12); }

.ig__name   { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: none; color: var(--c-cream); }
.ig__handle { font-size: 10px; letter-spacing: .04em; text-transform: none; color: var(--c-muted); transition: color .2s var(--ease); }
.ig__item:hover .ig__handle, .ig__item:focus-visible .ig__handle { color: var(--c-stone); }

.ig__sep { width: 1px; align-self: stretch; margin: 6px 0; background: rgba(200, 168, 122, .28); flex: none; }

/* Le survol n'ouvre que là où un survol existe. Sur écran tactile,
   seul l'appui ouvre — traité en JavaScript. */
@media (hover: hover) and (pointer: fine) {
  .ig:hover .ig__word { max-width: 0; opacity: 0; padding-right: 0; }
  .ig:hover .ig__pair { max-width: 30em; opacity: 1; }
}

/* Sous 430 px la pastille élargie dépasserait : on resserre. */
@media (max-width: 430px) {
  .ig__item   { padding: 7px 11px; }
  .ig__handle { font-size: 9px; }
}