/* ==========================================================================
   COMMUNE DE SPECHBACH - Page « Site en cours de construction »
   Page temporaire autonome (ne dépend pas de style.css).
   Charte D3 « Magazine Couleur » : bleu profond + or + crème.
   Polices auto-hébergées (RGPD) : aucune dépendance Google Fonts.
   ========================================================================== */

/* ---------- Polices auto-hébergées (RGPD) ---------- */
@font-face { font-family:"Poppins"; src:url("../fonts/Poppins-SemiBold.woff2") format("woff2"); font-weight:600; font-display:swap; }
@font-face { font-family:"Poppins"; src:url("../fonts/Poppins-Bold.woff2") format("woff2");     font-weight:700; font-display:swap; }
@font-face { font-family:"Poppins"; src:url("../fonts/Poppins-ExtraBold.woff2") format("woff2");font-weight:800; font-display:swap; }
@font-face { font-family:"Lato";    src:url("../fonts/Lato-Regular.woff2") format("woff2");      font-weight:400; font-display:swap; }
@font-face { font-family:"Lato";    src:url("../fonts/Lato-Bold.woff2") format("woff2");         font-weight:700; font-display:swap; }

:root{
    --blue-deep:#0a2742;
    --blue:#134472;
    --blue-mid:#1F70B8;
    --blue-light:#5DA0D8;
    --gold:#FCCE36;
    --gold-soft:#F0C419;
    --cream:#FBF8EE;
    --ink:#1F1F1F;
    --white:#ffffff;

    --ff-display:"Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --ff-body:"Lato", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    --radius:18px;
    --radius-lg:28px;
    --shadow:0 18px 40px rgba(10,39,66,.28);
    --tr:240ms cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}

body{
    margin:0;
    font-family:var(--ff-body);
    font-size:1.0625rem;
    line-height:1.65;
    color:rgba(255,255,255,.88);
    background:var(--blue-deep);
    overflow-x:hidden;
}

::selection{background:rgba(252,206,54,.35);color:#fff;}
a{text-decoration:none;color:inherit;}
img,svg{max-width:100%;height:auto;vertical-align:middle;}

.wrap{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    position:relative;
}

/* Arrière-plan : dégradé bleu profond + halos or/bleu */
.bg{
    position:fixed;
    inset:0;
    z-index:-2;
    background:
        radial-gradient(1100px 560px at 12% 8%, rgba(252,206,54,.16), transparent 58%),
        radial-gradient(900px 480px at 88% 18%, rgba(93,160,216,.22), transparent 55%),
        linear-gradient(180deg, #0a2742 0%, #103a61 60%, #0a2742 100%);
}

/* Fine texture pour casser l'aplat (SVG inline, aucune requête réseau) */
.noise{
    position:fixed;
    inset:0;
    z-index:-1;
    opacity:.06;
    pointer-events:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

.container{
    width:min(1120px, 92%);
    margin:0 auto;
}

/* ==========================================================================
   En-tête
   ========================================================================== */
.top{padding:22px 0;}

.brand{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    flex-wrap:wrap;
}

.brand-id{
    display:flex;
    align-items:center;
    gap:14px;
}

.brand-id img{
    width:58px;
    height:58px;
    object-fit:contain;
    filter:drop-shadow(0 6px 14px rgba(0,0,0,.3));
}

.brand-id .t1{
    font-family:var(--ff-display);
    font-weight:800;
    letter-spacing:.01em;
    font-size:1.2rem;
    line-height:1.1;
    color:#fff;
}

.brand-id .t2{
    display:block;
    margin-top:3px;
    font-size:.78rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--gold);
    font-weight:700;
}

.chips{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    justify-content:flex-end;
}

.chip{
    display:inline-flex;
    align-items:center;
    gap:9px;
    padding:9px 15px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.18);
    background:rgba(255,255,255,.07);
    font-weight:700;
    font-size:.92rem;
    color:#fff;
    transition:transform var(--tr), border-color var(--tr), background var(--tr);
}

.chip:hover{transform:translateY(-1px);border-color:var(--gold);background:rgba(255,255,255,.12);}
.chip .ico{font-size:1rem;line-height:1;color:var(--gold);}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{padding:46px 0 26px;}

.card{
    border-radius:var(--radius-lg);
    border:1px solid rgba(255,255,255,.14);
    background:rgba(255,255,255,.055);
    box-shadow:var(--shadow);
    overflow:hidden;
}

.hero-inner{
    padding:40px 34px;
    display:grid;
    grid-template-columns:1.25fr .75fr;
    gap:30px;
    align-items:center;
}

.badge{
    display:inline-flex;
    align-items:center;
    gap:9px;
    padding:8px 15px;
    border-radius:999px;
    font-weight:800;
    font-size:.74rem;
    text-transform:uppercase;
    letter-spacing:.12em;
    color:var(--blue-deep);
    background:var(--gold);
    box-shadow:0 10px 24px rgba(252,206,54,.3);
    width:fit-content;
}

.badge .dot{
    width:8px;height:8px;border-radius:50%;
    background:var(--blue-deep);
    animation:pulse 1.8s ease-in-out infinite;
}

@keyframes pulse{0%,100%{opacity:.35;}50%{opacity:1;}}

h1{
    margin:18px 0 14px;
    font-family:var(--ff-display);
    font-weight:800;
    letter-spacing:-.02em;
    line-height:1.08;
    color:#fff;
    font-size:clamp(2rem, 1.4rem + 3.4vw, 3.2rem);
}

h1 .accent{color:var(--gold);}

.sub{
    margin:0 0 22px;
    color:rgba(255,255,255,.82);
    max-width:640px;
    font-size:1.08rem;
}

.actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:6px;
}

.btn{
    border:0;
    cursor:pointer;
    font-family:var(--ff-display);
    font-weight:700;
    font-size:.95rem;
    border-radius:999px;
    padding:13px 22px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    transition:transform var(--tr), box-shadow var(--tr), filter var(--tr);
    white-space:nowrap;
}

.btn-primary{
    color:var(--blue-deep);
    background:var(--gold);
    box-shadow:0 12px 26px rgba(252,206,54,.32);
}
.btn-primary:hover{transform:translateY(-2px);filter:brightness(1.04);box-shadow:0 16px 32px rgba(252,206,54,.4);}

.btn-ghost{
    color:#fff;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.22);
}
.btn-ghost:hover{transform:translateY(-2px);border-color:var(--gold);}

/* Carte latérale : coordonnées + horaires */
.side{
    border-left:1px solid rgba(255,255,255,.14);
    padding-left:30px;
}

.side h2{
    margin:0 0 14px;
    font-family:var(--ff-display);
    font-weight:700;
    font-size:1.15rem;
    color:var(--gold);
}

.infos{
    list-style:none;
    margin:0 0 20px;
    padding:0;
    display:grid;
    gap:11px;
}

.infos li{
    display:flex;
    gap:11px;
    align-items:flex-start;
    font-size:.98rem;
}

.infos .ico{
    flex:0 0 auto;
    width:34px;height:34px;
    border-radius:11px;
    display:flex;align-items:center;justify-content:center;
    background:rgba(252,206,54,.14);
    color:var(--gold);
    font-size:1rem;
}

.infos a:hover{color:var(--gold);}

.hours{
    border-top:1px solid rgba(255,255,255,.14);
    padding-top:16px;
}

.hours h3{
    margin:0 0 10px;
    font-family:var(--ff-display);
    font-weight:600;
    font-size:.92rem;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:rgba(255,255,255,.7);
}

.hours ul{list-style:none;margin:0;padding:0;display:grid;gap:6px;}

.hours li{
    display:flex;
    justify-content:space-between;
    gap:12px;
    font-size:.95rem;
    padding-bottom:5px;
    border-bottom:1px dashed rgba(255,255,255,.1);
}
.hours li:last-child{border-bottom:0;}
.hours .day{font-weight:700;color:#fff;}
.hours .h{color:rgba(255,255,255,.8);}
.hours .h.closed{color:rgba(255,255,255,.42);font-style:italic;}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer{
    margin-top:auto;
    padding:26px 0 34px;
    border-top:1px solid rgba(255,255,255,.1);
    color:rgba(255,255,255,.6);
    font-size:.92rem;
}

.footer .row{
    display:flex;
    gap:14px;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
}

.footer a:hover{color:var(--gold);}
.footer .by{color:rgba(255,255,255,.45);}
.footer .by a{color:rgba(255,255,255,.7);}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:860px){
    .brand{flex-direction:column;align-items:flex-start;}
    .chips{justify-content:flex-start;}
    .hero-inner{grid-template-columns:1fr;padding:30px 22px;gap:26px;}
    .side{
        border-left:0;
        padding-left:0;
        border-top:1px solid rgba(255,255,255,.14);
        padding-top:24px;
    }
}

/* Respect des préférences d'animation réduite (a11y) */
@media (prefers-reduced-motion:reduce){
    *{animation:none !important;transition:none !important;scroll-behavior:auto !important;}
}