{"id":1871,"date":"2026-07-28T13:56:07","date_gmt":"2026-07-28T13:56:07","guid":{"rendered":"https:\/\/net-temporaire.institut-tometal.com\/?page_id=1871"},"modified":"2026-08-27T09:09:40","modified_gmt":"2026-08-27T09:09:40","slug":"etablissement","status":"publish","type":"page","link":"https:\/\/net-temporaire.institut-tometal.com\/en\/etablissement\/","title":{"rendered":"Establishment"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1871\" class=\"elementor elementor-1871\">\n\t\t\t\t<main class=\"elementor-element elementor-element-6330a23 e-con-full e-flex e-con e-parent\" data-id=\"6330a23\" 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-ec30cfb elementor-widget elementor-widget-html\" data-id=\"ec30cfb\" 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\r\nSECTION 01 \u2014 HERO PREMIUM + INFORMATIONS CL\u00c9S\r\n========================================================= -->\r\n\r\n<section class=\"it-premium-hero\" id=\"etablissement\">\r\n\r\n    <!-- =====================================================\r\n    HERO PRINCIPAL\r\n    ====================================================== -->\r\n\r\n    <div class=\"it-hero-stage\">\r\n\r\n        <!--\r\n        FUTURE PHOTO DU CAMPUS\r\n\r\n        Lorsque vous recevrez la photographie du b\u00e2timent :\r\n\r\n        1. Importez-la dans WordPress.\r\n        2. Copiez son URL.\r\n        3. Remplacez uniquement :\r\n\r\n        --it-campus-image: none;\r\n\r\n        par :\r\n\r\n        --it-campus-image: url(\"URL-DE-LA-PHOTO\");\r\n        -->\r\n\r\n        <div class=\"it-hero-photo\"><\/div>\r\n        <div class=\"it-hero-shade\"><\/div>\r\n        <div class=\"it-hero-texture\"><\/div>\r\n\r\n        <div class=\"it-hero-line it-hero-line-one\" aria-hidden=\"true\"><\/div>\r\n        <div class=\"it-hero-line it-hero-line-two\" aria-hidden=\"true\"><\/div>\r\n\r\n        <div class=\"it-container it-hero-layout\">\r\n\r\n            <div class=\"it-hero-main\">\r\n\r\n                <div class=\"it-overline\">\r\n                    <span class=\"it-overline-line\"><\/span>\r\n                    <span>Institut Tometal \u00b7 Fenoarivo<\/span>\r\n                <\/div>\r\n\r\n                <h1>\r\n                    L\u2019\u00e9cole qui donne\r\n                    <span>de l\u2019avenir aux ambitions.<\/span>\r\n                <\/h1>\r\n\r\n                <p class=\"it-hero-introduction\">\r\n                    De la maternelle au lyc\u00e9e, l\u2019Institut Tometal propose\r\n                    une \u00e9ducation exigeante, plurilingue et attentive \u00e0\r\n                    la progression de chaque \u00e9l\u00e8ve.\r\n                <\/p>\r\n\r\n                <div class=\"it-hero-actions\">\r\n\r\n                    <a href=\"#it-informations\" class=\"it-button it-button-gold\">\r\n                        D\u00e9couvrir l\u2019\u00e9tablissement\r\n                        <span aria-hidden=\"true\">\u2193<\/span>\r\n                    <\/a>\r\n\r\n                    <a href=\"\/admissions-inscriptions\/\" class=\"it-button it-button-glass\">\r\n                        Admissions 2026\u20132027\r\n                        <span aria-hidden=\"true\">\u2197<\/span>\r\n                    <\/a>\r\n\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n            <aside class=\"it-hero-manifesto\">\r\n\r\n                <div class=\"it-manifesto-number\">01<\/div>\r\n\r\n                <div class=\"it-manifesto-content\">\r\n\r\n                    <span>Notre engagement<\/span>\r\n\r\n                    <p>\r\n                        Faire grandir des \u00e9l\u00e8ves cultiv\u00e9s, autonomes,\r\n                        responsables et capables de r\u00e9ussir dans un\r\n                        monde en transformation.\r\n                    <\/p>\r\n\r\n                <\/div>\r\n\r\n            <\/aside>\r\n\r\n        <\/div>\r\n\r\n        <div class=\"it-hero-bottom\">\r\n\r\n            <div class=\"it-container it-hero-bottom-inner\">\r\n\r\n                <div class=\"it-hero-caption\">\r\n                    <span><\/span>\r\n                    <p>\r\n                        Excellence acad\u00e9mique \u00b7 Ouverture internationale \u00b7\r\n                        Accompagnement individualis\u00e9\r\n                    <\/p>\r\n                <\/div>\r\n\r\n                <a href=\"#it-informations\" class=\"it-scroll-link\">\r\n                    <span>Explorer<\/span>\r\n\r\n                    <div class=\"it-scroll-circle\">\r\n                        <span>\u2193<\/span>\r\n                    <\/div>\r\n                <\/a>\r\n\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n    <!-- =====================================================\r\n    INFORMATIONS ESSENTIELLES\r\n    ====================================================== -->\r\n\r\n    <div class=\"it-information-section\" id=\"it-informations\">\r\n\r\n        <div class=\"it-container\">\r\n\r\n            <div class=\"it-information-heading\">\r\n\r\n                <div>\r\n                    <span class=\"it-small-label\">L\u2019essentiel<\/span>\r\n\r\n                    <h2>\r\n                        Une nouvelle \u00e9cole,\r\n                        <em>une vision internationale.<\/em>\r\n                    <\/h2>\r\n                <\/div>\r\n\r\n                <p>\r\n                    L\u2019Institut Tometal ouvrira ses portes en septembre 2026\r\n                    avec une ambition claire : associer exigence acad\u00e9mique,\r\n                    plurilinguisme et accompagnement humain.\r\n                <\/p>\r\n\r\n            <\/div>\r\n\r\n            <div class=\"it-facts-grid\">\r\n\r\n                <article class=\"it-fact\">\r\n\r\n                    <div class=\"it-fact-top\">\r\n                        <span class=\"it-fact-index\">01<\/span>\r\n                        <span class=\"it-fact-value\">2026<\/span>\r\n                    <\/div>\r\n\r\n                    <div class=\"it-fact-body\">\r\n                        <h3>Ouverture<\/h3>\r\n\r\n                        <p>\r\n                            Premi\u00e8re rentr\u00e9e scolaire pr\u00e9vue\r\n                            en septembre 2026.\r\n                        <\/p>\r\n                    <\/div>\r\n\r\n                <\/article>\r\n\r\n                <article class=\"it-fact\">\r\n\r\n                    <div class=\"it-fact-top\">\r\n                        <span class=\"it-fact-index\">02<\/span>\r\n                        <span class=\"it-fact-value\">4<\/span>\r\n                    <\/div>\r\n\r\n                    <div class=\"it-fact-body\">\r\n                        <h3>Langues enseign\u00e9es<\/h3>\r\n\r\n                        <p>\r\n                            Fran\u00e7ais, anglais, malgache\r\n                            et mandarin.\r\n                        <\/p>\r\n                    <\/div>\r\n\r\n                <\/article>\r\n\r\n                <article class=\"it-fact\">\r\n\r\n                    <div class=\"it-fact-top\">\r\n                        <span class=\"it-fact-index\">03<\/span>\r\n                        <span class=\"it-fact-value it-fact-value-small\">M\u2192L<\/span>\r\n                    <\/div>\r\n\r\n                    <div class=\"it-fact-body\">\r\n                        <h3>Parcours complet<\/h3>\r\n\r\n                        <p>\r\n                            Un accompagnement de la maternelle\r\n                            jusqu\u2019au lyc\u00e9e.\r\n                        <\/p>\r\n                    <\/div>\r\n\r\n                <\/article>\r\n\r\n                <article class=\"it-fact it-fact-featured\">\r\n\r\n                    <div class=\"it-fact-top\">\r\n                        <span class=\"it-fact-index\">04<\/span>\r\n                        <span class=\"it-fact-value it-fact-value-small\">FR+<\/span>\r\n                    <\/div>\r\n\r\n                    <div class=\"it-fact-body\">\r\n                        <h3>Ouverture internationale<\/h3>\r\n\r\n                        <p>\r\n                            Syst\u00e8me fran\u00e7ais, p\u00f4le anglais\r\n                            et certifications britanniques.\r\n                        <\/p>\r\n                    <\/div>\r\n\r\n                <\/article>\r\n\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n    <!-- =====================================================\r\n    TRANSITION VERS LA PROCHAINE SECTION\r\n    ====================================================== -->\r\n\r\n    <div class=\"it-section-transition\">\r\n\r\n        <div class=\"it-container it-transition-layout\">\r\n\r\n            <div class=\"it-transition-index\">\r\n                <span>Prochaine section<\/span>\r\n                <strong>02<\/strong>\r\n            <\/div>\r\n\r\n            <div class=\"it-transition-title\">\r\n\r\n                <span>La vision de l\u2019\u00e9tablissement<\/span>\r\n\r\n                <h2>\r\n                    Une \u00e9cole se construit d\u2019abord\r\n                    autour d\u2019une conviction.\r\n                <\/h2>\r\n\r\n            <\/div>\r\n\r\n            <a href=\"#mot-du-proviseur\" class=\"it-transition-link\">\r\n                <span>Mot du Proviseur<\/span>\r\n                <strong>\u2192<\/strong>\r\n            <\/a>\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n<\/section>\r\n\r\n<style>\r\n\/* =========================================================\r\nVARIABLES ET BASE\r\n========================================================= *\/\r\n\r\n.it-premium-hero {\r\n    --it-navy: #071B3D;\r\n    --it-navy-deep: #041127;\r\n    --it-navy-soft: #102D57;\r\n    --it-blue-grey: #70849A;\r\n    --it-gold: #C99A42;\r\n    --it-gold-light: #E5C477;\r\n    --it-white: #FFFFFF;\r\n    --it-ivory: #F7F5F0;\r\n    --it-light: #F4F6F8;\r\n    --it-border: #DCE2E8;\r\n    --it-text: #17253B;\r\n    --it-muted: #677386;\r\n\r\n    \/*\r\n    Remplacez \"none\" par :\r\n    url(\"URL-DE-LA-PHOTO-DU-CAMPUS\")\r\n    *\/\r\n\r\n    --it-campus-image: none;\r\n\r\n    width: 100%;\r\n    overflow: hidden;\r\n    background: var(--it-white);\r\n    color: var(--it-text);\r\n    font-family: \"Montserrat\", \"Segoe UI\", Arial, sans-serif;\r\n}\r\n\r\n.it-premium-hero *,\r\n.it-premium-hero *::before,\r\n.it-premium-hero *::after {\r\n    box-sizing: border-box;\r\n}\r\n\r\n.it-premium-hero h1,\r\n.it-premium-hero h2,\r\n.it-premium-hero h3,\r\n.it-premium-hero p {\r\n    margin-top: 0;\r\n}\r\n\r\n.it-premium-hero a {\r\n    text-decoration: none;\r\n}\r\n\r\n.it-container {\r\n    width: min(1420px, calc(100% - 96px));\r\n    margin: 0 auto;\r\n}\r\n\r\nbody .entry-title,\r\nbody .page-title,\r\nbody .elementor-page-title {\r\n    display: none !important;\r\n}\r\n\r\n\/* =========================================================\r\nHERO\r\n========================================================= *\/\r\n\r\n.it-hero-stage {\r\n    position: relative;\r\n    min-height: 820px;\r\n    display: flex;\r\n    flex-direction: column;\r\n    justify-content: center;\r\n    isolation: isolate;\r\n    overflow: hidden;\r\n    background: var(--it-navy-deep);\r\n}\r\n\r\n.it-hero-photo {\r\n    position: absolute;\r\n    z-index: -5;\r\n    inset: 0;\r\n    background-image:\r\n        var(--it-campus-image),\r\n        linear-gradient(\r\n            125deg,\r\n            #0B2348 0%,\r\n            #173C65 42%,\r\n            #648097 72%,\r\n            #AEB9C0 100%\r\n        );\r\n    background-size: cover;\r\n    background-position: center;\r\n    transform: scale(1.025);\r\n}\r\n\r\n\/*\r\nFormes abstraites utilis\u00e9es uniquement tant que\r\nla vraie photographie n\u2019est pas disponible.\r\n*\/\r\n\r\n.it-hero-photo::before {\r\n    content: \"\";\r\n    position: absolute;\r\n    inset: 0;\r\n    background:\r\n        radial-gradient(\r\n            circle at 78% 23%,\r\n            rgba(255, 255, 255, 0.25),\r\n            transparent 22%\r\n        ),\r\n        linear-gradient(\r\n            160deg,\r\n            transparent 56%,\r\n            rgba(3, 16, 37, 0.45) 100%\r\n        );\r\n}\r\n\r\n.it-hero-photo::after {\r\n    content: \"\";\r\n    position: absolute;\r\n    right: -5%;\r\n    bottom: -28%;\r\n    width: 62%;\r\n    height: 62%;\r\n    background: rgba(4, 17, 39, 0.27);\r\n    clip-path: polygon(12% 55%, 100% 0, 100% 100%, 0 100%);\r\n}\r\n\r\n.it-hero-shade {\r\n    position: absolute;\r\n    z-index: -4;\r\n    inset: 0;\r\n    background:\r\n        linear-gradient(\r\n            90deg,\r\n            rgba(4, 17, 39, 0.98) 0%,\r\n            rgba(4, 17, 39, 0.93) 34%,\r\n            rgba(4, 17, 39, 0.62) 65%,\r\n            rgba(4, 17, 39, 0.18) 100%\r\n        ),\r\n        linear-gradient(\r\n            0deg,\r\n            rgba(4, 17, 39, 0.72) 0%,\r\n            transparent 46%\r\n        );\r\n}\r\n\r\n.it-hero-texture {\r\n    position: absolute;\r\n    z-index: -3;\r\n    inset: 0;\r\n    opacity: 0.18;\r\n    background-image:\r\n        linear-gradient(\r\n            rgba(255, 255, 255, 0.08) 1px,\r\n            transparent 1px\r\n        ),\r\n        linear-gradient(\r\n            90deg,\r\n            rgba(255, 255, 255, 0.06) 1px,\r\n            transparent 1px\r\n        );\r\n    background-size: 80px 80px;\r\n    mask-image: linear-gradient(\r\n        to right,\r\n        black 0%,\r\n        rgba(0, 0, 0, 0.5) 55%,\r\n        transparent 90%\r\n    );\r\n}\r\n\r\n.it-hero-line {\r\n    position: absolute;\r\n    z-index: -1;\r\n    top: 0;\r\n    width: 1px;\r\n    height: 100%;\r\n    background: rgba(255, 255, 255, 0.12);\r\n}\r\n\r\n.it-hero-line-one {\r\n    right: 31%;\r\n}\r\n\r\n.it-hero-line-two {\r\n    right: 7%;\r\n}\r\n\r\n\/* Contenu principal *\/\r\n\r\n.it-hero-layout {\r\n    position: relative;\r\n    z-index: 3;\r\n    display: grid;\r\n    grid-template-columns: minmax(0, 930px) minmax(260px, 360px);\r\n    align-items: end;\r\n    justify-content: space-between;\r\n    gap: 80px;\r\n    padding: 145px 0 165px;\r\n}\r\n\r\n.it-overline {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 15px;\r\n    margin-bottom: 25px;\r\n    color: var(--it-gold-light);\r\n    font-size: 11px;\r\n    font-weight: 700;\r\n    letter-spacing: 2.3px;\r\n    text-transform: uppercase;\r\n}\r\n\r\n.it-overline-line {\r\n    width: 45px;\r\n    height: 1px;\r\n    background: currentColor;\r\n}\r\n\r\n.it-hero-main h1 {\r\n    max-width: 970px;\r\n    margin-bottom: 32px;\r\n    color: var(--it-white);\r\n    font-family: Georgia, \"Times New Roman\", serif;\r\n    font-size: clamp(60px, 6.6vw, 102px);\r\n    font-weight: 400;\r\n    line-height: 0.98;\r\n    letter-spacing: -3.5px;\r\n}\r\n\r\n.it-hero-main h1 span {\r\n    display: block;\r\n    margin-top: 12px;\r\n    color: var(--it-gold-light);\r\n    font-style: italic;\r\n}\r\n\r\n.it-hero-introduction {\r\n    max-width: 720px;\r\n    margin-bottom: 40px;\r\n    color: rgba(255, 255, 255, 0.78);\r\n    font-size: 16px;\r\n    line-height: 1.9;\r\n}\r\n\r\n.it-hero-actions {\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    gap: 14px;\r\n}\r\n\r\n\/* Boutons *\/\r\n\r\n.it-button {\r\n    min-height: 58px;\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    gap: 18px;\r\n    padding: 16px 26px;\r\n    border: 1px solid transparent;\r\n    font-size: 11px;\r\n    font-weight: 800;\r\n    letter-spacing: 0.65px;\r\n    text-transform: uppercase;\r\n    transition:\r\n        transform 0.3s ease,\r\n        background-color 0.3s ease,\r\n        color 0.3s ease,\r\n        border-color 0.3s ease;\r\n}\r\n\r\n.it-button:hover {\r\n    transform: translateY(-3px);\r\n}\r\n\r\n.it-button-gold {\r\n    background: var(--it-gold);\r\n    color: var(--it-navy-deep);\r\n}\r\n\r\n.it-button-gold:hover {\r\n    background: var(--it-gold-light);\r\n    color: var(--it-navy-deep);\r\n}\r\n\r\n.it-button-glass {\r\n    border-color: rgba(255, 255, 255, 0.46);\r\n    background: rgba(255, 255, 255, 0.04);\r\n    color: var(--it-white);\r\n    backdrop-filter: blur(8px);\r\n}\r\n\r\n.it-button-glass:hover {\r\n    border-color: var(--it-gold);\r\n    color: var(--it-gold-light);\r\n}\r\n\r\n\/* Manifeste \u00e0 droite *\/\r\n\r\n.it-hero-manifesto {\r\n    display: grid;\r\n    grid-template-columns: auto 1fr;\r\n    gap: 22px;\r\n    padding: 27px 0 7px 27px;\r\n    border-left: 1px solid rgba(255, 255, 255, 0.27);\r\n}\r\n\r\n.it-manifesto-number {\r\n    color: var(--it-gold);\r\n    font-family: Georgia, \"Times New Roman\", serif;\r\n    font-size: 25px;\r\n}\r\n\r\n.it-manifesto-content > span {\r\n    display: block;\r\n    margin-bottom: 12px;\r\n    color: var(--it-white);\r\n    font-size: 10px;\r\n    font-weight: 800;\r\n    letter-spacing: 1.8px;\r\n    text-transform: uppercase;\r\n}\r\n\r\n.it-manifesto-content p {\r\n    margin-bottom: 0;\r\n    color: rgba(255, 255, 255, 0.66);\r\n    font-family: Georgia, \"Times New Roman\", serif;\r\n    font-size: 17px;\r\n    line-height: 1.65;\r\n}\r\n\r\n\/* Partie basse du Hero *\/\r\n\r\n.it-hero-bottom {\r\n    position: absolute;\r\n    z-index: 4;\r\n    right: 0;\r\n    bottom: 0;\r\n    left: 0;\r\n    border-top: 1px solid rgba(255, 255, 255, 0.17);\r\n}\r\n\r\n.it-hero-bottom-inner {\r\n    min-height: 95px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    gap: 40px;\r\n}\r\n\r\n.it-hero-caption {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 17px;\r\n}\r\n\r\n.it-hero-caption > span {\r\n    width: 48px;\r\n    height: 1px;\r\n    background: var(--it-gold);\r\n}\r\n\r\n.it-hero-caption p {\r\n    margin-bottom: 0;\r\n    color: rgba(255, 255, 255, 0.65);\r\n    font-size: 9px;\r\n    font-weight: 700;\r\n    letter-spacing: 1.6px;\r\n    text-transform: uppercase;\r\n}\r\n\r\n.it-scroll-link {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 15px;\r\n    color: var(--it-white);\r\n    font-size: 9px;\r\n    font-weight: 800;\r\n    letter-spacing: 1.6px;\r\n    text-transform: uppercase;\r\n}\r\n\r\n.it-scroll-circle {\r\n    width: 43px;\r\n    height: 43px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    border: 1px solid rgba(255, 255, 255, 0.42);\r\n    border-radius: 50%;\r\n    transition:\r\n        background-color 0.3s ease,\r\n        border-color 0.3s ease,\r\n        transform 0.3s ease;\r\n}\r\n\r\n.it-scroll-link:hover .it-scroll-circle {\r\n    border-color: var(--it-gold);\r\n    background: var(--it-gold);\r\n    color: var(--it-navy);\r\n    transform: translateY(3px);\r\n}\r\n\r\n\/* =========================================================\r\nINFORMATIONS\r\n========================================================= *\/\r\n\r\n.it-information-section {\r\n    padding: 105px 0 115px;\r\n    background: var(--it-white);\r\n    scroll-margin-top: 110px;\r\n}\r\n\r\n.it-information-heading {\r\n    display: grid;\r\n    grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.6fr);\r\n    align-items: end;\r\n    gap: 90px;\r\n    margin-bottom: 65px;\r\n}\r\n\r\n.it-small-label {\r\n    display: block;\r\n    margin-bottom: 18px;\r\n    color: var(--it-gold);\r\n    font-size: 10px;\r\n    font-weight: 800;\r\n    letter-spacing: 2.3px;\r\n    text-transform: uppercase;\r\n}\r\n\r\n.it-information-heading h2 {\r\n    max-width: 800px;\r\n    margin-bottom: 0;\r\n    color: var(--it-navy);\r\n    font-family: Georgia, \"Times New Roman\", serif;\r\n    font-size: clamp(44px, 4.8vw, 70px);\r\n    font-weight: 400;\r\n    line-height: 1.08;\r\n    letter-spacing: -2px;\r\n}\r\n\r\n.it-information-heading h2 em {\r\n    display: block;\r\n    color: var(--it-gold);\r\n    font-weight: 400;\r\n}\r\n\r\n.it-information-heading > p {\r\n    margin-bottom: 7px;\r\n    color: var(--it-muted);\r\n    font-size: 14px;\r\n    line-height: 1.85;\r\n}\r\n\r\n\/* Cartes d\u2019informations *\/\r\n\r\n.it-facts-grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(4, 1fr);\r\n    border-top: 1px solid var(--it-border);\r\n    border-bottom: 1px solid var(--it-border);\r\n}\r\n\r\n.it-fact {\r\n    min-height: 315px;\r\n    display: flex;\r\n    flex-direction: column;\r\n    justify-content: space-between;\r\n    padding: 33px 31px 36px;\r\n    border-right: 1px solid var(--it-border);\r\n    background: var(--it-white);\r\n    transition:\r\n        background-color 0.35s ease,\r\n        transform 0.35s ease;\r\n}\r\n\r\n.it-fact:first-child {\r\n    border-left: 1px solid var(--it-border);\r\n}\r\n\r\n.it-fact:hover {\r\n    z-index: 2;\r\n    background: var(--it-ivory);\r\n    transform: translateY(-7px);\r\n}\r\n\r\n.it-fact-featured {\r\n    background: var(--it-navy);\r\n}\r\n\r\n.it-fact-featured:hover {\r\n    background: var(--it-navy-soft);\r\n}\r\n\r\n.it-fact-top {\r\n    display: flex;\r\n    align-items: flex-start;\r\n    justify-content: space-between;\r\n    gap: 20px;\r\n}\r\n\r\n.it-fact-index {\r\n    color: var(--it-muted);\r\n    font-size: 9px;\r\n    font-weight: 800;\r\n    letter-spacing: 1px;\r\n}\r\n\r\n.it-fact-value {\r\n    color: var(--it-gold);\r\n    font-family: Georgia, \"Times New Roman\", serif;\r\n    font-size: 53px;\r\n    font-weight: 600;\r\n    line-height: 1;\r\n}\r\n\r\n.it-fact-value-small {\r\n    font-size: 47px;\r\n}\r\n\r\n.it-fact-body h3 {\r\n    margin-bottom: 12px;\r\n    color: var(--it-navy);\r\n    font-size: 12px;\r\n    font-weight: 800;\r\n    line-height: 1.45;\r\n    letter-spacing: 0.6px;\r\n    text-transform: uppercase;\r\n}\r\n\r\n.it-fact-body p {\r\n    max-width: 230px;\r\n    margin-bottom: 0;\r\n    color: var(--it-muted);\r\n    font-size: 12px;\r\n    line-height: 1.65;\r\n}\r\n\r\n.it-fact-featured .it-fact-index {\r\n    color: rgba(255, 255, 255, 0.5);\r\n}\r\n\r\n.it-fact-featured .it-fact-body h3 {\r\n    color: var(--it-white);\r\n}\r\n\r\n.it-fact-featured .it-fact-body p {\r\n    color: rgba(255, 255, 255, 0.68);\r\n}\r\n\r\n\/* =========================================================\r\nTRANSITION\r\n========================================================= *\/\r\n\r\n.it-section-transition {\r\n    padding: 70px 0;\r\n    background: var(--it-ivory);\r\n    border-top: 1px solid #E6E1D8;\r\n}\r\n\r\n.it-transition-layout {\r\n    display: grid;\r\n    grid-template-columns: 145px minmax(0, 1fr) auto;\r\n    align-items: center;\r\n    gap: 55px;\r\n}\r\n\r\n.it-transition-index {\r\n    padding-right: 35px;\r\n    border-right: 1px solid #D6CFC2;\r\n}\r\n\r\n.it-transition-index span,\r\n.it-transition-index strong {\r\n    display: block;\r\n}\r\n\r\n.it-transition-index span {\r\n    margin-bottom: 10px;\r\n    color: var(--it-muted);\r\n    font-size: 9px;\r\n    font-weight: 800;\r\n    letter-spacing: 1.5px;\r\n    text-transform: uppercase;\r\n}\r\n\r\n.it-transition-index strong {\r\n    color: var(--it-gold);\r\n    font-family: Georgia, \"Times New Roman\", serif;\r\n    font-size: 38px;\r\n    font-weight: 500;\r\n}\r\n\r\n.it-transition-title > span {\r\n    display: block;\r\n    margin-bottom: 11px;\r\n    color: var(--it-gold);\r\n    font-size: 9px;\r\n    font-weight: 800;\r\n    letter-spacing: 2px;\r\n    text-transform: uppercase;\r\n}\r\n\r\n.it-transition-title h2 {\r\n    max-width: 760px;\r\n    margin-bottom: 0;\r\n    color: var(--it-navy);\r\n    font-family: Georgia, \"Times New Roman\", serif;\r\n    font-size: clamp(30px, 3.4vw, 48px);\r\n    font-weight: 400;\r\n    line-height: 1.15;\r\n}\r\n\r\n.it-transition-link {\r\n    min-width: 220px;\r\n    min-height: 58px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    gap: 22px;\r\n    padding: 16px 19px 16px 23px;\r\n    border: 1px solid var(--it-navy);\r\n    color: var(--it-navy);\r\n    font-size: 10px;\r\n    font-weight: 800;\r\n    letter-spacing: 0.7px;\r\n    text-transform: uppercase;\r\n    transition:\r\n        background-color 0.3s ease,\r\n        color 0.3s ease;\r\n}\r\n\r\n.it-transition-link strong {\r\n    font-size: 20px;\r\n    font-weight: 400;\r\n}\r\n\r\n.it-transition-link:hover {\r\n    background: var(--it-navy);\r\n    color: var(--it-white);\r\n}\r\n\r\n\/* =========================================================\r\nTABLETTE\r\n========================================================= *\/\r\n\r\n@media (max-width: 1100px) {\r\n\r\n    .it-container {\r\n        width: min(100% - 54px, 940px);\r\n    }\r\n\r\n    .it-hero-stage {\r\n        min-height: 850px;\r\n    }\r\n\r\n    .it-hero-layout {\r\n        grid-template-columns: 1fr;\r\n        align-items: start;\r\n        gap: 55px;\r\n        padding: 120px 0 160px;\r\n    }\r\n\r\n    .it-hero-main {\r\n        max-width: 850px;\r\n    }\r\n\r\n    .it-hero-manifesto {\r\n        max-width: 470px;\r\n    }\r\n\r\n    .it-information-heading {\r\n        grid-template-columns: 1fr;\r\n        align-items: start;\r\n        gap: 30px;\r\n    }\r\n\r\n    .it-information-heading > p {\r\n        max-width: 650px;\r\n    }\r\n\r\n    .it-facts-grid {\r\n        grid-template-columns: repeat(2, 1fr);\r\n    }\r\n\r\n    .it-fact:nth-child(2) {\r\n        border-right: 1px solid var(--it-border);\r\n    }\r\n\r\n    .it-fact:nth-child(-n + 2) {\r\n        border-bottom: 1px solid var(--it-border);\r\n    }\r\n\r\n    .it-fact:nth-child(3) {\r\n        border-left: 1px solid var(--it-border);\r\n    }\r\n\r\n    .it-transition-layout {\r\n        grid-template-columns: 110px 1fr;\r\n    }\r\n\r\n    .it-transition-link {\r\n        grid-column: 2;\r\n        width: max-content;\r\n    }\r\n}\r\n\r\n\/* =========================================================\r\nMOBILE\r\n========================================================= *\/\r\n\r\n@media (max-width: 767px) {\r\n\r\n    .it-container {\r\n        width: calc(100% - 34px);\r\n    }\r\n\r\n    .it-hero-stage {\r\n        min-height: auto;\r\n    }\r\n\r\n    .it-hero-line,\r\n    .it-hero-texture {\r\n        display: none;\r\n    }\r\n\r\n    .it-hero-shade {\r\n        background:\r\n            linear-gradient(\r\n                90deg,\r\n                rgba(4, 17, 39, 0.96),\r\n                rgba(4, 17, 39, 0.73)\r\n            ),\r\n            linear-gradient(\r\n                0deg,\r\n                rgba(4, 17, 39, 0.8),\r\n                transparent\r\n            );\r\n    }\r\n\r\n    .it-hero-layout {\r\n        gap: 45px;\r\n        padding: 82px 0 142px;\r\n    }\r\n\r\n    .it-overline {\r\n        font-size: 8px;\r\n        letter-spacing: 1.5px;\r\n    }\r\n\r\n    .it-overline-line {\r\n        width: 30px;\r\n    }\r\n\r\n    .it-hero-main h1 {\r\n        margin-bottom: 25px;\r\n        font-size: 47px;\r\n        line-height: 1.02;\r\n        letter-spacing: -1.6px;\r\n    }\r\n\r\n    .it-hero-main h1 span {\r\n        margin-top: 7px;\r\n    }\r\n\r\n    .it-hero-introduction {\r\n        margin-bottom: 31px;\r\n        font-size: 14px;\r\n        line-height: 1.75;\r\n    }\r\n\r\n    .it-hero-actions {\r\n        display: grid;\r\n        grid-template-columns: 1fr;\r\n    }\r\n\r\n    .it-button {\r\n        width: 100%;\r\n    }\r\n\r\n    .it-hero-manifesto {\r\n        grid-template-columns: 35px 1fr;\r\n        gap: 15px;\r\n        padding-left: 20px;\r\n    }\r\n\r\n    .it-manifesto-content p {\r\n        font-size: 15px;\r\n    }\r\n\r\n    .it-hero-bottom-inner {\r\n        min-height: 79px;\r\n    }\r\n\r\n    .it-hero-caption {\r\n        display: none;\r\n    }\r\n\r\n    .it-scroll-link {\r\n        width: 100%;\r\n        justify-content: space-between;\r\n    }\r\n\r\n    .it-information-section {\r\n        padding: 75px 0 80px;\r\n    }\r\n\r\n    .it-information-heading {\r\n        margin-bottom: 45px;\r\n    }\r\n\r\n    .it-information-heading h2 {\r\n        font-size: 40px;\r\n        line-height: 1.09;\r\n        letter-spacing: -1px;\r\n    }\r\n\r\n    .it-information-heading > p {\r\n        font-size: 13px;\r\n        line-height: 1.75;\r\n    }\r\n\r\n    .it-facts-grid {\r\n        grid-template-columns: 1fr;\r\n        border-bottom: none;\r\n    }\r\n\r\n    .it-fact,\r\n    .it-fact:first-child,\r\n    .it-fact:nth-child(2),\r\n    .it-fact:nth-child(3) {\r\n        min-height: 235px;\r\n        padding: 28px 25px;\r\n        border-right: 1px solid var(--it-border);\r\n        border-bottom: 1px solid var(--it-border);\r\n        border-left: 1px solid var(--it-border);\r\n    }\r\n\r\n    .it-fact:hover {\r\n        transform: none;\r\n    }\r\n\r\n    .it-fact-value {\r\n        font-size: 44px;\r\n    }\r\n\r\n    .it-fact-value-small {\r\n        font-size: 40px;\r\n    }\r\n\r\n    .it-section-transition {\r\n        padding: 55px 0;\r\n    }\r\n\r\n    .it-transition-layout {\r\n        grid-template-columns: 1fr;\r\n        gap: 27px;\r\n    }\r\n\r\n    .it-transition-index {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 17px;\r\n        padding-right: 0;\r\n        padding-bottom: 20px;\r\n        border-right: none;\r\n        border-bottom: 1px solid #D6CFC2;\r\n    }\r\n\r\n    .it-transition-index span {\r\n        margin-bottom: 0;\r\n    }\r\n\r\n    .it-transition-index strong {\r\n        font-size: 30px;\r\n    }\r\n\r\n    .it-transition-title h2 {\r\n        font-size: 35px;\r\n    }\r\n\r\n    .it-transition-link {\r\n        grid-column: auto;\r\n        width: 100%;\r\n    }\r\n}\r\n\r\n\/* =========================================================\r\nTR\u00c8S PETITS \u00c9CRANS\r\n========================================================= *\/\r\n\r\n@media (max-width: 390px) {\r\n\r\n    .it-hero-main h1 {\r\n        font-size: 41px;\r\n    }\r\n\r\n    .it-information-heading h2 {\r\n        font-size: 36px;\r\n    }\r\n}\r\n<\/style>\r\n\r\n<script>\r\ndocument.addEventListener(\"DOMContentLoaded\", function () {\r\n\r\n    const section = document.querySelector(\".it-premium-hero\");\r\n\r\n    if (!section) {\r\n        return;\r\n    }\r\n\r\n    const links = section.querySelectorAll('a[href^=\"#\"]');\r\n\r\n    links.forEach(function (link) {\r\n\r\n        link.addEventListener(\"click\", function (event) {\r\n\r\n            const selector = link.getAttribute(\"href\");\r\n\r\n            if (!selector || selector === \"#\") {\r\n                return;\r\n            }\r\n\r\n            const target = document.querySelector(selector);\r\n\r\n            if (!target) {\r\n                return;\r\n            }\r\n\r\n            event.preventDefault();\r\n\r\n            const headerHeight = 105;\r\n\r\n            const targetPosition =\r\n                target.getBoundingClientRect().top +\r\n                window.pageYOffset -\r\n                headerHeight;\r\n\r\n            window.scrollTo({\r\n                top: targetPosition,\r\n                behavior: \"smooth\"\r\n            });\r\n\r\n        });\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<\/main>\n\t\t<div class=\"elementor-element elementor-element-3b3499c e-con-full e-flex e-con e-parent\" data-id=\"3b3499c\" data-element_type=\"container\" data-e-type=\"container\" id=\"mot-du-proviseur\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5316921 elementor-widget elementor-widget-html\" data-id=\"5316921\" 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\nSECTION PREMIUM \u2014 MOT DU PROVISEUR\r\nINSTITUT TOMETAL\r\nHTML + CSS + JAVASCRIPT + RESPONSIVE\r\n\u00c0 COLLER DANS UN SEUL WIDGET HTML ELEMENTOR\r\n========================================================= -->\r\n\r\n<section class=\"tometal-headmaster\" id=\"mot-du-proviseur\">\r\n\r\n    <div class=\"tometal-headmaster__background-shape tometal-headmaster__background-shape--one\"><\/div>\r\n    <div class=\"tometal-headmaster__background-shape tometal-headmaster__background-shape--two\"><\/div>\r\n\r\n    <div class=\"tometal-headmaster__container\">\r\n\r\n        <!-- EN-T\u00caTE DE LA SECTION -->\r\n        <header class=\"tometal-headmaster__header tometal-reveal\">\r\n\r\n            <span class=\"tometal-headmaster__eyebrow\">\r\n                Institut TOMETAL\r\n            <\/span>\r\n\r\n            <h2 class=\"tometal-headmaster__title\">\r\n                Mot du <span>Proviseur<\/span>\r\n            <\/h2>\r\n\r\n            <div class=\"tometal-headmaster__divider\">\r\n                <span><\/span>\r\n            <\/div>\r\n\r\n            <p class=\"tometal-headmaster__intro\">\r\n                Une vision exigeante, humaine et internationale au service de\r\n                la r\u00e9ussite de chaque \u00e9l\u00e8ve.\r\n            <\/p>\r\n\r\n        <\/header>\r\n\r\n        <!-- COMPOSITION PRINCIPALE -->\r\n        <div class=\"tometal-headmaster__composition\">\r\n\r\n            <!-- COLONNE PHOTO -->\r\n            <aside class=\"tometal-headmaster__portrait-column tometal-reveal\">\r\n\r\n                <div class=\"tometal-headmaster__portrait-frame\">\r\n\r\n                    <div class=\"tometal-headmaster__portrait-accent\"><\/div>\r\n\r\n                    <!--\r\n                    REMPLACER L'URL CI-DESSOUS PAR LA PHOTO OFFICIELLE\r\n                    DU PROVISEUR DANS LA M\u00c9DIATH\u00c8QUE WORDPRESS\r\n                    -->\r\n                    <img\r\n                        class=\"tometal-headmaster__portrait\"\r\n                        src=\"https:\/\/net-temporaire.institut-tometal.com\/wp-content\/uploads\/2026\/08\/Mr-le-proviseur-scaled.jpg\"\r\n                        alt=\"Portrait officiel du Proviseur de l\u2019Institut TOMETAL\"\r\n                        loading=\"lazy\"\r\n                        decoding=\"async\"\r\n                    >\r\n\r\n                    <div class=\"tometal-headmaster__portrait-overlay\"><\/div>\r\n\r\n                    <div class=\"tometal-headmaster__portrait-caption\">\r\n                        <span class=\"tometal-headmaster__portrait-role\">\r\n                            Le Proviseur\r\n                        <\/span>\r\n\r\n                        <span class=\"tometal-headmaster__portrait-school\">\r\n                            Institut TOMETAL\r\n                        <\/span>\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n                <div class=\"tometal-headmaster__motto\">\r\n                    <span class=\"tometal-headmaster__motto-mark\">\u201c<\/span>\r\n\r\n                    <p>\r\n                        Former des \u00e9l\u00e8ves qui pensent, et non des \u00e9l\u00e8ves qui r\u00e9p\u00e8tent.\r\n                    <\/p>\r\n                <\/div>\r\n\r\n            <\/aside>\r\n\r\n            <!-- LETTRE OFFICIELLE -->\r\n            <article class=\"tometal-headmaster__letter tometal-reveal\">\r\n\r\n                <div class=\"tometal-headmaster__letter-topline\"><\/div>\r\n\r\n                <div class=\"tometal-headmaster__letter-watermark\">\r\n                    T\r\n                <\/div>\r\n\r\n                <div class=\"tometal-headmaster__letter-inner\">\r\n\r\n                    <div class=\"tometal-headmaster__letter-label\">\r\n                        Message institutionnel\r\n                    <\/div>\r\n\r\n                    <p class=\"tometal-headmaster__salutation\">\r\n                        Chers visiteurs, chers \u00e9l\u00e8ves, ch\u00e8res familles,\r\n                        chers partenaires,\r\n                    <\/p>\r\n\r\n                    <div class=\"tometal-headmaster__body\">\r\n\r\n                        <p>\r\n                            Bienvenue sur le site de l\u2019Institut TOMETAL, une \u00e9cole\r\n                            qui ouvrira ses portes en septembre 2026 et accueillera\r\n                            les \u00e9l\u00e8ves de la maternelle au lyc\u00e9e.\r\n                        <\/p>\r\n\r\n                        <p>\r\n                            Port\u00e9 par le groupe TOMETAL, engag\u00e9 de longue date dans\r\n                            l\u2019\u00e9ducation \u00e0 Madagascar, notre \u00e9tablissement conjugue\r\n                            l\u2019exigence du syst\u00e8me \u00e9ducatif fran\u00e7ais et une v\u00e9ritable\r\n                            ouverture internationale, avec des certifications\r\n                            britanniques. D\u00e8s le plus jeune \u00e2ge, nos \u00e9l\u00e8ves \u00e9voluent\r\n                            dans un environnement plurilingue o\u00f9 se rencontrent le\r\n                            fran\u00e7ais, l\u2019anglais, le malgache et le mandarin, enseign\u00e9\r\n                            d\u00e8s la petite section en partenariat avec l\u2019Institut\r\n                            Confucius.\r\n                        <\/p>\r\n\r\n                        <blockquote class=\"tometal-headmaster__highlight\">\r\n                            <span class=\"tometal-headmaster__highlight-line\"><\/span>\r\n\r\n                            <p>\r\n                                Notre ambition est claire : former des \u00e9l\u00e8ves qui\r\n                                pensent, et non des \u00e9l\u00e8ves qui r\u00e9p\u00e8tent.\r\n                            <\/p>\r\n                        <\/blockquote>\r\n\r\n                        <p>\r\n                            Dans un monde en profonde mutation, l\u2019\u00e9cole ne peut plus\r\n                            seulement transmettre des savoirs. Elle doit aussi\r\n                            rassurer, mobiliser et apprendre \u00e0 r\u00e9fl\u00e9chir, \u00e0 raisonner\r\n                            et \u00e0 agir avec discernement.\r\n                        <\/p>\r\n\r\n                        <p>\r\n                            Notre projet \u00e9ducatif repose sur six valeurs fondamentales :\r\n                            l\u2019excellence, la discipline constructive, l\u2019ouverture\r\n                            internationale, le respect, l\u2019autonomie et la curiosit\u00e9\r\n                            intellectuelle. Elles guident notre enseignement, nos\r\n                            m\u00e9thodes et la relation de confiance que nous construisons\r\n                            chaque jour avec nos \u00e9l\u00e8ves.\r\n                        <\/p>\r\n\r\n                        <p>\r\n                            \u00c0 l\u2019Institut TOMETAL, l\u2019exigence va toujours de pair avec\r\n                            l\u2019accompagnement individualis\u00e9. Nous croyons qu\u2019aucun \u00e9l\u00e8ve\r\n                            ne progresse durablement sans attention, sans rep\u00e8res et\r\n                            sans confiance. C\u2019est pourquoi nous entretenons \u00e9galement\r\n                            un dialogue constant avec les familles, premi\u00e8res\r\n                            partenaires de la r\u00e9ussite de l\u2019enfant.\r\n                        <\/p>\r\n\r\n                        <p class=\"tometal-headmaster__closing-statement\">\r\n                            Notre vocation est de former bien plus que de bons \u00e9l\u00e8ves :\r\n                            des jeunes capables de r\u00e9ussir leur vie.\r\n                        <\/p>\r\n\r\n                    <\/div>\r\n\r\n                    <!-- SIGNATURE -->\r\n                    <footer class=\"tometal-headmaster__signature\">\r\n\r\n                        <div class=\"tometal-headmaster__signature-line\"><\/div>\r\n\r\n                        <div class=\"tometal-headmaster__signature-content\">\r\n\r\n                            <span class=\"tometal-headmaster__signature-script\">\r\n                                Le Proviseur\r\n                            <\/span>\r\n\r\n                            <span class=\"tometal-headmaster__signature-name\">\r\n                                Institut TOMETAL\r\n                            <\/span>\r\n\r\n                        <\/div>\r\n\r\n                    <\/footer>\r\n\r\n                <\/div>\r\n\r\n                <div class=\"tometal-headmaster__letter-corner\"><\/div>\r\n\r\n            <\/article>\r\n\r\n        <\/div>\r\n\r\n        <!-- VALEURS -->\r\n        <div class=\"tometal-headmaster__values tometal-reveal\">\r\n\r\n            <div class=\"tometal-headmaster__value\">\r\n                <span>01<\/span>\r\n                <p>Excellence<\/p>\r\n            <\/div>\r\n\r\n            <div class=\"tometal-headmaster__value\">\r\n                <span>02<\/span>\r\n                <p>Discipline constructive<\/p>\r\n            <\/div>\r\n\r\n            <div class=\"tometal-headmaster__value\">\r\n                <span>03<\/span>\r\n                <p>Ouverture internationale<\/p>\r\n            <\/div>\r\n\r\n            <div class=\"tometal-headmaster__value\">\r\n                <span>04<\/span>\r\n                <p>Respect<\/p>\r\n            <\/div>\r\n\r\n            <div class=\"tometal-headmaster__value\">\r\n                <span>05<\/span>\r\n                <p>Autonomie<\/p>\r\n            <\/div>\r\n\r\n            <div class=\"tometal-headmaster__value\">\r\n                <span>06<\/span>\r\n                <p>Curiosit\u00e9 intellectuelle<\/p>\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n<\/section>\r\n\r\n<style>\r\n\/* =========================================================\r\nVARIABLES ET R\u00c9INITIALISATION\r\n========================================================= *\/\r\n\r\n.tometal-headmaster {\r\n    --tm-navy: #0b1f4d;\r\n    --tm-navy-deep: #061530;\r\n    --tm-navy-soft: #173462;\r\n    --tm-gold: #c79a3b;\r\n    --tm-gold-light: #dfbd73;\r\n    --tm-cream: #f6f3ec;\r\n    --tm-paper: #fffefa;\r\n    --tm-white: #ffffff;\r\n    --tm-text: #243044;\r\n    --tm-muted: #6a7280;\r\n    --tm-border: rgba(11, 31, 77, 0.12);\r\n\r\n    position: relative;\r\n    width: 100%;\r\n    overflow: hidden;\r\n    background:\r\n        linear-gradient(\r\n            180deg,\r\n            #f8f7f3 0%,\r\n            #f3f0e8 48%,\r\n            #f8f7f3 100%\r\n        );\r\n    padding:\r\n        clamp(72px, 8vw, 130px)\r\n        0\r\n        clamp(70px, 8vw, 120px);\r\n    isolation: isolate;\r\n}\r\n\r\n.tometal-headmaster,\r\n.tometal-headmaster * {\r\n    box-sizing: border-box;\r\n}\r\n\r\n.tometal-headmaster img {\r\n    display: block;\r\n    max-width: 100%;\r\n}\r\n\r\n.tometal-headmaster p,\r\n.tometal-headmaster h2,\r\n.tometal-headmaster blockquote {\r\n    margin-top: 0;\r\n}\r\n\r\n\/* =========================================================\r\nFORMES D\u2019ARRI\u00c8RE-PLAN\r\n========================================================= *\/\r\n\r\n.tometal-headmaster__background-shape {\r\n    position: absolute;\r\n    border-radius: 50%;\r\n    pointer-events: none;\r\n    z-index: -1;\r\n}\r\n\r\n.tometal-headmaster__background-shape--one {\r\n    width: 560px;\r\n    height: 560px;\r\n    top: -230px;\r\n    right: -180px;\r\n    border: 1px solid rgba(199, 154, 59, 0.2);\r\n}\r\n\r\n.tometal-headmaster__background-shape--one::before,\r\n.tometal-headmaster__background-shape--one::after {\r\n    content: \"\";\r\n    position: absolute;\r\n    border-radius: inherit;\r\n    inset: 45px;\r\n    border: 1px solid rgba(199, 154, 59, 0.12);\r\n}\r\n\r\n.tometal-headmaster__background-shape--one::after {\r\n    inset: 105px;\r\n}\r\n\r\n.tometal-headmaster__background-shape--two {\r\n    width: 420px;\r\n    height: 420px;\r\n    bottom: -240px;\r\n    left: -190px;\r\n    background: rgba(11, 31, 77, 0.035);\r\n}\r\n\r\n\/* =========================================================\r\nCONTENEUR\r\n========================================================= *\/\r\n\r\n.tometal-headmaster__container {\r\n    width: min(1380px, calc(100% - clamp(32px, 7vw, 110px)));\r\n    margin: 0 auto;\r\n    position: relative;\r\n}\r\n\r\n\/* =========================================================\r\nEN-T\u00caTE\r\n========================================================= *\/\r\n\r\n.tometal-headmaster__header {\r\n    width: min(820px, 100%);\r\n    margin: 0 auto clamp(48px, 6vw, 82px);\r\n    text-align: center;\r\n}\r\n\r\n.tometal-headmaster__eyebrow {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    color: var(--tm-gold);\r\n    font-family: \"Montserrat\", Arial, sans-serif;\r\n    font-size: 12px;\r\n    font-weight: 700;\r\n    letter-spacing: 0.24em;\r\n    text-transform: uppercase;\r\n    margin-bottom: 18px;\r\n}\r\n\r\n.tometal-headmaster__eyebrow::before,\r\n.tometal-headmaster__eyebrow::after {\r\n    content: \"\";\r\n    width: 28px;\r\n    height: 1px;\r\n    background: var(--tm-gold);\r\n    margin: 0 14px;\r\n}\r\n\r\n.tometal-headmaster__title {\r\n    color: var(--tm-navy);\r\n    font-family: Georgia, \"Times New Roman\", serif;\r\n    font-size: clamp(42px, 5.6vw, 78px);\r\n    font-weight: 500;\r\n    line-height: 0.98;\r\n    letter-spacing: -0.035em;\r\n    margin-bottom: 25px;\r\n}\r\n\r\n.tometal-headmaster__title span {\r\n    color: var(--tm-gold);\r\n    font-style: italic;\r\n}\r\n\r\n.tometal-headmaster__divider {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    width: 100%;\r\n    margin-bottom: 22px;\r\n}\r\n\r\n.tometal-headmaster__divider::before,\r\n.tometal-headmaster__divider::after {\r\n    content: \"\";\r\n    width: 54px;\r\n    height: 1px;\r\n    background: rgba(199, 154, 59, 0.4);\r\n}\r\n\r\n.tometal-headmaster__divider span {\r\n    width: 9px;\r\n    height: 9px;\r\n    margin: 0 12px;\r\n    border: 1px solid var(--tm-gold);\r\n    transform: rotate(45deg);\r\n}\r\n\r\n.tometal-headmaster__intro {\r\n    max-width: 650px;\r\n    margin: 0 auto;\r\n    color: var(--tm-muted);\r\n    font-family: \"Montserrat\", Arial, sans-serif;\r\n    font-size: clamp(15px, 1.5vw, 18px);\r\n    line-height: 1.8;\r\n}\r\n\r\n\/* =========================================================\r\nCOMPOSITION PRINCIPALE\r\n========================================================= *\/\r\n\r\n.tometal-headmaster__composition {\r\n    display: grid;\r\n    grid-template-columns:\r\n        minmax(300px, 0.78fr)\r\n        minmax(560px, 1.52fr);\r\n    align-items: start;\r\n    gap: clamp(28px, 4vw, 70px);\r\n    position: relative;\r\n}\r\n\r\n\/* =========================================================\r\nPORTRAIT\r\n========================================================= *\/\r\n\r\n.tometal-headmaster__portrait-column {\r\n    position: sticky;\r\n    top: 40px;\r\n    padding-top: 70px;\r\n    z-index: 2;\r\n}\r\n\r\n.tometal-headmaster__portrait-frame {\r\n    position: relative;\r\n    aspect-ratio: 0.78;\r\n    width: 100%;\r\n    max-width: 455px;\r\n    margin: 0 auto;\r\n    overflow: hidden;\r\n    background: var(--tm-navy);\r\n    box-shadow:\r\n        0 35px 80px rgba(8, 25, 57, 0.18),\r\n        0 10px 25px rgba(8, 25, 57, 0.12);\r\n}\r\n\r\n.tometal-headmaster__portrait-frame::before {\r\n    content: \"\";\r\n    position: absolute;\r\n    top: 18px;\r\n    left: 18px;\r\n    right: 18px;\r\n    bottom: 18px;\r\n    z-index: 3;\r\n    border: 1px solid rgba(255, 255, 255, 0.28);\r\n    pointer-events: none;\r\n}\r\n\r\n.tometal-headmaster__portrait-accent {\r\n    position: absolute;\r\n    top: -16px;\r\n    left: -16px;\r\n    width: 76px;\r\n    height: 76px;\r\n    border-top: 3px solid var(--tm-gold);\r\n    border-left: 3px solid var(--tm-gold);\r\n    z-index: 4;\r\n}\r\n\r\n.tometal-headmaster__portrait {\r\n    width: 100%;\r\n    height: 100%;\r\n    object-fit: cover;\r\n    object-position: center top;\r\n    transition: transform 1.3s cubic-bezier(0.2, 0.7, 0.2, 1);\r\n}\r\n\r\n.tometal-headmaster__portrait-frame:hover .tometal-headmaster__portrait {\r\n    transform: scale(1.035);\r\n}\r\n\r\n.tometal-headmaster__portrait-overlay {\r\n    position: absolute;\r\n    inset: 0;\r\n    background:\r\n        linear-gradient(\r\n            180deg,\r\n            rgba(6, 21, 48, 0.03) 35%,\r\n            rgba(6, 21, 48, 0.84) 100%\r\n        );\r\n}\r\n\r\n.tometal-headmaster__portrait-caption {\r\n    position: absolute;\r\n    left: 42px;\r\n    right: 42px;\r\n    bottom: 42px;\r\n    z-index: 4;\r\n    display: flex;\r\n    flex-direction: column;\r\n}\r\n\r\n.tometal-headmaster__portrait-role {\r\n    color: var(--tm-white);\r\n    font-family: Georgia, \"Times New Roman\", serif;\r\n    font-size: clamp(25px, 2.2vw, 34px);\r\n    line-height: 1.1;\r\n    margin-bottom: 8px;\r\n}\r\n\r\n.tometal-headmaster__portrait-school {\r\n    color: var(--tm-gold-light);\r\n    font-family: \"Montserrat\", Arial, sans-serif;\r\n    font-size: 11px;\r\n    font-weight: 700;\r\n    letter-spacing: 0.2em;\r\n    text-transform: uppercase;\r\n}\r\n\r\n.tometal-headmaster__motto {\r\n    position: relative;\r\n    width: calc(100% - 42px);\r\n    max-width: 395px;\r\n    margin: -26px auto 0;\r\n    padding: 34px 34px 29px;\r\n    background: var(--tm-navy);\r\n    box-shadow: 0 24px 55px rgba(7, 25, 57, 0.16);\r\n    z-index: 5;\r\n}\r\n\r\n.tometal-headmaster__motto-mark {\r\n    position: absolute;\r\n    top: -11px;\r\n    left: 20px;\r\n    color: var(--tm-gold);\r\n    font-family: Georgia, serif;\r\n    font-size: 72px;\r\n    line-height: 1;\r\n    opacity: 0.65;\r\n}\r\n\r\n.tometal-headmaster__motto p {\r\n    position: relative;\r\n    z-index: 2;\r\n    color: rgba(255, 255, 255, 0.9);\r\n    font-family: Georgia, \"Times New Roman\", serif;\r\n    font-size: 18px;\r\n    font-style: italic;\r\n    line-height: 1.6;\r\n    margin: 0;\r\n}\r\n\r\n\/* =========================================================\r\nLETTRE\r\n========================================================= *\/\r\n\r\n.tometal-headmaster__letter {\r\n    position: relative;\r\n    background:\r\n        linear-gradient(\r\n            145deg,\r\n            rgba(255, 255, 255, 0.98),\r\n            rgba(255, 254, 250, 0.98)\r\n        );\r\n    box-shadow:\r\n        0 40px 90px rgba(11, 31, 77, 0.12),\r\n        0 10px 30px rgba(11, 31, 77, 0.06);\r\n    border: 1px solid rgba(199, 154, 59, 0.16);\r\n    overflow: hidden;\r\n}\r\n\r\n.tometal-headmaster__letter-topline {\r\n    height: 5px;\r\n    width: 100%;\r\n    background:\r\n        linear-gradient(\r\n            90deg,\r\n            var(--tm-navy) 0%,\r\n            var(--tm-navy) 70%,\r\n            var(--tm-gold) 70%,\r\n            var(--tm-gold) 100%\r\n        );\r\n}\r\n\r\n.tometal-headmaster__letter-inner {\r\n    position: relative;\r\n    padding:\r\n        clamp(48px, 6vw, 88px)\r\n        clamp(34px, 5vw, 78px)\r\n        clamp(48px, 6vw, 82px);\r\n    z-index: 2;\r\n}\r\n\r\n.tometal-headmaster__letter-watermark {\r\n    position: absolute;\r\n    right: -15px;\r\n    top: 35px;\r\n    color: rgba(11, 31, 77, 0.028);\r\n    font-family: Georgia, \"Times New Roman\", serif;\r\n    font-size: clamp(210px, 22vw, 370px);\r\n    font-weight: 700;\r\n    line-height: 0.8;\r\n    pointer-events: none;\r\n    user-select: none;\r\n}\r\n\r\n.tometal-headmaster__letter-label {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    color: var(--tm-gold);\r\n    font-family: \"Montserrat\", Arial, sans-serif;\r\n    font-size: 10px;\r\n    font-weight: 700;\r\n    letter-spacing: 0.21em;\r\n    text-transform: uppercase;\r\n    margin-bottom: 30px;\r\n}\r\n\r\n.tometal-headmaster__letter-label::before {\r\n    content: \"\";\r\n    width: 36px;\r\n    height: 1px;\r\n    background: var(--tm-gold);\r\n    margin-right: 14px;\r\n}\r\n\r\n.tometal-headmaster__salutation {\r\n    position: relative;\r\n    color: var(--tm-navy);\r\n    font-family: Georgia, \"Times New Roman\", serif;\r\n    font-size: clamp(24px, 2.4vw, 34px);\r\n    line-height: 1.45;\r\n    margin-bottom: 32px;\r\n    max-width: 720px;\r\n}\r\n\r\n.tometal-headmaster__body {\r\n    position: relative;\r\n    z-index: 2;\r\n}\r\n\r\n.tometal-headmaster__body > p {\r\n    color: var(--tm-text);\r\n    font-family: \"Montserrat\", Arial, sans-serif;\r\n    font-size: clamp(15px, 1.15vw, 17px);\r\n    font-weight: 400;\r\n    line-height: 1.95;\r\n    margin-bottom: 24px;\r\n}\r\n\r\n.tometal-headmaster__body > p:first-child::first-letter {\r\n    float: left;\r\n    color: var(--tm-gold);\r\n    font-family: Georgia, \"Times New Roman\", serif;\r\n    font-size: 68px;\r\n    line-height: 0.78;\r\n    padding-right: 10px;\r\n    padding-top: 11px;\r\n}\r\n\r\n.tometal-headmaster__highlight {\r\n    position: relative;\r\n    margin: 38px 0;\r\n    padding: 30px 34px 30px 40px;\r\n    background:\r\n        linear-gradient(\r\n            90deg,\r\n            rgba(11, 31, 77, 0.055),\r\n            rgba(199, 154, 59, 0.055)\r\n        );\r\n    border: 1px solid rgba(11, 31, 77, 0.07);\r\n}\r\n\r\n.tometal-headmaster__highlight-line {\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    width: 5px;\r\n    height: 100%;\r\n    background: var(--tm-gold);\r\n}\r\n\r\n.tometal-headmaster__highlight p {\r\n    color: var(--tm-navy);\r\n    font-family: Georgia, \"Times New Roman\", serif;\r\n    font-size: clamp(23px, 2.2vw, 32px);\r\n    font-style: italic;\r\n    line-height: 1.5;\r\n    margin: 0;\r\n}\r\n\r\n.tometal-headmaster__closing-statement {\r\n    color: var(--tm-navy) !important;\r\n    font-family: Georgia, \"Times New Roman\", serif !important;\r\n    font-size: clamp(21px, 2vw, 29px) !important;\r\n    font-weight: 500 !important;\r\n    line-height: 1.55 !important;\r\n    margin-top: 38px !important;\r\n}\r\n\r\n\/* =========================================================\r\nSIGNATURE\r\n========================================================= *\/\r\n\r\n.tometal-headmaster__signature {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: flex-end;\r\n    margin-top: 48px;\r\n}\r\n\r\n.tometal-headmaster__signature-line {\r\n    width: min(120px, 22%);\r\n    height: 1px;\r\n    margin-right: 22px;\r\n    background: rgba(199, 154, 59, 0.6);\r\n}\r\n\r\n.tometal-headmaster__signature-content {\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: flex-start;\r\n}\r\n\r\n.tometal-headmaster__signature-script {\r\n    color: var(--tm-navy);\r\n    font-family: \"Brush Script MT\", \"Segoe Script\", cursive;\r\n    font-size: clamp(28px, 3vw, 42px);\r\n    line-height: 1.1;\r\n}\r\n\r\n.tometal-headmaster__signature-name {\r\n    color: var(--tm-gold);\r\n    font-family: \"Montserrat\", Arial, sans-serif;\r\n    font-size: 10px;\r\n    font-weight: 700;\r\n    letter-spacing: 0.18em;\r\n    text-transform: uppercase;\r\n    margin-top: 8px;\r\n}\r\n\r\n.tometal-headmaster__letter-corner {\r\n    position: absolute;\r\n    right: 0;\r\n    bottom: 0;\r\n    width: 90px;\r\n    height: 90px;\r\n    background:\r\n        linear-gradient(\r\n            135deg,\r\n            transparent 0%,\r\n            transparent 49%,\r\n            rgba(199, 154, 59, 0.11) 50%,\r\n            rgba(199, 154, 59, 0.11) 100%\r\n        );\r\n}\r\n\r\n\/* =========================================================\r\nVALEURS\r\n========================================================= *\/\r\n\r\n.tometal-headmaster__values {\r\n    display: grid;\r\n    grid-template-columns: repeat(6, minmax(0, 1fr));\r\n    margin-top: clamp(60px, 7vw, 95px);\r\n    border-top: 1px solid rgba(11, 31, 77, 0.12);\r\n    border-bottom: 1px solid rgba(11, 31, 77, 0.12);\r\n}\r\n\r\n.tometal-headmaster__value {\r\n    position: relative;\r\n    min-height: 138px;\r\n    padding: 30px 20px;\r\n    display: flex;\r\n    flex-direction: column;\r\n    justify-content: center;\r\n    border-right: 1px solid rgba(11, 31, 77, 0.11);\r\n    transition:\r\n        background-color 0.35s ease,\r\n        transform 0.35s ease;\r\n}\r\n\r\n.tometal-headmaster__value:first-child {\r\n    border-left: 1px solid rgba(11, 31, 77, 0.11);\r\n}\r\n\r\n.tometal-headmaster__value:hover {\r\n    background: var(--tm-navy);\r\n    transform: translateY(-5px);\r\n}\r\n\r\n.tometal-headmaster__value span {\r\n    color: var(--tm-gold);\r\n    font-family: \"Montserrat\", Arial, sans-serif;\r\n    font-size: 11px;\r\n    font-weight: 700;\r\n    letter-spacing: 0.15em;\r\n    margin-bottom: 14px;\r\n}\r\n\r\n.tometal-headmaster__value p {\r\n    color: var(--tm-navy);\r\n    font-family: Georgia, \"Times New Roman\", serif;\r\n    font-size: 17px;\r\n    line-height: 1.35;\r\n    margin: 0;\r\n    transition: color 0.35s ease;\r\n}\r\n\r\n.tometal-headmaster__value:hover p {\r\n    color: var(--tm-white);\r\n}\r\n\r\n\/* =========================================================\r\nANIMATIONS D\u2019APPARITION\r\n========================================================= *\/\r\n\r\n.tometal-reveal {\r\n    opacity: 0;\r\n    transform: translateY(38px);\r\n    transition:\r\n        opacity 0.9s ease,\r\n        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);\r\n}\r\n\r\n.tometal-reveal.is-visible {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n\r\n    .tometal-reveal {\r\n        opacity: 1;\r\n        transform: none;\r\n        transition: none;\r\n    }\r\n\r\n    .tometal-headmaster__portrait {\r\n        transition: none;\r\n    }\r\n\r\n    .tometal-headmaster__value {\r\n        transition: none;\r\n    }\r\n}\r\n\r\n\/* =========================================================\r\nTABLETTE\r\n========================================================= *\/\r\n\r\n@media screen and (max-width: 1100px) {\r\n\r\n    .tometal-headmaster__composition {\r\n        grid-template-columns: minmax(270px, 0.75fr) minmax(0, 1.25fr);\r\n        gap: 34px;\r\n    }\r\n\r\n    .tometal-headmaster__portrait-column {\r\n        padding-top: 40px;\r\n    }\r\n\r\n    .tometal-headmaster__portrait-caption {\r\n        left: 30px;\r\n        right: 30px;\r\n        bottom: 34px;\r\n    }\r\n\r\n    .tometal-headmaster__letter-inner {\r\n        padding-left: 46px;\r\n        padding-right: 46px;\r\n    }\r\n\r\n    .tometal-headmaster__values {\r\n        grid-template-columns: repeat(3, minmax(0, 1fr));\r\n    }\r\n\r\n    .tometal-headmaster__value:nth-child(3) {\r\n        border-right: 1px solid rgba(11, 31, 77, 0.11);\r\n    }\r\n\r\n    .tometal-headmaster__value:nth-child(-n+3) {\r\n        border-bottom: 1px solid rgba(11, 31, 77, 0.11);\r\n    }\r\n}\r\n\r\n\/* =========================================================\r\nPETITE TABLETTE\r\n========================================================= *\/\r\n\r\n@media screen and (max-width: 880px) {\r\n\r\n    .tometal-headmaster__composition {\r\n        grid-template-columns: 1fr;\r\n    }\r\n\r\n    .tometal-headmaster__portrait-column {\r\n        position: relative;\r\n        top: auto;\r\n        padding-top: 0;\r\n        display: grid;\r\n        grid-template-columns: minmax(260px, 0.82fr) minmax(250px, 1fr);\r\n        align-items: center;\r\n        gap: 28px;\r\n    }\r\n\r\n    .tometal-headmaster__portrait-frame {\r\n        max-width: 360px;\r\n        margin: 0;\r\n    }\r\n\r\n    .tometal-headmaster__motto {\r\n        width: 100%;\r\n        max-width: none;\r\n        margin: 0;\r\n        padding: 42px 36px 35px;\r\n    }\r\n\r\n    .tometal-headmaster__letter {\r\n        margin-top: 12px;\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    .tometal-headmaster {\r\n        padding-top: 68px;\r\n        padding-bottom: 72px;\r\n    }\r\n\r\n    .tometal-headmaster__container {\r\n        width: calc(100% - 30px);\r\n    }\r\n\r\n    .tometal-headmaster__header {\r\n        margin-bottom: 46px;\r\n    }\r\n\r\n    .tometal-headmaster__eyebrow {\r\n        font-size: 10px;\r\n        letter-spacing: 0.18em;\r\n    }\r\n\r\n    .tometal-headmaster__eyebrow::before,\r\n    .tometal-headmaster__eyebrow::after {\r\n        width: 18px;\r\n        margin: 0 9px;\r\n    }\r\n\r\n    .tometal-headmaster__title {\r\n        font-size: clamp(38px, 12vw, 54px);\r\n        line-height: 1.02;\r\n    }\r\n\r\n    .tometal-headmaster__intro {\r\n        font-size: 15px;\r\n        line-height: 1.7;\r\n    }\r\n\r\n    .tometal-headmaster__portrait-column {\r\n        display: block;\r\n    }\r\n\r\n    .tometal-headmaster__portrait-frame {\r\n        width: 100%;\r\n        max-width: none;\r\n        aspect-ratio: 0.85;\r\n    }\r\n\r\n    .tometal-headmaster__portrait-caption {\r\n        left: 30px;\r\n        bottom: 32px;\r\n    }\r\n\r\n    .tometal-headmaster__motto {\r\n        width: calc(100% - 30px);\r\n        margin: -24px auto 0;\r\n        padding: 35px 28px 27px;\r\n    }\r\n\r\n    .tometal-headmaster__motto p {\r\n        font-size: 16px;\r\n    }\r\n\r\n    .tometal-headmaster__letter {\r\n        margin-top: 34px;\r\n    }\r\n\r\n    .tometal-headmaster__letter-topline {\r\n        height: 4px;\r\n    }\r\n\r\n    .tometal-headmaster__letter-inner {\r\n        padding: 43px 24px 47px;\r\n    }\r\n\r\n    .tometal-headmaster__letter-label {\r\n        font-size: 9px;\r\n        letter-spacing: 0.16em;\r\n        margin-bottom: 24px;\r\n    }\r\n\r\n    .tometal-headmaster__salutation {\r\n        font-size: 24px;\r\n        margin-bottom: 28px;\r\n    }\r\n\r\n    .tometal-headmaster__body > p {\r\n        font-size: 15px;\r\n        line-height: 1.82;\r\n        margin-bottom: 21px;\r\n    }\r\n\r\n    .tometal-headmaster__body > p:first-child::first-letter {\r\n        font-size: 56px;\r\n    }\r\n\r\n    .tometal-headmaster__highlight {\r\n        margin: 30px 0;\r\n        padding: 26px 22px 26px 27px;\r\n    }\r\n\r\n    .tometal-headmaster__highlight p {\r\n        font-size: 22px;\r\n        line-height: 1.45;\r\n    }\r\n\r\n    .tometal-headmaster__closing-statement {\r\n        font-size: 21px !important;\r\n    }\r\n\r\n    .tometal-headmaster__signature {\r\n        justify-content: flex-start;\r\n        margin-top: 42px;\r\n    }\r\n\r\n    .tometal-headmaster__signature-line {\r\n        display: none;\r\n    }\r\n\r\n    .tometal-headmaster__values {\r\n        grid-template-columns: repeat(2, minmax(0, 1fr));\r\n        margin-top: 56px;\r\n    }\r\n\r\n    .tometal-headmaster__value {\r\n        min-height: 120px;\r\n        padding: 25px 18px;\r\n        border-bottom: 1px solid rgba(11, 31, 77, 0.11);\r\n    }\r\n\r\n    .tometal-headmaster__value:nth-child(odd) {\r\n        border-left: 1px solid rgba(11, 31, 77, 0.11);\r\n    }\r\n\r\n    .tometal-headmaster__value:nth-child(even) {\r\n        border-right: 1px solid rgba(11, 31, 77, 0.11);\r\n    }\r\n\r\n    .tometal-headmaster__value:nth-last-child(-n+2) {\r\n        border-bottom: none;\r\n    }\r\n\r\n    .tometal-headmaster__background-shape--one {\r\n        width: 320px;\r\n        height: 320px;\r\n        top: -180px;\r\n        right: -180px;\r\n    }\r\n}\r\n\r\n\/* =========================================================\r\nTR\u00c8S PETITS \u00c9CRANS\r\n========================================================= *\/\r\n\r\n@media screen and (max-width: 420px) {\r\n\r\n    .tometal-headmaster__container {\r\n        width: calc(100% - 24px);\r\n    }\r\n\r\n    .tometal-headmaster__title {\r\n        font-size: 39px;\r\n    }\r\n\r\n    .tometal-headmaster__portrait-frame::before {\r\n        inset: 13px;\r\n    }\r\n\r\n    .tometal-headmaster__portrait-caption {\r\n        left: 24px;\r\n        right: 24px;\r\n        bottom: 27px;\r\n    }\r\n\r\n    .tometal-headmaster__portrait-role {\r\n        font-size: 25px;\r\n    }\r\n\r\n    .tometal-headmaster__letter-inner {\r\n        padding-left: 20px;\r\n        padding-right: 20px;\r\n    }\r\n\r\n    .tometal-headmaster__values {\r\n        grid-template-columns: 1fr;\r\n    }\r\n\r\n    .tometal-headmaster__value,\r\n    .tometal-headmaster__value:nth-child(odd),\r\n    .tometal-headmaster__value:nth-child(even) {\r\n        border-left: 1px solid rgba(11, 31, 77, 0.11);\r\n        border-right: 1px solid rgba(11, 31, 77, 0.11);\r\n        border-bottom: 1px solid rgba(11, 31, 77, 0.11);\r\n    }\r\n\r\n    .tometal-headmaster__value:last-child {\r\n        border-bottom: none;\r\n    }\r\n}\r\n\r\n\/* =========================================================\r\nCORRECTIONS ELEMENTOR\r\n========================================================= *\/\r\n\r\n.elementor-widget-html:has(.tometal-headmaster),\r\n.elementor-widget-html:has(.tometal-headmaster) > .elementor-widget-container {\r\n    width: 100% !important;\r\n    max-width: none !important;\r\n    margin: 0 !important;\r\n    padding: 0 !important;\r\n}\r\n\r\n.tometal-headmaster-container,\r\n.tometal-headmaster-container > .e-con-inner {\r\n    width: 100% !important;\r\n    max-width: none !important;\r\n    margin: 0 !important;\r\n    padding: 0 !important;\r\n    gap: 0 !important;\r\n}\r\n<\/style>\r\n\r\n<script>\r\ndocument.addEventListener(\"DOMContentLoaded\", function () {\r\n\r\n    const section = document.querySelector(\".tometal-headmaster\");\r\n\r\n    if (!section) {\r\n        return;\r\n    }\r\n\r\n    const revealElements = section.querySelectorAll(\".tometal-reveal\");\r\n\r\n    if (\r\n        \"IntersectionObserver\" in window &&\r\n        !window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\r\n    ) {\r\n        const revealObserver = new IntersectionObserver(\r\n            function (entries, observer) {\r\n                entries.forEach(function (entry) {\r\n                    if (entry.isIntersecting) {\r\n                        entry.target.classList.add(\"is-visible\");\r\n                        observer.unobserve(entry.target);\r\n                    }\r\n                });\r\n            },\r\n            {\r\n                threshold: 0.13,\r\n                rootMargin: \"0px 0px -45px 0px\"\r\n            }\r\n        );\r\n\r\n        revealElements.forEach(function (element, index) {\r\n            element.style.transitionDelay = Math.min(index * 110, 330) + \"ms\";\r\n            revealObserver.observe(element);\r\n        });\r\n    } else {\r\n        revealElements.forEach(function (element) {\r\n            element.classList.add(\"is-visible\");\r\n        });\r\n    }\r\n\r\n});\r\n<\/script>\r\n<style>\r\n\/* CORRECTION D\u2019AFFICHAGE DANS ELEMENTOR *\/\r\n.tometal-headmaster .tometal-reveal {\r\n    opacity: 1 !important;\r\n    transform: translateY(0) !important;\r\n    visibility: visible !important;\r\n}\r\n<\/style>\r\n\r\n<!-- =========================================================\r\nCORRECTION FINALE \u2014 LE BLOC PHOTO COMPLET SUIT LA LECTURE\r\nLa photo, la l\u00e9gende et la citation restent ensemble dans le viewport.\r\n========================================================= -->\r\n\r\n<style>\r\n\/* Le sticky ne fonctionne pas si un parent coupe le d\u00e9bordement. *\/\r\n.tometal-headmaster,\r\n.tometal-headmaster__container,\r\n.tometal-headmaster__composition,\r\n.elementor-element:has(.tometal-headmaster),\r\n.elementor-element:has(.tometal-headmaster) > .e-con-inner,\r\n.elementor-widget-html:has(.tometal-headmaster),\r\n.elementor-widget-html:has(.tometal-headmaster) > .elementor-widget-container {\r\n    overflow: visible !important;\r\n}\r\n\r\n\/* Toute la colonne suit le scroll : photo + titre + citation. *\/\r\n@media screen and (min-width: 881px) {\r\n    .tometal-headmaster__composition {\r\n        align-items: start !important;\r\n    }\r\n\r\n    .tometal-headmaster__portrait-column {\r\n        position: -webkit-sticky !important;\r\n        position: sticky !important;\r\n        top: 72px !important;\r\n        align-self: start !important;\r\n        height: fit-content !important;\r\n        padding-top: 0 !important;\r\n        transform: none !important;\r\n        z-index: 8 !important;\r\n    }\r\n\r\n    .tometal-headmaster__portrait-frame,\r\n    .tometal-headmaster__portrait-caption,\r\n    .tometal-headmaster__motto {\r\n        transform: none !important;\r\n        will-change: auto !important;\r\n    }\r\n\r\n    \/* La photo seule peut flotter \u00e0 l\u2019int\u00e9rieur du cadre. *\/\r\n    .tometal-headmaster__portrait {\r\n        will-change: transform !important;\r\n        transform-origin: 50% 45% !important;\r\n    }\r\n\r\n    .tometal-headmaster__portrait {\r\n        height: 100% !important;\r\n        margin-top: 0 !important;\r\n    }\r\n}\r\n\r\n\/* Sur tablette et mobile, le bloc reprend un d\u00e9filement normal. *\/\r\n@media screen and (max-width: 880px) {\r\n    .tometal-headmaster__portrait-column {\r\n        position: relative !important;\r\n        top: auto !important;\r\n        transform: none !important;\r\n    }\r\n}\r\n<\/style>\r\n\r\n<script>\r\n(function () {\r\n    \"use strict\";\r\n\r\n    function ensureHeadmasterSticky() {\r\n        const section = document.querySelector(\".tometal-headmaster\");\r\n        if (!section) return;\r\n\r\n        const ancestors = [];\r\n        let current = section.parentElement;\r\n\r\n        \/* Elementor ajoute parfois overflow:hidden sur un parent.\r\n           On le neutralise uniquement autour de cette section. *\/\r\n        while (current && current !== document.body) {\r\n            ancestors.push(current);\r\n            current = current.parentElement;\r\n        }\r\n\r\n        ancestors.forEach(function (element) {\r\n            const style = window.getComputedStyle(element);\r\n            if (\r\n                style.overflow === \"hidden\" ||\r\n                style.overflowY === \"hidden\" ||\r\n                style.overflow === \"clip\" ||\r\n                style.overflowY === \"clip\"\r\n            ) {\r\n                element.style.setProperty(\"overflow\", \"visible\", \"important\");\r\n                element.style.setProperty(\"overflow-y\", \"visible\", \"important\");\r\n            }\r\n        });\r\n    }\r\n\r\n    if (document.readyState === \"loading\") {\r\n        document.addEventListener(\"DOMContentLoaded\", ensureHeadmasterSticky);\r\n    } else {\r\n        ensureHeadmasterSticky();\r\n    }\r\n\r\n    window.addEventListener(\"load\", ensureHeadmasterSticky, { once: true });\r\n    window.setTimeout(ensureHeadmasterSticky, 500);\r\n})();\r\n<\/script>\r\n\r\n<!-- =========================================================\r\nCORRECTION VISIBILIT\u00c9 INITIALE\r\nLe portrait, le titre et toute la citation restent visibles d\u00e8s l'arriv\u00e9e.\r\n========================================================= -->\r\n<style>\r\n@media screen and (min-width: 881px) {\r\n    .tometal-headmaster__portrait-column {\r\n        top: 112px !important;\r\n        width: 100% !important;\r\n        max-width: 455px !important;\r\n        margin: 0 auto !important;\r\n    }\r\n\r\n    .tometal-headmaster__portrait-frame {\r\n        width: 100% !important;\r\n        max-width: 455px !important;\r\n        height: clamp(410px, calc(100vh - 330px), 520px) !important;\r\n        min-height: 0 !important;\r\n        aspect-ratio: auto !important;\r\n    }\r\n\r\n    .tometal-headmaster__portrait {\r\n        width: 100% !important;\r\n        height: 100% !important;\r\n        object-fit: cover !important;\r\n        object-position: center 12% !important;\r\n    }\r\n\r\n    .tometal-headmaster__portrait-caption {\r\n        left: 34px !important;\r\n        right: 34px !important;\r\n        bottom: 34px !important;\r\n    }\r\n\r\n    .tometal-headmaster__portrait-role {\r\n        font-size: clamp(25px, 2vw, 32px) !important;\r\n    }\r\n\r\n    .tometal-headmaster__motto {\r\n        width: calc(100% - 34px) !important;\r\n        max-width: 405px !important;\r\n        margin: -20px auto 0 !important;\r\n        padding: 29px 30px 25px !important;\r\n    }\r\n\r\n    .tometal-headmaster__motto-mark {\r\n        top: -12px !important;\r\n        left: 18px !important;\r\n        font-size: 64px !important;\r\n    }\r\n\r\n    .tometal-headmaster__motto p {\r\n        font-size: clamp(15px, 1.35vw, 17px) !important;\r\n        line-height: 1.48 !important;\r\n    }\r\n}\r\n\r\n\/* \u00c9crans d'ordinateur peu hauts : r\u00e9duction suppl\u00e9mentaire automatique. *\/\r\n@media screen and (min-width: 881px) and (max-height: 760px) {\r\n    .tometal-headmaster__portrait-column {\r\n        top: 105px !important;\r\n    }\r\n\r\n    .tometal-headmaster__portrait-frame {\r\n        height: calc(100vh - 315px) !important;\r\n        min-height: 350px !important;\r\n    }\r\n\r\n    .tometal-headmaster__portrait-caption {\r\n        bottom: 26px !important;\r\n    }\r\n\r\n    .tometal-headmaster__motto {\r\n        margin-top: -17px !important;\r\n        padding: 24px 27px 21px !important;\r\n    }\r\n\r\n    .tometal-headmaster__motto p {\r\n        font-size: 15px !important;\r\n        line-height: 1.42 !important;\r\n    }\r\n}\r\n<\/style>\r\n\r\n\r\n<!-- =========================================================\r\nEFFET DE FLOTTEMENT PREMIUM DU PORTRAIT\r\nLa colonne compl\u00e8te reste sticky : photo, l\u00e9gende et citation suivent la lecture.\r\nSeule l\u2019image flotte doucement \u00e0 l\u2019int\u00e9rieur de son cadre.\r\n========================================================= -->\r\n<style>\r\n@media screen and (min-width: 881px) {\r\n    .tometal-headmaster__portrait-frame {\r\n        isolation: isolate !important;\r\n    }\r\n\r\n    .tometal-headmaster__portrait {\r\n        transform: translate3d(0, 0, 0) scale(1.012);\r\n        backface-visibility: hidden;\r\n    }\r\n\r\n    .tometal-headmaster__portrait-overlay,\r\n    .tometal-headmaster__portrait-caption,\r\n    .tometal-headmaster__portrait-frame::before,\r\n    .tometal-headmaster__portrait-accent {\r\n        z-index: 4;\r\n    }\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n    .tometal-headmaster__portrait {\r\n        transform: none !important;\r\n    }\r\n}\r\n<\/style>\r\n\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/gsap@3.13.0\/dist\/gsap.min.js\"><\/script>\r\n<script>\r\n(function () {\r\n    \"use strict\";\r\n\r\n    function initHeadmasterPortraitFloat() {\r\n        const section = document.querySelector(\".tometal-headmaster\");\r\n        if (!section || section.dataset.portraitFloatReady === \"true\") return;\r\n\r\n        const portrait = section.querySelector(\".tometal-headmaster__portrait\");\r\n        const portraitColumn = section.querySelector(\".tometal-headmaster__portrait-column\");\r\n\r\n        if (!portrait || !portraitColumn) return;\r\n        if (window.innerWidth <= 880) return;\r\n        if (window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches) return;\r\n\r\n        if (typeof window.gsap === \"undefined\") {\r\n            window.setTimeout(initHeadmasterPortraitFloat, 180);\r\n            return;\r\n        }\r\n\r\n        section.dataset.portraitFloatReady = \"true\";\r\n\r\n        \/*\r\n        La colonne reste sticky et suit le message.\r\n        Seule la photo bouge tr\u00e8s l\u00e9g\u00e8rement dans son cadre.\r\n        *\/\r\n        gsap.set(portrait, {\r\n            scale: 1.012,\r\n            x: 0,\r\n            y: 0,\r\n            force3D: true,\r\n            transformOrigin: \"50% 45%\"\r\n        });\r\n\r\n        const floating = gsap.timeline({\r\n            repeat: -1,\r\n            yoyo: true,\r\n            defaults: { ease: \"sine.inOut\" }\r\n        });\r\n\r\n        floating\r\n            .to(portrait, {\r\n                y: -4,\r\n                x: 1,\r\n                scale: 1.016,\r\n                duration: 3.8\r\n            })\r\n            .to(portrait, {\r\n                y: 4,\r\n                x: -1,\r\n                scale: 1.012,\r\n                duration: 4.2\r\n            });\r\n\r\n        \/* Pause automatique lorsque la section n\u2019est plus visible. *\/\r\n        if (\"IntersectionObserver\" in window) {\r\n            const observer = new IntersectionObserver(function (entries) {\r\n                entries.forEach(function (entry) {\r\n                    if (entry.isIntersecting) {\r\n                        floating.play();\r\n                    } else {\r\n                        floating.pause();\r\n                    }\r\n                });\r\n            }, { threshold: 0.05 });\r\n\r\n            observer.observe(section);\r\n        }\r\n    }\r\n\r\n    if (document.readyState === \"loading\") {\r\n        document.addEventListener(\"DOMContentLoaded\", initHeadmasterPortraitFloat);\r\n    } else {\r\n        initHeadmasterPortraitFloat();\r\n    }\r\n\r\n    window.addEventListener(\"load\", initHeadmasterPortraitFloat, { once: true });\r\n    window.setTimeout(initHeadmasterPortraitFloat, 500);\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<div class=\"elementor-element elementor-element-1f8741e e-con-full e-flex e-con e-parent\" data-id=\"1f8741e\" data-element_type=\"container\" data-e-type=\"container\" id=\"projet-etablissement\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4baf212 elementor-widget elementor-widget-html\" data-id=\"4baf212\" data-element_type=\"widget\" data-e-type=\"widget\" id=\"projet-etablissement\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- =========================================================\nINSTITUT TOMETAL\nSECTION 03 \u2014 PROJET D\u2019\u00c9TABLISSEMENT\nREPRODUCTION FID\u00c8LE DE LA MAQUETTE DE LA DIRECTION\n========================================================= -->\n\n<section class=\"tometal-project\" id=\"projet-etablissement\">\n\n    <!-- =====================================================\n    EN-T\u00caTE\n    ====================================================== -->\n\n    <div class=\"tp-header tp-container\">\n\n        <span class=\"tp-section-label\">\n            Section 03\n        <\/span>\n\n        <h2>\n            Projet d\u2019\u00e9tablissement\n        <\/h2>\n\n        <p class=\"tp-subtitle\">\n            Une vision commune pour la r\u00e9ussite et l\u2019\u00e9panouissement\n            de chaque \u00e9l\u00e8ve\n        <\/p>\n\n        <p class=\"tp-intro\">\n            Notre projet d\u2019\u00e9tablissement repose sur cinq piliers strat\u00e9giques\n            qui guident nos actions au quotidien.\n            <strong>Au c\u0153ur de toutes nos d\u00e9cisions : l\u2019\u00e9l\u00e8ve.<\/strong>\n        <\/p>\n\n    <\/div>\n\n    <!-- =====================================================\n    INFOGRAPHIE PRINCIPALE\n    ====================================================== -->\n\n    <div class=\"tp-map-wrap\">\n\n        <div class=\"tp-map tp-container\">\n\n            <!-- D\u00c9CORATIONS -->\n\n            <div class=\"tp-decoration tp-decoration-a\" aria-hidden=\"true\"><\/div>\n            <div class=\"tp-decoration tp-decoration-b\" aria-hidden=\"true\"><\/div>\n            <div class=\"tp-decoration tp-decoration-c\" aria-hidden=\"true\"><\/div>\n\n            <!-- =================================================\n            PILIER 01\n            ================================================== -->\n\n            <article class=\"tp-pillar tp-pillar-1\">\n\n                <div class=\"tp-pillar-badge\">\n                    01\n                <\/div>\n\n                <div class=\"tp-icon tp-icon-gold\">\n\n                    <svg viewBox=\"0 0 64 64\" aria-hidden=\"true\">\n                        <path d=\"M7 21 32 8l25 13-25 13L7 21Z\"><\/path>\n                        <path d=\"M18 30v14c8 7 20 7 28 0V30\"><\/path>\n                        <path d=\"M54 24v19\"><\/path>\n                    <\/svg>\n\n                <\/div>\n\n                <h3>\n                    R\u00e9ussite acad\u00e9mique\n                <\/h3>\n\n                <span class=\"tp-pillar-tagline tp-gold-text\">\n                    Viser l\u2019excellence pour chacun\n                <\/span>\n\n                <ul>\n                    <li>Programmes exigeants et adapt\u00e9s<\/li>\n                    <li>Suivi personnalis\u00e9 et accompagnement<\/li>\n                    <li>\u00c9valuation au service des apprentissages<\/li>\n                    <li>Orientation et pr\u00e9paration de l\u2019avenir<\/li>\n                <\/ul>\n\n            <\/article>\n\n            <!-- =================================================\n            PILIER 02\n            ================================================== -->\n\n            <article class=\"tp-pillar tp-pillar-2\">\n\n                <div class=\"tp-pillar-badge\">\n                    02\n                <\/div>\n\n                <div class=\"tp-icon tp-icon-purple\">\n\n                    <svg viewBox=\"0 0 64 64\" aria-hidden=\"true\">\n                        <path d=\"M32 55V27\"><\/path>\n                        <path d=\"M32 31c-8-1-14-6-15-14 9-1 15 4 15 14Z\"><\/path>\n                        <path d=\"M32 38c8-1 14-6 15-14-9-1-15 4-15 14Z\"><\/path>\n                        <path d=\"M21 49c3-5 7-8 11-9\"><\/path>\n                        <path d=\"M43 49c-3-5-7-8-11-9\"><\/path>\n                    <\/svg>\n\n                <\/div>\n\n                <h3>\n                    D\u00e9veloppement<br>personnel\n                <\/h3>\n\n                <span class=\"tp-pillar-tagline tp-purple-text\">\n                    Grandir en confiance\n                <\/span>\n\n                <ul>\n                    <li>Comp\u00e9tences psychosociales<\/li>\n                    <li>Leadership et autonomie<\/li>\n                    <li>Cr\u00e9ativit\u00e9 et esprit d\u2019initiative<\/li>\n                    <li>Gestion des \u00e9motions<\/li>\n                    <li>Engagement citoyen<\/li>\n                <\/ul>\n\n            <\/article>\n\n            <!-- =================================================\n            PILIER 03\n            ================================================== -->\n\n            <article class=\"tp-pillar tp-pillar-3\">\n\n                <div class=\"tp-pillar-badge\">\n                    03\n                <\/div>\n\n                <div class=\"tp-icon tp-icon-blue\">\n\n                    <svg viewBox=\"0 0 64 64\" aria-hidden=\"true\">\n                        <path d=\"M22 42c-5-3-8-9-8-15a18 18 0 1 1 36 0c0 6-3 12-8 15\"><\/path>\n                        <path d=\"M24 47h16\"><\/path>\n                        <path d=\"M27 53h10\"><\/path>\n                        <path d=\"M32 3v7\"><\/path>\n                        <path d=\"m9 12 6 6\"><\/path>\n                        <path d=\"m55 12-6 6\"><\/path>\n                    <\/svg>\n\n                <\/div>\n\n                <h3>\n                    Innovation<br>p\u00e9dagogique\n                <\/h3>\n\n                <span class=\"tp-pillar-tagline tp-blue-text\">\n                    Apprendre autrement pour mieux r\u00e9ussir\n                <\/span>\n\n                <ul>\n                    <li>P\u00e9dagogies actives et collaboratives<\/li>\n                    <li>Apprentissage par projets<\/li>\n                    <li>Int\u00e9gration du num\u00e9rique<\/li>\n                    <li>Laboratoires, sciences et robotique<\/li>\n                    <li>\u00c9valuation et diff\u00e9renciation<\/li>\n                <\/ul>\n\n            <\/article>\n\n            <!-- =================================================\n            PILIER 04\n            ================================================== -->\n\n            <article class=\"tp-pillar tp-pillar-4\">\n\n                <div class=\"tp-pillar-badge\">\n                    04\n                <\/div>\n\n                <div class=\"tp-icon tp-icon-pink\">\n\n                    <svg viewBox=\"0 0 64 64\" aria-hidden=\"true\">\n                        <path d=\"M32 55S10 44 10 26a12 12 0 0 1 22-7 12 12 0 0 1 22 7c0 18-22 29-22 29Z\"><\/path>\n                    <\/svg>\n\n                <\/div>\n\n                <h3>\n                    Bien-\u00eatre et<br>\u00e9panouissement\n                <\/h3>\n\n                <span class=\"tp-pillar-tagline tp-pink-text\">\n                    Un environnement bienveillant et s\u00e9curisant\n                <\/span>\n\n                <ul>\n                    <li>Climat scolaire positif et inclusif<\/li>\n                    <li>Pr\u00e9vention et \u00e9coute<\/li>\n                    <li>Activit\u00e9s sportives et culturelles<\/li>\n                    <li>Accompagnement personnalis\u00e9<\/li>\n                    <li>Sant\u00e9 et \u00e9quilibre<\/li>\n                <\/ul>\n\n            <\/article>\n\n            <!-- =================================================\n            PILIER 05\n            ================================================== -->\n\n            <article class=\"tp-pillar tp-pillar-5\">\n\n                <div class=\"tp-pillar-badge\">\n                    05\n                <\/div>\n\n                <div class=\"tp-icon tp-icon-teal\">\n\n                    <svg viewBox=\"0 0 64 64\" aria-hidden=\"true\">\n                        <circle cx=\"32\" cy=\"32\" r=\"23\"><\/circle>\n                        <path d=\"M9 32h46\"><\/path>\n                        <path d=\"M32 9c8 7 13 15 13 23S40 48 32 55\"><\/path>\n                        <path d=\"M32 9c-8 7-13 15-13 23s5 16 13 23\"><\/path>\n                    <\/svg>\n\n                <\/div>\n\n                <h3>\n                    Ouverture<br>internationale\n                <\/h3>\n\n                <span class=\"tp-pillar-tagline tp-teal-text\">\n                    S\u2019ouvrir au monde et aux cultures\n                <\/span>\n\n                <ul>\n                    <li>Plurilinguisme et diversit\u00e9 culturelle<\/li>\n                    <li>Partenariat avec l\u2019Institut Confucius<\/li>\n                    <li>Pr\u00e9paration aux certifications internationales<\/li>\n                    <li>\u00c9changes et projets internationaux<\/li>\n                    <li>Ouverture d\u2019un parcours britannique<\/li>\n                <\/ul>\n\n            <\/article>\n\n            <!-- =================================================\n            CERCLE CENTRAL\n            ================================================== -->\n\n            <div class=\"tp-center\">\n\n                <div class=\"tp-orbit tp-orbit-one\" aria-hidden=\"true\"><\/div>\n                <div class=\"tp-orbit tp-orbit-two\" aria-hidden=\"true\"><\/div>\n\n                <div class=\"tp-photo-wheel\">\n\n                    <!--\n                    Remplacez les URLs ci-dessous par les photos officielles.\n\n                    Exemple :\n                    style=\"--tp-image: url('URL-DE-LA-PHOTO');\"\n                    -->\n\n                    <div\n                        class=\"tp-photo tp-photo-1\"\n                        style=\"--tp-image: url('http:\/\/net-temporaire.institut-tometal.com\/wp-content\/uploads\/2026\/08\/institut-tometal-activity.jpeg');\"\n                    ><\/div>\n\n                    <div\n                        class=\"tp-photo tp-photo-2\"\n                        style=\"--tp-image: url('http:\/\/net-temporaire.institut-tometal.com\/wp-content\/uploads\/2026\/08\/Institut-Tometal-Activity-2.jpeg');\"\n                    ><\/div>\n\n                    <div\n                        class=\"tp-photo tp-photo-3\"\n                        style=\"--tp-image: url('http:\/\/net-temporaire.institut-tometal.com\/wp-content\/uploads\/2026\/08\/Institut-Tometal-Activity-6.jpeg');\"\n                    ><\/div>\n\n                    <div\n                        class=\"tp-photo tp-photo-4\"\n                        style=\"--tp-image: url('http:\/\/net-temporaire.institut-tometal.com\/wp-content\/uploads\/2026\/08\/Institut-Tometal-Activity-4.jpeg');\"\n                    ><\/div>\n\n                    <div\n                        class=\"tp-photo tp-photo-5\"\n                        style=\"--tp-image: url('http:\/\/net-temporaire.institut-tometal.com\/wp-content\/uploads\/2026\/08\/Institut-Tometal-Activity-3.jpeg');\"\n                    ><\/div>\n\n                    <div class=\"tp-center-shield\">\n\n                        <div class=\"tp-student-icon\">\n\n                            <svg viewBox=\"0 0 64 64\" aria-hidden=\"true\">\n                                <circle cx=\"32\" cy=\"14\" r=\"7\"><\/circle>\n                                <path d=\"M18 46c1-13 6-21 14-21s13 8 14 21\"><\/path>\n                                <path d=\"M12 52h40\"><\/path>\n                            <\/svg>\n\n                        <\/div>\n\n                        <h3>\n                            L\u2019\u00e9l\u00e8ve<br>\n                            au c\u0153ur<br>\n                            du projet\n                        <\/h3>\n\n                        <span><\/span>\n\n                        <p>\n                            Notre ambition : former des jeunes \u00e9panouis,\n                            cultiv\u00e9s, plurilingues, autonomes et responsables,\n                            capables de r\u00e9ussir leurs \u00e9tudes et de contribuer\n                            positivement \u00e0 la soci\u00e9t\u00e9.\n                        <\/p>\n\n                    <\/div>\n\n                <\/div>\n\n            <\/div>\n\n            <!-- =================================================\n            LIGNES DE CONNEXION \u2014 DESKTOP\n            ================================================== -->\n\n            <svg\n                class=\"tp-connections\"\n                viewBox=\"0 0 1400 930\"\n                preserveAspectRatio=\"none\"\n                aria-hidden=\"true\"\n            >\n\n                <path class=\"tp-line tp-line-gold\" d=\"M700 170 L700 285\"><\/path>\n                <circle class=\"tp-dot tp-dot-gold\" cx=\"700\" cy=\"285\" r=\"8\"><\/circle>\n\n                <path class=\"tp-line tp-line-purple\" d=\"M1035 395 L925 455\"><\/path>\n                <circle class=\"tp-dot tp-dot-purple\" cx=\"925\" cy=\"455\" r=\"8\"><\/circle>\n\n                <path class=\"tp-line tp-line-blue\" d=\"M1030 715 L920 650\"><\/path>\n                <circle class=\"tp-dot tp-dot-blue\" cx=\"920\" cy=\"650\" r=\"8\"><\/circle>\n\n                <path class=\"tp-line tp-line-pink\" d=\"M370 715 L480 650\"><\/path>\n                <circle class=\"tp-dot tp-dot-pink\" cx=\"480\" cy=\"650\" r=\"8\"><\/circle>\n\n                <path class=\"tp-line tp-line-teal\" d=\"M365 395 L475 455\"><\/path>\n                <circle class=\"tp-dot tp-dot-teal\" cx=\"475\" cy=\"455\" r=\"8\"><\/circle>\n\n            <\/svg>\n\n        <\/div>\n\n    <\/div>\n\n    <!-- =====================================================\n    VALEURS\n    ====================================================== -->\n\n    <div class=\"tp-values tp-container\">\n\n        <article>\n\n            <div class=\"tp-value-icon tp-value-teal\">\n\n                <svg viewBox=\"0 0 64 64\" aria-hidden=\"true\">\n                    <circle cx=\"32\" cy=\"32\" r=\"19\"><\/circle>\n                    <circle cx=\"32\" cy=\"32\" r=\"10\"><\/circle>\n                    <circle cx=\"32\" cy=\"32\" r=\"3\"><\/circle>\n                    <path d=\"M32 13V5\"><\/path>\n                    <path d=\"m32 20 12-12\"><\/path>\n                <\/svg>\n\n            <\/div>\n\n            <div>\n                <h3>Excellence<\/h3>\n                <p>Rechercher le meilleur pour se d\u00e9passer chaque jour.<\/p>\n            <\/div>\n\n        <\/article>\n\n        <article>\n\n            <div class=\"tp-value-icon tp-value-pink\">\n\n                <svg viewBox=\"0 0 64 64\" aria-hidden=\"true\">\n                    <path d=\"M8 41c11 0 13 8 23 8 7 0 12-3 18-9\"><\/path>\n                    <path d=\"M8 35h18c5 0 8 4 8 8\"><\/path>\n                    <path d=\"M43 13c-6-7-16 0-10 8l10 10 10-10c6-8-4-15-10-8Z\"><\/path>\n                <\/svg>\n\n            <\/div>\n\n            <div>\n                <h3>Bienveillance<\/h3>\n                <p>Respecter, \u00e9couter et accompagner chacun.<\/p>\n            <\/div>\n\n        <\/article>\n\n        <article>\n\n            <div class=\"tp-value-icon tp-value-purple\">\n\n                <svg viewBox=\"0 0 64 64\" aria-hidden=\"true\">\n                    <circle cx=\"20\" cy=\"20\" r=\"6\"><\/circle>\n                    <circle cx=\"44\" cy=\"20\" r=\"6\"><\/circle>\n                    <circle cx=\"32\" cy=\"17\" r=\"7\"><\/circle>\n                    <path d=\"M8 50c1-11 5-17 12-17\"><\/path>\n                    <path d=\"M56 50c-1-11-5-17-12-17\"><\/path>\n                    <path d=\"M18 52c1-15 6-23 14-23s13 8 14 23\"><\/path>\n                <\/svg>\n\n            <\/div>\n\n            <div>\n                <h3>Ouverture<\/h3>\n                <p>S\u2019ouvrir aux autres, aux cultures et au monde.<\/p>\n            <\/div>\n\n        <\/article>\n\n        <article>\n\n            <div class=\"tp-value-icon tp-value-blue\">\n\n                <svg viewBox=\"0 0 64 64\" aria-hidden=\"true\">\n                    <path d=\"M22 42c-5-3-8-9-8-15a18 18 0 1 1 36 0c0 6-3 12-8 15\"><\/path>\n                    <path d=\"M24 47h16\"><\/path>\n                    <path d=\"M27 53h10\"><\/path>\n                    <path d=\"M32 3v7\"><\/path>\n                <\/svg>\n\n            <\/div>\n\n            <div>\n                <h3>Innovation<\/h3>\n                <p>Innover, exp\u00e9rimenter et faire \u00e9voluer nos pratiques.<\/p>\n            <\/div>\n\n        <\/article>\n\n        <article>\n\n            <div class=\"tp-value-icon tp-value-gold\">\n\n                <svg viewBox=\"0 0 64 64\" aria-hidden=\"true\">\n                    <path d=\"M32 6 52 14v16c0 13-8 22-20 28C20 52 12 43 12 30V14L32 6Z\"><\/path>\n                    <circle cx=\"32\" cy=\"27\" r=\"7\"><\/circle>\n                    <path d=\"M23 43c2-6 5-9 9-9s7 3 9 9\"><\/path>\n                <\/svg>\n\n            <\/div>\n\n            <div>\n                <h3>Int\u00e9grit\u00e9<\/h3>\n                <p>Agir avec honn\u00eatet\u00e9, responsabilit\u00e9 et \u00e9thique.<\/p>\n            <\/div>\n\n        <\/article>\n\n    <\/div>\n\n    <!-- =====================================================\n    FEUILLE DE ROUTE\n    ====================================================== -->\n\n    <div class=\"tp-roadmap-section\">\n\n        <div class=\"tp-container\">\n\n            <div class=\"tp-roadmap-title\">\n\n                <span><\/span>\n\n                <h2>\n                    Notre feuille de route 2026\u20132030\n                <\/h2>\n\n                <span><\/span>\n\n            <\/div>\n\n            <div class=\"tp-roadmap\">\n\n                <div class=\"tp-roadmap-line\" aria-hidden=\"true\"><\/div>\n\n                <article class=\"tp-roadmap-item tp-roadmap-teal\">\n\n                    <div class=\"tp-roadmap-icon\">\n\n                        <svg viewBox=\"0 0 64 64\" aria-hidden=\"true\">\n                            <path d=\"M11 52V24l21-12 21 12v28\"><\/path>\n                            <path d=\"M20 52V33h24v19\"><\/path>\n                            <path d=\"M25 40h14\"><\/path>\n                            <path d=\"M32 33v19\"><\/path>\n                        <\/svg>\n\n                    <\/div>\n\n                    <span class=\"tp-year\">2026<\/span>\n\n                    <h3>\n                        Consolider<br>nos fondamentaux\n                    <\/h3>\n\n                    <p>\n                        Renforcer la qualit\u00e9 p\u00e9dagogique et le suivi personnalis\u00e9.\n                    <\/p>\n\n                <\/article>\n\n                <article class=\"tp-roadmap-item tp-roadmap-pink\">\n\n                    <div class=\"tp-roadmap-icon\">\n\n                        <svg viewBox=\"0 0 64 64\" aria-hidden=\"true\">\n                            <path d=\"M8 16c10-4 18-3 24 4v33c-6-7-14-8-24-4V16Z\"><\/path>\n                            <path d=\"M56 16c-10-4-18-3-24 4v33c6-7 14-8 24-4V16Z\"><\/path>\n                        <\/svg>\n\n                    <\/div>\n\n                    <span class=\"tp-year\">2027<\/span>\n\n                    <h3>\n                        Enrichir<br>nos parcours\n                    <\/h3>\n\n                    <p>\n                        \u00c9largir notre offre \u00e9ducative et proposer de nouveaux parcours.\n                    <\/p>\n\n                <\/article>\n\n                <article class=\"tp-roadmap-item tp-roadmap-purple\">\n\n                    <div class=\"tp-roadmap-icon\">\n\n                        <svg viewBox=\"0 0 64 64\" aria-hidden=\"true\">\n                            <path d=\"M7 26 20 15l13 10 11-9 13 10\"><\/path>\n                            <path d=\"M7 27 21 45c4 5 9 5 13 1l4-4\"><\/path>\n                            <path d=\"M57 27 44 44c-4 5-9 4-13 0l-5-5\"><\/path>\n                        <\/svg>\n\n                    <\/div>\n\n                    <span class=\"tp-year\">2028<\/span>\n\n                    <h3>\n                        D\u00e9velopper<br>nos partenariats\n                    <\/h3>\n\n                    <p>\n                        Renforcer nos partenariats internationaux et locaux.\n                    <\/p>\n\n                <\/article>\n\n                <article class=\"tp-roadmap-item tp-roadmap-blue\">\n\n                    <div class=\"tp-roadmap-icon\">\n\n                        <svg viewBox=\"0 0 64 64\" aria-hidden=\"true\">\n                            <circle cx=\"32\" cy=\"32\" r=\"23\"><\/circle>\n                            <path d=\"M9 32h46\"><\/path>\n                            <path d=\"M32 9c8 7 13 15 13 23S40 48 32 55\"><\/path>\n                            <path d=\"M32 9c-8 7-13 15-13 23s5 16 13 23\"><\/path>\n                        <\/svg>\n\n                    <\/div>\n\n                    <span class=\"tp-year\">2029<\/span>\n\n                    <h3>\n                        Rayonner<br>\u00e0 l\u2019international\n                    <\/h3>\n\n                    <p>\n                        Multiplier les projets internationaux et les \u00e9changes culturels.\n                    <\/p>\n\n                <\/article>\n\n                <article class=\"tp-roadmap-item tp-roadmap-gold\">\n\n                    <div class=\"tp-roadmap-icon\">\n\n                        <svg viewBox=\"0 0 64 64\" aria-hidden=\"true\">\n                            <path d=\"M20 10h24v10c0 10-5 17-12 17s-12-7-12-17V10Z\"><\/path>\n                            <path d=\"M20 15H9c0 12 5 18 14 18\"><\/path>\n                            <path d=\"M44 15h11c0 12-5 18-14 18\"><\/path>\n                            <path d=\"M32 37v10\"><\/path>\n                            <path d=\"M21 54h22\"><\/path>\n                        <\/svg>\n\n                    <\/div>\n\n                    <span class=\"tp-year\">2030<\/span>\n\n                    <h3>\n                        Devenir une r\u00e9f\u00e9rence<br>\u00e9ducative\n                    <\/h3>\n\n                    <p>\n                        Atteindre l\u2019homologation et \u00eatre reconnu pour la qualit\u00e9 et l\u2019innovation.\n                    <\/p>\n\n                <\/article>\n\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n\n    <!-- =====================================================\n    TRANSITION\n    ====================================================== -->\n\n    <div class=\"tp-next\">\n\n        <div class=\"tp-container tp-next-inner\">\n\n            <div>\n                <span>Prochaine section<\/span>\n\n                <h2>\n                    Suivi personnalis\u00e9\n                <\/h2>\n            <\/div>\n\n            <a href=\"#suivi-personnalise\">\n                D\u00e9couvrir le suivi\n                <strong aria-hidden=\"true\">\u2192<\/strong>\n            <\/a>\n\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n<style>\n\/* =========================================================\nBASE\n========================================================= *\/\n\n.tometal-project {\n    --tp-navy: #0B1F4D;\n    --tp-navy-deep: #071735;\n    --tp-gold: #C79A3B;\n    --tp-gold-soft: #E6C568;\n    --tp-purple: #714798;\n    --tp-blue: #2977BA;\n    --tp-pink: #DE4F78;\n    --tp-teal: #087D89;\n    --tp-white: #FFFFFF;\n    --tp-ivory: #FBFAF7;\n    --tp-soft: #F6F5F2;\n    --tp-text: #17223B;\n    --tp-muted: #647087;\n    --tp-border: #DDDCD7;\n\n    width: 100%;\n    overflow: hidden;\n    background: var(--tp-white);\n    color: var(--tp-text);\n    font-family: \"Montserrat\", \"Segoe UI\", Arial, sans-serif;\n    scroll-margin-top: 110px;\n}\n\n.tometal-project *,\n.tometal-project *::before,\n.tometal-project *::after {\n    box-sizing: border-box;\n}\n\n.tometal-project h2,\n.tometal-project h3,\n.tometal-project p,\n.tometal-project ul {\n    margin-top: 0;\n}\n\n.tometal-project a {\n    text-decoration: none;\n}\n\n.tp-container {\n    width: min(1400px, calc(100% - 80px));\n    margin-inline: auto;\n}\n\n\/* =========================================================\nEN-T\u00caTE\n========================================================= *\/\n\n.tp-header {\n    position: relative;\n    padding: 95px 0 45px;\n    text-align: center;\n}\n\n.tp-header::before,\n.tp-header::after {\n    content: \"\";\n    position: absolute;\n    width: 170px;\n    height: 170px;\n    border: 1px solid rgba(199, 154, 59, 0.18);\n    border-radius: 50%;\n}\n\n.tp-header::before {\n    top: -90px;\n    left: -110px;\n}\n\n.tp-header::after {\n    top: 15px;\n    right: -115px;\n}\n\n.tp-section-label {\n    display: block;\n    margin-bottom: 12px;\n    color: var(--tp-gold);\n    font-size: 10px;\n    font-weight: 800;\n    letter-spacing: 2.3px;\n    text-transform: uppercase;\n}\n\n.tp-header h2 {\n    margin-bottom: 8px;\n    color: var(--tp-navy);\n    font-size: clamp(39px, 4.5vw, 65px);\n    font-weight: 800;\n    line-height: 1.05;\n    letter-spacing: -1.8px;\n    text-transform: uppercase;\n}\n\n.tp-subtitle {\n    margin-bottom: 23px;\n    color: var(--tp-gold);\n    font-family: Georgia, \"Times New Roman\", serif;\n    font-size: clamp(17px, 1.7vw, 24px);\n    font-weight: 500;\n}\n\n.tp-intro {\n    max-width: 730px;\n    margin: 0 auto;\n    color: var(--tp-muted);\n    font-size: 13px;\n    line-height: 1.8;\n}\n\n.tp-intro strong {\n    color: var(--tp-navy);\n}\n\n\/* =========================================================\nINFOGRAPHIE\n========================================================= *\/\n\n.tp-map-wrap {\n    padding: 25px 0 65px;\n    background:\n        radial-gradient(circle at 50% 48%, rgba(199,154,59,.045), transparent 30%),\n        var(--tp-white);\n}\n\n.tp-map {\n    position: relative;\n    min-height: 930px;\n}\n\n.tp-decoration {\n    position: absolute;\n    border: 1px solid rgba(199,154,59,.12);\n    border-radius: 50%;\n}\n\n.tp-decoration-a {\n    top: 5%;\n    left: -9%;\n    width: 190px;\n    height: 190px;\n}\n\n.tp-decoration-b {\n    right: -8%;\n    top: 20%;\n    width: 170px;\n    height: 170px;\n}\n\n.tp-decoration-c {\n    left: 4%;\n    bottom: 8%;\n    width: 130px;\n    height: 130px;\n}\n\n\/* Cartes *\/\n\n.tp-pillar {\n    position: absolute;\n    z-index: 5;\n    width: 295px;\n    min-height: 270px;\n    padding: 49px 27px 26px;\n    border: 1px solid rgba(11,31,77,.1);\n    border-radius: 18px;\n    background: rgba(255,255,255,.98);\n    box-shadow: 0 15px 40px rgba(11,31,77,.1);\n    transition:\n        transform .35s ease,\n        box-shadow .35s ease;\n}\n\n.tp-pillar:hover {\n    transform: translateY(-7px);\n    box-shadow: 0 23px 55px rgba(11,31,77,.16);\n}\n\n.tp-pillar-1 {\n    top: 0;\n    left: 50%;\n    transform: translateX(-50%);\n    min-height: 235px;\n}\n\n.tp-pillar-1:hover {\n    transform: translateX(-50%) translateY(-7px);\n}\n\n.tp-pillar-2 {\n    top: 270px;\n    right: 0;\n}\n\n.tp-pillar-3 {\n    right: 35px;\n    bottom: 25px;\n}\n\n.tp-pillar-4 {\n    left: 35px;\n    bottom: 25px;\n}\n\n.tp-pillar-5 {\n    top: 270px;\n    left: 0;\n}\n\n.tp-pillar-badge {\n    position: absolute;\n    top: -13px;\n    left: -13px;\n    min-width: 43px;\n    height: 30px;\n    display: grid;\n    place-items: center;\n    padding: 0 10px;\n    border-radius: 8px;\n    background: var(--tp-navy);\n    color: var(--tp-white);\n    font-size: 11px;\n    font-weight: 800;\n}\n\n.tp-pillar-2 .tp-pillar-badge {\n    background: var(--tp-purple);\n}\n\n.tp-pillar-3 .tp-pillar-badge {\n    background: var(--tp-blue);\n}\n\n.tp-pillar-4 .tp-pillar-badge {\n    background: var(--tp-pink);\n}\n\n.tp-pillar-5 .tp-pillar-badge {\n    background: var(--tp-teal);\n}\n\n.tp-icon {\n    position: absolute;\n    top: -38px;\n    left: 50%;\n    width: 76px;\n    height: 76px;\n    display: grid;\n    place-items: center;\n    padding: 16px;\n    border: 5px solid var(--tp-white);\n    border-radius: 50%;\n    background: var(--tp-navy);\n    box-shadow: 0 7px 20px rgba(11,31,77,.2);\n    transform: translateX(-50%);\n}\n\n.tp-icon svg {\n    width: 100%;\n    height: 100%;\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 2.4;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n.tp-icon-gold {\n    color: var(--tp-gold-soft);\n}\n\n.tp-icon-purple {\n    background: var(--tp-purple);\n    color: var(--tp-gold-soft);\n}\n\n.tp-icon-blue {\n    background: var(--tp-blue);\n    color: var(--tp-gold-soft);\n}\n\n.tp-icon-pink {\n    background: var(--tp-pink);\n    color: var(--tp-gold-soft);\n}\n\n.tp-icon-teal {\n    background: var(--tp-teal);\n    color: var(--tp-gold-soft);\n}\n\n.tp-pillar h3 {\n    margin-bottom: 5px;\n    color: var(--tp-navy);\n    font-size: 13px;\n    font-weight: 800;\n    line-height: 1.28;\n    text-align: center;\n    text-transform: uppercase;\n}\n\n.tp-pillar-tagline {\n    display: block;\n    max-width: 210px;\n    margin: 0 auto 18px;\n    font-size: 10px;\n    font-weight: 700;\n    line-height: 1.35;\n    text-align: center;\n}\n\n.tp-gold-text {\n    color: var(--tp-gold);\n}\n\n.tp-purple-text {\n    color: var(--tp-purple);\n}\n\n.tp-blue-text {\n    color: var(--tp-blue);\n}\n\n.tp-pink-text {\n    color: var(--tp-pink);\n}\n\n.tp-teal-text {\n    color: var(--tp-teal);\n}\n\n.tp-pillar ul {\n    margin-bottom: 0;\n    padding-left: 17px;\n    color: var(--tp-text);\n    font-size: 9.5px;\n    line-height: 1.6;\n}\n\n.tp-pillar li {\n    padding-left: 2px;\n}\n\n.tp-pillar-1 li::marker {\n    color: var(--tp-gold);\n}\n\n.tp-pillar-2 li::marker {\n    color: var(--tp-purple);\n}\n\n.tp-pillar-3 li::marker {\n    color: var(--tp-blue);\n}\n\n.tp-pillar-4 li::marker {\n    color: var(--tp-pink);\n}\n\n.tp-pillar-5 li::marker {\n    color: var(--tp-teal);\n}\n\n\/* Cercle central *\/\n\n.tp-center {\n    position: absolute;\n    z-index: 4;\n    top: 255px;\n    left: 50%;\n    width: 580px;\n    height: 580px;\n    transform: translateX(-50%);\n}\n\n.tp-orbit {\n    position: absolute;\n    border-radius: 50%;\n    pointer-events: none;\n}\n\n.tp-orbit-one {\n    inset: -18px;\n    border: 1px solid rgba(199,154,59,.7);\n}\n\n.tp-orbit-two {\n    inset: -31px;\n    border: 1px dashed rgba(11,31,77,.17);\n}\n\n.tp-photo-wheel {\n    position: relative;\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n    border: 8px solid var(--tp-white);\n    border-radius: 50%;\n    background: var(--tp-navy);\n    box-shadow: 0 20px 60px rgba(11,31,77,.2);\n}\n\n.tp-photo {\n    position: absolute;\n    overflow: hidden;\n    background-image: var(--tp-image);\n    background-repeat: no-repeat;\n    background-size: cover;\n    background-position: center center;\n    filter: saturate(.96) contrast(1.02);\n    transition:\n        transform .6s ease,\n        filter .6s ease;\n}\n\n.tp-photo-wheel:hover .tp-photo {\n    transform: scale(1.035);\n    filter: saturate(1.04) contrast(1.04);\n}\n\n\/* Cadrage individuel des cinq photos officielles *\/\n\n.tp-photo-1 {\n    top: 0;\n    left: 25%;\n    width: 50%;\n    height: 34%;\n    clip-path: polygon(0 0,100% 0,88% 100%,12% 100%);\n    background-position: center 35%;\n}\n\n.tp-photo-2 {\n    top: 7%;\n    right: 0;\n    width: 39%;\n    height: 43%;\n    clip-path: polygon(25% 0,100% 18%,100% 100%,0 85%);\n    background-position: 55% center;\n}\n\n.tp-photo-3 {\n    right: 0;\n    bottom: 0;\n    width: 48%;\n    height: 52%;\n    clip-path: polygon(0 8%,100% 0,100% 100%,22% 100%);\n    background-position: center center;\n}\n\n.tp-photo-4 {\n    bottom: 0;\n    left: 0;\n    width: 52%;\n    height: 49%;\n    clip-path: polygon(0 0,100% 12%,77% 100%,0 100%);\n    background-position: center center;\n}\n\n.tp-photo-5 {\n    top: 7%;\n    left: 0;\n    width: 39%;\n    height: 47%;\n    clip-path: polygon(0 15%,75% 0,100% 100%,0 88%);\n    background-position: 45% center;\n}\n\n.tp-center-shield {\n    position: absolute;\n    z-index: 8;\n    top: 50%;\n    left: 50%;\n    width: 270px;\n    min-height: 315px;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 33px 28px;\n    clip-path: polygon(15% 0,85% 0,100% 19%,100% 81%,85% 100%,15% 100%,0 81%,0 19%);\n    background: var(--tp-navy);\n    color: var(--tp-white);\n    text-align: center;\n    transform: translate(-50%,-50%);\n    box-shadow: 0 18px 45px rgba(0,0,0,.24);\n}\n\n.tp-student-icon {\n    width: 46px;\n    height: 46px;\n    margin-bottom: 10px;\n    color: var(--tp-gold-soft);\n}\n\n.tp-student-icon svg {\n    width: 100%;\n    height: 100%;\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 2;\n    stroke-linecap: round;\n}\n\n.tp-center-shield h3 {\n    margin-bottom: 13px;\n    color: var(--tp-white);\n    font-family: Georgia, \"Times New Roman\", serif;\n    font-size: 29px;\n    font-weight: 500;\n    line-height: 1.03;\n    text-transform: uppercase;\n}\n\n.tp-center-shield > span {\n    width: 54px;\n    height: 2px;\n    margin-bottom: 14px;\n    background: var(--tp-gold);\n}\n\n.tp-center-shield p {\n    margin-bottom: 0;\n    color: rgba(255,255,255,.82);\n    font-size: 9px;\n    line-height: 1.55;\n}\n\n\/* Connexions *\/\n\n.tp-connections {\n    position: absolute;\n    z-index: 2;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    pointer-events: none;\n}\n\n.tp-line {\n    fill: none;\n    stroke-width: 2;\n}\n\n.tp-dot {\n    fill: var(--tp-white);\n    stroke-width: 4;\n}\n\n.tp-line-gold,\n.tp-dot-gold {\n    stroke: var(--tp-gold);\n}\n\n.tp-line-purple,\n.tp-dot-purple {\n    stroke: var(--tp-purple);\n}\n\n.tp-line-blue,\n.tp-dot-blue {\n    stroke: var(--tp-blue);\n}\n\n.tp-line-pink,\n.tp-dot-pink {\n    stroke: var(--tp-pink);\n}\n\n.tp-line-teal,\n.tp-dot-teal {\n    stroke: var(--tp-teal);\n}\n\n\/* =========================================================\nVALEURS\n========================================================= *\/\n\n.tp-values {\n    display: grid;\n    grid-template-columns: repeat(5,1fr);\n    overflow: hidden;\n    margin-bottom: 55px;\n    border: 1px solid rgba(199,154,59,.28);\n    border-radius: 18px;\n    background: var(--tp-white);\n    box-shadow: 0 13px 38px rgba(11,31,77,.07);\n}\n\n.tp-values article {\n    min-height: 125px;\n    display: grid;\n    grid-template-columns: 58px 1fr;\n    align-items: center;\n    gap: 14px;\n    padding: 23px 19px;\n    border-right: 1px solid var(--tp-border);\n}\n\n.tp-values article:last-child {\n    border-right: none;\n}\n\n.tp-value-icon {\n    width: 54px;\n    height: 54px;\n}\n\n.tp-value-icon svg {\n    width: 100%;\n    height: 100%;\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 2.4;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n.tp-value-teal {\n    color: var(--tp-teal);\n}\n\n.tp-value-pink {\n    color: var(--tp-pink);\n}\n\n.tp-value-purple {\n    color: var(--tp-purple);\n}\n\n.tp-value-blue {\n    color: var(--tp-blue);\n}\n\n.tp-value-gold {\n    color: var(--tp-gold);\n}\n\n.tp-values h3 {\n    margin-bottom: 6px;\n    color: var(--tp-navy);\n    font-size: 9px;\n    font-weight: 800;\n    text-transform: uppercase;\n}\n\n.tp-values p {\n    margin-bottom: 0;\n    color: var(--tp-muted);\n    font-size: 8.5px;\n    line-height: 1.55;\n}\n\n\/* =========================================================\nFEUILLE DE ROUTE\n========================================================= *\/\n\n.tp-roadmap-section {\n    padding: 15px 0 85px;\n    background: var(--tp-white);\n}\n\n.tp-roadmap-title {\n    display: grid;\n    grid-template-columns: 1fr auto 1fr;\n    align-items: center;\n    gap: 25px;\n    margin-bottom: 35px;\n}\n\n.tp-roadmap-title span {\n    height: 1px;\n    background: linear-gradient(to right,transparent,var(--tp-gold));\n}\n\n.tp-roadmap-title span:last-child {\n    background: linear-gradient(to left,transparent,var(--tp-gold));\n}\n\n.tp-roadmap-title h2 {\n    margin-bottom: 0;\n    color: var(--tp-navy);\n    font-size: 15px;\n    font-weight: 800;\n    letter-spacing: .5px;\n    text-align: center;\n    text-transform: uppercase;\n}\n\n.tp-roadmap {\n    position: relative;\n    display: grid;\n    grid-template-columns: repeat(5,1fr);\n    border: 1px solid rgba(199,154,59,.27);\n    border-radius: 18px;\n    background: var(--tp-white);\n}\n\n.tp-roadmap-line {\n    position: absolute;\n    z-index: 1;\n    top: 54px;\n    left: 9%;\n    right: 9%;\n    height: 2px;\n    background: var(--tp-gold);\n}\n\n.tp-roadmap-item {\n    position: relative;\n    z-index: 2;\n    min-height: 305px;\n    padding: 25px 23px 28px;\n    border-right: 1px solid var(--tp-border);\n    text-align: center;\n}\n\n.tp-roadmap-item:last-child {\n    border-right: none;\n}\n\n.tp-roadmap-icon {\n    width: 68px;\n    height: 68px;\n    display: grid;\n    place-items: center;\n    margin: 0 auto 17px;\n    padding: 16px;\n    border: 6px solid var(--tp-white);\n    border-radius: 50%;\n    color: var(--tp-white);\n    box-shadow: 0 7px 18px rgba(11,31,77,.16);\n}\n\n.tp-roadmap-icon svg {\n    width: 100%;\n    height: 100%;\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 2.3;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n.tp-roadmap-teal .tp-roadmap-icon {\n    background: var(--tp-teal);\n}\n\n.tp-roadmap-pink .tp-roadmap-icon {\n    background: var(--tp-pink);\n}\n\n.tp-roadmap-purple .tp-roadmap-icon {\n    background: var(--tp-purple);\n}\n\n.tp-roadmap-blue .tp-roadmap-icon {\n    background: var(--tp-blue);\n}\n\n.tp-roadmap-gold .tp-roadmap-icon {\n    background: var(--tp-gold);\n}\n\n.tp-year {\n    display: block;\n    margin-bottom: 11px;\n    font-family: Georgia, \"Times New Roman\", serif;\n    font-size: 22px;\n    font-weight: 700;\n}\n\n.tp-roadmap-teal .tp-year {\n    color: var(--tp-teal);\n}\n\n.tp-roadmap-pink .tp-year {\n    color: var(--tp-pink);\n}\n\n.tp-roadmap-purple .tp-year {\n    color: var(--tp-purple);\n}\n\n.tp-roadmap-blue .tp-year {\n    color: var(--tp-blue);\n}\n\n.tp-roadmap-gold .tp-year {\n    color: var(--tp-gold);\n}\n\n.tp-roadmap-item h3 {\n    margin-bottom: 10px;\n    color: var(--tp-navy);\n    font-size: 11px;\n    font-weight: 800;\n    line-height: 1.45;\n}\n\n.tp-roadmap-item p {\n    margin-bottom: 0;\n    color: var(--tp-muted);\n    font-size: 9px;\n    line-height: 1.65;\n}\n\n\/* =========================================================\nTRANSITION\n========================================================= *\/\n\n.tp-next {\n    padding: 55px 0;\n    background: var(--tp-navy);\n}\n\n.tp-next-inner {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 40px;\n}\n\n.tp-next span {\n    display: block;\n    margin-bottom: 8px;\n    color: var(--tp-gold);\n    font-size: 9px;\n    font-weight: 800;\n    letter-spacing: 2px;\n    text-transform: uppercase;\n}\n\n.tp-next h2 {\n    margin-bottom: 0;\n    color: var(--tp-white);\n    font-family: Georgia, \"Times New Roman\", serif;\n    font-size: clamp(31px,3vw,44px);\n    font-weight: 400;\n}\n\n.tp-next a {\n    min-width: 225px;\n    min-height: 58px;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 25px;\n    padding: 15px 20px;\n    border: 1px solid rgba(255,255,255,.45);\n    color: var(--tp-white);\n    font-size: 10px;\n    font-weight: 800;\n    letter-spacing: .7px;\n    text-transform: uppercase;\n    transition:\n        background-color .3s ease,\n        color .3s ease,\n        border-color .3s ease;\n}\n\n.tp-next a:hover {\n    border-color: var(--tp-gold);\n    background: var(--tp-gold);\n    color: var(--tp-navy);\n}\n\n.tp-next a strong {\n    font-size: 20px;\n    font-weight: 400;\n}\n\n\/* =========================================================\nTABLETTE\n========================================================= *\/\n\n@media (max-width: 1180px) {\n\n    .tp-container {\n        width: min(100% - 50px,950px);\n    }\n\n    .tp-map {\n        min-height: auto;\n        display: grid;\n        grid-template-columns: repeat(2,1fr);\n        gap: 35px;\n    }\n\n    .tp-pillar,\n    .tp-pillar-1,\n    .tp-pillar-2,\n    .tp-pillar-3,\n    .tp-pillar-4,\n    .tp-pillar-5 {\n        position: relative;\n        inset: auto;\n        width: 100%;\n        min-height: 285px;\n        transform: none;\n    }\n\n    .tp-pillar:hover,\n    .tp-pillar-1:hover {\n        transform: translateY(-6px);\n    }\n\n    .tp-pillar-1 {\n        grid-column: 1 \/ -1;\n        width: calc(50% - 18px);\n        margin: 0 auto;\n    }\n\n    .tp-center {\n        position: relative;\n        top: auto;\n        left: auto;\n        grid-column: 1 \/ -1;\n        grid-row: 2;\n        margin: 30px auto 15px;\n        transform: none;\n    }\n\n    .tp-pillar-5 {\n        grid-column: 1;\n        grid-row: 3;\n    }\n\n    .tp-pillar-2 {\n        grid-column: 2;\n        grid-row: 3;\n    }\n\n    .tp-pillar-4 {\n        grid-column: 1;\n        grid-row: 4;\n    }\n\n    .tp-pillar-3 {\n        grid-column: 2;\n        grid-row: 4;\n    }\n\n    .tp-connections,\n    .tp-decoration {\n        display: none;\n    }\n\n    .tp-values {\n        grid-template-columns: repeat(2,1fr);\n    }\n\n    .tp-values article {\n        border-bottom: 1px solid var(--tp-border);\n    }\n\n    .tp-values article:nth-child(2n) {\n        border-right: none;\n    }\n\n    .tp-values article:last-child {\n        grid-column: 1 \/ -1;\n        width: 50%;\n        margin: 0 auto;\n        border-bottom: none;\n    }\n\n    .tp-roadmap {\n        grid-template-columns: repeat(2,1fr);\n    }\n\n    .tp-roadmap-line {\n        display: none;\n    }\n\n    .tp-roadmap-item {\n        border-bottom: 1px solid var(--tp-border);\n    }\n\n    .tp-roadmap-item:nth-child(2n) {\n        border-right: none;\n    }\n\n    .tp-roadmap-item:last-child {\n        grid-column: 1 \/ -1;\n        width: 50%;\n        margin: 0 auto;\n        border-bottom: none;\n    }\n}\n\n\/* =========================================================\nMOBILE\n========================================================= *\/\n\n@media (max-width: 767px) {\n\n    .tp-container {\n        width: calc(100% - 32px);\n    }\n\n    .tp-header {\n        padding: 70px 0 35px;\n    }\n\n    .tp-header h2 {\n        font-size: 35px;\n        line-height: 1.08;\n        letter-spacing: -1px;\n    }\n\n    .tp-subtitle {\n        font-size: 17px;\n        line-height: 1.45;\n    }\n\n    .tp-intro {\n        font-size: 12px;\n    }\n\n    .tp-map {\n        grid-template-columns: 1fr;\n        gap: 52px;\n    }\n\n    .tp-pillar,\n    .tp-pillar-1,\n    .tp-pillar-2,\n    .tp-pillar-3,\n    .tp-pillar-4,\n    .tp-pillar-5 {\n        grid-column: auto;\n        grid-row: auto;\n        width: 100%;\n        min-height: auto;\n        padding: 52px 24px 28px;\n    }\n\n    .tp-center {\n        grid-column: auto;\n        grid-row: 2;\n        width: min(100%,390px);\n        height: min(calc(100vw - 32px),390px);\n        margin: 15px auto;\n    }\n\n    .tp-center-shield {\n        width: 195px;\n        min-height: 230px;\n        padding: 23px 20px;\n    }\n\n    .tp-center-shield h3 {\n        font-size: 21px;\n    }\n\n    .tp-center-shield p {\n        font-size: 7px;\n    }\n\n    .tp-student-icon {\n        width: 34px;\n        height: 34px;\n    }\n\n    .tp-pillar-1 {\n        grid-row: 1;\n    }\n\n    .tp-pillar-5 {\n        grid-row: 3;\n    }\n\n    .tp-pillar-2 {\n        grid-row: 4;\n    }\n\n    .tp-pillar-4 {\n        grid-row: 5;\n    }\n\n    .tp-pillar-3 {\n        grid-row: 6;\n    }\n\n    .tp-values {\n        grid-template-columns: 1fr;\n        margin-top: 25px;\n    }\n\n    .tp-values article,\n    .tp-values article:nth-child(2n),\n    .tp-values article:last-child {\n        width: 100%;\n        grid-column: auto;\n        border-right: none;\n        border-bottom: 1px solid var(--tp-border);\n    }\n\n    .tp-values article:last-child {\n        border-bottom: none;\n    }\n\n    .tp-roadmap-title {\n        grid-template-columns: 1fr;\n    }\n\n    .tp-roadmap-title span {\n        display: none;\n    }\n\n    .tp-roadmap-title h2 {\n        font-size: 14px;\n    }\n\n    .tp-roadmap {\n        grid-template-columns: 1fr;\n    }\n\n    .tp-roadmap-item,\n    .tp-roadmap-item:nth-child(2n),\n    .tp-roadmap-item:last-child {\n        width: 100%;\n        min-height: auto;\n        grid-column: auto;\n        margin: 0;\n        border-right: none;\n        border-bottom: 1px solid var(--tp-border);\n    }\n\n    .tp-roadmap-item:last-child {\n        border-bottom: none;\n    }\n\n    .tp-next-inner {\n        align-items: flex-start;\n        flex-direction: column;\n    }\n\n    .tp-next a {\n        width: 100%;\n    }\n}\n\n\/* =========================================================\nACCESSIBILIT\u00c9\n========================================================= *\/\n\n@media (prefers-reduced-motion: reduce) {\n\n    .tp-pillar,\n    .tp-photo,\n    .tp-next a {\n        transition: none !important;\n    }\n}\n<\/style>\n\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", function () {\n\n    const projectSection = document.querySelector(\".tometal-project\");\n\n    if (!projectSection) {\n        return;\n    }\n\n    const internalLinks = projectSection.querySelectorAll('a[href^=\"#\"]');\n\n    internalLinks.forEach(function (link) {\n\n        link.addEventListener(\"click\", function (event) {\n\n            const selector = link.getAttribute(\"href\");\n\n            if (!selector || selector === \"#\") {\n                return;\n            }\n\n            const target = document.querySelector(selector);\n\n            if (!target) {\n                return;\n            }\n\n            event.preventDefault();\n\n            const headerOffset = 105;\n\n            const destination =\n                target.getBoundingClientRect().top +\n                window.pageYOffset -\n                headerOffset;\n\n            window.scrollTo({\n                top: destination,\n                behavior: \"smooth\"\n            });\n\n        });\n\n    });\n\n});\n<\/script>\n<style>\n\/* =========================================================\nCONTAINER ELEMENTOR \u2014 PROJET D\u2019\u00c9TABLISSEMENT\nRESPONSIVE AUTOMATIQUE\n========================================================= *\/\n\n.projet-etablissement-container {\n    width: 100% !important;\n    max-width: none !important;\n    margin: 0 !important;\n    padding: 0 !important;\n    gap: 0 !important;\n    overflow: hidden !important;\n}\n\n.projet-etablissement-container > .e-con-inner {\n    width: 100% !important;\n    max-width: none !important;\n    margin: 0 !important;\n    padding: 0 !important;\n    gap: 0 !important;\n}\n\n\/* Emp\u00eache le widget HTML d\u2019\u00eatre limit\u00e9 par Elementor *\/\n\n.projet-etablissement-container .elementor-widget-html,\n.projet-etablissement-container .elementor-widget-container {\n    width: 100% !important;\n    max-width: none !important;\n    margin: 0 !important;\n    padding: 0 !important;\n}\n\n\/* Espacements fluides automatiques *\/\n\n.tometal-project .tp-header {\n    padding-top: clamp(70px, 7vw, 110px);\n    padding-bottom: clamp(35px, 4vw, 55px);\n}\n\n.tometal-project .tp-map-wrap {\n    padding-top: clamp(20px, 3vw, 40px);\n    padding-bottom: clamp(55px, 6vw, 90px);\n}\n\n.tometal-project .tp-roadmap-section {\n    padding-top: clamp(35px, 5vw, 70px);\n    padding-bottom: clamp(70px, 7vw, 110px);\n}\n\n.tometal-project .tp-next {\n    padding-top: clamp(45px, 5vw, 70px);\n    padding-bottom: clamp(45px, 5vw, 70px);\n}\n\n\/* Largeur int\u00e9rieure fluide *\/\n\n.tometal-project .tp-container {\n    width: min(\n        1400px,\n        calc(100% - clamp(32px, 6vw, 96px))\n    ) !important;\n    margin-left: auto !important;\n    margin-right: auto !important;\n}\n\n\/* Tablette *\/\n\n@media screen and (max-width: 1024px) {\n\n    .tometal-project .tp-container {\n        width: calc(100% - 48px) !important;\n    }\n}\n\n\/* T\u00e9l\u00e9phone *\/\n\n@media screen and (max-width: 767px) {\n\n    .tometal-project .tp-container {\n        width: calc(100% - 32px) !important;\n    }\n\n    .tometal-project .tp-header {\n        padding-top: 70px;\n        padding-bottom: 35px;\n    }\n\n    .tometal-project .tp-roadmap-section {\n        padding-top: 55px;\n        padding-bottom: 75px;\n    }\n\n    .tometal-project .tp-next {\n        padding-top: 48px;\n        padding-bottom: 48px;\n    }\n}\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-847e1f7 e-flex e-con-boxed e-con e-child\" data-id=\"847e1f7\" data-element_type=\"container\" data-e-type=\"container\" id=\"suivi-personnalise\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4155610 elementor-widget elementor-widget-html\" data-id=\"4155610\" 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 SUIVI INDIVIDUEL\r\nVERSION CORRIG\u00c9E FULL WIDTH + PHOTO + RESPONSIVE\r\n========================================================= -->\r\n\r\n<section class=\"tm-suivi\" id=\"suivi-individuel\">\r\n\r\n<style>\r\n\r\n\/* =========================================================\r\nGLOBAL\r\n========================================================= *\/\r\n\r\n.tm-suivi{\r\n  --navy:#071D49;\r\n  --gold:#D29A2E;\r\n  --gold-light:#F2D99C;\r\n  --cream:#FBF8F1;\r\n  --white:#FFFFFF;\r\n  --text:#17233A;\r\n  --muted:#68758A;\r\n  --line:#E1E6EC;\r\n  --soft-blue:#F3F6FA;\r\n  --soft-gold:#FFF8E9;\r\n\r\n  position:relative;\r\n  left:50%;\r\n\r\n  width:100vw;\r\n  max-width:100vw;\r\n\r\n  margin-left:-50vw;\r\n\r\n  overflow:hidden;\r\n\r\n  background:#FFFFFF;\r\n  color:var(--text);\r\n\r\n  font-family:\r\n    Montserrat,\r\n    Arial,\r\n    sans-serif;\r\n}\r\n\r\n.tm-suivi,\r\n.tm-suivi *{\r\n  box-sizing:border-box;\r\n}\r\n\r\n.tm-suivi h2,\r\n.tm-suivi h3,\r\n.tm-suivi h4,\r\n.tm-suivi p{\r\n  margin-top:0;\r\n}\r\n\r\n.tm-suivi-inner{\r\n  width:calc(100% - clamp(36px,5vw,90px));\r\n  max-width:1700px;\r\n\r\n  margin-left:auto;\r\n  margin-right:auto;\r\n}\r\n\r\n\r\n\/* =========================================================\r\nANCHOR\r\n========================================================= *\/\r\n\r\n#suivi-individuel{\r\n  scroll-margin-top:110px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\nHERO\r\n========================================================= *\/\r\n\r\n.tm-suivi-hero{\r\n  position:relative;\r\n\r\n  padding:\r\n    clamp(65px,7vw,105px)\r\n    0\r\n    clamp(65px,7vw,95px);\r\n\r\n  background:\r\n    radial-gradient(\r\n      circle at 34% 30%,\r\n      rgba(210,154,46,.06),\r\n      transparent 25%\r\n    ),\r\n    linear-gradient(\r\n      180deg,\r\n      #FFFFFF,\r\n      #FDFBF7\r\n    );\r\n}\r\n\r\n\r\n.tm-suivi-hero-grid{\r\n  display:grid;\r\n\r\n  grid-template-columns:\r\n    minmax(420px,.92fr)\r\n    minmax(620px,1.08fr);\r\n\r\n  gap:clamp(45px,5vw,85px);\r\n\r\n  align-items:center;\r\n}\r\n\r\n\r\n\/* =========================================================\r\nLEFT COPY\r\n========================================================= *\/\r\n\r\n.tm-kicker{\r\n  display:flex;\r\n\r\n  align-items:center;\r\n\r\n  gap:14px;\r\n\r\n  margin-bottom:24px;\r\n\r\n  color:var(--gold);\r\n\r\n  font-size:10px;\r\n  font-weight:800;\r\n\r\n  letter-spacing:.18em;\r\n\r\n  text-transform:uppercase;\r\n}\r\n\r\n.tm-kicker::after{\r\n  content:\"\";\r\n\r\n  width:52px;\r\n  height:1px;\r\n\r\n  background:var(--gold);\r\n}\r\n\r\n\r\n.tm-suivi-title{\r\n  max-width:720px;\r\n\r\n  margin-bottom:30px;\r\n\r\n  color:var(--navy);\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(52px,5.2vw,86px);\r\n\r\n  font-weight:400;\r\n\r\n  line-height:.96;\r\n\r\n  letter-spacing:-.045em;\r\n}\r\n\r\n\r\n.tm-suivi-title em{\r\n  display:block;\r\n\r\n  margin-top:8px;\r\n\r\n  color:var(--gold);\r\n\r\n  font-weight:400;\r\n}\r\n\r\n\r\n.tm-suivi-intro{\r\n  max-width:650px;\r\n\r\n  margin-bottom:28px;\r\n\r\n  color:var(--muted);\r\n\r\n  font-size:\r\n    clamp(14px,1.15vw,18px);\r\n\r\n  line-height:1.85;\r\n}\r\n\r\n\r\n.tm-suivi-signature{\r\n  display:flex;\r\n\r\n  align-items:center;\r\n\r\n  gap:17px;\r\n\r\n  color:var(--navy);\r\n\r\n  font-size:10px;\r\n  font-weight:800;\r\n\r\n  letter-spacing:.13em;\r\n\r\n  text-transform:uppercase;\r\n}\r\n\r\n\r\n.tm-suivi-signature::before{\r\n  content:\"\";\r\n\r\n  width:65px;\r\n  height:2px;\r\n\r\n  background:var(--gold);\r\n}\r\n\r\n\r\n\/* =========================================================\r\nRIGHT IMAGE\r\n========================================================= *\/\r\n\r\n.tm-hero-visual{\r\n  position:relative;\r\n\r\n  padding-bottom:110px;\r\n\r\n  min-width:0;\r\n}\r\n\r\n\r\n.tm-photo-frame{\r\n  position:relative;\r\n\r\n  width:100%;\r\n  height:470px;\r\n\r\n  overflow:hidden;\r\n\r\n  border-radius:\r\n    4px\r\n    55px\r\n    4px\r\n    4px;\r\n\r\n  background:#E8ECF0;\r\n\r\n  box-shadow:\r\n    0 25px 65px\r\n    rgba(7,29,73,.12);\r\n}\r\n\r\n\r\n.tm-photo-frame img{\r\n  width:100%;\r\n  height:100%;\r\n\r\n  display:block;\r\n\r\n  object-fit:cover;\r\n\r\n  object-position:center 38%;\r\n}\r\n\r\n\r\n.tm-photo-frame::after{\r\n  content:\"\";\r\n\r\n  position:absolute;\r\n\r\n  inset:0;\r\n\r\n  background:\r\n    linear-gradient(\r\n      180deg,\r\n      rgba(7,29,73,0),\r\n      rgba(7,29,73,.06)\r\n    );\r\n\r\n  pointer-events:none;\r\n}\r\n\r\n\r\n\/* =========================================================\r\nFLOATING CARDS \u2014 FIXED\r\n========================================================= *\/\r\n\r\n.tm-floating-cards{\r\n  position:absolute;\r\n\r\n  left:4%;\r\n  right:0;\r\n\r\n  bottom:0;\r\n\r\n  display:grid;\r\n\r\n  grid-template-columns:\r\n    repeat(3,minmax(0,1fr));\r\n\r\n  gap:12px;\r\n\r\n  width:auto;\r\n\r\n  z-index:4;\r\n}\r\n\r\n\r\n.tm-floating-card{\r\n  min-width:0;\r\n\r\n  min-height:150px;\r\n\r\n  padding:\r\n    20px\r\n    18px;\r\n\r\n  display:grid;\r\n\r\n  grid-template-columns:\r\n    52px\r\n    minmax(0,1fr);\r\n\r\n  gap:14px;\r\n\r\n  align-items:start;\r\n\r\n  background:\r\n    rgba(255,255,255,.985);\r\n\r\n  border:\r\n    1px solid\r\n    #E4E8EC;\r\n\r\n  box-shadow:\r\n    0 12px 32px\r\n    rgba(7,29,73,.10);\r\n}\r\n\r\n\r\n.tm-floating-card:first-child{\r\n  border-radius:\r\n    18px\r\n    4px\r\n    4px\r\n    18px;\r\n}\r\n\r\n\r\n.tm-floating-card:last-child{\r\n  border-radius:\r\n    4px\r\n    18px\r\n    18px\r\n    4px;\r\n}\r\n\r\n\r\n.tm-floating-card h4{\r\n  margin:\r\n    3px 0\r\n    8px;\r\n\r\n  color:var(--navy);\r\n\r\n  font-size:\r\n    clamp(9px,.75vw,12px);\r\n\r\n  line-height:1.3;\r\n\r\n  font-weight:800;\r\n\r\n  letter-spacing:.03em;\r\n\r\n  text-transform:uppercase;\r\n\r\n  overflow-wrap:anywhere;\r\n}\r\n\r\n\r\n.tm-floating-card p{\r\n  margin:0;\r\n\r\n  color:var(--muted);\r\n\r\n  font-size:\r\n    clamp(9px,.7vw,11px);\r\n\r\n  line-height:1.55;\r\n\r\n  overflow-wrap:anywhere;\r\n}\r\n\r\n\r\n\/* =========================================================\r\nICONS\r\n========================================================= *\/\r\n\r\n.tm-icon{\r\n  width:52px;\r\n  height:52px;\r\n\r\n  display:grid;\r\n\r\n  place-items:center;\r\n\r\n  border-radius:50%;\r\n\r\n  background:var(--navy);\r\n\r\n  color:#FFFFFF;\r\n}\r\n\r\n\r\n.tm-icon.gold{\r\n  background:var(--gold);\r\n}\r\n\r\n\r\n.tm-icon svg{\r\n  width:24px;\r\n  height:24px;\r\n\r\n  fill:none;\r\n\r\n  stroke:currentColor;\r\n\r\n  stroke-width:1.8;\r\n\r\n  stroke-linecap:round;\r\n\r\n  stroke-linejoin:round;\r\n}\r\n\r\n\r\n\/* =========================================================\r\nMONITORING\r\n========================================================= *\/\r\n\r\n.tm-monitoring{\r\n  padding:\r\n    60px 0\r\n    35px;\r\n\r\n  background:#FFFFFF;\r\n}\r\n\r\n\r\n.tm-monitor-grid{\r\n  display:grid;\r\n\r\n  grid-template-columns:\r\n    repeat(2,minmax(0,1fr));\r\n\r\n  gap:25px;\r\n}\r\n\r\n\r\n.tm-monitor-card{\r\n  position:relative;\r\n\r\n  min-height:555px;\r\n\r\n  padding:\r\n    55px\r\n    clamp(28px,3vw,45px)\r\n    35px;\r\n\r\n  background:#FFFFFF;\r\n\r\n  border:\r\n    1px solid\r\n    #DDE3EA;\r\n\r\n  border-radius:18px;\r\n\r\n  box-shadow:\r\n    0 12px 30px\r\n    rgba(7,29,73,.035);\r\n}\r\n\r\n\r\n.tm-monitor-card.students{\r\n  border-bottom:\r\n    6px solid\r\n    var(--navy);\r\n}\r\n\r\n\r\n.tm-monitor-card.teachers{\r\n  border-color:#E8D6B4;\r\n\r\n  border-bottom:\r\n    6px solid\r\n    var(--gold);\r\n}\r\n\r\n\r\n.tm-card-ribbon{\r\n  position:absolute;\r\n\r\n  top:-17px;\r\n  left:50%;\r\n\r\n  transform:\r\n    translateX(-50%);\r\n\r\n  min-width:\r\n    min(80%,340px);\r\n\r\n  padding:\r\n    11px\r\n    22px;\r\n\r\n  text-align:center;\r\n\r\n  border-radius:6px;\r\n\r\n  background:var(--navy);\r\n\r\n  color:#FFFFFF;\r\n\r\n  font-size:12px;\r\n  font-weight:800;\r\n\r\n  letter-spacing:.1em;\r\n\r\n  text-transform:uppercase;\r\n}\r\n\r\n\r\n.tm-teacher-ribbon{\r\n  background:var(--gold);\r\n}\r\n\r\n\r\n.tm-monitor-list{\r\n  display:grid;\r\n\r\n  gap:10px;\r\n}\r\n\r\n\r\n.tm-monitor-item{\r\n  display:grid;\r\n\r\n  grid-template-columns:\r\n    68px\r\n    minmax(0,1fr);\r\n\r\n  gap:18px;\r\n\r\n  align-items:center;\r\n\r\n  padding:13px 0;\r\n}\r\n\r\n\r\n.tm-monitor-item + .tm-monitor-item{\r\n  border-top:\r\n    1px solid\r\n    #EDF0F3;\r\n}\r\n\r\n\r\n.tm-square-icon{\r\n  width:62px;\r\n  height:62px;\r\n\r\n  display:grid;\r\n\r\n  place-items:center;\r\n\r\n  border-radius:12px;\r\n\r\n  background:var(--soft-blue);\r\n\r\n  color:var(--navy);\r\n}\r\n\r\n\r\n.teachers .tm-square-icon{\r\n  background:var(--soft-gold);\r\n\r\n  color:var(--gold);\r\n}\r\n\r\n\r\n.tm-square-icon svg{\r\n  width:32px;\r\n  height:32px;\r\n\r\n  fill:none;\r\n\r\n  stroke:currentColor;\r\n\r\n  stroke-width:1.7;\r\n\r\n  stroke-linecap:round;\r\n\r\n  stroke-linejoin:round;\r\n}\r\n\r\n\r\n.tm-monitor-item h3{\r\n  margin:\r\n    0 0\r\n    5px;\r\n\r\n  color:var(--navy);\r\n\r\n  font-size:\r\n    clamp(11px,.95vw,14px);\r\n\r\n  font-weight:800;\r\n\r\n  line-height:1.35;\r\n\r\n  text-transform:uppercase;\r\n}\r\n\r\n\r\n.teachers .tm-monitor-item h3{\r\n  color:#B67B12;\r\n}\r\n\r\n\r\n.tm-monitor-item p{\r\n  margin:0;\r\n\r\n  color:#414B5B;\r\n\r\n  font-size:\r\n    clamp(10px,.82vw,13px);\r\n\r\n  line-height:1.6;\r\n}\r\n\r\n\r\n\/* =========================================================\r\nEVALUATION\r\n========================================================= *\/\r\n\r\n.tm-evaluation{\r\n  padding:\r\n    30px 0;\r\n\r\n  background:#FFFFFF;\r\n}\r\n\r\n\r\n.tm-evaluation-box{\r\n  position:relative;\r\n\r\n  padding:\r\n    55px\r\n    20px\r\n    32px;\r\n\r\n  border:\r\n    1px solid\r\n    #E5DAC4;\r\n\r\n  border-radius:18px;\r\n\r\n  background:#FFFFFF;\r\n\r\n  box-shadow:\r\n    0 8px 25px\r\n    rgba(7,29,73,.035);\r\n}\r\n\r\n\r\n.tm-section-ribbon{\r\n  position:absolute;\r\n\r\n  top:-17px;\r\n  left:50%;\r\n\r\n  transform:\r\n    translateX(-50%);\r\n\r\n  min-width:\r\n    min(75%,480px);\r\n\r\n  padding:\r\n    10px\r\n    26px;\r\n\r\n  text-align:center;\r\n\r\n  border-radius:6px;\r\n\r\n  background:var(--navy);\r\n\r\n  color:#FFFFFF;\r\n\r\n  font-size:12px;\r\n  font-weight:800;\r\n\r\n  letter-spacing:.1em;\r\n\r\n  text-transform:uppercase;\r\n}\r\n\r\n\r\n.tm-eval-grid{\r\n  display:grid;\r\n\r\n  grid-template-columns:\r\n    repeat(6,minmax(0,1fr));\r\n}\r\n\r\n\r\n.tm-eval-item{\r\n  min-width:0;\r\n\r\n  padding:\r\n    5px\r\n    14px;\r\n\r\n  text-align:center;\r\n}\r\n\r\n\r\n.tm-eval-item + .tm-eval-item{\r\n  border-left:\r\n    1px solid\r\n    #E9DFCA;\r\n}\r\n\r\n\r\n.tm-eval-icon{\r\n  width:65px;\r\n  height:65px;\r\n\r\n  margin:\r\n    0 auto\r\n    7px;\r\n\r\n  display:grid;\r\n\r\n  place-items:center;\r\n\r\n  border-radius:50%;\r\n\r\n  background:var(--navy);\r\n\r\n  color:#FFFFFF;\r\n}\r\n\r\n\r\n.tm-eval-icon svg{\r\n  width:30px;\r\n  height:30px;\r\n\r\n  fill:none;\r\n\r\n  stroke:currentColor;\r\n\r\n  stroke-width:1.7;\r\n}\r\n\r\n\r\n.tm-number{\r\n  width:27px;\r\n  height:27px;\r\n\r\n  margin:\r\n    -3px auto\r\n    10px;\r\n\r\n  display:grid;\r\n\r\n  place-items:center;\r\n\r\n  border:\r\n    3px solid\r\n    #FFFFFF;\r\n\r\n  border-radius:50%;\r\n\r\n  background:var(--navy);\r\n\r\n  color:#FFFFFF;\r\n\r\n  font-size:9px;\r\n  font-weight:800;\r\n}\r\n\r\n\r\n.tm-eval-item h4{\r\n  margin-bottom:7px;\r\n\r\n  color:var(--navy);\r\n\r\n  font-size:\r\n    clamp(9px,.72vw,11px);\r\n\r\n  line-height:1.4;\r\n\r\n  font-weight:800;\r\n\r\n  text-transform:uppercase;\r\n}\r\n\r\n\r\n.tm-eval-item p{\r\n  margin:0;\r\n\r\n  color:#50596A;\r\n\r\n  font-size:\r\n    clamp(9px,.68vw,11px);\r\n\r\n  line-height:1.5;\r\n}\r\n\r\n\r\n\/* =========================================================\r\nFAMILY\r\n========================================================= *\/\r\n\r\n.tm-family{\r\n  padding:\r\n    32px 0\r\n    90px;\r\n\r\n  background:\r\n    linear-gradient(\r\n      180deg,\r\n      #FFFFFF,\r\n      #FDFBF7\r\n    );\r\n}\r\n\r\n\r\n.tm-family-box{\r\n  position:relative;\r\n\r\n  padding:\r\n    58px\r\n    20px\r\n    34px;\r\n\r\n  border:\r\n    1px solid\r\n    #E8D7B5;\r\n\r\n  border-radius:18px;\r\n\r\n  background:#FFFFFF;\r\n}\r\n\r\n\r\n.tm-family-ribbon{\r\n  min-width:\r\n    min(80%,560px);\r\n\r\n  background:var(--gold);\r\n}\r\n\r\n\r\n.tm-family-line{\r\n  position:absolute;\r\n\r\n  top:101px;\r\n\r\n  left:8%;\r\n  right:8%;\r\n\r\n  height:1px;\r\n\r\n  background:#DFBD75;\r\n}\r\n\r\n\r\n.tm-family-grid{\r\n  position:relative;\r\n\r\n  z-index:2;\r\n\r\n  display:grid;\r\n\r\n  grid-template-columns:\r\n    repeat(7,minmax(0,1fr));\r\n\r\n  gap:9px;\r\n}\r\n\r\n\r\n.tm-family-item{\r\n  min-width:0;\r\n\r\n  padding:\r\n    0 5px;\r\n\r\n  text-align:center;\r\n}\r\n\r\n\r\n.tm-family-icon{\r\n  width:68px;\r\n  height:68px;\r\n\r\n  margin:\r\n    0 auto\r\n    6px;\r\n\r\n  display:grid;\r\n\r\n  place-items:center;\r\n\r\n  border:\r\n    7px solid\r\n    #FFFFFF;\r\n\r\n  border-radius:50%;\r\n\r\n  background:var(--soft-gold);\r\n\r\n  color:var(--gold);\r\n}\r\n\r\n\r\n.tm-family-icon svg{\r\n  width:30px;\r\n  height:30px;\r\n\r\n  fill:none;\r\n\r\n  stroke:currentColor;\r\n\r\n  stroke-width:1.7;\r\n}\r\n\r\n\r\n.tm-family-number{\r\n  width:27px;\r\n  height:27px;\r\n\r\n  margin-bottom:8px;\r\n\r\n  display:inline-grid;\r\n\r\n  place-items:center;\r\n\r\n  border:\r\n    1px solid\r\n    var(--gold);\r\n\r\n  border-radius:50%;\r\n\r\n  background:#FFFFFF;\r\n\r\n  color:var(--gold);\r\n\r\n  font-size:9px;\r\n  font-weight:800;\r\n}\r\n\r\n\r\n.tm-family-item h4{\r\n  min-height:28px;\r\n\r\n  margin-bottom:6px;\r\n\r\n  color:var(--navy);\r\n\r\n  font-size:\r\n    clamp(8px,.68vw,10px);\r\n\r\n  line-height:1.35;\r\n\r\n  font-weight:800;\r\n\r\n  text-transform:uppercase;\r\n}\r\n\r\n\r\n.tm-family-item p{\r\n  margin:0;\r\n\r\n  color:#596375;\r\n\r\n  font-size:\r\n    clamp(8px,.62vw,10px);\r\n\r\n  line-height:1.5;\r\n}\r\n\r\n\r\n\/* =========================================================\r\nTABLET\r\n========================================================= *\/\r\n\r\n@media(max-width:1100px){\r\n\r\n  #suivi-individuel{\r\n    scroll-margin-top:95px;\r\n  }\r\n\r\n\r\n  .tm-suivi-inner{\r\n    width:\r\n      calc(100% - 40px);\r\n  }\r\n\r\n\r\n  .tm-suivi-hero-grid{\r\n    grid-template-columns:1fr;\r\n\r\n    gap:45px;\r\n  }\r\n\r\n\r\n  .tm-suivi-title{\r\n    max-width:850px;\r\n  }\r\n\r\n\r\n  .tm-hero-visual{\r\n    max-width:none;\r\n\r\n    width:100%;\r\n  }\r\n\r\n\r\n  .tm-photo-frame{\r\n    height:500px;\r\n  }\r\n\r\n\r\n  .tm-floating-cards{\r\n    left:3%;\r\n    right:3%;\r\n  }\r\n\r\n\r\n  .tm-monitor-grid{\r\n    grid-template-columns:1fr;\r\n\r\n    gap:55px;\r\n  }\r\n\r\n\r\n  .tm-monitor-card{\r\n    min-height:auto;\r\n  }\r\n\r\n\r\n  .tm-eval-grid{\r\n    grid-template-columns:\r\n      repeat(3,1fr);\r\n\r\n    row-gap:30px;\r\n  }\r\n\r\n\r\n  .tm-eval-item:nth-child(4){\r\n    border-left:0;\r\n  }\r\n\r\n\r\n  .tm-family-line{\r\n    display:none;\r\n  }\r\n\r\n\r\n  .tm-family-grid{\r\n    grid-template-columns:\r\n      repeat(4,1fr);\r\n\r\n    gap:\r\n      32px\r\n      15px;\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\nMOBILE\r\n========================================================= *\/\r\n\r\n@media(max-width:767px){\r\n\r\n  #suivi-individuel{\r\n    scroll-margin-top:82px;\r\n  }\r\n\r\n\r\n  .tm-suivi-inner{\r\n    width:\r\n      calc(100% - 24px);\r\n  }\r\n\r\n\r\n  .tm-suivi-hero{\r\n    padding:\r\n      55px 0\r\n      40px;\r\n  }\r\n\r\n\r\n  .tm-suivi-title{\r\n    font-size:\r\n      clamp(42px,12vw,58px);\r\n\r\n    line-height:1;\r\n  }\r\n\r\n\r\n  .tm-suivi-intro{\r\n    font-size:14px;\r\n\r\n    line-height:1.75;\r\n  }\r\n\r\n\r\n  .tm-suivi-signature{\r\n    font-size:8px;\r\n  }\r\n\r\n\r\n  .tm-photo-frame{\r\n    height:340px;\r\n\r\n    border-radius:\r\n      4px\r\n      35px\r\n      4px\r\n      4px;\r\n  }\r\n\r\n\r\n  .tm-photo-frame img{\r\n    object-position:center;\r\n  }\r\n\r\n\r\n  .tm-hero-visual{\r\n    padding-bottom:0;\r\n  }\r\n\r\n\r\n  .tm-floating-cards{\r\n    position:relative;\r\n\r\n    left:auto;\r\n    right:auto;\r\n    bottom:auto;\r\n\r\n    margin:\r\n      -38px\r\n      auto\r\n      0;\r\n\r\n    width:\r\n      calc(100% - 22px);\r\n\r\n    grid-template-columns:1fr;\r\n\r\n    gap:10px;\r\n  }\r\n\r\n\r\n  .tm-floating-card,\r\n  .tm-floating-card:first-child,\r\n  .tm-floating-card:last-child{\r\n    border-radius:12px;\r\n  }\r\n\r\n\r\n  .tm-floating-card{\r\n    min-height:auto;\r\n  }\r\n\r\n\r\n  .tm-monitoring{\r\n    padding-top:55px;\r\n  }\r\n\r\n\r\n  .tm-monitor-card{\r\n    padding:\r\n      52px\r\n      20px\r\n      25px;\r\n  }\r\n\r\n\r\n  .tm-card-ribbon{\r\n    width:\r\n      calc(100% - 35px);\r\n\r\n    min-width:0;\r\n\r\n    font-size:10px;\r\n  }\r\n\r\n\r\n  .tm-monitor-item{\r\n    grid-template-columns:\r\n      56px\r\n      minmax(0,1fr);\r\n\r\n    gap:13px;\r\n  }\r\n\r\n\r\n  .tm-square-icon{\r\n    width:54px;\r\n    height:54px;\r\n  }\r\n\r\n\r\n  .tm-monitor-item h3{\r\n    font-size:11px;\r\n  }\r\n\r\n\r\n  .tm-monitor-item p{\r\n    font-size:11px;\r\n  }\r\n\r\n\r\n  .tm-section-ribbon{\r\n    min-width:0;\r\n\r\n    width:\r\n      calc(100% - 25px);\r\n\r\n    padding:\r\n      10px\r\n      10px;\r\n\r\n    font-size:9px;\r\n  }\r\n\r\n\r\n  .tm-evaluation-box{\r\n    padding:\r\n      55px\r\n      10px\r\n      25px;\r\n  }\r\n\r\n\r\n  .tm-eval-grid{\r\n    grid-template-columns:\r\n      repeat(2,1fr);\r\n  }\r\n\r\n\r\n  .tm-eval-item{\r\n    padding:\r\n      8px\r\n      8px\r\n      24px;\r\n  }\r\n\r\n\r\n  .tm-eval-item:nth-child(odd){\r\n    border-left:0;\r\n  }\r\n\r\n\r\n  .tm-eval-item:nth-child(4){\r\n    border-left:\r\n      1px solid\r\n      #E9DFCA;\r\n  }\r\n\r\n\r\n  .tm-family-box{\r\n    padding:\r\n      55px\r\n      10px\r\n      25px;\r\n  }\r\n\r\n\r\n  .tm-family-ribbon{\r\n    min-width:0;\r\n  }\r\n\r\n\r\n  .tm-family-grid{\r\n    grid-template-columns:\r\n      repeat(2,1fr);\r\n\r\n    gap:\r\n      30px\r\n      8px;\r\n  }\r\n\r\n\r\n  .tm-family-item:last-child{\r\n    grid-column:\r\n      1 \/ -1;\r\n\r\n    max-width:200px;\r\n\r\n    margin:auto;\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\nSMALL MOBILE\r\n========================================================= *\/\r\n\r\n@media(max-width:430px){\r\n\r\n  .tm-suivi-title{\r\n    font-size:39px;\r\n  }\r\n\r\n\r\n  .tm-photo-frame{\r\n    height:290px;\r\n  }\r\n\r\n\r\n  .tm-eval-grid{\r\n    grid-template-columns:1fr;\r\n  }\r\n\r\n\r\n  .tm-eval-item,\r\n  .tm-eval-item:nth-child(4){\r\n    border-left:0;\r\n\r\n    border-bottom:\r\n      1px solid\r\n      #EEE5D4;\r\n  }\r\n\r\n\r\n  .tm-eval-item:last-child{\r\n    border-bottom:0;\r\n  }\r\n\r\n\r\n  .tm-family-grid{\r\n    grid-template-columns:1fr;\r\n  }\r\n\r\n\r\n  .tm-family-item:last-child{\r\n    grid-column:auto;\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\nELEMENTOR FULL WIDTH\r\n========================================================= *\/\r\n\r\n.elementor-widget-html:has(.tm-suivi){\r\n  width:100vw !important;\r\n\r\n  max-width:100vw !important;\r\n\r\n  margin-left:\r\n    calc(50% - 50vw) !important;\r\n}\r\n\r\n\r\n.elementor-widget-html:has(.tm-suivi)\r\n> .elementor-widget-container{\r\n\r\n  width:100% !important;\r\n\r\n  max-width:none !important;\r\n\r\n  margin:0 !important;\r\n\r\n  padding:0 !important;\r\n}\r\n\r\n<\/style>\r\n\r\n\r\n<!-- =========================================================\r\nHERO\r\n========================================================= -->\r\n\r\n<div class=\"tm-suivi-hero\">\r\n\r\n  <div class=\"tm-suivi-inner\">\r\n\r\n    <div class=\"tm-suivi-hero-grid\">\r\n\r\n\r\n      <!-- LEFT -->\r\n\r\n      <div>\r\n\r\n        <div class=\"tm-kicker\">\r\n          03 \u2014 Accompagnement\r\n        <\/div>\r\n\r\n\r\n        <h2 class=\"tm-suivi-title\">\r\n\r\n          Chaque \u00e9l\u00e8ve m\u00e9rite\r\n\r\n          <em>\r\n            un parcours qui lui ressemble.\r\n          <\/em>\r\n\r\n        <\/h2>\r\n\r\n\r\n        <p class=\"tm-suivi-intro\">\r\n\r\n          \u00c0 l\u2019Institut TOMETAL, le suivi personnalis\u00e9 ne se limite pas\r\n          \u00e0 observer les r\u00e9sultats scolaires.\r\n\r\n          Il permet de comprendre les besoins,\r\n          les forces et le rythme de progression\r\n          de chaque \u00e9l\u00e8ve.\r\n\r\n        <\/p>\r\n\r\n\r\n        <div class=\"tm-suivi-signature\">\r\n\r\n          Accompagner, valoriser et faire progresser.\r\n\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n\r\n      <!-- RIGHT -->\r\n\r\n      <div class=\"tm-hero-visual\">\r\n\r\n\r\n        <div class=\"tm-photo-frame\">\r\n\r\n          <img decoding=\"async\"\r\n            src=\"https:\/\/images.pexels.com\/photos\/5212345\/pexels-photo-5212345.jpeg?auto=compress&cs=tinysrgb&w=1400\"\r\n            alt=\"Enseignante accompagnant une \u00e9l\u00e8ve\"\r\n          >\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"tm-floating-cards\">\r\n\r\n\r\n          <!-- 1 -->\r\n\r\n          <div class=\"tm-floating-card\">\r\n\r\n            <div class=\"tm-icon\">\r\n\r\n              <svg viewBox=\"0 0 24 24\">\r\n\r\n                <circle\r\n                  cx=\"12\"\r\n                  cy=\"12\"\r\n                  r=\"7\"\r\n                \/>\r\n\r\n                <circle\r\n                  cx=\"12\"\r\n                  cy=\"12\"\r\n                  r=\"2\"\r\n                \/>\r\n\r\n                <path\r\n                  d=\"M12 2v3M12 19v3M2 12h3M19 12h3\"\r\n                \/>\r\n\r\n              <\/svg>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div>\r\n\r\n              <h4>\r\n                Objectifs personnalis\u00e9s\r\n              <\/h4>\r\n\r\n              <p>\r\n                Des objectifs adapt\u00e9s au niveau,\r\n                aux aptitudes et aux ambitions\r\n                de chaque \u00e9l\u00e8ve.\r\n              <\/p>\r\n\r\n            <\/div>\r\n\r\n          <\/div>\r\n\r\n\r\n          <!-- 2 -->\r\n\r\n          <div class=\"tm-floating-card\">\r\n\r\n            <div class=\"tm-icon gold\">\r\n\r\n              <svg viewBox=\"0 0 24 24\">\r\n\r\n                <path\r\n                  d=\"M4 19V13M9 19V9M14 19V11M19 19V5\"\r\n                \/>\r\n\r\n                <path\r\n                  d=\"M3 6l5-3 5 3 7-4\"\r\n                \/>\r\n\r\n              <\/svg>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div>\r\n\r\n              <h4>\r\n                Progression suivie\r\n              <\/h4>\r\n\r\n              <p>\r\n                Un suivi rigoureux pour mesurer\r\n                les progr\u00e8s et ajuster\r\n                les actions d\u2019accompagnement.\r\n              <\/p>\r\n\r\n            <\/div>\r\n\r\n          <\/div>\r\n\r\n\r\n          <!-- 3 -->\r\n\r\n          <div class=\"tm-floating-card\">\r\n\r\n            <div class=\"tm-icon\">\r\n\r\n              <svg viewBox=\"0 0 24 24\">\r\n\r\n                <circle\r\n                  cx=\"8\"\r\n                  cy=\"8\"\r\n                  r=\"3\"\r\n                \/>\r\n\r\n                <circle\r\n                  cx=\"16\"\r\n                  cy=\"8\"\r\n                  r=\"3\"\r\n                \/>\r\n\r\n                <path\r\n                  d=\"M2 20c0-4 2-6 6-6s6 2 6 6\"\r\n                \/>\r\n\r\n                <path\r\n                  d=\"M12 15c1-.7 2.3-1 4-1 4 0 6 2 6 6\"\r\n                \/>\r\n\r\n              <\/svg>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div>\r\n\r\n              <h4>\r\n                \u00c9changes r\u00e9guliers\r\n              <\/h4>\r\n\r\n              <p>\r\n                Une communication continue entre\r\n                l\u2019\u00e9cole, l\u2019\u00e9l\u00e8ve et la famille\r\n                pour avancer ensemble.\r\n              <\/p>\r\n\r\n            <\/div>\r\n\r\n          <\/div>\r\n\r\n\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n<\/div>\r\n\r\n\r\n<!-- =========================================================\r\nSUIVI ELEVE \/ ENSEIGNANTS\r\n========================================================= -->\r\n\r\n<div class=\"tm-monitoring\">\r\n\r\n  <div class=\"tm-suivi-inner\">\r\n\r\n    <div class=\"tm-monitor-grid\">\r\n\r\n\r\n      <!-- STUDENTS -->\r\n\r\n      <div class=\"tm-monitor-card students\">\r\n\r\n        <div class=\"tm-card-ribbon\">\r\n          Suivi des \u00e9l\u00e8ves\r\n        <\/div>\r\n\r\n\r\n        <div class=\"tm-monitor-list\">\r\n\r\n\r\n          <div class=\"tm-monitor-item\">\r\n\r\n            <div class=\"tm-square-icon\">\r\n\r\n              <svg viewBox=\"0 0 24 24\">\r\n                <path d=\"M4 4h12a3 3 0 0 1 3 3v13H7a3 3 0 0 1-3-3z\"\/>\r\n                <path d=\"M7 4v16M10 8h6M10 12h6\"\/>\r\n              <\/svg>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div>\r\n\r\n              <h3>\r\n                Cahier de travail personnalis\u00e9\r\n              <\/h3>\r\n\r\n              <p>\r\n                Chaque \u00e9l\u00e8ve consigne les exercices r\u00e9alis\u00e9s,\r\n                les vid\u00e9os visionn\u00e9es et les points de difficult\u00e9\r\n                afin de mieux progresser.\r\n              <\/p>\r\n\r\n            <\/div>\r\n\r\n          <\/div>\r\n\r\n\r\n          <div class=\"tm-monitor-item\">\r\n\r\n            <div class=\"tm-square-icon\">\r\n\r\n              <svg viewBox=\"0 0 24 24\">\r\n                <rect x=\"5\" y=\"4\" width=\"14\" height=\"17\" rx=\"2\"\/>\r\n                <path d=\"M9 4V2h6v2M8 9l2 2 4-4M8 15l2 2 4-4\"\/>\r\n              <\/svg>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div>\r\n\r\n              <h3>\r\n                \u00c9valuations formatives r\u00e9guli\u00e8res\r\n              <\/h3>\r\n\r\n              <p>\r\n                Int\u00e9gr\u00e9es dans chaque s\u00e9quence.\r\n                Les crit\u00e8res de r\u00e9ussite sont connus \u00e0 l\u2019avance\r\n                et le feedback est imm\u00e9diat.\r\n              <\/p>\r\n\r\n            <\/div>\r\n\r\n          <\/div>\r\n\r\n\r\n          <div class=\"tm-monitor-item\">\r\n\r\n            <div class=\"tm-square-icon\">\r\n\r\n              <svg viewBox=\"0 0 24 24\">\r\n                <circle cx=\"8\" cy=\"8\" r=\"3\"\/>\r\n                <circle cx=\"16\" cy=\"8\" r=\"3\"\/>\r\n                <path d=\"M2 20c0-4 2-6 6-6s6 2 6 6M12 15c1-.7 2-1 4-1 4 0 6 2 6 6\"\/>\r\n              <\/svg>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div>\r\n\r\n              <h3>\r\n                Communication avec les familles\r\n              <\/h3>\r\n\r\n              <p>\r\n                Des \u00e9changes r\u00e9guliers pour suivre la progression,\r\n                les objectifs et le groupe d\u2019atelier de chaque \u00e9l\u00e8ve.\r\n              <\/p>\r\n\r\n            <\/div>\r\n\r\n          <\/div>\r\n\r\n\r\n          <div class=\"tm-monitor-item\">\r\n\r\n            <div class=\"tm-square-icon\">\r\n\r\n              <svg viewBox=\"0 0 24 24\">\r\n                <circle cx=\"12\" cy=\"12\" r=\"8\"\/>\r\n                <circle cx=\"12\" cy=\"12\" r=\"4\"\/>\r\n                <path d=\"M12 12l7-7M17 5h2v2\"\/>\r\n              <\/svg>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div>\r\n\r\n              <h3>\r\n                Accompagnement personnalis\u00e9\r\n              <\/h3>\r\n\r\n              <p>\r\n                Soutien cibl\u00e9 selon les besoins,\r\n                diff\u00e9renciation p\u00e9dagogique\r\n                et suivi des comp\u00e9tences de chacun.\r\n              <\/p>\r\n\r\n            <\/div>\r\n\r\n          <\/div>\r\n\r\n\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n\r\n      <!-- TEACHERS -->\r\n\r\n      <div class=\"tm-monitor-card teachers\">\r\n\r\n        <div class=\"tm-card-ribbon tm-teacher-ribbon\">\r\n          Suivi p\u00e9dagogique des enseignants\r\n        <\/div>\r\n\r\n\r\n        <div class=\"tm-monitor-list\">\r\n\r\n\r\n          <div class=\"tm-monitor-item\">\r\n\r\n            <div class=\"tm-square-icon\">\r\n\r\n              <svg viewBox=\"0 0 24 24\">\r\n                <rect x=\"4\" y=\"5\" width=\"16\" height=\"11\" rx=\"1\"\/>\r\n                <path d=\"M8 20v-4M16 20v-4M8 10h8M12 7v6\"\/>\r\n              <\/svg>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div>\r\n\r\n              <h3>\r\n                Progressions \u00e9labor\u00e9es par des experts\r\n              <\/h3>\r\n\r\n              <p>\r\n                Les progressions sont r\u00e9dig\u00e9es par des experts externes\r\n                et valid\u00e9es par la direction avant leur mise en \u0153uvre.\r\n              <\/p>\r\n\r\n            <\/div>\r\n\r\n          <\/div>\r\n\r\n\r\n          <div class=\"tm-monitor-item\">\r\n\r\n            <div class=\"tm-square-icon\">\r\n\r\n              <svg viewBox=\"0 0 24 24\">\r\n                <path d=\"M5 3h10l4 4v14H5z\"\/>\r\n                <path d=\"M15 3v5h5M8 12h8M8 16h8\"\/>\r\n              <\/svg>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div>\r\n\r\n              <h3>\r\n                Plans de le\u00e7on standardis\u00e9s\r\n              <\/h3>\r\n\r\n              <p>\r\n                Chaque cours suit un plan de le\u00e7on standardis\u00e9 :\r\n                objectifs, sc\u00e9nario, ressources et diff\u00e9renciation.\r\n              <\/p>\r\n\r\n            <\/div>\r\n\r\n          <\/div>\r\n\r\n\r\n          <div class=\"tm-monitor-item\">\r\n\r\n            <div class=\"tm-square-icon\">\r\n\r\n              <svg viewBox=\"0 0 24 24\">\r\n                <path d=\"M2 8l10-5 10 5-10 5z\"\/>\r\n                <path d=\"M6 10v6c3 3 9 3 12 0v-6M22 8v7\"\/>\r\n              <\/svg>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div>\r\n\r\n              <h3>\r\n                Formation continue\r\n              <\/h3>\r\n\r\n              <p>\r\n                Les enseignants b\u00e9n\u00e9ficient de formations continues,\r\n                notamment en certification de langue\r\n                anglaise et fran\u00e7aise.\r\n              <\/p>\r\n\r\n            <\/div>\r\n\r\n          <\/div>\r\n\r\n\r\n          <div class=\"tm-monitor-item\">\r\n\r\n            <div class=\"tm-square-icon\">\r\n\r\n              <svg viewBox=\"0 0 24 24\">\r\n                <rect x=\"5\" y=\"4\" width=\"14\" height=\"17\" rx=\"2\"\/>\r\n                <path d=\"M9 4V2h6v2M8 9h8M8 13h8M8 17h5\"\/>\r\n              <\/svg>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div>\r\n\r\n              <h3>\r\n                Supervision p\u00e9dagogique\r\n              <\/h3>\r\n\r\n              <p>\r\n                Suivi r\u00e9gulier, observations de classe,\r\n                v\u00e9rification des cahiers et accompagnement\r\n                dans la posture de coaching.\r\n              <\/p>\r\n\r\n            <\/div>\r\n\r\n          <\/div>\r\n\r\n\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n<\/div>\r\n\r\n\r\n<!-- =========================================================\r\nEVALUATION\r\n========================================================= -->\r\n\r\n<div class=\"tm-evaluation\">\r\n\r\n  <div class=\"tm-suivi-inner\">\r\n\r\n    <div class=\"tm-evaluation-box\">\r\n\r\n\r\n      <div class=\"tm-section-ribbon\">\r\n        Une \u00e9valuation compl\u00e8te et \u00e9quilibr\u00e9e\r\n      <\/div>\r\n\r\n\r\n      <div class=\"tm-eval-grid\">\r\n\r\n\r\n        <div class=\"tm-eval-item\">\r\n\r\n          <div class=\"tm-eval-icon\">\r\n            <svg viewBox=\"0 0 24 24\">\r\n              <path d=\"M5 3h12v18H5zM8 8h6M8 12h6M8 16h4\"\/>\r\n            <\/svg>\r\n          <\/div>\r\n\r\n          <div class=\"tm-number\">01<\/div>\r\n\r\n          <h4>\r\n            \u00c9valuations \u00e9crites\r\n          <\/h4>\r\n\r\n          <p>\r\n            2 devoirs surveill\u00e9s par trimestre\r\n          <\/p>\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"tm-eval-item\">\r\n\r\n          <div class=\"tm-eval-icon\">\r\n            <svg viewBox=\"0 0 24 24\">\r\n              <path d=\"M2 8l10-5 10 5-10 5z\"\/>\r\n              <path d=\"M6 10v6c3 3 9 3 12 0v-6\"\/>\r\n            <\/svg>\r\n          <\/div>\r\n\r\n          <div class=\"tm-number\">02<\/div>\r\n\r\n          <h4>\r\n            \u00c9valuation de p\u00e9riode\r\n          <\/h4>\r\n\r\n          <p>\r\n            Progression des comp\u00e9tences\r\n            et des apprentissages\r\n          <\/p>\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"tm-eval-item\">\r\n\r\n          <div class=\"tm-eval-icon\">\r\n            <svg viewBox=\"0 0 24 24\">\r\n              <path d=\"M3 5c4-2 7-1 9 1v14c-2-2-5-3-9-1z\"\/>\r\n              <path d=\"M21 5c-4-2-7-1-9 1v14c2-2 5-3 9-1z\"\/>\r\n            <\/svg>\r\n          <\/div>\r\n\r\n          <div class=\"tm-number\">03<\/div>\r\n\r\n          <h4>\r\n            Suivi du cahier\r\n          <\/h4>\r\n\r\n          <p>\r\n            Organisation, travail personnel\r\n            et autonomie\r\n          <\/p>\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"tm-eval-item\">\r\n\r\n          <div class=\"tm-eval-icon\">\r\n            <svg viewBox=\"0 0 24 24\">\r\n              <path d=\"M4 5h16v11H9l-5 4z\"\/>\r\n            <\/svg>\r\n          <\/div>\r\n\r\n          <div class=\"tm-number\">04<\/div>\r\n\r\n          <h4>\r\n            Expression orale\r\n          <\/h4>\r\n\r\n          <p>\r\n            Prise de parole,\r\n            aisance et communication\r\n          <\/p>\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"tm-eval-item\">\r\n\r\n          <div class=\"tm-eval-icon\">\r\n            <svg viewBox=\"0 0 24 24\">\r\n              <circle cx=\"10\" cy=\"7\" r=\"4\"\/>\r\n              <path d=\"M3 21c0-5 2-8 7-8\"\/>\r\n              <path d=\"M18 14l1.3 2.5 2.7.4-2 2 .5 2.8-2.5-1.3-2.5 1.3.5-2.8-2-2 2.7-.4z\"\/>\r\n            <\/svg>\r\n          <\/div>\r\n\r\n          <div class=\"tm-number\">05<\/div>\r\n\r\n          <h4>\r\n            Comportement\r\n          <\/h4>\r\n\r\n          <p>\r\n            Engagement,\r\n            respect des r\u00e8gles\r\n            et savoir-\u00eatre\r\n          <\/p>\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"tm-eval-item\">\r\n\r\n          <div class=\"tm-eval-icon\">\r\n            <svg viewBox=\"0 0 24 24\">\r\n              <path d=\"M4 5h6v6H4zM14 5h6M14 9h6M4 15h6M14 15h6M4 19h6M14 19h6\"\/>\r\n            <\/svg>\r\n          <\/div>\r\n\r\n          <div class=\"tm-number\">06<\/div>\r\n\r\n          <h4>\r\n            Ma\u00eetrise du vocabulaire\r\n          <\/h4>\r\n\r\n          <p>\r\n            Acquisition progressive\r\n            et utilisation du vocabulaire\r\n          <\/p>\r\n\r\n        <\/div>\r\n\r\n\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n<\/div>\r\n\r\n\r\n<!-- =========================================================\r\nFAMILY\r\n========================================================= -->\r\n\r\n<div class=\"tm-family\">\r\n\r\n  <div class=\"tm-suivi-inner\">\r\n\r\n    <div class=\"tm-family-box\">\r\n\r\n\r\n      <div class=\"tm-section-ribbon tm-family-ribbon\">\r\n\r\n        Un suivi partag\u00e9 entre l\u2019\u00e9cole et les familles\r\n\r\n      <\/div>\r\n\r\n\r\n      <div class=\"tm-family-line\"><\/div>\r\n\r\n\r\n      <div class=\"tm-family-grid\">\r\n\r\n\r\n        <div class=\"tm-family-item\">\r\n\r\n          <div class=\"tm-family-icon\">\r\n\r\n            <svg viewBox=\"0 0 24 24\">\r\n              <path d=\"M4 19V10M9 19V14M14 19V8M19 19V4\"\/>\r\n              <path d=\"M3 7l5 2 5-4 7-3\"\/>\r\n            <\/svg>\r\n\r\n          <\/div>\r\n\r\n\r\n          <div class=\"tm-family-number\">\r\n            01\r\n          <\/div>\r\n\r\n\r\n          <h4>\r\n            Diagnostic\r\n          <\/h4>\r\n\r\n\r\n          <p>\r\n            \u00c9valuation initiale des besoins\r\n            et du niveau de l\u2019\u00e9l\u00e8ve.\r\n          <\/p>\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"tm-family-item\">\r\n\r\n          <div class=\"tm-family-icon\">\r\n\r\n            <svg viewBox=\"0 0 24 24\">\r\n              <circle cx=\"11\" cy=\"12\" r=\"7\"\/>\r\n              <circle cx=\"11\" cy=\"12\" r=\"3\"\/>\r\n              <path d=\"M11 12l9-9M17 3h3v3\"\/>\r\n            <\/svg>\r\n\r\n          <\/div>\r\n\r\n\r\n          <div class=\"tm-family-number\">\r\n            02\r\n          <\/div>\r\n\r\n\r\n          <h4>\r\n            Objectifs personnalis\u00e9s\r\n          <\/h4>\r\n\r\n\r\n          <p>\r\n            D\u00e9finition d\u2019objectifs\r\n            clairs et atteignables.\r\n          <\/p>\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"tm-family-item\">\r\n\r\n          <div class=\"tm-family-icon\">\r\n\r\n            <svg viewBox=\"0 0 24 24\">\r\n              <rect x=\"4\" y=\"4\" width=\"16\" height=\"11\"\/>\r\n              <path d=\"M8 20v-5M16 20v-5M8 9h8\"\/>\r\n            <\/svg>\r\n\r\n          <\/div>\r\n\r\n\r\n          <div class=\"tm-family-number\">\r\n            03\r\n          <\/div>\r\n\r\n\r\n          <h4>\r\n            Enseignement de qualit\u00e9\r\n          <\/h4>\r\n\r\n\r\n          <p>\r\n            Cours interactifs et ateliers\r\n            adapt\u00e9s aux besoins.\r\n          <\/p>\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"tm-family-item\">\r\n\r\n          <div class=\"tm-family-icon\">\r\n\r\n            <svg viewBox=\"0 0 24 24\">\r\n              <rect x=\"5\" y=\"4\" width=\"14\" height=\"17\" rx=\"2\"\/>\r\n              <path d=\"M9 4V2h6v2M8 9l2 2 4-4M8 15l2 2 4-4\"\/>\r\n            <\/svg>\r\n\r\n          <\/div>\r\n\r\n\r\n          <div class=\"tm-family-number\">\r\n            04\r\n          <\/div>\r\n\r\n\r\n          <h4>\r\n            \u00c9valuations formatives\r\n          <\/h4>\r\n\r\n\r\n          <p>\r\n            Suivi r\u00e9gulier des acquis\r\n            et feedbacks.\r\n          <\/p>\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"tm-family-item\">\r\n\r\n          <div class=\"tm-family-icon\">\r\n\r\n            <svg viewBox=\"0 0 24 24\">\r\n              <circle cx=\"8\" cy=\"8\" r=\"3\"\/>\r\n              <circle cx=\"16\" cy=\"8\" r=\"3\"\/>\r\n              <path d=\"M2 20c0-4 2-6 6-6s6 2 6 6M12 15c1-.7 2-1 4-1 4 0 6 2 6 6\"\/>\r\n            <\/svg>\r\n\r\n          <\/div>\r\n\r\n\r\n          <div class=\"tm-family-number\">\r\n            05\r\n          <\/div>\r\n\r\n\r\n          <h4>\r\n            Retour aux familles\r\n          <\/h4>\r\n\r\n\r\n          <p>\r\n            \u00c9changes r\u00e9guliers\r\n            pour suivre la progression.\r\n          <\/p>\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"tm-family-item\">\r\n\r\n          <div class=\"tm-family-icon\">\r\n\r\n            <svg viewBox=\"0 0 24 24\">\r\n              <path d=\"M12 21s-8-4.5-8-11a4 4 0 0 1 7-2.5A4 4 0 0 1 18 10c0 6.5-6 11-6 11z\"\/>\r\n              <path d=\"M12 10v5M9.5 12.5h5\"\/>\r\n            <\/svg>\r\n\r\n          <\/div>\r\n\r\n\r\n          <div class=\"tm-family-number\">\r\n            06\r\n          <\/div>\r\n\r\n\r\n          <h4>\r\n            Accompagnement individualis\u00e9\r\n          <\/h4>\r\n\r\n\r\n          <p>\r\n            Soutien cibl\u00e9 et plan\r\n            d\u2019action personnalis\u00e9.\r\n          <\/p>\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"tm-family-item\">\r\n\r\n          <div class=\"tm-family-icon\">\r\n\r\n            <svg viewBox=\"0 0 24 24\">\r\n              <path d=\"M4 20v-5M9 20v-8M14 20v-11M19 20V5\"\/>\r\n              <path d=\"M3 10l5-3 5 1 7-6\"\/>\r\n            <\/svg>\r\n\r\n          <\/div>\r\n\r\n\r\n          <div class=\"tm-family-number\">\r\n            07\r\n          <\/div>\r\n\r\n\r\n          <h4>\r\n            Progression et r\u00e9ussite\r\n          <\/h4>\r\n\r\n\r\n          <p>\r\n            D\u00e9veloppement continu\r\n            du potentiel de l\u2019\u00e9l\u00e8ve.\r\n          <\/p>\r\n\r\n        <\/div>\r\n\r\n\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n<\/div>\r\n\r\n\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-48f56f0 e-con-full e-flex e-con e-parent\" data-id=\"48f56f0\" data-element_type=\"container\" data-e-type=\"container\" id=\"notre-campus\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-98b6aab elementor-widget elementor-widget-html\" data-id=\"98b6aab\" data-element_type=\"widget\" data-e-type=\"widget\" id=\"notre-campus\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<section class=\"tm-spaces\" id=\"decouvrez-nos-espaces\">\r\n\r\n    <div class=\"tm-spaces__container\">\r\n\r\n        <header class=\"tm-spaces__header\">\r\n            <span class=\"tm-spaces__eyebrow\">Section 04<\/span>\r\n\r\n            <h2 class=\"tm-spaces__title\">\r\n                D\u00e9couvrez nos <em>espaces<\/em>\r\n            <\/h2>\r\n\r\n            <div class=\"tm-spaces__divider\">\r\n                <span><\/span>\r\n            <\/div>\r\n\r\n            <p class=\"tm-spaces__subtitle\">\r\n                Chaque espace de l\u2019Institut TOMETAL est pens\u00e9 pour le confort,\r\n                la s\u00e9curit\u00e9 et la r\u00e9ussite de nos \u00e9l\u00e8ves.\r\n            <\/p>\r\n\r\n            <p class=\"tm-spaces__instruction\">\r\n                Survolez une carte ou touchez-la pour d\u00e9couvrir ses informations.\r\n            <\/p>\r\n        <\/header>\r\n\r\n        <div class=\"tm-spaces__grid\" id=\"tm-spaces-grid\"><\/div>\r\n\r\n        <div class=\"tm-spaces__commitments\">\r\n\r\n            <article class=\"tm-commitment\">\r\n                <div class=\"tm-commitment__icon\">\r\n                    <svg viewBox=\"0 0 24 24\">\r\n                        <path d=\"M12 3 4.5 6v5.5c0 4.8 3 8.5 7.5 10 4.5-1.5 7.5-5.2 7.5-10V6L12 3Z\"\/>\r\n                        <path d=\"m8.5 12 2.2 2.2 4.8-5\"\/>\r\n                    <\/svg>\r\n                <\/div>\r\n\r\n                <div>\r\n                    <h3>S\u00e9curit\u00e9 24h\/24<\/h3>\r\n                    <p>\r\n                        Campus surveill\u00e9 et s\u00e9curis\u00e9 pour la tranquillit\u00e9 de tous.\r\n                    <\/p>\r\n                <\/div>\r\n            <\/article>\r\n\r\n            <article class=\"tm-commitment\">\r\n                <div class=\"tm-commitment__icon\">\r\n                    <svg viewBox=\"0 0 24 24\">\r\n                        <path d=\"M12 21s7-6.1 7-12a7 7 0 1 0-14 0c0 5.9 7 12 7 12Z\"\/>\r\n                        <circle cx=\"12\" cy=\"9\" r=\"2.5\"\/>\r\n                    <\/svg>\r\n                <\/div>\r\n\r\n                <div>\r\n                    <h3>Accessibilit\u00e9<\/h3>\r\n                    <p>\r\n                        Un \u00e9tablissement facilement accessible avec transport scolaire.\r\n                    <\/p>\r\n                <\/div>\r\n            <\/article>\r\n\r\n            <article class=\"tm-commitment\">\r\n                <div class=\"tm-commitment__icon\">\r\n                    <svg viewBox=\"0 0 24 24\">\r\n                        <path d=\"M20 4C12 4 6 8 6 15c0 3 2 5 5 5 7 0 9-8 9-16Z\"\/>\r\n                        <path d=\"M4 21c3-6 7-10 13-13\"\/>\r\n                    <\/svg>\r\n                <\/div>\r\n\r\n                <div>\r\n                    <h3>Engagement durable<\/h3>\r\n                    <p>\r\n                        Un campus \u00e9coresponsable pens\u00e9 pour un avenir meilleur.\r\n                    <\/p>\r\n                <\/div>\r\n            <\/article>\r\n\r\n            <article class=\"tm-commitment\">\r\n                <div class=\"tm-commitment__icon\">\r\n                    <svg viewBox=\"0 0 24 24\">\r\n                        <path d=\"M20.8 5.8a5.2 5.2 0 0 0-7.4 0L12 7.2l-1.4-1.4a5.2 5.2 0 0 0-7.4 7.4L12 22l8.8-8.8a5.2 5.2 0 0 0 0-7.4Z\"\/>\r\n                    <\/svg>\r\n                <\/div>\r\n\r\n                <div>\r\n                    <h3>Bien-\u00eatre et \u00e9panouissement<\/h3>\r\n                    <p>\r\n                        Des espaces con\u00e7us pour le bonheur et la r\u00e9ussite des \u00e9l\u00e8ves.\r\n                    <\/p>\r\n                <\/div>\r\n            <\/article>\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n<\/section>\r\n\r\n<style>\r\n.tm-spaces {\r\n    --tm-navy: #0b1f4d;\r\n    --tm-navy-dark: #04122e;\r\n    --tm-navy-light: #173765;\r\n    --tm-gold: #c79a3b;\r\n    --tm-gold-light: #efc861;\r\n    --tm-white: #ffffff;\r\n    --tm-cream: #f8f6f1;\r\n    --tm-text: #687287;\r\n    --tm-border: rgba(11, 31, 77, 0.15);\r\n\r\n    position: relative;\r\n    width: 100%;\r\n    padding: clamp(75px, 8vw, 125px) 0;\r\n    overflow: hidden;\r\n    background: #ffffff;\r\n}\r\n\r\n.tm-spaces,\r\n.tm-spaces * {\r\n    box-sizing: border-box;\r\n}\r\n\r\n.tm-spaces h2,\r\n.tm-spaces h3,\r\n.tm-spaces p,\r\n.tm-spaces ul {\r\n    margin-top: 0;\r\n}\r\n\r\n.tm-spaces img {\r\n    border: 0;\r\n}\r\n\r\n.tm-spaces__container {\r\n    width: min(1480px, calc(100% - clamp(32px, 6vw, 100px)));\r\n    margin: 0 auto;\r\n}\r\n\r\n.tm-spaces__header {\r\n    width: min(850px, 100%);\r\n    margin: 0 auto clamp(55px, 6vw, 85px);\r\n    text-align: center;\r\n}\r\n\r\n.tm-spaces__eyebrow {\r\n    display: inline-block;\r\n    margin-bottom: 17px;\r\n    color: var(--tm-gold);\r\n    font-family: \"Montserrat\", Arial, sans-serif;\r\n    font-size: 11px;\r\n    font-weight: 700;\r\n    letter-spacing: 0.24em;\r\n    text-transform: uppercase;\r\n}\r\n\r\n.tm-spaces__title {\r\n    margin-bottom: 22px;\r\n    color: var(--tm-navy);\r\n    font-family: Georgia, \"Times New Roman\", serif;\r\n    font-size: clamp(43px, 5vw, 72px);\r\n    font-weight: 500;\r\n    line-height: 1.05;\r\n    letter-spacing: -0.035em;\r\n}\r\n\r\n.tm-spaces__title em {\r\n    color: var(--tm-gold);\r\n    font-weight: inherit;\r\n}\r\n\r\n.tm-spaces__divider {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    margin-bottom: 22px;\r\n}\r\n\r\n.tm-spaces__divider::before,\r\n.tm-spaces__divider::after {\r\n    content: \"\";\r\n    width: 47px;\r\n    height: 1px;\r\n    background: rgba(199, 154, 59, 0.5);\r\n}\r\n\r\n.tm-spaces__divider span {\r\n    width: 8px;\r\n    height: 8px;\r\n    margin: 0 12px;\r\n    border: 1px solid var(--tm-gold);\r\n    transform: rotate(45deg);\r\n}\r\n\r\n.tm-spaces__subtitle {\r\n    max-width: 730px;\r\n    margin: 0 auto;\r\n    color: var(--tm-text);\r\n    font-family: \"Montserrat\", Arial, sans-serif;\r\n    font-size: clamp(15px, 1.3vw, 17px);\r\n    line-height: 1.8;\r\n}\r\n\r\n.tm-spaces__instruction {\r\n    margin: 18px 0 0;\r\n    color: var(--tm-gold);\r\n    font-family: \"Montserrat\", Arial, sans-serif;\r\n    font-size: 10px;\r\n    font-weight: 700;\r\n    line-height: 1.6;\r\n    letter-spacing: 0.1em;\r\n    text-transform: uppercase;\r\n}\r\n\r\n.tm-spaces__grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(4, minmax(0, 1fr));\r\n    gap: clamp(20px, 2vw, 30px);\r\n}\r\n\r\n.tm-space-card:nth-child(9) {\r\n    grid-column: 2;\r\n}\r\n\r\n.tm-space-card:nth-child(10) {\r\n    grid-column: 3;\r\n}\r\n\r\n.tm-space-card {\r\n    position: relative;\r\n    min-width: 0;\r\n    height: clamp(470px, 35vw, 545px);\r\n    perspective: 1700px;\r\n    cursor: pointer;\r\n    outline: none;\r\n    transition:\r\n        transform 0.4s ease,\r\n        filter 0.4s ease;\r\n}\r\n\r\n.tm-space-card__inner {\r\n    position: relative;\r\n    width: 100%;\r\n    height: 100%;\r\n    transform-style: preserve-3d;\r\n    transition: transform 0.85s cubic-bezier(0.2, 0.75, 0.2, 1);\r\n}\r\n\r\n.tm-space-card__face {\r\n    position: absolute;\r\n    inset: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    overflow: hidden;\r\n    border: 1px solid rgba(11, 31, 77, 0.28);\r\n    border-radius: 6px;\r\n    backface-visibility: hidden;\r\n    -webkit-backface-visibility: hidden;\r\n}\r\n\r\n.tm-space-card__front {\r\n    position: absolute;\r\n    inset: 0;\r\n    background: var(--tm-navy);\r\n    box-shadow: 0 20px 48px rgba(6, 23, 54, 0.16);\r\n}\r\n\r\n\/* IMAGE SUR 100 % DE LA CARTE *\/\r\n\r\n.tm-space-card__image {\r\n    position: absolute !important;\r\n    inset: 0 !important;\r\n    z-index: 1 !important;\r\n    display: block !important;\r\n    width: 100% !important;\r\n    min-width: 100% !important;\r\n    max-width: none !important;\r\n    height: 100% !important;\r\n    min-height: 100% !important;\r\n    max-height: none !important;\r\n    margin: 0 !important;\r\n    padding: 0 !important;\r\n    object-fit: cover !important;\r\n    object-position: center !important;\r\n    border: 0 !important;\r\n    border-radius: 0 !important;\r\n    transition: transform 1.1s ease;\r\n}\r\n\r\n.tm-space-card__overlay {\r\n    position: absolute !important;\r\n    inset: 0 !important;\r\n    z-index: 2 !important;\r\n    width: 100% !important;\r\n    height: 100% !important;\r\n    background:\r\n        linear-gradient(\r\n            180deg,\r\n            rgba(2, 11, 29, 0.06) 0%,\r\n            rgba(2, 11, 29, 0.1) 31%,\r\n            rgba(2, 11, 29, 0.38) 58%,\r\n            rgba(2, 11, 29, 0.82) 81%,\r\n            rgba(2, 11, 29, 0.98) 100%\r\n        ) !important;\r\n    pointer-events: none;\r\n}\r\n\r\n.tm-space-card__front::after {\r\n    content: \"\";\r\n    position: absolute;\r\n    inset: 19px;\r\n    z-index: 3;\r\n    border: 1px solid rgba(255, 255, 255, 0.35);\r\n    pointer-events: none;\r\n}\r\n\r\n.tm-space-card__top {\r\n    position: absolute;\r\n    top: 30px;\r\n    right: 30px;\r\n    left: 30px;\r\n    z-index: 4;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n}\r\n\r\n.tm-space-card__number {\r\n    color: var(--tm-gold-light);\r\n    font-family: \"Montserrat\", Arial, sans-serif;\r\n    font-size: 12px;\r\n    font-weight: 700;\r\n    letter-spacing: 0.14em;\r\n}\r\n\r\n.tm-space-card__icon {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    width: 55px;\r\n    height: 55px;\r\n    color: #ffffff;\r\n    background: rgba(11, 31, 77, 0.92);\r\n    border: 1px solid rgba(255, 255, 255, 0.29);\r\n    border-radius: 50%;\r\n    box-shadow: 0 8px 20px rgba(5, 20, 47, 0.2);\r\n    backdrop-filter: blur(8px);\r\n}\r\n\r\n.tm-space-card__icon svg {\r\n    width: 25px;\r\n    height: 25px;\r\n    fill: none;\r\n    stroke: currentColor;\r\n    stroke-width: 1.6;\r\n    stroke-linecap: round;\r\n    stroke-linejoin: round;\r\n}\r\n\r\n.tm-space-card__front-content {\r\n    position: absolute !important;\r\n    right: 33px !important;\r\n    bottom: 37px !important;\r\n    left: 33px !important;\r\n    z-index: 4 !important;\r\n    width: auto !important;\r\n    height: auto !important;\r\n    margin: 0 !important;\r\n    padding: 0 !important;\r\n    background: transparent !important;\r\n}\r\n\r\n.tm-space-card__category {\r\n    display: block;\r\n    margin-bottom: 11px;\r\n    color: var(--tm-gold-light);\r\n    background: transparent !important;\r\n    font-family: \"Montserrat\", Arial, sans-serif;\r\n    font-size: 10px;\r\n    font-weight: 700;\r\n    letter-spacing: 0.18em;\r\n    text-transform: uppercase;\r\n}\r\n\r\n.tm-space-card__front h3 {\r\n    min-height: 66px;\r\n    margin: 0 0 20px;\r\n    color: #ffffff;\r\n    background: transparent !important;\r\n    font-family: Georgia, \"Times New Roman\", serif;\r\n    font-size: clamp(26px, 2vw, 33px);\r\n    font-weight: 500;\r\n    line-height: 1.13;\r\n    text-shadow: 0 3px 14px rgba(0, 0, 0, 0.5);\r\n}\r\n\r\n.tm-space-card__discover {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 12px;\r\n    color: #ffffff;\r\n    background: transparent !important;\r\n    font-family: \"Montserrat\", Arial, sans-serif;\r\n    font-size: 10px;\r\n    font-weight: 700;\r\n    letter-spacing: 0.08em;\r\n    text-transform: uppercase;\r\n}\r\n\r\n.tm-space-card__discover strong {\r\n    color: var(--tm-gold-light);\r\n    font-size: 18px;\r\n}\r\n\r\n.tm-space-card__back {\r\n    display: flex;\r\n    padding: clamp(29px, 2.4vw, 42px);\r\n    color: #ffffff;\r\n    background:\r\n        linear-gradient(\r\n            145deg,\r\n            var(--tm-navy-light) 0%,\r\n            var(--tm-navy) 52%,\r\n            var(--tm-navy-dark) 100%\r\n        );\r\n    box-shadow: 0 30px 70px rgba(6, 23, 54, 0.25);\r\n    transform: rotateY(180deg);\r\n}\r\n\r\n.tm-space-card__back::before {\r\n    content: \"\";\r\n    position: absolute;\r\n    inset: 15px;\r\n    border: 1px solid rgba(199, 154, 59, 0.38);\r\n    pointer-events: none;\r\n}\r\n\r\n.tm-space-card__watermark {\r\n    position: absolute;\r\n    top: -10px;\r\n    right: 8px;\r\n    color: rgba(255, 255, 255, 0.035);\r\n    font-family: Georgia, \"Times New Roman\", serif;\r\n    font-size: 150px;\r\n    font-weight: 700;\r\n    line-height: 1;\r\n}\r\n\r\n.tm-space-card__back-content {\r\n    position: relative;\r\n    z-index: 2;\r\n    display: flex;\r\n    flex-direction: column;\r\n    width: 100%;\r\n    min-height: 100%;\r\n}\r\n\r\n.tm-space-card__back-label {\r\n    margin-bottom: 15px;\r\n    color: var(--tm-gold-light);\r\n    font-family: \"Montserrat\", Arial, sans-serif;\r\n    font-size: 10px;\r\n    font-weight: 700;\r\n    letter-spacing: 0.2em;\r\n    text-transform: uppercase;\r\n}\r\n\r\n.tm-space-card__back h3 {\r\n    margin-bottom: 19px;\r\n    color: #ffffff;\r\n    font-family: Georgia, \"Times New Roman\", serif;\r\n    font-size: clamp(27px, 2.1vw, 35px);\r\n    font-weight: 500;\r\n    line-height: 1.15;\r\n}\r\n\r\n.tm-space-card__line {\r\n    width: 50px;\r\n    height: 2px;\r\n    margin-bottom: 23px;\r\n    background: var(--tm-gold);\r\n}\r\n\r\n.tm-space-card__back p {\r\n    margin-bottom: 22px;\r\n    color: rgba(255, 255, 255, 0.82);\r\n    font-family: \"Montserrat\", Arial, sans-serif;\r\n    font-size: 13px;\r\n    line-height: 1.75;\r\n}\r\n\r\n.tm-space-card__back ul {\r\n    margin: 0 0 26px;\r\n    padding: 0;\r\n    list-style: none;\r\n}\r\n\r\n.tm-space-card__back li {\r\n    position: relative;\r\n    margin-bottom: 9px;\r\n    padding-left: 17px;\r\n    color: rgba(255, 255, 255, 0.92);\r\n    font-family: \"Montserrat\", Arial, sans-serif;\r\n    font-size: 12px;\r\n    line-height: 1.5;\r\n}\r\n\r\n.tm-space-card__back li::before {\r\n    content: \"\";\r\n    position: absolute;\r\n    top: 7px;\r\n    left: 0;\r\n    width: 5px;\r\n    height: 5px;\r\n    background: var(--tm-gold);\r\n    transform: rotate(45deg);\r\n}\r\n\r\n.tm-space-card__return {\r\n    align-self: flex-start;\r\n    margin-top: auto;\r\n    padding: 10px 0;\r\n    color: var(--tm-gold-light);\r\n    background: transparent;\r\n    border: 0;\r\n    border-bottom: 1px solid rgba(231, 195, 109, 0.55);\r\n    cursor: pointer;\r\n    font-family: \"Montserrat\", Arial, sans-serif;\r\n    font-size: 10px;\r\n    font-weight: 700;\r\n    letter-spacing: 0.1em;\r\n    text-transform: uppercase;\r\n}\r\n\r\n.tm-space-card.is-flipped .tm-space-card__inner {\r\n    transform: rotateY(180deg);\r\n}\r\n\r\n.tm-space-card:focus-visible {\r\n    outline: 3px solid rgba(199, 154, 59, 0.65);\r\n    outline-offset: 5px;\r\n}\r\n\r\n.tm-spaces__commitments {\r\n    display: grid;\r\n    grid-template-columns: repeat(4, minmax(0, 1fr));\r\n    margin-top: clamp(58px, 6vw, 88px);\r\n    background: var(--tm-cream);\r\n    border-top: 1px solid var(--tm-border);\r\n    border-bottom: 1px solid var(--tm-border);\r\n}\r\n\r\n.tm-commitment {\r\n    display: grid;\r\n    grid-template-columns: 58px 1fr;\r\n    align-items: center;\r\n    gap: 18px;\r\n    min-height: 145px;\r\n    padding: 27px 30px;\r\n    border-right: 1px solid var(--tm-border);\r\n    transition:\r\n        background-color 0.35s ease,\r\n        transform 0.35s ease;\r\n}\r\n\r\n.tm-commitment:last-child {\r\n    border-right: none;\r\n}\r\n\r\n.tm-commitment:hover {\r\n    background: #ffffff;\r\n    transform: translateY(-4px);\r\n}\r\n\r\n.tm-commitment__icon {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    width: 54px;\r\n    height: 54px;\r\n    color: var(--tm-navy);\r\n}\r\n\r\n.tm-commitment__icon svg {\r\n    width: 47px;\r\n    height: 47px;\r\n    fill: none;\r\n    stroke: currentColor;\r\n    stroke-width: 1.45;\r\n    stroke-linecap: round;\r\n    stroke-linejoin: round;\r\n}\r\n\r\n.tm-commitment h3 {\r\n    margin-bottom: 7px;\r\n    color: var(--tm-navy);\r\n    font-family: \"Montserrat\", Arial, sans-serif;\r\n    font-size: 14px;\r\n    font-weight: 700;\r\n    line-height: 1.35;\r\n}\r\n\r\n.tm-commitment p {\r\n    margin: 0;\r\n    color: var(--tm-text);\r\n    font-family: \"Montserrat\", Arial, sans-serif;\r\n    font-size: 12px;\r\n    line-height: 1.65;\r\n}\r\n\r\n@media (hover: hover) and (pointer: fine) {\r\n    .tm-space-card:hover {\r\n        z-index: 20;\r\n        transform: scale(1.025);\r\n        filter: drop-shadow(0 28px 28px rgba(5, 20, 47, 0.18));\r\n    }\r\n\r\n    .tm-space-card:hover .tm-space-card__inner {\r\n        transform: rotateY(180deg);\r\n    }\r\n\r\n    .tm-space-card:hover .tm-space-card__image {\r\n        transform: scale(1.055);\r\n    }\r\n}\r\n\r\n@media screen and (max-width: 1180px) {\r\n    .tm-spaces__grid {\r\n        grid-template-columns: repeat(2, minmax(0, 1fr));\r\n    }\r\n\r\n    .tm-space-card:nth-child(9),\r\n    .tm-space-card:nth-child(10) {\r\n        grid-column: auto;\r\n    }\r\n\r\n    .tm-space-card {\r\n        height: 530px;\r\n    }\r\n\r\n    .tm-spaces__commitments {\r\n        grid-template-columns: repeat(2, minmax(0, 1fr));\r\n    }\r\n\r\n    .tm-commitment:nth-child(2) {\r\n        border-right: none;\r\n    }\r\n\r\n    .tm-commitment:nth-child(-n+2) {\r\n        border-bottom: 1px solid var(--tm-border);\r\n    }\r\n}\r\n\r\n@media screen and (max-width: 767px) {\r\n    .tm-spaces {\r\n        padding: 70px 0;\r\n    }\r\n\r\n    .tm-spaces__container {\r\n        width: calc(100% - 30px);\r\n    }\r\n\r\n    .tm-spaces__header {\r\n        margin-bottom: 45px;\r\n    }\r\n\r\n    .tm-spaces__title {\r\n        font-size: clamp(39px, 12vw, 54px);\r\n    }\r\n\r\n    .tm-spaces__grid {\r\n        grid-template-columns: 1fr;\r\n        gap: 25px;\r\n    }\r\n\r\n    .tm-space-card {\r\n        height: min(555px, 145vw);\r\n        min-height: 490px;\r\n    }\r\n\r\n    .tm-space-card__top {\r\n        top: 27px;\r\n        right: 27px;\r\n        left: 27px;\r\n    }\r\n\r\n    .tm-space-card__front-content {\r\n        right: 29px !important;\r\n        bottom: 32px !important;\r\n        left: 29px !important;\r\n    }\r\n\r\n    .tm-space-card__front h3 {\r\n        min-height: 0;\r\n        font-size: 31px;\r\n    }\r\n\r\n    .tm-space-card__back {\r\n        padding: 35px 30px;\r\n    }\r\n\r\n    .tm-spaces__commitments {\r\n        grid-template-columns: 1fr;\r\n        margin-top: 58px;\r\n    }\r\n\r\n    .tm-commitment,\r\n    .tm-commitment:nth-child(2) {\r\n        min-height: 125px;\r\n        border-right: none;\r\n        border-bottom: 1px solid var(--tm-border);\r\n    }\r\n\r\n    .tm-commitment:last-child {\r\n        border-bottom: none;\r\n    }\r\n}\r\n\r\n@media screen and (max-width: 390px) {\r\n    .tm-spaces__container {\r\n        width: calc(100% - 22px);\r\n    }\r\n\r\n    .tm-space-card {\r\n        height: 510px;\r\n    }\r\n\r\n    .tm-space-card__front::after,\r\n    .tm-space-card__back::before {\r\n        inset: 11px;\r\n    }\r\n\r\n    .tm-space-card__top {\r\n        top: 23px;\r\n        right: 23px;\r\n        left: 23px;\r\n    }\r\n\r\n    .tm-space-card__front-content {\r\n        right: 24px !important;\r\n        bottom: 28px !important;\r\n        left: 24px !important;\r\n    }\r\n\r\n    .tm-space-card__back {\r\n        padding: 30px 25px;\r\n    }\r\n\r\n    .tm-commitment {\r\n        grid-template-columns: 50px 1fr;\r\n        padding: 25px 20px;\r\n    }\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n    .tm-space-card,\r\n    .tm-space-card__inner,\r\n    .tm-space-card__image,\r\n    .tm-commitment {\r\n        transition: none !important;\r\n    }\r\n}\r\n\r\n.elementor-widget-html:has(.tm-spaces),\r\n.elementor-widget-html:has(.tm-spaces) > .elementor-widget-container {\r\n    width: 100% !important;\r\n    max-width: none !important;\r\n    margin: 0 !important;\r\n    padding: 0 !important;\r\n}\r\n<\/style>\r\n\r\n<script>\r\n(function () {\r\n    \"use strict\";\r\n\r\n    const spaces = [\r\n        {\r\n            number: \"01\",\r\n            title: \"Classes adapt\u00e9es\",\r\n            category: \"Apprentissage\",\r\n            image: \"https:\/\/images.unsplash.com\/photo-1560785496-3c9d27877182?auto=format&fit=crop&w=1600&q=92\",\r\n            position: \"center\",\r\n            alt: \"Salle de classe tr\u00e8s moderne et \u00e9quip\u00e9e\",\r\n            description:\r\n                \"Des salles modernes, lumineuses et \u00e9quip\u00e9es d\u2019un mobilier adapt\u00e9 pour un apprentissage confortable, dynamique et efficace.\",\r\n            points: [\r\n                \"Salles modernes et lumineuses\",\r\n                \"\u00c9quipements p\u00e9dagogiques adapt\u00e9s\",\r\n                \"Mobilier confortable et contemporain\"\r\n            ],\r\n            icon: `\r\n                <svg viewBox=\"0 0 24 24\">\r\n                    <path d=\"M4 19v-7a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v7\"\/>\r\n                    <path d=\"M7 10V6a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v4\"\/>\r\n                    <path d=\"M2 19h20\"\/>\r\n                    <path d=\"M8 14h8\"\/>\r\n                <\/svg>\r\n            `\r\n        },\r\n        {\r\n            number: \"02\",\r\n            title: \"Biblioth\u00e8que\",\r\n            category: \"Culture\",\r\n            image: \"https:\/\/images.unsplash.com\/photo-1521587760476-6c12a4b040da?auto=format&fit=crop&w=1600&q=92\",\r\n            position: \"center\",\r\n            alt: \"Biblioth\u00e8que moderne\",\r\n            description:\r\n                \"Un espace calme et inspirant proposant un large choix d\u2019ouvrages en fran\u00e7ais, en anglais et en chinois.\",\r\n            points: [\r\n                \"Ouvrages multilingues\",\r\n                \"Espaces de lecture calmes\",\r\n                \"Ressources p\u00e9dagogiques vari\u00e9es\"\r\n            ],\r\n            icon: `\r\n                <svg viewBox=\"0 0 24 24\">\r\n                    <path d=\"M3 5.5A3.5 3.5 0 0 1 6.5 2H11v18H6.5A3.5 3.5 0 0 0 3 23z\"\/>\r\n                    <path d=\"M21 5.5A3.5 3.5 0 0 0 17.5 2H13v18h4.5A3.5 3.5 0 0 1 21 23z\"\/>\r\n                <\/svg>\r\n            `\r\n        },\r\n        {\r\n            number: \"03\",\r\n            title: \"Laboratoires des sciences\",\r\n            category: \"Sciences\",\r\n            image: \"https:\/\/images.unsplash.com\/photo-1532094349884-543bc11b234d?auto=format&fit=crop&w=1600&q=92\",\r\n            position: \"center\",\r\n            alt: \"Laboratoire scientifique moderne\",\r\n            description:\r\n                \"Des \u00e9quipements modernes pour r\u00e9aliser des exp\u00e9riences en physique, en chimie et en sciences de la vie.\",\r\n            points: [\r\n                \"Mat\u00e9riel scientifique moderne\",\r\n                \"Postes de travail s\u00e9curis\u00e9s\",\r\n                \"Apprentissage par l\u2019exp\u00e9rimentation\"\r\n            ],\r\n            icon: `\r\n                <svg viewBox=\"0 0 24 24\">\r\n                    <path d=\"M9 3h6\"\/>\r\n                    <path d=\"M10 3v6l-5.5 9.2A2 2 0 0 0 6.2 21h11.6a2 2 0 0 0 1.7-2.8L14 9V3\"\/>\r\n                    <path d=\"M7.5 16h9\"\/>\r\n                <\/svg>\r\n            `\r\n        },\r\n        {\r\n            number: \"04\",\r\n            title: \"Salle informatique\",\r\n            category: \"Num\u00e9rique\",\r\n            image: \"https:\/\/images.unsplash.com\/photo-1591799264318-7e6ef8ddb7ea?auto=format&fit=crop&w=1600&q=92\",\r\n            position: \"center\",\r\n            alt: \"Technicien travaillant sur une carte m\u00e8re informatique\",\r\n            description:\r\n                \"Un espace destin\u00e9 \u00e0 l\u2019informatique, \u00e0 la programmation, \u00e0 la maintenance mat\u00e9rielle et \u00e0 la culture num\u00e9rique.\",\r\n            points: [\r\n                \"D\u00e9couverte du mat\u00e9riel informatique\",\r\n                \"Programmation et outils num\u00e9riques\",\r\n                \"Maintenance et d\u00e9pannage informatique\"\r\n            ],\r\n            icon: `\r\n                <svg viewBox=\"0 0 24 24\">\r\n                    <rect x=\"3\" y=\"4\" width=\"18\" height=\"12\" rx=\"1\"\/>\r\n                    <path d=\"M8 21h8\"\/>\r\n                    <path d=\"M12 16v5\"\/>\r\n                <\/svg>\r\n            `\r\n        },\r\n        {\r\n            number: \"05\",\r\n            title: \"Atelier de cr\u00e9ativit\u00e9\",\r\n            category: \"Cr\u00e9ativit\u00e9\",\r\n            image: \"https:\/\/images.unsplash.com\/photo-1549490349-8643362247b5?auto=format&fit=crop&w=1600&q=92\",\r\n            position: \"center\",\r\n            alt: \"Cr\u00e9ation artistique abstraite\",\r\n            description:\r\n                \"Un espace consacr\u00e9 aux arts, \u00e0 la cr\u00e9ation, \u00e0 l\u2019expression personnelle et au d\u00e9veloppement de l\u2019imagination.\",\r\n            points: [\r\n                \"Arts visuels et travaux manuels\",\r\n                \"Projets cr\u00e9atifs individuels\",\r\n                \"Activit\u00e9s collaboratives\"\r\n            ],\r\n            icon: `\r\n                <svg viewBox=\"0 0 24 24\">\r\n                    <path d=\"M12 3a9 9 0 1 0 0 18h1.5a2 2 0 0 0 0-4H12a1.5 1.5 0 0 1 0-3h2a7 7 0 0 0-2-11z\"\/>\r\n                    <circle cx=\"7.5\" cy=\"10\" r=\".7\"\/>\r\n                    <circle cx=\"9.5\" cy=\"6.8\" r=\".7\"\/>\r\n                    <circle cx=\"14\" cy=\"6.5\" r=\".7\"\/>\r\n                    <circle cx=\"17\" cy=\"9\" r=\".7\"\/>\r\n                <\/svg>\r\n            `\r\n        },\r\n        {\r\n            number: \"06\",\r\n            title: \"Terrains de sport\",\r\n            category: \"Sport\",\r\n            image: \"https:\/\/images.unsplash.com\/photo-1526232761682-d26e03ac148e?auto=format&fit=crop&w=1600&q=92\",\r\n            position: \"center\",\r\n            alt: \"Terrain de football\",\r\n            description:\r\n                \"Des terrains permettant aux \u00e9l\u00e8ves de pratiquer le football, le basket-ball et diff\u00e9rentes activit\u00e9s physiques.\",\r\n            points: [\r\n                \"Terrain de football\",\r\n                \"Basket-ball et sports collectifs\",\r\n                \"Activit\u00e9s physiques encadr\u00e9es\"\r\n            ],\r\n            icon: `\r\n                <svg viewBox=\"0 0 24 24\">\r\n                    <circle cx=\"12\" cy=\"12\" r=\"9\"\/>\r\n                    <path d=\"m8.5 5.8 3.5 2.6 3.5-2.6\"\/>\r\n                    <path d=\"m6.5 14 2-3.8\"\/>\r\n                    <path d=\"m17.5 14-2-3.8\"\/>\r\n                    <path d=\"m8 18 4-2.7 4 2.7\"\/>\r\n                <\/svg>\r\n            `\r\n        },\r\n        {\r\n            number: \"07\",\r\n            title: \"Natation\",\r\n            category: \"Sport aquatique\",\r\n            image: \"https:\/\/images.unsplash.com\/photo-1576610616656-d3aa5d1f4534?auto=format&fit=crop&w=1600&q=92\",\r\n            position: \"center\",\r\n            alt: \"Piscine olympique avec des couloirs de natation\",\r\n            description:\r\n                \"Une piscine olympique destin\u00e9e \u00e0 l\u2019apprentissage de la natation, \u00e0 l\u2019entra\u00eenement et au d\u00e9veloppement de la confiance dans l\u2019eau.\",\r\n            points: [\r\n                \"Piscine olympique avec couloirs\",\r\n                \"Apprentissage progressif de la natation\",\r\n                \"Encadrement et s\u00e9curit\u00e9\"\r\n            ],\r\n            icon: `\r\n                <svg viewBox=\"0 0 24 24\">\r\n                    <path d=\"M2 17c2 0 2-2 4-2s2 2 4 2 2-2 4-2 2 2 4 2 2-2 4-2\"\/>\r\n                    <path d=\"M2 21c2 0 2-2 4-2s2 2 4 2 2-2 4-2 2 2 4 2 2-2 4-2\"\/>\r\n                    <path d=\"M8 12V6a3 3 0 0 1 6 0\"\/>\r\n                    <path d=\"M8 9h6\"\/>\r\n                <\/svg>\r\n            `\r\n        },\r\n        {\r\n            number: \"08\",\r\n            title: \"Cantine\",\r\n            category: \"Restauration\",\r\n            image: \"https:\/\/images.unsplash.com\/photo-1567521464027-f127ff144326?auto=format&fit=crop&w=1600&q=92\",\r\n            position: \"center\",\r\n            alt: \"Cantine moderne et lumineuse\",\r\n            description:\r\n                \"Un environnement propre et convivial proposant des repas \u00e9quilibr\u00e9s dans de bonnes conditions de confort et d\u2019hygi\u00e8ne.\",\r\n            points: [\r\n                \"Repas \u00e9quilibr\u00e9s\",\r\n                \"Hygi\u00e8ne rigoureuse\",\r\n                \"Espace accueillant et surveill\u00e9\"\r\n            ],\r\n            icon: `\r\n                <svg viewBox=\"0 0 24 24\">\r\n                    <path d=\"M7 3v8\"\/>\r\n                    <path d=\"M4 3v5a3 3 0 0 0 6 0V3\"\/>\r\n                    <path d=\"M7 11v10\"\/>\r\n                    <path d=\"M16 3v18\"\/>\r\n                    <path d=\"M16 3c3 2 4 5 4 8h-4\"\/>\r\n                <\/svg>\r\n            `\r\n        },\r\n        {\r\n            number: \"09\",\r\n            title: \"Espaces verts\",\r\n            category: \"Nature\",\r\n            image: \"https:\/\/images.unsplash.com\/photo-1497250681960-ef046c08a56e?auto=format&fit=crop&w=1600&q=92\",\r\n            position: \"center\",\r\n            alt: \"Espace vert avec des arbres et de la v\u00e9g\u00e9tation\",\r\n            description:\r\n                \"Des espaces verts soigneusement am\u00e9nag\u00e9s pour se d\u00e9tendre, lire, \u00e9changer et se ressourcer dans la nature.\",\r\n            points: [\r\n                \"Zones ombrag\u00e9es et arbor\u00e9es\",\r\n                \"Espaces de d\u00e9tente\",\r\n                \"Environnement agr\u00e9able\"\r\n            ],\r\n            icon: `\r\n                <svg viewBox=\"0 0 24 24\">\r\n                    <path d=\"M20 4C12 4 6 8 6 15c0 3 2 5 5 5 7 0 9-8 9-16Z\"\/>\r\n                    <path d=\"M4 21c3-6 7-10 13-13\"\/>\r\n                <\/svg>\r\n            `\r\n        },\r\n        {\r\n            number: \"10\",\r\n            title: \"Infirmerie\",\r\n            category: \"Sant\u00e9\",\r\n            image: \"https:\/\/images.unsplash.com\/photo-1516841273335-e39b37888115?auto=format&fit=crop&w=1600&q=92\",\r\n            position: \"center\",\r\n            alt: \"Personnel m\u00e9dical dans un \u00e9tablissement de sant\u00e9\",\r\n            description:\r\n                \"Une infirmerie \u00e9quip\u00e9e et un personnel attentif pour assurer la sant\u00e9, le bien-\u00eatre et la s\u00e9curit\u00e9 des \u00e9l\u00e8ves.\",\r\n            points: [\r\n                \"Premiers soins\",\r\n                \"Espace propre et \u00e9quip\u00e9\",\r\n                \"Suivi attentif des \u00e9l\u00e8ves\"\r\n            ],\r\n            icon: `\r\n                <svg viewBox=\"0 0 24 24\">\r\n                    <rect x=\"4\" y=\"4\" width=\"16\" height=\"16\" rx=\"3\"\/>\r\n                    <path d=\"M12 8v8\"\/>\r\n                    <path d=\"M8 12h8\"\/>\r\n                <\/svg>\r\n            `\r\n        }\r\n    ];\r\n\r\n    function createCard(space) {\r\n        const points = space.points\r\n            .map(function (point) {\r\n                return \"<li>\" + point + \"<\/li>\";\r\n            })\r\n            .join(\"\");\r\n\r\n        return `\r\n            <article\r\n                class=\"tm-space-card\"\r\n                tabindex=\"0\"\r\n                role=\"button\"\r\n                aria-label=\"D\u00e9couvrir : ${space.title}\"\r\n                aria-pressed=\"false\"\r\n            >\r\n                <div class=\"tm-space-card__inner\">\r\n\r\n                    <div class=\"tm-space-card__face tm-space-card__front\">\r\n\r\n                        <img decoding=\"async\"\r\n                            class=\"tm-space-card__image\"\r\n                            src=\"${space.image}\"\r\n                            alt=\"${space.alt}\"\r\n                            loading=\"lazy\"\r\n                            style=\"object-position:${space.position};\"\r\n                        >\r\n\r\n                        <div class=\"tm-space-card__overlay\"><\/div>\r\n\r\n                        <div class=\"tm-space-card__top\">\r\n                            <span class=\"tm-space-card__number\">\r\n                                ${space.number}\r\n                            <\/span>\r\n\r\n                            <span class=\"tm-space-card__icon\">\r\n                                ${space.icon}\r\n                            <\/span>\r\n                        <\/div>\r\n\r\n                        <div class=\"tm-space-card__front-content\">\r\n                            <span class=\"tm-space-card__category\">\r\n                                ${space.category}\r\n                            <\/span>\r\n\r\n                            <h3>${space.title}<\/h3>\r\n\r\n                            <span class=\"tm-space-card__discover\">\r\n                                D\u00e9couvrir\r\n                                <strong>\u2192<\/strong>\r\n                            <\/span>\r\n                        <\/div>\r\n\r\n                    <\/div>\r\n\r\n                    <div class=\"tm-space-card__face tm-space-card__back\">\r\n\r\n                        <div class=\"tm-space-card__watermark\">\r\n                            ${space.number}\r\n                        <\/div>\r\n\r\n                        <div class=\"tm-space-card__back-content\">\r\n                            <span class=\"tm-space-card__back-label\">\r\n                                ${space.category}\r\n                            <\/span>\r\n\r\n                            <h3>${space.title}<\/h3>\r\n\r\n                            <div class=\"tm-space-card__line\"><\/div>\r\n\r\n                            <p>${space.description}<\/p>\r\n\r\n                            <ul>${points}<\/ul>\r\n\r\n                            <button\r\n                                type=\"button\"\r\n                                class=\"tm-space-card__return\"\r\n                            >\r\n                                Retourner la carte\r\n                            <\/button>\r\n                        <\/div>\r\n\r\n                    <\/div>\r\n\r\n                <\/div>\r\n            <\/article>\r\n        `;\r\n    }\r\n\r\n    function initializeSpaces() {\r\n        const section = document.querySelector(\".tm-spaces\");\r\n        const grid = document.getElementById(\"tm-spaces-grid\");\r\n\r\n        if (!section || !grid) {\r\n            return;\r\n        }\r\n\r\n        if (!grid.dataset.created) {\r\n            grid.innerHTML = spaces.map(createCard).join(\"\");\r\n            grid.dataset.created = \"true\";\r\n        }\r\n\r\n        if (section.dataset.initialized === \"true\") {\r\n            return;\r\n        }\r\n\r\n        section.dataset.initialized = \"true\";\r\n\r\n        const cards = section.querySelectorAll(\".tm-space-card\");\r\n\r\n        function closeOtherCards(activeCard) {\r\n            cards.forEach(function (card) {\r\n                if (card !== activeCard) {\r\n                    card.classList.remove(\"is-flipped\");\r\n                    card.setAttribute(\"aria-pressed\", \"false\");\r\n                }\r\n            });\r\n        }\r\n\r\n        function setCardState(card, state) {\r\n            const shouldOpen =\r\n                typeof state === \"boolean\"\r\n                    ? state\r\n                    : !card.classList.contains(\"is-flipped\");\r\n\r\n            if (shouldOpen) {\r\n                closeOtherCards(card);\r\n            }\r\n\r\n            card.classList.toggle(\"is-flipped\", shouldOpen);\r\n            card.setAttribute(\r\n                \"aria-pressed\",\r\n                shouldOpen ? \"true\" : \"false\"\r\n            );\r\n        }\r\n\r\n        cards.forEach(function (card) {\r\n            card.addEventListener(\"click\", function (event) {\r\n                const returnButton =\r\n                    event.target.closest(\".tm-space-card__return\");\r\n\r\n                if (returnButton) {\r\n                    event.stopPropagation();\r\n                    setCardState(card, false);\r\n                    return;\r\n                }\r\n\r\n                setCardState(card);\r\n            });\r\n\r\n            card.addEventListener(\"keydown\", function (event) {\r\n                if (event.key === \"Enter\" || event.key === \" \") {\r\n                    event.preventDefault();\r\n                    setCardState(card);\r\n                }\r\n\r\n                if (event.key === \"Escape\") {\r\n                    setCardState(card, false);\r\n                }\r\n            });\r\n        });\r\n    }\r\n\r\n    if (document.readyState === \"loading\") {\r\n        document.addEventListener(\r\n            \"DOMContentLoaded\",\r\n            initializeSpaces\r\n        );\r\n    } else {\r\n        initializeSpaces();\r\n    }\r\n\r\n    window.addEventListener(\"load\", initializeSpaces);\r\n\r\n    setTimeout(initializeSpaces, 300);\r\n    setTimeout(initializeSpaces, 900);\r\n    setTimeout(initializeSpaces, 1800);\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<div class=\"elementor-element elementor-element-097aedd e-flex e-con-boxed e-con e-parent\" data-id=\"097aedd\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a472a63 elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"a472a63\" 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 NOS ENGAGEMENTS\r\nVERSION COMPL\u00c8TE CORRIG\u00c9E\r\nHTML + CSS + GSAP + JAVASCRIPT\r\n========================================================= -->\r\n\r\n<section class=\"te-engagements\" id=\"nos-engagements\">\r\n\r\n    <div class=\"te-container\">\r\n\r\n        <!-- =====================================================\r\n        EN-T\u00caTE\r\n        ====================================================== -->\r\n\r\n        <header class=\"te-header\">\r\n\r\n            <div class=\"te-header__title\">\r\n\r\n                <span class=\"te-eyebrow\">\r\n                    Section 05\r\n                <\/span>\r\n\r\n                <h2>\r\n                    Nos engagements\r\n                    <em>au quotidien<\/em>\r\n                <\/h2>\r\n\r\n            <\/div>\r\n\r\n            <div class=\"te-header__intro\">\r\n\r\n                <span class=\"te-header__line\"><\/span>\r\n\r\n                <p>\r\n                    Chaque d\u00e9cision est guid\u00e9e par une ambition essentielle :\r\n                    offrir \u00e0 chaque \u00e9l\u00e8ve les meilleures conditions pour apprendre,\r\n                    progresser, s\u2019\u00e9panouir et construire durablement sa r\u00e9ussite.\r\n                <\/p>\r\n\r\n            <\/div>\r\n\r\n        <\/header>\r\n\r\n        <!-- =====================================================\r\n        STORYTELLING DESKTOP\r\n        ====================================================== -->\r\n\r\n        <div class=\"te-story\" data-te-story>\r\n\r\n            <div class=\"te-sticky\">\r\n\r\n                <div class=\"te-stage\">\r\n\r\n                    <!-- =================================================\r\n                    PANNEAU BLEU\r\n                    ================================================== -->\r\n\r\n                    <aside class=\"te-panel\">\r\n\r\n                        <div class=\"te-panel__frame\"><\/div>\r\n\r\n                        <div class=\"te-panel__decor\" aria-hidden=\"true\">\r\n\r\n                            <span class=\"te-panel__ring te-panel__ring--one\"><\/span>\r\n\r\n                            <span class=\"te-panel__ring te-panel__ring--two\"><\/span>\r\n\r\n                            <span class=\"te-panel__curve\"><\/span>\r\n\r\n                        <\/div>\r\n\r\n                        <div class=\"te-panel__header\">\r\n\r\n                            <span>\r\n                                Notre engagement\r\n                            <\/span>\r\n\r\n                            <span data-te-counter>\r\n                                01 \/ 04\r\n                            <\/span>\r\n\r\n                        <\/div>\r\n\r\n                        <div class=\"te-panel__slides\">\r\n\r\n                            <!-- SLIDE BLEUE 01 -->\r\n\r\n                            <article\r\n                                class=\"te-blue-slide is-active\"\r\n                                data-te-blue-slide\r\n                                data-index=\"0\"\r\n                            >\r\n\r\n                                <span class=\"te-blue-slide__number\">\r\n                                    01\r\n                                <\/span>\r\n\r\n                                <div class=\"te-blue-slide__content\">\r\n\r\n                                    <div class=\"te-blue-slide__icon\">\r\n\r\n                                        <svg viewBox=\"0 0 24 24\">\r\n                                            <path d=\"M12 3 3 7.5 12 12l9-4.5L12 3Z\"><\/path>\r\n                                            <path d=\"M6 10v5.5C6 18 8.7 20 12 20s6-2 6-4.5V10\"><\/path>\r\n                                            <path d=\"M21 8v6\"><\/path>\r\n                                        <\/svg>\r\n\r\n                                    <\/div>\r\n\r\n                                    <span class=\"te-blue-slide__kicker\">\r\n                                        Exigence\r\n                                    <\/span>\r\n\r\n                                    <div class=\"te-blue-slide__title-mask\">\r\n\r\n                                        <h3>\r\n                                            Excellence acad\u00e9mique\r\n                                        <\/h3>\r\n\r\n                                    <\/div>\r\n\r\n                                    <p>\r\n                                        Des programmes exigeants, une p\u00e9dagogie\r\n                                        structur\u00e9e et des enseignants engag\u00e9s pour\r\n                                        permettre \u00e0 chaque \u00e9l\u00e8ve de d\u00e9velopper\r\n                                        pleinement son potentiel.\r\n                                    <\/p>\r\n\r\n                                    <span class=\"te-blue-slide__signature\">\r\n                                        Apprendre avec exigence\r\n                                    <\/span>\r\n\r\n                                <\/div>\r\n\r\n                            <\/article>\r\n\r\n                            <!-- SLIDE BLEUE 02 -->\r\n\r\n                            <article\r\n                                class=\"te-blue-slide\"\r\n                                data-te-blue-slide\r\n                                data-index=\"1\"\r\n                            >\r\n\r\n                                <span class=\"te-blue-slide__number\">\r\n                                    02\r\n                                <\/span>\r\n\r\n                                <div class=\"te-blue-slide__content\">\r\n\r\n                                    <div class=\"te-blue-slide__icon\">\r\n\r\n                                        <svg viewBox=\"0 0 24 24\">\r\n                                            <circle cx=\"8\" cy=\"8\" r=\"3\"><\/circle>\r\n                                            <circle cx=\"17\" cy=\"7\" r=\"2.5\"><\/circle>\r\n                                            <path d=\"M3 20c.5-4 2.4-6 5-6s4.5 2 5 6\"><\/path>\r\n                                            <path d=\"M14 13.5c.8-.8 1.8-1.2 3-1.2 2.4 0 3.8 1.8 4 4.7\"><\/path>\r\n                                        <\/svg>\r\n\r\n                                    <\/div>\r\n\r\n                                    <span class=\"te-blue-slide__kicker\">\r\n                                        Accompagnement\r\n                                    <\/span>\r\n\r\n                                    <div class=\"te-blue-slide__title-mask\">\r\n\r\n                                        <h3>\r\n                                            Suivi personnalis\u00e9\r\n                                        <\/h3>\r\n\r\n                                    <\/div>\r\n\r\n                                    <p>\r\n                                        Chaque \u00e9l\u00e8ve b\u00e9n\u00e9ficie d\u2019une attention\r\n                                        r\u00e9guli\u00e8re, d\u2019objectifs adapt\u00e9s et d\u2019un\r\n                                        accompagnement individualis\u00e9 afin de\r\n                                        progresser \u00e0 son propre rythme.\r\n                                    <\/p>\r\n\r\n                                    <span class=\"te-blue-slide__signature\">\r\n                                        Faire progresser chacun\r\n                                    <\/span>\r\n\r\n                                <\/div>\r\n\r\n                            <\/article>\r\n\r\n                            <!-- SLIDE BLEUE 03 -->\r\n\r\n                            <article\r\n                                class=\"te-blue-slide\"\r\n                                data-te-blue-slide\r\n                                data-index=\"2\"\r\n                            >\r\n\r\n                                <span class=\"te-blue-slide__number\">\r\n                                    03\r\n                                <\/span>\r\n\r\n                                <div class=\"te-blue-slide__content\">\r\n\r\n                                    <div class=\"te-blue-slide__icon\">\r\n\r\n                                        <svg viewBox=\"0 0 24 24\">\r\n                                            <path d=\"M12 3 4.5 6v5.5c0 4.8 3 8.5 7.5 10 4.5-1.5 7.5-5.2 7.5-10V6L12 3Z\"><\/path>\r\n                                            <path d=\"m8.5 12 2.2 2.2 4.8-5\"><\/path>\r\n                                        <\/svg>\r\n\r\n                                    <\/div>\r\n\r\n                                    <span class=\"te-blue-slide__kicker\">\r\n                                        Bienveillance\r\n                                    <\/span>\r\n\r\n                                    <div class=\"te-blue-slide__title-mask\">\r\n\r\n                                        <h3>\r\n                                            S\u00e9curit\u00e9 et bien-\u00eatre\r\n                                        <\/h3>\r\n\r\n                                    <\/div>\r\n\r\n                                    <p>\r\n                                        Un environnement structur\u00e9, s\u00e9curis\u00e9 et\r\n                                        bienveillant dans lequel chaque \u00e9l\u00e8ve peut\r\n                                        apprendre avec s\u00e9r\u00e9nit\u00e9, confiance et\r\n                                        stabilit\u00e9.\r\n                                    <\/p>\r\n\r\n                                    <span class=\"te-blue-slide__signature\">\r\n                                        Grandir avec confiance\r\n                                    <\/span>\r\n\r\n                                <\/div>\r\n\r\n                            <\/article>\r\n\r\n                            <!-- SLIDE BLEUE 04 -->\r\n\r\n                            <article\r\n                                class=\"te-blue-slide\"\r\n                                data-te-blue-slide\r\n                                data-index=\"3\"\r\n                            >\r\n\r\n                                <span class=\"te-blue-slide__number\">\r\n                                    04\r\n                                <\/span>\r\n\r\n                                <div class=\"te-blue-slide__content\">\r\n\r\n                                    <div class=\"te-blue-slide__icon\">\r\n\r\n                                        <svg viewBox=\"0 0 24 24\">\r\n                                            <circle cx=\"12\" cy=\"12\" r=\"9\"><\/circle>\r\n                                            <path d=\"M3 12h18\"><\/path>\r\n                                            <path d=\"M12 3c2.5 2.5 4 5.5 4 9s-1.5 6.5-4 9\"><\/path>\r\n                                            <path d=\"M12 3c-2.5 2.5-4 5.5-4 9s1.5 6.5 4 9\"><\/path>\r\n                                        <\/svg>\r\n\r\n                                    <\/div>\r\n\r\n                                    <span class=\"te-blue-slide__kicker\">\r\n                                        International\r\n                                    <\/span>\r\n\r\n                                    <div class=\"te-blue-slide__title-mask\">\r\n\r\n                                        <h3>\r\n                                            Ouverture internationale\r\n                                        <\/h3>\r\n\r\n                                    <\/div>\r\n\r\n                                    <p>\r\n                                        Une \u00e9ducation tourn\u00e9e vers les langues,\r\n                                        les cultures et les comp\u00e9tences indispensables\r\n                                        pour r\u00e9ussir dans un monde connect\u00e9 et en\r\n                                        constante \u00e9volution.\r\n                                    <\/p>\r\n\r\n                                    <span class=\"te-blue-slide__signature\">\r\n                                        S\u2019ouvrir au monde\r\n                                    <\/span>\r\n\r\n                                <\/div>\r\n\r\n                            <\/article>\r\n\r\n                        <\/div>\r\n\r\n                        <!-- PIED DU PANNEAU -->\r\n\r\n                        <div class=\"te-panel__footer\">\r\n\r\n                            <div class=\"te-progress\">\r\n\r\n                                <span data-te-progress><\/span>\r\n\r\n                            <\/div>\r\n\r\n                            <div class=\"te-progress__numbers\">\r\n\r\n                                <span>01<\/span>\r\n                                <span>04<\/span>\r\n\r\n                            <\/div>\r\n\r\n                            <div class=\"te-panel__navigation\">\r\n\r\n                                <div class=\"te-dots\">\r\n\r\n                                    <button\r\n                                        type=\"button\"\r\n                                        class=\"is-active\"\r\n                                        data-te-dot=\"0\"\r\n                                        aria-label=\"Engagement 1\"\r\n                                    ><\/button>\r\n\r\n                                    <button\r\n                                        type=\"button\"\r\n                                        data-te-dot=\"1\"\r\n                                        aria-label=\"Engagement 2\"\r\n                                    ><\/button>\r\n\r\n                                    <button\r\n                                        type=\"button\"\r\n                                        data-te-dot=\"2\"\r\n                                        aria-label=\"Engagement 3\"\r\n                                    ><\/button>\r\n\r\n                                    <button\r\n                                        type=\"button\"\r\n                                        data-te-dot=\"3\"\r\n                                        aria-label=\"Engagement 4\"\r\n                                    ><\/button>\r\n\r\n                                <\/div>\r\n\r\n                                <span class=\"te-scroll-label\">\r\n                                    D\u00e9filer \u2193\r\n                                <\/span>\r\n\r\n                            <\/div>\r\n\r\n                        <\/div>\r\n\r\n                    <\/aside>\r\n\r\n                    <!-- =================================================\r\n                    RAIL CENTRAL\r\n                    ================================================== -->\r\n\r\n                    <div class=\"te-rail\" aria-hidden=\"true\">\r\n\r\n                        <span class=\"te-rail__track\"><\/span>\r\n\r\n                        <span\r\n                            class=\"te-rail__progress\"\r\n                            data-te-rail-progress\r\n                        ><\/span>\r\n\r\n                        <span\r\n                            class=\"te-rail__dot\"\r\n                            data-te-rail-dot\r\n                        ><\/span>\r\n\r\n                    <\/div>\r\n\r\n                    <!-- =================================================\r\n                    PANNEAU BLANC\r\n                    ================================================== -->\r\n\r\n                    <div class=\"te-white-panel\">\r\n\r\n                        <!-- SC\u00c8NE BLANCHE 01 -->\r\n\r\n                        <article\r\n                            class=\"te-white-slide is-active\"\r\n                            data-te-white-slide\r\n                            data-index=\"0\"\r\n                        >\r\n\r\n                            <div class=\"te-white-slide__top\">\r\n\r\n                                <div class=\"te-white-slide__meta\">\r\n\r\n                                    <span>01<\/span>\r\n                                    <i><\/i>\r\n                                    <strong>Excellence<\/strong>\r\n\r\n                                <\/div>\r\n\r\n                                <div class=\"te-white-slide__icon\">\r\n\r\n                                    <svg viewBox=\"0 0 24 24\">\r\n                                        <path d=\"M12 3 3 7.5 12 12l9-4.5L12 3Z\"><\/path>\r\n                                        <path d=\"M6 10v5.5C6 18 8.7 20 12 20s6-2 6-4.5V10\"><\/path>\r\n                                        <path d=\"M21 8v6\"><\/path>\r\n                                    <\/svg>\r\n\r\n                                <\/div>\r\n\r\n                            <\/div>\r\n\r\n                            <div class=\"te-white-slide__title-mask\">\r\n\r\n                                <h3>\r\n                                    Excellence acad\u00e9mique\r\n                                <\/h3>\r\n\r\n                            <\/div>\r\n\r\n                            <p>\r\n                                Nous proposons des programmes rigoureux, progressifs\r\n                                et adapt\u00e9s aux besoins de chaque niveau. Nos enseignants\r\n                                accompagnent les \u00e9l\u00e8ves avec exigence afin de consolider\r\n                                les connaissances fondamentales, la m\u00e9thode et\r\n                                l\u2019autonomie intellectuelle.\r\n                            <\/p>\r\n\r\n                            <div class=\"te-tags\">\r\n\r\n                                <span>Programmes structur\u00e9s<\/span>\r\n                                <span>P\u00e9dagogie moderne<\/span>\r\n                                <span>Progression mesurable<\/span>\r\n\r\n                            <\/div>\r\n\r\n                            <footer class=\"te-white-slide__footer\">\r\n\r\n                                <span>\r\n                                    Apprendre avec exigence\r\n                                <\/span>\r\n\r\n                                <strong>\r\n                                    01\r\n                                <\/strong>\r\n\r\n                            <\/footer>\r\n\r\n                        <\/article>\r\n\r\n                        <!-- SC\u00c8NE BLANCHE 02 -->\r\n\r\n                        <article\r\n                            class=\"te-white-slide\"\r\n                            data-te-white-slide\r\n                            data-index=\"1\"\r\n                        >\r\n\r\n                            <div class=\"te-white-slide__top\">\r\n\r\n                                <div class=\"te-white-slide__meta\">\r\n\r\n                                    <span>02<\/span>\r\n                                    <i><\/i>\r\n                                    <strong>Accompagnement<\/strong>\r\n\r\n                                <\/div>\r\n\r\n                                <div class=\"te-white-slide__icon\">\r\n\r\n                                    <svg viewBox=\"0 0 24 24\">\r\n                                        <circle cx=\"8\" cy=\"8\" r=\"3\"><\/circle>\r\n                                        <circle cx=\"17\" cy=\"7\" r=\"2.5\"><\/circle>\r\n                                        <path d=\"M3 20c.5-4 2.4-6 5-6s4.5 2 5 6\"><\/path>\r\n                                        <path d=\"M14 13.5c.8-.8 1.8-1.2 3-1.2 2.4 0 3.8 1.8 4 4.7\"><\/path>\r\n                                    <\/svg>\r\n\r\n                                <\/div>\r\n\r\n                            <\/div>\r\n\r\n                            <div class=\"te-white-slide__title-mask\">\r\n\r\n                                <h3>\r\n                                    Suivi personnalis\u00e9\r\n                                <\/h3>\r\n\r\n                            <\/div>\r\n\r\n                            <p>\r\n                                Chaque \u00e9l\u00e8ve est consid\u00e9r\u00e9 dans son individualit\u00e9.\r\n                                Les progr\u00e8s sont observ\u00e9s r\u00e9guli\u00e8rement afin\r\n                                d\u2019identifier ses forces, ses besoins et ses axes\r\n                                d\u2019am\u00e9lioration, puis de proposer un accompagnement\r\n                                r\u00e9ellement adapt\u00e9.\r\n                            <\/p>\r\n\r\n                            <div class=\"te-tags\">\r\n\r\n                                <span>Objectifs individualis\u00e9s<\/span>\r\n                                <span>Suivi r\u00e9gulier<\/span>\r\n                                <span>Dialogue avec les familles<\/span>\r\n\r\n                            <\/div>\r\n\r\n                            <footer class=\"te-white-slide__footer\">\r\n\r\n                                <span>\r\n                                    Faire progresser chacun\r\n                                <\/span>\r\n\r\n                                <strong>\r\n                                    02\r\n                                <\/strong>\r\n\r\n                            <\/footer>\r\n\r\n                        <\/article>\r\n\r\n                        <!-- SC\u00c8NE BLANCHE 03 -->\r\n\r\n                        <article\r\n                            class=\"te-white-slide\"\r\n                            data-te-white-slide\r\n                            data-index=\"2\"\r\n                        >\r\n\r\n                            <div class=\"te-white-slide__top\">\r\n\r\n                                <div class=\"te-white-slide__meta\">\r\n\r\n                                    <span>03<\/span>\r\n                                    <i><\/i>\r\n                                    <strong>Bien-\u00eatre<\/strong>\r\n\r\n                                <\/div>\r\n\r\n                                <div class=\"te-white-slide__icon\">\r\n\r\n                                    <svg viewBox=\"0 0 24 24\">\r\n                                        <path d=\"M12 3 4.5 6v5.5c0 4.8 3 8.5 7.5 10 4.5-1.5 7.5-5.2 7.5-10V6L12 3Z\"><\/path>\r\n                                        <path d=\"m8.5 12 2.2 2.2 4.8-5\"><\/path>\r\n                                    <\/svg>\r\n\r\n                                <\/div>\r\n\r\n                            <\/div>\r\n\r\n                            <div class=\"te-white-slide__title-mask\">\r\n\r\n                                <h3>\r\n                                    S\u00e9curit\u00e9 et bien-\u00eatre\r\n                                <\/h3>\r\n\r\n                            <\/div>\r\n\r\n                            <p>\r\n                                L\u2019Institut TOMETAL accorde une attention particuli\u00e8re\r\n                                \u00e0 la s\u00e9curit\u00e9 physique, \u00e9motionnelle et scolaire.\r\n                                Les \u00e9l\u00e8ves \u00e9voluent dans un cadre structur\u00e9, attentif\r\n                                et favorable \u00e0 leur \u00e9quilibre personnel.\r\n                            <\/p>\r\n\r\n                            <div class=\"te-tags\">\r\n\r\n                                <span>Encadrement attentif<\/span>\r\n                                <span>Cadre s\u00e9curis\u00e9<\/span>\r\n                                <span>Climat bienveillant<\/span>\r\n\r\n                            <\/div>\r\n\r\n                            <footer class=\"te-white-slide__footer\">\r\n\r\n                                <span>\r\n                                    Grandir avec confiance\r\n                                <\/span>\r\n\r\n                                <strong>\r\n                                    03\r\n                                <\/strong>\r\n\r\n                            <\/footer>\r\n\r\n                        <\/article>\r\n\r\n                        <!-- SC\u00c8NE BLANCHE 04 -->\r\n\r\n                        <article\r\n                            class=\"te-white-slide\"\r\n                            data-te-white-slide\r\n                            data-index=\"3\"\r\n                        >\r\n\r\n                            <div class=\"te-white-slide__top\">\r\n\r\n                                <div class=\"te-white-slide__meta\">\r\n\r\n                                    <span>04<\/span>\r\n                                    <i><\/i>\r\n                                    <strong>International<\/strong>\r\n\r\n                                <\/div>\r\n\r\n                                <div class=\"te-white-slide__icon\">\r\n\r\n                                    <svg viewBox=\"0 0 24 24\">\r\n                                        <circle cx=\"12\" cy=\"12\" r=\"9\"><\/circle>\r\n                                        <path d=\"M3 12h18\"><\/path>\r\n                                        <path d=\"M12 3c2.5 2.5 4 5.5 4 9s-1.5 6.5-4 9\"><\/path>\r\n                                        <path d=\"M12 3c-2.5 2.5-4 5.5-4 9s1.5 6.5 4 9\"><\/path>\r\n                                    <\/svg>\r\n\r\n                                <\/div>\r\n\r\n                            <\/div>\r\n\r\n                            <div class=\"te-white-slide__title-mask\">\r\n\r\n                                <h3>\r\n                                    Ouverture internationale\r\n                                <\/h3>\r\n\r\n                            <\/div>\r\n\r\n                            <p>\r\n                                L\u2019apprentissage des langues, la d\u00e9couverte des\r\n                                cultures et le d\u00e9veloppement de comp\u00e9tences\r\n                                internationales pr\u00e9parent les \u00e9l\u00e8ves \u00e0 communiquer,\r\n                                collaborer et \u00e9voluer dans des environnements vari\u00e9s.\r\n                            <\/p>\r\n\r\n                            <div class=\"te-tags\">\r\n\r\n                                <span>Ma\u00eetrise des langues<\/span>\r\n                                <span>Ouverture culturelle<\/span>\r\n                                <span>Comp\u00e9tences internationales<\/span>\r\n\r\n                            <\/div>\r\n\r\n                            <footer class=\"te-white-slide__footer\">\r\n\r\n                                <span>\r\n                                    S\u2019ouvrir au monde\r\n                                <\/span>\r\n\r\n                                <strong>\r\n                                    04\r\n                                <\/strong>\r\n\r\n                            <\/footer>\r\n\r\n                        <\/article>\r\n\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n        <!-- =====================================================\r\n        VERSION MOBILE\r\n        ====================================================== -->\r\n\r\n        <div class=\"te-mobile\">\r\n\r\n            <article class=\"te-mobile-card\">\r\n                <span>01 \u2014 Excellence<\/span>\r\n                <h3>Excellence acad\u00e9mique<\/h3>\r\n                <p>\r\n                    Des programmes exigeants et une p\u00e9dagogie structur\u00e9e pour\r\n                    d\u00e9velopper pleinement le potentiel de chaque \u00e9l\u00e8ve.\r\n                <\/p>\r\n            <\/article>\r\n\r\n            <article class=\"te-mobile-card\">\r\n                <span>02 \u2014 Accompagnement<\/span>\r\n                <h3>Suivi personnalis\u00e9<\/h3>\r\n                <p>\r\n                    Une attention r\u00e9guli\u00e8re, des objectifs adapt\u00e9s et un\r\n                    accompagnement r\u00e9ellement individualis\u00e9.\r\n                <\/p>\r\n            <\/article>\r\n\r\n            <article class=\"te-mobile-card\">\r\n                <span>03 \u2014 Bien-\u00eatre<\/span>\r\n                <h3>S\u00e9curit\u00e9 et bien-\u00eatre<\/h3>\r\n                <p>\r\n                    Un cadre structur\u00e9, s\u00e9curis\u00e9 et bienveillant pour apprendre\r\n                    avec confiance et s\u00e9r\u00e9nit\u00e9.\r\n                <\/p>\r\n            <\/article>\r\n\r\n            <article class=\"te-mobile-card\">\r\n                <span>04 \u2014 International<\/span>\r\n                <h3>Ouverture internationale<\/h3>\r\n                <p>\r\n                    Une \u00e9ducation tourn\u00e9e vers les langues, les cultures et\r\n                    les comp\u00e9tences internationales.\r\n                <\/p>\r\n            <\/article>\r\n\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.te-engagements {\r\n    --te-navy: #0b1f4d;\r\n    --te-navy-dark: #04122e;\r\n    --te-navy-light: #1b4073;\r\n    --te-gold: #c99a35;\r\n    --te-gold-light: #f1cd70;\r\n    --te-text: #707b91;\r\n    --te-white: #ffffff;\r\n\r\n    position: relative;\r\n    z-index: 1;\r\n    width: 100%;\r\n    padding: clamp(90px, 9vw, 145px) 0;\r\n    overflow: clip;\r\n    background: #ffffff;\r\n}\r\n\r\n.te-engagements,\r\n.te-engagements * {\r\n    box-sizing: border-box;\r\n}\r\n\r\n.te-engagements h2,\r\n.te-engagements h3,\r\n.te-engagements p {\r\n    margin-top: 0;\r\n}\r\n\r\n.te-container {\r\n    width: min(1420px, calc(100% - clamp(36px, 6vw, 104px)));\r\n    margin: 0 auto;\r\n}\r\n\r\n\/* =========================================================\r\nEN-T\u00caTE\r\n========================================================= *\/\r\n\r\n.te-header {\r\n    display: grid;\r\n    grid-template-columns: 1.15fr 0.85fr;\r\n    align-items: end;\r\n    gap: clamp(50px, 7vw, 115px);\r\n    margin-bottom: clamp(75px, 8vw, 115px);\r\n}\r\n\r\n.te-eyebrow {\r\n    display: block;\r\n    margin-bottom: 17px;\r\n    color: var(--te-gold);\r\n    font-family: Montserrat, Arial, sans-serif;\r\n    font-size: 11px;\r\n    font-weight: 700;\r\n    letter-spacing: 0.22em;\r\n    text-transform: uppercase;\r\n}\r\n\r\n.te-header h2 {\r\n    margin-bottom: 0;\r\n    color: var(--te-navy);\r\n    font-family: Georgia, \"Times New Roman\", serif;\r\n    font-size: clamp(54px, 6vw, 90px);\r\n    font-weight: 500;\r\n    line-height: 0.98;\r\n    letter-spacing: -0.045em;\r\n}\r\n\r\n.te-header h2 em {\r\n    display: block;\r\n    color: var(--te-gold);\r\n    font-weight: inherit;\r\n}\r\n\r\n.te-header__intro {\r\n    max-width: 550px;\r\n}\r\n\r\n.te-header__line {\r\n    display: block;\r\n    width: 68px;\r\n    height: 2px;\r\n    margin-bottom: 24px;\r\n    background: var(--te-gold);\r\n}\r\n\r\n.te-header__intro p {\r\n    margin-bottom: 0;\r\n    color: var(--te-text);\r\n    font-family: Montserrat, Arial, sans-serif;\r\n    font-size: clamp(15px, 1.3vw, 17px);\r\n    line-height: 1.9;\r\n}\r\n\r\n\/* =========================================================\r\nZONE DE SCROLL\r\n========================================================= *\/\r\n\r\n.te-story {\r\n    position: relative;\r\n    height: 400vh;\r\n    min-height: 2900px;\r\n}\r\n\r\n.te-sticky {\r\n    position: sticky;\r\n    top: 20px;\r\n    display: flex;\r\n    align-items: center;\r\n    height: calc(100vh - 40px);\r\n    max-height: 830px;\r\n    overflow: hidden;\r\n}\r\n\r\n.te-stage {\r\n    position: relative;\r\n    display: grid;\r\n    grid-template-columns: minmax(410px, 0.9fr) minmax(0, 1.15fr);\r\n    gap: clamp(90px, 10vw, 155px);\r\n    width: 100%;\r\n    height: min(790px, calc(100vh - 55px));\r\n    min-height: 650px;\r\n}\r\n\r\n\/* =========================================================\r\nPANNEAU BLEU\r\n========================================================= *\/\r\n\r\n.te-panel {\r\n    position: relative;\r\n    display: grid;\r\n    grid-template-rows: auto minmax(0, 1fr) auto;\r\n    height: 100%;\r\n    overflow: hidden;\r\n    padding: clamp(38px, 4vw, 56px);\r\n    color: #ffffff;\r\n    background:\r\n        linear-gradient(\r\n            145deg,\r\n            var(--te-navy-light),\r\n            var(--te-navy) 52%,\r\n            var(--te-navy-dark)\r\n        );\r\n    border-radius: 5px;\r\n    box-shadow: 0 38px 85px rgba(4, 18, 46, 0.2);\r\n}\r\n\r\n.te-panel__frame {\r\n    position: absolute;\r\n    inset: 18px;\r\n    z-index: 20;\r\n    border: 1px solid rgba(201, 154, 53, 0.48);\r\n    pointer-events: none;\r\n}\r\n\r\n.te-panel__decor {\r\n    position: absolute;\r\n    inset: 0;\r\n    overflow: hidden;\r\n    pointer-events: none;\r\n}\r\n\r\n.te-panel__ring {\r\n    position: absolute;\r\n    border-radius: 50%;\r\n}\r\n\r\n.te-panel__ring--one {\r\n    top: -190px;\r\n    right: -170px;\r\n    width: 470px;\r\n    height: 470px;\r\n    border: 1px solid rgba(255, 255, 255, 0.06);\r\n    box-shadow:\r\n        0 0 0 70px rgba(255, 255, 255, 0.017),\r\n        0 0 0 140px rgba(255, 255, 255, 0.009);\r\n}\r\n\r\n.te-panel__ring--two {\r\n    left: 150px;\r\n    bottom: 105px;\r\n    width: 175px;\r\n    height: 175px;\r\n    border: 19px solid rgba(255, 255, 255, 0.03);\r\n}\r\n\r\n.te-panel__curve {\r\n    position: absolute;\r\n    right: -100px;\r\n    bottom: 130px;\r\n    width: 390px;\r\n    height: 150px;\r\n    border-bottom: 28px solid rgba(255, 255, 255, 0.024);\r\n    border-radius: 50%;\r\n}\r\n\r\n.te-panel__header {\r\n    position: relative;\r\n    z-index: 10;\r\n    display: flex;\r\n    justify-content: space-between;\r\n    gap: 25px;\r\n}\r\n\r\n.te-panel__header span {\r\n    font-family: Montserrat, Arial, sans-serif;\r\n    font-size: 10px;\r\n    font-weight: 700;\r\n    letter-spacing: 0.18em;\r\n    text-transform: uppercase;\r\n}\r\n\r\n.te-panel__header span:first-child {\r\n    color: var(--te-gold-light);\r\n}\r\n\r\n.te-panel__header span:last-child {\r\n    color: rgba(255, 255, 255, 0.55);\r\n}\r\n\r\n\/* =========================================================\r\nSLIDES BLEUES\r\n========================================================= *\/\r\n\r\n.te-panel__slides {\r\n    position: relative;\r\n    z-index: 10;\r\n    min-height: 0;\r\n}\r\n\r\n.te-blue-slide {\r\n    position: absolute;\r\n    inset: 0;\r\n    display: flex;\r\n    align-items: center;\r\n    visibility: hidden;\r\n    opacity: 0;\r\n    pointer-events: none;\r\n}\r\n\r\n.te-blue-slide.is-active {\r\n    visibility: visible;\r\n    opacity: 1;\r\n    pointer-events: auto;\r\n}\r\n\r\n.te-blue-slide__content {\r\n    position: relative;\r\n    z-index: 3;\r\n    width: 100%;\r\n    visibility: visible;\r\n    opacity: 1;\r\n}\r\n\r\n.te-blue-slide__number {\r\n    position: absolute;\r\n    top: 52%;\r\n    right: -10px;\r\n    z-index: 1;\r\n    color: rgba(255, 255, 255, 0.045);\r\n    font-family: Georgia, \"Times New Roman\", serif;\r\n    font-size: clamp(170px, 14vw, 235px);\r\n    line-height: 0.75;\r\n    transform: translateY(-50%);\r\n}\r\n\r\n.te-blue-slide__icon {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    width: 66px;\r\n    height: 66px;\r\n    margin-bottom: 25px;\r\n    background: rgba(255, 255, 255, 0.055);\r\n    border: 1px solid rgba(255, 255, 255, 0.22);\r\n    border-radius: 50%;\r\n}\r\n\r\n.te-blue-slide__icon svg,\r\n.te-white-slide__icon svg {\r\n    width: 29px;\r\n    height: 29px;\r\n    fill: none;\r\n    stroke: currentColor;\r\n    stroke-width: 1.5;\r\n    stroke-linecap: round;\r\n    stroke-linejoin: round;\r\n}\r\n\r\n.te-blue-slide__kicker {\r\n    display: block;\r\n    margin-bottom: 14px;\r\n    color: var(--te-gold-light);\r\n    font-family: Montserrat, Arial, sans-serif;\r\n    font-size: 10px;\r\n    font-weight: 700;\r\n    letter-spacing: 0.19em;\r\n    text-transform: uppercase;\r\n}\r\n\r\n.te-blue-slide__title-mask {\r\n    overflow: hidden;\r\n    margin-bottom: 20px;\r\n}\r\n\r\n.te-blue-slide h3 {\r\n    margin-bottom: 0;\r\n    color: #ffffff;\r\n    font-family: Georgia, \"Times New Roman\", serif;\r\n    font-size: clamp(39px, 3.2vw, 52px);\r\n    font-weight: 500;\r\n    line-height: 1.02;\r\n    letter-spacing: -0.04em;\r\n    hyphens: none;\r\n    word-break: normal;\r\n}\r\n\r\n.te-blue-slide p {\r\n    max-width: 460px;\r\n    margin-bottom: 24px;\r\n    color: rgba(255, 255, 255, 0.73);\r\n    font-family: Montserrat, Arial, sans-serif;\r\n    font-size: clamp(13px, 1vw, 15px);\r\n    line-height: 1.75;\r\n}\r\n\r\n.te-blue-slide__signature {\r\n    position: relative;\r\n    display: block;\r\n    width: fit-content;\r\n    padding-left: 38px;\r\n    color: rgba(255, 255, 255, 0.5);\r\n    font-family: Montserrat, Arial, sans-serif;\r\n    font-size: 9px;\r\n    font-weight: 700;\r\n    letter-spacing: 0.15em;\r\n    text-transform: uppercase;\r\n}\r\n\r\n.te-blue-slide__signature::before {\r\n    content: \"\";\r\n    position: absolute;\r\n    top: 50%;\r\n    left: 0;\r\n    width: 25px;\r\n    height: 1px;\r\n    background: var(--te-gold);\r\n}\r\n\r\n\/* =========================================================\r\nPROGRESSION\r\n========================================================= *\/\r\n\r\n.te-panel__footer {\r\n    position: relative;\r\n    z-index: 10;\r\n}\r\n\r\n.te-progress {\r\n    height: 2px;\r\n    overflow: hidden;\r\n    background: rgba(255, 255, 255, 0.14);\r\n}\r\n\r\n.te-progress span {\r\n    display: block;\r\n    width: 100%;\r\n    height: 100%;\r\n    background: var(--te-gold);\r\n    transform: scaleX(0.25);\r\n    transform-origin: left center;\r\n}\r\n\r\n.te-progress__numbers {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    margin-top: 10px;\r\n    color: rgba(255, 255, 255, 0.4);\r\n    font-family: Montserrat, Arial, sans-serif;\r\n    font-size: 9px;\r\n    font-weight: 700;\r\n}\r\n\r\n.te-panel__navigation {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    margin-top: 23px;\r\n}\r\n\r\n.te-dots {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 9px;\r\n}\r\n\r\n.te-dots button {\r\n    width: 7px;\r\n    height: 7px;\r\n    padding: 0;\r\n    background: rgba(255, 255, 255, 0.25);\r\n    border: 0;\r\n    border-radius: 50%;\r\n    cursor: pointer;\r\n}\r\n\r\n.te-dots button.is-active {\r\n    width: 28px;\r\n    background: var(--te-gold);\r\n    border-radius: 12px;\r\n}\r\n\r\n.te-scroll-label {\r\n    color: rgba(255, 255, 255, 0.45);\r\n    font-family: Montserrat, Arial, sans-serif;\r\n    font-size: 9px;\r\n    font-weight: 700;\r\n    letter-spacing: 0.14em;\r\n    text-transform: uppercase;\r\n}\r\n\r\n\/* =========================================================\r\nRAIL\r\n========================================================= *\/\r\n\r\n.te-rail {\r\n    position: absolute;\r\n    top: 5%;\r\n    bottom: 5%;\r\n    left: calc(39% + clamp(44px, 5vw, 77px));\r\n    width: 1px;\r\n    pointer-events: none;\r\n}\r\n\r\n.te-rail__track,\r\n.te-rail__progress {\r\n    position: absolute;\r\n    inset: 0;\r\n    width: 1px;\r\n}\r\n\r\n.te-rail__track {\r\n    background: rgba(11, 31, 77, 0.13);\r\n}\r\n\r\n.te-rail__progress {\r\n    background: var(--te-gold);\r\n    transform: scaleY(0);\r\n    transform-origin: top center;\r\n}\r\n\r\n.te-rail__dot {\r\n    position: absolute;\r\n    top: 0;\r\n    left: 50%;\r\n    width: 16px;\r\n    height: 16px;\r\n    background: var(--te-gold);\r\n    border: 4px solid #f8f2e6;\r\n    border-radius: 50%;\r\n    box-shadow: 0 0 0 8px rgba(201, 154, 53, 0.12);\r\n    transform: translate(-50%, -50%);\r\n}\r\n\r\n\/* =========================================================\r\nPANNEAU BLANC\r\n========================================================= *\/\r\n\r\n.te-white-panel {\r\n    position: relative;\r\n    min-width: 0;\r\n    height: 100%;\r\n}\r\n\r\n.te-white-slide {\r\n    position: absolute;\r\n    inset: 0;\r\n    display: flex;\r\n    flex-direction: column;\r\n    justify-content: center;\r\n    visibility: hidden;\r\n    opacity: 0;\r\n    pointer-events: none;\r\n}\r\n\r\n.te-white-slide.is-active {\r\n    visibility: visible;\r\n    opacity: 1;\r\n    pointer-events: auto;\r\n}\r\n\r\n.te-white-slide__top {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    gap: 30px;\r\n    margin-bottom: clamp(35px, 5vh, 50px);\r\n}\r\n\r\n.te-white-slide__meta {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 20px;\r\n}\r\n\r\n.te-white-slide__meta span,\r\n.te-white-slide__meta strong {\r\n    color: var(--te-gold);\r\n    font-family: Montserrat, Arial, sans-serif;\r\n    font-size: 10px;\r\n    font-weight: 700;\r\n    letter-spacing: 0.18em;\r\n    text-transform: uppercase;\r\n}\r\n\r\n.te-white-slide__meta i {\r\n    width: 25px;\r\n    height: 1px;\r\n    background: var(--te-gold);\r\n}\r\n\r\n.te-white-slide__icon {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    width: 68px;\r\n    height: 68px;\r\n    color: #ffffff;\r\n    background: var(--te-navy);\r\n    border-radius: 50%;\r\n    box-shadow: 0 18px 42px rgba(11, 31, 77, 0.18);\r\n}\r\n\r\n.te-white-slide__title-mask {\r\n    overflow: hidden;\r\n    margin-bottom: 27px;\r\n}\r\n\r\n.te-white-slide h3 {\r\n    margin-bottom: 0;\r\n    color: var(--te-navy);\r\n    font-family: Georgia, \"Times New Roman\", serif;\r\n    font-size: clamp(48px, 4.7vw, 70px);\r\n    font-weight: 500;\r\n    line-height: 1;\r\n    letter-spacing: -0.045em;\r\n}\r\n\r\n.te-white-slide > p {\r\n    max-width: 720px;\r\n    margin-bottom: 32px;\r\n    color: var(--te-text);\r\n    font-family: Montserrat, Arial, sans-serif;\r\n    font-size: clamp(14px, 1.25vw, 16px);\r\n    line-height: 1.9;\r\n}\r\n\r\n.te-tags {\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    gap: 10px;\r\n    margin-bottom: 38px;\r\n}\r\n\r\n.te-tags span {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    min-height: 42px;\r\n    padding: 0 17px;\r\n    color: #ffffff;\r\n    background: var(--te-navy);\r\n    font-family: Montserrat, Arial, sans-serif;\r\n    font-size: 10px;\r\n    font-weight: 600;\r\n}\r\n\r\n.te-white-slide__footer {\r\n    display: flex;\r\n    align-items: flex-end;\r\n    justify-content: space-between;\r\n}\r\n\r\n.te-white-slide__footer span {\r\n    color: var(--te-gold);\r\n    font-family: Montserrat, Arial, sans-serif;\r\n    font-size: 10px;\r\n    font-weight: 700;\r\n    letter-spacing: 0.17em;\r\n    text-transform: uppercase;\r\n}\r\n\r\n.te-white-slide__footer strong {\r\n    color: rgba(201, 154, 53, 0.14);\r\n    font-family: Georgia, \"Times New Roman\", serif;\r\n    font-size: 80px;\r\n    font-weight: 500;\r\n    line-height: 0.7;\r\n}\r\n\r\n\/* =========================================================\r\nMOBILE\r\n========================================================= *\/\r\n\r\n.te-mobile {\r\n    display: none;\r\n}\r\n\r\n.te-mobile-card {\r\n    position: relative;\r\n    overflow: hidden;\r\n    padding: 38px 28px;\r\n    color: #ffffff;\r\n    background:\r\n        linear-gradient(\r\n            145deg,\r\n            var(--te-navy-light),\r\n            var(--te-navy-dark)\r\n        );\r\n}\r\n\r\n.te-mobile-card > span {\r\n    display: block;\r\n    margin-bottom: 15px;\r\n    color: var(--te-gold-light);\r\n    font-family: Montserrat, Arial, sans-serif;\r\n    font-size: 10px;\r\n    font-weight: 700;\r\n    letter-spacing: 0.16em;\r\n    text-transform: uppercase;\r\n}\r\n\r\n.te-mobile-card h3 {\r\n    margin-bottom: 19px;\r\n    color: #ffffff;\r\n    font-family: Georgia, \"Times New Roman\", serif;\r\n    font-size: 38px;\r\n    font-weight: 500;\r\n    line-height: 1.03;\r\n}\r\n\r\n.te-mobile-card p {\r\n    margin-bottom: 0;\r\n    color: rgba(255, 255, 255, 0.73);\r\n    font-family: Montserrat, Arial, sans-serif;\r\n    font-size: 13px;\r\n    line-height: 1.75;\r\n}\r\n\r\n\/* =========================================================\r\nRESPONSIVE\r\n========================================================= *\/\r\n\r\n@media screen and (max-width: 1150px) {\r\n\r\n    .te-header {\r\n        grid-template-columns: 1fr;\r\n        gap: 35px;\r\n    }\r\n\r\n    .te-stage {\r\n        grid-template-columns: minmax(350px, 0.85fr) minmax(0, 1.15fr);\r\n        gap: 72px;\r\n    }\r\n\r\n    .te-blue-slide h3 {\r\n        font-size: 42px;\r\n    }\r\n\r\n    .te-white-slide h3 {\r\n        font-size: clamp(43px, 5vw, 58px);\r\n    }\r\n\r\n}\r\n\r\n@media screen and (max-width: 840px) {\r\n\r\n    .te-engagements {\r\n        padding: 80px 0;\r\n        overflow: hidden;\r\n    }\r\n\r\n    .te-container {\r\n        width: calc(100% - 24px);\r\n    }\r\n\r\n    .te-header h2 {\r\n        font-size: clamp(48px, 12vw, 68px);\r\n    }\r\n\r\n    .te-story {\r\n        display: none;\r\n    }\r\n\r\n    .te-mobile {\r\n        display: grid;\r\n        gap: 16px;\r\n    }\r\n\r\n}\r\n\r\n@media screen and (max-width: 500px) {\r\n\r\n    .te-mobile-card {\r\n        padding: 34px 24px;\r\n    }\r\n\r\n    .te-mobile-card h3 {\r\n        font-size: 35px;\r\n    }\r\n\r\n}\r\n\r\n\/* =========================================================\r\nCORRECTIONS ELEMENTOR\r\n========================================================= *\/\r\n\r\n.elementor-widget-html:has(.te-engagements),\r\n.elementor-widget-html:has(.te-engagements)\r\n> .elementor-widget-container {\r\n    width: 100% !important;\r\n    max-width: none !important;\r\n    margin: 0 !important;\r\n    padding: 0 !important;\r\n    overflow: visible !important;\r\n}\r\n\r\n.elementor-element:has(.te-engagements),\r\n.elementor-element:has(.te-engagements)\r\n> .e-con-inner {\r\n    overflow: visible !important;\r\n}\r\n<\/style>\r\n\r\n<!-- =========================================================\r\nGSAP\r\n========================================================= -->\r\n\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/gsap@3.13.0\/dist\/gsap.min.js\"><\/script>\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/gsap@3.13.0\/dist\/ScrollTrigger.min.js\"><\/script>\r\n\r\n<script>\r\n(function () {\r\n    \"use strict\";\r\n\r\n    function initTometalEngagements() {\r\n\r\n        const section =\r\n            document.querySelector(\".te-engagements\");\r\n\r\n        if (!section) {\r\n            return;\r\n        }\r\n\r\n        if (section.dataset.teInitialized === \"true\") {\r\n            return;\r\n        }\r\n\r\n        if (\r\n            typeof window.gsap === \"undefined\" ||\r\n            typeof window.ScrollTrigger === \"undefined\"\r\n        ) {\r\n\r\n            window.setTimeout(\r\n                initTometalEngagements,\r\n                200\r\n            );\r\n\r\n            return;\r\n        }\r\n\r\n        section.dataset.teInitialized = \"true\";\r\n\r\n        gsap.registerPlugin(ScrollTrigger);\r\n\r\n        const story =\r\n            section.querySelector(\"[data-te-story]\");\r\n\r\n        const blueSlides =\r\n            Array.from(\r\n                section.querySelectorAll(\r\n                    \"[data-te-blue-slide]\"\r\n                )\r\n            );\r\n\r\n        const whiteSlides =\r\n            Array.from(\r\n                section.querySelectorAll(\r\n                    \"[data-te-white-slide]\"\r\n                )\r\n            );\r\n\r\n        const dots =\r\n            Array.from(\r\n                section.querySelectorAll(\r\n                    \"[data-te-dot]\"\r\n                )\r\n            );\r\n\r\n        const counter =\r\n            section.querySelector(\"[data-te-counter]\");\r\n\r\n        const progress =\r\n            section.querySelector(\"[data-te-progress]\");\r\n\r\n        const railProgress =\r\n            section.querySelector(\"[data-te-rail-progress]\");\r\n\r\n        const railDot =\r\n            section.querySelector(\"[data-te-rail-dot]\");\r\n\r\n        if (\r\n            !story ||\r\n            blueSlides.length !== 4 ||\r\n            whiteSlides.length !== 4 ||\r\n            !counter ||\r\n            !progress ||\r\n            !railProgress ||\r\n            !railDot\r\n        ) {\r\n            return;\r\n        }\r\n\r\n        const counters = [\r\n            \"01 \/ 04\",\r\n            \"02 \/ 04\",\r\n            \"03 \/ 04\",\r\n            \"04 \/ 04\"\r\n        ];\r\n\r\n        const reducedMotion =\r\n            window.matchMedia(\r\n                \"(prefers-reduced-motion: reduce)\"\r\n            ).matches;\r\n\r\n        let activeIndex = 0;\r\n        let isAnimating = false;\r\n        let queuedIndex = null;\r\n        let currentTimeline = null;\r\n\r\n        function getBlueElements(slide) {\r\n\r\n            return {\r\n                content:\r\n                    slide.querySelector(\r\n                        \".te-blue-slide__content\"\r\n                    ),\r\n\r\n                number:\r\n                    slide.querySelector(\r\n                        \".te-blue-slide__number\"\r\n                    ),\r\n\r\n                icon:\r\n                    slide.querySelector(\r\n                        \".te-blue-slide__icon\"\r\n                    ),\r\n\r\n                kicker:\r\n                    slide.querySelector(\r\n                        \".te-blue-slide__kicker\"\r\n                    ),\r\n\r\n                title:\r\n                    slide.querySelector(\r\n                        \".te-blue-slide__title-mask h3\"\r\n                    ),\r\n\r\n                text:\r\n                    slide.querySelector(\r\n                        \".te-blue-slide p\"\r\n                    ),\r\n\r\n                signature:\r\n                    slide.querySelector(\r\n                        \".te-blue-slide__signature\"\r\n                    )\r\n            };\r\n\r\n        }\r\n\r\n        function getWhiteElements(slide) {\r\n\r\n            return {\r\n                top:\r\n                    slide.querySelector(\r\n                        \".te-white-slide__top\"\r\n                    ),\r\n\r\n                title:\r\n                    slide.querySelector(\r\n                        \".te-white-slide__title-mask h3\"\r\n                    ),\r\n\r\n                text:\r\n                    slide.querySelector(\r\n                        \".te-white-slide > p\"\r\n                    ),\r\n\r\n                tags:\r\n                    slide.querySelectorAll(\r\n                        \".te-tags span\"\r\n                    ),\r\n\r\n                footer:\r\n                    slide.querySelector(\r\n                        \".te-white-slide__footer\"\r\n                    )\r\n            };\r\n\r\n        }\r\n\r\n        function forceVisibleBlueContent(slide) {\r\n\r\n            const elements =\r\n                getBlueElements(slide);\r\n\r\n            \/*\r\n            CORRECTION PRINCIPALE :\r\n            le conteneur parent et tous ses enfants\r\n            sont explicitement rendus visibles.\r\n            *\/\r\n\r\n            gsap.set(\r\n                slide,\r\n                {\r\n                    autoAlpha: 1,\r\n                    visibility: \"visible\",\r\n                    pointerEvents: \"auto\"\r\n                }\r\n            );\r\n\r\n            gsap.set(\r\n                elements.content,\r\n                {\r\n                    y: 0,\r\n                    opacity: 1,\r\n                    visibility: \"visible\",\r\n                    display: \"block\"\r\n                }\r\n            );\r\n\r\n            gsap.set(\r\n                [\r\n                    elements.number,\r\n                    elements.icon,\r\n                    elements.kicker,\r\n                    elements.title,\r\n                    elements.text,\r\n                    elements.signature\r\n                ],\r\n                {\r\n                    opacity: 1,\r\n                    visibility: \"visible\"\r\n                }\r\n            );\r\n\r\n        }\r\n\r\n        function hideSlide(slide) {\r\n\r\n            gsap.set(\r\n                slide,\r\n                {\r\n                    autoAlpha: 0,\r\n                    visibility: \"hidden\",\r\n                    pointerEvents: \"none\"\r\n                }\r\n            );\r\n\r\n        }\r\n\r\n        function updateStates(index) {\r\n\r\n            counter.textContent =\r\n                counters[index];\r\n\r\n            dots.forEach(\r\n                function (dot, dotIndex) {\r\n\r\n                    dot.classList.toggle(\r\n                        \"is-active\",\r\n                        dotIndex === index\r\n                    );\r\n\r\n                }\r\n            );\r\n\r\n            blueSlides.forEach(\r\n                function (slide, slideIndex) {\r\n\r\n                    slide.classList.toggle(\r\n                        \"is-active\",\r\n                        slideIndex === index\r\n                    );\r\n\r\n                }\r\n            );\r\n\r\n            whiteSlides.forEach(\r\n                function (slide, slideIndex) {\r\n\r\n                    slide.classList.toggle(\r\n                        \"is-active\",\r\n                        slideIndex === index\r\n                    );\r\n\r\n                }\r\n            );\r\n\r\n        }\r\n\r\n        function prepareSlides() {\r\n\r\n            blueSlides.forEach(\r\n                function (slide, index) {\r\n\r\n                    const elements =\r\n                        getBlueElements(slide);\r\n\r\n                    if (index === 0) {\r\n\r\n                        forceVisibleBlueContent(slide);\r\n\r\n                    } else {\r\n\r\n                        hideSlide(slide);\r\n\r\n                        gsap.set(\r\n                            elements.content,\r\n                            {\r\n                                y: 40,\r\n                                opacity: 0,\r\n                                visibility: \"hidden\"\r\n                            }\r\n                        );\r\n\r\n                    }\r\n\r\n                }\r\n            );\r\n\r\n            whiteSlides.forEach(\r\n                function (slide, index) {\r\n\r\n                    if (index === 0) {\r\n\r\n                        gsap.set(\r\n                            slide,\r\n                            {\r\n                                autoAlpha: 1,\r\n                                visibility: \"visible\",\r\n                                pointerEvents: \"auto\"\r\n                            }\r\n                        );\r\n\r\n                    } else {\r\n\r\n                        hideSlide(slide);\r\n\r\n                    }\r\n\r\n                }\r\n            );\r\n\r\n        }\r\n\r\n        function finishTransition(index) {\r\n\r\n            activeIndex =\r\n                index;\r\n\r\n            isAnimating =\r\n                false;\r\n\r\n            currentTimeline =\r\n                null;\r\n\r\n            \/*\r\n            S\u00e9curit\u00e9 suppl\u00e9mentaire apr\u00e8s l\u2019animation.\r\n            *\/\r\n\r\n            forceVisibleBlueContent(\r\n                blueSlides[index]\r\n            );\r\n\r\n            gsap.set(\r\n                whiteSlides[index],\r\n                {\r\n                    autoAlpha: 1,\r\n                    visibility: \"visible\",\r\n                    pointerEvents: \"auto\"\r\n                }\r\n            );\r\n\r\n            if (\r\n                queuedIndex !== null &&\r\n                queuedIndex !== activeIndex\r\n            ) {\r\n\r\n                const nextIndex =\r\n                    queuedIndex;\r\n\r\n                queuedIndex =\r\n                    null;\r\n\r\n                window.setTimeout(\r\n                    function () {\r\n\r\n                        transitionTo(nextIndex);\r\n\r\n                    },\r\n                    60\r\n                );\r\n\r\n            } else {\r\n\r\n                queuedIndex =\r\n                    null;\r\n\r\n            }\r\n\r\n        }\r\n\r\n        function transitionTo(index) {\r\n\r\n            if (\r\n                index < 0 ||\r\n                index >= blueSlides.length ||\r\n                index === activeIndex\r\n            ) {\r\n                return;\r\n            }\r\n\r\n            if (isAnimating) {\r\n\r\n                queuedIndex =\r\n                    index;\r\n\r\n                return;\r\n            }\r\n\r\n            isAnimating =\r\n                true;\r\n\r\n            const direction =\r\n                index > activeIndex\r\n                    ? 1\r\n                    : -1;\r\n\r\n            const oldBlue =\r\n                blueSlides[activeIndex];\r\n\r\n            const newBlue =\r\n                blueSlides[index];\r\n\r\n            const oldWhite =\r\n                whiteSlides[activeIndex];\r\n\r\n            const newWhite =\r\n                whiteSlides[index];\r\n\r\n            const oldBlueElements =\r\n                getBlueElements(oldBlue);\r\n\r\n            const newBlueElements =\r\n                getBlueElements(newBlue);\r\n\r\n            const oldWhiteElements =\r\n                getWhiteElements(oldWhite);\r\n\r\n            const newWhiteElements =\r\n                getWhiteElements(newWhite);\r\n\r\n            updateStates(index);\r\n\r\n            if (reducedMotion) {\r\n\r\n                hideSlide(oldBlue);\r\n                hideSlide(oldWhite);\r\n\r\n                forceVisibleBlueContent(newBlue);\r\n\r\n                gsap.set(\r\n                    newWhite,\r\n                    {\r\n                        autoAlpha: 1,\r\n                        visibility: \"visible\",\r\n                        pointerEvents: \"auto\"\r\n                    }\r\n                );\r\n\r\n                finishTransition(index);\r\n\r\n                return;\r\n            }\r\n\r\n            if (currentTimeline) {\r\n                currentTimeline.kill();\r\n            }\r\n\r\n            currentTimeline =\r\n                gsap.timeline({\r\n                    defaults: {\r\n                        overwrite: \"auto\"\r\n                    },\r\n\r\n                    onComplete:\r\n                        function () {\r\n\r\n                            finishTransition(index);\r\n\r\n                        }\r\n                });\r\n\r\n            \/* =================================================\r\n            SORTIE DU PANNEAU BLEU\r\n            ================================================= *\/\r\n\r\n            currentTimeline.to(\r\n                oldBlueElements.content,\r\n                {\r\n                    y:\r\n                        -28 *\r\n                        direction,\r\n\r\n                    opacity: 0,\r\n\r\n                    duration: 0.36,\r\n\r\n                    ease: \"power3.in\"\r\n                },\r\n                0\r\n            );\r\n\r\n            currentTimeline.to(\r\n                oldBlueElements.number,\r\n                {\r\n                    y:\r\n                        -45 *\r\n                        direction,\r\n\r\n                    opacity: 0,\r\n\r\n                    scale: 0.94,\r\n\r\n                    duration: 0.4,\r\n\r\n                    ease: \"power3.in\"\r\n                },\r\n                0\r\n            );\r\n\r\n            \/* =================================================\r\n            SORTIE DU PANNEAU BLANC\r\n            ================================================= *\/\r\n\r\n            currentTimeline.to(\r\n                oldWhiteElements.top,\r\n                {\r\n                    y:\r\n                        -18 *\r\n                        direction,\r\n\r\n                    opacity: 0,\r\n\r\n                    duration: 0.27,\r\n\r\n                    ease: \"power2.in\"\r\n                },\r\n                0\r\n            );\r\n\r\n            currentTimeline.to(\r\n                oldWhiteElements.title,\r\n                {\r\n                    yPercent:\r\n                        -105 *\r\n                        direction,\r\n\r\n                    opacity: 0,\r\n\r\n                    duration: 0.39,\r\n\r\n                    ease: \"power3.in\"\r\n                },\r\n                0.02\r\n            );\r\n\r\n            currentTimeline.to(\r\n                oldWhiteElements.text,\r\n                {\r\n                    y:\r\n                        -20 *\r\n                        direction,\r\n\r\n                    opacity: 0,\r\n\r\n                    duration: 0.3,\r\n\r\n                    ease: \"power2.in\"\r\n                },\r\n                0.05\r\n            );\r\n\r\n            currentTimeline.to(\r\n                oldWhiteElements.tags,\r\n                {\r\n                    y:\r\n                        -15 *\r\n                        direction,\r\n\r\n                    opacity: 0,\r\n\r\n                    duration: 0.25,\r\n\r\n                    stagger: 0.025,\r\n\r\n                    ease: \"power2.in\"\r\n                },\r\n                0.07\r\n            );\r\n\r\n            currentTimeline.to(\r\n                oldWhiteElements.footer,\r\n                {\r\n                    y:\r\n                        -14 *\r\n                        direction,\r\n\r\n                    opacity: 0,\r\n\r\n                    duration: 0.25,\r\n\r\n                    ease: \"power2.in\"\r\n                },\r\n                0.09\r\n            );\r\n\r\n            \/* =================================================\r\n            CHANGEMENT DES SLIDES\r\n            ================================================= *\/\r\n\r\n            currentTimeline.call(\r\n                function () {\r\n\r\n                    hideSlide(oldBlue);\r\n                    hideSlide(oldWhite);\r\n\r\n                    \/*\r\n                    Le nouveau panneau est imm\u00e9diatement rendu visible.\r\n                    *\/\r\n\r\n                    forceVisibleBlueContent(newBlue);\r\n\r\n                    gsap.set(\r\n                        newWhite,\r\n                        {\r\n                            autoAlpha: 1,\r\n                            visibility: \"visible\",\r\n                            pointerEvents: \"auto\"\r\n                        }\r\n                    );\r\n\r\n                    \/*\r\n                    Pr\u00e9paration des animations d\u2019entr\u00e9e.\r\n                    *\/\r\n\r\n                    gsap.set(\r\n                        newBlueElements.content,\r\n                        {\r\n                            y:\r\n                                38 *\r\n                                direction,\r\n\r\n                            opacity: 0,\r\n\r\n                            visibility: \"visible\",\r\n\r\n                            display: \"block\"\r\n                        }\r\n                    );\r\n\r\n                    gsap.set(\r\n                        newBlueElements.number,\r\n                        {\r\n                            y:\r\n                                48 *\r\n                                direction,\r\n\r\n                            opacity: 0,\r\n\r\n                            visibility: \"visible\",\r\n\r\n                            scale: 0.92\r\n                        }\r\n                    );\r\n\r\n                    gsap.set(\r\n                        newBlueElements.icon,\r\n                        {\r\n                            y:\r\n                                22 *\r\n                                direction,\r\n\r\n                            opacity: 0,\r\n\r\n                            visibility: \"visible\",\r\n\r\n                            rotation:\r\n                                7 *\r\n                                direction,\r\n\r\n                            scale: 0.78\r\n                        }\r\n                    );\r\n\r\n                    gsap.set(\r\n                        newBlueElements.kicker,\r\n                        {\r\n                            x:\r\n                                26 *\r\n                                direction,\r\n\r\n                            opacity: 0,\r\n\r\n                            visibility: \"visible\"\r\n                        }\r\n                    );\r\n\r\n                    gsap.set(\r\n                        newBlueElements.title,\r\n                        {\r\n                            yPercent:\r\n                                105 *\r\n                                direction,\r\n\r\n                            opacity: 0,\r\n\r\n                            visibility: \"visible\"\r\n                        }\r\n                    );\r\n\r\n                    gsap.set(\r\n                        newBlueElements.text,\r\n                        {\r\n                            y:\r\n                                18 *\r\n                                direction,\r\n\r\n                            opacity: 0,\r\n\r\n                            visibility: \"visible\"\r\n                        }\r\n                    );\r\n\r\n                    gsap.set(\r\n                        newBlueElements.signature,\r\n                        {\r\n                            x:\r\n                                18 *\r\n                                direction,\r\n\r\n                            opacity: 0,\r\n\r\n                            visibility: \"visible\"\r\n                        }\r\n                    );\r\n\r\n                    gsap.set(\r\n                        newWhiteElements.top,\r\n                        {\r\n                            y:\r\n                                20 *\r\n                                direction,\r\n\r\n                            opacity: 0\r\n                        }\r\n                    );\r\n\r\n                    gsap.set(\r\n                        newWhiteElements.title,\r\n                        {\r\n                            yPercent:\r\n                                105 *\r\n                                direction,\r\n\r\n                            opacity: 0\r\n                        }\r\n                    );\r\n\r\n                    gsap.set(\r\n                        newWhiteElements.text,\r\n                        {\r\n                            y:\r\n                                23 *\r\n                                direction,\r\n\r\n                            opacity: 0\r\n                        }\r\n                    );\r\n\r\n                    gsap.set(\r\n                        newWhiteElements.tags,\r\n                        {\r\n                            y:\r\n                                18 *\r\n                                direction,\r\n\r\n                            opacity: 0\r\n                        }\r\n                    );\r\n\r\n                    gsap.set(\r\n                        newWhiteElements.footer,\r\n                        {\r\n                            y:\r\n                                15 *\r\n                                direction,\r\n\r\n                            opacity: 0\r\n                        }\r\n                    );\r\n\r\n                },\r\n                null,\r\n                0.38\r\n            );\r\n\r\n            \/* =================================================\r\n            ENTR\u00c9E DU PANNEAU BLEU\r\n            ================================================= *\/\r\n\r\n            currentTimeline.to(\r\n                newBlueElements.number,\r\n                {\r\n                    y: 0,\r\n                    opacity: 1,\r\n                    scale: 1,\r\n                    duration: 0.72,\r\n                    ease: \"power4.out\"\r\n                },\r\n                0.4\r\n            );\r\n\r\n            currentTimeline.to(\r\n                newBlueElements.content,\r\n                {\r\n                    y: 0,\r\n                    opacity: 1,\r\n                    visibility: \"visible\",\r\n                    duration: 0.62,\r\n                    ease: \"power4.out\"\r\n                },\r\n                0.42\r\n            );\r\n\r\n            currentTimeline.to(\r\n                newBlueElements.icon,\r\n                {\r\n                    y: 0,\r\n                    opacity: 1,\r\n                    rotation: 0,\r\n                    scale: 1,\r\n                    duration: 0.66,\r\n                    ease: \"back.out(1.2)\"\r\n                },\r\n                0.44\r\n            );\r\n\r\n            currentTimeline.to(\r\n                newBlueElements.kicker,\r\n                {\r\n                    x: 0,\r\n                    opacity: 1,\r\n                    duration: 0.5,\r\n                    ease: \"power3.out\"\r\n                },\r\n                0.48\r\n            );\r\n\r\n            currentTimeline.to(\r\n                newBlueElements.title,\r\n                {\r\n                    yPercent: 0,\r\n                    opacity: 1,\r\n                    duration: 0.7,\r\n                    ease: \"power4.out\"\r\n                },\r\n                0.49\r\n            );\r\n\r\n            currentTimeline.to(\r\n                newBlueElements.text,\r\n                {\r\n                    y: 0,\r\n                    opacity: 1,\r\n                    duration: 0.57,\r\n                    ease: \"power3.out\"\r\n                },\r\n                0.57\r\n            );\r\n\r\n            currentTimeline.to(\r\n                newBlueElements.signature,\r\n                {\r\n                    x: 0,\r\n                    opacity: 1,\r\n                    duration: 0.5,\r\n                    ease: \"power3.out\"\r\n                },\r\n                0.64\r\n            );\r\n\r\n            \/* =================================================\r\n            ENTR\u00c9E DU PANNEAU BLANC\r\n            ================================================= *\/\r\n\r\n            currentTimeline.to(\r\n                newWhiteElements.top,\r\n                {\r\n                    y: 0,\r\n                    opacity: 1,\r\n                    duration: 0.48,\r\n                    ease: \"power3.out\"\r\n                },\r\n                0.43\r\n            );\r\n\r\n            currentTimeline.to(\r\n                newWhiteElements.title,\r\n                {\r\n                    yPercent: 0,\r\n                    opacity: 1,\r\n                    duration: 0.72,\r\n                    ease: \"power4.out\"\r\n                },\r\n                0.47\r\n            );\r\n\r\n            currentTimeline.to(\r\n                newWhiteElements.text,\r\n                {\r\n                    y: 0,\r\n                    opacity: 1,\r\n                    duration: 0.58,\r\n                    ease: \"power3.out\"\r\n                },\r\n                0.55\r\n            );\r\n\r\n            currentTimeline.to(\r\n                newWhiteElements.tags,\r\n                {\r\n                    y: 0,\r\n                    opacity: 1,\r\n                    duration: 0.47,\r\n                    stagger: 0.045,\r\n                    ease: \"power3.out\"\r\n                },\r\n                0.61\r\n            );\r\n\r\n            currentTimeline.to(\r\n                newWhiteElements.footer,\r\n                {\r\n                    y: 0,\r\n                    opacity: 1,\r\n                    duration: 0.48,\r\n                    ease: \"power3.out\"\r\n                },\r\n                0.69\r\n            );\r\n\r\n        }\r\n\r\n        function indexFromProgress(value) {\r\n\r\n            if (value < 1 \/ 6) {\r\n                return 0;\r\n            }\r\n\r\n            if (value < 1 \/ 2) {\r\n                return 1;\r\n            }\r\n\r\n            if (value < 5 \/ 6) {\r\n                return 2;\r\n            }\r\n\r\n            return 3;\r\n\r\n        }\r\n\r\n        function scrollToSlide(index) {\r\n\r\n            const rect =\r\n                story.getBoundingClientRect();\r\n\r\n            const storyTop =\r\n                window.scrollY +\r\n                rect.top;\r\n\r\n            const availableDistance =\r\n                story.offsetHeight -\r\n                window.innerHeight;\r\n\r\n            const targetProgress =\r\n                index \/\r\n                (\r\n                    blueSlides.length -\r\n                    1\r\n                );\r\n\r\n            window.scrollTo({\r\n                top:\r\n                    storyTop +\r\n                    availableDistance *\r\n                    targetProgress,\r\n\r\n                behavior:\r\n                    reducedMotion\r\n                        ? \"auto\"\r\n                        : \"smooth\"\r\n            });\r\n\r\n        }\r\n\r\n        prepareSlides();\r\n        updateStates(0);\r\n\r\n        gsap.set(\r\n            progress,\r\n            {\r\n                scaleX: 0.25,\r\n                transformOrigin: \"left center\"\r\n            }\r\n        );\r\n\r\n        gsap.set(\r\n            railProgress,\r\n            {\r\n                scaleY: 0,\r\n                transformOrigin: \"top center\"\r\n            }\r\n        );\r\n\r\n        const media =\r\n            gsap.matchMedia();\r\n\r\n        media.add(\r\n            \"(min-width: 841px)\",\r\n            function () {\r\n\r\n                const trigger =\r\n                    ScrollTrigger.create({\r\n\r\n                        id:\r\n                            \"te-engagement-story\",\r\n\r\n                        trigger:\r\n                            story,\r\n\r\n                        start:\r\n                            \"top top\",\r\n\r\n                        end:\r\n                            \"bottom bottom\",\r\n\r\n                        invalidateOnRefresh:\r\n                            true,\r\n\r\n                        onUpdate:\r\n                            function (self) {\r\n\r\n                                const value =\r\n                                    self.progress;\r\n\r\n                                const nextIndex =\r\n                                    indexFromProgress(\r\n                                        value\r\n                                    );\r\n\r\n                                if (\r\n                                    nextIndex !== activeIndex\r\n                                ) {\r\n\r\n                                    transitionTo(\r\n                                        nextIndex\r\n                                    );\r\n\r\n                                }\r\n\r\n                                gsap.set(\r\n                                    progress,\r\n                                    {\r\n                                        scaleX:\r\n                                            0.25 +\r\n                                            value *\r\n                                            0.75,\r\n\r\n                                        transformOrigin:\r\n                                            \"left center\"\r\n                                    }\r\n                                );\r\n\r\n                                gsap.set(\r\n                                    railProgress,\r\n                                    {\r\n                                        scaleY:\r\n                                            value,\r\n\r\n                                        transformOrigin:\r\n                                            \"top center\"\r\n                                    }\r\n                                );\r\n\r\n                                gsap.set(\r\n                                    railDot,\r\n                                    {\r\n                                        top:\r\n                                            (\r\n                                                value *\r\n                                                100\r\n                                            ) +\r\n                                            \"%\"\r\n                                    }\r\n                                );\r\n\r\n                            },\r\n\r\n                        snap:\r\n                            reducedMotion\r\n                                ? false\r\n                                : {\r\n                                    snapTo: [\r\n                                        0,\r\n                                        1 \/ 3,\r\n                                        2 \/ 3,\r\n                                        1\r\n                                    ],\r\n\r\n                                    duration: {\r\n                                        min: 0.2,\r\n                                        max: 0.5\r\n                                    },\r\n\r\n                                    delay: 0.08,\r\n\r\n                                    ease:\r\n                                        \"power2.inOut\"\r\n                                }\r\n\r\n                    });\r\n\r\n                return function () {\r\n                    trigger.kill();\r\n                };\r\n\r\n            }\r\n        );\r\n\r\n        dots.forEach(\r\n            function (dot, index) {\r\n\r\n                dot.addEventListener(\r\n                    \"click\",\r\n                    function () {\r\n\r\n                        scrollToSlide(\r\n                            index\r\n                        );\r\n\r\n                    }\r\n                );\r\n\r\n            }\r\n        );\r\n\r\n        function refreshSection() {\r\n\r\n            ScrollTrigger.refresh(true);\r\n\r\n        }\r\n\r\n        window.setTimeout(\r\n            refreshSection,\r\n            250\r\n        );\r\n\r\n        window.setTimeout(\r\n            refreshSection,\r\n            850\r\n        );\r\n\r\n        window.setTimeout(\r\n            refreshSection,\r\n            1500\r\n        );\r\n\r\n        window.addEventListener(\r\n            \"load\",\r\n            refreshSection,\r\n            {\r\n                once: true\r\n            }\r\n        );\r\n\r\n        if (document.fonts) {\r\n\r\n            document.fonts.ready.then(\r\n                refreshSection\r\n            );\r\n\r\n        }\r\n\r\n    }\r\n\r\n    if (\r\n        document.readyState === \"loading\"\r\n    ) {\r\n\r\n        document.addEventListener(\r\n            \"DOMContentLoaded\",\r\n            initTometalEngagements\r\n        );\r\n\r\n    } else {\r\n\r\n        initTometalEngagements();\r\n\r\n    }\r\n\r\n    window.addEventListener(\r\n        \"load\",\r\n        initTometalEngagements\r\n    );\r\n\r\n    window.setTimeout(\r\n        initTometalEngagements,\r\n        400\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\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Institut Tometal \u00b7 Fenoarivo L\u2019\u00e9cole qui donne de l\u2019avenir aux ambitions. De la maternelle au lyc\u00e9e, l\u2019Institut Tometal propose une \u00e9ducation exigeante, plurilingue et attentive \u00e0 la progression de chaque \u00e9l\u00e8ve. D\u00e9couvrir l\u2019\u00e9tablissement \u2193 Admissions 2026\u20132027 \u2197 01 Notre engagement Faire grandir des \u00e9l\u00e8ves cultiv\u00e9s, autonomes, responsables et capables de r\u00e9ussir dans un monde en [&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-1871","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/net-temporaire.institut-tometal.com\/en\/wp-json\/wp\/v2\/pages\/1871","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/net-temporaire.institut-tometal.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/net-temporaire.institut-tometal.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/net-temporaire.institut-tometal.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/net-temporaire.institut-tometal.com\/en\/wp-json\/wp\/v2\/comments?post=1871"}],"version-history":[{"count":77,"href":"https:\/\/net-temporaire.institut-tometal.com\/en\/wp-json\/wp\/v2\/pages\/1871\/revisions"}],"predecessor-version":[{"id":2158,"href":"https:\/\/net-temporaire.institut-tometal.com\/en\/wp-json\/wp\/v2\/pages\/1871\/revisions\/2158"}],"wp:attachment":[{"href":"https:\/\/net-temporaire.institut-tometal.com\/en\/wp-json\/wp\/v2\/media?parent=1871"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}