/* =====================================================================
   A&M Créations — Feuille de style commune
   Les couleurs/polices sont pilotées par des variables CSS injectées
   depuis includes/header.php à partir de la table site_settings.
   Ne jamais coder une couleur en dur dans une page : utiliser les
   variables ci-dessous pour que les changements faits depuis l'admin
   s'appliquent partout automatiquement.
   ===================================================================== */

:root{
  --color-primary: #E8631C;
  --color-primary-dark: #C9531A;
  --color-secondary: #1E2429;
  --color-accent: #F2B705;
  --grey-bg: #F5F5F3;
  --white: #FFFFFF;
  --text-soft: #5A6067;
  --text-main: #1E2429;
  --line: #E7E5E1;
  --font-display: 'Poppins', sans-serif;
  --font-body: 'Inter', sans-serif;
}

html[data-theme="dark"]{
  --grey-bg: #191C1F;
  --white: #1D2125;
  --text-soft: #9AA0A5;
  --text-main: #F2F1EE;
  --line: #2C3136;
  color-scheme: dark;
}



*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family: var(--font-body);
  color: var(--text-main);
  background: var(--white);
  line-height:1.55;
  transition: background .2s ease, color .2s ease;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
ul{list-style:none;}
.wrap{max-width:1220px; margin:0 auto; padding:0 28px;}

h1,h2,h3,.display{
  font-family: var(--font-display);
  font-weight:700;
  line-height:1.15;
}

/* ---------- top bar ---------- */
.top-bar{background:var(--color-primary); color:#fff; font-size:14px; font-weight:600;}
.top-bar .wrap{display:flex; align-items:center; justify-content:center; gap:10px; padding:10px 28px;}
.top-bar svg{width:16px; height:16px;}

/* ---------- header ---------- */
header.site-header{background:var(--white); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50;}
.nav-row{display:flex; align-items:center; justify-content:space-between; padding:18px 0;}
.brand{display:flex; align-items:center; gap:12px;}
.brand .logo-badge{width:44px; height:44px; border-radius:8px; background:var(--color-secondary); display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0;}
.brand .logo-badge svg{width:24px; height:24px; stroke:var(--color-accent);}
.brand .logo-img{height:var(--logo-height, 44px); width:auto; max-width:220px; object-fit:contain; display:block; flex-shrink:0;}
.brand .name{font-family:var(--font-display); font-weight:800; font-size:19px; color:var(--text-main);}
.brand .name span{color:var(--color-primary);}
nav.primary-nav ul{display:flex; gap:30px;}
nav.primary-nav a{font-size:14.5px; font-weight:600; color:var(--text-main);}
nav.primary-nav a:hover, nav.primary-nav a.active{color:var(--color-primary);}
.header-actions{display:flex; align-items:center; gap:16px;}
.btn{display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:14px; padding:12px 22px; border-radius:6px; cursor:pointer; border:2px solid var(--color-primary); transition:all .15s ease;}
.btn-primary{background:var(--color-primary); color:#fff;}
.btn-primary:hover{background:var(--color-primary-dark); border-color:var(--color-primary-dark);}
.btn-outline{background:transparent; color:#fff; border:2px solid rgba(255,255,255,0.5);}
.btn-outline:hover{border-color:#fff;}
.btn-dark{background:var(--color-secondary); border-color:var(--text-main); color:#fff;}
.burger{display:none; background:none; border:none; font-size:24px; color:var(--text-main);}

/* ---------- page hero (bandeau interne, pages secondaires) ---------- */
.page-hero{
  background:linear-gradient(120deg, var(--color-secondary), #262d33);
  color:#fff; padding:64px 0; text-align:center;
}
.page-hero .eyebrow{color:var(--color-accent);}
.page-hero h1{font-size:clamp(28px,3.6vw,44px); margin-top:10px;}
.page-hero p{color:#C7CBCE; max-width:560px; margin:14px auto 0;}
.breadcrumb{font-size:13px; color:#9AA0A5; margin-top:14px;}
.breadcrumb a:hover{color:#fff;}

.gold-divider{height:6px; background:linear-gradient(90deg,var(--color-accent),var(--color-primary));}

/* ---------- section shell ---------- */
section{padding:80px 0;}
.section-head{text-align:center; max-width:640px; margin:0 auto 46px;}
.eyebrow{color:var(--color-primary); font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.08em; margin-bottom:10px; display:block;}
.section-head h2{font-size:clamp(26px,3.2vw,36px); color:var(--text-main);}
.section-head p{color:var(--text-soft); margin-top:12px; font-size:15px;}
.bg-grey{background:var(--grey-bg);}

/* ---------- services ---------- */
.service-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
.service-card{background:var(--white); border-radius:10px; padding:30px 24px; box-shadow:0 1px 3px rgba(0,0,0,0.05); border:1px solid var(--line); transition:transform .15s ease, box-shadow .15s ease;}
.service-card:hover{transform:translateY(-4px); box-shadow:0 12px 24px rgba(0,0,0,0.08);}
.service-icon{width:48px; height:48px; border-radius:10px; background:#FDEEE3; display:flex; align-items:center; justify-content:center; margin-bottom:18px; overflow:hidden;}
.service-icon svg{width:24px; height:24px; stroke:var(--color-primary);}
.service-icon img{width:100%; height:100%; object-fit:cover;}
.service-card h3{font-size:17px; margin-bottom:8px; color:var(--text-main);}
.service-card p{font-size:14px; color:var(--text-soft);}

/* ---------- filter chips ---------- */
.filter-row{display:flex; gap:10px; justify-content:center; margin-bottom:36px; flex-wrap:wrap;}
.chip{font-size:13px; font-weight:600; padding:9px 18px; border-radius:20px; border:1.5px solid var(--line); color:var(--text-main); cursor:pointer; background:var(--white);}
.chip.active{background:var(--color-secondary); color:#fff; border-color:var(--text-main);}

/* ---------- projects / chantiers ---------- */
.project-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
.project-card{border-radius:10px; overflow:hidden; border:1px solid var(--line); background:var(--white);}
.project-photo{aspect-ratio:4/3; position:relative; overflow:hidden; background:linear-gradient(135deg,#DAD5C9,#C7C1B3);}
.project-photo img{width:100%; height:100%; object-fit:cover;}
.project-photo .ph-label{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:12px; color:#6b6558; letter-spacing:.04em; text-transform:uppercase; font-weight:600;}
.badge{position:absolute; top:14px; left:14px; z-index:2; font-weight:700; font-size:11.5px; text-transform:uppercase; letter-spacing:.03em; padding:6px 12px; border-radius:20px;}
.badge.cours{background:var(--color-accent); color:#1a1a1a;}
.badge.fini{background:var(--color-secondary); color:#fff;}
.project-info{padding:18px 20px 22px;}
.project-info h3{font-size:16.5px; color:var(--text-main); margin-bottom:4px;}
.project-info .loc{font-size:13px; color:var(--text-soft);}
.empty-state{text-align:center; padding:60px 20px; color:var(--text-soft);}

/* ---------- partenaires ---------- */
.partner-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.partner-card{background:var(--white); border:1px solid var(--line); border-radius:10px; padding:28px 24px; text-align:center;}
.partner-logo{width:100%; max-width:170px; height:84px; margin:0 auto 18px; display:flex; align-items:center; justify-content:center; background:transparent;}
.partner-logo img{max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain;}
.partner-logo svg{width:36px; height:36px; stroke:var(--text-soft);}
.partner-card h3{font-size:16px; margin-bottom:8px;}
.partner-card p{font-size:13.5px; color:var(--text-soft); margin-bottom:14px;}

/* ---------- testimonials ---------- */
.test-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.test-card{background:var(--white); border-radius:10px; padding:26px 24px; border:1px solid var(--line);}
.stars{color:var(--color-accent); font-size:14px; margin-bottom:14px; letter-spacing:2px;}
.test-card p{font-size:14.5px; color:var(--text-main); margin-bottom:18px;}
.test-who{display:flex; align-items:center; gap:10px;}
.avatar{width:38px; height:38px; border-radius:50%; background:var(--color-secondary); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; font-family:var(--font-display);}
.test-who b{display:block; font-size:14px; color:var(--text-main);}
.test-who span{font-size:12.5px; color:var(--text-soft);}

/* ---------- CTA ---------- */
.cta-banner{background:linear-gradient(120deg,var(--color-primary),var(--color-primary-dark)); color:#fff;}
.cta-inner{display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; padding:56px 0;}
.cta-inner h2{color:#fff; font-size:clamp(24px,3vw,34px); max-width:560px;}
.cta-inner p{color:rgba(255,255,255,0.85); margin-top:8px;}
.cta-inner .btn-primary{background:#fff; color:var(--color-primary); border-color:#fff;}
.cta-inner .btn-primary:hover{background:#f3f3f3;}

/* ---------- FAQ ---------- */
.faq{max-width:820px; margin:0 auto;}
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{width:100%; text-align:left; background:none; border:none; padding:20px 4px; font-weight:600; font-size:16px; display:flex; justify-content:space-between; align-items:center; cursor:pointer; color:var(--text-main);}
.faq-q .plus{font-size:20px; color:var(--color-primary); transition:transform .2s; font-weight:400;}
.faq-item.open .plus{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .25s ease;}
.faq-a p{padding:0 4px 20px; font-size:14.5px; color:var(--text-soft); max-width:640px;}

/* ---------- forms ---------- */
.form-card{background:var(--white); border:1px solid var(--line); border-radius:12px; padding:32px; max-width:640px; margin:0 auto;}
.form-row{margin-bottom:18px;}
.form-row label{display:block; font-size:13.5px; font-weight:600; margin-bottom:6px;}
.form-row input, .form-row textarea, .form-row select{
  width:100%; padding:11px 14px; border:1px solid var(--line); border-radius:6px;
  font-family:var(--font-body); font-size:14.5px; background:var(--white); color:var(--text-main);
}
.form-row textarea{min-height:120px; resize:vertical;}
.form-row input:focus, .form-row textarea:focus, .form-row select:focus{outline:2px solid var(--color-primary); outline-offset:1px; border-color:var(--color-primary);}
.form-grid-2{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.alert{padding:14px 16px; border-radius:8px; font-size:14px; margin-bottom:22px;}
.alert-success{background:#EAF7EE; color:#1E7B3C; border:1px solid #C6E9CF;}
.alert-error{background:#FDECEC; color:#B42318; border:1px solid #F5C6C0;}
.tabs-toggle{display:flex; gap:10px; margin-bottom:28px; justify-content:center;}
.tabs-toggle button{flex:1; max-width:220px; padding:12px; border-radius:8px; border:1.5px solid var(--line); background:var(--white); font-weight:700; cursor:pointer; font-size:14px;}
.tabs-toggle button.active{background:var(--color-secondary); color:#fff; border-color:var(--text-main);}

/* ---------- contact info & map ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start;}
.contact-info-card{background:var(--grey-bg); border-radius:12px; padding:28px;}
.contact-info-card h3{font-size:17px; margin-bottom:18px;}
.contact-info-item{display:flex; gap:14px; margin-bottom:16px; font-size:14.5px;}
.contact-info-item svg{width:20px; height:20px; stroke:var(--color-primary); flex-shrink:0;}
.map-embed{border-radius:12px; overflow:hidden; margin-top:20px; border:1px solid var(--line);}
.map-embed iframe{width:100%; height:260px; border:0; display:block;}

/* ---------- footer ---------- */
footer.site-footer{background:#15191C; color:#B7BBBE; padding:60px 0 26px;}
.footer-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:36px; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,0.08);}
footer h4{font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:#fff; margin-bottom:16px;}
footer .foot-brand{font-family:var(--font-display); font-weight:800; font-size:20px; color:#fff; margin-bottom:12px;}
footer p, footer li{font-size:13.5px; line-height:1.85;}
footer a:hover{color:#fff;}
.map-block{aspect-ratio:16/10; border-radius:8px; background:#202427; display:flex; align-items:center; justify-content:center; font-size:12px; color:#6b7176; text-transform:uppercase; letter-spacing:.05em;}
.bottom-row{display:flex; justify-content:space-between; padding-top:22px; font-size:12px; color:#6b7176; flex-wrap:wrap; gap:10px;}
.social-row{display:flex; gap:10px; margin-top:14px;}
.social-row a{width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,0.08); display:flex; align-items:center; justify-content:center;}
.social-row svg{width:16px; height:16px; stroke:#fff;}

/* ---------- announcement banner ---------- */
.announcement{background:var(--color-accent); color:#1a1a1a; text-align:center; font-size:13.5px; font-weight:600; padding:10px 20px;}
.announcement a{text-decoration:underline;}

@media (max-width:960px){
  .service-grid, .project-grid, .partner-grid, .test-grid{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .contact-grid{grid-template-columns:1fr;}
  .form-grid-2{grid-template-columns:1fr;}
}
@media (max-width:720px){
  nav.primary-nav{display:none;}
  .burger{display:block;}
  .service-grid, .project-grid, .partner-grid, .test-grid, .footer-grid{grid-template-columns:1fr;}
  .cta-inner{flex-direction:column; align-items:flex-start;}
}