/* ==========================================================================
   Page produit "GLOBTEL 20 GO" (single-product-20-go.php)
   Chargé UNIQUEMENT sur cette page produit (voir universim_enqueue_20_go_assets
   dans functions.php). Identité propre au 20 GO (mouvement/quotidien) —
   volontairement distincte de single-le-petit.css. Réutilise le système
   .faq-item déjà partagé (voir style.css) tel quel.
   ========================================================================== */

.g20-page {
    background: #000;
    color: #fff;
    font-family: 'Poppins', system-ui, sans-serif;
    font-weight: 300;
    overflow-x: hidden;
    position: relative;
}

.g20-noise {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 5;
    opacity: 0.05;
    mix-blend-mode: screen;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="2"/></filter><rect width="160" height="160" filter="url(%23n)"/></svg>');
}

/* Pas de règle globale ".g20-page a { color: gold }" : chaque lien porte
   sa propre couleur explicite (leçon retenue de single-le-petit.css —
   une règle globale sur "a" perd face à des sélecteurs à une seule classe
   comme .g20-btn--primary en spécificité CSS). */
.g20-page a {
    text-decoration: none;
}

.g20-page [data-reveal] {
    opacity: 0;
    will-change: opacity, transform;
}

/* `!important` sur transform : single-20-go.js pose le décalage d'entrée
   (±22px, 14px) en style inline sur chaque [data-reveal] puis ne le
   réinitialise jamais (contrairement à single-50-go.js/100-go.js/200-go.js,
   qui font bien "el.style.transform = 'none'" dans leur show()) — un style
   inline sans !important bat toujours une règle externe sans !important,
   donc cette règle restait sans effet et l'élément restait décalé en
   permanence après son apparition. Déjà contourné au cas par cas sur
   .g20-perk et .g20-other__row (voir leurs commentaires) ; posé ici une
   seule fois, sur la règle générale, pour couvrir tous les éléments
   [data-reveal] de la page (dont .g20-hero__band, resté décalé de 22px —
   d'où un léger débordement horizontal constaté sur mobile). */
.g20-page [data-reveal].is-visible {
    opacity: 1;
    transform: none !important;
}

/* --------------------------------------------------------------------
   Boutons communs
   -------------------------------------------------------------------- */
.g20-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.g20-btn--primary {
    padding: 16px 32px;
    background: var(--universim-gold);
    color: #000;
    font-weight: 600;
    box-shadow: 0 14px 40px -16px rgba(245, 179, 1, 0.6);
}

.g20-btn--primary:hover {
    background: var(--universim-gold-hover);
    color: #000;
    transform: translateY(-2px);
}

.g20-btn--ghost {
    padding: 16px 26px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.85);
}

.g20-btn--ghost:hover {
    border-color: rgba(245, 179, 1, 0.6);
    color: var(--universim-gold);
}

/* --------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------- */
.g20-hero {
    position: relative;
    padding: clamp(40px, 7vh, 90px) 0 0;
    overflow: hidden;
}

.g20-hero__top {
    position: relative;
    z-index: 2;
    max-width: 1680px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 64px);
}

.g20-hero__eyebrow {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: clamp(16px, 3vh, 30px);
}

.g20-hero__eyebrow-line {
    width: 26px;
    height: 1px;
    background: var(--universim-gold);
}

.g20-hero__eyebrow span:last-child {
    font-family: 'Outfit', sans-serif;
    font-size: 11.5px;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}

.g20-hero__title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: clamp(16px, 3vw, 52px);
}

.g20-hero__title {
    margin: 0;
    font-family: 'Outfit', sans-serif;
    font-weight: 200;
    line-height: 0.8;
    letter-spacing: -0.05em;
    display: flex;
    align-items: flex-end;
    gap: clamp(10px, 1.6vw, 26px);
}

.g20-hero__title-number {
    font-size: clamp(78px, 10.5vw, 176px);
    font-weight: 300;
    color: #fff;
}

.g20-hero__title-meta {
    display: flex;
    flex-direction: column;
    gap: clamp(6px, 1vh, 12px);
    padding-bottom: clamp(8px, 1.2vw, 18px);
}

.g20-hero__title-go {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(26px, 2.8vw, 48px);
    font-weight: 400;
    letter-spacing: -0.02em;
    color: var(--universim-gold);
    line-height: 0.9;
}

.g20-hero__title-brand {
    font-size: clamp(11px, 1vw, 13px);
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    font-family: 'Outfit', sans-serif;
}

.g20-hero__subtitle {
    margin: 0 0 clamp(14px, 2.5vh, 30px);
    font-size: clamp(16px, 1.35vw, 20px);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.68);
    max-width: 26ch;
}

/* Bande photo + panneau trajectoire */
.g20-hero__band {
    position: relative;
    z-index: 2;
    margin-top: clamp(24px, 4vh, 56px);
    display: flex;
    flex-wrap: wrap;
}

.g20-hero__photo {
    position: relative;
    flex: 1.7 1 340px;
    min-height: clamp(260px, 44vh, 440px);
    background: #0a0a0a;
    overflow: hidden;
}

/* Spécificité renforcée (élément + 2 classes) : WooCommerce charge sa
   propre règle ".woocommerce img { height:auto; max-width:100% }" sur
   les pages produit, qui l'emporterait sinon sur un simple sélecteur à
   une classe et empêcherait le remplissage complet du cadre. */
.g20-hero__photo img.g20-hero__photo-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 62% 35%;
}

.g20-hero__photo-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, #000, transparent 20%, transparent 82%, rgba(0, 0, 0, 0.7));
}

.g20-hero__trail-panel {
    position: relative;
    flex: 1 1 300px;
    min-height: clamp(260px, 44vh, 440px);
    background: #000;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.g20-hero__trail-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.g20-hero__trail-caption {
    position: absolute;
    left: clamp(18px, 2vw, 28px);
    bottom: clamp(18px, 2vw, 26px);
    font-family: 'Outfit', sans-serif;
    font-size: 10.5px;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.35);
}

/* Barre prix/CTA/specs flottante, chevauche légèrement la bande photo */
.g20-hero__bar-wrap {
    position: relative;
    z-index: 3;
    max-width: 1680px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 64px);
}

.g20-hero__bar {
    margin-top: clamp(-40px, -4vh, -24px);
    background: rgba(0, 0, 0, 0.86);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: clamp(22px, 3vw, 34px) clamp(22px, 3vw, 40px);
    display: flex;
    flex-direction: column;
    gap: clamp(24px, 3vh, 36px);
}

.g20-hero__bar-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: clamp(20px, 3vw, 44px);
}

.g20-hero__price {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-family: 'Outfit', sans-serif;
}

.g20-hero__price-number {
    font-size: clamp(46px, 5.4vw, 80px);
    font-weight: 300;
    line-height: 0.85;
    letter-spacing: -0.04em;
}

.g20-hero__price-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 6px;
}

.g20-hero__price-currency {
    font-size: clamp(20px, 2vw, 30px);
    font-weight: 300;
    line-height: 1;
    color: var(--universim-gold);
}

.g20-hero__price-unit {
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
}

.g20-hero__ctas {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.g20-hero__specs {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(14px, 1.8vw, 30px);
}

.g20-hero__spec {
    flex: 1 1 118px;
    min-width: 112px;
    display: flex;
    flex-direction: column;
    gap: 11px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.g20-hero__spec-glyph {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(245, 179, 1, 0.4);
    display: grid;
    place-items: center;
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 1;
    color: var(--universim-gold);
}

.g20-hero__spec-label {
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.42);
}

.g20-hero__spec-value {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(16px, 1.4vw, 21px);
    color: #fff;
}

/* --------------------------------------------------------------------
   LE FORFAIT — trajectoire horizontale de caractéristiques
   -------------------------------------------------------------------- */
.g20-forfait {
    padding: clamp(72px, 11vh, 140px) 0;
    overflow: hidden;
}

.g20-forfait__inner {
    max-width: 1680px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 64px);
}

.g20-forfait__header {
    display: flex;
    flex-direction: column;
    gap: clamp(16px, 2.4vh, 26px);
    margin-bottom: clamp(36px, 6vh, 72px);
}

.g20-forfait__title {
    margin: 0;
    font-family: 'Outfit', sans-serif;
    font-weight: 200;
    font-size: clamp(34px, 4.6vw, 72px);
    line-height: 1;
    letter-spacing: -0.03em;
    max-width: 16ch;
}

.g20-forfait__intro {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.55);
    max-width: 56ch;
}

.g20-forfait__grid {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(24px, 2.4vw, 40px);
}

.g20-feature {
    flex: 1 1 170px;
    min-width: 158px;
    display: flex;
    flex-direction: column;
    gap: clamp(16px, 2vh, 24px);
}

.g20-feature__glyph-row {
    position: relative;
    display: flex;
    align-items: center;
    height: clamp(76px, 8vw, 104px);
}

.g20-feature__line {
    position: absolute;
    top: 50%;
    left: calc(-1 * clamp(24px, 2.4vw, 40px));
    right: calc(-1 * clamp(24px, 2.4vw, 40px));
    height: 1px;
    background: rgba(245, 179, 1, 0.4);
}

.g20-feature__glyph {
    position: relative;
    width: clamp(76px, 8vw, 104px);
    height: clamp(76px, 8vw, 104px);
    border-radius: 50%;
    border: 1px solid rgba(245, 179, 1, 0.4);
    background: #000;
    display: grid;
    place-items: center;
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    font-size: clamp(30px, 3vw, 42px);
    line-height: 1;
    color: var(--universim-gold);
}

.g20-feature__title {
    margin: 0 0 8px;
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    font-size: clamp(20px, 1.8vw, 27px);
    letter-spacing: -0.01em;
}

.g20-feature__text {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.5);
    max-width: 32ch;
}

/* --------------------------------------------------------------------
   UNE JOURNÉE TYPE — 3 micro-scènes
   -------------------------------------------------------------------- */
.g20-journee {
    position: relative;
    padding: clamp(72px, 11vh, 150px) clamp(20px, 4vw, 64px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, #000, #050403 55%, #000);
}

.g20-journee__inner {
    max-width: 1680px;
    margin: 0 auto;
}

.g20-journee__header {
    display: flex;
    flex-direction: column;
    gap: clamp(16px, 2.4vh, 26px);
    margin-bottom: clamp(36px, 5.5vh, 68px);
}

.g20-journee__title {
    margin: 0;
    font-family: 'Outfit', sans-serif;
    font-weight: 200;
    font-size: clamp(34px, 4.6vw, 72px);
    line-height: 1;
    letter-spacing: -0.03em;
}

.g20-journee__intro {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.55);
    max-width: 56ch;
}

.g20-journee__grid {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(24px, 3vw, 48px);
}

.g20-moment {
    flex: 1 1 260px;
    min-width: 260px;
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 2vh, 20px);
    padding-top: clamp(16px, 2vh, 22px);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.g20-moment__scene {
    position: relative;
    height: clamp(150px, 17vh, 190px);
}

.g20-moment__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.g20-moment__time {
    font-family: 'Outfit', sans-serif;
    font-size: 11px;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--universim-gold);
}

.g20-moment__title {
    margin: 0;
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    font-size: clamp(23px, 2.2vw, 34px);
    line-height: 1.05;
    letter-spacing: -0.02em;
}

.g20-moment__text {
    margin: 0;
    font-size: 14px;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.52);
    max-width: 34ch;
}

/* --------------------------------------------------------------------
   AVANTAGES — lignes horizontales (pas de cartes)
   -------------------------------------------------------------------- */
.g20-avantages {
    padding: clamp(72px, 11vh, 150px) clamp(20px, 4vw, 64px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.g20-avantages__inner {
    max-width: 1680px;
    margin: 0 auto;
}

.g20-avantages__title {
    margin: 0 0 clamp(32px, 5vh, 60px);
    font-family: 'Outfit', sans-serif;
    font-weight: 200;
    font-size: clamp(34px, 4.6vw, 72px);
    line-height: 1;
    letter-spacing: -0.03em;
}

.g20-avantages__list {
    display: flex;
    flex-direction: column;
}

/* Grille cohérente : colonne pictogramme+titre de largeur fixe identique sur
   les 5 lignes (même point de départ du picto, du titre et de la
   description), alignée à gauche du container — pas de centrage du bloc.
   Le `!important` sur transform neutralise le décalage d'entrée (±22px)
   posé en style inline par single-20-go.js (script partagé, non modifié
   ici) sur les éléments [data-reveal] et jamais réinitialisé : sans lui,
   la ligne restait en permanence décalée au lieu de revenir à sa position
   d'origine. */
.g20-perk {
    display: grid;
    grid-template-columns: minmax(230px, 440px) minmax(0, 1fr);
    align-items: center;
    gap: clamp(20px, 2.4vw, 36px);
    padding: clamp(26px, 3.6vh, 44px) 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    transform: translateX(0) !important;
}

.g20-perk__head {
    display: flex;
    align-items: center;
    gap: clamp(16px, 1.8vw, 26px);
}

.g20-perk__glyph {
    flex: 0 0 auto;
    width: clamp(66px, 6.4vw, 88px);
    height: clamp(66px, 6.4vw, 88px);
    border-radius: 50%;
    border: 1px solid rgba(245, 179, 1, 0.4);
    display: grid;
    place-items: center;
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    font-size: clamp(28px, 2.6vw, 36px);
    line-height: 1;
    color: var(--universim-gold);
}

.g20-perk__title {
    margin: 0;
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    font-size: clamp(21px, 2.1vw, 30px);
    letter-spacing: -0.015em;
    text-align: left;
}

.g20-perk__text {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.52);
    max-width: 52ch;
    text-align: left;
}

/* Micro-interaction hover uniquement (souris) : léger déplacement vers la
   droite, retour automatique et complet à translateX(0) à la sortie. Pas
   d'état permanent, pas de dépendance au hover sur tactile. */
@media (hover: hover) and (pointer: fine) {
    .g20-perk {
        transition: transform 0.4s ease !important;
    }

    .g20-perk:hover {
        transform: translateX(10px) !important;
    }
}

/* --------------------------------------------------------------------
   ÉDITORIAL IMMERSIF
   -------------------------------------------------------------------- */
.g20-editorial {
    position: relative;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: #000;
    padding: clamp(64px, 11vh, 150px) clamp(20px, 4vw, 64px);
}

.g20-editorial__inner {
    position: relative;
    max-width: 1680px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: clamp(18px, 2.6vh, 30px);
}

.g20-editorial__eyebrow {
    font-family: 'Outfit', sans-serif;
    font-size: 11.5px;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--universim-gold);
}

.g20-editorial__title {
    margin: 0;
    font-family: 'Outfit', sans-serif;
    font-weight: 200;
    font-size: clamp(32px, 5.4vw, 86px);
    line-height: 1;
    letter-spacing: -0.035em;
    max-width: 20ch;
}

.g20-editorial__text {
    margin: 0;
    font-size: clamp(15px, 1.25vw, 18px);
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.66);
    max-width: 48ch;
}

.g20-editorial__stats {
    display: flex;
    gap: clamp(24px, 4vw, 60px);
    flex-wrap: wrap;
    padding-top: clamp(16px, 2.4vh, 28px);
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    max-width: 760px;
}

.g20-editorial__stat-value {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(24px, 2.4vw, 38px);
    font-weight: 300;
    color: var(--universim-gold);
    line-height: 1;
}

.g20-editorial__stat-label {
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 6px;
}

/* --------------------------------------------------------------------
   AVIS
   -------------------------------------------------------------------- */
.g20-avis {
    padding: clamp(72px, 11vh, 140px) clamp(20px, 4vw, 64px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.g20-avis__inner {
    max-width: 1680px;
    margin: 0 auto;
}

.g20-avis__title {
    margin: 0 0 clamp(30px, 4.6vh, 54px);
    font-family: 'Outfit', sans-serif;
    font-weight: 200;
    font-size: clamp(30px, 3.8vw, 58px);
    line-height: 1;
    letter-spacing: -0.03em;
}

.g20-avis__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: clamp(14px, 1.6vw, 22px);
}

.g20-review {
    margin: 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: clamp(28px, 3vw, 40px);
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 3vh, 32px);
    justify-content: space-between;
    min-height: clamp(240px, 26vh, 300px);
    transition: border-color 0.5s ease;
}

.g20-review:hover {
    border-color: rgba(245, 179, 1, 0.4);
}

.g20-review__stars {
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    letter-spacing: 0.3em;
    color: var(--universim-gold);
}

.g20-review__quote {
    margin: 0;
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    font-size: clamp(18px, 1.6vw, 23px);
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.92);
    letter-spacing: -0.01em;
}

.g20-review__name {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.45);
}

.g20-review__name-line {
    width: 26px;
    height: 1px;
    background: rgba(245, 179, 1, 0.6);
}

/* --------------------------------------------------------------------
   CTA FINAL
   -------------------------------------------------------------------- */
.g20-cta {
    position: relative;
    padding: clamp(72px, 12vh, 160px) clamp(20px, 4vw, 64px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
    text-align: center;
}

/* Positionnement/rayons en pixels fixes (jamais %/vw) : le dégradé
   atteint transparent bien avant le bord de découpe de la section, à
   toute largeur d'écran (leçon retenue du halo du Hero "Le Petit"). */
.g20-cta__glow {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 1100px;
    height: 550px;
    background: radial-gradient(
        ellipse at center,
        rgba(245, 179, 1, 0.08) 0px,
        rgba(245, 179, 1, 0.045) 110px,
        rgba(245, 179, 1, 0.018) 220px,
        transparent 300px
    );
    pointer-events: none;
}

.g20-cta__inner {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(20px, 3vh, 34px);
}

.g20-cta__eyebrow {
    font-family: 'Outfit', sans-serif;
    font-size: 11.5px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
}

.g20-cta__title {
    margin: 0;
    font-family: 'Outfit', sans-serif;
    font-weight: 200;
    font-size: clamp(40px, 6.6vw, 104px);
    line-height: 0.95;
    letter-spacing: -0.035em;
}

.g20-cta__title-accent {
    font-weight: 500;
    color: var(--universim-gold);
}

.g20-cta__price-row {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-family: 'Outfit', sans-serif;
}

.g20-cta__price-number {
    font-size: clamp(48px, 6vw, 86px);
    font-weight: 300;
    line-height: 0.9;
    letter-spacing: -0.04em;
}

.g20-cta__price-currency {
    font-size: clamp(20px, 2vw, 30px);
    font-weight: 300;
    color: var(--universim-gold);
    padding-top: 6px;
}

.g20-cta__price-unit {
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    padding-top: 14px;
    margin-left: 8px;
}

.g20-cta__note {
    margin: 0;
    font-size: 12.5px;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.4);
}

/* Lien AJAX "ajouter au panier" (universim_add_to_cart_link()) — plus le
   formulaire natif WooCommerce d'origine, donc .g20-cta__form devient
   directement le conteneur flex. Spécificité renforcée : WooCommerce
   charge sa propre règle ".woocommerce a.button"/"button.button.alt"
   (3 classes + élément) qui l'emporterait sinon sur un sélecteur plus
   simple. Sélecteur par classe seule : le bouton est un <a>, pas un
   <button>. */
.g20-cta__form {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

.g20-page .g20-cta .g20-cta__form .single_add_to_cart_button {
    display: inline-flex;
    align-items: center;
    padding: 19px 44px;
    border-radius: 999px;
    background: var(--universim-gold);
    color: #000;
    font-family: 'Outfit', sans-serif;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    box-shadow: 0 18px 50px -16px rgba(245, 179, 1, 0.65);
    transition: background 0.3s ease, transform 0.3s ease;
}

.g20-page .g20-cta .g20-cta__form .single_add_to_cart_button:hover {
    background: var(--universim-gold-hover);
    transform: translateY(-2px);
}

/* --------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------- */
.g20-faq {
    padding: clamp(72px, 11vh, 150px) clamp(20px, 4vw, 64px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.g20-faq__inner {
    max-width: 1680px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: clamp(32px, 5vw, 80px);
    align-items: start;
}

.g20-faq__title {
    margin: 0 0 18px;
    font-family: 'Outfit', sans-serif;
    font-weight: 200;
    font-size: clamp(34px, 4.2vw, 62px);
    line-height: 1;
    letter-spacing: -0.03em;
}

.g20-faq__intro {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.5);
    max-width: 32ch;
}

.g20-faq__list {
    grid-column: span 2;
    min-width: 0;
}

/* --------------------------------------------------------------------
   AUTRES FORFAITS
   -------------------------------------------------------------------- */
.g20-other {
    padding: clamp(72px, 11vh, 150px) clamp(20px, 4vw, 64px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, #000, #050403);
}

.g20-other__inner {
    max-width: 1680px;
    margin: 0 auto;
}

.g20-other__header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 20px;
    margin-bottom: clamp(28px, 4.4vh, 50px);
}

.g20-other__title {
    margin: 0;
    font-family: 'Outfit', sans-serif;
    font-weight: 200;
    font-size: clamp(30px, 3.8vw, 58px);
    line-height: 1;
    letter-spacing: -0.03em;
}

.g20-other__link {
    margin-left: auto;
    font-size: 13.5px;
    color: var(--universim-gold);
}

.g20-other__link:hover {
    color: #fff;
}

.g20-other__list {
    display: flex;
    flex-direction: column;
}

/* `!important` sur transform : voir la note équivalente sur .g20-perk plus
   haut (neutralise le décalage d'entrée inline posé par single-20-go.js sur
   les éléments [data-reveal], jamais réinitialisé sinon). */
.g20-other__row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(150px, 45%), 1fr));
    align-items: center;
    gap: clamp(14px, 2vw, 32px);
    padding: clamp(24px, 3.4vh, 38px) clamp(6px, 1.4vw, 20px);
    border-top: 1px solid rgba(255, 255, 255, 0.11);
    color: #fff;
    transition: background 0.45s ease;
    transform: translateX(0) !important;
}

.g20-other__row:hover {
    background: rgba(245, 179, 1, 0.05);
    color: #fff;
}

/* Micro-interaction hover uniquement (souris) : léger déplacement vers la
   droite, retour automatique à translateX(0) à la sortie. */
@media (hover: hover) and (pointer: fine) {
    .g20-other__row {
        transition: background 0.45s ease, transform 0.4s ease !important;
    }

    .g20-other__row:hover {
        transform: translateX(10px) !important;
    }
}

.g20-other__name {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(26px, 3vw, 44px);
    font-weight: 300;
    letter-spacing: -0.02em;
    text-align: left;
}

.g20-other__tag {
    font-size: 13.5px;
    color: rgba(255, 255, 255, 0.45);
    line-height: 1.6;
    text-align: left;
}

.g20-other__specs {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.4);
    line-height: 1.6;
    text-align: left;
}

.g20-other__price {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(20px, 1.9vw, 28px);
    font-weight: 400;
    color: var(--universim-gold);
    text-align: right;
}

/* ==========================================================================
   Responsive — tablette
   ========================================================================== */
@media (max-width: 1024px) {
    .g20-faq__list {
        grid-column: span 1;
    }
}

/* ==========================================================================
   Responsive — mobile
   ========================================================================== */
@media (max-width: 768px) {
    .g20-hero__band {
        flex-direction: column;
    }

    .g20-hero__photo,
    .g20-hero__trail-panel {
        min-height: 260px;
    }

    .g20-hero__trail-panel {
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    .g20-hero__bar {
        margin-top: 0;
    }

    .g20-forfait__header,
    .g20-avantages__title,
    .g20-avis__title,
    .g20-other__header {
        flex-direction: column;
        align-items: flex-start;
    }

    .g20-other__link {
        margin-left: 0;
    }

    .g20-other__row {
        grid-template-columns: 1fr 1fr;
        row-gap: 6px;
    }

    .g20-other__price {
        text-align: left;
    }

    .g20-perk {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}

/* ==========================================================================
   Accessibilité : prefers-reduced-motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .g20-page [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
    }

    .g20-btn--primary:hover,
    .g20-cta__form .single_add_to_cart_button:hover {
        transform: none !important;
    }

    .g20-perk:hover,
    .g20-other__row:hover {
        transform: none !important;
    }
}