/* =============================================================================
   madrassadesk.com — direction artistique
   Famille « Swiss Timetable » · archétype « La Semaine » (OUTILS-DESIGN.md § 2)
   -----------------------------------------------------------------------------
   L'IDÉE : la page EST un emploi du temps. Un rail d'heures tient lieu de
   sommaire, chaque section est posée dans la grille comme un cours (avec sa
   couleur de matière), et un filet rouge suit la lecture comme la ligne de
   l'heure courante sur une grille murale. Le produit se montre par sa forme.

   CE QUI EST INTERDIT ICI (registre du parc, refus déjà actés par Rémi) :
   aucun fond sombre, aucune nav en pilule, aucun cadratin dans le texte visible,
   aucune carte orpheline, aucun marquee, aucun pin au scroll, aucune ombre
   violette générique, pas de trois cartes égales alignées.

   LES COULEURS SONT FONCTIONNELLES : une couleur = une matière (un module), pas
   une décoration. Même logique que les domaines du FLE.
   ========================================================================== */

@font-face {
  font-family: 'Chivo';
  src: url('fonts/chivo-latin.woff2') format('woff2');
  font-weight: 400 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Chivo';
  src: url('fonts/chivo-latin-ext.woff2') format('woff2');
  font-weight: 400 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plex';
  src: url('fonts/ibm-plex-sans-latin.woff2') format('woff2');
  font-weight: 100 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plex';
  src: url('fonts/ibm-plex-sans-latin-ext.woff2') format('woff2');
  font-weight: 100 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Papier, encre, filets */
  --papier: #f2f4f3;
  --surface: #ffffff;
  --encre: #131a17;
  --encre-douce: #4b5854;
  --filet: #d8dedb;
  --filet-fort: #b9c3bf;

  /* Marque et matières */
  --petrole: #0e6b6b;
  --petrole-fonce: #0a5252;
  --safran: #d9931f;
  --brique: #b4462f;
  --indigo: #33488f;
  --olive: #5c7a34;
  --prune: #7a3e63;

  --rail: 108px;          /* largeur du rail d'heures */
  --creneau: 2.75rem;     /* hauteur d'une case d'heure dans la grille du héros */
  --max: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 96px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: 'Plex', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .chiffre, .cartouche, .marque {
  font-family: 'Chivo', 'Plex', system-ui, sans-serif;
  letter-spacing: -0.018em;
}
h1 { font-weight: 900; font-size: clamp(2.3rem, 5.2vw, 4.1rem); line-height: 1.02; margin: 0 0 1rem; }
h2 { font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.35rem); line-height: 1.1; margin: 0 0 .8rem; }
h3 { font-weight: 700; font-size: 1.12rem; line-height: 1.25; margin: 0 0 .35rem; }
p { margin: 0 0 1rem; max-width: 66ch; }
a { color: var(--petrole-fonce); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--brique); }
img { max-width: 100%; height: auto; display: block; }
ul { margin: 0 0 1rem; padding-left: 1.15rem; }
li { margin-bottom: .35rem; }
li::marker { color: var(--filet-fort); }

.lecture { max-width: 68ch; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --------------------------------------------------------------------------
   En-tête : pas de pilule, pas d'ombre flottante. Un bandeau réglé, un filet.
   -------------------------------------------------------------------------- */
.bandeau {
  position: sticky; top: 0; z-index: 40;
  background: var(--papier);
  border-bottom: 1px solid var(--filet);
}
.bandeau-in {
  max-width: var(--max); margin: 0 auto; padding: .7rem 1.25rem;
  display: flex; align-items: center; gap: 1.5rem;
}
.marque { display: flex; align-items: center; gap: .55rem; font-weight: 900; font-size: 1.12rem; text-decoration: none; color: var(--encre); }
.marque:hover { color: var(--encre); }
.marque-signe { width: 26px; height: 26px; flex: none; }
.nav { margin-left: auto; display: flex; align-items: center; gap: 1.35rem; }
.nav a {
  font-size: .95rem; font-weight: 500; color: var(--encre-douce); text-decoration: none;
  padding-bottom: 3px; border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--encre); border-bottom-color: var(--filet-fort); }
.nav a[aria-current] { color: var(--encre); border-bottom-color: var(--petrole); }
/* Le bouton de la barre est un bouton, pas un lien de navigation : il reprend ses couleurs.
   Sans cette règle, `.nav a` (plus spécifique que `.bouton`) lui vole son texte blanc. */
.nav a.bouton { color: #fff; border-bottom: 1px solid var(--petrole-fonce); }
.nav a.bouton:hover { color: #fff; border-bottom-color: var(--petrole-fonce); }
@media (max-width: 980px) {
  .nav { gap: .95rem; }
  .nav .nav-long { display: none; }
}
@media (max-width: 720px) {
  .bandeau-in { flex-wrap: wrap; gap: .6rem 1rem; padding-bottom: .5rem; }
  .nav {
    margin-left: 0; width: 100%; gap: 1.1rem;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-bottom: 2px;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { white-space: nowrap; font-size: .9rem; }
  .nav a.bouton { padding: .42rem .75rem; font-size: .88rem; }
}

.bouton {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--petrole); color: #fff; text-decoration: none;
  font-family: 'Chivo', sans-serif; font-weight: 700; font-size: .95rem;
  padding: .62rem 1.15rem; border: 1px solid var(--petrole-fonce); border-radius: 3px;
  transition: background .16s ease, transform .16s ease;
}
.bouton:hover { background: var(--petrole-fonce); color: #fff; transform: translateY(-1px); }
.bouton-clair {
  background: var(--surface); color: var(--encre); border-color: var(--filet-fort);
}
.bouton-clair:hover { background: #fff; color: var(--encre); border-color: var(--encre-douce); }

/* --------------------------------------------------------------------------
   LA GRILLE : rail d'heures collant + colonne de lecture.
   Le rail est le sommaire ; sur petit écran il disparaît et chaque section garde
   son cartouche d'heure (l'information ne dépend jamais du rail seul).
   -------------------------------------------------------------------------- */
.page { max-width: var(--max); margin: 0 auto; padding: 0 1.25rem 4rem; }
.avec-rail { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); gap: 0; }
@media (max-width: 900px) { .avec-rail { grid-template-columns: 1fr; } }

.rail { position: relative; border-right: 1px solid var(--filet); padding-top: 2.5rem; }
@media (max-width: 900px) { .rail { display: none; } }
.rail-collant { position: sticky; top: 104px; padding-right: 1rem; }
.rail-h {
  display: block; text-align: right; font-family: 'Chivo', sans-serif; font-weight: 700;
  font-size: .8rem; letter-spacing: .02em; color: var(--filet-fort);
  text-decoration: none; padding: .42rem 0; border-right: 3px solid transparent; margin-right: -1rem; padding-right: 1rem;
  transition: color .18s ease, border-color .18s ease;
}
.rail-h:hover { color: var(--encre-douce); }
.rail-h.actif { color: var(--encre); border-right-color: var(--brique); }
.rail-note { margin-top: 1.1rem; text-align: right; font-size: .68rem; line-height: 1.35; color: var(--filet-fort); }

.colonne { padding-left: 2rem; min-width: 0; }
@media (max-width: 900px) { .colonne { padding-left: 0; } }

/* --------------------------------------------------------------------------
   Une SECTION est une case de l'emploi du temps : cartouche d'heure, liseré de
   matière à gauche, hauteur libre. Jamais trois cartes égales côte à côte.
   -------------------------------------------------------------------------- */
.case {
  position: relative; background: var(--surface);
  border: 1px solid var(--filet);
  padding: 1.6rem 1.75rem; margin: 0 0 1.1rem;
}
/* La couleur de matière est le CONTOUR de la case, pas un ruban collé à gauche :
   dans une grille horaire, un cours est une case bordée, il n'a pas de liseré. */
.case.safran { border-color: #ead4ab; }
.case.brique { border-color: #e8c4bb; }
.case.indigo { border-color: #c2c9e3; }
.case.olive  { border-color: #cbd8b8; }
.case.prune  { border-color: #ddc4d3; }
.case.petrole { border-color: #bcd8d8; }
.case-large { padding: 2.2rem 2rem; }
@media (max-width: 620px) { .case { padding: 1.25rem 1.15rem; } }

.cartouche {
  display: inline-block; font-size: .76rem; font-weight: 700; letter-spacing: .01em;
  font-variant-numeric: tabular-nums; color: var(--encre-douce);
  border: 1px solid var(--filet); background: var(--papier);
  padding: .16rem .5rem; border-radius: 2px; margin-bottom: .75rem;
}
.cartouche.petrole { color: var(--petrole-fonce); border-color: #bcd8d8; background: #eef6f6; }
.cartouche.safran  { color: #8a5c0c; border-color: #ead4ab; background: #fbf4e6; }
.cartouche.brique  { color: #8d3423; border-color: #e8c4bb; background: #fbefec; }
.cartouche.indigo  { color: #27376e; border-color: #c2c9e3; background: #eef0f8; }
.cartouche.olive   { color: #44591f; border-color: #cbd8b8; background: #f2f6ec; }
.cartouche.prune   { color: #5f2f4c; border-color: #ddc4d3; background: #f8eff4; }

/* --------------------------------------------------------------------------
   LES MODULES EN MOSAÏQUE. Huit blocs empilés à l'identique, c'est une liste de
   cartes : le défaut que cette direction doit éviter. Ils sont donc posés comme
   des créneaux de DURÉES DIFFÉRENTES sur douze colonnes, et n'ont plus de boîte
   autour d'eux (pas de cadre dans un cadre).
   -------------------------------------------------------------------------- */
.modules {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: .9rem; margin-top: 1.4rem;
  /* Des créneaux ont des durées différentes : on ne tire pas les blocs à la même hauteur. */
  align-items: start;
}
.bloc {
  background: var(--surface); border: 1px solid var(--filet);
  padding: 1.15rem 1.25rem; min-width: 0;
}
/* La couleur de matière borde la case, elle ne se colle pas en ruban sur un bord. */
.bloc.safran { border-color: #ead4ab; }
.bloc.brique { border-color: #e8c4bb; }
.bloc.indigo { border-color: #c2c9e3; }
.bloc.olive  { border-color: #cbd8b8; }
.bloc.prune  { border-color: #ddc4d3; }
.bloc.petrole { border-color: #bcd8d8; }
.bloc ul { margin-bottom: 0; }
.bloc li { font-size: .93rem; }
.bloc h3 { margin-bottom: .5rem; }
/* Des durées, pas des cases identiques. */
.modules > .bloc:nth-child(1) { grid-column: span 7; }
.modules > .bloc:nth-child(2) { grid-column: span 5; }
.modules > .bloc:nth-child(3) { grid-column: span 4; }
.modules > .bloc:nth-child(4) { grid-column: span 8; }
.modules > .bloc:nth-child(5) { grid-column: span 6; }
.modules > .bloc:nth-child(6) { grid-column: span 6; }
.modules > .bloc:nth-child(7) { grid-column: span 5; }
.modules > .bloc:nth-child(8) { grid-column: span 7; }
@media (max-width: 900px) { .modules > .bloc { grid-column: span 12; } }

/* Deux colonnes inégales : la grille horaire n'aligne pas des blocs identiques. */
.diptyque { display: grid; grid-template-columns: 1.25fr .85fr; gap: 1.1rem; align-items: start; }
.diptyque.inverse { grid-template-columns: .85fr 1.25fr; }
@media (max-width: 860px) { .diptyque, .diptyque.inverse { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   HÉROS : une vraie grille jours × heures. Le titre occupe une plage de cases,
   les modules se posent autour comme des cours. La ligne rouge est l'heure.
   -------------------------------------------------------------------------- */
.heros { padding: 2.75rem 0 1.5rem; }
.heros-titre { max-width: 21ch; }
.heros p.chapo { font-size: 1.16rem; color: var(--encre-douce); max-width: 56ch; }
.heros-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1.5rem 0 0; }

.grille-demo {
  position: relative; background: var(--surface); border: 1px solid var(--filet);
  margin-top: 2.25rem; overflow: hidden;
}
.grille-jours {
  display: grid; grid-template-columns: 58px repeat(6, minmax(0, 1fr));
  border-bottom: 1px solid var(--filet); background: var(--papier);
}
.grille-jours span {
  font-family: 'Chivo', sans-serif; font-weight: 700; font-size: .7rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--encre-douce); padding: .5rem .4rem; text-align: center;
  border-left: 1px solid var(--filet);
}
.grille-jours span:first-child { border-left: 0; }
.grille-corps { position: relative; display: grid; grid-template-columns: 58px repeat(6, minmax(0, 1fr)); }
.grille-heures { border-right: 1px solid var(--filet); }
.grille-heures span {
  display: flex; align-items: flex-start; justify-content: flex-end;
  height: var(--creneau); padding: .15rem .45rem 0 0;
  font-family: 'Chivo', sans-serif; font-size: .68rem; font-weight: 700; color: var(--filet-fort);
  border-top: 1px solid var(--filet);
}
.grille-heures span:first-child { border-top: 0; }
.grille-col { border-left: 1px solid var(--filet); position: relative; }
.grille-col i {
  display: block; height: var(--creneau); border-top: 1px solid var(--filet);
}
.grille-col i:first-child { border-top: 0; }

.cours {
  position: absolute; left: 3px; right: 3px; border-radius: 2px;
  padding: .3rem .45rem; overflow: hidden;
  font-size: .7rem; line-height: 1.2; font-weight: 500;
  border: 1px solid; background: var(--surface);
  opacity: 1; transform: none;
  text-decoration: none;
}
.cours:hover { filter: brightness(.97); }
.cours b { display: block; font-family: 'Chivo', sans-serif; font-weight: 700; font-size: .72rem; }
.cours.petrole { border-color: #bcd8d8; background: #eef6f6; color: #0a4747; }
.cours.safran  { border-color: #ead4ab; background: #fbf4e6; color: #7d520a; }
.cours.brique  { border-color: #e8c4bb; background: #fbefec; color: #8d3423; }
.cours.indigo  { border-color: #c2c9e3; background: #eef0f8; color: #27376e; }
.cours.olive   { border-color: #cbd8b8; background: #f2f6ec; color: #3e5220; }
.cours.prune   { border-color: #ddc4d3; background: #f8eff4; color: #5f2f4c; }

/* La ligne « maintenant » : un filet rouge et sa pastille d'heure. */
.ligne-maintenant { position: absolute; left: 0; right: 0; height: 0; border-top: 2px solid var(--brique); z-index: 3; }
.ligne-maintenant::before {
  content: attr(data-heure); position: absolute; left: 0; top: -9px;
  background: var(--brique); color: #fff; font-family: 'Chivo', sans-serif; font-weight: 700;
  font-size: .62rem; padding: .08rem .3rem; border-radius: 2px;
}
.grille-note {
  border-top: 1px solid var(--filet); background: var(--papier);
  padding: .55rem .8rem; font-size: .76rem; color: var(--encre-douce);
}

@media (max-width: 760px) {
  .grille-jours, .grille-corps { grid-template-columns: 44px repeat(3, minmax(0, 1fr)); }
  .grille-jours span:nth-child(n+5), .grille-col:nth-child(n+5) { display: none; }
  .cours { font-size: .62rem; }
}

/* Cascade d'entrée : état de repos VISIBLE (rien ne dépend du script). */
@media (prefers-reduced-motion: no-preference) {
  .js .cours { opacity: 0; transform: translateY(6px); }
  .js .cours.pose { opacity: 1; transform: none; transition: opacity .42s ease, transform .42s ease; }
}

/* --------------------------------------------------------------------------
   Faits, planches de captures, listes de barème
   -------------------------------------------------------------------------- */
.faits { display: grid; grid-template-columns: 1.15fr .85fr 1.1fr; gap: 0; border: 1px solid var(--filet); background: var(--surface); }
.fait { padding: 1.1rem 1.2rem; border-left: 1px solid var(--filet); }
.fait:first-child { border-left: 0; }
.fait .chiffre { display: block; font-weight: 900; font-size: 1.5rem; line-height: 1.1; }
.fait p { font-size: .86rem; color: var(--encre-douce); margin: .2rem 0 0; }
@media (max-width: 760px) { .faits { grid-template-columns: 1fr; } .fait { border-left: 0; border-top: 1px solid var(--filet); } .fait:first-child { border-top: 0; } }

.planche { margin: 1.25rem 0 0; }
.planche img { border: 1px solid var(--filet-fort); background: var(--surface); }
.planche figcaption { font-size: .8rem; color: var(--encre-douce); padding: .5rem .1rem 0; }
.planche figcaption b { font-family: 'Chivo', sans-serif; font-weight: 700; color: var(--encre); }

.bareme { border-top: 1px solid var(--filet); margin-top: 1rem; }
.bareme > div { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 1.25rem; padding: .85rem 0; border-bottom: 1px solid var(--filet); }
.bareme dt, .bareme .terme { font-family: 'Chivo', sans-serif; font-weight: 700; font-size: .95rem; }
.bareme dd { margin: 0; color: var(--encre-douce); font-size: .95rem; }
@media (max-width: 680px) { .bareme > div { grid-template-columns: 1fr; gap: .2rem; } }

.encadre {
  border: 1px solid var(--filet-fort); background: var(--papier);
  padding: 1rem 1.2rem; font-size: .93rem;
}
.encadre p:last-child { margin-bottom: 0; }

details { border-top: 1px solid var(--filet); padding: .8rem 0; }
details summary { cursor: pointer; font-family: 'Chivo', sans-serif; font-weight: 700; font-size: 1rem; }
details p { margin: .6rem 0 0; color: var(--encre-douce); }

/* --------------------------------------------------------------------------
   Formulaire
   -------------------------------------------------------------------------- */
.form-grille { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1.1rem; }
@media (max-width: 680px) { .form-grille { grid-template-columns: 1fr; } }
.champ { display: flex; flex-direction: column; gap: .3rem; }
.champ.large { grid-column: 1 / -1; }
.champ label { font-size: .84rem; font-weight: 600; }
.champ .aide { font-size: .78rem; color: var(--encre-douce); }
input[type=text], input[type=email], input[type=tel], select, textarea {
  font: inherit; font-size: .95rem; color: var(--encre);
  background: var(--surface); border: 1px solid var(--filet-fort); border-radius: 2px;
  padding: .55rem .65rem;
}
input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--petrole); outline-offset: 2px;
}
textarea { min-height: 110px; resize: vertical; }
.cases { display: flex; flex-wrap: wrap; gap: .5rem .9rem; }
.cases label { display: inline-flex; align-items: center; gap: .35rem; font-size: .9rem; font-weight: 400; }
.piege { position: absolute; left: -9999px; }
.erreur { border: 1px solid #e8c4bb; background: #fbefec; color: #8d3423; padding: .7rem .9rem; font-size: .9rem; margin-bottom: 1rem; }

/* --------------------------------------------------------------------------
   Pied
   -------------------------------------------------------------------------- */
.pied { border-top: 1px solid var(--filet); background: var(--surface); margin-top: 2rem; }
.pied-in { max-width: var(--max); margin: 0 auto; padding: 2rem 1.25rem 2.5rem; display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 1.5rem; }
@media (max-width: 760px) { .pied-in { grid-template-columns: 1fr; } }
.pied h4 { font-family: 'Chivo', sans-serif; font-size: .78rem; letter-spacing: .09em; text-transform: uppercase; color: var(--encre-douce); margin: 0 0 .6rem; }
.pied ul { list-style: none; padding: 0; margin: 0; }
.pied li { margin-bottom: .3rem; }
.pied a { font-size: .92rem; text-decoration: none; color: var(--encre-douce); }
.pied a:hover { color: var(--brique); text-decoration: underline; }
.pied-bas { border-top: 1px solid var(--filet); font-size: .8rem; color: var(--encre-douce); }
.pied-bas div { max-width: var(--max); margin: 0 auto; padding: .9rem 1.25rem; display: flex; flex-wrap: wrap; gap: .8rem; }

/* Le fil rouge de lecture : un filet fin en haut de page qui avance au scroll. */
.progression { position: fixed; top: 0; left: 0; height: 2px; background: var(--brique); width: 0; z-index: 60; }
@media (prefers-reduced-motion: reduce) { .progression { display: none; } }