/******************/
/* LE NOUVEL ÉLAN */
/******************/


/* POLICES ****************************************************************************************/

@font-face  { font-family:LNE   ; src:url(./Candara.ttf) ; }
@font-face  { font-family:LNEg  ; src:url(./Candara_Bold.ttf) ; }
@font-face  { font-family:LNEi  ; src:url(./Candara_Italic.ttf) ; }
@font-face  { font-family:LNEgi ; src:url(./Candara_Bold_Italic.ttf) ; }

.LNE        { text-transform:uppercase; font-family:LNEgi ; }
.maj        { text-transform:uppercase; }
.rtl        { unicode-bidi:bidi-override ; direction:rtl ; }
.txt_bleu   { color:#006F93 ; }
.fond_bleu  { background:#006F93 ; color:#FFFFFF ; padding:3px 10px ; }


/* STRUCTURE **************************************************************************************/

*               { margin:0 ; padding:0 ; box-sizing:border-box ; }
html, body      { width:100% ; height:100% ; font-family:Calibri,sans-serif ; overflow-x:hidden ; font-variant-ligatures:none ; }
body            { -webkit-overflow-scrolling:touch ; }
p, span, div    { word-wrap: break-word ; }

main            { width:100% ; }
  #HS           { display:none ; }
  #voile        { opacity:0 ; visibility:hidden ; pointer-events:none ; position:fixed ; top:0 ; left:0 ;
                  width:100% ; height:100% ; transition:opacity .5s ease ; z-index:200 ; }
  #voile.active { opacity:1 ; visibility:visible ; pointer-events:auto ; background:rgba(0,0,0,0.75) ; }
  #Accueil      { width:100% ; }

a               { text-decoration:none ; }
.colonnes p     { break-inside:avoid ; text-indent:20px ; }
.neutre         { break-inside:avoid ; margin:0 ; padding:0 ; }


/* NAVIGATION *************************************************************************************/

#menu          { position:fixed ; top:0 ; left:0 ; z-index:100 ; }
#hamburger     { position:fixed ; top:10px ; left:10px ; font-size:2rem ; cursor:pointer ; background:rgba(0,63,111,1) ; color:#FFFFFF ; text-align:center ; 
                 padding:10px 20px ; border-radius:25px ; border:2px solid #FFFFFF ; box-shadow:5px 5px 10px #003F6F ; z-index:100 ; }
#liens         { display:none ; }
#liens.active  { display:block ; position:fixed ; top:90px ; left:10px ; background:rgb(0,63,111) ; 
                 padding:10px ; border-radius:25px ; border:2px solid #FFFFFF ; box-shadow:5px 5px 10px #003F6F ; z-index:100 ; }
#liens a       { display:block ; font-family:LNEgi ; color:#FFFFFF ; text-decoration:none ; font-size:1.25rem ; padding:5px 20px ; margin:0 ; text-align:left ; }
#liens a:hover { color:#FFFFFF ; background:#006F93 ; border-radius:10px ; }
#liens hr      { background:#006f93 ; margin:10px 20px ; border:0 ; height: 2px ; }


/* #ACCUEIL ***************************************************************************************/

#Accueil h1,
#Accueil h2,
#Accueil h3,
#Accueil h4    { position:absolute ; visibility:hidden ; clip-path:inset(100%) ; white-space:nowrap ; }


/* BLOCS ******************************************************************************************/

#Qui,
#AvecVous,
#Engagements,
#Tribunes,
#Tracts,
#Videos,
.Blanc         { display:block ; padding:20px ; background:#FFFFFF ; color:#003F6F ; }

#Pourquoi,
#Comment,
.Bleu          { display:block ; padding:20px ; background:#003F6F ; color:#FFFFFF ; }


/* POP_LEGAL **************************************************************************************/

#pop_legal        { opacity:0 ; visibility:hidden ; pointer-events:none ; position:fixed ; width:600px ; height:700px ;
                    max-width:90% ; max-height:90% ; background:#FFFFFF ; top:50% ; left:50% ; transform:translate(-50%,-50%) ;
                    box-shadow:0 0 15px rgba(0,0,0,0.3) ; padding:20px ; overflow-y:auto ; box-sizing:border-box ;
                    transition:opacity .5s ease ; border-radius:10px ; z-index:300 ; }
#pop_legal.active { opacity:1 ; visibility:visible ; pointer-events:auto ; }
#pop_legal #close { position:absolute ; top:10px ; right:15px ; cursor:pointer ; font-size:18px ; background:#FF0000 ;
                    color:#FFFFFF ; border-radius:12px ; width:24px ; height:24px ; text-align:center ; }