:root{
  --brand:#c8102e; --brand-d:#a00d24; --green:#2c6238; --green-d:#204a29; --gold:#c69a4a;
  --ink:#211913; --paper:#fbf7ef; --cream:#f2ebdd; --cream-2:#eae0cd;
  --muted:#6f5f52; --line:#e6dcc9; --maxw:1180px; --radius:15px;
  --shadow:0 22px 50px -24px rgba(33,25,19,.5);
}
*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper); color:var(--ink); font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif; font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:'DM Serif Display',Georgia,'Times New Roman',serif; font-weight:700; line-height:1.05; letter-spacing:-.005em}
a{color:inherit}
img{display:block; max-width:100%}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px}
.kicker{font-family:'Inter'; font-weight:600; letter-spacing:.2em; text-transform:uppercase; font-size:.76rem; color:var(--brand)}
.it{font-family:'DM Serif Display'; font-style:italic; font-weight:500}
.btn{display:inline-flex; align-items:center; gap:9px; font-weight:600; font-size:.97rem; padding:14px 26px; border-radius:999px; text-decoration:none; border:1.5px solid transparent; cursor:pointer; transition:transform .18s ease, background .2s ease, color .2s ease, box-shadow .2s ease}
.btn-primary{position:relative; overflow:hidden; background:var(--brand); color:#fff; box-shadow:0 14px 26px -14px rgba(200,16,46,.9)}
.btn-primary::before{content:""; position:absolute; top:0; left:-130%; width:55%; height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent); transform:skewX(-18deg); transition:left .6s ease; pointer-events:none}
.btn-primary:hover::before{left:150%}
.btn-primary:hover{background:var(--brand-d); transform:translateY(-2px)}
.magnetic{will-change:transform}
.btn-ghost{border-color:rgba(255,255,255,.6); color:#fff}
.btn-ghost:hover{background:#fff; color:var(--ink); transform:translateY(-2px)}
.btn-green{background:var(--green); color:#fff}
.btn-green:hover{background:var(--green-d); transform:translateY(-2px)}
.btn-dark{background:var(--ink); color:var(--paper)}
.btn-dark:hover{background:#000; transform:translateY(-2px)}
section{padding:clamp(62px,8.5vw,112px) 0}

header{position:fixed; inset:0 0 auto 0; z-index:60; transition:background .3s ease, box-shadow .3s ease, padding .3s ease; padding:15px 0}
header.solid{background:rgba(251,247,239,.95); backdrop-filter:blur(9px); box-shadow:0 1px 0 var(--line); padding:8px 0}
.nav{display:flex; align-items:center; justify-content:space-between; gap:18px}
.brand-logo{display:inline-flex; align-items:center; gap:11px; text-decoration:none}
.brand-logo img{height:52px; width:auto; display:block}
.brand-logo .logo-dark{display:none}
header.solid .brand-logo .logo-light{display:none}
header.solid .brand-logo .logo-dark{display:block}
.brand-logo b{font-family:'DM Serif Display'; font-weight:700; font-size:1.35rem; color:#fff; transition:color .3s}
header.solid .brand-logo b{color:var(--ink)}
.navlinks{display:flex; gap:27px; align-items:center}
.navlinks .cta-mob{display:none}
/* Menu : une icône devant chaque entrée et de l'air entre les lettres
   (demandé le 18.09.2026). L'interlettrage ouvert donne de la tenue à des
   libellés courts et rapproche la barre de l'enseigne peinte. Les icônes sont
   des tracés, jamais des emojis, et prennent la couleur du texte. */
.navlinks a{position:relative; display:inline-flex; align-items:center; gap:7px; text-decoration:none;
  font-weight:700; font-size:.775rem; letter-spacing:.085em; text-transform:uppercase; color:#fff;
  transition:color .3s, opacity .3s; opacity:.94}
.navlinks a:hover{opacity:1}
.nav-ic{width:15px; height:15px; flex:none; opacity:.78; transition:opacity .3s, transform .3s}
.navlinks a:hover .nav-ic{opacity:1; transform:translateY(-1px)}
.navlinks a[aria-current="page"] .nav-ic{opacity:1; color:var(--gold)}
.navlinks a::after{content:""; position:absolute; left:22px; right:100%; bottom:-5px; height:2px; background:var(--gold); border-radius:2px; transition:right .28s cubic-bezier(.4,.7,.2,1)}
.navlinks a:hover::after{right:0}
header.solid .navlinks a{color:var(--ink)}
.navlinks a:hover{color:var(--gold)}
.nav-cta{display:flex; align-items:center; gap:13px}
.nav-phone{text-decoration:none; font-weight:600; color:#fff; white-space:nowrap; transition:color .3s}
header.solid .nav-phone{color:var(--ink)}
.burger{display:none; background:none; border:0; cursor:pointer; padding:6px}
.burger span{display:block; width:26px; height:2px; background:#fff; margin:5px 0; transition:.25s; border-radius:2px; transform-origin:center}
header.solid .burger span{background:var(--ink)}
/* Le burger devient une croix quand le tiroir est ouvert : meme bouton,
   geste symetrique pour ouvrir et refermer (07.09.2026). */
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* Sélecteur de langue (header desktop + menu hamburger mobile) */
.olo-lang{display:inline-flex; gap:3px; align-items:center}
.olo-lang button{border:0; background:none; cursor:pointer; font-family:inherit; font-weight:600; font-size:12px; line-height:1; letter-spacing:.03em; color:#fff; opacity:.68; padding:6px 7px; border-radius:7px; transition:opacity .15s,color .15s}
.olo-lang button:hover{opacity:1}
.olo-lang button[aria-current="true"]{opacity:1; color:var(--gold)}
header.solid .olo-lang button{color:var(--ink)}
header.solid .olo-lang button[aria-current="true"]{color:var(--gold)}
.nav-cta .olo-lang--desk{margin-right:8px}
.olo-lang--mob{display:none}
@media(max-width:640px){
  .olo-lang--desk{display:none}
  .olo-lang--mob{display:flex; gap:8px; margin-top:16px; padding-top:18px; border-top:1px solid rgba(0,0,0,.12)}
  .olo-lang--mob button{color:var(--ink); font-size:15px; opacity:.85; padding:6px}
  .olo-lang--mob button[aria-current="true"]{color:var(--gold); opacity:1}
}

.hero{position:relative; min-height:100svh; display:flex; align-items:flex-end; color:#fff; overflow:hidden; background:#1a120c}
.hero-media{position:absolute; left:0; top:-9%; width:100%; height:118%; object-fit:cover; z-index:0}
img.hero-media{animation:kenburns 26s ease-in-out infinite alternate; will-change:transform}
video.hero-media{will-change:transform}
@keyframes kenburns{from{transform:scale(1.05)}to{transform:scale(1.16)}}
@media(prefers-reduced-motion:reduce){img.hero-media{animation:none}}
.hero::after{content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg,rgba(26,18,12,.42) 0%,rgba(26,18,12,.06) 28%,rgba(16,11,7,.62) 62%,rgba(16,11,7,.95) 100%)}
.hero-inner{position:relative; z-index:3; padding:0 22px clamp(50px,8vw,100px); max-width:var(--maxw); margin:0 auto; width:100%}
/* Reglage « C », valide le 07.09.2026, puis changement de police le 18.09.2026.
   Le Bodoni Moda etait un didone : ombre portee retiree et titre agrandi pour que
   ses delies de cheveu ne se noient plus dans la photo. C'etait une rustine — la
   police elle-meme etait le probleme. DM Serif Display a des traits pleins et
   reguliers : le fondu du bas suffit desormais a porter la lisibilite. */
.hero .kicker{color:#f0d9b8; font-size:.84rem; letter-spacing:.26em}
.hero h1{font-size:clamp(3.4rem,10vw,7.6rem); font-weight:900; line-height:.92; letter-spacing:-.03em; margin:.06em 0 .18em; max-width:13ch}
.hero .lede{font-size:clamp(1.15rem,1.6vw,1.45rem); line-height:1.5; max-width:44ch; color:#f3ece2; margin-bottom:26px}
.hero-actions{display:flex; flex-wrap:wrap; gap:13px}

.proof{background:var(--ink); color:var(--paper)}
.proof .grid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; text-align:center; padding:30px 0}
.proof .n{font-family:'DM Serif Display'; font-size:1.7rem; color:#fff; font-weight:700; display:flex; align-items:center; justify-content:center; gap:7px}
.proof .n .star{color:var(--gold); font-size:1.05rem}
.proof .l{font-size:.85rem; color:#d6c9ba; margin-top:3px}
.proof .sep{border-left:1px solid rgba(255,255,255,.14)}

.eyebrow-row{max-width:680px}
.eyebrow-row h2{font-size:clamp(2.1rem,4.8vw,3.2rem); margin:10px 0 14px}
.lead{font-size:1.12rem; color:var(--muted)}
.split{display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(28px,5vw,62px); align-items:center}
.split .media{position:relative}
.split .media img{width:100%; height:100%; max-height:540px; object-fit:cover; border-radius:var(--radius); box-shadow:var(--shadow)}
.split .tag{position:absolute; left:-14px; bottom:26px; background:var(--brand); color:#fff; font-family:'DM Serif Display'; font-weight:700; padding:12px 20px; border-radius:12px; box-shadow:var(--shadow); font-size:1.02rem}
/* L'en-tete est fixe (position:sticky) : sans ce decalage, le haut de la
   section disparaissait dessous a l'arrivee par un lien d'ancre. 07.09.2026. */
.histoire{background:linear-gradient(180deg,var(--paper),var(--cream));scroll-margin-top:76px}
.histoire p{margin-bottom:15px; color:#3f342a}
.histoire .quote{font-family:'DM Serif Display'; font-style:italic; font-size:clamp(1.3rem,2.8vw,1.8rem); color:var(--brand); font-weight:500; margin:18px 0; line-height:1.3}

.specs{background:var(--cream)}
.cards{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:38px}
.card{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; transition:transform .22s ease, box-shadow .25s ease}
.card:hover{transform:translateY(-6px); box-shadow:var(--shadow)}
.card .ph{aspect-ratio:4/3; overflow:hidden; background:var(--cream-2)}
.card .ph img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease}
.card:hover .ph img{transform:scale(1.06)}
.card .body{padding:16px 18px 20px}
.card h3{font-size:1.3rem; margin-bottom:5px}
.card p{font-size:.92rem; color:var(--muted)}

/* ===== MIDI EXPRESS (refait le 18.09.2026) ==================================
   C'est l'offre qui distingue la maison — « mangez en 15 minutes » — et elle
   tenait dans un aplat vert avec deux colonnes. Jugée « pas voyante, pas assez
   animée, pas design ».
   Ce qui la porte maintenant : un fond en profondeur plutôt qu'un aplat, le
   chiffre 15 en filigrane derrière le texte, et les quatre étapes alignées sur
   un trait qui se dessine quand la section entre à l'écran.
   Tout part du défilement ou du survol : rien ne clignote, rien ne tourne en
   boucle, et tout s'arrête en prefers-reduced-motion. */
.midi{position:relative; overflow:hidden; color:#fff;
  background:radial-gradient(120% 90% at 12% 0%, #3a7d49 0%, #2c6238 45%, #1e4526 100%)}
.midi h2{color:#fff}
.midi .kicker{color:#cfe6d3}

/* Le « 15 » en filigrane. Il glisse un peu au défilement, sans jamais gêner la
   lecture : il reste derrière et très peu contrasté. */
.midi-chiffre{position:absolute; right:-.06em; top:50%; transform:translateY(-50%);
  font-family:'DM Serif Display',Georgia,serif; font-size:clamp(20rem,42vw,38rem); line-height:.72;
  color:rgba(255,255,255,.055); pointer-events:none; user-select:none; z-index:0}
.midi .wrap{position:relative; z-index:1}
.midi-head{max-width:62ch}
.midi-lede{color:#eaf3ec; font-size:clamp(1.02rem,1.5vw,1.12rem); line-height:1.6; margin-top:12px}

/* Les étapes : une ligne, un trait qui se remplit, une apparition décalée. */
.midi-etapes{list-style:none; padding:0; margin:clamp(32px,5vw,50px) 0 clamp(30px,4vw,44px);
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2.4vw,28px); position:relative}
.midi-etapes::before{content:""; position:absolute; left:24px; right:24px; top:23px; height:2px;
  background:rgba(255,255,255,.18); transform:scaleX(0); transform-origin:left;
  transition:transform 1.1s cubic-bezier(.4,.7,.2,1) .15s}
.midi-etapes.in::before{transform:scaleX(1)}
.midi-etapes li{position:relative; opacity:0; transform:translateY(12px);
  transition:opacity .5s ease, transform .5s cubic-bezier(.4,.7,.2,1);
  transition-delay:calc(.28s + var(--i) * .13s)}
.midi-etapes.in li{opacity:1; transform:none}
.midi-etapes .n{display:grid; place-items:center; width:46px; height:46px; border-radius:50%;
  background:#fff; color:#1e4526; font-family:'DM Serif Display',Georgia,serif; font-size:1.35rem;
  box-shadow:0 8px 18px -8px rgba(0,0,0,.6); position:relative; z-index:1}
.midi-etapes .t{color:#e4efe6; margin-top:14px; line-height:1.55; font-size:.97rem}
.midi-etapes .t b{color:#fff; font-family:'DM Serif Display',Georgia,serif; font-weight:400; font-size:1.06rem}

/* Le bas : le QR, les boutons, et une pizza qui déborde du cadre. */
.midi-bas{display:grid; grid-template-columns:auto 1fr auto; gap:clamp(20px,3.5vw,40px); align-items:center;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); border-radius:var(--radius);
  padding:clamp(20px,3vw,30px); position:relative; overflow:hidden}
.midi-qr{text-align:center; flex:none}
.midi-qr img{width:150px; border-radius:10px; display:block; box-shadow:0 10px 24px -12px rgba(0,0,0,.8);
  transition:transform .35s cubic-bezier(.4,.7,.2,1)}
.midi-bas:hover .midi-qr img{transform:scale(1.04) rotate(-1.2deg)}
.midi-qr b{display:block; margin-top:11px; font-family:'DM Serif Display',Georgia,serif; font-size:1.02rem}
.midi-actions{display:flex; flex-direction:column; gap:12px; align-items:flex-start}
.midi-pizza{width:190px; height:190px; object-fit:cover; border-radius:50%; flex:none;
  box-shadow:0 18px 40px -18px rgba(0,0,0,.85); transition:transform .5s cubic-bezier(.4,.7,.2,1)}
.midi-bas:hover .midi-pizza{transform:rotate(7deg) scale(1.03)}

@media(max-width:980px){
  .split{grid-template-columns:1fr; gap:26px}
  .midi-etapes{grid-template-columns:repeat(2,1fr); gap:24px}
  .midi-etapes::before{display:none}
  .midi-bas{grid-template-columns:auto 1fr}
  .midi-pizza{display:none}
}
@media(max-width:640px){
  .midi-etapes{grid-template-columns:1fr}
  .midi-bas{grid-template-columns:1fr; text-align:center}
  .midi-qr img{margin:0 auto}
  .midi-actions{align-items:stretch}
  .midi-chiffre{font-size:26rem; right:-.12em; opacity:.8}
}
@media(prefers-reduced-motion:reduce){
  .midi-etapes::before{transition:none; transform:scaleX(1)}
  .midi-etapes li{transition:none; opacity:1; transform:none}
  .midi-qr img,.midi-pizza{transition:none}
  .midi-bas:hover .midi-qr img,.midi-bas:hover .midi-pizza{transform:none}
}

/* RÈGLE DE GALERIE (18.09.2026) : jamais une photo seule sur une ligne.
   La première vignette occupe 2x2, il faut donc que le compte tombe juste à
   CHAQUE largeur — 4 colonnes : 4+(n-1) multiple de 4 ; 2 colonnes : 2+(n-1)
   multiple de 2. Les nombres qui marchent sont 9, 13, 17. Filet de sécurité
   ci-dessous : si malgré tout une dernière photo se retrouve orpheline, elle
   s'étire au lieu de laisser un trou. */
.gallery-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:34px}
.gallery-grid .gph:last-child:nth-child(4n+3){grid-column:span 2}
/* Vignettes non cliquables (07.09.2026) : elles ouvraient le JPEG brut dans
   un nouvel onglet, sans retour ni marque — de simples div, pas des liens. */
.gallery-grid .gph{display:block; overflow:hidden; border-radius:12px}
.gallery-grid img{width:100%; height:290px; object-fit:cover; transition:transform .5s ease}
.gallery-grid .gph:hover img{transform:scale(1.06)}
.gallery-grid .gph:first-child{grid-column:span 2; grid-row:span 2}
.gallery-grid .gph:first-child img{height:100%}

.kids{background:var(--cream)}
.kids .split{align-items:center}
.kids .badge{display:inline-block; background:var(--green); color:#fff; font-weight:600; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; padding:6px 14px; border-radius:999px; margin-bottom:14px}

.infos{background:var(--ink); color:var(--paper)}
.infos h2{color:#fff}
.infos .cols{display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(28px,5vw,58px); margin-top:30px}
/* Deux colonnes qui passent a une seule sur telephone. minmax(0,1fr) et non 1fr :
   sans le minmax, une colonne refuse de descendre sous la largeur de son contenu
   et la page part en travers (releve chez IMP Talents le 14.09.2026, puis ici le
   17.09.2026 sur /midi-express). */
.infos-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(20px,4vw,26px); margin-top:30px}
@media(max-width:860px){ .infos-grid{grid-template-columns:minmax(0,1fr)} }
.infos .row{display:flex; gap:12px; padding:13px 0; border-bottom:1px solid rgba(255,255,255,.12)}
.infos .row .lab{min-width:110px; color:var(--gold); font-weight:600; font-size:.85rem; text-transform:uppercase; letter-spacing:.05em}
.infos .row .val{color:#eee3d4}
.infos a{color:#fff}
.map-card{border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column; justify-content:flex-end; min-height:280px; padding:24px; background-image:linear-gradient(180deg,rgba(20,14,9,.1),rgba(20,14,9,.85)),url('ambiance.jpg?v=73dc2d01'); background-size:cover; background-position:center; text-decoration:none}

.final{background:var(--brand); color:#fff; text-align:center}
.final h2{color:#fff; font-size:clamp(2.2rem,5.5vw,3.6rem); max-width:18ch; margin:0 auto 12px}
.final p{color:#ffe0d8; max-width:44ch; margin:0 auto 24px}
.final .hero-actions{justify-content:center}

footer{background:#181009; color:#c7b6a3; padding:54px 0 28px}
footer .cols{display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:34px}
footer h4{color:#fff; font-family:'DM Serif Display'; font-size:1.1rem; margin-bottom:13px}
footer a{color:#c7b6a3; text-decoration:none; display:block; padding:4px 0}
footer a:hover{color:var(--gold)}
footer .bottom{margin-top:34px; padding-top:20px; border-top:1px solid rgba(255,255,255,.1); font-size:.85rem; color:#8a7563; display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap}


.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease}
.reveal.in{opacity:1; transform:none}
.navov{position:fixed; inset:0; background:rgba(20,14,9,.55); z-index:55; opacity:0; visibility:hidden; transition:.25s}
.navov.show{opacity:1; visibility:visible}

@media(max-width:980px){
  /* On ne scanne pas son propre écran : sur téléphone et tablette, le QR code
     cède la place à une photo appétissante et au bouton de précommande.
     La règle qui montre la photo est plus bas, après sa déclaration. */
  .cards{grid-template-columns:1fr 1fr}
  .infos .cols{grid-template-columns:1fr}
  footer .cols{grid-template-columns:1fr 1fr}
  .gallery-grid{grid-template-columns:1fr 1fr}
  .gallery-grid .gph:first-child{grid-column:span 2; grid-row:auto}
  .gallery-grid .gph:first-child img{height:290px}
}
@media(max-width:640px){
  body{font-size:16px}
  .navlinks{position:fixed; top:0; right:0; height:100vh; width:80%; max-width:320px; background:var(--paper); flex-direction:column; align-items:flex-start; justify-content:center; padding:40px 32px; gap:20px; transform:translateX(100%); transition:.3s; z-index:58; box-shadow:var(--shadow)}
  .navlinks.open{transform:none}
  .navlinks a{color:var(--ink); font-size:1.2rem; font-family:'DM Serif Display'}
  .burger{display:block; z-index:59}
  header .nav-phone{display:none}
  /* « Groupes & ateliers » ne tient pas a cote du burger : sur telephone il
     descend dans le menu, ou il s'ecrit sur une ligne. */
  .nav-cta .btn-primary{display:none}
  .navlinks .cta-mob{display:block; background:var(--brand); color:#fff; padding:12px 22px; border-radius:50px; font-family:'Inter',sans-serif; font-size:.92rem; font-weight:600; letter-spacing:.02em; text-transform:uppercase; margin-top:8px}
  .navlinks .cta-mob:hover{color:#fff}
  .cards, footer .cols{grid-template-columns:1fr}
  .proof .grid{grid-template-columns:1fr 1fr; gap:18px}
  .proof .sep{border-left:0}
  .gallery-grid{grid-template-columns:1fr 1fr}
  .hero-actions .btn{flex:1}
}

/* ═══════════════════════════════════════════════════════════════════
   Pages dédiées (Midi Express, Nous trouver)
   Même en-tête, même pied de page que l'accueil ; seule la bannière
   change : compacte, elle laisse le contenu commencer tout de suite.
   ═══════════════════════════════════════════════════════════════════ */
.page-hero{position:relative; min-height:46vh; display:flex; align-items:flex-end; color:#fff; overflow:hidden; background:#1a120c; padding:120px 0 48px}
.page-hero img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.5}
.page-hero::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(26,18,12,.55) 0%, rgba(26,18,12,.2) 42%, rgba(26,18,12,.88) 100%)}
.page-hero .wrap{position:relative; z-index:2}
.page-hero h1{font-family:'DM Serif Display',Georgia,serif; font-weight:900; font-size:clamp(40px,7vw,74px); line-height:1.02; letter-spacing:-.02em}
.page-hero .lede{max-width:56ch; margin-top:14px; color:#f0e6d8; font-size:clamp(16px,2vw,19px)}
.page-hero .kicker{color:var(--gold)}
.fil{padding:16px 0 0; font-size:13px; color:var(--muted)}
.fil a{color:var(--muted); text-decoration:none; border-bottom:1px solid var(--line)}
.fil a:hover{color:var(--brand); border-color:var(--brand)}
.bloc{padding:52px 0}
.bloc--cream{background:var(--cream)}

/* La photo qui remplace le QR code sur téléphone et tablette. */
/* Pleine largeur : c'est la photo qui doit accrocher l'oeil, pas un timbre
   de 280 pixels herite du gabarit du QR code. */

/* Le fait qu'on ne réserve pas est une bonne nouvelle : on l'annonce comme telle. */
.libre{display:flex; gap:16px; align-items:flex-start; background:var(--paper); border:1px solid var(--line); border-left:4px solid var(--green); border-radius:var(--radius); padding:18px 22px; margin-top:22px}
.libre .ic{font-family:'DM Serif Display',Georgia,serif; font-size:2rem; color:var(--green); line-height:1}
.libre b{display:block; font-family:'DM Serif Display',Georgia,serif; font-size:1.25rem; color:var(--ink)}
.libre p{margin-top:4px; color:var(--muted); font-size:15px}

/* ------- Pages légales (mentions, confidentialité) — 18.09.2026 -------------
   Deux pages de texte, sans photo : elles n'ont pas besoin d'un bandeau image,
   mais elles doivent rester dans la charte et lisibles sur un téléphone. */
.page-hero--plain{background:var(--ink);min-height:0;padding:clamp(88px,12vw,132px) 0 clamp(28px,5vw,44px)}
.page-hero--plain .kicker{color:var(--gold)}
.page-hero--plain h1{color:#fff}
.legal{max-width:760px}
.legal h2{font-size:clamp(19px,2.4vw,23px);margin:clamp(26px,4vw,38px) 0 10px}
.legal h2:first-of-type{margin-top:0}
.legal p{margin:0 0 12px;line-height:1.65}
.legal a{color:var(--brick);text-decoration:underline;text-underline-offset:2px}
.legal-lead{font-size:clamp(17px,2.2vw,19px);color:var(--muted);margin-bottom:clamp(22px,4vw,34px)}
.legal-note{color:var(--muted);font-size:14.5px}

/* Le pied écrivait « Chez Mario » en texte : le logo du client doit y être en image. */
footer .foot-logo{height:54px;width:auto;display:block;margin-bottom:12px}

/* ------- Pages de récit : histoire, atelier, livraison (18.09.2026) ---------
   Ces pages viennent du site Wix du client, recréées ici pour garder leurs
   adresses et leur référencement. Du texte long, donc une colonne étroite. */
.recit{max-width:760px}
.recit h2{font-size:clamp(21px,2.8vw,27px);margin:clamp(30px,4.5vw,44px) 0 12px}
.recit h2:first-child{margin-top:0}
.recit p{margin:0 0 14px;line-height:1.72;font-size:clamp(16px,1.9vw,17.5px)}
.recit .cit{margin:22px 0;padding:18px 22px;border-left:3px solid var(--brick);background:var(--paper-2,#f6efe4);
  font-family:"DM Serif Display",Georgia,serif;font-size:clamp(18px,2.3vw,21px);line-height:1.5;font-style:italic}
.recit-img{margin:clamp(24px,4vw,36px) 0}
.recit-img img{width:100%;height:auto;border-radius:var(--radius);display:block}
.recit-img figcaption{margin-top:9px;color:var(--muted);font-size:14px}
.recit-fin{font-family:"DM Serif Display",Georgia,serif;font-size:clamp(18px,2.3vw,21px);line-height:1.5;margin-top:22px}
.recit-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:clamp(26px,4vw,38px)}
.encart-fort{background:var(--paper-2,#f6efe4);border-left:3px solid var(--green,#2c6238);
  border-radius:12px;padding:16px 20px;margin:0 0 clamp(24px,4vw,34px);line-height:1.65}
.livr-cta{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:14px;margin:clamp(22px,4vw,32px) 0}
.livr-btn{display:flex;align-items:center;justify-content:center;gap:12px;padding:18px 20px;font-size:16.5px;border:1px solid var(--line,#e6dcc9);
  border-radius:14px;background:#fff;text-decoration:none;color:inherit;font-weight:600;transition:border-color .15s,transform .15s}
.livr-btn:hover{border-color:var(--brick);transform:translateY(-1px)}
.livr-btn img{height:26px;width:auto;flex:none}

/* ------- Blog : liste des articles et revue de presse (18.09.2026) --------- */
.post-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(16px,2.5vw,22px)}
.post-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line,#e6dcc9);border-radius:var(--radius);
  overflow:hidden;text-decoration:none;color:inherit;transition:border-color .15s,transform .15s,box-shadow .15s}
.post-card:hover{border-color:var(--brick);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.07)}
.post-card img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.post-card>div{padding:18px 20px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.post-card h3{font-size:19px;line-height:1.28;margin:0}
.post-card p{color:var(--muted);font-size:14.5px;line-height:1.55;margin:0;flex:1}
.post-plus{color:var(--brick);font-weight:600;font-size:14.5px}
.presse{margin-top:clamp(40px,6vw,64px);max-width:760px}
.presse h2{font-size:clamp(21px,2.8vw,27px);margin:0 0 6px}
.presse-lead{color:var(--muted);margin:0 0 18px}
.presse-liste{list-style:none;padding:0;margin:0;border-top:1px solid var(--line,#e6dcc9)}
.presse-liste li{display:flex;flex-wrap:wrap;gap:4px 18px;padding:14px 0;border-bottom:1px solid var(--line,#e6dcc9)}
.presse-liste b{min-width:190px;color:var(--brick)}
.presse-liste span{color:var(--ink)}

/* ------- Bouton Midi Express : le sablier (18.09.2026) ----------------------
   C'est l'offre qui distingue la maison — « mangez en 15 minutes » — et elle était
   annoncée par un bouton fantôme, le moins visible de la page.
   Sablier choisi par l'utilisateur sur cinq propositions. Il se retourne au survol :
   il dit « vite » sans avoir à énoncer un chiffre, et le chiffre est quand même là,
   en sous-titre. Le retournement dure une seconde, assez pour se voir, assez court
   pour ne pas retenir quelqu'un qui veut cliquer. */
.btn-midi{position:relative; display:inline-flex; align-items:center; gap:13px;
  padding:11px 26px 11px 15px; border-radius:999px; text-decoration:none; overflow:hidden;
  color:#fff; background:linear-gradient(135deg,#2f6b3c,#215030); border:1.5px solid rgba(255,255,255,.18);
  box-shadow:0 16px 30px -16px rgba(33,80,48,.95);
  transition:transform .2s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease, border-color .25s ease}
.btn-midi:hover{transform:translateY(-2px); box-shadow:0 20px 34px -16px rgba(33,80,48,1); border-color:rgba(255,255,255,.34)}
.btn-midi:focus-visible{outline:2px solid #fff; outline-offset:3px}

.btn-midi .sablier{width:34px; height:34px; flex:none; display:grid; place-items:center}
.btn-midi .sablier svg{width:100%; height:100%}
.btn-midi .verre{transform-origin:19px 19px; transition:transform 1s cubic-bezier(.3,.8,.3,1)}
.btn-midi:hover .verre{transform:rotate(180deg)}

.btn-midi .lbl{display:flex; flex-direction:column; align-items:flex-start; line-height:1.18;
  font-weight:600; font-size:1rem}
.btn-midi .lbl small{font-size:.695rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  opacity:.74; margin-top:2px}

/* Reflet qui balaie le bouton au survol, comme sur le bouton principal. */
.btn-midi::before{content:""; position:absolute; top:0; left:-130%; width:55%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.26),transparent);
  transform:skewX(-18deg); transition:left .6s ease; pointer-events:none}
.btn-midi:hover::before{left:150%}

/* Sur fond vert, la version claire : le vert sur vert ne se verrait pas. */
.btn-midi--clair{background:#fff; color:#1e4526; border-color:rgba(33,80,48,.14);
  box-shadow:0 16px 30px -18px rgba(0,0,0,.6)}
.btn-midi--clair::before{background:linear-gradient(100deg,transparent,rgba(33,80,48,.12),transparent)}

@media(max-width:560px){
  .btn-midi{padding:10px 20px 10px 12px; gap:10px}
  .btn-midi .sablier{width:30px; height:30px}
  .btn-midi .lbl{font-size:.94rem}
}
@media(prefers-reduced-motion:reduce){
  .btn-midi,.btn-midi .verre{transition:none}
  .btn-midi:hover{transform:none}
  .btn-midi:hover .verre{transform:none}
  .btn-midi::before{display:none}
}