/* ==========================================================================
   RM ALU — feuille de style unique
   Palette : anthracite (structure) + aluminium (surfaces) + rouge du logo (action).
   Le rouge du logo est #FD0001 ; l'action utilise #D80007, assombri juste ce
   qu'il faut pour que le texte blanc passe le contraste AA (5,4:1 contre 4,1:1).
   Aucune ressource externe : pas de police distante, pas de CDN d'icônes.
   ========================================================================== */

:root{
  --ink:#0d1117;
  --ink-2:#161b22;
  --ink-3:#22272e;
  --alu:#8b949e;
  --alu-light:#c9d1d9;
  --line:#e2e6ea;
  --bg:#ffffff;
  --bg-soft:#f5f7f9;
  --accent:#d80007;
  --accent-dark:#a80005;
  --accent-soft:rgba(216,0,7,.09);
  --ok:#1a7f4b;
  --err:#b3261e;
  --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --radius:10px;
  --shadow:0 2px 14px rgba(13,17,23,.07);
  --shadow-lg:0 12px 38px rgba(13,17,23,.16);
  --t:.22s ease;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px;scroll-padding-top:80px}
body{font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:3px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}

.skip-link{position:absolute;left:-9999px;top:0;z-index:999;background:var(--ink);color:#fff;padding:12px 20px;font-weight:700}
.skip-link:focus{left:0}

.ic{width:1em;height:1em;display:inline-block;vertical-align:-.125em;flex:none}
.ic-lg{width:1.5rem;height:1.5rem}

/* ===== Utilitaires ===== */
.container{max-width:1140px;margin:0 auto;padding:0 20px}
.container--narrow{max-width:820px}
.section{padding:84px 0}
.section--light{background:var(--bg-soft)}
.section--dark{background:var(--ink-2);color:var(--alu-light)}
.section--dark .section-title{color:#fff}
.section-label{font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.section-label--light{color:#ff5b5b}
.section-title{font-size:clamp(1.55rem,3.2vw,2.3rem);font-weight:800;line-height:1.2;margin-bottom:14px;letter-spacing:-.01em}
.section-desc{font-size:1.03rem;color:#4c5560;max-width:640px}
.section--dark .section-desc{color:var(--alu-light)}
.section-head{margin-bottom:48px}
.section-note{margin-top:32px;font-size:.92rem;color:#4c5560;max-width:680px}
.section--dark .section-note{color:var(--alu)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:14px 26px;border-radius:6px;font-weight:700;font-size:.95rem;font-family:inherit;cursor:pointer;border:2px solid transparent;transition:var(--t);white-space:nowrap;line-height:1.2}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-dark);transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.btn-outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn-outline:hover{background:rgba(255,255,255,.14);border-color:#fff}
.btn-ghost{background:transparent;color:var(--alu-light);border-color:rgba(255,255,255,.25)}
.btn-ghost:hover{background:rgba(255,255,255,.08);color:#fff}
.btn-block{display:flex;width:100%;margin-top:10px}

/* ===== Navigation ===== */
.nav{position:fixed;inset:0 0 auto 0;z-index:100;transition:var(--t)}
.nav.scrolled{background:#fff;box-shadow:0 1px 0 var(--line),0 4px 20px rgba(13,17,23,.06)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:70px}
.nav-logo{display:flex;align-items:center;gap:12px}
.nav-mark{width:44px;height:44px;border-radius:8px;background:#fff;padding:3px;object-fit:contain;flex:none}
.nav-logo-text{line-height:1.15;display:block}
.nav-logo-text strong{display:block;font-size:1.08rem;font-weight:900;color:#fff;letter-spacing:.04em;transition:var(--t)}
.nav-logo-text span{font-size:.73rem;color:rgba(255,255,255,.72);transition:var(--t)}
.nav.scrolled .nav-logo-text strong{color:var(--ink)}
.nav.scrolled .nav-logo-text span{color:#5b636d}
.nav-links{display:flex;align-items:center;gap:28px}
.nav-links a{font-weight:600;font-size:.92rem;color:rgba(255,255,255,.9);transition:var(--t)}
.nav.scrolled .nav-links a{color:#3d444d}
.nav-links a:hover{color:#ff5b5b}
.nav.scrolled .nav-links a:hover{color:var(--accent)}
.nav-cta{background:var(--accent);color:#fff!important;padding:10px 18px;font-size:.9rem}
.nav-cta:hover{background:var(--accent-dark)!important}
.nav-burger{display:none;background:none;border:none;cursor:pointer;flex-direction:column;gap:5px;padding:6px}
.nav-burger span{display:block;width:23px;height:2px;background:#fff;border-radius:2px;transition:var(--t)}
.nav.scrolled .nav-burger span{background:var(--ink)}
.nav-mobile{display:none}
.nav-mobile-tel{color:var(--accent)!important;font-weight:800}

/* ===== Hero ===== */
.hero{position:relative;min-height:92vh;display:flex;align-items:center;padding:120px 0 72px;overflow:hidden;background:var(--ink)}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover}
/* Voile réparti sur toute la largeur : la photo doit rester lisible de bord à bord,
   tout en gardant un contraste suffisant pour le texte blanc côté gauche. */
.hero-bg::after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(13,17,23,.88) 0%,rgba(13,17,23,.72) 46%,rgba(13,17,23,.55) 100%),
  radial-gradient(circle at 84% 14%,rgba(216,0,7,.24),transparent 46%)}
.hero-content{position:relative;z-index:1;max-width:720px}
.hero-badge{display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);border-radius:50px;padding:8px 18px;font-size:.82rem;font-weight:600;color:#fff;margin-bottom:26px}
.hero-badge .ic{color:#ff5b5b}
.hero h1{font-size:clamp(2.05rem,5vw,3.4rem);font-weight:900;line-height:1.1;color:#fff;margin-bottom:20px;letter-spacing:-.02em}
.hero h1 em{font-style:normal;color:#ff5b5b}
.hero-desc{font-size:1.1rem;color:rgba(255,255,255,.84);margin-bottom:34px;max-width:580px}
.hero-cta{display:flex;flex-wrap:wrap;gap:13px;margin-bottom:38px}
.hero-points{display:flex;flex-wrap:wrap;gap:12px 28px}
.hero-points li{display:flex;align-items:center;gap:8px;color:rgba(255,255,255,.8);font-size:.9rem;font-weight:600}
.hero-points .ic{color:#ff5b5b}

/* ===== Bandeau réassurance ===== */
.strip{background:var(--ink-3);color:var(--alu-light);padding:30px 0}
.strip-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:26px}
.strip-item{display:flex;gap:14px;align-items:flex-start}
.strip-item .ic-lg{color:#ff5b5b;margin-top:3px}
.strip-item strong{display:block;color:#fff;font-size:.95rem}
.strip-item span{font-size:.85rem;color:var(--alu);line-height:1.5}

/* ===== Cartes ===== */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:22px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;transition:var(--t)}
.section--light .card{background:#fff}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:#d4d9de}
.card-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:8px;background:var(--accent-soft);color:var(--accent);font-size:1.15rem;margin-bottom:14px}
.card h3{font-size:1.02rem;font-weight:700;margin-bottom:7px;line-height:1.3}
.card p{font-size:.9rem;color:#4c5560;line-height:1.6}

/* ===== Split (méthode / contact) ===== */
.split{display:grid;grid-template-columns:1.35fr 1fr;gap:56px;align-items:start}
.split-lead{margin-bottom:34px;color:var(--alu-light);max-width:600px}
.feature{display:flex;gap:16px;margin-bottom:26px}
.feature-icon{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:8px;background:rgba(255,255,255,.09);color:#ff5b5b;font-size:1.1rem}
.feature h3{font-size:.98rem;font-weight:700;color:#fff;margin-bottom:4px}
.feature p{font-size:.89rem;color:var(--alu);line-height:1.6}
.panel{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);padding:30px;position:sticky;top:96px}
.panel h3{font-size:1.2rem;font-weight:800;color:#fff;margin-bottom:10px}
.panel p{font-size:.92rem;color:var(--alu-light);margin-bottom:20px}
.panel-note{margin:16px 0 0;font-size:.82rem;color:var(--alu);text-align:center}

/* ===== Réalisations ===== */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
/* Les photos du client sont toutes en portrait : le cadre l'est aussi, sinon
   object-fit recadre une seconde fois et décapite le sujet. */
.shot{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--ink-3);aspect-ratio:3/4}
.shot img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.shot:hover img{transform:scale(1.04)}
.shot figcaption{position:absolute;inset:auto 0 0 0;padding:30px 16px 14px;font-size:.86rem;font-weight:600;color:#fff;
  background:linear-gradient(transparent,rgba(13,17,23,.9))}
@supports not (aspect-ratio:1){.shot{height:380px}}

/* ===== Zones ===== */
.zones{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.zones li{display:flex;align-items:center;gap:9px;background:var(--bg-soft);border:1px solid var(--line);border-radius:6px;padding:12px 15px;font-size:.92rem;font-weight:600}
.zones .ic{color:var(--accent)}

/* ===== FAQ ===== */
.faq details{background:#fff;border:1px solid var(--line);border-radius:var(--radius);margin-bottom:12px;overflow:hidden}
.faq summary{cursor:pointer;padding:18px 22px;font-weight:700;font-size:1rem;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.5rem;font-weight:400;color:var(--accent);line-height:1;flex:none}
.faq details[open] summary::after{content:"–"}
.faq details[open] summary{border-bottom:1px solid var(--line)}
.faq p{padding:16px 22px 22px;font-size:.94rem;color:#4c5560}

/* ===== Contact ===== */
.contact-list{display:flex;flex-direction:column;gap:14px;margin-top:32px}
.contact-item{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--line);border-radius:8px;transition:var(--t)}
a.contact-item:hover{border-color:var(--accent);background:var(--accent-soft)}
.contact-icon{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:8px;background:var(--accent-soft);color:var(--accent);font-size:1.05rem}
.contact-item span strong{display:block;font-size:.8rem;color:#5b636d;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.contact-item>span:last-child{font-size:.95rem;font-weight:600}

.form-wrap{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius);padding:30px}
.field{margin-bottom:16px}
.field label{display:block;font-size:.86rem;font-weight:700;margin-bottom:6px;color:#3d444d}
.field label span{color:var(--accent)}
.field label .opt{color:#5b636d;font-weight:400;font-size:.8rem}
.field input,.field select,.field textarea{width:100%;padding:12px 14px;border:1px solid #d4d9de;border-radius:6px;font-family:inherit;font-size:.95rem;background:#fff;color:var(--ink);transition:var(--t)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--accent-soft)}
.field textarea{resize:vertical;min-height:118px}
.field-check{display:flex;gap:10px;align-items:flex-start;margin-bottom:20px}
.field-check input{width:auto;margin-top:4px;flex:none;accent-color:var(--accent)}
.field-check label{font-size:.84rem;font-weight:400;color:#4c5560;margin:0}
.field-check a{color:var(--accent);text-decoration:underline}
.form-note{margin-top:12px;font-size:.8rem;color:#5b636d;text-align:center}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.alert{padding:14px 18px;border-radius:8px;font-size:.9rem;margin-bottom:20px}
.alert-ok{background:#e7f5ee;border:1px solid #b7e0c9;color:var(--ok)}
.alert-err{background:#fdecea;border:1px solid #f5c4bf;color:var(--err)}
.alert-err ul{margin:8px 0 0;padding-left:18px;list-style:disc}

/* ===== Footer ===== */
.footer{background:var(--ink);color:rgba(255,255,255,.66);padding:58px 0 30px}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:46px;margin-bottom:44px}
.footer-brand{display:flex;align-items:center;gap:12px;margin-bottom:15px}
.footer-brand strong{color:#fff;font-size:1.05rem;letter-spacing:.04em}
.footer-desc{font-size:.88rem;line-height:1.7;max-width:300px}
.footer h4{color:#fff;font-size:.9rem;font-weight:700;margin-bottom:15px}
.footer-links{display:flex;flex-direction:column;gap:10px}
.footer-links a,.footer-static{font-size:.87rem;display:flex;align-items:center;gap:9px;transition:var(--t)}
.footer-links a:hover{color:#fff}
.footer-links .ic{color:var(--accent)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.09);padding-top:26px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.82rem}
.footer-bottom a{color:#ff5b5b}
.footer-bottom-links{display:flex;gap:20px}
.footer-bottom-links a{color:rgba(255,255,255,.66)}
.footer-bottom-links a:hover{color:#fff}

/* ===== CTA flottant / retour haut ===== */
.floating-cta{position:fixed;bottom:24px;right:24px;z-index:99;opacity:0;transform:translateY(12px);transition:var(--t);pointer-events:none}
.floating-cta.visible{opacity:1;transform:none;pointer-events:auto}
.floating-cta a{display:flex;align-items:center;gap:10px;background:var(--accent);color:#fff;padding:14px 22px;border-radius:50px;font-weight:700;font-size:.92rem;box-shadow:0 6px 22px rgba(216,0,7,.42)}
.floating-cta a:hover{background:var(--accent-dark)}
.scroll-top{position:fixed;bottom:24px;left:24px;z-index:99;width:44px;height:44px;border-radius:50%;background:var(--ink);color:#fff;border:none;cursor:pointer;display:grid;place-items:center;font-size:1.1rem;opacity:0;transform:translateY(12px);transition:var(--t);pointer-events:none;box-shadow:0 4px 16px rgba(0,0,0,.28)}
.scroll-top.visible{opacity:1;transform:none;pointer-events:auto}
.scroll-top:hover{background:var(--accent)}

/* ===== Cookies ===== */
.cookie-consent{position:fixed;inset:auto 0 0 0;z-index:200;background:var(--ink);border-top:2px solid var(--accent);padding:18px 0}
.cookie-consent.cookie-hidden{display:none}
.cookie-consent-inner{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.cookie-consent-text{flex:1;min-width:250px}
.cookie-consent-text p{color:rgba(255,255,255,.82);font-size:.86rem;margin-bottom:3px}
.cookie-consent-text p:first-child{font-weight:700;font-size:.95rem;color:#fff}
.cookie-link{color:#ff5b5b;text-decoration:underline}
.cookie-consent-actions{display:flex;gap:10px;flex:none}
.cookie-btn{padding:10px 22px;border-radius:6px;font-weight:700;font-size:.87rem;font-family:inherit;cursor:pointer;border:1px solid transparent;transition:var(--t)}
.cookie-btn-accept{background:var(--accent);color:#fff}
.cookie-btn-accept:hover{background:var(--accent-dark)}
.cookie-btn-refuse{background:transparent;color:rgba(255,255,255,.72);border-color:rgba(255,255,255,.28)}
.cookie-btn-refuse:hover{background:rgba(255,255,255,.1);color:#fff}

/* ===== Pages légales ===== */
.legal{padding:130px 0 70px;max-width:820px}
.legal h1{font-size:1.9rem;font-weight:800;margin-bottom:26px}
.legal h2{font-size:1.12rem;font-weight:700;margin:32px 0 10px}
.legal p,.legal li{font-size:.94rem;color:#3d444d;margin-bottom:10px}
.legal ul{list-style:disc;padding-left:22px}
.legal a{color:var(--accent);text-decoration:underline}

/* ===== Responsive ===== */
@media(max-width:960px){
  .split{grid-template-columns:1fr;gap:40px}
  .panel{position:static}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
  .nav-links{display:none}
  .nav-burger{display:flex}
  .nav-mobile{display:none;flex-direction:column;background:#fff;position:fixed;top:70px;left:0;right:0;padding:14px 20px;box-shadow:0 10px 26px rgba(0,0,0,.12);z-index:99}
  .nav-mobile.open{display:flex}
  .nav-mobile a{padding:14px 0;border-bottom:1px solid var(--line);font-weight:600;color:var(--ink);display:flex;align-items:center;gap:9px}
  .nav-mobile a:last-child{border-bottom:none}
  .section{padding:58px 0}
  .hero{min-height:auto;padding:112px 0 60px}
  .footer-grid{grid-template-columns:1fr;gap:30px}
  .footer-bottom{flex-direction:column;align-items:flex-start}
  .floating-cta{bottom:14px;right:14px}
  .floating-cta a{padding:12px 18px;font-size:.87rem}
  .scroll-top{bottom:14px;left:14px}
  .cookie-consent-actions{width:100%}
  .cookie-btn{flex:1}
}