/* =========================================================
   Chamor — Styles globaux
   ---------------------------------------------------------
   TABLE DES MATIÈRES
   0) Variables & reset
   1) Base (typographie / liens / conteneurs / utilitaires)
   2) Grilles & responsive helpers
   3) Composants (card, badge, boutons)
   4) Header (sticky) & Navigation
   5) Footer
   6) Sections spécifiques (Hero, Logos, Instagram)
   7) Accessibilité & Motion
   8) Responsive (breakpoints)
   9) Section Contact (mise en avant + WhatsApp)
   10) Comportements globaux (scroll)
   ========================================================= */


/* ========== 0) VARIABLES & RESET ========== */
:root{
  --bg:#ffffff;
  --fg:#111827;
  --muted:#6B7280;
  --accent:#0EA5E9;
  --border:#e5e7eb;
}

*{ box-sizing:border-box; }

html,body{ margin:0; padding:0; height:100%; }


/* ========== 1) BASE ========== */
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Helvetica,Arial,sans-serif;
  color:var(--fg);
  background:var(--bg);
  padding-top:64px; /* espace pour éviter que le contenu passe sous le header */
}

a{ text-decoration:none; color:inherit; }

.container{ max-width:1120px; margin:0 auto; padding:0 16px; }

.section{ padding:64px 0; }

h1{ font-size:40px; line-height:1.1; margin:0 0 12px; font-weight:700; }
h2{ font-size:28px; margin:0 0 8px; }
.lead{ color:var(--muted); font-size:18px; }

/* Utilitaires rapides */
.no-select{ -webkit-user-select:none; user-select:none; }
.no-drag{ -webkit-user-drag:none; }
.notice{ background:#f9fafb; border:1px solid var(--border); padding:16px; border-radius:12px; }


/* ========== 2) GRILLES & RESPONSIVE HELPERS ========== */
.row{ display:grid; gap:24px; }
.grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }

@media (max-width:900px){
  .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; }
}


/* ========== 3) COMPOSANTS ========== */

/* Carte / encadré */
.card{
  border:1px solid var(--border);
  border-radius:14px;
  padding:20px;
  background:#fff;
  transition:box-shadow .2s;
}
.card:hover{ box-shadow:0 6px 24px rgba(0,0,0,.06); }

/* Badge */
.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  background:#f3f4f6;
  font-size:13px;
}

/* Boutons (générique + variante primaire) */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 18px;
  border:1px solid #111827;
  border-radius:10px;
  font-weight:600;
  cursor:pointer; /* curseur "main" */
  transition:background-color .2s ease, color .2s ease, filter .2s ease, transform .06s ease;
}
.btn:hover{ background:#111827; color:#fff; }

.btn-primary{
  background:#111827;
  color:#fff;
  border-color:#111827;
}
.btn-primary:hover{
  background:#1f2937; /* léger changement de teinte au hover */
  color:#fff;
  filter:none;        /* neutralise tout filter générique */
}

/* Boutons WhatsApp (couleur + comportements) */
a.btn.btn-primary[href*="wa.me"]{
  background-color:#25D366;  /* vert WhatsApp */
  border-color:#25D366;
  color:#fff;
  transition:background-color .2s ease, transform .06s ease;
}
a.btn.btn-primary[href*="wa.me"]:hover{
  background-color:#1DA851;  /* un peu plus foncé au survol */
  filter:none;               /* neutralise le filter du .btn/.btn-primary */
}
a.btn.btn-primary[href*="wa.me"]:active{ transform:translateY(1px); }
a.btn.btn-primary[href*="wa.me"] img{
  display:inline-block;
  vertical-align:middle;
}


/* ========== 4) HEADER (STICKY) & NAV ========== */
.header{
  position:fixed; top:0; left:0; right:0;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--border);
  z-index:1000;
}
.header .inner{ height:64px; display:flex; align-items:center; justify-content:space-between; }
.nav a{ margin-left:16px; }


/* ========== 5) FOOTER ========== */
.footer{ border-top:1px solid var(--border); margin-top:64px; }
.footer .grid{ display:grid; gap:24px; grid-template-columns:repeat(3,minmax(0,1fr)); }
.footer-bottom{
  border-top:1px solid var(--border);
  font-size:12px;
  color:var(--muted);
  padding:16px 0;
  margin-top:8px;
  display:flex;
  justify-content:space-between;
}


/* ========== 6) SECTIONS SPÉCIFIQUES ========== */

/* Hero */
.hero{
  display:grid;
  gap:24px;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:center;
}
.hero .mock{
  aspect-ratio:16/9;
  border:1px solid var(--border);
  border-radius:18px;
  background:linear-gradient(135deg,#f5f5f5,#ffffff);
  display:flex; align-items:center; justify-content:center;
  color:#6b7280;
}

/* Logos — grid simple (au cas où) */
.logo-cloud{ display:grid; gap:16px; grid-template-columns:repeat(8,minmax(0,1fr)); }
.logo-cloud img{
  max-height:60px; width:auto; object-fit:contain;
  filter:drop-shadow(0 0 1px rgba(0,0,0,.25));
}

/* Logos — Marquee (défilement infini) */
.logo-marquee{
  overflow:hidden; position:relative; width:100%;
  background:#f3f4f6;
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px 0;
}
.logo-track{
  display:flex; align-items:center; gap:28px;
  width:max-content;
  animation:marquee 40s linear infinite;
}
.logo-marquee:hover .logo-track{ animation-play-state:paused; }
@keyframes marquee{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); } /* dupliquez la séquence une fois pour la boucle fluide */
}

/* Pastilles pour homogénéiser les logos */
.logo-chip{
  display:flex; align-items:center; justify-content:center;
  height:60px; min-width:120px;
  padding:8px 16px;
  border:1px solid var(--border);
  border-radius:12px;
  background:#f3f4f6;
}
.logo-chip.dark{
  background:#111827; border-color:#111827;
}
.logo-chip.dark img{ filter:drop-shadow(0 0 1px rgba(255,255,255,.25)); }
.logo-chip img{
  max-height:45px; width:auto; object-fit:contain;
  filter:drop-shadow(0 0 1px rgba(0,0,0,.50));
}

/* Instagram (grille placeholder) */
.instagram-grid{ display:grid; gap:12px; grid-template-columns:repeat(4,minmax(0,1fr)); }
.instagram-item{
  aspect-ratio:1/1; border:1px solid var(--border); border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  color:#6b7280; background:#f8fafc;
}


/* ========== 7) ACCESSIBILITÉ & MOTION ========== */
@media (prefers-reduced-motion: reduce){
  .logo-track{ animation:none; }
}

/* Focus visible (accessibilité) */
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}


/* ========== 8) RESPONSIVE (BREAKPOINTS) ========== */
@media (max-width:1100px){
  .logo-cloud{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media (max-width:900px){
  .hero{ grid-template-columns:1fr; }
  .footer .grid{ grid-template-columns:1fr; }
  .footer-bottom{ flex-direction:column; gap:8px; }
  .instagram-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:700px){
  .logo-cloud{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:600px){
  .section{ padding:40px 0; }
  h1{ font-size:28px; }
  h2{ font-size:22px; }

  .logo-chip{ height:48px; min-width:96px; }
  .logo-chip img{ max-height:32px; }

  /* bouton Devis un peu plus compact sur mobile */
  .nav .btn.btn-primary{
    padding:8px 14px;
    font-size:14px;
    border-radius:8px;
  }
}


/* ========== 9) SECTION CONTACT (mise en avant + WhatsApp) ========== */

/* Bloc Contact — fond clair + carte centrale */
#contact{
  background:#f3f4f6; /* tranche avec le fond de page */
  padding:64px 0;
}
#contact h1{
  text-align:center;
  font-size:32px;
  margin-bottom:12px;
}
#contact .lead{ text-align:center; }
#contact .container{
  max-width:720px;       /* recentre visuellement la section */
  background:#fff;
  padding:32px;
  border-radius:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
}

/* Rangée des boutons WhatsApp — centrée + espacement géré ici */
#contact .whatsapp-buttons{
  display:flex;
  gap:20px;             /* espace horizontal entre les boutons */
  flex-wrap:wrap;
  justify-content:center;
  margin:20px 0;
}


/* ========== 10) COMPORTEMENTS GLOBAUX ========== */
html{ scroll-behavior:smooth; }


/* ============================== */
/*   NAV MOBILE (burger + panel)  */
/* ============================== */

/* conteneur actions à droite (bouton devis + burger) */
.header-actions{
  display:flex;
  align-items:center;
  gap:12px;
}

/* Nav desktop : visible desktop, masquée mobile */
.nav-desktop{ display:flex; }
@media (max-width:900px){
  .nav-desktop{ display:none; }
}

/* Burger : masqué desktop, visible mobile */
.burger{
  display:none;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border:1px solid var(--border);
  background:#fff;
  border-radius:10px;
  font-weight:600;
  cursor:pointer;
}
.burger:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

.burger .burger-label{ font-size:14px; }

/* icône "3 lignes" */
.burger .burger-lines{
  position:relative;
  width:18px; height:2px;
  background:#111827;
  display:inline-block;
}
.burger .burger-lines::before,
.burger .burger-lines::after{
  content:"";
  position:absolute; left:0; right:0;
  height:2px; background:#111827;
}
.burger .burger-lines::before{ top:-6px; }
.burger .burger-lines::after{ top:6px; }

/* état ouvert : transforme en "X" */
.burger[aria-expanded="true"] .burger-lines{
  background:transparent;
}
.burger[aria-expanded="true"] .burger-lines::before{
  top:0; transform:rotate(45deg);
}
.burger[aria-expanded="true"] .burger-lines::after{
  top:0; transform:rotate(-45deg);
}

/* Afficher le burger en mobile */
@media (max-width:900px){
  .burger{ display:inline-flex; }
}

/* Panneau mobile (dropdown sous le header) */
.mobile-nav{
  position:absolute;
  top:64px;          /* même hauteur que .header .inner */
  left:0; right:0;
  background:#fff;
  border-bottom:1px solid var(--border);
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  display:flex; flex-direction:column;
  gap:4px;
  padding:12px 16px;
  z-index:999;       /* sous le header (1000) mais au-dessus du reste */
}

/* Liens dans le panneau mobile */
.mobile-link{
  padding:12px;
  border-radius:10px;
  font-weight:600;
}
.mobile-link:hover{
  background:#f3f4f6;
}

/* Empêche le saut de layout quand on montre/cache via [hidden] */
.mobile-nav[hidden]{ display:none; }