/**************/
/*   GLOBAL   */
/**************/

:root {

    --color-gradient-dark:   220, 232, 224;  /* #DCE8E0 */
    --color-gradient-light:  210, 216, 214;  /* #D2D8D6 */

    --color-A-dark:       darkslategray; /* h2 */
    --color-A-medium:     darkcyan; /* label selected */
    --color-A-light:      cadetblue; /* label hover */
    
    --color-B-medium:     darkorange;
    --color-B-light:      yellow;
    
    --color-gray-deepdark:dimgray; /*  */
    --color-gray-dark:    gray; /* h3 */
    --color-gray-medium:  gainsboro; /* toggle inactive */
    --color-gray-light:   whitesmoke; /* body */

    --global-font: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

    --color-pharmacien:     darkcyan;
    --color-prescripteur:   steelblue;
    --color-moderateur:     seagreen;
    --color-demo:           darkslateblue;
    --color-admin:          firebrick;
    --color-coordinateur:   orangered;

}

@media (prefers-color-scheme: dark) {
    :root {
    --color-gradient-1-a:       255, 250, 250; /* #fffafa */
    --color-gradient-1-b:       245, 245, 245; /* #f5f5f5 */
    }
}

body {

    margin: 0;
    font-weight: 400; 
    font-family:  var(--global-font);
    letter-spacing: 1px; 
    display: flex;
    flex-direction: column;
    background-image: linear-gradient(to top left, rgb(224, 236, 235), rgb(239, 239, 239));
    color: black;
    min-height: 100vh;
}

body > form {
    display: flex;
    flex-flow: column;
    padding-bottom: 8vw;
}

h1 {
    font-family: var(--global-font);
    font-weight: 100;
    font-size: 1.8rem;
    color: rgb(75, 75, 75);
    align-self: center;
    letter-spacing: 2px;
}

p.soustitre {
    text-align: center;
    font-size: 0.9rem;
    font-weight: 100;
    color: var(--color-A-light);
    font-style: italic;
    margin: 0;
    padding-top: 1rem;
}

h1.index {
    display: none;
}
img.logo {
    align-self: center;
    padding: 2rem;
}

/*
h1::before {
    content: "[";
    font-size: 2.8rem;
    color: rgb(96, 96, 96);
}
h1::after {
    content: "]";
    font-size: 2.8rem;
    color: rgb(96, 96, 96);
}
    */

@media (max-width: 970px) {
    h1 {
        display: none;
    }
    .logo {
        padding: 1rem;
    }
}

h2 {
    color:var(--color-A-dark);
    border: solid 1.5px var(--color-A-dark);
    border-radius: 0.3rem;
    padding: 0.5rem 0.8rem;
    font-weight: 400;
    font-size: 1.2rem;
    align-self: center;
    text-align: center;
    justify-self: center;
    margin: 1rem
}
p {
    margin: 0;
    padding: 0;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
li {
    list-style-position: inside;
}
input[type=radio] {
    display: none;
}
section {
    padding: 1.5rem 3vw;
}
article, fieldset {
    border: none;
    margin: 0;
    padding: 0;
}
select {
    padding: 0.4rem;
    font-size: 1.1rem;
    background-color: var(--color-gray-light);
    border: solid 2px dimgray;
    border-radius: 0.3rem;
    outline: none;
    width: 100%;
}

input[type=password], input[type=email], input[type=text], input[type=search] {
    flex: 1 1 auto;
    padding: 0.3rem 1rem; 
    font-size: 1.3rem;
    color: var(--color-A-dark);
    border-radius: 0.3rem;
    border: solid 2px dimgray;
    outline: none;
    wid th: 100%;
}
input[type=password]:focus, input[type=email]:focus, input[type=text]:focus, input[type=search]:focus, select:focus {
    border: solid 2px var(--color-A-light);
}
input[type=password]:focus:invalid {
    border: solid 2px crimson;
}

input[type=password].rpassword:focus:invalid {
    border: solid 2px var(--color-A-light);
}

textarea {
    padding: .7rem 1.2rem;
    border-radius: 0.4rem;
    font-size: 1rem;
    border: solid 1px var(--color-gray-dark);
    background-color: white;
    color: var(--color-A-dark);
    resize: vertical;
    outline: none;
}
textarea:placeholder-shown {
    background-color: var(--color-gray-medium);
}

/******************************/
/*  BOUTONS PLUS / MOINS .PHP  */
/******************************/

div.row, div.onlyrow {
    display: flex;
    flex-flow: row;
    justify-content: end;
    padding: 0 4vw;
}

@media (max-width: 600px){
    div.row {
        flex-flow: column;
        justify-content: stretch;
    }
    input[type=submit], button, input[type=button] {
        justify-self:stretch;
    }
}

input[type=submit], button, input[type=button] {
    margin: 1rem 1rem;
    padding: 1rem 1.5rem;
    font-size: 1.2rem;
    color: white;
    font-weight: 400;
    letter-spacing: 2px;
    border: none;
    border-radius: 4px;
    box-shadow: 2px 4px 6px var(--color-gray-dark);
}
input[type=submit] {
    background-color: var(--color-A-dark);
}
.boutonsecondaire {
    background-color: var(--color-A-medium);
}
input[type=submit]:hover {
    color: var(--color-B-light);
}
.boutonsecondaire:hover {
    color:cyan;
}
input[type=submit]:hover, .boutonsecondaire:hover {
    box-shadow: 3px 6px 8px rgb(91, 123, 117);
    transform: translateY(-2px) translateX(-1px);
}
input[type=submit]:active, button:active, .boutonsecondaire:active {
    color: var(--color-B-light);
    box-shadow: 1px 1px 2px var(--color-gray-dark);
    transform: translateY(1px);
}
.boutonsecondaire:disabled, .boutonsecondaire:disabled:hover {
    background-color: var(--color-gray-dark);
    box-shadow: 2px 4px 6px var(--color-gray-dark);
    transform: none;
    color: white;
}

/**********************/
/*  STATISTIQUES.PHP  */
/**********************/

th,
td {
    border: 1px solid white;
    padding: 0.6rem 0.7rem;
    font-size: 0.8rem;
}
tr:nth-of-type(even) {
    background-color: var(--color-gray-light);
}
tbody tr:nth-of-type(odd) {
    background-color: rgb(210, 212, 210);
}
th[scope="row"] {
    text-align: start;
}
thead {
    background-color: var(--color-A-dark);
    color: white;
}
tfoot {
    background-color:cadetblue;
    color: white;
}
tfoot tr {
    text-align: end;
}
td {
    text-align: center;
}
table {
    border-collapse: collapse;
    border: 2px solid transparent;
    font-weight:200;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 0.8rem;
    letter-spacing: 1px;
}

caption {
    caption-side: top;
    font-size: .7rem;
    padding: 1rem 0 1rem 0
}

/****************/
/*  HEADER.PHP  */
/****************/

header {
    padding-bottom: 3rem;
}
nav {
    padding: 0;
    z-index: 5;
    top: 0;
    right: 0;
    left: 0;
    position: fixed;
    flex: 1 1 auto;
}
nav input[type=checkbox], label[for=menu] {
    display: none;
}
nav ul {
    display: flex;
    flex-direction: row;
    border-bottom: solid 1px gray;
    background-color: var(--color-gray-light);
    padding: 0rem 0.6rem;
}
@media (max-width: 970px) {
    nav ul {
        display: none;
    }
    nav input[type=checkbox]:checked ~ ul {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        position: fixed;
        width: calc(100% - 5rem);
        background-color: var(--color-gray-light);
        z-index: 1;
        padding: 1.5rem 4rem;
    }
    label[for=menu] {
        display: flex;
        margin: 0;
        justify-content: space-between;
        align-items: center;
        color: white;
        background-color: var(--color-A-dark);
    }
    label[for=menu]::after {
        content: "≡";
        font-size: 2rem;
        padding: 0rem 0.7rem;
    }
    nav input[type=checkbox]:checked + label[for=menu]::after {
        content: 'x';
        font-size: 2rem;
        padding: 0 0.8rem 0.1rem 0.8rem;
    }
    label[for=menu]:hover {
        background-color: var(--color-gray-medium);
        color: var(--color-A-dark);
    }
    label[for=menu]:active {
        color: white;
        background-color: var(--color-A-dark);
    }
}
@media (min-width: 400px) {
    label[for=menu]::before {
        content: "Observatoire du médicament";
        font-size: 1.4rem;
        padding: 0rem 1rem;
    }
}
@media (max-width: 400px) {
    label[for=menu]::before {
        content: "Observatoire";
        font-size: 1.4rem;
        padding: 0rem 1rem;
    }
}

nav li {
    display: flex;
    align-items: center;
}
nav li:nth-last-of-type(2) {
    flex: 1 1 auto;
    justify-content: flex-end;
}
nav a {
    color: var(--color-A-dark);
    padding: 0.6rem 0.7rem;
    margin: 0.2rem;
    text-decoration: none;
    border-radius: 3px;
    text-overflow: ellipsis;
}
nav a:hover {
    background-color: var(--color-gray-medium);
}
nav a.active {
    background-color:var(--color-A-dark);
    color: white;
}
nav a#compte {
    font-weight: 600;
}
nav a#compte.active {
    font-weight: 600;
}
nav a#connexion {
    border: solid 1px var(--color-A-light);
    color:var(--color-A-medium);
}
nav a#connexion:hover {
    background-color:var(--color-A-light);
    color: white;
}

nav a#compte.pharmacien { color:var(--color-pharmacien);}
nav a#compte.pharmacien.active { background-color:var(--color-pharmacien); color:white;}
nav a#compte.prescripteur { color:var(--color-prescripteur);}
nav a#compte.prescripteur.active { background-color:var(--color-prescripteur); color:white;}
nav a#compte.moderateur { color:var(--color-moderateur);}
nav a#compte.moderateur.active { background-color:var(--color-moderateur); color:white;}
nav a#compte.demo { color:var(--color-demo);}
nav a#compte.demo.active { background-color:var(--color-demo); color:white;}
nav a#compte.admin { color:var(--color-admin);}
nav a#compte.admin.active { background-color:var(--color-admin); color:white;}

/*****************/
/*  ERROR ALERTS */
/*****************/

.alert {
    position: fixed; 
    right: 2rem;
    text-align: right; 
    padding: 1rem; 
    z-index: 50; 
    opacity: 0;
    border-radius: 8px;
    color: white;
    font-size: 1.2rem;
    animation-name: fadeInAndOut;
    animation-duration: 4s;
}
.alert:nth-of-type(1) {top: 4rem;}
.alert:nth-of-type(2) {top: 8rem;}
.alert:nth-of-type(3) {top: 12rem;}
.alert:nth-of-type(4) {top: 16rem;}

.alert {
    background-color:orangered; 
}
.success {
    background-color:steelblue; 
}

@keyframes fadeInAndOut {
  0%   {opacity: 0;}
  10%  {opacity: 0.9;}
  80%  {opacity: 0.9;}
  100% {opacity: 0;}
}

.congrats {
    position: fixed;
    animation-duration: 2s;
    animation-name: thumbsup;
    opacity: 0;
    align-self: center;
    top: 10vh;
    background-color: rgba(255,255,255,0.80);
    padding: 1rem;
    border-radius: 20px;
}

@keyframes thumbsup {
  from {
    top: 80vh;
    font-size: 50%;
    opacity: 0.5;
  }

  75% {
    font-size: 600%;
    opacity: 1;
  }

  to {
    font-size: 600%;
    top: 10vh;
    opacity: 0
  }
}

/***************/
/*  INDEX.PHP  */
/***************/

/******************************************************************/
/*  BULLES DE MESSAGES  */
/******************************************************************/


section#notes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 3rem;
    place-items: center center;
}

article.bulle, fieldset.bulle {
    background-color: white;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    padding: 1.5rem;
    border-radius: 1.5rem;
    max-width: 400px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}
p.notemessage {
    text-align: center;
    padding: 0 1rem;
    text-wrap: balance;
}
p.notemessage::before {
    content: "\275D";
    padding-right: 0.6rem;
}
p.notemessage::after {
    content: "\275E";
    padding-left: 0.5rem;
    vertical-align: -55%;
}
p.notemessage::before, p.notemessage::after {
    color: var(--color-A-medium);
    opacity: 0.5;
    font-size: 1.4rem;
}

time {
    text-align: end;
    color: var(--color-A-light)
}


/**********************************/
/* FOOTER */
/**********************************/

footer {
    display: flex;
    flex-flow: column nowrap;
}

footer p.totalremontees {
    color:var(--color-A-dark);
    padding: 2rem 0.8rem;
    font-weight: 100;
    font-size: 1rem;
    font-style: italic;
    text-align: center;
    margin: 10px
}

footer p.remerciements {
    color:white;
    background-color: var(--color-A-light);
    padding: 0.6rem 0 1rem 0;
    font-weight: 100;
    font-size: 1rem;
    align-self: stretch;
    text-align: center;
    margin: 0;
}


/*********************************************************************************/
/*  MODERATION . PHP */
/*********************************************************************************/

section#listeNoteAModerer {
    display: grid;
    gap: 2rem;
}

fieldset.notemoderation {
    display: grid;
    grid-template-columns: 4fr 1fr;
    grid-template-rows: 1fr;
    place-items: stretch;
}

div.messagemoderation {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 1fr;
    gap: 1rem;
    place-items: center center;
}

div.messagemoderation time {
    text-align: center;   
}

div.inputmoderation {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
}

@media (max-width: 600px){
    fieldset.notemoderation {
        grid-template-rows: .7fr .3fr;
        grid-template-columns: 1fr;
        place-items: center center;
    }
    div.messagemoderation {
        grid-template-rows: 3fr 1fr 1fr;
        grid-template-columns: 1fr;
    }
}

/*********************************************************************************/
/*  MON COMPTE . PHP */
/*********************************************************************************/

div.grille {
    margin: 5vw;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 3rem;
    place-items: stretch;
}

div.tuile {
    border: none;
    background-color: white;
    margin: 0;
    padding: 1rem 2rem 2rem 2rem;
    display: flex;
    flex-flow: column;
    justify-content: space-around;
    box-shadow: 0px 2px 5px -1px rgba(50, 50, 93, 0.25), 0px 1px 3px -1px rgba(0, 0, 0, 0.3) ;
}
div.colonne {
    display: flex;
    flex-flow: column;
}

p.etiquette, label.etiquette {
    font-weight: 100;
    color: var(--color-gray-dark);
    font-size: 1.2rem;
    padding-top: 1rem;
    padding-bottom: 0.5rem;
}

p.reponse {
    text-align: center;
    font-weight: 500;
    font-size: 1.2rem;
    padding: 0 2rem;
    color: var(--color-A-dark)
}

p.invitationlink {
    -webkit-user-select: all;
    user-select: all;
    background-color: var(--color-gray-medium);
    font-family: monospace;
    border-radius: 0.4rem;
    padding: 0.5rem;
    overflow-wrap: anywhere;
}

div.coininfdroit {
    display: flex;
    flex-flow: row;
    justify-content: end;
    padding: 1rem 0 0 0;
}

/**********************************/
/* CONNEXION.PHP / MONCOMPTE.PHP */
/**********************************/

body:has(form#connexion) {
    background-image: linear-gradient(to bottom, rgb(54, 78, 79), rgb(97, 140, 143));
}

.connexion h1 {
    color: white
}

div.centered {
    display: flex;
    justify-content: center;
    padding: 0.5rem;
}

form#connexion, form#cgu {
    display: flex; 
    align-items: center; 
    padding: 3vw;
}

form#connexion div.boite {
    padding: 2rem;
    width: 80%;
    max-width: 450px;
}

form#connexion label[for=email], #connexion label[for=mot_de_passe] {
    padding-top: 1rem;
}

@media (min-width: 600px) {
    #connexion input[type=submit] {
        margin: 2rem 0 1rem 0;
    }
}

a.reinitialiser {
    text-align: center;
    padding: 1.6rem;
    color: white;
    font-weight: 300;
}

a.reinitialiser:hover {
    color: var(--color-gray-medium);
}

form#cgu div.boite {
    padding: 2rem;
    width: 80%;
    max-width: 850px;
}

input[type=password]#confirmation_nouveau_mot_de_passe:focus:invalid, input[type=password]#nouveau_mot_de_passe:focus:invalid {
    background-image: url("images/alertsign.svg");
    background-size: 1lh;
    background-repeat: no-repeat;
    background-position: 95%;
}
input[type=password]#nouveau_mot_de_passe::placeholder {
    font-size: 1rem;
    color: lightgray
}

/*************************************************************/
/*  MENU GESTION BASE DONNEE UTILISATEURS  */
/*************************************************************/

/* Formulaire cadre et disposition */

.addupdatedeleteForm {
    display: flex;
    flex-direction: column;
    padding: 2rem 4vw;
}
.addupdatedeleteForm fieldset {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    border: none;
    padding: 1rem;
    align-self: stretch;
    background-color: white;
    border-radius: 0.4rem;
    box-shadow: 0px 2px 5px -1px rgba(50, 50, 93, 0.25), 0px 1px 3px -1px rgba(0, 0, 0, 0.3) ;
    margin-bottom: 1.5rem;
}
.addupdatedeleteForm fieldset div {
    display: flex;
    flex: 1 1 auto;
    padding: 0.3rem 0;
    align-items: baseline;
}
.addupdatedeleteForm label {
    padding: 0.5rem;
    padding-left: 0;
    flex: 0 0 auto;
}
.addupdatedeleteForm select {
    flex: 1 1 auto;
}
.addupdatedeleteForm fieldset[id=selection] select {
    margin: 0.5rem 0;
    background-color: white;
}
.addupdatedeleteForm fieldset[id=choice] {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content:space-around;
}
.addupdatedeleteForm fieldset[id=choice] label { 
    color: var(--color-gray-medium);
    font-size: 1.2rem;
    padding: 0.5rem 1rem;
    margin: 0.5rem 0;
    background-color: white;
    border: solid 0.4rem var(--color-gray-medium);
    border-radius: 0.3rem;
    box-shadow: 1px 3px 3px darkgray;
    text-align: center;
}
@media (max-width: 450px){
    .addupdatedeleteForm fieldset[id=choice] label {
        display: flex;
        flex: 1 1 auto;
        justify-content: center;
    }
}
.addupdatedeleteForm fieldset[id=choice] label:hover { 
    box-shadow: 1px 2px 1px darkgray;
    border-color:darkseagreen;
    color: darkseagreen;
    transform: translateY(2px);
}
.addupdatedeleteForm input[type=radio]:checked + label {
    color: var(--color-A-medium);
    background-color: var(--color-gray-light);
    border-color: var(--color-A-medium);
}

/**********************/
/*  UTILISATEURS.PHP  */
/**********************/


/* SECTION USERS pour gérer l'affichage de la liste des utilisateurs */

section#users {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(550px, 1fr));
    padding-top: 0.5rem;
    gap: 1rem;
}
@media (max-width: 620px){
    section#users {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
}

#users article {
    display: grid;
    /*grid-template-rows: 1fr 0.5fr 0.5fr 0.5fr;*/
    place-items: left center;
    padding: 1.3rem;
    gap: 0.5rem;
    background-color: white;
}
#users article * {
    margin: 0;
}
#users article h3 {
    font-family: sans-serif;
}

#users p.email::before {
    content: "Email : ";
    color: var(--color-A-dark);
}
#users p.rpps::before {
    content: "RPPS : ";
    color: var(--color-A-dark);
}
#users article div {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    padding-bottom: 0.5rem;
    gap: 1rem;
}
#users article div.etiquette {
    flex-flow: row nowrap;
    flex-grow: 1;
}

#users p.profession {
    color: white; 
    padding: 0.4rem 0.6rem; 
    border-radius: 0.4rem;
}
#users p.pharmacien { background-color: var(--color-pharmacien);}
#users p.prescripteur { background-color:var(--color-prescripteur);}
#users p.coordinateur { background-color:var(--color-coordinateur);}
#users p.demo { background-color:var(--color-demo);}

#users p.privilege {
    padding: 0.3rem 0.5rem; 
    border-radius: 0.4rem;
    border-style: solid;
    border-width: 1px;
}
#users p.moderateur { color:var(--color-moderateur); border-color: var(--color-moderateur);}
#users p.administrateur { color:var(--color-admin); border-color: var(--color-admin);}
#users p.super-admin { color:var(--color-admin); border-color: var(--color-admin);}

#users p.abonnement { 
    background-color: orange;
    color: white; 
    padding: 0.4rem 0.5rem; 
    border-radius: 1rem;
    margin-left: auto;
}

/********************/
/*  MESAPPROS.PHP  */
/********************/

/*
form.pharmacien {
    display: flex;
    flex-direction: column;
    padding-bottom: 4rem;
}
*/

/******************************/
/*  FORMULAIRE NOTES  */
/******************************/

fieldset#remarque {
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    border: none;
    background-color: white;
    padding: 2rem 1rem;
    margin: 10px auto;
    display: flex;
    flex-flow: column;
    max-width: 800px;
}

section#remarques textarea {
    margin-top: 2rem;
    min-height: 6rem;
    border: solid 1px transparent;
    background-color: var(--color-gray-light);
    color: var(--color-A-medium);
    box-shadow: 1px 1px 3px darkgray inset;
    resize: vertical;
    outline: none;
}

section#remarques textarea:focus {
    border: solid 1px var(--color-A-light);
}

article#lastnote {
    margin: 2rem;
    align-self: center;
}

input[type=range] {
    margin: 1rem;
    accent-color: rgb(0, 128, 107);
}

div.compteur {
    text-align: end;
    color: var(--color-A-medium);
    padding-top: 1rem;
    padding-right: .5rem;
}

/*********************************************************************************/
/*  VOTE / FLAGS feux tricolores */
/*********************************************************************************/

fieldset.medoctension, article.medoctension {
    display: grid;
    grid-template-areas: "medicament"
                            "flag";
    align-self: flex-start;
}

.flag_radioinput { display: none;}

.flags {
   grid-area: flag;
   display: grid;
   grid-template-rows: 1fr;
   grid-template-columns: repeat(4, 1fr);
   place-items: center center;
   padding: .3rem 1rem;
   margin: 0 1rem;
}

.flag_label {
    width: 3rem;
    padding: .5rem;
    cursor: pointer;
}

label > svg {
    fill: rgb(213, 213, 213);
}
label > svg {
  transition: fill .3s, transform .3s, filter .3s;
}
label:hover > svg {
    filter: brightness(1.1) saturate(1.1);
    transform: scale(1.1);
    animation-duration: 1s;
}
input[type=radio]:checked + label > svg {
    transform: scale(1.4);
}
label:nth-of-type(1):hover > svg,
input[type=radio]:checked + label:nth-of-type(1) > svg,
label:nth-of-type(1):focus > svg {
  fill:limegreen;
}
label:nth-of-type(2):hover > svg,
input[type=radio]:checked + label:nth-of-type(2) > svg,
label:nth-of-type(2):focus > svg {
  fill: gold;
}
label:nth-of-type(3):hover > svg,
input[type=radio]:checked + label:nth-of-type(3) > svg,
label:nth-of-type(3):focus > svg {
  fill: darkorange;
}
label:nth-of-type(4):hover > svg,
input[type=radio]:checked + label:nth-of-type(4) > svg,
label:nth-of-type(4):focus > svg {
  fill: red;
}


/*********************************************************************************/
/*  CHECKBOX SURTOUT LES CHECK BOX MODERATION ET SURVEILLANCE */
/*********************************************************************************/

label.labelcheckbox {
    color: rgb(174, 174, 174);
    font-size: 1em;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: line-through;
    transition: color .3s;
    padding: 2rem 0;
}
label.labelcheckbox::after {
    color: red;
    margin-left: 0.6rem;
    text-decoration: line-through;
    transition: color .3s;
}
.toggle {
    height: 1.3rem;
    width: 1.3rem;
    margin: 1rem 1.5rem;
}
input[type=checkbox]:checked ~ label.labelcheckbox {
    color: black;
    text-decoration: none;
}
input[type=checkbox]:checked ~ label.labelcheckbox::after {
    content: "activée";
    color: green;
    text-decoration: none;
    margin-right: 2rem;
}
div.soussurveillance {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem 0;
    grid-area: soussurveillance;
}
label.surveillance::after {
    content: "desactivée";
}
input[type=checkbox]:checked ~ label.surveillance::after {
    content: "activée";
}
label.moderation::after {
    content: "masqué";
    margin-left: 0rem;
}
input[type=checkbox]:checked ~ label.moderation::after {
    content: "affiché";
    margin-right: 0rem;
}

/******************************************************************/
/*  FENETRE MODAL DIALOGUE (MULTI PAGE)  */
/******************************************************************/

dialog {
    border: none;
    border-radius: .5rem;
    max-width: 1000px;
    width: 80%;
    padding: 1rem;
    z-index: 20;
    box-shadow: 0px 2px 4px rgb(152, 152, 152);
    animati on: fadeInDown .3s ease-out backwards;
    -webkit-animation: fadeInDown .3s ease-out backwards;
}

@keyframes fadeInDown { 
        0% {    opacity:0;
                transform:translateY(-40px)} 
        to {    opacity:1;
                transform:translateY(0)}
}

dialog::backdrop {
    background-color: black;
    opacity: 0.4;
    -webkit-backdrop-filter:  blur(2px); /*blur(2px) opacity(20%);saturate(.2)*/
}

dialog form {
    display: grid;
    gap: 1rem;
    padding: 1rem 0;
}

dialog fieldset {
    display: grid;
    gap: 1rem;
}

dialog header {
    background-color: var(--color-A-dark);
    border-radius: .4rem;
    padding: 0;
    color: white;
    font-size: 1.2rem;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    box-sizing:content-box;
    margin-bottom: 1rem;
}

dialog header p {
    padding: 1rem;
}

header p::first-letter {
  text-transform: uppercase;
}

dialog button.fermer {
    background-color: transparent;
    color: var(--color-A-dark);
    align-self: stretch;
    justify-content: center;
    vertical-align: center;
    width: 3rem;
    margin: 0;
    border: none;
    border-left: 1px solid white;
    border-radius: 0;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    margin-left: 1rem;
    font-weight: 300;
    font-size: 1.6rem;
    color: white;
    box-shadow: none;
}

dialog button.fermer:hover {
    background-color: var(--color-A-light);
    color: white;
}

p#alerteDoublon {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}

p#alerteDoublon:not(:empty) {
    border: dashed 2px red;
}

p#alerteDoublon.interdiction:not(:empty)::before {
    content: '⛔️';
}
p#alerteDoublon.attention:not(:empty)::before {
    content: '⚠️';
}

p#alerteDoublon::before {
    font-size: 3rem;
    padding-right: 1rem;
    animation-name: zoom;
    animation-duration: .3s;
}

@keyframes zoom {
  from {opacity: 0; transform: scale(0.5);}
  to {opacity: 1; transform: scale(1);}
}

@media (max-width: 600px) {
    dialog#modalAjout {
        margin-top: 10vh;
    }
}

/******************************************************************/
/*  DIALOG TRI INDEX  */
/******************************************************************/

dialog#modalSpecialite {
    padding: 1rem;
    max-width: 800px;
    max-height: 80vh;
    overflow-y: hidden;
    container: modalSpecialite / inline-size;

}

dialog#modalSpecialite label {
    font-size: 1.2rem;
    padding-right: 2rem;
    white-space: nowrap;
    overflow: hidden;
}

dialog#modalSpecialite div.listespecialite {
    display: grid;
    grid-template-columns: 30px max-content 30px max-content 30px max-content;
    gap: .8rem;
    justify-content: center;
    margin: 2rem 0;
    max-height: 50vh;
}

dialog#modalSpecialite div.ilotbouton {
    align-self: center;
    border: 1px solid white;
    box-shadow: none;
}

dialog#modalSpecialite div.ilotbouton button {
    background-color: transparent;
    border-right: 1px solid white;
    color: white;
    box-shadow: none;
}

dialog#modalSpecialite div.ilotbouton button:hover {
    background-color: var(--color-A-medium);
    color: white;
}

div.ilotbouton button.specialiteButton:last-child {
    border-right: none;
}

@container modalSpecialite (width < 90ch) {

    dialog#modalSpecialite div.listespecialite {
        grid-template-columns: 30px max-content 30px max-content;
    }
}

@container modalSpecialite (width < 60ch) {

    dialog#modalSpecialite div.listespecialite {
        overflow-x: hidden;
        overflow-y: scroll;
        scroll-behavior: smooth;
        grid-template-columns: 30px max-content;
        padding: 2rem 0;
    }
    dialog#modalSpecialite div.ilotbouton {
        flex-flow: column;
        text-align: center;
        height: 3.5rem;
    }
    dialog#modalSpecialite div.ilotbouton button.ilotboutonButton {
        text-align: center;
        border-right: none;
    }
}

/******************************************************************/
/*  DIALOG TRI INDEX  */
/******************************************************************/

dialog#modalAlternative {
    position: fixed;
    padding: 1rem;
    width: 600px;
    height: 85vh;
    top: 5vh;
    left: calc(100vw - 680px);
    overflow-y: hidden;
    container: modalAlternative / inline-size;
    animation: moveFromeRight .3s ease-out;
}

@keyframes moveFromeRight { 
        0% {  transform:translate(1050px)} 
        to {  transform:translate(0)}
}

@media (max-width: 700px) {
    dialog#modalAlternative {
        width: 88vw;
        left: calc(-2vw);
    }
}

dialog#modalAlternative::backdrop {
    backdrop-filter: opacity(20%);
}

details > summary {
  padding: 1rem;
  text-align: center;
  border: none;
  border-radius: .4rem;
  color: white;
}

details[open] summary {
    margin-bottom: 1rem;
}

details[open] p {
  animation: animateDown 0.2s linear forwards;
}

@keyframes animateDown {
  0% {
    opacity: 0;
    transform: translatey(-15px);
  }
  100% {
    opacity: 1;
    transform: translatey(0);
  }
}

dialog#modalAlternative div#listeAlternative {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 1rem;
    overflow-y: scroll;
    padding: 0rem 1rem 1rem .2rem;
    max-height: 75vh;
    scrollbar-color: var(--color-A-dark) white;
}

div.listescrollabe {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    overflow-y: scroll;
    max-height: 55vh;
    padding: 0rem .1rem;
    border-radius: 1rem;
    scrollbar-width: thin;
}
div.maxheight-1 {max-height: 68vh;}
div.maxheight-2 {max-height: 60vh;}
div.maxheight-3 {max-height: 52vh;}
div.maxheight-4 {max-height: 45vh;}
div.maxheight-5 {max-height: 37vh;}
div.maxheight-6 {max-height: 29vh;}
div.maxheight-7 {max-height: 22vh;}
div.maxheight-8, div.maxheight-9, div.maxheight-10, div.maxheight-11, div.maxheight-12, div.maxheight-13 {max-height: 18vh;}

div.listescrollabe p {
    padding: 0.3rem 1rem;
    border-bottom: 0.5px solid #404343;
    font-weight: 100;
    letter-spacing: 0;

}
div.listescrollabe p:last-child {
    border-bottom: none;
}

.even {
    color: #565656;
}
.odd {
    color: #494949;
    background-color: #f1f1f1;
}
#identique {
    font-weight: 600;
}

/******************************************************************/
/*  BOITES DE MEDICAMENTS (MULTIPAGE)  */
/******************************************************************/

section#listeMedicamentsToujoursSousSurveillance,
section#listeMedicamentsPonctuellementEnTension,
section#listeMedicamentsAAjouterSousSurveillance,
section#tensions {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    grid-row: auto;
    gap: 2.4rem;
    padding-bottom: 6vh;
}

fieldset.boite, article.boite, div.boite {
    /*box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;*/
    box-shadow: 0px 2px 5px -1px rgba(50, 50, 93, 0.25), 0px 1px 3px -1px rgba(0, 0, 0, 0.3) ;
    background-color: white;
    border: none;
    border-radius: 6px;
    padding: 1rem;
    margin: 0;
    display: grid;
    gap: 1rem;
}

fieldset.medoctension:not(:has(input[type=radio]:checked)),
fieldset.medocsurveillance:not(:has(input[type=checkbox]:checked)),
fieldset.notemoderation:not(:has(input[type=checkbox]:checked)) {
    background-color: rgb(222, 228, 230); /* var(--color-gray-medium) !important;*/
    box-shadow: 1px 1px 1px rgb(164, 164, 164);
    transition: box-shadow .3s;
}
/*
fieldset.medoctension:not(:has(input[type=radio]:checked)):hover,
fieldset.medocsurveillance:not(:has(input[type=checkbox]:checked)):hover,
fieldset.notemoderation:not(:has(input[type=checkbox]:checked)):hover {
    background-color: rgb(234, 239, 240) !important;
    box-shadow: 1px 2px 4px rgb(124, 124, 124);
}
    */

fieldset:has(textarea:placeholder-shown) {
    background-color: rgb(222, 228, 230) !important;
    box-shadow: 1px 1px 1px rgb(164, 164, 164);
}

fieldset.medoctension:not(:has(input[type=radio]:checked)):hover div.flags,
fieldset.medocsurveillance:not(:has(input[type=checkbox]:checked)):hover div.soussurveillance,
fieldset.notemoderation:not(:has(input[type=checkbox]:checked)):hover div.inputmoderation {
    background-color: rgb(234, 239, 240) !important;
    box-shadow: 1px 2px 4px rgb(124, 124, 124);
    transition: box-shadow .2s, color .1s;
    border-radius: 4rem;
}


fieldset.medocsurveillance, article.medocsurveillance {
    display: grid;
    grid-template-areas: "boiteavectendance"
                        "soussurveillance";
    align-self: flex-start;
}

article.medocmoyenne {
    display: grid;
    grid-template-areas: "boiteavectendance"
                            "moyenne";
    align-self: flex-start;
}

div.boiteavectendance {
    grid-area: "boiteavectendance";
    display: grid;
    grid-template-areas: "tendance medicament";
    grid-template-columns: 1.8rem 1fr;
    gap: 1.3rem;
    place-items: stretch;
}

p.tendance {
    grid-area: tendance;
    display: grid;
    place-items: center;
    color: rgba(255, 255, 255, 0.7);
    border-radius: 8px;
    font-size: 2.3rem;
}

div.medicament {
    grid-area: medicament;
    display: grid;
    grid-template-areas: "denomination dosage";
    grid-template-columns: 1fr .2fr;
    gap: 1.5rem;
    align-items: stretch;
    place-self: center stretch;
}

/* CADRE COULEUR ET VOIE */
/* -------------------------------------------------------------------------- */

.gastro .tendance, label[for=gastro_checkbox]::first-letter, summary.gastro { background-color: rgb(165, 127, 94);} /* marron */
div.gastro p.princeps, div.gastro p.forme, div.gastro p.dosage { color: rgb(108, 83, 61);} /* marron */
div.gastro p.dosage { border-color: rgb(108, 83, 61);} /* marron */

.allergo .tendance, label[for=allergo_checkbox]::first-letter, summary.allergo { background-color: rgb(189, 103, 218);} /* violet clair */
div.allergo p.princeps, div.allergo p.forme, div.allergo p.dosage { color: rgb(127, 82, 142);} /* violet clair */
div.allergo p.dosage  { border-color: rgb(127, 82, 142);} /* violet clair */

.bacterio .tendance, label[for=bacterio_checkbox]::first-letter, summary.bacterio  { background-color: rgb(12, 150, 88);} /* vert */
div.bacterio p.princeps, div.bacterio p.forme, div.bacterio p.dosage { color: rgb(12, 117, 17);} /* vert */
div.bacterio p.dosage { border-color: rgb(12, 117, 17);} /* vert */

.viro .tendance, label[for=viro_checkbox]::first-letter, summary.viro { background-color: rgb(136, 193, 72);} /* vert-jaune */
div.viro p.princeps, div.viro p.forme, div.viro p.dosage { color: rgb(92, 116, 64);} /* vert-jaune */
div.viro p.dosage { border-color: rgb(92, 116, 64);} /* vert-jaune */

.cardiovasc .tendance, label[for=cardiovasc_checkbox]::first-letter, summary.cardiovasc { background-color: rgb(206, 18, 18);} /* rouge */
div.cardiovasc p.princeps, div.cardiovasc p.forme, div.cardiovasc p.dosage { color: rgb(171, 20, 20);} /* rouge */
div.cardiovasc p.dosage { border-color: rgb(171, 20, 20);} /* rouge */

.dermato .tendance, label[for=dermato_checkbox]::first-letter, summary.dermato { background-color: rgb(210, 172, 119);} /* peau */
div.dermato p.princeps, div.dermato p.forme, div.dermato p.dosage { color: rgb(148, 120, 80);} /* peau */
div.dermato p.dosage { border-color: rgb(148, 120, 80);} /* peau */

.diabeto .tendance, label[for=diabeto_checkbox]::first-letter, summary.diabeto { background-color: rgb(222, 178, 19);} /* orange jaune */
div.diabeto p.princeps, div.diabeto p.forme, div.diabeto p.dosage { color: rgb(181, 147, 26);} /* orange jaune */
div.diabeto p.dosage { border-color: rgb(181, 147, 26);} /* orange jaune */

.endocrino .tendance, label[for=endocrino_checkbox]::first-letter, summary.endocrino { background-color: rgb(242, 154, 12);} /* orange */
div.endocrino p.princeps, div.endocrino p.forme, div.endocrino p.dosage { color: rgb(182, 115, 7);} /* orange */
div.endocrino p.dosage { border-color: rgb(182, 115, 7);} /* orange */

.douleur .tendance, label[for=douleur_checkbox]::first-letter, summary.douleur { background-color: rgb(65, 89, 227);} /* bleu violet */
div.douleur p.princeps, div.douleur p.forme, div.douleur p.dosage { color: rgb(63, 79, 171);} /* bleu violet */
div.douleur p.dosage { border-color: rgb(63, 79, 171);} /* bleu violet */

.immunohematocancero .tendance, label[for=immunohematocancero_checkbox]::first-letter, summary.immunohematocancero { background-color: rgb(118, 27, 222);} /* violet foncé */
div.immunohematocancero p.princeps, div.immunohematocancero p.forme, div.immunohematocancero p.dosage { color: rgb(74, 18, 138);} /* violet foncé */
div.immunohematocancero p.dosage { border-color: rgb(74, 18, 138);} /* violet foncé */

.gyneco .tendance, label[for=gyneco_checkbox]::first-letter, summary.gyneco { background-color: rgb(201, 101, 179);} /* rose */
div.gyneco p.princeps, div.gyneco p.forme, div.gyneco p.dosage { color: rgb(161, 82, 144);} /* rose */
div.gyneco p.dosage { border-color: rgb(161, 82, 144);} /* rose */

.neuro .tendance, label[for=neuro_checkbox]::first-letter, summary.neuro { background-color: rgb(1, 82, 148);} /* bleu foncé */
div.neuro p.princeps, div.neuro p.forme, div.neuro p.dosage { color: rgb(3, 60, 106);} /* bleu foncé */
div.neuro p.dosage { border-color: rgb(3, 60, 106);} /* bleu foncé */

.ophtalmo .tendance, label[for=ophtalmo_checkbox]::first-letter, summary.ophtalmo { background-color: rgb(69, 148, 198);} /* bleu clair */
div.ophtalmo p.princeps, div.ophtalmo p.forme, div.ophtalmo p.dosage { color: rgb(72, 130, 166);} /* bleu clair */
div.ophtalmo p.dosage { border-color: rgb(72, 130, 166);} /* bleu clair */

.orl .tendance, label[for=orl_checkbox]::first-letter, summary.orl { background-color: rgb(6, 195, 157);} /* vert bleu */
div.orl p.princeps, div.orl p.forme, div.orl p.dosage { color: rgb(5, 165, 133);} /* vert bleu */
div.orl p.dosage { border-color: rgb(5, 165, 133);} /* vert bleu */

.pansement .tendance, label[for=pansement_checkbox]::first-letter, summary.pansement { background-color: rgb(175, 165, 149);} /* peau foncée */
div.pansement p.princeps, div.pansement p.forme, div.pansement p.dosage { color: rgb(156, 140, 116);} /* peau foncée */
div.pansement p.dosage { border-color: rgb(156, 140, 116);} /* peau foncée */

.pneumo .tendance, label[for=pneumo_checkbox]::first-letter, summary.pneumo { background-color: rgb(73, 37, 202);} /* violet bleu */
div.pneumo p.princeps, div.pneumo p.forme, div.pneumo p.dosage { color: rgb(51, 28, 134);} /* violet bleu */
div.pneumo p.princeps { border-color: rgb(51, 28, 134);} /* violet bleu */

.psy .tendance, label[for=psy_checkbox]::first-letter, summary.psy { background-color: rgb(44, 171, 143);} /* bleu vert */
div.psy p.princeps, div.psy p.forme, div.psy p.dosage { color: rgb(37, 146, 122);} /* bleu vert */
div.psy p.dosage { border-color: rgb(37, 146, 122);} /* bleu vert */

.radio .tendance, label[for=radio_checkbox]::first-letter, summary.radio { background-color: rgb(72, 72, 72);} /* gris */
div.radio p.princeps, div.radio p.forme, div.radio p.dosage { color: rgb(72, 72, 72);} /* gris */
div.radio p.dosage { border-color: rgb(72, 72, 72);} /* gris */

.rhumato .tendance, label[for=rhumato_checkbox]::first-letter, summary.rhumato { background-color: rgb(180, 44, 121);} /* marron */
div.rhumato p.princeps, div.rhumato p.forme, div.rhumato p.dosage { color: rgb(134, 28, 88);} /* marron */
div.rhumato p.dosage { border-color: rgb(134, 28, 88);} /* marron */

.uro .tendance, label[for=uro_checkbox]::first-letter, summary.uro { background-color: rgb(220, 198, 4);} /* jaune */
div.uro p.princeps, div.uro p.forme, div.uro p.dosage { color: rgb(173, 157, 9);} /* jaune */
div.uro p.dosage { border-color: rgb(173, 157, 9);} /* jaune */

.vaccin .tendance, label[for=vaccin_checkbox]::first-letter, summary.vaccin { background-color: rgb(15, 198, 94);} /* vert bleu */
div.vaccin p.princeps, div.vaccin p.forme, div.vaccin p.dosage { color: rgb(24, 165, 85);} /* vert bleu */
div.vaccin p.dosage { border-color: rgb(24, 165, 85);} /* vert bleu */

.autre .tendance, label[for=autre_checkbox]::first-letter, summary.autre { background-color: rgb(126, 126, 126);} /* gris clair*/
div.autre p.princeps, div.autre p.forme, div.autre p.dosage { color: rgb(104, 104, 104);} /* gris clair*/
div.autre p.dosage { border-color: rgb(140, 140, 140);} /* gris clair*/

label.specialite_label::first-letter {
    font-weight: 600;
    color: white;
    padding: 0 .2rem;
    margin-right: .2rem;
    border-radius: .5rem;
    opacity: 0.7;
}

div.denomination {
    grid-area: denomination;
    display: flex;
    flex-flow: column;
    overflow: hidden;
}
p.substance {
    grid-area: denomination;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;  
    overflow: hidden;
    line-clamp: 2;
    margin-bottom: 0.5rem;
    font-size: 1.3rem;
    font-weight: 400;
    color: rgb(45, 45, 45);
    letter-spacing: 1.5px;
}
p.princeps {
    font-size: 1.3rem;
    font-style: italic;
    font-weight: 600;
}
p.princeps::after {
    content: "®";
    font-size: 1rem;
}
p.forme {
    font-size: 0.8rem;
    font-weight: 100;
}
div.galenique {
    grid-area: dosage;
    display: grid;
    place-items: stretch stretch;
}
p.dosage {
    display: grid;
    place-items: center center;
    padding: 0.5rem;
    border-width: 2px;
    border-style: solid;
    border-radius: 0.7rem;
    font-weight: 400;
    font-size: 1.1rem;
    text-align: center;
}

/* MOYENNE */
/* -------------------------------------------------------------------------- */

div.moyenne {
    grid-area: moyenne;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
}
/*
meter {
    grid-column: 1;
    grid-row: 1;
    place-self: stretch;
    display: grid;
    height: 1rem;
    width: 100%;
    z-index: 2;
    transition: opacity .4s ease-out .5s;
}
*/

progress {
    width: 100%;
    grid-column: 1;
    grid-row: 1;
    place-self: center stretch;
    display: grid;
    z-index: 2;
    height: 0.5rem;
    background-color: transparent;
    animation: progress-animation 1s ease-in-out;
    transition: opacity .4s ease-out .5s;
}

@keyframes progress-animation {
  from { width: 0%; }
  to { width: 100%; }
}

progress[value] {
  border-radius: 6px;
  background-color: var(--color-gray-light);
  border: none;
  margin: 0;
  padding: 0;
}

progress[value]::-webkit-progress-value {
  background-color: var(--color-A-medium);
  border-radius: .2rem;
}
progress[value]::-webkit-progress-bar {
  background-color: transparent;
}
progress[value]::-moz-progress-bar {
  background-color: var(--color-A-medium);
  border-radius: .2rem;
}

progress[value].rouge::-webkit-progress-value {
  background-color: crimson;
}
progress[value].rouge::-moz-progress-bar {
  background-color: crimson;
}

p.remontee {
    grid-column: 1;
    grid-row: 1;
    place-self: center;
    transition: opacity .2s ease-in .5s;
    z-index: 1;
    color: grey;
    font-size: 0.7rem;
}

p.remontee {opacity: 0;}
/*
meter:hover {opacity: 0;}
meter:hover + p.remontee {opacity: 1;}
*/
progress:hover {opacity: 0;}
progress:hover + p.remontee {opacity: 1;}

/******************************************************************/
/*  TEXTAREA  */
/******************************************************************/

.low { color :darkcyan; }
.high { color : orange; }
.max { color : red; }
.zero { color : grey; }

/******************************************************************/
/*  INDEX MODAL TRIAGE  */
/******************************************************************/

div.ilotbouton {
    place-self: end;
    margin: 0.3rem 0;
    height: 2rem;
    display: flex;
    flex-flow: row nowrap;
    margin-left: 2vw;
    box-shadow: 1px 1px 5px grey inset;
    border-radius: .5rem;
}

div.ilotbouton:hover {
    box-shadow: 1px 1px 5px darkslategray inset;
}

input[type=radio] + label.ilotboutonLabel,
button.ilotboutonButton,
input[type="checkbox"].ilotboutonButton + label {
    color: var(--color-A-light);
    font-size: 1rem;
    padding: .3rem .5rem;
    margin: 0;
    border: none;
    display: flex;
    align-items: center;
}

input[type=radio]:checked + label.ilotboutonLabel,
input[type="checkbox"].ilotboutonButton:checked + label {
    background-color: var(--color-A-light);
    color: white;    
    border-radius: .5rem;
}
input[type="checkbox"].ilotboutonButton + label {
    font-weight: bolder;
    padding: .3rem .6rem;
}

button.ilotboutonButton {
    box-shadow: 1px 1px 5px grey inset;
}

input[type="checkbox"].ilotboutonButton {
    display: none;
}

button.ilotboutonButton.activation, input[type="checkbox"].ilotboutonButton:checked + label {
    background-color: var(--color-A-dark);
    color: white;
}

.ilotbouton button:first-child:not(:only-child),
.ilotbouton label:first-of-type:not(:only-of-type) {
    border-top-left-radius: .5rem;
    border-bottom-left-radius: .5rem;
}
.ilotbouton button:last-child:not(:only-child) {
    border-top-right-radius: .5rem;
    border-bottom-right-radius: .5rem;
}

input[type=radio]:not(:checked) + label.ilotboutonLabel:hover,
button.ilotboutonButton:hover,
input[type="checkbox"].ilotboutonButton + label:hover {
    color: var(--color-A-light);
}
button.ilotboutonButton:hover {
    box-shadow: 1px 1px 5px darkslategray inset;
}
input[type="checkbox"].ilotboutonButton:checked + label:hover {
    background-color: var(--color-A-light);
    box-shadow: 1px 1px 5px grey inset;
    color: white;
}

button.ilotboutonButton:active, button.ilotboutonButton:hover {
    transform: none;
}


@media (max-width: 900px) {
    div#dispositionilot {
        display: none;
    }
}

@media (min-width: 900px) {
    body:has(input[type=radio]#dispositionTableau:checked) section#tensions,
    body:has(input[type=radio]#dispositionTableau:checked) section#listeMedicamentsToujoursSousSurveillance,
    body:has(input[type=radio]#dispositionTableau:checked) section#listeMedicamentsPonctuellementEnTension {
        grid-template-columns: repeat(auto-fill, minmax(800px, 1200px));
        gap: 1rem;
        margin: 0 auto;

    }
    body:has(input[type=radio]#dispositionTableau:checked) section article.medocmoyenne {
        display: grid;
        grid-template-areas: "boiteavectendance moyenne";
        place-items: center stretch;
        grid-template-columns: 3fr 1fr;
    }
    body:has(input[type=radio]#dispositionTableau:checked) section fieldset.medoctension {
        grid-template-areas: "boiteavectendance flag";
        place-items: center stretch;
        grid-template-columns: 2fr 1fr;
    }
    body:has(input[type=radio]#dispositionTableau:checked) section div.boiteavectendance {
        grid-template-columns: 2.5rem 1fr;
    }
    body:has(input[type=radio]#dispositionTableau:checked) section p.tendance {
        font-size: 1.8rem;
        width: 2.5rem;
        height: 2.5rem;
        align-self: center;
    }

    body:has(input[type=radio]#dispositionTableau:checked) section div.denomination {
        display: grid;
        grid-template-columns: 3fr 2fr 0.8fr;
        grid-template-rows: 1;
        gap: 1rem;
        place-items: center stretch;
    }
    body:has(input[type=radio]#dispositionTableau:checked) section p.substance {
        grid-row: 1;
        grid-column: 1;
        -webkit-line-clamp: 1;
        overflow: hidden;
        line-clamp: 1;
        margin-bottom: 0;
        font-size: 1.2rem;
    }
    body:has(input[type=radio]#dispositionTableau:checked) section p.princeps {
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
        line-clamp: 1;
        font-size: 1.2rem;
        
    }
    body:has(input[type=radio]#dispositionTableau:checked) section p.forme {
        overflow: hidden;
        place-self: center;
        text-align: center;
    }
    body:has(input[type=radio]#dispositionTableau:checked) section p.dosage {
        padding: 0.3rem;
        font-weight: 400;
        font-size: 0.9rem;
    }

    body:has(input[type=radio]#dispositionTableau:checked) div.moyenne {
        padding: 0 1rem;
    }
}

body:has(input[type=radio]#classementSpecialite:checked) section article.allergo, body:has(input[type=radio]#classementSpecialite:checked) section fieldset.allergo { order: 0; }
body:has(input[type=radio]#classementSpecialite:checked) section article.douleur,body:has(input[type=radio]#classementSpecialite:checked) section fieldset.douleur { order: 1; }
body:has(input[type=radio]#classementSpecialite:checked) section article.bacterio, body:has(input[type=radio]#classementSpecialite:checked) section fieldset.bacterio { order: 2; }
body:has(input[type=radio]#classementSpecialite:checked) section article.viro, body:has(input[type=radio]#classementSpecialite:checked) section fieldset.viro { order: 3; }
body:has(input[type=radio]#classementSpecialite:checked) section article.cardiovasc, body:has(input[type=radio]#classementSpecialite:checked) section fieldset.cardiovasc { order: 4; }
body:has(input[type=radio]#classementSpecialite:checked) section article.dermato, body:has(input[type=radio]#classementSpecialite:checked) section fieldset.dermato { order: 5; }
body:has(input[type=radio]#classementSpecialite:checked) section article.diabeto, body:has(input[type=radio]#classementSpecialite:checked) section fieldset.diabeto { order: 6; }
body:has(input[type=radio]#classementSpecialite:checked) section article.endocrino, body:has(input[type=radio]#classementSpecialite:checked) section fieldset.endocrino { order: 7; }
body:has(input[type=radio]#classementSpecialite:checked) section article.gastro, body:has(input[type=radio]#classementSpecialite:checked) section fieldset.gastro { order: 8; }
body:has(input[type=radio]#classementSpecialite:checked) section article.gyneco, body:has(input[type=radio]#classementSpecialite:checked) section fieldset.gyneco { order: 9; }
body:has(input[type=radio]#classementSpecialite:checked) section article.immunohematocancero, body:has(input[type=radio]#classementSpecialite:checked) section fieldset.immunohematocancero { order: 10; }
body:has(input[type=radio]#classementSpecialite:checked) section article.neuro, body:has(input[type=radio]#classementSpecialite:checked) section fieldset.neuro { order: 11; }
body:has(input[type=radio]#classementSpecialite:checked) section article.ophtalmo,body:has(input[type=radio]#classementSpecialite:checked) section fieldset.ophtalmo { order: 12; }
body:has(input[type=radio]#classementSpecialite:checked) section article.orl, body:has(input[type=radio]#classementSpecialite:checked) section fieldset.orl { order: 13; }
body:has(input[type=radio]#classementSpecialite:checked) section article.pansement, body:has(input[type=radio]#classementSpecialite:checked) section fieldset.pansement { order: 14; }
body:has(input[type=radio]#classementSpecialite:checked) section article.pneumo, body:has(input[type=radio]#classementSpecialite:checked) section fieldset.pneumo { order: 15; }
body:has(input[type=radio]#classementSpecialite:checked) section article.psy, body:has(input[type=radio]#classementSpecialite:checked) section fieldset.psy { order: 16; }
body:has(input[type=radio]#classementSpecialite:checked) section article.radio, body:has(input[type=radio]#classementSpecialite:checked) section fieldset.radio { order: 17; }
body:has(input[type=radio]#classementSpecialite:checked) section article.rhumato, body:has(input[type=radio]#classementSpecialite:checked) section fieldset.rhumato { order: 18; }
body:has(input[type=radio]#classementSpecialite:checked) section article.uro, body:has(input[type=radio]#classementSpecialite:checked) section fieldset.uro { order: 19; }
body:has(input[type=radio]#classementSpecialite:checked) section article.vaccin, body:has(input[type=radio]#classementSpecialite:checked) section fieldset.vaccin { order: 20; }
body:has(input[type=radio]#classementSpecialite:checked) section article.autre, body:has(input[type=radio]#classementSpecialite:checked) section fieldset.autre { order: 21; }

body:not(:has(input[type=checkbox]#cardiovasc_checkbox:checked)) section#tensions article.cardiovasc { display: none; }
body:not(:has(input[type=checkbox]#gastro_checkbox:checked)) section#tensions article.gastro { display: none; }
body:not(:has(input[type=checkbox]#allergo_checkbox:checked)) section#tensions article.allergo { display: none; }
body:not(:has(input[type=checkbox]#bacterio_checkbox:checked)) section#tensions article.bacterio { display: none; }
body:not(:has(input[type=checkbox]#viro_checkbox:checked)) section#tensions article.viro { display: none; }
body:not(:has(input[type=checkbox]#dermato_checkbox:checked)) section#tensions article.dermato { display: none; }
body:not(:has(input[type=checkbox]#diabeto_checkbox:checked)) section#tensions article.diabeto { display: none; }
body:not(:has(input[type=checkbox]#endocrino_checkbox:checked)) section#tensions article.endocrino { display: none; }
body:not(:has(input[type=checkbox]#douleur_checkbox:checked)) section#tensions article.douleur { display: none; }
body:not(:has(input[type=checkbox]#immunohematocancero_checkbox:checked)) section#tensions article.immunohematocancero { display: none; }
body:not(:has(input[type=checkbox]#gyneco_checkbox:checked)) section#tensions article.gyneco { display: none; }
body:not(:has(input[type=checkbox]#neuro_checkbox:checked)) section#tensions article.neuro { display: none; }
body:not(:has(input[type=checkbox]#ophtalmo_checkbox:checked)) section#tensions article.ophtalmo { display: none; }
body:not(:has(input[type=checkbox]#orl_checkbox:checked)) section#tensions article.orl { display: none; }
body:not(:has(input[type=checkbox]#pansement_checkbox:checked)) section#tensions article.pansement { display: none; }
body:not(:has(input[type=checkbox]#pneumo_checkbox:checked)) section#tensions article.pneumo { display: none; }
body:not(:has(input[type=checkbox]#psy_checkbox:checked)) section#tensions article.psy { display: none; }
body:not(:has(input[type=checkbox]#radio_checkbox:checked)) section#tensions article.radio { display: none; }
body:not(:has(input[type=checkbox]#rhumato_checkbox:checked)) section#tensions article.rhumato { display: none; }
body:not(:has(input[type=checkbox]#uro_checkbox:checked)) section#tensions article.uro { display: none; }
body:not(:has(input[type=checkbox]#vaccin_checkbox:checked)) section#tensions article.vaccin { display: none; }
body:not(:has(input[type=checkbox]#autre_checkbox:checked)) section#tensions article.autre { display: none; }

input[type=radio]#dispositionGrille + label,
input[type=radio]#dispositionTableau + label,
input[type=radio]#classementSpecialite + label {
    font-size: 1.3rem;
}

body:has(input[type=checkbox]#rougePenurie:checked) section article:not(.rouge_penurie) {
    display: none;
}

body:has(input[type=radio]#fraicheurRecent:checked) section fieldset.ancien, body:has(input[type=radio]#fraicheurRecent:checked) section article.ancien {
    display: none;
}

/* Si la liste a plus de 5 éléments
body:has(article.boite:nth-child(n+6)) article.boite {
  backg round-color: red;
}
*/