/* Webfont: Luciole-Regular */
/* 
Ces fontes sont distribuées gratuitement sous Licence publique Creative Commons Attribution 4.0 International : 
https://creativecommons.org/licenses/by/4.0/legalcode.fr
These fonts are freely available under Creative Commons Attribution 4.0 International Public License:
https://creativecommons.org/licenses/by/4.0/legalcode
Luciole © Laurent Bourcellier & Jonathan Perez
*/
@font-face {
  font-family: "Luciole";
  src: url("../fonts/Luciole-Regular.woff2") format("woff2"),
    url("../fonts/Luciole-Regular.woff") format("woff");
  font-style: normal;
  font-weight: normal;
  /*font-display: fallback;*/
}


/* Variables globales (couleurs, font, ...) */
:root {
  --img-avatar: url(../images/avataaar-1.svg);
}

/* Avatar par défaut */
[data-conseiller="1"] {
  --img-avatar: url(../images/avataaar-1.svg);
}

/* Avatar option 2 */
[data-conseiller="2"] {
  --img-avatar: url(../images/avataaar-2.svg);
}

/* Thème par défaut */
[data-theme="soleil"] {
  --color-dark: #1a2933;
  --color-light: #ffffff;
  --color-back-question: lightgrey;
  --color-back-réponse: lightblue;
  --color-back-bulle: lightyellow;
  --color-back-action: lightgreen;
  --color-slider-on: #ffb600;
  --color-slider-off: #ffffff;
  --color-disabled: lightgrey;
  --color-ok: #8bff61;
  --color-advice: #ffcb46;
  --color-alert: #ff6551;
}

/* Papier tigre inspiration 60 Berlin */
[data-theme="olive"] {
  --color-1-dominantes: rgb(140, 201, 170);
  --color-1-soutiens: rgb(247, 199, 22);
  --color-2-dominantes: rgb(248, 228, 178);
  --color-2-soutiens: rgb(26, 76, 65);
  --color-3-dominantes: rgb(165, 183, 200);
  --color-3-soutiens: rgb(215, 131, 75);

  --color-dark: var(--color-2-soutiens);
  --color-light: var(--color-1-soutiens);
  --color-back-question: var(--color-2-dominantes);
  --color-back-réponse: var(--color-1-soutiens);
  --color-back-bulle: var(--color-1-dominantes);
  --color-back-action: var(--color-3-soutiens);
  --color-slider-on: var(--color-1-dominantes);
  --color-slider-off: var(--color-2-dominantes);
  --color-disabled: var(--color-3-dominantes);
  --color-ok: var(--color-1-dominantes);
  --color-advice: var(--color-3-dominantes);
  --color-alert: var(--color-3-soutiens);
}

/* Papier tigre inspiration 254 Quarantièmes rugissants */
[data-theme="marine"] {
  --color-1-dominantes: rgb(23, 47, 55);
  --color-1-soutiens: rgb(186, 225, 249);
  --color-2-dominantes: rgb(38, 81, 117);
  --color-2-soutiens: rgb(132, 180, 225);
  --color-3-dominantes: rgb(92, 146, 174);
  --color-3-soutiens: rgb(89, 118, 145);

  --color-dark: var(--color-1-dominantes);
  --color-light: var(--color-1-soutiens);
  --color-back-question: var(--color-3-dominantes);
  --color-back-réponse: var(--color-1-soutiens);
  --color-back-bulle: var(--color-2-soutiens);
  --color-back-action: var(--color-3-soutiens);
  --color-slider-on: var(--color-2-dominantes);
  --color-slider-off: var(--color-1-soutiens);
  --color-disabled: var(--color-3-soutiens);
  --color-ok: var(--color-1-soutiens);
  --color-advice: var(--color-3-dominantes);
  --color-alert: var(--color-3-soutiens);
}

/*  Papier tigre inspiration 130 Lahavane */
[data-theme="pop"] {
  --color-1-dominantes: rgb(123, 201, 206);
  --color-1-soutiens: rgb(249, 180, 89);
  --color-2-dominantes: rgb(250, 241, 148);
  --color-2-soutiens: rgb(35, 154, 215);
  --color-3-dominantes: rgb(207, 130, 182);
  --color-3-soutiens: rgb(140, 201, 170);

  --color-dark: #2a4252;
  --color-light: var(--color-1-dominantes);
  --color-back-question: var(--color-2-dominantes);
  --color-back-réponse: var(--color-1-soutiens);
  --color-back-bulle: var(--color-2-dominantes);
  --color-back-action: var(--color-3-soutiens);
  --color-slider-on: var(--color-1-soutiens);
  --color-slider-off: var(--color-1-dominantes);
  --color-disabled: var(--color-3-soutiens);
  --color-ok: var(--color-2-dominantes);
  --color-advice: var(--color-1-soutiens);
  --color-alert: var(--color-1-dominantes);
}

/* Propriétés globales pour toute l'applciation '*/
html {
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

body {
  margin: 0;
  padding: 1rem;
  font: 1em/1.15 "Luciole", Georgia;
  color: var(--color-dark);
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

li {
  padding: 1rem 1rem;
  /*font-size: 1.2rem;*/
  color: var(--color-dark);
}

a {
  text-decoration: none;
  color: var(--color-dark);
}

b,
strong {
  font-weight: bolder;
}

small {
  font-size: 80%;
}

img {
  border-style: none;
  max-width: 100%;
  height: auto;
  display: block;
}

button,
input,
optgroup,
select,
textarea {
  font: inherit;
  margin: 0;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

details {
  display: block;
}

summary {
  display: list-item;
}

[hidden] {
  display: none;
}


/* Affichage standard des tables */
table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
  border: 3px solid var(--color-dark);
}

tfoot {
  font-size: 0.75rem;
}

th,
td {
  padding: 0.75rem;
}

/* Style bouton submit */
button[type=submit] {
  cursor: pointer;
  box-shadow: 2px 2px 5px 1px var(--color-dark);
  border: 0 none;
}

button[type=submit]:active {
  box-shadow: 0 2px var(--color-dark)666;
  transform: translateY(2px);
}


/* Affichage en mode grid */
.grid {
  display: grid;
  align-content: center;
  align-items: center;
  justify-content: space-between;
  justify-items: center;
}


/* Affichage flex en mode ligne */
.flex-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
}


/* Affichage flex en mode colonne */
.flex-column {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
}


/* Affichage dynamique de la barre de navigation */
.navbar {
  grid-template-columns: 2.5rem auto 2.5rem;
  gap: 0.5rem;
  margin-bottom: 1rem;

  .nav-menu {
    cursor: pointer;
    justify-content: space-around;
    width: 2rem;
    height: 2rem;

    button {
      cursor: pointer;
      box-shadow: none;
      border: 0 none;
      background: transparent;
    }
  }

  :popover-open {
    position: absolute;
    margin: 4.5rem 0.5rem 4.5rem 0.5rem;
    background-color: var(--color-light);
    border: 3px solid var(--color-dark);
  }

  .popover-links {

    ul {
      display: block;
      list-style: none;
      padding: 1rem;
      margin: 0;
    }

    li {
      font-size: 1.2rem;
    }
  }

  .nav-brand h1 {
    font-size: 1.2rem;
  }

  .responsive-links {
    display: none;

    ul {
      list-style: none;
      align-items: center;
      text-align: center;
      margin: 0;
      padding-inline-start: 0;

      li {
        font-size: 1rem;
        width: fit-content;
      }
    }
  }

  .nav-pref {
    cursor: pointer;
    border: 3px solid var(--color-dark);
    border-radius: 2rem;
    width: 2rem;
    height: 2rem;

    svg {
      margin-left: 0.4rem;
      margin-top: 0.4rem;
    }
  }
}


/* Affichage du menu pour les petites résolutions */
/*@media (max-width: 350px) {
  .navbar {
    .nav-brand h1 {
      font-size: 0.9rem;
    }
  }
}*/

/* Affichage du menu sur les grandes résolutions */
@media (min-width: 768px) {
  .navbar {
    grid-template-columns: 16rem auto 2.5rem;

    .nav-menu {
      display: none;
    }

    .responsive-links,
    ul {
      display: flex;
    }
  }
}


/* Définition des boutons switch*/
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* Masquage de la checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* Slider (default off) */
.slider {
  position: absolute;
  cursor: pointer;
  width: 60px;
  height: 34px;
  top: -2px;
  left: 1px;
  right: -1px;
  bottom: 0;
  background-color: var(--color-slider-off);
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: var(--color-dark);
  transition: .4s;
}

/* Slider checked */
input:checked+.slider {
  background-color: var(--color-slider-on);
}

input:focus+.slider {
  box-shadow: 0 0 1px var(--color-slider-on);
}

input:checked+.slider:before {
  transform: translateX(26px);
}

/* Sliders arrondis*/
.slider.round {
  border: 1px solid var(--color-dark);
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}


/* Style semi-rond pour les boite (texte, boutons) */
.semi-arrondi {
  /*border: 1px solid var(--color-dark);*/
  border-radius: 0.5rem;
  padding: 1rem;
  margin: 0.5rem;
}

/* Style rond pour les boite (texte, boutons) */
.arrondi {
  /*border: 1px solid rgba(0, 0, 0, 0.05);*/
  border-radius: 1.5rem;
  padding: 1rem;
  margin: 0.5rem;
}

/* Ombre légère sous l'objet */
.ombre {
  box-shadow: 2px 2px 5px 1px var(--color-dark);
}

/* Titre de la page */
.titre {

  font-size: 0.7rem;
  text-align: center;
  color: var(--color-dark);
  background: var(--color-dark);
  min-width: 50%;
  padding: 0.5rem;

  h1 {
    color: var(--color-light);
  }
}

/* Gradient gauche droite ok vers ko */
.gradient-ok-ko {
  background: linear-gradient(to right, var(--color-ok), var(--color-advice), var(--color-alert));
}

/* Image d'avatar */
.avatar {
  align-content: center;
  height: 156px;
  width: 124px;
  background-image: var(--img-avatar);
  background-repeat: no-repeat;
}

/* Affichage du contenu principal de la page */
.contenu {
  --auto-grid-min-size: 18rem;

  /*grid-template-columns: repeat(auto-fill, minmax(var(--auto-grid-min-size), 1fr));*/
  grid-template-columns: repeat(2, 1fr);
  /*gap: 4rem 2rem;*/
  justify-content: center;
}

.contenu-1-col {
  --auto-grid-min-size: 18rem;

  /*grid-template-columns: repeat(auto-fill, minmax(var(--auto-grid-min-size), 1fr));*/
  grid-template-columns: 1fr;
  /*gap: 4rem 2rem;*/
  justify-content: center;
}

/* Affichage de la question avec bulle en fond */
.zone-question {
  grid-template-columns: repeat(2, 1fr);
  gap: 0rem;

  .question {
    width: 12rem;

    p {
      position: absolute;
      text-align: center;
      width: 12rem;
    }
  }

  .stroke-shape {
    stroke: var(--color-slider-on);
  }
}

/* Zone des réponses (liste de réponses cliquable) */
.zone-réponses {
  form {
    gap: 1rem;
  }

  /* Format réponse standard */
  .réponse {
    border-color: transparent;
    text-align: center;
    color: var(--color-dark);
    background: var(--color-back-question);
    min-width: 12rem;
    width: 100%;
  }

  /* Mise en forme spécifique humeur page d'accueil */
  .humeur-ok {
    background: var(--color-ok);
  }

  .humeur-bof {
    background: var(--color-advice);
  }

  .humeur-ko {
    background: var(--color-alert);
  }
}

/* Zone actions (liste d'actions à effectuer) */
.zone-actions {
  max-width: 40rem;
  border: 1px solid var(--color-dark);

  h2 {
    text-align: center;
  }

  .action {
    color: var(--color-dark);
    background: var(--color-back-action);

  }

}

/* Zone conseils (liste de conseils sur post-its) */
.zone-conseils {
  article {
    background: var(--color-back-bulle);
    max-width: 40rem;

    h1 {
      font-size: 1rem;
    }
  }
}

/* Zone bulle (liste de conseils pendant le dialogue) */
.zone-bulles {
  article {
    background: rgba(255, 182, 0, 0.3);
    min-width: 20rem;
    max-width: 40rem;

    h1 {
      font-size: 1rem;
    }
  }
}

/* Zone d'affichage de l'historique */
.zone-historique {

  width: 100%;

  .navigate {
    padding: 0.5rem;
    color: var(--color-dark);
    background: transparent;
    font-size: 0.8rem;
  }

  .question {
    align-self: flex-start;
    background: var(--color-back-question);
  }

  .réponse {
    align-self: flex-end;
    text-align: right;
    background: var(--color-back-réponse);
  }

  .bulle {
    align-self: center;
    text-align: center;
    background: var(--color-back-bulle);
  }

  .action {
    align-self: center;
    background: var(--color-back-action);
  }

  .page {
    align-self: flex-end;
  }
}

/* Page des liens */
.zone-liens {

  article {
    background: var(--color-back-bulle);
    max-width: 40rem;

    h1 {
      font-size: 1.2rem;
    }
  }

}

/* Page à propos */
.zone-a-propos {
  article {
    background: var(--color-back-bulle);
    width: 80%;
    max-width: 40rem;

    h1 {
      font-size: 1.2rem;
    }

    a {
      text-decoration: underline;
    }
  }
}

/* Page des préférences */
.zone-préférences {
  max-width: 40rem;

  form {
    gap: 1rem;
    justify-content: space-between;
    border: 1px solid var(--color-dark);

    p {
      min-width: 50%;
      max-width: 65%;
    }
  }

  .sélection {
    align-self: center;
    /*margin: 0.5rem;*/
    margin: 1rem 0.5rem 1rem 0.5rem;
    flex-wrap: wrap;

    label {
      padding: 5px;
      position: relative;
      top: -26px;
      left: -5px;
      font-size: small;
      background: white;
    }

    select {
      position: relative;
      top: -0.5rem;
      border: none;
      background: transparent;
      color: var(--color-dark);
      /*max-width: max(14rem, 75%);*/
      width: 100%;
    }
  }

  /* Masquage des bouttons radio */
  [type=radio] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
  }

  /* Affichage du curseur sur les images à sélectionner */
  [type=radio]+img {
    cursor: pointer;
  }

  /* Changement de la couleur de fond pour l'image sélectionnée */
  [type=radio]:checked+img {
    background-color: var(--color-slider-on);
  }

}

/* Si un formulaire contient un select désactivé, on le grise */
form:has(:disabled) {
  border: 1px solid gray;
  color: lightgray;

  select[disabled] {
    color: lightgray;
  }
}

/* Ajustement de l'affichage du contenu pour les petites résolutions */
@media (max-width: 350px) {
  .zone-question {
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 0rem;
  }
}

@media (max-width: 700px) {
  .contenu {
    grid-template-columns: repeat(1, 1fr);
  }
}

/* Ajustement de l'affichage du contenu pour les grandes résolutions */
@media (min-width: 1024px) {

  .contenu {
    gap: 4rem 4rem;
  }

  /* 2 colonnes seulement max */
  .zone-question {
    grid-template-columns: repeat(2, 1fr);
    gap: 4rem 4rem;

    .avatar {
      width: 16rem;
    }

    .question {
      width: 18rem;

      p {
        width: 16rem;
        font-size: 1.2rem;
      }
    }

  }

  .zone-réponses {
    justify-self: center;
    /*grid-row: 2;*/
  }

  .zone-actions {
    justify-self: center;
  }

  .zone-conseils {
    justify-self: center;
    /*grid-row: 1;
    grid-column: 2;*/
  }

  .zone-bulles {
    justify-self: center;
  }

  .zone-historique {
    width: 50%;
  }

}

/* Affichage bouton retour arrière */
.back {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  color: var(--color-dark);
  background: transparent;
  font-size: 0.8rem;
}