:root{
    /* Couleurs principales */
    --black:#0d0d0d;   /* Noir profond pour les fonds */
    --white:#fff;      /* Blanc pur pour contrastes */
    --line:#111;       /* Noir “encre” pour traits */
    --gold:#b9965a;    /* Doré premium (accents) */
    --muted:#d8d8d8;   /* Gris clair pour textes secondaires */

    /* Arrondis */
    --radius:18px;     /* Coins arrondis standards */
    --radius-lg:22px;  /* Coins arrondis plus larges */

    /* Dimensions globales */
    --maxw:1180px;     /* Largeur maximale du contenu */
    --gap:28px;        /* Espace générique */

    /* Polices */
    --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; /* Texte courant */
    --font-title:"Cinzel",serif; /* Titres élégants */
}

/* Accessibilité : cacher du texte visuellement (screen readers uniquement) */
.visually-hidden{
    position:absolute!important; height:1px; width:1px; overflow:hidden;
    clip:rect(1px,1px,1px,1px); white-space:nowrap;
}

/* Base footer */
.site-footer{ font-family:var(--font); color:var(--white); }

/* =========================
   NEWSLETTER — style carte
   ========================= */
.newsletter-wrap{ padding:24px 16px; background:#fff; }
.newsletter{
    /* Conteneur principal de la newsletter */
    max-width:var(--maxw);
    margin:0 auto;
    display:grid;
    grid-template-columns:1fr 1fr; /* Deux colonnes : photo + formulaire */
    gap:24px;
    align-items:center;
    background:#fff;
    border:6px solid var(--gold);
    border-radius:20px;
    padding:18px;
    color:#111;
}
.news-photo img{
    /* Image à gauche */
    width:100%;
    aspect-ratio:4/3;
    object-fit:cover;
    border-radius:14px;
    box-shadow:0 12px 26px rgba(0,0,0,.08);
}
.news-title{
    /* Titre newsletter */
    margin:0 0 8px;
    text-align:center;
    font-family:var(--font-title);
    letter-spacing:.5px;
    font-size:22px;
    color:#111;
}
.news-form{
    /* Formulaire : input + bouton */
    display:grid;
    grid-template-columns:1fr auto;
    gap:10px;
    align-items:center;
    max-width:520px;
    margin-inline:auto;
}
.news-form input{
    width:100%;
    height:46px;
    padding:10px 12px;
    border-radius:12px;
    border:1px solid #e7e7e7;
    font-size:16px; /* évite zoom iOS */
    outline:none;
    transition:border-color .18s ease, box-shadow .18s ease;
}
.news-form input:focus{
    border-color:var(--gold);
    box-shadow:0 0 0 3px rgba(185,150,90,.16);
}
.news-submit{
    /* Bouton envoi (valeur par défaut ; sera uniformisé plus bas) */
    width:46px; height:46px;
    border-radius:12px;
    border:2px solid var(--gold);
    background:var(--gold);
    color:#fff;
    display:inline-grid; place-items:center;
    cursor:pointer;
    transition:filter .18s ease, box-shadow .18s ease, transform .06s ease;
}
.news-submit:hover{ filter:brightness(1.05); box-shadow:0 8px 22px rgba(185,150,90,.18); }
.news-submit:active{ transform:translateY(1px); }
.news-text{
    /* Texte d’explication sous le formulaire */
    margin:8px 0 0;
    color:#222;
    line-height:1.45;
    text-align:center;
    max-width:640px;
    margin-inline:auto;
}

/* Messages de retour */
.flash{ margin:6px 0 0; font-size:14px; }
.flash.ok{ color:#2e7d32; }  /* Succès (vert) */
.flash.ko{ color:#c62828; }  /* Erreur (rouge) */

/* =========================
   FOOTER NOIR
   ========================= */
.footer-main{
    background:var(--black);
    padding:56px 0 42px;
    position:relative;
}
.footer-container{
    /* Structure principale */
    max-width:1320px;
    margin:0 auto 18px;
    padding:0 18px;
    display:grid;
    grid-template-columns:420px 1fr; /* gauche : logo/adresse, droite : liens */
    gap:40px 48px;
    align-items:start;
}

/* Colonne gauche */
.f-left .brand-logo{
    width:160px; height:160px; border-radius:50%; object-fit:cover;
    display:block; margin-bottom:16px; border:2px solid rgba(255,255,255,.12);
    box-shadow:0 10px 26px rgba(0,0,0,.25);
}
.f-left .addr{ font-style:normal; }
.f-left .addr p{ margin:10px 0; line-height:1.6; color:var(--muted); }
.f-left .addr a{ color:#fff; text-decoration:none; border-bottom:1px solid transparent; }
.f-left .addr a:hover,
.f-left .addr a:focus-visible{ border-color:#fff; outline:none; }

/* Réseaux sociaux */
.socials{ display:flex; gap:12px; margin-top:16px; flex-wrap:wrap; }
.social{
    width:44px; height:44px; display:grid; place-items:center;
    color:#fff; border:1px solid #fff; border-radius:50%;
    transition:background .2s ease, color .2s ease, transform .06s ease, border-color .2s ease;
    box-shadow:0 8px 16px rgba(0,0,0,.18);
}
.social:nth-child(3){ color:#f39c12; border-color: #fffdfd; } /* Icône spéciale Borneō */
/* Style général (tous les réseaux) */
/* Style général (tous les réseaux) */
/* Hover général (tous sauf exceptions) */
.social:hover {
    background: #fff;
    color: #000;
    transform: translateY(-1px);
}

/* Facebook = 1er */
.social:nth-child(1):hover {
    background: #1877F2;   /* bleu Facebook */
    color: #fff;
    border-color: #1877F2;
}

/* Instagram = 2e */
.social:nth-child(2):hover {
    background: #C13584;   /* violet/rose Instagram */
    color: #fff;
    border-color: #C13584;
}

/* Borneō = 3e (déjà fait) */
.social:nth-child(3):hover {
    background: #f39c12;   /* orange */
    color: #fff;
    border-color: #f39c12;
}


.social:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

/* Colonne droite */
.f-right{
    display:grid;
    grid-template-columns:repeat(2,minmax(220px,1fr));
    gap:28px 48px;
}

/* =========================
   Accordéons (mobile)
   ========================= */
.footer-accordion summary{
    list-style:none;
    font-family:var(--font-title);
    font-size:16px;
    color:var(--gold);
    cursor:pointer;
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 0;
}
.footer-accordion summary::after{
    /* Flèche indicatrice */
    content:"›";
    transform:rotate(90deg);
    transition:transform .25s ease;
    font-size:18px;
    color:var(--white);
}
.footer-accordion[open] summary::after{ transform:rotate(-90deg); }

.footer-accordion ul{
    list-style:none; margin:0; padding:0;
    display:grid; gap:6px;
    max-height:0; overflow:hidden; transition:max-height .35s ease;
}
.footer-accordion[open] ul{ max-height:300px; }

.links-col a{
    /* Liens footer */
    color:#fff; text-decoration:none; opacity:.95; border-bottom:1px solid transparent;
    line-height:1.6; font-size:15px; padding:2px 0;
    transition:opacity .2s, border-color .2s, transform .06s;
}
.links-col a:hover,
.links-col a:focus-visible{
    opacity:1; border-color:#fff; transform:translateX(1px); outline:none;
}

/* Ligne de séparation subtile */
.footer-divider{
    height:1px; margin:10px 0 6px;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent);
    border:0;
}

/* Copyright + barre dorée */
.copy{
    text-align:center; margin:22px 0 14px; font-size:13px;
    color:rgba(255,255,255,.85);
}
.gold-bar{
    position:absolute; left:0; right:0; bottom:0; height:12px;
    background:linear-gradient(90deg,#caa564,#b9965a 40%,#e7c880 100%);
}

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width:980px){
    .newsletter{ grid-template-columns:1fr; text-align:center; }
    .footer-container{ grid-template-columns:1fr; gap:28px; }
    .f-right{ grid-template-columns:1fr; gap:16px; }
    .f-left .brand-logo{ margin-inline:auto; }
    .copy{ padding:0 12px; }
    .f-left .addr{ text-align:center; }
    .socials{ justify-content:center; }
}

@media (max-width:640px){
    /* Newsletter compacte */
    .newsletter{
        grid-template-columns:1fr;
        gap:12px;
        padding:14px;
        border-width:3px;
        border-radius:16px;
    }
    .news-photo img{ aspect-ratio:16/9; border-radius:12px; }
    .news-title{ font-size:18px; margin-bottom:4px; }
    .news-form{ grid-template-columns:1fr auto; gap:8px; margin-top:2px; border:0; box-shadow:none; }
    .news-form input{ height:44px; padding:10px 12px; font-size:16px; }
    .news-submit{ width:44px; height:44px; }
    .news-text{ font-size:14px; line-height:1.45; margin-top:2px; }
}

@media (max-width:420px){
    .social{ width:42px; height:42px; }
    .footer-main{ padding-top:44px; }
}

/* Motion safe (désactive transitions si option réduite activée) */
@media (prefers-reduced-motion:reduce){
    *{ transition:none !important; }
}

/* ===== Version bureau (≥769px) : accordéons ouverts / non cliquables ===== */
@media (min-width:769px){
    .footer-accordion{ border:0; padding:0; }
    .footer-accordion summary{ pointer-events:none; padding:0; margin:0 0 8px; }
    .footer-accordion summary::-webkit-details-marker{ display:none; }
    .footer-accordion summary::after{ display:none !important; }
    .footer-accordion ul{ max-height:none !important; overflow:visible !important; }
}

/* =========================
   Overrides newsletter — PAGE RESTAURANT
   (on garde l’input transparent, mais pas le bouton submit)
   ========================= */
.rest-page ~ .site-footer .news-form,
.rest-page ~ .site-footer .news-form *{
    box-shadow:none !important;
    background:transparent !important;
}
.rest-page ~ .site-footer .news-form{
    border:0 !important;
    grid-template-columns:1fr auto;
    position:relative;
}
.rest-page ~ .site-footer .news-form input{
    /* Input transparent (fond sombre) */
    -webkit-appearance:none; appearance:none;
    width:100%;
    color:#fff !important;
    background:transparent !important;
    border-radius:0 !important;
    border:none !important;
    border-bottom:2px solid rgba(255,255,255,.45) !important;
    padding:12px 44px 12px 8px;
    letter-spacing:.06em;
}
.rest-page ~ .site-footer .news-form input::placeholder{
    color:rgba(255,255,255,.65) !important;
    text-transform:uppercase; font-weight:500;
}
.rest-page ~ .site-footer .news-form input:focus{
    border-bottom:2px solid var(--gold) !important;
    box-shadow:0 3px 0 rgba(185,150,90,.28) inset !important;
}

/* =========================
   ⚠️ UNIFORMISATION DÉFINITIVE DU BOUTON SUBMIT
   (mettre ce bloc tout en bas pour gagner la cascade)
   ========================= */
.site-footer .news-form .news-submit{
    /* carré exact */
    box-sizing:border-box;
    width:46px;
    height:46px;
    padding:0 !important;
    line-height:46px;

    /* visuel */
    border-radius:12px;
    border:2px solid var(--gold);
    background:var(--gold);
    color:#fff;

    display:inline-grid;
    place-items:center;

    cursor:pointer;
    transition:filter .18s ease, box-shadow .18s ease, transform .06s ease;
}
.site-footer .news-form .news-submit:hover{
    filter:brightness(1.05);
    box-shadow:0 8px 22px rgba(185,150,90,.18);
}
.site-footer .news-form .news-submit:active{ transform:translateY(1px); }

/* Si la flèche est un <svg>, elle héritera bien du blanc */
.site-footer .news-form .news-submit svg{
    width:16px; height:16px; fill:currentColor;
}

/* Page Restaurant : on force le bouton doré plein et on annule l’absolu */
.rest-page ~ .site-footer .news-form .news-submit{
    background:var(--gold) !important;
    border:2px solid var(--gold) !important;
    color:#fff !important;

    position:static !important;
    top:auto !important; right:auto !important; transform:none !important;

    padding:0 !important;
    box-sizing:border-box !important;
}
/* === NEWSLETTER — bouton flèche : même rendu partout (carré 46x46 doré) === */
.site-footer .news-form{
    grid-template-columns: 1fr auto;       /* champ | bouton */
    align-items: center;
    gap: 10px;                              /* espace net entre les deux */
    overflow: visible;                      /* évite un clipping du bouton */
}

.site-footer .news-form input{
    height: 46px;
    border-radius: 12px;
    box-sizing: border-box;
}

/* Bouton flèche unifié */
.site-footer .news-form .news-submit{
    /* carré exact (pas gonflé par le padding UA) */
    box-sizing: border-box;
    width: 46px;
    height: 46px;
    padding: 0 !important;
    line-height: 46px;

    /* visuel */
    border-radius: 12px;
    border: 2px solid var(--gold);
    background: var(--gold);
    color: #fff;

    /* placement et centrage */
    position: static !important;            /* (annule tout absolute/transform) */
    margin: 0 !important;                   /* pas de décalage intempestif */
    display: inline-grid;
    place-items: center;

    /* feedback */
    cursor: pointer;
    transition: filter .18s ease, box-shadow .18s ease, transform .06s ease;
}
.site-footer .news-form .news-submit:hover{
    filter: brightness(1.05);
    box-shadow: 0 8px 22px rgba(185,150,90,.18);
}
.site-footer .news-form .news-submit:active{ transform: translateY(1px); }

/* Si c'est un <svg> pour la flèche */
.site-footer .news-form .news-submit svg{
    width: 16px; height: 16px; fill: currentColor;
}

/* === Cas “page Restaurant” : neutralise les styles transparents globaux === */
.rest-page ~ .site-footer .news-form .news-submit{
    background: var(--gold) !important;
    border: 2px solid var(--gold) !important;
    color: #fff !important;

    position: static !important;
    top: auto !important;
    right: auto !important;
    transform: none !important;

    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}