:root {
  --modal-bg: rgba(0,0,0,.6);
  --modal-radius: 20px;
  --modal-color: #fff;
  --brand-primary: #ff5f5f;
  --overlay-bg: rgba(0,0,0,.6);
}

[data-theme="dark"] {
  --modal-bg: rgba(0,0,0,.9);
  --modal-color: #eee;
}

.modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--modal-bg);
  z-index: 11000;
}

.modal.show {
  display: flex;
  animation: modal-in 0.25s ease-out forwards;
}

.modal[style*="display: block"] {
  display: flex !important;
}

/* Force centering for the correction modal even if other CSS sets block */
#correction-modal.show { display: flex !important; }

.modal.hide {
  animation: modal-out 0.2s ease-in forwards;
}

.modal__content,
.modal-content {
  position: relative;
  background: var(--modal-color);
  border-radius: var(--modal-radius);
  padding: 1.5rem;
  box-shadow: 0 16px 40px rgba(0,0,0,.25);
}

.modal__close,
.close-button {
  position: absolute;
  top: .5rem;
  right: .5rem;
  width: 2rem; height: 2rem;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg,#ffffff,#f5f7fb);
  color: #334155;
  border: 1px solid rgb(0 0 0 / 12%);
  border-radius: 999px;
  box-shadow: 0 2px 8px rgb(0 0 0 / 12%);
  cursor: pointer;
  font-size: 1.1rem; line-height: 1; padding: 0; font-weight: 700;
  transition: filter .2s ease, transform .15s ease;
}
.modal__close:hover,
.close-button:hover { filter: brightness(.98); }
.modal__close:active,
.close-button:active { transform: scale(.98); }
.modal__close:focus-visible,
.close-button:focus-visible {
  outline: 2px solid rgb(124 58 237 / 55%);
  outline-offset: 2px;
}
[data-theme="dark"] .modal__close,
[data-theme="dark"] .close-button{
  background: linear-gradient(180deg,#20273a,#171c2b);
  color: #e5e7eb;
  border-color: rgb(255 255 255 / 14%);
  box-shadow: 0 2px 8px rgb(0 0 0 / 25%);
}

.modal-buttons {
  margin-top: 1rem;
  display: flex;
  justify-content: center;
  gap: 10px;
}

/* MathJax: centrer les blocs d'équations dans les contenus de modales */
.modal .modal-body mjx-container[display="true"] {
  display: block;
  margin-inline: auto;
  text-align: center;
  max-width: 100%;
}
.modal .modal-body mjx-container[display="true"] + mjx-container[display="true"] {
  margin-block-start: .25rem;
}

.modal-buttons button:focus {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

.btn-modal-ok {
  background: var(--brand-primary);
  color: var(--modal-color);
  border: none;
  border-radius: var(--modal-radius);
  padding: 10px 18px;
  font-weight: 700;
  cursor: pointer;
}

.btn-modal-ok:hover,
.btn-modal-ok:focus {
  opacity: 0.9;
}

@media (max-width: 600px) {
  .modal__content { width: 90%; margin: 20% auto; }
}
@media (min-width: 601px) {
  .modal__content { width: 420px; margin: 0 auto; }
}

/* Correction modal: taille contenue + scroll interne si nécessaire */
#correction-modal .modal__content{
  /* Largeur contenue sur desktop, confortable sur mobile */
  width: min(92vw, 860px);
  /* Hauteur max: éviter tout débordement vertical */
  max-height: 86vh;
  /* Structure en colonnes: titre (auto) + contenu (1fr) scrollable */
  display: flex;
  flex-direction: column;
  /* marge intérieure basse compatible zones sûres iOS */
  padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
}
@media (min-width: 1100px){
  /* Un peu plus étroit sur très grands écrans pour le confort de lecture */
  #correction-modal .modal__content{ width: min(80vw, 860px); }
}
@media (max-width: 600px){
  #correction-modal .modal__content{ width: 94vw; max-height: 90vh; }
}

/* Le corps défile à l'intérieur de la modale quand le contenu est long */
#correction-modal .modal-body{
  overflow: auto;
  /* Laisser de la place pour le titre et le bouton fermer */
  max-height: calc(86vh - 3rem);
}
/* Préserver la bonne visibilité des blocs MathJax même avec overflow auto */
#correction-modal mjx-container[display="true"]{ overflow: visible !important; }
#correction-modal .math-block{ overflow: visible; }

/* ===================== Modal vidéo (responsif) ===================== */
#video-modal .modal__content {
  width: min(90vw, 960px);
  padding: 0; /* la vidéo occupe tout l'espace */
}
#video-modal-content-element {
  width: 100%;
  max-height: 80vh;
}
#video-modal-content-element iframe,
#video-modal-content-element video {
  display: block;
  width: 100%;
  height: auto;           /* pas de 100% qui force une hauteur nulle */
  aspect-ratio: 16 / 9;   /* ratio moderne */
}
#video-modal .modal__close {
  top: .5rem;
  right: .5rem;
}

@keyframes modal-in {
  from { opacity: 0; transform: scale(.95); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes modal-out {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(.95); }
}

/* ===================== Fiche Videos Modal (fv-*) ===================== */
#fiche-videos-modal .modal__content{
  /* Reduce desktop width to avoid overly wide modal */
  width: min(92vw, 640px);
  padding: 1rem;
  border-radius: var(--radius-xl, 1.1rem);
  background: var(--galet-bg, #fff);
  color: var(--on-surface, #1c2452);
  border: var(--galet-border, 1px solid rgba(0,0,0,.06));
  box-shadow: var(--shadow-violet-m, 0 10px 30px rgba(0,0,0,.18));
  margin: 0 auto;
}

/* Force perfect centering for the Fiche Videos modal on desktop */
#fiche-videos-modal.show{
  display: grid !important;
  place-items: center;
}

.fv-stage{ display: grid; gap: 1rem; }

/* Loading */
.fv-loading{ display:grid; place-items:center; gap:.75rem; padding: 2rem 0; color: color-mix(in oklab, canvastext 70%, transparent); }
.fv-loading .spinner{ display:none; }

/* AI loader: neural core + orbiting dots */
.fv-ai-loader{ position: relative; inline-size: 84px; block-size: 84px; }
.fv-ai-core{
  position:absolute; inset: 22px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #7c3aed 10%, #22d3ee 40%, transparent 60%);
  filter: blur(1px) saturate(120%);
  animation: fv-core-pulse 1.8s ease-in-out infinite;
}
@keyframes fv-core-pulse{ 0%,100%{ transform: scale(.92); opacity:.85 } 50%{ transform: scale(1); opacity:1 } }

.fv-ai-orbit{ position:absolute; inset:0; display:block; }
.fv-ai-orbit .dot{
  position:absolute; inset:0; margin:auto; inline-size: 10px; block-size: 10px; border-radius: 50%;
  background: linear-gradient(180deg,#a78bfa,#22d3ee);
  box-shadow: 0 0 12px rgba(124,58,237,.45);
  transform-origin: 42px 42px;
  animation: fv-orbit 1.6s linear infinite;
}
.fv-ai-orbit .dot:nth-child(2){ transform-origin: 42px 42px; animation-duration: 1.9s; opacity:.9 }
.fv-ai-orbit .dot:nth-child(3){ animation-duration: 2.2s; opacity:.8 }
.fv-ai-orbit .dot:nth-child(4){ animation-duration: 1.7s; opacity:.7 }
.fv-ai-orbit .dot:nth-child(5){ animation-duration: 2.0s; opacity:.6 }
.fv-ai-orbit .dot:nth-child(6){ animation-duration: 2.4s; opacity:.55 }
@keyframes fv-orbit{ from{ transform: rotate(0deg) translateX(32px) rotate(0deg) } to{ transform: rotate(360deg) translateX(32px) rotate(-360deg) } }

.fv-ai-text{ font: 700 .98rem/1.2 Inter, system-ui; letter-spacing:.01em; }
.fv-ai-text .txt{ background: linear-gradient(90deg,#7c3aed,#22d3ee); -webkit-background-clip:text; background-clip:text; color: transparent; }
.fv-ai-text .dots::after{ content: '…'; animation: fv-dots 1.4s steps(3, end) infinite; display:inline-block; width: 1.2em; text-align:left; color: currentColor; }
@keyframes fv-dots{ 0%{ content:'' } 33%{ content:'.' } 66%{ content:'..' } 100%{ content:'...' } }

.fv-ai-bar{ position: relative; inline-size: min(320px, 70vw); block-size: 6px; border-radius: 999px; background: color-mix(in oklab, canvastext 12%, transparent); overflow:hidden; }
.fv-ai-bar::before{
  content:''; position:absolute; inset:0; inline-size: 40%; border-radius: inherit;
  background: linear-gradient(90deg, rgba(124,58,237,.8), rgba(34,211,238,.8));
  animation: fv-bar 1.6s ease-in-out infinite;
}
@keyframes fv-bar{ 0%{ transform: translateX(-60%) } 50%{ transform: translateX(40%) } 100%{ transform: translateX(160%) } }

@media (prefers-reduced-motion: reduce){
  .fv-ai-core, .fv-ai-orbit .dot, .fv-ai-text .dots::after, .fv-ai-bar::before{ animation: none; }
}

/* Choice */
.fv-choice{ text-align: center; }
.fv-choice h3{
  margin: 0 0 .6rem;
  font: 800 clamp(1rem, .9rem + 1.2vw, 1.35rem)/1.2 Inter, system-ui;
  background: linear-gradient(90deg,#7c3aed,#22d3ee);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.fv-buttons{
  display: grid;
  grid-template-columns: 1fr;
  gap: .5rem;
  background: color-mix(in oklab, canvas 85%, transparent);
  border:1px solid color-mix(in oklab, canvastext 12%, canvas);
  border-radius: 12px;
  padding: .4rem;
  }
.fv-btn{
  appearance:none; border:0; background: transparent; color: color-mix(in oklab, canvastext 88%, transparent);
  padding: .55rem .8rem; border-radius: 10px; font: 700 .9rem/1 Inter, system-ui; cursor: pointer;
  transition: background-color .2s ease, color .2s ease, transform .06s ease;
  display: block; inline-size: 100%; text-align: left;
}
.fv-btn:hover{ background: color-mix(in oklab, canvastext 10%, transparent); }
.fv-btn:active{ transform: translateY(1px); }
.fv-btn:focus-visible{ outline: 2px solid rgb(124 58 237 / 55%); outline-offset: 2px; }
.fv-btn.is-active{ background: linear-gradient(90deg,#7c3aed,#22d3ee); color: #fff; }

/* Grid */
.fv-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .9rem; }
.fv-card{
  appearance:none; border: 1px solid color-mix(in oklab, canvastext 12%, canvas);
  background: linear-gradient(180deg, color-mix(in oklab, canvas 92%, transparent), color-mix(in oklab, canvas 86%, transparent));
  color: inherit; text-align:left; border-radius: 14px; padding: 0; overflow: hidden; cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,.06);
  transition: transform .08s ease, box-shadow .2s ease, border-color .2s ease;
}
.fv-card:hover{ transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0,0,0,.12); }
.fv-card:focus-visible{ outline: 2px solid rgb(124 58 237 / 55%); outline-offset: 3px; }

.fv-thumb{ inline-size: 100%; aspect-ratio: 16 / 9; display:block; background-color: #0b1220; background-position:center; background-size: cover; position: relative; }
.fv-thumb::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.28)); }
.fv-card:hover .fv-thumb::before{ content:"▶"; position:absolute; inset:0; display:grid; place-items:center; color: #fff; font-size: 2rem; text-shadow: 0 2px 12px rgba(0,0,0,.45); }

.fv-meta{ display:grid; gap:.35rem; padding: .6rem .75rem .75rem; }
.fv-platform{ justify-self:start; font: 700 .7rem/1 Inter, system-ui; padding: .25rem .45rem; border-radius: .6rem; text-transform: uppercase; letter-spacing: .04em; }
.fv-platform.youtube{ background:#ff0033; color:#fff; }
.fv-platform.vimeo{ background:#1ab7ea; color:#052532; }
.fv-platform.tiktok{ background:#111; color:#fff; border:1px solid rgba(255,255,255,.1); }
.fv-title{ font: 700 .95rem/1.2 Inter, system-ui; color: color-mix(in oklab, canvastext 94%, transparent); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient: vertical; overflow: hidden; }
.fv-duration{ font: 600 .8rem/1 Inter, system-ui; color: color-mix(in oklab, canvastext 62%, transparent); }

@media (max-width: 480px){
  #fiche-videos-modal .modal__content{ width: min(96vw, 560px); padding: .75rem; }
  .fv-grid{ grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .75rem; }
}

/* TikTok vertical video layout in the video modal */
#video-modal.is-tiktok .modal__content{
  width: min(92vw, 520px);
}
#video-modal.is-tiktok #modal-iframe{
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
}

/* === Choose IA Modal (Aurora / jeune) ============================= */
#choose-ia-modal .modal__content{
  width: min(92vw, 560px);
  padding: 1.2rem 1rem 1rem;
  border-radius: var(--radius-xl, 1.25rem);
  background: var(--galet-bg, #fff);
  color: var(--on-surface, #1c2452);
  border: var(--galet-border, 1px solid rgba(0,0,0,.06));
  box-shadow: var(--shadow-violet-m, 0 8px 22px rgba(0,0,0,.18));
  backdrop-filter: var(--backdrop, blur(12px) saturate(120%));
}

#choose-ia-modal h3{
  margin: 0 0 .4rem;
  font-family: var(--font-title, inherit);
  font-size: clamp(1.15rem, 1rem + 1vw, 1.6rem);
  line-height: 1.2;
  background: var(--brand-grad, linear-gradient(90deg,#7c3aed,#22d3ee));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
#choose-ia-modal #choose-ia-desc{
  margin: 0 0 .9rem;
  color: var(--clr-on-surface-soft, #64748b);
}

/* Liste de choix (cartes radio) */
#choose-ia-modal .ia-choices{
  display: grid;
  gap: .75rem;
}
#choose-ia-modal .ia-choice{
  display: flex; align-items: center; gap: .7rem;
  padding: .75rem .9rem;
  border-radius: var(--radius-lg, 1rem);
  border: 1px solid rgb(var(--brand-600-rgb, 124 58 237) / .18);
  background: linear-gradient(180deg, rgb(255 255 255 / .92), rgb(255 255 255 / .78));
  box-shadow: var(--shadow-s, 0 2px 4px rgb(0 0 0 / 6%));
  cursor: pointer;
  transition: transform .08s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
[data-theme="dark"] #choose-ia-modal .ia-choice{
  background: linear-gradient(180deg, rgb(20 24 40 / .65), rgb(20 24 40 / .5));
  border-color: rgb(255 255 255 / .12);
}
#choose-ia-modal .ia-choice:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow-l, 0 8px 24px rgb(0 0 0 / 12%));
}
#choose-ia-modal .ia-choice:has(input:checked){
  background: var(--galet-bg-bright, #fff);
  border-color: rgb(var(--brand-600-rgb,124 58 237) / .5);
  box-shadow: 0 8px 22px rgb(0 0 0 / .18);
}

/* Radio natif (accents) */
#choose-ia-modal .ia-choice input[type="radio"]{
  width: 1.1rem; height: 1.1rem; flex: 0 0 auto;
  accent-color: rgb(var(--brand-600-rgb,124 58 237));
  margin: 0;
}
#choose-ia-modal .ia-choice .title{ font-weight: 700; }

/* Boutons */
#choose-ia-modal .modal-buttons{
  margin-top: 1rem;
  display: grid; gap: .75rem;
  grid-template-columns: 1fr 1fr;
}
#choose-ia-modal #choose-ia-modal-ok{
  background: var(--accent-grad, linear-gradient(90deg,#7c3aed,#22d3ee));
  color: var(--color-white, #fff);
  border: 0;
  border-radius: var(--radius-lg, 1rem);
  padding: .8rem 1rem;
  font-weight: 800;
  box-shadow: var(--shadow-violet-s, 0 4px 14px rgb(0 0 0 / .18));
}
#choose-ia-modal #choose-ia-modal-ok:focus-visible,
#choose-ia-modal #choose-ia-modal-cancel:focus-visible,
#choose-ia-modal .modal__close:focus-visible{
  outline: var(--focus-ring, 0 0 0 .2rem rgb(0 0 0 / 35%));
}
#choose-ia-modal #choose-ia-modal-cancel{
  background: transparent;
  border: 1px solid var(--clr-neutral-300, #d1d5db);
  border-radius: var(--radius-lg, 1rem);
  padding: .8rem 1rem;
}

/* Close en pastille */
#choose-ia-modal .modal__close{
  top: .5rem; right: .5rem;
  width: 2rem; height: 2rem; line-height: 2rem;
  border-radius: 999px;
  border: 1px solid rgb(0 0 0 / 8%);
  background: rgb(255 255 255 / 60%);
  backdrop-filter: blur(8px);
  font-size: 1.1rem; color: #222;
}

/* Scroll seulement si l'écran est "plat" (paysage < 600px de haut) */
@media (max-height: 600px) {
  #video-modal {
    overflow: auto;                 /* permet de faire défiler la modale */
    -webkit-overflow-scrolling: touch;
    padding: 8px;                   /* petite marge pour éviter le collage */
  }
}

/* Two-line layout for format buttons */
.fv-btn{ display:grid; grid-template-rows: auto auto; align-items:start; gap:.15rem; }
.fv-btn-title{ font: 800 1rem/1.15 Inter, system-ui; }
.fv-btn-sub{ font: 700 .8rem/1.1 Inter, system-ui; color: color-mix(in oklab, canvastext 55%, transparent); }
.fv-buttons{ gap: .9rem; }
.fv-btn.is-busy{ animation: fv-btn-pulse 1.2s ease-in-out infinite; }
@keyframes fv-btn-pulse{ 0%,100%{ transform: translateY(0); box-shadow: 0 0 0 rgba(124,58,237,0); } 50%{ transform: translateY(-1px); box-shadow: 0 6px 14px rgba(124,58,237,.18); } }

/* Determinate progress bar for AI reflection */
.fv-ai-progress{ inline-size: min(360px, 72vw); block-size: 6px; border-radius: 999px; background: color-mix(in oklab, canvastext 14%, transparent); overflow: hidden; margin-top: .5rem; }
.fv-ai-progress .fill{ inline-size: 0%; block-size: 100%; background: linear-gradient(90deg,#7c3aed,#22d3ee); border-radius: inherit; animation: fv-progress 4s ease-out forwards; box-shadow: 0 2px 8px rgba(124,58,237,.25); }
@keyframes fv-progress{ from{ width:0% } to{ width:100% } }
@media (prefers-reduced-motion: reduce){ .fv-ai-progress .fill{ animation: none; width: 60%; } }