/* ==============================================================
   FIVE FRUITS — SYSTÈME VISUEL PARTAGÉ
   Noir mat profond / blanc pur — accent or fin — silence, rareté.
   ============================================================== */

/* Polices auto-hebergees (remplace Google Fonts) */
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300 500;font-display:swap;src:url('fonts/cormorant-garamond-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300 500;font-display:swap;src:url('fonts/cormorant-garamond-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:300 500;font-display:swap;src:url('fonts/montserrat-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:300 500;font-display:swap;src:url('fonts/montserrat-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
:root{
  --noir-mat:#0A0A0A;
  --noir-intense:#050505;
  --blanc-pur:#FFFFFF;
  --texte-clair:rgba(255,255,255,.92);
  --texte-clair-att:rgba(255,255,255,.6);
  --texte-sombre:#0A0A0A;
  --texte-sombre-att:#5C5C58;
  --or-fin:#B08D57;
  --rouge-sourd:#6B2C2C;
  --hairline-clair:rgba(176,141,87,.3);
  --hairline-sombre:rgba(10,10,10,.15);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--noir-mat);
  color:var(--texte-clair);
  font-family:'Montserrat',sans-serif;
  font-weight:300;
  letter-spacing:.02em;
  line-height:1.8;
  margin:0;
}

.serif{font-family:'Cormorant Garamond',serif; font-weight:400; letter-spacing:0;}

.label{
  font-family:'Montserrat',sans-serif;
  font-weight:300;
  font-size:11px;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--or-fin);
}

.btn-luxe{
  display:inline-block;
  font-family:'Montserrat',sans-serif;
  font-weight:400;
  font-size:12px;
  letter-spacing:.25em;
  text-transform:uppercase;
  background:transparent;
  border:1px solid var(--or-fin);
  color:inherit;
  padding:16px 40px;
  cursor:pointer;
  text-decoration:none;
  transition:all .5s ease;
}
.btn-luxe:hover{background:var(--or-fin); color:var(--noir-mat);}
.btn-luxe:disabled{opacity:.3; cursor:not-allowed;}
.btn-luxe:disabled:hover{background:transparent; color:inherit;}

.section-clair{background:var(--blanc-pur); color:var(--texte-sombre);}
.section-clair .label{color:var(--or-fin);}
body .section-clair .gris{color:var(--texte-sombre-att);}
.section-sombre .gris{color:var(--texte-clair-att);}

.hairline{border-top:1px solid var(--hairline-clair);}
.section-clair .hairline{border-top-color:var(--hairline-sombre);}

.section{padding:140px 8vw;}
@media(max-width:768px){.section{padding:88px 6vw;}
  section[style*="grid-template-columns:1fr 1fr"]{display:flex !important; flex-direction:column !important;}
  section[style*="grid-template-columns:1fr 1fr"] > *{width:100%;}
}

.fade-in{opacity:0; transform:translateY(24px); transition:opacity 1s ease, transform 1s ease;}
.fade-in.visible{opacity:1; transform:translateY(0);}

/* Navigation */
.ff-nav{
  position:fixed; top:0; left:0; width:100%; z-index:50;
  display:flex; justify-content:space-between; align-items:center;
  padding:26px 8vw;
  background:rgba(10,10,10,.78); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid rgba(255,255,255,.06);
}
.ff-nav .logo{font-family:'Cormorant Garamond',serif; font-size:20px; letter-spacing:.2em; color:var(--blanc-pur); text-decoration:none;}
.ff-nav-links{display:flex; gap:32px; align-items:center;}
.ff-nav-links a{
  font-family:'Montserrat',sans-serif; font-weight:300; font-size:11px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--texte-clair);
  text-decoration:none; border-bottom:1px solid transparent; padding-bottom:4px;
  transition:border-color .4s ease;
}
.ff-nav-links a:hover{border-color:var(--or-fin);}
.ff-nav-links a.registre{color:var(--or-fin);}
.ff-nav-toggle-input{position:absolute;opacity:0;width:0;height:0;pointer-events:none;display:none;}
.ff-nav-toggle{display:none; flex-direction:column; justify-content:center; gap:5px; width:26px; height:20px; cursor:pointer; z-index:60; background:none; border:none; padding:0;}
.ff-nav-toggle span{display:block; width:100%; height:1px; background:var(--blanc-pur);}
.ff-nav-backdrop{display:none;}
@media(max-width:860px){
  .ff-nav-toggle{display:flex !important;}
  .ff-nav-links{
    display:flex; position:fixed; top:0; right:0; height:100vh; width:min(78vw,320px);
    background:var(--noir-mat); flex-direction:column; align-items:flex-start; justify-content:center; gap:30px;
    padding:0 48px; margin:0; transform:translateX(100%);
    transition:transform .45s cubic-bezier(.65,0,.35,1); border-left:1px solid var(--hairline-clair);
  }
  .ff-nav-toggle-input:checked ~ .ff-nav-links{transform:translateX(0);}
  .ff-nav-toggle-input:checked ~ .ff-nav-backdrop{
    display:block; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:55;
  }
  .ff-nav-links a{font-size:13px;}
}

/* Footer */
.ff-footer{
  padding:64px 8vw 40px; text-align:center; background:var(--noir-intense);
  border-top:1px solid var(--hairline-clair);
}
.ff-footer p{font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--texte-clair-att); margin:6px 0;}
.ff-footer a{color:var(--texte-clair-att); text-decoration:none;}
.ff-footer a:hover{color:var(--or-fin);}

/* Formulaires */
input[type=text], input[type=email]{
  background:transparent; border:none; border-bottom:1px solid rgba(255,255,255,.25);
  color:inherit; font-family:'Montserrat',sans-serif; font-weight:300; letter-spacing:.05em;
  padding:12px 0; width:100%; outline:none; font-size:15px;
}
input::placeholder{color:var(--texte-clair-att);}
.section-clair input[type=text], .section-clair input[type=email]{border-bottom-color:rgba(10,10,10,.25);}
.section-clair input::placeholder{color:var(--texte-sombre-att);}

/* Hero vidéo */
.hero-video-wrap{
  position:relative; min-height:100vh; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
}
.hero-video-wrap video{
  position:absolute; top:50%; left:50%; width:100%; height:100%;
  object-fit:cover; transform:translate(-50%,-50%); z-index:0;
}
.hero-video-wrap::after{
  content:""; position:absolute; inset:0;
  background:rgba(5,5,5,.6); z-index:1;
}
.hero-video-wrap > *:not(video){position:relative; z-index:2;}

/* Vues du tunnel (registre) */
.view{display:none;}
.view.active{display:block;}

.creation-card{
  border:1px solid var(--hairline-clair); padding:28px; cursor:pointer;
  transition:border-color .4s ease, background .4s ease; text-align:left; background:transparent;
}
.creation-card:hover{border-color:var(--or-fin);}
.creation-card.selected{border-color:var(--or-fin); background:rgba(176,141,87,.08);}
.creation-card .swatch{aspect-ratio:16/9; background:linear-gradient(160deg,#1a1a1a,#050505); margin-bottom:18px;}

/* Accordéon FAQ */
.ff-accordion-item{border-bottom:1px solid var(--hairline-clair);}
.ff-accordion-q{
  display:flex; justify-content:space-between; align-items:center;
  padding:28px 0; cursor:pointer; font-family:'Cormorant Garamond',serif; font-size:20px;
}
.ff-accordion-a{
  max-height:0; overflow:hidden; transition:max-height .5s ease;
  font-size:15px; color:var(--texte-clair-att);
}
.ff-accordion-a p{padding-bottom:24px; max-width:60ch;}
.ff-accordion-item.open .ff-accordion-a{max-height:240px;}
.ff-accordion-item.open .ff-accordion-q .plus{transform:rotate(45deg);}
.ff-accordion-q .plus{font-family:'Cormorant Garamond',serif; font-size:24px; color:var(--or-fin); transition:transform .4s ease;}