/* CHEZ ÉTIENNE — Angers (49)
   Fromagerie, épicerie fine, cave.

   L'IDÉE, tenue du haut jusqu'en bas : tout ce qu'il vend, c'est une SOIRÉE
   qu'on rapporte chez soi. Pas du fromage à l'unité : une planche, un
   plateau, une fondue, et le vin qui va avec. Le site est donc une fin de
   journée, pas un catalogue.

   Direction : l'archétype « Editorial Luxury » du skill `soft-skill` —
   fond nuit chaud, serif à fort contraste, grain de pellicule, un seul
   accent or. Deux polices nettement distinctes : Fraunces pour l'affichage,
   Plus Jakarta Sans pour la lecture.

   🔴 Rotation : le site précédent (Eureka) était clair, géométrique, rouge,
   une seule police. Celui-ci est sombre, sériffé, or, deux polices. Deux
   sites d'affilée dans le même langage et le prospect voit le moule.

   Mobile d'abord. Aucune dépendance. */

/* ═══════════════════════════════════════════════════════════════
   JETONS — trois couches : primitive, sémantique, composant.
   ═══════════════════════════════════════════════════════════════ */
:root{
  /* ── 1. primitives ── */
  --nuit-900:#17120E; --nuit-800:#1F1913; --nuit-700:#2A2219; --nuit-600:#3A3025;
  --creme-50:#F7F2E8;
  --or-500:#D9A441;

  /* ── 2. sémantique ── */
  --fond:var(--nuit-900);
  --fond-2:var(--nuit-800);
  --fond-3:var(--nuit-700);
  --encre:var(--creme-50);
  --encre-2:color-mix(in srgb, var(--creme-50) 66%, transparent);
  --filet:color-mix(in srgb, var(--creme-50) 12%, transparent);
  --filet-fort:color-mix(in srgb, var(--creme-50) 22%, transparent);
  --accent:var(--or-500);

  --titre:"Fraunces", Georgia, "Times New Roman", serif;
  --texte:"Plus Jakarta Sans", system-ui, -apple-system, sans-serif;

  /* Courbes : la première est celle que `soft-skill` impose pour la masse et
     le ressort, la seconde celle du skill `animate` pour les sorties. */
  --e-ressort:cubic-bezier(.32,.72,0,1);
  --e:cubic-bezier(.23,1,.32,1);
  --t-survol:.2s;
  --t-appui:.16s;

  --r:26px;          /* rayon de la coque extérieure */
  --r-in:20px;       /* 26 - 6 de remplissage : courbes concentriques */
  --g:22px; --barre:62px;
}

*{box-sizing:border-box}

/* Base mobile du skill `mobile-native` : chaque ligne corrige un défaut qui
   ne se reproduit pas dans un navigateur de bureau. */
html{
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior:none;
  scroll-behavior:smooth;
  color-scheme:dark;
}
body{margin:0;background:var(--fond);color:var(--encre);
  font-family:var(--texte);font-size:16px;line-height:1.6;overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  padding-bottom:calc(var(--barre) + env(safe-area-inset-bottom,0px))}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-family:var(--titre);font-weight:300;
  line-height:.96;letter-spacing:-.03em;text-wrap:balance}
p{margin:0 0 1rem;text-wrap:pretty}
ul{margin:0;padding:0;list-style:none}
[id]{scroll-margin-top:96px}
.w{padding:0 var(--g);max-width:1240px;margin:0 auto}

a,.btn,button,[role=button]{touch-action:manipulation}
.btn,.f,.pilule,.barre a,.ile__m,.pied__l a{
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}

.evite{position:absolute;left:-9999px;top:0;background:var(--accent);
  color:var(--nuit-900);padding:.8rem 1.1rem;z-index:300}
.evite:focus{left:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ══ LE GRAIN ══
   « Editorial Luxury » le demande explicitement : une pellicule très faible
   pour donner une matière physique au papier. Dessiné par le navigateur,
   aucun fichier téléchargé. */
body::after{
  content:"";position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.42;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.36'/%3E%3C/svg%3E")}

/* ══ TYPOGRAPHIE ══ */
.t2{font-size:clamp(2.5rem,9vw,5.2rem)}
.lead{font-size:clamp(1.05rem,4vw,1.24rem);color:var(--encre-2);
  max-width:40ch;margin:1.4rem 0 0}

/* Pastille d'annonce : « Eyebrow Tag » de soft-skill. Casse normale, jamais
   de capitales espacées, qui est une signature de page faite par IA. */
.etiq{display:inline-flex;align-items:center;gap:.55rem;
  font-size:.82rem;font-weight:500;color:var(--encre-2);
  border:1px solid var(--filet);border-radius:999px;
  padding:.42rem .95rem .42rem .8rem;margin:0 0 1.5rem}
.etiq__pt{width:7px;height:7px;border-radius:999px;background:var(--accent);
  flex:none}

/* ══ LA BARRE FLOTTANTE ══
   « Fluid Island Nav » : soft-skill bannit la barre collée bord à bord en
   haut de page. Celle-ci flotte, détachée, en pilule. */
.ile{position:fixed;z-index:200;top:14px;left:var(--g);right:var(--g);
  display:flex;align-items:center;gap:1rem;
  padding:7px 7px 7px 1.05rem;border-radius:999px;
  background:color-mix(in srgb, var(--nuit-900) 74%, transparent);
  backdrop-filter:blur(16px) saturate(1.3);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);
  border:1px solid var(--filet)}
.ile__m{display:inline-flex;align-items:center;gap:.6rem;min-height:44px;
  margin-right:auto;font-family:var(--titre);font-size:1.16rem;font-weight:600;
  letter-spacing:-.02em;white-space:nowrap}
.ile__pt{width:8px;height:8px;border-radius:999px;background:var(--accent);flex:none}
.ile__n{display:none;gap:1.5rem;font-size:.92rem;color:var(--encre-2)}
.ile__n a{display:inline-flex;align-items:center;min-height:44px;position:relative}
.ile__n a::after{content:"";position:absolute;left:0;right:0;bottom:12px;height:1px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform var(--t-survol) var(--e)}

/* ══ BOUTONS ══
   Couche 3 des jetons : chaque variante fixe ses trois couleurs chez elle.
   Le remplissage et le filet ne suivent JAMAIS `currentColor` : au survol la
   couleur du texte change, et le bouton disparaîtrait (incident 2026-09-24). */
.pilule,.btn{
  --b-fond:transparent; --b-filet:var(--filet-fort); --b-texte:var(--encre);
  position:relative;display:inline-flex;align-items:center;gap:.7rem;
  min-height:46px;padding:0 .45rem 0 1.15rem;border-radius:999px;
  font-family:var(--texte);font-size:.92rem;font-weight:600;letter-spacing:-.01em;
  white-space:nowrap;background:var(--b-fond);color:var(--b-texte);
  border:1px solid var(--b-filet);
  transition:background var(--t-survol) var(--e-ressort),
             border-color var(--t-survol) var(--e-ressort),
             color var(--t-survol) var(--e-ressort),
             transform var(--t-appui) var(--e-ressort)}
.btn{min-height:54px;padding:0 .5rem 0 1.4rem;font-size:.98rem}
.pilule--or,.btn--or{--b-fond:var(--accent); --b-filet:var(--accent);
  --b-texte:var(--nuit-900)}

/* « Button-in-Button Trailing Icon » : la flèche n'est jamais nue à côté du
   texte, elle vit dans son propre cercle, collé au bord intérieur. */
.rond{display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:32px;height:32px;border-radius:999px;font-size:.86rem;line-height:1;
  background:color-mix(in srgb, var(--creme-50) 12%, transparent);
  transition:transform var(--t-survol) var(--e-ressort)}
.btn .rond{width:38px;height:38px}
.pilule--or .rond,.btn--or .rond{
  background:color-mix(in srgb, var(--nuit-900) 16%, transparent)}

/* Retour au clic. « Buttons must feel responsive » (emil-design-eng) : sans
   ça le bouton ne répond qu'au relâchement du doigt, et l'interface semble
   sourde même quand elle est instantanée. */
.btn:active,.pilule:active,.tel:active{transform:scale(.975)}
.tel{transition:transform var(--t-appui) var(--e-ressort)}

@media (hover:hover) and (pointer:fine){
  .btn:hover,.pilule:hover{--b-fond:var(--accent); --b-filet:var(--accent);
    --b-texte:var(--nuit-900)}
  .btn:hover .rond,.pilule:hover .rond{
    background:color-mix(in srgb, var(--nuit-900) 16%, transparent);
    transform:translate(2px,-2px)}
  .ile__n a:hover::after{transform:scaleX(1)}
  .fm:hover{padding-left:1.1rem;
    background:color-mix(in srgb, var(--creme-50) 4%, transparent)}
  .fm:hover .rond{transform:translate(3px,-3px);
    background:var(--accent);color:var(--nuit-900)}
  .pied__l a:hover{color:var(--accent)}
}

/* ═══════════════════════════════════════════════════════════════
   L'ENTRÉE AU CHARGEMENT — vue une fois par visiteur, tier « rare »
   du skill `animate` : le budget plaisir est autorisé ici, et
   nulle part ailleurs. Cascade de 80 ms.
   `animation-timeline: view()` ne marche PAS ici : un élément déjà
   visible au chargement est au-delà de sa plage `entry`.
   ═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference){
  .coupe .mot > i{transform:translateY(108%);
    animation:monte .95s var(--e-ressort) both;
    animation-delay:calc(.1s + var(--i) * .08s)}
  @keyframes monte{to{transform:translateY(0)}}

  .ouv .etiq{animation:surgit .8s var(--e) .06s both}
  .ouv .chapeau{animation:surgit .8s var(--e) .4s both}
  .ouv .act{animation:surgit .8s var(--e) .5s both}
  @keyframes surgit{from{opacity:0;transform:translateY(18px)}
                    to  {opacity:1;transform:none}}

  .ouv__p{animation:volet 1.15s var(--e-ressort) .16s both}
  @keyframes volet{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}

  .ile{animation:descend .6s var(--e-ressort) both}
  @keyframes descend{from{opacity:0;transform:translateY(-120%)}
                     to  {opacity:1;transform:none}}
}

/* ══ SECTIONS ══ Bas plus généreux que le haut : une section se termine sur
   du vide, elle ne commence pas dessus. */
.sec{padding:82px 0 100px}

/* 1. ACCUEIL */
.ouv{padding:96px 0 0}
.ouv__p{margin:0;overflow:hidden}
.ouv__p img{width:100%;aspect-ratio:1/1;object-fit:cover}
.ouv__t{padding:34px var(--g) 0;max-width:1240px;margin:0 auto}
.ouv h1{font-size:clamp(3rem,13vw,7rem);font-weight:300}
.ouv h1 i{font-style:normal}
.chapeau{font-size:clamp(1.05rem,4.2vw,1.3rem);color:var(--encre-2);
  max-width:38ch;margin:1.7rem 0 0}
.act{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:2.2rem}
.mot{display:inline-block;overflow:hidden;vertical-align:top;
  padding-bottom:.12em;margin-bottom:-.12em}
.mot > i{display:inline-block}
.no-js .mot > i{transform:none}

/* 2. LES SIX FORMULES — six lignes, pas six cartes.
   🔴 Première version : six « Double-Bezel » de 230 px de haut avec un seul
   mot dedans. Résultat : six boîtes vides qui ressemblaient à des cartes en
   cours de chargement. Le contenu ici, c'est SIX MOTS — aucun prix, aucune
   description, et on n'invente rien. Le design doit donc traiter six mots.
   Une carte se justifie quand elle a quelque chose à contenir ; sinon c'est
   du vide encadré. La typographie EST le contenu : grandes lignes, filet de
   séparation, la flèche à droite. Rien ne reste vide. */
.formules .w{margin-bottom:30px}
.liste{padding:0 var(--g);max-width:1240px;margin:0 auto;
  border-top:1px solid var(--filet)}
.fm{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;
  padding:1.15rem .2rem;border-bottom:1px solid var(--filet);
  transition:padding-left var(--t-survol) var(--e-ressort),
             background var(--t-survol) var(--e-ressort)}
.fm__n{font-family:var(--titre);font-weight:300;letter-spacing:-.025em;
  line-height:1.06;font-size:clamp(1.7rem,7.6vw,3.1rem)}
.fm .rond{width:40px;height:40px;font-size:.95rem;
  transition:transform var(--t-survol) var(--e-ressort),
             background var(--t-survol) var(--e-ressort)}
.fm:active{transform:none}
.fm:active .rond{transform:scale(.92)}

/* 3. LA BOUTIQUE */
.bande{margin:0;overflow:hidden}
.bande img{width:100%;aspect-ratio:16/10;object-fit:cover}
.boutique__x{padding-top:44px}
.boutique h3{font-family:var(--titre);font-size:1.7rem;font-weight:300;
  margin:0 0 .7rem;color:var(--accent)}
.boutique p{color:var(--encre-2);max-width:34ch;margin:0}

/* 4. LA NOTE — typographie seule. Une tache de lumière très faible empêche
   la section d'être un aplat mort (règle du skill `minimalist-skill`). */
.note{background:var(--fond-2);text-align:center;
  position:relative;isolation:isolate;overflow:hidden}
.note::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(60% 66% at 50% 42%,
    color-mix(in srgb, var(--or-500) 12%, transparent), transparent 72%)}
.note__n{font-family:var(--titre);font-size:clamp(6rem,30vw,16rem);
  line-height:.82;font-weight:300;letter-spacing:-.04em;margin:0;
  color:var(--accent)}
.note__e{margin:1rem 0 0;font-size:1.3rem;letter-spacing:.32em;color:var(--accent)}
.note__e span{display:inline-block;opacity:0;transform:translateY(8px);
  transition:opacity .5s var(--e),transform .5s var(--e)}
.note__d{margin:1.1rem 0 0;font-size:1.06rem;color:var(--encre-2)}
.note__d b{font-weight:600;color:var(--encre)}

/* 5. VENIR */
.g12{display:grid;grid-template-columns:repeat(12,1fr);gap:40px var(--g)}
.c12{grid-column:span 12}
.adr{margin:1.5rem 0 0;color:var(--encre-2);font-size:1.06rem}
.tel{display:inline-flex;align-items:center;min-height:44px;margin:.7rem 0 0;
  font-family:var(--titre);font-size:clamp(1.8rem,8vw,2.7rem);
  font-weight:300;letter-spacing:-.03em;color:var(--accent)}
.fl li{display:flex;justify-content:space-between;gap:1.4rem;
  padding:1rem 0;border-bottom:1px solid var(--filet);
  font-size:1.02rem;align-items:baseline}
.fl li span{color:var(--encre-2)}
.fl li b{font-weight:600;text-align:right}

/* ══ PLAN, PIED, BARRE ══ */
.plan{line-height:0}
.plan iframe{width:100%;height:340px;border:0;display:block;
  filter:saturate(.45) contrast(.94) brightness(.86)}
.pied{background:var(--fond-2);padding:62px 0 44px;
  position:relative;isolation:isolate;overflow:hidden;
  border-top:1px solid var(--filet)}
.pied::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(66% 110% at 14% 0%,
    color-mix(in srgb, var(--or-500) 11%, transparent), transparent 62%)}
.pied__n{font-family:var(--titre);font-size:2.1rem;font-weight:300;
  letter-spacing:-.02em;margin:0 0 .3rem}
.pied__s{color:var(--accent);margin:0 0 1.5rem;font-size:.98rem}
.pied p{color:var(--encre-2);margin:0 0 1.6rem;line-height:1.85}
.pied a{color:var(--encre)}
/* Le téléphone et l'e-mail sont le chemin de conversion principal. En ligne
   dans un paragraphe ils ne font que 20 px de haut : on rate la cible au
   doigt. Chacun occupe sa propre rangée de 44 px. */
.pied p a,
.sec p a[href^="tel:"],
.sec p a[href^="mailto:"]{display:inline-flex;align-items:center;min-height:44px}
.pied__l{display:flex;flex-wrap:wrap;gap:1.4rem;font-size:.94rem;
  padding-top:1.2rem;border-top:1px solid var(--filet)}
.pied__l a{color:var(--encre-2);display:inline-flex;align-items:center;
  min-height:44px;transition:color var(--t-survol) var(--e)}

.barre{position:fixed;left:0;right:0;bottom:0;z-index:200;display:flex;
  height:calc(var(--barre) + env(safe-area-inset-bottom,0px));
  padding-bottom:env(safe-area-inset-bottom,0px);
  border-top:1px solid var(--filet);
  background:color-mix(in srgb, var(--nuit-900) 92%, transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.barre a{flex:1;display:flex;align-items:center;justify-content:center;
  font-size:.98rem;font-weight:600;
  transition:opacity var(--t-appui) var(--e)}
.barre a:first-child{background:var(--accent);color:var(--nuit-900)}
.barre a:active{opacity:.84}

/* Cascade de 60 ms entre les lignes : le skill `animate` demande 30 a 80 ms. */
.liste li{opacity:0;transform:translateY(16px);
  transition:opacity .7s var(--e-ressort),transform .7s var(--e-ressort);
  transition-delay:calc(var(--i) * .06s)}
.liste.vu li,.no-js .liste li{opacity:1;transform:none}

/* ══ APPARITIONS ══ */
.r{opacity:0;transform:translateY(22px);
  transition:opacity .85s var(--e-ressort),transform .85s var(--e-ressort)}
.r.vu{opacity:1;transform:none}
.no-js .r{opacity:1;transform:none}
.fl li.r{transform:translateX(-18px)}
.fl li.r.vu{transform:none}
.note__e.vu span{opacity:1;transform:none}
.note__e.vu span:nth-child(2){transition-delay:.08s}
.note__e.vu span:nth-child(3){transition-delay:.16s}
.note__e.vu span:nth-child(4){transition-delay:.24s}
.note__e.vu span:nth-child(5){transition-delay:.32s}

/* ══ LA PAGE 404 ══ */
.perdu{min-height:calc(100dvh - var(--barre));display:flex;
  flex-direction:column;justify-content:center;padding:120px 0 90px}
.perdu__n{font-family:var(--titre);font-size:clamp(5.5rem,28vw,14rem);
  line-height:.8;font-weight:300;letter-spacing:-.04em;margin:0 0 1.5rem;
  color:var(--accent)}

/* ══ GRAND ÉCRAN ══ */
@media (min-width:760px){
  :root{--g:40px}
  body{padding-bottom:0}
  .barre{display:none}
  .ile__n{display:flex}
  .sec{padding:120px 0 146px}
  .fm{padding:1.5rem .4rem}
  .boutique__x{padding-top:64px}
  .c4{grid-column:span 4}
  .c5{grid-column:span 5}
  .c7{grid-column:span 7}
  .plan iframe{height:440px}
  .perdu{min-height:100dvh}
}

@media (min-width:1080px){
  /* L'accueil tient dans UN écran, photo comprise. La photo est à gauche et
     touche le bord : le titre respire à droite. */
  .ouv{display:grid;grid-template-columns:44vw 1fr;align-items:center;
    gap:clamp(2rem,4vw,4rem);padding:0;min-height:100dvh;max-width:none}
  .ouv__p{height:100dvh}
  .ouv__p img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
  .ouv__t{padding:0 max(var(--g), calc((100vw - 1340px) / 2)) 0 0;margin:0;
    max-width:none}
  .ouv h1{font-size:clamp(3.6rem,6vw,6rem)}
}

/* ══ SURVOL SUR ÉCRAN TACTILE ══
   Un appui déclenche un faux survol qui reste collé. On neutralise ce qui
   se déclenche au survol, et SEULEMENT ça : `:active` doit continuer à
   répondre au doigt, c'est tout l'intérêt du retour au clic. */
@media (hover:none),(pointer:coarse){
  .pied__l a{color:var(--encre-2)}
}

/* ═══════════════════════════════════════════════════════════════
   LE MOUVEMENT AU DÉFILEMENT — un geste par section, jamais deux
   fois le même. `animation-timeline: view()` tourne hors du fil
   principal ; le JavaScript ne sert que de repli (Firefox).
   ═══════════════════════════════════════════════════════════════ */
@supports (animation-timeline: view()) {

  /* accueil : la photo dérive pendant qu'on descend. Plage `cover` et non
     `entry` : l'élément est déjà à l'écran au chargement. */
  .ouv__p img{animation:decadre linear both;animation-timeline:view();
    animation-range:cover 0% cover 100%}
  @keyframes decadre{from{transform:scale(1.1) translateY(-2%)}
                     to  {transform:scale(1.02) translateY(2%)}}

  /* la boutique : la bande se dévoile par le bas */
  .bande{animation:devoile linear both;animation-timeline:view();
    animation-range:entry 4% entry 60%}
  @keyframes devoile{from{clip-path:inset(0 0 52% 0)}to{clip-path:inset(0 0 0 0)}}

  .bande img{animation:derive linear both;animation-timeline:view();
    animation-range:entry 0% exit 100%}
  @keyframes derive{from{transform:translateY(-3%) scale(1.12)}
                    to  {transform:translateY(3%) scale(1.12)}}

  /* la note : le chiffre grandit légèrement */
  .note__n{animation:grandit linear both;animation-timeline:view();
    animation-range:entry 10% entry 76%}
  @keyframes grandit{from{transform:scale(.93);opacity:.45}
                     to  {transform:scale(1);opacity:1}}
}

/* ══ MOUVEMENT RÉDUIT ══
   « Gentler, not zero » : le grain et les taches de lumière restent, ce sont
   des couleurs, pas du mouvement. Seuls les déplacements tombent. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .r,.mot > i,.note__e span,.ouv .etiq,.ouv .chapeau,.ouv .act,.ile,.liste li{
    opacity:1!important;transform:none!important}
  .ouv__p,.bande{clip-path:none!important}
  .ouv__p img,.bande img{transform:none!important}
  body::after{opacity:.42}
  .note::before,.pied::before{opacity:1}
}