/*
Theme Name: MEMENTEAU Modular
Template: Divi
Description: Child theme modulaire pour Divi — organisation par features.
Author: LIBERTYPROD
Version: 1.0
*/

/* masquer champs GF aux non enseignant > code sur function.php */
.hidden-field {
    display: none !important;
}

@media (max-width: 620px) {
	.tricolore-table {margin-top:-25px; width: 100%; border-collapse: collapse; border:0}
	.tricolore-col1{width: 80%; border: none !important;}
	.tricolore-col2{width:20%; border: none !important;}
	.entry-content tr td {padding:0 !important;}
	.na{width:80%; border: none !important; color: red !important; vertical-align: top !important;}
    .ec{width:80%; border: none !important; color: orange !important;}
    .ac{width:80%; border: none !important; color: green !important; vertical-align: bottom !important;}
	body .gform_wrapper.gravity-theme .gfield.gfield--width-one-sixth {
  -ms-grid-column-span:1/10 !important;
  grid-column: 1/10 !important;
	}}
body .gform_wrapper.gravity-theme .gsection {
  border-bottom: none;
  padding: 0;
}
@media (min-width: 621px) {
	.tricolore-table {margin-top:-25px; width: 100%; border-collapse: collapse; border :0}
	.tricolore-col1{width: 20%; border: none !important;}
	.tricolore-col2{width:80%; border: none !important;}
    .na{width:80%; border: none !important; color: red !important; vertical-align: top !important;}
    .ec{width:80%; border: none !important; color: orange !important;}
    .ac{width:80%; border: none !important; color: green !important; vertical-align: bottom !important;}}

.gform_wrapper.gravity-theme .gfield-choice-input {
  width: 20px;
	height: 20px;}

/* lien LMS*/
.footer-lecon{border-top:2px solid #ddd;padding-top:1.5em;margin-top:2em;font-family:sans-serif}
.footer-lecon p{margin:0 0 .8em}
.footer-lecon .navigation-lecon{display:flex;gap:12px;flex-wrap:wrap}
.footer-lecon a, .footer-lecon input.namasteMarkButton{
  background:#0c71c3;color:#fff;padding:10px 18px;text-decoration:none;border-radius:4px;font-weight:500
}
.footer-lecon a:hover, .footer-lecon input.namasteMarkButton:hover{background:#0090c7}

/* Grille à 3 colonnes fixes pour la nav */
.footer-lecon .navigation-lecon{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:12px;
  align-items:center;
}

/* Chaque “case” centre son contenu */
.footer-lecon .navigation-lecon .nav{
  display:flex;
  justify-content:center;
  min-height:40px; /* réserve la hauteur d’un bouton */
}

/* Si la case est vide (ex: pas de Prev), on la cache mais on garde la place */
.footer-lecon .navigation-lecon .nav:empty{
  visibility:hidden;
}

/* Optionnel : faire prendre toute la largeur au lien/bouton dans sa case */
.footer-lecon .navigation-lecon .nav > a,
.footer-lecon .navigation-lecon .nav > input{
  width:100%;
  text-align:center;
}



/* --- reset liste --- */
.memento-course-lessons {
  list-style:none !important;
  margin:0;
  padding:0;
}
.memento-course-lessons li {
  list-style:none !important;
  margin:.25em 0;
  padding:0;
  line-height:1.4;
  display:flex;
  align-items:center;
  gap:.4em;
}
.memento-course-lessons li::marker { content:""; }

/* base icône */
.memento-course-lessons .mcl-icon {
  position:relative;
  display:inline-block;
  width:1em;
  height:1em;
  line-height:1;
  vertical-align:middle;
  font-size:1em; /* nécessaire pour la coche unicode */
}

/* DONE = coche verte (unicode) */
.memento-course-lessons .mcl-icon-done::before {
  content:"\2713";              /* ✓ */
  position:absolute;
  inset:0;
  text-align:center;
  color:#28a745;
  font-weight:bold;
  font-size:1em;
  line-height:1em;
}

/* TODO = point gris */
.memento-course-lessons .mcl-icon-todo::before {
  content:"";
  position:absolute;
  width:0.5em;
  height:0.5em;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:#bbb;
}

/* LOCKED = point rouge */
.memento-course-lessons .mcl-icon-locked::before {
  content:"";
  position:absolute;
  width:0.5em;
  height:0.5em;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:#d9534f;
}

/* titre verrouillé */
.memento-course-lessons li.locked .mcl-lesson-title {
  opacity:.6;
  cursor:not-allowed;
  text-decoration:none;
}

/* 1) Container flex pour les blocs catégories */
.mcl-categories-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 1.5rem !important;
  margin: 0;
  padding: 0;
}

/* 2) Chaque bloc « Catégorie + liste » occupe 1/3 de la largeur */
.mcl-categories-grid .mcl-category-block {
  flex: 1 1 calc(33.333% - 1.5rem);
  box-sizing: border-box;
}

/* 3) Responsive : 2 colonnes sous 900px */
@media (max-width: 900px) {
  .mcl-categories-grid .mcl-category-block {
    flex: 1 1 calc(50% - 1.5rem);
  }
}

/* 4) 1 colonne sous 600px */
@media (max-width: 600px) {
  .mcl-categories-grid .mcl-category-block {
    flex: 1 1 100%;
  }
}

/* 5) Nettoyage de la liste et du titre */
.mcl-category-block .mcl-category {
  margin: 0 0 .5rem;
  font-size: 1.1em;
  border-bottom: 1px solid #ddd;
  padding-bottom: .3em;
}
.mcl-category-block .memento-course-lessons {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mcl-category-block .memento-course-lessons li {
  padding: .25rem 0;
}




/* Conteneur flex : la bouteille + la liste */
/* ============= WRAPPER ============= */
.memento-course-wrapper{
  display:flex;
  flex-wrap:nowrap;
  gap:1.2rem;
  align-items:flex-start;
}

/* ► Empilement vertical automatique sous 680 px */
@media(max-width:680px){
  .memento-course-wrapper{
    flex-direction:column;
    align-items:flex-start;
  }
}

/* ===========================
   BOUTEILLE DE PROGRESSION
   =========================== */
.memento-bottle {
	--w: 60px;             /* réutiliser la variable */
  width: var(--w);
  max-width: var(--w);
  /* couleur du liquide */
  --col: #28a745;
  position: relative;
  font-size: 0.85em; /* ajuste la taille du texte (le label) */
  margin: 0 auto;
}

/* �– COLLERETTE REHAUSSÉE & ROBINET SUR LE CÔTÉ */
.memento-bottle .bottle-neck {
  width: 8px;
  height: 19px;            /* ↑ plus haut qu’avant */
  margin: 0 auto;
  background: #555;
  border-radius: 5px 5px 0 0;
  position: relative;      /* pour positionner le robinet */
}

/* robinet (=la vanne) sur le côté droit de la collerette */
.memento-bottle .bottle-neck::after {
  content: "";
  position: absolute;
  top: 6px;                /* descendre un peu depuis le haut */
  right: -12px;             /* sortir du col vers la droite */
  width: 12px;
  height: 9px;
  background: #666;        /* couleur métal */
  border-radius: 25%;      /* rond comme une poignée */
  box-shadow: inset 0 0 1px rgba(0,0,0,0.8);
}

/* option : un tube (écrou) entre robinet et col */
.memento-bottle .bottle-neck::before {
  content: "";
  position: absolute;
  top: 9px;                /* centré verticalement par rapport au robinet */
  right: -12px;            /* juste à gauche du robinet */
  width: 12px;
  height: 2px;
  background: #444;        /* nuance plus sombre */
  border-radius: 1px;
}

.memento-bottle .bottle-body {
  width: 100%;      /* prend toute la largeur du conteneur parent */
  height: 140px;    /* hauteur de la bouteille */
  background: #e5e5e5;
  border-radius: 25px 25px 6px 6px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 3px rgba(0,0,0,0.2);
}

.memento-bottle .bottle-fill {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: var(--col);
  transition: height 0.6s ease-in-out;
}

.memento-bottle .bottle-label {
  text-align: center;
  margin: 0.25em 0 0;
  font-size: 0.8em;
  font-weight: 600;
  color: var(--col);
}