/*
Theme Name: Coiffure Cécile V4.2
Theme URI: https://coiffurececilecaluire.com/
Author: Coiffure Cécile
Description: Thème sur mesure Coiffure Cécile V4.2, adapté au site de staging et compatible avec le module de rendez-vous existant.
Version: 4.2.1
Text Domain: coiffure-cecile-v42
*/
:root{
  --cream:#fbf7f2;
  --cream-2:#f5ece3;
  --sand:#c59a75;
  --sand-dark:#a87955;
  --ink:#1d1a18;
  --muted:#6f655e;
  --line:#dcc5b1;
  --white:#fff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  color:var(--ink);
  background:var(--cream);
  line-height:1.5;
}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
.container{width:min(1180px,92vw);margin:0 auto}
.header{
  position:sticky;top:0;z-index:30;
  background:rgba(251,247,242,.96);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(197,154,117,.18);
}
.nav{height:86px;display:flex;align-items:center;gap:34px}
.logo{margin-right:auto;line-height:.9}
.logo strong{
  display:block;
  font-family:Georgia,"Times New Roman",serif;
  font-size:34px;font-weight:500;letter-spacing:.06em;
}
.logo span{display:block;font-size:14px;letter-spacing:.33em;margin-top:9px}
.logo-graphic{display:flex;align-items:center}
.brand-logo-svg{width:220px;height:auto;display:block}
.footer-brand .brand-logo-svg{width:210px}

.navlinks{display:flex;gap:28px;align-items:center;font-size:13px;letter-spacing:.04em}
.navlinks a{padding:9px 0;border-bottom:1px solid transparent}
.navlinks a:hover{border-color:var(--ink)}
.cta{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--sand);color:#fff;
  padding:13px 22px;border-radius:2px;
  font-size:13px;letter-spacing:.04em;
  border:1px solid var(--sand);
  transition:.2s ease;
}
.cta:hover{background:var(--sand-dark);border-color:var(--sand-dark)}
.cta.dark{background:var(--ink);border-color:var(--ink)}
.cta.dark:hover{background:#332e2a}
.mobile-toggle{display:none;margin-left:14px;border:0;background:transparent;font-size:26px}

.hero{
  position:relative;
  background:#eee;
  overflow:hidden;
}
.hero img{
  width:100%;
  height:auto;
  min-height:540px;
  object-fit:cover;
}
.hero-hit{
  position:absolute;
  left:4.6%;
  top:63%;
  width:28%;
  height:11%;
  border-radius:4px;
}
.hero-hit:focus{outline:3px solid var(--sand)}
.hero-note{
  position:absolute;right:20px;bottom:16px;
  font-size:11px;color:rgba(29,26,24,.6);
  background:rgba(255,255,255,.7);padding:5px 8px;border-radius:20px;
}
.values{background:#fbf7f2;padding:38px 0 42px;border-bottom:1px solid #eee2d8}
.values-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.value{text-align:center;padding:0 28px;min-height:152px;border-right:1px solid var(--line)}
.value:last-child{border-right:0}
.icon{font-size:34px;color:var(--sand-dark);margin-bottom:10px}
.value h3{font-size:14px;letter-spacing:.14em;margin:0 0 10px;font-weight:500}
.value p{font-size:13px;color:var(--muted);margin:0}

.section{padding:78px 0}
.section.white{background:#fff}
.eyebrow{font-size:12px;letter-spacing:.16em;color:var(--sand-dark);text-transform:uppercase;margin-bottom:8px}
.section-title{
  font-family:Georgia,"Times New Roman",serif;
  font-size:43px;line-height:1.1;font-weight:400;margin:0 0 18px
}
.lead{font-size:16px;color:var(--muted);max-width:650px;margin:0}
.services-head{text-align:center;margin-bottom:38px}
.services-head .lead{margin:auto}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{
  background:#fff;border:1px solid #ead9cb;padding:28px 24px 25px;
  min-height:220px;display:flex;flex-direction:column;
  box-shadow:0 8px 30px rgba(74,54,39,.035)
}
.card .mini-icon{font-size:28px;color:var(--sand-dark);margin-bottom:15px}
.card h3{font-size:15px;letter-spacing:.04em;margin:0 0 10px}
.card p{color:var(--muted);font-size:13px;margin:0 0 20px}
.card a{margin-top:auto;font-size:12px;letter-spacing:.07em;color:var(--sand-dark);font-weight:700}
.card small{display:block;color:#8a7c72;margin-top:8px;font-size:11px}
.salon-wrap{
  display:grid;grid-template-columns:1.25fr .75fr;align-items:stretch;
  background:#fff;
}
.salon-image{min-height:500px;background:center/cover no-repeat}
.salon-copy{padding:72px 68px;display:flex;flex-direction:column;justify-content:center}
.salon-copy p{color:var(--muted)}
.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.info{
  background:#fff;border:1px solid #ead9cb;padding:28px;
}
.info h3{margin:0 0 8px;font-size:14px;letter-spacing:.08em}
.info p{margin:0;color:var(--muted);font-size:14px}
.booking{
  background:linear-gradient(100deg,#f4e6d8,#fbf7f2);
  padding:54px 0
}
.booking-row{display:flex;align-items:center;justify-content:space-between;gap:30px}
.script{
  font-family:Georgia,"Times New Roman",serif;
  font-style:italic;font-size:38px;color:var(--sand-dark)
}
.footer{background:#f4eee8;padding:50px 0 28px;border-top:1px solid #ead9cb}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:40px}
.footer h4{font-size:12px;letter-spacing:.12em;margin:0 0 15px}
.footer a,.footer p{font-size:13px;color:var(--muted);display:block;margin:7px 0}
.copyright{text-align:center;margin-top:36px;padding-top:20px;border-top:1px solid #e2d3c7;font-size:12px;color:#8a7c72}

@media (max-width:900px){
  .nav{height:74px}
  .logo strong{font-size:28px}
  .logo span{font-size:11px}
  .navlinks{display:none;position:absolute;top:74px;left:0;right:0;background:var(--cream);padding:20px 4vw;flex-direction:column;align-items:flex-start;border-bottom:1px solid #ead9cb}
  .navlinks.open{display:flex}
  .header .cta{display:none}
  .mobile-toggle{display:block}
  .hero img{min-height:0}
  .hero-hit{left:4%;top:60%;width:38%;height:14%}
  .values-grid{grid-template-columns:repeat(2,1fr);gap:24px}
  .value{border-right:0;border-bottom:1px solid var(--line);padding:18px 24px 30px}
  .value:nth-last-child(-n+2){border-bottom:0}
  .cards{grid-template-columns:repeat(2,1fr)}
  .salon-wrap{grid-template-columns:1fr}
  .salon-image{min-height:430px}
  .salon-copy{padding:48px 7vw}
  .info-grid{grid-template-columns:1fr}
  .booking-row{flex-direction:column;text-align:center}
}
@media (max-width:600px){
  .container{width:min(92vw,520px)}
  .nav{height:70px;padding:0}
  .brand-logo-svg{width:164px}
  .mobile-toggle{font-size:23px;margin-left:8px}
  .navlinks{top:70px}
  .header{box-shadow:0 4px 18px rgba(35,26,20,.03)}

  .hero{background:#f5eee7}
  .hero img{width:100%;height:auto;object-fit:contain}
  .hero-hit{left:4%;top:61%;width:46%;height:13%}

  /* Valeurs : plus légères et plus éditoriales */
  .values{padding:7px 0 9px;background:#fbf7f2}
  .values-grid{
    grid-template-columns:repeat(2,1fr);
    gap:0;
    width:100%;
  }
  .value{
    min-height:118px;
    padding:15px 12px 13px;
    border:0!important;
    position:relative;
  }
  .value:nth-child(odd):after{
    content:"";
    position:absolute;right:0;top:20%;height:60%;width:1px;
    background:rgba(197,154,117,.30);
  }
  .value:nth-child(-n+2):before{
    content:"";
    position:absolute;left:10%;bottom:0;width:80%;height:1px;
    background:rgba(197,154,117,.24);
  }
  .icon{font-size:21px;margin-bottom:4px;color:#b2825b}
  .value h3{font-size:10px;letter-spacing:.16em;margin:0 0 4px;font-weight:600}
  .value p{font-size:10.5px;line-height:1.34;max-width:150px;margin:0 auto;color:#746b64}

  .section{padding:34px 0}
  .services-head{margin-bottom:16px}
  .eyebrow{font-size:10px;letter-spacing:.20em;margin-bottom:5px}
  .section-title{font-size:28px;line-height:1.06;margin-bottom:9px}
  .lead{font-size:13px;line-height:1.42;max-width:92%;margin-left:auto;margin-right:auto}

  /* Prestations : plus de "boîtes" massives, lignes premium très fines */
  .cards{
    grid-template-columns:1fr;
    gap:0;
    border-top:1px solid rgba(197,154,117,.30);
  }
  .card{
    min-height:0;
    padding:15px 4px 14px;
    display:grid;
    grid-template-columns:30px 1fr 18px;
    grid-template-rows:auto auto auto;
    column-gap:10px;
    background:transparent;
    border:0;
    border-bottom:1px solid rgba(197,154,117,.30);
    box-shadow:none;
  }
  .card .mini-icon{
    grid-column:1;grid-row:1 / 4;
    font-size:19px;margin:1px 0 0;color:#b2825b;
    text-align:center;
  }
  .card h3{
    grid-column:2;grid-row:1;
    margin:0 0 3px;
    font-size:12.5px;line-height:1.25;
    letter-spacing:.035em;font-weight:650;
  }
  .card p{
    grid-column:2;grid-row:2;
    margin:0 0 5px;
    font-size:11.5px;line-height:1.38;
    color:#776e67;
  }
  .card a{
    grid-column:2;grid-row:3;
    margin:0;
    font-size:9.7px;letter-spacing:.075em;
    color:#a87955;
  }
  .card:after{
    content:"›";
    grid-column:3;grid-row:1 / 4;
    align-self:center;justify-self:end;
    font-family:Georgia,serif;
    font-size:23px;color:#c19a78;
  }
  .card small{grid-column:2;grid-row:4;font-size:9px;margin-top:4px;color:#8a7c72}

  .salon-image{min-height:285px}
  .salon-copy{padding:31px 7vw}
  .info-grid{gap:8px}
  .info{padding:17px 18px}
  .info h3{font-size:11px}
  .info p{font-size:12.5px}
  .booking{padding:32px 0}
  .footer{padding:34px 0 22px}
  .footer-grid{grid-template-columns:1fr}
  .footer-brand .brand-logo-svg{width:185px}
  .script{font-size:27px}
}
/* WordPress helpers */
body.admin-bar .header{top:32px}
.cc-wp-content{width:min(980px,92vw);margin:48px auto 72px;background:#fff;padding:36px;border:1px solid #ead9cb}
.cc-wp-content h1,.cc-wp-content h2,.cc-wp-content h3{font-family:Georgia,"Times New Roman",serif;font-weight:400}
.cc-booking-embed{width:min(1180px,92vw);margin:28px auto 0;background:#fff;border:1px solid #ead9cb;padding:24px}
@media(max-width:782px){body.admin-bar .header{top:46px}}