/* ==========================================================================
   Erfadia Health — Design system v2
   Identité : noir / blanc / rouge, géométrie fine, respiration.
   ========================================================================== */
:root{
  --black:#000000;
  --ink:#1C1C1C;
  --gray-700:#4A4A4A;
  --gray-500:#7A7A7A;
  --gray-300:#C9C9C9;
  --gray-100:#F4F4F4;
  --white:#FFFFFF;
  --red:#FF0F0F;
  --red-deep:#D40C0C;
  --line:rgba(0,0,0,0.10);

  --font-display:'Jost', 'Futura', 'Century Gothic', sans-serif;
  --font-body:'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-xs:0.75rem;
  --fs-sm:0.875rem;
  --fs-base:1rem;
  --fs-md:1.125rem;
  --fs-lg:1.5rem;
  --fs-xl:2.25rem;
  --fs-2xl:3rem;
  --fs-3xl:4.25rem;

  --sp-1:0.5rem;
  --sp-2:1rem;
  --sp-3:1.5rem;
  --sp-4:2rem;
  --sp-5:3rem;
  --sp-6:4.5rem;
  --sp-7:7rem;
  --sp-8:10rem;

  --container:1200px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}

body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--fs-base);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3{
  font-family:var(--font-display);
  font-weight:300;
  color:var(--black);
  margin:0;
  line-height:1.1;
  letter-spacing:0.01em;
}
p{margin:0;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
button{font-family:inherit;}
:focus-visible{outline:2px solid var(--red); outline-offset:3px;}

.container{
  max-width:var(--container);
  margin-left:auto;
  margin-right:auto;
  padding-left:var(--sp-4);
  padding-right:var(--sp-4);
}

/* Le trait rouge : signature du logo, réutilisé comme repère de section */
.rule{
  display:block;
  width:56px;
  height:2px;
  background:var(--red);
  margin-bottom:var(--sp-3);
}

/* ==========================================================================
   Navigation
   ========================================================================== */
.nav{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.nav .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:84px;
}
.nav-logo img{height:46px; width:auto;}

.nav-links{
  display:flex;
  gap:var(--sp-5);
  list-style:none;
  margin:0;
  padding:0;
}
.nav-links a{
  font-family:var(--font-display);
  font-weight:400;
  font-size:var(--fs-sm);
  letter-spacing:0.08em;
  color:var(--ink);
  position:relative;
  padding-top:0.4rem;
  padding-bottom:0.4rem;
}
.nav-links a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:0;
  height:1px;
  background:var(--red);
  transition:width 0.25s ease;
}
.nav-links a:hover::after{width:100%;}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0.6rem;
  font-family:var(--font-display);
  font-weight:400;
  font-size:var(--fs-sm);
  letter-spacing:0.08em;
  padding:0.9rem 1.7rem;
  border:1px solid var(--black);
  transition:background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn-solid{background:var(--black); color:var(--white);}
.btn-solid:hover{background:var(--red); border-color:var(--red);}
.btn-outline{background:transparent; color:var(--black);}
.btn-outline:hover{border-color:var(--red); color:var(--red);}

.nav-toggle{
  display:none;
  background:none;
  border:none;
  cursor:pointer;
  padding:0.5rem;
}
.nav-toggle span{
  display:block;
  width:24px;
  height:1.5px;
  background:var(--black);
  margin:6px 0;
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  padding-top:var(--sp-7);
  padding-bottom:var(--sp-7);
  overflow:hidden;
}
.hero .container{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:var(--sp-6);
  align-items:center;
}
.hero h1{
  font-size:var(--fs-3xl);
  max-width:13ch;
}
.hero .lede{
  margin-top:var(--sp-4);
  max-width:48ch;
  font-size:var(--fs-md);
  color:var(--gray-700);
}
.hero-actions{
  display:flex;
  gap:var(--sp-2);
  margin-top:var(--sp-5);
  flex-wrap:wrap;
}
.hero-copy{opacity:0; transform:translateY(12px); animation:rise 0.9s cubic-bezier(.2,.7,.2,1) 0.1s forwards;}
.hero-visual{opacity:0; animation:rise 1.2s cubic-bezier(.2,.7,.2,1) 0.35s forwards;}
@keyframes rise{to{opacity:1; transform:translateY(0);}}
@media (prefers-reduced-motion: reduce){
  .hero-copy,.hero-visual{opacity:1; transform:none; animation:none;}
}

.hero-visual{
  position:relative;
  aspect-ratio:1 / 1;
  width:100%;
  max-width:560px;
  margin-left:auto;
}
#hero-3d{width:100%; height:100%; display:block;}
.hero-fallback{
  display:none;
  width:70%;
  margin:0 auto;
}
.hero-visual.no-webgl #hero-3d{display:none;}
.hero-visual.no-webgl .hero-fallback{display:block;}

/* ==========================================================================
   Sections
   ========================================================================== */
section{padding-top:var(--sp-7); padding-bottom:var(--sp-7);}
section.alt{background:var(--gray-100);}
section.dark{background:var(--black); color:var(--white);}
section.dark h2,section.dark h3{color:var(--white);}

.section-head{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--sp-5);
  align-items:end;
  margin-bottom:var(--sp-6);
}
.section-head h2{font-size:var(--fs-2xl); max-width:16ch;}
.section-head .note{color:var(--gray-500); font-size:var(--fs-md); max-width:44ch;}
section.dark .section-head .note{color:var(--gray-300);}

/* ==========================================================================
   Mission
   ========================================================================== */
.mission-grid{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:var(--sp-6);
}
.mission-quote{
  font-family:var(--font-display);
  font-weight:300;
  font-size:var(--fs-xl);
  line-height:1.25;
  color:var(--black);
  max-width:22ch;
}
.mission-text p{margin-bottom:var(--sp-3); color:var(--gray-700); max-width:60ch;}
.mission-text p:last-child{margin-bottom:0;}

/* ==========================================================================
   Marques
   ========================================================================== */
.brand-featured{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--sp-6);
  align-items:center;
  padding:var(--sp-6);
  background:var(--white);
  border:1px solid var(--line);
}
.brand-featured .logo-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--sp-4);
}
.brand-featured .logo-wrap img{width:min(100%, 360px); height:auto;}
.brand-featured .status{
  font-family:var(--font-display);
  font-size:var(--fs-xs);
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--red);
  display:flex;
  align-items:center;
  gap:0.6rem;
}
.brand-featured .status::before{
  content:"";
  width:8px; height:8px;
  border-radius:50%;
  background:var(--red);
}
.brand-featured h3{font-size:var(--fs-xl); margin-top:var(--sp-2); margin-bottom:var(--sp-2);}
.brand-featured p{color:var(--gray-700); max-width:46ch;}
.product-list{
  display:flex;
  gap:var(--sp-2);
  flex-wrap:wrap;
  margin-top:var(--sp-3);
  padding:0;
  list-style:none;
}
.product-list li{
  font-family:var(--font-display);
  font-size:var(--fs-sm);
  letter-spacing:0.04em;
  padding:0.35rem 0.9rem;
  border:1px solid var(--gray-300);
}
.brand-featured .btn{margin-top:var(--sp-4);}
.btn svg{width:14px; height:14px;}

.vertical-list{
  margin-top:var(--sp-6);
  border-top:1px solid var(--line);
}
.vertical-row{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:var(--sp-3);
  padding-top:var(--sp-3);
  padding-bottom:var(--sp-3);
  border-bottom:1px solid var(--line);
}
.vertical-row h3{font-size:var(--fs-lg); font-weight:300;}
.vertical-row span{
  font-family:var(--font-display);
  font-size:var(--fs-xs);
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--gray-500);
}

/* ==========================================================================
   Approche
   ========================================================================== */
.pillars{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--sp-5);
}
.pillar{
  border-top:1px solid rgba(255,255,255,0.18);
  padding-top:var(--sp-3);
}
.pillar h3{font-size:var(--fs-lg); margin-bottom:var(--sp-2);}
.pillar p{color:var(--gray-300); max-width:34ch;}

/* ==========================================================================
   Contact
   ========================================================================== */
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--sp-6);
  align-items:start;
}
.contact-grid h2{font-size:var(--fs-2xl);}
.contact-grid .note{margin-top:var(--sp-3); color:var(--gray-500); max-width:40ch;}
.contact-item{
  padding-top:var(--sp-3);
  padding-bottom:var(--sp-3);
  border-bottom:1px solid var(--line);
}
.contact-item:first-child{border-top:1px solid var(--line);}
.contact-item .label{
  display:block;
  font-family:var(--font-display);
  font-size:var(--fs-xs);
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--gray-500);
  margin-bottom:0.3rem;
}
.contact-item .value{font-size:var(--fs-md); color:var(--black);}
.contact-item a.value{transition:color 0.2s ease;}
.contact-item a.value:hover{color:var(--red);}

/* ==========================================================================
   Footer
   ========================================================================== */
footer{
  background:var(--black);
  color:var(--gray-300);
  padding-top:var(--sp-6);
  padding-bottom:var(--sp-4);
}
.footer-top{
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr;
  gap:var(--sp-5);
  align-items:start;
  padding-bottom:var(--sp-5);
  border-bottom:1px solid rgba(255,255,255,0.12);
}
.footer-top img.brand{height:64px; width:auto;}
.footer-col h4{
  font-family:var(--font-display);
  font-weight:400;
  font-size:var(--fs-xs);
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--gray-500);
  margin:0 0 var(--sp-2);
}
.footer-col a,.footer-col p{display:block; color:var(--gray-300); font-size:var(--fs-sm); margin-bottom:0.5rem;}
.footer-col a:hover{color:var(--white);}
.footer-col img.natitud{height:24px; width:auto; margin-top:0.4rem;}
.footer-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:var(--sp-2);
  padding-top:var(--sp-3);
  font-size:var(--fs-xs);
  color:var(--gray-500);
}
.footer-bottom a{color:var(--gray-300);}
.footer-bottom a:hover{color:var(--white);}

/* ==========================================================================
   Page légale
   ========================================================================== */
.legal{max-width:760px;}
.legal h1{font-size:var(--fs-2xl); margin-bottom:var(--sp-5);}
.legal h3{font-family:var(--font-display); font-weight:400; font-size:var(--fs-md); letter-spacing:0.04em; margin-bottom:0.5rem;}
.legal .block{padding-bottom:var(--sp-4); margin-bottom:var(--sp-4); border-bottom:1px solid var(--line);}
.legal .block:last-child{border-bottom:none;}
.legal p{color:var(--gray-700);}
.legal a{color:var(--black); border-bottom:1px solid var(--gray-300);}
.legal a:hover{border-color:var(--red);}
.legal em{color:var(--red); font-style:normal;}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:960px){
  :root{--fs-3xl:3rem; --fs-2xl:2.4rem;}
  .hero .container{grid-template-columns:1fr;}
  .hero h1{max-width:none;}
  .hero-visual{max-width:420px; margin-left:0;}
  .mission-grid,.section-head,.contact-grid,.brand-featured{grid-template-columns:1fr;}
  .pillars{grid-template-columns:1fr;}
  .footer-top{grid-template-columns:1fr;}
  .nav-links{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:var(--white);
    flex-direction:column;
    gap:var(--sp-2);
    padding:var(--sp-3) var(--sp-4) var(--sp-4);
    border-bottom:1px solid var(--line);
    display:none;
  }
  .nav-links.open{display:flex;}
  .nav-toggle{display:block;}
  .nav .btn{display:none;}
}
@media (max-width:600px){
  :root{--sp-7:4.5rem; --sp-6:3.5rem; --fs-3xl:2.5rem;}
  .nav .container{height:72px;}
  .nav-logo img{height:36px;}
  .brand-featured{padding:var(--sp-4);}
  .vertical-row{grid-template-columns:1fr;}
}