/* Van Boat Service : feuille commune aux 4 pages (accueil, prestations, réalisations, contact). Aucune icône dessinée. */
:root{--fond:#F3F6F8;--blanc:#fff;--nuit:#0B1F33;--nuit2:#12304A;--bleu:#0F6E7D;--bleu-f:#0B5662;--ciel:#E2F2F4;--gris:#566472;--trait:#DFE6EC;--r:14px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--fond);color:var(--nuit);font:400 16.5px/1.65 'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
.c{width:min(1160px,100% - 40px);margin:0 auto}
h1,h2,h3{font-family:'Manrope',sans-serif;font-weight:800;letter-spacing:-.025em;line-height:1.08;margin:0}
.sur{display:inline-flex;align-items:center;gap:10px;font:600 12.5px/1 'Inter',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--bleu)}
.sur::before{content:"";width:22px;height:2px;background:currentColor}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 24px;border-radius:10px;font:700 15.5px/1 'Manrope',sans-serif;text-decoration:none;transition:background .2s,border-color .2s,color .2s}
.btn-bleu{background:var(--bleu);color:#fff}
.btn-bleu:hover{background:var(--bleu-f)}
.btn-nuit{background:var(--nuit);color:#fff}
.btn-nuit:hover{background:var(--nuit2)}
.btn-ligne{border:1.5px solid #C9D3DC;background:var(--blanc)}
.btn-ligne:hover{border-color:var(--nuit)}
.actions{display:flex;flex-wrap:wrap;gap:12px}
.photo{width:100%;height:100%;object-fit:cover;border-radius:var(--r);filter:contrast(1.04) saturate(1.06)}
.lien{display:inline-block;margin-top:28px;font:700 15px/1 'Manrope',sans-serif;text-decoration:none;border-bottom:2px solid var(--bleu);padding-bottom:5px}

/* bandeau et en-tête */
.infobar{background:var(--nuit);color:#B6C6D4;font-size:13.5px}
.infobar .c{display:flex;justify-content:space-between;gap:16px;height:38px;align-items:center}
.infobar b{color:#6FD3DF;font-weight:600}
.barre{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-bottom:1px solid var(--trait)}
.barre .c{display:flex;align-items:center;justify-content:space-between;gap:20px;height:72px}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none}
.logo .s{width:38px;height:38px;border-radius:10px;background:var(--nuit);color:#fff;display:grid;place-items:center;font:800 21px/1 'Manrope',sans-serif}
.logo b{font:800 20px/1 'Manrope',sans-serif;letter-spacing:-.02em}
.logo b em{font-style:normal;color:var(--bleu)}
.menu{display:flex;gap:6px}
.menu a{text-decoration:none;color:var(--gris);font:600 14.5px/1 'Inter',sans-serif;padding:10px 14px;border-radius:8px}
.menu a:hover{color:var(--nuit);background:var(--fond)}
.menu a[aria-current="page"]{color:var(--bleu);background:var(--ciel)}
.barre .btn{min-height:44px;padding:0 18px;font-size:15px}

/* sections communes */
section{padding:92px 0}
.blanc{background:var(--blanc)}
.tete{display:grid;grid-template-columns:1fr 1fr;gap:20px 64px;align-items:end;margin-bottom:44px}
.tete h2{font-size:clamp(32px,3.6vw,46px);margin-top:16px}
.tete p{margin:0;color:var(--gris);max-width:460px}
.entete{background:var(--blanc);padding:72px 0 56px;border-bottom:1px solid var(--trait)}
.entete h1{font-size:clamp(38px,4.6vw,58px);margin:18px 0 16px;max-width:820px}
.entete p{margin:0;color:var(--gris);font-size:18px;max-width:640px}

/* accueil */
.accueil{padding:72px 0 80px;background:var(--blanc)}
.accueil .c{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.accueil h1{font-size:clamp(42px,4.8vw,64px);margin:20px 0}
.accueil h1 em{font-style:normal;color:var(--bleu)}
.intro{max-width:500px;font-size:18px;color:#3C4757;margin:0 0 30px}
.chiffres{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;margin-top:36px;padding-top:26px;border-top:1px solid var(--trait)}
.chiffres div{padding-right:26px;margin-right:26px;border-right:1px solid var(--trait)}
.chiffres div:last-child{border:0;margin:0;padding:0}
.chiffres b{display:block;font:800 22px/1.1 'Manrope',sans-serif;letter-spacing:-.02em}
.chiffres span{font-size:13.5px;color:var(--gris)}
.trois{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.trois figure{margin:0;position:relative;aspect-ratio:1/1}
.trois .grande{grid-column:span 2;aspect-ratio:16/10}
.trois figcaption,.mosaique figcaption{position:absolute;left:12px;bottom:12px;background:rgba(255,255,255,.95);border-radius:8px;padding:7px 11px;font:600 13px/1.2 'Inter',sans-serif}

/* matériel : texte seul, séparé par des filets */
.materiel{background:var(--fond);border-bottom:1px solid var(--trait)}
.materiel .c{display:grid;grid-template-columns:repeat(4,1fr)}
.materiel p{margin:0;padding:24px 22px;border-right:1px solid var(--trait)}
.materiel p:first-child{padding-left:0}
.materiel p:last-child{border-right:0}
.materiel b{display:block;font:700 16px/1.2 'Manrope',sans-serif}
.materiel span{font-size:14px;color:var(--gris)}

/* formules */
.formules{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.formule{display:flex;flex-direction:column;border-radius:var(--r);padding:34px;background:var(--blanc);border:1px solid var(--trait)}
.formule.prestige{background:var(--nuit);border-color:var(--nuit);color:#fff}
.formule .nom{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}
.formule h3{font-size:30px}
.badge{font:600 12px/1 'Inter',sans-serif;letter-spacing:.08em;text-transform:uppercase;padding:7px 10px;border-radius:999px;background:var(--ciel);color:var(--bleu)}
.prestige .badge{background:rgba(111,211,223,.16);color:#9FE3EA}
.formule p{margin:0 0 22px;color:var(--gris)}
.prestige p{color:#AABBCB}
.liste{list-style:none;margin:0 0 26px;padding:0;border-top:1px solid var(--trait)}
.liste li{position:relative;padding:12px 0 12px 22px;border-bottom:1px solid var(--trait);font-weight:500}
.liste li::before{content:"";position:absolute;left:0;top:21px;width:9px;height:9px;border-radius:2px;background:var(--bleu)}
.prestige .liste,.prestige .liste li{border-color:#21405C}
.prestige .liste li::before{background:#6FD3DF}
.formule .btn{margin-top:auto;align-self:flex-start}
.prestige .btn-ligne{background:transparent;border-color:#3A5A78;color:#fff}

/* blocs numérotés */
.numeros{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:20px}
.numero{background:var(--blanc);border:1px solid var(--trait);border-radius:var(--r);padding:30px}
.numero i{display:block;font:800 15px/1 'Manrope',sans-serif;font-style:normal;color:var(--bleu);margin-bottom:22px;padding-bottom:16px;border-bottom:3px solid var(--bleu);width:34px}
.numero h3{font-size:21px;margin-bottom:8px}
.numero p{margin:0;color:var(--gris);font-size:15.5px}

/* photos */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.trio figure{margin:0}
.trio .cadre{aspect-ratio:1/1}
.trio figcaption{margin-top:12px;font:700 15px/1.3 'Manrope',sans-serif}
.trio figcaption span{display:block;font:400 14px/1.3 'Inter',sans-serif;color:var(--gris)}
.mosaique{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.mosaique figure{margin:0;position:relative;aspect-ratio:1/1}
.mosaique .grande{grid-column:span 2;grid-row:span 2}

/* avis */
.histoire{background:var(--nuit);color:#fff}
.histoire .sur{color:#6FD3DF}
.histoire .tete p{color:#9DB0C2}
.avis{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.avis figure{margin:0;background:var(--nuit2);border:1px solid #1C3A55;border-radius:var(--r);padding:28px;display:flex;flex-direction:column;justify-content:space-between;gap:22px}
.avis .etoiles{color:#E8A317;letter-spacing:3px;font-size:15px}
.avis blockquote{margin:10px 0 0;font-size:16.5px;color:#E6EEF4}
.avis figcaption{color:#9DB0C2;font-size:14px;border-top:1px solid #21405C;padding-top:16px}
.avis figure.grand{grid-column:span 2;background:var(--bleu);border-color:var(--bleu)}
.avis figure.grand blockquote{font:700 clamp(23px,2.3vw,29px)/1.3 'Manrope',sans-serif;letter-spacing:-.02em;color:#fff}
.avis figure.grand .etoiles{color:#fff}
.avis figure.grand figcaption{color:rgba(255,255,255,.85);border-color:rgba(255,255,255,.25)}
.histoire .lien{color:#fff}

/* prestations détaillées */
.presta{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding:56px 0;border-bottom:1px solid var(--trait)}
.presta:last-child{border:0}
.presta:nth-child(even) .texte{order:2}
.presta .texte i{display:block;font:800 15px/1 'Manrope',sans-serif;font-style:normal;color:var(--bleu);margin-bottom:18px}
.presta h2{font-size:clamp(28px,3vw,38px);margin-bottom:14px}
.presta p{margin:0 0 14px;color:#3C4757}
.presta .liste{margin:18px 0 0}
.presta .cadre{aspect-ratio:4/3}

/* rendez-vous et accès */
.infos{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.bloc{background:var(--blanc);border:1px solid var(--trait);border-radius:var(--r);padding:32px}
.bloc h3{font-size:22px;margin-bottom:14px}
.etapes{list-style:none;margin:0;padding:0;counter-reset:e}
.etapes li{counter-increment:e;display:flex;gap:16px;align-items:center;padding:13px 0;border-bottom:1px solid var(--trait)}
.etapes li:last-child{border:0;padding-bottom:0}
.etapes li::before{content:"0" counter(e);flex:none;font:800 15px/1 'Manrope',sans-serif;color:var(--bleu);width:28px}
.etapes b{display:block;font-weight:600}
.etapes small{display:block;color:var(--gris);font-size:14px}
.adresse{font:800 24px/1.3 'Manrope',sans-serif;letter-spacing:-.02em;margin:0 0 10px}
.bloc p{color:var(--gris);margin:0 0 24px}
.bloc .actions{gap:10px}

/* appel */
.appel{padding:72px 0 92px}
.appel .boite{background:var(--bleu);color:#fff;border-radius:22px;padding:60px 40px;text-align:center}
.appel .sur{color:#D3F1F4;justify-content:center}
.appel h2{font-size:clamp(34px,4.2vw,54px);margin:18px 0 14px}
.appel p{max-width:520px;margin:0 auto 28px;color:rgba(255,255,255,.9)}
.appel .actions{justify-content:center}
.appel .btn-ligne{background:transparent;border-color:rgba(255,255,255,.6);color:#fff}
.tel-grand{display:inline-block;margin-top:26px;font:800 clamp(34px,4vw,46px)/1 'Manrope',sans-serif;letter-spacing:-.01em;text-decoration:none}

footer{background:var(--nuit);color:#8597A9;padding:36px 0;font-size:13.5px}
footer .c{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px 30px}
footer nav{display:flex;gap:18px}
footer a{color:#C9D6E2;text-decoration:none}
.appel-fixe{display:none}

@media (max-width:980px){
  .accueil .c,.tete,.presta{grid-template-columns:1fr}
  .accueil .c{gap:40px}
  .trois{max-width:560px}
  .presta{gap:28px}
  .presta:nth-child(even) .texte{order:0}
  .numeros{grid-template-columns:1fr}
  .materiel .c{grid-template-columns:1fr 1fr}
  .materiel p{padding:20px 16px;border-bottom:1px solid var(--trait)}
  .materiel p:nth-child(2n){border-right:0}
  .materiel p:nth-child(2n+1){padding-left:0}
  .materiel p:nth-child(n+3){border-bottom:0}
}
@media (max-width:760px){
  .infobar .c{justify-content:center}
  .infobar .lieu{display:none}
  .barre .c{height:auto;flex-wrap:wrap;padding:12px 0 0;gap:10px}
  .barre .btn{min-height:40px;padding:0 14px;font-size:14px}
  .menu{order:3;width:100%;justify-content:space-between;gap:0;padding-bottom:8px}
  .menu a{padding:9px 7px;font-size:13px;white-space:nowrap}
  .accueil{padding:44px 0 56px}
  .entete{padding:48px 0 40px}
  .chiffres{grid-template-columns:repeat(3,1fr)}
  .chiffres div{padding-right:12px;margin-right:12px}
  .chiffres b{font-size:18px}
  .formules,.trio,.avis,.infos{grid-template-columns:1fr}
  .mosaique{grid-template-columns:1fr 1fr;gap:12px}
  .avis figure.grand{grid-column:auto}
  section{padding:68px 0}
  .presta{padding:40px 0}
  .appel{padding:56px 0 68px}
  .appel .boite{padding:46px 22px}
  footer{padding-bottom:100px}
  .appel-fixe{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-top:1px solid var(--trait)}
  .appel-fixe .btn{min-height:50px;padding:0 10px}
}
@media (max-width:420px){.actions .btn{flex:1 1 100%}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* version allégée (03/11) : moins de blocs par page, numéros sur une seule ligne */
.nowrap{white-space:nowrap}
.entete.duo .c{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.entete.duo .cadre{aspect-ratio:4/3}
.numeros.six{grid-template-columns:repeat(3,1fr);margin-top:0}
.numero.fonce{background:var(--nuit);border-color:var(--nuit);color:#fff}
.numero.fonce p{color:#AABBCB}
.numero.fonce i{color:#6FD3DF;border-color:#6FD3DF}
.rdv{padding:72px 0 92px;background:var(--blanc)}
.rdv .c{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.rdv h1{font-size:clamp(36px,4vw,52px);margin:18px 0 6px}
.rdv .numero-tel{display:block;font:800 clamp(34px,4vw,50px)/1.1 'Manrope',sans-serif;letter-spacing:-.02em;color:var(--bleu);text-decoration:none;white-space:nowrap;margin-bottom:18px}
.rdv .chapo{margin:0 0 28px;color:var(--gris);font-size:18px;max-width:480px}
.rdv .adresse-ligne{margin:32px 0 0;padding-top:24px;border-top:1px solid var(--trait);color:var(--gris)}
.rdv .adresse-ligne b{display:block;color:var(--nuit);font:800 20px/1.3 'Manrope',sans-serif}
@media (max-width:980px){.entete.duo .c,.rdv .c{grid-template-columns:1fr;gap:36px}.numeros.six{grid-template-columns:1fr 1fr}}
@media (max-width:760px){.numeros.six{grid-template-columns:1fr}.rdv{padding:44px 0 68px}}
/* carte Google Maps de la page Contact */
.carte-plan{margin-top:48px;border-radius:var(--r);overflow:hidden;border:1px solid var(--trait);background:var(--fond);height:380px}
.carte-plan iframe{display:block;width:100%;height:100%;border:0}
@media (max-width:760px){.carte-plan{margin-top:36px;height:300px}}
.rdv .c.plein{display:block}
/* MC Carrosserie : le noir et le vert de son enseigne */
.logo .s{color:#6FD3DF}
.appel .boite{background:var(--nuit)}
.appel .sur{color:#6FD3DF}
.deux{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:14px;min-width:0}
.deux figure{margin:0;position:relative;height:480px;min-width:0}
.deux figcaption{position:absolute;left:12px;bottom:12px;background:rgba(255,255,255,.95);border-radius:8px;padding:7px 11px;font:600 13px/1.2 'Inter',sans-serif}
.chantiers{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:20px}
.chantier{background:var(--blanc);border:1px solid var(--trait);border-radius:var(--r);padding:28px}
.chantier i{display:block;font:700 12.5px/1 'Inter',sans-serif;font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--bleu);margin-bottom:14px}
.chantier h3{font-size:21px;margin-bottom:8px}
.chantier p{margin:0;color:var(--gris);font-size:15.5px}
.photos2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.photos2 figure{margin:0}
.photos2 .cadre{aspect-ratio:4/3}
.photos2 figcaption{margin-top:12px;font:700 15px/1.3 'Manrope',sans-serif}
.photos2 figcaption span{display:block;font:400 14px/1.3 'Inter',sans-serif;color:var(--gris)}
@media (max-width:980px){.chantiers{grid-template-columns:1fr 1fr}}
@media (max-width:760px){.chantiers,.photos2{grid-template-columns:1fr}.deux figure{height:320px}}
@media (max-width:480px){.barre .btn{display:none}.barre .c{padding-top:14px}}
.logo .s{width:auto;min-width:38px;padding:0 8px;font-size:16px;letter-spacing:.02em}