/* Pages de contenu (solutions, café, durabilité, ressources, contact) */
.pg-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center}
.pg-hero.solo{grid-template-columns:minmax(0,1fr);max-width:860px}
.ph-hero{aspect-ratio:5/4;overflow:hidden;background:var(--surface)}
.ph-hero img{width:100%;height:100%;object-fit:cover}

.cards{display:grid;gap:16px}
.cards.c4{grid-template-columns:repeat(4,1fr)}
.cards.c3{grid-template-columns:repeat(3,1fr)}
.card{padding:28px 24px;background:var(--white);border:1px solid var(--line);transition:transform .4s var(--ease),box-shadow .4s}
.card:hover{transform:translateY(-4px);box-shadow:0 24px 50px -30px rgba(20,20,19,.35)}
.card svg{width:28px;height:28px;color:var(--ink);display:block;margin-bottom:24px}
.card h3{font-size:19px;font-weight:500;letter-spacing:-.01em;color:var(--ink);margin-bottom:8px}
.card p{font-size:15px;color:var(--muted)}
.dark .incl.four div{padding:28px 24px}

.duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center}
.duo.inv>div:first-child{order:2}
.duo p.txt{font-size:17px;line-height:1.7;color:var(--text);margin-bottom:14px;max-width:60ch}
.split-img{aspect-ratio:4/3;overflow:hidden;background:var(--surface)}
.split-img img{width:100%;height:100%;object-fit:cover}
.checks{list-style:none;display:grid;gap:10px;margin-top:20px}
.checks li{display:flex;gap:12px;font-size:15.5px;color:var(--ink)}
.checks svg{flex:none;width:18px;height:18px;margin-top:3px;color:var(--brass)}

.cafe-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cafe-c{display:grid;grid-template-columns:110px 1fr;gap:18px;padding:16px;background:var(--white);border:1px solid var(--line);align-items:center;transition:border-color .3s}
.cafe-c:hover{border-color:var(--ink)}
.cafe-c .cimg{aspect-ratio:1/1;background:var(--bg);overflow:hidden}
.cafe-c img{width:100%;height:100%;object-fit:cover}
.cafe-c b{font-size:24px;font-weight:500;letter-spacing:-.02em;color:var(--ink)}
.cafe-c .pf{font-size:13px;color:var(--brass);font-weight:500;margin:2px 0 6px}
.cafe-c p{font-size:14px;color:var(--muted)}

.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.post{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);transition:transform .4s var(--ease),box-shadow .4s,border-color .3s}
.post:hover{transform:translateY(-4px);border-color:var(--line-2);box-shadow:0 24px 50px -30px rgba(20,20,19,.35)}
.post[hidden]{display:none}
.post .pimg{aspect-ratio:16/10;overflow:hidden;background:var(--surface)}
.post .pimg img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.post:hover .pimg img{transform:scale(1.04)}
.post .pb{padding:22px 22px 26px}
.post .pc{font-size:12.5px;color:var(--brass);font-weight:500}
.post h3{font-size:19px;font-weight:500;line-height:1.3;letter-spacing:-.01em;color:var(--ink);margin:8px 0}
.post p{font-size:14.5px;color:var(--muted)}

.contact-g{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,5vw,80px);align-items:start}
.c-info{display:grid;gap:28px}
.c-info .eyebrow{display:flex;margin-bottom:6px}
.c-info a.big{display:block;font-size:clamp(28px,3vw,40px);font-weight:300;letter-spacing:-.03em;color:var(--ink)}
.c-info p{color:var(--text)}
.c-info .muted{color:var(--muted);font-size:14.5px;margin-top:6px}
.c-quick{display:grid;border-top:1px solid var(--line)}
.c-quick a{display:flex;gap:12px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line);color:var(--ink)}
.c-quick svg{width:18px;height:18px;color:var(--brass)}
.card-form{padding:clamp(24px,3vw,36px);border:1px solid var(--line);background:var(--white)}
.card-form .full{grid-column:1/-1}
.card-form textarea{padding:12px 14px;border:1px solid var(--line-2);font:inherit;border-radius:0;resize:vertical}

@media (max-width:1100px){
  .cards.c4{grid-template-columns:repeat(2,1fr)}
  .cafe-grid,.posts{grid-template-columns:repeat(2,1fr)}
  .incl.four[style]{grid-template-columns:repeat(2,1fr)!important}
}
@media (max-width:920px){
  .pg-hero,.duo,.contact-g{grid-template-columns:1fr}
  .duo.inv>div:first-child{order:0}
  .cards.c3{grid-template-columns:1fr}
}
@media (max-width:600px){
  .cards.c4,.cafe-grid,.posts{grid-template-columns:1fr}
  .incl.four[style]{grid-template-columns:1fr!important}
}

/* Service sur site : deux modes de paiement */
.modes{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.mode{padding:clamp(24px,3vw,40px);border:1px solid var(--line);background:var(--white)}
.mode h3{font-size:24px;font-weight:500;letter-spacing:-.02em;color:var(--ink);margin:10px 0 18px}
.mode-big{font-size:clamp(34px,3.6vw,48px);font-weight:300;letter-spacing:-.03em;color:var(--ink);line-height:1;padding-bottom:20px;border-bottom:1px solid var(--line)}
.mode-big small{display:block;font-size:14px;letter-spacing:0;color:var(--muted);margin-top:8px}
@media (max-width:920px){.modes{grid-template-columns:1fr}}
.cafe-c .int{display:flex;gap:4px;margin:2px 0 8px}
.cafe-c .int i{width:9px;height:9px;border-radius:50%;border:1px solid var(--ink)}
.cafe-c .int i.on{background:var(--ink)}

/* Configurateur « Trouver mon café » */
.finder{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);border:1px solid var(--line);background:var(--white);margin-bottom:40px}
.fd-q{padding:clamp(24px,3vw,40px)}
.fd-q .h3{margin:12px 0 24px}
.fq{border:0;padding:0;margin:0 0 20px}
.fq legend{font-size:14.5px;font-weight:500;color:var(--ink);margin-bottom:10px}
.fq-c{display:flex;flex-wrap:wrap;gap:8px}
.fq-c label{cursor:pointer}
.fq-c input{position:absolute;opacity:0;pointer-events:none}
.fq-c span{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border:1px solid var(--line-2);font-size:14px;color:var(--text);transition:background .2s,border-color .2s,color .2s}
.fq-c label:hover span{border-color:var(--ink)}
.fq-c input:checked+span{background:var(--ink);border-color:var(--ink);color:#fff}
.fq-c input:focus-visible+span{outline:2px solid var(--ink);outline-offset:2px}
.fd-r{padding:clamp(24px,3vw,40px);background:var(--espresso);color:#ECECE8;display:flex;flex-direction:column;align-items:flex-start}
.fd-r .eyebrow{color:var(--muted-d)}
.fd-r img{width:100%;max-width:300px;aspect-ratio:1;object-fit:cover;margin:18px 0;align-self:center}
.fd-r b{font-size:clamp(36px,4vw,52px);font-weight:500;letter-spacing:-.03em;line-height:1;color:#fff}
.fd-r #fd-b{font-size:17px;margin-top:6px}
.fd-why{font-size:13.5px;color:var(--muted-d);margin:10px 0 22px;padding-left:12px;border-left:2px solid var(--fluo)}
.fd-a{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto}
.fd-r .btn{background:#fff;color:var(--ink);border-color:#fff}
.fd-r .btn.line{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.cafe-c.match{border-color:var(--ink);box-shadow:inset 0 -3px 0 var(--fluo)}
@media (max-width:920px){.finder{grid-template-columns:1fr}}
.fd-r img{height:auto}

/* Base de connaissance : notices par marque puis par modèle */
.docs-b+.docs-b{margin-top:48px}
.docs-b>.h3{padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:18px}
.docs-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.doc-m{padding:22px;border:1px solid var(--line);background:var(--white)}
.doc-m h3{font-size:18px;font-weight:500;color:var(--ink);margin-bottom:12px}
.doc-m ul{list-style:none;display:grid;gap:2px}
.doc-m a{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line);color:var(--ink);font-size:15px}
.doc-m a:hover span{text-decoration:underline}
.doc-m svg{width:18px;height:18px;flex:none;color:var(--muted)}
.doc-m small{margin-left:auto;font-size:12px;color:var(--soft);letter-spacing:.04em}