/* =========================================================================
   Page « S'auto-évaluer ». Chargée EN PLUS de comprendre.css, dont elle
   réutilise le hero (.cp-hero), la grille sommaire/contenu (.cp-body,
   .cp-toc, .cp-main), le cadre (.cp-content / .cd-frame) et la carte
   (.cd-card). Ce fichier ne contient que ce qui lui est propre.
   ========================================================================= */

/* Chapô saisi en 3 lignes distinctes : on préserve les retours à la ligne du
   champ, tout en laissant le texte se replier en petite largeur. */
.auto-evaluer .cp-hero__chapo {
  white-space: pre-line;
}

/* base.css remet les <ul>/<ol> à list-style: none : on rétablit les numéros
   (le score de Higham liste ses 3 résultats en <ol>). */
.ae-outil .cd-section__text ol {
  margin: 0 0 0.75rem;
  padding-left: 1.5rem;
  list-style: decimal;
}
.ae-outil .cd-section__text ol li {
  margin: 0 0 0.25rem;
}

/* --- Lien optionnel en bas du texte d'un outil -------------------------- */
.ae-outil__link-wrap {
  margin: 1.1rem 0 0;
}

.ae-outil__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--c-coral);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.15s ease;
}

.ae-outil__link:hover,
.ae-outil__link:focus-visible {
  color: var(--c-purple-dark);
  text-decoration: underline;
}

.ae-outil__link-arrow {
  font-size: 1.15em;
  line-height: 1;
}

/* --- Score de Higham (titre + grande image) ----------------------------- */
.ae-score {
  padding: clamp(1.5rem, 3vw, 3rem) var(--gutter) clamp(2rem, 4vw, 3.5rem);
}

.ae-score__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  text-align: center;
}

.ae-score__title {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--c-purple-dark);
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  line-height: 1.1;
  margin: 0 0 clamp(1.5rem, 3vw, 2.75rem);
}

/* Document dense : pleine largeur du conteneur, sans cadre ni ombre. */
.ae-score__img {
  display: block;
  width: 100%;
  height: auto;
  margin-inline: auto;
}

/* --- Ressource à télécharger -------------------------------------------- */
.ae-resource {
  padding: clamp(1rem, 2vw, 2rem) var(--gutter) clamp(3rem, 5vw, 4.5rem);
}

.ae-resource__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  text-align: center;
}

.ae-resource__title {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--c-purple-dark);
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  line-height: 1.1;
  margin: 0 0 clamp(1.25rem, 2.5vw, 2rem);
}

/* Le bouton reprend .cp-cta__btn ; on ne règle ici que l'icône. */
.ae-resource__btn-icon {
  flex: 0 0 auto;
  display: inline-flex;
  width: 1.5rem;
  height: 1.5rem;
}

/* --- CTA « Faire le test » sous le premier outil ------------------------ */
/* Réutilise le composant .cp-cta, mais posé à pleine largeur DANS le cadre du
   premier outil, sous la grille carte/texte. */
.ae-outil__sep {
  border: 0;
  border-top: 1px solid var(--c-purple-light);
  margin: clamp(1.75rem, 3.5vw, 3rem) 0 clamp(1.5rem, 3vw, 2.5rem);
}

/* Le composant apporte sa disposition et son fond ; on neutralise le padding
   de bandeau pleine largeur, inutile à l'intérieur du panneau. */
.ae-outil__cta {
  padding: 0;
}