/* Medialem — la grille tarifaire (medialem/pricing).

   Chargée avec le bloc, pas avec une page : Theme::addAssets la conditionne à
   la présence de medialem/pricing, comme tabset.css l'est au tour produit. Le
   bloc peut donc être posé ailleurs sans emporter une feuille de page entière.

   Le bandeau est le hero de /prix-creation-marketplace/ : le sujet de la page
   est un nombre, donc la première chose à l'écran est un nombre. Toute
   l'audace est dépensée sur les chiffres — Bricolage Grotesque en grand, en
   chiffres tabulaires pour que les quatre montants s'alignent et se comparent
   d'un coup d'œil. Le reste du bandeau reste discret.

   Les onglets sont ceux du site (.tabs/.tab-btn, variante is-dark de
   tabset.css) : une barre de formules qui ressemblerait à un tabset sans en
   être un serait pire que pas de barre du tout. */

/* Ce qui varie avec la formule porte l'attribut `hidden`, et c'est lui qui fait
   le repli sans JavaScript. Mais `display: block` posé plus bas gagne contre le
   `display: none` de la feuille du navigateur, donc l'élément concerné doit
   annuler le sien explicitement. Sans cette règle, les seize tarifs s'affichent
   en même temps. */
.type-price[hidden] {
    display: none;
}

/* ================= BANDEAU ================= */
.pricing-band {
    position: relative;
    color: #fff;
    overflow: hidden;
    /* Premier bandeau de la page, sous un header marine : il faut assez d'air
       au-dessus du titre pour que les deux marines ne se confondent pas, et pas
       plus — chaque pixel ici est un pixel de tarif sous la ligne de flottaison. */
    padding: 76px 0 84px;
    background:
        radial-gradient(1000px 600px at 88% -12%, rgba(253, 79, 88, 0.2), transparent 55%),
        radial-gradient(900px 700px at -12% 115%, rgba(14, 91, 133, 0.75), transparent 60%),
        linear-gradient(160deg, var(--navy) 30%, #04283f 100%);
}

.pricing-band::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1.2px, transparent 1.2px);
    background-size: 30px 30px;
    pointer-events: none;
}

.pricing-band > .container {
    position: relative;
}

/* Titre pleine largeur, chapô dessous, le tout aligné à gauche — la voix du
   site (hero, chapô d'article), pas la page tarifaire centrée de n'importe quel
   SaaS.

   Le titre a d'abord été mis en colonne à côté du chapô, ce qui le bridait à
   565px et le cassait en trois lignes. Mesuré : la question française tient sur
   1060px d'une seule ligne, dans un conteneur de 1132px. Elle passe donc en
   entier jusque vers 700px de large, et trois lignes de titre en moins, c'est
   80px de tarifs gagnés au-dessus de la ligne de flottaison. */
.pricing-head {
    margin-bottom: 32px;
}

.pricing-band h1,
.pricing-band .pricing-head h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(2rem, 4.2vw, 3.1rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.015em;
    color: #fff;
}

.pricing-lead {
    margin-top: 16px;
    font-size: 1.1rem;
    line-height: 1.6;
    color: #bcd3e2;
    /* Le titre peut courir sur toute la largeur, pas le chapô : à 1132px une
       ligne de texte courant dépasserait largement les 80 signes lisibles. */
    max-width: 62ch;
}

.pricing-lead strong {
    color: #fff;
    font-weight: 700;
}

/* ================= SÉLECTEUR DE FORMULE ================= */
/* Radiogroup, pas tablist : choisir une formule change le tarif dans chaque
   carte, sans révéler de panneau (voir le commentaire de render.php). Il porte
   les classes .tabs/.tab-btn pour se lire comme toutes les barres du site. */
.plan-switch {
    align-items: stretch;
}

.plan-switch .tab-btn {
    gap: 10px;
}

.plan-switch .plan-badge {
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--coral);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-shadow: 0 1px 2px rgba(120, 20, 26, 0.45);
}

/* Ce que la formule comprend, sous la barre, et qui change avec elle.

   Les quatre versions occupent la MÊME cellule de grille, donc le bloc fait
   toujours la hauteur de la formule la plus bavarde et les cartes en dessous ne
   bougent pas d'un onglet à l'autre. Sans cela « SaaS 1 mois », qui n'a que
   trois mentions au lieu de quatre, faisait remonter toute la page de 33px.

   Les inactives sont `visibility: hidden` et non `display: none` : c'est ce qui
   réserve la place. Elles restent hors de l'arbre d'accessibilité — visibility
   les en retire, contrairement à `opacity: 0` — donc l'attribut `hidden` garde
   son sens, et le repli sans JavaScript aussi.

   Une hauteur figée en `em` aurait été plus simple et fausse : le nombre de
   lignes dépend de la largeur, et la valeur aurait menti dès la première
   retouche de copie. */
.plan-terms-stack {
    display: grid;
    margin: 18px 0 26px;
}

.plan-terms {
    grid-area: 1 / 1;
    display: flex;
    flex-wrap: wrap;
    /* Stretched to the cell by the grid above, and a wrapping flex container
       defaults to `align-content: normal`, which spreads the spare height BETWEEN
       its lines. The block stopped moving but its own lines still did — up to
       17px between formules at 768-900px. Pin the lines to the top instead. */
    align-content: flex-start;
    gap: 10px 26px;
    margin: 0;
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.72);
    transition: opacity 0.18s ease;
}

.plan-terms[hidden] {
    display: flex;
    visibility: hidden;
    opacity: 0;
}

/* La note tient sa propre ligne : en ligne avec les coches elle poussait la
   dernière au retour, ce qui rendait le bloc inutilement haut. */
.plan-term.is-note {
    flex-basis: 100%;
}

.plan-term {
    position: relative;
    padding-left: 22px;
}

/* Coche dessinée au bord, comme .plan-includes le faisait avant : pas d'icône
   à charger pour quatre traits. */
.plan-term::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 0.42em;
    width: 5px;
    height: 10px;
    border: solid var(--coral);
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(42deg);
}

.plan-term.is-note {
    color: #fff;
    font-weight: 700;
    padding-left: 0;
}

.plan-term.is-note::before {
    display: none;
}

/* ================= CARTES DE TYPE ================= */
.pricing-types {
    display: block;
}

.type-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.type-card {
    display: block;
    position: relative;
    text-align: left;
    font-family: inherit;
    padding: 22px 22px 24px;
    border: 1.5px solid rgba(255, 255, 255, 0.14);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.05);
    color: inherit;
    cursor: pointer;
    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        transform 0.18s ease;
}

.type-card:hover {
    border-color: rgba(255, 255, 255, 0.34);
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-3px);
}

.type-card[aria-selected="true"] {
    border-color: var(--coral);
    background: rgba(253, 79, 88, 0.1);
}

/* La flèche qui rattache la carte active au panneau : c'est elle qui dit que
   le texte en dessous décrit *cette* carte, et rien d'autre. */
.type-card[aria-selected="true"]::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -11px;
    width: 18px;
    height: 18px;
    translate: -50% 0;
    rotate: 45deg;
    border: 1.5px solid var(--coral);
    border-width: 0 1.5px 1.5px 0;
    border-radius: 0 0 4px 0;
    background: #08344e;
}

.type-card:focus-visible {
    outline: 3px solid var(--coral);
    outline-offset: 3px;
}

.type-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.09);
    color: var(--coral);
    margin-bottom: 16px;
}

.type-card[aria-selected="true"] .type-ic {
    background: rgba(253, 79, 88, 0.18);
}

.type-prices {
    display: block;
}

.type-price {
    display: block;
}

/* Passer d'une formule à l'autre remplace un display:none par un affichage, ce
   qui relance l'animation toute seule : aucun code JavaScript ne la déclenche.
   Le garde-fou `[data-swapped]` est posé par tabset.js au premier changement,
   sinon les quatre tarifs s'animeraient aussi au chargement de la page.

   Vocabulaire maison : opacité plus translation verticale, `ease`, comme
   `tabFadeUp`. Course plus courte (6px) et plus rapide (0.24s) que celle d'un
   panneau : l'élément est petit et il y en a quatre en même temps. */
.pricing[data-swapped] .type-price {
    animation: priceSwap 0.24s ease;
}

@keyframes priceSwap {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* Le seul endroit où la page hausse la voix. Chiffres tabulaires pour que les
   quatre montants s'alignent colonne par colonne d'une carte à l'autre. */
.type-price b {
    display: block;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(1.5rem, 2.5vw, 2.05rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: #fff;
    /* "3 000 €" ne doit jamais se couper : l'espace des milliers est une espace
       ordinaire, c'est le nowrap qui la rend insécable. */
    white-space: nowrap;
}

/* "HT" accompagne le montant, il ne le concurrence pas. */
.type-price b em {
    font-style: normal;
    font-size: 0.46em;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.55);
    margin-left: 0.35em;
}

.type-price small {
    display: block;
    margin-top: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
}

.type-name {
    display: block;
    margin-top: 16px;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
}

.type-short {
    display: block;
    margin-top: 6px;
    font-size: 0.86rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.66);
}

/* ================= DESCRIPTION DÉTAILLÉE ================= */
.type-panels {
    margin-top: 22px;
    padding: 26px 28px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.05);
}

.type-panel p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.8);
    max-width: 76ch;
}

.type-panel p strong {
    color: #fff;
    font-weight: 700;
}

/* ================= NOTE DE BAS DE BANDEAU ================= */
.pricing-note {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 26px;
    flex-wrap: wrap;
    margin-top: 34px;
    padding-top: 26px;
    border-top: 1px solid rgba(255, 255, 255, 0.13);
}

.pricing-note p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.72);
    max-width: 62ch;
}

.pricing-note .btn {
    flex: none;
}

/* ================= RESPONSIVE ================= */
@media (max-width: 1100px) {
    .type-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Sur deux colonnes la flèche pointerait entre deux cartes de la première
       rangée, donc à côté du panneau. Le liseré corail suffit. */
    .type-card[aria-selected="true"]::after {
        display: none;
    }
}

@media (max-width: 1000px) {
    .pricing-band {
        padding: 62px 0 68px;
    }
}

@media (max-width: 768px) {
    /* Le sélecteur de formule cesse de défiler et passe en 2x2.

       En barre défilante, un téléphone de 393px montrait deux formules sur
       quatre — 572px de contenu dans 345px de barre — et rien ne disait qu'il y
       en avait d'autres. Les libellés font 64 à 84px : dans une grille à deux
       colonnes chaque cellule en offre 132px dès 320px de large, donc les
       quatre tiennent sans défilement ni retour à la ligne.

       Ce n'est pas une barre d'onglets ici mais un radiogroup, et un groupe de
       pastilles est sa forme normale : rien à faire fusionner avec un panneau,
       donc pastilles cerclées plutôt que filet corail. */
    .tabs.plan-switch {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        overflow: visible;
        border-bottom: none;
    }

    .tabs.plan-switch .tab-btn {
        bottom: 0;
        justify-content: center;
        text-align: center;
        padding: 0.8em 0.7em;
        border: 1.5px solid rgba(255, 255, 255, 0.16);
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.05);
    }

    .tabs.plan-switch .tab-btn[aria-checked="true"] {
        border-color: var(--coral);
        background: rgba(253, 79, 88, 0.12);
    }

    /* Le filet corail servait à raccrocher un onglet à son panneau ; une
       pastille cerclée dit déjà laquelle est choisie. */
    .tabs.plan-switch .tab-btn[aria-checked="true"]::after {
        display: none;
    }

    /* Le badge devient une pastille corail. `font-size: 0` le retire de l'écran
       sans le retirer de l'arbre d'accessibilité : « Le plus choisi » reste lu à
       voix haute, là où `display: none` l'aurait supprimé. Il pesait 110px sur
       une cellule qui en fait 132. */
    .plan-switch .plan-badge {
        width: 9px;
        height: 9px;
        padding: 0;
        font-size: 0;
        border-radius: 50%;
        text-shadow: none;
    }
}

@media (max-width: 640px) {
    .type-cards {
        grid-template-columns: minmax(0, 1fr);
    }

    .type-panels {
        padding: 22px;
    }

    .pricing-note {
        align-items: flex-start;
        flex-direction: column;
        gap: 18px;
    }
}

@media (max-width: 400px) {
    /* Sous 400px la note d'une formule tient sur une ligne et celle d'une autre
       sur deux, donc la rangée de coches sous elle changeait de place de 23px au
       changement de formule. Le bloc entier garde déjà sa hauteur — la grille
       empilée s'en charge — il restait à réserver la deuxième ligne de la note.
       `2lh` dit « deux lignes » et non un nombre de pixels qui mentirait à la
       première retouche de copie ou au premier agrandissement de police. */
    .plan-term.is-note {
        min-height: 2lh;
    }
}