/* Monde noir et blanc v9 : « épreuve imprimée ». Pop-up et offres. Chargé après la feuille de l'atelier.
   Aucune couleur ici : encre, blanc, gris froid. Le grain ne bouge jamais. La trame n'occupe jamais qu'un coin.
   L'intro (onde, poussière, cartes) et l'ouverture de la pop-up sont pilotées par le script et les règles de l'atelier : intactes. */

/* ---------- Le monde gris : grain froid, lumière d'en haut ---------- */
.paper::after {
  background-color: #e5e7e9;
  background-image:
    radial-gradient(110% 70% at 50% -8%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 62%),
    linear-gradient(180deg, rgba(20, 24, 30, 0) 60%, rgba(20, 24, 30, 0.05) 100%);
  background-size: 100% 100%, 100% 100%;
}
.act#act-offres ::selection, .offer ::selection { background: rgba(11, 11, 11, 0.16); }

/* ---------- Boutons : encre en relief (offres et pop-up) ---------- */
.plan .btn--primary, .offer .btn--primary {
  color: #fff; border-color: transparent; background-color: #0b0b0b;
  background-image: var(--ink-face);
  background-size: 100% 100%;
  box-shadow: var(--ink-edge);
  transition: transform 120ms var(--ease-out), box-shadow 160ms var(--ease-out), background-color 160ms ease;
}
.plan .btn--primary:active, .offer .btn--primary:active {
  transform: translateY(1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), inset 0 0 0 1px rgba(0, 0, 0, 0.9), 0 0 1px rgba(0, 0, 0, 0.2);
}
.plan .btn--ghost, .offer .btn--ghost {
  box-shadow: inset 0 0 0 1px rgba(11, 11, 11, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  border-color: transparent;
}

/* ---------- Les cartes : feuilles posées sur le gris ---------- */
.plan {
  position: relative; isolation: isolate;
  border-color: transparent;
  background: linear-gradient(180deg, #fff 0%, #fcfcfd 100%);
  box-shadow: 0 0 0 1px rgba(11, 11, 11, 0.07), inset 0 1px 0 #fff,
    0 1px 1px rgba(20, 24, 30, 0.04), 0 3px 6px -3px rgba(20, 24, 30, 0.08), 0 22px 36px -22px rgba(20, 24, 30, 0.26);
}
/* trame ordonnée : un dégradé de coin, jamais le cadre entier */
.plan::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background: var(--trame-noire); opacity: 0.11;
  -webkit-mask-image: radial-gradient(85% 62% at 100% 0%, #000 0%, transparent 72%);
          mask-image: radial-gradient(85% 62% at 100% 0%, #000 0%, transparent 72%);
}
/* crochets d'angle : la formule choisie, à la place de l'anneau */
.plan::after {
  content: ""; position: absolute; inset: -8px; pointer-events: none; border-radius: 4px;
  --c: var(--ink); --l: 12px;
  background:
    linear-gradient(var(--c), var(--c)) 0 0 / var(--l) 1.5px no-repeat, linear-gradient(var(--c), var(--c)) 0 0 / 1.5px var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 0 / var(--l) 1.5px no-repeat, linear-gradient(var(--c), var(--c)) 100% 0 / 1.5px var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) 0 100% / var(--l) 1.5px no-repeat, linear-gradient(var(--c), var(--c)) 0 100% / 1.5px var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 100% / var(--l) 1.5px no-repeat, linear-gradient(var(--c), var(--c)) 100% 100% / 1.5px var(--l) no-repeat;
  opacity: 0; transform: scale(1.02);
  transition: opacity 160ms var(--ease-out), transform 220ms var(--ease-out);
}
.plan.is-chosen::after { opacity: 1; transform: none; }
.plan.is-chosen, .plan--encre.is-chosen { box-shadow: none; }
.plan.is-chosen:not(.plan--encre):not(.plan--mesure) {
  box-shadow: 0 0 0 1px rgba(11, 11, 11, 0.1), inset 0 1px 0 #fff, 0 1px 1px rgba(20, 24, 30, 0.04), 0 3px 6px -3px rgba(20, 24, 30, 0.08), 0 22px 36px -22px rgba(20, 24, 30, 0.26);
}
.plan.is-pre { box-shadow: none; }
.plan.is-pre::after { opacity: 0; }

/* Pro : l'encre en relief, trame blanche dans le coin haut droit */
.plan--encre {
  background-color: #0b0b0b; background-image: var(--ink-face);
  background-size: 100% 100%;
  border-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 0 0 1px rgba(0, 0, 0, 0.9), 0 2px 4px rgba(20, 24, 30, 0.2), 0 30px 50px -28px rgba(20, 24, 30, 0.62);
}
.plan--encre::before { background: var(--trame-blanche); opacity: 0.22; -webkit-mask-image: radial-gradient(80% 58% at 100% 0%, #000 0%, transparent 70%); mask-image: radial-gradient(80% 58% at 100% 0%, #000 0%, transparent 70%); }
.plan--encre.is-chosen { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 0 0 1px rgba(0, 0, 0, 0.9), 0 2px 4px rgba(20, 24, 30, 0.2), 0 30px 50px -28px rgba(20, 24, 30, 0.62); }
.plan--encre.is-pre { box-shadow: none; }

/* Sur mesure : le filaire, sa trame à peine posée */
.plan--mesure { background: rgba(255, 255, 255, 0.22); box-shadow: inset 0 0 0 1px rgba(11, 11, 11, 0.24); }
.plan--mesure::before { opacity: 0.07; }
.plan--mesure.is-chosen { box-shadow: inset 0 0 0 1px rgba(11, 11, 11, 0.24); }
.plan--mesure.is-pre { box-shadow: none; }

/* « Conseillé » : une étiquette gravée dans l'encre */
.plan__tag {
  font: 500 10.5px/1 var(--mono); letter-spacing: 0.09em; text-transform: uppercase;
  padding: 6px 8px 5px; border-radius: 4px;
}
.plan--encre .plan__tag {
  background: rgba(0, 0, 0, 0.28); color: rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.18), 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* chiffres et étiquettes d'instrument */
.plan__amt, .plan__was, .plan__min b, .plan__min span { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.plan__per { font: 500 11px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }
.plan__min { border-block-style: dashed; border-block-color: rgba(11, 11, 11, 0.2); }
.plan--encre .plan__min { border-block-color: rgba(255, 255, 255, 0.22); }

/* le bouton du Pro : du papier posé sur l'encre */
.plan--encre .plan__cta {
  background-color: #fff; background-image: linear-gradient(180deg, #ffffff 0%, #ecebe9 100%); color: var(--ink);
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(0, 0, 0, 0.5), 0 6px 12px -8px rgba(0, 0, 0, 0.6);
}
.plan--encre .plan__cta:active { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 0 1px rgba(0, 0, 0, 0.5); }

/* l'automatisation offerte : un bloc d'encre en relief */
.plan__feat .is-hl {
  background-color: #0b0b0b; background-image: var(--ink-face);
  background-size: 100% 100%;
  box-shadow: var(--ink-edge); border-radius: 10px;
}

/* ---------- Mensuel / Annuel : piste creusée, curseur d'encre en relief ---------- */
.seg {
  background: #d9dbde;
  box-shadow: inset 0 0 0 1px rgba(11, 11, 11, 0.08), inset 0 1px 3px rgba(20, 24, 30, 0.18), 0 1px 0 rgba(255, 255, 255, 0.7);
}
.seg__ind {
  background-color: #0b0b0b; background-image: var(--ink-face);
  background-size: 100% 100%;
  box-shadow: var(--ink-edge);
}
.seg__off { font-weight: 500; letter-spacing: 0.02em; background: rgba(11, 11, 11, 0.09); }

/* ---------- Pied ---------- */
.plans__foot { padding-top: 2px; }

/* ---------- Pop-up : une carte blanche au premier plan ---------- */
.offer {
  background: linear-gradient(180deg, #fff 0%, #fdfdfd 100%);
  box-shadow: 0 0 0 1px rgba(11, 11, 11, 0.1), inset 0 1px 0 #fff,
    0 2px 4px rgba(20, 24, 30, 0.06), 0 18px 40px -14px rgba(20, 24, 30, 0.3), 0 54px 100px -34px rgba(20, 24, 30, 0.5);
}
/* croix de repérage aux quatre coins, hors de la carte (bureau seulement : la feuille mobile défile) */
@media (min-height: 640px) and (min-width: 701px) {
  .offer { overflow: visible; }
  .offer::after {
    content: ""; position: absolute; inset: -16px; pointer-events: none;
    --c: rgba(255, 255, 255, 0.7);
    background:
      linear-gradient(var(--c), var(--c)) 7px 0 / 1px 15px no-repeat, linear-gradient(var(--c), var(--c)) 0 7px / 15px 1px no-repeat,
      linear-gradient(var(--c), var(--c)) calc(100% - 7px) 0 / 1px 15px no-repeat, linear-gradient(var(--c), var(--c)) 100% 7px / 15px 1px no-repeat,
      linear-gradient(var(--c), var(--c)) 7px 100% / 1px 15px no-repeat, linear-gradient(var(--c), var(--c)) 0 calc(100% - 7px) / 15px 1px no-repeat,
      linear-gradient(var(--c), var(--c)) calc(100% - 7px) 100% / 1px 15px no-repeat, linear-gradient(var(--c), var(--c)) 100% calc(100% - 7px) / 15px 1px no-repeat;
  }
}
/* « Où en est Léa » : un instrument (coches, données en mono, filets pointillés) */
.offer__steps { border-block: 1px dashed rgba(11, 11, 11, 0.22); padding: 6px 0; }
.offer__steps li + li { background: linear-gradient(90deg, rgba(11, 11, 11, 0.16) 50%, transparent 0) 0 0 / 6px 1px repeat-x; }
.offer__steps .v { font-size: 12px; letter-spacing: 0.02em; }
.offer__steps li[data-s="todo"] .v { text-transform: uppercase; font-size: 11px; letter-spacing: 0.08em; }
.ck circle { filter: drop-shadow(0 1px 0 rgba(20, 24, 30, 0.25)); }
.offer__go { box-shadow: var(--ink-edge); }

@media (hover: hover) and (pointer: fine) {
  .plan .btn--primary:hover, .offer .btn--primary:hover { background-color: #1a1a19; box-shadow: var(--ink-edge), 0 8px 16px -10px rgba(0, 0, 0, 0.5); }
  .plan--encre .plan__cta:hover { background-color: #fff; background-image: linear-gradient(180deg, #ffffff 0%, #f4f3f1 100%); }
  .plan .btn--ghost:hover { box-shadow: inset 0 0 0 1px rgba(11, 11, 11, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.5); }
  .plan:not(.is-pre):not(.plan--encre):not(.plan--mesure):hover { box-shadow: 0 0 0 1px rgba(11, 11, 11, 0.14), inset 0 1px 0 #fff, 0 1px 1px rgba(20, 24, 30, 0.04), 0 3px 6px -3px rgba(20, 24, 30, 0.08), 0 22px 36px -22px rgba(20, 24, 30, 0.26); }
}

@media (max-width: 700px) {
  .offer { overflow-y: auto; }
  .plan::after { inset: -6px; }
}
@media (prefers-reduced-motion: reduce) {
  .plan::after { transform: none; transition: opacity 160ms linear; }
  .plan .btn--primary, .offer .btn--primary { transition: none; }
}

/* ---------- Passage vers My Agent (maquette connectée) ----------
   Après le choix d'une formule, la page se fond dans le papier : on quitte le monde gris, la couleur revient avec l'app. */
.to-app { position: fixed; inset: 0; z-index: 9999; pointer-events: none; background: var(--paper); opacity: 0; transition: opacity 320ms var(--ease-out); }
.to-app.is-on { opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .to-app { transition: opacity 120ms linear; } }