/* ==========================================================================
   PERJES Sécurité :feuille de style principale
   Charte noir & or issue du design validé (claude.ai/design).
   Le front office est porté par body.front ; l'admin garde un thème clair.
   ========================================================================== */

:root {
    --black: #0a0908;
    --panel: #100e0b;
    --panel-2: #15120d;
    --paper: #ece6da;
    --paper-dim: #b6ad9d;
    --muted: #7e776b;
    --gold-1: #e8d49a;
    --gold-2: #c4a05a;
    --gold-3: #9a7526;
    --red: #E30613;
    --red-2: #E30613;
    --red-line: rgba(227, 6, 19, 0.45);
    --line: rgba(201, 162, 74, 0.26);
    --line-soft: rgba(201, 162, 74, 0.14);
    --gold-grad: linear-gradient(90deg, #d7cf88 0%, #e9dca4 18%, #f5efd2 42%, #ecdcad 60%, #dabf86 82%, #c9a86a 100%);
    --maxw: 1240px;

    /* admin */
    --color-dark: #0a0a0a;
    --color-gold: #c9a24b;
    --max-width: 1200px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: "Helvetica Neue", Arial, sans-serif;
    color: #222;
    background: #fff;
    line-height: 1.6;
}

/* ---------- front office ---------- */
body.front {
    background: var(--black);
    color: var(--paper);
    font-family: "Nunito Sans", "Museo Sans", -apple-system, sans-serif;
    font-weight: 400;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    letter-spacing: .005em;
    overflow-x: hidden;
}

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

/* ---------- type ---------- */
.serif { font-family: "Cormorant Garamond", Georgia, serif; }
body.front :where(h1, h2, h3) { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 400; margin: 0; }
.eyebrow {
    font-family: "Nunito Sans", sans-serif;
    font-size: .72rem;
    letter-spacing: .42em;
    text-transform: uppercase;
    color: var(--gold-2);
    font-weight: 500;
}
.gold {
    background: var(--gold-grad);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.mono { font-family: "JetBrains Mono", monospace; }

body.front ::selection { background: var(--gold-1); color: #0a0908; text-shadow: none; }
body.front ::-moz-selection { background: var(--gold-1); color: #0a0908; text-shadow: none; }

/* ---------- layout ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 56px; }
.content_max_width { max-width: var(--max-width); margin: 0 auto; padding: 0 20px; }
body.front section { position: relative; }

/* ---------- boutons ---------- */
body.front .btn {
    display: inline-flex; align-items: center; gap: .7em;
    font-family: "Nunito Sans", sans-serif;
    font-size: .78rem; letter-spacing: .22em; text-transform: uppercase; font-weight: 600;
    padding: 16px 30px; cursor: pointer; text-decoration: none;
    transition: .35s ease; border: 1px solid transparent; white-space: nowrap;
    background: transparent; border-radius: 0;
}
body.front .btn-gold { background: var(--gold-grad); color: #1c1608; border: none; }
body.front .btn-gold:hover { filter: brightness(1.05); color: #1c1608; transform: translateY(-1px); }
body.front .btn-ghost { background: transparent; color: var(--gold-2); border: 1px solid var(--line); }
body.front .btn-ghost:hover { border-color: var(--gold-2); color: var(--gold-1); background: rgba(201, 162, 74, .05); }
.arrow { font-size: .9em; }

/* ---------- header ---------- */
body.front #header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 60;
    padding: 24px 0;
    transition: background .45s ease, padding .45s ease, border-color .45s ease;
    border-bottom: 1px solid transparent;
    background: transparent;
}
body.front #header.scrolled {
    background: rgba(8, 7, 6, .86); backdrop-filter: blur(12px);
    padding: 14px 0; border-bottom: 1px solid var(--line-soft);
}
.nav { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.brand { display: flex; align-items: center; gap: 20px; text-decoration: none; }
.brand-logo { height: 100px; width: auto; display: block; transition: height .45s ease; }
#header.scrolled .brand-logo { height: 74px; }
.brand-tag {
    font-size: .6rem; letter-spacing: .32em; text-transform: uppercase; color: var(--paper-dim);
    border-left: 1px solid var(--line); padding-left: 18px; line-height: 1.55; max-width: 160px; font-weight: 500;
}
.menu-btn {
    display: flex; align-items: center; gap: 14px; background: transparent; border: none; cursor: pointer;
    font-family: "Nunito Sans", sans-serif; color: var(--paper);
    font-size: .88rem; letter-spacing: .3em; text-transform: uppercase; font-weight: 700;
}
.menu-btn .lines { display: flex; flex-direction: column; gap: 8px; width: 40px; }
.menu-btn .lines span { height: 2px; background: var(--gold-2); width: 100%; transition: .35s; }
.menu-btn:hover .lines span { background: var(--gold-1); }
.menu-btn:hover .lines span:nth-child(2) { width: 70%; }

/* ---------- menu plein écran ---------- */
.overlay {
    position: fixed; inset: 0; z-index: 80; background: #070605;
    display: flex; flex-direction: column;
    opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility .5s ease;
}
.overlay.open { opacity: 1; visibility: visible; }
.overlay-top { display: flex; align-items: center; justify-content: space-between; padding: 24px 56px; border-bottom: 1px solid var(--line-soft); }
.overlay-close {
    background: transparent; border: none; color: var(--paper); cursor: pointer;
    font-size: .7rem; letter-spacing: .28em; text-transform: uppercase; font-weight: 700;
    display: flex; align-items: center; gap: 12px; transition: .3s;
}
.overlay-close:hover { color: var(--gold-1); }
.overlay-close .x { font-size: 1.5rem; line-height: 1; color: var(--gold-2); }
.overlay-body { flex: 1; display: grid; grid-template-columns: 1.5fr 1fr; min-height: 0; }
.overlay-nav { display: flex; flex-direction: column; justify-content: center; padding: 40px 56px 40px 92px; gap: 4px; }
.overlay-nav a {
    font-family: "Nunito Sans", "Myriad Pro", sans-serif; color: var(--paper); text-decoration: none;
    font-size: 2rem; letter-spacing: .01em; line-height: 1.3; font-weight: 300;
    display: flex; align-items: baseline; gap: 22px; transition: color .3s, transform .3s; width: fit-content;
    opacity: 0; transform: translateY(18px);
}
.overlay.open .overlay-nav a { opacity: 1; transform: translateY(0); transition: color .3s, transform .6s cubic-bezier(.16, 1, .3, 1), opacity .6s ease; }
.overlay-nav a .idx { display: inline-block; width: 34px; height: 2px; background: var(--red); vertical-align: middle; margin-right: 6px; transition: width .35s cubic-bezier(.16, 1, .3, 1); }
.overlay-nav a:hover .idx { width: 54px; }
.overlay-nav a:hover { color: var(--gold-1); transform: translateX(12px); }
.overlay-nav a.active { color: var(--gold-1); }
.overlay-nav a.active .idx { width: 54px; }
.overlay-side { border-left: 1px solid var(--line-soft); padding: 0 56px; display: flex; flex-direction: column; justify-content: center; gap: 34px; }
.overlay-side .blk h5 { font-size: .64rem; letter-spacing: .3em; text-transform: uppercase; color: var(--gold-2); margin: 0 0 12px; font-weight: 700; }
.overlay-side .blk a,
.overlay-side .blk p { display: block; color: var(--paper-dim); text-decoration: none; font-weight: 300; font-size: 1rem; margin: 0 0 6px; transition: .3s; }
.overlay-side .blk a:hover { color: var(--gold-1); }

/* ---------- hero éditorial ---------- */
.page-hero {
    position: relative; min-height: 100vh; display: flex; flex-direction: column; justify-content: center;
    background: var(--black); overflow: hidden; padding-top: 132px;
}
.page-hero::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
    background: radial-gradient(70% 55% at 75% 8%, rgba(201, 162, 74, .07), transparent 62%);
}
.hero-sketch {
    position: absolute; top: 0; right: 0; bottom: 0; z-index: 1; pointer-events: none;
    width: min(58vw, 720px);
    background: url("/imgs/illustration-bijouterie.jpg") right center / contain no-repeat;
    mix-blend-mode: screen;
    opacity: 0;
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 46%, rgba(0, 0, 0, 0) 56%);
    mask-image: linear-gradient(90deg, #000 0%, #000 46%, rgba(0, 0, 0, 0) 56%);
    -webkit-mask-size: 215% 100%; mask-size: 215% 100%;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: 100% 0; mask-position: 100% 0;
    animation: heroDraw 11s ease-in-out infinite;
}
@keyframes heroDraw {
    0%   { -webkit-mask-position: 100% 0; mask-position: 100% 0; opacity: 0; }
    10%  { opacity: .55; }
    52%  { -webkit-mask-position: 0% 0; mask-position: 0% 0; opacity: .55; }
    80%  { -webkit-mask-position: 0% 0; mask-position: 0% 0; opacity: .55; }
    100% { -webkit-mask-position: 0% 0; mask-position: 0% 0; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-sketch { animation: none; opacity: .4; -webkit-mask-position: 0 0; mask-position: 0 0; }
}
.page-hero .hero-inner { position: relative; z-index: 5; width: 100%; }
.hero-eyebrow {
    display: flex; align-items: center; gap: 18px; margin-bottom: 40px;
    opacity: 0; transform: translateY(14px); transition: opacity 1.2s ease .15s, transform 1.2s ease .15s;
}
.page-hero.in .hero-eyebrow { opacity: 1; transform: none; }
.hero-eyebrow .mk { width: 54px; height: 1px; background: var(--red-2); }
.hero-eyebrow span { font-size: .72rem; letter-spacing: .36em; text-transform: uppercase; color: var(--gold-2); font-weight: 600; }
body.front .page-hero h1 {
    font-family: "Nunito Sans", sans-serif; font-weight: 800; text-transform: uppercase; color: #fff;
    font-size: clamp(2.2rem, 5vw, 5.4rem); line-height: 1.02; letter-spacing: -.012em; margin: 0;
}
.page-hero h1 .ln { display: block; overflow: hidden; }
.page-hero h1 .ln > i { display: block; font-style: normal; transform: translateY(115%); transition: transform 1.8s cubic-bezier(.16, 1, .3, 1); }
.page-hero.in h1 .ln:nth-child(1) > i { transition-delay: .25s; }
.page-hero.in h1 .ln:nth-child(2) > i { transition-delay: .5s; }
.page-hero.in h1 .ln:nth-child(3) > i { transition-delay: .75s; }
.page-hero.in h1 .ln:nth-child(4) > i { transition-delay: 1s; }
.page-hero.in h1 .ln > i { transform: translateY(0); }
.page-hero h1 em { font-style: normal; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-foot {
    display: flex; justify-content: flex-start; margin-top: 54px;
    opacity: 0; transform: translateY(14px); transition: opacity 1.4s ease 1.5s, transform 1.4s ease 1.5s;
}
.page-hero.in .hero-foot { opacity: 1; transform: none; }
.hero-foot-inner { display: flex; flex-direction: column; gap: 26px; border-left: 1px solid var(--line); padding-left: 34px; }
.hero-sub { max-width: 406px; color: var(--paper-dim); font-weight: 300; font-size: 1.08rem; line-height: 1.75; margin: 0; }
.hero-scroll {
    display: inline-flex; align-items: center; gap: 16px; text-decoration: none;
    font-size: .66rem; letter-spacing: .28em; text-transform: uppercase; color: var(--paper-dim); font-weight: 600;
}
.hero-scroll .ln { position: relative; width: 60px; height: 1px; background: var(--line); overflow: hidden; }
.hero-scroll .ln::after { content: ""; position: absolute; inset: 0; background: var(--red-2); transform: translateX(-100%); animation: scrollLine 2.4s ease-in-out infinite; }
@keyframes scrollLine { 0% { transform: translateX(-100%); } 50% { transform: translateX(0); } 100% { transform: translateX(100%); } }

/* ---------- savoir-faire ---------- */
.sf { padding: 120px 0; }
.sf-grid { display: grid; grid-template-columns: 1fr 1.02fr; gap: 80px; align-items: center; }
.sf-imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sf-imgs .im {
    position: relative; overflow: hidden; border: 1px solid var(--line); height: 250px;
    filter: grayscale(1) contrast(1.05);
    background: linear-gradient(135deg, var(--panel) 0%, var(--panel-2) 100%);
}
.sf-imgs .im:nth-child(even) { margin-top: 38px; }
.sf-imgs .im img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sf-imgs .im .fr { position: absolute; inset: 9px; border: 1px solid var(--line-soft); pointer-events: none; }
.sf-head .eyebrow { display: flex; align-items: center; gap: 18px; margin-bottom: 22px; }
.sf-head .eyebrow .mk { width: 44px; height: 1px; background: var(--red-2); }
.sf-text h2 { font-size: 2.6rem; line-height: 1.1; margin-bottom: 28px; }
.sf-text p { color: var(--paper-dim); font-weight: 300; margin: 0 0 18px; font-size: 1.04rem; }
.sf-text strong { color: var(--paper); font-weight: 600; }
.sf-note { margin-top: 34px; color: var(--red-2); font-size: .82rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; }

/* ---------- histoire / frise ---------- */
.histoire { background: var(--panel-2); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); padding: 120px 0; }
.hi-head { text-align: center; margin-bottom: 76px; }
.hi-head .eyebrow { display: block; margin-bottom: 16px; }
.hi-head h2 { font-size: 2.9rem; line-height: 1.1; }
.timeline { position: relative; max-width: 900px; margin: 0 auto; }
.timeline::before { content: ""; position: absolute; left: calc(50% - .5px); top: 6px; bottom: 6px; width: 1px; background: linear-gradient(180deg, transparent, var(--line), var(--line), transparent); }
/* frise */
.tl-item {
    position: relative; width: 50%; padding: 0 54px 56px;
    opacity: 0; transition: opacity .9s ease, transform 1s cubic-bezier(.16, 1, .3, 1);
}
.tl-item:last-child { padding-bottom: 0; }
.tl-item.left { left: 0; text-align: right; transform: translateX(-48px); }
.tl-item.right { left: 50%; text-align: left; transform: translateX(48px); }
.tl-item.in { opacity: 1; transform: none; }
.tl-item .dot { position: absolute; top: 8px; width: 13px; height: 13px; transform: rotate(45deg); background: var(--black); border: 1px solid var(--gold-2); transition: border-color .5s ease .35s; }
.tl-item.left .dot { right: -6.5px; }
.tl-item.right .dot { left: -6.5px; }
.tl-item .dot::after { content: ""; position: absolute; inset: 3px; background: var(--red); opacity: 0; transition: opacity .5s ease .35s; }
.tl-item.in .dot { border-color: var(--red); }
.tl-item.in .dot::after { opacity: 1; }
.tl-item:hover .dot { border-color: var(--red); }
.tl-item:hover .dot::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
    .tl-item { opacity: 1; transform: none; transition: none; }
}
.tl-year {
    font-family: "Cormorant Garamond", serif; font-size: 2.6rem; line-height: 1; font-weight: 500;
    background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 12px;
}
.tl-item p { color: var(--paper-dim); font-weight: 300; font-size: .98rem; line-height: 1.6; margin: 0; }
.tl-item p strong { color: var(--paper); font-weight: 600; }

/* ---------- valeurs ---------- */
.valeurs-sec { padding: 120px 0; }
.valeurs-sec .v-head { text-align: center; margin-bottom: 70px; }
.valeurs-sec .v-head .eyebrow { display: block; }
.valeurs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--line-soft); border: 1px solid var(--line-soft); }
.valeurs .valeur { background: var(--black); padding: 52px 40px; text-align: center; transition: background .4s ease; }
.valeurs .valeur:hover { background: var(--panel); }
.v-ic { width: 74px; height: 74px; margin: 0 auto 24px; border: 1px solid var(--line); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: border-color .4s ease; }
.valeur:hover .v-ic { border-color: var(--gold-2); }
.v-ic svg { width: 32px; height: 32px; stroke: var(--gold-2); fill: none; stroke-width: 1.2; }
.valeur .vt { font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--paper); font-weight: 600; line-height: 1.6; }
.valeurs .valeur .vt::after { content: ""; display: block; width: 22px; height: 2px; background: var(--red); margin: 14px auto 0; transition: width .4s ease; }
.valeurs .valeur:hover .vt::after { width: 44px; }

/* ---------- CTA ---------- */
.cta { position: relative; text-align: center; padding: 130px 0 140px; border-top: 1px solid var(--line-soft); overflow: hidden; }
.cta-building {
    position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); z-index: 1;
    height: 100%; pointer-events: none;
    background: url("/imgs/illustration-batiment.jpg") center center no-repeat;
    background-size: min(1080px, 86vw) auto; opacity: .42;
    mix-blend-mode: screen;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
}
.cta-inner { position: relative; z-index: 3; }
.cta h2 { font-size: 4.4rem; letter-spacing: .04em; line-height: 1.05; margin: 0 0 40px; }

/* ---------- footer ---------- */
body.front #footer { background: #070605; border-top: 1px solid var(--line); padding: 80px 0 44px; margin: 0; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 50px; }
.foot-logo { height: 84px; width: auto; display: block; }
.foot-brand p { color: var(--muted); font-weight: 300; font-size: .92rem; margin: 22px 0 0; max-width: 300px; }
.foot-col h4 { font-size: .72rem; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-2); font-weight: 600; margin: 0 0 22px; }
.foot-col a,
.foot-col p { display: block; color: var(--paper-dim); text-decoration: none; font-size: .92rem; font-weight: 300; margin: 0 0 12px; transition: .3s; }
.foot-col a:hover { color: var(--gold-1); }
.foot-bottom { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 64px; padding-top: 26px; border-top: 1px solid var(--line-soft); }
.foot-bottom span { color: var(--muted); font-size: .78rem; letter-spacing: .08em; }
.foot-legal { display: flex; gap: 18px; list-style: none; margin: 0; padding: 0; }
.foot-legal a { color: var(--muted); text-decoration: none; font-size: .78rem; transition: .3s; }
.foot-legal a:hover { color: var(--gold-1); }
.foot-signature { margin: 22px 0 0; text-align: center; color: var(--muted); font-size: .74rem; letter-spacing: .1em; font-weight: 300; }
.foot-signature a { color: var(--muted); text-decoration: none; transition: color .3s; }
.foot-signature a:hover { color: var(--gold-2); }

/* ==========================================================================
   ACCUEIL :sections spécifiques
   ========================================================================== */

.section-pad { padding: 130px 0; }
.sec-head { display: flex; align-items: center; gap: 22px; margin-bottom: 18px; }
.sec-head .mark { width: 44px; height: 1px; background: var(--red-2); flex: none; }

/* cadre d'image */
.ph {
    position: relative; overflow: hidden;
    background:
        repeating-linear-gradient(135deg, rgba(201, 162, 74, .05) 0 1px, transparent 1px 13px),
        linear-gradient(155deg, #181410 0%, #0d0b08 100%);
    border: 1px solid var(--line);
    display: flex; align-items: center; justify-content: center;
}
.ph .frame { position: absolute; inset: 10px; border: 1px solid var(--line-soft); pointer-events: none; z-index: 2; }
.ph > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* révélation au scroll */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s ease, transform .9s cubic-bezier(.16, 1, .3, 1); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- réalisations ---------- */
.reveal-band { background: var(--black); padding: 0 0 14px; }
.rb-head { max-width: var(--maxw); margin: 0 auto; padding: 96px 56px 44px; }
.rb-head h2 { font-size: clamp(2.7rem, 4.6vw, 3.9rem); line-height: 1.04; margin-top: 8px; }
.rb-head .rb-intro { margin-top: 24px; color: var(--paper-dim); font-weight: 300; font-size: 1.02rem; line-height: 1.7; }
.rb-track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 0 14px; }
.rb-item {
    position: relative; overflow: hidden; margin: 0; height: 60vh; min-height: 430px;
    clip-path: inset(0 0 100% 0); transition: clip-path 1.1s cubic-bezier(.16, 1, .3, 1);
    background: linear-gradient(155deg, #181410 0%, #0d0b08 100%); border: 1px solid var(--line-soft);
}
.rb-item:nth-child(even) { margin-top: 48px; }
.rb-item img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.16); transition: transform 1.5s cubic-bezier(.16, 1, .3, 1); filter: grayscale(.25) contrast(1.04); }
.rb-item.in { clip-path: inset(0 0 0 0); }
.rb-item.in img { transform: scale(1); }
.rb-item:hover img { filter: grayscale(0) contrast(1.05); transform: scale(1.04); }
.rb-item::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(8, 7, 6, .35), transparent 30%, transparent 60%, rgba(8, 7, 6, .78)); }
.rb-cap {
    position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 3;
    font-family: "Nunito Sans", sans-serif; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
    color: #fff; font-weight: 600;
}

/* ---------- savoir-faire (accueil) ---------- */
.sf-imgs .ph { width: 100%; height: 248px; filter: grayscale(1) contrast(1.05); }
.sf-imgs .ph:nth-child(even) { margin-top: 38px; }

/* ---------- chiffres défilants ---------- */
.stats-band {
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--panel);
    position: relative; overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.stats-track { display: flex; width: max-content; animation: statsMarquee 42s linear infinite; }
.stats-band:hover .stats-track { animation-play-state: paused; }
.stats-group { display: flex; flex: none; }
.stat { flex: none; width: clamp(240px, 21vw, 320px); padding: 54px 30px; text-align: center; border-right: 1px solid var(--line-soft); position: relative; }
.stat .num { font-family: "Cormorant Garamond", serif; font-size: 2.5rem; line-height: 1; font-weight: 500; }
.stat .lbl { margin-top: 12px; font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--paper-dim); font-weight: 500; line-height: 1.5; }
.stats-band::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; z-index: 2; pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(196, 160, 90, .13) 45%, rgba(232, 212, 154, .18) 50%, rgba(196, 160, 90, .13) 55%, transparent);
    animation: statsSweep 7s ease-in-out infinite;
}
@keyframes statsMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes statsSweep { 0% { transform: translateX(-60%); } 100% { transform: translateX(360%); } }
@media (prefers-reduced-motion: reduce) {
    .stats-track, .valeurs-track { animation: none; }
    .stats-band::after, .valeurs-band::after { animation: none; opacity: 0; }
}

/* ---------- solutions ---------- */
.sol-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 64px; }
/* cartes solutions */
.sol-card { position: relative; border: 1px solid var(--line); background: var(--panel); transition: .4s; cursor: pointer; }
.sol-card:hover { border-color: var(--gold-2); transform: translateY(-4px); }
.sol-card:focus-within { border-color: var(--gold-2); outline: 1px solid var(--gold-2); outline-offset: 3px; }
.sol-link::after { content: ""; position: absolute; inset: 0; z-index: 4; }
.sol-card .ph { height: 340px; border: none; border-bottom: 1px solid var(--line); }
.sol-body { padding: 44px 44px 48px; }
.sol-kicker { font-size: .7rem; letter-spacing: .34em; text-transform: uppercase; color: var(--gold-2); font-weight: 600; }
.sol-card h3 { font-size: 2.3rem; margin: 14px 0 10px; letter-spacing: .04em; }
.sol-card .tag { color: var(--paper); font-weight: 300; font-style: italic; font-family: "Cormorant Garamond", serif; font-size: 1.35rem; line-height: 1.4; margin-bottom: 22px; }
.sol-card p { color: var(--paper-dim); font-weight: 300; font-size: .96rem; margin: 0 0 28px; }
.sol-link { display: inline-flex; align-items: center; gap: 12px; color: var(--gold-1); text-decoration: none; font-size: .76rem; letter-spacing: .22em; text-transform: uppercase; font-weight: 600; }
.sol-link .ln { width: 34px; height: 1px; background: var(--red-2); transition: .3s; }
.sol-card:hover .sol-link .ln { width: 54px; }

/* ---------- nouvelle offre ---------- */
.offer { background: var(--panel-2); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.offer-head { text-align: center; max-width: 760px; margin: 0 auto; }
.offer-tick { display: block; width: 42px; height: 1px; background: var(--gold-2); margin: 0 auto 22px; }
/* titre de l'offre */
.offer-title {
    display: flex; align-items: center; justify-content: center;
    flex-wrap: nowrap; white-space: nowrap;
    gap: clamp(12px, 1.6vw, 26px);
    font-size: clamp(1.05rem, 2.35vw, 2.6rem);
}
.offer-title .sep { width: clamp(16px, 2vw, 34px); height: 2px; background: var(--red); flex: none; }
.offer-intro { color: var(--paper-dim); font-weight: 300; font-size: 1.08rem; line-height: 1.75; margin: 26px auto 0; max-width: 640px; }
.offer-img { position: relative; overflow: hidden; margin: 56px 0 0; height: 340px; }
.offer-img img { filter: grayscale(1) contrast(1.05); }
.piliers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 28px; }
.pilier { padding: 64px 44px 56px; text-align: center; border: 1px solid var(--line-soft); background: rgba(255, 255, 255, .012); transition: border-color .4s ease, transform .4s ease, background .4s ease; }
.pilier:hover { border-color: var(--line); transform: translateY(-5px); background: rgba(201, 162, 74, .03); }
.ic-wrap { width: 104px; height: 104px; margin: 0 auto 34px; border: 1px solid var(--line); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: transform .4s ease, border-color .4s ease; }
.pilier:hover .ic-wrap { transform: translateY(-3px); border-color: var(--gold-2); }
.ic { width: 44px; height: 44px; stroke: var(--gold-2); fill: none; stroke-width: 1.15; }
.pilier h3 { font-size: 1.7rem; letter-spacing: .04em; margin-bottom: 0; }
.pilier h3::after { content: ""; display: block; width: 24px; height: 2px; background: var(--red); margin: 16px auto 0; transition: width .4s ease; }
.pilier:hover h3::after { width: 48px; }
.pilier p { color: var(--paper-dim); font-weight: 300; font-size: .94rem; margin: 16px 0 0; }

/* ---------- valeurs défilantes (accueil) ---------- */
.valeurs-band {
    position: relative; overflow: hidden; margin-top: 58px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.valeurs-track { display: flex; width: max-content; animation: valeursMarquee 40s linear infinite reverse; }
.valeurs-band:hover .valeurs-track { animation-play-state: paused; }
.valeurs-group { display: flex; flex: none; }
.valeurs-band .valeur { flex: none; width: clamp(210px, 17vw, 290px); text-align: center; padding: 0 16px; background: none; }
.valeurs-band .valeur .vt { font-size: .78rem; letter-spacing: .14em; }
.valeurs-band::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 34%; z-index: 2; pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(177, 67, 47, .10) 45%, rgba(200, 90, 68, .16) 50%, rgba(177, 67, 47, .10) 55%, transparent);
    animation: statsSweep 8s ease-in-out infinite;
}
@keyframes valeursMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- références ---------- */
.refs { text-align: center; background: #ebebeb; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.refs .eyebrow { color: #9a8348; }
.logos { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px 20px; max-width: 1080px; margin: 54px auto 0; }
.logo-cell { position: relative; display: flex; align-items: center; justify-content: center; padding: 18px 10px; min-height: 108px; }
.logo-img { max-height: 78px; width: auto; max-width: 96%; object-fit: contain; display: block; mix-blend-mode: multiply; opacity: .88; transition: opacity .4s ease, transform .4s ease; }
.logo-cell:hover .logo-img { opacity: 1; transform: translateY(-3px); }

/* fond travaillé du CTA accueil */
.cta-bg {
    position: absolute; inset: 0; z-index: 0;
    background:
        repeating-linear-gradient(135deg, rgba(201, 162, 74, .04) 0 1px, transparent 1px 18px),
        radial-gradient(70% 120% at 50% 0%, #1a140c 0%, #0a0807 70%);
}
.cta-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 80% at 50% 50%, transparent, rgba(8, 7, 6, .7)); }

@media (max-width: 1080px) {
    .rb-track { grid-template-columns: 1fr 1fr; }
    .rb-item:nth-child(even) { margin-top: 0; }
    .logos { grid-template-columns: repeat(3, 1fr); }
    .sol-grid { grid-template-columns: 1fr; }
    .piliers { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
    .rb-head { padding: 48px 28px 32px; }
    .rb-track { grid-template-columns: 1fr; }
    .section-pad { padding: 64px 0; }
    .offer-title { flex-direction: column; gap: 14px; }
    .offer-title .sep { width: 34px; }
}

/* ==========================================================================
   CONTACT
   ========================================================================== */

/* hero du contact */
body.front .page-hero.hero-serif h1 {
    font-family: "Cormorant Garamond", Georgia, serif; font-weight: 400;
    text-transform: none;
    font-size: clamp(2.6rem, 5.4vw, 5.8rem); line-height: 1.06; letter-spacing: .01em;
}

.contact-main { padding: 110px 0 100px; }
.cm-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 70px; align-items: start; }

/* ---------- carte formulaire ---------- */
.form-card { position: relative; border: 1px solid var(--line); background: var(--panel); padding: 52px 52px 48px; }
.form-card::before,
.form-card::after { content: ""; position: absolute; width: 46px; height: 46px; border: 1px solid var(--gold-2); }
.form-card::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.form-card::after { bottom: -1px; right: -1px; border-left: none; border-top: none; }
.form-card .fc-head { margin-bottom: 36px; }
.form-card .fc-head .eyebrow { display: block; margin-bottom: 12px; }
.form-card .fc-head h2 { font-size: 2rem; line-height: 1.1; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 24px; }
.field { display: flex; flex-direction: column; gap: 9px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--paper-dim); font-weight: 600; }
.field label .opt { color: var(--muted); font-weight: 400; letter-spacing: .1em; }
.field input,
.field textarea,
.field select {
    background: transparent; border: none; border-bottom: 1px solid var(--line);
    color: var(--paper); font-family: "Nunito Sans", sans-serif; font-size: .98rem; font-weight: 300;
    padding: 9px 2px; transition: border-color .35s ease; border-radius: 0;
}
.field textarea { resize: vertical; min-height: 120px; line-height: 1.6; }
.field input::placeholder,
.field textarea::placeholder { color: var(--muted); opacity: .7; }
.field input:focus,
.field textarea:focus,
.field select:focus { outline: none; border-bottom-color: var(--gold-2); }
.field select { appearance: none; cursor: pointer; color: var(--paper-dim); }
.field select option { background: var(--panel); color: var(--paper); }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.recaptcha-wrap { margin-top: 6px; }
.recaptcha-wrap .g-recaptcha { max-width: 100%; overflow: hidden; }
.form-actions { grid-column: 1 / -1; margin-top: 14px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.form-note { color: var(--muted); font-size: .76rem; font-weight: 300; max-width: 280px; line-height: 1.5; }

/* ---------- coordonnees ---------- */
.coords { display: flex; flex-direction: column; }
.coords .c-head { margin-bottom: 34px; }
.coords .c-head .eyebrow { display: block; margin-bottom: 12px; }
.coords .c-head h2 { font-size: 2rem; line-height: 1.1; }
.coord { display: flex; gap: 22px; padding: 26px 0; border-top: 1px solid var(--line-soft); }
.coord:last-of-type { border-bottom: 1px solid var(--line-soft); }
.coord .ic { width: 52px; height: 52px; flex: none; border: 1px solid var(--line); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: border-color .4s ease; }
.coord:hover .ic { border-color: var(--gold-2); }
.coord .ic svg { width: 22px; height: 22px; stroke: var(--gold-2); fill: none; stroke-width: 1.3; }
.coord .ct h4 { font-family: "Nunito Sans", sans-serif; font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-2); font-weight: 700; margin: 0 0 8px; }
.coord .ct p,
.coord .ct a { display: block; color: var(--paper); text-decoration: none; font-weight: 300; font-size: 1.02rem; line-height: 1.5; margin: 0; transition: color .3s; }
.coord .ct a:hover { color: var(--gold-1); }
.coord .ct .sub { color: var(--paper-dim); font-size: .9rem; }
.coords .sav { margin-top: 30px; display: flex; align-items: center; gap: 14px; color: var(--red-2); font-size: .76rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; }
.coords .sav .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); flex: none; box-shadow: 0 0 0 0 rgba(227, 6, 19, .5); animation: pulse 2.4s ease-out infinite; }
@keyframes pulse {
    0%   { box-shadow: 0 0 0 0 rgba(227, 6, 19, .45); }
    70%  { box-shadow: 0 0 0 12px rgba(227, 6, 19, 0); }
    100% { box-shadow: 0 0 0 0 rgba(227, 6, 19, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .coords .sav .dot { animation: none; }
}

/* ---------- carte ---------- */
.map-band { position: relative; height: 460px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; background: #0c0b09; }
.map-band #map { position: absolute; inset: 0; width: 100%; height: 100%; background: #0c0b09; z-index: 1; }
.map-band .leaflet-tile-pane { filter: grayscale(1) invert(.92) contrast(.92) hue-rotate(180deg) brightness(.85); }
.map-band .leaflet-control-attribution { background: rgba(8, 7, 6, .8); color: var(--muted); font-size: .68rem; }
.map-band .leaflet-control-attribution a { color: var(--gold-2); }
.map-band .leaflet-bar a { background: rgba(8, 7, 6, .88); color: var(--gold-1); border-bottom-color: var(--line-soft); }
.map-band .leaflet-bar a:hover { background: rgba(20, 17, 12, .95); color: var(--gold-1); }
.map-band .leaflet-popup-content-wrapper,
.map-band .leaflet-popup-tip { background: #0f0d0a; color: var(--paper); border: 1px solid var(--line); border-radius: 0; }
.map-band .leaflet-popup-content { font-family: "Nunito Sans", sans-serif; font-size: .88rem; font-weight: 300; }
.map-band .leaflet-container a.leaflet-popup-close-button { color: var(--gold-2); }
.map-overlay {
    position: absolute; left: 56px; bottom: 40px; z-index: 3;
    background: rgba(8, 7, 6, .9); border: 1px solid var(--line); backdrop-filter: blur(6px);
    padding: 28px 32px; max-width: 340px;
}
.map-overlay .eyebrow { display: block; margin-bottom: 12px; }
.map-overlay h3 { font-size: 1.5rem; margin-bottom: 8px; }
.map-overlay p { color: var(--paper-dim); font-weight: 300; font-size: .94rem; margin: 0 0 20px; line-height: 1.5; }
.map-overlay a { display: inline-flex; align-items: center; gap: 12px; color: var(--gold-1); text-decoration: none; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; }
.map-overlay a .ln { width: 32px; height: 1px; background: var(--gold-2); transition: width .3s; }
.map-overlay a:hover .ln { width: 52px; }
.map-pin svg { width: 34px; height: 44px; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .6)); }
.map-pin .halo { position: absolute; left: 50%; bottom: -4px; transform: translateX(-50%); width: 26px; height: 8px; border-radius: 50%; background: rgba(227, 6, 19, .35); }

/* ---------- reassurance ---------- */
.reassure { background: var(--panel-2); border-bottom: 1px solid var(--line-soft); }
.reassure .wrap { display: flex; align-items: center; justify-content: center; gap: 48px; padding: 34px 56px; flex-wrap: wrap; }
.reassure .ra { display: flex; align-items: center; gap: 14px; color: var(--paper-dim); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; }
.reassure .ra .st { width: 5px; height: 5px; transform: rotate(45deg); background: var(--gold-2); flex: none; }
.reassure .ra strong { color: var(--paper); font-weight: 700; }

@media (max-width: 1080px) {
    .cm-grid { grid-template-columns: 1fr; gap: 54px; }
    .map-overlay { left: 28px; right: 28px; max-width: none; }
}
@media (max-width: 680px) {
    .form-grid { grid-template-columns: 1fr; }
    .form-card { padding: 38px 28px; }
    .contact-main { padding: 80px 0 70px; }
    .reassure .wrap { gap: 22px; }
}

/* ==========================================================================
   PAGES PRODUIT :Système Light, Système Hight, Alarme & Vidéosurveillance
   ========================================================================== */

.sec-title { font-size: clamp(1.9rem, 3vw, 2.7rem); line-height: 1.12; max-width: 720px; }
.sec-lead { color: var(--paper-dim); font-weight: 300; font-size: 1.06rem; line-height: 1.75; max-width: 700px; margin: 22px 0 0; }
.sec-lead strong { color: var(--paper); font-weight: 600; }

/* bandeau sombre intercalaire */
.band-panel { background: var(--panel-2); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }

/* listes de spécifications */
.specs { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; margin-top: 58px; }
.specs-col h3 { font-family: "Nunito Sans", sans-serif; font-size: .72rem; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-2); font-weight: 700; margin: 0 0 26px; }
.spec-list { list-style: none; margin: 0; padding: 0; }
.spec-list li { position: relative; padding: 0 0 14px 26px; color: var(--paper-dim); font-weight: 300; font-size: .98rem; line-height: 1.6; }
.spec-list li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; transform: rotate(45deg); background: var(--gold-2); }
.spec-list li strong { color: var(--paper); font-weight: 600; }
.spec-list.serre li { padding-bottom: 10px; }

/* trois repères chiffrés */
.reperes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--line-soft); border: 1px solid var(--line-soft); margin-top: 58px; }
.repere { background: var(--black); padding: 44px 36px; text-align: center; }
.repere .val { font-family: "Cormorant Garamond", serif; font-size: 2.4rem; line-height: 1; font-weight: 500; }
.repere .lib { margin-top: 14px; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--paper-dim); font-weight: 500; line-height: 1.6; }

/* encart de clôture */
.encart { margin-top: 62px; border: 1px solid var(--line); background: var(--panel); padding: 40px 46px; display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }
.encart .ico { width: 56px; height: 56px; flex: none; border: 1px solid var(--line); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.encart .ico svg { width: 24px; height: 24px; stroke: var(--gold-2); fill: none; stroke-width: 1.3; }
.encart p { margin: 0; color: var(--paper-dim); font-weight: 300; font-size: 1rem; line-height: 1.65; flex: 1 1 340px; }
.encart p strong { color: var(--paper); font-weight: 600; }

/* visuel pleine largeur */
.visuel-large { position: relative; height: 420px; overflow: hidden; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.visuel-large img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.4) contrast(1.05) brightness(.75); }
.visuel-large .lgd { position: absolute; left: 56px; bottom: 34px; z-index: 2; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--paper); font-weight: 600; }
.visuel-large::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 7, 6, .5), transparent 40%, rgba(8, 7, 6, .85)); }

@media (max-width: 1080px) {
    .specs { grid-template-columns: 1fr; gap: 42px; }
    .reperes { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
    .encart { padding: 30px 26px; }
    .visuel-large { height: 300px; }
    .visuel-large .lgd { left: 28px; }
}

/* ==========================================================================
   RGPD :bandeau de consentement et voile de la carte
   ========================================================================== */

.rgpd {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    background: rgba(8, 7, 6, .97); border-top: 1px solid var(--line);
    backdrop-filter: blur(10px);
    transform: translateY(100%); transition: transform .6s cubic-bezier(.16, 1, .3, 1);
}
.rgpd.visible { transform: translateY(0); }
.rgpd.parti { transform: translateY(100%); }
.rgpd-inner {
    max-width: var(--maxw); margin: 0 auto; padding: 26px 56px;
    display: flex; align-items: center; gap: 40px; flex-wrap: wrap;
}
.rgpd-texte { flex: 1 1 420px; }
.rgpd-texte h2 { font-size: 1.4rem; margin-bottom: 8px; }
.rgpd-texte p { margin: 0; color: var(--paper-dim); font-weight: 300; font-size: .9rem; line-height: 1.6; }
.rgpd-texte a { color: var(--gold-2); text-decoration: underline; text-underline-offset: 3px; }
.rgpd-texte a:hover { color: var(--gold-1); }
.rgpd-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.map-consent {
    position: absolute; inset: 0; z-index: 4;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
    text-align: center; padding: 40px 28px;
    background:
        repeating-linear-gradient(135deg, rgba(201, 162, 74, .05) 0 1px, transparent 1px 13px),
        linear-gradient(155deg, #181410 0%, #0d0b08 100%);
}
.map-consent p { max-width: 460px; margin: 0; color: var(--paper-dim); font-weight: 300; font-size: .96rem; line-height: 1.6; }
.map-consent .map-consent-adr { color: var(--muted); font-size: .82rem; }

/* ==========================================================================
   PAGES LÉGALES
   ========================================================================== */

.legal { padding: 200px 0 120px; }
.legal-inner { max-width: 780px; }
.legal h1 { font-size: clamp(2.2rem, 4.4vw, 3.4rem); line-height: 1.1; margin-bottom: 14px; }
.legal .maj { color: var(--muted); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; }
.legal h2 { font-size: 1.6rem; line-height: 1.2; margin: 58px 0 18px; }
.legal h3 { font-family: "Nunito Sans", sans-serif; font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-2); font-weight: 700; margin: 34px 0 12px; }
.legal p { color: var(--paper-dim); font-weight: 300; font-size: 1rem; line-height: 1.75; margin: 0 0 16px; }
.legal p strong { color: var(--paper); font-weight: 600; }
.legal a { color: var(--gold-2); text-decoration: underline; text-underline-offset: 3px; }
.legal a:hover { color: var(--gold-1); }
.legal ul { list-style: none; margin: 0 0 20px; padding: 0; }
.legal li { position: relative; padding: 0 0 12px 24px; color: var(--paper-dim); font-weight: 300; line-height: 1.7; }
.legal li::before { content: ""; position: absolute; left: 0; top: .68em; width: 5px; height: 5px; transform: rotate(45deg); background: var(--gold-2); }
.legal li strong { color: var(--paper); font-weight: 600; }
.legal .rappel { border-left: 1px solid var(--line); padding: 4px 0 4px 26px; margin: 26px 0; }
.legal-table { width: 100%; border-collapse: collapse; margin: 8px 0 24px; }
.legal-table th,
.legal-table td { text-align: left; padding: 14px 18px 14px 0; border-bottom: 1px solid var(--line-soft); font-weight: 300; color: var(--paper-dim); font-size: .94rem; vertical-align: top; }
.legal-table th { color: var(--gold-2); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; }
.legal-choix { display: flex; gap: 14px; flex-wrap: wrap; margin: 26px 0 10px; }
.legal-etat { display: inline-flex; align-items: center; gap: 10px; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--paper-dim); }
.legal-etat .pt { width: 8px; height: 8px; transform: rotate(45deg); background: var(--gold-2); }
.legal-etat.oui .pt { background: #4caf50; }
.legal-etat.non .pt { background: var(--red); }

@media (max-width: 680px) {
    .rgpd-inner { padding: 22px 28px; gap: 20px; }
    .rgpd-actions { width: 100%; }
    .rgpd-actions .btn { flex: 1 1 auto; justify-content: center; }
    .legal { padding: 150px 0 80px; }
}

/* ---------- pages techniques (404, placeholder accueil) ---------- */
body.front .error-404 { text-align: center; padding: 220px 0 140px; }
body.front .error-404 h1 { font-size: 80px; margin: 0; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
body.front .error-404 a { color: var(--gold-2); }
.hero-placeholder { padding: 220px 0 140px; text-align: center; }
.hero-placeholder h1 { color: var(--gold-2); letter-spacing: 4px; font-size: 42px; margin: 0 0 10px; }
.hero-placeholder .baseline { color: var(--paper-dim); letter-spacing: 1px; }

/* ---------- admin : thème clair conservé ---------- */
body.admin a { color: var(--color-gold); text-decoration: none; }
body.admin .btn { display: inline-block; padding: 12px 28px; background: var(--color-gold); color: #fff; border: none; border-radius: 2px; letter-spacing: 1px; text-transform: uppercase; font-size: 14px; cursor: pointer; }
body.admin .btn-block { display: block; width: 100%; }
.login-page { display: flex; justify-content: center; padding: 80px 20px; background: var(--color-dark); min-height: 70vh; }
.login-box { background: #fff; padding: 40px; width: 100%; max-width: 380px; border-radius: 4px; }
.login-box h1 { margin: 0; }
.login-sub { color: var(--color-gold); letter-spacing: 1px; margin: 4px 0 24px; }
.login-box label { display: block; margin: 14px 0 6px; font-size: 14px; }
.login-box input { width: 100%; padding: 11px; border: 1px solid #ccc; border-radius: 2px; }
.login-box button { margin-top: 24px; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
    .overlay-body { grid-template-columns: 1fr; }
    .overlay-side { display: none; }
    .sf-grid { grid-template-columns: 1fr; gap: 54px; }
    .valeurs { grid-template-columns: repeat(2, 1fr); }
    .timeline::before { left: 8px; }
    .tl-item { width: 100%; left: 0 !important; text-align: left !important; padding: 0 0 48px 42px; }
    .tl-item .dot { left: 2px !important; right: auto !important; }
    .foot-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}
@media (max-width: 680px) {
    .wrap { padding: 0 28px; }
    .valeurs { grid-template-columns: 1fr; }
    .page-hero { min-height: auto; padding: 140px 0 64px; }
    .brand-tag { display: none; }
    .brand-logo { height: 62px; }
    #header.scrolled .brand-logo { height: 50px; }
    .menu-btn { font-size: .74rem; gap: 10px; }
    .menu-btn .lines { width: 32px; gap: 7px; }
    .overlay-nav { padding: 40px 28px; }
    .overlay-nav a { font-size: 1.5rem; }
    .overlay-top { padding: 24px 28px; }
    .cta h2 { font-size: 2.6rem; }
    .foot-bottom { flex-direction: column; align-items: flex-start; }
}