{"id":2012,"date":"2026-08-10T21:29:40","date_gmt":"2026-08-10T21:29:40","guid":{"rendered":"https:\/\/net-temporaire.institut-tometal.com\/?page_id=2012"},"modified":"2026-08-10T21:41:20","modified_gmt":"2026-08-10T21:41:20","slug":"actualites","status":"publish","type":"page","link":"https:\/\/net-temporaire.institut-tometal.com\/zh\/actualites\/","title":{"rendered":"\u65b0\u95fb"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2012\" class=\"elementor elementor-2012\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8d812be e-con-full e-flex e-con e-parent\" data-id=\"8d812be\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-982720e elementor-widget elementor-widget-html\" data-id=\"982720e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- =========================================================\r\nINSTITUT TOMETAL \u2014 HOME V2\r\nHERO SCROLL CIN\u00c9MATOGRAPHIQUE 3 SC\u00c8NES\r\nPRESTIGE \/ EXCELLENCE \/ R\u00c9USSITE\r\n========================================================= -->\r\n\r\n<section class=\"tm-cinematic-hero\" id=\"home-v2-hero\" data-tm-cinematic>\r\n\r\n    <div class=\"tm-cinematic-hero__sticky\">\r\n\r\n        <!-- =====================================================\r\n        SC\u00c8NE 01 \u2014 PRESTIGE\r\n        ====================================================== -->\r\n\r\n        <div\r\n            class=\"tm-cinematic-scene is-active\"\r\n            data-scene=\"0\"\r\n        >\r\n            <div\r\n                class=\"tm-cinematic-scene__image\"\r\n                style=\"background-image:url('http:\/\/net-temporaire.institut-tometal.com\/wp-content\/uploads\/2026\/07\/ecole2.png');\"\r\n            ><\/div>\r\n\r\n            <div class=\"tm-cinematic-scene__veil\"><\/div>\r\n            <div class=\"tm-cinematic-scene__fade\"><\/div>\r\n            <div class=\"tm-cinematic-scene__sidefade\"><\/div>\r\n\r\n            <div class=\"tm-cinematic-scene__content\">\r\n\r\n                <div class=\"tm-cinematic-scene__number\">\r\n                    <span>01<\/span>\r\n                    <i><\/i>\r\n                    <strong>Institut Tometal<\/strong>\r\n                <\/div>\r\n\r\n                <h1 class=\"tm-cinematic-scene__title\">\r\n                    PRESTIGE\r\n                <\/h1>\r\n\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- =====================================================\r\n        SC\u00c8NE 02 \u2014 EXCELLENCE\r\n        ====================================================== -->\r\n\r\n        <div\r\n            class=\"tm-cinematic-scene\"\r\n            data-scene=\"1\"\r\n        >\r\n            <div\r\n                class=\"tm-cinematic-scene__image\"\r\n                style=\"background-image:url('http:\/\/net-temporaire.institut-tometal.com\/wp-content\/uploads\/2026\/07\/la-cour.png');\"\r\n            ><\/div>\r\n\r\n            <div class=\"tm-cinematic-scene__veil\"><\/div>\r\n            <div class=\"tm-cinematic-scene__fade\"><\/div>\r\n            <div class=\"tm-cinematic-scene__sidefade\"><\/div>\r\n\r\n            <div class=\"tm-cinematic-scene__content\">\r\n\r\n                <div class=\"tm-cinematic-scene__number\">\r\n                    <span>02<\/span>\r\n                    <i><\/i>\r\n                    <strong>Institut Tometal<\/strong>\r\n                <\/div>\r\n\r\n                <h1 class=\"tm-cinematic-scene__title\">\r\n                    EXCELLENCE\r\n                <\/h1>\r\n\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- =====================================================\r\n        SC\u00c8NE 03 \u2014 R\u00c9USSITE\r\n        ====================================================== -->\r\n\r\n        <div\r\n            class=\"tm-cinematic-scene\"\r\n            data-scene=\"2\"\r\n        >\r\n            <div\r\n                class=\"tm-cinematic-scene__image\"\r\n                style=\"background-image:url('http:\/\/net-temporaire.institut-tometal.com\/wp-content\/uploads\/2026\/07\/batiment-3.png');\"\r\n            ><\/div>\r\n\r\n            <div class=\"tm-cinematic-scene__veil\"><\/div>\r\n            <div class=\"tm-cinematic-scene__fade\"><\/div>\r\n            <div class=\"tm-cinematic-scene__sidefade\"><\/div>\r\n\r\n            <div class=\"tm-cinematic-scene__content\">\r\n\r\n                <div class=\"tm-cinematic-scene__number\">\r\n                    <span>03<\/span>\r\n                    <i><\/i>\r\n                    <strong>Institut Tometal<\/strong>\r\n                <\/div>\r\n\r\n                <h1 class=\"tm-cinematic-scene__title\">\r\n                    R\u00c9USSITE\r\n                <\/h1>\r\n\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- =====================================================\r\n        CONTENU FIXE DU HERO\r\n        ====================================================== -->\r\n\r\n        <div class=\"tm-cinematic-overlay\">\r\n\r\n            <div class=\"tm-cinematic-overlay__inner\">\r\n\r\n                <div class=\"tm-cinematic-info\">\r\n\r\n                    <div class=\"tm-cinematic-info__line\"><\/div>\r\n\r\n                    <p>\r\n                        Bienvenue \u00e0 l\u2019Institut Tometal. L\u2019excellence \u00e9ducative\r\n                        plurilingue \u00e0 Antananarivo. Situ\u00e9 dans un cadre moderne\r\n                        \u00e0 Fenoarivo, l\u2019Institut Tometal est l\u2019\u00e9cole plurilingue\r\n                        de r\u00e9f\u00e9rence \u00e0 Madagascar. Nous proposons des parcours\r\n                        sur mesure, adapt\u00e9s au projet de chaque enfant, avec un\r\n                        renforcement majeur en anglais et des cours de chinois.\r\n                    <\/p>\r\n\r\n                    <div class=\"tm-cinematic-info__actions\">\r\n\r\n                        <a\r\n                            href=\"#inscription\"\r\n                            class=\"tm-cinematic-button tm-cinematic-button--gold\"\r\n                        >\r\n                            <span>S\u2019inscrire 2026\u20132027<\/span>\r\n\r\n                            <svg viewBox=\"0 0 24 24\">\r\n                                <path d=\"m9 5 7 7-7 7\"><\/path>\r\n                            <\/svg>\r\n                        <\/a>\r\n\r\n                        <a\r\n                            href=\"#etablissement\"\r\n                            class=\"tm-cinematic-button tm-cinematic-button--glass\"\r\n                        >\r\n                            <span>D\u00e9couvrir l\u2019Institut<\/span>\r\n\r\n                            <svg viewBox=\"0 0 24 24\">\r\n                                <path d=\"m9 5 7 7-7 7\"><\/path>\r\n                            <\/svg>\r\n                        <\/a>\r\n\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n                <!-- PROGRESSION -->\r\n\r\n                <div class=\"tm-cinematic-progress\">\r\n\r\n                    <div\r\n                        class=\"tm-cinematic-progress__item is-active\"\r\n                        data-progress=\"0\"\r\n                    >\r\n                        <span>01<\/span>\r\n                        <i><\/i>\r\n                    <\/div>\r\n\r\n                    <div\r\n                        class=\"tm-cinematic-progress__item\"\r\n                        data-progress=\"1\"\r\n                    >\r\n                        <span>02<\/span>\r\n                        <i><\/i>\r\n                    <\/div>\r\n\r\n                    <div\r\n                        class=\"tm-cinematic-progress__item\"\r\n                        data-progress=\"2\"\r\n                    >\r\n                        <span>03<\/span>\r\n                        <i><\/i>\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n        <!-- SCROLL LABEL -->\r\n\r\n        <div class=\"tm-cinematic-scroll\">\r\n            <span>Scroll<\/span>\r\n\r\n            <i>\r\n                <b><\/b>\r\n            <\/i>\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n<\/section>\r\n\r\n<style>\r\n\/* =========================================================\r\nVARIABLES\r\n========================================================= *\/\r\n\r\n.tm-cinematic-hero {\r\n    --tm-blue: #071b3d;\r\n    --tm-blue-2: #123765;\r\n    --tm-gold: #c99a42;\r\n    --tm-gold-light: #e6c879;\r\n    --tm-white: #ffffff;\r\n\r\n    \/*\r\n    IMPORTANT :\r\n    ton header fait environ 104px sur ta capture.\r\n    Le Hero restera donc EN DESSOUS du header.\r\n    *\/\r\n\r\n    --tm-header-height: 104px;\r\n\r\n    position: relative;\r\n\r\n    width: 100%;\r\n    height: 300vh;\r\n\r\n    background: var(--tm-blue);\r\n}\r\n\r\n.tm-cinematic-hero,\r\n.tm-cinematic-hero * {\r\n    box-sizing: border-box;\r\n}\r\n\r\n.tm-cinematic-hero h1,\r\n.tm-cinematic-hero p {\r\n    margin-top: 0;\r\n}\r\n\r\n.tm-cinematic-hero svg {\r\n    display: block;\r\n}\r\n\r\n\/* =========================================================\r\nSTICKY\r\n========================================================= *\/\r\n\r\n.tm-cinematic-hero__sticky {\r\n    position: sticky;\r\n\r\n    \/*\r\n    C'\u00e9tait top:0 avant.\r\n    C'est ce qui faisait passer le Hero\r\n    derri\u00e8re ton header.\r\n    *\/\r\n\r\n    top: var(--tm-header-height);\r\n\r\n    width: 100%;\r\n\r\n    height:\r\n        calc(\r\n            100vh -\r\n            var(--tm-header-height)\r\n        );\r\n\r\n    min-height: 620px;\r\n\r\n    overflow: hidden;\r\n\r\n    background: var(--tm-blue);\r\n\r\n    isolation: isolate;\r\n}\r\n\r\n\/* =========================================================\r\nSC\u00c8NES\r\n========================================================= *\/\r\n\r\n.tm-cinematic-scene {\r\n    position: absolute;\r\n    inset: 0;\r\n\r\n    z-index: 1;\r\n\r\n    opacity: 0;\r\n    visibility: hidden;\r\n\r\n    transition:\r\n        opacity 1.05s ease,\r\n        visibility 1.05s ease;\r\n}\r\n\r\n.tm-cinematic-scene.is-active {\r\n    opacity: 1;\r\n    visibility: visible;\r\n\r\n    z-index: 2;\r\n}\r\n\r\n\/* =========================================================\r\nPHOTO\r\n========================================================= *\/\r\n\r\n.tm-cinematic-scene__image {\r\n    position: absolute;\r\n\r\n    inset: -2%;\r\n\r\n    background-position: center center;\r\n    background-repeat: no-repeat;\r\n    background-size: cover;\r\n\r\n    transform: scale(1.08);\r\n\r\n    filter:\r\n        saturate(.97)\r\n        contrast(1.03);\r\n\r\n    transition:\r\n        transform 2.4s\r\n        cubic-bezier(.16, 1, .3, 1);\r\n\r\n    will-change: transform;\r\n}\r\n\r\n.tm-cinematic-scene.is-active\r\n.tm-cinematic-scene__image {\r\n    transform: scale(1.02);\r\n}\r\n\r\n\/* =========================================================\r\nVOILES\r\n========================================================= *\/\r\n\r\n.tm-cinematic-scene__veil {\r\n    position: absolute;\r\n    inset: 0;\r\n\r\n    background:\r\n        linear-gradient(\r\n            180deg,\r\n            rgba(7,27,61,.08) 0%,\r\n            rgba(7,27,61,.08) 30%,\r\n            rgba(7,27,61,.18) 55%,\r\n            rgba(7,27,61,.38) 100%\r\n        );\r\n}\r\n\r\n\/* BLEU EN BAS *\/\r\n\r\n.tm-cinematic-scene__fade {\r\n    position: absolute;\r\n    inset: 0;\r\n\r\n    background:\r\n        linear-gradient(\r\n            180deg,\r\n\r\n            rgba(7,27,61,0) 0%,\r\n\r\n            rgba(7,27,61,.02) 28%,\r\n\r\n            rgba(7,27,61,.12) 43%,\r\n\r\n            rgba(7,27,61,.35) 60%,\r\n\r\n            rgba(7,27,61,.70) 75%,\r\n\r\n            rgba(7,27,61,.94) 91%,\r\n\r\n            #071b3d 100%\r\n        );\r\n}\r\n\r\n\/* BLEU \u00c0 GAUCHE *\/\r\n\r\n.tm-cinematic-scene__sidefade {\r\n    position: absolute;\r\n    inset: 0;\r\n\r\n    background:\r\n        linear-gradient(\r\n            90deg,\r\n\r\n            rgba(7,27,61,.70) 0%,\r\n\r\n            rgba(7,27,61,.49) 27%,\r\n\r\n            rgba(7,27,61,.17) 53%,\r\n\r\n            transparent 80%\r\n        );\r\n}\r\n\r\n\/* =========================================================\r\nTITRE DE LA SC\u00c8NE\r\n========================================================= *\/\r\n\r\n.tm-cinematic-scene__content {\r\n    position: absolute;\r\n\r\n    \/*\r\n    Le titre est maintenant plus bas.\r\n    Il n'est donc plus coll\u00e9 contre le header.\r\n    *\/\r\n\r\n    top: clamp(70px, 10vh, 115px);\r\n    left: clamp(55px, 6vw, 110px);\r\n\r\n    z-index: 5;\r\n\r\n    width:\r\n        min(\r\n            1000px,\r\n            calc(100% - 180px)\r\n        );\r\n}\r\n\r\n\/* PETIT LABEL *\/\r\n\r\n.tm-cinematic-scene__number {\r\n    display: flex;\r\n    align-items: center;\r\n\r\n    gap: 13px;\r\n\r\n    margin-bottom: 18px;\r\n\r\n    color: var(--tm-gold-light);\r\n\r\n    font-family:\r\n        \"Montserrat\",\r\n        Arial,\r\n        sans-serif;\r\n\r\n    font-size: 8px;\r\n\r\n    font-weight: 700;\r\n\r\n    letter-spacing: .16em;\r\n\r\n    text-transform: uppercase;\r\n\r\n    opacity: 0;\r\n\r\n    transform:\r\n        translateY(18px);\r\n\r\n    transition:\r\n        opacity .75s ease .12s,\r\n        transform .75s\r\n        cubic-bezier(.16,1,.3,1)\r\n        .12s;\r\n}\r\n\r\n.tm-cinematic-scene.is-active\r\n.tm-cinematic-scene__number {\r\n    opacity: 1;\r\n\r\n    transform:\r\n        translateY(0);\r\n}\r\n\r\n.tm-cinematic-scene__number i {\r\n    width: 45px;\r\n    height: 1px;\r\n\r\n    background: var(--tm-gold);\r\n}\r\n\r\n.tm-cinematic-scene__number strong {\r\n    color:\r\n        rgba(255,255,255,.72);\r\n\r\n    font-weight: 600;\r\n}\r\n\r\n\/* =========================================================\r\nGRAND MOT\r\n========================================================= *\/\r\n\r\n.tm-cinematic-scene__title {\r\n    margin: 0;\r\n\r\n    color: #ffffff;\r\n\r\n    font-family:\r\n        Georgia,\r\n        \"Times New Roman\",\r\n        serif;\r\n\r\n    font-size:\r\n        clamp(\r\n            80px,\r\n            10.4vw,\r\n            175px\r\n        );\r\n\r\n    font-weight: 500;\r\n\r\n    line-height: .82;\r\n\r\n    letter-spacing: -.065em;\r\n\r\n    \/*\r\n    Animation style g\u00e9n\u00e9rique cin\u00e9ma\/streaming :\r\n    reveal + blur + translation.\r\n    *\/\r\n\r\n    opacity: 0;\r\n\r\n    transform:\r\n        translate3d(\r\n            0,\r\n            85px,\r\n            0\r\n        )\r\n        scale(.965);\r\n\r\n    filter:\r\n        blur(12px);\r\n\r\n    clip-path:\r\n        inset(\r\n            0\r\n            0\r\n            100%\r\n            0\r\n        );\r\n\r\n    transition:\r\n        opacity .9s ease,\r\n        transform 1.15s\r\n        cubic-bezier(.16,1,.3,1),\r\n        filter 1.15s ease,\r\n        clip-path 1.15s\r\n        cubic-bezier(.16,1,.3,1);\r\n}\r\n\r\n.tm-cinematic-scene.is-active\r\n.tm-cinematic-scene__title {\r\n    opacity: 1;\r\n\r\n    transform:\r\n        translate3d(\r\n            0,\r\n            0,\r\n            0\r\n        )\r\n        scale(1);\r\n\r\n    filter:\r\n        blur(0);\r\n\r\n    clip-path:\r\n        inset(\r\n            0\r\n            0\r\n            0\r\n            0\r\n        );\r\n}\r\n\r\n\/*\r\nPRESTIGE, EXCELLENCE ET R\u00c9USSITE :\r\nTOUS EN BLANC\r\n*\/\r\n\r\n.tm-cinematic-scene__title {\r\n    color: #ffffff !important;\r\n}\r\n\r\n\/* =========================================================\r\nCONTENU BAS\r\n========================================================= *\/\r\n\r\n.tm-cinematic-overlay {\r\n    position: absolute;\r\n    inset: 0;\r\n\r\n    z-index: 10;\r\n\r\n    pointer-events: none;\r\n}\r\n\r\n.tm-cinematic-overlay__inner {\r\n    position: relative;\r\n\r\n    width:\r\n        min(\r\n            1500px,\r\n            calc(\r\n                100% -\r\n                clamp(\r\n                    55px,\r\n                    6vw,\r\n                    110px\r\n                )\r\n            )\r\n        );\r\n\r\n    height: 100%;\r\n\r\n    margin: 0 auto;\r\n}\r\n\r\n\/* PARAGRAPHE *\/\r\n\r\n.tm-cinematic-info {\r\n    position: absolute;\r\n\r\n    left: 0;\r\n\r\n    \/*\r\n    Le contenu est maintenant plus bas,\r\n    mais avec suffisamment d'espace\r\n    pour ne pas sortir de l'\u00e9cran.\r\n    *\/\r\n\r\n    bottom:\r\n        clamp(\r\n            48px,\r\n            7vh,\r\n            80px\r\n        );\r\n\r\n    width:\r\n        min(\r\n            960px,\r\n            69%\r\n        );\r\n\r\n    pointer-events: auto;\r\n}\r\n\r\n.tm-cinematic-info__line {\r\n    width: 110px;\r\n    height: 2px;\r\n\r\n    margin-bottom: 22px;\r\n\r\n    background:\r\n        linear-gradient(\r\n            90deg,\r\n            #c99a42,\r\n            #e6c879\r\n        );\r\n}\r\n\r\n.tm-cinematic-info p {\r\n    max-width: 950px;\r\n\r\n    margin-bottom: 25px;\r\n\r\n    color:\r\n        rgba(\r\n            255,\r\n            255,\r\n            255,\r\n            .86\r\n        );\r\n\r\n    font-family:\r\n        \"Montserrat\",\r\n        Arial,\r\n        sans-serif;\r\n\r\n    font-size:\r\n        clamp(\r\n            13px,\r\n            1.15vw,\r\n            17px\r\n        );\r\n\r\n    font-weight: 400;\r\n\r\n    line-height: 1.75;\r\n\r\n    text-shadow:\r\n        0 4px 20px\r\n        rgba(7,27,61,.30);\r\n}\r\n\r\n\/* =========================================================\r\nBOUTONS\r\n========================================================= *\/\r\n\r\n.tm-cinematic-info__actions {\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n\r\n    gap: 12px;\r\n}\r\n\r\n.tm-cinematic-button {\r\n    display: inline-flex;\r\n\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    gap: 12px;\r\n\r\n    min-height: 55px;\r\n\r\n    padding:\r\n        0\r\n        23px;\r\n\r\n    font-family:\r\n        \"Montserrat\",\r\n        Arial,\r\n        sans-serif;\r\n\r\n    font-size: 9px;\r\n\r\n    font-weight: 700;\r\n\r\n    letter-spacing: .065em;\r\n\r\n    text-transform: uppercase;\r\n\r\n    text-decoration: none;\r\n\r\n    transition:\r\n        transform .35s ease,\r\n        background .35s ease,\r\n        color .35s ease,\r\n        border-color .35s ease,\r\n        box-shadow .35s ease;\r\n}\r\n\r\n.tm-cinematic-button svg {\r\n    width: 17px;\r\n    height: 17px;\r\n\r\n    fill: none;\r\n\r\n    stroke:\r\n        currentColor;\r\n\r\n    stroke-width: 1.8;\r\n\r\n    stroke-linecap:\r\n        round;\r\n\r\n    stroke-linejoin:\r\n        round;\r\n}\r\n\r\n\/* GOLD *\/\r\n\r\n.tm-cinematic-button--gold {\r\n    color: var(--tm-blue);\r\n\r\n    background:\r\n        linear-gradient(\r\n            135deg,\r\n            #e6c879,\r\n            #c99a42\r\n        );\r\n\r\n    border:\r\n        1px solid\r\n        #c99a42;\r\n}\r\n\r\n.tm-cinematic-button--gold:hover {\r\n    color: #ffffff;\r\n\r\n    background:\r\n        #071b3d;\r\n\r\n    border-color:\r\n        rgba(\r\n            255,\r\n            255,\r\n            255,\r\n            .42\r\n        );\r\n\r\n    transform:\r\n        translateY(-4px);\r\n\r\n    box-shadow:\r\n        0 17px 38px\r\n        rgba(0,0,0,.25);\r\n}\r\n\r\n\/* GLASS *\/\r\n\r\n.tm-cinematic-button--glass {\r\n    color: #ffffff;\r\n\r\n    background:\r\n        rgba(\r\n            7,\r\n            27,\r\n            61,\r\n            .27\r\n        );\r\n\r\n    border:\r\n        1px solid\r\n        rgba(\r\n            255,\r\n            255,\r\n            255,\r\n            .43\r\n        );\r\n\r\n    backdrop-filter:\r\n        blur(9px);\r\n}\r\n\r\n.tm-cinematic-button--glass:hover {\r\n    color: #071b3d;\r\n\r\n    background: #ffffff;\r\n\r\n    border-color:\r\n        #ffffff;\r\n\r\n    transform:\r\n        translateY(-4px);\r\n}\r\n\r\n\/* =========================================================\r\nPROGRESSION DROITE\r\n========================================================= *\/\r\n\r\n.tm-cinematic-progress {\r\n    position: absolute;\r\n\r\n    right: 0;\r\n\r\n    bottom:\r\n        clamp(\r\n            75px,\r\n            9vh,\r\n            110px\r\n        );\r\n\r\n    z-index: 20;\r\n\r\n    display: flex;\r\n    flex-direction: column;\r\n\r\n    gap: 14px;\r\n\r\n    width: 115px;\r\n}\r\n\r\n.tm-cinematic-progress__item {\r\n    display: flex;\r\n    align-items: center;\r\n\r\n    gap: 9px;\r\n\r\n    color:\r\n        rgba(\r\n            255,\r\n            255,\r\n            255,\r\n            .40\r\n        );\r\n\r\n    transition:\r\n        color .4s ease;\r\n}\r\n\r\n.tm-cinematic-progress__item span {\r\n    font-family:\r\n        \"Montserrat\",\r\n        Arial,\r\n        sans-serif;\r\n\r\n    font-size: 8px;\r\n\r\n    font-weight: 700;\r\n}\r\n\r\n.tm-cinematic-progress__item i {\r\n    position: relative;\r\n\r\n    flex: 1;\r\n\r\n    height: 2px;\r\n\r\n    overflow: hidden;\r\n\r\n    background:\r\n        rgba(\r\n            255,\r\n            255,\r\n            255,\r\n            .19\r\n        );\r\n}\r\n\r\n.tm-cinematic-progress__item i::before {\r\n    content: \"\";\r\n\r\n    position: absolute;\r\n    inset: 0;\r\n\r\n    background:\r\n        #c99a42;\r\n\r\n    transform:\r\n        scaleX(0);\r\n\r\n    transform-origin:\r\n        left center;\r\n\r\n    transition:\r\n        transform .55s\r\n        cubic-bezier(.16,1,.3,1);\r\n}\r\n\r\n.tm-cinematic-progress__item.is-active {\r\n    color:\r\n        #e6c879;\r\n}\r\n\r\n.tm-cinematic-progress__item.is-active\r\ni::before {\r\n    transform:\r\n        scaleX(1);\r\n}\r\n\r\n\/* =========================================================\r\nSCROLL LABEL\r\n========================================================= *\/\r\n\r\n.tm-cinematic-scroll {\r\n    position: absolute;\r\n\r\n    right: 22px;\r\n\r\n    top: 48%;\r\n\r\n    z-index: 30;\r\n\r\n    display: flex;\r\n    align-items: center;\r\n\r\n    gap: 12px;\r\n\r\n    color:\r\n        rgba(\r\n            255,\r\n            255,\r\n            255,\r\n            .50\r\n        );\r\n\r\n    transform:\r\n        rotate(90deg);\r\n\r\n    transform-origin:\r\n        right center;\r\n\r\n    font-family:\r\n        \"Montserrat\",\r\n        Arial,\r\n        sans-serif;\r\n\r\n    font-size: 7px;\r\n\r\n    font-weight: 700;\r\n\r\n    letter-spacing: .17em;\r\n\r\n    text-transform: uppercase;\r\n}\r\n\r\n.tm-cinematic-scroll > i {\r\n    position: relative;\r\n\r\n    display: block;\r\n\r\n    width: 48px;\r\n    height: 1px;\r\n\r\n    overflow: hidden;\r\n\r\n    background:\r\n        rgba(\r\n            255,\r\n            255,\r\n            255,\r\n            .18\r\n        );\r\n}\r\n\r\n.tm-cinematic-scroll b {\r\n    display: block;\r\n\r\n    width: 50%;\r\n    height: 100%;\r\n\r\n    background:\r\n        #c99a42;\r\n\r\n    animation:\r\n        tmScrollIndicator\r\n        1.5s ease\r\n        infinite;\r\n}\r\n\r\n@keyframes tmScrollIndicator {\r\n\r\n    0% {\r\n        transform:\r\n            translateX(-120%);\r\n    }\r\n\r\n    65% {\r\n        transform:\r\n            translateX(210%);\r\n    }\r\n\r\n    100% {\r\n        transform:\r\n            translateX(210%);\r\n    }\r\n}\r\n\r\n\/* =========================================================\r\nPETITS \u00c9CRANS ORDINATEURS\r\n========================================================= *\/\r\n\r\n@media screen and (max-height: 800px) and (min-width: 768px) {\r\n\r\n    .tm-cinematic-scene__content {\r\n        top: 48px;\r\n    }\r\n\r\n    .tm-cinematic-scene__title {\r\n        font-size:\r\n            clamp(\r\n                72px,\r\n                9vw,\r\n                130px\r\n            );\r\n    }\r\n\r\n    .tm-cinematic-info {\r\n        bottom: 33px;\r\n    }\r\n\r\n    .tm-cinematic-info p {\r\n        margin-bottom: 17px;\r\n\r\n        font-size: 13px;\r\n\r\n        line-height: 1.6;\r\n    }\r\n\r\n    .tm-cinematic-info__line {\r\n        margin-bottom: 15px;\r\n    }\r\n\r\n    .tm-cinematic-button {\r\n        min-height: 48px;\r\n    }\r\n}\r\n\r\n\/* =========================================================\r\nTABLETTE\r\n========================================================= *\/\r\n\r\n@media screen and (max-width: 1050px) {\r\n\r\n    .tm-cinematic-hero {\r\n        --tm-header-height: 90px;\r\n    }\r\n\r\n    .tm-cinematic-scene__content {\r\n        left: 40px;\r\n\r\n        width:\r\n            calc(\r\n                100% - 80px\r\n            );\r\n    }\r\n\r\n    .tm-cinematic-scene__title {\r\n        font-size:\r\n            clamp(\r\n                67px,\r\n                12vw,\r\n                110px\r\n            );\r\n    }\r\n\r\n    .tm-cinematic-info {\r\n        width: 78%;\r\n    }\r\n\r\n    .tm-cinematic-scroll {\r\n        display: none;\r\n    }\r\n}\r\n\r\n\/* =========================================================\r\nMOBILE\r\n========================================================= *\/\r\n\r\n@media screen and (max-width: 767px) {\r\n\r\n    .tm-cinematic-hero {\r\n        height: 270vh;\r\n\r\n        \/*\r\n        Sur mobile, le header est g\u00e9n\u00e9ralement\r\n        moins haut.\r\n        *\/\r\n\r\n        --tm-header-height: 78px;\r\n    }\r\n\r\n    .tm-cinematic-hero__sticky {\r\n        min-height: 560px;\r\n    }\r\n\r\n    .tm-cinematic-scene__content {\r\n        top: 55px;\r\n        left: 20px;\r\n\r\n        width:\r\n            calc(\r\n                100% - 40px\r\n            );\r\n    }\r\n\r\n    .tm-cinematic-scene__number {\r\n        margin-bottom: 15px;\r\n    }\r\n\r\n    .tm-cinematic-scene__title {\r\n        font-size:\r\n            clamp(\r\n                50px,\r\n                15vw,\r\n                70px\r\n            );\r\n\r\n        line-height: .9;\r\n    }\r\n\r\n    .tm-cinematic-scene__sidefade {\r\n        background:\r\n            linear-gradient(\r\n                90deg,\r\n\r\n                rgba(\r\n                    7,\r\n                    27,\r\n                    61,\r\n                    .58\r\n                )\r\n                0%,\r\n\r\n                rgba(\r\n                    7,\r\n                    27,\r\n                    61,\r\n                    .20\r\n                )\r\n                70%,\r\n\r\n                transparent\r\n                100%\r\n            );\r\n    }\r\n\r\n    .tm-cinematic-scene__fade {\r\n        background:\r\n            linear-gradient(\r\n                180deg,\r\n\r\n                rgba(\r\n                    7,\r\n                    27,\r\n                    61,\r\n                    .02\r\n                )\r\n                0%,\r\n\r\n                rgba(\r\n                    7,\r\n                    27,\r\n                    61,\r\n                    .10\r\n                )\r\n                32%,\r\n\r\n                rgba(\r\n                    7,\r\n                    27,\r\n                    61,\r\n                    .54\r\n                )\r\n                55%,\r\n\r\n                rgba(\r\n                    7,\r\n                    27,\r\n                    61,\r\n                    .93\r\n                )\r\n                77%,\r\n\r\n                #071b3d\r\n                100%\r\n            );\r\n    }\r\n\r\n    .tm-cinematic-overlay__inner {\r\n        width:\r\n            calc(\r\n                100% - 40px\r\n            );\r\n    }\r\n\r\n    .tm-cinematic-info {\r\n        bottom: 34px;\r\n\r\n        width: 100%;\r\n    }\r\n\r\n    .tm-cinematic-info p {\r\n        font-size: 11px;\r\n\r\n        line-height: 1.63;\r\n\r\n        margin-bottom: 17px;\r\n    }\r\n\r\n    .tm-cinematic-info__line {\r\n        width: 65px;\r\n\r\n        margin-bottom: 14px;\r\n    }\r\n\r\n    .tm-cinematic-info__actions {\r\n        display: grid;\r\n\r\n        grid-template-columns:\r\n            1fr;\r\n    }\r\n\r\n    .tm-cinematic-button {\r\n        width: 100%;\r\n\r\n        min-height: 48px;\r\n    }\r\n\r\n    .tm-cinematic-progress {\r\n        top: 27px;\r\n        right: 20px;\r\n        bottom: auto;\r\n\r\n        flex-direction: row;\r\n\r\n        width: 120px;\r\n    }\r\n\r\n    .tm-cinematic-progress__item {\r\n        flex: 1;\r\n    }\r\n\r\n    .tm-cinematic-progress__item span {\r\n        display: none;\r\n    }\r\n}\r\n\r\n\/* =========================================================\r\nACCESSIBILIT\u00c9\r\n========================================================= *\/\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n\r\n    .tm-cinematic-scene,\r\n    .tm-cinematic-scene__image,\r\n    .tm-cinematic-scene__title,\r\n    .tm-cinematic-scene__number,\r\n    .tm-cinematic-progress__item i::before {\r\n\r\n        transition:\r\n            none !important;\r\n\r\n        animation:\r\n            none !important;\r\n    }\r\n\r\n    .tm-cinematic-scene.is-active\r\n    .tm-cinematic-scene__title {\r\n\r\n        opacity: 1;\r\n\r\n        transform: none;\r\n\r\n        filter: none;\r\n\r\n        clip-path: none;\r\n    }\r\n}\r\n\r\n\/* =========================================================\r\nELEMENTOR\r\n========================================================= *\/\r\n\r\n.elementor-widget-html:has(.tm-cinematic-hero),\r\n.elementor-widget-html:has(.tm-cinematic-hero)\r\n> .elementor-widget-container {\r\n\r\n    width:\r\n        100% !important;\r\n\r\n    max-width:\r\n        none !important;\r\n\r\n    margin:\r\n        0 !important;\r\n\r\n    padding:\r\n        0 !important;\r\n}\r\n\r\n#home-v2-hero {\r\n    scroll-margin-top:\r\n        105px;\r\n}\r\n<\/style>\r\n\r\n<script>\r\n(function () {\r\n    \"use strict\";\r\n\r\n    function initTometalCinematicHero() {\r\n\r\n        const heroes =\r\n            document.querySelectorAll(\r\n                \"[data-tm-cinematic]\"\r\n            );\r\n\r\n        heroes.forEach(function (hero) {\r\n\r\n            if (\r\n                hero.dataset.cinematicReady ===\r\n                \"true\"\r\n            ) {\r\n                return;\r\n            }\r\n\r\n            hero.dataset.cinematicReady =\r\n                \"true\";\r\n\r\n            const scenes =\r\n                Array.from(\r\n                    hero.querySelectorAll(\r\n                        \"[data-scene]\"\r\n                    )\r\n                );\r\n\r\n            const progressItems =\r\n                Array.from(\r\n                    hero.querySelectorAll(\r\n                        \"[data-progress]\"\r\n                    )\r\n                );\r\n\r\n            let currentScene = -1;\r\n            let ticking = false;\r\n\r\n            \/* =============================================\r\n            ACTIVE UNE SC\u00c8NE\r\n            ============================================= *\/\r\n\r\n            function activateScene(index) {\r\n\r\n                if (\r\n                    index === currentScene\r\n                ) {\r\n                    return;\r\n                }\r\n\r\n                currentScene = index;\r\n\r\n                scenes.forEach(\r\n                    function (\r\n                        scene,\r\n                        sceneIndex\r\n                    ) {\r\n\r\n                        scene.classList.toggle(\r\n                            \"is-active\",\r\n                            sceneIndex ===\r\n                            currentScene\r\n                        );\r\n\r\n                    }\r\n                );\r\n\r\n                progressItems.forEach(\r\n                    function (\r\n                        item,\r\n                        itemIndex\r\n                    ) {\r\n\r\n                        item.classList.toggle(\r\n                            \"is-active\",\r\n                            itemIndex ===\r\n                            currentScene\r\n                        );\r\n\r\n                    }\r\n                );\r\n\r\n            }\r\n\r\n            \/* =============================================\r\n            CALCUL SELON LE SCROLL\r\n            ============================================= *\/\r\n\r\n            function update() {\r\n\r\n                const rect =\r\n                    hero.getBoundingClientRect();\r\n\r\n                const sticky =\r\n                    hero.querySelector(\r\n                        \".tm-cinematic-hero__sticky\"\r\n                    );\r\n\r\n                const stickyHeight =\r\n                    sticky\r\n                        ? sticky.offsetHeight\r\n                        : window.innerHeight;\r\n\r\n                const scrollDistance =\r\n                    Math.max(\r\n                        hero.offsetHeight -\r\n                        stickyHeight,\r\n                        1\r\n                    );\r\n\r\n                let progress =\r\n                    -rect.top \/\r\n                    scrollDistance;\r\n\r\n                progress =\r\n                    Math.max(\r\n                        0,\r\n                        Math.min(\r\n                            1,\r\n                            progress\r\n                        )\r\n                    );\r\n\r\n                \/*\r\n                Chaque tiers du scroll correspond\r\n                exactement \u00e0 un mot + une image.\r\n                *\/\r\n\r\n                let sceneIndex = 0;\r\n\r\n                if (\r\n                    progress >= .666\r\n                ) {\r\n                    sceneIndex = 2;\r\n                }\r\n\r\n                else if (\r\n                    progress >= .333\r\n                ) {\r\n                    sceneIndex = 1;\r\n                }\r\n\r\n                else {\r\n                    sceneIndex = 0;\r\n                }\r\n\r\n                activateScene(\r\n                    sceneIndex\r\n                );\r\n\r\n                ticking = false;\r\n            }\r\n\r\n            function requestUpdate() {\r\n\r\n                if (ticking) {\r\n                    return;\r\n                }\r\n\r\n                ticking = true;\r\n\r\n                window.requestAnimationFrame(\r\n                    update\r\n                );\r\n            }\r\n\r\n            window.addEventListener(\r\n                \"scroll\",\r\n                requestUpdate,\r\n                {\r\n                    passive: true\r\n                }\r\n            );\r\n\r\n            window.addEventListener(\r\n                \"resize\",\r\n                requestUpdate\r\n            );\r\n\r\n            activateScene(0);\r\n            update();\r\n\r\n        });\r\n\r\n    }\r\n\r\n    if (\r\n        document.readyState ===\r\n        \"loading\"\r\n    ) {\r\n\r\n        document.addEventListener(\r\n            \"DOMContentLoaded\",\r\n            initTometalCinematicHero\r\n        );\r\n\r\n    }\r\n\r\n    else {\r\n\r\n        initTometalCinematicHero();\r\n\r\n    }\r\n\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>01 Institut Tometal PRESTIGE 02 Institut Tometal EXCELLENCE 03 Institut Tometal R\u00c9USSITE Bienvenue \u00e0 l\u2019Institut Tometal. L\u2019excellence \u00e9ducative plurilingue \u00e0 Antananarivo. Situ\u00e9 dans un cadre moderne \u00e0 Fenoarivo, l\u2019Institut Tometal est l\u2019\u00e9cole plurilingue de r\u00e9f\u00e9rence \u00e0 Madagascar. Nous proposons des parcours sur mesure, adapt\u00e9s au projet de chaque enfant, avec un renforcement majeur en anglais [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-2012","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/net-temporaire.institut-tometal.com\/zh\/wp-json\/wp\/v2\/pages\/2012","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/net-temporaire.institut-tometal.com\/zh\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/net-temporaire.institut-tometal.com\/zh\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/net-temporaire.institut-tometal.com\/zh\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/net-temporaire.institut-tometal.com\/zh\/wp-json\/wp\/v2\/comments?post=2012"}],"version-history":[{"count":4,"href":"https:\/\/net-temporaire.institut-tometal.com\/zh\/wp-json\/wp\/v2\/pages\/2012\/revisions"}],"predecessor-version":[{"id":2016,"href":"https:\/\/net-temporaire.institut-tometal.com\/zh\/wp-json\/wp\/v2\/pages\/2012\/revisions\/2016"}],"wp:attachment":[{"href":"https:\/\/net-temporaire.institut-tometal.com\/zh\/wp-json\/wp\/v2\/media?parent=2012"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}