/* M-ECHO — styles partagés (hors utilitaires Tailwind) */

body {
    -webkit-font-smoothing: antialiased;
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
}

/* Menu mobile (voir main.js) */
.mobile-nav-menu {
    display: none;
}
.mobile-nav-menu.is-open {
    display: flex;
}

/* Lien de nav actif (voir main.js) */
.nav-link.is-active {
    color: #d95f45;
    border-bottom: 1px solid currentColor;
}

/* Extrait de lecture (page indexExtrait.html) */
.reading-canvas {
    max-width: 800px;
    margin: 0 auto;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInText 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes fadeInText {
    to { opacity: 1; transform: translateY(0); }
}

.fade-in-sequence > * {
    opacity: 0;
    animation: fadeUp 1s ease-out forwards;
}
.fade-in-sequence > *:nth-child(1) { animation-delay: 0.2s; }
.fade-in-sequence > *:nth-child(2) { animation-delay: 0.5s; }
.fade-in-sequence > *:nth-child(3) { animation-delay: 0.8s; }
.fade-in-sequence > *:nth-child(4) { animation-delay: 1.1s; }
.fade-in-sequence > *:nth-child(5) { animation-delay: 1.4s; }
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Apparition douce (page indexCommingSonn.html) */
.fade-in {
    animation: fadeIn 2s ease-out forwards;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Révélation au scroll (voir main.js, classe .scroll-reveal) */
.scroll-reveal {
    opacity: 0;
    transform: translateY(1rem);
    transition: opacity 1s ease-out, transform 1s ease-out;
}
.scroll-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Hero de la page d'accueil : 1 colonne en mobile, 2 colonnes asymétriques dès tablette */
.asymmetric-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center;
}
@media (min-width: 768px) {
    .asymmetric-grid {
        grid-template-columns: 1.1fr 0.9fr;
        gap: 4rem;
    }
}

/* Photo hero (index.html) : accord avec la palette corail/crème */
.hero-photo-treated {
    filter: grayscale(35%) sepia(28%) saturate(160%) hue-rotate(-8deg) brightness(1.03) contrast(1.03);
}
.hero-photo-wrap {
    position: relative;
}
.hero-photo-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(217, 95, 69, 0.22), rgba(248, 244, 238, 0) 65%);
    pointer-events: none;
}

/* Politique de confidentialité : soulignement éditorial */
.editorial-underline {
    position: relative;
    display: inline-block;
}
.editorial-underline::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 1px;
    background-color: #dec0b9;
}