/* ═══════════════════════════════════════════════
   ELLES DESIGN — main.css — Responsive complet
   ═══════════════════════════════════════════════ */
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',sans-serif;color:#0A0A0A;background:#fff;line-height:1.6}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
h1,h2,h3,h4{font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;line-height:1.15}

/* ── LAYOUT ── */
.container{max-width:1280px;margin:0 auto;padding:0 2rem}
section{padding:5rem 0}
.bg-gris{background:#F8F8F6}
.bg-noir{background:#0A0A0A}

/* ── EYEBROW ── */
.eyebrow{font-size:.58rem;font-weight:800;letter-spacing:.25em;text-transform:uppercase;
  display:flex;align-items:center;gap:.6rem;margin-bottom:.875rem}
.eyebrow::before{content:'';display:block;width:20px;height:2px;background:currentColor}

/* ── TITRES ── */
.section-titre{font-size:clamp(1.6rem,3vw,2.8rem);margin-bottom:1.25rem}
.section-titre em{font-style:italic}
.section-sous{font-size:.88rem;color:#666;line-height:1.85;max-width:540px;margin-bottom:2.5rem}

/* ── GRILLES ── */
.grille{display:grid;gap:1.5rem}
.grille-3{grid-template-columns:repeat(3,1fr)}
.grille-4{grid-template-columns:repeat(4,1fr)}
.grille-2{grid-template-columns:repeat(2,1fr)}

/* ── CARTE PRODUIT ── */
.carte{background:#fff;border:1px solid #E8E8E5;border-radius:12px;overflow:hidden;
  transition:transform .25s,box-shadow .25s;display:block;color:inherit}
.carte:hover{transform:translateY(-5px);box-shadow:0 16px 48px rgba(0,0,0,.09)}
.carte-img{height:200px;overflow:hidden;position:relative}
.carte-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.carte:hover .carte-img img{transform:scale(1.06)}
.carte-body{padding:1.5rem}
.carte-cat{font-size:.58rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:#888;margin-bottom:.35rem}
.carte-titre{font-family:'Cormorant Garamond',serif;font-size:1.15rem;font-weight:600;margin-bottom:.45rem;line-height:1.25}
.carte-desc{font-size:.8rem;color:#666;line-height:1.7;margin-bottom:.875rem}
.carte-specs{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:1rem}
.spec{font-size:.62rem;font-weight:600;color:#555;background:#F8F8F6;
  border:1px solid #E8E8E5;border-radius:4px;padding:.18rem .55rem}
.carte-btn{display:inline-block;padding:.6rem 1.25rem;border-radius:6px;
  font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#fff}

/* ── HERO PAGES INTERNES ── */
.hero{position:relative;height:340px;overflow:hidden;display:flex;align-items:flex-end;
  margin-top:0}
.hero img.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-ov{position:absolute;inset:0;background:linear-gradient(to top,rgba(10,10,10,.88) 0%,rgba(10,10,10,.2) 100%)}
.hero-content{position:relative;z-index:2;padding:0 5% 3rem;max-width:800px}
.hero-content h1{font-size:clamp(1.8rem,4vw,3rem);font-weight:300;color:#fff}
.hero-content h1 em{font-style:italic}
.hero-content p{font-size:.88rem;color:rgba(255,255,255,.6);margin-top:.5rem}
.hero-cmyk{position:absolute;bottom:0;left:0;right:0;height:4px;display:flex;z-index:3}
.hero-cmyk span:nth-child(1){flex:1;background:#00AEEF}
.hero-cmyk span:nth-child(2){flex:1;background:#EC008C}
.hero-cmyk span:nth-child(3){flex:1;background:#FFF200}
.hero-cmyk span:nth-child(4){flex:1;background:#111}

/* ── BLOC CATEGORIE ── */
.cat-bloc{margin-bottom:4rem}
.cat-entete{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
  margin-bottom:2rem;padding-bottom:1.25rem;border-bottom:2px solid #E8E8E5;position:relative}
.cat-entete::after{content:'';position:absolute;bottom:-2px;left:0;width:50px;height:2px}
.cat-entete h2{font-size:1.6rem;font-weight:600}
.cat-entete p{font-size:.8rem;color:#888;margin-top:.2rem}
.btn-voir{font-size:.6rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:.6rem 1.25rem;border-radius:6px;color:#fff;white-space:nowrap;flex-shrink:0}

/* ── GALERIE ── */
.galerie{display:grid;grid-template-columns:repeat(4,1fr);gap:.875rem}
.gal-item{aspect-ratio:1/1;overflow:hidden;border-radius:10px;position:relative}
.gal-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.gal-item:hover img{transform:scale(1.08)}
.gal-ov{position:absolute;inset:0;background:linear-gradient(to top,rgba(10,10,10,.82),transparent 50%);
  opacity:0;transition:opacity .3s;display:flex;flex-direction:column;justify-content:flex-end;padding:.875rem}
.gal-item:hover .gal-ov{opacity:1}
.gal-titre{font-family:'Cormorant Garamond',serif;font-size:.92rem;color:#fff;font-weight:600}
.gal-sous{font-size:.65rem;color:rgba(255,255,255,.55);margin-top:.15rem}

/* ── CTA BANDE ── */
.cta-bande{background:#0A0A0A;padding:4rem 0;text-align:center}
.cta-bande h2{font-size:clamp(1.6rem,3vw,2.8rem);font-weight:300;color:#fff;margin-bottom:.875rem}
.cta-bande h2 em{font-style:italic;color:#00AEEF}
.cta-bande p{font-size:.88rem;color:rgba(255,255,255,.45);margin-bottom:2rem}
.cta-btns{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.btn-c{background:#00AEEF;color:#fff;padding:.875rem 2.25rem;border-radius:6px;font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;display:inline-block}
.btn-m{background:#EC008C;color:#fff;padding:.875rem 2.25rem;border-radius:6px;font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;display:inline-block}
.btn-g{background:#D4AF37;color:#fff;padding:.875rem 2.25rem;border-radius:6px;font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;display:inline-block}
.btn-w{background:#25D366;color:#fff;padding:.875rem 2.25rem;border-radius:6px;font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;display:inline-block}

/* ── STATS ── */
.stats{display:flex;border-bottom:1px solid #E8E8E5}
.stat{flex:1;padding:2rem;text-align:center;border-right:1px solid #E8E8E5}
.stat:last-child{border-right:none}
.stat-n{font-family:'Cormorant Garamond',serif;font-size:2.5rem;font-weight:300;line-height:1;margin-bottom:.3rem}
.stat-l{font-size:.58rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#888}

/* ── AVANTAGES ── */
.avantages{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-bottom:3rem}
.av-card{background:#fff;border:1px solid #E8E8E5;border-radius:12px;padding:1.5rem;transition:all .25s}
.av-card:hover{box-shadow:0 12px 36px rgba(0,0,0,.08)}
.av-titre{font-size:.95rem;font-weight:700;margin-bottom:.4rem}
.av-desc{font-size:.8rem;color:#666;line-height:1.7}

/* ── FORMULAIRE ── */
.form-group{margin-bottom:1.5rem}
.form-group label{display:block;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#555;margin-bottom:.5rem}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:.875rem 1rem;border:1.5px solid #E8E8E5;border-radius:6px;font-size:.88rem;font-family:'Inter',sans-serif;transition:border-color .2s;outline:none}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:#00AEEF}
.form-group textarea{height:140px;resize:vertical}
.form-submit{background:#00AEEF;color:#fff;border:none;padding:1rem 2.5rem;border-radius:6px;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;width:100%;transition:filter .2s}
.form-submit:hover{filter:brightness(1.1)}

/* ════════════════════════════════════════════
   RESPONSIVE — Mobile first
   ════════════════════════════════════════════ */

/* Tablette 900px */
@media(max-width:900px){
  .container{padding:0 1.5rem}
  section{padding:3.5rem 0}
  .grille-3{grid-template-columns:1fr 1fr}
  .grille-4{grid-template-columns:1fr 1fr}
  .avantages{grid-template-columns:1fr 1fr}
  .galerie{grid-template-columns:1fr 1fr 1fr}
  .stats .stat:nth-child(n){border-right:1px solid #E8E8E5}
  .stats .stat:last-child{border-right:none}
  .hero{height:280px}
  .hero-content{padding:0 5% 2rem}
}

/* Mobile 600px */
@media(max-width:600px){
  .container{padding:0 1rem}
  section{padding:2.5rem 0}

  /* Grilles */
  .grille-3,.grille-4,.grille-2{grid-template-columns:1fr}

  /* Stats 2 colonnes */
  .stats{flex-wrap:wrap}
  .stat{flex:0 0 50%;border-right:none;border-bottom:1px solid #E8E8E5;padding:1.5rem 1rem}
  .stat:nth-child(odd){border-right:1px solid #E8E8E5}
  .stat:nth-child(3),.stat:nth-child(4){border-bottom:none}
  .stat-n{font-size:2rem}

  /* Avantages */
  .avantages{grid-template-columns:1fr}

  /* Galerie */
  .galerie{grid-template-columns:1fr 1fr}

  /* Hero interne */
  .hero{height:220px}
  .hero-content h1{font-size:1.5rem}
  .hero-content p{font-size:.78rem}

  /* Carte */
  .carte-img{height:160px}
  .carte-body{padding:1rem}

  /* CTA bande */
  .cta-bande h2{font-size:1.5rem}
  .cta-btns{flex-direction:column;align-items:center;gap:.75rem}
  .cta-btns .btn-c,.cta-btns .btn-w,.cta-btns .btn-m{width:100%;max-width:320px;text-align:center}

  /* Cat entete */
  .cat-entete{flex-direction:column}
  .btn-voir{align-self:flex-start;margin-top:.5rem}

  /* Sections avec grid 2 colonnes */
  div[style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important}
}

/* Petit mobile 400px */
@media(max-width:400px){
  .container{padding:0 .875rem}
  .stat{padding:1.25rem .75rem}
  .stat-n{font-size:1.75rem}
}