/* =====================================================================
   SOMNIA — Page « Mentions légales »
   Agence Nexus · SAE 202 — CSS ecrit a la main (eco-conception)
   ===================================================================== */

:root {
    --c-violet-fonce: #5C3B8C;
    --c-violet-moyen: #7B5EA7;
    --c-violet-clair: #9D7DC2;
    --c-rose-pastel: #F0BFCF;
    --c-rose-vif: #D97BA8;
    --c-mauve-pale: #E8D5F5;
    --c-blanc: #FFFFFF;
    --c-texte: #3a2460;
    --c-radius: 16px;
    --c-radius-lg: 22px;
    --c-shadow-card: 0 12px 34px rgba(92,59,140,0.20);
    --c-font-titre: 'Cinzel', serif;
    --c-font-deco: 'Cormorant', serif;
}

.ml {
    position: relative; color: var(--c-texte); font-family: var(--c-font-deco);
    overflow: hidden;
    background: linear-gradient(180deg, #efe4fb 0%, #e7d8f6 55%, #d9c4ee 100%);
}
/* fines trainees d'etoiles filantes en fond */
.ml::before {
    content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: url('/assets/img/image4.webp') center / cover no-repeat;
    opacity: 0.18;
}

.ml .conteneur { max-width: 720px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 2; }

/* ---- Decorations ----------------------------------------------------- */
.deco { position: absolute; pointer-events: none; z-index: 1; user-select: none; }
.deco--star-l  { top: 360px; left: -40px;  width: 180px; opacity: 0.55; transform: scaleX(-1); animation: scintille 6s ease-in-out infinite; }
.deco--star-r  { top: 300px; right: -30px; width: 200px; opacity: 0.6; animation: scintille 5s ease-in-out infinite; }
.deco--cloud-bl { bottom: 90px; left: -70px;  width: 300px; opacity: 0.85; animation: flotte 12s ease-in-out infinite; }
.deco--cloud-br { bottom: 60px; right: -80px; width: 320px; opacity: 0.85; animation: flotte 14s ease-in-out infinite reverse; }

@keyframes flotte { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
@keyframes scintille { 0%,100% { opacity: 0.6; } 50% { opacity: 0.3; } }

/* ===================== HERO ===================== */
.ml-hero { position: relative; z-index: 2; text-align: center; padding: 120px 24px 30px; }
.ml-hero__logo {
    width: 440px; max-width: 80%; height: auto; display: block; margin: 0 auto 8px;
    filter: drop-shadow(0 8px 22px rgba(124,94,167,0.30));
    animation: flotte 6s ease-in-out infinite;
}
.ml-hero__titre {
    font-family: var(--c-font-titre); font-size: 2rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-violet-fonce);
    text-shadow: 0 2px 14px rgba(255,255,255,0.6);
}

/* ===================== CARTES ===================== */
.ml-corps { position: relative; z-index: 2; padding: 40px 0 120px; }

.ml-carte {
    background: var(--c-blanc); border-radius: var(--c-radius-lg);
    box-shadow: var(--c-shadow-card); margin-bottom: 34px; overflow: hidden;
    border: 1px solid rgba(157,125,194,0.18);
}
.ml-carte__tete {
    position: relative;
    background: linear-gradient(90deg, var(--c-violet-moyen), var(--c-violet-clair));
    padding: 16px 24px;
    display: flex; align-items: center; justify-content: space-between;
}
.ml-carte__titre {
    font-family: var(--c-font-titre); font-size: 1.05rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-blanc); margin: 0;
}
.ml-carte__titre a { color: var(--c-blanc); text-decoration: underline; text-underline-offset: 3px; }

/* petite etoile brillante (CSS) en haut a droite de l'entete */
.ml-star {
    width: 34px; height: 34px; flex-shrink: 0;
    color: #b89bff;
    filter: drop-shadow(0 2px 6px rgba(60,36,96,0.4));
}

.ml-carte__corps { padding: 22px 28px 26px; }
.ml-carte__corps h3 {
    font-family: var(--c-font-deco); font-weight: 700; font-size: 1.2rem;
    color: var(--c-violet-fonce); text-transform: none; letter-spacing: 0;
    margin: 18px 0 10px;
}
.ml-carte__corps h3:first-child { margin-top: 0; }
.ml-carte__corps p {
    font-size: 1.08rem; line-height: 1.75; color: var(--c-texte); margin: 0 0 8px;
}
.ml-carte__corps p:last-child { margin-bottom: 0; }
.ml-carte__corps strong { color: var(--c-violet-fonce); }
.ml-carte__corps a { color: var(--c-rose-vif); }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 720px) {
    .ml-hero__titre { font-size: 1.5rem; }
    .ml-carte__corps { padding: 18px 18px 22px; }
    .deco { display: none; }
}