/* ============================================================================
   fenetre-guide.css — La fenêtre « contenu contre email », Hélène B
   ----------------------------------------------------------------------------
   Lot 2 bis « capture email » (17/09/2026). Deux cartes-guides avec couverture
   réelle, en deux temps (croquis validé, réunion cartes-guides). Grille
   premium-mobile-first : gouttières 16 (main) / 40 (bureau) identiques, cibles
   ≥ 44 px (croix et carte largement au-delà), un seul CTA or par écran, fond
   navy de marque #2A2A41 (jamais plus sombre), creux #1F1F30, radius cohérent.
   Fenêtre ANCRÉE EN BAS sur la main (zone du pouce), centrée sur le bureau.
   ========================================================================== */

.hb-fg,
.hb-fg * {
    box-sizing: border-box;
}

.hb-fg {
    --hb-fg-navy: #2a2a41;
    --hb-fg-navy-deep: #1f1f30;
    --hb-fg-gold: #cdaf76;
    --hb-fg-gold-light: #e0c896;
    --hb-fg-gold-sombre: #8c6b34;
    --hb-fg-white: #ffffff;
    --hb-fg-ligne: rgba(205, 175, 118, 0.28);
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 16px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    font-family: 'Inter', 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    /* La page reste visible et défilable derrière : jamais un mur opaque, et
       jamais un blocage de la lecture déjà promise par l'annonce (Google
       Destination experience). Le voile est cliquable pour fermer. */
    background: rgba(15, 15, 24, 0.55);
}

@media (min-width: 620px) {
    .hb-fg {
        align-items: center;
        padding: 40px;
    }
}

.hb-fg[hidden] {
    display: none;
}

.hb-fg__panel {
    position: relative;
    width: 100%;
    max-width: 400px;
    max-height: min(88vh, 760px);
    overflow-y: auto;
    padding: 20px 16px 20px;
    background: linear-gradient(135deg, rgba(42, 42, 65, 0.98), rgba(31, 31, 48, 0.99));
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    backdrop-filter: blur(28px) saturate(180%);
    border: 1px solid var(--hb-fg-ligne);
    border-radius: 24px;
    color: var(--hb-fg-white);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
}

@media (min-width: 620px) {
    .hb-fg__panel {
        max-width: 720px;
        padding: 40px;
    }
}

/* La croix — 48 px, pastille bordée d'or, jamais une icône nue (grille §10). */
.hb-fg__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--hb-fg-ligne);
    border-radius: 50%;
    color: var(--hb-fg-white);
    cursor: pointer;
    transition:
        background 200ms cubic-bezier(0, 0, 0.2, 1),
        transform 200ms cubic-bezier(0, 0, 0.2, 1);
}

.hb-fg__close:hover {
    background: rgba(205, 175, 118, 0.16);
}

.hb-fg__close:active {
    transform: scale(0.94);
}

.hb-fg__close svg {
    width: 18px;
    height: 18px;
}

.hb-fg__close:focus-visible {
    outline: 2px solid var(--hb-fg-gold);
    outline-offset: 2px;
}

.hb-fg__etape {
    animation: hb-fg-monte 400ms cubic-bezier(0, 0, 0.2, 1) backwards;
}

.hb-fg__title {
    font-family: 'Lora', Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-weight: 600;
    font-size: 1.25rem;
    line-height: 1.3;
    margin: 0 40px 8px 0;
    color: var(--hb-fg-white);
}

@media (min-width: 620px) {
    .hb-fg__title {
        font-size: 1.7rem;
        margin-right: 56px;
    }
}

.hb-fg__body {
    font-size: 0.9rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.82);
    margin: 0 0 16px;
}

@media (min-width: 620px) {
    .hb-fg__body {
        font-size: 0.95rem;
    }
}

/* ---- Cartes-guides (écran 1) ------------------------------------------- */

.hb-fg__cartes {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

@media (min-width: 620px) {
    .hb-fg__cartes {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        margin-top: 8px;
    }
    /* Repli explicite si Hélène tranche pour une carte plus grande (F1, verdict
       au réveil) : 3 contre 2, jamais 2 contre 1 (designer-systeme §3), les deux
       couvertures gardent la même échelle. Piloté par la DONNÉE `data-taille`. */
    .hb-fg__cartes:has([data-taille='grande']) {
        grid-template-columns: 3fr 2fr;
    }
}

.hb-fg__carte {
    display: flex;
    gap: 12px;
    align-items: center;
    text-align: left;
    width: 100%;
    min-height: 150px;
    cursor: pointer;
    background: var(--hb-fg-navy-deep);
    border: 1px solid var(--hb-fg-ligne);
    border-radius: 16px;
    padding: 12px;
    color: inherit;
    font: inherit;
    position: relative;
    overflow: hidden;
    transition:
        transform 200ms cubic-bezier(0, 0, 0.2, 1),
        border-color 200ms cubic-bezier(0, 0, 0.2, 1),
        box-shadow 200ms cubic-bezier(0, 0, 0.2, 1);
    animation: hb-fg-monte 400ms cubic-bezier(0, 0, 0.2, 1) backwards;
}

.hb-fg__carte:nth-child(1) {
    animation-delay: 60ms;
}
.hb-fg__carte:nth-child(2) {
    animation-delay: 130ms;
}

@media (min-width: 620px) {
    .hb-fg__carte {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        padding: 18px;
        min-height: 300px;
    }
}

.hb-fg__carte:hover {
    transform: translate3d(0, -3px, 0);
    border-color: var(--hb-fg-gold);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4);
}

.hb-fg__carte:active {
    transform: translate3d(0, 0, 0) scale(0.99);
    transition-duration: 90ms;
}

.hb-fg__carte:focus-visible {
    outline: 2px solid var(--hb-fg-gold-light);
    outline-offset: 3px;
}

/* La couverture — écrin liseré or, jamais entière (bureau) : cadrée en haut,
   c'est le sujet roi de cet écran (grille §9). */
.hb-fg__couv {
    flex: none;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(205, 175, 118, 0.4);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
    /* Le navy de MARQUE, pas le creux d'objet : c'est exactement le fond des
       couvertures (mesuré #2B2940 sur le bord du rendu), donc les bandes
       laissées par `object-fit: contain` deviennent invisibles. */
    background: var(--hb-fg-navy);
    width: 84px;
    height: 118px;
}

/* La couverture est une page A4 (700 x 991 px au rendu) : recadrée dans une
   boîte paysage, elle coupait le titre du guide en deux et la carte montrait
   un aplat navy avec une plume. `contain` sur un fond navy identique à celui
   des couvertures : rien n'est coupé, et aucun cadre ne se voit. */
.hb-fg__couv img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

@media (min-width: 620px) {
    /* LA HAUTEUR COMMANDE, LA LARGEUR SUIT LE RATIO DE LA PAGE.
       Défaut vu au réel le 18/09/2026 (Chrome, 1440) : les couvertures
       paraissaient VIDES. Mesuré : la boîte faisait 271 x 260 px — un format
       PAYSAGE pour une page A4 PORTRAIT — parce que `max-height: 260px`
       l'emporte sur `aspect-ratio` quand la largeur commande (`width: 100%`,
       `height: auto`). `object-fit: contain` posait donc la page en 182 x 258
       au centre et laissait 33 % de la boîte en navy MORT, invisible puisque
       le fond de la boîte est exactement le navy de la couverture : l'œil ne
       voyait qu'une plaque navy avec un peu d'or au milieu (3,3 % de pixels
       encrés sur la capture recadrée).
       En pilotant par la HAUTEUR, la boîte reprend exactement le ratio de la
       page : `contain` la remplit bord à bord, plus une seule bande morte, et
       le liseré or épouse la couverture au lieu d'encadrer du vide. La hauteur
       suit le viewport (la fenêtre reste lisible sur un portable de 900 px)
       tout en gagnant la place que les bandes mortes gaspillaient. */
    .hb-fg__couv {
        width: auto;
        height: clamp(240px, 34vh, 320px);
        max-width: 100%;
        aspect-ratio: 700 / 991;
        align-self: center;
    }
}

.hb-fg__couv--mini {
    width: 44px;
    height: 62px;
}

.hb-fg__carte-corps {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.hb-fg__carte-titre {
    font-family: 'Lora', Georgia, serif;
    font-style: italic;
    font-weight: 600;
    color: var(--hb-fg-white);
    margin: 0;
    line-height: 1.25;
    font-size: 0.95rem;
}

@media (min-width: 620px) {
    .hb-fg__carte-titre {
        font-size: 1.15rem;
    }
}

.hb-fg__carte-sous {
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.4;
    font-size: 0.78rem;
    /* Limite à deux lignes (designer-systeme §7 : « la carte reste un peu
       bavarde sur la main, deux lignes de sous-ligne maximum »). */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (min-width: 620px) {
    .hb-fg__carte-sous {
        font-size: 0.85rem;
    }
}

.hb-fg__pages {
    margin-top: auto;
    padding-top: 4px;
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--hb-fg-gold);
    display: flex;
    align-items: center;
    gap: 8px;
}

.hb-fg__pages::before {
    content: '';
    width: 14px;
    height: 1px;
    background: linear-gradient(90deg, var(--hb-fg-gold-sombre), var(--hb-fg-gold-light));
}

/* ---- Écran 2 : l'adresse ------------------------------------------------ */

.hb-fg__rappel {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding: 10px;
    background: var(--hb-fg-navy-deep);
    border: 1px solid var(--hb-fg-ligne);
    border-radius: 12px;
}

.hb-fg__rappel-txt {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.4;
    min-width: 0;
}

.hb-fg__rappel-txt strong {
    display: block;
    color: var(--hb-fg-white);
    font-size: 0.85rem;
    font-family: 'Lora', Georgia, serif;
    font-style: italic;
}

.hb-fg__retour {
    margin-left: auto;
    flex: none;
    min-height: 44px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    background: none;
    border: none;
    color: var(--hb-fg-gold);
    font: inherit;
    font-size: 0.75rem;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.hb-fg__retour:focus-visible {
    outline: 2px solid var(--hb-fg-gold);
    outline-offset: 2px;
}

.hb-fg__field {
    margin-bottom: 8px;
}

.hb-fg__field label {
    display: block;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 8px;
}

.hb-fg__email {
    width: 100%;
    height: 52px;
    padding: 0 16px;
    background: var(--hb-fg-navy-deep);
    border: 1px solid var(--hb-fg-ligne);
    border-radius: 12px;
    color: var(--hb-fg-white);
    font-size: 0.95rem;
}

.hb-fg__email::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.hb-fg__email:focus-visible {
    outline: none;
    border-color: var(--hb-fg-gold);
    box-shadow: 0 0 0 3px rgba(205, 175, 118, 0.18);
}

.hb-fg__aide {
    margin: 8px 0 0;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
}

.hb-fg__checkbox-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin: 16px 0;
    min-height: 48px;
    padding: 6px 0;
    cursor: pointer;
}

.hb-fg__checkbox-row input[type='checkbox'] {
    width: 22px;
    height: 22px;
    min-width: 22px;
    margin-top: 2px;
    accent-color: var(--hb-fg-gold);
}

.hb-fg__checkbox-row span {
    font-size: 0.78rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.78);
}

/* Un seul CTA or par écran (grille §2). */
.hb-fg__submit {
    width: 100%;
    height: 52px;
    margin-top: 4px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    font-size: 0.95rem;
    color: #221b0c;
    background: linear-gradient(
        135deg,
        var(--hb-fg-gold-sombre) 0%,
        var(--hb-fg-gold) 26%,
        var(--hb-fg-gold-light) 50%,
        var(--hb-fg-gold) 74%,
        var(--hb-fg-gold-sombre) 100%
    );
    background-size: 200% 100%;
    background-position: 0 0;
    box-shadow: 0 10px 26px rgba(205, 175, 118, 0.24);
    transition:
        background-position 400ms cubic-bezier(0, 0, 0.2, 1),
        transform 200ms cubic-bezier(0, 0, 0.2, 1);
}

.hb-fg__submit:hover {
    background-position: 100% 0;
    transform: translate3d(0, -2px, 0);
}

.hb-fg__submit:active {
    transform: translate3d(0, 0, 0) scale(0.99);
    transition-duration: 90ms;
}

.hb-fg__submit:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.hb-fg__submit:focus-visible {
    outline: 2px solid var(--hb-fg-white);
    outline-offset: 2px;
}

.hb-fg__erreur {
    color: #ffb4a3;
    font-size: 0.8rem;
    margin: 0 0 12px;
}

.hb-fg__rgpd {
    font-size: 0.7rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 16px;
}

.hb-fg__rgpd a {
    color: rgba(255, 255, 255, 0.68);
}

/* ---- Écran 3 : la confirmation ------------------------------------------ */

.hb-fg__fini {
    text-align: center;
    padding: 8px 0 4px;
}

.hb-fg__sceau {
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--hb-fg-gold-sombre), var(--hb-fg-gold-light), var(--hb-fg-gold));
    display: flex;
    align-items: center;
    justify-content: center;
    animation: hb-fg-pop 380ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.hb-fg__sceau svg {
    width: 24px;
    height: 24px;
    color: #221b0c;
}

.hb-fg__lien {
    margin-top: 20px;
    background: none;
    border: 1px solid var(--hb-fg-ligne);
    color: var(--hb-fg-white);
    min-height: 48px;
    padding: 0 20px;
    border-radius: 12px;
    font: inherit;
    font-size: 0.82rem;
    cursor: pointer;
}

.hb-fg__lien:focus-visible {
    outline: 2px solid var(--hb-fg-gold);
    outline-offset: 2px;
}

/* ---- Mouvement, neutralisé sous prefers-reduced-motion ------------------ */

@keyframes hb-fg-monte {
    from {
        opacity: 0;
        transform: translate3d(0, 18px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes hb-fg-pop {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    60% {
        transform: scale(1.08);
        opacity: 1;
    }
    100% {
        transform: scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hb-fg *,
    .hb-fg *::before,
    .hb-fg *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* --------------------------------------------------------------------------
   ARABE — sens de lecture de droite à gauche (lot 4, 18/09/2026).
   La classe `hb-fg--rtl` est posée par le script quand la PAGE est en
   `dir="rtl"` (même geste que `hb-cc--rtl` de la capsule de consentement).
   On ne retourne que ce qui porte un sens de lecture : la croix passe à
   gauche, les textes s'alignent à droite, le bouton « changer de guide »
   se colle à l'autre bord. Les tailles, la grille et les 48 px ne bougent pas.
   -------------------------------------------------------------------------- */
.hb-fg--rtl .hb-fg__panel {
    direction: rtl;
    text-align: right;
}

.hb-fg--rtl .hb-fg__close {
    right: auto;
    left: 12px;
}

.hb-fg--rtl .hb-fg__title {
    margin: 0 0 8px 40px;
}

@media (min-width: 620px) {
    .hb-fg--rtl .hb-fg__title {
        margin-right: 0;
        margin-left: 56px;
    }
}

.hb-fg--rtl .hb-fg__carte {
    text-align: right;
}

.hb-fg--rtl .hb-fg__retour {
    margin-left: 0;
    margin-right: auto;
}