{"id":21,"date":"2026-09-30T21:49:53","date_gmt":"2026-10-01T01:49:53","guid":{"rendered":"https:\/\/fcharron.dectim.ca\/portfolio\/?page_id=21"},"modified":"2026-10-22T16:26:27","modified_gmt":"2026-10-22T20:26:27","slug":"projets","status":"publish","type":"page","link":"https:\/\/fcharron.dectim.ca\/portfolio\/projets\/","title":{"rendered":"Page des Projets"},"content":{"rendered":"\n<div data-aos= \"zoom-in-down\" data-aos-duration=\"400\" data-aos-delay=\"0\" data-aos-easing=\"ease\" data-aos-once=\"true\" class=\"wp-block-uagb-advanced-heading uagb-block-0383fdb2 uag-blocks-common-selector\" style=\"--z-index-desktop:737;;--z-index-tablet:undefined;;--z-index-mobile:undefined;\"><h1 class=\"uagb-heading-text\">mes projets<\/h1><\/div>\n\n\n\n<p data-aos-delay=\"0\" data-aos-duration=\"400\" data-aos-easing=\"ease\" data-aos-once=\"true\" data-aos=\"zoom-in\" class=\"has-text-align-center has-ast-global-color-3-color has-text-color has-link-color wp-elements-1 wp-block-paragraph\">Voici la collection de mes meilleurs projets r\u00e9alis\u00e9s durant ma Technique Int\u00e9gration Mulitm\u00e9dia, regroupant des projets d&rsquo;animation et de design!<\/p>\n\n\n\n<style data-wp-block-html=\"css\">\n\/* --- STRUCTURE GLOBALE DE LA CARTE --- *\/\n.carte-projet-cyberpunk {\n    position: relative;\n    display: flex;\n    align-items: flex-end; \/* Cal\u00e9 tout le texte en bas *\/\n    width: 100%;\n    max-width: 1000px; \/* Ajuste selon la largeur voulue sur ton \u00e9cran *\/\n    height: 500px;      \/* TA HAUTEUR DE CARTE : 500px *\/\n    margin: 30px auto;\n    border-radius: 40px; \/* Tes beaux grands coins arrondis *\/\n    border: 5px solid #ffffff; \/* Ta bordure blanche \u00e9paisse *\/\n    box-shadow: 0 0 0 5px #080809; \/* L'astuce pour la deuxi\u00e8me bordure noire autour ! *\/\n    overflow: hidden;\n    background-color: #080809;\n    text-decoration: none !important; \/* Enl\u00e8ve le soulignement g\u00e9n\u00e9ral *\/\n    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease, border-color 0.4s ease;\n    cursor: pointer;\n}\n\n\/* Effet de survol Global de la carte *\/\n.carte-projet-cyberpunk:hover {\n    transform: translateY(-5px);\n    border-color: #00caff; \/* La bordure blanche devient cyan au survol ! *\/\n}\n\n\/* --- L'IMAGE DE FOND + ZOOM SUBTIL AU HOVER --- *\/\n.fond-image-projet {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background-size: cover;\n    background-position: center center;\n    background-repeat: no-repeat;\n    z-index: 1;\n    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1); \/* Transition pour le zoom d'image *\/\n}\n\n\/* \ud83e\ude90 Optionnel : Ajoute un petit zoom sur le vaisseau spatial quand on hover la carte *\/\n.carte-projet-cyberpunk:hover .fond-image-projet {\n    transform: scale(1.03); \n}\n\n\/* --- LE BLOC DE TEXTE (ANIMATION OPACIT\u00c9 ET SOULEVEMENT) --- *\/\n.contenu-projet {\n    position: relative;\n    z-index: 2; \/* Passe par-dessus l'image *\/\n    width: 100%;\n    padding: 120px 40px 40px 40px; \/* Plus d'espace en haut pour \u00e9quilibrer la hauteur de 500px *\/\n    box-sizing: border-box;\n    \n    \/* LE D\u00c9GRAD\u00c9 MAGIQUE DU BAS VERS LE MILIEU *\/\n    background: linear-gradient(to top, \n        rgba(8, 8, 9, 0.95) 0%,    \n        rgba(8, 8, 9, 0.65) 45%,   \n        rgba(8, 8, 9, 0) 100%      \n    ) !important;\n\n    \/* \u26a1 ETAT INITIAL (MASQU\u00c9 ET EN BAS) *\/\n    opacity: 0 !important;\n    transform: translateY(30px) !important;\n    transition: opacity 0.4s ease-in-out, transform 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important; \/* G\u00e8re la fluidit\u00e9 du glissement *\/\n}\n\n\/* \u26a1 ETAT AU SURVOL (REMONTE ET APPARAIT \u00c0 100%) *\/\n.carte-projet-cyberpunk:hover .contenu-projet {\n    opacity: 1 !important;\n    transform: translateY(0) !important; \/* Revient \u00e0 sa position naturelle *\/\n}\n\n.titre-projet {\n    font-family: 'Syne', sans-serif !important;\n    color: #ffffff !important;\n    font-size: 32px !important; \n    font-weight: 700 !important; \n    text-transform: uppercase !important;\n    text-decoration: none !important; \n    margin: 0 0 15px 0 !important;\n    line-height: 1.2 !important;\n    letter-spacing: 0.5px;\n    max-width: 85%; \n}\n\n.separateur-projet {\n    border: none;\n    height: 2px;\n    background-color: #ffffff; \n    margin: 0 0 15px 0;\n    width: 100%;\n}\n\n.metas-projet {\n    font-family: 'Montserrat', sans-serif !important; \n    color: #ffffff !important;\n    font-size: 22px !important; \n    font-weight: 500 !important; \n    text-transform: none !important;\n    text-decoration: none !important; \n    margin: 0 !important;\n    opacity: 0.9;\n}\n\n\/* --- ADAPTATION MOBILE --- *\/\n@media screen and (max-width: 768px) {\n    .carte-projet-cyberpunk {\n        height: 350px;\n        border-radius: 25px;\n        border-width: 3px;\n    }\n    \/* Sur mobile, on d\u00e9sactive l'effet masqu\u00e9 pour que le texte soit lisible tout de suite sans survol tactile bizarres *\/\n    .contenu-projet {\n        padding: 40px 20px 20px 20px;\n        opacity: 1 !important;\n        transform: translateY(0) !important;\n    }\n    .titre-projet {\n        font-size: 24px !important; \n        max-width: 100%;\n    }\n    .metas-projet {\n        font-size: 16px !important;\n    }\n}\n<\/style>\n\n<!-- La balise <a> englobe maintenant PHYSIQUEMENT toute la carte pour le clic -->\n<a href=\"https:\/\/fcharron.dectim.ca\/portfolio\/projet-1\/\" class=\"carte-projet-cyberpunk\">\n    \n    <!-- L'image de ton vaisseau spatial en arri\u00e8re-plan -->\n    <div class=\"fond-image-projet\" style=\"background-image: url('https:\/\/fcharron.dectim.ca\/portfolio\/wp-content\/uploads\/2026\/10\/Thumbnail-projet-1.png');\"><\/div>\n    \n    <!-- Le bloc de texte superpos\u00e9 en bas -->\n    <div class=\"contenu-projet\">\n        <h3 class=\"titre-projet\">Mod\u00e9lisation et animation d&rsquo;un vaisseau spatiale style cin\u00e9matique<\/h3>\n        <hr class=\"separateur-projet\">\n        <p class=\"metas-projet\">2025 \u2022 Scolaire \u2022 Mod\u00e9lisation\/Animation 3D<\/p>\n    <\/div>\n\n<\/a>\n\n\n\n<style data-wp-block-html=\"css\">\n\/* --- STRUCTURE GLOBALE DE LA CARTE --- *\/\n.carte-projet-cyberpunk {\n    position: relative;\n    display: flex;\n    align-items: flex-end; \/* Cal\u00e9 tout le texte en bas *\/\n    width: 100%;\n    max-width: 1000px; \/* Ajuste selon la largeur voulue sur ton \u00e9cran *\/\n    height: 500px;      \/* TA HAUTEUR DE CARTE : 500px *\/\n    margin: 30px auto;\n    border-radius: 40px; \/* Tes beaux grands coins arrondis *\/\n    border: 5px solid #ffffff; \/* Ta bordure blanche \u00e9paisse *\/\n    box-shadow: 0 0 0 5px #080809; \/* L'astuce pour la deuxi\u00e8me bordure noire autour ! *\/\n    overflow: hidden;\n    background-color: #080809;\n    text-decoration: none !important; \/* Enl\u00e8ve le soulignement g\u00e9n\u00e9ral *\/\n    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease, border-color 0.4s ease;\n    cursor: pointer;\n}\n\n\/* Effet de survol Global de la carte *\/\n.carte-projet-cyberpunk:hover {\n    transform: translateY(-5px);\n    border-color: #00caff; \/* La bordure blanche devient cyan au survol ! *\/\n}\n\n\/* --- L'IMAGE DE FOND + ZOOM SUBTIL AU HOVER --- *\/\n.fond-image-projet {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background-size: cover;\n    background-position: center center;\n    background-repeat: no-repeat;\n    z-index: 1;\n    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1); \/* Transition pour le zoom d'image *\/\n}\n\n\/* \ud83e\ude90 Optionnel : Ajoute un petit zoom sur le vaisseau spatial quand on hover la carte *\/\n.carte-projet-cyberpunk:hover .fond-image-projet {\n    transform: scale(1.03); \n}\n\n\/* --- LE BLOC DE TEXTE (ANIMATION OPACIT\u00c9 ET SOULEVEMENT) --- *\/\n.contenu-projet {\n    position: relative;\n    z-index: 2; \/* Passe par-dessus l'image *\/\n    width: 100%;\n    padding: 120px 40px 40px 40px; \/* Plus d'espace en haut pour \u00e9quilibrer la hauteur de 500px *\/\n    box-sizing: border-box;\n    \n    \/* LE D\u00c9GRAD\u00c9 MAGIQUE DU BAS VERS LE MILIEU *\/\n    background: linear-gradient(to top, \n        rgba(8, 8, 9, 0.95) 0%,    \n        rgba(8, 8, 9, 0.65) 45%,   \n        rgba(8, 8, 9, 0) 100%      \n    ) !important;\n\n    \/* \u26a1 ETAT INITIAL (MASQU\u00c9 ET EN BAS) *\/\n    opacity: 0 !important;\n    transform: translateY(30px) !important;\n    transition: opacity 0.4s ease-in-out, transform 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important; \/* G\u00e8re la fluidit\u00e9 du glissement *\/\n}\n\n\/* \u26a1 ETAT AU SURVOL (REMONTE ET APPARAIT \u00c0 100%) *\/\n.carte-projet-cyberpunk:hover .contenu-projet {\n    opacity: 1 !important;\n    transform: translateY(0) !important; \/* Revient \u00e0 sa position naturelle *\/\n}\n\n.titre-projet {\n    font-family: 'Syne', sans-serif !important;\n    color: #ffffff !important;\n    font-size: 32px !important; \n    font-weight: 700 !important; \n    text-transform: uppercase !important;\n    text-decoration: none !important; \n    margin: 0 0 15px 0 !important;\n    line-height: 1.2 !important;\n    letter-spacing: 0.5px;\n    max-width: 85%; \n}\n\n.separateur-projet {\n    border: none;\n    height: 2px;\n    background-color: #ffffff; \n    margin: 0 0 15px 0;\n    width: 100%;\n}\n\n.metas-projet {\n    font-family: 'Montserrat', sans-serif !important; \n    color: #ffffff !important;\n    font-size: 22px !important; \n    font-weight: 500 !important; \n    text-transform: none !important;\n    text-decoration: none !important; \n    margin: 0 !important;\n    opacity: 0.9;\n}\n\n\/* --- ADAPTATION MOBILE --- *\/\n@media screen and (max-width: 768px) {\n    .carte-projet-cyberpunk {\n        height: 350px;\n        border-radius: 25px;\n        border-width: 3px;\n    }\n    \/* Sur mobile, on d\u00e9sactive l'effet masqu\u00e9 pour que le texte soit lisible tout de suite sans survol tactile bizarres *\/\n    .contenu-projet {\n        padding: 40px 20px 20px 20px;\n        opacity: 1 !important;\n        transform: translateY(0) !important;\n    }\n    .titre-projet {\n        font-size: 24px !important; \n        max-width: 100%;\n    }\n    .metas-projet {\n        font-size: 16px !important;\n    }\n}\n<\/style>\n\n<!-- La balise <a> englobe maintenant PHYSIQUEMENT toute la carte pour le clic -->\n<a href=\"https:\/\/fcharron.dectim.ca\/portfolio\/projet-2\/\" class=\"carte-projet-cyberpunk\">\n    \n    <!-- L'image de ton vaisseau spatial en arri\u00e8re-plan -->\n    <div class=\"fond-image-projet\" style=\"background-image: url('https:\/\/fcharron.dectim.ca\/portfolio\/wp-content\/uploads\/2026\/10\/Thumbnail-1.png');\"><\/div>\n    \n    <!-- Le bloc de texte superpos\u00e9 en bas -->\n    <div class=\"contenu-projet\">\n        <h3 class=\"titre-projet\">cr\u00e9ation, int\u00e9gration et animation 3d d\u2019une image r\u00e9elle style horreur VHS<\/h3>\n        <hr class=\"separateur-projet\">\n        <p class=\"metas-projet\">2025 \u00b7 Scolaire \u00b7 Mod\u00e9lisation\/Int\u00e9gration\/Animation 3D<\/p>\n    <\/div>\n\n<\/a>\n\n\n\n<style data-wp-block-html=\"css\">\n\/* --- STRUCTURE GLOBALE DE LA CARTE --- *\/\n.carte-projet-cyberpunk {\n    position: relative;\n    display: flex;\n    align-items: flex-end; \/* Cal\u00e9 tout le texte en bas *\/\n    width: 100%;\n    max-width: 1000px; \/* Ajuste selon la largeur voulue sur ton \u00e9cran *\/\n    height: 500px;      \/* TA HAUTEUR DE CARTE : 500px *\/\n    margin: 30px auto;\n    border-radius: 40px; \/* Tes beaux grands coins arrondis *\/\n    border: 5px solid #ffffff; \/* Ta bordure blanche \u00e9paisse *\/\n    box-shadow: 0 0 0 5px #080809; \/* L'astuce pour la deuxi\u00e8me bordure noire autour ! *\/\n    overflow: hidden;\n    background-color: #080809;\n    text-decoration: none !important; \/* Enl\u00e8ve le soulignement g\u00e9n\u00e9ral *\/\n    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease, border-color 0.4s ease;\n    cursor: pointer;\n}\n\n\/* Effet de survol Global de la carte *\/\n.carte-projet-cyberpunk:hover {\n    transform: translateY(-5px);\n    border-color: #00caff; \/* La bordure blanche devient cyan au survol ! *\/\n}\n\n\/* --- L'IMAGE DE FOND + ZOOM SUBTIL AU HOVER --- *\/\n.fond-image-projet {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background-size: cover;\n    background-position: center center;\n    background-repeat: no-repeat;\n    z-index: 1;\n    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1); \/* Transition pour le zoom d'image *\/\n}\n\n\/* \ud83e\ude90 Optionnel : Ajoute un petit zoom sur le vaisseau spatial quand on hover la carte *\/\n.carte-projet-cyberpunk:hover .fond-image-projet {\n    transform: scale(1.03); \n}\n\n\/* --- LE BLOC DE TEXTE (ANIMATION OPACIT\u00c9 ET SOULEVEMENT) --- *\/\n.contenu-projet {\n    position: relative;\n    z-index: 2; \/* Passe par-dessus l'image *\/\n    width: 100%;\n    padding: 120px 40px 40px 40px; \/* Plus d'espace en haut pour \u00e9quilibrer la hauteur de 500px *\/\n    box-sizing: border-box;\n    \n    \/* LE D\u00c9GRAD\u00c9 MAGIQUE DU BAS VERS LE MILIEU *\/\n    background: linear-gradient(to top, \n        rgba(8, 8, 9, 0.95) 0%,    \n        rgba(8, 8, 9, 0.65) 45%,   \n        rgba(8, 8, 9, 0) 100%      \n    ) !important;\n\n    \/* \u26a1 ETAT INITIAL (MASQU\u00c9 ET EN BAS) *\/\n    opacity: 0 !important;\n    transform: translateY(30px) !important;\n    transition: opacity 0.4s ease-in-out, transform 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important; \/* G\u00e8re la fluidit\u00e9 du glissement *\/\n}\n\n\/* \u26a1 ETAT AU SURVOL (REMONTE ET APPARAIT \u00c0 100%) *\/\n.carte-projet-cyberpunk:hover .contenu-projet {\n    opacity: 1 !important;\n    transform: translateY(0) !important; \/* Revient \u00e0 sa position naturelle *\/\n}\n\n.titre-projet {\n    font-family: 'Syne', sans-serif !important;\n    color: #ffffff !important;\n    font-size: 32px !important; \n    font-weight: 700 !important; \n    text-transform: uppercase !important;\n    text-decoration: none !important; \n    margin: 0 0 15px 0 !important;\n    line-height: 1.2 !important;\n    letter-spacing: 0.5px;\n    max-width: 85%; \n}\n\n.separateur-projet {\n    border: none;\n    height: 2px;\n    background-color: #ffffff; \n    margin: 0 0 15px 0;\n    width: 100%;\n}\n\n.metas-projet {\n    font-family: 'Montserrat', sans-serif !important; \n    color: #ffffff !important;\n    font-size: 22px !important; \n    font-weight: 500 !important; \n    text-transform: none !important;\n    text-decoration: none !important; \n    margin: 0 !important;\n    opacity: 0.9;\n}\n\n\/* --- ADAPTATION MOBILE --- *\/\n@media screen and (max-width: 768px) {\n    .carte-projet-cyberpunk {\n        height: 350px;\n        border-radius: 25px;\n        border-width: 3px;\n    }\n    \/* Sur mobile, on d\u00e9sactive l'effet masqu\u00e9 pour que le texte soit lisible tout de suite sans survol tactile bizarres *\/\n    .contenu-projet {\n        padding: 40px 20px 20px 20px;\n        opacity: 1 !important;\n        transform: translateY(0) !important;\n    }\n    .titre-projet {\n        font-size: 24px !important; \n        max-width: 100%;\n    }\n    .metas-projet {\n        font-size: 16px !important;\n    }\n}\n<\/style>\n\n<!-- La balise <a> englobe maintenant PHYSIQUEMENT toute la carte pour le clic -->\n<a href=\"https:\/\/fcharron.dectim.ca\/portfolio\/projet-3\/\" class=\"carte-projet-cyberpunk\">\n    \n    <!-- L'image de ton vaisseau spatial en arri\u00e8re-plan -->\n    <div class=\"fond-image-projet\" style=\"background-image: url('https:\/\/fcharron.dectim.ca\/portfolio\/wp-content\/uploads\/2026\/10\/Rectangle-39.png');\"><\/div>\n    \n    <!-- Le bloc de texte superpos\u00e9 en bas -->\n    <div class=\"contenu-projet\">\n        <h3 class=\"titre-projet\">design Ux et prototypage d\u2019un jeu r\u00e9alit\u00e9 augmenter pour les enfants<\/h3>\n        <hr class=\"separateur-projet\">\n        <p class=\"metas-projet\">2025 \u00b7 Scolaire \u00b7 Design UX\/Prototypage<\/p>\n    <\/div>\n\n<\/a>\n\n\n\n<style data-wp-block-html=\"css\">\n\/* --- STRUCTURE GLOBALE DE LA CARTE --- *\/\n.carte-projet-cyberpunk {\n    position: relative;\n    display: flex;\n    align-items: flex-end; \/* Cal\u00e9 tout le texte en bas *\/\n    width: 100%;\n    max-width: 1000px; \/* Ajuste selon la largeur voulue sur ton \u00e9cran *\/\n    height: 500px;      \/* TA HAUTEUR DE CARTE : 500px *\/\n    margin: 30px auto;\n    border-radius: 40px; \/* Tes beaux grands coins arrondis *\/\n    border: 5px solid #ffffff; \/* Ta bordure blanche \u00e9paisse *\/\n    box-shadow: 0 0 0 5px #080809; \/* L'astuce pour la deuxi\u00e8me bordure noire autour ! *\/\n    overflow: hidden;\n    background-color: #080809;\n    text-decoration: none !important; \/* Enl\u00e8ve le soulignement g\u00e9n\u00e9ral *\/\n    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease, border-color 0.4s ease;\n    cursor: pointer;\n}\n\n\/* Effet de survol Global de la carte *\/\n.carte-projet-cyberpunk:hover {\n    transform: translateY(-5px);\n    border-color: #00caff; \/* La bordure blanche devient cyan au survol ! *\/\n}\n\n\/* --- L'IMAGE DE FOND + ZOOM SUBTIL AU HOVER --- *\/\n.fond-image-projet {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background-size: cover;\n    background-position: center center;\n    background-repeat: no-repeat;\n    z-index: 1;\n    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1); \/* Transition pour le zoom d'image *\/\n}\n\n\/* \ud83e\ude90 Optionnel : Ajoute un petit zoom sur le vaisseau spatial quand on hover la carte *\/\n.carte-projet-cyberpunk:hover .fond-image-projet {\n    transform: scale(1.03); \n}\n\n\/* --- LE BLOC DE TEXTE (ANIMATION OPACIT\u00c9 ET SOULEVEMENT) --- *\/\n.contenu-projet {\n    position: relative;\n    z-index: 2; \/* Passe par-dessus l'image *\/\n    width: 100%;\n    padding: 120px 40px 40px 40px; \/* Plus d'espace en haut pour \u00e9quilibrer la hauteur de 500px *\/\n    box-sizing: border-box;\n    \n    \/* LE D\u00c9GRAD\u00c9 MAGIQUE DU BAS VERS LE MILIEU *\/\n    background: linear-gradient(to top, \n        rgba(8, 8, 9, 0.95) 0%,    \n        rgba(8, 8, 9, 0.65) 45%,   \n        rgba(8, 8, 9, 0) 100%      \n    ) !important;\n\n    \/* \u26a1 ETAT INITIAL (MASQU\u00c9 ET EN BAS) *\/\n    opacity: 0 !important;\n    transform: translateY(30px) !important;\n    transition: opacity 0.4s ease-in-out, transform 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important; \/* G\u00e8re la fluidit\u00e9 du glissement *\/\n}\n\n\/* \u26a1 ETAT AU SURVOL (REMONTE ET APPARAIT \u00c0 100%) *\/\n.carte-projet-cyberpunk:hover .contenu-projet {\n    opacity: 1 !important;\n    transform: translateY(0) !important; \/* Revient \u00e0 sa position naturelle *\/\n}\n\n.titre-projet {\n    font-family: 'Syne', sans-serif !important;\n    color: #ffffff !important;\n    font-size: 32px !important; \n    font-weight: 700 !important; \n    text-transform: uppercase !important;\n    text-decoration: none !important; \n    margin: 0 0 15px 0 !important;\n    line-height: 1.2 !important;\n    letter-spacing: 0.5px;\n    max-width: 85%; \n}\n\n.separateur-projet {\n    border: none;\n    height: 2px;\n    background-color: #ffffff; \n    margin: 0 0 15px 0;\n    width: 100%;\n}\n\n.metas-projet {\n    font-family: 'Montserrat', sans-serif !important; \n    color: #ffffff !important;\n    font-size: 22px !important; \n    font-weight: 500 !important; \n    text-transform: none !important;\n    text-decoration: none !important; \n    margin: 0 !important;\n    opacity: 0.9;\n}\n\n\/* --- ADAPTATION MOBILE --- *\/\n@media screen and (max-width: 768px) {\n    .carte-projet-cyberpunk {\n        height: 350px;\n        border-radius: 25px;\n        border-width: 3px;\n    }\n    \/* Sur mobile, on d\u00e9sactive l'effet masqu\u00e9 pour que le texte soit lisible tout de suite sans survol tactile bizarres *\/\n    .contenu-projet {\n        padding: 40px 20px 20px 20px;\n        opacity: 1 !important;\n        transform: translateY(0) !important;\n    }\n    .titre-projet {\n        font-size: 24px !important; \n        max-width: 100%;\n    }\n    .metas-projet {\n        font-size: 16px !important;\n    }\n}\n<\/style>\n\n<!-- La balise <a> englobe maintenant PHYSIQUEMENT toute la carte pour le clic -->\n<a href=\"https:\/\/fcharron.dectim.ca\/portfolio\/projet-4\/\" class=\"carte-projet-cyberpunk\">\n    \n    <!-- L'image de ton vaisseau spatial en arri\u00e8re-plan -->\n    <div class=\"fond-image-projet\" style=\"background-image: url('https:\/\/fcharron.dectim.ca\/portfolio\/wp-content\/uploads\/2026\/10\/Mockup-Nike.png');\"><\/div>\n    \n    <!-- Le bloc de texte superpos\u00e9 en bas -->\n    <div class=\"contenu-projet\">\n        <h3 class=\"titre-projet\">design UI et prototypage d\u2019un site marketing promouvant un produit<\/h3>\n        <hr class=\"separateur-projet\">\n        <p class=\"metas-projet\">Projet Scolaire &#8211; 2024 &#8211; Design UI\/Prototypage<\/p>\n    <\/div>\n\n<\/a>\n\n\n\n<style data-wp-block-html=\"css\">\n\/* --- STRUCTURE GLOBALE DE LA CARTE --- *\/\n.carte-projet-cyberpunk {\n    position: relative;\n    display: flex;\n    align-items: flex-end; \/* Cal\u00e9 tout le texte en bas *\/\n    width: 100%;\n    max-width: 1000px; \/* Ajuste selon la largeur voulue sur ton \u00e9cran *\/\n    height: 500px;      \/* TA HAUTEUR DE CARTE : 500px *\/\n    margin: 30px auto;\n    border-radius: 40px; \/* Tes beaux grands coins arrondis *\/\n    border: 5px solid #ffffff; \/* Ta bordure blanche \u00e9paisse *\/\n    box-shadow: 0 0 0 5px #080809; \/* L'astuce pour la deuxi\u00e8me bordure noire autour ! *\/\n    overflow: hidden;\n    background-color: #080809;\n    text-decoration: none !important; \/* Enl\u00e8ve le soulignement g\u00e9n\u00e9ral *\/\n    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease, border-color 0.4s ease;\n    cursor: pointer;\n}\n\n\/* Effet de survol Global de la carte *\/\n.carte-projet-cyberpunk:hover {\n    transform: translateY(-5px);\n    border-color: #00caff; \/* La bordure blanche devient cyan au survol ! *\/\n}\n\n\/* --- L'IMAGE DE FOND + ZOOM SUBTIL AU HOVER --- *\/\n.fond-image-projet {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background-size: cover;\n    background-position: center center;\n    background-repeat: no-repeat;\n    z-index: 1;\n    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1); \/* Transition pour le zoom d'image *\/\n}\n\n\/* \ud83e\ude90 Optionnel : Ajoute un petit zoom sur le vaisseau spatial quand on hover la carte *\/\n.carte-projet-cyberpunk:hover .fond-image-projet {\n    transform: scale(1.03); \n}\n\n\/* --- LE BLOC DE TEXTE (ANIMATION OPACIT\u00c9 ET SOULEVEMENT) --- *\/\n.contenu-projet {\n    position: relative;\n    z-index: 2; \/* Passe par-dessus l'image *\/\n    width: 100%;\n    padding: 120px 40px 40px 40px; \/* Plus d'espace en haut pour \u00e9quilibrer la hauteur de 500px *\/\n    box-sizing: border-box;\n    \n    \/* LE D\u00c9GRAD\u00c9 MAGIQUE DU BAS VERS LE MILIEU *\/\n    background: linear-gradient(to top, \n        rgba(8, 8, 9, 0.95) 0%,    \n        rgba(8, 8, 9, 0.65) 45%,   \n        rgba(8, 8, 9, 0) 100%      \n    ) !important;\n\n    \/* \u26a1 ETAT INITIAL (MASQU\u00c9 ET EN BAS) *\/\n    opacity: 0 !important;\n    transform: translateY(30px) !important;\n    transition: opacity 0.4s ease-in-out, transform 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important; \/* G\u00e8re la fluidit\u00e9 du glissement *\/\n}\n\n\/* \u26a1 ETAT AU SURVOL (REMONTE ET APPARAIT \u00c0 100%) *\/\n.carte-projet-cyberpunk:hover .contenu-projet {\n    opacity: 1 !important;\n    transform: translateY(0) !important; \/* Revient \u00e0 sa position naturelle *\/\n}\n\n.titre-projet {\n    font-family: 'Syne', sans-serif !important;\n    color: #ffffff !important;\n    font-size: 32px !important; \n    font-weight: 700 !important; \n    text-transform: uppercase !important;\n    text-decoration: none !important; \n    margin: 0 0 15px 0 !important;\n    line-height: 1.2 !important;\n    letter-spacing: 0.5px;\n    max-width: 85%; \n}\n\n.separateur-projet {\n    border: none;\n    height: 2px;\n    background-color: #ffffff; \n    margin: 0 0 15px 0;\n    width: 100%;\n}\n\n.metas-projet {\n    font-family: 'Montserrat', sans-serif !important; \n    color: #ffffff !important;\n    font-size: 22px !important; \n    font-weight: 500 !important; \n    text-transform: none !important;\n    text-decoration: none !important; \n    margin: 0 !important;\n    opacity: 0.9;\n}\n\n\/* --- ADAPTATION MOBILE --- *\/\n@media screen and (max-width: 768px) {\n    .carte-projet-cyberpunk {\n        height: 350px;\n        border-radius: 25px;\n        border-width: 3px;\n    }\n    \/* Sur mobile, on d\u00e9sactive l'effet masqu\u00e9 pour que le texte soit lisible tout de suite sans survol tactile bizarres *\/\n    .contenu-projet {\n        padding: 40px 20px 20px 20px;\n        opacity: 1 !important;\n        transform: translateY(0) !important;\n    }\n    .titre-projet {\n        font-size: 24px !important; \n        max-width: 100%;\n    }\n    .metas-projet {\n        font-size: 16px !important;\n    }\n}\n<\/style>\n\n<!-- La balise <a> englobe maintenant PHYSIQUEMENT toute la carte pour le clic -->\n<a href=\"https:\/\/fcharron.dectim.ca\/portfolio\/projet-5\/\" class=\"carte-projet-cyberpunk\">\n    \n    <!-- L'image de ton vaisseau spatial en arri\u00e8re-plan -->\n    <div class=\"fond-image-projet\" style=\"background-image: url('https:\/\/fcharron.dectim.ca\/portfolio\/wp-content\/uploads\/2026\/10\/Thumbnail.png');\"><\/div>\n    \n    <!-- Le bloc de texte superpos\u00e9 en bas -->\n    <div class=\"contenu-projet\">\n        <h3 class=\"titre-projet\">Mod\u00e9lisation et int\u00e9gration d&rsquo;un robot dans une vid\u00e9o film\u00e9<\/h3>\n        <hr class=\"separateur-projet\">\n        <p class=\"metas-projet\">Projet Scolaire &#8211; 2025 &#8211; Mod\u00e9lisation\/Int\u00e9gration\/Animation\/Motion Tracking<\/p>\n    <\/div>\n\n<\/a>\n","protected":false},"excerpt":{"rendered":"<p>mes projets Voici la collection de mes meilleurs projets r\u00e9alis\u00e9s durant ma Technique Int\u00e9gration Mulitm\u00e9dia, regroupant des projets d&rsquo;animation et [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"normal-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":"","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":"default","ast-page-background-enabled":"default","ast-page-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":"","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-4)","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-4)","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-4)","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":""}},"_zipai_imported":false,"_zipai_import_id":"","footnotes":""},"class_list":["post-21","page","type-page","status-publish","hentry"],"spectra_blocks_featured_image_url":null,"spectra_blocks_author_info":{"display_name":"felix","avatar_url":"https:\/\/secure.gravatar.com\/avatar\/e7382fac1bf7fd2ab75c107fc29568483996bf16d91d1ce05b9c0c8fa26c6ead?s=96&d=mm&r=g","author_link":"https:\/\/fcharron.dectim.ca\/portfolio\/author\/felix\/","description":""},"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"awb_sm":false,"awb_md":false,"awb_lg":false,"awb_xl":false},"uagb_author_info":{"display_name":"felix","author_link":"https:\/\/fcharron.dectim.ca\/portfolio\/author\/felix\/"},"uagb_comment_info":0,"uagb_excerpt":"mes projets Voici la collection de mes meilleurs projets r\u00e9alis\u00e9s durant ma Technique Int\u00e9gration Mulitm\u00e9dia, regroupant des projets d&rsquo;animation et [&hellip;]","_links":{"self":[{"href":"https:\/\/fcharron.dectim.ca\/portfolio\/wp-json\/wp\/v2\/pages\/21","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fcharron.dectim.ca\/portfolio\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/fcharron.dectim.ca\/portfolio\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/fcharron.dectim.ca\/portfolio\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fcharron.dectim.ca\/portfolio\/wp-json\/wp\/v2\/comments?post=21"}],"version-history":[{"count":49,"href":"https:\/\/fcharron.dectim.ca\/portfolio\/wp-json\/wp\/v2\/pages\/21\/revisions"}],"predecessor-version":[{"id":549,"href":"https:\/\/fcharron.dectim.ca\/portfolio\/wp-json\/wp\/v2\/pages\/21\/revisions\/549"}],"wp:attachment":[{"href":"https:\/\/fcharron.dectim.ca\/portfolio\/wp-json\/wp\/v2\/media?parent=21"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}