/* ═══════════════════════════════════════
   styles-responsive.css — Atelier
   ═══════════════════════════════════════ */

/* ── TOPBAR ── */
@media(max-width:768px){
  .topbar{padding:0 16px;height:50px}
  .nav-menu{display:none}
  .topbar-hamburger{display:flex;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px;margin-left:4px}
  .topbar-hamburger span{display:block;width:20px;height:.5px;background:currentColor;transition:all .3s}
  .topbar-hamburger.open span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
  .topbar-hamburger.open span:nth-child(2){opacity:0}
  .topbar-hamburger.open span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
}
@media(min-width:769px){
  .topbar-hamburger{display:none}
  .mob-nav{display:none !important}
}

/* Menu mobile — Atelier (clair) */
.mob-nav{
  position:fixed;inset:0;z-index:500;
  background:rgba(244,237,224,.97);backdrop-filter:blur(16px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.8rem;
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .4s,visibility .4s;
}
.mob-nav.open{opacity:1;visibility:visible;pointer-events:auto}
.mob-nav a,.mob-nav button{
  font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:300;
  font-size:clamp(1.8rem,8vw,2.8rem);color:rgba(26,22,18,.65);
  text-decoration:none;background:none;border:none;cursor:pointer;
  opacity:0;transform:translateY(16px);
  transition:opacity .4s,transform .4s,color .3s;
}
.mob-nav.open a,.mob-nav.open button{opacity:1;transform:translateY(0)}
.mob-nav.open a:nth-child(1){transition-delay:.04s}
.mob-nav.open a:nth-child(2){transition-delay:.08s}
.mob-nav.open a:nth-child(3){transition-delay:.12s}
.mob-nav.open a:nth-child(4){transition-delay:.16s}
.mob-nav a:hover,.mob-nav button:hover{color:rgba(139,110,62,.9)}

/* ── HERO ATELIER ── */
@media(max-width:768px){
  .at-hero{min-height:auto;padding:80px 20px 40px}
  .at-hero-title{font-size:clamp(2.8rem,12vw,5rem);line-height:1}
  .at-hero-sub{font-size:clamp(14px,3.5vw,18px);line-height:1.6}
  .at-hero-cta{padding:12px 24px;font-size:10px}
}

/* ── SERVICES ── */
@media(max-width:768px){
  .at-services{padding:40px 16px 60px}
  .at-services-title{font-size:clamp(2rem,8vw,3rem)}
  .at-grid{grid-template-columns:1fr !important;gap:1px}
  .at-card{padding:24px 20px}
  .at-card-title{font-size:clamp(1.1rem,4vw,1.4rem)}
  .at-card-price{font-size:clamp(1.2rem,4vw,1.5rem)}
  .at-card-includes li{font-size:12px}
}

/* ── PORTFOLIO ── */
@media(max-width:768px){
  .at-portfolio{padding:40px 0 60px}
  .at-portfolio-grid{grid-template-columns:repeat(2,1fr) !important;gap:4px;padding:0 8px}
}
@media(max-width:420px){
  .at-portfolio-grid{grid-template-columns:1fr !important;padding:0 16px}
}

/* ── ABOUT ATELIER ── */
@media(max-width:768px){
  .at-about{flex-direction:column;padding:60px 16px;gap:2rem}
  .at-about-img{width:100%;height:55vw;min-height:220px}
  .at-about-title{font-size:clamp(2.5rem,9vw,3.5rem)}
}

/* ── CONTACT ATELIER ── */
@media(max-width:768px){
  .at-contact{flex-direction:column;padding:60px 16px 80px;gap:2rem}
  .at-contact-title{font-size:clamp(2.2rem,9vw,3.5rem)}
  .at-form input,.at-form textarea,.at-form select{font-size:14px;padding:10px 12px}
  .at-form-row{flex-direction:column;gap:0}
  .at-btn{padding:14px 24px;font-size:10px;width:100%;justify-content:center}
}

/* ── FOOTER ── */
@media(max-width:600px){
  .footer{padding:0 16px;height:40px}
  .footer-center{display:none}
}

/* ── PAGE PADDING ── */
.page{padding-top:50px !important;padding-bottom:40px !important}

/* ── 404 & LEGAL ── */
.page-404{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:calc(100vh - 90px);text-align:center;padding:2rem}
.p404-big{font-style:italic;font-size:clamp(5rem,18vw,12rem);color:rgba(139,110,62,.07);line-height:1}
.p404-t{font-style:italic;font-weight:300;font-size:clamp(1.4rem,4vw,2.2rem);color:rgba(26,22,18,.5);margin:.5rem 0}
.p404-s{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(26,22,18,.25);margin-bottom:2rem}
.p404-links{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}
.p404-link{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:rgba(139,110,62,.55);border:.5px solid rgba(139,110,62,.22);padding:.5rem 1rem;text-decoration:none;transition:all .3s}
.p404-link:hover{color:rgba(139,110,62,1);border-color:rgba(139,110,62,.5);background:rgba(139,110,62,.06)}

.legal-page{padding:80px clamp(16px,5vw,64px) 60px;max-width:720px;margin:0 auto;color:var(--atelier-ink)}
.legal-h1{font-style:italic;font-weight:300;font-size:clamp(2rem,6vw,3.5rem);margin-bottom:2rem;color:var(--atelier-accent)}
.legal-h2{font-style:italic;font-weight:300;font-size:clamp(1.1rem,2.5vw,1.4rem);color:rgba(139,110,62,.7);margin:2rem 0 .8rem}
.legal-p{font-weight:300;font-size:clamp(13px,1.5vw,15px);line-height:1.85;color:rgba(26,22,18,.45);margin-bottom:1rem}
.legal-p a{color:rgba(139,110,62,.7);text-decoration:none}

/* Cookie atelier */
.wz-cookie{position:fixed;bottom:44px;left:50%;transform:translateX(-50%);z-index:5000;display:none;max-width:min(92vw,500px);width:100%;background:rgba(244,237,224,.96);backdrop-filter:blur(12px);border:.5px solid rgba(139,110,62,.15);padding:.9rem 1.2rem;gap:.8rem;flex-wrap:wrap;align-items:center}
.wz-cookie.show{display:flex}
.ck-txt{font-style:italic;font-weight:300;font-size:clamp(12px,1.5vw,14px);color:rgba(26,22,18,.45);flex:1;min-width:160px;line-height:1.6}
.ck-txt a{color:rgba(139,110,62,.55);text-decoration:none}
.ck-btns{display:flex;gap:.5rem;flex-shrink:0}
.ck-btn{font-family:var(--mono);font-size:9px;letter-spacing:.15em;text-transform:uppercase;padding:.4rem .8rem;cursor:pointer;transition:all .3s;background:none}
.ck-ok{color:rgba(139,110,62,.75);border:.5px solid rgba(139,110,62,.28)}
.ck-ok:hover{background:rgba(139,110,62,.08)}
.ck-no{color:rgba(26,22,18,.28);border:.5px solid rgba(26,22,18,.1)}
.ck-no:hover{color:rgba(26,22,18,.55)}

/* ═══════════════════════════════════════════════════════
   ATELIER — CORRECTIONS RESPONSIVE COMPLÈTES
   ═══════════════════════════════════════════════════════ */

/* ── HERO ── */
@media (max-width: 900px) {
  .at-hero {
    grid-template-columns: 1fr !important;
    padding: 80px 24px 48px !important;
    gap: 40px !important;
  }
  .at-hero-right {
    height: 280px !important;
    width: 100% !important;
  }
}
@media (max-width: 600px) {
  .at-hero {
    padding: 70px 16px 36px !important;
    gap: 28px !important;
  }
  .at-hero-title {
    font-size: clamp(38px, 11vw, 64px) !important;
    line-height: 1 !important;
  }
  .at-hero-lead {
    font-size: 16px !important;
    margin: 20px 0 28px !important;
  }
  .at-hero-ctas {
    flex-direction: column !important;
    gap: 10px !important;
  }
  .at-cta {
    padding: 13px 20px !important;
    font-size: 10px !important;
    width: 100%;
    text-align: center;
  }
  .at-hero-right { height: 220px !important; }
}

/* ── PILLARS ── */
@media (max-width: 900px) {
  .at-pillars {
    grid-template-columns: 1fr !important;
    padding: 32px 24px !important;
    gap: 1px !important;
  }
  .at-pillar {
    padding: 28px 20px !important;
  }
  .at-pillar-t { font-size: 24px !important; }
  .at-pillar-d { font-size: 15px !important; }
}

/* ── RECENT GRID ── */
@media (max-width: 900px) {
  .at-recent {
    padding: 40px 16px !important;
  }
  .at-recent-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-auto-rows: 140px !important;
    gap: 8px !important;
  }
  /* Reset des spans complexes */
  .at-recent-cell:nth-child(1) { grid-column: span 1 !important; grid-row: span 2 !important; }
  .at-recent-cell:nth-child(2) { grid-column: span 1 !important; grid-row: span 1 !important; }
  .at-recent-cell:nth-child(3) { grid-column: span 1 !important; grid-row: span 2 !important; }
  .at-recent-cell:nth-child(4) { grid-column: span 1 !important; grid-row: span 1 !important; }
  .at-recent-cell:nth-child(5) { grid-column: span 2 !important; grid-row: span 1 !important; }
}
@media (max-width: 480px) {
  .at-recent-grid {
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto !important;
  }
  .at-recent-cell { grid-column: span 1 !important; grid-row: span 1 !important; aspect-ratio: 3/2; }
}

/* ── SERVICES ── */
@media (max-width: 900px) {
  .at-svc {
    padding: 60px 20px !important;
  }
  .at-svc-title { font-size: clamp(42px, 10vw, 80px) !important; }
  .at-svc-card {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 32px 0 !important;
  }
  .at-svc-num { display: none; }
  .at-svc-t { font-size: clamp(28px, 7vw, 40px) !important; }
  .at-svc-cta {
    align-self: flex-start !important;
    padding: 12px 20px !important;
    font-size: 10px !important;
  }
  .at-svc-inc ul li { font-size: 14px !important; }
}
@media (max-width: 480px) {
  .at-svc { padding: 50px 16px !important; }
  .at-svc-head { margin-bottom: 40px !important; }
}

/* ── PORTFOLIO ── */
@media (max-width: 900px) {
  .at-pf { padding: 60px 16px !important; }
  .at-pf-title { font-size: clamp(42px, 10vw, 80px) !important; }
  .at-pf-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-auto-rows: 160px !important;
    gap: 8px !important;
  }
  .at-pf-cell,
  .at-pf-cell--0,
  .at-pf-cell--4,
  .at-pf-cell--5 {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
  }
}
@media (max-width: 480px) {
  .at-pf-grid {
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto !important;
  }
  .at-pf-cell { aspect-ratio: 3/2; }
}

/* ── ABOUT ── */
@media (max-width: 900px) {
  .at-about {
    padding: 60px 20px !important;
  }
  .at-about-title { font-size: clamp(36px, 9vw, 72px) !important; }
  .at-about-lead { font-size: 17px !important; }
  .at-about-principles {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .at-about-p { padding: 20px !important; }
  .at-about-p h3 { font-size: 20px !important; }
  .at-about-p p { font-size: 14px !important; }
}
@media (max-width: 480px) {
  .at-about { padding: 50px 16px !important; }
  .at-about-img { margin: 0 -16px 40px !important; }
}

/* ── CONTACT / BOOKING ── */
@media (max-width: 900px) {
  .at-ct {
    padding: 60px 20px !important;
  }
  .at-ct-title { font-size: clamp(36px, 9vw, 72px) !important; }
  /* Steps : scroll horizontal sur mobile */
  .at-ct-steps {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap !important;
    padding-bottom: 4px;
  }
  .at-ct-steps::-webkit-scrollbar { display: none; }
  .at-ct-step {
    flex: 0 0 auto !important;
    padding: 14px 14px !important;
    font-size: 9px !important;
    letter-spacing: .1em !important;
  }
}
@media (max-width: 600px) {
  .at-ct { padding: 50px 16px !important; }
  /* Form contact */
  .at-form-row {
    flex-direction: column !important;
    gap: 0 !important;
  }
  .at-form input,
  .at-form select,
  .at-form textarea {
    font-size: 16px !important; /* évite zoom iOS */
    padding: 12px !important;
  }
  .at-btn {
    width: 100% !important;
    justify-content: center !important;
    padding: 14px !important;
  }
}

/* ── GÉNÉRAL ATELIER ── */
@media (max-width: 600px) {
  .at-home,
  .at-svc,
  .at-pf,
  .at-about,
  .at-ct {
    min-height: auto !important;
  }
  .at-over { font-size: 9px !important; margin-bottom: 16px !important; }
}

/* ── Footer Atelier : fixe en bas ── */
.footer {
  position: fixed !important;
  bottom: 0 !important; left: 0 !important; right: 0 !important;
  height: 44px !important; min-height: 44px !important;
  flex-direction: row !important; flex-wrap: nowrap !important;
  align-items: center !important;
  padding: 0 16px !important;
  overflow: hidden;
  z-index: 999 !important;
}
@media (max-width: 480px) {
  .footer-center { display: none !important; }
  .footer-left .footer-mention,
  .footer-left .footer-sep { display: none !important; }
}