/* =========================================================
   LA PARISIENNE — feuille de style
   Palette : noir pur, blanc, gris — accents dorés sur les titres de sections.
   ========================================================= */

/* =========================================================
   POLICES — hébergées sur le site (pas de Google Fonts : aucune adresse IP
   de visiteur n'est transmise à Google). Licence SIL Open Font License.
   ========================================================= */
@font-face{
  font-family:"Inter"; font-style:normal; font-weight:200 700; font-display:swap;
  src:url("assets/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"Inter"; font-style:normal; font-weight:200 700; font-display:swap;
  src:url("assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Kaushan Script"; font-style:normal; font-weight:400; font-display:swap;
  src:url("assets/fonts/kaushan-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"Kaushan Script"; font-style:normal; font-weight:400; font-display:swap;
  src:url("assets/fonts/kaushan-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  /* Palette monochrome. Les noms --rouge / --or sont conservés pour que le
     retour à la version couleur ne demande que de remplacer ce bloc. */
  --noir:        #000000;
  --noir-2:      #060606;
  --noir-3:      #0E0E0E;
  --rouge:       #000000;   /* accent = noir pur */
  --rouge-clair: #262626;
  --rouge-glow:  #444444;
  --or:          #E8C066;   /* doré : surtitres, filets, titres sur fond noir */
  --or-clair:    #F6DE9C;
  --or-fonce:    #B08A2E;
  --jaune:       #9A9A9A;
  --creme:       #F5F5F5;
  --blanc:       #FFFFFF;

  --txt:         #000000;
  --txt-2:       #5A5A5A;
  --txt-inv:     #FFFFFF;
  --txt-inv-2:   #B4B4B4;

  --bord:        rgba(0,0,0,.14);
  --bord-inv:    rgba(255,255,255,.15);

  --r-sm: 10px;
  --r:    16px;
  --r-lg: 22px;
  --r-pill: 999px;

  --wrap: 1360px;
  --pad-x: clamp(20px, 5vw, 72px);
  --sec-y: clamp(56px, 7vw, 104px);

  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:96px; }

body{
  margin:0;
  background:var(--blanc);
  color:var(--txt);
  font-family:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  overflow-x:hidden;   /* repli */
  overflow-x:clip;     /* ne casse pas position:sticky, contrairement à hidden */
  -webkit-tap-highlight-color:rgba(0,0,0,.08);
}

/* titres équilibrés : pas de mot orphelin sur la dernière ligne, quelle que
   soit la largeur d'écran */
h1, h2, h3, .hero-sub, .quote, .head-lead{ text-wrap:balance; }
p, li{ text-wrap:pretty; }

/* menu mobile ouvert : la page derrière ne défile plus */
html.menu-open{ overflow:hidden; }

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; }

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--pad-x);
}

/* =========================================================
   MARQUE / LOGO
   ========================================================= */
.brand{ display:flex; align-items:center; gap:10px; min-width:0; }
.brand-img{
  height:62px; width:auto; margin:-6px 0;
}
/* le logo porte déjà le nom : le texte à côté ne sert que de secours
   si l'image ne charge pas */
.brand-mark{ display:none; flex-direction:column; line-height:1; }
.brand.no-logo .brand-mark{ display:flex; }
.brand.no-logo .brand-img{ display:none; }

.brand-script{
  font-family:"Kaushan Script", cursive;
  font-size:26px;
  letter-spacing:.5px;
  color:#000;
  padding-right:4px;
}
.brand-sub{
  margin-top:5px;
  font-size:8.5px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:#6E6E6E;
  white-space:nowrap;
}
.header .brand-script{ font-size:24px; }

/* =========================================================
   HEADER
   ========================================================= */
.header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  background:rgba(244,244,244,.88);
  backdrop-filter:saturate(140%) blur(16px);
  -webkit-backdrop-filter:saturate(140%) blur(16px);
  border-bottom:1px solid rgba(0,0,0,.09);
  box-shadow:0 1px 20px rgba(0,0,0,.05);
  transition:background .35s var(--ease), border-color .35s var(--ease);
}
.header.scrolled{ background:rgba(248,248,248,.96); border-bottom-color:rgba(0,0,0,.14); }

.header-inner{
  max-width:1680px; margin-inline:auto;
  padding:10px var(--pad-x);
  /* iPhone en paysage : le logo et le burger évitent l'encoche */
  padding-left:max(var(--pad-x), env(safe-area-inset-left));
  padding-right:max(var(--pad-x), env(safe-area-inset-right));
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}

.nav{ display:flex; align-items:center; gap:30px; }
.nav > a{
  font-size:15px; color:#1F1F1F;
  position:relative; padding:6px 0;
  flex:none; white-space:nowrap;
  transition:color .25s var(--ease);
}
.nav > a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:#000; transition:right .35s var(--ease);
}
.nav > a:hover{ color:#000; }
@media (hover:hover){ .nav > a:hover::after{ right:0; } }
/* le CTA est un bouton : il reprend le padding et le blanc pur de .btn,
   que la spécificité de `.nav > a` écraserait sinon */
.nav > a.nav-cta{ padding:10px 22px; font-size:13.5px; color:var(--blanc); }
.nav > a.nav-cta::after{ display:none; }

.header-right{ display:flex; align-items:center; gap:14px; }

.lang{ display:flex; gap:7px; }
.lang-mobile{ display:none; }   /* visible uniquement dans le menu mobile */
.lang-btn{
  width:40px; height:40px; border-radius:var(--r-pill);
  border:1px solid rgba(0,0,0,.22);
  background:transparent; color:#4A4A4A;
  font-size:12.5px; letter-spacing:.06em; cursor:pointer;
  transition:all .25s var(--ease);
}
.lang-btn:hover{ color:#000; border-color:#000; }
.lang-btn.is-active{
  background:#000; border-color:#000;
  color:var(--blanc); font-weight:500;
}

.burger{
  display:none; width:44px; height:44px; border-radius:var(--r-pill);
  border:1px solid rgba(0,0,0,.22); background:transparent;
  cursor:pointer; padding:0;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.burger span{ width:18px; height:1.5px; background:#000; transition:transform .3s var(--ease), opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

/* =========================================================
   BOUTONS
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 28px; border-radius:var(--r-pill);
  font-size:15px; font-weight:500; letter-spacing:.01em;
  border:1px solid transparent; cursor:pointer;
  transition:transform .25s var(--ease), box-shadow .3s var(--ease), background .25s var(--ease), color .25s var(--ease);
}
/* l'élévation au survol n'existe qu'avec une souris : au doigt, elle resterait
   « collée » après le tap */
@media (hover:hover){ .btn:hover{ transform:translateY(-2px); } }
.btn:active{ transform:scale(.97); }
.btn:focus-visible, .lang-btn:focus-visible, .burger:focus-visible,
.nav > a:focus-visible, .footer-nav a:focus-visible, .socials a:focus-visible,
.sticky-cta:focus-visible, a.cbox-v:focus-visible{
  outline:2px solid var(--or); outline-offset:3px;
}

.btn-dark{ background:var(--rouge); color:var(--blanc); padding:13px 30px; white-space:nowrap; flex:none; }
.btn-dark:hover{ background:var(--rouge-clair); box-shadow:0 8px 26px rgba(0,0,0,.28); }

.btn-red{
  background:var(--rouge); color:var(--blanc);
  box-shadow:0 6px 24px rgba(0,0,0,.22);
}
.btn-red:hover{ background:var(--rouge-clair); box-shadow:0 12px 34px rgba(0,0,0,.3); }

.btn-ghost{
  background:rgba(255,255,255,.55); color:var(--txt);
  border-color:rgba(20,16,15,.28);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.btn-ghost:hover{ border-color:#000; color:#000; background:rgba(255,255,255,.85); }

.btn-block{ width:100%; padding:16px 28px; }

/* bouton flottant : mobile uniquement (voir la media query en bas de fichier) */
.sticky-cta{ display:none; }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative; isolation:isolate;
  min-height:100svh;
  /* Le néon du truck est à ~44 % de la hauteur de la photo. La photo (2,4:1)
     est calée sur la hauteur de l'écran : le truck grandit avec la hauteur, pas
     avec la largeur, et laisse toujours la place au titre. Seuls les écrans plus
     larges que 2,4:1 rognent le haut de la photo : le hero garde alors une
     hauteur plancher proportionnelle à la largeur. */
  min-height:max(100svh, 42vw, 560px);
  display:grid; grid-template-rows:auto 1fr auto; align-content:stretch;
  padding:clamp(96px,15vh,180px) var(--pad-x) clamp(46px,7vh,80px);
  text-align:center;
  background:#C5C4C8; color:var(--txt);
  overflow:hidden;
}

/* La photo studio du food truck, en fond plein cadre.
   truck-hero.jpg = la photo v3 avec le décor prolongé (17% en haut, 8% sur les
   côtés) : ratio 16:9, truck sur ~31% de la largeur, néon à ~44% de la
   hauteur — le titre a donc sa place au-dessus. */
.hero-bg{
  position:absolute; inset:0; z-index:-2;
  /* truck-hero-wide.jpg = truck-hero.jpg avec le décor studio prolongé sur les
     côtés (2646×1102) : sur une fenêtre large, la photo reste calée sur la
     hauteur au lieu d'être agrandie à la largeur (ce qui faisait remonter le
     néon dans le titre) */
  background:#C5C4C8 url("assets/truck-hero-wide.jpg") center bottom / cover no-repeat;
  /* zoom ancré en bas : remonte le truck dans le cadre (et l'agrandit un peu)
     tout en garantissant que l'image couvre toujours toute la largeur */
  transform:scale(1.06);
  transform-origin:50% 100%;
}
/* fenêtre basse : pas de zoom, le néon reste plus bas et laisse la place au titre */
@media (max-height:760px){ .hero-bg{ transform:none; } }

/* Voile : éclaircit le haut pour le titre, fond au noir vers la section suivante */
.hero-scrim{
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(95% 45% at 50% 2%, rgba(255,255,255,.80), rgba(255,255,255,.30) 52%, rgba(255,255,255,0) 74%),
    linear-gradient(180deg, rgba(255,255,255,0) 80%, rgba(10,6,7,.5) 93%, var(--noir) 100%);
}

.hero-inner{ position:relative; display:contents; }
.hero-title{
  margin:0;
  /* suit la largeur ET la hauteur : sur une fenêtre basse, le titre rétrécit
     au lieu de descendre sur le truck */
  font-size:clamp(29px, min(5.2vw, 7.2svh), 70px);
  line-height:1.06;
  font-weight:200;
  letter-spacing:.055em;
  text-transform:uppercase;
  color:#000;
}
.hero-title span{ display:block; }
.hero-title span:last-child{
  color:#6B6B6B;
}
.hero-sub{
  margin:22px auto 0; max-width:780px;
  font-size:clamp(14px,1.5vw,18px); color:#3A3A3A;
}

.hero-foot{ position:relative; align-self:end; grid-row:3; }
.hero-tags{
  margin:0 0 22px; font-size:15px; color:#2E2E2E; letter-spacing:.02em;
  text-shadow:0 1px 14px rgba(255,255,255,.6);
}
.hero-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* =========================================================
   SECTIONS
   ========================================================= */
.section{ padding-block:var(--sec-y); position:relative; }
.section-light{ background:var(--blanc); color:var(--txt); }
.section-dark{ background:var(--noir); color:var(--txt-inv); }
.section-dark + .section-dark{ padding-top:0; }
/* deux sections blanches à la suite (Signature, Expérience, Pourquoi nous) :
   un filet fin à la largeur du contenu les sépare, l'espace est resserré */
.section-light + .section-light{ padding-top:calc(var(--sec-y) * .8); }
.section-light + .section-light::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:calc(min(var(--wrap), 100%) - var(--pad-x) * 2); height:1px;
  background:var(--bord);
}

.head{ max-width:1080px; margin-bottom:clamp(28px,3.6vw,48px); padding-left:26px; border-left:1px solid var(--or); }
.section-light .head{ border-left-color:var(--or-fonce); }
.eyebrow{
  margin:0 0 14px; font-size:12px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--or);
}
.section-light .eyebrow{ color:var(--or-fonce); }
.head h2{
  margin:0; font-weight:250;
  font-size:clamp(30px,4.4vw,58px); line-height:1.12; letter-spacing:-.01em;
}
.head-lead{
  margin:20px 0 0; max-width:780px; font-size:clamp(15px,1.5vw,18px);
  color:var(--txt-inv-2);
}
.section-light .head-lead{ color:var(--txt-2); }

/* =========================================================
   GRILLES & CARTES
   ========================================================= */
.grid{ display:grid; gap:clamp(16px,1.7vw,26px); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }

.card{ border-radius:var(--r); transition:transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease); }
.card h3{ margin:0 0 12px; font-size:19px; font-weight:600; letter-spacing:-.005em; }
.card p{ margin:0; font-size:15.5px; line-height:1.65; }

.card-dark{
  padding:26px 26px 30px;
  background:linear-gradient(180deg, var(--noir-3), var(--noir-2));
  border:1px solid var(--bord-inv);
  position:relative; overflow:hidden;
}
.card-dark::before{
  content:""; position:absolute; inset:0 auto auto 0; width:100%; height:2px;
  background:linear-gradient(90deg, var(--or), rgba(232,192,102,.25));
  transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease);
}
@media (hover:hover){
  .card-dark:hover::before{ transform:scaleX(1); }
  .card-dark:hover{ transform:translateY(-4px); border-color:rgba(232,192,102,.45); }
}
.card-dark p{ color:var(--txt-inv-2); }

.card-photo{
  background:var(--blanc); border:1px solid var(--bord);
  padding:14px 14px 26px;
}
.card-photo .media{ margin-bottom:20px; }
.card-photo h3, .card-photo p{ padding-inline:10px; }
.card-photo p{ color:var(--txt-2); }
@media (hover:hover){
  .card-photo:hover{ transform:translateY(-4px); box-shadow:0 18px 44px rgba(0,0,0,.10); border-color:rgba(0,0,0,.34); }
}

.card-outline{
  background:var(--blanc); border:1px solid var(--bord);
  padding:26px 26px 30px;
}
.card-outline .card-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.card-outline p{ color:var(--txt-2); }
@media (hover:hover){
  .card-outline:hover{ transform:translateY(-4px); border-color:#000; box-shadow:0 18px 40px rgba(0,0,0,.12); }
}
.ico{ width:26px; height:26px; flex:none; fill:none; stroke:var(--rouge); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }

/* =========================================================
   MEDIA / PLACEHOLDERS
   ========================================================= */
.media{
  margin:0; border-radius:var(--r); overflow:hidden;
  background:var(--noir-2); position:relative;
}
.media img{ width:100%; height:100%; object-fit:cover; }
.ratio-45{ aspect-ratio:4/5; }
.ratio-43{ aspect-ratio:4/3; }
.ratio-34{ aspect-ratio:3/4; }
.media video{ width:100%; height:100%; object-fit:cover; display:block; }

/* Placeholder « chevron » repris du food truck, affiché tant que l'image manque */
.media.is-placeholder{
  background-color:#131011;
  background-image:repeating-linear-gradient(135deg,
    rgba(255,255,255,.10) 0 20px, rgba(255,255,255,0) 20px 40px);
  display:grid; place-items:center;
}
.media.is-placeholder::after{
  content:attr(data-label);
  font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.72); background:rgba(10,6,7,.6);
  border:1px solid rgba(255,255,255,.28);
  padding:9px 16px; border-radius:var(--r-pill);
  text-align:center; max-width:88%;
}
.section-light .media.is-placeholder{ background-color:#171314; }

/* =========================================================
   SIGNATURE (split)
   ========================================================= */
.split{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(30px,5vw,80px); align-items:center;
}
.split-text .lead{ margin:0 0 28px; font-size:clamp(16px,1.7vw,20px); color:var(--txt); }
.ticks{ list-style:none; margin:0; padding:0; }
.ticks li{
  position:relative; padding-left:30px; margin-bottom:14px;
  color:var(--txt-2); font-size:16px;
}
.ticks li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:12px; height:12px; border-radius:50%;
  background:linear-gradient(135deg, var(--or-fonce), var(--or));
  box-shadow:0 0 0 3px rgba(176,138,46,.16);
}
.split-media{ box-shadow:0 30px 70px rgba(0,0,0,.16); }

/* =========================================================
   EXPÉRIENCE — la carte du food truck
   Photo du menu à gauche, carte retranscrite à droite (en deux colonnes sur
   grand écran). Pas de prix : sur devis pour les événements.
   ========================================================= */
.carte{
  display:grid; grid-template-columns:clamp(260px, 28vw, 420px) minmax(0, 1fr);
  gap:clamp(30px, 5vw, 80px); align-items:start;
}
.carte-photo{
  aspect-ratio:4/5; box-shadow:0 20px 50px rgba(0,0,0,.14);
  position:sticky; top:110px;
}
.carte-menu{ columns:2 260px; column-gap:clamp(28px, 4vw, 56px); }
.carte-group{ break-inside:avoid; margin-bottom:clamp(26px, 3vw, 38px); }
.carte-group:last-child{ margin-bottom:0; }
.carte-cat{
  margin:0 0 14px; padding-bottom:10px;
  font-size:12.5px; font-weight:500; letter-spacing:.24em; text-transform:uppercase;
  color:var(--or-fonce); border-bottom:1px solid var(--bord);
}
.carte-list{ list-style:none; margin:0; padding:0; }
.carte-item{ padding:9px 0; }
.carte-item + .carte-item{ border-top:1px dashed rgba(0,0,0,.1); }
.carte-name{ display:flex; align-items:center; flex-wrap:wrap; gap:4px 10px; font-size:17px; font-weight:600; letter-spacing:-.005em; line-height:1.35; }
.carte-desc{ display:block; margin-top:3px; font-size:15px; line-height:1.55; color:var(--txt-2); }
.carte-badge{
  font-size:10.5px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:#000; background:linear-gradient(135deg, var(--or), var(--or-clair));
  padding:3px 9px; border-radius:var(--r-pill);
}
.carte-item.is-signature .carte-name > span:first-child{ color:#000; }
.carte-note{ margin:8px 0 0; font-size:14px; font-style:italic; color:var(--txt-2); }

/* =========================================================
   GALERIE ÉVÉNEMENTS
   ========================================================= */
.section-events{ overflow:hidden; }
/* le titre « À travers le temps » est aligné sur le bord gauche de la galerie
   (qui défile en pleine largeur) plutôt que sur la colonne centrale */
.section-events > .wrap{ max-width:none; }
.gallery{
  display:flex; gap:clamp(14px,1.6vw,24px);
  padding-inline:var(--pad-x); padding-bottom:14px;
  padding-left:max(var(--pad-x), env(safe-area-inset-left));
  scroll-padding-inline:var(--pad-x);
  overflow-x:auto; scroll-snap-type:x mandatory;
  cursor:grab; scrollbar-width:none;
}
.gallery::-webkit-scrollbar{ display:none; }
.gallery.dragging{ cursor:grabbing; scroll-snap-type:none; }
/* photos & vidéo au format portrait (prises au téléphone) : bande de vignettes
   verticales qui défile horizontalement */
.gitem{
  flex:0 0 clamp(240px, 24vw, 380px);
  scroll-snap-align:start;   /* au défilement, l'image se cale sur l'alignement du titre */
  border:1px solid var(--bord-inv);
}
.gvideo-btn{
  position:absolute; right:14px; bottom:14px; z-index:2;
  width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center; padding:0; cursor:pointer;
  background:rgba(0,0,0,.55); color:var(--blanc);
  border:1px solid rgba(255,255,255,.3);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.gvideo-btn svg{ width:18px; height:18px; fill:currentColor; }
.gvideo-btn[data-state="playing"] .i-play,
.gvideo-btn[data-state="paused"] .i-pause{ display:none; }
@media (hover:hover){ .gvideo-btn:hover{ background:#000; border-color:var(--or); } }
.gvideo-btn:active{ transform:scale(.92); }
.gvideo-btn:focus-visible{ outline:2px solid var(--or); outline-offset:3px; }
.quote{
  margin:clamp(26px,3.6vw,44px) auto 0; max-width:900px; text-align:center;
  font-size:clamp(16px,2vw,22px); font-weight:300; color:var(--blanc);
}
.quote::before, .quote::after{ color:var(--or); }
.quote::before{ content:"« "; }
.quote::after{ content:" »"; }

/* =========================================================
   CONTACT
   ========================================================= */
.section-contact{
  background:
    radial-gradient(70% 60% at 15% 0%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(180deg, var(--noir-2), var(--noir));
  color:var(--txt-inv);
}
.section-contact .head{ border-left-color:var(--or); }
.contact-grid{ display:grid; grid-template-columns:1.5fr 1fr; gap:clamp(26px,4vw,60px); align-items:start; }

.form{
  background:rgba(255,255,255,.035);
  border:1px solid var(--bord-inv);
  border-radius:var(--r-lg);
  padding:clamp(22px,3vw,38px);
}
.f-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field{ display:block; margin-bottom:18px; }
.field > span{
  display:block; margin-bottom:8px;
  font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--txt-inv-2);
}
.field input, .field select, .field textarea{
  width:100%; padding:13px 15px;
  background:rgba(0,0,0,.35);
  border:1px solid var(--bord-inv); border-radius:var(--r-sm);
  /* 16px minimum : en dessous, iOS zoome sur le champ au focus */
  color:var(--blanc); font-family:inherit; font-size:16px; line-height:1.4;
  min-height:50px;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.field textarea{ resize:vertical; min-height:130px; }
/* iOS affiche les champs date/select avec son propre style et une hauteur
   réduite : on les aligne sur les autres champs */
.field input[type="date"]{ -webkit-appearance:none; appearance:none; display:block; }
.field input[type="date"]::-webkit-date-and-time-value{ text-align:left; }
.field input[type="date"]::-webkit-calendar-picker-indicator{ filter:invert(1); opacity:.6; }

/* ---------- Menu déroulant « Type d'événement » ----------
   Même champ que les autres au repos ; à l'ouverture, un panneau noir à filet
   doré descend sous le bouton, chaque type avec son pictogramme. */
.field > #typeLabel{ cursor:pointer; }
.dd{ position:relative; }
.dd-btn{
  width:100%; min-height:50px;
  display:flex; align-items:center; gap:12px;
  padding:0 14px 0 15px;
  background:rgba(0,0,0,.35);
  border:1px solid var(--bord-inv); border-radius:var(--r-sm);
  color:var(--blanc); font-size:16px; text-align:left; cursor:pointer;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
@media (hover:hover){ .dd-btn:hover{ border-color:rgba(255,255,255,.32); background:rgba(0,0,0,.5); } }
.dd-btn:focus-visible, .dd.open .dd-btn{
  outline:none; border-color:var(--or);
  box-shadow:0 0 0 3px rgba(232,192,102,.16);
}
.dd-value{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dd-value.is-ph{ color:rgba(255,255,255,.45); }
/* pictogramme du type choisi, affiché dans le bouton */
.dd-cur{ display:none; flex:none; width:20px; height:20px; color:var(--or); }
.dd.has-value .dd-cur{ display:block; }
.dd-cur svg{ width:100%; height:100%; display:block; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.dd-chev{
  flex:none; width:18px; height:18px; fill:none; stroke:var(--txt-inv-2); stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
  transition:transform .35s var(--ease), stroke .25s var(--ease);
}
.dd.open .dd-chev{ transform:rotate(180deg); stroke:var(--or); }

.dd-list{
  position:absolute; z-index:30; left:0; right:0; top:calc(100% + 8px);
  margin:0; padding:6px; list-style:none;
  background:linear-gradient(180deg, #121212, #070707);
  border:1px solid rgba(232,192,102,.32);
  border-radius:var(--r);
  box-shadow:0 24px 50px rgba(0,0,0,.6), 0 2px 0 rgba(232,192,102,.08) inset;
  max-height:min(480px, 72vh); overflow-y:auto; overscroll-behavior:contain;
  outline:none;
  /* ouverture : le panneau se déplie depuis le bouton */
  opacity:0; visibility:hidden; transform:translateY(-6px) scale(.98); transform-origin:50% 0;
  clip-path:inset(0 0 100% 0 round var(--r));
  transition:opacity .22s var(--ease), transform .32s var(--ease), clip-path .38s var(--ease), visibility 0s linear .38s;
}
.dd.open .dd-list{
  opacity:1; visibility:visible; transform:none;
  clip-path:inset(0 0 0 0 round var(--r));
  transition:opacity .22s var(--ease), transform .32s var(--ease), clip-path .38s var(--ease), visibility 0s;
}
.dd-opt{
  display:flex; align-items:center; gap:14px;
  padding:11px 12px; min-height:56px;
  border-radius:var(--r-sm); cursor:pointer;
  color:var(--blanc);
  transition:background .18s var(--ease);
}
.dd-opt + .dd-opt{ margin-top:2px; }
.dd-opt.is-active{ background:rgba(255,255,255,.07); }
.dd-ico{
  flex:none; width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid var(--bord-inv); color:var(--txt-inv-2);
  transition:border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}
.dd-ico svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.dd-opt.is-active .dd-ico{ border-color:rgba(232,192,102,.55); color:var(--or); }
.dd-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; line-height:1.3; }
.dd-t{ font-size:15.5px; font-weight:500; }
.dd-d{ font-size:13px; color:var(--txt-inv-2); }
.dd-check{
  flex:none; width:18px; height:18px; fill:none; stroke:var(--or); stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
  opacity:0; transform:scale(.6); transition:opacity .2s var(--ease), transform .25s var(--ease);
}
.dd-opt[aria-selected="true"] .dd-ico{ background:var(--or); border-color:var(--or); color:#000; }
.dd-opt[aria-selected="true"] .dd-t{ color:var(--or-clair); }
.dd-opt[aria-selected="true"] .dd-check{ opacity:1; transform:none; }
/* l'apparition des options suit le dépliage du panneau */
.dd.open .dd-opt{ animation:ddIn .34s var(--ease) both; }
.dd.open .dd-opt:nth-child(2){ animation-delay:.03s; }
.dd.open .dd-opt:nth-child(3){ animation-delay:.06s; }
.dd.open .dd-opt:nth-child(4){ animation-delay:.09s; }
.dd.open .dd-opt:nth-child(5){ animation-delay:.12s; }
@keyframes ddIn{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){
  .dd-list, .dd.open .dd-list{ transition:none; transform:none; }
  .dd.open .dd-opt{ animation:none; }
}
.field select option{ background:var(--noir-2); color:var(--blanc); }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--or);
  box-shadow:0 0 0 3px rgba(255,255,255,.16);
}
.field input:user-invalid{ border-color:rgba(255,255,255,.55); }
.form-note{ margin:14px 0 0; font-size:12.5px; color:var(--txt-inv-2); text-align:center; }

.contact-side{ display:grid; gap:14px; }
.cbox{
  border:1px solid var(--bord-inv); border-radius:var(--r);
  padding:20px 22px; background:rgba(255,255,255,.025);
}
.cbox-l{ margin:0 0 6px; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--or); }
.cbox-v{ margin:0; font-size:17px; color:var(--blanc); transition:color .25s var(--ease); overflow-wrap:anywhere; }
a.cbox-v{ display:inline-block; padding-block:8px; margin-block:-8px; }   /* zone tactile plus haute, sans décaler le texte */
a.cbox-v:hover{ color:var(--or-clair); }
.socials{ display:flex; gap:10px; margin-top:4px; }
.socials a{
  width:44px; height:44px; border-radius:var(--r-pill);
  border:1px solid var(--bord-inv); display:grid; place-items:center;
  transition:all .25s var(--ease);
}
.socials svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.5; }
.socials a:hover{ border-color:var(--rouge); background:var(--rouge); color:var(--blanc); }

/* =========================================================
   FOOTER
   ========================================================= */
.footer{
  background:#000; color:var(--txt-inv); padding-block:56px 44px; border-top:1px solid rgba(255,255,255,.12);
  padding-bottom:max(44px, calc(env(safe-area-inset-bottom) + 24px));
}
.footer-inner{ display:grid; gap:26px; justify-items:center; text-align:center; }
.footer-brand{ display:flex; flex-direction:column; align-items:center; }
.footer-logo{ width:110px; height:auto; margin-bottom:10px; }
.footer-brand .brand-script{ font-size:32px; }
.footer-nav{ display:flex; flex-wrap:wrap; gap:4px 26px; justify-content:center; }
.footer-nav a{ font-size:14.5px; color:var(--txt-inv-2); transition:color .25s var(--ease); padding-block:11px; }
.footer-nav a:hover{ color:var(--or); }
.footer-legal{ display:flex; flex-wrap:wrap; gap:4px 22px; justify-content:center; margin-top:-14px; }
.footer-legal a{
  font-size:13px; color:#8C8482; padding-block:10px;
  text-decoration:underline; text-decoration-color:rgba(255,255,255,.2); text-underline-offset:4px;
  transition:color .25s var(--ease), text-decoration-color .25s var(--ease);
}
.footer-legal a:hover{ color:var(--or); text-decoration-color:var(--or); }
.footer-legal a:focus-visible{ outline:2px solid var(--or); outline-offset:3px; }
.form-note a{ color:var(--blanc); text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(255,255,255,.35); }
.form-note a:hover{ color:var(--or-clair); }

.footer-copy{ margin:0; font-size:13px; color:#6E6664; }

/* =========================================================
   ANIMATIONS
   ========================================================= */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.grid .reveal:nth-child(2){ transition-delay:.09s; }
.grid .reveal:nth-child(3){ transition-delay:.18s; }
.grid .reveal:nth-child(4){ transition-delay:.27s; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .btn:hover, .card:hover{ transform:none; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
/* ---------- Grands écrans (≥ 1800 px : iMac, 27", 4K) ----------
   Sans ça le contenu reste bloqué à 1360 px au milieu d'un écran de 2560 et
   tout paraît minuscule : on élargit la colonne et on monte l'échelle typo. */
@media (min-width:1800px){
  :root{ --wrap:1560px; }
  body{ font-size:18px; }
  .header-inner{ max-width:1840px; }
  .nav{ gap:36px; }
  .nav > a{ font-size:16px; }
  .nav > a.nav-cta{ font-size:14.5px; padding:12px 26px; }
  .btn{ font-size:16px; padding:16px 32px; }
  .hero-title{ font-size:clamp(56px, min(4.1vw, 7.2svh), 108px); }
  .hero-sub{ font-size:20px; max-width:880px; }
  .hero-tags{ font-size:16.5px; }
  .head{ max-width:1240px; }
  .head h2{ font-size:clamp(58px, 3.3vw, 78px); }
  .head-lead{ font-size:20px; max-width:880px; }
  .card h3{ font-size:21px; }
  .card p{ font-size:16.5px; }
  .ticks li{ font-size:17.5px; }
  .split-text .lead{ font-size:22px; }
  .gitem{ flex-basis:clamp(360px, 19vw, 480px); }
  .quote{ font-size:26px; max-width:1100px; }
  .cbox-v{ font-size:18.5px; }
}
@media (min-width:2300px){
  :root{ --wrap:1800px; }
  body{ font-size:19px; }
  .header-inner{ max-width:2080px; padding-block:14px; }
  .brand-img{ height:74px; margin:-8px 0; }
  .nav > a{ font-size:17px; }
  .lang-btn{ width:46px; height:46px; font-size:13.5px; }
  .card h3{ font-size:23px; }
  .card p{ font-size:17.5px; }
  .card-dark, .card-outline{ padding:32px 32px 36px; }
  .field input, .field select, .field textarea{ font-size:17px; }
}

/* ---------- Desktop compact (1001–1260 px : petits portables, iPad paysage) ----------
   La navigation complète tient encore : on resserre au lieu de passer au burger. */
@media (max-width:1260px){
  .nav{ gap:22px; }
  .nav > a{ font-size:14.5px; }
  .header-right{ gap:10px; }
  .lang{ gap:5px; }
  .grid-4{ grid-template-columns:repeat(2,1fr); }
}

/* ---------- Menu burger (≤ 1000 px) ---------- */
@media (max-width:1000px){
  .nav{
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0;
    background:#F4F4F4;
    border-bottom:1px solid rgba(0,0,0,.12);
    /* 2ᵉ ombre = voile sombre sur la page, coupé au-dessus du menu pour
       laisser l'en-tête intact */
    box-shadow:0 24px 40px rgba(0,0,0,.18), 0 0 0 100vmax rgba(0,0,0,.42);
    clip-path:inset(0 0 -100vmax 0);
    padding:8px var(--pad-x) 26px;
    padding-left:max(var(--pad-x), env(safe-area-inset-left));
    padding-right:max(var(--pad-x), env(safe-area-inset-right));
    /* téléphone en paysage : le menu défile au lieu de sortir de l'écran */
    max-height:calc(100vh - 70px);
    max-height:calc(100dvh - 70px);
    overflow-y:auto; overscroll-behavior:contain;
    transform:translateY(-14px); opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .3s var(--ease), transform .3s var(--ease), visibility 0s linear .3s;
  }
  .nav.open{
    opacity:1; transform:none; visibility:visible; pointer-events:auto;
    transition:opacity .3s var(--ease), transform .3s var(--ease), visibility 0s;
  }
  .nav > a{ padding:16px 0; border-bottom:1px solid rgba(0,0,0,.09); font-size:17px; }
  .nav > a::after{ display:none; }
  .nav > a.nav-cta{ margin-top:18px; border-bottom:0; align-self:flex-start; padding:14px 28px; font-size:15px; }
  .burger{ display:flex; width:50px; height:50px; border-color:rgba(0,0,0,.28); }
  .burger span{ width:20px; }
  /* le sélecteur de langue descend dans le menu : header épuré (logo + menu) */
  .header-right > .lang{ display:none; }
  .lang-mobile{ display:flex; gap:8px; margin-top:24px; }
  .lang-mobile .lang-btn{ width:46px; height:46px; }
}

/* ---------- Tablette (≤ 900 px) ---------- */
@media (max-width:900px){
  .contact-grid{ grid-template-columns:1fr; }
  /* sous le formulaire, les coordonnées passent sur deux colonnes */
  .contact-side{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}

/* ---------- Mobile & petite tablette (≤ 860 px) ---------- */
@media (max-width:860px){
  body{ font-size:16px; }
  /* Mobile : on garde le fond plein cadre — le truck déborde des deux côtés,
     comme sur grand écran. 100dvh suit la barre d'adresse qui se rétracte. */
  .hero{
    min-height:max(100svh, 42vw, 560px);
    min-height:max(100dvh, 42vw, 560px);
    padding-block:clamp(110px,14vh,150px) clamp(38px,6vh,60px);
    padding-bottom:max(clamp(38px,6vh,60px), calc(env(safe-area-inset-bottom) + 24px));
  }
  .hero-bg{ transform:none; }   /* pas de zoom : on montre le plus de truck possible */
  /* le bas s'assombrit plus tôt : la baseline et les boutons se détachent en blanc */
  .hero-scrim{
    background:
      radial-gradient(95% 40% at 50% 2%, rgba(255,255,255,.72), rgba(255,255,255,0) 62%),
      linear-gradient(180deg, rgba(0,0,0,0) 62%, rgba(0,0,0,.42) 80%, rgba(0,0,0,.86) 92%, #000 100%);
  }
  .hero-tags{ color:#fff; text-shadow:0 1px 16px rgba(0,0,0,.75); margin-bottom:18px; }
  .hero-sub{ margin-top:16px; }
  .hero-actions .btn{ min-height:46px; padding:12px 20px; font-size:14.5px; }
  .btn-ghost{ background:rgba(255,255,255,.72); }

  .grid-3{ grid-template-columns:1fr; }

  /* rappel du CTA, flottant une fois le hero passé */
  .sticky-cta{
    display:flex; position:fixed; z-index:90;
    left:max(16px, env(safe-area-inset-left)); right:max(16px, env(safe-area-inset-right));
    bottom:max(16px, calc(env(safe-area-inset-bottom) + 8px));
    max-width:480px; margin-inline:auto;
    align-items:center; justify-content:center;
    padding:16px 22px; border-radius:var(--r-pill);
    background:#000; color:var(--blanc);
    font-size:15px; font-weight:500;
    border:1px solid rgba(255,255,255,.22);
    box-shadow:none;   /* pas d'ombre sous le bouton flottant */
    opacity:0; transform:translateY(14px); pointer-events:none;
    transition:opacity .3s var(--ease), transform .3s var(--ease);
  }
  .sticky-cta.show{ opacity:1; transform:none; pointer-events:auto; }
  html.menu-open .sticky-cta{ opacity:0; pointer-events:none; }

  /* Signature : la photo passe au-dessus du texte, en paysage pour ne pas
     occuper tout un écran à elle seule */
  .split{ grid-template-columns:1fr; }
  /* Expérience : la photo du menu au-dessus, puis la carte */
  .carte{ grid-template-columns:1fr; }
  .carte-photo{ position:static; aspect-ratio:4/3; width:100%; max-width:520px; }
  .split-media{ order:-1; aspect-ratio:4/3; }
  .grid-2{ grid-template-columns:1fr; }
  .brand-img{ height:44px; }
  .header .brand-script{ font-size:21px; }
}

/* ---------- Grille 3 colonnes conservée sur tablette large ---------- */
@media (min-width:761px) and (max-width:860px){
  .grid-3{ grid-template-columns:repeat(3,1fr); gap:14px; }
  .grid-3 .card-dark{ padding:22px 20px 24px; }
}

/* ---------- Téléphone (≤ 600 px) ---------- */
@media (max-width:600px){
  .grid-4{ grid-template-columns:1fr; }
  .f-row{ grid-template-columns:1fr; gap:0; }
  .contact-side{ grid-template-columns:1fr; }
  .head{ padding-left:18px; }
  .card-dark, .card-outline{ padding:22px 22px 24px; }
  .split-media{ aspect-ratio:1/1; }
  .carte-photo{ aspect-ratio:4/3; max-width:none; }
  .lang{ gap:6px; }
  .brand-sub{ font-size:7.5px; }
  .gitem{ flex-basis:68%; }
  /* les deux boutons du hero font la même largeur et tiennent sur une ligne */
  .hero-actions{ gap:10px; }
  .hero-actions .btn{ flex:1 1 0; max-width:220px; padding-inline:14px; }
}

/* ---------- Très petits téléphones (≤ 360 px : iPhone SE 1, Android compacts) ---------- */
@media (max-width:360px){
  :root{ --pad-x:16px; }
  /* « ÉVÉNEMENTS PRIVÉS » tient sur une ligne */
  .hero-title{ font-size:24px; letter-spacing:.03em; }
  .hero-sub{ font-size:13.5px; }
  .hero-actions .btn{ flex:0 1 auto; white-space:nowrap; font-size:13.5px; padding-inline:16px; }
}

/* ---------- Téléphone en paysage / fenêtre très basse ----------
   Le hero reste plus haut que l'écran (voir .hero) : on compacte le haut pour
   que le titre tienne au-dessus du néon. */
@media (max-height:500px) and (orientation:landscape){
  .header-inner{ padding-block:6px; }
  .brand-img{ height:38px; }
  .burger{ width:44px; height:44px; }
  .nav{ max-height:calc(100vh - 56px); max-height:calc(100dvh - 56px); }
  .nav > a{ padding:12px 0; }
  .hero{ padding-top:86px; }
  .hero-title{ font-size:clamp(28px, 4.4vw, 40px); }
  .hero-sub{ margin-top:10px; font-size:14px; }
  .sticky-cta{ max-width:360px; padding-block:12px; }
}

/* ---------- Écrans tactiles : cibles de 44 px minimum ---------- */
@media (pointer:coarse){
  .lang-btn{ width:44px; height:44px; }
}

/* =========================================================
   PAGES LÉGALES (mentions-legales.html, confidentialite.html)
   ========================================================= */
.legal-page{ background:var(--blanc); }
.legal-back{
  display:inline-flex; align-items:center; gap:8px;
  min-height:44px; padding:0 18px; border-radius:var(--r-pill);
  border:1px solid rgba(0,0,0,.22); font-size:14.5px; color:#1F1F1F;
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.legal-back:hover{ border-color:#000; background:rgba(255,255,255,.7); }
.legal-back:focus-visible{ outline:2px solid var(--or-fonce); outline-offset:3px; }
.legal-back svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }

.legal{
  padding:calc(96px + clamp(32px, 6vw, 72px)) var(--pad-x) var(--sec-y);
  padding-left:max(var(--pad-x), env(safe-area-inset-left));
  padding-right:max(var(--pad-x), env(safe-area-inset-right));
}
.legal-inner{ max-width:760px; margin-inline:auto; }
.legal .head{ margin-bottom:clamp(28px, 4vw, 44px); }
.legal .head h1{
  margin:0; font-weight:250; font-size:clamp(32px, 4.4vw, 54px);
  line-height:1.12; letter-spacing:-.01em;
}
.legal-updated{ margin:14px 0 0; font-size:14px; color:var(--txt-2); }

.legal-toc{
  margin:0 0 clamp(36px, 5vw, 56px); padding:20px 24px;
  border:1px solid var(--bord); border-radius:var(--r);
  background:#FAFAFA;
}
.legal-toc p{ margin:0 0 10px; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--or-fonce); }
.legal-toc ol{ margin:0; padding-left:20px; columns:2 240px; column-gap:32px; }
.legal-toc li{ margin:0 0 6px; font-size:15px; break-inside:avoid; }
.legal-toc a{ color:var(--txt); text-decoration:underline; text-decoration-color:rgba(0,0,0,.2); text-underline-offset:3px; }
.legal-toc a:hover{ text-decoration-color:#000; }

.legal section{ scroll-margin-top:110px; }
.legal section + section{ margin-top:clamp(34px, 4.5vw, 48px); padding-top:clamp(34px, 4.5vw, 48px); border-top:1px solid var(--bord); }
.legal h2{ margin:0 0 16px; font-size:clamp(21px, 2.2vw, 26px); font-weight:500; letter-spacing:-.01em; line-height:1.25; }
.legal h3{ margin:26px 0 8px; font-size:17px; font-weight:600; }
.legal p, .legal li{ font-size:16px; line-height:1.7; color:#2A2A2A; }
.legal p{ margin:0 0 14px; max-width:68ch; }
.legal ul{ margin:0 0 14px; padding-left:22px; max-width:68ch; }
.legal li{ margin-bottom:6px; }
.legal li::marker{ color:var(--or-fonce); }
.legal a:not(.legal-back){ color:#000; text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(0,0,0,.3); overflow-wrap:anywhere; }
.legal a:not(.legal-back):hover{ text-decoration-color:#000; }

/* fiche d'identité de l'exploitant */
.legal-card{
  display:grid; grid-template-columns:minmax(150px, max-content) 1fr; gap:10px 28px;
  margin:6px 0 18px; padding:22px 24px;
  border:1px solid var(--bord); border-radius:var(--r);
}
.legal-card dt{ font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--txt-2); padding-top:3px; }
.legal-card dd{ margin:0; font-size:16px; line-height:1.55; overflow-wrap:anywhere; }
@media (max-width:600px){
  .legal-card{ grid-template-columns:1fr; gap:2px; padding:18px; }
  .legal-card dd + dt{ margin-top:12px; }
}

/* informations à compléter par l'exploitant avant la mise en ligne */
mark.todo{
  background:#FFF1C7; color:#5A4300;
  padding:1px 6px; border-radius:4px;
  box-decoration-break:clone; -webkit-box-decoration-break:clone;
  font-size:.94em;
}