/* configurateurs.css — page « Configurateurs », 6 oct. 2026.
 * Gabarit de https://tylko.com/fr-fr/configurator-intro (Jeremy : « créé une page
 * comme celle-ci ») : grille de produits à configurer, rendu du produit sur fond
 * clair, étapes, réassurance. Charte du site : Poppins, --ink, --bone, marges .wrap.
 * Bandeau et bloc contact : mêmes valeurs que inspiration.css. */

.cf-bandeau{background:var(--bone);padding:clamp(72px,9vw,110px) 0 clamp(36px,5vw,56px)}
.cf-titre-page{font-family:"Poppins",-apple-system,sans-serif;font-weight:500;line-height:1.1;letter-spacing:-.02em;
  font-size:clamp(2rem,4.2vw,3.2rem);color:var(--ink);margin:14px 0 0;text-wrap:balance}
.cf-titre-page em,.cf-h2 em,.cf-motion-txt h2 em,.cf-contact h2 em{font-style:normal;font-weight:300}
.cf-lede{max-width:62ch;color:var(--ink-soft);font-size:1.05rem;line-height:1.6;margin:16px 0 0}

/* Grille des produits */
.cf-page{background:#fff;padding:clamp(40px,5vw,64px) 0 clamp(48px,6vw,80px)}
.cf-grille{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.5rem}
.cf-carte{display:flex;flex-direction:column;border-radius:24px;overflow:hidden;background:#fff;
  border:1px solid var(--line-soft);text-decoration:none;color:var(--ink);transition:box-shadow .25s ease,transform .25s ease}
.cf-carte:hover{box-shadow:0 22px 50px -28px rgba(15,22,27,.45);transform:translateY(-3px)}
.cf-carte:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.cf-carte-img{position:relative;display:block;aspect-ratio:4/3;flex:none;
  background:linear-gradient(180deg,#f2f4f5,#e6eaed)}
.cf-carte-img img{position:absolute;left:9%;top:12%;width:82%;height:76%;object-fit:contain;display:block;
  transform:scale(var(--s,1)) scaleX(var(--m,1));transition:transform .4s ease}
.cf-carte:hover .cf-carte-img img{transform:scale(calc(var(--s,1) * 1.05)) scaleX(var(--m,1))}
/* 12 oct. 2026 (Jeremy : « mets tous les produits tournés vers la gauche (donc change garde corps
   en verre, pergola bio, pergola photo, paravent wind) ») : même miroir que leurs cartes du menu
   (menu.css), pour que tous les rendus fuient vers la gauche. Fichiers inchangés. */
.cf-carte-img img[src*="garde-corps-en-verre-design"],
.cf-carte-img img[src*="3d-pergola-bioclimatique-glass-systems"],
.cf-carte-img img[src*="eluz-pergola-solaire-photovoltaique-autoportee"],
.cf-carte-img img[src*="paravent-glass-systems"]{--m:-1}
.cf-pastille{position:absolute;top:14px;left:14px;padding:5px 11px;border-radius:999px;background:#fff;
  font:600 .74rem "Hanken Grotesk",sans-serif;letter-spacing:.06em;color:var(--ink)}
.cf-carte-txt{display:flex;flex-direction:column;flex:1;padding:22px 22px 24px}
.cf-sur{font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;color:#5b6670}
.cf-nom{font-family:"Poppins",-apple-system,sans-serif;font-weight:500;font-size:clamp(1.15rem,1.4vw,1.4rem);
  line-height:1.2;letter-spacing:-.01em;margin:6px 0 8px}
.cf-accroche{font-size:.94rem;line-height:1.5;color:var(--ink-soft)}
.cf-reglages{display:flex;flex-direction:column;gap:7px;margin:16px 0 22px;padding-top:16px;border-top:1px solid var(--line-soft)}
.cf-reglages span{position:relative;padding-left:20px;font-size:.88rem;line-height:1.4;color:var(--ink)}
.cf-reglages span::before{content:"";position:absolute;left:2px;top:.42em;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.cf-btn{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:10px;padding:12px 20px;border-radius:999px;
  background:var(--ink);color:#fff;font:600 .92rem "Hanken Grotesk",sans-serif;white-space:nowrap;transition:background .2s}
.cf-carte:hover .cf-btn{background:#000}
.cf-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.cf-carte:hover .cf-btn svg{transform:translateX(3px)}

/* Étapes */
.cf-etapes-sec{background:var(--bone);padding:clamp(56px,7vw,96px) 0}
.cf-h2{font-family:"Poppins",-apple-system,sans-serif;font-weight:500;font-size:clamp(1.8rem,3.4vw,2.7rem);
  letter-spacing:-.02em;line-height:1.1;color:var(--ink);margin:0 0 clamp(28px,4vw,48px)}
.cf-etapes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}
.cf-etapes li{background:#fff;border-radius:24px;padding:28px 26px}
.cf-num{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;
  background:var(--ink);color:#fff;font:600 1rem "Poppins",sans-serif}
.cf-etapes h3{font-family:"Poppins",-apple-system,sans-serif;font-weight:500;font-size:1.15rem;margin:18px 0 8px;color:var(--ink)}
.cf-etapes p{margin:0;font-size:.95rem;line-height:1.55;color:var(--ink-soft)}

/* Bande vidéo */
.cf-motion-sec{background:#fff;padding:clamp(56px,7vw,96px) 0}
.cf-motion{position:relative;overflow:hidden;border-radius:24px;aspect-ratio:2/1;background:#dfe6ec}
.cf-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.cf-motion::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,22,27,.6),rgba(15,22,27,0) 60%);pointer-events:none}
.cf-motion-txt{position:absolute;z-index:2;left:clamp(22px,4vw,56px);bottom:clamp(22px,4vw,56px);max-width:440px;color:#fff}
.cf-motion-txt h2{font-family:"Poppins",-apple-system,sans-serif;font-weight:500;font-size:clamp(1.6rem,3vw,2.5rem);
  letter-spacing:-.02em;line-height:1.1;margin:0 0 12px;color:#fff}
.cf-motion-txt p{margin:0;font-size:1rem;line-height:1.55;color:rgba(255,255,255,.92)}

/* Contact (inspiration.css) */
.cf-contact{background:#f5f7f9;padding:clamp(56px,7vw,96px) 0}
.cf-contact-in{text-align:center}
.cf-contact h2{font-family:"Poppins",-apple-system,sans-serif;font-weight:500;font-size:clamp(2rem,4vw,3.4rem);
  letter-spacing:-.02em;line-height:1.1;color:#001d6d;margin:0 0 14px}
.cf-contact p{color:var(--ink-soft);max-width:60ch;margin:0 auto 26px}
.cf-contact-btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

@media (max-width:1199px){ .cf-grille{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:860px){ .cf-etapes{grid-template-columns:1fr} }
@media (max-width:760px){
  .cf-motion{aspect-ratio:4/5}
  .cf-motion::after{background:linear-gradient(0deg,rgba(15,22,27,.7),rgba(15,22,27,0) 60%)}
}
@media (max-width:860px){ body .cf-bandeau .wrap,body .cf-page .wrap,body .cf-etapes-sec .wrap,body .cf-motion-sec .wrap,body .cf-contact .wrap{padding-left:24px;padding-right:24px} }
@media (max-width:640px){ .cf-grille{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){ .cf-carte,.cf-carte-img img,.cf-btn svg{transition:none} .cf-carte:hover{transform:none} }