/* ── Bandeau du catalogue iFredZ, entre la ligne de mise à jour et le pied
   de page. Aucun slogan, une hauteur discrète, trois zones — le catalogue en
   carrousel à gauche, le seul mot « iFredZ » au centre, un bouton fin à
   droite. Registre : horlogerie.

   Trois choix de facture :
   1. la lumière du nom est un ANNEAU CONIQUE qui tourne sur le contour
      (un angle animé via @property), pas un reflet plat qu'on fait glisser ;
   2. tous les mélanges et dégradés sont calculés en OKLAB, l'espace de la
      perception : un bleu qui se dilue n'y traverse pas de creux grisâtre ;
   3. le carrousel est une animation CSS décalée dans le temps, pilotée par
      le navigateur — aucun minuteur, aucune dérive.
   Le relief se fait par la lumière et l'ombre colorée, jamais par un biseau
   gris, et le nom ne se décale jamais de son centre. ── */

/* l'angle de l'anneau : déclaré pour que le navigateur sache l'interpoler */
@property --ifz-a{syntax:"<angle>";inherits:false;initial-value:0deg}

.ifz-pres{width:100%;padding:.2rem .875rem .55rem;background:transparent}
.ifz-pres-l{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:.55rem;max-width:27rem;margin:0 auto;padding:.34rem .5rem;
  text-decoration:none;color:var(--ink);
  border:1px solid color-mix(in oklab, var(--hair) 82%, transparent);
  border-radius:999px;
  background:color-mix(in oklab, var(--panel) 55%, transparent);
  -webkit-backdrop-filter:blur(10px) saturate(1.15);
  backdrop-filter:blur(10px) saturate(1.15);
  transition:border-color .3s ease, background-color .3s ease;
}
.ifz-pres-l:hover{
  border-color:color-mix(in oklab, var(--accent) 32%, var(--hair));
  background:color-mix(in oklab, var(--panel) 72%, transparent);
}
.ifz-pres-l:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ── à gauche : le catalogue qui tourne ── */
.ifz-vign{
  position:relative;justify-self:center;display:block;
  width:4.15rem;height:1.72rem;
}
.ifz-v{
  position:absolute;top:0;left:50%;width:1.72rem;height:1.72rem;border-radius:.46rem;
  opacity:0;pointer-events:none;
  box-shadow:0 3px 7px -2px rgba(20,30,55,.30);
}
/* Le carrousel est PILOTÉ PAR LE NAVIGATEUR : une seule animation, la
   même pour les sept cartes, décalée dans le temps par un retard
   négatif. Aucun minuteur, donc aucune dérive et aucune
   désynchronisation possible ; le fil d'exécution reste libre. */
@keyframes ifz-tour{
  0.0000%{transform:translate(-50%,.14rem) translateX(2.35rem) rotate(14deg) scale(.66);opacity:0;z-index:0;filter:saturate(.6)}
  9.2857%{transform:translate(-50%,.14rem) translateX(2.35rem) rotate(14deg) scale(.66);opacity:0;z-index:0;filter:saturate(.6)}
  14.2857%{transform:translate(-50%,.08rem) translateX(1.16rem) rotate(8deg) scale(.86);opacity:0.5;z-index:2;filter:saturate(.7)}
  23.5714%{transform:translate(-50%,.08rem) translateX(1.16rem) rotate(8deg) scale(.86);opacity:0.5;z-index:2;filter:saturate(.7)}
  28.5714%{transform:translate(-50%,-.06rem) rotate(-1.5deg) scale(1);opacity:1;z-index:3;filter:saturate(1)}
  37.8571%{transform:translate(-50%,-.06rem) rotate(-1.5deg) scale(1);opacity:1;z-index:3;filter:saturate(1)}
  42.8571%{transform:translate(-50%,.08rem) translateX(-1.16rem) rotate(-8deg) scale(.86);opacity:0.5;z-index:2;filter:saturate(.7)}
  52.1429%{transform:translate(-50%,.08rem) translateX(-1.16rem) rotate(-8deg) scale(.86);opacity:0.5;z-index:2;filter:saturate(.7)}
  57.1429%{transform:translate(-50%,.14rem) translateX(-2.35rem) rotate(-14deg) scale(.66);opacity:0;z-index:1;filter:saturate(.6)}
  66.4286%{transform:translate(-50%,.14rem) translateX(-2.35rem) rotate(-14deg) scale(.66);opacity:0;z-index:1;filter:saturate(.6)}
  71.4286%{transform:translate(-50%,.14rem) translateX(-2.35rem) rotate(-14deg) scale(.66);opacity:0;z-index:0;filter:saturate(.6)}
  80.7143%{transform:translate(-50%,.14rem) translateX(-2.35rem) rotate(-14deg) scale(.66);opacity:0;z-index:0;filter:saturate(.6)}
  85.7143%{transform:translate(-50%,.14rem) translateX(2.35rem) rotate(14deg) scale(.66);opacity:0;z-index:0;filter:saturate(.6)}
  95.0000%{transform:translate(-50%,.14rem) translateX(2.35rem) rotate(14deg) scale(.66);opacity:0;z-index:0;filter:saturate(.6)}
  100%{transform:translate(-50%,.14rem) translateX(2.35rem) rotate(14deg) scale(.66);opacity:0;z-index:0;filter:saturate(.6)}
}
.ifz-v{animation:ifz-tour 19.6s cubic-bezier(.3,.72,.28,1) infinite}
.ifz-v:nth-child(1){animation-delay:-5.6s}
.ifz-v:nth-child(2){animation-delay:-2.8s}
.ifz-v:nth-child(3){animation-delay:-0.0s}
.ifz-v:nth-child(4){animation-delay:-16.8s}
.ifz-v:nth-child(5){animation-delay:-14.0s}
.ifz-v:nth-child(6){animation-delay:-11.2s}
.ifz-v:nth-child(7){animation-delay:-8.4s}

/* ── au centre : le nom seul, en lévitation ── */
.ifz-nom{display:flex;justify-content:center;min-width:0}
.ifz-nom-t{
  /* Centré dans la barre, et rien d'autre : la lévitation vient de l'ombre
     colorée et du halo, jamais d'un décalage vers le haut — un décalage se
     lit comme un objet mal posé. */
  position:relative;display:flex;align-items:center;justify-content:center;
  padding:.2rem .85rem;min-height:1.68rem;
  font-family:"Bricolage Grotesque",Manrope,system-ui,sans-serif;
  font-size:1.06rem;font-weight:800;letter-spacing:-.014em;line-height:1;
  border-radius:.68rem;
  background:
    linear-gradient(150deg in oklab,
      color-mix(in oklab, var(--accent) 9%, transparent),
      color-mix(in oklab, var(--panel) 45%, transparent) 58%);
  border:1px solid color-mix(in oklab, var(--accent) 13%, transparent);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  /* la lévitation vient d'une ombre COLORÉE et longue, pas d'un biseau */
  box-shadow:
    0 12px 26px -14px color-mix(in oklab, var(--accent) 70%, transparent),
    0 3px 9px -6px rgba(20,30,55,.28);
  background-clip:padding-box;
  transform-origin:center;
  transition:transform .34s cubic-bezier(.2,.7,.3,1), box-shadow .34s ease,
             border-color .34s ease;
}
/* le lettrage a de la matière : l'encre du titrage s'éclaircit vers le bas
   et prend une pointe d'accent — un métal gravé, pas une encre plate */
.ifz-nom-i{
  display:inline-block;
  background-image:linear-gradient(168deg in oklab,
    var(--h1) 8%,
    color-mix(in oklab, var(--h1) 78%, var(--accent)) 62%,
    color-mix(in oklab, var(--h1) 62%, var(--accent)) 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
/* le halo qui respire sous le nom : la source de lumière */
.ifz-nom-t::before{
  content:"";position:absolute;left:12%;right:12%;bottom:-.55rem;height:.9rem;
  border-radius:50%;pointer-events:none;z-index:-1;
  background:radial-gradient(ellipse at center in oklab,
    color-mix(in oklab, var(--accent) 46%, transparent), transparent 72%);
  filter:blur(5px);opacity:.55;
  animation:ifz-souffle 5.5s ease-in-out infinite;
}
/* L'ANNEAU DE LUMIÈRE : un dégradé conique dont l'angle tourne, découpé
   pour ne peindre QUE le liseré — la lumière parcourt le contour comme un
   reflet sur un boîtier qu'on incline. */
.ifz-nom-t::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  padding:1px;
  background:conic-gradient(from var(--ifz-a) in oklab,
    transparent 0deg,
    color-mix(in oklab, var(--accent) 68%, transparent) 32deg,
    color-mix(in oklab, #fff 60%, var(--accent)) 52deg,
    color-mix(in oklab, var(--accent) 55%, transparent) 74deg,
    transparent 120deg, transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
  opacity:.85;
  animation:ifz-anneau 6.5s linear infinite;
}
/* Au survol le nom ne se relève pas : il INSPIRE. Une prise d'ampleur,
   puis une respiration qui ne s'arrête plus tant que la souris est là —
   le bouton attend son clic. */
.ifz-pres-l:hover .ifz-nom-t,
.ifz-pres-l:focus-visible .ifz-nom-t{
  border-color:color-mix(in oklab, var(--accent) 30%, transparent);
  box-shadow:
    0 16px 30px -15px color-mix(in oklab, var(--accent) 80%, transparent),
    0 4px 11px -6px rgba(20,30,55,.28);
  animation:ifz-attente 1.9s ease-in-out infinite;
}
.ifz-pres-l:hover .ifz-nom-t::before,
.ifz-pres-l:focus-visible .ifz-nom-t::before{opacity:.85}
/* la lumière accélère quand on approche : le bouton s'anime d'impatience */
.ifz-pres-l:hover .ifz-nom-t::after,
.ifz-pres-l:focus-visible .ifz-nom-t::after{animation-duration:2.6s;opacity:1}

/* ── à droite : l'invitation, fine ── */
.ifz-cta{
  justify-self:center;
  display:inline-flex;align-items:center;gap:.3rem;white-space:nowrap;
  padding:.2rem .62rem .22rem .7rem;border-radius:999px;
  border:1px solid color-mix(in oklab, var(--accent) 26%, var(--hair));
  color:var(--accent);font-size:.72rem;font-weight:700;letter-spacing:.012em;
  transition:background-color .3s ease, border-color .3s ease;
}
.ifz-cta svg{
  width:.78rem;height:.78rem;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .3s ease;
}
.ifz-pres-l:hover .ifz-cta{
  background:color-mix(in oklab, var(--accent) 10%, transparent);
  border-color:color-mix(in oklab, var(--accent) 50%, var(--hair));
}
.ifz-pres-l:hover .ifz-cta svg{transform:translateX(2px)}

@keyframes ifz-anneau{to{--ifz-a:360deg}}
@keyframes ifz-attente{
  0%,100%{transform:scale(1.045)}
  50%{transform:scale(1.085)}
}
@keyframes ifz-souffle{
  0%,100%{opacity:.42;transform:scaleX(.92)}
  50%{opacity:.72;transform:scaleX(1.06)}
}

@media(max-width:420px){
  .ifz-pres-l{max-width:none;gap:.4rem;padding:.32rem .42rem}
  .ifz-vign{width:3.7rem;height:1.55rem}
  .ifz-v{width:1.55rem;height:1.55rem}
  .ifz-nom-t{font-size:.98rem;padding:.14rem .7rem}
  .ifz-cta{font-size:.68rem;padding:.18rem .52rem .2rem .6rem}
}
/* rien ne tourne hors écran : le JS retire data-visible */
.ifz-pres:not([data-visible]) .ifz-v,
.ifz-pres:not([data-visible]) .ifz-nom-t::before,
.ifz-pres:not([data-visible]) .ifz-nom-t::after{animation-play-state:paused}
@media (prefers-reduced-motion: reduce){
  .ifz-v,.ifz-nom-t::before,.ifz-nom-t::after{animation:none}
  /* sans mouvement, le jeu s'arrête étalé : trois cartes lisibles */
  .ifz-v{opacity:0}
  .ifz-v:nth-child(1){opacity:1;z-index:3;transform:translate(-50%,-.06rem) rotate(-1.5deg)}
  .ifz-v:nth-child(2){opacity:.5;z-index:2;transform:translate(-50%,.08rem) translateX(1.16rem) rotate(8deg) scale(.86)}
  .ifz-v:nth-child(7){opacity:.5;z-index:2;transform:translate(-50%,.08rem) translateX(-1.16rem) rotate(-8deg) scale(.86)}
  .ifz-pres-l,.ifz-nom-t,.ifz-cta,.ifz-cta svg{transition:none}
  .ifz-pres-l:hover .ifz-nom-t,
  .ifz-pres-l:focus-visible .ifz-nom-t{animation:none;transform:scale(1.045)}
}