/* Reflet d'anglage — signature visuelle légère, sans média ajouté.
   Objectif : évoquer un reflet sur chanfrein poli, sans effet néon ni surcharge. */
.reflet-anglage{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  --reflet-x:-24%;
  --reflet-start:-28;
  --reflet-range:52;
  --reflet-angle:-10deg;
  --reflet-halo-x:76%;
  --reflet-halo-y:16%;
  --reflet-halo-size-x:720px;
  --reflet-halo-size-y:360px;
  --reflet-halo-opacity:.44;
  --reflet-sweep-opacity:.46;
  --reflet-edge-opacity:.36;
  --reflet-edge-top:18%;
  --reflet-edge-left:7%;
  --reflet-edge-right:9%;
  --reflet-edge-rotate:-2.5deg;
  --reflet-warm:rgba(255,241,205,.30);
  --reflet-warm-soft:rgba(255,241,205,.10);
  --reflet-steel:rgba(176,214,226,.16);
  --reflet-rose:rgba(214,168,154,.10);
  --reflet-line:rgba(255,244,218,.52);
  --reflet-line-cool:rgba(170,210,224,.22);
}

.reflet-anglage > .reflet-layer{
  position:absolute;
  display:block;
  pointer-events:none;
  z-index:1;
  user-select:none;
  contain:layout paint;
}

.reflet-anglage > .reflet-layer--halo{
  width:min(78vw, var(--reflet-halo-size-x));
  height:min(46vw, var(--reflet-halo-size-y));
  left:calc(var(--reflet-halo-x) - 38vw);
  top:calc(var(--reflet-halo-y) - 20vw);
  border-radius:999px;
  background:
    radial-gradient(ellipse at 50% 50%,
      var(--reflet-warm) 0%,
      var(--reflet-warm-soft) 30%,
      rgba(255,255,255,.025) 48%,
      rgba(255,255,255,0) 70%);
  filter:blur(10px);
  mix-blend-mode:screen;
  opacity:var(--reflet-halo-opacity);
  transform:translate3d(var(--reflet-halo-shift, 0%), 0, 0) rotate(var(--reflet-angle));
}

.reflet-anglage > .reflet-layer--sweep{
  inset:-44% -82%;
  background:
    linear-gradient(118deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0) 43%,
      rgba(255,248,226,.030) 46.4%,
      var(--reflet-warm) 48.6%,
      var(--reflet-steel) 49.7%,
      rgba(255,255,255,.055) 51.3%,
      rgba(255,255,255,0) 56%,
      rgba(255,255,255,0) 100%);
  filter:blur(.55px);
  mix-blend-mode:screen;
  opacity:var(--reflet-sweep-opacity);
  transform:translate3d(var(--reflet-x), 0, 0) rotate(var(--reflet-angle));
  transform-origin:center;
}

.reflet-anglage > .reflet-layer--edge{
  left:var(--reflet-edge-left);
  right:var(--reflet-edge-right);
  top:var(--reflet-edge-top);
  height:1px;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,0),
      var(--reflet-line) 42%,
      var(--reflet-line-cool) 56%,
      rgba(255,255,255,0));
  box-shadow:0 0 18px rgba(255,236,200,.16);
  opacity:var(--reflet-edge-opacity);
  transform:translate3d(0, var(--reflet-edge-y, 0px), 0) rotate(var(--reflet-edge-rotate));
  transform-origin:center;
  mix-blend-mode:screen;
}

/* Le contenu reste au-dessus du reflet, sans toucher aux arrière-plans existants. */
.reflet-anglage > :where(.container, .hero__shell, .page-hero__grid, .page-hero__shell, .formations-hero__shell, .breadcrumbs, .breadcrumb){
  position:relative;
  z-index:2;
}

/* Variations par famille de page : même geste visuel, température et emplacement adaptés. */
.reflet-accueil{
  --reflet-start:-34;
  --reflet-range:64;
  --reflet-angle:-9deg;
  --reflet-halo-x:78%;
  --reflet-halo-y:18%;
  --reflet-halo-size-x:880px;
  --reflet-halo-size-y:440px;
  --reflet-halo-opacity:.52;
  --reflet-sweep-opacity:.52;
  --reflet-edge-opacity:.42;
  --reflet-edge-top:24%;
  --reflet-edge-left:9%;
  --reflet-edge-right:12%;
  --reflet-edge-rotate:-2.2deg;
  --reflet-warm:rgba(255,238,198,.34);
  --reflet-steel:rgba(180,218,229,.18);
  --reflet-line:rgba(255,244,218,.60);
}

.reflet-formations{
  --reflet-start:-30;
  --reflet-range:55;
  --reflet-angle:-12deg;
  --reflet-halo-x:84%;
  --reflet-halo-y:12%;
  --reflet-halo-opacity:.40;
  --reflet-sweep-opacity:.42;
  --reflet-edge-opacity:.34;
  --reflet-edge-top:15%;
  --reflet-edge-left:5%;
  --reflet-edge-right:18%;
  --reflet-edge-rotate:-3.2deg;
  --reflet-warm:rgba(248,224,178,.24);
  --reflet-steel:rgba(188,222,232,.18);
}

.reflet-apropos,
.reflet-regard{
  --reflet-start:-24;
  --reflet-range:42;
  --reflet-angle:-7deg;
  --reflet-halo-x:24%;
  --reflet-halo-y:20%;
  --reflet-halo-opacity:.39;
  --reflet-sweep-opacity:.34;
  --reflet-edge-opacity:.30;
  --reflet-edge-top:20%;
  --reflet-edge-left:18%;
  --reflet-edge-right:8%;
  --reflet-edge-rotate:1.8deg;
  --reflet-warm:rgba(255,232,202,.22);
  --reflet-rose:rgba(214,168,154,.15);
  --reflet-steel:rgba(170,205,220,.10);
}

.reflet-entreprises{
  --reflet-start:-36;
  --reflet-range:50;
  --reflet-angle:-14deg;
  --reflet-halo-x:86%;
  --reflet-halo-y:10%;
  --reflet-halo-opacity:.34;
  --reflet-sweep-opacity:.38;
  --reflet-edge-opacity:.38;
  --reflet-edge-top:13%;
  --reflet-edge-left:6%;
  --reflet-edge-right:6%;
  --reflet-edge-rotate:-1.2deg;
  --reflet-warm:rgba(230,214,184,.17);
  --reflet-steel:rgba(166,215,232,.25);
  --reflet-line:rgba(220,238,244,.48);
  --reflet-line-cool:rgba(156,213,231,.34);
}

.reflet-temoignages{
  --reflet-start:-22;
  --reflet-range:34;
  --reflet-angle:-8deg;
  --reflet-halo-x:72%;
  --reflet-halo-y:18%;
  --reflet-halo-opacity:.30;
  --reflet-sweep-opacity:.26;
  --reflet-edge-opacity:.24;
  --reflet-edge-top:28%;
  --reflet-edge-left:13%;
  --reflet-edge-right:18%;
  --reflet-edge-rotate:-2deg;
  --reflet-warm:rgba(255,233,196,.20);
  --reflet-steel:rgba(178,212,224,.09);
}

.reflet-reservations{
  --reflet-start:-18;
  --reflet-range:30;
  --reflet-angle:-6deg;
  --reflet-halo-x:80%;
  --reflet-halo-y:16%;
  --reflet-halo-opacity:.24;
  --reflet-sweep-opacity:.22;
  --reflet-edge-opacity:.18;
  --reflet-edge-top:16%;
  --reflet-edge-left:20%;
  --reflet-edge-right:20%;
  --reflet-edge-rotate:-1deg;
  --reflet-warm:rgba(255,240,210,.16);
  --reflet-steel:rgba(178,212,224,.08);
}

.reflet-bewatchmaker{
  --reflet-start:-38;
  --reflet-range:60;
  --reflet-angle:-15deg;
  --reflet-halo-x:72%;
  --reflet-halo-y:10%;
  --reflet-halo-opacity:.36;
  --reflet-sweep-opacity:.40;
  --reflet-edge-opacity:.40;
  --reflet-edge-top:18%;
  --reflet-edge-left:10%;
  --reflet-edge-right:8%;
  --reflet-edge-rotate:-4deg;
  --reflet-warm:rgba(230,218,192,.18);
  --reflet-steel:rgba(168,224,235,.24);
  --reflet-line:rgba(230,246,248,.48);
  --reflet-line-cool:rgba(151,219,236,.34);
}

.reflet-carnet,
.reflet-article,
.reflet-medias,
.reflet-actualites{
  --reflet-start:-24;
  --reflet-range:38;
  --reflet-angle:-9deg;
  --reflet-halo-x:74%;
  --reflet-halo-y:14%;
  --reflet-halo-opacity:.30;
  --reflet-sweep-opacity:.28;
  --reflet-edge-opacity:.26;
  --reflet-edge-top:17%;
  --reflet-edge-left:9%;
  --reflet-edge-right:14%;
  --reflet-edge-rotate:-2.8deg;
  --reflet-warm:rgba(255,236,202,.19);
  --reflet-steel:rgba(178,213,224,.12);
}

.reflet-medias{
  --reflet-halo-x:28%;
  --reflet-halo-y:18%;
  --reflet-edge-top:23%;
  --reflet-edge-rotate:1.2deg;
}

.reflet-actualites{
  --reflet-halo-x:82%;
  --reflet-halo-y:24%;
  --reflet-edge-top:26%;
  --reflet-edge-rotate:-1.6deg;
  --reflet-warm:rgba(255,226,188,.18);
}

.reflet-legal{
  --reflet-start:-16;
  --reflet-range:22;
  --reflet-angle:-6deg;
  --reflet-halo-opacity:.16;
  --reflet-sweep-opacity:.14;
  --reflet-edge-opacity:.12;
  --reflet-edge-top:18%;
}

@media (max-width: 760px){
  .reflet-anglage{
    --reflet-halo-size-x:620px;
    --reflet-halo-size-y:340px;
    --reflet-edge-left:8%;
    --reflet-edge-right:8%;
  }
  .reflet-anglage > .reflet-layer--sweep{
    inset:-42% -128%;
    filter:blur(.85px);
  }
  .reflet-anglage > .reflet-layer--edge{
    opacity:var(--reflet-edge-opacity);
  }
}

@media (prefers-reduced-motion: reduce){
  .reflet-anglage{
    --reflet-x:-10%;
  }
  .reflet-anglage > .reflet-layer--sweep,
  .reflet-anglage > .reflet-layer--halo,
  .reflet-anglage > .reflet-layer--edge{
    transition:none !important;
  }
}

/* Finition 10 mai 2026 — robustesse discrète : les contenus restent lisibles si le JS ou l'observer ne se lance pas. */
html.no-js .reveal,
html.no-js [data-reveal]{
  opacity:1 !important;
  transform:none !important;
}

/* Reflet d'anglage : signature visible, mais plus calme sur mobile. */
@media (max-width:760px){
  .reflet-anglage{
    --reflet-halo-opacity:.22;
    --reflet-sweep-opacity:.18;
    --reflet-edge-opacity:.14;
  }
  .reflet-accueil{
    --reflet-halo-opacity:.30;
    --reflet-sweep-opacity:.24;
    --reflet-edge-opacity:.18;
  }
}

@supports not (mix-blend-mode:screen){
  .reflet-anglage .reflet-layer{ opacity:.16; }
}