/* Styles de base extraits du document Hype d'origine (reset + defaults) */ /* Safari sur iPhone agrandit automatiquement le texte de certains blocs (jusqu'a +10 %) quand leur largeur differe de celle de l'ecran, ce qui est le cas ici : la scene fait 300 px et elle est mise a l'echelle dans la largeur de l'appareil. Le texte debordait alors de sa place et passait sous les elements voisins. On neutralise ce comportement : les tailles rendues deviennent celles de la maquette, sur mobile comme sur ordinateur. */ html, body, .v-desktop, .v-mobile, .m-stage, .m-stage *, .v-desktop * { -webkit-text-size-adjust: 100% !important; text-size-adjust: 100% !important; } html, body { margin: 0px; padding: 0px; background: rgb(242, 222, 153); } .HYPE_element { transform: rotateY(0deg); } /* Mobile : pas de forçage 3D. Sur iPhone, rotateY(0deg) crée un calque graphique par élément ; multiplié par l'agrandissement de la scène, Safari manquait de mémoire et rechargeait la page en boucle. Aucun effet visuel. */ .m-stage .HYPE_element { transform: none; } /* Mobile : conteneurs Hype ramenés à une taille nulle. Hype enveloppe chaque élément dans un conteneur invisible en width/height 100 %, dont 149 couvrent toute la hauteur de la scène (30 445 px). Dès qu'une animation démarre, Safari iOS doit placer sur des calques graphiques tous les éléments qui la recouvrent — donc ces conteneurs géants — et la page plante faute de mémoire. Ils ne dessinent rien et leur contenu est positionné depuis leur coin haut-gauche : aucun effet visuel (vérifié au pixel), quiz et liens restent cliquables. */ .m-stage .HYPE_element_container { width: 0 !important; height: 0 !important; perspective: none !important; } video.HYPE_element { transform: none; } .HYPE_scene { color: rgb(0, 0, 0); font-size: 16px; font-family: Helvetica, Arial, sans-serif; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; text-align: left; text-transform: none; text-indent: 0px; text-shadow: none; line-height: normal; letter-spacing: normal; white-space: normal; word-spacing: normal; vertical-align: baseline; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; background-color: transparent; background-image: none; -webkit-font-smoothing: antialiased; } .HYPE_scene div, .HYPE_scene span, .HYPE_scene applet, .HYPE_scene object, .HYPE_scene iframe, .HYPE_scene h1, .HYPE_scene h2, .HYPE_scene h3, .HYPE_scene h4, .HYPE_scene h5, .HYPE_scene h6, .HYPE_scene p, .HYPE_scene blockquote, .HYPE_scene pre, .HYPE_scene a, .HYPE_scene abbr, .HYPE_scene acronym, .HYPE_scene address, .HYPE_scene big, .HYPE_scene cite, .HYPE_scene code, .HYPE_scene del, .HYPE_scene dfn, .HYPE_scene em, .HYPE_scene img, .HYPE_scene ins, .HYPE_scene kbd, .HYPE_scene q, .HYPE_scene s, .HYPE_scene samp, .HYPE_scene small, .HYPE_scene strike, .HYPE_scene strong, .HYPE_scene sub, .HYPE_scene sup, .HYPE_scene tt, .HYPE_scene var, .HYPE_scene b, .HYPE_scene u, .HYPE_scene i, .HYPE_scene center, .HYPE_scene dl, .HYPE_scene dt, .HYPE_scene dd, .HYPE_scene ol, .HYPE_scene ul, .HYPE_scene li, .HYPE_scene fieldset, .HYPE_scene form, .HYPE_scene label, .HYPE_scene legend, .HYPE_scene table, .HYPE_scene caption, .HYPE_scene tbody, .HYPE_scene tfoot, .HYPE_scene thead, .HYPE_scene tr, .HYPE_scene th, .HYPE_scene td, .HYPE_scene article, .HYPE_scene aside, .HYPE_scene canvas, .HYPE_scene details, .HYPE_scene embed, .HYPE_scene figure, .HYPE_scene figcaption, .HYPE_scene footer, .HYPE_scene header, .HYPE_scene hgroup, .HYPE_scene menu, .HYPE_scene nav, .HYPE_scene output, .HYPE_scene ruby, .HYPE_scene section, .HYPE_scene summary, .HYPE_scene time, .HYPE_scene mark, .HYPE_scene audio, .HYPE_scene video { color: inherit; font-size: inherit; font-family: inherit; font-weight: inherit; font-style: inherit; font-variant: inherit; text-decoration: inherit; text-align: inherit; text-transform: inherit; text-indent: inherit; text-shadow: inherit; line-height: inherit; letter-spacing: inherit; white-space: inherit; word-spacing: inherit; vertical-align: inherit; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; background-color: transparent; background-image: none; padding: 0px; box-sizing: content-box; } .HYPE_scene p { display: block; margin: 1em 0px; } .HYPE_scene div, .HYPE_scene layer { display: block; } .HYPE_scene article, .HYPE_scene aside, .HYPE_scene footer, .HYPE_scene header, .HYPE_scene hgroup, .HYPE_scene nav, .HYPE_scene section { display: block; } .HYPE_scene blockquote { display: block; margin: 1em 40px; } .HYPE_scene figcaption { display: block; } .HYPE_scene figure { display: block; margin: 1em 40px; } .HYPE_scene q { display: inline; } .HYPE_scene q::before { content: open-quote; } .HYPE_scene q::after { content: close-quote; } .HYPE_scene center { display: block; text-align: center; } .HYPE_scene hr { display: block; margin: 0.5em auto; border-style: inset; border-width: 1px; } .HYPE_scene h1, .HYPE_scene h2, .HYPE_scene h3, .HYPE_scene h4, .HYPE_scene h5, .HYPE_scene h6 { display: block; margin-left: 0px; margin-right: 0px; font-weight: bold; } .HYPE_scene h1 { font-size: 2em; margin-top: 0.67em; margin-bottom: 0.67em; } .HYPE_scene h2 { font-size: 1.5em; margin-top: 0.83em; margin-bottom: 0.83em; } .HYPE_scene h3 { font-size: 1.17em; margin-top: 1em; margin-bottom: 1em; } .HYPE_scene h4 { margin-top: 1.33em; margin-bottom: 1.33em; } .HYPE_scene h5 { font-size: 0.83em; margin-top: 1.67em; margin-bottom: 1.67em; } .HYPE_scene h6 { font-size: 0.67em; margin-top: 2.33em; margin-bottom: 2.33em; } .HYPE_scene table { display: table; border-collapse: separate; border-spacing: 2px; border-color: gray; } .HYPE_scene thead { display: table-header-group; vertical-align: middle; border-color: inherit; } .HYPE_scene tbody { display: table-row-group; vertical-align: middle; border-color: inherit; } .HYPE_scene tfoot { display: table-footer-group; vertical-align: middle; border-color: inherit; } .HYPE_scene col { display: table-column; } .HYPE_scene colgroup { display: table-column-group; } .HYPE_scene tr { display: table-row; vertical-align: inherit; border-color: inherit; } .HYPE_scene td, .HYPE_scene th { display: table-cell; vertical-align: inherit; } .HYPE_scene th { font-weight: bold; } .HYPE_scene caption { display: table-caption; text-align: center; } .HYPE_scene ul, .HYPE_scene menu, .HYPE_scene dir { display: block; list-style-type: disc; margin: 1em 0px; padding-left: 40px; } .HYPE_scene ol { display: block; list-style-type: decimal; margin: 1em 0px; padding-left: 40px; } .HYPE_scene li { display: list-item; margin: 0px; } .HYPE_scene ul ul, .HYPE_scene ol ul { list-style-type: circle; } .HYPE_scene ol ol ul, .HYPE_scene ol ul ul, .HYPE_scene ul ol ul, .HYPE_scene ul ul ul { list-style-type: square; } .HYPE_scene dd { display: block; margin-left: 40px; } .HYPE_scene dl { display: block; margin: 1em 0px; } .HYPE_scene dt { display: block; } .HYPE_scene ol ul, .HYPE_scene ul ol, .HYPE_scene ul ul, .HYPE_scene ol ol { margin-top: 0px; margin-bottom: 0px; } .HYPE_scene u, .HYPE_scene ins { text-decoration: underline; } .HYPE_scene strong, .HYPE_scene b { font-weight: bold; } .HYPE_scene i, .HYPE_scene cite, .HYPE_scene em, .HYPE_scene var, .HYPE_scene address { font-style: italic; } .HYPE_scene tt, .HYPE_scene code, .HYPE_scene kbd, .HYPE_scene samp { font-family: monospace; } .HYPE_scene pre, .HYPE_scene xmp, .HYPE_scene plaintext, .HYPE_scene listing { display: block; font-family: monospace; white-space: pre; margin: 1em 0px; } .HYPE_scene mark { background-color: yellow; color: black; } .HYPE_scene big { font-size: larger; } .HYPE_scene small { font-size: smaller; } .HYPE_scene s, .HYPE_scene strike, .HYPE_scene del { text-decoration: line-through; } .HYPE_scene sub { vertical-align: sub; font-size: smaller; } .HYPE_scene sup { vertical-align: super; font-size: smaller; line-height: 0; } /* line-height: 0 sur les exposants (« 20e siècle », « m3 ») : sans cela, l'exposant agrandit la hauteur de sa ligne et creuse un écart avec la ligne précédente. L'exposant reste identique, seul l'interligne redevient régulier. */ .HYPE_scene nobr { white-space: nowrap; } .HYPE_scene a { color: blue; text-decoration: underline; cursor: pointer; } .HYPE_scene a:active { color: red; } .HYPE_scene noframes { display: none; } .HYPE_scene frameset, .HYPE_scene frame { display: block; } .HYPE_scene frameset { border-color: inherit; } .HYPE_scene iframe { border: 0px; } .HYPE_scene details { display: block; } .HYPE_scene summary { display: block; } /* ---- apparition au scroll (ajouté par JS uniquement) ---- */ .fz-reveal { opacity: 0; transition: opacity .7s ease; } .fz-reveal.fz-in { opacity: 1; } /* ================================================================== BASCULE DESKTOP / MOBILE >= 960px : canevas figé, fidèle au pixel près < 960px : mise en page fluide (même contenu) ================================================================== */ :root { --cond: 'Barlow Condensed', Helvetica, Arial, sans-serif; } /* ================================================================== VERSION MOBILE C'est la scène mobile d'origine du document Hype (300 px de large), figée telle quelle. Seule correction apportée : elle est mise à l'échelle pour occuper toute la largeur de l'écran, au lieu de rester cantonnée à 300 px au centre comme sur le site actuel. ================================================================== */ .v-mobile { display: none; } @media (max-width: 959px) { .v-desktop { display: none; } .v-mobile { display: block; } } /* la hauteur de ce conteneur est ajustée par le script, la scène étant agrandie par une transformation (hors flux) */ .v-mobile { overflow: hidden; } .m-stage { width: 300px; transform-origin: top left; /* repli sans zoom */ /* Hype rogne volontairement ce qui dépasse du cadre de 300 px */ overflow: hidden; /* le facteur d'échelle est posé par reveal.js ; sans JavaScript la scène s'affiche à sa taille d'origine, centrée, comme sur le site actuel */ margin: 0 auto; } .m-stage .HYPE_scene { position: relative !important; display: block !important; } /* liens sortants des boutons d'appel à l'action (présents dans le document d'origine) */ .fz-lien { position: absolute; inset: 0; display: block; z-index: 5; cursor: pointer; /* le libellé visible est déjà dessiné par le bouton lui-même */ font-size: 0; text-decoration: none; } /* Questionnaire « À votre avis… » : les réponses, créées à la volée par Hype dans le document d'origine, sont ici intégrées à la page et révélées au clic. */ .fzq-reponse { opacity: 0; transition: opacity .25s ease; pointer-events: none; } .fzq-reponse.fzq-visible { opacity: 1; } /* Croix de fermeture du questionnaire : le dessin ne fait que 21 px de côté, trop petit pour être visé confortablement. On agrandit la seule zone cliquable (environ 45 px), sans rien changer à l'apparence. */ .fz-fermer { cursor: pointer; } .fz-fermer::after { content: ""; position: absolute; inset: -12px; } /* Safari iOS transforme les nombres longs en liens telephone : on neutralise l'aspect (la balise empeche deja la detection). */ .HYPE_scene a[href^="tel:"], .HYPE_scene a[x-apple-data-detectors] { color: inherit; text-decoration: none; pointer-events: none; } /* ------------------------------------------------------------------ Mobile : titres de section centrés (le texte courant reste à gauche). Chaque boîte est recentrée dans la scène de 300 px sans changer de largeur : mêmes retours à la ligne, même hauteur, rien ne se décale. Les étiquettes noires « DÉCHETS » / « RADIOACTIFS » sont un texte posé sur un rectangle séparé : les deux bougent ensemble, calés sur le rectangle, sans recentrer le texte à l'intérieur. ------------------------------------------------------------------ */ .m-stage #hype-obj-0Q0X2O6YXDH44YLDMQE7, /* DÉCHETS (texte) */ .m-stage #hype-obj-Z4XD92HUVN0M5EZT9TU3 { margin-left: 35px !important; } /* DÉCHETS (rectangle) */ .m-stage #hype-obj-DMXP21LWSLTKTPZXT8VH, /* RADIOACTIFS (texte) */ .m-stage #hype-obj-E67E8LOD5FHT54AMP7E6 { margin-left: 2.5px !important; } /* RADIOACTIFS (rectangle) */ .m-stage #hype-obj-N6E9YENVLWVLJIQRX9K8 { margin-left: -2.5px !important; } /* FINI LES IDÉES REÇUES ! */ .m-stage #hype-obj-NELC95RW43SSD1GZUU13 { margin-left: 10.5px !important; } /* VOUS AVEZ DIT RADIOACTIF ? */ .m-stage #hype-obj-8WX6V2CAMHIQCCFRUEM0 { margin-left: 9.5px !important; } /* MAIS EN FAIT, C'EST QUOI… */ .m-stage #hype-obj-DEC70VLRN3XKV63KHFGZ { margin-left: -12px !important; } /* QUELLES QUANTITÉS… */ .m-stage #hype-obj-RZ7N434ZW9YCY9Y5YK7C { margin-left: 18.5px !important; } /* POUVONS-NOUS NOUS PROTÉGER… */ .m-stage #hype-obj-XLTBYK578IKTEE4TSRQO { margin-left: -2px !important; } /* QUE DEVIENNENT LES DÉCHETS… */ .m-stage #hype-obj-1BEAF66W2Z7XLMN06D8T { margin-left: -5.5px !important; } /* QUELS PROJETS DE CENTRES… */ .m-stage #hype-obj-5VI3HDUMY7GFXM09QP7F { margin-left: 6.5px !important; } /* COMMENT LES AUTRES PAYS… */ .m-stage #hype-obj-N6E9YENVLWVLJIQRX9K8, .m-stage #hype-obj-N6E9YENVLWVLJIQRX9K8 *, .m-stage #hype-obj-NELC95RW43SSD1GZUU13, .m-stage #hype-obj-NELC95RW43SSD1GZUU13 *, .m-stage #hype-obj-8WX6V2CAMHIQCCFRUEM0, .m-stage #hype-obj-8WX6V2CAMHIQCCFRUEM0 *, .m-stage #hype-obj-DEC70VLRN3XKV63KHFGZ, .m-stage #hype-obj-DEC70VLRN3XKV63KHFGZ *, .m-stage #hype-obj-RZ7N434ZW9YCY9Y5YK7C, .m-stage #hype-obj-RZ7N434ZW9YCY9Y5YK7C *, .m-stage #hype-obj-XLTBYK578IKTEE4TSRQO, .m-stage #hype-obj-XLTBYK578IKTEE4TSRQO *, .m-stage #hype-obj-1BEAF66W2Z7XLMN06D8T, .m-stage #hype-obj-1BEAF66W2Z7XLMN06D8T *, .m-stage #hype-obj-5VI3HDUMY7GFXM09QP7F, .m-stage #hype-obj-5VI3HDUMY7GFXM09QP7F * { text-align: center !important; } /* Mobile : intertitres centrés eux aussi (même méthode que les titres de section). « 1 Leur niveau de radioactivité » et « 2 Leur durée de vie » bougent d'un bloc avec leur grand chiffre, sans recentrer le texte à l'intérieur. */ .m-stage #hype-obj-WM457K2PK5HOY0TSKO2A { margin-left: -3px !important; } /* La radioactivité, un phénomè */ .m-stage #hype-obj-7U7SOCKL93Y8I3VL33PQ { margin-left: 26px !important; } /* Tous exposés ? */ .m-stage #hype-obj-TYU0AEUT42T2AP4BT4FY { margin-left: 15.6px !important; } /* Le saviez-vous ? */ .m-stage #hype-obj-AJAAWK5O0C2ZHG8OFMPG { margin-left: -3px !important; } /* À quoi ressemble un déchet r */ .m-stage #hype-obj-7SGMSI7JJ683WDCLZFWX { margin-left: 8.9px !important; } /* Gravats, boues */ .m-stage #hype-obj-IMG65SHMPR0X9R4DJRUV { margin-left: -1px !important; } /* Le saviez-vous ? */ .m-stage #hype-obj-XN8TTB65VEUZJ8KVC9QU { margin-left: -0.5px !important; } /* Tous radioactifs, maispas au */ .m-stage #hype-obj-FJ8RXHAZ5WQYH4Y0VO16 { margin-left: -18px !important; } /* Les plusdangereux ? */ .m-stage #hype-obj-B1MXR7P75HJ20GAXNTMQ { margin-left: -47.5px !important; } /* Les déchetsradioactifs : une */ .m-stage #hype-obj-PQ5RHDUNN1DDUONLZE4S { margin-left: 45.8px !important; } /* Et demain ? */ .m-stage #hype-obj-E8CJHYIE0RLFT1KGXZ6B { margin-left: -10px !important; } /* Y a-t-il des déchets radioac */ .m-stage #hype-obj-Y1BCXXW7NKQ2EC1HRP6D { margin-left: -1.5px !important; } /* Les colis : une première bar */ .m-stage #hype-obj-KTATIHXUTBQF05FGEL27 { margin-left: -0.5px !important; } /* Des centresde stockageprévus */ .m-stage #hype-obj-Y8Z328HYWMUUD7PYTHH4 { margin-left: -1px !important; } /* En attendantleur stockage…l’ */ .m-stage #hype-obj-T0LOE1JJDOYA1H6W0S7M { margin-left: -5px !important; } /* Cigéo, projetde stockage géo */ .m-stage #hype-obj-6XP9T522484C3EJS5ZQ1 { margin-left: 2px !important; } /* Quel est l’impact radiologiq */ .m-stage #hype-obj-E7TM4H51IFWWFLBCV15V { margin-left: -0.5px !important; } /* OK, j'ai bien compris... Mai */ .m-stage #hype-obj-NFX7V6R06WTWZCU72IJ7 { margin-left: 5.7px !important; } /* Leur niveaude radioa */ .m-stage #hype-obj-8MYDVJVY0X3EXPB25RIJ { margin-left: -4.3px !important; } /* Leur durée de vie */ .m-stage #hype-obj-U8Z89UGVGCIXI61NOTGZ { margin-left: 5.7px !important; } /* pastille 1 */ .m-stage #hype-obj-P5F9NA2WH0PE8MUPZBUE { margin-left: -4.3px !important; } /* pastille 2 */ .m-stage #hype-obj-WM457K2PK5HOY0TSKO2A, .m-stage #hype-obj-WM457K2PK5HOY0TSKO2A *, .m-stage #hype-obj-7U7SOCKL93Y8I3VL33PQ, .m-stage #hype-obj-7U7SOCKL93Y8I3VL33PQ *, .m-stage #hype-obj-TYU0AEUT42T2AP4BT4FY, .m-stage #hype-obj-TYU0AEUT42T2AP4BT4FY *, .m-stage #hype-obj-AJAAWK5O0C2ZHG8OFMPG, .m-stage #hype-obj-AJAAWK5O0C2ZHG8OFMPG *, .m-stage #hype-obj-7SGMSI7JJ683WDCLZFWX, .m-stage #hype-obj-7SGMSI7JJ683WDCLZFWX *, .m-stage #hype-obj-IMG65SHMPR0X9R4DJRUV, .m-stage #hype-obj-IMG65SHMPR0X9R4DJRUV *, .m-stage #hype-obj-XN8TTB65VEUZJ8KVC9QU, .m-stage #hype-obj-XN8TTB65VEUZJ8KVC9QU *, .m-stage #hype-obj-FJ8RXHAZ5WQYH4Y0VO16, .m-stage #hype-obj-FJ8RXHAZ5WQYH4Y0VO16 *, .m-stage #hype-obj-B1MXR7P75HJ20GAXNTMQ, .m-stage #hype-obj-B1MXR7P75HJ20GAXNTMQ *, .m-stage #hype-obj-PQ5RHDUNN1DDUONLZE4S, .m-stage #hype-obj-PQ5RHDUNN1DDUONLZE4S *, .m-stage #hype-obj-E8CJHYIE0RLFT1KGXZ6B, .m-stage #hype-obj-E8CJHYIE0RLFT1KGXZ6B *, .m-stage #hype-obj-Y1BCXXW7NKQ2EC1HRP6D, .m-stage #hype-obj-Y1BCXXW7NKQ2EC1HRP6D *, .m-stage #hype-obj-KTATIHXUTBQF05FGEL27, .m-stage #hype-obj-KTATIHXUTBQF05FGEL27 *, .m-stage #hype-obj-Y8Z328HYWMUUD7PYTHH4, .m-stage #hype-obj-Y8Z328HYWMUUD7PYTHH4 *, .m-stage #hype-obj-T0LOE1JJDOYA1H6W0S7M, .m-stage #hype-obj-T0LOE1JJDOYA1H6W0S7M *, .m-stage #hype-obj-6XP9T522484C3EJS5ZQ1, .m-stage #hype-obj-6XP9T522484C3EJS5ZQ1 *, .m-stage #hype-obj-E7TM4H51IFWWFLBCV15V, .m-stage #hype-obj-E7TM4H51IFWWFLBCV15V * { text-align: center !important; } /* Mobile : descriptions des fiches personnages alignées à gauche (les noms restent centrés, comme tous les titres). Les deux textes démarrent à la même distance du cadre blanc : celui de Manon est ramené de 10 px pour s'aligner sur celui d'Estelle. */ .m-stage #hype-obj-OT3UXJRBZ4OTNKBC7I4B { margin-left: -10px !important; } /* Manon Radon */ .m-stage #hype-obj-OT3UXJRBZ4OTNKBC7I4B, .m-stage #hype-obj-OT3UXJRBZ4OTNKBC7I4B *, .m-stage #hype-obj-W4OVGNCTCRG10VQOZ1IW, .m-stage #hype-obj-W4OVGNCTCRG10VQOZ1IW * { /* + Estelle Cosmos */ text-align: left !important; } /* Mobile : « 61,5 % » du camembert des secteurs d'activité. Dans la maquette d'origine il mord sur le trou central et sur la part claire voisine. Décalé de 36 px, il se centre sur la part rouge (150 → 264 px) et s'aligne à droite sur son étiquette « Électronucléaire ». */ .m-stage #hype-obj-UZ640KDJQ4Y2PDBNEZTH { margin-left: 60.2px !important; } /* 60,2 px dans le repere de l'element : le groupe du camembert est reduit au facteur 0,598, ce qui donne bien 36 px a l'ecran. */ /* Chiffres actualises (bilan ASNR 2025) : 4,5 -> 7,1 mSv/an, 2/3 -> 77 %, 1/3 -> 23 %. Les trois visuels ont ete remis a la hauteur de chiffre de l'edition d'origine (~49,9 u, soit 64 px a l'ecran). Leurs cadres n'ont donc plus la largeur des anciens : la marge ci-dessous recentre chaque nombre sur sa legende. Le calage vertical, lui, est porte par un margin-top en ligne sur chaque element. */ #hype-obj-P7VH7HUV76KC32MZWVMB { margin-left: 2.320px !important; } #hype-obj-ULGLSUPEZ0Y3GC3HIT9A { margin-left: 2.320px !important; } #hype-obj-MP558V8DYJW81NBPP888 { margin-left: -19.930px !important; } #hype-obj-IDMIX3GXCTQCRFJIXBJG { margin-left: -19.930px !important; } #hype-obj-2L0Q6EE04V3UM2AXKX45 { margin-left: -21.330px !important; } #hype-obj-6VEK6P5F5QWE0UKXN0OH { margin-left: -21.330px !important; } /* Caisse d'entreposage : dans l'original, les fûts s'empilent en trois temps puis disparaissent, et l'effet se répète en boucle. Cycle releve sur l'original : 3,5 s, apparitions a 1,0 s (28,6 %), 2,0 s (57,1 %) et 2,9 s (82,9 %). La boucle demarre quand la section arrive a l'ecran, comme le reste des animations. */ .fzocaisse, .fzmcaisse { display: block !important; opacity: 0; } @keyframes fz-caisse-1 { 0%, 28.5% { opacity: 0 } 28.6%, 100% { opacity: 1 } } @keyframes fz-caisse-2 { 0%, 57.0% { opacity: 0 } 57.1%, 100% { opacity: 1 } } @keyframes fz-caisse-3 { 0%, 82.8% { opacity: 0 } 82.9%, 100% { opacity: 1 } } /* desktop */ #hype-obj-NSM41SNAXJ42KCF3BC44.fzo-go { animation: fz-caisse-1 3.5s infinite; } #hype-obj-6ZY0CY2II36MWB6RKXEN.fzo-go { animation: fz-caisse-2 3.5s infinite; } #hype-obj-KG8XCL21FWR3XBUJ3U95.fzo-go { animation: fz-caisse-3 3.5s infinite; } /* mobile */ #hype-obj-5SDEICJA2GZ5CEH33UCT.fzm-go { animation: fz-caisse-1 3.5s infinite; } #hype-obj-6UANB92QQ068U1IDKQRF.fzm-go { animation: fz-caisse-2 3.5s infinite; } #hype-obj-RH2SNAOBJPGK406A50HG.fzm-go { animation: fz-caisse-3 3.5s infinite; } /* Bloc « Les plus dangereux ? » (mobile) : reconstruit en flux normal. Le reste de la page est en coordonnees absolues, heritees du document d'origine ; ici les elements se suivent et le bloc s'adapte a la hauteur reelle du texte, quelle que soit la taille de police appliquee par l'appareil. */ .m-stage .fz-flux { position: absolute; left: 20px; top: 14636px; width: 261px; z-index: 500; } .m-stage .fz-flux .HYPE_element { position: static !important; margin: 0 !important; } /* ces elements sont en « display: inline » dans le document d'origine, ce qui annulerait largeur et centrage : on les repasse en bloc. */ .m-stage .fz-flux .fz-texte, .m-stage .fz-flux .fz-titre { display: block !important; height: auto !important; } .m-stage .fz-flux .fz-texte { width: 245px !important; } /* largeur d'origine : meme decoupe des lignes */ .m-stage .fz-flux .fz-titre { width: 100% !important; } .m-stage .fz-flux .fz-titre, .m-stage .fz-flux .fz-titre * { text-align: center !important; } .m-stage .fz-flux .fz-ligne { display: grid; grid-template-columns: 1fr 1fr; justify-items: center; } .m-stage .fz-flux .fz-chiffres > .HYPE_element { height: auto !important; } /* Les quatre pourcentages : « 0,2 % » etait en 48 px, les trois autres en 45 px. Corps unifie a 45 px, la valeur du document d'origine en mobile. */ .m-stage .fz-flux .fz-chiffres > .HYPE_element, .m-stage .fz-flux .fz-chiffres > .HYPE_element * { font-size: 45px !important; } .m-stage .fz-flux .fz-bas { align-items: end; } /* barres de volume : meme ligne de base */ .m-stage .fz-flux .fz-haut { align-items: start; } /* barres de niveau : meme depart */ /* rythme vertical */ .m-stage .fz-flux .fz-cartes { margin-top: 10px; } .m-stage .fz-flux .fz-bande { margin-top: 10px; } .m-stage .fz-flux .fz-chiffres{ margin-top: 3px; } .m-stage .fz-flux .fz-barres { margin-top: 5px; } /* Jauges sur un rail representant 100 % (demande client) : elles remplacent les barres d'origine, qui n'etaient pas a la meme echelle d'une valeur a l'autre. Construction des rails : reveal.js. */ .m-stage .fz-flux .fz-barres { display: none !important; } .m-stage .fz-flux .fz-jauges { margin-top: 6px; } .m-stage .fz-flux .fz-rail { position: relative; width: 118px; height: 12px; border-radius: 7px; background: rgba(255, 255, 255, 0.55); overflow: hidden; } .m-stage .fz-flux .fz-rail > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 7px; min-width: 3px; /* 0,2 % resterait invisible autrement */ } /* Schema de La Hague (mobile) : demande client. 1. Le colis HA passe a gauche et le texte a droite, pour equilibrer le bloc (le haut a deja le texte a gauche et l'illustration a droite). C'est aussi la composition de la version desktop. 2. La fleche verte part du point rouge de La Hague, la ou arrive la fleche rouge : son depart etait decale de 47 px a droite et 30 px plus bas. 3. Fleche redressee (16 degres par rapport a la verticale au lieu de 20) et colis descendu, pour que la pointe designe clairement le colis au lieu de l'effleurer. Valeurs relevees a l'ecran : base sur le point rouge, pointe 10 px au-dessus du colis, et 7 px de marge avant le bouton de la section suivante. */ .m-stage #hype-obj-0Q76X2MWSCXPMM2ZTSA2 { /* colis HA */ transform: translateX(323px) translateY(432px) scaleX(0.74) scaleY(0.74) !important; margin-left: -165px !important; margin-top: 44px !important; } .m-stage #hype-obj-KCRSYP0IMOAKBY36RSOD { /* texte -> a droite */ margin-left: 68px !important; width: 206px !important; } .m-stage #hype-obj-22HEUBP40JALEDJ1P0PS { /* fleche verte */ transform: translateX(153px) translateY(362px) rotate(-31deg) scaleX(0.78) scaleY(0.78) !important; margin-left: -27.0px !important; margin-top: -31.8px !important; /* base tangente au point rouge, sans le recouvrir */ } /* La fleche verte restait invisible pendant les 2 premieres des 4 s de son animation d'origine : apparition jugee trop lente. Duree ramenee a 2 s, courbe inchangee. */ .m-stage .fzm48.fzm-go { animation-duration: 2s !important; } /* Lien pose sur une phrase du texte (et non sur un bouton entier) : demande client sur « C'est le projet Cigeo ». Souligne pour etre reperable, couleur inchangee. */ .HYPE_scene a.fz-lien-texte { /* bat la remise a zero Hype : .HYPE_scene a { color: blue } */ color: inherit; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; cursor: pointer; pointer-events: auto; } .HYPE_scene a.fz-lien-texte:hover, .HYPE_scene a.fz-lien-texte:focus-visible { text-decoration-thickness: 2px; } /* Rangees du bloc « Les plus dangereux ? » en attente de leur arrivee. Sans cela elles seraient visibles a leur place finale, puis sauteraient sur le cote au declenchement. La classe fz-arme n'est posee que si le script a installe les animations : sans JavaScript, rien n'est masque. */ .m-stage .fz-flux.fz-arme .fzm920:not(.fzm-go), .m-stage .fz-flux.fz-arme .fzm921:not(.fzm-go), .m-stage .fz-flux.fz-arme .fzm922:not(.fzm-go) { opacity: 0; } /* Elements dont l'animation d'entree demarre invisible : on les masque tant qu'ils ne sont pas armes, pour qu'ils n'apparaissent pas une premiere fois a leur place definitive. La classe est posee par reveal.js, uniquement sur les elements rattaches a un declencheur. */ .fz-attente:not(.fzm-go):not(.fzo-go) { opacity: 0 !important; } /* ================================================================== En-tete et pied de page (demande client). Repris des captures header.png / footer.png : logos fournis dans transfer-01a1342d, bloc « Republique francaise » repris du long-read « Quel heritage pour nos descendants », indigo du pied releve sur la capture (#312E83). Le menu central de la capture est volontairement absent : il est barre en rouge sur le modele. Ils sont hors de la scene Hype, donc sans effet sur la numerotation des elements ni sur les animations. ================================================================== */ .fz-entete { background: #fff; border-bottom: 1px solid #e5e5e5; font-family: "Marianne", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; } .fz-entete-interieur { max-width: 1280px; margin: 0 auto; padding: 10px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .fz-entete-logos { display: flex; align-items: center; gap: 20px; text-decoration: none; } /* logos fournis dans transfer-01a1342d. Le logotype livre est la version sans signature : hauteur ajustee pour que le mot « ANDRA » pese comme sur le modele. */ .fz-entete-logos img { display: block; width: auto; } .fz-logo-rf { height: 44px; } .fz-logo-andra { height: 42px; } .fz-entete-retour { color: #2A3480; text-decoration: none; font-size: 15px; white-space: nowrap; } .fz-entete-retour .fz-souligne { text-decoration: underline; } .fz-entete-retour:hover .fz-souligne { text-decoration-thickness: 2px; } .fz-pied { background: #312E83; color: #fff; font-family: "Marianne", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; } .fz-pied-interieur { max-width: 1280px; margin: 0 auto; padding: 18px 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .fz-pied-logo img { display: block; height: 46px; width: auto; } .fz-pied-liens { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 15px; } .fz-pied-liens a { color: #fff; text-decoration: none; } .fz-pied-liens a:hover { text-decoration: underline; } .fz-pied-sep { color: rgba(255, 255, 255, 0.55); } @media (max-width: 700px) { .fz-entete-interieur { padding: 8px 14px; gap: 10px; } .fz-entete-logos { gap: 12px; } .fz-logo-rf { height: 30px; } .fz-logo-andra { height: 35px; } .fz-entete-retour { font-size: 13px; } /* une fois empile, le pied n'a plus ses deux poles (logo a gauche, liens a droite) : on centre, ce qui equilibre aussi les deux lignes de liens de longueurs inegales */ .fz-pied-interieur { padding: 16px 14px; flex-direction: column; align-items: center; text-align: center; gap: 14px; } .fz-pied-liens { justify-content: center; } .fz-pied-logo img { height: 38px; } /* les separateurs tomberaient en fin de ligne au retour a la ligne */ .fz-pied-sep { display: none; } .fz-pied-liens { font-size: 13px; column-gap: 18px; row-gap: 8px; } }