@font-face{font-family:'Encode Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/encode-sans-latin-400.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Encode Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/encode-sans-latin-500.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Encode Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/encode-sans-latin-600.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Encode Sans';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/encode-sans-latin-700.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Encode Sans';font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/encode-sans-latin-800.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{--bleu:#0f4c8a;--bleu-logo:#0060b0;--bleu-pale:#e8eef5;--bleu-gris:#5b7187;--vert:#96bc0d;--vert-btn:#96bc0d;--vert-f:#7f9f0b;--txt:#1d3350;--gris-txt:#54657a;--pill:999px}
/* boutons : vert légèrement plus sombre que le vert du logo (#96bc0d) pour un contraste blanc/vert ≥ 4,5:1 (Lighthouse color-contrast) ; le vert du logo reste sur les filets et les pastilles */
*{box-sizing:border-box}
body{margin:0;font-family:"Encode Sans",Arial,sans-serif;font-size:15px;line-height:1.5;color:var(--txt);background:#fff;overflow-x:hidden}
h1,h2,h3{font-family:"Encode Sans",Arial,sans-serif;color:var(--bleu);margin:0 0 .4em;line-height:1.15;overflow-wrap:anywhere}
h1{font-size:clamp(30px,6.6vw,44px);font-weight:800;color:#fff}
h2{font-size:clamp(26px,5.4vw,32px);font-weight:800}
h3{font-size:18px;font-weight:700}
p{margin:0 0 1em} img{display:block;max-width:100%;height:auto} a{color:var(--bleu)}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
section{padding:40px 0} @media(min-width:900px){section{padding:60px 0}}
.center{text-align:center}
.soul{display:block;width:48px;height:4px;background:var(--vert);margin:12px 0 20px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--vert-btn);color:#fff;font-weight:700;font-size:16px;text-transform:uppercase;letter-spacing:.01em;text-decoration:none;padding:12px 26px;border-radius:var(--pill);border:2px solid var(--vert-btn);min-height:48px;max-width:100%;text-align:center}
.btn:hover{background:var(--vert-f)} .btn svg{width:18px;height:18px;flex:none}
.btn.white{border-color:#fff;box-shadow:0 0 0 2px var(--vert)}
header{background:#fff;position:sticky;top:0;z-index:30}
.hd{display:flex;align-items:center;justify-content:space-between;height:92px}
.hd img{height:62px;width:auto;flex:0 0 auto}.hd .logo,.hd>a:first-child{flex:0 0 auto}
.burger{width:46px;height:46px;border:0;background:none;display:grid;place-items:center;cursor:pointer}
.burger span{display:block;width:28px;height:3px;background:var(--bleu);border-radius:2px;margin:4px 0}
.burger span:nth-child(2){width:21px;margin-left:-7px} .burger span:nth-child(3){width:24px;margin-left:-4px}
.hd nav{display:none}
@media(min-width:1000px){.hd{height:82px}.hd img{height:62px}.hd nav{display:flex;gap:24px;font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.01em}.hd nav a{color:var(--bleu);text-decoration:none;display:inline-block;padding:10px 0}.hd nav a.tel{background:#96bc0d;color:#fff;border-radius:50px;padding:12px 22px;line-height:1;margin-left:4px}.hd nav a.tel:hover{background:#7f9f0b}.burger{display:none}}
footer li a,.plus-liens a,.zones .deps a{display:inline-block;padding:3px 0}
.menu{display:none;background:#fff;border-top:1px solid var(--bleu-pale)} .menu.open{display:block}
.menu a{display:block;padding:13px 20px;border-bottom:1px solid var(--bleu-pale);color:var(--bleu);font-weight:600;text-decoration:none;font-size:16px}
.hero{position:relative;min-height:0;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;padding:44px 0 40px}
.hero picture,.hero img.bg{position:absolute;inset:0;width:100%;height:100%} .hero img.bg{object-fit:cover;object-position:50% 50%}
@media(min-width:900px){.hero img.bg{object-position:50% 100%}} /* 09/10 choix A de Badr : photo calee en bas, fosse entiere visible */
.hero .voile{position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,76,138,.30) 0%,rgba(15,76,138,.46) 100%)}
.hero .wrap{position:relative;width:100%}
.hero h1{margin:0 auto 14px;max-width:14ch;text-shadow:0 2px 10px rgba(0,0,0,.35)}
.hero .sub{font-size:18px;font-weight:600;margin:0 auto 12px;max-width:30ch;text-shadow:0 2px 8px rgba(0,0,0,.4)}
.hero .sit{font-size:15px;margin:0 auto 20px;max-width:46ch;text-shadow:0 1px 6px rgba(0,0,0,.45)}
.hero .ctas{display:grid;gap:14px;max-width:420px;margin:0 auto;justify-items:center}.hero .ctas>div{display:grid;justify-items:center;gap:10px;max-width:420px}.hero .sous{display:none;font-size:15px;line-height:1.45;margin:0;text-shadow:0 2px 8px rgba(0,0,0,.45);max-width:40ch}
.hero .ctas .btn,.hero .ctas .btn.white{width:auto;min-width:0;min-height:0;line-height:1;padding:15px 30px;border:2px solid #fff;box-shadow:none;background:var(--vert-btn);color:#fff;gap:12px;border-radius:50px}
.hero .ctas .btn svg{width:16px;height:16px}
@media(max-width:899px){.hero .ctas .btn{white-space:nowrap;padding:14px 20px;gap:10px;font-size:16px}} @media(max-width:374px){.hero .ctas .btn{font-size:14px;padding:13px 16px}}
@media(min-width:900px){.hero{min-height:66vh;padding:60px 0}.hero h1{max-width:22ch;font-size:clamp(38px,3.2vw,46px)}.hero .sub{max-width:60ch}.hero .sit{max-width:70ch;font-size:16px}.hero .ctas{grid-template-columns:1fr 1fr;max-width:980px;gap:14px 40px;align-items:start}.hero .sous{display:block}}
.avis h2{max-width:16ch;margin:0 auto 20px}
.avis-w{display:grid;gap:22px;max-width:1120px;margin:0 auto} .avis-w>div{min-width:0;max-width:100%} @media(min-width:900px){.avis-w{grid-template-columns:220px 1fr;align-items:center;gap:32px}}
.avis-note{text-align:center} .avis-note .ex{font-weight:800;font-size:24px;letter-spacing:.04em;margin:0} .avis-note .st{color:#f5b301;font-size:26px;letter-spacing:3px;margin:4px 0} .avis-note .src{font-size:14px;margin:0 0 8px}
.avis-note a{display:inline-block;margin-top:4px}
.revs{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 12px;margin:0 -20px;padding-left:20px;padding-right:20px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.revs .rev{flex:0 0 86%;scroll-snap-align:start} @media(min-width:700px){.revs{display:grid;grid-template-columns:1fr 1fr;overflow:visible;margin:0;padding:0}.revs .rev{flex:none}} @media(min-width:1100px){.revs{grid-template-columns:repeat(3,1fr)}}
.avis-ind{font-size:13px;color:var(--gris-txt);margin:4px 0 0} @media(min-width:700px){.avis-ind{display:none}}
.rev{background:#fff;border:1.5px solid #dbe3ec;border-radius:18px;padding:18px 18px 16px;text-align:left;display:flex;flex-direction:column}
.rev .top{display:flex;align-items:center;gap:12px}
.rev .av{width:44px;height:44px;border-radius:50%;background:var(--bleu-pale);color:var(--bleu);display:grid;place-items:center;font-weight:800;font-size:17px;flex:none;overflow:hidden} .rev .av img{width:44px;height:44px;border-radius:50%}
.rev .nom{font-weight:700;color:var(--bleu);font-size:16px;margin:0} .rev .date{color:var(--gris-txt);font-size:13px;margin:0}
.rev .g{margin-left:auto;flex:none}
.stars{color:#f5b301;font-size:18px;letter-spacing:2px;margin:10px 0 8px} .stars small{color:#1a73e8;font-size:13px;letter-spacing:0;vertical-align:middle;margin-left:6px}
.stars .badge{vertical-align:-3px;margin-left:8px}
.rev blockquote{margin:0;color:var(--txt);font-size:15px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.rev.open blockquote{display:block} .rev .plus{background:none;border:0;padding:0;margin-top:auto;padding-top:8px;color:var(--gris-txt);font:inherit;font-size:14px;cursor:pointer;text-align:left}
.expertise{background:var(--bleu-pale)}
.cards{display:grid;gap:14px} @media(min-width:760px){.cards{grid-template-columns:1fr 1fr}} @media(min-width:1100px){.cards{grid-template-columns:repeat(3,1fr)}}
/* 26/10 Badr « il faut appuyer sur le titre, le carré ne clique pas » : toute la carte est cliquable (lien du titre étendu), les liens départements restent cliquables au-dessus */
.card{position:relative}.card h3 a::after{content:"";position:absolute;inset:0;border-radius:inherit}.card .dep,.card .dep a{position:relative;z-index:1}.card:hover{box-shadow:0 6px 18px rgba(15,76,138,.18)}
.card{background:var(--bleu-pale);border:2px solid var(--bleu);border-radius:18px;padding:22px 18px 18px;text-align:center;display:flex;flex-direction:column}
.card .ico{width:84px;height:84px;border-radius:50%;background:var(--bleu);display:grid;place-items:center;margin:0 auto 14px;overflow:hidden;border:3px solid var(--bleu)}
.card .ico img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.card h3{letter-spacing:.03em;margin-bottom:6px} .card h3 a{text-decoration:none;color:var(--bleu);display:inline-block;padding:4px 0} .card h3 a:hover{text-decoration:underline}
.card p{color:var(--bleu);margin:0;font-size:15px}
.card .dep{margin:12px 0 0;padding-top:10px;border-top:1px solid rgba(15,76,138,.18);font-size:14px;color:var(--gris-txt)} .card .dep a{display:inline-block;min-width:34px;padding:4px 2px;font-weight:700;text-decoration:none;color:var(--bleu)} .card .dep a:hover{text-decoration:underline}
.deux{display:grid;gap:22px}
@media(min-width:900px){.deux{grid-template-columns:1fr 1fr;gap:48px;align-items:center}.deux.inv>:first-child{order:2}}
.deux img{border-radius:18px;width:100%;aspect-ratio:4/3;object-fit:cover}
.deux p{text-align:justify;hyphens:auto} @media(max-width:600px){.deux p{text-align:left}}
.etapes{margin:0 0 18px;padding-left:22px} .etapes li{margin:0 0 6px}
.actus .liste{display:grid;gap:22px} @media(min-width:900px){.actus .liste{grid-template-columns:repeat(3,1fr)}}
.actus article{background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 10px 30px rgba(15,76,138,.10);display:flex;flex-direction:column}
.actus img{aspect-ratio:4/3;object-fit:cover;width:100%}
.actus .in{padding:20px 18px 22px;display:flex;flex-direction:column;flex:1;text-align:left}
.actus h3{font-weight:500;font-size:18px;color:var(--bleu);margin-bottom:16px}
.actus .lire{margin-top:auto;font-weight:800;text-transform:uppercase;text-decoration:underline;color:var(--bleu);font-size:14px;display:inline-block;padding:6px 0;align-self:flex-start}
.actus h3 a{display:inline-block;padding:3px 0}
.plus-liens{margin:26px 0 0;font-size:15px;text-align:center;line-height:1.9} .plus-liens a{white-space:nowrap}
.zones p{max-width:70ch;margin:0 auto 1em} .zones .deps{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:0 0 18px;padding:0;list-style:none}
.zones .deps a{display:inline-block;padding:9px 14px;border:2px solid var(--bleu);border-radius:var(--pill);text-decoration:none;font-weight:700;color:var(--bleu);background:#fff} .zones .deps a:hover{background:var(--bleu);color:#fff}
.bande{background:#627787;color:#fff;padding:34px 0}
.bande .pr{display:grid;gap:28px;text-align:center} @media(min-width:900px){.bande .pr{grid-template-columns:repeat(5,1fr);gap:20px}}
.bande svg{width:34px;height:34px;stroke:#fff;fill:none;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;margin:0 auto 12px}
.bande div div{font-size:15px;font-weight:400;line-height:1.5;max-width:24ch;margin:0 auto}
.cta{background:var(--bleu-logo);color:#fff;padding:52px 0;text-align:left}
.cta .sur{letter-spacing:.3em;font-weight:600;font-size:14px;margin-bottom:12px;text-align:center}
.cta h2{color:#fff;font-size:clamp(28px,6.6vw,40px);max-width:16ch;margin:0 auto 24px;text-align:center}
.ctagrid{display:grid;gap:24px;max-width:1040px;margin:0 auto}
@media(min-width:900px){.ctagrid{grid-template-columns:1fr 1.15fr;gap:48px;align-items:center}}
.ctatxt p{font-size:16px} .ctatxt .tel a{color:#fff;text-decoration:none;font-weight:800;font-size:26px} .ctatxt .hor{font-size:14px;opacity:.9}
.formu{background:#fff;border-radius:18px;padding:22px 18px 18px;color:var(--txt);display:grid;gap:12px}
.formu label{display:grid;gap:5px;font-weight:600;font-size:14px;color:var(--bleu)}
.formu input,.formu select,.formu textarea{font:inherit;font-size:16px;padding:11px 12px;border:1.5px solid #c9d4df;border-radius:10px;background:#fff;color:var(--txt);width:100%;min-height:46px}
.formu textarea{min-height:80px;resize:vertical}
.formu input:focus,.formu select:focus,.formu textarea:focus{outline:3px solid rgba(24,152,80,.35);border-color:var(--vert)}
.formu .fichier input{padding:9px;font-size:14px;min-height:0;border-style:dashed}
.formu{position:relative} .formu .hp{position:absolute;top:0;left:0;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;opacity:0;pointer-events:none}
.formu .btn.full{width:100%;margin-top:4px} .formu .rgpd{font-size:13px;color:var(--gris-txt);margin:2px 0 0;font-weight:400}
.formu .err{background:#fde8e8;color:#8a1c1c;border-radius:10px;padding:10px 12px;font-size:14px;margin:0}
footer{padding:44px 0 100px} @media(min-width:900px){footer{padding-bottom:32px}}
footer .logo{height:64px;width:auto;margin-bottom:26px}
.card .dep a,.zones p a,.plus-liens a,.rgpd a,.copy a{text-decoration:underline;text-underline-offset:2px}
.fcols{display:grid;grid-template-columns:1fr 1fr;gap:28px 16px} @media(min-width:900px){.fcols{grid-template-columns:repeat(4,1fr)}}
footer .h4{font-size:20px;font-weight:600;color:var(--bleu);margin:0 0 10px} footer .h4::after{content:"";display:block;width:48px;height:4px;background:var(--vert);margin-top:10px}
footer ul{list-style:none;padding:0;margin:0} footer li{margin:0 0 8px;font-size:15px} footer a{color:var(--bleu);text-decoration:none}
.social{display:flex;gap:14px} .social a{width:48px;height:48px;border-radius:50%;background:var(--vert);display:grid;place-items:center;color:#fff;font-weight:800;font-size:20px}
.copy{border-top:1px solid #dbe3ec;margin-top:36px;padding-top:20px;color:var(--gris-txt);font-size:14px;text-align:center}
.flot{position:fixed;right:16px;bottom:20px;height:56px;padding:0 18px 0 4px;border-radius:50px;background:#96bc0d;box-shadow:0 8px 20px rgba(0,0,0,.25);display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;z-index:40}.flot .ic{width:48px;height:48px;border-radius:50%;background:#fff;display:grid;place-items:center;flex:0 0 auto;position:relative}.flot .ic::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid rgba(255,255,255,.9);opacity:0;animation:flot-halo 4s ease-out infinite}.flot svg{animation:flot-sonne 4s ease-in-out infinite;transform-origin:50% 60%}@keyframes flot-sonne{0%,8%,100%{transform:rotate(0)}1%,3%,5%{transform:rotate(-14deg)}2%,4%,6%{transform:rotate(14deg)}}@keyframes flot-halo{0%{transform:scale(.8);opacity:.9}20%{transform:scale(1.45);opacity:0}100%{transform:scale(1.45);opacity:0}}@media(prefers-reduced-motion:reduce){.flot svg,.flot .ic::after{animation:none}}.flot .tx{display:grid;line-height:1.15}.flot small{font-size:14px;font-weight:500}.flot b{font-size:16px;font-weight:700;letter-spacing:.01em}.flot *{pointer-events:none}
.flot svg{width:24px;height:24px;stroke:#96bc0d;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media(min-width:1000px){.flot{right:70px}}
.lat{position:fixed;right:0;top:50%;transform:translateY(-50%);display:none;flex-direction:column;z-index:60;background:#96bc0d;box-shadow:0 4px 16px rgba(0,0,0,.18)}.lat a{display:grid;place-items:center;width:50px;height:50px;border-bottom:1px solid rgba(255,255,255,.55);color:#fff}.lat a:last-child{border-bottom:0}.lat a:hover,.lat a:focus-visible{background:#7f9f0b;outline:none}.lat svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
@media(min-width:1300px){.lat{display:flex}}@media(min-width:900px) and (max-width:1199px){.hd nav{gap:14px;font-size:12.5px}.hd nav a{white-space:nowrap}.hd nav a.tel{padding:10px 14px;white-space:nowrap}}
/* 27/10 Badr : barre d'action fixe en bas sur mobile (pouce droit : jamais cachée par la main) — Appeler vert OIB, Devis bleu OIB */

/* V5.1 — corrections UX */
/* P1-4 typographie */
h2{line-height:1.22}
/* P0-1 + P0-2 (voile seul, la photo ne change pas) : voile 45 → 60 % ; hero ordinateur recomposé */
.hero .voile{background:linear-gradient(180deg,rgba(15,76,138,.45) 0%,rgba(15,76,138,.60) 100%)}
@media(min-width:900px){.hero{min-height:60vh}.hero h1{max-width:32ch;letter-spacing:.02em;font-variation-settings:"wght" 900}.hero .sub{margin-bottom:56px}
.hero .ctas{position:relative}.hero .ctas::before{content:"";position:absolute;left:50%;top:4px;bottom:4px;width:1px;background:rgba(255,255,255,.55)}}
/* P0-3 option A : bouton d'appel flottant en rond de 56 px sous 1000 px (lien tel: et aria-label inchangés, texte masqué) */
@media(max-width:999px){.flot{width:56px;padding:0;justify-content:center}.flot .tx{display:none}}
/* P0-4 en-tête mobile 64 px, logo 48 px, icône d'appel à gauche du burger */
.tel-m{display:none}
@media(max-width:999px){.hd{height:64px}.hd img{height:48px}.tel-m{display:grid;place-items:center;width:48px;height:48px;margin:0 6px 0 auto;border-radius:50%;background:var(--bleu);color:#fff;flex:none}.tel-m svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}}
/* P0-5 bloc formulaire : style seulement (aucun attribut ni champ modifié) */
button,input,select,textarea{font-family:inherit}
@media(min-width:900px){.ctagrid{align-items:start}.ctatxt{position:sticky;top:110px}}
.formu .fichier input::file-selector-button{font:inherit;font-size:14px;font-weight:700;border:0;border-radius:999px;background:var(--bleu-pale);color:var(--bleu);padding:8px 14px;margin-right:10px;cursor:pointer}
/* P0-6 boutons sur une ligne jusqu'à 420 px (les boutons du hero gardent leurs règles) */
@media(max-width:420px){.btn{font-size:14px;padding:12px 18px;letter-spacing:0;gap:8px}}
@media(max-width:359px){.btn{font-size:13px;padding:12px 14px}}
/* P1-1 cartes « Notre expertise » : fond blanc, bordure fine, pictogrammes SVG, liens département en pastilles visibles */
.card{background:#fff;border:1px solid rgba(15,76,138,.35);border-radius:12px;padding:20px 18px 16px}
.card .ico{width:56px;height:56px;border:0;margin-bottom:12px}.card .ico svg{width:30px;height:30px;stroke:#fff;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.card h3{font-size:17px}
.card .dep{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;align-items:center;font-size:13px}
.card .dep a{min-width:36px;min-height:32px;padding:6px 8px;border:1px solid rgba(15,76,138,.25);border-radius:999px;text-decoration:none;line-height:1.3}
.card .dep a:hover,.card .dep a:focus-visible{background:var(--bleu);color:#fff;border-color:var(--bleu);text-decoration:none}
/* P1-2 avis compacts : une rangée de 3 sur ordinateur, défilement horizontal pour les suivants (aucune note ni nombre d'avis) */
.rev{border-radius:12px}
@media(min-width:700px){.revs{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:calc((100% - 14px)/2);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 12px;scrollbar-width:thin}.revs .rev{scroll-snap-align:start}.avis-ind{display:block;text-align:center}}
@media(min-width:900px){.avis-w{grid-template-columns:1fr;gap:18px}.avis-note{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 16px}.avis-note .ex,.avis-note .st,.avis-note .src{margin:0}.avis-note a{margin-top:0}.revs{grid-auto-columns:calc((100% - 28px)/3)}}
/* P1-3 alignements des blocs à deux colonnes */
@media(min-width:900px){.deux{align-items:start}}
.deux img{margin-top:8px}.deux p{text-align:left;hyphens:manual}
/* P1-5 images chantiers et guides en 16/10 ; carrousel mobile pour les chantiers seulement (les guides restent en liste) */
.actus img{aspect-ratio:16/10}
@media(max-width:899px){#chantiers .liste{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -20px;padding:4px 20px 16px;scroll-padding:0 20px;-webkit-overflow-scrolling:touch}#chantiers article{flex:0 0 86%;scroll-snap-align:start}}
/* P1-6 bande de réassurance sur 2 colonnes en mobile */
@media(max-width:899px){.bande .pr{grid-template-columns:1fr 1fr;gap:22px 12px}.bande .pr>div:last-child{grid-column:1/-1}}
/* P1-7 pied de page compact en mobile (liens : 6 px de marge interne verticale) */
@media(max-width:899px){footer{padding-top:36px}footer .logo{margin-bottom:18px}.fcols{gap:22px 16px}footer li{margin:0}footer li a{display:block;padding:15px 0;line-height:1.35}footer .h4{font-size:17px;margin-bottom:6px}footer .h4::after{margin-top:8px}.copy{margin-top:26px}}
/* P1-8 rythme des fonds : « Qui sommes-nous » + « Pourquoi choisir OIB » sur fond gris commun, « Chantiers » passe en blanc */
#qui,#pourquoi{background:#f7f9fb}#chantiers{background:#fff!important}
/* P2 finitions : transitions, survol, burger → croix ; rien sous prefers-reduced-motion */
.btn,.card,.actus article,.zones .deps a,.card .dep a,.tel-m{transition:background-color .2s,color .2s,transform .2s,box-shadow .2s}
@media(hover:hover){.actus article:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(15,76,138,.14)}.card:hover{box-shadow:0 10px 26px rgba(15,76,138,.12)}}
.burger span{transition:transform .2s,opacity .2s,width .2s,margin .2s}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(11px) rotate(45deg)}.burger[aria-expanded=true] span:nth-child(2){opacity:0}.burger[aria-expanded=true] span:nth-child(3){width:28px;margin-left:0;transform:translateY(-11px) rotate(-45deg)}
@media(prefers-reduced-motion:reduce){.btn,.card,.actus article,.zones .deps a,.card .dep a,.tel-m,.burger span{transition:none}.actus article:hover{transform:none}}

/* V5.2 — audit UX 15/10 */
/* P0-1 option A : le vert OIB reste la couleur des boutons, le texte passe en bleu nuit (#14202B sur #96bc0d = 7,47:1 ; sur #7f9f0b au survol = 5,47:1) */
.btn,.btn:hover,.hero .ctas .btn,.hero .ctas .btn.white,.formu .btn.full,.hd nav a.tel,.hd nav a.tel:hover,.flot,.social a{color:#14202b}
.flot .ic{background:#fff}
/* P0-2 hero : primaire plein (formulaire) + secondaire blanc à texte bleu (appel) ; texte des boutons inchangé */
.hero .ctas>div:nth-child(2) .btn,.hero .ctas>div:nth-child(2) .btn.white{background:#fff;color:var(--bleu);border-color:#fff}
.hero .ctas>div:nth-child(2) .btn:hover{background:var(--bleu-pale);color:var(--bleu)}
/* 26/10 Badr « mets moi aussi la barre à droite » : sur ordinateur, la barre latérale (appel, devis, zones, avis) remplace la pilule ; un seul appel flottant reste visible */
@media(min-width:1300px){.flot{display:none}}
/* P0-4 bis : police de secours calibrée sur Encode Sans (Arial 800 est ~12 % plus large) pour que le H1 garde le même nombre de lignes avant et après le chargement de la police — sans ça, décalage de mise en page (CLS 0,11 mesuré le 16/10) */
@font-face{font-family:"Encode Sans Secours";src:local("Arial Bold"),local("Arial-BoldMT"),local("Arial");size-adjust:98%;font-weight:100 900}
.hero h1,.hero .sub{font-family:"Encode Sans","Encode Sans Secours",Arial,sans-serif}
/* P0-4 H1 mobile : interligne serré, interlettrage négatif, lignes équilibrées (texte inchangé) */
@media(max-width:899px){.hero h1{max-width:none;line-height:1.08;letter-spacing:-.01em;text-wrap:balance}}
@media(max-width:420px){.hero h1{font-size:27px}}
@media(max-width:359px){.hero h1{font-size:25px}}
/* P0-5 H1 ordinateur : grand titre = interlettrage négatif */
@media(min-width:900px){.hero h1{letter-spacing:-.01em;line-height:1.1}}
/* P0-6 cibles tactiles ≥ 44 px : la zone cliquable grandit, le texte ne change pas */
.rev .plus,.actus .lire,.ctatxt .tel a{display:inline-flex;align-items:center;min-height:44px}
.hd nav a{padding:14px 0}.hd nav a.tel{min-height:44px;display:inline-flex;align-items:center}
.card .dep a{min-width:44px;min-height:40px;display:inline-flex;align-items:center;justify-content:center}
@media(max-width:899px){footer li a{display:block;min-height:0;padding:15px 0;line-height:1.35}.menu a{min-height:48px;display:flex;align-items:center}}
/* P0-7 focus clavier visible partout ; blanc sur les fonds bleus et sur la photo */
:focus-visible{outline:3px solid var(--bleu);outline-offset:3px}
.hero :focus-visible,.ctatxt :focus-visible,.bande :focus-visible,.flot:focus-visible,.cta>.wrap>h2 :focus-visible{outline-color:#fff}
.formu input:focus-visible,.formu select:focus-visible,.formu textarea:focus-visible{outline:3px solid rgba(24,152,80,.35);outline-offset:0}
/* P1-1 réponse à l'appui (100 ms, pas de rebond) */
.btn,.card,.actus article,.flot,.tel-m,.zones .deps a,.card .dep a{transition:background-color .2s,color .2s,box-shadow .2s,transform .1s ease-out}
.btn:active,.flot:active,.tel-m:active,.zones .deps a:active,.card .dep a:active{transform:scale(.97)}.card:active,.actus article:active{transform:scale(.985)}
/* P1-2 en-tête collant translucide, liseré bas ; opaque si l'utilisateur refuse la transparence */
header{background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);box-shadow:0 1px 0 rgba(15,76,138,.12)}
@media(prefers-reduced-transparency:reduce){header{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}}
/* P1-3 deux styles de boutons, un seul rayon ; liens secondaires en bas de casse */
.hero .ctas .btn,.hero .ctas .btn.white{border-radius:var(--pill)}
.actus .lire{text-transform:none;text-decoration:none;font-weight:600;font-size:15px;letter-spacing:0}
/* P1-5 défilement doux vers le formulaire (sauf mouvement réduit) ; ancre dégagée de l'en-tête collant */
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
#contact{scroll-margin-top:96px}#avis,#expertise,#qui,#chantiers,#guides,#zones{scroll-margin-top:90px}
/* P1-6 sous-titre du hero : même ombre portée que le H1 */
.hero .sub{text-shadow:0 2px 10px rgba(0,0,0,.35)}
/* P1-7 cartes avis : « Lire la suite » calme (15 px / 600, bleu, sans soulignement) ; bordure bleue au survol souris seulement */
.rev .plus{font-size:15px;font-weight:600;color:var(--bleu);text-decoration:none}
@media(hover:hover){.rev:hover{border-color:var(--bleu)}}
/* P1-8 bande de réassurance sur le bleu de la charte (deux bleus suffisent) */
.bande{background:var(--bleu)}
/* P2-1 cartes chantiers/guides : courbe miroir entrée/sortie */
.actus article{transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s cubic-bezier(.2,.8,.2,1)}
/* P2-2 menu mobile : ouverture par opacité (150 ms), même chemin à la fermeture */
.menu.open{animation:menu-in .15s ease-out}@keyframes menu-in{from{opacity:0}to{opacity:1}}
/* P2-3 burger : retour à l'appui */
.burger:active{opacity:.6}
/* mouvement réduit : rien ne bouge, rien ne défile tout seul */
@media(prefers-reduced-motion:reduce){.btn,.card,.actus article,.flot,.tel-m,.zones .deps a,.card .dep a{transition:none}.btn:active,.flot:active,.tel-m:active,.zones .deps a:active,.card .dep a:active,.card:active,.actus article:active{transform:none}.menu.open{animation:none}}

.hero .ctas::before{display:none}
.besoin{border:0;padding:0;margin:0 0 14px}.besoin legend{font-weight:700;margin-bottom:8px;color:var(--bleu)}
.formu .chip{display:flex;flex-direction:row;align-items:center;gap:10px;width:100%;box-sizing:border-box;border:1.5px solid #c9d3dd;border-radius:12px;padding:11px 14px;margin:0 0 8px;font-size:16px;line-height:1.2;background:#fff;cursor:pointer}
.formu .chip input{accent-color:var(--bleu);width:20px;height:20px;flex:0 0 20px;margin:0}
.formu .chip:has(input:checked){border-color:var(--bleu);background:#e8f0f8;font-weight:600}
@media(min-width:900px){.besoin{display:grid;grid-template-columns:1fr 1fr;gap:0 10px}.besoin legend{grid-column:1/-1}}
@media(max-width:899px){
 .hero .sub{display:none}.hero .ctas{margin-top:14px}.hero{min-height:700px}
 .hero .voile{background:linear-gradient(180deg,rgba(10,30,50,.62) 0%,rgba(10,30,50,.55) 48%,rgba(10,30,50,.08) 100%)}
 .hero picture img{object-position:50% 100%}
 main{display:flex;flex-direction:column}.hero{order:1}#expertise{order:2}#avis{order:3}#qui{order:4}#pourquoi{order:5}#chantiers{order:6}#guides{order:7}#zones{order:8}.bande{order:9}#contact{order:10}
 .expertise .card .dep{display:none}
 .avis-note .ex,.avis-note .src{display:none}
 .flot{right:auto;left:16px;bottom:18px}
 #avis .fl{display:none}#avis div.car{padding:0}
 html,body{overflow-x:clip}
 body{padding-bottom:84px}
 .mo .flot{display:none}
}

#avis .car{position:relative;padding:0 30px}
#avis .revs,#avis .revs{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;margin:0;padding:4px 2px 12px}
#avis .revs::-webkit-scrollbar{display:none}
#avis .revs .rev{display:flex;flex:0 0 calc((100% - 28px)/3);scroll-snap-align:start}
#avis .fl{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;border:0;background:var(--txt);color:#fff;font-size:22px;line-height:1;cursor:pointer;z-index:2;box-shadow:0 2px 8px rgba(0,0,0,.2)}
#avis .fl.g{left:-8px}#avis .fl.d{right:-8px}
#avis .pts{display:flex;justify-content:center;gap:8px;margin-top:6px}#avis .pts i{width:8px;height:8px;border-radius:50%;background:#c9d6e3}#avis .pts i.on{background:var(--bleu)}
#avis .rev .av{background:var(--bleu);color:#fff}
.avis-ind{display:none}
@media(max-width:899px){#avis .revs .rev{flex:0 0 100%}#avis .car{padding:0 26px}#avis .fl.g{left:-6px}#avis .fl.d{right:-6px}}

.deux img{width:62%;margin:8px auto 0;display:block}
@media(min-width:900px){#qui .deux,#pourquoi .deux{grid-template-columns:34% 1fr}#pourquoi .deux.inv{grid-template-columns:1fr 34%}.deux img{width:100%}}

/* menu mobile plein écran (GO Badr 26/10) ; .mo sur <html> retire le flou de l'en-tête, sinon le panneau fixe reste coincé dans l'en-tête */
.mo header{-webkit-backdrop-filter:none;backdrop-filter:none}.mo body{overflow:hidden}
.menu.open{position:fixed;inset:0;z-index:999;display:flex;flex-direction:column;overflow:auto;border:0;background:#fff;animation:none}
.menu .mh{display:flex;align-items:center;justify-content:space-between;padding:8px 16px;border-bottom:1px solid var(--bleu-pale)}
.menu .mh img{height:48px;width:auto}
.menu .mx{width:46px;height:46px;border:0;background:none;font-size:34px;line-height:1;color:var(--bleu);cursor:pointer}
.menu .mi a{position:relative;padding:0 44px 0 20px;min-height:58px;font-size:18px;font-weight:700;color:var(--txt);border-bottom:1px solid var(--bleu-pale)}
.menu .mi a:after{content:"";position:absolute;right:22px;top:50%;width:9px;height:9px;border-right:2.5px solid var(--bleu);border-bottom:2.5px solid var(--bleu);transform:translateY(-50%) rotate(-45deg)}
.menu .mb{padding:22px 20px 28px;display:grid;gap:12px;background:var(--bleu-pale);margin-top:auto}
.menu .mb a.b{border:0;border-radius:999px;justify-content:center;min-height:52px;font-size:17px;font-weight:800}
.menu .mb a.t{background:var(--vert);color:#14202b}.menu .mb a.c{background:var(--bleu);color:#fff}
.menu .mb a.ag{border:0;justify-content:center;min-height:44px;font-size:15px;font-weight:600;color:var(--bleu);padding:0}
.menu .mb .social{justify-content:center}.menu .mb .social a{border:0;padding:0;min-height:0;width:48px;height:48px;justify-content:center;color:#14202b}
/* logo horizontal 31/10/2026 */@media(min-width:1000px){.hd img{height:48px;margin-right:16px}.hd nav{gap:20px}.hd nav a{white-space:nowrap}}

/* 09/11 Badr : bouton d'appel mobile plus haut et plein */
@media(max-width:899px){.flot{bottom:76px;background:#96bc0d}.flot .ic{background:#96bc0d!important}.flot svg{stroke:#fff}.flot .ic::after{border-color:#fff}}
/* 11/11 UX 10 : barre d'appel */
/* 11/11 UX 10 : barre d'appel pleine largeur en bas sur téléphone (le bouton rond recouvrait le texte) ; encadré En bref */
@media(max-width:899px){body{padding-bottom:64px}.flot{left:0!important;right:0!important;bottom:0!important;width:auto!important;height:56px;padding:0 16px!important;border-radius:0!important;justify-content:center!important;gap:10px;background:#96bc0d!important;box-shadow:0 -2px 12px rgba(0,0,0,.18)!important}.flot .ic{width:36px!important;height:36px!important;background:transparent!important}.flot .ic::after{display:none}.flot .tx{display:flex!important;align-items:baseline;gap:8px}.flot small{font-size:15px;font-weight:600;color:#fff}.flot b{font-size:17px;color:#fff}}
.enbref{background:#eef4fa;border-left:4px solid #0b3d6e;border-radius:10px;padding:14px 18px;margin:0 0 24px}.enbref-t{font-weight:800;color:#0b3d6e;margin:0 0 6px;text-transform:uppercase;font-size:14px;letter-spacing:.04em}.enbref ul{margin:0;padding-left:18px}.enbref li{margin:5px 0;line-height:1.5}

/* 11/11 UX 10b : contraste barre (blanc sur vert = 2,2:1 ; bleu foncé = 5,7:1) */
@media(max-width:899px){.flot small,.flot b{color:#10233b!important}.flot svg{stroke:#10233b!important}}

/* 11/11 design 10 A : barre latérale « Accès rapides » masquée (doublon du menu et de l'encadré devis) ; menu resserré 900-1199 px (lien Prix ajouté) */
.lat{display:none!important}@media(min-width:900px) and (max-width:1199px){.hd nav{gap:11px;font-size:12px}.hd nav a.tel{padding-left:12px;padding-right:12px}}