@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;1,400&display=swap');

:root {
  --brand: #004494;
  --brand-2: #008bcf;
  --text: #111;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
}

body {
  margin: 0;
  font-family: "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  line-height: 1.55;
  background: #fff;
}

/* Liens */
a, a:hover { color: var(--brand); text-decoration-thickness: 2px; }

/* IMPORTANT: casse les URLs longues proprement */
.wrap-url {
  overflow-wrap: anywhere;   /* moderne, casse où nécessaire */
  word-break: break-word;    /* fallback */
  line-break: auto;
}

/* Mise en page fluide */
.page {
  max-width: 960px;
  margin: 0 auto;
  padding: 16px;
}

.page-header .title {
  display: block;
  font-weight: 700;
  color: var(--brand-2);
  font-size: clamp(1.125rem, 1rem + 1vw, 1.75rem);
  margin-bottom: 8px;
}

.intro {
  font-size: 0.9rem;
}

/* Infobulles/aide */
.helpinfo {
  display: inline-block;
  font-size: 0.8rem;
  opacity: 0.9;
}

/* Calendrier responsive
   - pas de position: fixed
   - ratio adaptable (mobile: plus haut)
*/
.calendar-embed {
  margin-top: 16px;
  border: 1px solid #777;
  border-radius: 8px;
  overflow: hidden;
  /* Ratio par défaut (desktop-ish) */
  aspect-ratio: 4 / 3;
}

/* Le <iframe> prend tout l’espace disponible du conteneur */
.calendar-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* Petits écrans: ratio plus vertical, marges respirantes, taille de police un peu plus grande */
@media (max-width: 640px) {
  .page { padding: 14px; }
  .intro { font-size: 1.05rem; }
  .calendar-embed { aspect-ratio: 3 / 4; }
}

/* Accessoires existants */
.underline { text-decoration: underline; }

/* ——— Mobile tuning (=640px) ——— */
@media (max-width: 640px) {
  /* Taille de base un poil plus petite */
  html { font-size: 15px; }          /* 1rem = 15px au lieu de 16px */
  body { line-height: 1.5; }

  /* Contenu : un peu moins grand que le desktop */
  .intro { font-size: 0.95rem; }     /* avant 1.05rem dans ton snippet */
  .helpinfo { font-size: 0.85rem; }

  /* Titre plus compact sur mobile */
  .page-header .title {
    font-size: clamp(1rem, 0.9rem + 1.2vw, 1.35rem);
    margin-bottom: 6px;
  }

  /* Marges/paddings plus serrés */
  .page { padding: 12px; }
  
  /* L’iframe garde un ratio plus vertical mais sans prendre toute la hauteur */
  .calendar-embed { 
    aspect-ratio: 3 / 4; 
    margin-top: 12px;
  }
}

/* —— Layout plein écran et iframe qui remplit le reste —— */
@media (max-width: 640px) {
  /* On fige la hauteur au viewport mobile (dvh) */
  html, body { height: 100dvh; }
  body { margin: 0; overflow: hidden; } /* évite tout scroll vertical */

  .page {
    height: 100%;                 /* = 100dvh via body */
    display: flex;
    flex-direction: column;
    gap: 10px;                    /* petite respiration */
    padding: 10px;                /* un peu plus serré */
  }

  .page-header { flex: 0 0 auto; }
  .intro {
    flex: 0 0 auto;
    max-height: 38dvh;            /* garde de la place pour le calendrier */
    overflow: auto;               /* si l’intro déborde, elle scrolle seule */
  }

  .calendar-embed {
    flex: 1 1 auto;               /* prend tout l’espace restant */
    aspect-ratio: auto;           /* on enlève le ratio fixe */
    min-height: 240px;            /* sécurité pour les très petits écrans */
    margin-top: 0;
  }

  .calendar-embed iframe {
    width: 100%;
    height: 100%;                 /* rempli exactement l’espace restant */
    border: 0;
  }

  /* Optionnel: compacter encore un peu la typo/marges */
  html { font-size: 14px; }       /* tu peux remettre 15px si tu préfères */
  .page-header .title { margin-bottom: 4px; }
  .helpinfo details > summary { cursor: pointer; }
}

/* Desktop et tablettes: garde ton comportement précédent */
@media (min-width: 641px) {
  .page {
    max-width: 960px;
    margin: 0 auto;
    padding: 16px;
    display: block;               /* redevient non-flex si tu veux */
    height: auto;
  }
  .calendar-embed { aspect-ratio: 4 / 3; }
}