/* Rotter'Dev — passage vitrine <-> espace client (2026-11-08, v4 « un seul mouvement », retour Matys).
   Au clic, le R apparaît au centre par-dessus la page. Une seule lame dorée balaie l'écran de gauche à droite :
   derrière elle, le fond devient noir ET le R + son texte changent de couleur, au même instant.
   Sur la page d'arrivée, le même mouvement continue vers la droite et dévoile la page. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; }

.rd-rideau { position: fixed; inset: 0; z-index: 9999; pointer-events: none; visibility: hidden; }
.rd-couche { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; }
/* Couche « avant » : la page de départ s'assombrit à peine, le R de départ apparaît */
.rd-avant { background: rgba(8,8,9,.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.rd-vers-espace .rd-avant { background: radial-gradient(32% 45% at 14% 55%, rgba(255,46,190,.11), transparent 70%), rgba(8,8,9,.55); }
/* Couche « après » : le noir, révélé par la lame */
.rd-apres { background: radial-gradient(60% 70% at 50% 50%, #1D1D21 0%, #0D0D0F 60%, #060607 100%); clip-path: inset(0 100% 0 0); }
.rd-apres::before { content: ""; position: absolute; inset: 0; opacity: .08; mix-blend-mode: overlay; background: url("../img/matiere-alu.webp") center / cover; }
.rd-vers-vitrine .rd-apres::after { content: ""; position: absolute; inset: 0; background: radial-gradient(32% 45% at 14% 55%, rgba(255,46,190,.11), transparent 70%); }
/* La lame dorée */
.rd-front { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; translate: -50% 0; opacity: 0;
  background: linear-gradient(180deg, transparent, #E9D3A6 20%, #FFF4DC 50%, #E9D3A6 80%, transparent);
  box-shadow: 0 0 18px 2px rgba(233,211,166,.75), 0 0 70px 12px rgba(201,168,106,.35); }

/* Le R et son texte (sans fond ni cercle), au même endroit dans les deux couches */
.rd-face { position: relative; display: grid; justify-items: center; gap: 26px; }
.rd-face img { width: 150px; height: 150px; object-fit: contain; }
.rd-mot { margin: 0; padding-left: .5em; font: 500 .8125rem var(--f-titre, sans-serif); letter-spacing: .5em; text-transform: uppercase; white-space: nowrap; }
.rd-ton-rose .rd-mot { color: #FFB3E6; } .rd-ton-rose .rd-mot b { font-weight: 500; color: #FF2EBE; }
.rd-ton-blanc .rd-mot { color: #F5F5F7; } .rd-ton-blanc .rd-mot b { font-weight: 500; color: #E9D3A6; }

/* Départ : un seul balayage */
.rd-rideau.rd-couvre { visibility: visible; }
.rd-rideau.rd-couvre .rd-avant { animation: rd-voile .28s ease-out both; }
.rd-rideau.rd-couvre .rd-avant .rd-face { animation: rd-face-in .32s cubic-bezier(.2,.8,.2,1) both; }
.rd-rideau.rd-couvre .rd-apres { animation: rd-entre var(--rd-duree, .9s) .12s cubic-bezier(.65,0,.35,1) both; }
.rd-rideau.rd-couvre .rd-front { animation: rd-lame var(--rd-duree, .9s) .12s cubic-bezier(.65,0,.35,1) both; }
/* Arrivée : la suite du même mouvement */
.rd-rideau.rd-plein { visibility: visible; }
.rd-rideau.rd-plein .rd-apres, .rd-rideau.rd-leve .rd-apres { clip-path: inset(0 0 0 0); }
.rd-rideau.rd-plein .rd-avant, .rd-rideau.rd-leve .rd-avant { display: none; }
.rd-rideau.rd-leve { visibility: visible; }
.rd-rideau.rd-leve .rd-apres { animation: rd-sort .75s cubic-bezier(.65,0,.35,1) both; }
.rd-rideau.rd-leve .rd-front { animation: rd-lame .75s cubic-bezier(.65,0,.35,1) both; }

@keyframes rd-voile { from { opacity: 0; } to { opacity: 1; } }
@keyframes rd-face-in { from { opacity: 0; transform: scale(.94); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes rd-entre { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes rd-sort { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 0 100%); } }
@keyframes rd-lame { 0% { left: 0; opacity: 0; } 6% { opacity: 1; } 94% { opacity: 1; } 100% { left: 100%; opacity: 0; } }

/* Pendant le chargement de la page d'arrivée */
html.rd-attente::before { content: ""; position: fixed; inset: 0; z-index: 9998; background: #0D0D0F; }

@media (prefers-reduced-motion: reduce) { .rd-rideau, .rd-rideau * { animation: none !important; } }

/* =========================================================================
   v5 « UN SEUL MOUVEMENT » (navigateurs avec View Transitions : Chrome, Edge, Safari 18.2+)
   La nouvelle page est dévoilée de gauche à droite PAR-DESSUS l'ancienne, sous la lame dorée.
   Ancienne page : R de départ au centre. Nouvelle page : R d'arrivée au même endroit.
   => la page, le fond, le R et le texte changent ensemble, en un seul passage.
   ========================================================================= */
.rd-pose { position: fixed; inset: 0; z-index: 9999; pointer-events: none; display: grid; place-items: center;
  background: rgba(8,8,9,.5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; }
.rd-pose.rd-pret { animation: rd-voile .24s ease-out both; }
.rd-pose.rd-pret .rd-face { animation: rd-face-in .28s cubic-bezier(.2,.8,.2,1) both; }
.rd-pose.rd-vers-espace { background: radial-gradient(32% 45% at 14% 55%, rgba(255,46,190,.11), transparent 70%), rgba(8,8,9,.5); }

html.rd-vt::view-transition-old(root) { animation: none; }
html.rd-vt::view-transition-new(root) { animation: rd-entre 1s cubic-bezier(.65,0,.35,1) both; }
html.rd-vt::view-transition { background: linear-gradient(90deg, transparent 0 calc(50% - 1px), #FFF4DC calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)) no-repeat,
  linear-gradient(90deg, transparent 0 30%, rgba(233,211,166,.35) 50%, transparent 70%) no-repeat;
  background-size: 4px 100%, 140px 100%; animation: rd-lame-vt 1s cubic-bezier(.65,0,.35,1) both; }
@keyframes rd-lame-vt { from { background-position: -4px 0, -140px 0; } to { background-position: calc(100% + 4px) 0, calc(100% + 140px) 0; } }
/* sur la page d'arrivée, le même R au même endroit, qui s'efface ensuite en douceur */
html.rd-vt-arrive::after { content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  background: url("../img/logo-r-blanc.webp") center calc(50% - 20px) / 150px 150px no-repeat, rgba(8,8,9,.5);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: opacity .45s ease; }
html.rd-vt-arrive.rd-vt-vitrine::after { background: url("../img/logo-r-rose.webp") center calc(50% - 20px) / 150px 150px no-repeat, rgba(8,8,9,.5); }
html.rd-vt-arrive::before { content: "Espace client"; position: fixed; left: 50%; top: calc(50% + 81px); translate: -50% -50%; z-index: 10000; pointer-events: none;
  padding-left: .5em; font: 500 .8125rem var(--f-titre, sans-serif); letter-spacing: .5em; text-transform: uppercase; white-space: nowrap; color: transparent; background: linear-gradient(90deg, #F5F5F7 0 52%, #E9D3A6 52%); -webkit-background-clip: text; background-clip: text; transition: opacity .45s ease; }
html.rd-vt-arrive.rd-vt-vitrine::before { content: "Rotter’Dev"; background: linear-gradient(90deg, #FFB3E6 0 62%, #FF2EBE 62%); -webkit-background-clip: text; background-clip: text; }
html.rd-vt-fin::after, html.rd-vt-fin::before { opacity: 0; }