{"id":1982,"date":"2026-08-05T08:52:04","date_gmt":"2026-08-05T08:52:04","guid":{"rendered":"https:\/\/net-temporaire.institut-tometal.com\/?page_id=1982"},"modified":"2026-08-27T08:23:22","modified_gmt":"2026-08-27T08:23:22","slug":"vie-scolaire","status":"publish","type":"page","link":"https:\/\/net-temporaire.institut-tometal.com\/en\/vie-scolaire\/","title":{"rendered":"Student Life"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1982\" class=\"elementor elementor-1982\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b32005a e-con-full e-flex e-con e-parent\" data-id=\"b32005a\" 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-e46bb6a elementor-widget elementor-widget-html\" data-id=\"e46bb6a\" 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<!-- =========================================================\nINSTITUT TOMETAL\nACTIVIT\u00c9S EXTRASCOLAIRES \u2014 IMMERSIVE SCROLL\nHTML + CSS + JAVASCRIPT\n========================================================= -->\n\n<section\n    class=\"tmt-immersive-activities\"\n    id=\"activites-extrascolaires\"\n    data-tmt-immersive-activities\n>\n\n    <div class=\"tmt-immersive-activities__sticky\">\n\n        <!-- =====================================================\n        SC\u00c8NE 01 \u2014 NATATION\n        ====================================================== -->\n\n        <article class=\"tmt-activity-scene is-active\" data-scene=\"0\">\n\n            <div\n                class=\"tmt-activity-scene__image\"\n                style=\"\n                background-image:\n                url('http:\/\/net-temporaire.institut-tometal.com\/wp-content\/uploads\/2026\/08\/natation-scaled.jpg');\n                \"\n            ><\/div>\n\n            <div class=\"tmt-activity-scene__overlay\"><\/div>\n            <div class=\"tmt-activity-scene__fade\"><\/div>\n            <div class=\"tmt-activity-scene__sidefade\"><\/div>\n\n            <div class=\"tmt-activity-scene__content\">\n\n                <div class=\"tmt-activity-scene__eyebrow\">\n                    <span>01<\/span>\n                    <i><\/i>\n                    <strong>Sport aquatique<\/strong>\n                <\/div>\n\n                <h2>Natation<\/h2>\n\n                <p>\n                    D\u00e9velopper l\u2019endurance, la ma\u00eetrise corporelle\n                    et la confiance dans l\u2019eau.\n                <\/p>\n\n                <div class=\"tmt-activity-scene__meta\">\n                    <span>CP \u2192 SECONDE<\/span>\n                    <span>Endurance \u00b7 Confiance \u00b7 Ma\u00eetrise<\/span>\n                <\/div>\n\n            <\/div>\n\n        <\/article>\n\n        <!-- =====================================================\n        SC\u00c8NE 02 \u2014 FOOTBALL\n        ====================================================== -->\n\n        <article class=\"tmt-activity-scene\" data-scene=\"1\">\n\n            <div\n                class=\"tmt-activity-scene__image\"\n                style=\"\n                background-image:\n                url('https:\/\/images.unsplash.com\/photo-1579952363873-27f3bade9f55?auto=format&fit=crop&w=1800&q=90');\n                \"\n            ><\/div>\n\n            <div class=\"tmt-activity-scene__overlay\"><\/div>\n            <div class=\"tmt-activity-scene__fade\"><\/div>\n            <div class=\"tmt-activity-scene__sidefade\"><\/div>\n\n            <div class=\"tmt-activity-scene__content\">\n\n                <div class=\"tmt-activity-scene__eyebrow\">\n                    <span>02<\/span>\n                    <i><\/i>\n                    <strong>Sport collectif<\/strong>\n                <\/div>\n\n                <h2>Football<\/h2>\n\n                <p>\n                    D\u00e9velopper l\u2019esprit d\u2019\u00e9quipe, la discipline\n                    et la passion du jeu.\n                <\/p>\n\n                <div class=\"tmt-activity-scene__meta\">\n                    <span>CP \u2192 SECONDE<\/span>\n                    <span>\u00c9quipe \u00b7 Discipline \u00b7 Passion<\/span>\n                <\/div>\n\n            <\/div>\n\n        <\/article>\n\n        <!-- =====================================================\n        SC\u00c8NE 03 \u2014 BASKETBALL\n        ====================================================== -->\n\n        <article class=\"tmt-activity-scene\" data-scene=\"2\">\n\n            <div\n                class=\"tmt-activity-scene__image\"\n                style=\"\n                background-image:\n                url('https:\/\/images.unsplash.com\/photo-1546519638-68e109498ffc?auto=format&fit=crop&w=1800&q=90');\n                \"\n            ><\/div>\n\n            <div class=\"tmt-activity-scene__overlay\"><\/div>\n            <div class=\"tmt-activity-scene__fade\"><\/div>\n            <div class=\"tmt-activity-scene__sidefade\"><\/div>\n\n            <div class=\"tmt-activity-scene__content\">\n\n                <div class=\"tmt-activity-scene__eyebrow\">\n                    <span>03<\/span>\n                    <i><\/i>\n                    <strong>Sport collectif<\/strong>\n                <\/div>\n\n                <h2>Basketball<\/h2>\n\n                <p>\n                    Renforcer la coordination, l\u2019agilit\u00e9\n                    et l\u2019esprit de comp\u00e9tition.\n                <\/p>\n\n                <div class=\"tmt-activity-scene__meta\">\n                    <span>CP \u2192 SECONDE<\/span>\n                    <span>Agilit\u00e9 \u00b7 Coordination \u00b7 Comp\u00e9tition<\/span>\n                <\/div>\n\n            <\/div>\n\n        <\/article>\n\n        <!-- =====================================================\n        SC\u00c8NE 04 \u2014 VOLLEY-BALL\n        ====================================================== -->\n\n        <article class=\"tmt-activity-scene\" data-scene=\"3\">\n\n            <div\n                class=\"tmt-activity-scene__image\"\n                style=\"\n                background-image:\n                url('https:\/\/images.unsplash.com\/photo-1612872087720-bb876e2e67d1?auto=format&fit=crop&w=1800&q=90');\n                \"\n            ><\/div>\n\n            <div class=\"tmt-activity-scene__overlay\"><\/div>\n            <div class=\"tmt-activity-scene__fade\"><\/div>\n            <div class=\"tmt-activity-scene__sidefade\"><\/div>\n\n            <div class=\"tmt-activity-scene__content\">\n\n                <div class=\"tmt-activity-scene__eyebrow\">\n                    <span>04<\/span>\n                    <i><\/i>\n                    <strong>Sport collectif<\/strong>\n                <\/div>\n\n                <h2>Volley-ball<\/h2>\n\n                <p>\n                    D\u00e9velopper l\u2019esprit d\u2019\u00e9quipe,\n                    l\u2019agilit\u00e9 et le d\u00e9passement de soi.\n                <\/p>\n\n                <div class=\"tmt-activity-scene__meta\">\n                    <span>CP \u2192 SECONDE<\/span>\n                    <span>\u00c9quipe \u00b7 Agilit\u00e9 \u00b7 D\u00e9passement<\/span>\n                <\/div>\n\n            <\/div>\n\n        <\/article>\n\n        <!-- =====================================================\n        SC\u00c8NE 05 \u2014 TENNIS DE TABLE\n        ====================================================== -->\n\n        <article class=\"tmt-activity-scene\" data-scene=\"4\">\n\n            <div\n                class=\"tmt-activity-scene__image\"\n                style=\"\n                background-image:\n                url('https:\/\/images.unsplash.com\/photo-1534158914592-062992fbe900?auto=format&fit=crop&w=1800&q=90');\n                \"\n            ><\/div>\n\n            <div class=\"tmt-activity-scene__overlay\"><\/div>\n            <div class=\"tmt-activity-scene__fade\"><\/div>\n            <div class=\"tmt-activity-scene__sidefade\"><\/div>\n\n            <div class=\"tmt-activity-scene__content\">\n\n                <div class=\"tmt-activity-scene__eyebrow\">\n                    <span>05<\/span>\n                    <i><\/i>\n                    <strong>Pr\u00e9cision<\/strong>\n                <\/div>\n\n                <h2>Tennis de table<\/h2>\n\n                <p>\n                    Am\u00e9liorer les r\u00e9flexes, la rapidit\u00e9\n                    et la concentration.\n                <\/p>\n\n                <div class=\"tmt-activity-scene__meta\">\n                    <span>CP \u2192 SECONDE<\/span>\n                    <span>R\u00e9flexes \u00b7 Rapidit\u00e9 \u00b7 Concentration<\/span>\n                <\/div>\n\n            <\/div>\n\n        <\/article>\n\n        <!-- =====================================================\n        SC\u00c8NE 06 \u2014 ARTS PLASTIQUES\n        ====================================================== -->\n\n        <article class=\"tmt-activity-scene\" data-scene=\"5\">\n\n            <div\n                class=\"tmt-activity-scene__image\"\n                style=\"\n                background-image:\n                url('https:\/\/images.unsplash.com\/photo-1541961017774-22349e4a1262?auto=format&fit=crop&w=1800&q=90');\n                \"\n            ><\/div>\n\n            <div class=\"tmt-activity-scene__overlay\"><\/div>\n            <div class=\"tmt-activity-scene__fade\"><\/div>\n            <div class=\"tmt-activity-scene__sidefade\"><\/div>\n\n            <div class=\"tmt-activity-scene__content\">\n\n                <div class=\"tmt-activity-scene__eyebrow\">\n                    <span>06<\/span>\n                    <i><\/i>\n                    <strong>Cr\u00e9ativit\u00e9<\/strong>\n                <\/div>\n\n                <h2>Arts plastiques<\/h2>\n\n                <p>\n                    Exprimer sa cr\u00e9ativit\u00e9, exp\u00e9rimenter\n                    et d\u00e9velopper sa sensibilit\u00e9 artistique.\n                <\/p>\n\n                <div class=\"tmt-activity-scene__meta\">\n                    <span>CP \u2192 SECONDE<\/span>\n                    <span>Cr\u00e9ation \u00b7 Sensibilit\u00e9 \u00b7 Expression<\/span>\n                <\/div>\n\n            <\/div>\n\n        <\/article>\n\n        <!-- =====================================================\n        SC\u00c8NE 07 \u2014 DANSE\n        ====================================================== -->\n\n        <article class=\"tmt-activity-scene\" data-scene=\"6\">\n\n            <div\n                class=\"tmt-activity-scene__image\"\n                style=\"\n                background-image:\n                url('https:\/\/images.unsplash.com\/photo-1508700115892-45ecd05ae2ad?auto=format&fit=crop&w=1800&q=90');\n                \"\n            ><\/div>\n\n            <div class=\"tmt-activity-scene__overlay\"><\/div>\n            <div class=\"tmt-activity-scene__fade\"><\/div>\n            <div class=\"tmt-activity-scene__sidefade\"><\/div>\n\n            <div class=\"tmt-activity-scene__content\">\n\n                <div class=\"tmt-activity-scene__eyebrow\">\n                    <span>07<\/span>\n                    <i><\/i>\n                    <strong>Expression corporelle<\/strong>\n                <\/div>\n\n                <h2>Danse<\/h2>\n\n                <p>\n                    S\u2019exprimer avec gr\u00e2ce, d\u00e9velopper\n                    sa coordination et sa confiance.\n                <\/p>\n\n                <div class=\"tmt-activity-scene__meta\">\n                    <span>CP \u2192 SECONDE<\/span>\n                    <span>Gr\u00e2ce \u00b7 Coordination \u00b7 Confiance<\/span>\n                <\/div>\n\n            <\/div>\n\n        <\/article>\n\n        <!-- =====================================================\n        SC\u00c8NE 08 \u2014 TH\u00c9\u00c2TRE\n        ====================================================== -->\n\n        <article class=\"tmt-activity-scene\" data-scene=\"7\">\n\n            <div\n                class=\"tmt-activity-scene__image\"\n                style=\"\n                background-image:\n                url('https:\/\/images.unsplash.com\/photo-1503095396549-807759245b35?auto=format&fit=crop&w=1800&q=90');\n                \"\n            ><\/div>\n\n            <div class=\"tmt-activity-scene__overlay\"><\/div>\n            <div class=\"tmt-activity-scene__fade\"><\/div>\n            <div class=\"tmt-activity-scene__sidefade\"><\/div>\n\n            <div class=\"tmt-activity-scene__content\">\n\n                <div class=\"tmt-activity-scene__eyebrow\">\n                    <span>08<\/span>\n                    <i><\/i>\n                    <strong>Art de la sc\u00e8ne<\/strong>\n                <\/div>\n\n                <h2>Th\u00e9\u00e2tre<\/h2>\n\n                <p>\n                    D\u00e9velopper l\u2019expression orale,\n                    l\u2019imagination et la confiance en soi.\n                <\/p>\n\n                <div class=\"tmt-activity-scene__meta\">\n                    <span>CP \u2192 SECONDE<\/span>\n                    <span>Expression \u00b7 Imagination \u00b7 Assurance<\/span>\n                <\/div>\n\n            <\/div>\n\n        <\/article>\n\n        <!-- =====================================================\n        SC\u00c8NE 09 \u2014 CUISINE\n        ====================================================== -->\n\n        <article class=\"tmt-activity-scene\" data-scene=\"8\">\n\n            <div\n                class=\"tmt-activity-scene__image\"\n                style=\"\n                background-image:\n                url('https:\/\/images.unsplash.com\/photo-1556910103-1c02745aae4d?auto=format&fit=crop&w=1800&q=90');\n                \"\n            ><\/div>\n\n            <div class=\"tmt-activity-scene__overlay\"><\/div>\n            <div class=\"tmt-activity-scene__fade\"><\/div>\n            <div class=\"tmt-activity-scene__sidefade\"><\/div>\n\n            <div class=\"tmt-activity-scene__content\">\n\n                <div class=\"tmt-activity-scene__eyebrow\">\n                    <span>09<\/span>\n                    <i><\/i>\n                    <strong>D\u00e9couverte<\/strong>\n                <\/div>\n\n                <h2>Cuisine<\/h2>\n\n                <p>\n                    D\u00e9couvrir, cr\u00e9er, exp\u00e9rimenter\n                    et apprendre \u00e0 partager.\n                <\/p>\n\n                <div class=\"tmt-activity-scene__meta\">\n                    <span>CP \u2192 SECONDE<\/span>\n                    <span>D\u00e9couverte \u00b7 Cr\u00e9ation \u00b7 Partage<\/span>\n                <\/div>\n\n            <\/div>\n\n        <\/article>\n\n        <!-- =====================================================\n        SC\u00c8NE 10 \u2014 LANGUE CHINOISE\n        ====================================================== -->\n\n        <article class=\"tmt-activity-scene\" data-scene=\"9\">\n\n            <div\n                class=\"tmt-activity-scene__image\"\n                style=\"\n                background-image:\n                url('https:\/\/images.unsplash.com\/photo-1523240795612-9a054b0db644?auto=format&fit=crop&w=1800&q=90');\n                \"\n            ><\/div>\n\n            <div class=\"tmt-activity-scene__overlay\"><\/div>\n            <div class=\"tmt-activity-scene__fade\"><\/div>\n            <div class=\"tmt-activity-scene__sidefade\"><\/div>\n\n            <div class=\"tmt-activity-scene__content\">\n\n                <div class=\"tmt-activity-scene__eyebrow\">\n                    <span>10<\/span>\n                    <i><\/i>\n                    <strong>Langues<\/strong>\n                <\/div>\n\n                <h2>Langue chinoise<\/h2>\n\n                <p>\n                    D\u00e9couvrir une nouvelle culture\n                    riche et fascinante.\n                <\/p>\n\n                <div class=\"tmt-activity-scene__meta\">\n                    <span>CP \u2192 SECONDE<\/span>\n                    <span>Culture \u00b7 Langue \u00b7 Ouverture<\/span>\n                <\/div>\n\n            <\/div>\n\n        <\/article>\n\n        <!-- =====================================================\n        SC\u00c8NE 11 \u2014 ANGLAIS\n        ====================================================== -->\n\n        <article class=\"tmt-activity-scene\" data-scene=\"10\">\n\n            <div\n                class=\"tmt-activity-scene__image\"\n                style=\"\n                background-image:\n                url('http:\/\/net-temporaire.institut-tometal.com\/wp-content\/uploads\/2026\/08\/english_books-scaled.jpg');\n                \"\n            ><\/div>\n\n            <div class=\"tmt-activity-scene__overlay\"><\/div>\n            <div class=\"tmt-activity-scene__fade\"><\/div>\n            <div class=\"tmt-activity-scene__sidefade\"><\/div>\n\n            <div class=\"tmt-activity-scene__content\">\n\n                <div class=\"tmt-activity-scene__eyebrow\">\n                    <span>11<\/span>\n                    <i><\/i>\n                    <strong>Langues<\/strong>\n                <\/div>\n\n                <h2>Cours d\u2019anglais<\/h2>\n\n                <p>\n                    Communiquer avec assurance aujourd\u2019hui\n                    pour mieux r\u00e9ussir demain.\n                <\/p>\n\n                <div class=\"tmt-activity-scene__meta\">\n                    <span>CP \u2192 SECONDE<\/span>\n                    <span>Communication \u00b7 Ouverture \u00b7 Avenir<\/span>\n                <\/div>\n\n            <\/div>\n\n        <\/article>\n\n        <!-- =====================================================\n        SC\u00c8NE 12 \u2014 \u00c9CHECS\n        ====================================================== -->\n\n        <article class=\"tmt-activity-scene\" data-scene=\"11\">\n\n            <div\n                class=\"tmt-activity-scene__image\"\n                style=\"\n                background-image:\n                url('https:\/\/images.unsplash.com\/photo-1586165368502-1bad197a6461?auto=format&fit=crop&w=1800&q=90');\n                \"\n            ><\/div>\n\n            <div class=\"tmt-activity-scene__overlay\"><\/div>\n            <div class=\"tmt-activity-scene__fade\"><\/div>\n            <div class=\"tmt-activity-scene__sidefade\"><\/div>\n\n            <div class=\"tmt-activity-scene__content\">\n\n                <div class=\"tmt-activity-scene__eyebrow\">\n                    <span>12<\/span>\n                    <i><\/i>\n                    <strong>Strat\u00e9gie<\/strong>\n                <\/div>\n\n                <h2>\u00c9checs<\/h2>\n\n                <p>\n                    Renforcer la r\u00e9flexion, l\u2019anticipation,\n                    la patience et la concentration.\n                <\/p>\n\n                <div class=\"tmt-activity-scene__meta\">\n                    <span>CP \u2192 SECONDE<\/span>\n                    <span>R\u00e9flexion \u00b7 Patience \u00b7 Anticipation<\/span>\n                <\/div>\n\n            <\/div>\n\n        <\/article>\n\n        <!-- =====================================================\n        INTERFACE FIXE\n        ====================================================== -->\n\n        <div class=\"tmt-immersive-ui\">\n\n            <div class=\"tmt-immersive-ui__top\">\n\n                <div class=\"tmt-immersive-ui__brand\">\n                    <span>ACTIVIT\u00c9S EXTRASCOLAIRES<\/span>\n                    <strong>Institut Tometal<\/strong>\n                <\/div>\n\n                <div class=\"tmt-immersive-ui__counter\">\n                    <strong data-current>01<\/strong>\n                    <span>\/ 12<\/span>\n                <\/div>\n\n            <\/div>\n\n            <div class=\"tmt-immersive-ui__progress\">\n                <i data-progress-bar><\/i>\n            <\/div>\n\n            <div class=\"tmt-immersive-ui__scroll\">\n                <span>Explorer<\/span>\n                <i>\n                    <b><\/b>\n                <\/i>\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n\n<style>\n\n\/* =========================================================\nVARIABLES\n========================================================= *\/\n\n.tmt-immersive-activities {\n\n    --ia-navy: #071b3d;\n    --ia-navy-dark: #020d22;\n    --ia-gold: #c99a42;\n    --ia-gold-light: #e6c879;\n    --ia-white: #ffffff;\n\n    \/*\n    12 sc\u00e8nes.\n    Plus la hauteur est grande,\n    plus chaque activit\u00e9 reste longtemps visible.\n    *\/\n\n    position: relative;\n\n    width: 100vw;\n    max-width: 100vw;\n\n    left: 50%;\n    margin-left: -50vw;\n    margin-right: 0;\n\n    padding-left: 0;\n    padding-right: 0;\n\n    overflow-x: clip;\n\n    height: 1000vh;\n\n    background:\n        var(--ia-navy);\n}\n\n.tmt-immersive-activities,\n.tmt-immersive-activities * {\n    box-sizing: border-box;\n}\n\n.tmt-immersive-activities h2,\n.tmt-immersive-activities p {\n    margin-top: 0;\n}\n\n\n\/* =========================================================\nSTICKY\n========================================================= *\/\n\n.tmt-immersive-activities__sticky {\n\n    position: sticky;\n\n    \/*\n    Si ton header fixe fait environ 104px,\n    le contenu reste juste en dessous.\n    *\/\n\n    top: 104px;\n\n    width: 100vw;\n    max-width: 100vw;\n\n    left: 0;\n    right: 0;\n\n    margin: 0;\n    padding: 0;\n\n    height:\n        calc(100vh - 104px);\n\n    min-height: 620px;\n\n    overflow: hidden;\n\n    background:\n        var(--ia-navy);\n\n    isolation: isolate;\n}\n\n\n\/* =========================================================\nSC\u00c8NES\n========================================================= *\/\n\n.tmt-activity-scene {\n\n    position: absolute;\n\n    inset: 0;\n\n    opacity: 0;\n\n    visibility: hidden;\n\n    pointer-events: none;\n\n    z-index: 1;\n\n    transform: translateX(6%);\n\n    transition:\n        opacity 1.55s ease,\n        visibility 1.55s ease,\n        transform 1.75s cubic-bezier(.16,1,.3,1);\n}\n\n.tmt-activity-scene.is-active {\n\n    opacity: 1;\n\n    visibility: visible;\n\n    z-index: 2;\n\n    transform: translateX(0);\n}\n\n.tmt-activity-scene.is-leaving-left {\n\n    opacity: 0;\n\n    visibility: visible;\n\n    z-index: 3;\n\n    transform: translateX(-10%);\n}\n\n.tmt-activity-scene.is-entering-right {\n\n    opacity: 0;\n\n    visibility: visible;\n\n    z-index: 2;\n\n    transform: translateX(8%);\n}\n\n\n\/* =========================================================\nIMAGE\n========================================================= *\/\n\n.tmt-activity-scene__image {\n\n    position: absolute;\n\n    inset: -3%;\n\n    background-size: cover;\n\n    background-repeat: no-repeat;\n\n    background-position:\n        center center;\n\n    transform:\n        scale(1.10);\n\n    filter:\n        saturate(.92)\n        contrast(1.04);\n\n    transition:\n        transform 3.2s\n        cubic-bezier(.16,1,.3,1),\n        filter 1.6s ease;\n\n    will-change:\n        transform,\n        opacity;\n}\n\n.tmt-activity-scene.is-active\n.tmt-activity-scene__image {\n\n    transform:\n        scale(1.025);\n\n    filter:\n        saturate(1)\n        contrast(1.04);\n}\n\n\n\/* =========================================================\nOVERLAYS\n========================================================= *\/\n\n.tmt-activity-scene__overlay {\n\n    position: absolute;\n\n    inset: 0;\n\n    background:\n        linear-gradient(\n            180deg,\n            rgba(7,27,61,.08) 0%,\n            rgba(7,27,61,.10) 35%,\n            rgba(7,27,61,.22) 60%,\n            rgba(7,27,61,.42) 100%\n        );\n}\n\n\n\/* FADING BLEU PROFESSIONNEL *\/\n\n.tmt-activity-scene__fade {\n\n    position: absolute;\n\n    inset: 0;\n\n    background:\n        linear-gradient(\n            180deg,\n\n            rgba(7,27,61,0) 0%,\n\n            rgba(7,27,61,.03) 24%,\n\n            rgba(7,27,61,.13) 43%,\n\n            rgba(7,27,61,.38) 59%,\n\n            rgba(7,27,61,.73) 76%,\n\n            rgba(7,27,61,.95) 92%,\n\n            #071b3d 100%\n        );\n}\n\n\n\/* FADING GAUCHE *\/\n\n.tmt-activity-scene__sidefade {\n\n    position: absolute;\n\n    inset: 0;\n\n    background:\n        linear-gradient(\n            90deg,\n\n            rgba(2,13,34,.80) 0%,\n\n            rgba(7,27,61,.63) 25%,\n\n            rgba(7,27,61,.28) 52%,\n\n            rgba(7,27,61,.06) 72%,\n\n            transparent 100%\n        );\n}\n\n\n\/* =========================================================\nCONTENU\n========================================================= *\/\n\n.tmt-activity-scene__content {\n\n    position: absolute;\n\n    left:\n        clamp(\n            50px,\n            7vw,\n            125px\n        );\n\n    bottom:\n        clamp(\n            80px,\n            11vh,\n            140px\n        );\n\n    z-index: 5;\n\n    width:\n        min(\n            920px,\n            68%\n        );\n\n    color:\n        var(--ia-white);\n}\n\n\n\/* =========================================================\nEYEBROW\n========================================================= *\/\n\n.tmt-activity-scene__eyebrow {\n\n    display: flex;\n\n    align-items: center;\n\n    gap: 14px;\n\n    margin-bottom: 20px;\n\n    color:\n        var(--ia-gold-light);\n\n    font-family:\n        \"Montserrat\",\n        Arial,\n        sans-serif;\n\n    font-size: 9px;\n\n    font-weight: 700;\n\n    letter-spacing: .17em;\n\n    text-transform: uppercase;\n\n    opacity: 0;\n\n    transform:\n        translateY(26px);\n\n    filter:\n        blur(5px);\n\n    transition:\n        opacity .75s ease .08s,\n\n        transform .9s\n        cubic-bezier(.16,1,.3,1)\n        .08s,\n\n        filter .8s ease .08s;\n}\n\n.tmt-activity-scene.is-active\n.tmt-activity-scene__eyebrow {\n\n    opacity: 1;\n\n    transform:\n        translateY(0);\n\n    filter:\n        blur(0);\n}\n\n.tmt-activity-scene__eyebrow i {\n\n    width: 50px;\n\n    height: 1px;\n\n    background:\n        var(--ia-gold);\n}\n\n.tmt-activity-scene__eyebrow strong {\n\n    color:\n        rgba(255,255,255,.78);\n\n    font-weight: 600;\n}\n\n\n\/* =========================================================\nGRAND TITRE\n========================================================= *\/\n\n.tmt-activity-scene h2 {\n\n    margin-bottom: 22px;\n\n    color:\n        #ffffff;\n\n    font-family:\n        Georgia,\n        \"Times New Roman\",\n        serif;\n\n    font-size:\n        clamp(\n            72px,\n            9vw,\n            150px\n        );\n\n    font-weight: 400;\n\n    line-height: .88;\n\n    letter-spacing:\n        -.055em;\n\n    opacity: 0;\n\n    transform:\n        translate3d(\n            0,\n            75px,\n            0\n        )\n        scale(.975);\n\n    filter:\n        blur(11px);\n\n    clip-path:\n        inset(\n            0 0 100% 0\n        );\n\n    transition:\n\n        opacity .9s ease,\n\n        transform 1.1s\n        cubic-bezier(.16,1,.3,1),\n\n        filter 1.05s ease,\n\n        clip-path 1.1s\n        cubic-bezier(.16,1,.3,1);\n}\n\n.tmt-activity-scene.is-active h2 {\n\n    opacity: 1;\n\n    transform:\n        translate3d(\n            0,\n            0,\n            0\n        )\n        scale(1);\n\n    filter:\n        blur(0);\n\n    clip-path:\n        inset(\n            0 0 0 0\n        );\n}\n\n\n\/* =========================================================\nDESCRIPTION\n========================================================= *\/\n\n.tmt-activity-scene p {\n\n    max-width: 700px;\n\n    margin-bottom: 24px;\n\n    color:\n        rgba(255,255,255,.82);\n\n    font-family:\n        \"Montserrat\",\n        Arial,\n        sans-serif;\n\n    font-size:\n        clamp(\n            14px,\n            1.25vw,\n            18px\n        );\n\n    line-height:\n        1.8;\n\n    opacity: 0;\n\n    transform:\n        translateY(25px);\n\n    filter:\n        blur(4px);\n\n    transition:\n\n        opacity .8s ease .16s,\n\n        transform .9s\n        cubic-bezier(.16,1,.3,1)\n        .16s,\n\n        filter .8s ease .16s;\n}\n\n.tmt-activity-scene.is-active p {\n\n    opacity: 1;\n\n    transform:\n        translateY(0);\n\n    filter:\n        blur(0);\n}\n\n\n\/* =========================================================\nMETA\n========================================================= *\/\n\n.tmt-activity-scene__meta {\n\n    display: flex;\n\n    flex-wrap: wrap;\n\n    align-items: center;\n\n    gap: 16px;\n\n    opacity: 0;\n\n    transform:\n        translateY(18px);\n\n    transition:\n        opacity .75s ease .23s,\n\n        transform .9s\n        cubic-bezier(.16,1,.3,1)\n        .23s;\n}\n\n.tmt-activity-scene.is-active\n.tmt-activity-scene__meta {\n\n    opacity: 1;\n\n    transform:\n        translateY(0);\n}\n\n.tmt-activity-scene__meta span {\n\n    display: inline-flex;\n\n    align-items: center;\n\n    min-height: 36px;\n\n    padding:\n        0 13px;\n\n    color:\n        rgba(255,255,255,.82);\n\n    background:\n        rgba(7,27,61,.36);\n\n    border:\n        1px solid\n        rgba(255,255,255,.17);\n\n    backdrop-filter:\n        blur(8px);\n\n    font-family:\n        \"Montserrat\",\n        Arial,\n        sans-serif;\n\n    font-size:\n        8px;\n\n    font-weight: 700;\n\n    letter-spacing:\n        .08em;\n\n    text-transform:\n        uppercase;\n}\n\n.tmt-activity-scene__meta span:first-child {\n\n    color:\n        var(--ia-navy);\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--ia-gold-light),\n            var(--ia-gold)\n        );\n\n    border-color:\n        var(--ia-gold);\n}\n\n\n\/* =========================================================\nINTERFACE FIXE\n========================================================= *\/\n\n.tmt-immersive-ui {\n\n    position: absolute;\n\n    inset: 0;\n\n    z-index: 20;\n\n    pointer-events: none;\n}\n\n\n\/* =========================================================\nTOP\n========================================================= *\/\n\n.tmt-immersive-ui__top {\n\n    position: absolute;\n\n    top:\n        clamp(\n            28px,\n            4vh,\n            45px\n        );\n\n    left:\n        clamp(\n            50px,\n            7vw,\n            125px\n        );\n\n    right:\n        clamp(\n            50px,\n            7vw,\n            125px\n        );\n\n    display: flex;\n\n    align-items: flex-start;\n\n    justify-content: space-between;\n\n    gap: 30px;\n}\n\n.tmt-immersive-ui__brand {\n\n    display: flex;\n\n    flex-direction: column;\n\n    gap: 5px;\n}\n\n.tmt-immersive-ui__brand span {\n\n    color:\n        var(--ia-gold-light);\n\n    font-family:\n        \"Montserrat\",\n        Arial,\n        sans-serif;\n\n    font-size: 8px;\n\n    font-weight: 700;\n\n    letter-spacing:\n        .17em;\n}\n\n.tmt-immersive-ui__brand strong {\n\n    color:\n        rgba(255,255,255,.58);\n\n    font-family:\n        \"Montserrat\",\n        Arial,\n        sans-serif;\n\n    font-size: 8px;\n\n    font-weight: 600;\n\n    letter-spacing:\n        .09em;\n}\n\n\n\/* =========================================================\nCOUNTER\n========================================================= *\/\n\n.tmt-immersive-ui__counter {\n\n    display: flex;\n\n    align-items: baseline;\n\n    gap: 5px;\n\n    color:\n        white;\n}\n\n.tmt-immersive-ui__counter strong {\n\n    color:\n        var(--ia-gold-light);\n\n    font-family:\n        Georgia,\n        serif;\n\n    font-size:\n        34px;\n\n    font-weight:\n        400;\n}\n\n.tmt-immersive-ui__counter span {\n\n    color:\n        rgba(255,255,255,.48);\n\n    font-family:\n        \"Montserrat\",\n        sans-serif;\n\n    font-size:\n        10px;\n\n    font-weight:\n        700;\n}\n\n\n\/* =========================================================\nPROGRESS BAR\n========================================================= *\/\n\n.tmt-immersive-ui__progress {\n\n    position: absolute;\n\n    left:\n        clamp(\n            50px,\n            7vw,\n            125px\n        );\n\n    right:\n        clamp(\n            50px,\n            7vw,\n            125px\n        );\n\n    bottom:\n        34px;\n\n    height: 2px;\n\n    overflow: hidden;\n\n    background:\n        rgba(255,255,255,.14);\n}\n\n.tmt-immersive-ui__progress i {\n\n    display: block;\n\n    width: 8.333%;\n\n    height: 100%;\n\n    background:\n        linear-gradient(\n            90deg,\n            var(--ia-gold),\n            var(--ia-gold-light)\n        );\n\n    transition:\n        width .65s\n        cubic-bezier(.16,1,.3,1);\n}\n\n\n\/* =========================================================\nSCROLL HINT\n========================================================= *\/\n\n.tmt-immersive-ui__scroll {\n\n    position: absolute;\n\n    right: 23px;\n\n    top: 50%;\n\n    display: flex;\n\n    align-items: center;\n\n    gap: 13px;\n\n    transform:\n        translateY(-50%)\n        rotate(90deg);\n\n    transform-origin:\n        right center;\n\n    color:\n        rgba(255,255,255,.56);\n\n    font-family:\n        \"Montserrat\",\n        sans-serif;\n\n    font-size: 7px;\n\n    font-weight: 700;\n\n    letter-spacing:\n        .17em;\n\n    text-transform:\n        uppercase;\n}\n\n.tmt-immersive-ui__scroll > i {\n\n    display: block;\n\n    width: 54px;\n\n    height: 1px;\n\n    overflow: hidden;\n\n    background:\n        rgba(255,255,255,.18);\n}\n\n.tmt-immersive-ui__scroll b {\n\n    display: block;\n\n    width: 45%;\n\n    height: 100%;\n\n    background:\n        var(--ia-gold);\n\n    animation:\n        tmtActivityScrollLine\n        1.5s ease\n        infinite;\n}\n\n@keyframes tmtActivityScrollLine {\n\n    0% {\n        transform:\n            translateX(-110%);\n    }\n\n    65% {\n        transform:\n            translateX(220%);\n    }\n\n    100% {\n        transform:\n            translateX(220%);\n    }\n}\n\n\n\/* =========================================================\nSC\u00c8NE SORTANTE\n========================================================= *\/\n\n.tmt-activity-scene.is-leaving-left\n.tmt-activity-scene__image {\n\n    transform:\n        scale(1.055)\n        translateX(-1.5%);\n}\n\n.tmt-activity-scene.is-leaving-left\n.tmt-activity-scene__content {\n\n    opacity: 0;\n\n    transform:\n        translateX(-38px);\n\n    transition:\n        opacity .8s ease,\n        transform 1.05s cubic-bezier(.16,1,.3,1);\n}\n\n\n\/* =========================================================\nTABLETTE\n========================================================= *\/\n\n@media screen and (max-width: 1050px) {\n\n    .tmt-immersive-activities {\n\n        height:\n            1000vh;\n    }\n\n    .tmt-immersive-activities__sticky {\n\n        top: 90px;\n\n        height:\n            calc(\n                100vh - 90px\n            );\n    }\n\n    .tmt-activity-scene__content {\n\n        width:\n            75%;\n\n        left: 42px;\n    }\n\n    .tmt-immersive-ui__top,\n    .tmt-immersive-ui__progress {\n\n        left: 42px;\n        right: 42px;\n    }\n\n    .tmt-immersive-ui__scroll {\n\n        display: none;\n    }\n\n}\n\n\n\/* =========================================================\nMOBILE\n========================================================= *\/\n\n@media screen and (max-width: 767px) {\n\n    .tmt-immersive-activities {\n\n        height:\n            900vh;\n    }\n\n    .tmt-immersive-activities__sticky {\n\n        top: 78px;\n\n        height:\n            calc(\n                100vh - 78px\n            );\n\n        min-height:\n            560px;\n    }\n\n    .tmt-activity-scene__content {\n\n        left: 20px;\n\n        right: 20px;\n\n        bottom: 70px;\n\n        width: auto;\n    }\n\n    .tmt-activity-scene h2 {\n\n        font-size:\n            clamp(\n                50px,\n                15vw,\n                72px\n            );\n\n        margin-bottom: 16px;\n    }\n\n    .tmt-activity-scene p {\n\n        font-size: 12px;\n\n        line-height: 1.65;\n\n        margin-bottom: 17px;\n    }\n\n    .tmt-activity-scene__meta {\n\n        gap: 8px;\n    }\n\n    .tmt-activity-scene__meta span {\n\n        min-height: 31px;\n\n        padding:\n            0 10px;\n\n        font-size: 7px;\n    }\n\n    .tmt-activity-scene__eyebrow {\n\n        margin-bottom: 14px;\n\n        font-size: 7px;\n    }\n\n    .tmt-activity-scene__eyebrow i {\n\n        width: 26px;\n    }\n\n    .tmt-immersive-ui__top {\n\n        top: 20px;\n\n        left: 20px;\n\n        right: 20px;\n    }\n\n    .tmt-immersive-ui__brand strong {\n\n        display: none;\n    }\n\n    .tmt-immersive-ui__counter strong {\n\n        font-size: 27px;\n    }\n\n    .tmt-immersive-ui__progress {\n\n        left: 20px;\n\n        right: 20px;\n\n        bottom: 24px;\n    }\n\n    .tmt-activity-scene__sidefade {\n\n        background:\n            linear-gradient(\n                90deg,\n\n                rgba(2,13,34,.55) 0%,\n\n                rgba(7,27,61,.22) 65%,\n\n                transparent 100%\n            );\n    }\n\n    .tmt-activity-scene__fade {\n\n        background:\n            linear-gradient(\n                180deg,\n\n                rgba(7,27,61,.03) 0%,\n\n                rgba(7,27,61,.10) 30%,\n\n                rgba(7,27,61,.42) 53%,\n\n                rgba(7,27,61,.86) 74%,\n\n                #071b3d 100%\n            );\n    }\n\n}\n\n\n\/* =========================================================\nACCESSIBILIT\u00c9\n========================================================= *\/\n\n@media (prefers-reduced-motion: reduce) {\n\n    .tmt-activity-scene,\n    .tmt-activity-scene__image,\n    .tmt-activity-scene h2,\n    .tmt-activity-scene p,\n    .tmt-activity-scene__eyebrow,\n    .tmt-activity-scene__meta,\n    .tmt-immersive-ui__progress i {\n\n        transition:\n            none !important;\n\n        animation:\n            none !important;\n    }\n\n    .tmt-activity-scene.is-active h2,\n    .tmt-activity-scene.is-active p,\n    .tmt-activity-scene.is-active\n    .tmt-activity-scene__eyebrow,\n    .tmt-activity-scene.is-active\n    .tmt-activity-scene__meta {\n\n        opacity: 1;\n\n        transform: none;\n\n        filter: none;\n\n        clip-path: none;\n    }\n\n}\n\n\n\/* =========================================================\nELEMENTOR\n========================================================= *\/\n\n.elementor-widget-html:has(.tmt-immersive-activities),\n.elementor-widget-html:has(.tmt-immersive-activities)\n> .elementor-widget-container {\n\n    width:\n        100% !important;\n\n    max-width:\n        none !important;\n\n    margin:\n        0 !important;\n\n    padding:\n        0 !important;\n}\n\n#activites-extrascolaires {\n\n    scroll-margin-top:\n        105px;\n}\n\n\/* =========================================================\nPLEINE LARGEUR R\u00c9ELLE DANS ELEMENTOR\n========================================================= *\/\n\n.elementor-widget-html:has(.tmt-immersive-activities) {\n    width: 100vw !important;\n    max-width: 100vw !important;\n    margin-left: calc(50% - 50vw) !important;\n    margin-right: 0 !important;\n}\n\n.elementor-widget-html:has(.tmt-immersive-activities)\n> .elementor-widget-container {\n    width: 100% !important;\n    max-width: none !important;\n    margin: 0 !important;\n    padding: 0 !important;\n}\n\n.elementor-element:has(.tmt-immersive-activities),\n.elementor-element:has(.tmt-immersive-activities)\n> .e-con-inner {\n    max-width: none !important;\n    width: 100% !important;\n    padding-left: 0 !important;\n    padding-right: 0 !important;\n    margin-left: 0 !important;\n    margin-right: 0 !important;\n}\n\n<\/style>\n\n\n<script>\n\n(function () {\n\n    \"use strict\";\n\n\n    function initTometalImmersiveActivities() {\n\n\n        const sections =\n            document.querySelectorAll(\n                \"[data-tmt-immersive-activities]\"\n            );\n\n\n        sections.forEach(\n            function (section) {\n\n\n                if (\n                    section.dataset.ready ===\n                    \"true\"\n                ) {\n                    return;\n                }\n\n\n                section.dataset.ready =\n                    \"true\";\n\n\n                const scenes =\n                    Array.from(\n                        section.querySelectorAll(\n                            \"[data-scene]\"\n                        )\n                    );\n\n\n                const currentDisplay =\n                    section.querySelector(\n                        \"[data-current]\"\n                    );\n\n\n                const progressBar =\n                    section.querySelector(\n                        \"[data-progress-bar]\"\n                    );\n\n\n                let currentScene =\n                    -1;\n\n\n                let ticking =\n                    false;\n\n\n                \/* =========================================\n                ACTIVATE SCENE\n                ========================================= *\/\n\n\n                function activateScene(index) {\n\n                    if (index === currentScene) {\n                        return;\n                    }\n\n                    const previousIndex = currentScene;\n                    const oldScene = scenes[previousIndex];\n                    const newScene = scenes[index];\n\n                    const goingForward =\n                        previousIndex === -1 || index > previousIndex;\n\n                    if (oldScene) {\n\n                        oldScene.classList.remove(\n                            \"is-active\",\n                            \"is-entering-right\",\n                            \"is-leaving-left\"\n                        );\n\n                        oldScene.classList.add(\n                            goingForward\n                                ? \"is-leaving-left\"\n                                : \"is-entering-right\"\n                        );\n\n                        window.setTimeout(\n                            function () {\n\n                                oldScene.classList.remove(\n                                    \"is-leaving-left\",\n                                    \"is-entering-right\"\n                                );\n\n                            },\n                            1700\n                        );\n\n                    }\n\n                    currentScene = index;\n\n                    scenes.forEach(\n                        function (scene, sceneIndex) {\n\n                            if (sceneIndex !== currentScene) {\n                                scene.classList.remove(\"is-active\");\n                            }\n\n                        }\n                    );\n\n                    if (newScene) {\n\n                        newScene.classList.remove(\n                            \"is-active\",\n                            \"is-leaving-left\",\n                            \"is-entering-right\"\n                        );\n\n                        newScene.classList.add(\n                            goingForward\n                                ? \"is-entering-right\"\n                                : \"is-leaving-left\"\n                        );\n\n                        void newScene.offsetWidth;\n\n                        newScene.classList.add(\"is-active\");\n\n                        window.requestAnimationFrame(\n                            function () {\n\n                                newScene.classList.remove(\n                                    \"is-entering-right\",\n                                    \"is-leaving-left\"\n                                );\n\n                            }\n                        );\n\n                    }\n\n                    if (currentDisplay) {\n\n                        currentDisplay.textContent =\n                            String(currentScene + 1)\n                            .padStart(2, \"0\");\n\n                    }\n\n                    if (progressBar) {\n\n                        progressBar.style.width =\n                            (\n                                (currentScene + 1) \/\n                                scenes.length *\n                                100\n                            ) + \"%\";\n\n                    }\n\n                }\n\n\n                \/* =========================================\n                SCROLL CALCULATION\n                ========================================= *\/\n\n\n                function update() {\n\n\n                    const rect =\n                        section\n                            .getBoundingClientRect();\n\n\n                    const sticky =\n                        section.querySelector(\n                            \".tmt-immersive-activities__sticky\"\n                        );\n\n\n                    const stickyHeight =\n                        sticky\n                            ? sticky.offsetHeight\n                            : window.innerHeight;\n\n\n                    const scrollDistance =\n                        Math.max(\n                            section.offsetHeight -\n                            stickyHeight,\n                            1\n                        );\n\n\n                    let progress =\n                        -rect.top \/\n                        scrollDistance;\n\n\n                    progress =\n                        Math.max(\n                            0,\n                            Math.min(\n                                1,\n                                progress\n                            )\n                        );\n\n\n                    \/*\n                    Chaque activit\u00e9 poss\u00e8de\n                    exactement sa propre portion\n                    du scroll.\n                    *\/\n\n\n                    let index =\n                        Math.floor(\n                            progress *\n                            scenes.length\n                        );\n\n\n                    if (\n                        index >=\n                        scenes.length\n                    ) {\n\n\n                        index =\n                            scenes.length - 1;\n\n                    }\n\n\n                    if (\n                        index < 0\n                    ) {\n\n\n                        index = 0;\n\n                    }\n\n\n                    activateScene(\n                        index\n                    );\n\n\n                    \/*\n                    Tr\u00e8s l\u00e9ger mouvement interne\n                    pendant chaque sc\u00e8ne.\n                    *\/\n\n\n                    const sceneProgress =\n                        (\n                            progress *\n                            scenes.length\n                        ) -\n                        index;\n\n\n                    const activeScene =\n                        scenes[index];\n\n\n                    if (activeScene) {\n\n\n                        const image =\n                            activeScene.querySelector(\n                                \".tmt-activity-scene__image\"\n                            );\n\n\n                        if (image) {\n\n\n                            const shift =\n                                sceneProgress *\n                                4;\n\n\n                            image.style\n                                .transform =\n                                \"scale(\" +\n                                (\n                                    1.025 +\n                                    sceneProgress *\n                                    .008\n                                )\n                                +\n                                \") translateY(\" +\n                                shift +\n                                \"px)\";\n\n                        }\n\n                    }\n\n\n                    ticking =\n                        false;\n\n                }\n\n\n                \/* =========================================\n                RAF\n                ========================================= *\/\n\n\n                function requestUpdate() {\n\n\n                    if (ticking) {\n                        return;\n                    }\n\n\n                    ticking =\n                        true;\n\n\n                    window\n                        .requestAnimationFrame(\n                            update\n                        );\n\n                }\n\n\n                window.addEventListener(\n                    \"scroll\",\n                    requestUpdate,\n                    {\n                        passive: true\n                    }\n                );\n\n\n                window.addEventListener(\n                    \"resize\",\n                    requestUpdate\n                );\n\n\n                activateScene(0);\n\n                update();\n\n            }\n        );\n\n    }\n\n\n    if (\n        document.readyState ===\n        \"loading\"\n    ) {\n\n\n        document.addEventListener(\n            \"DOMContentLoaded\",\n            initTometalImmersiveActivities\n        );\n\n\n    } else {\n\n\n        initTometalImmersiveActivities();\n\n    }\n\n\n})();\n\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-256f39c e-con-full e-flex e-con e-parent\" data-id=\"256f39c\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a2f3378 elementor-widget elementor-widget-html\" data-id=\"a2f3378\" 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 TEST DES TALENTS\r\nVERSION PREMIUM COMPACTE 3.0\r\nHTML + CSS + JAVASCRIPT\r\n\u00c0 COLLER DANS UN SEUL WIDGET HTML ELEMENTOR\r\n========================================================= -->\r\n\r\n<section\r\n    class=\"tmt-quiz\"\r\n    id=\"test-profil\"\r\n    data-tmt-quiz\r\n>\r\n    <!-- D\u00c9CORATIONS -->\r\n    <div class=\"tmt-quiz__halo tmt-quiz__halo--one\" aria-hidden=\"true\"><\/div>\r\n    <div class=\"tmt-quiz__halo tmt-quiz__halo--two\" aria-hidden=\"true\"><\/div>\r\n\r\n    <div class=\"tmt-quiz__shell\">\r\n\r\n        <!-- =====================================================\r\n        PANNEAU GAUCHE\r\n        ====================================================== -->\r\n\r\n        <aside class=\"tmt-intro\">\r\n\r\n            <div class=\"tmt-intro__topline\">\r\n                <span>02<\/span>\r\n                <i><\/i>\r\n                <strong>D\u00e9couverte personnelle<\/strong>\r\n            <\/div>\r\n\r\n            <h2 class=\"tmt-intro__title\">\r\n                D\u00e9couvre\r\n                <em>ton univers.<\/em>\r\n            <\/h2>\r\n\r\n            <p class=\"tmt-intro__text\">\r\n                Quatre questions simples pour identifier l\u2019univers\r\n                d\u2019activit\u00e9s qui correspond le mieux \u00e0 ta personnalit\u00e9,\r\n                \u00e0 tes envies et \u00e0 tes talents.\r\n            <\/p>\r\n\r\n            <div class=\"tmt-intro__notice\">\r\n                <span><\/span>\r\n\r\n                <p>\r\n                    R\u00e9ponds spontan\u00e9ment. Il n\u2019existe aucune mauvaise r\u00e9ponse.\r\n                <\/p>\r\n            <\/div>\r\n\r\n            <!-- PROFILS -->\r\n\r\n            <div class=\"tmt-profiles\">\r\n\r\n                <article\r\n                    class=\"tmt-profile tmt-profile--sportif\"\r\n                    data-profile-preview=\"sportif\"\r\n                >\r\n                    <div class=\"tmt-profile__icon\">\r\n                        <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n                            <circle cx=\"12\" cy=\"12\" r=\"8.5\"><\/circle>\r\n                            <path d=\"m9 9 3-2 3 2-1 4h-4z\"><\/path>\r\n                            <path d=\"m5 10 4-1\"><\/path>\r\n                            <path d=\"m15 9 4 1\"><\/path>\r\n                        <\/svg>\r\n                    <\/div>\r\n\r\n                    <div>\r\n                        <span>01<\/span>\r\n                        <strong>Sportif<\/strong>\r\n                        <p>\u00c9nergie et coop\u00e9ration.<\/p>\r\n                    <\/div>\r\n                <\/article>\r\n\r\n                <article\r\n                    class=\"tmt-profile tmt-profile--artiste\"\r\n                    data-profile-preview=\"artiste\"\r\n                >\r\n                    <div class=\"tmt-profile__icon\">\r\n                        <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n                            <path d=\"M12 3a9 9 0 0 0 0 18h2a2 2 0 0 0 0-4h-1a2 2 0 0 1 0-4h2a6 6 0 0 0 0-12z\"><\/path>\r\n                            <circle cx=\"8\" cy=\"9\" r=\"1\"><\/circle>\r\n                            <circle cx=\"13\" cy=\"7\" r=\"1\"><\/circle>\r\n                            <circle cx=\"16\" cy=\"10\" r=\"1\"><\/circle>\r\n                        <\/svg>\r\n                    <\/div>\r\n\r\n                    <div>\r\n                        <span>02<\/span>\r\n                        <strong>Artiste<\/strong>\r\n                        <p>Cr\u00e9ativit\u00e9 et expression.<\/p>\r\n                    <\/div>\r\n                <\/article>\r\n\r\n                <article\r\n                    class=\"tmt-profile tmt-profile--linguiste\"\r\n                    data-profile-preview=\"linguiste\"\r\n                >\r\n                    <div class=\"tmt-profile__icon\">\r\n                        <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n                            <circle cx=\"12\" cy=\"12\" r=\"8.5\"><\/circle>\r\n                            <path d=\"M3.5 12h17\"><\/path>\r\n                            <path d=\"M12 3.5c3 3 4 5.7 4 8.5s-1 5.5-4 8.5\"><\/path>\r\n                            <path d=\"M12 3.5c-3 3-4 5.7-4 8.5s1 5.5 4 8.5\"><\/path>\r\n                        <\/svg>\r\n                    <\/div>\r\n\r\n                    <div>\r\n                        <span>03<\/span>\r\n                        <strong>Linguiste<\/strong>\r\n                        <p>Curiosit\u00e9 et ouverture.<\/p>\r\n                    <\/div>\r\n                <\/article>\r\n\r\n                <article\r\n                    class=\"tmt-profile tmt-profile--stratege\"\r\n                    data-profile-preview=\"stratege\"\r\n                >\r\n                    <div class=\"tmt-profile__icon\">\r\n                        <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n                            <path d=\"M9 3h6l-1 5 3 3-2 3H9l-2-3 3-3z\"><\/path>\r\n                            <path d=\"M9 14h6l2 6H7z\"><\/path>\r\n                            <path d=\"M6 21h12\"><\/path>\r\n                        <\/svg>\r\n                    <\/div>\r\n\r\n                    <div>\r\n                        <span>04<\/span>\r\n                        <strong>Strat\u00e8ge<\/strong>\r\n                        <p>R\u00e9flexion et concentration.<\/p>\r\n                    <\/div>\r\n                <\/article>\r\n\r\n            <\/div>\r\n\r\n            <div class=\"tmt-intro__footer\">\r\n                <div class=\"tmt-intro__footer-mark\">T<\/div>\r\n\r\n                <p>\r\n                    Institut TOMETAL\r\n                    <span>Apprendre \u00b7 D\u00e9couvrir \u00b7 S\u2019\u00e9panouir<\/span>\r\n                <\/p>\r\n            <\/div>\r\n\r\n        <\/aside>\r\n\r\n        <!-- =====================================================\r\n        PANNEAU DROIT\r\n        ====================================================== -->\r\n\r\n        <div class=\"tmt-card\">\r\n\r\n            <!-- EN-T\u00caTE COMPACT -->\r\n\r\n            <header class=\"tmt-card__header\">\r\n\r\n                <div class=\"tmt-card__heading\">\r\n                    <span>Test interactif<\/span>\r\n                    <strong>Quel est ton profil&nbsp;?<\/strong>\r\n                <\/div>\r\n\r\n                <div class=\"tmt-card__progress\">\r\n\r\n                    <div class=\"tmt-card__counter\">\r\n                        <span data-question-current>01<\/span>\r\n                        <small>\/ 04<\/small>\r\n                    <\/div>\r\n\r\n                    <div class=\"tmt-card__progress-track\">\r\n                        <i data-progress-fill><\/i>\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n            <\/header>\r\n\r\n            <!-- INDICATEURS -->\r\n\r\n            <nav class=\"tmt-steps\" aria-label=\"Progression du test\">\r\n\r\n                <button\r\n                    type=\"button\"\r\n                    class=\"tmt-step is-current\"\r\n                    data-step-indicator=\"0\"\r\n                    aria-label=\"Question 1\"\r\n                >\r\n                    <span>01<\/span>\r\n                    <i><\/i>\r\n                <\/button>\r\n\r\n                <button\r\n                    type=\"button\"\r\n                    class=\"tmt-step\"\r\n                    data-step-indicator=\"1\"\r\n                    aria-label=\"Question 2\"\r\n                >\r\n                    <span>02<\/span>\r\n                    <i><\/i>\r\n                <\/button>\r\n\r\n                <button\r\n                    type=\"button\"\r\n                    class=\"tmt-step\"\r\n                    data-step-indicator=\"2\"\r\n                    aria-label=\"Question 3\"\r\n                >\r\n                    <span>03<\/span>\r\n                    <i><\/i>\r\n                <\/button>\r\n\r\n                <button\r\n                    type=\"button\"\r\n                    class=\"tmt-step\"\r\n                    data-step-indicator=\"3\"\r\n                    aria-label=\"Question 4\"\r\n                >\r\n                    <span>04<\/span>\r\n                    <i><\/i>\r\n                <\/button>\r\n\r\n            <\/nav>\r\n\r\n            <!-- =================================================\r\n            FEN\u00caTRE DES QUESTIONS\r\n            ================================================== -->\r\n\r\n            <div class=\"tmt-slider\" data-slider>\r\n\r\n                <div class=\"tmt-track\" data-track>\r\n\r\n                    <!-- QUESTION 1 -->\r\n\r\n                    <section class=\"tmt-slide\" data-slide=\"0\">\r\n\r\n                        <div class=\"tmt-question\">\r\n\r\n                            <span class=\"tmt-question__label\">\r\n                                Question 01\r\n                            <\/span>\r\n\r\n                            <h3>\r\n                                Quelle activit\u00e9 pr\u00e9f\u00e8res-tu&nbsp;?\r\n                            <\/h3>\r\n\r\n                            <p>\r\n                                Choisis la proposition qui t\u2019attire le plus.\r\n                            <\/p>\r\n\r\n                        <\/div>\r\n\r\n                        <div class=\"tmt-answers\">\r\n\r\n                            <button\r\n                                type=\"button\"\r\n                                class=\"tmt-answer\"\r\n                                data-question=\"0\"\r\n                                data-profile=\"sportif\"\r\n                            >\r\n                                <span class=\"tmt-answer__letter\">A<\/span>\r\n\r\n                                <span class=\"tmt-answer__body\">\r\n                                    <strong>Bouger et relever des d\u00e9fis<\/strong>\r\n                                    <small>Courir, jouer et repousser mes limites.<\/small>\r\n                                <\/span>\r\n\r\n                                <span class=\"tmt-answer__status\">\r\n                                    <svg viewBox=\"0 0 24 24\">\r\n                                        <path d=\"m5 12 4 4L19 6\"><\/path>\r\n                                    <\/svg>\r\n                                <\/span>\r\n                            <\/button>\r\n\r\n                            <button\r\n                                type=\"button\"\r\n                                class=\"tmt-answer\"\r\n                                data-question=\"0\"\r\n                                data-profile=\"artiste\"\r\n                            >\r\n                                <span class=\"tmt-answer__letter\">B<\/span>\r\n\r\n                                <span class=\"tmt-answer__body\">\r\n                                    <strong>Cr\u00e9er et imaginer<\/strong>\r\n                                    <small>Dessiner, inventer ou jouer un r\u00f4le.<\/small>\r\n                                <\/span>\r\n\r\n                                <span class=\"tmt-answer__status\">\r\n                                    <svg viewBox=\"0 0 24 24\">\r\n                                        <path d=\"m5 12 4 4L19 6\"><\/path>\r\n                                    <\/svg>\r\n                                <\/span>\r\n                            <\/button>\r\n\r\n                            <button\r\n                                type=\"button\"\r\n                                class=\"tmt-answer\"\r\n                                data-question=\"0\"\r\n                                data-profile=\"linguiste\"\r\n                            >\r\n                                <span class=\"tmt-answer__letter\">C<\/span>\r\n\r\n                                <span class=\"tmt-answer__body\">\r\n                                    <strong>Apprendre des langues<\/strong>\r\n                                    <small>D\u00e9couvrir des cultures et communiquer.<\/small>\r\n                                <\/span>\r\n\r\n                                <span class=\"tmt-answer__status\">\r\n                                    <svg viewBox=\"0 0 24 24\">\r\n                                        <path d=\"m5 12 4 4L19 6\"><\/path>\r\n                                    <\/svg>\r\n                                <\/span>\r\n                            <\/button>\r\n\r\n                            <button\r\n                                type=\"button\"\r\n                                class=\"tmt-answer\"\r\n                                data-question=\"0\"\r\n                                data-profile=\"stratege\"\r\n                            >\r\n                                <span class=\"tmt-answer__letter\">D<\/span>\r\n\r\n                                <span class=\"tmt-answer__body\">\r\n                                    <strong>R\u00e9fl\u00e9chir et r\u00e9soudre<\/strong>\r\n                                    <small>Analyser et \u00e9laborer une strat\u00e9gie.<\/small>\r\n                                <\/span>\r\n\r\n                                <span class=\"tmt-answer__status\">\r\n                                    <svg viewBox=\"0 0 24 24\">\r\n                                        <path d=\"m5 12 4 4L19 6\"><\/path>\r\n                                    <\/svg>\r\n                                <\/span>\r\n                            <\/button>\r\n\r\n                        <\/div>\r\n\r\n                    <\/section>\r\n\r\n                    <!-- QUESTION 2 -->\r\n\r\n                    <section class=\"tmt-slide\" data-slide=\"1\">\r\n\r\n                        <div class=\"tmt-question\">\r\n\r\n                            <span class=\"tmt-question__label\">\r\n                                Question 02\r\n                            <\/span>\r\n\r\n                            <h3>\r\n                                Pendant ton temps libre, tu pr\u00e9f\u00e8res\u2026\r\n                            <\/h3>\r\n\r\n                            <p>\r\n                                Pense \u00e0 ce que tu choisis naturellement.\r\n                            <\/p>\r\n\r\n                        <\/div>\r\n\r\n                        <div class=\"tmt-answers\">\r\n\r\n                            <button\r\n                                type=\"button\"\r\n                                class=\"tmt-answer\"\r\n                                data-question=\"1\"\r\n                                data-profile=\"sportif\"\r\n                            >\r\n                                <span class=\"tmt-answer__letter\">A<\/span>\r\n\r\n                                <span class=\"tmt-answer__body\">\r\n                                    <strong>Jouer dehors avec mes amis<\/strong>\r\n                                    <small>Bouger et participer \u00e0 une activit\u00e9 collective.<\/small>\r\n                                <\/span>\r\n\r\n                                <span class=\"tmt-answer__status\">\r\n                                    <svg viewBox=\"0 0 24 24\">\r\n                                        <path d=\"m5 12 4 4L19 6\"><\/path>\r\n                                    <\/svg>\r\n                                <\/span>\r\n                            <\/button>\r\n\r\n                            <button\r\n                                type=\"button\"\r\n                                class=\"tmt-answer\"\r\n                                data-question=\"1\"\r\n                                data-profile=\"artiste\"\r\n                            >\r\n                                <span class=\"tmt-answer__letter\">B<\/span>\r\n\r\n                                <span class=\"tmt-answer__body\">\r\n                                    <strong>Dessiner, bricoler ou cuisiner<\/strong>\r\n                                    <small>Transformer mes id\u00e9es en cr\u00e9ations.<\/small>\r\n                                <\/span>\r\n\r\n                                <span class=\"tmt-answer__status\">\r\n                                    <svg viewBox=\"0 0 24 24\">\r\n                                        <path d=\"m5 12 4 4L19 6\"><\/path>\r\n                                    <\/svg>\r\n                                <\/span>\r\n                            <\/button>\r\n\r\n                            <button\r\n                                type=\"button\"\r\n                                class=\"tmt-answer\"\r\n                                data-question=\"1\"\r\n                                data-profile=\"linguiste\"\r\n                            >\r\n                                <span class=\"tmt-answer__letter\">C<\/span>\r\n\r\n                                <span class=\"tmt-answer__body\">\r\n                                    <strong>\u00c9couter une autre langue<\/strong>\r\n                                    <small>Regarder des vid\u00e9os ou d\u00e9couvrir une culture.<\/small>\r\n                                <\/span>\r\n\r\n                                <span class=\"tmt-answer__status\">\r\n                                    <svg viewBox=\"0 0 24 24\">\r\n                                        <path d=\"m5 12 4 4L19 6\"><\/path>\r\n                                    <\/svg>\r\n                                <\/span>\r\n                            <\/button>\r\n\r\n                            <button\r\n                                type=\"button\"\r\n                                class=\"tmt-answer\"\r\n                                data-question=\"1\"\r\n                                data-profile=\"stratege\"\r\n                            >\r\n                                <span class=\"tmt-answer__letter\">D<\/span>\r\n\r\n                                <span class=\"tmt-answer__body\">\r\n                                    <strong>Faire des jeux de r\u00e9flexion<\/strong>\r\n                                    <small>Observer et trouver la meilleure solution.<\/small>\r\n                                <\/span>\r\n\r\n                                <span class=\"tmt-answer__status\">\r\n                                    <svg viewBox=\"0 0 24 24\">\r\n                                        <path d=\"m5 12 4 4L19 6\"><\/path>\r\n                                    <\/svg>\r\n                                <\/span>\r\n                            <\/button>\r\n\r\n                        <\/div>\r\n\r\n                    <\/section>\r\n\r\n                    <!-- QUESTION 3 -->\r\n\r\n                    <section class=\"tmt-slide\" data-slide=\"2\">\r\n\r\n                        <div class=\"tmt-question\">\r\n\r\n                            <span class=\"tmt-question__label\">\r\n                                Question 03\r\n                            <\/span>\r\n\r\n                            <h3>\r\n                                Quel d\u00e9fi aimerais-tu relever&nbsp;?\r\n                            <\/h3>\r\n\r\n                            <p>\r\n                                Imagine celui qui te rendrait le plus fier.\r\n                            <\/p>\r\n\r\n                        <\/div>\r\n\r\n                        <div class=\"tmt-answers\">\r\n\r\n                            <button\r\n                                type=\"button\"\r\n                                class=\"tmt-answer\"\r\n                                data-question=\"2\"\r\n                                data-profile=\"sportif\"\r\n                            >\r\n                                <span class=\"tmt-answer__letter\">A<\/span>\r\n\r\n                                <span class=\"tmt-answer__body\">\r\n                                    <strong>Devenir plus rapide et plus fort<\/strong>\r\n                                    <small>Am\u00e9liorer mes capacit\u00e9s physiques.<\/small>\r\n                                <\/span>\r\n\r\n                                <span class=\"tmt-answer__status\">\r\n                                    <svg viewBox=\"0 0 24 24\">\r\n                                        <path d=\"m5 12 4 4L19 6\"><\/path>\r\n                                    <\/svg>\r\n                                <\/span>\r\n                            <\/button>\r\n\r\n                            <button\r\n                                type=\"button\"\r\n                                class=\"tmt-answer\"\r\n                                data-question=\"2\"\r\n                                data-profile=\"artiste\"\r\n                            >\r\n                                <span class=\"tmt-answer__letter\">B<\/span>\r\n\r\n                                <span class=\"tmt-answer__body\">\r\n                                    <strong>Pr\u00e9senter une cr\u00e9ation<\/strong>\r\n                                    <small>Monter sur sc\u00e8ne ou exposer mon travail.<\/small>\r\n                                <\/span>\r\n\r\n                                <span class=\"tmt-answer__status\">\r\n                                    <svg viewBox=\"0 0 24 24\">\r\n                                        <path d=\"m5 12 4 4L19 6\"><\/path>\r\n                                    <\/svg>\r\n                                <\/span>\r\n                            <\/button>\r\n\r\n                            <button\r\n                                type=\"button\"\r\n                                class=\"tmt-answer\"\r\n                                data-question=\"2\"\r\n                                data-profile=\"linguiste\"\r\n                            >\r\n                                <span class=\"tmt-answer__letter\">C<\/span>\r\n\r\n                                <span class=\"tmt-answer__body\">\r\n                                    <strong>Parler plusieurs langues<\/strong>\r\n                                    <small>Communiquer avec le monde entier.<\/small>\r\n                                <\/span>\r\n\r\n                                <span class=\"tmt-answer__status\">\r\n                                    <svg viewBox=\"0 0 24 24\">\r\n                                        <path d=\"m5 12 4 4L19 6\"><\/path>\r\n                                    <\/svg>\r\n                                <\/span>\r\n                            <\/button>\r\n\r\n                            <button\r\n                                type=\"button\"\r\n                                class=\"tmt-answer\"\r\n                                data-question=\"2\"\r\n                                data-profile=\"stratege\"\r\n                            >\r\n                                <span class=\"tmt-answer__letter\">D<\/span>\r\n\r\n                                <span class=\"tmt-answer__body\">\r\n                                    <strong>R\u00e9soudre un probl\u00e8me difficile<\/strong>\r\n                                    <small>Trouver une solution originale et efficace.<\/small>\r\n                                <\/span>\r\n\r\n                                <span class=\"tmt-answer__status\">\r\n                                    <svg viewBox=\"0 0 24 24\">\r\n                                        <path d=\"m5 12 4 4L19 6\"><\/path>\r\n                                    <\/svg>\r\n                                <\/span>\r\n                            <\/button>\r\n\r\n                        <\/div>\r\n\r\n                    <\/section>\r\n\r\n                    <!-- QUESTION 4 -->\r\n\r\n                    <section class=\"tmt-slide\" data-slide=\"3\">\r\n\r\n                        <div class=\"tmt-question\">\r\n\r\n                            <span class=\"tmt-question__label\">\r\n                                Question 04\r\n                            <\/span>\r\n\r\n                            <h3>\r\n                                Quelle qualit\u00e9 te ressemble le plus&nbsp;?\r\n                            <\/h3>\r\n\r\n                            <p>\r\n                                Choisis le trait qui te d\u00e9crit le mieux.\r\n                            <\/p>\r\n\r\n                        <\/div>\r\n\r\n                        <div class=\"tmt-answers\">\r\n\r\n                            <button\r\n                                type=\"button\"\r\n                                class=\"tmt-answer\"\r\n                                data-question=\"3\"\r\n                                data-profile=\"sportif\"\r\n                            >\r\n                                <span class=\"tmt-answer__letter\">A<\/span>\r\n\r\n                                <span class=\"tmt-answer__body\">\r\n                                    <strong>\u00c9nergie et esprit d\u2019\u00e9quipe<\/strong>\r\n                                    <small>J\u2019aime agir et avancer avec les autres.<\/small>\r\n                                <\/span>\r\n\r\n                                <span class=\"tmt-answer__status\">\r\n                                    <svg viewBox=\"0 0 24 24\">\r\n                                        <path d=\"m5 12 4 4L19 6\"><\/path>\r\n                                    <\/svg>\r\n                                <\/span>\r\n                            <\/button>\r\n\r\n                            <button\r\n                                type=\"button\"\r\n                                class=\"tmt-answer\"\r\n                                data-question=\"3\"\r\n                                data-profile=\"artiste\"\r\n                            >\r\n                                <span class=\"tmt-answer__letter\">B<\/span>\r\n\r\n                                <span class=\"tmt-answer__body\">\r\n                                    <strong>Imagination et cr\u00e9ativit\u00e9<\/strong>\r\n                                    <small>J\u2019aime inventer et proposer des id\u00e9es.<\/small>\r\n                                <\/span>\r\n\r\n                                <span class=\"tmt-answer__status\">\r\n                                    <svg viewBox=\"0 0 24 24\">\r\n                                        <path d=\"m5 12 4 4L19 6\"><\/path>\r\n                                    <\/svg>\r\n                                <\/span>\r\n                            <\/button>\r\n\r\n                            <button\r\n                                type=\"button\"\r\n                                class=\"tmt-answer\"\r\n                                data-question=\"3\"\r\n                                data-profile=\"linguiste\"\r\n                            >\r\n                                <span class=\"tmt-answer__letter\">C<\/span>\r\n\r\n                                <span class=\"tmt-answer__body\">\r\n                                    <strong>Curiosit\u00e9 et ouverture<\/strong>\r\n                                    <small>J\u2019aime comprendre les personnes et les cultures.<\/small>\r\n                                <\/span>\r\n\r\n                                <span class=\"tmt-answer__status\">\r\n                                    <svg viewBox=\"0 0 24 24\">\r\n                                        <path d=\"m5 12 4 4L19 6\"><\/path>\r\n                                    <\/svg>\r\n                                <\/span>\r\n                            <\/button>\r\n\r\n                            <button\r\n                                type=\"button\"\r\n                                class=\"tmt-answer\"\r\n                                data-question=\"3\"\r\n                                data-profile=\"stratege\"\r\n                            >\r\n                                <span class=\"tmt-answer__letter\">D<\/span>\r\n\r\n                                <span class=\"tmt-answer__body\">\r\n                                    <strong>Concentration et r\u00e9flexion<\/strong>\r\n                                    <small>J\u2019observe avant de prendre une d\u00e9cision.<\/small>\r\n                                <\/span>\r\n\r\n                                <span class=\"tmt-answer__status\">\r\n                                    <svg viewBox=\"0 0 24 24\">\r\n                                        <path d=\"m5 12 4 4L19 6\"><\/path>\r\n                                    <\/svg>\r\n                                <\/span>\r\n                            <\/button>\r\n\r\n                        <\/div>\r\n\r\n                    <\/section>\r\n\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n            <!-- =================================================\r\n            NAVIGATION TOUJOURS VISIBLE\r\n            ================================================== -->\r\n\r\n            <footer class=\"tmt-controls\">\r\n\r\n                <div class=\"tmt-controls__message\">\r\n                    <span data-control-message>\r\n                        S\u00e9lectionne une r\u00e9ponse pour continuer.\r\n                    <\/span>\r\n                <\/div>\r\n\r\n                <div class=\"tmt-controls__buttons\">\r\n\r\n                    <button\r\n                        type=\"button\"\r\n                        class=\"tmt-control tmt-control--back\"\r\n                        data-back\r\n                        disabled\r\n                    >\r\n                        <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n                            <path d=\"m15 5-7 7 7 7\"><\/path>\r\n                        <\/svg>\r\n\r\n                        <span>Pr\u00e9c\u00e9dent<\/span>\r\n                    <\/button>\r\n\r\n                    <button\r\n                        type=\"button\"\r\n                        class=\"tmt-control tmt-control--next\"\r\n                        data-next\r\n                    >\r\n                        <span data-next-label>Continuer<\/span>\r\n\r\n                        <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n                            <path d=\"m9 5 7 7-7 7\"><\/path>\r\n                        <\/svg>\r\n                    <\/button>\r\n\r\n                <\/div>\r\n\r\n            <\/footer>\r\n\r\n            <!-- =================================================\r\n            R\u00c9SULTAT FINAL\r\n            ================================================== -->\r\n\r\n            <section class=\"tmt-result\" data-result>\r\n\r\n                <div class=\"tmt-result__hero\">\r\n\r\n                    <div class=\"tmt-result__symbol\">\r\n                        <svg\r\n                            data-result-icon\r\n                            viewBox=\"0 0 24 24\"\r\n                            aria-hidden=\"true\"\r\n                        ><\/svg>\r\n                    <\/div>\r\n\r\n                    <div class=\"tmt-result__heading\">\r\n                        <span>Ton talent dominant<\/span>\r\n                        <h3 data-result-title>Sportif<\/h3>\r\n                        <p data-result-subtitle><\/p>\r\n                    <\/div>\r\n\r\n                    <div class=\"tmt-result__score\">\r\n                        <strong data-result-score>4<\/strong>\r\n                        <span>points<\/span>\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n                <div class=\"tmt-result__body\">\r\n\r\n                    <div class=\"tmt-result__description\">\r\n                        <span>Ce que cela r\u00e9v\u00e8le<\/span>\r\n                        <p data-result-description><\/p>\r\n                    <\/div>\r\n\r\n                    <div class=\"tmt-result__recommendations\">\r\n                        <span>Activit\u00e9s recommand\u00e9es<\/span>\r\n                        <div data-result-tags><\/div>\r\n                    <\/div>\r\n\r\n                    <div\r\n                        class=\"tmt-result__note\"\r\n                        data-result-note\r\n                    ><\/div>\r\n\r\n                    <div\r\n                        class=\"tmt-result__chart\"\r\n                        data-result-chart\r\n                    ><\/div>\r\n\r\n                <\/div>\r\n\r\n                <div class=\"tmt-result__actions\">\r\n\r\n                    <button\r\n                        type=\"button\"\r\n                        class=\"tmt-result__restart\"\r\n                        data-restart\r\n                    >\r\n                        <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n                            <path d=\"M4 11a8 8 0 1 1 2 6\"><\/path>\r\n                            <path d=\"M4 4v7h7\"><\/path>\r\n                        <\/svg>\r\n\r\n                        <span>Recommencer<\/span>\r\n                    <\/button>\r\n\r\n                    <a\r\n                        class=\"tmt-result__discover\"\r\n                        href=\"#activites-extrascolaires\"\r\n                    >\r\n                        <span>D\u00e9couvrir les activit\u00e9s<\/span>\r\n\r\n                        <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n                            <path d=\"m9 5 7 7-7 7\"><\/path>\r\n                        <\/svg>\r\n                    <\/a>\r\n\r\n                <\/div>\r\n\r\n            <\/section>\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.tmt-quiz {\r\n    --tmt-navy: #071b3d;\r\n    --tmt-navy-soft: #163966;\r\n    --tmt-gold: #c99a42;\r\n    --tmt-gold-light: #e6c778;\r\n    --tmt-white: #ffffff;\r\n    --tmt-cream: #f7f4ed;\r\n    --tmt-text: #59657a;\r\n    --tmt-muted: #9099aa;\r\n    --tmt-border: rgba(7, 27, 61, 0.11);\r\n\r\n    --tmt-sportif: #2468b3;\r\n    --tmt-artiste: #814399;\r\n    --tmt-linguiste: #3c875b;\r\n    --tmt-stratege: #c18c20;\r\n\r\n    position: relative;\r\n    width: 100%;\r\n    padding: clamp(72px, 7vw, 115px) 0;\r\n    overflow: hidden;\r\n\r\n    background:\r\n        radial-gradient(\r\n            circle at 8% 15%,\r\n            rgba(201, 154, 66, 0.08),\r\n            transparent 28%\r\n        ),\r\n        linear-gradient(\r\n            135deg,\r\n            #f9f7f1 0%,\r\n            #f2eee5 50%,\r\n            #faf9f5 100%\r\n        );\r\n\r\n    isolation: isolate;\r\n}\r\n\r\n.tmt-quiz,\r\n.tmt-quiz * {\r\n    box-sizing: border-box;\r\n}\r\n\r\n.tmt-quiz h2,\r\n.tmt-quiz h3,\r\n.tmt-quiz p {\r\n    margin-top: 0;\r\n}\r\n\r\n.tmt-quiz button {\r\n    font: inherit;\r\n}\r\n\r\n.tmt-quiz svg {\r\n    display: block;\r\n}\r\n\r\n\/* =========================================================\r\nD\u00c9CORATIONS\r\n========================================================= *\/\r\n\r\n.tmt-quiz__halo {\r\n    position: absolute;\r\n    z-index: -1;\r\n    border-radius: 50%;\r\n    pointer-events: none;\r\n}\r\n\r\n.tmt-quiz__halo--one {\r\n    top: -280px;\r\n    right: -180px;\r\n    width: 570px;\r\n    height: 570px;\r\n    border: 1px solid rgba(201, 154, 66, 0.17);\r\n}\r\n\r\n.tmt-quiz__halo--one::before,\r\n.tmt-quiz__halo--one::after {\r\n    content: \"\";\r\n    position: absolute;\r\n    border-radius: inherit;\r\n    border: 1px solid rgba(201, 154, 66, 0.09);\r\n}\r\n\r\n.tmt-quiz__halo--one::before {\r\n    inset: 58px;\r\n}\r\n\r\n.tmt-quiz__halo--one::after {\r\n    inset: 127px;\r\n}\r\n\r\n.tmt-quiz__halo--two {\r\n    bottom: -230px;\r\n    left: -210px;\r\n    width: 455px;\r\n    height: 455px;\r\n    background: rgba(7, 27, 61, 0.035);\r\n}\r\n\r\n\/* =========================================================\r\nSTRUCTURE G\u00c9N\u00c9RALE\r\n========================================================= *\/\r\n\r\n.tmt-quiz__shell {\r\n    width: min(1420px, calc(100% - clamp(28px, 5vw, 86px)));\r\n    margin: 0 auto;\r\n\r\n    display: grid;\r\n    grid-template-columns:\r\n        minmax(320px, 0.75fr)\r\n        minmax(620px, 1.25fr);\r\n\r\n    align-items: stretch;\r\n    gap: clamp(28px, 4vw, 64px);\r\n}\r\n\r\n\/* =========================================================\r\nINTRODUCTION\r\n========================================================= *\/\r\n\r\n.tmt-intro {\r\n    position: relative;\r\n\r\n    display: flex;\r\n    flex-direction: column;\r\n\r\n    min-width: 0;\r\n    padding: clamp(27px, 3vw, 45px);\r\n\r\n    overflow: hidden;\r\n\r\n    background:\r\n        linear-gradient(\r\n            155deg,\r\n            rgba(255, 255, 255, 0.94),\r\n            rgba(247, 244, 237, 0.88)\r\n        );\r\n\r\n    border: 1px solid rgba(201, 154, 66, 0.22);\r\n\r\n    box-shadow:\r\n        0 25px 70px rgba(7, 27, 61, 0.08);\r\n}\r\n\r\n.tmt-intro::after {\r\n    content: \"04\";\r\n    position: absolute;\r\n    right: -28px;\r\n    bottom: -55px;\r\n\r\n    color: rgba(7, 27, 61, 0.035);\r\n\r\n    font-family: Georgia, \"Times New Roman\", serif;\r\n    font-size: 210px;\r\n    line-height: 1;\r\n\r\n    pointer-events: none;\r\n}\r\n\r\n.tmt-intro__topline {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 12px;\r\n    margin-bottom: 20px;\r\n\r\n    color: var(--tmt-gold);\r\n\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.tmt-intro__topline > span {\r\n    color: var(--tmt-navy);\r\n}\r\n\r\n.tmt-intro__topline i {\r\n    width: 34px;\r\n    height: 1px;\r\n    background: var(--tmt-gold);\r\n}\r\n\r\n.tmt-intro__title {\r\n    margin-bottom: 20px;\r\n\r\n    color: var(--tmt-navy);\r\n\r\n    font-family: Georgia, \"Times New Roman\", serif;\r\n    font-size: clamp(44px, 4.5vw, 69px);\r\n    font-weight: 500;\r\n    line-height: 0.98;\r\n    letter-spacing: -0.04em;\r\n}\r\n\r\n.tmt-intro__title em {\r\n    display: block;\r\n    margin-top: 7px;\r\n\r\n    color: var(--tmt-gold);\r\n\r\n    font-weight: inherit;\r\n}\r\n\r\n.tmt-intro__text {\r\n    margin-bottom: 20px;\r\n\r\n    color: var(--tmt-text);\r\n\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.tmt-intro__notice {\r\n    display: flex;\r\n    align-items: flex-start;\r\n    gap: 13px;\r\n    margin-bottom: 26px;\r\n}\r\n\r\n.tmt-intro__notice > span {\r\n    width: 36px;\r\n    height: 2px;\r\n    margin-top: 8px;\r\n    flex: 0 0 auto;\r\n\r\n    background: var(--tmt-gold);\r\n}\r\n\r\n.tmt-intro__notice p {\r\n    margin-bottom: 0;\r\n\r\n    color: var(--tmt-navy);\r\n\r\n    font-family: \"Montserrat\", Arial, sans-serif;\r\n    font-size: 8px;\r\n    font-weight: 700;\r\n    letter-spacing: 0.06em;\r\n    line-height: 1.55;\r\n    text-transform: uppercase;\r\n}\r\n\r\n\/* =========================================================\r\nPROFILS\r\n========================================================= *\/\r\n\r\n.tmt-profiles {\r\n    position: relative;\r\n    z-index: 2;\r\n\r\n    display: grid;\r\n    grid-template-columns: repeat(2, minmax(0, 1fr));\r\n    gap: 9px;\r\n}\r\n\r\n.tmt-profile {\r\n    --profile-color: var(--tmt-gold);\r\n\r\n    position: relative;\r\n\r\n    display: grid;\r\n    grid-template-columns: 42px minmax(0, 1fr);\r\n    align-items: center;\r\n    gap: 12px;\r\n\r\n    min-height: 88px;\r\n    padding: 13px;\r\n\r\n    overflow: hidden;\r\n\r\n    background: rgba(255, 255, 255, 0.78);\r\n    border: 1px solid var(--tmt-border);\r\n\r\n    transition:\r\n        transform 0.38s cubic-bezier(0.22, 1, 0.36, 1),\r\n        box-shadow 0.38s ease,\r\n        border-color 0.38s ease;\r\n}\r\n\r\n.tmt-profile::after {\r\n    content: \"\";\r\n    position: absolute;\r\n    right: 0;\r\n    bottom: 0;\r\n    left: 0;\r\n\r\n    height: 3px;\r\n\r\n    background: var(--profile-color);\r\n\r\n    transform: scaleX(0);\r\n    transform-origin: left center;\r\n\r\n    transition:\r\n        transform 0.42s\r\n        cubic-bezier(0.22, 1, 0.36, 1);\r\n}\r\n\r\n.tmt-profile.is-active {\r\n    background: #ffffff;\r\n    border-color: var(--profile-color);\r\n\r\n    box-shadow:\r\n        0 14px 35px rgba(7, 27, 61, 0.10);\r\n\r\n    transform: translateY(-5px);\r\n}\r\n\r\n.tmt-profile.is-active::after {\r\n    transform: scaleX(1);\r\n}\r\n\r\n.tmt-profile--sportif {\r\n    --profile-color: var(--tmt-sportif);\r\n}\r\n\r\n.tmt-profile--artiste {\r\n    --profile-color: var(--tmt-artiste);\r\n}\r\n\r\n.tmt-profile--linguiste {\r\n    --profile-color: var(--tmt-linguiste);\r\n}\r\n\r\n.tmt-profile--stratege {\r\n    --profile-color: var(--tmt-stratege);\r\n}\r\n\r\n.tmt-profile__icon {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    width: 42px;\r\n    height: 42px;\r\n\r\n    color: var(--profile-color);\r\n\r\n    background:\r\n        color-mix(\r\n            in srgb,\r\n            var(--profile-color) 9%,\r\n            #ffffff\r\n        );\r\n\r\n    border-radius: 50%;\r\n}\r\n\r\n.tmt-profile__icon svg {\r\n    width: 21px;\r\n    height: 21px;\r\n\r\n    fill: none;\r\n    stroke: currentColor;\r\n    stroke-width: 1.65;\r\n    stroke-linecap: round;\r\n    stroke-linejoin: round;\r\n}\r\n\r\n.tmt-profile > div:last-child {\r\n    min-width: 0;\r\n}\r\n\r\n.tmt-profile > div:last-child > span {\r\n    display: block;\r\n    margin-bottom: 2px;\r\n\r\n    color: var(--profile-color);\r\n\r\n    font-family: \"Montserrat\", Arial, sans-serif;\r\n    font-size: 7px;\r\n    font-weight: 700;\r\n    letter-spacing: 0.1em;\r\n}\r\n\r\n.tmt-profile strong {\r\n    display: block;\r\n    margin-bottom: 3px;\r\n\r\n    color: var(--tmt-navy);\r\n\r\n    font-family: Georgia, \"Times New Roman\", serif;\r\n    font-size: 18px;\r\n    font-weight: 500;\r\n}\r\n\r\n.tmt-profile p {\r\n    margin-bottom: 0;\r\n\r\n    color: var(--tmt-text);\r\n\r\n    font-family: \"Montserrat\", Arial, sans-serif;\r\n    font-size: 8px;\r\n    line-height: 1.4;\r\n}\r\n\r\n.tmt-intro__footer {\r\n    position: relative;\r\n    z-index: 2;\r\n\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 11px;\r\n\r\n    margin-top: auto;\r\n    padding-top: 24px;\r\n}\r\n\r\n.tmt-intro__footer-mark {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    width: 34px;\r\n    height: 34px;\r\n\r\n    color: var(--tmt-gold);\r\n    border: 1px solid rgba(201, 154, 66, 0.35);\r\n\r\n    font-family: Georgia, serif;\r\n    font-size: 18px;\r\n}\r\n\r\n.tmt-intro__footer p {\r\n    margin-bottom: 0;\r\n\r\n    color: var(--tmt-navy);\r\n\r\n    font-family: \"Montserrat\", Arial, sans-serif;\r\n    font-size: 8px;\r\n    font-weight: 700;\r\n    letter-spacing: 0.08em;\r\n    line-height: 1.5;\r\n    text-transform: uppercase;\r\n}\r\n\r\n.tmt-intro__footer p span {\r\n    display: block;\r\n    color: var(--tmt-muted);\r\n    font-size: 7px;\r\n}\r\n\r\n\/* =========================================================\r\nCARTE DU TEST\r\n========================================================= *\/\r\n\r\n.tmt-card {\r\n    position: relative;\r\n\r\n    display: flex;\r\n    flex-direction: column;\r\n\r\n    min-width: 0;\r\n    min-height: 665px;\r\n    max-height: 760px;\r\n\r\n    padding: clamp(25px, 3.2vw, 42px);\r\n\r\n    overflow: hidden;\r\n\r\n    background:\r\n        linear-gradient(\r\n            145deg,\r\n            rgba(255, 255, 255, 0.995),\r\n            rgba(255, 254, 250, 0.98)\r\n        );\r\n\r\n    border: 1px solid rgba(201, 154, 66, 0.22);\r\n\r\n    box-shadow:\r\n        0 42px 100px rgba(7, 27, 61, 0.14),\r\n        0 10px 30px rgba(7, 27, 61, 0.06);\r\n}\r\n\r\n.tmt-card::before {\r\n    content: \"\";\r\n    position: absolute;\r\n    top: 0;\r\n    right: 0;\r\n\r\n    width: 120px;\r\n    height: 120px;\r\n\r\n    background:\r\n        linear-gradient(\r\n            135deg,\r\n            transparent 49%,\r\n            rgba(201, 154, 66, 0.09) 50%\r\n        );\r\n\r\n    pointer-events: none;\r\n}\r\n\r\n\/* =========================================================\r\nEN-T\u00caTE\r\n========================================================= *\/\r\n\r\n.tmt-card__header {\r\n    position: relative;\r\n    z-index: 4;\r\n\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    gap: 24px;\r\n\r\n    flex: 0 0 auto;\r\n\r\n    padding-bottom: 16px;\r\n\r\n    border-bottom: 1px solid var(--tmt-border);\r\n}\r\n\r\n.tmt-card__heading {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 3px;\r\n}\r\n\r\n.tmt-card__heading > span {\r\n    color: var(--tmt-gold);\r\n\r\n    font-family: \"Montserrat\", Arial, sans-serif;\r\n    font-size: 8px;\r\n    font-weight: 700;\r\n    letter-spacing: 0.14em;\r\n    text-transform: uppercase;\r\n}\r\n\r\n.tmt-card__heading strong {\r\n    color: var(--tmt-navy);\r\n\r\n    font-family: Georgia, \"Times New Roman\", serif;\r\n    font-size: clamp(21px, 2vw, 29px);\r\n    font-weight: 500;\r\n}\r\n\r\n.tmt-card__progress {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 13px;\r\n}\r\n\r\n.tmt-card__counter {\r\n    display: flex;\r\n    align-items: baseline;\r\n    gap: 4px;\r\n\r\n    font-family: Georgia, \"Times New Roman\", serif;\r\n}\r\n\r\n.tmt-card__counter span {\r\n    color: var(--tmt-gold);\r\n    font-size: 29px;\r\n    line-height: 1;\r\n}\r\n\r\n.tmt-card__counter small {\r\n    color: rgba(7, 27, 61, 0.4);\r\n    font-size: 13px;\r\n}\r\n\r\n.tmt-card__progress-track {\r\n    width: 105px;\r\n    height: 5px;\r\n\r\n    overflow: hidden;\r\n\r\n    background: rgba(7, 27, 61, 0.08);\r\n}\r\n\r\n.tmt-card__progress-track i {\r\n    display: block;\r\n    width: 25%;\r\n    height: 100%;\r\n\r\n    background:\r\n        linear-gradient(\r\n            90deg,\r\n            var(--tmt-gold),\r\n            var(--tmt-gold-light)\r\n        );\r\n\r\n    transition:\r\n        width 0.6s\r\n        cubic-bezier(0.22, 1, 0.36, 1);\r\n}\r\n\r\n\/* =========================================================\r\n\u00c9TAPES\r\n========================================================= *\/\r\n\r\n.tmt-steps {\r\n    position: relative;\r\n    z-index: 4;\r\n\r\n    display: grid;\r\n    grid-template-columns: repeat(4, minmax(0, 1fr));\r\n    gap: 10px;\r\n\r\n    flex: 0 0 auto;\r\n\r\n    margin: 17px 0 20px;\r\n}\r\n\r\n.tmt-step {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 7px;\r\n\r\n    padding: 0;\r\n\r\n    color: var(--tmt-muted);\r\n    background: transparent;\r\n    border: 0;\r\n\r\n    cursor: default;\r\n}\r\n\r\n.tmt-step span {\r\n    color: inherit;\r\n\r\n    font-family: \"Montserrat\", Arial, sans-serif;\r\n    font-size: 7px;\r\n    font-weight: 700;\r\n}\r\n\r\n.tmt-step i {\r\n    position: relative;\r\n    display: block;\r\n    flex: 1;\r\n\r\n    height: 3px;\r\n    overflow: hidden;\r\n\r\n    background: rgba(7, 27, 61, 0.08);\r\n}\r\n\r\n.tmt-step i::before {\r\n    content: \"\";\r\n    display: block;\r\n\r\n    width: 0;\r\n    height: 100%;\r\n\r\n    background: var(--tmt-gold);\r\n\r\n    transition:\r\n        width 0.55s\r\n        cubic-bezier(0.22, 1, 0.36, 1);\r\n}\r\n\r\n.tmt-step.is-current,\r\n.tmt-step.is-complete {\r\n    color: var(--tmt-gold);\r\n}\r\n\r\n.tmt-step.is-current i::before,\r\n.tmt-step.is-complete i::before {\r\n    width: 100%;\r\n}\r\n\r\n\/* =========================================================\r\nSLIDER\r\n========================================================= *\/\r\n\r\n.tmt-slider {\r\n    position: relative;\r\n    z-index: 3;\r\n\r\n    flex: 1 1 auto;\r\n    min-height: 0;\r\n\r\n    overflow: hidden;\r\n\r\n    touch-action: pan-y;\r\n}\r\n\r\n.tmt-track {\r\n    display: flex;\r\n\r\n    width: 400%;\r\n    height: 100%;\r\n\r\n    transform: translate3d(0, 0, 0);\r\n\r\n    transition:\r\n        transform 0.72s\r\n        cubic-bezier(0.22, 1, 0.36, 1);\r\n\r\n    will-change: transform;\r\n}\r\n\r\n.tmt-slide {\r\n    flex: 0 0 25%;\r\n\r\n    display: flex;\r\n    flex-direction: column;\r\n\r\n    width: 25%;\r\n    min-width: 0;\r\n    height: 100%;\r\n\r\n    padding: 0 2px;\r\n}\r\n\r\n\/* =========================================================\r\nQUESTION\r\n========================================================= *\/\r\n\r\n.tmt-question {\r\n    flex: 0 0 auto;\r\n    min-height: 100px;\r\n    margin-bottom: 16px;\r\n}\r\n\r\n.tmt-question__label {\r\n    display: block;\r\n    margin-bottom: 6px;\r\n\r\n    color: var(--tmt-gold);\r\n\r\n    font-family: \"Montserrat\", Arial, sans-serif;\r\n    font-size: 8px;\r\n    font-weight: 700;\r\n    letter-spacing: 0.13em;\r\n    text-transform: uppercase;\r\n}\r\n\r\n.tmt-question h3 {\r\n    margin-bottom: 7px;\r\n\r\n    color: var(--tmt-navy);\r\n\r\n    font-family: Georgia, \"Times New Roman\", serif;\r\n    font-size: clamp(28px, 2.8vw, 42px);\r\n    font-weight: 500;\r\n    line-height: 1.04;\r\n    letter-spacing: -0.025em;\r\n}\r\n\r\n.tmt-question p {\r\n    margin-bottom: 0;\r\n\r\n    color: var(--tmt-text);\r\n\r\n    font-family: \"Montserrat\", Arial, sans-serif;\r\n    font-size: 10px;\r\n    line-height: 1.5;\r\n}\r\n\r\n\/* =========================================================\r\nR\u00c9PONSES 2 \u00d7 2\r\n========================================================= *\/\r\n\r\n.tmt-answers {\r\n    display: grid;\r\n    grid-template-columns: repeat(2, minmax(0, 1fr));\r\n    grid-auto-rows: minmax(118px, 1fr);\r\n    gap: 12px;\r\n\r\n    flex: 1 1 auto;\r\n    min-height: 0;\r\n}\r\n\r\n.tmt-answer {\r\n    --answer-color: var(--tmt-gold);\r\n\r\n    position: relative;\r\n\r\n    display: grid;\r\n    grid-template-columns: 40px minmax(0, 1fr) 27px;\r\n    align-items: center;\r\n    gap: 12px;\r\n\r\n    width: 100%;\r\n    min-width: 0;\r\n    height: 100%;\r\n    padding: 15px;\r\n\r\n    color: inherit;\r\n\r\n    text-align: left;\r\n\r\n    background: rgba(255, 255, 255, 0.92);\r\n    border: 1px solid var(--tmt-border);\r\n\r\n    cursor: pointer;\r\n\r\n    transition:\r\n        transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),\r\n        border-color 0.35s ease,\r\n        background-color 0.35s ease,\r\n        box-shadow 0.35s ease;\r\n}\r\n\r\n.tmt-answer[data-profile=\"sportif\"] {\r\n    --answer-color: var(--tmt-sportif);\r\n}\r\n\r\n.tmt-answer[data-profile=\"artiste\"] {\r\n    --answer-color: var(--tmt-artiste);\r\n}\r\n\r\n.tmt-answer[data-profile=\"linguiste\"] {\r\n    --answer-color: var(--tmt-linguiste);\r\n}\r\n\r\n.tmt-answer[data-profile=\"stratege\"] {\r\n    --answer-color: var(--tmt-stratege);\r\n}\r\n\r\n.tmt-answer::before {\r\n    content: \"\";\r\n\r\n    position: absolute;\r\n    top: 0;\r\n    right: 0;\r\n    left: 0;\r\n\r\n    height: 4px;\r\n\r\n    background: var(--answer-color);\r\n\r\n    transform: scaleX(0);\r\n    transform-origin: left center;\r\n\r\n    transition:\r\n        transform 0.42s\r\n        cubic-bezier(0.22, 1, 0.36, 1);\r\n}\r\n\r\n.tmt-answer:hover {\r\n    z-index: 2;\r\n\r\n    border-color:\r\n        color-mix(\r\n            in srgb,\r\n            var(--answer-color) 65%,\r\n            transparent\r\n        );\r\n\r\n    box-shadow:\r\n        0 18px 42px rgba(7, 27, 61, 0.11);\r\n\r\n    transform: translateY(-5px);\r\n}\r\n\r\n.tmt-answer:hover::before,\r\n.tmt-answer.is-selected::before {\r\n    transform: scaleX(1);\r\n}\r\n\r\n.tmt-answer.is-selected {\r\n    border-color: var(--answer-color);\r\n\r\n    background:\r\n        color-mix(\r\n            in srgb,\r\n            var(--answer-color) 6%,\r\n            #ffffff\r\n        );\r\n\r\n    box-shadow:\r\n        0 18px 45px rgba(7, 27, 61, 0.12);\r\n\r\n    animation:\r\n        tmtAnswerSelected\r\n        0.5s\r\n        cubic-bezier(0.22, 1, 0.36, 1);\r\n}\r\n\r\n@keyframes tmtAnswerSelected {\r\n    0% {\r\n        transform: scale(1);\r\n    }\r\n\r\n    45% {\r\n        transform: scale(1.025);\r\n    }\r\n\r\n    100% {\r\n        transform: scale(1);\r\n    }\r\n}\r\n\r\n.tmt-answer__letter {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    width: 40px;\r\n    height: 40px;\r\n\r\n    color: var(--tmt-navy);\r\n    background: var(--tmt-cream);\r\n\r\n    font-family: Georgia, \"Times New Roman\", serif;\r\n    font-size: 18px;\r\n    font-weight: 700;\r\n\r\n    transition:\r\n        color 0.32s ease,\r\n        background-color 0.32s ease,\r\n        transform 0.32s ease;\r\n}\r\n\r\n.tmt-answer.is-selected .tmt-answer__letter {\r\n    color: #ffffff;\r\n    background: var(--answer-color);\r\n\r\n    transform: rotate(-4deg);\r\n}\r\n\r\n.tmt-answer__body {\r\n    min-width: 0;\r\n}\r\n\r\n.tmt-answer__body strong {\r\n    display: block;\r\n    margin-bottom: 6px;\r\n\r\n    color: var(--tmt-navy);\r\n\r\n    font-family: \"Montserrat\", Arial, sans-serif;\r\n    font-size: 12px;\r\n    font-weight: 700;\r\n    line-height: 1.35;\r\n}\r\n\r\n.tmt-answer__body small {\r\n    display: block;\r\n\r\n    color: var(--tmt-text);\r\n\r\n    font-family: \"Montserrat\", Arial, sans-serif;\r\n    font-size: 9px;\r\n    line-height: 1.45;\r\n}\r\n\r\n.tmt-answer__status {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    width: 27px;\r\n    height: 27px;\r\n\r\n    color: transparent;\r\n\r\n    border: 1px solid rgba(7, 27, 61, 0.16);\r\n    border-radius: 50%;\r\n\r\n    transition:\r\n        color 0.32s ease,\r\n        background-color 0.32s ease,\r\n        border-color 0.32s ease,\r\n        transform 0.32s ease;\r\n}\r\n\r\n.tmt-answer__status svg {\r\n    width: 14px;\r\n    height: 14px;\r\n\r\n    fill: none;\r\n    stroke: currentColor;\r\n    stroke-width: 2.2;\r\n    stroke-linecap: round;\r\n    stroke-linejoin: round;\r\n}\r\n\r\n.tmt-answer.is-selected .tmt-answer__status {\r\n    color: #ffffff;\r\n    background: var(--answer-color);\r\n    border-color: var(--answer-color);\r\n\r\n    transform: scale(1.08);\r\n}\r\n\r\n\/* =========================================================\r\nNAVIGATION FIXE DANS LA CARTE\r\n========================================================= *\/\r\n\r\n.tmt-controls {\r\n    position: relative;\r\n    z-index: 7;\r\n\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    gap: 20px;\r\n\r\n    flex: 0 0 auto;\r\n\r\n    margin-top: 19px;\r\n    padding-top: 17px;\r\n\r\n    background: rgba(255, 254, 250, 0.98);\r\n    border-top: 1px solid var(--tmt-border);\r\n}\r\n\r\n.tmt-controls__message {\r\n    min-width: 0;\r\n}\r\n\r\n.tmt-controls__message span {\r\n    color: var(--tmt-muted);\r\n\r\n    font-family: \"Montserrat\", Arial, sans-serif;\r\n    font-size: 8px;\r\n    font-weight: 700;\r\n    letter-spacing: 0.05em;\r\n    line-height: 1.4;\r\n    text-transform: uppercase;\r\n\r\n    transition: color 0.3s ease;\r\n}\r\n\r\n.tmt-controls__message span.is-ready {\r\n    color: var(--tmt-gold);\r\n}\r\n\r\n.tmt-controls__message span.is-error {\r\n    color: #ad4545;\r\n}\r\n\r\n.tmt-controls__buttons {\r\n    display: flex;\r\n    gap: 10px;\r\n    flex: 0 0 auto;\r\n}\r\n\r\n.tmt-control {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    gap: 9px;\r\n\r\n    min-height: 45px;\r\n    padding: 0 17px;\r\n\r\n    font-family: \"Montserrat\", Arial, sans-serif;\r\n    font-size: 8px;\r\n    font-weight: 700;\r\n    letter-spacing: 0.06em;\r\n    text-transform: uppercase;\r\n\r\n    cursor: pointer;\r\n\r\n    transition:\r\n        color 0.3s ease,\r\n        background-color 0.3s ease,\r\n        border-color 0.3s ease,\r\n        transform 0.3s ease,\r\n        box-shadow 0.3s ease;\r\n}\r\n\r\n.tmt-control svg {\r\n    width: 16px;\r\n    height: 16px;\r\n\r\n    fill: none;\r\n    stroke: currentColor;\r\n    stroke-width: 1.8;\r\n    stroke-linecap: round;\r\n    stroke-linejoin: round;\r\n}\r\n\r\n.tmt-control--back {\r\n    color: var(--tmt-navy);\r\n    background: transparent;\r\n    border: 1px solid rgba(7, 27, 61, 0.2);\r\n}\r\n\r\n.tmt-control--back:hover:not(:disabled) {\r\n    color: #ffffff;\r\n    background: var(--tmt-navy);\r\n    border-color: var(--tmt-navy);\r\n}\r\n\r\n.tmt-control--back:disabled {\r\n    opacity: 0.28;\r\n    cursor: not-allowed;\r\n}\r\n\r\n.tmt-control--next {\r\n    color: #ffffff;\r\n    background: var(--tmt-navy);\r\n    border: 1px solid var(--tmt-navy);\r\n\r\n    box-shadow:\r\n        0 12px 28px rgba(7, 27, 61, 0.17);\r\n}\r\n\r\n.tmt-control--next:hover {\r\n    background: var(--tmt-gold);\r\n    border-color: var(--tmt-gold);\r\n\r\n    box-shadow:\r\n        0 14px 30px rgba(201, 154, 66, 0.25);\r\n\r\n    transform: translateX(4px);\r\n}\r\n\r\n\/* =========================================================\r\nR\u00c9SULTAT\r\n========================================================= *\/\r\n\r\n.tmt-result {\r\n    --result-color: var(--tmt-sportif);\r\n\r\n    position: absolute;\r\n    inset: 0;\r\n    z-index: 20;\r\n\r\n    display: none;\r\n    flex-direction: column;\r\n\r\n    padding: clamp(25px, 3.2vw, 42px);\r\n\r\n    background:\r\n        linear-gradient(\r\n            145deg,\r\n            rgba(255, 255, 255, 0.995),\r\n            rgba(255, 254, 250, 0.99)\r\n        );\r\n\r\n    overflow-y: auto;\r\n\r\n    animation:\r\n        tmtResultEnter\r\n        0.75s\r\n        cubic-bezier(0.22, 1, 0.36, 1)\r\n        forwards;\r\n}\r\n\r\n.tmt-result.is-visible {\r\n    display: flex;\r\n}\r\n\r\n@keyframes tmtResultEnter {\r\n    from {\r\n        opacity: 0;\r\n        transform: scale(0.97) translateY(24px);\r\n    }\r\n\r\n    to {\r\n        opacity: 1;\r\n        transform: scale(1) translateY(0);\r\n    }\r\n}\r\n\r\n.tmt-result__hero {\r\n    position: relative;\r\n\r\n    display: grid;\r\n    grid-template-columns: 68px minmax(0, 1fr) auto;\r\n    align-items: center;\r\n    gap: 18px;\r\n\r\n    padding: 24px;\r\n\r\n    overflow: hidden;\r\n\r\n    background:\r\n        linear-gradient(\r\n            140deg,\r\n            var(--tmt-navy-soft),\r\n            var(--tmt-navy)\r\n        );\r\n}\r\n\r\n.tmt-result__hero::after {\r\n    content: \"\";\r\n    position: absolute;\r\n    top: -65px;\r\n    right: -65px;\r\n\r\n    width: 190px;\r\n    height: 190px;\r\n\r\n    border:\r\n        1px solid\r\n        color-mix(\r\n            in srgb,\r\n            var(--result-color) 62%,\r\n            transparent\r\n        );\r\n\r\n    border-radius: 50%;\r\n}\r\n\r\n.tmt-result__symbol {\r\n    position: relative;\r\n    z-index: 2;\r\n\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    width: 68px;\r\n    height: 68px;\r\n\r\n    color: #ffffff;\r\n    background: var(--result-color);\r\n    border-radius: 50%;\r\n}\r\n\r\n.tmt-result__symbol svg {\r\n    width: 31px;\r\n    height: 31px;\r\n\r\n    fill: none;\r\n    stroke: currentColor;\r\n    stroke-width: 1.65;\r\n    stroke-linecap: round;\r\n    stroke-linejoin: round;\r\n}\r\n\r\n.tmt-result__heading {\r\n    position: relative;\r\n    z-index: 2;\r\n}\r\n\r\n.tmt-result__heading > span {\r\n    display: block;\r\n    margin-bottom: 5px;\r\n\r\n    color: var(--tmt-gold-light);\r\n\r\n    font-family: \"Montserrat\", Arial, sans-serif;\r\n    font-size: 7px;\r\n    font-weight: 700;\r\n    letter-spacing: 0.13em;\r\n    text-transform: uppercase;\r\n}\r\n\r\n.tmt-result__heading h3 {\r\n    margin-bottom: 5px;\r\n\r\n    color: #ffffff;\r\n\r\n    font-family: Georgia, \"Times New Roman\", serif;\r\n    font-size: clamp(33px, 3.5vw, 49px);\r\n    font-weight: 500;\r\n    line-height: 1;\r\n}\r\n\r\n.tmt-result__heading p {\r\n    margin-bottom: 0;\r\n\r\n    color: rgba(255, 255, 255, 0.64);\r\n\r\n    font-family: \"Montserrat\", Arial, sans-serif;\r\n    font-size: 9px;\r\n    line-height: 1.45;\r\n}\r\n\r\n.tmt-result__score {\r\n    position: relative;\r\n    z-index: 2;\r\n\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: flex-end;\r\n}\r\n\r\n.tmt-result__score strong {\r\n    color: var(--tmt-gold-light);\r\n\r\n    font-family: Georgia, \"Times New Roman\", serif;\r\n    font-size: 43px;\r\n    line-height: 1;\r\n}\r\n\r\n.tmt-result__score span {\r\n    color: rgba(255, 255, 255, 0.54);\r\n\r\n    font-family: \"Montserrat\", Arial, sans-serif;\r\n    font-size: 7px;\r\n    font-weight: 700;\r\n    text-transform: uppercase;\r\n}\r\n\r\n.tmt-result__body {\r\n    display: grid;\r\n    gap: 20px;\r\n\r\n    padding: 23px;\r\n\r\n    border-right: 1px solid var(--tmt-border);\r\n    border-bottom: 1px solid var(--tmt-border);\r\n    border-left: 1px solid var(--tmt-border);\r\n}\r\n\r\n.tmt-result__description > span,\r\n.tmt-result__recommendations > span {\r\n    display: block;\r\n    margin-bottom: 7px;\r\n\r\n    color: var(--result-color);\r\n\r\n    font-family: \"Montserrat\", Arial, sans-serif;\r\n    font-size: 7px;\r\n    font-weight: 700;\r\n    letter-spacing: 0.12em;\r\n    text-transform: uppercase;\r\n}\r\n\r\n.tmt-result__description p {\r\n    margin-bottom: 0;\r\n\r\n    color: var(--tmt-text);\r\n\r\n    font-family: \"Montserrat\", Arial, sans-serif;\r\n    font-size: 11px;\r\n    line-height: 1.65;\r\n}\r\n\r\n.tmt-result__recommendations > div {\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    gap: 7px;\r\n}\r\n\r\n.tmt-result__tag {\r\n    display: inline-flex;\r\n    align-items: center;\r\n\r\n    min-height: 31px;\r\n    padding: 0 11px;\r\n\r\n    color: var(--tmt-navy);\r\n\r\n    background:\r\n        color-mix(\r\n            in srgb,\r\n            var(--result-color) 8%,\r\n            #ffffff\r\n        );\r\n\r\n    border:\r\n        1px solid\r\n        color-mix(\r\n            in srgb,\r\n            var(--result-color) 22%,\r\n            transparent\r\n        );\r\n\r\n    font-family: \"Montserrat\", Arial, sans-serif;\r\n    font-size: 8px;\r\n    font-weight: 700;\r\n}\r\n\r\n.tmt-result__note {\r\n    display: none;\r\n\r\n    padding: 14px 15px;\r\n\r\n    color: var(--tmt-navy);\r\n    background: var(--tmt-cream);\r\n    border-left: 4px solid var(--result-color);\r\n\r\n    font-family: \"Montserrat\", Arial, sans-serif;\r\n    font-size: 9px;\r\n    line-height: 1.55;\r\n}\r\n\r\n.tmt-result__note.is-visible {\r\n    display: block;\r\n}\r\n\r\n.tmt-result__chart {\r\n    display: grid;\r\n    gap: 8px;\r\n\r\n    padding-top: 17px;\r\n    border-top: 1px solid var(--tmt-border);\r\n}\r\n\r\n.tmt-chart-row {\r\n    display: grid;\r\n    grid-template-columns: 68px minmax(0, 1fr) 20px;\r\n    align-items: center;\r\n    gap: 9px;\r\n\r\n    font-family: \"Montserrat\", Arial, sans-serif;\r\n    font-size: 8px;\r\n    font-weight: 700;\r\n}\r\n\r\n.tmt-chart-row > span {\r\n    color: var(--tmt-text);\r\n}\r\n\r\n.tmt-chart-row > div {\r\n    height: 4px;\r\n    overflow: hidden;\r\n\r\n    background: rgba(7, 27, 61, 0.08);\r\n}\r\n\r\n.tmt-chart-row > div i {\r\n    display: block;\r\n    width: 0;\r\n    height: 100%;\r\n\r\n    background: var(--chart-color);\r\n\r\n    transition:\r\n        width 0.85s\r\n        cubic-bezier(0.22, 1, 0.36, 1);\r\n}\r\n\r\n.tmt-chart-row > strong {\r\n    color: var(--tmt-navy);\r\n    text-align: right;\r\n}\r\n\r\n.tmt-result__actions {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    gap: 12px;\r\n\r\n    margin-top: auto;\r\n    padding-top: 18px;\r\n}\r\n\r\n.tmt-result__restart,\r\n.tmt-result__discover {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    gap: 8px;\r\n\r\n    min-height: 44px;\r\n    padding: 0 16px;\r\n\r\n    font-family: \"Montserrat\", Arial, sans-serif;\r\n    font-size: 8px;\r\n    font-weight: 700;\r\n    letter-spacing: 0.05em;\r\n    text-decoration: none;\r\n    text-transform: uppercase;\r\n\r\n    cursor: pointer;\r\n}\r\n\r\n.tmt-result__restart svg,\r\n.tmt-result__discover svg {\r\n    width: 15px;\r\n    height: 15px;\r\n\r\n    fill: none;\r\n    stroke: currentColor;\r\n    stroke-width: 1.8;\r\n    stroke-linecap: round;\r\n    stroke-linejoin: round;\r\n}\r\n\r\n.tmt-result__restart {\r\n    color: var(--tmt-navy);\r\n    background: transparent;\r\n    border: 1px solid rgba(7, 27, 61, 0.22);\r\n}\r\n\r\n.tmt-result__discover {\r\n    color: #ffffff;\r\n    background: var(--tmt-gold);\r\n    border: 1px solid var(--tmt-gold);\r\n}\r\n\r\n\/* =========================================================\r\nORDINATEURS PEU HAUTS\r\n========================================================= *\/\r\n\r\n@media screen and (min-width: 981px) and (max-height: 820px) {\r\n\r\n    .tmt-quiz {\r\n        padding-top: 55px;\r\n        padding-bottom: 55px;\r\n    }\r\n\r\n    .tmt-card {\r\n        min-height: 620px;\r\n        max-height: 680px;\r\n        padding: 27px;\r\n    }\r\n\r\n    .tmt-intro {\r\n        padding: 29px;\r\n    }\r\n\r\n    .tmt-intro__title {\r\n        font-size: clamp(42px, 4vw, 59px);\r\n    }\r\n\r\n    .tmt-question {\r\n        min-height: 88px;\r\n        margin-bottom: 12px;\r\n    }\r\n\r\n    .tmt-question h3 {\r\n        font-size: clamp(27px, 2.6vw, 37px);\r\n    }\r\n\r\n    .tmt-answers {\r\n        grid-auto-rows: minmax(105px, 1fr);\r\n        gap: 10px;\r\n    }\r\n\r\n    .tmt-answer {\r\n        padding: 12px;\r\n    }\r\n\r\n    .tmt-controls {\r\n        margin-top: 14px;\r\n        padding-top: 13px;\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    .tmt-quiz__shell {\r\n        grid-template-columns:\r\n            minmax(285px, 0.68fr)\r\n            minmax(530px, 1.32fr);\r\n\r\n        gap: 27px;\r\n    }\r\n\r\n    .tmt-card {\r\n        padding: 27px;\r\n    }\r\n\r\n    .tmt-intro {\r\n        padding: 27px;\r\n    }\r\n\r\n    .tmt-profiles {\r\n        grid-template-columns: 1fr;\r\n    }\r\n\r\n    .tmt-profile {\r\n        min-height: 74px;\r\n    }\r\n\r\n    .tmt-intro__footer {\r\n        display: none;\r\n    }\r\n}\r\n\r\n@media screen and (max-width: 900px) {\r\n\r\n    .tmt-quiz__shell {\r\n        grid-template-columns: 1fr;\r\n    }\r\n\r\n    .tmt-intro,\r\n    .tmt-card {\r\n        max-width: 780px;\r\n        width: 100%;\r\n        margin: 0 auto;\r\n    }\r\n\r\n    .tmt-profiles {\r\n        grid-template-columns: repeat(4, minmax(0, 1fr));\r\n    }\r\n\r\n    .tmt-profile {\r\n        display: block;\r\n        min-height: 120px;\r\n        text-align: center;\r\n    }\r\n\r\n    .tmt-profile__icon {\r\n        margin: 0 auto 8px;\r\n    }\r\n\r\n    .tmt-profile p {\r\n        display: none;\r\n    }\r\n\r\n    .tmt-card {\r\n        min-height: 650px;\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    .tmt-quiz {\r\n        padding-top: 68px;\r\n        padding-bottom: 72px;\r\n    }\r\n\r\n    .tmt-quiz__shell {\r\n        width: calc(100% - 26px);\r\n    }\r\n\r\n    .tmt-intro {\r\n        padding: 27px 21px;\r\n    }\r\n\r\n    .tmt-intro__title {\r\n        font-size: clamp(42px, 12vw, 55px);\r\n    }\r\n\r\n    .tmt-intro__text {\r\n        font-size: 13px;\r\n    }\r\n\r\n    .tmt-profiles {\r\n        grid-template-columns: repeat(2, minmax(0, 1fr));\r\n    }\r\n\r\n    .tmt-profile {\r\n        min-height: 100px;\r\n    }\r\n\r\n    .tmt-card {\r\n        min-height: auto;\r\n        max-height: none;\r\n        padding: 22px 16px;\r\n    }\r\n\r\n    .tmt-card__header {\r\n        align-items: flex-start;\r\n    }\r\n\r\n    .tmt-card__progress-track {\r\n        display: none;\r\n    }\r\n\r\n    .tmt-card__heading strong {\r\n        font-size: 22px;\r\n    }\r\n\r\n    .tmt-steps {\r\n        margin-bottom: 18px;\r\n    }\r\n\r\n    .tmt-slider {\r\n        overflow: hidden;\r\n    }\r\n\r\n    .tmt-track {\r\n        align-items: flex-start;\r\n    }\r\n\r\n    .tmt-slide {\r\n        height: auto;\r\n    }\r\n\r\n    .tmt-question {\r\n        min-height: auto;\r\n        margin-bottom: 17px;\r\n    }\r\n\r\n    .tmt-question h3 {\r\n        font-size: 32px;\r\n    }\r\n\r\n    .tmt-answers {\r\n        grid-template-columns: 1fr;\r\n        grid-auto-rows: auto;\r\n    }\r\n\r\n    .tmt-answer {\r\n        min-height: 92px;\r\n        height: auto;\r\n    }\r\n\r\n    .tmt-controls {\r\n        position: sticky;\r\n        bottom: 0;\r\n\r\n        display: block;\r\n\r\n        margin-right: -16px;\r\n        margin-left: -16px;\r\n        padding: 15px 16px 0;\r\n\r\n        box-shadow:\r\n            0 -12px 25px rgba(7, 27, 61, 0.05);\r\n    }\r\n\r\n    .tmt-controls__message {\r\n        margin-bottom: 10px;\r\n        text-align: center;\r\n    }\r\n\r\n    .tmt-controls__buttons {\r\n        display: grid;\r\n        grid-template-columns: 1fr 1fr;\r\n    }\r\n\r\n    .tmt-control {\r\n        width: 100%;\r\n        padding: 0 11px;\r\n    }\r\n\r\n    .tmt-result {\r\n        position: relative;\r\n        inset: auto;\r\n\r\n        padding: 0;\r\n\r\n        overflow: visible;\r\n    }\r\n\r\n    .tmt-result__hero {\r\n        grid-template-columns: 58px minmax(0, 1fr);\r\n        padding: 20px 16px;\r\n    }\r\n\r\n    .tmt-result__symbol {\r\n        width: 58px;\r\n        height: 58px;\r\n    }\r\n\r\n    .tmt-result__score {\r\n        grid-column: 1 \/ -1;\r\n        flex-direction: row;\r\n        align-items: center;\r\n        justify-content: space-between;\r\n\r\n        padding-top: 12px;\r\n        border-top: 1px solid rgba(255, 255, 255, 0.14);\r\n    }\r\n\r\n    .tmt-result__body {\r\n        padding: 20px 16px;\r\n    }\r\n\r\n    .tmt-result__actions {\r\n        display: grid;\r\n        grid-template-columns: 1fr;\r\n    }\r\n\r\n    .tmt-result__restart,\r\n    .tmt-result__discover {\r\n        width: 100%;\r\n    }\r\n}\r\n\r\n\/* =========================================================\r\nPETITS MOBILES\r\n========================================================= *\/\r\n\r\n@media screen and (max-width: 420px) {\r\n\r\n    .tmt-profiles {\r\n        grid-template-columns: 1fr 1fr;\r\n    }\r\n\r\n    .tmt-profile strong {\r\n        font-size: 16px;\r\n    }\r\n\r\n    .tmt-card__header {\r\n        display: block;\r\n    }\r\n\r\n    .tmt-card__progress {\r\n        margin-top: 12px;\r\n    }\r\n\r\n    .tmt-answer {\r\n        grid-template-columns: 36px minmax(0, 1fr) 25px;\r\n        gap: 10px;\r\n        padding: 13px 11px;\r\n    }\r\n\r\n    .tmt-answer__letter {\r\n        width: 36px;\r\n        height: 36px;\r\n    }\r\n\r\n    .tmt-answer__body strong {\r\n        font-size: 11px;\r\n    }\r\n\r\n    .tmt-answer__body small {\r\n        font-size: 8px;\r\n    }\r\n}\r\n\r\n\/* =========================================================\r\nACCESSIBILIT\u00c9\r\n========================================================= *\/\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n\r\n    .tmt-track,\r\n    .tmt-answer,\r\n    .tmt-answer::before,\r\n    .tmt-answer__letter,\r\n    .tmt-answer__status,\r\n    .tmt-profile,\r\n    .tmt-profile::after,\r\n    .tmt-card__progress-track i,\r\n    .tmt-step i::before,\r\n    .tmt-chart-row > div i {\r\n        transition: none !important;\r\n        animation: none !important;\r\n    }\r\n\r\n    .tmt-result {\r\n        animation: none !important;\r\n    }\r\n}\r\n\r\n\/* =========================================================\r\nELEMENTOR ET ANCRES\r\n========================================================= *\/\r\n\r\n.elementor-widget-html:has(.tmt-quiz),\r\n.elementor-widget-html:has(.tmt-quiz)\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}\r\n\r\n#test-profil {\r\n    scroll-margin-top: 105px;\r\n}\r\n\r\n#activites-extrascolaires {\r\n    scroll-margin-top: 105px;\r\n}\r\n\r\n@media screen and (max-width: 1180px) {\r\n\r\n    #test-profil,\r\n    #activites-extrascolaires {\r\n        scroll-margin-top: 85px;\r\n    }\r\n}\r\n<\/style>\r\n\r\n<script>\r\n(function () {\r\n    \"use strict\";\r\n\r\n    function initialiseTometalTalentQuiz() {\r\n\r\n        const quizzes =\r\n            document.querySelectorAll(\"[data-tmt-quiz]\");\r\n\r\n        if (!quizzes.length) {\r\n            return;\r\n        }\r\n\r\n        quizzes.forEach(function (quiz) {\r\n\r\n            if (quiz.dataset.tmtReady === \"true\") {\r\n                return;\r\n            }\r\n\r\n            quiz.dataset.tmtReady = \"true\";\r\n\r\n            const track =\r\n                quiz.querySelector(\"[data-track]\");\r\n\r\n            const slider =\r\n                quiz.querySelector(\"[data-slider]\");\r\n\r\n            const backButton =\r\n                quiz.querySelector(\"[data-back]\");\r\n\r\n            const nextButton =\r\n                quiz.querySelector(\"[data-next]\");\r\n\r\n            const nextLabel =\r\n                quiz.querySelector(\"[data-next-label]\");\r\n\r\n            const currentElement =\r\n                quiz.querySelector(\"[data-question-current]\");\r\n\r\n            const progressFill =\r\n                quiz.querySelector(\"[data-progress-fill]\");\r\n\r\n            const controlMessage =\r\n                quiz.querySelector(\"[data-control-message]\");\r\n\r\n            const result =\r\n                quiz.querySelector(\"[data-result]\");\r\n\r\n            const restartButton =\r\n                quiz.querySelector(\"[data-restart]\");\r\n\r\n            const answers = [null, null, null, null];\r\n\r\n            let currentQuestion = 0;\r\n            let touchStartX = 0;\r\n            let touchEndX = 0;\r\n\r\n            const profiles = {\r\n                sportif: {\r\n                    title: \"Sportif\",\r\n                    subtitle:\r\n                        \"\u00c9nergie, coop\u00e9ration et d\u00e9passement.\",\r\n                    color: \"#2468b3\",\r\n                    description:\r\n                        \"Tu aimes bouger, relever des d\u00e9fis et avancer avec les autres. Les activit\u00e9s sportives t\u2019aideront \u00e0 d\u00e9velopper ton \u00e9nergie, ta confiance et ton esprit d\u2019\u00e9quipe.\",\r\n                    activities: [\r\n                        \"Football\",\r\n                        \"Natation\",\r\n                        \"Basketball\",\r\n                        \"Volley-ball\"\r\n                    ],\r\n                    icon:\r\n                        '<circle cx=\"12\" cy=\"12\" r=\"8.5\"><\/circle>' +\r\n                        '<path d=\"m9 9 3-2 3 2-1 4h-4z\"><\/path>' +\r\n                        '<path d=\"m5 10 4-1\"><\/path>' +\r\n                        '<path d=\"m15 9 4 1\"><\/path>'\r\n                },\r\n\r\n                artiste: {\r\n                    title: \"Artiste\",\r\n                    subtitle:\r\n                        \"Cr\u00e9ativit\u00e9, expression et imagination.\",\r\n                    color: \"#814399\",\r\n                    description:\r\n                        \"Tu aimes cr\u00e9er, inventer et exprimer tes id\u00e9es. Les activit\u00e9s artistiques favoriseront ton imagination, ta sensibilit\u00e9 et ton assurance.\",\r\n                    activities: [\r\n                        \"Arts plastiques\",\r\n                        \"Danse\",\r\n                        \"Th\u00e9\u00e2tre\",\r\n                        \"Cuisine\"\r\n                    ],\r\n                    icon:\r\n                        '<path d=\"M12 3a9 9 0 0 0 0 18h2a2 2 0 0 0 0-4h-1a2 2 0 0 1 0-4h2a6 6 0 0 0 0-12z\"><\/path>' +\r\n                        '<circle cx=\"8\" cy=\"9\" r=\"1\"><\/circle>' +\r\n                        '<circle cx=\"13\" cy=\"7\" r=\"1\"><\/circle>' +\r\n                        '<circle cx=\"16\" cy=\"10\" r=\"1\"><\/circle>'\r\n                },\r\n\r\n                linguiste: {\r\n                    title: \"Linguiste\",\r\n                    subtitle:\r\n                        \"Curiosit\u00e9, communication et ouverture.\",\r\n                    color: \"#3c875b\",\r\n                    description:\r\n                        \"Tu es curieux du monde et tu appr\u00e9cies la communication. Les langues t\u2019aideront \u00e0 d\u00e9couvrir d\u2019autres cultures et \u00e0 t\u2019exprimer avec assurance.\",\r\n                    activities: [\r\n                        \"Langue chinoise\",\r\n                        \"Cours d\u2019anglais\"\r\n                    ],\r\n                    icon:\r\n                        '<circle cx=\"12\" cy=\"12\" r=\"8.5\"><\/circle>' +\r\n                        '<path d=\"M3.5 12h17\"><\/path>' +\r\n                        '<path d=\"M12 3.5c3 3 4 5.7 4 8.5s-1 5.5-4 8.5\"><\/path>' +\r\n                        '<path d=\"M12 3.5c-3 3-4 5.7-4 8.5s1 5.5 4 8.5\"><\/path>'\r\n                },\r\n\r\n                stratege: {\r\n                    title: \"Strat\u00e8ge\",\r\n                    subtitle:\r\n                        \"R\u00e9flexion, concentration et analyse.\",\r\n                    color: \"#c18c20\",\r\n                    description:\r\n                        \"Tu aimes observer, anticiper et r\u00e9soudre des probl\u00e8mes. Les activit\u00e9s de strat\u00e9gie renforceront ta patience, ta concentration et ton esprit d\u2019analyse.\",\r\n                    activities: [\r\n                        \"\u00c9checs\",\r\n                        \"Tennis de table\"\r\n                    ],\r\n                    icon:\r\n                        '<path d=\"M9 3h6l-1 5 3 3-2 3H9l-2-3 3-3z\"><\/path>' +\r\n                        '<path d=\"M9 14h6l2 6H7z\"><\/path>' +\r\n                        '<path d=\"M6 21h12\"><\/path>'\r\n                }\r\n            };\r\n\r\n            function highlightProfile(profileName) {\r\n\r\n                quiz.querySelectorAll(\r\n                    \"[data-profile-preview]\"\r\n                ).forEach(function (card) {\r\n\r\n                    card.classList.toggle(\r\n                        \"is-active\",\r\n                        card.dataset.profilePreview ===\r\n                        profileName\r\n                    );\r\n\r\n                });\r\n\r\n            }\r\n\r\n            function updateMessage() {\r\n\r\n                controlMessage.classList.remove(\r\n                    \"is-ready\",\r\n                    \"is-error\"\r\n                );\r\n\r\n                if (answers[currentQuestion]) {\r\n\r\n                    controlMessage.textContent =\r\n                        currentQuestion === 3\r\n                            ? \"Ta r\u00e9ponse est enregistr\u00e9e. D\u00e9couvre maintenant ton profil.\"\r\n                            : \"Ta r\u00e9ponse est enregistr\u00e9e. Tu peux continuer.\";\r\n\r\n                    controlMessage.classList.add(\"is-ready\");\r\n\r\n                } else {\r\n\r\n                    controlMessage.textContent =\r\n                        \"S\u00e9lectionne une r\u00e9ponse pour continuer.\";\r\n\r\n                }\r\n\r\n            }\r\n\r\n            function updateInterface() {\r\n\r\n                track.style.transform =\r\n                    \"translate3d(-\" +\r\n                    (currentQuestion * 25) +\r\n                    \"%, 0, 0)\";\r\n\r\n                currentElement.textContent =\r\n                    String(currentQuestion + 1)\r\n                        .padStart(2, \"0\");\r\n\r\n                progressFill.style.width =\r\n                    ((currentQuestion + 1) * 25) + \"%\";\r\n\r\n                backButton.disabled =\r\n                    currentQuestion === 0;\r\n\r\n                nextLabel.textContent =\r\n                    currentQuestion === 3\r\n                        ? \"Voir mon r\u00e9sultat\"\r\n                        : \"Continuer\";\r\n\r\n                quiz.querySelectorAll(\r\n                    \"[data-step-indicator]\"\r\n                ).forEach(function (step) {\r\n\r\n                    const stepNumber =\r\n                        Number(\r\n                            step.dataset.stepIndicator\r\n                        );\r\n\r\n                    step.classList.toggle(\r\n                        \"is-current\",\r\n                        stepNumber === currentQuestion\r\n                    );\r\n\r\n                    step.classList.toggle(\r\n                        \"is-complete\",\r\n                        stepNumber < currentQuestion\r\n                    );\r\n\r\n                });\r\n\r\n                highlightProfile(\r\n                    answers[currentQuestion] || \"\"\r\n                );\r\n\r\n                updateMessage();\r\n\r\n            }\r\n\r\n            quiz.querySelectorAll(\".tmt-answer\")\r\n                .forEach(function (answerButton) {\r\n\r\n                    answerButton.addEventListener(\r\n                        \"click\",\r\n                        function () {\r\n\r\n                            const questionIndex =\r\n                                Number(\r\n                                    answerButton.dataset.question\r\n                                );\r\n\r\n                            const selectedProfile =\r\n                                answerButton.dataset.profile;\r\n\r\n                            answers[questionIndex] =\r\n                                selectedProfile;\r\n\r\n                            quiz.querySelectorAll(\r\n                                '.tmt-answer[data-question=\"' +\r\n                                questionIndex +\r\n                                '\"]'\r\n                            ).forEach(function (button) {\r\n\r\n                                button.classList.toggle(\r\n                                    \"is-selected\",\r\n                                    button === answerButton\r\n                                );\r\n\r\n                            });\r\n\r\n                            highlightProfile(\r\n                                selectedProfile\r\n                            );\r\n\r\n                            updateMessage();\r\n\r\n                            \/*\r\n                            Passage automatique l\u00e9ger :\r\n                            la question suivante appara\u00eet apr\u00e8s\r\n                            une courte pause, sauf \u00e0 la derni\u00e8re.\r\n                            *\/\r\n                            if (questionIndex < 3) {\r\n\r\n                                window.clearTimeout(\r\n                                    quiz.tmtAutoAdvance\r\n                                );\r\n\r\n                                quiz.tmtAutoAdvance =\r\n                                    window.setTimeout(\r\n                                        function () {\r\n\r\n                                            if (\r\n                                                currentQuestion ===\r\n                                                questionIndex\r\n                                            ) {\r\n                                                currentQuestion += 1;\r\n                                                updateInterface();\r\n                                            }\r\n\r\n                                        },\r\n                                        520\r\n                                    );\r\n\r\n                            }\r\n\r\n                        }\r\n                    );\r\n\r\n                });\r\n\r\n            backButton.addEventListener(\r\n                \"click\",\r\n                function () {\r\n\r\n                    window.clearTimeout(\r\n                        quiz.tmtAutoAdvance\r\n                    );\r\n\r\n                    if (currentQuestion <= 0) {\r\n                        return;\r\n                    }\r\n\r\n                    currentQuestion -= 1;\r\n                    updateInterface();\r\n\r\n                }\r\n            );\r\n\r\n            nextButton.addEventListener(\r\n                \"click\",\r\n                function () {\r\n\r\n                    window.clearTimeout(\r\n                        quiz.tmtAutoAdvance\r\n                    );\r\n\r\n                    if (!answers[currentQuestion]) {\r\n\r\n                        controlMessage.textContent =\r\n                            \"Choisis d\u2019abord l\u2019une des quatre r\u00e9ponses.\";\r\n\r\n                        controlMessage.classList.remove(\r\n                            \"is-ready\"\r\n                        );\r\n\r\n                        controlMessage.classList.add(\r\n                            \"is-error\"\r\n                        );\r\n\r\n                        return;\r\n\r\n                    }\r\n\r\n                    if (currentQuestion < 3) {\r\n\r\n                        currentQuestion += 1;\r\n                        updateInterface();\r\n\r\n                    } else {\r\n\r\n                        showResult();\r\n\r\n                    }\r\n\r\n                }\r\n            );\r\n\r\n            \/* BALAYAGE SUR MOBILE *\/\r\n\r\n            slider.addEventListener(\r\n                \"touchstart\",\r\n                function (event) {\r\n\r\n                    touchStartX =\r\n                        event.changedTouches[0].screenX;\r\n\r\n                },\r\n                {\r\n                    passive: true\r\n                }\r\n            );\r\n\r\n            slider.addEventListener(\r\n                \"touchend\",\r\n                function (event) {\r\n\r\n                    touchEndX =\r\n                        event.changedTouches[0].screenX;\r\n\r\n                    const distance =\r\n                        touchEndX - touchStartX;\r\n\r\n                    if (\r\n                        distance < -70 &&\r\n                        currentQuestion < 3 &&\r\n                        answers[currentQuestion]\r\n                    ) {\r\n                        currentQuestion += 1;\r\n                        updateInterface();\r\n                    }\r\n\r\n                    if (\r\n                        distance > 70 &&\r\n                        currentQuestion > 0\r\n                    ) {\r\n                        currentQuestion -= 1;\r\n                        updateInterface();\r\n                    }\r\n\r\n                },\r\n                {\r\n                    passive: true\r\n                }\r\n            );\r\n\r\n            function calculateScores() {\r\n\r\n                const scores = {\r\n                    sportif: 0,\r\n                    artiste: 0,\r\n                    linguiste: 0,\r\n                    stratege: 0\r\n                };\r\n\r\n                answers.forEach(function (answer) {\r\n\r\n                    if (\r\n                        answer &&\r\n                        Object.prototype.hasOwnProperty\r\n                            .call(scores, answer)\r\n                    ) {\r\n                        scores[answer] += 1;\r\n                    }\r\n\r\n                });\r\n\r\n                return scores;\r\n            }\r\n\r\n            function showResult() {\r\n\r\n                const scores =\r\n                    calculateScores();\r\n\r\n                const ranking =\r\n                    Object.keys(scores).sort(\r\n                        function (a, b) {\r\n\r\n                            if (scores[b] !== scores[a]) {\r\n                                return scores[b] - scores[a];\r\n                            }\r\n\r\n                            return (\r\n                                answers.lastIndexOf(b) -\r\n                                answers.lastIndexOf(a)\r\n                            );\r\n\r\n                        }\r\n                    );\r\n\r\n                const winner =\r\n                    ranking[0];\r\n\r\n                const maximum =\r\n                    scores[winner];\r\n\r\n                const tiedProfiles =\r\n                    ranking.filter(\r\n                        function (profile) {\r\n                            return (\r\n                                scores[profile] === maximum\r\n                            );\r\n                        }\r\n                    );\r\n\r\n                const winnerData =\r\n                    profiles[winner];\r\n\r\n                result.style.setProperty(\r\n                    \"--result-color\",\r\n                    winnerData.color\r\n                );\r\n\r\n                quiz.querySelector(\r\n                    \"[data-result-title]\"\r\n                ).textContent =\r\n                    winnerData.title;\r\n\r\n                quiz.querySelector(\r\n                    \"[data-result-subtitle]\"\r\n                ).textContent =\r\n                    winnerData.subtitle;\r\n\r\n                quiz.querySelector(\r\n                    \"[data-result-score]\"\r\n                ).textContent =\r\n                    maximum;\r\n\r\n                quiz.querySelector(\r\n                    \"[data-result-description]\"\r\n                ).textContent =\r\n                    winnerData.description;\r\n\r\n                quiz.querySelector(\r\n                    \"[data-result-icon]\"\r\n                ).innerHTML =\r\n                    winnerData.icon;\r\n\r\n                const tagsContainer =\r\n                    quiz.querySelector(\r\n                        \"[data-result-tags]\"\r\n                    );\r\n\r\n                tagsContainer.innerHTML = \"\";\r\n\r\n                winnerData.activities.forEach(\r\n                    function (activity) {\r\n\r\n                        const tag =\r\n                            document.createElement(\r\n                                \"span\"\r\n                            );\r\n\r\n                        tag.className =\r\n                            \"tmt-result__tag\";\r\n\r\n                        tag.textContent =\r\n                            activity;\r\n\r\n                        tagsContainer.appendChild(\r\n                            tag\r\n                        );\r\n\r\n                    }\r\n                );\r\n\r\n                const note =\r\n                    quiz.querySelector(\r\n                        \"[data-result-note]\"\r\n                    );\r\n\r\n                if (tiedProfiles.length > 1) {\r\n\r\n                    const labels =\r\n                        tiedProfiles.map(\r\n                            function (profile) {\r\n                                return profiles[profile]\r\n                                    .title;\r\n                            }\r\n                        );\r\n\r\n                    note.textContent =\r\n                        \"Ton profil est \u00e9quilibr\u00e9 entre \" +\r\n                        labels.join(\" et \") +\r\n                        \". Tu peux donc explorer plusieurs univers d\u2019activit\u00e9s.\";\r\n\r\n                    note.classList.add(\r\n                        \"is-visible\"\r\n                    );\r\n\r\n                } else {\r\n\r\n                    const secondProfile =\r\n                        ranking[1];\r\n\r\n                    if (\r\n                        scores[secondProfile] > 0 &&\r\n                        maximum -\r\n                        scores[secondProfile] <= 1\r\n                    ) {\r\n\r\n                        note.textContent =\r\n                            \"Ton profil secondaire est \" +\r\n                            profiles[secondProfile].title +\r\n                            \". Certaines activit\u00e9s de cet univers pourraient \u00e9galement te plaire.\";\r\n\r\n                        note.classList.add(\r\n                            \"is-visible\"\r\n                        );\r\n\r\n                    } else {\r\n\r\n                        note.textContent = \"\";\r\n\r\n                        note.classList.remove(\r\n                            \"is-visible\"\r\n                        );\r\n\r\n                    }\r\n\r\n                }\r\n\r\n                const chart =\r\n                    quiz.querySelector(\r\n                        \"[data-result-chart]\"\r\n                    );\r\n\r\n                chart.innerHTML = \"\";\r\n\r\n                ranking.forEach(\r\n                    function (profile) {\r\n\r\n                        const row =\r\n                            document.createElement(\r\n                                \"div\"\r\n                            );\r\n\r\n                        row.className =\r\n                            \"tmt-chart-row\";\r\n\r\n                        row.style.setProperty(\r\n                            \"--chart-color\",\r\n                            profiles[profile].color\r\n                        );\r\n\r\n                        row.innerHTML =\r\n                            \"<span>\" +\r\n                            profiles[profile].title +\r\n                            \"<\/span>\" +\r\n                            \"<div><i><\/i><\/div>\" +\r\n                            \"<strong>\" +\r\n                            scores[profile] +\r\n                            \"<\/strong>\";\r\n\r\n                        chart.appendChild(row);\r\n\r\n                        window.setTimeout(\r\n                            function () {\r\n\r\n                                row.querySelector(\"i\")\r\n                                    .style.width =\r\n                                    (\r\n                                        scores[profile] \/\r\n                                        4 *\r\n                                        100\r\n                                    ) + \"%\";\r\n\r\n                            },\r\n                            220\r\n                        );\r\n\r\n                    }\r\n                );\r\n\r\n                result.classList.add(\r\n                    \"is-visible\"\r\n                );\r\n\r\n                highlightProfile(winner);\r\n\r\n            }\r\n\r\n            restartButton.addEventListener(\r\n                \"click\",\r\n                function () {\r\n\r\n                    window.clearTimeout(\r\n                        quiz.tmtAutoAdvance\r\n                    );\r\n\r\n                    answers.fill(null);\r\n                    currentQuestion = 0;\r\n\r\n                    quiz.querySelectorAll(\r\n                        \".tmt-answer\"\r\n                    ).forEach(function (button) {\r\n\r\n                        button.classList.remove(\r\n                            \"is-selected\"\r\n                        );\r\n\r\n                    });\r\n\r\n                    result.classList.remove(\r\n                        \"is-visible\"\r\n                    );\r\n\r\n                    highlightProfile(\"\");\r\n\r\n                    updateInterface();\r\n\r\n                }\r\n            );\r\n\r\n            updateInterface();\r\n\r\n        });\r\n\r\n    }\r\n\r\n    if (document.readyState === \"loading\") {\r\n\r\n        document.addEventListener(\r\n            \"DOMContentLoaded\",\r\n            initialiseTometalTalentQuiz\r\n        );\r\n\r\n    } else {\r\n\r\n        initialiseTometalTalentQuiz();\r\n\r\n    }\r\n\r\n    window.addEventListener(\r\n        \"load\",\r\n        initialiseTometalTalentQuiz\r\n    );\r\n\r\n})();\r\n<\/script>\r\n<!-- =========================================================\r\nCORRECTION FINALE \u2014 TEST DES TALENTS TOMETAL\r\n1. SUPPRESSION DU FAUX LOGO \u00ab T \u00bb\r\n2. CORRECTION DU PANNEAU DE R\u00c9SULTAT BLEU\r\n========================================================= -->\r\n\r\n<style>\r\n\/* =========================================================\r\n1. SUPPRESSION DU FAUX LOGO \u00ab T \u00bb\r\n========================================================= *\/\r\n\r\n.tmt-intro__footer-mark {\r\n    display: none !important;\r\n}\r\n\r\n.tmt-intro__footer {\r\n    position: relative;\r\n    display: block !important;\r\n\r\n    margin-top: auto;\r\n    padding-top: 26px;\r\n    padding-left: 18px;\r\n\r\n    border-left: 3px solid var(--tmt-gold);\r\n}\r\n\r\n.tmt-intro__footer p {\r\n    margin: 0 !important;\r\n\r\n    color: var(--tmt-navy);\r\n\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    line-height: 1.5;\r\n\r\n    text-transform: uppercase;\r\n}\r\n\r\n.tmt-intro__footer p span {\r\n    display: block;\r\n\r\n    margin-top: 3px;\r\n\r\n    color: var(--tmt-muted);\r\n\r\n    font-size: 8px;\r\n    letter-spacing: 0.06em;\r\n}\r\n\r\n\/* =========================================================\r\n2. CARTE PRINCIPALE PLUS MODERNE\r\n========================================================= *\/\r\n\r\n.tmt-card {\r\n    border-radius: 24px !important;\r\n\r\n    box-shadow:\r\n        0 35px 90px rgba(7, 27, 61, 0.15),\r\n        0 8px 25px rgba(7, 27, 61, 0.06) !important;\r\n}\r\n\r\n\/* =========================================================\r\n3. PANNEAU DU R\u00c9SULTAT\r\n========================================================= *\/\r\n\r\n.tmt-result {\r\n    inset: 0 !important;\r\n\r\n    padding:\r\n        clamp(28px, 3.2vw, 44px)\r\n        clamp(26px, 3.2vw, 42px)\r\n        clamp(26px, 3.2vw, 40px) !important;\r\n\r\n    background:\r\n        linear-gradient(\r\n            145deg,\r\n            #ffffff 0%,\r\n            #fffefa 100%\r\n        ) !important;\r\n\r\n    border-radius: 24px !important;\r\n\r\n    overflow-x: hidden !important;\r\n    overflow-y: auto !important;\r\n\r\n    scrollbar-width: thin;\r\n    scrollbar-color:\r\n        rgba(201, 154, 66, 0.55)\r\n        rgba(7, 27, 61, 0.05);\r\n}\r\n\r\n.tmt-result::-webkit-scrollbar {\r\n    width: 6px;\r\n}\r\n\r\n.tmt-result::-webkit-scrollbar-track {\r\n    background: rgba(7, 27, 61, 0.05);\r\n}\r\n\r\n.tmt-result::-webkit-scrollbar-thumb {\r\n    background: rgba(201, 154, 66, 0.55);\r\n    border-radius: 20px;\r\n}\r\n\r\n\/* =========================================================\r\n4. EN-T\u00caTE BLEU DU R\u00c9SULTAT\r\n========================================================= *\/\r\n\r\n.tmt-result__hero {\r\n    position: relative;\r\n\r\n    min-height: 155px;\r\n\r\n    padding:\r\n        clamp(25px, 3vw, 34px)\r\n        clamp(23px, 3vw, 34px) !important;\r\n\r\n    background:\r\n        radial-gradient(\r\n            circle at 92% 10%,\r\n            rgba(201, 154, 66, 0.16),\r\n            transparent 27%\r\n        ),\r\n        linear-gradient(\r\n            135deg,\r\n            #173e70 0%,\r\n            #0c2a55 46%,\r\n            #071b3d 100%\r\n        ) !important;\r\n\r\n    border-radius: 20px 20px 0 0 !important;\r\n\r\n    overflow: hidden !important;\r\n\r\n    box-shadow:\r\n        0 18px 45px rgba(7, 27, 61, 0.18);\r\n}\r\n\r\n\/* Cercle d\u00e9coratif dor\u00e9 *\/\r\n\r\n.tmt-result__hero::after {\r\n    top: -90px !important;\r\n    right: -52px !important;\r\n\r\n    width: 235px !important;\r\n    height: 235px !important;\r\n\r\n    border:\r\n        1px solid\r\n        rgba(201, 154, 66, 0.72) !important;\r\n}\r\n\r\n\/* Deuxi\u00e8me cercle d\u00e9coratif *\/\r\n\r\n.tmt-result__hero::before {\r\n    content: \"\";\r\n\r\n    position: absolute;\r\n    top: -55px;\r\n    right: -18px;\r\n\r\n    width: 165px;\r\n    height: 165px;\r\n\r\n    border:\r\n        1px solid\r\n        rgba(201, 154, 66, 0.24);\r\n\r\n    border-radius: 50%;\r\n\r\n    pointer-events: none;\r\n}\r\n\r\n\/* =========================================================\r\n5. IC\u00d4NE DU PROFIL\r\n========================================================= *\/\r\n\r\n.tmt-result__symbol {\r\n    width: 76px !important;\r\n    height: 76px !important;\r\n\r\n    border:\r\n        1px solid\r\n        rgba(255, 255, 255, 0.42);\r\n\r\n    box-shadow:\r\n        0 15px 35px rgba(0, 0, 0, 0.22),\r\n        inset 0 1px 0 rgba(255, 255, 255, 0.25);\r\n}\r\n\r\n.tmt-result__symbol svg {\r\n    width: 34px !important;\r\n    height: 34px !important;\r\n}\r\n\r\n\/* =========================================================\r\n6. TITRE DU PROFIL\r\n========================================================= *\/\r\n\r\n.tmt-result__heading > span {\r\n    margin-bottom: 8px !important;\r\n\r\n    color: var(--tmt-gold-light) !important;\r\n\r\n    font-size: 8px !important;\r\n    letter-spacing: 0.16em !important;\r\n}\r\n\r\n.tmt-result__heading h3 {\r\n    margin-bottom: 8px !important;\r\n\r\n    font-size:\r\n        clamp(38px, 4vw, 58px) !important;\r\n\r\n    line-height: 0.96 !important;\r\n}\r\n\r\n.tmt-result__heading p {\r\n    color: rgba(255, 255, 255, 0.72) !important;\r\n\r\n    font-size: 10px !important;\r\n}\r\n\r\n\/* =========================================================\r\n7. SCORE\r\n========================================================= *\/\r\n\r\n.tmt-result__score {\r\n    min-width: 80px;\r\n\r\n    padding: 12px 10px;\r\n\r\n    border-left:\r\n        1px solid\r\n        rgba(255, 255, 255, 0.14);\r\n}\r\n\r\n.tmt-result__score strong {\r\n    font-size: 50px !important;\r\n}\r\n\r\n.tmt-result__score span {\r\n    margin-top: 4px;\r\n\r\n    color: rgba(255, 255, 255, 0.65) !important;\r\n\r\n    font-size: 8px !important;\r\n    letter-spacing: 0.09em;\r\n}\r\n\r\n\/* =========================================================\r\n8. CORPS BLANC DU R\u00c9SULTAT\r\n========================================================= *\/\r\n\r\n.tmt-result__body {\r\n    padding:\r\n        clamp(24px, 3vw, 34px) !important;\r\n\r\n    background:\r\n        linear-gradient(\r\n            180deg,\r\n            #ffffff 0%,\r\n            #fffefa 100%\r\n        );\r\n\r\n    border:\r\n        1px solid\r\n        rgba(7, 27, 61, 0.09) !important;\r\n\r\n    border-top: 0 !important;\r\n\r\n    border-radius: 0 0 20px 20px !important;\r\n\r\n    box-shadow:\r\n        0 18px 50px rgba(7, 27, 61, 0.07);\r\n}\r\n\r\n\/* =========================================================\r\n9. RECOMMANDATIONS\r\n========================================================= *\/\r\n\r\n.tmt-result__tag {\r\n    min-height: 34px !important;\r\n\r\n    padding: 0 14px !important;\r\n\r\n    border-radius: 6px;\r\n\r\n    transition:\r\n        transform 0.3s ease,\r\n        box-shadow 0.3s ease,\r\n        border-color 0.3s ease;\r\n}\r\n\r\n.tmt-result__tag:hover {\r\n    border-color: var(--result-color);\r\n\r\n    box-shadow:\r\n        0 8px 20px rgba(7, 27, 61, 0.08);\r\n\r\n    transform: translateY(-2px);\r\n}\r\n\r\n\/* =========================================================\r\n10. PROFIL SECONDAIRE\r\n========================================================= *\/\r\n\r\n.tmt-result__note {\r\n    padding: 17px 19px !important;\r\n\r\n    background:\r\n        linear-gradient(\r\n            90deg,\r\n            rgba(201, 154, 66, 0.10),\r\n            rgba(247, 244, 237, 0.65)\r\n        ) !important;\r\n\r\n    border-left:\r\n        4px solid\r\n        var(--result-color) !important;\r\n\r\n    border-radius: 0 8px 8px 0;\r\n}\r\n\r\n\/* =========================================================\r\n11. BOUTONS DU R\u00c9SULTAT\r\n========================================================= *\/\r\n\r\n.tmt-result__actions {\r\n    align-items: center;\r\n\r\n    margin-top: 22px !important;\r\n    padding-top: 0 !important;\r\n}\r\n\r\n.tmt-result__restart,\r\n.tmt-result__discover {\r\n    min-height: 52px !important;\r\n\r\n    padding: 0 21px !important;\r\n\r\n    border-radius: 8px;\r\n\r\n    transition:\r\n        transform 0.3s ease,\r\n        box-shadow 0.3s ease,\r\n        color 0.3s ease,\r\n        background-color 0.3s ease;\r\n}\r\n\r\n.tmt-result__restart:hover {\r\n    color: #ffffff;\r\n\r\n    background: var(--tmt-navy);\r\n\r\n    box-shadow:\r\n        0 12px 28px rgba(7, 27, 61, 0.18);\r\n\r\n    transform: translateY(-3px);\r\n}\r\n\r\n.tmt-result__discover {\r\n    box-shadow:\r\n        0 14px 30px rgba(201, 154, 66, 0.22);\r\n}\r\n\r\n.tmt-result__discover:hover {\r\n    background: var(--tmt-navy);\r\n    border-color: var(--tmt-navy);\r\n\r\n    box-shadow:\r\n        0 16px 35px rgba(7, 27, 61, 0.20);\r\n\r\n    transform: translateY(-3px);\r\n}\r\n\r\n\/* =========================================================\r\n12. TABLETTE\r\n========================================================= *\/\r\n\r\n@media screen and (max-width: 900px) {\r\n\r\n    .tmt-intro__footer {\r\n        display: block !important;\r\n    }\r\n\r\n    .tmt-result {\r\n        padding: 24px !important;\r\n    }\r\n\r\n    .tmt-result__hero {\r\n        min-height: 145px;\r\n    }\r\n}\r\n\r\n\/* =========================================================\r\n13. MOBILE\r\n========================================================= *\/\r\n\r\n@media screen and (max-width: 767px) {\r\n\r\n    .tmt-intro__footer {\r\n        margin-top: 25px;\r\n        padding-top: 18px;\r\n        padding-left: 14px;\r\n    }\r\n\r\n    .tmt-result {\r\n        position: relative !important;\r\n        inset: auto !important;\r\n\r\n        padding: 0 !important;\r\n\r\n        border-radius: 16px !important;\r\n\r\n        overflow: visible !important;\r\n    }\r\n\r\n    .tmt-result__hero {\r\n        min-height: auto;\r\n\r\n        padding: 22px 17px !important;\r\n\r\n        border-radius: 16px 16px 0 0 !important;\r\n    }\r\n\r\n    .tmt-result__body {\r\n        padding: 22px 17px !important;\r\n\r\n        border-radius: 0 0 16px 16px !important;\r\n    }\r\n\r\n    .tmt-result__score {\r\n        min-width: 0;\r\n\r\n        padding: 13px 0 0;\r\n\r\n        border-top:\r\n            1px solid\r\n            rgba(255, 255, 255, 0.15);\r\n\r\n        border-left: 0;\r\n    }\r\n\r\n    .tmt-result__actions {\r\n        display: grid !important;\r\n        grid-template-columns: 1fr;\r\n    }\r\n\r\n    .tmt-result__restart,\r\n    .tmt-result__discover {\r\n        width: 100%;\r\n    }\r\n}\r\n<\/style>\r\n\r\n<script>\r\n(function () {\r\n    \"use strict\";\r\n\r\n    function applyTometalResultCorrections() {\r\n\r\n        document\r\n            .querySelectorAll(\".tmt-intro__footer-mark\")\r\n            .forEach(function (falseLogo) {\r\n                falseLogo.remove();\r\n            });\r\n\r\n        document\r\n            .querySelectorAll(\"[data-result]\")\r\n            .forEach(function (resultPanel) {\r\n\r\n                if (\r\n                    resultPanel.dataset.correctionReady ===\r\n                    \"true\"\r\n                ) {\r\n                    return;\r\n                }\r\n\r\n                resultPanel.dataset.correctionReady = \"true\";\r\n\r\n                const observer =\r\n                    new MutationObserver(function () {\r\n\r\n                        if (\r\n                            !resultPanel.classList.contains(\r\n                                \"is-visible\"\r\n                            )\r\n                        ) {\r\n                            return;\r\n                        }\r\n\r\n                        \/*\r\n                        Positionne le r\u00e9sultat sous le header fixe\r\n                        sans couper la partie bleue.\r\n                        *\/\r\n\r\n                        window.setTimeout(function () {\r\n\r\n                            const card =\r\n                                resultPanel.closest(\r\n                                    \".tmt-card\"\r\n                                );\r\n\r\n                            if (!card) {\r\n                                return;\r\n                            }\r\n\r\n                            const headerOffset =\r\n                                window.innerWidth <= 767\r\n                                    ? 90\r\n                                    : 118;\r\n\r\n                            const cardPosition =\r\n                                card\r\n                                    .getBoundingClientRect()\r\n                                    .top +\r\n                                window.pageYOffset -\r\n                                headerOffset;\r\n\r\n                            const currentPosition =\r\n                                window.pageYOffset;\r\n\r\n                            \/*\r\n                            On ne d\u00e9place la page que lorsque\r\n                            le haut du r\u00e9sultat est masqu\u00e9.\r\n                            *\/\r\n\r\n                            if (\r\n                                card.getBoundingClientRect()\r\n                                    .top <\r\n                                headerOffset\r\n                            ) {\r\n                                window.scrollTo({\r\n                                    top: cardPosition,\r\n                                    behavior: \"smooth\"\r\n                                });\r\n                            }\r\n\r\n                        }, 120);\r\n\r\n                    });\r\n\r\n                observer.observe(\r\n                    resultPanel,\r\n                    {\r\n                        attributes: true,\r\n                        attributeFilter: [\"class\"]\r\n                    }\r\n                );\r\n\r\n            });\r\n\r\n    }\r\n\r\n    if (document.readyState === \"loading\") {\r\n\r\n        document.addEventListener(\r\n            \"DOMContentLoaded\",\r\n            applyTometalResultCorrections\r\n        );\r\n\r\n    } else {\r\n\r\n        applyTometalResultCorrections();\r\n\r\n    }\r\n\r\n    window.addEventListener(\r\n        \"load\",\r\n        applyTometalResultCorrections\r\n    );\r\n\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-06cfafe e-con-full e-flex e-con e-parent\" data-id=\"06cfafe\" data-element_type=\"container\" data-e-type=\"container\" id=\"cantine\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-611ca7b elementor-widget elementor-widget-html\" data-id=\"611ca7b\" 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 SECTION CANTINE SCOLAIRE\r\nHTML + CSS + JAVASCRIPT\r\n\u00c0 COLLER DANS UN SEUL WIDGET HTML ELEMENTOR\r\n========================================================= -->\r\n\r\n<section\r\n    class=\"tmt-canteen\"\r\n    id=\"cantine\"\r\n    data-tmt-canteen\r\n>\r\n    <!-- D\u00c9CORATIONS -->\r\n\r\n    <div\r\n        class=\"tmt-canteen__orb tmt-canteen__orb--one\"\r\n        aria-hidden=\"true\"\r\n    ><\/div>\r\n\r\n    <div\r\n        class=\"tmt-canteen__orb tmt-canteen__orb--two\"\r\n        aria-hidden=\"true\"\r\n    ><\/div>\r\n\r\n    <div class=\"tmt-canteen__wrapper\">\r\n\r\n        <!-- =====================================================\r\n        1. PR\u00c9SENTATION PRINCIPALE\r\n        ====================================================== -->\r\n\r\n        <header class=\"tmt-canteen-hero tmt-canteen-reveal\">\r\n\r\n            <!-- TEXTE -->\r\n\r\n            <div class=\"tmt-canteen-hero__content\">\r\n\r\n                <div class=\"tmt-canteen-hero__eyebrow\">\r\n                    <span>03<\/span>\r\n                    <i><\/i>\r\n                    <strong>Vie scolaire<\/strong>\r\n                <\/div>\r\n\r\n                <div class=\"tmt-canteen-hero__brand\">\r\n\r\n                    <img decoding=\"async\"\r\n                        src=\"https:\/\/net-temporaire.institut-tometal.com\/wp-content\/uploads\/2026\/08\/logo-institut-tometal.jpeg\"\r\n                        alt=\"Logo de l\u2019Institut Tometal\"\r\n                    >\r\n\r\n                    <div>\r\n                        <strong>Institut Tometal<\/strong>\r\n                        <span>\u00c9ducation \u00b7 Valeurs \u00b7 Avenir<\/span>\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n                <h2 class=\"tmt-canteen-hero__title\">\r\n                    Cantine\r\n                    <em>scolaire.<\/em>\r\n                <\/h2>\r\n\r\n                <p class=\"tmt-canteen-hero__slogan\">\r\n                    Bien manger. Bien grandir.\r\n                    <strong>Bien r\u00e9ussir.<\/strong>\r\n                <\/p>\r\n\r\n                <div class=\"tmt-canteen-hero__divider\"><\/div>\r\n\r\n                <h3>\r\n                    Une restauration pens\u00e9e pour accompagner\r\n                    la r\u00e9ussite de chaque \u00e9l\u00e8ve.\r\n                <\/h3>\r\n\r\n                <p class=\"tmt-canteen-hero__description\">\r\n                    \u00c0 l\u2019Institut Tometal, la pause d\u00e9jeuner est un moment\r\n                    essentiel de la journ\u00e9e. Notre cantine propose des repas\r\n                    \u00e9quilibr\u00e9s, pr\u00e9par\u00e9s dans le respect des r\u00e8gles d\u2019hygi\u00e8ne\r\n                    et adapt\u00e9s aux besoins nutritionnels des enfants.\r\n                <\/p>\r\n\r\n                <div class=\"tmt-canteen-hero__signature\">\r\n                    <span><\/span>\r\n\r\n                    <p>\r\n                        Nourrir le corps, favoriser le bien-\u00eatre\r\n                        et soutenir les apprentissages.\r\n                    <\/p>\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n            <!-- IMAGE -->\r\n\r\n            <div class=\"tmt-canteen-hero__visual\">\r\n\r\n                <div class=\"tmt-canteen-hero__image\">\r\n                    <img decoding=\"async\"\r\n                        src=\"https:\/\/images.unsplash.com\/photo-1547592180-85f173990554?auto=format&fit=crop&w=1600&q=88\"\r\n                        alt=\"Repas \u00e9quilibr\u00e9 compos\u00e9 de l\u00e9gumes et d\u2019aliments frais\"\r\n                    >\r\n                <\/div>\r\n\r\n                <div class=\"tmt-canteen-hero__seal\">\r\n                    <span>Nourrir aujourd\u2019hui<\/span>\r\n                    <strong>pour r\u00e9ussir demain<\/strong>\r\n                <\/div>\r\n\r\n                <div class=\"tmt-canteen-hero__stat\">\r\n                    <span>Une alimentation<\/span>\r\n                    <strong>Saine et \u00e9quilibr\u00e9e<\/strong>\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n        <\/header>\r\n\r\n        <!-- =====================================================\r\n        2. NOS ENGAGEMENTS\r\n        ====================================================== -->\r\n\r\n        <section class=\"tmt-canteen-commitments\">\r\n\r\n            <div class=\"tmt-canteen-heading tmt-canteen-reveal\">\r\n\r\n                <span class=\"tmt-canteen-heading__line\"><\/span>\r\n\r\n                <div>\r\n                    <span>Notre exigence au quotidien<\/span>\r\n                    <h3>Nos engagements<\/h3>\r\n                <\/div>\r\n\r\n                <span class=\"tmt-canteen-heading__line\"><\/span>\r\n\r\n            <\/div>\r\n\r\n            <div class=\"tmt-canteen-commitments__grid\">\r\n\r\n                <!-- ENGAGEMENT 1 -->\r\n\r\n                <article\r\n                    class=\"tmt-canteen-commitment tmt-canteen-reveal\"\r\n                    style=\"--commitment-index:'01';\"\r\n                >\r\n                    <div class=\"tmt-canteen-commitment__icon\">\r\n                        <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n                            <path d=\"M4 20c1-6 4-10 10-13\"><\/path>\r\n                            <path d=\"M4 14c4-1 7 0 9 4\"><\/path>\r\n                            <path d=\"M14 7c1-3 3-4 6-4 0 4-2 7-6 8\"><\/path>\r\n                        <\/svg>\r\n                    <\/div>\r\n\r\n                    <h4>Des repas \u00e9quilibr\u00e9s et vari\u00e9s<\/h4>\r\n\r\n                    <p>\r\n                        Des menus con\u00e7us pour favoriser la croissance,\r\n                        l\u2019\u00e9nergie et la concentration des \u00e9l\u00e8ves.\r\n                    <\/p>\r\n                <\/article>\r\n\r\n                <!-- ENGAGEMENT 2 -->\r\n\r\n                <article\r\n                    class=\"tmt-canteen-commitment tmt-canteen-reveal\"\r\n                    style=\"--commitment-index:'02';\"\r\n                >\r\n                    <div class=\"tmt-canteen-commitment__icon\">\r\n                        <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n                            <path d=\"M5 10a7 7 0 0 1 14 0\"><\/path>\r\n                            <path d=\"M4 10h16v10H4z\"><\/path>\r\n                            <path d=\"M9 6V3\"><\/path>\r\n                            <path d=\"M15 6V3\"><\/path>\r\n                        <\/svg>\r\n                    <\/div>\r\n\r\n                    <h4>Une pr\u00e9paration soign\u00e9e<\/h4>\r\n\r\n                    <p>\r\n                        Des repas pr\u00e9par\u00e9s avec attention par une \u00e9quipe\r\n                        encadr\u00e9e et attentive \u00e0 la qualit\u00e9.\r\n                    <\/p>\r\n                <\/article>\r\n\r\n                <!-- ENGAGEMENT 3 -->\r\n\r\n                <article\r\n                    class=\"tmt-canteen-commitment tmt-canteen-reveal\"\r\n                    style=\"--commitment-index:'03';\"\r\n                >\r\n                    <div class=\"tmt-canteen-commitment__icon\">\r\n                        <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n                            <path d=\"M12 3 4 6v6c0 5 3 8 8 9 5-1 8-4 8-9V6z\"><\/path>\r\n                            <path d=\"M12 8c-2 3-3 4-3 6a3 3 0 0 0 6 0c0-2-1-3-3-6z\"><\/path>\r\n                        <\/svg>\r\n                    <\/div>\r\n\r\n                    <h4>Hygi\u00e8ne et s\u00e9curit\u00e9 alimentaire<\/h4>\r\n\r\n                    <p>\r\n                        Des proc\u00e9dures strictes appliqu\u00e9es afin de garantir\r\n                        la qualit\u00e9 et la s\u00e9curit\u00e9 des repas.\r\n                    <\/p>\r\n                <\/article>\r\n\r\n                <!-- ENGAGEMENT 4 -->\r\n\r\n                <article\r\n                    class=\"tmt-canteen-commitment tmt-canteen-reveal\"\r\n                    style=\"--commitment-index:'04';\"\r\n                >\r\n                    <div class=\"tmt-canteen-commitment__icon\">\r\n                        <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n                            <path d=\"M12 6c-2-4-6-3-7 0-2 6 2 14 7 14s9-8 7-14c-1-3-5-4-7 0z\"><\/path>\r\n                            <path d=\"M12 6c0-2 1-4 4-5\"><\/path>\r\n                            <path d=\"M12 5c-2-1-3-2-3-4\"><\/path>\r\n                        <\/svg>\r\n                    <\/div>\r\n\r\n                    <h4>\u00c9ducation au go\u00fbt<\/h4>\r\n\r\n                    <p>\r\n                        Les enfants d\u00e9couvrent une alimentation saine,\r\n                        diversifi\u00e9e et de bonnes habitudes alimentaires.\r\n                    <\/p>\r\n                <\/article>\r\n\r\n                <!-- ENGAGEMENT 5 -->\r\n\r\n                <article\r\n                    class=\"tmt-canteen-commitment tmt-canteen-reveal\"\r\n                    style=\"--commitment-index:'05';\"\r\n                >\r\n                    <div class=\"tmt-canteen-commitment__icon\">\r\n                        <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n                            <rect x=\"3\" y=\"5\" width=\"18\" height=\"16\" rx=\"1\"><\/rect>\r\n                            <path d=\"M8 3v4\"><\/path>\r\n                            <path d=\"M16 3v4\"><\/path>\r\n                            <path d=\"M3 10h18\"><\/path>\r\n                            <path d=\"M7 14h2\"><\/path>\r\n                            <path d=\"M11 14h2\"><\/path>\r\n                            <path d=\"M15 14h2\"><\/path>\r\n                        <\/svg>\r\n                    <\/div>\r\n\r\n                    <h4>Menus de la semaine disponibles<\/h4>\r\n\r\n                    <p>\r\n                        Les familles peuvent consulter les repas propos\u00e9s\r\n                        afin de mieux organiser l\u2019alimentation de l\u2019enfant.\r\n                    <\/p>\r\n                <\/article>\r\n\r\n                <!-- ENGAGEMENT 6 -->\r\n\r\n                <article\r\n                    class=\"tmt-canteen-commitment tmt-canteen-reveal\"\r\n                    style=\"--commitment-index:'06';\"\r\n                >\r\n                    <div class=\"tmt-canteen-commitment__icon\">\r\n                        <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n                            <circle cx=\"12\" cy=\"7\" r=\"4\"><\/circle>\r\n                            <path d=\"M4 21c1-5 3.5-7 8-7s7 2 8 7\"><\/path>\r\n                            <path d=\"M18 4v5\"><\/path>\r\n                            <path d=\"M15.5 6.5h5\"><\/path>\r\n                        <\/svg>\r\n                    <\/div>\r\n\r\n                    <h4>Allergies et besoins sp\u00e9cifiques<\/h4>\r\n\r\n                    <p>\r\n                        Une prise en compte individualis\u00e9e des informations\r\n                        transmises par les familles.\r\n                    <\/p>\r\n                <\/article>\r\n\r\n            <\/div>\r\n\r\n        <\/section>\r\n\r\n        <!-- =====================================================\r\n        3. UNE JOURN\u00c9E \u00c0 LA CANTINE\r\n        ====================================================== -->\r\n\r\n        <section class=\"tmt-canteen-journey\">\r\n\r\n            <div class=\"tmt-canteen-heading tmt-canteen-reveal\">\r\n\r\n                <span class=\"tmt-canteen-heading__line\"><\/span>\r\n\r\n                <div>\r\n                    <span>Un parcours encadr\u00e9<\/span>\r\n                    <h3>Une journ\u00e9e \u00e0 la cantine<\/h3>\r\n                <\/div>\r\n\r\n                <span class=\"tmt-canteen-heading__line\"><\/span>\r\n\r\n            <\/div>\r\n\r\n            <div class=\"tmt-canteen-journey__track\">\r\n\r\n                <!-- \u00c9TAPE 1 -->\r\n\r\n                <article class=\"tmt-canteen-step tmt-canteen-reveal\">\r\n\r\n                    <div class=\"tmt-canteen-step__image\">\r\n                        <img decoding=\"async\"\r\n                            src=\"https:\/\/images.unsplash.com\/photo-1577896851231-70ef18881754?auto=format&fit=crop&w=900&q=84\"\r\n                            alt=\"\u00c9l\u00e8ves arrivant \u00e0 l\u2019\u00e9cole\"\r\n                        >\r\n                        <span>01<\/span>\r\n                    <\/div>\r\n\r\n                    <div class=\"tmt-canteen-step__content\">\r\n                        <span>Premi\u00e8re \u00e9tape<\/span>\r\n                        <h4>Arriv\u00e9e des \u00e9l\u00e8ves<\/h4>\r\n                        <p>\r\n                            Les \u00e9l\u00e8ves rejoignent la cantine\r\n                            dans le calme et sous encadrement.\r\n                        <\/p>\r\n                    <\/div>\r\n\r\n                <\/article>\r\n\r\n                <!-- \u00c9TAPE 2 -->\r\n\r\n                <article class=\"tmt-canteen-step tmt-canteen-reveal\">\r\n\r\n                    <div class=\"tmt-canteen-step__image\">\r\n                        <img decoding=\"async\"\r\n                            src=\"https:\/\/images.unsplash.com\/photo-1583947215259-38e31be8751f?auto=format&fit=crop&w=900&q=84\"\r\n                            alt=\"Lavage des mains avant le repas\"\r\n                        >\r\n                        <span>02<\/span>\r\n                    <\/div>\r\n\r\n                    <div class=\"tmt-canteen-step__content\">\r\n                        <span>Hygi\u00e8ne<\/span>\r\n                        <h4>Lavage des mains<\/h4>\r\n                        <p>\r\n                            Chaque \u00e9l\u00e8ve se lave soigneusement\r\n                            les mains avant de prendre son repas.\r\n                        <\/p>\r\n                    <\/div>\r\n\r\n                <\/article>\r\n\r\n                <!-- \u00c9TAPE 3 -->\r\n\r\n                <article class=\"tmt-canteen-step tmt-canteen-reveal\">\r\n\r\n                    <div class=\"tmt-canteen-step__image\">\r\n                        <img decoding=\"async\"\r\n                            src=\"https:\/\/images.unsplash.com\/photo-1576866209830-589e1bfbaa4d?auto=format&fit=crop&w=900&q=84\"\r\n                            alt=\"Service d\u2019un repas \u00e9quilibr\u00e9\"\r\n                        >\r\n                        <span>03<\/span>\r\n                    <\/div>\r\n\r\n                    <div class=\"tmt-canteen-step__content\">\r\n                        <span>Service<\/span>\r\n                        <h4>Service du repas<\/h4>\r\n                        <p>\r\n                            Les plats sont servis dans le respect\r\n                            des portions et des r\u00e8gles d\u2019hygi\u00e8ne.\r\n                        <\/p>\r\n                    <\/div>\r\n\r\n                <\/article>\r\n\r\n                <!-- \u00c9TAPE 4 -->\r\n\r\n                <article class=\"tmt-canteen-step tmt-canteen-reveal\">\r\n\r\n                    <div class=\"tmt-canteen-step__image\">\r\n                        <img decoding=\"async\"\r\n                            src=\"https:\/\/images.unsplash.com\/photo-1529156069898-49953e39b3ac?auto=format&fit=crop&w=900&q=84\"\r\n                            alt=\"\u00c9l\u00e8ves partageant un repas\"\r\n                        >\r\n                        <span>04<\/span>\r\n                    <\/div>\r\n\r\n                    <div class=\"tmt-canteen-step__content\">\r\n                        <span>Convivialit\u00e9<\/span>\r\n                        <h4>Moment de partage<\/h4>\r\n                        <p>\r\n                            La pause devient un moment de d\u00e9tente,\r\n                            d\u2019\u00e9change et d\u2019apprentissage de la vie collective.\r\n                        <\/p>\r\n                    <\/div>\r\n\r\n                <\/article>\r\n\r\n                <!-- \u00c9TAPE 5 -->\r\n\r\n                <article class=\"tmt-canteen-step tmt-canteen-reveal\">\r\n\r\n                    <div class=\"tmt-canteen-step__image\">\r\n                        <img decoding=\"async\"\r\n                            src=\"https:\/\/images.unsplash.com\/photo-1509062522246-3755977927d7?auto=format&fit=crop&w=900&q=84\"\r\n                            alt=\"Retour des \u00e9l\u00e8ves en classe\"\r\n                        >\r\n                        <span>05<\/span>\r\n                    <\/div>\r\n\r\n                    <div class=\"tmt-canteen-step__content\">\r\n                        <span>Apr\u00e8s le repas<\/span>\r\n                        <h4>Retour en classe<\/h4>\r\n                        <p>\r\n                            Les \u00e9l\u00e8ves rejoignent leurs classes\r\n                            dans de bonnes conditions pour poursuivre la journ\u00e9e.\r\n                        <\/p>\r\n                    <\/div>\r\n\r\n                <\/article>\r\n\r\n            <\/div>\r\n\r\n        <\/section>\r\n\r\n        <!-- =====================================================\r\n        4. INFORMATIONS PRATIQUES\r\n        ====================================================== -->\r\n\r\n        <section class=\"tmt-canteen-practical tmt-canteen-reveal\">\r\n\r\n            <!-- CARTE DE PAIEMENT -->\r\n\r\n            <article class=\"tmt-canteen-payment\">\r\n\r\n                <div class=\"tmt-canteen-payment__card\">\r\n\r\n                    <div class=\"tmt-canteen-payment__chip\"><\/div>\r\n\r\n                    <div class=\"tmt-canteen-payment__contactless\">\r\n                        )))\r\n                    <\/div>\r\n\r\n                    <img decoding=\"async\"\r\n                        src=\"https:\/\/net-temporaire.institut-tometal.com\/wp-content\/uploads\/2026\/08\/logo-institut-tometal.jpeg\"\r\n                        alt=\"\"\r\n                    >\r\n\r\n                    <span>Carte cantine<\/span>\r\n                <\/div>\r\n\r\n                <div class=\"tmt-canteen-payment__content\">\r\n                    <span>Un fonctionnement moderne<\/span>\r\n                    <h3>Paiement par carte \u00e0 d\u00e9bit<\/h3>\r\n\r\n                    <p>\r\n                        Une carte est attribu\u00e9e \u00e0 chaque \u00e9l\u00e8ve. Le paiement\r\n                        fonctionne \u00e0 d\u00e9bit : la famille paie uniquement\r\n                        les repas effectivement consomm\u00e9s.\r\n                    <\/p>\r\n\r\n                    <div class=\"tmt-canteen-payment__features\">\r\n                        <span>Simple<\/span>\r\n                        <span>Transparent<\/span>\r\n                        <span>Pratique<\/span>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n            <\/article>\r\n\r\n            <!-- TARIF -->\r\n\r\n            <article class=\"tmt-canteen-price\">\r\n\r\n                <div class=\"tmt-canteen-price__icon\">\r\n                    <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n                        <path d=\"M4 19h16\"><\/path>\r\n                        <path d=\"M6 17a6 6 0 0 1 12 0\"><\/path>\r\n                        <path d=\"M12 11V7\"><\/path>\r\n                        <circle cx=\"12\" cy=\"5\" r=\"1.5\"><\/circle>\r\n                    <\/svg>\r\n                <\/div>\r\n\r\n                <div>\r\n                    <span>Tarif journalier<\/span>\r\n\r\n                    <h3>\r\n                        <strong>12 000 Ar<\/strong>\r\n                        <small>par jour<\/small>\r\n                    <\/h3>\r\n\r\n                    <p>\r\n                        Un tarif \u00e9tabli pour proposer une alimentation\r\n                        saine, \u00e9quilibr\u00e9e et pr\u00e9par\u00e9e avec soin.\r\n                    <\/p>\r\n                <\/div>\r\n\r\n            <\/article>\r\n\r\n        <\/section>\r\n\r\n        <!-- =====================================================\r\n        5. CONTACT\r\n        ====================================================== -->\r\n\r\n        <section\r\n            class=\"tmt-canteen-contact tmt-canteen-reveal\"\r\n            id=\"contact-vie-scolaire\"\r\n        >\r\n\r\n            <div class=\"tmt-canteen-contact__icon\">\r\n                <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n                    <path d=\"M5 4h4l2 5-3 2c2 4 4 6 8 8l2-3 5 2v4c0 1-1 2-2 2C10 23 1 14 2 6c0-1 1-2 3-2z\"><\/path>\r\n                <\/svg>\r\n            <\/div>\r\n\r\n            <div class=\"tmt-canteen-contact__content\">\r\n                <span>Besoin de pr\u00e9cisions ?<\/span>\r\n                <h3>Plus d\u2019informations sur la cantine<\/h3>\r\n\r\n                <p>\r\n                    Contactez la responsable de la vie scolaire pour obtenir\r\n                    davantage d\u2019informations sur les inscriptions, les menus,\r\n                    le paiement et les besoins alimentaires particuliers.\r\n                <\/p>\r\n            <\/div>\r\n\r\n            <div class=\"tmt-canteen-contact__actions\">\r\n\r\n                <a\r\n                    href=\"#nous-contacter\"\r\n                    class=\"tmt-canteen-contact__button\"\r\n                >\r\n                    <span>Nous contacter<\/span>\r\n\r\n                    <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n                        <path d=\"m9 5 7 7-7 7\"><\/path>\r\n                    <\/svg>\r\n                <\/a>\r\n\r\n                <p>\r\n                    Ensemble,\r\n                    <strong>pour l\u2019avenir de nos enfants.<\/strong>\r\n                <\/p>\r\n\r\n            <\/div>\r\n\r\n        <\/section>\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.tmt-canteen {\r\n    --canteen-navy: #071b3d;\r\n    --canteen-navy-soft: #123765;\r\n    --canteen-green: #123f2c;\r\n    --canteen-green-light: #286044;\r\n    --canteen-gold: #c99a42;\r\n    --canteen-gold-light: #e6c879;\r\n    --canteen-white: #ffffff;\r\n    --canteen-cream: #f7f4ed;\r\n    --canteen-cream-dark: #eee7d8;\r\n    --canteen-text: #586376;\r\n    --canteen-muted: #8b94a3;\r\n    --canteen-border: rgba(7, 27, 61, 0.10);\r\n\r\n    position: relative;\r\n    width: 100%;\r\n    padding: clamp(80px, 8vw, 135px) 0;\r\n    overflow: hidden;\r\n\r\n    background:\r\n        radial-gradient(\r\n            circle at 90% 8%,\r\n            rgba(201, 154, 66, 0.09),\r\n            transparent 25%\r\n        ),\r\n        linear-gradient(\r\n            180deg,\r\n            #ffffff 0%,\r\n            #f8f6f0 48%,\r\n            #ffffff 100%\r\n        );\r\n\r\n    isolation: isolate;\r\n}\r\n\r\n.tmt-canteen,\r\n.tmt-canteen * {\r\n    box-sizing: border-box;\r\n}\r\n\r\n.tmt-canteen h2,\r\n.tmt-canteen h3,\r\n.tmt-canteen h4,\r\n.tmt-canteen p {\r\n    margin-top: 0;\r\n}\r\n\r\n.tmt-canteen img,\r\n.tmt-canteen svg {\r\n    display: block;\r\n}\r\n\r\n.tmt-canteen__wrapper {\r\n    position: relative;\r\n    width: min(1480px, calc(100% - clamp(30px, 6vw, 100px)));\r\n    margin: 0 auto;\r\n}\r\n\r\n\/* =========================================================\r\nD\u00c9CORATIONS\r\n========================================================= *\/\r\n\r\n.tmt-canteen__orb {\r\n    position: absolute;\r\n    z-index: -1;\r\n    border-radius: 50%;\r\n    pointer-events: none;\r\n}\r\n\r\n.tmt-canteen__orb--one {\r\n    top: -260px;\r\n    right: -180px;\r\n    width: 560px;\r\n    height: 560px;\r\n    border: 1px solid rgba(201, 154, 66, 0.15);\r\n}\r\n\r\n.tmt-canteen__orb--one::before,\r\n.tmt-canteen__orb--one::after {\r\n    content: \"\";\r\n    position: absolute;\r\n    border: 1px solid rgba(201, 154, 66, 0.09);\r\n    border-radius: 50%;\r\n}\r\n\r\n.tmt-canteen__orb--one::before {\r\n    inset: 60px;\r\n}\r\n\r\n.tmt-canteen__orb--one::after {\r\n    inset: 130px;\r\n}\r\n\r\n.tmt-canteen__orb--two {\r\n    bottom: 250px;\r\n    left: -250px;\r\n    width: 480px;\r\n    height: 480px;\r\n    background: rgba(18, 63, 44, 0.035);\r\n}\r\n\r\n\/* =========================================================\r\nHERO\r\n========================================================= *\/\r\n\r\n.tmt-canteen-hero {\r\n    display: grid;\r\n    grid-template-columns:\r\n        minmax(420px, 0.9fr)\r\n        minmax(520px, 1.1fr);\r\n\r\n    min-height: 690px;\r\n    margin-bottom: clamp(100px, 10vw, 160px);\r\n\r\n    overflow: hidden;\r\n\r\n    background: var(--canteen-white);\r\n    border: 1px solid rgba(201, 154, 66, 0.22);\r\n\r\n    box-shadow:\r\n        0 35px 90px rgba(7, 27, 61, 0.12);\r\n}\r\n\r\n.tmt-canteen-hero__content {\r\n    position: relative;\r\n    z-index: 2;\r\n\r\n    display: flex;\r\n    flex-direction: column;\r\n    justify-content: center;\r\n\r\n    padding: clamp(45px, 6vw, 90px);\r\n}\r\n\r\n.tmt-canteen-hero__content::after {\r\n    content: \"C\";\r\n\r\n    position: absolute;\r\n    right: -10px;\r\n    bottom: -75px;\r\n    z-index: -1;\r\n\r\n    color: rgba(18, 63, 44, 0.035);\r\n\r\n    font-family: Georgia, \"Times New Roman\", serif;\r\n    font-size: 310px;\r\n    line-height: 1;\r\n}\r\n\r\n.tmt-canteen-hero__eyebrow {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 13px;\r\n    margin-bottom: 22px;\r\n\r\n    color: var(--canteen-gold);\r\n\r\n    font-family: \"Montserrat\", Arial, sans-serif;\r\n    font-size: 9px;\r\n    font-weight: 700;\r\n    letter-spacing: 0.16em;\r\n    text-transform: uppercase;\r\n}\r\n\r\n.tmt-canteen-hero__eyebrow > span {\r\n    color: var(--canteen-navy);\r\n}\r\n\r\n.tmt-canteen-hero__eyebrow i {\r\n    width: 42px;\r\n    height: 1px;\r\n    background: var(--canteen-gold);\r\n}\r\n\r\n.tmt-canteen-hero__brand {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 13px;\r\n    margin-bottom: 25px;\r\n}\r\n\r\n.tmt-canteen-hero__brand img {\r\n    width: 52px;\r\n    height: 52px;\r\n    object-fit: contain;\r\n}\r\n\r\n.tmt-canteen-hero__brand div {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 4px;\r\n}\r\n\r\n.tmt-canteen-hero__brand strong {\r\n    color: var(--canteen-green);\r\n\r\n    font-family: \"Montserrat\", Arial, sans-serif;\r\n    font-size: 11px;\r\n    font-weight: 700;\r\n    letter-spacing: 0.12em;\r\n    text-transform: uppercase;\r\n}\r\n\r\n.tmt-canteen-hero__brand span {\r\n    color: var(--canteen-muted);\r\n\r\n    font-family: \"Montserrat\", Arial, sans-serif;\r\n    font-size: 7px;\r\n    font-weight: 700;\r\n    letter-spacing: 0.1em;\r\n    text-transform: uppercase;\r\n}\r\n\r\n.tmt-canteen-hero__title {\r\n    margin-bottom: 14px;\r\n\r\n    color: var(--canteen-green);\r\n\r\n    font-family: Georgia, \"Times New Roman\", serif;\r\n    font-size: clamp(58px, 6vw, 95px);\r\n    font-weight: 500;\r\n    line-height: 0.93;\r\n    letter-spacing: -0.05em;\r\n}\r\n\r\n.tmt-canteen-hero__title em {\r\n    display: block;\r\n\r\n    color: var(--canteen-gold);\r\n\r\n    font-weight: inherit;\r\n}\r\n\r\n.tmt-canteen-hero__slogan {\r\n    margin-bottom: 22px;\r\n\r\n    color: var(--canteen-gold);\r\n\r\n    font-family: Georgia, \"Times New Roman\", serif;\r\n    font-size: clamp(19px, 2vw, 28px);\r\n    line-height: 1.35;\r\n}\r\n\r\n.tmt-canteen-hero__slogan strong {\r\n    color: var(--canteen-green);\r\n    font-weight: 500;\r\n}\r\n\r\n.tmt-canteen-hero__divider {\r\n    width: 70px;\r\n    height: 3px;\r\n    margin-bottom: 25px;\r\n\r\n    background: var(--canteen-gold);\r\n}\r\n\r\n.tmt-canteen-hero__content h3 {\r\n    max-width: 560px;\r\n    margin-bottom: 15px;\r\n\r\n    color: var(--canteen-green);\r\n\r\n    font-family: \"Montserrat\", Arial, sans-serif;\r\n    font-size: clamp(17px, 1.5vw, 22px);\r\n    font-weight: 700;\r\n    line-height: 1.4;\r\n}\r\n\r\n.tmt-canteen-hero__description {\r\n    max-width: 600px;\r\n    margin-bottom: 25px;\r\n\r\n    color: var(--canteen-text);\r\n\r\n    font-family: \"Montserrat\", Arial, sans-serif;\r\n    font-size: 13px;\r\n    line-height: 1.8;\r\n}\r\n\r\n.tmt-canteen-hero__signature {\r\n    display: flex;\r\n    align-items: flex-start;\r\n    gap: 14px;\r\n}\r\n\r\n.tmt-canteen-hero__signature > span {\r\n    width: 38px;\r\n    height: 2px;\r\n    margin-top: 8px;\r\n    flex: 0 0 auto;\r\n\r\n    background: var(--canteen-gold);\r\n}\r\n\r\n.tmt-canteen-hero__signature p {\r\n    margin-bottom: 0;\r\n\r\n    color: var(--canteen-navy);\r\n\r\n    font-family: \"Montserrat\", Arial, sans-serif;\r\n    font-size: 8px;\r\n    font-weight: 700;\r\n    letter-spacing: 0.08em;\r\n    line-height: 1.6;\r\n    text-transform: uppercase;\r\n}\r\n\r\n\/* IMAGE HERO *\/\r\n\r\n.tmt-canteen-hero__visual {\r\n    position: relative;\r\n    min-width: 0;\r\n    overflow: hidden;\r\n\r\n    background: var(--canteen-green);\r\n}\r\n\r\n.tmt-canteen-hero__image {\r\n    position: absolute;\r\n    inset: 0;\r\n}\r\n\r\n.tmt-canteen-hero__image::after {\r\n    content: \"\";\r\n    position: absolute;\r\n    inset: 0;\r\n\r\n    background:\r\n        linear-gradient(\r\n            90deg,\r\n            rgba(7, 27, 61, 0.15),\r\n            transparent 45%\r\n        ),\r\n        linear-gradient(\r\n            180deg,\r\n            transparent 55%,\r\n            rgba(7, 27, 61, 0.35)\r\n        );\r\n}\r\n\r\n.tmt-canteen-hero__image img {\r\n    width: 100%;\r\n    height: 100%;\r\n    object-fit: cover;\r\n\r\n    transition:\r\n        transform 1.2s\r\n        cubic-bezier(0.22, 1, 0.36, 1);\r\n}\r\n\r\n.tmt-canteen-hero:hover\r\n.tmt-canteen-hero__image img {\r\n    transform: scale(1.045);\r\n}\r\n\r\n.tmt-canteen-hero__seal {\r\n    position: absolute;\r\n    right: clamp(25px, 4vw, 55px);\r\n    bottom: clamp(32px, 5vw, 70px);\r\n    z-index: 3;\r\n\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    width: 185px;\r\n    height: 185px;\r\n    padding: 25px;\r\n\r\n    color: var(--canteen-gold-light);\r\n    background: rgba(18, 63, 44, 0.94);\r\n\r\n    border: 2px solid var(--canteen-gold);\r\n    border-radius: 50%;\r\n\r\n    box-shadow:\r\n        0 20px 55px rgba(0, 0, 0, 0.30);\r\n\r\n    text-align: center;\r\n\r\n    animation:\r\n        tmtCanteenFloat\r\n        4s ease-in-out infinite;\r\n}\r\n\r\n.tmt-canteen-hero__seal::before {\r\n    content: \"\";\r\n    position: absolute;\r\n    inset: 7px;\r\n\r\n    border: 1px solid rgba(230, 200, 121, 0.55);\r\n    border-radius: inherit;\r\n}\r\n\r\n.tmt-canteen-hero__seal span,\r\n.tmt-canteen-hero__seal strong {\r\n    position: relative;\r\n    z-index: 2;\r\n\r\n    font-family: \"Montserrat\", Arial, sans-serif;\r\n    text-transform: uppercase;\r\n}\r\n\r\n.tmt-canteen-hero__seal span {\r\n    margin-bottom: 8px;\r\n\r\n    font-size: 10px;\r\n    letter-spacing: 0.08em;\r\n}\r\n\r\n.tmt-canteen-hero__seal strong {\r\n    font-size: 14px;\r\n    line-height: 1.45;\r\n}\r\n\r\n@keyframes tmtCanteenFloat {\r\n    0%,\r\n    100% {\r\n        transform: translateY(0);\r\n    }\r\n\r\n    50% {\r\n        transform: translateY(-10px);\r\n    }\r\n}\r\n\r\n.tmt-canteen-hero__stat {\r\n    position: absolute;\r\n    top: 34px;\r\n    left: 34px;\r\n    z-index: 3;\r\n\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 6px;\r\n\r\n    padding: 16px 20px;\r\n\r\n    color: var(--canteen-white);\r\n    background: rgba(7, 27, 61, 0.78);\r\n\r\n    border-left: 3px solid var(--canteen-gold);\r\n    backdrop-filter: blur(8px);\r\n}\r\n\r\n.tmt-canteen-hero__stat span {\r\n    font-family: \"Montserrat\", Arial, sans-serif;\r\n    font-size: 8px;\r\n    font-weight: 700;\r\n    letter-spacing: 0.1em;\r\n    text-transform: uppercase;\r\n}\r\n\r\n.tmt-canteen-hero__stat strong {\r\n    font-family: Georgia, \"Times New Roman\", serif;\r\n    font-size: 20px;\r\n    font-weight: 500;\r\n}\r\n\r\n\/* =========================================================\r\nTITRES DE SECTIONS\r\n========================================================= *\/\r\n\r\n.tmt-canteen-heading {\r\n    display: grid;\r\n    grid-template-columns:\r\n        minmax(40px, 1fr)\r\n        auto\r\n        minmax(40px, 1fr);\r\n\r\n    align-items: center;\r\n    gap: 25px;\r\n\r\n    margin-bottom: 48px;\r\n\r\n    text-align: center;\r\n}\r\n\r\n.tmt-canteen-heading__line {\r\n    height: 1px;\r\n\r\n    background:\r\n        linear-gradient(\r\n            90deg,\r\n            transparent,\r\n            rgba(201, 154, 66, 0.65)\r\n        );\r\n}\r\n\r\n.tmt-canteen-heading__line:last-child {\r\n    background:\r\n        linear-gradient(\r\n            90deg,\r\n            rgba(201, 154, 66, 0.65),\r\n            transparent\r\n        );\r\n}\r\n\r\n.tmt-canteen-heading div > span {\r\n    display: block;\r\n    margin-bottom: 8px;\r\n\r\n    color: var(--canteen-gold);\r\n\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.tmt-canteen-heading h3 {\r\n    margin-bottom: 0;\r\n\r\n    color: var(--canteen-green);\r\n\r\n    font-family: Georgia, \"Times New Roman\", serif;\r\n    font-size: clamp(36px, 4vw, 58px);\r\n    font-weight: 500;\r\n    line-height: 1;\r\n}\r\n\r\n\/* =========================================================\r\nENGAGEMENTS\r\n========================================================= *\/\r\n\r\n.tmt-canteen-commitments {\r\n    margin-bottom: clamp(105px, 10vw, 160px);\r\n}\r\n\r\n.tmt-canteen-commitments__grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(6, minmax(0, 1fr));\r\n\r\n    background: var(--canteen-white);\r\n    border: 1px solid rgba(201, 154, 66, 0.22);\r\n\r\n    box-shadow:\r\n        0 25px 65px rgba(7, 27, 61, 0.08);\r\n}\r\n\r\n.tmt-canteen-commitment {\r\n    position: relative;\r\n\r\n    min-width: 0;\r\n    min-height: 300px;\r\n    padding: 35px 24px 30px;\r\n\r\n    overflow: hidden;\r\n\r\n    border-right: 1px solid var(--canteen-border);\r\n\r\n    text-align: center;\r\n\r\n    transition:\r\n        color 0.4s ease,\r\n        background-color 0.4s ease,\r\n        transform 0.4s ease;\r\n}\r\n\r\n.tmt-canteen-commitment:last-child {\r\n    border-right: 0;\r\n}\r\n\r\n.tmt-canteen-commitment::before {\r\n    content: var(--commitment-index);\r\n\r\n    position: absolute;\r\n    top: 15px;\r\n    right: 16px;\r\n\r\n    color: rgba(7, 27, 61, 0.07);\r\n\r\n    font-family: Georgia, serif;\r\n    font-size: 30px;\r\n}\r\n\r\n.tmt-canteen-commitment::after {\r\n    content: \"\";\r\n\r\n    position: absolute;\r\n    right: 0;\r\n    bottom: 0;\r\n    left: 0;\r\n\r\n    height: 4px;\r\n    background: var(--canteen-gold);\r\n\r\n    transform: scaleX(0);\r\n    transform-origin: left center;\r\n\r\n    transition: transform 0.4s ease;\r\n}\r\n\r\n.tmt-canteen-commitment:hover {\r\n    z-index: 3;\r\n\r\n    background: var(--canteen-cream);\r\n\r\n    box-shadow:\r\n        0 22px 55px rgba(7, 27, 61, 0.12);\r\n\r\n    transform: translateY(-8px);\r\n}\r\n\r\n.tmt-canteen-commitment:hover::after {\r\n    transform: scaleX(1);\r\n}\r\n\r\n.tmt-canteen-commitment__icon {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    width: 67px;\r\n    height: 67px;\r\n\r\n    margin: 0 auto 24px;\r\n\r\n    color: var(--canteen-gold);\r\n\r\n    background: rgba(201, 154, 66, 0.09);\r\n    border: 1px solid rgba(201, 154, 66, 0.25);\r\n    border-radius: 50%;\r\n\r\n    transition:\r\n        color 0.4s ease,\r\n        background-color 0.4s ease,\r\n        transform 0.4s ease;\r\n}\r\n\r\n.tmt-canteen-commitment:hover\r\n.tmt-canteen-commitment__icon {\r\n    color: var(--canteen-white);\r\n    background: var(--canteen-green);\r\n\r\n    transform: rotate(-6deg) scale(1.06);\r\n}\r\n\r\n.tmt-canteen-commitment__icon svg {\r\n    width: 31px;\r\n    height: 31px;\r\n\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.tmt-canteen-commitment h4 {\r\n    margin-bottom: 13px;\r\n\r\n    color: var(--canteen-green);\r\n\r\n    font-family: Georgia, \"Times New Roman\", serif;\r\n    font-size: 22px;\r\n    font-weight: 500;\r\n    line-height: 1.2;\r\n}\r\n\r\n.tmt-canteen-commitment p {\r\n    margin-bottom: 0;\r\n\r\n    color: var(--canteen-text);\r\n\r\n    font-family: \"Montserrat\", Arial, sans-serif;\r\n    font-size: 10px;\r\n    line-height: 1.7;\r\n}\r\n\r\n\/* =========================================================\r\nJOURN\u00c9E \u00c0 LA CANTINE\r\n========================================================= *\/\r\n\r\n.tmt-canteen-journey {\r\n    margin-bottom: clamp(105px, 10vw, 160px);\r\n}\r\n\r\n.tmt-canteen-journey__track {\r\n    display: grid;\r\n    grid-template-columns: repeat(5, minmax(0, 1fr));\r\n    gap: 15px;\r\n}\r\n\r\n.tmt-canteen-step {\r\n    position: relative;\r\n    min-width: 0;\r\n\r\n    background: var(--canteen-white);\r\n    border: 1px solid var(--canteen-border);\r\n\r\n    box-shadow:\r\n        0 16px 40px rgba(7, 27, 61, 0.07);\r\n\r\n    transition:\r\n        transform 0.42s ease,\r\n        box-shadow 0.42s ease,\r\n        border-color 0.42s ease;\r\n}\r\n\r\n.tmt-canteen-step:hover {\r\n    z-index: 3;\r\n\r\n    border-color: rgba(201, 154, 66, 0.45);\r\n\r\n    box-shadow:\r\n        0 30px 65px rgba(7, 27, 61, 0.14);\r\n\r\n    transform: translateY(-10px);\r\n}\r\n\r\n.tmt-canteen-step__image {\r\n    position: relative;\r\n    height: 250px;\r\n    overflow: hidden;\r\n}\r\n\r\n.tmt-canteen-step__image::after {\r\n    content: \"\";\r\n\r\n    position: absolute;\r\n    inset: 0;\r\n\r\n    background:\r\n        linear-gradient(\r\n            180deg,\r\n            transparent 45%,\r\n            rgba(7, 27, 61, 0.62)\r\n        );\r\n}\r\n\r\n.tmt-canteen-step__image img {\r\n    width: 100%;\r\n    height: 100%;\r\n    object-fit: cover;\r\n\r\n    transition:\r\n        transform 0.9s\r\n        cubic-bezier(0.22, 1, 0.36, 1);\r\n}\r\n\r\n.tmt-canteen-step:hover\r\n.tmt-canteen-step__image img {\r\n    transform: scale(1.08);\r\n}\r\n\r\n.tmt-canteen-step__image > span {\r\n    position: absolute;\r\n    right: 15px;\r\n    bottom: 15px;\r\n    z-index: 2;\r\n\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    width: 44px;\r\n    height: 44px;\r\n\r\n    color: var(--canteen-white);\r\n    background: var(--canteen-green);\r\n\r\n    border: 1px solid rgba(255, 255, 255, 0.5);\r\n    border-radius: 50%;\r\n\r\n    font-family: Georgia, serif;\r\n    font-size: 17px;\r\n}\r\n\r\n.tmt-canteen-step__content {\r\n    min-height: 205px;\r\n    padding: 25px 22px;\r\n}\r\n\r\n.tmt-canteen-step__content > span {\r\n    display: block;\r\n    margin-bottom: 7px;\r\n\r\n    color: var(--canteen-gold);\r\n\r\n    font-family: \"Montserrat\", Arial, sans-serif;\r\n    font-size: 8px;\r\n    font-weight: 700;\r\n    letter-spacing: 0.12em;\r\n    text-transform: uppercase;\r\n}\r\n\r\n.tmt-canteen-step__content h4 {\r\n    margin-bottom: 11px;\r\n\r\n    color: var(--canteen-green);\r\n\r\n    font-family: Georgia, \"Times New Roman\", serif;\r\n    font-size: 24px;\r\n    font-weight: 500;\r\n    line-height: 1.15;\r\n}\r\n\r\n.tmt-canteen-step__content p {\r\n    margin-bottom: 0;\r\n\r\n    color: var(--canteen-text);\r\n\r\n    font-family: \"Montserrat\", Arial, sans-serif;\r\n    font-size: 10px;\r\n    line-height: 1.65;\r\n}\r\n\r\n\/* =========================================================\r\nINFORMATIONS PRATIQUES\r\n========================================================= *\/\r\n\r\n.tmt-canteen-practical {\r\n    display: grid;\r\n    grid-template-columns:\r\n        minmax(0, 1.35fr)\r\n        minmax(330px, 0.65fr);\r\n\r\n    gap: 20px;\r\n\r\n    margin-bottom: 30px;\r\n}\r\n\r\n\/* CARTE DE PAIEMENT *\/\r\n\r\n.tmt-canteen-payment {\r\n    display: grid;\r\n    grid-template-columns: 280px minmax(0, 1fr);\r\n    align-items: center;\r\n    gap: 40px;\r\n\r\n    padding: clamp(35px, 4vw, 55px);\r\n\r\n    overflow: hidden;\r\n\r\n    background:\r\n        linear-gradient(\r\n            135deg,\r\n            #f4ecdc,\r\n            #fbf9f4\r\n        );\r\n\r\n    border: 1px solid rgba(201, 154, 66, 0.4);\r\n}\r\n\r\n.tmt-canteen-payment__card {\r\n    position: relative;\r\n\r\n    width: 260px;\r\n    height: 160px;\r\n\r\n    overflow: hidden;\r\n\r\n    background:\r\n        radial-gradient(\r\n            circle at 100% 0%,\r\n            rgba(201, 154, 66, 0.25),\r\n            transparent 42%\r\n        ),\r\n        linear-gradient(\r\n            145deg,\r\n            #174f38,\r\n            #0d3324\r\n        );\r\n\r\n    border: 1px solid rgba(230, 200, 121, 0.55);\r\n    border-radius: 14px;\r\n\r\n    box-shadow:\r\n        0 25px 55px rgba(7, 27, 61, 0.22);\r\n\r\n    transform: rotate(-4deg);\r\n\r\n    transition:\r\n        transform 0.55s\r\n        cubic-bezier(0.22, 1, 0.36, 1);\r\n}\r\n\r\n.tmt-canteen-payment:hover\r\n.tmt-canteen-payment__card {\r\n    transform: rotate(0) translateY(-6px);\r\n}\r\n\r\n.tmt-canteen-payment__chip {\r\n    position: absolute;\r\n    top: 40px;\r\n    left: 28px;\r\n\r\n    width: 42px;\r\n    height: 31px;\r\n\r\n    background:\r\n        linear-gradient(\r\n            135deg,\r\n            #efd47d,\r\n            #a97b20\r\n        );\r\n\r\n    border-radius: 5px;\r\n}\r\n\r\n.tmt-canteen-payment__contactless {\r\n    position: absolute;\r\n    top: 22px;\r\n    right: 25px;\r\n\r\n    color: var(--canteen-gold-light);\r\n\r\n    font-family: Arial, sans-serif;\r\n    font-size: 17px;\r\n    transform: rotate(90deg);\r\n}\r\n\r\n.tmt-canteen-payment__card img {\r\n    position: absolute;\r\n    right: 25px;\r\n    bottom: 29px;\r\n\r\n    width: 58px;\r\n    height: 58px;\r\n\r\n    object-fit: contain;\r\n\r\n    filter:\r\n        brightness(0)\r\n        invert(82%)\r\n        sepia(52%)\r\n        saturate(460%);\r\n}\r\n\r\n.tmt-canteen-payment__card > span {\r\n    position: absolute;\r\n    bottom: 23px;\r\n    left: 28px;\r\n\r\n    color: var(--canteen-gold-light);\r\n\r\n    font-family: \"Montserrat\", Arial, sans-serif;\r\n    font-size: 8px;\r\n    font-weight: 700;\r\n    letter-spacing: 0.1em;\r\n    text-transform: uppercase;\r\n}\r\n\r\n.tmt-canteen-payment__content > span,\r\n.tmt-canteen-price > div:last-child > span {\r\n    display: block;\r\n    margin-bottom: 8px;\r\n\r\n    color: var(--canteen-gold);\r\n\r\n    font-family: \"Montserrat\", Arial, sans-serif;\r\n    font-size: 8px;\r\n    font-weight: 700;\r\n    letter-spacing: 0.13em;\r\n    text-transform: uppercase;\r\n}\r\n\r\n.tmt-canteen-payment__content h3 {\r\n    margin-bottom: 14px;\r\n\r\n    color: var(--canteen-green);\r\n\r\n    font-family: Georgia, \"Times New Roman\", serif;\r\n    font-size: clamp(30px, 3vw, 46px);\r\n    font-weight: 500;\r\n}\r\n\r\n.tmt-canteen-payment__content p {\r\n    margin-bottom: 20px;\r\n\r\n    color: var(--canteen-text);\r\n\r\n    font-family: \"Montserrat\", Arial, sans-serif;\r\n    font-size: 12px;\r\n    line-height: 1.75;\r\n}\r\n\r\n.tmt-canteen-payment__features {\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    gap: 8px;\r\n}\r\n\r\n.tmt-canteen-payment__features span {\r\n    padding: 8px 11px;\r\n\r\n    color: var(--canteen-green);\r\n    background: rgba(18, 63, 44, 0.07);\r\n    border: 1px solid rgba(18, 63, 44, 0.13);\r\n\r\n    font-family: \"Montserrat\", Arial, sans-serif;\r\n    font-size: 8px;\r\n    font-weight: 700;\r\n    text-transform: uppercase;\r\n}\r\n\r\n\/* TARIF *\/\r\n\r\n.tmt-canteen-price {\r\n    display: flex;\r\n    flex-direction: column;\r\n    justify-content: center;\r\n    gap: 25px;\r\n\r\n    padding: clamp(35px, 4vw, 55px);\r\n\r\n    color: var(--canteen-white);\r\n\r\n    background:\r\n        radial-gradient(\r\n            circle at 100% 0%,\r\n            rgba(201, 154, 66, 0.20),\r\n            transparent 40%\r\n        ),\r\n        linear-gradient(\r\n            145deg,\r\n            var(--canteen-green-light),\r\n            var(--canteen-green)\r\n        );\r\n\r\n    box-shadow:\r\n        0 25px 65px rgba(7, 27, 61, 0.14);\r\n}\r\n\r\n.tmt-canteen-price__icon {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    width: 72px;\r\n    height: 72px;\r\n\r\n    color: var(--canteen-gold-light);\r\n\r\n    border: 1px solid rgba(230, 200, 121, 0.45);\r\n    border-radius: 50%;\r\n}\r\n\r\n.tmt-canteen-price__icon svg {\r\n    width: 34px;\r\n    height: 34px;\r\n\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.tmt-canteen-price h3 {\r\n    margin-bottom: 16px;\r\n}\r\n\r\n.tmt-canteen-price h3 strong {\r\n    display: block;\r\n\r\n    color: var(--canteen-gold-light);\r\n\r\n    font-family: Georgia, \"Times New Roman\", serif;\r\n    font-size: clamp(45px, 4.5vw, 70px);\r\n    font-weight: 500;\r\n    line-height: 1;\r\n}\r\n\r\n.tmt-canteen-price h3 small {\r\n    color: rgba(255, 255, 255, 0.7);\r\n\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.tmt-canteen-price p {\r\n    margin-bottom: 0;\r\n\r\n    color: rgba(255, 255, 255, 0.68);\r\n\r\n    font-family: \"Montserrat\", Arial, sans-serif;\r\n    font-size: 11px;\r\n    line-height: 1.7;\r\n}\r\n\r\n\/* =========================================================\r\nCONTACT\r\n========================================================= *\/\r\n\r\n.tmt-canteen-contact {\r\n    position: relative;\r\n\r\n    display: grid;\r\n    grid-template-columns:\r\n        85px\r\n        minmax(0, 1fr)\r\n        auto;\r\n\r\n    align-items: center;\r\n    gap: 30px;\r\n\r\n    padding: clamp(34px, 4vw, 58px);\r\n\r\n    overflow: hidden;\r\n\r\n    color: var(--canteen-white);\r\n\r\n    background:\r\n        radial-gradient(\r\n            circle at 80% 50%,\r\n            rgba(201, 154, 66, 0.13),\r\n            transparent 28%\r\n        ),\r\n        linear-gradient(\r\n            135deg,\r\n            #174e37,\r\n            #0d3425\r\n        );\r\n\r\n    border: 1px solid rgba(201, 154, 66, 0.55);\r\n\r\n    box-shadow:\r\n        0 28px 70px rgba(7, 27, 61, 0.16);\r\n}\r\n\r\n.tmt-canteen-contact::after {\r\n    content: \"TOMETAL\";\r\n\r\n    position: absolute;\r\n    right: 2%;\r\n    bottom: -55px;\r\n\r\n    color: rgba(255, 255, 255, 0.025);\r\n\r\n    font-family: Georgia, serif;\r\n    font-size: 150px;\r\n    line-height: 1;\r\n}\r\n\r\n.tmt-canteen-contact__icon {\r\n    position: relative;\r\n    z-index: 2;\r\n\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    width: 85px;\r\n    height: 85px;\r\n\r\n    color: var(--canteen-gold-light);\r\n\r\n    border: 1px solid rgba(230, 200, 121, 0.5);\r\n    border-radius: 50%;\r\n}\r\n\r\n.tmt-canteen-contact__icon svg {\r\n    width: 36px;\r\n    height: 36px;\r\n\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.tmt-canteen-contact__content,\r\n.tmt-canteen-contact__actions {\r\n    position: relative;\r\n    z-index: 2;\r\n}\r\n\r\n.tmt-canteen-contact__content > span {\r\n    display: block;\r\n    margin-bottom: 7px;\r\n\r\n    color: var(--canteen-gold-light);\r\n\r\n    font-family: \"Montserrat\", Arial, sans-serif;\r\n    font-size: 8px;\r\n    font-weight: 700;\r\n    letter-spacing: 0.14em;\r\n    text-transform: uppercase;\r\n}\r\n\r\n.tmt-canteen-contact__content h3 {\r\n    margin-bottom: 11px;\r\n\r\n    color: var(--canteen-white);\r\n\r\n    font-family: Georgia, \"Times New Roman\", serif;\r\n    font-size: clamp(30px, 3.2vw, 48px);\r\n    font-weight: 500;\r\n}\r\n\r\n.tmt-canteen-contact__content p {\r\n    max-width: 730px;\r\n    margin-bottom: 0;\r\n\r\n    color: rgba(255, 255, 255, 0.66);\r\n\r\n    font-family: \"Montserrat\", Arial, sans-serif;\r\n    font-size: 11px;\r\n    line-height: 1.7;\r\n}\r\n\r\n.tmt-canteen-contact__actions {\r\n    min-width: 255px;\r\n    text-align: right;\r\n}\r\n\r\n.tmt-canteen-contact__button {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    gap: 12px;\r\n\r\n    min-height: 54px;\r\n    padding: 0 23px;\r\n\r\n    color: var(--canteen-green);\r\n    background: var(--canteen-gold-light);\r\n\r\n    border: 1px solid var(--canteen-gold-light);\r\n\r\n    font-family: \"Montserrat\", Arial, sans-serif;\r\n    font-size: 9px;\r\n    font-weight: 700;\r\n    letter-spacing: 0.06em;\r\n    text-decoration: none;\r\n    text-transform: uppercase;\r\n\r\n    transition:\r\n        color 0.35s ease,\r\n        background-color 0.35s ease,\r\n        border-color 0.35s ease,\r\n        transform 0.35s ease,\r\n        box-shadow 0.35s ease;\r\n}\r\n\r\n.tmt-canteen-contact__button:hover {\r\n    color: var(--canteen-white);\r\n    background: var(--canteen-navy);\r\n    border-color: var(--canteen-navy);\r\n\r\n    box-shadow:\r\n        0 16px 35px rgba(0, 0, 0, 0.22);\r\n\r\n    transform: translateY(-4px);\r\n}\r\n\r\n.tmt-canteen-contact__button svg {\r\n    width: 17px;\r\n    height: 17px;\r\n\r\n    fill: none;\r\n    stroke: currentColor;\r\n    stroke-width: 1.8;\r\n    stroke-linecap: round;\r\n    stroke-linejoin: round;\r\n}\r\n\r\n.tmt-canteen-contact__actions p {\r\n    margin: 16px 0 0;\r\n\r\n    color: var(--canteen-gold-light);\r\n\r\n    font-family: Georgia, \"Times New Roman\", serif;\r\n    font-size: 18px;\r\n    font-style: italic;\r\n    line-height: 1.4;\r\n}\r\n\r\n.tmt-canteen-contact__actions p strong {\r\n    display: block;\r\n    font-weight: 500;\r\n}\r\n\r\n\/* =========================================================\r\nANIMATIONS D\u2019APPARITION\r\n========================================================= *\/\r\n\r\n.tmt-canteen-reveal {\r\n    opacity: 0;\r\n    transform: translateY(42px);\r\n\r\n    transition:\r\n        opacity 0.9s ease,\r\n        transform 0.9s\r\n        cubic-bezier(0.22, 1, 0.36, 1);\r\n}\r\n\r\n.tmt-canteen-reveal.is-visible {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n}\r\n\r\n\/* =========================================================\r\nRESPONSIVE\r\n========================================================= *\/\r\n\r\n@media screen and (max-width: 1250px) {\r\n\r\n    .tmt-canteen-commitments__grid {\r\n        grid-template-columns: repeat(3, minmax(0, 1fr));\r\n    }\r\n\r\n    .tmt-canteen-commitment {\r\n        border-bottom: 1px solid var(--canteen-border);\r\n    }\r\n\r\n    .tmt-canteen-journey__track {\r\n        grid-template-columns:\r\n            repeat(3, minmax(0, 1fr));\r\n    }\r\n}\r\n\r\n@media screen and (max-width: 1050px) {\r\n\r\n    .tmt-canteen-hero {\r\n        grid-template-columns: 1fr;\r\n    }\r\n\r\n    .tmt-canteen-hero__visual {\r\n        min-height: 600px;\r\n    }\r\n\r\n    .tmt-canteen-practical {\r\n        grid-template-columns: 1fr;\r\n    }\r\n\r\n    .tmt-canteen-contact {\r\n        grid-template-columns: 75px minmax(0, 1fr);\r\n    }\r\n\r\n    .tmt-canteen-contact__actions {\r\n        grid-column: 1 \/ -1;\r\n\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: space-between;\r\n        gap: 25px;\r\n\r\n        text-align: left;\r\n    }\r\n\r\n    .tmt-canteen-contact__actions p {\r\n        margin: 0;\r\n        text-align: right;\r\n    }\r\n}\r\n\r\n@media screen and (max-width: 800px) {\r\n\r\n    .tmt-canteen-commitments__grid {\r\n        grid-template-columns: repeat(2, minmax(0, 1fr));\r\n    }\r\n\r\n    .tmt-canteen-journey__track {\r\n        grid-template-columns: repeat(2, minmax(0, 1fr));\r\n    }\r\n\r\n    .tmt-canteen-payment {\r\n        grid-template-columns: 1fr;\r\n    }\r\n\r\n    .tmt-canteen-payment__card {\r\n        margin: 0 auto;\r\n    }\r\n}\r\n\r\n@media screen and (max-width: 767px) {\r\n\r\n    .tmt-canteen {\r\n        padding-top: 70px;\r\n        padding-bottom: 80px;\r\n    }\r\n\r\n    .tmt-canteen__wrapper {\r\n        width: calc(100% - 28px);\r\n    }\r\n\r\n    .tmt-canteen-hero__content {\r\n        padding: 42px 23px;\r\n    }\r\n\r\n    .tmt-canteen-hero__title {\r\n        font-size: clamp(51px, 15vw, 72px);\r\n    }\r\n\r\n    .tmt-canteen-hero__visual {\r\n        min-height: 470px;\r\n    }\r\n\r\n    .tmt-canteen-hero__seal {\r\n        right: 20px;\r\n        bottom: 25px;\r\n\r\n        width: 145px;\r\n        height: 145px;\r\n        padding: 20px;\r\n    }\r\n\r\n    .tmt-canteen-hero__seal strong {\r\n        font-size: 11px;\r\n    }\r\n\r\n    .tmt-canteen-hero__stat {\r\n        top: 20px;\r\n        left: 20px;\r\n    }\r\n\r\n    .tmt-canteen-heading {\r\n        grid-template-columns: 1fr;\r\n        gap: 13px;\r\n    }\r\n\r\n    .tmt-canteen-heading__line {\r\n        width: 90px;\r\n        margin: 0 auto;\r\n    }\r\n\r\n    .tmt-canteen-commitments__grid,\r\n    .tmt-canteen-journey__track {\r\n        grid-template-columns: 1fr;\r\n    }\r\n\r\n    .tmt-canteen-commitment {\r\n        min-height: auto;\r\n        padding: 35px 25px;\r\n    }\r\n\r\n    .tmt-canteen-step__image {\r\n        height: 285px;\r\n    }\r\n\r\n    .tmt-canteen-step__content {\r\n        min-height: auto;\r\n    }\r\n\r\n    .tmt-canteen-payment {\r\n        padding: 38px 22px;\r\n    }\r\n\r\n    .tmt-canteen-payment__card {\r\n        width: min(100%, 280px);\r\n    }\r\n\r\n    .tmt-canteen-price {\r\n        padding: 40px 25px;\r\n    }\r\n\r\n    .tmt-canteen-contact {\r\n        grid-template-columns: 1fr;\r\n        padding: 40px 24px;\r\n    }\r\n\r\n    .tmt-canteen-contact__actions {\r\n        display: block;\r\n        min-width: 0;\r\n    }\r\n\r\n    .tmt-canteen-contact__button {\r\n        width: 100%;\r\n    }\r\n\r\n    .tmt-canteen-contact__actions p {\r\n        margin-top: 20px;\r\n        text-align: left;\r\n    }\r\n}\r\n\r\n\/* =========================================================\r\nACCESSIBILIT\u00c9\r\n========================================================= *\/\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n\r\n    .tmt-canteen-reveal {\r\n        opacity: 1;\r\n        transform: none;\r\n        transition: none;\r\n    }\r\n\r\n    .tmt-canteen-hero__seal {\r\n        animation: none;\r\n    }\r\n\r\n    .tmt-canteen-hero__image img,\r\n    .tmt-canteen-commitment,\r\n    .tmt-canteen-commitment::after,\r\n    .tmt-canteen-step,\r\n    .tmt-canteen-step__image img,\r\n    .tmt-canteen-payment__card {\r\n        transition: none;\r\n    }\r\n}\r\n\r\n\/* =========================================================\r\nELEMENTOR ET ANCRES\r\n========================================================= *\/\r\n\r\n.elementor-widget-html:has(.tmt-canteen),\r\n.elementor-widget-html:has(.tmt-canteen)\r\n> .elementor-widget-container {\r\n    width: 100% !important;\r\n    max-width: none !important;\r\n\r\n    margin: 0 !important;\r\n    padding: 0 !important;\r\n}\r\n\r\n#cantine,\r\n#contact-vie-scolaire {\r\n    scroll-margin-top: 110px;\r\n}\r\n\r\n@media screen and (max-width: 1180px) {\r\n\r\n    #cantine,\r\n    #contact-vie-scolaire {\r\n        scroll-margin-top: 88px;\r\n    }\r\n}\r\n<\/style>\r\n\r\n<script>\r\n(function () {\r\n    \"use strict\";\r\n\r\n    function initialiseTometalCanteen() {\r\n\r\n        const sections =\r\n            document.querySelectorAll(\r\n                \"[data-tmt-canteen]\"\r\n            );\r\n\r\n        if (!sections.length) {\r\n            return;\r\n        }\r\n\r\n        sections.forEach(function (section) {\r\n\r\n            if (\r\n                section.dataset.canteenReady ===\r\n                \"true\"\r\n            ) {\r\n                return;\r\n            }\r\n\r\n            section.dataset.canteenReady = \"true\";\r\n\r\n            const elements =\r\n                Array.from(\r\n                    section.querySelectorAll(\r\n                        \".tmt-canteen-reveal\"\r\n                    )\r\n                );\r\n\r\n            if (\r\n                window.matchMedia(\r\n                    \"(prefers-reduced-motion: reduce)\"\r\n                ).matches\r\n            ) {\r\n                elements.forEach(function (element) {\r\n                    element.classList.add(\"is-visible\");\r\n                });\r\n\r\n                return;\r\n            }\r\n\r\n            if (!(\"IntersectionObserver\" in window)) {\r\n\r\n                elements.forEach(function (element) {\r\n                    element.classList.add(\"is-visible\");\r\n                });\r\n\r\n                return;\r\n            }\r\n\r\n            const observer =\r\n                new IntersectionObserver(\r\n                    function (entries) {\r\n\r\n                        entries.forEach(function (entry) {\r\n\r\n                            if (!entry.isIntersecting) {\r\n                                return;\r\n                            }\r\n\r\n                            entry.target.classList.add(\r\n                                \"is-visible\"\r\n                            );\r\n\r\n                            observer.unobserve(\r\n                                entry.target\r\n                            );\r\n\r\n                        });\r\n\r\n                    },\r\n                    {\r\n                        threshold: 0.10,\r\n                        rootMargin:\r\n                            \"0px 0px -50px 0px\"\r\n                    }\r\n                );\r\n\r\n            elements.forEach(function (\r\n                element,\r\n                index\r\n            ) {\r\n\r\n                element.style.transitionDelay =\r\n                    Math.min(\r\n                        (index % 6) * 80,\r\n                        400\r\n                    ) + \"ms\";\r\n\r\n                observer.observe(element);\r\n\r\n            });\r\n\r\n        });\r\n\r\n    }\r\n\r\n    if (document.readyState === \"loading\") {\r\n\r\n        document.addEventListener(\r\n            \"DOMContentLoaded\",\r\n            initialiseTometalCanteen\r\n        );\r\n\r\n    } else {\r\n\r\n        initialiseTometalCanteen();\r\n\r\n    }\r\n\r\n    window.addEventListener(\r\n        \"load\",\r\n        initialiseTometalCanteen\r\n    );\r\n\r\n})();\r\n<\/script>\r\n<!-- =========================================================\r\nCORRECTION COULEURS \u2014 CANTINE INSTITUT TOMETAL\r\nBLEU MARINE + DOR\u00c9\r\n\u00c0 COLLER TOUT EN BAS DU CODE ACTUEL\r\nAPR\u00c8S LE DERNIER <\/script>\r\n========================================================= -->\r\n\r\n<style>\r\n\/* =========================================================\r\n1. NOUVELLE PALETTE OFFICIELLE TOMETAL\r\n========================================================= *\/\r\n\r\n.tmt-canteen {\r\n    --canteen-navy: #071b3d !important;\r\n    --canteen-navy-soft: #123765 !important;\r\n\r\n    \/*\r\n    Les anciens noms de variables sont conserv\u00e9s pour que\r\n    tout le code existant continue de fonctionner.\r\n    Leurs valeurs deviennent cependant bleues.\r\n    *\/\r\n\r\n    --canteen-green: #071b3d !important;\r\n    --canteen-green-light: #123765 !important;\r\n\r\n    --canteen-gold: #c99a42 !important;\r\n    --canteen-gold-light: #e6c879 !important;\r\n}\r\n\r\n\/* =========================================================\r\n2. D\u00c9CORATION DE FOND\r\n========================================================= *\/\r\n\r\n.tmt-canteen__orb--two {\r\n    background: rgba(7, 27, 61, 0.035) !important;\r\n}\r\n\r\n\/* =========================================================\r\n3. LETTRE D\u00c9CORATIVE DU HERO\r\n========================================================= *\/\r\n\r\n.tmt-canteen-hero__content::after {\r\n    color: rgba(7, 27, 61, 0.035) !important;\r\n}\r\n\r\n\/* =========================================================\r\n4. IDENTIT\u00c9 ET TITRES DU HERO\r\n========================================================= *\/\r\n\r\n.tmt-canteen-hero__brand strong,\r\n.tmt-canteen-hero__title,\r\n.tmt-canteen-hero__slogan strong,\r\n.tmt-canteen-hero__content h3 {\r\n    color: #071b3d !important;\r\n}\r\n\r\n\/* =========================================================\r\n5. FOND DE L\u2019IMAGE DU HERO\r\n========================================================= *\/\r\n\r\n.tmt-canteen-hero__visual {\r\n    background: #071b3d !important;\r\n}\r\n\r\n\/* =========================================================\r\n6. MACARON SUR L\u2019IMAGE\r\n========================================================= *\/\r\n\r\n.tmt-canteen-hero__seal {\r\n    color: #e6c879 !important;\r\n\r\n    background:\r\n        radial-gradient(\r\n            circle at 30% 20%,\r\n            rgba(255, 255, 255, 0.08),\r\n            transparent 34%\r\n        ),\r\n        linear-gradient(\r\n            145deg,\r\n            rgba(18, 55, 101, 0.97),\r\n            rgba(7, 27, 61, 0.98)\r\n        ) !important;\r\n\r\n    border-color: #c99a42 !important;\r\n\r\n    box-shadow:\r\n        0 20px 55px rgba(7, 27, 61, 0.42),\r\n        inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;\r\n}\r\n\r\n\/* =========================================================\r\n7. TITRES DES SOUS-SECTIONS\r\n========================================================= *\/\r\n\r\n.tmt-canteen-heading h3 {\r\n    color: #071b3d !important;\r\n}\r\n\r\n\/* =========================================================\r\n8. CARTES DES ENGAGEMENTS\r\n========================================================= *\/\r\n\r\n.tmt-canteen-commitment h4 {\r\n    color: #071b3d !important;\r\n}\r\n\r\n.tmt-canteen-commitment:hover\r\n.tmt-canteen-commitment__icon {\r\n    color: #ffffff !important;\r\n    background: #071b3d !important;\r\n}\r\n\r\n\/* =========================================================\r\n9. \u00c9TAPES DE LA JOURN\u00c9E \u00c0 LA CANTINE\r\n========================================================= *\/\r\n\r\n.tmt-canteen-step__image > span {\r\n    background:\r\n        linear-gradient(\r\n            145deg,\r\n            #123765,\r\n            #071b3d\r\n        ) !important;\r\n}\r\n\r\n.tmt-canteen-step__content h4 {\r\n    color: #071b3d !important;\r\n}\r\n\r\n\/* =========================================================\r\n10. CARTE CANTINE DOR\u00c9E PREMIUM\r\n========================================================= *\/\r\n\r\n.tmt-canteen-payment__card {\r\n    position: relative !important;\r\n\r\n    background:\r\n        radial-gradient(\r\n            circle at 14% 12%,\r\n            rgba(255, 255, 255, 0.62),\r\n            transparent 27%\r\n        ),\r\n        radial-gradient(\r\n            circle at 88% 15%,\r\n            rgba(255, 255, 255, 0.22),\r\n            transparent 30%\r\n        ),\r\n        linear-gradient(\r\n            135deg,\r\n            #fff2bd 0%,\r\n            #ead184 19%,\r\n            #c99a42 43%,\r\n            #ad7c24 70%,\r\n            #76500f 100%\r\n        ) !important;\r\n\r\n    border:\r\n        1px solid\r\n        rgba(255, 245, 200, 0.86) !important;\r\n\r\n    border-radius: 16px !important;\r\n\r\n    box-shadow:\r\n        0 25px 58px rgba(7, 27, 61, 0.28),\r\n        inset 0 1px 2px rgba(255, 255, 255, 0.65),\r\n        inset 0 -3px 9px rgba(91, 57, 5, 0.23) !important;\r\n}\r\n\r\n\/* Reflet m\u00e9tallique *\/\r\n\r\n.tmt-canteen-payment__card::before {\r\n    content: \"\";\r\n\r\n    position: absolute;\r\n    inset: 0;\r\n    z-index: 1;\r\n\r\n    background:\r\n        linear-gradient(\r\n            112deg,\r\n            transparent 9%,\r\n            rgba(255, 255, 255, 0.08) 23%,\r\n            rgba(255, 255, 255, 0.48) 34%,\r\n            rgba(255, 255, 255, 0.05) 47%,\r\n            transparent 61%\r\n        );\r\n\r\n    pointer-events: none;\r\n\r\n    transform: translateX(-65%);\r\n\r\n    transition:\r\n        transform 0.9s\r\n        cubic-bezier(0.22, 1, 0.36, 1);\r\n}\r\n\r\n.tmt-canteen-payment:hover\r\n.tmt-canteen-payment__card::before {\r\n    transform: translateX(65%);\r\n}\r\n\r\n.tmt-canteen-payment:hover\r\n.tmt-canteen-payment__card {\r\n    transform: rotate(0deg) translateY(-7px) !important;\r\n\r\n    box-shadow:\r\n        0 34px 72px rgba(7, 27, 61, 0.34),\r\n        inset 0 1px 2px rgba(255, 255, 255, 0.72),\r\n        inset 0 -3px 10px rgba(91, 57, 5, 0.25) !important;\r\n}\r\n\r\n\/* =========================================================\r\n11. PUCE DE LA CARTE\r\n========================================================= *\/\r\n\r\n.tmt-canteen-payment__chip {\r\n    z-index: 2;\r\n\r\n    background:\r\n        linear-gradient(\r\n            135deg,\r\n            #fff4bd,\r\n            #d5a538 48%,\r\n            #8c6313\r\n        ) !important;\r\n\r\n    border:\r\n        1px solid\r\n        rgba(109, 70, 8, 0.38);\r\n\r\n    box-shadow:\r\n        inset 0 1px 1px rgba(255, 255, 255, 0.55),\r\n        0 4px 10px rgba(84, 53, 5, 0.20);\r\n}\r\n\r\n\/* Petites lignes de la puce *\/\r\n\r\n.tmt-canteen-payment__chip::before,\r\n.tmt-canteen-payment__chip::after {\r\n    content: \"\";\r\n\r\n    position: absolute;\r\n\r\n    background: rgba(105, 69, 8, 0.34);\r\n}\r\n\r\n.tmt-canteen-payment__chip::before {\r\n    top: 0;\r\n    bottom: 0;\r\n    left: 50%;\r\n\r\n    width: 1px;\r\n}\r\n\r\n.tmt-canteen-payment__chip::after {\r\n    top: 50%;\r\n    right: 0;\r\n    left: 0;\r\n\r\n    height: 1px;\r\n}\r\n\r\n\/* =========================================================\r\n12. \u00c9L\u00c9MENTS DE LA CARTE DOR\u00c9E\r\n========================================================= *\/\r\n\r\n.tmt-canteen-payment__contactless {\r\n    z-index: 2;\r\n\r\n    color: #071b3d !important;\r\n\r\n    opacity: 0.82;\r\n}\r\n\r\n.tmt-canteen-payment__card img {\r\n    z-index: 2;\r\n\r\n    \/*\r\n    Le logo devient bleu marine sur la carte dor\u00e9e.\r\n    *\/\r\n\r\n    filter:\r\n        brightness(0)\r\n        saturate(100%)\r\n        invert(10%)\r\n        sepia(42%)\r\n        saturate(1805%)\r\n        hue-rotate(184deg)\r\n        brightness(86%)\r\n        contrast(106%) !important;\r\n}\r\n\r\n.tmt-canteen-payment__card > span {\r\n    z-index: 2;\r\n\r\n    color: #071b3d !important;\r\n\r\n    text-shadow:\r\n        0 1px 0 rgba(255, 255, 255, 0.25);\r\n}\r\n\r\n\/* =========================================================\r\n13. TEXTE DU PAIEMENT\r\n========================================================= *\/\r\n\r\n.tmt-canteen-payment__content h3 {\r\n    color: #071b3d !important;\r\n}\r\n\r\n.tmt-canteen-payment__features span {\r\n    color: #071b3d !important;\r\n\r\n    background:\r\n        rgba(7, 27, 61, 0.055) !important;\r\n\r\n    border-color:\r\n        rgba(7, 27, 61, 0.14) !important;\r\n}\r\n\r\n\/* =========================================================\r\n14. CARTE DU TARIF\r\n========================================================= *\/\r\n\r\n.tmt-canteen-price {\r\n    background:\r\n        radial-gradient(\r\n            circle at 100% 0%,\r\n            rgba(201, 154, 66, 0.23),\r\n            transparent 40%\r\n        ),\r\n        radial-gradient(\r\n            circle at 5% 90%,\r\n            rgba(255, 255, 255, 0.05),\r\n            transparent 28%\r\n        ),\r\n        linear-gradient(\r\n            145deg,\r\n            #123765 0%,\r\n            #071b3d 100%\r\n        ) !important;\r\n\r\n    box-shadow:\r\n        0 28px 68px rgba(7, 27, 61, 0.22) !important;\r\n}\r\n\r\n\/* =========================================================\r\n15. BLOC DE CONTACT\r\n========================================================= *\/\r\n\r\n.tmt-canteen-contact {\r\n    background:\r\n        radial-gradient(\r\n            circle at 80% 50%,\r\n            rgba(201, 154, 66, 0.16),\r\n            transparent 30%\r\n        ),\r\n        radial-gradient(\r\n            circle at 0% 100%,\r\n            rgba(255, 255, 255, 0.05),\r\n            transparent 28%\r\n        ),\r\n        linear-gradient(\r\n            135deg,\r\n            #123765 0%,\r\n            #071b3d 100%\r\n        ) !important;\r\n\r\n    border-color:\r\n        rgba(201, 154, 66, 0.60) !important;\r\n\r\n    box-shadow:\r\n        0 30px 75px rgba(7, 27, 61, 0.22) !important;\r\n}\r\n\r\n\/* =========================================================\r\n16. BOUTON DU CONTACT\r\n========================================================= *\/\r\n\r\n.tmt-canteen-contact__button {\r\n    color: #071b3d !important;\r\n\r\n    background:\r\n        linear-gradient(\r\n            135deg,\r\n            #efd68b,\r\n            #c99a42\r\n        ) !important;\r\n\r\n    border-color: #c99a42 !important;\r\n\r\n    box-shadow:\r\n        0 12px 28px rgba(201, 154, 66, 0.20);\r\n}\r\n\r\n.tmt-canteen-contact__button:hover {\r\n    color: #ffffff !important;\r\n\r\n    background: #071b3d !important;\r\n    border-color: rgba(255, 255, 255, 0.35) !important;\r\n\r\n    box-shadow:\r\n        0 18px 38px rgba(0, 0, 0, 0.28) !important;\r\n}\r\n\r\n\/* =========================================================\r\n17. PETITES CORRECTIONS D\u2019HARMONIE\r\n========================================================= *\/\r\n\r\n.tmt-canteen-payment {\r\n    background:\r\n        linear-gradient(\r\n            135deg,\r\n            #f5efe3 0%,\r\n            #fbfaf7 100%\r\n        ) !important;\r\n}\r\n\r\n.tmt-canteen-payment__features span:hover {\r\n    color: #ffffff !important;\r\n    background: #071b3d !important;\r\n    border-color: #071b3d !important;\r\n}\r\n\r\n\/* =========================================================\r\n18. MOBILE\r\n========================================================= *\/\r\n\r\n@media screen and (max-width: 767px) {\r\n\r\n    .tmt-canteen-payment__card {\r\n        transform: rotate(-2deg);\r\n    }\r\n\r\n    .tmt-canteen-payment:hover\r\n    .tmt-canteen-payment__card {\r\n        transform: rotate(0deg) translateY(-4px) !important;\r\n    }\r\n}\r\n<\/style>\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-9aedd89 e-con-full e-flex e-con e-parent\" data-id=\"9aedd89\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-144fb83 elementor-widget elementor-widget-html\" data-id=\"144fb83\" 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 TRANSPORT SCOLAIRE\r\nDESIGN PREMIUM SANS LOGO\r\nRESPONSIVE DESKTOP \/ TABLETTE \/ MOBILE\r\nANCRE : #transport-scolaire\r\n========================================================= -->\r\n\r\n<section id=\"transport-scolaire\" class=\"tt-transport\">\r\n\r\n<style>\r\n\r\n\/* =========================================================\r\nVARIABLES\r\n========================================================= *\/\r\n\r\n.tt-transport{\r\n    --navy:#071B3D;\r\n    --navy2:#0C2D57;\r\n    --gold:#C99A42;\r\n    --gold2:#E5BC60;\r\n    --cream:#F6F1E7;\r\n    --ivory:#FCFAF6;\r\n    --white:#FFFFFF;\r\n    --text:#657184;\r\n    --border:rgba(7,27,61,.11);\r\n\r\n    position:relative;\r\n\r\n    width:100vw;\r\n    max-width:100vw;\r\n\r\n    left:50%;\r\n    margin-left:-50vw;\r\n\r\n    overflow:hidden;\r\n\r\n    background:#FFFFFF;\r\n    color:var(--navy);\r\n\r\n    font-family:\r\n        Montserrat,\r\n        Arial,\r\n        sans-serif;\r\n}\r\n\r\n.tt-transport,\r\n.tt-transport *{\r\n    box-sizing:border-box;\r\n}\r\n\r\n.tt-transport h1,\r\n.tt-transport h2,\r\n.tt-transport h3,\r\n.tt-transport h4,\r\n.tt-transport p{\r\n    margin-top:0;\r\n}\r\n\r\n.tt-wrap{\r\n    width:min(\r\n        1480px,\r\n        calc(100% - clamp(30px,6vw,105px))\r\n    );\r\n\r\n    margin-left:auto;\r\n    margin-right:auto;\r\n}\r\n\r\n\r\n\/* =========================================================\r\nANCRES \/ REDIRECTION RUBRIQUE\r\n========================================================= *\/\r\n\r\nhtml{\r\n    scroll-behavior:smooth;\r\n}\r\n\r\n#transport-scolaire,\r\n#inscription-transport{\r\n    scroll-margin-top:110px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\nHERO\r\n========================================================= *\/\r\n\r\n.tt-hero{\r\n    display:grid;\r\n\r\n    grid-template-columns:\r\n        .72fr\r\n        1.28fr;\r\n\r\n    min-height:590px;\r\n\r\n    background:var(--ivory);\r\n}\r\n\r\n\r\n.tt-hero-copy{\r\n    padding:\r\n        clamp(60px,7vw,110px)\r\n        clamp(35px,5vw,75px);\r\n\r\n    display:flex;\r\n    flex-direction:column;\r\n    justify-content:center;\r\n}\r\n\r\n\r\n.tt-kicker{\r\n    display:flex;\r\n\r\n    gap:14px;\r\n\r\n    align-items:center;\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:700;\r\n\r\n    letter-spacing:.16em;\r\n\r\n    text-transform:uppercase;\r\n}\r\n\r\n\r\n.tt-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.tt-hero h1{\r\n    margin:0;\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(58px,6vw,100px);\r\n\r\n    font-weight:400;\r\n\r\n    line-height:.92;\r\n\r\n    letter-spacing:-.05em;\r\n}\r\n\r\n\r\n.tt-hero h1 span{\r\n    display:block;\r\n\r\n    color:var(--gold);\r\n}\r\n\r\n\r\n.tt-hero-line{\r\n    width:68px;\r\n    height:2px;\r\n\r\n    margin:\r\n        26px 0\r\n        22px;\r\n\r\n    background:var(--gold);\r\n}\r\n\r\n\r\n.tt-hero-copy strong{\r\n    margin-bottom:13px;\r\n\r\n    color:var(--navy);\r\n\r\n    font-size:11px;\r\n    font-weight:700;\r\n\r\n    letter-spacing:.07em;\r\n\r\n    text-transform:uppercase;\r\n}\r\n\r\n\r\n.tt-hero-copy p{\r\n    max-width:490px;\r\n\r\n    margin:0;\r\n\r\n    color:var(--text);\r\n\r\n    font-size:11px;\r\n\r\n    line-height:1.85;\r\n}\r\n\r\n\r\n.tt-hero-photo{\r\n    min-height:590px;\r\n\r\n    overflow:hidden;\r\n\r\n    background:#ECE8DF;\r\n}\r\n\r\n\r\n.tt-hero-photo 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;\r\n\r\n    transition:\r\n        transform 1s cubic-bezier(.16,1,.3,1);\r\n}\r\n\r\n\r\n.tt-hero-photo:hover img{\r\n    transform:scale(1.025);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n4 ENGAGEMENTS\r\n========================================================= *\/\r\n\r\n.tt-values-wrap{\r\n    padding:\r\n        0 0\r\n        45px;\r\n\r\n    background:#FFFFFF;\r\n}\r\n\r\n\r\n.tt-values{\r\n    display:grid;\r\n\r\n    grid-template-columns:\r\n        repeat(4,1fr);\r\n\r\n    margin-top:-1px;\r\n\r\n    border:\r\n        1px solid\r\n        rgba(201,154,66,.24);\r\n\r\n    background:#FFFFFF;\r\n}\r\n\r\n\r\n.tt-value{\r\n    min-height:300px;\r\n\r\n    padding:\r\n        35px\r\n        32px;\r\n\r\n    text-align:center;\r\n\r\n    background:#FFFFFF;\r\n\r\n    transition:\r\n        transform .35s ease,\r\n        box-shadow .35s ease,\r\n        background .35s ease;\r\n}\r\n\r\n\r\n.tt-value + .tt-value{\r\n    border-left:\r\n        1px solid\r\n        rgba(201,154,66,.24);\r\n}\r\n\r\n\r\n.tt-value:hover{\r\n    position:relative;\r\n    z-index:2;\r\n\r\n    transform:translateY(-5px);\r\n\r\n    background:#FFFEFC;\r\n\r\n    box-shadow:\r\n        0 20px 45px\r\n        rgba(7,27,61,.07);\r\n}\r\n\r\n\r\n.tt-value-icon{\r\n    width:58px;\r\n    height:58px;\r\n\r\n    margin:\r\n        0 auto\r\n        22px;\r\n\r\n    display:grid;\r\n    place-items:center;\r\n\r\n    border-radius:50%;\r\n\r\n    background:\r\n        linear-gradient(\r\n            145deg,\r\n            #D2A13B,\r\n            #E8BF60\r\n        );\r\n\r\n    color:#FFFFFF;\r\n\r\n    font-size:24px;\r\n}\r\n\r\n\r\n.tt-value small{\r\n    display:block;\r\n\r\n    color:var(--gold);\r\n\r\n    font-size:8px;\r\n    font-weight:700;\r\n\r\n    letter-spacing:.12em;\r\n\r\n    text-transform:uppercase;\r\n}\r\n\r\n\r\n.tt-value h3{\r\n    margin:\r\n        10px 0\r\n        14px;\r\n\r\n    color:var(--navy);\r\n\r\n    font-family:\r\n        Georgia,\r\n        serif;\r\n\r\n    font-size:28px;\r\n    font-weight:400;\r\n\r\n    line-height:1.05;\r\n}\r\n\r\n\r\n.tt-value p{\r\n    max-width:250px;\r\n\r\n    margin:\r\n        0 auto;\r\n\r\n    color:var(--text);\r\n\r\n    font-size:9px;\r\n\r\n    line-height:1.75;\r\n}\r\n\r\n\r\n\/* =========================================================\r\nAXES + PHOTO\r\n========================================================= *\/\r\n\r\n.tt-routes-section{\r\n    padding:\r\n        35px 0\r\n        55px;\r\n\r\n    background:var(--ivory);\r\n}\r\n\r\n\r\n.tt-routes-layout{\r\n    display:grid;\r\n\r\n    grid-template-columns:\r\n        1.05fr\r\n        .95fr;\r\n\r\n    overflow:hidden;\r\n\r\n    border:\r\n        1px solid\r\n        rgba(201,154,66,.25);\r\n\r\n    background:#FFFFFF;\r\n\r\n    box-shadow:\r\n        0 20px 55px\r\n        rgba(7,27,61,.045);\r\n}\r\n\r\n\r\n.tt-routes-content{\r\n    padding:\r\n        clamp(35px,4vw,60px);\r\n}\r\n\r\n\r\n.tt-section-label{\r\n    display:block;\r\n\r\n    margin-bottom:14px;\r\n\r\n    color:var(--gold);\r\n\r\n    font-size:9px;\r\n    font-weight:700;\r\n\r\n    letter-spacing:.15em;\r\n\r\n    text-transform:uppercase;\r\n}\r\n\r\n\r\n.tt-routes-content h2,\r\n.tt-process h2,\r\n.tt-contact h2{\r\n    margin:0;\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(42px,4.5vw,68px);\r\n\r\n    font-weight:400;\r\n\r\n    line-height:.95;\r\n\r\n    letter-spacing:-.025em;\r\n}\r\n\r\n\r\n.tt-routes-content > p{\r\n    max-width:440px;\r\n\r\n    margin:\r\n        22px 0\r\n        32px;\r\n\r\n    color:var(--text);\r\n\r\n    font-size:10px;\r\n\r\n    line-height:1.8;\r\n}\r\n\r\n\r\n\/* =========================================================\r\nAXES TR\u00c8S VISIBLES\r\n========================================================= *\/\r\n\r\n.tt-routes{\r\n    display:grid;\r\n\r\n    grid-template-columns:\r\n        repeat(2,minmax(0,1fr));\r\n\r\n    gap:10px;\r\n}\r\n\r\n\r\n.tt-route{\r\n    min-height:72px;\r\n\r\n    padding:\r\n        16px\r\n        18px;\r\n\r\n    display:flex;\r\n\r\n    align-items:center;\r\n\r\n    gap:15px;\r\n\r\n    background:#FFFFFF;\r\n\r\n    border:\r\n        1px solid\r\n        rgba(201,154,66,.28);\r\n\r\n    transition:\r\n        transform .3s ease,\r\n        box-shadow .3s ease,\r\n        border-color .3s ease,\r\n        background .3s ease;\r\n}\r\n\r\n\r\n.tt-route:hover{\r\n    transform:translateY(-3px);\r\n\r\n    border-color:var(--gold);\r\n\r\n    background:#FFFCF6;\r\n\r\n    box-shadow:\r\n        0 12px 28px\r\n        rgba(7,27,61,.07);\r\n}\r\n\r\n\r\n.tt-route b{\r\n    flex:0 0 auto;\r\n\r\n    color:var(--gold);\r\n\r\n    font-family:\r\n        Georgia,\r\n        serif;\r\n\r\n    font-size:22px;\r\n    font-weight:400;\r\n}\r\n\r\n\r\n.tt-route span{\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(18px,1.35vw,22px);\r\n\r\n    font-weight:400;\r\n\r\n    line-height:1.12;\r\n}\r\n\r\n\r\n.tt-route-wide{\r\n    grid-column:\r\n        1 \/ -1;\r\n}\r\n\r\n\r\n.tt-route-note{\r\n    margin-top:13px;\r\n\r\n    padding:\r\n        18px\r\n        20px;\r\n\r\n    display:flex;\r\n\r\n    align-items:center;\r\n\r\n    gap:15px;\r\n\r\n    background:var(--cream);\r\n}\r\n\r\n\r\n.tt-route-note i{\r\n    width:36px;\r\n    height:36px;\r\n\r\n    flex:\r\n        0 0\r\n        36px;\r\n\r\n    display:grid;\r\n    place-items:center;\r\n\r\n    border-radius:50%;\r\n\r\n    background:var(--gold);\r\n\r\n    color:#FFFFFF;\r\n\r\n    font-style:normal;\r\n\r\n    font-size:20px;\r\n}\r\n\r\n\r\n.tt-route-note p{\r\n    margin:0;\r\n\r\n    color:var(--navy);\r\n\r\n    font-size:9px;\r\n\r\n    line-height:1.6;\r\n}\r\n\r\n\r\n\/* =========================================================\r\nPHOTO AXES\r\n========================================================= *\/\r\n\r\n.tt-routes-photo{\r\n    min-height:720px;\r\n\r\n    overflow:hidden;\r\n\r\n    background:#ECE8DF;\r\n}\r\n\r\n\r\n.tt-routes-photo 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;\r\n\r\n    transition:\r\n        transform 1s cubic-bezier(.16,1,.3,1);\r\n}\r\n\r\n\r\n.tt-routes-photo:hover img{\r\n    transform:scale(1.025);\r\n}\r\n\r\n\r\n\/* =========================================================\r\nFONCTIONNEMENT\r\n========================================================= *\/\r\n\r\n.tt-process-section{\r\n    padding:\r\n        0 0\r\n        55px;\r\n\r\n    background:var(--ivory);\r\n}\r\n\r\n\r\n.tt-process{\r\n    padding:\r\n        clamp(40px,5vw,70px);\r\n\r\n    border:\r\n        1px solid\r\n        rgba(201,154,66,.25);\r\n\r\n    background:#FFFFFF;\r\n\r\n    box-shadow:\r\n        0 20px 50px\r\n        rgba(7,27,61,.035);\r\n}\r\n\r\n\r\n.tt-process-header{\r\n    margin-bottom:50px;\r\n}\r\n\r\n\r\n.tt-process-header h2{\r\n    font-size:\r\n        clamp(40px,4vw,60px);\r\n}\r\n\r\n\r\n\/* =========================================================\r\nTIMELINE DESKTOP\r\n========================================================= *\/\r\n\r\n.tt-steps{\r\n    position:relative;\r\n\r\n    display:grid;\r\n\r\n    grid-template-columns:\r\n        repeat(5,minmax(0,1fr));\r\n\r\n    gap:25px;\r\n}\r\n\r\n\r\n.tt-steps::before{\r\n    content:\"\";\r\n\r\n    position:absolute;\r\n\r\n    left:8%;\r\n    right:8%;\r\n\r\n    top:31px;\r\n\r\n    height:1px;\r\n\r\n    background:\r\n        rgba(201,154,66,.5);\r\n}\r\n\r\n\r\n.tt-step{\r\n    position:relative;\r\n\r\n    z-index:2;\r\n\r\n    text-align:center;\r\n}\r\n\r\n\r\n.tt-step-no{\r\n    width:62px;\r\n    height:62px;\r\n\r\n    margin:\r\n        0 auto\r\n        20px;\r\n\r\n    display:grid;\r\n    place-items:center;\r\n\r\n    border:\r\n        1px solid\r\n        rgba(201,154,66,.6);\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-family:\r\n        Georgia,\r\n        serif;\r\n\r\n    font-size:15px;\r\n}\r\n\r\n\r\n.tt-step small{\r\n    display:block;\r\n\r\n    margin-bottom:7px;\r\n\r\n    color:var(--gold);\r\n\r\n    font-size:7px;\r\n    font-weight:700;\r\n\r\n    letter-spacing:.12em;\r\n\r\n    text-transform:uppercase;\r\n}\r\n\r\n\r\n.tt-step h3{\r\n    margin:\r\n        0 0\r\n        10px;\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(19px,1.55vw,24px);\r\n\r\n    font-weight:400;\r\n\r\n    line-height:1.1;\r\n}\r\n\r\n\r\n.tt-step p{\r\n    max-width:210px;\r\n\r\n    margin:auto;\r\n\r\n    color:var(--text);\r\n\r\n    font-size:8px;\r\n\r\n    line-height:1.65;\r\n}\r\n\r\n\r\n\/* =========================================================\r\nCONTACT + INSCRIPTION\r\n========================================================= *\/\r\n\r\n.tt-bottom{\r\n    padding-bottom:65px;\r\n\r\n    background:var(--ivory);\r\n}\r\n\r\n\r\n.tt-bottom-grid{\r\n    display:grid;\r\n\r\n    grid-template-columns:\r\n        1.2fr\r\n        .8fr;\r\n\r\n    align-items:stretch;\r\n}\r\n\r\n\r\n\/* =========================================================\r\nCONTACT\r\n========================================================= *\/\r\n\r\n.tt-contact{\r\n    padding:\r\n        clamp(40px,5vw,65px);\r\n\r\n    display:grid;\r\n\r\n    grid-template-columns:\r\n        minmax(0,1fr)\r\n        auto;\r\n\r\n    gap:45px;\r\n\r\n    align-items:center;\r\n\r\n    background:#FFFFFF;\r\n\r\n    border:\r\n        1px solid\r\n        rgba(201,154,66,.25);\r\n}\r\n\r\n\r\n.tt-contact h2{\r\n    font-size:\r\n        clamp(34px,3.3vw,52px);\r\n}\r\n\r\n\r\n.tt-contact p{\r\n    max-width:480px;\r\n\r\n    margin:\r\n        18px 0\r\n        0;\r\n\r\n    color:var(--text);\r\n\r\n    font-size:9px;\r\n\r\n    line-height:1.75;\r\n}\r\n\r\n\r\n.tt-phone{\r\n    min-width:300px;\r\n\r\n    padding-left:35px;\r\n\r\n    border-left:\r\n        1px solid\r\n        rgba(201,154,66,.35);\r\n}\r\n\r\n\r\n.tt-phone strong{\r\n    display:block;\r\n\r\n    margin-bottom:15px;\r\n\r\n    color:var(--navy);\r\n\r\n    font-size:9px;\r\n}\r\n\r\n\r\n.tt-phone a{\r\n    display:block;\r\n\r\n    margin:\r\n        10px 0;\r\n\r\n    color:\r\n        var(--navy) !important;\r\n\r\n    text-decoration:\r\n        none !important;\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(22px,2vw,30px);\r\n\r\n    white-space:nowrap;\r\n\r\n    transition:\r\n        transform .3s ease,\r\n        color .3s ease;\r\n}\r\n\r\n\r\n.tt-phone a:hover{\r\n    transform:\r\n        translateX(4px);\r\n}\r\n\r\n\r\n.tt-phone a span{\r\n    color:var(--gold);\r\n}\r\n\r\n\r\n\/* =========================================================\r\nCTA INSCRIPTION\r\n========================================================= *\/\r\n\r\n.tt-cta{\r\n    padding:\r\n        clamp(40px,5vw,65px);\r\n\r\n    display:flex;\r\n\r\n    flex-direction:column;\r\n\r\n    justify-content:center;\r\n\r\n    background:\r\n\r\n        radial-gradient(\r\n            circle at 90% 20%,\r\n            rgba(201,154,66,.15),\r\n            transparent 30%\r\n        ),\r\n\r\n        linear-gradient(\r\n            135deg,\r\n            #06152E,\r\n            #0B2D58\r\n        );\r\n\r\n    color:#FFFFFF;\r\n}\r\n\r\n\r\n.tt-cta .tt-section-label{\r\n    color:var(--gold2);\r\n}\r\n\r\n\r\n\/* IMPORTANT :\r\n   \"Inscrire\" est maintenant BLANC *\/\r\n\r\n.tt-cta h2{\r\n    margin:\r\n        0 0\r\n        16px;\r\n\r\n    color:#FFFFFF !important;\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(38px,4vw,58px);\r\n\r\n    font-weight:400;\r\n\r\n    line-height:.95;\r\n\r\n    letter-spacing:-.025em;\r\n}\r\n\r\n\r\n\/* \"mon enfant.\" reste dor\u00e9 *\/\r\n\r\n.tt-cta h2 span{\r\n    display:block;\r\n\r\n    color:\r\n        var(--gold2) !important;\r\n}\r\n\r\n\r\n.tt-cta p{\r\n    max-width:500px;\r\n\r\n    margin:\r\n        0 0\r\n        28px;\r\n\r\n    color:\r\n        rgba(255,255,255,.72);\r\n\r\n    font-size:9px;\r\n\r\n    line-height:1.75;\r\n}\r\n\r\n\r\n.tt-cta-btn{\r\n    width:\r\n        min(100%,300px);\r\n\r\n    min-height:64px;\r\n\r\n    padding:\r\n        0 22px;\r\n\r\n    display:flex;\r\n\r\n    align-items:center;\r\n\r\n    justify-content:\r\n        space-between;\r\n\r\n    gap:25px;\r\n\r\n    background:\r\n        linear-gradient(\r\n            105deg,\r\n            #D5A13B,\r\n            #EAC566\r\n        );\r\n\r\n    color:\r\n        var(--navy) !important;\r\n\r\n    text-decoration:\r\n        none !important;\r\n\r\n    font-size:9px;\r\n    font-weight:800;\r\n\r\n    letter-spacing:.05em;\r\n\r\n    text-transform:uppercase;\r\n\r\n    transition:\r\n        transform .3s ease,\r\n        box-shadow .3s ease;\r\n}\r\n\r\n\r\n.tt-cta-btn:hover{\r\n    transform:\r\n        translateY(-4px);\r\n\r\n    box-shadow:\r\n        0 18px 40px\r\n        rgba(201,154,66,.2);\r\n}\r\n\r\n\r\n.tt-cta-btn b{\r\n    font-size:20px;\r\n\r\n    font-weight:400;\r\n\r\n    transition:\r\n        transform .3s ease;\r\n}\r\n\r\n\r\n.tt-cta-btn:hover b{\r\n    transform:\r\n        translateX(5px);\r\n}\r\n\r\n\r\n\/* =========================================================\r\nTABLETTE LARGE\r\n========================================================= *\/\r\n\r\n@media screen and (max-width:1100px){\r\n\r\n    #transport-scolaire,\r\n    #inscription-transport{\r\n        scroll-margin-top:100px;\r\n    }\r\n\r\n\r\n    .tt-hero{\r\n        grid-template-columns:\r\n            1fr;\r\n    }\r\n\r\n\r\n    .tt-hero-copy{\r\n        padding-bottom:55px;\r\n    }\r\n\r\n\r\n    .tt-hero-photo{\r\n        min-height:480px;\r\n    }\r\n\r\n\r\n    .tt-values{\r\n        grid-template-columns:\r\n            repeat(2,1fr);\r\n    }\r\n\r\n\r\n    .tt-value:nth-child(3),\r\n    .tt-value:nth-child(4){\r\n        border-top:\r\n            1px solid\r\n            rgba(201,154,66,.24);\r\n    }\r\n\r\n\r\n    .tt-value:nth-child(3){\r\n        border-left:0;\r\n    }\r\n\r\n\r\n    .tt-routes-layout{\r\n        grid-template-columns:\r\n            1fr;\r\n    }\r\n\r\n\r\n    .tt-routes-photo{\r\n        min-height:520px;\r\n\r\n        order:-1;\r\n    }\r\n\r\n\r\n    .tt-steps{\r\n        grid-template-columns:\r\n            repeat(2,minmax(0,1fr));\r\n\r\n        gap:\r\n            42px\r\n            35px;\r\n    }\r\n\r\n\r\n    .tt-steps::before{\r\n        display:none;\r\n    }\r\n\r\n\r\n    .tt-step p{\r\n        max-width:300px;\r\n    }\r\n\r\n\r\n    .tt-bottom-grid{\r\n        grid-template-columns:\r\n            1fr;\r\n    }\r\n\r\n\r\n    .tt-contact{\r\n        min-height:430px;\r\n    }\r\n\r\n\r\n    .tt-cta{\r\n        min-height:430px;\r\n    }\r\n}\r\n\r\n\r\n\/* =========================================================\r\nTABLETTE PORTRAIT\r\n========================================================= *\/\r\n\r\n@media screen and (max-width:850px){\r\n\r\n    .tt-routes{\r\n        grid-template-columns:\r\n            repeat(2,minmax(0,1fr));\r\n    }\r\n\r\n\r\n    .tt-contact{\r\n        grid-template-columns:\r\n            1fr;\r\n\r\n        gap:30px;\r\n    }\r\n\r\n\r\n    .tt-phone{\r\n        min-width:0;\r\n\r\n        padding:\r\n            25px 0\r\n            0;\r\n\r\n        border-left:0;\r\n\r\n        border-top:\r\n            1px solid\r\n            rgba(201,154,66,.35);\r\n    }\r\n\r\n\r\n    .tt-phone a{\r\n        white-space:normal;\r\n    }\r\n\r\n\r\n    .tt-cta h2{\r\n        font-size:\r\n            clamp(42px,7vw,58px);\r\n    }\r\n}\r\n\r\n\r\n\/* =========================================================\r\nMOBILE\r\n========================================================= *\/\r\n\r\n@media screen and (max-width:650px){\r\n\r\n    #transport-scolaire,\r\n    #inscription-transport{\r\n        scroll-margin-top:82px;\r\n    }\r\n\r\n\r\n    .tt-wrap{\r\n        width:\r\n            calc(100% - 24px);\r\n    }\r\n\r\n\r\n    \/* HERO *\/\r\n\r\n    .tt-hero-copy{\r\n        padding:\r\n            55px\r\n            24px\r\n            43px;\r\n    }\r\n\r\n\r\n    .tt-kicker{\r\n        font-size:8px;\r\n    }\r\n\r\n\r\n    .tt-hero h1{\r\n        font-size:\r\n            clamp(48px,14vw,62px);\r\n\r\n        line-height:.94;\r\n    }\r\n\r\n\r\n    .tt-hero-copy strong{\r\n        font-size:9px;\r\n    }\r\n\r\n\r\n    .tt-hero-copy p{\r\n        font-size:10px;\r\n\r\n        line-height:1.75;\r\n    }\r\n\r\n\r\n    .tt-hero-photo{\r\n        min-height:330px;\r\n    }\r\n\r\n\r\n    .tt-hero-photo img{\r\n        object-position:center;\r\n    }\r\n\r\n\r\n    \/* ENGAGEMENTS *\/\r\n\r\n    .tt-values{\r\n        grid-template-columns:\r\n            1fr;\r\n    }\r\n\r\n\r\n    .tt-value{\r\n        min-height:auto;\r\n\r\n        padding:\r\n            34px\r\n            24px;\r\n    }\r\n\r\n\r\n    .tt-value + .tt-value{\r\n        border-left:0;\r\n\r\n        border-top:\r\n            1px solid\r\n            rgba(201,154,66,.24);\r\n    }\r\n\r\n\r\n    .tt-value h3{\r\n        font-size:28px;\r\n    }\r\n\r\n\r\n    .tt-value p{\r\n        max-width:350px;\r\n\r\n        font-size:10px;\r\n    }\r\n\r\n\r\n    \/* AXES *\/\r\n\r\n    .tt-routes-content{\r\n        padding:\r\n            35px\r\n            22px;\r\n    }\r\n\r\n\r\n    .tt-routes-content h2{\r\n        font-size:\r\n            clamp(42px,12vw,55px);\r\n    }\r\n\r\n\r\n    .tt-routes{\r\n        grid-template-columns:\r\n            1fr;\r\n    }\r\n\r\n\r\n    .tt-route-wide{\r\n        grid-column:auto;\r\n    }\r\n\r\n\r\n    .tt-route{\r\n        min-height:68px;\r\n\r\n        padding:\r\n            14px\r\n            16px;\r\n    }\r\n\r\n\r\n    .tt-route span{\r\n        font-size:21px;\r\n    }\r\n\r\n\r\n    .tt-route b{\r\n        font-size:20px;\r\n    }\r\n\r\n\r\n    .tt-routes-photo{\r\n        min-height:380px;\r\n    }\r\n\r\n\r\n    \/* PROCESS *\/\r\n\r\n    .tt-process{\r\n        padding:\r\n            38px\r\n            22px;\r\n    }\r\n\r\n\r\n    .tt-process-header{\r\n        margin-bottom:30px;\r\n    }\r\n\r\n\r\n    .tt-process-header h2{\r\n        font-size:\r\n            clamp(38px,11vw,50px);\r\n\r\n        line-height:1;\r\n    }\r\n\r\n\r\n    .tt-steps{\r\n        display:block;\r\n    }\r\n\r\n\r\n    .tt-step{\r\n        display:grid;\r\n\r\n        grid-template-columns:\r\n            55px\r\n            minmax(0,1fr);\r\n\r\n        gap:18px;\r\n\r\n        padding:\r\n            18px 0;\r\n\r\n        text-align:left;\r\n\r\n        border-bottom:\r\n            1px solid\r\n            rgba(7,27,61,.08);\r\n    }\r\n\r\n\r\n    .tt-step:last-child{\r\n        border-bottom:0;\r\n    }\r\n\r\n\r\n    .tt-step-no{\r\n        width:52px;\r\n        height:52px;\r\n\r\n        margin:0;\r\n    }\r\n\r\n\r\n    .tt-step h3{\r\n        font-size:23px;\r\n    }\r\n\r\n\r\n    .tt-step p{\r\n        max-width:none;\r\n\r\n        margin:0;\r\n\r\n        font-size:9px;\r\n    }\r\n\r\n\r\n    \/* CONTACT *\/\r\n\r\n    .tt-contact{\r\n        padding:\r\n            40px\r\n            24px;\r\n\r\n        min-height:auto;\r\n    }\r\n\r\n\r\n    .tt-contact h2{\r\n        font-size:\r\n            clamp(38px,11vw,50px);\r\n\r\n        line-height:.98;\r\n    }\r\n\r\n\r\n    .tt-contact p{\r\n        font-size:10px;\r\n    }\r\n\r\n\r\n    .tt-phone a{\r\n        font-size:\r\n            clamp(22px,7vw,27px);\r\n    }\r\n\r\n\r\n    \/* INSCRIPTION *\/\r\n\r\n    .tt-cta{\r\n        min-height:auto;\r\n\r\n        padding:\r\n            42px\r\n            24px;\r\n    }\r\n\r\n\r\n    .tt-cta h2{\r\n        font-size:\r\n            clamp(40px,12vw,52px);\r\n\r\n        line-height:.96;\r\n    }\r\n\r\n\r\n    .tt-cta h2 span{\r\n        margin-top:5px;\r\n    }\r\n\r\n\r\n    .tt-cta p{\r\n        max-width:100%;\r\n\r\n        font-size:10px;\r\n\r\n        line-height:1.75;\r\n    }\r\n\r\n\r\n    .tt-cta-btn{\r\n        width:100%;\r\n        max-width:100%;\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\nPETITS MOBILES\r\n========================================================= *\/\r\n\r\n@media screen and (max-width:420px){\r\n\r\n    .tt-hero-copy{\r\n        padding-left:20px;\r\n        padding-right:20px;\r\n    }\r\n\r\n\r\n    .tt-hero h1{\r\n        font-size:48px;\r\n    }\r\n\r\n\r\n    .tt-route span{\r\n        font-size:19px;\r\n    }\r\n\r\n\r\n    .tt-contact,\r\n    .tt-cta{\r\n        padding-left:20px;\r\n        padding-right:20px;\r\n    }\r\n\r\n\r\n    .tt-cta h2{\r\n        font-size:39px;\r\n    }\r\n\r\n\r\n    .tt-phone a{\r\n        font-size:21px;\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(.tt-transport){\r\n    width:100vw !important;\r\n\r\n    max-width:100vw !important;\r\n\r\n    margin-left:\r\n        calc(\r\n            50% - 50vw\r\n        ) !important;\r\n}\r\n\r\n\r\n.elementor-widget-html:has(.tt-transport)\r\n> .elementor-widget-container{\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\r\n\/* =========================================================\r\nREDUCED MOTION\r\n========================================================= *\/\r\n\r\n@media (\r\n    prefers-reduced-motion:\r\n    reduce\r\n){\r\n\r\n    .tt-transport *,\r\n    .tt-transport *::before,\r\n    .tt-transport *::after{\r\n        scroll-behavior:auto !important;\r\n\r\n        transition:none !important;\r\n    }\r\n\r\n}\r\n\r\n<\/style>\r\n\r\n\r\n<!-- =========================================================\r\nHERO\r\n========================================================= -->\r\n\r\n<div class=\"tt-hero\">\r\n\r\n    <div class=\"tt-hero-copy\">\r\n\r\n        <div class=\"tt-kicker\">\r\n            07 \u2014 Transport scolaire\r\n        <\/div>\r\n\r\n\r\n        <h1>\r\n            Le trajet\r\n            <span>\r\n                commence ici.\r\n            <\/span>\r\n        <\/h1>\r\n\r\n\r\n        <div class=\"tt-hero-line\"><\/div>\r\n\r\n\r\n        <strong>\r\n            Un service pens\u00e9 pour les familles\r\n        <\/strong>\r\n\r\n\r\n        <p>\r\n            L\u2019Institut Tometal propose un service de transport scolaire\r\n            s\u00e9curis\u00e9 et adapt\u00e9 aux besoins des familles afin\r\n            d\u2019accompagner les \u00e9l\u00e8ves dans leurs trajets\r\n            domicile \u2014 \u00e9cole, en toute s\u00e9r\u00e9nit\u00e9.\r\n        <\/p>\r\n\r\n    <\/div>\r\n\r\n\r\n    <div class=\"tt-hero-photo\">\r\n\r\n        <img decoding=\"async\"\r\n            src=\"https:\/\/images.pexels.com\/photos\/18506747\/pexels-photo-18506747.jpeg?cs=srgb&fm=jpg\"\r\n            alt=\"\u00c9l\u00e8ves se dirigeant vers un bus scolaire\"\r\n        >\r\n\r\n    <\/div>\r\n\r\n<\/div>\r\n\r\n\r\n<!-- =========================================================\r\nENGAGEMENTS\r\n========================================================= -->\r\n\r\n<section class=\"tt-values-wrap\">\r\n\r\n    <div class=\"tt-wrap\">\r\n\r\n        <div class=\"tt-values\">\r\n\r\n\r\n            <article class=\"tt-value\">\r\n\r\n                <div class=\"tt-value-icon\">\r\n                    \u2713\r\n                <\/div>\r\n\r\n                <small>\r\n                    01. S\u00e9curit\u00e9\r\n                <\/small>\r\n\r\n                <h3>\r\n                    La s\u00e9curit\u00e9\r\n                    <br>\r\n                    avant tout.\r\n                <\/h3>\r\n\r\n                <p>\r\n                    La s\u00e9curit\u00e9 et le bien-\u00eatre de nos \u00e9l\u00e8ves\r\n                    sont notre priorit\u00e9. La prise en charge est\r\n                    organis\u00e9e avec soin et les \u00e9l\u00e8ves sont accompagn\u00e9s\r\n                    tout au long de leur trajet.\r\n                <\/p>\r\n\r\n            <\/article>\r\n\r\n\r\n            <article class=\"tt-value\">\r\n\r\n                <div class=\"tt-value-icon\">\r\n                    \u2659\r\n                <\/div>\r\n\r\n                <small>\r\n                    02. Accompagnement\r\n                <\/small>\r\n\r\n                <h3>\r\n                    Un accompagnement\r\n                    <br>\r\n                    adapt\u00e9.\r\n                <\/h3>\r\n\r\n                <p>\r\n                    Nos \u00e9l\u00e8ves sont accompagn\u00e9s par du personnel\r\n                    encadrant attentif et bienveillant.\r\n                    Le respect, la discipline et l\u2019\u00e9coute\r\n                    sont au c\u0153ur de notre accompagnement.\r\n                <\/p>\r\n\r\n            <\/article>\r\n\r\n\r\n            <article class=\"tt-value\">\r\n\r\n                <div class=\"tt-value-icon\">\r\n                    \u2316\r\n                <\/div>\r\n\r\n                <small>\r\n                    03. Organisation\r\n                <\/small>\r\n\r\n                <h3>\r\n                    Des circuits\r\n                    <br>\r\n                    organis\u00e9s.\r\n                <\/h3>\r\n\r\n                <p>\r\n                    Des circuits sont organis\u00e9s dans plusieurs\r\n                    secteurs afin de faciliter les d\u00e9placements\r\n                    des \u00e9l\u00e8ves et de leurs familles.\r\n                <\/p>\r\n\r\n            <\/article>\r\n\r\n\r\n            <article class=\"tt-value\">\r\n\r\n                <div class=\"tt-value-icon\">\r\n                    \u25ce\r\n                <\/div>\r\n\r\n                <small>\r\n                    04. Familles\r\n                <\/small>\r\n\r\n                <h3>\r\n                    Une \u00e9quipe\r\n                    <br>\r\n                    \u00e0 votre \u00e9coute.\r\n                <\/h3>\r\n\r\n                <p>\r\n                    Notre \u00e9quipe de Vie scolaire est disponible\r\n                    pour r\u00e9pondre \u00e0 vos questions et vous guider\r\n                    dans toutes vos d\u00e9marches li\u00e9es au transport scolaire.\r\n                <\/p>\r\n\r\n            <\/article>\r\n\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n<!-- =========================================================\r\nAXES\r\n========================================================= -->\r\n\r\n<section class=\"tt-routes-section\">\r\n\r\n    <div class=\"tt-wrap\">\r\n\r\n        <div class=\"tt-routes-layout\">\r\n\r\n\r\n            <div class=\"tt-routes-content\">\r\n\r\n                <span class=\"tt-section-label\">\r\n                    01 \u2014 Nos circuits\r\n                <\/span>\r\n\r\n\r\n                <h2>\r\n                    Les axes\r\n                    <br>\r\n                    desservis.\r\n                <\/h2>\r\n\r\n\r\n                <p>\r\n                    Le service de transport dessert actuellement\r\n                    plusieurs secteurs d\u2019Antananarivo\r\n                    et de ses environs.\r\n                <\/p>\r\n\r\n\r\n                <div class=\"tt-routes\">\r\n\r\n\r\n                    <div class=\"tt-route\">\r\n                        <b>01<\/b>\r\n                        <span>Fenoarivo<\/span>\r\n                    <\/div>\r\n\r\n\r\n                    <div class=\"tt-route\">\r\n                        <b>02<\/b>\r\n                        <span>Imerintsiatosika<\/span>\r\n                    <\/div>\r\n\r\n\r\n                    <div class=\"tt-route\">\r\n                        <b>03<\/b>\r\n                        <span>Vontovorona<\/span>\r\n                    <\/div>\r\n\r\n\r\n                    <div class=\"tt-route\">\r\n                        <b>04<\/b>\r\n                        <span>Ampitatafika<\/span>\r\n                    <\/div>\r\n\r\n\r\n                    <div class=\"tt-route\">\r\n                        <b>05<\/b>\r\n                        <span>Faliarivo<\/span>\r\n                    <\/div>\r\n\r\n\r\n                    <div class=\"tt-route\">\r\n                        <b>06<\/b>\r\n                        <span>Talatamaty<\/span>\r\n                    <\/div>\r\n\r\n\r\n                    <div class=\"tt-route tt-route-wide\">\r\n                        <b>07<\/b>\r\n\r\n                        <span>\r\n                            Ambohimiandra \u2014 Ambohijatovo\r\n                        <\/span>\r\n                    <\/div>\r\n\r\n\r\n                    <div class=\"tt-route\">\r\n                        <b>08<\/b>\r\n                        <span>Itaosy<\/span>\r\n                    <\/div>\r\n\r\n\r\n                    <div class=\"tt-route\">\r\n                        <b>09<\/b>\r\n                        <span>67 Ha<\/span>\r\n                    <\/div>\r\n\r\n\r\n                <\/div>\r\n\r\n\r\n                <div class=\"tt-route-note\">\r\n\r\n                    <i>\r\n                        +\r\n                    <\/i>\r\n\r\n                    <p>\r\n                        De nouveaux circuits peuvent \u00eatre ajout\u00e9s\r\n                        en fonction des demandes des familles.\r\n                    <\/p>\r\n\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div class=\"tt-routes-photo\">\r\n\r\n                <img decoding=\"async\"\r\n                    src=\"https:\/\/images.pexels.com\/photos\/5896917\/pexels-photo-5896917.jpeg?cs=srgb&fm=jpg\"\r\n                    alt=\"\u00c9l\u00e8ves pr\u00e8s d'un bus scolaire\"\r\n                >\r\n\r\n            <\/div>\r\n\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n<!-- =========================================================\r\nFONCTIONNEMENT\r\n========================================================= -->\r\n\r\n<section class=\"tt-process-section\">\r\n\r\n    <div class=\"tt-wrap\">\r\n\r\n        <div class=\"tt-process\">\r\n\r\n\r\n            <div class=\"tt-process-header\">\r\n\r\n                <span class=\"tt-section-label\">\r\n                    02 \u2014 Fonctionnement\r\n                <\/span>\r\n\r\n                <h2>\r\n                    Comment \u00e7a fonctionne ?\r\n                <\/h2>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div class=\"tt-steps\">\r\n\r\n\r\n                <article class=\"tt-step\">\r\n\r\n                    <div class=\"tt-step-no\">\r\n                        01\r\n                    <\/div>\r\n\r\n                    <div>\r\n\r\n                        <small>\r\n                            Premi\u00e8re \u00e9tape\r\n                        <\/small>\r\n\r\n                        <h3>\r\n                            Demande d\u2019inscription\r\n                        <\/h3>\r\n\r\n                        <p>\r\n                            La famille contacte la Vie scolaire\r\n                            pour demander une place pour son enfant.\r\n                        <\/p>\r\n\r\n                    <\/div>\r\n\r\n                <\/article>\r\n\r\n\r\n                <article class=\"tt-step\">\r\n\r\n                    <div class=\"tt-step-no\">\r\n                        02\r\n                    <\/div>\r\n\r\n                    <div>\r\n\r\n                        <small>\r\n                            Analyse\r\n                        <\/small>\r\n\r\n                        <h3>\r\n                            \u00c9tude du secteur\r\n                        <\/h3>\r\n\r\n                        <p>\r\n                            L\u2019\u00e9quipe \u00e9tudie le lieu de r\u00e9sidence\r\n                            et les possibilit\u00e9s de prise en charge\r\n                            selon les circuits disponibles.\r\n                        <\/p>\r\n\r\n                    <\/div>\r\n\r\n                <\/article>\r\n\r\n\r\n                <article class=\"tt-step\">\r\n\r\n                    <div class=\"tt-step-no\">\r\n                        03\r\n                    <\/div>\r\n\r\n                    <div>\r\n\r\n                        <small>\r\n                            Organisation\r\n                        <\/small>\r\n\r\n                        <h3>\r\n                            Attribution du point d\u2019arr\u00eat\r\n                        <\/h3>\r\n\r\n                        <p>\r\n                            Un point de prise en charge\r\n                            est d\u00e9fini avec la famille.\r\n                        <\/p>\r\n\r\n                    <\/div>\r\n\r\n                <\/article>\r\n\r\n\r\n                <article class=\"tt-step\">\r\n\r\n                    <div class=\"tt-step-no\">\r\n                        04\r\n                    <\/div>\r\n\r\n                    <div>\r\n\r\n                        <small>\r\n                            Validation\r\n                        <\/small>\r\n\r\n                        <h3>\r\n                            Confirmation\r\n                        <\/h3>\r\n\r\n                        <p>\r\n                            Les informations relatives au transport\r\n                            sont communiqu\u00e9es directement \u00e0 la famille.\r\n                        <\/p>\r\n\r\n                    <\/div>\r\n\r\n                <\/article>\r\n\r\n\r\n                <article class=\"tt-step\">\r\n\r\n                    <div class=\"tt-step-no\">\r\n                        05\r\n                    <\/div>\r\n\r\n                    <div>\r\n\r\n                        <small>\r\n                            D\u00e9part\r\n                        <\/small>\r\n\r\n                        <h3>\r\n                            Transport\r\n                        <\/h3>\r\n\r\n                        <p>\r\n                            L\u2019\u00e9l\u00e8ve b\u00e9n\u00e9ficie ensuite du service\r\n                            de transport scolaire selon\r\n                            les modalit\u00e9s convenues.\r\n                        <\/p>\r\n\r\n                    <\/div>\r\n\r\n                <\/article>\r\n\r\n\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n<!-- =========================================================\r\nCONTACT + INSCRIPTION\r\n========================================================= -->\r\n\r\n<section class=\"tt-bottom\">\r\n\r\n    <div class=\"tt-wrap\">\r\n\r\n        <div class=\"tt-bottom-grid\">\r\n\r\n\r\n            <!-- CONTACT -->\r\n\r\n            <div class=\"tt-contact\">\r\n\r\n                <div>\r\n\r\n                    <span class=\"tt-section-label\">\r\n                        03 \u2014 Une \u00e9quipe \u00e0 votre \u00e9coute\r\n                    <\/span>\r\n\r\n\r\n                    <h2>\r\n                        Besoin d\u2019informations\r\n                        <br>\r\n                        sur votre secteur ?\r\n                    <\/h2>\r\n\r\n\r\n                    <p>\r\n                        Pour toute question concernant les circuits,\r\n                        les possibilit\u00e9s de prise en charge ou\r\n                        l\u2019inscription au transport scolaire,\r\n                        notre \u00e9quipe de Vie scolaire est \u00e0 votre disposition.\r\n                    <\/p>\r\n\r\n                <\/div>\r\n\r\n\r\n                <div class=\"tt-phone\">\r\n\r\n                    <strong>\r\n                        Responsable Vie scolaire\r\n                    <\/strong>\r\n\r\n\r\n                    <a href=\"tel:+261387336813\">\r\n                        <span>+261<\/span>\r\n                        38 73 368 13\r\n                    <\/a>\r\n\r\n\r\n                    <a href=\"tel:+261343059188\">\r\n                        <span>+261<\/span>\r\n                        34 30 591 88\r\n                    <\/a>\r\n\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n\r\n            <!-- INSCRIPTION -->\r\n\r\n            <div\r\n                class=\"tt-cta\"\r\n                id=\"inscription-transport\"\r\n            >\r\n\r\n                <span class=\"tt-section-label\">\r\n                    04 \u2014 Inscription\r\n                <\/span>\r\n\r\n\r\n                <h2>\r\n                    Inscrire\r\n                    <span>\r\n                        mon enfant.\r\n                    <\/span>\r\n                <\/h2>\r\n\r\n\r\n                <p>\r\n                    Vous souhaitez b\u00e9n\u00e9ficier du service\r\n                    de transport scolaire ?\r\n                    Remplissez notre formulaire de demande\r\n                    afin que notre \u00e9quipe puisse \u00e9tudier votre secteur\r\n                    et vous communiquer les modalit\u00e9s\r\n                    de prise en charge.\r\n                <\/p>\r\n\r\n\r\n                <a\r\n                    href=\"#nous-contacter\"\r\n                    class=\"tt-cta-btn\"\r\n                >\r\n\r\n                    <span>\r\n                        Demander une place\r\n                    <\/span>\r\n\r\n                    <b>\r\n                        \u2192\r\n                    <\/b>\r\n\r\n                <\/a>\r\n\r\n            <\/div>\r\n\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n<!-- =========================================================\r\nREDIRECTION \/ SCROLL\r\n========================================================= -->\r\n\r\n<script>\r\n\r\n(function(){\r\n\r\n    \"use strict\";\r\n\r\n\r\n    function scrollToTometalAnchor(){\r\n\r\n        const hash =\r\n            window.location.hash;\r\n\r\n\r\n        if(\r\n            hash !== \"#transport-scolaire\" &&\r\n            hash !== \"#inscription-transport\"\r\n        ){\r\n            return;\r\n        }\r\n\r\n\r\n        const target =\r\n            document.querySelector(hash);\r\n\r\n\r\n        if(!target){\r\n            return;\r\n        }\r\n\r\n\r\n        setTimeout(\r\n            function(){\r\n\r\n                target.scrollIntoView({\r\n                    behavior:\"smooth\",\r\n                    block:\"start\"\r\n                });\r\n\r\n            },\r\n            250\r\n        );\r\n\r\n    }\r\n\r\n\r\n    if(\r\n        document.readyState ===\r\n        \"loading\"\r\n    ){\r\n\r\n        document.addEventListener(\r\n            \"DOMContentLoaded\",\r\n            scrollToTometalAnchor\r\n        );\r\n\r\n    }else{\r\n\r\n        scrollToTometalAnchor();\r\n\r\n    }\r\n\r\n\r\n    window.addEventListener(\r\n        \"hashchange\",\r\n        scrollToTometalAnchor\r\n    );\r\n\r\n\r\n})();\r\n\r\n<\/script>\r\n\r\n<\/section>\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-1296746 e-con-full e-flex e-con e-parent\" data-id=\"1296746\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1840f0c elementor-widget elementor-widget-html\" data-id=\"1840f0c\" 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<style>\r\n\/* =========================================================\r\n   INSTITUT TOMETAL\r\n   CALENDRIER SCOLAIRE 2026-2027\r\n   ANCRE : #calendrier-scolaire\r\n   ========================================================= *\/\r\n\r\n\/* D\u00e9filement fluide *\/\r\nhtml {\r\n    scroll-behavior: smooth;\r\n}\r\n\r\n\/* Compensation pour le header fixe *\/\r\n#calendrier-scolaire {\r\n    scroll-margin-top: 120px;\r\n}\r\n\r\n.tometal-calendar-download {\r\n    width: 100%;\r\n    max-width: 1180px;\r\n    margin: 35px auto;\r\n    padding: 0 20px;\r\n    box-sizing: border-box;\r\n}\r\n\r\n.tometal-calendar-card {\r\n    position: relative;\r\n    overflow: hidden;\r\n\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    gap: 35px;\r\n\r\n    padding: 32px 38px;\r\n\r\n    background:\r\n        radial-gradient(\r\n            circle at 85% 20%,\r\n            rgba(214, 169, 74, 0.13),\r\n            transparent 32%\r\n        ),\r\n        linear-gradient(\r\n            135deg,\r\n            #07172f 0%,\r\n            #0b2348 100%\r\n        );\r\n\r\n    border: 1px solid rgba(214, 169, 74, 0.35);\r\n    border-radius: 4px;\r\n\r\n    box-shadow:\r\n        0 20px 50px rgba(5, 20, 45, 0.13);\r\n\r\n    font-family: Arial, Helvetica, sans-serif;\r\n}\r\n\r\n\/* Trait dor\u00e9 sup\u00e9rieur *\/\r\n.tometal-calendar-card::before {\r\n    content: \"\";\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n\r\n    width: 170px;\r\n    height: 3px;\r\n\r\n    background: #d5a33e;\r\n}\r\n\r\n\/* Cercle d\u00e9coratif *\/\r\n.tometal-calendar-card::after {\r\n    content: \"\";\r\n    position: absolute;\r\n\r\n    width: 230px;\r\n    height: 230px;\r\n\r\n    border: 1px solid rgba(213, 163, 62, 0.10);\r\n    border-radius: 50%;\r\n\r\n    right: -70px;\r\n    top: -120px;\r\n\r\n    pointer-events: none;\r\n}\r\n\r\n\/* =========================================================\r\n   CONTENU GAUCHE\r\n   ========================================================= *\/\r\n\r\n.tometal-calendar-content {\r\n    position: relative;\r\n    z-index: 2;\r\n\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 25px;\r\n}\r\n\r\n\/* Ic\u00f4ne calendrier *\/\r\n.tometal-calendar-icon {\r\n    width: 72px;\r\n    height: 72px;\r\n    min-width: 72px;\r\n\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    border: 1px solid rgba(213, 163, 62, 0.55);\r\n    border-radius: 50%;\r\n\r\n    background: rgba(255, 255, 255, 0.035);\r\n}\r\n\r\n.tometal-calendar-icon svg {\r\n    width: 30px;\r\n    height: 30px;\r\n\r\n    stroke: #e3b64f;\r\n}\r\n\r\n\/* Petit titre *\/\r\n.tometal-calendar-label {\r\n    margin-bottom: 8px;\r\n\r\n    color: #d9a63d;\r\n\r\n    font-size: 10px;\r\n    font-weight: 700;\r\n    letter-spacing: 3px;\r\n    text-transform: uppercase;\r\n}\r\n\r\n\/* Titre principal *\/\r\n.tometal-calendar-title {\r\n    margin: 0 0 7px;\r\n\r\n    color: #ffffff;\r\n\r\n    font-family: Georgia, \"Times New Roman\", serif;\r\n    font-size: clamp(26px, 2.5vw, 39px);\r\n    font-weight: 400;\r\n    line-height: 1.05;\r\n}\r\n\r\n\/* Description *\/\r\n.tometal-calendar-description {\r\n    margin: 0;\r\n    max-width: 560px;\r\n\r\n    color: rgba(255, 255, 255, 0.68);\r\n\r\n    font-size: 13px;\r\n    line-height: 1.7;\r\n}\r\n\r\n\/* =========================================================\r\n   BOUTON DE T\u00c9L\u00c9CHARGEMENT\r\n   ========================================================= *\/\r\n\r\n.tometal-calendar-button {\r\n    position: relative;\r\n    z-index: 2;\r\n\r\n    min-width: 275px;\r\n\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    gap: 25px;\r\n\r\n    padding: 19px 22px;\r\n\r\n    color: #07172f !important;\r\n\r\n    background:\r\n        linear-gradient(\r\n            135deg,\r\n            #d6a43d,\r\n            #efc861\r\n        );\r\n\r\n    border: 1px solid #e1b452;\r\n\r\n    text-decoration: none !important;\r\n\r\n    font-size: 11px;\r\n    font-weight: 800;\r\n    letter-spacing: 0.7px;\r\n    text-transform: uppercase;\r\n\r\n    transition:\r\n        transform 0.3s ease,\r\n        box-shadow 0.3s ease,\r\n        background 0.3s ease;\r\n}\r\n\r\n.tometal-calendar-button:hover {\r\n    color: #07172f !important;\r\n\r\n    background:\r\n        linear-gradient(\r\n            135deg,\r\n            #edc25b,\r\n            #f5d57e\r\n        );\r\n\r\n    transform: translateY(-3px);\r\n\r\n    box-shadow:\r\n        0 12px 30px rgba(213, 163, 62, 0.22);\r\n}\r\n\r\n\/* Fl\u00e8che *\/\r\n.tometal-calendar-arrow {\r\n    width: 34px;\r\n    height: 34px;\r\n\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    border-left: 1px solid rgba(7, 23, 47, 0.25);\r\n\r\n    font-size: 20px;\r\n}\r\n\r\n\/* =========================================================\r\n   TABLETTE\r\n   ========================================================= *\/\r\n\r\n@media (max-width: 900px) {\r\n\r\n    #calendrier-scolaire {\r\n        scroll-margin-top: 100px;\r\n    }\r\n\r\n    .tometal-calendar-card {\r\n        flex-direction: column;\r\n        align-items: flex-start;\r\n    }\r\n\r\n    .tometal-calendar-button {\r\n        width: 100%;\r\n        box-sizing: border-box;\r\n    }\r\n}\r\n\r\n\/* =========================================================\r\n   MOBILE\r\n   ========================================================= *\/\r\n\r\n@media (max-width: 600px) {\r\n\r\n    #calendrier-scolaire {\r\n        scroll-margin-top: 90px;\r\n    }\r\n\r\n    .tometal-calendar-download {\r\n        padding: 0 12px;\r\n        margin: 25px auto;\r\n    }\r\n\r\n    .tometal-calendar-card {\r\n        padding: 27px 22px;\r\n    }\r\n\r\n    .tometal-calendar-content {\r\n        align-items: flex-start;\r\n        gap: 17px;\r\n    }\r\n\r\n    .tometal-calendar-icon {\r\n        width: 55px;\r\n        height: 55px;\r\n        min-width: 55px;\r\n    }\r\n\r\n    .tometal-calendar-icon svg {\r\n        width: 24px;\r\n        height: 24px;\r\n    }\r\n\r\n    .tometal-calendar-title {\r\n        font-size: 27px;\r\n    }\r\n\r\n    .tometal-calendar-description {\r\n        font-size: 12px;\r\n    }\r\n\r\n    .tometal-calendar-button {\r\n        min-width: 0;\r\n        padding: 17px 18px;\r\n        font-size: 10px;\r\n    }\r\n}\r\n<\/style>\r\n\r\n\r\n<!-- ======================================================\r\n     SECTION CALENDRIER SCOLAIRE\r\n     L'ID CI-DESSOUS PERMET LA REDIRECTION DEPUIS LE MENU\r\n     ====================================================== -->\r\n\r\n<section\r\n    id=\"calendrier-scolaire\"\r\n    class=\"tometal-calendar-download\"\r\n>\r\n\r\n    <div class=\"tometal-calendar-card\">\r\n\r\n        <!-- PARTIE GAUCHE -->\r\n        <div class=\"tometal-calendar-content\">\r\n\r\n            <!-- IC\u00d4NE -->\r\n            <div class=\"tometal-calendar-icon\">\r\n\r\n                <svg\r\n                    viewBox=\"0 0 24 24\"\r\n                    fill=\"none\"\r\n                    xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\r\n                    stroke-width=\"1.5\"\r\n                >\r\n                    <rect\r\n                        x=\"3\"\r\n                        y=\"5\"\r\n                        width=\"18\"\r\n                        height=\"16\"\r\n                        rx=\"1\"\r\n                    ><\/rect>\r\n\r\n                    <path d=\"M8 3V7\"><\/path>\r\n                    <path d=\"M16 3V7\"><\/path>\r\n                    <path d=\"M3 10H21\"><\/path>\r\n\r\n                    <path d=\"M8 14H10\"><\/path>\r\n                    <path d=\"M14 14H16\"><\/path>\r\n                    <path d=\"M8 17H10\"><\/path>\r\n                    <path d=\"M14 17H16\"><\/path>\r\n                <\/svg>\r\n\r\n            <\/div>\r\n\r\n            <!-- TEXTE -->\r\n            <div>\r\n\r\n                <div class=\"tometal-calendar-label\">\r\n                    Ann\u00e9e scolaire 2026 \u2014 2027\r\n                <\/div>\r\n\r\n                <h3 class=\"tometal-calendar-title\">\r\n                    Calendrier scolaire\r\n                <\/h3>\r\n\r\n                <p class=\"tometal-calendar-description\">\r\n                    Retrouvez les principales dates de l'ann\u00e9e scolaire,\r\n                    les p\u00e9riodes de vacances et les informations importantes\r\n                    de l'Institut Tometal.\r\n                <\/p>\r\n\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- BOUTON PDF -->\r\n        <a\r\n            class=\"tometal-calendar-button\"\r\n            href=\"http:\/\/net-temporaire.institut-tometal.com\/wp-content\/uploads\/2026\/08\/Calendrier_scolaire_2026_2027_Tometal_Premium.pdf\"\r\n            target=\"_blank\"\r\n            rel=\"noopener\"\r\n        >\r\n\r\n            <span>\r\n                T\u00e9l\u00e9charger le calendrier\r\n            <\/span>\r\n\r\n            <span class=\"tometal-calendar-arrow\">\r\n                \u2193\r\n            <\/span>\r\n\r\n        <\/a>\r\n\r\n    <\/div>\r\n\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>01 Sport aquatique Natation D\u00e9velopper l\u2019endurance, la ma\u00eetrise corporelle et la confiance dans l\u2019eau. CP \u2192 SECONDE Endurance \u00b7 Confiance \u00b7 Ma\u00eetrise 02 Sport collectif Football D\u00e9velopper l\u2019esprit d\u2019\u00e9quipe, la discipline et la passion du jeu. CP \u2192 SECONDE \u00c9quipe \u00b7 Discipline \u00b7 Passion 03 Sport collectif Basketball Renforcer la coordination, l\u2019agilit\u00e9 et l\u2019esprit de [&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":"disabled","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-1982","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/net-temporaire.institut-tometal.com\/en\/wp-json\/wp\/v2\/pages\/1982","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=1982"}],"version-history":[{"count":46,"href":"https:\/\/net-temporaire.institut-tometal.com\/en\/wp-json\/wp\/v2\/pages\/1982\/revisions"}],"predecessor-version":[{"id":2146,"href":"https:\/\/net-temporaire.institut-tometal.com\/en\/wp-json\/wp\/v2\/pages\/1982\/revisions\/2146"}],"wp:attachment":[{"href":"https:\/\/net-temporaire.institut-tometal.com\/en\/wp-json\/wp\/v2\/media?parent=1982"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}