@font-face{font-family:'LLdisplay';src:url('fonts/brand2.woff2') format('woff2');font-weight:400 900;font-display:swap}
@font-face{font-family:'LLscript';src:url('fonts/brand1.woff2') format('woff2');font-weight:400 900;font-display:swap}
@font-face{font-family:'LLbody';src:url('fonts/hn.woff2') format('woff2');font-weight:300 500;font-display:swap}
:root{--cream:#EFCFA5;--red:#A23E2A;--mint:#9CDEA7;--ink:#2B2622;--cream-2:#f3d8b3}
*{box-sizing:border-box;margin:0;padding:0;min-width:0}
html{scroll-behavior:smooth}
body{background:var(--cream);color:var(--ink);font-family:'LLbody','Helvetica Neue',Arial,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1240px;margin:0 auto;padding:0 40px}
.disp{font-family:'LLdisplay',sans-serif}
.script{font-family:'LLscript',cursive}
.pagehead{text-align:center;padding:64px 20px 20px}
.pagehead h1{font-family:'LLscript',cursive;color:var(--red);font-size:clamp(40px,5vw,66px);line-height:1}
/* titres brush plus épais (font variable 400-900) */
.pagehead h1,.voyage h2,.musica h2,.contact h2,.menu-block h3,.bar-card h3{font-weight:900;-webkit-text-stroke:1.3px var(--red);paint-order:stroke fill}

/* NAV */
header.nav{position:sticky;top:0;z-index:100;background:var(--cream);display:flex;align-items:center;justify-content:flex-start;padding:12px 40px;gap:22px}
.nav .logo{margin-right:auto}
.nav .logo img{height:46px;width:auto}
.nav ul{list-style:none;display:flex;align-items:center;gap:26px}
.nav ul a{font-family:'LLbody',sans-serif;text-transform:uppercase;font-size:13px;font-weight:500;letter-spacing:.04em;color:var(--ink);padding:6px 0;transition:color .15s;white-space:nowrap}
.nav ul a:hover,.nav ul a.on{color:var(--red)}
/* police du corps = Helvetica Neue Light (fine) : on épaissit au contour */
.nav ul a,.nav .lang,.m-drawer a{-webkit-text-stroke:.6px currentColor}
.lead,.voyage p,.leadctr,.split p,.musica p,.musica .sub,.contact p,.subttl,
footer h4,.hrow,footer .addr,.pill,.menu-item .n,.menu-item .p,.bar-card p,
.photo-grid5 figcaption,.pagehead h1,.copy{-webkit-text-stroke:.34px currentColor}
.nav .lang{border:1px solid rgba(43,38,34,.35);border-radius:6px;padding:7px 12px;display:flex;align-items:center;gap:8px;font-size:13px;letter-spacing:.03em;white-space:nowrap}
/* Sélecteur langue desktop = rangée de boutons lisibles (on court-circuite le dropdown sombre du moteur via data-olo-dd) */
.olo-lang--desk{display:inline-flex;align-items:center;gap:2px;color:var(--ink);border:1px solid rgba(43,38,34,.3);border-radius:8px;padding:3px;background:var(--cream)}
.olo-lang--desk button{font-family:'LLbody',sans-serif;font-size:12px;font-weight:600;letter-spacing:.03em;color:var(--ink);background:none;border:0;cursor:pointer;padding:6px 9px;border-radius:6px;opacity:.55;transition:.15s;line-height:1}
.olo-lang--desk button:hover{opacity:1}
.olo-lang--desk button[aria-current="true"]{opacity:1;background:var(--red);color:#fff}
.olo-lang--mob{display:none}
@media(max-width:900px){
  .olo-lang--desk{display:none}
  .olo-lang--mob{display:flex;gap:16px;padding:22px 30px 0}
  .m-drawer .olo-lang--mob button{font-family:'LLbody',sans-serif;font-size:19px;font-weight:600;color:var(--red);background:none;border:0;cursor:pointer;opacity:.5;padding:4px 0}
  .m-drawer .olo-lang--mob button[aria-current="true"]{opacity:1;border-bottom:2px solid var(--red)}
}
.burger{display:none;flex-direction:column;gap:6px;background:none;border:0;cursor:pointer;padding:6px}
.burger span{display:block;width:30px;height:2.5px;background:var(--ink);border-radius:2px}
.nav li.has-sub{position:relative}
.nav .submenu{position:absolute;top:100%;left:0;background:var(--cream);border:1px solid rgba(43,38,34,.15);border-radius:10px;padding:8px 0;min-width:210px;list-style:none;display:none;box-shadow:0 14px 30px rgba(43,38,34,.2);z-index:120}
.nav li.has-sub:hover .submenu{display:block}
.nav .submenu a{display:block;padding:10px 18px;text-transform:uppercase;font-size:12.5px;letter-spacing:.03em;white-space:nowrap;color:var(--ink)}
.nav .submenu a:hover{color:var(--red);background:rgba(162,62,42,.07)}
.pill.pill-ghost{background:transparent;border:1.5px solid var(--red);color:var(--red)}
.m-drawer .submenu-m{list-style:none;padding-left:0}
.m-drawer .submenu-m a{font-size:18px;opacity:.85}

/* HERO */
.hero{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;min-height:560px}
.hero .ph{background:center/cover no-repeat;min-height:560px}
.hero .txt{padding:56px 60px 40px;display:flex;flex-direction:column;justify-content:center}
.hero h1{font-family:'LLdisplay',sans-serif;color:var(--red);font-size:clamp(34px,4vw,52px);line-height:1.02;letter-spacing:.01em}
.hero .lead{margin-top:26px;text-transform:uppercase;font-size:15px;line-height:1.55;letter-spacing:.03em;max-width:460px;font-weight:400}
.hero .lead + .lead{margin-top:22px}
.pills{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.pill{background:var(--mint);color:var(--ink);text-transform:uppercase;font-size:12.5px;font-weight:600;letter-spacing:.04em;padding:12px 20px;border-radius:999px;cursor:pointer;border:0;font-family:'LLbody',sans-serif;transition:transform .12s,filter .12s;display:inline-block}
.pill:hover{transform:translateY(-2px);filter:brightness(1.03)}
.hero-thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:34px;max-width:460px}
.hero-thumbs img{aspect-ratio:1/1;object-fit:cover;object-position:center 85%;border-radius:6px;width:100%;height:auto}

/* VOYAGE */
.voyage{display:grid;grid-template-columns:1fr 1fr}
.voyage .left{padding:60px 0;display:flex;flex-direction:column;justify-content:center}
.voyage .left .body{padding:0 clamp(60px,7vw,104px) 0 60px}
.voyage h2{font-family:'LLscript',cursive;color:var(--red);font-size:clamp(30px,3.4vw,42px);line-height:1;margin-bottom:22px}
.voyage p{text-transform:uppercase;font-size:13.5px;line-height:1.7;letter-spacing:.03em;margin-bottom:18px;max-width:520px}
.voyage .right{background:center/cover no-repeat;min-height:520px}

/* MUSICA */
.musica{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:40px;padding:90px 0}
.musica .body{padding-left:20px}
.musica h2{font-family:'LLscript',cursive;color:var(--red);font-size:clamp(40px,4.6vw,64px);line-height:1;margin-bottom:14px}
.musica .sub{text-transform:uppercase;font-size:14px;letter-spacing:.05em;margin-bottom:22px}
.musica p{text-transform:uppercase;font-size:13px;line-height:1.7;letter-spacing:.03em;margin-bottom:16px;max-width:480px}
.musica .ph{text-align:center}
.musica .ph img{margin:0 auto;max-height:340px;width:auto}

/* CONTACT bloc home */
.contact{text-align:center;padding:40px 0 110px}
.contact h2{font-family:'LLscript',cursive;color:var(--red);font-size:clamp(38px,4.4vw,58px);margin-bottom:20px}
.contact p{text-transform:uppercase;font-size:14px;letter-spacing:.05em;line-height:1.6}

/* GALLERY (bug corrigé : hauteur d'image fixe, plus de débordement) */
.gallery{display:grid;grid-template-columns:repeat(6,1fr)}
.gallery img{width:100%;height:170px;object-fit:cover;object-position:center 85%;display:block}

/* PAGE générique (menu/bar/photos/contact...) */
.section{padding:40px 0 70px}
.menu-cats{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:6px 0 40px}
.menu-block{max-width:760px;margin:0 auto 46px}
.menu-block h3{font-family:'LLscript',cursive;color:var(--red);font-size:32px;text-align:center;margin-bottom:22px}
.menu-item{display:flex;align-items:baseline;gap:12px;padding:11px 0;border-bottom:1px solid rgba(43,38,34,.15)}
.menu-item .n{text-transform:uppercase;font-size:14px;letter-spacing:.02em;font-weight:500}
.menu-item .d{flex:1;border-bottom:1px dotted rgba(43,38,34,.35);transform:translateY(-4px)}
.menu-item .p{text-transform:uppercase;font-size:14px;font-weight:600;white-space:nowrap;color:var(--red)}
.menu-item .desc{width:100%;text-transform:uppercase;font-size:11.5px;letter-spacing:.02em;color:#6b5c4d;margin-top:3px}
.photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.photo-grid img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:4px}
.bar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;max-width:1000px;margin:0 auto}
.bar-card{text-align:center}
.bar-card img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:10px;margin-bottom:14px}
.bar-card h3{font-family:'LLscript',cursive;color:var(--red);font-size:26px;margin-bottom:6px}
.bar-card p{text-transform:uppercase;font-size:12px;letter-spacing:.03em;line-height:1.6}
.formbox{max-width:620px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
.formbox input,.formbox textarea{border:1.5px solid rgba(43,38,34,.3);background:#fff8ee;border-radius:10px;padding:14px 16px;font-family:'LLbody',sans-serif;font-size:15px;color:var(--ink)}
.formbox textarea{min-height:140px;resize:vertical}
.formbox .pill{align-self:center;margin-top:6px;border:0;cursor:pointer}
.leadctr{text-align:center;max-width:720px;margin:0 auto 30px;text-transform:uppercase;font-size:14px;letter-spacing:.04em;line-height:1.7}

/* pages inner fidèles */
.fullphoto{width:100%;height:min(58vw,560px);background:center/cover no-repeat}
.pcta{text-align:center;margin-top:26px}
.split{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
.split .ph{background:center/cover no-repeat;min-height:440px}
.split .body{padding:54px 60px;display:flex;flex-direction:column;justify-content:center}
.split.rev .ph{order:2}
.split h2{font-family:'LLscript',cursive;color:var(--red);font-size:clamp(28px,3vw,40px);margin-bottom:20px;line-height:1}
.split p{text-transform:uppercase;font-size:12px;line-height:1.75;letter-spacing:.02em;margin-bottom:14px;max-width:560px}
.split .btn-red{background:var(--red);color:#fff;align-self:flex-start;border:0;border-radius:999px;padding:13px 26px;text-transform:uppercase;font-weight:600;font-size:12.5px;letter-spacing:.04em;cursor:pointer;font-family:'LLbody',sans-serif;margin-top:10px;text-decoration:none}
.bar-banner{width:100%;height:230px;background:center/cover no-repeat}
.subttl{font-family:'LLscript',cursive;color:var(--red);font-size:clamp(22px,2.4vw,30px);text-align:center;margin-bottom:16px}
/* Galerie photos : masonry (images entières, jamais recadrées) */
.photo-grid5{column-count:4;column-gap:14px;padding:20px 0}
.photo-grid5 figure{margin:0 0 18px;break-inside:avoid;-webkit-column-break-inside:avoid}
.photo-grid5 img{width:100%;height:auto;border-radius:4px}
.photo-grid5 figcaption{text-align:center;color:var(--red);text-transform:uppercase;font-size:12px;font-weight:600;letter-spacing:.03em;margin-top:9px}
.mday{text-align:center;font-family:'LLscript',cursive;color:var(--red);font-size:clamp(26px,3vw,36px);margin:46px 0 18px;line-height:1.25}
.spotify-embed{max-width:560px;margin:0 auto}
.spotify-embed iframe{width:100%;border:0;border-radius:12px}
@media(max-width:900px){
  .split{grid-template-columns:1fr}
  .split .ph{min-height:340px}
  .split.rev .ph{order:0}
  .split .body{padding:34px 22px}
  .photo-grid5{column-count:2}
  .fullphoto{height:300px}
}
/* FOOTER */
footer{background:var(--cream);padding:52px 0 0}
.foot-grid{display:grid;grid-template-columns:1.1fr 1.3fr .7fr 1fr;gap:34px}
footer h4{text-transform:uppercase;color:var(--red);font-size:13px;letter-spacing:.08em;margin-bottom:16px;font-weight:600}
.hrow{display:flex;justify-content:space-between;gap:16px;text-transform:uppercase;font-size:12px;letter-spacing:.02em;line-height:1.9}
.hrow b{font-weight:500}
.socials{display:flex;gap:14px}
.socials a{width:38px;height:38px;border-radius:50%;background:var(--ink);display:flex;align-items:center;justify-content:center}
.socials img{width:19px;height:19px;object-fit:contain;filter:invert(1) brightness(2)}
footer .addr{text-transform:uppercase;font-size:12px;letter-spacing:.02em;line-height:2}
footer .addr a{border-bottom:1px solid var(--ink)}
.copy{margin-top:44px;background:#1c1a17;color:#e7e2d8;font-size:11.5px;letter-spacing:.04em;text-transform:uppercase}
.copy .wrap{display:flex;justify-content:space-between;align-items:center;padding-top:16px;padding-bottom:16px;flex-wrap:wrap;gap:10px}
.copy a:hover{color:var(--mint)}

/* Réserver FAB */
.resa-fab{position:fixed;right:22px;bottom:22px;z-index:200;background:var(--red);color:#fff;border:0;border-radius:999px;padding:15px 26px;font-family:'LLbody',sans-serif;text-transform:uppercase;font-weight:600;letter-spacing:.05em;font-size:14px;cursor:pointer;box-shadow:0 12px 30px rgba(162,62,42,.4)}
.resa-fab:hover{filter:brightness(1.06)}
.legaltext{text-transform:none!important;text-align:left!important;font-size:13.5px;line-height:1.85}
.legaltext p{margin-bottom:14px}
.cookie-banner{position:fixed;left:0;right:0;bottom:0;z-index:2147483646;background:var(--cream);border-top:1px solid rgba(43,38,34,.18);display:none;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:16px 24px calc(16px + env(safe-area-inset-bottom));font-size:13px}
.cookie-banner.show{display:flex}
.cookie-banner span{max-width:820px;color:var(--ink)}
.cookie-banner a{border-bottom:1px solid;color:var(--ink)}
.cookie-banner .cb-actions{display:flex;gap:12px;align-items:center;justify-content:center}
.cb-set{background:#fff;border:1px solid var(--ink);border-radius:6px;padding:9px 16px;cursor:pointer;font-family:inherit;font-size:13px}
.cb-ok{background:var(--ink);color:#fff;border:0;border-radius:6px;padding:9px 22px;cursor:pointer;font-family:inherit;font-size:13px}
.cb-x{background:none;border:0;font-size:22px;cursor:pointer;line-height:1;color:var(--ink)}
.nl-ov{position:fixed;inset:0;background:rgba(20,15,10,.55);z-index:310;display:none;align-items:center;justify-content:center;padding:20px}
.nl-ov.show{display:flex}
.nl-box{background:var(--cream);border-radius:6px;max-width:440px;width:100%;padding:38px 34px;position:relative}
.nl-x{position:absolute;top:12px;right:18px;background:none;border:0;font-size:26px;cursor:pointer;color:var(--ink)}
.nl-box h3{font-family:'LLscript',cursive;font-size:27px;color:var(--red);margin-bottom:24px;line-height:1.1;-webkit-text-stroke:1px var(--red)}
.nl-box label{display:block;text-transform:uppercase;font-size:12px;letter-spacing:.04em;margin-bottom:8px;font-weight:600}
.nl-box input[type=email]{width:100%;border:1px solid var(--ink);background:#fff;border-radius:4px;padding:12px 14px;font-family:inherit;font-size:15px;margin-bottom:18px}
.nl-check{display:flex!important;gap:10px;align-items:flex-start;text-transform:uppercase;font-size:11px;line-height:1.4;margin-bottom:20px;font-weight:400}
.nl-check input{margin-top:2px;width:auto}
.nl-send{background:var(--red);color:#fff;border:0;border-radius:4px;padding:13px;width:100%;text-transform:uppercase;font-weight:600;letter-spacing:.04em;cursor:pointer;font-family:'LLbody',sans-serif}
/* Mobile : on remonte la bannière AU-DESSUS du bouton flottant Zenchef (sinon « Accepter » est caché derrière) */
@media(max-width:900px){.cookie-banner{bottom:calc(96px + env(safe-area-inset-bottom));font-size:12px;padding:14px 16px}.cookie-banner .cb-actions{width:100%;justify-content:center;flex-wrap:wrap;gap:10px}.cb-set,.cb-ok{flex:1 1 auto;min-width:130px;padding:12px}}

/* MOBILE */
.m-drawer{display:none}
@media(max-width:900px){
  .wrap{padding:0 22px}
  header.nav{padding:12px 20px}
  .nav ul,.nav .lang{display:none}
  .burger{display:flex}
  .hero{grid-template-columns:1fr}
  .hero .ph,.hero .txt{min-height:0}
  /* Photo en portrait, assiette dans le bas du cadre : sur une bande de
     320 px le recadrage centre ne montrait que la vegetation et coupait
     le plat. On descend le point de recadrage sur l'assiette. */
  .hero .ph{height:320px}
  .hero .txt{padding:34px 22px}
  .hero .lead,.hero-thumbs{max-width:none}
  .voyage{grid-template-columns:1fr}
  .voyage .left{padding:44px 0}
  .voyage .left .body{padding:0 22px}
  .voyage .right{min-height:300px}
  .musica{grid-template-columns:1fr;gap:24px;padding:56px 0}
  .musica .body{padding-left:0}
  .gallery{grid-template-columns:repeat(3,1fr)}
  .gallery img{height:130px}
  .photo-grid{grid-template-columns:repeat(2,1fr)}
  .bar-grid{grid-template-columns:1fr;gap:20px;max-width:420px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:26px}
  .copy .wrap{flex-direction:column;text-align:center}
  .m-drawer.open{display:block;position:fixed;inset:0;z-index:150;background:var(--cream);overflow:auto}
  .m-drawer .x{position:absolute;top:20px;right:24px;font-size:34px;background:none;border:0;cursor:pointer;color:var(--ink)}
  .m-drawer>ul{list-style:none;display:flex;flex-direction:column;gap:6px;padding:90px 30px 30px}
  .m-drawer a{font-family:'LLdisplay',sans-serif;text-transform:uppercase;font-size:26px;color:var(--red);padding:8px 0}
  .m-drawer .m-menu-toggle{font-family:'LLdisplay',sans-serif;text-transform:uppercase;font-size:26px;color:var(--red);padding:8px 0;background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:10px}
  .m-drawer .m-menu-toggle i{font-style:normal;font-size:16px;transition:transform .2s;line-height:1}
  .m-drawer .m-has-sub.open .m-menu-toggle i{transform:rotate(180deg)}
  .m-drawer .m-submenu{list-style:none;max-height:0;overflow:hidden;transition:max-height .28s ease;padding-left:14px}
  .m-drawer .m-has-sub.open .m-submenu{max-height:340px}
  .m-drawer .m-submenu a{font-size:19px;opacity:.82}
}
@media(max-width:520px){
  .gallery{grid-template-columns:repeat(2,1fr)}
  .photo-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
}

/* --- Recette : place réservée au bouton flottant Zenchef -----------------
   Le bouton « Réserver une table » est en position fixe en bas à droite.
   Sur mobile il recouvrait la fin de page — sur l'accueil, les boutons
   « Carte du midi » / « Carte La Latina » passaient dessous et devenaient
   incliquables. On réserve la hauteur correspondante en bas du document. */
@media (max-width: 760px) {
  body { padding-bottom: 96px; }
}

/* --- Formulaires Typeform du client (carrières, événements privés) ---------
   Le restaurant traite déjà ses candidatures et ses demandes d'événements
   dans son compte Typeform : on intègre SES formulaires plutôt que d'en
   ouvrir un second circuit. Cadre simple, sans le SDK Typeform : pas de
   script tiers, pas de mouchard, et la hauteur suit l'écran. */
.tf-sec{padding:clamp(48px,7vw,88px) 0;background:var(--cream)}
.tf-sec .wrap{max-width:1000px}
.tf-head{text-align:center;margin-bottom:clamp(22px,3vw,34px)}
.tf-head h2{margin-bottom:10px}
.tf-head p{max-width:62ch;margin:0 auto;color:var(--ink);opacity:.82}
.tf-frame{position:relative;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 24px 60px -34px rgba(43,38,34,.55)}
.tf-frame iframe{display:block;width:100%;height:clamp(560px,78vh,760px);border:0}
.tf-fallback{text-align:center;margin-top:16px;font-size:14px;opacity:.8}
.tf-fallback a{color:var(--red);text-decoration:underline}
@media(max-width:640px){.tf-frame{border-radius:10px}.tf-frame iframe{height:76vh;min-height:520px}}

/* --- Menu mobile : Zenchef et la croix de fermeture ------------------------
   Zenchef pose son widget en z-index 2147483647, le maximum absolu, sur une
   iframe qui couvre tout l'ecran. Menu ouvert, son bouton « Reserver une
   table » venait se coller sous le choix de la langue et le masquait sur les
   ecrans courts. On l'efface tant que le menu est ouvert ; il revient seul. */
body:has(.m-drawer.open) iframe[class*="ZC_sdk"]{display:none!important}

/* La croix de fermeture etait un glyphe nu de 20 px, brun sur creme, sans
   cadre : elle existait mais personne ne la voyait. */
@media(max-width:900px){
  .m-drawer .x{top:14px;right:16px;width:44px;height:44px;padding:0;font-size:26px;line-height:1;
    display:flex;align-items:center;justify-content:center;border-radius:50%;
    background:var(--red);color:#fff;box-shadow:0 8px 20px -10px rgba(43,38,34,.7);
    transition:background .2s ease,transform .2s ease}
  .m-drawer .x:hover,.m-drawer .x:focus-visible{background:var(--ink);transform:scale(1.05)}
}

/* --- Boutons de menu sur telephone ----------------------------------------
   En flex + wrap, les quatre libelles n'ont pas la meme longueur : ils se
   rangeaient en escalier, avec un orphelin sur la derniere ligne. Sur
   telephone on passe en grille de deux colonnes egales, texte centre. */
@media(max-width:640px){
  .pills{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}
  .pill{display:flex;align-items:center;justify-content:center;text-align:center;
    padding:14px 12px;font-size:12px;line-height:1.25;min-height:52px;border-radius:14px}
}
@media(max-width:360px){
  .pills{grid-template-columns:1fr}
}

/* --- Menu ouvert : le fond ne defile plus ---------------------------------
   Le tiroir se contentait de s'afficher : la page continuait de defiler
   derriere lui, et on se retrouvait ailleurs en refermant. Verrouillage en
   CSS pur — overflow:hidden, sans position:fixed. La position du document
   n'est jamais deplacee, donc rien ne peut sauter a la fermeture. */
body:has(.m-drawer.open){overflow:hidden}

/* ═══════════════════════════════════════════════════════════════════
   HERO DESKTOP : LA PHOTO EN GRAND, L'INTRODUCTION EN DESSOUS
   Le hero etait coupe en deux moities de 720 px, photo a gauche et texte
   a droite. La photo passe en pleine largeur.

   Premier essai : tout le contenu POSE SUR la photo. Titre lisible, mais
   les deux paragraphes tombaient sur les assiettes et devenaient
   illisibles — assombrir encore le voile aurait eteint la photo, qui est
   justement ce qu'on veut montrer. La structure regle mieux le probleme
   qu'un degrade : seul le TITRE reste sur la photo, l'introduction, les
   boutons et les vignettes descendent sur le fond creme.

   LE MOBILE N'EST PAS TOUCHE : il empile deja photo puis texte, et c'est
   ce que le client trouve bon. Tout est enferme dans min-width:901px,
   au-dessus de la bascule existante a 900px.
   ═══════════════════════════════════════════════════════════════════ */
@media(min-width:901px){
  .hero{display:block;grid-template-columns:none;position:relative;
    min-height:0;padding-top:min(62svh,540px);background:var(--cream);overflow:hidden}
  .hero .ph{position:absolute;top:0;left:0;right:0;height:min(62svh,540px);
    width:100%;min-height:0;background-position:center 62%}
  /* Le voile ne couvre QUE la photo : il assoit le titre sans toucher au
     bloc creme qui suit. */
  .hero::after{content:"";position:absolute;top:0;left:0;right:0;
    height:min(62svh,540px);z-index:1;pointer-events:none;
    background:linear-gradient(180deg,rgba(20,12,8,.30) 0%,rgba(20,12,8,.14) 45%,rgba(20,12,8,.62) 100%)}
  /* Le titre est sorti du flux pour se poser sur la photo ; le reste du
     bloc .txt reprend sa place normale, en dessous. */
  .hero h1{position:absolute;left:0;right:0;top:min(31svh,270px);z-index:2;
    transform:translateY(-50%);text-align:center;margin:0;padding:0 32px;
    color:var(--cream);-webkit-text-stroke:0;
    text-shadow:0 8px 34px rgba(0,0,0,.62),0 2px 8px rgba(0,0,0,.45);
    font-size:clamp(48px,5.6vw,78px)}
  /* STATIQUE, et non relative : un .txt positionne devient le referent du
     titre absolu, qui se calait alors sur le bloc texte et tombait SOUS la
     photo. Le voile ne couvrant que la bande photo, .txt n'a de toute
     facon rien a passer devant. */
  .hero .txt{position:static;width:100%;max-width:940px;
    margin:0 auto;padding:46px 40px 54px;text-align:center;align-items:center;
    justify-content:flex-start;min-height:0}
  .hero .lead{max-width:680px;margin-left:auto;margin-right:auto}
  .hero .lead:first-of-type{margin-top:0}
  .hero .pills{justify-content:center}
  .hero-thumbs{max-width:560px;margin-left:auto;margin-right:auto;margin-top:32px}
  .hero-thumbs img{border-radius:8px}
}

/* ═══ CARRIERES : LE FORMULAIRE REMONTE (DESKTOP) ═══
   Sur un ecran de 900 px de haut, le formulaire de candidature commencait
   a 629 px : on n'en voyait qu'un tiers sans defiler, alors que c'est la
   seule action de la page. Trois espacements se cumulaient au-dessus —
   l'en-tete de page, la section d'introduction, puis le bloc du
   formulaire. On les resserre, sans rien supprimer.
   Mobile inchange : la contrainte y est differente, et l'empilement
   actuel convient. */
@media(min-width:901px){
  body.page-carrieres .pagehead{padding-top:40px;padding-bottom:12px}
  body.page-carrieres .section{padding:20px 0 26px}
  body.page-carrieres .tf-sec{padding:clamp(24px,2.6vw,40px) 0 clamp(40px,5vw,68px)}
  body.page-carrieres .leadctr{margin-bottom:18px}
}