/* ============================================================
   VWF — la page des conciergeries. Même DA que le site (DA.md) :
   interface achromatique, la couleur vient du sujet (ici, le
   site modèle et les deux visages), aucune carte bordée, des
   pilules jamais colorées, le bleu volet seulement pour ce que
   le visiteur manipule. Tout est en clair : la page ne parle
   que de ce qu'on obtient.
   ============================================================ */
:root{
  --craie:#F5F4F1;
  --encre:#111113;
  --gris:#86868B;
  --second:#3A3A3C;
  --gris-lisible:#6B6B70; /* le gris de la DA, foncé pour les petits textes : 4,8:1 sur la craie */
  --volet:#2E7FA8;
  --gut:clamp(20px,5vw,72px);
  --max:1200px;
  --titre:'Bricolage Grotesque','Schibsted Grotesk',system-ui,sans-serif;
  --texte:'Schibsted Grotesk',system-ui,sans-serif;
  --r:22px;
  --ombre:0 24px 60px -30px rgba(17,17,19,.4);
  --ombre-basse:0 12px 32px -20px rgba(17,17,19,.45);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--craie);color:var(--encre);font-family:var(--texte);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--volet);outline-offset:3px;border-radius:6px}
h1,h2,h3{font-family:var(--titre);font-weight:800;letter-spacing:-.035em;line-height:.98;
  text-wrap:balance;font-variant-numeric:tabular-nums}
h1{font-size:clamp(40px,5.8vw,82px)}
h2{font-size:clamp(34px,5vw,72px);max-width:18ch;margin-inline:auto}
h3{font-size:clamp(20px,2vw,28px);letter-spacing:-.03em;line-height:1.08}
.lede{margin-top:22px;max-width:52ch;font-size:clamp(16px,1.25vw,21px);line-height:1.45;color:var(--second)}
.tag{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris-lisible);font-weight:500}
.w{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.sec{padding-block:clamp(96px,10vw,160px)}
.tete{text-align:center}
.tete .lede{margin-inline:auto}
.chiffre{font-variant-numeric:tabular-nums}

/* ---------- pilules ---------- */
.btn{display:inline-block;text-decoration:none;font-family:var(--texte);font-weight:700;
  font-size:15px;padding:15px 30px;border-radius:999px;transition:transform .2s ease,opacity .2s;
  white-space:nowrap;background:var(--encre);color:var(--craie);border:0;cursor:pointer}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:scale(.98)}
.btn.sec2{background:transparent;color:var(--encre);box-shadow:inset 0 0 0 1px rgba(17,17,19,.24)}
.lien{color:var(--volet);text-decoration:none;font-weight:500}
.lien:hover{text-decoration:underline}

/* ---------- barre ---------- */
.nav{position:sticky;top:0;z-index:50;height:64px;display:flex;align-items:center;
  justify-content:space-between;gap:16px;padding:0 var(--gut);
  background:rgba(245,244,241,.86);backdrop-filter:saturate(1.4) blur(14px);
  -webkit-backdrop-filter:saturate(1.4) blur(14px)}
.marque{font-family:var(--titre);font-weight:800;font-size:16px;letter-spacing:-.03em;text-decoration:none}
.nav .btn{padding:10px 20px;font-size:13px}
@media(max-width:520px){
  .marque{font-size:14px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .nav .btn{flex:none;padding:9px 14px;font-size:12px}
}

/* ---------- ouverture : la promesse, puis le site modèle en grand ---------- */
.ouv{padding-top:clamp(56px,8vw,112px);text-align:center}
.ouv h1{max-width:15ch;margin:18px auto 0}
.ouv .lede{margin-inline:auto}
.actions{margin-top:34px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.ouv .note{margin-top:18px;font-size:14px;color:var(--gris-lisible)}
.vitrine{margin-top:clamp(48px,6vw,84px)}
.vitrine a{display:block;border-radius:14px;overflow:hidden;box-shadow:var(--ombre);background:#fff;
  transition:transform .4s ease}
.vitrine a:hover{transform:translateY(-3px)}
.vitrine figcaption{margin-top:16px;font-size:13px;color:var(--gris-lisible)}
@media(max-width:560px){
  .vitrine a{max-width:300px;margin-inline:auto;border-radius:22px}
}

/* ---------- le déroulé ---------- */
.etapes{list-style:none;margin-top:clamp(48px,6vw,80px);display:grid;text-align:left;
  grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,22px);counter-reset:e}
.etapes li{background:#fff;border-radius:var(--r);padding:clamp(24px,2.4vw,34px);
  box-shadow:var(--ombre-basse);counter-increment:e}
.etapes li::before{content:counter(e);display:block;font-family:var(--titre);font-weight:800;
  font-size:15px;color:var(--gris);margin-bottom:22px;font-variant-numeric:tabular-nums}
.etapes h3{font-size:clamp(20px,1.7vw,24px)}
.etapes p{margin-top:12px;font-size:15.5px;line-height:1.5;color:var(--second)}

/* ---------- ce qu'un propriétaire cherche ---------- */
.cherche{margin-top:clamp(48px,6vw,80px);display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(30px,3.4vw,52px) clamp(24px,3vw,48px);list-style:none}
.cherche b{display:block;font-family:var(--titre);font-weight:800;font-size:clamp(20px,1.9vw,26px);
  letter-spacing:-.03em;line-height:1.08}
.cherche span{display:block;margin-top:10px;font-size:15.5px;line-height:1.5;color:var(--second)}

/* ---------- le prix ---------- */
.offre{margin:clamp(48px,6vw,80px) auto 0;max-width:820px;background:#fff;border-radius:var(--r);
  box-shadow:var(--ombre);padding:clamp(28px,4vw,56px);text-align:center}
.montant{font-family:var(--titre);font-weight:800;font-size:clamp(64px,9vw,120px);
  letter-spacing:-.05em;line-height:.9;font-variant-numeric:tabular-nums}
.offre .dit{margin-top:14px;font-size:clamp(16px,1.3vw,19px);line-height:1.45}
.offre .compris{margin:26px auto 0;max-width:46ch;font-size:15.5px;line-height:1.55;color:var(--second)}
.offre .tva{margin-top:14px;font-size:12.5px;color:var(--gris-lisible)}
.mois{margin:clamp(40px,4vw,56px) auto 0;max-width:820px}
.mois h3{text-align:center}
.mois .sous{text-align:center;margin-top:10px;font-size:15px;color:var(--second)}
.forfaits{list-style:none;margin-top:26px}
.forfaits li{display:grid;grid-template-columns:1fr auto;gap:4px 24px;align-items:baseline;
  padding:18px 4px;border-top:1px solid rgba(17,17,19,.1)}
.forfaits li:last-child{border-bottom:1px solid rgba(17,17,19,.1)}
.forfaits b{font-size:16px}
.forfaits .prix{font-family:var(--titre);font-weight:800;font-size:22px;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;text-align:right}
.forfaits small{grid-column:1/-1;font-size:14px;line-height:1.5;color:var(--gris-lisible)}
.retouches{margin-top:22px;text-align:center;font-size:14.5px;line-height:1.55;color:var(--second)}

/* ---------- l'équipe : deux visages sur le même fond ---------- */
.duo{margin:clamp(48px,6vw,80px) auto 0;max-width:860px;display:grid;
  grid-template-columns:1fr 1fr;gap:clamp(14px,2.4vw,32px)}
.duo figure{text-align:left}
.duo img{width:100%;aspect-ratio:800/1185;object-fit:cover;border-radius:14px;box-shadow:var(--ombre)}
.duo figcaption{margin-top:18px}
.duo .role{display:block;margin-top:6px;font-size:15px;font-weight:500}
.duo p{margin-top:8px;font-size:15px;line-height:1.5;color:var(--second)}

/* ---------- les questions ---------- */
.faq{margin:clamp(40px,5vw,64px) auto 0;max-width:780px}
.faq details{border-top:1px solid rgba(17,17,19,.1)}
.faq details:last-child{border-bottom:1px solid rgba(17,17,19,.1)}
.faq summary{list-style:none;cursor:pointer;padding:22px 40px 22px 0;position:relative;
  font-family:var(--titre);font-weight:700;font-size:clamp(18px,1.6vw,22px);letter-spacing:-.02em;line-height:1.2}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:18px;font-size:26px;font-weight:500;
  color:var(--gris);transition:transform .3s ease}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 40px 24px 0;font-size:16px;line-height:1.6;color:var(--second);max-width:62ch}

/* ---------- la demande ---------- */
.demande{background:#fff;border-radius:var(--r);box-shadow:var(--ombre);
  padding:clamp(34px,5vw,72px);text-align:center;max-width:900px;margin-inline:auto}
.demande h2{max-width:none;font-size:clamp(32px,4.2vw,60px)}
.demande .lede{margin-inline:auto}
.demande .mention{margin-top:20px;font-size:13.5px;color:var(--gris-lisible);line-height:1.5}

/* ---------- pied ---------- */
footer{padding:44px var(--gut) 56px;border-top:1px solid rgba(17,17,19,.1)}
.pied{max-width:var(--max);margin-inline:auto;display:flex;gap:10px 26px;flex-wrap:wrap;
  font-size:13px;color:var(--gris-lisible)}
.pied a{text-decoration:none}
.pied a:hover{color:var(--encre)}

/* ---------- ruptures (DA) ---------- */
@media(max-width:1000px){
  .etapes{grid-template-columns:repeat(2,1fr)}
  .cherche{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:820px){
  .cherche{grid-template-columns:1fr;gap:26px}
}
@media(max-width:560px){
  .etapes{grid-template-columns:1fr}
  .actions .btn{flex:1 1 100%;text-align:center}
  .duo figcaption h3{font-size:19px}
  .duo p{font-size:14px}
}