/* ============================================================
   VIIR — Page de commande (coordonnées, livraison, paiement).
   Complète css/styles.css et css/boutique.css. Préfixe « ck- ».
   ============================================================ */

.ck-page { background: var(--ivoire); }
.ck-nav { display: flex; gap: 1.6rem; flex-wrap: wrap; justify-content: flex-end; }
.ck-retour { text-decoration: none; color: var(--encre-douce); font-size: 0.62rem; letter-spacing: 0.2em; }
.ck-recap-tete { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 1rem; }
.ck-recap-tete .label { color: var(--or); }
.ck-recap-tete a { text-decoration: none; border-bottom: 1px solid var(--or); font-size: 0.56rem; }
.ck-retour:hover { color: var(--or); }

.ck-main { max-width: 68rem; margin: 0 auto; padding: 7.5rem 1.5rem 5rem; }

.ck-titre { text-align: center; max-width: 40rem; margin: 0 auto 3rem; }
.ck-titre .label { color: var(--or); display: block; margin-bottom: 1.2rem; }
.ck-titre h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(2rem, 4.5vw, 2.8rem); margin: 0 0 1rem; line-height: 1.15; }
.ck-titre h1 em { font-weight: 300; }
.ck-titre p { font-family: var(--serif); font-size: 1.1rem; color: var(--encre-douce); margin: 0; }

.ck-grille { display: grid; grid-template-columns: 1.6fr 1fr; gap: 2.5rem; align-items: start; }
.ck-grille > * { min-width: 0; }
.ck-main { overflow-wrap: anywhere; }
/* Sur petit écran : une colonne, récapitulatif en premier et non collant (sinon il recouvre le formulaire) */
@media (max-width: 860px) { .ck-grille { grid-template-columns: 1fr; } .ck-recap { order: -1; position: static; } }

/* ---------- Étapes ---------- */

/* Lisibilité du parcours (Meven, 08/10/2026) : chaque étape est une carte blanche sur le fond crème,
   avec une bande à gauche qui dit son état : à venir (beige), en cours (vert vif), faite (vert foncé + coche). */
.ck-etape {
  border: 1px solid rgba(138, 122, 74, 0.35);
  border-left: 5px solid rgba(138, 122, 74, 0.35);
  padding: 1.4rem 1.6rem 1.8rem;
  margin: 0 0 1.6rem;
  background: #fff;
  box-shadow: 0 12px 30px -26px rgba(13, 31, 10, 0.45);
  scroll-margin-top: 6rem;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
/* Le titre de l'étape passe à l'intérieur de la carte (et non plus à cheval sur le cadre) */
.ck-etape legend {
  float: left; width: 100%;
  margin: 0 0 1.1rem; padding: 0;
  font-family: var(--serif);
  font-weight: 600;
  font-style: italic;
  font-size: 1.5rem;
  display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
}
.ck-etape legend + * { clear: both; }
.ck-etape.actif { border-color: var(--vert-moyen); box-shadow: 0 18px 40px -22px rgba(30, 61, 16, 0.45); }
.ck-etape.fait { border-left-color: var(--vert-bandeau); }
.ck-etape:not(.actif):not(.fait) legend { color: var(--encre-douce); }
.ck-etape:not(.actif):not(.fait) legend .ck-num { background: transparent; color: var(--encre-douce); box-shadow: inset 0 0 0 1px rgba(26, 26, 20, 0.35); }
.ck-etape legend small { font-family: var(--sans); font-style: normal; font-weight: 400; font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--or); }
.ck-num {
  flex: none;
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  background: var(--vert-nuit); color: var(--ivoire);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-style: normal; font-size: 0.85rem; font-weight: 500;
}
/* Étape complète : le numéro devient une coche */
.ck-progression li.fait .ck-num, .ck-etape.fait legend .ck-num { background: var(--vert-bandeau); font-size: 0; }
.ck-progression li.fait .ck-num::before, .ck-etape.fait legend .ck-num::before { content: "\2713"; font-size: 0.95rem; }

/* ---------- Barre d'étapes en haut du formulaire ---------- */

.ck-progression { list-style: none; margin: 0 0 1.6rem; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.ck-progression a {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.7rem 0.8rem; background: #fff; text-decoration: none;
  border: 1px solid rgba(138, 122, 74, 0.35); border-bottom: 4px solid rgba(138, 122, 74, 0.35);
  font-family: var(--sans); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--encre-douce);
}
.ck-progression .ck-num { width: 1.7rem; height: 1.7rem; font-size: 0.72rem; background: transparent; color: var(--encre-douce); box-shadow: inset 0 0 0 1px rgba(26, 26, 20, 0.35); }
.ck-progression li.actif a { border-bottom-color: var(--vert-moyen); color: var(--vert-nuit); font-weight: 500; }
.ck-progression li.actif .ck-num { background: var(--vert-nuit); color: var(--ivoire); box-shadow: none; }
.ck-progression li.fait a { border-bottom-color: var(--vert-bandeau); color: var(--vert-bandeau); }
.ck-progression li.fait .ck-num { color: var(--ivoire); box-shadow: none; }
@media (max-width: 560px) {
  .ck-progression a { flex-direction: column; gap: 0.35rem; padding: 0.6rem 0.3rem; font-size: 0.56rem; letter-spacing: 0.08em; text-align: center; }
}

/* ---------- Champs ---------- */

.ck-champs { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.2rem; margin-top: 1rem; }
@media (max-width: 560px) { .ck-champs { grid-template-columns: 1fr; } }
.ck-champ { display: flex; flex-direction: column; gap: 0.35rem; }
.ck-champ.ck-plein { grid-column: 1 / -1; }
.ck-champ span { font-family: var(--sans); font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--encre); }
.ck-champ span small { text-transform: none; letter-spacing: 0.04em; color: var(--or); }
.ck-champ input {
  font-family: var(--serif); font-size: 1.1rem; color: var(--encre);
  background: #fff; border: 1px solid rgba(26, 26, 20, 0.28); padding: 0.7rem 0.85rem;
  outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ck-champ input:focus { border-color: var(--vert-moyen); box-shadow: 0 0 0 3px rgba(122, 170, 69, 0.25); }
/* Rouge seulement pour un champ que le client a déjà quitté (ou après un clic sur Payer), jamais d'emblée */
.ck-champ input.ck-touche:invalid { border-color: #9a3b2a; box-shadow: 0 0 0 3px rgba(154, 59, 42, 0.12); }

/* ---------- Options de livraison ---------- */

.ck-choix { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; margin-top: 1rem; }
@media (max-width: 560px) { .ck-choix { grid-template-columns: 1fr; } }
.ck-option {
  position: relative; cursor: pointer;
  border: 1px solid rgba(138, 122, 74, 0.5); background: #fff;
  padding: 1rem 1rem 1rem 2.6rem;
  display: flex; flex-direction: column; gap: 0.15rem;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.ck-option:has(input:checked) { border-color: var(--vert-moyen); box-shadow: inset 0 0 0 1px var(--vert-moyen); background: #F3F7EC; }
.ck-option input { position: absolute; left: 1rem; top: 1.15rem; accent-color: var(--vert-bandeau); margin: 0; }
.ck-option b { font-family: var(--serif); font-weight: 600; font-size: 1.15rem; }
.ck-option span { font-family: var(--sans); font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--encre-douce); }
.ck-option em { font-style: normal; font-family: var(--sans); font-size: 0.72rem; color: var(--vert-bandeau); margin-top: 0.3rem; }
.ck-option em.ok { color: var(--vert-moyen); }

.ck-sous { margin-top: 1.1rem; }
.ck-sous[hidden] { display: none; }

/* Point relais : code postal + bouton qui ouvre la carte Sendcloud (par-dessus la page) */
.ck-relais { background: var(--bloc); border: 1px solid rgba(138, 122, 74, 0.5); padding: 1.2rem 1.3rem; display: grid; gap: 0.8rem; }
.ck-relais .label { color: var(--or); }
.ck-relais p { font-family: var(--serif); font-size: 1rem; color: var(--encre-douce); margin: 0; }
.ck-relais-recherche { display: flex; gap: 0.9rem; align-items: flex-end; flex-wrap: wrap; }
.ck-relais-recherche .ck-champ { flex: 0 1 9rem; }
.ck-relais-liste { display: grid; gap: 0.5rem; }
.ck-relais-liste:empty { display: none; }
.ck-relais-option {
  position: relative; cursor: pointer; background: #fff;
  border: 1px solid rgba(138, 122, 74, 0.45); padding: 0.7rem 0.9rem 0.7rem 2.4rem;
  display: flex; flex-direction: column; gap: 0.1rem;
}
.ck-relais-option:has(input:checked) { border-color: var(--vert-moyen); box-shadow: inset 0 0 0 1px var(--vert-moyen); background: #F3F7EC; }
.ck-relais-liste[hidden] { display: none; }
.ck-relais-option input { position: absolute; left: 0.9rem; top: 0.95rem; accent-color: var(--vert-bandeau); margin: 0; }
.ck-relais-option b { font-family: var(--serif); font-weight: 600; font-size: 1.05rem; }
.ck-relais-option span { font-family: var(--serif); font-size: 0.98rem; color: var(--encre-douce); }
.ck-relais-option small { font-family: var(--sans); font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--or); }
.ck-relais .ck-relais-attente { font-style: italic; }
/* Relais retenu : carte verte avec coche ; la liste se replie, « Changer » la rouvre */
.ck-relais .ck-relais-choisi {
  display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap;
  background: #F3F7EC; border: 1px solid var(--vert-moyen); border-left: 5px solid var(--vert-bandeau);
  padding: 0.8rem 1rem; color: var(--encre);
}
.ck-relais .ck-relais-choisi[hidden] { display: none; }
.ck-relais-choisi::before { content: "\2713"; flex: none; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--vert-bandeau); color: var(--ivoire); display: inline-flex; align-items: center; justify-content: center; font-family: var(--sans); font-size: 0.85rem; }
.ck-relais-choisi span { flex: 1 1 14rem; }
.ck-relais-choisi button { font-family: var(--sans); font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vert-bandeau); background: none; border: 0; border-bottom: 1px solid var(--vert-bandeau); padding: 0.1rem 0; cursor: pointer; }
.ck-relais .ck-relais-erreur { color: #9a3b2a; font-style: italic; }

.ck-rappel { font-family: var(--serif); font-style: italic; font-size: 0.98rem; color: var(--encre-douce); margin: 1rem 0 0; }

/* Encart Stripe : le paiement se fait sur la page sécurisée de Stripe (redirection au clic sur Payer) */
.ck-stripe { background: var(--bloc); border: 1px solid rgba(138, 122, 74, 0.5); padding: 1.2rem 1.3rem; display: grid; gap: 0.7rem; }
.ck-stripe .label { color: var(--or); }
.ck-stripe p { font-family: var(--serif); font-size: 1.02rem; color: var(--encre-douce); margin: 0; }
.ck-stripe .ck-logos .logo-paiement svg { height: 1.6rem; }

.ck-cgv { display: flex; gap: 0.6rem; align-items: flex-start; margin: 1.4rem 0 1.2rem; font-family: var(--serif); font-size: 1rem; color: var(--encre-douce); }
.ck-cgv input { accent-color: var(--vert-bandeau); margin-top: 0.2rem; width: 1.15rem; height: 1.15rem; flex: none; }
.ck-cgv.ck-a-cocher { color: #9a3b2a; }
.ck-cgv a { color: var(--vert-bandeau); }
.ck-payer { width: 100%; text-align: center; font-size: 0.7rem; padding: 1.1rem; }
.ck-payer output { margin-left: 0.5rem; }
.ck-payer:disabled { opacity: 0.65; cursor: wait; }
/* Message d'erreur renvoyé par le serveur de paiement (panier, coordonnées, service indisponible) */
.ck-erreur { font-family: var(--serif); font-style: italic; font-size: 1rem; color: #9a3b2a; background: #fff; border-left: 2px solid #9a3b2a; padding: 0.7rem 0.9rem; margin: 0.9rem 0 0; }
.ck-erreur[hidden] { display: none; }
.ck-invite { text-align: center; font-family: var(--sans); font-size: 0.56rem; letter-spacing: 0.14em; color: var(--encre-douce); margin: 0.8rem 0 0; }
.ck-maquette { text-align: center; font-family: var(--sans); font-size: 0.6rem; letter-spacing: 0.1em; color: var(--vert-bandeau); border: 1px dashed var(--vert-bandeau); padding: 0.6rem; margin: 1rem 0 0; }

/* Code de parrainage à la commande : replié derrière une question, pour ne pas encombrer le paiement */
.ck-parrain-details { margin: 0 0 1rem; }
.ck-parrain-details summary { cursor: pointer; font-family: var(--serif); font-size: 1.02rem; color: var(--vert-bandeau); text-decoration: underline; text-underline-offset: 3px; }
.ck-parrain-details .ck-parrain { margin-top: 0.7rem; }
.ck-parrain {
  display: grid; grid-template-columns: 1fr auto; gap: 0.6rem 1rem; align-items: end;
  background: var(--bloc); border: 1px dashed var(--or); padding: 1rem 1.2rem 1.1rem; margin-top: 1rem;
}
.ck-parrain .ck-champ input { text-transform: uppercase; letter-spacing: 0.14em; }
.ck-parrain .bq-btn { padding: 0.8rem 1.1rem; }
.ck-parrain-msg { grid-column: 1 / -1; margin: 0; font-family: var(--serif); font-size: 0.95rem; color: var(--encre-douce); }
@media (max-width: 560px) { .ck-parrain { grid-template-columns: 1fr; } }

/* ---------- Page de confirmation et parrainage (merci.html) ---------- */

.mc-confirmation .mc-coche {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3.2rem; height: 3.2rem; border-radius: 50%;
  background: var(--vert-nuit); color: var(--ivoire);
  font-family: var(--sans); font-size: 1.4rem; margin-bottom: 1.2rem;
}
.mc-confirmation p b { font-family: var(--sans); font-weight: 500; font-size: 0.85rem; letter-spacing: 0.08em; color: var(--vert-bandeau); }
.mc-grille { grid-template-columns: 1.5fr 1fr; }
.mc-confirmation [hidden], .mc-grille[hidden] { display: none; }   /* page ouverte sans commande (js/merci.js) */
.mc-parrainage {
  position: relative;
  background: var(--vert-nuit); color: var(--ivoire);
  padding: 2.6rem 2.4rem 2.4rem;
}
.mc-parrainage::after { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(138, 122, 74, 0.6); pointer-events: none; }
.mc-parrainage > * { position: relative; z-index: 1; }
.mc-parrainage .label { color: var(--vert-clair); display: block; margin-bottom: 1rem; }
.mc-parrainage h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.9rem, 3.6vw, 2.6rem); line-height: 1.15; margin: 0 0 1rem; }
.mc-parrainage h2 em { font-weight: 300; font-style: italic; }
.mc-parrainage > p { font-family: var(--serif); font-size: 1.1rem; opacity: 0.92; margin: 0 0 1.6rem; }
.mc-code { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-bottom: 1.6rem; }
.mc-code output {
  font-family: var(--sans); font-weight: 500; font-size: 1.5rem; letter-spacing: 0.26em;
  background: var(--ivoire); color: var(--vert-nuit); padding: 0.7rem 1.2rem;
  border: 1px solid var(--or);
}
.mc-code .bq-btn, .mc-partage .bq-btn-clair { color: var(--ivoire); border-color: var(--ivoire); }
.mc-code .bq-btn:hover, .mc-partage .bq-btn-clair:hover { background: var(--ivoire); color: var(--vert-nuit); }
.mc-partage { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-bottom: 1.8rem; }
.mc-partage .label { margin: 0 0.4rem 0 0; }
.mc-partage .bq-btn { background: var(--vert-bandeau); border-color: var(--vert-bandeau); padding: 0.75rem 1.1rem; font-size: 0.58rem; }
.mc-partage .bq-btn:hover { background: var(--vert-moyen); border-color: var(--vert-moyen); }
.mc-compteur .label { margin-bottom: 0.6rem; }
.mc-compteur ol { list-style: none; margin: 0 0 0.6rem; padding: 0; display: flex; gap: 0.6rem; }
.mc-compteur li {
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  border: 1px solid rgba(245, 242, 236, 0.55);
  display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
}
.mc-compteur li.fait { background: var(--vert-clair); border-color: var(--vert-clair); }
.mc-compteur li.mc-cadeau { border-color: var(--or); background: rgba(138, 122, 74, 0.25); }
.mc-compteur p { font-family: var(--serif); font-size: 1rem; margin: 0; opacity: 0.9; }
.mc-compteur p b { font-weight: 600; color: var(--vert-clair); }
.mc-parrainage .ck-rappel { color: var(--ivoire); opacity: 0.75; margin-top: 1.4rem; }
.mc-retour { width: 100%; text-align: center; margin-top: 1.4rem; }
.ck-page .ck-maquette { max-width: 40rem; margin: 2.5rem auto 0; }
@media (max-width: 860px) { .mc-grille { grid-template-columns: 1fr; } }

/* ---------- Récapitulatif ---------- */

.ck-recap {
  position: sticky; top: 6.5rem;
  background: var(--bloc);
  border: 1px solid rgba(138, 122, 74, 0.5);
  padding: 1.5rem 1.5rem 1.6rem;
}
/* Sur téléphone, le récapitulatif ne reste pas collé en haut (il masquerait le formulaire) */
@media (max-width: 860px) { .ck-recap { position: static; } }
.ck-lignes { display: grid; gap: 0.6rem; }
.ck-vide { font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--encre-douce); margin: 0; }
.ck-vide a { color: var(--vert-bandeau); }
.ck-ligne { display: flex; justify-content: space-between; gap: 1rem; font-family: var(--serif); font-size: 1.05rem; padding-bottom: 0.6rem; border-bottom: 1px solid rgba(138, 122, 74, 0.3); }
.ck-ligne b { font-weight: 600; font-style: italic; display: block; }
.ck-ligne small { font-family: var(--sans); font-size: 0.58rem; letter-spacing: 0.08em; color: var(--encre-douce); }
.ck-totaux { margin-top: 1rem; font-family: var(--serif); }
.ck-l { display: flex; justify-content: space-between; font-size: 1rem; color: var(--encre-douce); margin-bottom: 0.3rem; }
.ck-l.ok { color: var(--vert-bandeau); }
.ck-l[hidden] { display: none; }
.ck-msg { font-family: var(--sans); font-size: 0.58rem; letter-spacing: 0.08em; color: var(--or); margin: 0.3rem 0 0; min-height: 1em; }
.ck-somme { display: flex; justify-content: space-between; align-items: baseline; font-size: 1.6rem; margin-top: 0.8rem; padding-top: 0.8rem; border-top: 1px solid rgba(138, 122, 74, 0.5); }
.ck-note-recap { font-family: var(--serif); font-style: italic; font-size: 0.9rem; color: var(--encre-douce); opacity: 0.8; margin: 0.8rem 0 0; }
.ck-garanties { list-style: none; margin: 1.4rem 0 0; padding: 1.1rem 0 0; border-top: 1px solid rgba(138, 122, 74, 0.3); display: grid; gap: 0.5rem; }
.ck-garanties li { font-family: var(--serif); font-size: 0.98rem; color: var(--encre-douce); padding-left: 1.2rem; position: relative; }
.ck-garanties li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 0.6rem; height: 1px; background: var(--or); }

/* ---------- Zone de paiement mise en évidence (Meven, 07/10/2026) : plus claire, plus vive, gros caractères ---------- */

.ck-etape:last-of-type { background: #FBFAF4; }
.ck-etape:last-of-type.actif legend { color: var(--vert-bandeau); }
.ck-payer {
  background: var(--vert-clair);
  border-color: var(--vert-clair);
  color: var(--vert-nuit);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  padding: 1.3rem 1.4rem;
  box-shadow: 0 14px 30px -14px rgba(122, 170, 69, 0.8);
}
.ck-payer:hover { background: var(--vert-moyen); border-color: var(--vert-moyen); color: var(--ivoire); }
.ck-payer output { font-size: 1.25em; margin-left: 0.7rem; }
.ck-somme { font-size: 2.1rem; }
.ck-somme span:last-child { color: var(--vert-bandeau); font-weight: 600; }
.ck-recap { border-color: var(--vert-moyen); }

/* Parrainage masqué au lancement : le récapitulatif de la page de confirmation se centre */
.mc-grille:has(.mc-parrainage[hidden]) { grid-template-columns: minmax(0, 34rem); justify-content: center; }

/* ---------- Parcours simplifié (Meven, 26/10/2026) ---------- */

/* Étape « Vos sachets » : trois grandes cases, prix lisible sans calcul */
.ck-choix-sachets { grid-template-columns: repeat(3, 1fr); }
.ck-choix-sachets .ck-option { padding-left: 2.4rem; }
.ck-choix-sachets .ck-option b { font-size: 1.35rem; }
.ck-choix-sachets .ck-option span { font-size: 0.74rem; letter-spacing: 0.06em; text-transform: none; color: var(--encre-douce); }
.ck-choix-sachets .ck-option em { font-size: 1.15rem; font-weight: 500; color: var(--vert-nuit); margin-top: 0.4rem; }
.ck-option-reco { border-color: var(--vert-moyen); }
.ck-badge {
  position: absolute; top: -0.65rem; right: 0.6rem;
  font-style: normal; font-family: var(--sans); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--vert-moyen); color: var(--ivoire); padding: 0.25rem 0.55rem;
}
@media (max-width: 760px) { .ck-choix-sachets { grid-template-columns: 1fr; } }
.ck-sachets legend .ck-num { background: var(--vert-moyen); }

/* Mots plus grands et plus simples dans le formulaire */
.ck-etape legend { font-size: 1.6rem; }
.ck-champ span { font-size: 0.74rem; letter-spacing: 0.12em; color: var(--encre); }
.ck-champ input { font-size: 1.2rem; padding: 0.85rem 0.95rem; }
.ck-option b { font-size: 1.25rem; }
.ck-option span { font-size: 0.72rem; letter-spacing: 0.06em; text-transform: none; }
.ck-option em { font-size: 0.9rem; }
.ck-rappel, .ck-relais-aide, .ck-stripe p, .ck-info { font-size: 1.05rem; }
.ck-cgv { font-size: 1.05rem; }
.ck-l { font-size: 1.08rem; }
.ck-garanties li { font-size: 1.02rem; }

/* Porte de secours humaine */
.ck-aide { margin: 1.4rem 0 0; padding: 1rem 1.2rem; background: var(--bloc); border-left: 3px solid var(--or); font-family: var(--serif); font-size: 1.05rem; color: var(--encre); }
.ck-aide a { color: var(--vert-bandeau); }

/* Page de confirmation : « et maintenant ? » en trois lignes */
.mc-suite { counter-reset: suite; list-style: none; margin: 1.4rem auto 0; padding: 0; max-width: 34rem; text-align: left; display: grid; gap: 0.6rem; }
.mc-suite li { font-family: var(--serif); font-size: 1.15rem; color: var(--encre); padding-left: 2.2rem; position: relative; }
.mc-suite li::before { content: counter(suite); counter-increment: suite; position: absolute; left: 0; top: 0.1rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--vert-nuit); color: var(--ivoire); font-family: var(--sans); font-size: 0.7rem; display: flex; align-items: center; justify-content: center; }

/* ---------- Deux étiquettes (30/10/2026) : « Pour qui ? » rongeurs ou tortues ---------- */
.ck-question { display: block; margin: 1.2rem 0 0; color: var(--vert-bandeau); font-size: 0.78rem; letter-spacing: 0.16em; }
.ck-choix-espece { grid-template-columns: repeat(2, 1fr); margin-top: 0.6rem; }
.ck-option-espece { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 0.9rem; align-items: center; padding-left: 2.6rem; }
.ck-option-espece img { grid-row: 1 / 3; width: 3.6rem; height: 3.6rem; border-radius: 50%; object-fit: cover; border: 1px solid rgba(138, 122, 74, 0.5); }
.ck-option-espece b { align-self: end; }
.ck-option-espece span { align-self: start; }
@media (max-width: 560px) { .ck-choix-espece { grid-template-columns: 1fr; } }

/* Mention « Livraison offerte » de la case 3 sachets : affichée seulement si 3 sachets atteignent le seuil (js/catalogue-affichage.js) */
.ck-option .ck-offert { display: block; margin-top: 0.2rem; font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.06em; color: var(--vert-bandeau); }
.ck-option .ck-offert[hidden] { display: none; }