{"id":103,"date":"2025-10-23T11:58:12","date_gmt":"2025-10-23T11:58:12","guid":{"rendered":"https:\/\/atb.bf\/atb-v2\/?page_id=103"},"modified":"2026-07-13T00:33:52","modified_gmt":"2026-07-12T22:33:52","slug":"tele-theatre","status":"publish","type":"page","link":"https:\/\/atb.bf\/atb-v2\/tele-theatre\/","title":{"rendered":"T\u00c9L\u00c9 TH\u00c9\u00c2TRE"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"103\" class=\"elementor elementor-103\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-df0f0a4 e-con e-atomic-element e-flexbox-base e-dd9236f \" data-id=\"df0f0a4\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"df0f0a4\" data-e-type=\"e-flexbox\" data-id=\"df0f0a4\">\n    \t\t<div class=\"elementor-element elementor-element-dc38656 elementor-widget__width-initial elementor-widget elementor-widget-html\" data-id=\"dc38656\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =====================================================\n     T\u00c9L\u00c9-TH\u00c9\u00c2TRE ATB \u2014 HERO IMMERSIF V1\n     Compatible WordPress + Elementor\n====================================================== -->\n\n<section class=\"ttatb-hero\" id=\"tele-theatre-atb\">\n\n    <!-- Image de fond -->\n    <div class=\"ttatb-hero__background\" aria-hidden=\"true\"><\/div>\n\n    <!-- Effets visuels -->\n    <div class=\"ttatb-hero__overlay\" aria-hidden=\"true\"><\/div>\n    <div class=\"ttatb-hero__light\" aria-hidden=\"true\"><\/div>\n    <div class=\"ttatb-hero__grain\" aria-hidden=\"true\"><\/div>\n\n    <!-- Contenu principal -->\n    <div class=\"ttatb-hero__container\">\n\n        <div class=\"ttatb-hero__content\">\n\n            <div class=\"ttatb-hero__eyebrow ttatb-reveal\">\n                <span class=\"ttatb-hero__eyebrow-line\"><\/span>\n                <span>La plateforme audiovisuelle officielle de l\u2019ATB<\/span>\n            <\/div>\n\n            <h1 class=\"ttatb-hero__title ttatb-reveal\">\n                T\u00e9l\u00e9-Th\u00e9\u00e2tre\n                <span>ATB<\/span>\n            <\/h1>\n\n            <p class=\"ttatb-hero__headline ttatb-reveal\">\n                Le th\u00e9\u00e2tre ne s\u2019arr\u00eate jamais lorsque le rideau tombe.\n            <\/p>\n\n            <p class=\"ttatb-hero__description ttatb-reveal\">\n                D\u00e9couvrez les spectacles film\u00e9s, les cr\u00e9ations audiovisuelles,\n                les productions de th\u00e9\u00e2tre forum, les captations de festivals\n                et les contenus p\u00e9dagogiques de l\u2019Atelier Th\u00e9\u00e2tre Burkinab\u00e8.\n            <\/p>\n\n            <div class=\"ttatb-hero__actions ttatb-reveal\">\n\n                <a href=\"#atb-productions\"\n                   class=\"ttatb-btn ttatb-btn--primary\">\n\n                    <span class=\"ttatb-btn__icon\">\n                        <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                            <path d=\"M8 5v14l11-7z\"><\/path>\n                        <\/svg>\n                    <\/span>\n\n                    <span>Regarder les productions<\/span>\n                <\/a>\n\n                <a href=\"#atb-creations\"\n                   class=\"ttatb-btn ttatb-btn--secondary\">\n\n                    <span>D\u00e9couvrir nos cr\u00e9ations<\/span>\n\n                    <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                        <path d=\"M5 12h14\"><\/path>\n                        <path d=\"m13 6 6 6-6 6\"><\/path>\n                    <\/svg>\n                <\/a>\n\n            <\/div>\n\n        <\/div>\n\n        <!-- Bloc lat\u00e9ral -->\n        <div class=\"ttatb-hero__side-card ttatb-reveal\">\n\n            <div class=\"ttatb-hero__side-icon\">\n                <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                    <rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2\"><\/rect>\n                    <path d=\"m10 9 5 3-5 3z\"><\/path>\n                <\/svg>\n            <\/div>\n\n            <div class=\"ttatb-hero__side-content\">\n                <span class=\"ttatb-hero__side-label\">\n                    M\u00e9moire audiovisuelle\n                <\/span>\n\n                <strong>\n                    Des \u0153uvres qui continuent de vivre, d\u2019\u00e9duquer et de voyager.\n                <\/strong>\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n\n    <!-- Indicateur de d\u00e9filement -->\n    <a href=\"#atb-productions\"\n       class=\"ttatb-hero__scroll\"\n       aria-label=\"D\u00e9couvrir les productions\">\n\n        <span>Explorer<\/span>\n\n        <span class=\"ttatb-hero__scroll-line\">\n            <i><\/i>\n        <\/span>\n    <\/a>\n\n    <!-- Bandeau inf\u00e9rieur -->\n    <div class=\"ttatb-marquee\">\n\n        <div class=\"ttatb-marquee__track\">\n\n            <div class=\"ttatb-marquee__group\">\n                <span>Th\u00e9\u00e2tre Forum<\/span>\n                <i><\/i>\n                <span>Captations<\/span>\n                <i><\/i>\n                <span>Films p\u00e9dagogiques<\/span>\n                <i><\/i>\n                <span>Festivals<\/span>\n                <i><\/i>\n                <span>Cr\u00e9ations audiovisuelles<\/span>\n                <i><\/i>\n                <span>Archives vivantes<\/span>\n                <i><\/i>\n            <\/div>\n\n            <div class=\"ttatb-marquee__group\" aria-hidden=\"true\">\n                <span>Th\u00e9\u00e2tre Forum<\/span>\n                <i><\/i>\n                <span>Captations<\/span>\n                <i><\/i>\n                <span>Films p\u00e9dagogiques<\/span>\n                <i><\/i>\n                <span>Festivals<\/span>\n                <i><\/i>\n                <span>Cr\u00e9ations audiovisuelles<\/span>\n                <i><\/i>\n                <span>Archives vivantes<\/span>\n                <i><\/i>\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n<style>\n\/* =====================================================\n   POLICES\n====================================================== *\/\n\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Archivo:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&display=swap');\n\n\/* =====================================================\n   VARIABLES\n====================================================== *\/\n\n.ttatb-hero {\n    --ttatb-bordeaux: #60052D;\n    --ttatb-bordeaux-dark: #280014;\n    --ttatb-gold: #CC9933;\n    --ttatb-cream: #F7F0E7;\n    --ttatb-white: #FFFFFF;\n    --ttatb-text-soft: rgba(255, 255, 255, 0.82);\n\n    position: relative;\n    width: 100%;\n    min-height: 860px;\n    display: flex;\n    align-items: center;\n    overflow: hidden;\n    isolation: isolate;\n    background: var(--ttatb-bordeaux-dark);\n    color: var(--ttatb-white);\n    font-family: \"Archivo\", sans-serif;\n}\n\n\/* =====================================================\n   IMAGE DE FOND\n====================================================== *\/\n\n.ttatb-hero__background {\n    position: absolute;\n    inset: 0;\n    z-index: -5;\n\n    background-image:\n        url(\"http:\/\/atb.bf\/atb-v2\/wp-content\/uploads\/2026\/01\/67779851_1247256172117565_5487029657914048512_n.jpg\");\n\n    background-size: cover;\n    background-position: center 38%;\n    background-repeat: no-repeat;\n\n    transform: scale(1.04);\n    animation: ttatbHeroZoom 16s ease-in-out infinite alternate;\n}\n\n.ttatb-hero__overlay {\n    position: absolute;\n    inset: 0;\n    z-index: -4;\n\n    background:\n        linear-gradient(\n            90deg,\n            rgba(24, 0, 12, 0.96) 0%,\n            rgba(42, 0, 20, 0.89) 34%,\n            rgba(56, 0, 27, 0.60) 64%,\n            rgba(25, 0, 12, 0.40) 100%\n        ),\n        linear-gradient(\n            180deg,\n            rgba(20, 0, 10, 0.28) 0%,\n            rgba(20, 0, 10, 0.14) 48%,\n            rgba(20, 0, 10, 0.94) 100%\n        );\n}\n\n.ttatb-hero__light {\n    position: absolute;\n    top: -25%;\n    right: -10%;\n    z-index: -3;\n    width: 68%;\n    height: 115%;\n\n    background:\n        radial-gradient(\n            circle at center,\n            rgba(204, 153, 51, 0.24) 0%,\n            rgba(204, 153, 51, 0.08) 28%,\n            transparent 67%\n        );\n\n    filter: blur(10px);\n    animation: ttatbLightMove 8s ease-in-out infinite alternate;\n}\n\n.ttatb-hero__grain {\n    position: absolute;\n    inset: 0;\n    z-index: -2;\n    pointer-events: none;\n    opacity: 0.11;\n\n    background-image:\n        repeating-radial-gradient(\n            circle at 0 0,\n            transparent 0,\n            rgba(255,255,255,0.18) 1px,\n            transparent 2px\n        );\n\n    background-size: 5px 5px;\n    mix-blend-mode: soft-light;\n}\n\n\/* =====================================================\n   CONTENEUR\n====================================================== *\/\n\n.ttatb-hero__container {\n    width: min(1280px, calc(100% - 80px));\n    margin: 0 auto;\n    padding: 155px 0 180px;\n\n    display: grid;\n    grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.55fr);\n    align-items: end;\n    gap: 80px;\n}\n\n\/* =====================================================\n   CONTENU\n====================================================== *\/\n\n.ttatb-hero__content {\n    position: relative;\n    max-width: 840px;\n}\n\n.ttatb-hero__eyebrow {\n    display: flex;\n    align-items: center;\n    gap: 15px;\n    margin-bottom: 28px;\n\n    color: var(--ttatb-gold);\n    font-size: 12px;\n    font-weight: 700;\n    letter-spacing: 0.18em;\n    line-height: 1.6;\n    text-transform: uppercase;\n}\n\n.ttatb-hero__eyebrow-line {\n    width: 45px;\n    height: 1px;\n    flex: 0 0 auto;\n    background: var(--ttatb-gold);\n}\n\n.ttatb-hero__title {\n    margin: 0;\n    max-width: 900px;\n\n    font-family: \"Fraunces\", serif;\n    font-size: clamp(68px, 8.6vw, 132px);\n    font-weight: 600;\n    line-height: 0.82;\n    letter-spacing: -0.055em;\n    text-wrap: balance;\n}\n\n.ttatb-hero__title span {\n    display: block;\n    margin-top: 19px;\n    color: var(--ttatb-gold);\n    font-style: italic;\n    font-weight: 500;\n}\n\n.ttatb-hero__headline {\n    margin: 42px 0 0;\n    max-width: 720px;\n\n    font-family: \"Fraunces\", serif;\n    font-size: clamp(25px, 2.5vw, 38px);\n    font-weight: 500;\n    line-height: 1.22;\n    letter-spacing: -0.025em;\n}\n\n.ttatb-hero__description {\n    max-width: 690px;\n    margin: 24px 0 0;\n\n    color: var(--ttatb-text-soft);\n    font-size: 17px;\n    font-weight: 400;\n    line-height: 1.85;\n}\n\n.ttatb-hero__actions {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: 16px;\n    margin-top: 38px;\n}\n\n\/* =====================================================\n   BOUTONS\n====================================================== *\/\n\n.ttatb-btn {\n    min-height: 58px;\n    padding: 0 25px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: 12px;\n\n    position: relative;\n    overflow: hidden;\n\n    border: 1px solid transparent;\n    border-radius: 999px;\n\n    color: var(--ttatb-white);\n    font-size: 13px;\n    font-weight: 700;\n    letter-spacing: 0.045em;\n    line-height: 1.2;\n    text-decoration: none !important;\n\n    transition:\n        transform 0.35s ease,\n        background-color 0.35s ease,\n        border-color 0.35s ease,\n        color 0.35s ease,\n        box-shadow 0.35s ease;\n}\n\n.ttatb-btn::before {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n\n    background:\n        linear-gradient(\n            110deg,\n            transparent 25%,\n            rgba(255,255,255,0.28) 48%,\n            transparent 72%\n        );\n\n    transform: translateX(-140%);\n    transition: transform 0.75s ease;\n}\n\n.ttatb-btn:hover::before {\n    transform: translateX(140%);\n}\n\n.ttatb-btn:hover {\n    transform: translateY(-3px);\n}\n\n.ttatb-btn--primary {\n    background: var(--ttatb-gold);\n    color: #271706;\n    box-shadow: 0 14px 38px rgba(204, 153, 51, 0.24);\n}\n\n.ttatb-btn--primary:hover {\n    background: #DCAA47;\n    color: #271706;\n    box-shadow: 0 18px 44px rgba(204, 153, 51, 0.36);\n}\n\n.ttatb-btn--secondary {\n    background: rgba(255, 255, 255, 0.07);\n    border-color: rgba(255, 255, 255, 0.28);\n    backdrop-filter: blur(12px);\n    -webkit-backdrop-filter: blur(12px);\n}\n\n.ttatb-btn--secondary:hover {\n    background: rgba(255, 255, 255, 0.14);\n    border-color: rgba(255, 255, 255, 0.52);\n    color: var(--ttatb-white);\n}\n\n.ttatb-btn__icon {\n    width: 31px;\n    height: 31px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    border-radius: 50%;\n    background: rgba(39, 23, 6, 0.12);\n}\n\n.ttatb-btn__icon svg {\n    width: 15px;\n    height: 15px;\n    fill: currentColor;\n}\n\n.ttatb-btn--secondary svg {\n    width: 18px;\n    height: 18px;\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.8;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n\n    transition: transform 0.35s ease;\n}\n\n.ttatb-btn--secondary:hover svg {\n    transform: translateX(5px);\n}\n\n\/* =====================================================\n   CARTE LAT\u00c9RALE\n====================================================== *\/\n\n.ttatb-hero__side-card {\n    align-self: end;\n\n    display: flex;\n    align-items: flex-start;\n    gap: 18px;\n\n    padding: 28px;\n\n    border: 1px solid rgba(255, 255, 255, 0.18);\n    border-radius: 22px;\n\n    background:\n        linear-gradient(\n            145deg,\n            rgba(255,255,255,0.13),\n            rgba(255,255,255,0.035)\n        );\n\n    box-shadow: 0 24px 65px rgba(0, 0, 0, 0.24);\n\n    backdrop-filter: blur(16px);\n    -webkit-backdrop-filter: blur(16px);\n}\n\n.ttatb-hero__side-icon {\n    width: 50px;\n    height: 50px;\n    flex: 0 0 auto;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    border-radius: 50%;\n    background: var(--ttatb-gold);\n    color: #2E1705;\n}\n\n.ttatb-hero__side-icon svg {\n    width: 23px;\n    height: 23px;\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.7;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n.ttatb-hero__side-content {\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n}\n\n.ttatb-hero__side-label {\n    color: var(--ttatb-gold);\n    font-size: 10px;\n    font-weight: 700;\n    letter-spacing: 0.16em;\n    line-height: 1.4;\n    text-transform: uppercase;\n}\n\n.ttatb-hero__side-content strong {\n    color: var(--ttatb-white);\n    font-family: \"Fraunces\", serif;\n    font-size: 19px;\n    font-weight: 500;\n    line-height: 1.45;\n}\n\n\/* =====================================================\n   INDICATEUR DE D\u00c9FILEMENT\n====================================================== *\/\n\n.ttatb-hero__scroll {\n    position: absolute;\n    left: 32px;\n    bottom: 108px;\n\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 12px;\n\n    color: rgba(255,255,255,0.72);\n    text-decoration: none !important;\n}\n\n.ttatb-hero__scroll > span:first-child {\n    font-size: 9px;\n    font-weight: 600;\n    letter-spacing: 0.18em;\n    text-transform: uppercase;\n    writing-mode: vertical-rl;\n    transform: rotate(180deg);\n}\n\n.ttatb-hero__scroll-line {\n    width: 1px;\n    height: 54px;\n    position: relative;\n    overflow: hidden;\n    background: rgba(255,255,255,0.22);\n}\n\n.ttatb-hero__scroll-line i {\n    position: absolute;\n    top: -100%;\n    left: 0;\n    width: 100%;\n    height: 52%;\n    background: var(--ttatb-gold);\n    animation: ttatbScrollLine 2.3s ease-in-out infinite;\n}\n\n\/* =====================================================\n   MARQUEE\n====================================================== *\/\n\n.ttatb-marquee {\n    position: absolute;\n    left: 0;\n    right: 0;\n    bottom: 0;\n\n    overflow: hidden;\n\n    border-top: 1px solid rgba(255,255,255,0.13);\n    background: rgba(36, 0, 17, 0.76);\n\n    backdrop-filter: blur(13px);\n    -webkit-backdrop-filter: blur(13px);\n}\n\n.ttatb-marquee__track {\n    width: max-content;\n    min-width: 100%;\n\n    display: flex;\n\n    animation: ttatbMarquee 28s linear infinite;\n}\n\n.ttatb-marquee__group {\n    display: flex;\n    align-items: center;\n    flex-shrink: 0;\n    gap: 31px;\n\n    padding: 24px 31px;\n}\n\n.ttatb-marquee__group span {\n    color: rgba(255,255,255,0.83);\n    font-size: 11px;\n    font-weight: 600;\n    letter-spacing: 0.15em;\n    text-transform: uppercase;\n    white-space: nowrap;\n}\n\n.ttatb-marquee__group i {\n    width: 6px;\n    height: 6px;\n    flex: 0 0 auto;\n\n    border-radius: 50%;\n    background: var(--ttatb-gold);\n}\n\n\/* ====================================\/* =====================================================\n   ANIMATIONS D\u2019APPARITION \u2014 VERSION ELEMENTOR S\u00c9CURIS\u00c9E\n====================================================== *\/\n\n\/* Le contenu reste visible m\u00eame si JavaScript ne d\u00e9marre pas *\/\n.ttatb-reveal {\n    opacity: 1;\n    transform: translateY(0);\n}\n\n\/* L\u2019animation est activ\u00e9e uniquement lorsque le script fonctionne *\/\n.ttatb-hero.ttatb-animation-ready .ttatb-reveal {\n    opacity: 0;\n    transform: translateY(28px);\n\n    transition:\n        opacity 0.85s cubic-bezier(.22,.61,.36,1),\n        transform 0.85s cubic-bezier(.22,.61,.36,1);\n}\n\n.ttatb-hero.ttatb-animation-ready .ttatb-reveal.is-visible {\n    opacity: 1;\n    transform: translateY(0);\n}\n\/* =====================================================\n   KEYFRAMES\n====================================================== *\/\n\n@keyframes ttatbHeroZoom {\n    from {\n        transform: scale(1.04);\n    }\n\n    to {\n        transform: scale(1.11);\n    }\n}\n\n@keyframes ttatbLightMove {\n    from {\n        transform: translate3d(-3%, -2%, 0) rotate(-3deg);\n        opacity: 0.65;\n    }\n\n    to {\n        transform: translate3d(4%, 3%, 0) rotate(4deg);\n        opacity: 1;\n    }\n}\n\n@keyframes ttatbScrollLine {\n    0% {\n        top: -55%;\n    }\n\n    55% {\n        top: 100%;\n    }\n\n    100% {\n        top: 100%;\n    }\n}\n\n@keyframes ttatbMarquee {\n    from {\n        transform: translateX(0);\n    }\n\n    to {\n        transform: translateX(-50%);\n    }\n}\n\n\/* =====================================================\n   RESPONSIVE TABLETTE\n====================================================== *\/\n\n@media (max-width: 1100px) {\n\n    .ttatb-hero {\n        min-height: 820px;\n    }\n\n    .ttatb-hero__container {\n        width: min(100% - 48px, 960px);\n        grid-template-columns: 1fr;\n        gap: 42px;\n        padding-top: 135px;\n        padding-bottom: 160px;\n    }\n\n    .ttatb-hero__side-card {\n        max-width: 520px;\n    }\n\n    .ttatb-hero__scroll {\n        display: none;\n    }\n\n}\n\n\/* =====================================================\n   RESPONSIVE MOBILE\n====================================================== *\/\n\n@media (max-width: 767px) {\n\n    .ttatb-hero {\n        min-height: auto;\n        align-items: flex-start;\n    }\n\n    .ttatb-hero__background {\n        background-position: 59% center;\n    }\n\n    .ttatb-hero__overlay {\n        background:\n            linear-gradient(\n                180deg,\n                rgba(22, 0, 11, 0.62) 0%,\n                rgba(34, 0, 16, 0.84) 38%,\n                rgba(32, 0, 15, 0.97) 78%,\n                rgba(32, 0, 15, 1) 100%\n            );\n    }\n\n    .ttatb-hero__container {\n        width: calc(100% - 34px);\n        padding: 120px 0 145px;\n        gap: 34px;\n    }\n\n    .ttatb-hero__eyebrow {\n        align-items: flex-start;\n        gap: 11px;\n        margin-bottom: 22px;\n        font-size: 9px;\n        letter-spacing: 0.14em;\n    }\n\n    .ttatb-hero__eyebrow-line {\n        width: 27px;\n        margin-top: 7px;\n    }\n\n    .ttatb-hero__title {\n        font-size: clamp(54px, 18vw, 78px);\n        line-height: 0.88;\n        letter-spacing: -0.05em;\n    }\n\n    .ttatb-hero__title span {\n        margin-top: 12px;\n    }\n\n    .ttatb-hero__headline {\n        margin-top: 32px;\n        font-size: 25px;\n        line-height: 1.25;\n    }\n\n    .ttatb-hero__description {\n        margin-top: 18px;\n        font-size: 15px;\n        line-height: 1.75;\n    }\n\n    .ttatb-hero__actions {\n        align-items: stretch;\n        flex-direction: column;\n        margin-top: 30px;\n    }\n\n    .ttatb-btn {\n        width: 100%;\n        min-height: 56px;\n        padding: 0 20px;\n    }\n\n    .ttatb-hero__side-card {\n        padding: 22px;\n        border-radius: 18px;\n    }\n\n    .ttatb-hero__side-icon {\n        width: 43px;\n        height: 43px;\n    }\n\n    .ttatb-hero__side-content strong {\n        font-size: 17px;\n    }\n\n    .ttatb-marquee__group {\n        gap: 22px;\n        padding: 20px 22px;\n    }\n\n    .ttatb-marquee__group span {\n        font-size: 9px;\n    }\n\n}\n\n\/* =====================================================\n   PETITS MOBILES\n====================================================== *\/\n\n@media (max-width: 390px) {\n\n    .ttatb-hero__container {\n        width: calc(100% - 28px);\n    }\n\n    .ttatb-hero__title {\n        font-size: 51px;\n    }\n\n    .ttatb-hero__headline {\n        font-size: 22px;\n    }\n\n    .ttatb-hero__side-card {\n        flex-direction: column;\n    }\n\n}\n\n\/* =====================================================\n   ACCESSIBILIT\u00c9\n====================================================== *\/\n\n@media (prefers-reduced-motion: reduce) {\n\n    .ttatb-hero__background,\n    .ttatb-hero__light,\n    .ttatb-marquee__track,\n    .ttatb-hero__scroll-line i {\n        animation: none !important;\n    }\n\n    .ttatb-reveal {\n        opacity: 1;\n        transform: none;\n        transition: none;\n    }\n\n}\n<\/style>\n\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", function () {\n\n    const hero = document.querySelector(\".ttatb-hero\");\n\n    if (!hero) return;\n\n    \/* Apparition progressive *\/\n    const revealElements = hero.querySelectorAll(\".ttatb-reveal\");\n\n    if (\"IntersectionObserver\" in window) {\n\n        const observer = new IntersectionObserver(\n            function (entries, observerInstance) {\n\n                entries.forEach(function (entry) {\n\n                    if (entry.isIntersecting) {\n                        entry.target.classList.add(\"is-visible\");\n                        observerInstance.unobserve(entry.target);\n                    }\n\n                });\n\n            },\n            {\n                threshold: 0.12\n            }\n        );\n\n        revealElements.forEach(function (element) {\n            observer.observe(element);\n        });\n\n    } else {\n\n        revealElements.forEach(function (element) {\n            element.classList.add(\"is-visible\");\n        });\n\n    }\n\n    \/* D\u00e9filement doux vers les futures sections *\/\n    const anchorLinks = hero.querySelectorAll('a[href^=\"#\"]');\n\n    anchorLinks.forEach(function (link) {\n\n        link.addEventListener(\"click\", function (event) {\n\n            const targetId = link.getAttribute(\"href\");\n\n            if (!targetId || targetId === \"#\") return;\n\n            const target = document.querySelector(targetId);\n\n            if (target) {\n                event.preventDefault();\n\n                target.scrollIntoView({\n                    behavior: \"smooth\",\n                    block: \"start\"\n                });\n            }\n\n        });\n\n    });\n\n});\n<\/script>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-4fed108 e-con e-atomic-element e-flexbox-base e-ab1f95d \" data-id=\"4fed108\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"4fed108\" data-e-type=\"e-flexbox\" data-id=\"4fed108\">\n    \t\t<div class=\"elementor-element elementor-element-012992f elementor-widget elementor-widget-html\" data-id=\"012992f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =====================================================\n     T\u00c9L\u00c9-TH\u00c9\u00c2TRE ATB \u2014 SECTION 02 : \u00c0 LA UNE\n     Compatible WordPress + Elementor\n====================================================== -->\n\n<section class=\"tt-featured\" id=\"atb-productions\">\n\n    <!-- D\u00e9coration -->\n    <div class=\"tt-featured__glow tt-featured__glow--one\" aria-hidden=\"true\"><\/div>\n    <div class=\"tt-featured__glow tt-featured__glow--two\" aria-hidden=\"true\"><\/div>\n\n    <div class=\"tt-featured__container\">\n\n        <!-- En-t\u00eate -->\n        <header class=\"tt-featured__header\">\n\n            <div class=\"tt-featured__heading\">\n                <span class=\"tt-featured__eyebrow\">\n                    <i><\/i>\n                    Le projecteur du moment\n                <\/span>\n\n                <h2>\n                    \u00c0 la <em>une<\/em>\n                <\/h2>\n            <\/div>\n\n            <p class=\"tt-featured__intro\">\n                Une production choisie parmi les cr\u00e9ations audiovisuelles,\n                les spectacles film\u00e9s et les archives vivantes de l\u2019Atelier\n                Th\u00e9\u00e2tre Burkinab\u00e8.\n            <\/p>\n\n        <\/header>\n\n        <!-- Carte principale -->\n        <article class=\"tt-featured__card\">\n\n            <!-- M\u00e9dia -->\n            <div class=\"tt-featured__media\">\n\n                <a href=\"https:\/\/youtu.be\/7R-m1JzKoKM?si=2DEWyaplyddyzmRr\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"tt-featured__media-link\" aria-label=\"Regarder la production \u00e0 la une\">\n\n                    <img decoding=\"async\"\n                        src=\"https:\/\/img.youtube.com\/vi\/7R-m1JzKoKM\/maxresdefault.jpg\"\n                        alt=\"Production audiovisuelle de l\u2019Atelier Th\u00e9\u00e2tre Burkinab\u00e8\"\n                        loading=\"lazy\"\n                    >\n\n                    <span class=\"tt-featured__image-overlay\" aria-hidden=\"true\"><\/span>\n\n                    <!-- Label sup\u00e9rieur -->\n                    <span class=\"tt-featured__media-label\">\n                        S\u00e9lection officielle\n                    <\/span>\n\n                    <!-- Bouton lecture -->\n                    <span class=\"tt-featured__play\">\n\n                        <span class=\"tt-featured__play-circle\">\n                            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                                <path d=\"M8 5v14l11-7z\"><\/path>\n                            <\/svg>\n                        <\/span>\n\n                        <span class=\"tt-featured__play-text\">\n                            <small>Regarder maintenant<\/small>\n                            <strong>Lancer la vid\u00e9o<\/strong>\n                        <\/span>\n\n                    <\/span>\n\n                    <!-- Num\u00e9ro graphique -->\n                    <span class=\"tt-featured__number\" aria-hidden=\"true\">\n                        01\n                    <\/span>\n\n                <\/a>\n\n            <\/div>\n\n            <!-- Informations -->\n            <div class=\"tt-featured__content\">\n\n                <div class=\"tt-featured__topline\">\n                    <span class=\"tt-featured__badge\">\n                        Gratuit\n                    <\/span>\n\n                    <span class=\"tt-featured__availability\">\n                        Disponible en ligne\n                    <\/span>\n                <\/div>\n\n                <p class=\"tt-featured__category\">\n                    Film institutionnel \u00b7 Cr\u00e9ation audiovisuelle\n                <\/p>\n\n                <h3>\n                    ATB : le th\u00e9\u00e2tre au service du d\u00e9veloppement\n                <\/h3>\n\n                <p class=\"tt-featured__summary\">\n                    Entrez dans l\u2019univers de l\u2019Atelier Th\u00e9\u00e2tre Burkinab\u00e8 et\n                    d\u00e9couvrez une institution qui utilise la sc\u00e8ne, la cr\u00e9ation\n                    audiovisuelle et le th\u00e9\u00e2tre pour le d\u00e9veloppement comme\n                    outils de dialogue, de transmission et de transformation\n                    sociale.\n                <\/p>\n\n                <!-- M\u00e9tadonn\u00e9es -->\n                <div class=\"tt-featured__meta\">\n\n                    <div class=\"tt-featured__meta-item\">\n                        <span class=\"tt-featured__meta-icon\">\n                            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                                <circle cx=\"12\" cy=\"12\" r=\"9\"><\/circle>\n                                <path d=\"M12 7v5l3 2\"><\/path>\n                            <\/svg>\n                        <\/span>\n\n                        <span>\n                            <small>Dur\u00e9e<\/small>\n                            <strong>\u00c0 confirmer<\/strong>\n                        <\/span>\n                    <\/div>\n\n                    <div class=\"tt-featured__meta-item\">\n                        <span class=\"tt-featured__meta-icon\">\n                            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                                <path d=\"M4 5h16v14H4z\"><\/path>\n                                <path d=\"m9 9 6 3-6 3z\"><\/path>\n                            <\/svg>\n                        <\/span>\n\n                        <span>\n                            <small>Format<\/small>\n                            <strong>Vid\u00e9o<\/strong>\n                        <\/span>\n                    <\/div>\n\n                    <div class=\"tt-featured__meta-item\">\n                        <span class=\"tt-featured__meta-icon\">\n                            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                                <circle cx=\"12\" cy=\"12\" r=\"9\"><\/circle>\n                                <path d=\"M3 12h18\"><\/path>\n                                <path d=\"M12 3a15 15 0 0 1 0 18\"><\/path>\n                                <path d=\"M12 3a15 15 0 0 0 0 18\"><\/path>\n                            <\/svg>\n                        <\/span>\n\n                        <span>\n                            <small>Langue<\/small>\n                            <strong>Fran\u00e7ais<\/strong>\n                        <\/span>\n                    <\/div>\n\n                    <div class=\"tt-featured__meta-item\">\n                        <span class=\"tt-featured__meta-icon\">\n                            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                                <path d=\"M12 3 4 7v5c0 4.7 3.2 7.7 8 9 4.8-1.3 8-4.3 8-9V7z\"><\/path>\n                                <path d=\"m9 12 2 2 4-4\"><\/path>\n                            <\/svg>\n                        <\/span>\n\n                        <span>\n                            <small>Acc\u00e8s<\/small>\n                            <strong>Libre<\/strong>\n                        <\/span>\n                    <\/div>\n\n                <\/div>\n\n                <!-- Th\u00e9matiques -->\n                <div class=\"tt-featured__themes\">\n                    <span>Th\u00e9\u00e2tre<\/span>\n                    <span>Culture<\/span>\n                    <span>D\u00e9veloppement<\/span>\n                    <span>Transmission<\/span>\n                <\/div>\n\n                <!-- Actions -->\n                <div class=\"tt-featured__actions\">\n\n                    <a href=\"https:\/\/youtu.be\/7R-m1JzKoKM?si=2DEWyaplyddyzmRr\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"tt-featured__btn tt-featured__btn--primary\">\n                        <span class=\"tt-featured__btn-icon\">\n                            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                                <path d=\"M8 5v14l11-7z\"><\/path>\n                            <\/svg>\n                        <\/span>\n\n                        <span>Regarder la production<\/span>\n                    <\/a>\n\n                    <a\n                        href=\"#atb-creations\"\n                        class=\"tt-featured__btn tt-featured__btn--secondary\"\n                    >\n                        <span>Explorer le catalogue<\/span>\n\n                        <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                            <path d=\"M5 12h14\"><\/path>\n                            <path d=\"m13 6 6 6-6 6\"><\/path>\n                        <\/svg>\n                    <\/a>\n\n                <\/div>\n\n            <\/div>\n\n        <\/article>\n\n        <!-- Bas de section -->\n        <div class=\"tt-featured__footer\">\n\n            <span class=\"tt-featured__footer-line\"><\/span>\n\n            <p>\n                Spectacles film\u00e9s \u00b7 Th\u00e9\u00e2tre forum \u00b7 Captations de festivals \u00b7\n                Contenus p\u00e9dagogiques\n            <\/p>\n\n            <span class=\"tt-featured__footer-line\"><\/span>\n\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n<style>\n\/* =====================================================\n   POLICES\n====================================================== *\/\n\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Archivo:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&display=swap');\n\n\/* =====================================================\n   SECTION G\u00c9N\u00c9RALE\n====================================================== *\/\n\n.tt-featured {\n    --tt-bordeaux: #60052D;\n    --tt-bordeaux-dark: #340018;\n    --tt-gold: #CC9933;\n    --tt-gold-light: #E1B75C;\n    --tt-cream: #F7F0E7;\n    --tt-cream-light: #FCF8F2;\n    --tt-ink: #23181D;\n    --tt-text: #61555A;\n    --tt-white: #FFFFFF;\n\n    position: relative;\n    width: 100%;\n    overflow: hidden;\n    isolation: isolate;\n\n    padding: 125px 0 100px;\n\n    background:\n        radial-gradient(\n            circle at 85% 12%,\n            rgba(204, 153, 51, 0.10),\n            transparent 27%\n        ),\n        linear-gradient(\n            180deg,\n            var(--tt-cream-light) 0%,\n            var(--tt-cream) 100%\n        );\n\n    color: var(--tt-ink);\n    font-family: \"Archivo\", sans-serif;\n}\n\n\/* Motif tr\u00e8s l\u00e9ger *\/\n\n.tt-featured::before {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    z-index: -3;\n    pointer-events: none;\n    opacity: 0.24;\n\n    background-image:\n        linear-gradient(\n            rgba(96, 5, 45, 0.035) 1px,\n            transparent 1px\n        ),\n        linear-gradient(\n            90deg,\n            rgba(96, 5, 45, 0.035) 1px,\n            transparent 1px\n        );\n\n    background-size: 70px 70px;\n}\n\n.tt-featured__glow {\n    position: absolute;\n    z-index: -2;\n    pointer-events: none;\n    border-radius: 50%;\n    filter: blur(3px);\n}\n\n.tt-featured__glow--one {\n    width: 420px;\n    height: 420px;\n    top: -240px;\n    left: -220px;\n\n    background: rgba(96, 5, 45, 0.09);\n}\n\n.tt-featured__glow--two {\n    width: 300px;\n    height: 300px;\n    right: -130px;\n    bottom: -170px;\n\n    background: rgba(204, 153, 51, 0.13);\n}\n\n.tt-featured__container {\n    width: min(1240px, calc(100% - 80px));\n    margin: 0 auto;\n}\n\n\/* =====================================================\n   EN-T\u00caTE\n====================================================== *\/\n\n.tt-featured__header {\n    display: grid;\n    grid-template-columns: minmax(0, 0.85fr) minmax(300px, 0.65fr);\n    align-items: end;\n    gap: 80px;\n\n    margin-bottom: 55px;\n}\n\n.tt-featured__eyebrow {\n    display: inline-flex;\n    align-items: center;\n    gap: 13px;\n\n    margin-bottom: 17px;\n\n    color: var(--tt-bordeaux);\n    font-size: 11px;\n    font-weight: 700;\n    letter-spacing: 0.17em;\n    text-transform: uppercase;\n}\n\n.tt-featured__eyebrow i {\n    width: 38px;\n    height: 1px;\n    display: block;\n    background: var(--tt-gold);\n}\n\n.tt-featured__heading h2 {\n    margin: 0;\n\n    color: var(--tt-bordeaux);\n    font-family: \"Fraunces\", serif;\n    font-size: clamp(52px, 6vw, 86px);\n    font-weight: 600;\n    line-height: 0.95;\n    letter-spacing: -0.045em;\n}\n\n.tt-featured__heading h2 em {\n    color: var(--tt-gold);\n    font-weight: 500;\n}\n\n.tt-featured__intro {\n    max-width: 510px;\n    margin: 0 0 4px;\n\n    color: var(--tt-text);\n    font-size: 16px;\n    line-height: 1.8;\n}\n\n\/* =====================================================\n   CARTE PRINCIPALE\n====================================================== *\/\n\n.tt-featured__card {\n    position: relative;\n\n    display: grid;\n    grid-template-columns: minmax(0, 1.12fr) minmax(380px, 0.88fr);\n\n    min-height: 620px;\n    overflow: hidden;\n\n    border: 1px solid rgba(96, 5, 45, 0.10);\n    border-radius: 30px;\n\n    background: var(--tt-white);\n\n    box-shadow:\n        0 30px 80px rgba(62, 20, 39, 0.10),\n        0 8px 24px rgba(62, 20, 39, 0.05);\n\n    transform: translateZ(0);\n}\n\n\/* =====================================================\n   M\u00c9DIA\n====================================================== *\/\n\n.tt-featured__media {\n    position: relative;\n    min-height: 620px;\n    overflow: hidden;\n    background: var(--tt-bordeaux-dark);\n}\n\n.tt-featured__media-link {\n    position: absolute;\n    inset: 0;\n\n    display: block;\n    overflow: hidden;\n\n    color: var(--tt-white);\n    text-decoration: none !important;\n}\n\n.tt-featured__media img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    object-position: center;\n\n    transform: scale(1.02);\n\n    transition:\n        transform 1s cubic-bezier(.2,.7,.2,1),\n        filter 0.7s ease;\n}\n\n.tt-featured__image-overlay {\n    position: absolute;\n    inset: 0;\n\n    background:\n        linear-gradient(\n            180deg,\n            rgba(29, 0, 14, 0.10) 0%,\n            rgba(29, 0, 14, 0.12) 42%,\n            rgba(29, 0, 14, 0.83) 100%\n        ),\n        linear-gradient(\n            90deg,\n            rgba(29, 0, 14, 0.20) 0%,\n            transparent 62%\n        );\n}\n\n.tt-featured__media-link:hover img {\n    transform: scale(1.09);\n    filter: saturate(1.08);\n}\n\n.tt-featured__media-label {\n    position: absolute;\n    top: 28px;\n    left: 28px;\n\n    padding: 11px 16px;\n\n    border: 1px solid rgba(255,255,255,0.28);\n    border-radius: 999px;\n\n    background: rgba(35, 0, 17, 0.43);\n\n    color: rgba(255,255,255,0.92);\n    font-size: 9px;\n    font-weight: 700;\n    letter-spacing: 0.17em;\n    text-transform: uppercase;\n\n    backdrop-filter: blur(12px);\n    -webkit-backdrop-filter: blur(12px);\n}\n\n\/* Bouton lecture *\/\n\n.tt-featured__play {\n    position: absolute;\n    left: 34px;\n    bottom: 34px;\n\n    display: inline-flex;\n    align-items: center;\n    gap: 16px;\n}\n\n.tt-featured__play-circle {\n    position: relative;\n\n    width: 68px;\n    height: 68px;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    border-radius: 50%;\n    background: var(--tt-gold);\n    color: #2D1805;\n\n    box-shadow:\n        0 12px 40px rgba(204, 153, 51, 0.33),\n        0 0 0 9px rgba(255,255,255,0.10);\n\n    transition:\n        transform 0.35s ease,\n        box-shadow 0.35s ease;\n}\n\n.tt-featured__play-circle::before {\n    content: \"\";\n    position: absolute;\n    inset: -10px;\n\n    border: 1px solid rgba(255,255,255,0.28);\n    border-radius: 50%;\n\n    animation: ttFeaturedPulse 2.7s ease-out infinite;\n}\n\n.tt-featured__play-circle svg {\n    width: 25px;\n    height: 25px;\n    margin-left: 4px;\n    fill: currentColor;\n}\n\n.tt-featured__media-link:hover .tt-featured__play-circle {\n    transform: scale(1.08);\n    box-shadow:\n        0 16px 46px rgba(204, 153, 51, 0.42),\n        0 0 0 11px rgba(255,255,255,0.13);\n}\n\n.tt-featured__play-text {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n}\n\n.tt-featured__play-text small {\n    color: rgba(255,255,255,0.68);\n    font-size: 9px;\n    font-weight: 600;\n    letter-spacing: 0.14em;\n    text-transform: uppercase;\n}\n\n.tt-featured__play-text strong {\n    color: var(--tt-white);\n    font-family: \"Fraunces\", serif;\n    font-size: 20px;\n    font-weight: 500;\n}\n\n.tt-featured__number {\n    position: absolute;\n    right: 27px;\n    bottom: 13px;\n\n    color: rgba(255,255,255,0.10);\n    font-family: \"Fraunces\", serif;\n    font-size: 115px;\n    font-weight: 600;\n    line-height: 1;\n    letter-spacing: -0.08em;\n}\n\n\/* =====================================================\n   CONTENU\n====================================================== *\/\n\n.tt-featured__content {\n    position: relative;\n\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n\n    padding: 58px 52px;\n}\n\n\/* Ligne dor\u00e9e d\u00e9corative *\/\n\n.tt-featured__content::before {\n    content: \"\";\n    position: absolute;\n    top: 0;\n    left: 52px;\n\n    width: 74px;\n    height: 4px;\n\n    border-radius: 0 0 4px 4px;\n    background: var(--tt-gold);\n}\n\n.tt-featured__topline {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: 12px;\n\n    margin-bottom: 23px;\n}\n\n.tt-featured__badge {\n    padding: 9px 14px;\n\n    border-radius: 999px;\n\n    background: rgba(96, 5, 45, 0.09);\n    color: var(--tt-bordeaux);\n\n    font-size: 9px;\n    font-weight: 700;\n    letter-spacing: 0.13em;\n    text-transform: uppercase;\n}\n\n.tt-featured__availability {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n\n    color: #6B5B61;\n    font-size: 11px;\n    font-weight: 600;\n}\n\n.tt-featured__availability::before {\n    content: \"\";\n\n    width: 7px;\n    height: 7px;\n\n    border-radius: 50%;\n    background: #4D9B66;\n\n    box-shadow: 0 0 0 5px rgba(77,155,102,0.11);\n}\n\n.tt-featured__category {\n    margin: 0 0 16px;\n\n    color: var(--tt-gold);\n    font-size: 10px;\n    font-weight: 700;\n    letter-spacing: 0.14em;\n    line-height: 1.5;\n    text-transform: uppercase;\n}\n\n.tt-featured__content h3 {\n    margin: 0;\n\n    color: var(--tt-bordeaux);\n    font-family: \"Fraunces\", serif;\n    font-size: clamp(35px, 3.3vw, 53px);\n    font-weight: 600;\n    line-height: 1.05;\n    letter-spacing: -0.035em;\n}\n\n.tt-featured__summary {\n    margin: 24px 0 0;\n\n    color: var(--tt-text);\n    font-size: 15px;\n    line-height: 1.8;\n}\n\n\/* =====================================================\n   M\u00c9TADONN\u00c9ES\n====================================================== *\/\n\n.tt-featured__meta {\n    display: grid;\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n    gap: 12px;\n\n    margin-top: 29px;\n}\n\n.tt-featured__meta-item {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n\n    min-height: 65px;\n    padding: 12px 13px;\n\n    border: 1px solid rgba(96, 5, 45, 0.08);\n    border-radius: 14px;\n\n    background: #FCF9F5;\n\n    transition:\n        transform 0.3s ease,\n        border-color 0.3s ease,\n        background-color 0.3s ease;\n}\n\n.tt-featured__meta-item:hover {\n    transform: translateY(-3px);\n    border-color: rgba(204, 153, 51, 0.35);\n    background: #FFFFFF;\n}\n\n.tt-featured__meta-icon {\n    width: 38px;\n    height: 38px;\n    flex: 0 0 auto;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    border-radius: 11px;\n\n    background: rgba(96, 5, 45, 0.07);\n    color: var(--tt-bordeaux);\n}\n\n.tt-featured__meta-icon svg {\n    width: 18px;\n    height: 18px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.7;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n.tt-featured__meta-item > span:last-child {\n    display: flex;\n    flex-direction: column;\n    gap: 3px;\n}\n\n.tt-featured__meta-item small {\n    color: #8B7C82;\n    font-size: 9px;\n    font-weight: 600;\n    letter-spacing: 0.08em;\n    text-transform: uppercase;\n}\n\n.tt-featured__meta-item strong {\n    color: var(--tt-ink);\n    font-size: 12px;\n    font-weight: 700;\n}\n\n\/* =====================================================\n   TH\u00c9MATIQUES\n====================================================== *\/\n\n.tt-featured__themes {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 8px;\n\n    margin-top: 25px;\n}\n\n.tt-featured__themes span {\n    padding: 8px 12px;\n\n    border: 1px solid rgba(96, 5, 45, 0.11);\n    border-radius: 999px;\n\n    color: #6B5B61;\n    font-size: 9px;\n    font-weight: 600;\n    letter-spacing: 0.05em;\n}\n\n\/* =====================================================\n   BOUTONS\n====================================================== *\/\n\n.tt-featured__actions {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 12px;\n\n    margin-top: 31px;\n}\n\n.tt-featured__btn {\n    min-height: 55px;\n    padding: 0 21px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: 11px;\n\n    position: relative;\n    overflow: hidden;\n\n    border: 1px solid transparent;\n    border-radius: 999px;\n\n    font-size: 11px;\n    font-weight: 700;\n    letter-spacing: 0.035em;\n    text-decoration: none !important;\n\n    transition:\n        transform 0.32s ease,\n        background-color 0.32s ease,\n        border-color 0.32s ease,\n        color 0.32s ease,\n        box-shadow 0.32s ease;\n}\n\n.tt-featured__btn:hover {\n    transform: translateY(-3px);\n}\n\n.tt-featured__btn--primary {\n    background: var(--tt-bordeaux);\n    color: var(--tt-white);\n\n    box-shadow: 0 13px 32px rgba(96, 5, 45, 0.20);\n}\n\n.tt-featured__btn--primary:hover {\n    background: #75063A;\n    color: var(--tt-white);\n\n    box-shadow: 0 17px 38px rgba(96, 5, 45, 0.28);\n}\n\n.tt-featured__btn-icon {\n    width: 29px;\n    height: 29px;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    border-radius: 50%;\n    background: rgba(255,255,255,0.13);\n}\n\n.tt-featured__btn-icon svg {\n    width: 14px;\n    height: 14px;\n    margin-left: 2px;\n    fill: currentColor;\n}\n\n.tt-featured__btn--secondary {\n    border-color: rgba(96, 5, 45, 0.18);\n    background: transparent;\n    color: var(--tt-bordeaux);\n}\n\n.tt-featured__btn--secondary:hover {\n    border-color: var(--tt-gold);\n    background: rgba(204, 153, 51, 0.08);\n    color: var(--tt-bordeaux);\n}\n\n.tt-featured__btn--secondary > svg {\n    width: 17px;\n    height: 17px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.8;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n\n    transition: transform 0.3s ease;\n}\n\n.tt-featured__btn--secondary:hover > svg {\n    transform: translateX(4px);\n}\n\n\/* =====================================================\n   BAS DE SECTION\n====================================================== *\/\n\n.tt-featured__footer {\n    display: flex;\n    align-items: center;\n    gap: 24px;\n\n    margin-top: 50px;\n}\n\n.tt-featured__footer-line {\n    height: 1px;\n    flex: 1;\n\n    background:\n        linear-gradient(\n            90deg,\n            transparent,\n            rgba(96, 5, 45, 0.18),\n            transparent\n        );\n}\n\n.tt-featured__footer p {\n    margin: 0;\n\n    color: #8B7C82;\n    font-size: 9px;\n    font-weight: 700;\n    letter-spacing: 0.13em;\n    line-height: 1.6;\n    text-align: center;\n    text-transform: uppercase;\n}\n\n\/* =====================================================\n   ANIMATIONS\n====================================================== *\/\n\n@keyframes ttFeaturedPulse {\n    0% {\n        transform: scale(0.88);\n        opacity: 0;\n    }\n\n    30% {\n        opacity: 0.75;\n    }\n\n    100% {\n        transform: scale(1.28);\n        opacity: 0;\n    }\n}\n\n\/* =====================================================\n   TABLETTE\n====================================================== *\/\n\n@media (max-width: 1080px) {\n\n    .tt-featured {\n        padding-top: 100px;\n    }\n\n    .tt-featured__container {\n        width: min(100% - 48px, 920px);\n    }\n\n    .tt-featured__header {\n        grid-template-columns: 1fr;\n        gap: 25px;\n    }\n\n    .tt-featured__intro {\n        max-width: 650px;\n    }\n\n    .tt-featured__card {\n        grid-template-columns: 1fr;\n    }\n\n    .tt-featured__media {\n        min-height: 510px;\n    }\n\n    .tt-featured__content {\n        padding: 52px;\n    }\n\n}\n\n\/* =====================================================\n   MOBILE\n====================================================== *\/\n\n@media (max-width: 767px) {\n\n    .tt-featured {\n        padding: 82px 0 72px;\n    }\n\n    .tt-featured__container {\n        width: calc(100% - 32px);\n    }\n\n    .tt-featured__header {\n        margin-bottom: 36px;\n    }\n\n    .tt-featured__heading h2 {\n        font-size: 53px;\n    }\n\n    .tt-featured__intro {\n        font-size: 14px;\n        line-height: 1.75;\n    }\n\n    .tt-featured__card {\n        border-radius: 22px;\n    }\n\n    .tt-featured__media {\n        min-height: 390px;\n    }\n\n    .tt-featured__media-label {\n        top: 18px;\n        left: 18px;\n    }\n\n    .tt-featured__play {\n        left: 20px;\n        bottom: 23px;\n    }\n\n    .tt-featured__play-circle {\n        width: 57px;\n        height: 57px;\n    }\n\n    .tt-featured__play-text strong {\n        font-size: 17px;\n    }\n\n    .tt-featured__number {\n        right: 16px;\n        bottom: 9px;\n        font-size: 78px;\n    }\n\n    .tt-featured__content {\n        padding: 42px 22px 30px;\n    }\n\n    .tt-featured__content::before {\n        left: 22px;\n    }\n\n    .tt-featured__content h3 {\n        font-size: 37px;\n    }\n\n    .tt-featured__summary {\n        font-size: 14px;\n    }\n\n    .tt-featured__meta {\n        grid-template-columns: 1fr;\n    }\n\n    .tt-featured__actions {\n        flex-direction: column;\n    }\n\n    .tt-featured__btn {\n        width: 100%;\n    }\n\n    .tt-featured__footer {\n        gap: 12px;\n        margin-top: 38px;\n    }\n\n    .tt-featured__footer-line {\n        display: none;\n    }\n\n    .tt-featured__footer p {\n        width: 100%;\n    }\n\n}\n\n\/* =====================================================\n   PETITS MOBILES\n====================================================== *\/\n\n@media (max-width: 390px) {\n\n    .tt-featured__media {\n        min-height: 345px;\n    }\n\n    .tt-featured__play-text small {\n        display: none;\n    }\n\n    .tt-featured__content h3 {\n        font-size: 33px;\n    }\n\n}\n\n\/* =====================================================\n   ACCESSIBILIT\u00c9\n====================================================== *\/\n\n@media (prefers-reduced-motion: reduce) {\n\n    .tt-featured__play-circle::before {\n        animation: none;\n    }\n\n    .tt-featured__media img,\n    .tt-featured__meta-item,\n    .tt-featured__btn {\n        transition: none;\n    }\n\n}\n<\/style>\n\n<script>\n(function () {\n\n    function initFeaturedSection() {\n\n        const section = document.querySelector(\".tt-featured\");\n\n        if (!section || section.dataset.initialized === \"true\") return;\n\n        section.dataset.initialized = \"true\";\n\n        const internalLinks = section.querySelectorAll('a[href^=\"#\"]');\n\n        internalLinks.forEach(function (link) {\n\n            link.addEventListener(\"click\", function (event) {\n\n                const targetSelector = link.getAttribute(\"href\");\n\n                if (!targetSelector || targetSelector === \"#\") return;\n\n                const target = document.querySelector(targetSelector);\n\n                if (target) {\n\n                    event.preventDefault();\n\n                    target.scrollIntoView({\n                        behavior: \"smooth\",\n                        block: \"start\"\n                    });\n\n                }\n\n            });\n\n        });\n\n    }\n\n    if (document.readyState === \"loading\") {\n        document.addEventListener(\"DOMContentLoaded\", initFeaturedSection);\n    } else {\n        initFeaturedSection();\n    }\n\n    window.addEventListener(\"load\", initFeaturedSection);\n\n    setTimeout(initFeaturedSection, 400);\n\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-618fb5e e-con e-atomic-element e-flexbox-base e-15e137e \" data-id=\"618fb5e\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"618fb5e\" data-e-type=\"e-flexbox\" data-id=\"618fb5e\">\n    \t\t<div class=\"elementor-element elementor-element-61a8e06 elementor-widget elementor-widget-html\" data-id=\"61a8e06\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =====================================================\n     T\u00c9L\u00c9-TH\u00c9\u00c2TRE ATB \u2014 SECTION 03 : NOS PRODUCTIONS\n     Compatible WordPress + Elementor\n====================================================== -->\n\n<section class=\"tt-library\" id=\"atb-creations\">\n\n    <div class=\"tt-library__ornament tt-library__ornament--left\" aria-hidden=\"true\"><\/div>\n    <div class=\"tt-library__ornament tt-library__ornament--right\" aria-hidden=\"true\"><\/div>\n\n    <div class=\"tt-library__container\">\n\n        <!-- En-t\u00eate -->\n        <header class=\"tt-library__header\">\n\n            <div class=\"tt-library__heading\">\n\n                <span class=\"tt-library__eyebrow\">\n                    <i><\/i>\n                    La m\u00e9moire audiovisuelle de l\u2019ATB\n                <\/span>\n\n                <h2>\n                    Nos <em>productions<\/em>\n                <\/h2>\n\n            <\/div>\n\n            <p class=\"tt-library__intro\">\n                Explorez les spectacles film\u00e9s, les cr\u00e9ations de th\u00e9\u00e2tre forum,\n                les captations de festivals, les documentaires et les contenus\n                p\u00e9dagogiques produits par l\u2019Atelier Th\u00e9\u00e2tre Burkinab\u00e8.\n            <\/p>\n\n        <\/header>\n\n        <!-- Filtres -->\n        <div class=\"tt-library__filters\" aria-label=\"Filtrer les productions\">\n\n            <button\n                type=\"button\"\n                class=\"tt-library__filter is-active\"\n                data-filter=\"all\"\n                aria-pressed=\"true\"\n            >\n                Toutes\n                <span>06<\/span>\n            <\/button>\n\n            <button\n                type=\"button\"\n                class=\"tt-library__filter\"\n                data-filter=\"theatre-forum\"\n                aria-pressed=\"false\"\n            >\n                Th\u00e9\u00e2tre forum\n                <span>02<\/span>\n            <\/button>\n\n            <button\n                type=\"button\"\n                class=\"tt-library__filter\"\n                data-filter=\"captation\"\n                aria-pressed=\"false\"\n            >\n                Captations\n                <span>01<\/span>\n            <\/button>\n\n            <button\n                type=\"button\"\n                class=\"tt-library__filter\"\n                data-filter=\"pedagogique\"\n                aria-pressed=\"false\"\n            >\n                P\u00e9dagogique\n                <span>01<\/span>\n            <\/button>\n\n            <button\n                type=\"button\"\n                class=\"tt-library__filter\"\n                data-filter=\"documentaire\"\n                aria-pressed=\"false\"\n            >\n                Documentaires\n                <span>01<\/span>\n            <\/button>\n\n            <button\n                type=\"button\"\n                class=\"tt-library__filter\"\n                data-filter=\"festival\"\n                aria-pressed=\"false\"\n            >\n                Festivals\n                <span>01<\/span>\n            <\/button>\n\n        <\/div>\n\n        <!-- Grille -->\n        <div class=\"tt-library__grid\">\n\n            <!-- =================================================\n                 CARTE 01\n            ================================================== -->\n\n            <article\n                class=\"tt-production\"\n                data-category=\"theatre-forum\"\n            >\n\n                <div class=\"tt-production__media\">\n\n                    <img decoding=\"async\"\n                        src=\"https:\/\/img.youtube.com\/vi\/7R-m1JzKoKM\/maxresdefault.jpg\"\n                        alt=\"Production audiovisuelle officielle de l\u2019ATB\"\n                        loading=\"lazy\"\n                    >\n\n                    <span class=\"tt-production__overlay\" aria-hidden=\"true\"><\/span>\n\n                    <span class=\"tt-production__status tt-production__status--free\">\n                        Gratuit\n                    <\/span>\n\n                    <span class=\"tt-production__duration\">\n                        Dur\u00e9e \u00e0 confirmer\n                    <\/span>\n\n                    <a href=\"https:\/\/youtu.be\/7R-m1JzKoKM?si=2DEWyaplyddyzmRr\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"tt-production__play\" aria-label=\"Regarder la production\">\n                        <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                            <path d=\"M8 5v14l11-7z\"><\/path>\n                        <\/svg>\n                    <\/a>\n\n                <\/div>\n\n                <div class=\"tt-production__body\">\n\n                    <p class=\"tt-production__type\">\n                        Th\u00e9\u00e2tre forum\n                    <\/p>\n\n                    <h3>\n                        Le th\u00e9\u00e2tre au service du d\u00e9veloppement\n                    <\/h3>\n\n                    <p class=\"tt-production__summary\">\n                        Une immersion dans l\u2019univers de l\u2019ATB et dans sa mani\u00e8re\n                        d\u2019utiliser la cr\u00e9ation th\u00e9\u00e2trale comme outil de dialogue\n                        et de transformation sociale.\n                    <\/p>\n\n                    <div class=\"tt-production__details\">\n\n                        <span>\n                            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                                <circle cx=\"12\" cy=\"12\" r=\"9\"><\/circle>\n                                <path d=\"M12 7v5l3 2\"><\/path>\n                            <\/svg>\n\n                            Vid\u00e9o\n                        <\/span>\n\n                        <span>\n                            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                                <circle cx=\"12\" cy=\"12\" r=\"9\"><\/circle>\n                                <path d=\"M3 12h18\"><\/path>\n                                <path d=\"M12 3a15 15 0 0 1 0 18\"><\/path>\n                                <path d=\"M12 3a15 15 0 0 0 0 18\"><\/path>\n                            <\/svg>\n\n                            Fran\u00e7ais\n                        <\/span>\n\n                    <\/div>\n\n                    <div class=\"tt-production__themes\">\n                        <span>Citoyennet\u00e9<\/span>\n                        <span>Culture<\/span>\n                    <\/div>\n\n                    <a href=\"https:\/\/youtu.be\/7R-m1JzKoKM?si=2DEWyaplyddyzmRr\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"tt-production__cta\">\n                        <span>Regarder<\/span>\n\n                        <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                            <path d=\"M5 12h14\"><\/path>\n                            <path d=\"m13 6 6 6-6 6\"><\/path>\n                        <\/svg>\n                    <\/a>\n\n                <\/div>\n\n            <\/article>\n\n            <!-- =================================================\n                 CARTE 02\n            ================================================== -->\n\n            <article\n                class=\"tt-production\"\n                data-category=\"theatre-forum\"\n            >\n\n                <div class=\"tt-production__media\">\n\n                    <img decoding=\"async\"\n                        src=\"http:\/\/atb.bf\/atb-v2\/wp-content\/uploads\/2026\/01\/67779851_1247256172117565_5487029657914048512_n.jpg\"\n                        alt=\"Spectacle de th\u00e9\u00e2tre forum de l\u2019ATB\"\n                        loading=\"lazy\"\n                    >\n\n                    <span class=\"tt-production__overlay\" aria-hidden=\"true\"><\/span>\n\n                    <span class=\"tt-production__status tt-production__status--trailer\">\n                        Bande-annonce\n                    <\/span>\n\n                    <span class=\"tt-production__duration\">\n                        52 min\n                    <\/span>\n\n                    <a\n                        href=\"#\"\n                        class=\"tt-production__play\"\n                        aria-label=\"Voir la bande-annonce\"\n                    >\n                        <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                            <path d=\"M8 5v14l11-7z\"><\/path>\n                        <\/svg>\n                    <\/a>\n\n                <\/div>\n\n                <div class=\"tt-production__body\">\n\n                    <p class=\"tt-production__type\">\n                        Th\u00e9\u00e2tre forum\n                    <\/p>\n\n                    <h3>\n                        Oui, mais\u2026\n                    <\/h3>\n\n                    <p class=\"tt-production__summary\">\n                        Une cr\u00e9ation autour de la capacit\u00e9 des communaut\u00e9s \u00e0\n                        affronter les difficult\u00e9s, \u00e0 d\u00e9battre et \u00e0 rechercher\n                        collectivement de nouvelles solutions.\n                    <\/p>\n\n                    <div class=\"tt-production__details\">\n\n                        <span>\n                            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                                <circle cx=\"12\" cy=\"12\" r=\"9\"><\/circle>\n                                <path d=\"M12 7v5l3 2\"><\/path>\n                            <\/svg>\n\n                            52 min\n                        <\/span>\n\n                        <span>\n                            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                                <circle cx=\"12\" cy=\"12\" r=\"9\"><\/circle>\n                                <path d=\"M3 12h18\"><\/path>\n                                <path d=\"M12 3a15 15 0 0 1 0 18\"><\/path>\n                                <path d=\"M12 3a15 15 0 0 0 0 18\"><\/path>\n                            <\/svg>\n\n                            Fran\u00e7ais\n                        <\/span>\n\n                    <\/div>\n\n                    <div class=\"tt-production__themes\">\n                        <span>R\u00e9silience<\/span>\n                        <span>Dialogue<\/span>\n                    <\/div>\n\n                    <a href=\"#\" class=\"tt-production__cta\">\n\n                        <span>Voir la bande-annonce<\/span>\n\n                        <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                            <path d=\"M5 12h14\"><\/path>\n                            <path d=\"m13 6 6 6-6 6\"><\/path>\n                        <\/svg>\n\n                    <\/a>\n\n                <\/div>\n\n            <\/article>\n\n            <!-- =================================================\n                 CARTE 03\n            ================================================== -->\n\n            <article\n                class=\"tt-production\"\n                data-category=\"captation\"\n            >\n\n                <div class=\"tt-production__media\">\n\n                    <img decoding=\"async\"\n                        src=\"http:\/\/atb.bf\/atb-v2\/wp-content\/uploads\/2026\/07\/695178219_10236705458229575_281678318670507282_n.jpg\"\n                        alt=\"Captation d\u2019un spectacle de l\u2019ATB\"\n                        loading=\"lazy\"\n                    >\n\n                    <span class=\"tt-production__overlay\" aria-hidden=\"true\"><\/span>\n\n                    <span class=\"tt-production__status tt-production__status--soon\">\n                        Prochainement\n                    <\/span>\n\n                    <span class=\"tt-production__duration\">\n                        Captation\n                    <\/span>\n\n                    <span\n                        class=\"tt-production__play tt-production__play--disabled\"\n                        aria-hidden=\"true\"\n                    >\n                        <svg viewBox=\"0 0 24 24\">\n                            <path d=\"M8 5v14l11-7z\"><\/path>\n                        <\/svg>\n                    <\/span>\n\n                <\/div>\n\n                <div class=\"tt-production__body\">\n\n                    <p class=\"tt-production__type\">\n                        Captation de spectacle\n                    <\/p>\n\n                    <h3>\n                        Une sc\u00e8ne, une m\u00e9moire\n                    <\/h3>\n\n                    <p class=\"tt-production__summary\">\n                        Une captation immersive qui conserve la force du jeu,\n                        les r\u00e9actions du public et l\u2019\u00e9nergie particuli\u00e8re d\u2019une\n                        repr\u00e9sentation en direct.\n                    <\/p>\n\n                    <div class=\"tt-production__details\">\n\n                        <span>\n                            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                                <circle cx=\"12\" cy=\"12\" r=\"9\"><\/circle>\n                                <path d=\"M12 7v5l3 2\"><\/path>\n                            <\/svg>\n\n                            \u00c0 confirmer\n                        <\/span>\n\n                        <span>\n                            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                                <path d=\"M4 5h16v14H4z\"><\/path>\n                                <path d=\"m9 9 6 3-6 3z\"><\/path>\n                            <\/svg>\n\n                            Spectacle\n                        <\/span>\n\n                    <\/div>\n\n                    <div class=\"tt-production__themes\">\n                        <span>Sc\u00e8ne<\/span>\n                        <span>Patrimoine<\/span>\n                    <\/div>\n\n                    <a href=\"#tt-diffusion-pro\" class=\"tt-production__cta\">\n\n                        <span>\u00catre inform\u00e9<\/span>\n\n                        <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                            <path d=\"M5 12h14\"><\/path>\n                            <path d=\"m13 6 6 6-6 6\"><\/path>\n                        <\/svg>\n\n                    <\/a>\n\n                <\/div>\n\n            <\/article>\n\n            <!-- =================================================\n                 CARTE 04\n            ================================================== -->\n\n            <article\n                class=\"tt-production\"\n                data-category=\"pedagogique\"\n            >\n\n                <div class=\"tt-production__media\">\n\n                    <img decoding=\"async\"\n                        src=\"http:\/\/atb.bf\/atb-v2\/wp-content\/uploads\/2026\/01\/496254009_2894000690776430_5070873447038579215_n.jpg\"\n                        alt=\"Formation et contenu p\u00e9dagogique de l\u2019ATB\"\n                        loading=\"lazy\"\n                    >\n\n                    <span class=\"tt-production__overlay\" aria-hidden=\"true\"><\/span>\n\n                    <span class=\"tt-production__status tt-production__status--request\">\n                        Sur demande\n                    <\/span>\n\n                    <span class=\"tt-production__duration\">\n                        Module p\u00e9dagogique\n                    <\/span>\n\n                    <a\n                        href=\"#tt-diffusion-pro\"\n                        class=\"tt-production__play\"\n                        aria-label=\"Demander l\u2019acc\u00e8s au contenu\"\n                    >\n                        <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                            <path d=\"M8 5v14l11-7z\"><\/path>\n                        <\/svg>\n                    <\/a>\n\n                <\/div>\n\n                <div class=\"tt-production__body\">\n\n                    <p class=\"tt-production__type\">\n                        Contenu p\u00e9dagogique\n                    <\/p>\n\n                    <h3>\n                        Comprendre le th\u00e9\u00e2tre forum\n                    <\/h3>\n\n                    <p class=\"tt-production__summary\">\n                        Un contenu destin\u00e9 aux \u00e9tudiants, formateurs,\n                        associations et organisations souhaitant d\u00e9couvrir\n                        les principes du th\u00e9\u00e2tre participatif.\n                    <\/p>\n\n                    <div class=\"tt-production__details\">\n\n                        <span>\n                            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                                <path d=\"M4 5h16v14H4z\"><\/path>\n                                <path d=\"m9 9 6 3-6 3z\"><\/path>\n                            <\/svg>\n\n                            Formation\n                        <\/span>\n\n                        <span>\n                            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                                <circle cx=\"12\" cy=\"12\" r=\"9\"><\/circle>\n                                <path d=\"M3 12h18\"><\/path>\n                                <path d=\"M12 3a15 15 0 0 1 0 18\"><\/path>\n                                <path d=\"M12 3a15 15 0 0 0 0 18\"><\/path>\n                            <\/svg>\n\n                            Fran\u00e7ais\n                        <\/span>\n\n                    <\/div>\n\n                    <div class=\"tt-production__themes\">\n                        <span>Formation<\/span>\n                        <span>M\u00e9thodologie<\/span>\n                    <\/div>\n\n                    <a href=\"#tt-diffusion-pro\" class=\"tt-production__cta\">\n\n                        <span>Demander l\u2019acc\u00e8s<\/span>\n\n                        <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                            <path d=\"M5 12h14\"><\/path>\n                            <path d=\"m13 6 6 6-6 6\"><\/path>\n                        <\/svg>\n\n                    <\/a>\n\n                <\/div>\n\n            <\/article>\n\n            <!-- =================================================\n                 CARTE 05\n            ================================================== -->\n\n            <article\n                class=\"tt-production\"\n                data-category=\"documentaire\"\n            >\n\n                <div class=\"tt-production__media\">\n\n                    <img decoding=\"async\"\n                        src=\"http:\/\/atb.bf\/atb-v2\/wp-content\/uploads\/2026\/07\/487497570_10231105697359053_7434226162108488804_n.jpg\"\n                        alt=\"Documentaire sur l\u2019histoire et les activit\u00e9s de l\u2019ATB\"\n                        loading=\"lazy\"\n                    >\n\n                    <span class=\"tt-production__overlay\" aria-hidden=\"true\"><\/span>\n\n                    <span class=\"tt-production__status tt-production__status--premium\">\n                        Acc\u00e8s futur\n                    <\/span>\n\n                    <span class=\"tt-production__duration\">\n                        Documentaire\n                    <\/span>\n\n                    <span\n                        class=\"tt-production__play tt-production__play--disabled\"\n                        aria-hidden=\"true\"\n                    >\n                        <svg viewBox=\"0 0 24 24\">\n                            <path d=\"M8 5v14l11-7z\"><\/path>\n                        <\/svg>\n                    <\/span>\n\n                <\/div>\n\n                <div class=\"tt-production__body\">\n\n                    <p class=\"tt-production__type\">\n                        Documentaire\n                    <\/p>\n\n                    <h3>\n                        Dans les coulisses de l\u2019ATB\n                    <\/h3>\n\n                    <p class=\"tt-production__summary\">\n                        Une plong\u00e9e dans la cr\u00e9ation, les r\u00e9p\u00e9titions, les\n                        tourn\u00e9es et le travail quotidien des artistes et\n                        techniciens de l\u2019Atelier Th\u00e9\u00e2tre Burkinab\u00e8.\n                    <\/p>\n\n                    <div class=\"tt-production__details\">\n\n                        <span>\n                            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                                <circle cx=\"12\" cy=\"12\" r=\"9\"><\/circle>\n                                <path d=\"M12 7v5l3 2\"><\/path>\n                            <\/svg>\n\n                            \u00c0 confirmer\n                        <\/span>\n\n                        <span>\n                            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                                <path d=\"M4 5h16v14H4z\"><\/path>\n                                <path d=\"m9 9 6 3-6 3z\"><\/path>\n                            <\/svg>\n\n                            Archive\n                        <\/span>\n\n                    <\/div>\n\n                    <div class=\"tt-production__themes\">\n                        <span>Histoire<\/span>\n                        <span>Coulisses<\/span>\n                    <\/div>\n\n                    <a href=\"#tt-diffusion-pro\" class=\"tt-production__cta\">\n\n                        <span>D\u00e9couvrir prochainement<\/span>\n\n                        <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                            <path d=\"M5 12h14\"><\/path>\n                            <path d=\"m13 6 6 6-6 6\"><\/path>\n                        <\/svg>\n\n                    <\/a>\n\n                <\/div>\n\n            <\/article>\n\n            <!-- =================================================\n                 CARTE 06\n            ================================================== -->\n\n            <article\n                class=\"tt-production\"\n                data-category=\"festival\"\n            >\n\n                <div class=\"tt-production__media\">\n\n                    <img decoding=\"async\"\n                        src=\"http:\/\/atb.bf\/atb-v2\/wp-content\/uploads\/2026\/07\/494150406_10231449426032055_8476935537419475583_n.jpg\"\n                        alt=\"Festival et rencontre culturelle \u00e0 l\u2019ATB\"\n                        loading=\"lazy\"\n                    >\n\n                    <span class=\"tt-production__overlay\" aria-hidden=\"true\"><\/span>\n\n                    <span class=\"tt-production__status tt-production__status--request\">\n                        Diffusion sur demande\n                    <\/span>\n\n                    <span class=\"tt-production__duration\">\n                        Festival\n                    <\/span>\n\n                    <a\n                        href=\"#tt-diffusion-pro\"\n                        class=\"tt-production__play\"\n                        aria-label=\"Demander la diffusion\"\n                    >\n                        <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                            <path d=\"M8 5v14l11-7z\"><\/path>\n                        <\/svg>\n                    <\/a>\n\n                <\/div>\n\n                <div class=\"tt-production__body\">\n\n                    <p class=\"tt-production__type\">\n                        Festival et archives\n                    <\/p>\n\n                    <h3>\n                        Les grandes rencontres de l\u2019ATB\n                    <\/h3>\n\n                    <p class=\"tt-production__summary\">\n                        Une s\u00e9lection de captations issues des festivals,\n                        concours, rencontres professionnelles et grands\n                        rendez-vous culturels accueillis par l\u2019ATB.\n                    <\/p>\n\n                    <div class=\"tt-production__details\">\n\n                        <span>\n                            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                                <path d=\"M4 5h16v14H4z\"><\/path>\n                                <path d=\"m9 9 6 3-6 3z\"><\/path>\n                            <\/svg>\n\n                            Collection\n                        <\/span>\n\n                        <span>\n                            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                                <circle cx=\"12\" cy=\"12\" r=\"9\"><\/circle>\n                                <path d=\"M3 12h18\"><\/path>\n                                <path d=\"M12 3a15 15 0 0 1 0 18\"><\/path>\n                                <path d=\"M12 3a15 15 0 0 0 0 18\"><\/path>\n                            <\/svg>\n\n                            Multilingue\n                        <\/span>\n\n                    <\/div>\n\n                    <div class=\"tt-production__themes\">\n                        <span>Festival<\/span>\n                        <span>Rencontres<\/span>\n                    <\/div>\n\n                    <a href=\"#tt-diffusion-pro\" class=\"tt-production__cta\">\n\n                        <span>Demander la diffusion<\/span>\n\n                        <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                            <path d=\"M5 12h14\"><\/path>\n                            <path d=\"m13 6 6 6-6 6\"><\/path>\n                        <\/svg>\n\n                    <\/a>\n\n                <\/div>\n\n            <\/article>\n\n        <\/div>\n\n        <!-- Message filtre vide -->\n        <div class=\"tt-library__empty\" hidden>\n            Aucune production ne correspond \u00e0 cette cat\u00e9gorie.\n        <\/div>\n\n        <!-- Bas de section -->\n        <div class=\"tt-library__bottom\">\n\n            <p>\n                La vid\u00e9oth\u00e8que sera enrichie progressivement avec de nouvelles\n                captations, archives et cr\u00e9ations audiovisuelles.\n            <\/p>\n\n            <a href=\"#tt-diffusion-pro\" class=\"tt-library__main-cta\">\n\n                <span>Demander une diffusion professionnelle<\/span>\n\n                <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                    <path d=\"M5 12h14\"><\/path>\n                    <path d=\"m13 6 6 6-6 6\"><\/path>\n                <\/svg>\n\n            <\/a>\n\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Archivo:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&display=swap');\n\n\/* =====================================================\n   SECTION\n====================================================== *\/\n\n.tt-library {\n    --ttl-bordeaux: #60052D;\n    --ttl-bordeaux-dark: #350018;\n    --ttl-gold: #CC9933;\n    --ttl-gold-light: #E3B85E;\n    --ttl-cream: #F7F0E7;\n    --ttl-cream-light: #FCF8F2;\n    --ttl-white: #FFFFFF;\n    --ttl-ink: #25191E;\n    --ttl-text: #685B60;\n\n    position: relative;\n    width: 100%;\n    overflow: hidden;\n    isolation: isolate;\n\n    padding: 120px 0;\n\n    background:\n        linear-gradient(\n            180deg,\n            #3A001B 0%,\n            var(--ttl-bordeaux-dark) 100%\n        );\n\n    color: var(--ttl-white);\n    font-family: \"Archivo\", sans-serif;\n}\n\n.tt-library::before {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    z-index: -3;\n    pointer-events: none;\n\n    background:\n        radial-gradient(\n            circle at 15% 10%,\n            rgba(204, 153, 51, 0.14),\n            transparent 27%\n        ),\n        radial-gradient(\n            circle at 92% 80%,\n            rgba(255, 255, 255, 0.055),\n            transparent 23%\n        );\n}\n\n.tt-library::after {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    z-index: -2;\n    pointer-events: none;\n    opacity: 0.08;\n\n    background-image:\n        linear-gradient(\n            rgba(255,255,255,0.22) 1px,\n            transparent 1px\n        ),\n        linear-gradient(\n            90deg,\n            rgba(255,255,255,0.22) 1px,\n            transparent 1px\n        );\n\n    background-size: 82px 82px;\n}\n\n.tt-library__ornament {\n    position: absolute;\n    z-index: -1;\n    pointer-events: none;\n    border: 1px solid rgba(204,153,51,0.17);\n    border-radius: 50%;\n}\n\n.tt-library__ornament--left {\n    width: 460px;\n    height: 460px;\n    left: -330px;\n    top: 260px;\n}\n\n.tt-library__ornament--right {\n    width: 620px;\n    height: 620px;\n    right: -480px;\n    bottom: 80px;\n}\n\n.tt-library__container {\n    width: min(1240px, calc(100% - 80px));\n    margin: 0 auto;\n}\n\n\/* =====================================================\n   EN-T\u00caTE\n====================================================== *\/\n\n.tt-library__header {\n    display: grid;\n    grid-template-columns: minmax(0, 0.9fr) minmax(320px, 0.6fr);\n    align-items: end;\n    gap: 80px;\n\n    margin-bottom: 50px;\n}\n\n.tt-library__eyebrow {\n    display: inline-flex;\n    align-items: center;\n    gap: 13px;\n\n    margin-bottom: 18px;\n\n    color: var(--ttl-gold);\n    font-size: 10px;\n    font-weight: 700;\n    letter-spacing: 0.17em;\n    text-transform: uppercase;\n}\n\n.tt-library__eyebrow i {\n    width: 40px;\n    height: 1px;\n    display: block;\n    background: var(--ttl-gold);\n}\n\n.tt-library__heading h2 {\n    margin: 0;\n\n    font-family: \"Fraunces\", serif;\n    font-size: clamp(52px, 6vw, 84px);\n    font-weight: 600;\n    line-height: 0.97;\n    letter-spacing: -0.045em;\n}\n\n.tt-library__heading h2 em {\n    color: var(--ttl-gold);\n    font-weight: 500;\n}\n\n.tt-library__intro {\n    max-width: 520px;\n    margin: 0 0 3px;\n\n    color: rgba(255,255,255,0.72);\n    font-size: 15px;\n    line-height: 1.85;\n}\n\n\/* =====================================================\n   FILTRES\n====================================================== *\/\n\n.tt-library__filters {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 10px;\n\n    margin-bottom: 42px;\n}\n\n.tt-library__filter {\n    min-height: 45px;\n    padding: 0 15px;\n\n    display: inline-flex;\n    align-items: center;\n    gap: 9px;\n\n    border: 1px solid rgba(255,255,255,0.15);\n    border-radius: 999px;\n\n    background: rgba(255,255,255,0.045);\n    color: rgba(255,255,255,0.76);\n\n    font-family: \"Archivo\", sans-serif;\n    font-size: 10px;\n    font-weight: 700;\n    letter-spacing: 0.045em;\n\n    cursor: pointer;\n\n    transition:\n        background-color 0.3s ease,\n        border-color 0.3s ease,\n        color 0.3s ease,\n        transform 0.3s ease;\n}\n\n.tt-library__filter span {\n    min-width: 23px;\n    height: 23px;\n    padding: 0 5px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    border-radius: 50%;\n\n    background: rgba(255,255,255,0.09);\n    color: rgba(255,255,255,0.67);\n\n    font-size: 8px;\n}\n\n.tt-library__filter:hover {\n    transform: translateY(-2px);\n    border-color: rgba(204,153,51,0.48);\n    color: var(--ttl-white);\n}\n\n.tt-library__filter.is-active {\n    border-color: var(--ttl-gold);\n    background: var(--ttl-gold);\n    color: #2E1805;\n}\n\n.tt-library__filter.is-active span {\n    background: rgba(46,24,5,0.13);\n    color: #2E1805;\n}\n\n\/* =====================================================\n   GRILLE\n====================================================== *\/\n\n.tt-library__grid {\n    display: grid;\n    grid-template-columns: repeat(3, minmax(0, 1fr));\n    gap: 25px;\n}\n\n.tt-production {\n    min-width: 0;\n    overflow: hidden;\n\n    display: flex;\n    flex-direction: column;\n\n    border: 1px solid rgba(255,255,255,0.10);\n    border-radius: 22px;\n\n    background: rgba(255,255,255,0.065);\n\n    box-shadow: 0 18px 48px rgba(0,0,0,0.14);\n\n    backdrop-filter: blur(8px);\n    -webkit-backdrop-filter: blur(8px);\n\n    transition:\n        transform 0.45s cubic-bezier(.2,.7,.2,1),\n        border-color 0.35s ease,\n        box-shadow 0.45s ease,\n        opacity 0.3s ease;\n}\n\n.tt-production:hover {\n    transform: translateY(-9px);\n    border-color: rgba(204,153,51,0.40);\n\n    box-shadow:\n        0 28px 65px rgba(0,0,0,0.25),\n        0 0 0 1px rgba(204,153,51,0.05);\n}\n\n.tt-production.is-hidden {\n    display: none;\n}\n\n\/* =====================================================\n   M\u00c9DIA\n====================================================== *\/\n\n.tt-production__media {\n    position: relative;\n    height: 240px;\n    overflow: hidden;\n\n    background: #20000F;\n}\n\n.tt-production__media img {\n    width: 100%;\n    height: 100%;\n\n    display: block;\n\n    object-fit: cover;\n    object-position: center;\n\n    transform: scale(1.02);\n\n    transition:\n        transform 0.85s cubic-bezier(.2,.7,.2,1),\n        filter 0.55s ease;\n}\n\n.tt-production:hover .tt-production__media img {\n    transform: scale(1.09);\n    filter: saturate(1.08);\n}\n\n.tt-production__overlay {\n    position: absolute;\n    inset: 0;\n\n    background:\n        linear-gradient(\n            180deg,\n            rgba(20,0,10,0.05) 0%,\n            rgba(20,0,10,0.16) 48%,\n            rgba(20,0,10,0.80) 100%\n        );\n}\n\n.tt-production__status {\n    position: absolute;\n    top: 17px;\n    left: 17px;\n\n    max-width: calc(100% - 34px);\n    padding: 8px 11px;\n\n    border-radius: 999px;\n\n    font-size: 8px;\n    font-weight: 700;\n    letter-spacing: 0.12em;\n    line-height: 1.3;\n    text-transform: uppercase;\n\n    backdrop-filter: blur(12px);\n    -webkit-backdrop-filter: blur(12px);\n}\n\n.tt-production__status--free {\n    background: rgba(49, 142, 82, 0.88);\n    color: #FFFFFF;\n}\n\n.tt-production__status--trailer {\n    background: rgba(204,153,51,0.92);\n    color: #2D1805;\n}\n\n.tt-production__status--soon {\n    background: rgba(255,255,255,0.88);\n    color: var(--ttl-bordeaux);\n}\n\n.tt-production__status--request {\n    background: rgba(96,5,45,0.88);\n    color: var(--ttl-white);\n}\n\n.tt-production__status--premium {\n    border: 1px solid rgba(204,153,51,0.58);\n    background: rgba(24,0,11,0.72);\n    color: var(--ttl-gold-light);\n}\n\n.tt-production__duration {\n    position: absolute;\n    left: 18px;\n    bottom: 17px;\n\n    color: rgba(255,255,255,0.78);\n    font-size: 8px;\n    font-weight: 700;\n    letter-spacing: 0.11em;\n    text-transform: uppercase;\n}\n\n.tt-production__play {\n    position: absolute;\n    right: 17px;\n    bottom: 15px;\n\n    width: 49px;\n    height: 49px;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    border-radius: 50%;\n\n    background: var(--ttl-gold);\n    color: #2C1705;\n    text-decoration: none !important;\n\n    box-shadow:\n        0 10px 28px rgba(204,153,51,0.25),\n        0 0 0 7px rgba(255,255,255,0.08);\n\n    transition:\n        transform 0.3s ease,\n        box-shadow 0.3s ease;\n}\n\n.tt-production__play:hover {\n    transform: scale(1.09);\n    color: #2C1705;\n\n    box-shadow:\n        0 14px 35px rgba(204,153,51,0.38),\n        0 0 0 9px rgba(255,255,255,0.11);\n}\n\n.tt-production__play svg {\n    width: 20px;\n    height: 20px;\n    margin-left: 3px;\n    fill: currentColor;\n}\n\n.tt-production__play--disabled {\n    background: rgba(255,255,255,0.17);\n    color: rgba(255,255,255,0.52);\n    box-shadow: none;\n}\n\n\/* =====================================================\n   CONTENU\n====================================================== *\/\n\n.tt-production__body {\n    flex: 1;\n\n    display: flex;\n    flex-direction: column;\n\n    padding: 25px 24px 24px;\n}\n\n.tt-production__type {\n    margin: 0 0 11px;\n\n    color: var(--ttl-gold);\n    font-size: 8px;\n    font-weight: 700;\n    letter-spacing: 0.15em;\n    text-transform: uppercase;\n}\n\n.tt-production__body h3 {\n    margin: 0;\n\n    color: var(--ttl-white);\n    font-family: \"Fraunces\", serif;\n    font-size: 27px;\n    font-weight: 600;\n    line-height: 1.12;\n    letter-spacing: -0.025em;\n}\n\n.tt-production__summary {\n    margin: 15px 0 0;\n\n    color: rgba(255,255,255,0.65);\n    font-size: 13px;\n    line-height: 1.72;\n}\n\n.tt-production__details {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 14px;\n\n    margin-top: 19px;\n    padding-top: 17px;\n\n    border-top: 1px solid rgba(255,255,255,0.10);\n}\n\n.tt-production__details span {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n\n    color: rgba(255,255,255,0.58);\n    font-size: 9px;\n    font-weight: 600;\n}\n\n.tt-production__details svg {\n    width: 15px;\n    height: 15px;\n\n    fill: none;\n    stroke: var(--ttl-gold);\n    stroke-width: 1.6;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n.tt-production__themes {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 7px;\n\n    margin-top: 18px;\n}\n\n.tt-production__themes span {\n    padding: 7px 10px;\n\n    border: 1px solid rgba(255,255,255,0.11);\n    border-radius: 999px;\n\n    color: rgba(255,255,255,0.62);\n    font-size: 8px;\n    font-weight: 600;\n    letter-spacing: 0.035em;\n}\n\n\/* =====================================================\n   CTA CARTE\n====================================================== *\/\n\n.tt-production__cta {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 12px;\n\n    margin-top: auto;\n    padding-top: 23px;\n\n    color: var(--ttl-white);\n    font-size: 10px;\n    font-weight: 700;\n    letter-spacing: 0.04em;\n    text-decoration: none !important;\n\n    transition: color 0.3s ease;\n}\n\n.tt-production__cta svg {\n    width: 18px;\n    height: 18px;\n\n    fill: none;\n    stroke: var(--ttl-gold);\n    stroke-width: 1.8;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n\n    transition: transform 0.3s ease;\n}\n\n.tt-production__cta:hover {\n    color: var(--ttl-gold-light);\n}\n\n.tt-production__cta:hover svg {\n    transform: translateX(5px);\n}\n\n\/* =====================================================\n   MESSAGE VIDE\n====================================================== *\/\n\n.tt-library__empty {\n    margin-top: 30px;\n    padding: 25px;\n\n    border: 1px solid rgba(255,255,255,0.10);\n    border-radius: 16px;\n\n    color: rgba(255,255,255,0.65);\n    text-align: center;\n}\n\n\/* =====================================================\n   BAS DE SECTION\n====================================================== *\/\n\n.tt-library__bottom {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 35px;\n\n    margin-top: 52px;\n    padding-top: 34px;\n\n    border-top: 1px solid rgba(255,255,255,0.11);\n}\n\n.tt-library__bottom p {\n    max-width: 580px;\n    margin: 0;\n\n    color: rgba(255,255,255,0.57);\n    font-size: 13px;\n    line-height: 1.7;\n}\n\n.tt-library__main-cta {\n    min-height: 54px;\n    padding: 0 21px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: 11px;\n\n    flex: 0 0 auto;\n\n    border-radius: 999px;\n\n    background: var(--ttl-gold);\n    color: #2D1805;\n    text-decoration: none !important;\n\n    font-size: 10px;\n    font-weight: 700;\n    letter-spacing: 0.04em;\n\n    box-shadow: 0 14px 36px rgba(204,153,51,0.20);\n\n    transition:\n        transform 0.3s ease,\n        background-color 0.3s ease,\n        box-shadow 0.3s ease;\n}\n\n.tt-library__main-cta:hover {\n    transform: translateY(-3px);\n    background: var(--ttl-gold-light);\n    color: #2D1805;\n\n    box-shadow: 0 18px 42px rgba(204,153,51,0.30);\n}\n\n.tt-library__main-cta svg {\n    width: 17px;\n    height: 17px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.8;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n\/* =====================================================\n   TABLETTE\n====================================================== *\/\n\n@media (max-width: 1080px) {\n\n    .tt-library {\n        padding: 100px 0;\n    }\n\n    .tt-library__container {\n        width: min(100% - 48px, 930px);\n    }\n\n    .tt-library__header {\n        grid-template-columns: 1fr;\n        gap: 24px;\n    }\n\n    .tt-library__intro {\n        max-width: 680px;\n    }\n\n    .tt-library__grid {\n        grid-template-columns: repeat(2, minmax(0, 1fr));\n    }\n\n}\n\n\/* =====================================================\n   MOBILE\n====================================================== *\/\n\n@media (max-width: 767px) {\n\n    .tt-library {\n        padding: 80px 0 72px;\n    }\n\n    .tt-library__container {\n        width: calc(100% - 32px);\n    }\n\n    .tt-library__header {\n        margin-bottom: 35px;\n    }\n\n    .tt-library__heading h2 {\n        font-size: 51px;\n    }\n\n    .tt-library__intro {\n        font-size: 14px;\n        line-height: 1.75;\n    }\n\n    .tt-library__filters {\n        display: grid;\n        grid-template-columns: repeat(2, minmax(0, 1fr));\n        gap: 8px;\n    }\n\n    .tt-library__filter {\n        width: 100%;\n        justify-content: space-between;\n        padding: 0 12px;\n    }\n\n    .tt-library__grid {\n        grid-template-columns: 1fr;\n    }\n\n    .tt-production__media {\n        height: 245px;\n    }\n\n    .tt-production__body h3 {\n        font-size: 28px;\n    }\n\n    .tt-library__bottom {\n        align-items: flex-start;\n        flex-direction: column;\n    }\n\n    .tt-library__main-cta {\n        width: 100%;\n    }\n\n}\n\n\/* =====================================================\n   PETITS MOBILES\n====================================================== *\/\n\n@media (max-width: 390px) {\n\n    .tt-library__filters {\n        grid-template-columns: 1fr;\n    }\n\n    .tt-production__media {\n        height: 220px;\n    }\n\n}\n\n\/* =====================================================\n   ACCESSIBILIT\u00c9\n====================================================== *\/\n\n@media (prefers-reduced-motion: reduce) {\n\n    .tt-production,\n    .tt-production__media img,\n    .tt-production__play,\n    .tt-production__cta svg,\n    .tt-library__filter,\n    .tt-library__main-cta {\n        transition: none;\n    }\n\n}\n<\/style>\n\n<script>\n(function () {\n\n    function initTeleTheatreLibrary() {\n\n        const libraries = document.querySelectorAll(\n            \".tt-library:not([data-library-initialized])\"\n        );\n\n        libraries.forEach(function (library) {\n\n            library.setAttribute(\n                \"data-library-initialized\",\n                \"true\"\n            );\n\n            const filters = library.querySelectorAll(\n                \".tt-library__filter\"\n            );\n\n            const productions = library.querySelectorAll(\n                \".tt-production\"\n            );\n\n            const emptyMessage = library.querySelector(\n                \".tt-library__empty\"\n            );\n\n            filters.forEach(function (filterButton) {\n\n                filterButton.addEventListener(\n                    \"click\",\n                    function () {\n\n                        const selectedFilter =\n                            filterButton.getAttribute(\"data-filter\");\n\n                        filters.forEach(function (button) {\n\n                            const isCurrent =\n                                button === filterButton;\n\n                            button.classList.toggle(\n                                \"is-active\",\n                                isCurrent\n                            );\n\n                            button.setAttribute(\n                                \"aria-pressed\",\n                                isCurrent ? \"true\" : \"false\"\n                            );\n\n                        });\n\n                        let visibleCount = 0;\n\n                        productions.forEach(function (production) {\n\n                            const category =\n                                production.getAttribute(\"data-category\");\n\n                            const shouldShow =\n                                selectedFilter === \"all\" ||\n                                category === selectedFilter;\n\n                            production.classList.toggle(\n                                \"is-hidden\",\n                                !shouldShow\n                            );\n\n                            if (shouldShow) {\n                                visibleCount++;\n                            }\n\n                        });\n\n                        if (emptyMessage) {\n                            emptyMessage.hidden =\n                                visibleCount !== 0;\n                        }\n\n                    }\n                );\n\n            });\n\n            const internalLinks =\n                library.querySelectorAll('a[href^=\"#\"]');\n\n            internalLinks.forEach(function (link) {\n\n                link.addEventListener(\n                    \"click\",\n                    function (event) {\n\n                        const selector =\n                            link.getAttribute(\"href\");\n\n                        if (!selector || selector === \"#\") {\n                            event.preventDefault();\n                            return;\n                        }\n\n                        const target =\n                            document.querySelector(selector);\n\n                        if (target) {\n\n                            event.preventDefault();\n\n                            target.scrollIntoView({\n                                behavior: \"smooth\",\n                                block: \"start\"\n                            });\n\n                        }\n\n                    }\n                );\n\n            });\n\n        });\n\n    }\n\n    if (document.readyState === \"loading\") {\n\n        document.addEventListener(\n            \"DOMContentLoaded\",\n            initTeleTheatreLibrary\n        );\n\n    } else {\n\n        initTeleTheatreLibrary();\n\n    }\n\n    window.addEventListener(\n        \"load\",\n        initTeleTheatreLibrary\n    );\n\n    setTimeout(\n        initTeleTheatreLibrary,\n        350\n    );\n\n    setTimeout(\n        initTeleTheatreLibrary,\n        1000\n    );\n\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-5ed1365 e-con e-atomic-element e-flexbox-base e-215f70e \" data-id=\"5ed1365\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"5ed1365\" data-e-type=\"e-flexbox\" data-id=\"5ed1365\">\n    \t\t<div class=\"elementor-element elementor-element-b282021 elementor-widget elementor-widget-html\" data-id=\"b282021\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =====================================================\n     T\u00c9L\u00c9-TH\u00c9\u00c2TRE ATB \u2014 SECTION 04\n     UNE PRODUCTION QUI AGIT\n     Compatible WordPress + Elementor\n====================================================== -->\n\n<section class=\"tt-impact\" id=\"tt-impact\">\n\n    <div class=\"tt-impact__shape tt-impact__shape--one\" aria-hidden=\"true\"><\/div>\n    <div class=\"tt-impact__shape tt-impact__shape--two\" aria-hidden=\"true\"><\/div>\n\n    <div class=\"tt-impact__container\">\n\n        <!-- Bloc principal -->\n        <div class=\"tt-impact__main\">\n\n            <!-- Visuel -->\n            <div class=\"tt-impact__visual\">\n\n                <div class=\"tt-impact__image-wrap\">\n\n                    <img decoding=\"async\"\n                        src=\"http:\/\/atb.bf\/atb-v2\/wp-content\/uploads\/2026\/07\/486937316_10231105697199049_3586341272290068126_n.jpg\"\n                        alt=\"Repr\u00e9sentation de th\u00e9\u00e2tre forum de l\u2019Atelier Th\u00e9\u00e2tre Burkinab\u00e8\"\n                        loading=\"lazy\"\n                    >\n\n                    <span class=\"tt-impact__overlay\" aria-hidden=\"true\"><\/span>\n\n                    <div class=\"tt-impact__visual-label\">\n                        <span class=\"tt-impact__visual-icon\">\n                            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                                <path d=\"M4 5h16v14H4z\"><\/path>\n                                <path d=\"m9 9 6 3-6 3z\"><\/path>\n                            <\/svg>\n                        <\/span>\n\n                        <span>\n                            <small>De la sc\u00e8ne \u00e0 l\u2019\u00e9cran<\/small>\n                            <strong>Un impact qui se prolonge<\/strong>\n                        <\/span>\n                    <\/div>\n\n                    <div class=\"tt-impact__visual-number\" aria-hidden=\"true\">\n                        04\n                    <\/div>\n\n                <\/div>\n\n                <!-- Carte flottante -->\n                <div class=\"tt-impact__floating-card\">\n\n                    <span class=\"tt-impact__floating-line\"><\/span>\n\n                    <p>\n                        Une repr\u00e9sentation peut toucher un public.\n                        Une production audiovisuelle peut voyager,\n                        former et sensibiliser bien au-del\u00e0 de la sc\u00e8ne.\n                    <\/p>\n\n                <\/div>\n\n            <\/div>\n\n            <!-- Contenu -->\n            <div class=\"tt-impact__content\">\n\n                <span class=\"tt-impact__eyebrow\">\n                    <i><\/i>\n                    Une cr\u00e9ation utile et durable\n                <\/span>\n\n                <h2>\n                    Chaque vid\u00e9o est un\n                    <em>outil de transformation sociale.<\/em>\n                <\/h2>\n\n                <p class=\"tt-impact__lead\">\n                    Les productions audiovisuelles de l\u2019ATB prolongent\n                    l\u2019impact des spectacles et des interventions men\u00e9es\n                    aupr\u00e8s des communaut\u00e9s.\n                <\/p>\n\n                <p class=\"tt-impact__text\">\n                    Elles permettent aux \u00e9coles, universit\u00e9s, associations,\n                    collectivit\u00e9s, institutions et partenaires de poursuivre\n                    la r\u00e9flexion autour des grands enjeux de soci\u00e9t\u00e9 :\n                    citoyennet\u00e9, sant\u00e9, droits humains, coh\u00e9sion sociale,\n                    environnement et d\u00e9veloppement.\n                <\/p>\n\n                <blockquote class=\"tt-impact__quote\">\n\n                    <span class=\"tt-impact__quote-mark\" aria-hidden=\"true\">\n                        \u201c\n                    <\/span>\n\n                    <p>\n                        Le th\u00e9\u00e2tre ne se limite pas \u00e0 montrer une r\u00e9alit\u00e9.\n                        Il ouvre un espace o\u00f9 chacun peut r\u00e9fl\u00e9chir,\n                        dialoguer et imaginer le changement.\n                    <\/p>\n\n                <\/blockquote>\n\n                <a href=\"#tt-diffusion-pro\" class=\"tt-impact__link\">\n\n                    <span>D\u00e9couvrir les possibilit\u00e9s de diffusion<\/span>\n\n                    <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                        <path d=\"M5 12h14\"><\/path>\n                        <path d=\"m13 6 6 6-6 6\"><\/path>\n                    <\/svg>\n\n                <\/a>\n\n            <\/div>\n\n        <\/div>\n\n        <!-- 4 piliers -->\n        <div class=\"tt-impact__pillars\">\n\n            <!-- Pilier 1 -->\n            <article class=\"tt-impact-card\">\n\n                <span class=\"tt-impact-card__number\">\n                    01\n                <\/span>\n\n                <span class=\"tt-impact-card__icon\">\n                    <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                        <path d=\"M4 11a8 8 0 0 1 16 0\"><\/path>\n                        <path d=\"M5 11v6a2 2 0 0 0 2 2h2v-8H5z\"><\/path>\n                        <path d=\"M19 11v6a2 2 0 0 1-2 2h-2v-8h4z\"><\/path>\n                    <\/svg>\n                <\/span>\n\n                <h3>\n                    Sensibiliser\n                <\/h3>\n\n                <p>\n                    Porter des messages sociaux et citoyens aupr\u00e8s de\n                    publics vari\u00e9s, en ville comme en milieu rural.\n                <\/p>\n\n                <span class=\"tt-impact-card__line\"><\/span>\n\n            <\/article>\n\n            <!-- Pilier 2 -->\n            <article class=\"tt-impact-card\">\n\n                <span class=\"tt-impact-card__number\">\n                    02\n                <\/span>\n\n                <span class=\"tt-impact-card__icon\">\n                    <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                        <path d=\"M4 5h16v14H4z\"><\/path>\n                        <path d=\"M8 9h8\"><\/path>\n                        <path d=\"M8 13h5\"><\/path>\n                    <\/svg>\n                <\/span>\n\n                <h3>\n                    Former\n                <\/h3>\n\n                <p>\n                    Mettre \u00e0 disposition des supports p\u00e9dagogiques\n                    pour les \u00e9tudiants, les formateurs et les organisations.\n                <\/p>\n\n                <span class=\"tt-impact-card__line\"><\/span>\n\n            <\/article>\n\n            <!-- Pilier 3 -->\n            <article class=\"tt-impact-card\">\n\n                <span class=\"tt-impact-card__number\">\n                    03\n                <\/span>\n\n                <span class=\"tt-impact-card__icon\">\n                    <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                        <circle cx=\"12\" cy=\"12\" r=\"9\"><\/circle>\n                        <path d=\"M3 12h18\"><\/path>\n                        <path d=\"M12 3a15 15 0 0 1 0 18\"><\/path>\n                        <path d=\"M12 3a15 15 0 0 0 0 18\"><\/path>\n                    <\/svg>\n                <\/span>\n\n                <h3>\n                    Diffuser\n                <\/h3>\n\n                <p>\n                    Faire voyager les \u0153uvres au-del\u00e0 des murs de l\u2019ATB,\n                    sur les \u00e9crans, dans les institutions et les communaut\u00e9s.\n                <\/p>\n\n                <span class=\"tt-impact-card__line\"><\/span>\n\n            <\/article>\n\n            <!-- Pilier 4 -->\n            <article class=\"tt-impact-card\">\n\n                <span class=\"tt-impact-card__number\">\n                    04\n                <\/span>\n\n                <span class=\"tt-impact-card__icon\">\n                    <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                        <path d=\"M4 6h6v12H4z\"><\/path>\n                        <path d=\"M14 6h6v12h-6z\"><\/path>\n                        <path d=\"M10 9h4\"><\/path>\n                        <path d=\"M10 15h4\"><\/path>\n                    <\/svg>\n                <\/span>\n\n                <h3>\n                    Transmettre\n                <\/h3>\n\n                <p>\n                    Pr\u00e9server les cr\u00e9ations, les m\u00e9thodes et la m\u00e9moire\n                    artistique de l\u2019ATB pour les g\u00e9n\u00e9rations futures.\n                <\/p>\n\n                <span class=\"tt-impact-card__line\"><\/span>\n\n            <\/article>\n\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Archivo:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&display=swap');\n\n\/* =====================================================\n   SECTION\n====================================================== *\/\n\n.tt-impact {\n    --tti-bordeaux: #60052D;\n    --tti-bordeaux-dark: #330018;\n    --tti-gold: #CC9933;\n    --tti-gold-light: #E2B85F;\n    --tti-cream: #F7F0E7;\n    --tti-cream-light: #FCF8F3;\n    --tti-white: #FFFFFF;\n    --tti-ink: #271A20;\n    --tti-text: #6B5D63;\n\n    position: relative;\n    width: 100%;\n    overflow: hidden;\n    isolation: isolate;\n\n    padding: 125px 0 110px;\n\n    background:\n        radial-gradient(\n            circle at 90% 10%,\n            rgba(204,153,51,0.12),\n            transparent 26%\n        ),\n        linear-gradient(\n            180deg,\n            var(--tti-cream-light) 0%,\n            var(--tti-cream) 100%\n        );\n\n    color: var(--tti-ink);\n    font-family: \"Archivo\", sans-serif;\n}\n\n.tt-impact::before {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    z-index: -3;\n    pointer-events: none;\n    opacity: 0.22;\n\n    background-image:\n        linear-gradient(\n            rgba(96,5,45,0.035) 1px,\n            transparent 1px\n        ),\n        linear-gradient(\n            90deg,\n            rgba(96,5,45,0.035) 1px,\n            transparent 1px\n        );\n\n    background-size: 76px 76px;\n}\n\n.tt-impact__shape {\n    position: absolute;\n    z-index: -2;\n    pointer-events: none;\n    border-radius: 50%;\n}\n\n.tt-impact__shape--one {\n    width: 440px;\n    height: 440px;\n    left: -270px;\n    top: 50px;\n\n    border: 1px solid rgba(96,5,45,0.10);\n}\n\n.tt-impact__shape--two {\n    width: 300px;\n    height: 300px;\n    right: -160px;\n    bottom: 70px;\n\n    background: rgba(204,153,51,0.07);\n}\n\n.tt-impact__container {\n    width: min(1240px, calc(100% - 80px));\n    margin: 0 auto;\n}\n\n\/* =====================================================\n   BLOC PRINCIPAL\n====================================================== *\/\n\n.tt-impact__main {\n    display: grid;\n    grid-template-columns: minmax(0, 1.05fr) minmax(390px, 0.95fr);\n    align-items: center;\n    gap: 85px;\n}\n\n\/* =====================================================\n   VISUEL\n====================================================== *\/\n\n.tt-impact__visual {\n    position: relative;\n    padding: 0 0 55px 34px;\n}\n\n.tt-impact__image-wrap {\n    position: relative;\n    min-height: 620px;\n    overflow: hidden;\n\n    border-radius: 28px;\n\n    background: var(--tti-bordeaux-dark);\n\n    box-shadow:\n        0 32px 75px rgba(62,20,39,0.16),\n        0 8px 24px rgba(62,20,39,0.08);\n}\n\n.tt-impact__image-wrap::before {\n    content: \"\";\n    position: absolute;\n    inset: 18px;\n    z-index: 3;\n    pointer-events: none;\n\n    border: 1px solid rgba(255,255,255,0.20);\n    border-radius: 18px;\n}\n\n.tt-impact__image-wrap img {\n    width: 100%;\n    height: 100%;\n\n    position: absolute;\n    inset: 0;\n\n    object-fit: cover;\n    object-position: center;\n\n    transform: scale(1.02);\n\n    transition:\n        transform 1s cubic-bezier(.2,.7,.2,1),\n        filter 0.7s ease;\n}\n\n.tt-impact__visual:hover .tt-impact__image-wrap img {\n    transform: scale(1.08);\n    filter: saturate(1.06);\n}\n\n.tt-impact__overlay {\n    position: absolute;\n    inset: 0;\n\n    background:\n        linear-gradient(\n            180deg,\n            rgba(31,0,15,0.04) 0%,\n            rgba(31,0,15,0.10) 40%,\n            rgba(31,0,15,0.82) 100%\n        ),\n        linear-gradient(\n            90deg,\n            rgba(31,0,15,0.18),\n            transparent 65%\n        );\n}\n\n.tt-impact__visual-label {\n    position: absolute;\n    left: 38px;\n    bottom: 36px;\n    z-index: 4;\n\n    display: flex;\n    align-items: center;\n    gap: 14px;\n}\n\n.tt-impact__visual-icon {\n    width: 52px;\n    height: 52px;\n    flex: 0 0 auto;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    border-radius: 50%;\n\n    background: var(--tti-gold);\n    color: #2B1705;\n\n    box-shadow: 0 12px 34px rgba(204,153,51,0.30);\n}\n\n.tt-impact__visual-icon svg {\n    width: 23px;\n    height: 23px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.7;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n.tt-impact__visual-label > span:last-child {\n    display: flex;\n    flex-direction: column;\n    gap: 5px;\n}\n\n.tt-impact__visual-label small {\n    color: rgba(255,255,255,0.68);\n    font-size: 9px;\n    font-weight: 700;\n    letter-spacing: 0.13em;\n    text-transform: uppercase;\n}\n\n.tt-impact__visual-label strong {\n    color: var(--tti-white);\n    font-family: \"Fraunces\", serif;\n    font-size: 21px;\n    font-weight: 500;\n}\n\n.tt-impact__visual-number {\n    position: absolute;\n    top: 14px;\n    right: 28px;\n    z-index: 2;\n\n    color: rgba(255,255,255,0.12);\n    font-family: \"Fraunces\", serif;\n    font-size: 110px;\n    font-weight: 600;\n    line-height: 1;\n}\n\n\/* Carte flottante *\/\n\n.tt-impact__floating-card {\n    position: absolute;\n    left: 0;\n    bottom: 0;\n    z-index: 5;\n\n    width: min(360px, 75%);\n    padding: 25px 25px 23px;\n\n    border: 1px solid rgba(96,5,45,0.10);\n    border-radius: 18px;\n\n    background: var(--tti-white);\n\n    box-shadow:\n        0 22px 55px rgba(62,20,39,0.14),\n        0 5px 18px rgba(62,20,39,0.06);\n}\n\n.tt-impact__floating-line {\n    width: 50px;\n    height: 3px;\n    display: block;\n\n    margin-bottom: 15px;\n\n    border-radius: 999px;\n    background: var(--tti-gold);\n}\n\n.tt-impact__floating-card p {\n    margin: 0;\n\n    color: var(--tti-bordeaux);\n    font-family: \"Fraunces\", serif;\n    font-size: 18px;\n    font-weight: 500;\n    line-height: 1.48;\n}\n\n\/* =====================================================\n   CONTENU\n====================================================== *\/\n\n.tt-impact__content {\n    position: relative;\n}\n\n.tt-impact__eyebrow {\n    display: inline-flex;\n    align-items: center;\n    gap: 13px;\n\n    margin-bottom: 19px;\n\n    color: var(--tti-bordeaux);\n    font-size: 10px;\n    font-weight: 700;\n    letter-spacing: 0.17em;\n    text-transform: uppercase;\n}\n\n.tt-impact__eyebrow i {\n    width: 39px;\n    height: 1px;\n    display: block;\n    background: var(--tti-gold);\n}\n\n.tt-impact__content h2 {\n    margin: 0;\n\n    color: var(--tti-bordeaux);\n    font-family: \"Fraunces\", serif;\n    font-size: clamp(45px, 4.8vw, 69px);\n    font-weight: 600;\n    line-height: 1;\n    letter-spacing: -0.045em;\n}\n\n.tt-impact__content h2 em {\n    display: block;\n    margin-top: 8px;\n\n    color: var(--tti-gold);\n    font-weight: 500;\n}\n\n.tt-impact__lead {\n    margin: 28px 0 0;\n\n    color: var(--tti-ink);\n    font-family: \"Fraunces\", serif;\n    font-size: 22px;\n    font-weight: 500;\n    line-height: 1.48;\n}\n\n.tt-impact__text {\n    margin: 20px 0 0;\n\n    color: var(--tti-text);\n    font-size: 15px;\n    line-height: 1.85;\n}\n\n\/* Citation *\/\n\n.tt-impact__quote {\n    position: relative;\n\n    margin: 31px 0 0;\n    padding: 24px 24px 22px 59px;\n\n    border: 1px solid rgba(96,5,45,0.09);\n    border-left: 3px solid var(--tti-gold);\n    border-radius: 0 16px 16px 0;\n\n    background: rgba(255,255,255,0.61);\n}\n\n.tt-impact__quote-mark {\n    position: absolute;\n    top: 8px;\n    left: 18px;\n\n    color: rgba(204,153,51,0.36);\n    font-family: \"Fraunces\", serif;\n    font-size: 68px;\n    line-height: 1;\n}\n\n.tt-impact__quote p {\n    margin: 0;\n\n    color: var(--tti-bordeaux);\n    font-family: \"Fraunces\", serif;\n    font-size: 17px;\n    font-style: italic;\n    line-height: 1.6;\n}\n\n.tt-impact__link {\n    display: inline-flex;\n    align-items: center;\n    gap: 11px;\n\n    margin-top: 30px;\n\n    color: var(--tti-bordeaux);\n    font-size: 11px;\n    font-weight: 700;\n    letter-spacing: 0.045em;\n    text-decoration: none !important;\n\n    transition:\n        color 0.3s ease,\n        transform 0.3s ease;\n}\n\n.tt-impact__link svg {\n    width: 18px;\n    height: 18px;\n\n    fill: none;\n    stroke: var(--tti-gold);\n    stroke-width: 1.8;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n\n    transition: transform 0.3s ease;\n}\n\n.tt-impact__link:hover {\n    color: var(--tti-gold);\n}\n\n.tt-impact__link:hover svg {\n    transform: translateX(5px);\n}\n\n\/* =====================================================\n   4 PILIERS\n====================================================== *\/\n\n.tt-impact__pillars {\n    display: grid;\n    grid-template-columns: repeat(4, minmax(0, 1fr));\n    gap: 18px;\n\n    margin-top: 92px;\n}\n\n.tt-impact-card {\n    position: relative;\n    overflow: hidden;\n\n    min-height: 285px;\n    padding: 28px 24px 25px;\n\n    border: 1px solid rgba(96,5,45,0.09);\n    border-radius: 19px;\n\n    background: rgba(255,255,255,0.72);\n\n    box-shadow:\n        0 14px 35px rgba(62,20,39,0.055);\n\n    transition:\n        transform 0.4s cubic-bezier(.2,.7,.2,1),\n        box-shadow 0.4s ease,\n        border-color 0.3s ease,\n        background-color 0.3s ease;\n}\n\n.tt-impact-card::before {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n\n    background:\n        linear-gradient(\n            145deg,\n            rgba(204,153,51,0.11),\n            transparent 48%\n        );\n\n    opacity: 0;\n\n    transition: opacity 0.35s ease;\n}\n\n.tt-impact-card:hover {\n    transform: translateY(-8px);\n\n    border-color: rgba(204,153,51,0.36);\n    background: var(--tti-white);\n\n    box-shadow:\n        0 25px 55px rgba(62,20,39,0.11);\n}\n\n.tt-impact-card:hover::before {\n    opacity: 1;\n}\n\n.tt-impact-card__number {\n    position: absolute;\n    top: 18px;\n    right: 20px;\n\n    color: rgba(96,5,45,0.08);\n    font-family: \"Fraunces\", serif;\n    font-size: 50px;\n    font-weight: 600;\n    line-height: 1;\n}\n\n.tt-impact-card__icon {\n    position: relative;\n    z-index: 2;\n\n    width: 52px;\n    height: 52px;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    margin-bottom: 26px;\n\n    border-radius: 15px;\n\n    background: rgba(96,5,45,0.07);\n    color: var(--tti-bordeaux);\n\n    transition:\n        background-color 0.3s ease,\n        color 0.3s ease,\n        transform 0.3s ease;\n}\n\n.tt-impact-card:hover .tt-impact-card__icon {\n    transform: translateY(-3px) rotate(-3deg);\n\n    background: var(--tti-bordeaux);\n    color: var(--tti-white);\n}\n\n.tt-impact-card__icon svg {\n    width: 23px;\n    height: 23px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.7;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n.tt-impact-card h3 {\n    position: relative;\n    z-index: 2;\n\n    margin: 0;\n\n    color: var(--tti-bordeaux);\n    font-family: \"Fraunces\", serif;\n    font-size: 27px;\n    font-weight: 600;\n}\n\n.tt-impact-card p {\n    position: relative;\n    z-index: 2;\n\n    margin: 14px 0 0;\n\n    color: var(--tti-text);\n    font-size: 13px;\n    line-height: 1.72;\n}\n\n.tt-impact-card__line {\n    position: absolute;\n    left: 24px;\n    bottom: 0;\n\n    width: 0;\n    height: 3px;\n\n    border-radius: 999px 999px 0 0;\n    background: var(--tti-gold);\n\n    transition: width 0.45s ease;\n}\n\n.tt-impact-card:hover .tt-impact-card__line {\n    width: calc(100% - 48px);\n}\n\n\/* =====================================================\n   TABLETTE\n====================================================== *\/\n\n@media (max-width: 1080px) {\n\n    .tt-impact {\n        padding: 100px 0 90px;\n    }\n\n    .tt-impact__container {\n        width: min(100% - 48px, 930px);\n    }\n\n    .tt-impact__main {\n        grid-template-columns: 1fr;\n        gap: 72px;\n    }\n\n    .tt-impact__visual {\n        max-width: 760px;\n    }\n\n    .tt-impact__content {\n        max-width: 760px;\n    }\n\n    .tt-impact__pillars {\n        grid-template-columns: repeat(2, minmax(0, 1fr));\n        margin-top: 75px;\n    }\n\n}\n\n\/* =====================================================\n   MOBILE\n====================================================== *\/\n\n@media (max-width: 767px) {\n\n    .tt-impact {\n        padding: 80px 0 72px;\n    }\n\n    .tt-impact__container {\n        width: calc(100% - 32px);\n    }\n\n    .tt-impact__main {\n        gap: 62px;\n    }\n\n    .tt-impact__visual {\n        padding: 0 0 74px;\n    }\n\n    .tt-impact__image-wrap {\n        min-height: 455px;\n        border-radius: 21px;\n    }\n\n    .tt-impact__image-wrap::before {\n        inset: 12px;\n        border-radius: 14px;\n    }\n\n    .tt-impact__visual-label {\n        left: 23px;\n        bottom: 25px;\n    }\n\n    .tt-impact__visual-icon {\n        width: 46px;\n        height: 46px;\n    }\n\n    .tt-impact__visual-label strong {\n        font-size: 17px;\n    }\n\n    .tt-impact__visual-number {\n        font-size: 74px;\n    }\n\n    .tt-impact__floating-card {\n        width: calc(100% - 30px);\n        left: 15px;\n        padding: 21px;\n    }\n\n    .tt-impact__floating-card p {\n        font-size: 16px;\n    }\n\n    .tt-impact__content h2 {\n        font-size: 46px;\n    }\n\n    .tt-impact__lead {\n        font-size: 20px;\n    }\n\n    .tt-impact__text {\n        font-size: 14px;\n    }\n\n    .tt-impact__quote {\n        padding: 23px 20px 21px 48px;\n    }\n\n    .tt-impact__quote-mark {\n        left: 13px;\n    }\n\n    .tt-impact__pillars {\n        grid-template-columns: 1fr;\n        gap: 14px;\n        margin-top: 62px;\n    }\n\n    .tt-impact-card {\n        min-height: auto;\n    }\n\n}\n\n\/* =====================================================\n   PETITS MOBILES\n====================================================== *\/\n\n@media (max-width: 390px) {\n\n    .tt-impact__image-wrap {\n        min-height: 415px;\n    }\n\n    .tt-impact__content h2 {\n        font-size: 41px;\n    }\n\n}\n\n\/* =====================================================\n   ACCESSIBILIT\u00c9\n====================================================== *\/\n\n@media (prefers-reduced-motion: reduce) {\n\n    .tt-impact__image-wrap img,\n    .tt-impact-card,\n    .tt-impact-card__icon,\n    .tt-impact-card__line,\n    .tt-impact__link svg {\n        transition: none;\n    }\n\n}\n<\/style>\n\n<script>\n(function () {\n\n    function initImpactSection() {\n\n        const sections = document.querySelectorAll(\n            \".tt-impact:not([data-impact-initialized])\"\n        );\n\n        sections.forEach(function (section) {\n\n            section.setAttribute(\n                \"data-impact-initialized\",\n                \"true\"\n            );\n\n            const internalLinks =\n                section.querySelectorAll('a[href^=\"#\"]');\n\n            internalLinks.forEach(function (link) {\n\n                link.addEventListener(\n                    \"click\",\n                    function (event) {\n\n                        const selector =\n                            link.getAttribute(\"href\");\n\n                        if (!selector || selector === \"#\") return;\n\n                        const target =\n                            document.querySelector(selector);\n\n                        if (target) {\n\n                            event.preventDefault();\n\n                            target.scrollIntoView({\n                                behavior: \"smooth\",\n                                block: \"start\"\n                            });\n\n                        }\n\n                    }\n                );\n\n            });\n\n        });\n\n    }\n\n    if (document.readyState === \"loading\") {\n\n        document.addEventListener(\n            \"DOMContentLoaded\",\n            initImpactSection\n        );\n\n    } else {\n\n        initImpactSection();\n\n    }\n\n    window.addEventListener(\n        \"load\",\n        initImpactSection\n    );\n\n    setTimeout(\n        initImpactSection,\n        400\n    );\n\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-0b6256b e-con e-atomic-element e-flexbox-base e-0785605 \" data-id=\"0b6256b\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"0b6256b\" data-e-type=\"e-flexbox\" data-id=\"0b6256b\">\n    \t\t<div class=\"elementor-element elementor-element-3405b06 elementor-widget elementor-widget-html\" data-id=\"3405b06\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =====================================================\n     T\u00c9L\u00c9-TH\u00c9\u00c2TRE ATB \u2014 SECTION 05\n     DIFFUSION PROFESSIONNELLE\n     Compatible WordPress + Elementor\n====================================================== -->\n\n<section class=\"tt-pro\" id=\"tt-diffusion-pro\">\n\n    <div class=\"tt-pro__light tt-pro__light--one\" aria-hidden=\"true\"><\/div>\n    <div class=\"tt-pro__light tt-pro__light--two\" aria-hidden=\"true\"><\/div>\n\n    <div class=\"tt-pro__container\">\n\n        <!-- En-t\u00eate principal -->\n        <div class=\"tt-pro__header\">\n\n            <div class=\"tt-pro__heading\">\n\n                <span class=\"tt-pro__eyebrow\">\n                    <i><\/i>\n                    Diffusion institutionnelle et culturelle\n                <\/span>\n\n                <h2>\n                    Faites vivre une production\n                    <em>aupr\u00e8s de vos publics.<\/em>\n                <\/h2>\n\n            <\/div>\n\n            <div class=\"tt-pro__intro\">\n\n                <p>\n                    Certaines productions audiovisuelles de l\u2019ATB peuvent \u00eatre\n                    mises \u00e0 disposition dans le cadre de campagnes de\n                    sensibilisation, de formations, de programmes \u00e9ducatifs\n                    ou d\u2019actions de diffusion culturelle.\n                <\/p>\n\n                <a href=\"\/contact\/\" class=\"tt-pro__header-link\">\n\n                    <span>Pr\u00e9senter votre projet<\/span>\n\n                    <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                        <path d=\"M5 12h14\"><\/path>\n                        <path d=\"m13 6 6 6-6 6\"><\/path>\n                    <\/svg>\n\n                <\/a>\n\n            <\/div>\n\n        <\/div>\n\n        <!-- Bloc central -->\n        <div class=\"tt-pro__panel\">\n\n            <!-- Colonne gauche -->\n            <div class=\"tt-pro__content\">\n\n                <span class=\"tt-pro__label\">\n                    Une solution adapt\u00e9e \u00e0 votre contexte\n                <\/span>\n\n                <h3>\n                    Une \u0153uvre peut devenir un v\u00e9ritable support d\u2019action.\n                <\/h3>\n\n                <p>\n                    Selon la nature du projet, l\u2019ATB peut proposer une diffusion\n                    publique ou priv\u00e9e, une projection accompagn\u00e9e, une licence\n                    institutionnelle ou l\u2019int\u00e9gration d\u2019une production dans un\n                    programme de sensibilisation et de formation.\n                <\/p>\n\n                <div class=\"tt-pro__uses\">\n\n                    <div class=\"tt-pro__use\">\n\n                        <span class=\"tt-pro__use-icon\">\n                            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                                <path d=\"M4 5h16v14H4z\"><\/path>\n                                <path d=\"m9 9 6 3-6 3z\"><\/path>\n                            <\/svg>\n                        <\/span>\n\n                        <span>\n                            <strong>Projection publique<\/strong>\n                            <small>\n                                \u00c9v\u00e9nements, festivals, rencontres communautaires\n                                et programmes culturels.\n                            <\/small>\n                        <\/span>\n\n                    <\/div>\n\n                    <div class=\"tt-pro__use\">\n\n                        <span class=\"tt-pro__use-icon\">\n                            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                                <path d=\"M4 19V8l8-4 8 4v11\"><\/path>\n                                <path d=\"M8 19v-6h8v6\"><\/path>\n                            <\/svg>\n                        <\/span>\n\n                        <span>\n                            <strong>Usage p\u00e9dagogique<\/strong>\n                            <small>\n                                Formations, universit\u00e9s, \u00e9coles, ateliers et\n                                dispositifs de renforcement de capacit\u00e9s.\n                            <\/small>\n                        <\/span>\n\n                    <\/div>\n\n                    <div class=\"tt-pro__use\">\n\n                        <span class=\"tt-pro__use-icon\">\n                            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                                <path d=\"M3 6h18v12H3z\"><\/path>\n                                <path d=\"M7 21h10\"><\/path>\n                                <path d=\"M12 18v3\"><\/path>\n                            <\/svg>\n                        <\/span>\n\n                        <span>\n                            <strong>Diffusion m\u00e9dia<\/strong>\n                            <small>\n                                T\u00e9l\u00e9visions, plateformes num\u00e9riques, m\u00e9dias\n                                partenaires et programmes audiovisuels.\n                            <\/small>\n                        <\/span>\n\n                    <\/div>\n\n                    <div class=\"tt-pro__use\">\n\n                        <span class=\"tt-pro__use-icon\">\n                            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                                <circle cx=\"12\" cy=\"12\" r=\"9\"><\/circle>\n                                <path d=\"M3 12h18\"><\/path>\n                                <path d=\"M12 3a15 15 0 0 1 0 18\"><\/path>\n                                <path d=\"M12 3a15 15 0 0 0 0 18\"><\/path>\n                            <\/svg>\n                        <\/span>\n\n                        <span>\n                            <strong>Campagne de sensibilisation<\/strong>\n                            <small>\n                                Sant\u00e9, citoyennet\u00e9, paix, coh\u00e9sion sociale,\n                                environnement et droits humains.\n                            <\/small>\n                        <\/span>\n\n                    <\/div>\n\n                <\/div>\n\n            <\/div>\n\n            <!-- Colonne droite -->\n            <aside class=\"tt-pro__request\">\n\n                <span class=\"tt-pro__request-number\" aria-hidden=\"true\">\n                    PRO\n                <\/span>\n\n                <span class=\"tt-pro__request-badge\">\n                    Demande professionnelle\n                <\/span>\n\n                <h3>\n                    Vous avez un projet de diffusion ?\n                <\/h3>\n\n                <p>\n                    Pr\u00e9sentez-nous le contexte, le public vis\u00e9, le territoire\n                    concern\u00e9 et le mode de diffusion souhait\u00e9. Notre \u00e9quipe\n                    pourra vous orienter vers la formule la plus adapt\u00e9e.\n                <\/p>\n\n                <ul class=\"tt-pro__checklist\">\n\n                    <li>\n                        <span>\n                            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                                <path d=\"m5 12 4 4L19 6\"><\/path>\n                            <\/svg>\n                        <\/span>\n                        S\u00e9lection de la production\n                    <\/li>\n\n                    <li>\n                        <span>\n                            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                                <path d=\"m5 12 4 4L19 6\"><\/path>\n                            <\/svg>\n                        <\/span>\n                        D\u00e9finition des droits d\u2019usage\n                    <\/li>\n\n                    <li>\n                        <span>\n                            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                                <path d=\"m5 12 4 4L19 6\"><\/path>\n                            <\/svg>\n                        <\/span>\n                        Modalit\u00e9s techniques de diffusion\n                    <\/li>\n\n                    <li>\n                        <span>\n                            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                                <path d=\"m5 12 4 4L19 6\"><\/path>\n                            <\/svg>\n                        <\/span>\n                        Accompagnement selon le projet\n                    <\/li>\n\n                <\/ul>\n\n                <a href=\"\/contact\/\" class=\"tt-pro__button\">\n\n                    <span class=\"tt-pro__button-icon\">\n                        <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                            <path d=\"M4 6h16v12H4z\"><\/path>\n                            <path d=\"m4 7 8 6 8-6\"><\/path>\n                        <\/svg>\n                    <\/span>\n\n                    <span>Nous contacter<\/span>\n\n                <\/a>\n\n                <small class=\"tt-pro__notice\">\n                    Chaque demande est \u00e9tudi\u00e9e selon la production,\n                    le territoire, la dur\u00e9e et le type d\u2019utilisation.\n                <\/small>\n\n            <\/aside>\n\n        <\/div>\n\n        <!-- Publics concern\u00e9s -->\n        <div class=\"tt-pro__audiences\">\n\n            <div class=\"tt-pro__audiences-title\">\n\n                <span>\n                    Cette offre s\u2019adresse notamment aux\n                <\/span>\n\n                <i><\/i>\n\n            <\/div>\n\n            <div class=\"tt-pro__audiences-grid\">\n\n                <article class=\"tt-pro-audience\">\n\n                    <span class=\"tt-pro-audience__icon\">\n                        <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                            <circle cx=\"8\" cy=\"8\" r=\"3\"><\/circle>\n                            <circle cx=\"17\" cy=\"9\" r=\"2.5\"><\/circle>\n                            <path d=\"M3 20c0-4 2-7 5-7s5 3 5 7\"><\/path>\n                            <path d=\"M13 20c.2-3 1.7-5 4-5 2.4 0 4 2 4 5\"><\/path>\n                        <\/svg>\n                    <\/span>\n\n                    <h4>ONG<\/h4>\n\n                    <p>\n                        Campagnes de sensibilisation et programmes\n                        de d\u00e9veloppement.\n                    <\/p>\n\n                <\/article>\n\n                <article class=\"tt-pro-audience\">\n\n                    <span class=\"tt-pro-audience__icon\">\n                        <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                            <path d=\"M3 10h18\"><\/path>\n                            <path d=\"M5 10V7l7-4 7 4v3\"><\/path>\n                            <path d=\"M6 10v8\"><\/path>\n                            <path d=\"M10 10v8\"><\/path>\n                            <path d=\"M14 10v8\"><\/path>\n                            <path d=\"M18 10v8\"><\/path>\n                            <path d=\"M3 21h18\"><\/path>\n                        <\/svg>\n                    <\/span>\n\n                    <h4>Minist\u00e8res<\/h4>\n\n                    <p>\n                        Programmes publics, campagnes citoyennes\n                        et initiatives nationales.\n                    <\/p>\n\n                <\/article>\n\n                <article class=\"tt-pro-audience\">\n\n                    <span class=\"tt-pro-audience__icon\">\n                        <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                            <path d=\"m3 9 9-5 9 5-9 5z\"><\/path>\n                            <path d=\"M7 12v5c3 2 7 2 10 0v-5\"><\/path>\n                        <\/svg>\n                    <\/span>\n\n                    <h4>Universit\u00e9s<\/h4>\n\n                    <p>\n                        Recherche, enseignement, analyse th\u00e9\u00e2trale\n                        et formation professionnelle.\n                    <\/p>\n\n                <\/article>\n\n                <article class=\"tt-pro-audience\">\n\n                    <span class=\"tt-pro-audience__icon\">\n                        <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                            <rect x=\"3\" y=\"6\" width=\"18\" height=\"13\" rx=\"2\"><\/rect>\n                            <path d=\"m9 2 3 4 3-4\"><\/path>\n                            <path d=\"M7 10h7v5H7z\"><\/path>\n                            <path d=\"M17 10h1\"><\/path>\n                            <path d=\"M17 14h1\"><\/path>\n                        <\/svg>\n                    <\/span>\n\n                    <h4>T\u00e9l\u00e9visions<\/h4>\n\n                    <p>\n                        Programmation culturelle, diffusion th\u00e9matique\n                        et contenus d\u2019int\u00e9r\u00eat public.\n                    <\/p>\n\n                <\/article>\n\n                <article class=\"tt-pro-audience\">\n\n                    <span class=\"tt-pro-audience__icon\">\n                        <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                            <circle cx=\"12\" cy=\"12\" r=\"9\"><\/circle>\n                            <path d=\"M8 15c1-2 2-3 4-3s3 1 4 3\"><\/path>\n                            <circle cx=\"9\" cy=\"9\" r=\"1\"><\/circle>\n                            <circle cx=\"15\" cy=\"9\" r=\"1\"><\/circle>\n                        <\/svg>\n                    <\/span>\n\n                    <h4>Associations<\/h4>\n\n                    <p>\n                        Animation communautaire, \u00e9ducation populaire\n                        et dialogue social.\n                    <\/p>\n\n                <\/article>\n\n                <article class=\"tt-pro-audience\">\n\n                    <span class=\"tt-pro-audience__icon\">\n                        <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                            <path d=\"M7 12a5 5 0 0 1 5-5h3\"><\/path>\n                            <path d=\"M17 12a5 5 0 0 1-5 5H9\"><\/path>\n                            <path d=\"M14 4h4v4\"><\/path>\n                            <path d=\"M10 20H6v-4\"><\/path>\n                        <\/svg>\n                    <\/span>\n\n                    <h4>Partenaires<\/h4>\n\n                    <p>\n                        Projets culturels, coop\u00e9rations techniques\n                        et dispositifs \u00e0 fort impact.\n                    <\/p>\n\n                <\/article>\n\n            <\/div>\n\n        <\/div>\n\n        <!-- Processus -->\n        <div class=\"tt-pro__process\">\n\n            <div class=\"tt-pro__process-heading\">\n\n                <span>Comment cela fonctionne ?<\/span>\n\n                <h3>\n                    Une d\u00e9marche simple, adapt\u00e9e \u00e0 chaque projet.\n                <\/h3>\n\n            <\/div>\n\n            <div class=\"tt-pro__steps\">\n\n                <article class=\"tt-pro-step\">\n\n                    <span class=\"tt-pro-step__number\">\n                        01\n                    <\/span>\n\n                    <div>\n                        <h4>Pr\u00e9sentez votre besoin<\/h4>\n\n                        <p>\n                            Public, territoire, dur\u00e9e, th\u00e8me et contexte\n                            d\u2019utilisation.\n                        <\/p>\n                    <\/div>\n\n                <\/article>\n\n                <span class=\"tt-pro__step-arrow\" aria-hidden=\"true\">\n                    <svg viewBox=\"0 0 24 24\">\n                        <path d=\"M5 12h14\"><\/path>\n                        <path d=\"m13 6 6 6-6 6\"><\/path>\n                    <\/svg>\n                <\/span>\n\n                <article class=\"tt-pro-step\">\n\n                    <span class=\"tt-pro-step__number\">\n                        02\n                    <\/span>\n\n                    <div>\n                        <h4>Choisissons la production<\/h4>\n\n                        <p>\n                            Identification du contenu et de la formule\n                            la plus pertinente.\n                        <\/p>\n                    <\/div>\n\n                <\/article>\n\n                <span class=\"tt-pro__step-arrow\" aria-hidden=\"true\">\n                    <svg viewBox=\"0 0 24 24\">\n                        <path d=\"M5 12h14\"><\/path>\n                        <path d=\"m13 6 6 6-6 6\"><\/path>\n                    <\/svg>\n                <\/span>\n\n                <article class=\"tt-pro-step\">\n\n                    <span class=\"tt-pro-step__number\">\n                        03\n                    <\/span>\n\n                    <div>\n                        <h4>Organisons la diffusion<\/h4>\n\n                        <p>\n                            Validation des droits, des modalit\u00e9s techniques\n                            et de l\u2019accompagnement.\n                        <\/p>\n                    <\/div>\n\n                <\/article>\n\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Archivo:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&display=swap');\n\n\/* =====================================================\n   SECTION\n====================================================== *\/\n\n.tt-pro {\n    --ttp-bordeaux: #60052D;\n    --ttp-bordeaux-light: #7B0A3D;\n    --ttp-bordeaux-dark: #2C0015;\n    --ttp-gold: #CC9933;\n    --ttp-gold-light: #E2B75B;\n    --ttp-cream: #F7F0E7;\n    --ttp-white: #FFFFFF;\n\n    position: relative;\n    width: 100%;\n    overflow: hidden;\n    isolation: isolate;\n\n    padding: 125px 0 110px;\n\n    background:\n        linear-gradient(\n            135deg,\n            #3A001C 0%,\n            var(--ttp-bordeaux) 54%,\n            #4C0024 100%\n        );\n\n    color: var(--ttp-white);\n    font-family: \"Archivo\", sans-serif;\n}\n\n.tt-pro::before {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    z-index: -3;\n    pointer-events: none;\n    opacity: 0.09;\n\n    background-image:\n        linear-gradient(\n            rgba(255,255,255,0.25) 1px,\n            transparent 1px\n        ),\n        linear-gradient(\n            90deg,\n            rgba(255,255,255,0.25) 1px,\n            transparent 1px\n        );\n\n    background-size: 84px 84px;\n}\n\n.tt-pro::after {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    z-index: -2;\n    pointer-events: none;\n\n    background:\n        radial-gradient(\n            circle at 15% 15%,\n            rgba(204,153,51,0.16),\n            transparent 28%\n        ),\n        radial-gradient(\n            circle at 90% 75%,\n            rgba(255,255,255,0.06),\n            transparent 25%\n        );\n}\n\n.tt-pro__light {\n    position: absolute;\n    z-index: -1;\n    pointer-events: none;\n    border-radius: 50%;\n}\n\n.tt-pro__light--one {\n    width: 460px;\n    height: 460px;\n    top: -280px;\n    right: -150px;\n\n    border: 1px solid rgba(204,153,51,0.19);\n}\n\n.tt-pro__light--two {\n    width: 350px;\n    height: 350px;\n    left: -250px;\n    bottom: 100px;\n\n    background: rgba(204,153,51,0.08);\n}\n\n.tt-pro__container {\n    width: min(1240px, calc(100% - 80px));\n    margin: 0 auto;\n}\n\n\/* =====================================================\n   EN-T\u00caTE\n====================================================== *\/\n\n.tt-pro__header {\n    display: grid;\n    grid-template-columns: minmax(0, 1fr) minmax(330px, 0.6fr);\n    align-items: end;\n    gap: 85px;\n\n    margin-bottom: 55px;\n}\n\n.tt-pro__eyebrow {\n    display: inline-flex;\n    align-items: center;\n    gap: 13px;\n\n    margin-bottom: 18px;\n\n    color: var(--ttp-gold);\n    font-size: 10px;\n    font-weight: 700;\n    letter-spacing: 0.17em;\n    text-transform: uppercase;\n}\n\n.tt-pro__eyebrow i {\n    width: 40px;\n    height: 1px;\n    display: block;\n    background: var(--ttp-gold);\n}\n\n.tt-pro__heading h2 {\n    max-width: 780px;\n    margin: 0;\n\n    font-family: \"Fraunces\", serif;\n    font-size: clamp(50px, 5.5vw, 79px);\n    font-weight: 600;\n    line-height: 1;\n    letter-spacing: -0.045em;\n}\n\n.tt-pro__heading h2 em {\n    display: block;\n    margin-top: 8px;\n\n    color: var(--ttp-gold);\n    font-weight: 500;\n}\n\n.tt-pro__intro p {\n    margin: 0;\n\n    color: rgba(255,255,255,0.72);\n    font-size: 15px;\n    line-height: 1.82;\n}\n\n.tt-pro__header-link {\n    display: inline-flex;\n    align-items: center;\n    gap: 10px;\n\n    margin-top: 23px;\n\n    color: var(--ttp-gold-light);\n    font-size: 10px;\n    font-weight: 700;\n    letter-spacing: 0.05em;\n    text-decoration: none !important;\n}\n\n.tt-pro__header-link svg {\n    width: 18px;\n    height: 18px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.8;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n\n    transition: transform 0.3s ease;\n}\n\n.tt-pro__header-link:hover {\n    color: var(--ttp-white);\n}\n\n.tt-pro__header-link:hover svg {\n    transform: translateX(5px);\n}\n\n\/* =====================================================\n   PANNEAU CENTRAL\n====================================================== *\/\n\n.tt-pro__panel {\n    display: grid;\n    grid-template-columns: minmax(0, 1.08fr) minmax(370px, 0.72fr);\n    overflow: hidden;\n\n    border: 1px solid rgba(255,255,255,0.15);\n    border-radius: 29px;\n\n    background:\n        linear-gradient(\n            145deg,\n            rgba(255,255,255,0.105),\n            rgba(255,255,255,0.045)\n        );\n\n    box-shadow:\n        0 30px 80px rgba(18,0,8,0.25);\n\n    backdrop-filter: blur(15px);\n    -webkit-backdrop-filter: blur(15px);\n}\n\n\/* =====================================================\n   CONTENU GAUCHE\n====================================================== *\/\n\n.tt-pro__content {\n    padding: 55px 52px;\n}\n\n.tt-pro__label {\n    display: inline-flex;\n\n    margin-bottom: 17px;\n\n    color: var(--ttp-gold);\n    font-size: 9px;\n    font-weight: 700;\n    letter-spacing: 0.15em;\n    text-transform: uppercase;\n}\n\n.tt-pro__content > h3 {\n    max-width: 630px;\n    margin: 0;\n\n    font-family: \"Fraunces\", serif;\n    font-size: clamp(35px, 3.6vw, 53px);\n    font-weight: 600;\n    line-height: 1.08;\n    letter-spacing: -0.035em;\n}\n\n.tt-pro__content > p {\n    max-width: 680px;\n    margin: 22px 0 0;\n\n    color: rgba(255,255,255,0.69);\n    font-size: 14px;\n    line-height: 1.82;\n}\n\n\/* Utilisations *\/\n\n.tt-pro__uses {\n    display: grid;\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n    gap: 13px;\n\n    margin-top: 34px;\n}\n\n.tt-pro__use {\n    display: flex;\n    align-items: flex-start;\n    gap: 13px;\n\n    padding: 18px;\n\n    border: 1px solid rgba(255,255,255,0.10);\n    border-radius: 15px;\n\n    background: rgba(255,255,255,0.045);\n\n    transition:\n        transform 0.35s ease,\n        border-color 0.3s ease,\n        background-color 0.3s ease;\n}\n\n.tt-pro__use:hover {\n    transform: translateY(-4px);\n    border-color: rgba(204,153,51,0.38);\n    background: rgba(255,255,255,0.08);\n}\n\n.tt-pro__use-icon {\n    width: 39px;\n    height: 39px;\n    flex: 0 0 auto;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    border-radius: 11px;\n\n    background: rgba(204,153,51,0.13);\n    color: var(--ttp-gold);\n}\n\n.tt-pro__use-icon svg {\n    width: 19px;\n    height: 19px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.7;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n.tt-pro__use > span:last-child {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n}\n\n.tt-pro__use strong {\n    color: var(--ttp-white);\n    font-size: 11px;\n    font-weight: 700;\n}\n\n.tt-pro__use small {\n    color: rgba(255,255,255,0.55);\n    font-size: 10px;\n    line-height: 1.55;\n}\n\n\/* =====================================================\n   CARTE DEMANDE\n====================================================== *\/\n\n.tt-pro__request {\n    position: relative;\n    overflow: hidden;\n\n    padding: 54px 43px;\n\n    background:\n        linear-gradient(\n            150deg,\n            var(--ttp-cream) 0%,\n            #FFF9F1 100%\n        );\n\n    color: var(--ttp-bordeaux);\n}\n\n.tt-pro__request-number {\n    position: absolute;\n    right: -12px;\n    top: 7px;\n\n    color: rgba(96,5,45,0.055);\n    font-family: \"Fraunces\", serif;\n    font-size: 105px;\n    font-weight: 700;\n    line-height: 1;\n}\n\n.tt-pro__request-badge {\n    position: relative;\n    z-index: 2;\n\n    display: inline-flex;\n    padding: 9px 13px;\n\n    border-radius: 999px;\n\n    background: rgba(96,5,45,0.08);\n    color: var(--ttp-bordeaux);\n\n    font-size: 8px;\n    font-weight: 700;\n    letter-spacing: 0.14em;\n    text-transform: uppercase;\n}\n\n.tt-pro__request h3 {\n    position: relative;\n    z-index: 2;\n\n    margin: 25px 0 0;\n\n    font-family: \"Fraunces\", serif;\n    font-size: 37px;\n    font-weight: 600;\n    line-height: 1.08;\n    letter-spacing: -0.03em;\n}\n\n.tt-pro__request > p {\n    position: relative;\n    z-index: 2;\n\n    margin: 18px 0 0;\n\n    color: #69575E;\n    font-size: 13px;\n    line-height: 1.75;\n}\n\n.tt-pro__checklist {\n    position: relative;\n    z-index: 2;\n\n    display: grid;\n    gap: 11px;\n\n    margin: 27px 0 0;\n    padding: 0;\n\n    list-style: none;\n}\n\n.tt-pro__checklist li {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n\n    color: #4E3B43;\n    font-size: 11px;\n    font-weight: 600;\n}\n\n.tt-pro__checklist li > span {\n    width: 25px;\n    height: 25px;\n    flex: 0 0 auto;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    border-radius: 50%;\n\n    background: rgba(204,153,51,0.16);\n    color: var(--ttp-bordeaux);\n}\n\n.tt-pro__checklist svg {\n    width: 13px;\n    height: 13px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 2;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n.tt-pro__button {\n    position: relative;\n    z-index: 2;\n\n    width: 100%;\n    min-height: 57px;\n    padding: 0 20px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: 11px;\n\n    margin-top: 31px;\n\n    border-radius: 999px;\n\n    background: var(--ttp-bordeaux);\n    color: var(--ttp-white);\n    text-decoration: none !important;\n\n    font-size: 11px;\n    font-weight: 700;\n    letter-spacing: 0.04em;\n\n    box-shadow: 0 14px 35px rgba(96,5,45,0.20);\n\n    transition:\n        transform 0.3s ease,\n        background-color 0.3s ease,\n        box-shadow 0.3s ease;\n}\n\n.tt-pro__button:hover {\n    transform: translateY(-3px);\n    background: var(--ttp-bordeaux-light);\n    color: var(--ttp-white);\n\n    box-shadow: 0 18px 42px rgba(96,5,45,0.29);\n}\n\n.tt-pro__button-icon {\n    width: 31px;\n    height: 31px;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    border-radius: 50%;\n\n    background: rgba(255,255,255,0.12);\n}\n\n.tt-pro__button-icon svg {\n    width: 16px;\n    height: 16px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.7;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n.tt-pro__notice {\n    position: relative;\n    z-index: 2;\n\n    display: block;\n    margin-top: 14px;\n\n    color: #89777E;\n    font-size: 9px;\n    line-height: 1.55;\n    text-align: center;\n}\n\n\/* =====================================================\n   PUBLICS\n====================================================== *\/\n\n.tt-pro__audiences {\n    margin-top: 76px;\n}\n\n.tt-pro__audiences-title {\n    display: flex;\n    align-items: center;\n    gap: 20px;\n\n    margin-bottom: 28px;\n}\n\n.tt-pro__audiences-title span {\n    flex: 0 0 auto;\n\n    color: var(--ttp-gold);\n    font-size: 9px;\n    font-weight: 700;\n    letter-spacing: 0.15em;\n    text-transform: uppercase;\n}\n\n.tt-pro__audiences-title i {\n    width: 100%;\n    height: 1px;\n\n    background:\n        linear-gradient(\n            90deg,\n            rgba(204,153,51,0.35),\n            transparent\n        );\n}\n\n.tt-pro__audiences-grid {\n    display: grid;\n    grid-template-columns: repeat(6, minmax(0, 1fr));\n    gap: 13px;\n}\n\n.tt-pro-audience {\n    min-width: 0;\n    min-height: 220px;\n    padding: 23px 19px;\n\n    border: 1px solid rgba(255,255,255,0.11);\n    border-radius: 17px;\n\n    background: rgba(255,255,255,0.05);\n\n    transition:\n        transform 0.35s ease,\n        border-color 0.3s ease,\n        background-color 0.3s ease;\n}\n\n.tt-pro-audience:hover {\n    transform: translateY(-7px);\n    border-color: rgba(204,153,51,0.38);\n    background: rgba(255,255,255,0.085);\n}\n\n.tt-pro-audience__icon {\n    width: 46px;\n    height: 46px;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    margin-bottom: 22px;\n\n    border-radius: 14px;\n\n    background: rgba(204,153,51,0.12);\n    color: var(--ttp-gold);\n}\n\n.tt-pro-audience__icon svg {\n    width: 22px;\n    height: 22px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.65;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n.tt-pro-audience h4 {\n    margin: 0;\n\n    color: var(--ttp-white);\n    font-family: \"Fraunces\", serif;\n    font-size: 23px;\n    font-weight: 600;\n}\n\n.tt-pro-audience p {\n    margin: 12px 0 0;\n\n    color: rgba(255,255,255,0.55);\n    font-size: 10px;\n    line-height: 1.65;\n}\n\n\/* =====================================================\n   PROCESSUS\n====================================================== *\/\n\n.tt-pro__process {\n    display: grid;\n    grid-template-columns: minmax(260px, 0.45fr) minmax(0, 1fr);\n    align-items: center;\n    gap: 60px;\n\n    margin-top: 80px;\n    padding-top: 50px;\n\n    border-top: 1px solid rgba(255,255,255,0.13);\n}\n\n.tt-pro__process-heading span {\n    color: var(--ttp-gold);\n    font-size: 9px;\n    font-weight: 700;\n    letter-spacing: 0.15em;\n    text-transform: uppercase;\n}\n\n.tt-pro__process-heading h3 {\n    margin: 14px 0 0;\n\n    font-family: \"Fraunces\", serif;\n    font-size: 34px;\n    font-weight: 600;\n    line-height: 1.14;\n}\n\n.tt-pro__steps {\n    display: grid;\n    grid-template-columns: 1fr auto 1fr auto 1fr;\n    align-items: center;\n    gap: 16px;\n}\n\n.tt-pro-step {\n    min-height: 158px;\n    padding: 20px;\n\n    border: 1px solid rgba(255,255,255,0.11);\n    border-radius: 16px;\n\n    background: rgba(255,255,255,0.045);\n}\n\n.tt-pro-step__number {\n    color: var(--ttp-gold);\n    font-family: \"Fraunces\", serif;\n    font-size: 24px;\n    font-weight: 600;\n}\n\n.tt-pro-step h4 {\n    margin: 18px 0 0;\n\n    color: var(--ttp-white);\n    font-size: 11px;\n    font-weight: 700;\n}\n\n.tt-pro-step p {\n    margin: 9px 0 0;\n\n    color: rgba(255,255,255,0.54);\n    font-size: 10px;\n    line-height: 1.6;\n}\n\n.tt-pro__step-arrow {\n    color: rgba(204,153,51,0.62);\n}\n\n.tt-pro__step-arrow svg {\n    width: 21px;\n    height: 21px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.6;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n\/* =====================================================\n   TABLETTE\n====================================================== *\/\n\n@media (max-width: 1100px) {\n\n    .tt-pro {\n        padding: 100px 0 90px;\n    }\n\n    .tt-pro__container {\n        width: min(100% - 48px, 940px);\n    }\n\n    .tt-pro__header {\n        grid-template-columns: 1fr;\n        gap: 25px;\n    }\n\n    .tt-pro__intro {\n        max-width: 700px;\n    }\n\n    .tt-pro__panel {\n        grid-template-columns: 1fr;\n    }\n\n    .tt-pro__audiences-grid {\n        grid-template-columns: repeat(3, minmax(0, 1fr));\n    }\n\n    .tt-pro__process {\n        grid-template-columns: 1fr;\n        gap: 30px;\n    }\n\n}\n\n\/* =====================================================\n   MOBILE\n====================================================== *\/\n\n@media (max-width: 767px) {\n\n    .tt-pro {\n        padding: 80px 0 72px;\n    }\n\n    .tt-pro__container {\n        width: calc(100% - 32px);\n    }\n\n    .tt-pro__heading h2 {\n        font-size: 48px;\n    }\n\n    .tt-pro__intro p {\n        font-size: 14px;\n    }\n\n    .tt-pro__panel {\n        border-radius: 22px;\n    }\n\n    .tt-pro__content {\n        padding: 39px 22px;\n    }\n\n    .tt-pro__content > h3 {\n        font-size: 38px;\n    }\n\n    .tt-pro__uses {\n        grid-template-columns: 1fr;\n    }\n\n    .tt-pro__request {\n        padding: 40px 22px 35px;\n    }\n\n    .tt-pro__request h3 {\n        font-size: 33px;\n    }\n\n    .tt-pro__audiences {\n        margin-top: 60px;\n    }\n\n    .tt-pro__audiences-grid {\n        grid-template-columns: repeat(2, minmax(0, 1fr));\n    }\n\n    .tt-pro-audience {\n        min-height: 205px;\n    }\n\n    .tt-pro__steps {\n        grid-template-columns: 1fr;\n    }\n\n    .tt-pro__step-arrow {\n        display: none;\n    }\n\n}\n\n\/* =====================================================\n   PETITS MOBILES\n====================================================== *\/\n\n@media (max-width: 420px) {\n\n    .tt-pro__heading h2 {\n        font-size: 42px;\n    }\n\n    .tt-pro__audiences-grid {\n        grid-template-columns: 1fr;\n    }\n\n    .tt-pro-audience {\n        min-height: auto;\n    }\n\n}\n\n\/* =====================================================\n   ACCESSIBILIT\u00c9\n====================================================== *\/\n\n@media (prefers-reduced-motion: reduce) {\n\n    .tt-pro__use,\n    .tt-pro-audience,\n    .tt-pro__button,\n    .tt-pro__header-link svg {\n        transition: none;\n    }\n\n}\n<\/style>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-4da6491 e-con e-atomic-element e-flexbox-base e-a4d03c1 \" data-id=\"4da6491\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"4da6491\" data-e-type=\"e-flexbox\" data-id=\"4da6491\">\n    \t\t<div class=\"elementor-element elementor-element-e25e72d elementor-widget elementor-widget-html\" data-id=\"e25e72d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =====================================================\n     T\u00c9L\u00c9-TH\u00c9\u00c2TRE ATB \u2014 SECTION 06\n     PLATEFORMES DE DIFFUSION\n     Compatible WordPress + Elementor\n====================================================== -->\n\n<section class=\"tt-platforms\" id=\"tt-plateformes\">\n\n    <div class=\"tt-platforms__circle tt-platforms__circle--one\" aria-hidden=\"true\"><\/div>\n    <div class=\"tt-platforms__circle tt-platforms__circle--two\" aria-hidden=\"true\"><\/div>\n\n    <div class=\"tt-platforms__container\">\n\n        <!-- En-t\u00eate -->\n        <header class=\"tt-platforms__header\">\n\n            <div class=\"tt-platforms__heading\">\n\n                <span class=\"tt-platforms__eyebrow\">\n                    <i><\/i>\n                    Retrouvez l\u2019ATB en ligne\n                <\/span>\n\n                <h2>\n                    Nos plateformes de\n                    <em>diffusion<\/em>\n                <\/h2>\n\n            <\/div>\n\n            <p class=\"tt-platforms__intro\">\n                D\u00e9couvrez les spectacles, les extraits, les archives,\n                les bandes-annonces et l\u2019actualit\u00e9 audiovisuelle de\n                l\u2019Atelier Th\u00e9\u00e2tre Burkinab\u00e8 sur ses plateformes officielles.\n            <\/p>\n\n        <\/header>\n\n        <!-- Grille principale -->\n        <div class=\"tt-platforms__grid\">\n\n            <!-- =================================================\n                 CARTE PRINCIPALE \u2014 T\u00c9L\u00c9-TH\u00c9\u00c2TRE\n            ================================================== -->\n\n            <article class=\"tt-platform tt-platform--featured\">\n\n                <div class=\"tt-platform__visual\">\n\n                    <img decoding=\"async\"\n                        src=\"http:\/\/atb.bf\/atb-v2\/wp-content\/uploads\/2026\/07\/496315668_102316010.jpg\"\n                        alt=\"T\u00e9l\u00e9-Th\u00e9\u00e2tre ATB, plateforme audiovisuelle officielle\"\n                        loading=\"lazy\"\n                        onerror=\"this.style.display='none';\"\n                    >\n\n                    <span class=\"tt-platform__visual-overlay\" aria-hidden=\"true\"><\/span>\n\n                    <span class=\"tt-platform__featured-label\">\n                        Plateforme audiovisuelle officielle\n                    <\/span>\n\n                    <span class=\"tt-platform__screen-icon\" aria-hidden=\"true\">\n\n                        <svg viewBox=\"0 0 24 24\">\n                            <rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2\"><\/rect>\n                            <path d=\"m10 9 5 3-5 3z\"><\/path>\n                        <\/svg>\n\n                    <\/span>\n\n                <\/div>\n\n                <div class=\"tt-platform__content\">\n\n                    <div class=\"tt-platform__topline\">\n\n                        <span class=\"tt-platform__brand-icon tt-platform__brand-icon--tele\">\n\n                            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                                <rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2\"><\/rect>\n                                <path d=\"m10 9 5 3-5 3z\"><\/path>\n                            <\/svg>\n\n                        <\/span>\n\n                        <span class=\"tt-platform__status\">\n                            Accessible actuellement\n                        <\/span>\n\n                    <\/div>\n\n                    <p class=\"tt-platform__type\">\n                        T\u00e9l\u00e9-Th\u00e9\u00e2tre ATB\n                    <\/p>\n\n                    <h3>\n                        La sc\u00e8ne de l\u2019ATB continue de vivre en ligne.\n                    <\/h3>\n\n                    <p>\n                        Retrouvez les productions audiovisuelles, les\n                        spectacles film\u00e9s, les extraits et les contenus\n                        diffus\u00e9s par l\u2019ATB sur son espace T\u00e9l\u00e9-Th\u00e9\u00e2tre.\n                    <\/p>\n\n                    <div class=\"tt-platform__tags\">\n                        <span>Spectacles<\/span>\n                        <span>Th\u00e9\u00e2tre forum<\/span>\n                        <span>Archives<\/span>\n                        <span>Cr\u00e9ations<\/span>\n                    <\/div>\n\n                    <a href=\"https:\/\/web.facebook.com\/teletheatreatb\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"tt-platform__button tt-platform__button--featured\">\n\n                        <span class=\"tt-platform__button-icon\">\n                            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                                <path d=\"M8 5v14l11-7z\"><\/path>\n                            <\/svg>\n                        <\/span>\n\n                        <span>Acc\u00e9der au T\u00e9l\u00e9-Th\u00e9\u00e2tre<\/span>\n\n                        <svg\n                            class=\"tt-platform__button-arrow\"\n                            viewBox=\"0 0 24 24\"\n                            aria-hidden=\"true\"\n                        >\n                            <path d=\"M5 12h14\"><\/path>\n                            <path d=\"m13 6 6 6-6 6\"><\/path>\n                        <\/svg>\n\n                    <\/a>\n\n                <\/div>\n\n            <\/article>\n\n            <!-- Colonne secondaire -->\n            <div class=\"tt-platforms__secondary\">\n\n                <!-- =================================================\n                     FACEBOOK\n                ================================================== -->\n\n                <article class=\"tt-platform tt-platform--social\">\n\n                    <div class=\"tt-platform__social-head\">\n\n                        <span class=\"tt-platform__brand-icon tt-platform__brand-icon--facebook\">\n\n                            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                                <path d=\"M14 8h3V4h-3c-3 0-5 2-5 5v3H6v4h3v6h4v-6h3l1-4h-4V9c0-.7.3-1 1-1z\"><\/path>\n                            <\/svg>\n\n                        <\/span>\n\n                        <span class=\"tt-platform__external\">\n                            Plateforme officielle\n\n                            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                                <path d=\"M14 5h5v5\"><\/path>\n                                <path d=\"m10 14 9-9\"><\/path>\n                                <path d=\"M19 13v6H5V5h6\"><\/path>\n                            <\/svg>\n                        <\/span>\n\n                    <\/div>\n\n                    <div class=\"tt-platform__social-content\">\n\n                        <p class=\"tt-platform__type\">\n                            Facebook\n                        <\/p>\n\n                        <h3>\n                            Suivez la vie quotidienne de l\u2019ATB.\n                        <\/h3>\n\n                        <p>\n                            Actualit\u00e9s, extraits de spectacles, annonces,\n                            photos, directs et informations sur les activit\u00e9s\n                            de l\u2019institution.\n                        <\/p>\n\n                    <\/div>\n\n                    <div class=\"tt-platform__social-footer\">\n\n                        <span>\n                            Actualit\u00e9s \u00b7 Directs \u00b7 Coulisses\n                        <\/span>\n\n                        <a href=\"https:\/\/web.facebook.com\/ateliertheatreburkinabe\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"Suivre l\u2019Atelier Th\u00e9\u00e2tre Burkinab\u00e8 sur Facebook\">\n\n                            <span>Suivre la page<\/span>\n\n                            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                                <path d=\"M5 12h14\"><\/path>\n                                <path d=\"m13 6 6 6-6 6\"><\/path>\n                            <\/svg>\n\n                        <\/a>\n\n                    <\/div>\n\n                <\/article>\n\n                <!-- =================================================\n                     YOUTUBE\n                ================================================== -->\n\n                <article class=\"tt-platform tt-platform--social\">\n\n                    <div class=\"tt-platform__social-head\">\n\n                        <span class=\"tt-platform__brand-icon tt-platform__brand-icon--youtube\">\n\n                            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                                <path d=\"M21 8.2a3 3 0 0 0-2.1-2.1C17.1 5.5 12 5.5 12 5.5s-5.1 0-6.9.6A3 3 0 0 0 3 8.2 31 31 0 0 0 2.5 12 31 31 0 0 0 3 15.8a3 3 0 0 0 2.1 2.1c1.8.6 6.9.6 6.9.6s5.1 0 6.9-.6a3 3 0 0 0 2.1-2.1 31 31 0 0 0 .5-3.8 31 31 0 0 0-.5-3.8z\"><\/path>\n                                <path class=\"tt-platform__youtube-play\" d=\"m10 9 5 3-5 3z\"><\/path>\n                            <\/svg>\n\n                        <\/span>\n\n                        <span class=\"tt-platform__external\">\n                            Cha\u00eene vid\u00e9o\n\n                            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                                <path d=\"M14 5h5v5\"><\/path>\n                                <path d=\"m10 14 9-9\"><\/path>\n                                <path d=\"M19 13v6H5V5h6\"><\/path>\n                            <\/svg>\n                        <\/span>\n\n                    <\/div>\n\n                    <div class=\"tt-platform__social-content\">\n\n                        <p class=\"tt-platform__type\">\n                            YouTube\n                        <\/p>\n\n                        <h3>\n                            D\u00e9couvrez les vid\u00e9os et archives de l\u2019ATB.\n                        <\/h3>\n\n                        <p>\n                            Bandes-annonces, capsules, entretiens,\n                            reportages, extraits de spectacles et contenus\n                            consacr\u00e9s au th\u00e9\u00e2tre pour le d\u00e9veloppement.\n                        <\/p>\n\n                    <\/div>\n\n                    <div class=\"tt-platform__social-footer\">\n\n                        <span>\n                            Vid\u00e9os \u00b7 Interviews \u00b7 Archives\n                        <\/span>\n\n                        <a href=\"https:\/\/www.youtube.com\/@ateliertheatreburkinabe6770\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"Voir la cha\u00eene YouTube de l\u2019Atelier Th\u00e9\u00e2tre Burkinab\u00e8\">\n\n                            <span>Voir la cha\u00eene<\/span>\n\n                            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                                <path d=\"M5 12h14\"><\/path>\n                                <path d=\"m13 6 6 6-6 6\"><\/path>\n                            <\/svg>\n\n                        <\/a>\n\n                    <\/div>\n\n                <\/article>\n\n            <\/div>\n\n        <\/div>\n\n        <!-- Bande de confiance -->\n        <div class=\"tt-platforms__trust\">\n\n            <div class=\"tt-platforms__trust-icon\">\n\n                <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                    <path d=\"M12 3 4 7v5c0 4.7 3.2 7.7 8 9 4.8-1.3 8-4.3 8-9V7z\"><\/path>\n                    <path d=\"m9 12 2 2 4-4\"><\/path>\n                <\/svg>\n\n            <\/div>\n\n            <div class=\"tt-platforms__trust-content\">\n\n                <strong>\n                    Utilisez uniquement les plateformes officielles de l\u2019ATB.\n                <\/strong>\n\n                <p>\n                    Les liens pr\u00e9sent\u00e9s sur cette page permettent d\u2019acc\u00e9der\n                    directement aux espaces num\u00e9riques administr\u00e9s par\n                    l\u2019Atelier Th\u00e9\u00e2tre Burkinab\u00e8.\n                <\/p>\n\n            <\/div>\n\n            <span class=\"tt-platforms__trust-label\">\n                Sources officielles\n            <\/span>\n\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Archivo:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&display=swap');\n\n\/* =====================================================\n   SECTION\n====================================================== *\/\n\n.tt-platforms {\n    --ttpl-bordeaux: #60052D;\n    --ttpl-bordeaux-dark: #360019;\n    --ttpl-gold: #CC9933;\n    --ttpl-gold-light: #E2B65B;\n    --ttpl-cream: #F7F0E7;\n    --ttpl-cream-light: #FCF8F2;\n    --ttpl-white: #FFFFFF;\n    --ttpl-ink: #271A20;\n    --ttpl-text: #695B61;\n\n    position: relative;\n    width: 100%;\n    overflow: hidden;\n    isolation: isolate;\n\n    padding: 125px 0 105px;\n\n    background:\n        radial-gradient(\n            circle at 86% 8%,\n            rgba(204,153,51,0.12),\n            transparent 27%\n        ),\n        linear-gradient(\n            180deg,\n            var(--ttpl-cream-light) 0%,\n            var(--ttpl-cream) 100%\n        );\n\n    color: var(--ttpl-ink);\n    font-family: \"Archivo\", sans-serif;\n}\n\n.tt-platforms::before {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    z-index: -3;\n    pointer-events: none;\n    opacity: 0.22;\n\n    background-image:\n        linear-gradient(\n            rgba(96,5,45,0.035) 1px,\n            transparent 1px\n        ),\n        linear-gradient(\n            90deg,\n            rgba(96,5,45,0.035) 1px,\n            transparent 1px\n        );\n\n    background-size: 78px 78px;\n}\n\n.tt-platforms__circle {\n    position: absolute;\n    z-index: -2;\n    pointer-events: none;\n    border-radius: 50%;\n}\n\n.tt-platforms__circle--one {\n    width: 430px;\n    height: 430px;\n    top: 150px;\n    left: -320px;\n\n    border: 1px solid rgba(96,5,45,0.11);\n}\n\n.tt-platforms__circle--two {\n    width: 330px;\n    height: 330px;\n    right: -180px;\n    bottom: -130px;\n\n    background: rgba(204,153,51,0.08);\n}\n\n.tt-platforms__container {\n    width: min(1240px, calc(100% - 80px));\n    margin: 0 auto;\n}\n\n\/* =====================================================\n   EN-T\u00caTE\n====================================================== *\/\n\n.tt-platforms__header {\n    display: grid;\n    grid-template-columns: minmax(0, 0.9fr) minmax(320px, 0.6fr);\n    align-items: end;\n    gap: 85px;\n\n    margin-bottom: 55px;\n}\n\n.tt-platforms__eyebrow {\n    display: inline-flex;\n    align-items: center;\n    gap: 13px;\n\n    margin-bottom: 18px;\n\n    color: var(--ttpl-bordeaux);\n    font-size: 10px;\n    font-weight: 700;\n    letter-spacing: 0.17em;\n    text-transform: uppercase;\n}\n\n.tt-platforms__eyebrow i {\n    width: 40px;\n    height: 1px;\n    display: block;\n    background: var(--ttpl-gold);\n}\n\n.tt-platforms__heading h2 {\n    margin: 0;\n\n    color: var(--ttpl-bordeaux);\n    font-family: \"Fraunces\", serif;\n    font-size: clamp(51px, 5.8vw, 82px);\n    font-weight: 600;\n    line-height: 0.98;\n    letter-spacing: -0.045em;\n}\n\n.tt-platforms__heading h2 em {\n    display: block;\n    margin-top: 7px;\n\n    color: var(--ttpl-gold);\n    font-weight: 500;\n}\n\n.tt-platforms__intro {\n    max-width: 510px;\n    margin: 0 0 4px;\n\n    color: var(--ttpl-text);\n    font-size: 15px;\n    line-height: 1.82;\n}\n\n\/* =====================================================\n   GRILLE PRINCIPALE\n====================================================== *\/\n\n.tt-platforms__grid {\n    display: grid;\n    grid-template-columns: minmax(0, 1.05fr) minmax(390px, 0.75fr);\n    gap: 24px;\n}\n\n\/* =====================================================\n   CARTE G\u00c9N\u00c9RALE\n====================================================== *\/\n\n.tt-platform {\n    overflow: hidden;\n\n    border: 1px solid rgba(96,5,45,0.10);\n    border-radius: 25px;\n\n    background: var(--ttpl-white);\n\n    box-shadow:\n        0 25px 65px rgba(62,20,39,0.09),\n        0 7px 20px rgba(62,20,39,0.04);\n\n    transition:\n        transform 0.45s cubic-bezier(.2,.7,.2,1),\n        border-color 0.35s ease,\n        box-shadow 0.45s ease;\n}\n\n.tt-platform:hover {\n    transform: translateY(-7px);\n    border-color: rgba(204,153,51,0.38);\n\n    box-shadow:\n        0 34px 75px rgba(62,20,39,0.14),\n        0 9px 24px rgba(62,20,39,0.06);\n}\n\n\/* =====================================================\n   T\u00c9L\u00c9-TH\u00c9\u00c2TRE PRINCIPAL\n====================================================== *\/\n\n.tt-platform--featured {\n    display: grid;\n    grid-template-rows: 360px 1fr;\n\n    min-height: 690px;\n}\n\n.tt-platform__visual {\n    position: relative;\n    overflow: hidden;\n\n    background:\n        radial-gradient(\n            circle at 70% 20%,\n            rgba(204,153,51,0.35),\n            transparent 30%\n        ),\n        linear-gradient(\n            145deg,\n            #2E0016,\n            var(--ttpl-bordeaux)\n        );\n}\n\n.tt-platform__visual::before {\n    content: \"\";\n    position: absolute;\n    inset: 18px;\n    z-index: 3;\n    pointer-events: none;\n\n    border: 1px solid rgba(255,255,255,0.18);\n    border-radius: 17px;\n}\n\n.tt-platform__visual img {\n    width: 100%;\n    height: 100%;\n    display: block;\n\n    object-fit: cover;\n    object-position: center;\n\n    transform: scale(1.02);\n\n    transition:\n        transform 0.9s cubic-bezier(.2,.7,.2,1),\n        filter 0.6s ease;\n}\n\n.tt-platform:hover .tt-platform__visual img {\n    transform: scale(1.08);\n    filter: saturate(1.08);\n}\n\n.tt-platform__visual-overlay {\n    position: absolute;\n    inset: 0;\n\n    background:\n        linear-gradient(\n            180deg,\n            rgba(24,0,11,0.08) 0%,\n            rgba(24,0,11,0.20) 48%,\n            rgba(24,0,11,0.87) 100%\n        ),\n        linear-gradient(\n            90deg,\n            rgba(24,0,11,0.27),\n            transparent 70%\n        );\n}\n\n.tt-platform__featured-label {\n    position: absolute;\n    top: 31px;\n    left: 31px;\n    z-index: 4;\n\n    padding: 10px 14px;\n\n    border: 1px solid rgba(255,255,255,0.24);\n    border-radius: 999px;\n\n    background: rgba(32,0,15,0.47);\n    color: rgba(255,255,255,0.88);\n\n    font-size: 8px;\n    font-weight: 700;\n    letter-spacing: 0.15em;\n    text-transform: uppercase;\n\n    backdrop-filter: blur(12px);\n    -webkit-backdrop-filter: blur(12px);\n}\n\n.tt-platform__screen-icon {\n    position: absolute;\n    left: 34px;\n    bottom: 31px;\n    z-index: 4;\n\n    width: 64px;\n    height: 64px;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    border-radius: 50%;\n\n    background: var(--ttpl-gold);\n    color: #2C1705;\n\n    box-shadow:\n        0 14px 38px rgba(204,153,51,0.33),\n        0 0 0 9px rgba(255,255,255,0.09);\n}\n\n.tt-platform__screen-icon svg {\n    width: 27px;\n    height: 27px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.7;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n.tt-platform__content {\n    padding: 38px 38px 37px;\n}\n\n.tt-platform__topline {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 18px;\n\n    margin-bottom: 22px;\n}\n\n.tt-platform__brand-icon {\n    flex: 0 0 auto;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    border-radius: 14px;\n}\n\n.tt-platform__brand-icon--tele {\n    width: 48px;\n    height: 48px;\n\n    background: rgba(96,5,45,0.08);\n    color: var(--ttpl-bordeaux);\n}\n\n.tt-platform__brand-icon--tele svg {\n    width: 23px;\n    height: 23px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.7;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n.tt-platform__status {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n\n    color: #6A5B61;\n    font-size: 9px;\n    font-weight: 700;\n    letter-spacing: 0.04em;\n}\n\n.tt-platform__status::before {\n    content: \"\";\n\n    width: 7px;\n    height: 7px;\n\n    border-radius: 50%;\n\n    background: #45945F;\n\n    box-shadow:\n        0 0 0 5px rgba(69,148,95,0.12);\n}\n\n.tt-platform__type {\n    margin: 0 0 12px;\n\n    color: var(--ttpl-gold);\n    font-size: 9px;\n    font-weight: 700;\n    letter-spacing: 0.15em;\n    text-transform: uppercase;\n}\n\n.tt-platform__content h3 {\n    max-width: 560px;\n    margin: 0;\n\n    color: var(--ttpl-bordeaux);\n    font-family: \"Fraunces\", serif;\n    font-size: clamp(34px, 3.3vw, 49px);\n    font-weight: 600;\n    line-height: 1.07;\n    letter-spacing: -0.035em;\n}\n\n.tt-platform__content > p:not(.tt-platform__type) {\n    max-width: 590px;\n    margin: 19px 0 0;\n\n    color: var(--ttpl-text);\n    font-size: 13px;\n    line-height: 1.75;\n}\n\n.tt-platform__tags {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 8px;\n\n    margin-top: 22px;\n}\n\n.tt-platform__tags span {\n    padding: 8px 11px;\n\n    border: 1px solid rgba(96,5,45,0.11);\n    border-radius: 999px;\n\n    color: #76666D;\n    font-size: 8px;\n    font-weight: 600;\n}\n\n\/* =====================================================\n   BOUTON PRINCIPAL\n====================================================== *\/\n\n.tt-platform__button {\n    min-height: 57px;\n    padding: 0 21px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: 11px;\n\n    margin-top: 27px;\n\n    border-radius: 999px;\n\n    text-decoration: none !important;\n\n    font-size: 10px;\n    font-weight: 700;\n    letter-spacing: 0.04em;\n\n    transition:\n        transform 0.3s ease,\n        background-color 0.3s ease,\n        box-shadow 0.3s ease;\n}\n\n.tt-platform__button--featured {\n    background: var(--ttpl-bordeaux);\n    color: var(--ttpl-white);\n\n    box-shadow:\n        0 14px 34px rgba(96,5,45,0.20);\n}\n\n.tt-platform__button--featured:hover {\n    transform: translateY(-3px);\n    background: #76063A;\n    color: var(--ttpl-white);\n\n    box-shadow:\n        0 18px 42px rgba(96,5,45,0.29);\n}\n\n.tt-platform__button-icon {\n    width: 30px;\n    height: 30px;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    border-radius: 50%;\n\n    background: rgba(255,255,255,0.13);\n}\n\n.tt-platform__button-icon svg {\n    width: 15px;\n    height: 15px;\n    margin-left: 2px;\n\n    fill: currentColor;\n}\n\n.tt-platform__button-arrow {\n    width: 17px;\n    height: 17px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.8;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n\n    transition: transform 0.3s ease;\n}\n\n.tt-platform__button:hover .tt-platform__button-arrow {\n    transform: translateX(4px);\n}\n\n\/* =====================================================\n   CARTES SOCIALES\n====================================================== *\/\n\n.tt-platforms__secondary {\n    display: grid;\n    grid-template-rows: repeat(2, minmax(0, 1fr));\n    gap: 24px;\n}\n\n.tt-platform--social {\n    display: flex;\n    flex-direction: column;\n\n    min-height: 333px;\n    padding: 28px;\n}\n\n.tt-platform__social-head {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 18px;\n}\n\n.tt-platform__brand-icon--facebook,\n.tt-platform__brand-icon--youtube {\n    width: 50px;\n    height: 50px;\n}\n\n.tt-platform__brand-icon--facebook {\n    background: #1877F2;\n    color: #FFFFFF;\n}\n\n.tt-platform__brand-icon--youtube {\n    background: #FF0000;\n    color: #FFFFFF;\n}\n\n.tt-platform__brand-icon--facebook svg {\n    width: 24px;\n    height: 24px;\n    fill: currentColor;\n}\n\n.tt-platform__brand-icon--youtube svg {\n    width: 27px;\n    height: 27px;\n\n    fill: currentColor;\n}\n\n.tt-platform__youtube-play {\n    fill: #FF0000;\n}\n\n.tt-platform__external {\n    display: inline-flex;\n    align-items: center;\n    gap: 7px;\n\n    color: #8A7A81;\n    font-size: 8px;\n    font-weight: 700;\n    letter-spacing: 0.09em;\n    text-transform: uppercase;\n}\n\n.tt-platform__external svg {\n    width: 15px;\n    height: 15px;\n\n    fill: none;\n    stroke: var(--ttpl-gold);\n    stroke-width: 1.7;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n.tt-platform__social-content {\n    margin-top: 27px;\n}\n\n.tt-platform__social-content h3 {\n    max-width: 390px;\n    margin: 0;\n\n    color: var(--ttpl-bordeaux);\n    font-family: \"Fraunces\", serif;\n    font-size: 31px;\n    font-weight: 600;\n    line-height: 1.08;\n    letter-spacing: -0.03em;\n}\n\n.tt-platform__social-content > p:not(.tt-platform__type) {\n    margin: 15px 0 0;\n\n    color: var(--ttpl-text);\n    font-size: 12px;\n    line-height: 1.7;\n}\n\n.tt-platform__social-footer {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 20px;\n\n    margin-top: auto;\n    padding-top: 20px;\n\n    border-top: 1px solid rgba(96,5,45,0.09);\n}\n\n.tt-platform__social-footer > span {\n    color: #94858B;\n    font-size: 8px;\n    font-weight: 600;\n    letter-spacing: 0.055em;\n}\n\n.tt-platform__social-footer a {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n\n    flex: 0 0 auto;\n\n    color: var(--ttpl-bordeaux);\n    font-size: 9px;\n    font-weight: 700;\n    text-decoration: none !important;\n}\n\n.tt-platform__social-footer a svg {\n    width: 17px;\n    height: 17px;\n\n    fill: none;\n    stroke: var(--ttpl-gold);\n    stroke-width: 1.8;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n\n    transition: transform 0.3s ease;\n}\n\n.tt-platform__social-footer a:hover {\n    color: var(--ttpl-gold);\n}\n\n.tt-platform__social-footer a:hover svg {\n    transform: translateX(4px);\n}\n\n\/* =====================================================\n   BANDE DE CONFIANCE\n====================================================== *\/\n\n.tt-platforms__trust {\n    display: grid;\n    grid-template-columns: auto minmax(0, 1fr) auto;\n    align-items: center;\n    gap: 20px;\n\n    margin-top: 36px;\n    padding: 23px 27px;\n\n    border: 1px solid rgba(96,5,45,0.10);\n    border-radius: 18px;\n\n    background: rgba(255,255,255,0.62);\n}\n\n.tt-platforms__trust-icon {\n    width: 45px;\n    height: 45px;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    border-radius: 14px;\n\n    background: rgba(96,5,45,0.07);\n    color: var(--ttpl-bordeaux);\n}\n\n.tt-platforms__trust-icon svg {\n    width: 21px;\n    height: 21px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.7;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n.tt-platforms__trust-content strong {\n    color: var(--ttpl-bordeaux);\n    font-size: 11px;\n    font-weight: 700;\n}\n\n.tt-platforms__trust-content p {\n    margin: 5px 0 0;\n\n    color: var(--ttpl-text);\n    font-size: 10px;\n    line-height: 1.55;\n}\n\n.tt-platforms__trust-label {\n    padding: 9px 13px;\n\n    border-radius: 999px;\n\n    background: rgba(204,153,51,0.13);\n    color: var(--ttpl-bordeaux);\n\n    font-size: 8px;\n    font-weight: 700;\n    letter-spacing: 0.09em;\n    text-transform: uppercase;\n}\n\n\/* =====================================================\n   TABLETTE\n====================================================== *\/\n\n@media (max-width: 1080px) {\n\n    .tt-platforms {\n        padding: 100px 0 90px;\n    }\n\n    .tt-platforms__container {\n        width: min(100% - 48px, 930px);\n    }\n\n    .tt-platforms__header {\n        grid-template-columns: 1fr;\n        gap: 24px;\n    }\n\n    .tt-platforms__intro {\n        max-width: 680px;\n    }\n\n    .tt-platforms__grid {\n        grid-template-columns: 1fr;\n    }\n\n    .tt-platform--featured {\n        grid-template-rows: 430px 1fr;\n    }\n\n    .tt-platforms__secondary {\n        grid-template-columns: repeat(2, minmax(0, 1fr));\n        grid-template-rows: auto;\n    }\n\n}\n\n\/* =====================================================\n   MOBILE\n====================================================== *\/\n\n@media (max-width: 767px) {\n\n    .tt-platforms {\n        padding: 80px 0 72px;\n    }\n\n    .tt-platforms__container {\n        width: calc(100% - 32px);\n    }\n\n    .tt-platforms__heading h2 {\n        font-size: 49px;\n    }\n\n    .tt-platforms__intro {\n        font-size: 14px;\n    }\n\n    .tt-platform {\n        border-radius: 21px;\n    }\n\n    .tt-platform--featured {\n        grid-template-rows: 350px 1fr;\n        min-height: auto;\n    }\n\n    .tt-platform__content {\n        padding: 31px 22px 28px;\n    }\n\n    .tt-platform__content h3 {\n        font-size: 37px;\n    }\n\n    .tt-platform__featured-label {\n        top: 23px;\n        left: 23px;\n    }\n\n    .tt-platform__screen-icon {\n        left: 25px;\n        bottom: 25px;\n\n        width: 56px;\n        height: 56px;\n    }\n\n    .tt-platform__button {\n        width: 100%;\n    }\n\n    .tt-platforms__secondary {\n        grid-template-columns: 1fr;\n    }\n\n    .tt-platform--social {\n        min-height: 330px;\n        padding: 24px 21px;\n    }\n\n    .tt-platform__social-content h3 {\n        font-size: 29px;\n    }\n\n    .tt-platforms__trust {\n        grid-template-columns: auto 1fr;\n    }\n\n    .tt-platforms__trust-label {\n        grid-column: 1 \/ -1;\n        justify-self: flex-start;\n    }\n\n}\n\n\/* =====================================================\n   PETITS MOBILES\n====================================================== *\/\n\n@media (max-width: 400px) {\n\n    .tt-platforms__heading h2 {\n        font-size: 43px;\n    }\n\n    .tt-platform--featured {\n        grid-template-rows: 310px 1fr;\n    }\n\n    .tt-platform__topline {\n        align-items: flex-start;\n        flex-direction: column;\n    }\n\n    .tt-platform__social-footer {\n        align-items: flex-start;\n        flex-direction: column;\n    }\n\n}\n\n\/* =====================================================\n   ACCESSIBILIT\u00c9\n====================================================== *\/\n\n@media (prefers-reduced-motion: reduce) {\n\n    .tt-platform,\n    .tt-platform__visual img,\n    .tt-platform__button,\n    .tt-platform__button-arrow,\n    .tt-platform__social-footer a svg {\n        transition: none;\n    }\n\n}\n<\/style>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-87f2b2e e-con e-atomic-element e-flexbox-base e-890d196 \" data-id=\"87f2b2e\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"87f2b2e\" data-e-type=\"e-flexbox\" data-id=\"87f2b2e\">\n    \t\t<div class=\"elementor-element elementor-element-9a171c8 elementor-widget elementor-widget-html\" data-id=\"9a171c8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =====================================================\n     T\u00c9L\u00c9-TH\u00c9\u00c2TRE ATB \u2014 SECTION 07\n     UNE PLATEFORME EN CONSTANTE \u00c9VOLUTION\n     Compatible WordPress + Elementor\n====================================================== -->\n\n<section class=\"tt-future\" id=\"tt-evolution\">\n\n    <div class=\"tt-future__halo tt-future__halo--one\" aria-hidden=\"true\"><\/div>\n    <div class=\"tt-future__halo tt-future__halo--two\" aria-hidden=\"true\"><\/div>\n\n    <div class=\"tt-future__container\">\n\n        <!-- En-t\u00eate -->\n        <header class=\"tt-future__header\">\n\n            <div class=\"tt-future__heading\">\n\n                <span class=\"tt-future__eyebrow\">\n                    <i><\/i>\n                    Une vision pens\u00e9e pour demain\n                <\/span>\n\n                <h2>\n                    Une plateforme en\n                    <em>constante \u00e9volution.<\/em>\n                <\/h2>\n\n            <\/div>\n\n            <div class=\"tt-future__intro\">\n\n                <p>\n                    Le T\u00e9l\u00e9-Th\u00e9\u00e2tre ATB \u00e9voluera progressivement pour proposer\n                    de nouvelles formes d\u2019acc\u00e8s aux cr\u00e9ations, aux archives et\n                    aux ressources audiovisuelles de l\u2019institution.\n                <\/p>\n\n                <span class=\"tt-future__intro-note\">\n                    Une \u00e9volution progressive, fid\u00e8le \u00e0 la mission culturelle\n                    et sociale de l\u2019ATB.\n                <\/span>\n\n            <\/div>\n\n        <\/header>\n\n        <!-- Bloc manifeste -->\n        <div class=\"tt-future__manifesto\">\n\n            <div class=\"tt-future__manifesto-content\">\n\n                <span class=\"tt-future__manifesto-label\">\n                    Aujourd\u2019hui\n                <\/span>\n\n                <h3>\n                    Une vitrine ouverte sur les productions audiovisuelles de l\u2019ATB.\n                <\/h3>\n\n                <p>\n                    Le public peut d\u00e9couvrir les cr\u00e9ations disponibles,\n                    acc\u00e9der aux plateformes officielles et identifier les\n                    productions pouvant \u00eatre diffus\u00e9es dans un cadre\n                    professionnel, \u00e9ducatif ou culturel.\n                <\/p>\n\n            <\/div>\n\n            <div class=\"tt-future__manifesto-visual\" aria-hidden=\"true\">\n\n                <span class=\"tt-future__manifesto-circle\">\n                    <svg viewBox=\"0 0 24 24\">\n                        <rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2\"><\/rect>\n                        <path d=\"m10 9 5 3-5 3z\"><\/path>\n                    <\/svg>\n                <\/span>\n\n                <span class=\"tt-future__manifesto-line\"><\/span>\n\n                <span class=\"tt-future__manifesto-word\">\n                    Demain\n                <\/span>\n\n            <\/div>\n\n        <\/div>\n\n        <!-- Parcours d\u2019\u00e9volution -->\n        <div class=\"tt-future__roadmap\">\n\n            <!-- \u00c9tape 1 -->\n            <article class=\"tt-future-step tt-future-step--active\">\n\n                <div class=\"tt-future-step__top\">\n\n                    <span class=\"tt-future-step__number\">\n                        01\n                    <\/span>\n\n                    <span class=\"tt-future-step__status\">\n                        Disponible\n                    <\/span>\n\n                <\/div>\n\n                <span class=\"tt-future-step__icon\">\n\n                    <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                        <path d=\"M4 5h16v14H4z\"><\/path>\n                        <path d=\"m9 9 6 3-6 3z\"><\/path>\n                    <\/svg>\n\n                <\/span>\n\n                <h3>\n                    Productions gratuites\n                <\/h3>\n\n                <p>\n                    Acc\u00e8s libre \u00e0 une s\u00e9lection de spectacles, extraits,\n                    capsules et cr\u00e9ations audiovisuelles.\n                <\/p>\n\n                <span class=\"tt-future-step__progress\"><\/span>\n\n            <\/article>\n\n            <!-- \u00c9tape 2 -->\n            <article class=\"tt-future-step\">\n\n                <div class=\"tt-future-step__top\">\n\n                    <span class=\"tt-future-step__number\">\n                        02\n                    <\/span>\n\n                    <span class=\"tt-future-step__status\">\n                        \u00c0 venir\n                    <\/span>\n\n                <\/div>\n\n                <span class=\"tt-future-step__icon\">\n\n                    <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                        <path d=\"M12 3 5 7v5c0 4 2.8 7 7 9 4.2-2 7-5 7-9V7z\"><\/path>\n                        <path d=\"M9 12h6\"><\/path>\n                        <path d=\"M12 9v6\"><\/path>\n                    <\/svg>\n\n                <\/span>\n\n                <h3>\n                    Contenus premium\n                <\/h3>\n\n                <p>\n                    Acc\u00e8s r\u00e9serv\u00e9 \u00e0 certaines captations, collections,\n                    archives ou cr\u00e9ations exclusives.\n                <\/p>\n\n                <span class=\"tt-future-step__progress\"><\/span>\n\n            <\/article>\n\n            <!-- \u00c9tape 3 -->\n            <article class=\"tt-future-step\">\n\n                <div class=\"tt-future-step__top\">\n\n                    <span class=\"tt-future-step__number\">\n                        03\n                    <\/span>\n\n                    <span class=\"tt-future-step__status\">\n                        \u00c0 d\u00e9velopper\n                    <\/span>\n\n                <\/div>\n\n                <span class=\"tt-future-step__icon\">\n\n                    <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                        <path d=\"M5 4h14v16H5z\"><\/path>\n                        <path d=\"M8 8h8\"><\/path>\n                        <path d=\"M8 12h8\"><\/path>\n                        <path d=\"M8 16h5\"><\/path>\n                    <\/svg>\n\n                <\/span>\n\n                <h3>\n                    Licences institutionnelles\n                <\/h3>\n\n                <p>\n                    Mise \u00e0 disposition encadr\u00e9e pour les ONG, t\u00e9l\u00e9visions,\n                    universit\u00e9s et partenaires.\n                <\/p>\n\n                <span class=\"tt-future-step__progress\"><\/span>\n\n            <\/article>\n\n            <!-- \u00c9tape 4 -->\n            <article class=\"tt-future-step\">\n\n                <div class=\"tt-future-step__top\">\n\n                    <span class=\"tt-future-step__number\">\n                        04\n                    <\/span>\n\n                    <span class=\"tt-future-step__status\">\n                        \u00c0 d\u00e9velopper\n                    <\/span>\n\n                <\/div>\n\n                <span class=\"tt-future-step__icon\">\n\n                    <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                        <path d=\"m3 9 9-5 9 5-9 5z\"><\/path>\n                        <path d=\"M7 12v5c3 2 7 2 10 0v-5\"><\/path>\n                    <\/svg>\n\n                <\/span>\n\n                <h3>\n                    Ressources p\u00e9dagogiques\n                <\/h3>\n\n                <p>\n                    Modules, vid\u00e9os, outils m\u00e9thodologiques et contenus\n                    destin\u00e9s \u00e0 la formation.\n                <\/p>\n\n                <span class=\"tt-future-step__progress\"><\/span>\n\n            <\/article>\n\n            <!-- \u00c9tape 5 -->\n            <article class=\"tt-future-step\">\n\n                <div class=\"tt-future-step__top\">\n\n                    <span class=\"tt-future-step__number\">\n                        05\n                    <\/span>\n\n                    <span class=\"tt-future-step__status\">\n                        Perspective\n                    <\/span>\n\n                <\/div>\n\n                <span class=\"tt-future-step__icon\">\n\n                    <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                        <rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2\"><\/rect>\n                        <path d=\"m10 9 5 3-5 3z\"><\/path>\n                        <path d=\"M7 22h10\"><\/path>\n                    <\/svg>\n\n                <\/span>\n\n                <h3>\n                    Vid\u00e9o \u00e0 la demande\n                <\/h3>\n\n                <p>\n                    Visionnage ponctuel de productions s\u00e9lectionn\u00e9es selon\n                    des modalit\u00e9s d\u00e9finies par l\u2019ATB.\n                <\/p>\n\n                <span class=\"tt-future-step__progress\"><\/span>\n\n            <\/article>\n\n            <!-- \u00c9tape 6 -->\n            <article class=\"tt-future-step\">\n\n                <div class=\"tt-future-step__top\">\n\n                    <span class=\"tt-future-step__number\">\n                        06\n                    <\/span>\n\n                    <span class=\"tt-future-step__status\">\n                        Perspective\n                    <\/span>\n\n                <\/div>\n\n                <span class=\"tt-future-step__icon\">\n\n                    <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                        <path d=\"M4 6h16v14H4z\"><\/path>\n                        <path d=\"M8 6V3h8v3\"><\/path>\n                        <path d=\"M8 11h8\"><\/path>\n                        <path d=\"M8 15h5\"><\/path>\n                    <\/svg>\n\n                <\/span>\n\n                <h3>\n                    Archives audiovisuelles\n                <\/h3>\n\n                <p>\n                    Pr\u00e9servation et valorisation progressive de la m\u00e9moire\n                    film\u00e9e de l\u2019ATB.\n                <\/p>\n\n                <span class=\"tt-future-step__progress\"><\/span>\n\n            <\/article>\n\n        <\/div>\n\n        <!-- Bande inf\u00e9rieure -->\n        <div class=\"tt-future__bottom\">\n\n            <div class=\"tt-future__bottom-icon\">\n\n                <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                    <path d=\"M12 2v4\"><\/path>\n                    <path d=\"M12 18v4\"><\/path>\n                    <path d=\"M4.9 4.9 7.7 7.7\"><\/path>\n                    <path d=\"m16.3 16.3 2.8 2.8\"><\/path>\n                    <path d=\"M2 12h4\"><\/path>\n                    <path d=\"M18 12h4\"><\/path>\n                    <path d=\"m4.9 19.1 2.8-2.8\"><\/path>\n                    <path d=\"m16.3 7.7 2.8-2.8\"><\/path>\n                    <circle cx=\"12\" cy=\"12\" r=\"3\"><\/circle>\n                <\/svg>\n\n            <\/div>\n\n            <div class=\"tt-future__bottom-content\">\n\n                <span>\n                    Une plateforme con\u00e7ue pour durer\n                <\/span>\n\n                <p>\n                    L\u2019architecture actuelle permet d\u2019int\u00e9grer progressivement\n                    de nouvelles productions, cat\u00e9gories, statuts d\u2019acc\u00e8s et\n                    modalit\u00e9s de diffusion sans transformer enti\u00e8rement la page.\n                <\/p>\n\n            <\/div>\n\n            <a href=\"\/contact\/\" class=\"tt-future__bottom-link\">\n\n                <span>Parler d\u2019un projet audiovisuel<\/span>\n\n                <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                    <path d=\"M5 12h14\"><\/path>\n                    <path d=\"m13 6 6 6-6 6\"><\/path>\n                <\/svg>\n\n            <\/a>\n\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Archivo:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&display=swap');\n\n\/* =====================================================\n   SECTION\n====================================================== *\/\n\n.tt-future {\n    --ttf-bordeaux: #60052D;\n    --ttf-bordeaux-dark: #320017;\n    --ttf-gold: #CC9933;\n    --ttf-gold-light: #E2B65B;\n    --ttf-cream: #F7F0E7;\n    --ttf-cream-light: #FCF8F2;\n    --ttf-white: #FFFFFF;\n    --ttf-ink: #271A20;\n    --ttf-text: #695B61;\n\n    position: relative;\n    width: 100%;\n    overflow: hidden;\n    isolation: isolate;\n\n    padding: 125px 0 110px;\n\n    background:\n        radial-gradient(\n            circle at 10% 10%,\n            rgba(204,153,51,0.11),\n            transparent 27%\n        ),\n        linear-gradient(\n            180deg,\n            var(--ttf-cream-light) 0%,\n            var(--ttf-cream) 100%\n        );\n\n    color: var(--ttf-ink);\n    font-family: \"Archivo\", sans-serif;\n}\n\n.tt-future::before {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    z-index: -3;\n    pointer-events: none;\n    opacity: 0.22;\n\n    background-image:\n        linear-gradient(\n            rgba(96,5,45,0.035) 1px,\n            transparent 1px\n        ),\n        linear-gradient(\n            90deg,\n            rgba(96,5,45,0.035) 1px,\n            transparent 1px\n        );\n\n    background-size: 78px 78px;\n}\n\n.tt-future__halo {\n    position: absolute;\n    z-index: -2;\n    pointer-events: none;\n    border-radius: 50%;\n}\n\n.tt-future__halo--one {\n    width: 470px;\n    height: 470px;\n    top: -260px;\n    right: -190px;\n\n    border: 1px solid rgba(96,5,45,0.10);\n}\n\n.tt-future__halo--two {\n    width: 310px;\n    height: 310px;\n    left: -190px;\n    bottom: -110px;\n\n    background: rgba(204,153,51,0.08);\n}\n\n.tt-future__container {\n    width: min(1240px, calc(100% - 80px));\n    margin: 0 auto;\n}\n\n\/* =====================================================\n   EN-T\u00caTE\n====================================================== *\/\n\n.tt-future__header {\n    display: grid;\n    grid-template-columns: minmax(0, 0.95fr) minmax(330px, 0.55fr);\n    align-items: end;\n    gap: 85px;\n\n    margin-bottom: 55px;\n}\n\n.tt-future__eyebrow {\n    display: inline-flex;\n    align-items: center;\n    gap: 13px;\n\n    margin-bottom: 18px;\n\n    color: var(--ttf-bordeaux);\n    font-size: 10px;\n    font-weight: 700;\n    letter-spacing: 0.17em;\n    text-transform: uppercase;\n}\n\n.tt-future__eyebrow i {\n    width: 40px;\n    height: 1px;\n    display: block;\n    background: var(--ttf-gold);\n}\n\n.tt-future__heading h2 {\n    margin: 0;\n\n    color: var(--ttf-bordeaux);\n    font-family: \"Fraunces\", serif;\n    font-size: clamp(50px, 5.8vw, 82px);\n    font-weight: 600;\n    line-height: 0.98;\n    letter-spacing: -0.045em;\n}\n\n.tt-future__heading h2 em {\n    display: block;\n    margin-top: 7px;\n\n    color: var(--ttf-gold);\n    font-weight: 500;\n}\n\n.tt-future__intro p {\n    margin: 0;\n\n    color: var(--ttf-text);\n    font-size: 15px;\n    line-height: 1.82;\n}\n\n.tt-future__intro-note {\n    display: block;\n\n    margin-top: 17px;\n    padding-left: 15px;\n\n    border-left: 2px solid var(--ttf-gold);\n\n    color: var(--ttf-bordeaux);\n    font-family: \"Fraunces\", serif;\n    font-size: 16px;\n    font-style: italic;\n    line-height: 1.55;\n}\n\n\/* =====================================================\n   MANIFESTE\n====================================================== *\/\n\n.tt-future__manifesto {\n    display: grid;\n    grid-template-columns: minmax(0, 1fr) minmax(270px, 0.4fr);\n    align-items: center;\n    gap: 60px;\n\n    overflow: hidden;\n\n    padding: 50px 54px;\n\n    border-radius: 26px;\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--ttf-bordeaux-dark) 0%,\n            var(--ttf-bordeaux) 100%\n        );\n\n    color: var(--ttf-white);\n\n    box-shadow:\n        0 28px 70px rgba(62,20,39,0.16);\n}\n\n.tt-future__manifesto-label {\n    display: inline-flex;\n\n    margin-bottom: 17px;\n\n    color: var(--ttf-gold);\n    font-size: 9px;\n    font-weight: 700;\n    letter-spacing: 0.15em;\n    text-transform: uppercase;\n}\n\n.tt-future__manifesto h3 {\n    max-width: 760px;\n    margin: 0;\n\n    font-family: \"Fraunces\", serif;\n    font-size: clamp(34px, 3.6vw, 51px);\n    font-weight: 600;\n    line-height: 1.08;\n    letter-spacing: -0.035em;\n}\n\n.tt-future__manifesto p {\n    max-width: 760px;\n    margin: 20px 0 0;\n\n    color: rgba(255,255,255,0.68);\n    font-size: 14px;\n    line-height: 1.78;\n}\n\n.tt-future__manifesto-visual {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n\n    min-height: 220px;\n}\n\n.tt-future__manifesto-circle {\n    width: 74px;\n    height: 74px;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    border-radius: 50%;\n\n    background: var(--ttf-gold);\n    color: #2C1705;\n\n    box-shadow:\n        0 15px 40px rgba(204,153,51,0.28),\n        0 0 0 10px rgba(255,255,255,0.07);\n}\n\n.tt-future__manifesto-circle svg {\n    width: 31px;\n    height: 31px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.7;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n.tt-future__manifesto-line {\n    width: 1px;\n    height: 55px;\n\n    margin: 16px 0;\n\n    background:\n        linear-gradient(\n            180deg,\n            var(--ttf-gold),\n            rgba(204,153,51,0.15)\n        );\n}\n\n.tt-future__manifesto-word {\n    color: rgba(255,255,255,0.82);\n    font-family: \"Fraunces\", serif;\n    font-size: 26px;\n    font-style: italic;\n}\n\n\/* =====================================================\n   ROADMAP\n====================================================== *\/\n\n.tt-future__roadmap {\n    display: grid;\n    grid-template-columns: repeat(3, minmax(0, 1fr));\n    gap: 20px;\n\n    margin-top: 34px;\n}\n\n.tt-future-step {\n    position: relative;\n    overflow: hidden;\n\n    min-height: 330px;\n    padding: 27px 25px 28px;\n\n    border: 1px solid rgba(96,5,45,0.09);\n    border-radius: 19px;\n\n    background: rgba(255,255,255,0.72);\n\n    box-shadow:\n        0 14px 38px rgba(62,20,39,0.055);\n\n    transition:\n        transform 0.4s cubic-bezier(.2,.7,.2,1),\n        border-color 0.3s ease,\n        background-color 0.3s ease,\n        box-shadow 0.4s ease;\n}\n\n.tt-future-step::before {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n\n    background:\n        linear-gradient(\n            145deg,\n            rgba(204,153,51,0.10),\n            transparent 50%\n        );\n\n    opacity: 0;\n    transition: opacity 0.35s ease;\n}\n\n.tt-future-step:hover {\n    transform: translateY(-8px);\n\n    border-color: rgba(204,153,51,0.36);\n    background: var(--ttf-white);\n\n    box-shadow:\n        0 25px 56px rgba(62,20,39,0.11);\n}\n\n.tt-future-step:hover::before {\n    opacity: 1;\n}\n\n.tt-future-step--active {\n    border-color: rgba(96,5,45,0.20);\n    background:\n        linear-gradient(\n            150deg,\n            rgba(96,5,45,0.96),\n            rgba(67,0,31,0.98)\n        );\n\n    color: var(--ttf-white);\n}\n\n.tt-future-step__top {\n    position: relative;\n    z-index: 2;\n\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 15px;\n}\n\n.tt-future-step__number {\n    color: var(--ttf-gold);\n    font-family: \"Fraunces\", serif;\n    font-size: 26px;\n    font-weight: 600;\n}\n\n.tt-future-step__status {\n    padding: 8px 10px;\n\n    border-radius: 999px;\n\n    background: rgba(96,5,45,0.07);\n    color: var(--ttf-bordeaux);\n\n    font-size: 7px;\n    font-weight: 700;\n    letter-spacing: 0.10em;\n    text-transform: uppercase;\n}\n\n.tt-future-step--active .tt-future-step__status {\n    background: rgba(255,255,255,0.10);\n    color: var(--ttf-gold-light);\n}\n\n.tt-future-step__icon {\n    position: relative;\n    z-index: 2;\n\n    width: 54px;\n    height: 54px;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    margin-top: 30px;\n\n    border-radius: 15px;\n\n    background: rgba(96,5,45,0.07);\n    color: var(--ttf-bordeaux);\n\n    transition:\n        transform 0.3s ease,\n        background-color 0.3s ease,\n        color 0.3s ease;\n}\n\n.tt-future-step:hover .tt-future-step__icon {\n    transform: translateY(-3px) rotate(-3deg);\n\n    background: var(--ttf-bordeaux);\n    color: var(--ttf-white);\n}\n\n.tt-future-step--active .tt-future-step__icon {\n    background: rgba(204,153,51,0.14);\n    color: var(--ttf-gold);\n}\n\n.tt-future-step--active:hover .tt-future-step__icon {\n    background: var(--ttf-gold);\n    color: #2C1705;\n}\n\n.tt-future-step__icon svg {\n    width: 24px;\n    height: 24px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.7;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n.tt-future-step h3 {\n    position: relative;\n    z-index: 2;\n\n    margin: 25px 0 0;\n\n    color: var(--ttf-bordeaux);\n    font-family: \"Fraunces\", serif;\n    font-size: 28px;\n    font-weight: 600;\n    line-height: 1.12;\n}\n\n.tt-future-step--active h3 {\n    color: var(--ttf-white);\n}\n\n.tt-future-step p {\n    position: relative;\n    z-index: 2;\n\n    margin: 14px 0 0;\n\n    color: var(--ttf-text);\n    font-size: 13px;\n    line-height: 1.72;\n}\n\n.tt-future-step--active p {\n    color: rgba(255,255,255,0.64);\n}\n\n.tt-future-step__progress {\n    position: absolute;\n    left: 25px;\n    right: 25px;\n    bottom: 0;\n\n    height: 3px;\n\n    background: rgba(96,5,45,0.07);\n}\n\n.tt-future-step__progress::before {\n    content: \"\";\n    position: absolute;\n    inset: 0 auto 0 0;\n\n    width: 24%;\n\n    background: var(--ttf-gold);\n\n    transition: width 0.45s ease;\n}\n\n.tt-future-step:hover .tt-future-step__progress::before {\n    width: 100%;\n}\n\n.tt-future-step--active .tt-future-step__progress {\n    background: rgba(255,255,255,0.08);\n}\n\n.tt-future-step--active .tt-future-step__progress::before {\n    width: 100%;\n}\n\n\/* =====================================================\n   BANDE INF\u00c9RIEURE\n====================================================== *\/\n\n.tt-future__bottom {\n    display: grid;\n    grid-template-columns: auto minmax(0, 1fr) auto;\n    align-items: center;\n    gap: 22px;\n\n    margin-top: 40px;\n    padding: 26px 28px;\n\n    border: 1px solid rgba(96,5,45,0.10);\n    border-radius: 18px;\n\n    background: rgba(255,255,255,0.64);\n}\n\n.tt-future__bottom-icon {\n    width: 49px;\n    height: 49px;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    border-radius: 15px;\n\n    background: rgba(204,153,51,0.14);\n    color: var(--ttf-bordeaux);\n}\n\n.tt-future__bottom-icon svg {\n    width: 23px;\n    height: 23px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.7;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n.tt-future__bottom-content span {\n    color: var(--ttf-bordeaux);\n    font-size: 11px;\n    font-weight: 700;\n}\n\n.tt-future__bottom-content p {\n    max-width: 720px;\n    margin: 6px 0 0;\n\n    color: var(--ttf-text);\n    font-size: 10px;\n    line-height: 1.6;\n}\n\n.tt-future__bottom-link {\n    min-height: 50px;\n    padding: 0 18px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: 10px;\n\n    border: 1px solid rgba(96,5,45,0.16);\n    border-radius: 999px;\n\n    color: var(--ttf-bordeaux);\n    text-decoration: none !important;\n\n    font-size: 9px;\n    font-weight: 700;\n    letter-spacing: 0.04em;\n\n    transition:\n        transform 0.3s ease,\n        border-color 0.3s ease,\n        background-color 0.3s ease;\n}\n\n.tt-future__bottom-link:hover {\n    transform: translateY(-3px);\n\n    border-color: var(--ttf-gold);\n    background: rgba(204,153,51,0.08);\n    color: var(--ttf-bordeaux);\n}\n\n.tt-future__bottom-link svg {\n    width: 17px;\n    height: 17px;\n\n    fill: none;\n    stroke: var(--ttf-gold);\n    stroke-width: 1.8;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n\n    transition: transform 0.3s ease;\n}\n\n.tt-future__bottom-link:hover svg {\n    transform: translateX(4px);\n}\n\n\/* =====================================================\n   TABLETTE\n====================================================== *\/\n\n@media (max-width: 1080px) {\n\n    .tt-future {\n        padding: 100px 0 90px;\n    }\n\n    .tt-future__container {\n        width: min(100% - 48px, 930px);\n    }\n\n    .tt-future__header {\n        grid-template-columns: 1fr;\n        gap: 25px;\n    }\n\n    .tt-future__intro {\n        max-width: 700px;\n    }\n\n    .tt-future__manifesto {\n        grid-template-columns: 1fr;\n    }\n\n    .tt-future__manifesto-visual {\n        align-items: flex-start;\n        flex-direction: row;\n        justify-content: flex-start;\n\n        min-height: auto;\n    }\n\n    .tt-future__manifesto-line {\n        width: 70px;\n        height: 1px;\n\n        margin: 36px 17px;\n    }\n\n    .tt-future__manifesto-word {\n        margin-top: 22px;\n    }\n\n    .tt-future__roadmap {\n        grid-template-columns: repeat(2, minmax(0, 1fr));\n    }\n\n}\n\n\/* =====================================================\n   MOBILE\n====================================================== *\/\n\n@media (max-width: 767px) {\n\n    .tt-future {\n        padding: 80px 0 72px;\n    }\n\n    .tt-future__container {\n        width: calc(100% - 32px);\n    }\n\n    .tt-future__heading h2 {\n        font-size: 48px;\n    }\n\n    .tt-future__intro p {\n        font-size: 14px;\n    }\n\n    .tt-future__manifesto {\n        padding: 38px 22px;\n        border-radius: 21px;\n    }\n\n    .tt-future__manifesto h3 {\n        font-size: 37px;\n    }\n\n    .tt-future__manifesto p {\n        font-size: 13px;\n    }\n\n    .tt-future__manifesto-circle {\n        width: 60px;\n        height: 60px;\n    }\n\n    .tt-future__manifesto-line {\n        width: 45px;\n        margin: 30px 13px;\n    }\n\n    .tt-future__manifesto-word {\n        font-size: 22px;\n        margin-top: 18px;\n    }\n\n    .tt-future__roadmap {\n        grid-template-columns: 1fr;\n    }\n\n    .tt-future-step {\n        min-height: auto;\n    }\n\n    .tt-future__bottom {\n        grid-template-columns: auto 1fr;\n    }\n\n    .tt-future__bottom-link {\n        grid-column: 1 \/ -1;\n        width: 100%;\n    }\n\n}\n\n\/* =====================================================\n   PETITS MOBILES\n====================================================== *\/\n\n@media (max-width: 390px) {\n\n    .tt-future__heading h2 {\n        font-size: 42px;\n    }\n\n    .tt-future__manifesto-visual {\n        align-items: center;\n        flex-direction: column;\n    }\n\n    .tt-future__manifesto-line {\n        width: 1px;\n        height: 40px;\n        margin: 14px 0;\n    }\n\n    .tt-future__manifesto-word {\n        margin-top: 0;\n    }\n\n}\n\n\/* =====================================================\n   ACCESSIBILIT\u00c9\n====================================================== *\/\n\n@media (prefers-reduced-motion: reduce) {\n\n    .tt-future-step,\n    .tt-future-step__icon,\n    .tt-future-step__progress::before,\n    .tt-future__bottom-link,\n    .tt-future__bottom-link svg {\n        transition: none;\n    }\n\n}\n<\/style>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-1c806a6 e-con e-atomic-element e-flexbox-base e-16591df \" data-id=\"1c806a6\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"1c806a6\" data-e-type=\"e-flexbox\" data-id=\"1c806a6\">\n    \t\t<div class=\"elementor-element elementor-element-f5f6830 elementor-widget__width-initial elementor-widget-tablet__width-initial elementor-widget elementor-widget-html\" data-id=\"f5f6830\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =====================================================\n     T\u00c9L\u00c9-TH\u00c9\u00c2TRE ATB \u2014 SECTION 08\n     CTA FINAL IMMERSIF\n     Compatible WordPress + Elementor\n====================================================== -->\n\n<section class=\"tt-final\" id=\"tt-final\">\n\n    <!-- Image et effets -->\n    <div class=\"tt-final__background\" aria-hidden=\"true\"><\/div>\n    <div class=\"tt-final__overlay\" aria-hidden=\"true\"><\/div>\n    <div class=\"tt-final__glow\" aria-hidden=\"true\"><\/div>\n    <div class=\"tt-final__grain\" aria-hidden=\"true\"><\/div>\n\n    <!-- D\u00e9cor -->\n    <span class=\"tt-final__line tt-final__line--left\" aria-hidden=\"true\"><\/span>\n    <span class=\"tt-final__line tt-final__line--right\" aria-hidden=\"true\"><\/span>\n\n    <div class=\"tt-final__container\">\n\n        <div class=\"tt-final__content\">\n\n            <span class=\"tt-final__eyebrow\">\n                <i><\/i>\n                T\u00e9l\u00e9-Th\u00e9\u00e2tre ATB\n                <i><\/i>\n            <\/span>\n\n            <h2>\n                Le th\u00e9\u00e2tre continue de vivre\n                <em>\u00e0 l\u2019\u00e9cran.<\/em>\n            <\/h2>\n\n            <p class=\"tt-final__lead\">\n                Chaque nouvelle production est une invitation \u00e0 d\u00e9couvrir,\n                r\u00e9fl\u00e9chir, dialoguer et agir.\n            <\/p>\n\n            <p class=\"tt-final__text\">\n                Revenez r\u00e9guli\u00e8rement pour d\u00e9couvrir les spectacles film\u00e9s,\n                les cr\u00e9ations audiovisuelles, les archives, les contenus\n                p\u00e9dagogiques et les nouvelles productions de l\u2019Atelier\n                Th\u00e9\u00e2tre Burkinab\u00e8.\n            <\/p>\n\n            <div class=\"tt-final__actions\">\n\n                <a href=\"#atb-creations\" class=\"tt-final__btn tt-final__btn--primary\">\n\n                    <span class=\"tt-final__btn-icon\">\n                        <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                            <path d=\"M8 5v14l11-7z\"><\/path>\n                        <\/svg>\n                    <\/span>\n\n                    <span>Voir toutes les productions<\/span>\n\n                <\/a>\n\n                <a href=\"\/contact\/\" class=\"tt-final__btn tt-final__btn--secondary\">\n\n                    <span>Nous contacter<\/span>\n\n                    <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                        <path d=\"M5 12h14\"><\/path>\n                        <path d=\"m13 6 6 6-6 6\"><\/path>\n                    <\/svg>\n\n                <\/a>\n\n            <\/div>\n\n        <\/div>\n\n        <!-- Carte signature -->\n        <div class=\"tt-final__signature\">\n\n            <span class=\"tt-final__signature-icon\">\n\n                <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                    <rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2\"><\/rect>\n                    <path d=\"m10 9 5 3-5 3z\"><\/path>\n                <\/svg>\n\n            <\/span>\n\n            <div class=\"tt-final__signature-content\">\n\n                <small>\n                    Une m\u00e9moire vivante\n                <\/small>\n\n                <strong>\n                    Cr\u00e9er. Filmer. Transmettre.\n                <\/strong>\n\n                <p>\n                    Le T\u00e9l\u00e9-Th\u00e9\u00e2tre prolonge la mission de l\u2019ATB\n                    bien au-del\u00e0 de la sc\u00e8ne.\n                <\/p>\n\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n\n    <!-- Bas de section -->\n    <div class=\"tt-final__footer\">\n\n        <div class=\"tt-final__footer-inner\">\n\n            <span>\n                Spectacles\n            <\/span>\n\n            <i><\/i>\n\n            <span>\n                Th\u00e9\u00e2tre forum\n            <\/span>\n\n            <i><\/i>\n\n            <span>\n                Captations\n            <\/span>\n\n            <i><\/i>\n\n            <span>\n                Transmission\n            <\/span>\n\n            <i><\/i>\n\n            <span>\n                Archives\n            <\/span>\n\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Archivo:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&display=swap');\n\n\/* =====================================================\n   SECTION\n====================================================== *\/\n\n.tt-final {\n    --ttf-bordeaux: #60052D;\n    --ttf-bordeaux-dark: #260011;\n    --ttf-gold: #CC9933;\n    --ttf-gold-light: #E3B95E;\n    --ttf-white: #FFFFFF;\n\n    position: relative;\n    width: 100%;\n    min-height: 760px;\n    overflow: hidden;\n    isolation: isolate;\n\n    display: flex;\n    align-items: center;\n\n    padding: 120px 0 105px;\n\n    background: var(--ttf-bordeaux-dark);\n    color: var(--ttf-white);\n    font-family: \"Archivo\", sans-serif;\n}\n\n\/* =====================================================\n   FOND\n====================================================== *\/\n\n.tt-final__background {\n    position: absolute;\n    inset: 0;\n    z-index: -6;\n\n    background-image:\n        url(\"http:\/\/atb.bf\/atb-v2\/wp-content\/uploads\/2026\/07\/695178219_10236705458229575_281678318670507282_n.jpg\");\n\n    background-size: cover;\n    background-position: center 45%;\n    background-repeat: no-repeat;\n\n    transform: scale(1.04);\n\n    animation:\n        ttFinalZoom 18s ease-in-out infinite alternate;\n}\n\n.tt-final__overlay {\n    position: absolute;\n    inset: 0;\n    z-index: -5;\n\n    background:\n        linear-gradient(\n            90deg,\n            rgba(28,0,13,0.97) 0%,\n            rgba(50,0,23,0.89) 43%,\n            rgba(58,0,28,0.70) 70%,\n            rgba(25,0,11,0.74) 100%\n        ),\n        linear-gradient(\n            180deg,\n            rgba(23,0,11,0.25) 0%,\n            rgba(23,0,11,0.20) 55%,\n            rgba(23,0,11,0.92) 100%\n        );\n}\n\n.tt-final__glow {\n    position: absolute;\n    z-index: -4;\n\n    width: 680px;\n    height: 680px;\n    top: -250px;\n    right: -170px;\n\n    border-radius: 50%;\n\n    background:\n        radial-gradient(\n            circle,\n            rgba(204,153,51,0.24) 0%,\n            rgba(204,153,51,0.08) 35%,\n            transparent 70%\n        );\n\n    filter: blur(8px);\n\n    animation:\n        ttFinalGlow 8s ease-in-out infinite alternate;\n}\n\n.tt-final__grain {\n    position: absolute;\n    inset: 0;\n    z-index: -3;\n    pointer-events: none;\n\n    opacity: 0.10;\n\n    background-image:\n        repeating-radial-gradient(\n            circle at 0 0,\n            transparent 0,\n            rgba(255,255,255,0.18) 1px,\n            transparent 2px\n        );\n\n    background-size: 5px 5px;\n    mix-blend-mode: soft-light;\n}\n\n\/* =====================================================\n   LIGNES D\u00c9CORATIVES\n====================================================== *\/\n\n.tt-final__line {\n    position: absolute;\n    z-index: -1;\n\n    width: 1px;\n    height: 180px;\n\n    background:\n        linear-gradient(\n            180deg,\n            transparent,\n            rgba(204,153,51,0.65),\n            transparent\n        );\n}\n\n.tt-final__line--left {\n    left: 5%;\n    top: 18%;\n}\n\n.tt-final__line--right {\n    right: 5%;\n    bottom: 18%;\n}\n\n\/* =====================================================\n   CONTENEUR\n====================================================== *\/\n\n.tt-final__container {\n    width: min(1240px, calc(100% - 80px));\n    margin: 0 auto;\n\n    display: grid;\n    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.46fr);\n    align-items: end;\n    gap: 90px;\n}\n\n\/* =====================================================\n   CONTENU\n====================================================== *\/\n\n.tt-final__content {\n    max-width: 850px;\n}\n\n.tt-final__eyebrow {\n    display: inline-flex;\n    align-items: center;\n    gap: 14px;\n\n    margin-bottom: 24px;\n\n    color: var(--ttf-gold);\n    font-size: 10px;\n    font-weight: 700;\n    letter-spacing: 0.18em;\n    text-transform: uppercase;\n}\n\n.tt-final__eyebrow i {\n    width: 35px;\n    height: 1px;\n    display: block;\n\n    background: var(--ttf-gold);\n}\n\n.tt-final__content h2 {\n    margin: 0;\n\n    font-family: \"Fraunces\", serif;\n    font-size: clamp(58px, 7.2vw, 102px);\n    font-weight: 600;\n    line-height: 0.94;\n    letter-spacing: -0.055em;\n}\n\n.tt-final__content h2 em {\n    display: block;\n    margin-top: 11px;\n\n    color: var(--ttf-gold);\n    font-weight: 500;\n}\n\n.tt-final__lead {\n    max-width: 720px;\n    margin: 34px 0 0;\n\n    color: var(--ttf-white);\n    font-family: \"Fraunces\", serif;\n    font-size: clamp(23px, 2.25vw, 33px);\n    font-weight: 500;\n    line-height: 1.35;\n}\n\n.tt-final__text {\n    max-width: 700px;\n    margin: 21px 0 0;\n\n    color: rgba(255,255,255,0.72);\n    font-size: 15px;\n    line-height: 1.82;\n}\n\n\/* =====================================================\n   BOUTONS\n====================================================== *\/\n\n.tt-final__actions {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 14px;\n\n    margin-top: 36px;\n}\n\n.tt-final__btn {\n    min-height: 59px;\n    padding: 0 24px;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: 11px;\n\n    position: relative;\n    overflow: hidden;\n\n    border: 1px solid transparent;\n    border-radius: 999px;\n\n    font-size: 11px;\n    font-weight: 700;\n    letter-spacing: 0.04em;\n    text-decoration: none !important;\n\n    transition:\n        transform 0.32s ease,\n        background-color 0.32s ease,\n        border-color 0.32s ease,\n        color 0.32s ease,\n        box-shadow 0.32s ease;\n}\n\n.tt-final__btn::before {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n\n    background:\n        linear-gradient(\n            110deg,\n            transparent 28%,\n            rgba(255,255,255,0.30) 50%,\n            transparent 72%\n        );\n\n    transform: translateX(-140%);\n    transition: transform 0.75s ease;\n}\n\n.tt-final__btn:hover::before {\n    transform: translateX(140%);\n}\n\n.tt-final__btn:hover {\n    transform: translateY(-3px);\n}\n\n.tt-final__btn--primary {\n    background: var(--ttf-gold);\n    color: #2C1705;\n\n    box-shadow:\n        0 15px 40px rgba(204,153,51,0.28);\n}\n\n.tt-final__btn--primary:hover {\n    background: var(--ttf-gold-light);\n    color: #2C1705;\n\n    box-shadow:\n        0 19px 47px rgba(204,153,51,0.38);\n}\n\n.tt-final__btn-icon {\n    width: 31px;\n    height: 31px;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    border-radius: 50%;\n\n    background: rgba(44,23,5,0.12);\n}\n\n.tt-final__btn-icon svg {\n    width: 15px;\n    height: 15px;\n    margin-left: 2px;\n\n    fill: currentColor;\n}\n\n.tt-final__btn--secondary {\n    border-color: rgba(255,255,255,0.25);\n\n    background: rgba(255,255,255,0.07);\n    color: var(--ttf-white);\n\n    backdrop-filter: blur(12px);\n    -webkit-backdrop-filter: blur(12px);\n}\n\n.tt-final__btn--secondary:hover {\n    border-color: rgba(255,255,255,0.52);\n\n    background: rgba(255,255,255,0.14);\n    color: var(--ttf-white);\n}\n\n.tt-final__btn--secondary svg {\n    width: 18px;\n    height: 18px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.8;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n\n    transition: transform 0.3s ease;\n}\n\n.tt-final__btn--secondary:hover svg {\n    transform: translateX(4px);\n}\n\n\/* =====================================================\n   CARTE SIGNATURE\n====================================================== *\/\n\n.tt-final__signature {\n    align-self: end;\n\n    position: relative;\n    overflow: hidden;\n\n    padding: 28px;\n\n    border: 1px solid rgba(255,255,255,0.17);\n    border-radius: 22px;\n\n    background:\n        linear-gradient(\n            145deg,\n            rgba(255,255,255,0.13),\n            rgba(255,255,255,0.045)\n        );\n\n    box-shadow:\n        0 25px 65px rgba(0,0,0,0.24);\n\n    backdrop-filter: blur(15px);\n    -webkit-backdrop-filter: blur(15px);\n}\n\n.tt-final__signature::before {\n    content: \"\";\n\n    position: absolute;\n    top: -70px;\n    right: -60px;\n\n    width: 170px;\n    height: 170px;\n\n    border-radius: 50%;\n\n    background: rgba(204,153,51,0.12);\n}\n\n.tt-final__signature-icon {\n    position: relative;\n    z-index: 2;\n\n    width: 54px;\n    height: 54px;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    margin-bottom: 24px;\n\n    border-radius: 50%;\n\n    background: var(--ttf-gold);\n    color: #2C1705;\n\n    box-shadow:\n        0 12px 35px rgba(204,153,51,0.27);\n}\n\n.tt-final__signature-icon svg {\n    width: 24px;\n    height: 24px;\n\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.7;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n.tt-final__signature-content {\n    position: relative;\n    z-index: 2;\n}\n\n.tt-final__signature-content small {\n    display: block;\n\n    margin-bottom: 9px;\n\n    color: var(--ttf-gold);\n    font-size: 9px;\n    font-weight: 700;\n    letter-spacing: 0.15em;\n    text-transform: uppercase;\n}\n\n.tt-final__signature-content strong {\n    display: block;\n\n    color: var(--ttf-white);\n    font-family: \"Fraunces\", serif;\n    font-size: 26px;\n    font-weight: 600;\n    line-height: 1.25;\n}\n\n.tt-final__signature-content p {\n    margin: 13px 0 0;\n\n    color: rgba(255,255,255,0.63);\n    font-size: 11px;\n    line-height: 1.65;\n}\n\n\/* =====================================================\n   FOOTER INTERNE\n====================================================== *\/\n\n.tt-final__footer {\n    position: absolute;\n    left: 0;\n    right: 0;\n    bottom: 0;\n\n    border-top: 1px solid rgba(255,255,255,0.13);\n\n    background: rgba(27,0,12,0.63);\n\n    backdrop-filter: blur(12px);\n    -webkit-backdrop-filter: blur(12px);\n}\n\n.tt-final__footer-inner {\n    width: min(1240px, calc(100% - 80px));\n    min-height: 72px;\n    margin: 0 auto;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-wrap: wrap;\n    gap: 23px;\n}\n\n.tt-final__footer-inner span {\n    color: rgba(255,255,255,0.66);\n    font-size: 9px;\n    font-weight: 700;\n    letter-spacing: 0.14em;\n    text-transform: uppercase;\n}\n\n.tt-final__footer-inner i {\n    width: 5px;\n    height: 5px;\n\n    border-radius: 50%;\n\n    background: var(--ttf-gold);\n}\n\n\/* =====================================================\n   ANIMATIONS\n====================================================== *\/\n\n@keyframes ttFinalZoom {\n\n    from {\n        transform: scale(1.04);\n    }\n\n    to {\n        transform: scale(1.11);\n    }\n\n}\n\n@keyframes ttFinalGlow {\n\n    from {\n        transform: translate3d(-3%, -2%, 0);\n        opacity: 0.65;\n    }\n\n    to {\n        transform: translate3d(4%, 4%, 0);\n        opacity: 1;\n    }\n\n}\n\n\/* =====================================================\n   TABLETTE\n====================================================== *\/\n\n@media (max-width: 1080px) {\n\n    .tt-final {\n        min-height: 800px;\n    }\n\n    .tt-final__container {\n        width: min(100% - 48px, 930px);\n\n        grid-template-columns: 1fr;\n        gap: 50px;\n    }\n\n    .tt-final__signature {\n        max-width: 500px;\n    }\n\n}\n\n\/* =====================================================\n   MOBILE\n====================================================== *\/\n\n@media (max-width: 767px) {\n\n    .tt-final {\n        min-height: auto;\n\n        padding: 88px 0 140px;\n    }\n\n    .tt-final__background {\n        background-position: 60% center;\n    }\n\n    .tt-final__overlay {\n        background:\n            linear-gradient(\n                180deg,\n                rgba(29,0,14,0.70) 0%,\n                rgba(42,0,20,0.88) 44%,\n                rgba(29,0,14,0.98) 100%\n            );\n    }\n\n    .tt-final__container {\n        width: calc(100% - 32px);\n        gap: 42px;\n    }\n\n    .tt-final__eyebrow {\n        gap: 10px;\n        font-size: 8px;\n    }\n\n    .tt-final__eyebrow i {\n        width: 24px;\n    }\n\n    .tt-final__content h2 {\n        font-size: 52px;\n        line-height: 0.98;\n    }\n\n    .tt-final__lead {\n        margin-top: 28px;\n        font-size: 23px;\n    }\n\n    .tt-final__text {\n        font-size: 14px;\n        line-height: 1.75;\n    }\n\n    .tt-final__actions {\n        flex-direction: column;\n    }\n\n    .tt-final__btn {\n        width: 100%;\n    }\n\n    .tt-final__signature {\n        padding: 23px;\n    }\n\n    .tt-final__signature-content strong {\n        font-size: 23px;\n    }\n\n    .tt-final__footer-inner {\n        width: calc(100% - 30px);\n        min-height: 88px;\n        gap: 12px 16px;\n    }\n\n    .tt-final__footer-inner span {\n        font-size: 7px;\n    }\n\n    .tt-final__line {\n        display: none;\n    }\n\n}\n\n\/* =====================================================\n   PETITS MOBILES\n====================================================== *\/\n\n@media (max-width: 390px) {\n\n    .tt-final__content h2 {\n        font-size: 45px;\n    }\n\n    .tt-final__lead {\n        font-size: 21px;\n    }\n\n}\n\n\/* =====================================================\n   ACCESSIBILIT\u00c9\n====================================================== *\/\n\n@media (prefers-reduced-motion: reduce) {\n\n    .tt-final__background,\n    .tt-final__glow {\n        animation: none;\n    }\n\n    .tt-final__btn,\n    .tt-final__btn::before,\n    .tt-final__btn--secondary svg {\n        transition: none;\n    }\n\n}\n<\/style>\n\n<script>\n(function () {\n\n    function initTeleTheatreFinal() {\n\n        const sections = document.querySelectorAll(\n            \".tt-final:not([data-final-initialized])\"\n        );\n\n        sections.forEach(function (section) {\n\n            section.setAttribute(\n                \"data-final-initialized\",\n                \"true\"\n            );\n\n            const internalLinks =\n                section.querySelectorAll('a[href^=\"#\"]');\n\n            internalLinks.forEach(function (link) {\n\n                link.addEventListener(\n                    \"click\",\n                    function (event) {\n\n                        const selector =\n                            link.getAttribute(\"href\");\n\n                        if (!selector || selector === \"#\") return;\n\n                        const target =\n                            document.querySelector(selector);\n\n                        if (target) {\n\n                            event.preventDefault();\n\n                            target.scrollIntoView({\n                                behavior: \"smooth\",\n                                block: \"start\"\n                            });\n\n                        }\n\n                    }\n                );\n\n            });\n\n        });\n\n    }\n\n    if (document.readyState === \"loading\") {\n\n        document.addEventListener(\n            \"DOMContentLoaded\",\n            initTeleTheatreFinal\n        );\n\n    } else {\n\n        initTeleTheatreFinal();\n\n    }\n\n    window.addEventListener(\n        \"load\",\n        initTeleTheatreFinal\n    );\n\n    setTimeout(\n        initTeleTheatreFinal,\n        400\n    );\n\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t\n    <div class=\"xs_social_share_widget xs_share_url after_content \t\tmain_content  wslu-style-1 wslu-share-box-shaped wslu-fill-colored wslu-none wslu-share-horizontal wslu-theme-font-no wslu-main_content\">\n\n\t\t\n        <ul>\n\t\t\t        <\/ul>\n    <\/div> \n","protected":false},"excerpt":{"rendered":"<p>La plateforme audiovisuelle officielle de l\u2019ATB T\u00e9l\u00e9-Th\u00e9\u00e2tre ATB Le th\u00e9\u00e2tre ne s\u2019arr\u00eate jamais lorsque le rideau tombe. D\u00e9couvrez les spectacles film\u00e9s, les cr\u00e9ations audiovisuelles, les productions de th\u00e9\u00e2tre forum, les [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_price":"","_stock":"","_tribe_ticket_header":"","_tribe_default_ticket_provider":"","_tribe_ticket_capacity":"0","_ticket_start_date":"","_ticket_end_date":"","_tribe_ticket_show_description":"","_tribe_ticket_show_not_going":false,"_tribe_ticket_use_global_stock":"","_tribe_ticket_global_stock_level":"","_global_stock_mode":"","_global_stock_cap":"","_tribe_rsvp_for_event":"","_tribe_ticket_going_count":"","_tribe_ticket_not_going_count":"","_tribe_tickets_list":"[]","_tribe_ticket_has_attendee_info_fields":false,"footnotes":"","_tec_slr_enabled":"","_tec_slr_layout":""},"wf_page_folders":[64],"class_list":["post-103","page","type-page","status-publish","hentry"],"ticketed":false,"_links":{"self":[{"href":"https:\/\/atb.bf\/atb-v2\/wp-json\/wp\/v2\/pages\/103","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/atb.bf\/atb-v2\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/atb.bf\/atb-v2\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/atb.bf\/atb-v2\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/atb.bf\/atb-v2\/wp-json\/wp\/v2\/comments?post=103"}],"version-history":[{"count":6,"href":"https:\/\/atb.bf\/atb-v2\/wp-json\/wp\/v2\/pages\/103\/revisions"}],"predecessor-version":[{"id":1968,"href":"https:\/\/atb.bf\/atb-v2\/wp-json\/wp\/v2\/pages\/103\/revisions\/1968"}],"wp:attachment":[{"href":"https:\/\/atb.bf\/atb-v2\/wp-json\/wp\/v2\/media?parent=103"}],"wp:term":[{"taxonomy":"wf_page_folders","embeddable":true,"href":"https:\/\/atb.bf\/atb-v2\/wp-json\/wp\/v2\/wf_page_folders?post=103"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}