/* BA SERVICES - feuille de style (style inspire de hendre-services.com) */
@font-face{font-family:Poppins;font-weight:400;font-display:swap;src:url(/assets/fonts/poppins-400.woff2) format("woff2")}
@font-face{font-family:Poppins;font-weight:500;font-display:swap;src:url(/assets/fonts/poppins-500.woff2) format("woff2")}
@font-face{font-family:Poppins;font-weight:600;font-display:swap;src:url(/assets/fonts/poppins-600.woff2) format("woff2")}
@font-face{font-family:Poppins;font-weight:700;font-display:swap;src:url(/assets/fonts/poppins-700.woff2) format("woff2")}
:root{--marine:#203B72;--nuit:#10102E;--accent:#DA242B;--accent-f:#B81C22;--accent-txt:#fff;--accent-lien:#C81E25;--accent-clair:#FF8C90;--hero-fond:#FFF5F5;--gris:#F4F6FA;--trait:#E2E6EE;--texte:#3D4350;--titre:#14213D;--rayon:14px;--ombre:0 12px 32px rgba(16,16,46,.10)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font:400 16px/1.7 Poppins,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--texte);background:#fff}
img{max-width:100%;height:auto;display:block}
a{color:var(--marine)}
h1,h2,h3{color:var(--titre);line-height:1.25;margin:0 0 .6em;font-weight:700}
p{margin:0 0 1em}
.conteneur{width:min(1180px,100% - 32px);margin-inline:auto}
.sauter{position:absolute;left:-999px;top:0;background:#fff;padding:8px 14px;z-index:99}
.sauter:focus{left:8px}
.ico{width:1.1em;height:1.1em;fill:currentColor;flex:none;vertical-align:-.15em}

/* boutons */
.btn{display:inline-flex;align-items:center;gap:.5em;padding:.85em 1.6em;border-radius:8px;font-weight:600;font-size:.95rem;text-decoration:none;border:2px solid transparent;transition:.2s;cursor:pointer;font-family:inherit}
.btn--rouge{background:var(--accent);color:var(--accent-txt)}
.btn--rouge:hover{background:var(--accent-f)}
.btn--marine{background:var(--marine);color:#fff;position:relative;padding-right:2.6em}
.btn--marine::after{content:"";position:absolute;right:1em;top:50%;width:.9em;height:.9em;border-radius:50%;background:#fff;transform:translateY(-50%);box-shadow:inset 0 0 0 3px var(--marine),0 0 0 2px #fff}
.btn--marine:hover{background:var(--nuit)}
.btn--blanc{background:#fff;color:var(--nuit)}
.btn--contour{border-color:currentColor;color:var(--accent-txt)}
.btn--contour:hover{background:#fff;color:var(--nuit)}
.btn--large{width:100%;justify-content:center}

/* barre du haut + entete */
.barre-haut{background:var(--nuit);color:#cfd5e6;font-size:.82rem}
.barre-haut .conteneur{display:flex;gap:24px;justify-content:space-between;padding:7px 0}
.barre-haut span{display:inline-flex;align-items:center;gap:6px}
.barre-haut a{color:#fff;text-decoration:none}
.entete{position:sticky;top:0;z-index:50;background:var(--marine);box-shadow:0 4px 18px rgba(0,0,0,.12)}
.entete__in{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:78px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;font-weight:700;font-size:1.25rem;letter-spacing:.02em}
.logo svg{width:46px;height:40px}
.logo b{color:var(--accent-txt);background:var(--accent);padding:0 6px;border-radius:4px;margin-right:2px}
.logo small{display:block;font-size:.62rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:#c9d2ea}
.menu{display:flex;align-items:center;gap:22px;background:#fff;padding:10px 12px 10px 26px;border-radius:10px}
.menu>ul{display:flex;gap:4px;list-style:none;margin:0;padding:0}
.menu li{position:relative}
.menu a{display:block;padding:8px 12px;color:var(--titre);text-decoration:none;font-weight:500;font-size:.93rem;border-radius:6px}
.menu>ul>li>a[aria-current],.menu>ul>li>a:hover{color:var(--accent-lien)}
.menu .btn{color:var(--accent-txt);padding:.7em 1.3em}
.deroulant>a::after{content:"";display:inline-block;width:6px;height:6px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg);margin:0 0 3px 8px}
.deroulant ul{position:absolute;top:100%;left:0;min-width:240px;background:#fff;list-style:none;margin:0;padding:8px;border-radius:10px;box-shadow:var(--ombre);border-top:3px solid var(--accent);opacity:0;visibility:hidden;transform:translateY(8px);transition:.2s}
.deroulant:hover ul,.deroulant:focus-within ul{opacity:1;visibility:visible;transform:none}
.deroulant ul a:hover{background:var(--gris);color:var(--accent-lien)}
.burger{display:none;background:none;border:0;width:44px;height:44px;padding:10px;cursor:pointer}
.burger span{display:block;height:2px;background:#fff;margin:6px 0;border-radius:2px}

/* hero */
.hero{background:linear-gradient(120deg,var(--hero-fond) 0%,#fff 45%);overflow:hidden}
.hero__in{display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center;padding:56px 0 64px}
.hero__badge{display:inline-flex;align-items:center;gap:8px;color:var(--accent-lien);font-weight:600;font-size:.85rem;margin-bottom:18px}
.hero h1{font-size:clamp(1.9rem,3.6vw,2.9rem);text-transform:uppercase;letter-spacing:.01em;border-left:5px solid var(--accent);padding-left:22px}
.hero h1 span{display:block}
.rouge{color:var(--accent-lien)}
.hero__intro{font-size:1.05rem;max-width:560px}
.hero__btn{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.hero__img img{width:100%;aspect-ratio:4/3.4;object-fit:cover;border-radius:180px 24px 24px 24px;box-shadow:var(--ombre)}

/* chiffres */
.chiffres{margin-top:-28px;position:relative;z-index:2}
.chiffres__grille{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border-radius:var(--rayon);box-shadow:var(--ombre)}
.chiffres__grille>div{padding:22px 20px;display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center;border-right:1px solid var(--trait)}
.chiffres__grille>div:last-child{border-right:0}
.chiffres .ico{grid-row:span 2;width:34px;height:34px;color:var(--accent-lien)}
.chiffres b{color:var(--titre);font-size:1.05rem}
.chiffres span{font-size:.82rem;line-height:1.4}

/* sections */
.section{padding:84px 0}
.section--gris{background:var(--gris)}
.section--marine{background:var(--marine) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ccircle cx='2' cy='2' r='1.2' fill='%23ffffff' fill-opacity='.07'/%3E%3C/svg%3E");color:#dfe5f3}
.section--marine .titre-section{color:#fff}
.sur-titre{color:var(--accent-lien);font-weight:600;text-transform:uppercase;letter-spacing:.14em;font-size:.8rem;margin-bottom:8px}
.sur-titre::before{content:"";display:inline-block;width:28px;height:2px;background:currentColor;vertical-align:middle;margin-right:10px}
.sur-titre--clair{color:var(--accent-clair)}
.titre-section{font-size:clamp(1.6rem,2.6vw,2.2rem);max-width:760px}
.chapo{max-width:640px;margin-bottom:34px}

/* cartes services */
.grille-serv{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;margin-top:10px}
.carte-serv{position:relative;display:block;border-radius:var(--rayon);overflow:hidden;text-decoration:none;box-shadow:var(--ombre);background:var(--marine)}
.carte-serv__img img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .4s}
.carte-serv:hover img{transform:scale(1.05)}
.carte-serv__ico{position:absolute;top:18px;left:18px;width:66px;height:62px;background:var(--accent);clip-path:polygon(50% 0,100% 40%,100% 100%,0 100%,0 40%);display:grid;place-items:center;padding-top:12px}
.carte-serv__ico .ico{width:28px;height:28px;color:var(--accent-txt)}
.carte-serv__nom{display:block;padding:20px 24px;color:#fff;font-weight:600;font-size:1.15rem;position:relative}
.carte-serv__nom::after{content:"→";position:absolute;right:24px;color:var(--accent-clair)}

/* deux colonnes */
.deux-col{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.deux-col--haut{align-items:start;grid-template-columns:1.6fr 1fr}
.deux-col__img{position:relative}
.deux-col__img img{border-radius:var(--rayon);box-shadow:var(--ombre);width:100%;aspect-ratio:3/2;object-fit:cover}
.pastille{position:absolute;right:-14px;bottom:-14px;background:var(--accent);color:var(--accent-txt);border-radius:50%;width:112px;height:112px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;font-size:.85rem;line-height:1.3;box-shadow:0 0 0 8px #fff}
.pastille b{font-size:1.1rem}
.liste-check{list-style:none;padding:0;margin:0 0 24px}
.liste-check li{display:flex;gap:10px;margin-bottom:10px}
.liste-check .ico{color:var(--accent-lien);margin-top:4px}

/* etapes */
.etapes{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:20px}
.etapes>div{background:#fff;border:1px solid var(--trait);border-radius:var(--rayon);padding:30px;position:relative}
.etapes span{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--accent);color:var(--accent-txt);font-weight:700;margin-bottom:14px}

/* zones */
.grille-zones{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:20px}
.carte-zone{position:relative;border-radius:var(--rayon);overflow:hidden;text-decoration:none;color:#fff}
.carte-zone img{width:100%;aspect-ratio:4/3;object-fit:cover}
.carte-zone span{position:absolute;inset:auto 0 0 0;padding:18px 20px;background:linear-gradient(transparent,rgba(16,16,46,.92))}
.carte-zone b{font-size:1.15rem}
.carte-zone small{display:block;color:#cfd5e6}
.liens-zones{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.liens-zones--col{flex-direction:column;gap:8px;margin-top:8px}
.lien-zone{display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--titre);padding:10px 16px;border-radius:8px;text-decoration:none;font-weight:500;font-size:.92rem;border:1px solid var(--trait)}
.lien-zone .ico{color:var(--accent-lien)}
.lien-zone:hover{border-color:var(--accent);color:var(--accent-lien)}
.zones{display:grid;gap:30px}
.zone{display:grid;grid-template-columns:320px 1fr;gap:30px;align-items:center;background:var(--gris);border-radius:var(--rayon);padding:20px;scroll-margin-top:110px}
.zone img{border-radius:10px;aspect-ratio:3/2;object-fit:cover}

/* prestations, galerie */
.grille-presta{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:20px}
.presta{background:#fff;border-radius:var(--rayon);padding:28px;border-bottom:4px solid var(--accent);box-shadow:0 4px 14px rgba(16,16,46,.05)}
.presta .ico{width:38px;height:38px;color:var(--marine);margin-bottom:12px}
.presta h3{font-size:1.05rem}
.presta p{font-size:.93rem;margin:0}
.galerie{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.galerie img{border-radius:var(--rayon);aspect-ratio:3/2;object-fit:cover}
.galerie figure{margin:0}
.galerie figcaption{font-weight:600;color:var(--titre);margin-top:10px}

/* faq */
.faq{display:grid;grid-template-columns:1fr 1.4fr;gap:50px}
.faq__q{background:#fff;border:1px solid var(--trait);border-radius:10px;margin-bottom:12px}
.faq__q summary{cursor:pointer;padding:16px 50px 16px 20px;font-weight:600;color:var(--titre);list-style:none;position:relative}
.faq__q summary::-webkit-details-marker{display:none}
.faq__q summary::after{content:"+";position:absolute;right:20px;top:12px;font-size:1.4rem;color:var(--accent-lien)}
.faq__q[open] summary::after{content:"–"}
.faq__q p{padding:0 20px 16px;margin:0}

/* titre de page */
.titre-page{background:linear-gradient(color-mix(in srgb,var(--nuit) 82%,transparent),color-mix(in srgb,var(--marine) 78%,transparent)),var(--img) center/cover;color:#fff;padding:78px 0}
.titre-page h1{color:#fff;font-size:clamp(1.7rem,3.2vw,2.6rem)}
.titre-page .sur-titre{color:var(--accent-clair)}
.titre-page ol{display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0;font-size:.88rem}
.titre-page li+li::before{content:"/";margin:0 8px;opacity:.6}
.titre-page a{color:#fff}

/* encart, texte */
.texte h2{font-size:1.45rem;margin-top:.4em}
.texte--etroit{max-width:820px}
.encart{background:var(--marine);color:#dfe5f3;border-radius:var(--rayon);padding:30px;position:sticky;top:110px}
.encart h3{color:#fff}
.encart ul{list-style:none;padding:0;margin:0 0 20px}
.encart li{display:flex;gap:10px;align-items:center;margin-bottom:10px}
.encart a{color:#fff}
.encart .ico{color:var(--accent-clair)}
.encart__t2{font-size:1rem;margin-top:24px}
.encart .lien-zone{color:var(--titre)}

/* formulaire */
.formulaire{background:var(--gris);border-radius:var(--rayon);padding:34px}
.champs{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.formulaire label{display:flex;flex-direction:column;gap:6px;font-weight:500;font-size:.9rem;color:var(--titre)}
.formulaire input,.formulaire select,.formulaire textarea{font:inherit;padding:12px 14px;border:1px solid #cdd3df;border-radius:8px;background:#fff}
.formulaire textarea{margin-bottom:18px}
.formulaire input:focus,.formulaire select:focus,.formulaire textarea:focus{outline:2px solid var(--marine);border-color:transparent}
.piege{position:absolute!important;left:-9999px}
.erreur{background:#fde8e8;color:#9b1c1c;padding:12px 14px;border-radius:8px}
.petit{font-size:.82rem;margin-top:12px}
.plan li{margin:6px 0}

/* contact sans formulaire */
.contact-cartes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.contact-carte{display:flex;flex-direction:column;gap:4px;background:var(--gris);border-radius:var(--rayon);padding:28px;text-decoration:none;color:var(--texte);border-bottom:4px solid var(--accent)}
.contact-carte .ico{width:34px;height:34px;color:var(--accent-lien);margin-bottom:8px}
.contact-carte span{font-size:.85rem;text-transform:uppercase;letter-spacing:.1em;font-weight:600;color:var(--accent-lien)}
.contact-carte b{color:var(--titre);font-size:1.1rem;word-break:break-word}
.contact-carte--fort{background:var(--marine);color:#dfe5f3}
.contact-carte--fort b{color:#fff;font-size:1.5rem}
.contact-carte--fort .ico,.contact-carte--fort span{color:var(--accent-clair)}
.contact-texte{margin-top:50px}
@media (max-width:860px){.contact-cartes{grid-template-columns:1fr}}

/* bandeau appel + pied */
.appel{background:var(--accent);color:var(--accent-txt);padding:44px 0}
.appel__in{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.appel h2{color:inherit;margin-bottom:4px}
.appel p{margin:0}
.appel__btn{display:flex;gap:12px;flex-wrap:wrap}
.pied{background:var(--nuit);color:#aeb6cc;font-size:.93rem}
.pied__grille{display:grid;grid-template-columns:1.3fr 1fr 1.3fr 1.1fr;gap:36px;padding:64px 0 40px}
.pied h3{color:#fff;font-size:1.05rem}
.pied ul{list-style:none;margin:0 0 18px;padding:0}
.pied li{margin-bottom:8px}
.pied a{color:#d5dbea;text-decoration:none}
.pied a:hover{color:#fff}
.pied .btn{color:var(--accent-txt)}
.pied__zones{columns:1}
.pied__contact li{display:flex;gap:8px;align-items:center}
.pied__contact .ico{color:var(--accent-clair)}
.pied .logo{margin-bottom:14px}
.pied__bas{border-top:1px solid rgba(255,255,255,.1);padding:16px 0;font-size:.84rem}
.pied__bas .conteneur{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
.appel-flottant{display:none}

/* responsive */
@media (max-width:1000px){
  .hero__in,.deux-col,.deux-col--haut,.faq{grid-template-columns:1fr}
  .hero__img{order:-1}
  .chiffres__grille{grid-template-columns:1fr 1fr}
  .chiffres__grille>div:nth-child(2){border-right:0}
  .grille-presta,.grille-zones,.etapes,.galerie{grid-template-columns:1fr 1fr}
  .pied__grille{grid-template-columns:1fr 1fr}
  .encart{position:static}
}
@media (max-width:860px){
  .burger{display:block}
  .menu{position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;border-radius:0;padding:12px 16px 20px;display:none;box-shadow:var(--ombre)}
  .menu.ouvert{display:flex}
  .menu>ul{flex-direction:column}
  .deroulant ul{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;padding:0 0 0 14px}
  .cache-mobile{display:none!important}
}
@media (max-width:640px){
  body{font-size:15px}
  .section{padding:56px 0}
  .barre-haut .conteneur{justify-content:center;flex-wrap:wrap;gap:4px 16px}
  .barre-haut span:first-child{display:none}
  .grille-serv,.grille-presta,.grille-zones,.etapes,.galerie,.champs,.pied__grille,.chiffres__grille{grid-template-columns:1fr}
  .chiffres__grille>div{border-right:0;border-bottom:1px solid var(--trait)}
  .zone{grid-template-columns:1fr}
  .hero__img img{border-radius:90px 18px 18px 18px}
  .pied__bas{padding-bottom:96px}
  .appel-flottant{display:grid;place-items:center;position:fixed;right:16px;bottom:16px;width:58px;height:58px;border-radius:50%;background:var(--accent);color:var(--accent-txt);box-shadow:0 6px 18px rgba(0,0,0,.3);z-index:60}
  .appel-flottant .ico{width:26px;height:26px}
}

/* themes de couleur (apercu : a choisir avec le client) */
[data-theme="jaune"]{--marine:#1F2328;--nuit:#111316;--accent:#FFC21A;--accent-f:#E6A800;--accent-txt:#111316;--accent-lien:#8A5A00;--accent-clair:#FFD65C;--titre:#16181C;--hero-fond:#FFF8E1}
[data-theme="bleu"]{--marine:#0D3B66;--nuit:#08243F;--accent:#C2410C;--accent-f:#9A3412;--accent-txt:#fff;--accent-lien:#C2410C;--accent-clair:#FDBA74;--titre:#0B2540;--hero-fond:#FFF3EA}
.logo .l-toit{fill:var(--accent)}.logo .l-porte{fill:var(--marine)}

/* animations */
@keyframes monte{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes zoom{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
/* pas d animation sur le haut de page : affichage immediat (PageSpeed, Google Ads) */
.js .apparait{opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .7s ease}
.js .apparait.vu{opacity:1;transform:none}
.carte-serv,.carte-zone,.presta,.etapes>div,.lien-zone{transition:transform .25s,box-shadow .25s}
.carte-serv:hover,.carte-zone:hover,.presta:hover,.etapes>div:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(16,16,46,.16)}
.appel-flottant{animation:pulse 2.4s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 55%,transparent)}70%{box-shadow:0 0 0 16px transparent}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.js .apparait{opacity:1;transform:none}}

/* selecteur de couleurs (apercu seulement) */
.couleurs{position:fixed;left:16px;bottom:16px;z-index:70;background:#fff;border-radius:40px;box-shadow:var(--ombre);padding:8px 12px;display:flex;align-items:center;gap:8px;font-size:.8rem;font-weight:600;color:var(--titre)}
.couleurs button{width:26px;height:26px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1px #ccd;cursor:pointer;padding:0}
.couleurs button[aria-pressed="true"]{box-shadow:0 0 0 2px var(--titre)}