/*
 * Feuille de style commune (site public + administration).
 * DaisyUI (vendor/daisyui/full.min.css) fournit les composants (navbar, card,
 * btn, alert, form-control...) et les couleurs de thème via des variables
 * OKLCH (--p, --s, --a, --n, --b1, --b2, --b3, --bc, ...). Ce fichier ajoute
 * uniquement ce que daisyUI ne fournit pas : mise en page (flex/grid),
 * espacements, et l'habillage "coloré/moderne" du site, en réutilisant les
 * variables du thème actif pour que tout reste cohérent si le thème change
 * depuis l'admin.
 */

/* Space Grotesk (auto-hébergée, sous-ensemble latin) : identité "Joffrey BEZIAT". */
@font-face {
    font-family: "Space Grotesk";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/vendor/fonts/space-grotesk/space-grotesk-latin.woff2") format("woff2");
}
@font-face {
    font-family: "Space Grotesk";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/vendor/fonts/space-grotesk/space-grotesk-latin.woff2") format("woff2");
}
@font-face {
    font-family: "Space Grotesk";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/vendor/fonts/space-grotesk/space-grotesk-latin.woff2") format("woff2");
}
@font-face {
    font-family: "Space Grotesk";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/vendor/fonts/space-grotesk/space-grotesk-latin.woff2") format("woff2");
}

/*
 * Thème DaisyUI custom "joffreybeziat" : dérivé directement du système de
 * logo (encre #14142B, fond clair #F4F4F3, spectre arc-en-ciel à 7 tons
 * représentant la diversité des applications). Valeurs converties en OKLCH
 * pour rester compatibles avec le format des autres thèmes DaisyUI.
 */
[data-theme="joffreybeziat"] {
    color-scheme: light;
    --p: 62.41% 0.2015 265.88;    /* primaire   - bleu   #4D7CFF */
    --pc: 20.49% 0.0451 281.67;
    --s: 61.13% 0.1996 301.79;    /* secondaire - violet #9B5DE5 */
    --sc: 20.49% 0.0451 281.67;
    --a: 75% 0.1668 50.54;        /* accent     - orange #FF8A3D */
    --ac: 20.49% 0.0451 281.67;
    --n: 20.49% 0.0451 281.67;    /* neutre     - encre  #14142B */
    --nc: 96.69% 0.0013 106.42;
    --b1: 96.69% 0.0013 106.42;   /* fond       - #F4F4F3 */
    --b2: 92.74% 0.0027 106.45;
    --b3: 88.78% 0.0027 106.45;
    --bc: 20.49% 0.0451 281.67;   /* texte      - encre  #14142B */
    --in: 75.9% 0.1247 204.83;    /* info       - cyan   #21C7D6 */
    --inc: 20.49% 0.0451 281.67;
    --su: 78.46% 0.1658 154.28;   /* succès     - vert   #4CD787 */
    --suc: 20.49% 0.0451 281.67;
    --wa: 87.89% 0.1617 90.94;    /* attention  - jaune  #FFD23F */
    --wac: 20.49% 0.0451 281.67;
    --er: 67.85% 0.2131 14.72;    /* erreur     - rouge  #FF4D6D */
    --erc: 20.49% 0.0451 281.67;
    --rounded-box: 1.25rem;
    --rounded-btn: 0.6rem;
    --rounded-badge: 1.9rem;
    --animation-btn: 0.25s;
    --animation-input: 0.2s;
    --btn-focus-scale: 0.98;
    --border-btn: 1px;
    --tab-border: 1px;
    --tab-radius: 0.5rem;
}

:root {
    --font-sans: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-8: 3rem;
    --radius-lg: 1.25rem;
    --shadow-soft: 0 10px 30px -12px oklch(var(--n) / 0.35);
    --ease-standard: cubic-bezier(.3, 0, .2, 1);
    /* Spectre "Joffrey BEZIAT" : dégradé lisse à 5 arrêts (identique au logo). */
    --brand-gradient: linear-gradient(90deg, #FF4D6D 0%, #FF8A3D 35%, #4CD787 55%, #21C7D6 78%, #9B5DE5 100%);
    --brand-ink: #14142B;
}

.brand-spectrum { display: flex; gap: 4px; }
.brand-spectrum span {
    display: block;
    width: 16px;
    height: 7px;
    border-radius: 2.5px;
}
.brand-spectrum span:nth-child(1) { background: #FF4D6D; }
.brand-spectrum span:nth-child(2) { background: #FF8A3D; }
.brand-spectrum span:nth-child(3) { background: #FFD23F; }
.brand-spectrum span:nth-child(4) { background: #4CD787; }
.brand-spectrum span:nth-child(5) { background: #21C7D6; }
.brand-spectrum span:nth-child(6) { background: #4D7CFF; }
.brand-spectrum span:nth-child(7) { background: #9B5DE5; }

.brand-mark { width: 34px; height: 34px; flex-shrink: 0; }

.footer-icon { width: 76px; height: 76px; }

* { box-sizing: border-box; }

html, body {
    min-height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    font-family: var(--font-sans);
    background: oklch(var(--b1));
    color: oklch(var(--bc));
}

img { max-width: 100%; display: block; }

/*
 * Échelle de titres de base : daisyUI neutralise h1-h6 (font-size/weight:
 * inherit) donc tout titre sans classe dédiée (support/privacy/404, "Captures
 * d'écran"...) retombait sinon au même gabarit qu'un paragraphe. Les classes
 * spécifiques (.hero-title, .app-detail-title, .admin-title...) gagnent
 * toujours par spécificité et ne sont pas affectées par ces règles de base.
 */
h1, h2, h3, h4 { font-weight: 700; line-height: 1.25; margin: 0 0 var(--space-3); }
h1 { font-size: clamp(1.5rem, 1.3rem + 1.2vw, 2rem); font-weight: 800; letter-spacing: -0.015em; }
h2 { font-size: 1.375rem; }
h3 { font-size: 1.125rem; }
h4 { font-size: 1rem; }

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

/* ---------------------------------------------------------------- */
/* Utilitaires de mise en page (l'équivalent minimal de Tailwind)     */
/* ---------------------------------------------------------------- */

.container {
    width: 100%;
    max-width: 1120px;
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }

.grid { display: grid; gap: var(--space-6); }

.prose { max-width: 640px; }
.prose :is(h1, h2, h3, h4) { margin-top: var(--space-6); margin-bottom: var(--space-2); }
.prose :is(h1, h2, h3, h4):first-child { margin-top: 0; }
.prose p { margin: 0 0 var(--space-4); line-height: 1.7; }
.prose ul, .prose ol { margin: 0 0 var(--space-4); padding-inline-start: 1.5rem; line-height: 1.7; }
.prose a { color: oklch(var(--p)); text-decoration: underline; }
.prose a:hover { color: oklch(var(--s)); }

/* ---------------------------------------------------------------- */
/* En-tête / navigation publique                                     */
/* ---------------------------------------------------------------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 30;
    background: oklch(var(--b1) / 0.85);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid oklch(var(--bc) / 0.08);
}

.site-navbar { gap: var(--space-4); min-height: 6rem; }

.nav-logo { display: inline-flex; align-items: center; width: 280px; max-width: 46vw; flex-shrink: 0; }
.nav-logo img { width: 100%; height: auto; display: block; }

.brand-word {
    font-size: 1.2rem;
    font-weight: 700;
    color: oklch(var(--bc));
    letter-spacing: -0.01em;
}

.nav-links { display: flex; align-items: center; gap: var(--space-5); }

.nav-link {
    text-decoration: none;
    color: oklch(var(--bc) / 0.75);
    font-weight: 600;
    padding: var(--space-1) var(--space-2);
    border-radius: 0.5rem;
    white-space: nowrap;
    transition: color .15s var(--ease-standard), background-color .15s var(--ease-standard);
}
.nav-link:hover { color: oklch(var(--bc)); background: oklch(var(--bc) / 0.06); }
.nav-link:focus-visible { outline: 2px solid oklch(var(--p)); outline-offset: 2px; }
.nav-link-active { color: oklch(var(--p)); }

.navbar-start, .navbar-end { display: flex; align-items: center; gap: var(--space-4); }
.navbar-end { margin-left: auto; }

.lang-switch { display: flex; gap: var(--space-1); border: 1px solid oklch(var(--bc) / 0.15); border-radius: 999px; padding: 2px; }
.lang-link {
    position: relative;
    text-decoration: none;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: oklch(var(--bc) / 0.6);
    padding: 4px 10px;
    border-radius: 999px;
    transition: color .15s var(--ease-standard), background-color .15s var(--ease-standard);
}
.lang-link::after { content: ""; position: absolute; inset: -8px -2px; }
.lang-link:hover { color: oklch(var(--bc) / 0.9); background: oklch(var(--bc) / 0.06); }
.lang-link:focus-visible { outline: 2px solid oklch(var(--p)); outline-offset: 2px; }
.lang-link-active { background: var(--brand-ink); color: #F4F4F3; }

.mobile-toggle {
    display: none;
    align-items: center; justify-content: center;
    min-width: 44px; min-height: 44px;
    background: none;
    border: 1px solid oklch(var(--bc) / 0.2);
    border-radius: 0.5rem;
    padding: 0;
    cursor: pointer;
    color: inherit;
    transition: background-color .15s var(--ease-standard), border-color .15s var(--ease-standard);
}
.mobile-toggle:hover { background: oklch(var(--bc) / 0.06); border-color: oklch(var(--bc) / 0.35); }
.mobile-toggle:focus-visible { outline: 2px solid oklch(var(--p)); outline-offset: 2px; }

.mobile-toggle-icon { position: relative; display: inline-block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .25s var(--ease-standard), background-color .2s ease; }
.mobile-toggle-icon::before, .mobile-toggle-icon::after {
    content: "";
    position: absolute;
    left: 0;
    width: 18px; height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform .25s var(--ease-standard);
}
.mobile-toggle-icon::before { top: -6px; }
.mobile-toggle-icon::after { top: 6px; }
.mobile-toggle[aria-expanded="true"] .mobile-toggle-icon { background: transparent; }
.mobile-toggle[aria-expanded="true"] .mobile-toggle-icon::before { transform: translateY(6px) rotate(45deg); }
.mobile-toggle[aria-expanded="true"] .mobile-toggle-icon::after { transform: translateY(-6px) rotate(-45deg); }

.nav-links-mobile {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-1);
    padding-inline: var(--space-4);
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transition: max-height .3s var(--ease-standard), opacity .22s ease, padding-block .3s ease, visibility 0s linear .3s;
}
.nav-links-mobile .nav-link { padding: var(--space-2); }
.nav-links-mobile.is-open {
    max-height: 240px;
    opacity: 1;
    visibility: visible;
    padding-block: var(--space-2) var(--space-4);
    transition-delay: 0s;
}

@media (max-width: 860px) {
    .nav-links-desktop { display: none; }
    .mobile-toggle { display: inline-flex; }
}
@media (min-width: 861px) {
    .nav-links-mobile { display: none !important; }
}

.flash-wrap { padding-top: var(--space-4); }

/* ---------------------------------------------------------------- */
/* Accueil / hero / grille d'applications                            */
/* ---------------------------------------------------------------- */

.hero-section {
    position: relative;
    padding: var(--space-8) 0 var(--space-6);
    text-align: center;
    overflow: hidden;
}
.hero-section::before {
    content: "";
    position: absolute;
    inset: -40% -10% auto -10%;
    height: 340px;
    background: var(--brand-gradient);
    filter: blur(70px);
    opacity: .35;
    z-index: -1;
}
.hero-title {
    font-size: clamp(2rem, 4vw + 1rem, 3.25rem);
    font-weight: 800;
    margin: 0 0 var(--space-3);
    line-height: 1.1;
    letter-spacing: -0.02em;
}
.hero-subtitle {
    font-size: 1.1rem;
    line-height: 1.6;
    color: oklch(var(--bc) / 0.7);
    max-width: 640px;
    margin-inline: auto;
}
.hero-spectrum { display: flex; justify-content: center; margin-top: var(--space-5); }
.hero-spectrum .brand-spectrum span { width: 24px; height: 8px; }

.apps-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 260px));
    justify-content: center;
    padding-block: var(--space-6) var(--space-8);
}

.app-card {
    background: oklch(var(--b2));
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--shadow-soft);
    transition: transform .18s var(--ease-standard), box-shadow .18s var(--ease-standard);
    border: 1px solid oklch(var(--bc) / 0.06);
}
.app-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px -14px oklch(var(--n) / 0.45); }
.app-card:focus-visible { transform: translateY(-6px); box-shadow: 0 20px 40px -14px oklch(var(--n) / 0.45); outline: 2px solid oklch(var(--p)); outline-offset: 4px; }

.app-card-media {
    height: 250px;
    background: var(--brand-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
}
.app-card-media img { width: 100%; height: 100%; object-fit: cover; }

.app-card-body { padding: var(--space-4); }
.app-card-title { font-size: 1.05rem; font-weight: 700; margin: 0 0 var(--space-1); }
.app-card-desc { color: oklch(var(--bc) / 0.7); font-size: .875rem; line-height: 1.55; margin: 0 0 var(--space-3); }
.app-card-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.empty-state {
    text-align: center;
    padding: var(--space-8) var(--space-4);
    color: oklch(var(--bc) / 0.55);
    border: 1px dashed oklch(var(--bc) / 0.15);
    border-radius: var(--radius-lg);
    margin-block: var(--space-6);
}
.empty-state-icon { display: block; font-size: 2.5rem; margin-bottom: var(--space-3); opacity: .7; }

/* ---------------------------------------------------------------- */
/* Fiche application détaillée                                       */
/* ---------------------------------------------------------------- */

.app-detail-page { padding-block: var(--space-5) var(--space-8); }
.app-detail-header {
    position: relative;
    padding: var(--space-6) 0 var(--space-5);
    overflow: visible;
}
.app-detail-header::before {
    content: "";
    position: absolute;
    inset: -15% -5% auto -5%;
    height: 200px;
    background: var(--brand-gradient);
    filter: blur(60px);
    opacity: .2;
    z-index: -1;
    border-radius: 100%;
}
.app-detail-icon {
    width: 96px; height: 96px;
    border-radius: 1.5rem;
    background: var(--brand-gradient);
    display: flex; align-items: center; justify-content: center;
    font-size: 2.5rem;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: var(--shadow-soft);
}
.app-detail-icon img { width: 100%; height: 100%; object-fit: cover; }
.app-detail-title { font-size: 2rem; font-weight: 800; line-height: 1.15; letter-spacing: -0.015em; margin: 0 0 var(--space-2); }
.app-detail-meta { margin: var(--space-2) 0 0; font-size: .8125rem; color: oklch(var(--bc) / 0.5); }

@media (max-width: 560px) {
    .app-detail-header { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
    .app-detail-icon { width: 72px; height: 72px; font-size: 2rem; border-radius: 1.15rem; }
}
.app-detail-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }

.app-detail-content {
    margin-top: var(--space-6);
    padding: var(--space-6);
    background: oklch(var(--b1));
    border: 1px solid oklch(var(--bc) / 0.08);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 16px -10px oklch(var(--n) / 0.15);
}
@media (max-width: 560px) {
    .app-detail-content { padding: var(--space-4); }
}

.app-detail-platform { margin-top: var(--space-8); }
.app-detail-platform-heading {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 1.05rem;
    font-weight: 700;
    padding: var(--space-2) var(--space-4);
    background: oklch(var(--bc) / 0.04);
    border: 1px solid oklch(var(--bc) / 0.08);
    border-radius: var(--rounded-badge);
    margin: 0 0 var(--space-4);
}
.app-detail-platform-link {
    font-size: .75rem;
    font-weight: 600;
    color: oklch(var(--p));
    text-decoration: none;
}
.app-detail-platform-link:hover, .app-detail-platform-link:focus-visible { text-decoration: underline; }

.screenshots-carousel-wrap { position: relative; }
.screenshots-carousel {
    display: flex;
    gap: var(--space-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-block: var(--space-2);
    scrollbar-width: none;
}
.screenshots-carousel::-webkit-scrollbar { display: none; }
.screenshots-carousel img {
    flex: 0 0 auto;
    height: min(45vh, 400px);
    max-width: 100%;
    width: auto;
    border-radius: 1rem;
    box-shadow: var(--shadow-soft);
    cursor: zoom-in;
    scroll-snap-align: center;
    transition: transform .2s var(--ease-standard), box-shadow .2s var(--ease-standard);
}
.screenshots-carousel img:hover { transform: scale(1.02); box-shadow: 0 16px 32px -14px oklch(var(--n) / 0.4); }
@media (max-width: 560px) {
    .screenshots-carousel img { height: min(42vh, 320px); }
}

/* Boutons neutres et lisibles par-dessus des captures d'écran quel que soit
   leur contenu : couleurs fixes volontaires, indépendantes du thème (même
   logique que la lightbox ci-dessous). */
.carousel-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2.5rem;
    height: 2.5rem;
    border: none;
    border-radius: 50%;
    background: rgb(20 20 20 / 0.55);
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color .15s var(--ease-standard);
}
.carousel-nav-btn:hover { background: rgb(20 20 20 / 0.75); }
.carousel-nav-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.carousel-nav-prev { left: var(--space-2); }
.carousel-nav-next { right: var(--space-2); }

.back-link {
    display: inline-flex; align-items: center; gap: var(--space-2);
    text-decoration: none;
    color: oklch(var(--bc) / 0.7);
    font-weight: 600;
    padding: var(--space-2) var(--space-1);
    margin: calc(var(--space-2) * -1) 0 calc(var(--space-4) - var(--space-2)) calc(var(--space-1) * -1);
    border-radius: .5rem;
    transition: color .15s var(--ease-standard), background-color .15s var(--ease-standard);
}
.back-link:hover { color: oklch(var(--bc)); background: oklch(var(--bc) / 0.06); }
.back-link:focus-visible { outline: 2px solid oklch(var(--p)); outline-offset: 2px; }

/* ---------------------------------------------------------------- */
/* Composants partagés (formulaires, boutons, alertes, badges)       */
/* ---------------------------------------------------------------- */

.input, .textarea, .select, .file-input {
    transition: border-color .15s var(--ease-standard), box-shadow .15s var(--ease-standard), outline-color .15s var(--ease-standard);
}
.input:focus-within, .textarea:focus, .select:focus, .file-input:focus {
    outline-color: oklch(var(--p) / 0.55);
    box-shadow: 0 0 0 4px oklch(var(--p) / 0.14);
}

.btn-primary {
    box-shadow: 0 8px 20px -10px oklch(var(--p) / 0.55);
    transition: transform .15s var(--ease-standard), box-shadow .15s var(--ease-standard), background-color .2s ease, border-color .2s ease;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -10px oklch(var(--p) / 0.6); }
.btn-primary:active { transform: translateY(0); box-shadow: 0 4px 10px -6px oklch(var(--p) / 0.5); }

.alert-success, .alert-error {
    background: oklch(var(--b1));
    color: oklch(var(--bc));
    border: 1px solid oklch(var(--bc) / 0.08);
    border-left-width: 4px;
    box-shadow: var(--shadow-soft);
}
.alert-success { border-left-color: oklch(var(--su)); }
.alert-error { border-left-color: oklch(var(--er)); }

.flash-message {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    gap: var(--space-3);
    max-height: 200px;
    overflow: hidden;
    animation: flash-in .25s var(--ease-standard);
    transition: opacity .4s var(--ease-standard), max-height .4s var(--ease-standard) .1s, margin .4s ease .1s, padding .4s ease .1s;
}
@keyframes flash-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}
.flash-dismiss {
    background: none; border: 0;
    font-size: 1.25rem; line-height: 1;
    cursor: pointer;
    color: inherit;
    opacity: .6;
    padding: 4px 8px;
    border-radius: .4rem;
    transition: opacity .15s ease, background-color .15s ease;
}
.flash-dismiss:hover { opacity: 1; background: oklch(var(--bc) / 0.08); }

.badge-outline {
    background: oklch(var(--bc) / 0.05);
    border-color: oklch(var(--bc) / 0.14);
    color: oklch(var(--bc) / 0.75);
    font-weight: 600;
    padding-inline: 0.65rem;
}

.badge-soft-success { background: oklch(var(--su) / .16); color: oklch(var(--su)); border-color: oklch(var(--su) / .35); font-weight: 700; }
.badge-soft-warning { background: oklch(var(--wa) / .18); color: oklch(45% 0.14 85); border-color: oklch(var(--wa) / .35); font-weight: 700; }
.badge-soft-info { background: oklch(var(--in) / .16); color: oklch(var(--in)); border-color: oklch(var(--in) / .35); font-weight: 700; }
.badge-soft-neutral { background: oklch(var(--bc) / .08); color: oklch(var(--bc) / .65); border-color: oklch(var(--bc) / .14); font-weight: 700; }

/* ---------------------------------------------------------------- */
/* Page support                                                      */
/* ---------------------------------------------------------------- */

.narrow-section { max-width: 640px; margin-inline: auto; padding-block: var(--space-6) var(--space-8); }
.support-form .form-control { margin-bottom: var(--space-4); }
.honeypot-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-card {
    background: oklch(var(--b1));
    border: 1px solid oklch(var(--bc) / 0.08);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    box-shadow: 0 4px 16px -10px oklch(var(--n) / 0.2);
}

/* ---------------------------------------------------------------- */
/* Page 404                                                           */
/* ---------------------------------------------------------------- */

.error-page { text-align: center; padding: var(--space-8) var(--space-4); }
.error-code {
    font-size: clamp(4rem, 10vw, 7rem);
    font-weight: 800;
    background: var(--brand-gradient);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    line-height: 1;
    letter-spacing: -0.02em;
}

/* ---------------------------------------------------------------- */
/* Pied de page public                                                */
/* ---------------------------------------------------------------- */

.site-footer { border-top: 1px solid oklch(var(--bc) / 0.08); margin-top: auto; padding-block: var(--space-6); }
.footer-inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); text-align: center; }
.footer-brand { display: inline-flex; }
.footer-social { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: center; margin-top: var(--space-3); }
.social-link {
    text-decoration: none;
    color: oklch(var(--bc) / 0.7);
    font-size: .9rem;
    padding: var(--space-2) var(--space-1);
    margin: calc(var(--space-2) * -1) calc(var(--space-1) * -1);
    border-radius: .5rem;
    transition: color .15s var(--ease-standard), background-color .15s var(--ease-standard);
}
.social-link:hover { color: oklch(var(--p)); background: oklch(var(--bc) / 0.06); }
.social-link:focus-visible { outline: 2px solid oklch(var(--p)); outline-offset: 2px; }
.footer-legal { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); font-size: .85rem; color: oklch(var(--bc) / 0.55); }
.footer-legal a { color: inherit; }
.footer-made-with { font-size: .75rem; opacity: .75; }

/* ================================================================= */
/* Administration                                                     */
/* ================================================================= */

.admin-body { background: oklch(var(--b2)); }

.admin-shell {
    display: flex;
    min-height: 100vh;
    width: 100%;
}

.admin-sidebar {
    width: 250px;
    flex-shrink: 0;
    background: oklch(var(--b1));
    border-right: 1px solid oklch(var(--bc) / 0.08);
    display: flex;
    flex-direction: column;
    padding: var(--space-5) var(--space-4);
    gap: var(--space-5);
}
.admin-brand { display: flex; align-items: center; gap: 10px; }
.admin-brand .brand-word { font-size: 1.05rem; }
.admin-nav { display: flex; flex-direction: column; gap: var(--space-1); }
.admin-nav-link {
    text-decoration: none;
    color: oklch(var(--bc) / 0.75);
    font-weight: 600;
    padding: var(--space-2) var(--space-3);
    border-radius: 0.6rem;
    display: flex; align-items: center; gap: var(--space-2);
    transition: background-color .15s var(--ease-standard), color .15s var(--ease-standard), transform .15s var(--ease-standard);
}
.admin-nav-link:hover { background: oklch(var(--bc) / 0.06); transform: translateX(2px); }
.admin-nav-link-active { background: var(--brand-ink); color: #F4F4F3; }
.admin-nav-link-active:hover { transform: none; }
.admin-nav-link-icon { display: inline-flex; width: 1.4rem; justify-content: center; flex-shrink: 0; font-size: 1.05rem; }
.admin-nav-separator { border: none; border-top: 1px solid oklch(var(--bc) / 0.1); margin: var(--space-2) var(--space-1); }
.admin-user {
    margin-top: auto;
    display: flex; flex-direction: column; gap: var(--space-2);
    font-size: .85rem;
    border-top: 1px solid oklch(var(--bc) / 0.08);
    padding-top: var(--space-4);
}
.admin-user-name { margin: 0; color: oklch(var(--bc) / 0.55); }
.admin-back-site { font-size: .85rem; color: oklch(var(--bc) / 0.55); text-decoration: none; }

.admin-content { flex: 1; padding: var(--space-6); min-width: 0; }
.admin-title { margin: 0 0 var(--space-5); font-size: 1.75rem; font-weight: 800; letter-spacing: -0.01em; }
.stat-title { color: oklch(var(--bc) / 0.55); }

.admin-mobile-toggle {
    display: none;
    align-items: center; justify-content: center;
    align-self: flex-start;
    margin: var(--space-3) var(--space-3) 0;
    min-height: 44px;
    transition: background-color .15s var(--ease-standard);
}
.admin-mobile-toggle:hover { background: oklch(var(--bc) / 0.06); }
.admin-mobile-toggle:focus-visible { outline: 2px solid oklch(var(--p)); outline-offset: 2px; }

.admin-sidebar-backdrop { display: none; }

@media (max-width: 900px) {
    .admin-sidebar {
        position: fixed;
        inset: 0 0 0 0;
        width: min(250px, 80vw);
        z-index: 40;
        transform: translateX(-100%);
        transition: transform .28s var(--ease-standard);
        box-shadow: var(--shadow-soft);
    }
    .admin-sidebar.is-open { transform: translateX(0); }
    .admin-mobile-toggle { display: inline-flex; }
    .admin-content { padding: var(--space-4); }

    .admin-sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 35;
        background: oklch(var(--n) / 0.45);
        opacity: 0;
        pointer-events: none;
        transition: opacity .25s var(--ease-standard);
    }
    .admin-sidebar.is-open ~ .admin-sidebar-backdrop { opacity: 1; pointer-events: auto; }
}

.admin-card {
    background: oklch(var(--b1));
    border: 1px solid oklch(var(--bc) / 0.08);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    margin-bottom: var(--space-5);
    box-shadow: 0 4px 16px -10px oklch(var(--n) / 0.2);
}

.admin-stat-card {
    position: relative;
    overflow: hidden;
    padding-inline-start: calc(var(--space-5) + 4px);
    transition: transform .18s var(--ease-standard), box-shadow .18s var(--ease-standard);
}
.admin-stat-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; }
.admin-stat-card-success::before { background: oklch(var(--su)); }
.admin-stat-card-alert::before { background: oklch(var(--er)); }
.admin-stat-card-neutral::before { background: oklch(var(--bc) / 0.2); }
.admin-stat-card:hover { transform: translateY(-3px); box-shadow: 0 12px 24px -14px oklch(var(--n) / 0.35); }
.admin-stat-card .stat-figure { position: absolute; top: var(--space-4); right: var(--space-4); font-size: 1.4rem; opacity: .75; }
.admin-stat-card .stat-desc { color: oklch(var(--bc) / 0.5); font-size: .8rem; margin-top: 2px; }

.support-msg-row {
    border-bottom: 1px solid oklch(var(--bc) / 0.08);
    padding-block: var(--space-3);
    transition: background-color .15s var(--ease-standard);
}
.support-msg-row-unread {
    background: oklch(var(--p) / 0.05);
    border-inline-start: 3px solid oklch(var(--p));
    padding-inline-start: var(--space-3);
}
.support-msg-row-unread strong { font-weight: 800; }
.admin-message-summary {
    cursor: pointer;
    list-style: none;
    padding: var(--space-2);
    margin: calc(var(--space-2) * -1);
    border-radius: .6rem;
    transition: background-color .15s var(--ease-standard);
}
.admin-message-summary::-webkit-details-marker { display: none; }
.admin-message-summary:hover { background: oklch(var(--bc) / 0.05); }
.admin-message-chevron { transition: transform .2s var(--ease-standard); }
details[open] .admin-message-chevron { transform: rotate(180deg); }

.admin-table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th, .admin-table td { padding: var(--space-3); text-align: left; border-bottom: 1px solid oklch(var(--bc) / 0.08); vertical-align: middle; }
.admin-table th { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: oklch(var(--bc) / 0.5); }
.admin-table tbody tr { transition: background-color .15s var(--ease-standard); }
.admin-table tbody tr:hover { background: oklch(var(--bc) / 0.035); }

.admin-table-texts td { vertical-align: top; min-width: 220px; }
.admin-table-texts td:first-child { min-width: 160px; white-space: nowrap; }
.admin-table-texts .input, .admin-table-texts .textarea, .admin-table-texts .rich-editor { width: 100%; }

@media (max-width: 640px) {
    .admin-table thead { display: none; }
    .admin-table, .admin-table tbody, .admin-table tr, .admin-table td { display: block; width: 100%; }
    .admin-table tr {
        margin-bottom: var(--space-3);
        border: 1px solid oklch(var(--bc) / 0.08);
        border-radius: .75rem;
        padding: var(--space-2) var(--space-3);
    }
    .admin-table td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-3);
        padding: var(--space-2) 0;
        border-bottom: 1px dashed oklch(var(--bc) / 0.08);
        text-align: right;
        min-width: 0;
    }
    .admin-table td:last-child { border-bottom: none; }
    .admin-table td[data-label]::before {
        content: attr(data-label);
        font-size: .7rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .05em;
        color: oklch(var(--bc) / 0.5);
        text-align: left;
        flex: 0 0 auto;
    }

    .admin-table-texts td {
        flex-direction: column;
        align-items: stretch;
        text-align: left;
        min-width: 0;
    }
    .admin-table-texts td[data-label]::before { margin-bottom: var(--space-1); }
    .admin-table-texts td:first-child {
        white-space: normal;
        font-weight: 700;
    }
    .admin-table-texts td:first-child::before { content: none; }
}
.admin-thumb { width: 40px; height: 40px; border-radius: 0.5rem; object-fit: cover; background: var(--brand-gradient); border: 1px solid oklch(var(--bc) / 0.08); }
.admin-thumb-empty { display: flex; align-items: center; justify-content: center; font-size: 1rem; background: oklch(var(--bc) / 0.08); }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
@media (max-width: 720px) { .form-grid { grid-template-columns: 1fr; } }

.field-lang-label { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: oklch(var(--bc) / 0.5); margin-bottom: var(--space-1); display: block; }
.field-hint { display: block; margin-top: var(--space-1); font-size: .8125rem; line-height: 1.5; }

/* Éditeur riche (Quill) sur les champs HTML de confiance (full_description, contenu des pages) */
.rich-editor .ql-toolbar.ql-snow,
.rich-editor .ql-container.ql-snow {
    border-color: oklch(var(--bc) / 0.2);
    font-family: var(--font-sans);
}
.rich-editor .ql-toolbar.ql-snow {
    border-radius: var(--rounded-btn) var(--rounded-btn) 0 0;
    background: oklch(var(--bc) / 0.03);
    padding-right: 38px;
    position: relative;
}
.rich-editor .ql-container.ql-snow {
    border-radius: 0 0 var(--rounded-btn) var(--rounded-btn);
    background: oklch(var(--b1));
    font-size: 1rem;
    transition: border-color .15s var(--ease-standard), box-shadow .15s var(--ease-standard), outline-color .15s var(--ease-standard);
}
.rich-editor:focus-within .ql-container.ql-snow {
    outline: 2px solid oklch(var(--p) / 0.55);
    outline-offset: -1px;
    box-shadow: 0 0 0 4px oklch(var(--p) / 0.14);
}
.rich-editor .ql-editor { min-height: 160px; line-height: 1.6; color: oklch(var(--bc)); }
.rich-editor .ql-editor.ql-blank::before { color: oklch(var(--bc) / 0.4); font-style: normal; }
.rich-editor .ql-editor a { color: oklch(var(--p)); }
.rich-editor .ql-editor a:hover { color: oklch(var(--s)); }
.rich-editor .ql-snow .ql-editor blockquote { border-left-color: oklch(var(--bc) / 0.2); }
.rich-editor .ql-snow .ql-stroke, .rich-editor .ql-snow .ql-stroke-miter { stroke: oklch(var(--bc) / 0.6); }
.rich-editor .ql-snow .ql-fill, .rich-editor .ql-snow .ql-stroke.ql-fill { fill: oklch(var(--bc) / 0.6); }
.rich-editor .ql-snow .ql-picker { color: oklch(var(--bc) / 0.6); }
.rich-editor .ql-snow.ql-toolbar button:hover, .rich-editor .ql-snow.ql-toolbar button:focus, .rich-editor .ql-snow.ql-toolbar button.ql-active,
.rich-editor .ql-snow.ql-toolbar .ql-picker-label:hover, .rich-editor .ql-snow.ql-toolbar .ql-picker-label.ql-active,
.rich-editor .ql-snow.ql-toolbar .ql-picker-item:hover, .rich-editor .ql-snow.ql-toolbar .ql-picker-item.ql-selected {
    color: oklch(var(--p));
}
.rich-editor .ql-snow.ql-toolbar button:hover .ql-fill, .rich-editor .ql-snow.ql-toolbar button.ql-active .ql-fill,
.rich-editor .ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill, .rich-editor .ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill,
.rich-editor .ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill, .rich-editor .ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill {
    fill: oklch(var(--p));
}
.rich-editor .ql-snow.ql-toolbar button:hover .ql-stroke, .rich-editor .ql-snow.ql-toolbar button.ql-active .ql-stroke,
.rich-editor .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke, .rich-editor .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke {
    stroke: oklch(var(--p));
}
.rich-editor .ql-toolbar.ql-snow .ql-picker-options {
    background: oklch(var(--b1));
    border-color: oklch(var(--bc) / 0.12);
    border-radius: .5rem;
    box-shadow: var(--shadow-soft);
}
.rich-editor .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { border-color: oklch(var(--bc) / 0.12); }

.rich-editor-code-toggle {
    float: right;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 24px;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    border-radius: .3rem;
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: .7rem;
    font-weight: 700;
    color: oklch(var(--bc) / 0.5);
    cursor: pointer;
    transition: color .15s var(--ease-standard), background-color .15s var(--ease-standard);
}
.rich-editor-code-toggle:hover { color: oklch(var(--p)); background: oklch(var(--bc) / 0.08); }
.rich-editor-code-toggle.is-active { color: oklch(var(--p)); background: oklch(var(--p) / 0.14); }
.rich-editor-code-toggle:focus-visible { outline: 2px solid oklch(var(--p)); outline-offset: 2px; }
.rich-editor-code {
    display: block;
    width: 100%;
    min-height: 160px;
    padding: var(--space-3);
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: .8125rem;
    line-height: 1.6;
    color: oklch(var(--bc));
    background: oklch(var(--b1));
    border: 1px solid oklch(var(--bc) / 0.2);
    border-top: none;
    border-radius: 0 0 var(--rounded-btn) var(--rounded-btn);
    resize: vertical;
    transition: outline-color .15s var(--ease-standard), box-shadow .15s var(--ease-standard);
}
.rich-editor-code:focus {
    outline: 2px solid oklch(var(--p) / 0.55);
    outline-offset: -1px;
    box-shadow: 0 0 0 4px oklch(var(--p) / 0.14);
}

.repeatable-list { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-3); }
.repeatable-row {
    display: flex; gap: var(--space-2); align-items: flex-start; flex-wrap: wrap;
    background: oklch(var(--bc) / 0.03);
    border: 1px solid oklch(var(--bc) / 0.06);
    border-radius: 0.75rem;
    padding: var(--space-3);
    transition: opacity .18s var(--ease-standard), transform .18s var(--ease-standard);
}
.repeatable-row > * { flex: 1 1 160px; }
.repeatable-row .btn { flex: 0 0 auto; }
.repeatable-row.is-entering { opacity: 0; transform: translateY(-6px); }
.repeatable-row.is-removing { opacity: 0; transform: translateX(6px); }
.repeatable-row:has(input[type="checkbox"]:checked) { opacity: .45; }
.repeatable-row:has(input[type="checkbox"]:checked) .thumb-preview { filter: grayscale(1); }

.repeatable-row-platform { flex-direction: column; align-items: stretch; gap: var(--space-3); }
.repeatable-row-platform > * { flex: none; }

.screenshot-reorder-btns { display: flex; flex-direction: column; gap: 2px; }
.screenshot-row:first-child [data-move-up] { visibility: hidden; }
.screenshot-row:last-child [data-move-down] { visibility: hidden; }

.tabs-boxed .tab:not(.tab-active) { transition: background-color .15s var(--ease-standard), color .15s var(--ease-standard); }
.tabs-boxed .tab:not(.tab-active):hover { background: oklch(var(--bc) / 0.08); color: oklch(var(--bc)); }

.admin-actions-row { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-5); }

.thumb-preview-wrap { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.thumb-preview { width: 64px; height: 64px; border-radius: 0.75rem; object-fit: cover; background: oklch(var(--b3)); }

.text-muted { color: oklch(var(--bc) / 0.55); }
.mt-0 { margin-top: 0; }

/* Toujours un fond sombre + bouton clair, indépendamment du thème actif (photo lightbox classique). */
.lightbox-overlay {
    position: fixed;
    inset: 0;
    background: oklch(var(--n) / 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s var(--ease-standard);
}
.lightbox-overlay.is-open { opacity: 1; pointer-events: auto; }
.lightbox-overlay img {
    max-width: 100%;
    max-height: 100%;
    border-radius: .75rem;
    box-shadow: 0 30px 60px -20px oklch(0% 0 0 / 0.6);
}
.lightbox-close {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    width: 40px; height: 40px;
    border-radius: 50%;
    background: oklch(100% 0 0 / 0.12);
    border: none;
    color: #fff;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background-color .15s ease;
}
.lightbox-close:hover { background: oklch(100% 0 0 / 0.22); }
.lightbox-close:focus-visible { outline: 2px solid oklch(var(--p)); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}