/* ==========================================================================
   YONA COSMETICS : la page à part « partenaires » (revendeuses et créateurs de
   marque). Chargée sur cette page seulement.

   Elle réemploie les pièces du site (vitrine, bande défilante, section
   revendeuse, rideau, prise de contact) : ce fichier ne porte que ce qui lui
   est propre. Téléphone d'abord : c'est là que Rayan et Rajaa la jugent.
   ========================================================================== */

/* ---------- l'entête : la marque, deux ancres, un bouton ---------- */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.page-seule [id]{scroll-margin-top:calc(var(--entete-h) + var(--e3))}
.entete--seule .entete__in{gap:var(--e4)}
.seule__nav{display:none;gap:var(--e5);margin-left:auto;font-size:var(--t-menu);font-weight:var(--g-fort)}
.seule__nav a{position:relative;text-decoration:none;padding-block:.35rem}
.seule__nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:currentColor;
  transition:right var(--duree-court) var(--courbe)}
.seule__nav a:hover::after{right:0}
@media (min-width:760px){.seule__nav{display:flex}}

/* ---------- la vitrine : ici les flacons ne sont pas des liens ---------- */
.vitrine__objet{display:block}
@media (hover:hover){
  .vitrine__flacon .vitrine__objet:hover img{transform:translateY(-.9rem)}
  .vitrine__flacon .vitrine__objet:hover .vitrine__nom{opacity:1;transform:translate(-50%,-.6rem)}
}

/* Le titre du haut tient sur deux lignes au bureau ; au téléphone sa seconde ligne se coupe en
   deux moitiés égales (« Ou créez / votre marque. ») au lieu de laisser un mot seul. */
.vitrine--seule .ligne>span{text-wrap:balance}

/* ---------- les deux portes ---------- */
/* L'en-tête de section du site borne son titre à 30 caractères de TEXTE COURANT : un titre long
   s'y empilait mot par mot au bureau (vu à la capture du 17/09). Ici la borne se compte dans
   la taille du titre. */
.portes .tete__t{max-width:none}
.portes .tete h2{max-width:22ch}
.portes__grille{display:grid;gap:var(--e4)}
.porte-seule{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;
  text-decoration:none;color:var(--ivoire);background:var(--encre)}
.porte-seule--bleu-nuit{background:var(--bleu-nuit)}
.porte-seule__media{position:relative;aspect-ratio:16/10;overflow:hidden}
.porte-seule__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--courbe)}
.porte-seule__texte{flex:1;display:flex;flex-direction:column;padding:var(--e5) var(--e4) var(--e5)}
.porte-seule .sur-titre{color:var(--or-clair)}
.porte-seule h3{font-size:var(--t-h2);margin-top:var(--e2);font-variation-settings:'opsz' 30}
.porte-seule p:not(.sur-titre){margin-top:var(--e3);max-width:40ch;color:rgba(255,255,255,.88)}
.porte-seule .lien-fleche{margin-top:auto;padding-top:var(--e4);align-self:flex-start;border-color:var(--filet-clair)}
@media (hover:hover){
  .porte-seule:hover .porte-seule__media img{transform:scale(1.05)}
  .porte-seule:hover .lien-fleche svg{transform:translateX(5px)}
}
@media (min-width:900px){
  .portes__grille{grid-template-columns:1fr 1fr;gap:var(--e5)}
  .porte-seule__texte{padding:var(--e5) var(--e5) var(--e6)}
}

/* ---------- le barème : trois paliers à filets, le chiffre en grand ---------- */
.bareme__tete{max-width:46rem}
.paliers{display:grid;margin-top:var(--e5);border-top:1px solid var(--filet-fort);counter-reset:none}
.palier{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;
  gap:.35rem var(--e4);padding-block:var(--e4);border-bottom:1px solid var(--filet)}
.palier__nom{font-family:var(--f-titre);font-weight:var(--g-titre);font-size:var(--t-h3);line-height:1.1}
.palier__nom span{display:block;margin-top:.4rem;font-family:var(--f-texte);font-size:var(--t-petit);
  font-weight:var(--g-fort);letter-spacing:.02em;color:var(--encre-douce)}
.palier__remise{grid-row:span 2;align-self:center;font-family:var(--f-titre);font-weight:var(--g-titre);
  font-size:clamp(3rem,2rem + 5vw,5.4rem);line-height:.9;letter-spacing:-.03em;white-space:nowrap;
  font-variation-settings:'opsz' 44}
.palier__remise em{font-style:normal;font-size:.42em;margin-left:.12em;letter-spacing:0}
.palier__exemple{font-size:var(--t-petit);color:var(--encre-douce)}
.palier__exemple strong{color:var(--encre);font-weight:var(--g-fort)}
.palier__marque{grid-column:1/-1;justify-self:start;margin-top:.35rem;padding:.3rem .7rem;
  background:var(--encre);color:var(--ivoire);font-size:var(--t-mini);font-weight:var(--g-fort);
  letter-spacing:.06em;text-transform:uppercase}
.palier--fort .palier__remise{color:var(--bleu-nuit)}
.bareme__ecart{margin-top:var(--e5);max-width:34ch;font-family:var(--f-titre);font-weight:var(--g-titre);
  font-size:var(--t-h3);line-height:1.22;font-variation-settings:'opsz' 26}
.bareme__ecart strong{font-weight:inherit;color:var(--bleu-nuit);white-space:nowrap}
.bareme__note{margin-top:var(--e4);font-size:var(--t-petit);color:var(--encre-douce);max-width:60ch}
@media (min-width:820px){
  .paliers{grid-template-columns:repeat(3,1fr);border-top:0}
  .palier{grid-template-columns:minmax(0,1fr);align-items:start;align-content:start;gap:var(--e3);
    padding:var(--e5) var(--e5) var(--e5) 0;border-top:1px solid var(--filet-fort);border-bottom:0}
  .palier+.palier{padding-left:var(--e5);border-left:1px solid var(--filet)}
  .palier__remise{grid-row:auto;align-self:start;order:-1}
  .bareme__ecart{max-width:40ch}
}

/* ---------- ce que la revendeuse y gagne ---------- */
.atouts__liste{display:grid;margin:var(--e4) 0 0}
.atouts__liste>div{display:grid;gap:.3rem var(--e4);padding-block:var(--e4);border-top:1px solid var(--filet)}
.atouts__liste>div:last-child{border-bottom:1px solid var(--filet)}
.atouts__liste dt{font-family:var(--f-titre);font-weight:var(--g-titre);font-size:var(--t-h4);line-height:1.2}
.atouts__liste dd{margin:0;color:var(--encre-douce);max-width:60ch}
@media (min-width:820px){
  .atouts__liste>div{grid-template-columns:minmax(0,22rem) minmax(0,1fr);align-items:baseline}
}

/* ---------- créer sa marque : deux voies côte à côte ---------- */
.voies{display:grid;gap:var(--e6)}
.voie{padding-top:var(--e4);border-top:2px solid var(--encre)}
.voie h3{font-size:var(--t-h2);margin-top:var(--e2);font-variation-settings:'opsz' 30}
.voie__texte{margin-top:var(--e3);color:var(--encre-douce);max-width:46ch}
.etapes--clair{margin-top:var(--e5)}
.etapes--clair li{border-top-color:var(--filet)}
.etapes--clair li:last-child{border-bottom-color:var(--filet)}
.etapes--clair li::before{color:var(--bleu-nuit)}
.etapes--clair p{color:var(--encre);font-size:var(--t-corps);max-width:42ch}
@media (min-width:620px){.etapes--clair li::before{grid-row:auto}}
@media (min-width:900px){.voies{grid-template-columns:1fr 1fr;gap:var(--e6);align-items:start}}

.prestations ul{display:flex;flex-wrap:wrap;gap:.55rem;margin:var(--e4) 0 0;padding:0;list-style:none}
.prestations li{padding:.55rem .95rem;border:1px solid var(--filet-fort);font-size:var(--t-petit);
  font-weight:var(--g-fort);background:var(--ivoire-clair)}

/* ---------- la prise de contact et le pied ---------- */
.section--ecrire{background:var(--sable);
  background-image:radial-gradient(120% 90% at 90% 0%,rgba(255,255,255,.7) 0%,rgba(255,255,255,0) 60%)}
.pied__seul{display:grid;gap:var(--e5)}
.pied--seul li+li{margin-top:.7rem}
.pied--seul ul{margin:0;padding:0;list-style:none}
.pied--seul .lien-fleche{border-color:rgba(255,255,255,.3)}
@media (min-width:760px){.pied__seul{grid-template-columns:1.4fr 1fr;gap:var(--e6);align-items:start}}

/* ---------- le téléphone en mouvement (même langage que l'accueil) ---------- */
@media (max-width:819.98px) and (prefers-reduced-motion:no-preference){
  /* les trois paliers arrivent de la droite, l'un après l'autre. La liste les ROGNE : sans ça,
     un palier encore décalé élargit la page de 19 px (409 pour 390, mesuré à la sonde). */
  .paliers{overflow:hidden;overflow:clip}
  .js .palier[data-reveal]{transform:translate(2.5rem,0)}
  .js .palier[data-reveal].est-vu{transform:none}
}
@supports (animation-timeline:view()){
  @media (max-width:899.98px) and (prefers-reduced-motion:no-preference){
    /* la photo de chaque porte bouge moins vite que sa carte (repère nommé, posé sur la carte :
       un cadre en `overflow:hidden` capterait `view()`, voir la fin de styles.css) */
    .porte-seule{view-timeline:--porte block}
    .porte-seule__media img{scale:1.14;
      animation:kb var(--kenburns) ease-in-out infinite alternate,derive-recule-court linear both;
      animation-timeline:auto,--porte;animation-range:normal,cover 0% cover 100%}
    .hors-vue .porte-seule__media img{animation-play-state:paused,running}
  }
}