/* ==========================================================================
   LA NIOUZELETTER — landing page d'inscription
   Points de rupture : ordinateur > 1080px · tablette 681–1080px · smartphone ≤ 680px
   ========================================================================== */

@font-face{ font-family:'Joint FR'; src:url('fonts/JointFR.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face{ font-family:'Gochi Hand'; src:url('fonts/GochiHand.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face{ font-family:'URW Geometric'; src:url('fonts/URWGeometric.woff2') format('woff2'); font-weight:800; font-display:swap; }

:root{
  --rose:#FF277C;
  --rose-fonce:#E2005F;
  --jaune:#FFE800;
  --jaune-survol:#F5D800;
  --peche:#FFC875;
  --violet:#4D2153;
  --encre:#2A1B3F;
  --blanc:#FFFFFF;
  --placeholder:#B9A6B4;

  --f-titre:'Joint FR','Trebuchet MS',sans-serif;
  --f-accent:'Gochi Hand','Bradley Hand',cursive;
  --f-ui:'URW Geometric','Poppins',sans-serif;
  --f-texte:'Poppins','Segoe UI',Helvetica,Arial,sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
body{ margin:0; font-family:var(--f-texte); color:var(--encre); -webkit-font-smoothing:antialiased; }
img{ display:block; max-width:100%; height:auto; }
a{ color:var(--rose); text-decoration:none; }
a:hover{ color:var(--rose-fonce); }

.nl-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- Structure ---------- */
.nl{ overflow-x:hidden; }
.nl-heros{
  display:grid;
  grid-template-columns:minmax(0, 600px) minmax(0, 1fr);
  min-height:780px;
}

/* ---------- Colonne rose ---------- */
.nl-intro{
  position:relative; overflow:hidden;
  background:var(--rose); color:var(--blanc);
  padding:40px 64px 0;
  display:flex; flex-direction:column; gap:30px;
}
.nl-intro__logo img{ width:150px; }
.nl-intro__texte{ display:flex; flex-direction:column; gap:6px; }
.nl-accroche{
  font-family:var(--f-accent); font-size:26px; line-height:1.2;
  color:var(--jaune);
  display:inline-block; transform:rotate(-4deg); transform-origin:left center;
}
.nl-titre{
  margin:0; font-family:var(--f-titre); font-weight:400;
  font-size:68px; line-height:1; white-space:nowrap;
}
.nl-chapo{ margin:14px 0 0; font-size:17px; line-height:1.6; max-width:44ch; text-wrap:pretty; }

/* ---------- Formulaire ---------- */
.nl-form{ display:flex; flex-direction:column; gap:12px; }
.nl-form[hidden]{ display:none; }
.nl-form__ligne{ display:grid; gap:12px; align-items:end; }
.nl-form__ligne--duo{ grid-template-columns:1fr 1fr; }
.nl-form__ligne--envoi{ grid-template-columns:1fr auto; }
.nl-form__bloc{ margin:0; display:flex; flex-direction:column; gap:6px; }
.nl-label{ font-family:var(--f-ui); font-weight:800; font-size:13px; padding-left:20px; }
.nl-champ{
  width:100%; font-family:var(--f-texte); font-size:15px; line-height:1.4;
  padding:15px 22px; border:0; border-radius:999px;
  background:var(--blanc); color:var(--encre);
  -webkit-appearance:none; appearance:none;
}
.nl-champ[type="date"]{ padding-block:13px; min-height:51px; }
.nl-champ::placeholder{ color:var(--placeholder); }
.nl-champ:focus-visible{ outline:3px solid var(--rose-fonce); outline-offset:2px; }
.nl-champ[aria-invalid="true"]{ box-shadow:0 0 0 3px var(--jaune); }
.nl-btn{
  font-family:var(--f-ui); font-weight:800; font-size:17px;
  padding:15px 40px; border:0; border-radius:999px;
  background:var(--jaune); color:var(--rose); cursor:pointer;
  transition:transform .15s ease, background-color .15s ease, color .15s ease;
}
.nl-btn:hover, .nl-btn:focus-visible{ background:var(--jaune-survol); color:var(--rose-fonce); transform:translateY(-2px); }
.nl-btn:focus-visible{ outline:3px solid var(--blanc); outline-offset:3px; }
.nl-btn[disabled]{ opacity:.7; cursor:wait; transform:none; }
.nl-form__message{ margin:0; min-height:1.4em; font-size:14px; font-weight:600; color:var(--jaune); }
/* Ajouts intégration (absents de la maquette) : champ piège, mention RGPD */
.nl-piege{ position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; margin:0; }
.nl-mention{ margin:0; font-size:12px; line-height:1.5; color:rgba(255,255,255,.85); max-width:60ch; }
.nl-mention a{ color:var(--blanc); text-decoration:underline; }
.nl-mention a:hover{ color:var(--jaune); }

.nl-merci{ background:var(--blanc); color:var(--encre); border-radius:26px; padding:26px 30px; display:flex; flex-direction:column; gap:4px; }
.nl-merci[hidden]{ display:none; }
.nl-merci__accroche{ font-family:var(--f-accent); font-size:24px; color:var(--rose); }
.nl-merci p{ margin:0; font-family:var(--f-ui); font-weight:800; font-size:18px; line-height:1.4; }

.nl-intro__perso{ width:220px; margin:-4px 0 -48px 40px; align-self:flex-start; pointer-events:none; }

/* ---------- Vitrine pêche ---------- */
.nl-vitrine{ position:relative; overflow:hidden; background:var(--peche); }
.nl-scene{
  position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:100%; max-width:760px; aspect-ratio:680 / 780;
  container-type:inline-size;
}
.nl-scene > *{ position:absolute; }
.nl-scene__couv{ right:10.3%; top:11.5%; width:44%; transform:rotate(6deg); border-radius:8px; box-shadow:0 22px 44px rgba(75,34,96,.3); }
.nl-scene__pastille{
  right:36.8%; top:7.7%; width:22%; aspect-ratio:1;
  border-radius:50%; background:var(--jaune);
  display:grid; place-items:center; text-align:center;
  transform:rotate(-10deg); box-shadow:0 8px 20px rgba(75,34,96,.15);
}
.nl-scene__pastille span{ font-family:var(--f-titre); font-size:3.1cqw; line-height:1.1; color:var(--rose); padding:0 9%; }
.nl-scene__sauts{ left:-3%; bottom:-1.3%; width:76%; }
.nl-scene__puduk{ right:-4.4%; bottom:16.7%; width:34%; transform:rotate(-6deg); }
.nl-scene__levres{ left:5.9%; top:9%; width:16%; transform:rotate(-14deg); }
.nl-scene__fleurs{ left:36.8%; top:32%; width:17.6%; transform:rotate(10deg); }

/* ---------- Bande violette ---------- */
.nl-contenu{ position:relative; background:var(--violet); color:var(--blanc); padding:44px 380px 50px 64px; }
.nl-contenu__titre{ margin:0 0 26px; font-family:var(--f-titre); font-weight:400; font-size:36px; line-height:1.1; color:var(--jaune); }
.nl-liste{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:36px; }
.nl-item{ display:flex; flex-direction:column; gap:12px; border-top:2px solid rgba(255,255,255,.25); padding-top:18px; }
.nl-item svg{ width:30px; height:30px; fill:none; stroke:var(--peche); stroke-width:1.8; stroke-linejoin:round; stroke-linecap:round; }
.nl-item h3{ margin:0; font-family:var(--f-ui); font-weight:800; font-size:19px; line-height:1.3; text-wrap:pretty; }
.nl-contenu__perso{ position:absolute; right:30px; bottom:0; width:330px; }

/* ---------- Pied de page légal (ajout intégration) ---------- */
.nl-pied{
  display:flex; flex-wrap:wrap; justify-content:center; gap:6px 22px;
  padding:14px 24px; background:var(--encre);
  font-size:12px; line-height:1.4;
}
.nl-pied a, .nl-pied__cookies{ color:rgba(255,255,255,.8); text-decoration:none; }
.nl-pied__cookies{ padding:0; border:0; background:none; font:inherit; cursor:pointer; }
.nl-pied a:hover, .nl-pied__cookies:hover{ color:var(--jaune); }

/* ==========================================================================
   Ordinateur étroit (1081–1280px)
   ========================================================================== */
@media (max-width:1280px){
  .nl-heros{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .nl-intro{ padding-inline:48px; }
  .nl-titre{ font-size:clamp(52px, 5.2vw, 68px); }
  .nl-contenu{ padding-right:320px; }
  .nl-contenu__perso{ width:280px; }
}

/* ==========================================================================
   Tablette (681–1080px) : colonnes empilées
   ========================================================================== */
@media (max-width:1080px){
  .nl-heros{ grid-template-columns:1fr; min-height:0; }
  .nl-intro{ padding:36px 48px 0; gap:26px; }
  .nl-titre{ font-size:64px; }
  .nl-chapo{ max-width:56ch; }
  .nl-intro__perso{ width:200px; margin:0 auto 24px; align-self:center; }

  .nl-vitrine{ padding:24px 0; }
  .nl-scene{
    position:relative; left:auto; bottom:auto; transform:none;
    margin-inline:auto; max-width:520px; aspect-ratio:390 / 440;
  }
  .nl-scene__levres{ left:4.6%; top:5.9%; width:20.5%; }
  .nl-scene__couv{ right:8.7%; top:10%; width:46%; border-radius:6px; }
  .nl-scene__pastille{ left:19%; right:auto; top:20.9%; width:28.7%; }
  .nl-scene__pastille span{ font-size:4.1cqw; }
  .nl-scene__sauts{ left:4.1%; bottom:4.5%; width:64%; }
  .nl-scene__puduk{ right:4.6%; bottom:6.4%; width:30.8%; }
  .nl-scene__fleurs{ display:none; }

  .nl-contenu{ padding:40px 280px 44px 48px; }
  .nl-liste{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:26px 28px; }
  .nl-contenu__perso{ width:240px; right:20px; }
}

/* ==========================================================================
   Smartphone (≤ 680px)
   ========================================================================== */
@media (max-width:680px){
  .nl-intro{ padding:26px 24px 0; gap:22px; }
  .nl-intro__logo img{ width:118px; }
  .nl-accroche{ font-size:21px; }
  .nl-titre{ font-size:clamp(36px, 11.8vw, 46px); }
  .nl-chapo{ margin-top:12px; font-size:15px; line-height:1.55; }

  .nl-form__ligne--duo,
  .nl-form__ligne--envoi{ grid-template-columns:1fr; }
  .nl-champ{ font-size:16px; } /* 16px mini : évite le zoom auto sur iOS */
  .nl-btn{ width:100%; padding:16px; margin-top:4px; }
  .nl-merci{ border-radius:22px; padding:22px 24px; }
  .nl-merci p{ font-size:17px; }

  .nl-intro__perso{ width:190px; margin:-6px auto 20px; }

  .nl-vitrine{ padding:0; }
  .nl-scene{ max-width:none; }

  .nl-contenu{ padding:34px 24px 0; display:flex; flex-direction:column; }
  .nl-contenu__titre{ font-size:32px; margin-bottom:18px; }
  .nl-liste{ gap:22px 18px; }
  .nl-item{ gap:10px; padding-top:14px; }
  .nl-item svg{ width:26px; height:26px; }
  .nl-item h3{ font-size:15px; }
  .nl-contenu__perso{ position:static; width:250px; margin:26px auto 0; }
}

@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; }
}