/* vueweb.ca — direction « Atelier ». Polices auto-hébergées (Loi 25 : aucun appel à un tiers). */
@font-face{font-family:"Barlow Condensed";font-weight:700;font-display:swap;src:url(polices/barlow-condensed-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:800;font-display:swap;src:url(polices/barlow-condensed-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-weight:400;font-display:swap;src:url(polices/barlow-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-weight:600;font-display:swap;src:url(polices/barlow-latin-600-normal.woff2) format("woff2")}

:root{
  --encre:#15232D; --encre-2:#1F3240; --papier:#F4F6F7; --blanc:#FFFFFF;
  --gris:#56646E; --ligne:#D3DADF;
  --orange:#FF6B1A;          /* fonds et accents sur encre */
  --orange-texte:#B8460B;    /* texte orange sur fond clair (contraste AA) */
  --sur-encre:#E7ECEF; --sur-encre-doux:rgba(231,236,239,.74);
  --a-confirmer:#FFEFA8; --a-confirmer-bord:#A77F00;
  --titre:"Barlow Condensed","Arial Narrow",sans-serif;
  --texte:"Barlow",system-ui,sans-serif;
  --gouttiere:16px; --mesure:62ch;
  --rayon:4px; --duree:160ms;
  --section:clamp(3.5rem,9vw,6.5rem);
}
@media (min-width:720px){:root{--gouttiere:32px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{margin:0;background:var(--papier);color:var(--encre);font:400 1.0625rem/1.6 var(--texte)}
h1,h2,h3{font-family:var(--titre);font-weight:800;line-height:1;margin:0 0 .5em;text-transform:uppercase;letter-spacing:.005em}
h2{font-size:clamp(2.2rem,6.5vw,3.4rem)}
h3{font-size:1.6rem;font-weight:700}
p{margin:0 0 1em}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.conteneur{max-width:1120px;margin:0 auto;padding:0 var(--gouttiere)}
.surtitre{font:700 1rem/1 var(--titre);letter-spacing:.14em;text-transform:uppercase;color:var(--orange-texte);margin-bottom:1rem}
.sur-encre .surtitre{color:var(--orange)}
.evitement{position:absolute;left:-9999px}
.evitement:focus{left:var(--gouttiere);top:.5rem;z-index:20;background:var(--blanc);padding:.5rem 1rem}
mark.a-confirmer{background:var(--a-confirmer);color:var(--encre);outline:1px dashed var(--a-confirmer-bord);outline-offset:1px;padding:0 .2em;border-radius:2px}

/* Boutons */
.bouton{display:inline-flex;align-items:center;gap:.6rem;font:800 1.2rem/1 var(--titre);text-transform:uppercase;letter-spacing:.04em;text-decoration:none;padding:1rem 1.4rem;border-radius:var(--rayon);border:2px solid transparent;transition:transform var(--duree),background var(--duree),box-shadow var(--duree)}
.bouton--orange{background:var(--orange);color:var(--encre);box-shadow:0 4px 0 #B8460B}
.bouton--orange:hover{transform:translateY(-2px);box-shadow:0 6px 0 #B8460B}
.bouton--orange:active{transform:translateY(2px);box-shadow:0 1px 0 #B8460B}
.bouton--contour{border-color:currentColor;color:inherit}
.bouton--contour:hover{background:rgba(255,255,255,.08)}
.bouton .fleche{transition:transform var(--duree)}
.bouton:hover .fleche{transform:translateX(4px)}

/* En-tête */
.entete{background:var(--encre);color:var(--sur-encre);position:sticky;top:0;z-index:10;border-bottom:1px solid rgba(255,255,255,.08)}
.entete-ligne{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:64px}
.logo{font:800 1.7rem/1 var(--titre);letter-spacing:.02em;text-decoration:none;text-transform:uppercase;display:flex;align-items:center;gap:.45rem}
.logo-oeil{width:.95rem;height:.95rem;border-radius:50% 0;background:var(--orange);transform:rotate(45deg)}
.nav{display:none;gap:1.75rem;font-weight:600}
.nav a{text-decoration:none;color:var(--sur-encre-doux);transition:color var(--duree)}
.nav a:hover{color:var(--blanc)}
@media (min-width:860px){.nav{display:flex}}
.entete .bouton{font-size:1rem;padding:.7rem 1rem;box-shadow:none}
.entete .bouton:hover{box-shadow:none}

/* Héros « livrée » */
.livree{background:var(--encre);color:var(--sur-encre);overflow:hidden;position:relative}
.livree::before{content:"";position:absolute;inset:0;background:radial-gradient(60rem 30rem at 85% 10%,rgba(255,107,26,.13),transparent 60%);pointer-events:none}
.livree-grille{display:grid;gap:3rem;padding-block:clamp(3rem,8vw,6rem) clamp(3rem,7vw,5rem);position:relative}
@media (min-width:900px){.livree-grille{grid-template-columns:1.25fr .75fr;align-items:center;gap:4rem}}
.livree h1{font-size:clamp(3rem,11vw,6.4rem);line-height:.92;margin-bottom:1.5rem;color:var(--blanc)}
.livree h1 em{font-style:normal;color:var(--orange)}
.livree-texte{font-size:clamp(1.15rem,2.4vw,1.35rem);max-width:40ch;color:var(--sur-encre-doux);margin-bottom:2rem}
.livree-actions{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;margin-bottom:2.5rem}
.livree-faits{display:flex;flex-wrap:wrap;gap:1.25rem 2.75rem;margin:0;border-top:1px solid rgba(255,255,255,.16);padding-top:1.4rem}
.livree-faits dt{font-size:.85rem;color:var(--sur-encre-doux);text-transform:uppercase;letter-spacing:.08em}
.livree-faits dd{margin:0;font:800 2rem/1.1 var(--titre);color:var(--blanc)}
.bande{height:22px;background:repeating-linear-gradient(-45deg,var(--orange) 0 22px,var(--encre) 22px 44px)}

/* Maquette de téléphone (démo fictive en CSS) */
.telephone{justify-self:center;width:min(290px,78vw);aspect-ratio:9/18.5;background:#0B141A;border-radius:38px;padding:12px;box-shadow:0 30px 60px -20px rgba(0,0,0,.7),0 0 0 2px #2A3B47;transform:rotate(3deg);position:relative}
.telephone::after{content:"Exemple fictif";position:absolute;left:-14px;bottom:56px;transform:rotate(-8deg);background:var(--a-confirmer);color:var(--encre);font:700 .85rem/1 var(--titre);text-transform:uppercase;letter-spacing:.08em;padding:.45rem .6rem;border-radius:3px;box-shadow:0 4px 10px rgba(0,0,0,.3)}
.ecran{height:100%;border-radius:28px;overflow:hidden;background:var(--papier);display:flex;flex-direction:column;font-family:var(--texte)}
.ecran-entete{background:var(--blanc);padding:26px 14px 10px;border-bottom:1px solid var(--ligne)}
.ecran-nom{font:800 1.05rem/1 var(--titre);text-transform:uppercase;color:var(--encre)}
.ecran-metier{font-size:.68rem;color:var(--gris)}
.ecran-livree{background:#0E4C7A;color:#fff;padding:16px 14px 14px;flex:1}
.ecran-titre{font:800 1.55rem/.95 var(--titre);text-transform:uppercase;margin-bottom:.6rem}
.ecran-num{font:800 1.9rem/1 var(--titre);color:#FFC93C;margin-bottom:.2rem}
.ecran-aide{font-size:.62rem;opacity:.75;margin-bottom:.9rem}
.ecran-ligne{height:6px;border-radius:3px;background:rgba(255,255,255,.22);margin-bottom:6px}
.ecran-ligne--courte{width:60%}
.ecran-bande{height:10px;background:repeating-linear-gradient(-45deg,#FFC93C 0 10px,#0E4C7A 10px 20px)}
.ecran-services{padding:12px 14px;display:grid;gap:8px}
.ecran-services span{display:block;height:28px;background:var(--blanc);border:1px solid var(--ligne);border-radius:3px}
.ecran-appel{background:#FFC93C;color:var(--encre);text-align:center;font:800 .95rem/1 var(--titre);text-transform:uppercase;padding:12px}

/* Sections */
.section{padding-block:var(--section)}
.section--blanc{background:var(--blanc)}
.section--encre{background:var(--encre);color:var(--sur-encre)}
.section--encre h2{color:var(--blanc)}
.intro{max-width:var(--mesure);font-size:1.15rem;color:var(--gris)}
.section--encre .intro{color:var(--sur-encre-doux)}

/* Étapes */
.etapes{list-style:none;margin:3rem 0 0;padding:0;display:grid;gap:0;counter-reset:etape}
@media (min-width:820px){.etapes{grid-template-columns:repeat(3,1fr)}}
.etapes li{counter-increment:etape;border-top:4px solid var(--encre);padding:1.5rem 1.5rem 2rem 0;position:relative}
@media (min-width:820px){.etapes li+li{border-left:1px solid var(--ligne);padding-left:1.5rem}}
.etapes li::before{content:counter(etape,decimal-leading-zero);display:block;font:800 4.5rem/1 var(--titre);color:var(--orange);margin-bottom:.75rem;-webkit-text-stroke:0}
.etapes p{color:var(--gris);margin:0;max-width:34ch}

/* Pour qui + image d'ambiance */
.pour-qui{display:grid;gap:2.5rem;align-items:center}
@media (min-width:900px){.pour-qui{grid-template-columns:1fr 1fr;gap:4rem}}
.ambiance{position:relative;border-radius:var(--rayon);overflow:hidden;aspect-ratio:4/3;background:var(--encre-2)}
.ambiance img{width:100%;height:100%;object-fit:cover}
.ambiance::after{content:"";position:absolute;left:0;right:0;bottom:0;height:14px;background:repeating-linear-gradient(-45deg,var(--orange) 0 14px,var(--encre) 14px 28px)}
.metiers{list-style:none;margin:1.5rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.metiers li{border:1px solid rgba(255,255,255,.22);padding:.4rem .8rem;border-radius:3px;font-weight:600}
.coches{list-style:none;padding:0;margin:1.5rem 0 0;display:grid;gap:.85rem}
.coches li{display:flex;gap:.75rem;align-items:baseline}
.coches li::before{content:"";flex:none;width:.6rem;height:.6rem;background:var(--orange);transform:translateY(-.1rem)}

/* Exemples */
.exemples{display:grid;gap:1.5rem;margin-top:3rem}
@media (min-width:760px){.exemples{grid-template-columns:1fr 1fr}}
.exemple{background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--rayon);overflow:hidden;transition:transform var(--duree),box-shadow var(--duree)}
.exemple:hover{transform:translateY(-3px);box-shadow:0 14px 30px -18px rgba(21,35,45,.45)}
.exemple-visuel{aspect-ratio:16/10;padding:1.25rem;display:flex;flex-direction:column;justify-content:flex-end;color:#fff;position:relative}
.exemple-visuel--plombier{background:linear-gradient(180deg,#0E4C7A,#0A3657)}
.exemple-visuel--electricien{background:linear-gradient(180deg,#1E1E24,#121216)}
.exemple-visuel strong{font:800 clamp(1.6rem,4vw,2.2rem)/1 var(--titre);text-transform:uppercase}
.exemple-visuel span{font:800 1.5rem/1.2 var(--titre)}
.exemple-visuel--plombier span{color:#FFC93C}
.exemple-visuel--electricien span{color:#F5D90A}
.etiquette{position:absolute;top:1rem;left:1rem;background:var(--a-confirmer);color:var(--encre);font:700 .8rem/1 var(--titre);letter-spacing:.08em;text-transform:uppercase;padding:.4rem .55rem;border-radius:3px}
.exemple-texte{padding:1.25rem 1.25rem 1.5rem}
.exemple-texte p{color:var(--gris);margin:0}

/* Prix */
.prix{display:grid;gap:1.5rem;margin-top:3rem;align-items:stretch}
@media (min-width:860px){.prix{grid-template-columns:1.2fr 1fr}}
.carte-prix{border-radius:var(--rayon);padding:clamp(1.5rem,4vw,2.5rem)}
.carte-prix--vedette{background:var(--blanc);color:var(--encre);position:relative;box-shadow:0 0 0 4px var(--orange)}
.carte-prix--suite{border:1px solid rgba(255,255,255,.2)}
.montant{font:800 clamp(4rem,14vw,6.5rem)/.9 var(--titre);margin-bottom:.5rem;font-variant-numeric:tabular-nums}
.montant small{font-size:.32em;letter-spacing:.04em;vertical-align:.9em;margin-left:.15em}
.detail{list-style:none;padding:0;margin:1.25rem 0 1.5rem}
.detail li{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;border-bottom:1px solid var(--ligne)}
.carte-prix--suite .detail li{border-color:rgba(255,255,255,.16)}
.detail b{font-weight:600}
.forfaits{display:grid;gap:1rem;margin-top:1.25rem}
.forfait{border-top:1px solid rgba(255,255,255,.2);padding-top:1rem}
.forfait h3{display:flex;justify-content:space-between;align-items:baseline;color:var(--blanc);margin-bottom:.35rem}
.forfait h3 span{color:var(--orange)}
.forfait p{margin:0;color:var(--sur-encre-doux)}
.petit{font-size:.92rem;color:var(--gris)}
.section--encre .petit{color:var(--sur-encre-doux)}

/* FAQ */
.faq{margin-top:2.5rem;max-width:820px}
.faq details{border-top:1px solid var(--ligne)}
.faq details:last-child{border-bottom:1px solid var(--ligne)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;padding:1.25rem 0;font:700 1.4rem/1.15 var(--titre);text-transform:uppercase}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.8rem;line-height:.8;color:var(--orange-texte);transition:transform var(--duree)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--gris);max-width:var(--mesure);padding-bottom:1rem}

/* Contact */
.contact{display:grid;gap:2rem;align-items:end}
@media (min-width:860px){.contact{grid-template-columns:1.2fr 1fr}}
.contact h2{font-size:clamp(2.6rem,8vw,4.6rem)}
.coordonnees{display:grid;gap:1.25rem;margin:0}
.coordonnees dt{font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;color:var(--sur-encre-doux)}
.coordonnees dd{margin:0;font:800 1.7rem/1.15 var(--titre)}
.coordonnees a{text-decoration-color:var(--orange);text-underline-offset:4px}

/* Pied de page */
.pied{background:#0D171E;color:#B5C0C8;font-size:.92rem;padding-block:2.5rem}
.pied-grille{display:grid;gap:1.5rem}
@media (min-width:760px){.pied-grille{grid-template-columns:1.4fr 1fr}}
.pied p{margin:.2rem 0}
.pied nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem}
.pied a{color:#DDE4E9}

/* Pages légales */
.page-legale{padding-block:var(--section)}
.page-legale .conteneur{max-width:800px}
.page-legale h1{font-size:clamp(2.4rem,7vw,3.6rem)}
.page-legale h2{font-size:1.8rem;margin-top:2.5rem}
.page-legale p,.page-legale li{max-width:var(--mesure)}
.avis{background:var(--a-confirmer);border-left:4px solid var(--a-confirmer-bord);padding:1rem 1.25rem;border-radius:3px;margin-bottom:2rem}
.formulaire{display:grid;gap:.75rem;max-width:460px;margin-top:1.5rem}
.formulaire label{font-weight:600}
.formulaire input{font:inherit;padding:.85rem 1rem;border:2px solid var(--ligne);border-radius:var(--rayon);background:var(--blanc)}
.formulaire input:focus{border-color:var(--encre);outline:none}
.formulaire .bouton{justify-self:start;cursor:pointer}
.message{padding:1rem 1.25rem;border-radius:var(--rayon);font-weight:600}
.message--ok{background:#E3F4E8;color:#14532D}
.message--erreur{background:#FDE7E7;color:#7F1D1D}

@media print{.entete,.bande{display:none}}