/* =========================================================
   Lo On Shing Consultants — V2 Hybrid (ALR)
   V1 (Nouvel Oeil) identity on the CCSS V3 architecture
   EN GB · Hong Kong
   ========================================================= */
:root {
    /* V1 Lo On Shing deep blue (#0d4494) replaces the CCSS azure */
    --brand-primary: #1a55a8;
    --brand-primary-dark: #0d4494;
    --brand-primary-darker: #092f66;
    --brand-primary-light: #4a80c6;
    --brand-accent: #dbe6f5;
    --bg-subtle: #eef3fa;
    --family-corporate-ink: #0d4494;
    /* Accent orange (bouton d'accès client) */
    --brand-orange: #e67e22;      /* identique à --brand-warm du site CCSS */
    --brand-orange-dark: #c75e0a;
}

/* Header logo sizing (wordmark is wide) — doubled le 27/08/2026,
   puis réduit de 20 % le même soir : 104 → 83 px. */
.header .logo img { max-height: 83px; height: 83px; width: auto; }
@media (max-width: 1100px) { .header .logo img { max-height: 67px; height: 67px; } }
@media (max-width: 768px)  { .header .logo img { max-height: 48px; height: 48px; } }

/* Footer logo */
.footer-brand img { max-width: 230px; height: auto; }

/* Stat tiles (macro-economic overview) */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; margin-top: 2rem; }
.stat-tile { background: var(--bg-white); border: 1px solid var(--bg-border); border-left: 4px solid var(--brand-primary-dark);
             border-radius: var(--radius-md); padding: 1.15rem 1.25rem; box-shadow: var(--shadow-sm); }
.stat-tile .stat-value { font-family: var(--font-display); font-size: 1.75rem; color: var(--brand-primary-dark); line-height: 1.15; }
.stat-tile .stat-label { font-size: 0.86rem; color: var(--text-muted); margin-top: 0.35rem; }
.dark-band .stat-tile { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.18); }
.dark-band .stat-tile .stat-value { color: #fff; }
.dark-band .stat-tile .stat-label { color: rgba(255,255,255,0.75); }
@media (max-width: 900px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }

/* News/insight cards without links */
.news-card .card-body h3 { font-size: 1.02rem; line-height: 1.4; }
.news-tag { display: inline-block; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
            color: var(--brand-primary-dark); background: var(--brand-accent); border-radius: 3px;
            padding: 0.15rem 0.5rem; margin-bottom: 0.55rem; }

/* Structure cards */
.structure-card h3 { color: var(--brand-primary-dark); font-size: 1.06rem; margin-bottom: 0.3rem; }
.structure-card .best-for { font-size: 0.82rem; color: var(--text-muted); font-style: italic; margin-bottom: 0.6rem; }
.structure-card ul { margin: 0; padding-left: 1.05rem; font-size: 0.9rem; color: var(--text-body); }
.structure-card ul li { margin-bottom: 0.32rem; }

/* Page-hero quick anchors */
.section-anchors { margin-top: 1.1rem; display: flex; gap: 0.6rem; flex-wrap: wrap; }
.section-anchors a { font-size: 0.82rem; letter-spacing: 0.04em; padding: 0.35rem 0.85rem; border: 1px solid rgba(255,255,255,0.55);
                     border-radius: 999px; color: #fff; text-decoration: none; transition: var(--transition); }
.section-anchors a:hover { background: rgba(255,255,255,0.16); }

/* CCSS promo band */
.ccss-band .btn { margin-right: 0.6rem; margin-top: 0.6rem; }

/* Active nav item */
.nav-menu li.is-active > a { font-weight: 700; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }


/* =========================================================
   En-tête : actions alignées à droite + bouton « Your access »
   ========================================================= */
.header-top-row { justify-content: flex-end; }
.header-top-row > .header-actions { margin-left: auto; }

/* Contraste (audit v3, décision d'Antoine du 2 septembre 2026 — proposition B) :
   l'orange #E67E22 est conservé, le texte des boutons passe en marine #092F66
   (4,6:1, AA) au lieu du blanc (2,8:1). */
.btn-orange {
    background: var(--brand-orange);
    color: #092F66;
    border-color: var(--brand-orange);
    box-shadow: 0 4px 14px rgba(230,126,34,0.35);
}
.btn-orange:hover,
.btn-orange:focus-visible {
    /* au survol, l'orange s'éclaircit (au lieu de foncer) pour que le marine reste lisible : 5,1:1 */
    background: #EB8A38;
    border-color: #EB8A38;
    color: #092F66;
    box-shadow: 0 6px 18px rgba(230,126,34,0.5);
    transform: translateY(-1px);
}
/* Sur l'en-tête transparent (hero) : on garde l'orange plein, lisible sur l'image */
.header-overlay .header-actions .btn-orange {
    background: var(--brand-orange);
    color: #092F66;
    border-color: var(--brand-orange);
    box-shadow: 0 2px 10px rgba(0,0,0,0.25);
}
.header-overlay .header-actions .btn-orange:hover {
    background: #EB8A38;
    border-color: #EB8A38;
}
/* Mobile : le bouton d'accès reste visible à côté de « Contact us » */
@media (max-width: 1100px) {
    .header-actions .btn.btn-orange { display: inline-flex; }
}
@media (max-width: 700px) {
    .header-actions .btn { font-size: 0.68rem; padding: 0.5rem 0.85rem; letter-spacing: 0.08em; }
}


/* =========================================================
   Barre des langues — reprise du site CCSS
   Les versions traduites n'existent pas encore : les langues
   autres que l'anglais affichent un message au lieu de mener
   à une page vide.
   ========================================================= */
.header-top-row > .lang-switcher { margin-right: auto; }
.lang-switcher {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    margin-right: 0.75rem;
    padding: 0.2rem 0.4rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
}
.lang-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    padding: 0.28rem 0.5rem;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    color: #A8AEB8;          /* 4,52:1 sur le bandeau posé sur photo */
    background: transparent;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    text-decoration: none;
    line-height: 1;
    transition: background 0.2s ease, color 0.2s ease;
}
.lang-item:hover { background: rgba(255, 255, 255, 0.18); color: #FFFFFF; }
.lang-item.is-active {
    background: #fff;
    color: var(--brand-primary-dark, #0d4494);
    cursor: default;
    font-weight: 700;
}
.lang-item.is-active:hover { background: #fff; }

/* ------------------------------------------------------------------
   Trois rangs dans la barre des langues  [langues-rangs]
   ------------------------------------------------------------------
   Arrêté par Antoine le 31 août 2026 : EN, CN, VN d'abord — ce sont
   les trois langues de la maison, et les deux dernières seront faites
   dès que la version anglaise sera arrêtée. Les six autres suivent et
   viendront peu à peu.

   Le rang se marque en REMONTANT les deux prochaines, pas en
   descendant les six autres. Celles-ci sont déjà à #6B7280 sur un
   bandeau sombre ; les ternir davantage les ferait passer sous le
   seuil de lisibilité, et une langue qu'on ne peut pas lire ne
   s'annonce plus, elle disparaît. On garde donc les six où elles
   sont et on éclaircit CN et VN : l'écart se crée sans que rien ne
   descende.

   Le contour propre à chaque pastille est retiré le 10 oct. 2026
   (Antoine : « c'est le double entourage qu'il faut enlever, le reste
   est identique ») : la barre reprend le dessin du site CCSS, un seul
   entourage, celui de la barre ; l'actif garde sa pastille pleine.   */
/*  `lang-differee` ne porte AUCUNE règle d'aspect : les six langues à
    venir gardent exactement le gris qu'elles avaient. La classe ne
    sert qu'à désigner celles qui ne sont pas du premier rang — pour
    ce sélecteur-ci, et pour ce qui viendra ensuite.  */
.lang-item:not(.is-active):not(.lang-differee) {
    color: rgba(255, 255, 255, 0.92);
}
.header.scrolled .lang-item:not(.is-active):not(.lang-differee),
.header:not(.header-overlay) .lang-item:not(.is-active):not(.lang-differee) {
    color: var(--brand-primary-dark, #0d4494);
}

.header.scrolled .lang-switcher,
.header:not(.header-overlay) .lang-switcher {
    border-color: rgba(13, 43, 103, 0.22);
    background: rgba(13, 43, 103, 0.04);
}
.header.scrolled .lang-item,
.header:not(.header-overlay) .lang-item { color: #687280; }  /* 4,58:1 sur le bandeau plein, mesuré fond composé */
.header.scrolled .lang-item:hover,
.header:not(.header-overlay) .lang-item:hover {
    background: rgba(13, 43, 103, 0.10);
    color: var(--brand-primary-dark, #0d4494);
}
.header.scrolled .lang-item.is-active,
.header:not(.header-overlay) .lang-item.is-active {
    background: var(--brand-primary-dark, #0d4494);
    color: #fff;
}

.lang-toast {
    position: fixed;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: rgba(9, 47, 102, 0.96);
    color: #fff;
    padding: 0.85rem 1.6rem;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 500;
    z-index: 3000;
    opacity: 0;
    transition: opacity 220ms ease, transform 220ms ease;
    pointer-events: none;
    box-shadow: 0 8px 28px rgba(9, 47, 102, 0.32);
    max-width: calc(100vw - 40px);
    text-align: center;
}
.lang-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 900px) {
    .lang-switcher { margin-right: 0.4rem; padding: 0.15rem 0.25rem; }
    .lang-item { min-width: 26px; padding: 0.24rem 0.34rem; font-size: 0.76rem; }
}
/*  Sous 620 px la barre ne peut pas porter neuf langues. On garde les
    trois de la maison et le français ; les cinq suivantes tombent.
    La liste est écrite en négatif — ce qui RESTE — pour qu'une langue
    ajoutée demain disparaisse d'elle-même du téléphone au lieu d'y
    déborder en silence.                                              */
@media (max-width: 620px) {
    .lang-item:not([data-lang="en"]):not([data-lang="zh-hant"]):not([data-lang="vi"]):not([data-lang="fr"]) {
        display: none;
    }
}


/* ------------------------------------------------------------------
   Ruban d'angle « coming soon »

   Il s'accroche a l'angle superieur GAUCHE du bloc de contenu du hero,
   et non a la section : pose sur la section, il passait sous l'en-tete
   transparent, qui en mangeait la moitie.

   Geometrie : pour que la bande tombe au milieu de l'angle, le centre
   du <span> doit etre sur la diagonale, d'ou
       left = top + hauteur/2 - largeur/2
   ------------------------------------------------------------------ */
.page-hero { position: relative; }
.page-hero .container { position: relative; }

.ruban-angle {
    position: absolute;
    top: 0;
    left: 0;
    width: 190px;
    height: 190px;
    overflow: hidden;
    pointer-events: none;
    z-index: 3;
}

.ruban-angle span {
    position: absolute;
    display: block;
    top: 44px;
    left: -70px;
    width: 250px;
    padding: 7px 0;
    transform: rotate(-45deg);
    /*  translucide a 60 % : l'orange laisse voir la photo dessous  */
    background: rgba(230, 126, 34, 0.6);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.28);
}

/* ---------- ruban « coming soon » sur la connexion client ----------
   Même ruban, même raison : le formulaire de connexion de l'espace
   client existe à l'écran mais n'ouvre rien tant que le portail n'est
   pas en ligne. Il est donc montré, annoncé à l'angle, et rendu
   INERTE — l'attribut `inert` le retire du clavier, de la souris et de
   l'arbre d'accessibilité. Un champ seulement grisé, qu'on peut encore
   remplir, promet une connexion qui n'arrivera pas.

   La réserve en haut est la même que pour le masque CCSS : sans elle
   la bande passe sur le premier onglet, et un ruban qui rend illisible
   ce qu'il annonce se retourne contre lui-même. */
.auth-mask {
    position: relative;
    overflow: hidden;
    background: var(--bg-subtle, #f8fafc);
    border: 1px solid var(--bg-border, #e2e8f0);
    border-radius: var(--radius-md, 6px);
    padding: 1.2rem 1.25rem 1.35rem;
    padding-top: 3.1rem;
}
.auth-mask .ruban-angle {
    width: 96px;
    height: 96px;
    border-top-left-radius: inherit;
}
.auth-mask .ruban-angle span {
    top: 19px;
    left: -38px;
    width: 136px;
    padding: 4px 0;
    font-size: 0.6rem;
    letter-spacing: 0.09em;
    /*  même translucidité que sur le masque CCSS : le fond est clair,
        l'orange n'a rien à laisser voir, on l'opacifie un peu  */
    background: rgba(230, 126, 34, 0.74);
}
/*  Le repli pour les navigateurs qui ignorent `inert` : la vraie
    neutralisation est l'attribut, ceci n'en est que l'apparence.  */
.auth-mask-inner {
    opacity: 0.55;
    pointer-events: none;
    user-select: none;
}


/*  La mention d'attente, sous le bloc de recherche. Fond clair ici :
    l'orange de la charte y passe sans etre eclairci, contrairement au
    hero ou il fallait le remonter pour rester lisible. */
/*  `.section-header p` porte deja la couleur grise et compte deux
    classes : il faut au moins autant de poids pour l'emporter, d'ou
    le `p` accole.                                                   */
.section-header p.note-attente,
.note-attente {
    /*  `margin: 0` cassait le centrage : la regle du site centre ce
        paragraphe par `margin: auto` sur une largeur bornee. On rend
        les marges laterales automatiques et on libere la largeur, pour
        que la phrase tienne sur une seule ligne.                      */
    margin: 0.9rem auto 0;
    max-width: none;
    text-align: center;
    white-space: nowrap;
    font-weight: 600;
    /*  L'orange sombre de la charte (#C75E0A) ne donne que 3,7:1 sur ce
        fond bleute : sous le seuil de lisibilite. Assombri jusqu'a 4,6:1. */
    color: #AF5309;
}
.note-attente a,
.note-attente a:hover,
.note-attente a:focus-visible {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/*  Sur le fond sombre du hero, un lien doit rester blanc : la couleur
    de lien par defaut du site y est illisible. */
.page-hero p a,
.page-hero p a:hover,
.page-hero p a:focus-visible {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/*  Le meme ruban sur l'apercu du site CCSS. La photo fait 620 px de
    large au plus : a 190 px le ruban l'ecraserait, on le ramene a 140.
    Le <a> qui porte la photo est deja `position: relative` et
    `overflow: hidden` — il clippe la bande a l'angle sans rien ajouter. */
.hero-echo .ruban-angle { width: 140px; height: 140px; }
.hero-echo .ruban-angle span {
    top: 32px;
    left: -50px;
    width: 185px;
    padding: 5px 0;
    font-size: 0.7rem;
}

/*  Sur un ecran etroit la phrase ne tient pas sur une ligne : mieux
    vaut la laisser revenir que la voir deborder. */
@media (max-width: 900px) {
    .section-header p.note-attente,
    .note-attente { white-space: normal; }
}

@media (max-width: 767.98px) {
    .ruban-angle { width: 150px; height: 150px; }
    .ruban-angle span { top: 34px; left: -62px; width: 200px;
                        font-size: 0.66rem; padding: 5px 0; }
}

/* ==========================================================================
   Les User Guides sur la page questionnaire, et leur liseuse.
   Même dispositif que le site CCSS : un tiroir latéral droit sur fond
   assombri, fermé par la croix, le fond ou la touche Échap. Le PDF
   s'affiche dans le lecteur du navigateur, qui gère lui-même la pagination.
   ========================================================================== */
.guides-block {
    margin-bottom: 2.6rem;
    padding-bottom: 2.2rem;
    border-bottom: 1px solid var(--bg-border, #E0E6ED);
}
.guides-eyebrow {
    display: block;
    font-family: var(--font-accent, var(--font-body));
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--brand-warm, #E67E22);
    margin-bottom: 0.5rem;
}
.guides-intro h2 { margin: 0 0 0.6rem; }
.guides-intro p { margin: 0 0 1.6rem; max-width: 60ch; color: var(--text-body, #495057); }

/*  Le format des cartes est celui du site CCSS : la couverture fait la
    carte, au rapport exact de la page, et la legende passe dessous.
    Les deux guides cote a cote, empiles seulement sur telephone.      */
.guide-cover-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.6rem;
    max-width: 620px;
}
.guide-cover-cards .guide-cover-item {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.guide-cover-cards .card-with-image {
    position: relative;
    aspect-ratio: 910 / 1287;      /* le rapport exact de la couverture */
    display: block;
    padding: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--bg-border, #E0E6ED);
    border-radius: var(--radius-lg, 14px);
    box-shadow: 0 4px 14px rgba(58, 63, 72, 0.10);
    transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
}
.guide-cover-cards .card-with-image:hover {
    border-color: #3F5978;
    box-shadow: 0 12px 30px rgba(58, 63, 72, 0.18);
    transform: translateY(-3px);
}
.guide-cover-cards .card-with-image .card-img {
    position: absolute;
    inset: 0;
    height: 100%;
    width: 100%;
    background: #fff;
    overflow: hidden;
}
.guide-cover-cards .card-with-image .card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform 0.4s ease;
}
.guide-cover-cards .card-with-image:hover .card-img img { transform: scale(1.03); }
.guide-cover-cards .guide-cover-caption {
    margin: 0;
    text-align: center;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-dark, #3A3F48);
}

/* ---- la liseuse ---- */
.pdf-viewer-backdrop {
    position: fixed; inset: 0;
    background: rgba(9, 47, 102, 0.34);
    backdrop-filter: blur(2px);
    z-index: 1400; opacity: 0; pointer-events: none;
    transition: opacity 0.2s;
}
.pdf-viewer-backdrop.open { opacity: 1; pointer-events: auto; }
.pdf-viewer-drawer {
    position: fixed; top: 0; right: 0;
    height: 100vh; width: min(656px, 50vw);   /* 820 px et 62 vw, moins 20 % */
    background: #3F5978; color: #fff;
    z-index: 1500;
    transform: translateX(100%);
    transition: transform 0.28s ease-out;
    display: flex; flex-direction: column;
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.22);
}
.pdf-viewer-drawer.open { transform: translateX(0); }
.pdf-viewer-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    flex-shrink: 0;
}
.pdf-viewer-title-block { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.pdf-viewer-eyebrow {
    font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.68); font-weight: 600;
}
.pdf-viewer-title-block h3 {
    margin: 0; font-size: 1rem; font-weight: 600; color: #fff; line-height: 1.3;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pdf-viewer-actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.pdf-viewer-close {
    width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, 0.1); border: 0; color: #fff;
    font-size: 1.4rem; line-height: 1; border-radius: 50%; cursor: pointer;
    transition: background 0.15s;
}
.pdf-viewer-close:hover { background: rgba(255, 255, 255, 0.22); }
.pdf-viewer-body { flex: 1 1 auto; position: relative; background: #f4f5f7; overflow: hidden; }
.pdf-viewer-body iframe { width: 100%; height: 100%; border: 0; display: block; }
.pdf-viewer-body.is-loading::before {
    content: "Loading…"; position: absolute; inset: 0;
    display: grid; place-items: center; color: #6b7280; font-size: 0.9rem;
}
body.pdf-viewer-locked { overflow: hidden; }

@media (max-width: 820px) {
    .pdf-viewer-drawer { width: 100vw; }
}
@media (max-width: 460px) {
    .guide-cover-cards { gap: 1rem; }
}

/* =========================================================
   SOUSCRIPTION AUX ACTUALITÉS ET AUX NOTES
   ---------------------------------------------------------
   Posée sur la page des actualités, sous le chapeau de la
   première section. Deux colonnes tant que la place le permet :
   à gauche ce que le lecteur reçoit, à droite le formulaire.
   En dessous de 900 px les deux se superposent.

   Le bloc n'emprunte pas la couleur d'accent : un pavé orange
   au milieu d'une page de lecture se lit comme une réclame,
   et ce n'en est pas une. Seul le bouton la porte.
   ========================================================= */
.subscribe {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: 2.2rem;
  align-items: start;
  margin: 2.4rem 0 2.8rem;
  padding: 1.9rem 2rem;
  background: #EEF3FA;
  border: 1px solid #D3E0EC;
  border-left: 4px solid var(--los-bleu, #2E6BA8);
  border-radius: 6px;
}
.subscribe-text h3 {
  margin: .35rem 0 .6rem;
  color: #1E4F85;
  font-size: 1.28rem;
  line-height: 1.25;
}
.subscribe-text p { margin: 0; color: #46586B; font-size: .93rem; line-height: 1.6; }

.subscribe-form { display: flex; flex-direction: column; gap: .85rem; }
.sub-row { display: flex; flex-direction: column; gap: .3rem; }
.sub-row label { font-size: .82rem; font-weight: 600; color: #22303F; letter-spacing: .01em; }
.sub-row label .opt { font-weight: 400; color: #7A8899; font-style: italic; }
.sub-row input {
  padding: .58rem .7rem;
  border: 1px solid #C4D4E4;
  border-radius: 4px;
  font: inherit;
  font-size: .93rem;
  background: #fff;
  color: #22303F;
}
.sub-row input:focus { outline: 2px solid #448ACC; outline-offset: 1px; border-color: #448ACC; }
.sub-row input[aria-invalid="true"] { border-color: #AF5309; background: #FFF8F2; }

.sub-choices { border: 0; padding: 0; margin: .1rem 0 0; display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; }
.sub-choices legend { padding: 0; margin-bottom: .3rem; font-size: .82rem; font-weight: 600; color: #22303F; }
.sub-choices label { display: inline-flex; align-items: center; gap: .38rem; font-size: .88rem; color: #46586B; }
.sub-choices input { accent-color: #2E6BA8; width: 15px; height: 15px; }

.sub-consent { display: flex; gap: .55rem; align-items: flex-start; font-size: .82rem; color: #46586B; line-height: 1.5; }
.sub-consent input { margin-top: .18rem; accent-color: #2E6BA8; width: 15px; height: 15px; flex: 0 0 auto; }
.sub-consent a { color: #1E4F85; text-decoration: underline; }

.sub-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin-top: .2rem; }
.sub-note { font-size: .78rem; color: #6B7A8C; line-height: 1.45; flex: 1 1 220px; }

.sub-message { margin: .2rem 0 0; padding: .6rem .8rem; border-radius: 4px; font-size: .87rem; line-height: 1.5; }
.sub-message.ok { background: #E8F3EA; border-left: 3px solid #2E7D4F; color: #1F4B32; }
.sub-message.ko { background: #FDF3E9; border-left: 3px solid #AF5309; color: #7A3B06; }

@media (max-width: 900px) {
  .subscribe { grid-template-columns: 1fr; gap: 1.3rem; padding: 1.5rem 1.3rem; }
}