/* Page de connexion — la même mise en page sur tous les outils de la maison
   (modèle : espace YH /connexion, console My AfterSchool /admin/login) :
   colonne encre à gauche, colonne papier à droite, un accent, des filets,
   aucune carte, rayon 0, aucune ombre.

   **Un seul bloc change d'un client à l'autre : la charte ci-dessous.** Les
   couleurs, les trois familles de caractères, rien d'autre. Le reste du
   fichier se recopie tel quel — c'est tout l'intérêt d'avoir la même page.

   Préfixe cx- : la feuille vit à côté de site.css et de gestion.css, et ne
   doit rien leur emprunter ni rien leur imposer. Elle est autoportante. */

/* ====================== CHARTE — la seule partie à changer ============== */
:root {
  /* AccroMaroc : vert zellige, terracotta, parchemin. */
  --cx-encre:        #123E30;  /* la grande colonne sombre                  */
  --cx-encre-fonce:  #0C271F;  /* son fond, un ton plus bas                 */
  --cx-accent:       #BE4A2E;  /* terracotta — l'accent sur fond sombre     */
  --cx-accent-fonce: #A63C22;  /* le même, lisible sur fond clair           */
  --cx-papier:       #F4ECDD;  /* parchemin — le fond de la page            */
  --cx-texte:        #241A0F;  /* encre espresso                            */
  --cx-doux:         #3E3427;
  --cx-gris:         #6B5A45;
  --cx-trait:        #DCCDB4;
  --cx-titre: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --cx-corps: 'Hanken Grotesk', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --cx-mono:  'JetBrains Mono', ui-monospace, monospace;
}
/* ======================== fin de la charte ============================== */

.cx, .cx * { box-sizing: border-box; }
body.cx-page { margin: 0; background: var(--cx-papier); font-family: var(--cx-corps);
  color: var(--cx-texte); font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
.cx { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
  background: var(--cx-papier); }

/* ---- colonne encre ---- */
.cx-encre { position: relative; background: var(--cx-encre-fonce); color: #E7EFEA;
  padding: clamp(28px, 5vw, 64px) clamp(28px, 6vw, 88px) clamp(28px, 5vw, 56px) calc(clamp(28px, 6vw, 88px) + 34px);
  display: flex; flex-direction: column; justify-content: space-between;
  border-right: 3px solid var(--cx-accent); }
/* Le filet vertical et sa légende : la signature de la page. */
.cx-encre::before { content: attr(data-rail); position: absolute; left: clamp(14px, 2vw, 26px); top: 50%;
  transform: translateY(-50%) rotate(180deg); writing-mode: vertical-rl; font-family: var(--cx-mono);
  font-size: 0.62rem; letter-spacing: 0.24em; color: rgba(255,255,255,0.5); white-space: nowrap;
  text-transform: uppercase; }
.cx-encre::after { content: ""; position: absolute; left: calc(clamp(14px, 2vw, 26px) + 18px);
  top: clamp(28px, 5vw, 64px); bottom: clamp(28px, 5vw, 56px); width: 1px; background: rgba(255,255,255,0.16); }
.cx-marque { align-self: flex-start; display: flex; flex-direction: column; align-items: flex-start;
  gap: 14px; margin: 0; font-family: var(--cx-titre); font-weight: 600; font-size: 1.25rem;
  letter-spacing: -0.02em; color: #fff; }
/* Le logo à même le fond, sans cadre. Il faut pour cela sa version claire :
   voir le commentaire du gabarit. */
.cx-logo { position: relative; display: inline-block; line-height: 0; }
.cx-logo-grand { display: block; width: auto; height: 164px; max-width: 100%; }

/* **L'éclat qui traverse la marque, une fois.** Le reflet est découpé à la
   forme du logo par un masque : sans lui, la bande de lumière barrerait
   aussi le vert autour, et on verrait passer un rectangle. Il part après
   que la marque s'est posée — un reflet sur une image encore en mouvement
   ne se lit pas. */
.cx-logo-eclat {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
  -webkit-mask-image: url(../images/charte/logo-charte-sombre.webp);
  mask-image: url(../images/charte/logo-charte-sombre.webp);
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}
/* **C'est une translation qu'on anime, pas une position de fond.** Déplacer
   un `background-position` fait repeindre la zone à chaque image ; une
   `transform` est confiée à la carte graphique. Sur une animation qui ne
   s'arrête jamais, la différence se paie en batterie. */
.cx-logo-eclat::before {
  content: ""; position: absolute; top: -25%; bottom: -25%; width: 42%; left: 0;
  background: linear-gradient(104deg, transparent, rgba(255,255,255,.78), transparent);
  transform: translateX(-170%);
  animation: cx-eclat 5s cubic-bezier(.36, .05, .2, 1) .9s infinite backwards;
}
/* Le reflet traverse, puis attend hors champ avant de repartir. Le repos
   était d'abord de quatre secondes et demie : assez long pour qu'on croie
   l'animation terminée — Yassine a demandé deux fois si elle bouclait. Il
   passe à deux secondes et demie, autant que la traversée. On lit alors un
   mouvement continu, sans tomber dans le clignotement. */
@keyframes cx-eclat {
  0%   { transform: translateX(-170%); }
  50%  { transform: translateX(350%); }
  100% { transform: translateX(350%); }
}

/* **L'entrée de la colonne, dans l'ordre où on la lit.** Chaque bloc monte
   de quelques pixels en apparaissant, l'un après l'autre. Soixante-dix
   millisecondes d'écart : assez pour qu'on sente la séquence, trop peu pour
   qu'on attende. */
@keyframes cx-monte { from { opacity: 0; transform: translateY(16px); }
                      to   { opacity: 1; transform: none; } }
.cx-encre .cx-marque,
.cx-encre > div > .cx-eyebrow,
.cx-encre h1,
.cx-encre .cx-phrase,
.cx-encre .cx-bas { animation: cx-monte .72s cubic-bezier(.2,.7,.3,1) both; }
.cx-encre .cx-marque          { animation-delay: .05s; }
.cx-encre > div > .cx-eyebrow { animation-delay: .34s; }
.cx-encre h1                  { animation-delay: .41s; }
.cx-encre .cx-phrase          { animation-delay: .50s; }
.cx-encre .cx-bas             { animation-delay: .60s; }

/* Le filet vertical se trace de haut en bas, comme on poserait une règle. */
@keyframes cx-filet { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.cx-encre::after { transform-origin: top; animation: cx-filet 1s cubic-bezier(.2,.7,.3,1) .2s both; }
/* La règle qui bornait un logo déposé à 40 px portait un !important : elle
   écrasait toute taille donnée plus bas et gardait la marque minuscule
   quoi qu'on écrive. La taille se règle maintenant sur `.cx-logo-grand`. */
.cx-marque b { color: var(--cx-accent); font-weight: 600; }
.cx-marque small { font-family: var(--cx-mono); font-weight: 400; font-size: 0.64rem; letter-spacing: 0.18em;
  color: rgba(255,255,255,0.55); margin-left: 14px; text-transform: uppercase; }
.cx-eyebrow { font-family: var(--cx-mono); font-size: 0.72rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--cx-gris); margin: 0; }
.cx-encre .cx-eyebrow { color: rgba(255,255,255,0.55); }
.cx-encre h1 { font-family: var(--cx-titre); font-size: clamp(2.6rem, 5.6vw, 5.4rem); line-height: 0.94;
  letter-spacing: -0.035em; font-weight: 600; color: #fff; max-width: 13ch; margin: 28px 0 22px; }
.cx-encre h1 em { font-style: normal; color: var(--cx-accent); }
.cx-phrase { color: rgba(255,255,255,0.78); max-width: 44ch; font-size: 0.98rem; margin: 0; }
.cx-bas { display: flex; align-items: center; gap: 14px; font-family: var(--cx-mono); font-size: 0.66rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
.cx-bas b { width: 8px; height: 8px; background: var(--cx-accent); display: inline-block; }

/* ---- colonne papier ---- */
.cx-papier { display: flex; align-items: center; justify-content: center;
  padding: clamp(28px, 5vw, 64px) clamp(24px, 5vw, 72px); }
.cx-bloc { width: min(100%, 420px); }
.cx-tete { display: flex; align-items: baseline; gap: 14px; padding-bottom: 12px;
  border-bottom: 2px solid var(--cx-encre); margin-bottom: 22px; }
.cx-tete .cx-num { font-family: var(--cx-mono); font-size: 0.72rem; color: var(--cx-accent-fonce); letter-spacing: 0.1em; }
.cx-tete h2 { font-family: var(--cx-titre); font-size: clamp(1.7rem, 2.6vw, 2.2rem); line-height: 1;
  letter-spacing: -0.025em; font-weight: 600; margin: 0; white-space: nowrap; color: var(--cx-texte); }
.cx-tete .cx-eyebrow { margin-left: auto; }
.cx-aide { margin: 0 0 24px; color: var(--cx-doux); font-size: 0.95rem; max-width: 40ch; }
.cx-message { display: none; align-items: center; gap: 10px; padding: 12px 14px; margin: 0 0 18px;
  font-size: 0.9rem; border-left: 3px solid #B3372E; background: #FBEDEC; color: #8E1B15; border-radius: 0; }
.cx-message.visible, .cx-message.cx-visible { display: flex; }
.cx-message.cx-info { border-left-color: var(--cx-encre); background: #E4EBE7; color: var(--cx-encre); }

/* Les deux fournisseurs d'identité. AccroMaroc n'en a pas encore ; les
   règles restent, c'est la même feuille pour tous les outils et l'espace YH
   comme la console My AfterSchool s'en servent. */
.cx-fournisseurs { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--cx-encre); }
.cx-fournisseur { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  min-height: 108px; padding: 18px 12px; background: var(--cx-papier); color: var(--cx-texte);
  font: 600 0.86rem/1.2 var(--cx-corps); text-decoration: none; text-align: center; border: 0; border-radius: 0;
  cursor: pointer; transition: background 0.2s, color 0.2s; }
.cx-fournisseur + .cx-fournisseur { border-left: 1px solid var(--cx-encre); }
.cx-fournisseur:only-child, .cx-fournisseur.cx-seul { grid-column: 1 / -1; }
.cx-fournisseur svg { width: 26px; height: 26px; }
.cx-fournisseur span { display: block; }
.cx-fournisseur small { display: block; font-family: var(--cx-mono); font-weight: 400; font-size: 0.62rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--cx-gris); margin-top: 3px; }
.cx-fournisseur:hover, .cx-fournisseur:focus-visible { background: var(--cx-encre); color: #fff; outline: none; }
.cx-fournisseur:hover small, .cx-fournisseur:focus-visible small { color: rgba(255,255,255,0.6); }
.cx-separateur { display: flex; align-items: center; gap: 14px; margin: 26px 0 18px; font-family: var(--cx-mono);
  font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cx-gris); }
.cx-separateur::before, .cx-separateur::after { content: ""; flex: 1; height: 1px; background: var(--cx-trait); }

/* ---- le formulaire ---- */
.cx-form { display: grid; }
.cx-form label { margin: 0 0 4px; font-size: 0.82rem; font-weight: 600; color: var(--cx-doux); }
.cx-champ { position: relative; }
.cx-form input { width: 100%; border: 0; border-bottom: 1px solid #C3B59C; border-radius: 0; background: transparent;
  padding: 10px 0 12px; margin-bottom: 18px; font: 400 1.02rem var(--cx-corps); color: var(--cx-texte); box-shadow: none; }
.cx-form input:focus { outline: none; border-bottom: 2px solid var(--cx-accent); padding-bottom: 11px; }
/* Le mot de passe laisse la place au bouton qui le dévoile : sans cette
   réserve, une longue saisie passe dessous et devient illisible. */
.cx-champ input { padding-right: 76px; }
.cx-oeil { position: absolute; right: 0; top: 10px; background: none; border: 0; padding: 4px 0;
  font-family: var(--cx-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--cx-accent-fonce); cursor: pointer; }
.cx-oeil:hover { text-decoration: underline; }
.cx-bouton { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; min-height: 52px;
  padding: 0 18px 0 22px; width: 100%; font: 600 0.95rem var(--cx-corps); color: #fff; background: var(--cx-encre);
  border: 1px solid var(--cx-encre); border-radius: 0; cursor: pointer; text-decoration: none; }
.cx-bouton:hover { background: var(--cx-encre-fonce); }
.cx-bouton svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round; }
.cx-bouton:disabled { opacity: 0.6; cursor: wait; }
.cx-pied { margin: 30px 0 0; display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  font-family: var(--cx-mono); font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--cx-gris); }
.cx-pied a { color: var(--cx-accent-fonce); text-decoration: none; }
.cx-pied a:hover { text-decoration: underline; }

/* **Deux colonnes supposent une fenêtre plus large que haute.**
   « Version ordinateur » sur un téléphone annonce une fenêtre d'environ
   980 px de large — au-dessus de la bascule — mais de plus de 2000 px de
   haut. Les deux colonnes restaient donc côte à côte, et le `100vh` étirait
   le vert sur toute cette hauteur : un bandeau quasi vide, le titre tout en
   bas, le formulaire perdu au milieu du parchemin.
   La proportion décide donc, autant que la largeur. Une fenêtre plus haute
   que large passe en colonnes empilées, quelle que soit sa largeur ; un
   écran d'ordinateur, toujours en paysage, garde les deux colonnes. */
@media (max-width: 860px), (max-aspect-ratio: 3 / 4) {
  .cx { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  /* `space-between` ne garantit rien quand la colonne est courte : les
     blocs finissent collés. Le `gap` pose un minimum entre eux. */
  .cx-encre { border-right: 0; border-bottom: 3px solid var(--cx-accent);
    padding-left: clamp(24px, 6vw, 40px); gap: 20px; }
  .cx-encre::before, .cx-encre::after { display: none; }
  .cx-encre h1 { font-size: 2.3rem; margin: 18px 0 12px; }
  .cx-logo-grand { height: 92px; }
  .cx-marque { gap: 10px; }
  .cx-phrase { display: none; }
  .cx-bas { margin-top: 14px; }
  .cx-papier { align-items: flex-start; padding-top: 28px; }
  .cx-tete h2 { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  .cx-fournisseur { transition: none; }
}

/* ---------------------------------------------------------------------------
   **Large et très haute : ni un ordinateur, ni un téléphone.**

   « Version ordinateur » sur un téléphone donne une fenêtre de 980 px de
   large pour plus de 2000 de haut. On l'avait d'abord empilée comme un
   téléphone : le contenu restait collé en haut à gauche d'un bandeau
   écrasé, suivi d'un désert de parchemin. C'était pire que le mal.

   À 980 px, deux colonnes tiennent très bien — ce n'est pas la largeur qui
   manquait. Le fautif était le `100vh` : il étirait la composition sur
   toute la hauteur du téléphone. On la borne donc, et on la centre. Elle se
   lit alors comme une bande posée au milieu de la page, ce qu'elle est.
   --------------------------------------------------------------------------- */
@media (min-width: 861px) and (max-aspect-ratio: 3 / 4) {
  body.cx-page { display: grid; align-content: center; min-height: 100vh; }
  .cx {
    grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
    grid-template-rows: auto;
    min-height: 0; height: min(100vh, 820px);
  }
  /* Le filet vertical et sa légende reviennent : on est en deux colonnes. */
  .cx-encre { border-right: 3px solid var(--cx-accent); border-bottom: 0;
    min-height: 0; justify-content: space-between; gap: 18px;
    padding: 44px 44px 40px 72px; }
  .cx-encre::before, .cx-encre::after { display: block; }
  .cx-encre h1 { font-size: clamp(2.5rem, 5vw, 3.6rem); margin: 0; }
  .cx-phrase { display: block; font-size: .95rem; }
  .cx-logo-grand { height: 112px; }
  .cx-marque { gap: 12px; }

  .cx-papier { align-items: center; padding: 40px clamp(22px, 3.4vw, 46px); }
  .cx-bloc { width: min(100%, 400px); }
  .cx-tete h2 { font-size: 1.8rem; }
}

/* Qui a demandé que rien ne bouge voit la page posée, d'emblée. */
@media (prefers-reduced-motion: reduce) {
  .cx-logo-eclat::before { animation: none; opacity: 0; }
  .cx-encre .cx-marque, .cx-encre > div > .cx-eyebrow, .cx-encre h1,
  .cx-encre .cx-phrase, .cx-encre .cx-bas, .cx-encre::after { animation: none; }
}