/* ========================================================================
   TEAVEN · teaven.co — styles globaux
   Les mises en page vivent dans le HTML (styles en ligne, repris du
   prototype de référence). Cette feuille porte : les fontes, le socle,
   les états survol/appui, les interactions (menu, accordéon, apparitions)
   et les règles responsives du prototype — qui ciblent les styles en
   ligne, à conserver tels quels.
   ======================================================================== */

/* ---------- Fontes · Bw Modelica (licenciée, servie localement) ---------- */
@font-face {
  font-family: 'Bw Modelica';
  src: url('/assets/fonts/BwModelica-Light.woff2') format('woff2'),
       url('/assets/fonts/BwModelica-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Bw Modelica';
  src: url('/assets/fonts/BwModelica-Regular.woff2') format('woff2'),
       url('/assets/fonts/BwModelica-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Bw Modelica';
  src: url('/assets/fonts/BwModelica-Medium.woff2') format('woff2'),
       url('/assets/fonts/BwModelica-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Bw Modelica';
  src: url('/assets/fonts/BwModelica-Bold.woff2') format('woff2'),
       url('/assets/fonts/BwModelica-Bold.woff') format('woff');
  font-weight: 600 800;
  font-style: normal;
  font-display: swap;
}

/* ---------- Socle ---------- */
html, body { margin:0; padding:0; background:#F0F0E5; }
body { font-family:'Bw Modelica', sans-serif; color:#1C1C1A; -webkit-font-smoothing:antialiased; }
* { box-sizing:border-box; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; }
::selection { background:#75967F; color:#F0F0E5; }
input::placeholder { color:#9A9A8E; }
@keyframes tv-fade { from { opacity:0 } to { opacity:1 } }
@keyframes tv-rise { from { opacity:0; transform:translateY(18px) } to { opacity:1; transform:none } }

/* ---------- États survol / appui (remplacent style-hover/style-active
   du prototype ; !important car ils recouvrent des styles en ligne) ---------- */
.btn-g:hover { background:#6A8A73 !important; }
.btn-g:active { transform:scale(0.97); }
.btn-o:hover { background:rgba(115,132,120,0.10) !important; }
.btn-o:active { transform:scale(0.97); }
.fab-r:hover { background:#5D8480 !important; }
.fab-r:active { transform:scale(0.97); }
.hf:hover { opacity:0.6; }
.hg:hover { color:#75967F !important; }
.hgnav:hover { color:#75967F !important; }
.lm:hover { color:#5C7866 !important; text-decoration:underline; text-underline-offset:4px; }
.hc:hover { box-shadow:0 2px 8px rgba(28,28,26,0.06) !important; }
.hc:active { transform:scale(0.97); }
a:hover .btn-c, .btn-c:hover { background:rgba(240,240,229,0.14) !important; }
/* La carte Aube en produit phare : posée en perspective, ombres en
   couches (contact, portée, ambiante) et un reflet de lumière qui
   glisse sur la carte. Le survol la redresse et la soulève. */
.aube-card {
  transform:perspective(1100px) rotateX(3deg) rotateY(-6deg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.16),
             0 2px 6px rgba(28,28,26,0.35),
             0 18px 32px rgba(28,28,26,0.38),
             0 48px 90px rgba(28,28,26,0.55) !important;
}
.aube-card::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.06) 26%, rgba(255,255,255,0) 44%);
}
.aube-card:hover {
  transform:perspective(1100px) rotateX(0deg) rotateY(0deg) translateY(-8px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.16),
             0 3px 8px rgba(28,28,26,0.32),
             0 26px 44px rgba(28,28,26,0.40),
             0 60px 110px rgba(28,28,26,0.58) !important;
}
@media (prefers-reduced-motion: reduce) { .aube-card, .aube-card:hover { transform:none; transition:none; } }

/* La carte des Parenthèses reçoit le même traitement de produit phare,
   avec des ombres vertes et douces adaptées aux fonds clairs. */
.carte-phare {
  position:relative;
  transform:perspective(1100px) rotateX(3deg) rotateY(6deg);
  transition:transform 400ms cubic-bezier(.2,.7,.3,1), box-shadow 400ms ease;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.5),
             0 2px 6px rgba(92,120,102,0.18),
             0 18px 32px rgba(92,120,102,0.22),
             0 48px 90px rgba(92,120,102,0.28) !important;
}
.carte-phare::after {
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(115deg, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0.10) 30%, rgba(255,255,255,0) 48%);
}
.carte-phare:hover {
  transform:perspective(1100px) rotateX(0deg) rotateY(0deg) translateY(-8px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.5),
             0 3px 8px rgba(92,120,102,0.18),
             0 26px 44px rgba(92,120,102,0.26),
             0 60px 110px rgba(92,120,102,0.32) !important;
}
@media (prefers-reduced-motion: reduce) { .carte-phare, .carte-phare:hover { transform:none; transition:none; } }

/* Navigation au clavier : le focus se voit, aux couleurs de la maison. */
:focus-visible { outline:2px solid #75967F; outline-offset:3px; border-radius:2px; }
[data-hero-inner] :focus-visible, [data-saison] :focus-visible { outline-color:#F0F0E5; }

/* ---------- Menu overlay ---------- */
[data-overlay][hidden] { display:none !important; }
body.menu-ouvert { overflow:hidden; }

/* ---------- Accordéon des boissons (details/summary : le contenu est
   dans le HTML initial, le JavaScript ne fait qu'ouvrir et fermer) ---------- */
details.dk > summary { list-style:none; cursor:pointer; transition:opacity 160ms ease; }
details.dk > summary::-webkit-details-marker { display:none; }
details.dk > summary:hover { opacity:0.68; }
.dk-ind { font-family:'JetBrains Mono',monospace; font-size:19px; font-weight:500; color:#738478; width:16px; text-align:center; }
.dk-ind::after { content:'+'; }
details.dk[open] > .dk-ind::after, details.dk[open] summary .dk-ind::after { content:'−'; }

/* ---------- Apparitions au défilement · fondu + 20 px, 350 ms.
   Sans JavaScript, tout est visible : la classe .js conditionne tout. ---------- */
.js [data-reveal] { opacity:0; transform:translateY(20px); }
.js [data-reveal].rv {
  opacity:1; transform:none;
  transition:opacity 350ms cubic-bezier(.2,.7,.3,1), transform 350ms cubic-bezier(.2,.7,.3,1);
}
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity:1; transform:none; transition:none; }
  [data-hero-inner] { animation:none !important; }
}

/* ---------- Pages légales ---------- */
.legal { max-width:760px; }
.legal h2 { font-weight:400; font-size:20px; line-height:1.3; letter-spacing:-0.014em; color:#1C1C1A; margin:44px 0 14px; }
.legal p, .legal li { font-size:15px; line-height:1.85; color:#6B6B5E; margin:0 0 16px; }
.legal ul { padding-left:20px; margin:0 0 16px; }
.legal a { color:#75967F; }
.legal strong { font-weight:500; color:#1C1C1A; }

/* ---------- Responsive · règles du prototype, conservées telles quelles ---------- */
@media (max-width:1180px) {
  [data-ftop] { grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:44px !important; }
  [data-estdishes] { gap:24px !important; }
  [data-saison] { padding:40px 40px !important; }
}
@media (max-width:900px) {
  header { padding:12px 14px 0 !important; }
  [data-hdr] { height:56px !important; padding:0 18px !important; gap:12px !important; }
  [data-ovhead] { height:68px !important; padding:0 32px !important; gap:12px !important; }
  [data-menu-btn], [data-menu-close] { margin-left:-12px !important; }
  [data-spacer] { height:68px !important; }
  [data-logo] img { height:24px !important; }
  [data-menu-word] { display:none !important; }
  [data-hdr-cta] a { font-size:12.5px !important; min-height:34px !important; padding:0 15px !important; }
  [data-ovbody] { grid-template-columns:minmax(0,1fr) !important; }
  [data-ovaside] { display:none !important; }
  [data-ovbody] > div:first-child { padding:28px 20px 36px !important; gap:36px !important; max-width:none !important; }

  section { padding-left:20px !important; padding-right:20px !important; }
  section[style*="padding:130px"], section[style*="padding:120px"], section[style*="padding:110px"] { padding-top:56px !important; padding-bottom:56px !important; }
  section[style*="padding:0 40px"] { padding-top:0 !important; padding-bottom:56px !important; }
  footer { padding:56px 20px 32px !important; }

  /* Les rubriques de campagne empilées : l'objet (carte, compteur)
     respire à 48 px sous le texte, sur l'échelle 4 pt du design system.
     Le double attribut l'emporte sur la règle générale [data-two-up]. */
  [data-two-up][data-campagne] { gap:48px !important; }

  /* Le bloc formule de l'accueil : le titre et les formules d'abord,
     la photo ensuite — la section suivante s'emboîte mieux. */
  [data-formule] > img { order:1; height:300px !important; }

  /* Le compte à rebours tient sur l'écran, quatre cases comprises. */
  [data-compte] { width:100%; gap:6px !important; }
  [data-compte] > div { min-width:0 !important; flex:1 1 0; padding:13px 4px 11px !important; }
  [data-compte] > div > span:first-child { font-size:22px !important; }
  [data-compte] > div > span:last-child { font-size:8px !important; letter-spacing:0.12em !important; }

  [style*="grid-template-columns"] { grid-template-columns:minmax(0,1fr) !important; gap:32px !important; }
  [style*="gap:1px"] { gap:1px !important; }
  [data-ftop] { grid-template-columns:1fr 1fr !important; gap:40px !important; }
  [data-fbot] { flex-direction:column; align-items:flex-start !important; gap:16px !important; }
  [data-gestes] a { grid-template-columns:minmax(0,1fr) !important; }
  [data-gesteimg] { display:none !important; }
  [data-two-up] { grid-template-columns:1fr 1fr !important; gap:12px !important; }
  [data-estdishes] { gap:44px !important; margin-top:36px !important; }

  [data-hero] { height:100svh !important; min-height:520px !important; }
  [data-hero-inner] { padding:24px 20px 88px !important; }
  [data-paren] { font-size:38px !important; top:86px !important; right:22px !important; }

  [data-banner] { aspect-ratio:auto !important; min-height:0 !important; }
  [data-saison] { position:relative !important; padding:34px 22px 38px !important; background:linear-gradient(to top, rgba(28,28,26,0.88) 0%, rgba(28,28,26,0.74) 34%, rgba(28,28,26,0.34) 60%, rgba(28,28,26,0) 88%) !important; padding-top:190px !important; }
  [data-banner] > span { top:22px !important; right:22px !important; font-size:40px !important; }

  img[style*="height:400px"], img[style*="height:440px"], img[style*="height:460px"], img[style*="height:560px"], img[style*="height:580px"] { height:260px !important; }
  section[style*="min-height:340px"] img, img[style*="min-height:340px"], img[style*="min-height:360px"], img[style*="min-height:400px"] { height:44vh !important; min-height:240px !important; }

  [data-resa-fab] { right:16px !important; bottom:16px !important; padding:0 18px !important; }
}
@media (max-width:400px) {
  header { padding:10px 12px 0 !important; }
  [data-hdr] { padding:0 16px !important; }
  [data-ovhead] { padding:0 28px !important; }
  [data-logo] img { height:22px !important; }
  [data-hdr-cta] a { font-size:12px !important; padding:0 13px !important; min-height:32px !important; }
  [data-ovbody] > div:first-child { padding-left:16px !important; padding-right:16px !important; }
}
@media (max-width:560px) {
  [data-two-up] { grid-template-columns:minmax(0,1fr) !important; }
  [data-chips] span { width:100%; justify-content:space-between; }
}

/* ---------- La carte sur mobile · deux colonnes, photos plus basses,
   pour que la page se parcoure sans descendre longtemps ---------- */
@media (max-width:900px) {
  [data-produits] { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:32px 14px !important; }
  [data-produits] [style*="height:250px"] { height:160px !important; }
  [data-produits] p[style*="font-size:18px"] { font-size:15.5px !important; }
  [data-produits] span[style*="font-size:14px"] { font-size:12.5px !important; }
  [data-produits] p[style*="font-size:14px"] { font-size:12.5px !important; }
  [data-produits] p[style*="font-size:10px"] { font-size:9px !important; }
}