/* CLASSES */
.floatLeft { float: left; }
.floatRight { float: right; }
.clearBoth { clear: both; }
.center { max-width: 100em; width: 100%; }
.nowrap { white-space: nowrap; }
.caseClic { display: block; height:100%; width: 100%; }
.separateur { height: 1px; background-color: #ccc; margin: 5px 0; border-top: 1px solid #ddd; list-style-type: none; pointer-events: none; }

.breakingNews { width: 100%; background-color: rgba(0, 0, 0, 0.5); margin: 1em 0; overflow: hidden; padding: 1em; }
.breakingNews:hover [data-text]:before { animation-play-state: paused; }
/* les blocks défilants */
.breakingNews [data-text] { white-space: nowrap; color: white; display: inline-block; min-width: 200%; /* 2x la largeur du conteneur */ }
.breakingNews [data-text]:before, .breakingNews [data-text]:after { content: attr( data-text) "\00A0"; display: inline-block; min-width: 50%; /* la moitié du parent */ }
.breakingNews [data-text]:before { animation: breakingNews-defil 20s infinite linear; }
@keyframes breakingNews-defil { 0% { margin-left: 0; } 100% { margin-left: -50%; } }

.bleu { color: #002D73; color: rgb(0,45,115); }
.bleuH { color: #002D73; color: rgb(0,45,115); }
.orange { color: #FF7F2F; color: rgb(255,127,47); }
.orangeH { color: #FF7F2F; color: rgb(255,127,47); }
.rouge { color: rgb(237,0,0); }
.rougeH:hover { color: rgb(237,0,0); }
.backGroundRouge td { background-color: rgb(237,0,0,0.4); }
.vert { color: rgb(22,184,78); }
.vertH { color: rgb(22,184,78); }
.blanc { color: #FFF; }
.blancH:hover { color: rgb(255,255,255); }
.caseRouge { background-color: rgb(237,0,0); }
.caseVerte { background-color: rgb(22,184,78); }
.bold  { font-weight: bold; }
.italic { font-style: italic; }
.petitFont { font-size: 90%; }
.barreH:hover { text-decoration: line-through; }
.underline { border-bottom: 1px solid grey; padding-bottom: .2em; margin-bottom: .5em; display: table; width: 100%; }
.lastline { padding-bottom: .2em; margin-bottom: .5em; display: table; width: 100%; }
.alignLeft { text-align: left; }
.alignRight{ text-align: right; }
.alignCenter{ text-align: center; }
.modifiable:hover { background-color: rgba(0,45,115,0.4); color: #FFF; }
.modifiable input:hover { color: #FFF; }
.last { display: table; width: 100%; }
.piggyBank img { margin: -0.5em 0.25em; height: 1.5em; width: auto; }
.piggyBank td, .piggyBank th { text-align: center; }

.imageCachee { position: relative; }
.imageCachee span { display: none; }
.imageCachee:hover span { display: block; position: absolute; z-index: 10; top: -5em; left: 2em; border:1px solid orange; border-radius: 1em; }
.imageCachee:hover .photo { max-height: 15em; width: auto; border-radius: 1em; margin-bottom: -4px; }

.iconeDelete { position: absolute; margin: -.3em 0 0 -.3em; }
.iconeDelete img { height: 2em; width: auto; }
.iconeCover{ position: absolute; margin: -.3em 0 0 2.3em; }
.iconeCover img { height: 2em; width: auto; }
.iconeRename { position: absolute; margin: -.3em 0 0 2.3em; }
.iconeRename input[type='text'] { width: 60% }
.iconeRename:hover form { display: inline-block; position: relative; top: 1em; left: -6em; }
.iconeRename img { height: 2em; width: auto; }
.iconeRename form { display: none; }

/* FOND DU SITE */
html { background: url(../images/background-min.png); background-attachment: fixed; font-size: 0.9em; overflow-x: hidden; }
input, select, html { font-family: Calibri; }
body { margin: 0; padding: 0; overflow-x: hidden; }
a { text-decoration: none; color: inherit; }
fieldset { padding: 1em; }

/* VOLETS DE CONFIRMATION / ECHEC */
#voletConfirmation { float: left; background-color: rgba(22,184,78,0.8); margin: 2em 0; border: 1px solid grey; color: #FFF; padding: 1em 2em; }
#voletEchec { float: left; background-color: rgba(237,0,0,0.8); margin: 2em 0; border: 1px solid grey; color: #FFF; padding: 1em 2em; }

/* ENTETE DE PAGE - HEADER */
#header { padding: 1em 10%; }
#header img { height: 4.5em; }
#header h1 { margin: 0; padding: .3em .5em; font-size: 1.5em; }
/* ENTETE DE PAGE - ENCART DE CONNEXION */
#encartConnexion { padding: 1em 10%; }
#encartConnexion input { line-height: 1.5em; }
#encartConnexion input[type='submit'] { height: 2em; margin-top: -.1em; background-color: rgb(0,45,115); border: 1px solid grey; color: #FFF; }
#encartConnexion span { font-style: italic; text-align: right; }
#encartConnexion a { padding-right: 3em; }

/* MENU DEROULANT */
#menuDeroulant { font-size: .9em; padding: 0; margin: 0; list-style: none; text-align: center; }
#menuDeroulant, #menuDeroulant li { background-color: #002D73; }
#menuDeroulant ul { margin:0; padding:0; list-style-type:none; text-align:center; }
#menuDeroulant li { margin:auto; display: inline-block; }
#menuDeroulant li a { display:inline-block; width: 12em; color:white; text-decoration:none; padding: 1em 0; }
#menuDeroulant li:hover { background-color: #FF7F2F; }
#menuDeroulant ul li ul { display:none; }
#menuDeroulant ul li:hover ul, #menuDeroulant li:hover ul li { display:block; }
#menuDeroulant li ul { position:absolute; }

/* CORPS DE PAGE - BODY */
#corps, #multimedias { background-color: rgba(54,64,75,0.25); margin: 0 auto; width: 80%; padding: 2em 3em; border: 1px solid grey; text-align: center; }

#corpsAdmin { background-color: rgba(54,64,75,0.25); margin: 0 auto; width: 80%; padding: 2em 3em; border: 1px solid grey; }
#corpsAdmin a:hover { color: #FF7F2F; color: rgb(255,127,47); }

/* SELECTEUR */
#selecteur ul { text-decoration: none; }
#selecteur li { display: inline; background-color: rgba(0,45,115,0.9); padding: .5em 1em; margin: 0 .2em; }
#selecteur li:hover { background-color: rgba(255,127,47,0.9); }
#selecteur a { color: #FFF; font-size: 90%; }

/* TABLEAU AFFICHAGE */
#tableau { width: 100%; margin: 0 auto; text-align: left; }
#tableau th { color: white; padding: .5em; background-color: rgba(255,127,47,0.9); }
#tableau input[type="submit"] { background: none; border: none; }
#tableau input[type="submit"]:hover { cursor: pointer; color: #FFF; }
#tableau input[type="time"] { width: 20%; }
/* COULEURS DES LIGNES */
#tableau tr:nth-child(2n) { background-color: rgba(54,64,75,0.1); }
#tableau tr:hover { background-color: rgba(0,45,115,0.6); color: #FFF; }
/* ORGANISATION DES CASES */
#tableau td { padding: .5em; border-bottom: 1px solid grey; }
/* FORMULAIRE D'AJOUT DE SECOURISTES */
#ajoutSR input[type="submit"] { border: 1px solid rgb(0,45,115); border-radius: 10px; margin-bottom: 10px; }
#ajoutSR input[type="submit"]:hover { background-color: #FFF; color: rgb(0,45,115); }
#ajoutSR select { padding: 3px; border: 1px solid rgb(0,45,115); border-radius: 10px; background: none; width: 80%; }
#ajoutSR select:hover { background-color: #FFF; color: #000; }

/* MEDIATHEQUE - PARTAGE DE PHOTOS / VIDEOS */
#multimedias fieldset { float: left; padding: 1em; }
#multimedias img { margin : .5em; max-height: 20em; width: auto; }
#multimedias table { padding: .5em; margin: .5em; border: 1px solid #FFF; display: inline-block; }
#multimedias table:hover { background-color: rgba(0,45,115,0.6); color: #FFF; }
#multimedias .vignette { max-height: 7em; max-width: 10em; }

/* OPTIONS DE COMPTE - PAGE PROFIL */
#optionsCompte { border: 1px solid #FFF; box-shadow: 2px 2px 1px #FFF; padding: 2em; display: inline-block; margin: auto 2em; }
#optionsCompte input { background: none; border: none; font-size: 1em; width: 100%; }
#optionsCompte select { padding: 3px; border: 1px solid rgb(0,45,115); border-radius: 10px; background: none; }
#optionsCompte select:hover { background-color: #FFF; color: #000; }
#optionsCompte input[type="radio"] { margin: .5em 0; }
#optionsCompte input[type="submit"] { background-color: rgba(0,45,115,0.4); padding5 .5em 1em; border: 1px solid grey; margin-top: 1em; width: auto; height: 2em; }
#optionsCompte input[type="reset"] { background-color: rgba(54,64,75,0.4); padding: .5em 1em; border: 1px solid grey; width: auto; margin-left: 2em; height: 2em; }
#optionsCompte input[type="reset"]:hover, #optionsCompte input[type="submit"]:hover { background-color: rgba(255,127,47,0.9); color: #FFF; cursor: pointer; }
#optionsCompte input[type="time"], #optionsCompte input[type="number"] { width: 30%; }
#optionsCompte label { font-weight: bold; display: table-cell; }
#optionsCompte #enteteOptions { background-color: rgba(0,45,115,0.4); margin-bottom: 1em; font-style: italic; padding: 1em 2em; }
#optionsCompte input[type=""] { margin: .5em 0; background-color: rgba(0,45,115,0.4); padding: 0 1em; border: 1px solid grey;  border-radius: 5px; width: auto; height: 2em; font-style: italic; font-size: 1em; }
#optionsCompte input[type=""]:hover { background-color: rgba(255,127,47,0.9); color: #FFF; cursor: pointer; }
#optionsCompte .moitmoit { width: 45%; }

/* COLONNES */
#colonneGauche { float: left; width: 48%; }
#colonneDroite { float: right; width: 48%; }

/* BOUTONS SMS */
.boutonSMS { list-style:none; font-size: 2em; text-align: center; }
.boutonSMS a { border: 1px solid black; padding: .5em 1em; background-color: rgba(0,45,115,0.4); color: #FFF; }
.boutonSMS li { display: inline-block; margin: 1.2em; }

/* PIED DE PAGE - FOOTER */
#footer { text-align: center; font-style: italic; color: grey; }
#footer a { color: #002D73; }


/* -----------------------------------   RESPONSIVE MOBILE ------------------------------------------------------ */
/* TABLETTE (max-width: 1024px) */
@media screen and (max-width: 1024px) {

  html { font-size: 1em; }
  #header, #encartConnexion { padding: 1em 4%; }
  #corps, #corpsAdmin, #multimedias { width: 94%; padding: 1.5em; }
  #menuDeroulant li a { width: auto; padding: 1em 1.2em; }
}

/* MOBILE (max-width: 900px) */
@media screen and (max-width: 900px) {

  #header { display: flex; flex-direction: column; align-items: center; gap: 1em; padding: 1em 3%; }
  #header a { display: flex; align-items: center; justify-content: center; gap: 1em; }
  #header img { flex-shrink: 0; height: 3.5em; }
  #header h1 { font-size: 1.2em; padding: 0; margin: 0; line-height: 1.3; }
  #header span.cache { display: none; }
  #header .floatLeft { float: none; }

  #encartConnexion { clear: both; float: none; width: 100%; padding: 0; text-align: center; }
  #encartConnexion span { display: block; text-align: center; }
  #encartConnexion form { display: block; width: 100%; }
  #encartConnexion .floatRight { float: none; width: 100%; }
  #encartConnexion input, #encartConnexion input[type='submit'] { width: 70%; margin: .3em 0; height: 2em; font-size: 1em; }
  #encartConnexion a { padding-right: 0; display: block; }

  #corps, #corpsAdmin, #multimedias { width: 100%; padding: 1em .6em; border-left: none; border-right: none; }
  #colonneGauche, #colonneDroite { float: none; width: 100%; margin-bottom: 1.5em; }
  .floatLeft, .floatRight { float: none; }
  .breakingNews { width: 100%; margin: 0; }

  #menuDeroulant > ul { display: none; }
  #menuDeroulant.ouvert > ul { display: block; }

  #menuDeroulant li { display: block; width: 100%; text-align: left; }
  #menuDeroulant li a { display: block; width: 100%; padding: .9em 1.2em; border-bottom: 1px solid rgba(255,255,255,.15); }
  #menuDeroulant li ul { position: static; display: none; max-height: 0; overflow: hidden; }
  #menuDeroulant li.deplie > ul { display: block !important; max-height: 999px; }
  #menuDeroulant li.deplie > ul { display: block; max-height: 999px; }
  #menuDeroulant li.deplie > ul li { display: block; }
  #menuDeroulant li ul li a { padding-left: 2.6em; background-color: rgba(0,0,0,.22); font-size: .95em; }
  #menuDeroulant li.aSousMenu > a::after { content: " \25BE"; float: right; }
  #menuDeroulant li.aSousMenu.deplie > a::after { content: " \25B4"; }
  #menuDeroulant li.blanc { display: none; }

  #corps, #corpsAdmin { overflow-x: visible; }
  #tableau thead, #tableau tfoot { display: none; }
  #tableau tr { display: block; background-color: rgba(54,64,75,0.15); border: 1px solid rgba(0,45,115,0.3); border-radius: .6em; padding: .6em .8em; margin: 1em 0 1em -1em; max-width: 95vw; }
  #tableau tr.backGroundRouge { background-color: rgba(237,0,0,0.3); }
  #tableau tr.backGroundRouge td { background-color: transparent; }
  #tableau td::before { content: attr(data-label); font-weight: bold; color: rgb(0,45,115); flex-shrink: 0; white-space: nowrap; }
  #tableau td > * { flex: 1; min-width: 0; word-break: break-word; text-align: left; }
  #tableau td:last-child { border-bottom: none; }

  #tableau td img { max-width: 16px; min-width: 16px; height: auto; flex-shrink: 0; }
  #tableau td { max-width: 90vw; word-break: break-word; display: flex; align-items: center; gap: 8px; }

  #tableau td.piggyBank { justify-content: flex-end; }
  #tableau td.piggyBank::before { display: none; }
  #tableau td a, #tableau input[type="submit"] { min-height: 2.4em; line-height: 2.4em; padding: 0 .4em; }
  #tableau input[type="time"], #tableau input[type="text"], #tableau input[type="number"] { width: auto; min-width: 6em; height: 2.4em; font-size: 16px; }

  #selecteur ul { padding: 0; }
  #selecteur li { display: inline-block; margin: .2em; padding: .7em 1em; }

  #optionsCompte { display: block; margin: 1em 0; padding: 1em; width: 100%; }
  #optionsCompte .moitmoit { width: 100%; }
  #optionsCompte label { display: block; margin-bottom: .3em; }
  #optionsCompte input, #optionsCompte select { font-size: 16px; min-height: 2.6em; width: 100%; }
  #optionsCompte input[type="time"], #optionsCompte input[type="number"] { width: 50%; }
  #optionsCompte input[type="radio"], #optionsCompte input[type="checkbox"] { width: auto; min-height: auto; transform: scale(1.3); margin-right: .5em; }
  #optionsCompte input[type="submit"], #optionsCompte input[type="reset"] { width: 100%; height: 3em; margin: .5em 0 0 0; }
  #optionsCompte input[type=""] { width: 100%; height: 3em; }

  fieldset { padding: .8em; }
  #multimedias fieldset { float: none; width: 100%; }
  #multimedias table { display: block; width: 100%; margin: .5em 0; }
  #multimedias .vignette { max-height: 9em; max-width: 100%; }
  #multimedias img { max-height: 14em; max-width: 100%; }

  .boutonSMS { font-size: 1.3em; padding: 0; }
  .boutonSMS li { display: block; margin: .8em 0; }
  .boutonSMS a { display: block; padding: .9em; }

  #voletConfirmation, #voletEchec { float: none; margin: 1em 0; padding: 1em; text-align: center; }
}

/* PETIT MOBILE (max-width: 480px) */
@media screen and (max-width: 480px) {

  html { font-size: .95em; }
  #header h1 { font-size: 1.05em; }
  #header img { height: 3em; }
  #tableau { min-width: 42em; font-size: .9em; }
  #footer { font-size: .85em; padding: 0 1em; }
}


/* APPAREILS TACTILES */
@media (hover: none) {

  .imageCachee:hover span { display: none; }
  .imageCachee.actif span { display: block; position: absolute; z-index: 10; top: 2em; left: 0; border: 1px solid orange; border-radius: 1em; }
  .imageCachee.actif .photo { max-height: 15em; width: auto; border-radius: 1em; }

  .iconeRename:hover form { display: none; }
  .iconeRename.actif form { display: block; position: absolute; z-index: 10; top: 2.2em; left: 0; background-color: #002D73; padding: .5em; border-radius: .5em; white-space: nowrap; }
  .iconeRename.actif input[type='text'] { width: 10em; font-size: 16px; height: 2.4em; }

  .iconeDelete img, .iconeCover img, .iconeRename img { height: 2.4em; }
}