@font-face{font-family:"Host Grotesk";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/host-grotesk-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Host Grotesk";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/host-grotesk-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Host Grotesk";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/host-grotesk-latin-600-normal.woff2") format("woff2")}

:root{--encre:#111316;--gris:#5A5F66;--surface:#F5F5F2;--filet:#E2E2DD;--bleu:#1E46D2}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;font-family:"Host Grotesk",system-ui,sans-serif;color:var(--encre);background:#fff;font-size:18px;line-height:1.5}
a{color:var(--bleu)}
a:focus-visible,button:focus-visible{outline:3px solid var(--bleu);outline-offset:3px}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,p,figure,ul,ol,dl,dd{margin:0}
h1,h2,h3{font-weight:600}
h1{font-size:clamp(40px,5vw,60px);line-height:1.05;letter-spacing:-.02em;text-wrap:balance}
h2{font-size:clamp(28px,3.2vw,38px);line-height:1.15;letter-spacing:-.01em;text-wrap:balance}
h3{font-size:23px;line-height:1.2}
[id]{scroll-margin-top:16px}
.saut{position:absolute;left:-9999px;top:0;background:var(--encre);color:#fff;padding:12px 16px;z-index:30}
.saut:focus{left:8px;top:8px}

.cont{max-width:1200px;margin:0 auto;padding-left:clamp(20px,4vw,48px);padding-right:clamp(20px,4vw,48px)}
.fond{background:var(--surface)}
.bloc{padding-top:clamp(44px,6vw,68px);padding-bottom:clamp(44px,6vw,68px)}
.bloc>h2{margin-bottom:clamp(22px,2.6vw,30px)}

/* en-tête */
.entete{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:16px;padding-bottom:16px}
.marque{display:inline-flex;align-items:center;min-height:44px;font-size:20px;font-weight:600;color:var(--encre);text-decoration:none;white-space:nowrap}

/* boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 24px;font-size:18px;font-weight:600;line-height:1.2;text-decoration:none;background:var(--bleu);color:#fff}
.btn:hover{background:#1739AD}
.btn--gris{background:var(--surface);color:var(--encre)}
.btn--gris:hover{background:#EAEAE5}
.btn--sombre{background:var(--encre);color:#fff;min-height:44px;padding:0 16px;font-size:16px;white-space:nowrap}
.btn--sombre:hover{background:#2B2F35}
.btn--blanc{background:#fff;color:var(--encre)}
.btn--blanc:hover{background:#EEF1FB}

/* haut de page */
.heros{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:40px;align-items:center;padding-top:clamp(20px,3vw,36px);padding-bottom:clamp(44px,6vw,68px)}
.surtitre{font-size:16px;font-weight:500;line-height:1.35;color:var(--gris);margin-bottom:18px}
.chapo{font-size:clamp(18px,1.6vw,20px);line-height:1.45;color:var(--gris);margin:20px 0 28px;max-width:46ch}
.actions{display:flex;flex-wrap:wrap;gap:12px}
.zone{margin-top:20px;font-size:16px;color:var(--gris)}
.cadre{background:var(--surface);padding:clamp(14px,2.2vw,28px)}
figcaption{font-size:15px;color:var(--gris);margin-top:10px}

/* portes des métiers */
.portes{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.porte{display:flex;flex-direction:column;gap:12px;background:#fff;padding:14px;color:var(--encre);text-decoration:none}
.porte strong{font-size:20px;font-weight:600;line-height:1.15}
.porte-texte{display:flex;flex-direction:column;gap:8px}
.voir{font-size:16px;font-weight:600;color:var(--bleu)}
.porte:hover .voir{text-decoration:underline}

/* exemples d'une page métier */
.exemples{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:20px}
.exemple{background:#fff;padding:14px}
a.exemple{display:block;color:var(--encre);text-decoration:none}
a.exemple strong{display:block;margin-top:10px;font-weight:600}
a.exemple:hover .voir{text-decoration:underline}
.exemple img{width:100%;aspect-ratio:1000/625;object-fit:contain;border:1px solid rgba(17,19,22,.14)}
.note{margin-top:16px;font-size:15px;color:var(--gris)}

/* trois arguments */
.trois{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:28px}
.trois h3{margin-bottom:8px}
.trois p{font-size:17px;color:var(--gris)}

/* étapes */
.etapes{display:flex;flex-direction:column;gap:26px;list-style:none;padding:0}
.etape{display:flex;gap:20px;align-items:flex-start}
.etape>b{flex:0 0 48px;height:48px;background:var(--bleu);color:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:600}
.etape h3{font-size:25px;margin-bottom:4px}
.etape p{color:var(--gris);max-width:62ch}

/* ce qui est inclus */
.inclus{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:20px}
.inclus article{padding:28px;background:#fff}
.inclus--sur-blanc article{background:var(--surface)}
.inclus h3{margin-bottom:8px}
.inclus p{font-size:17px;color:var(--gris)}

/* dernier appel */
.final{background:var(--bleu);color:#fff}
.final .cont{display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between;padding-top:clamp(48px,6vw,64px);padding-bottom:clamp(48px,6vw,64px)}
.final h2{font-size:clamp(32px,3.8vw,44px);line-height:1.1;margin-bottom:10px}
.final p{font-size:19px;line-height:1.4}

/* pied */
.pied{background:var(--encre);color:#C9CCD1;padding-top:18px;padding-bottom:24px;font-size:16px}
.pied nav{display:flex;flex-wrap:wrap;justify-content:center;gap:0 24px}
.pied a{display:inline-flex;align-items:center;min-height:44px;color:#C9CCD1}
.pied a:hover{color:#fff}

/* pages légales */
.texte{max-width:760px;margin:0 auto;padding:clamp(24px,4vw,48px) clamp(20px,4vw,28px) clamp(48px,6vw,80px)}
.texte h1{font-size:clamp(34px,4.4vw,48px);margin-bottom:22px}
.texte h2{font-size:25px;margin:36px 0 12px}
.texte p{margin-bottom:14px}
.texte ul{margin:0 0 14px;padding-left:22px}
.texte li{margin-bottom:6px}
.texte dl{display:grid;grid-template-columns:minmax(0,13em) minmax(0,1fr);gap:8px 20px}
.texte dt{color:var(--gris)}
.texte dd{overflow-wrap:anywhere}
.texte code{font-size:.92em}
.date{margin-top:28px;color:var(--gris);font-size:16px}

/* page introuvable */
.absent{padding-top:clamp(40px,8vw,96px);padding-bottom:clamp(60px,10vw,120px)}
.absent p{margin:18px 0 26px;color:var(--gris)}

/* aperçu d'un site fictif, dessiné sans image */
.ap{container-type:inline-size;width:100%;aspect-ratio:4/3;overflow:hidden;border:1px solid rgba(17,19,22,.14);background:var(--a-fond);color:var(--a-encre);font-family:var(--a-police);display:flex;flex-direction:column}
.ap-haut{display:flex;justify-content:space-between;align-items:center;gap:2cqw;padding:2.6cqw 4cqw;font-size:3.3cqw;font-weight:var(--a-poids);white-space:nowrap}
.ap-haut span+span{font-weight:400}
.ap-heros{flex-grow:1;min-height:0;background:var(--a-heros);color:var(--a-heros-encre);padding:4cqw;display:flex;flex-direction:column;gap:2cqw;align-items:flex-start;justify-content:center}
.ap-titre{font-size:7.4cqw;line-height:1.08;font-weight:var(--a-poids)}
.ap-sous{font-size:3.3cqw;opacity:.88}
.ap-btn{font-size:3.1cqw;font-weight:600;background:var(--a-btn);color:var(--a-btn-encre);padding:1.6cqw 3cqw;margin-top:1cqw}
.ap-tuiles{flex:0 0 15cqw;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1cqw;padding:1cqw}
.ap-tuiles i:nth-child(1){background:var(--a-t1)}
.ap-tuiles i:nth-child(2){background:var(--a-t2)}
.ap-tuiles i:nth-child(3){background:var(--a-t3)}

/* réservé au téléphone */
.sections,.cta-bas{display:none}

@media (max-width:700px){
  body{font-size:17px}
  .marque{font-size:18px}
  .heros{gap:28px}
  .btn{width:100%}
  .btn--sombre{width:auto}

  /* navigation entre sections */
  .sections{position:sticky;top:0;z-index:20;display:flex;gap:4px;padding:6px 12px;overflow-x:auto;background:#fff;border-top:1px solid var(--filet);border-bottom:1px solid var(--filet);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .sections::-webkit-scrollbar{display:none}
  .sections a{flex:none;display:inline-flex;align-items:center;min-height:36px;padding:0 12px;border-radius:999px;color:var(--gris);font-size:15px;font-weight:500;text-decoration:none;white-space:nowrap}
  .sections a.actif{background:var(--encre);color:#fff}
  [id]{scroll-margin-top:56px}

  /* bouton toujours accessible */
  .cta-bas{position:fixed;left:0;right:0;bottom:0;z-index:20;display:block;padding:8px 16px calc(8px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--filet)}
  .cta-bas[hidden]{display:none}
  .cta-bas .btn{min-height:48px;font-size:17px}
  .pied{padding-bottom:84px}

  /* portes compactes : aperçu à gauche, texte à droite */
  .portes{grid-template-columns:minmax(0,1fr);gap:10px}
  .porte{flex-direction:row;align-items:center;gap:14px;padding:10px}
  .porte .ap{flex:0 0 118px;width:118px}
  .porte strong{font-size:18px}
  .voir{font-size:15px}

  .etapes{gap:20px}
  .etape{gap:14px}
  .etape>b{flex-basis:40px;height:40px;font-size:19px}
  .etape h3{font-size:20px;line-height:1.2}
  .etape p{font-size:16px;line-height:1.4}
  h3{font-size:20px}
  .inclus{gap:10px}
  .inclus article{padding:18px}
  .inclus p,.trois p{font-size:16px;line-height:1.4}
  .trois{gap:20px}
  .final .cont{gap:20px}
  .final p{font-size:17px}
  .texte dl{grid-template-columns:minmax(0,1fr);gap:2px}
  .texte dd{margin-bottom:10px}
}

@media (max-width:360px){
  .marque{font-size:16px}
  .btn--sombre{padding:0 12px;font-size:15px}
}

/* palettes des aperçus */
.ap-plombier-1{--a-police:"Arial Narrow","Roboto Condensed",Arial,sans-serif;--a-poids:700;--a-fond:#FFFFFF;--a-encre:#10263F;--a-heros:#10263F;--a-heros-encre:#FFFFFF;--a-btn:#F2B705;--a-btn-encre:#10263F;--a-t1:#DCE5EE;--a-t2:#C4D3E2;--a-t3:#F2B705}
.ap-paysagiste-1{--a-police:Georgia,"Times New Roman",serif;--a-poids:600;--a-fond:#F1F3EA;--a-encre:#2B3A2C;--a-heros:#3D5A3F;--a-heros-encre:#F6F7EF;--a-btn:#F6F7EF;--a-btn-encre:#2B3A2C;--a-t1:#6F8F5F;--a-t2:#8FAA76;--a-t3:#4F6F4C}
.ap-paysagiste-2{--a-police:"Arial Narrow","Roboto Condensed",Arial,sans-serif;--a-poids:700;--a-fond:#FFFFFF;--a-encre:#1F2A1F;--a-heros:#E4EAD6;--a-heros-encre:#1F2A1F;--a-btn:#1F2A1F;--a-btn-encre:#FFFFFF;--a-t1:#A9BD8E;--a-t2:#5E7F54;--a-t3:#D0B48A}
.ap-paysagiste-3{--a-police:Georgia,"Times New Roman",serif;--a-poids:600;--a-fond:#FBFBF7;--a-encre:#22302A;--a-heros:#22302A;--a-heros-encre:#F3F1E6;--a-btn:#C7A65A;--a-btn-encre:#22302A;--a-t1:#3E5B4C;--a-t2:#7A9A7E;--a-t3:#C7A65A}
.ap-couvreur-1{--a-police:"Arial Black",Arial,sans-serif;--a-poids:800;--a-fond:#FFFFFF;--a-encre:#26292D;--a-heros:#34383D;--a-heros-encre:#FFFFFF;--a-btn:#B5532D;--a-btn-encre:#FFFFFF;--a-t1:#B5532D;--a-t2:#8A8F96;--a-t3:#5C6167}
.ap-couvreur-2{--a-police:"Arial Narrow","Roboto Condensed",Arial,sans-serif;--a-poids:700;--a-fond:#F4F2EE;--a-encre:#2A1E17;--a-heros:#7A3B1E;--a-heros-encre:#FFFFFF;--a-btn:#FFFFFF;--a-btn-encre:#2A1E17;--a-t1:#7A3B1E;--a-t2:#C9B8A6;--a-t3:#4A4A4A}
.ap-couvreur-3{--a-police:Arial,Helvetica,sans-serif;--a-poids:700;--a-fond:#FFFFFF;--a-encre:#1D2733;--a-heros:#E7EBEF;--a-heros-encre:#1D2733;--a-btn:#1D2733;--a-btn-encre:#FFFFFF;--a-t1:#55677A;--a-t2:#A9B6C3;--a-t3:#C2622D}
.ap-traiteur-1{--a-police:Georgia,"Times New Roman",serif;--a-poids:600;--a-fond:#FFFFFF;--a-encre:#3A1319;--a-heros:#6E1D2A;--a-heros-encre:#FBF3EC;--a-btn:#FBF3EC;--a-btn-encre:#6E1D2A;--a-t1:#C98F5A;--a-t2:#E2C39B;--a-t3:#8C3A44}
.ap-traiteur-2{--a-police:Arial,Helvetica,sans-serif;--a-poids:700;--a-fond:#FAF7F1;--a-encre:#22332B;--a-heros:#2F5D50;--a-heros-encre:#FFFFFF;--a-btn:#F0C36D;--a-btn-encre:#22332B;--a-t1:#E8B04B;--a-t2:#7FA38F;--a-t3:#D9CFC0}
.ap-traiteur-3{--a-police:Georgia,"Times New Roman",serif;--a-poids:600;--a-fond:#FFFFFF;--a-encre:#1E1A16;--a-heros:#EDE4D6;--a-heros-encre:#1E1A16;--a-btn:#1E1A16;--a-btn-encre:#FFFFFF;--a-t1:#B98B5E;--a-t2:#6B4E37;--a-t3:#D8C6AE}
.ap-funeraire-1{--a-police:Georgia,"Times New Roman",serif;--a-poids:600;--a-fond:#FFFFFF;--a-encre:#23272B;--a-heros:#2E3338;--a-heros-encre:#F3F4F4;--a-btn:#F3F4F4;--a-btn-encre:#23272B;--a-t1:#8C9298;--a-t2:#C4C8CC;--a-t3:#5A6066}
.ap-funeraire-2{--a-police:Georgia,"Times New Roman",serif;--a-poids:600;--a-fond:#F7F7F5;--a-encre:#2A2D35;--a-heros:#E8E9EC;--a-heros-encre:#2A2D35;--a-btn:#2A2D35;--a-btn-encre:#FFFFFF;--a-t1:#7E8794;--a-t2:#B7BDC6;--a-t3:#3F4653}
.ap-funeraire-3{--a-police:Arial,Helvetica,sans-serif;--a-poids:600;--a-fond:#FFFFFF;--a-encre:#20262B;--a-heros:#3B464F;--a-heros-encre:#FFFFFF;--a-btn:#FFFFFF;--a-btn-encre:#20262B;--a-t1:#6B7680;--a-t2:#A3ACB4;--a-t3:#D5D9DD}