/*  style for index.html */

html,
body {
    height: 100%;
}

body {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji", "Segoe UI Emoji"
}

::selection {
    background-color: #163e5d;
    color: white;
}

select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23374151' fill-opacity='0.8' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 0.75rem;
  padding-right: 2.5rem;
  cursor: pointer;
}

.glass {
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: saturate(140%) blur(10px)
}

.btn-primary {
    background-image: linear-gradient(135deg, #163e5d 0%, #163e5d 100%)
}

.btn-primary:hover {
    filter: brightness(1.1)
}

.text-gradient {
    background: linear-gradient(135deg, #e2e8f0 0%, #a5b4fc 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent
}

#titre {
    place-self: center;
    background: linear-gradient(90deg, #fff, rgb(76, 197, 197), #fff) -100%/ 200%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font: 900 clamp(3em, 5vw, 3em) 'Exo', sans-serif;
    animation: shimmer 2s linear infinite
}

@keyframes shimmer {
    to {
        background-position: 100%
    }
}

@media (forced-colors: active) {
    p {
        background: #212121;
        color: aquamarine
    }
}


.btnchat:active {
  box-shadow: 2px 2px 5px #4cc5c5;
}

.btnessai:active {
  box-shadow: 2px 2px 5px #4cc5c5;
}




/* Style de base du bouton newsletter */
.joinBtn {
  position: relative;
  padding: 1rem 2rem;              /* ≈ px-6 py-3 */
  font-size: 1rem;
  font-weight: 600;
  color: #ffffff;
  background: none;
  border: 2px solid #e2e8f0;
  border-radius: 0.5rem;           /* ≈ rounded-lg */
  cursor: pointer;
  overflow: hidden;
  transition: all 0.3s ease;
}

/* Effet liquid fill */
.joinBtn {
  background:
    linear-gradient(#111827 0 0) no-repeat
    calc(200% - var(--p, 0%)) 100% /
    200% var(--p, 0.3em);
  transition:
    0.3s var(--t, 0s),
    background-position 0.3s calc(0.3s - var(--t, 0s));
}

/* Hover : remplissage et texte blanc */
.joinBtn:hover {
  --p: 100%;
  --t: 0.3s;
  color: #ffffff;
}


.profil_senmentor{
  --ring: 4px;            /* épaisseur bordure */
  --c1: #50dfdb;          /* couleur 1 */
  --c2: #2a3cad;          /* couleur 2 */
  --speed: 25s;            /* vitesse animation */

  position: relative;
  display: inline-block;
  border-radius: 9999px;  /* cercle */
  padding: var(--ring);   /* espace pour l'anneau */
}

.profil_senmentor > img{
  display: block;
  border-radius: 9999px;
}

/* anneau animé */
.profil_senmentor::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: var(--ring);

 background: repeating-conic-gradient(
  from 0deg,
  var(--c1) 0deg 18deg,
  transparent 18deg 32deg,
  var(--c2) 32deg 52deg,
  transparent 52deg 70deg
);
  animation: ringSpin var(--speed) linear infinite;

  /* on garde seulement un anneau (trou au centre) */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;

  pointer-events: none;
}

@keyframes ringSpin{
  to { transform: rotate(360deg); }
}


/* Style select natif */
select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #e5e7eb;
  padding: 8px 16px 8px 12px;
  border-radius: 0.375rem;
  cursor: pointer;
  width: 100%;
  font-size: 0.875rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23e5e7eb' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 12px;
  min-width: 110px;
}

/* Style des options */
select option {
  background-color: #1f2937;
  color: #e5e7eb;
  padding: 8px;
}

/* Style pour Firefox */
@-moz-document url-prefix() {
  select {
    padding-right: 24px;
  }
}

/* Style pour IE10+ */
select::-ms-expand {
  display: none;
}