@font-face{font-family:"Brico";font-weight:600;font-display:swap;src:url(fonts/bricolage-grotesque-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Brico";font-weight:600;font-display:swap;src:url(fonts/bricolage-grotesque-latin-ext-600-normal.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Fig";font-weight:400;font-display:swap;src:url(fonts/figtree-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Fig";font-weight:400;font-display:swap;src:url(fonts/figtree-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Fig";font-weight:500;font-display:swap;src:url(fonts/figtree-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Fig";font-weight:500;font-display:swap;src:url(fonts/figtree-latin-ext-500-normal.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Fig";font-weight:600;font-display:swap;src:url(fonts/figtree-latin-600-normal.woff2) format("woff2")}

:root{
  --encre:#1F2328; --elan:#0F6B66; --nuit:#12201F; --brume:#EEF3F2; --blanc:#FFFFFF;
  --gris:#4A5157; --elan-clair:#6CCFC4; --gris-clair:#B9C9C6; --trait:#D5E0DE;
  --titre:"Brico", "Trebuchet MS", sans-serif; --texte:"Fig", "Segoe UI", Arial, sans-serif;
  --mesure:68ch; --large:1160px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--blanc);color:var(--encre);font:400 1.0625rem/1.6 var(--texte)}
img,svg{display:block;max-width:100%}
a{color:var(--elan);text-underline-offset:.18em}
a:hover{color:var(--encre)}
:focus-visible{outline:3px solid var(--elan);outline-offset:3px;border-radius:4px}
h1,h2,h3{font-family:var(--titre);font-weight:600;line-height:1.08;letter-spacing:-.015em;margin:0}
h1{font-size:clamp(2.5rem,5.6vw,4.4rem)}
h2{font-size:clamp(1.9rem,3.6vw,2.75rem);max-width:22ch}
h3{font-size:1.35rem;line-height:1.2}
p{margin:0 0 1em;max-width:var(--mesure)}
.wrap{width:100%;max-width:var(--large);margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-999px;top:8px;background:var(--encre);color:#fff;padding:8px 14px;border-radius:6px;z-index:10}
.skip:focus{left:8px}

/* En-tête */
.top{position:sticky;top:0;z-index:5;background:rgba(255,255,255,.94);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--trait)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:68px;gap:20px}
.top .logo img{width:150px;height:auto}
.top nav{display:flex;align-items:center;gap:26px;font-weight:500;font-size:.98rem}
.top nav a{color:var(--encre);text-decoration:none}
.top nav a:hover{color:var(--elan)}
.top nav a.btn,.top nav a.btn:hover{color:#fff}
.btn{display:inline-block;font:600 1rem/1 var(--texte);text-decoration:none;padding:15px 22px;border-radius:999px;background:var(--elan);color:#fff;border:2px solid var(--elan);transition:background .15s,color .15s}
.btn:hover{background:var(--encre);border-color:var(--encre);color:#fff}
.btn.clair{background:transparent;color:var(--encre);border-color:var(--encre)}
.btn.clair:hover{background:var(--encre);color:#fff}
.top .btn{padding:11px 18px;font-size:.95rem}
@media (max-width:860px){.top nav .lien{display:none}.top .logo img{width:124px}}

/* Héros */
.hero{background:var(--brume);padding:72px 0 84px;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero h1{max-width:15ch}
.hero .chapo{font-size:1.25rem;line-height:1.55;color:var(--gris);margin:26px 0 34px;max-width:46ch}
.hero .actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.hero .note{font-size:.95rem;color:var(--gris);margin:18px 0 0}
@media (max-width:900px){.hero{padding:48px 0 60px}.hero .wrap{grid-template-columns:1fr;gap:44px}}

/* La pile de tâches : l'élément marquant */
.pile{background:var(--blanc);border-radius:22px;padding:26px 26px 18px;box-shadow:0 1px 0 var(--trait),0 24px 48px -28px rgba(18,32,31,.35);max-width:470px;justify-self:end;width:100%}
.pile .entete{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px}
.pile .entete strong{font:600 1.15rem/1.2 var(--titre)}
.pile .entete span{font-size:.9rem;color:var(--gris)}
.pile ul{list-style:none;margin:0;padding:0}
.pile li{display:grid;grid-template-columns:26px 1fr auto;gap:12px;align-items:center;padding:13px 0;border-top:1px solid var(--trait)}
.pile .case{width:22px;height:22px;border-radius:7px;border:2px solid var(--trait);display:grid;place-items:center;transition:background .3s,border-color .3s}
.pile .case svg{width:13px;height:13px;opacity:0;transition:opacity .3s}
.pile .tache{font-weight:500;line-height:1.35}
.pile .tache small{display:block;font-weight:400;color:var(--gris);font-size:.86rem}
.pile .etat{font-size:.82rem;font-weight:600;padding:5px 10px;border-radius:999px;background:#F6E9E4;color:#8A3B22;white-space:nowrap;transition:background .3s,color .3s}
.pile li.fait .case{background:var(--elan);border-color:var(--elan)}
.pile li.fait .case svg{opacity:1}
.pile li.fait .etat{background:#DDEFEC;color:var(--elan)}
.pile .pied{margin:12px 0 0;padding-top:14px;border-top:1px solid var(--trait);font-size:.92rem;color:var(--gris);display:flex;justify-content:space-between;gap:10px}
.pile .pied b{color:var(--elan);font-weight:600}
@media (max-width:900px){.pile{justify-self:stretch;max-width:none}}

/* Sections */
.bloc{padding:96px 0}
.bloc .intro{color:var(--gris);font-size:1.15rem;margin-top:18px}
@media (max-width:700px){.bloc{padding:64px 0}}

/* Constat */
.constat{background:var(--blanc);padding:64px 0;border-bottom:1px solid var(--trait)}
.constat p{font:600 clamp(1.35rem,2.6vw,1.9rem)/1.35 var(--titre);max-width:34ch;margin:0;letter-spacing:-.01em}
.constat p span{color:var(--gris)}

/* Services */
.services .liste{margin-top:56px;border-top:2px solid var(--encre)}
.service{display:grid;grid-template-columns:90px minmax(0,1fr) minmax(0,1.15fr);gap:32px;padding:40px 0;border-bottom:1px solid var(--trait)}
.service .lettre{font:600 3.4rem/1 var(--titre);color:var(--elan)}
.service h3{margin-bottom:12px;font-size:1.6rem}
.service .resume{color:var(--gris);margin:0}
.service ul{margin:0;padding:0;list-style:none}
.service li{padding:8px 0 8px 26px;position:relative;line-height:1.5}
.service li::before{content:"";position:absolute;left:0;top:.95em;width:12px;height:2px;background:var(--elan)}
@media (max-width:860px){.service{grid-template-columns:1fr;gap:14px;padding:32px 0}.service .lettre{font-size:2.6rem}}

/* Méthode */
.methode{background:var(--brume)}
.etapes{list-style:none;margin:56px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0;counter-reset:e}
.etapes li{padding:0 32px 0 0;position:relative}
.etapes li + li{padding-left:32px;border-left:1px solid var(--trait)}
.etapes .num{font:600 1rem/1 var(--titre);display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--elan);color:#fff;margin-bottom:22px}
.etapes h3{margin-bottom:10px}
.etapes p{color:var(--gris);margin:0}
@media (max-width:860px){.etapes{grid-template-columns:1fr;gap:34px}.etapes li,.etapes li + li{padding:0;border:0}}

/* Confiance */
.confiance{background:var(--nuit);color:#fff}
.confiance h2{color:#fff}
.confiance .intro{color:var(--gris-clair)}
.engagements{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:44px 64px;margin-top:56px}
.engagements h3{color:var(--elan-clair);margin-bottom:10px;font-size:1.25rem}
.engagements p{color:var(--gris-clair);margin:0}
@media (max-width:760px){.engagements{grid-template-columns:1fr;gap:32px}}

/* À propos */
.apropos .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:64px;align-items:start}
.apropos .mono{width:88px;height:88px;margin-bottom:26px}
.apropos .texte p{font-size:1.12rem}
.apropos .faits{list-style:none;margin:28px 0 0;padding:0;border-top:1px solid var(--trait)}
.apropos .faits li{padding:14px 0;border-bottom:1px solid var(--trait);display:flex;justify-content:space-between;gap:20px}
.apropos .faits span{color:var(--gris)}
.apropos .faits strong{font-weight:600;text-align:right}
@media (max-width:860px){.apropos .wrap{grid-template-columns:1fr;gap:28px}}

/* Contact */
.contact{background:var(--brume);text-align:left}
.contact .carte{background:var(--blanc);border-radius:22px;padding:56px;display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:center}
.contact h2{max-width:18ch}
.contact .coords{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.contact .coords .mail{font:600 1.2rem/1.3 var(--titre);color:var(--encre);text-decoration:none;word-break:break-word}
.contact .coords .mail:hover{color:var(--elan)}
.contact .coords small{color:var(--gris);font-size:.92rem}
@media (max-width:860px){.contact .carte{grid-template-columns:1fr;padding:36px 24px;gap:28px}}

/* Pied de page */
.pied-site{background:var(--nuit);color:var(--gris-clair);padding:48px 0;font-size:.95rem}
.pied-site .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px}
.pied-site img{width:140px}
.pied-site nav{display:flex;flex-wrap:wrap;gap:22px}
.pied-site a{color:#fff}
.pied-site a:hover{color:var(--elan-clair)}

/* Pages légales */
.legal{padding:64px 0 96px}
.legal .wrap{max-width:820px}
.legal h1{font-size:clamp(2rem,4vw,2.8rem);margin-bottom:12px}
.legal h2{font-size:1.4rem;margin:44px 0 12px;max-width:none}
.legal p,.legal li{color:var(--encre)}
.legal .maj{color:var(--gris)}
.legal dl{display:grid;grid-template-columns:200px 1fr;gap:8px 20px;margin:0}
.legal dt{color:var(--gris)}
.legal dd{margin:0}
@media (max-width:600px){.legal dl{grid-template-columns:1fr;gap:2px}.legal dd{margin-bottom:10px}}

/* Textes justifiés (paragraphes et listes) sur écran large, avec césure française pour éviter les grands blancs.
   Sur téléphone, les colonnes sont trop étroites : on garde un alignement à gauche, plus lisible. */
@media (min-width:700px){
  .hero .chapo,.hero .note,.bloc .intro,.service .resume,.service li,.etapes p,.engagements p,
  .apropos .texte p,.contact .intro,.legal p,.legal li,.legal dd{
    text-align:justify;hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:7 3 3
  }
}