/* Tu mijotes ? - landing page, built 1:1 from Talia's mockup (HOMEPAGE/Homepage.jpg, 1920 px wide). Her colours, type and
   design are kept exactly; only the layout re-flows for tablets and phones. Fluid sizes: 1 vw = 19.2 px of her mockup.
   Type = Times New Roman (measured: her first line is 1758 px wide with a 44 px cap height = Times New Roman at 68 px).
   Tinos (Google Fonts) is metric-identical to Times New Roman and covers Android / Linux where Times is not installed. */
@import url('https://fonts.googleapis.com/css2?family=Tinos:ital,wght@0,400;0,700;1,400&display=swap');
:root {
  --green: #04c16d; --sky: #7fd8ff; --pink: #ffadeb; --paper: #fefff9; --ink: #000;
  --grey-a: #efefef; --grey-b: #e9e9e9;
  --serif: "Times New Roman", Tinos, Times, serif;
  --nav-fs: clamp(14px, 1.3vw, 25px);      /* 25 px at 1920 */
  --btn-fs: clamp(15px, 1.6vw, 31px);      /* 31 px */
  --body-fs: clamp(18px, 1.67vw, 32px);    /* 32 px: pink text, footer links */
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--green); color: var(--ink); font: 400 18px/1.3 var(--serif); overflow-x: hidden; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: .12em; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- header: left links | script M | right links (108 px tall in the mockup) ---------- */
.hdr { position: relative; z-index: 20; background: var(--green); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: clamp(60px, 5.6vw, 108px); padding: 0 clamp(16px, 3.7vw, 71px); }
.hdr nav { display: flex; gap: clamp(14px, 3.5vw, 68px); font-size: var(--nav-fs); text-transform: uppercase; white-space: nowrap; }
.hdr nav.right { justify-content: flex-end; }
.hdr .mark { display: block; height: clamp(34px, 4.3vw, 82px); width: auto; margin: 0 clamp(12px, 2vw, 40px); }
.hdr .menu, .hdr .spacer { display: none; }
@media (max-width: 820px) {
  .hdr { grid-template-columns: 1fr auto 1fr; min-height: 60px; padding: 0 16px; }
  .hdr nav { display: none; }
  .hdr .spacer { display: block; grid-column: 1; grid-row: 1; }
  .hdr .logo { grid-column: 2; grid-row: 1; }
  .hdr .menu { display: block; grid-column: 3; grid-row: 1; justify-self: end; font: inherit; font-size: 16px; text-transform: uppercase; background: none; border: 0; padding: 10px 0 10px 10px; color: var(--ink); cursor: pointer; }
  .hdr.open nav { display: grid; grid-template-columns: 1fr; justify-content: stretch; grid-column: 1 / -1; gap: 0; padding: 0; font-size: 23px; }
  .hdr.open nav.left { grid-row: 2; padding-top: 6px; }
  .hdr.open nav.right { grid-row: 3; padding-bottom: 18px; }
  .hdr.open nav a { padding: 10px 0; border-top: 1px solid rgba(0, 0, 0, .18); }
  .hdr.open nav.right a:last-child { border-bottom: 1px solid rgba(0, 0, 0, .18); }
}

/* ---------- pill button: paper, 240 x 78 in the mockup, 31 px caps ---------- */
.pill { display: inline-flex; align-items: center; justify-content: center; min-width: clamp(150px, 12.5vw, 240px); min-height: clamp(44px, 4.06vw, 78px); padding: .3em 1em; border-radius: 999px; background: var(--paper); color: var(--ink); font-size: var(--btn-fs); text-transform: uppercase; line-height: 1.1; border: 1px solid var(--paper); transition: background .18s, color .18s; }
.pill:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); text-decoration: none; }

/* ---------- banner: her animated collage (1920 x 960) with S'ABONNER bottom right ---------- */
.banner { position: relative; background: #e8ddc1; }
.banner video, .banner img { width: 100%; height: clamp(320px, 50vw, 960px); object-fit: cover; }
.banner .pill { position: absolute; right: clamp(16px, 3.3vw, 63px); bottom: clamp(16px, 3.5vw, 68px); }
@media (max-width: 720px) { .banner video, .banner img { height: 72vw; } }

/* ---------- green statement (TEXTE 1): 68 px Times, 65 px line pitch, 65 px side margins ---------- */
.intro { background: var(--green); padding: clamp(30px, 3.6vw, 70px) clamp(16px, 3.4vw, 65px) clamp(34px, 4.8vw, 93px); }
.intro p { margin: 0; font-size: clamp(24px, 3.54vw, 68px); line-height: .96; }
.intro p em { font-style: italic; }
.intro .pill { margin-top: clamp(22px, 3vw, 57px); }

/* ---------- BOUTIQUE band (sky, 244 px): Times bold, tight ---------- */
.band { background: var(--sky); display: flex; align-items: center; min-height: clamp(90px, 12.7vw, 244px); padding: 0 clamp(16px, 2.4vw, 46px); }
.band h2 { margin: 0; font-weight: 400; font-size: clamp(42px, 4.95vw, 95px); line-height: 1; text-transform: uppercase; letter-spacing: -.055em; }

/* ---------- product tiles (960 x 960 each in the mockup) ---------- */
.tiles { display: grid; grid-template-columns: 1fr 1fr; }
.tile { position: relative; aspect-ratio: 1 / 1; background: linear-gradient(90deg, var(--grey-a), var(--grey-b)); display: grid; grid-template-rows: 86.5% 13.5%; color: var(--ink); }
.tile:hover { text-decoration: none; }
.tile img { width: 100%; height: 100%; object-fit: cover; }
.tile .cap { display: flex; justify-content: space-between; align-items: center; padding: 0 3.3%; font-size: var(--nav-fs); text-transform: uppercase; }
.tile:hover .cap span:first-child { text-decoration: underline; text-underline-offset: .12em; }
@media (max-width: 720px) { .tiles { grid-template-columns: 1fr; } }

/* ---------- second row: RIEN NE PRESSE tile + pink text (TEXTE 2: 32 px, 42 px pitch, 90 px left) ---------- */
.duo { display: grid; grid-template-columns: 1fr 1fr; }
.duo .art { aspect-ratio: 1 / 1; display: block; background: #c2bb5f; }
.duo .art img { width: 100%; height: 100%; object-fit: cover; }
.duo .pinkbox { background: var(--pink); display: flex; flex-direction: column; justify-content: center; padding: 8% 9.4%; }
.duo .pinkbox p { margin: 0; font-size: var(--body-fs); line-height: 1.31; max-width: 30em; }
.duo .pinkbox .pill { align-self: flex-start; margin-top: clamp(22px, 3.1vw, 60px); }
@media (max-width: 720px) { .duo { grid-template-columns: 1fr; } .duo .pinkbox { padding: 44px 24px 48px; } }

/* ---------- footer (green, 554 px): logo left, 32 px links at 1050 px, icons 42 px ---------- */
.ftr { background: var(--green); display: grid; grid-template-columns: 1fr 1fr; align-items: center; min-height: clamp(300px, 28.8vw, 554px); padding: clamp(36px, 4.5vw, 86px) clamp(16px, 3.1vw, 60px); gap: 32px; }
.ftr .script { width: clamp(190px, 29.5vw, 566px); height: auto; }
.ftr .links { display: grid; gap: 0; justify-self: start; padding-left: 9.4%; font-size: var(--body-fs); line-height: 1.31; text-transform: uppercase; }
.ftr .social { display: flex; gap: clamp(14px, 1.15vw, 22px); margin-top: clamp(28px, 4.4vw, 85px); padding-left: 9.4%; }
.ftr .social a { display: inline-flex; width: clamp(30px, 2.2vw, 42px); height: clamp(30px, 2.2vw, 42px); }
.ftr .social svg { width: 100%; height: 100%; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 720px) { .ftr { grid-template-columns: 1fr; gap: 40px; padding: 48px 24px 56px; } .ftr .links, .ftr .social { padding-left: 0; } }

/* ---------- simple inner pages (placeholders until their content exists) ---------- */
.page { background: var(--green); min-height: 50vh; padding: clamp(40px, 6vw, 120px) clamp(16px, 3.4vw, 65px); }
.page h1 { margin: 0 0 .3em; font-weight: 700; font-size: clamp(42px, 4.95vw, 95px); line-height: 1; text-transform: uppercase; letter-spacing: -.06em; }
.page p { margin: 0; max-width: 30em; font-size: clamp(20px, 2vw, 38px); line-height: 1.2; }
.page .pill { margin-top: clamp(22px, 3vw, 57px); }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .pill { transition: none; } }