/* Espace Apprenti — styles partagés pour
   espace-apprenti.html (dashboard) + bibliotheque-apprenti.html + contacts-apprenti.html
   Cf. BRIEF.md §8, §10, §11. */

/* ===== Hero commun aux 3 pages ===== */
.ea-hero {
  background: var(--beige);
  padding-block: clamp(var(--space-10), 5vw, var(--space-16));
}
.ea-hero__breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  font-family: var(--font-notes);
  font-size: var(--fs-notes);
  color: var(--brun);
}
.ea-hero__breadcrumb a { color: var(--vert-deau); font-weight: var(--fw-medium); }
.ea-hero__breadcrumb a:hover { text-decoration: underline; }
.ea-hero__breadcrumb-sep { opacity: 0.5; }
.ea-hero__title {
  font-size: clamp(2.25rem, 5.5vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--vert-deau);
  margin-bottom: var(--space-5);
}
.ea-hero__subtitle {
  font-size: var(--fs-corps-lg);
  color: var(--brun);
  max-width: 640px;
  line-height: 1.55;
}

/* ════════════════════════════════════════════════════════════════
   DASHBOARD (espace-apprenti.html)
   ════════════════════════════════════════════════════════════════ */

/* === Section "Mon planning CIE" (raccourci principal) === */
.planning-banner {
  background: var(--lime);
  padding-block: clamp(var(--space-10), 5vw, var(--space-12));
}
.planning-banner__inner {
  background: linear-gradient(135deg, var(--vert-deau), #064030);
  color: var(--beige);
  border-radius: var(--radius-xl);
  padding: clamp(var(--space-6), 4vw, var(--space-10));
  display: grid;
  gap: var(--space-6);
  align-items: center;
}
@media (min-width: 768px) {
  .planning-banner__inner {
    grid-template-columns: 1.4fr auto;
    gap: var(--space-8);
  }
}
.planning-banner__eyebrow {
  font-family: var(--font-notes);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--vert-neon);
  font-size: var(--fs-notes);
  margin-bottom: var(--space-3);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.planning-banner__title {
  font-family: var(--font-titre);
  font-weight: var(--fw-medium);
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  color: var(--beige);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-3);
  line-height: 1.15;
}
.planning-banner__desc {
  color: var(--beige);
  opacity: 0.85;
  font-size: var(--fs-corps-lg);
  line-height: 1.55;
  max-width: 50ch;
}
.planning-banner__cta {
  background: var(--vert-neon);
  color: var(--foret);
  padding: 16px 28px;
  border-radius: var(--radius-pill);
  font-family: var(--font-titre);
  font-weight: var(--fw-medium);
  font-size: 1.0625rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  white-space: nowrap;
  transition: transform .2s, background-color .2s;
}
.planning-banner__cta:hover {
  transform: translateY(-2px);
  background: color-mix(in srgb, var(--vert-neon) 80%, var(--beige));
}

/* Saved planning card (affichée si localStorage)
   Fond beige + texte foncé pour respecter WCAG AA sur le contexte lime. */
.saved-planning-card {
  background: var(--beige);
  border: 2px solid var(--vert-neon);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  margin-top: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
@media (min-width: 640px) {
  .saved-planning-card {
    flex-direction: row;
    align-items: center;
    gap: var(--space-5);
  }
}
.saved-planning-card__star {
  font-size: 1.75rem;
  flex-shrink: 0;
  line-height: 1;
}
.saved-planning-card__body {
  flex-grow: 1;
}
.saved-planning-card__title {
  font-family: var(--font-titre);
  font-weight: var(--fw-medium);
  color: var(--foret);          /* near-black : 16:1 sur beige (AAA) */
  font-size: var(--fs-corps);
  margin: 0 0 4px;
}
.saved-planning-card__choices {
  font-family: var(--font-notes);
  color: var(--vert-deau);      /* 8:1 sur beige (AA) */
  font-size: var(--fs-notes);
  margin: 0;
}
.saved-planning-card__cta {
  background: var(--vert-neon);
  color: var(--foret);
  font-family: var(--font-titre);
  font-weight: var(--fw-medium);
  font-size: var(--fs-notes);
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  white-space: nowrap;
  flex-shrink: 0;
  transition: transform .2s;
}
.saved-planning-card__cta:hover { transform: translateY(-2px); }

/* === Section "Raccourcis docs" === */
.quick-docs { background: var(--beige); }
.quick-docs__grid {
  display: grid;
  gap: var(--space-4);
}
@media (min-width: 640px)  { .quick-docs__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .quick-docs__grid { grid-template-columns: repeat(4, 1fr); } }

.doc-shortcut-card {
  background: var(--lime);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  text-decoration: none;
  transition: transform .2s, box-shadow .2s, background .2s;
  min-height: 180px;
}
.doc-shortcut-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px -16px rgba(15, 33, 9, 0.2);
}
.doc-shortcut-card__icon {
  font-size: 2rem;
  line-height: 1;
}
.doc-shortcut-card__title {
  font-family: var(--font-titre);
  font-weight: var(--fw-medium);
  font-size: 1.0625rem;
  color: var(--vert-deau);
  letter-spacing: -0.005em;
}
.doc-shortcut-card__desc {
  font-family: var(--font-notes);
  color: var(--brun);
  font-size: var(--fs-notes);
  flex-grow: 1;
  line-height: 1.5;
}
.doc-shortcut-card__cta {
  font-family: var(--font-titre);
  font-weight: var(--fw-medium);
  color: var(--vert-deau);
  font-size: var(--fs-notes);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.doc-shortcut-card__cta .arrow { transition: transform .2s ease; }
.doc-shortcut-card:hover .doc-shortcut-card__cta .arrow { transform: translate(3px, -3px); }

/* === Section "Bibliothèque complète" (banner) === */
.library-link { background: var(--lime); }
.library-link-banner {
  background: var(--beige);
  border-radius: var(--radius-xl);
  padding: clamp(var(--space-6), 4vw, var(--space-8));
  display: grid;
  gap: var(--space-6);
  align-items: center;
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease;
}
@media (min-width: 768px) {
  .library-link-banner { grid-template-columns: 1.5fr auto; gap: var(--space-8); }
}
.library-link-banner:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -20px rgba(15, 33, 9, 0.18);
}
.library-link-banner__title {
  font-family: var(--font-titre);
  font-weight: var(--fw-medium);
  font-size: 1.75rem;
  color: var(--vert-deau);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-3);
}
.library-link-banner__desc {
  color: var(--brun);
  font-size: var(--fs-corps-lg);
  margin-bottom: var(--space-4);
  line-height: 1.55;
}
.library-link-banner__cats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.library-link-banner__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--vert-deau);
  color: var(--vert-neon);
  font-size: 1.5rem;
  flex-shrink: 0;
  transition: transform .25s ease, background-color .25s ease;
}
/* Pas de rotation (ça donnerait un "×" trompeur). On utilise une flèche ↗
   qui se déplace en haut-à-droite au hover, cohérent avec les autres CTAs. */
.library-link-banner:hover .library-link-banner__cta {
  transform: translate(4px, -4px) scale(1.05);
  background: var(--vert-deau-dark);
}

/* === Section "Aperçu contacts" === */
.contacts-preview { background: var(--beige); }
.contacts-preview__grid {
  display: grid;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
}
@media (min-width: 768px) {
  .contacts-preview__grid { grid-template-columns: 1fr 1fr; }
}

.conseillere-mini {
  background: var(--lime);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-5);
}
.conseillere-mini__avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--vert-deau);
  color: var(--vert-neon);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-titre);
  font-weight: var(--fw-medium);
  font-size: 1.375rem;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}
.conseillere-mini__body { flex-grow: 1; }
.conseillere-mini__name {
  font-family: var(--font-titre);
  font-weight: var(--fw-medium);
  color: var(--vert-deau);
  font-size: 1.0625rem;
  letter-spacing: -0.005em;
  margin: 0 0 4px;
}
.conseillere-mini__role {
  font-family: var(--font-notes);
  color: var(--brun);
  font-size: var(--fs-notes);
  margin: 0 0 var(--space-2);
}
.conseillere-mini__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}
.contacts-preview__cta { display: inline-flex; align-self: flex-start; }

/* === Section "SharePoint" (discrète) === */
.sharepoint-banner-section { background: var(--beige); padding-block: var(--space-8); }
.sharepoint-banner {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-6);
  background: var(--beige);
  border: 1.5px dashed var(--foret-15);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: border-color .2s ease, background .2s ease;
}
.sharepoint-banner:hover {
  border-color: var(--vert-deau);
  border-style: solid;
  background: var(--lime);
}
.sharepoint-banner__icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}
.sharepoint-banner__text { flex-grow: 1; }
.sharepoint-banner__title {
  font-family: var(--font-titre);
  font-weight: var(--fw-medium);
  color: var(--vert-deau);
  font-size: var(--fs-corps);
  margin: 0 0 2px;
}
.sharepoint-banner__desc {
  font-family: var(--font-notes);
  color: var(--brun);
  font-size: var(--fs-notes);
  margin: 0;
}
.sharepoint-banner .arrow {
  font-size: 1.25rem;
  color: var(--vert-deau);
  flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════════
   BIBLIOTHÈQUE (bibliotheque-apprenti.html)
   ════════════════════════════════════════════════════════════════ */

.library-filters {
  background: var(--lime);
  padding-block: clamp(var(--space-8), 4vw, var(--space-10));
}
.library-filters__search {
  position: relative;
  margin-bottom: var(--space-5);
}
.library-filters__search input {
  width: 100%;
  padding: 14px 14px 14px 48px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--foret-15);
  background: var(--beige);
  font-family: var(--font-corps);
  font-size: var(--fs-corps);
  color: var(--foret);
  transition: border-color .2s;
}
.library-filters__search input:focus {
  outline: none;
  border-color: var(--vert-deau);
}
.library-filters__search-icon {
  position: absolute;
  left: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--brun);
  pointer-events: none;
}

.filter-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.filter-group__label {
  font-family: var(--font-notes);
  font-size: var(--fs-notes);
  color: var(--brun);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-right: var(--space-2);
}
.filter-chip {
  background: var(--beige);
  border: 1.5px solid var(--foret-15);
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  font-family: var(--font-titre);
  font-weight: var(--fw-medium);
  font-size: 0.8125rem;
  color: var(--vert-deau);
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
}
.filter-chip:hover {
  background: var(--vert-neon);
  border-color: var(--vert-deau);
}
.filter-chip.is-active {
  background: var(--vert-deau);
  border-color: var(--vert-deau);
  color: var(--beige);
}

.results-count {
  margin-top: var(--space-5);
  font-family: var(--font-notes);
  font-size: var(--fs-notes);
  color: var(--brun);
}
.results-count strong { color: var(--vert-deau); font-family: var(--font-titre); }

/* Listing */
.library-list { background: var(--beige); }

.category-block { margin-bottom: var(--space-10); }
.category-block:last-child { margin-bottom: 0; }
.category-block__title {
  font-family: var(--font-titre);
  font-weight: var(--fw-medium);
  font-size: 1.5rem;
  color: var(--vert-deau);
  margin-bottom: var(--space-5);
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.category-block__count {
  font-family: var(--font-notes);
  font-size: var(--fs-notes);
  color: var(--brun);
  font-weight: var(--fw-regular);
  letter-spacing: 0.04em;
}

.doc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.doc-item {
  background: var(--beige);
  border: 1px solid var(--foret-08);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-4);
  transition: border-color .2s ease, background .2s ease;
}
.doc-item:hover {
  border-color: var(--vert-deau);
  background: var(--lime);
}
.doc-item__icon {
  font-size: 1.5rem;
  line-height: 1;
}
.doc-item__main { min-width: 0; }
.doc-item__title {
  font-family: var(--font-titre);
  font-weight: var(--fw-medium);
  color: var(--vert-deau);
  font-size: 1rem;
  margin: 0 0 2px;
  letter-spacing: -0.005em;
}
.doc-item__desc {
  font-family: var(--font-notes);
  color: var(--brun);
  font-size: var(--fs-notes);
  margin: 0;
  line-height: 1.4;
}
.doc-item__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-1);
  font-family: var(--font-notes);
  font-size: var(--fs-notes);
  color: var(--brun);
}
.doc-item__meta-row {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.doc-item__size { white-space: nowrap; }
.doc-item__action {
  grid-column: 1 / -1;
  margin-top: var(--space-2);
  font-family: var(--font-titre);
  font-weight: var(--fw-medium);
  color: var(--vert-deau);
  font-size: var(--fs-notes);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  align-self: flex-start;
  justify-self: flex-start;
}
@media (min-width: 768px) {
  .doc-item {
    grid-template-columns: auto 1fr auto auto;
  }
  .doc-item__action {
    grid-column: auto;
    margin-top: 0;
  }
}

.missing-doc-banner-section { background: var(--lime); padding-block: var(--space-10); }
.missing-doc-banner {
  background: var(--beige);
  border-radius: var(--radius-xl);
  padding: clamp(var(--space-6), 4vw, var(--space-8));
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}
.missing-doc-banner h2 {
  font-family: var(--font-titre);
  font-weight: var(--fw-medium);
  font-size: 1.375rem;
  color: var(--vert-deau);
  margin-bottom: var(--space-3);
}
.missing-doc-banner p {
  color: var(--brun);
  margin-bottom: var(--space-5);
  line-height: 1.55;
  max-width: 50ch;
  margin-inline: auto;
}

/* ════════════════════════════════════════════════════════════════
   CONTACTS (contacts-apprenti.html)
   ════════════════════════════════════════════════════════════════ */

/* Conseillère card — version complète (utilisée sur contacts-apprenti) */

/* Padding généreux sur toutes les sections de contacts-apprenti (respiration verticale) */
.conseilleres-section,
.who-contact,
.experts,
.general-contact-section {
  padding-block: clamp(var(--space-12), 7vw, 7rem); /* 48-112px : conforme demande 80-120px desktop */
}

.conseilleres-section { background: var(--lime); }
.conseilleres__grid {
  display: grid;
  gap: var(--space-5);
}
@media (min-width: 768px) {
  .conseilleres__grid { grid-template-columns: 1fr 1fr; }
}

.conseillere-card {
  background: var(--beige);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.conseillere-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--vert-deau);
  color: var(--vert-neon);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-titre);
  font-weight: var(--fw-medium);
  font-size: 1.625rem;
  letter-spacing: -0.02em;
}
.conseillere-card__name {
  font-family: var(--font-titre);
  font-weight: var(--fw-medium);
  color: var(--vert-deau);
  font-size: 1.375rem;
  letter-spacing: -0.01em;
  margin: 0;
}
.conseillere-card__role {
  font-family: var(--font-notes);
  color: var(--brun);
  font-size: var(--fs-corps);
  margin: 0;
}
.conseillere-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.conseillere-card__contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px dashed var(--foret-15);
}
.conseillere-card__contact p {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-notes);
  color: var(--foret);
  margin: 0;
  font-size: var(--fs-corps);
}

/* Section "Qui contacter pour quoi" */
.who-contact { background: var(--beige); }
.who-contact__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.who-contact__item {
  background: var(--lime);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-4);
  transition: background .2s ease;
}
.who-contact__item:has(a):hover { background: color-mix(in srgb, var(--lime) 70%, var(--vert-neon)); }
.who-contact__question {
  font-family: var(--font-corps);
  color: var(--foret);
  font-size: var(--fs-corps);
}
.who-contact__answer {
  font-family: var(--font-titre);
  font-weight: var(--fw-medium);
  color: var(--vert-deau);
  font-size: var(--fs-corps);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  white-space: nowrap;
}
a.who-contact__answer:hover { text-decoration: underline; }
.who-contact__answer .arrow { transition: transform .2s ease; }
.who-contact__answer:hover .arrow { transform: translate(2px, -2px); }

/* Section "Cheffes expertes" */
.experts { background: var(--lime); /* padding-block défini en haut */ }
.experts__intro {
  background: var(--beige);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-6);
  font-family: var(--font-notes);
  font-size: var(--fs-notes);
  color: var(--brun);
  border-left: 3px solid var(--vert-neon);
}
.experts__grid {
  display: grid;
  gap: var(--space-4);
}
@media (min-width: 768px) {
  .experts__grid { grid-template-columns: repeat(3, 1fr); }
}
.expert-card {
  background: var(--beige);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  border: 1px solid var(--foret-08);
}
.expert-card__metier {
  align-self: flex-start;
  font-family: var(--font-titre);
  font-weight: var(--fw-medium);
  background: var(--vert-neon);
  color: var(--foret);
  padding: 4px 14px;
  border-radius: var(--radius-pill);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  margin: 0;
}
.expert-card__name {
  font-family: var(--font-titre);
  font-weight: var(--fw-medium);
  color: var(--vert-deau);
  font-size: 1.125rem;
  letter-spacing: -0.005em;
  margin: 0;
  line-height: 1.3;
}

/* Section "Contact général OrTra" */
.general-contact-section { background: var(--beige); /* padding-block défini en haut */ }
.general-contact {
  background: var(--vert-deau);
  color: var(--beige);
  border-radius: var(--radius-xl);
  padding: clamp(var(--space-8), 5vw, var(--space-12));
  display: grid;
  gap: var(--space-8);
  align-items: stretch;
}
@media (min-width: 768px) {
  .general-contact { grid-template-columns: 1.3fr 1fr; gap: var(--space-10); align-items: center; }
}
.general-contact__title {
  font-family: var(--font-titre);
  font-weight: var(--fw-medium);
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  color: var(--beige);
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-4);
  line-height: 1.15;
}
.general-contact__desc {
  color: var(--beige);
  opacity: 0.85;
  margin: 0;
  line-height: 1.55;
  max-width: 50ch;
}

/* Colonne droite : label + détails, séparée subtilement de la gauche */
.general-contact__details {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
@media (min-width: 768px) {
  .general-contact__details {
    padding-left: var(--space-8);
    border-left: 1px solid rgba(250, 246, 238, 0.15);
  }
}
@media (max-width: 767px) {
  .general-contact__details {
    padding-top: var(--space-6);
    border-top: 1px solid rgba(250, 246, 238, 0.15);
  }
}
.general-contact__details-label {
  font-family: var(--font-notes);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(250, 246, 238, 0.6);
  margin: 0 0 var(--space-2);
}
.general-contact__detail-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin: 0;
  font-family: var(--font-notes);
  font-size: var(--fs-corps);
  color: var(--beige);
  line-height: 1.55;
}
.general-contact__detail-icon {
  flex-shrink: 0;
  font-size: 1.125rem;
  line-height: 1.4;
}
/* Lien email : soulignement subtil cohérent avec les patterns du footer */
.general-contact__details a {
  color: var(--beige);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(250, 246, 238, 0.4);
  text-underline-offset: 4px;
  transition: color .2s ease, text-decoration-color .2s ease;
}
.general-contact__details a:hover {
  color: var(--vert-neon);
  text-decoration-color: var(--vert-neon);
}