/* Captain Auto - Landing publique, page Tarifs et portes de paiement.
   Système « L'instrument de verre » (DESIGN.md, mode Persuade), d'après la maquette validée
   docs/maquettes/landing-soft.html. Refonte du 14/10/2026.

   Chargé AVANT bordereau.css et responsive.css : les règles d'écran sont préfixées par
   #page-landing ou #page-pricing pour garder la main sans !important. Les anciennes règles
   « Landing publique », « Page Tarifs » et « Explorateur du hero » de bordereau.css ont
   été retirées avec cette refonte. Halo et grain vivent sur body (base.css) : rien ici.

   Le double cadre : l'anneau est une ombre à étalement (--coque), il ne prend pas de place.
   Au moins 20 px entre deux cartes, jamais d'overflow: hidden sur leur parent. */

#page-landing,
#page-pricing {
    --lp-section: clamp(4rem, 9vw, 7.5rem);
    --lp-carte: var(--bg-1);
    --lp-coque: var(--coeur-lueur), var(--coque);
    --lp-coque-survol: var(--coeur-lueur), 0 0 0 var(--anneau) rgba(255, 255, 255, .035), 0 0 0 var(--anneau-filet) var(--border-strong);
}

/* Titres de section (DESIGN.md : clamp 2.25 à 3.75 rem, graisse 640) et leur chapeau. */
#page-landing :is(.gemv-band, .examples-band, .gems-band, .avoid-band, .cotes-band, .landing-faq, .cas-band) > h2,
#page-landing .ingest-intro h2 {
    margin: 0;
    font-size: clamp(2.25rem, 4.2vw, 3.75rem);
    font-weight: 500;
    line-height: 1.02;
    letter-spacing: -0.03em;
    text-align: left;
    text-wrap: balance;
    color: var(--text-1);
}
#page-landing .gems-sub {
    max-width: 40rem;
    margin: 20px 0 0;
    font-size: 1.0625rem;
    line-height: 1.6;
    text-align: left;
    color: var(--text-2);
}
#page-landing p a,
#page-pricing p a {
    color: var(--accent-strong);
    text-decoration: underline;
    text-underline-offset: 3px;
}
@media (hover: hover) {
    #page-landing p a:hover,
    #page-pricing p a:hover { color: var(--text-1); }
}


/* ===== 1. Hero ===== */

#page-landing .hero {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 32px;
    max-width: none;
    min-height: calc(100svh - var(--entete-h) - 48px);
    margin: 0;
    padding: 40px 0 0;
    text-align: left;
    background: none;
}
/* Le seul moment de couleur du premier écran : la voiture, sur la zone laissée libre à droite. */
#page-landing .hero-scene {
    position: absolute;
    z-index: -1;
    top: -48px;
    bottom: 0;
    left: 50%;
    width: 100vw;
    max-width: none;
    height: calc(100% + 48px);
    margin-left: -50vw;
    object-fit: cover;
    object-position: 100% 62%;
    -webkit-mask-image: linear-gradient(90deg, transparent 22%, #000 66%);
    mask-image: linear-gradient(90deg, transparent 22%, #000 66%);
}
#page-landing .hero-content { min-width: 0; max-width: 46rem; }
#page-landing .hero h1 {
    max-width: none;
    margin: 0 0 16px;
    font-size: clamp(2.5rem, 4.3vw, 3.75rem);
    font-weight: 500;
    line-height: 1.04;
    letter-spacing: -0.03em;
    color: var(--text-1);
    text-wrap: balance;
}
/* Seconde moitié du titre : l'emphase vient de la graisse, jamais d'un dégradé. */
#page-landing .hero-accent { font-weight: 400; color: var(--text-2); }
#page-landing .hero-sub {
    max-width: 36rem;
    margin: 0;
    font-size: 1.125rem;
    line-height: 1.55;
    color: var(--text-2);
    text-wrap: pretty;
}
#page-landing .hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 32px;
}
#page-landing .hero-note {
    margin: 16px 0 0;
    font-size: .875rem;
    line-height: 1.5;
    color: var(--text-3);
}
#page-landing .hero-note strong { font-weight: 500; color: var(--text-2); }
/* Entrée des professionnels vers /pro : lien discret sous la réassurance. */
#page-landing .hero-pro {
    display: inline-block;
    margin-top: 8px;
    font-size: .875rem;
    color: var(--text-3);
    text-decoration: none;
    transition: color var(--t);
}
#page-landing .hero-pro span { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) { #page-landing .hero-pro:hover { color: var(--text-1); } }

/* --- Explorateur : le bandeau au pied du premier écran --- */
#page-landing .hero-aside { display: block; min-width: 0; padding: 0; }
#page-landing .explorer {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 28px;
    border: 0;
    border-radius: var(--radius-lg);
    background: var(--lp-carte);
    box-shadow: var(--lp-coque);
    clip-path: none;
}
#page-landing .explorer-tag {
    font-family: var(--font);
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--text-1);
}
#page-landing .explorer-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
#page-landing .explorer-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
#page-landing .explorer-field > span:first-child {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    font-family: var(--font);
    font-size: .8125rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--text-3);
}
#page-landing .explorer-field > span:first-child b {
    font-family: var(--font);
    font-size: .9375rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    font-variant-numeric: tabular-nums;
    color: var(--text-1);
}
#page-landing .explorer-field select {
    width: 100%;
    height: 44px;
    font-size: .9375rem;
}
#page-landing .explorer-field input[type=range] { margin: 8px 0 4px; }
#page-landing .explorer-zone-scale { display: flex; justify-content: space-between; gap: 4px; margin: 0; }
#page-landing .explorer-zone-scale i {
    font-family: var(--font);
    font-size: .8125rem;
    font-style: normal;
    color: var(--text-3);
    transition: color var(--t);
}
#page-landing .explorer-zone-scale i.on { color: var(--accent-strong); }

/* Le compteur : montant héros dans l'encadré bleu de la maquette (le « vrai prix »). */
#page-landing .explorer-count {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 4px 0 0;
    padding: 20px;
    border: 1px solid rgba(124, 192, 240, .22);
    border-radius: var(--radius);
    background: rgba(0, 87, 217, .1);
}
#page-landing .explorer-count-num {
    font-family: var(--font);
    font-size: clamp(2.25rem, 4vw, 3.25rem);
    font-weight: 500;
    line-height: .95;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--accent-strong);
    transition: opacity var(--t);
}
#page-landing .explorer-count-num.loading { opacity: .35; }
#page-landing .explorer-count-label { font-size: .875rem; line-height: 1.45; color: var(--text-2); }
#page-landing .explorer-approx {
    display: block;
    font-family: var(--font);
    font-size: .8125rem;
    color: var(--text-3);
}
#page-landing .explorer-cta { width: 100%; }
#page-landing .explorer-note { margin: 0; font-size: .8125rem; line-height: 1.5; color: var(--text-3); }

/* ===== 2. Bande de confiance : ligne de faits à filets (3 colonnes, 4 avec le compteur) ===== */

#page-landing .trust-band {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    border-top: 1px solid var(--border);
}
#page-landing .trust-band:has(> :nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#page-landing .trust-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: 28px 32px 0;
    border-left: 1px solid var(--border);
    font-family: var(--font);
    font-size: inherit;
    letter-spacing: 0;
    text-transform: none;
    color: inherit;
}
#page-landing .trust-item:first-child { padding-left: 0; border-left: 0; }
#page-landing .trust-value {
    font-family: var(--font);
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--text-1);
}
#page-landing .trust-label {
    font-family: var(--font);
    font-size: .9375rem;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-2);
}

/* ===== 3. Pépites vérifiées : le bento ===== */

#page-landing .gemv-band { margin: 0; padding: var(--lp-section) 0 0; background: none; }
#page-landing .gemv-cards {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 20px;
    max-width: none;
    margin: 48px 0 0;
    padding: 0;
}
/* Répartition selon le nombre de pépites (vitrine-nN, posée par index.php). La plus forte
   (.gemv-une) prend 7 colonnes sur 2 rangs quand des cases de 5 l'accompagnent. */
#page-landing .gemv-cards > .gemv-card { grid-column: span 5; grid-row: auto; }
#page-landing .gemv-cards > .gemv-une { grid-column: span 7; grid-row: span 2; }
#page-landing .gemv-cards.vitrine-n1 > .gemv-une { grid-column: 3 / span 8; grid-row: auto; }
#page-landing .gemv-cards.vitrine-n2 > .gemv-une { grid-row: auto; }
#page-landing .gemv-cards.vitrine-n5 > .gemv-card:nth-child(5) { grid-column: span 7; }
#page-landing .gemv-cards.vitrine-n6 > .gemv-card:nth-child(n+4) { grid-column: span 4; }
/* Quatre pépites : la quatrième en bande horizontale sous le bento (vignette et titre,
   lignes, montant), plutôt qu'une case orpheline. */
#page-landing .gemv-cards.vitrine-n4 > .gemv-card:nth-child(4) {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr);
    gap: 12px 40px;
    align-items: start;
}
.vitrine-n4 > .gemv-card:nth-child(4) > .gemv-tete { grid-column: 1; grid-row: 1; }
.vitrine-n4 > .gemv-card:nth-child(4) > .gemv-liens { grid-column: 1; grid-row: 2; align-self: end; }
.vitrine-n4 > .gemv-card:nth-child(4) > .gemv-lignes { grid-column: 2; grid-row: 1 / span 2; }
.vitrine-n4 > .gemv-card:nth-child(4) > .gemv-potentiel { grid-column: 3; grid-row: 1; margin: 0; }
.vitrine-n4 > .gemv-card:nth-child(4) > .gemv-detail { grid-column: 3; grid-row: 2; margin: 0; }

#page-landing .gemv-card {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
    padding: 24px;
    border: 0;
    border-radius: var(--radius);
    background: var(--lp-carte);
    box-shadow: var(--lp-coque);
}
#page-landing .gemv-une { padding: 28px; border-radius: var(--radius-lg); }
@media (hover: hover) {
    #page-landing .gemv-card:hover { box-shadow: var(--lp-coque-survol); }
}

/* En-tête : vignette, titre et méta, pastille « Vendue en X jours ». */
#page-landing .gemv-tete {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    column-gap: 16px;
    row-gap: 8px;
    align-items: start;
}
#page-landing .gemv-photo {
    position: relative;
    grid-row: span 2;
    aspect-ratio: 4 / 3;
    max-width: 100%;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: var(--verre);
}
#page-landing .gemv-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
#page-landing .gemv-titre { min-width: 0; }
#page-landing .gemv-titre h3 {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -0.01em;
    text-wrap: balance;
    color: var(--text-1);
}
#page-landing .gemv-specs {
    margin: 4px 0 0;
    font-family: var(--font-mono);
    font-size: .75rem;
    line-height: 1.4;
    color: var(--text-3);
}
#page-landing .gemv-vendue {
    position: static;
    justify-self: start;
    padding: 4px 12px;
    border-radius: var(--radius-xs);
    background: var(--warning);
    font-family: var(--font);
    font-size: .75rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    color: #1a1300;
}
/* Grande case : photo pleine largeur, titre à gauche, pastille à droite. */
#page-landing .gemv-une .gemv-tete { grid-template-columns: minmax(0, 1fr) auto; }
#page-landing .gemv-une .gemv-photo {
    grid-column: 1 / -1;
    grid-row: auto;
    aspect-ratio: 16 / 9;
    margin-bottom: 8px;
    border-radius: var(--radius);
}
#page-landing .gemv-une .gemv-titre h3 { font-size: 1.25rem; }

/* Prix affiché, rendu, cote. */
#page-landing .gemv-lignes { display: flex; flex-direction: column; border-top: 1px solid var(--border); }
#page-landing .gemv-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 4px 16px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
    font-size: .875rem;
    line-height: 1.4;
    color: var(--text-2);
}
#page-landing .gemv-lignes > .gemv-row:last-child { border-bottom: 0; }
#page-landing .gemv-row > .num { white-space: nowrap; color: var(--text-1); }
#page-landing .gemv-row small { display: block; font-size: .75rem; font-weight: 400; color: var(--text-3); }
#page-landing .gemv-total { font-weight: 500; color: var(--text-1); border-top: 0; }
/* Barres de comparaison de la grande case : libellé et valeur écrits au-dessus. */
#page-landing .gemv-barre {
    position: relative;
    flex: 0 0 100%;
    height: 10px;
    margin: 4px 0 4px;
    overflow: hidden;
    border-radius: var(--radius-xs);
    background: rgba(255, 255, 255, .05);
}
#page-landing .gemv-barre::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--text-4);
    transform-origin: left center;
    transform: scaleX(var(--p, 1));
}
#page-landing .gemv-barre.is-rendu::after { background: var(--accent-strong); }
#page-landing .gemv-barre.is-cote::after { background: var(--gris-clair); }
@keyframes lp-barre { from { transform: scaleX(0); } }

/* Le montant héros : bleu clair, chasse tabulaire, jamais souligné. */
#page-landing .gemv-potentiel {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: auto 0 0;
    padding: 0;
    background: none;
    border: 0;
}
#page-landing .gemv-potentiel strong {
    font-family: var(--font);
    font-size: clamp(2rem, 2.8vw, 2.625rem);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--accent-strong);
}
#page-landing .gemv-une .gemv-potentiel strong { font-size: clamp(3rem, 5.6vw, 5.25rem); line-height: .95; }
#page-landing .gemv-potentiel span { font-size: .875rem; font-weight: 400; color: var(--text-2); }

/* « Le calcul ligne par ligne » : lien discret à chevron, lignes dessous. */
#page-landing .gemv-detail { margin: -8px 0 0; padding: 0; border: 0; border-radius: 0; background: none; overflow: visible; }
#page-landing .gemv-detail > summary {
    justify-content: flex-start;
    gap: 8px;
    min-height: 44px;
    padding: 0;
    font-size: .875rem;
    font-weight: 500;
    color: var(--accent-strong);
    background: none;
}
#page-landing .gemv-detail > summary::after {
    content: "";
    width: 7px;
    height: 7px;
    margin-top: -4px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform 240ms var(--ressort);
}
#page-landing .gemv-detail[open] > summary { border-bottom: 0; }
#page-landing .gemv-detail[open] > summary::after { margin-top: 4px; transform: rotate(-135deg); }
@media (hover: hover) {
    #page-landing .gemv-detail > summary:hover { background: none; color: var(--text-1); }
}
#page-landing .gemv-row-sub { padding: 4px 0; border-bottom: 0; font-size: .8125rem; color: var(--text-2); }
#page-landing .gemv-liens { margin: 0; padding: 0; font-size: .8125rem; line-height: 1.6; color: var(--text-3); }
#page-landing .gemv-liens a { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 3px; }

#page-landing .gemv-band > .note-estimation { max-width: 46rem; margin: 32px 0 0; text-align: left; }
#page-landing .examples-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
    margin-top: 32px;
}
#page-landing .examples-cta .hero-note { margin: 0; }

/* --- Sans pépite publiée : trois exemples illustratifs (repli) --- */
#page-landing .examples-band { margin: 0; padding: var(--lp-section) 0 0; background: none; }
#page-landing .examples-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-top: 48px;
}
#page-landing .example-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    padding: 24px;
    border: 0;
    border-radius: var(--radius);
    background: var(--lp-carte);
    box-shadow: var(--lp-coque);
}
#page-landing .example-model strong { display: block; font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.01em; }
#page-landing .example-model small { font-family: var(--font-mono); font-size: .75rem; color: var(--text-3); }
#page-landing .example-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .9375rem; color: var(--text-1); }
#page-landing .example-flow small { display: block; font-size: .75rem; color: var(--text-3); }
#page-landing .example-arrow { color: var(--text-3); }
#page-landing .example-vs { padding-top: 12px; border-top: 1px solid var(--border); font-family: var(--font); font-size: .8125rem; color: var(--text-3); }
#page-landing .example-gain {
    margin-top: auto;
    font-family: var(--font);
    font-size: clamp(2rem, 2.8vw, 2.5rem);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--accent-strong);
}

/* --- Vitrine automatique en fourchettes (gems-band, remplie par app.js) --- */
#page-landing .gems-band { margin: 0; padding: var(--lp-section) 0 0; background: none; border: 0; text-align: left; }
#page-landing .gems-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin-top: 40px;
}
#page-landing .gem-card {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: var(--radius);
    background: var(--lp-carte);
    box-shadow: var(--lp-coque);
    cursor: pointer;
    text-align: left;
    transition: transform 240ms var(--ressort), box-shadow 300ms var(--ressort);
}
@media (hover: hover) {
    #page-landing .gem-card:hover { box-shadow: var(--lp-coque-survol); }
}
#page-landing .gem-card img { width: 100%; height: 140px; object-fit: cover; background: var(--bg-3); }
#page-landing .gem-noimg { display: flex; align-items: center; justify-content: center; height: 140px; background: var(--bg-3); }
#page-landing .gem-body { padding: 16px 16px 16px; }
#page-landing .gem-title { margin-bottom: 8px; overflow: hidden; font-size: .9375rem; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
#page-landing .gem-potential { font-size: 1.0625rem; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--accent-strong); }
.gem-blur { filter: blur(5px); user-select: none; }

/* ===== 4. Vous avez déjà une annonce en vue ? ===== */

#page-landing .ingest-section {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
    margin: 0;
    padding: var(--lp-section) 0 0;
    background: none;
    border: 0;
    border-radius: 0;
}
#page-landing .ingest-intro h2 { margin-bottom: 20px; }
#page-landing .ingest-intro p { margin: 0; font-size: 1.0625rem; line-height: 1.65; color: var(--text-2); }
#page-landing .ingest-box {
    margin: 8px;
    padding: 28px;
    border: 0;
    border-radius: var(--radius-lg);
    background: var(--lp-carte);
    box-shadow: var(--lp-coque);
}
#page-landing .ingest-box > label {
    display: block;
    margin-bottom: 12px;
    font-family: var(--font);
    font-size: .8125rem;
    font-weight: 500;
    color: var(--text-3);
}
#page-landing .ingest-row { gap: 12px; }
#page-landing .ingest-row textarea {
    min-height: 7.5rem;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-inset);
    font-size: .9375rem;
    line-height: 1.5;
    resize: vertical;
}
#page-landing .ingest-hint { margin: 12px 0 0; font-size: .8125rem; color: var(--text-3); }

/* Boîte de collage, variante compacte de la page Recherche (search.js) : règles de base
   partagées, la landing les surcharge au-dessus. */
.ingest-box {
    margin: 0;
    padding: 20px;
    background: var(--bg-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    text-align: left;
}
.ingest-box > label { display: block; font-weight: 600; margin-bottom: 10px; font-size: .9375rem; }
.ingest-row { display: flex; flex-direction: column; gap: 10px; }
.ingest-row textarea {
    flex: 1;
    resize: vertical;
    min-height: 48px;
    padding: 12px 12px;
    background: var(--bg-inset);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-1);
    font-family: inherit;
    font-size: 0.9375rem;
    line-height: 1.4;
}
.ingest-row .btn-primary { width: 100%; }
.ingest-hint { color: var(--text-3); font-size: .8125rem; margin-top: 8px; }
.ingest-inline { margin: 14px 0 20px; padding: 14px 16px; }
.ingest-inline > label { font-size: .875rem; margin-bottom: 8px; }
.ingest-inline .ingest-row { flex-direction: row; align-items: stretch; }
.ingest-inline .ingest-row textarea { min-height: 44px; }
.ingest-inline .ingest-row .btn-primary { width: auto; flex: 0 0 auto; padding-left: 24px; padding-right: 24px; }
.ingest-inline .ingest-hint { margin-top: 6px; }
@media (max-width: 560px) {
    .ingest-inline .ingest-row { flex-direction: column; }
    .ingest-inline .ingest-row .btn-primary { width: 100%; }
}

/* ===== 5. Ce que Captain Auto vous évite : bento de trois cases ===== */

#page-landing .avoid-band { margin: 0; padding: var(--lp-section) 0 0; background: none; border: 0; }
#page-landing .avoid-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 20px;
    margin-top: 48px;
}
/* Voile rouge de tête, très discret : chaque titre DIT le risque, la couleur ne le porte
   jamais seule. Aucune bordure colorée. */
#page-landing .avoid-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    grid-column: span 5;
    min-width: 0;
    padding: 28px;
    border: 0;
    border-radius: var(--radius);
    background: var(--lp-carte);
    box-shadow: var(--lp-coque);
}
#page-landing .avoid-card:first-child { grid-column: span 7; grid-row: span 2; justify-content: flex-end; padding: 36px; border-radius: var(--radius-lg); }
#page-landing .avoid-card h3 { margin: 0; font-size: 1.25rem; font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; color: var(--text-1); }
#page-landing .avoid-card:first-child h3 { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 500; line-height: 1.08; letter-spacing: -0.02em; }
#page-landing .avoid-card p { margin: 0; font-size: .9375rem; line-height: 1.65; color: var(--text-2); }
#page-landing .avoid-card:first-child p { max-width: 34rem; font-size: 1.0625rem; }
#page-landing .avoid-card strong { color: var(--text-1); }

/* ===== 6. Qui est derrière (landing complète, tarifs courte) ===== */

.qui-derriere {
    max-width: 52rem;
    margin: var(--lp-section, 4rem) 7px 0;
    padding: clamp(1.75rem, 4vw, 2.75rem);
    border-radius: var(--radius);
    background: var(--lp-carte, var(--bg-1));
    box-shadow: var(--lp-coque, none);
}
.qui-derriere h2 { margin: 0 0 16px; font-size: 1.5rem; font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; color: var(--text-1); }
.qui-derriere p { margin: 0 0 12px; font-size: 1rem; line-height: 1.65; color: var(--text-2); }
.qui-derriere p:last-child { margin-bottom: 0; }
#page-pricing .qui-derriere-court { max-width: none; margin-top: 48px; }
#page-pricing .qui-derriere-court h2 { font-size: 1.25rem; }
#page-pricing .qui-derriere-court p { font-size: .9375rem; }

/* ===== 7. Questions fréquentes : accordéons de verre (landing et tarifs) ===== */

.pricing-faq { max-width: none; margin-top: 48px; }
.pricing-faq h2 { margin: 0 0 24px; font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 500; line-height: 1.05; letter-spacing: -0.02em; }
.pricing-faq details {
    margin: 0 0 12px;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: var(--radius);
    background: var(--verre);
    box-shadow: inset 0 0 0 1px var(--border);
    transition: background-color var(--t), box-shadow var(--t);
}
.pricing-faq details[open] { background: rgba(255, 255, 255, .065); box-shadow: inset 0 0 0 1px var(--border-strong); }
.pricing-faq summary {
    justify-content: space-between;
    gap: 16px;
    min-height: 60px;
    padding: 16px 16px 16px 20px;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--text-1);
    cursor: pointer;
}
.pricing-faq summary::after {
    content: "";
    flex: none;
    width: 20px;
    height: 20px;
    background:
        center / 14px 14px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%237cc0f0' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
    transition: transform 240ms var(--ressort);
}
.pricing-faq details[open] summary { border-bottom: 0; }
.pricing-faq details[open] summary::after { transform: rotate(45deg); }
@media (hover: hover) {
    .pricing-faq summary:hover { background: rgba(255, 255, 255, .03); }
}
.pricing-faq details p { margin: 0; padding: 0 20px 20px; font-size: .9375rem; line-height: 1.65; color: var(--text-2); }

/* Landing : titre à gauche, accordéons à droite (grille asymétrique, mode Persuade). */
#page-landing .landing-faq {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 1.5rem clamp(2rem, 5vw, 4.5rem);
    align-items: start;
    max-width: none;
    margin: 0;
    padding: var(--lp-section) 0 0;
}
#page-landing .landing-faq > h2 { margin: 0; }
#page-landing .landing-faq > .faq-liste { min-width: 0; }

/* ===== 8. Cotes les plus documentées ===== */

#page-landing .cotes-band { margin: 0; padding: var(--lp-section) 0 0; }
#page-landing .cotes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: 12px;
    margin-top: 40px;
}
#page-landing .cote-chip {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    min-height: 44px;
    padding: 16px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--verre);
    color: var(--text-1);
    text-decoration: none;
    transition: background-color var(--t), border-color var(--t), transform 240ms var(--ressort);
}
#page-landing .cote-chip strong { display: block; font-size: .9375rem; font-weight: 500;  }
#page-landing .cote-chip small { font-family: var(--font-mono); font-size: .75rem; color: var(--text-3); }
@media (hover: hover) {
    #page-landing .cote-chip:hover { background: rgba(255, 255, 255, .07); border-color: var(--border-strong); }
}
#page-landing .cotes-all { margin: 28px 0 0; font-size: .9375rem; text-align: left; }

/* ===== 9. Appel final : conteneur majeur centré ===== */

#page-landing .landing-cta-final {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    max-width: none;
    margin: var(--lp-section) 7px clamp(2.5rem, 6vw, 5rem);
    padding: clamp(2.75rem, 7vw, 5.5rem) clamp(1.5rem, 5vw, 4rem);
    border: 0;
    border-radius: var(--radius-lg);
    background: var(--lp-carte);
    box-shadow: var(--lp-coque);
    clip-path: none;
    text-align: center;
}
#page-landing .landing-cta-final h2 {
    max-width: 16ch;
    margin: 0 auto 20px;
    font-size: clamp(2.25rem, 4.6vw, 4rem);
    font-weight: 500;
    line-height: 1.02;
    letter-spacing: -0.03em;
    text-wrap: balance;
}
#page-landing .landing-cta-final > p { max-width: 36rem; margin: 0 auto; font-size: 1.0625rem; line-height: 1.6; color: var(--text-2); }
#page-landing .landing-cta-final .btn-hero { margin-top: 36px; }
#page-landing .landing-cta-final .hero-note { max-width: 36rem; margin: 24px auto 0; font-size: .9375rem; color: var(--text-3); }

/* ===== 10. Page Tarifs ===== */

#page-pricing { max-width: 62rem; margin-inline: auto; padding-top: clamp(1rem, 4vw, 2.5rem); }
#page-pricing > * { max-width: none; }
#page-pricing > h1 {
    margin: 0 0 16px;
    font-size: clamp(2.25rem, 4.2vw, 3.75rem);
    font-weight: 500;
    line-height: 1.02;
    letter-spacing: -0.03em;
}
#page-pricing .pricing-sub { max-width: 40rem; margin: 0 0 48px; font-size: 1.0625rem; line-height: 1.6; color: var(--text-2); }
#page-pricing .pricing-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
    max-width: none;
}
#page-pricing .pricing-grid-tete { margin: 0; padding: 8px; }

/* Carte d'offre (tarifs, porte de paiement, modale, offre du dossier). */
.pricing-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    padding: 32px;
    border: 0;
    border-radius: var(--radius);
    background: var(--bg-1);
    box-shadow: var(--coeur-lueur), var(--coque);
    clip-path: none;
}
/* La carte d'offre du dossier posée dans une section de fiche : le cadre est déjà là. */
.listing-section .js-dossier-offre { box-shadow: none; }
/* Mise en avant : conteneur majeur, anneau plus marqué, voile bleu de tête, lueur dessous.
   Aucune bordure colorée, aucun ruban. */
.pricing-card.featured {
    border: 0;
    border-radius: var(--radius-lg);
    background:
        var(--bg-1);
    box-shadow: var(--coeur-lueur), 0 0 0 var(--anneau) rgba(255, 255, 255, .07), 0 0 0 var(--anneau-filet) rgba(255, 255, 255, .24),
                0 2rem 4rem -2rem rgba(0, 87, 217, .55);
    clip-path: none;
}
.pricing-card h2,
.pricing-card h3 { margin: 0; font-size: 1.25rem; font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; color: var(--text-1); }
.pricing-price {
    margin: 4px 0 0;
    font-family: var(--font);
    font-size: clamp(2.75rem, 4.2vw, 3.5rem);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    color: var(--text-1);
}
.pricing-price small { margin-left: 4px; font-size: 1rem; font-weight: 400; letter-spacing: 0; color: var(--text-3); }
.pricing-tagline { margin: 0; font-size: .9375rem; line-height: 1.5; color: var(--text-2); }
.pricing-card ul { flex: 1; margin: 4px 0 8px; padding: 0; list-style: none; border-top: 1px solid var(--border); }
.pricing-card li {
    position: relative;
    padding: 12px 0 12px 28px;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
    font-size: .9375rem;
    line-height: 1.45;
    color: var(--text-2);
}
.pricing-card li:last-child { border-bottom: 0; }
/* Coche fine en bleu clair (SVG en masque) : aucun caractère, aucun vert. */
.pricing-card li::before {
    content: "";
    position: absolute;
    top: .85rem;
    left: 0;
    width: 16px;
    height: 16px;
    background: var(--accent-strong);
    -webkit-mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
    mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
.pricing-btn,
.pricing-card .pricing-btn-gratuit { width: 100%; margin-top: auto; }
/* Un seul des deux boutons du compte gratuit est affiché (html.est-connecte, billing.js). */
html.est-connecte .pricing-btn-gratuit.si-anonyme,
html:not(.est-connecte) .pricing-btn-gratuit.si-connecte { display: none; }

.pricing-repere { margin: -8px 0 0; font-size: .875rem; line-height: 1.45; color: var(--text-2); }
.veille-card .pricing-repere { margin: -4px 0 8px; }

/* « ou 290 € par an » : mention discrète, mais souscriptible. */
.pricing-annuel { margin: -4px 0 0; font-size: .875rem; color: var(--text-3); }
.pricing-annuel-btn {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-variant-numeric: tabular-nums;
    color: var(--text-2);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
@media (hover: hover) { .pricing-annuel-btn:hover { color: var(--accent-strong); } }

/* Offre de lancement (Billing.loadPromo) : encadré de verre bleuté, sans compte à rebours. */
.pricing-lancement {
    margin: 0;
    padding: 12px 16px;
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--accent-dim);
    box-shadow: inset 0 0 0 1px var(--accent-border);
    font-size: .875rem;
    line-height: 1.45;
    color: var(--text-1);
}
.pricing-lancement strong { color: var(--text-1); }
.pricing-lancement small { display: block; margin-top: 4px; font-size: .8125rem; color: var(--text-2); }

/* La seule promesse de risque de la page, puis le dossier à l'unité et les quotas. */
#page-pricing .pricing-garantie { margin: 36px 0 0; font-size: .9375rem; line-height: 1.6; text-align: left; color: var(--text-1); }
#page-pricing .pricing-dossier {
    margin: 20px 0 0;
    padding: 20px 24px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--verre);
    font-size: .9375rem;
    line-height: 1.6;
    color: var(--text-2);
}
#page-pricing .pricing-dossier strong { font-size: 1.0625rem; font-weight: 500; white-space: nowrap; color: var(--text-1); }
#page-pricing .pricing-dossier a { white-space: nowrap; }
#page-pricing .pricing-quotas-note { max-width: none; margin: 20px 0 0; font-size: .875rem; line-height: 1.65; color: var(--text-3); }
#page-pricing .pricing-quotas-note strong { color: var(--text-2); }

/* Veille : carte compacte, hors grille (plan de transition). */
#page-pricing .veille-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
    align-items: center;
    margin: 40px 8px 0;
    padding: 28px 32px;
    border: 0;
    border-radius: var(--radius);
    background: var(--bg-1);
    box-shadow: var(--coeur-lueur), var(--coque);
}
#page-pricing .veille-card h2 { margin: 0 0 8px; font-size: 1.25rem; font-weight: 500; letter-spacing: -0.01em; }
#page-pricing .veille-card p { max-width: 60ch; margin: 0; font-size: .9375rem; line-height: 1.6; color: var(--text-2); }
#page-pricing .veille-card .pass-right { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
#page-pricing .veille-card .pricing-price { font-size: 2.5rem; }
#page-pricing .veille-card .pricing-btn { width: auto; min-width: 13rem; justify-content: space-between; padding-left: 24px; }

/* Pro et Max, repliés : carte à double cadre, cartes intérieures en plaques de verre
   (un anneau dans un details à overflow caché serait rogné). */
#page-pricing .pricing-pros {
    margin: 40px 8px 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: var(--radius);
    background: var(--bg-1);
    box-shadow: var(--coeur-lueur), var(--coque);
}
#page-pricing .pricing-pros > summary {
    justify-content: space-between;
    gap: 16px;
    min-height: 64px;
    padding: 16px 20px 16px 28px;
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-1);
}
#page-pricing .pricing-pros > summary::after {
    content: "";
    flex: none;
    width: 20px;
    height: 20px;
    background:
        center / 14px 14px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%237cc0f0' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
    transition: transform 240ms var(--ressort);
}
#page-pricing .pricing-pros[open] > summary { border-bottom: 1px solid var(--border); }
#page-pricing .pricing-pros[open] > summary::after { transform: rotate(45deg); }
@media (hover: hover) { #page-pricing .pricing-pros > summary:hover { background: rgba(255, 255, 255, .03); } }
#page-pricing .pricing-pros .pricing-toggle { margin: 24px 28px 0; }
#page-pricing .pricing-pros .pricing-grid-pros { gap: 20px; padding: 24px 28px 28px; }
#page-pricing .pricing-pros .pricing-card {
    padding: 28px;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, .03);
    box-shadow: inset 0 0 0 1px var(--border);
}

/* Bascule mensuel / annuel : conteneur de verre, segment actif en pilule claire (l'indicateur
   qui glisse est posé par js/effets.js). */
.pricing-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: auto;
    margin-bottom: 0;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--verre);
}
.pricing-toggle .pricing-period {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 16px;
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    font-family: var(--font);
    font-size: .9375rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-2);
    cursor: pointer;
    transition: color var(--t), background-color var(--t);
}
@media (hover: hover) { .pricing-toggle .pricing-period:hover { color: var(--text-1); } }
.pricing-toggle .pricing-period.active { background: var(--text-1); color: var(--bg-0); }
.pricing-toggle.fx-indic-hote .pricing-period.active { background: transparent; }
.pricing-period-badge {
    padding: 4px 8px;
    border-radius: var(--radius-xs);
    background: var(--accent-dim);
    font-family: var(--font);
    font-size: .8125rem;
    font-weight: 500;
    color: var(--accent-strong);
}
.pricing-period.active .pricing-period-badge { background: var(--accent); color: #fff; }

#page-pricing .pricing-faq { margin-top: var(--lp-section); }

/* ===== 11. Portes de paiement (Billing.upgradeBlockHtml) et modale (#upgrade-modal) ===== */

.upgrade-block {
    grid-column: 1 / -1;   /* posée dans une grille de cartes (favoris) : toute la ligne */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin: 8px;
    padding: clamp(1.75rem, 4vw, 2.5rem) clamp(1.25rem, 4vw, 2rem);
    border: 0;
    border-radius: var(--radius-lg);
    background:
        var(--bg-1);
    box-shadow: var(--coeur-lueur), var(--coque);
    text-align: center;
}
.upgrade-block .upgrade-lock {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin: 0;
    border-radius: 50%;
    background: var(--verre);
    box-shadow: inset 0 0 0 1px var(--border);
    font-size: inherit;
    color: var(--accent-strong);
}
.upgrade-block p { max-width: 34rem; margin: 0; font-size: .9375rem; line-height: 1.6; color: var(--text-2); }
.upgrade-block p strong { color: var(--text-1); }
.upgrade-block .upgrade-actions { margin-top: 8px; gap: 12px; }
.upgrade-block .section-note { padding: 0; }

/* Modale : son appel principal porte la pastille fléchée (classe btn-fleche posée par
   Billing.portesSuivi() et App.showUpgradeModal(), dessin dans base.css). */
#upgrade-modal .pricing-card { margin: 8px 8px 16px; padding: 24px; }

/* ===== 12. Badge de plan (îlot) et pied de page ===== */

.plan-badge {
    padding: 4px 8px;
    border-radius: var(--radius-xs);
    font-size: .8125rem;
    font-weight: 500;
}
.plan-badge.plan-pro { background: var(--accent-dim); color: var(--accent-strong); border: 1px solid var(--accent-border); }
.plan-badge.plan-indiv { background: var(--success-dim); color: var(--success); border: 1px solid var(--success-border); }
.plan-badge.plan-max { background: var(--accent); color: #fff; border: 1px solid var(--accent); }

.footer-links { margin-top: 6px; }
.footer-links a { color: var(--text-3); text-decoration: none; }
.footer-links a:hover { color: var(--accent-strong); }
.footer-note {
    max-width: 68ch;
    margin: 8px auto 0;
    font-size: .75rem;
    line-height: 1.5;
    color: var(--text-3);
}

/* ===== 13. Tablette et téléphone ===== */

@media (max-width: 1023px) {
    #page-landing .trust-band:has(> :nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #page-landing .trust-band:has(> :nth-child(4)) > .trust-item:nth-child(odd) { padding-left: 0; border-left: 0; }
    #page-landing .trust-band:has(> :nth-child(4)) > .trust-item:nth-child(n+3) { margin-top: 28px; border-top: 1px solid var(--border); }
    /* Bento sur deux colonnes : la grande case en pleine largeur, puis des paires ; une
       case restée seule en fin de grille prend toute la largeur. */
    #page-landing .gemv-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #page-landing .gemv-cards > .gemv-card,
    #page-landing .gemv-cards.vitrine-n4 > .gemv-card:nth-child(4),
    #page-landing .gemv-cards.vitrine-n5 > .gemv-card:nth-child(5),
    #page-landing .gemv-cards.vitrine-n6 > .gemv-card:nth-child(n+4) { grid-column: auto; grid-row: auto; }
    #page-landing .gemv-cards.vitrine-n4 > .gemv-card:nth-child(4) { display: flex; }
    #page-landing .gemv-cards > .gemv-une,
    #page-landing .gemv-cards.vitrine-n1 > .gemv-une,
    #page-landing .gemv-cards > .gemv-card:last-child:nth-child(even) { grid-column: 1 / -1; grid-row: auto; }
    #page-landing .examples-grid { grid-template-columns: minmax(0, 1fr); }
    #page-landing .gems-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    #page-landing .ingest-section { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    #page-landing .avoid-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #page-landing .avoid-card { grid-column: auto; }
    #page-landing .avoid-card:first-child { grid-column: 1 / -1; grid-row: auto; }
    #page-landing .landing-faq { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
    #page-landing,
    #page-pricing { --lp-section: 4rem; }
    #page-landing .hero { gap: 40px; min-height: 0; padding: 16px 0 48px; }
    #page-landing .hero h1 { margin: 0 0 16px; font-size: clamp(2.25rem, 10vw, 3rem); }
    #page-landing .hero-sub { font-size: 1rem; }
    /* Premier écran d'un iPhone : accroche courte, les deux boutons au-dessus du dock. */
    #page-landing .hero-cta { margin-top: 24px; }
    #page-landing .hero-cta > * { width: 100%; }
    #page-landing :is(.hero-cta, .examples-cta, .cas-cta) > .btn-primary { width: 100%; white-space: normal; }
    /* Appels fléchés en pleine largeur, libellé sur deux lignes au besoin (aucun débordement). */
    #page-landing .hero-aside { max-width: none; }
    #page-landing .explorer { padding: 20px; }
    #page-landing .explorer-field select { height: 48px; }

    #page-landing .trust-band,
    #page-landing .trust-band:has(> :nth-child(4)) { grid-template-columns: minmax(0, 1fr); }
    #page-landing .trust-item,
    #page-landing .trust-band:has(> :nth-child(4)) > .trust-item:nth-child(n) {
        margin: 0;
        padding: 20px 0;
        border-left: 0;
        border-top: 0;
        border-bottom: 1px solid var(--border);
    }

    #page-landing .gemv-card { padding: 20px; }
    #page-landing .gemv-une { padding: 24px; }
    #page-landing .gemv-liens a { display: inline-block; padding-block: 12px; margin-block: -12px; }

    #page-landing .avoid-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    #page-landing .avoid-card,
    #page-landing .avoid-card:first-child { padding: 24px; }
    #page-landing .ingest-box { padding: 20px; }
    #page-landing .gems-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    #page-pricing .pricing-grid,
    #page-pricing .pricing-grid-pros { grid-template-columns: minmax(0, 1fr); }
    .pricing-card { padding: 24px; }
    #page-pricing .veille-card { grid-template-columns: minmax(0, 1fr); padding: 24px; }
    #page-pricing .veille-card .pass-right { align-items: stretch; }
    #page-pricing .veille-card .pricing-btn { width: 100%; }
    #page-pricing .pricing-pros > summary { padding-left: 20px; }
    #page-pricing .pricing-pros .pricing-toggle { margin: 20px 20px 0; }
    #page-pricing .pricing-pros .pricing-grid-pros { padding: 20px; }
}

/* Téléphone : la vitrine devient une bande horizontale aimantée (six cartes empilées
   ajoutaient des milliers de pixels). La suivante dépasse pour signaler la suite ; seule la
   bande défile en largeur. Marge intérieure de 8 px : l'anneau des cartes n'est pas rogné. */
@media (max-width: 640px) {
    #page-landing .gemv-cards,
    #page-landing .gemv-cards[class*="vitrine-n"] {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 86%;
        gap: 16px;
        margin: 32px -8px 0;
        padding: 8px 8px 16px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 8px;
    }
    #page-landing .gemv-cards > .gemv-card,
    #page-landing .gemv-cards[class*="vitrine-n"] > .gemv-card:nth-child(n) { grid-column: auto; grid-row: auto; scroll-snap-align: start; }
}

/* Marque et modèle l'un sous l'autre quand la carte est étroite (hero en deux colonnes
   sur un petit ordinateur, ou téléphone) : « Choisir une marque... » ne se coupe pas. */
@media (min-width: 1024px) and (max-width: 1279px), (max-width: 520px) {
    #page-landing .explorer-row { grid-template-columns: minmax(0, 1fr); }
}

/* ===== 14. Mouvement réduit : tout à l'état final ===== */
@media (prefers-reduced-motion: reduce) {
        #page-landing .cote-chip,
    #page-landing .gem-card,
    #page-landing .gemv-detail > summary::after,
    .pricing-faq details,
    .pricing-faq summary::after,
    #page-pricing .pricing-pros > summary::after { transition: none; }
    #page-landing .cote-chip:hover,
    #page-landing .gem-card:hover { transform: none; }
}

/* Explorateur en bandeau sur grand écran : une ligne de réglages au pied de la photo. */
@media (min-width: 1200px) {
    #page-landing .explorer {
        display: grid;
        grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1.7fr) minmax(0, 1.2fr) auto;
        align-items: end;
        gap: 12px 20px;
        padding: 16px 24px 20px;
        background: var(--bg-1);
        border-radius: 16px 16px 0 0;
    }
    #page-landing .explorer-tag { grid-column: 1 / 4; font-size: 1rem; }
    #page-landing .explorer-note { grid-column: 4 / -1; grid-row: 1; margin: 0; text-align: right; }
    #page-landing .explorer-row { display: contents; }
    #page-landing .explorer-field > span:first-child { white-space: nowrap; font-size: .8125rem; }
    #page-landing .explorer-field select { height: 44px; padding-left: 12px; font-size: .875rem; }
    #page-landing .explorer-count { flex-direction: row; align-items: center; gap: 8px; min-height: 44px; margin: 0; padding: 0; background: none; border: 0; }
    #page-landing .explorer-count-num { font-size: 1.5rem; line-height: 1; }
    #page-landing .explorer-count-label { font-size: .8125rem; line-height: 1.25; }
    #page-landing .explorer-cta { min-height: 44px; padding-block: 10px; }
}
/* Téléphone et tablette : la photo reste discrète derrière le titre. */
@media (max-width: 1023px) {
    #page-landing .hero-scene {
        height: 320px;
        bottom: auto;
        opacity: .5;
        object-position: 100% 60%;
        -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent);
        mask-image: linear-gradient(180deg, #000 40%, transparent);
    }
}