/* ==========================================================================
   Site public — identité « cristal » : verre dépoli, bords arrondis lumineux, boutons 3D,
   sélecteur de langue à drapeaux, réseaux sociaux, mouvements sobres.
   Règles : propriétés logiques (RTL natif) ; seules transform/opacity sont animées ;
   tout est désactivé par prefers-reduced-motion ; mode « lite » sans flou ni halo.
   Les couleurs viennent des jetons de thème (aucun hex en dur ici, hors drapeaux).
   ========================================================================== */

/* ---------- Fond : lumière diffuse fixe (aucune animation, donc aucun repaint au défilement) ---------- */
.public-body { position: relative; isolation: isolate; }
.public-body::before {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(48rem 32rem at 12% -6%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 70%),
        radial-gradient(42rem 30rem at 96% 18%, color-mix(in srgb, var(--accent-2) 14%, transparent), transparent 70%),
        radial-gradient(40rem 28rem at 40% 108%, color-mix(in srgb, var(--primary) 12%, transparent), transparent 70%);
}

/* ---------- Bord lumineux (anneau en dégradé, suit le rayon de la carte) ---------- */
.public-body .card, .public-body .site-header, .public-body .lang-list {
    --ring-a: var(--glass-highlight);
    --ring-b: color-mix(in srgb, var(--accent) 80%, transparent);
    --ring-c: color-mix(in srgb, var(--accent-2) 65%, transparent);
}
.public-body .card::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
    background: linear-gradient(135deg, var(--ring-a), var(--ring-b) 38%, transparent 62%, var(--ring-c));
    -webkit-mask: linear-gradient(black 0 0) content-box, linear-gradient(black 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    opacity: .75; transition: opacity var(--dur) var(--ease);
}
.public-body .card {
    border-color: transparent;
    /* Reflet qui suit le pointeur (variables posées par app.js ; repli : reflet haut-gauche) */
    --mx: 30%; --my: 0%;
}
.public-body .card::before {
    background:
        radial-gradient(220px circle at var(--mx) var(--my), var(--glass-highlight), transparent 65%),
        linear-gradient(160deg, var(--glass-highlight), transparent 38%);
    opacity: .5;
}
@media (hover: hover) {
    .public-body .card:hover { box-shadow:
        inset 0 1px 0 var(--glass-highlight),
        0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent),
        0 14px 30px rgb(var(--shadow-rgb) / .16),
        0 0 34px color-mix(in srgb, var(--accent) 28%, transparent); }
    .public-body .card:hover::after { opacity: 1; }
    .public-body .card:hover::before { opacity: .8; }
}
.card-media img, .gallery-item img { transition: transform 600ms var(--ease); }
@media (hover: hover) {
    .public-body .card:hover .card-media img, .gallery-item:hover img { transform: scale(1.04); }
}
.card-media, .gallery-item { overflow: hidden; }

/* ---------- En-tête de verre ---------- */
.public-body .site-header {
    background: color-mix(in srgb, var(--glass-bg) 88%, transparent);
    -webkit-backdrop-filter: blur(var(--blur)) saturate(160%); backdrop-filter: blur(var(--blur)) saturate(160%);
    border-block-end: 0;
    box-shadow: 0 1px 0 var(--ring-a), 0 10px 30px -18px rgb(var(--shadow-rgb) / .45);
}
.public-body .site-header::after { /* filet lumineux sous l'en-tête */
    content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; block-size: 1px; pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--ring-b) 25%, var(--ring-c) 75%, transparent); opacity: .8;
}
.public-body .site-header { position: sticky; }
.brand-link img { filter: drop-shadow(0 2px 6px rgb(var(--shadow-rgb) / .25)); }

/* ---------- Menu principal : boutons 3D ---------- */
.site-nav .nav-links { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.site-nav .btn-nav, .site-nav a.btn-nav {
    min-block-size: 38px; padding: .3rem .95rem; --btn-depth: 3px; font-size: var(--text-sm); font-weight: 600;
    border-radius: var(--radius-pill); border-width: 1px; padding-block: .3rem; color: var(--btn-fg);
}
.site-nav a.btn-nav[aria-current="page"] {
    --btn-bg: var(--primary); --btn-fg: var(--primary-on); --btn-edge: var(--primary-edge);
    box-shadow: inset 0 2px 4px rgb(0 0 0 / .22), 0 1px 0 var(--btn-edge), 0 0 18px color-mix(in srgb, var(--primary) 45%, transparent);
    transform: translateY(2px);
}
.site-nav a.btn-nav:hover { border-block-end-color: var(--btn-edge); } /* annule le soulignement des liens simples */

/* ---------- Sélecteur de langue (menu déroulant à drapeaux) ---------- */
.nav-tools { display: flex; align-items: center; gap: var(--space-3); }
.lang-menu { position: relative; }
.lang-menu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-2); }
.lang-menu > summary::-webkit-details-marker { display: none; }
.lang-menu > summary .icon { inline-size: 1em; block-size: 1em; transition: transform var(--dur) var(--ease); }
.lang-menu[open] > summary .icon { transform: rotate(180deg); }
.flag { inline-size: 24px; block-size: 16px; flex: none; border-radius: 3px; box-shadow: 0 0 0 1px rgb(var(--shadow-rgb) / .28), 0 1px 3px rgb(var(--shadow-rgb) / .25); }
.site-nav .lang-list {
    position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + 10px); z-index: 40; min-inline-size: 190px;
    list-style: none; margin: 0; padding: var(--space-2); display: grid; align-items: stretch; flex-wrap: nowrap; gap: 2px;
    background: color-mix(in srgb, var(--surface-solid) 90%, transparent); -webkit-backdrop-filter: blur(var(--blur)) saturate(160%); backdrop-filter: blur(var(--blur)) saturate(160%);
    border: 1px solid var(--line); border-radius: var(--radius-md);
    box-shadow: 0 18px 40px -10px rgb(var(--shadow-rgb) / .38), 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent), 0 0 26px color-mix(in srgb, var(--accent) 20%, transparent);
    transform-origin: top; animation: crystal-pop 160ms var(--ease);
}
.lang-list a {
    display: flex; align-items: center; gap: var(--space-3); min-block-size: 40px; padding: .3rem .7rem; border-radius: var(--radius-sm);
    color: var(--text); text-decoration: none; border: 0; transition: background-color var(--dur-fast) var(--ease);
}
.lang-list a:hover, .lang-list a:focus-visible { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.lang-list a[aria-current="true"] { background: color-mix(in srgb, var(--primary) 14%, transparent); font-weight: 700; }
.lang-list a[aria-current="true"]::after { content: "✓"; margin-inline-start: auto; color: var(--primary); }
.lang-code { font-weight: 700; letter-spacing: .02em; }

/* ---------- Réseaux sociaux ---------- */
.site-nav .social-links, .social-links { display: flex; gap: var(--space-2); list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.social-links a {
    display: grid; place-items: center; inline-size: 38px; block-size: 38px; border-radius: 50%;
    color: var(--text); background: var(--glass-bg); border: 1px solid var(--glass-border); text-decoration: none;
    box-shadow: inset 0 1px 0 var(--glass-highlight), 0 3px 0 var(--line), 0 6px 12px rgb(var(--shadow-rgb) / .16);
    transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.social-links .icon { inline-size: 19px; block-size: 19px; }
@media (hover: hover) {
    .social-links a:hover { transform: translateY(-2px); color: var(--primary);
        box-shadow: inset 0 1px 0 var(--glass-highlight), 0 5px 0 var(--line), 0 0 22px color-mix(in srgb, var(--accent) 45%, transparent); }
}
.social-links a:active { transform: translateY(2px); box-shadow: inset 0 2px 3px rgb(0 0 0 / .2), 0 1px 0 var(--line); }
.social-compact a { inline-size: 34px; block-size: 34px; }
.social-compact .icon { inline-size: 17px; block-size: 17px; }
.social-footer a { inline-size: 44px; block-size: 44px; }
.site-footer { position: relative; }
.site-footer::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; block-size: 1px; pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--ring-b, var(--accent)) 30%, var(--ring-c, var(--accent-2)) 70%, transparent); }

/* ---------- Hero : une seule entrée orchestrée au chargement ---------- */
@keyframes crystal-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes crystal-arch { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes crystal-pop { from { opacity: 0; transform: translateY(-6px) scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
    .hero-content > * { animation: crystal-rise 640ms var(--ease) both; }
    .hero-content > :nth-child(2) { animation-delay: 90ms; }
    .hero-content > :nth-child(3) { animation-delay: 180ms; }
    .hero-arch { animation: crystal-arch 800ms var(--ease) 120ms both; }
    .hero-arch { box-shadow: 0 30px 60px -24px rgb(var(--shadow-rgb) / .45), 0 0 46px color-mix(in srgb, var(--accent) 35%, transparent); }

    /* Apparition au défilement : seuls les blocs encore hors écran sont masqués (par app.js), puis révélés une fois. */
    .js-reveal { opacity: 0; transform: translateY(18px); }
    .js-reveal.is-in { opacity: 1; transform: none; transition: opacity 520ms var(--ease), transform 520ms var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }

    /* Transition douce entre deux pages (navigateurs compatibles ; ignoré ailleurs) */
    @view-transition { navigation: auto; }
    ::view-transition-old(root) { animation: 160ms ease-out both crystal-out; }
    ::view-transition-new(root) { animation: 260ms ease-out both crystal-in; }
}
@keyframes crystal-out { to { opacity: 0; } }
@keyframes crystal-in { from { opacity: 0; } }

/* ---------- Mobile : panneau du menu (opaque pour rester lisible sur le contenu) ---------- */
@media (max-width: 760px) {
    .public-body .site-header { position: sticky; }
    .site-nav { background: var(--surface-solid); box-shadow: 0 18px 30px -14px rgb(var(--shadow-rgb) / .35); gap: var(--space-4); }
    .site-nav .nav-links { flex-direction: column; align-items: stretch; }
    .site-nav a.btn-nav { justify-content: flex-start; min-block-size: var(--touch-min); }
    .site-nav .nav-tools { flex-direction: row; justify-content: space-between; align-items: center; }
    .site-nav .social-links { flex-direction: row; }
}

/* ---------- Appareils faibles / préférences ---------- */
[data-effects="lite"] .public-body::before { display: none; }
[data-effects="lite"] .public-body .card::before, [data-effects="lite"] .public-body .card::after { display: none; }
[data-effects="lite"] .public-body .site-header, [data-effects="lite"] .lang-list { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--surface-solid); }
[data-effects="lite"] .js-reveal { opacity: 1; transform: none; }
@media (prefers-reduced-transparency: reduce) {
    .public-body .site-header, .lang-list, .site-nav { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--surface-solid); }
}
@media (prefers-reduced-motion: reduce) {
    .js-reveal { opacity: 1 !important; transform: none !important; }
    .card-media img, .gallery-item img, .social-links a, .lang-menu > summary .icon { transition: none; }
    .lang-list { animation: none; }
}