/* Styles de l'espace adhérent, panneau #compte d'index.html. --------------------------------------------------------------------------- FICHIER DE REFERENCE. Il a longtemps ete genere depuis site-backend/espace/source/espace.html ; ce generateur et sa source ont ete supprimes le 2026-09-15, l'espace adherent n'etant plus une page autonome servie par la Cloud Function. On edite donc ici, directement. Trois regles heritees de ce generateur, et chacune vient d'une panne reelle : 1. TOUT selecteur reste prefixe par « #compte ». Le site charge Bootstrap et se sert de `.card` ailleurs ; une regle nue sur `.card`, `input` ou `table` repeindrait la page entiere. 2. Les variables de couleur vivent sur `#compte`, PAS sur `:root`. Sur `:root` elles redefiniraient celles du site. 3. Le bloc `#compte` ne peint AUCUN fond. La page autonome avait un fond plat ; pose ici, il trace une bande sombre en travers du degrade du site. Les regles d'en-tete (`header`, `h1`, `.whoami`) et `main` ont ete retirees le 2026-09-15 : ces elements appartenaient a la page autonome et n'existent plus dans le panneau. */ #compte {--fond:#0f1524;--carte:#16203a;--bord:#24304f;--texte:#e8eef7; --attenue:#9fb0c9;--or:#e9c53d;--turquoise:#05c1ad;--sombre:#003340;--alerte:#f2887f} #compte * {box-sizing:border-box} #compte {margin:0;color:var(--texte);line-height:1.5; font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif} #compte .card {background:var(--carte);border:1px solid var(--bord);border-radius:10px; padding:20px 22px;margin-bottom:18px} #compte .card h2 {font-size:1rem;margin:0 0 14px;color:var(--turquoise)} #compte .grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px} /* Trois colonnes de LARGEUR EGALE, et chaque ligne centree dans la sienne. Auparavant la premiere colonne se reduisait a son contenu : le bloc « Mon adhesion » se collait au bord gauche pendant que les deux adresses se partageaient tout le reste. */ #compte #summaryZone {grid-template-columns:repeat(3,1fr);text-align:center} /* « Mon adhesion » se centre au-dessus du couple de valeurs qu'il coiffe, et non au-dessus de la carte entiere : la largeur reprend celle d'une colonne de la grille ci-dessus, gouttieres deduites (2 x 14 px pour trois colonnes). */ #compte #carte-adhesion h2 {width:calc((100% - 28px) / 3);text-align:center} #compte .bloc-adhesion {display:flex;gap:24px;flex-wrap:wrap;justify-content:center} /* Une adresse electronique ne contient aucune espace : sans ceci, elle ne peut pas revenir a la ligne et deborde de sa colonne au lieu de s'y plier. */ #compte .value.adresse {overflow-wrap:anywhere;font-size:.95rem} /* Sous cette largeur, trois colonnes deviennent illisibles : on empile. Le titre reprend alors toute la largeur — un tiers n'aurait plus de sens une fois la grille sur une seule colonne. */ @media (max-width:820px) { #compte #summaryZone {grid-template-columns:1fr} #compte #carte-adhesion h2 {width:100%} } #compte .label {font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--attenue)} #compte .value {font-size:1.05rem;margin-top:4px} #compte .value.grand {font-size:1.8rem;font-weight:600;font-variant-numeric:tabular-nums} #compte .gold {color:var(--or)} #compte .teal {color:var(--turquoise)} #compte .danger {color:var(--alerte)} #compte label {display:block;margin-bottom:6px;font-size:.9rem;color:var(--attenue)} #compte input {width:100%;background:var(--fond);border:1px solid var(--bord);border-radius:8px; color:var(--texte);padding:10px 12px;font:inherit} #compte .field {margin-bottom:14px} /* Les SELECTS, habilles comme les champs de saisie. Sans cette regle ils retombent sur `.form-select` de Bootstrap, qui les rend blancs au milieu d'une carte sombre. */ #compte select {width:100%;background:var(--fond);border:1px solid var(--bord); border-radius:8px;color:var(--texte);padding:10px 12px;font:inherit; /* Bootstrap pose `appearance:none` et dessine sa fleche en `background-image`. Notre raccourci `background` efface cette image : sans rendre l'apparence native, le selecteur n'aurait plus AUCUNE fleche, et rien ne dirait qu'il se deroule. */ -webkit-appearance:auto;-moz-appearance:auto;appearance:auto} /* Un champ et son complement sur la MEME ligne : drapeau du pays avant le selecteur, « € » apres le montant. `nowrap` est le point — celui de Bootstrap enveloppe, et le complement tombait sous le champ. */ #compte .input-group {display:flex;flex-wrap:nowrap;align-items:stretch} #compte .input-group > input, #compte .input-group > select {flex:1 1 auto;width:auto;min-width:0} #compte .input-group > .input-group-text { flex:none;display:flex;align-items:center;padding:10px 12px; background:var(--carte);border:1px solid var(--bord); color:var(--attenue);white-space:nowrap} /* Les angles ne s'arrondissent qu'aux extremites du groupe, et les bordures voisines se chevauchent pour n'en faire qu'une. */ #compte .input-group > * {border-radius:0} #compte .input-group > :first-child {border-top-left-radius:8px;border-bottom-left-radius:8px} #compte .input-group > :last-child {border-top-right-radius:8px;border-bottom-right-radius:8px} #compte .input-group > * + * {margin-left:-1px} /* Choix sur une ligne : civilite, et les cases de certification. LE PIEGE ETAIT LA REGLE CI-DESSUS. `#compte input` habille TOUS les champs : 100 % de large, un fond, une bordure, 10 px de rembourrage. Appliquee a un bouton radio ou a une case a cocher, elle en fait un rectangle geant qui pousse son intitule hors de la ligne — la civilite en etait illisible. On rend donc a ces deux-la leur apparence native, explicitement. `label` est en `display:block` plus haut : sans `inline-flex` ici, la case tomberait sur une ligne et son intitule sur la suivante. L'intitule est cliquable parce qu'il enveloppe la case — 13 px est une cible trop petite. */ #compte .label-groupe {display:block;margin-bottom:6px;font-size:.9rem; color:var(--attenue)} #compte .choix-inline {display:inline-flex;align-items:center;gap:8px; margin:0 18px 0 0;font-size:.92rem;cursor:pointer; color:var(--texte);line-height:1.35} #compte input[type="radio"], #compte input[type="checkbox"] { width:auto;min-width:0;flex:none;margin:0;padding:0; background:none;border:0;border-radius:0; accent-color:var(--turquoise)} /* Une case dont l'intitule tient sur deux lignes : la case reste en haut, alignee sur la premiere ligne du texte et non au milieu du bloc. */ #compte .choix-inline:has(> input[type="checkbox"]) {align-items:flex-start} #compte .choix-inline > input[type="checkbox"] {margin-top:3px} /* Champ de mot de passe avec bouton oeil. Le bouton est DANS le champ : pose a cote, il decalait la largeur des saisies les unes par rapport aux autres. L'`input` reserve la place a droite pour ne pas ecrire sous l'icone. */ #compte .champ-mdp {position:relative;display:block} #compte .champ-mdp input {padding-right:44px} #compte button.oeil {position:absolute;right:1px;top:1px;bottom:1px;width:40px; display:flex;align-items:center;justify-content:center;padding:0; background:transparent;border:0;border-radius:0 8px 8px 0; color:var(--attenue);cursor:pointer} #compte button.oeil:hover {color:var(--texte)} /* Une seule des deux icones a la fois : barree quand le mot de passe est cache, franche quand il est visible. */ #compte button.oeil .oeil-cacher {display:block} #compte button.oeil .oeil-montrer {display:none} #compte button.oeil[aria-pressed="true"] .oeil-cacher {display:none} #compte button.oeil[aria-pressed="true"] .oeil-montrer {display:block} #compte button {font:inherit;cursor:pointer;border-radius:8px;padding:10px 20px} #compte button.principal {background:linear-gradient(90deg,var(--sombre) 0%,var(--turquoise) 100%); border:0;color:#fff} #compte button.secondaire {background:transparent;border:1px solid var(--bord);color:var(--texte)} #compte button:disabled {opacity:.5;cursor:not-allowed} #compte button:focus-visible, #compte input:focus-visible {outline:2px solid var(--or);outline-offset:2px} #compte .actions {display:flex;gap:10px;flex-wrap:wrap} /* La ligne de boutons de la fenetre du don respire : elle suit la phrase qui annonce les bornes, et collee a elle on lit l'une dans l'autre. */ #compte .actions-don {margin-top:18px} /* Trait repris des bascules ci-dessus, pour que la rupture entre « Enregistrer » et les demarches annexes se voie. */ #compte .actions-secondaires {margin-top:14px;padding-top:14px; border-top:1px solid var(--bord)} #compte .notice {border-left:3px solid var(--or);background:rgba(233,197,61,.08);padding:12px 16px; border-radius:6px;font-size:.88rem;margin-bottom:16px} #compte .notice.danger {border-left-color:var(--alerte);background:rgba(242,136,127,.09)} #compte .statusLine {margin-top:10px;font-size:.9rem;min-height:1.3em} /* Attente de connexion : anneau aux trois quarts bleu nuit, un quart or. Les quatre bords de la bordure font exactement quatre quarts de cercle ; en peindre trois en bleu et un en or donne la proportion demandee sans dessin ni SVG. Le bleu est `--bord` et non `--sombre` : sur le fond `--carte`, le second se voit a peine, et un anneau invisible aux trois quarts n'indique plus rien. */ #compte .attente {display:flex;align-items:center;gap:10px;margin-top:12px; font-size:.9rem;color:var(--attenue)} #compte .spinner {display:inline-block;width:18px;height:18px;flex:none; border-radius:50%;border:3px solid var(--bord);border-top-color:var(--or); animation:plf-tourne .8s linear infinite} @keyframes plf-tourne {to {transform:rotate(360deg)}} /* Une animation perpetuelle est precisement ce que ce reglage demande d'eviter. On garde l'anneau, immobile : il reste lisible comme « en cours » parce qu'il est accompagne de son texte. */ @media (prefers-reduced-motion: reduce) { #compte .spinner {animation:none} } /* Ligne d'appel sous l'ecran de connexion : discrete, mais le lien doit se voir comme un lien. */ #compte .sep-inscription {margin:16px 0 0;padding-top:14px; border-top:1px solid var(--bord);font-size:.88rem;color:var(--attenue); text-align:center} #compte .sep-inscription a {color:var(--or)} #compte dialog {background:var(--carte);border:1px solid var(--bord);border-radius:14px; color:var(--texte);padding:24px;width:min(460px,calc(100vw - 32px)); box-shadow:0 18px 50px rgba(0,0,0,.5)} #compte dialog h2 {font-size:1rem;margin:0 0 16px;color:var(--turquoise)} /* Etat de reussite du dialogue mot de passe. L'anneau se remplit en 2 s, du bleu nuit vers le vert : c'est la duree avant la fermeture automatique, rendue visible. Le trace part du haut (rotation de -90 deg) parce qu'un remplissage qui commence a 3 heures se lit mal. `stroke-dasharray` vaut la circonference du cercle (2*PI*17 = 106.81) ; on anime `stroke-dashoffset` de cette valeur a zero. */ /* Etat de reussite, commun a tous les dialogues : c'est une CLASSE et non un identifiant, pour que la fenetre de reconduction reprenne le meme cadre sans le recopier. */ #compte .dialog-done {display:flex;flex-direction:column;align-items:center; gap:14px;padding:18px 0 6px;text-align:center} #compte .dialog-done p {margin:0;color:var(--texte)} /* L'attente dans un dialogue reprend EXACTEMENT la mise en page de la reussite ci-dessus : meme colonne centree, meme gouttiere, meme reserve. C'est ce qui fait que l'anneau ne saute pas quand l'un remplace l'autre. L'anneau d'attente est aussi porte a la taille de celui de la reussite : a 18 px il paraissait minuscule a cote des 52 px du second, et les deux etats n'avaient plus l'air d'appartenir a la meme fenetre. La bordure passe a 4 px pour rester aussi epaisse que le trace du SVG, qui est dessine dans un repere de 40 puis agrandi. */ #compte .dialog-busy {flex-direction:column;justify-content:center;gap:14px; padding:18px 0 6px;margin-top:0;text-align:center} #compte .dialog-busy .spinner {width:52px;height:52px;border-width:4px} #compte .ring {transform:rotate(-90deg)} #compte .ring .track {fill:none;stroke:var(--bord);stroke-width:3} #compte .ring .gauge {fill:none;stroke:var(--sombre);stroke-width:3; stroke-linecap:round;stroke-dasharray:106.81;stroke-dashoffset:106.81} /* Les bascules de la carte « Mes reglages » : reconduction, communications. Elles prennent la place d'une case a cocher, a GAUCHE de leur libelle. `flex:none` parce que `.toggle` est une boite flexible et qu'un bouton y absorbait sinon la place laissee par le texte. LA LARGEUR MINIMALE EST CE QUI LES ALIGNE. Elle est calee sur le plus long des libelles qu'un de ces boutons peut porter — « Chargement… », le temps que le serveur reponde, puis « Desactiver ». Sans elle, chaque bouton prend la largeur de son propre texte : les deux colonnes de texte ne commencent alors pas au meme endroit, et elles se decalent encore a chaque changement d'etat. Une CLASSE et non deux identifiants : la regle vaut pour toute bascule de cette carte, et la troisieme qu'on ajoutera sera alignee sans y penser — c'est precisement en l'ayant oubliee sur la seconde que le defaut est apparu. */ /* La coche d'un champ confirme. Posee DANS le champ, a droite : c'est la que le regard est deja, et cela evite une ligne de texte de plus. `pointer-events:none` pour qu'elle n'attrape pas le clic qui vise le champ. Le turquoise est deja la couleur des choses acquises dans cette page — pas de vert supplementaire a accorder au reste. */ #compte .champ-coche {position:relative} #compte .champ-coche input {padding-right:2.2rem} #compte .coche {position:absolute;right:.7rem;top:50%;transform:translateY(-50%); color:var(--turquoise);font-weight:700;pointer-events:none} /* 10.5rem et non 9 : les blocs « Adhésion » et « Dons » du 30/09 ont ajouté « Mettre en place », « Faire un don » et « Renouveler », tous plus larges que l'ancienne borne. Chacun reprenait donc sa largeur propre et les colonnes de texte repartaient d'un endroit différent à chaque rangée. La borne se cale sur le PLUS LONG libellé que ces boutons portent : la rallonger est le prix d'un libellé plus long, et c'est pourquoi on les garde courts. */ #compte .bascule {flex:none;white-space:nowrap;min-width:10.5rem;text-align:center} /* Le remplissage est anime par le script (API Web Animations) et non par une transition CSS : `#password-done` est masque jusqu'au succes, et une transition depuis un element jamais rendu est ignoree. Voir account.js. */ /* Remplissage de l'anneau au retour de Stripe. Une image-cle, et non l'API Web Animations employee ailleurs : a cet instant account.js n'est pas charge — c'est tout l'interet, la confirmation parait sans l'attendre. L'element est revele au moment ou la classe est posee, ce qui suffit a demarrer une animation (contrairement a une transition, qui exige un etat de depart deja rendu). */ @keyframes plf-remplir {to {stroke-dashoffset:0; stroke:#05c1ad}} #compte .ring .gauge.remplir-10s {animation:plf-remplir 10s linear forwards} #compte dialog::backdrop {background:rgba(3,14,24,.45);backdrop-filter:blur(3px)} #compte table {width:100%;border-collapse:collapse;font-size:.9rem} #compte th, #compte td {text-align:center;padding:8px 10px;border-bottom:1px solid var(--bord)} #compte th {color:var(--attenue);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em} /* Les montants restent en chiffres a chasse fixe pour s'aligner d'une ligne a l'autre, mais centres comme le reste : `text-align:right` les decalait de leur propre en-tete. */ #compte td.n {text-align:center;font-variant-numeric:tabular-nums} /* Aucun trait entre les bascules D'UN MEME BLOC : le filet separe les SUJETS — adhesion, dons, communications, demarches annexes — et c'est ce qui lui garde son sens. Un trait sous chaque bascule le noierait. Le premier bloc n'en porte pas : le titre de la carte le borne deja. */ #compte .bloc + .bloc {margin-top:16px;padding-top:14px; border-top:1px solid var(--bord)} #compte .bloc-titre {margin:0 0 2px;font-size:.78rem;font-weight:600; letter-spacing:.08em;text-transform:uppercase;color:var(--attenue)} /* Le dernier bloc ne porte que `.actions-secondaires`, qui trainait son propre filet : deux traits se seraient superposes. */ #compte .bloc > .actions-secondaires {margin-top:0;padding-top:0;border-top:0} #compte .toggle {display:flex;align-items:center;gap:12px;padding:10px 0} #compte .toggle input {width:auto} #compte .toggle .text {flex:1} #compte .toggle .text small {display:block;color:var(--attenue);font-size:.82rem} #compte #signin {max-width:420px;margin:60px auto} #compte .sep {display:flex;align-items:center;gap:12px;color:var(--attenue); font-size:.82rem;margin:18px 0} #compte .sep::before, #compte .sep::after {content:"";flex:1;height:1px;background:var(--bord)} #compte [hidden] {display:none !important} #compte, #compte .card, #compte .notice, #compte .statusLine, #compte label, #compte th, #compte td { color: var(--texte); } #compte .label, #compte .sep, #compte .toggle .text small { color: var(--attenue); } #compte .notice.danger, #compte .danger { color: var(--alerte); } /* Boutons secondaires (« Se déconnecter », « Mot de passe oublié ») : fond OPAQUE. Ils étaient transparents, ce qui marchait sur le fond plat de la page autonome ; dans le panneau, le dégradé du site passe au travers et le bouton n'a plus de forme. Même cause que les encarts d'avertissement. */ #compte button.secondaire { background: var(--carte); border: 1px solid var(--bord); color: var(--texte); } #compte button.secondaire:hover { background: var(--bord); } /* Les encarts du panneau ont la même teinte translucide que ceux de l'administration, et le même problème. */ #compte .notice { background: #16203a; } #compte .notice.danger { background: #2a1a1d; color: #ffd9d4; } /* Écran de connexion : « Se connecter » et « Mot de passe oublié » occupent toute la largeur de la carte et se partagent la place, au lieu de flotter à gauche à leur largeur de texte. */ #compte #signin .actions { display: flex; width: 100%; gap: 10px; } #compte #signin .actions button { flex: 1 1 0; } /* Texte d'aide sous un champ de dialogue. */ #compte .aide {margin:6px 0 0;font-size:.82rem;color:var(--attenue)} /* Prenom et nom, avec le bouton d'inversion au milieu. Le bouton se cale sur la ligne des SAISIES et non du bloc : les intitules le feraient flotter au-dessus des champs. LA FLECHE SUIT LES CHAMPS. Empiles, ils s'echangent de haut en bas et la fleche est verticale ; cote a cote, de gauche a droite et elle est horizontale. Une fleche qui montre l'autre sens que le mouvement qu'elle declenche est pire qu'une fleche sans direction. C'est une requete de CONTENEUR et non de fenetre : ce qui decide, c'est la place dont la paire dispose — ce formulaire vit dans un dialogue dont la largeur ne suit pas celle de l'ecran. Une requete de fenetre aurait fait tourner la fleche au mauvais moment. Les deux bascules — la grille et la rotation — sont dans LA MEME regle : separees, elles finiraient par se contredire, et c'est exactement le defaut qu'on corrige ici. */ #compte .zone-nom {container-type:inline-size;margin-bottom:14px} /* Etat de base : empiles. La fleche dessinee dans le balisage est verticale, elle convient telle quelle. */ #compte .paire-nom {display:grid;grid-template-columns:1fr;gap:10px; align-items:end} #compte .paire-nom .field {margin-bottom:0;min-width:0} #compte button.echange {display:flex;align-items:center;justify-content:center; width:100%;height:34px;padding:0;flex:none; background:transparent;border:1px solid var(--bord); color:var(--attenue);border-radius:8px} #compte button.echange:hover {color:var(--texte);border-color:var(--turquoise)} #compte button.echange svg {transition:transform .15s ease} /* Des que la paire a de quoi tenir sur une ligne. */ @container (min-width: 380px) { #compte .paire-nom {grid-template-columns:1fr auto 1fr} #compte button.echange {width:38px;height:40px;margin-bottom:1px} #compte button.echange svg {transform:rotate(90deg)} } @media (prefers-reduced-motion: reduce) { #compte button.echange svg {transition:none} } /* Deux champs cote a cote : telephone et identifiant Discord. */ #compte .paire {display:grid;grid-template-columns:1fr 1fr;gap:12px} #compte .paire .field {min-width:0} @media (max-width:520px) {#compte .paire {grid-template-columns:1fr}}