/* ============================================================
   CERCLE BTP — base.css
   Design system commun : variables, reset, typo, boutons, nav,
   footer, animations de scroll. Chargé sur toutes les pages.
   ============================================================ */

:root{
  --noir:#0A0A0A;--noir-2:#111111;--noir-3:#181818;
  --line:#242424;--line-2:#1C1C1C;
  --blanc:#FFFFFF;--gris:#9C9C9C;--gris-2:#C9C9C9;
  --orange:#FF751F;--orange-soft:rgba(255,117,31,.12);
  --rouge:#E53E3E;--rouge-soft:rgba(229,62,62,.1);
  --jaune:#D69E2E;--jaune-soft:rgba(214,158,46,.1);
  --vert:#38A169;--vert-soft:rgba(56,161,105,.1);
  --f:'Inter',system-ui,-apple-system,sans-serif;
  --maxw:1180px;--pad:clamp(20px,5vw,60px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--noir);color:var(--blanc);font-family:var(--f);font-size:17px;line-height:1.6;
  font-feature-settings:"cv02","cv03","cv04","ss01";overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}

h1,h2,h3,h4{font-weight:800;line-height:1.04;letter-spacing:-.035em}
h1{font-size:clamp(2.2rem,5.6vw,4.3rem);font-weight:900;letter-spacing:-.045em}
h2{font-size:clamp(1.85rem,4.2vw,3.1rem);font-weight:900;letter-spacing:-.04em}
h3{font-size:clamp(1.12rem,1.9vw,1.42rem);letter-spacing:-.025em}
p{color:var(--gris)}
.lead{font-size:clamp(1.02rem,1.4vw,1.2rem);color:var(--gris-2);max-width:62ch;line-height:1.55}
.or{color:var(--orange)}

.eyebrow{font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--orange);
  display:flex;align-items:center;gap:11px;margin-bottom:20px}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--orange);flex:none}
.eyebrow.center{justify-content:center}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:700;font-size:.97rem;
  letter-spacing:-.015em;padding:17px 28px;border-radius:6px;transition:background .16s,transform .12s,border-color .16s}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--orange);color:#0A0A0A}
.btn-primary:hover{background:#FF8A3D}
.btn-primary:disabled{opacity:.35;cursor:not-allowed;transform:none}
.btn-ghost{border:1px solid var(--line);color:var(--blanc)}
.btn-ghost:hover{border-color:#3A3A3A;background:#141414}
.btn-sm{padding:11px 18px;font-size:.87rem;border-radius:5px}
.btn-lg{padding:20px 34px;font-size:1.05rem}
.btn .ar{transition:transform .16s}
.btn:hover .ar{transform:translateX(3px)}

.hr{height:1px;background:var(--line-2)}

/* Nav — chrome commun à toutes les pages */
.topbar{background:var(--orange);color:#0A0A0A;text-align:center;padding:9px 16px;font-size:.79rem;font-weight:600}
.topbar a{text-decoration:underline;text-underline-offset:3px;font-weight:700}

.nav{position:sticky;top:0;z-index:70;background:rgba(10,10,10,.88);backdrop-filter:blur(14px);border-bottom:1px solid var(--line-2)}
.nav-in{display:flex;align-items:center;gap:26px;height:72px;max-width:1180px;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.brand{display:flex;align-items:center;gap:9px;font-weight:900;letter-spacing:-.04em;font-size:1.06rem;color:var(--blanc);text-decoration:none}
.brand img{height:19px;width:auto}
.nav-links{display:flex;gap:24px;margin-left:auto;font-size:.9rem;font-weight:500;color:var(--gris)}
.nav-links a:hover{color:var(--blanc)}
.nav-links a.active{color:var(--orange)}
.nav-back{margin-left:auto;font-size:.88rem;font-weight:600;color:var(--gris);transition:color .15s;text-decoration:none}
.nav-back:hover{color:var(--blanc)}
.burger{display:none;margin-left:auto;width:42px;height:42px;place-items:center}
.burger span{display:block;width:20px;height:2px;background:var(--blanc);margin:4px 0}
.mobile{display:none;background:var(--noir-2);border-bottom:1px solid var(--line-2)}
.mobile.open{display:block}
.mobile a{display:block;padding:15px var(--pad);border-top:1px solid var(--line-2);font-size:.95rem;font-weight:500}

/* Footer — chrome commun */
footer{border-top:1px solid var(--line-2);padding:50px 0 32px;font-size:.9rem}
.foot-grid{display:flex;flex-wrap:wrap;gap:32px;justify-content:space-between;align-items:flex-start}
.foot-nav{display:flex;flex-wrap:wrap;gap:22px;color:var(--gris);font-weight:500}
.foot-nav a:hover{color:var(--blanc)}
.foot-legal{margin-top:36px;padding-top:22px;border-top:1px solid var(--line-2);font-size:.78rem;color:#6E6E6E;display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between}
.foot-in{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;max-width:1180px;margin:0 auto;padding:34px var(--pad);font-size:.82rem;color:#6E6E6E}
.foot-in a{color:#9C9C9C}
.foot-in a:hover{color:var(--blanc)}
.consent-reopen{font:inherit;color:inherit;padding:0;text-decoration:underline;text-underline-offset:3px}
.consent-reopen:hover{color:var(--blanc)}

.dock{position:fixed;left:0;right:0;bottom:0;z-index:80;display:none;background:rgba(10,10,10,.95);
  backdrop-filter:blur(12px);border-top:1px solid var(--line);padding:12px var(--pad) calc(12px + env(safe-area-inset-bottom))}
.dock .btn{width:100%}

/* Bandeau de consentement */
.consent{position:fixed;left:0;right:0;bottom:0;z-index:100;background:var(--noir-2);
  border-top:1px solid var(--line);box-shadow:0 -18px 40px rgba(0,0,0,.5);
  padding:20px var(--pad) calc(20px + env(safe-area-inset-bottom))}
.consent-in{max-width:1180px;margin:0 auto;display:flex;flex-wrap:wrap;gap:22px;
  align-items:center;justify-content:space-between}
.consent-copy{flex:1;min-width:280px}
.consent-copy b{display:block;font-size:.98rem;font-weight:800;letter-spacing:-.02em;margin-bottom:6px}
.consent-copy p{font-size:.86rem;line-height:1.5;color:var(--gris);max-width:74ch}
.consent-copy a{color:var(--gris-2);text-decoration:underline;text-underline-offset:3px}
.consent-copy a:hover{color:var(--blanc)}
/* Les deux boutons ont volontairement la même taille et le même poids :
   refuser doit être aussi simple qu'accepter (recommandation CNIL). */
.consent-actions{display:flex;gap:10px;flex:none}
.consent-btn{padding:13px 26px;font-size:.9rem;min-width:132px}
.consent-deny{border:1px solid #3A3A3A;color:var(--blanc);background:none}
.consent-deny:hover{background:#1C1C1C;border-color:#4A4A4A}
.consent-accept{background:var(--orange);color:#0A0A0A}
.consent-accept:hover{background:#FF8A3D}
/* Évite la superposition avec la barre d'action fixe de l'accueil. */
body.consent-open .dock{display:none}
@media(max-width:720px){
  .consent-in{gap:16px}
  .consent-actions{width:100%}
  .consent-btn{flex:1;min-width:0}
}

/* Animation d'apparition au scroll */
.rv{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease}
.rv.in{opacity:1;transform:none}

@media(max-width:980px){
  .nav-links{display:none}
  .nav .btn{display:none}
  .burger{display:grid}
}
@media(max-width:560px){
  body{font-size:16px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none}
}