/* ouverture.css : l'ouverture des accueils d'obreon.be, direction « Galerie », geste de l'ancienne intro.
   Des points d'encre arrivent de l'exterieur et dessinent le logo en pointille ; l'anneau se trace a travers eux depuis
   midi, les lettres se remplissent, le point vert prend sa taille, puis le logo se pose exactement sur celui de l'en-tete
   pendant que le blanc se leve. Encre #111110, un seul accent (#19B3A0), aucune lueur, aucun degrade.
   Sans la classe ov-joue sur <html> (posee par ouverture.js), rien ne s'affiche. Tout le mouvement est ici.
   Filet : meme si ouverture.js s'arrete en route, l'element ne capte plus le doigt a 1,74 s et devient invisible a 1,89 s.
   Les fins d'etat (ovSansClic, ovFin, ovFinPasse, ovLogoCache) ont la MEME valeur a 0 % et a 100 % : une animation terminee s'arrete
   a 0,9999999 de sa course (mesure du 12/10/2026, WebKit et Chromium), et visibility ne bascule qu'a 1 exactement. */
#obr-ouverture{display:none}
html.ov-joue #obr-ouverture{display:block;position:fixed;top:0;right:0;bottom:0;left:0;z-index:2147483600;overflow:hidden;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation;
  animation:ovSansClic 1ms linear 1740ms forwards,ovFin 1ms linear 1890ms forwards}
@keyframes ovSansClic{from,to{pointer-events:none}}
@keyframes ovFin{from,to{visibility:hidden;pointer-events:none}}
#obr-ouverture .ov-voile{position:absolute;top:0;right:0;bottom:0;left:0;background:#FFFFFF;
  animation:ovVoile 280ms cubic-bezier(.4,0,.2,1) 1600ms forwards}
@keyframes ovVoile{to{opacity:0}}
/* le cadre reprend la boite de .wrap (base.css : 1180 px au plus, centree), a la hauteur de l'ecran. Le logo y est
   centre, a sa taille d'ouverture, puis rejoint celui de l'en-tete par une transformation (deplacement + reduction) :
   ni decalage de mise en page (CLS 0), ni image agrandie (on part du grand pour aller au petit, toujours net).
   Arrivee : centre au bord du contenu + 57.2225 px (la moitie du logo de 114.445 x 24 px), au milieu de la barre
   (72 px de haut, 64 px a 900 px et moins). 50cqw / 50cqh : le centre du cadre, donc de l'ecran. */
#obr-ouverture .ov-cadre{position:absolute;top:0;bottom:0;left:0;right:0;max-width:1180px;margin:0 auto;container-type:size}
#obr-ouverture .ov-marque{position:absolute;display:block;overflow:visible;transform-origin:50% 50%;
  width:400px;height:83.8831px;left:calc(50% - 200px);top:calc(50% - 41.9416px);
  animation:ovQuai 400ms cubic-bezier(.65,0,.35,1) 1400ms forwards,ovRelais 90ms linear 1800ms forwards}
@keyframes ovQuai{to{transform:translate(calc(85.2225px - 50cqw),calc(36px - 50cqh)) scale(.2861125)}}
/* pose a 1,8 s, il passe la main au vrai logo (visible dessous des 1,8 s) en 90 ms : pas de saut, meme la ou le navigateur
   dessine un contour un rien autrement qu'un texte (Chrome : bords des lettres, mesure du 12/10/2026) */
@keyframes ovRelais{to{opacity:0}}
@media(max-width:900px){
  #obr-ouverture .ov-marque{width:300px;height:62.9123px;left:calc(50% - 150px);top:calc(50% - 31.4562px)}
  @keyframes ovQuai{to{transform:translate(calc(77.2225px - 50cqw),calc(32px - 50cqh)) scale(.3814833)}}
}
@media(max-width:359px){
  #obr-ouverture .ov-marque{width:260px;height:54.524px;left:calc(50% - 130px);top:calc(50% - 27.262px)}
  @keyframes ovQuai{to{transform:translate(calc(77.2225px - 50cqw),calc(32px - 50cqh)) scale(.4401731)}}
}
/* 1. les points arrivent (quatre distances, cinq departs) et se posent : le logo en pointille */
#obr-ouverture .ov-pts circle{fill:#111110;animation:ovPa 600ms cubic-bezier(.16,1,.3,1) both}
#obr-ouverture .ov-pts>g:nth-child(4n+2) circle{animation-name:ovPb}
#obr-ouverture .ov-pts>g:nth-child(4n+3) circle{animation-name:ovPc}
#obr-ouverture .ov-pts>g:nth-child(4n) circle{animation-name:ovPd}
#obr-ouverture .ov-pts>g:nth-child(5n+2) circle{animation-delay:35ms}
#obr-ouverture .ov-pts>g:nth-child(5n+3) circle{animation-delay:70ms}
#obr-ouverture .ov-pts>g:nth-child(5n+4) circle{animation-delay:105ms}
#obr-ouverture .ov-pts>g:nth-child(5n) circle{animation-delay:140ms}
@keyframes ovPa{0%{opacity:0;transform:translateX(70px)}40%{opacity:1}100%{opacity:1;transform:none}}
@keyframes ovPb{0%{opacity:0;transform:translateX(120px)}40%{opacity:1}100%{opacity:1;transform:none}}
@keyframes ovPc{0%{opacity:0;transform:translateX(180px)}40%{opacity:1}100%{opacity:1;transform:none}}
@keyframes ovPd{0%{opacity:0;transform:translateX(250px)}40%{opacity:1}100%{opacity:1;transform:none}}
/* 2. l'anneau se trace depuis midi, dans le sens des aiguilles ; les lettres se remplissent de gauche a droite */
#obr-ouverture .ov-anneau{fill:none;stroke:#111110;stroke-width:12;stroke-linecap:round;stroke-dasharray:252 252;stroke-dashoffset:252;
  animation:ovTrace 420ms cubic-bezier(.65,0,.35,1) 540ms forwards}
@keyframes ovTrace{to{stroke-dashoffset:0}}
#obr-ouverture .ov-mot path{fill:#111110;opacity:0;animation:ovPlein 260ms cubic-bezier(.4,0,.2,1) 580ms forwards}
#obr-ouverture .ov-mot path:nth-child(2){animation-delay:610ms}
#obr-ouverture .ov-mot path:nth-child(3){animation-delay:640ms}
#obr-ouverture .ov-mot path:nth-child(4){animation-delay:670ms}
#obr-ouverture .ov-mot path:nth-child(5){animation-delay:700ms}
#obr-ouverture .ov-mot path:nth-child(6){animation-delay:730ms}
@keyframes ovPlein{to{opacity:1}}
/* 3. le point vert arrive avec les autres, a leur taille, puis prend la sienne quand l'anneau se referme */
#obr-ouverture .ov-nv{animation:ovPd 600ms cubic-bezier(.16,1,.3,1) 35ms both}
#obr-ouverture .ov-noeud{fill:#19B3A0;transform-box:fill-box;transform-origin:50% 50%;transform:scale(.1818);
  animation:ovNoeud 260ms cubic-bezier(.2,.7,.1,1) 920ms forwards}
@keyframes ovNoeud{to{transform:scale(1)}}
/* le vrai logo de l'en-tete attend que celui de l'ouverture se pose dessus (CSS seul : il revient meme sans JS) */
html.ov-joue header .logo{animation:ovLogoCache 1800ms linear}
@keyframes ovLogoCache{from,to{visibility:hidden}}
/* un toucher, un clic, une touche ou la molette : on passe (fondu court), ouverture.js retire l'element. Le calque garde
   le doigt jusqu'a son retrait (le clic qui suit est avale par ouverture.js) : pas de pointer-events:none ici, sinon ce
   clic touchait ce qui est dessous (vu le 12/10/2026). Filet : 400 ms apres, invisible et sans effet au doigt, meme si le
   script s'arrete. ovFinPasse et pas ovFin : un nom deja en cours garderait son depart (0 s) et s'appliquerait aussitot. */
html.ov-joue.ov-passe #obr-ouverture{animation:ovPasse 220ms ease-out forwards,ovFinPasse 1ms linear 400ms forwards}
html.ov-joue.ov-passe header .logo{animation:none}
@keyframes ovPasse{to{opacity:0}}
@keyframes ovFinPasse{from,to{visibility:hidden;pointer-events:none}}
@media(prefers-reduced-motion:reduce){html.ov-joue #obr-ouverture{display:none}html.ov-joue header .logo{animation:none}}
@supports not (container-type:size){html.ov-joue #obr-ouverture{display:none}html.ov-joue header .logo{animation:none}}
@media print{html.ov-joue #obr-ouverture{display:none}html.ov-joue header .logo{animation:none}}