/* ============================================================
   OROGEN DESIGN — feuille de style principale
   Thème : fond sombre, accents vert / jaune / orange / rouge
   (dégradé du logo)
   ============================================================ */

/* ------------------------------------------------------------
   Polices auto-hébergées (woff2, subset latin) — pas de
   dépendance à Google Fonts : performances + conformité RGPD.
   Ce sont des polices variables : un seul fichier couvre toute
   la plage de graisses de la famille.
   ------------------------------------------------------------ */
@font-face {
    font-family: 'Fraunces';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/fraunces.woff2') format('woff2');
}
@font-face {
    font-family: 'Fraunces';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/fraunces-italic.woff2') format('woff2');
}
@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/outfit.woff2') format('woff2');
}
@font-face {
    font-family: 'Caveat';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/caveat.woff2') format('woff2');
}

:root {
    --bg:          #101613;
    --bg-soft:     #161d19;
    --bg-card:     #1a231e;
    --ink:         #eef4f0;
    --ink-soft:    #9db1a7;
    --accent:      #f68b1f;
    --accent-soft: #ffa64d;
    --accent-deep: #2f9e68;
    --brand-green:  #0f6b4a;
    --brand-yellow: #ffc400;
    --brand-red:    #ea3323;
    --line:        rgba(238, 244, 240, 0.12);
    --radius:      18px;
    --font-title:  'Fraunces', Georgia, serif;
    --font-body:   'Outfit', system-ui, sans-serif;
    --font-hand:   'Caveat', 'Segoe Script', cursive;
    --shadow-lg:   0 30px 60px -20px rgba(0, 0, 0, 0.55);
    --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

/* L'attribut hidden doit toujours l'emporter sur les display
   explicites (flex/grid), sinon des calques invisibles comme la
   visionneuse recouvrent la page et bloquent tous les clics */
[hidden] { display: none !important; }

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

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    font-weight: 300;
    line-height: 1.6;
    overflow-x: hidden;
}

::selection { background: var(--accent); color: #20312b; }

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

a { color: var(--accent-soft); }

/* ------------------------------------------------------------
   Halo lumineux suivant le curseur
   ------------------------------------------------------------ */
.cursor-glow {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background: radial-gradient(560px circle at var(--mx, 50%) var(--my, 30%),
        rgba(246, 139, 31, 0.08), transparent 65%);
    transition: opacity 0.4s;
}
/* Écrans tactiles : pas de curseur à suivre, le halo n'a pas lieu d'être */
@media (pointer: coarse) {
    .cursor-glow { display: none; }
}

/* ------------------------------------------------------------
   Curseur thématique du header : point ambré sur le pointeur,
   icône du menu survolé flottant en bas à droite (voir app.js)
   ------------------------------------------------------------ */
.nav-cursor {
    position: fixed;
    top: 0; left: 0;
    z-index: 210;               /* au-dessus du header et du voile */
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.18s;
}
.nav-cursor.is-on { opacity: 1; }

/* Le point, centré sur les coordonnées exactes du curseur */
.nav-cursor-dot {
    position: absolute;
    width: 7px; height: 7px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 8px rgba(246, 139, 31, 0.7);
}

/* L'icône, décalée en bas à droite du point */
.nav-cursor-icon {
    position: absolute;
    top: 12px; left: 14px;
    display: grid;
    place-items: center;
    color: var(--accent-soft);
    filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.6));
    animation: cursor-icon-in 0.28s var(--ease-out) backwards;
}
@keyframes cursor-icon-in {
    from { transform: scale(0.4) rotate(-14deg); opacity: 0; }
    to   { transform: scale(1) rotate(0); opacity: 1; }
}

/* Le curseur natif s'efface au profit du point + icône
   (souris uniquement : sans effet sur les écrans tactiles) */
@media (pointer: fine) {
    .site-header [data-cursor] { cursor: none; }
}

/* Voile de transition entre pages */
.page-transition {
    position: fixed;
    inset: 0;
    background: var(--bg);
    z-index: 200;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.35s ease;
}
body.is-leaving .page-transition { opacity: 1; }

/* Voile à gommer à l'ouverture de l'accueil (canvas géré en JS) */
.reveal-veil {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 150;
    pointer-events: none;
    transition: opacity 0.9s var(--ease-out);
    /* Respiration discrète en attendant le gommage : signale que la
       page est vivante sous le fond uni (stoppée en JS dès l'effacement) */
    animation: veil-pulse 2.4s ease-in-out infinite;
}
@keyframes veil-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.85; }
}
.reveal-veil.is-done { opacity: 0; }

/* ------------------------------------------------------------
   Header — barre centrale flottante en verre dépoli
   ------------------------------------------------------------ */
.site-header {
    position: fixed;
    top: 16px; left: 0; right: 0;
    z-index: 100;
    display: flex;
    justify-content: center;
    padding: 0 18px;
    pointer-events: none;
    transition: transform 0.4s var(--ease-out);
}
.site-header.is-hidden { transform: translateY(calc(-100% - 24px)); }

.header-inner {
    position: relative;
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 8px 12px 8px 20px;
    border-radius: 999px;
}
/* Fond en pseudo-élément : un backdrop-filter posé directement sur
   .header-inner en ferait le bloc conteneur du menu mobile (fixed) */
.header-inner::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: rgba(16, 22, 19, 0.5);
    border: 1px solid var(--line);
    backdrop-filter: blur(18px) saturate(1.4);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    box-shadow: 0 18px 40px -26px rgba(0, 0, 0, 0.5);
    transition: background 0.4s, box-shadow 0.4s, border-color 0.4s;
}
.site-header.is-scrolled .header-inner::before {
    background: rgba(16, 22, 19, 0.8);
    border-color: rgba(238, 244, 240, 0.14);
    box-shadow: 0 22px 48px -22px rgba(0, 0, 0, 0.65);
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--ink);
    z-index: 102;
}
.brand-mark {
    color: var(--accent);
    display: grid;
    place-items: center;
    transition: transform 0.5s var(--ease-out);
}
.brand:hover .brand-mark { transform: rotate(-12deg) scale(1.12); }
.brand-mark img {
    height: 30px;
    width: auto;               /* ratio natif 992/501 conservé */
    display: block;
    border-radius: 8px;
}
.brand-text {
    font-family: var(--font-title);
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}
.brand-text em {
    font-style: italic;
    font-weight: 400;
    color: var(--accent);
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 4px;
}
/* Fin filet séparant la marque de la navigation */
.main-nav::before {
    content: '';
    align-self: center;
    width: 1px;
    height: 20px;
    margin-right: 10px;
    background: var(--line);
}
.nav-link {
    position: relative;
    padding: 8px 14px;
    color: var(--ink-soft);
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    border-radius: 999px;
    transition: color 0.25s, background 0.25s;
    white-space: nowrap;
}
.nav-link:hover { color: var(--ink); background: rgba(238, 244, 240, 0.06); }
.nav-link.is-active { color: var(--accent); }
.nav-link.is-active::after {
    content: '';
    position: absolute;
    left: 50%; bottom: 1px;
    width: 16px; height: 2px;
    background: var(--accent);
    border-radius: 2px;
    transform: translateX(-50%);
}
.ext-arrow {
    display: inline-block;
    margin-left: 4px;
    font-size: 0.8em;
    transition: transform 0.25s var(--ease-out);
}
.nav-ext:hover .ext-arrow { transform: translate(2px, -2px); }

/* Menus déroulants "Boutiques" (header + héro de l'accueil) */
.nav-dropdown { position: relative; }
.nav-dropdown.is-open { z-index: 5; }
.nav-drop-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    font-family: var(--font-body);
    cursor: pointer;
}
.drop-caret {
    font-size: 0.7em;
    transition: transform 0.3s var(--ease-out);
}
.nav-dropdown.is-open .drop-caret { transform: rotate(180deg); }
.nav-drop-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    min-width: 200px;
    padding: 8px;
    background: rgba(22, 29, 25, 0.97);
    backdrop-filter: blur(18px) saturate(1.4);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s, transform 0.25s var(--ease-out), visibility 0.25s;
}
.nav-dropdown.is-open .nav-drop-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
.nav-drop-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 14px;
    color: var(--ink-soft);
    text-decoration: none;
    font-size: 0.92rem;
    border-radius: 9px;
    white-space: nowrap;
    transition: color 0.25s, background 0.25s;
}
.nav-drop-link:hover {
    color: var(--ink);
    background: rgba(238, 244, 240, 0.07);
}
.nav-drop-link:hover .ext-arrow { transform: translate(2px, -2px); }


.lang-switch {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: 10px;
    opacity: 0.55;
    transition: opacity 0.25s;
}
.lang-switch:hover,
.lang-switch:focus-within { opacity: 1; }
.lang-btn {
    padding: 2px 4px;
    font-size: 0.7rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    color: var(--ink-soft);
    text-decoration: none;
    border-radius: 6px;
    transition: color 0.25s;
}
.lang-btn:hover { color: var(--ink); }
.lang-btn.is-active { color: var(--accent); font-weight: 500; }
.lang-sep { color: var(--line); font-size: 0.7rem; }

.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px; height: 40px;
    background: none;
    border: 1px solid var(--line);
    border-radius: 999px;
    cursor: pointer;
    z-index: 102;
    padding: 10px;
}
.nav-toggle span {
    display: block;
    height: 2px;
    background: var(--ink);
    border-radius: 2px;
    transition: transform 0.35s var(--ease-out), opacity 0.25s;
}
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ------------------------------------------------------------
   Héro plein écran
   ------------------------------------------------------------ */
.hero {
    position: relative;
    min-height: 100vh;   /* repli navigateurs antérieurs à svh */
    min-height: 100svh;
    display: grid;
    place-items: center;
    overflow: hidden;
}
.hero-bg {
    position: absolute;
    inset: -12% 0;
    z-index: 0;
    will-change: transform;
}
.hero-bg img {
    width: 100%; height: 100%;
    object-fit: cover;
    filter: saturate(1.05);
}
.hero-veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(16, 22, 19, 0.6) 0%, rgba(16, 22, 19, 0.35) 45%, var(--bg) 100%),
        radial-gradient(90% 60% at 50% 42%, transparent 30%, rgba(16, 22, 19, 0.5) 100%);
}
.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 120px 24px 80px;
    max-width: 900px;
}
.hero-kicker {
    font-size: 0.85rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--accent-soft);
    margin: 0 0 18px;
}
.hero-title {
    font-family: var(--font-title);
    font-weight: 600;
    font-size: clamp(2.6rem, 7vw, 5rem);
    line-height: 1.05;
    margin: 0 0 26px;
}
.hero-title em { font-style: italic; color: var(--accent); }
.hero-title .line {
    display: block;
    overflow: hidden;
}
.hero-title .line > span {
    display: inline-block;
    transform: translateY(110%);
    animation: line-up 1s var(--ease-out) forwards;
}
.hero-title .line:nth-child(2) > span { animation-delay: 0.15s; }
@keyframes line-up { to { transform: translateY(0); } }

.hero-sub {
    font-size: clamp(1rem, 2vw, 1.2rem);
    color: var(--ink-soft);
    max-width: 640px;
    margin: 0 auto 36px;
}
.hero-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}
.hero-scroll {
    position: absolute;
    bottom: 30px; left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    width: 26px; height: 42px;
    border: 2px solid rgba(238, 244, 240, 0.35);
    border-radius: 14px;
}
.hero-scroll span {
    position: absolute;
    top: 7px; left: 50%;
    width: 4px; height: 8px;
    margin-left: -2px;
    background: var(--accent);
    border-radius: 2px;
    animation: scroll-hint 1.8s ease-in-out infinite;
}
@keyframes scroll-hint {
    0%   { transform: translateY(0); opacity: 1; }
    70%  { transform: translateY(14px); opacity: 0; }
    100% { transform: translateY(0); opacity: 0; }
}

/* ------------------------------------------------------------
   Boutons
   ------------------------------------------------------------ */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: 0.98rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition: transform 0.3s var(--ease-out), box-shadow 0.3s, background 0.3s, color 0.3s;
    will-change: transform;
}
.btn-primary {
    background: linear-gradient(135deg, var(--brand-yellow), var(--accent) 55%, var(--brand-red));
    color: #20312b;
    box-shadow: 0 10px 30px -10px rgba(246, 139, 31, 0.45);
}
.btn-primary:hover { box-shadow: 0 16px 40px -12px rgba(246, 139, 31, 0.65); }
.btn-ghost {
    border-color: var(--line);
    color: var(--ink);
    background: rgba(238, 244, 240, 0.05);
    backdrop-filter: blur(6px);
}
.btn-ghost:hover { border-color: var(--accent-deep); color: var(--accent-soft); }

/* ------------------------------------------------------------
   Sections / titres
   ------------------------------------------------------------ */
.site-main { position: relative; z-index: 2; }

.section-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 40px;
    padding: 0 24px;
}
.section-title {
    font-family: var(--font-title);
    font-size: clamp(1.9rem, 4.5vw, 3rem);
    font-weight: 600;
    margin: 0 0 12px;
}
.section-sub { color: var(--ink-soft); margin: 0; }

/* ------------------------------------------------------------
   Filtres galerie
   ------------------------------------------------------------ */
.gallery-section { padding: 90px 0 40px; }

.filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    padding: 0 24px;
    margin-bottom: 42px;
}
.filter-btn {
    padding: 10px 22px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--ink-soft);
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 400;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: all 0.3s var(--ease-out);
}
.filter-btn:hover { color: var(--ink); border-color: var(--accent-deep); }
.filter-btn.is-active {
    background: var(--accent);
    border-color: var(--accent);
    color: #20312b;
    font-weight: 500;
    box-shadow: 0 8px 24px -8px rgba(246, 139, 31, 0.5);
}

/* ------------------------------------------------------------
   Grille galerie (masonry via columns)
   Émergence "liquide" : chaque vignette sort du fond étirée par
   la tension de surface puis se détend, pendant qu'un filtre SVG
   d'ondulation (appliqué en JS) s'apaise et qu'un film d'eau
   lumineux s'écoule le long de l'image
   ------------------------------------------------------------ */
.gallery-grid {
    columns: 4 300px;
    column-gap: 18px;
    padding: 0 28px;
    max-width: 1600px;
    margin: 0 auto;
}
.gallery-item {
    break-inside: avoid;
    margin: 0 0 18px;
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--bg-card);
    cursor: zoom-in;
    opacity: 0;
    /* Étirée verticalement, comme retenue par la surface du liquide */
    transform: translateY(46px) scale(0.97, 1.08);
    transition:
        opacity 0.7s var(--ease-out),
        transform 0.95s cubic-bezier(0.34, 1.45, 0.64, 1); /* légère détente en fin de montée */
}
.gallery-item.is-in {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.gallery-item.is-emerging {
    will-change: transform, filter;
}
/* Film d'eau : la ligne de flottaison glisse vers le bas de la
   vignette pendant qu'elle émerge, puis s'évapore */
.gallery-item::after {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 55%;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg,
        transparent,
        rgba(255, 240, 214, 0.22) 45%,
        rgba(255, 240, 214, 0.06) 72%,
        transparent);
    opacity: 0;
}
.gallery-item.is-in::after {
    animation: water-film 1.1s var(--ease-out) both;
    animation-delay: inherit;
}
@keyframes water-film {
    0%   { opacity: 1; transform: translateY(-35%); }
    70%  { opacity: 0.5; }
    100% { opacity: 0; transform: translateY(190%); }
}
.gallery-item img {
    width: 100%;
    transition: transform 0.7s var(--ease-out), filter 0.5s;
}
.gallery-item:hover img { transform: scale(1.06); filter: brightness(1.06); }
/* Vidéos mêlées à la galerie : même présentation que les images,
   avec un badge lecture (l'aperçu muet démarre au survol) */
.gallery-item video {
    width: 100%;
    display: block;
    transition: transform 0.7s var(--ease-out), filter 0.5s;
}
.gallery-item:hover video { transform: scale(1.06); filter: brightness(1.06); }
.gallery-item .play-badge {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 52px; height: 52px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(20, 17, 14, 0.6);
    border: 1px solid rgba(243, 236, 226, 0.25);
    color: #f5f7fa;
    backdrop-filter: blur(4px);
    pointer-events: none;
    transition: opacity 0.3s, transform 0.3s var(--ease-out);
}
.gallery-item--video:hover .play-badge {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
}
.gallery-item figcaption {
    position: absolute;
    inset: auto 0 0 0;
    padding: 42px 18px 14px;
    background: linear-gradient(180deg, transparent, rgba(15, 12, 9, 0.88));
    font-size: 0.92rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.35s, transform 0.35s var(--ease-out);
}
.gallery-item:hover figcaption { opacity: 1; transform: translateY(0); }
.gallery-item .item-tag {
    position: absolute;
    top: 12px; left: 12px;
    padding: 4px 12px;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--brand-yellow);
    background: rgba(15, 12, 9, 0.65);
    backdrop-filter: blur(8px);
    border-radius: 999px;
    opacity: 0;
    transition: opacity 0.35s;
}
.gallery-item:hover .item-tag { opacity: 1; }
/* Écrans tactiles : pas de survol, les légendes et badges
   restent visibles en permanence sur les vignettes */
@media (hover: none) {
    .gallery-item figcaption { opacity: 1; transform: none; }
    .gallery-item .item-tag { opacity: 1; }
}

/* Loader à points */
.gallery-loader {
    display: flex;
    gap: 8px;
    justify-content: center;
    padding: 40px;
}
.loader-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--accent);
    animation: dot-bounce 0.9s ease-in-out infinite;
}
.loader-dot:nth-child(2) { animation-delay: 0.15s; }
.loader-dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes dot-bounce {
    0%, 100% { transform: translateY(0); opacity: 0.5; }
    50%      { transform: translateY(-10px); opacity: 1; }
}

/* ------------------------------------------------------------
   Bandeau boutiques
   ------------------------------------------------------------ */
.shops-band {
    margin: 90px auto;
    max-width: 1100px;
    padding: 0 24px;
}
.shops-band-inner {
    text-align: center;
    padding: 70px 40px;
    border-radius: 28px;
    background:
        radial-gradient(120% 160% at 50% -20%, rgba(246, 139, 31, 0.14), transparent 60%),
        var(--bg-card);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
}
.shops-band h2 {
    font-family: var(--font-title);
    font-size: clamp(1.7rem, 4vw, 2.6rem);
    margin: 0 0 10px;
}
.shops-band p { color: var(--ink-soft); margin: 0 0 30px; }
.shops-band-actions {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ------------------------------------------------------------
   Page hero (pages internes)
   ------------------------------------------------------------ */
.page-hero {
    padding: 170px 24px 60px;
    text-align: center;
    background:
        radial-gradient(70% 90% at 50% 0%, rgba(246, 139, 31, 0.1), transparent 70%);
}
.page-title {
    font-family: var(--font-title);
    font-size: clamp(2.4rem, 6vw, 4rem);
    font-weight: 600;
    margin: 0 0 14px;
}
.page-intro {
    color: var(--ink-soft);
    max-width: 620px;
    margin: 0 auto;
    font-size: 1.05rem;
}

/* ------------------------------------------------------------
   Page Contact — la lettre manuscrite
   Le formulaire est présenté comme une lettre rédigée à la main :
   date, objet, corps ligné, signature, post-scriptum.
   ------------------------------------------------------------ */
.contact-section {
    max-width: 720px;
    margin: 0 auto;
    padding: 20px 24px 110px;
}

/* Libellés accessibles mais invisibles (lecteurs d'écran) */
.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* La feuille de papier, légèrement de travers ; elle se redresse
   quand on la survole ou qu'on écrit dedans */
.letter {
    position: relative;
    background:
        radial-gradient(120% 90% at 85% -10%, rgba(246, 139, 31, 0.07), transparent 60%),
        var(--bg-card);
    border: 1px solid var(--line);
    border-radius: 4px 12px 6px 10px; /* coins subtilement irréguliers */
    padding: 56px 50px 44px;
    box-shadow: var(--shadow-lg);
}
form.letter.reveal {
    transform: translateY(30px) rotate(-0.7deg);
    transition: opacity 0.8s var(--ease-out), transform 0.7s var(--ease-out);
}
form.letter.reveal.is-in { transform: translateY(0) rotate(-0.7deg); }
form.letter.reveal.is-in:hover,
form.letter.reveal.is-in:focus-within { transform: translateY(0) rotate(0deg); }

/* Marge de cahier : fin filet vertical ambré */
.letter::before {
    content: '';
    position: absolute;
    top: 18px; bottom: 18px; left: 30px;
    width: 1px;
    background: rgba(246, 139, 31, 0.3);
    pointer-events: none;
}

/* Ruban adhésif doré en haut de la feuille */
.letter-tape {
    position: absolute;
    top: -13px; left: 50%;
    width: 118px; height: 28px;
    transform: translateX(-50%) rotate(-2.5deg);
    background: linear-gradient(100deg, rgba(255, 196, 0, 0.32), rgba(255, 196, 0, 0.16));
    border-left: 1px dashed rgba(201, 102, 10, 0.4);
    border-right: 1px dashed rgba(201, 102, 10, 0.4);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

/* Écriture manuscrite : tout ce que le visiteur "écrit" sur la lettre */
.letter input[type="text"],
.letter input[type="email"],
.letter input[type="number"],
.letter textarea {
    background: transparent;
    border: none;
    border-bottom: 1px dashed rgba(238, 244, 240, 0.22);
    padding: 2px 4px;
    color: var(--ink);
    font-family: var(--font-hand);
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.4;
    outline: none;
    transition: border-color 0.3s;
}
.letter input:focus,
.letter textarea:focus { border-color: var(--accent); }
.letter input::placeholder,
.letter textarea::placeholder {
    color: rgba(157, 177, 167, 0.5);
    font-family: var(--font-hand);
}

.form-field { position: relative; }
.form-field.has-error input,
.form-field.has-error textarea { border-color: #ff6b5e; }
.field-error {
    display: block;
    min-height: 16px;
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: #ff6b5e;
    margin-top: 5px;
}

/* Date en haut à droite */
.letter-date {
    font-family: var(--font-hand);
    font-size: 1.35rem;
    color: var(--ink-soft);
    text-align: right;
    margin: 0 0 28px;
}

/* Ligne "Objet :" */
.letter-subject {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-bottom: 30px;
}
.letter-inline-label {
    font-family: var(--font-title);
    font-style: italic;
    font-size: 1.02rem;
    color: var(--accent-soft);
    white-space: nowrap;
}
.letter-subject input { flex: 1; min-width: 200px; }
.letter-subject .field-error { flex-basis: 100%; margin-top: 2px; }

/* Formule d'appel */
.letter-greeting {
    font-family: var(--font-hand);
    font-size: 1.6rem;
    margin: 0 0 18px;
}

/* Corps de la lettre : feuille lignée, les lignes suivent le texte */
.letter-body textarea {
    display: block;
    width: 100%;
    resize: vertical;
    border-bottom: none;
    padding: 0 4px;
    line-height: 38px;
    background-image: repeating-linear-gradient(
        transparent, transparent 37px,
        rgba(238, 244, 240, 0.1) 37px, rgba(238, 244, 240, 0.1) 38px);
    background-attachment: local;
}

/* Signature en bas à droite : politesse, prénom + nom, e-mail */
.letter-signature {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin: 14px 0 2px;
}
.letter-signoff {
    font-family: var(--font-hand);
    font-size: 1.6rem;
    margin: 0 0 6px;
}
.letter-sign-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0 14px;
}
.letter-sign-field input { text-align: right; }
.letter-sign-field .field-error { text-align: right; }
.letter-sign-row input { width: 150px; }
.letter-sign-email input {
    width: 280px;
    max-width: 100%;
    font-size: 1.15rem;
}

/* Post-scriptum : newsletter */
.letter-ps {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px dashed var(--line);
}
.letter-ps-label {
    font-family: var(--font-hand);
    font-size: 1.45rem;
    color: var(--accent-soft);
    white-space: nowrap;
}
.letter-ps .form-check { margin: 0; }
.hp-field {
    position: absolute !important;
    left: -9999px;
    opacity: 0;
    height: 0;
    overflow: hidden;
}
.form-check {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    color: var(--ink-soft);
    font-size: 0.95rem;
    margin: 4px 0 30px;
    user-select: none;
}
.form-check input { position: absolute; opacity: 0; }
.check-box {
    width: 22px; height: 22px;
    flex: 0 0 22px;
    border: 1px solid var(--line);
    border-radius: 7px;
    position: relative;
    transition: all 0.25s;
}
.check-box::after {
    content: '';
    position: absolute;
    left: 7px; top: 3px;
    width: 5px; height: 10px;
    border: solid #20312b;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
    transition: transform 0.25s var(--ease-out);
}
.form-check input:checked + .check-box {
    background: var(--accent);
    border-color: var(--accent);
}
.form-check input:checked + .check-box::after { transform: rotate(45deg) scale(1); }
.form-check:hover .check-box { border-color: var(--accent-deep); }

.btn-submit {
    width: 100%;
    justify-content: center;
    position: relative;
    border: none;
}
.btn-spinner {
    display: none;
    width: 18px; height: 18px;
    border: 2px solid rgba(32, 49, 43, 0.35);
    border-top-color: #20312b;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}
.btn-submit.is-loading .btn-spinner { display: inline-block; }
.btn-submit.is-loading { pointer-events: none; opacity: 0.85; }
@keyframes spin { to { transform: rotate(360deg); } }

.form-status {
    margin: 20px 0 0;
    text-align: center;
    font-size: 0.98rem;
    min-height: 24px;
}
.form-status.is-ok { color: #57c785; }
.form-status.is-err { color: #ff6b5e; }

/* Captcha maison — compter les meeples ; bordure en pointillés
   façon timbre pour rester dans l'esprit courrier */
.captcha-box {
    margin: 26px 0 30px;
    padding: 20px 22px;
    border: 1px dashed rgba(246, 139, 31, 0.35);
    border-radius: 6px;
    background: rgba(238, 244, 240, 0.03);
}
.captcha-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.captcha-label {
    color: var(--ink-soft);
    font-size: 0.95rem;
}
.captcha-refresh {
    flex: 0 0 auto;
    width: 32px; height: 32px;
    display: grid;
    place-items: center;
    background: none;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--ink-soft);
    cursor: pointer;
    transition: color 0.25s, border-color 0.25s, transform 0.4s var(--ease-out);
}
.captcha-refresh:hover {
    color: var(--accent);
    border-color: var(--accent-deep);
    transform: rotate(180deg);
}
.captcha-icons {
    display: flex;
    flex-wrap: nowrap;          /* toujours sur une seule ligne */
    gap: clamp(4px, 1.5vw, 10px);
    margin-bottom: 8px;
    min-height: 42px;
}
.captcha-icon {
    display: grid;
    place-items: center;
    flex: 0 1 42px;             /* rétrécit si la place manque */
    min-width: 0;
    aspect-ratio: 1;
    border-radius: 10px;
    background: rgba(238, 244, 240, 0.05);
    animation: captcha-pop 0.4s var(--ease-out) backwards;
}
.captcha-icon svg {
    width: 70%;
    height: 70%;
}
/* La couleur de chaque icône est tirée au hasard en JS (inline),
   indépendamment de son type, pour forcer la lecture des formes */
@keyframes captcha-pop {
    from { transform: scale(0.4) rotate(-12deg); opacity: 0; }
    to   { transform: scale(1) rotate(0); opacity: 1; }
}
.captcha-field {
    margin: 14px 0 0;
    max-width: 220px;
    display: flex;
    flex-direction: column;
}
/* Le libellé suit l'input dans le HTML : on le remonte au-dessus */
.captcha-field label {
    order: -1;
    font-size: 0.82rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 4px;
}
.captcha-field input::-webkit-outer-spin-button,
.captcha-field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.captcha-field input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

/* ------------------------------------------------------------
   Visionneuse d'images (lightbox)
   ------------------------------------------------------------ */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 150;
    display: grid;
    grid-template-columns: 64px 1fr 64px;
    grid-template-rows: auto 1fr auto;
    align-items: center;
    background: rgba(10, 14, 12, 0.94);
    backdrop-filter: blur(14px);
    opacity: 0;
    transition: opacity 0.3s;
}
.lightbox.is-open { opacity: 1; }

.lightbox-bar {
    grid-column: 1 / -1;
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 22px;
}
.lightbox-counter {
    font-family: var(--font-title);
    font-size: 1.05rem;
    letter-spacing: 0.12em;
    color: var(--ink-soft);
}
.lightbox-tools { display: flex; gap: 10px; }

.lightbox-figure {
    margin: 0;
    grid-column: 2;
    grid-row: 2;
    align-self: stretch;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    text-align: center;
}
.lightbox-stage {
    min-height: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 12px;
}
.lightbox-stage img {
    max-width: 100%;
    max-height: calc(100vh - 280px);
    max-height: calc(100svh - 280px); /* barre d'URL mobile dynamique */
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    cursor: zoom-in;
    transition: transform 0.5s var(--ease-out), opacity 0.22s;
    animation: lb-in 0.35s var(--ease-out);
}
.lightbox-stage img.is-switching { opacity: 0; }
.lightbox-stage.is-zoomed img { transform: scale(2.2); cursor: zoom-out; }
/* Vidéo dans la visionneuse : même gabarit que les images */
.lightbox-stage video {
    max-width: 100%;
    max-height: calc(100vh - 280px);
    max-height: calc(100svh - 280px);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    animation: lb-in 0.35s var(--ease-out);
}
@keyframes lb-in {
    from { transform: scale(0.94); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}
.lightbox-figure figcaption {
    font-family: var(--font-title);
    font-size: 1.15rem;
    color: var(--ink);
}

.lightbox-tool,
.lightbox-prev,
.lightbox-next {
    background: rgba(238, 244, 240, 0.08);
    border: 1px solid var(--line);
    color: var(--ink);
    font-size: 1.7rem;
    line-height: 1;
    width: 46px; height: 46px;
    border-radius: 50%;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background 0.25s, transform 0.25s;
    justify-self: center;
}
.lightbox-tool { width: 42px; height: 42px; font-size: 1.4rem; }
.lightbox-prev { grid-column: 1; grid-row: 2; }
.lightbox-next { grid-column: 3; grid-row: 2; }
.lightbox-tool:hover,
.lightbox-prev:hover,
.lightbox-next:hover { background: var(--accent); color: #20312b; transform: scale(1.08); }

.lightbox-thumbs {
    grid-column: 1 / -1;
    grid-row: 3;
    display: flex;
    gap: 8px;
    padding: 14px 22px 18px;
    overflow-x: auto;
    scrollbar-width: thin;
}
.lightbox-thumb:first-child { margin-left: auto; }
.lightbox-thumb:last-child { margin-right: auto; }
.lightbox-thumb {
    flex: 0 0 auto;
    width: 66px; height: 48px;
    padding: 0;
    background: none;
    border: 2px solid transparent;
    border-radius: 9px;
    overflow: hidden;
    cursor: pointer;
    opacity: 0.4;
    transition: opacity 0.25s, border-color 0.25s, transform 0.25s var(--ease-out);
}
.lightbox-thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.lightbox-thumb:hover { opacity: 0.8; }
/* Vignette vidéo de la bande : icône lecture sur fond sobre */
.lightbox-thumb--video {
    display: grid;
    place-items: center;
    background: var(--bg-card);
    color: var(--ink-soft);
}
.lightbox-thumb.is-active {
    opacity: 1;
    border-color: var(--accent);
    transform: translateY(-3px);
}

/* ------------------------------------------------------------
   Footer
   ------------------------------------------------------------ */
.site-footer {
    border-top: 1px solid var(--line);
    background: var(--bg-soft);
    margin-top: 40px;
}
.footer-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 60px 28px 30px;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 40px;
}
.footer-brand .brand-text { font-size: 1.4rem; }
.footer-brand p {
    color: var(--ink-soft);
    font-size: 0.92rem;
    max-width: 380px;
    margin: 12px 0 0;
}
.footer-nav, .footer-shops {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.footer-nav a, .footer-shops a {
    color: var(--ink-soft);
    text-decoration: none;
    font-size: 0.95rem;
    transition: color 0.25s, transform 0.25s var(--ease-out);
    width: fit-content;
}
.footer-nav a:hover, .footer-shops a:hover {
    color: var(--accent-soft);
    transform: translateX(4px);
}
.footer-bottom {
    max-width: 1280px;
    margin: 0 auto;
    padding: 22px 28px;
    border-top: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.footer-bottom p { margin: 0; color: var(--ink-soft); font-size: 0.85rem; }
.to-top {
    width: 42px; height: 42px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--ink);
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.3s var(--ease-out);
}
.to-top:hover {
    background: var(--accent);
    color: #20312b;
    border-color: var(--accent);
    transform: translateY(-4px);
}

/* ------------------------------------------------------------
   Animations de révélation au scroll
   ------------------------------------------------------------ */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.reveal.is-in { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .reveal, .gallery-item { opacity: 1; transform: none; }
    /* La lettre garde son inclinaison (statique) mais plus de glissement */
    form.letter.reveal { transform: rotate(-0.7deg); }
}

/* ------------------------------------------------------------
   Responsive
   ------------------------------------------------------------ */
@media (max-width: 1080px) {
    .nav-toggle { display: flex; }
    .main-nav {
        position: fixed;
        inset: 0;
        z-index: 101;
        flex-direction: column;
        justify-content: center;
        gap: 8px;
        background: rgba(16, 22, 19, 0.97);
        backdrop-filter: blur(24px);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.35s;
    }
    .main-nav::before { display: none; }
    .main-nav.is-open { opacity: 1; pointer-events: auto; }
    .nav-link {
        font-size: 1.35rem;
        padding: 12px 26px;
        opacity: 0;
        transform: translateY(14px);
        transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
    }
    .main-nav.is-open .nav-link {
        opacity: 1;
        transform: translateY(0);
    }
    /* Déroulant "Boutiques" du header : liste intégrée au menu plein écran */
    .main-nav .nav-dropdown {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .main-nav .nav-drop-menu {
        position: static;
        transform: none;
        min-width: 0;
        padding: 0;
        background: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border: none;
        box-shadow: none;
        display: none;
        opacity: 1;
        visibility: visible;
    }
    .main-nav .nav-dropdown.is-open .nav-drop-menu {
        display: flex;
        flex-direction: column;
        align-items: center;
        transform: none;
    }
    .main-nav .nav-drop-link {
        justify-content: center;
        font-size: 1.1rem;
        padding: 10px 20px;
    }
    .lang-switch { margin: 18px 0 0; opacity: 0.7; }
    .lang-btn { font-size: 0.95rem; }
    .lang-sep { font-size: 0.95rem; }
}

@media (max-width: 760px) {
    .site-header { top: 12px; padding: 0 14px; }
    .header-inner { gap: 12px; padding: 6px 8px 6px 16px; }
    .brand-mark img { height: 26px; }
    .gallery-grid { padding: 0 16px; column-gap: 14px; }
    .gallery-item { margin-bottom: 14px; }
    .footer-inner { grid-template-columns: 1fr; gap: 28px; }
    .letter { padding: 44px 22px 34px; }
    .letter::before { left: 14px; }
    .letter-sign-row { justify-content: flex-end; }
    .letter-sign-row input { width: 124px; }
    .letter-sign-email input { width: 240px; }
    .lightbox { grid-template-columns: 44px 1fr 44px; }
    .lightbox-stage img { max-height: calc(100vh - 240px); max-height: calc(100svh - 240px); }
    .lightbox-thumb { width: 52px; height: 40px; }
    .shops-band-inner { padding: 48px 24px; }
}