/* ============================================================
   Système de design — boutique, funnel, validation, backoffice.
   Registre chaud : le produit est un cadeau émotionnel, pas un
   SaaS. Fond crème chaud, encre aubergine, rouge brique pour
   l'action, or pour les avis.
   ============================================================ */
:root{
  --cream:#fdf8f1;
  --cream-2:#f7efe4;
  --paper:#ffffff;
  --ink:#231a22;
  --ink-2:#4a3c46;
  --muted:#6f6169;
  --faint:#a2949c;
  --line:#eadfd2;
  --line-2:#ddcdbb;

  --brick:#c1402a;
  --brick-hi:#a53420;
  --brick-soft:#fbeae5;
  --brick-clair:#d4634c;
  --gold:#b5811c;
  --gold-soft:#fbf1dc;
  --deep:#3a2030;
  --green:#2f6a4c;
  --green-soft:#e6f0ea;

  --sans:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,system-ui,"Segoe UI",Roboto,Arial,sans-serif;
  --serif:ui-serif,"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;

  /* alias utilisés par le backoffice — registre neutre, même palette */
  --wash:var(--cream);
  --wash-2:var(--cream-2);
  --accent:var(--green);
  --accent-soft:var(--green-soft);
  --warn:var(--gold);
  --warn-soft:var(--gold-soft);
  --danger:var(--brick);
  --danger-soft:var(--brick-soft);

  --r:16px;
  --r-sm:11px;
  --shadow:0 1px 2px rgba(35,26,34,.05),0 8px 24px -12px rgba(35,26,34,.14);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;}
:focus-visible{outline:2px solid var(--brick);outline-offset:2px;}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important;}}

/* ---------- typographie ---------- */
.display{
  font-family:var(--serif);font-weight:400;
  letter-spacing:-.02em;line-height:1.08;text-wrap:balance;
}
.eyebrow{
  font-size:11.5px;font-weight:650;letter-spacing:.13em;text-transform:uppercase;
  color:var(--brick);margin:0 0 14px;
}

/* ---------- primitives ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  appearance:none;border:0;border-radius:99px;
  background:var(--brick);color:#fff;text-decoration:none;
  font:inherit;font-size:16px;font-weight:650;letter-spacing:-.005em;
  padding:16px 30px;cursor:pointer;
  transition:background .15s,transform .08s;
}
.btn:hover{background:var(--brick-hi);}
.btn:active{transform:scale(.99);}
.btn[disabled]{opacity:.3;cursor:not-allowed;}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line-2);font-weight:600;}
.btn-ghost:hover{background:var(--cream-2);}
.btn-ink{background:var(--ink);}
.btn-ink:hover{background:var(--ink-2);}
.btn-sm{padding:10px 18px;font-size:14px;}
.btn-block{width:100%;}

input[type=text],input[type=email],input[type=search],textarea,select{
  width:100%;font:inherit;font-size:16px;color:var(--ink);
  background:var(--paper);border:1.5px solid var(--line-2);border-radius:var(--r-sm);
  padding:14px 15px;transition:border-color .15s,box-shadow .15s;
}
input:focus,textarea:focus,select:focus{
  outline:none;border-color:var(--brick);box-shadow:0 0 0 3px var(--brick-soft);
}
textarea{resize:vertical;line-height:1.65;}
label .lab{display:block;font-size:13.5px;font-weight:600;color:var(--ink-2);margin-bottom:8px;}
.field{margin-bottom:20px;}
.hint{font-size:12.5px;color:var(--faint);margin-top:8px;}

.tag{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11.5px;font-weight:650;letter-spacing:.05em;text-transform:uppercase;
  padding:6px 11px;border-radius:99px;background:var(--cream-2);color:var(--muted);white-space:nowrap;
}
.tag-brick,.tag-danger{background:var(--brick-soft);color:var(--brick);}
.tag-gold,.tag-warn{background:var(--gold-soft);color:var(--gold);}
.tag-green,.tag-accent{background:var(--green-soft);color:var(--green);}
.tag-ink{background:var(--ink);color:#fff;}
.btn-accent{background:var(--green);}
.btn-accent:hover{background:#255440;}

.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;}
.stars{color:var(--gold);letter-spacing:.08em;font-size:14px;}

.wrap{max-width:1120px;margin:0 auto;padding:0 22px;}
.narrow{max-width:720px;margin:0 auto;padding:0 22px;}

/* ============================================================
   Pied de page — partagé par toutes les pages publiques,
   injecté par le serveur à la place de {{FOOTER}}.
   ============================================================ */
.foot{background:var(--ink);color:rgba(255,255,255,.62);padding:52px 0 36px;font-size:14px;}
.foot a{text-decoration:none;color:inherit;}
.foot a:hover{color:#fff;}
.footgrid{display:grid;grid-template-columns:1fr;gap:32px;margin-bottom:36px;}
@media(min-width:760px){.footgrid{grid-template-columns:2fr 1fr 1fr 1fr;gap:28px;}}
.foot h4{color:#fff;font-size:12px;letter-spacing:.09em;text-transform:uppercase;margin:0 0 16px;font-weight:650;}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.footbrand{font-family:var(--serif);font-size:21px;color:#fff;display:block;margin-bottom:12px;letter-spacing:-.02em;}
.footbrand i{color:#e8a08c;font-style:normal;}
.footpitch{max-width:34ch;margin:0 0 18px;line-height:1.6;}
.footmail{display:inline-block;color:#fff;border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:2px;}
.footfine{
  border-top:1px solid rgba(255,255,255,.13);padding-top:24px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:12.5px;color:rgba(255,255,255,.42);
}

/* ---------- lettre d'information ---------- */
.footnl{
  display:grid;gap:20px;padding:0 0 36px;margin-bottom:36px;
  border-bottom:1px solid rgba(255,255,255,.13);
}
@media(min-width:760px){
  .footnl{grid-template-columns:1fr auto;align-items:center;gap:40px;}
}
.footnl h3{font-family:var(--serif);font-size:22px;color:#fff;margin:0 0 6px;font-weight:400;}
.footnl p{margin:0;max-width:44ch;line-height:1.55;}
/* Un champ email court fait tronqué : une adresse fait 25 à 30
   caractères et doit tenir en entier sous les yeux de qui la tape. */
.nlform{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;
  width:min(100%,520px);}
@media(min-width:760px){.nlform{min-width:480px;}}
/* Sur téléphone, champ et bouton côte à côte laissaient 170 px pour
   une adresse — on ne voyait pas ce qu'on tapait. Le bouton passe
   dessous, le champ prend toute la largeur. */
@media(max-width:560px){.nlform{grid-template-columns:1fr;}
  .nlform .btn{width:100%;justify-content:center;}}
.nlform input{
  font:inherit;padding:14px 18px;border-radius:999px;
  border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);color:#fff;
  min-width:0;
}
.nlform input::placeholder{color:rgba(255,255,255,.45);}
.nlform input:focus{outline:2px solid var(--brick);outline-offset:1px;border-color:transparent;}
.nlform .btn{white-space:nowrap;}
/* Le message occupe les deux colonnes : sinon il pousse le bouton. */
.nlmsg{grid-column:1/-1;margin:0;font-size:13.5px;min-height:0;}
.nlmsg.ok{color:#9fe6b8;}
.nlmsg.ko{color:#f4a99a;}

/* ---------- moyens de paiement ---------- */
.footpay{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;
  padding:22px 0 4px;border-top:1px solid rgba(255,255,255,.13);
}
.paylabel{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.5);}
.paies{display:flex;flex-wrap:wrap;gap:8px;}
/* Les marques officielles, servies depuis le site : un logo dessiné à
   la main se reconnaît tout de suite comme faux, et c'est justement le
   bloc censé rassurer. Toutes les images font 38x24 — même cadrage,
   donc alignement acquis sans retouche.

   Nommée `paylogo` et pas `pay` : `body.pay` existe déjà dans le
   tunnel pour élargir l'étape de paiement. Une règle `.pay` avec une
   largeur fixe ramenait le <body> entier à 38 px. */
.paylogo{
  /* Chaque logo officiel porte déjà sa propre carte, avec son fond et
     ses coins. Le fond blanc que j'avais ajouté dessous dépassait aux
     angles de ceux qui ont un fond sombre — Amex, Apple Pay — et
     donnait ces coins blancs qui font bricolé. */
  height:26px;width:41px;display:block;
}

/* La date de livraison sous le bouton. Discrète : c'est une précision
   rassurante, pas une alarme. Le point brique la rattache à la marque. */
.livraison{
  display:flex; align-items:center; gap:.5em;
  margin:.85rem 0 0; font-size:.94rem; color:var(--muted);
}
/* L'icône a remplacé la pastille : un rond seul ne disait rien, et
   quand le texte manquait il restait tout seul au milieu de la page. */
.livicon{width:17px; height:17px; color:var(--brick); flex:none;}
.livraison b{color:var(--ink); font-weight:600;}

/* Le calendrier de la boîte prix. Trois dates réelles, la dernière
   soulignée en brique : c'est celle qu'on vient chercher. Le filet
   vertical relie les étapes pour qu'on lise une suite, pas une liste. */
.calsi{
  margin:16px 0 10px; font-size:12.5px; letter-spacing:.04em;
  text-transform:uppercase; color:rgba(255,255,255,.55);
}
.cal{list-style:none; margin:0 0 20px; padding:0; text-align:left;}
.cal li{
  position:relative; padding:0 0 13px 22px;
  border-left:1px solid rgba(255,255,255,.16);
}
.cal li:last-child{border-left-color:transparent; padding-bottom:0;}
.cal li::before{
  content:""; position:absolute; left:-4.5px; top:6px;
  width:8px; height:8px; border-radius:50%;
  background:rgba(255,255,255,.32);
}
.cal li.fin::before{background:var(--brick); box-shadow:0 0 0 4px rgba(193,64,42,.22);}
.cal b{
  display:block; font-weight:600; font-size:15px; line-height:1.3;
  color:#fff; text-transform:capitalize;
}
/* Pas var(--brick-soft) : ce jeton existe déjà pour les fonds pâles et
   rendait la date presque blanche sur la boîte sombre. */
.cal li.fin b{color:#f0a892;}
.cal span{display:block; font-size:13px; line-height:1.4; color:rgba(255,255,255,.6);}

/* La vidéo karaoké sur la page de suivi : même largeur que le lecteur,
   coins arrondis comme les autres blocs. */
.karadl{
  display:block; width:100%; max-width:420px; border-radius:var(--r-sm);
  background:#000; margin:0 0 16px;
}

/* Les deux voies de la pochette, côte à côte avant la grille de styles.
   Purement explicatif : le choix réel se fait en cliquant un style. */
.voies{display:grid;grid-template-columns:1fr;gap:10px;margin:0 0 18px;}
@media(min-width:560px){.voies{grid-template-columns:1fr 1fr;gap:14px;}}
.voie{
  border:1px solid var(--line); border-radius:var(--r-sm);
  padding:13px 15px; background:#fff;
}
.voie b{display:block;font-size:14.5px;color:var(--ink);}
.voie span{display:block;font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.45;}

/* La voie retenue. Les deux encadrés sont devenus le choix lui-même :
   il faut donc qu'on voie lequel est actif. */
.voie{cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s;}
.voie:hover{border-color:var(--brick);}
.voie:focus-visible{outline:2px solid var(--brick);outline-offset:2px;}
.voie.on{
  border-color:var(--brick); background:#fff;
  box-shadow:0 0 0 3px var(--brick-soft);
}
.voie.on b{color:var(--brick);}

/* Le choix de la chanson de démonstration. Six pochettes en ligne, celle
   qui joue est cerclée de brique. Ça défile horizontalement sur mobile
   plutôt que de se replier : on garde une seule rangée, lisible. */
/* Une grille, pas un défilement horizontal. La rangée qui défilait
   débordait des marges et poussait la page entière en largeur : sur
   téléphone on se retrouvait dézoomé. Trois par ligne sur petit écran,
   six en une ligne sur grand. Aucun débordement possible. */
.choixson{
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:14px 10px; margin:0 0 20px; padding:0;
}
@media(min-width:620px){
  .choixson{grid-template-columns:repeat(6, minmax(0, 1fr)); gap:12px;}
}
.chson{
  min-width:0; cursor:pointer; background:none; border:0; padding:0;
  text-align:left; font:inherit;
}
.chson img{
  display:block; width:100%; aspect-ratio:1/1; height:auto; object-fit:cover;
  border-radius:var(--r-sm); border:2px solid transparent;
  transition:border-color .15s, transform .15s;
}
.chson:hover img{transform:translateY(-2px);}
.chson[aria-pressed="true"] img{border-color:var(--brick);}
.chson b{
  display:block; margin-top:7px; font-size:12.5px; font-weight:650;
  color:var(--ink); line-height:1.25;
  /* une seule ligne, coupée proprement : les noms varient de « Emil » à
     « Kari og Jonas » et sans ça les vignettes ne s'alignent plus. */
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.chson span{
  display:block; min-height:1.3em;   /* même hauteur pour toutes les cases */
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-size:11.5px; color:var(--muted); line-height:1.3;
}
.chson[aria-pressed="true"] b{color:var(--brick);}
.chson:focus-visible img{outline:2px solid var(--brick); outline-offset:2px;}