/* ============================================
   Landing page (from Eleventy)
   ============================================ */

/* Hero */
.hero {
  background: linear-gradient(160deg, #fff 0%, #fef2f2 50%, #fde8e8 100%);
  padding: 3.5rem 0 3rem;
  position: relative;
}
.hero::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--rouge),#ff6b6b,var(--rouge))}
.hero-grille { 
  display: grid; grid-template-columns: 1.3fr .7fr;
  gap: 3rem; align-items: center;
}
.surtitre {
  text-transform: uppercase; letter-spacing: .12em; font-size: .75rem;
  font-weight: 700; color: var(--rouge); margin-bottom: .5rem;
}
.hero h1 { 
  font-size: clamp(2.2rem,4.5vw,3.5rem); line-height: 1.08;
  margin-bottom: 1rem; font-family: var(--font-display);
  font-weight: 700; letter-spacing: -.02em;
  background: linear-gradient(135deg,var(--encre),var(--rouge));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.hero p { 
  font-size: 1.08rem; color: var(--encre-doux); 
  max-width: 34rem; margin-bottom: 1.8rem; line-height: 1.7;
}
.hero-visuel {
  aspect-ratio: 1/1; max-width: 320px; margin-inline: auto;
  border-radius: 50%; position: relative;
  display: grid; place-items: center; overflow: hidden;
}
.hero-pulse{position:absolute;width:100%;height:100%;border-radius:50%;background:radial-gradient(circle,rgba(226,35,26,.08),transparent 70%);animation:pulse 3s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(.9);opacity:.5}50%{transform:scale(1.2);opacity:1}}

/* Sections */
section { padding: 3rem 0; }
.titre-section { 
  text-align: center; margin-bottom: .5rem; font-size: 2rem;
  font-family: var(--font-display); font-weight: 700; letter-spacing: -.01em;
}
.sous-titre-section { 
  text-align: center; color: var(--gris); 
  max-width: 50rem; margin: 0 auto 3rem; font-size: 1.02rem;
}

/* Products cards */
.produits { background: var(--fond-doux); }
.produits-compact{padding:3rem 0}
.grille-produits {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}
.carte-produit {
  background: var(--fond); border: 1px solid var(--bordure);
  border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column;
  transition: all .25s ease;
}
.carte-produit:hover {
  transform: translateY(-5px);
  box-shadow: var(--ombre-lg);
}
.produit-visuel {
  aspect-ratio: 4/3; background: #fff;
  display: grid; place-items: center; border-bottom: 1px solid var(--bordure-legere);
}
.produit-visuel img{width:100%;height:100%;object-fit:contain;padding:1rem;transition:transform .3s ease}
.carte-produit:hover .produit-visuel img{transform:scale(1.05)}
.produit-infos { 
  padding: 1.1rem 1.2rem 1.4rem;
  display: flex; flex-direction: column; gap: .4rem; flex: 1;
}
.produit-infos h3 { 
  font-size: .95rem; line-height: 1.4; font-weight: 600;
  flex: 1; color: var(--encre);
}
.prix { 
  font-weight: 800; color: var(--rouge); font-size: 1.1rem;
  font-family: var(--font-display);
}
.ajout {
  align-self: flex-start; font-size: .8rem; font-weight: 700;
  color: var(--rouge); border: 1.5px solid var(--rouge);
  border-radius: var(--radius-pill);
  padding: .35rem .95rem; transition: all .2s;
}
.carte-produit:hover .ajout { background: var(--rouge); color: #fff; }

/* Avantages */
.grille-avantages {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1.5rem;
}
.carte-avantage {
  border: 1px solid var(--bordure); border-radius: var(--radius);
  padding: 1.8rem; background: var(--fond);
  transition: all .2s;
}
.carte-avantage:hover { border-color: var(--rouge-clair); box-shadow: var(--ombre-sm); }
.carte-avantage .icone {
  width: 44px; height: 44px; border-radius: var(--radius-sm);
  background: var(--rouge-clair); color: var(--rouge);
  display: grid; place-items: center; font-size: 1.3rem;
  margin-bottom: 1rem;
}
.carte-avantage h3 { font-size: 1.02rem; margin-bottom: .35rem; }
.carte-avantage p { font-size: .9rem; color: var(--gris); line-height: 1.65; }

/* Étapes */
.etapes-cartes{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.etape-carte{text-align:center;border:1px solid var(--bordure);border-radius:var(--radius);padding:2rem 1.5rem;background:var(--fond);transition:all .2s}
.etape-carte:hover{transform:translateY(-3px);box-shadow:var(--ombre-md);border-color:var(--rouge-clair)}
.etape-carte .etape-icone{font-size:2rem;display:block;margin:0 auto .8rem;width:52px;height:52px;display:grid;place-items:center;background:var(--rouge-clair);border-radius:var(--radius-sm)}
.etape-carte h3{font-size:1.05rem;margin-bottom:.4rem;font-family:var(--font-display)}
.etape-carte p{font-size:.9rem;color:var(--gris);line-height:1.6;margin:0}

/* Témoignages */
.temoignages-grille{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.temoignage-card{background:var(--fond);border:1px solid var(--bordure);border-radius:var(--radius);padding:1.8rem;transition:all .2s;border-left:3px solid var(--rouge);background:linear-gradient(135deg,#fff,#fef2f2)}
.temoignage-card:hover{box-shadow:var(--ombre-md)}
.temoignage-stars{font-size:1.1rem;margin-bottom:.8rem;letter-spacing:2px}
.temoignage-card p{font-size:.92rem;color:var(--encre-doux);line-height:1.7;font-style:italic;margin-bottom:1rem}
.temoignage-auteur{font-size:.82rem;color:var(--gris);font-weight:500}

/* CTA */
.cta-section{background:linear-gradient(160deg,var(--rouge),var(--rouge-fonce));color:#fff;text-align:center;padding:3rem 0;position:relative;overflow:hidden}
.cta-section::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(255,255,255,.05),transparent 60%)}
.cta-section h2{font-size:clamp(1.5rem,3vw,2rem);margin-bottom:.5rem;font-family:var(--font-display);color:#fff}
.cta-section p{margin-bottom:1.5rem;opacity:.9;color:rgba(255,255,255,.85)}
.cta-section .bouton.btn-white{background:#fff;color:var(--encre)}
.cta-section .bouton.btn-white:hover{background:#f3f4f6;box-shadow:var(--ombre-md)}

/* Assistants vocaux */
.assistants { background: var(--encre); color: #fff; }
.assistants .titre-section { color: #fff; }
.assistants .sous-titre-section { color: #a0a0b0; }
.logos-assistants { 
  display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem;
}
.puce-assistant {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-pill);
  padding: .65rem 1.4rem; font-weight: 600;
  font-size: .9rem;
  display: flex; align-items: center; gap: .5rem;
  transition: background .15s;
}
.puce-assistant:hover { background: rgba(255,255,255,.12); }

/* Aide */
.grille-aide {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.2rem;
}
.carte-aide {
  text-align: center; border: 1px solid var(--bordure);
  border-radius: var(--radius); padding: 2.2rem 1.4rem;
  transition: all .25s ease; background: var(--fond);
}
.carte-aide:hover {
  border-color: var(--rouge); transform: translateY(-4px);
  box-shadow: var(--ombre-md);
}
.carte-aide .icone { font-size: 2rem; margin-bottom: .7rem; }
.carte-aide h3 { font-size: 1.02rem; margin-bottom: .2rem; }
.carte-aide p { font-size: .85rem; color: var(--gris); }

/* Réassurance */
.reassurance { 
  background: var(--fond-doux); padding: 2rem 0;
  border-top: 1px solid var(--bordure-legere);
}
.grille-reassurance {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem; text-align: center;
}
.grille-reassurance div { font-size: .9rem; color: var(--encre-doux); }
.grille-reassurance strong { display: block; font-size: .95rem; color: var(--encre); font-family: var(--font-display); }

/* FAQ */
.faq-list { margin: 1.5rem 0; max-width:600px;margin:0 auto}
.faq-item {
  border: 1px solid var(--bordure); border-radius: var(--radius-sm);
  margin-bottom: .5rem; overflow: hidden;
}
.faq-item summary {
  padding: .9rem 1.2rem; cursor: pointer; font-weight: 600;
  font-size: .92rem; transition: background .15s;
  color: var(--encre);
}
.faq-item summary:hover { background: var(--fond-doux); }
.faq-item[open] { border-color: var(--rouge); box-shadow: 0 0 0 1px rgba(226,35,26,.15); }
.faq-item[open] summary { color: var(--rouge); border-bottom: 1px solid var(--bordure-legere); }
.faq-item p { padding: 1rem 1.2rem; margin: 0; font-size: .9rem; line-height: 1.7; color: var(--encre-doux); }
.faq-cta{text-align:center;margin-top:1.5rem;font-size:.9rem;color:var(--gris)}
.faq-cta a{color:var(--rouge);font-weight:500}

/* Bouton blanc */
.btn-white{background:#fff!important;color:var(--encre)!important}
.btn-white:hover{background:#f3f4f6!important}

/* Responsive landing */
@media(max-width:768px){
  .hero-grille{grid-template-columns:1fr;text-align:center}
  .hero p{margin:0 auto 1.8rem}
  .hero-visuel{max-width:200px}
  .etapes-cartes,.temoignages-grille{grid-template-columns:1fr}
  .grille-produits{grid-template-columns:1fr}
  .hero h1{font-size:1.8rem}
  .cta-section{padding:2.5rem 0}
}