/* Chantier Pro · chantierpro.io
   Charte : BRAND-chantier-pro.md. Accent rouge #C8202E, action marine #0F1B2A.
   Regle non negociable reprise ici : le bouton principal est marine, jamais rouge. */

:root{
  --rouge:#C8202E;
  --rouge-fonce:#8B1620;
  --rouge-pale:#FDECEA;
  --marine:#0F1B2A;
  --encre:#0F1B2A;
  --encre-2:#475569;
  --encre-3:#64748B;
  --ligne:#E3E8EF;
  --ligne-pale:#F1F5F9;
  --fond:#FFFFFF;
  --fond-2:#F5F7FA;
}

*{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--fond);
  color:var(--encre);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:16px;
  line-height:1.65;
}

h1,h2,h3,.display{font-family:Outfit,Inter,sans-serif;font-weight:700}
h1{font-size:clamp(30px,5vw,44px);line-height:1.12;letter-spacing:-.02em;margin:0 0 14px}
h2{font-size:clamp(21px,3vw,26px);line-height:1.25;letter-spacing:-.02em;margin:44px 0 12px}
h3{font-size:17px;margin:26px 0 8px}
p,ul,ol{margin:0 0 14px}
li{margin:5px 0}
a{color:var(--rouge);text-underline-offset:2px}
a:hover{color:var(--rouge-fonce)}

.enveloppe{max-width:860px;margin:0 auto;padding:0 20px}

/* Entete */
.tete{border-bottom:1px solid var(--ligne);background:var(--fond)}
.tete .enveloppe{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:16px;padding-bottom:16px;flex-wrap:wrap}
.tete img{height:38px;width:auto;display:block}
.menu{display:flex;gap:18px;font-size:14.5px}
.menu a{color:var(--encre-2);text-decoration:none}
.menu a:hover{color:var(--rouge)}

/* Hero */
.hero{background:var(--marine);color:#fff;padding:56px 0 52px}
.hero h1{color:#fff}
.hero p{color:rgba(255,255,255,.78);font-size:18px;max-width:620px}
.hero .pro{color:#E8535F}

.btn{
  display:inline-block;background:var(--marine);color:#fff;text-decoration:none;
  font-weight:600;font-size:15px;padding:13px 22px;border-radius:9px;border:1px solid var(--marine);
}
.btn:hover{background:#1b2d45;color:#fff}
.hero .btn{background:#fff;color:var(--marine);border-color:#fff}
.hero .btn:hover{background:#eef2f7;color:var(--marine)}

/* Contenu */
.contenu{padding:44px 0 72px}
.maj{color:var(--encre-3);font-size:14px;margin:-6px 0 28px}

.encadre{background:var(--fond-2);border:1px solid var(--ligne);border-radius:12px;padding:18px 20px;margin:0 0 20px}
.encadre p:last-child{margin-bottom:0}
.encadre.accent{background:var(--rouge-pale);border-color:#F3C9C6}

.tableau{overflow-x:auto;margin:0 0 18px;border:1px solid var(--ligne);border-radius:12px}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:14.5px}
th,td{padding:11px 13px;border-bottom:1px solid var(--ligne);vertical-align:top;text-align:left}
th{background:var(--fond-2);font-weight:600}
tr:last-child td{border-bottom:0}

.cartes{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:0 0 20px}
.carte{border:1px solid var(--ligne);border-radius:12px;padding:18px 20px}
.carte h3{margin:0 0 6px}
.carte p{margin:0;color:var(--encre-2);font-size:15px}

.surtitre{font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--rouge);margin:0 0 8px}

.sommaire{columns:2;column-gap:30px;font-size:15px;padding-left:20px}

/* Pied */
.pied{border-top:1px solid var(--ligne);padding:26px 0 44px;color:var(--encre-3);font-size:14px}
.pied .enveloppe{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.pied a{color:var(--encre-2);text-decoration:none}
.pied a:hover{color:var(--rouge)}

@media(max-width:620px){
  .sommaire{columns:1}
  .hero{padding:42px 0 40px}
  .tete .enveloppe{padding-top:13px;padding-bottom:13px}
}