/* =========================================================
   ESTHETICAPLUS
   FAQ — VERSION FRANÇAISE PREMIUM
========================================================= */

#ep-faq-page,
#ep-faq-page *{
  box-sizing:border-box;
}

#ep-faq-page{
  --navy:#071426;
  --navy2:#102d4b;

  --ink:#17293a;
  --text:#586978;
  --muted:#76828e;

  --cream:#f6f1e8;
  --cream2:#fbf8f2;
  --paper:#fffdf8;
  --white:#ffffff;

  --gold:#b99561;
  --gold-dark:#927044;
  --gold-light:#efd5a2;

  --green:#315f49;

  --line:rgba(7,20,38,.11);

  --serif:"Fraunces",Georgia,serif;
  --sans:"Inter Tight",Arial,sans-serif;

  width:100%;
  overflow:hidden;

  color:var(--ink);
  background:var(--paper);

  font-family:var(--sans);
  font-size:16px;
  line-height:1.7;
}


#ep-faq-page *,
#ep-faq-page *::before,
#ep-faq-page *::after{
  min-width:0;
}


#ep-faq-page img{
  display:block;
  max-width:100%;
}


#ep-faq-page a{
  color:inherit;
}


#ep-faq-page h1,
#ep-faq-page h2,
#ep-faq-page h3,
#ep-faq-page p,
#ep-faq-page figure{
  margin-top:0;
}


#ep-faq-page .epfaq-shell{
  width:min(1200px,calc(100% - 80px));
  margin:0 auto;
}


#ep-faq-page .epfaq-section{
  padding:105px 0;
}


/* =========================================================
   HERO
========================================================= */

#ep-faq-page .epfaq-hero{
  position:relative;
  isolation:isolate;

  min-height:clamp(700px,88svh,900px);

  display:flex;
  align-items:center;

  overflow:hidden;

  color:#fff;
  background:var(--navy);
}


/* IMAGE HERO */

#ep-faq-page .epfaq-hero-media{
  position:absolute;
  inset:0;

  z-index:-3;
}


#ep-faq-page .epfaq-hero-media picture,
#ep-faq-page .epfaq-hero-media img{
  width:100%;
  height:100%;
}


#ep-faq-page .epfaq-hero-media img{
  object-fit:cover;
  object-position:center;
}


/* OVERLAY */

#ep-faq-page .epfaq-hero-overlay{
  position:absolute;
  inset:0;

  z-index:-2;

  background:
    radial-gradient(
      circle at 16% 18%,
      rgba(185,149,97,.20),
      transparent 30%
    ),
    linear-gradient(
      90deg,
      rgba(5,15,28,.98) 0%,
      rgba(5,15,28,.95) 29%,
      rgba(5,15,28,.78) 49%,
      rgba(5,15,28,.41) 70%,
      rgba(5,15,28,.08) 100%
    ),
    linear-gradient(
      180deg,
      transparent 52%,
      rgba(5,15,28,.39) 100%
    );
}


#ep-faq-page .epfaq-hero-inner{
  width:min(1240px,calc(100% - 80px));

  margin:0 auto;

  padding:145px 0 95px;
}


#ep-faq-page .epfaq-hero-content{
  max-width:820px;
}


/* KICKER */

#ep-faq-page .epfaq-kicker{
  display:flex;
  align-items:center;

  gap:13px;

  margin:0 0 21px;

  color:var(--gold-light);

  font-size:11px;
  font-weight:700;

  letter-spacing:.18em;

  text-transform:uppercase;
}


#ep-faq-page .epfaq-kicker::before{
  content:"";

  width:35px;
  height:1px;

  flex:0 0 35px;

  background:currentColor;
}


/* H1 */

#ep-faq-page .epfaq-hero h1{
  max-width:920px;

  margin:0 0 27px!important;

  color:#fff!important;

  font-family:var(--serif)!important;

  font-size:clamp(56px,6.5vw,96px)!important;

  font-weight:400!important;

  line-height:.94!important;

  letter-spacing:-.05em!important;
}


#ep-faq-page .epfaq-hero h1 em{
  display:block;

  color:var(--gold-light);

  font-style:italic;
  font-weight:300;
}


/* TEXTE HERO */

#ep-faq-page .epfaq-hero-lead{
  max-width:710px;

  margin:0;

  color:rgba(255,255,255,.86);

  font-size:clamp(18px,1.45vw,22px);

  line-height:1.68;
}


#ep-faq-page .epfaq-hero-lead strong{
  color:#fff;
  font-weight:600;
}


/* INFOS HERO */

#ep-faq-page .epfaq-hero-facts{
  width:min(760px,100%);

  display:grid;

  grid-template-columns:repeat(3,minmax(0,1fr));

  margin-top:38px;

  border-top:1px solid rgba(255,255,255,.22);
  border-bottom:1px solid rgba(255,255,255,.16);
}


#ep-faq-page .epfaq-hero-fact{
  padding:20px 17px;
}


#ep-faq-page .epfaq-hero-fact:first-child{
  padding-left:0;
}


#ep-faq-page .epfaq-hero-fact + .epfaq-hero-fact{
  border-left:1px solid rgba(255,255,255,.14);
}


#ep-faq-page .epfaq-hero-fact strong{
  display:block;

  margin-bottom:7px;

  color:var(--gold-light);

  font-family:var(--serif);

  font-size:24px;
  font-weight:400;

  line-height:1;
}


#ep-faq-page .epfaq-hero-fact span{
  display:block;

  color:rgba(255,255,255,.62);

  font-size:10.5px;
  font-weight:600;

  line-height:1.45;

  letter-spacing:.06em;

  text-transform:uppercase;
}


/* BOUTONS HERO */

#ep-faq-page .epfaq-actions{
  display:flex;
  flex-wrap:wrap;

  gap:12px;

  margin-top:32px;
}


#ep-faq-page .epfaq-btn{
  min-height:57px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:16px 27px;

  border:1px solid transparent;
  border-radius:999px;

  font-size:11px;
  font-weight:700;

  letter-spacing:.11em;

  text-align:center;
  text-decoration:none!important;

  text-transform:uppercase;

  transition:.25s ease;
}


#ep-faq-page .epfaq-btn:hover{
  transform:translateY(-2px);
}


#ep-faq-page .epfaq-btn-primary{
  color:var(--navy)!important;

  background:var(--paper);
  border-color:var(--paper);
}


#ep-faq-page .epfaq-btn-primary:hover{
  background:var(--gold-light);
  border-color:var(--gold-light);
}


#ep-faq-page .epfaq-btn-secondary{
  color:#fff!important;

  background:rgba(7,20,38,.22);

  border-color:rgba(255,255,255,.39);

  backdrop-filter:blur(9px);
}


/* =========================================================
   TITRES
========================================================= */

#ep-faq-page .epfaq-eyebrow{
  display:flex;
  align-items:center;

  gap:12px;

  margin:0 0 17px;

  color:var(--gold-dark);

  font-size:10px;
  font-weight:700;

  letter-spacing:.17em;

  text-transform:uppercase;
}


#ep-faq-page .epfaq-eyebrow::after{
  content:"";

  width:30px;
  height:1px;

  background:currentColor;
}


#ep-faq-page .epfaq-title{
  max-width:900px;

  margin:0!important;

  color:var(--navy)!important;

  font-family:var(--serif)!important;

  font-size:clamp(43px,4.8vw,68px)!important;

  font-weight:400!important;

  line-height:1!important;

  letter-spacing:-.043em!important;
}


#ep-faq-page .epfaq-title em{
  color:var(--gold-dark);

  font-style:italic;
  font-weight:300;
}


#ep-faq-page .epfaq-lead{
  max-width:820px;

  margin:24px 0 0;

  color:var(--text);

  font-size:17px;

  line-height:1.8;
}


/* =========================================================
   INTRO / CONFIANCE
========================================================= */

#ep-faq-page .epfaq-intro{
  background:var(--paper);
}


#ep-faq-page .epfaq-intro-head{
  max-width:930px;

  margin-bottom:50px;
}


#ep-faq-page .epfaq-trust-grid{
  display:grid;

  grid-template-columns:repeat(3,minmax(0,1fr));

  gap:16px;
}


#ep-faq-page .epfaq-trust{
  position:relative;

  min-height:260px;

  padding:30px 28px;

  overflow:hidden;

  border:1px solid var(--line);

  background:#fff;

  transition:.3s ease;
}


#ep-faq-page .epfaq-trust:hover{
  transform:translateY(-4px);

  border-color:rgba(185,149,97,.4);

  box-shadow:
    0 20px 48px rgba(7,20,38,.06);
}


#ep-faq-page .epfaq-trust-num{
  margin-bottom:45px;

  color:var(--gold-dark);

  font-family:var(--serif);

  font-size:19px;

  font-style:italic;
}


#ep-faq-page .epfaq-trust h3{
  margin:0 0 11px!important;

  color:var(--navy)!important;

  font-family:var(--serif)!important;

  font-size:27px!important;

  font-weight:400!important;

  line-height:1.12!important;
}


#ep-faq-page .epfaq-trust p{
  margin:0;

  color:var(--muted);

  font-size:14px;

  line-height:1.72;
}


/* =========================================================
   CATÉGORIES
========================================================= */

#ep-faq-page .epfaq-categories{
  background:var(--cream);
}


#ep-faq-page .epfaq-category-grid{
  display:grid;

  grid-template-columns:repeat(4,minmax(0,1fr));

  gap:14px;

  margin-top:45px;
}


#ep-faq-page .epfaq-category{
  min-height:220px;

  padding:27px 24px;

  border:1px solid var(--line);

  background:var(--paper);

  transition:.3s ease;
}


#ep-faq-page .epfaq-category:hover{
  transform:translateY(-4px);

  border-color:rgba(185,149,97,.4);

  background:#fff;
}


#ep-faq-page .epfaq-category-icon{
  margin-bottom:28px;

  font-size:27px;
}


#ep-faq-page .epfaq-category h3{
  margin:0 0 9px!important;

  color:var(--navy)!important;

  font-family:var(--serif)!important;

  font-size:24px!important;

  font-weight:400!important;
}


#ep-faq-page .epfaq-category p{
  margin:0;

  color:var(--muted);

  font-size:13.5px;

  line-height:1.65;
}


/* =========================================================
   FAQ
========================================================= */

#ep-faq-page .epfaq-faq{
  background:var(--paper);
}


#ep-faq-page .epfaq-faq-grid{
  display:grid;

  grid-template-columns:.72fr 1.28fr;

  gap:80px;

  align-items:start;
}


#ep-faq-page .epfaq-faq-intro{
  position:sticky;

  top:95px;
}


#ep-faq-page .epfaq-list{
  border-top:1px solid var(--line);
}


#ep-faq-page .epfaq-list details{
  border-bottom:1px solid var(--line);
}


#ep-faq-page .epfaq-list summary{
  position:relative;

  padding:25px 55px 25px 0;

  cursor:pointer;

  list-style:none;

  color:var(--navy);

  font-family:var(--serif);

  font-size:23px;

  line-height:1.3;
}


#ep-faq-page .epfaq-list summary::-webkit-details-marker{
  display:none;
}


#ep-faq-page .epfaq-list summary::after{
  content:"+";

  position:absolute;

  top:50%;
  right:3px;

  width:32px;
  height:32px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:1px solid var(--line);
  border-radius:50%;

  color:var(--gold-dark);

  font-family:var(--sans);

  font-size:21px;

  transform:translateY(-50%);

  transition:.2s ease;
}


#ep-faq-page .epfaq-list details[open] summary::after{
  content:"−";

  background:var(--gold-dark);
  border-color:var(--gold-dark);

  color:#fff;
}


#ep-faq-page .epfaq-answer{
  max-width:760px;

  padding:0 50px 26px 0;
}


#ep-faq-page .epfaq-answer p{
  margin:0;

  color:var(--text);

  font-size:15px;

  line-height:1.8;
}


/* =========================================================
   POURQUOI TANGER
========================================================= */

#ep-faq-page .epfaq-tangier{
  color:#fff;

  background:
    radial-gradient(
      circle at 85% 12%,
      rgba(185,149,97,.17),
      transparent 28%
    ),
    var(--navy);
}


#ep-faq-page .epfaq-tangier .epfaq-eyebrow{
  color:var(--gold-light);
}


#ep-faq-page .epfaq-tangier .epfaq-title{
  color:#fff!important;
}


#ep-faq-page .epfaq-tangier .epfaq-title em{
  color:var(--gold-light);
}


#ep-faq-page .epfaq-tangier .epfaq-lead{
  color:rgba(255,255,255,.67);
}


#ep-faq-page .epfaq-tangier-grid{
  display:grid;

  grid-template-columns:repeat(3,minmax(0,1fr));

  gap:1px;

  margin-top:50px;

  background:rgba(255,255,255,.13);
}


#ep-faq-page .epfaq-tangier-card{
  min-height:235px;

  padding:31px 28px;

  background:var(--navy);
}


#ep-faq-page .epfaq-tangier-card span{
  display:block;

  margin-bottom:35px;

  color:var(--gold-light);

  font-family:var(--serif);

  font-size:18px;

  font-style:italic;
}


#ep-faq-page .epfaq-tangier-card h3{
  margin:0 0 11px!important;

  color:#fff!important;

  font-family:var(--serif)!important;

  font-size:26px!important;

  font-weight:400!important;
}


#ep-faq-page .epfaq-tangier-card p{
  margin:0;

  color:rgba(255,255,255,.62);

  font-size:14px;

  line-height:1.7;
}


/* =========================================================
   PARCOURS PATIENT
========================================================= */

#ep-faq-page .epfaq-journey{
  background:var(--cream);
}


#ep-faq-page .epfaq-steps{
  display:grid;

  grid-template-columns:repeat(4,minmax(0,1fr));

  gap:14px;

  margin-top:48px;
}


#ep-faq-page .epfaq-step{
  position:relative;

  min-height:280px;

  padding:30px 25px;

  border:1px solid var(--line);

  background:#fff;
}


#ep-faq-page .epfaq-step-num{
  width:49px;
  height:49px;

  display:flex;
  align-items:center;
  justify-content:center;

  margin-bottom:34px;

  border:1px solid rgba(185,149,97,.5);
  border-radius:50%;

  color:var(--gold-dark);

  font-family:var(--serif);

  font-style:italic;
}


#ep-faq-page .epfaq-step h3{
  margin:0 0 11px!important;

  color:var(--navy)!important;

  font-family:var(--serif)!important;

  font-size:23px!important;

  font-weight:400!important;
}


#ep-faq-page .epfaq-step p{
  margin:0;

  color:var(--muted);

  font-size:14px;

  line-height:1.7;
}


/* =========================================================
   CTA FINAL
========================================================= */

#ep-faq-page .epfaq-final{
  padding:0 0 110px;

  background:var(--cream);
}


#ep-faq-page .epfaq-final-box{
  position:relative;

  overflow:hidden;

  display:grid;

  grid-template-columns:1fr auto;

  gap:50px;

  align-items:center;

  padding:58px;

  border-radius:25px;

  color:#fff;

  background:
    radial-gradient(
      circle at 90% 0%,
      rgba(185,149,97,.19),
      transparent 30%
    ),
    var(--navy);
}


#ep-faq-page .epfaq-final-box::after{
  content:"?";

  position:absolute;

  right:15px;
  bottom:-125px;

  color:rgba(255,255,255,.025);

  font-family:var(--serif);

  font-size:330px;

  pointer-events:none;
}


#ep-faq-page .epfaq-final-content{
  position:relative;

  z-index:2;

  max-width:730px;
}


#ep-faq-page .epfaq-final-label{
  margin:0 0 11px;

  color:var(--gold-light);

  font-size:10px;
  font-weight:700;

  letter-spacing:.16em;

  text-transform:uppercase;
}


#ep-faq-page .epfaq-final h2{
  margin:0 0 15px!important;

  color:#fff!important;

  font-family:var(--serif)!important;

  font-size:clamp(38px,3.7vw,54px)!important;

  font-weight:400!important;

  line-height:1.06!important;
}


#ep-faq-page .epfaq-final h2 em{
  color:var(--gold-light);

  font-style:italic;
  font-weight:300;
}


#ep-faq-page .epfaq-final p{
  margin:0;

  color:rgba(255,255,255,.68);

  font-size:15px;

  line-height:1.75;
}


/* =========================================================
   TABLETTE
========================================================= */

@media(max-width:1000px){

  #ep-faq-page .epfaq-shell,
  #ep-faq-page .epfaq-hero-inner{
    width:calc(100% - 56px);
  }


  #ep-faq-page .epfaq-category-grid,
  #ep-faq-page .epfaq-steps{
    grid-template-columns:1fr 1fr;
  }


  #ep-faq-page .epfaq-faq-grid{
    grid-template-columns:1fr;

    gap:45px;
  }


  #ep-faq-page .epfaq-faq-intro{
    position:static;
  }


  #ep-faq-page .epfaq-final-box{
    grid-template-columns:1fr;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:767px){

  #ep-faq-page .epfaq-shell,
  #ep-faq-page .epfaq-hero-inner{
    width:calc(100% - 36px);
  }


  #ep-faq-page .epfaq-hero{
    min-height:100svh;

    align-items:flex-start;
  }


  #ep-faq-page .epfaq-hero-media img{
    object-position:center top;
  }


  #ep-faq-page .epfaq-hero-overlay{
    background:
      linear-gradient(
        180deg,
        rgba(7,20,38,.03) 0%,
        rgba(7,20,38,.10) 22%,
        rgba(7,20,38,.42) 39%,
        rgba(7,20,38,.89) 56%,
        rgba(7,20,38,.98) 74%,
        var(--navy) 100%
      );
  }


  #ep-faq-page .epfaq-hero-inner{
    padding:
      clamp(260px,40svh,355px)
      0
      44px;
  }


  #ep-faq-page .epfaq-kicker{
    margin-bottom:14px;

    font-size:9.5px;

    letter-spacing:.13em;
  }


  #ep-faq-page .epfaq-kicker::before{
    width:25px;

    flex-basis:25px;
  }


  #ep-faq-page .epfaq-hero h1{
    font-size:clamp(43px,12.5vw,59px)!important;

    line-height:.96!important;

    margin-bottom:20px!important;
  }


  #ep-faq-page .epfaq-hero-lead{
    font-size:16px;

    line-height:1.63;
  }


  #ep-faq-page .epfaq-hero-facts{
    grid-template-columns:1fr;

    margin-top:27px;
  }


  #ep-faq-page .epfaq-hero-fact{
    padding:14px 0;
  }


  #ep-faq-page .epfaq-hero-fact + .epfaq-hero-fact{
    border-left:0;

    border-top:1px solid rgba(255,255,255,.13);
  }


  #ep-faq-page .epfaq-hero-fact strong{
    font-size:20px;
  }


  #ep-faq-page .epfaq-actions{
    display:grid;

    grid-template-columns:1fr;

    gap:9px;

    margin-top:26px;
  }


  #ep-faq-page .epfaq-btn{
    width:100%;
  }


  #ep-faq-page .epfaq-section{
    padding:72px 0;
  }


  #ep-faq-page .epfaq-title{
    font-size:clamp(39px,11.5vw,53px)!important;
  }


  #ep-faq-page .epfaq-lead{
    font-size:15.5px;
  }


  #ep-faq-page .epfaq-trust-grid,
  #ep-faq-page .epfaq-category-grid,
  #ep-faq-page .epfaq-tangier-grid,
  #ep-faq-page .epfaq-steps{
    grid-template-columns:1fr;
  }


  #ep-faq-page .epfaq-trust{
    min-height:auto;
  }


  #ep-faq-page .epfaq-trust-num{
    margin-bottom:24px;
  }


  #ep-faq-page .epfaq-category{
    min-height:auto;
  }


  #ep-faq-page .epfaq-category-icon{
    margin-bottom:18px;
  }


  #ep-faq-page .epfaq-list summary{
    padding:22px 48px 22px 0;

    font-size:20px;
  }


  #ep-faq-page .epfaq-answer{
    padding:0 5px 23px 0;
  }


  #ep-faq-page .epfaq-tangier-card{
    min-height:auto;
  }


  #ep-faq-page .epfaq-step{
    min-height:auto;
  }


  #ep-faq-page .epfaq-final{
    padding-bottom:65px;
  }


  #ep-faq-page .epfaq-final-box{
    padding:40px 23px;

    border-radius:20px;
  }

}


@media(prefers-reduced-motion:reduce){

  #ep-faq-page *,
  #ep-faq-page *::before,
  #ep-faq-page *::after{
    transition:none!important;
  }

}