{"id":80,"date":"2025-11-25T17:47:36","date_gmt":"2025-11-25T15:47:36","guid":{"rendered":"https:\/\/tora4me.com\/?page_id=80"},"modified":"2025-12-22T21:18:35","modified_gmt":"2025-12-22T19:18:35","slug":"intro","status":"publish","type":"page","link":"https:\/\/tora4me.com\/","title":{"rendered":"Intro"},"content":{"rendered":"\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<style>\n\/* ===== RESET SIMPLE ===== *\/\nhtml, body {\n  margin: 0;\n  padding: 0;\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n  background: #000;\n  font-family: \"Times New Roman\", Georgia, serif;\n}\n\n\/* Conteneur g\u00e9n\u00e9ral plein \u00e9cran *\/\n#ylIntroRoot {\n  position: fixed;\n  inset: 0;\n  width: 100vw;\n  height: 100vh;\n  overflow: hidden;\n  background: #000;\n  z-index: 1;\n}\n\n\/* ================================\n   1) CLIP D\u2019OUVERTURE\n   ================================ *\/\n\n#introVideoWrapper {\n  position: absolute;\n  inset: 0;\n  width: 100vw;\n  height: 100vh;\n  overflow: hidden;\n  background: #000;\n  z-index: 10;\n}\n\n#introVideoWrapper video {\n  width: 100%;\n  height: 100%;\n  object-fit: cover; \/* desktop : plein \u00e9cran, m\u00eame s\u2019il coupe un peu *\/\n}\n\n\/* Desktop = vid\u00e9o horizontale *\/\n#introVideoDesktop {\n  display: block;\n}\n\n\/* Mobile portrait = vid\u00e9o verticale *\/\n#introVideoMobile {\n  display: none;\n}\n\n\/* Sur mobile en portrait : on affiche la vid\u00e9o verticale\n   ET on \u00e9vite que le Y et le D soient coup\u00e9s en utilisant contain *\/\n@media (max-width: 768px) and (orientation: portrait) {\n  #introVideoDesktop {\n    display: none;\n  }\n  #introVideoMobile {\n    display: block;\n  }\n\n  \/* ici on change le mode d\u2019affichage de la vid\u00e9o verticale *\/\n  #introVideoWrapper video {\n    object-fit: contain; \/* toute la vid\u00e9o, bandes noires si besoin *\/\n    background: #000;\n  }\n}\n\n\/* ================================\n   2) ARBRE + TITRE + 2 BOUTONS\n   ================================ *\/\n\n#treeWrapper {\n  position: absolute;\n  inset: 0;\n  width: 100vw;\n  height: 100vh;\n  overflow: hidden;\n  display: none; \/* affich\u00e9 apr\u00e8s la vid\u00e9o *\/\n  background-image: url(\"https:\/\/tora4me.com\/wp-content\/uploads\/2025\/12\/Arbre-paradisiaque-ok-scaled.png\");\n  background-size: cover;\n  background-position: center bottom;\n  background-repeat: no-repeat;\n}\n\n\/* Zone du titre SOUS le logo *\/\n.yl-title-zone {\n  position: absolute;\n  top: 64%;               \/* hauteur desktop *\/\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 90%;\n  text-align: center;\n  z-index: 5;\n}\n\n\/* Titre dor\u00e9 avec ombre *\/\n.yl-tagline {\n  margin: 0;\n  font-size: 2.1rem;\n  line-height: 1.2;\n  font-weight: 700;\n  color: #f4d18a;\n  text-shadow:\n    0 2px 3px rgba(0,0,0,0.9),\n    0 4px 10px rgba(0,0,0,0.7),\n    0 0 8px rgba(0,0,0,0.8);\n}\n\n\/* Rang\u00e9e de boutons sous le texte, en face des \u00ab ovales \u00bb *\/\n.yl-btn-row {\n  position: absolute;\n  top: 78%;              \/* hauteur desktop *\/\n  left: 50%;\n  transform: translateX(-50%);\n  display: flex;\n  gap: 3rem;\n  z-index: 6;\n}\n\n\/* Style de base des boutons *\/\n.yl-btn {\n  min-width: 260px;\n  padding: 1rem 2.5rem;\n  border-radius: 999px;\n  border: none;\n  cursor: pointer;\n  font-size: 1.2rem;\n  letter-spacing: 0.1em;\n  text-transform: uppercase;\n  font-weight: 700;\n  text-decoration: none;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  box-shadow:\n    0 10px 25px rgba(0,0,0,0.55),\n    0 0 0 1px rgba(255,255,255,0.15);\n  transition:\n    transform 0.12s ease-out,\n    box-shadow 0.12s ease-out,\n    filter 0.15s ease-out;\n}\n\n\/* Bouton CONTINUER (argent) *\/\n.yl-btn-continue {\n  background: radial-gradient(circle at 30% 20%, #ffffff, #d5d7dd 55%, #b9bcc4 100%);\n  color: #222;\n}\n\n\/* Bouton FAIRE UN DON (or) *\/\n.yl-btn-donate {\n  background: radial-gradient(circle at 30% 20%, #ffe7a8, #e0aa3b 55%, #b37b23 100%);\n  color: #241509;\n}\n\n\/* Effet hover \/ appui *\/\n.yl-btn:hover {\n  filter: brightness(1.07);\n  box-shadow:\n    0 14px 30px rgba(0,0,0,0.6),\n    0 0 0 1px rgba(255,255,255,0.2);\n}\n\n.yl-btn:active {\n  transform: translateY(2px);\n  box-shadow:\n    0 8px 15px rgba(0,0,0,0.5),\n    0 0 0 1px rgba(255,255,255,0.15);\n}\n\n\/* ================================\n   3) VERSION MOBILE (ARBRE VERTICAL)\n   ================================ *\/\n\n@media (max-width: 768px) and (orientation: portrait) {\n\n  \/* on utilise ton image verticale sp\u00e9ciale *\/\n  #treeWrapper {\n    background-image: url(\"https:\/\/tora4me.com\/wp-content\/uploads\/2025\/12\/Arbre-paradisiaque-vertical-scaled.png\");\n    background-size: cover;\n    background-position: center bottom;\n  }\n\n  \/* tu m\u2019as dit : texte un peu trop haut -> on le DESCEND d\u2019environ 2 cm *\/\n  .yl-title-zone {\n    top: 63%;   \/* avant 60% : donc plus bas *\/\n  }\n\n  \/* et les 2 boutons trop bas -> on les REMONTE *\/\n  .yl-btn-row {\n    top: 77%;   \/* avant 80% : donc un peu plus haut *\/\n    flex-direction: column;\n    gap: 1rem;\n  }\n\n  .yl-btn {\n    min-width: 70vw;\n    font-size: 1rem;\n    padding: 0.9rem 1.4rem;\n  }\n\n  .yl-tagline {\n    font-size: 1.6rem;\n  }\n}\n<\/style>\n\n<div id=\"ylIntroRoot\">\n\n  <!-- 1) CLIP D\u2019OUVERTURE -->\n  <div id=\"introVideoWrapper\">\n    <!-- Version desktop (horizontale) -->\n    <video\n      id=\"introVideoDesktop\"\n      autoplay\n      muted\n      playsinline\n      preload=\"auto\"\n    >\n      <source src=\"https:\/\/tora4me.com\/wp-content\/uploads\/2025\/11\/logo-10-sec.mp4\" type=\"video\/mp4\" \/>\n    <\/video>\n\n    <!-- Version mobile (verticale) -->\n    <video\n      id=\"introVideoMobile\"\n      autoplay\n      muted\n      playsinline\n      preload=\"auto\"\n    >\n      <source src=\"https:\/\/tora4me.com\/wp-content\/uploads\/2025\/11\/logo-10-sec-vertical.mp4\" type=\"video\/mp4\" \/>\n    <\/video>\n  <\/div>\n\n  <!-- 2) ARBRE + TITRE + 2 BOUTONS -->\n  <div id=\"treeWrapper\">\n\n    <!-- Titre SOUS le logo -->\n    <div class=\"yl-title-zone\">\n      <h1 class=\"yl-tagline\">\n        La m\u00e9thode p\u00e9dagogique pour apprendre et r\u00e9viser\n      <\/h1>\n    <\/div>\n\n    <!-- Boutons CONTINUER \/ FAIRE UN DON -->\n    <div class=\"yl-btn-row\">\n      <a\n        href=\"https:\/\/tora4me.com\/index.php\/home\/\"\n        class=\"yl-btn yl-btn-continue\"\n      >\n        CONTINUER\n      <\/a>\n\n      <a\n        href=\"https:\/\/tora4me.com\/index.php\/donors-patrons\/\"\n        class=\"yl-btn yl-btn-donate\"\n      >\n        FAIRE UN DON\n      <\/a>\n    <\/div>\n\n  <\/div>\n<\/div>\n\n<script>\n(function() {\n  const videoWrapper = document.getElementById('introVideoWrapper');\n  const desktopVideo = document.getElementById('introVideoDesktop');\n  const mobileVideo  = document.getElementById('introVideoMobile');\n  const treeWrapper  = document.getElementById('treeWrapper');\n\n  let alreadySwitched = false;\n\n  function showTree() {\n    if (alreadySwitched) return;\n    alreadySwitched = true;\n    if (videoWrapper) videoWrapper.style.display = 'none';\n    if (treeWrapper)  treeWrapper.style.display  = 'block';\n  }\n\n  if (desktopVideo) {\n    desktopVideo.addEventListener('ended', showTree);\n    desktopVideo.addEventListener('error', showTree);\n  }\n  if (mobileVideo) {\n    mobileVideo.addEventListener('ended', showTree);\n    mobileVideo.addEventListener('error', showTree);\n  }\n\n  \/\/ S\u00e9curit\u00e9 : si au bout de 9 s rien n\u2019a boug\u00e9, on affiche quand m\u00eame l\u2019arbre\n  setTimeout(showTree, 9000);\n})();\n<\/script>\n\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n<\/div>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>La m\u00e9thode p\u00e9dagogique pour apprendre et r\u00e9viser CONTINUER FAIRE UN DON<\/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":"","_kad_post_transparent":"disable","_kad_post_title":"hide","_kad_post_layout":"fullwidth","_kad_post_sidebar_id":"","_kad_post_content_style":"unboxed","_kad_post_vertical_padding":"top","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":true,"_kad_post_footer":true,"_kad_post_classname":"","footnotes":""},"class_list":["post-80","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Shimon","author_link":"https:\/\/tora4me.com\/index.php\/author\/shimon\/"},"uagb_comment_info":0,"uagb_excerpt":"La m\u00e9thode p\u00e9dagogique pour apprendre et r\u00e9viser CONTINUER FAIRE UN DON","_links":{"self":[{"href":"https:\/\/tora4me.com\/index.php\/wp-json\/wp\/v2\/pages\/80","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tora4me.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tora4me.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tora4me.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tora4me.com\/index.php\/wp-json\/wp\/v2\/comments?post=80"}],"version-history":[{"count":57,"href":"https:\/\/tora4me.com\/index.php\/wp-json\/wp\/v2\/pages\/80\/revisions"}],"predecessor-version":[{"id":303,"href":"https:\/\/tora4me.com\/index.php\/wp-json\/wp\/v2\/pages\/80\/revisions\/303"}],"wp:attachment":[{"href":"https:\/\/tora4me.com\/index.php\/wp-json\/wp\/v2\/media?parent=80"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}