@charset "UTF-8";

/* ============================================================
   Wazamba — foglio di stile unico del sito
   ordine: token → base → utilità → componenti → schermi stretti
   ============================================================ */

/* --- caratteri ospitati in locale ------------------------- */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/snaps/montserrat-latin-400-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/snaps/montserrat-latin-600-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('/snaps/montserrat-latin-800-normal.woff2') format('woff2');
}

/* --- token del progetto ----------------------------------- */
:root {
    /* colori */
    --lead: #071b39;
    --zest: #95d055;
    --accent-strong: #7bbf34;
    --sheet: #061f3b;
    --above: #0b2d52;
    --deep: #04142a;
    --fg: #FFFFFF;
    --subtle: #bfbfbf;
    --rule: #123c68;
    --line-strong: #1f4a7d;
    --blend-a: #feda3c;
    --grad-2: #fc9201;
    --advisory: #be123c;
    --ink: #08192e;

    /* ritmo verticale */
    --g-2xs: 6px;
    --g-xs: 14px;
    --g-sm: 20px;
    --g-md: 32px;
    --g-lg: 48px;
    --g-xl: 72px;
    --g-2xl: 112px;
    --g-3xl: 160px;
    --sec-y: 44px;

    /* geometria */
    --r-2xs: 2px;
    --r-xs: 4px;
    --r-sm: 10px;
    --r-md: 16px;
    --r-lg: 28px;
    --r-xl: 36px;
    --r-2xl: 44px;
    --r-3xl: 56px;
    --lozenge: 9999px;
    --orb: 50%;
    --light: 1px;
    --mid: 2px;
    --heavy: 3px;
    --d-2xs: 0 1px 2px rgba(2, 10, 22, 0.24);
    --d-xs: 0 2px 4px rgba(2, 10, 22, 0.28);
    --d-sm: 0 4px 10px rgba(2, 10, 22, 0.34);
    --d-md: 0 10px 28px rgba(2, 10, 22, 0.42);
    --d-lg: 0 20px 48px rgba(2, 10, 22, 0.5);
    --d-xl: 0 28px 64px rgba(2, 10, 22, 0.55);
    --d-2xl: 0 36px 80px rgba(2, 10, 22, 0.6);
    --d-3xl: 0 44px 96px rgba(2, 10, 22, 0.66);

    /* caratteri */
    --heading: 'Montserrat', 'Trebuchet MS', sans-serif;
    --text: 'Montserrat', 'Segoe UI', sans-serif;
    --display-1: clamp(30px, 5.6vw, 80px);
    --display-2: clamp(25px, 3.3vw, 48px);
    --lg-2: clamp(20px, 2.1vw, 30px);
    --h4: 22px;
    --sm-2: 16px;
    --xs-2: 13px;
    --normal: 15px;
    --caption: 13px;
    --tiny: 11px;
    --tight: 0.95;
    --regular: 1.45;
    --roomy: 1.65;
    --book: 400;
    --half: 600;
    --black: 800;
    --snug: -0.04em;
    --base: 0em;
    --spread: 0.08em;

    /* contenitori */
    --site: 1200px;
    --narrow: 1200px;
    --brief: 600px;
    --wide: 1440px;
    --pad-lg: 32px;
    --edge-mid: 20px;
    --edge-narrow: 12px;

    /* movimento */
    --quick: 100ms;
    --t-normal: 190ms;
    --long: 370ms;
    --out: cubic-bezier(0.27, 0.62, 0.42, 0.97);
    --in-out: cubic-bezier(0.61, 0.11, 0.38, 0.88);
    --overshoot: cubic-bezier(0.45, 1, 0.57, 1.35);

    /* misure della testata, ricalcolate dallo script */
    --height-desktop: 84px;
    --h-sm: 96px;
    --h-pad: 84px;
}

/* --- azzeramento e base ----------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    overflow-x: clip;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--sheet);
    color: var(--fg);
    font-family: var(--text);
    font-size: var(--normal);
    font-weight: var(--book);
    line-height: var(--regular);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.mainflow {
    flex: 1 0 auto;
    display: block;
}

img {
    max-width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--heading);
    font-weight: var(--black);
    line-height: var(--tight);
    letter-spacing: var(--snug);
    overflow-wrap: anywhere;
    margin: 0;
}

p {
    margin: 0 0 var(--g-sm);
}

a {
    color: var(--zest);
    text-decoration: none;
}

ul,
ol {
    margin: 0;
    padding: 0;
}

/* --- utilità ---------------------------------------------- */
.skiplane {
    position: absolute;
    left: var(--g-sm);
    z-index: 200;
    background: var(--blend-a);
    color: var(--ink);
    font-weight: var(--half);
    padding: var(--g-2xs) var(--g-sm);
    border-radius: var(--r-sm);
}

.skiplane:not(:focus) {
    top: -200px !important;
}

.skiplane:focus {
    top: var(--g-sm);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* larghezza unica di tutte le sezioni */
.tribune-large-body,
.garde-corps-grand-body,
.cellule-dense-body,
.console-voile-body,
.guéridon-etroit-body,
.gardien-raffine-body,
.hypostyle-moderne-body,
.estafette-etroit-body,
.catafalque-brut-body,
.chasse-classique-body,
.credence-haut-body,
.verriere-secret-body,
.ciboire-etroit-body,
.prie-dieu-lumineux-body {
    width: 100%;
    max-width: calc(var(--site) + 2 * var(--pad-lg));
    margin-inline: auto;
    padding-inline: var(--pad-lg);
}

.sanctuaire-dru-frame,
.parterre-prime-frame {
    width: 100%;
    max-width: calc(var(--wide) + 2 * var(--pad-lg));
    margin-inline: auto;
    padding-inline: var(--pad-lg);
}

/* comparsa allo scorrimento (asse reveal = unfold) */
[data-rise] {
    opacity: 0;
    transform: translateY(14px) scaleY(0.985);
    transform-origin: top center;
    transition: opacity var(--long) var(--out), transform var(--long) var(--out);
}

[data-rise].is-shown {
    opacity: 1;
    transform: none;
}

/* ============================================================
   Testata — composizione HEAD-TIER (fascia di servizio + riga
   con marchio, menu e pulsante offerta)
   ============================================================ */
.sanctuaire-dru {
    position: relative;
    z-index: 60;
    background: var(--lead);
    color: var(--fg);
    box-shadow: var(--d-sm);
}

.sanctuaire-dru-tier {
    background: var(--deep);
    color: var(--subtle);
    font-size: var(--tiny);
    letter-spacing: var(--spread);
    text-transform: uppercase;
}

.sanctuaire-dru-tier .sanctuaire-dru-frame {
    display: flex;
    align-items: center;
    gap: var(--g-sm);
    min-height: 34px;
}

.sanctuaire-dru-word {
    color: var(--subtle);
    background: var(--deep);
}

.sanctuaire-dru-note {
    margin-left: auto;
    color: var(--subtle);
    background: var(--deep);
}

.sanctuaire-dru-mail {
    color: var(--blend-a);
    background: var(--deep);
    text-decoration: none;
    white-space: nowrap;
}

.sanctuaire-dru-mail:hover,
.sanctuaire-dru-mail:focus {
    color: var(--grad-2);
    background: var(--deep);
    text-decoration: underline;
}

.rg-mark {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--advisory);
    color: var(--fg);
    font-weight: var(--black);
    font-size: var(--tiny);
    letter-spacing: var(--spread);
    padding: 3px 9px;
    border-radius: var(--lozenge);
    text-decoration: none;
}

.rg-mark:hover,
.rg-mark:focus {
    background: var(--advisory);
    color: var(--blend-a);
}

/* riga principale */
.sanctuaire-dru-band {
    background: var(--lead);
}

.sanctuaire-dru-band .sanctuaire-dru-frame {
    display: flex;
    align-items: center;
    gap: var(--g-md);
    height: 50px;
}

/* marchio, cornice tonda (logoFrame = circle) */
.sanctuaire-dru-badge {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    background: var(--above);
    color: var(--fg);
    border: var(--light) solid var(--line-strong);
    border-radius: var(--orb);
    padding: 4px 18px;
}

.sanctuaire-dru-badge-image {
    display: block;
    height: 32px;
    width: auto;
    flex-shrink: 0;
}

/* menu orizzontale (menuShape = groups, overflow = more-text) */
.sanctuaire-dru-links {
    flex: 0 0 auto;
    margin-inline: auto;
}

.sanctuaire-dru-chain {
    display: flex;
    align-items: center;
    list-style: none;
    gap: 14px;
}

.sanctuaire-dru-node {
    position: relative;
    display: flex;
}

.sanctuaire-dru-node[hidden] {
    display: none;
}

.sanctuaire-dru-path {
    display: inline-flex;
    align-items: center;
    height: 44px;
    padding: 0 6px;
    color: var(--fg);
    background: var(--lead);
    font-family: var(--heading);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: var(--base);
    text-transform: uppercase;
    white-space: nowrap;
    border-top: var(--heavy) solid transparent;
    transition: color var(--t-normal) var(--out), transform var(--quick) var(--out);
}

.sanctuaire-dru-path:hover,
.sanctuaire-dru-path:focus {
    color: var(--blend-a);
    background: var(--lead);
    transform: translateY(-2px);
}

.sanctuaire-dru-path[aria-current='page'] {
    color: var(--blend-a);
    background: var(--lead);
    border-top-color: var(--zest);
}

/* pulsanti dei gruppi tematici e del blocco «altro» */
.sanctuaire-dru-group-btn,
.sanctuaire-dru-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 44px;
    padding: 0 6px;
    border: 0;
    border-top: var(--heavy) solid transparent;
    background: var(--lead);
    color: var(--fg);
    font-family: var(--heading);
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--t-normal) var(--out), transform var(--quick) var(--out);
}

.sanctuaire-dru-group-btn:hover,
.sanctuaire-dru-more-btn:hover,
.sanctuaire-dru-group-btn:focus,
.sanctuaire-dru-more-btn:focus {
    color: var(--blend-a);
    background: var(--lead);
    transform: translateY(-2px);
}

.sanctuaire-dru-arrow {
    display: block;
    width: 7px;
    height: 7px;
    border-right: var(--mid) solid currentColor;
    border-bottom: var(--mid) solid currentColor;
    transform: rotate(45deg) translateY(-2px);
}

.sanctuaire-dru-group-pane,
.sanctuaire-dru-more-pane {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 70;
    display: none;
    min-width: 232px;
    max-height: 68vh;
    overflow-y: auto;
    list-style: none;
    padding: var(--g-2xs) 0;
    background: var(--above);
    color: var(--fg);
    border: var(--light) solid var(--line-strong);
    border-radius: var(--r-md);
    box-shadow: var(--d-lg);
}

.sanctuaire-dru-more-pane {
    left: auto;
    right: 0;
}

.sanctuaire-dru-group-pane.is-open,
.sanctuaire-dru-more-pane.is-open {
    display: block;
}

.sanctuaire-dru-leaf {
    display: block;
}

.sanctuaire-dru-inpath {
    display: block;
    padding: 10px var(--g-sm);
    color: var(--fg);
    background: var(--above);
    font-family: var(--heading);
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    white-space: nowrap;
}

.sanctuaire-dru-inpath:hover,
.sanctuaire-dru-inpath:focus {
    color: var(--ink);
    background: var(--blend-a);
}

/* pulsante che apre il pannello mobile */
.sanctuaire-dru-menu-tap {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 46px;
    height: 44px;
    margin-left: auto;
    padding: 0 10px;
    border: 0;
    background: var(--lead);
    color: var(--fg);
    cursor: pointer;
}

.sanctuaire-dru-lines {
    display: block;
    width: 100%;
    height: var(--heavy);
    background: var(--blend-a);
    border-radius: var(--lozenge);
}

/* pannello mobile: elenco piatto di tutte le voci */
.sanctuaire-dru-tray {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 80;
    max-height: 74vh;
    overflow-y: auto;
    background: var(--above);
    color: var(--fg);
    border-top: var(--heavy) solid var(--zest);
    box-shadow: var(--d-xl);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    transition: opacity var(--t-normal) var(--out), transform var(--t-normal) var(--out), visibility var(--t-normal) var(--out);
}

.sanctuaire-dru-tray.is-open {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.sanctuaire-dru-tray-chain {
    list-style: none;
    padding: var(--g-2xs) 0 var(--g-sm);
}

.sanctuaire-dru-tray-node {
    display: block;
}

.sanctuaire-dru-tray-path {
    display: block;
    padding: 13px var(--pad-lg);
    color: var(--fg);
    background: var(--above);
    font-family: var(--heading);
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    border-bottom: var(--light) solid var(--line-strong);
}

.sanctuaire-dru-tray-path:hover,
.sanctuaire-dru-tray-path:focus,
.sanctuaire-dru-tray-path[aria-current='page'] {
    color: var(--ink);
    background: var(--blend-a);
}

/* blocco del pulsante offerta */
.sanctuaire-dru-deck {
    display: flex;
    align-items: center;
    gap: var(--g-xs);
    flex-shrink: 0;
    margin-left: auto;
}

/* ============================================================
   Briciole di pane — BREAD-01 (barra sottile con barre oblique)
   ============================================================ */
.prie-dieu-lumineux {
    background: var(--lead);
    padding-block: var(--g-xs);
}

.prie-dieu-lumineux-body {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: var(--caption);
}

.prie-dieu-lumineux-path {
    color: var(--subtle);
    background: var(--lead);
}

.prie-dieu-lumineux-path:hover,
.prie-dieu-lumineux-path:focus {
    color: var(--blend-a);
    background: var(--lead);
}

.prie-dieu-lumineux-slash {
    color: var(--subtle);
    background: var(--lead);
    opacity: 0.55;
}

.prie-dieu-lumineux-here {
    color: var(--fg);
    background: var(--lead);
}

/* ============================================================
   Primo schermo — HERO-01 (cinematografico a tutta larghezza)
   ============================================================ */
.tribune-large {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: clamp(520px, calc(100vh - var(--h-pad)), 720px);
    background: var(--ink);
    color: var(--fg);
    overflow: hidden;
}

.tribune-large-slim {
    min-height: clamp(360px, 52vh, 470px);
}

.tribune-large-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    z-index: 1;
}

.tribune-large-veil {
    position: absolute;
    inset: 0;
    z-index: 2;
    background-image: linear-gradient(to bottom, rgba(4, 20, 42, 0.2) 0%, rgba(4, 20, 42, 0.78) 62%, rgba(6, 31, 59, 0.96) 100%);
}

.tribune-large-inside {
    position: relative;
    z-index: 3;
    width: 100%;
    padding-block: var(--g-xl) var(--g-lg);
}

.tribune-large-eyebrow {
    display: inline-block;
    margin-bottom: var(--g-xs);
    padding: 5px 12px;
    background: var(--zest);
    color: var(--ink);
    font-size: var(--tiny);
    font-weight: var(--black);
    letter-spacing: var(--spread);
    text-transform: uppercase;
    border-radius: var(--lozenge);
}

.tribune-large-caption {
    max-width: 15ch;
    font-size: var(--display-1);
    text-transform: uppercase;
    color: var(--fg);
}

.tribune-large-caption em {
    font-style: normal;
    color: var(--blend-a);
}

.tribune-large-subtitle {
    max-width: var(--brief);
    margin-top: var(--g-sm);
    color: var(--fg);
    font-size: var(--sm-2);
    line-height: var(--regular);
}

.tribune-large-note {
    margin-top: var(--g-xs);
    color: var(--subtle);
    font-size: var(--caption);
}

.tribune-large-deck {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--g-xs);
    margin-top: var(--g-md);
}

.tribune-large-goto {
    display: inline-flex;
    align-items: center;
    height: 48px;
    padding: 0 var(--g-sm);
    background: transparent;
    color: var(--fg);
    border: var(--mid) solid var(--fg);
    border-radius: var(--r-md);
    font-family: var(--heading);
    font-size: var(--xs-2);
    font-weight: var(--black);
    letter-spacing: var(--spread);
    text-transform: uppercase;
    transition: background var(--t-normal) var(--out), color var(--t-normal) var(--out);
}

.tribune-large-goto:hover,
.tribune-large-goto:focus {
    background: var(--fg);
    color: var(--ink);
}

/* ============================================================
   Intestazione di pagina — PHEAD-01
   ============================================================ */
.garde-corps-grand {
    background: var(--sheet);
    border-bottom: var(--light) solid var(--line-strong);
    padding-block: var(--sec-y);
}

.garde-corps-grand-body {
    display: flex;
    flex-direction: column;
    gap: var(--g-xs);
}

.garde-corps-grand-eyebrow {
    color: var(--zest);
    background: var(--sheet);
    font-size: var(--caption);
    font-weight: var(--half);
    letter-spacing: var(--spread);
    text-transform: uppercase;
}

.garde-corps-grand-caption {
    color: var(--fg);
    font-size: var(--display-1);
}

.garde-corps-grand-divider {
    width: 60px;
    height: var(--heavy);
    background: var(--zest);
}

.garde-corps-grand-subtitle {
    color: var(--subtle);
    background: var(--sheet);
    font-size: var(--sm-2);
    line-height: var(--regular);
    margin: 0;
}

/* ============================================================
   Testo lungo — PROSE-04 (capolettera)
   ============================================================ */
.hypostyle-moderne {
    background: var(--sheet);
    padding-block: var(--sec-y);
}

.hypostyle-moderne-part {
    margin-bottom: var(--g-md);
}

.hypostyle-moderne-caption {
    font-size: var(--display-2);
    color: var(--fg);
    text-align: start;
    margin-block-start: var(--g-md);
    margin-block-end: var(--g-sm);
}

.hypostyle-moderne-part:first-child .hypostyle-moderne-caption {
    margin-block-start: 0;
}

.hypostyle-moderne-para {
    color: var(--fg);
    background: var(--sheet);
    font-size: var(--normal);
    line-height: var(--roomy);
}

.hypostyle-moderne-part > .hypostyle-moderne-para:first-of-type::first-letter {
    float: left;
    font-family: var(--heading);
    font-size: 3.4em;
    font-weight: var(--black);
    line-height: 0.86;
    color: var(--zest);
    background: var(--above);
    border-radius: var(--r-sm);
    padding: 8px 14px;
    margin: 4px 14px 2px 0;
}

.hypostyle-moderne-para strong {
    color: var(--blend-a);
    font-weight: var(--half);
}

.hypostyle-moderne-para a,
.hypostyle-moderne-chain a {
    color: var(--zest);
    background: var(--sheet);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.hypostyle-moderne-para a:hover,
.hypostyle-moderne-chain a:hover,
.hypostyle-moderne-para a:focus,
.hypostyle-moderne-chain a:focus {
    color: var(--blend-a);
    background: var(--sheet);
}

.hypostyle-moderne-chain {
    list-style: none;
    margin: 0 0 var(--g-sm);
    color: var(--fg);
}

.hypostyle-moderne-unit {
    position: relative;
    padding-left: var(--g-sm);
    margin-bottom: 10px;
    line-height: var(--roomy);
    color: var(--fg);
    background: var(--sheet);
}

.hypostyle-moderne-unit::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    width: 8px;
    height: 8px;
    background: var(--zest);
    border-radius: var(--r-2xs);
}

.hypostyle-moderne-ranked {
    list-style: decimal;
    padding-left: var(--g-sm);
    margin: 0 0 var(--g-sm);
}

.hypostyle-moderne-ranked > li {
    margin-bottom: 10px;
    line-height: var(--roomy);
    color: var(--fg);
    background: var(--sheet);
    padding-left: 4px;
}

.hypostyle-moderne-ranked > li::marker {
    color: var(--zest);
    font-weight: var(--black);
}

.hypostyle-moderne-unit strong,
.hypostyle-moderne-ranked strong {
    color: var(--blend-a);
    font-weight: var(--half);
}

/* figure interne alle pagine */
.wz-figure {
    margin: 0 0 var(--g-md);
}

.wz-figure-image {
    display: block;
    width: 100%;
    height: auto;
    max-height: 380px;
    object-fit: cover;
    border-radius: var(--r-lg);
    border: var(--light) solid var(--line-strong);
}

.wz-figure-tall .wz-figure-image {
    max-height: 460px;
}

.wz-figure-note {
    margin-top: var(--g-2xs);
    color: var(--subtle);
    background: var(--sheet);
    font-size: var(--caption);
}

/* richiamo all'offerta dentro il testo */
.wz-lure {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--g-sm);
    margin: var(--g-md) 0;
    padding: var(--g-sm) var(--g-md);
    background: var(--above);
    color: var(--fg);
    border-left: var(--r-xs) solid var(--zest);
    border-radius: var(--r-md);
}

.wz-lure-para {
    flex: 1 1 260px;
    margin: 0;
    color: var(--fg);
    background: var(--above);
    font-size: var(--caption);
}

.wz-lure-para strong {
    color: var(--blend-a);
    background: var(--above);
}

/* ============================================================
   Schede di valore — GRID-01 (tre colonne con bordo)
   ============================================================ */
.cellule-dense {
    background: var(--sheet);
    padding-block: var(--sec-y);
}

.cellule-dense-caption {
    font-size: var(--display-2);
    color: var(--fg);
    margin-bottom: var(--g-md);
}

.cellule-dense-chain {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--g-md);
    list-style: none;
}

.cellule-dense-unit {
    position: relative;
    padding: var(--g-md);
    background: var(--above);
    color: var(--fg);
    border: var(--light) solid var(--line-strong);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: border-color var(--t-normal) var(--out);
}

.cellule-dense-unit::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 4px;
    background: var(--zest);
    transition: width var(--t-normal) var(--out);
}

.cellule-dense-unit:hover {
    border-color: var(--zest);
}

.cellule-dense-unit:hover::after {
    width: 100%;
}

.cellule-dense-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin-bottom: var(--g-xs);
    background: var(--zest);
    color: var(--ink);
    border-radius: var(--r-md);
}

.cellule-dense-glyph svg {
    width: 21px;
    height: 21px;
    fill: currentColor;
}

.cellule-dense-unit-caption {
    font-size: var(--h4);
    color: var(--fg);
    margin-bottom: var(--g-2xs);
}

.cellule-dense-unit-para {
    color: var(--subtle);
    background: var(--above);
    font-size: var(--normal);
    line-height: var(--regular);
}

/* ============================================================
   Tabella dei dati — TABLE-08 (schede al posto di <table>)
   ============================================================ */
.estafette-etroit {
    background: var(--lead);
    padding-block: var(--sec-y);
}

.estafette-etroit-caption {
    font-size: var(--display-2);
    color: var(--fg);
    margin-bottom: var(--g-md);
}

.estafette-etroit-chain {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--g-sm);
    list-style: none;
}

.estafette-etroit-tile {
    display: flex;
    flex-direction: column;
    gap: var(--g-xs);
    padding: var(--g-md);
    background: var(--above);
    color: var(--fg);
    border-radius: var(--r-lg);
    border: var(--light) solid var(--line-strong);
}

.estafette-etroit-line {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.estafette-etroit-tag {
    color: var(--subtle);
    background: var(--above);
    font-size: var(--tiny);
    letter-spacing: var(--spread);
    text-transform: uppercase;
}

.estafette-etroit-value {
    color: var(--fg);
    background: var(--above);
    font-size: var(--normal);
    font-weight: var(--half);
    line-height: var(--regular);
}

.estafette-etroit-value strong {
    color: var(--blend-a);
    background: var(--above);
}

/* ============================================================
   Opinioni — REV-08 (schede con iniziale nel tondo)
   ============================================================ */
.guéridon-etroit {
    background: var(--sheet);
    padding-block: var(--sec-y);
}

.guéridon-etroit-caption {
    font-size: var(--display-2);
    color: var(--fg);
    margin-bottom: var(--g-md);
}

.guéridon-etroit-chain {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--g-md);
    list-style: none;
}

.guéridon-etroit-unit {
    display: flex;
    flex-direction: column;
    gap: var(--g-xs);
    padding: var(--g-md);
    background: var(--above);
    color: var(--fg);
    border-radius: var(--r-lg);
    border: var(--light) solid var(--line-strong);
}

.guéridon-etroit-band {
    display: flex;
    align-items: center;
    gap: var(--g-xs);
}

.guéridon-etroit-initial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    background: var(--zest);
    color: var(--ink);
    border-radius: var(--orb);
    font-family: var(--heading);
    font-size: var(--sm-2);
    font-weight: var(--black);
}

.guéridon-etroit-signature {
    display: block;
    color: var(--fg);
    background: var(--above);
    font-family: var(--heading);
    font-size: var(--sm-2);
    font-weight: var(--half);
}

.guéridon-etroit-score {
    display: block;
    color: var(--blend-a);
    background: var(--above);
    font-size: var(--caption);
    letter-spacing: 1px;
}

.guéridon-etroit-quote {
    margin: 0;
    color: var(--subtle);
    background: var(--above);
    font-size: var(--normal);
    line-height: var(--regular);
}

/* ============================================================
   Domande frequenti — FAQ-08 (cornice unica con barra indicatrice)
   ============================================================ */
.console-voile {
    background: var(--lead);
    padding-block: var(--sec-y);
}

.console-voile-caption {
    font-size: var(--display-2);
    color: var(--fg);
    margin-bottom: var(--g-md);
}

.console-voile-frame {
    padding: var(--g-md);
    background: var(--above);
    color: var(--fg);
    border: var(--light) solid var(--line-strong);
    border-radius: var(--r-lg);
}

.console-voile-chain {
    list-style: none;
}

.console-voile-unit {
    box-shadow: inset 4px 0 0 var(--zest);
    border-bottom: var(--light) solid var(--line-strong);
    padding-left: var(--g-sm);
}

.console-voile-unit:last-child {
    border-bottom: 0;
}

.console-voile-ask {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--g-sm);
    padding-block: var(--g-xs);
    cursor: pointer;
    list-style: none;
}

.console-voile-ask::-webkit-details-marker {
    display: none;
}

.console-voile-query {
    font-size: var(--h4);
    color: var(--fg);
    font-weight: var(--half);
}

.console-voile-sign {
    display: block;
    width: 10px;
    height: 10px;
    border-right: var(--mid) solid var(--zest);
    border-bottom: var(--mid) solid var(--zest);
    transform: rotate(45deg);
}

.console-voile-unit[open] .console-voile-sign {
    transform: rotate(-135deg);
}

.console-voile-answer {
    margin: 0;
    padding-block: 0 var(--g-sm);
    color: var(--subtle);
    background: var(--above);
    font-size: var(--normal);
    line-height: var(--roomy);
}

/* ============================================================
   Richiamo finale — CTA-04 (collegamento testuale essenziale)
   ============================================================ */
.gardien-raffine {
    background: var(--sheet);
    padding-block: var(--sec-y);
    text-align: center;
}

.gardien-raffine-caption {
    font-size: var(--h4);
    color: var(--fg);
}

.gardien-raffine-para {
    margin-block: var(--g-sm);
    margin-inline: auto;
    color: var(--subtle);
    background: var(--sheet);
    font-size: var(--normal);
    line-height: var(--roomy);
}

.gardien-raffine-note {
    margin-top: var(--g-xs);
    color: var(--subtle);
    background: var(--sheet);
    font-size: var(--tiny);
}

.gardien-raffine-deck {
    display: flex;
    justify-content: center;
}

/* ============================================================
   Pagine legali — LEGAL-02 (sezioni numerate)
   ============================================================ */
.catafalque-brut {
    background: var(--sheet);
    padding-block: var(--sec-y);
}

.catafalque-brut-body {
    counter-reset: legal-part;
}

.catafalque-brut-part {
    counter-increment: legal-part;
    margin-bottom: var(--g-md);
}

.catafalque-brut-caption {
    font-size: var(--lg-2);
    color: var(--fg);
    margin-block-end: var(--g-xs);
}

.catafalque-brut-caption::before {
    content: counter(legal-part) '. ';
    color: var(--zest);
    font-family: var(--heading);
    font-weight: var(--black);
    margin-right: var(--g-2xs);
}

.catafalque-brut-para {
    padding-left: var(--g-md);
    color: var(--fg);
    background: var(--sheet);
    font-size: var(--normal);
    line-height: var(--roomy);
}

.catafalque-brut-aside {
    margin-top: var(--g-md);
    padding: var(--g-md);
    background: var(--above);
    color: var(--fg);
    border-radius: var(--r-lg);
    border: var(--light) solid var(--line-strong);
}

.catafalque-brut-aside-caption {
    font-size: var(--h4);
    color: var(--fg);
    margin-bottom: var(--g-xs);
}

.catafalque-brut-chain {
    list-style: none;
}

.catafalque-brut-unit {
    position: relative;
    padding-left: var(--g-sm);
    margin-bottom: var(--g-2xs);
    color: var(--fg);
    background: var(--above);
    line-height: var(--regular);
}

.catafalque-brut-unit::before {
    content: '';
    position: absolute;
    left: 0;
    top: 9px;
    width: 8px;
    height: 8px;
    background: var(--zest);
    border-radius: var(--r-2xs);
}

.catafalque-brut-unit a {
    color: var(--zest);
    background: var(--above);
    text-decoration: underline;
}

.catafalque-brut-unit a:hover,
.catafalque-brut-unit a:focus {
    color: var(--blend-a);
    background: var(--above);
}

.catafalque-brut-fineprint {
    margin-top: var(--g-md);
    color: var(--subtle);
    background: var(--sheet);
    font-size: var(--caption);
    line-height: var(--regular);
}

/* ============================================================
   Modulo contatti — FORM-06 (etichette flottanti)
   ============================================================ */
.chasse-classique {
    background: var(--lead);
    padding-block: var(--sec-y);
}

.chasse-classique-caption {
    font-size: var(--display-2);
    color: var(--fg);
    margin-bottom: var(--g-sm);
}

.chasse-classique-form {
    display: flex;
    flex-direction: column;
    gap: var(--g-sm);
    max-width: 720px;
}

.chasse-classique-line {
    position: relative;
}

.chasse-classique-input,
.chasse-classique-area {
    width: 100%;
    padding: 26px var(--g-sm) 10px;
    background: var(--above);
    color: var(--fg);
    border: var(--light) solid var(--line-strong);
    border-radius: var(--r-md);
    font-family: var(--text);
    font-size: var(--normal);
}

.chasse-classique-area {
    min-height: 132px;
    resize: vertical;
}

.chasse-classique-input:focus,
.chasse-classique-area:focus {
    outline: var(--mid) solid var(--zest);
    outline-offset: 1px;
}

.chasse-classique-tag {
    position: absolute;
    top: 50%;
    left: var(--g-sm);
    transform: translateY(-50%);
    color: var(--subtle);
    font-size: var(--normal);
    pointer-events: none;
    transition: top var(--t-normal) var(--out), font-size var(--t-normal) var(--out);
}

.chasse-classique-area + .chasse-classique-tag {
    top: 26px;
    transform: none;
}

.chasse-classique-input:focus + .chasse-classique-tag,
.chasse-classique-input:not(:placeholder-shown) + .chasse-classique-tag,
.chasse-classique-area:focus + .chasse-classique-tag,
.chasse-classique-area:not(:placeholder-shown) + .chasse-classique-tag {
    top: 9px;
    transform: none;
    font-size: var(--tiny);
    color: var(--zest);
}

.chasse-classique-send {
    align-self: flex-start;
    min-height: 48px;
    padding: 0 var(--g-md);
    background: var(--zest);
    color: var(--ink);
    border: 0;
    border-radius: var(--r-md);
    font-family: var(--heading);
    font-size: var(--xs-2);
    font-weight: var(--black);
    letter-spacing: var(--spread);
    text-transform: uppercase;
    cursor: pointer;
    transition: background var(--t-normal) var(--out);
}

.chasse-classique-send:hover,
.chasse-classique-send:focus {
    background: var(--accent-strong);
    color: var(--ink);
}

.chasse-classique-done {
    display: none;
    margin-top: var(--g-sm);
    padding: var(--g-sm) var(--g-md);
    background: var(--zest);
    color: var(--ink);
    border-radius: var(--r-md);
    font-weight: var(--half);
}

.chasse-classique-done.is-shown {
    display: block;
}

.chasse-classique-hint {
    margin: 0 0 var(--g-sm);
    color: var(--subtle);
    background: var(--lead);
    font-size: var(--normal);
    line-height: var(--roomy);
}

/* ============================================================
   Firma dell'autrice — BYLINE-05 (fascia orizzontale)
   ============================================================ */
.verriere-secret {
    display: block;
    background: var(--lead);
    padding-block: var(--g-md);
    border-block: var(--light) solid var(--line-strong);
}

.verriere-secret-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--g-md);
}

.verriere-secret-who {
    display: flex;
    align-items: center;
    gap: var(--g-xs);
}

.verriere-secret-photo {
    width: 56px;
    height: 56px;
    border-radius: var(--orb);
    object-fit: cover;
    flex-shrink: 0;
}

.verriere-secret-signature {
    color: var(--fg);
    background: var(--lead);
    font-family: var(--heading);
    font-size: var(--sm-2);
    font-weight: var(--black);
}

.verriere-secret-signature a {
    color: var(--fg);
    background: var(--lead);
}

.verriere-secret-signature a:hover,
.verriere-secret-signature a:focus {
    color: var(--blend-a);
    background: var(--lead);
}

.verriere-secret-post {
    color: var(--subtle);
    background: var(--lead);
    font-size: var(--caption);
}

.verriere-secret-pitch {
    display: inline-flex;
    align-items: center;
    padding: 10px var(--g-sm);
    background: var(--lead);
    color: var(--zest);
    border: var(--light) solid var(--zest);
    border-radius: var(--r-md);
    font-size: var(--caption);
    font-weight: var(--half);
    white-space: nowrap;
    transition: background var(--t-normal) var(--out), color var(--t-normal) var(--out);
}

.verriere-secret-pitch:hover,
.verriere-secret-pitch:focus {
    background: var(--zest);
    color: var(--ink);
}

/* ============================================================
   Scheda dell'autrice — AUTH-07 (citazione con ritratto)
   ============================================================ */
.credence-haut {
    background: var(--sheet);
    padding-block: var(--sec-y);
}

.credence-haut-tile {
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr);
    gap: var(--g-md);
    padding: var(--g-md);
    background: var(--above);
    color: var(--fg);
    border-left: var(--r-xs) solid var(--zest);
    border-radius: var(--r-md);
}

.credence-haut-photo {
    width: 100px;
    height: 100px;
    border-radius: var(--orb);
    object-fit: cover;
}

.credence-haut-side {
    display: flex;
    flex-direction: column;
    gap: var(--g-2xs);
}

.credence-haut-glyph {
    font-family: var(--heading);
    font-size: 44px;
    line-height: 0.7;
    color: var(--zest);
    background: var(--above);
}

.credence-haut-quote {
    margin: 0;
    color: var(--fg);
    background: var(--above);
    font-size: var(--sm-2);
    font-style: italic;
    line-height: var(--regular);
}

.credence-haut-signature {
    color: var(--subtle);
    background: var(--above);
    font-size: var(--caption);
    letter-spacing: var(--spread);
}

.credence-haut-articles {
    display: block;
    margin-top: var(--g-md);
}

.credence-haut-articles-caption {
    font-size: var(--h4);
    color: var(--fg);
    margin-bottom: var(--g-xs);
}

.credence-haut-articles-chain {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--g-xs);
    list-style: none;
}

.credence-haut-articles-unit {
    display: block;
}

.credence-haut-articles-path {
    display: block;
    padding: var(--g-xs) var(--g-sm);
    background: var(--above);
    color: var(--fg);
    border: var(--light) solid var(--line-strong);
    border-radius: var(--r-md);
    font-size: var(--normal);
    transition: border-color var(--t-normal) var(--out), color var(--t-normal) var(--out);
}

.credence-haut-articles-path:hover,
.credence-haut-articles-path:focus {
    border-color: var(--zest);
    color: var(--blend-a);
    background: var(--above);
}

.credence-haut-skills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--g-2xs);
    margin-top: var(--g-xs);
    list-style: none;
}

.credence-haut-skill {
    padding: 4px 11px;
    background: var(--lead);
    color: var(--subtle);
    border-radius: var(--lozenge);
    font-size: var(--tiny);
}

/* ============================================================
   Blocco 404 — ERR-08 (con suggerimenti di navigazione)
   ============================================================ */
.ciboire-etroit {
    background: var(--sheet);
    padding-block: var(--g-xl);
}

.ciboire-etroit-caption {
    max-width: var(--brief);
    font-size: var(--display-2);
    color: var(--fg);
}

.ciboire-etroit-para {
    margin-top: var(--g-sm);
    color: var(--subtle);
    background: var(--sheet);
    font-size: var(--sm-2);
    line-height: var(--regular);
}

.ciboire-etroit-goto {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    margin-top: var(--g-sm);
    padding: 0 var(--g-md);
    background: var(--zest);
    color: var(--ink);
    border-radius: var(--r-md);
    font-family: var(--heading);
    font-size: var(--xs-2);
    font-weight: var(--black);
    letter-spacing: var(--spread);
    text-transform: uppercase;
}

.ciboire-etroit-goto:hover,
.ciboire-etroit-goto:focus {
    background: var(--accent-strong);
    color: var(--ink);
}

.ciboire-etroit-hints {
    margin-top: var(--g-md);
    padding: var(--g-md);
    background: var(--above);
    color: var(--fg);
    border-radius: var(--r-lg);
    border: var(--light) solid var(--line-strong);
}

.ciboire-etroit-hints-caption {
    font-family: var(--heading);
    font-weight: var(--black);
    line-height: var(--tight);
    font-size: var(--h4);
    color: var(--fg);
    margin-bottom: var(--g-xs);
}

.ciboire-etroit-chain {
    display: flex;
    flex-wrap: wrap;
    gap: var(--g-xs);
    list-style: none;
}

.ciboire-etroit-leaf {
    display: block;
}

.ciboire-etroit-path {
    display: inline-flex;
    padding: 7px var(--g-xs);
    background: var(--lead);
    color: var(--zest);
    border-radius: var(--lozenge);
    font-size: var(--caption);
}

.ciboire-etroit-path:hover,
.ciboire-etroit-path:focus {
    background: var(--zest);
    color: var(--ink);
}

/* ============================================================
   Fascia dei biscotti — COOK-04 (sale dal basso, con velo)
   ============================================================ */
.veilleur-large-scrim {
    position: fixed;
    inset: 0;
    z-index: 89;
    display: none;
    background: rgba(3, 12, 26, 0.45);
    pointer-events: none;
}

.veilleur-large-scrim.is-open {
    display: block;
}

.veilleur-large {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    background: var(--above);
    color: var(--fg);
    border-top: var(--r-xs) solid var(--zest);
    visibility: hidden;
    transform: translateY(106%);
}

.veilleur-large.is-open {
    visibility: visible;
    transform: translateY(0);
    animation: veilleur-rise var(--long) var(--out) both;
}

@keyframes veilleur-rise {
    from {
        clip-path: inset(100% 0 0 0);
        opacity: 0;
    }
    to {
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }
}

.veilleur-large-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--g-xs);
    width: 100%;
    max-width: calc(var(--site) + 2 * var(--pad-lg));
    margin-inline: auto;
    padding: var(--g-sm) var(--pad-lg);
    text-align: center;
}

.veilleur-large-caption {
    font-family: var(--heading);
    font-weight: var(--black);
    line-height: var(--tight);
    font-size: var(--h4);
    color: var(--fg);
}

.veilleur-large-message {
    max-width: var(--brief);
    margin: 0;
    color: var(--subtle);
    background: var(--above);
    font-size: var(--caption);
    line-height: var(--regular);
}

.veilleur-large-deck {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--g-xs);
}

.veilleur-large-ok,
.veilleur-large-reject {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 var(--g-md);
    border: var(--light) solid var(--zest);
    border-radius: var(--r-md);
    font-family: var(--heading);
    font-size: var(--xs-2);
    font-weight: var(--black);
    letter-spacing: var(--spread);
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
}

.veilleur-large-ok {
    background: var(--zest);
    color: var(--ink);
}

.veilleur-large-ok:hover,
.veilleur-large-ok:focus {
    background: var(--accent-strong);
    color: var(--ink);
}

.veilleur-large-reject {
    background: var(--above);
    color: var(--zest);
}

.veilleur-large-reject:hover,
.veilleur-large-reject:focus {
    background: var(--lead);
    color: var(--blend-a);
}

/* ============================================================
   Piede — FOOT-06 (manifesto)
   ============================================================ */
.parterre-prime {
    background: var(--deep);
    color: var(--fg);
    padding-block: var(--g-lg);
    margin-top: auto;
}

.parterre-prime-manifesto {
    text-align: center;
}

.parterre-prime-statement {
    max-width: var(--brief);
    margin-inline: auto;
    font-size: var(--display-2);
    color: var(--fg);
}

.parterre-prime-pitch {
    display: inline-block;
    margin-top: var(--g-xs);
    color: var(--blend-a);
    background: var(--deep);
    font-family: var(--heading);
    font-size: var(--sm-2);
    font-weight: var(--half);
    letter-spacing: var(--spread);
    text-transform: uppercase;
    text-decoration: underline;
    text-underline-offset: 5px;
}

.parterre-prime-pitch:hover,
.parterre-prime-pitch:focus {
    color: var(--zest);
    background: var(--deep);
}

.parterre-prime-divider {
    height: var(--light);
    margin-block: var(--g-md);
    background: var(--line-strong);
}

.parterre-prime-detail {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--g-md);
    flex-wrap: wrap;
}

.parterre-prime-badge {
    display: inline-flex;
    flex-shrink: 0;
}

.parterre-prime-badge-image {
    display: block;
    height: 40px;
    width: auto;
}

.parterre-prime-links {
    min-width: 180px;
}

.parterre-prime-caption {
    color: var(--subtle);
    background: var(--deep);
    font-family: var(--heading);
    font-size: var(--tiny);
    font-weight: var(--half);
    letter-spacing: var(--spread);
    text-transform: uppercase;
    margin-bottom: var(--g-2xs);
}

.parterre-prime-chain {
    list-style: none;
}

.parterre-prime-node {
    display: block;
}

.parterre-prime-path {
    display: block;
    padding-block: 3px;
    color: var(--subtle);
    background: var(--deep);
    font-size: var(--caption);
}

.parterre-prime-path:hover,
.parterre-prime-path:focus {
    color: var(--blend-a);
    background: var(--deep);
}

.parterre-prime-legal {
    min-width: 180px;
}

.parterre-prime-small {
    display: block;
    width: 100%;
    color: var(--subtle);
    background: var(--deep);
    font-size: var(--tiny);
}

.rg-note {
    margin-top: var(--g-md);
    padding: var(--g-sm) var(--g-md);
    background: var(--advisory);
    color: var(--fg);
    border-radius: var(--r-md);
    font-size: var(--caption);
    line-height: var(--regular);
}

.rg-note a {
    color: var(--fg);
    background: var(--advisory);
    text-decoration: underline;
    font-weight: var(--half);
}

.rg-note a:hover,
.rg-note a:focus {
    color: var(--blend-a);
    background: var(--advisory);
}

/* ============================================================
   Schermi stretti (impostazione desktop-first)
   ============================================================ */
@media (max-width: 1180px) {
    .sanctuaire-dru-chain {
        gap: 10px;
    }

    .sanctuaire-dru-path,
    .sanctuaire-dru-group-btn,
    .sanctuaire-dru-more-btn {
        font-size: 14px;
        padding: 0 4px;
    }

    .cellule-dense-chain,
    .guéridon-etroit-chain {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 940px) {
    .sanctuaire-dru-links {
        display: none;
    }

    .sanctuaire-dru-menu-tap {
        display: flex;
    }

    .sanctuaire-dru-deck {
        margin-left: auto;
        order: 2;
    }

    .sanctuaire-dru-menu-tap {
        order: 3;
        margin-left: 0;
    }

    .sanctuaire-dru-band .sanctuaire-dru-frame {
        gap: var(--g-sm);
    }
}

@media (max-width: 820px) {
    .sanctuaire-dru-word {
        display: none;
    }

    .sanctuaire-dru-note {
        white-space: nowrap;
    }

    :root {
        --pad-lg: 20px;
        --display-1: clamp(28px, 8vw, 44px);
        --display-2: clamp(23px, 5.4vw, 32px);
        --lg-2: clamp(19px, 4vw, 24px);
        --h4: 18px;
        --sm-2: 14px;
        --xs-2: 12px;
        --normal: 14px;
        --caption: 12px;
        --tiny: 10px;
        --sec-y: 36px;
    }

    .tribune-large-caption {
        max-width: none;
    }

    .verriere-secret-body {
        flex-direction: column;
        align-items: flex-start;
    }

    .verriere-secret-pitch {
        width: 100%;
        justify-content: center;
    }

    .credence-haut-tile {
        grid-template-columns: minmax(0, 1fr);
    }

    .credence-haut-articles-chain {
        grid-template-columns: minmax(0, 1fr);
    }

    .parterre-prime-detail {
        flex-direction: column;
    }

    .catafalque-brut-para {
        padding-left: 0;
    }

    .hypostyle-moderne-part > .hypostyle-moderne-para:first-of-type::first-letter {
        font-size: 2.7em;
        padding: 6px 11px;
        margin-right: 11px;
    }
}

@media (max-width: 720px) {
    .veilleur-large-box {
        padding: 12px 14px !important;
        gap: 8px !important;
        font-size: 13px !important;
        line-height: 1.35 !important;
    }

    .veilleur-large-caption {
        display: none !important;
    }

    .veilleur-large-ok,
    .veilleur-large-reject {
        padding: 8px 14px !important;
        font-size: 12px !important;
        min-height: 40px !important;
    }
}

@media (max-width: 520px) {
    .cellule-dense-chain,
    .guéridon-etroit-chain,
    .estafette-etroit-chain {
        grid-template-columns: minmax(0, 1fr);
    }

    .sanctuaire-dru-tier .sanctuaire-dru-frame {
        gap: 10px;
    }

    .sanctuaire-dru-note {
        display: none;
    }

    .sanctuaire-dru-badge {
        padding: 3px 12px;
    }

    .sanctuaire-dru-badge-image {
        height: 26px;
    }

    .veilleur-large-deck {
        width: 100%;
        flex-direction: column;
    }

    .veilleur-large-ok,
    .veilleur-large-reject {
        width: 100%;
        white-space: normal;
    }

    .tribune-large-goto {
        width: 100%;
        justify-content: center;
    }

    .tribune-large-deck {
        flex-direction: column;
        align-items: stretch;
    }

    .tribune-large-deck .maaz-act,
    .gardien-raffine-deck .maaz-act {
        width: 100%;
    }
}

@media (max-width: 620px) {
    .sanctuaire-dru-band .sanctuaire-dru-frame {
        flex-wrap: wrap;
        height: auto;
        min-height: 50px;
        padding-block: 9px;
        row-gap: 10px;
    }

    .sanctuaire-dru-deck {
        flex-basis: 100%;
        margin-left: 0;
        order: 4;
    }

    .sanctuaire-dru-deck .maaz-act {
        width: 100%;
    }
}

@media (max-width: 430px) {
    .sanctuaire-dru-word {
        display: none;
    }
}

/* --- movimento ridotto ------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }

    [data-rise] {
        opacity: 1;
        transform: none;
    }
}

/* ============================================================
   Pulsante offerta — colore, forma e animazione da
   scripts/cta-style.mjs (dominio wazambapalace.online)
   ============================================================ */
.maaz-act {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    padding: 0 24px;
    border: 2px solid #04142A;
    border-radius: 999px;
    background: #16A34A;
    color: #04142A;
    text-decoration: none;
    font-family: var(--heading);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
    box-shadow: 5px 5px 0 #04142A;
    transition: background var(--quick) var(--out), color var(--quick) var(--out), transform var(--quick) var(--out), box-shadow var(--quick) var(--out);
}

@property --shine-maaz {
    syntax: '<percentage>';
    inherits: false;
    initial-value: -30%;
}

.maaz-act::after {
    content: '';
    position: absolute;
    inset: 0;
    width: 100%;
    transform: none;
    pointer-events: none;
    background: linear-gradient(100deg, transparent calc(var(--shine-maaz) - 22%), rgba(255, 255, 255, 0.42) var(--shine-maaz), transparent calc(var(--shine-maaz) + 22%));
    animation: shine_maaz 2.7s ease-in-out infinite;
}

@keyframes shine_maaz {
    0% {
        --shine-maaz: -30%;
    }
    48.148%,
    100% {
        --shine-maaz: 130%;
    }
}

.maaz-act:hover {
    background: #15803D;
    color: #FFFFFF;
    box-shadow: 3px 3px 0 #04142A;
    animation: none;
}

.maaz-act:hover::after {
    animation: none;
}

.maaz-act:active {
    background: #166534;
    color: #FFFFFF;
}

.maaz-act:focus-visible {
    outline: 3px solid #04142A;
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .maaz-act,
    .maaz-act::after {
        animation: none !important;
        transition: none !important;
    }
}

/* il pulsante nella riga della testata è più compatto della versione di pagina */
.sanctuaire-dru-deck .maaz-act {
    min-height: 44px;
    padding: 0 18px;
    box-shadow: 3px 3px 0 #04142A;
}

@media (max-width: 1620px) {
    .sanctuaire-dru-deck .maaz-act {
        padding: 0 14px;
        font-size: 12.5px;
        letter-spacing: 0.9px;
    }

    .sanctuaire-dru-chain {
        gap: 12px;
    }
}

@media (max-width: 1200px) {
    .sanctuaire-dru-deck .maaz-act {
        padding: 0 12px;
    }

    .sanctuaire-dru-badge-image {
        height: 28px;
    }
}

@media (max-width: 430px) {
    .sanctuaire-dru-deck .maaz-act {
        padding: 0 11px;
        font-size: 11.5px;
        letter-spacing: 0.6px;
        white-space: normal;
    }
}

@media (max-width: 979px) {
  .sanctuaire-dru-mail,
  .sanctuaire-dru-links,
  .sanctuaire-dru-chain,
  .sanctuaire-dru-path { display: none !important; }
  .sanctuaire-dru-menu-tap { display: flex !important; }
}