/* Nella Parfums — nacre froide et or de l'enseigne. Le filet doré du logo structure la page. */
:root{
  --nacre:#F4F7F8;--nacre-2:#E9EFF1;--nacre-3:#DCE5E8;--blanc:#FCFDFD;
  --or:#A88040;--or-clair:#D8B87A;--or-pale:#EFE2C8;--or-profond:#7E5D25;
  --encre:#1F2226;--encre-2:#2A2F34;
  --gris:#6E767B;--gris-clair:#9AA3A8;--trait:#D3DCE0;--trait-or:#E2D2B0;
  --titre:'Prata','Didot',Georgia,serif;
  --util:'Josefin Sans','Helvetica Neue',Arial,sans-serif;
  --plume:'Parisienne',cursive;
  --gout:22px;--max:1220px;--ease:cubic-bezier(.22,.8,.26,1);
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip;scroll-behavior:smooth;scrollbar-gutter:stable}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--nacre);color:var(--encre);
  font-family:var(--util);font-size:17px;font-weight:300;line-height:1.7;
  padding-inline:var(--gout);overflow-x:clip;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
p{margin:0}
h1,h2,h3{margin:0;font-family:var(--titre);font-weight:400;line-height:1.2;letter-spacing:.004em;text-wrap:balance}
:focus-visible{outline:2px solid var(--or);outline-offset:3px}
section[id]{scroll-margin-top:96px}

.script{font-family:var(--plume);font-size:1.5rem;color:var(--or);line-height:1.2}
.script-clair{color:var(--or-clair)}
.amorce{font-size:1rem;font-weight:300;color:var(--gris);max-width:50ch}

.mention{
  margin:0 calc(-1*var(--gout));padding:.6rem var(--gout);background:var(--encre);color:var(--gris-clair);
  font-size:.72rem;font-weight:300;letter-spacing:.03em;text-align:center;line-height:1.5;
}
.mention b{color:var(--or-clair);font-weight:400}

/* entête */
.entete{
  position:sticky;top:0;z-index:40;margin:0 calc(-1*var(--gout));padding:.7rem var(--gout);
  background:rgba(244,247,248,.95);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--trait-or);display:flex;flex-wrap:wrap;align-items:center;gap:.7rem 1.8rem;
}
.marque{margin-right:auto;display:block;line-height:0;padding:6px;background:var(--blanc);box-shadow:0 0 0 1px var(--trait-or)}
.marque img{width:104px}
.menu{display:none;gap:1.9rem}
.menu a{font-size:.8rem;font-weight:400;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--gris);padding-block:.2rem;border-bottom:1px solid transparent;transition:color .3s,border-color .3s}
.menu a:hover{color:var(--encre);border-bottom-color:var(--or)}
@media (min-width:960px){.menu{display:flex}}
@media (max-width:959px){
  .entete{flex-wrap:nowrap;gap:.8rem;padding-block:.55rem}
  .marque{padding:4px}
  .marque img{width:70px}
  .bouton-tete{padding:.6rem 1rem;font-size:.68rem;letter-spacing:.12em;white-space:nowrap}
}
@media (max-width:360px){
  .marque img{width:60px}
  .bouton-tete{padding:.55rem .8rem;font-size:.64rem;letter-spacing:.1em}
}

/* boutons */
.bouton{
  display:inline-block;padding:.78rem 1.7rem;background:var(--or);color:var(--blanc);
  font-family:var(--util);font-size:.76rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;border:1px solid var(--or);
  transition:background .3s,color .3s;
}
.bouton:hover{background:transparent;color:var(--or-profond)}
.lien-or{
  display:inline-flex;align-items:center;gap:.45rem;font-size:.76rem;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;text-decoration:none;color:var(--or-profond);cursor:pointer;
  border-bottom:1px solid var(--or);padding-bottom:.2rem;transition:color .3s;
}
.lien-or:hover{color:var(--encre)}

/* ouverture */
.ouverture{max-width:var(--max);margin-inline:auto;display:grid;gap:2.6rem;align-items:center;padding-block:3.2rem 3.6rem}
.ouverture-texte{display:grid;gap:1.2rem;justify-items:start}
.ouverture h1{font-size:clamp(2rem,4.6vw,3.4rem);max-width:15ch}
.actes{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.8rem;margin-top:.7rem}
.cadre-ouverture{
  margin:0;justify-self:center;width:100%;max-width:400px;position:relative;
  padding:14px;background:var(--blanc);
  box-shadow:0 0 0 1px var(--trait-or), 0 0 0 7px var(--blanc), 0 0 0 8px var(--or-pale);
}
.cadre-ouverture img{width:100%;aspect-ratio:1;object-fit:cover}
@media (min-width:900px){
  .ouverture{grid-template-columns:1.1fr .9fr;gap:4.2rem;padding-block:4rem 4.4rem}
  .cadre-ouverture{max-width:420px}
}

/* repères */
.reperes{
  list-style:none;margin:0 calc(-1*var(--gout));padding:1.6rem var(--gout);background:var(--nacre-2);
  border-block:1px solid var(--trait-or);display:grid;gap:1.3rem;grid-template-columns:1fr;text-align:center;
}
.reperes li{display:grid;gap:.15rem}
.reperes b{font-family:var(--titre);font-weight:400;font-size:1.28rem;color:var(--or-profond)}
.reperes span{font-size:.82rem;font-weight:300;color:var(--gris)}
@media (min-width:760px){.reperes{grid-template-columns:repeat(3,1fr);gap:2.4rem;padding-block:2rem}}

/* la collection */
.collection{max-width:var(--max);margin-inline:auto;padding-block:4.4rem}
.entete-bloc{display:grid;gap:.8rem;justify-items:center;text-align:center;margin-bottom:2rem}
.entete-bloc h2{font-size:clamp(1.8rem,3.8vw,2.7rem)}
.entete-bloc .amorce{text-align:center}
.pour{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin-bottom:2.4rem}
.pour-bouton{
  padding:.44rem 1.1rem;background:transparent;border:1px solid var(--trait-or);cursor:pointer;
  font-family:var(--util);font-size:.72rem;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--gris);
  transition:background .25s,color .25s,border-color .25s;
}
.pour-bouton:hover{border-color:var(--or);color:var(--or-profond)}
.pour-bouton.on{background:var(--or);border-color:var(--or);color:var(--blanc)}
.flacons{display:grid;gap:2.2rem 1.4rem;grid-template-columns:repeat(2,1fr)}
.flacon{display:grid;gap:.28rem;align-content:start;text-align:center}
.cadre-photo{
  display:block;background:var(--blanc);padding:10px;margin-bottom:.9rem;
  box-shadow:0 0 0 1px var(--trait-or);transition:box-shadow .4s var(--ease);
}
.cadre-photo img{width:100%;aspect-ratio:1;object-fit:cover;transition:transform .8s var(--ease)}
.flacon:hover .cadre-photo{box-shadow:0 0 0 1px var(--or),0 14px 30px -20px rgba(31,34,38,.45)}
.flacon:hover .cadre-photo img{transform:scale(1.03)}
.flacon-pour{font-size:.66rem;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:var(--or)}
.flacon h3{font-size:1.1rem;line-height:1.3}
.flacon-type{font-size:.78rem;font-weight:300;color:var(--gris)}
.flacon-pied{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.5rem 1rem;margin-top:.7rem;padding-top:.7rem;border-top:1px solid var(--trait-or)}
.flacon-pied b{font-family:var(--titre);font-weight:400;font-size:1.06rem}
.commander{
  font-size:.66rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;
  cursor:pointer;color:var(--or-profond);border-bottom:1px solid var(--or);padding-bottom:.15rem;transition:color .3s}
.commander:hover{color:var(--encre)}
.compte{margin-top:2rem;text-align:center;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gris-clair)}
@media (min-width:700px){.flacons{grid-template-columns:repeat(3,1fr);gap:2.6rem 1.8rem}}
@media (min-width:1080px){.flacons{grid-template-columns:repeat(4,1fr)}}

/* le bon format */
.format{
  margin:0 calc(-1*var(--gout));padding:4.2rem var(--gout) 4.6rem;background:var(--encre);color:var(--nacre);
  display:grid;gap:2.4rem;
}
.format>*{max-width:var(--max);margin-inline:auto;width:100%}
.format-texte{display:grid;gap:1.1rem}
.format-texte h2{font-size:clamp(1.8rem,3.8vw,2.6rem);color:var(--nacre)}
.format-texte p{font-weight:300;color:#AEB6BA;max-width:52ch}
.format-liste{list-style:none;margin:0;padding:0;display:grid;gap:0}
.format-liste li{display:grid;gap:.15rem;padding:1.1rem 0;border-top:1px solid #39424A}
.format-liste li:last-child{border-bottom:1px solid #39424A}
.format-liste b{font-family:var(--titre);font-weight:400;font-size:1.3rem;color:var(--or-clair)}
.format-liste span{font-size:.88rem;font-weight:300;color:#AEB6BA}
@media (min-width:920px){
  .format{grid-template-columns:1.1fr .9fr;column-gap:4rem;align-items:center}
  .format>*{max-width:none;margin-inline:0}
}

/* commander */
.passer-commande{max-width:var(--max);margin-inline:auto;padding-block:4.4rem;display:grid;gap:2.2rem;justify-items:center;text-align:center}
.passer-tete{display:grid;gap:.8rem;justify-items:center}
.passer-tete h2{font-size:clamp(1.8rem,3.8vw,2.7rem)}
.passer-tete .amorce{text-align:center}
.voies{display:grid;gap:1.8rem;justify-items:center}
.coordonnees{list-style:none;margin:0;padding:0;display:grid;gap:1rem;justify-items:center}
.coordonnees li{display:grid;gap:.1rem}
.coordonnees span{font-size:.64rem;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:var(--or)}
.coordonnees a{font-family:var(--titre);font-size:1.15rem;text-decoration:none}
.coordonnees a:hover{color:var(--or-profond)}

/* pied */
.pied{margin:0 calc(-1*var(--gout));padding:3rem var(--gout) 1.5rem;background:var(--nacre-2);border-top:1px solid var(--trait-or)}
.pied-zone{max-width:var(--max);margin-inline:auto;display:grid;gap:.6rem;justify-items:center;text-align:center}
.pied-logo{width:132px;padding:8px;background:var(--blanc);box-shadow:0 0 0 1px var(--trait-or)}
.pied-bas{display:flex;flex-wrap:wrap;gap:.4rem 2rem;justify-content:center;margin-top:1.6rem;padding-top:1.2rem;border-top:1px solid var(--trait-or);width:100%;font-size:.72rem;font-weight:300;color:var(--gris)}

/* mouvement */
@keyframes monte{from{opacity:0;transform:translateY(.5em)}to{opacity:1;transform:none}}
@keyframes parait{from{opacity:0}to{opacity:1}}
.ouverture .script{animation:monte .85s var(--ease) .06s both}
.ouverture h1{animation:monte 1s var(--ease) .18s both}
.ouverture .amorce{animation:monte .9s var(--ease) .36s both}
.ouverture .actes{animation:monte .9s var(--ease) .48s both}
.cadre-ouverture{animation:parait 1.2s var(--ease) .35s both}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}