:root{
  --navy-deep: #182430;
  --navy-mid: #2C3E50;
  --orange: #DD7230;
  --orange-light: #E8935C;
  --paper: #F7F5F1;
  --paper-card: #FFFFFF;
  --ink: #182430;
  --ink-soft: #5B6B78;
  --line: rgba(24,36,48,0.12);
  --line-light: rgba(255,255,255,0.18);
  --radius: 4px;
  --max: 1120px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'IBM Plex Sans', sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:'Space Grotesk', sans-serif;
  margin:0;
  letter-spacing:-0.01em;
}
.mono{font-family:'IBM Plex Mono', monospace; letter-spacing:0.02em;}
a{color:inherit;}
.wrap{max-width:var(--max); margin:0 auto; padding:0 28px;}
img{max-width:100%; display:block;}
:focus-visible{outline:2px solid var(--orange); outline-offset:2px;}

/* dimension-line signature */
.dim-line{display:flex; align-items:center; gap:10px; color:var(--orange);}
.dim-line .label{font-family:'IBM Plex Mono', monospace; font-size:12.5px; letter-spacing:0.12em; text-transform:uppercase; color:var(--orange); white-space:nowrap;}
.dim-rule{flex:1; height:1px; background:var(--orange); min-width:24px;}

/* header */
header{position:sticky; top:0; z-index:50; background:rgba(247,245,241,0.94); backdrop-filter:blur(8px); border-bottom:1px solid var(--line);}
.nav{display:flex; align-items:center; justify-content:space-between; padding:16px 0; gap:20px;}
.logo{font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:21px; display:flex; align-items:baseline; gap:2px; text-decoration:none; flex-shrink:0;}
.logo .perfi{color:var(--navy-mid);} .logo .tech{color:var(--orange);}
nav.links{display:none; gap:26px; font-size:14px; font-weight:500;}
@media(min-width:960px){nav.links{display:flex;}}
nav.links a{text-decoration:none; color:var(--ink); padding:4px 0;}
nav.links a:hover{color:var(--orange);}
nav.links a.current{color:var(--orange); border-bottom:2px solid var(--orange);}
.nav-right{display:flex; align-items:center; gap:16px;}
.btn{font-family:'IBM Plex Sans', sans-serif; font-weight:600; font-size:14px; padding:11px 20px; border-radius:var(--radius); border:1px solid transparent; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:8px;}
.btn-primary{background:var(--orange); color:#fff;}
.btn-primary:hover{background:var(--navy-mid);}
.btn-outline{border-color:var(--navy-mid); color:var(--navy-mid); background:transparent;}
.btn-outline:hover{border-color:var(--orange); color:var(--orange);}
.btn-sm{padding:9px 16px; font-size:13px;}

/* breadcrumb */
.breadcrumb{font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--ink-soft); padding:18px 0 0;}
.breadcrumb a{text-decoration:none; color:var(--ink-soft);}
.breadcrumb a:hover{color:var(--orange);}

/* hero (page-level, not just homepage) */
.page-hero{padding:56px 0 52px; border-bottom:1px solid var(--line); background:var(--paper-card);}
.page-hero .eyebrow{font-family:'IBM Plex Mono', monospace; font-size:12.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--orange); margin-bottom:14px;}
.page-hero h1{font-size:clamp(28px,4.2vw,42px); color:var(--navy-mid); max-width:20ch; line-height:1.12;}
.page-hero .lede{font-size:16.5px; color:var(--ink-soft); max-width:60ch; margin-top:16px;}

/* homepage hero */
.hero{padding:80px 0 64px;}
.hero-grid{display:grid; grid-template-columns:1.15fr 0.85fr; gap:56px; align-items:end;}
@media(max-width:840px){.hero-grid{grid-template-columns:1fr;}}
.eyebrow{font-family:'IBM Plex Mono', monospace; font-size:12.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--orange); margin-bottom:18px;}
.hero h1{font-size:clamp(32px,5.6vw,54px); line-height:1.06; color:var(--navy-mid); max-width:15ch;}
.hero-sub{font-size:17px; color:var(--ink-soft); max-width:46ch; margin-top:20px;}
.hero-actions{display:flex; gap:14px; margin-top:30px; flex-wrap:wrap;}
.hero-note{font-family:'IBM Plex Mono', monospace; font-size:12.5px; color:var(--ink-soft); margin-top:22px;}
.hero-panel{border:1px solid var(--line); border-radius:var(--radius); background:var(--paper-card); padding:24px;}
.hero-panel .dim-line{margin-bottom:16px;}
.hero-scopes{list-style:none; margin:0; padding:0; display:grid; gap:11px;}
.hero-scopes li{display:flex; align-items:center; gap:10px; font-size:14px; color:var(--ink);}
.hero-scopes li .tick{color:var(--orange); font-family:'IBM Plex Mono',monospace; font-size:13px;}

/* sections */
section{padding:72px 0;}
.section-head{margin-bottom:40px; max-width:640px;}
.section-head h2{font-size:clamp(24px,3.2vw,34px); color:var(--navy-mid); margin-top:12px;}
.section-head p{color:var(--ink-soft); margin-top:12px; font-size:15.5px;}
section.on-dark{background:var(--navy-deep); color:#fff;}
section.on-dark .section-head h2{color:#fff;}
section.on-dark .section-head p{color:rgba(255,255,255,0.62);}
section.band{padding:48px 0; background:var(--navy-mid);}

/* situations band */
.situations-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:0;}
@media(max-width:800px){.situations-grid{grid-template-columns:1fr; gap:20px;}}
.situations-grid div{padding:0 26px; border-right:1px solid rgba(255,255,255,0.14);}
.situations-grid div:first-child{padding-left:0;}
.situations-grid div:last-child{border-right:none;}
@media(max-width:800px){.situations-grid div{border-right:none; padding:0 0 16px; border-bottom:1px solid rgba(255,255,255,0.14);}}
.situations-grid p{margin:0; color:#fff; font-size:15.5px; line-height:1.55;}

/* card grids */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:20px;}
@media(max-width:860px){.grid-3, .grid-2{grid-template-columns:1fr;}}
.card{background:var(--paper-card); border:1px solid var(--line); border-top:3px solid var(--orange); border-radius:var(--radius); padding:28px 26px;}
.card h3{font-size:18px; color:var(--navy-mid); margin-bottom:10px;}
.card p{font-size:14.5px; color:var(--ink-soft); margin:0 0 14px;}
.card ul{margin:0 0 14px; padding-left:18px; font-size:14px; color:var(--ink-soft);}
.card ul li{margin-bottom:5px;}
.card a.card-link{font-size:13.5px; font-weight:600; color:var(--orange); text-decoration:none;}
.card a.card-link:hover{text-decoration:underline;}

/* method / process timeline */
.process-line{position:relative; padding-left:38px;}
.process-line::before{content:""; position:absolute; left:11px; top:6px; bottom:6px; width:1px; background:linear-gradient(to bottom, var(--orange-light), rgba(232,147,92,0.15));}
.process-step{position:relative; padding-bottom:30px;}
.process-step:last-child{padding-bottom:0;}
.process-step::before{content:""; position:absolute; left:-38px; top:2px; width:9px; height:9px; border-radius:50%; background:var(--orange-light); border:2px solid var(--navy-deep); box-shadow:0 0 0 1px var(--orange-light);}
.process-step .mono{font-size:12px; color:var(--orange-light);}
.process-step h3{font-size:18px; margin:6px 0 4px; color:#fff;}
.process-step p{margin:0; font-size:14.5px; color:rgba(255,255,255,0.6);}

/* FAQ accordion */
.faq-list{display:grid; gap:12px;}
.faq{border:1px solid var(--line); border-radius:var(--radius); background:var(--paper-card); overflow:hidden;}
.faq-btn{width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 20px; background:transparent; border:none; cursor:pointer; text-align:left; font-family:inherit; font-size:15px; font-weight:600; color:var(--navy-mid);}
.faq-chevron{width:16px; height:16px; flex-shrink:0; transition:transform .25s ease; color:var(--ink-soft);}
.faq.open .faq-chevron{transform:rotate(180deg); color:var(--orange);}
.faq-body{max-height:0; overflow:hidden; transition:max-height .3s ease;}
.faq-body-inner{padding:0 20px 20px; font-size:14.5px; color:var(--ink-soft);}

/* placeholder blocks (content to fill) */
.todo-block{border:1px dashed var(--orange); border-radius:var(--radius); background:#FFF8F3; padding:20px 22px; font-size:13.5px; color:var(--ink-soft);}
.todo-block strong{color:var(--orange); font-family:'IBM Plex Mono', monospace; text-transform:uppercase; font-size:11.5px; letter-spacing:0.06em; display:block; margin-bottom:6px;}

/* contact form */
form{display:grid; gap:16px;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media(max-width:520px){.form-row{grid-template-columns:1fr;}}
label{font-size:12.5px; font-family:'IBM Plex Mono', monospace; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-soft); margin-bottom:6px; display:block;}
input, select, textarea{width:100%; font-family:'IBM Plex Sans', sans-serif; font-size:15px; padding:12px 14px; border:1px solid var(--line); border-radius:var(--radius); background:#fff; color:var(--ink);}
input:focus, select:focus, textarea:focus{outline:none; border-color:var(--orange); box-shadow:0 0 0 3px rgba(221,114,48,0.12);}
textarea{resize:vertical; min-height:120px;}
.form-note{font-size:13px; color:var(--ink-soft); margin-top:-4px;}
.checkbox-row{display:flex; align-items:flex-start; gap:9px; font-size:13.5px; color:var(--ink-soft);}
.checkbox-row input{width:auto; margin-top:2px;}
.form-success{display:none; background:#EFF7EF; border:1px solid #BFE3BF; color:#2C5B2C; padding:16px 18px; border-radius:var(--radius); font-size:14.5px;}

/* configurateur détaillé de mission (facultatif, dans contact.html) */
.detail-toggle{
  display:flex; align-items:center; gap:8px;
  font-family:'IBM Plex Mono', monospace; font-size:12.5px; text-transform:uppercase; letter-spacing:0.06em;
  color:var(--orange); background:transparent; border:1px dashed var(--orange); border-radius:var(--radius);
  padding:12px 16px; cursor:pointer; width:100%; text-align:left;
}
.detail-toggle:hover{background:rgba(221,114,48,0.06);}
.detail-toggle .chev{transition:transform .25s ease; margin-left:auto;}
.detail-toggle.open .chev{transform:rotate(180deg);}
.detail-config{display:none; margin-top:14px;}
.detail-config.open{display:block;}
.detail-block{display:none; border:1px solid var(--line); border-left:3px solid var(--orange); border-radius:0 var(--radius) var(--radius) 0; background:var(--paper); padding:18px 20px; margin-top:-2px;}
.detail-block.active{display:block;}
.detail-group{margin-bottom:16px;}
.detail-group:last-child{margin-bottom:0;}
.detail-legend{font-family:'IBM Plex Mono', monospace; font-size:11.5px; text-transform:uppercase; letter-spacing:0.06em; color:var(--navy-mid); margin-bottom:8px; display:block;}
.detail-subhead{font-family:'Space Grotesk', sans-serif; font-size:14.5px; font-weight:600; color:var(--navy-mid); margin:18px 0 10px; padding-top:14px; border-top:1px dashed var(--line);}
.detail-subhead:first-child{margin-top:0; padding-top:0; border-top:none;}
.check-row{display:flex; align-items:flex-start; gap:9px; font-size:14px; color:var(--ink); margin-bottom:8px; cursor:pointer;}
.check-row:last-child{margin-bottom:0;}
.check-row input{width:auto; margin:2px 0 0; padding:0; accent-color:var(--orange); flex-shrink:0;}
.check-row span{line-height:1.35;}
.sub-indent{margin:8px 0 4px 24px; padding:10px 14px; border-left:2px solid var(--line); display:none;}
.sub-indent.active{display:block;}
.qty-inline{display:flex; align-items:center; gap:10px; margin-bottom:8px;}
.qty-inline input[type="text"]{width:110px; padding:8px 10px; font-size:14px;}
#favoris-block{display:none; margin-top:10px;}
#favoris-list{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:6px;}

/* footer */
footer{padding:32px 0; border-top:1px solid var(--line); font-size:13px; color:var(--ink-soft);}
footer .wrap{display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px 24px;}
footer a{text-decoration:none; color:var(--ink-soft);}
footer a:hover{color:var(--orange);}
footer .foot-links{display:flex; gap:18px; flex-wrap:wrap;}

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