/* Ouverture du site, une fois par visite : la page passe sous la presse.
   Les quatre encres balaient la feuille l'une après l'autre (jaune, magenta, cyan, noir), les repères de coupe se tracent,
   puis la feuille se soulève et découvre le site. Sur les pages Maroc Led Print : l'écran se met sous tension. */
/* overflow: clip coupe comme hidden, sans faire du voile une zone de défilement : en arabe (de droite à gauche),
   les bandes qui passent déplaçaient sinon son origine, et Google comptait un décalage de mise en page. */
.ouverture { position: fixed; inset: 0; z-index: 200; pointer-events: none; overflow: hidden; overflow: clip; background: var(--fond); }
.ouverture__passe { position: absolute; top: -20%; bottom: -20%; width: 46vmax; left: -60vmax; transform: skewX(-18deg); mix-blend-mode: multiply; }
.ouverture__passe:nth-child(1) { background: #fff200; animation: passe 0.62s cubic-bezier(0.6, 0, 0.3, 1) 0.05s forwards; }
.ouverture__passe:nth-child(2) { background: #ec008c; animation: passe 0.62s cubic-bezier(0.6, 0, 0.3, 1) 0.17s forwards; }
.ouverture__passe:nth-child(3) { background: #00aeef; animation: passe 0.62s cubic-bezier(0.6, 0, 0.3, 1) 0.29s forwards; }
.ouverture__passe:nth-child(4) { background: #121318; animation: passe 0.62s cubic-bezier(0.6, 0, 0.3, 1) 0.41s forwards; }
/* Le déplacement passe par translate (et non left) : même trajet, sans décalage de mise en page compté par Google (CLS). */
@keyframes passe { to { translate: calc(140vw + 60vmax) 0; } }
/* height: auto : la hauteur suit la largeur (sinon l'attribut height="192" de l'image l'écrasait sur téléphone). */
.ouverture__logo { position: absolute; left: 50%; top: 50%; width: min(34vw, 190px); height: auto; translate: -50% -50%; opacity: 0; animation: logo 0.5s ease 0.62s forwards; }
@keyframes logo { from { opacity: 0; scale: 0.94; } to { opacity: 1; scale: 1; } }
.ouverture__reperes { position: absolute; inset: 22px; }
.ouverture__reperes i { position: absolute; width: 26px; height: 26px; border: 0 solid var(--texte); opacity: 0; animation: repere 0.3s ease 0.55s forwards; }
.ouverture__reperes i:nth-child(1) { left: 0; top: 0; border-left-width: 1.5px; border-top-width: 1.5px; }
.ouverture__reperes i:nth-child(2) { right: 0; top: 0; border-right-width: 1.5px; border-top-width: 1.5px; }
.ouverture__reperes i:nth-child(3) { left: 0; bottom: 0; border-left-width: 1.5px; border-bottom-width: 1.5px; }
.ouverture__reperes i:nth-child(4) { right: 0; bottom: 0; border-right-width: 1.5px; border-bottom-width: 1.5px; }
@keyframes repere { to { opacity: 1; } }
/* La feuille se soulève par le coin bas droit, comme une étiquette qu'on décolle. */
.ouverture { animation: decoller 0.75s cubic-bezier(0.6, 0, 0.25, 1) 1.2s forwards; }
@keyframes decoller { from { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } to { clip-path: polygon(0 0, 0 0, 0 0, 0 0); } }

/* Variante « mise sous tension » pour les pages lumière (Maroc Led Print). */
.ouverture--nuit { background: #050608; }
.ouverture--nuit .ouverture__passe, .ouverture--nuit .ouverture__reperes { display: none; }
.ouverture--nuit::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: #fff; box-shadow: 0 0 24px 6px rgba(140, 180, 255, 0.9); transform: scaleX(0); animation: trait 0.35s ease 0.1s forwards, ouvrir 0.45s cubic-bezier(0.6, 0, 0.3, 1) 0.5s forwards; }
@keyframes trait { to { transform: scaleX(1); } }
/* Le trait s'ouvre en hauteur, centré : top reste à 50 % et translate le remonte de la moitié de l'écran (même boîte que top: 0),
   pour que Google ne compte pas de décalage de mise en page (CLS). */
@keyframes ouvrir { to { translate: 0 -50vh; height: 100%; background: rgba(255, 255, 255, 0.04); box-shadow: none; } }
.ouverture--nuit .ouverture__logo { animation: logo-nuit 0.6s steps(6, end) 0.55s forwards; filter: drop-shadow(0 0 18px rgba(120, 170, 255, 0.7)); }
@keyframes logo-nuit { 0% { opacity: 0; } 30% { opacity: 0.8; } 45% { opacity: 0.1; } 70% { opacity: 1; } 85% { opacity: 0.5; } 100% { opacity: 1; } }
.ouverture--nuit { animation: fondu-nuit 0.5s ease 1.25s forwards; }
@keyframes fondu-nuit { to { opacity: 0; } }

@media (prefers-reduced-motion: reduce) { .ouverture { display: none; } }