/* Infra Society, la page de connexion — page d'attente jusqu'au lot 6 (refonte, bloc B8, construite en avance sur la
   branche refonte-b1).

   Le dessin est celui de la page de connexion de Maël (espace-membre/pages/connexion/ de sa livraison ; design-v8.css,
   membre-v8.css, espace.css, site.css), repris à la main, avec les valeurs FINALES de sa cascade : pas d'en-tête ni de
   pied du site, un grand panneau à gauche (logo, ECTO, « Entrer dans la Society. »), une carte blanche à droite. Toutes
   les règles sont portées par body.ch-connexion (aucune règle nue, P-42).

   Différences avec la maquette, et leurs raisons (refonte/DECISIONS-A-CONSIGNER.md, P-100 ; la page de comparaison les
   liste) :
   - l'espace membre n'ouvre qu'au lot 6 (DEC-11) : aucun formulaire, aucun onglet « Se connecter / Créer un compte »,
     aucun bouton Google ou Apple ; la carte garde nos textes d'attente déjà publiés, un bouton inactif (gris : un bouton
     orange qui ne ferait rien tromperait) et « Recevoir Infra Brief », dessiné comme les boutons de Maël ;
   - les liens légaux en bas de la carte (principe 6 : chaque page les porte) ;
   - sous 810 px, un voile crème en bas du panneau, que Maël retire : sans lui, le grand titre tombe à 1,7 pour 1 sur le
     bleu (principe 14 ; 3,7 au moins avec lui) ;
   - « Entrer dans la Society. » et le titre de la carte en Switzer, graisse 550 (P-85) ;
   - ECTO cligne au survol, en CSS (chez Maël, un bouton qui le fait réagir au clic : ici, rien de focalisable qui ne
     serve à rien).
   Noms de classes : ceux de Maël, sauf sept qui existent aussi dans commun/styles/site.css (P-43) : préfixés « auth- ».
   Aucune ressource d'un autre site : les images viennent de images/ (registre images/LICENCES.md). */

body.ch-connexion { --ch-papier: #f7f7f7; font-family: var(--ch-switzer); }

/* ------------------------------------------------------------------ deux panneaux */
body.ch-connexion .auth { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; min-height: 100vh; min-height: 100svh; padding: 18px; }
body.ch-connexion .auth-panneau {
  position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(250px, 1fr) auto; align-items: start; gap: 24px; min-height: calc(100vh - 36px); min-height: calc(100svh - 36px);
  padding: 40px; border-radius: 12px; color: var(--ch-encre);
  background: url(../../../images/fonds/fond-sable-bleu-aube.jpg) center / cover;
}
body.ch-connexion .auth-panneau::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(#ffffff11, #f7f4ee40);
}
body.ch-connexion .auth-panneau .auth-photo {
  position: absolute; inset: 0; z-index: -1; opacity: .28;
  background: url(../../../images/photos/photo-eolien-iowa-wind-farms-2.jpg) center bottom / cover no-repeat;
  -webkit-mask-image: linear-gradient(transparent 20%, #000 75%);
          mask-image: linear-gradient(transparent 20%, #000 75%);
}
body.ch-connexion .auth-panneau .auth-logo { position: relative; z-index: 2; width: 110px; line-height: 0; }
body.ch-connexion .auth-panneau .auth-logo img { width: 110px; height: 56px; object-fit: contain; }
body.ch-connexion .scene-auth {
  position: relative; isolation: isolate; display: grid; place-items: center; align-self: center; width: 100%; height: 100%; min-height: 250px;
}
body.ch-connexion .auth-mascot { display: grid; place-items: center; width: min(70%, 285px); border-radius: 24px; }
body.ch-connexion .auth-ecto {
  grid-area: 1 / 1; display: block; width: 100%; max-width: 100%; height: auto; transform: rotate(-4deg);
  transition: transform .45s cubic-bezier(.2, .8, .2, 1), opacity .2s;
}
body.ch-connexion .auth-ecto-active { opacity: 0; }
body.ch-connexion .auth-panneau:hover .auth-ecto-active { opacity: 1; }
body.ch-connexion .auth-panneau:hover .auth-ecto:not(.auth-ecto-active) { opacity: 0; }
body.ch-connexion .auth-panneau .auth-texte { align-self: end; max-width: 100%; margin: 0; }
body.ch-connexion .auth-panneau .auth-titre { font: 550 clamp(36px, 3.8vw, 57px)/1.08 var(--ch-switzer); letter-spacing: -.05em; color: var(--ch-encre); }

/* ------------------------------------------------------------------ la carte */
body.ch-connexion .cote { display: grid; place-items: center; padding: 40px clamp(25px, 4vw, 72px); border-radius: 12px; background: #fff; }
body.ch-connexion .carte-auth { display: grid; gap: 36px; width: 100%; max-width: 420px; }
body.ch-connexion .auth-titre-carte { font: 550 41px/1.1 var(--ch-switzer); letter-spacing: -.045em; color: var(--ch-encre); }
body.ch-connexion .auth-chapeau { margin-top: 10px; font-size: 15px; line-height: 1.65; color: #737579; }
body.ch-connexion .actions-auth { display: grid; gap: 10px; }
body.ch-connexion .bouton-inactif {
  display: flex; align-items: center; justify-content: center; min-height: 49px; padding: 0 19px; border-radius: 30px;
  background: #ecebe7; font-size: 14px; font-weight: 500; color: #5b5d61; cursor: default;
}
body.ch-connexion .fournisseur {
  display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; padding: 0 18px;
  border: 1px solid #dddeda; border-radius: 30px; background: #fff; font-size: 14px; font-weight: 500; color: var(--ch-encre);
  transition: background .2s, border-color .2s;
}
body.ch-connexion .fournisseur:hover { background: #f5f5f3; border-color: #a6a7ab; }
body.ch-connexion .fournisseur svg { width: 17px; height: 17px; }
body.ch-connexion .connexion-legal { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12px; line-height: 1.6; color: #737579; }
body.ch-connexion .connexion-legal a { color: var(--ch-encre); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #b9b6ae; }

/* ------------------------------------------------------------------ paliers de Maël */
@media (max-width: 1100px) {
  body.ch-connexion .auth-panneau { padding: 30px; }
  body.ch-connexion .cote { padding: 40px 30px; }
  body.ch-connexion .auth-titre-carte { font-size: 35px; }
}
@media (max-width: 809px) {
  body.ch-connexion .auth { grid-template-columns: 1fr; align-content: start; gap: 12px; padding: 12px; }   /* notre carte est plus courte : les rangées ne s'étirent pas */
  body.ch-connexion .auth-panneau { grid-template-rows: auto minmax(190px, 1fr) auto; gap: 18px; min-height: 480px; padding: 25px; border-radius: 8px; }
  body.ch-connexion .auth-panneau::after { background: linear-gradient(transparent 35%, #f7f4ee66 100%); }   /* un voile crème en bas (Maël n'en met pas ici) : le titre passe de 1,7 à 3,7 pour 1 au moins (3 exigé) */
  body.ch-connexion .auth-panneau .auth-photo { -webkit-mask-image: linear-gradient(90deg, transparent, #000); mask-image: linear-gradient(90deg, transparent, #000); }
  body.ch-connexion .auth-panneau .auth-logo img { width: 92px; height: 47px; }
  body.ch-connexion .scene-auth { height: 190px; min-height: 190px; }
  body.ch-connexion .auth-mascot { width: 150px; }
  body.ch-connexion .auth-panneau .auth-titre { font-size: 36px; }
  body.ch-connexion .cote { padding: 25px 30px 35px; border-radius: 8px; }
  body.ch-connexion .carte-auth { gap: 29px; max-width: 490px; }
  body.ch-connexion .auth-titre-carte { font-size: 35px; }
}
@media (max-width: 380px) {
  body.ch-connexion .auth-panneau { padding: 23px; }
  body.ch-connexion .cote { padding: 22px; }
  body.ch-connexion .auth-titre-carte { font-size: 31px; }
  body.ch-connexion .auth-chapeau { font-size: 14px; }
  body.ch-connexion .bouton-inactif, body.ch-connexion .fournisseur { font-size: 12px; }
}

/* ------------------------------------------------------------------ « mouvement réduit » */
@media (prefers-reduced-motion: reduce) {
  body.ch-connexion .auth-ecto { transform: none; transition: none; }
}