/* ===========================
   RESET / BASE
   =========================== */
*{box-sizing:border-box}
html,body{margin:0;padding:0;max-width:100%;overflow-x:hidden}
img,video,canvas,svg{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit}

/* ===========================
   THEME (clair par défaut)
   =========================== */
:root{
  --bg:#ffffff; --text:#111827; --muted:#6b7280; --stroke:#e5e7eb;
  --brand:#dc2626; --brand-2:#b91c1c; --accent:#ffffff;
  --card:#0b0b0b; --card-text:#ffffff; --card-img-bg:#111;
  --header-bg:rgba(255,255,255,.9); --header-border:#e5e7eb;
  --hero-overlay-from:rgba(0,0,0,.45); --hero-overlay-to:rgba(0,0,0,.30);
  --drawer-bg:#ffffff; --menu-hover:#f3f4f6; --backdrop:rgba(0,0,0,.45);

  /* Contrastes sur cartes (bouton téléphone) */
  --on-card:#ffffff; --phone-border:rgba(255,255,255,.45);
  --phone-border-hover:#ffffff; --phone-bg-hover:rgba(255,255,255,.08);

  /* Typo fluide */
  --fs-h1: clamp(1.6rem, 2.6vw + .4rem, 2.6rem);
  --fs-h2: clamp(1.3rem, 1.8vw + .3rem, 2rem);
  --fs-h3: clamp(1.05rem, 1.2vw + .2rem, 1.4rem);
}
html[data-theme="dark"]{
  --bg:#0b0b0b; --text:#e5e7eb; --muted:#9ca3af; --stroke:#222;
  --card:#ffffff; --card-text:#111827; --card-img-bg:#f3f4f6;
  --header-bg:rgba(11,11,11,.9); --header-border:#222;
  --drawer-bg:#0f0f0f; --menu-hover:#161616; --backdrop:rgba(0,0,0,.55);

  --on-card:#111827; --phone-border:#cbd5e1;
  --phone-border-hover:#111827; --phone-bg-hover:rgba(0,0,0,.06);
}

body{
  background:var(--bg); color:var(--text);
  font:16px/1.5 "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.container{max-width:1140px;margin:0 auto;padding:0 16px}
@media (min-width:1280px){ .container{max-width:1200px} }

h1{font-size:var(--fs-h1)} h2{font-size:var(--fs-h2)} h3{font-size:var(--fs-h3)}

/* ===========================
   HEADER / NAV
   =========================== */
header{
  position:sticky; top:0; z-index:40;
  background:var(--header-bg);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--header-border);
}
nav.container{display:flex;align-items:center;gap:12px;min-height:62px}

.logo-img{height:48px;width:auto;object-fit:contain;background:transparent;display:block}
@media (min-width:900px){ .logo-img{height:56px} }
.logo{display:inline-flex;align-items:center;gap:10px;font-weight:800;color:var(--brand)}
.logo .logo-mark{display:none!important}
.menu{display:flex;align-items:center;gap:12px}
.menu a{color:var(--text);padding:8px 10px;border-radius:8px;min-height:44px}
.menu a:hover{background:var(--menu-hover)}
.nav-spacer{display:none}

/* Burger */
.nav-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border:1px solid var(--stroke);border-radius:10px;
  color:var(--text);cursor:pointer;background:transparent;
}

/* ======= ANCIEN MENU TÉLÉPHONE : POPOVER TRANSPARENT EN HAUT-DROITE ======= */
/* Mobile: header opaque (pas de blur) */
@media (max-width:1023px){
  header{background:var(--bg)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}

  /* Popover compact aligné en haut-droite, conteneur transparent */
  .nav-check ~ .menu{
    position: fixed !important;
    top: calc(64px + 8px) !important;
    right: 10px !important;
    left: auto !important; bottom: auto !important;

    background: transparent !important; /* conteneur invisible */
    border: 0 !important;
    box-shadow: none !important;

    padding: 10px !important;
    width: auto !important;
    max-width: calc(100vw - 24px) !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 8px !important;

    transform: translateY(-8px) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: transform .18s ease, opacity .18s ease, visibility .18s !important;
    z-index: 999 !important;
  }
  .nav-check:checked ~ .menu{
    transform: translateY(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Boutons pill — theme-aware (centre le texte) */
  :root{ --pill-w: 180px; }
  #navMenu.menu a[data-as="button"]{
    display: inline-flex !important;
    align-self: flex-end !important;
    justify-content: center !important;
    text-align: center !important;

    width: 100% !important;
    max-width: var(--pill-w) !important;
    padding: .55rem .9rem !important;
    font-size: .95rem !important;
    line-height: 1.15 !important;

    background: var(--bg) !important;
    color: var(--text) !important;
    border: 1px solid var(--stroke) !important;
    border-radius: 12px !important;

    box-shadow: 0 4px 14px rgba(0,0,0,.08) !important;
    transition: background .15s, border-color .15s, color .15s, transform .15s !important;
  }
  #navMenu.menu a[data-as="button"] + a[data-as="button"]{ margin-top: 8px !important; }
  #navMenu.menu a[data-as="button"]:hover{
    background: var(--menu-hover) !important;
    transform: translateY(-1px) !important;
  }

  /* Variante Admin rouge */
  #navMenu.menu a[data-as="button"].outline{
    border-color: var(--brand) !important;
    color: var(--brand) !important;
    background: var(--bg) !important;
  }
  #navMenu.menu a[data-as="button"].outline:hover{
    border-color: var(--brand-2) !important;
    color: var(--brand-2) !important;
  }

  /* Backdrop plein écran (fermeture au clic) */
  .backdrop{
    position: fixed !important; inset: 0 !important;
    background: var(--backdrop) !important;
    opacity: 0 !important; visibility: hidden !important;
    transition: opacity .18s, visibility .18s !important;
    z-index: 990 !important;
  }
  .nav-check:checked ~ .backdrop{ opacity: 1 !important; visibility: visible !important; }
}

/* Desktop : menu horizontal à droite */
@media (min-width:1024px){
  .nav-toggle,.backdrop,.nav-check{display:none!important}
  #navMenu.menu{
    position:static!important; transform:none!important; width:auto!important;
    padding:0!important; background:transparent!important; border:0!important; box-shadow:none!important;
    display:flex!important; flex-direction:row!important; align-items:center!important; gap:10px!important;
    margin-left:auto; /* pousse à droite */
  }
  #navMenu.menu a[data-as="button"]{
    display:inline-flex;align-items:center;justify-content:center;text-align:center;
    padding:10px 14px;border-radius:10px;font-weight:600;white-space:nowrap;line-height:1.2;
    border:1px solid var(--stroke); background:transparent; color:var(--text);
    transition:transform .12s, background .12s, border-color .12s, color .12s;
    height:44px;
  }
  #navMenu.menu a[data-as="button"]:hover{background:var(--menu-hover);transform:translateY(-1px)}
  #navMenu.menu a[data-as="button"].outline{border-color:var(--brand);color:var(--brand)}
  #navMenu.menu a[data-as="button"].outline:hover{border-color:var(--brand-2);color:var(--brand-2)}
}

/* ===========================
   BOUTONS
   =========================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 16px;border-radius:10px;font-weight:600;
  border:1px solid var(--brand);background:var(--brand);color:var(--accent);
  min-height:44px;
}
.btn:hover{background:var(--brand-2);border-color:var(--brand-2);transform:translateY(-1px);transition:all .12s}
.btn.secondary{background:transparent;color:var(--text);border-color:var(--stroke)}
.btn.secondary:hover{border-color:#cbd5e1}

/* ===========================
   HERO
   =========================== */
.hero{padding:22px 0 10px}
.hero-bg{position:relative;overflow:hidden;border:1px solid var(--stroke);border-radius:16px;min-height:320px}
.hero-bg .hero-image{position:absolute;inset:0;background-image:var(--hero);background-size:cover;background-position:var(--hero-pos,center)}
.hero-bg .hero-image::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--hero-overlay-from),var(--hero-overlay-to))}
.hero-bg .hero-copy{position:relative;z-index:1;color:#fff;padding:28px 18px;max-width:720px}
.hero-bg .hero-copy .badge{display:inline-block;font-weight:700;font-size:.78rem;color:#fff;background:rgba(220,38,38,.92);border:1px solid rgba(255,255,255,.25);padding:6px 10px;border-radius:999px}
.hero-bg .hero-copy h1{margin:10px 0 8px;color:#fff;font-size:clamp(24px,4vw,42px);line-height:1.1}
.hero-bg .hero-copy p{color:#e5e7eb;margin:0}
.hero-bg .btn.secondary{color:#fff;border-color:rgba(255,255,255,.55)}
.hero-bg .btn.secondary:hover{border-color:#fff}
@media (min-width:900px){ .hero-bg{min-height:420px} }

/* ===========================
   GRILLES / CARTES
   =========================== */
.grid{display:grid;gap:16px;grid-template-columns:repeat(1,minmax(0,1fr))}
@media (min-width:720px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

.card{
  background:var(--card); color:var(--card-text);
  border:1px solid var(--stroke); border-radius:14px; overflow:hidden;
}
.card img{
  width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; background:var(--card-img-bg)
}
.card .p{padding:12px 14px}
.card h3{margin:0 0 6px;color:var(--card-text);font-size:1.05rem}
.meta{display:flex;flex-wrap:wrap;gap:.6rem;color:var(--muted);font-size:.9rem;margin:.25rem 0 .5rem}
.price{color:var(--card-text);font-weight:800;margin:.25rem 0 0;font-size:1.05rem}
.card .cta{display:flex;gap:8px;flex-wrap:wrap}
@media (min-width:900px){ .card .cta{flex-wrap:nowrap} }

/* Bouton “Appeler” lisible sur carte */
.card .cta .btn.phone, .card .cta a[href^="tel:"]{
  background:transparent; color:var(--on-card)!important;
  border:1px solid var(--phone-border); box-shadow:none;
}
.card .cta .btn.phone:hover, .card .cta a[href^="tel:"]:hover{
  background:var(--phone-bg-hover); color:var(--on-card)!important; border-color:var(--phone-border-hover);
}
/* Optionnel : même logique dans le hero */
.hero .btn.phone, .hero a[href^="tel:"]{color:#fff!important;border-color:rgba(255,255,255,.55)}
.hero .btn.phone:hover, .hero a[href^="tel:"]:hover{border-color:#fff}

/* ===========================
   MARQUES
   =========================== */
.brand-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:16px;align-items:center;margin:18px 0 6px}
.brand{display:flex;align-items:center;justify-content:center;height:96px;border:1px solid var(--stroke);border-radius:12px;background:#fff!important}
html[data-theme="dark"] .brand{background:#fff!important;border-color:#e5e7eb}
.brand img{width:48px;height:48px;object-fit:contain;filter:none!important}

/* ===========================
   BOUTON ITINÉRAIRE SPLIT
   =========================== */
.btn-split{position:relative;display:inline-flex}
.btn-main{border-top-right-radius:0;border-bottom-right-radius:0}
.btn-toggle{border-left:0;border-top-left-radius:0;border-bottom-left-radius:0;display:inline-flex;align-items:center;justify-content:center;width:42px;padding:0 8px}
.btn-menu{
  position:absolute;top:100%;right:0;min-width:230px;margin-top:6px;
  background:var(--drawer-bg);border:1px solid var(--stroke);border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.07);padding:6px;display:none;z-index:60;
}
.btn-menu a{display:block;padding:10px 12px;border-radius:8px;color:var(--text)}
.btn-menu a:hover{background:var(--menu-hover)}
.btn-split.open>.btn-menu{display:block}

/* ===========================
   FORM / SEARCH
   =========================== */
.search{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 12px}
.search input,.search select{
  padding:10px 12px;border-radius:10px;border:1px solid var(--stroke);background:#fff;color:#111;min-width:160px
}
html[data-theme="dark"] .search input, html[data-theme="dark"] .search select{
  background:#111;color:#e5e7eb;border-color:#222
}

/* ===========================
   ADMIN
   =========================== */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin:12px 0}
.card.stat .p{display:flex;flex-direction:column;gap:4px}
.list-item{display:flex;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--stroke)}
.list-item img{width:64px;height:48px;object-fit:cover;border-radius:8px;border:1px solid var(--stroke);background:var(--card-img-bg)}
.list-item .meta{font-size:12px;color:var(--muted)}
.status{display:inline-block;padding:3px 8px;border-radius:999px;border:1px solid var(--stroke);font-size:12px;margin-left:6px}
.s-actif{background:#e8f5e9;border-color:#bbf7d0;color:#166534}
.s-pending{background:#fff7ed;border-color:#fed7aa;color:#9a3412}
.s-sold{background:#fef2f2;border-color:#fecaca;color:#991b1b}

/* ===========================
   FOOTER
   =========================== */
footer{margin-top:24px;border-top:1px solid var(--stroke);background:#fafafa}
html[data-theme="dark"] footer{background:#0a0a0a}
.footer-grid{display:grid;gap:18px;padding:24px 16px}
.footer-grid h4{margin:.2rem 0 .6rem;color:var(--text)}
.footer-grid p,.footer-grid small{color:var(--muted)}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table{width:100%;border-collapse:collapse;color:var(--muted);font-size:.95rem;min-width:600px}
.table th,.table td{border-bottom:1px solid var(--stroke);padding:6px 8px;text-align:left}
.table th{color:var(--text);font-weight:700}
.socials .icon{vertical-align:-2px}
.socials a.social{display:inline-flex;align-items:center;gap:8px;color:var(--text)}
footer .container:last-child{padding:14px 24px}

/* ===========================
   UTILITAIRES
   =========================== */
.muted{color:var(--muted)}
.ok{background:#ecfdf5;border:1px solid #a7f3d0;color:#065f46;border-radius:10px;padding:10px 12px}
.err{background:#fef2f2;border:1px solid #fecaca;color:#991b1b;border-radius:10px;padding:10px 12px}
.btn,button,input[type="button"],input[type="submit"]{min-height:44px}
input,select,textarea{font-size:16px}
.hide-mobile{display:initial} .hide-desktop{display:none}
@media (max-width:640px){ .hide-mobile{display:none} .hide-desktop{display:initial} }
@media (max-width:720px){ .cards{grid-template-columns:1fr} .brand-grid{grid-template-columns:repeat(2,1fr)} }

/* ===========================
   TEXTE / BLOCS CONTACT & SLOGAN
   =========================== */
.slogan{
  direction:ltr; text-align:left; margin:0; padding:0; line-height:1.4;
  white-space:normal; word-break:keep-all; overflow-wrap:anywhere; letter-spacing:normal; color:var(--text);
}
.contact-info{display:block;max-width:100%}
.contact-info p{
  display:flex;align-items:flex-start;gap:8px;margin:0 0 6px;
  line-height:1.35;min-height:1.35em;overflow:visible;max-width:100%;
}
.contact-info p strong{flex:0 0 auto;white-space:nowrap}
.contact-info p .addr{
  flex:1 1 auto;min-width:0;overflow:visible;
  white-space:normal;word-break:keep-all;overflow-wrap:anywhere;hyphens:auto;
}
.footer-bar{
  border-top:1px solid var(--stroke); padding:14px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;
}
.footer-bar small{
  direction:ltr;white-space:normal;word-break:keep-all;overflow-wrap:anywhere;line-height:1.35;
}
@media (max-width:640px){
  .slogan{text-align:left}
  .footer-bar{flex-direction:column;align-items:center;text-align:center;padding:12px 16px;row-gap:8px}
}

/* ===========================
   NAV — espacement final desktop
   =========================== */
@media (min-width:1024px){
  #navMenu.menu{gap:8px!important;margin-right:12px!important}
  .btn-split{margin-left:12px!important}
}