/* Metikout - identite propre (GO Yossef Haim 18/09/2026).
   Remplace style.css page par page : l'accueil charge UNIQUEMENT ce fichier.
   Tons derives du logo miel ; aucun degrade sur du texte, aucune icone emoji. */

@font-face {
    font-family: "Young Serif";
    src: url("../assets/fonts/young-serif-latin.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Atkinson Next";
    src: url("../assets/fonts/atkinson-next-latin.woff2") format("woff2");
    font-weight: 200 800;
    font-display: swap;
}

:root {
    --violet: #5B3CC4;
    --violet-fonce: #4A2FA8;
    --violet-nuit: #2E1D6B;
    --violet-voile: #EEE9FA;
    --miel: #F2A900;
    --miel-fonce: #8A5100;
    --miel-clair: #FFE3A1;
    --creme: #FBF4E4;
    --creme-claire: #FFFBF2;
    --filet: #E8D9B5;
    --encre: #2B2233;
    --encre-douce: #5E5462;
    --titre: "Young Serif", Georgia, serif;
    --texte: "Atkinson Next", "Segoe UI", sans-serif;
    --sortie: cubic-bezier(0.22, 1, 0.36, 1);
    --feston: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='20' viewBox='0 0 80 20'%3E%3Cpath d='M0 20V11C10 11 12 3 20 3s10 8 20 8 12-8 20-8 10 8 20 8v9z'/%3E%3C/svg%3E");
    --ornement: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='16' viewBox='0 0 120 16'%3E%3Cpath d='M0 8h46M74 8h46' stroke='%23F2A900' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M60 1l6.5 3.5v7L60 15l-6.5-3.5v-7z' fill='%23F2A900'/%3E%3C/svg%3E");
    --alveoles: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 0 56 16v32L28 64 0 48V16zM28 64v33' fill='none' stroke='%23ffffff' stroke-opacity='.07' stroke-width='2'/%3E%3C/svg%3E");
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--texte);
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--encre);
    background: var(--creme);
}

[v-cloak] {
    display: none;
}

img {
    max-width: 100%;
}

a {
    color: inherit;
}

:focus-visible {
    outline: 3px solid var(--miel);
    outline-offset: 3px;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.picto {
    width: 1em;
    height: 1em;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---------- En-tete ---------- */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--violet);
    transition: box-shadow 0.3s ease;
}

.header.scrolled {
    box-shadow: 0 4px 18px rgba(46, 29, 107, 0.25);
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 58px;
}

/* Le logo deborde sous la barre : c'est un repere du site, on le garde */
.logo {
    position: relative;
    z-index: 1001;
    margin-top: 52px;
    transition: transform 0.3s var(--sortie);
}

.logo:hover {
    transform: translateY(-2px);
}

.logo-image {
    width: 150px;
    height: auto;
    display: block;
}

.nav {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.nav a {
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
    font-weight: 700;
    font-size: 0.95rem;
    padding: 0.4rem 0.8rem;
    border-radius: 999px;
    position: relative;
    transition: background-color 0.2s ease;
}

/* Tablette et petit portable (le menu s'affiche des 769 px) : 8 liens sur UNE ligne */
@media (max-width: 1100px) {
    .nav {
        gap: 0;
    }

    .nav a {
        font-size: 0.86rem;
        padding: 0.4rem 0.55rem;
    }

    .logo-image {
        width: 118px;
    }
}

@media (max-width: 880px) {
    .nav a {
        font-size: 0.8rem;
        padding: 0.35rem 0.42rem;
    }

    .logo-image {
        width: 96px;
    }
}

.nav a:hover {
    background: rgba(255, 255, 255, 0.12);
}

.nav a.guide-link {
    background: var(--miel);
    color: var(--encre);
}

.nav a.guide-link:hover {
    background: var(--miel-clair);
}

.nav a.nav-active {
    background: rgba(255, 255, 255, 0.16);
    box-shadow: inset 0 -3px 0 var(--miel);
}

.nav a.nav-active.guide-link {
    background: var(--miel-clair);
}

.menu-toggle,
.mobile-nav {
    display: none;
}

.mobile-logo {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--creme-claire);
    border-bottom: 1px solid var(--filet);
    padding: 0.7rem 20px;
}

.mobile-logo-content {
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
}

.mobile-logo-image {
    width: 44px;
    height: auto;
}

.mobile-logo-text {
    font-family: var(--titre);
    font-size: 1.35rem;
    color: var(--violet-nuit);
    letter-spacing: 0.04em;
}

/* ---------- Hero ---------- */
.hero {
    position: relative;
    background-color: var(--violet);
    background-image: var(--alveoles);
    color: #fff;
    padding: 106px 20px 64px;
}

/* Geste : bord inferieur en vague de miel, dans la couleur de la section suivante */
.hero::after,
.page-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 20px;
    background: var(--creme-claire);
    -webkit-mask: var(--feston) repeat-x left bottom / 80px 20px;
    mask: var(--feston) repeat-x left bottom / 80px 20px;
}

.hero-content {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    max-width: 1200px;
    margin: 0 auto;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s var(--sortie), transform 0.6s var(--sortie);
}

.hero-content.visible {
    opacity: 1;
    transform: none;
}

.hero-title-main {
    font-family: var(--titre);
    font-weight: 400;
    font-size: clamp(2rem, 4.2vw, 3.1rem);
    line-height: 1.12;
    text-align: center;
    text-wrap: balance;
}

.hero-columns {
    display: grid;
    grid-template-columns: 1fr 1.55fr;
    gap: 3rem;
    align-items: center;
}

.hero-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.6rem;
    text-align: center;
}

.hero-description {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.hero-intro {
    font-size: 1.3rem;
    line-height: 1.45;
}

.hero-topics {
    font-family: var(--titre);
    font-size: 1.55rem;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.55);
}

.hero-topic {
    font-weight: 400;
    color: var(--miel-clair);
}

.hero-subtitle {
    font-size: 1.15rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.92);
}

.hero-benefit {
    color: var(--miel-clair);
    font-weight: 800;
}

.hero-actions {
    width: 100%;
}

.phone-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
}

/* Geste 1 : la plaque miel, silhouette ondulee du logo */
.phone-btn {
    --coin: 18px;
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    max-width: 340px;
    min-height: 76px;
    padding: 0.8rem 1.8rem;
    background: var(--miel);
    color: var(--encre);
    text-decoration: none;
    clip-path: polygon(var(--coin) 0, calc(100% - var(--coin)) 0, 100% 24%, 100% 76%, calc(100% - var(--coin)) 100%, var(--coin) 100%, 0 76%, 0 24%);
    border-radius: 6px;
    transition: transform 0.25s var(--sortie), background-color 0.2s ease;
}

.phone-btn:hover {
    background: #FFBC1F;
    transform: translateY(-2px);
}

.phone-btn:active {
    transform: translateY(0);
}

.flag {
    width: 36px;
    height: 24px;
    flex: none;
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(43, 34, 51, 0.18);
}

.phone-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.15;
}

.phone-info .country {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.phone-info .number {
    font-size: 1.65rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    font-variant-numeric: lining-nums tabular-nums;
    white-space: nowrap;
}

.hero-right {
    display: flex;
    justify-content: center;
}

.hero-child-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 20px;
    border: 4px solid var(--creme-claire);
}

.hero-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem 1.6rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.92);
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.hero-badge::before {
    content: "";
    width: 0.8em;
    height: 0.92em;
    background: var(--miel);
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

/* ---------- Titres de section ---------- */
.section-title {
    font-family: var(--titre);
    font-weight: 400;
    font-size: clamp(1.8rem, 3.4vw, 2.5rem);
    line-height: 1.15;
    color: var(--violet-nuit);
    text-align: center;
    margin-bottom: 2.6rem;
}

.section-title::after {
    content: "";
    display: block;
    width: 120px;
    height: 16px;
    margin: 0.8rem auto 0;
    background: var(--ornement) no-repeat center / contain;
}

/* ---------- Ecouter ---------- */
.listen-section {
    background: var(--creme-claire);
    padding: 76px 20px;
}

.listen-intro {
    text-align: center;
    margin: -1rem 0 1.6rem;
}

.story-title {
    font-family: var(--titre);
    font-weight: 400;
    font-size: 1.5rem;
    color: var(--violet);
}

.audio-player {
    max-width: 680px;
    margin: 0 auto;
    background: var(--violet);
    background-image: var(--alveoles);
    border-radius: 18px;
    padding: 1.8rem 2rem;
    color: #fff;
}

.audio-controls {
    display: flex;
    align-items: center;
    gap: 1.4rem;
}

.play-btn {
    width: 64px;
    height: 64px;
    flex: none;
    display: grid;
    place-items: center;
    border: none;
    border-radius: 50%;
    background: var(--miel);
    color: var(--encre);
    cursor: pointer;
    font-size: 1.6rem;
    transition: transform 0.2s var(--sortie), background-color 0.2s ease;
}

.play-btn:hover {
    background: #FFBC1F;
    transform: scale(1.05);
}

.play-btn:active {
    transform: scale(0.97);
}

.play-btn .picto {
    fill: currentColor;
    stroke: none;
}

.progress-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.progress-bar {
    height: 12px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.22);
    cursor: pointer;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: var(--miel);
    border-radius: 6px;
}

.time-display {
    display: flex;
    justify-content: space-between;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.listen-description {
    max-width: 620px;
    margin: 2rem auto 0;
    text-align: center;
    font-size: 1.15rem;
}

.highlight {
    color: var(--violet);
    font-weight: 800;
}

/* ---------- Newsletter ---------- */
.newsletter-section {
    background: var(--creme);
    padding: 3.5rem 20px;
}

.newsletter-card {
    max-width: 640px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.1rem;
    padding: 2.2rem 2rem;
    background: var(--creme-claire);
    border: 2px solid var(--miel);
    border-radius: 18px;
    text-align: center;
}

.newsletter-icon {
    color: var(--miel-fonce);
    font-size: 3rem;
    line-height: 0;
}

.newsletter-title {
    font-family: var(--titre);
    font-weight: 400;
    font-size: 1.45rem;
    line-height: 1.2;
    color: var(--violet-nuit);
    margin-bottom: 0.3rem;
}

.newsletter-subtitle {
    color: var(--encre-douce);
}

.newsletter-form {
    width: 100%;
    position: relative;
}

/* Champ piege anti-robots : invisible, hors tabulation, sans deborder de la page */
.newsletter-piege {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
    padding: 0;
}

.newsletter-input-group {
    display: flex;
    gap: 0.5rem;
}

.newsletter-input {
    flex: 1;
    min-width: 0;
    padding: 0.85rem 1.1rem;
    font: inherit;
    color: var(--encre);
    background: #fff;
    border: 2px solid var(--filet);
    border-radius: 10px;
    transition: border-color 0.2s ease;
}

.newsletter-input:focus {
    outline: none;
    border-color: var(--violet);
}

.newsletter-input::placeholder {
    color: #8A7F86;
}

.newsletter-btn {
    padding: 0.85rem 1.5rem;
    font: inherit;
    font-weight: 800;
    color: #fff;
    background: var(--violet);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.2s ease;
}

.newsletter-btn:hover:not(:disabled) {
    background: var(--violet-fonce);
}

.newsletter-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.newsletter-spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2.5px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    vertical-align: middle;
    animation: tourne 0.7s linear infinite;
}

@keyframes tourne {
    to { transform: rotate(360deg); }
}

.newsletter-error {
    color: #B42318;
    font-size: 0.95rem;
    margin-top: 0.5rem;
}

.newsletter-success {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--violet-nuit);
}

.newsletter-success-icon {
    color: var(--miel-fonce);
    font-size: 1.5rem;
    line-height: 0;
}

/* ---------- Telechargements ---------- */
.downloads-section {
    background: var(--creme-claire);
    padding: 76px 20px;
}

.downloads-intro {
    text-align: center;
    color: var(--encre-douce);
    margin: -1.4rem auto 2.4rem;
}

.downloads-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 320px));
    justify-content: center;
    gap: 1.5rem;
    max-width: 1000px;
    margin: 0 auto;
}

.download-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--filet);
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    color: var(--encre);
    transition: transform 0.25s var(--sortie), box-shadow 0.25s ease;
}

.download-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(46, 29, 107, 0.12);
}

.download-media {
    height: 180px;
    position: relative;
}

.download-media-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.download-media-pictogram {
    display: grid;
    place-items: center;
    background: var(--miel-clair);
    color: var(--violet-nuit);
    font-size: 5rem;
}

.download-tag {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 0.15rem 0.55rem;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    background: #fff;
    color: var(--violet-nuit);
    border-radius: 6px;
}

.download-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.3rem 1.4rem 1.5rem;
    text-align: center;
}

.download-title {
    font-family: var(--titre);
    font-weight: 400;
    font-size: 1.3rem;
    color: var(--violet-nuit);
}

.download-desc {
    color: var(--encre-douce);
    font-size: 1rem;
    line-height: 1.45;
    flex: 1;
}

.download-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.4rem;
    padding: 0.65rem 1.3rem;
    font-weight: 800;
    color: #fff;
    background: var(--violet);
    border-radius: 999px;
    transition: background-color 0.2s ease;
}

.download-card:hover .download-btn {
    background: var(--violet-fonce);
}

.download-icon-btn {
    font-size: 1.15rem;
    line-height: 0;
}

.download-card-wide {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    gap: 1.4rem;
    padding: 1.4rem 1.6rem;
    background: var(--violet-nuit);
    border-color: var(--violet-nuit);
    color: #fff;
}

.download-wide-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--miel);
    color: var(--violet-nuit);
    font-size: 2.3rem;
}

.download-wide-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.download-wide-eyebrow {
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--miel);
}

.download-wide-title {
    font-family: var(--titre);
    font-weight: 400;
    font-size: 1.45rem;
    line-height: 1.2;
}

.download-wide-desc {
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.45;
}

.download-wide-cta {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.3rem;
    font-weight: 800;
    color: var(--encre);
    background: var(--miel);
    border-radius: 999px;
}

.download-wide-arrow {
    font-size: 1.1rem;
    line-height: 0;
    transition: transform 0.2s var(--sortie);
}

.download-card-wide:hover .download-wide-arrow {
    transform: translateX(3px);
}

/* ---------- Ce qui attend vos enfants ---------- */
.categories-section {
    background: var(--creme);
    padding: 64px 20px;
}

.categories-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    max-width: 900px;
    margin: 0 auto;
}

.category-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
    padding: 1.4rem 1rem;
    background: var(--creme-claire);
    border: 1px solid var(--filet);
    border-radius: 14px;
    text-align: center;
}

.category-icon {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--miel-clair);
    color: var(--violet-nuit);
    font-size: 2rem;
}

.category-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--violet-nuit);
    line-height: 1.3;
}

/* ---------- Pour aller plus loin ---------- */
.discover-section {
    background: var(--creme-claire);
    padding: 64px 20px 80px;
}

.discover-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
    max-width: 860px;
    margin: 0 auto;
}

.discover-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.2rem 1.3rem;
    background: #fff;
    border: 1px solid var(--filet);
    border-radius: 14px;
    text-decoration: none;
    color: var(--encre);
    transition: transform 0.25s var(--sortie), border-color 0.2s ease;
}

.discover-card:hover {
    transform: translateY(-2px);
    border-color: var(--miel);
}

.discover-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--violet-voile);
    color: var(--violet);
    font-size: 1.6rem;
}

.discover-body {
    flex: 1;
}

.discover-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--violet-nuit);
}

.discover-desc {
    font-size: 0.95rem;
    line-height: 1.4;
    color: var(--encre-douce);
}

.discover-arrow {
    color: var(--miel-fonce);
    font-size: 1.3rem;
    line-height: 0;
    transition: transform 0.2s var(--sortie);
}

.discover-card:hover .discover-arrow {
    transform: translateX(3px);
}

/* ---------- Pied de page ---------- */
.footer {
    background: var(--violet-nuit);
    color: rgba(255, 255, 255, 0.85);
    padding: 2.4rem 20px;
    text-align: center;
}

.footer-copy {
    font-size: 0.95rem;
}

.footer-message {
    margin-top: 0.4rem;
    font-family: var(--titre);
    font-size: 1.15rem;
    color: var(--miel);
}

/* ---------- Bandeau d'evenement (masque hors date par le script) ---------- */
.event-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1010;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 16px;
    background: var(--violet-nuit);
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.95rem;
    text-align: center;
}

.event-banner:hover {
    background: #3A2585;
}

.event-banner-icon {
    color: var(--miel);
    font-size: 1.1rem;
    line-height: 0;
}

.event-banner-arrow {
    color: var(--miel);
}

.event-banner-pulse {
    display: none;
}

.event-banner.live {
    background: #A3201A;
}

.event-banner.live .event-banner-icon {
    display: none;
}

.event-banner.live .event-banner-pulse {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--miel-clair);
}

body.has-event-banner .header,
body.has-event-banner .mobile-logo {
    top: 44px;
}

body.has-event-banner .hero {
    padding-top: 150px;
}

/* ================= Pages secondaires ================= */
.page-hero {
    position: relative;
    background-color: var(--violet);
    background-image: var(--alveoles);
    color: #fff;
    text-align: center;
    padding: 120px 20px 72px;
}

.page-hero-title {
    font-family: var(--titre);
    font-weight: 400;
    font-size: clamp(2rem, 4.4vw, 3rem);
    line-height: 1.12;
    text-wrap: balance;
}

.page-hero-subtitle {
    max-width: 36em;
    margin: 0.7rem auto 0;
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.9);
}

.page-section {
    background: var(--creme-claire);
    padding: 56px 20px 80px;
}

.feuille {
    max-width: 1000px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--filet);
    border-radius: 20px;
    padding: 2.6rem;
}

/* ---------- A propos ---------- */
.about-section {
    padding-top: 0;
}

.about-content {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 3.2rem;
    align-items: center;
    position: relative;
    margin-top: -48px;
    box-shadow: 0 2px 4px rgba(46, 29, 107, 0.05), 0 18px 40px rgba(46, 29, 107, 0.1);
}

/* Portrait entier dans une arche couleur miel (le cercle coupait le chapeau) */
.about-portrait {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.about-portrait-cadre {
    width: 100%;
    padding: 9px;
    border-radius: 170px 170px 22px 22px;
    background: var(--miel);
    box-shadow: 0 14px 30px rgba(138, 81, 0, 0.25);
    transform: rotate(-1.5deg);
    transition: transform 0.4s var(--sortie);
}

.about-portrait:hover .about-portrait-cadre {
    transform: rotate(0deg);
}

.about-portrait-cadre img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 384 / 508;
    object-fit: cover;
    border-radius: 162px 162px 15px 15px;
    border: 4px solid #fff;
}

.about-text p {
    font-size: 1.15rem;
    line-height: 1.7;
}

.about-text p + p {
    margin-top: 1.1rem;
}

.about-text strong {
    color: var(--violet-nuit);
}

.about-text .accent-text {
    color: var(--miel-fonce);
}

.about-text .brand-text {
    font-family: var(--titre);
    font-weight: 400;
    color: var(--violet);
}

/* ---------- A propos : la vision ---------- */
.vision-section {
    background: var(--creme);
    padding: 64px 20px 80px;
}

.vision-intro {
    max-width: 720px;
    text-wrap: balance;
    margin: -1.2rem auto 2.4rem;
    text-align: center;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--violet-nuit);
}

.vision {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.2rem;
    max-width: 1000px;
    margin: 0 auto;
}

.vision-bloc {
    position: relative;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--filet);
    border-radius: 16px;
    padding: 1.7rem 1.6rem;
}

/* le filet de miel suit la courbe des coins au lieu de la couper */
.vision-bloc::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--miel);
}

.vision-image {
    display: block;
    width: calc(100% + 3.2rem);
    max-width: none;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    margin: -1.7rem -1.6rem 1.3rem;
    border-radius: 12px 12px 0 0;
}

.vision-bloc p,
.vision-reponse p {
    line-height: 1.65;
}

.vision-reponse p + p,
.vision-bloc p + p {
    margin-top: 0.7rem;
}

.vision-etiquette {
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--miel-fonce);
    margin-bottom: 0.3rem;
}

.vision-reponse {
    max-width: 1000px;
    margin-top: 1.2rem;
    border-top: 4px solid var(--violet);
}

.vision-titre {
    font-family: var(--titre);
    font-weight: 400;
    font-size: 1.35rem;
    line-height: 1.2;
    color: var(--violet-nuit);
    margin-bottom: 0.6rem;
}

.vision-verset {
    font-family: "Frank Ruhl Libre", "David", serif;
    font-weight: 700;
    font-synthesis: none;
    font-size: 1.15rem;
    line-height: 1.5;
    color: var(--violet);
}

.vision-reponse-intro {
    font-size: 1.1rem;
}

.vision-offres {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin: 1.4rem 0 1.6rem;
    padding: 0;
}

.vision-offres li {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    align-items: flex-start;
    padding: 1.1rem 1.1rem 1.2rem;
    border-radius: 14px;
    background: var(--violet-voile);
}

.vision-offres strong {
    font-family: var(--titre);
    font-weight: 400;
    font-size: 1.12rem;
    color: var(--violet-nuit);
}

.vision-offre-lien {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 0.45rem;
    margin-top: auto;
    padding: 0.55rem 1rem;
    border-radius: 999px;
    background: var(--violet);
    color: #fff;
    font-weight: 800;
    font-size: 0.92rem;
    text-decoration: none;
    transition: background-color 0.2s ease, transform 0.15s var(--sortie);
}

.vision-offre-lien:hover {
    background: var(--violet-fonce);
}

.vision-offre-lien:active {
    transform: scale(0.97);
}

.vision-offre-lien:focus-visible {
    outline: 3px solid var(--miel);
    outline-offset: 3px;
}

.vision-offre-lien .picto {
    transition: transform 0.2s var(--sortie);
}

.vision-offre-lien:hover .picto {
    transform: translateX(3px);
}

.vision-offres li > span:not(.vision-offre-picto) {
    line-height: 1.55;
    color: var(--encre-douce);
}

.vision-offre-picto {
    display: grid;
    place-items: center;
    width: 42px;
    height: 48px;
    margin-bottom: 0.2rem;
    background: var(--miel);
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    color: var(--encre);
    font-size: 1.3rem;
}

.vision-methode {
    padding: 1.3rem 1.4rem;
    border-radius: 14px;
    background: var(--creme);
}

.vision-methode p:last-child {
    line-height: 1.7;
}

.vision-souhait {
    position: relative;
    background-color: var(--violet);
    background-image: var(--alveoles);
    color: #fff;
    text-align: center;
    padding: 72px 20px;
}

.vision-souhait::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -1px;
    height: 20px;
    background: var(--creme);
    -webkit-mask: var(--feston) repeat-x left top / 80px 20px;
    mask: var(--feston) repeat-x left top / 80px 20px;
    transform: scaleY(-1);
}

.vision-souhait p {
    max-width: 780px;
    margin: 0 auto;
    font-family: var(--titre);
    font-size: clamp(1.2rem, 2.4vw, 1.55rem);
    line-height: 1.5;
    text-wrap: balance;
}


@media (max-width: 900px) {
    .vision-offres {
        grid-template-columns: minmax(0, 1fr);
    }

    .vision {
        grid-template-columns: minmax(0, 1fr);
        max-width: 620px;
    }
}

@media (max-width: 520px) {
    .vision-section {
        padding: 48px 14px 64px;
    }
}

/* ---------- Collaborer ---------- */
.contact-content-wrapper {
    max-width: 760px;
    text-align: center;
}

.contact-intro {
    font-size: 1.2rem;
    line-height: 1.75;
}

.contact-intro strong {
    color: var(--violet-nuit);
}

.contact-intro .content-highlight {
    font-weight: 800;
    color: var(--miel-fonce);
}

.contact-intro .cta-highlight {
    font-weight: 800;
    color: var(--violet);
}

.contact-info {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}

.contact-item {
    --coin: 18px;
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.9rem 1rem 0.9rem 1.6rem;
    background: var(--miel);
    color: var(--encre);
    text-decoration: none;
    font-weight: 800;
    font-size: 1.25rem;
    clip-path: polygon(var(--coin) 0, calc(100% - var(--coin)) 0, 100% 24%, 100% 76%, calc(100% - var(--coin)) 100%, var(--coin) 100%, 0 76%, 0 24%);
    border-radius: 6px;
    transition: background-color 0.2s ease;
}

.contact-item:hover {
    background: #FFBC1F;
}

.contact-icon {
    font-size: 1.5rem;
    line-height: 0;
}

.copy-email-btn {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-right: 0.6rem;
    border: none;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.55);
    color: var(--encre);
    font-size: 1.25rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.copy-email-btn:hover {
    background: #fff;
}

.copy-email-btn.success {
    background: var(--violet);
    color: #fff;
}

/* ---------- Evenements ---------- */
.events-list {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    max-width: 1060px;
    margin: 0 auto;
}

.event-card {
    scroll-margin-top: 90px;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    grid-template-areas:
        "header header"
        "video info"
        "buttons buttons";
    gap: 1.2rem 2.2rem;
    background: #fff;
    border: 1px solid var(--filet);
    border-radius: 22px;
    padding: 1.8rem 2rem 1.9rem;
    box-shadow: 0 1px 2px rgba(46, 29, 107, 0.04), 0 10px 30px rgba(46, 29, 107, 0.07);
}

/* Une carte sur deux : la video passe a droite (rythme de lecture) */
.event-card:nth-of-type(even) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    grid-template-areas:
        "header header"
        "info video"
        "buttons buttons";
}

.event-header {
    grid-area: header;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    flex-wrap: wrap;
}

.event-title {
    font-family: var(--titre);
    font-weight: 400;
    font-size: clamp(1.45rem, 2.4vw, 1.85rem);
    line-height: 1.2;
    color: var(--violet-nuit);
}

.event-badge {
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    padding: 0.25rem 0.8rem;
    border-radius: 999px;
    background: var(--miel-clair);
    color: var(--miel-fonce);
    white-space: nowrap;
}

.event-video {
    grid-area: video;
}

.event-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.event-type {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.8rem;
    border-radius: 999px;
    background: var(--violet-voile);
    color: var(--violet);
    font-size: 0.85rem;
    font-weight: 800;
}

.event-programme {
    margin-bottom: -0.3rem;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--miel-fonce);
}

/* En-tete d'annee de la liste */
.events-annee {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.2rem;
    color: var(--violet-nuit);
}

.events-annee::before,
.events-annee::after {
    content: "";
    flex: 1;
    height: 2px;
    background: var(--filet);
}

.events-annee span[lang="he"] {
    font-family: "Frank Ruhl Libre", "David", serif;
    font-weight: 700;
    font-synthesis: none;
    font-size: 1.7rem;
}

.events-annee-greg {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--encre-douce);
}

.video-wrapper {
    display: block;
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 16px;
    box-shadow: 0 12px 28px rgba(46, 29, 107, 0.22);
    overflow: hidden;
    background: var(--violet-nuit);
}

.video-placeholder,
.video-thumbnail {
    width: 100%;
    height: 100%;
    display: block;
}

.video-thumbnail {
    object-fit: cover;
    transition: transform 0.4s var(--sortie);
}

.video-wrapper:hover .video-thumbnail {
    transform: scale(1.03);
}

.video-placeholder-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: grid;
    place-items: center;
    background: rgba(46, 29, 107, 0.18);
}

.play-circle {
    display: grid;
    place-items: center;
    width: 78px;
    height: 88px;
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    background: var(--miel);
    color: var(--encre);
    font-size: 2rem;
    transition: transform 0.25s var(--sortie);
}

.play-circle .picto {
    fill: currentColor;
    stroke: none;
    margin-left: 4px;
}

.video-wrapper:hover .play-circle {
    transform: scale(1.08);
}

.event-info {
    grid-area: info;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.event-description {
    color: var(--encre-douce);
    line-height: 1.55;
}

.event-description strong {
    color: var(--violet-nuit);
}

.event-highlights {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.event-highlights li {
    position: relative;
    padding-left: 1.3rem;
    line-height: 1.45;
}

.event-highlights li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.42em;
    width: 0.62em;
    height: 0.7em;
    background: var(--miel);
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

.event-buttons-row {
    grid-area: buttons;
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--filet);
}

.event-watch-btn,
.event-download-btn,
.event-photo-btn,
.event-prep-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.3rem;
    font-weight: 800;
    text-decoration: none;
    border-radius: 999px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.event-watch-btn {
    background: var(--violet);
    color: #fff;
}

.event-watch-btn:hover {
    background: var(--violet-fonce);
}

.event-watch-btn .picto {
    fill: currentColor;
    stroke: none;
}

.event-download-btn {
    background: #fff;
    color: var(--violet);
    box-shadow: inset 0 0 0 2px var(--violet);
}

.event-download-btn:hover {
    background: var(--violet-voile);
}

.event-watch-btn:focus-visible,
.event-download-btn:focus-visible,
.event-photo-btn:focus-visible,
.event-prep-btn:focus-visible,
.video-wrapper:focus-visible {
    outline: 3px solid var(--miel);
    outline-offset: 3px;
}

.event-prep-btn {
    background: var(--miel);
    color: var(--encre);
}

.event-prep-btn:hover {
    background: #FFBC1F;
}

.event-photo-btn {
    background: #fff;
    color: var(--violet);
    box-shadow: inset 0 0 0 2px var(--violet);
}

.event-photo-btn:hover {
    background: var(--violet-voile);
}

@media (max-width: 860px) {
    .about-content {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        gap: 2rem;
    }

    .about-content {
        margin-top: -36px;
    }

    .about-portrait {
        width: 240px;
    }

    .event-card,
    .event-card:nth-of-type(even) {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "header"
            "video"
            "info"
            "buttons";
        padding: 1.3rem;
    }
}

@media (max-width: 768px) {
    .page-hero {
        padding: 96px 20px 60px;
    }

    .feuille {
        padding: 1.6rem 1.3rem;
    }

    .contact-item {
        font-size: 1.05rem;
        padding-left: 1.1rem;
    }
}

/* ================= Dvar Torah (dt.php) ================= */
.dt-body {
    background: var(--creme-claire);
}

.he {
    font-family: "Frank Ruhl Libre", "David", serif;
    font-weight: 700;
    direction: rtl;
}

/* ---------- Bandeau ---------- */
.dt-hero {
    position: relative;
    background-color: var(--violet);
    background-image: var(--alveoles);
    color: #fff;
    text-align: center;
    padding: 104px 20px 64px;
}

.dt-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 20px;
    background: var(--creme-claire);
    -webkit-mask: var(--feston) repeat-x left bottom / 80px 20px;
    mask: var(--feston) repeat-x left bottom / 80px 20px;
}

.dt-hero-inner {
    max-width: 720px;
    margin: 0 auto;
}

.dt-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--miel-clair);
}

.dt-eyebrow-dot {
    width: 0.7em;
    height: 0.8em;
    background: var(--miel);
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

.dt-hero-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.6rem;
    font-weight: 400;
}

.dt-paracha-he {
    font-family: "Frank Ruhl Libre", "David", serif;
    font-weight: 700;
    font-synthesis: none;
    font-size: clamp(3rem, 8vw, 5.2rem);
    line-height: 1.1;
    color: var(--miel-clair);
}

/* Annee courte (פ״ו) : plus petite que le nom, meme police */
.dt-annee {
    font-size: 0.62em;
    opacity: 0.85;
}

.dt-hero-sub {
    margin: 0.9rem auto 0;
    max-width: 34rem;
    font-size: 1.08rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.86);
}

.dt-hero-link {
    display: inline-block;
    margin-top: 1.1rem;
    font-weight: 800;
    color: var(--miel-clair);
    text-underline-offset: 4px;
}

/* ---------- Lecture ---------- */
.dt-feature {
    padding: 36px 20px 24px;
    scroll-margin-top: 68px;
}

.dt-card {
    max-width: 900px;
    margin: 0 auto;
    padding: 1.4rem;
    background: #fff;
    border: 1px solid var(--filet);
    border-radius: 20px;
}

.dt-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.2rem;
}

.dt-card-title {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-width: 0;
}

.dt-card-title h2 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    font-weight: 400;
}

.dt-card-title-he {
    font-family: "Frank Ruhl Libre", "David", serif;
    font-weight: 700;
    font-synthesis: none;
    font-size: 1.7rem;
    line-height: 1.1;
    color: var(--violet-nuit);
}

.dt-card-badge {
    align-self: center;
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    background: var(--miel-clair);
    color: var(--miel-fonce);
    font-size: 0.82rem;
    font-weight: 800;
    white-space: nowrap;
}

.dt-card-badge.is-past {
    background: var(--violet-voile);
    color: var(--violet);
}

.dt-card-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.dt-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 44px;
    padding: 0.5rem 1rem;
    border: 2px solid var(--filet);
    border-radius: 999px;
    background: #fff;
    color: var(--violet-nuit);
    font: inherit;
    font-weight: 800;
    font-size: 0.95rem;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.15s var(--sortie);
}

.dt-btn:hover {
    border-color: var(--miel);
}

.dt-btn:active {
    transform: scale(0.97);
}

.dt-btn:focus-visible,
.dt-archive-card:focus-visible,
.dt-page:focus-visible {
    outline: 3px solid var(--miel);
    outline-offset: 3px;
}

.dt-btn-plein {
    border-color: var(--violet);
    background: var(--violet);
    color: #fff;
}

.dt-btn-plein:hover {
    border-color: var(--violet-fonce);
    background: var(--violet-fonce);
}

.dt-btn.is-done {
    border-color: var(--miel);
    background: var(--miel-clair);
}

.dt-pages {
    display: grid;
    gap: 1.2rem;
    justify-items: center;
}

.dt-page {
    position: relative;
    display: block;
    width: 100%;
    max-width: 760px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--creme);
    box-shadow: 0 1px 2px rgba(46, 29, 107, 0.08), 0 8px 28px rgba(46, 29, 107, 0.12);
}

.dt-page img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1100 / 1555;
}

.dt-page-zoom {
    position: absolute;
    right: 0.7rem;
    bottom: 0.7rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background: rgba(46, 29, 107, 0.82);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 800;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.dt-page:hover .dt-page-zoom,
.dt-page:focus-visible .dt-page-zoom {
    opacity: 1;
}

@media (hover: none) {
    .dt-page-zoom {
        opacity: 1;
    }
}

.dt-reader-frame {
    display: block;
    width: 100%;
    height: 78vh;
    min-height: 600px;
    max-height: 1100px;
    border: 1px solid var(--filet);
    border-radius: 14px;
    background: var(--creme);
}

/* ---------- Archive ---------- */
.dt-archive {
    padding: 56px 20px 40px;
}

.dt-section-title-accent {
    color: var(--miel-fonce);
}

.dt-section-subtitle {
    text-align: center;
    color: var(--encre-douce);
    margin: -1.4rem auto 2.4rem;
}

.dt-archive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 1.4rem 1.1rem;
    max-width: 980px;
    margin: 0 auto;
}

.dt-archive-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    color: inherit;
    text-decoration: none;
    text-align: center;
    border-radius: 12px;
}

.dt-archive-cover {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 400 / 566;
    margin-bottom: 0.55rem;
    border-radius: 10px;
    overflow: hidden;
    background: var(--creme);
    color: var(--violet);
    font-size: 2.4rem;
    box-shadow: 0 1px 2px rgba(46, 29, 107, 0.08), 0 6px 18px rgba(46, 29, 107, 0.1);
    outline: 3px solid transparent;
    outline-offset: 3px;
    transition: transform 0.25s var(--sortie), box-shadow 0.25s ease, outline-color 0.2s ease;
}

.dt-archive-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.dt-archive-card:hover .dt-archive-cover {
    transform: translateY(-4px);
    box-shadow: 0 2px 4px rgba(46, 29, 107, 0.1), 0 14px 30px rgba(46, 29, 107, 0.16);
}

.dt-archive-card.is-open .dt-archive-cover {
    outline-color: var(--violet);
}

.dt-archive-card.is-current .dt-archive-cover {
    outline-color: var(--miel);
}

.dt-archive-current-pill {
    position: absolute;
    top: 0.5rem;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    background: var(--miel);
    color: var(--encre);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

.dt-archive-he {
    font-family: "Frank Ruhl Libre", "David", serif;
    font-weight: 700;
    font-synthesis: none;
    direction: rtl;
    font-size: 1.45rem;
    line-height: 1.15;
    color: var(--violet-nuit);
}

.dt-archive-empty {
    text-align: center;
    color: var(--encre-douce);
    padding: 2rem;
}

/* ---------- Newsletter ---------- */
.dt-newsletter {
    padding: 24px 20px 80px;
}

.dt-newsletter-inner {
    max-width: 640px;
    margin: 0 auto;
    padding: 2.2rem 2rem;
    text-align: center;
    background: #fff;
    border: 2px solid var(--miel);
    border-radius: 18px;
}

.dt-newsletter-divider {
    display: inline-grid;
    place-items: center;
    color: var(--miel-fonce);
    font-size: 2.6rem;
    line-height: 0;
    margin-bottom: 0.8rem;
}

.dt-newsletter-title {
    font-family: var(--titre);
    font-weight: 400;
    font-size: clamp(1.4rem, 2.8vw, 1.8rem);
    line-height: 1.2;
    color: var(--violet-nuit);
    margin-bottom: 0.5rem;
}

.dt-newsletter-sub {
    color: var(--encre-douce);
    margin-bottom: 1.3rem;
}

.dt-newsletter-form {
    display: flex;
    gap: 0.5rem;
    max-width: 480px;
    margin: 0 auto;
}

.dt-newsletter-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.dt-newsletter-input {
    flex: 1;
    min-width: 0;
    padding: 0.85rem 1.1rem;
    font: inherit;
    color: var(--encre);
    background: #fff;
    border: 2px solid var(--filet);
    border-radius: 10px;
}

.dt-newsletter-input:focus {
    outline: none;
    border-color: var(--violet);
}

.dt-newsletter-btn {
    padding: 0.85rem 1.5rem;
    font: inherit;
    font-weight: 800;
    color: #fff;
    background: var(--violet);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.2s ease;
}

.dt-newsletter-btn:hover:not(:disabled) {
    background: var(--violet-fonce);
}

.dt-newsletter-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.dt-newsletter-msg {
    margin-top: 1rem;
    min-height: 1.5rem;
    font-weight: 700;
}

.dt-newsletter-msg.error {
    color: #B42318;
}

.dt-newsletter-msg.success {
    color: var(--miel-fonce);
}

.dt-newsletter-honeypot {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    border: 0;
    padding: 0;
}

@media (max-width: 768px) {
    .dt-hero {
        padding: 96px 20px 60px;
    }

    .dt-feature {
        padding: 24px 12px 16px;
        scroll-margin-top: 64px;
    }

    .dt-reader-frame {
        height: 65vh;
        min-height: 460px;
    }

    .dt-card {
        padding: 1rem 0.8rem;
        border-radius: 16px;
    }

    .dt-card-header {
        flex-direction: column;
        align-items: stretch;
    }

    .dt-card-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .dt-card-actions .dt-btn {
        justify-content: center;
    }

    .dt-card-actions .dt-btn-plein {
        grid-column: 1 / -1;
    }

}

@media (max-width: 520px) {
    .dt-archive-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dt-newsletter-inner {
        padding: 1.8rem 1.2rem;
    }

    .dt-newsletter-form {
        flex-direction: column;
    }
}

/* ================= Guide (guide.html) ================= */
.guide-phones {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.9rem;
    margin-top: 1.8rem;
}

.guide-phones .phone-btn {
    width: auto;
    min-width: 250px;
    max-width: none;
}

.guide-phones .phone-info .number {
    font-size: 1.4rem;
}

.guide-tabs {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 1.6rem 20px 0.4rem;
    background: var(--creme-claire);
    scroll-margin-top: 60px;
}

.guide-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.3rem;
    font: inherit;
    font-weight: 800;
    color: var(--violet-nuit);
    background: #fff;
    border: 1px solid var(--filet);
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.guide-tab .picto {
    font-size: 1.25rem;
}

.guide-tab:hover {
    border-color: var(--violet);
}

.guide-tab.active {
    background: var(--violet);
    border-color: var(--violet);
    color: #fff;
}

.guide-main {
    background: var(--creme-claire);
    padding: 2.4rem 20px 80px;
}

.guide-panel {
    display: none;
    max-width: 860px;
    margin: 0 auto;
}

.guide-panel.active {
    display: block;
}

.guide-intro {
    text-align: center;
    color: var(--encre-douce);
    max-width: 40em;
    margin: -1.4rem auto 2rem;
}

.touche {
    display: grid;
    place-items: center;
    flex: none;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--violet);
    color: #fff;
    font-size: 1.6rem;
    font-weight: 800;
    box-shadow: 0 4px 0 var(--violet-nuit);
}

.touche-mini {
    display: inline-grid;
    place-items: center;
    min-width: 1.7em;
    height: 1.7em;
    padding: 0 0.3em;
    border-radius: 6px;
    background: var(--violet);
    color: #fff;
    font-weight: 800;
    font-size: 0.9em;
    vertical-align: 0.05em;
}

.menu-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
}

.menu-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.2rem;
    background: #fff;
    border: 1px solid var(--filet);
    border-radius: 16px;
}

.menu-card h3 {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--violet-nuit);
}

.menu-card p {
    color: var(--encre-douce);
    font-size: 0.98rem;
    line-height: 1.4;
}

.menu-card-miel {
    background: var(--creme);
    border-color: var(--miel);
}

.menu-card-miel .touche {
    background: var(--miel);
    color: var(--encre);
    box-shadow: 0 4px 0 var(--miel-fonce);
}

.menu-card-large {
    grid-column: 1 / -1;
}

.menu-badge {
    display: inline-block;
    margin-top: 0.4rem;
    padding: 0.1rem 0.6rem;
    border-radius: 999px;
    background: var(--miel-clair);
    color: var(--miel-fonce);
    font-size: 0.82rem;
    font-weight: 800;
}

.guide-astuce {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    margin-top: 1.6rem;
    padding: 1.1rem 1.3rem;
    background: var(--violet-voile);
    border-radius: 14px;
    line-height: 1.5;
}

.guide-astuce > .picto {
    font-size: 1.6rem;
    color: var(--violet);
    margin-top: 0.1rem;
}

.guide-astuce strong {
    color: var(--violet-nuit);
}

.etapes {
    list-style: none;
    display: grid;
    gap: 0.8rem;
    counter-reset: none;
}

.etapes li {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.9rem 1.2rem;
    background: #fff;
    border: 1px solid var(--filet);
    border-radius: 16px;
}

.etapes h3 {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--violet-nuit);
}

.etapes p {
    color: var(--encre-douce);
}

.etapes .touche {
    width: 44px;
    height: 44px;
    font-size: 1.3rem;
}

.etapes .etape-fin {
    background: var(--creme);
    border-color: var(--miel);
}

.etape-fin .touche {
    background: var(--miel);
    color: var(--encre);
    box-shadow: 0 4px 0 var(--miel-fonce);
}

.guide-encart {
    margin-top: 1.6rem;
    padding: 1.2rem 1.4rem;
    text-align: center;
    background: #fff;
    border: 2px solid var(--miel);
    border-radius: 16px;
}

.guide-encart h3 {
    font-family: var(--titre);
    font-weight: 400;
    font-size: 1.25rem;
    color: var(--violet-nuit);
    margin-bottom: 0.4rem;
}

.pave {
    display: grid;
    grid-template-columns: repeat(3, 92px);
    gap: 0.8rem;
    justify-content: center;
    padding: 1.6rem;
    width: fit-content;
    margin: 0 auto;
    background: var(--violet-nuit);
    border-radius: 28px;
}

.pave-touche {
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 76px;
    border-radius: 16px;
    font-size: 1.9rem;
    font-weight: 800;
    line-height: 1;
}

.pave-touche span {
    margin-top: 0.3rem;
    font-size: 0.8rem;
    font-weight: 700;
}

.t-nav {
    background: var(--violet);
    color: #fff;
}

.t-temps {
    background: var(--violet-voile);
    color: var(--violet-nuit);
}

.t-pause {
    background: var(--miel);
    color: var(--encre);
}

.t-sortie {
    background: #F4D5D2;
    color: #8C1D18;
}

.t-vide {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.35);
}

.pave-legende {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem 1.4rem;
    margin-top: 1.4rem;
    font-weight: 700;
}

.pave-legende li {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.pastille {
    width: 16px;
    height: 16px;
    border-radius: 5px;
    box-shadow: inset 0 0 0 1px rgba(43, 34, 51, 0.15);
}

.faq {
    display: grid;
    gap: 0.8rem;
}

.faq-item {
    padding: 1.1rem 1.3rem;
    background: #fff;
    border: 1px solid var(--filet);
    border-radius: 16px;
}

.faq-item h3 {
    font-family: var(--titre);
    font-weight: 400;
    font-size: 1.2rem;
    line-height: 1.25;
    color: var(--violet-nuit);
    margin-bottom: 0.35rem;
}

.faq-item strong {
    color: var(--violet-nuit);
}

@media (max-width: 640px) {
    .menu-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .guide-tab {
        padding: 0.6rem 0.9rem;
    }

    .pave {
        grid-template-columns: repeat(3, 78px);
        padding: 1.1rem;
    }

    .pave-touche {
        height: 66px;
    }
}

/* ================= Zoom (zoom/index.php, gabarit reutilise a chaque evenement) ================= */
.zoom-tag {
    display: inline-block;
    margin-bottom: 0.6rem;
    padding: 0.25rem 0.9rem;
    border-radius: 999px;
    background: var(--miel);
    color: var(--encre);
    font-weight: 800;
    letter-spacing: 0.04em;
}

.zoom-date {
    margin-top: 0.5rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--miel-clair);
}

.zoom-statut {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.9rem;
    padding: 0.4rem 1rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.zoom-statut:empty {
    display: none;
}

.zoom-direct {
    background: #A3201A;
}

.zoom-point {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--miel-clair);
}

.join-section {
    background: var(--creme-claire);
    padding: 40px 20px 24px;
}

.zoom-affiche {
    max-width: 460px;
    margin: 0 auto 28px;
}

.zoom-affiche img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(38, 68, 72, 0.22);
}

.join-card {
    max-width: 640px;
    margin: 0 auto;
    padding: 2rem;
    background: #fff;
    border: 1px solid var(--filet);
    border-radius: 20px;
    text-align: center;
}

.btn-join {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    padding: 1rem 1.8rem;
    border-radius: 14px;
    background: var(--violet);
    color: #fff;
    font-size: 1.2rem;
    font-weight: 800;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.btn-join:hover {
    background: var(--violet-fonce);
}

.btn-join .btn-icon {
    font-size: 1.5rem;
    line-height: 0;
}

.btn-join-attente {
    background: #CFC7D6;
    color: var(--encre-douce);
    cursor: not-allowed;
    pointer-events: none;
}

.btn-replay {
    margin-top: 1rem;
    background: var(--miel);
    color: var(--encre);
}

.btn-replay:hover {
    background: #FFBC1F;
}

.btn-replay .picto {
    fill: currentColor;
    stroke: none;
}

.coming-soon-icon {
    display: inline-grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin-bottom: 0.8rem;
    border-radius: 50%;
    background: var(--miel-clair);
    color: var(--violet-nuit);
    font-size: 2rem;
}

.coming-soon-title {
    font-family: var(--titre);
    font-weight: 400;
    font-size: 1.6rem;
    color: var(--violet-nuit);
    margin-bottom: 0.4rem;
}

.coming-soon-text {
    color: var(--encre-douce);
    line-height: 1.55;
}

.coming-soon-note {
    margin-top: 0.7rem;
}

.section-divider {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin: 1.8rem 0 1.4rem;
    color: var(--encre-douce);
    font-weight: 700;
}

.section-divider::before,
.section-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--filet);
}

.join-phone .phone-btn,
.phone-callout .phone-btn {
    margin: 0 auto;
}

.phone-eyebrow,
.dial-steps-title {
    font-weight: 800;
    color: var(--violet-nuit);
    margin-bottom: 0.7rem;
}

.dial-steps {
    display: grid;
    gap: 0.7rem;
    margin-top: 1.6rem;
    text-align: left;
}

.dial-steps-title {
    text-align: center;
}

.zoom-etape {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.8rem 1rem;
    background: var(--creme-claire);
    border: 1px solid var(--filet);
    border-radius: 14px;
    line-height: 1.45;
}

.zoom-etape .touche {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
}

.zoom-etape code {
    font-family: var(--texte);
    font-weight: 800;
    padding: 0.1rem 0.45rem;
    border-radius: 6px;
    background: var(--miel-clair);
    color: var(--encre);
    white-space: nowrap;
}

.international-dial-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 1.3rem;
    font-weight: 700;
    color: var(--violet);
}

.events-teaser-section {
    background: var(--creme-claire);
    padding: 16px 20px 72px;
}

.events-teaser {
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: 640px;
    margin: 0 auto;
    padding: 1.1rem 1.3rem;
    background: #fff;
    border: 1px solid var(--filet);
    border-radius: 16px;
    color: var(--encre);
    text-decoration: none;
    transition: border-color 0.2s ease;
}

.events-teaser:hover {
    border-color: var(--miel);
}

.events-teaser-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--violet-voile);
    color: var(--violet);
    font-size: 1.5rem;
}

.events-teaser-text {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.events-teaser-title {
    font-weight: 800;
    color: var(--violet-nuit);
}

.events-teaser-sub {
    color: var(--encre-douce);
    font-size: 0.95rem;
}

.events-teaser-arrow {
    color: var(--miel-fonce);
    font-size: 1.3rem;
}

@media (max-width: 520px) {
    .join-card {
        padding: 1.4rem 1.1rem;
    }

    .btn-join {
        width: 100%;
        justify-content: center;
    }
}

/* ================= Poster (poster.html) ================= */
.poster-hero {
    padding-bottom: 80px;
}

.poster-cadre {
    max-width: 640px;
    margin: 2rem auto 0;
    padding: 10px;
    background: var(--miel);
    border-radius: 18px;
}

.poster-cadre img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
}

.poster-main {
    background: var(--creme-claire);
    padding: 8px 20px 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.4rem;
}

.poster-telecharger {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.95rem 1.8rem;
    border-radius: 14px;
    background: var(--violet);
    color: #fff;
    font-size: 1.15rem;
    font-weight: 800;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.poster-telecharger:hover {
    background: var(--violet-fonce);
}

.poster-carte {
    width: 100%;
    max-width: 640px;
    padding: 1.8rem;
    background: #fff;
    border: 1px solid var(--filet);
    border-radius: 20px;
}

.poster-titre {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1.2rem;
    font-family: var(--titre);
    font-weight: 400;
    font-size: 1.5rem;
    color: var(--violet-nuit);
}

.poster-titre .picto {
    color: var(--miel-fonce);
}

.poster-carte .etapes li {
    padding: 0.7rem 1rem;
}

.poster-carte .etapes p {
    color: var(--encre);
}

.poster-champs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
}

.champ {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.champ-large {
    grid-column: 1 / -1;
}

.champ label {
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--violet-nuit);
}

.champ input,
.champ textarea {
    width: 100%;
    padding: 0.75rem 0.9rem;
    font: inherit;
    color: var(--encre);
    background: #fff;
    border: 2px solid var(--filet);
    border-radius: 10px;
    resize: vertical;
}

.champ input:focus,
.champ textarea:focus {
    outline: none;
    border-color: var(--violet);
}

.depot {
    margin-top: 1.1rem;
    padding: 1.4rem;
    text-align: center;
    background: var(--creme-claire);
    border: 2px dashed var(--miel);
    border-radius: 14px;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.depot:hover,
.depot.dragover {
    background: var(--creme);
    border-color: var(--violet);
}

.depot.has-file {
    border-style: solid;
}

.depot-icone {
    display: inline-grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--miel-clair);
    color: var(--violet-nuit);
    font-size: 1.6rem;
}

.depot-texte {
    margin-top: 0.4rem;
    font-weight: 800;
    color: var(--violet);
    word-break: break-word;
}

.depot-aide {
    font-size: 0.9rem;
    color: var(--encre-douce);
}

.depot-apercu {
    display: block;
    max-width: 100%;
    max-height: 220px;
    margin: 0 auto;
    border-radius: 10px;
}

.poster-envoyer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    margin-top: 1.1rem;
    padding: 0.95rem;
    font: inherit;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--encre);
    background: var(--miel);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.poster-envoyer:hover:not(:disabled) {
    background: #FFBC1F;
}

.poster-envoyer:disabled {
    background: #EFE6D2;
    color: var(--encre-douce);
    cursor: not-allowed;
}

.toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 2000;
    max-width: calc(100% - 32px);
    padding: 0.9rem 1.4rem;
    border-radius: 12px;
    font-weight: 800;
    transform: translate(-50%, 140%);
    transition: transform 0.35s var(--sortie);
}

.toast.show {
    transform: translate(-50%, 0);
}

.toast.success {
    background: var(--violet-nuit);
    color: #fff;
}

.toast.error {
    background: #A3201A;
    color: #fff;
}

@media (max-width: 520px) {
    .poster-champs {
        grid-template-columns: minmax(0, 1fr);
    }

    .poster-carte {
        padding: 1.3rem 1.1rem;
    }
}

/* ================= Parcours (parcours.html) ================= */
.frise {
    list-style: none;
    position: relative;
    max-width: 760px;
    margin: 0 auto;
    padding-left: 44px;
}

.frise::before {
    content: "";
    position: absolute;
    top: 12px;
    bottom: 12px;
    left: 13px;
    width: 4px;
    border-radius: 2px;
    background: var(--miel-clair);
}

.frise-etape {
    position: relative;
    padding: 1.3rem 1.5rem;
    background: #fff;
    border: 1px solid var(--filet);
    border-radius: 16px;
}

.frise-etape + .frise-etape {
    margin-top: 1rem;
}

.frise-etape::before {
    content: "";
    position: absolute;
    top: 1.45rem;
    left: -40px;
    width: 22px;
    height: 25px;
    background: var(--miel);
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

.frise-saison {
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--miel-fonce);
}

.frise-titre {
    font-family: var(--titre);
    font-weight: 400;
    font-size: 1.45rem;
    line-height: 1.2;
    color: var(--violet-nuit);
    margin: 0.2rem 0 0.4rem;
}

.frise-etape > p:not(.frise-saison) {
    line-height: 1.6;
}

.frise-fort {
    background: var(--violet);
    background-image: var(--alveoles);
    border-color: var(--violet);
    color: #fff;
}

.frise-fort::before {
    background: var(--violet);
}

.frise-fort .frise-saison {
    color: var(--miel-clair);
}

.frise-fort .frise-titre {
    color: #fff;
}

/* Naissance : le logo de Metikout dans la carte */
.frise-logo {
    float: right;
    width: 130px;
    height: auto;
    margin: 0 0 0.6rem 1rem;
}

.frise-naissance::after {
    content: "";
    display: block;
    clear: both;
}

.frise-etape > p + p {
    margin-top: 0.6rem;
}

/* Visites d'ecole : etapes plus legeres que les temps forts */
.frise-visite {
    padding: 0.9rem 1.3rem;
    background: var(--creme-claire);
}

.frise-visite::before {
    top: 1.1rem;
    left: -36px;
    width: 14px;
    height: 16px;
    background: var(--violet);
}

.frise-visite .frise-titre {
    font-size: 1.15rem;
}

@media (max-width: 520px) {
    .frise-logo {
        width: 96px;
    }

    .frise-visite::before {
        left: -30px;
    }
}

.frise-liens {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.6rem;
}

.frise-fort .frise-lien {
    background: var(--miel);
    color: var(--encre);
}

.frise-fort .frise-lien:hover {
    background: var(--miel-clair);
}

.frise-lien .picto-plein {
    fill: currentColor;
    stroke: none;
}

/* Lien sous une etape (feuillets, centre aere) */
.frise-lien {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.9rem;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    background: var(--violet);
    color: #fff;
    font-weight: 800;
    font-size: 0.92rem;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.frise-lien:hover {
    background: var(--violet-fonce);
}

.frise-lien:focus-visible {
    outline: 3px solid var(--miel);
    outline-offset: 3px;
}

.frise-banniere {
    display: block;
    width: 100%;
    height: auto;
    margin-top: 1rem;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(46, 29, 107, 0.12), 0 6px 16px rgba(46, 29, 107, 0.14);
}

/* 5786 en chiffres */
.frise-bilan {
    max-width: 760px;
    margin: 3rem auto 0;
    padding: 2rem 1.6rem 2.2rem;
    border-radius: 20px;
    background-color: var(--violet);
    background-image: var(--alveoles);
    color: #fff;
    text-align: center;
}

.frise-bilan-titre {
    font-family: var(--titre);
    font-weight: 400;
    font-size: clamp(1.5rem, 3vw, 2rem);
    margin-bottom: 1.4rem;
}

.frise-bilan-titre span {
    font-family: "Frank Ruhl Libre", "David", serif;
    font-weight: 700;
    font-synthesis: none;
    color: var(--miel-clair);
}

.frise-bilan-chiffres {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.2rem 1rem;
    margin: 0;
    padding: 0;
}

.frise-bilan-chiffres li {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.frise-bilan-chiffres strong {
    font-size: clamp(1.6rem, 3.4vw, 2.2rem);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--miel-clair);
    white-space: nowrap;
}

.frise-bilan-chiffres span {
    font-weight: 700;
    color: rgba(255, 255, 255, 0.88);
}

@media (max-width: 520px) {
    .frise-bilan-chiffres {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Affiches d'annonce sous chaque temps fort (parcours.html) */
.frise-annonces {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    margin-top: 1.1rem;
}

.frise-annonce {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    width: 150px;
    color: inherit;
    text-decoration: none;
}

.frise-annonce img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(46, 29, 107, 0.12), 0 6px 16px rgba(46, 29, 107, 0.16);
    transition: transform 0.25s var(--sortie), box-shadow 0.25s ease;
}

.frise-annonce:hover img {
    transform: translateY(-3px) rotate(-1deg);
    box-shadow: 0 2px 4px rgba(46, 29, 107, 0.14), 0 12px 26px rgba(46, 29, 107, 0.22);
}

.frise-annonce:focus-visible {
    outline: 3px solid var(--miel);
    outline-offset: 4px;
    border-radius: 8px;
}

.frise-annonce-legende {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--miel-fonce);
}

.frise-fort .frise-annonce-legende {
    color: var(--miel-clair);
}

.annonce-dialog {
    max-width: min(92vw, 620px);
    max-height: 94vh;
    margin: auto;
    padding: 0.8rem;
    border: none;
    border-radius: 14px;
    background: var(--creme-claire);
    overflow: auto;
}

.annonce-dialog::backdrop {
    background: rgba(46, 29, 107, 0.72);
}

.annonce-dialog img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.annonce-dialog-legende {
    margin: 0.6rem 2.6rem 0.1rem 0.2rem;
    font-weight: 700;
    color: var(--violet-nuit);
}

.annonce-fermer {
    position: absolute;
    right: 0.4rem;
    bottom: 0.25rem;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: var(--violet);
    color: #fff;
    font-size: 1.7rem;
    line-height: 1;
    cursor: pointer;
}

/* Petit ecran : bandeau qui defile au doigt plutot que des miniatures ecrasees (71 px a 320 px) */
@media (max-width: 520px) {
    .frise-annonces {
        flex-wrap: nowrap;
        gap: 0.7rem;
        margin-right: -1.1rem;
        padding: 0 1.1rem 0.5rem 0;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        overscroll-behavior-x: contain;
    }

    .frise-annonce {
        flex: none;
        width: 104px; /* 2 affiches + le bord de la 3e : on voit qu'on peut glisser */
        scroll-snap-align: start;
    }
}

.frise-fin {
    max-width: 1100px;
    margin: 4rem auto 0;
    text-align: center;
}

.frise-fin > p {
    margin: -1.4rem auto 1.8rem;
    color: var(--encre-douce);
    font-size: 1.1rem;
}

.phone-buttons-ligne {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

.phone-buttons-ligne .phone-btn {
    width: auto;
    min-width: 260px;
}

@media (max-width: 520px) {
    .frise {
        padding-left: 34px;
    }

    .frise::before {
        left: 9px;
    }

    .frise-etape {
        padding: 1.1rem 1.1rem;
    }

    .frise-etape::before {
        left: -32px;
        width: 18px;
        height: 21px;
    }
}

/* ---------- Tablette ---------- */
@media (max-width: 1100px) {
    .nav a {
        padding: 0.5rem 0.7rem;
        font-size: 0.95rem;
    }

    .logo-image {
        width: 160px;
    }
}

@media (max-width: 960px) {
    .hero-columns {
        grid-template-columns: minmax(0, 1fr);
        gap: 2rem;
    }

    .hero-right {
        order: 2;
    }

    .discover-grid {
        grid-template-columns: 1fr;
        max-width: 560px;
    }
}

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
    .header {
        display: none;
    }

    .mobile-logo {
        display: block;
    }

    .hero {
        padding: 88px 20px 40px;
    }

    .hero-intro {
        font-size: 1.15rem;
    }

    .hero-topics {
        font-size: 1.3rem;
    }

    .hero-subtitle {
        font-size: 1.05rem;
    }

    .phone-info .number {
        font-size: 1.45rem;
    }

    .listen-section,
    .downloads-section {
        padding: 56px 20px;
    }

    .audio-player {
        padding: 1.4rem 1.2rem;
    }

    .downloads-grid {
        grid-template-columns: minmax(0, 360px);
    }

    .download-card-wide {
        flex-direction: column;
        text-align: center;
    }

    .categories-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .event-banner {
        font-size: 0.85rem;
        padding: 0 10px;
    }

    .event-banner-arrow {
        display: none;
    }

    body.has-event-banner .hero {
        padding-top: 132px;
    }
}

@media (max-width: 520px) {
    .newsletter-card {
        padding: 1.8rem 1.2rem;
    }

    .newsletter-input-group {
        flex-direction: column;
    }

    .newsletter-btn {
        width: 100%;
    }
}

@media (max-width: 380px) {
    .hero {
        padding-left: 14px;
        padding-right: 14px;
    }

    .phone-btn {
        --coin: 14px;
        gap: 0.7rem;
        padding: 0.7rem 1.1rem;
    }

    .phone-info .number {
        font-size: 1.25rem;
    }

    .contact-item {
        --coin: 12px;
        gap: 0.5rem;
        padding-left: 0.9rem;
        font-size: 0.95rem;
    }

    .copy-email-btn {
        width: 38px;
        height: 38px;
        margin-right: 0.4rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .hero-content {
        opacity: 1;
        transform: none;
    }
}

/* ============================================================
   Page Evenements - groupes Zoom / Rassemblements (20/09/2026)
   Bloc SCOPE : ne surcharge que les cartes placees dans
   .events-grille. Retirable d'un seul tenant.
   ============================================================ */

.events-groupe {
    margin-bottom: 3.6rem;
}

.events-groupe-titre {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-family: var(--titre);
    font-weight: 400;
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    color: var(--violet-nuit);
    margin: 0 0 1.4rem;
}

.events-groupe-titre .picto {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--miel);
    flex: none;
}

.events-groupe-intro {
    margin: 0 0 1.5rem;
    color: var(--encre-douce);
    font-size: 1rem;
}

.events-grille {
    display: grid;
    max-width: 1060px;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.5rem;
    align-items: start;
}

/* La carte redevient une colonne simple : affiche en haut, texte dessous */
.events-grille .event-card,
.events-grille .event-card:nth-of-type(even) {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    grid-template-areas: none;
    gap: 0;
    padding: 0;
    overflow: hidden;
}

.event-affiche {
    position: relative;
    display: block;
    aspect-ratio: 36 / 51;
    overflow: hidden;
    background: var(--creme);
    border-bottom: 1px solid var(--filet);
}

.event-affiche img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
    transition: transform 0.35s ease;
}

.event-affiche:hover img,
.event-affiche:focus-visible img {
    transform: scale(1.03);
}

.event-affiche:focus-visible {
    outline: 3px solid var(--violet);
    outline-offset: 2px;
}

.event-corps {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.15rem 1.25rem 1.3rem;
    flex: 1;
}

.events-grille .event-title {
    font-size: clamp(1rem, 1.6vw, 1.14rem);
    line-height: 1.25;
    margin: 0;
}

.events-grille .event-badge {
    align-self: flex-start;
    margin: 0;
    white-space: normal;
    line-height: 1.35;
}

.events-grille .event-description {
    margin: 0;
    font-size: 0.97rem;
    line-height: 1.5;
    color: var(--encre-douce);
}

.event-attente {
    margin: 0;
    font-size: 0.9rem;
    font-style: italic;
    color: var(--miel-fonce);
}

/* Les boutons se collent en bas : toutes les cartes s'alignent */
.events-grille .event-buttons-row {
    padding-top: 0.9rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.events-grille .event-btn-col {
    flex: 1 1 100%;
    min-width: 0;
}

.events-grille .event-buttons-row a {
    width: 100%;
    justify-content: center;
    font-size: 0.78rem;
    padding: 0.42rem 0.6rem;
    white-space: normal;
    text-align: center;
    line-height: 1.25;
}

@media (max-width: 640px) {
    .events-grille {
        grid-template-columns: 1fr;
    }
}

/* Affiche au format PAYSAGE (banniere) : MEME cadre que les autres cartes
   (GO Yossef Haim 20/09), la banniere centree dedans et entiere. */
.event-affiche--paysage {
    background: var(--creme-claire);
    display: grid;
    place-items: center;
}

.event-affiche--paysage .event-affiche-zoom {
    height: auto;
    padding: 0 0.5rem;
}

.event-affiche--paysage img {
    height: auto;
    object-fit: contain;
}


/* ---- Affiche : bouton d'agrandissement + lecture video en surimpression ---- */

.event-affiche-zoom {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
    font: inherit;
}

.event-affiche-zoom img {
    display: block;
}

/* Toute l'affiche lance la video : le rond n'est que le repere visuel.
   L'agrandissement de l'affiche passe par la pastille « Affiche » (coin bas droit). */
.event-play {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #fff;
}

.event-play .picto {
    box-sizing: border-box;
    width: 3.4rem;
    height: 3.4rem;
    padding: 0.95rem 0.875rem 0.95rem 1.025rem;
    border-radius: 50%;
    background: rgba(46, 29, 107, 0.82);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
    transition: transform 0.18s ease, background 0.18s ease;
}

.event-play:hover .picto,
.event-play:focus-visible .picto {
    background: var(--violet);
    transform: scale(1.08);
}

.event-play:focus-visible {
    outline: 3px solid var(--miel);
    outline-offset: -3px;
}

.event-affiche--paysage .event-play .picto {
    width: 2.6rem;
    height: 2.6rem;
    padding: 0.7rem 0.64rem 0.7rem 0.76rem;
}

.event-affiche-chip {
    position: absolute;
    right: 0.5rem;
    bottom: 0.5rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    width: auto;
    height: auto;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    color: var(--violet);
    font-size: 0.72rem;
    font-weight: 800;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.event-affiche-chip .picto {
    width: 0.95rem;
    height: 0.95rem;
}

.event-affiche-chip:hover,
.event-affiche-chip:focus-visible {
    background: #fff;
    outline: 2px solid var(--violet);
}

/* ---- Modal d'agrandissement ---- */

body.modal-ouvert {
    overflow: hidden;
}

.affiche-modal {
    position: fixed;
    inset: 0;
    z-index: 999;
    display: grid;
    place-items: center;
    padding: 2rem 1rem;
    background: rgba(24, 14, 56, 0.88);
}

.affiche-modal[hidden] {
    display: none;
}

.affiche-modal-figure {
    margin: 0;
    max-width: min(92vw, 640px);
    text-align: center;
}

.affiche-modal-figure img {
    display: block;
    max-width: 100%;
    max-height: 78vh;
    margin: 0 auto;
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}

.affiche-modal-figure figcaption {
    margin-top: 0.8rem;
    color: #F6EFFF;
    font-size: 0.92rem;
}

.affiche-modal-fermer {
    position: absolute;
    top: 1rem;
    right: 1.2rem;
    width: 2.6rem;
    height: 2.6rem;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
}

.affiche-modal-fermer:hover,
.affiche-modal-fermer:focus-visible {
    background: rgba(255, 255, 255, 0.28);
}

/* Le lien partage Raincy reste utile meme si JavaScript est indisponible. */
#raincy87 {
    scroll-margin-top: 6rem;
}

.video-modal {
    width: min(960px, calc(100vw - 2rem));
    max-width: none;
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: 18px;
    overflow: auto;
    background: var(--creme-claire);
    color: var(--encre);
    box-shadow: 0 24px 80px rgba(15, 8, 39, 0.45);
}

.video-modal::backdrop {
    background: rgba(24, 14, 56, 0.88);
}

.video-modal-entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.2rem;
}

.video-modal-entete h2 {
    font-family: var(--titre);
    font-size: clamp(1.1rem, 2.5vw, 1.55rem);
    line-height: 1.3;
    color: var(--violet-nuit);
}

.video-modal-fermer {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 0;
    border-radius: 50%;
    background: var(--violet-voile);
    color: var(--violet-nuit);
    font: inherit;
    font-size: 1.7rem;
    line-height: 1;
    cursor: pointer;
}

.video-modal-fermer:hover,
.video-modal-fermer:focus-visible {
    background: var(--miel-clair);
}

.video-modal-lecteur {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--violet-nuit);
}

.video-modal-lecteur iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.video-modal-youtube {
    display: block;
    width: fit-content;
    margin: 0.7rem 1.2rem 0.9rem auto;
    color: var(--violet-fonce);
    font-size: 0.9rem;
    font-weight: 700;
    text-underline-offset: 3px;
}

.video-modal-youtube:hover,
.video-modal-youtube:focus-visible {
    color: var(--miel-fonce);
}

@media (max-width: 640px) {
    .video-modal {
        width: calc(100vw - 1rem);
    }

    .video-modal-entete {
        padding: 0.75rem 0.85rem;
    }

    .video-modal-youtube {
        margin-right: 0.85rem;
    }
}

/* Le titre d'une carte mene a la video (GO Yossef Haim 20/09) */
.events-grille .event-title a {
    color: inherit;
    text-decoration: none;
}

.events-grille .event-title a:hover,
.events-grille .event-title a:focus-visible {
    color: var(--violet);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Lieu d'un rassemblement */
.event-lieu {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--miel-fonce);
}

.event-lieu .picto {
    width: 0.95rem;
    height: 0.95rem;
    flex: none;
}

/* ============================================================
   Appel "Recevoir METIKOUT chez vous"
   La page s'ouvre sur le hero (violet + alveoles + feston en bas) ;
   elle se REFERME ici sur le meme geste, feston en haut. Le contact
   reprend la plaque miel de .phone-btn : meme silhouette que le logo.
   ============================================================ */

.appel {
    position: relative;
    max-width: 700px;
    margin: 0 auto 4rem;
    padding: 2.6rem 2rem 2.8rem;
    background-color: var(--violet);
    background-image: var(--alveoles);
    border-radius: 26px;
    box-shadow: 0 14px 38px rgba(46, 29, 107, 0.26);
    text-align: center;
    isolation: isolate;
    overflow: hidden;
}

.appel-contenu {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.1rem;
}

.appel-titre {
    font-family: var(--titre);
    font-weight: 400;
    font-size: clamp(1.45rem, 2.7vw, 2rem);
    line-height: 1.25;
    color: var(--creme);
    margin: 0;
    text-wrap: balance;
}

/* l'ornement maison (losange miel) tient lieu de filet sous le titre */
.appel-titre::after {
    content: "";
    display: block;
    width: 120px;
    height: 16px;
    margin: 0.85rem auto 0;
    background: var(--ornement) no-repeat center / contain;
}

.appel-texte {
    max-width: 46ch;
    margin: 0;
    color: #E5DCF5;
    font-size: 1.02rem;
    line-height: 1.6;
    text-wrap: pretty;
}

/* La plaque miel : meme silhouette ondulee que le bouton telephone */
.appel-plaque {
    --coin: 18px;
    display: inline-flex;
    align-items: center;
    gap: 0.95rem;
    margin-top: 0.3rem;
    padding: 0.95rem 2.1rem;
    background: var(--miel);
    color: var(--encre);
    text-decoration: none;
    clip-path: polygon(var(--coin) 0, calc(100% - var(--coin)) 0, 100% 24%, 100% 76%, calc(100% - var(--coin)) 100%, var(--coin) 100%, 0 76%, 0 24%);
    border-radius: 6px;
    box-shadow: 0 10px 26px rgba(12, 6, 34, 0.42);
    transition: transform 0.25s var(--sortie), background-color 0.2s ease;
}

.appel-plaque-picto {
    width: 1.55rem;
    height: 1.55rem;
    flex: none;
    color: var(--miel-fonce);
}

.appel-plaque-texte {
    display: flex;
    align-items: center;
    line-height: 1.2;
}

.appel-plaque-quoi {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--miel-fonce);
}

.appel-plaque-mail {
    font-size: clamp(1.02rem, 2.1vw, 1.28rem);
    font-weight: 800;
}

.appel-plaque:hover {
    background: #FFBC1F;
    transform: translateY(-3px);
}

.appel-plaque:active {
    transform: translateY(0);
}

.appel-plaque:focus-visible {
    outline: 3px solid var(--miel-clair);
    outline-offset: 4px;
}

/* les surfaces que le navigateur dessine appartiennent aussi au site */
.appel ::selection {
    background: var(--miel);
    color: var(--encre);
}

@media (prefers-reduced-motion: reduce) {
    .appel-plaque {
        transition: background-color 0.2s ease;
    }
    .appel-plaque:hover {
        transform: none;
    }
}

@media (max-width: 560px) {
    .appel {
        margin: 1.6rem auto 2.6rem;
        padding: 2.2rem 1.3rem 2.4rem;
    }
    .appel-plaque {
        width: 100%;
        max-width: 340px;
        justify-content: center;
    }
}

/* Photos et Feuillet partagent la meme ligne (demi-largeur chacun).
   ⚠️ Cette regle doit rester APRES `.events-grille .event-btn-col`,
   qui impose flex-basis 100% a specificite egale. */
.events-grille .event-btn-col--demi {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
}

.events-grille .event-btn-col--demi a {
    padding-inline: 0.35rem;
}

/* Deux boutons qui tiennent TOUJOURS sur une ligne, meme dans une carte etroite */
.events-grille .event-btn-col--souple {
    flex: 1 1 auto;
}

.events-grille .event-btn-col--souple a {
    gap: 0.3rem;
    padding-inline: 0.45rem;
    font-size: 0.72rem;
    white-space: nowrap;
}

/* Clip / Video complete : une seule pastille en deux moities.
   Le clip (court) est l'action pleine, la video complete est en contour. */
.event-lecture {
    display: flex;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: inset 0 0 0 2px var(--violet);
}

.events-grille .event-lecture a {
    flex: 1 1 auto;
    width: auto;
    gap: 0.35rem;
    padding: 0.5rem 0.4rem;
    font-size: 0.74rem;
    white-space: nowrap;
    font-weight: 800;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--violet);
    transition: background-color 0.2s ease;
}

.events-grille .event-lecture .event-lecture-clip {
    background: var(--violet);
    color: #fff;
}

.event-lecture-clip:hover {
    background: var(--violet-fonce);
}

.event-lecture-complet:hover {
    background: var(--violet-voile);
}

.event-lecture a:focus-visible {
    outline: 3px solid var(--miel);
    outline-offset: -3px;
}

.event-lecture .picto {
    fill: currentColor;
    stroke: none;
    flex: none;
}

.event-lecture small {
    display: block;
    font-size: 0.9em;
    font-weight: 600;
    opacity: 0.8;
}

/* ============================================================
   Mouvement - entree des cartes, retour d'appui, survol tactile
   (05/10/2026). Bloc SCOPE, retirable d'un seul tenant.
   Reutilise --sortie. Entree au scroll = animation pilotee par
   le defilement (hors thread principal), amelioration progressive.
   fill-mode backwards : une fois l'entree finie l'animation lache
   la main, donc le translateY du :hover reste actif.
   ============================================================ */

@keyframes carte-entree {
    from {
        opacity: 0;
        transform: translateY(40px) scale(0.94);
    }
}

/* js/reveal.js pose .reveal-pret sur <html>, puis [data-in] a l'arrivee de chaque element.
   Sans JS ou en mouvement reduit : tout est visible, rien n'est cache. */
@keyframes titre-entree {
    from {
        opacity: 0;
        transform: translateY(22px) scale(0.96);
    }
}

@keyframes ligne-entree {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
}

@keyframes pop-entree {
    from {
        opacity: 0;
        transform: scale(0.8) rotate(-4deg);
    }
}

.reveal-pret :is(.download-card, .discover-card, .event-card, .menu-card, .vision-bloc, .contact-item,
    .newsletter-card, .phone-buttons-ligne, .faq-item, .section-title, .page-hero-title,
    .about-portrait):not([data-in]) {
    opacity: 0;
}

.reveal-pret :is(.download-card, .discover-card, .event-card, .menu-card, .vision-bloc, .contact-item,
    .newsletter-card, .phone-buttons-ligne)[data-in] {
    animation: carte-entree 0.55s var(--sortie) backwards;
    animation-delay: var(--delai, 0ms);
}

.reveal-pret :is(.section-title, .page-hero-title)[data-in] {
    animation: titre-entree 0.6s var(--sortie) backwards;
    animation-delay: var(--delai, 0ms);
}

.reveal-pret .faq-item[data-in] {
    animation: ligne-entree 0.45s var(--sortie) backwards;
    animation-delay: var(--delai, 0ms);
}

.reveal-pret .about-portrait[data-in] {
    animation: pop-entree 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

/* Retour d'appui : reponse immediate, relachement via la transition existante */
.download-card:active,
.discover-card:active {
    transform: scale(0.98);
    transition-duration: 0.1s;
}

/* Les ecrans tactiles declenchent de faux :hover au toucher */
@media (hover: none) {
    .phone-btn:hover,
    .play-btn:hover,
    .download-card:hover,
    .discover-card:hover,
    .vision-offre-lien:hover,
    .dt-btn:hover {
        transform: none;
        box-shadow: none;
    }

    .download-card:active,
    .discover-card:active {
        transform: scale(0.98);
    }
}

/* Mouvement reduit : plus de deplacement, les couleurs et l'opacite restent */
@media (prefers-reduced-motion: reduce) {
    .reveal-pret [data-in] {
        animation: none;
    }

    .download-card:hover,
    .discover-card:hover,
    .download-card:active,
    .discover-card:active {
        transform: none;
    }
}

/* Entree du hero en cascade (05/10/2026) : titre, textes, puis boutons telephone.
   Declenchee par .visible (posee par Vue au chargement). Keyframes : jouee une seule
   fois, jamais redeclenchee ; fill-mode backwards = le :hover reprend la main apres. */
@media (prefers-reduced-motion: no-preference) {
    .hero-content.visible .hero-title-main,
    .hero-content.visible .hero-intro,
    .hero-content.visible .hero-topics,
    .hero-content.visible .hero-subtitle,
    .hero-content.visible .phone-btn {
        animation: carte-entree 0.7s var(--sortie) backwards;
    }

    .hero-content.visible .hero-title-main { animation-delay: 0.05s; }
    .hero-content.visible .hero-intro { animation-delay: 0.2s; }
    .hero-content.visible .hero-topics { animation-delay: 0.3s; }
    .hero-content.visible .hero-subtitle { animation-delay: 0.4s; }
    .hero-content.visible .phone-btn:nth-child(1) { animation-delay: 0.55s; }
    .hero-content.visible .phone-btn:nth-child(2) { animation-delay: 0.65s; }
    .hero-content.visible .phone-btn:nth-child(3) { animation-delay: 0.75s; }
}

/* ============================================================
   Hero ludique (05/10/2026) - public d'enfants : rebond a l'entree,
   enfant qui flotte, boutons telephone qui "sonnent" a tour de role.
   Courbe a depassement = easeOutBack. Tout est coupe en mouvement reduit.
   ============================================================ */
@keyframes enfant-entree {
    from {
        opacity: 0;
        transform: translateX(70px) rotate(5deg) scale(0.85);
    }
}

@keyframes enfant-flotte {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(-0.8deg); }
}

@keyframes sonne {
    0%, 20%, 100% { transform: rotate(0deg); }
    3% { transform: rotate(-4deg); }
    6% { transform: rotate(4deg); }
    9% { transform: rotate(-3deg); }
    12% { transform: rotate(3deg); }
    15% { transform: rotate(-1.5deg); }
}

@keyframes badge-pop {
    from {
        opacity: 0;
        transform: scale(0.5) translateY(14px);
    }
}

@media (prefers-reduced-motion: no-preference) {
    .hero-content.visible .hero-child-image {
        transform-origin: 60% 85%;
        animation:
            enfant-entree 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s backwards,
            enfant-flotte 5s ease-in-out 1.4s infinite;
    }

    .hero-content.visible .phone-btn {
        animation-name: carte-entree, sonne;
        animation-duration: 0.7s, 6s;
        animation-timing-function: var(--sortie), ease-in-out;
        animation-iteration-count: 1, infinite;
        animation-fill-mode: backwards, none;
    }

    .hero-content.visible .phone-btn:nth-child(1) { animation-delay: 0.55s, 2.5s; }
    .hero-content.visible .phone-btn:nth-child(2) { animation-delay: 0.65s, 4.5s; }
    .hero-content.visible .phone-btn:nth-child(3) { animation-delay: 0.75s, 6.5s; }

    .hero-content.visible .hero-badge {
        animation: badge-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
    }

    .hero-content.visible .hero-badge:nth-child(1) { animation-delay: 1s; }
    .hero-content.visible .hero-badge:nth-child(2) { animation-delay: 1.12s; }
    .hero-content.visible .hero-badge:nth-child(3) { animation-delay: 1.24s; }
}

/* Le :hover reprend la main : on fige la sonnerie sous le curseur */
@media (hover: hover) and (pointer: fine) {
    .hero-content.visible .phone-btn:hover {
        animation-play-state: running, paused;
    }
}