/* ═════════════════════════════════════════════════════════════════════
 * cpb-parcours.css — UX-G1, LE PARCOURS PARTICIPANT.
 *
 * ⚠ POURQUOI UNE FEUILLE, ET PLUS UNE CHAÎNE PHP. Le style de cet espace
 * vivait dans deux blocs `<style>` concaténés en PHP — l'un dans
 * `_campagne_public.php`, l'autre RECOPIÉ dans `campagne.php`. Deux
 * copies, donc deux vérités, et c'est exactement ainsi que le parcours
 * public a fini par ne plus ressembler au reste du produit.
 *
 * ⚠ ELLE NE REMPLACE PAS LE DESIGN SYSTEM. `cpb-design-system.css` est
 * chargé avant et fournit les jetons (`--cpb-*`). Cette feuille n'ajoute
 * que ce que le parcours participant a de particulier : la marque de la
 * STRUCTURE, et les composants qu'on ne trouve nulle part ailleurs
 * (grille d'articles, pastilles de coloris, pastilles de taille).
 *
 * ⚠ LA MARQUE DE LA STRUCTURE PILOTE L'INTERFACE, PAS SEULEMENT UN
 * BANDEAU. `--pk-brand` et `--pk-on` sont posés en ligne par le serveur,
 * depuis le contrat de branding (`#rrggbb` sur liste blanche). Faute de
 * marque, le repli est la couleur CPBRODERIE. Toutes les règles ci-
 * dessous s'appuient sur ces deux variables : une structure qui change de
 * couleur change de bouton, de progression, de sélection et de badge —
 * pas seulement de bandeau.
 *
 * Préfixe unique : `cpb-cp-`.
 * ═════════════════════════════════════════════════════════════════════ */

:root {
  --pk-brand: var(--cpb-navy, #13294B);
  --pk-on: #fff;
  /* Teinte douce dérivée de la marque. `color-mix` n'est pas universel :
     la valeur de repli est posée AVANT, et reste lisible partout. */
  --pk-soft: var(--cpb-navy-soft, #E9EEF6);
  --pk-soft: color-mix(in srgb, var(--pk-brand) 9%, #fff);
  --pk-line: var(--cpb-border, #E3E7EF);
  --pk-line: color-mix(in srgb, var(--pk-brand) 22%, #fff);
}

/* ── Socle ─────────────────────────────────────────────────────────── */

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--cpb-bg, #F5F6F9);
  color: var(--cpb-text, #182235);
  -webkit-text-size-adjust: 100%;
}

.cpb-cp-wrap {
  max-width: 40rem;
  margin: 0 auto;
  padding: 1rem 1rem 4.5rem;
}
.cpb-cp-wrap.large { max-width: 64rem; }

/* ── En-tête de structure ──────────────────────────────────────────── */

.cpb-cp-head {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .85rem 0 1.1rem;
}
.cpb-cp-mono {
  flex: 0 0 auto;
  width: 2.5rem; height: 2.5rem;
  border-radius: .7rem;
  background: var(--pk-brand);
  color: var(--pk-on);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .95rem; letter-spacing: .02em;
}
.cpb-cp-head .who { min-width: 0; }
.cpb-cp-head .nom {
  display: block; font-weight: 700; font-size: 1rem; line-height: 1.25;
  overflow-wrap: anywhere;
}
.cpb-cp-head .sur {
  display: block; font-size: .78rem; color: var(--cpb-muted, #5B6472);
  text-transform: uppercase; letter-spacing: .06em;
}

/* ── Progression compacte ──────────────────────────────────────────────
   ⚠ UNE LIGNE, PAS TROIS CARTES. Les trois cartes empilées mangeaient
   plus de la moitié du premier écran d'un téléphone. Ici la progression
   tient en une ligne à toute largeur, et elle NE PORTE QU'UN SEUL
   COMPTEUR : « 2 sur 4 ». Deux compteurs qui se contredisent, c'est le
   défaut relevé côté responsable ; on ne le reproduit pas ici. */

.cpb-cp-prog { margin: 0 0 1.1rem; }
.cpb-cp-prog .txt {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: .5rem; margin: 0 0 .4rem;
  font-size: .82rem; color: var(--cpb-muted, #5B6472);
}
.cpb-cp-prog .txt b { color: var(--cpb-text, #182235); font-size: .9rem; }
.cpb-cp-prog .bar {
  display: flex; gap: .25rem; list-style: none; margin: 0; padding: 0;
}
.cpb-cp-prog .bar li {
  flex: 1 1 0; height: .3rem; border-radius: 999px;
  background: var(--cpb-border, #E3E7EF);
}
.cpb-cp-prog .bar li.ok { background: var(--pk-brand); opacity: .45; }
.cpb-cp-prog .bar li.on { background: var(--pk-brand); }

/* ── Cartes et titres ──────────────────────────────────────────────── */

.cpb-cp-card {
  background: var(--cpb-card, #fff);
  border: 1px solid var(--cpb-border, #E3E7EF);
  border-radius: var(--cpb-radius, 14px);
  padding: 1.15rem;
  margin-bottom: 1rem;
  box-shadow: var(--cpb-shadow, 0 1px 3px rgba(19,41,75,.07));
}
.cpb-cp-card.plain { box-shadow: none; background: transparent; border: 0; padding: 0; }
/* ⚑ 14/09/2026 — LA LIGNE D ACCUEIL. Elle passe AVANT le titre :
   on arrive ici par un lien ou un QR, souvent sans savoir de qui
   vient la demande. Discrète, jamais un bandeau marketing. */
.cpb-cp-bienvenue { margin: 0 0 .25rem; font-size: .95rem; color: var(--muted, #64748b); }
.cpb-cp-bienvenue strong { color: inherit; }
.cpb-cp-h1 { margin: 0 0 .3rem; font-size: 1.45rem; line-height: 1.2; }
.cpb-cp-h2 { margin: 0 0 .7rem; font-size: 1.08rem; }
.cpb-cp-hint { color: var(--cpb-muted, #5B6472); margin: .5rem 0 0; line-height: 1.5; }
.cpb-cp-foot {
  color: var(--cpb-muted, #5B6472); font-size: .8rem;
  text-align: center; margin: 2.5rem 0 0;
}

/* ── Badges d'état ─────────────────────────────────────────────────── */

.cpb-cp-state {
  display: inline-block; border-radius: 999px; padding: .22rem .75rem;
  font-weight: 600; font-size: .82rem;
  background: var(--pk-soft); color: var(--pk-brand);
  border: 1px solid var(--pk-line);
}
.cpb-cp-state.off {
  background: var(--cpb-bg, #F5F6F9); color: var(--cpb-muted, #5B6472);
  border-color: var(--cpb-border, #E3E7EF);
}
.cpb-cp-tag {
  display: inline-block; font-size: .78rem; border-radius: 999px;
  padding: .12rem .6rem; background: var(--cpb-bg, #F5F6F9);
  color: var(--cpb-muted, #5B6472); border: 1px solid var(--cpb-border, #E3E7EF);
}

/* ── Boutons ───────────────────────────────────────────────────────── */

.cpb-cp-btn {
  box-sizing: border-box;      /* sinon `block` + padding deborde la carte */
  display: inline-flex; align-items: center; justify-content: center;
  gap: .45rem; border: 1px solid transparent; border-radius: var(--cpb-radius-sm, 10px);
  padding: .72rem 1.15rem; font-size: 1rem; font-weight: 600;
  cursor: pointer; text-decoration: none; line-height: 1.2;
  background: var(--pk-brand); color: var(--pk-on);
  transition: filter var(--cpb-transition, .15s ease), box-shadow var(--cpb-transition, .15s ease);
  min-height: 44px;            /* cible tactile */
}
.cpb-cp-btn:hover { filter: brightness(1.1); box-shadow: var(--cpb-shadow-hover, 0 6px 18px rgba(19,41,75,.1)); }
.cpb-cp-btn:focus-visible { outline: 3px solid var(--cpb-gold, #C9A227); outline-offset: 2px; }
.cpb-cp-btn.block { width: 100%; }
.cpb-cp-btn.sec {
  background: #fff; color: var(--cpb-text, #182235);
  border-color: var(--cpb-border, #E3E7EF);
}
.cpb-cp-btn.sec:hover { background: var(--cpb-bg, #F5F6F9); filter: none; }
.cpb-cp-btn.mini { padding: .4rem .75rem; font-size: .85rem; font-weight: 500; min-height: 36px; }
.cpb-cp-btn.danger { background: #fff; color: var(--cpb-err-text, #991B1B); border-color: var(--cpb-err-border, #FECACA); }
.cpb-cp-btn.danger:hover { background: var(--cpb-err-bg, #FEF2F2); filter: none; }
.cpb-cp-btn[disabled], .cpb-cp-btn.is-off { opacity: .5; cursor: not-allowed; }

/* ── Messages ──────────────────────────────────────────────────────── */

.cpb-cp-ok, .cpb-cp-err, .cpb-cp-info {
  border-radius: var(--cpb-radius-sm, 10px); padding: .8rem .95rem;
  margin-bottom: 1rem; border: 1px solid; line-height: 1.45;
}
.cpb-cp-ok { background: var(--cpb-ok-bg, #ECFDF5); border-color: var(--cpb-ok-border, #A7F3D0); color: var(--cpb-ok-text, #065F46); }
.cpb-cp-err { background: var(--cpb-err-bg, #FEF2F2); border-color: var(--cpb-err-border, #FECACA); color: var(--cpb-err-text, #991B1B); }
.cpb-cp-info { background: var(--cpb-info-bg, #EFF3FB); border-color: var(--cpb-info-border, #C9D6EC); color: var(--cpb-info-text, #1E3A5F); }

/* ── Champs ────────────────────────────────────────────────────────── */

.cpb-cp-field { margin-bottom: .95rem; }
.cpb-cp-field label { display: block; font-weight: 600; margin-bottom: .3rem; font-size: .95rem; }
.cpb-cp-field input, .cpb-cp-field select, .cpb-cp-field textarea {
  width: 100%; box-sizing: border-box; padding: .7rem .8rem;
  border: 1px solid var(--cpb-border, #E3E7EF);
  border-radius: var(--cpb-radius-sm, 10px);
  font-size: 1rem; font-family: inherit; background: #fff; color: inherit;
  min-height: 44px;
}
.cpb-cp-field input:focus, .cpb-cp-field select:focus, .cpb-cp-field textarea:focus {
  outline: 3px solid var(--cpb-gold, #C9A227); outline-offset: 1px; border-color: var(--pk-brand);
}

/* ── GRILLE D'ARTICLES ─────────────────────────────────────────────────
   ⚠ DES PRODUITS, PAS DES CHAMPS. Le catalogue était un formulaire
   déplié : chaque article devenait Coloris/Taille/Quantité/Ajouter, et
   trois articles suffisaient à faire 2 100 px. Ici un article est une
   CARTE ; le choix se fait sur sa fiche. */

.cpb-cp-grid {
  display: grid; gap: 1rem; list-style: none; margin: 0 0 1rem; padding: 0;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
}
.cpb-cp-tile {
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid var(--cpb-border, #E3E7EF);
  border-radius: var(--cpb-radius, 14px);
  box-shadow: var(--cpb-shadow, 0 1px 3px rgba(19,41,75,.07));
  transition: border-color var(--cpb-transition, .15s ease), box-shadow var(--cpb-transition, .15s ease);
}
.cpb-cp-tile:hover { border-color: var(--pk-line); box-shadow: var(--cpb-shadow-hover, 0 6px 18px rgba(19,41,75,.1)); }
.cpb-cp-tile.is-in { border-color: var(--pk-brand); box-shadow: 0 0 0 2px var(--pk-soft), var(--cpb-shadow, 0 1px 3px rgba(19,41,75,.07)); }
.cpb-cp-vis {
  position: relative; aspect-ratio: 4 / 3; background: var(--cpb-bg, #F5F6F9);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.cpb-cp-vis img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cpb-cp-vis .ph { color: #B6BFCD; }
.cpb-cp-in {
  position: absolute; top: .55rem; right: .55rem;
  background: var(--pk-brand); color: var(--pk-on);
  border-radius: 999px; font-size: .74rem; font-weight: 700;
  padding: .2rem .6rem;
}
.cpb-cp-body { padding: .85rem .9rem 1rem; display: flex; flex-direction: column; gap: .45rem; flex: 1 1 auto; }
.cpb-cp-nom { font-size: .98rem; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.cpb-cp-prix { font-size: 1.12rem; font-weight: 700; margin: 0; }
.cpb-cp-prix small { font-weight: 500; font-size: .78rem; color: var(--cpb-muted, #5B6472); display: block; }
.cpb-cp-det { font-size: .82rem; color: var(--cpb-muted, #5B6472); }
.cpb-cp-do { margin-top: auto; padding-top: .3rem; }

/* Aperçu des coloris sur la carte : on montre la couleur, on ne la nomme
   pas encore — le nom est sur la fiche, où l'on choisit. */
.cpb-cp-dots { display: flex; gap: .25rem; align-items: center; flex-wrap: wrap; }
.cpb-cp-dots i {
  width: .8rem; height: .8rem; border-radius: 999px; display: inline-block;
  border: 1px solid rgba(0,0,0,.18);
}

/* ── FICHE ARTICLE ─────────────────────────────────────────────────── */

.cpb-cp-fiche { display: grid; gap: 1.4rem; grid-template-columns: 1fr; }
@media (min-width: 48rem) { .cpb-cp-fiche { grid-template-columns: 1fr 1fr; align-items: start; } }
.cpb-cp-fiche .photo {
  background: var(--cpb-bg, #F5F6F9); border-radius: var(--cpb-radius, 14px);
  aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;
  overflow: hidden; border: 1px solid var(--cpb-border, #E3E7EF);
}
.cpb-cp-fiche .photo img { width: 100%; height: 100%; object-fit: contain; }
.cpb-cp-vign { display: flex; gap: .5rem; margin-top: .5rem; flex-wrap: wrap; }
.cpb-cp-vign img {
  width: 4rem; height: 4rem; object-fit: contain; background: var(--cpb-bg, #F5F6F9);
  border: 1px solid var(--cpb-border, #E3E7EF); border-radius: .5rem;
}

/* ── PASTILLES DE COLORIS ──────────────────────────────────────────────
   ⚠ LA COULEUR NE PORTE JAMAIS L'INFORMATION SEULE. Chaque pastille a son
   NOM écrit à côté, un `aria-label`, et l'état choisi est marqué par un
   anneau ET une coche — pas uniquement par une teinte. */

.cpb-cp-choix { margin: 0 0 1.1rem; border: 0; padding: 0; }
.cpb-cp-choix > legend {
  padding: 0; font-weight: 600; font-size: .95rem; margin-bottom: .5rem;
}
.cpb-cp-choix > legend .val { font-weight: 500; color: var(--cpb-muted, #5B6472); }
.cpb-cp-swatches { display: flex; flex-wrap: wrap; gap: .5rem; }
.cpb-cp-swatch { position: relative; }
.cpb-cp-swatch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cpb-cp-swatch span {
  display: inline-flex; align-items: center; gap: .45rem; cursor: pointer;
  border: 1px solid var(--cpb-border, #E3E7EF); border-radius: 999px;
  padding: .35rem .8rem .35rem .4rem; background: #fff;
  font-size: .88rem; min-height: 40px;
}
.cpb-cp-swatch span::before {
  content: ""; width: 1.35rem; height: 1.35rem; border-radius: 999px;
  background: var(--sw, #ccc); border: 1px solid rgba(0,0,0,.18); flex: 0 0 auto;
}
.cpb-cp-swatch input:checked + span {
  border-color: var(--pk-brand); background: var(--pk-soft); font-weight: 600;
  box-shadow: 0 0 0 1px var(--pk-brand);
}
.cpb-cp-swatch input:checked + span::after { content: "\2713"; font-weight: 700; }
.cpb-cp-swatch input:focus-visible + span { outline: 3px solid var(--cpb-gold, #C9A227); outline-offset: 2px; }

/* ── PASTILLES DE TAILLE ───────────────────────────────────────────── */

.cpb-cp-pills { display: flex; flex-wrap: wrap; gap: .45rem; }
.cpb-cp-pill { position: relative; }
.cpb-cp-pill input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cpb-cp-pill span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 3rem; min-height: 44px; padding: .4rem .7rem; cursor: pointer;
  border: 1px solid var(--cpb-border, #E3E7EF); border-radius: var(--cpb-radius-sm, 10px);
  background: #fff; font-size: .95rem; font-weight: 600;
}
.cpb-cp-pill input:checked + span {
  border-color: var(--pk-brand); background: var(--pk-brand); color: var(--pk-on);
}
.cpb-cp-pill input:focus-visible + span { outline: 3px solid var(--cpb-gold, #C9A227); outline-offset: 2px; }
/* Indisponible : visible, barré, et annoncé — jamais simplement absent
   sans explication, et jamais cliquable. */
.cpb-cp-pill.off span {
  color: var(--cpb-muted, #5B6472); background: var(--cpb-bg, #F5F6F9);
  cursor: not-allowed; text-decoration: line-through; opacity: .7;
}

/* ── QUANTITÉ ──────────────────────────────────────────────────────── */

.cpb-cp-qty { display: inline-flex; align-items: stretch; gap: 0; }
.cpb-cp-qty button {
  width: 44px; min-height: 44px; font-size: 1.25rem; line-height: 1; cursor: pointer;
  border: 1px solid var(--cpb-border, #E3E7EF); background: #fff; color: inherit;
}
.cpb-cp-qty button:first-child { border-radius: var(--cpb-radius-sm, 10px) 0 0 var(--cpb-radius-sm, 10px); }
.cpb-cp-qty button:last-child { border-radius: 0 var(--cpb-radius-sm, 10px) var(--cpb-radius-sm, 10px) 0; }
.cpb-cp-qty button:focus-visible { outline: 3px solid var(--cpb-gold, #C9A227); outline-offset: -1px; }
.cpb-cp-qty input {
  width: 3.5rem; text-align: center; font-size: 1rem; min-height: 44px;
  border: 1px solid var(--cpb-border, #E3E7EF); border-left: 0; border-right: 0;
  background: #fff; color: inherit; -moz-appearance: textfield;
}
.cpb-cp-qty input::-webkit-outer-spin-button,
.cpb-cp-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ── LIGNES DE SÉLECTION (panier) ──────────────────────────────────── */

.cpb-cp-lines { list-style: none; margin: 0; padding: 0; }
.cpb-cp-lines > li {
  display: flex; gap: .85rem; align-items: flex-start;
  padding: .9rem 0; border-bottom: 1px solid var(--cpb-border, #E3E7EF);
}
.cpb-cp-lines > li:first-child { padding-top: 0; }
.cpb-cp-lines > li:last-child { border-bottom: 0; padding-bottom: 0; }
.cpb-cp-lines .vig {
  flex: 0 0 auto; width: 4.5rem; height: 4.5rem; border-radius: .6rem;
  background: var(--cpb-bg, #F5F6F9); border: 1px solid var(--cpb-border, #E3E7EF);
  object-fit: contain; display: block;
}
.cpb-cp-lines .txt { flex: 1 1 10rem; min-width: 0; }
.cpb-cp-lines .txt b { display: block; overflow-wrap: anywhere; }
/* ⚠ CHAQUE PRÉCISION SUR SA LIGNE (LOT 2). Ces `<span>` restaient en
   ligne : une ligne personnalisée affichait « qté 1Prénom : PAUL », les
   deux informations collées sans séparateur. Le défaut ne se voyait que
   lorsqu'une ligne en portait DEUX — donc exactement dans le parcours
   multi-personnes, où la personnalisation est la règle. */
.cpb-cp-lines .sous {
  display: block; color: var(--cpb-muted, #5B6472);
  font-size: .88rem; margin-top: .15rem;
}
.cpb-cp-lines .actes { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .55rem; }

/* ── UN PACK DANS LA SÉLECTION ────────────────────────────────
   ⚠ AUCUN NOUVEAU GABARIT. Les composants réutilisent `.txt`, `.sous`
   et `.actes` de la liste ; seul le LIEN VISUEL entre eux est nouveau — un
   filet vertical, qui dit « ces pièces vont ensemble » sans ajouter de
   cadre dans un écran qui en a déjà. */
.cpb-cp-souslignes {
  list-style: none; margin: .5rem 0 0; padding: .1rem 0 .1rem .75rem;
  border-left: 3px solid var(--cpb-border, #E3E7EF);
}
.cpb-cp-souslignes > li { padding: .25rem 0; }
.cpb-cp-souslignes > li b {
  display: block; font-weight: 600; font-size: .95rem; overflow-wrap: anywhere;
}
.cpb-cp-souslignes .sous {
  display: block; color: var(--cpb-muted, #5B6472);
  font-size: .86rem; margin-top: .1rem;
}
.cpb-cp-total {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; margin: 1rem 0 0; padding-top: .9rem;
  border-top: 2px solid var(--cpb-border, #E3E7EF); font-size: 1.15rem; font-weight: 700;
}

/* ── CTA PERSISTANT ────────────────────────────────────────────────────
   ⚠ IL NE COUVRE RIEN. Le `padding-bottom` du conteneur réserve la place
   de la barre : elle se pose au-dessus du vide, jamais du contenu. */

.cpb-cp-sticky { display: none; }
.cpb-cp-sticky .cpb-cp-btn { width: 100%; }

/* ⚠ COLLANTE SUR TÉLÉPHONE SEULEMENT, et jamais ailleurs. Sur un écran
   large, la sélection est déjà visible sans défiler : une barre fixe n'y
   servirait à rien et RECOUVRIRAIT le bouton principal — ce qu'elle a
   effectivement fait au premier essai. */
@media (max-width: 47.99rem) {
  .cpb-cp-sticky {
    display: block;
    position: sticky; bottom: 0; z-index: 20;
    margin: 1.2rem -1rem 0;
    padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom, 0px));
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(6px);
    border-top: 1px solid var(--cpb-border, #E3E7EF);
  }
}
/* La cible du lien ne doit pas se coller sous la barre. */
#selection { scroll-margin-top: 1rem; scroll-margin-bottom: 5rem; }

/* ── ÉTAT VIDE ─────────────────────────────────────────────────────── */

.cpb-cp-vide {
  text-align: center; padding: 2rem 1rem; color: var(--cpb-muted, #5B6472);
  background: #fff; border: 1px dashed var(--cpb-border, #E3E7EF);
  border-radius: var(--cpb-radius, 14px);
}

/* ── Divers ────────────────────────────────────────────────────────── */

.cpb-cp-link {
  word-break: break-all; background: var(--cpb-bg, #F5F6F9);
  border-radius: .5rem; padding: .6rem; display: block;
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .82rem;
}
.cpb-cp-people { list-style: none; padding: 0; margin: 0; }
.cpb-cp-people li {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: .65rem 0; border-bottom: 1px solid var(--cpb-border, #E3E7EF);
}
.cpb-cp-people li:last-child { border-bottom: 0; }
.cpb-cp-people .who { flex: 1 1 10rem; min-width: 0; overflow-wrap: anywhere; }
.cpb-cp-retour { display: inline-block; margin: 0 0 .9rem; font-size: .9rem; }

@media (prefers-reduced-motion: reduce) {
  .cpb-cp-btn, .cpb-cp-tile { transition: none; }
}

/* Texte réservé aux lecteurs d'écran : la barre de progression est
   graphique, mais chaque segment doit pouvoir être NOMMÉ. */
.cpb-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── SORTIES LATÉRALES ─────────────────────────────────────────────────
   ⚠ UX-G1b — DES LIENS, PAS DES BOUTONS. Deux boutons pleins au même
   poids que les produits détournaient l'étape « choisir ». Ils restent
   entièrement atteignables — au clavier comme au doigt : la cible tactile
   garde sa hauteur. */
.cpb-cp-aparte {
  text-align: center; margin: .2rem 0 1rem;
  font-size: .88rem; color: var(--cpb-muted, #5B6472);
}
.cpb-cp-aparte a {
  color: var(--cpb-muted, #5B6472); text-decoration: underline;
  display: inline-block; padding: .55rem .2rem; min-height: 40px;
}
.cpb-cp-aparte a:hover { color: var(--pk-brand); }
.cpb-cp-aparte a:focus-visible { outline: 3px solid var(--cpb-gold, #C9A227); outline-offset: 2px; }

/* ══════════════════════════════════════════════════════════════════════
 * UX-G3 — L'AJOUT DANS LE FLUX, LA GALERIE
 * ══════════════════════════════════════════════════════════════════════
 * ⚠ Rien ici ne crée de capacité : ce sont des formulaires ordinaires,
 * rendus lisibles. Chaque cible garde 44 px de hauteur tactile. */
/* ── LOT 2 — UNE LISTE PAR PERSONNE ───────────────────────────────────
   La barre « Je choisis pour » (`.cpb-cp-pers*`) a disparu du parcours :
   le destinataire vient désormais du CHEMIN, pas d'un sélecteur global.
   Ce qui la remplace n'est pas un contrôle, c'est une STRUCTURE — un bloc
   par personne, et le bouton qui ouvre SON catalogue.

   ⚠ MOBILE D'ABORD. Un bloc se lit d'un coup d'œil sur 360 px : un nom,
   ses articles, un bouton. Aucune colonne, aucun tableau, aucun sélecteur
   posé en permanence sur chaque ligne. */
.cpb-cp-bloc { margin: 0 0 .2rem; }
.cpb-cp-bloc:last-of-type { margin-bottom: 0; }
.cpb-cp-blocadd { margin: .55rem 0 1.1rem; }
.cpb-cp-blocadd .cpb-cp-btn { max-width: 100%; }

/* « Vous choisissez pour X » — un constat, jamais un champ. */
.cpb-cp-pourqui {
  margin: 0 0 1rem; padding: .6rem .9rem;
  background: var(--pk-soft, #F5F6F9);
  border: 1px solid var(--cpb-border, #E3E7EF);
  border-left: 3px solid var(--pk-brand, #13294B);
  border-radius: var(--cpb-radius, 14px);
  font-size: .95rem;
}
.cpb-cp-pourqui strong { color: var(--pk-brand, #13294B); }

/* ── « ⋯ » — LES ACTIONS SECONDAIRES D'UNE LIGNE ──────────────────────
   Déplacer un article vers une autre personne est une CORRECTION : le
   parcours nominal n'en a jamais besoin, puisqu'on choisit depuis la
   personne. Un `<details>` natif, donc utilisable sans JavaScript, et une
   cible tactile de 44 px comme tous les autres boutons. */
.cpb-cp-plus { display: inline-block; }
.cpb-cp-plus > summary {
  cursor: pointer; list-style: none; min-height: 36px; min-width: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--cpb-border, #E3E7EF); border-radius: 10px;
  padding: 0 .6rem; font-size: 1.1rem; line-height: 1;
  color: var(--cpb-muted, #5B6472); background: #fff;
}
.cpb-cp-plus > summary::-webkit-details-marker { display: none; }
.cpb-cp-plus > summary:focus-visible {
  outline: 3px solid var(--cpb-gold, #C9A227); outline-offset: 2px;
}
.cpb-cp-plus[open] > summary { background: var(--pk-soft, #F5F6F9); }
.cpb-cp-plus form {
  margin: .5rem 0 0; display: flex; flex-wrap: wrap; gap: .45rem;
  align-items: center;
}
.cpb-cp-plus label { flex: 1 0 100%; margin: 0; }
.cpb-cp-plus select {
  min-height: 44px; border-radius: 10px; border: 1px solid var(--cpb-border, #E3E7EF);
  padding: 0 .6rem; background: #fff; font-size: 1rem; max-width: 12rem;
}
.cpb-cp-plus select:focus-visible {
  outline: 3px solid var(--cpb-gold, #C9A227); outline-offset: 2px;
}


/* ── APRÈS UN AJOUT : ce qui vient d'entrer, et la suite ─────────────── */
.cpb-cp-apres { border-left: 3px solid var(--pk-brand, #13294B); }
.cpb-cp-apresa { margin: .7rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem; }

/* ── AJOUTER UNE PERSONNE, SANS QUITTER LA PAGE ───────────────────────
   Un repli, pas une fenêtre : il fonctionne sans JavaScript et se laisse
   ouvrir par une ancre depuis n'importe quel autre écran. */
.cpb-cp-ajout > summary,
.cpb-cp-repli > summary {
  cursor: pointer; list-style: revert; min-height: 44px;
  display: flex; align-items: center; gap: .4rem;
}
.cpb-cp-ajout > summary:focus-visible,
.cpb-cp-repli > summary:focus-visible {
  outline: 3px solid var(--cpb-gold, #C9A227); outline-offset: 2px;
}
.cpb-cp-repli > summary { font-size: .9rem; color: var(--cpb-muted, #5B6472); }

/* ── LE PANNEAU « AJOUTER UNE PERSONNE », EN LIGNE ────────────────────
   Le bouton EST le `<summary>` : le formulaire se déplie exactement sous
   le doigt, sans défilement. C'est tout le correctif — l'ancien lien
   d'ancre faisait sauter la page vers un panneau situé ailleurs, et sur
   téléphone le bouton semblait n'avoir rien fait. */
.cpb-cp-ajout.inline > summary {
  list-style: none; display: block; min-height: 0; padding: 0;
}
.cpb-cp-ajout.inline > summary::-webkit-details-marker { display: none; }
.cpb-cp-ajout.inline > summary::marker { content: ''; }
/* Le faux bouton porte la cible tactile ; le `<summary>` ne fait que le
   contenir, pour que le clic reste celui du repli natif. */
.cpb-cp-ajout.inline > summary .cpb-cp-btn {
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.cpb-cp-ajout.inline > summary:focus-visible .cpb-cp-btn {
  outline: 3px solid var(--cpb-gold, #C9A227); outline-offset: 2px;
}
/* ⚠ OUVERT, LE PANNEAU DOIT SE DISTINGUER DES BLOCS DE PERSONNES qui
   l'entourent — sinon on ne sait plus si l'on remplit un formulaire ou
   si l'on lit une liste. */
.cpb-cp-ajout.inline[open] > summary { margin-bottom: .7rem; }
.cpb-cp-ajout.inline > .cpb-cp-ajoutc {
  border: 1px solid var(--cpb-border, #E3E7EF);
  border-left: 3px solid var(--pk-brand, #13294B);
  border-radius: var(--cpb-radius, 14px);
  background: var(--pk-soft, #F5F6F9);
  padding: .9rem 1rem;
}
/* Le titre du panneau et sa barre d'actions ont leurs PROPRES classes :
   emprunter `cpb-cp-grp` (l'intertitre d'une personne) ou `cpb-cp-apresa`
   (les suites d'un ajout d'article) reviendrait à faire compter ce
   formulaire pour un bloc de personne. */
.cpb-cp-ajoutt {
  margin: 0 0 .2rem; font-weight: 700; font-size: .98rem;
  color: var(--pk-brand, #13294B);
}
.cpb-cp-ajouta {
  margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
}

/* ── LES LIGNES RANGÉES SOUS UN NOM ───────────────────────────────────
   Un intertitre, jamais un tableau : ce sont les mêmes lignes. */
.cpb-cp-grp {
  margin: 1.1rem 0 .35rem; font-weight: 700; font-size: .98rem;
  color: var(--pk-brand, #13294B);
  padding-top: .8rem; border-top: 1px solid var(--cpb-border, #E3E7EF);
}
.cpb-cp-grp:first-of-type { margin-top: .2rem; padding-top: 0; border-top: 0; }

/* ── « PERSONNALISABLE » SUR LA CARTE CATALOGUE ───────────────────── */
.cpb-cp-perso {
  display: inline-block; margin-top: .35rem; padding: .1rem .5rem;
  border-radius: 999px; font-size: .74rem; font-weight: 700;
  letter-spacing: .02em; text-transform: uppercase;
  background: var(--pk-brand, #13294B); color: var(--pk-on, #fff);
}

/* ── LA PERSONNALISATION, SUR LA FICHE ────────────────────────────────
   Un encadré, pas une obligation : le mot « facultatif » reste. */
.cpb-cp-pers-box {
  border: 1px solid var(--cpb-border, #E3E7EF) !important;
  border-radius: var(--cpb-radius, 14px);
  background: var(--pk-soft, #F5F6F9);
  padding: .9rem 1rem !important; margin-bottom: 1.1rem;
}
.cpb-cp-pers-box > legend { padding: 0 .35rem; }

/* ── LA GALERIE : la vignette devient la grande image ────────────────── */
.cpb-cp-vg {
  display: block; line-height: 0; border-radius: .5rem;
  border: 2px solid transparent; padding: 0;
}
.cpb-cp-vg img { display: block; }
.cpb-cp-vg.is-on { border-color: var(--pk-brand, #13294B); }
.cpb-cp-vg:hover img { border-color: var(--pk-brand, #13294B); }
.cpb-cp-vg:focus-visible { outline: 3px solid var(--cpb-gold, #C9A227); outline-offset: 2px; }

@media (max-width: 30rem) {
  .cpb-cp-plus select { max-width: 100%; }
  .cpb-cp-plus form { gap: .35rem; }
}

/* ══════════════════════════════════════════════════════════════════════
 * LOT 3 — LA FINALISATION : VÉRIFIER, ENREGISTRÉE, RÉGLÉE
 * ══════════════════════════════════════════════════════════════════════
 * ⚠ CE N'EST PAS DE LA DÉCORATION. Cédric a jugé l'ancien écran « trop
 * faible visuellement » : une liste de texte, un total noyé, un bouton
 * gris. C'est pourtant l'écran sur lequel on s'engage. Ce qui suit lui
 * donne la HIÉRARCHIE qui lui manquait — l'état, les articles avec leur
 * photo, le montant, le paiement — et rien d'autre : aucune animation,
 * aucun dégradé, aucun effet.
 *
 * ⚠ MOBILE D'ABORD, 375 px. Chaque article tient sur une rangée : une
 * photo compacte, les informations essentielles, le prix. Aucun
 * débordement horizontal, aucun tableau.
 *
 * ⚠ AUCUNE COULEUR NOUVELLE. Tout s'accroche à `--pk-brand` : la marque
 * de la structure pilote cet écran comme elle pilote les autres. */

/* ── L'ÉTAT, EN PREMIER ──────────────────────────────────────────────── */
.cpb-cp-fin { border-top: 3px solid var(--pk-brand, #13294B); }
.cpb-cp-fin.is-reglee { border-top-color: #2F8F4E; }
.cpb-cp-recu {
  margin: .45rem 0 0; font-weight: 700; font-size: 1.02rem; color: #1E6B39;
  display: flex; align-items: center; gap: .45rem;
}

/* ── LES ARTICLES, EN CARTES ─────────────────────────────────────────
   ⚠ « 1 × Bodywarmer — Navy — M — 70 € » était une ligne de bon de
   commande : on la déchiffrait au lieu de la reconnaître. */
.cpb-cp-arts { list-style: none; margin: 0; padding: 0; }
.cpb-cp-arts > li {
  display: flex; gap: .85rem; align-items: flex-start;
  padding: .95rem 0; border-bottom: 1px solid var(--cpb-border, #E3E7EF);
}
.cpb-cp-arts > li:first-child { padding-top: .2rem; }
.cpb-cp-arts > li:last-child { border-bottom: 0; padding-bottom: .2rem; }
.cpb-cp-arts .vig {
  flex: 0 0 auto; width: 5rem; height: 5rem; border-radius: .7rem;
  background: var(--cpb-bg, #F5F6F9); border: 1px solid var(--cpb-border, #E3E7EF);
  object-fit: contain; display: block;
}
.cpb-cp-arts .txt { flex: 1 1 8rem; min-width: 0; }
/* ⚠ ENFANT DIRECT, ET C'EST UNE CORRECTION DE RECETTE. Sans le « > »,
   la règle attrapait AUSSI le `<b>` de la valeur de personnalisation, et
   « Numéro : 10 » se lisait sur deux lignes — la valeur sous son propre
   libellé. Le nom de l'article est le seul `<b>` qui doit occuper sa
   ligne. */
.cpb-cp-arts .txt > b {
  display: block; font-size: 1rem; line-height: 1.3; overflow-wrap: anywhere;
}
.cpb-cp-arts .sous {
  display: block; color: var(--cpb-muted, #5B6472);
  font-size: .88rem; margin-top: .15rem;
}
/* ⚠ LA PERSONNALISATION SE DÉTACHE : c'est la seule chose qu'on ne peut
   plus rattraper après la broderie. Elle n'est pas une précision de
   plus, elle est ce qu'on vient relire. */
.cpb-cp-arts .perso {
  display: block; margin-top: .45rem; padding: .45rem .6rem;
  background: var(--pk-soft, #F5F6F9);
  border-left: 3px solid var(--pk-brand, #13294B);
  border-radius: .5rem; font-size: .88rem;
}
.cpb-cp-arts .perso .t {
  display: block; font-size: .72rem; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase; color: var(--pk-brand, #13294B); margin-bottom: .12rem;
}
.cpb-cp-arts .perso .v { display: block; overflow-wrap: anywhere; }
.cpb-cp-arts .px {
  flex: 0 0 auto; font-weight: 700; font-size: 1rem; white-space: nowrap;
  padding-top: .1rem;
}

/* ── LE MONTANT, FORTEMENT VISIBLE ───────────────────────────────────── */
.cpb-cp-somme {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; margin: 1.1rem 0 0; padding-top: 1rem;
  border-top: 2px solid var(--cpb-border, #E3E7EF);
  font-size: 1.02rem; font-weight: 600;
}
.cpb-cp-somme .v {
  font-size: 1.6rem; font-weight: 800; letter-spacing: -.01em;
  color: var(--pk-brand, #13294B); white-space: nowrap;
}
/* Le même montant, rappelé dans le bloc de paiement : on ne fait pas
   remonter la personne pour savoir combien elle doit. */
.cpb-cp-du {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; margin: 0 0 .6rem; font-size: .98rem; font-weight: 600;
}
.cpb-cp-du .v {
  font-size: 1.35rem; font-weight: 800; color: var(--pk-brand, #13294B);
  white-space: nowrap;
}

/* ── LES MOYENS ACCEPTÉS — des pastilles, pas une puce ─────────────── */
.cpb-cp-moyens { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .4rem; }
.cpb-cp-moyens span {
  display: inline-block; padding: .3rem .7rem; border-radius: 999px;
  background: var(--pk-soft, #F5F6F9);
  border: 1px solid var(--pk-line, #E3E7EF);
  font-size: .9rem; font-weight: 600;
}

/* ── LA CASE QUI ENGAGE ──────────────────────────────────────────────
   ⚠ 44 px de cible tactile, comme tous les contrôles du parcours, et un
   `<label>` cliquable en entier : sur téléphone, viser une case de 13 px
   est le geste qui échoue. */
.cpb-cp-accord {
  display: flex; gap: .7rem; align-items: flex-start; cursor: pointer;
  padding: .7rem .8rem; min-height: 44px;
  background: var(--pk-soft, #F5F6F9);
  border: 1px solid var(--pk-line, #E3E7EF);
  border-radius: var(--cpb-radius, 14px);
  line-height: 1.45;
}
.cpb-cp-accord input { margin-top: .2rem; width: 1.15rem; height: 1.15rem; flex: 0 0 auto; }
.cpb-cp-accord:focus-within { border-color: var(--pk-brand, #13294B); }

@media (max-width: 26rem) {
  .cpb-cp-arts .vig { width: 3.9rem; height: 3.9rem; }
  .cpb-cp-arts .px { font-size: .95rem; }
  .cpb-cp-somme .v { font-size: 1.42rem; }
}

/* ══════════════════════════════════════════════════════════════════════
 * FERMETURE LOT 3 — SORTIR DU TUNNEL, ET LE MONTRER
 * ══════════════════════════════════════════════════════════════════════
 * ⚠ CE QUI REMPLACE LA FRISE une fois la commande enregistrée : un
 * STATUT, pas un avancement. La frise disait « Vérifier et confirmer —
 * Étape 3 sur 3 » sur une commande déjà réglée ; elle promettait une
 * action qui n'existait plus. */
.cpb-cp-suivi {
  margin: 0 0 1.1rem; padding: .55rem .9rem;
  border-radius: var(--cpb-radius, 14px);
  background: var(--pk-soft, #F5F6F9);
  border: 1px solid var(--pk-line, #E3E7EF);
  border-left: 3px solid var(--pk-brand, #13294B);
  font-size: .95rem; color: var(--cpb-muted, #5B6472);
  display: flex; align-items: center; gap: .45rem;
}
.cpb-cp-suivi b { color: var(--cpb-text, #182235); font-weight: 700; }
.cpb-cp-suivi.is-ok {
  background: #ECFDF5; border-color: #A7F3D0; border-left-color: #2F8F4E;
  color: #1E6B39;
}
.cpb-cp-suivi.is-ok b { color: #14532D; }

/* ── LA CARTE QUI PORTE L'ACTION DU MOMENT ────────────────────────────
   ⚠ « Le paiement doit être visuellement LA prochaine action évidente. »
   Sur une commande enregistrée et impayée, le règlement ne doit pas se
   lire comme une carte parmi d'autres. */
.cpb-cp-card.is-action {
  border: 1px solid var(--pk-line, #E3E7EF);
  border-left: 4px solid var(--pk-brand, #13294B);
  box-shadow: 0 2px 14px rgba(19, 41, 75, .08);
}
/* ⚠ ET LE CONSTAT DE PAIEMENT DOIT ÊTRE PLUS FORT QUE TOUTE ACTION
   SECONDAIRE : c'est la première chose à lire, et la seule qui compte. */
.cpb-cp-fin.is-reglee { border-top-width: 4px; }
.cpb-cp-paye {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; margin: .8rem 0 0; padding-top: .8rem;
  border-top: 1px solid #A7F3D0; font-size: 1rem; font-weight: 600;
}
.cpb-cp-paye .v {
  font-size: 1.6rem; font-weight: 800; color: #1E6B39; white-space: nowrap;
}

/* ── ACTIONS TERTIAIRES : présentes, jamais concurrentes ───────────────
   ⚠ « Commander d'autres articles » prenait la même place qu'un
   règlement à faire. Il reste atteignable, en bas, en petit. */
.cpb-cp-tertiaire {
  margin: 1.4rem 0 0; padding-top: 1rem;
  border-top: 1px solid var(--cpb-border, #E3E7EF);
}
.cpb-cp-tertiaire .cpb-cp-h2 {
  font-size: .95rem; margin-bottom: .35rem;
}

/* ── LISTE « MES COMMANDES » : l'état d'abord, l'action ensuite ──────── */
.cpb-cp-card.is-regle { border-left: 4px solid #2F8F4E; }
.cpb-cp-card.is-adu   { border-left: 4px solid var(--pk-brand, #13294B); }
.cpb-cp-actions {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  margin-top: .9rem;
}

/* ══ MAJ-11 — LA LIMITE PAR PARTICIPANT, CÔTÉ PARTICIPANT ══════════════
 *
 * ⚠ ELLE SE LIT AVANT LE CLIC. Le plafond (MAJ-01) ne s'affichait que sur
 * la fiche, c'est-à-dire APRÈS avoir choisi : on apprenait la règle en s'y
 * cognant. La pastille la porte sur la vignette du catalogue.
 *
 * ⚠ DEUX ÉTATS, DEUX LECTURES. Tant qu'il reste de la place, la pastille
 * est SOBRE (elle informe) ; une fois le maximum atteint, elle est
 * ALERTE (elle explique pourquoi le bouton a changé). Une seule couleur
 * aurait fait du plafond un avertissement permanent.
 */
.cpb-cp-lim {
  display: inline-block; align-self: flex-start; margin-top: .3rem;
  padding: .12rem .55rem; border-radius: 999px;
  font-size: .76rem; font-weight: 700; line-height: 1.5;
  background: var(--pk-soft, #F5F6F9); color: var(--cpb-muted, #5B6472);
  border: 1px solid var(--cpb-border, #E3E7EF);
}
.cpb-cp-lim.is-full {
  background: #FFF3F3; border-color: #F0C9C9; color: #9B2C2C;
}
.cpb-cp-lim-msg {
  margin: 0 0 .4rem; font-size: .8rem; font-weight: 600; color: #9B2C2C;
}

/* La fiche article, quand il ne reste plus rien à prendre : on explique,
   on ne propose plus un formulaire dont l'envoi sera refusé. */
.cpb-cp-plein {
  margin: .2rem 0 1rem; padding: .85rem .95rem;
  border: 1px solid #F0C9C9; border-radius: var(--cpb-radius, 14px);
  background: #FFF6F6;
}
.cpb-cp-plein-t {
  margin: 0 0 .35rem; font-size: 1rem; font-weight: 800; color: #9B2C2C;
}
.cpb-cp-plein-d {
  margin: 0 0 .35rem; font-size: .88rem; line-height: 1.5;
  color: var(--cpb-text, #1C2430);
}
.cpb-cp-plein-d:last-child { margin-bottom: 0; }

/* ⛑ §86 A9 (recette 22/09/2026) — ANNONCE DU MOYEN DE RÈGLEMENT.
   Le choix se faisait dans un <select> natif : au téléphone, il faut ouvrir
   un menu système pour découvrir deux ou trois options qui tiendraient à
   l'écran. Ces boutons-choix sont des <input type="radio"> stylés — aucun
   script, aucune règle changée, et la cible tactile fait 44 px de haut. */
.cpb-cp-annonce-choix {
  display: flex; flex-wrap: wrap; gap: .5rem; margin: 0;
}
.cpb-cp-annonce-opt {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 44px; padding: .45rem .85rem; cursor: pointer;
  border: 1px solid var(--cpb-border, #D7DBE3); border-radius: 999px;
  background: var(--cpb-surface, #FFF); line-height: 1.2;
}
.cpb-cp-annonce-opt:hover { background: var(--cpb-bg, #F5F6F9); }
.cpb-cp-annonce-opt input { width: 18px; height: 18px; margin: 0; cursor: pointer; }
/* ⚠ L'ÉTAT COCHÉ SE VOIT SANS DÉPENDRE DU SCRIPT : `:has()` d'abord, et la
   classe serveur `is-on` en repli pour les navigateurs qui ne l'ont pas. */
.cpb-cp-annonce-opt.is-on,
.cpb-cp-annonce-opt:has(input:checked) {
  border-color: var(--cpb-navy, #16324F); background: var(--cpb-navy-soft, #EEF2F6);
  font-weight: 600;
}
.cpb-cp-annonce-opt:focus-within { outline: 2px solid #2563eb; outline-offset: 2px; }