/* ==========================================================================
   Le Fil du Jour - Wedding Planner & Designer
   Charte imposee par la cliente : fuchsia #D81B60, orange solaire #FF7A1A,
   or champagne #C8A46A, creme #F9F6F2 dominant, noir profond #222222.
   Cormorant Garamond (titres) + Montserrat (textes), nommes dans le brief.
   ========================================================================== */

@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:300 600;
  font-display:swap;src:url("assets/fonts/cormorant.woff2") format("woff2")}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:300 600;
  font-display:swap;src:url("assets/fonts/montserrat.woff2") format("woff2")}

:root{
  --fuchsia:#D81B60;
  --fuchsia-fonce:#A8134A;
  --orange:#FF7A1A;
  --or:#C8A46A;
  --creme:#F9F6F2;
  --blanc:#FFFFFF;
  --noir:#222222;
  --gris:#6E6862;
  --ligne:rgba(34,34,34,.10);

  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,sans-serif;

  --r:14px;              /* rayon unique : cartes, images, champs */
  --r-pill:999px;        /* rayon unique : boutons */
  --pad:clamp(1.25rem,5vw,4.5rem);
  --max:1280px;
  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--creme);color:var(--noir);
  font-family:var(--sans);font-weight:300;
  font-size:clamp(15px,1vw,16.5px);line-height:1.75;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--fuchsia);color:#fff}
:focus-visible{outline:2px solid var(--fuchsia);outline-offset:3px;border-radius:4px}

/* ---------- structure ---------- */
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.etroit{max-width:820px;margin-inline:auto}
section{padding-block:clamp(4.5rem,9vw,8rem)}
.fond-blanc{background:var(--blanc)}

/* ---------- typographie ---------- */
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;line-height:1.14;
  letter-spacing:.004em}
h1{font-size:clamp(2.1rem,5.2vw,4rem)}
h2{font-size:clamp(1.7rem,3.7vw,2.9rem)}
h3{font-size:clamp(1.3rem,2vw,1.75rem)}
h4{font-size:1.15rem}
.maj{text-transform:none;letter-spacing:0}
.chapo{font-size:clamp(1rem,1.25vw,1.13rem);color:var(--gris);max-width:62ch}
.italique{font-family:var(--serif);font-style:italic;line-height:1.2;padding-bottom:.12em}
.etiq{font-family:var(--sans);font-size:.71rem;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--fuchsia);display:block}
p+p{margin-top:1.05rem}

/* ---------- boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--sans);font-size:.78rem;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;padding:1.02rem 2rem;border-radius:var(--r-pill);
  text-decoration:none;border:1px solid transparent;white-space:nowrap;cursor:pointer;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),
    background .3s,color .3s,border-color .3s}
.btn:active{transform:scale(.98)}
.btn--p{background:var(--fuchsia);color:#fff;
  box-shadow:0 10px 26px -13px rgba(216,27,96,.8)}
.btn--p:hover{background:var(--fuchsia-fonce);transform:translateY(-2px);
  box-shadow:0 16px 34px -13px rgba(216,27,96,.9)}
.btn--s{border-color:rgba(34,34,34,.3);color:var(--noir);background:transparent}
.btn--s:hover{border-color:var(--noir);transform:translateY(-2px)}
.btn--clair{background:#fff;color:var(--noir)}
.pied a.btn--clair{color:var(--noir)}   /* .pied a l'emportait : texte blanc sur fond blanc */
.btn--clair:hover{transform:translateY(-2px);box-shadow:0 14px 30px -15px rgba(0,0,0,.45)}
.duo{display:flex;flex-wrap:wrap;gap:.8rem}

/* ---------- en-tete ---------- */
.entete{position:sticky;top:0;z-index:60;background:rgba(249,246,242,.92);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--ligne)}
.entete__in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  height:72px}
.entete__logo img{height:36px;width:auto}
.nav{display:flex;gap:2rem;list-style:none}
.nav a{text-decoration:none;font-size:.775rem;letter-spacing:.09em;text-transform:uppercase;
  position:relative;padding-block:.4rem;white-space:nowrap}
.nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;
  background:var(--fuchsia);transition:width .35s var(--ease)}
.nav a:hover::after,.nav a[aria-current="page"]::after{width:100%}
.nav a[aria-current="page"]{color:var(--fuchsia)}
.entete .btn{padding:.78rem 1.4rem;font-size:.69rem}
.brg{display:none;background:none;border:0;cursor:pointer;padding:.5rem;
  width:42px;height:42px}
.brg i{display:block;width:22px;height:1.5px;background:var(--noir);margin:5px auto;
  transition:transform .3s var(--ease),opacity .2s}
.brg[aria-expanded="true"] i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.brg[aria-expanded="true"] i:nth-child(2){opacity:0}
.brg[aria-expanded="true"] i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ---------- pied ---------- */
.pied{background:var(--noir);color:rgba(255,255,255,.72);
  padding-block:clamp(3.5rem,6vw,5rem)}
.pied__logo{height:38px;width:auto;margin-bottom:1.4rem}
.pied__g{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:2.5rem}
.pied h4{font-family:var(--sans);font-size:.71rem;letter-spacing:.19em;
  text-transform:uppercase;color:#fff;margin-bottom:1.05rem;font-weight:500}
.pied a{color:rgba(255,255,255,.72);text-decoration:none;transition:color .25s}
.pied a:hover{color:var(--orange)}
.pied ul{list-style:none;display:grid;gap:.58rem;font-size:.9rem}
.pied__bas{margin-top:3rem;padding-top:1.7rem;border-top:1px solid rgba(255,255,255,.14);
  display:flex;justify-content:space-between;gap:1.2rem;flex-wrap:wrap;font-size:.8rem;
  color:rgba(255,255,255,.5)}

/* ---------- bandeau de marque ---------- */
.marque{background:linear-gradient(115deg,var(--fuchsia-fonce),var(--fuchsia) 48%,
  var(--orange));color:#fff;text-align:center}
.marque img{height:32px;width:auto;margin:0 auto 2rem;opacity:.95}
.marque p{font-family:var(--serif);font-style:italic;
  font-size:clamp(1.45rem,3.4vw,2.5rem);line-height:1.34;max-width:23ch;
  margin-inline:auto;padding-bottom:.12em}

/* ---------- FAQ ---------- */
.faq h2{text-align:center;margin-bottom:2.8rem}
details{border-bottom:1px solid var(--ligne);padding:1.45rem 0}
summary{font-family:var(--serif);font-size:clamp(1.1rem,1.65vw,1.38rem);cursor:pointer;
  list-style:none;display:flex;justify-content:space-between;align-items:flex-start;
  gap:1.5rem;letter-spacing:.01em;line-height:1.3}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:var(--sans);font-weight:300;font-size:1.55rem;
  color:var(--fuchsia);transition:transform .35s var(--ease);flex:none;line-height:1}
details[open] summary::after{transform:rotate(45deg)}
details>p{margin-top:1rem;color:var(--gris);max-width:72ch}

/* ---------- appel final ---------- */
.final{text-align:center}
.final .chapo{margin:1.2rem auto 2.3rem}
.final__n{margin-top:1.4rem;font-size:.84rem;color:var(--gris)}

/* ---------- animations ---------- */
.anim [data-rev]{opacity:0;transform:translateY(22px);
  transition:opacity .8s ease,transform .8s var(--ease)}
.anim [data-rev].vu{opacity:1;transform:none}
[data-rev="1"]{transition-delay:.08s}
[data-rev="2"]{transition-delay:.16s}
[data-rev="3"]{transition-delay:.24s}
[data-rev="4"]{transition-delay:.32s}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .anim [data-rev]{opacity:1!important;transform:none!important;transition:none!important}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;
    background:var(--creme);padding:1.4rem var(--pad) 2rem;gap:1.15rem;
    border-bottom:1px solid var(--ligne)}
  .nav.ouvert{display:flex}
  .entete__in > .btn{display:none}
  .brg{display:block}
  .pied__g{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .pied__g{grid-template-columns:1fr}
  .duo .btn{width:100%}
}

/* ==========================================================================
   ANIMATIONS
   Chaque effet a une raison d'etre : hierarchiser, raconter, ou accuser
   reception d'une action. Rien de decoratif. Tout se desactive sous
   prefers-reduced-motion.
   ========================================================================== */

/* 1. L'image du heros se pose en arrivant : la scene se stabilise. */
.hero__v img{animation:pose 1.5s var(--ease) both}
@keyframes pose{from{transform:scale(1.07)}to{transform:scale(1)}}

/* 2. Le titre s'assemble mot a mot : on lit la promesse dans l'ordre. */
.mot{display:inline-block;opacity:0;transform:translateY(.55em);
  animation:monte .72s var(--ease) both;animation-delay:calc(var(--i) * 55ms)}
@keyframes monte{to{opacity:1;transform:none}}

/* 3. Un filet se trace sous les titres de section : il marque l'ouverture. */
.maj.trace{position:relative;padding-bottom:.42em}
.maj.trace::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;
  background:linear-gradient(90deg,var(--fuchsia),var(--orange));
  transition:width 1s var(--ease) .15s}
.maj.trace.vu::after{width:72px}
.tete .maj.trace::after,.final .maj.trace::after,.faq .maj.trace::after{left:50%;
  transform:translateX(-50%)}

/* 4. Le bandeau de marque respire lentement : c'est la pause du parcours. */
.marque{background-size:180% 180%;animation:respire 18s ease-in-out infinite}
@keyframes respire{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* 5. Retour tactile : le bouton s'enfonce vraiment sous le doigt. */
.btn:active{transform:scale(.975) translateY(0)}

@media (prefers-reduced-motion:reduce){
  .hero__v img,.marque{animation:none}
  .mot{opacity:1;transform:none;animation:none}
  .maj.trace::after{transition:none;width:72px}
}

/* ==========================================================================
   RESPONSIVE : corrections mesurees au navigateur
   ========================================================================== */

/* L'en-tete etait translucide a 92 % : les boutons fuchsia defilant dessous
   transparaissaient et donnaient une tache rose collee au bord. Sur mobile,
   ou l'en-tete est colle en permanence, on le rend opaque. */
@media (max-width:1000px){
  .entete{background:var(--creme)}
  body.menu-ouvert{overflow:hidden}
  .nav.ouvert{box-shadow:0 18px 32px -22px rgba(34,34,34,.5);max-height:calc(100svh - 72px);
    overflow-y:auto}
  .nav.ouvert a{font-size:.9rem;padding-block:.55rem}
  /* Le bouton principal revient dans le menu deroule : il ne doit pas disparaitre
     du parcours mobile. */
  .nav.ouvert::after{content:"";display:block;height:.2rem}
}

/* Le halo decoratif du heros sortait a 420 px pour un ecran de 375.
   Il est desormais contenu, plutot que simplement masque par overflow. */
@media (max-width:1000px){
  .hero__halo{inset:auto 0 -4% auto;width:min(52%,190px)}
}

/* Tous les medias restent dans leur boite, sans exception. */
img,svg,video,iframe{max-width:100%;height:auto}
.hero__v img,.pb__v img,.ap__v img,.off__v img,.portrait img,
.pf__i img,.galerie img,.bande img,.projet__v img{height:100%}

/* Champs de formulaire : jamais plus larges que leur conteneur, meme avec
   les styles natifs iOS. */
input,textarea,select,button{max-width:100%;font-size:16px}
@media (min-width:601px){input,textarea,select{font-size:1rem}}
textarea{resize:vertical}

/* Titres longs : on autorise la cesure plutot que le debordement. */
h1,h2,h3,h4,summary{overflow-wrap:break-word;hyphens:manual}

/* Ancre : un titre vise par un lien ne doit pas passer sous l'en-tete colle. */
:target,[id]{scroll-margin-top:88px}

@media (max-width:600px){
  .entete__in{height:64px}
  .entete__logo img{height:30px}
  :target,[id]{scroll-margin-top:78px}
  .marque p{font-size:clamp(1.3rem,6vw,1.7rem)}
  summary{font-size:1.02rem;gap:1rem}
  .pied__bas{flex-direction:column;gap:.6rem}
}

/* Le CTA n'apparait que dans le menu deroule mobile ; en desktop il vit
   deja dans la barre. */
.nav-cta{display:none}
@media (max-width:1000px){.nav-cta{display:block;margin-top:.6rem}
  .nav-cta .btn{width:100%;font-size:.72rem}}

/* ==========================================================================
   MOBILE D'ABORD : corrections mesurees a 320, 375 et 414 px
   ========================================================================== */

/* 320 px est la largeur reelle des iPhone SE. A cette taille, un bouton en
   majuscules espacees et sans cesure sortait de l'ecran. */
@media (max-width:820px){
  .btn{white-space:normal;text-align:center;line-height:1.35;
    padding:.95rem 1.4rem;letter-spacing:.09em;font-size:.74rem}
  .duo{gap:.7rem}
  .duo .btn{width:100%}
}

@media (max-width:400px){
  :root{--pad:1rem}
  .btn{font-size:.7rem;letter-spacing:.07em;padding:.9rem 1.1rem}
  h1{font-size:clamp(1.65rem,8vw,2.1rem)}
  h2{font-size:clamp(1.35rem,6.4vw,1.75rem)}
  h3{font-size:1.2rem}
  .etiq{font-size:.64rem;letter-spacing:.15em}
  .porte{padding:1.9rem 1.35rem 1.7rem}
  .aside,.form__c,.pilier,.projet__t{padding:1.5rem 1.2rem}
  .off__prix{font-size:1.5rem}
  .etapes li{padding-left:2.5rem}
  .etapes li::before{font-size:1.25rem}
  .marque p{font-size:1.28rem}
  .pb__cite{font-size:1.15rem;padding-left:1rem}
  .hero__p{font-size:1rem}
}

/* Aucun mot, aucune URL, aucun e-mail ne peut plus pousser la page. */
body,.wrap,section,main,footer{min-width:0}
p,li,span,a,summary,label,small,h1,h2,h3,h4{overflow-wrap:anywhere}
.etapes b,.etapes span{overflow-wrap:break-word}

/* ───── V2 : accents de marque sur les titres de section, témoignage, portfolio ───── */
.temoin{padding-block:clamp(3rem,6vw,5rem)}
.temoin h2{margin-top:.4rem}
.temoin__q{margin:1.2rem 0 0;padding:0 0 0 1.4rem;border-left:3px solid var(--fuchsia)}
.temoin__q p{margin:0 0 .9rem}
.temoin__a{font-family:var(--sans);font-size:.85rem;color:var(--gris);margin-top:.6rem}
.duo.centre{justify-content:center;margin-top:1.6rem}
.portfolio__t{text-align:center;margin:0 auto 2.2rem;max-width:48rem}
.portfolio__t h2{margin:0}
.portfolio__s{font-family:var(--serif);font-style:italic;font-size:1.15rem;color:var(--fuchsia);margin-top:.5rem}
.centre.maj.trace::after,.pf__t .maj.trace::after,.portes__t .maj.trace::after{left:50%;transform:translateX(-50%)}
.centre{text-align:center}
.faq__plus{text-align:center;margin-top:1.8rem}
.faq__plus a{color:var(--fuchsia);font-family:var(--sans);font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid currentColor}
.faq-lien{text-align:center}

/* « Centrer les titres » (retour du 10/09) : titres de section centrés partout */
.recit h2,.temoin h2,.faqp h2,.ing__t h2{text-align:center}
.recit .maj.trace::after,.temoin .maj.trace::after,.faqp .maj.trace::after,.ing__t .maj.trace::after{left:50%;transform:translateX(-50%)}
.ing__t .trait{margin-inline:auto}