/**
 * PITCHBASE - Cartes de plan (.plans / .plan / .p-*)
 *
 * SOURCE UNIQUE des cartes de plan, partagee par la page tarifs publique
 * (/pricing) et le panneau « Changer de plan » du dashboard.
 *
 * Elle a ete retiree de l'application le 21/09 parce que la page plein ecran
 * `#pricing` devait COMPACTER ces cartes a coups de surcharges, au point de
 * cacher son propre titre sous 700 px de haut. Le panneau lateral qui l'a
 * remplacee prend toute la hauteur de l'ecran : il les porte telles quelles,
 * sans une seule surcharge de dimension. Le probleme n'etait pas les cartes,
 * c'etait le contenant.
 *
 * `scripts/verify/_sync-plan-icons.js` regenere les icones de features et
 * pointe sur ce fichier.
 *
 * PONT DE TOKENS : le bloc parle en `--pc-*`, resolus juste en dessous. La
 * landing definit ses propres tokens, ils gagnent ; l'application ne les a pas,
 * le repli prend ses equivalents `--v2-*`. Aucune valeur n'est ecrite deux fois,
 * et les deux contextes gardent leur palette.
 */

/* PONT DE TOKENS, declare UNE SEULE FOIS.
   Il vivait en double, sur `.plans` puis sur le selecteur : un token ajoute
   d'un cote manquait de l'autre. C'est exactement ce qui est arrive a
   `--rule-2`, la piste du curseur : absent du second bloc, le degrade
   devenait invalide et le navigateur jetait le `background` entier, donc
   plus de barre du tout. Un seul endroit, plus de divergence possible. */
/* `:root` pour la landing, `.design-v2` pour l'application : c'est LA que
   vivent les tokens `--v2-*`, et un pont pose sur :root ne les voit pas
   (constate : `--pc-rule-2` sortait vide, donc pas de piste de curseur). */
:root, .design-v2 {
    --pc-bg-3: var(--bg-3, var(--v2-panel));
    --pc-ink: var(--ink, var(--v2-txt));
    --pc-ink-2: var(--ink-2, var(--v2-txt2));
    --pc-ink-3: var(--ink-3, var(--v2-txt3));
    --pc-ink-4: var(--ink-4, var(--v2-txt4));
    --pc-rule: var(--rule, var(--v2-bd));
    --pc-signal: var(--signal, var(--color-primary-500));
    --pc-surface-d-3: var(--surface-d-3, var(--v2-bd2));
    --pc-mono: var(--mono, var(--v2-mono));
    --pc-sans: var(--sans, system-ui, -apple-system, sans-serif);
    --pc-ease-out: var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
    --pc-press: var(--press, scale(0.97));
    --pc-signal-soft: var(--signal-soft, rgba(255,77,46,.18));
    --pc-rule-2: var(--rule-2, var(--v2-bd2));
    /* Fond de la carte mise en avant, et le couple du balayage de son CTA.
       Ces trois-la etaient ecrits en dur (#FFF8F6, `white`) : sur la landing,
       toujours claire, aucun probleme ; dans l'application en theme SOMBRE,
       la carte gardait son creme pendant que --pc-ink passait au blanc, donc
       du blanc sur du creme (1,05:1, illisible). Le repli litteral garde la
       valeur claire pour la landing ; le bloc sombre juste dessous les
       bascule pour l'application. */
    --pc-pop-bg: var(--pop-bg, #FFF8F6);
    --pc-pop-wipe: var(--pop-wipe, #FFFFFF);
    --pc-pop-wipe-ink: var(--pop-wipe-ink, #0B0D0F);
    /* Texte pose sur --pc-ink (le CTA plein des cartes non mises en avant).
       C'etait `white` en dur : en sombre --pc-ink devient clair, le libelle
       disparaissait. --v2-sig-ink bascule deja, c'est le meme couple. */
    --pc-on-ink: var(--sig-ink, var(--v2-sig-ink, #FFFFFF));
}

/* THEME SOMBRE (application seulement : la landing n'a pas de data-theme).
   `[data-theme="dark"] .design-v2` bat `.design-v2` en specificite, comme le
   bloc de jetons --v2-* de b2b.css qu'il suit. */
[data-theme="dark"] .design-v2 {
    /* Un voile orange sur le panneau sombre : la carte reste MISE EN AVANT
       sans redevenir claire. Ecrit en gradient pour que la teinte suive le
       panneau au lieu d'un hexa fige de plus. */
    --pc-pop-bg: linear-gradient(rgba(255,77,46,.10), rgba(255,77,46,.10)), var(--v2-panel);
    --pc-pop-wipe: var(--v2-panel);
    --pc-pop-wipe-ink: var(--v2-txt);
}

.plans {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    max-width: 1100px;
    margin: 0 auto;
}
.plans-2 { grid-template-columns: repeat(2, 1fr); max-width: 720px; }
@media (max-width: 960px) {
    .plans { grid-template-columns: 1fr; max-width: 460px; }
}
/* Tarifs v6 (25/09) : Essentiel, Pro, Intensif ET Entreprise sur une ligne
   (décision Briac : le bandeau « sur mesure » sous les cartes ne se voyait pas).
   Quatre colonnes dans le shell de 1 240 px font des cartes de ~285 px : on
   resserre le padding et le prix. Deux colonnes sous 1 180 px, une sous 960. */
/* Plus large que le shell (1 176 px utiles) : la grille déborde symétriquement
   jusqu'à 1 300 px, sans dépasser la fenêtre moins 48 px. `translate` (et non
   `transform`) pour ne pas écraser l'animation d'entrée `.reveal`. Cartes plus
   basses : moins de vide vertical, lignes un cran plus serrées (retour Briac 25/09). */
.plans-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    width: min(1300px, calc(100vw - 48px));
    max-width: none;
    margin-left: 50%;
    translate: -50% 0;
}
.plans-4 .plan { padding: 24px 24px 22px; border-radius: 18px; }
.plans-4 .plan .price .num { font-size: 38px; }
.plans-4 .plan .price .num.num-text { font-size: 28px; line-height: 38px; }
.plans-4 .plan .p-desc { min-height: 2.9em; margin-bottom: 16px; } /* garde les boutons alignés */
.plans-4 .plan .p-cta { margin-bottom: 14px; padding: 12px 18px; }
.plans-4 .plan .p-trust { margin: -2px 0 14px; }
.plans-4 .plan .p-feats { gap: 7px; padding-top: 16px; }
.plans-4 .plan .p-feats li { font-size: 13px; line-height: 1.45; }
.plans-4 .plan .p-feats-head { margin-top: 16px; padding-top: 16px; }
@media (max-width: 1180px) {
    .plans-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); width: auto; max-width: 760px; margin-left: auto; translate: none; }
}
@media (max-width: 960px) {
    .plans-4 { grid-template-columns: 1fr; max-width: 460px; }
}
.plan {
    background: var(--pc-bg-3);
    border: 1px solid var(--pc-rule);
    border-radius: 20px;
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform 320ms var(--pc-ease-out), box-shadow 320ms var(--pc-ease-out), border-color 220ms var(--pc-ease-out);
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
@media (hover: hover) and (pointer: fine) {
    .plan:hover {
        transform: translateY(-4px);
        border-color: var(--pc-ink-3);
        box-shadow: 0 2px 4px rgba(0,0,0,0.04), 0 20px 36px -16px rgba(0,0,0,0.18);
    }
    .plan.pop:hover { border-color: var(--pc-surface-d-3); }
}
/* CRO Phase 9 : Pro card en light orange tint (au lieu de dark) — softer hierarchy */
.plan.pop {
    background: var(--pc-pop-bg);
    color: var(--pc-ink);
    border: 1.5px solid var(--pc-signal);
    transform: translateY(-12px);
    box-shadow:
        0 1px 2px rgba(255,77,46,0.06),
        0 24px 48px -16px rgba(255,77,46,0.18),
        0 60px 80px -50px rgba(255,77,46,0.25);
    position: relative;
}
@media (max-width: 960px) {
    .plan.pop { transform: none; }
}
@media (hover: hover) and (pointer: fine) {
    .plan.pop:hover {
        transform: translateY(-16px);
        border-color: var(--pc-signal);
    }
}
/* CRO Phase 9 : pop-tag intégré en haut de card (pas en débord) */
.plan .pop-tag {
    position: absolute;
    top: 16px; right: 16px;
    background: var(--pc-signal);
    color: var(--pc-bg-3);
    font-family: var(--pc-mono);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 5px 11px;
    border-radius: 999px;
    box-shadow: 0 2px 6px -1px rgba(255,77,46,0.35);
    z-index: 1;
}
.plan .p-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--pc-ink-3);
    font-family: var(--pc-mono);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 14px;
}
.plan.pop .p-name { color: var(--pc-signal); }
.plan .price {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-bottom: 8px;
}
.plan .price .num {
    font-family: var(--pc-sans);
    /* UNE taille, jamais recalculée : un prix qui change de corps quand
       on bouge le curseur de sièges donne une carte qui saute. */
    font-size: 44px;
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--pc-ink);
}
.plan.pop .price .num { color: var(--pc-ink); }
.plan .price .num em {
    color: var(--pc-signal);
    font-weight: 500;
}
.plan .price .per {
    font-size: 14px;
    color: var(--pc-ink-3);
    white-space: nowrap;
}

/* Le prix plein, barré, au-dessus du total réellement encaissé. */
.p-was {
    font-size: 15px;
    color: var(--pc-ink-4);
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
    margin: 0 0 2px;
    height: 1.3em;
}
.plan.pop .price .per { color: var(--pc-ink-3); }
.plan .p-desc {
    font-size: 14px;
    color: var(--pc-ink-3);
    margin-bottom: 22px;
    line-height: 1.5;
    min-height: 2.8em;
}
.plan.pop .p-desc { color: var(--pc-ink-2); }
.plan .p-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--pc-ink);
    color: var(--pc-on-ink);
    padding: 13px 18px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 22px;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: color 200ms var(--pc-ease-out), transform 140ms var(--pc-ease-out);
}
.plan .p-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--pc-signal);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 260ms var(--pc-ease-out);
    z-index: -1;
}
.plan .p-cta:active { transform: var(--pc-press); }
@media (hover: hover) and (pointer: fine) {
    .plan .p-cta:hover::before { transform: scaleX(1); }
    .plan .p-cta:active { transform: var(--pc-press); }
}
/* Featured plan: orange base → white wipe (keeps tier hierarchy) */
/* L'orange est le meme dans les deux themes, donc l'encre reste blanche ici ;
   c'est le BALAYAGE qui doit suivre le theme, avec l'encre qui va avec. */
.plan.pop .p-cta { background: var(--pc-signal); color: #FFFFFF; }
.plan.pop .p-cta::before { background: var(--pc-pop-wipe); }
@media (hover: hover) and (pointer: fine) {
    .plan.pop .p-cta:hover { color: var(--pc-pop-wipe-ink); }
}
/* Ligne d'héritage (« Tout le plan Intensif, plus : ») : un en-tête
   au-dessus de la liste, jamais une puce qui consommerait une ligne. */
.plan .p-feats-head {
    font-family: var(--pc-mono);
    font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--pc-ink-3);
    margin: 22px 0 -8px;
    padding-top: 22px;
    border-top: 1px solid var(--pc-rule);
}
.plan .p-feats-head + .p-feats { border-top: 0; padding-top: 14px; }
.plan .p-feats {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 22px;
    border-top: 1px solid var(--pc-rule);
    list-style: none;
    margin: 0;
}
.plan.pop .p-feats { border-top-color: rgba(255,77,46,0.18); }
/* Ligne en bloc, icône posée en absolu dans la marge : le texte (gras compris)
   coule comme un paragraphe. En flex, « <b>15 simulations</b> par siège » faisait
   deux items qui se partageaient la largeur en colonnes dès que la carte
   rétrécissait (constaté sur la grille à quatre cartes, 25/09). */
.plan .p-feats li {
    position: relative;
    padding-left: 27px;
    font-size: 13.5px;
    color: var(--pc-ink-2);
    line-height: 1.5;
}
.plan.pop .p-feats li { color: var(--pc-ink-2); }
.plan .p-feats li::before {
    content: '';
    position: absolute; left: 0; top: 2px;
    width: 17px; height: 17px;
    background-color: var(--pc-ink-4);
    -webkit-mask: var(--icon) center / 17px 17px no-repeat;
    mask: var(--icon) center / 17px 17px no-repeat;
}
.plan.pop .p-feats li::before { background-color: var(--pc-signal); }
/* ↓↓↓ GÉNÉRÉ par scripts/verify/_sync-plan-icons.js — ne pas éditer à la main ↓↓↓ */
.plan .p-feats li[data-icon="phone"] { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M22%2016.92v3a2%202%200%200%201-2.18%202%2019.8%2019.8%200%200%201-8.63-3.07%2019.5%2019.5%200%200%201-6-6A19.8%2019.8%200%200%201%202.12%204.2%202%202%200%200%201%204.11%202h3a2%202%200%200%201%202%201.72c.13.96.36%201.9.7%202.81a2%202%200%200%201-.45%202.11L8.09%209.91a16%2016%200%200%200%206%206l1.27-1.27a2%202%200%200%201%202.11-.45c.91.34%201.85.57%202.81.7A2%202%200%200%201%2022%2016.92z%22%2F%3E%3C%2Fsvg%3E"); }
.plan .p-feats li[data-icon="clock"] { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpolyline%20points%3D%2212%207%2012%2012%2015.5%2014%22%2F%3E%3C%2Fsvg%3E"); }
.plan .p-feats li[data-icon="user"] { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M19%2021v-2a4%204%200%200%200-4-4H9a4%204%200%200%200-4%204v2%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%227%22%20r%3D%224%22%2F%3E%3C%2Fsvg%3E"); }
.plan .p-feats li[data-icon="wave"] { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cline%20x1%3D%224%22%20y1%3D%2210%22%20x2%3D%224%22%20y2%3D%2214%22%2F%3E%3Cline%20x1%3D%228%22%20y1%3D%226%22%20x2%3D%228%22%20y2%3D%2218%22%2F%3E%3Cline%20x1%3D%2212%22%20y1%3D%223%22%20x2%3D%2212%22%20y2%3D%2221%22%2F%3E%3Cline%20x1%3D%2216%22%20y1%3D%226%22%20x2%3D%2216%22%20y2%3D%2218%22%2F%3E%3Cline%20x1%3D%2220%22%20y1%3D%2210%22%20x2%3D%2220%22%20y2%3D%2214%22%2F%3E%3C%2Fsvg%3E"); }
.plan .p-feats li[data-icon="trend"] { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%2222%207%2013.5%2015.5%208.5%2010.5%202%2017%22%2F%3E%3Cpolyline%20points%3D%2216%207%2022%207%2022%2013%22%2F%3E%3C%2Fsvg%3E"); }
.plan .p-feats li[data-icon="columns"] { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%225%22%20height%3D%2216%22%20rx%3D%221.5%22%2F%3E%3Crect%20x%3D%229.5%22%20y%3D%224%22%20width%3D%225%22%20height%3D%2211%22%20rx%3D%221.5%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%224%22%20width%3D%225%22%20height%3D%2216%22%20rx%3D%221.5%22%2F%3E%3C%2Fsvg%3E"); }
.plan .p-feats li[data-icon="zap"] { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolygon%20points%3D%2213%202%204%2014%2011.5%2014%2011%2022%2020%2010%2012.5%2010%2013%202%22%2F%3E%3C%2Fsvg%3E"); }
.plan .p-feats li[data-icon="infinity"] { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M18.18%208c-2.4%200-4.4%201.6-6.18%204-1.78%202.4-3.78%204-6.18%204a4%204%200%201%201%200-8c2.4%200%204.4%201.6%206.18%204%201.78%202.4%203.78%204%206.18%204a4%204%200%200%200%200-8z%22%2F%3E%3C%2Fsvg%3E"); }
.plan .p-feats li[data-icon="plus"] { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cline%20x1%3D%2212%22%20y1%3D%228%22%20x2%3D%2212%22%20y2%3D%2216%22%2F%3E%3Cline%20x1%3D%228%22%20y1%3D%2212%22%20x2%3D%2216%22%20y2%3D%2212%22%2F%3E%3C%2Fsvg%3E"); }
.plan .p-feats li[data-icon="mail"] { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222.5%22%20y%3D%225%22%20width%3D%2219%22%20height%3D%2214%22%20rx%3D%222%22%2F%3E%3Cpolyline%20points%3D%223%207%2012%2013%2021%207%22%2F%3E%3C%2Fsvg%3E"); }
.plan .p-feats li[data-icon="spark"] { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%202.5%2014.2%209%2021%2011.2%2014.2%2013.4%2012%2020%209.8%2013.4%203%2011.2%209.8%209z%22%2F%3E%3C%2Fsvg%3E"); }
.plan .p-feats li[data-icon="users"] { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16%2021v-2a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v2%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%227%22%20r%3D%223.5%22%2F%3E%3Cpath%20d%3D%22M22%2021v-2a4%204%200%200%200-3-3.87%22%2F%3E%3Cpath%20d%3D%22M16%203.5a4%204%200%200%201%200%207%22%2F%3E%3C%2Fsvg%3E"); }
.plan .p-feats li[data-icon="stack"] { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolygon%20points%3D%2212%202.5%2022%207.5%2012%2012.5%202%207.5%22%2F%3E%3Cpolyline%20points%3D%222%2012.5%2012%2017.5%2022%2012.5%22%2F%3E%3Cpolyline%20points%3D%222%2017%2012%2022%2022%2017%22%2F%3E%3C%2Fsvg%3E"); }
.plan .p-feats li[data-icon="gauge"] { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2016a9%209%200%201%200-18%200%22%2F%3E%3Cline%20x1%3D%2212%22%20y1%3D%2216%22%20x2%3D%2216.5%22%20y2%3D%2210.5%22%2F%3E%3C%2Fsvg%3E"); }
.plan .p-feats li[data-icon="target"] { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%225%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%221.3%22%2F%3E%3C%2Fsvg%3E"); }
.plan .p-feats li[data-icon="headphones"] { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2017v-5a8%208%200%200%201%2016%200v5%22%2F%3E%3Cpath%20d%3D%22M20%2018.5a2.5%202.5%200%200%201-2.5%202.5H17a1.5%201.5%200%200%201-1.5-1.5v-3A1.5%201.5%200%200%201%2017%2015h3z%22%2F%3E%3Cpath%20d%3D%22M4%2018.5A2.5%202.5%200%200%200%206.5%2021H7a1.5%201.5%200%200%200%201.5-1.5v-3A1.5%201.5%200%200%200%207%2015H4z%22%2F%3E%3C%2Fsvg%3E"); }
.plan .p-feats li[data-icon="shield"] { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2022s8-4%208-10V5.5L12%202.5%204%205.5V12c0%206%208%2010%208%2010z%22%2F%3E%3C%2Fsvg%3E"); }
/* ↑↑↑ fin du bloc généré ↑↑↑ */
.plan .p-feats li b { color: var(--pc-ink); font-weight: 600; }
.plan.pop .p-feats li b { color: var(--pc-ink); }


/* ── Selecteur de sieges v6 (25/09, redessine le meme jour) ─────────────────
   Meme langage que le segmente de periode juste au-dessus : une piste en
   pilule (--pc-bg-2), une pastille blanche qui porte la valeur (fond, ombre et
   hauteur du pouce de periode), − et + ronds de chaque cote. Le nombre se tape
   dans la pastille ; sa largeur suit son contenu (fitSeatInput) pour que
   « 12 sièges » reste un seul mot visuel. */
.seat-step-pick {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin: 0 auto 32px;
}
.seat-step {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 4px;
    background: var(--pc-bg-2);
    border-radius: 999px;
}
.seat-step-btn {
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 999px; background: none;
    color: var(--pc-ink-3);
    cursor: pointer;
    transition: color 200ms var(--pc-ease-out), background-color 200ms var(--pc-ease-out);
}
.seat-step-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.seat-step-btn:disabled { color: var(--pc-ink-4); cursor: default; opacity: .5; }
.seat-step-btn:focus-visible { outline: 2px solid var(--pc-signal); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
    .seat-step-btn:hover:not(:disabled) { color: var(--pc-ink); }
}
.seat-step-thumb {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 5px;
    min-width: 148px;
    height: 36px;
    padding: 0 18px;
    background: var(--pc-bg-3);
    border-radius: 999px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.10);
    cursor: text;
    line-height: 36px;
}
.seat-step-thumb:focus-within { box-shadow: 0 1px 3px rgba(0,0,0,0.10), 0 0 0 2px var(--pc-signal-soft); }
.seat-step-val {
    width: 1.4ch; padding: 0; margin: 0;
    border: 0; background: transparent; outline: none;
    font-family: inherit; font-size: 13px; font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--pc-ink);
    text-align: right;
    -moz-appearance: textfield; appearance: textfield;
}
.seat-step-val::-webkit-outer-spin-button,
.seat-step-val::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.seat-step-lbl { font-size: 13px; font-weight: 600; color: var(--pc-ink-3); }
.seat-step-vol { margin: 0; text-align: center; font-size: 12.5px; color: var(--pc-ink-3); }
.seat-step-vol a { color: var(--pc-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.seat-step-vol[hidden] { display: none; }

/* ── Selecteur de sieges, curseur et odometre du prix ────────────────────── */

.seat-pick {
    max-width: 640px;
    margin: 0 auto 32px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) 96px;
    align-items: center;
    column-gap: 26px;
}
.seat-pick-q {
    grid-area: 1 / 1;
    font-size: 14px; font-weight: 600; color: var(--pc-ink-2);
    white-space: nowrap; cursor: pointer;
}
.seat-pick .pb-range { grid-area: 1 / 2; }
/* colonne figee a 96 px : passer de « siege » a « sieges » ne deplace pas la piste */
.seat-pick-out {
    grid-area: 1 / 3; margin: 0;
    font-size: 13px; color: var(--pc-ink-3);
}
.seat-pick-out b {
    font-family: var(--pc-sans); font-size: 28px; font-weight: 700;
    letter-spacing: -0.03em; line-height: 1; color: var(--pc-signal);
    margin-right: 6px; font-variant-numeric: tabular-nums;
}
.seat-ticks { grid-area: 2 / 2; display: flex; justify-content: space-between; margin-top: 8px; }
.seat-tick {
    width: 24px; padding: 6px 0; text-align: center;
    font-family: var(--pc-mono); font-size: 10px; color: var(--pc-ink-4);
    cursor: pointer; user-select: none;
    transition: color 160ms var(--pc-ease-out);
}
.seat-tick[data-on] { color: var(--pc-signal); }
@media (hover: hover) and (pointer: fine) {
    .seat-tick:hover { color: var(--pc-ink-2); }
}
@media (max-width: 720px) {
    .seat-pick { grid-template-columns: 1fr auto; row-gap: 14px; }
    .seat-pick .pb-range { grid-area: 2 / 1 / 3 / 3; }
    .seat-pick-out { grid-area: 1 / 2; text-align: right; }
    .seat-ticks { grid-area: 3 / 1 / 4 / 3; }
}
.plan .p-name .p-kicker { color: var(--pc-ink-3); }
.plan.plan-free .price .num { color: var(--pc-ink-3); }
/* plan-free n'existe plus sur la page ; Entreprise garde la marge des autres cartes pour que les trois boutons s'alignent. */
.plan .price .num.num-text { font-size: 34px; letter-spacing: -0.03em; line-height: 44px; } /* même hauteur de ligne que le prix chiffré : les CTA restent alignés */
.pb-range {
    --pct: 33%;
    -webkit-appearance: none; appearance: none;
    width: 100%; height: 6px; border-radius: 999px;
    background: linear-gradient(90deg, var(--pc-signal) 0 var(--pct), var(--pc-rule-2) var(--pct) 100%);
    outline: none; cursor: pointer; margin: 0;
}
.pb-range::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--pc-bg-3); border: 2px solid var(--pc-signal);
    box-shadow: 0 2px 8px rgba(255,77,46,0.28);
    transition: transform 160ms var(--pc-ease-out), box-shadow 160ms var(--pc-ease-out);
}
.pb-range::-moz-range-thumb {
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--pc-bg-3); border: 2px solid var(--pc-signal);
    box-shadow: 0 2px 8px rgba(255,77,46,0.28);
    transition: transform 160ms var(--pc-ease-out), box-shadow 160ms var(--pc-ease-out);
}
.pb-range:active::-webkit-slider-thumb { transform: scale(1.12); box-shadow: 0 3px 12px rgba(255,77,46,0.34); }
.pb-range:active::-moz-range-thumb { transform: scale(1.12); box-shadow: 0 3px 12px rgba(255,77,46,0.34); }
.pb-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--pc-signal-soft); }
.pb-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px var(--pc-signal-soft); }
/* Sous le prix : le coût réel d'une simulation, rien d'autre.
   Hauteur figée sur une ligne pour que rien ne bouge quand le curseur
   de sièges change le montant. */
.plan .p-unit {
    font-size: 12.5px; color: var(--pc-ink-4); line-height: 1.4;
    margin: 2px 0 16px; height: 1.4em; white-space: nowrap;
}
/* Les trois descriptions n'ont pas la même longueur : on réserve deux
   lignes pour que les trois boutons d'appel à l'action s'alignent. */
.plan .p-desc { min-height: 2.9em; }
/* Odomètre du prix : seule animation de la carte (décision Briac 18/09). */
.plan .price .num { display: inline-flex; align-items: baseline; font-variant-numeric: tabular-nums; }
.plan .price .num .od {
    display: inline-block; position: relative;
    height: 1em; line-height: 1; overflow: hidden;
    vertical-align: baseline;
}
.plan .price .num .od-strip {
    display: flex; flex-direction: column;
    transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}
.plan .price .num .od-strip span { display: block; height: 1em; line-height: 1; }
.plan .price .num .od-static { display: inline-block; line-height: 1; }
@media (prefers-reduced-motion: reduce) {
    .plan .price .num .od-strip { transition: none; }
}


/* ── Selecteur de periode ─────────────────────────────────────────────────
   Extrait avec les cartes : les trois morceaux de la page tarifs vivent
   ensemble, et l'application les affiche a l'identique. */
.period-pick {
    position: relative;
    isolation: isolate;
    display: flex;
    width: fit-content;
    margin: 0 auto 18px;
    padding: 4px;
    background: var(--pc-bg-2);
    border-radius: 999px;
}
/* `--pc-period-n` = nombre d'options reellement proposees (une periode sans
   price ID Stripe n'est pas vendue, donc pas affichee). La largeur etait figee
   a un tiers : avec DEUX periodes -- exactement ce qui arrive entre la creation
   du prix trimestriel et celle de l'annuel -- le pouce couvrait un tiers d'une
   piste a deux crans et se decalait de 100 % au lieu de 50 %. */
.period-thumb {
    position: absolute; z-index: -1;
    top: 4px; bottom: 4px; left: 4px;
    width: calc((100% - 8px) / var(--pc-period-n, 3));
    background: var(--pc-bg-3);
    border-radius: 999px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.10);
    transform: translateX(0);
    transition: transform 240ms var(--pc-ease-out);
}
.period-opt {
    flex: 1 0 0;
    min-width: 148px;
    padding: 9px 18px;
    border: 0; background: none;
    font-family: inherit; font-size: 13px; font-weight: 600;
    color: var(--pc-ink-3);
    white-space: nowrap;
    border-radius: 999px;
    cursor: pointer;
    transition: color 200ms var(--pc-ease-out);
}
.period-opt[aria-pressed="true"] { color: var(--pc-ink); }
.period-opt:focus-visible { outline: 2px solid var(--pc-signal); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
    .period-opt:hover { color: var(--pc-ink-2); }
}
.period-off { color: var(--pc-signal); font-weight: 700; margin-left: 6px; }
@media (prefers-reduced-motion: reduce) {
    .period-thumb { transition-duration: 0ms; }
}
@media (max-width: 560px) {
    .period-pick { width: 100%; }
    .period-opt { min-width: 0; padding: 9px 6px; font-size: 12px; }
    .period-off { margin-left: 4px; }
}
/* Ce qui est reellement encaisse, sous le prix mensuel equivalent. */
.p-billed {
    font-size: 12px; color: var(--pc-signal); font-weight: 600;
    margin: -10px 0 8px; min-height: 1.2em;
}