body {
  background-color: #1c1e26; /* Nouveau fond sombre */
  font-family: Arial, Helvetica, sans-serif;
  scrollbar-gutter: stable; /* Préserve l'espace même quand la barre n'est pas nécessaire (supporté par Chrome, Edge, Firefox) */
  overflow-y: scroll;
}

hr.princ1 {
  border: 0;
  height: 1px;
  background-color: #a6aab1; /* Gris doux */
  margin: 6px -12px 6px;
}
hr.princ2 {
  border: 0;
  height: 1px;
  background-color: #92969d; /* Gris légèrement plus foncé */
  margin: 6px -12px 6px;
}
.accordion dl {
  font-size: 12px;
  width: 95%;
  max-width: 280px;
  margin: auto;
}

.accordion dl dt {
  cursor: pointer;
  text-align: left;
  padding: 0.5em;
  color: #ffffff; /* Texte blanc */
  transition-duration: 0.5s;
  transition-property: background;
  background: #3a5274; /* Bleu-gris profond */
  font-weight: bold;
  text-shadow: 0px 1px #2d3947;
}
.accordion dl dt:hover {
  background: #607d9c; /* Bleu-gris clair */
}
.accordion dl dd {
  display: none;
  height: auto;
  margin-left: 0;
  padding: 1em;
  color: #2f2f2f; /* Texte gris foncé */
  background-color: #f3e8d9; /* Beige doux */
  text-align: left;
}
.accordion dl dd ul {
  list-style-type: none;
  text-align: justify;
  padding: 0;
}
.accordion dl dd ul li {
  margin: 2px 0;
}
.accordion dl dd ul li a {
  color: #3a5274; /* Correspond à l'arrière-plan de l'en-tête */
  text-decoration: none;
  font-size: 12px;
  -webkit-transition: all 0.1s ease-in;
  -moz-transition: all 0.1s ease-in;
  -o-transition: all 0.1s ease-in;
}
.accordion dl dd ul li a:hover {
  color: #a44a4a; /* Rouge terre */
  padding-left: 5px;
  font-weight: bold;
}
.accordion-nested {
  margin: auto;
}
.accordion-nested dl {
  width: 100%;
  margin-left: -1em;
}
.accordion-nested dl dt {
  background: #a13d57; /* Rouge foncé */
  margin: 2px -2em 0 auto;
  color: #ffffff;
  text-shadow: 0px 1px #6c253b;
}
.accordion-nested dl dt:hover {
  background: #c16e84; /* Rouge clair */
}
.accordion-nested dl dd {
  background: #f3e8d9; /* Beige doux */
  margin: auto -2em auto auto;
}
.accordion-nested dl dd ul {
  list-style-type: none;
  text-align: left;
  padding: 0;
}
.accordion-nested dl dd ul li {
  margin: 2px 0;
}
.accordion-nested dl dd ul li a {
  color: #3a5274; /* Bleu-gris profond */
  text-decoration: none;
  font-size: 12px;
  -webkit-transition: all 0.1s ease-in;
  -moz-transition: all 0.1s ease-in;
  -o-transition: all 0.1s ease-in;
}
.accordion-nested dl dd ul li a:hover {
  color: #a44a4a; /* Rouge terre */
  padding-left: 5px;
  font-weight: bold;
}
.accordion-nested img {
  margin-top: 5px;
}

H2 {
  background-color: #6f974d; /* Vert doux */
  color: #a6533d; /* Rouge doux */
  font-size: 12px;
  font-weight: bold;
  margin: 15px -1em 5px -1em;
  padding: 5px;
}

a:link {
  text-decoration: none;
  color: black;
}
a:visited {
  text-decoration: none;
  color: black;
}
a:hover {
  text-decoration: none;
  color: #a44a4a; /* Rouge terre */
}
a:active {
  text-decoration: none;
  color: black;
}
.navig:link {
  font-weight: bold;
  text-align: center;
  display: block;
  text-decoration: none;
}
.navig:visited {
  font-weight: bold;
  background-color: #999999;
  text-decoration: none;
}
.navig:hover {
  font-weight: bold;
  background-color: #333333;
  text-decoration: none;
  color: white;
}
.navig:active {
  font-weight: bold;
  background-color: #333333;
  text-decoration: none;
  color: white;
}

/* Styles du calendrier */

.calendar-table {
  /* Force le tableau à ne pas dépasser la largeur du conteneur (280 px) */
  width: 100%;
  border-collapse: collapse;

  /* table-layout: fixed => répartit la largeur entre les colonnes, 
     plutôt que de l'ajuster selon le contenu */
  table-layout: fixed;

  /* Police un peu plus petite pour gagner de la place */
  font-size: 12px;
}

.calendar-table th,
.calendar-table td {
  /* Bords du tableau */
  border: 1px solid #ccc;

  /* Centrer le texte */
  text-align: center;

  /* Limiter l'espace autour du texte */
  padding: 2px;

  /* Largeur fixe par colonne ; on ajustera si besoin */
  width: 40px;

  /* Empêcher le texte de déborder et, si besoin, tronquer */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.calendar-month-title {
  background-color: #eee;
  color: black;
  font-weight: bold;
  text-transform: capitalize;
  font-size: 14px; /* légèrement plus grand pour le titre */
  /* Étendre le titre sur toutes les colonnes 
     (si colspan=8 dans votre code) mais 
     table-layout: fixed s’applique quand même */
}

.week-col {
  /* Colonne “Sem” : on peut la réduire un peu 
     si nécessaire pour gagner de la place */
  width: 25px !important;
  background-color: #f2f2f2;
  color: #666;
}

/* Jours hors du mois */
.out-month {
  background-color: #fafafa;
  color: #aaa;
}

/* Jour actuel */
.today {
  background-color: #ffe79f !important;
}

/* Jour avec anniversaire */
.birthday {
  background-color: #ffcece !important;
}

/* Styles du titre */

/* Import de la police */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap");

/* Conteneur principal (cercles + mot) avec la police et le centrage */
.ring {
  font-family: "Quicksand", sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto; /* marge supérieure et inférieure de 15px, centré horizontalement */
  margin-top: 10px; /* marge supérieure et inférieure de 15px, centré horizontalement */
  margin-bottom: 20px; /* marge supérieure et inférieure de 15px, centré horizontalement */
  position: relative;
  width: 85px;
  height: 85px;
}

/* Les cercles */
.ring i {
  position: absolute;
  inset: 0;
  border: 3px solid var(--clr);
  transition: 0.5s;
  filter: drop-shadow(0 0 5px var(--clr));
}
.ring i:nth-child(1) {
  border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
  animation: animate 12s linear infinite;
}
.ring i:nth-child(2) {
  border-radius: 41% 44% 56% 59% / 38% 62% 63% 37%;
  animation: animate 8s linear infinite;
}
.ring i:nth-child(3) {
  border-radius: 41% 44% 56% 59% / 38% 62% 63% 37%;
  animation: animate2 20s linear infinite;
}
/* Au survol, les cercles passent en blanc */
.ring:hover i {
  border: 3px solid #fff;
  filter: none;
}
@keyframes animate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes animate2 {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

/* Le mot */
.name {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  z-index: 1;
}
.name .cosmic {
  cursor: pointer;
}
.name .cosmic span {
  font-size: 3.9rem;
  font-weight: bold;
  color: #fff; /* Par défaut, le mot s'affiche en blanc */
  transition: color 0.5s;
}
/* Au survol de la zone des cercles, les chiffres adoptent leur couleur définie par --color */
.ring:hover .name .cosmic span {
  color: var(--color)
}
/* Les liens n'ont pas de soulignement et héritent de la couleur du span */
.name a {
  text-decoration: none;
  color: inherit;
  filter: drop-shadow(0 0 5px var(--clr));
}


/* Assure que l'accordéon et le conteneur admin ont la même largeur et sont centrés */
.admin-container {
  position: relative;
  width: 95%;
  max-width: 280px;
  margin: auto;
  margin-top: 3px; /* Optionnel, pour espacer verticalement */
  height: 0; /* Permet de positionner l'élément sans perturber le flux */
}

.admin-container a {
  position: absolute;
  right: 10px; /* L'icône sera à 10px du bord droit du conteneur */
  top: 0;
}

.admin-container a i {
  font-size: 1em;
  color: #85908a;
  transition: color 0.3s;
}

.admin-container a i:hover {
  color: #ffffff;
}



/* Styles du template calculatrice */

/* Conteneur du calculateur */
#calculator {
  width: 100%;
  max-width: 270px; /* Optionnel : ajuste selon vos besoins */
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

/* Écran d'affichage */
.screen {
  grid-column: span 4;
  aspect-ratio: 4/1; /* Conserve une proportion de 4:1 */
  font-size: calc(1rem + 1vw);
  text-align: right;
  padding: 0.5em;
  border: none;
  background: #fff;
  color: #333;
  border-radius: 5px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
}

/* Boutons généraux */
.btn {
  aspect-ratio: 1; /* Boutons toujours carrés */
  font-size: calc(0.8rem + 1vw);
  font-weight: bold;
  border: none;
  cursor: pointer;
  background: #ddd;
  color: #333;
  border-radius: 8px;
  transition: 0.2s;
}

/* Effet au survol */
.btn:hover {
  background: #ccc;
}

/* Boutons opérateurs */
.operator {
  background: #ff9800;
  color: white;
}

.operator:hover {
  background: #e68900;
}

/* Bouton "C" */
.clear {
  background: #e74c3c;
  color: white;
}

.clear:hover {
  background: #c0392b;
}

/* Bouton "=" qui occupe trois hauteurs */
.equals {
  grid-row: span 3;
  aspect-ratio: auto; /* Permet d'annuler le ratio imposé */
  height: 100%; /* S'assure qu'il remplit l'espace */
  background: #4caf50;
  color: white;
}

.equals:hover {
  background: #388e3c;
}

/* Conteneur principal */



.radio-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.3rem; /* Espace entre les carrés, ajustable */
  margin: 0rem; /* Un peu de marge autour si besoin */
}

/* Boutons radio */
.radio-box {
  flex: 1;
  aspect-ratio: 1; /* Assure un carré */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.3s;
}

/* Couleurs de fond */
.radio-box:nth-child(1) {
  background-color: #db0132; /* Rouge */
}
.radio-box:nth-child(2) {
  background-color: #e2007a; /* Rose */
}
.radio-box:nth-child(3) {
  background-color: #000000; /* Noir */
}
.radio-box:nth-child(4) {
  background-color: #fe9809; /* Orange */
} 
.radio-box:nth-child(5) {
  background-color: #1e90ff; /* Bleu */
}
.radio-box:nth-child(6) {
  background-color: #a90042; /* Rose */
}
.radio-box:nth-child(7) {
  background-color: #00fb8e; /* Vert */
}
.radio-box:nth-child(8) {
  background-color: #762b84; /* Violet */
}

.radio-box:hover {
  opacity: 0.8;
}

/* Icône SVG */
.radio-icon {
  width: 50%;
  height: 50%;
  margin-bottom: 0.3em;
  stroke-width: 1.5;
  fill: none;
  stroke: white;
}

/* Texte */
.radio-name {
  font-size: 0.7em;
  font-weight: bold;
  text-align: center;
  color: #ffffff;
}

/* Styles du template gestionnaire de mots de passe */

        #loginMessage { color:red; margin-top:10px; }
        .eye-icon { cursor:pointer; margin-left:8px; }
        #passwordDetails p { margin:5px 0; }
        .hidden { display:none; }

#clearSearch {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    display: none;
    color: #999;
    font-weight: bold;
    font-size: 16px;
}