/* ═══════════════════════════════════════════════════════════════════════════
   LE PANIER — bouton de barre, tiroir, et les blocs de la page Commander.

   Cette feuille est chargée sur toutes les pages, y compris celles qui
   n'ont pas les tokens de section (.t-asst & co). Elle ne s'appuie donc que
   sur les variables globales posées par la coquille — --ink pour le texte,
   --surface-tint pour les surfaces, --border, --indigo — et porte une
   valeur de repli pour chacune, au cas où une page ancienne en manquerait.
   ═══════════════════════════════════════════════════════════════════════════ */

/*  --ink porte DEUX sens dans ce site. À la racine c'est la couleur du
    texte ; dans les sections .t-story, .t-asst, .t-price & co, c'est la
    couleur de fond de la section. Un bouton du panier posé dans une de
    ces sections héritait donc d'un texte de la couleur du fond : noir sur
    noir en sombre, blanc sur blanc en clair. On lit --parch en premier,
    le vrai jeton de texte de ces sections, et --foreground ensuite pour
    le reste du site. --ink n'est plus consulté : il est ambigu.  */
.pn-btn,.pn-tiroir,.pn-scrim,[data-panier],[data-panier-page]{
  --pn-txt:var(--parch,var(--foreground,#F6EEE7));
  --pn-fond:var(--background,#140F0C);
  --pn-surf:var(--surface-tint,#1C1611);
  --pn-fil:var(--border,rgba(246,238,231,.1));
  --pn-acc:var(--indigo,#E0631F);
  --pn-acc2:var(--indigo-light,#F4823E);
  --pn-doux:color-mix(in oklab,var(--pn-txt) 58%,transparent);
  --pn-e:cubic-bezier(.16,1,.3,1)}

/* ═══ LE BOUTON DE LA BARRE ═════════════════════════════════════════════ */
.pn-btn{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;
  min-height:44px;padding:0 16px;border-radius:100px;cursor:pointer;
  background:none;border:1px solid var(--pn-fil);color:var(--pn-txt);
  font-family:inherit;font-size:14.5px;font-weight:600;letter-spacing:-.2px;
  white-space:nowrap;
  transition:border-color .25s var(--pn-e),background .25s var(--pn-e)}
.pn-btn:hover{border-color:color-mix(in oklab,var(--pn-acc) 55%,transparent);
  background:color-mix(in oklab,var(--pn-acc) 8%,transparent)}
.pn-btn:focus-visible{outline:3px solid var(--pn-acc);outline-offset:3px}
.pn-btn svg{width:17px;height:17px;flex:0 0 auto}
.pn-n{display:inline-flex;align-items:center;justify-content:center;
  min-width:20px;height:20px;padding:0 6px;border-radius:100px;
  background:var(--pn-acc);color:#fff;
  font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:11.5px;font-weight:700;
  transition:transform .3s var(--pn-e),opacity .2s ease}
.pn-n.zero{opacity:0;transform:scale(.6);width:0;min-width:0;padding:0;margin-left:-8px}

/* la barre se serre avant le menu mobile : le libellé part en premier */
@media (max-width:1180px){ .pn-btn .pn-btn-t{display:none} .pn-btn{padding:0 13px} }
@media (max-width:860px){ .pn-btn{display:none} }

.tnav-menu .m-panier{display:flex;align-items:center;gap:10px;width:100%;
  padding:14px 16px;border:0;border-radius:14px;background:none;color:var(--pn-txt);
  font-family:inherit;font-size:16px;font-weight:600;letter-spacing:-.2px;
  text-align:left;cursor:pointer}
.tnav-menu .m-panier:hover{background:color-mix(in oklab,var(--pn-acc) 8%,transparent)}

/* ═══ LE TIROIR ═════════════════════════════════════════════════════════ */
.pn-scrim{position:fixed;inset:0;z-index:98;
  background:rgba(0,0,0,.5);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  opacity:0;transition:opacity .3s ease}
html.pn-ouvert .pn-scrim{opacity:1}

.pn-tiroir{position:fixed;top:0;right:0;bottom:0;z-index:99;
  width:min(420px,100%);display:flex;flex-direction:column;
  background:var(--pn-fond);border-left:1px solid var(--pn-fil);
  box-shadow:-30px 0 80px -40px rgba(0,0,0,.9);
  transform:translateX(100%);
  transition:transform .42s var(--pn-e)}
html[data-theme="light"] .pn-tiroir{box-shadow:-30px 0 80px -40px rgba(40,25,16,.35)}
html.pn-ouvert .pn-tiroir{transform:none}
.pn-tiroir[hidden]{display:none}

.pn-hd{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 22px;border-bottom:1px solid var(--pn-fil);flex:0 0 auto}
.pn-hd b{font-size:18px;font-weight:800;letter-spacing:-.5px;color:var(--pn-txt)}
.pn-x{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:none;border:1px solid var(--pn-fil);color:var(--pn-txt);cursor:pointer;
  transition:background .25s var(--pn-e)}
.pn-x:hover{background:color-mix(in oklab,var(--pn-txt) 8%,transparent)}
.pn-x:focus-visible{outline:3px solid var(--pn-acc);outline-offset:2px}
.pn-x svg{width:16px;height:16px}

.pn-corps{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:22px}
.pn-sec{margin:0 0 26px}
.pn-sec h3{margin:0 0 12px;font-family:ui-monospace,"SF Mono",Menlo,monospace;
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--pn-doux)}

/* ═══ LA LISTE DES ASSISTANTS ═══════════════════════════════════════════ */
.pn-ags{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pn-ag{display:flex;align-items:center;gap:12px;width:100%;
  padding:11px 13px;border-radius:16px;cursor:pointer;text-align:left;
  background:none;border:1px solid var(--pn-fil);color:var(--pn-txt);
  font-family:inherit;
  transition:border-color .25s var(--pn-e),background .25s var(--pn-e)}
.pn-ag:hover{border-color:color-mix(in oklab,var(--pn-acc) 45%,transparent)}
.pn-ag:focus-visible{outline:3px solid var(--pn-acc);outline-offset:2px}
.pn-ag.on{border-color:color-mix(in oklab,var(--pn-acc) 55%,transparent);
  background:color-mix(in oklab,var(--pn-acc) 9%,transparent)}
.pn-ag img{width:40px;height:40px;border-radius:12px;flex:0 0 auto;object-fit:cover;
  background:var(--pn-surf)}
.pn-ag-t{flex:1;min-width:0;display:block}
.pn-ag-t b{display:block;font-size:14.5px;font-weight:700;letter-spacing:-.25px;
  line-height:1.25}
.pn-ag-t small{display:block;font-size:12.5px;line-height:1.3;color:var(--pn-doux);
  margin-top:2px}
/* La marque de sélection. Un anneau vide au repos, un disque plein dont la
   coche se trace quand l'assistant est choisi. Le dessin ne change jamais :
   seules la teinte et la longueur du trait bougent, donc la pastille se
   remplit au lieu de sauter d'une icône à l'autre. */
.pn-ag-x{flex:0 0 auto;width:24px;height:24px}
.pn-ag-x svg{display:block;width:24px;height:24px}
.pn-mk-r{fill:none;stroke:color-mix(in oklab,var(--pn-txt) 26%,transparent);stroke-width:1.4;
  transition:fill .28s var(--pn-e),stroke .28s var(--pn-e)}
.pn-mk-v{fill:none;stroke:#fff;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:14;stroke-dashoffset:14;
  transition:stroke-dashoffset .34s var(--pn-e) .04s}
.pn-ag:hover .pn-mk-r{stroke:color-mix(in oklab,var(--pn-txt) 46%,transparent)}
.pn-ag.on .pn-mk-r,.pn-ag.on:hover .pn-mk-r{fill:var(--pn-acc);stroke:var(--pn-acc)}
.pn-ag.on .pn-mk-v{stroke-dashoffset:0}

/* ═══ L'ENGAGEMENT ══════════════════════════════════════════════════════ */
.pn-engs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.pn-eng{display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:11px 4px;border-radius:14px;cursor:pointer;
  background:none;border:1px solid var(--pn-fil);color:var(--pn-doux);
  font-family:inherit;font-size:12.5px;font-weight:600;letter-spacing:-.2px;
  transition:border-color .25s var(--pn-e),background .25s var(--pn-e),color .25s var(--pn-e)}
.pn-eng i{font-style:normal;font-family:ui-monospace,"SF Mono",Menlo,monospace;
  font-size:10.5px;color:var(--pn-acc)}
.pn-eng:hover{color:var(--pn-txt);border-color:color-mix(in oklab,var(--pn-acc) 45%,transparent)}
.pn-eng:focus-visible{outline:3px solid var(--pn-acc);outline-offset:2px}
.pn-eng.on{background:color-mix(in oklab,var(--pn-acc) 12%,transparent);
  border-color:color-mix(in oklab,var(--pn-acc) 55%,transparent);color:var(--pn-txt)}
.pn-eng.on i{color:var(--pn-acc2)}

/* ═══ LE RÉCAPITULATIF ══════════════════════════════════════════════════ */
.pn-recap{padding:18px 18px 16px;border-radius:20px;
  background:var(--pn-surf);border:1px solid var(--pn-fil)}
.pn-vide{margin:0;font-size:14px;line-height:1.5;color:var(--pn-doux)}

/* Une seule chose doit sauter aux yeux : ce qu'il y a à payer le premier
   mois. Tout le reste — le nom de la formule, les deux lignes du détail —
   se tient un cran en dessous, sinon trois graisses se disputent la carte
   et on ne sait plus où regarder. */
.pn-formule{margin:0 0 16px;padding:0 0 16px;
  border-bottom:1px solid color-mix(in oklab,var(--pn-txt) 8%,transparent)}
.pn-formule-l{display:block;font-family:ui-monospace,"SF Mono",Menlo,monospace;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:color-mix(in oklab,var(--pn-txt) 42%,transparent)}
.pn-formule b{display:block;margin:6px 0 3px;font-size:26px;font-weight:800;
  letter-spacing:-1.1px;line-height:1;color:var(--pn-txt)}
.pn-formule small{font-size:13px;line-height:1.4;color:var(--pn-doux)}

.pn-lignes{margin:0;display:grid;gap:11px}
.pn-lignes > div{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.pn-lignes dt{font-size:13.5px;color:var(--pn-doux)}
.pn-lignes dd{margin:0;font-size:14.5px;font-weight:600;letter-spacing:-.2px;
  color:var(--pn-txt);font-variant-numeric:tabular-nums;text-align:right}
.pn-lignes dd span{font-weight:500;font-size:12.5px;color:var(--pn-doux)}
.pn-lignes dd s{color:color-mix(in oklab,var(--pn-txt) 38%,transparent);font-weight:500}
.pn-lignes dd em{font-style:normal;font-weight:700;color:var(--pn-acc)}
.pn-fort{margin-top:7px;padding-top:15px;
  border-top:1px solid color-mix(in oklab,var(--pn-txt) 8%,transparent)}
.pn-fort dt{color:var(--pn-txt);font-weight:700;font-size:14.5px;letter-spacing:-.2px}
.pn-fort dd{font-size:28px;font-weight:800;letter-spacing:-1.2px;line-height:1}

/* L'économie était une phrase précédée d'une coche, c'est-à-dire la même
   ponctuation que les listes de garanties plus bas. Ce n'est pas une
   garantie, c'est un montant : une pastille le dit mieux qu'un signe. */
.pn-eco{display:inline-flex;align-items:baseline;gap:5px;margin:16px 0 0;
  padding:7px 13px;border-radius:100px;
  background:color-mix(in oklab,var(--pn-acc) 13%,transparent);
  font-size:13px;line-height:1.3;letter-spacing:-.2px;color:var(--pn-acc)}
.pn-eco b{font-weight:800;font-variant-numeric:tabular-nums}
.pn-note{margin:14px 0 0;font-size:12.5px;line-height:1.55;
  color:color-mix(in oklab,var(--pn-txt) 46%,transparent)}

/* ═══ LES ACTIONS ═══════════════════════════════════════════════════════ */
.pn-actions{display:grid;gap:10px;margin-top:20px}
.pn-cta{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:52px;padding:14px 22px;border-radius:100px;text-decoration:none;
  background:linear-gradient(100deg,var(--pn-acc2),var(--pn-acc));color:#fff;
  font-size:15.5px;font-weight:700;letter-spacing:-.2px;
  box-shadow:0 10px 30px -10px color-mix(in oklab,var(--pn-acc) 75%,transparent);
  transition:transform .25s var(--pn-e),box-shadow .25s var(--pn-e)}
.pn-cta:hover{transform:translateY(-2px);
  box-shadow:0 16px 38px -10px color-mix(in oklab,var(--pn-acc) 85%,transparent)}
.pn-cta svg{width:16px;height:16px}
.pn-cta.off{pointer-events:none;opacity:.4;box-shadow:none}
/* la ligne qui rassure, juste sous le bouton qui prend l'argent :
   c'est elle qui fait cliquer, pas le bouton */
.pn-rassure{margin:-2px 0 2px;padding:0 4px;text-align:center;
  font-size:12.5px;line-height:1.45;
  color:color-mix(in oklab,var(--pn-txt) 46%,transparent)}
.pn-cta2{display:inline-flex;align-items:center;justify-content:center;
  min-height:46px;padding:12px 20px;border-radius:100px;text-decoration:none;
  border:1px solid var(--pn-fil);color:var(--pn-txt);
  font-size:14.5px;font-weight:600;letter-spacing:-.2px;
  transition:border-color .25s var(--pn-e)}
.pn-cta2:hover{border-color:color-mix(in oklab,var(--pn-acc) 50%,transparent)}
.pn-vider{padding:8px;border:0;background:none;color:var(--pn-doux);cursor:pointer;
  font-family:inherit;font-size:13px;text-decoration:underline;text-underline-offset:3px}
.pn-vider:hover{color:var(--pn-txt)}
.pn-cta:focus-visible,.pn-cta2:focus-visible,.pn-vider:focus-visible{
  outline:3px solid var(--pn-acc);outline-offset:3px}

/* ═══ LE BOUTON « AJOUTER » POSÉ DANS LES PAGES ═════════════════════════ */
[data-panier]{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:52px;padding:15px 26px;border-radius:100px;cursor:pointer;
  background:linear-gradient(100deg,var(--pn-acc2),var(--pn-acc));color:#fff;
  border:1px solid transparent;font-family:inherit;
  font-size:15.5px;font-weight:700;letter-spacing:-.2px;
  box-shadow:0 10px 30px -10px color-mix(in oklab,var(--pn-acc) 75%,transparent);
  transition:transform .25s var(--pn-e),box-shadow .25s var(--pn-e),
             background .25s var(--pn-e),color .25s var(--pn-e),
             border-color .25s var(--pn-e)}
[data-panier] svg{width:16px;height:16px;flex:0 0 auto}
[data-panier]:hover{transform:translateY(-2px);
  box-shadow:0 16px 38px -10px color-mix(in oklab,var(--pn-acc) 85%,transparent)}
[data-panier]:focus-visible{outline:3px solid var(--pn-acc);outline-offset:3px}
/* une fois dedans, le bouton devient un état, plus un appel à l'action */
[data-panier].is-on{background:none;color:var(--pn-txt);
  border-color:color-mix(in oklab,var(--pn-acc) 55%,transparent);box-shadow:none}
[data-panier].is-on svg{color:var(--pn-acc)}
[data-panier].is-on:hover{transform:none;
  background:color-mix(in oklab,var(--pn-acc) 9%,transparent)}

/* ═══ LA PAGE COMMANDER ═════════════════════════════════════════════════
   Tout ce bloc est cadré sur [data-panier-page], que seule la section
   de commander.html porte. Sans ce cadre, ces règles s'appliqueraient
   aussi à « Comment ça marche » : les deux pages emploient le même
   préfixe .cm-. Tant que cette feuille n'était chargée que sur
   Commander, personne ne le voyait. Depuis qu'elle l'est partout, le
   pas-à-pas de l'autre page se retrouvait écrasé — titres comprimés
   sur 66 px. Ne retirez pas le cadre, ou renommez d'abord en .pn-cm-.
   ═══════════════════════════════════════════════════════════════════ */
.cm[data-panier-page]{position:relative;overflow:hidden;padding:36px 0 96px;
  background:var(--pn-fond);color:var(--pn-txt)}
.cm[data-panier-page]::before{content:"";position:absolute;inset:auto auto -40% 50%;
  width:70%;aspect-ratio:1;border-radius:50%;pointer-events:none;
  transform:translateX(-50%);
  background:radial-gradient(circle,color-mix(in oklab,var(--pn-acc) 20%,transparent) 0%,transparent 62%)}
[data-panier-page] .cm-in{position:relative;width:100%;max-width:1180px;margin:0 auto;padding:0 24px}
[data-panier-page] .cm-head{max-width:640px;margin:0 0 46px}
[data-panier-page] .cm-tag{display:inline-flex;align-items:center;gap:8px;margin:0 0 20px;
  padding:8px 16px;border-radius:10px;
  background:color-mix(in oklab,var(--pn-acc) 12%,transparent);
  border:1px solid color-mix(in oklab,var(--pn-acc) 32%,transparent);
  font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--pn-acc)}
.cm[data-panier-page] h1{margin:0 0 16px;font-size:clamp(32px,4.2vw,56px);line-height:1.03;
  letter-spacing:-2px;font-weight:800;text-wrap:balance}
.cm[data-panier-page] h1 em{font-style:normal;color:var(--pn-acc)}
[data-panier-page] .cm-head p{margin:0;font-size:17px;line-height:1.6;color:var(--pn-doux)}

[data-panier-page] .cm-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:40px;align-items:start}
[data-panier-page] .cm-col h2{margin:0 0 14px;font-size:20px;font-weight:800;letter-spacing:-.6px}
[data-panier-page] .cm-col > section{margin:0 0 34px}
[data-panier-page] .cm-col .pn-ags{gap:10px}
[data-panier-page] .cm-col .pn-ag{padding:13px 15px;border-radius:18px}
[data-panier-page] .cm-col .pn-engs{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
[data-panier-page] .cm-col .pn-eng{padding:14px 6px;font-size:13.5px}
[data-panier-page] .cm-step{display:flex;align-items:baseline;gap:10px;margin:0 0 14px}
[data-panier-page] .cm-step i{font-style:normal;font-family:ui-monospace,"SF Mono",Menlo,monospace;
  font-size:11.5px;letter-spacing:.1em;color:var(--pn-acc)}

[data-panier-page] .cm-aside{position:sticky;top:120px;padding:24px 24px 22px;border-radius:24px;
  background:var(--pn-surf);border:1px solid var(--pn-fil);
  box-shadow:0 40px 80px -56px rgba(0,0,0,.9)}
html[data-theme="light"] .cm-aside{box-shadow:0 40px 80px -56px rgba(40,25,16,.4)}
[data-panier-page] .cm-aside .pn-recap{padding:0;background:none;border:0}
[data-panier-page] .cm-aside > h2{margin:0 0 16px}

[data-panier-page] .cm-rass{list-style:none;margin:22px 0 0;padding:18px 0 0;
  border-top:1px solid var(--pn-fil);display:grid;gap:10px}
/* En flex, un lien posé dans la phrase devenait un deuxième élément de la
   rangée : le texte se coupait en deux colonnes. La puce est donc détachée
   du flux, et la ligne redevient une simple phrase. */
[data-panier-page] .cm-rass li{position:relative;padding-left:24px;
  font-size:13.5px;line-height:1.45;color:var(--pn-doux)}
[data-panier-page] .cm-rass svg{position:absolute;left:0;top:2px;
  width:15px;height:15px;color:var(--pn-acc)}
[data-panier-page] .cm-rass a{color:var(--pn-txt);text-decoration:underline;
  text-underline-offset:3px;text-decoration-color:color-mix(in oklab,var(--pn-acc) 60%,transparent)}
[data-panier-page] .cm-rass a:hover{color:var(--pn-acc)}

@media (max-width:960px){
  .cm[data-panier-page]{padding:24px 0 72px}
  [data-panier-page] .cm-grid{grid-template-columns:1fr;gap:30px}
  [data-panier-page] .cm-aside{position:static;top:auto}
  [data-panier-page] .cm-head{margin-bottom:34px}
}
@media (max-width:560px){
  [data-panier-page] .cm-in{padding:0 18px}
  [data-panier-page] .cm-col .pn-engs,.pn-engs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pn-tiroir{width:100%}
}

@media (prefers-reduced-motion:reduce){
  .pn-tiroir,.pn-scrim,.pn-n,.pn-cta,[data-panier],
  .pn-mk-r,.pn-mk-v{transition:none}
  .pn-ag.on .pn-mk-v{stroke-dashoffset:0}
  .pn-cta:hover,[data-panier]:hover{transform:none}
}
@media (prefers-reduced-transparency:reduce){
  .pn-scrim{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(0,0,0,.72)}
}