/*page*/
:root{
  --bg:#ffffff;
  --panel:#f3f4f6; 
  --muted:#e5e7eb; 
  --ink:#0f172a; 
  --accent:#BBD4FC; 
  --edge:#0b1220; 
  --line:#94a3b8;
}

*{ box-sizing: border-box; }

a{
  text-decoration :none;
}

body{
  margin:0; 
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; 
  background:var(--bg); 
  color:var(--ink); 
  display:grid; 
  grid-template-rows: auto 1fr auto;
  height:100vh;
  width:100vw;
  }

header{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(180deg, #ffffff, #f8fafc); 
  border-bottom:1px solid #e5e7eb;
  height:50px;
  padding-right: 1em;
  padding-left: 1em;
  
}

header #titre_appli{ 
  font-size:1.5rem; 
  font-weight:normal ; 
  letter-spacing:.2px;
  cursor:pointer; 
}

#application{ 
  display:grid; 
  grid-template-columns: 60px 1fr; 
  width:100vw;
  height: calc(100vh - 80px);

}

#menu_bar{ 
  background:var(--panel); 
  border-right:1px solid #e5e7eb; 
  overflow:auto; 

}

#conteneur_right{ 
  position:relative; 
  background:#ffffff; 
  display:grid;
  grid-template-rows: 50px 1fr; 
  min-height:0;
  width:calc(100vw - 60px);
  height: calc(100vh - 80px);
  overflow: scroll;
}

#conteneur_series{
  display:flex;
  flex-direction: row;
  justify-content : center;
  align-items: center;
  border-bottom: 1px solid  var(--panel);
}

.serie{
  width:30px;
  height:30px;
  font-size: 1.5em;
  border-radius: 15px;
  text-align: center;
  margin: 10px;
}


.serie:hover{
  cursor:pointer;
}

#conteneur_groupe_activites{
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-around;
  align-items: center;
}

.conteneur_activite{
  /*background-color: #00cc00;*/
  width:400px;
  display: grid;
  grid-template-columns: 150px 100px 150px;
  grid-auto-rows: min-content;
  margin:20px;
}

.conteneur_num{
  grid-column-start: 1;
  grid-column-end: 4;
  margin-bottom: 20px;
  font-size: 1.5em;
}

.num{
  border: 1px solid #000000;
  border-radius: 20px;
  width:40px;
  height:40px;
  display: flex;
  justify-content: center;
  align-items: center;  
}

.lettre{
  border: 1px solid #000000;
  border-radius: 15px;
  width:30px;
  height:30px;
  display: flex;
  justify-content: center;
  align-items: center;
}


.elements{
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 1.5em;
  overflow: clip;
}

.nb_depart,.x_image{
  background-color: #bde0fe;
  border: 1px solid #000000;
}

.x_depart,.nb_image{
  background-color: #ffffff;
  border: 1px solid #000000;
  
}

.conteneur_titre,.conteneur_titre,.conteneur_icone_note{
  font-size: 0.8em;
}

.element_ligne_num{
  visibility: hidden;
  margin-top:10px;
  font-size: 1.5em;
}


.texte_exp1{
  color: #0077b6;
  font-size: 1.5em;
}

.texte_exp2{
  color: #0077b6;
  font-size: 1em;
}

.texte_exp3{
  color: #000000;
  font-size: 1em;
}


footer{
  text-align:center; 
  font-size:.7rem; 
  color:#475569; 
  padding:.5rem; 
  border-top:1px solid #e5e7eb; 
  background:#fafafa;
}

footer a { 
  color:inherit; 
  text-decoration:underline dotted; 
}
footer span { 
  font-variant: small-caps; 
}

/*menu*/
.menu {
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  background:var(--panel);
}

.menu #separateur_enonce{
  width:45px;
  border-bottom: 1px solid #b3b3b3;
}

.menu .bt_menu{
  margin:0.5em 0.5em 0.5em 0.5em;
  border-bottom: 1px solid #00000000;
}


.menu .bt_menu:hover{
  cursor:grab;
  border-bottom:  1px solid #000000ff;
}

/*énoncé*/
.card{ 
  background:#fff; 
  border:1px solid #e5e7eb; 
  border-radius:14px; 
  padding:.75rem; 
  margin-bottom:.75rem; 
}

.card h2{ 
  margin:.25rem 0 .5rem; 
  font-size:1rem; 
  font-weight:600;
  text-align:center;
  margin-bottom:1rem; 
}

.card h2{ 
  margin:.25rem 0 .5rem; 
  font-size:1rem; 
  font-weight:600;
  margin-bottom:1rem; 
}

.image_menu{
  position: absolute;
  top: 3em;
  left:3.6em;
  resize:inline;
  overflow:auto ;
  direction: ltr;
  z-index: 1;
  width: 300px;
  min-width: 180px;
  height:auto;
  max-height:calc(100vh - 100px) ;
  margin:.75rem;
}

.image_menu .conteneur{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.image_menu .conteneur .titre{
  font-weight: bold;
  margin-bottom: 10px;
}

.image_menu .conteneur .texte{
  font-size: 0.8em;
}

.draggable{
  padding:0;
}

.draggable .conteneur{
  padding:.75rem; 
  margin-bottom:.75rem;
}

.handle{
  height: 20px;
  cursor: move;
  text-align: center;
  background-color: var(--panel);
}

.historique_menu{
  position: absolute;
  top: 14em;
  right:0.6em;
  z-index: 2;
  width: 400px;
  min-width: 250px;
  height:auto;
  max-height:calc(100vh - 100px) ;
  margin:.75rem;
  resize:inline;
  overflow:auto ;
  direction: ltr;
}

.conteneur_notes{
  grid-column-start: 1;
  grid-column-end: 4;
  display:flex;
  flex-direction: column;
  align-items: start;
  justify-content:space-around;
  margin-top:10px;
  margin-bottom: 10px;
  margin-left: 20px;
  border-left: solid 1px #000000;
}

.calculatrice_menu{
  position: absolute;
  top: 6em;
  right:0.6em;
  z-index: 2;
  width: 400px;
  min-width: 250px;
  height:auto;
  max-height:calc(100vh - 100px) ;
  margin:.75rem;
  resize:inline;
  overflow:auto ;
  direction: ltr;
}

.conteneur_calculatrice{
  display: grid;
  grid-template-columns: minmax(180px,auto) 20px minmax(150px,auto);
  margin-top:10px;
}

#champ_expression,#champ_egal,#champ_resultat{
  font-size: 1em;
  height:35px;
}

#champ_expression{
  background-color: var(--panel);
}


#champ_egal{
  
}


#champ_resultat{
  border:1px solid #000000;
  
}

/*boutons*/
.btn, button{ 
  background:#fff; 
  color:var(--ink); 
  border:1px solid #d1d5db; 
  border-radius:10px; 
  padding:.32rem .48rem; 
  font-size:.85rem; 
  cursor:pointer; 
  transition:.15s; 
}

.btn:hover, button:hover{ 
  border-color:#2B6CD6;
}

.btn[aria-pressed="true"]{ 
  border:1px solid #2B6CD6; 
  background-color: var(--accent); 
}

.aide_menu{
  position: absolute;
  top: 3em;
  left:3.6em;
  resize:inline;
  overflow:auto ;
  direction: ltr;
  z-index: 2;
  width: 350px;
  min-width: 180px;
  height:auto;
  max-height:calc(100vh - 100px) ;
  margin:.75rem;
}

.row{ 
  display:flex; 
  flex-wrap:wrap; 
  align-items:center;
 }

.centrer{
  justify-content: space-around;
}

.export_menu{
  position: absolute;
  top: 3em;
  left:3.6em;
  z-index: 2;
  width: 300px;
  min-width: 180px;
  height:auto;
  max-height:calc(100vh - 100px) ;
  margin:.75rem;
}

/*input*/
input[type="number"], input[type="color"], select{ 
  background:#fff; 
  border:1px solid #d1d5db; 
  color:var(--ink); 
  border-radius:10px; 
  padding:.2rem .4rem; 
}


/*Notes*/
.fields-container {
  margin-top:5px;
  margin-bottom: 5px;
  display: flex;
  flex-direction: column;
  width:100%;
}

.field-group {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 10px;
  cursor: move;
  margin-left:20px;
  margin-right: 20px;
}

.field-group:hover {
    background-color: #f0f0f0;
}
.field-group.dragging {
    opacity: 0.5;
    background-color: #e0e0e0;
}
.field-content {
    font-size: 0.8em;
    flex-grow: 1;
    text-align: center;
    display:grid;
    grid-template-columns: auto 50px auto;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
   /* border: 1px solid #000000;*/
}

.field-content_nb{
  max-width: 120px;
  text-align: right;
  overflow:clip;
}

.field-content_image{
  max-width: 120px;
  text-align: left;
  overflow:clip;
}

button {
    padding: 6px 10px;
    cursor: pointer;
    border: none;
    border-radius: 4px;
    font-size: 14px;
}
button:hover {
    opacity: 0.8;
}
.conteneur_bouton{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.add-field-btn {
  background-color: #4CAF50;
  color: white;
  margin-top:5px;
  margin-bottom: 5px;
  margin-left:20px;
}

.remove-all-btn {
  display: block;
  background-color: #f44336;
  color: white;
  margin-top:5px;
  margin-bottom: 5px;
  margin-left:20px;
}

.remove-btn {
  background-color: #f44336;
  color: white;
  margin:2px;
}
.drag-handle {
    cursor: move;
    color: #999;
    font-size: 14px;
}

/*disposition adptative*/
@media (max-width:975px) {
  #conteneur_groupe_activites{
    grid-template-columns: auto;
    justify-content: space-around;
    align-items: center;
  }
}


@media (max-width:586px) {
  .logo_irem img{
    height:30px;
  }
}

@media (max-width:420px) {
  .logo_irem img{
    display:none;
  }
}


@media (max-width:319px) {
  #application{ 
    height: calc(100vh - 95px); 
  }
}