:root{
  --paillasse:#0E1113;
  --paillasse-2:#161A1D;
  --trait:#252B2F;
  --papier:#ECEFEC;
  --papier-2:#C4CCC8;
  --encre:#0E1113;
  --bleu:#3D6FF2;
  --bleu-pale:#8FB0FF;
  --safranine:#D8456B;
  --ambre:#E0A32C;
  --vert:#43B27E;
  --gouttiere:clamp(20px,5vw,64px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paillasse);color:var(--papier);
  font:16px/1.65 Inter,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(circle at 15% 12%,rgba(255,255,255,.022) 0 1px,transparent 1px),
    radial-gradient(circle at 62% 47%,rgba(255,255,255,.018) 0 1px,transparent 1px),
    radial-gradient(circle at 88% 78%,rgba(255,255,255,.02) 0 1px,transparent 1px);
  background-size:180px 180px,240px 240px,300px 300px;
}
.wrap{max-width:1080px;margin:0 auto;padding:0 var(--gouttiere)}

h1,h2,h3{font-family:"Bricolage Grotesque",Georgia,serif;font-weight:700;line-height:1.05;margin:0}
h1{font-size:clamp(2.1rem,5.4vw,3.9rem);letter-spacing:-.02em}
h2{font-size:clamp(1.5rem,3.2vw,2.2rem);letter-spacing:-.015em}
h3{font-size:1.06rem;font-weight:500;letter-spacing:-.005em}
p{margin:0 0 1em}
a{color:var(--bleu-pale);text-decoration:none}

.etiq{
  font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--papier-2)
}
.mono{font-family:"IBM Plex Mono",monospace}

/* ---------------- barre ---------------- */
.barre{
  position:sticky;top:0;z-index:40;background:rgba(14,17,19,.9);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--trait)
}
.barre .wrap{display:flex;align-items:center;justify-content:space-between;height:58px;gap:16px}
.sig{font-family:"IBM Plex Mono",monospace;font-size:.8rem;letter-spacing:.06em;color:var(--papier)}
.sig b{color:var(--bleu-pale);font-weight:500}
.barre nav{display:flex;gap:clamp(10px,2.4vw,26px)}
.barre nav a{font-size:.85rem;color:var(--papier-2)}
.barre nav a:hover{color:var(--papier)}
.barre nav a.actif{color:var(--bleu-pale)}

/* ---------------- hero ---------------- */
.hero{padding:clamp(56px,9vw,110px) 0 clamp(40px,6vw,72px)}
.hero .etiq{display:block;margin-bottom:20px}
.hero h1{max-width:15ch}
.hero h1 em{font-style:normal;color:var(--bleu-pale)}
.chapo{max-width:52ch;color:var(--papier-2);font-size:clamp(1rem,1.6vw,1.12rem);margin-top:22px}

/* bandeau de fioles : la signature du haut de page */
.fioles{display:flex;gap:10px;margin-top:46px;flex-wrap:wrap}
.fiole{
  flex:1 1 150px;min-width:140px;border:1px solid var(--trait);border-radius:3px 3px 9px 9px;
  padding:12px 12px 14px;background:linear-gradient(var(--paillasse-2),#12161A);position:relative;overflow:hidden
}
.fiole::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:var(--niveau,38%);
  background:var(--teinte);opacity:.17
}
.fiole .etiq{font-size:.62rem;position:relative;z-index:1}
.fiole strong{display:block;margin-top:6px;font-weight:500;font-size:.92rem;position:relative;z-index:1}

/* ---------------- sections ---------------- */
section{padding:clamp(52px,7vw,92px) 0;border-top:1px solid var(--trait)}
.titre-bloc{display:flex;align-items:baseline;gap:16px;margin-bottom:34px;flex-wrap:wrap}
.titre-bloc .etiq{flex:none}

/* trois publics */
.publics{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:800px){.publics{grid-template-columns:repeat(3,1fr)}}
.public{
  background:var(--papier);color:var(--encre);border-radius:4px;padding:22px 22px 24px;
  border-left:5px solid var(--t);position:relative
}
.public .etiq{color:#5A6360}
.public h3{margin:8px 0 10px;font-size:1.2rem;font-weight:700}
.public p{font-size:.94rem;color:#3D4643;margin:0}
.public ul{margin:12px 0 0;padding:0;list-style:none;font-size:.9rem;color:#3D4643}
.public li{padding:5px 0 5px 16px;position:relative}
.public li::before{content:"";position:absolute;left:0;top:13px;width:7px;height:1.5px;background:var(--t)}

/* plaque 96 puits */
.plaque-bloc{display:grid;gap:30px;grid-template-columns:1fr}
@media(min-width:900px){.plaque-bloc{grid-template-columns:1.15fr .85fr;align-items:start}}
.plaque{
  background:var(--paillasse-2);border:1px solid var(--trait);border-radius:8px;
  padding:14px 14px 16px;overflow-x:auto
}
.grille-puits{display:grid;grid-template-columns:16px repeat(12,1fr);gap:4px;min-width:430px}
.rep{font-family:"IBM Plex Mono",monospace;font-size:.58rem;color:#5C6569;
  display:flex;align-items:center;justify-content:center}
.puits{
  aspect-ratio:1;border-radius:50%;border:1px solid #232A2E;background:#12161A;
  padding:0;cursor:default
}
.puits.plein{cursor:pointer;border-color:transparent;background:var(--t);opacity:.28;
  transition:opacity .25s ease,transform .25s ease}
.puits.plein:hover,.puits.plein:focus-visible,.puits.plein[aria-current="true"]{opacity:1;transform:scale(1.14)}
.puits.plein:focus-visible{outline:2px solid var(--papier);outline-offset:2px}
.lecture{border-top:1px solid var(--trait);margin-top:14px;padding-top:12px;min-height:76px}
.lecture .etiq{color:var(--bleu-pale)}
.lecture h3{margin:6px 0 4px}
.lecture p{font-size:.9rem;color:var(--papier-2);margin:0}
.legende{display:flex;gap:14px;flex-wrap:wrap;margin-top:16px;font-size:.76rem;color:var(--papier-2)}
.legende span{display:flex;align-items:center;gap:6px}
.legende i{width:9px;height:9px;border-radius:50%;background:var(--t);display:block}

/* etapes */
.etapes{display:grid;gap:2px;background:var(--trait);border:1px solid var(--trait);border-radius:6px;overflow:hidden}
@media(min-width:760px){.etapes{grid-template-columns:repeat(3,1fr)}}
.etape{background:var(--paillasse-2);padding:24px 22px}
.etape .num{font-family:"IBM Plex Mono",monospace;color:var(--bleu-pale);font-size:.8rem}
.etape h3{margin:10px 0 8px;font-size:1.05rem;font-weight:700;font-family:"Bricolage Grotesque",serif}
.etape p{font-size:.92rem;color:var(--papier-2);margin:0}

.prose{max-width:60ch;color:var(--papier-2)}
.prose strong{color:var(--papier);font-weight:500}

/* contact */
.contact{background:var(--papier);color:var(--encre);border-radius:6px;padding:clamp(26px,4vw,42px);
  display:grid;gap:22px}
@media(min-width:760px){.contact{grid-template-columns:1.1fr .9fr;align-items:center}}
.contact h2{color:var(--encre)}
.contact p{color:#3D4643;margin:10px 0 0;font-size:.96rem}
.boite-mail{background:#0E1113;border-radius:4px;padding:18px}
.boite-mail .etiq{color:var(--papier-2);font-size:.62rem}
.adresse{font-family:"IBM Plex Mono",monospace;color:var(--papier);font-size:.95rem;
  margin:8px 0 14px;user-select:all;word-break:break-all}
.btn{width:100%;padding:12px;border:0;border-radius:3px;background:var(--bleu);color:#fff;
  font:500 .95rem Inter,sans-serif;cursor:pointer}
.btn:hover{background:#3260DD}
.essai{display:inline-block;margin-top:16px;font-size:.85rem;color:#3D4643;
  border-top:1px solid #CDD4D0;padding-top:12px}

footer{padding:34px 0 46px;border-top:1px solid var(--trait);font-size:.8rem;color:#5C6569}
footer .wrap{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* Labo Dev: presentation, navigation and touch-friendly portfolio */
:root{--paillasse:#061723;--paillasse-2:#0b2431;--trait:#25404b;--papier:#f2f8f6;--papier-2:#bdcecF;--bleu:#68dfb5;--bleu-pale:#83f0ca;--vert:#68dfb5;--gouttiere:clamp(20px,5vw,64px)}
body{background-image:radial-gradient(ellipse at 90% 5%,#10493866,transparent 30%)}
.wrap{max-width:1240px}a:hover{text-decoration:underline}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #a0ffe0;outline-offset:5px}
.skip{position:fixed;left:16px;top:-100px;z-index:100;background:#83f0ca;color:#061723;padding:10px}.skip:focus{top:12px}
section[id],main{scroll-margin-top:105px}.barre{background:#061723ee}.barre .wrap{min-height:80px;height:auto;padding-top:10px;padding-bottom:10px}.sig{display:flex;gap:12px;align-items:center;font-family:Inter,system-ui,sans-serif;font-size:1.08rem;font-weight:700;letter-spacing:.08em;flex-shrink:0}.sig img{border-radius:10px}.sig small{display:block;font-size:.61rem;font-weight:400;letter-spacing:.01em;color:var(--papier-2)}.sig:hover{text-decoration:none}.barre nav a{padding:8px 0}.barre nav a:last-child{color:#83f0ca}
.hero{padding:80px 0 56px;background:linear-gradient(125deg,transparent 70%,#11443533)}.hero h1{font-size:clamp(2.6rem,5.7vw,4.7rem);max-width:20ch;line-height:1.08;letter-spacing:-.045em}.hero .chapo{max-width:66ch;font-size:1.08rem;margin-top:26px}.hero .etiq{color:#83f0ca}.actions{display:flex;gap:24px;align-items:center;margin-top:32px;flex-wrap:wrap}.cta{display:inline-flex;justify-content:center;gap:24px;align-items:center;background:#83f0ca;color:#061723!important;padding:15px 22px;border-radius:7px;font-size:.93rem;font-weight:700;text-decoration:none!important;line-height:1.5}.cta:hover{background:#b0ffe3}.secondary{color:var(--papier);font-weight:600}.hero-note{margin-top:20px;font-size:.78rem;color:var(--papier-2)}.fioles{margin-top:42px}.fiole{border-radius:8px;min-height:105px}.fiole::after{opacity:.10}.fiole strong{font-size:.93rem}
section{padding:64px 0}.titre-bloc{margin-bottom:28px}.titre-bloc .etiq{color:#83f0ca}h2{line-height:1.18}.public{border-radius:10px;padding:24px}.public h3{font-size:1.25rem;line-height:1.3}.public p,.public li{font-size:.88rem}.section-intro{max-width:70ch;color:var(--papier-2);margin-bottom:28px}.tools-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.tool{border:1px solid var(--trait);border-radius:10px;background:#0b243166;align-self:start;overflow:hidden}.tool summary{list-style:none;padding:22px;cursor:pointer;min-height:160px}.tool summary::-webkit-details-marker{display:none}.tool summary:hover{background:#16374477}.tool-meta{font:11px 'IBM Plex Mono',monospace;text-transform:uppercase;letter-spacing:.07em;color:var(--t)}.tool h3{font:600 1.05rem/1.4 Inter,system-ui,sans-serif;margin:14px 0 18px}.tool-open{display:flex;justify-content:space-between;align-items:center;font-size:.76rem;color:var(--papier-2)}.tool-open b{color:var(--t);font-size:1.25rem}.tool[open] .tool-open b{transform:rotate(45deg)}.tool[open]{border-color:var(--t)}.tool-description{padding:0 22px 22px;font-size:.9rem;color:var(--papier-2)}.tool-description a{font-size:.8rem}.outil-note{margin-top:24px;border-left:2px solid #83f0ca;padding:6px 20px;font-size:.9rem}.outil-note p{color:var(--papier-2);margin:6px 0 0}.etape h3{font-size:1.14rem;line-height:1.3}.etape p{color:var(--papier-2)}.contact{background:linear-gradient(125deg,#103b34,#0b2431);border:1px solid #346155;border-radius:16px;padding:36px;gap:32px}.contact h2{max-width:19ch}.contact p{max-width:48ch}.boite-mail{min-width:0}.adresse{display:block;overflow-wrap:anywhere;font-size:clamp(.9rem,1.6vw,1.1rem);margin:12px 0 20px}.boite-mail .cta{width:100%;gap:6px}.contact-links{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:14px;font-size:.8rem}.contact-links .btn{padding:9px 12px}.contact .essai{font-size:.79rem;color:#cce5db}footer{font-size:.8rem}footer .wrap{gap:20px}footer a{font-size:.75rem}
@media(max-width:850px){.tools-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.barre .wrap{flex-wrap:wrap;gap:8px}.barre nav{width:100%;justify-content:space-between}.hero{padding-top:48px}.contact{grid-template-columns:1fr}.publics{grid-template-columns:1fr}.public{padding:24px}.public ul{margin-bottom:0}}
@media(max-width:520px){.tools-grid{grid-template-columns:1fr}.hero h1{font-size:2.65rem}.hero-note{line-height:1.7}.actions{gap:18px}.actions .cta{width:100%}.fioles{flex-direction:column}.fiole{flex:auto;min-height:85px}.tool summary{min-height:140px}.contact{padding:24px 18px}.contact h2{font-size:1.8rem}.contact-links{flex-direction:column;align-items:flex-start}.etapes{grid-template-columns:1fr}.barre nav a{font-size:.78rem}.sig{font-size:.98rem}footer .wrap{flex-direction:column;align-items:flex-start}section{padding:46px 0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.contact{color:var(--papier)}.contact h2{color:var(--papier)}.contact p{color:var(--papier-2)}.contact .etiq{color:#bde7d7}body{background-size:100% 100%;background-repeat:no-repeat}h1,h2,h3{font-family:"Bricolage Grotesque",Inter,system-ui,sans-serif}
html{scroll-padding-top:85px}.etiq,.tool-meta{font-size:12px}.section-intro{font-size:16px}#devis{background:var(--paillasse-2)}#quote-form{max-width:800px;margin:30px auto 0;padding:30px;border:1px solid #45515a;border-radius:8px;background:var(--paillasse);text-align:left}#quote-form h3{font-size:24px}#quote-form .form-caption{font-size:13px;color:var(--papier-2);margin:10px 0 25px}#quote-form .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}#quote-form label,#quote-form legend{font:14px/1.6 Inter,system-ui,sans-serif}#quote-form>label,#quote-form .form-grid>label{display:block;margin-bottom:20px}#quote-form input:not([type=checkbox]):not([type=radio]):not([type=hidden]),#quote-form select,#quote-form textarea{display:block;width:100%;min-width:0;background:#161a1d;border:1px solid #52616b;border-radius:4px;padding:12px;color:var(--papier);font:16px/1.5 Inter,system-ui,sans-serif;margin-top:8px}#quote-form textarea{resize:vertical}#quote-form input::placeholder,#quote-form textarea::placeholder{color:#a2aea7}#quote-form fieldset{border:0;padding:0;margin:0 0 24px}#quote-form legend{margin-bottom:12px}#quote-form .service-choices{display:flex;flex-wrap:wrap;gap:8px}#quote-form .service-choices label{position:relative;cursor:pointer}#quote-form .service-choices input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}#quote-form .service-choices span{display:block;padding:8px 12px;border:1px solid #52616b;border-radius:4px;font-size:14px}#quote-form .service-choices input:checked+span{background:#3d6ff226;border-color:var(--bleu-pale);color:var(--bleu-pale)}#quote-form .service-choices input:focus-visible+span{outline:2px solid var(--bleu-pale);outline-offset:2px}#quote-form .consent{display:flex;gap:10px;align-items:flex-start;color:var(--papier-2);font-size:13px}#quote-form .consent input{margin-top:5px;accent-color:var(--bleu);width:17px;height:17px;flex-shrink:0}#quote-form .consent a{text-decoration:underline}#quote-form .button{display:flex;align-items:center;justify-content:space-between;width:100%;padding:15px 20px;background:var(--bleu);color:white;border:1px solid var(--bleu);border-radius:4px;font:600 16px/1.5 Inter,system-ui,sans-serif;cursor:pointer}#quote-form .button:hover{background:#315de0}#quote-form .button:disabled{opacity:.65;cursor:wait}#form-status{margin:15px 0 0;font-size:14px}#form-status[data-state=error]{color:#ffb4ae}#form-status[data-state=success]{color:#8fdab4}.trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}.contact .essai{display:block;margin-top:18px}.legal{max-width:850px;margin:auto;padding:65px 24px;min-height:75vh}.legal h1{margin:25px 0}.legal h2{font-size:25px;margin:30px 0 15px}.legal p{color:var(--papier-2)}body>header:not(.barre){display:flex;justify-content:space-between;padding:25px;max-width:1080px;margin:auto;border-bottom:1px solid var(--trait)}.logo{font:700 25px Inter,system-ui,sans-serif}.orange{color:var(--bleu-pale)}.eyebrow{font:13px monospace;color:var(--bleu-pale)}@media(max-width:640px){#quote-form{padding:20px}#quote-form .form-grid{grid-template-columns:1fr;gap:0}.barre nav{gap:13px;flex-wrap:wrap}.barre .wrap{height:auto;min-height:65px;padding-top:12px;padding-bottom:12px}.barre nav a{font-size:13px}.adresse{overflow-wrap:anywhere}}
[data-accent="accent-0"]{--teinte:var(--safranine);--niveau:64%}
[data-accent="accent-1"]{--teinte:var(--ambre);--niveau:48%}
[data-accent="accent-2"]{--teinte:var(--bleu);--niveau:72%}
[data-accent="accent-3"]{--t:var(--bleu)}
[data-accent="accent-4"]{--t:var(--ambre)}
[data-accent="accent-5"]{--t:var(--vert)}
/* Shared brand header across every page. */
body>header:not(.barre){align-items:center;gap:18px;flex-wrap:wrap}.sig img{flex:none;object-fit:contain}