/* ==========================================================================
   « Trouvez un mentor dans votre sujet » — clone de
   mew_dash/categories-live.html
   --------------------------------------------------------------------------
   Deux étapes : les domaines, puis les sujets. Tout est rendu par le
   serveur ; ces règles ne font que montrer l'une ou l'autre.

   Nunito, comme la maquette. Capriola n'existe qu'en 400 : toutes les
   graisses d'ici (700 à 900) y seraient fabriquées par le navigateur.
   Elle garde les titres, où elle est à sa place.
   ========================================================================== */

.cl {
  padding: 72px 0;
  background: #fff;
  font-family: Nunito, system-ui, sans-serif;
  color: #1C1C1E;
}

.cl-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: 26px;
  align-items: center;
}

.cl [hidden] { display: none !important; }

/* ---------- la bannière et le fil des étapes ---------- */
.cl-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 999px;
  background: #FFF1F1;
  color: #C0392B;
  font-size: 14.5px;
  font-weight: 800;
  text-align: center;
}

.cl-badge i { width: 6px; height: 6px; border-radius: 50%; background: #FF6363; flex: none; }

.cl-steps { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }

.cl-step-bt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  background: transparent;
  padding: 0;
  font-family: inherit;
}

.cl-step-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid #EDE7E3;
  background: #fff;
  color: #5F5E64;
  font-size: 14px;
  font-weight: 900;
}

.cl-step-l { font-size: 15.5px; font-weight: 800; color: #5F5E64; }
.cl-step-bt.is-on .cl-step-n { background: #1C1C1E; color: #fff; border-color: #1C1C1E; }
.cl-step-bt.is-on .cl-step-l { color: #1C1C1E; }
.cl-step-bt[data-cl-goto] { cursor: pointer; }
.cl-stepline { width: 30px; height: 1.5px; background: #EDE7E3; }

/* ---------- les deux panneaux ---------- */
/* Le passage d'une étape à l'autre est ANIMÉ : l'écran change entièrement,
   et sans transition on ne sait pas si l'on a avancé ou rechargé. */
.cl-pan {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 22px;
  align-items: center;
  animation: cl-monte .34s cubic-bezier(.22, .9, .24, 1) both;
}
.cl-pan[data-cl-pan="2"] { align-items: stretch; gap: 24px; }

.cl-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #C0392B;
}

.cl-eyebrow::before,
.cl-eyebrow::after { content: ""; width: 26px; height: 1.5px; background: #FFC9C9; }

/* Le titre garde Capriola : c'est la police des titres du site. */
.cl-h2 {
  margin: 0;
  font-family: Capriola, Georgia, serif;
  font-size: clamp(30px, 4.6vw, 46px);
  font-weight: 400;
  letter-spacing: -.03em;
  line-height: 1.12;
  text-align: center;
}

.cl-sub {
  margin: 0;
  max-width: 560px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.55;
  color: #5F5E64;
  text-align: center;
  text-wrap: pretty;
}

/* ---------- la recherche ---------- */
.cl-search {
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(560px, 100%);
  height: 58px;
  padding: 0 18px;
  border: 1.5px solid #DDD5CF;
  border-radius: 16px;
  background: #fff;
  transition: border-color .18s, box-shadow .18s;
}

.cl-search:hover { border-color: #C9BFB8; }
.cl-search:focus-within { border-color: #FF6363; box-shadow: 0 0 0 4px rgba(255, 99, 99, .12); }
.cl-search--sujet { width: 100%; }

.cl-loupe {
  position: relative;
  width: 16px;
  height: 16px;
  border: 2px solid #5F5E64;
  border-radius: 50%;
  flex: none;
}

.cl-loupe i {
  position: absolute;
  right: -3px;
  bottom: -5px;
  width: 2px;
  height: 7px;
  border-radius: 2px;
  background: #5F5E64;
  transform: rotate(-45deg);
}

.cl-search input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 16.5px;
  font-weight: 700;
  color: #1C1C1E;
}

.cl-search input::placeholder { color: #5F5E64; font-weight: 600; }
.cl-count { margin: 0; font-size: 15.5px; font-weight: 700; color: #5F5E64; text-align: center; }

/* ---------- les cartes de domaine ---------- */
.cl-domains {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}

.cl-dom {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  border: 1.5px solid #EDE7E3;
  border-radius: 22px;
  background: #fff;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  /* La carte est passée de <button> à <a> pour que l'accueil pointe vers les
     pages de domaine : il faut donc désarmer le style de lien hérité. */
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: border-color .22s, box-shadow .22s, transform .22s cubic-bezier(.22, .9, .24, 1);
}

.cl-dom:hover {
  border-color: #1C1C1E;
  box-shadow: 0 10px 26px -12px rgba(60, 30, 25, .22);
  transform: translateY(-3px);
}

.cl-dom-e {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 17px;
  background: #FFF1F1;
  font-size: 25px;
  line-height: 1;
  transition: transform .22s cubic-bezier(.34, 1.56, .64, 1);
}

.cl-dom:hover .cl-dom-e { transform: rotate(-6deg) scale(1.06); }

.cl-dom-name {
  padding-right: 30px;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1.3;
  color: #1C1C1E;
}

.cl-dom-peek {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
  color: #5F5E64;
}

.cl-dom-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: auto; padding-top: 4px; }
.cl-count-n { font-size: 13.5px; font-weight: 800; color: #5F5E64; font-variant-numeric: tabular-nums; }

/* La flèche se colore au survol : le seul accent de la carte. */
.cl-go {
  position: absolute;
  right: 16px;
  top: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
  color: #5F5E64;
  font-size: 17px;
  box-shadow: inset 0 0 0 1.5px #EDE7E3;
  transition: background .22s, color .22s, box-shadow .22s, transform .22s cubic-bezier(.22, .9, .24, 1);
}

.cl-dom:hover .cl-go {
  background: linear-gradient(38deg, #FFBCBC 0%, #FF6363 54%);
  color: #fff;
  box-shadow: none;
  transform: translateX(3px);
}

/* ---------- les résultats de recherche ----------
   Un bloc par groupe qui contient un sujet cherché : « arabe » rend
   Primaire, Collège et Secondaire, chacun avec son arabe et le nom de son
   domaine à droite — sans quoi trois « Mathématiques » identiques ne se
   distingueraient pas. */
/* Trois cartes par ligne, comme la grille des groupes de l'étape 2 : les
   résultats s'empilaient sur toute la largeur, une ligne par groupe, et
   « Arabe » seul y flottait dans un vide de mille pixels.

   `minmax(0, 1fr)` et non `minmax(280px, 1fr)` : à trois colonnes fixes,
   une carte au titre long — « Religion & Spiritualité » — débordait de sa
   colonne au lieu de la partager. */
.cl-results {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  /* Pas d'`align-items: start` : les cartes d'une même ligne se calent sur
     la plus haute, et leurs bords bas s'alignent. Sinon la grille part en
     dents de scie dès qu'un groupe rapporte deux sujets et son voisin un. */
}

@media (max-width: 900px) { .cl-results { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .cl-results { grid-template-columns: 1fr; } }

.cl-rgroup {
  /* Chaque carte entre l'une après l'autre : la grille se compose sous les
     yeux au lieu de surgir d'un coup. */
  animation: cl-monte .32s cubic-bezier(.22, .9, .24, 1) both;
}

.cl-rgroup:nth-child(2) { animation-delay: .04s; }
.cl-rgroup:nth-child(3) { animation-delay: .08s; }
.cl-rgroup:nth-child(4) { animation-delay: .12s; }
.cl-rgroup:nth-child(n+5) { animation-delay: .16s; }

@keyframes cl-monte {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.cl-re { font-size: 17px; line-height: 1; }

/* Le domaine passe SOUS le titre, sur sa propre ligne : à droite du nom il
   poussait « Religion & Spiritualité » hors de sa carte. */
.cl-rdom {
  flex: 1 0 100%;
  order: 9;
  font-size: 12.5px;
  font-weight: 800;
  color: #C0392B;
}

.cl-rgroup .cl-ghead { flex-wrap: wrap; row-gap: 4px; }

/* ---------- l'appel aux experts ---------- */
.cl-expert {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  padding: 32px;
  border-radius: 26px;
  background: #FFF1F1;
}

.cl-expert-t { display: flex; flex-direction: column; gap: 6px; min-width: 240px; flex: 1; }
.cl-expert-t b { font-size: 19px; font-weight: 900; letter-spacing: -.025em; color: #1C1C1E; }
.cl-expert-t span { font-size: 15.5px; font-weight: 700; line-height: 1.55; color: #5F5E64; text-wrap: pretty; }

.cl-expert a {
  padding: 14px 26px;
  border-radius: 999px;
  background: #141414;
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  white-space: nowrap;
  text-decoration: none;
}

.cl-expert a:hover { background: #FF6363; color: #fff; }

/* ---------- étape 2 : les sujets ---------- */
.cl-back {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  border: none;
  border-radius: 999px;
  background: #F2EFEC;
  color: #1C1C1E;
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  transition: background .18s;
}

.cl-back:hover { background: #EBE6E1; }

.cl-dom-pan { display: flex; flex-direction: column; gap: 22px; }
.cl-domhead { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cl-domhead > span:last-child { display: flex; flex-direction: column; gap: 4px; }

.cl-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: #FFF1F1;
  font-size: 26px;
}

.cl-h3 {
  margin: 0;
  font-family: Capriola, Georgia, serif;
  font-size: clamp(25px, 3.6vw, 38px);
  font-weight: 400;
  letter-spacing: -.03em;
  line-height: 1.12;
}

.cl-hint { font-size: 15.5px; font-weight: 700; color: #5F5E64; text-wrap: pretty; }

.cl-groups {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 14px;
}

.cl-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  border: 1.5px solid #EDE7E3;
  border-radius: 22px;
  background: #fff;
}

.cl-ghead { display: flex; align-items: baseline; gap: 9px; }
.cl-h4 { margin: 0; font-size: 16.5px; font-weight: 900; letter-spacing: -.02em; }
.cl-gn { font-size: 13.5px; font-weight: 800; color: #5F5E64; font-variant-numeric: tabular-nums; }

.cl-chips { display: flex; flex-wrap: wrap; gap: 7px; }

.cl-chip {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 999px;
  background: #F5F2EF;
  color: #1C1C1E;
  font-size: 14.5px;
  font-weight: 700;
  text-decoration: none;
  transition: background .18s, color .18s;
}

.cl-chip:hover { background: linear-gradient(38deg, #FFBCBC 0%, #FF6363 54%); color: #fff; }

.cl-more {
  padding: 8px 14px;
  border: 1.5px dashed #DDD5CF;
  border-radius: 999px;
  background: transparent;
  color: #5F5E64;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
}

.cl-more:hover { border-color: #1C1C1E; color: #1C1C1E; }

.cl-all {
  align-self: center;
  padding: 15px 30px;
  border-radius: 999px;
  background: linear-gradient(38deg, #FFBCBC 0%, #FF6363 54%);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 14px 26px -16px rgba(250, 110, 89, .9);
  transition: transform .18s cubic-bezier(.22, .9, .24, 1);
}

.cl-all:hover { transform: translateY(-2px); color: #fff; }

@media (max-width: 480px) {
  .cl-groups { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .cl-dom, .cl-dom-e, .cl-go, .cl-all, .cl-chip, .cl-back { transition: none; }
  .cl-pan, .cl-rgroup { animation: none; }
}