/* ==========================================================================
   Vayer Peintures — feuille de style unique
   Charte : encre du logo + 6 pastilles de l'enseigne (une par univers).
   Forme signature : la « pastille » (coins haut-gauche et bas-droit arrondis).
   ========================================================================== */

@font-face{font-family:"Jost";src:url("../fonts/jost-latin-300-normal.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Jost";src:url("../fonts/jost-latin-300-italic.woff2") format("woff2");font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:"Jost";src:url("../fonts/jost-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Jost";src:url("../fonts/jost-latin-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Jost";src:url("../fonts/jost-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Jost";src:url("../fonts/jost-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("../fonts/instrument-sans-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("../fonts/instrument-sans-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("../fonts/instrument-sans-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}

:root{
  /* Encre du logo */
  --encre:#08183A;
  --encre-2:#1C2B4E;
  --encre-70:#4A5570;
  --gris:#EEF0F3;       /* gris enduit */
  --gris-2:#DDE1E7;
  --blanc:#FFFFFF;
  /* Pastilles de l'enseigne */
  --bleu:#008DD0;   /* Peintures */
  --rouge:#F04F50;  /* Papiers peints */
  --jaune:#FEBD23;  /* Outillage / magasins */
  --vert:#BEC531;   /* À propos */
  --orange:#F68C46; /* Sols */
  --violet:#A2669D; /* Conseil déco */
  /* Versions foncées pour le texte (contraste AA sur blanc) */
  --bleu-t:#006A9E; --rouge-t:#C42F33; --orange-t:#B4561A; --violet-t:#83487E; --vert-t:#6C7210; --jaune-t:#946600;

  --accent:var(--bleu); --accent-t:var(--bleu-t);

  --f-titre:"Jost",system-ui,sans-serif;
  --f-texte:"Instrument Sans",system-ui,sans-serif;

  --r:18px;           /* rayon de la pastille */
  --r-s:10px;
  --pastille:var(--r) 3px var(--r) 3px;
  --pastille-s:var(--r-s) 2px var(--r-s) 2px;

  --max:1240px;
  --gut:clamp(20px,4vw,48px);
  --header:84px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header) + 16px)}
body{margin:0;font-family:var(--f-texte);font-size:1.0625rem;line-height:1.6;color:var(--encre);background:var(--blanc);text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%;height:auto}
a{color:inherit}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
h1,h2,h3,h4{font-family:var(--f-titre);font-weight:500;line-height:1.1;margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:clamp(2.5rem,6vw,4.75rem);letter-spacing:-.02em}
h2{font-size:clamp(1.9rem,3.6vw,2.9rem)}
h3{font-size:clamp(1.25rem,1.8vw,1.5rem)}
ul{padding-left:1.1em}
:focus-visible{outline:3px solid var(--bleu);outline-offset:3px;border-radius:4px}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--encre);color:#fff;padding:10px 16px;border-radius:var(--pastille-s);text-decoration:none}
.skip:focus{top:12px}

.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.section{padding:clamp(64px,9vw,120px) 0}
.section--gris{background:var(--gris)}
.section--encre{background:var(--encre);color:#fff}
.lead{font-size:clamp(1.125rem,1.6vw,1.3rem);line-height:1.55;color:var(--encre-70);max-width:62ch}
.section--encre .lead{color:#C9D0DE}
.measure{max-width:64ch}

/* Pastille : la forme de l'enseigne ---------------------------------------- */
.chip{display:inline-block;width:34px;height:16px;border-radius:7px 1px 7px 1px;background:var(--accent);flex:none}
.chips{display:flex;gap:6px}
.chips .chip{width:22px;height:10px;border-radius:5px 1px 5px 1px}
.chips .chip:nth-child(1){background:var(--bleu)}.chips .chip:nth-child(2){background:var(--rouge)}.chips .chip:nth-child(3){background:var(--jaune)}.chips .chip:nth-child(4){background:var(--vert)}.chips .chip:nth-child(5){background:var(--orange)}.chips .chip:nth-child(6){background:var(--violet)}

/* Couleur d'univers (posée sur <body> ou une section) */
.u-bleu{--accent:var(--bleu);--accent-t:var(--bleu-t)}
.u-rouge{--accent:var(--rouge);--accent-t:var(--rouge-t)}
.u-orange{--accent:var(--orange);--accent-t:var(--orange-t)}
.u-violet{--accent:var(--violet);--accent-t:var(--violet-t)}
.u-vert{--accent:var(--vert);--accent-t:var(--vert-t)}
.u-jaune{--accent:var(--jaune);--accent-t:var(--jaune-t)}

/* Titre de section : la pastille de l'univers devant le titre */
.titre{display:flex;align-items:center;gap:14px;margin-bottom:.6em}
.titre .chip{margin-top:.15em}

/* Boutons -------------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:14px 26px;border:2px solid transparent;border-radius:var(--pastille);font-family:var(--f-titre);font-weight:500;font-size:1.05rem;line-height:1.1;text-decoration:none;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}
.btn svg{width:20px;height:20px;flex:none}
.btn--plein{background:var(--encre);color:#fff}
.btn--plein:hover{background:var(--encre-2)}
.btn--accent{background:var(--accent);color:var(--encre)}
.btn--accent:hover{background:#fff}
.btn--clair{background:#fff;color:var(--encre)}
.btn--clair:hover{background:var(--gris)}
.btn--contour{border-color:currentColor;background:transparent}
.btn--contour:hover{background:rgba(255,255,255,.12)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}
.lien{font-family:var(--f-titre);font-weight:500;color:var(--accent-t);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.lien:hover{color:var(--encre)}

/* HEADER ------------------------------------------------------------------- */
.site-header{position:fixed;inset:0 0 auto 0;z-index:100;height:var(--header);background:rgba(255,255,255,.97);border-bottom:1px solid transparent;transition:box-shadow .25s,border-color .25s,height .25s}
.site-header.is-scrolled{border-bottom-color:var(--gris-2);box-shadow:0 6px 24px rgba(8,24,58,.07)}
.site-header .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:block;width:176px;flex:none}
.brand img{width:100%}
.nav{display:flex;align-items:center;gap:4px}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:2px}
.nav a{position:relative;display:block;padding:10px 12px;font-family:var(--f-titre);font-weight:500;font-size:1rem;text-decoration:none;color:var(--encre)}
.nav ul a::after{content:"";position:absolute;left:12px;bottom:2px;width:22px;height:8px;border-radius:4px 1px 4px 1px;background:var(--c,var(--encre));transform:scaleX(0);transform-origin:left;transition:transform .2s}
.nav ul a:hover::after,.nav ul a[aria-current="page"]::after{transform:scaleX(1)}
.nav .btn{color:#fff;margin-left:12px;min-height:44px;padding:10px 18px;font-size:.98rem}
.nav-toggle{display:none;align-items:center;gap:8px;background:none;border:0;padding:10px;margin-right:-10px;font:500 1rem var(--f-titre);color:var(--encre);cursor:pointer}
.nav-toggle svg{width:26px;height:26px}
main{padding-top:var(--header)}

@media (max-width:1080px){
  .nav-toggle{display:inline-flex}
  .nav{position:fixed;inset:var(--header) 0 0 0;flex-direction:column;align-items:stretch;gap:0;padding:16px var(--gut) 32px;background:#fff;overflow-y:auto;visibility:hidden;opacity:0;transform:translateY(-8px);transition:opacity .2s,transform .2s,visibility 0s .2s}
  body.nav-open .nav{visibility:visible;opacity:1;transform:none;transition:opacity .2s,transform .2s}
  body.nav-open{overflow:hidden}
  .nav ul{flex-direction:column;gap:0}
  .nav ul a{padding:16px 0 16px 40px;font-size:1.35rem;border-bottom:1px solid var(--gris)}
  .nav ul a::after{left:0;top:50%;bottom:auto;margin-top:-5px;width:26px;height:11px;transform:none;background:var(--c,var(--gris-2))}
  .nav .btn{margin:24px 0 0}
}

/* HERO accueil --------------------------------------------------------------- */
.hero{position:relative;min-height:min(88vh,820px);display:flex;align-items:flex-end;color:#fff;background:var(--encre);overflow:hidden}
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 72%}
.hero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(8,24,58,.94) 0%,rgba(8,24,58,.86) 40%,rgba(8,24,58,.4) 70%,rgba(8,24,58,.15) 100%),linear-gradient(0deg,rgba(8,24,58,.75) 0%,rgba(8,24,58,0) 45%)}
.hero .wrap{position:relative;z-index:2;padding-top:72px;padding-bottom:clamp(140px,16vw,190px)}
.hero h1{max-width:13ch;margin-bottom:.35em}
.hero h1 em{font-style:italic;font-weight:300}
.hero .lead{color:#E3E7EF;max-width:52ch;margin-bottom:32px}
.hero__lieu{display:flex;align-items:center;gap:12px;margin:0 0 22px;font-family:var(--f-titre);font-size:1.05rem;color:#E3E7EF}

/* Bandeau des 6 pastilles = les univers (élément signature) */
.univers-band{position:absolute;left:0;right:0;bottom:0;z-index:3}
.univers-band ul{list-style:none;margin:0 auto;padding:0 var(--gut);max-width:var(--max);display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.univers-band a{--c:var(--bleu);display:flex;flex-direction:column;justify-content:space-between;height:116px;padding:16px 18px;border-radius:var(--r) 3px 0 0;background:var(--c);color:var(--encre);text-decoration:none;font-family:var(--f-titre);font-weight:500;font-size:1.12rem;line-height:1.15;transform:translateY(var(--y,0));transition:transform .25s ease}
.univers-band a small{display:block;font-family:var(--f-texte);font-weight:500;font-size:.86rem;opacity:.85}
.univers-band a:hover{--y:-10px}
.univers-band li:nth-child(1) a{--c:var(--bleu)}
.univers-band li:nth-child(2) a{--c:var(--rouge)}
.univers-band li:nth-child(3) a{--c:var(--orange)}
.univers-band li:nth-child(4) a{--c:var(--violet)}
.univers-band li:nth-child(5) a{--c:var(--vert)}
.univers-band li:nth-child(6) a{--c:var(--jaune)}
.js .univers-band li{opacity:0;transform:translateY(60px);animation:monte .6s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(var(--i)*70ms + 250ms)}
@keyframes monte{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.js .univers-band li{animation:none;opacity:1;transform:none}html{scroll-behavior:auto}}
@media (max-width:900px){
  .hero{min-height:auto}
  .hero .wrap{padding-bottom:48px;padding-top:110px}
  .univers-band{position:relative}
  .univers-band ul{grid-template-columns:repeat(2,1fr);padding:0 var(--gut) 0;gap:6px;background:var(--encre);padding-bottom:6px}
  .univers-band a{height:auto;min-height:84px;border-radius:var(--pastille-s)}
  .hero{flex-direction:column;align-items:stretch}
}

/* HERO pages intérieures ------------------------------------------------------ */
.page-hero{position:relative;padding:clamp(56px,8vw,104px) 0 clamp(48px,6vw,80px);background:var(--gris);overflow:hidden}
.page-hero::after{content:"";position:absolute;right:calc(50% - var(--max)/2 + var(--gut));bottom:0;width:min(30vw,300px);height:28px;border-radius:var(--r) 3px 0 0;background:var(--accent)}
.page-hero h1{font-size:clamp(2.3rem,5vw,4rem);max-width:18ch}
.page-hero .lead{margin-bottom:0}
.fil{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 28px;padding:0;list-style:none;font-size:.95rem;color:var(--encre-70)}
.fil li+li::before{content:"/";margin-right:8px;color:var(--gris-2)}
.fil a{color:var(--encre-70)}
@media (max-width:1300px){.page-hero::after{right:var(--gut)}}

/* Grilles --------------------------------------------------------------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,88px);align-items:center}
.split--7-5{grid-template-columns:7fr 5fr}
.split--5-7{grid-template-columns:5fr 7fr}
@media (max-width:900px){.split,.split--7-5,.split--5-7{grid-template-columns:1fr}}
.photo{border-radius:var(--pastille);overflow:hidden;background:var(--gris)}
.photo img{width:100%;height:100%;object-fit:cover}
.photo--haut{aspect-ratio:4/5}
.photo--large{aspect-ratio:16/10}

/* Univers (accueil) ----------------------------------------------------------- */
.univers{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,3vw,32px);margin-top:48px}
.carte-u{display:grid;grid-template-rows:auto 1fr;background:#fff;border-radius:var(--pastille);overflow:hidden;text-decoration:none;color:inherit;border:1px solid var(--gris-2)}
.carte-u__visuel{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--accent)}
.carte-u__visuel>*{width:100%;height:100%}
.carte-u__corps{padding:28px 30px 30px;display:flex;flex-direction:column;gap:6px}
.carte-u__corps h3{display:flex;align-items:center;gap:12px;margin:0 0 .25em}
.carte-u__corps p{color:var(--encre-70)}
.carte-u__corps .lien{margin-top:auto;padding-top:10px;align-self:flex-start}
.carte-u:hover .lien{color:var(--encre)}
@media (max-width:760px){.univers{grid-template-columns:1fr}}

/* Visuels illustrés (pas de fausses photos) */
.v-produit{display:flex;align-items:flex-end;justify-content:center;gap:4%;padding:7% 8% 0;background:linear-gradient(180deg,#e6f3fa 0%,#cfe7f3 100%)}
.v-produit img{width:34%;height:auto;mix-blend-mode:multiply}
.v-papier{background:var(--rouge)}
.v-sol{background:repeating-linear-gradient(90deg,transparent 0 23%,rgba(80,45,20,.35) 23% 23.4%),repeating-linear-gradient(180deg,#d9a46c 0 18%,#c99560 18% 34%,#e1b17d 34% 52%,#cf9a63 52% 70%,#d7a873 70% 86%,#c48f5b 86% 100%)}
.v-sol--a{background:
  repeating-linear-gradient(180deg,transparent 0 calc(25% - 1px),rgba(60,35,15,.45) calc(25% - 1px) 25%),
  linear-gradient(90deg,#d6a06a 0 31%,#c48e5a 31% 31.3%,#e0af7a 31.3% 64%,#bf8a57 64% 64.3%,#d19c67 64.3% 100%)}
.v-deco{display:grid;place-items:center;background:var(--violet)}

/* Nuancier en éventail (conseil déco) */
.eventail{position:relative;width:62%;height:84%}
.eventail span{position:absolute;left:50%;bottom:6%;width:22%;height:86%;margin-left:-11%;border-radius:10px 2px 10px 2px;transform-origin:50% 92%;box-shadow:0 2px 0 rgba(0,0,0,.08)}
.eventail span::after{content:"";position:absolute;left:12%;right:12%;bottom:8%;height:6%;border-radius:2px;background:rgba(255,255,255,.75)}
.eventail span:nth-child(1){background:#e9e4da;transform:rotate(-48deg)}
.eventail span:nth-child(2){background:#c9b79c;transform:rotate(-30deg)}
.eventail span:nth-child(3){background:#8b9b86;transform:rotate(-12deg)}
.eventail span:nth-child(4){background:#3f5f73;transform:rotate(6deg)}
.eventail span:nth-child(5){background:#c56a48;transform:rotate(24deg)}
.eventail span:nth-child(6){background:#F2C46B;transform:rotate(42deg)}

/* Bande Mélissa -------------------------------------------------------------- */
.deco-band{display:grid;grid-template-columns:5fr 7fr;border-radius:var(--pastille);overflow:hidden;background:var(--violet);color:#fff}
.deco-band__visuel{min-height:360px;display:grid;place-items:center;background:#8D5588}
.deco-band__texte{padding:clamp(32px,5vw,64px)}
.deco-band__texte .lead{color:#F6EAF4}
.deco-band__titre{color:#fff;margin:0 0 28px;font-family:var(--f-titre);font-weight:300;font-style:italic;font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.25}
@media (max-width:860px){.deco-band{grid-template-columns:1fr}.deco-band__visuel{min-height:240px}}

/* Points forts ------------------------------------------------------------------ */
.points{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,56px);margin-top:48px}
.point h3{display:flex;align-items:center;gap:12px}
.point p{color:var(--encre-70)}
.section--encre .point p{color:#C9D0DE}
@media (max-width:860px){.points{grid-template-columns:1fr}}

/* Publics -------------------------------------------------------------------- */
.publics{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,32px);margin-top:40px}
.public{padding:clamp(28px,4vw,44px);border-radius:var(--pastille);background:#fff;border:1px solid var(--gris-2)}
.public ul{margin:14px 0 0;padding:0;list-style:none}
.public li{position:relative;padding:8px 0 8px 30px;border-top:1px solid var(--gris)}
.public li::before{content:"";position:absolute;left:0;top:17px;width:18px;height:8px;border-radius:4px 1px 4px 1px;background:var(--accent)}
@media (max-width:760px){.publics{grid-template-columns:1fr}}

/* Marques ------------------------------------------------------------------- */
.marques{display:flex;flex-wrap:wrap;gap:16px;margin-top:28px}
.marque{display:flex;align-items:center;justify-content:center;min-width:190px;height:88px;padding:0 28px;border-radius:var(--pastille);background:#fff;border:1px solid var(--gris-2);font-family:var(--f-titre);font-weight:600;font-size:1.7rem;letter-spacing:.02em}
.marque--sofec{color:#173C7A;font-style:italic;letter-spacing:.06em}
.marque--sikkens{color:#173C7A;font-weight:500;text-transform:lowercase}

/* Avis ------------------------------------------------------------------------ */
.avis-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px}
.note{display:flex;align-items:center;gap:18px}
.note__chiffre{font-family:var(--f-titre);font-weight:500;font-size:4.2rem;line-height:1}
.etoiles{display:flex;gap:3px;color:var(--jaune)}
.etoiles svg{width:20px;height:20px}
.note small{display:block;color:#C9D0DE;font-size:.95rem;margin-top:4px}
.avis{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.5vw,28px);margin-top:44px}
.avis figure{margin:0;padding:30px;border-radius:var(--pastille);background:var(--encre-2);display:flex;flex-direction:column;gap:18px}
.avis blockquote{margin:0;font-size:1.04rem;line-height:1.6;color:#E3E7EF}
.avis figcaption{margin-top:auto;display:flex;align-items:center;gap:12px;font-family:var(--f-titre);font-weight:500}
.avis figcaption span{display:block;font-family:var(--f-texte);font-weight:400;font-size:.88rem;color:#A9B3C7}
.initiale{display:grid;place-items:center;width:42px;height:42px;border-radius:12px 2px 12px 2px;background:var(--c,var(--bleu));color:var(--encre);font-family:var(--f-titre);font-weight:600;flex:none}
@media (max-width:960px){.avis{grid-template-columns:1fr}}

/* Magasins -------------------------------------------------------------------- */
.magasins{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,32px);margin-top:44px}
.magasin{display:flex;flex-direction:column;border-radius:var(--pastille);overflow:hidden;background:#fff;border:1px solid var(--gris-2)}
.magasin__corps{padding:clamp(26px,3.5vw,40px);display:flex;flex-direction:column;gap:18px;flex:1}
.magasin h3{margin:0;display:flex;align-items:center;gap:12px}
.infos{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.infos li{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start}
.infos svg{width:22px;height:22px;margin-top:2px;color:var(--encre-70)}
.infos a{font-weight:600;text-decoration:none}
.infos a:hover{text-decoration:underline}
.horaires{width:100%;border-collapse:collapse;font-size:.98rem}
.horaires th{text-align:left;font-weight:500;padding:6px 12px 6px 0;width:42%;color:var(--encre-70)}
.horaires td{padding:6px 0}
.horaires tr+tr{border-top:1px solid var(--gris)}
.horaires .ferme{color:var(--encre-70)}
.horaires tr.today th,.horaires tr.today td{color:var(--encre);font-weight:600}
.carte{position:relative;aspect-ratio:16/8;background:var(--gris);display:grid;place-items:center;text-align:center;padding:20px;border-top:1px solid var(--gris-2)}
.carte iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.carte p{max-width:36ch;font-size:.92rem;color:var(--encre-70);margin:10px auto 0}
.carte .btn{min-height:44px;padding:10px 18px;font-size:.98rem}
@media (max-width:860px){.magasins{grid-template-columns:1fr}}

/* Produits -------------------------------------------------------------------- */
.produits{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:clamp(16px,2.5vw,28px);margin-top:40px}
.produit{display:flex;flex-direction:column;border-radius:var(--pastille);overflow:hidden;background:#fff;border:1px solid var(--gris-2)}
.produit__img{aspect-ratio:1/1;background:#fff;display:grid;place-items:center;padding:16px 16px 0}
.produit__img img{max-height:100%;width:auto}
.produit__corps{padding:20px 22px 24px;border-top:1px solid var(--gris)}
.produit h3{font-size:1.2rem;margin-bottom:.2em}
.produit .type{font-size:.95rem;color:var(--accent-t);font-weight:600;margin-bottom:10px}
.produit ul{margin:0;padding:0;list-style:none;font-size:.95rem;color:var(--encre-70)}
.produit li{padding:3px 0}
.produit .cond{margin-top:12px;font-size:.88rem;color:var(--encre-70)}

/* Finitions ------------------------------------------------------------------- */
.finitions{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:40px}
.finition{border-radius:var(--pastille);overflow:hidden;border:1px solid var(--gris-2);background:#fff}
.finition__ech{height:120px}
.finition__ech--mat{background:#3f5f73}
.finition__ech--velours{background:linear-gradient(135deg,#3f5f73 0%,#4d6f84 55%,#3f5f73 100%)}
.finition__ech--satin{background:linear-gradient(135deg,#3f5f73 0%,#6d8ea2 45%,#3f5f73 75%)}
.finition__ech--laque{background:linear-gradient(135deg,#34525f 0%,#9fbccc 38%,#3f5f73 52%,#2f4a59 100%)}
.finition__corps{padding:18px 20px 22px}
.finition h3{font-size:1.15rem;margin-bottom:.3em}
.finition p{font-size:.95rem;color:var(--encre-70)}
@media (max-width:900px){.finitions{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.finitions{grid-template-columns:1fr}}

/* Motifs papiers peints ------------------------------------------------------- */
.motifs{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:40px}
.motif{border-radius:var(--pastille);overflow:hidden;border:1px solid var(--gris-2);background:#fff}
.motif svg{width:100%;height:auto;aspect-ratio:3/4}
.motif__corps{padding:18px 20px 22px}
.motif h3{font-size:1.15rem;margin-bottom:.3em}
.motif p{font-size:.95rem;color:var(--encre-70)}
@media (max-width:900px){.motifs{grid-template-columns:repeat(2,1fr)}}

/* Sols ------------------------------------------------------------------------- */
.sols{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.sol{border-radius:var(--pastille);overflow:hidden;border:1px solid var(--gris-2);background:#fff}
.sol__ech{aspect-ratio:16/10}
.sol__ech--strat{background:repeating-linear-gradient(180deg,transparent 0 calc(25% - 1px),rgba(60,35,15,.45) calc(25% - 1px) 25%),linear-gradient(90deg,#d6a06a 0 31%,#c48e5a 31% 31.3%,#e0af7a 31.3% 64%,#bf8a57 64% 64.3%,#d19c67 64.3% 100%)}
.sol__ech--vinyle{background:repeating-linear-gradient(180deg,transparent 0 calc(33.3% - 1px),rgba(40,40,40,.25) calc(33.3% - 1px) 33.3%),linear-gradient(90deg,#b9b2a6 0 45%,#a9a296 45% 45.4%,#c3bcb0 45.4% 100%)}
.sol__ech--textile{background:radial-gradient(circle at 25% 25%,rgba(255,255,255,.12) 0 1px,transparent 1.5px) 0 0/6px 6px,radial-gradient(circle at 75% 75%,rgba(0,0,0,.12) 0 1px,transparent 1.5px) 0 0/6px 6px,#7d8a96}
.sol__corps{padding:20px 22px 24px}
.sol h3{font-size:1.2rem;margin-bottom:.3em}
.sol p{font-size:.97rem;color:var(--encre-70)}
@media (max-width:860px){.sols{grid-template-columns:1fr}}

/* Étapes (vraie séquence) ---------------------------------------------------- */
.etapes{list-style:none;margin:44px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,32px);counter-reset:e}
.etapes li{counter-increment:e;padding:28px 28px 30px;border-radius:var(--pastille);background:#fff;border:1px solid var(--gris-2)}
.etapes li::before{content:counter(e);display:grid;place-items:center;width:46px;height:30px;margin-bottom:18px;border-radius:12px 2px 12px 2px;background:var(--accent);color:#fff;font-family:var(--f-titre);font-weight:600}
.etapes h3{font-size:1.25rem}
.etapes p{color:var(--encre-70)}
@media (max-width:860px){.etapes{grid-template-columns:1fr}}

/* Bande d'appel --------------------------------------------------------------- */
.appel{position:relative;padding:clamp(48px,7vw,88px) 0;background:var(--accent);color:var(--encre);overflow:hidden}
.appel .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px}
.appel h2{margin:0 0 .25em;max-width:20ch}
.appel p{color:var(--encre-2);margin:0;max-width:56ch}
.appel .btn--clair{background:var(--encre);color:#fff}
.appel .btn--clair:hover{background:var(--encre-2)}
.appel .btn--contour:hover{background:rgba(255,255,255,.25)}
.appel .chips{position:absolute;right:var(--gut);top:24px}

/* Formulaire ------------------------------------------------------------------- */
.form{display:grid;gap:18px;padding:clamp(26px,4vw,44px);border-radius:var(--pastille);background:#fff;border:1px solid var(--gris-2)}
.form .ligne{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:640px){.form .ligne{grid-template-columns:1fr}}
.champ{display:grid;gap:6px}
.champ label,.champ legend{font-weight:600;font-size:.97rem}
.champ .opt{font-weight:400;color:var(--encre-70)}
.champ input,.champ select,.champ textarea{width:100%;min-height:50px;padding:12px 14px;border:1.5px solid #B9C0CC;border-radius:var(--pastille-s);background:#fff;font:inherit;color:inherit}
.champ textarea{min-height:140px;resize:vertical}
.champ input:focus,.champ select:focus,.champ textarea:focus{outline:none;border-color:var(--bleu);box-shadow:0 0 0 3px rgba(0,141,208,.2)}
.radios{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.radios legend{margin-bottom:8px}
.radios label{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:1.5px solid #B9C0CC;border-radius:var(--pastille-s);font-weight:500;cursor:pointer}
.radios input{accent-color:var(--encre);width:auto;min-height:0;margin:0}
.radios label:has(input:checked){border-color:var(--encre);background:var(--gris)}
.rgpd{display:grid;grid-template-columns:22px 1fr;gap:12px;font-size:.92rem;color:var(--encre-70)}
.rgpd input{width:20px;height:20px;margin-top:2px;accent-color:var(--encre)}
.form-msg{display:none;padding:14px 16px;border-radius:var(--pastille-s);font-weight:500}
.form-msg.is-on{display:block}
[data-form-error]{background:#FDECEC;color:#8E1C1F}
[data-form-success]{background:#EEF6D6;color:#3E4509}

/* Texte long (mentions) ------------------------------------------------------- */
.texte{max-width:72ch}
.texte h2{font-size:1.6rem;margin-top:1.8em}
.texte h2:first-child{margin-top:0}
.texte a{color:var(--bleu-t)}
.todo{background:#FFF3CC;padding:0 4px;border-radius:3px}

/* Réseaux sociaux -------------------------------------------------------------- */
.section--reseaux{padding:clamp(48px,6vw,80px) 0}
.reseaux-bloc{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px}
.reseaux-bloc h2{margin-bottom:.3em}
.btn--reseau{border-color:var(--encre);color:var(--encre);background:#fff}
.btn--reseau:hover{background:var(--encre);color:#fff}
.btn--reseau .handle{font-family:var(--f-texte);font-weight:400;font-size:.92rem;opacity:.75}
.reseaux{display:flex!important;gap:10px!important;margin-top:20px!important}
.reseaux a{display:grid;place-items:center;width:44px;height:44px;border-radius:12px 2px 12px 2px;background:rgba(255,255,255,.1)}
.reseaux a:hover{background:var(--bleu);text-decoration:none}
.reseaux svg{width:22px;height:22px}

/* FOOTER ------------------------------------------------------------------------ */
.site-footer{background:var(--encre);color:#C9D0DE;padding:clamp(56px,7vw,88px) 0 28px;font-size:.98rem}
.site-footer a{color:#fff;text-decoration:none}
.site-footer a:hover{text-decoration:underline}
.foot{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:clamp(28px,4vw,56px)}
.foot h2{font-size:1.15rem;color:#fff;margin-bottom:16px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.foot .brand{width:220px;margin-bottom:20px}
.foot address{font-style:normal;display:grid;gap:4px}
.foot-bas{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px 32px;margin-top:56px;padding-top:28px;border-top:1px solid rgba(255,255,255,.12);font-size:.95rem;color:#C9D0DE}
.foot-bas p{margin:0}
.foot-bas a{color:#C9D0DE}
.foot-bas__c{text-align:center}
.foot-bas__c a{color:#fff}
.foot-bas__d{text-align:right;line-height:1.7;white-space:nowrap}
@media (max-width:1100px){.foot-bas{grid-template-columns:1fr;text-align:center}.foot-bas__d{text-align:center;white-space:normal}}
@media (max-width:960px){.foot{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.foot{grid-template-columns:1fr}}

/* Bouton d'appel mobile -------------------------------------------------------- */
.appel-mobile{display:none}
@media (max-width:760px){
  .appel-mobile{position:fixed;left:12px;right:12px;bottom:12px;z-index:90;display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .appel-mobile a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;border-radius:var(--pastille-s);background:var(--encre);color:#fff;font:500 1rem var(--f-titre);text-decoration:none;box-shadow:0 8px 24px rgba(8,24,58,.25)}
  .appel-mobile a+a{background:var(--bleu);color:var(--encre)}
  .appel-mobile svg{width:18px;height:18px}
  .site-footer{padding-bottom:96px}
}

/* Chat IA ------------------------------------------------------------------------ */
.chat{position:fixed;right:20px;bottom:20px;z-index:120;font-size:.98rem}
.chat__btn{display:flex;align-items:center;gap:10px;min-height:56px;padding:0 22px 0 18px;border:0;border-radius:var(--pastille);background:var(--encre);color:#fff;font:500 1.02rem var(--f-titre);cursor:pointer;box-shadow:0 10px 30px rgba(8,24,58,.3)}
.chat__btn svg{width:24px;height:24px}
.chat__btn:hover{background:var(--encre-2)}
.chat.is-open .chat__btn{display:none}
.chat__panel{position:absolute;right:0;bottom:0;width:min(380px,calc(100vw - 24px));height:min(600px,calc(100vh - 110px));display:flex;flex-direction:column;background:#fff;border-radius:var(--pastille);box-shadow:0 20px 60px rgba(8,24,58,.3);overflow:hidden}
.chat__panel[hidden]{display:none}
.chat__head{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:16px 14px 14px 18px;background:var(--encre);color:#fff}
.chat__head .chips{flex-direction:column;gap:3px}
.chat__head .chips .chip{width:14px;height:5px;border-radius:3px 1px 3px 1px}
.chat__titre{margin:0;font:500 1.08rem var(--f-titre)}
.chat__sous{margin:0;font-size:.8rem;color:#A9B3C7}
.chat__close{display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:10px 2px 10px 2px;background:rgba(255,255,255,.1);color:#fff;cursor:pointer}
.chat__close svg{width:18px;height:18px}
.chat__log{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:10px;background:var(--gris)}
.chat__msg{max-width:88%;padding:11px 14px;line-height:1.5;white-space:pre-line}
.chat__msg--bot{align-self:flex-start;background:#fff;border-radius:3px 14px 14px 14px;border:1px solid var(--gris-2)}
.chat__msg--moi{align-self:flex-end;background:var(--encre);color:#fff;border-radius:14px 3px 14px 14px}
.chat__msg a{color:var(--bleu-t);font-weight:600}
.chat__msg a[href^="tel"]{white-space:nowrap}
.chat__typing{align-self:flex-start;display:flex;gap:4px;padding:14px;background:#fff;border-radius:3px 14px 14px 14px}
.chat__typing span{width:7px;height:7px;border-radius:50%;background:var(--encre-70);animation:tape 1s infinite}
.chat__typing span:nth-child(2){animation-delay:.15s}.chat__typing span:nth-child(3){animation-delay:.3s}
@keyframes tape{50%{opacity:.25}}
.chat__suggest{display:flex;flex-wrap:wrap;gap:6px;padding:10px 14px 0;background:#fff}
.chat__suggest:empty{display:none}
.chat__suggest button{padding:7px 12px;border:1.5px solid var(--gris-2);border-radius:10px 2px 10px 2px;background:#fff;font:500 .88rem var(--f-texte);color:var(--encre);cursor:pointer}
.chat__suggest button:hover{border-color:var(--encre)}
.chat__form{display:flex;gap:8px;padding:12px 14px 14px;background:#fff;border-top:1px solid var(--gris)}
.chat__form input{flex:1;min-height:46px;padding:10px 14px;border:1.5px solid #B9C0CC;border-radius:var(--pastille-s);font:inherit}
.chat__form input:focus{outline:none;border-color:var(--bleu)}
.chat__form button{width:46px;border:0;border-radius:var(--pastille-s);background:var(--bleu);color:var(--encre);cursor:pointer}
.chat__form button svg{width:20px;height:20px;margin:auto}
@media (max-width:760px){
  .chat{right:12px;bottom:76px}
  .chat__btn span{display:none}
  .chat__btn{width:56px;padding:0;justify-content:center}
  .chat.is-open{left:12px}
  .chat__panel{width:100%;height:calc(100vh - 100px)}
}
@media (prefers-reduced-motion:reduce){.chat__typing span{animation:none}}

/* 404 ------------------------------------------------------------------------- */
.page-404{min-height:60vh;display:grid;align-items:center}
.page-404 .chips{margin-bottom:28px}
.page-404 .chips .chip{width:44px;height:20px;border-radius:9px 2px 9px 2px}