/* Carenciel × communication — Header, footer et pages erreur 404/502
   CSS totalement autonome : les pages d'erreur intègrent également ces règles. */
:root {
  --c-ink:#211d21; --c-night:#211e21; --c-grey:#67646b; --c-quiet:#959299;
  --c-bg:#f7f7f5; --c-white:#fff; --c-stroke:#e6e3e2;
  --c-yellow:#f9b522; --c-yellow-strong:#f3a817; --c-magenta:#e23080;
  --c-cyan:#23b8cf; --c-green:#9dca48; --c-purple:#7966b1;
  --c-shadow:0 24px 65px rgba(31,28,30,.09);
  --c-font:Lato, "Segoe UI", Arial, Helvetica, sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--c-bg);color:var(--c-ink);font-family:var(--c-font);-webkit-font-smoothing:antialiased}
a{color:inherit}
button{font:inherit}
:where(a,button):focus-visible{outline:3px solid var(--c-magenta);outline-offset:4px}
.container{width:min(100% - 64px,1220px);margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Identité / logotype officiel. Fallback utilisable même pendant une panne. */
.car-brand{display:inline-flex;align-items:center;position:relative;text-decoration:none;min-width:166px;min-height:71px}
.car-brand__img{position:absolute;z-index:1;inset:0;width:100%;height:100%;object-fit:contain;object-position:left center;background:#fff;color:transparent}
.car-brand__fallback{position:relative;display:flex;flex-direction:column;gap:4px;color:var(--c-ink);line-height:1;pointer-events:none}
.car-brand__fallback strong{font-size:25px;font-weight:900;letter-spacing:-.065em}
.car-brand__fallback small{font-size:8px;letter-spacing:.18em;align-self:flex-end;color:var(--c-grey);text-transform:uppercase;font-weight:800}
.car-brand__pixels{display:flex;gap:3px;height:6px;padding-left:5px}
.car-brand__pixels i{width:21px;background:var(--c-yellow);border-radius:1px}.car-brand__pixels i:nth-child(2){background:var(--c-magenta);width:14px}.car-brand__pixels i:nth-child(3){background:var(--c-cyan);width:31px}.car-brand__pixels i:nth-child(4){background:var(--c-green);width:13px}.car-brand__pixels i:nth-child(5){background:var(--c-purple);width:24px}

/* Header */
.car-header{position:relative;z-index:2;background:#fff;border-bottom:1px solid var(--c-stroke)}
.car-header::before{content:"";display:block;height:4px;background:linear-gradient(90deg,var(--c-yellow) 0 24%,var(--c-magenta) 24% 43%,var(--c-cyan) 43% 69%,var(--c-green) 69% 84%,var(--c-purple) 84%)}
.car-header__inner{display:flex;align-items:center;justify-content:space-between;gap:36px;min-height:105px;padding-block:12px}
.car-header__nav{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:clamp(15px,2.4vw,32px);font-size:.89rem;font-weight:750}
.car-header__nav a{text-decoration:none;transition:color .18s ease}
.car-header__nav a:hover{color:#b96800}
.car-header__nav .car-header__cta{min-height:42px;display:inline-flex;align-items:center;gap:7px;padding:0 19px;border:1px solid #222;border-radius:3px;color:#fff;background:var(--c-night);font-weight:800;transition:background .18s ease,border-color .18s ease}
.car-header__nav .car-header__cta:hover{background:#ac6500;border-color:#ac6500;color:#fff}

/* Footer */
.car-footer{background:var(--c-night);color:#eae8e8;margin-top:auto}
.car-footer__accent{height:4px;background:linear-gradient(90deg,var(--c-magenta) 0 25%,var(--c-yellow) 25% 50%,var(--c-green) 50% 68%,var(--c-cyan) 68% 100%)}
.car-footer__top{display:grid;grid-template-columns:1.36fr .8fr .9fr;gap:50px;padding-block:34px 30px}
.car-footer__logo{display:inline-flex;align-items:center;background:#fff;border-radius:5px;padding:2px 11px;width:188px;min-height:78px}
.car-footer__logo .car-brand{min-width:160px;min-height:70px}
.car-footer__desc{color:#c2bfc1;font-size:.88rem;line-height:1.65;max-width:310px;margin:13px 0 0}
.car-footer h2{font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;color:#fff;margin:5px 0 14px;font-weight:900}
.car-footer__links{display:flex;flex-direction:column;gap:10px}
.car-footer__links a{color:#d7d4d6;text-decoration:none;font-size:.89rem;line-height:1.3}
.car-footer__links a:hover,.car-footer__contact a:hover{color:var(--c-yellow)}
.car-footer__contact{display:flex;flex-direction:column;gap:10px;font-size:.9rem;line-height:1.35}
.car-footer__contact a{text-decoration:none;color:#d7d4d6}
.car-footer__bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;border-top:1px solid #454144;padding-block:15px 20px;color:#b9b4b8;font-size:.76rem;letter-spacing:.01em}
.car-footer__bottom a{text-decoration:none;color:inherit}
.car-footer__bottom a:hover{color:var(--c-yellow)}

/* Commun aux pages erreur */
.car-page{flex:1;display:flex;flex-direction:column;min-height:0}
.car-eyebrow{display:inline-flex;align-items:center;gap:11px;font-size:.77rem;font-weight:900;text-transform:uppercase;letter-spacing:.19em;color:#565055}
.car-eyebrow::before{content:"";height:5px;width:28px;background:linear-gradient(90deg,var(--c-magenta) 0 33%,var(--c-yellow) 33% 67%,var(--c-cyan) 67%);border-radius:1px}
.car-button{display:inline-flex;justify-content:center;align-items:center;gap:11px;min-height:52px;border:1px solid var(--c-ink);border-radius:4px;padding:12px 21px;font-weight:850;letter-spacing:.01em;font-size:.91rem;text-decoration:none;cursor:pointer;transition:transform .2s ease,background-color .2s ease,color .2s ease,border-color .2s ease}
.car-button:hover{transform:translateY(-2px)}
.car-button--primary{background:var(--c-yellow);border-color:var(--c-yellow);color:var(--c-ink)}
.car-button--primary:hover{background:var(--c-yellow-strong);border-color:var(--c-yellow-strong)}
.car-button--secondary{background:#fff;color:var(--c-ink)}
.car-button--secondary:hover{background:#f5f3ef}
.car-button__arrow{font-size:1.1em;line-height:1}

/* 404 : éventail de teintes, conservé de la création Koliris mais redessiné Carenciel */
.error-404__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,5vw,72px);align-items:center;padding-block:70px 84px}
.error-404__copy{position:relative;z-index:1}
.error-404 h1,.error-502 h1{font-weight:950;line-height:1.065;letter-spacing:-.05em}
.error-404 h1{font-size:clamp(2.55rem,4.5vw,4.75rem);margin:18px 0 23px;max-width:570px}
.error-404 h1 em{font-style:normal;color:#b06700}
.error-404 .lead{font-size:1.07rem;line-height:1.74;color:#575358;margin:0 0 26px;max-width:535px}
.error-404 .car-actions{display:flex;flex-wrap:wrap;gap:12px;margin:27px 0 31px}
.error-404__quick{border-top:1px solid #dcd9d7;padding-top:21px;display:flex;flex-wrap:wrap;gap:11px 19px;font-size:.88rem}
.error-404__quick span{width:100%;font-weight:850;margin-bottom:1px}
.error-404__quick a{font-weight:750;text-decoration:underline;text-decoration-color:#cfc9c5;text-underline-offset:5px}
.error-404__quick a:hover{color:#b06700;text-decoration-color:currentColor}
.error-404__visual{min-width:0;position:relative;border-radius:22px;background:radial-gradient(circle at 57% 45%,#fff 0%,#fff 35%,#f3f0ec 100%);border:1px solid #e9e6e2;box-shadow:var(--c-shadow);height:min(490px,40vw);min-height:395px;overflow:hidden;isolation:isolate}
.error-404__visual::before{content:"";position:absolute;inset:0;background-image:radial-gradient(#dcd7d2 .9px,transparent .9px);background-size:17px 17px;opacity:.5;mask-image:linear-gradient(90deg,transparent 20%,#000 100%);pointer-events:none}
.error-404__visual::after{content:"";position:absolute;width:215px;height:215px;right:-88px;top:-86px;border:44px solid rgba(250,184,46,.14);border-radius:50%;pointer-events:none}
.swatch{position:absolute;left:50%;bottom:48px;width:146px;height:271px;border-radius:8px 8px 3px 3px;background:#fff;overflow:hidden;box-shadow:0 3px 6px rgba(0,0,0,.055),0 21px 34px rgba(31,23,22,.15);transform:translateX(-50%) rotate(var(--deg));transform-origin:50% 93%;animation:car-fan .85s cubic-bezier(.22,.75,.24,1) both;animation-delay:var(--delay);border:1px solid rgba(27,23,22,.075)}
.swatch__color{height:77%;background:var(--swatch);display:flex;justify-content:center;align-items:center}
.swatch__label{display:block;padding:11px 12px 0;font-size:.64rem;letter-spacing:.13em;font-weight:900;text-transform:uppercase;color:#59545a}
.swatch--lost{z-index:2}
.swatch--lost .swatch__color{background:repeating-linear-gradient(-45deg,#f0efeb 0 11px,#e6e2de 11px 22px);border-bottom:4px solid var(--c-yellow)}
.swatch--lost strong{font-size:3.85rem;letter-spacing:-.075em;color:var(--c-ink);font-weight:950}
.swatch--lost .swatch__label{color:var(--c-ink)}
.error-404__visual-caption{position:absolute;bottom:18px;left:20px;font-size:.65rem;letter-spacing:.13em;font-weight:900;color:#7d7573;text-transform:uppercase}
@keyframes car-fan{from{transform:translateX(-50%) rotate(0deg) translateY(14px);opacity:.1}to{transform:translateX(-50%) rotate(var(--deg));opacity:1}}

/* 502 : signalétique peinture fraîche */
.error-502__content{width:min(100% - 44px,780px);margin:auto;text-align:center;padding-block:58px 72px}
.error-502 h1{font-size:clamp(2.4rem,4vw,4.1rem);max-width:760px;margin:18px auto 17px}
.error-502 .lead{font-size:1.08rem;line-height:1.68;color:#59555a;max-width:625px;margin:0 auto 27px}
.error-502__sign{position:relative;margin:40px auto 34px;max-width:400px;animation:car-sway 5s ease-in-out infinite;transform-origin:50% -27px}
.error-502__sign::before,.error-502__sign::after{content:"";position:absolute;width:2px;height:43px;top:-40px;background:#8b8581;z-index:-1}
.error-502__sign::before{left:25%;transform:rotate(18deg)}
.error-502__sign::after{right:25%;transform:rotate(-18deg)}
.error-502__board{position:relative;background:#fff;border:1px solid #dedbd8;border-radius:9px;box-shadow:0 24px 42px rgba(27,25,25,.13);overflow:hidden;text-align:left}
.error-502__stripes{height:28px;background:repeating-linear-gradient(135deg,var(--c-night) 0 19px,var(--c-yellow) 19px 38px)}
.error-502__board-content{padding:22px 27px 25px}
.error-502__label{font-weight:900;letter-spacing:.19em;font-size:.69rem;text-transform:uppercase;color:#706b71}
.error-502__board strong{display:block;font-weight:950;letter-spacing:-.035em;font-size:clamp(2rem,5vw,2.65rem);line-height:1.14;margin:6px 0 7px}
.error-502__badge{position:absolute;right:17px;top:42px;font-size:.65rem;background:var(--c-night);color:#fff;padding:8px 11px;border-radius:3px;letter-spacing:.1em;font-weight:900}
.error-502__drip{height:5px;background:linear-gradient(90deg,var(--c-magenta) 0 21%,var(--c-cyan) 21% 46%,var(--c-green) 46% 68%,var(--c-yellow) 68%)}
.error-502__retry{max-width:490px;margin:22px auto 0;background:#fff;border:1px solid var(--c-stroke);border-radius:9px;padding:19px 21px;text-align:left}
.error-502__retry-head{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-size:.85rem;font-weight:800;margin:0 0 13px;color:#605b61}
.error-502__retry-track{height:8px;background:#eae8e6;border-radius:99px;overflow:hidden}
.error-502__retry-bar{height:100%;width:0;background:linear-gradient(90deg,var(--c-cyan),var(--c-green),var(--c-yellow));transition:width .5s linear}
.error-502__actions{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px;margin:25px auto 0}
.error-502__contact{font-size:.9rem;color:#696469;margin:22px 0 0}
.error-502__contact a{color:var(--c-ink);font-weight:900;text-underline-offset:3px}
@keyframes car-sway{0%,100%{transform:rotate(-.8deg)}50%{transform:rotate(.8deg)}}

@media(max-width:960px){
  .error-404__grid{grid-template-columns:1fr;gap:35px;padding-block:45px 55px}
  .error-404__visual{grid-row:1;max-width:640px;width:100%;height:360px;min-height:0;margin-inline:auto}
  .swatch{width:127px;height:236px;bottom:36px}
  .swatch--lost strong{font-size:3.2rem}
  .error-404__copy{max-width:680px;margin-inline:auto}
  .car-footer__top{gap:28px}
}
@media(max-width:700px){
  .container{width:min(100% - 36px,1220px)}
  .car-header__inner{min-height:91px;gap:12px}
  .car-header__nav{gap:10px;font-size:.8rem}
  .car-header__nav .car-header__hide-small{display:none}
  .car-header__nav .car-header__cta{padding:0 12px;min-height:38px}
  .car-brand{min-width:145px;min-height:66px}
  .car-brand__fallback strong{font-size:22px}
  .car-footer__top{grid-template-columns:1fr 1fr;gap:27px;padding-block:30px 25px}
  .car-footer__identity{grid-column:1/-1}
  .error-404__visual{height:306px}
  .swatch{width:104px;height:188px;bottom:49px}
  .swatch--lost strong{font-size:2.7rem}
  .swatch__label{font-size:.51rem;padding:8px 7px}
  .error-404 h1{font-size:clamp(2.5rem,9vw,3.3rem)}
  .error-502__content{padding-block:40px 49px}
  .error-502__sign{margin-top:45px}
  .error-502__board-content{padding:19px 19px 23px}
}
@media(max-width:420px){
  .car-header__inner{min-height:84px}
  .car-header__nav .car-header__cta{font-size:.74rem}
  .car-footer__top{grid-template-columns:1fr;gap:25px}
  .car-footer__identity{grid-column:auto}
  .error-404__visual{height:280px}
  .swatch{width:88px;height:165px;bottom:48px}
  .swatch--lost strong{font-size:2.3rem}
  .error-502__badge{right:12px;top:39px;font-size:.58rem}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .swatch{animation:none;transform:translateX(-50%) rotate(var(--deg));opacity:1}
  .error-502__sign{animation:none}
  .car-button,.car-header__nav a,.error-502__retry-bar{transition:none}
}