/* =============================================================================

 *		                _style.css : mise en forme du site
 
 * ============================================================================= */

/* -----------------------------------------------------------------------------
 * Polices de caracteres
 * - Fonts : https://www.fontsquirrel.com/
 * - Convertisseurs ttf / otf / woff : https://everythingfonts.com/
 * ----------------------------------------------------------------------------- */

@font-face { font-family: 'Font_Nav' ; src: url('fonts/FiraSans-Bold.otf') format('truetype'); }
@font-face { font-family: 'Font_Titres' ; src: url('fonts/JackArmstrongBB-BoldItalic.otf') format('truetype'); }
@font-face { font-family: 'Font_Texte' ; src: url('fonts/SourceSansPro-Regular.otf') format('truetype'); }
@font-face { font-family: 'Font_SF' ; src: url('fonts/Pitviper.ttf') format('truetype'); }
@font-face { font-family: 'Font_Fixed' ; src: url('fonts/InstructionBold.ttf') format('truetype'); }

/* -----------------------------------------------------------------------------
 * Partie principale
 * ----------------------------------------------------------------------------- */
html, body { 
    margin: 0; color: #fff;
    font-family: Roboto, Helvetica, Arial, sans-serif; font-size: 0.75em;
    overflow: hidden; scroll-behavior: smooth; scrollbar-width: none;
}
body { position: fixed; left: 0; top: 0; right: 0; bottom: 0; } 

/* -----------------------------------------------------------------------------
 * Sections (qui prennent chacune une hauteur de page)
 * ----------------------------------------------------------------------------- */
.section      { height: 100vh; display: flex; justify-content:center; align-items: flex-start; }
.sect_content { display:flex; position:relative; justify-content:center; align-items: start; width:100%; height:100%; }
.sect_reserve { 
    position:absolute; left:0; width:100%; z-index:50; 
    display:flex; flex-direction:column; justify-content:start; align-items:center; 
    background-color:rgba(255,255,255,0.5); color:rgb(204,56,54) ; backdrop-filter:blur(6px); 
    font-family:Font_Texte ; text-align:center;
}
.sect_reserve h2 { font-family:Font_Titres ; }
.sect_reserve a { 
    font-family:Font_Titres ; color:DarkBlue; cursor:url('images/curseur_main.png') 90 4, auto;  
    border:solid 1px black; border-radius:5px; background-color:LightBlue; 
}
.cadre_lien {     
    display: flex; justify-content:center; align-items:center; border-radius:10px; 
    background-color:rgba(255,255,255,0.4); border:solid 2px DarkBlue; 
}
.cadre_lien:hover { background-color:white; cursor:url('images/curseur_main.png') 90 4, auto;  }

.A0_accueil    { background: no-repeat center url('backgrounds/bg_sky.webp'); background-size: cover; } 
.B0_zinvolte   { background: no-repeat center url('backgrounds/bg_sky.webp'); background-size: cover; } 
.C0_atvsop     { background: no-repeat center url('backgrounds/bg_sky.webp'); background-size: cover; } 
.D0_evenements { background: no-repeat center url('backgrounds/bg_evt.webp'); background-size: cover; } 
.E0_adherents  { background: no-repeat center url('backgrounds/bg_adh.webp'); background-size: cover; } 
.F0_bureau     { background: no-repeat center url('backgrounds/bg_off.webp'); background-size: cover; } 
.G0_contact    { background: no-repeat center url('backgrounds/bg_sky.webp'); background-size: cover; } 
.H0_connexion  { background: no-repeat center url('backgrounds/bg_sky.webp'); background-size: cover; } 

@media (orientation: landscape) { 
    .sect_content { margin-top:6vh; }
    .sect_reserve { height:94vh; font-size: 2.5vw; border-radius:10px; } 
    .sect_smiley { height:20vh; }
    .cadre_lien { width:28vw ; height:8vh; font-size:2vw; color:Darkblue; }
}
@media (orientation: portrait)  { 
    .sect_content { margin-top:6vh; }
    .sect_reserve { height:86.5vh; font-size: 5vw; border-radius:10px; } 
    .sect_smiley { height:15vh; }
    .cadre_lien { width:65vw ; height:6vh; font-size:4vw; color:Darkblue; }
}

/* -----------------------------------------------------------------------------
 * Image et Menu en haut de page
 * ----------------------------------------------------------------------------- */
.logo_atvsop       { position:fixed; z-index:101; top: 1vh; left: 1vw;  }
.logo_atvsop:hover { transform: rotate(-15deg) ;  cursor:url('images/curseur_main.png') 90 4, auto; }

nav {
    position: fixed; width:100vw; top: 0vh; gap:1vw; z-index:100; 
    display: flex; align-items:center;
    background-color:rgba(255,255,255,0.4); border-bottom:solid 2px DarkBlue; box-shadow:3px 3px 6px rgba(0,0,0,0.6) ;
}

.nav_a { 
    display: flex; justify-content:center; align-items:center; 
    text-align:center; text-decoration: none; border:solid 1px rgba(0,0,0,0); 
    font-family:Font_Nav ; color:DarkBlue; 
    cursor:url('images/curseur_main.png') 90 4, auto; 
}
.nav_a:hover { border:solid 1px DarkBlue ; border-radius:5px; color:DarkBlue; background-color:white; }
.nav_a_sel { border:solid 1px DarkBlue ; border-radius:5px; color:white; background-color:rgb(204,56,54); }
.encadre {  border:solid 1px DarkBlue ; border-radius:5px; }

@media (orientation: landscape) { 
    .logo_atvsop { height:12vh; }
    nav { height:6vh; justify-content:center; }
    .nav_a { width:14vw; height:5vh; font-size: 1.2vw; } 
}
@media (orientation: portrait)  { 
    .logo_atvsop { height:6vh; }
    nav { height:6vh; justify-content:flex-end; }
    .nav_a { width:16vw; height:5vh; font-size: 1vh; } 
}

/* -----------------------------------------------------------------------------
 * Bas de page
 * ----------------------------------------------------------------------------- */
.z_footer { 
    position: fixed; width:100vw; bottom:0vh; z-index:100; 
    display: flex; justify-content:center; align-items:center;
    background-color:rgba(0,0,0,0.4); color:white;  
}
.footer_link { background-color:white; color:black; }
.footer_link:hover { background-color:yellow ; cursor:url('images/curseur_main.png') 90 4, auto !important;  }

@media (orientation: landscape) { .z_footer { height:3.5vh; font-size:0.8vw } }
@media (orientation: portrait)  { .z_footer { height:5vh; font-size: 1vh; flex-direction:column;  } }

/* -----------------------------------------------------------------------------
 * Animations page d'accueil
 * ----------------------------------------------------------------------------- */

@keyframes kf_sousbock { 
      0% { top:110vh; left:40vw; transform:rotateY(-1200deg) rotateX(-600deg); } 
     50% { top:5vh; left:75vw; transform:rotateY(0deg) rotateX(0deg) rotate(15deg); } 
     70% { top:5vh; left:75vw; transform:rotateY(0deg) rotateX(0deg) rotate(15deg); } 
    100% { left:-20vw; } 
} 
.sousbock { position:absolute; top:5vh; right:100vw;  width:25vw; transform:rotate(15deg); animation: kf_sousbock linear 2s; }

@keyframes kf_main { 
      0% { right:100vw; } 
     40% { right:100vw; } 
     50% { right:11.5vw; opacity:1;  } 
     51% { opacity:0;  } 
     70% { right:11.5vw;  } 
    100% { right:110vw; opacity:0; } 
}
.lg_main { position:absolute; right:100vw;  width:90vw; animation: kf_main linear 2s; }

@keyframes kf_main2 { 
      0% { right:100vw; } 
     40% { right:100vw; } 
     50% { right:11.5vw; opacity:0; } 
     51% { opacity:1; } 
     70% { right:11.5vw; opacity:1; } 
    100% { right:110vw; } 
}
.lg_main2 { position:absolute; right:100vw;  width:90vw; animation: kf_main2 linear 2s; }

@keyframes kf_letter_Z { 0% { left:87vw; opacity:0; } 70% { left:87vw; opacity:0; } 71% { opacity:1; } 100% { left:3vw; } }
.z_sbanim_Z { left:3vw; transform:rotate(5deg) ; animation: kf_letter_Z linear 2s; }
@keyframes kf_letter_I { 0% { left:87vw; ; opacity:0; } 70% { left:87vw; opacity:0; } 71% { opacity:1; } 100% { left:15vw; } }
.z_sbanim_I { left:15vw; transform:rotate(-5deg) ; animation: kf_letter_I linear 2s; }
@keyframes kf_letter_N { 0% { left:87vw; ; opacity:0; } 70% { left:87vw; opacity:0; } 71% { opacity:1; } 100% { left:27vw; } }
.z_sbanim_N { left:27vw; transform:rotate(8deg) ; animation: kf_letter_N linear 2s; }
@keyframes kf_letter_V { 0% { left:87vw; ; opacity:0; } 70% { left:87vw; opacity:0; } 71% { opacity:1; } 100% { left:39vw; } }
.z_sbanim_V { left:39vw; transform:rotate(-2deg) ; animation: kf_letter_V linear 2s; }
@keyframes kf_letter_O { 0% { left:87vw; ; opacity:0; } 70% { left:87vw; opacity:0; } 71% { opacity:1; } 100% { left:51vw; } }
.z_sbanim_O { left:51vw; transform:rotate(5deg) ; animation: kf_letter_O linear 2s; }
@keyframes kf_letter_L { 0% { left:87vw; ; opacity:0; } 70% { left:87vw; opacity:0; } 71% { opacity:1; } 100% { left:63vw; } }
.z_sbanim_L { left:63vw; transform:rotate(-4deg) ; animation: kf_letter_L linear 2s; }
@keyframes kf_letter_T { 0% { left:87vw; ; opacity:0; } 70% { left:87vw; opacity:0; } 71% { opacity:1; } 100% { left:75vw; } }
.z_sbanim_T { left:75vw; transform:rotate(8deg) ; animation: kf_letter_T linear 2s; }
@keyframes kf_letter_E { 0% { left:87vw; ; opacity:0; } 70% { left:87vw; opacity:0; } 71% { opacity:1; } 100% { left:87vw; } }
.z_sbanim_E { left:87vw; transform:rotate(-3deg) ; animation: kf_letter_E linear 2s; }

.z_sb12vw { width:12vw; height:12vw; font-size:14vw; border-radius:0.8vw; text-shadow:1px 1px 2px black; }
.z_sousboque { 
    position:absolute; display:flex; justify-content:center; align-items:center; 
    background-color:rgb(204,56,54) ; border:solid 1px black; box-shadow:8px 8px 16px rgba(0,0,0,0.6) ; 
    font-family:Font_Nav; 
}

@media (orientation: landscape) { 
    .lg_main { top:20vh; }
    .lg_main2 { top:20vh; }
    .z_sbanim_Z, .z_sbanim_I,.z_sbanim_N,.z_sbanim_V,.z_sbanim_O,.z_sbanim_L,.z_sbanim_T, .z_sbanim_E { top: 15vh; }
}

@media (orientation: portrait) { 
    .lg_main { top:8vh; }
    .lg_main2 { top:8vh; }
    .z_sbanim_Z, .z_sbanim_I,.z_sbanim_N,.z_sbanim_V,.z_sbanim_O,.z_sbanim_L,.z_sbanim_T, .z_sbanim_E { top: 7vh; }
}

@keyframes kf_bienvenue { 0% { opacity:0; }  80% { opacity:0; }  100% { opacity:1; } }

.acc_bienvenue { position:absolute; font-family:Font_Titres; color:white ; text-align:center; animation: kf_bienvenue linear 2s; }
.acc_txtreg { position:absolute; text-shadow:2px 2px 3px black; text-align:center; color:white; animation: kf_bienvenue linear 2s; font-style:italic; }
.acc_texte {  position:absolute; font-family:Font_Texte; text-shadow:2px 2px 3px black; text-align:justify; color:white; animation: kf_bienvenue linear 2s; }
.acc_texte a { text-decoration: none; font-weight: bold; color:gold;  cursor:url('images/curseur_main.png') 90 4, auto; }
.acc_texte a:hover { color:yellow; }
.a_inline { display:inline-block; text-decoration: none; font-weight: bold; color:gold;  cursor:url('images/curseur_main.png') 90 4, auto; }


@keyframes kf_retenez { 0% { opacity:0; }  80% { opacity:0; } 90% { opacity:1; } 100% { opacity:1; } }

.acc_retenez { 
    position:absolute; background-color:Khaki; box-shadow:3px 3px 5px rgba(0,0,0,0.6); transform:rotate(-15deg) ; 
    font-family:Font_Texte; color:DarkBlue ; text-align:justify; 
    animation: kf_retenez linear 3s; 
}
.acc_retenez:hover { transform:rotate(-20deg) ; cursor:url('images/curseur_main.png') 90 4, auto !important;  }
.acc_retenez h1 { font-family:Font_Titres; color:rgb(204,56,54) ; text-align:center; }
.acc_main { position:absolute; }

@media (orientation: landscape) { 
    .acc_bienvenue { left:5vw; top:1.8vh; width:90vw; height:10vh; font-size: 3vw; }
    .acc_txtreg { left:10vw; width:80vw; top: 45vh; height:40vh; font-size: 1.4vw; line-height:0.8; margin-left:-10vw; }
    .acc_texte { left:3vw; width:70vw; top: 62vh; height:40vh; font-size: 1.2vw; }
    .acc_texte h2 { font-size: 1.2vw; }
    .acc_retenez { left:75vw; top:42vh; width:18vw; height:18vw; padding:1vw; font-size: 1vw; }
    .acc_retenez h1 { font-size: 1.5vw; }
    .acc_main { left:80vw; top:55vh; }
}

@media (orientation: portrait) { 
    .acc_bienvenue { left:5vw; top:1.5vh; width:85vw; height:10vh; font-size: 4vw; }
    .acc_txtreg { left:5vw; width:90vw; top: 15vh; height:40vh; font-size: 2.6vw; }
    .acc_texte { left:5vw; width:90vw; top: 25vh; height:40vh; font-size: 3vw; }
    .acc_texte h2 { font-size: 3vw; }
    .acc_retenez { left:20vw; top:50vh; width:26vh; height:26vh; padding:3vw; font-size: 3.2vw; }
    .acc_retenez h1 { font-size: 2.6vw; }
    .acc_main { left:40vw; top:70vh; }
}

/* -----------------------------------------------------------------------------
 * Formats carte de membre - utiisé dans pages Adhérents et Bureau.
 * ----------------------------------------------------------------------------- */
.adh_form { 
    display:none; /* Passe en 'grid' lorsque nécessaire. */
    grid-template-columns:1fr 1fr 1fr 1fr; gap:5px ; padding:20px ; 
}
.adh_card {
    grid-column:1/5 ; 
    display:grid; grid-template-columns:1fr 0.5fr 1.6fr; gap:5px ; padding:20px ; 
    background-color:Lightblue; border:solid 2px black; box-shadow:2px 2px 4px black;
    border-radius:15px ;
}
.adh_visible { display:grid; }
.adh_3col { 
    grid-column:1/4 ; font-family:Font_Titres; color:rgb(204,56,54); margin:0 ; 
    display:flex; justify-content:space-between; align-items:flex-start ; 
}
.adh_cnum { font-family:Font_Texte; text-align:right; color:Darkblue ; }
.adh_photo { grid-row:2/7; justify-self:center; align-self:center ; border:solid 1px black ; border-radius:10px ; }
.adh_clab { color:Darkblue; display:flex; justify-content:right; align-items:center; padding-right:10px ; font-family:Font_Titres; text-align:right; }
.adh_2col { grid-column:1/3 ; }
.adh_card input, .adh_fnpp { display:flex; justify-content:center; align-items:center; text-align:center; }
.adh_fnppro { color:blue ; border:solid 1px black ; display:flex; justify-content:center; align-items:center; background-color:rgba(255,255,255,0.8) ;} 
.adh_cbut { background-color:rgb(204,56,54); color:yellow;  border-radius:10px ; cursor:url('images/curseur_main.png') 90 4, auto; }
.adh_grey { background-color:Lightgrey; color:grey ; cursor:not-allowed; }
.prt_size { width:35vw; height:20vw; }

@media (orientation: landscape) { 
    .adh_3col { height:3vw ; font-size:1.6vw ; }
    .adh_logo { width:3vw; height:3vw ; }
    .adh_cnum { font-size:1vw }
    .adh_photo { width:12vw ; }
    .adh_card input, .adh_fnppro { font-size:1vw ; height:3.5vh; }
    .adh_card select { font-size:1vw ; }
    .adh_clab, .adh_fnpp, .adh_cbut { height:5vh; font-size:0.7vw ; }
    .adh_clab { font-size:0.8vw; }
    .adh_fleche { width:3vw; }
}

@media (orientation: portrait) { 
    .adh_3col { height:2vh ; font-size:3.5vw ; }
    .adh_logo { width:2vh; height:2vh ; }
    .adh_cnum { font-size:2vw }
    .adh_photo { width:14vh ; }
    .adh_card input, .adh_fnppro { font-size:2.5vw ; height:2.5vh; }
    .adh_card select { font-size:2.5vw ; }
    .adh_clab, .adh_fnpp, .adh_cbut { height:2.5vh; font-size:2vw ; }
    .adh_clab { font-size:2vw; }
    .adh_fleche { width:8vw; }
}

/* -----------------------------------------------------------------------------
 * Formats communs aux sections "Zinvolte", "ATVSOP", et "Bureau".
 * ----------------------------------------------------------------------------- */
.ong_page  { display:grid; grid-template-columns:1fr 1fr 1fr 0.5fr ; align-items:start; width:97%; height:100%; color:DarkBlue; margin-top:4vh; }
.ong_title  { 
    display:flex; justify-content:center; align-items:center; 
    font-family:Font_Titres; text-align:center; background-color:LightBlue; color:DarkBlue; 
    border-top:solid 1px black; border-left:solid 1px black; border-right:solid 1px black; border-radius:15px 15px 0px 0px ;
    cursor:url('images/curseur_main.png') 90 4, auto; 
}
.ong_title:hover { background-color:white; color:rgb(204,56,54); }
.ong_tselect { background-color:rgba(204,56,54,0.8) ; color:white ; }
.ong_tselect:hover { background-color:rgba(204,56,54,0.8) ; color:white ; }
.ong_zinvolte { 
    display:flex; position:relative; grid-column: 1 / 5; justify-content:center; align-items:center; 
    background-color:rgba(204,56,54,0.8) ; border-radius:0px 15px 15px 15px ; 
}
.ong_text { position:absolute; display:none; font-family:Font_Text; color:white; text-align:justify; overflow-y:auto; }
.ong_text p { margin-top:0.3em; }
.ong_text img { border:solid 2px white ; width:80%; align-self:center ; }
.ouest_france img { border:0px; width:100%; }
.placetobe img { width:100%; }
.ong_text a { color:yellow; cursor:url('images/curseur_main.png') 90 4, auto; }
.ong_text video { border:solid 2px white ; width:90%; align-self:center ; }
.ong_visible { display:flex; flex-direction:column; }
.ong_doc { position:absolute; flex-direction:column; align-items:center; justify-content:center; text-align:center; font-family:Font_Text; color:white; }
.ong_doc a:hover { color:gold; }
.ong_doc a { color:white; cursor:url('images/curseur_main.png') 90 4, auto; }
.ong_doc video { width:100% ; border:solid 2px white; }
.rgl_pdf { width:100%; height:100%; }

@media (orientation: landscape) { 
    .ong_title { font-size: 1.2vw; height:5vh; }
    .ong_zinvolte { height:80vh; }
    .ong_bottom { height:20vh ; }
    .ong_text { top:1.8vh; height:73vh; left:1vw; width:44vw; font-size:1.3vw; padding-right:1vw; }
    .atv_comm { font-size:1.1vw; }
    .ong_doc { top:2vh; height:73vh;  left:48vw; width:48vw; font-size:1.3vw; }
}

@media (orientation: portrait) { 
    .ong_title { font-size: 2.5vw; height:4vh; }
    .ong_zinvolte { height:77vh; }
    .ong_bottom { height:19vh ; }
    .ong_text { top:2vh; height:40vh; left: 4vw; width:88vw; font-size:2.8vw;  }
    .atv_comm { font-size:2.3vw; }
    .ong_doc { top:44vh; height:30vh;  left:10vw; width:80vw; font-size:3vw; }
}


/* -----------------------------------------------------------------------------
 * Formats dans la section "evenements".
 * ----------------------------------------------------------------------------- */
.rep_page { display:flex; flex-direction:column; justify-content:start; width:97%; height:100%; }
.rep_page h1 { font-family:Font_Titres; color:DarkBlue ; text-align:center; font-size: 2vw; }
.rep_sect { display:flex; flex-direction:column; align-items:start; gap:10px ; overflow:auto; margin-top:2vh; padding-bottom:15vh; }
.rep_evnt { display:grid; grid-gap:0.5vw; align-items:start; background-color:rgba(255,255,255,0.8) ;  }
.rep_evnt h2 { font-family:Font_Titres; color:DarkBlue ; text-align:center; } 
.rep_evnt p { font-family:Font_Texte; color:black;  } 
.rep_evnt video { display: flex; justify-self:left; overflow: hidden; position: relative; border:0 ; }
.rep_evnt video[data-state="hidden"] { display: none; }
.rep_image  { border:solid 1px black ; }
.rep_image img { }
.rep_texte  { text-align:justify; color:black; }
.rep_texte p { margin-top:0; margin-bottom:0.3em; }
.rep_imgtxt { display:flex; gap:10px ; }
.rep_photos { display:flex; position:relative; border:solid 1px black; cursor:url('images/curseur_main.png') 90 4, auto; border:solid 3px rgba(0,0,0,0); }
.rep_photos:hover { opacity:1 ; border:solid 3px Darkblue ;}
.rep_photos img { }
.rep_diapo { 
    position:absolute; 
    font-family:Font_Titres; background-color:rgba(0,0,0,0.6) ; color:yellow ; 
    text-align:center ; vertical-align:middle ; 
    width:100%; top:90%; height:20%; left:50%; transform: translate(-50%,-50%); 
}

@media (orientation: landscape) { 
    .rep_page h1 { font-size: 2vw; }
    .rep_evnt { grid-template-columns:1fr 0.7fr; border-radius:10px ; margin-right:1vw ; border:solid 2px DarkBlue ; }
    .rep_evnt h2 { font-size: 1.4vw; } 
    .rep_evnt p { font-size: 1.2vw; } 
    .rep_evnt video { width:55vw; }
    .rep_image  { height:22vw; }
    .rep_image img { height:22vw;  }
    .rep_texte  { padding-left:1vw; padding-right:2vw; }
    .rep_imgtxt { gap:30px ; }
    .rep_photos { margin-top:1vw; margin-bottom:2vh; margin-right:0.5vw; width:37vw; }
    .rep_photos img { width:37vw; }
    .rep_diapo { font-size: 1.7vw; }
}

@media (orientation: portrait) { 
    .rep_page h1 { font-size: 4vw; }
    .rep_evnt { grid-template-columns:1fr; width:99%; border:solid 4px DarkBlue ; border-radius:15px ; }
    .rep_evnt h2 { font-size: 3.5vw; } 
    .rep_evnt p { font-size: 2.8vw; } 
    .rep_evnt video { width:100%; }
    .rep_image  { height:36vw; width:24vw ; }
    .rep_image img { height:36vw; width:24vw ; border-bottom:solid 1px black ; }
    .rep_texte  { padding-left:3vw; padding-right:3vw; }
    .rep_imgtxt { gap:30px ; }
    .rep_photos { justify-self:center ; width:95%; margin-bottom:3vw; }
    .rep_photos img { width:100%; }
    .rep_diapo { font-size: 4vw;  }
}


/* -----------------------------------------------------------------------------
 * Formats dans la section "adherents" (partie carte de membre)
 * ----------------------------------------------------------------------------- */
.adh_page { position:relative; width:100%; height:100%; }
.adh_prt1 { 
    position:absolute; z-index:3 ; display:flex; flex-direction:column; justify-content:center; 
    background: no-repeat center url('backgrounds/bg_adh.webp') ; background-size:cover; 
}
.adh_prt1 h1 { font-family:Font_Titres; color:Darkblue ; text-align:center; }
.adh_link { font-family:Font_Texte; background-color:rgba(204,56,54,0.7) ; }
.adh_link:hover { background-color:rgb(204,56,54) ; }
.adh_adhpswd { 
    position:absolute; display:none; grid-template-columns:1fr 1fr; gap:10px ; padding:20px ; 
    background-color:LightBlue; border:solid 1px black ; border-radius:5px; z-index:5; ; 
}
.adh_adhpswd input { display:flex; justify-content:center; align-items:center; text-align:center; }
.adh_pw2col { grid-column:1/3; font-style:italic; }
.adh_adhmsg {     
    position:absolute; display:none; justify-content:center; align-items:center; z-index:4; border-radius:5px ; 
    background-color:rgba(255,255,255,0.6); font-family:Font_Texte; color:DarkBlue; backdrop-filter:blur(5px); 
    cursor:url('images/curseur_main.png') 90 4, auto; 
}
.adh_center { justify-self:center; }

@media (orientation: landscape) { 
    .adh_prt1 { left:0vw; width:44vw; top:0vh; height:85vh; padding-left:3vw; padding-right:3vw; border-right:solid 2px black}
    .adh_prt1 h1 { font-size: 2vw; }
    .adh_prt1 p { font-size: 1.2vw;  }
    .adh_adhpswd { left:10vw; width:30vw; top:25vh; height:30vh; font-size:2vw ; }
    .adh_pw2col { font-size: 0.8vw; }
    .adh_adhmsg { left:0vw; width:100vw; top:1vh; height:90vh; font-size: 2vw; }
}

@media (orientation: portrait) { 
    .adh_prt1 { left:0vw; width:94vw; top:0vh; height:30vh; padding:3vw; }
    .adh_prt1 h1 { font-size: 3.5vw; }
    .adh_prt1 p { font-size: 3vw;  }
    .adh_adhpswd { left:15vw; width:70vw; top:20vh; height:10vh; font-size:4vw ; }
    .adh_pw2col { font-size: 1.2vw; }
    .adh_adhmsg { left:0.5vw; width:99vw; top:0.5vh; height:90vh; font-size: 5vw; }
}

/* -----------------------------------------------------------------------------
 * Formats dans la section "adherents" (jeu de e-Zinvolte)
 * ----------------------------------------------------------------------------- */

.adh_ccht, .adh_cchl, .adh_cchr, .adh_cchb { position:absolute; background-color:rgb(204,56,54); z-index:2; }
.adh_jtitre { position:absolute ; font-family:Font_SF; color:white;  text-align:center; z-index:3; }
.adh_jregle { position:absolute ; border:solid 1px white ; border-radius:5px ; z-index:3; font-family:Font_Texte; overflow-y:auto;}
.adh_jscore { position:absolute ; border:solid 1px white ; border-radius:5px ; z-index:3; font-family:Font_Texte; }
.adh_best { display:grid; grid-template-columns: 2fr 1fr; width:100%; grid-gap:2px ; overflow-y:auto; }
.adh_bestelem { display:flex; justify-content:center; align-items:center; text-align:center ; background-color:white; color:DarkBlue ; }
.adh_curruser { background-color:LightBlue; }
.adh_jzone  { position:absolute ; background-image:url("backgrounds/bg_sky.webp") ; }
.adh_jssbk { position:absolute; }
.adh_toolate { opacity:0.5 ; } 
.adh_partie { position:absolute ; font-family:Font_SF; display:flex; border:solid 1px white ; border-radius:5px ; justify-content:center; align-items:center; z-index:3; }
.adh_time { position:absolute ; font-family:Font_Fixed; display:flex; border:solid 1px white ; border-radius:5px ; justify-content:center; align-items:start; z-index:3; }
.adh_points { 
    position:absolute ; display:flex; flex-direction:column; justify-content:space-between; 
    border:solid 1px white ; border-radius:5px ; z-index:3; overflow-y:auto; 
}
.adh_pts { display:flex; align-items:center; }
.adh_msg { 
    position:absolute; display:none; justify-content:center; align-items:center; z-index:4; border-radius:5px ; 
    background-color:rgba(255,255,255,0.7); font-family:Font_Texte; color:DarkBlue; 
    cursor:url('images/curseur_main.png') 90 4, auto; 
}
.adh_result { font-family:Font_Fixed; color:white; text-shadow:1px 1px 2px black, 1px 1px 2px black ;  text-align:center; }

@media (orientation: landscape) { 
    .adh_ccht { left:0vw; width:100vw; top:-6vh; height:14vh ; }
    .adh_cchl { left:0vw; width:65vw; top:8vh; height:81vh ; }
    .adh_cchr { right:0vw; width:2vw; top:8vh; height:81vh ; }
    .adh_cchb { left:0vw; width:100vw; top:89vh; height:5vh ; }
    .adh_jtitre { left:50vw; width:50vw; top:2vh; height:5vh; font-size: 2vw; }
    .adh_jregle { left:51vw; width:12.1vw; top:8vh; height:40vh; padding-right:0.8vw; font-size: 1vw; }
    .adh_jregle h1 { font-size: 1.2vw; text-align:center; }
    .adh_jregle ul { font-size: 0.8vw; padding:0 0 1vw 1vw; text-align:justify; }
    .adh_jregle ul li { padding-bottom:0.5em;  }
    .adh_jscore { left:51vw; width:12vw; top:50vh; height:37vh; padding:0.5vw; font-size: 1vw; }
    .adh_jscore h1 { font-size: 1.2vw; text-align:center; }
    .adh_best { height:31vh; }
    .adh_bestelem { font-size:1vw ; }
    .adh_jzone  { left:65vw; width:35vw; top:8vh; height:81vh; }
    .adh_jssbk { left:15vw; width:4vw; top:60vh; }
    .adh_jssbk img { width:4vw; }
    .adh_partie { left:66vw; width:22vw; top:9vh; height:5vh ; font-size: 1vw; }
    .adh_time { left:89vw; width:8vw; top:9vh; height:5vh ; font-size: 1.7vw; }
    .adh_points { left:66vw; width:30vw; top:79vh; height:7vh; padding:0.5vw; }
    .adh_msg { left:66vw; width:29vw; top:15vh; height:59vh; padding:1vw; }
    .adh_result { font-size:3vw; }
    .adh_pts { width:100%; height:2vh; font-size:1vw; }
    .adh_pts img { height:1.5vh; }
}

@media (orientation: portrait) { 
    .adh_ccht { left:0vw; width:100vw; top:30vh; height:8vh ; }
    .adh_cchl { left:0vw; width:40vw; top:38vh; height:52vh ; }
    .adh_cchr { right:0vw; width:3vw; top:38vh; height:52vh ; }
    .adh_cchb { left:0vw; width:100vw; top:86vh; height:7vh ; }
    .adh_jtitre { left:0vw; width:100vw; top:35vh; height:5vh; font-size: 3.5vw; }
    .adh_jregle { left:2vw; width:30vw; top:38vh; height:20vh; padding-left:2vw; padding-right:2vw; font-size: 1.3vw; border:solid 2px white ; }
    .adh_jregle h1 { font-size: 3.5vw; text-align:center; }
    .adh_jregle ul { font-size: 2.5vw; padding:0 0 1vw 1vw; text-align:justify; }
    .adh_jregle ul li { padding-bottom:0.5em;  }
    .adh_jscore { left:2vw; width:33vw; top:60vh; height:25vh; padding:0.5vw; font-size: 1vw; border:solid 2px white ; }
    .adh_jscore h1 { font-size: 3.5vw; text-align:center; }
    .adh_best { height:20vh; }
    .adh_bestelem { font-size:3vw ; }
    .adh_jzone  { left:40vw; width:60vw; top:38vh; height:50vh; }
    .adh_jssbk { left:25vw; width:6vw; top:35vh; z-index:999; }
    .adh_jssbk img { width:6vw; }
    .adh_partie { left:42vw; width:37vw; top:39vh; height:3vh ; font-size: 3vw; border:solid 2px white ; }
    .adh_time { left:81vw; width:14vw; top:39vh; height:3vh ; font-size: 3vw; border:solid 2px white ; }
    .adh_points { left:42vw; width:49vw; top:78vh; height:5vh; padding:2vw; border:solid 2px white ; }
    .adh_msg { left:42vw; width:51vw; top:43vh; height:33vh; padding:1vw; }
    .adh_result { font-size:3vw; }
    .adh_pts { width:100%; height:2vh; font-size:2.5vw; }
    .adh_pts img { height:1.3vh; }
}

/* -----------------------------------------------------------------------------
 * Formats dans la section "Bureau".
 * ----------------------------------------------------------------------------- */
.bur_chapter1 { display:flex; width:98%; height:98%; }
.bur_chapter2 { display:none; width:98%; height:96%; }
.bur_chapter3 { display:none; width:98%; height:98%; }
.bur_list { background-color:white; list-style-type:none; overflow-y:auto; padding:1vh 0 1vh 0 ; }
.bur_list li { height:1.4em; color:DarkBlue ; cursor:url('images/curseur_main.png') 90 4, auto; text-align:center ; }
.bur_list li:hover { background-color:LightBlue; }
.bur_listsel { background-color:rgb(204,56,54); color:white ; }
.bur_doc { display:flex; flex-direction:column; align-items:center; justify-content:center; }
.bur_doc a { color:white; cursor:url('images/curseur_main.png') 90 4, auto; }
.bur_pdf { display:flex; align-items:center; justify-content:center; border:solid black 2px ; opacity:0.9; }
.bur_left { display:flex; flex-direction:column; justify-content:start; }
.bur_right { display:flex; justify-content:center; align-items:center; }
.bur_adhmsg { 
    position:absolute; display:none; justify-content:center; align-items:center; text-align:center; 
    border:solid 1px black; box-shadow:2px 2px 4px black; border-radius:15px ;
    background-color:rgba(255,255,255,0.6) ; color:DarkRed ; 
}
.bur_srnew { display:flex; justify-content:space-between; }
.bur_search { text-transform:capitalize; }

.bur_lsadh { grid-column: 1 / 3; background-color:white; overflow-y:auto; }
.bur_lsadh li { height:1.3em; cursor:url('images/curseur_main.png') 90 4, auto; }
.bur_lsadh li:hover { background-color:LightBlue; }
.bur_nouv { color:DarkRed; }
.bur_ch3l { display:flex; flex-direction:column; justify-content:center; align-items:center ; }
.bur_ch3r { display:flex; flex-direction:column; justify-content:center; align-items:center; background-color:rgba(255,255,255,0.8); }
.bur_ch3r h2 { font-family:Font_Titres; }
.bur_ch3r img { width:90%; border:solid 3px rgba(0,0,0,0) ; }
.bur_ch3r img:hover { cursor:url('images/curseur_main.png') 90 4, auto; border:solid 3px yellow ; }

@media (orientation: landscape) { 
    .bur_cpte { height: 3vh ; font-size:1vw ; color:yellow; }
    .bur_list { font-size: 1.2vw; width:20vw; }
    .bur_bottom { height:15vh ; }
    .bur_doc { width:75vw; height:75vh; font-size:1.2vw; }
    .bur_pdf { width:73vw ; height:69vh; }
    .bur_left { width:25vw; height:100% ; }
    .bur_right { width:75vw; height:100% ; }
    .bur_adhmsg { left:30vw; width:60vw; top:15%; height:70%; font-size:2vw;  }
    .bur_search { font-size:1vw; }
    .bur_lsadh { height:100% ; padding:0.5vw; }
    .bur_lsadh li { font-size:1vw; }
    .bur_ch3l { width: 70% ; font-size:2vw; }
    .bur_ch3r { width: 30vw ; height:40vh; font-size:1.2vw; margin-top:35vh; margin-right:1vw; }
}

@media (orientation: portrait) { 
    .bur_chapter2 { flex-direction:column; align-items:center; }
    .bur_cpte { height:4vh ; font-size:3vw ; color:yellow; }
    .bur_list { font-size: 2.5vw; width:80vw; height:20vh; }
    .bur_bottom { height:17vh ; }
    .bur_doc { width:90vw; height:60vh; font-size:3vw; }
    .bur_pdf { width:86vw ; height:62vh; }
    .bur_left { margin-left:3vw; width:89vw ; height:35vh ; b}
    .bur_right { margin-left:5vw; width:80vw ; height:40vh ; background-color:grey; }
    .bur_adhmsg { left:2vw; width:90vw; top:40vh; height:32vh; font-size:3.5vw; }
    .bur_search { width:50vw; font-size:3vw; }
    .bur_lsadh { width:89vw; height:30vh ; padding:0; }
    .bur_lsadh li { font-size:3vw; }
    .bur_chapter3 { flex-direction:column ; }
    .bur_ch3l { height:75% ; font-size:2.5vw; }
    .bur_ch3r { height:25% ; font-size:2.5vw; margin:2vh; justify-content:right; }
}



/* -----------------------------------------------------------------------------
 * Formats dans la section "se connecter".
 * ----------------------------------------------------------------------------- */
.cnx_page { display:flex; justify-content:space-around; align-items:center; width:100%; height:100%; color:DarkBlue;  }
.cnx_page h1 { font-family:Font_Titres; }
.cnx_form { position:relative; background:url('images/logo_atvsop_no_text.webp') ; background-size:cover; background-position:center; color:white ; }
.cnx_form h1 { font-family:Font_Titres; position:absolute; left:0; top:0; color:white; }
.cnx_login { position:absolute; left:0; top:0; color:DarkBlue ; text-align:center; background-color:rgba(0,0,0,0); border:none; }
.cnx_pswd { position:absolute; left:0; top:0; color:DarkBlue ; text-align:center; background-color:rgba(0,0,0,0); border:none; }
.cnx_valid { 
    position:absolute; left:0; top:0; background-color:rgb(204,56,54) ; border:solid 2px rgba(0,0,0,0); border-radius:10px; 
    font-family:Font_Titres; color:white; cursor:url('images/curseur_main.png') 90 4, auto; 
}
.cnx_valid:hover { color: yellow; border:solid 2px yellow;  } 


@media (orientation: landscape) { 
    .cnx_form { width:30vw; height:30vw; }
    .cnx_form h1 { font-size: 2vw; transform:translate(2vw,4vw) rotate(-15deg) ; }
    .cnx_login { font-size: 1.2vw; width:9vw; transform:translate(15.8vw,1.6vw) rotate(7deg) ; }
    .cnx_pswd { font-size: 1.2vw; width:9vw; transform:translate(14vw,10vw) rotate(-37deg) ; }
    .cnx_valid { font-size: 1.7vw; width:10vw; height:4vw; transform:translate(14vw,22vw); }
}

@media (orientation: portrait) { 
    .cnx_page { flex-direction:column; }
    .cnx_form { width:60vw; height:60vw; }
    .cnx_form h1 { font-size: 4.5vw; transform:translate(6vw,11vw) rotate(-15deg) ; }
    .cnx_login { font-size: 3vw; width:22vw; transform:translate(31vw,2.8vw) rotate(7deg) ; }
    .cnx_pswd { font-size: 3vw; width:22vw; transform:translate(26vw,19.7vw) rotate(-39deg) ; }
    .cnx_valid { font-size: 3.5vw; width:25vw; height:10vw; transform:translate(28vw,44vw); }
}

/* -----------------------------------------------------------------------------
 * Formats dans la section "page contact".
 * ----------------------------------------------------------------------------- */
.ctc_page { display:flex; width:100%; height:100%; color:white ; font-family:Font_Titres ; justify-content:center ; }
.ctc_img_add { position:absolute; }
.ctc_img_frm { position:absolute; }
.ctc_frm { position:absolute; display:grid; grid-template-columns:0.4fr 1fr; gap:10px ; padding:20px ; }
.ctc_frm textarea { resize:none ; }

@media (orientation: landscape) { 
    .ctc_page { font-size:4vw ; }
    .ctc_img_add { top:20vh ; left:0vw; height:60vh; }
    .ctc_img_frm { top:17vh ; right:0vw; height:70vh; }
    .ctc_frm { top:26vh ; right:26vh ; width:45vh; height:45vh; font-size:1vw ; }
    .ctc_frm input { height:3vh ; }
    .ctc_frm select { height:3vh ; }
    .ctc_frm textarea { height:14vh ; }
    .ctc_button { height:5vh; }
}
@media (orientation: portrait) { 
    .ctc_page { font-size:8vw ; }
    .ctc_img_add { top:10vh ; left:0vw; height:25vh; }
    .ctc_img_frm { top:35vh ; right:0vw; height:40vh; }
    .ctc_frm { top:40vh ; right:15vh; width:28vh; height:26vh; font-size:2.5vw ; }
    .ctc_frm input { height:2vh ; font-size:2.5vw ;}
    .ctc_frm select { height:2vh ; font-size:2.5vw ;}
    .ctc_frm textarea { height: 10vh ; font-size:2.5vw ; }
    .ctc_button { height:3vh; font-size:2.5vw ; }
}

/* -----------------------------------------------------------------------------
 * Superposition du catalogue de photos (caché par défaut)
 * ----------------------------------------------------------------------------- */
.ph_box {
    position: fixed; 
    display: none; /* passe en "flex" via javascript lorsqu'on en a besoin */
    justify-content: space-around; align-items:start;
    width:100vw; left:0vw; height:100vh; top: 0vh; 
    background: url('backgrounds/bg_sky.webp') ; background-size:cover; background-position:center; 
    z-index:200 ;
}

.ph_list {
    position:fixed; 
    display: flex; justify-content: space-between; align-items:center;
    width:98vw;
}

.ph_secname {
    position:fixed; top:1.5vh; left:2vw; width:95vw; 
    display: flex; justify-content: left; align-items:center;
    color:white; font-family: 'Font_Titres', sans-serif; 
}

.ph_title {
    position:fixed; top:1.3vh; left:10vw; width:80vw; 
    display: flex; justify-content: center; align-items:center;
    color:gold; font-family: 'Font_Titres', sans-serif; 
    text-shadow: 2px 2px 4px black;
}

.ph_leave {
    cursor:url('images/curseur_main.png') 90 4, auto; 
    position:fixed; top:1.5vh; right:1vw; 
    display: flex; justify-content: center; align-items:center;
    color:black; font-size: 1.5vw; font-family: 'f_roboto', sans-serif; 
    border:solid black 1px ;
}
.ph_leave:hover { background-color:yellow; }

@media (orientation: landscape) { 
    .ph_secname { font-size: 1.5vw; }
    .ph_title { font-size: 1.5vw; }
    .ph_leave { font-size: 1.5vw; width:2vw; }
}

@media (orientation: portrait) { 
    .ph_secname { font-size: 1.5vw; }
    .ph_title { font-size: 3vw; }
    .ph_leave { font-size: 5vw; width:7vw; }
}

/* -----------------------------------------------------------------------------
 * Format d'un reportage
 * ----------------------------------------------------------------------------- */
.ph_report {
    position: fixed; left:1vw; width:98vw; top: 8vh; height:90vh; padding:0vw; 
    display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center;
    overflow-x: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    scrollbar-color: black white ; 
}

.ph_report img {
    height:20vh; filter: brightness(75%);
    object-fit: contain; margin:0.4vw ; padding:0px ;
    border-radius: 0.2em; border:solid 0.15vw white;
    box-shadow: 3px 3px 4px rgba(0,0,0,0.5) ;
    display: flex; /* width : 49%; */
    cursor:url('images/curseur_main.png') 90 4, auto; 

}
.ph_report img:hover {
  box-shadow: 0px 0px 10px white;
  filter: brightness(100%);
  transition: 0.3s; 
}

@media (orientation: landscape) { 
    .ph_report img { height:15vh; }
}

@media (orientation: portrait) { 
    .ph_report img { height:10vh; }
}

/* -----------------------------------------------------------------------------
 * Popup pour faire patienter (gros reportages) 
 * ----------------------------------------------------------------------------- */
.ph_wait {
    position:fixed; display: none; /* passe en "flex" via javascript lorsqu'on en a besoin */
    justify-content: center; align-items:center;
    left:0vw; width:100vw; top:0vh; height:100vh;
    background-color:rgba(0,0,0,0.8) ;
    z-index:201 ;
}

.ph_wait_cnt {
    position:fixed; left:0vw; width:100vw; top:auto; height:auto; padding:auto;
    font-size: 3vw; font-family: 'f_roboto', sans-serif; 
    display: flex; justify-content: center; align-items:center;
    color:gold; text-shadow: 2px 2px 5px black;
}

.progressBar {
	width:20vw; 
}



/* -----------------------------------------------------------------------------
 * Format d'une image 
 * ----------------------------------------------------------------------------- */
.ph_image {
    position: fixed; display: none; /* passe en "flex" via javascript lorsqu'on en a besoin */
    left:0vw; top:0vh; width:100vw; height:100vh; justify-content: center; align-items:start;
    background: url('backgrounds/bg_sky.webp') ; background-size:cover; background-position:center; 
    z-index:201 ;
}

.ph_title_sec {
    position:fixed; top:1.5vh; left:1vw; width:30vw; 
    display: flex; justify-content: left; align-items:center;
    color:gold; font-family: 'Font_Titres', sans-serif; 
    text-shadow: 2px 2px 4px black;
}

.ph_title_rep {
    position:fixed; top:1.3vh; left:15vw; width:70vw; 
    display: flex; justify-content: center; align-items:center;
    color:gold; font-family: 'Font_Titres', sans-serif; 
    text-shadow: 2px 2px 4px black;
}

.ph_image img {
  height:89vh; max-width:97vw; margin: 8vh auto 5vh auto;
  object-fit: contain; padding:0px ;
  border-radius: 0.5em; border:solid 0.15vw white;
  display: flex; justify-content: center; align-items:center;
  box-shadow: 3px 3px 4px rgba(0,0,0,0.5) ;
}

.ph_image video {
    height:89vh; max-width:97vw; margin: 8vh auto 5vh auto;
    object-fit: contain; padding:0px ;
    border-radius: 0.5em; border:solid 0.15vw white;
    display: flex; justify-content: center; align-items:center;
    box-shadow: 3px 3px 4px rgba(0,0,0,0.5) ;
}

.ph_prev_img {
    position:fixed; top:45vh; left:1vw; width:5vw; height:5vh; padding:0;
    display: flex; justify-content: center; align-items:center;
}

.ph_prev_img img { height:5vh; filter: brightness(50%); border:0px;     cursor:url('images/curseur_main.png') 90 4, auto;  }
.ph_prev_img img:hover { filter: brightness(100%); border:solid 2px white; }

.ph_next_img {
    position:fixed; top:45vh; right:1vw; width:5vw; height:5vh; padding:0;
    display: flex; justify-content: center; align-items:center;
}
.ph_next_img img { height:5vh; filter: brightness(50%); border:0px;     cursor:url('images/curseur_main.png') 90 4, auto; }
.ph_next_img img:hover { filter: brightness(100%); border:solid 2px white; }

.ph_leave_img {
    cursor:url('images/curseur_main.png') 90 4, auto; 
    position:fixed; top:1.5vh; right:1vw; width:2vw; 
    display: flex; justify-content: center; align-items:center;
    color:black; font-size: 1.5vw; font-family: 'f_roboto', sans-serif; 
    border:solid black 1px ;
}
.ph_leave_img:hover { background-color:gold;  }

@media (orientation: landscape) { 
    .ph_title_sec, .ph_title_rep { font-size: 1.5vw; }
    .ph_leave_img { font-size: 1.5vw; width:2vw; }
}

@media (orientation: portrait) { 
    .ph_title_sec, .ph_title_rep { font-size: 3vw; }
    .ph_leave_img  { font-size: 5vw; width:7vw; }
}