/*
Theme Name: Le Terminus
Theme URI: https://leterminus-marseille.fr
Author: Grégory Marcopoulos
Description: Thème sur mesure pour le Café Bistrot Le Terminus, 8 avenue Pasteur, Marseille 7e. Palette et ornements repris de l'identité imprimée du café.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 7.1
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: terminus
Tags: restaurant, cafe, brunch, sur-mesure
*/

/* ============================================================
   1. JETONS
   Couleurs relevées sur le lieu et les visuels du café :
   crème des boiseries, laiton des guéridons, velours terracotta
   et sauge des banquettes, framboise du logo.
   ============================================================ */
:root{
  --creme:#F7F2E9;
  --creme-2:#EFE6D6;
  --creme-3:#E4D8C3;
  --encre:#241E1A;
  --encre-doux:#5A4F45;
  --laiton:#B3862F;
  --laiton-clair:#D9B767;
  --terracotta:#B5573C;
  --framboise:#C4335C;
  --framboise-fonce:#A82A4C;
  --sauge:#7E8E79;

  --display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --corps:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --script:"Parisienne","Snell Roundhand",cursive;

  --pad:clamp(1.25rem,5vw,4.5rem);
  --max:1240px;
  --prose:min(68ch,100%);
}

/* ============================================================
   2. BASES
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}

/* Un élément marqué hidden est retiré, quoi que dise sa classe. Sans ça,
   une boîte « display:flex » cachée reste posée sur la page, invisible,
   et intercepte tous les clics. */
[hidden]{display:none !important}

body{
  margin:0;
  background:var(--creme);
  color:var(--encre);
  font-family:var(--corps);
  font-size:clamp(.95rem,.4vw + .85rem,1.05rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  /* clip, pas hidden : « hidden » casserait position:sticky. */
  overflow-x:clip;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--display);font-weight:400;margin:0;text-wrap:balance}

:focus-visible{outline:2px solid var(--framboise);outline-offset:3px}

.ecran-lecteur{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}
.saut-contenu{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--encre);color:var(--creme);
  padding:.8rem 1.2rem;text-decoration:none;
}
.saut-contenu:focus{left:0}

/* --- utilitaires --- */
.eyebrow{
  font-size:.68rem;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--laiton);margin:0;
}
.eyebrow--clair{color:var(--laiton-clair)}

.script{
  font-family:var(--script);font-weight:400;color:var(--framboise);
  font-size:clamp(1.5rem,3.2vw,2.3rem);line-height:1.2;
}

/* Le losange : séparateur repris des flyers du café. */
.losange{
  width:9px;height:9px;background:var(--laiton);
  transform:rotate(45deg);flex:none;display:inline-block;
}
.filet{display:flex;align-items:center;gap:1rem;color:var(--laiton)}
.filet::before,.filet::after{
  content:"";height:1px;background:currentColor;opacity:.45;flex:1;
}
.filet--court{max-width:220px;margin-inline:auto}

.vide{text-align:center;color:var(--encre-doux);padding:3rem 0}

/* ============================================================
   3. BOUTONS
   ============================================================ */
.tel-btn{
  display:inline-flex;align-items:center;gap:.5rem;
  background:var(--framboise);color:var(--creme);text-decoration:none;
  font-size:.78rem;font-weight:600;letter-spacing:.08em;
  padding:.6rem 1.1rem;border-radius:999px;white-space:nowrap;
  border:none;cursor:pointer;
  transition:background .2s,transform .2s;
}
.tel-btn:hover,.tel-btn:focus-visible{background:var(--framboise-fonce);transform:translateY(-1px)}

.btn-fantome{
  display:inline-flex;align-items:center;gap:.5rem;
  border:1px solid var(--laiton);color:var(--encre);
  background:transparent;text-decoration:none;
  font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  padding:.7rem 1.3rem;border-radius:999px;
  transition:background .2s,color .2s;
}
.btn-fantome:hover,.btn-fantome:focus-visible{background:var(--laiton);color:var(--creme)}
.btn-fantome--clair{border-color:var(--laiton-clair);color:var(--creme-2)}
.btn-fantome--clair:hover,.btn-fantome--clair:focus-visible{background:var(--laiton-clair);color:var(--encre)}

/* ============================================================
   4. BANDEAU
   ============================================================ */
.bandeau{
  position:sticky;top:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.7rem var(--pad);
  background:rgba(247,242,233,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(179,134,47,.22);
}
.bandeau__marque{
  font-family:var(--display);font-size:1.05rem;
  letter-spacing:.3em;text-transform:uppercase;text-decoration:none;
}
.bandeau__logo img{max-height:52px;width:auto}
.bandeau__nav{display:flex;gap:1.6rem;align-items:center;list-style:none;margin:0;padding:0}
.bandeau__nav ul{display:contents;list-style:none;margin:0;padding:0}
.bandeau__nav li{list-style:none}
.bandeau__nav a{
  font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;color:var(--encre-doux);
  padding:.25rem 0;border-bottom:1px solid transparent;
  transition:color .2s,border-color .2s;
}
.bandeau__nav a:hover,.bandeau__nav a:focus-visible,
.bandeau__nav .current-menu-item a{color:var(--encre);border-color:var(--laiton)}

.bandeau__actions{display:flex;align-items:center;gap:.6rem}
.bandeau__bascule{
  display:none;width:38px;height:32px;
  background:transparent;border:none;cursor:pointer;
  flex-direction:column;justify-content:center;gap:6px;padding:0;
}
.bandeau__bascule span{
  display:block;height:1.5px;width:22px;margin-inline:auto;
  background:var(--encre);transition:transform .25s,opacity .25s;
}
.bandeau__bascule[aria-expanded="true"] span:first-child{transform:translateY(3.75px) rotate(45deg)}
.bandeau__bascule[aria-expanded="true"] span:last-child{transform:translateY(-3.75px) rotate(-45deg)}

/* Le menu mobile est défini en section 30 (plein écran). */

@media(max-width:900px){
  .bandeau__nav{display:none}
  .bandeau__bascule{display:flex}
}

/* Sur petit écran, l'enseigne doit tenir sur une ligne. */
@media(max-width:520px){
  .bandeau{gap:.6rem}
  .bandeau__marque{font-size:.86rem;letter-spacing:.16em;white-space:nowrap}
  .bandeau .tel-btn{font-size:.72rem;padding:.55rem .85rem}
}

/* ============================================================
   5. ACCUEIL — hero
   ============================================================ */
/* Plafonné : sur un grand écran, un bloc d'accueil de deux mètres de haut
   ne sert personne — on veut voir arriver la suite. */
/* Le cadre donne la course : le hero reste collé en haut pendant qu'on
   descend, et le contenu vient le recouvrir. */
.hero-cadre{height:158svh;position:relative}
.hero{
  position:sticky;top:0;z-index:0;
  height:min(92svh,940px);
  display:grid;place-items:center;overflow:hidden;
}
.hero__fond{position:absolute;inset:0}
.hero__fond img{width:100%;height:100%;object-fit:cover;object-position:center 55%}
/* Un simple assombrissement des bords : la photo doit rester lisible,
   c'est le cartouche crème qui porte le texte. */
.hero__voile{
  position:absolute;inset:0;
  background:
    linear-gradient(to bottom,rgba(36,30,26,.28) 0%,rgba(36,30,26,0) 28%,
                    rgba(36,30,26,0) 62%,rgba(36,30,26,.34) 100%),
    radial-gradient(90% 70% at 50% 50%,rgba(36,30,26,0) 40%,rgba(36,30,26,.22) 100%);
}
/* Le cartouche : une carte crème posée sur la photo, comme leur flyer. */
.cartouche{
  position:relative;z-index:2;text-align:center;
  padding:clamp(2.2rem,5vw,3.4rem) clamp(1.6rem,6vw,4rem);
  /* Largeur explicite : un élément de grille centré se dimensionne sur son
     contenu, il ne se réduit pas tout seul au conteneur. Sans ça, la page
     déborde horizontalement sur mobile. */
  width:min(600px, calc(100% - 2 * var(--pad)));
  margin:0;
  color:var(--laiton);
  background:rgba(247,242,233,.94);
  box-shadow:0 24px 60px -28px rgba(36,30,26,.5);
}
/* Le cadre à filets, cité de leur cartouche imprimé. */
.cartouche::before,.cartouche::after{
  content:"";position:absolute;left:14px;right:14px;height:14px;
  border:1px solid rgba(179,134,47,.6);
}
.cartouche::before{top:14px;border-bottom:none}
.cartouche::after{bottom:14px;border-top:none}

.cartouche__rayons{display:block;margin:0 auto .9rem;width:88px;height:26px}
.cartouche__sur{
  font-size:.66rem;font-weight:600;letter-spacing:.42em;
  text-transform:uppercase;color:var(--laiton);
  margin:0 0 .5rem;padding-left:.42em;
}
.cartouche__nom{
  font-size:clamp(2.5rem,9.5vw,5.4rem);line-height:.94;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--laiton);margin:0;padding-left:.08em;
}
.cartouche__sous{
  font-size:.7rem;font-weight:600;letter-spacing:.3em;
  text-transform:uppercase;color:var(--encre);
  margin:.9rem 0 0;padding-left:.3em;
}
.cartouche .script{margin:1.4rem 0 .2rem}
.cartouche__adresse{
  margin:.2rem 0 0;font-size:.8rem;letter-spacing:.06em;color:var(--encre-doux);
}
.cartouche__actions{
  display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;margin-top:1.6rem;
}

.pastille{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--encre);
  padding:.4rem .9rem;border-radius:999px;
  background:rgba(255,255,255,.7);border:1px solid rgba(179,134,47,.35);
  margin-top:1.5rem;
}
.pastille__point{width:7px;height:7px;border-radius:50%;background:var(--sauge);flex:none}
.pastille[data-etat="ferme"] .pastille__point{background:var(--terracotta)}

/* Section 6 : la journée — voir section 25 (épinglée, horloge). */

/* ============================================================
   7. BANDE PHOTO
   ============================================================ */
.bande{position:relative;height:clamp(280px,45vw,480px);overflow:hidden}
.bande img{width:100%;height:100%;object-fit:cover}
.bande__mot{
  position:absolute;inset:0;display:grid;place-items:center;
  text-align:center;padding:var(--pad);
  background:linear-gradient(to bottom,rgba(36,30,26,.15),rgba(36,30,26,.5));
}
.bande__mot p{
  font-family:var(--display);font-style:italic;
  font-size:clamp(1.4rem,4vw,2.6rem);line-height:1.3;
  color:var(--creme);max-width:20ch;margin:0;
  text-shadow:0 2px 24px rgba(36,30,26,.55);
}

/* ============================================================
   8. LA CARTE
   ============================================================ */
.carte{padding:clamp(4rem,10vw,7.5rem) var(--pad);background:var(--creme-2)}
.carte--complete{background:var(--creme)}
.carte__inner{max-width:var(--max);margin:0 auto}
.carte__tete{text-align:center;margin-bottom:clamp(2.5rem,6vw,4rem)}
.carte__tete h2{font-size:clamp(1.9rem,5vw,3.1rem);margin:.6rem 0 1.2rem}

.carte__grille{
  display:grid;gap:clamp(2rem,5vw,3.5rem);
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  align-items:start;
}
.carte__grille--complete{gap:clamp(2.5rem,6vw,4.5rem)}

.carte__bloc h2,.carte__bloc h3{
  font-size:1.5rem;letter-spacing:.02em;
  padding-bottom:.7rem;margin:0 0 1.1rem;
  border-bottom:1px solid rgba(179,134,47,.4);
}
.carte__bloc-desc{font-size:.85rem;color:var(--encre-doux);margin:-.6rem 0 1rem}

.plat{display:flex;align-items:baseline;gap:.75rem;padding:.55rem 0}
.plat__nom{font-weight:500}
.plat__desc{display:block;font-size:.82rem;color:var(--encre-doux);font-weight:400;margin-top:.1rem}
.plat__etoile{color:var(--laiton);font-size:.7em;vertical-align:.15em;margin-left:.2em}
.plat__pointilles{
  flex:1;border-bottom:1px dotted rgba(90,79,69,.4);
  transform:translateY(-.25rem);min-width:1.5rem;
}
.plat__prix{font-variant-numeric:tabular-nums;color:var(--laiton);font-weight:600;flex:none}

.carte__action,.carte__legende{text-align:center;margin-top:clamp(2.5rem,6vw,3.5rem)}
.carte__legende{font-size:.8rem;color:var(--encre-doux)}
.carte__rappel{text-align:center;margin-top:clamp(3rem,7vw,4.5rem)}
.carte__rappel p{color:var(--encre-doux);margin:1.2rem 0}

/* ============================================================
   9. LE LIEU
   ============================================================ */
.lieu{padding:clamp(4rem,10vw,7.5rem) var(--pad)}
.lieu__inner{
  max-width:var(--max);margin:0 auto;
  display:grid;gap:clamp(1.5rem,4vw,2.5rem);
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  align-items:center;
}
.lieu__texte h2{font-size:clamp(1.9rem,5vw,3.1rem);margin:.6rem 0 1rem}
.lieu__texte p{color:var(--encre-doux);margin:0 0 1rem}
.lieu__liste{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;gap:.7rem}
.lieu__liste li{display:flex;align-items:center;gap:.8rem;font-size:.92rem}

.lieu__photos{display:grid;gap:clamp(.8rem,2vw,1.2rem);grid-template-columns:1fr 1fr}
.lieu__photos figure{margin:0;overflow:hidden}
.lieu__photos img{
  width:100%;height:100%;object-fit:cover;aspect-ratio:3/4;
  transition:transform .7s cubic-bezier(.2,.7,.3,1);
}
.lieu__photos figure:hover img{transform:scale(1.04)}
.lieu__photos figure:nth-child(2){margin-top:clamp(1.5rem,5vw,3rem)}

.lieu-services{padding:0 var(--pad) clamp(4rem,10vw,7.5rem)}
.lieu-services__inner{
  max-width:760px;margin:0 auto;text-align:center;
  border:1px solid rgba(179,134,47,.35);
  padding:clamp(2rem,6vw,3.5rem);
}
.lieu-services h2{font-size:clamp(1.6rem,4vw,2.3rem);margin-bottom:.8rem}
.lieu-services p{color:var(--encre-doux);margin:0 auto 1.6rem;max-width:48ch}

/* ============================================================
   10. ACTUALITÉS
   ============================================================ */
.actus{padding:clamp(4rem,10vw,7.5rem) var(--pad);background:var(--creme-2)}
.actus__inner{max-width:var(--max);margin:0 auto}
.actus__tete{text-align:center;margin-bottom:clamp(2.5rem,6vw,4rem)}
.actus__tete h2{font-size:clamp(1.9rem,5vw,3.1rem);margin:.6rem 0 0}
.actus__grille{
  display:grid;gap:clamp(1.8rem,4vw,2.8rem);
  grid-template-columns:repeat(auto-fit,minmax(250px,360px));
  justify-content:center;
}
.actu__lien{text-decoration:none;display:block}
.actu__image{overflow:hidden;margin-bottom:1rem;aspect-ratio:4/3}
.actu__image img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.actu__lien:hover .actu__image img{transform:scale(1.04)}
.actu__date{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--laiton)}
.actu__titre{font-size:1.5rem;line-height:1.2;margin:.3rem 0 .5rem}
.actu__extrait{color:var(--encre-doux);font-size:.9rem;margin:0}

/* ============================================================
   11. PAGES INTÉRIEURES
   ============================================================ */
.page-tete{padding:clamp(3rem,8vw,5.5rem) var(--pad) clamp(1.5rem,4vw,2.5rem);text-align:center}
.page-tete__inner{max-width:var(--max);margin:0 auto}
.page-tete h1{font-size:clamp(2.1rem,6vw,3.6rem);line-height:1.05;margin:.6rem 0 1.2rem}

.article__image{max-width:var(--max);margin:0 auto clamp(2rem,5vw,3rem);padding:0 var(--pad)}
.article__image img{width:100%;aspect-ratio:16/9;object-fit:cover}

.prose{
  width:var(--prose);margin:0 auto;padding:0 var(--pad) clamp(3rem,8vw,5rem);
}
.prose--intro{padding-bottom:clamp(1.5rem,4vw,2.5rem);text-align:center;color:var(--encre-doux)}
.prose > *{margin-block:0 1.2rem}
.prose h2{font-size:clamp(1.6rem,4vw,2.3rem);margin-top:2.4rem}
.prose h3{font-size:1.35rem;margin-top:2rem}
.prose a{color:var(--framboise);text-underline-offset:.2em}
.prose blockquote{
  border-left:2px solid var(--laiton);margin-left:0;padding-left:1.4rem;
  font-family:var(--display);font-style:italic;font-size:1.25rem;color:var(--encre-doux);
}
.prose img{margin-block:2rem}
.prose ul,.prose ol{padding-left:1.3rem}

.liste{padding:0 var(--pad) clamp(4rem,10vw,6rem)}
.liste__inner{max-width:var(--max);margin:0 auto}

.pagination{max-width:var(--max);margin:3rem auto 0;text-align:center}
.pagination .page-numbers{
  display:inline-block;padding:.4rem .8rem;text-decoration:none;
  font-size:.85rem;color:var(--encre-doux);
}
.pagination .current{color:var(--laiton);font-weight:600}

.nav-article{
  width:var(--prose);margin:0 auto;padding:2rem var(--pad) 0;
  display:flex;justify-content:space-between;gap:1.5rem;
  border-top:1px solid rgba(179,134,47,.3);font-size:.85rem;
}
.nav-article a{text-decoration:none;color:var(--encre-doux)}
.nav-article a:hover{color:var(--encre)}

/* ============================================================
   12. CONTACT
   ============================================================ */
.contact{padding:0 var(--pad) clamp(4rem,10vw,7rem)}
.contact__inner{
  max-width:var(--max);margin:0 auto;
  display:grid;gap:clamp(2rem,5vw,3.5rem);
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  align-items:start;
}
.contact__bloc h2{
  font-size:1.5rem;padding-bottom:.7rem;margin:0 0 1.1rem;
  border-bottom:1px solid rgba(179,134,47,.4);
}
.contact__bloc h3{
  font-family:var(--corps);font-size:.68rem;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:var(--laiton);
  margin:2rem 0 .8rem;
}
.contact__bloc p{color:var(--encre-doux)}
.contact__adresse,.contact__tel{
  font-family:var(--display);font-size:1.5rem;line-height:1.35;color:var(--encre)
}
.contact__tel a{text-decoration:none;letter-spacing:.04em}
.contact__bloc .horaires li{border-bottom-color:rgba(179,134,47,.2)}
.contact__bloc .horaires li[data-ferme]{color:var(--terracotta)}
.contact__bloc .horaires li[data-aujourdhui]{color:var(--encre);font-weight:600}
.contact__bloc--plan .plan{border-color:rgba(179,134,47,.35)}

/* ============================================================
   13. ERREUR 404
   ============================================================ */
.erreur{padding:clamp(5rem,14vw,9rem) var(--pad);text-align:center}
.erreur__inner{max-width:52ch;margin:0 auto}
.erreur h1{font-size:clamp(2.1rem,6vw,3.4rem);margin:.6rem 0 1rem}
.erreur p{color:var(--encre-doux)}
.erreur__actions{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;margin-top:2rem}

/* ============================================================
   14. PIED DE PAGE
   ============================================================ */
.pied{background:var(--encre);color:var(--creme-2);padding:clamp(3.5rem,9vw,6rem) var(--pad) 2rem}
.pied__inner{
  max-width:var(--max);margin:0 auto;
  display:grid;gap:clamp(2rem,5vw,3.5rem);
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
}
.pied h2{font-size:clamp(1.6rem,4vw,2.4rem);color:var(--laiton-clair);margin-bottom:.4rem}
.pied h3{
  font-family:var(--corps);font-size:.68rem;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:var(--laiton-clair);
  margin:0 0 .9rem;
}
.pied a{color:var(--creme-2)}
.pied .filet{color:var(--laiton-clair);opacity:.5;margin:1.2rem 0}
.pied__ville{margin:0}
.pied__tel{margin:0 0 .4rem}
.pied__tel a{font-size:1.35rem;font-family:var(--display);letter-spacing:.06em;text-decoration:none}
.pied__note{margin:1rem 0 0;font-size:.8rem;color:rgba(239,230,214,.6)}
.pied__liens{margin-top:1.5rem}
.pied__reseaux{display:flex;gap:1.2rem;margin-top:1rem;font-size:.8rem}
.pied .pastille{background:transparent;border-color:rgba(217,183,103,.35);color:var(--creme-2)}

.horaires{list-style:none;margin:0;padding:0;font-variant-numeric:tabular-nums}
.horaires li{
  display:flex;justify-content:space-between;gap:1rem;
  padding:.4rem 0;border-bottom:1px solid rgba(217,183,103,.15);font-size:.9rem;
}
.horaires li[data-ferme]{color:var(--terracotta)}
.horaires li[data-aujourdhui]{color:#fff;font-weight:600}

.plan{width:100%;height:auto;border:1px solid rgba(217,183,103,.28)}

.pied__bas{
  max-width:var(--max);margin:clamp(2.5rem,6vw,4rem) auto 0;
  padding-top:1.5rem;border-top:1px solid rgba(217,183,103,.18);
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;
  font-size:.74rem;color:rgba(239,230,214,.55);
}
.pied__bas ul{display:flex;gap:1.2rem;list-style:none;margin:0;padding:0}

/* ============================================================
   15. RECHERCHE
   ============================================================ */
.recherche{display:flex;gap:.5rem;max-width:420px}
.recherche input{
  flex:1;padding:.6rem .9rem;border:1px solid rgba(179,134,47,.4);
  background:var(--creme);font-family:inherit;font-size:.9rem;
}
.recherche button{
  padding:.6rem 1.1rem;border:none;background:var(--laiton);color:var(--creme);
  font-family:inherit;font-size:.78rem;font-weight:600;letter-spacing:.08em;cursor:pointer;
}

/* ============================================================
   16. MOUVEMENT
   Le contenu est visible par défaut. Les animations ne sont activées
   que si le script a démarré (.js-anim) et si le visiteur n'a pas
   demandé à les réduire. Un site de restaurant doit rester lisible
   même quand tout le reste échoue.
   ============================================================ */

/* --- apparition simple, avec décalage entre voisins --- */
.js-anim .reveal{
  opacity:0;transform:translate3d(0,64px,0) scale(.97);
  filter:blur(6px);
  transition:opacity .9s cubic-bezier(.22,.68,.28,1),
             transform 1.05s cubic-bezier(.16,.84,.28,1),
             filter .9s ease;
  transition-delay:calc(var(--i,0) * 120ms);
}
.js-anim .reveal.est-vu{opacity:1;transform:none;filter:none}

/* --- titres : le trait de lumière passe et révèle --- */
.js-anim [data-anim="titre"]{
  opacity:0;
  clip-path:inset(0 0 105% 0);
  transition:opacity .5s ease,clip-path 1.05s cubic-bezier(.22,.68,.28,1);
  transition-delay:calc(var(--i,0) * 90ms);
}
.js-anim [data-anim="titre"].est-vu{opacity:1;clip-path:inset(-30% 0 -30% 0)}

/* --- photos : voile qui se retire vers le haut --- */
.js-anim [data-anim="photo"]{position:relative;overflow:hidden}
.js-anim [data-anim="photo"]::after{
  content:"";position:absolute;inset:0;z-index:2;
  background:var(--creme);
  transform-origin:bottom;
  transition:transform 1.1s cubic-bezier(.66,0,.24,1);
  transition-delay:calc(var(--i,0) * 110ms);
}
.js-anim [data-anim="photo"].est-vu::after{transform:scaleY(0)}
.js-anim [data-anim="photo"] img{
  transform:scale(1.12);
  transition:transform 1.4s cubic-bezier(.22,.68,.28,1);
  transition-delay:calc(var(--i,0) * 110ms);
}
.js-anim [data-anim="photo"].est-vu img{transform:scale(1)}

/* --- parallaxe : la photo glisse moins vite que la page --- */
[data-parallaxe]{overflow:hidden}
.js-anim [data-parallaxe] > img,
.js-anim [data-parallaxe] .hero__fond img{
  will-change:transform;
  transform:translate3d(0,var(--decalage,0%),0) scale(1.16);
}

/* ============================================================
   17. OUVERTURE DE LA PAGE D'ACCUEIL
   Le cartouche se compose ligne à ligne, comme on dresse une table.
   ============================================================ */
.js-anim .hero__fond{
  transform:scale(1.09);
  transition:transform 2.6s cubic-bezier(.22,.68,.28,1);
  will-change:transform;
}
.js-anim .hero--pret .hero__fond{transform:scale(1)}

.js-anim .cartouche{
  opacity:0;transform:translate3d(0,20px,0) scale(.985);
  transition:opacity 1s ease,transform 1.1s cubic-bezier(.22,.68,.28,1);
}
.js-anim .hero--pret .cartouche{opacity:1;transform:none}

/* Les filets du cadre se tracent depuis le centre. */
.js-anim .cartouche::before,
.js-anim .cartouche::after{
  transform:scaleX(0);
  transition:transform 1.1s cubic-bezier(.22,.68,.28,1) .45s;
}
.js-anim .hero--pret .cartouche::before,
.js-anim .hero--pret .cartouche::after{transform:scaleX(1)}

.js-anim .cartouche > *{
  opacity:0;transform:translate3d(0,14px,0);
  transition:opacity .8s ease,transform .8s cubic-bezier(.22,.68,.28,1);
  transition-delay:calc(.35s + var(--i,0) * 110ms);
}
.js-anim .hero--pret .cartouche > *{opacity:1;transform:none}

/* Le nom arrive lettre par lettre. */
.cartouche__nom .mot{display:inline-block;white-space:nowrap}
.cartouche__nom .lettre{display:inline-block}
.js-anim .cartouche__nom .lettre{
  opacity:0;transform:translate3d(0,.4em,0);
  transition:opacity .5s ease,transform .7s cubic-bezier(.22,.68,.28,1);
  transition-delay:calc(.6s + var(--l,0) * 34ms);
}
.js-anim .hero--pret .cartouche__nom .lettre{opacity:1;transform:none}

/* Les rayons se déploient. */
.js-anim .cartouche__rayons{
  opacity:0;transform:translate3d(0,6px,0) scale(.7);
  transition:opacity .7s ease,transform 1s cubic-bezier(.34,1.32,.5,1) .25s;
}
.js-anim .hero--pret .cartouche__rayons{opacity:1;transform:none}

/* Invitation à descendre : une ligne qui pulse sous le cartouche. */
.hero__suite{
  position:absolute;left:50%;bottom:1.6rem;z-index:3;
  transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
  font-size:.6rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--creme);text-decoration:none;
  text-shadow:0 1px 12px rgba(36,30,26,.6);
}
.hero__suite span{display:block;width:1px;height:38px;background:currentColor;opacity:.7}
.js-anim .hero__suite{opacity:0;transition:opacity .8s ease 1.6s}
.js-anim .hero--pret .hero__suite{opacity:1}
.js-anim .hero__suite span{animation:descendre 2.4s ease-in-out infinite}
@keyframes descendre{
  0%,100%{transform:scaleY(.45);transform-origin:top;opacity:.4}
  50%{transform:scaleY(1);transform-origin:top;opacity:.9}
}

/* ============================================================
   18. RUBAN
   « Café · Brunch · Lunch · Gourmandises » — la ligne de leur
   flyer, remise en mouvement.
   ============================================================ */
.ruban{
  overflow:hidden;
  background:var(--encre);color:var(--laiton-clair);
  padding:.9rem 0;
  border-block:1px solid rgba(179,134,47,.3);
}
.ruban__piste{display:flex;width:max-content}
.js-anim .ruban__piste{animation:defiler 34s linear infinite}
.ruban:hover .ruban__piste{animation-play-state:paused}
.ruban__groupe{
  display:flex;align-items:center;gap:2.4rem;padding-right:2.4rem;
  font-family:var(--display);font-size:clamp(1.1rem,2.4vw,1.7rem);
  letter-spacing:.22em;text-transform:uppercase;white-space:nowrap;
}
.ruban__groupe .losange{background:var(--framboise);width:7px;height:7px}
@keyframes defiler{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}

/* ============================================================
   20. SURVOL
   ============================================================ */
/* Une ligne de la carte s'éclaire au passage. */
.plat{
  position:relative;
  padding-inline:.6rem;margin-inline:-.6rem;
  transition:background .3s ease;
}
.plat::before{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:0;
  background:var(--laiton);transition:width .45s cubic-bezier(.22,.68,.28,1);
}
html:not(.tactile) .plat:hover{background:rgba(179,134,47,.06)}
html:not(.tactile) .plat:hover::before{width:100%}
html:not(.tactile) .plat:hover .plat__prix{color:var(--framboise)}
.plat__prix{transition:color .3s ease}

/* Les boutons appuient un peu quand on clique. */
.tel-btn:active,.btn-fantome:active{transform:translateY(1px) scale(.985)}

/* Les photos du lieu respirent au survol. */
html:not(.tactile) .lieu__photos figure:hover img{transform:scale(1.06)}
.lieu__photos img{transition:transform .9s cubic-bezier(.22,.68,.28,1)}

/* Les liens du bandeau : le filet pousse depuis la gauche. */
.bandeau__nav a{position:relative;border-bottom:none}
.bandeau__nav a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:0;
  background:var(--laiton);transition:width .35s cubic-bezier(.22,.68,.28,1);
}
.bandeau__nav a:hover::after,
.bandeau__nav a:focus-visible::after,
.bandeau__nav .current-menu-item a::after{width:100%}

/* Les actualités se soulèvent. */
.actu__lien{transition:transform .5s cubic-bezier(.22,.68,.28,1)}
html:not(.tactile) .actu__lien:hover{transform:translateY(-6px)}

/* ============================================================
   21. BANDEAU AU DÉFILEMENT
   ============================================================ */
.bandeau{transition:transform .45s cubic-bezier(.22,.68,.28,1),padding .35s ease,box-shadow .35s ease}
.bandeau--compact{padding-block:.45rem;box-shadow:0 8px 30px -22px rgba(36,30,26,.7)}
.bandeau--cache{transform:translateY(-101%)}
html.menu-ouvert .bandeau{transform:none}

/* ============================================================
   22. MOUVEMENT RÉDUIT
   Le visiteur a demandé le calme : on le lui donne, sans rien casser.
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  .js-anim .hero__fond{transform:none}
  *,*::before,*::after{
    animation:none !important;
    transition-duration:.01ms !important;
    transition-delay:0s !important;
  }
  .js-anim .reveal,
  .js-anim .arret,
  .js-anim [data-anim],
  .js-anim .cartouche,
  .js-anim .cartouche > *,
  .js-anim .cartouche__nom .lettre,
  .js-anim .cartouche__rayons{opacity:1;transform:none;clip-path:none}
  .js-anim [data-anim="photo"]::after{display:none}
  .js-anim [data-parallaxe] > img,
  .js-anim [data-parallaxe] .hero__fond img{transform:none}
  .ligne__trace{height:100% !important}
  .bandeau--cache{transform:none}
}


/* ============================================================
   23. LE HERO S'ÉLOIGNE
   Pendant qu'on descend, le cartouche recule et se voile ;
   la photo continue de zoomer. Le contenu passe par-dessus.
   ============================================================ */
.js-anim .hero-cadre .cartouche{
  transform:translate3d(0,calc(var(--p,0) * -60px),0) scale(calc(1 - var(--p,0) * .14));
  opacity:calc(1 - var(--p,0) * 1.5);
  filter:blur(calc(var(--p,0) * 7px));
}
.js-anim .hero--pret .hero__fond img{
  transform:translate3d(0,var(--decalage,0%),0) scale(calc(1.16 + var(--p,0) * .16));
}
.js-anim .hero-cadre .hero__voile{opacity:calc(.35 + var(--p,0) * .65)}
.js-anim .hero-cadre .hero__suite{opacity:calc(1 - var(--p,0) * 3)}

/* Tout ce qui suit recouvre le hero. */
.ruban,.journee,.bande,.carte,.galerie,.lieu,.actus,.pied{position:relative;z-index:2}
.lieu{background:var(--creme)}
.actus{background:var(--creme-2)}

/* ============================================================
   24. GALERIE HORIZONTALE
   ============================================================ */
.galerie{height:var(--hauteur,220svh);background:var(--encre)}
.galerie__cadre{
  position:sticky;top:0;height:100svh;
  display:flex;align-items:center;overflow:hidden;
}
.galerie__piste{
  display:flex;align-items:center;gap:clamp(1rem,3vw,2.4rem);
  padding-inline:clamp(1.25rem,8vw,7rem);
  will-change:transform;
  transform:translate3d(calc(var(--p,0) * var(--course,0px) * -1),0,0);
}
.galerie__mot{flex:none;width:min(78vw,420px);color:var(--creme-2)}
.galerie__mot h2{
  font-size:clamp(1.9rem,4.4vw,3.2rem);line-height:1.08;
  color:var(--laiton-clair);margin:.7rem 0 1rem;
}
.galerie__aide{
  font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(239,230,214,.5);margin:0;
}
.galerie__photo{
  flex:none;margin:0;overflow:hidden;
  width:clamp(220px,32vw,420px);
}
.galerie__photo img{
  width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;
  transition:transform .9s cubic-bezier(.22,.68,.28,1);
}
html:not(.tactile) .galerie__photo:hover img{transform:scale(1.05)}
/* Une photo sur deux décalée : la bande respire. */
.galerie__photo:nth-child(odd){transform:translateY(clamp(1rem,4vw,3rem))}

/* Sans script, la galerie redevient une bande qu'on fait glisser au doigt. */
.no-js .galerie,
html:not(.js-anim) .galerie{height:auto}
.no-js .galerie__cadre,
html:not(.js-anim) .galerie__cadre{position:static;height:auto;padding-block:clamp(3rem,8vw,5rem)}
.no-js .galerie__piste,
html:not(.js-anim) .galerie__piste{overflow-x:auto;transform:none;scroll-snap-type:x mandatory}

@media(prefers-reduced-motion:reduce){
  .hero-cadre{height:auto}
  .hero{position:relative;min-height:min(92svh,940px);height:auto}
  .js-anim .hero-cadre .cartouche{transform:none;opacity:1;filter:none}
  .galerie{height:auto}
  .galerie__cadre{position:static;height:auto;padding-block:3rem}
  .galerie__piste{overflow-x:auto;transform:none}
  .galerie__photo:nth-child(odd){transform:none}
}


/* ============================================================
   25. LA JOURNÉE — épinglée
   Une horloge dont les aiguilles avancent de 8h à 18h pendant
   qu'on descend. À chaque arrêt, la photo et le texte changent.
   Au dernier, les aiguilles s'arrêtent : Terminus.
   ============================================================ */
.journee{
  position:relative;z-index:2;
  /* + 100svh : le cadre reste épinglé pendant le fondu vers la bande. */
  height:calc(var(--nb,5) * 92svh + 100svh);
  background:var(--encre);color:var(--creme-2);
}
.journee__cadre{
  position:sticky;top:0;height:100svh;overflow:hidden;
  display:grid;align-items:center;
}

/* Fonds : une photo par arrêt, fondu enchaîné + zoom lent. */
.journee__fonds{position:absolute;inset:0}
.journee__fond{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease}
.journee__fond img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.12);transition:transform 6s cubic-bezier(.22,.68,.28,1);
}
.journee__fond.est-actif{opacity:1}
.journee__fond.est-actif img{transform:scale(1)}
.journee__voile{
  position:absolute;inset:0;
  background:
    linear-gradient(to right,rgba(36,30,26,.82) 0%,rgba(36,30,26,.55) 55%,rgba(36,30,26,.35) 100%),
    linear-gradient(to top,rgba(36,30,26,.85) 0%,rgba(36,30,26,0) 40%);
  transition:background 1s ease;
}

.journee__inner{
  position:relative;z-index:2;
  width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--pad);
  display:grid;grid-template-columns:minmax(220px,.8fr) 1.4fr;
  gap:clamp(1.5rem,5vw,5rem);align-items:center;
  min-height:100svh;padding-block:clamp(5rem,12vh,7rem) clamp(6rem,14vh,8rem);
}

/* --- l'horloge --- */
.journee__horloge{display:grid;justify-items:center;gap:1rem}
.horloge{
  width:min(100%,clamp(200px,26vw,340px));height:auto;
  filter:drop-shadow(0 20px 40px rgba(0,0,0,.45));
}
.horloge__cadran{fill:rgba(247,242,233,.06);stroke:var(--laiton);stroke-width:1.2}
.horloge__cercle{fill:none;stroke:rgba(217,183,103,.35);stroke-width:.6}
.horloge__heure{stroke:var(--laiton-clair);stroke-width:1.6}
.horloge__minute{stroke:rgba(217,183,103,.45);stroke-width:.6}
.horloge__chiffre{
  font-family:var(--display);font-size:13px;fill:var(--laiton-clair);letter-spacing:.06em;
}
.horloge__aiguille{
  stroke:var(--creme);stroke-linecap:round;
  transform-origin:100px 100px;transform-box:view-box;
}
.horloge__aiguille--h{stroke-width:3.4}
.horloge__aiguille--m{stroke-width:1.8}
.horloge__axe{fill:var(--framboise)}
.journee__heure-lue{
  font-family:var(--display);font-size:clamp(1.6rem,3vw,2.4rem);
  letter-spacing:.06em;color:var(--laiton-clair);margin:0;
  font-variant-numeric:lining-nums;
}

/* --- les panneaux : superposés, un seul visible --- */
.journee__panneaux{position:relative;min-height:clamp(320px,44svh,460px)}
.journee__sur{margin-bottom:1.2rem}
.journee__panneau{
  position:absolute;inset:2.4rem 0 auto 0;
  opacity:0;pointer-events:none;
  transform:translate3d(0,40px,0);
  transition:opacity .7s ease,transform .9s cubic-bezier(.16,.84,.28,1);
}
.journee__panneau.est-passe{transform:translate3d(0,-40px,0)}
.journee__panneau.est-actif{opacity:1;pointer-events:auto;transform:none}
.journee__grande-heure{
  font-family:var(--display);font-size:clamp(3rem,9vw,7rem);line-height:.9;
  color:var(--laiton-clair);margin:0 0 .4rem;letter-spacing:.02em;
  font-variant-numeric:lining-nums;
}
.journee__titre{
  font-size:clamp(1.9rem,4.6vw,3.4rem);line-height:1.05;margin:0 0 1rem;color:var(--creme);
}
.journee__texte{max-width:46ch;color:rgba(239,230,214,.82);font-size:clamp(1rem,1.2vw,1.12rem)}
.journee__texte p{margin:0 0 .7rem}
.journee__mention{
  display:inline-block;margin-top:1rem;
  font-size:.66rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase;
  color:var(--laiton-clair);border-top:1px solid currentColor;padding-top:.5rem;
}
/* Chaque ligne du panneau actif arrive avec un décalage. */
.journee__panneau > *{
  opacity:0;transform:translate3d(0,18px,0);
  transition:opacity .6s ease,transform .7s cubic-bezier(.16,.84,.28,1);
}
.journee__panneau.est-actif > *{opacity:1;transform:none}
.journee__panneau.est-actif > :nth-child(1){transition-delay:.05s}
.journee__panneau.est-actif > :nth-child(2){transition-delay:.15s}
.journee__panneau.est-actif > :nth-child(3){transition-delay:.25s}
.journee__panneau.est-actif > :nth-child(4){transition-delay:.35s}

/* --- la ligne cliquable en bas --- */
.journee__ligne{
  position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(1.6rem,5vh,3rem);
  z-index:3;display:flex;justify-content:space-between;align-items:flex-start;
  max-width:var(--max);margin:0 auto;
}
.journee__rail{
  position:absolute;left:0;right:0;top:4px;height:1px;background:rgba(217,183,103,.3);
}
.journee__trace{
  position:absolute;inset:0;background:var(--laiton-clair);
  transform-origin:left;transform:scaleX(0);transition:transform .25s linear;
}
.journee__arret{
  position:relative;background:none;border:none;padding:0 .4rem;cursor:pointer;
  display:grid;justify-items:center;gap:.7rem;color:rgba(239,230,214,.55);
  font-family:var(--display);font-size:clamp(.95rem,1.6vw,1.2rem);
  font-variant-numeric:lining-nums;letter-spacing:.04em;
  transition:color .3s ease;
}
.journee__arret:first-child{padding-left:0}
.journee__arret:last-child{padding-right:0}
.journee__losange{
  width:9px;height:9px;background:var(--encre);border:1px solid var(--laiton-clair);
  transform:rotate(45deg);transition:background .3s ease,transform .4s cubic-bezier(.34,1.5,.5,1);
}
.journee__arret.est-passe .journee__losange{background:var(--laiton-clair)}
.journee__arret.est-actif{color:var(--creme)}
.journee__arret.est-actif .journee__losange{background:var(--laiton-clair);transform:rotate(45deg) scale(1.5)}
html:not(.tactile) .journee__arret:hover{color:var(--creme)}
.journee__arret:focus-visible{outline:none}
.journee__arret:focus-visible .journee__losange{outline:2px solid var(--framboise);outline-offset:4px}

/* --- l'arrêt en cours à cette minute --- */
.arret__direct{
  display:none;margin-left:.7rem;vertical-align:.25em;
  font-family:var(--corps);font-size:.58rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--framboise);
  border:1px solid currentColor;border-radius:999px;padding:.22rem .6rem;
}
.journee__panneau.est-maintenant .arret__direct{display:inline-block}
.journee__arret.est-maintenant .journee__losange{background:var(--framboise);border-color:var(--framboise)}
.journee__arret.est-maintenant .journee__losange::after{
  content:"";position:absolute;inset:-7px;border:1px solid var(--framboise);
}
.js-anim .journee__arret.est-maintenant .journee__losange::after{animation:respirer 2.6s ease-out infinite}
@keyframes respirer{0%{transform:scale(.7);opacity:.9}70%,100%{transform:scale(1.9);opacity:0}}

/* --- Terminus : tout vire au framboise --- */
.journee--terminus .journee__voile{
  background:
    linear-gradient(to right,rgba(120,26,58,.9) 0%,rgba(80,20,40,.7) 60%,rgba(36,30,26,.5) 100%),
    linear-gradient(to top,rgba(36,30,26,.85) 0%,rgba(36,30,26,0) 40%);
}
.journee--terminus .journee__grande-heure,
.journee--terminus .journee__heure-lue{color:#F3C9D4}
.journee--terminus .horloge__axe{fill:var(--creme)}
.journee--terminus .horloge__cadran{stroke:#F3C9D4}

@media(max-width:820px){
  .journee{height:calc(var(--nb,5) * 88svh + 100svh)}
  .journee__inner{
    grid-template-columns:1fr;gap:1.2rem;align-content:center;
    padding-block:clamp(4rem,10vh,5rem) clamp(6rem,14vh,7rem);
  }
  .journee__horloge{grid-template-columns:auto auto;justify-content:start;align-items:center;gap:1rem}
  .horloge{width:clamp(88px,22vw,120px)}
  .journee__heure-lue{font-size:1.3rem}
  .journee__panneaux{min-height:clamp(300px,50svh,420px)}
  .journee__grande-heure{font-size:clamp(2.6rem,12vw,4rem)}
  .journee__etiquette{font-size:.85rem}
}

/* Sans script, ou en mouvement réduit : tout en colonne, lisible. */
.no-js .journee,html:not(.js-anim) .journee{height:auto}
.no-js .journee__cadre,html:not(.js-anim) .journee__cadre{position:static;height:auto;overflow:visible}
.no-js .journee__fonds,html:not(.js-anim) .journee__fonds{display:none}
.no-js .journee__inner,html:not(.js-anim) .journee__inner{min-height:0}
.no-js .journee__panneaux,html:not(.js-anim) .journee__panneaux{min-height:0}
.no-js .journee__panneau,html:not(.js-anim) .journee__panneau{
  position:static;opacity:1;transform:none;pointer-events:auto;margin-bottom:2.5rem;
}
.no-js .journee__panneau > *,html:not(.js-anim) .journee__panneau > *{opacity:1;transform:none}
.no-js .journee__ligne,html:not(.js-anim) .journee__ligne{display:none}

/* ============================================================
   26. LES AVIS
   ============================================================ */
.avis{position:relative;z-index:2;padding:clamp(4rem,10vw,7.5rem) 0;background:var(--creme);overflow:hidden}
.avis__tete{
  max-width:var(--max);margin:0 auto clamp(2.5rem,6vw,4rem);padding:0 var(--pad);
  display:grid;grid-template-columns:auto 1fr;gap:clamp(2rem,6vw,5rem);align-items:center;
}
.avis__note{display:grid;justify-items:start;gap:.3rem}
.avis__chiffre{
  font-family:var(--display);font-size:clamp(4.5rem,12vw,8.5rem);line-height:.85;
  margin:0;color:var(--encre);font-variant-numeric:lining-nums;letter-spacing:-.02em;
}
.avis__sur{font-size:.32em;color:var(--laiton);letter-spacing:.04em;margin-left:.15em}
.avis__nb{margin:.6rem 0 0;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--encre-doux)}
.avis__mot h2{font-size:clamp(1.9rem,4.6vw,3.2rem);margin:.6rem 0 1.4rem}

.etoiles{display:inline-flex;gap:.2rem}
.etoile{width:1.05rem;height:1.05rem;fill:var(--creme-3)}
.etoile--pleine{fill:var(--laiton)}
.avis__note .etoile{width:1.4rem;height:1.4rem}

.avis__defile{overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
}
.avis__piste{display:flex;gap:clamp(1rem,2vw,1.6rem);width:max-content;padding:.5rem 0 1.5rem}
.js-anim .avis__piste{animation:defiler 70s linear infinite}
.avis__defile:hover .avis__piste{animation-play-state:paused}
.avis__carte{
  flex:none;width:clamp(280px,32vw,400px);margin:0;
  background:#fff;border:1px solid rgba(179,134,47,.22);
  padding:clamp(1.4rem,2.4vw,2rem);
  display:grid;gap:1rem;align-content:start;
  box-shadow:0 30px 60px -40px rgba(36,30,26,.35);
  transition:transform .5s cubic-bezier(.22,.68,.28,1),border-color .3s ease;
}
html:not(.tactile) .avis__carte:hover{transform:translateY(-6px);border-color:var(--laiton)}
.avis__texte{margin:0;font-family:var(--display);font-size:clamp(1.1rem,1.5vw,1.3rem);line-height:1.4;color:var(--encre)}
.avis__texte p{margin:0}
.avis__texte p::before{content:"« "}
.avis__texte p::after{content:" »"}
.avis__auteur{display:grid;gap:.15rem;padding-top:.6rem;border-top:1px solid rgba(179,134,47,.25)}
.avis__nom{font-weight:600;font-size:.9rem}
.avis__meta{font-size:.74rem;color:var(--encre-doux);letter-spacing:.04em}

@media(max-width:760px){
  .avis__tete{grid-template-columns:1fr;gap:1.6rem}
}

/* ============================================================
   27. LE RIDEAU
   ============================================================ */
.rideau{
  position:fixed;inset:0;z-index:100;
  background:var(--creme);
  display:grid;place-items:center;align-content:center;gap:1.2rem;
  transform:translate3d(0,0,0);
  transition:transform .8s cubic-bezier(.76,0,.24,1),visibility 0s linear .8s;
}
.rideau--parti{transform:translate3d(0,-101%,0);visibility:hidden}
.rideau--descend{transform:translate3d(0,0,0);visibility:visible;transition-delay:0s;transition-duration:.5s}
.rideau__losange{
  width:14px;height:14px;background:var(--laiton);transform:rotate(45deg);
}
.js-anim .rideau__losange{animation:tourner 1.6s cubic-bezier(.76,0,.24,1) infinite}
@keyframes tourner{0%{transform:rotate(45deg) scale(1)}50%{transform:rotate(225deg) scale(.6)}100%{transform:rotate(405deg) scale(1)}}
.rideau__nom{
  font-family:var(--display);font-size:clamp(1.1rem,2.4vw,1.5rem);
  letter-spacing:.4em;text-transform:uppercase;color:var(--laiton);margin:0;padding-left:.4em;
}
.no-js .rideau{display:none}

/* ============================================================
   28. LE CURSEUR
   ============================================================ */
.curseur{
  position:fixed;left:0;top:0;z-index:99;pointer-events:none;
  width:0;height:0;opacity:0;transition:opacity .3s ease;
}
.curseur--visible{opacity:1}
.curseur__anneau{
  position:absolute;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;
  border:1px solid var(--laiton);border-radius:50%;
  transition:transform .35s cubic-bezier(.22,.68,.28,1),border-color .3s ease,background .3s ease;
  mix-blend-mode:multiply;
}
.curseur__point{
  position:absolute;left:0;top:0;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;
  background:var(--framboise);border-radius:50%;
  transition:transform .3s ease,opacity .3s ease;
}
.curseur__mot{
  position:absolute;left:0;top:0;transform:translate(-50%,-50%);
  font-size:.6rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--creme);opacity:0;transition:opacity .25s ease;white-space:nowrap;
}
.curseur--lien .curseur__anneau{transform:scale(1.7);border-color:var(--framboise);background:rgba(196,51,92,.08)}
.curseur--lien .curseur__point{transform:scale(0)}
.curseur--mot .curseur__anneau{transform:scale(2.6);background:var(--laiton);border-color:var(--laiton);mix-blend-mode:normal}
.curseur--mot .curseur__point{opacity:0}
.curseur--mot .curseur__mot{opacity:1}
.curseur--presse .curseur__anneau{transform:scale(.8)}
.curseur-actif,.curseur-actif a,.curseur-actif button{cursor:none}
.curseur-actif input,.curseur-actif textarea,.curseur-actif select{cursor:auto}

/* ============================================================
   29. BARRE DE PROGRESSION, MOTS, INCLINAISON, MAGNÉTIQUE
   ============================================================ */
.progression{position:fixed;left:0;right:0;top:0;height:2px;z-index:70;pointer-events:none}
.progression span{
  display:block;height:100%;background:var(--laiton);
  transform-origin:left;transform:scaleX(0);
}

/* Titres mot par mot : chaque mot monte derrière son masque. */
.mot-masque{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
.mot-interne{display:inline-block;transform:translate3d(0,110%,0);transition:transform .9s cubic-bezier(.16,.84,.28,1);transition-delay:calc(var(--m,0) * 70ms)}
[data-anim="mots"].est-vu .mot-interne{transform:none}

/* Photos qui s'inclinent sous la souris. */
[data-incline]{
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .5s cubic-bezier(.22,.68,.28,1);
  transform-style:preserve-3d;
}
[data-incline]::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:3;
  background:radial-gradient(circle at var(--lx,50%) var(--ly,50%),rgba(255,255,255,.18),transparent 55%);
  opacity:0;transition:opacity .4s ease;
}
html:not(.tactile) [data-incline]:hover::after{opacity:1}

.magnetique{transition:transform .35s cubic-bezier(.22,.68,.28,1),background .2s,color .2s}

/* ============================================================
   30. MENU MOBILE — plein écran
   ============================================================ */
.menu-mobile{
  position:fixed;inset:0;z-index:58;
  background:var(--encre);color:var(--creme-2);
  padding:calc(4.5rem + env(safe-area-inset-top)) var(--pad) 2rem;
  display:flex;flex-direction:column;justify-content:space-between;
  clip-path:circle(0% at calc(100% - 2.6rem) 1.6rem);
  transition:clip-path .7s cubic-bezier(.76,0,.24,1);
  border:none;
}
.menu-mobile--ouvert{clip-path:circle(150% at calc(100% - 2.6rem) 1.6rem)}
.menu-mobile ul{list-style:none;margin:0;padding:0;display:grid;gap:.1rem}
.menu-mobile li{overflow:hidden}
.menu-mobile nav a{
  display:block;padding:.6rem 0;text-decoration:none;
  font-family:var(--display);font-size:clamp(2.2rem,9vw,3.4rem);line-height:1.1;color:var(--creme);
  transform:translate3d(0,110%,0);transition:transform .8s cubic-bezier(.16,.84,.28,1);
  border:none;
}
.menu-mobile--ouvert nav li:nth-child(1) a{transform:none;transition-delay:.15s}
.menu-mobile--ouvert nav li:nth-child(2) a{transform:none;transition-delay:.22s}
.menu-mobile--ouvert nav li:nth-child(3) a{transform:none;transition-delay:.29s}
.menu-mobile--ouvert nav li:nth-child(4) a{transform:none;transition-delay:.36s}
.menu-mobile--ouvert nav li:nth-child(5) a{transform:none;transition-delay:.43s}
.menu-mobile__pied{display:grid;gap:.9rem;justify-items:start;opacity:0;transition:opacity .5s ease .5s}
.menu-mobile--ouvert .menu-mobile__pied{opacity:1}
.menu-mobile .pastille{margin:0;background:transparent;border-color:rgba(217,183,103,.4);color:var(--creme-2)}
.menu-mobile__adresse{margin:0;font-size:.85rem;color:rgba(239,230,214,.6)}
html.menu-ouvert{overflow:hidden}
html.menu-ouvert .bandeau{background:transparent;border-color:transparent;backdrop-filter:none;box-shadow:none}
html.menu-ouvert .bandeau__marque,html.menu-ouvert .bandeau__bascule span{color:var(--creme);background-color:var(--creme)}
html.menu-ouvert .bandeau__marque{background:none}
html.menu-ouvert .bandeau .tel-btn{opacity:0;pointer-events:none}
.bandeau__bascule{z-index:61}

/* ============================================================
   31. LE NOM EN GÉANT, TOUT EN BAS
   ============================================================ */
.pied__geant{
  overflow:hidden;margin:clamp(3rem,8vw,5rem) calc(-1 * var(--pad)) 0;padding:0 var(--pad);
  line-height:.8;
}
.pied__geant span{
  display:block;font-family:var(--display);
  font-size:clamp(3rem,11.4vw,11rem);letter-spacing:.02em;text-transform:uppercase;
  white-space:nowrap;text-align:center;
  color:transparent;-webkit-text-stroke:1px rgba(217,183,103,.4);
  background:linear-gradient(to top,var(--laiton-clair) 50%,transparent 50%) 0 calc(100% - var(--p,0) * 200%) / 100% 200% no-repeat;
  -webkit-background-clip:text;background-clip:text;
  transform:translate3d(0,calc((1 - var(--p,0)) * 18%),0);
}

/* ============================================================
   32. MOUVEMENT RÉDUIT — compléments
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  .rideau{display:none}
  .curseur{display:none}
  .mot-interne{transform:none}
  [data-incline]{transform:none}
  .pied__geant span{transform:none;background-position:0 0}
  .menu-mobile{clip-path:none;transition:none}
  .menu-mobile a{transform:none}
}


/* ============================================================
   33. LE FONDU — de 18h aux produits frais
   La bande chevauche le dernier écran de la journée. Épinglée elle
   aussi, elle passe de transparente à opaque pendant que 18h reste
   fixe derrière. Puis les deux se décrochent ensemble.
   ============================================================ */
/* Recule de deux écrans : le premier chevauche l'écran supplémentaire de la
   journée (18h encore épinglé). Le fondu occupe presque toute la course
   (p .3 → .75), la phrase arrive ensuite (p .6 → .9), et la page repart
   aussitôt — pas d'écran mort où rien ne bouge. */
.fondu{
  position:relative;z-index:3;
  height:200svh;margin-top:-200svh;
  pointer-events:none;
}
.fondu__cadre{
  position:sticky;top:0;height:100svh;overflow:hidden;
  opacity:calc((var(--p,0) - .3) / .45);
}
.fondu .bande{height:100svh}
/* La photo continue de zoomer tant qu'elle est épinglée : jamais figée. */
.js-anim .fondu .bande img{
  transform:translate3d(0,var(--decalage,0%),0) scale(calc(1.06 + var(--p,0) * .12));
}
.fondu .bande__mot p{
  opacity:calc((var(--p,0) - .6) / .3);
  transform:translate3d(0,calc((1 - max(0, min(1, (var(--p,0) - .6) / .3))) * 36px),0);
}

/* Sans script, ou en mouvement réduit : une bande ordinaire. */
.no-js .fondu,html:not(.js-anim) .fondu{height:auto;margin-top:0;pointer-events:auto}
.no-js .fondu__cadre,html:not(.js-anim) .fondu__cadre{position:static;height:auto;opacity:1}
.no-js .fondu .bande,html:not(.js-anim) .fondu .bande{height:clamp(280px,45vw,480px)}
.no-js .fondu .bande__mot p,html:not(.js-anim) .fondu .bande__mot p{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .journee{height:auto}
  .fondu{height:auto;margin-top:0;pointer-events:auto}
  .fondu__cadre{position:static;height:auto;opacity:1}
  .fondu .bande{height:clamp(280px,45vw,480px)}
  .fondu .bande__mot p{opacity:1;transform:none}
}


/* ============================================================
   34. VISIONNEUSE
   ============================================================ */
.visionneuse{
  position:fixed;inset:0;z-index:95;
  background:rgba(36,30,26,.94);
  display:grid;place-items:center;
  opacity:0;transition:opacity .35s ease;
  padding:clamp(1rem,4vw,3rem);
}
.visionneuse--visible{opacity:1}
.visionneuse__cadre{margin:0;max-width:min(1200px,100%);max-height:100%;display:grid;gap:.8rem;justify-items:center}
.visionneuse__img{
  max-width:100%;max-height:82svh;width:auto;height:auto;object-fit:contain;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.8);
  opacity:0;transform:scale(.96);transition:opacity .45s ease,transform .6s cubic-bezier(.22,.68,.28,1);
}
.visionneuse__img.est-chargee{opacity:1;transform:none}
.visionneuse__legende{font-family:var(--display);font-size:1.05rem;color:var(--creme-2);text-align:center;font-style:italic}
.visionneuse__compteur{
  position:absolute;left:50%;bottom:1.2rem;transform:translateX(-50%);
  margin:0;font-size:.7rem;letter-spacing:.2em;color:rgba(239,230,214,.6);
  font-variant-numeric:lining-nums;
}
.visionneuse__fermer,.visionneuse__prec,.visionneuse__suiv{
  position:absolute;background:none;border:1px solid rgba(217,183,103,.4);
  color:var(--creme);cursor:pointer;
  width:48px;height:48px;border-radius:50%;font-size:1.3rem;line-height:1;
  display:grid;place-items:center;
  transition:background .25s ease,border-color .25s ease,transform .25s ease;
}
.visionneuse__fermer{top:1.2rem;right:1.2rem;font-size:1.8rem}
.visionneuse__prec{left:1.2rem;top:50%;transform:translateY(-50%)}
.visionneuse__suiv{right:1.2rem;top:50%;transform:translateY(-50%)}
.visionneuse__fermer:hover,.visionneuse__prec:hover,.visionneuse__suiv:hover{background:var(--laiton);border-color:var(--laiton);color:var(--encre)}
.visionneuse__prec:hover{transform:translateY(-50%) translateX(-3px)}
.visionneuse__suiv:hover{transform:translateY(-50%) translateX(3px)}
.visionneuse--seule .visionneuse__prec,.visionneuse--seule .visionneuse__suiv{display:none}
html.visionneuse-ouverte{overflow:hidden}
html.visionneuse-ouverte .curseur{opacity:0}
[data-visionneuse]{cursor:pointer}
[data-visionneuse]:focus-visible{outline:2px solid var(--framboise);outline-offset:4px}
@media(max-width:700px){
  .visionneuse{padding:3.5rem .5rem 3rem}
  .visionneuse__prec,.visionneuse__suiv{width:40px;height:40px;left:.5rem}
  .visionneuse__suiv{left:auto;right:.5rem}
}

/* ============================================================
   35. FORMULAIRE DE CONTACT
   ============================================================ */
.formulaire{padding:0 var(--pad) clamp(4rem,10vw,7rem)}
.formulaire__inner{
  max-width:var(--max);margin:0 auto;
  display:grid;gap:clamp(2rem,5vw,4rem);
  grid-template-columns:minmax(240px,.8fr) 1.4fr;align-items:start;
  padding-top:clamp(3rem,7vw,5rem);border-top:1px solid rgba(179,134,47,.3);
}
.formulaire__mot h2{font-size:clamp(1.7rem,3.8vw,2.6rem);margin:.6rem 0 1rem}
.formulaire__mot p{color:var(--encre-doux);margin:0 0 1.4rem}
.formulaire__form{
  background:#fff;border:1px solid rgba(179,134,47,.25);
  padding:clamp(1.4rem,3vw,2.4rem);
  box-shadow:0 30px 60px -45px rgba(36,30,26,.4);
}
.formulaire__grille{display:grid;gap:1rem 1.2rem;grid-template-columns:1fr 1fr}
.champ{margin:0;display:grid;gap:.4rem}
.champ--large{grid-column:1 / -1}
.champ label{font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--encre-doux)}
.champ__facultatif{font-weight:400;letter-spacing:.04em;text-transform:none;color:var(--laiton)}
.champ input,.champ select,.champ textarea{
  width:100%;font:inherit;font-size:1rem;color:var(--encre);
  padding:.75rem .9rem;background:var(--creme);
  border:1px solid rgba(179,134,47,.35);border-radius:2px;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.champ input:focus,.champ select:focus,.champ textarea:focus{
  outline:none;border-color:var(--laiton);box-shadow:0 0 0 3px rgba(179,134,47,.18);
}
.champ textarea{resize:vertical;min-height:140px}
.champ--case{margin-top:1.2rem}
.champ--case label{
  display:flex;gap:.7rem;align-items:flex-start;
  font-size:.85rem;font-weight:400;letter-spacing:0;text-transform:none;color:var(--encre-doux);
}
.champ--case input{width:auto;margin-top:.2rem;accent-color:var(--framboise)}
.champ--case a{color:var(--framboise)}
.formulaire__envoi{margin:1.4rem 0 0}
.formulaire__envoi .tel-btn{font-size:.85rem;padding:.8rem 1.5rem}
.formulaire__piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;margin:0}
.formulaire__retour{
  margin:0 0 1.2rem;padding:.9rem 1.1rem;font-size:.92rem;border-left:3px solid;
}
.formulaire__retour--ok{background:rgba(126,142,121,.14);border-color:var(--sauge);color:#3f4f3b}
.formulaire__retour--erreur{background:rgba(181,87,60,.12);border-color:var(--terracotta);color:#6e3320}
@media(max-width:820px){
  .formulaire__inner{grid-template-columns:1fr}
  .formulaire__grille{grid-template-columns:1fr}
}

/* ============================================================
   36. PAGES LÉGALES
   ============================================================ */
.prose--legal h2{font-size:1.4rem;margin-top:2.2rem;padding-bottom:.4rem;border-bottom:1px solid rgba(179,134,47,.3)}
.prose--legal p{color:var(--encre-doux);line-height:1.75}
.prose__chapeau{font-family:var(--display);font-size:1.3rem;color:var(--encre) !important;line-height:1.45 !important}
.prose__date{font-size:.8rem;margin-top:2.5rem}
mark.a-completer{
  background:rgba(196,51,92,.14);color:var(--framboise);
  padding:.1em .45em;border-radius:2px;font-size:.85em;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
}