/* Projet pédagogique — les quelques formes propres au site 2.
   Tout le reste vient de site.css, partagé avec le site du séjour. */

/* ---- bandeau : le nom, et sous lui ce qu'on lit ---------------------------------------- */
.bandeau__logo { line-height: 1.05; }
.bandeau__sur {
  display: block;
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--encre-2);
  margin-top: .18rem;
}
.bandeau:not(.apres-hero) .bandeau__sur,
body:not(.apres-hero) .bandeau__sur { color: var(--brume); }

/* ---- les intentions : deux colonnes de texte ------------------------------------------- */
.intentions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--encre);
}
.intentions article {
  padding: 1.6rem 1.8rem 1.8rem 0;
  display: grid;
  gap: .7rem;
  align-content: start;
}
.intentions article + article {
  padding-left: 1.8rem;
  border-left: 1px solid var(--filet);
}
.intentions h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  line-height: 1.1;
}
.intentions .texte { color: var(--encre-2); max-width: 54ch; }
.intentions .phrase-mere { margin-top: .4rem; }

/* ---- fiche du contexte : les lignes encore vides ne se cachent pas ---------------------- */
.fiche__ligne.est-vide dd {
  color: var(--ocre-texte);
  font-style: italic;
}

/* ---- objectifs généraux : quatre cartes en grille -------------------------------------- */
.cartes--og {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
}
.cartes--og > li {
  padding: 1.4rem 1.6rem 1.6rem 0;
  align-content: start;
}
.cartes--og > li:nth-child(even) {
  padding-left: 1.6rem;
  border-left: 1px solid var(--filet);
}
.cartes--og h3 {
  font-family: var(--mono);
  font-size: .8rem;
  letter-spacing: .16em;
  color: var(--encre-2);
}
.cartes--og .texte {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2.1vw, 1.9rem);
  line-height: 1.15;
  color: var(--encre);
}

/* ---- objectifs opérationnels : le code, le verbe, les moyens, le critère ---------------- */
.cartes--oo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
}
.cartes--oo > li {
  padding: 1.5rem 1.8rem 1.7rem 0;
  align-content: start;
}
.cartes--oo > li:nth-child(even) {
  padding-left: 1.8rem;
  border-left: 1px solid var(--filet);
}
.oo__code {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .14em;
  color: var(--ocre-texte);
}
.oo-moyens {
  list-style: none;
  display: grid;
  gap: .45rem;
  margin: .2rem 0 .1rem;
  padding: 0;
}
.oo-moyens li {
  position: relative;
  padding: 0 0 0 1rem;
  border: 0;
  color: var(--encre-2);
  font-size: .95em;
  line-height: 1.45;
}
.oo-moyens li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: .42rem;
  height: 1px;
  background: var(--encre);
  opacity: .5;
}

/* ---- non-négociables : les interdits du directeur, sans titre ---------------------------- */
.cartes--interdits li { gap: .3rem; }
.cartes--interdits li b { font-weight: 500; }
.cartes--interdits + .encart { margin-top: 1.4rem; }

/* ---- attentes ---------------------------------------------------------------------------- */
.cartes--attentes + .encart { margin-top: 1.6rem; }

/* ---- encart : un titre --------------------------------------------------------------------- */
.encart__titre {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mer);
  margin-bottom: .45rem;
}
.encart .texte + .texte { margin-top: .5rem; }

/* ---- tableaux de l'équipe -------------------------------------------------------------------- */
.grille {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid var(--encre);
  margin-bottom: 1.6rem;
  font-size: .95rem;
}
.grille th {
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--encre-2);
  text-align: left;
  padding: .7rem .9rem .7rem 0;
  border-bottom: 1px solid var(--encre);
  vertical-align: bottom;
}
.grille td {
  padding: .85rem .9rem .9rem 0;
  border-bottom: 1px solid var(--filet);
  vertical-align: top;
  line-height: 1.45;
  color: var(--encre-2);
}
.grille td b { color: var(--encre); font-weight: 500; }
.grille--roles td:first-child { width: 22%; }
.grille--serv td { text-align: center; font-family: var(--mono); font-size: .82rem; }
.grille--serv td:first-child { text-align: left; font-family: var(--sans); font-size: .95rem; }
.grille--serv th { text-align: center; }
.grille--serv th:first-child { text-align: left; }
.note { color: var(--encre-2); font-size: .92rem; margin-bottom: 1.8rem; }

/* ---- un écran pas encore écrit ---------------------------------------------------------------- */
.a-ecrire {
  border: 1px dashed var(--filet);
  border-left: 3px solid var(--ocre);
  padding: 1.4rem 1.6rem 1.6rem;
  background: rgba(181, 112, 47, .045);
}
.a-ecrire__mot {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ocre-texte);
  margin-bottom: .6rem;
}
.a-ecrire .texte { color: var(--encre-2); margin-bottom: .7rem; }
.a-ecrire__liste {
  list-style: none;
  display: grid;
  gap: .4rem;
  padding: 0;
  margin: 0;
}
.a-ecrire__liste li {
  position: relative;
  padding-left: 1.1rem;
  color: var(--encre-2);
  line-height: 1.45;
}
.a-ecrire__liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: .48rem;
  height: 1px;
  background: var(--ocre);
}

/* ---- sous 900 px : tout passe en une colonne --------------------------------------------------- */
@media (max-width: 900px) {
  .intentions,
  .cartes--og,
  .cartes--oo { grid-template-columns: minmax(0, 1fr); }
  .intentions article + article,
  .cartes--og > li:nth-child(even),
  .cartes--oo > li:nth-child(even) { padding-left: 0; border-left: 0; }
  .intentions article,
  .cartes--og > li,
  .cartes--oo > li { padding-right: 0; }
  .grille { display: block; overflow-x: auto; }
}

/* ---- sous 700 px : le bandeau porte un nom long et un lien vers le document ------------------- */
@media (max-width: 700px) {
  .bandeau__logo { max-width: 10.5rem; }
  .bandeau__cta { padding-inline: .7rem; font-size: .72rem; letter-spacing: .05em; }
  .bandeau__sur { font-size: .55rem; letter-spacing: .12em; }
  /* les faits du site 2 sont plus longs que ceux du séjour : ils passent à la ligne */
  .faits b { white-space: normal; }
  .carte-faits__action .btn { white-space: normal; text-align: center; padding-inline: 1.1em; }
}

/* ---- le titre du site 2 est plus long que celui du séjour : il respire moins fort ------------- */
.hero__titre { font-size: clamp(2.1rem, 4.4vw, 5rem); max-width: 16ch; }
.hero__sous { font-size: clamp(1.05rem, 1.7vw, 1.45rem); max-width: 62ch; }

/* ---- les interdits du directeur se lisent comme les exigences, en face -------------------------- */
.cartes--interdits > li > b {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1.1;
  color: var(--encre);
}

/* =================================================================================================
   Mode diapo — le site se présente écran par écran. Hors de ce mode, rien ne change.
   ================================================================================================= */
body.diapo { overflow: hidden; }
body.diapo .bandeau,
body.diapo .pied,
body.diapo main > .wrap { display: none; }

body.diapo main > section[data-diapo] {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  background: var(--calcaire);
}
body.diapo main > section[data-diapo].est-active {
  opacity: 1;
  pointer-events: auto;
  z-index: 3;
}
body.diapo main > section[data-diapo].sort-avant,
body.diapo main > section[data-diapo].sort-arriere {
  opacity: 1;
  z-index: 2;
  animation: diapo-sort .42s ease both;
}

/* le contenu se met à l'échelle pour tenir dans la hauteur, quelle que soit la télé */
body.diapo main > section[data-diapo] > .wrap {
  width: 100%;
  transform: scale(var(--fit, 1));
  transform-origin: center center;
}
body.diapo main > section[data-diapo] > .wrap > .rubrique__tete { margin-bottom: 1.6rem; }
body.diapo main > section[data-diapo].est-dense { align-items: flex-start; overflow-y: auto; }
body.diapo main > section[data-diapo].est-dense > .wrap { padding-block: 3rem; }

/* le premier écran garde sa composition d'affiche */
body.diapo main > section.hero { align-items: flex-end; }
body.diapo main > section.hero > .hero__texte { padding-bottom: clamp(3rem, 9vh, 6rem); }

/* les blocs hors du groupe courant sortent du flux */
body.diapo [data-groupe].est-hors { display: none; }

/* entrée et sortie — `translate` se compose avec le `transform: scale` sans l'écraser */
@keyframes diapo-entre { from { opacity: 0; translate: 0 2.4rem; } to { opacity: 1; translate: 0 0; } }
@keyframes diapo-entre-arriere { from { opacity: 0; translate: 0 -2.4rem; } to { opacity: 1; translate: 0 0; } }
@keyframes diapo-sort { from { opacity: 1; } to { opacity: 0; } }
body.diapo main > section.entre > .wrap { animation: diapo-entre .42s cubic-bezier(.22, .61, .36, 1) both; }
body.diapo main > section.entre-arriere > .wrap { animation: diapo-entre-arriere .42s cubic-bezier(.22, .61, .36, 1) both; }

/* le compteur devient le repère de progression */
body.diapo .compteur { opacity: 1; transform: none; z-index: 8; }

@media (prefers-reduced-motion: reduce) {
  body.diapo main > section.entre > .wrap,
  body.diapo main > section.entre-arriere > .wrap,
  body.diapo main > section[data-diapo].sort-avant,
  body.diapo main > section[data-diapo].sort-arriere { animation: none; }
}

/* ---- le carnet : le contrat, puis les cinq mouvements ------------------------------------------ */
.cartes--contrat,
.cartes--phases {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
}
.cartes--contrat > li,
.cartes--phases > li { padding: 1.3rem 1.6rem 1.5rem 0; align-content: start; }
.cartes--contrat > li:nth-child(even),
.cartes--phases > li:nth-child(even) { padding-left: 1.6rem; border-left: 1px solid var(--filet); }
.cartes--phases > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.carnet-contrat { margin-bottom: 2.4rem; }
.cartes--phases + .encart { margin-top: 1.8rem; }

@media (max-width: 900px) {
  .cartes--contrat,
  .cartes--phases { grid-template-columns: minmax(0, 1fr); }
  .cartes--contrat > li:nth-child(even),
  .cartes--phases > li:nth-child(even) { padding-left: 0; border-left: 0; }
  .cartes--contrat > li,
  .cartes--phases > li { padding-right: 0; }
}

/* en diapo, une colonne seule du face-à-face occupe toute la largeur */
body.diapo .vivre:has(> .vivre__col.est-hors) { grid-template-columns: minmax(0, 1fr); }
body.diapo .vivre__col:not(.est-hors) { padding-left: 0; border-left: 0; }

/* =================================================================================================
   Les deux valeurs, et le territoire de chacune
   ================================================================================================= */
/* Authenticité tient au bleu de la charte, Audace à l'ocre. La couleur porte la distinction. */
.valeur--1, .colonne-valeur--1, .portail--1, .ecran-og--1 { --teinte: var(--mer); --teinte-texte: var(--mer); }
.valeur--2, .colonne-valeur--2, .portail--2, .ecran-og--2 { --teinte: var(--ocre); --teinte-texte: var(--ocre-texte); }

.deux-valeurs li { border-top: 3px solid var(--teinte, var(--encre)); padding-top: 1.1rem; }
.deux-valeurs li b { color: var(--teinte-texte, var(--encre)); }
.deux-valeurs p { font-size: 1.08em; line-height: 1.5; }

/* ---- écran des quatre objectifs : une colonne par valeur --------------------------------------- */
.deux-colonnes-valeurs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
}
.colonne-valeur { padding: 0 1.8rem 0 0; }
.colonne-valeur + .colonne-valeur { padding: 0 0 0 1.8rem; border-left: 1px solid var(--filet); }
.colonne-valeur__mot {
  font-family: var(--serif);
  font-size: clamp(2rem, 3.4vw, 3.2rem);
  line-height: 1;
  color: var(--teinte-texte);
  padding-bottom: .7rem;
  border-bottom: 3px solid var(--teinte);
  margin-bottom: .2rem;
}
.colonne-valeur .cartes--og { grid-template-columns: minmax(0, 1fr); border-top: 0; }
.colonne-valeur .cartes--og > li,
.colonne-valeur .cartes--og > li:nth-child(even) {
  padding: 1.2rem 0 1.3rem;
  border-left: 0;
}
.og__num {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--teinte-texte);
}
.og__libelle {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2vw, 1.85rem);
  line-height: 1.15;
  color: var(--encre);
}

/* ---- écran-portail : on change de territoire, ça doit se voir de loin -------------------------- */
.portail .wrap { max-width: 68rem; }
.portail__mot {
  font-family: var(--serif);
  font-size: clamp(3.4rem, 11vw, 11rem);
  line-height: .95;
  letter-spacing: -.02em;
  color: var(--teinte-texte);
  margin: .6rem 0 1.4rem;
}
.portail__phrase {
  font-size: clamp(1.15rem, 1.9vw, 1.7rem);
  line-height: 1.45;
  max-width: 46ch;
  color: var(--encre);
  padding-left: 1.2rem;
  border-left: 4px solid var(--teinte);
}
.portail__og {
  list-style: none;
  margin-top: 2.4rem;
  padding: 0;
  border-top: 1px solid var(--encre);
}
.portail__og li {
  padding: .9rem 0;
  border-bottom: 1px solid var(--filet);
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.7vw, 1.5rem);
  line-height: 1.2;
  display: grid;
  gap: .25rem;
}
.portail__og span {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--teinte-texte);
}

/* ---- sur un écran d'objectifs, la valeur reste affichée en tête -------------------------------- */
.valeur-rappel {
  display: flex;
  align-items: baseline;
  gap: .9rem;
  margin: .2rem 0 .5rem;
}
.valeur-rappel b {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.7rem, 2.8vw, 2.6rem);
  line-height: 1;
  color: var(--teinte-texte);
}
.valeur-rappel span {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--encre-2);
}
.ecran-og .titre { border-top: 3px solid var(--teinte); padding-top: .9rem; }
.ecran-og .oo__code { color: var(--teinte-texte); }

@media (max-width: 900px) {
  .deux-colonnes-valeurs { grid-template-columns: minmax(0, 1fr); }
  .colonne-valeur { padding: 0 0 1.4rem; }
  .colonne-valeur + .colonne-valeur { padding: 1.4rem 0 0; border-left: 0; border-top: 1px solid var(--filet); }
  .valeur-rappel { flex-direction: column; gap: .2rem; }
}

/* =================================================================================================
   Lecture au défilement — c'est ainsi que le site sera montré
   ================================================================================================= */
/* Le bandeau ouvre le site, puis s'efface : on lit, il n'a plus rien à faire là. */
.bandeau { transition: background .3s ease, color .3s ease, border-color .3s ease, transform .32s cubic-bezier(.4, 0, .2, 1); }
body.bandeau-cache .bandeau { transform: translateY(-105%); }
body.diapo .bandeau { transform: none; }

/* Chaque rubrique s'ouvre sur un filet pleine largeur : les frontières se voient au défilement. */
main > section[data-rubrique] { border-top: 1px solid var(--filet); }
main > section[data-rubrique] > .wrap.rubrique { padding-block: clamp(3.4rem, 7vw, 6rem); }
body.diapo main > section[data-rubrique] { border-top: 0; }
body.diapo main > section[data-rubrique] > .wrap.rubrique { padding-block: 0; }

/* Le numéro d'écran devient un repère : un trait teinté, puis le titre de la rubrique. */
.rubrique__tete .kicker.num {
  display: flex;
  align-items: center;
  gap: .8rem;
  color: var(--teinte-texte, var(--ocre-texte));
}
.rubrique__tete .kicker.num::before {
  content: "";
  width: 2.2rem;
  height: 2px;
  background: var(--teinte, var(--ocre));
  flex: none;
}
.rubrique__tete .titre { margin-top: .2rem; }

/* Le critère d'atteinte est ce qu'un jury cherche : il se lit comme un bloc, pas comme une note. */
.cartes--oo .pourquoi-ligne {
  background: color-mix(in srgb, var(--teinte, var(--mer)) 9%, transparent);
  border-left: 3px solid var(--teinte, var(--mer));
  padding: .6rem .8rem;
  margin-top: .3rem;
}
.cartes--oo .pourquoi-ligne span { color: var(--teinte-texte, var(--mer)); }

/* =================================================================================================
   Les écrans-portails : une respiration pleine page, sur fond de nuit
   ================================================================================================= */
.portail {
  background: var(--nuit);
  color: var(--calcaire);
  border-top: 0 !important;
}
.portail--1 { --teinte-nuit: var(--mer-pale); }
.portail--2 { --teinte-nuit: var(--ocre); }
.portail > .wrap.rubrique {
  min-height: 78svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.portail .kicker.num { color: var(--brume); }
.portail .kicker.num::before { background: var(--teinte-nuit); }
.portail__mot { color: var(--teinte-nuit); }
.portail__phrase { color: #E6E2D8; border-left-color: var(--teinte-nuit); }
.portail__og { border-top-color: rgba(242, 238, 230, .34); }
.portail__og li { border-bottom-color: var(--filet-nuit); color: var(--calcaire); }
.portail__og span { color: var(--teinte-nuit); }
body.diapo .portail > .wrap.rubrique { min-height: 0; }

/* =================================================================================================
   Le cadre : deux colonnes, deux registres
   ================================================================================================= */
.vivre__col:first-child { --teinte: var(--mer); --teinte-texte: var(--mer); }
.vivre__col:last-child { --teinte: var(--ocre); --teinte-texte: var(--ocre-texte); }
.vivre__tete .valeur {
  color: var(--teinte-texte);
  border-color: var(--teinte);
}
.vivre__col > .cartes { border-top-color: var(--teinte); border-top-width: 3px; }