/* Layer Add — styles du tunnel (/verifier /panier /caisse /abonnement).
   Ne redéfinit aucune primitive de base.css : on emploie .contenu .section
   .bouton .carte .titre .sous .corps .petit .etiquette .grille-3 et les jetons. */

/* L'attribut hidden doit primer sur les display de composant ci-dessous. */
[hidden] { display: none !important; }

/* --- Dispositif signature : le calque, posé sur un packshot --------------- */
.tn-calque { position: relative; isolation: isolate; }
.tn-calque > picture, .tn-calque > img { position: relative; z-index: 0; }
.tn-calque::before,
.tn-calque::after {
  content: ""; position: absolute; pointer-events: none;
  mix-blend-mode: multiply; z-index: 1;
}
.tn-calque::before { left: 0; bottom: 0; width: 100%; height: 32%; background: var(--calque-a); }
.tn-calque::after  { left: 0; bottom: 0; width: 30%;  height: 100%; background: var(--calque-b); }

/* =========================================================================
   /verifier — l'outil. Tout tient dans l'écran, sans défiler.
   ========================================================================= */
.tn-verif {
  min-height: calc(100dvh - var(--entete-h, 72px));
  display: flex; flex-direction: column; justify-content: flex-start;
  padding-block: clamp(20px, 3vh, 44px) clamp(22px, 3vw, 46px);
  background:
    radial-gradient(120% 90% at 85% -10%, rgba(77, 225, 232, .10), transparent 60%),
    radial-gradient(90% 80% at -5% 110%, rgba(27, 77, 255, .06), transparent 55%);
}
.tn-verif__wrap { max-width: 960px; margin-inline: auto; width: 100%; text-align: center; }
.tn-verif__tete { margin-bottom: 22px; }
.tn-verif__titre {
  font-size: clamp(30px, 4.6vw, 56px); font-weight: 700;
  line-height: 1.02; letter-spacing: -.02em; margin: 8px 0 10px;
}
.tn-verif__sous { color: var(--gris-1); max-width: 34ch; margin: 0 auto; }

.tn-verif__champ { position: relative; max-width: 620px; margin: 0 auto; text-align: left; }
.tn-verif__loupe {
  position: absolute; left: 20px; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px; fill: var(--gris-1); pointer-events: none;
}
.tn-verif__input {
  width: 100%; box-sizing: border-box;
  padding: 20px 22px 20px 56px; font: inherit; font-size: 19px; font-weight: 500;
  color: var(--encre); background: #fff;
  border: 2px solid var(--encre); border-radius: 14px;
  box-shadow: 0 10px 30px -18px rgba(14, 17, 22, .5);
  outline: none; transition: border-color .15s, box-shadow .15s;
}
.tn-verif__input::placeholder { color: var(--gris-1); font-weight: 400; }
.tn-verif__input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(27, 77, 255, .16), 0 12px 34px -18px rgba(27, 77, 255, .5);
}
.tn-verif__input.est-charge { background-image: linear-gradient(90deg, transparent, rgba(27,77,255,.06)); }

.tn-verif__liste {
  position: absolute; z-index: 30; top: calc(100% + 8px); left: 0; right: 0;
  margin: 0; padding: 6px; list-style: none;
  background: #fff; border: 1px solid var(--gris-2); border-radius: 14px;
  box-shadow: 0 24px 50px -24px rgba(14, 17, 22, .45); max-height: 320px; overflow: auto;
}
.tn-liste__it {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 14px; border-radius: 9px; cursor: pointer;
}
.tn-liste__it.est-actif, .tn-liste__it:hover { background: #f2f5ff; }
.tn-liste__n { font-weight: 600; color: var(--encre); }
.tn-liste__ok, .tn-liste__no {
  font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  white-space: nowrap; padding: 3px 9px; border-radius: 999px;
}
.tn-liste__ok { color: var(--accent); background: rgba(27, 77, 255, .10); }
.tn-liste__no { color: var(--gris-1); background: var(--gris-2); }

.tn-verif__preuves {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
  margin: 16px 0 0; color: var(--gris-1);
}
.tn-verif__preuves span { display: inline-flex; align-items: center; gap: 7px; }
.tn-verif__preuves span::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--succes);
}

/* --- résultat dans l'écran ------------------------------------------------ */
.tn-verif__result { margin-top: 26px; min-height: 4px; }
.tn-verif__result.est-plein { margin-top: 26px; }
.tn-res {
  display: grid; grid-template-columns: 200px 1fr; gap: 26px; align-items: center;
  text-align: left; max-width: 760px; margin: 0 auto;
  background: #fff; border: 1px solid var(--gris-2); border-radius: 18px;
  padding: 20px; box-shadow: 0 18px 44px -26px rgba(14, 17, 22, .4);
  animation: tn-pop .22s ease both;
}
@keyframes tn-pop { from { opacity: 0; transform: translateY(10px); } }
.tn-res--vide { grid-template-columns: 1fr; }
.tn-res__img {
  display: block; border-radius: 12px; overflow: hidden;
  background: var(--gris-2); aspect-ratio: 1;
}
.tn-res__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tn-res__tag { color: var(--accent); }
.tn-res__nom { font-size: clamp(24px, 2.4vw, 32px); margin: 6px 0 4px; }
.tn-res__pour { color: var(--gris-1); margin: 0 0 6px; }
.tn-res__mol { color: var(--encre); }
.tn-res__benef { margin: 0 0 12px; }
.tn-res__prix { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; }
.tn-res__euro { font-size: 30px; font-weight: 700; color: var(--encre); }
.tn-res__prix .petit { color: var(--gris-1); }
.tn-res__actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.tn-res__note { color: var(--gris-1); margin: 12px 0 0; }
.tn-res__ok {
  display: inline-flex; align-items: center; font-weight: 700; color: var(--succes);
  margin-right: 4px;
}

/* =========================================================================
   /panier
   ========================================================================= */
.tn-h1 { margin: 4px 0 24px; }
.tn-panier { display: grid; grid-template-columns: 1fr 340px; gap: 30px; align-items: start; }
.tn-panier__lignes { display: grid; gap: 14px; }

.tn-l {
  display: grid; grid-template-columns: 96px 1fr; gap: 16px;
  background: #fff; border: 1px solid var(--gris-2); border-radius: 14px; padding: 14px;
}
.tn-l__img { width: 96px; height: 96px; border-radius: 10px; overflow: hidden; background: var(--gris-2); }
.tn-l__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tn-l__corps { display: flex; flex-direction: column; }
.tn-l__tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.tn-l__nom { margin: 0; font-size: 20px; }
.tn-l__suppr {
  border: 0; background: none; color: var(--gris-1); font: inherit; font-size: 14px;
  cursor: pointer; padding: 2px 4px; text-decoration: underline; text-underline-offset: 3px;
}
.tn-l__suppr:hover { color: var(--encre); }
.tn-l__benef { color: var(--gris-1); margin: 2px 0 auto; }
.tn-l__bas { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 12px; }
.tn-l__qte { display: inline-flex; align-items: center; border: 1.5px solid var(--gris-2); border-radius: 10px; }
.tn-l__qte button {
  width: 38px; height: 38px; border: 0; background: none; font: inherit; font-size: 20px;
  line-height: 1; color: var(--encre); cursor: pointer; border-radius: 10px;
}
.tn-l__qte button:hover { background: #f2f5ff; color: var(--accent); }
.tn-l__n { min-width: 30px; text-align: center; font-weight: 700; }
.tn-l__prix { text-align: right; display: flex; flex-direction: column; }
.tn-l__u { color: var(--gris-1); }
.tn-l__lt { font-weight: 700; font-size: 19px; }

.tn-panier__cote { display: grid; gap: 14px; position: sticky; top: calc(var(--entete-h, 72px) + 16px); }
.tn-abo {
  display: flex; gap: 12px; align-items: flex-start; padding: 16px; cursor: pointer;
  border: 1.5px solid var(--gris-2);
}
.tn-abo input { margin-top: 3px; width: 20px; height: 20px; accent-color: var(--accent); flex: none; }
.tn-abo__txt { display: flex; flex-direction: column; gap: 3px; }
.tn-abo__txt .petit { color: var(--gris-1); font-weight: 400; }

.tn-recap { padding: 20px; }
.tn-recap__titre { margin: 0 0 12px; }
.tn-recap__ligne { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 0; font-size: 16px; }
.tn-recap__abo span:last-child { color: var(--succes); font-weight: 700; }
.tn-recap__total { border-top: 1.5px solid var(--gris-2); margin-top: 6px; padding-top: 14px; font-size: 21px; font-weight: 700; }
.tn-recap__cta { width: 100%; margin-top: 16px; text-align: center; }
.tn-recap__suite { display: block; text-align: center; margin-top: 12px; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* état vide (panier / caisse) */
.tn-vide {
  text-align: center; max-width: 480px; margin: 40px auto; padding: 40px 20px;
  display: grid; gap: 14px; justify-items: center;
}
.tn-vide .corps { color: var(--gris-1); }
.tn-vide .bouton + .bouton { margin-top: 2px; }

/* =========================================================================
   /caisse
   ========================================================================= */
.tn-caisse { display: grid; grid-template-columns: 1fr 360px; gap: 40px; align-items: start; }
/* panier vide atterri sur la caisse : le bloc occupe toute la largeur et reste en haut,
   plutôt que centré dans la seule colonne de gauche au milieu du blanc. */
.tn-caisse:has(.tn-vide) { display: block; }
.tn-caisse .tn-vide { margin-top: 8px; }
.tn-caisse__form { min-width: 0; }
.tn-fieldset { border: 0; padding: 0; margin: 0 0 28px; }
.tn-fieldset legend { padding: 0; margin: 0 0 14px; }
.tn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tn-field { display: flex; flex-direction: column; gap: 6px; }
.tn-field--large { grid-column: 1 / -1; }
.tn-field span { font-size: 14px; font-weight: 600; color: var(--gris-1); }
.tn-field input {
  font: inherit; font-size: 16px; padding: 13px 14px; color: var(--encre);
  background: #fff; border: 1.5px solid var(--gris-2); border-radius: 10px; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.tn-field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(27, 77, 255, .14); }
.tn-cartes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.tn-cartes span {
  font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--gris-1);
  border: 1.5px solid var(--gris-2); border-radius: 7px; padding: 5px 10px;
}
.tn-caisse__valider { width: 100%; margin-top: 8px; justify-content: center; }
.tn-caisse__valider span { font-weight: 700; }
.tn-caisse__valider span:not(:empty)::before { content: "— "; }

.tn-caisse__recap { position: sticky; top: calc(var(--entete-h, 72px) + 16px); }
.tn-recap__lignes { display: grid; gap: 12px; margin: 4px 0 14px; padding-bottom: 14px; border-bottom: 1.5px solid var(--gris-2); }
.tn-rl { display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center; }
.tn-rl__img { width: 52px; height: 52px; border-radius: 8px; overflow: hidden; background: var(--gris-2); }
.tn-rl__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tn-rl__n { display: flex; flex-direction: column; font-weight: 600; font-size: 15px; }
.tn-rl__n .petit { color: var(--gris-1); font-weight: 400; }
.tn-rl__abo { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--accent); }
.tn-rl__p { font-weight: 700; }

/* confirmation */
.tn-merci { text-align: center; max-width: 640px; margin: 30px auto; display: grid; gap: 16px; justify-items: center; }
.tn-merci__coche { width: 72px; height: 72px; border-radius: 50%; background: rgba(14, 122, 75, .12); color: var(--succes); display: grid; place-items: center; }
.tn-merci__coche svg { width: 40px; height: 40px; }
.tn-merci .corps { color: var(--gris-1); max-width: 44ch; }
.tn-merci__recap { width: 100%; max-width: 460px; padding: 18px; display: grid; gap: 12px; text-align: left; }

/* =========================================================================
   /abonnement
   ========================================================================= */
.tn-abo-hero { background: var(--encre); color: var(--papier); }
.tn-abo-hero__wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: 44px; align-items: center; }
.tn-abo-hero__txt .display { color: var(--papier); }
.tn-abo-hero__txt .sous { color: #c3d4ff; font-weight: 400; margin: 16px 0 26px; }
.tn-abo-hero__cta { display: flex; gap: 12px; flex-wrap: wrap; }
.tn-abo-hero__cta .bouton--fantome { border-color: var(--papier); color: var(--papier); }
.tn-abo-hero__cta .bouton--fantome:hover { background: rgba(250, 249, 246, .12); }
.tn-abo-hero__packs {
  display: flex; gap: 10px; padding: 22px; border-radius: 18px;
  background: linear-gradient(160deg, #fff, #eef1f6);
}
.tn-abo-hero__packs picture { flex: 1; }
.tn-abo-hero__packs img { width: 100%; height: auto; display: block; border-radius: 8px; }
.tn-abo-hero__packs::before { height: 40%; }
.tn-abo-hero__packs::after  { width: 22%; }

.tn-abo-av { margin-top: 4px; }
.tn-abo-av__c { padding: 26px; }
.tn-abo-av__k { font-size: 46px; font-weight: 700; line-height: 1; color: var(--accent); margin: 0 0 10px; }
.tn-abo-av__c .corps { color: var(--gris-1); margin: 6px 0 0; }

.tn-abo-comment { background: var(--papier); }
.tn-abo-steps { margin-top: 22px; }
.tn-abo-step { border-top: 3px solid var(--encre); padding-top: 16px; }
.tn-abo-step__n {
  display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 8px;
}
.tn-abo-step .corps { color: var(--gris-1); }

.tn-abo-fin__wrap { display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.tn-abo-fin__wrap .corps { color: var(--gris-1); margin: 10px 0 0; max-width: 52ch; }

/* =========================================================================
   Adaptatif
   ========================================================================= */
@media (max-width: 900px) {
  .tn-panier { grid-template-columns: 1fr; }
  .tn-panier__cote { position: static; }
  .tn-caisse { grid-template-columns: 1fr; gap: 26px; }
  .tn-caisse__recap { position: static; order: -1; }
  .tn-abo-hero__wrap { grid-template-columns: 1fr; gap: 26px; }
}

@media (max-width: 560px) {
  .tn-verif { padding-block: 18px; }
  .tn-verif__tete { margin-bottom: 16px; }
  .tn-verif__titre { font-size: clamp(24px, 6.6vw, 30px); }
  .tn-verif__sous { font-size: 16px; }
  .tn-verif__input { font-size: 17px; padding: 16px 18px 16px 50px; }
  .tn-verif__preuves { margin-top: 12px; }
  .tn-verif__result { margin-top: 18px; }
  .tn-res { grid-template-columns: 92px 1fr; gap: 14px; padding: 14px; align-items: start; }
  .tn-res__nom { font-size: 21px; }
  .tn-res__euro { font-size: 26px; }
  .tn-res__actions { gap: 8px; }
  .tn-res__actions .bouton { flex: 1 1 auto; text-align: center; justify-content: center; }
  .tn-grid { grid-template-columns: 1fr; }
  .tn-field--large { grid-column: auto; }
  .tn-l { grid-template-columns: 72px 1fr; gap: 12px; padding: 12px; }
  .tn-l__img { width: 72px; height: 72px; }
  .tn-l__bas { flex-wrap: wrap; }
}