/* english-2000.css, la page du livre numérique.

   Elle reprend le vocabulaire du site : mêmes jetons, mêmes boutons, mêmes
   en-têtes de section. Ce qui lui est propre tient ici : le bandeau
   d'annonce, le hero sombre, le carrousel, la grille des sept activités.

   Le fond sombre du hero n'est pas décoratif : la page arrive après une
   navigation claire, et c'est ce contraste qui dit qu'on change de sujet. */

/* --- Bandeau d'annonce ---------------------------------------------------- */
.e2000-annonce {
  background: var(--jaune); color: var(--encre);
  /* base.css borne les paragraphes à 66ch : une bande doit tenir toute la
     largeur, elle reprend donc la sienne. */
  max-width: none; width: 100%; margin: 0;
  text-align: center; padding: .7rem var(--e2);
  font-size: var(--t-petit); font-weight: 700;
}

/* --- Hero ----------------------------------------------------------------- */
.e2000-hero {
  background: var(--bleu-nuit); color: #C8D8F5;
  padding-block: clamp(1.5rem, 4vw, 3rem) clamp(2.5rem, 6vw, 5rem);
  position: relative; overflow: hidden;
}
/* Un halo, pas un décor : il creuse le bleu derrière les captures. */
.e2000-hero::before {
  content: ""; position: absolute; right: -12vw; top: -30vh;
  width: min(820px, 95vw); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(27, 92, 212, .5), transparent 68%);
  pointer-events: none;
}
.e2000-hero > * { position: relative; z-index: 1; }

.e2000-hero .fil { margin-bottom: var(--e4); }
.e2000-hero .fil a, .e2000-hero .fil [aria-current] { color: #B9C9EA; }
.e2000-hero .fil a:hover { color: #fff; }

.e2000-hero-grille {
  display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
@media (max-width: 900px) { .e2000-hero-grille { grid-template-columns: 1fr; gap: var(--e4); } }

.e2000-hero h1 { color: #fff; font-size: var(--t-h1); margin-bottom: .9rem; }
.e2000-hero .eyebrow { background: rgba(255, 216, 77, .18); color: var(--jaune); }
.e2000-accroche { color: #B9C9EA; font-size: 1.0625rem; max-width: 44ch; margin-bottom: var(--e3); }

.e2000-boutons { display: flex; flex-wrap: wrap; gap: .8rem; }
/* Le bouton à filet du site est tracé pour fond clair : sur l'encre il
   disparaîtrait. Il reprend le filet clair déjà employé par le hero. */
.e2000-boutons .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .45); }
.e2000-boutons .btn-ghost:hover { background: #fff; color: var(--bleu-nuit); border-color: #fff; }

/* --- Carrousel ------------------------------------------------------------ */
.carrousel { position: relative; }
.carrousel-cadre {
  border-radius: var(--r-grand);
  background: rgba(255, 255, 255, .08);
  padding: clamp(.5rem, 1.2vw, .9rem);
  box-shadow: 0 30px 70px -32px rgba(0, 0, 0, .8);
}
.carrousel-piste {
  list-style: none; margin: 0; padding: 0;
  display: flex; overflow-x: auto;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  border-radius: var(--r);
  scrollbar-width: none; -ms-overflow-style: none;
}
.carrousel-piste::-webkit-scrollbar { display: none; }
.carrousel-vue { flex: 0 0 100%; scroll-snap-align: center; margin: 0; }
.carrousel-vue img { width: 100%; height: auto; display: block; border-radius: var(--r); }

.carrousel-legende {
  display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
  margin: var(--e2) 0 0; color: #D7E3F8; font-size: var(--t-petit);
}
.carrousel-legende strong { color: #fff; font-family: var(--font-titre); font-variant-numeric: tabular-nums; }

.carrousel-fleche {
  position: absolute; top: 42%; z-index: 2;
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--blanc); color: var(--encre); border: 0; cursor: pointer;
  box-shadow: 0 10px 26px -10px rgba(0, 0, 0, .6);
  transition: background var(--transition), color var(--transition);
}
.carrousel-fleche:hover { background: var(--jaune); }
.carrousel-fleche svg { width: 20px; height: 20px; }
.carrousel-prec { left: -14px; }
.carrousel-suiv { right: -14px; }
@media (max-width: 560px) { .carrousel-prec { left: -6px; } .carrousel-suiv { right: -6px; } }

.carrousel-puces { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; margin-top: var(--e2); }
.carrousel-puces button {
  width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: rgba(255, 255, 255, .35);
  transition: background var(--transition), width var(--transition);
}
.carrousel-puces button:hover { background: rgba(255, 255, 255, .6); }
.carrousel-puces button[aria-current="true"] {
  background: var(--jaune); width: 26px; border-radius: var(--r-rond);
}

/* --- Les sept activités --------------------------------------------------- */
.grille-activites {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--e3);
}
@media (max-width: 620px) { .grille-activites { grid-template-columns: 1fr; } }

.activite {
  background: var(--blanc);
  border: 1px solid var(--ligne); border-radius: var(--r-grand);
  overflow: hidden; display: flex; flex-direction: column;
  box-shadow: var(--ombre-carte);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.activite:hover { transform: translateY(-4px); border-color: var(--bleu); box-shadow: var(--ombre-livre-levee); }

.activite-vue { position: relative; background: var(--papier-creux); }
.activite-vue img { width: 100%; height: auto; display: block; }
.activite-numero {
  position: absolute; left: .8rem; top: .8rem;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--blanc); color: var(--bleu);
  font-family: var(--font-titre); font-weight: 800; font-size: 1rem;
  box-shadow: 0 6px 16px -6px rgba(11, 27, 58, .5);
}

.activite-corps { padding: var(--e3); display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.activite-corps p { margin: 0; font-size: var(--t-petit); color: var(--encre-douce); }

/* Hauteurs fixes dans la carte.

   Les sept textes du document n'ont pas la même longueur. L'amorce est déjà
   coupée au même nombre de caractères pour toutes les cartes, mais une ligne
   se remplit différemment selon les mots : on arrête donc chaque bloc à un
   nombre de lignes donné, et on lui donne la hauteur de ces lignes. Les sept
   cartes se superposent alors exactement, titre sur titre, encadré sur
   encadré, et la grille ne montre plus de décalage. */
.activite-corps h3,
.activite-sous,
.activite-amorce,
.activite-competence {
  display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
}

.activite-corps h3 {
  font-size: 1.1rem; margin: 0; line-height: 1.3;
  height: 2.6em; -webkit-line-clamp: 2;
}

/* Le sous-titre annonce l'activité avant son nom, comme dans le document. */
.activite-sous {
  margin-bottom: -.25rem !important;
  font-size: var(--t-mini); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--bleu) !important;
  line-height: 1.4; height: 1.4em; -webkit-line-clamp: 1;
}

/* L'amorce : le début de la description, le reste dans la fenêtre. */
.activite-amorce {
  color: var(--encre-tenue) !important;
  line-height: 1.6; height: 6.4em; -webkit-line-clamp: 4;
}

/* L'intérêt pédagogique, détaché : c'est l'argument, pas la description. */
.activite-interet {
  margin-top: .4rem !important;
  padding: .85rem 1rem;
  background: var(--bleu-voile); border-radius: var(--r-petit);
  font-size: var(--t-mini) !important; line-height: 1.5;
}
.activite-interet strong {
  display: block; margin-bottom: .3rem;
  font-size: var(--t-micro); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--bleu);
}
/* La coupe porte sur le texte seul : l'étiquette au-dessus compterait pour
   une ligne et mangerait une ligne de texte. */
.activite-interet span {
  display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
  -webkit-line-clamp: 3; height: 4.5em;
}
/* Colonnes larges : les lignes tiennent plus de mots, le même texte occupe
   une ligne de moins, et la hauteur suit plutôt que de laisser un blanc. */
@media (min-width: 1040px) {
  .activite-amorce { height: 4.8em; -webkit-line-clamp: 3; }
  .activite-interet span { height: 3em; -webkit-line-clamp: 2; }
}

.activite-competence {
  margin-top: auto !important; padding-top: .9rem; border-top: 1px solid var(--filet);
  font-size: var(--t-mini); color: var(--encre-tenue) !important;
  line-height: 1.5; box-sizing: content-box; height: 3em; -webkit-line-clamp: 2;
}
.activite-competence strong { color: var(--bleu); font-weight: 700; }

/* --- Ouvrir le texte entier ------------------------------------------------ */
/* La carte entière est cliquable, le bouton dit ce que fait ce clic et donne
   au clavier un point d'entrée. */
.activite { cursor: pointer; }
.activite-plus {
  display: inline-flex; align-items: center; gap: .35rem;
  margin-top: .2rem; padding: 0; border: 0; background: none;
  font: inherit; font-size: var(--t-mini); font-weight: 700;
  color: var(--bleu); cursor: pointer; text-align: left;
}
.activite-plus svg { width: 15px; height: 15px; transition: transform var(--transition); }
.activite:hover .activite-plus svg { transform: translateX(3px); }
.activite-plus:focus-visible { outline: 2px solid var(--bleu); outline-offset: 3px; border-radius: var(--r-petit); }

/* --- La fenêtre d'une activité -------------------------------------------- */
/* Elle reprend .modale et .modale-boite du site : seuls l'en-tête, le corps
   et le pied lui appartiennent. La boîte est déjà une colonne qui ne dépasse
   pas l'écran ; il suffit donc de laisser le corps prendre la place restante
   et de n'autoriser le défilement que là. */
.modale-activite .modale-boite { width: min(560px, calc(100vw - 2rem)); }

.me-tete {
  flex: 0 0 auto;
  display: flex; align-items: flex-start; gap: var(--e2);
  padding: var(--e3) var(--e3) var(--e2);
  border-bottom: 1px solid var(--filet);
}
.me-tete h2 { font-size: 1.25rem; margin: 0; }
.me-sur {
  margin: 0 0 .25rem; font-size: var(--t-micro); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--bleu);
}
.me-fermer {
  flex: 0 0 auto; margin-left: auto;
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--ligne); background: var(--blanc);
  color: var(--encre-douce); cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.me-fermer:hover { background: var(--papier-creux); color: var(--encre); }
.me-fermer svg { width: 17px; height: 17px; }

.me-corps {
  /* min-height: 0 autorise la colonne à rétrécir ce bloc : sans cela il
     garderait la hauteur de son texte et pousserait le pied hors de l'écran
     au lieu de faire défiler. overscroll-behavior garde la molette ici une
     fois le bas atteint, au lieu de la rendre à la page. */
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
  padding: var(--e3);
}
.me-corps img {
  width: 100%; height: auto; display: block;
  border-radius: var(--r-petit); margin-bottom: var(--e2);
}
.me-corps h4 {
  font-size: var(--t-micro); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--bleu);
  margin: 0 0 .35rem;
}
.me-corps h4 + p { margin: 0 0 var(--e2); font-size: var(--t-petit); color: var(--encre-douce); }
.me-corps .detail-interet {
  margin: 0; padding: .9rem 1.1rem;
  background: var(--bleu-voile); border-radius: var(--r-petit);
  font-size: var(--t-petit); line-height: 1.55; color: var(--encre);
}
.me-corps .detail-interet strong {
  display: block; margin-bottom: .3rem;
  font-size: var(--t-micro); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--bleu);
}

.me-pied {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e2); flex-wrap: wrap;
  padding: var(--e2) var(--e3);
  border-top: 1px solid var(--filet); background: var(--papier);
}
.me-competence { margin: 0; font-size: var(--t-mini); color: var(--encre-tenue); }
.me-competence strong { color: var(--bleu); font-weight: 700; }

/* --- Les atouts ----------------------------------------------------------- */
/* Cinq atouts : à largeur d'écran ils tiennent sur une ligne, et aucune
   colonne ne reste vide quand ils passent à la ligne. */
.grille-atouts { display: grid; grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)); gap: var(--e3); }
.atout { display: flex; gap: var(--e2); align-items: flex-start; }
.atout-ico {
  width: 44px; height: 44px; flex: 0 0 44px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--bleu-voile); color: var(--bleu);
}
.atout-ico svg { width: 22px; height: 22px; }
.atout h3 { font-size: 1.02rem; margin: 0 0 .3rem; }
.atout p { margin: 0; font-size: var(--t-petit); color: var(--encre-douce); }

/* --- Le rappel final ------------------------------------------------------ */
.e2000-rappel {
  background: var(--bleu-nuit); color: #C8D8F5;
  border-radius: var(--r-grand); padding: clamp(1.75rem, 4vw, 3.2rem);
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(330px, .7fr);
  gap: var(--e4); align-items: center;
}
@media (max-width: 860px) { .e2000-rappel { grid-template-columns: 1fr; gap: var(--e3); } }
.e2000-rappel h2 { color: #fff; margin-bottom: .6rem; }
.e2000-rappel p { color: #B9C9EA; margin: 0; max-width: 52ch; }

/* Le champ et le bouton sur une ligne : la colonne leur réserve la largeur
   qu'il faut, sinon le bouton passait tout seul dessous. */
.e2000-forme { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; }
.e2000-forme input[type="email"] {
  /* Base courte : le champ grandit pour occuper ce qui reste, mais ne pousse
     pas le bouton à la ligne quand la colonne est juste. */
  flex: 1 1 190px; min-width: 0; height: 48px;
  padding: 0 1rem; border-radius: var(--r-rond);
  border: 1px solid rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .1); color: #fff;
  font: inherit; font-size: var(--t-petit);
}
.e2000-forme input::placeholder { color: #8FA6CC; }
.e2000-forme input:focus {
  outline: 0; border-color: var(--jaune);
  box-shadow: 0 0 0 3px rgba(255, 216, 77, .25);
  background: rgba(255, 255, 255, .16);
}
.e2000-forme .btn { height: 48px; }
.e2000-reponse { flex: 1 1 100%; margin: 0; font-size: var(--t-mini); min-height: 1.1em; }
.e2000-reponse.bon { color: #9FE8C4; }
.e2000-reponse.mauvais { color: #FFC9C4; }

/* --- Impression ------------------------------------------------------------ */
@media print {
  .e2000-hero { background: none; color: #000; }
  .e2000-hero h1, .e2000-rappel h2 { color: #000; }
  .e2000-annonce { border: 1px solid #000; }
  .carrousel-fleche, .carrousel-puces, .e2000-forme { display: none; }
  .activite { break-inside: avoid; border: .5px solid #999; box-shadow: none; cursor: auto; }
  /* Sur papier, pas de fenêtre à ouvrir : l'amorce coupée laisse la place au
     texte entier, qui voyage déjà avec la carte. */
  .activite-plus, .activite-amorce, .activite-interet { display: none !important; }
  .activite-detail[hidden] { display: block !important; padding: 0 var(--e3) var(--e2); }
  /* La carte imprime déjà la capture en haut : pas deux fois la même. */
  .activite-detail img { display: none; }
  .activite-detail h4 { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 .2rem; }
  .activite-detail p { font-size: var(--t-mini); margin: 0 0 .6rem; }
  .activite-detail .detail-interet { background: none; border-left: 2px solid #000; padding-left: .7rem; }
  .activite-corps h3, .activite-sous, .activite-competence { height: auto; }
  .modale-activite { display: none !important; }
  /* L'aplat bleu de l'encadré part en gris sur une laser : un filet suffit. */
  .activite-interet { background: none; border-left: 2px solid #000; border-radius: 0; padding-left: .7rem; }
  .activite-sous, .activite-interet strong { color: #000; }
  .e2000-rappel { background: none; color: #000; border: .5px solid #999; }
}