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

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: 200px;
            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/protocole (notice)/rendus/protocole_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>
    
    <
    <div class="large-images">
        <img src="chair/protocole (notice)/img/f/protocole_f.1.jpg" alt="f.1" style="top: 0%; left: 10%;">
        <img src="chair/protocole (notice)/img/f/protocole_f.2.jpg" alt="f.2" style="top: 80%; right: 0%;">
        
    </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/protocole (notice)/img/num/protocole_1.jpg" alt="1">
            </div>

            <div class="gallery-item">
                <img src="chair/protocole (notice)/img/scan/protocole_scan_1.jpg" alt="scan.1">
            </div>
            <div class="gallery-item">
                <img src="chair/protocole (notice)/img/num/protocole_2.jpg" alt="2">
            </div>
            <div class="gallery-item">
                <img src="chair/protocole (notice)/img/scan/protocole_scan_2.jpg" alt="scan.2">
            </div>
            
            
        </div>


        <div class="text-zone">
            <p>
   Toute l'obscurité brille sous nos pieds, et c'est déjà pour nous qu'elle était là. C'est à moi que tu parles?
⸎
 

</p>

        </div>
        
    
<div class="button-container">
    <img src="openvideo.gif" alt="Open Video" class="open-video-button" onclick="window.location.href='chair/protocole (notice)/rendus/protocole_rendu_principal.mp4'">
</div>

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