/* Mise en page des sections de l'accueil (mobile d'abord), chargée en dernier.
   Rythme : nuit (haut de page), blanc (artisans), brume (tarifs), nuit (restaurants), brume (questions), nuit (contact). */

.sec{padding:var(--sec-y) 0}
.sec--mist{background:var(--brume)}
.sec--nuit{background:var(--nuit);color:var(--dk-text)}
.sec--nuit h2,.sec--nuit h3{color:#fff}
.sec--nuit .lead{color:var(--dk-text)}
.sec-head{margin-bottom:clamp(24px,4vw,48px)}
.sec-head .lead{max-width:36em;margin-top:14px}
@media (min-width:960px){
  .sec-head--split{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:64px;align-items:end}
  .sec-head--split .lead{margin:0}
}

/* Haut de page : texte à gauche, téléphone à droite (sous le texte sur mobile, visible dès le premier écran) */
.hero{background:var(--nuit);color:var(--dk-text)}
.hero-grid{display:grid;gap:20px;padding-top:16px;padding-bottom:24px}
.hero-text{display:grid;gap:12px;align-content:start}
.hero h1{color:#fff}
.hero .lead{max-width:30em;color:var(--dk-text)}
.hero .offer{margin-top:4px}
.hero .tva{margin-top:-4px}
.hero-cta{display:none}
@media (min-width:600px){.hero-text{gap:18px}}
@media (min-width:960px){
  .hero-grid{grid-template-columns:minmax(0,1fr) minmax(360px,440px);column-gap:56px;padding-top:48px;padding-bottom:64px}
  .hero-text{gap:22px;padding-top:28px}
  .hero .tva{margin-top:-12px}
  .hero-cta{display:flex}
}
@media (min-width:600px) and (max-width:959px){.scene--hero,.scene--tools,.scene--resto{width:100%;max-width:560px;justify-self:center}}
@media (min-width:960px) and (max-width:1179px){.hero-grid{grid-template-columns:minmax(0,1fr) 380px}.hero-cta .btn{padding:0 20px}.cta-long{display:none}}
@media (min-width:1180px){.hero-grid{column-gap:80px}}

/* Artisans : étapes, puis la scène ; la parole de Google ferme le chapitre, juste avant les tarifs.
   Grand écran : la scène à gauche, les étapes à droite, la citation en bandeau sur toute la largeur. */
.art-grid{display:grid;gap:30px}
.art-head h2{margin-bottom:22px}
.art-grid>.quote{margin-top:4px}
@media (min-width:960px){
  .art-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:72px;row-gap:64px}
  .scene--tools{grid-column:1;grid-row:1}
  .art-text{grid-column:2;grid-row:1;align-self:center}
  .art-grid>.quote{grid-column:1/-1;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:64px;row-gap:14px;margin:0;padding-left:28px}
  .art-grid>.quote blockquote:first-child{grid-row:span 2}
  .art-grid>.quote blockquote:first-child p{font-size:clamp(1.5rem,.9rem + 1.05vw,2rem);line-height:1.22;letter-spacing:-.028em}
  .art-grid>.quote blockquote+blockquote p{font-size:var(--fs-body)}
  .art-grid>.quote figcaption{grid-column:2;align-self:end}
}

/* Tarifs artisans : rangée qui défile sur mobile (la suivante dépasse), trois colonnes alignées sur grand écran */
.plans{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:calc(100% - 40px);gap:12px;margin-inline:calc(var(--gutter) * -1);padding:6px var(--gutter) 22px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);scrollbar-width:none}
.plans::-webkit-scrollbar{display:none}
.plans>.plan{scroll-snap-align:start}
.plans:focus-visible{outline-offset:-3px;border-radius:var(--r-md)}
.pl-hint{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:-4px;color:var(--muted);font:700 var(--fs-xs)/1.3 var(--font)}
.pl-hint .i{width:18px;height:18px}
#tarifs-artisans .tva{margin-top:14px;text-align:center}
@media (min-width:600px){.plans{grid-auto-columns:340px}}
@media (min-width:1000px){
  .plans{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:0;padding:0;overflow:visible}
  .plans .plan{display:grid;grid-row:span 7;grid-template-rows:subgrid;row-gap:12px;padding:28px 24px}
  .pl-hint{display:none}
  #tarifs-artisans .tva{margin-top:24px}
}
@media (min-width:1000px) and (max-width:1179px){.plans{gap:14px}.plans .plan{padding:24px 16px}.plans .btn{padding:0 12px;font-size:.9375rem}}

/* Restaurants (chapitre sombre) : texte et scène, puis l'offre en bandeau */
.resto-grid{display:grid;gap:28px}
.resto-text .lead{margin:14px 0 22px}
.resto-text .checks{padding-top:0;border:0;color:var(--dk-text);font-size:var(--fs-body)}
.plan--resto{margin-top:24px}
.pr-a,.pr-b,.pr-c{display:grid;gap:10px;align-content:start}
.pr-a .plan-st{display:flex}
.plan--resto .pr-a h3{font-size:1.0625rem;color:var(--muted);letter-spacing:-.01em}
.pr-zero{margin-top:-4px;color:var(--ink);font:800 clamp(1.625rem,1.4rem + 1vw,2.125rem)/1.1 var(--font);letter-spacing:-.035em;white-space:nowrap}
.pr-b{padding-top:14px;border-top:1px solid var(--trait)}
.pr-c .btn{margin:0}
#restaurants>.wrap>.tva{margin-top:14px}
@media (min-width:960px){
  .resto-grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:72px;align-items:center}
  .plan--resto{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center;margin-top:56px;padding:32px 36px}
  .pr-b{padding:0 0 0 40px;border-top:0;border-left:1px solid var(--trait)}
}
@media (min-width:960px) and (max-width:1179px){.plan--resto{grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr) minmax(0,1.3fr);column-gap:28px;padding:28px}.pr-b{padding-left:28px}}

/* Questions */
.faq-grid{display:grid;gap:16px}
.faq-head{display:grid;gap:14px;align-content:start}
.faq-head p{color:var(--muted)}
@media (max-width:959px){.faq-head .btn-row{display:none}}
@media (min-width:960px){
  .faq-grid{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:64px}
  .faq-head{position:sticky;top:calc(var(--hd-h) + 32px);align-self:start}
}

/* Qui vous répond, et contact : fin de page sombre */
.qui-grid{display:grid;gap:32px}
.qui-text{display:grid;gap:14px;max-width:34rem}
.qui-text h2{margin-bottom:2px}
.qui-text p:not(.lead){color:var(--dk-text)}
@media (min-width:960px){.qui-grid{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:80px;align-items:center}}