/* ══════════════════════════════════════════════════
   🎨 commun/commun.css — Styles partagés par toutes les pages
   Sophro-visio.fr — © 2026 Yannick MOULIN
   ══════════════════════════════════════════════════ */

/* ── Avertissement « Tournez votre écran » (mobile) ─────────────────────────
   Pages en mode paysage (par défaut) : affiché quand le téléphone est tenu
   en portrait. Pages en mode portrait (<body data-orientation="portrait">) :
   affiché quand le téléphone est tenu en paysage. */
#rotation-warning {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.97);
    z-index: 99999;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    color: white;
    font-family: 'Segoe UI', sans-serif;
    padding: 30px;
}
#rotation-warning .rotation-icon {
    font-size: 80px;
    animation: rotate-phone 1.5s ease-in-out infinite;
    margin-bottom: 25px;
}
#rotation-warning h2 { font-size: 24px; font-weight: 700; margin-bottom: 12px; }
#rotation-warning p  { font-size: 16px; color: #ccc; line-height: 1.6; }

@keyframes rotate-phone {
    0%   { transform: rotate(0deg); }
    40%  { transform: rotate(90deg); }
    60%  { transform: rotate(90deg); }
    100% { transform: rotate(0deg); }
}
@keyframes rotate-phone-inverse {
    0%   { transform: rotate(0deg); }
    40%  { transform: rotate(-90deg); }
    60%  { transform: rotate(-90deg); }
    100% { transform: rotate(0deg); }
}

@media screen and (max-width: 768px) and (orientation: portrait) {
    body:not([data-orientation="portrait"]) #rotation-warning { display: flex; }
}
@media screen and (max-width: 768px) and (orientation: landscape) {
    body[data-orientation="portrait"] #rotation-warning { display: flex; }
    body[data-orientation="portrait"] #rotation-warning .rotation-icon { animation-name: rotate-phone-inverse; }
}