/* ============================================================
   design-system.css — L'Atelier de la Jante
   Tokens communs + règles d'harmonisation partagées par
   toutes les pages. Chargé EN DERNIER (après le CSS de page).
   Pour revenir en arrière : retirer le <link> de ce fichier.
   ============================================================ */

:root{
  /* Couleurs */
  --ds-red:#CC1C1C;
  --ds-red-dark:#A01414;
  --ds-red-glow:rgba(204,28,28,.45);
  --ds-ink:#F4F0F0;
  --ds-bg-0:#050505;
  --ds-bg-1:#0a0a0a;
  --ds-bg-2:#111111;
  --ds-line:rgba(255,255,255,.08);
  --ds-line-strong:rgba(255,255,255,.18);
  --ds-text-1:#ffffff;
  --ds-text-2:rgba(255,255,255,.66);
  --ds-text-3:rgba(255,255,255,.45);

  /* Typographie */
  --ds-font-display:'Syne',sans-serif;
  --ds-font-body:'Satoshi','Inter',system-ui,sans-serif;
  --ds-h2:clamp(23px,7.2vw,56px);
  --ds-h2-lh:.96;
  --ds-kicker:11px;
  --ds-kicker-ls:.3em;
  --ds-intro:15px;
  --ds-intro-lh:1.65;
  --ds-btn-size:11px;
  --ds-btn-ls:.28em;

  /* Espacements & grille */
  --ds-section-y:clamp(72px,8vw,104px);
  --ds-gap-head:clamp(28px,4vw,44px);
  --ds-container:1152px;
  --ds-gutter:16px;

  /* Formes */
  --ds-radius:14px;
  --ds-cut:14px;
  --ds-btn-h:54px;

  /* Mouvement */
  --ds-ease:cubic-bezier(.16,1,.3,1);
  --ds-dur:.3s;
}
@media (min-width:768px){ :root{ --ds-gutter:24px; } }

/* ---------- Base ---------- */
::selection{ background:var(--ds-red); color:#fff; }
:where(a,button,input,textarea,select,summary,[tabindex]):focus-visible{
  outline:2px solid var(--ds-red);
  outline-offset:3px;
}

/* ---------- Étiquette au-dessus des titres (accueil + pages services) ---------- */
#main .section-kicker,
#main .risk-kicker,
.sp-eyebrow{
  font-family:var(--ds-font-body) !important;
  font-size:var(--ds-kicker) !important;
  font-weight:800 !important;
  letter-spacing:var(--ds-kicker-ls) !important;
  text-transform:uppercase !important;
  color:var(--ds-ink) !important;
}

/* ---------- Titres de section (H2) : une seule échelle ---------- */
#main > section h2.section-heading,
#main > section.risk-section h2,
.sp-h2:not(.sp-h2--cta){
  font-size:var(--ds-h2) !important;
  line-height:var(--ds-h2-lh) !important;
  letter-spacing:-.02em !important;
}
.sp-h2--cta{ font-size:clamp(26px,7.2vw,60px) !important; line-height:.95 !important; }

/* Titres longs : jamais de débordement (coupure propre en dernier recours) */
h1,h2{ overflow-wrap:break-word; }

/* Alignement : en mobile, le titre suit son étiquette et son intro (à gauche, comme sur ordinateur) */
@media (max-width:767px){
  #main > section h2.section-heading{ text-align:left !important; margin-left:0 !important; margin-right:0 !important; }
}

/* Avis : l'en-tête s'aligne sur la même marge que les autres sections */
#avis > .max-w-full > .max-w-6xl{ padding-left:0 !important; padding-right:0 !important; }
@media (min-width:768px){ #avis > .max-w-full > .max-w-6xl{ padding-left:24px !important; padding-right:24px !important; } }

/* ---------- Texte d'introduction sous les titres ---------- */
#main .section-intro,
#main > section.risk-section h2 + p{
  font-size:var(--ds-intro) !important;
  line-height:var(--ds-intro-lh) !important;
  color:var(--ds-text-2) !important;
}

/* ---------- Rythme vertical des sections ---------- */
#main > section:not(.hero-section):not([class*="sp-"]){
  padding-top:var(--ds-section-y) !important;
  padding-bottom:var(--ds-section-y) !important;
}
.sp-section{
  padding-top:var(--ds-section-y) !important;
  padding-bottom:var(--ds-section-y) !important;
}

/* ---------- Boutons : un seul langage (biseau, 11px, .28em, 54px) ---------- */
.sp-btn,
.fb-cta,
.fb-cta2{
  --c:var(--cta-cut,var(--ds-cut));
  min-height:var(--ds-btn-h) !important;
  font-family:var(--ds-font-body) !important;
  font-size:var(--ds-btn-size) !important;
  font-weight:900 !important;
  letter-spacing:var(--ds-btn-ls) !important;
  text-transform:uppercase !important;
  border-radius:0 !important;
  clip-path:polygon(var(--c) 0,100% 0,calc(100% - var(--c)) 100%,0 100%) !important;
  transition:transform var(--ds-dur) var(--ds-ease),box-shadow var(--ds-dur) var(--ds-ease),background-color var(--ds-dur) ease,color var(--ds-dur) ease !important;
}
.sp-btn{ display:inline-flex !important; align-items:center; justify-content:center; padding-left:28px !important; padding-right:28px !important; }
.sp-btn--primary{ box-shadow:0 10px 30px rgba(204,28,28,.32); }
.sp-btn--primary:hover{ transform:translateY(-2px); box-shadow:0 14px 36px rgba(204,28,28,.5); }
.sp-btn--ghost:hover{ transform:translateY(-2px); }

.sp-nav-cta{
  clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%) !important;
  border-radius:0 !important;
  letter-spacing:.24em !important;
}

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

/* ---------- Grands écrans : l'interface grandit avec l'écran ----------
   Sous 1600 px rien ne change. Au-delà, tout le site est agrandi
   proportionnellement (textes, boutons, conteneurs, espacements). */
:root{ --ds-zoom:1; }
@media (min-width:1600px){ :root{ --ds-zoom:1.12; } }
@media (min-width:1800px){ :root{ --ds-zoom:1.22; } }
@media (min-width:2100px){ :root{ --ds-zoom:1.35; } }
@media (min-width:2500px){ :root{ --ds-zoom:1.55; } }
@media (min-width:1600px){
  html{ zoom:var(--ds-zoom); }
  /* les hauteurs « écran » sont compensées pour rester à la taille réelle de l'écran */
  .hero-section{ min-height:calc(100svh / var(--ds-zoom)) !important; }
  #quoteWizard .wizard-panel{ max-height:calc(92vh / var(--ds-zoom)) !important; }
}

/* Mentions légales : titre lisible sans débordement en mobile/tablette */
body[data-page="legal"] #main h1.legal-hero-title{ font-size:clamp(18px,5.6vw,60px) !important; line-height:1 !important; }

/* Footer : bandeau « Une jante abîmée ? » masqué en mobile (le CTA flottant fait déjà ce rôle) */
@media (max-width:767px){
  .site-footer-b .fb-band{ display:none !important; }
  .site-footer-b .fb-row{ padding-top:0 !important; }
}


/* ==================================================================
   COMPOSANT PARTAGÉ — Footer « B » (accueil, pages services, mentions)
   ================================================================== */

.site-footer-b{position:relative;overflow:hidden;background:#070707;border-top:1px solid rgba(255,255,255,.05);padding-top:56px}
.fb-band{--c:22px;position:relative;max-width:1152px;margin:0 auto;width:calc(100% - 32px);padding:clamp(24px,4vw,44px);display:flex;flex-wrap:wrap;gap:22px;align-items:center;justify-content:space-between;background:radial-gradient(80% 140% at 0% 0%,rgba(204,28,28,.28),transparent 60%),#111;clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,var(--c) 100%,0 calc(100% - var(--c)))}
.fb-band::before{content:"";position:absolute;inset:0;padding:1px;background:linear-gradient(135deg,rgba(204,28,28,.7),rgba(204,28,28,.15) 60%,rgba(255,255,255,.08));clip-path:inherit;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.fb-band__title{font-family:'Syne',sans-serif;font-style:italic;font-weight:800;text-transform:uppercase;font-size:clamp(1.4rem,3.4vw,2.2rem);line-height:1;margin:0;letter-spacing:-.01em}
.fb-band__sub{margin:8px 0 0;color:rgba(255,255,255,.6);font-size:14px}
.fb-band__btns{display:flex;flex-wrap:wrap;gap:10px}
.fb-cta,.fb-cta2{--c:14px;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;font-family:'Syne',sans-serif;font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:0 28px;color:#fff;clip-path:polygon(var(--c) 0,100% 0,calc(100% - var(--c)) 100%,0 100%);transition:transform .25s ease,box-shadow .25s ease,background .25s ease;cursor:pointer;border:0}
.fb-cta{background:linear-gradient(180deg,var(--primary),var(--primary-dark));box-shadow:0 0 30px rgba(204,28,28,.45)}
.fb-cta img{width:14px;height:14px;filter:brightness(0) invert(1)}
.fb-cta:hover{transform:translateY(-2px);box-shadow:0 0 40px rgba(204,28,28,.65)}
.fb-cta2{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.fb-cta2:hover{background:rgba(255,255,255,.12)}
.fb-row{max-width:1152px;margin:0 auto;padding:48px 16px 0;display:grid;gap:28px;justify-items:center;text-align:center}
.fb-brand{order:-1}
.fb-row #footerBrandName{display:flex;flex-direction:column;align-items:center;text-align:center}
.fb-row #footerBrandName > div{text-align:center!important;margin-top:6px}
.site-footer-b .footer-prestations{margin:0!important;padding:0!important;border:0!important;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 22px}
.fb-soc{display:flex;align-items:center;justify-content:center;gap:12px}
.fb-soc > a{width:46px!important;height:46px!important}
@media (min-width:1024px){
  .fb-row{grid-template-columns:1fr auto 1fr;align-items:center;text-align:left;gap:32px;padding-top:56px}
  .fb-brand{order:0}
  .site-footer-b .footer-prestations{justify-content:flex-start;max-width:380px}
  .fb-soc{justify-self:end}
}
.fb-giant{font-family:'Syne',sans-serif;font-style:italic;font-weight:800;text-transform:uppercase;white-space:nowrap;font-size:min(5.1vw,4.4rem);line-height:.82;letter-spacing:-.03em;text-align:center;margin:44px 0 0;color:transparent;-webkit-text-stroke:1.2px rgba(255,255,255,.14);background:linear-gradient(180deg,rgba(255,255,255,.12),transparent 85%);-webkit-background-clip:text;background-clip:text;user-select:none;transform:translateY(12%);pointer-events:none}
.fb-bot{position:relative;max-width:1152px;margin:0 auto;display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;justify-content:space-between;padding:18px 16px 22px;border-top:1px solid rgba(255,255,255,.06)}
.fb-bot #footerCopyright{font-size:10px!important;font-weight:700;letter-spacing:.22em!important;text-transform:uppercase;color:rgba(255,255,255,.3)!important;margin:0!important;text-align:left}
.fb-legal{font-size:12.5px;color:rgba(255,255,255,.5);transition:color .2s}
.fb-legal:hover{color:var(--primary)}
@media (max-width:767px){
  .fb-band{flex-direction:column;align-items:stretch;text-align:center}
  .fb-band__btns{flex-direction:column}
  .fb-cta,.fb-cta2{width:100%}
  .fb-bot{flex-direction:column;justify-content:center;text-align:center}
  .fb-bot #footerCopyright{text-align:center}
}
@media (min-width:1024px){.site-footer-b .fb-bot{padding-bottom:100px}}
.site-footer-b .footer-prestations a{position:relative;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.15em;color:rgba(255,255,255,.55);transition:color .2s ease}
.site-footer-b .footer-prestations a:hover{color:var(--primary)}
.site-footer-b .footer-prestations a::after{content:"";position:absolute;left:0;bottom:-3px;height:2px;width:100%;background:var(--primary);transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.65,0,.35,1)}
.site-footer-b .footer-prestations a:hover::after{transform:scaleX(1)}
.fb-links{display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:center}
.fb-bot #spFooterCopyright{font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.3);margin:0}
.site-footer-b .fb-links .fb-legal{display:inline-block;font-size:12.5px!important;letter-spacing:0!important;text-transform:none!important;padding:8px 4px!important;margin:0!important;line-height:1.2}

/* ==================================================================
   HARMONISATION GLOBALE — en-têtes, titres longs, bouton flottant
   ================================================================== */
/* Logo image dans l'en-tête des pages services et légales (même rendu que l'accueil) */
#spBrandName .ds-brand-logo, #legalBrandName .ds-brand-logo{ display:block; width:190px; height:44px; max-width:none; object-fit:cover; object-position:center; }
#spBrandName > div:last-child, #legalBrandName > div:last-child{ margin-top:2px; font-size:9px !important; letter-spacing:.16em !important; text-align:center; }
@media (max-width:380px){ #spBrandName .ds-brand-logo, #legalBrandName .ds-brand-logo{ width:160px; height:38px; } }

/* Titres de section longs (pages services) : échelle plus mesurée que les titres courts de l'accueil */
#main .sp-h2.section-heading:not(.sp-h2--cta){ font-size:clamp(24px,5.4vw,46px) !important; line-height:.98 !important; max-width:20ch; }
/* Mentions légales : titres de rubrique sobres */
body[data-page="legal"] #main h2{ font-size:clamp(20px,3.2vw,32px) !important; line-height:1.05 !important; }

/* Mentions légales — en-tête mobile compact (une ligne : logo + Devis) et copyright du footer */
@media (max-width:767px){
  body[data-page="legal"] > header > div{ display:flex !important; flex-direction:row !important; align-items:center !important; justify-content:space-between !important; gap:12px !important; padding-top:12px !important; padding-bottom:12px !important; }
  body[data-page="legal"] > header a[href="index.html"]:not(:has(#legalBrandName)){ display:none !important; }
  body[data-page="legal"] > header .flex.items-center.gap-3{ width:auto !important; flex:0 0 auto; display:flex !important; }
  body[data-page="legal"] #legalWaLink{ --c:10px; width:auto !important; min-height:42px !important; padding:0 16px !important; border-radius:0 !important; clip-path:polygon(var(--c) 0,100% 0,calc(100% - var(--c)) 100%,0 100%); color:#fff !important; background:linear-gradient(180deg,var(--ds-red),var(--ds-red-dark)) !important; font-size:10px !important; letter-spacing:.2em !important; }
  body[data-page="legal"] #legalBrandName .ds-brand-logo{ width:150px; height:36px; }
  body[data-page="legal"] #legalBrandName > div:last-child{ text-align:center !important; }
  body[data-page="legal"] > header > div{ flex-wrap:nowrap !important; }
  body[data-page="legal"] > header > div > a.leading-tight{ width:auto !important; flex:0 1 auto; }
  body[data-page="legal"] #legalBrandName{ display:inline-flex; flex-direction:column; align-items:center; }
  body[data-page="legal"] #main{ padding-top:84px !important; }
}
.fb-bot #footerCopyrightLegal{ font-size:10px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.3); margin:0; }

/* Performance & accessibilité (PageSpeed) — contraste du footer */
.fb-giant[data-text]::before{ content:attr(data-text); }
.site-footer-b .fb-bot #footerCopyright,
.site-footer-b .fb-bot #spFooterCopyright,
.site-footer-b .fb-bot #footerCopyrightLegal{ color:rgba(255,255,255,.62) !important; }
.site-footer-b .footer-prestations a{ color:rgba(255,255,255,.75) !important; }
.site-footer-b .footer-prestations a:hover{ color:#fff !important; }
.site-footer-b .fb-legal{ color:rgba(255,255,255,.7) !important; }
.site-footer-b .footer-brand-meta{ color:rgba(255,255,255,.7) !important; }