/* ==========================================================================
   Institution Sainte Thérèse — Design System
   Direction : éditorial-institutionnel chaleureux. Serif de caractère pour
   les titres (gravitas académique), sans-serif neutre pour le texte courant.
   Un seul accent (bleu du logo), utilisé avec intention, pas en fond.
   ========================================================================== */

:root {
  /* Couleurs — neutres à teinte froide légère (pas de crème/beige par défaut) */
  --color-bg: #F6F8FA;
  --color-surface: #FFFFFF;
  --color-surface-alt: #EBF2F8;
  --color-ink: #161B20;
  --color-ink-muted: #47535D;
  --color-border: #DDE4EA;

  --color-accent: #0072BC;
  --color-accent-deep: #00568E;
  --color-accent-tint: #0072BC14;

  /* Typographie */
  --font-display: 'Newsreader', 'Iowan Old Style', 'Georgia', serif;
  --font-body: 'Inter', -apple-system, 'Segoe UI', sans-serif;

  /* Rythme */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 96px; --space-10: 128px;

  --radius-sm: 6px;
  --radius-md: 12px;

  --sidebar-width: 280px;
  --header-height: 84px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--color-accent); text-decoration: none; }
a:hover, a:focus-visible { color: var(--color-accent-deep); text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 3px;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-4);
  color: var(--color-ink);
  text-wrap: balance;
}

h1 { font-size: clamp(2.25rem, 4vw, 3.25rem); font-weight: 500; }
h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 500; }
h3 { font-size: 1.375rem; font-weight: 600; }
h4 { font-size: 1.1rem; font-weight: 600; }

p { margin: 0 0 var(--space-4); max-width: 68ch; }
p:last-child { margin-bottom: 0; }

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-accent);
  margin: 0 0 var(--space-2);
  display: block;
}

.lede {
  font-size: 1.15rem;
  color: var(--color-ink-muted);
  max-width: 62ch;
}

blockquote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.4rem;
  line-height: 1.4;
  color: var(--color-ink);
  margin: var(--space-6) 0;
  padding-left: var(--space-5);
  border-left: 3px solid var(--color-accent);
  max-width: 58ch;
}

/* ── Layout shell ─────────────────────────────────────────────────────── */

.page-shell {
  display: flex;
  min-height: 100vh;
}

.container {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.main-content {
  flex: 1;
  min-width: 0;
  margin-left: var(--sidebar-width);
}

/* ── Sidebar navigation (permanente, gauche) ─────────────────────────── */

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--sidebar-width);
  height: 100vh;
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  z-index: 100;
  overflow-y: auto;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5);
  border-bottom: 1px solid var(--color-border);
  text-decoration: none;
}
.sidebar-brand:hover { text-decoration: none; }

.sidebar-brand img { width: 44px; height: 44px; flex-shrink: 0; }

.sidebar-brand-text {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-ink);
  line-height: 1.25;
}
.sidebar-brand-text small {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.68rem;
  color: var(--color-ink-muted);
  margin-top: 2px;
}

.sidebar-nav {
  flex: 1;
  padding: var(--space-4) 0;
}

.sidebar-nav ul { list-style: none; margin: 0; padding: 0; }

.sidebar-nav > ul > li { margin: 0; }

.sidebar-nav a {
  display: block;
  padding: var(--space-3) var(--space-5);
  color: var(--color-ink);
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: background var(--ease-out) 150ms, color var(--ease-out) 150ms;
}

.sidebar-nav a:hover {
  background: var(--color-accent-tint);
  color: var(--color-accent-deep);
  text-decoration: none;
}

.sidebar-nav li.active > a,
.sidebar-nav a[aria-current="page"] {
  color: var(--color-accent-deep);
  border-left-color: var(--color-accent);
  background: var(--color-accent-tint);
  font-weight: 600;
}

.sidebar-nav .has-children > a::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  margin-left: var(--space-2);
  transition: transform 150ms var(--ease-out);
  opacity: 0.6;
}

.sidebar-nav .has-children.open > a::after { transform: rotate(-135deg); }

.sidebar-nav .submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 250ms var(--ease-out);
}
.sidebar-nav .has-children.open .submenu { max-height: 600px; }

.sidebar-nav .submenu a {
  padding-left: var(--space-6);
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--color-ink-muted);
}
.sidebar-nav .submenu a:hover,
.sidebar-nav .submenu li.active > a { color: var(--color-accent-deep); }

.sidebar-footer {
  padding: var(--space-5);
  border-top: 1px solid var(--color-border);
  font-size: 0.8rem;
  color: var(--color-ink-muted);
}
.sidebar-footer a { color: var(--color-ink-muted); }

.sidebar-toggle {
  display: none;
}

/* ── Mobile nav ───────────────────────────────────────────────────────── */

.mobile-topbar {
  display: none;
}

@media (max-width: 900px) {
  .sidebar {
    transform: translateX(-100%);
    transition: transform 280ms var(--ease-out);
    box-shadow: 0 0 40px rgba(0,0,0,0.15);
  }
  .sidebar.open { transform: translateX(0); }

  .main-content { margin-left: 0; }

  .mobile-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 90;
  }
  .mobile-topbar img { width: 36px; height: 36px; }
  .mobile-topbar .brand-name {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.95rem;
  }
  .sidebar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: none;
    cursor: pointer;
    flex-shrink: 0;
  }
  .sidebar-toggle svg { width: 20px; height: 20px; }

  .sidebar-scrim {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(10,15,20,0.4);
    z-index: 95;
  }
  .sidebar-scrim.open { display: block; }
}

/* ── Hero (Accueil) ───────────────────────────────────────────────────── */

/* Hero plein ecran : la video (prise de vue drone) est la vedette, le texte reste minimal et
concentre en bas de cadre pour ne pas la recouvrir. */
.hero {
  position: relative;
  height: 100vh;
  min-height: 560px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: #0E1418;
}

.hero-video-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* Cache l'icone pause/lecture que YouTube affiche automatiquement au centre au demarrage de la
lecture (comportement du player, non desactivable via les parametres d'URL). Reste opaque le temps
que la video demarre reellement, puis se dissipe en fondu une fois ce flash passe. */
.hero-video-cover {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-size: cover;
  background-position: center;
  pointer-events: none;
  animation: hero-cover-fade 800ms ease-out 2400ms forwards;
}
@keyframes hero-cover-fade {
  from { opacity: 1; }
  to { opacity: 0; visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-video-cover { animation-duration: 1ms; animation-delay: 2400ms; }
}

.hero-video-wrap iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  /* Legerement surdimensionne puis recadre par le overflow:hidden du parent : pousse hors champ
  tout residu d'interface YouTube (titre, logo, bouton pause) qui s'affiche parfois en bordure
  malgre les parametres controls=0 / modestbranding. */
  width: 116%;
  height: 116%;
  min-width: calc(177.77vh * 1.16);
  min-height: 116%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* Voile tres court, concentre sur le dernier quart de l'image : le reste de la video (le plan
drone) reste net et sans filtre. */
.hero-video-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(6,10,14,0.75) 0%, rgba(6,10,14,0.32) 22%, transparent 46%);
}

.hero-content {
  position: relative;
  z-index: 2;
  padding: var(--space-6) var(--space-6) var(--space-7);
  max-width: 680px;
}

.hero .eyebrow { color: #9FD3F5; text-shadow: 0 1px 12px rgba(0,0,0,0.6); }

.hero h1 {
  color: #FFFFFF;
  font-size: clamp(2rem, 4vw, 3.1rem);
  margin-bottom: var(--space-3);
  text-shadow: 0 2px 20px rgba(0,0,0,0.55);
}

.hero .lede {
  color: rgba(255,255,255,0.88);
  font-size: 1.05rem;
  text-shadow: 0 1px 14px rgba(0,0,0,0.5);
}

.hero-actions {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-5);
  flex-wrap: wrap;
}

.hero-scroll-cue {
  position: absolute;
  bottom: var(--space-5);
  right: var(--space-6);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: rgba(255,255,255,0.7);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 8px rgba(0,0,0,0.5);
}
.hero-scroll-cue svg { width: 14px; height: 14px; animation: hero-bounce 1.8s ease-in-out infinite; }
@keyframes hero-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scroll-cue svg { animation: none; }
}
@media (max-width: 640px) {
  .hero-scroll-cue { display: none; }
}

/* ── Buttons ──────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 13px 26px;
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--ease-out) 150ms, border-color var(--ease-out) 150ms, transform var(--ease-out) 150ms;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary { background: var(--color-accent); color: #fff; }
.btn-primary:hover { background: var(--color-accent-deep); color: #fff; }

.btn-ghost { background: rgba(255,255,255,0.08); color: #fff; border-color: rgba(255,255,255,0.35); backdrop-filter: blur(6px); }
.btn-ghost:hover { background: rgba(255,255,255,0.16); color: #fff; }

.btn-outline { background: transparent; color: var(--color-accent); border-color: var(--color-accent); }
.btn-outline:hover { background: var(--color-accent-tint); color: var(--color-accent-deep); }

.btn-sm { padding: 9px 16px; font-size: 0.85rem; }

/* ── Sections ─────────────────────────────────────────────────────────── */

section.block { padding: var(--space-8) 0; }
section.block.alt { background: var(--color-surface-alt); }
section.block.tight { padding: var(--space-6) 0; }

.breadcrumb {
  font-size: 0.82rem;
  color: var(--color-ink-muted);
  padding: var(--space-4) 0 0;
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.breadcrumb a { color: var(--color-ink-muted); }
.breadcrumb a:hover { color: var(--color-accent); }
.breadcrumb .sep { opacity: 0.5; }
.breadcrumb .current { color: var(--color-ink); }

.page-header { padding: var(--space-6) 0 var(--space-5); border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-7); }

/* ── Cards ────────────────────────────────────────────────────────────── */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-6);
}

.card {
  background: var(--color-accent-tint);
  border: 1px solid #0072BC22;
  border-radius: var(--radius-md);
  padding: var(--space-6) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.card h3 { font-size: 1.05rem; margin: 0; }

.card .btn { margin-top: auto; align-self: flex-start; }

.card-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* ── Feature / cycle cards (Organisation des classes) ────────────────── */

.cycle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-6);
}

.cycle-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6) var(--space-5);
  text-align: center;
}

.cycle-card h3 { color: var(--color-accent); margin-bottom: var(--space-3); }
.cycle-card p { margin: 0 auto; }

/* ── Timeline (Historique) ───────────────────────────────────────────── */

.timeline-entry {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--space-6);
  padding: var(--space-7) 0;
  border-top: 1px solid var(--color-border);
}
.timeline-entry:first-child { border-top: none; padding-top: 0; }

.timeline-entry .period {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--color-accent);
  position: sticky;
  top: var(--space-6);
  align-self: start;
}

.timeline-entry figure { margin: var(--space-5) 0 0; }
.timeline-entry figcaption {
  font-size: 0.8rem;
  color: var(--color-ink-muted);
  margin-top: var(--space-2);
}
.timeline-entry img { border-radius: var(--radius-md); width: 100%; height: auto; }

@media (max-width: 720px) {
  .timeline-entry { grid-template-columns: 1fr; gap: var(--space-3); }
  .timeline-entry .period { position: static; }
}

/* ── Contact form ─────────────────────────────────────────────────────── */

.contact-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-8);
  align-items: start;
}
@media (max-width: 800px) { .contact-grid { grid-template-columns: 1fr; } }

.field { margin-bottom: var(--space-5); }
.field label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: var(--space-2);
  color: var(--color-ink);
}
.field .required { color: var(--color-accent); }

.field input, .field textarea {
  width: 100%;
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-ink);
  transition: border-color 150ms var(--ease-out), box-shadow 150ms var(--ease-out);
}
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-tint);
}
.field textarea { min-height: 140px; resize: vertical; }

.field-hint { font-size: 0.78rem; color: var(--color-ink-muted); margin-top: var(--space-2); }
.field-error { font-size: 0.78rem; color: #B3261E; margin-top: var(--space-2); }

.info-card {
  background: var(--color-surface-alt);
  border-radius: var(--radius-md);
  padding: var(--space-6);
}
.info-card h3 { font-size: 1.1rem; margin-bottom: var(--space-4); }
.info-row { display: flex; gap: var(--space-3); margin-bottom: var(--space-4); align-items: flex-start; }
.info-row:last-child { margin-bottom: 0; }
.info-row svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--color-accent); margin-top: 2px; }

.alert {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-5);
  font-size: 0.92rem;
}
.alert-success { background: #E6F4EA; color: #1E4620; border: 1px solid #A9D7B4; }
.alert-error { background: #FBEAEA; color: #7A1F1F; border: 1px solid #E5B4B4; }

/* ── Table (ateliers) ─────────────────────────────────────────────────── */

.table-wrap { overflow-x: auto; margin-top: var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
table.data-table { width: 100%; border-collapse: collapse; min-width: 760px; }
table.data-table th {
  background: var(--color-accent-tint);
  color: var(--color-accent-deep);
  text-align: left;
  font-size: 0.82rem;
  font-weight: 600;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
table.data-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  font-size: 0.9rem;
  vertical-align: top;
}
table.data-table tr:last-child td { border-bottom: none; }
table.data-table tr:nth-child(even) { background: rgba(0,0,0,0.015); }

/* ── Footer ───────────────────────────────────────────────────────────── */

.site-footer {
  border-top: 1px solid var(--color-border);
  padding: var(--space-7) 0;
  background: var(--color-surface);
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-6);
}
.footer-grid h4 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-ink-muted); margin-bottom: var(--space-3); font-family: var(--font-body); font-weight: 600; }
.footer-grid p, .footer-grid a { font-size: 0.88rem; color: var(--color-ink-muted); }
.footer-bottom {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
  font-size: 0.8rem;
  color: var(--color-ink-muted);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* ── Utility ──────────────────────────────────────────────────────────── */

.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--color-accent); color: #fff; padding: 12px 20px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }