<!--                                                                                                
                                                                      ..::--:..                     
                                                                    .+*******+=:.                   
                                                                   .:=*%%@%%%##**+:                 
                                                                 .:=**+***+++*#####*=:              
                                                                .:=*#%@@@@@%%#*+==*##+.             
                                                               .:-=#%@@@@@@@%%%%#*+=++.             
                                                             .:-**++*#@@@@@@@@@%%###*-.             
                                                            .-=*%%%%%@%%%##%@@%%%##%#*=-.           
                                                           .#*+%%@@@@@@@@@@%***%%%%%%#*+.           
                                                          :-%%#@@@@@@@@@@@@@%#**+*%%%##=            
                                                        .:-==+#@@@@@@@@@@@@@#%%###**##=.            
                                                       -==#%%%%%%%#%@@@@@@@%##%%#%#*=:              
                                                      :*##%%@@@@@@@@@%##@@@%#%%%%%%#*=:.            
                                                     .=##%%%@@@@@@@@@@@@%**#%%%%%%%%#*+.            
                                                    .:+%%@@@@@@@@@@@@@@@%###+*##%%%%#*:             
                                                   .-+*+*%@@@@@@@@@@@@@%#%%%%%#*%%%##-              
                                                  **#%@%%%@@%#@@@@@@@%%##@@%%%%%#*#*:               
                                                 -%#@@@@@@@@@@@@%#%%@%###%%%%%%%#*=.                
                                                .#%%@@@@@@@@@@@@@@%*+*###%%%%@%%%#*+:               
                                              .:-%#@@@@@@@@@@@@@@@@%##*+#%%%@@@%%%%+.               
                                            .:-+++*%@@@@@@@@@@@@@@%%%@%%%##%%%%##%+                 
                                      .     :=#%%@%@@@@%%@@@@@@@@%%%@@%%@@%*#%%%*.                  
                                     .**: ..=*%@@@@@@@@@@@@%%@@@%%@%%@@@@%%%+++:                    
                                      -@%:::+%%@@@@@@@@@@@@@@%**###%%@%%%%%%#*-.                    
                                       +@#--*%@@@@@@@@@@@@@@@@%%###%%%@@@@%%%#+                     
                                       .*%+-+**##@@@@@@@@@@@@@@@@@@%#%%%@%%%#+                      
                                        -%%#@@@@@@@@%@@@@@@@@@@@@@@@@###%%%*:                       
                                       .:-*@@@@@@@@@@@@%%%%%%@@@@@@@%%%*+=:                         
                                      ..:-*@@@@@@@@@@@@@%##%%%%@@@@@@%%%#-                          
                       .-=.         ..:--=+*#%@@@@@@@@@@@@@@##%@@@@@@%%%%+.                         
                          :=+-     .::-==++*%@@@%@@@@@@%@@@@@@@#%@@@@%%%*.                          
                             ##.  .::-=*#**#@@@@@@%##*%@@@@@@@@@%*#@@%*.                            
                             .%*..:--=*%@@@@@@@@@@@@#++#@@@@@@@@@%+=:                               
                              .%*===++%@@@@@@@@@@@@@@@@%%##@@@@@@%#+.                               
                               :*#%%%%%@@@@@@@@@@@@@@@@@@@%**@@@@@*.                                
                               .:-+**+==*%@@@@@@@@@@@@@@@@@%+=+*++=.                                
                               .:-=++==*@@@@@@@@@@@@@@@@@%*+=:     .:-=:                            
                               .:=++**#@@@@@@@@@@@@@@@@@@%*--:         .++.                         
                            :*=-+**%%%%@@@@@@@@@@@@@#@@@@%#+.            .:.                        
                          .*%#%*##@@@@@@@@@@@@@@@@@@*+%%%#=:.                                       
                         :#@%=+%@@@@@@@@@@@@@@@@@@%#-:.    .-+=-:=-                                 
                      =%@@@@+=#@@@@@@@@@@@@##%@@@@%+:.            +=                                
                       .  .:-=*@@@@@@@@@@@@@%%*+-.                 .                                
                           .:=+%@@@@@@@@@@@@%@@@*=:.                                                
                           .:=*#@@@@@@@@+*@@@%%#=...                                                
           :++***#*#*#:   ..-@@%%@@@@@@@%%@@%%#=:..                                                 
                       -%@#==@@@@@@@@%*%@@@@%*+=:                                                   
                          .-*@@@@@@%=::-+++=---*+                                                   
                            :#@=-@#:  ..:::    *.                                                   
                            -*               :#=                                                    
                            *.              =#:                                                     
                           ==              .=                                                       
                          --                :.                                                      
                        .-                  --                                                      
                       :.                    .                                                      
                     .-                                                                             

https://soundcloud.com/ccctxt-3431/sets/matrice-maisonpleine?si=5ab322106a474b7c830e4484f2bd64f0&utm_source=clipboard&utm_medium=text&utm_campaign=social_sharing-->                                                                                                
<!doctype html>
<!--[if lt IE 7]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7]>    <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8]>    <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9]>    <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"><!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Maison Pleine</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="shortcut icon" href="chair/hôte (accueil)/gif/hôte_soleil.1.gif">
    <link rel="stylesheet" href="assets/css/principal copy.css">
    <link href='https://fonts.googleapis.com/css?family=Playfair+Display' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Playfair+Display:400,400italic' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Playfair+Display:400italic,700' rel='stylesheet' type='text/css'>
    <script src="assets/js/script-ck.js"></script>
    <style>
        body {
            margin: 0;
            font-family: 'Playfair Display', serif;
            background: transparent;
            cursor : crosshair
        }
        .video-background {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1; 
        }
        .content {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-top: 100px; 
        }
        
        .nom {
            font-size: 36px; 
            font-weight: bold; 
            color: black; 
            margin-top: 20px; 
            text-align: center;
            position: fixed; 
            top: 20px;
            left: 20px; 
            writing-mode: vertical-lr; 
            text-orientation: upright; 
            cursor : inherit
            z-index: 10000; 
            animation: colorChange 2s infinite, move 4s infinite; 
           
        }

        .nom:hover {
            background-color : white;

        }
        
        @keyframes colorChange {
            0% { color: black; }
            50% { color: red; }
            100% { color: white; }
        }

        @keyframes move {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(20px); }
        }
        
        .menu {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            position: fixed;
            top: 0;
            padding: 10px 0;
            z-index: 1001; 
        }
        .menu-item {
            margin: 0 10px;
            font-size: 16px; 
            font-weight: bold; 
            color: white; 
            background-color : red;
            text-decoration: none; 
            position: relative; 
        }
        .menu-item:hover {
            font-style: italic;
            text-decoration: underline;
            color: red;
            background-color : white;
            cursor : cell
        }
        .img, .imgportrait {
            position: absolute;
            top: calc(100% + 10px); 
            left: 50%;
            transform: translateX(-50%);
            display: none; 
            text-align: center; 
            z-index: 10; 
            cursor : move
        }
        .img img, .imgportrait img {
            max-width: 100px; 
            height: auto;
            cursor : move
        }

        .menu-item:hover .img, .menu-item:hover .imgportrait {
            display: block; 
        }
        .menu-item:hover .img, .menu-item:hover .imgportrait {
            display: block; 
        }
        
        
        .gallery, .portrait-gallery, .landscape-gallery {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            margin-top: 30px;
            cursor : move
            z-index: 15; 
        }
        .gallery-item {
            margin: 10px;
            position: relative;
            overflow: hidden;
            width:250; 
            height: 250px; 
            cursor : move
        }
        .gallery-item img {
            transition: transform 0.5s;
            width: auto;
            height: 100%;
            cursor : move
        }
        .gallery-item:hover img {
            transform: scale(2);
            cursor : move
        }
        
        
        .text-zone {
            width: 60%;
            margin-top: 20px;
            margin-bottom: 20px;
            margin-left: 300px;
            text-align: center;
            padding: 10px;
            z-index: 1003; 
        }
        .text-zone p {
            font-size: 18px;
            line-height: 1.6;
            color: red; 
        
        }

            .lienmega {
            margin: 100px;
            font-size: 20px; 
            color: red; 
            background-color : white;
            text-decoration: none; 
            position: relative; 
        }
        .lienmega:hover {
            font-style: italic;
            text-decoration: underline;
            color: white; 
            background-color : red;
            cursor : alias
            
        }


        .large-images img {
            position: absolute;
            width: 400px; 
            height: auto;
            z-index: 0; 
        } 


        footer a {
            margin: 20px;
            font-size: 12px;
            color: white;
            text-decoration: line-through;
            justify-content: right;
        }
        footer a:hover {
            color: red;
            text-decoration: underline overline;
        }
        .button-container {
    position: fixed;
    bottom: 20px; 
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    animation: buttonMove 4s infinite; 
}

@keyframes buttonMove {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(20px); }
}

.open-video-button {
    width: 50px;
    height: 50px;
    cursor : alias
}
    
    </style>
</head>
<body>
    <!--[if lt IE 7]><p class="chromeframe">Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p><![endif]-->
    <div class="video-background">
        <video autoplay loop muted>
            <source src="chair/synthèse (fanzine)/rendus/synthèse_rendu_page.mp4" type="video/mp4">
            Your browser does not support the video tag.
        </video>
    </div>
    <header>
        <div class="nom">
            <a href="index.html" style="color: inherit; text-decoration: none;">Maison Pleine</a>
        </div>
    </header>
    
    <!-- Grandes images derrière le contenu -->
    <div class="large-images">
        <img src="synthèse_1.jpg" alt="f.1" style="top: 0%; left: 10%;">
        <img src="synthèse_2.jpg" alt="f.2" style="top: 300%; right: 0%;">
        <img src="synthèse_3.jpg" alt="f.3" style="bottom: -200%; left: 10%;">
        <img src="synthèse_4.jpg" alt="f.4" style="bottom: -100%; right: 0%;">
        <img src="synthèse_5.jpg" alt="f.5" style="top: 80%; left: 80%; transform: translate(-50%, -50%);">
        <img src="synthèse_6.jpg" alt="f.5" style="top: 70%; left: 20%; transform: translate(-50%, -50%);">
    </div>

   
    <div class="menu">
        <a href="inventaire.html" class="menu-item">inventaire
            <div class="img">
                <img src="chair/inventaire (cartes)/img/f/inventaire_f.2.jpg" alt="cartes">
            </div>
        </a>
        <a href="disque.html" class="menu-item">disque
            <div class="imgportrait">
                <img src="chair/disque (boîte)/img/f/disque_f.3.jpg" alt="boîte">
            </div>
        </a>
        <a href="protocole.html" class="menu-item">protocole
            <div class="imgportrait">
                <img src="chair/protocole (notice)/img/f/protocole_f.1.jpg" alt="notice">
            </div>
        </a>
        <a href="attributs.html" class="menu-item">attributs
            <div class="img">
                <img src="chair/attributs (affiches1)/img/f/attributs_f.9.jpg" alt="affichettes">
            </div>
        </a>
        <a href="épisodes.html" class="menu-item">épisodes
            <div class="img">
                <img src="chair/épisodes (prints)/img/f/épisodes_f_TT1811315181685 YYY.4.jpg" alt="prints">
            </div>
        </a>
        <a href="synthèsewe.html" class="menu-item">synthèse
            <div class="imgportrait">
                <img src="synthèse_5.jpg" alt="fanzine">
            </div>
        </a>
    </div>
    

        <div class="landscape-gallery">
            <div class="gallery-item">
                <img src="chair/synthèse (fanzine)/img/scan/synthèse_scan_1.jpg" alt="scan.1">
            </div>

            <div class="gallery-item">
                <img src="chair/synthèse (fanzine)/img/scan/synthèse_scan_2.jpg" alt="scan.2">
            </div>
            <div class="gallery-item">
                <img src="chair/synthèse (fanzine)/img/scan/synthèse_scan_3.jpg" alt="scan.3">
            </div>
            <div class="gallery-item">
                <img src="chair/synthèse (fanzine)/img/scan/synthèse_scan_4.jpg" alt="scan.4">
            </div>
            <div class="gallery-item">
                <img src="chair/synthèse (fanzine)/img/scan/synthèse_scan_5.jpg" alt="scan.5">
            </div>
            <div class="gallery-item">
                <img src="chair/synthèse (fanzine)/img/scan/synthèse_scan_6.jpg" alt="scan.6">
            </div>
            <div class="gallery-item">
                <img src="chair/synthèse (fanzine)/img/scan/synthèse_scan_7.jpg" alt="scan.7">
            </div>
            <div class="gallery-item">
                <img src="chair/synthèse (fanzine)/img/scan/synthèse_scan_8.jpg" alt="scan.8">
            </div>
            <div class="gallery-item">
                <img src="chair/synthèse (fanzine)/img/scan/synthèse_scan_9.jpg" alt="scan.9">
            </div>
            <div class="gallery-item">
                <img src="chair/synthèse (fanzine)/img/scan/synthèse_scan_10.jpg" alt="scan.10">
            </div>
            <div class="gallery-item">
                <img src="chair/synthèse (fanzine)/img/scan/synthèse_scan_11.jpg" alt="scan.11">
            </div>
            <div class="gallery-item">
                <img src="chair/synthèse (fanzine)/img/scan/synthèse_scan_12.jpg" alt="scan.12">
            </div>
            <div class="gallery-item">
                <img src="chair/synthèse (fanzine)/img/scan/synthèse_scan_13.jpg" alt="scan.13">
            </div>
            <div class="gallery-item">
                <img src="chair/synthèse (fanzine)/img/scan/synthèse_scan_14.jpg" alt="scan.14">
            </div>
            <div class="gallery-item">
                <img src="chair/synthèse (fanzine)/img/scan/synthèse_scan_15.jpg" alt="scan.15">
            </div>
           
            <div class="gallery-item">
                <img src="chair/synthèse (fanzine)/img/scan/synthèse_scan_16.jpg" alt="scan.16">
            </div>
            <div class="gallery-item">
                <img src="chair/synthèse (fanzine)/img/scan/synthèse_scan_17.jpg" alt="scan.17">
            </div>
            <div class="gallery-item">
                <img src="chair/synthèse (fanzine)/img/scan/synthèse_scan_18.jpg" alt="scan.18">
            </div>
            <div class="gallery-item">
                <img src="chair/synthèse (fanzine)/img/scan/synthèse_scan_19.jpg" alt="scan.19">
            </div>
            <div class="gallery-item">
                <img src="chair/synthèse (fanzine)/img/scan/synthèse_scan_20.jpg" alt="scan.20">
            </div>
            <div class="gallery-item">
                <img src="chair/synthèse (fanzine)/img/scan/synthèse_scan_21.jpg" alt="scan.21">
            </div>
            <div class="gallery-item">
                <img src="chair/synthèse (fanzine)/img/scan/synthèse_scan_22.jpg" alt="scan.22">
            </div>
            <div class="gallery-item">
                <img src="chair/synthèse (fanzine)/img/scan/synthèse_scan_23.jpg" alt="scan.23">
            </div>
            <div class="gallery-item">
                <img src="chair/synthèse (fanzine)/img/scan/synthèse_scan_24.jpg" alt="scan.24">
            </div>
            <div class="gallery-item">
                <img src="chair/synthèse (fanzine)/img/scan/synthèse_scan_25.jpg" alt="scan.25">
            </div>
            <div class="gallery-item">
                <img src="chair/synthèse (fanzine)/img/scan/synthèse_scan_26.jpg" alt="scan.26">
            </div>
            <div class="gallery-item">
                <img src="chair/synthèse (fanzine)/img/scan/synthèse_scan_27.jpg" alt="scan.27">
            </div>
            <div class="gallery-item">
                <img src="chair/synthèse (fanzine)/img/scan/synthèse_scan_28.jpg" alt="scan.28">
            </div>
            <div class="gallery-item">
                <img src="chair/synthèse (fanzine)/img/scan/synthèse_scan_29.jpg" alt="scan.29">
            </div>
            <div class="gallery-item">
                <img src="chair/synthèse (fanzine)/img/scan/synthèse_scan_30.jpg" alt="scan.30">
            </div>
            <div class="gallery-item">
                <img src="chair/synthèse (fanzine)/img/scan/synthèse_scan_31.jpg" alt="scan.31">
            </div>
            <div class="gallery-item">
                <img src="chair/synthèse (fanzine)/img/scan/synthèse_scan_32.jpg" alt="scan.32">
            </div>
            <div class="gallery-item">
                <img src="chair/synthèse (fanzine)/img/scan/synthèse_scan_33.jpg" alt="scan.33">
            </div>
            <div class="gallery-item">
                <img src="chair/synthèse (fanzine)/img/scan/synthèse_scan_34.jpg" alt="scan.34">
            </div>
            <div class="gallery-item">
                <img src="chair/synthèse (fanzine)/img/scan/synthèse_scan_35.jpg" alt="scan.35">
            </div>
            
        </div>


        <!-- Zone de texte -->
        <div class="text-zone">
            <p>
                ╲/\╭(ఠఠ益ఠఠ)╮/\╱\
            ☆(#××) (( _ _ ))..zzzZZ
                °◦=͟͟͞͞ʕ̡̢̡ु•̫͡•ʔ̡̢̡ु ☏(๑මั‸මั๑)
    ⸎
 

</p>

        </div>
        
    <!-- Bouton pour ouvrir la vidéo -->
<div class="button-container">
    <img src="openvideo.gif" alt="Open Video" class="open-video-button" onclick="window.location.href='chair/synthèse (fanzine)/rendus/synthèse_rendu_principal.mp4'">
</div>

    <footer>
        <a href="https://linktr.ee/cak333" target="_blank">linktr.ee/cak333</a>
    </footer>
   
</body>
</html>