/* DEIMI Service - feuille unique, aucune dependance externe */
:root{
  --encre:#101418; --acier:#1B2228; --acier-2:#28323A; --acier-3:#3A4650;
  --papier:#FBFAF7; --brume:#F1EFEA; --trait:#DEDAD2;
  --texte:#171C21; --doux:#5B656D; --doux-2:#8A939A;
  --hv:#F0B429; --hv-vif:#FFC53D; --hv-sombre:#7A5710;
  --ombre:0 1px 2px rgba(16,20,24,.06), 0 8px 24px -12px rgba(16,20,24,.18);
  --lg:1180px;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--papier); color:var(--texte);
  font-family:"Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0; line-height:1.12; letter-spacing:-.021em; font-weight:800; text-wrap:balance}
h1{font-size:clamp(2.1rem,5.2vw,3.5rem)}
h2{font-size:clamp(1.65rem,3.4vw,2.4rem)}
h3{font-size:1.16rem; letter-spacing:-.012em}
p{margin:0}
ul{margin:0; padding:0; list-style:none}
.tel-num{font-variant-numeric:tabular-nums; letter-spacing:.01em}

.enveloppe{width:100%; max-width:var(--lg); margin:0 auto; padding:0 22px}
.pile{display:flex; flex-direction:column}
.g8{gap:8px}.g12{gap:12px}.g16{gap:16px}.g24{gap:24px}.g32{gap:32px}.g48{gap:48px}

.saut{position:absolute; left:-9999px; top:0; background:var(--hv); color:var(--encre);
  padding:12px 18px; font-weight:700; z-index:100}
.saut:focus{left:0}
:focus-visible{outline:3px solid var(--hv); outline-offset:2px}

/* --- eyebrow --- */
.oeil{
  display:inline-flex; align-items:center; gap:10px; font-size:.72rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--hv-sombre); margin-bottom:14px;
}
.oeil::before{content:""; width:26px; height:3px; background:var(--hv); flex:none}
.oeil.clair{color:var(--hv)}

/* --- bandeau du haut --- */
.bandeau{background:var(--encre); color:#AFB7BD; font-size:.8rem}
.bandeau .enveloppe{display:flex; flex-wrap:wrap; gap:8px 28px; align-items:center;
  justify-content:space-between; min-height:40px; padding-top:8px; padding-bottom:8px}
.bandeau span{display:inline-flex; align-items:center; gap:8px}
.bandeau b{color:#E9EDEF; font-weight:600}

/* --- navigation --- */
.entete{background:var(--acier); color:#fff; position:sticky; top:0; z-index:50;
  box-shadow:0 1px 0 rgba(255,255,255,.07)}
.entete .enveloppe{display:flex; align-items:center; gap:20px; min-height:78px}
.marque{display:flex; align-items:center; gap:12px; text-decoration:none; flex:none}
.marque img{height:44px; width:auto}
.menu{display:flex; align-items:center; gap:2px; margin-left:auto; flex-wrap:wrap}
.menu a{
  text-decoration:none; font-size:.855rem; font-weight:600; color:#D3DADE;
  padding:9px 11px; border-radius:3px; white-space:nowrap;
}
.menu a:hover{color:#fff; background:rgba(255,255,255,.07)}
.menu a[aria-current="page"]{color:var(--hv); box-shadow:inset 0 -2px 0 var(--hv)}
.appel{
  flex:none; display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  background:var(--hv); color:var(--encre); font-weight:800; font-size:.93rem;
  padding:11px 17px; border-radius:3px;
}
.appel:hover{background:var(--hv-vif)}
.burger{display:none}
.burger>summary{list-style:none; cursor:pointer; margin-left:auto; padding:10px 12px;
  border:1px solid rgba(255,255,255,.22); border-radius:3px; font-weight:700; font-size:.85rem}
.burger>summary::-webkit-details-marker{display:none}

/* --- hero --- */
.hero{position:relative; background:var(--encre); color:#fff; overflow:hidden}
.hero-fond{position:absolute; inset:0}
.hero-fond img{width:100%; height:100%; object-fit:cover; opacity:.36}
.hero-fond::after{content:""; position:absolute; inset:0;
  background:linear-gradient(100deg,rgba(16,20,24,.94) 0%,rgba(16,20,24,.72) 46%,rgba(16,20,24,.42) 100%)}
.hero .enveloppe{position:relative; padding-top:104px; padding-bottom:104px; max-width:var(--lg)}
.hero-txt{max-width:680px}
.hero h1{font-size:clamp(2.3rem,5.6vw,3.9rem)}
.hero p.chapo{margin-top:20px; font-size:1.14rem; color:#C9D1D6; max-width:56ch}
.hero-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:34px}
.bouton{display:inline-flex; align-items:center; gap:9px; text-decoration:none; font-weight:700;
  padding:14px 24px; border-radius:3px; font-size:.98rem; border:2px solid transparent}
.bouton.plein{background:var(--hv); color:var(--encre)}
.bouton.plein:hover{background:var(--hv-vif)}
.bouton.creux{border-color:rgba(255,255,255,.32); color:#fff}
.bouton.creux:hover{border-color:var(--hv); color:var(--hv)}
.bouton.sombre{background:var(--acier); color:#fff}
.bouton.sombre:hover{background:var(--encre)}

/* --- entete de page interieure --- */
.chapeau{background:var(--acier); color:#fff; position:relative; overflow:hidden}
.chapeau .enveloppe{position:relative; padding-top:62px; padding-bottom:62px}
.chapeau p{color:#B9C2C8; margin-top:12px; max-width:60ch}
.fil{font-size:.79rem; color:var(--doux-2); margin-bottom:16px}
.fil a{text-decoration:none}
.fil a:hover{color:var(--hv)}

/* --- sections --- */
.pave{padding:76px 0}
.pave.serre{padding:52px 0}
.pave.brume{background:var(--brume)}
.pave.sombre{background:var(--acier); color:#fff}
.pave.sombre p{color:#BFC8CE}
.entete-sec{max-width:62ch; margin-bottom:40px}
.entete-sec p{color:var(--doux); margin-top:14px}
.pave.sombre .entete-sec p{color:#BFC8CE}

/* --- grilles --- */
.grille{display:grid; gap:22px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}

/* --- carte service --- */
.carte{background:#fff; border:1px solid var(--trait); border-radius:4px; overflow:hidden;
  display:flex; flex-direction:column; box-shadow:var(--ombre)}
.carte-img{aspect-ratio:16/10; background:var(--brume)}
.carte-img img{width:100%; height:100%; object-fit:cover}
.carte-corps{padding:24px; display:flex; flex-direction:column; gap:14px; flex:1}
.carte-corps ul{display:flex; flex-direction:column; gap:7px; color:var(--doux); font-size:.94rem}
.carte-corps ul li{padding-left:18px; position:relative}
.carte-corps ul li::before{content:""; position:absolute; left:0; top:.62em; width:7px; height:7px;
  background:var(--hv); transform:rotate(45deg)}
.lien-suite{margin-top:auto; padding-top:6px; font-weight:700; font-size:.9rem;
  color:var(--hv-sombre); text-decoration:none; display:inline-flex; gap:7px}
.lien-suite:hover{gap:12px}

/* --- bande photo/texte --- */
.bande{display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center}
.bande.inverse .bande-media{order:2}
.bande-media img{border-radius:4px; width:100%; aspect-ratio:4/3; object-fit:cover}
.bande-txt p{color:var(--doux); margin-top:16px}

/* --- liste a coches --- */
.coches{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 26px; margin-top:24px}
.coches li{position:relative; padding-left:28px; font-weight:600; font-size:.96rem}
.coches li::before{content:""; position:absolute; left:0; top:.28em; width:16px; height:16px;
  border:2px solid var(--hv); border-top:0; border-right:0; transform:rotate(-45deg) scale(.86)}

/* --- catalogue --- */
.catalogue{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:0;
  border:1px solid var(--trait); border-radius:4px; overflow:hidden; background:#fff}
.catalogue li{padding:15px 20px; border-bottom:1px solid var(--trait); border-right:1px solid var(--trait);
  font-size:.94rem; font-weight:600}
.catalogue li span{display:block; font-weight:400; color:var(--doux); font-size:.85rem; margin-top:2px}

/* --- equipe --- */
.equipe{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px}
.tete{background:#fff; border:1px solid var(--trait); border-left:4px solid var(--hv);
  border-radius:3px; padding:22px}
.tete b{display:block; font-size:1.02rem}
.tete span{color:var(--doux); font-size:.89rem}

/* --- logos clients --- */
.logos{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:1px; background:var(--trait);
  border:1px solid var(--trait); border-radius:4px; overflow:hidden}
.logos li{background:#fff; aspect-ratio:3/2; display:flex; align-items:center; justify-content:center; padding:22px}
.logos img{max-height:100%; width:auto; object-fit:contain; filter:grayscale(1); opacity:.62;
  transition:filter .18s, opacity .18s}
.logos li:hover img{filter:none; opacity:1}

/* --- actualites --- */
.actus{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px}
.actu{background:#fff; border:1px solid var(--trait); border-radius:4px; overflow:hidden;
  display:flex; flex-direction:column; text-decoration:none; box-shadow:var(--ombre)}
.actu:hover{border-color:var(--hv)}
.actu-img{aspect-ratio:16/10; background:var(--acier)}
.actu-img img{width:100%; height:100%; object-fit:cover}
.actu-vide{aspect-ratio:16/10; background:var(--acier); display:flex; align-items:flex-end; padding:20px}
.actu-vide span{color:var(--hv); font-weight:800; font-size:1.5rem}
.actu-corps{padding:20px; display:flex; flex-direction:column; gap:9px; flex:1}
.date{font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--doux-2)}

/* --- article --- */
.article{max-width:70ch; margin:0 auto}
.article p{margin-top:18px; color:#2C343B}
.article ul.puces{margin-top:18px; display:flex; flex-direction:column; gap:9px}
.article ul.puces li{position:relative; padding-left:20px; color:#2C343B}
.article ul.puces li::before{content:""; position:absolute; left:0; top:.66em; width:7px; height:7px;
  background:var(--hv); transform:rotate(45deg)}
.article-img{margin:34px 0; border-radius:4px; overflow:hidden}
.galerie{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:34px}
.galerie img{aspect-ratio:4/3; object-fit:cover; border-radius:3px; width:100%}
.nav-article{display:flex; justify-content:space-between; gap:20px; margin-top:52px; padding-top:26px;
  border-top:1px solid var(--trait); font-size:.9rem; font-weight:700}
.nav-article a{text-decoration:none; color:var(--hv-sombre); max-width:46%}
.nav-article a:hover{color:var(--texte)}

/* --- coordonnees --- */
.coord{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--trait);
  border:1px solid var(--trait); border-radius:4px; overflow:hidden}
.coord li{background:#fff; padding:26px}
.coord b{display:block; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--doux-2); margin-bottom:9px}
.coord a{text-decoration:none; font-weight:700}
.coord a:hover{color:var(--hv-sombre)}
.coord .sec{color:var(--doux); font-weight:400; font-size:.93rem}

/* --- appel a l'action --- */
.ruban{background:var(--hv); color:var(--encre)}
.ruban .enveloppe{padding:46px 22px; display:flex; flex-wrap:wrap; gap:24px;
  align-items:center; justify-content:space-between}
.ruban h2{font-size:clamp(1.4rem,2.8vw,1.95rem)}
.ruban p{margin-top:7px; font-weight:600; opacity:.82}
.urgence{background:var(--acier-2); color:#fff; border-left:4px solid var(--hv); border-radius:3px;
  padding:22px 26px; display:flex; flex-wrap:wrap; gap:6px 24px; align-items:center}
.urgence b{color:var(--hv); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase}
.urgence a{font-size:1.5rem; font-weight:800; text-decoration:none}

/* --- pied --- */
.pied{background:var(--encre); color:#9BA4AB; font-size:.92rem}
.pied .enveloppe{padding:58px 22px 26px}
.pied-grille{display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:38px}
.pied h4{color:#fff; font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:16px}
.pied a{text-decoration:none}
.pied a:hover{color:var(--hv)}
.pied ul{display:flex; flex-direction:column; gap:9px}
.pied img.logo{height:40px; margin-bottom:18px}
.social{display:flex; gap:10px; margin-top:16px}
.social a{border:1px solid rgba(255,255,255,.2); border-radius:3px; padding:8px 14px;
  font-size:.82rem; font-weight:600}
.social a:hover{border-color:var(--hv)}
.bas{margin-top:44px; padding-top:20px; border-top:1px solid rgba(255,255,255,.1);
  display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:space-between; font-size:.82rem;
  color:#6F787E}

/* --- responsive --- */
@media (max-width:1080px){
  .menu{display:none}
  .burger{display:block; margin-left:auto}
  .burger[open]{position:relative}
  .burger[open]>summary{border-color:var(--hv); color:var(--hv)}
  .burger .menu{display:flex; flex-direction:column; align-items:stretch; gap:0;
    position:absolute; right:0; top:calc(100% + 10px); background:var(--acier-2);
    border:1px solid rgba(255,255,255,.14); border-radius:4px; padding:8px; min-width:250px;
    box-shadow:0 18px 40px -14px rgba(0,0,0,.6)}
  .burger .menu a{padding:11px 14px}
  .entete .enveloppe{min-height:68px}
  .appel span.mot{display:none}
}
@media (max-width:900px){
  .g3,.g4,.actus,.equipe{grid-template-columns:repeat(2,minmax(0,1fr))}
  .logos{grid-template-columns:repeat(3,minmax(0,1fr))}
  .bande{grid-template-columns:1fr; gap:30px}
  .bande.inverse .bande-media{order:0}
  .coord{grid-template-columns:1fr}
  .pied-grille{grid-template-columns:1fr 1fr}
  .hero .enveloppe{padding-top:72px; padding-bottom:72px}
  .pave{padding:56px 0}
}
@media (max-width:600px){
  body{font-size:16px}
  .g2,.g3,.g4,.actus,.equipe,.galerie{grid-template-columns:1fr}
  .logos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .coches{grid-template-columns:1fr}
  .pied-grille{grid-template-columns:1fr}
  .bandeau .enveloppe{font-size:.75rem}
  .ruban .enveloppe{padding:34px 22px}
}
@media print{ .entete,.bandeau,.ruban,.burger{display:none} body{font-size:12pt} }
@media (prefers-reduced-motion:reduce){ *{transition:none !important; animation:none !important} }