/*---------------------------------------------------------------------------------------------------------------------------*/
.body-site{
margin: 0;}
/*---------------------------------------------------------------------------------------------------------------------------*/
.grid-links{
position: absolute;
top: 84px;/*
bottom: 260px;*/
left: 0;
right: 0;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
box-sizing: border-box;}
/*---------------------------------------------------------------------------------------------------------------------------*/
#links{
width: 520px;
margin: 0;/*
padding-top: 57px;*/
z-index: 7;}
/*---------------------------------------------------------------------------------------------------------------------------*/
.grid-a{
display: grid;
grid-template-columns: 10% 80% 10%;
grid-template-rows: 1fr;
text-align: center;
font-size: 17px;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;}
/*---------------------------------------------------------------------------------------------------------------------------*/
.grid-a img{
padding: 9px;}
/*---------------------------------------------------------------------------------------------------------------------------*/
#scaleA{
width: 24px;}
/*---------------------------------------------------------------------------------------------------------------------------*/
#m-links-logo{
width: 100%;
text-align: center;
padding-bottom: 28px;}
/*---------------------------------------------------------------------------------------------------------------------------*/
#m3ddjpg{
width: 110px;
border-radius: 60px;/*
box-shadow: 0 0 20px 15px #48abe0;*/}
/*---------------------------------------------------------------------------------------------------------------------------*/
.home-hr{
border: none;
width: 100%;
border-bottom: 2px solid #0000006e;
box-shadow: 0 4px 4px -4px #000000;}
/*---------------------------------------------------------------------------------------------------------------------------*/
.u2{
padding-top: 20px;
padding-bottom: 30px;}
.lk-u2{
padding-top: 30px;
padding-bottom: 200px;}
/*---------------------------------------------------------------------------------------------------------------------------*/
.u3{
padding-top: 0px;
padding-bottom: 22px;}
.lk-u3{
padding-top: 30px;
padding-bottom: 160px;}
/*---------------------------------------------------------------------------------------------------------------------------*/
.li{
margin: 6px 0px 6px 0px;
background-color: #50505094;
border-radius: 12px;
height: 42px;
/*border: 1px solid rgb(29, 29, 29);*/
box-shadow: 0 6px 6px -5px #02020263;
text-shadow: 1px 1px rgba(0, 0, 0, 0.623);
cursor: pointer;
z-index: 8;}
/*---------------------------------------------------------------------------------------------------------------------------*/
.li a span{
line-height: 42px;}
/*---------------------------------------------------------------------------------------------------------------------------*/
.hr{
margin: 10px 0px 10px 0px;}
/*---------------------------------------------------------------------------------------------------------------------------*/
.star-hr{
width: 100%;
position: relative;}
/*---------------------------------------------------------------------------------------------------------------------------*/
.div-mini-star{
width: 100%; 
text-align: center; 
margin: 0;
padding: 0;}
/*---------------------------------------------------------------------------------------------------------------------------*/
.star-top1,
.star-top2{
position: absolute; 
left: 50%;
top: -600%;
transform: translateX(-50%);
color: rgb(22, 22, 22);
font-size: 18px;
cursor: default;}
/*---------------------------------------------------------------------------------------------------------------------------*/
.star-top1{/*
display: inline-block;
top: -12px;*/}
/*---------------------------------------------------------------------------------------------------------------------------*/
.star-top2{/*
display: none;
top: -10px;*/}
/*---------------------------------------------------------------------------------------------------------------------------*/
.grid-a:hover{
background-color: #9b9b9b73;
border-radius: 12px;
height: 42px;
box-shadow: 0 8px 8px -5px #0000002f;
font-size: 18px;/*
transform: translateX(5px);*/}
/*---------------------------------------------------------------------------------------------------------------------------*/
.go{
font-size: 24px;
line-height: 37px;
margin-left: 14px;}
/*---------------------------------------------------------------------------------------------------------------------------*/
.move{
scale: 1.2;
animation: move 0.2s forwards;}
/*---------------------------------------------------------------------------------------------------------------------------*/
.scale{
scale: 1.15;}

.classic,
.classic2{
background-image:
url("/Img/Backgrounds/Statiques/wall-min.webp");
background-position: 100% 57%;  
background-size: cover;
background-repeat: repeat;}

/*   
.admin{
background: linear-gradient(to bottom, #292929, #272727);
background-image: 
url("/Img/Backgrounds/Dynamiques/admin2.gif");
background-position: center; 
background-size: cover;
background-repeat: no-repeat;
animation: fade 1s forwards;}

.devkit{
background-image: 
url("/Img/Backgrounds/Dynamiques/download.mp4");
background-position: center;
background-size: cover;
background-repeat: repeat;
animation: fade 1s forwards;}

.news{
background: linear-gradient(to bottom, #292929, #272727);
background-image: 
url("/Img/Backgrounds/Dynamiques/news.gif");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
animation: fade 1s forwards;}

.store{
background: linear-gradient(to bottom, #292929, #272727);
background-image: 
url("/Img/Backgrounds/Dynamiques/store.gif");
background-position: center; 
background-size: cover;
background-repeat: no-repeat;
animation: fade 1s forwards;}

.insl{
background: linear-gradient(to bottom, #292929, #272727);
background-image: 
url("/Img/Backgrounds/Dynamiques/castle.webp");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
animation: fade 1s forwards;}

.slstore1{
background: linear-gradient(to bottom, #292929, #272727);
background-image: 
url("/Img/Backgrounds/Dynamiques/shopnow1.gif"),
url("/Img/Backgrounds/Dynamiques/slstore12.gif");
background-position: 66% -5%, center;
background-size: 460px 260px, cover;
background-repeat: no-repeat, no-repeat;
animation: fade 1s forwards;}

.slstore2{
background: linear-gradient(to bottom, #292929, #272727);
background-image: 
url("/Img/Backgrounds/Dynamiques/shopnow2.gif"),
url("/Img/Backgrounds/Dynamiques/slstore12.gif");
background-position: 66% -5%, center;
background-size: 460px 260px, cover;
background-repeat: no-repeat, no-repeat;
animation: fade 1s forwards;}

.slmarket{
background: linear-gradient(to bottom, #292929, #272727);
background-image:
url("/Img/Backgrounds/Dynamiques/market.gif");
background-position: 1 center; 
background-size: cover;
background-repeat: no-repeat;
animation: fade 1s forwards;}

.primfeed{
background-image: 
url("/Img/Backgrounds/Dynamiques/network.gif");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
animation: fade 1s forwards;}

.tiktok{
background-image: 
url("/Img/Backgrounds/Dynamiques/tiktok.gif");
background-position: 590px;
background-size: cover;
background-repeat: repeat;
animation: fade 1s forwards;}

.youtube{
background-image: 
url("/Img/Backgrounds/Dynamiques/youtube.gif");
background-position: center; 
background-size: cover;
background-repeat: no-repeat;
animation: fade 1s forwards;}

.instagram{
background-image: 
url("/Img/Backgrounds/Dynamiques/instagram.gif");
background-position: center; 
background-size: cover;
background-repeat: no-repeat;
animation: fade 1s forwards;}

.flickr{
background-image: 
url("/Img/Backgrounds/Dynamiques/flickr3.gif");
background-position: center 28%; 
background-size: cover;
background-repeat: no-repeat;
animation: fade 1s forwards;}

.contact{
background-image: 
url("/Img/Backgrounds/Dynamiques/contact.gif");
background-position: center; 
background-size: cover;
background-repeat: no-repeat;
animation: fade 1s forwards;}


.ressources{
background-image: 
url("/Img/Backgrounds/Dynamiques/ressources4.gif");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
animation: fade 1s forwards;}
*/

/* =========================================================
CONTENEUR PRINCIPAL
========================================================= */
.wallp{
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 255, 255, 0.185);
z-index: 1;}

#backgr{
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, #292929, #272727);
z-index: 0;}

.wallp-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.wallp-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: none;
}

#video-wallp {
    z-index: 2;
    overflow: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

/* en mode TikTok repeat, on masque les 2 vidéos principales */
#video-wallp.repeat-mode .wallp-video {
    opacity: 0 !important;
    pointer-events: none;
}

/* vidéos principales */
.wallp-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    pointer-events: none;
    transition: opacity 0.45s ease;
}

/* vidéo affichée */
.wallp-video-visible {
    opacity: 1;
    z-index: 2;
}

/* vidéo cachée mais toujours présente pour permettre le fondu */
.wallp-video-hidden {
    opacity: 0;
    z-index: 1;
}

.wallp-overlay {
    position: absolute;
    inset: 0;
    z-index: 3;
    overflow: hidden;
    pointer-events: none;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

.repeat-video {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    pointer-events: none;
}

.wallp-tiktok {
    position: absolute;
    inset: 0;
    z-index: 3;

    background-image: url("/Img/Backgrounds/Dynamiques/tiktok.gif");
    background-position: 590px;
    background-size: cover;
    background-repeat: repeat;

    pointer-events: none;

    transition: opacity 0.35s ease, visibility 0.35s ease;
}

.wallp-shopnow {
    position: absolute;
    inset: 0;
    z-index: 3;

    background-image: url("/Img/Backgrounds/Dynamiques/shopnow1.gif");
    background-position: 66% -5%, center;
    background-size: 460px 260px;
    background-repeat: no-repeat;

    pointer-events: none;

    transition: opacity 0.35s ease, visibility 0.35s ease;
}

.wallp-shopnow2 {
    position: absolute;
    inset: 0;
    z-index: 3;

    background-image: url("/Img/Backgrounds/Dynamiques/shopnow2.gif");
    background-position: 66% -5%, center;
    background-size: 460px 260px;
    background-repeat: no-repeat;

    pointer-events: none;

    transition: opacity 0.35s ease, visibility 0.35s ease;
}

/* positions spécifiques */
.pos-default   { object-position: center center; }
.pos-devkit    { object-position: center center; }
.pos-admin     { object-position: center center; }
.pos-news      { object-position: center center; }
.pos-insl      { object-position: center center; }
.pos-slmarket  { object-position: center center; }
.pos-primfeed  { object-position: center center; }
.pos-tiktok    { object-position: 590px center; }
.pos-youtube   { object-position: center center; }
.pos-instagram { object-position: center center; }
.pos-flickr    { object-position: center 38%; }
.pos-contact   { object-position: center center; }
.pos-slstore1  { object-position: center center; }
.pos-slstore2  { object-position: center center; }

#homlog-div{
position: absolute;
float: right;
top: 27px;
right: 24px;
width: 46px;
text-align: center;
padding: 10px;
background-color: #50505094;
border-radius: 12px;}

#connect{
background-color: #007bff;
border-radius: 12px;}

#hr-connect,
#connect-li{
display: none;}


/* MOBILES en mode portrait */
@media (max-width: 600px) and (orientation: portrait) 
{
    .star-top1,
    .star-top2{
    top: -500%;}

    #hr-connect,
    #connect-li{
    display: block;}

    #wallp{
    display: none;}

    /* [18/09] LA PAGE ENTIERE DEFILE, fond compris : premier ecran = 100svh (barre du haut translucide posee dessus,
       fenetre de connexion, rangee d'icones), le pied de page vient juste apres et n'apparait qu'au defilement. Le
       papier peint est un pseudo-element de <body> (voir en fin de fichier) qui couvre toute la hauteur du document :
       il passe sous la barre et sous le pied, et il est emporte par le defilement comme le reste. */
    #body{
    position: relative;
    top: 0;
    height: auto;
    min-height: 100svh;
    padding-top: 100svh;         /* reserve le premier ecran ; les elements qui l'occupent sont en absolu (top: 0).
                                    svh (petit viewport, barres du navigateur deployees) et non dvh : la hauteur ne bouge
                                    plus quand Safari replie ses barres au defilement — plus de decalage de la rangee ni du pied  [18/09] */
    box-sizing: border-box;
    overflow: visible;
    background: transparent;}

    #body > footer{
    position: relative;
    margin: calc(100lvh - 100svh) 0 0 0;   /* la hauteur des barres de Safari : le pied commence SOUS la barre d'outils translucide, invisible avant le defilement  [18/09] */
    z-index: 20;}
    #body > footer .grid-footer{
    position: static !important;
    bottom: auto !important;
    height: auto !important;}

    /* [18/09] la barre du haut (header) n'est plus masquee sur telephone : boutons + theme comme sur PC */
    #header-login/*,
    #page-content*/{ 
    display: none;}

    .classic,
    .classic2{
    background-image:
    url("/Img/Backgrounds/Statiques/wall-min.webp");
    background-position: 630% 0%;  
    background-size: 200% 120%;
    background-repeat: repeat;}

    #page-content{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100svh;}             /* [18/09] le premier ecran, pas tout #body (qui contient aussi le pied) */

    .grid-links{
    width: 100%;
    grid-template-columns: 6% 88% 6%;
    grid-template-rows: 1fr;
    top: 20px;}

    #links{
    width: 88%;
    padding-top: 0px;}

    #menu-liens{
    margin-top: 10px;
    }


/* Désactivation des effets hover/click sur mobile */
.grid-a:hover{
    background-color: transparent;
    box-shadow: none;
    font-size: 17px;
    height: auto;
    border-radius: 0;}
/*
    .li:hover{
    background-color: #7a7a7aa6;}
*/
    .move,
    .scale{
    scale: 1;
    animation: none;}

    /* Éclaircir les boutons sauf le bouton bleu de connexion/déconnexion */
    .li{
    background-color: #7a7a7a6e;}

    #connect,
    #connect-li{
    background-color: #007bff;}











}

/* MOBILES en mode paysage */
@media (max-width: 1000px) and (orientation: landscape) 
{
    #menu-liens{
    margin-top: 10px;
    }

    #hr-connect,
    #connect-li{
    display: block;}

    #wallp{
    display: none;}

    /* [18/09] LA PAGE ENTIERE DEFILE, fond compris : premier ecran = 100svh (barre du haut translucide posee dessus,
       fenetre de connexion, rangee d'icones), le pied de page vient juste apres et n'apparait qu'au defilement. Le
       papier peint est un pseudo-element de <body> (voir en fin de fichier) qui couvre toute la hauteur du document :
       il passe sous la barre et sous le pied, et il est emporte par le defilement comme le reste. */
    #body{
    position: relative;
    top: 0;
    height: auto;
    min-height: 100svh;
    padding-top: 100svh;         /* reserve le premier ecran ; les elements qui l'occupent sont en absolu (top: 0).
                                    svh (petit viewport, barres du navigateur deployees) et non dvh : la hauteur ne bouge
                                    plus quand Safari replie ses barres au defilement — plus de decalage de la rangee ni du pied  [18/09] */
    box-sizing: border-box;
    overflow: visible;
    background: transparent;}

    #body > footer{
    position: relative;
    margin: calc(100lvh - 100svh) 0 0 0;   /* la hauteur des barres de Safari : le pied commence SOUS la barre d'outils translucide, invisible avant le defilement  [18/09] */
    z-index: 20;}
    #body > footer .grid-footer{
    position: static !important;
    bottom: auto !important;
    height: auto !important;}

    /* [18/09] la barre du haut (header) n'est plus masquee sur telephone : boutons + theme comme sur PC */
    #header-login/*,
    #page-content*/{ 
    display: none;}

    .classic,
    .classic2{
    background-image:
    url("/Img/Backgrounds/Statiques/wall-min.webp");
    background-position: 630% 0%;  
    background-size: 200% 120%;
    background-repeat: repeat;}

    #page-content{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100svh;}             /* [18/09] le premier ecran, pas tout #body (qui contient aussi le pied) */

    .grid-links{
    width: 100%;
    grid-template-columns: 15% 70% 15%;
    grid-template-rows: 1fr;
    top: 20px;}

    #links{
    width: 70%;
    padding-top: 0;}


    #m-links-logo{
    padding-bottom: 14px;}

    /* Désactivation des effets hover/click sur mobile */
    .grid-a:hover{
    background-color: transparent;
    box-shadow: none;
    font-size: 17px;
    height: auto;
    border-radius: 0;}
/*
    .li:hover{
    background-color: #7a7a7aa6;}
*/
    .move,
    .scale{
    scale: 1;
    animation: none;}

    /* Éclaircir les boutons sauf le bouton bleu de connexion/déconnexion */
    .li{
    background-color: #7a7a7a6e;}

    #connect,
    #connect-li{
    background-color: #007bff;}



    
}

/* MOBILE — les liens de l'accueil centres verticalement (centre a 45 % de l'ecran), la page defile si la liste est plus haute  [06/09] */
@media (max-width: 600px) and (orientation: portrait), (max-width: 1000px) and (orientation: landscape)
{
    .grid-links{
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    min-height: 100vh !important;
    height: auto !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column;
    align-items: safe center !important;
    justify-content: center !important;
    padding: 20px 22px calc(20vh + 20px) 22px !important;   /* centre a 33 % de l'ecran */
    box-sizing: border-box !important;
    transform: none !important;}

    #links{
    width: 94% !important;
    max-width: 520px;
    margin: 0 auto !important;}
}

/* MOUTON DE PREMIERE VISITE ///////////////////////////////////////////////////////////////////////////////////////////////*/
/* La position verticale est calculee en JS (home.js) pour poser ses pattes sur le sol du wallpaper. */
#sheep{
position: absolute;   /* [19/09] dans #wallp (fixe, plein ecran) : absolu vaut fixe, et il entre dans son empilement */
right: 0;
top: 0;
z-index: 0;   /* [19/09] premier enfant de #wallp, meme rang que #backgr qui le suit dans le DOM : le fond, les videos (2) et les gifs (3) le couvrent */
width: 42vw;
min-width: 360px;
max-width: 780px;
height: auto;
display: none;
opacity: 0;
pointer-events: none;
user-select: none;
transition: opacity 0.2s ease;}

#sheep.show{
display: block;
opacity: 1;}


@media (max-width: 1000px){
    #sheep{
    width: 66vw;
    min-width: 0;}
}

/* BANDE D'ICONES AU-DESSUS DU PIED DE PAGE  [17/09] /////////////////////////////////////////////////////////////////////////
   Telephone, quel que soit le parametre « links » [18/09]. La rangee est ecrite par home.php en tete du pied de page (footer.php) (voir aussi le bloc en fin de fichier) : open_login() masque #links, la rangee reste avec la fenetre.
   Les liens gardent leur balisage : seuls le libelle, le chevron et les separateurs sont retires, et « Se connecter »
   disparait puisque la fenetre le remplace. */
#bande-liens{
display: none;                  /* ecran large : le menu est celui de #links  [18/09] */
margin: 0;
padding: 0 10px;
box-sizing: border-box;
list-style: none;}

/* c'est #menu-liens-bande, seul enfant de la bande, qui porte les <li> : la rangee se declare donc SUR LUI  [17/09] */
#bande-liens #menu-liens-bande{
display: flex;
flex-wrap: nowrap;              /* UNE SEULE LIGNE : les pastilles se resserrent plutot que de passer dessous */
align-items: center;
justify-content: center;
gap: clamp(6px, 2.4vw, 16px);
margin: 0;
padding: 0;
list-style: none;}

#bande-liens .li{
width: clamp(36px, 11vw, 46px);
height: clamp(36px, 11vw, 46px);
flex: none;
margin: 0;
padding: 0;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;}

#bande-liens .grid-a,
#bande-liens .grid-a:hover{
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
border-radius: 50%;
font-size: 0;}

#bande-liens .grid-a img{
padding: 0;
width: clamp(17px, 5.4vw, 22px);
height: auto;}

/* libelle, chevron, separateurs, et le lien « Se connecter » remplace par la fenetre.
   [19/09] Le lien « Contact » (#contact) quitte la rangee : sur telephone il est dans les mentions du pied de page
   (footer.php, #contact-pied). Sur ecran large il reste dans le menu #links, qui ne passe pas par cette regle. */
#bande-liens .titre,
#bande-liens .go,
#bande-liens #connect-li,
#bande-liens #hr-connect,
#bande-liens li:has(.hr),
#bande-liens li:has(#contact){display: none;}

/* Le logo rond de l'accueil disparait : sous « sl-sans-store » la page n'a plus qu'un contenu, la fenetre de connexion.
   Il reste ecrit dans home.php pour l'ecran large, ou la page garde ses tuiles. */
@media (max-width: 1000px){ #m-links-logo{display: none;} }

/* LE PAPIER PEINT PASSE SOUS LA BARRE DU HAUT  [18/09] //////////////////////////////////////////////////////////////////////
   <div id="wallp"> ne portait aucune regle : c'etait une boite statique de hauteur nulle, et ses enfants (#backgr et les
   videos, en absolu) se calaient sur le premier ancetre positionne — d'ou un papier peint qui commencait sous le header
   au lieu de passer derriere. On lui donne donc la boite qu'il n'avait pas : tout le haut de l'ecran. Le header est en
   z-index 8, le papier peint en 0 : il passe dessous, et la barre translucide du theme clair prend enfin sa couleur. */
#wallp{
position: fixed;      /* fixe et non absolu : la boite ne rallonge pas la page, donc pas de barre de defilement ni de bande vide sous le fond */
inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;}

#wallp > #backgr,
#wallp > #video-wallp{
position: absolute;
inset: 0;
width: 100%;
height: 100%;}

/* LE MOUTON PASSE SOUS LES PAPIERS PEINTS  [19/09] (annule le z-index 4 du 18/09). Place dans #wallp, il est peint sur
   le papier peint fixe et couvert par #backgr, les videos et les gifs des qu'un wallpaper est joue : il disparait et
   revient sans une ligne de JS. */

/* PAS DE MOUTON SOUS 1000 PX  [19/09] — ni telephone ni tablette. Compter sur #wallp ne suffisait pas : il n'est masque
   que sous 600 px en portrait et 1000 px en paysage, si bien qu'une tablette en portrait (768 px) affichait le mouton,
   mesure a l'appui. La regle vise aussi #sheep.show, sinon la classe posee par home.js (specificite egale, ecrite plus
   haut) l'emporterait. home.js retire d'ailleurs la balise avant meme de la montrer : ceci est la ceinture. */
@media (max-width: 1000px){
    #sheep,
    #sheep.show{
    display: none;}
}


/* LA PAGE TIENT DANS L'ECRAN SUR TELEPHONE  [18/09] : aucun defilement du document, le fond couvre tout jusqu'au pied. */
@media (max-width: 1000px){
    body.body-site{
    position: relative;          /* le pseudo-element du papier peint (ci-dessous) prend toute la hauteur du document */
    margin: 0;}
    header.header-site{
    position: absolute;          /* accueil seulement : la barre defile avec la page, comme le fond (header.css la fixe ailleurs) */
    top: 0;}

    /* la fenetre d'information (modal_info.css la met en sticky, donc dans le flux) etait repoussee sous le premier ecran par
       le padding-top de #body : ecran vide apres « Reinitialiser le mot de passe ». On la pose sur le premier ecran  [18/09] */
    #body > #modal-info{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: auto;
    height: 100svh;
    padding: 64px 0 20px 0;
    box-sizing: border-box;
    align-items: flex-start;}
}

/* PAPIER PEINT SUR TELEPHONE  [18/09] : pseudo-element absolu de #body (et non de <body>, dont la hauteur peut etre
   bornee a l'ecran par une regle globale), il couvre toute la hauteur de #body — premier ecran, espace reserve aux barres
   de Safari, pied de page — sous la barre du haut et sous le pied, et il defile avec la page. #body est transparent ; #wallp (videos) reste masque. Images du theme : /Theme/wall-min(-clair).webp. */
@media (max-width: 1000px){
    #body.classic::before,
    #body.classic2::before{
    content: '';
    position: absolute;          /* et non fixed : il defile avec la page  [18/09] */
    inset: 0;
    z-index: -1;
    background-image: url("/Theme/wall-min.webp");
    background-position: 630% 0%;   /* cadrage d'origine du telephone (.classic), etire en hauteur : le bas trop clair de l'image reste hors champ */
    background-size: 200% 150%;
    background-repeat: repeat;
    pointer-events: none;}
    [data-theme="light"] #body.classic::before,
    [data-theme="light"] #body.classic2::before{
    background-image: url("/Theme/wall-min-clair.webp");}
    #body.classic,
    #body.classic2{
    background: transparent !important;}
}

/* RANGEE D'ICONES EN TETE DU PIED DE PAGE + BARRE DU HAUT EFFACEE  [18/09] ///////////////////////////////////////////
   Accueil telephone : #bande-liens ouvre le pied de page (home.php -> footer.php). La barre du haut ne garde que le drapeau et le bouton du theme. */
@media (max-width: 1000px){
    /* la rangee ouvre le pied de page (home.php -> footer.php, en tete de .mentions) ; le pied est sous
       le premier ecran, rien n'est visible avant de defiler  [18/09] */
    #bande-liens{
    display: block;
    width: 100%;
    margin: 10px 0 14px 0;
    padding: 0;}       /* le calque #modal-login est en pointer-events: none (modal_mobile.css) */

    header.header-site,
    header.header-site nav#header,
    header.header-site #link-home{
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    filter: none !important;}
    header.header-site #logo-wrap,
    header.header-site #link-home2 #m3dd{
    display: none !important;}

    /* [19/09] le lien « Contact » du menu et le separateur qui le precede : sur telephone le contact est dans le pied de page */
    #menu-liens li:has(#contact),
    #menu-liens li:has(.hr):has(+ li:has(#contact)){
    display: none;}
}