/* ==============================
   Thème Le Roi des Forêts — Base
   ============================== */
:root{
  --brand:        #0a5c2d; /* vert principal */
  --brand2:       #0f7a3a; /* vert secondaire */
  --brand-mid:    #0f7a3a; /* footer */
  --brand-dark:   #0a5c2d; /* titres / sections sombres */
  --bg:           #f7fff9;
  --text:         #1b1b1b;

  /* Teintes utilitaires */
  --mint-200:     #d7f5e5;
  --ink-900:      #0e1216;
  --white:        #ffffff;

  /* UI tokens */
  --surface:      #ffffff;
  --border:       #e6e6e6;
  --border-soft:  #eee;
  --muted:        #666;
  --radius:       14px;
  --radius-lg:    16px;

  --shadow-1:     0 2px 14px rgba(0,0,0,.03);
  --shadow-2:     0 4px 18px rgba(0,0,0,.04);
  --shadow-3:     0 8px 28px rgba(0,0,0,.06);
  --shadow-btn:   0 6px 18px rgba(10,92,45,.18);
}

/* ==============================
   Reset / Typographie
   ============================== */
/* global safe */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ max-width:100%; overflow-x:hidden; height: 100%; }
* { box-sizing: border-box; }
body{
  margin:0;
  font-family: system-ui, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}
img { max-width: 100%; height: auto; display: block; }
hr{border:0;border-top:1px solid var(--border-soft);margin:16px 0}

header,footer{padding:16px 24px;background:var(--surface);border-bottom:1px solid var(--border)}
.container{ max-width:1100px; margin:0 auto; padding-inline:16px; }

/* ==============================
   Utilitaires & Formulaires
   ============================== */
.hidden{display:none !important}
.muted{color:#fff} /* utilisé sur fond sombre dans le hero */
.success{color:var(--brand)}
.error{color:#b00020}

.grid{display:grid;gap:12px}
.grid-2{grid-template-columns:1fr 1fr;min-width:0}
@media (max-width:800px){ .grid-2{grid-template-columns:1fr} }

label{display:block;margin:6px 0 6px;font-weight:600}
input, select, textarea{
  width:100%; padding:10px 12px; border:1px solid #e1e1e1; border-radius:10px; background:#fff;
  font:inherit; max-width:100%;
}
input:focus, select:focus, textarea:focus{
  outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(10,92,45,0.12)
}

/* ==============================
   Boutons
   ============================== */
.btn{
  background:var(--brand);
  color:#fff;
  border:none;
  padding:10px 16px;
  border-radius:999px;
  cursor:pointer;
  font-weight:600;
  text-decoration:none;
  display:inline-block;
  box-shadow:var(--shadow-btn);
  transition:transform .08s ease, box-shadow .2s ease, background .2s ease;
}
.btn:hover{ background:var(--brand2); transform:translateY(-1px); box-shadow:0 10px 24px rgba(15,122,58,.22); }
.btn:active{ transform:translateY(0); }
.btn.secondary{ background:#eee; color:#333; }
.btn.secondary:hover{ background:#e5e5e5; }
.btn.xl{ font-size:18px; padding:14px 22px }

/* ==============================
   Cartes
   ============================== */
.card{
  background:var(--surface);
  border:1px solid var(--border-soft);
  border-radius:var(--radius-lg);
  padding:16px;
  margin:12px 0;
  box-shadow:var(--shadow-1);
  width:100%; 
  overflow:hidden;
}

/* ==============================
   Header / Nav
   ============================== */
header .container {
  display:flex; justify-content:space-between; align-items:stretch;
  min-height:80px; padding:0;
}
.header-left, .header-right { display:flex; align-items:center; }
.header-left { padding: 2px 24px; }
.header-right { padding: 12px 24px; }
header .brand-logo { display:flex; height:100%; align-items:center; }
header .brand-logo img { height:76px; width:auto; }

nav { display:flex; align-items:center; gap:24px; }
nav a { color:#333; text-decoration:none; font-weight:500; }
nav a:hover { color:var(--brand); }

/* Header moderne sticky + nav hamburger */
.site-header{
  position: sticky; top:0; z-index:1000;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.header-bar{ display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:64px; }
.site-nav{ display:flex; gap:1rem; align-items:center; }
.site-nav a{ text-decoration:none; color:#111; padding:.5rem .75rem; border-radius:.5rem; }
.site-nav a:hover{ background:rgba(10,92,45,.08); }

.hamburger{
  display:none; width:44px; height:44px; border:0; background:transparent; padding:0;
  position:relative; border-radius:10px; cursor:pointer;
}
.hamburger:focus-visible{ outline:2px solid var(--brand2); outline-offset:2px; }
.hamburger span{
  position:absolute; left:10px; right:10px; height:2px; background:#111;
  transition:transform .25s ease, opacity .2s ease, top .25s ease;
}
.hamburger span:nth-child(1){ top:14px; }
.hamburger span:nth-child(2){ top:21px; }
.hamburger span:nth-child(3){ top:28px; }
.hamburger.is-open span:nth-child(1){ top:21px; transform:rotate(45deg); }
.hamburger.is-open span:nth-child(2){ opacity:0; }
.hamburger.is-open span:nth-child(3){ top:21px; transform:rotate(-45deg); }

@media (max-width: 860px){
  .hamburger{ display:block; }
  .site-nav{
    position: fixed; inset:64px 0 auto 0;
    display:flex; flex-direction:column; gap:0;
    transform: translateY(-16px); opacity:0; pointer-events:none;
    background: rgba(255,255,255,.98);
    border-bottom:1px solid rgba(0,0,0,.06);
    transition: transform .28s ease, opacity .28s ease;
  }
  .site-nav a{ padding:1rem 1.25rem; border-radius:0; border-top:1px solid rgba(0,0,0,.04); }
  .site-nav.is-open{ transform:none; opacity:1; pointer-events:auto; }
}

/* ==============================
   Hero moderne
   ============================== */
.hero-modern{
  position:relative; overflow:hidden; color:#fff;
  background:
    radial-gradient(1100px 550px at 85% -10%, rgba(215,245,229,.35) 0%, transparent 55%),
    linear-gradient(135deg, rgba(10,92,45,0.75), rgba(15,122,58,0.45)),
    url('/assets/img/forest.jpg') center/cover no-repeat;
}
.hero-modern .hero-wrap{
  display:grid; grid-template-columns:1.2fr 0.8fr; gap:28px; align-items:center; min-height:60vh;
}
.hero-modern .hero-text h1{ font-size:clamp(28px,4vw,44px); margin:0 0 8px }
.hero-modern .hero-text .lead{ font-size:clamp(16px,2.2vw,20px); margin:0 0 16px; color:#f1fff6 }
.hero-modern .hero-brand img{ width:min(320px,80%); height:auto; margin:0 auto; filter:drop-shadow(0 10px 30px rgba(0,0,0,.35)) }

.hero-modern .hero-cta{
  display:flex; gap:12px; margin:16px 0; flex-wrap:wrap;
  justify-content:flex-start; align-items:center; /* desktop: aligné à gauche */
}
.hero-modern .hero-cta .btn{ max-width:100%; }

@media (max-width: 900px){
  .hero-modern .hero-wrap{ grid-template-columns:1fr; text-align:center }
  .hero-modern .hero-brand img{ margin-top:8px }
}
@media (max-width: 520px){
  .hero-modern .hero-cta{
    flex-direction:column; align-items:stretch; justify-content:center; gap:12px; min-width:0;
  }
  .hero-modern .hero-cta .btn.xl{ width:100%; max-width:100%; white-space:normal; }
}

/* ==============================
   Contenu / Infos
   ============================== */
.content-modern{ padding:40px 24px }
.content-modern h2{ font-size:clamp(22px,3vw,30px); margin:0 0 10px; color:var(--brand-dark) }
.content-modern h3{ margin:24px 0 8px; color:#2e2c2f }
.content-modern p{ margin:0 0 12px }

.content-modern .cta-panel{
  display:flex; gap:16px; align-items:center; background:#f7fff9; border:1px solid #e6efe8;
  padding:16px; border-radius:var(--radius-lg); margin:20px 0;
}
.content-modern .cta-panel a.btn{ white-space:nowrap }
@media (max-width: 800px){ .content-modern .cta-panel{ flex-direction:column; align-items:flex-start } }

.info-modern{ background: var(--brand-dark); color:#fff; padding:28px 0 }
.info-modern .info-grid2{ display:grid; align-items:start; grid-template-columns:1.2fr 1fr 0.8fr; gap:24px }
.info-modern a{ color:#d2ffe9 }
.info-modern .brand-col{ align-self:center }
.info-modern .brand-col img{ max-width:220px; width:100%; height:auto; display:block; margin-left:auto }
@media (max-width: 900px){
  .info-modern .info-grid2{ grid-template-columns:1fr; gap:12px }
  .info-modern .brand-col img{ margin:0 auto }
}

/* ==============================
   Stepper / Wizard
   ============================== */
.stepper{
  display:grid;
  grid-template-columns: repeat(5, minmax(0,1fr)); /* desktop */
  gap:8px;
  list-style:none;
  padding:8px 0;
  margin:0 0 12px;
  counter-reset: step;            /* ✅ numérotation */
}

/* ÉLÉMENTS */
.stepper li{
  position: relative;             /* ✅ pour le ::before */
  min-width: 0;                   /* évite le débordement des longs libellés */
  text-align:center;
  padding:.55rem .75rem .55rem 44px; /* ✅ place pour la pastille numérotée */
  border-radius:999px;
  background:#eef4f1;
  white-space:normal;
  overflow:hidden;                /* au cas où */
}

/* PASTILLE NUMÉROTÉE */
.stepper li::before{
  counter-increment: step;
  content: counter(step);
  position:absolute;
  left:8px; top:50%;
  transform:translateY(-50%);
  width:24px; height:24px;
  border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:#eee;
  font-weight:700; color:#333;
}

/* ÉTATS */
.stepper li.active{ border:1px solid var(--brand); box-shadow:0 0 0 3px rgba(10,92,45,0.1); }
.stepper li.active::before{ background:var(--brand); color:#fff; }
.stepper li.done{ opacity:0.7; }

/* RESPONSIVE */
@media (max-width:860px){
  .stepper{ grid-template-columns: 1fr 1fr; } /* 2 colonnes */
}
@media (max-width:480px){
  .stepper{ grid-template-columns: 1fr; }     /* 1 colonne */
}


/* ton formulaire */
.wizard-modern{ width:100%; max-width:760px; margin-inline:auto; }
@media (max-width:860px){
  .container{ padding-inline:12px; }
  .wizard-modern{ padding:16px; }
}
.wizard-modern .wizard-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.wizard-modern .card{margin:10px 0}
.wizard-modern section > h2{margin-top:0}

/* ==============================
   Options / Cases
   ============================== */
.stand-option{ display:inline-flex; align-items:center; gap:8px; white-space:nowrap; line-height:1.2; }
.stand-option input[type="checkbox"]{ margin:0; width:18px; height:18px; }

/* ==============================
   Récapitulatif commande
   ============================== */
.recap { padding: 12px; }
.recap h3 { margin: 0 0 8px; font-size: 1.25rem; }
.recap h4 { margin: 16px 0 6px; font-size: 1rem; color: #444; }
.recap-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.recap-table th, .recap-table td { padding: 8px 6px; border-bottom: 1px solid var(--border-soft); vertical-align: top; }
.recap-table th { text-align: left; color: var(--muted); font-weight: 600; }
.recap-table th.qty, .recap-table th.unit, .recap-table th.total { text-align: right; color: var(--muted); font-weight: 600; }
.recap-table td.qty, .recap-table td.unit, .recap-table td.total { text-align: right; white-space: nowrap; }
.recap-note { color: var(--muted); font-size: .9rem; }
.recap-totals { margin-top: 10px; }
.recap-totals .row { display: flex; justify-content: space-between; padding: 6px 0; }
.recap-totals .row span:first-child { color: #444; }
.recap-totals .grand { border-top: 2px solid #111; margin-top: 6px; padding-top: 10px; font-weight: 700; font-size: 1.05rem; }
.recap-meta { display: grid; grid-template-columns: 1fr; gap: 4px; font-size: .95rem; }
.recap-meta strong { color: #333; }

/* ==============================
   Animations on-scroll
   ============================== */
@media (prefers-reduced-motion: no-preference){
  [data-animate]{
    opacity:0; transform:translateY(14px);
    transition: opacity var(--dur,2.1s) ease, transform var(--dur,1.2s) ease;
    transition-delay: var(--delay, 0s);
    will-change: opacity, transform;
  }
  [data-animate].in{ opacity:1; transform:none; }
  [data-animate="fade-in"]{ transform:none; }
  [data-animate="slide-right"]{ transform:translateX(-16px); }
  [data-animate="slide-right"].in{ transform:none; }

  /* Tokens (split) */
  [data-split] .token{
    display:inline-block;
    opacity:0;
    transform: translateY(8px);
    transition: opacity var(--dur,1s) ease, transform var(--dur,1s) ease;
    transition-delay: calc(var(--i, 0) * var(--stagger, 40ms));
    will-change: opacity, transform;
  }
  [data-split].in .token{ opacity:1; transform:none; }
}

/* ==============================
   Cartes Sapins
   ============================== */
.tree-cards {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin: 1rem 0 1.25rem;
}
.tree-card {
  display: grid;
  grid-template-rows: auto 1fr;
  background: linear-gradient(180deg, #ffffff, #fbfbfb);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-2);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.tree-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-3); border-color: var(--border); }
.tree-card img { width: 100%; aspect-ratio: 3/2; object-fit: cover; }
.tree-card-body{ display:flex; flex-direction:column; flex:1 1 auto; min-height:0; padding:1.25rem; }
.tree-card-body .chips{ margin-top:auto; }
.tree-card h3 { margin: 0 0 .25rem; font-size: 1.15rem; line-height: 1.2; }
.tree-card .features { margin: .5rem 0 .75rem; padding-left: 1.1rem; display: grid; gap: .25rem; }

.chips { display:flex; flex-wrap:wrap; gap:.5rem; align-items:flex-end; }
.chip {
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.25rem .6rem; border-radius:999px;
  border:1px solid var(--border-soft); background:#f7f7f7; font-size:.85rem; white-space:nowrap;
}
.chip.link {
  background: #0f172a; color: #fff; border-color: #0f172a; text-decoration: none;
}
.chip.link:hover { opacity:.92; }

/* Lift léger pour cohérence */
.grid .slot { background:#fff; box-shadow: inset 0 0 0 1px var(--border-soft); transition: box-shadow .2s ease, transform .2s ease; }
.grid .slot:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.05), inset 0 0 0 1px #e8e8e8; }

/* Options repliées par défaut */
.tree-options.is-collapsed { display: none; }

/* Surlignage visuel temporaire */
@keyframes hiPulse { 
  from { box-shadow: 0 0 0 0 rgba(16, 185, 129, .35); } 
  to   { box-shadow: 0 0 0 12px rgba(16, 185, 129, 0); } 
}
.hi-pulse { animation: hiPulse .9s ease-out 2; border-radius: 10px; }

/* ==============================
   Grilles Pick-up / Delivery + Select
   ============================== */
#pickup-grid.grid,
#delivery-grid.grid{
  gap:1rem; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); align-items:stretch;
}

.slot-pick, .slot-del{
  display:flex; flex-direction:column; gap:.5rem;
  border:1px solid var(--border-soft); border-radius:var(--radius);
  padding:1rem; background:linear-gradient(180deg,#ffffff,#fbfefb);
  box-shadow:0 2px 12px rgba(0,0,0,.03);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  overflow:hidden;
}
.slot-del{ background:linear-gradient(180deg,#ffffff,#fbfbff); }

.slot-pick:hover, .slot-del:hover{ transform:translateY(-1px); box-shadow:var(--shadow-3); border-color:#eaeaea; }
.slot-pick h3, .slot-del h3 { margin:0 0 .25rem; font-size:1.1rem; line-height:1.25; }
.slot-pick .time, .slot-del .time { font-weight:600; }

.slot-pick .meta, .slot-del .meta{
  margin-top:auto; display:flex; flex-wrap:wrap; gap:.5rem; align-items:center;
}
.slot-pick .chip, .slot-del .chip{
  display:inline-flex; align-items:center; padding:.25rem .6rem; border-radius:999px;
  border:1px solid var(--border-soft); background:#f7faf7; font-size:.85rem; line-height:1.25; max-width:100%;
  white-space:normal; word-break:break-word;
}
.slot-del .chip{ background:#f7f7ff; }
.slot-pick .chip.alt, .slot-del .chip.alt{ background:#eef0ff; border-color:#e1e4ff; }

#delivery-grid > .slot-del { scroll-margin-top: calc(var(--header-h,64px) + 12px); }

.localities-bar { margin:.75rem 0 1.25rem; }
#locality-select{
  width:100%; font-size:1.15rem; line-height:1.3;
  padding:.9rem 1rem; border:1px solid var(--border-soft); border-radius:var(--radius);
  background:#fff; box-shadow: inset 0 1px 0 #f7f7f7;
}
#locality-select:focus{ outline:none; border-color:#cbd5e1; box-shadow:0 0 0 3px rgba(59,130,246,.15); }
.subtle-note{ color:#475569; margin:.25rem 0 1rem; }

/* ==============================
   Galerie
   ============================== */
.gallery-modern { margin-block: 56px 72px; }
.gallery-modern h2 { margin-bottom: 16px; }

.gallery-grid {
  --gap: 12px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gap);
}
.g-item { display:flex; flex-direction:column; }
.g-item a { display:block; border-radius: var(--radius); overflow: hidden; }
.g-item img { width:100%; display:block; transform: translateZ(0); }
.g-item figcaption { margin-top: 8px; font-size: .95rem; color: #8aa; }

.g-span-6 { grid-column: span 6; }
.g-span-7 { grid-column: span 7; }
.g-span-5 { grid-column: span 5; }

@media (max-width: 860px){
  .g-span-6, .g-span-7, .g-span-5 { grid-column: 1 / -1; }
}

.g-item a img { transition: transform .35s ease; }
.g-item a:hover img { transform: scale(1.03); }

/* ==============================
   Figures éditoriales + Lede
   ============================== */
.content-modern .figure{ margin: 1rem 0 1.25rem; }
.content-modern .figure img{ width:100%; border-radius: var(--radius); }
.content-modern .figure figcaption{ font-size:.92rem; color:#8aa; margin-top:.4rem; }

.content-modern::after { content:""; display:block; clear:both; }

/* Image 46% + texte qui s'enroule (desktop), full (mobile) */
@media (min-width: 861px){
  .content-modern .figure-left  { float:left;  width:46%; margin:.25rem 1.25rem 1rem 0; }
  .content-modern .figure-right { float:right; width:46%; margin:.25rem 0 1rem 1.25rem; }
}
@media (max-width: 860px){
  .content-modern .figure-left,
  .content-modern .figure-right { float:none; width:100%; margin:.75rem 0 1rem 0; }
}

.content-modern h3, .content-modern .cta-panel { clear: both; }

/* Lede (texte + image côte à côte) */
.content-modern .lede{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(280px,0.9fr);
  gap:clamp(16px,3vw,32px);
  align-items:start;
  margin:clamp(28px,1vw,12px) 0 clamp(28px,4vw,48px);
}
.content-modern .lede--alt{
  grid-template-columns:minmax(280px,0.9fr) minmax(0,1.1fr);
}
.content-modern .lede-text>:first-child{margin-top:0}
.content-modern .lede-figure{margin:0}
.content-modern .lede-figure img{
  width:100%;
  height:clamp(220px,36vw,380px);
  object-fit:cover;
  border-radius:var(--radius-lg);
  display:block;
}
.content-modern .lede-figure figcaption{ font-size:.92rem; color:#8aa; margin-top:.45rem; }

@media (max-width: 860px){
  .content-modern .lede,
  .content-modern .lede--alt{ grid-template-columns:1fr; }
  .content-modern .lede-figure img{ height:auto; }
}

/* ==============================
   Footer
   ============================== */
footer .footer-top{ background: var(--brand-mid); color:#f2f2f2; padding:14px 0 }
.socials{ display:flex; gap:12px; margin-top:8px }
.socials a{
  display:inline-flex; width:32px; height:32px; border:1px solid #f2f2f2; border-radius:50%;
  align-items:center; justify-content:center; text-decoration:none;
}

/* ==============================
   Legacy sections (si encore utilisées)
   ============================== */
.hero-grid{ display:grid; grid-template-columns:1fr 1fr 2fr 1fr 1fr; min-height:520px; }
.hero-cell{ min-height:120px; }
.hero-img-left{ background:url('/assets/img/header2.jpg') center/cover no-repeat; padding:150px 30px 30px; }
.hero-center{ background:#fcfcfc; padding:80px 60px; }
.hero-side{ padding:30px; }
.hero-center h1{ margin-top:0; font-size:38px; color:var(--brand-dark); }
.subheading{ font-size:15px; color:#444; margin-top:6px }
.cta-wrap{ display:flex; gap:12px; flex-wrap:wrap; margin:14px 0 }

.info-grid{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  min-height:100px;
}
.info-cell{ padding:20px; color:#f2f2f2 }
.info-dark{ background: var(--brand-dark); }
.info-mid{ background: var(--brand-mid); }
.info-img{ background:url('/assets/img/forest.jpg') center/cover no-repeat; }
.info-cell a{ color:#f2f2f2; }

/* Consent line — responsive */
.consent-line{
  display:flex;
  align-items:flex-start;     /* meilleur alignement quand ça wrap */
  gap:.5rem;
  flex-wrap:wrap;             /* autorise le retour à la ligne */
  margin-top:.5rem;
}
.consent-line input{
  margin-top:.2rem;           /* aligne la case à cocher avec le texte */
  flex:0 0 auto;
}
.consent-line .text{
  line-height:1.4;
  min-width:0;                /* évite les débordements dans des conteneurs étroits */
  word-break:normal;
  overflow-wrap:anywhere;     /* si un mot très long apparaît, il pourra couper proprement */
}

/* Sur très petits écrans, force en colonne pour plus d’air */
@media (max-width: 360px){
  .consent-line{
    flex-direction:column;
    align-items:flex-start;
    gap:.25rem;
  }
}
/* Inline errors */
.field-error { color: #b00020; margin-top: 4px; display: block; }
.invalid { outline: 2px solid #b00020; outline-offset: 2px; border-color: #b00020 !important; }

/* Consent line — mobile-friendly */
.consent-line{
  display: grid;
  grid-template-columns: 20px 1fr; /* case | texte */
  align-items: start;              /* aligne en haut, évite le décalage */
  gap: .6rem;
  width: 100%;
  padding-block: .25rem;           /* plus facile à cliquer */
}

.consent-line input{
  width: 20px;
  height: 20px;
  margin: .15rem 0 0;              /* petit décalage pour aligner optiquement */
  accent-color: var(--brand, #0a5c2d);
  vertical-align: top;             /* iOS/Safari fix */
  flex: 0 0 auto;
}

.consent-line .text{
  line-height: 1.4;
  min-width: 0;
  overflow-wrap: anywhere;         /* casse propre si nécessaire */
}

/* Lien lisible + cohérent visité/non-visité */
.consent-line a,
.consent-line a:visited{
  color: var(--brand2, #0f7a3a);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Très petits écrans */
@media (max-width: 360px){
  .consent-line{
    grid-template-columns: 18px 1fr;
    gap: .5rem;
  }
  .consent-line input{
    width: 18px; height: 18px; margin-top: .2rem;
  }
}

/* Si tu utilises un style d'erreur .invalid sur l'input */
.consent-line input.invalid{
  outline: 2px solid #b00020;
  outline-offset: 2px;
}