/* Accueil — styles spécifiques (hero, timeline, courses, partenaires, CTA) */

/* Palette & variables locales (utilisées dans ce fichier) */
:root {
    --cream: #f7f2ec;
    --cream2: #f3ede6;
    --ink: #1f1b16;
    --mush: #8b6b4a;
}

/* Décors existants */
.blob,
.grain:before {
    pointer-events: none;
    position: absolute;
    z-index: 0;
    opacity: .18;
    filter: blur(2px);
}

.blob.blob-1 {
    top: -80px;
    left: -100px;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: radial-gradient(ellipse at 30% 30%, #c8ad90, transparent 60%);
}

.blob.blob-2 {
    bottom: -120px;
    right: -160px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(ellipse at 70% 70%, #ffb477, transparent 60%);
}

.grain:before {
    content: "";
    inset: 0;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" opacity="0.04"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)"/></svg>');
    mix-blend-mode: multiply;
}

/* ================= HERO ================= */

/* ===========================
   HERO — Plein cadre, sobre (palette header)
   Scope : .tdc-hero*
   =========================== */

.tdc-hero {
    /* Couleurs alignées au header */
    --mush: #8b6b4a;
    /* brun champignon */
    --taupe: #8A7E73;
    /* taupe */
    --cream: #F3EFE7;
    /* crème */
    --ink: #1f1b16;
    /* encre */

    position: relative;
    width: 100%;
    min-height: clamp(420px, 60svh, 780px);
    color: #fff;

    /* Image en background (injectée via style="--hero-img: url(...)" dans home.php) */
    background:
        linear-gradient(180deg, rgba(31, 27, 22, .06) 0%, rgba(31, 27, 22, .24) 60%, rgba(31, 27, 22, .42) 100%),
        var(--hero-img) center/cover no-repeat;

    overflow: hidden;
    /* pour le grain */
}

/* Overlays visuels (voile + grain) */
.tdc-hero__overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(80% 110% at 50% 12%, rgba(138, 126, 115, .16) 0%, rgba(139, 107, 74, .12) 42%, rgba(0, 0, 0, 0) 72%),
        linear-gradient(180deg, rgba(0, 0, 0, .02) 0%, rgba(0, 0, 0, .18) 100%);
    mix-blend-mode: multiply;
    pointer-events: none;
}

.tdc-hero__grain::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .055;
    pointer-events: none;
    background-image:
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" opacity="1"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)"/></svg>');
}

/* Image réelle pour LCP/SEO (non visible, on peint avec le background ci-dessus) */
.tdc-hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
}

/* ================= Contenu centré haut ================= */
.tdc-hero__inner {
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -40%);
    display: grid;
    gap: 14px;
    justify-items: center;
    text-align: center;
    z-index: 1;
    padding-inline: clamp(12px, 3vw, 28px);
}

/* Apparition douce (pilotée par home.js : .is-ready) */
.tdc-hero:not(.is-ready) .tdc-hero__inner {
    opacity: 0;
    transform: translate(-50%, calc(-40% + 8px));
}

.tdc-hero.is-ready .tdc-hero__inner {
    opacity: 1;
    transform: translate(-50%, -40%);
    transition: opacity .6s ease, transform .6s ease;
}

/* Parallax/zoom doux (la transform globale est ajustée par JS) */
@media (prefers-reduced-motion: no-preference) {
    .tdc-hero {
        will-change: transform;
    }
}

/* ================= Bloc DATE ================= */
.tdc-dateBlock {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--cream);
    color: var(--ink);
    padding: .85rem 1.4rem;
    border-radius: 6px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .25);
}

.tdc-dateBlock__day {
    font: 800 clamp(42px, 8vw, 76px)/1 "Oswald", system-ui, sans-serif;
    color: var(--mush);
}

.tdc-dateBlock__month {
    margin-top: 4px;
    font: 700 clamp(12px, 2vw, 16px)/1 "Inter", system-ui, sans-serif;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--ink);
}

.tdc-dateBlock__year {
    margin-top: 2px;
    font: 600 clamp(11px, 1.8vw, 14px)/1 "Inter", system-ui, sans-serif;
    letter-spacing: .15em;
    color: var(--taupe);
}

/* ================= Bloc LIEU ================= */
.tdc-placeBlock {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    background: var(--mush);
    color: var(--cream);
    padding: .6rem 1.2rem;
    border-radius: 6px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .25);
}

.tdc-placeBlock__icon {
    width: 18px;
    height: 18px;
    fill: currentColor;
    opacity: .9;
}

.tdc-placeBlock__text {
    font: 700 clamp(12px, 1.8vw, 15px)/1 "Inter", system-ui, sans-serif;
    letter-spacing: .05em;
    white-space: nowrap;
}

/* ================= Bloc TAGLINE ================= */
.tdc-tagline {
    font: 700 clamp(11px, 1.9vw, 14px)/1 "Oswald", system-ui, sans-serif;
    letter-spacing: .14em;
    text-transform: uppercase;
    background: var(--taupe);
    color: var(--cream);
    padding: .6rem 1.4rem;
    border-radius: 6px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .25);
    white-space: nowrap;
}

/* ================= Responsif fin ================= */
@media (max-width: 520px) {
    .tdc-hero__inner {
        gap: 10px;
        top: 42%;
        transform: translate(-50%, -42%);
    }

    .tdc-placeBlock {
        padding: .55rem 1rem;
    }
}

/* ================= FIN HERO ================= */

/* ================= SECTIONS ================= */
.section-title,
.tt {
    font: 700 clamp(22px, 2.4vw, 32px)/1.15 Oswald, system-ui;
    text-transform: uppercase;
    letter-spacing: .06em;
    text-align: center;
    margin: 0;
    color: var(--ink);
}

.tt-sm {
    font: 700 14px/1 Oswald;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: #7a6b57;
}

/* Cartes & look existants */
.glass {
    background: rgba(255, 255, 255, .72);
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 1.25rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
    backdrop-filter: blur(6px);
}

.icon-tile {
    width: 96px;
    height: 96px;
    border-radius: .9rem;
    object-fit: cover;
    background: #efe7dc;
}

@media (max-width:991px) {
    .icon-tile {
        width: 80px;
        height: 80px;
    }
}

.course-grid {
    display: grid;
    grid-template-columns: 112px 1fr;
    gap: 1rem;
    align-items: center;
}

@media (max-width:575px) {
    .course-grid {
        grid-template-columns: 84px 1fr;
    }
}

.course-title {
    margin: 0 0 .25rem;
    font: 700 22px/1.1 Oswald;
    letter-spacing: .01em;
    text-transform: uppercase;
}

.course-teaser {
    margin: 0 0 .5rem;
    color: #4b4033;
}

.course-meta .badge {
    padding: .55rem .85rem !important;
    font-size: 1rem;
    border: 1px solid #e9e1d6 !important;
    background: #fff;
}

/* Timeline */
.timeline-clean {
    display: grid;
    gap: .75rem;
}

.timeline-item {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    line-height: 1.25;
}

.timeline-dot {
    flex: 0 0 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--mush);
    margin-top: .35rem;
    box-shadow: 0 0 0 3px var(--cream2) inset;
}

.timeline-text {
    min-width: 0;
    overflow-wrap: anywhere;
}

.timeline-text strong {
    display: inline-block;
}

.timeline-text small {
    display: block;
    color: #6c757d;
}

/* Partenaires */
.partners {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
    align-items: center;
}

.partner {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 92px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: .9rem;
    transition: .2s;
}

.partner:hover {
    transform: translateY(-3px);
}

.partner img {
    max-height: 64px;
    max-width: 100%;
}

/* ========= INFORMATIONS PRATIQUES — égalisation des hauteurs ========= */
.info-card {
    /* même style que .ibox mais on verrouille la structure */
    background: #fff;
    border: 1px solid #eee;
    border-radius: 18px;
    padding: 24px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .06);
    min-height: 100%;
}

/* === Ajustements pour les 4 blocs infos === */
.btn-stack .btn {
    margin: 0 .25rem .5rem;
}

.info-card .icon {
    font-size: 1.6rem;
    text-align: center;
    margin-bottom: .25rem;
}

@media (min-width: 992px) {

    /* Assure 4 colonnes bien nettes sur desktop via les classes col-lg-3 déjà posées */
    #infos .row>[class*="col-lg-3"] {
        display: flex;
    }
}

/* ==== FIX : pictos centrés en mobilité (infos, tuiles, etc.) ==== */
@media (max-width: 991px) {

    /* Cartes "informations pratiques" (ou équivalents) */
    .info-card,
    .glass {
        text-align: center;
        /* centre le texte + évite l'effet "bord gauche" */
    }

    /* Cible le conteneur d'icône s'il existe */
    .info-card .icon,
    .glass .icon {
        display: grid;
        /* centre tout le contenu interne */
        place-items: center;
        margin: 0 auto .5rem auto;
        /* centre horizontalement le bloc icône */
        width: auto;
        /* laisse respirer */
    }

    /* Centre l’élément réel du picto (img / svg / i) */
    .info-card .icon img,
    .info-card .icon svg,
    .info-card .icon i,
    .glass .icon img,
    .glass .icon svg,
    .glass .icon i {
        display: block;
        margin: 0 auto;
    }

    /* Tuiles pictogrammes (si utilisées) */
    .icon-tile {
        margin-left: auto;
        margin-right: auto;
        /* force le centrage de la tuile */
    }

    /* Petits overrides fréquents de Bootstrap/utilitaires */
    .text-start.info-card,
    .text-start.glass {
        text-align: center !important;
        /* neutralise un .text-start résiduel */
    }
}