/* ═══════════════════════════════════════════════════════════════════
   STYLES PROPRES A TARIFS.html
   ───────────────────────────────────────────────────────────────────
   Ces regles etaient ecrites dans la page. Sorties ici pour etre
   trouvables : 32 Ko de CSS noye dans du HTML ne se relit pas.

   ⚠️ LA POSITION DU <link> DANS LA PAGE EST SIGNIFIANTE. Cette feuille
   est chargee APRES mobile.css, exactement comme l etaient les blocs
   d origine. Deplacer le lien change qui gagne dans la cascade.
   ═══════════════════════════════════════════════════════════════════ */

/* ── bloc 1/3 de tarifs.html ── */
.pricing-modal {
        position: fixed;
        inset: 0;
        z-index: 9999;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
      }

      .pricing-modal:not([hidden]) {
        opacity: 1;
        pointer-events: auto;
      }

      .modal-overlay {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(5px);
      }

      .modal-content {
        position: relative;
        background: #ffffff;
        color: #212224;
        width: 90%;
        max-width: 550px;
        max-height: 90vh;
        overflow-y: auto;
        border-radius: 5px;
        padding: 40px;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
        transform: translateY(20px);
        transition: transform 0.3s ease;
        border: none;
      }

      .pricing-modal:not([hidden]) .modal-content {
        transform: translateY(0);
      }

      .modal-close {
        position: absolute;
        top: 20px;
        right: 20px;
        background: rgba(0, 0, 0, 0.05);
        border: none;
        color: #212224;
        cursor: pointer;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        transition: background 0.2s, transform 0.2s;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
        line-height: 1;
      }

      .modal-close:hover {
        background: rgba(0, 0, 0, 0.1);
        transform: scale(1.1);
      }

      .modal-header {
        border-bottom: 1px solid #e6e1d8;
        padding-bottom: 24px;
        margin-bottom: 24px;
        text-align: center;
      }

      .modal-header h2 {
        font-size: 1.8rem;
        margin-bottom: 8px;
        color: #212224;
        line-height: 1.2;
      }

      .modal-header .modal-price {
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--red);
        margin-top: 8px;
      }

      .modal-header .modal-price small {
        font-size: 0.9rem;
        color: #6e6b66;
        font-weight: 500;
      }

      .feature-group {
        margin-bottom: 24px;
        text-align: left;
      }

      .feature-group h4 {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 1.05rem;
        margin-bottom: 12px;
        color: #212224;
        font-weight: 600;
      }

      .feature-group ul {
        list-style: none;
        padding: 0;
        margin: 0;
      }

      .feature-group li {
        position: relative;
        padding-left: 28px;
        margin-bottom: 10px;
        color: #4c4b49;
        font-size: 0.95rem;
        line-height: 1.4;
      }

      .feature-group li::before {
        content: '✓';
        position: absolute;
        left: 0;
        color: var(--red);
        font-weight: 600;
      }

      /* ── BILLING TOGGLE ── */

      /* ── ALIGNEMENT DES PRIX ──
         Les trois intitulés n'ont pas la même longueur : « Refonte &
         Modernisation » passe à deux lignes quand les deux autres tiennent sur
         une, dans une colonne de 240px. Tout ce qui suit — prix compris —
         descendait donc de 42px sur cette seule carte.
         On réserve DEUX lignes à chacun plutôt que de raccourcir un intitulé :
         c'est la hauteur du titre qui doit être constante, pas son texte. */
      /* ── L'ILLUSTRATION DE CARTE ────────────────────────────────────
         Posee en tete, au-dessus du titre, calee a gauche comme tout le reste
         de la carte.

         ⚠️ HAUTEUR FIXE et identique sur les trois. Les trois fichiers n'ont
         pas le meme format une fois detoures (280x263, 272x280, 280x246) :
         laissee libre, chaque illustration imposerait sa hauteur et decalerait
         tout ce qui suit — titre, prix, liste — d'une carte a l'autre. C'est le
         meme probleme que resolvent les `min-height` du titre et de la
         description juste en dessous.

         ⚠️ `object-position: left` : la carte est calee a gauche d'un bout a
         l'autre. Une illustration centree dans sa boite serait le seul element
         qui ne l'est pas. */

      /* ⚠️ `min-height` retiree du titre : elle reservait deux lignes parce que
         « Refonte & Modernisation » en prend deux la ou les autres n'en prennent
         qu'une. Ca vaut toujours — la regle reste — mais l'illustration ajoute
         92px identiques au-dessus, donc l'alignement des trois cartes ne tient
         plus a elle seule. */
      /* La description est le second element de longueur variable : 3 lignes
         pour « Refonte », 4 pour les deux autres. `6em` = quatre lignes a
         line-height 1.5, la hauteur du plus long des trois textes.
         ⚠️ Valeur a revoir si une description passe a cinq lignes — c'est le
         defaut de la reservation d'espace : elle suit le texte le plus long,
         elle ne s'y adapte pas. */
      /* ── SAVINGS BADGE ── */
      .price-savings {
        display: none;
        font-size: 0.78rem;
        font-weight: 600;
        color: #16a34a;
        background: #dcfce7;
        border-radius: 4px;
        padding: 4px 12px;
        margin-top: 10px;
        width: fit-content;
        animation: fadeInUp .25s ease;
      }
      @keyframes fadeInUp {
        from { opacity: 0; transform: translateY(6px); }
        to   { opacity: 1; transform: translateY(0); }
      }
      .pricing-grid.billing-annual .price-savings { display: block; }


      /* ── RÉSERVATION EN LIGNE — offre distincte, trois paliers ──
         Bloc séparé de la grille des sites : une quatrième carte alignée avec
         les trois autres aurait dit « quatrième formule de site », alors que
         c'est un autre produit, qui se souscrit seul. */
      /* ── ÉTIQUETTE DE RANGÉE ────────────────────────────────────────
         La boutique tient en une section, un en-tete et un selecteur de
         facturation. Ces etiquettes separent les deux familles SANS les couper
         en deux blocs independants : un simple titre, un trait, et la rangee
         suit. C'est ce qui distingue une boutique a deux rayons de deux pages
         collees l'une sous l'autre. */
      .shop-row__label {
        margin: 56px 0 26px;
        padding-bottom: 14px;
        border-bottom: 1px solid var(--border);
        display: flex;
        align-items: baseline;
        gap: 18px;
        flex-wrap: wrap;
      }
      .shop-row__label:first-of-type { margin-top: 34px; }
      .shop-row__label h2 {
        font-family: var(--font-display);
        font-size: clamp(1.3rem, 2.2vw, 1.75rem);
        font-weight: 800;
        letter-spacing: -.03em;
        margin: 0;
        color: var(--ink);
      }
      .shop-row__label p {
        margin: 0;
        flex: 1;
        min-width: 240px;
        font-size: .92rem;
        line-height: 1.55;
        color: var(--muted);
      }
      @media (max-width: 640px) {
        .shop-row__label { margin: 40px 0 20px; gap: 6px; }
        .shop-row__label p { min-width: 0; font-size: .88rem; }
      }

      .tr-resa__note {
        margin-top: 24px; text-align: center; font-size: .85rem;
        color: var(--muted); line-height: 1.6;
      }

      /* ── COMPARISON TABLE ── */
      .comparison-section {
        margin-top: 100px;
        padding-bottom: 20px;
      }
      .comparison-section > h2 {
        text-align: center;
        margin-bottom: 12px;
        font-size: 2rem;
      }
      .comparison-section > p {
        text-align: center;
        color: var(--muted);
        margin-bottom: 40px;
        font-size: 0.95rem;
      }
      /* ── FONCTIONNALITÉS CLÉS (côte à côte, au-dessus du tableau) ── */
      .cmp-highlights {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
        margin-bottom: 46px;
      }
      .cmp-hl {
        display: flex;
        align-items: flex-start;
        gap: 13px;
        background: var(--white);
        border: 1px solid var(--border);
        border-radius: 4px;
        padding: 18px 18px;
        transition: transform .28s cubic-bezier(.22,1,.36,1), box-shadow .28s ease, border-color .28s ease;
      }
      .cmp-hl:hover {
        transform: translateY(-4px);
        box-shadow: 0 16px 34px rgba(36, 38, 40,.09);
        border-color: rgba(180, 24, 36,.32);
      }
      .cmp-hl__ico {
        width: 42px; height: 42px;
        flex-shrink: 0;
        border-radius: 3px;
        display: flex; align-items: center; justify-content: center;
        background: #fbeff0;
        color: var(--red);
        transition: background .28s, color .28s;
      }
      .cmp-hl:hover .cmp-hl__ico { background: var(--red); color: #fff; }
      .cmp-hl h3 { font-size: .92rem; font-weight: 600; color: var(--ink); margin: 0 0 3px; }
      .cmp-hl p  { font-size: .76rem; color: var(--muted); line-height: 1.45; margin: 0; }
      @media (max-width: 900px) { .cmp-highlights { grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 34px; } }
      /* Quatre promesses de deux lignes. Empilees, elles occupaient un ecran de
         telephone entier juste avant le tableau — le lecteur avait perdu de vue
         la question posee (« quelle formule ? ») avant d'y arriver. Elles
         restent donc en carre, pictogramme au-dessus du texte faute de largeur
         pour le mettre a cote. */
      @media (max-width: 560px) {
        .cmp-highlights { grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 26px; }
        .cmp-hl { flex-direction: column; gap: 10px; padding: 14px 13px; }
        .cmp-hl__ico { width: 34px; height: 34px; }
        .cmp-hl__ico svg { width: 17px; height: 17px; }
        .cmp-hl h3 { font-size: .84rem; line-height: 1.25; }
        .cmp-hl p  { font-size: .72rem; line-height: 1.4; }
      }

      /* ── TABLEAU COMPARATIF ── */
      .comparison-table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        background: var(--white);
        font-size: 0.92rem;
      }
      .comparison-table th,
      .comparison-table td {
        padding: 15px 22px;
        text-align: center;
        border-bottom: 1px solid #ece8e1;
        vertical-align: middle;
      }
      .comparison-table th:first-child,
      .comparison-table td:first-child {
        text-align: left;
        font-weight: 500;
        color: var(--ink);
        background: #fbf9f6;
        min-width: 200px;
      }
      .comparison-table thead th {
        font-size: 1.02rem;
        font-weight: 600;
        color: var(--ink);
        background: #fff;
        padding: 20px 22px;
        border-bottom: 2px solid #e6e1d8;
      }
      .comparison-table thead th:first-child { background: #fbf9f6; }
      .comparison-table thead th .price-small {
        display: block;
        font-size: 0.82rem;
        font-weight: 500;
        opacity: 0.75;
        margin-top: 4px;
      }
      /* colonne recommandée — effet "onglet" mis en avant */
      .comparison-table thead th.col-featured {
        background: linear-gradient(135deg, #d72331 0%, #b41824 55%, #8d111a 100%);
        color: #fff;
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
      }
      .comparison-table thead th.col-featured .price-small { opacity: .92; }
      .cmp-reco {
        display: block;
        width: fit-content;
        margin: 0 auto 8px;
        font-size: .56rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
        background: rgba(255,255,255,.22); color: #fff;
        padding: 3px 10px; border-radius: 4px;
      }
      .comparison-table td:nth-child(2) {
        background: rgba(180, 24, 36,.045);
        box-shadow: inset 1px 0 0 rgba(180, 24, 36,.14), inset -1px 0 0 rgba(180, 24, 36,.14);
      }
      .comparison-table tbody tr:last-child td:nth-child(2) {
        border-bottom-left-radius: 16px;
        border-bottom-right-radius: 16px;
        box-shadow: inset 1px 0 0 rgba(180, 24, 36,.14), inset -1px 0 0 rgba(180, 24, 36,.14), inset 0 -1px 0 rgba(180, 24, 36,.14);
      }
      .comparison-table tr:last-child td { border-bottom: none; }

      /* coches / valeurs */
      .comparison-table .yes {
        display: inline-flex; align-items: center; justify-content: center;
        width: 27px; height: 27px; border-radius: 50%;
        background: rgba(180, 24, 36,.1); color: var(--red);
        font-size: .9rem; font-weight: 600;
      }
      .comparison-table .no  { color: #d0cac1; font-size: 1.1rem; font-weight: 600; }
      .comparison-table .val { color: var(--ink-2); font-weight: 600; font-size: .86rem; }

      /* survol de ligne */
      .comparison-table tbody tr { transition: background .15s; }
      .comparison-table tbody tr:hover td { background: #fcf5f5; }
      .comparison-table tbody tr:hover td:first-child { background: #f0ede7; color: var(--red); }
      .comparison-table tbody tr:hover td:nth-child(2) { background: rgba(180, 24, 36,.10); }

      @media (max-width: 768px) {
        .comparison-table { font-size: 0.82rem; }
        .comparison-table th, .comparison-table td { padding: 12px 10px; }
        .comparison-section > h2 { font-size: 1.5rem; }
      }

      /* ── PAGE BACKGROUND DECORATIVE ── */
      .pricing-page-main {
        position: relative;
        overflow: hidden;
      }
      .pricing-page-main > section {
        position: relative;
        z-index: 1;
      }

      @media (max-width: 768px) {
        /* ── Hero & Toggle sur mobile ── */
        .section__head h1 {
          font-size: 1.8rem !important;
        }
        .section__head .section__sub strong {
          font-size: .85rem !important;
          margin-top: 8px !important;
        }

        /* ── Cartes d'abonnement ──────────────────────────────────────────
           La colonne unique a ete retiree : c'est desormais assets/css/mobile.css
           qui met les trois cartes en bande a defilement horizontal, pour qu'on
           puisse encore les COMPARER sur telephone au lieu de les lire l'une
           apres l'autre sur trois ecrans.
           ⚠️ Ne pas reintroduire ici de `grid-template-columns`, de `margin-inline`
           ni de `gap` sur #pricing-grid : cette feuille est en ligne dans le
           <body>, donc elle passe APRES mobile.css dans la cascade et, avec les
           `!important` qui trainent dans ce bloc, elle gagnerait a tous les coups.
           Le decalage lateral de la bande se calcule (voir §2 de mobile.css) ;
           un `margin-inline: 0` le supprimait et decollait la premiere carte du
           bord de l'ecran. */
      }

      /* Très petits téléphones */
      @media (max-width: 380px) {
      }

      @media (max-width: 768px) {
        /* ── Comparison table: mobile-friendly ── */
        .comparison-section > h2 {
          font-size: 1.3rem !important;
        }
        .comparison-section > p {
          font-size: .82rem !important;
          margin-bottom: 24px !important;
        }
        .comparison-section {
          margin-top: 60px !important;
        }
        /* Le tableau NE SE COMPRIME PLUS pour tenir dans l'ecran : il garde une
           largeur minimale et c'est son conteneur qui defile.
           Avant, `word-break: break-word` sur des colonnes de 70 px coupait les
           intitules en plein milieu d'un mot — « Référenceme / nt SEO »,
           « Automatisatio / ns » — et le repere « ← glisser → » sous le tableau
           annonçait un defilement qui n'existait pas, puisque tout tenait deja.
           Desormais il y a vraiment de quoi faire glisser, et la colonne des
           intitules reste collee a gauche : sans elle, une coche au milieu du
           tableau ne veut plus rien dire. */
        .comparison-table {
          min-width: 486px;
          font-size: .78rem !important;
          border-radius: 3px !important;
        }
        .comparison-table th,
        .comparison-table td {
          padding: 11px 8px !important;
          font-size: .74rem !important;
        }
        .comparison-table th:first-child,
        .comparison-table td:first-child {
          position: sticky;
          left: 0;
          z-index: 2;
          width: 132px;
          min-width: 132px !important;
          max-width: 132px;
          font-size: .7rem !important;
          padding: 10px 10px !important;
          line-height: 1.3;
          box-shadow: inset -1px 0 0 #ece8e1;
        }
        .comparison-table thead th {
          font-size: .76rem !important;
          padding: 13px 8px !important;
        }
        .comparison-table thead th:first-child { z-index: 3; }
        .comparison-table thead th .price-small {
          font-size: .62rem !important;
        }
        .comparison-table .yes {
          width: 22px;
          height: 22px;
          font-size: .8rem !important;
        }
        .comparison-table .no {
          font-size: .95rem !important;
        }
        .comparison-table .val {
          font-size: .7rem !important;
        }
        .comparison-table .group-row td {
          font-size: .62rem !important;
          padding: 7px 10px !important;
        }
        /* Le survol repeint le fond de la premiere colonne ; collee, elle doit
           rester opaque, sinon les colonnes defilent visiblement dessous. */
        .comparison-table tbody tr:hover td:first-child { background: #f0ede7; }
      }

      /* Très petits téléphones */
      @media (max-width: 400px) {
        .comparison-table {
          min-width: 452px;
        }
        .comparison-table th,
        .comparison-table td {
          padding: 10px 6px !important;
          font-size: .7rem !important;
        }
        .comparison-table th:first-child,
        .comparison-table td:first-child {
          width: 120px;
          min-width: 120px !important;
          max-width: 120px;
          font-size: .66rem !important;
          padding: 9px 8px !important;
        }
        .comparison-table thead th {
          font-size: .7rem !important;
        }
        .comparison-table thead th .price-small {
          font-size: .58rem !important;
        }
      }

      /* ── Pricing detail modals mobile ── */
      @media (max-width: 768px) {
        .pricing-modal .modal-content {
          padding: 24px 18px !important;
          border-radius: 4px !important;
          width: 94% !important;
        }
        .pricing-modal .modal-close {
          top: 14px !important;
          right: 14px !important;
          width: 32px !important;
          height: 32px !important;
          font-size: 1rem !important;
        }
        .pricing-modal .modal-header {
          padding-bottom: 16px !important;
          margin-bottom: 16px !important;
        }
        .pricing-modal .modal-header h2 {
          font-size: 1.3rem !important;
        }
        .pricing-modal .modal-header .modal-price {
          font-size: 1.05rem !important;
        }
        .pricing-modal .modal-header .modal-price small {
          font-size: .78rem !important;
        }
        .pricing-modal .feature-group {
          margin-bottom: 16px !important;
        }
        .pricing-modal .feature-group h4 {
          font-size: .9rem !important;
          gap: 8px !important;
          margin-bottom: 8px !important;
        }
        .pricing-modal .feature-group li {
          font-size: .82rem !important;
          padding-left: 22px !important;
          margin-bottom: 6px !important;
          line-height: 1.35 !important;
        }

        /* Scroll hint for comparison table */
        .comparison-table-wrapper {
          position: relative;
          border-radius: 3px !important;
        }
        .comparison-table-wrapper::after {
          content: '← glisser →';
          display: block;
          text-align: center;
          font-size: .65rem;
          color: var(--muted);
          padding: 6px 0 2px;
          letter-spacing: .03em;
        }
      }

/* ── bloc 2/3 de tarifs.html ── */
/* ══ CARTES COMPACTES + MODALE DE DÉTAIL ══════════════════════════════
         Les cartes portaient un DOS qui se retournait. Deux consequences :
         les deux faces devaient tenir dans la meme boite, donc la carte prenait
         la hauteur de la plus haute — celle qui liste douze fonctionnalites en
         trois groupes. Une carte de 700px pour six lignes de recto.

         Le detail passe en modale : la carte n'a plus qu'a contenir son recto,
         et elle retombe a sa hauteur naturelle.
         ═══════════════════════════════════════════════════════════════════ */
      /* ⚠️ CARTE CARREE. `aspect-ratio` et non une hauteur fixe : si un
         libelle passe sur deux lignes, ou si quelqu'un agrandit le texte, la
         carte GRANDIT au lieu de laisser deborder son contenu. Le carre est
         donc un plancher, pas une cage.

         Le recto ne porte plus que l'essentiel — illustration, nom, prix,
         mention d'engagement, deux boutons. La description et les trois inclus
         sont partis dans la modale : c'est ce qui permet cette hauteur. */
      /* ⚠️ Les deux reservations d'espace n'ont plus lieu d'etre et sont
         ANNULEES ici. `min-height: 2.5em` sur le titre reservait deux lignes
         pour « Refonte & Modernisation » ; sur une carte carree, ces 25px de
         vide se voient. `min-height: 6em` visait la description, qui n'est
         plus la — sans cette annulation, chaque carte garderait 96px de blanc
         a la place d'un paragraphe disparu. */
      /* L'illustration descend : sur une carte carree elle mangeait le tiers
         de la hauteur. */
      .price-savings { margin-top: 6px; }

      /* Les deux boutons se resserrent : sur une carte de 340px de cote, deux
         boutons pleine hauteur prenaient a eux seuls le tiers du carre. */
      /* Le chapeau de la modale : la phrase qui vivait sur la carte. */
      .offer-modal__body .pc-detail__lede {
        margin: 0 0 20px;
        font-size: .95rem;
        line-height: 1.6;
        color: var(--ink-2);
      }

      /* ⚠️ Sous 1000px la grille passe a une ou deux colonnes et les cartes
         s'elargissent : un carre de 560px de cote serait absurde. On rend la
         hauteur libre. */
      @media (max-width: 1000px) {
      }

      /* ⚠️ Les reservations d'espace du titre et de la description sont
         CONSERVEES. Les six cartes sont sur une grille : sans elles, « Refonte
         & Modernisation » prend deux lignes la ou les autres en prennent une,
         et tout ce qui suit descend d'autant sur cette seule carte. */
      /* Le detail vit dans la page, masque : la modale le clone. */
      .pc-detail[hidden] { display: none; }

      /* ── LA MODALE ──────────────────────────────────────────────────────── */
      .offer-modal {
        position: fixed;
        inset: 0;
        z-index: 1200;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px;
        opacity: 0;
        visibility: hidden;
        transition: opacity .22s var(--ease), visibility .22s;
      }
      .offer-modal.is-open { opacity: 1; visibility: visible; }

      .offer-modal__backdrop {
        position: absolute;
        inset: 0;
        background: rgba(20, 21, 23, .62);
        -webkit-backdrop-filter: blur(3px);
        backdrop-filter: blur(3px);
      }

      .offer-modal__panel {
        position: relative;
        width: min(620px, 100%);
        /* ⚠️ `max-height` + `overflow` sur le CORPS et non sur le panneau : le
           titre et le pied doivent rester visibles pendant qu'on fait defiler
           une liste de douze fonctionnalites. */
        max-height: min(86vh, 760px);
        display: flex;
        flex-direction: column;
        background: #fff;
        border-radius: var(--r-xl);
        box-shadow: 0 30px 80px rgba(20, 21, 23, .38);
        transform: translateY(14px) scale(.985);
        transition: transform .28s var(--ease);
        overflow: hidden;
      }
      .offer-modal.is-open .offer-modal__panel { transform: none; }

      /* Sans illustration a cote, l'en-tete redevient une simple pile : le
         titre, puis le prix. La rangee horizontale et son ecart de 18px
         n'avaient plus rien a aligner. */
      .offer-modal__head {
        display: block;
        padding: 24px 26px 20px;
        border-bottom: 1px solid var(--border);
      }
      .offer-modal__head h3 {
        margin: 0;
        font-family: var(--font-display);
        font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; color: var(--ink);
      }
      .offer-modal__px {
        margin: 6px 0 0;
        display: flex; align-items: baseline; gap: 6px;
        font-family: var(--font-display); font-size: 1.3rem; font-weight: 800;
        letter-spacing: -.03em; color: var(--red);
      }
      .offer-modal__px small { font-family: var(--font); font-size: .8rem; font-weight: 500; color: var(--muted); }

      .offer-modal__close {
        position: absolute;
        top: 14px; right: 14px;
        width: 36px; height: 36px;
        display: grid; place-items: center;
        border: 0; border-radius: 50%;
        background: var(--bg-subtle);
        color: var(--ink);
        font-size: 1.1rem; line-height: 1; cursor: pointer;
        transition: background .18s, color .18s;
      }
      .offer-modal__close:hover { background: var(--red); color: #fff; }

      .offer-modal__body { padding: 22px 26px; overflow-y: auto; flex: 1; }
      .offer-modal__body .feature-group + .feature-group { margin-top: 20px; }
      .offer-modal__body .feature-group h4 {
        margin: 0 0 10px;
        font-family: var(--font-display);
        font-size: .95rem; font-weight: 700; letter-spacing: -.01em; color: var(--ink);
      }
      .offer-modal__body .feature-group ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
      .offer-modal__body .feature-group li {
        position: relative; padding-left: 28px;
        font-size: .9rem; line-height: 1.5; color: var(--ink-2);
      }
      .offer-modal__body .feature-group li::before {
        content: ''; position: absolute; left: 0; top: 2px;
        width: 18px; height: 18px; border-radius: 5px;
        background:
          url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b41824' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 11px no-repeat,
          var(--red-bg);
      }

      .offer-modal__foot { padding: 18px 26px 24px; border-top: 1px solid var(--border); }
      .offer-modal__foot .btn { width: 100%; justify-content: center; }

      @media (max-width: 560px) {
        .offer-modal { padding: 14px; }
        .offer-modal__head { padding: 20px 20px 16px; gap: 14px; }
        .offer-modal__head h3 { font-size: 1.25rem; }
        .offer-modal__body { padding: 18px 20px; }
        .offer-modal__foot { padding: 16px 20px 20px; }
      }

      @media (prefers-reduced-motion: reduce) {
        .offer-modal, .offer-modal__panel { transition: none; }
      }

/* ── bloc 3/3 de tarifs.html ── */
.checkout-modal { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center;
      justify-content: center; padding: 16px; background: rgba(20,20,22,.6); backdrop-filter: blur(3px); }
    .checkout-modal[hidden] { display: none; }
    .checkout-modal__dialog { width: 100%; max-width: 560px; max-height: 92vh; overflow: auto;
      background: #fff; border-radius: 5px; box-shadow: 0 24px 60px rgba(0,0,0,.35); }
    .checkout-modal__head { display: flex; align-items: center; justify-content: space-between;
      gap: 12px; padding: 14px 18px; border-bottom: 1px solid #ececec; position: sticky; top: 0; background: #fff; }
    .checkout-modal__brand { font-weight: 600; font-size: .95rem; color: #242628; }
    .checkout-modal__brand b { color: var(--red, #b41824); }
    .checkout-modal__close { border: 0; background: #f4f4f5; width: 34px; height: 34px; border-radius: 5px;
      cursor: pointer; font-size: 15px; color: #555; line-height: 1; }
    .checkout-modal__close:hover { background: #ececec; }
    .checkout-modal__loading { padding: 48px 16px; text-align: center; color: #757575; font-size: .95rem; }
    #checkout-container { padding: 8px; min-height: 220px; }

      /* ══════════════════════════════════════════════════════════════════
         LES CARTES D'ABONNEMENT
         ──────────────────────────────────────────────────────────────────
         Nom, badge, description, prix, cinq points, bouton. Les cartes
         carrees avec illustration et detail au dos ont ete deposees : elles
         obligeaient a ouvrir une modale pour savoir CE QU'ON ACHETE, et une
         page de tarifs qui cache ses prestations se compare mal.

         ⚠️ NOUVEAU PREFIXE `tp`, et pas une reprise de `.price-card`.
         L'ancien jeu de regles vivait dans TROIS feuilles (style.css,
         mobile.css, page-tarifs.css), avec des `!important`, des
         `aspect-ratio` et des `min-height` qui se repondaient. Le reprendre
         aurait voulu dire defaire chaque valeur une par une, dans un ordre de
         cascade different selon la page. Un prefixe neuf coute quelques
         lignes et supprime le probleme.

         ⚠️ Ce qui a ETE conserve, ce sont les CROCHETS du script :
         `.price-amount` et ses `data-*` (bascule mensuel/annuel),
         `.price-savings`, `.engagement-label`, `.pc-detail`, `.pc-detail-btn`,
         `.checkout-btn` et
         `.price` (la modale clone son contenu). Les renommer casserait la
         boutique en silence.
         ══════════════════════════════════════════════════════════════════ */
      .tp {
        display: flex;
        flex-direction: column;
        /* Pas de `aspect-ratio` : la hauteur vient du contenu, et les trois
           cartes s'alignent par `align-items: stretch` sur la grille. */
        background: var(--white);
        border: 1px solid var(--border);
        border-radius: var(--r-xl);
        padding: 26px 24px 24px;
        transition: transform .25s var(--ease), box-shadow .25s var(--ease);
      }

      .tp:hover {
        transform: translateY(-4px);
        box-shadow: 0 1px 2px rgba(34, 30, 26, .05), 0 18px 40px rgba(34, 30, 26, .10);
      }

      /* La carte mise en avant ne change ni de taille ni de position — elle
         gagne une ombre et un liseré. Une carte agrandie decale ses voisines et
         casse l'alignement des prix, qui est justement ce qu'on vient comparer. */
      .tp--vedette {
        border-color: rgba(180, 24, 36, .34);
        box-shadow: 0 1px 2px rgba(34, 30, 26, .05), 0 16px 38px rgba(180, 24, 36, .13);
      }

      /* ── Tete ─────────────────────────────────────────────────────────── */
      .tp__ligne {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
      }

      .tp__nom {
        margin: 0;
        font-family: var(--font-display);
        font-size: 1.32rem;
        font-weight: 700;
        letter-spacing: -.015em;
        line-height: 1.2;
        color: var(--ink);
      }

      .tp__badge {
        flex: none;
        padding: 4px 11px;
        border-radius: var(--r-pill);
        background: var(--red);
        color: #fff;
        font-size: .7rem;
        font-weight: 600;
        letter-spacing: .01em;
        white-space: nowrap;
      }

      .tp__desc {
        margin: 9px 0 0;
        font-size: .88rem;
        line-height: 1.55;
        color: var(--muted);
        /* Les six descriptions font de deux a trois lignes. Sans plancher, les
           prix ne s'alignent plus d'une carte a l'autre — et c'est la ligne que
           l'oeil balaye en premier. */
        min-height: 3.1em;
      }

      /* ── Prix ─────────────────────────────────────────────────────────── */
      .tp__prix {
        display: flex;
        align-items: baseline;
        gap: 7px;
        margin: 20px 0 0;
      }

      .tp__des {
        font-size: .9rem;
        font-weight: 500;
        color: var(--muted);
      }

      .tp__prix .price-amount {
        font-family: var(--font-display);
        font-size: clamp(2.3rem, 4vw, 2.9rem);
        font-weight: 700;
        letter-spacing: -.03em;
        line-height: 1;
        color: var(--ink);
      }

      .tp__freq {
        font-size: .86rem;
        font-weight: 500;
        color: var(--muted);
      }

      /* ⚠️ Masquee par defaut, revelee par `.billing-annual` que le script pose
         sur la GRILLE. En mensuel, il n'y a rien d'economise a annoncer. */
      .tp .price-savings {
        display: none;
        margin: 8px 0 0;
        font-size: .82rem;
        font-weight: 600;
        color: #1a7f4b;
      }

      .pricing-grid.billing-annual .tp .price-savings {
        display: block;
      }

      .tp .engagement-label {
        margin: 6px 0 0;
        font-size: .8rem;
        font-weight: 600;
        color: var(--red);
      }

      /* ── Les cinq points ──────────────────────────────────────────────── */
      .tp__points {
        list-style: none;
        margin: 20px 0 0;
        padding: 20px 0 0;
        border-top: 1px solid var(--border);
        display: flex;
        flex-direction: column;
        gap: 11px;
      }

      .tp__points li {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        font-size: .875rem;
        line-height: 1.5;
        color: var(--ink-2);
      }

      .tp__ok {
        flex: none;
        /* Cale sur la premiere ligne du texte plutot que centre : sur un point
           qui passe a la ligne, une coche centree se retrouve au milieu du
           paragraphe, loin de ce qu'elle coche. */
        margin-top: .12em;
        color: var(--red);
      }

      /* ── Pied ─────────────────────────────────────────────────────────── */
      /* `margin-top: auto` colle le bloc en bas : les six boutons s'alignent
         quelle que soit la longueur des descriptions au-dessus. */
      .tp__pied {
        margin-top: auto;
        padding-top: 22px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
      }

      .tp__cta {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        width: 100%;
      }

      .tp__fleche {
        flex: none;
        transition: transform .22s var(--ease);
      }

      .tp__cta:hover .tp__fleche {
        transform: translateX(3px);
      }

      /* Le detail devient un lien de second plan : il ne sert plus a decouvrir
         l'offre — les cinq points s'en chargent — mais a la lire en entier. */
      .tp__detail {
        border: 0;
        background: none;
        padding: 4px 2px;
        font-family: inherit;
        font-size: .82rem;
        font-weight: 500;
        color: var(--muted);
        text-decoration: underline;
        text-underline-offset: 3px;
        text-decoration-color: var(--border);
        cursor: pointer;
        transition: color .2s var(--ease), text-decoration-color .2s var(--ease);
      }

      .tp__detail:hover,
      .tp__detail:focus-visible {
        color: var(--red);
        text-decoration-color: var(--red);
      }

      /* ── La modale reprend le prix tel quel ───────────────────────────── */
      /* Le script clone le contenu de `.price` : ses enfants gardent donc leurs
         classes mais changent de parent. Les regles ci-dessus sont ecrites sous
         `.tp__prix`, elles ne s'y appliqueraient plus. */
      .offer-modal__px {
        display: flex;
        align-items: baseline;
        gap: 7px;
      }

      .offer-modal__px .price-amount {
        font-family: var(--font-display);
        font-size: 2.1rem;
        font-weight: 700;
        letter-spacing: -.03em;
        color: var(--ink);
      }

      /* ── Telephone ────────────────────────────────────────────────────── */
      @media (max-width: 768px) {
        .tp {
          padding: 22px 20px 20px;
        }

        /* Le plancher servait a aligner trois cartes cote a cote. Dans la bande
           a defilement horizontal, on n'en voit qu'une a la fois : il ne fait
           plus qu'ajouter du vide sous les descriptions courtes. */
        .tp__desc {
          min-height: 0;
        }

        /* Au doigt il n'y a pas de survol : l'etat reste colle apres l'appui et
           la carte parait decalee par rapport a ses voisines du carrousel. */
        .tp:hover {
          transform: none;
          box-shadow: none;
        }

        .tp--vedette:hover {
          box-shadow: 0 1px 2px rgba(34, 30, 26, .05), 0 16px 38px rgba(180, 24, 36, .13);
        }

        .tp__points {
          margin-top: 16px;
          padding-top: 16px;
          gap: 9px;
        }
      }

      /* ══════════════════════════════════════════════════════════════════
         REPRISE DU MODELE FOURNI — PALETTE NEUTRE
         ──────────────────────────────────────────────────────────────────
         Le modele est en noir, blanc et gris : pas de couleur d'accent, pas
         d'ombre portee, des filets fins et une carte en avant qui DEPASSE de
         la rangee au lieu de changer de couleur.

         ⚠️ LE ROUGE DE MARQUE A DISPARU DE CES CARTES, et c'est le seul point
         a rediscuter si le rendu ne convient pas. Tout tient dans les six
         jetons ci-dessous : redonner sa couleur au bouton et au badge, c'est
         changer `--tp-plein` et `--tp-plein-txt`, rien d'autre. Aucune regle
         plus bas ne code une couleur en dur.

         ⚠️ Les gris sont NEUTRES (#171717, #737373, #e5e5e5) et non les gris
         chauds du site (--ink #212224, --muted #6e6b66, --border #e6e1d8).
         C'est ce qui fait la difference entre « la meme image » et « presque
         la meme image » : sur un aplat blanc, un gris chaud se remarque
         immediatement a cote d'un gris neutre.
         ══════════════════════════════════════════════════════════════════ */
      /* ⚠️ Poses sur le <main> et non sur la grille : le titre de la page et
         les intitules de rangee vivent EN DEHORS des grilles, et ne pourraient
         pas les lire. Un seul endroit pour toute la page. */
      .pricing-page-main {
        --tp-trait: #e5e5e5;
        --tp-titre: #171717;
        --tp-gris: #737373;
        --tp-points: #525252;
        --tp-plein: #171717;
        --tp-plein-txt: #ffffff;
      }

      .tp {
        display: flex;
        flex-direction: column;
        background: #fff;
        border: 1px solid var(--tp-trait);
        /* 6px : juste de quoi eviter l'angle vif, rien de plus. Le reste du site
           arrondit a 24px (--r-xl) ; cette page s'en ecarte volontairement pour
           suivre le modele, ou les cartes sont presque rectangulaires. */
        border-radius: 6px;
        padding: 0;
        box-shadow: none;
        transition: border-color .25s var(--ease);
      }

      /* Plus de soulevement au survol : le modele ne bouge pas. Seul le filet
         se fonce, ce qui suffit a dire que la carte repond. */
      .tp:hover {
        transform: none;
        box-shadow: none;
        border-color: #d4d4d4;
      }

      /* ⚠️ LA CARTE EN AVANT DEPASSE, elle ne grossit pas. Les marges negatives
         l'etirent de 22px au-dessus et au-dessous de la rangee ; sa largeur, et
         donc l'alignement des trois colonnes, ne bouge pas d'un pixel. Un
         `transform: scale()` aurait flouté le texte et decale les filets. */
      .tp--vedette {
        margin-block: -22px;
        border-color: #d4d4d4;
      }

      /* ── Haut de carte ────────────────────────────────────────────────── */
      .tp__ligne {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        padding: 24px 24px 0;
      }

      .tp__nom {
        margin: 0;
        font-family: var(--font-display);
        font-size: 1.22rem;
        font-weight: 600;
        letter-spacing: -.015em;
        line-height: 1.2;
        color: var(--tp-titre);
      }

      /* Pastille claire a filet, avec son etoile — et non un aplat de couleur. */
      .tp__badge {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        flex: none;
        padding: 4px 10px;
        border: 1px solid var(--tp-trait);
        border-radius: var(--r-pill);
        background: #fff;
        color: var(--tp-titre);
        font-size: .72rem;
        font-weight: 600;
        white-space: nowrap;
      }

      .tp__badge::before {
        content: "";
        width: 11px;
        height: 11px;
        background: currentColor;
        /* L'etoile du modele, en masque : pas de SVG de plus a charger pour un
           signe de 11px qui ne sert qu'a decorer la pastille. */
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.9 5.9 6.5.9-4.7 4.6 1.1 6.4-5.8-3-5.8 3 1.1-6.4L2.6 9.4l6.5-.9z'/%3E%3C/svg%3E") center / contain no-repeat;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.9 5.9 6.5.9-4.7 4.6 1.1 6.4-5.8-3-5.8 3 1.1-6.4L2.6 9.4l6.5-.9z'/%3E%3C/svg%3E") center / contain no-repeat;
      }

      .tp__desc {
        margin: 6px 0 0;
        padding: 0 24px;
        font-size: .86rem;
        line-height: 1.5;
        color: var(--tp-gris);
        min-height: 2.3em;
      }

      /* ── Prix ─────────────────────────────────────────────────────────── */
      .tp__prix {
        display: flex;
        align-items: baseline;
        gap: 2px;
        margin: 22px 0 0;
        padding: 0 24px;
      }

      /* « Dès » ne figure pas dans le modele, ou le prix commence au chiffre.
         Il reste parce qu'il est EXACT : ces tarifs sont des planchers. */
      .tp__des {
        margin-right: 6px;
        font-size: .82rem;
        font-weight: 500;
        color: var(--tp-gris);
      }

      .tp__prix .price-amount {
        font-family: var(--font-display);
        font-size: clamp(2.1rem, 3.6vw, 2.5rem);
        font-weight: 700;
        letter-spacing: -.035em;
        line-height: 1;
        color: var(--tp-titre);
      }

      .tp__freq {
        font-size: .92rem;
        font-weight: 400;
        color: var(--tp-gris);
      }

      .tp__facture {
        margin: 12px 0 0;
        padding: 0 24px;
        font-size: .76rem;
        color: var(--tp-gris);
      }

      .tp .price-savings {
        display: none;
        margin: 5px 0 0;
        padding: 0 24px;
        font-size: .76rem;
        font-weight: 600;
        color: var(--tp-titre);
      }

      .pricing-grid.billing-annual .tp .price-savings {
        display: block;
      }

      .tp .engagement-label {
        margin: 5px 0 0;
        padding: 0 24px;
        font-size: .76rem;
        font-weight: 500;
        color: var(--tp-gris);
      }

      /* ── Les points, entre deux filets ────────────────────────────────── */
      /* Le modele enferme la liste entre DEUX traits pleine largeur. D'ou le
         `padding: 0` sur la carte et les retraits pose bloc par bloc : un
         retrait porte par la carte aurait rentre les filets de 24px et cassé
         le decoupage horizontal. */
      .tp__points {
        list-style: none;
        margin: 24px 0 0;
        padding: 22px 24px;
        border-top: 1px solid var(--tp-trait);
        border-bottom: 1px solid var(--tp-trait);
        display: flex;
        flex-direction: column;
        gap: 13px;
      }

      .tp__points li {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        font-size: .875rem;
        line-height: 1.45;
        color: var(--tp-points);
      }

      /* ⚠️ #949494 et non le #a3a3a3 du modele. MESURE : 2,52:1 sur blanc,
         contre 3,03:1 pour celui-ci — c'est le gris le PLUS CLAIR qui atteigne
         le seuil, un cran au-dessus (#959595) et il retombe a 3,00:1 tout
         juste. L'ecart ne se voit pas a l'oeil, la coche reste discrete. */
      .tp__ok {
        flex: none;
        margin-top: .06em;
        color: #949494;
      }

      /* ── Pied ─────────────────────────────────────────────────────────── */
      .tp__pied {
        margin-top: auto;
        padding: 18px 24px 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
      }

      /* ⚠️ `.tp__cta` porte encore `.btn--red` dans le HTML, qui vient de
         style.css. Tout est redefini ici — fond, couleur, filet, ombre — parce
         que cette feuille passe APRES dans la cascade. Retirer la classe du
         markup aurait aussi retire `.checkout-btn` de son voisinage logique et
         demande de reverifier les trois boutons Stripe. */
      /* ⚠️ Le filet du bouton N'EST PAS `--tp-trait`. MESURE : #e5e5e5 ne rend
         que 1,26:1 sur blanc — le contour d'un bouton blanc sur fond blanc
         devient alors invisible, et il ne reste plus rien pour dire ou l'on
         clique. L'etiquette, elle, est parfaitement lisible : on verrait le
         texte sans voir le bouton, exactement le defaut deja corrige sur le
         pied de page. #949494 donne 3,03:1, le minimum pour un contour de
         commande. Les filets des CARTES, eux, restent clairs : ce sont des
         separateurs, pas des bords de commande. */
      .tp__cta {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        padding: 11px 18px;
        border: 1px solid #949494;
        border-radius: 6px;
        background: #fff;
        color: var(--tp-titre);
        font-size: .9rem;
        font-weight: 500;
        box-shadow: none;
      }

      .tp__cta:hover {
        background: #f4f4f5;
        border-color: #6b6b6b;
        color: var(--tp-titre);
        transform: none;
        box-shadow: none;
      }

      /* Le bouton plein n'existe QUE sur la carte en avant : c'est la seule
         difference de traitement entre les trois, et donc la seule chose que
         l'oeil retient. Deux boutons pleins et il ne reste plus de hierarchie. */
      .tp--vedette .tp__cta {
        background: var(--tp-plein);
        border-color: var(--tp-plein);
        color: var(--tp-plein-txt);
        font-weight: 600;
      }

      .tp--vedette .tp__cta:hover {
        background: #000;
        border-color: #000;
        color: var(--tp-plein-txt);
      }

      .tp__fleche {
        display: none;
      }

      .tp__detail {
        border: 0;
        background: none;
        padding: 2px;
        font-family: inherit;
        font-size: .78rem;
        font-weight: 400;
        color: var(--tp-gris);
        text-decoration: underline;
        text-underline-offset: 3px;
        text-decoration-color: var(--tp-trait);
        cursor: pointer;
        transition: color .2s var(--ease), text-decoration-color .2s var(--ease);
      }

      .tp__detail:hover,
      .tp__detail:focus-visible {
        color: var(--tp-titre);
        text-decoration-color: var(--tp-gris);
      }

      /* ── L'en-tete de la page ─────────────────────────────────────────── */
      /* Un titre, deux lignes grises, rien d'autre. La pastille de rubrique et
         le paragraphe rouge gras qui vivaient ici ont ete retires : sur une page
         ou l'on vient lire des chiffres, tout ce qui precede les cartes retarde
         la comparaison. */
      .tp-titre {
        margin: 0;
        font-family: var(--font-display);
        font-size: clamp(2.1rem, 4.4vw, 3.1rem);
        font-weight: 700;
        line-height: 1.12;
        letter-spacing: -.03em;
        color: var(--tp-titre);
        text-wrap: balance;
      }

      .tp-chapeau {
        max-width: 34rem;
        margin: 14px auto 0;
        font-size: 1rem;
        line-height: 1.6;
        color: var(--tp-gris);
        text-wrap: pretty;
      }

      /* Les deux intitules de rangee passent au gris neutre, comme le reste. */
      .shop-row__label {
        border-bottom-color: var(--tp-trait);
      }

      .shop-row__label h2 {
        font-weight: 700;
        color: var(--tp-titre);
      }

      .shop-row__label p {
        color: var(--tp-gris);
      }

      /* ══════════════════════════════════════════════════════════════════
         LE SELECTEUR DE PERIODICITE
         ──────────────────────────────────────────────────────────────────
         Un interrupteur est devenu deux segments dans une pilule : on lit
         directement les deux options et celle qui est active, la ou un
         interrupteur oblige a deviner dans quel sens il bascule.
         ══════════════════════════════════════════════════════════════════ */
      .bt {
        display: inline-flex;
        align-items: center;
        gap: 2px;
        padding: 4px;
        margin: 28px auto 46px;
        border-radius: var(--r-btn);
        background: #f4f4f5;
      }

      .bt__opt {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        /* 36px de haut : c'est une commande, elle doit rester prenable au
           doigt sans que la pilule ne devienne un pave. */
        min-height: 36px;
        padding: 0 20px;
        border: 0;
        border-radius: var(--r-btn);
        background: transparent;
        color: #52525b;
        font-family: inherit;
        font-size: .88rem;
        font-weight: 500;
        cursor: pointer;
        transition: background-color .22s var(--ease), color .22s var(--ease);
      }

      .bt__opt:hover {
        color: #18181b;
      }

      .bt__opt.is-active {
        background: var(--tp-plein);
        color: var(--tp-plein-txt);
      }

      .bt__eco {
        font-size: .76rem;
        font-weight: 600;
        opacity: .72;
      }

      /* ── Telephone ────────────────────────────────────────────────────── */
      @media (max-width: 768px) {
        /* Dans la bande a defilement horizontal, on ne voit qu'une carte a la
           fois : la carte en avant n'a plus de voisines a depasser, et ses
           marges negatives ne feraient que la desaligner. */
        .tp--vedette {
          margin-block: 0;
        }

        .tp__desc {
          min-height: 0;
        }

        .tp:hover {
          border-color: var(--tp-trait);
        }

        .tp__ligne,
        .tp__desc,
        .tp__prix,
        .tp__facture,
        .tp .price-savings,
        .tp .engagement-label {
          padding-inline: 20px;
        }

        .tp__points {
          margin-top: 20px;
          padding: 18px 20px;
          gap: 11px;
        }

        .tp__pied {
          padding: 16px 20px 18px;
        }

        .bt {
          margin-block: 24px 36px;
        }

        .bt__opt {
          padding-inline: 16px;
          font-size: .84rem;
        }
      }

      /* ══════════════════════════════════════════════════════════════════
         DES CARTES PLUS LARGES, ET MOINS HAUTES
         ──────────────────────────────────────────────────────────────────
         Les trois cartes vivaient dans `.container`, plafonne a 1080px : une
         fois ses 28px de retrait et les deux gouttieres retires, il restait
         322px par carte. Etroites et chargees de six lignes, elles partaient
         en hauteur.

         ⚠️ LA GRILLE SORT DU CONTENEUR PAR MARGES NEGATIVES, et non par un
         `transform: translateX(-50%)`. Un transform aurait decale le contexte
         de positionnement et, surtout, rendu les filets a des demi-pixels : sur
         des cartes qui ne sont QUE des filets, cela se voit. Ici `100%` vaut la
         largeur utile du conteneur ; la formule recentre simplement la grille
         sur une largeur superieure.

         ⚠️ SOUS 769px, RIEN DE TOUT CECI NE S'APPLIQUE. mobile.css transforme
         `#pricing-grid` en bande a defilement horizontal avec ses propres
         marges negatives, et cette feuille-ci passe APRES lui dans la cascade :
         sans la borne `min-width`, elle ecraserait le carrousel et la premiere
         carte se decollerait du bord de l'ecran.
         ══════════════════════════════════════════════════════════════════ */
      @media (min-width: 769px) {
        .pricing-grid,
        .shop-row__label {
          /* 48px de garde : 24 de chaque cote, pour ne jamais coller au bord. */
          --tp-large: min(1280px, calc(100vw - 48px));
          width: var(--tp-large);
          margin-inline: calc((100% - var(--tp-large)) / 2);
        }

        .pricing-grid {
          gap: 24px;
        }
      }

      /* ── La hauteur ──────────────────────────────────────────────────── */
      /* ⚠️ BORNEE A 769px COMME L'ELARGISSEMENT. Le bloc `max-width: 768px`
         plus haut dans cette meme feuille resserre deja la carte pour la bande
         a defilement ; sans cette borne, ces regles passeraient APRES lui et
         lui reprendraient ses valeurs — notamment le `min-height: 0` de la
         description, qui remettrait du vide sous les libelles courts. */
      @media (min-width: 769px) {
          /* Chaque bloc perd quelques pixels, ce qui en fait une quarantaine sur
           la carte. Aucun n'est supprime : c'est l'air entre eux qui se
           resserre, maintenant que la largeur porte une part de la
           respiration. */
        .tp__ligne {
          padding-top: 20px;
        }

        .tp__desc {
          margin-top: 5px;
          /* Deux lignes suffisent a cette largeur ; le plancher servait a aligner
             les prix quand les descriptions passaient sur trois. */
          min-height: 2.1em;
        }

        .tp__prix {
          margin-top: 18px;
        }

        .tp__facture {
          margin-top: 10px;
        }

        .tp__points {
          margin-top: 20px;
          padding-block: 18px;
          gap: 10px;
        }

        .tp__pied {
          padding: 16px 24px 18px;
        }
      }

      /* ── Grands ecrans ───────────────────────────────────────────────── */
      /* Passe 1100px de fenetre, les cartes ont la place de poser leur titre et
         leur prix plus au large sans que la ligne de texte ne devienne trop
         longue a lire. */
      @media (min-width: 1100px) {
        .tp__ligne,
        .tp__desc,
        .tp__prix,
        .tp__facture,
        .tp .price-savings,
        .tp .engagement-label {
          padding-inline: 28px;
        }

        .tp__points {
          padding-inline: 28px;
        }

        .tp__pied {
          padding-inline: 28px;
        }

        .tp__prix .price-amount {
          font-size: 2.7rem;
        }
      }