/* ==========================================================================
   NORUBI - couche d'accessibilité (WCAG 2.2 AA / JIS X 8341-3 AA)
   Chargée EN DERNIER sur chaque page : ne contient que des correctifs.
   Aucune couleur de fond n'est changée, sauf l'extrémité basse des dégradés
   bleus (#2f72b7 -> #3b82c6) pour que le texte sombre garde 4,5:1 partout.
   ========================================================================== */

:root { --a11y-ink: #070707; --a11y-focus: #0b3d91; }

/* 1. Focus clavier : anneau net, visible sur tous les fonds ------------------ */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
input:focus,
select:focus,
textarea:focus {
  outline: 3px solid var(--a11y-focus) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 3px #fff !important;
}

/* 2. Lien d'évitement et texte réservé aux lecteurs d'écran ------------------ */
.skip-link {
  position: absolute; left: 12px; top: -120px; z-index: 100000;
  padding: 12px 18px; border-radius: 12px;
  background: #070707; color: #fff; font-size: 16px; font-weight: 800; line-height: 1.4;
  text-decoration: none;
}
.skip-link:focus, .skip-link:focus-visible { top: 12px; }
/* certaines pages appliquent « a { width:100% } » sur mobile : le lien d'évitement garde sa largeur propre */
.skip-link { width: auto !important; max-width: calc(100vw - 24px); box-sizing: border-box; display: inline-block !important; }
.sr-only {
  position: absolute !important; width: 1px !important; height: 1px !important;
  margin: -1px !important; padding: 0 !important; border: 0 !important;
  overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

/* 3. Mouvement réduit --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important;
  }
}

/* 4. Boutons : texte sombre sur le vert LINE et sur le bleu clair ------------- */
/* 4a. vert LINE (fond inchangé) */
a.line, a.btn.line, a.btn.green, .cta.line, .quick a.line, .quick .line,
.action-card.line, .mini-button.line-mini, .nav-pill.line, .pill.line, .nav .line, .nav a.line,
/* 4b. bleu clair (fond inchangé, sauf la fin du dégradé) */
a.contact, a.btn.blue, a.blue-btn, .cta.contact, .quick a.contact,
.action-card.contact, .mini-button.contact, .home-button.contact, .nav-pill.contact, .pill.contact,
.nav .contact, .nav a.contact, .contact-submit, main.shell button.submit,
/* 4c. autres pastilles colorées */
.podcast-pill.spotify, .badge-spotify, .latest-podcast-eyebrow {
  color: var(--a11y-ink) !important;
  text-shadow: none !important;
}
a.line *, a.btn.line *, a.btn.green *, .cta.line *, .quick a.line *,
.action-card.line *, .mini-button.line-mini *, .nav-pill.line *, .pill.line *, .nav .line *,
a.contact *, a.btn.blue *, a.blue-btn *, .cta.contact *, .quick a.contact *,
.action-card.contact *, .mini-button.contact *, .nav-pill.contact *, .pill.contact *, .nav .contact *,
.podcast-pill.spotify * {
  color: inherit !important;
  opacity: 1 !important;
}
/* les règles d'origine imposent le blanc avec !important : on les égale explicitement */
.action-card.contact .sub, .action-card.contact .main, .action-card.line .sub, .action-card.line .main,
.home-button.contact .jp, .home-button.contact .latin {
  color: var(--a11y-ink) !important;
  opacity: 1 !important;
}
/* pastille « LINE » : texte vert sur fond blanc, assombri pour atteindre 4,5:1 */
.action-card.line .line-badge, .line-badge { color: #05813a !important; }

/* fin de dégradé bleu un peu plus claire : le texte sombre reste >= 4,5:1 sur toute la hauteur */
a.contact, a.btn.blue, a.blue-btn, .cta.contact, .quick a.contact,
.action-card.contact, .mini-button.contact, .home-button.contact, .nav-pill.contact, .pill.contact,
.nav .contact, .nav a.contact, .contact-submit, main.shell button.submit {
  background-image: linear-gradient(180deg, #5aa0df, #3b82c6) !important;
}

/* 5. Textes clairs posés sur la photo ou sur du blanc : texte sombre + halo clair */
.bg-etretat h1, .bg-etretat .subtitle,
.review-section .review-title, .review-section .review-sub, .review-section .review-sub a,
.media-showcase .media-title, .media-showcase .media-sub {
  color: var(--a11y-ink) !important;
  text-shadow: 0 0 14px rgba(255, 255, 255, .85), 0 1px 3px rgba(255, 255, 255, .7) !important;
}

/* 6. Aplats bleus : texte sombre à la place du blanc -------------------------- */
.values .number, article.value .number, .feature-number, .step-number,
.price-section .section-inner .section-title, .price-section .section-inner .section-sub, .price-section .section-inner .section-sub a,
.teacher-head span:not(.teacher-dot) {
  color: var(--a11y-ink) !important;
}
.teacher-head .teacher-dot { color: #1d4f8f !important; }
/* pastille grise « autres enseignants » : fond uni plus foncé, texte blanc (6,3:1) */
.other-teacher .teacher-head span:not(.teacher-dot) {
  color: #fff !important; background-image: none !important; background-color: #4d6275 !important;
}
/* citation (À propos) : on garde le bandeau bleu foncé, on assombrit seulement l'extrémité claire du dégradé */
.quote { background-image: linear-gradient(135deg, rgba(37, 103, 166, .98), rgba(42, 108, 169, .98)) !important; }
.quote, .quote * { color: #fff !important; opacity: 1 !important; }
/* bloc « mode d'emploi » (téléchargements) : texte plein blanc */
.usage-aside, .usage-aside p, .usage-aside h3 { color: #fff !important; }
/* carte des pages d'erreur et de confirmation (404, contact.php) : texte sombre sur le bleu clair */
main.card .actions a { color: var(--a11y-ink) !important; background-image: linear-gradient(180deg, #5aa0df, #3b82c6) !important; }
main.card .actions a.line { background-image: none !important; background-color: #06C755 !important; }
/* 404 / confirmation : la carte ne doit jamais dépasser l'écran (320 px) */
main.card { box-sizing: border-box !important; min-width: 0 !important; max-width: calc(100vw - 28px) !important; }
main.card h1, main.card p { overflow-wrap: anywhere; }
/* en-tête de L'ÉCOLE TV (même habillage que les autres pages à photo) */
main.page section.hero h1, main.page section.hero .subtitle {
  color: var(--a11y-ink) !important;
  text-shadow: 0 0 14px rgba(255, 255, 255, .85), 0 1px 3px rgba(255, 255, 255, .7) !important;
}

/* 7. Kodomo : titre jaune sur bleu et titres jaunes sur blanc ----------------- */
.kid-copy h1, .kid-copy p { color: var(--a11y-ink) !important; text-shadow: none !important; }
.price-card .price-info h3 { color: #8a5a00 !important; }

/* 8. Étoiles de notation : doré foncé (>= 4,5:1 sur blanc) --------------------- */
.review-stars, .review-author .stars, span.stars { color: #946200 !important; }

/* 9. Textes secondaires trop pâles --------------------------------------------- */
.breadcrumbs a, .breadcrumbs span { color: #1f3b52 !important; }
.section-heading p, .section-kicker { color: #2a3f55 !important; }
.footer-inner, .footer-inner a, .footer-inner span { color: #3b4f60 !important; }
.small-links a { color: #2c4256 !important; }
.file-note { color: #52616d !important; }
.deck-hint { color: #565f69 !important; }

/* 9b. Cibles tactiles : au moins 24 px de haut (WCAG 2.2, critère 2.5.8) ---------- */
.legal-footer a, .legal a, .kodomo-nav a {
  min-height: 24px; padding-top: 3px; padding-bottom: 3px; box-sizing: border-box;
}
.teacher-tags span, .deck-mini-links span { font-size: 12px !important; }

/* 10. Calendrier : étiquettes d'état -------------------------------------------- */
td.closed .day-number { color: #9b2c25 !important; }
td.closed .status-badge { color: var(--a11y-ink) !important; }
td.possible .mini-label { color: #234f78 !important; }
td.prep .mini-label { color: #47378a !important; }
td.makeup .mini-label { color: #2f5a46 !important; }
.mini-label { font-size: 12px !important; }

/* 11. Pastilles de plateforme ---------------------------------------------------- */
.badge-youtube { background: #d4002b !important; color: #fff !important; }

/* 12. Formulaires : erreurs affichées en ligne (script norubi-form) ---------------- */
.nrb-error {
  margin: 6px 0 0; font-size: 14px; font-weight: 800; line-height: 1.5; color: #9b1c1c;
}
.nrb-error::before { content: "！"; margin-right: .2em; }
[aria-invalid="true"] {
  border-color: #9b1c1c !important; background-color: #fff6f6 !important;
}
.nrb-form-status {
  margin: 0 0 16px; padding: 12px 16px; border-radius: 14px;
  font-size: 15px; font-weight: 800; line-height: 1.6;
}
.nrb-form-status[hidden] { display: none; }
.nrb-form-status.is-error { background: #fdecec; color: #7a1414; border: 2px solid #9b1c1c; }
.nrb-form-status.is-busy { background: #eef4fa; color: #14324f; border: 2px solid #5aa0df; }

/* 13. Page de remerciement et plan du site ------------------------------------------ */
.nrb-links { display: grid; gap: 4px; margin: 10px 0 0; padding: 0; list-style: none; }
.nrb-links a {
  display: flex; align-items: center; min-height: 44px; padding: 8px 12px; border-radius: 12px;
  font-weight: 800; color: #14324f; text-decoration: none; background: rgba(255, 255, 255, .7);
}
.nrb-links a:hover { background: #fff; text-decoration: underline; text-underline-offset: 4px; }
