/* ═══════════════════════════════════════════════════════════════════════════
   PETANQUE BELGE (Pétanque Belge) — P-ACCES · « La porte du circuit »

   Charge depuis les cinq vues du parcours de compte : /connexion, /activer,
   /mot-de-passe-oublie, /pin-perdu, /reinitialiser (meme motif que fil.css).
   Aucune autre page ne le charge, aucune autre page ne le subit.

   POURQUOI CETTE FEUILLE EXISTE
   ~4 comptes actifs sur 453 licencies. Le parcours ci-dessous est le seul
   endroit du produit ou une erreur de mise en page se paie en licencies qui
   ne reviennent pas. Trois principes tenus ligne a ligne :

     1. La Scene derriere, la feuille devant. La photo du boulodrome passe par
        le traitement canonique (halo dore, vignettage, voile a 5 arrets,
        grain du socle) ; le formulaire, lui, est pose dessus sur un aplat
        OPAQUE — --carte. Aucun texte de ce parcours n'est jamais lu sur une
        photo. C'est ce qui rend le contraste demontrable au lieu d'etre
        espere.
     2. Cibles 48 px, champs demesures, rien sous 12 px. Public 55-75 ans,
        lunettes, souvent dehors.
     3. Zero mouvement. On remplit un formulaire : rien ne glisse, rien ne
        pulse, rien n'apparait en fondu sous le doigt (commandement 7).

   Tokens : uniquement ceux du socle (app.css § 1-8). Aucune couleur inventee.
   Les deux valeurs oklch litterales du voile sont la transcription EXACTE de
   rapport 01 § 4.5, elle-meme transcription de terrain.dart:177-192 — c'est
   ce qui rend l'unification site/app verifiable.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────── 1. LE GABARIT layouts/nu.php
   nu.php pose son gabarit dans un <style> EN LIGNE, donc HORS COUCHE : une
   regle en @layer ne peut pas le reprendre, quelle que soit sa specificite.
   Ce bloc est donc volontairement hors couche lui aussi ; il gagne par l'ordre
   des sources (cette feuille est liee apres le <head>). Il ne fait que trois
   choses : rendre les deux colonnes transparentes pour laisser voir la Scene,
   rendre la colonne de marque lisible sur elle, et remonter le premier champ
   au-dessus de la ligne de flottaison sur telephone.
   ───────────────────────────────────────────────────────────────────────── */

.portail {
  min-height: 100dvh;
  grid-template-columns: minmax(0, 1fr);
}

/* La colonne de marque devient l'EMAIL : un panneau marine translucide pose
   sur la Scene, dans les DEUX themes — exactement comme l'en-tete du site.
   C'est la doctrine « l'or ne vit que sur le marine » : l'or de la marque a
   enfin un fond qui le porte (9,1:1), au lieu de l'aplat or sur lequel il ne
   pouvait rien ecrire. */
.portail .visuel {
  position: relative;
  padding: var(--r4) var(--gouttiere);
  background: color-mix(in srgb, var(--marine-900) 86%, transparent);
  color: var(--or-500);
  border-block-end: 2px solid color-mix(in srgb, var(--or-500) 34%, transparent);
}

/* Ces deux couleurs sont posees en style EN LIGNE dans layouts/nu.php, fichier
   hors du perimetre de cet agent : !important est ici le seul levier possible.
   Sans lui, le sous-titre reste a #6B4E08 (1,3:1 sur le marine) et le pave de
   presentation a var(--bleu) — c'est-a-dire INVISIBLE en Plein Cagnard, ou le
   jeton vaut #1A2452. Defaut deja recense (rapport 07 § 2.1, ligne nu.php:50).
   A REPRENDRE : deplacer ces declarations dans nu.php, puis retirer ces deux
   regles. */
.portail .visuel a span + span { color: var(--or-300) !important; }
.portail .visuel p { color: var(--sur-panneau-2) !important; }

/* La colonne du formulaire s'efface : c'est la Scene qu'on voit derriere la
   feuille, pas un aplat de fond. */
.portail .formulaire {
  background: transparent;
  justify-content: flex-start;      /* centrer en flex rogne le haut d'une carte
                                       plus haute que le viewport : on centre par
                                       marge auto, qui ne rogne jamais. */
  padding: var(--r5) var(--gouttiere) var(--r7);
}
.portail .boite { width: min(30rem, 100%); }
.portail .formulaire .boite { margin-block: auto; }

@media (max-width: 56.24rem) {
  /* Sur telephone, la colonne de marque est une bande, pas un demi-ecran :
     le pave de presentation part, le premier champ remonte. */
  .portail .visuel p { display: none; }
}

@media (min-width: 56.25rem) {
  .portail { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .portail .visuel {
    padding: var(--r7) var(--gouttiere);
    border-block-end: 0;
    border-inline-end: 2px solid color-mix(in srgb, var(--or-500) 34%, transparent);
  }
  .portail .formulaire { padding-block: var(--r7); }
}


@layer pages {

  /* ────────────────────────────────────────────────────────── 2. LA SCENE
     Quatre couches sur la photo, transcription de rapport 01 § 4.5 :
       0 · la photo, cadree bas (object-position 50% 42%) ;
       1 · le halo dore haut-droite + le vignettage — rattache la photo a la
           marque, identique dans les deux themes ;
       2 · le voile a 5 arrets — marine qui monte en Buvette, ivoire qui monte
           en Plein Cagnard ;
       3 · le grain, deja pose par le socle sur body::before.
     La Scene est en position fixe, z-index -1 : elle ne defile pas, et les
     deux colonnes du gabarit (rendues transparentes plus haut) la laissent
     voir. Le texte, lui, n'est JAMAIS lu dessus — il est sur la feuille.
     ───────────────────────────────────────────────────────────────────── */

  .acces-scene {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    isolation: isolate;
    pointer-events: none;
    background: var(--marine-950);   /* le fond avant que la photo n'arrive */
  }
  .acces-scene picture { position: absolute; inset: 0; z-index: 0; }
  .acces-scene img {
    width: 100%;
    height: 100%;
    max-width: none;                 /* le socle borne les images a 100% : ici
                                        c'est le cadre qui borne, pas l'image */
    object-fit: cover;
    object-position: 50% 42%;
  }

  /* Le halo dore vient du haut-droite, le vignettage ferme les bords. */
  .acces-scene::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
      radial-gradient(circle at 78% 8%, oklch(80.9% .162 81.4 / .20) 0%, transparent 62%),
      radial-gradient(ellipse 100% 98% at 50% 45%, transparent 34%, oklch(9% .02 268 / .50) 100%);
  }

  /* Le voile — PLEIN CAGNARD par defaut, comme la palette du socle : un
     navigateur sans light-dark() et un ecran regle en clair voient la meme
     chose, et c'est le thema le plus sur (rapport 01 § 5.1). */
  .acces-scene::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(180deg,
      oklch(96.5% .022 87 / .10)  0%,
      oklch(96.5% .022 87 / .04) 30%,
      oklch(96.5% .022 87 / .38) 62%,
      oklch(96.5% .022 87 / .92) 86%,
      oklch(96.5% .022 87 / 1)  100%);
  }
}

/* LA BUVETTE — le voile marine. Les 5 arrets 0/.26/.52/.82/1 et les opacites
   .62/.14/.30/.86/1 sont la transcription litterale de terrain.dart:177-192
   (0x9E / 0x24 / 0x4D / 0xDB / opaque). Pas d'interpretation.
   Deux blocs, comme le socle le fait pour --grain-densite : un gradient n'est
   pas une couleur, light-dark() ne sait pas le porter. */
@media (prefers-color-scheme: dark) {
  @layer pages {
    :root:not([data-theme="cagnard"]):not([data-theme="clair"]) .acces-scene::after {
      background: linear-gradient(180deg,
        oklch(18.3% .05 270 / .62)  0%,
        oklch(18.3% .05 270 / .14) 26%,
        oklch(18.3% .05 270 / .30) 52%,
        oklch(18.3% .05 270 / .86) 82%,
        oklch(18.3% .05 270 / 1)  100%);
    }
  }
}

@layer pages {
  :root[data-theme="buvette"] .acces-scene::after,
  :root[data-theme="sombre"]  .acces-scene::after {
    background: linear-gradient(180deg,
      oklch(18.3% .05 270 / .62)  0%,
      oklch(18.3% .05 270 / .14) 26%,
      oklch(18.3% .05 270 / .30) 52%,
      oklch(18.3% .05 270 / .86) 82%,
      oklch(18.3% .05 270 / 1)  100%);
  }


  /* ─────────────────────────────────────────────────────── 3. LA FEUILLE
     Le formulaire est une feuille punaisee sur la Scene : aplat opaque,
     filet de tete (la bande, seul motif du systeme), ombre portee. Tout le
     texte du parcours vit ici, donc sur --carte, donc mesurable.
     ───────────────────────────────────────────────────────────────────── */

  .acces {
    background: var(--carte);
    border: 1px solid var(--trait);
    border-radius: var(--arrondi-2);
    box-shadow: var(--ombre-3);
    overflow: hidden;                /* clippe la bande sur les coins arrondis */
  }
  .acces-corps { padding: var(--r5) clamp(var(--r4), 5vw, var(--r5)) var(--r6); }

  /* L'enseigne : la boule d'acier et le sur-titre, sur une ligne. */
  .acces-enseigne {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 0 0 var(--r2);
  }

  /* LA BOULE. Seul objet qui brille de tout le parcours (commandement 2) :
     trois couches, recette --acier du socle. A remplacer par .boule-acier
     quand le composant du socle S2 sera pose. */
  .acces-boule {
    inline-size: 30px;
    block-size: 30px;
    flex: none;
    border-radius: 50%;
    background: var(--acier);
    box-shadow: var(--acier-ombre);
  }

  /* Plancher typographique : rien de porteur sous 12 px sur ce parcours
     (rapport 07 § 4.7 — le sur-titre etait a 11,2 px, l'etape a 11,5 px). */
  .acces .acces-surtitre,
  .acces .etapes {
    margin: 0;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--encre-2);
  }

  .acces h1 { margin-block-end: var(--r3); }
  .acces h2 {
    font-size: clamp(1.44rem, 4vw, 1.7rem);   /* Big Shoulders ne descend pas
                                                 sous 1,44 rem (discipline T2) */
    margin-block-end: var(--r3);
    color: var(--encre-accent);
  }
  .acces-chapeau {
    max-width: 44ch;
    color: var(--encre-2);
    font-size: 1rem;
  }

  /* La ligne qui separe deux intentions : « ou bien ». */
  .acces-separation {
    display: block;
    margin-block: var(--r6);
    border: 0;
    border-block-start: 1px solid var(--trait);
  }


  /* ─────────────────────────────────────── 4. LA CARTE « PREMIERE FOIS »
     Le parcours majoritaire passe DEVANT le formulaire de connexion : 449
     licencies sur 453 n'ont pas encore de mot de passe. Ce n'est pas une
     alternative, c'est la porte principale (rapport 03 § 3.9 et P10).
     Son sens est porte par son titre, pas par sa couleur.
     ───────────────────────────────────────────────────────────────────── */

  .acces-premiere {
    border: 2px solid var(--jaune);
    border-radius: var(--arrondi);
    background: var(--jaune-voile);
    padding: var(--r4);
    color: var(--encre);
  }
  .acces-premiere h2 { color: var(--encre); }
  .acces-premiere p { color: var(--encre); }

  /* Le bouton de tete : 56 px. C'est le seul bouton du site qui les merite. */
  .acces .acces-bouton-fort {
    min-height: 56px;
    font-size: 1.05rem;
    letter-spacing: .01em;
  }


  /* ─────────────────────────────────────────────────── 5. LES FORMULAIRES */

  /* Le numero de licence se lit sur une carte plastifiee et se retape a bout
     de bras : meme traitement que le code a six chiffres, en moins espace. */
  .acces .acces-licence {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: .08em;
    min-height: 54px;
    font-variant-numeric: tabular-nums;
  }

  /* L'anneau de focus etait en or : 1,66:1 sur l'ivoire, donc invisible, et
     la couche « composants » ecrasait la bonne regle du socle (rapport 07
     § 3.2 — le bloquant du parcours d'activation). La couche « pages » gagne
     sur « composants » : on rend la main a :focus-visible et a --focus, qui
     valent 13,4:1 en Plein Cagnard et 9,9:1 en Buvette. */
  .acces .champ input:focus,
  .acces .champ select:focus,
  .acces .champ textarea:focus {
    border-color: var(--focus);
    outline: 0;
  }
  .acces .champ input:focus-visible,
  .acces .champ select:focus-visible,
  .acces .champ textarea:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
  }

  /* Un champ refuse ne se signale pas par la seule couleur (1.4.1) : le trait
     change aussi de FORME. Un daltonien, un presbyte au soleil et un ecran de
     telephone a 30 % de luminosite voient tous les trois le pointille. */
  .acces .champ input:user-invalid {
    border-color: var(--rouge-bord);
    border-width: 2.5px;
    border-style: dashed;
  }

  /* La case « afficher le mot de passe » posee par acces.js : cible reelle. */
  .acces .voir-mdp { min-height: 44px; align-items: center; }
  .acces .voir-mdp label { cursor: pointer; }


  /* ────────────────────────────────────────────── 6. AVIS ET COMPTE A REBOURS
     Une SEULE region live par page, polie, presente dans le DOM des le
     rendu — jamais de role="alert" imbrique dedans (rapport 07 § 4.1).
     Le compte a rebours, lui, est POSE EN DEHORS : acces.js en reecrit le
     texte chaque seconde, et dans une region live cela valait soixante
     annonces pour un blocage d'une minute. Il est desormais annonce une
     fois, par une copie invisible placee dans la region.
     ───────────────────────────────────────────────────────────────────── */

  .acces-avis > .message { margin-block-start: var(--r4); }
  .acces-attente { margin-block-start: var(--r4); }
  .acces-precision {
    margin-block-start: var(--r2);
    font-size: .9rem;
    color: var(--encre-2);
  }


  /* ─────────────────────────────────────────────────────── 7. LES ISSUES
     Trois issues, aucune enfouie, chacune ecrite a la premiere personne :
     « je n'ai jamais cree mon acces » se reconnait, « premiere connexion »
     se devine. Cible 48 px, chevron a droite pour dire que ca mene ailleurs.
     ───────────────────────────────────────────────────────────────────── */

  .acces .issues {
    margin-block-start: var(--r5);
    padding-block-start: var(--r4);
    border-block-start: 1px solid var(--trait);
  }
  .acces .issues .acces-surtitre { margin-block-end: var(--r2); }
  .acces .issues a {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: 48px;
    padding-block: .25rem;
    font-weight: 600;
  }
  .acces .issues a .icone { margin-inline-start: auto; flex: none; opacity: .7; }

  .acces-pied {
    margin-block-start: var(--r5);
    padding-block-start: var(--r4);
    border-block-start: 1px solid var(--trait);
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1.1rem;
    font-size: .85rem;
  }
  .acces-pied a { min-height: 44px; display: inline-flex; align-items: center; }


  /* ──────────────────────────────────────────────────────────── 8. PAPIER */

  @media print {
    .acces-scene { display: none; }
    .acces { box-shadow: none; border-color: #999; }
  }
}

/* Le gabarit nu.php etant pose hors couche (§ 1), sa reprise a l'impression
   doit l'etre aussi : une regle en couche ne reprendrait pas la precedente. */
@media print {
  .portail { display: block; }
  .portail .visuel { background: none; color: #000; border: 0; }
  .portail .visuel a span + span { color: #000 !important; }
  .portail .visuel p { color: #000 !important; }
}

/* « Rester connecte » : la case et sa note, sous le mot de passe. */
@layer pages {
  .acces .acces-souvenir { margin-top: -.2rem; }
  .acces .acces-souvenir input { width: 22px; height: 22px; accent-color: var(--or-600); flex: none; }
  .acces .acces-souvenir label { font-weight: 600; cursor: pointer; }
  .acces .acces-note { margin: -.55rem 0 .2rem 2.05rem; font-size: .82rem; color: var(--encre-2); }
}
