/* Mise en page de « livraison-installation » — reprise telle quelle de la maquette validée le 29/08/2026. */

/* ---------- propre à la page livraison ---------- */
.lhero{padding:clamp(40px,5vw,72px) 0 clamp(32px,4vw,56px)}
.lhero h1{
  font-family:Newsreader,Georgia,serif; font-weight:400;
  font-size:clamp(32px,3.8vw,50px); line-height:1.06; letter-spacing:-.022em;
  margin:0 0 var(--s5); max-width:18ch; text-wrap:balance;
}

/* trois cas de figure : la carte porte un pictogramme, un titre, un texte court */
.cas{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:0}
.casbloc{
  display:flex; flex-direction:column; gap:var(--s3);
  padding:var(--s6) var(--s5); background:var(--surface);
}
.casbloc + .casbloc{border-left:1px solid var(--line)}
.casbloc .pic{width:64px; height:48px; color:var(--ink-3); margin-bottom:var(--s2)}
.casbloc .k{font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3)}
.casbloc h3{margin:0; font-size:18px}
.casbloc p{margin:0; font-size:14.5px; color:var(--ink-2); line-height:1.55}
.casbloc .arrow{margin-top:auto; padding-top:var(--s3)}
.casgrid{border:1px solid var(--line); border-radius:var(--radius-card); overflow:hidden}

/* trois types d'acheminement : plus compact encore */
.modes{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--s7) var(--s6)}
.mode{display:flex; gap:var(--s4); align-items:flex-start}
.mode svg{width:52px; height:40px; flex:none; color:var(--ink-3)}
.mode h3{margin:0 0 var(--s1); font-size:16px}
.mode p{margin:0; font-size:14.5px; color:var(--ink-2); line-height:1.5}

.deuxcol{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:var(--s9); align-items:start}
.deuxcol p{font-size:16px; line-height:1.65; color:var(--ink-2); max-width:62ch}
.deuxcol p + p{margin-top:var(--s4)}
.deuxcol p:last-child{margin-bottom:0}

.checklist{display:flex; flex-direction:column; margin:0; padding:0; list-style:none; counter-reset:c}
.checklist li{
  display:grid; grid-template-columns:28px 1fr; gap:var(--s4); align-items:baseline;
  padding:var(--s4) 0; border-top:1px solid var(--line-soft);
  font-size:15.5px; color:var(--ink-2);
}
.checklist li:first-child{border-top:0; padding-top:0}
.checklist li::before{
  counter-increment:c; content:counter(c);
  font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--wood);
}
.infos{display:flex; flex-direction:column; gap:var(--s2); margin:var(--s5) 0 0; padding:0; list-style:none}
.infos li{padding-left:var(--s5); position:relative; font-size:15px; color:var(--ink-2)}
.infos li::before{content:"·"; position:absolute; left:var(--s2); color:var(--wood); font-weight:700}

@media (max-width:900px){
  .deuxcol{grid-template-columns:1fr; gap:var(--s5)}
  .casbloc + .casbloc{border-left:0; border-top:1px solid var(--line)}
  .lhero .cta .btn{flex:1 1 100%}
}