/* Palette d'effets Everywhere (03/10) — écrits chez nous, inspirés des références de Flavien (Originkit, 60fps,
   motionsites). Chaque effet s'active par un attribut, se règle par --effet (couleur d'accent du site), et disparaît
   en mouvement réduit ou sans pointeur fin. Aucun ne porte d'information : ils accompagnent le contenu. */
:root{--effet:#f0532a;--effet-fond:rgba(255,255,255,.04)}

/* 1. Projecteur : une lueur suit le pointeur sur chaque carte, et son bord s'allume là où passe la souris. */
[data-projecteur]>*{position:relative;isolation:isolate}
[data-projecteur]>*::before,[data-projecteur]>*::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s ease}
[data-projecteur]>*::before{z-index:-1;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--effet) 16%,transparent),transparent 60%)}
[data-projecteur]>*::after{padding:1.5px;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),var(--effet),transparent 70%);-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 exclude,linear-gradient(#000 0 0)}
[data-projecteur]:hover>*::before,[data-projecteur]:hover>*::after{opacity:1}

/* 2. Titres qui montent : chaque mot sort d'une fente, l'un après l'autre, quand le titre arrive à l'écran. */
.ef-mot{display:inline-block;overflow:hidden;vertical-align:bottom;padding:.24em 0 .08em;margin:-.24em 0 -.08em}
.ef-mot>span{display:inline-block;transform:translateY(105%);transition:transform .8s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i,0) * 45ms)}
.ef-vu .ef-mot>span{transform:none}

/* 3. Chemin : un trait d'accent relie les étapes d'une liste au fil du défilement. */
[data-chemin]{position:relative}
[data-chemin]::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:color-mix(in srgb,currentColor 12%,transparent)}
[data-chemin]::after{content:"";position:absolute;left:0;top:0;height:2px;width:calc(var(--k,0) * 100%);background:var(--effet);box-shadow:0 0 12px var(--effet);transition:width .15s linear}

/* 4. Anneau de curseur : un cercle suit la souris avec un léger retard et grandit sur ce qui se clique. */
.ef-anneau{position:fixed;left:0;top:0;z-index:9999;width:34px;height:34px;margin:-17px 0 0 -17px;border:1.5px solid var(--effet);border-radius:50%;pointer-events:none;opacity:0;transition:width .25s,height .25s,margin .25s,opacity .3s,background-color .25s;will-change:transform}
.ef-anneau.ef-on{opacity:.9}
.ef-anneau.ef-lien{width:62px;height:62px;margin:-31px 0 0 -31px;background:color-mix(in srgb,var(--effet) 14%,transparent)}

/* 5. Aimant : les boutons principaux se penchent un peu vers la souris (aucun effet au clavier ni au doigt). */
[data-aimant]{transition:transform .35s cubic-bezier(.2,.8,.2,1)}

/* 2 bis. Surtitre décodé (le vrai texte reste en place, transparent, sous le calque de signes) et mot en couleur
   souligné d'un trait qui se tire quand le titre arrive. */
.ef-code{position:relative;color:transparent!important}
.ef-code-v{position:absolute;left:0;top:0;right:0;white-space:pre;color:var(--effet);overflow:hidden}
[data-titres] h2 em{background:linear-gradient(color-mix(in srgb,currentColor 55%,transparent),color-mix(in srgb,currentColor 55%,transparent)) 0 96%/0 .06em no-repeat;transition:background-size 1s cubic-bezier(.2,.8,.2,1) .45s}
[data-titres] h2.ef-vu em{background-size:100% .06em}

/* 6. Invitation à défiler : une bulle discrète en bas, au dessin de chaque maison. */
.ef-defiler{--df-fond:rgba(13,13,11,.84);--df-encre:#f3efe6;position:fixed;left:50%;bottom:clamp(14px,3vh,26px);z-index:60;display:flex;align-items:center;gap:10px;padding:8px 15px 8px 11px;border-radius:999px;background:var(--df-fond);color:var(--df-encre);font-family:inherit;font-size:13px;font-weight:600;line-height:1;letter-spacing:.03em;backdrop-filter:blur(8px);box-shadow:0 12px 28px -14px rgba(0,0,0,.55),inset 0 0 0 1px color-mix(in srgb,var(--effet) 35%,transparent);opacity:0;transform:translate(-50%,10px);transition:opacity .6s,transform .6s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.ef-defiler.ef-on{opacity:1;transform:translate(-50%,0)}
.ef-df-ico{position:relative;display:block;width:14px;height:20px;flex:none}
.ef-df-ico i{position:absolute;display:block}
/* Everywhere : une souris, sa molette descend. */
.ef-defiler[data-maison="everywhere"] .ef-df-ico{border:1.5px solid currentColor;border-radius:8px}
.ef-defiler[data-maison="everywhere"] .ef-df-ico i{left:50%;top:4px;width:3px;height:5px;margin-left:-1.5px;border-radius:2px;background:var(--effet)}
.ef-defiler[data-maison="everywhere"] .ef-df-ico i+i{display:none}
.ef-defiler[data-maison="everywhere"].ef-on .ef-df-ico i:first-child{animation:ef-df-molette 1.4s ease-in-out 3}
@keyframes ef-df-molette{0%{transform:none;opacity:1}70%{transform:translateY(7px);opacity:0}71%{transform:none;opacity:0}100%{opacity:1}}
/* Rampe : une fiole de niveau ; la bulle glisse vers le bas, comme la page. */
.ef-defiler[data-maison="rampe"] .ef-df-ico{width:10px;margin-inline:2px;border:1.5px solid currentColor;border-radius:6px;background:color-mix(in srgb,var(--effet) 18%,transparent)}
.ef-defiler[data-maison="rampe"] .ef-df-ico::before,.ef-defiler[data-maison="rampe"] .ef-df-ico::after{content:"";position:absolute;left:-4px;right:-4px;height:1px;background:currentColor;opacity:.6}
.ef-defiler[data-maison="rampe"] .ef-df-ico::before{top:6px}.ef-defiler[data-maison="rampe"] .ef-df-ico::after{bottom:6px}
.ef-defiler[data-maison="rampe"] .ef-df-ico i{left:1px;top:2px;width:5px;height:5px;border-radius:50%;background:var(--effet);box-shadow:0 0 6px var(--effet)}
.ef-defiler[data-maison="rampe"] .ef-df-ico i+i{display:none}
.ef-defiler[data-maison="rampe"].ef-on .ef-df-ico i:first-child{animation:ef-df-bulle 1.6s cubic-bezier(.45,0,.3,1) 3}
@keyframes ef-df-bulle{0%,15%{transform:none}60%,80%{transform:translateY(9px)}100%{transform:none}}
/* Digital : trois feuilles passent sur le tapis, l'une après l'autre. */
.ef-defiler[data-maison="digital"] .ef-df-ico{width:16px;overflow:hidden;border-bottom:1.5px solid currentColor}
.ef-defiler[data-maison="digital"] .ef-df-ico i{left:2px;right:2px;height:3px;top:-4px;border-radius:1px;background:var(--effet)}
.ef-defiler[data-maison="digital"].ef-on .ef-df-ico i{animation:ef-df-feuille 1.5s linear 3}
.ef-defiler[data-maison="digital"].ef-on .ef-df-ico i:nth-child(2){animation-delay:.5s}
.ef-defiler[data-maison="digital"].ef-on .ef-df-ico i:nth-child(3){animation-delay:1s}
@keyframes ef-df-feuille{0%{transform:none;opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translateY(22px);opacity:0}}
/* Palier : trois marches qui s'allument en descendant. */
.ef-defiler[data-maison="palier"]{--df-fond:rgba(255,255,255,.9);--df-encre:#1d1a2e}
.ef-defiler[data-maison="palier"] .ef-df-ico{width:18px}
.ef-defiler[data-maison="palier"] .ef-df-ico i{width:7px;height:5px;border-radius:1.5px;background:color-mix(in srgb,currentColor 25%,transparent)}
.ef-defiler[data-maison="palier"] .ef-df-ico i:nth-child(1){left:0;top:2px}
.ef-defiler[data-maison="palier"] .ef-df-ico i:nth-child(2){left:5px;top:8px}
.ef-defiler[data-maison="palier"] .ef-df-ico i:nth-child(3){left:10px;top:14px}
.ef-defiler[data-maison="palier"].ef-on .ef-df-ico i{animation:ef-df-marche 1.5s steps(1) 3}
.ef-defiler[data-maison="palier"].ef-on .ef-df-ico i:nth-child(2){animation-delay:.3s}
.ef-defiler[data-maison="palier"].ef-on .ef-df-ico i:nth-child(3){animation-delay:.6s}
@keyframes ef-df-marche{0%{background:var(--effet)}40%,100%{background:color-mix(in srgb,currentColor 25%,transparent)}}
.ef-defiler.ef-fixe .ef-df-ico i{animation:none!important}

/* 7. La lettre qui s'allume avec la demande : éteinte au départ, sa lumière suit le remplissage du formulaire. */
.lf{position:relative;width:min(100%,340px);aspect-ratio:1;margin-top:clamp(22px,4vh,40px);border-radius:20px;overflow:hidden;background:#0b0b0a;box-shadow:0 30px 60px -30px rgba(0,0,0,.7)}
.lf video{display:block;width:100%;height:100%;object-fit:cover}
.lf::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--effet) calc(var(--lf,0) * 70%),transparent);transition:box-shadow .3s}
.lf.lf-pret{box-shadow:0 0 0 2px var(--effet),0 0 70px -12px var(--effet),0 30px 60px -30px rgba(0,0,0,.7)}
@media(max-width:980px){.lf{width:min(100%,220px)}}
@media(max-width:600px){.lf{width:min(100%,140px);border-radius:14px}}
@media(max-height:500px){.lf{display:none}} /* zoom fort : le formulaire d'abord */

@media(prefers-reduced-motion:reduce){
  .ef-defiler{transition:none}.ef-defiler .ef-df-ico i{animation:none!important}
  .ef-mot>span{transform:none;transition:none}
  [data-chemin]::after{width:100%;transition:none}
  .ef-anneau{display:none}
  [data-aimant]{transform:none!important;transition:none}
}
@media print{.ef-mot>span{transform:none!important}.ef-defiler,.ef-anneau{display:none!important}}
@media(pointer:coarse){.ef-anneau{display:none}[data-projecteur]>*::before,[data-projecteur]>*::after{display:none}}
@media(forced-colors:active){.ef-defiler{border:1px solid CanvasText}.ef-code-v{color:CanvasText}.ef-anneau,[data-projecteur]>*::before,[data-projecteur]>*::after,[data-chemin]::after{display:none}}