/* =========================================================
   BLOC RÉUTILISABLE — CSS pour HEADER, NAV PRINCIPALE, FOOTER, TOAST
   Charger via : <link rel="stylesheet" href="common-components/header-footer.css">
   Contient aussi les variables de charte graphique et le reset de base,
   nécessaires au rendu du header/footer sur toutes les pages.
   ========================================================= */

/* ---------------------------------------------------------
   CHARTE GRAPHIQUE GREENPLACE4ALL
   - #6C002B bordeaux
   - #053129 forest green
   - #F0F0D3 crème
   - #EEDBDD rose
   - Police : Lexend, taille minimale 16px
--------------------------------------------------------- */
:root{
  --bordeaux:#6C002B;
  --forest:#053129;
  --creme:#F0F0D3;
  --rose:#EEDBDD;
  --ink:#241417;
  --ink-soft:#5b4f52;
  --border:#e7d9dd;
  --border-field:#88797E;
  --card-bg:#FFF8F8;
  --popup-bg:#E1EAE6;
}

*{box-sizing:border-box;}
body{
  margin:0;
  overflow-x:hidden;
  font-family:'Lexend', system-ui, -apple-system, sans-serif;
  font-size:16px;
  background:#ffffff;
  color:var(--ink);
}
a{color:inherit;}
button, input, select, textarea{font-family:'Lexend', sans-serif;}
.wrap{max-width:1440px;margin:0 auto;background:#fff;}
h1,h2,h3,h4{margin:0;font-weight:600;}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}

/* ---------------------------------------------------------
   HEADER
--------------------------------------------------------- */
.topbar{
  display:flex;
  align-items:center;
  gap:28px;
  padding:18px 56px;
  border-bottom:1px solid var(--border);
  width:100vw;
  margin-left:calc(50% - 50vw);
}
.topbar .logo{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.topbar .logo img{height:46px;display:block;}
.search{
  flex:1;
  display:flex;
  align-items:center;
  gap:10px;
  border:2px solid #4d4d4d;
  border-radius:999px;
  padding:12px 20px;
  max-width:640px;
}
.search input{
  border:none;outline:none;background:transparent;flex:1;
  font-size:16px;color:var(--ink);
}
.search input::placeholder{color:var(--ink-soft);}
.search .icon{color:var(--forest);font-size:1.1rem;line-height:1;}
.top-actions{
  display:flex;
  align-items:center;
  gap:28px;
  margin-left:auto;
  flex-shrink:0;
}
.top-actions .action{
  display:flex;align-items:center;gap:8px;
  font-size:16px;font-weight:500;cursor:pointer;color:var(--ink);
  text-decoration:none;
}
.top-actions .icon-circle{
  width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--forest);font-size:1rem;
}

/* ---------------------------------------------------------
   HEADER — variante ESPACE MARQUE
--------------------------------------------------------- */
.topbar-marque .brand-logo-slot{
  display:flex;align-items:center;
  padding-left:24px;
  margin-left:4px;
  border-left:1px solid var(--border);
  min-height:46px;
}
.topbar-marque .brand-logo-slot img{height:40px;display:block;}
.topbar-marque .brand-logo-slot .placeholder{
  color:var(--ink-soft);font-size:14px;font-style:italic;
}

/* ---------------------------------------------------------
   HEADER — variante PUBLIQUE (pages non connectées)
--------------------------------------------------------- */
.public-banner{
  background:var(--creme);
  color:#241417;
  text-align:center;
  font-size:16px;
  font-weight:400;
  padding:8px 20px;
  width:100vw;
  margin-left:calc(50% - 50vw);
}
.topbar-public{
  background:var(--bordeaux);
  border-bottom:none;
}
.search-public{
  background:#fff;
  border:none;
}
.search-public .icon{ color:var(--bordeaux); }
.top-actions-public{ gap:12px; }
.cta-devis, .cta-devenir-marque, .cta-deja-compte{
  display:inline-block;
  border-radius:999px;
  padding:11px 20px;
  font-weight:400;
  font-size:16px;
  white-space:nowrap;
  text-decoration:none;
  transition:background-color .15s ease;
}
.cta-devis{ background:var(--creme); color:#241417; }
.cta-devis:hover{ background:#e6e6c4; }
.cta-devenir-marque{ background:var(--rose); color:#241417; }
.cta-devenir-marque:hover{ background:#e6c9cc; }
.cta-deja-compte{ background:#fff; color:#241417; }
.cta-deja-compte:hover{ background:var(--creme); }

.public-subnav{
  background:var(--bordeaux);
  border-bottom:1px solid rgba(255,255,255,0.15);
  width:100vw;
  margin-left:calc(50% - 50vw);
}
.public-subnav ul{
  list-style:none;margin:0;padding:0;
  display:flex;
  justify-content:center;
  gap:96px;
  max-width:900px;
  margin:0 auto;
}
.public-subnav a{
  display:block;
  padding:14px 4px;
  color:#fff;
  text-decoration:none;
  font-weight:400;
  font-size:16px;
}
.public-subnav a:hover, .public-subnav a.active{
  color:var(--rose);
}

nav.mainnav{
  background:var(--bordeaux);
  width:100vw;
  margin-left:calc(50% - 50vw);
}
nav.mainnav ul{
  list-style:none;margin:0;padding:0;
  display:flex;
  justify-content:space-between;
  max-width:900px;
  margin:0 auto;
}
nav.mainnav a{
  display:block;
  padding:18px 24px;
  color:#fff;
  text-decoration:none;
  font-weight:600;
  font-size:16px;
  text-align:center;
}
nav.mainnav a:hover, nav.mainnav a.active{
  background:rgba(255,255,255,.12);
}

/* ---------------------------------------------------------
   FOOTER — repris tel quel (source: welcome_home.html)
--------------------------------------------------------- */
.foot-top{
  background:var(--creme);
  padding:36px max(56px, calc((100vw - 1328px) / 2));
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr;
  gap:24px;
  font-size:16px;
  margin-top:44px;
  width:100vw;
  margin-left:calc(50% - 50vw);
}
.foot-top h4{margin:0 0 12px;font-size:16px;}
.newsletter-row{display:flex;gap:8px;margin-top:10px;}
.newsletter-input-wrap{position:relative;flex:1;display:flex;align-items:center;}
.newsletter-row input{
  width:100%;border:1px solid var(--border-field);border-radius:8px;
  padding:10px 40px 10px 12px;font-size:16px;background:#F2F2F2;color:var(--ink);
}
.newsletter-row input:focus{
  outline:none;
  border-color:var(--bordeaux);
}
.newsletter-submit{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  background:none;border:none;color:var(--ink-soft);font-size:1.1rem;cursor:pointer;
  display:flex;align-items:center;padding:0;
}
.newsletter-submit:hover{color:var(--ink);}
.store-badges{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap;}
.store-badges img{height:42px;display:block;cursor:pointer;border-radius:8px;}
.socials{display:flex;gap:10px;margin-top:10px;}
.social-dot{
  width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:16px;cursor:pointer;transition:opacity .15s;
}
.social-dot:hover{opacity:.8;}

footer.bottom{
  background:var(--bordeaux);
  color:#f4e9ec;
  padding:28px max(56px, calc((100vw - 1328px) / 2));
  font-size:16px;
  width:100vw;
  margin-left:calc(50% - 50vw);
}
.bottom-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:20px;}
.bottom-grid h4{color:#fff;margin:0 0 10px;font-size:16px;}
.bottom-grid a{display:block;color:#f4e9ec;text-decoration:none;margin-bottom:6px;opacity:.9;cursor:pointer;}
.bottom-grid a:hover{text-decoration:underline;}
.toggle-pill{
  display:flex;align-items:center;gap:8px;
  background:#ffffff15;border-radius:999px;padding:8px 16px;
  cursor:pointer;font-size:16px;width:fit-content;
}
.copyright{text-align:center;opacity:.75;margin-top:28px;padding-top:20px;border-top:1px solid #ffffff25;}

/* ---------------------------------------------------------
   TOAST (utilisé par le footer et par d'autres actions de page)
--------------------------------------------------------- */
.toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--popup-bg);color:var(--ink);padding:12px 22px;border-radius:10px;font-size:16px;
  opacity:0;pointer-events:none;transition:opacity .25s, transform .25s;z-index:50;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

@media(max-width:900px){
  .topbar{flex-wrap:wrap;padding:16px 20px;}
  nav.mainnav ul{overflow-x:auto;justify-content:flex-start;}
  .foot-top{grid-template-columns:1fr;gap:28px;}
  .bottom-grid{grid-template-columns:1fr;gap:20px;}
  .public-subnav ul{overflow-x:auto;justify-content:flex-start;gap:24px;}
  .top-actions-public{flex-wrap:wrap;gap:8px;}
}