/* Atelier Soumissions — feuille de style commune aux pages du site (index, exemple, donnees).
   Identité du 01.11.2026 : un dossier lu au surligneur. L'encre pour le texte et les blocs sombres, le jaune du
   surligneur pour ce qui compte, le rouge du crayon pour ce qui peut écarter une offre.
   Polices hébergées avec le site (fonts/, licence SIL Open Font License) ; aucune ressource chargée d'un autre site. */
@font-face{font-family:"Archivo";src:url(fonts/archivo-latin-wght-normal.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(fonts/jetbrains-mono-latin-500-normal.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
:root{
  --ink:#1B2124; --ink-2:#2E373B; --text:#323B3F; --muted:#586166; --line:#DCE0E2; --soft:#F2F3F1; --bg:#FFFFFF;
  --yellow:#FFD84A; --yellow-soft:#FFF6CC; --red:#B8321F;
  --sans:"Archivo","Helvetica Neue",Arial,system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
  --radius:8px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.62 var(--sans);-webkit-text-size-adjust:100%}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:var(--ink);text-decoration-thickness:1px;text-underline-offset:3px}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:var(--sans);color:var(--ink);margin:0}
h2{font-size:clamp(1.75rem,3.4vw,2.55rem);line-height:1.08;font-weight:780;letter-spacing:-.022em;margin:0 0 14px;max-width:820px}
h3{font-size:1.12rem;line-height:1.3;font-weight:700;margin:0 0 6px}
.eyebrow{display:flex;align-items:center;gap:10px;font:500 .74rem/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 16px}
.eyebrow::before{content:"";width:24px;height:10px;flex:none;background:url(img/surligneur.svg) 0 0/100% 100% no-repeat}
.sub{color:var(--muted);margin:0 0 36px;max-width:700px;font-size:1.04rem}
/* Le trait de surligneur : sous le bas des lettres, comme à la main ; il se répète sur chaque ligne. */
.hl{background:url(img/surligneur.svg) 0 78%/100% 55% no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .1em;margin:0 -.1em}
/* Les renvois au dossier (« cahier des charges, p. 9 ») : une étiquette de classeur. */
.src{display:inline-block;max-width:100%;font:400 .74em/1.5 var(--mono);color:var(--muted);background:var(--soft);border-radius:3px;padding:.12em .45em}
.note .src{font-size:.92em}
/* Ce qui ne se coupe pas en fin de ligne : un numéro, un courriel, une adresse de site. */
.nowrap,a[href^="mailto:"],a[href^="tel:"]{white-space:nowrap}

/* En-tête */
.top{position:sticky;top:0;z-index:5;background:rgba(255,255,255,.97);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:70px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.brand svg{flex:none}
.brand b{display:block;font-weight:500;font-size:1.17rem;line-height:1.1;letter-spacing:-.012em}
.brand b span{font-weight:800;background:url(img/surligneur.svg) 0 92%/100% 40% no-repeat}
.brand small{display:block;font:500 .63rem/1.2 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-top:5px}
nav{display:flex;gap:24px;align-items:center}
nav a{text-decoration:none;font-size:.94rem;font-weight:500;color:var(--muted)}
nav a:hover{color:var(--ink);text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:3px}
nav a.btn-nav{color:#fff;background:var(--ink);border-radius:6px;padding:9px 16px;font-weight:600}
nav a.btn-nav:hover{background:var(--ink-2);text-decoration:none}

/* Ouverture */
.hero{border-bottom:1px solid var(--line);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);gap:40px;align-items:center;padding-top:68px;padding-bottom:36px}
.hero h1{font-size:clamp(2.15rem,4.5vw,3.4rem);line-height:1.05;font-weight:780;letter-spacing:-.028em;margin:0 0 24px}
.hero .lead{font-size:clamp(1.04rem,1.8vw,1.18rem);color:var(--text);max-width:600px;margin:0 0 14px}
.hero .lead b{font-weight:650;color:var(--ink)}
.hero-art{margin:0;justify-self:end;width:100%;max-width:520px}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;padding:14px 22px;border-radius:7px;font-weight:650;font-size:.98rem;line-height:1.2;text-align:center;border:1.5px solid transparent}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:var(--ink-2)}
.btn-line{border-color:var(--ink);color:var(--ink)}
.btn-line:hover{background:var(--yellow-soft)}
.btn-yellow{background:var(--yellow);color:var(--ink)}
.btn-yellow:hover{background:#FFCD1A}
.on-dark .btn-line{border-color:rgba(255,255,255,.62);color:#fff;background:var(--ink)}
.on-dark .btn-line:hover{background:var(--ink-2)}
.pledges{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px 28px;padding:26px 0 56px;border-top:2px solid var(--ink)}
.pledges div{font-size:.93rem;color:var(--muted)}
.pledges b{display:block;color:var(--ink);font-weight:700;font-size:1rem;margin-bottom:2px}

/* Sections */
section{padding:96px 0 0}
section.band{background:var(--soft);padding:88px 0 84px;margin-top:96px}
section.band + section{padding-top:96px}

/* Chiffres */
.figure{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:56px;align-items:start}
.figure > div:first-child{position:sticky;top:110px}
.big-wrap{position:relative;display:inline-block;padding:26px 44px 26px 30px;margin:-26px 0 0 -30px}
.big-wrap::after{content:"";position:absolute;inset:0;background:url(img/cercle.svg) 0 0/100% 100% no-repeat;pointer-events:none}
.big{font-size:clamp(3.8rem,8.6vw,5.9rem);line-height:.92;font-weight:800;letter-spacing:-.045em;color:var(--ink)}
.big-cap{color:var(--muted);font-size:1rem;margin:18px 0 0}
.big-cap b{color:var(--ink)}
table.data{width:100%;border-collapse:collapse;font-size:.95rem;font-variant-numeric:tabular-nums}
table.data caption{text-align:left;font-weight:700;padding-bottom:12px;color:var(--ink)}
table.data th{text-align:left;font:500 .68rem/1.35 var(--mono);color:var(--muted);letter-spacing:.05em;text-transform:uppercase;border-bottom:2px solid var(--ink);padding:8px 12px 8px 0;vertical-align:bottom}
table.data td{border-bottom:1px solid var(--line);padding:10px 12px 10px 0;vertical-align:middle}
table.data td.n,table.data th.n{text-align:right;white-space:nowrap;padding-right:16px;padding-left:12px}
table.data td.n:last-child,table.data th.n:last-child{padding-right:0}
table.metiers tbody tr:hover td{background:var(--yellow-soft)}
/* Chaque barre est un trait de surligneur, long de son pourcentage (1,5 px par point : contrôlé par l'outil). */
.bar{display:inline-block;height:12px;vertical-align:-1px;margin-right:10px;background:url(img/surligneur.svg) 0 0/100% 100% no-repeat}
.note{font-size:.84rem;color:var(--muted);line-height:1.6;margin-top:20px}

/* Prestations */
.services{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.service{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px 24px 20px;display:flex;flex-direction:column}
.service .head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16px}
.service .num{font:500 .78rem/1 var(--mono);color:var(--muted)}
.service p{margin:0 0 16px;color:var(--muted);font-size:.97rem}
.service .get{margin-top:auto;border-top:1px dashed #B9C0C3;padding-top:14px;font-size:.92rem;color:var(--text)}
.service .get b{display:table;font:500 .68rem/1.5 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink);background:url(img/surligneur.svg) 0 60%/100% 72% no-repeat;padding:0 5px;margin:0 0 5px -5px}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.box{border:1px solid var(--line);border-radius:var(--radius);padding:24px 26px;background:#fff}
.box ul{margin:12px 0 0;padding:0;list-style:none}
.box li{position:relative;padding-left:28px;margin:9px 0}
.box li::before{content:"";position:absolute;left:2px;top:.42em;width:12px;height:6px;border-left:2.4px solid var(--ink);border-bottom:2.4px solid var(--ink);transform:rotate(-45deg)}
.box.mine{background:var(--ink);border-color:var(--ink);color:#E4E8E9}
.box.mine h3{color:#fff}
.box.mine li::before{border-color:var(--yellow)}
.prose .box.mine li,.prose .box.mine p{color:#E4E8E9}
/* Ce que l'entreprise nous envoie : des cases encore vides, sur un dossier à fournir. */
.box.send{border:1.5px dashed #8A9397}
.box.send li::before{left:0;top:.36em;width:13px;height:13px;border:1.6px solid var(--ink);border-radius:2px;transform:none}
.box-note{margin:12px 0 0;color:var(--muted);font-size:.95rem}
.prose .box h3{margin-top:0}
.prose .box ul{padding-left:0}

/* Méthode : un planning en quatre étapes */
ol.steps{list-style:none;counter-reset:s;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 28px}
ol.steps li{counter-increment:s;position:relative;padding-bottom:4px}
ol.steps li::before{content:counter(s,decimal-leading-zero);position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:#fff;border:2px solid var(--ink);font:500 .88rem/1 var(--mono);color:var(--ink);margin-bottom:18px}
ol.steps li:first-child::before{background:var(--yellow)}
ol.steps li::after{content:"";position:absolute;left:44px;right:-28px;top:21px;height:2px;background:var(--ink)}
ol.steps li:last-child::after{display:none}
ol.steps b{display:block;margin-bottom:6px;font-size:1.05rem;font-weight:700}
ol.steps span{color:var(--muted);font-size:.96rem;display:block}

/* Exemple (aperçu) : une feuille de la note, avec son trombone */
.sample{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:center}
.doc{position:relative;background:#fff;border:1px solid #C9CFD2;border-radius:3px;box-shadow:10px 10px 0 #E1E5E6;padding:34px 32px 26px;font-size:.93rem;transform:rotate(-.6deg);margin:26px 10px 10px 0}
.doc::before{content:"";position:absolute;top:-26px;left:34px;width:16px;height:50px;background:url(img/trombone.svg) 0 0/100% 100% no-repeat}
.doc .doc-head{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:16px;font:500 .68rem/1.4 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.doc h3{font-size:1.06rem;margin-bottom:10px}
.flag{display:grid;grid-template-columns:98px minmax(0,1fr);gap:12px;margin:13px 0;align-items:start;color:var(--text)}
.flag i{justify-self:start;font:500 .64rem/1 var(--mono);font-style:normal;letter-spacing:.06em;text-transform:uppercase;padding:5px 7px 4px;border-radius:3px;margin-top:3px;border:1.5px solid currentColor;color:var(--ink)}
.flag i.x{color:var(--red);transform:rotate(-2.5deg)}
.flag i.p{background:var(--yellow);border-color:var(--yellow)}

/* Engagements */
.pledge-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 48px;counter-reset:e}
.pledge-grid div{border-top:2px solid var(--ink);padding-top:18px;counter-increment:e}
.pledge-grid h3::before{content:counter(e,decimal-leading-zero);display:block;font:500 .74rem/1 var(--mono);color:var(--muted);margin-bottom:12px}
.pledge-grid p{margin:0;color:var(--muted);font-size:.98rem;max-width:500px}

/* Contact */
.contact{position:relative;overflow:hidden;background:var(--ink);color:#fff;border-radius:12px;padding:54px 48px;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:36px;align-items:center}
.contact::after{content:"";position:absolute;right:-34px;bottom:-18px;width:380px;height:274px;background:url(img/chantier.svg) 0 0/100% 100% no-repeat;opacity:.13;pointer-events:none}
.contact > *{position:relative;z-index:1}
.contact h2{color:#fff}
.contact p{color:#C9CFD2;margin:0 0 18px;max-width:560px}
.contact address{font-style:normal;line-height:1.8;color:#fff}
.contact address a{color:#fff;text-decoration-color:var(--yellow);text-decoration-thickness:2px}
.contact .actions{flex-direction:column;align-items:stretch;margin-top:0}

/* Pied de page */
footer{margin-top:96px;border-top:1px solid var(--line);padding:34px 0 48px;color:var(--muted);font-size:.86rem}
footer .cols{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:flex-start}
footer .cols > div:first-child{display:flex;gap:14px;align-items:flex-start;max-width:640px}
footer svg{flex:none;margin-top:2px}
footer p{margin:0 0 6px}
footer a{color:var(--muted)}
footer b{color:var(--ink)}

/* Pages de texte (exemple, données) */
.page-head{background:var(--soft);border-bottom:1px solid var(--line)}
.page-head .wrap{padding-top:60px;padding-bottom:48px}
.page-head h1{font-size:clamp(2rem,4.4vw,3rem);line-height:1.06;font-weight:780;letter-spacing:-.028em;margin:0 0 16px;max-width:880px}
.page-head p{color:var(--text);max-width:760px;margin:0;font-size:1.04rem}
main.prose{padding-top:12px}
main.prose > *{max-width:800px}
.prose h2{font-size:clamp(1.35rem,2.6vw,1.7rem);margin-top:52px;margin-bottom:12px}
.prose h3{margin-top:28px}
.prose p,.prose li{color:var(--text)}
.prose ul{padding-left:22px}
.prose li{margin:8px 0}
.prose li::marker{color:var(--muted)}
.prose a:not(.btn):hover{background:var(--yellow-soft)}
.callout{background:var(--yellow-soft);border:1px solid #EFD77A;border-radius:var(--radius);padding:20px 24px;margin:36px 0 12px}
.callout p{margin:0}
.found{counter-reset:f;list-style:none;padding:0}
.prose .found li{counter-increment:f;position:relative;padding:18px 20px 18px 64px;border:1px solid var(--line);border-radius:var(--radius);margin:12px 0;background:#fff}
.found li::before{content:counter(f);position:absolute;left:18px;top:16px;width:30px;height:30px;border:2px solid var(--red);color:var(--red);border-radius:50%;display:grid;place-items:center;font:500 .85rem/1 var(--mono);transform:rotate(-6deg)}
/* Même code que l'extrait de l'accueil : rouge, ce qui peut écarter l'offre ; jaune, ce qui coûte des points. */
.found li.pts::before{border-color:var(--ink);background:var(--yellow);color:var(--ink)}

@media (max-width:940px){
  .hero-grid{grid-template-columns:minmax(0,1fr);padding-top:52px;gap:28px}
  .hero-art{justify-self:start;max-width:400px}
  .services{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pledges{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .figure,.sample,.contact,.two,.pledge-grid,.services{grid-template-columns:minmax(0,1fr)}
  .figure{gap:34px}
  .figure > div:first-child{position:static}
  .contact::after{content:none}
  .sample{gap:20px}
  .contact{padding:34px 24px}
  section{padding-top:68px}
  section.band{padding:60px 0 56px;margin-top:68px}
  section.band + section{padding-top:68px}
  footer{margin-top:68px}
  ol.steps{grid-template-columns:minmax(0,1fr);gap:0}
  ol.steps li{padding:0 0 26px 64px;min-height:44px}
  ol.steps li::before{position:absolute;left:0;top:-2px;margin:0}
  ol.steps li::after{left:21px;right:auto;top:42px;bottom:0;width:2px;height:auto}
}
@media (max-width:620px){
  body{font-size:16.5px}
  .wrap{padding-left:18px;padding-right:18px}
  .hero-art{max-width:340px;justify-self:center}
  nav a:not(.btn-nav){display:none}
  .pledges{grid-template-columns:minmax(0,1fr)}
  table.metiers th:nth-child(4),table.metiers td:nth-child(4){display:none}
  table.metiers td.n:nth-child(3),table.metiers th.n:nth-child(3){padding-right:0}
  table.data th.n{white-space:normal}
  .doc{padding:28px 20px 20px;margin-right:8px}
  .flag{grid-template-columns:minmax(0,1fr);gap:6px}
  .actions .btn{flex:1 1 auto}
}
@media (max-width:480px){
  table.data .bar{display:none}
}
@media (max-width:420px){
  .brand small{display:none}
}