/* ================================================================================================= CONNEXION A L'EXTRANET PRODUCTEUR — page pleine a deux volets. ================================================================================================= POURQUOI CE FICHIER. La page de connexion portait l'habillage du theme Velzon : fond photo de nuit, particules, accents JAUNES (`btn-warning`, #F7B84B). L'extranet, lui, parle une autre langue — bandeau orange #EB7224, fond clair, cartes blanches. Un producteur voyait donc un ecran qui n'annoncait pas celui qu'il allait ouvrir. ⚠️ LA FEUILLE EST CHARGEE PAR LA VUE, PAS PAR LE LAYOUT. `layout/login` sert AUSSI le login du back-office, l'ecran `access` et la verification a deux facteurs : le repeindre changerait trois ecrans qui n'ont rien demande. Tout est donc prefixe `.exl-*` et ne s'applique qu'a cette vue. ⚠️ LES JETONS VIENNENT DE `css/core/agri-dash.css` (`--agd-*`), chargee juste avant celle-ci. Cette feuille n'en redefinit AUCUN : la palette a une seule source, et le volet orange d'ici vieillit avec le bandeau de `extranet-shell.css` — ils partagent la meme recette de degrade, volontairement. `agri-dash.css` n'a aucun selecteur global (tout est scope `.agri-dash-*`), la charger ici n'apporte donc que les variables. ================================================================================================= */ /* Le layout de connexion ne pose rien sur : c'est cette page qui prend tout l'ecran. */ body:has(.exl-page) { margin: 0; background: var(--agd-surface); } .exl-page { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; font-family: inherit; color: var(--agd-text); } /* ------------------------------------------------------------------------------------------------- LE VOLET ORANGE ------------------------------------------------------------------------------------------------- */ /* Meme recette que `[data-shell="extranet"] #page-topbar` : couleur pleine + degrade radial fait de blancs et de noirs TRANSPARENTS. Ecrit ainsi, il garde son relief quelle que soit la teinte de dessous — c'est ce qui permettra, le jour venu, d'y poser une couleur de societe sans rien casser. */ .exl-hero { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 26px; padding: 56px clamp(32px, 6vw, 88px); background-color: var(--agd-primary); background-image: radial-gradient(120% 220% at 88% -40%, rgba(255, 255, 255, .32) 0%, rgba(255, 255, 255, .10) 36%, rgba(0, 0, 0, .05) 70%, rgba(0, 0, 0, .16) 100%); color: #fff; overflow: hidden; } /* Un halo tres doux, pour que l'aplat ne soit pas plat. */ .exl-hero::after { content: ""; position: absolute; right: -120px; bottom: -140px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, 0) 70%); pointer-events: none; } /* Le GRAIN pointille, repris tel quel de `.agri-dash-hero::before` (agri-dash.css) : c'est la texture du hero du tableau de bord, et les deux ecrans doivent se ressembler de pres. */ .exl-hero::before { content: ""; position: absolute; inset: 0; opacity: .14; pointer-events: none; background-image: radial-gradient(circle at 20% 30%, #fff 0 1px, transparent 1.4px), radial-gradient(circle at 70% 60%, #fff 0 1px, transparent 1.4px); background-size: 26px 26px, 34px 34px; } /* ------------------------------------------------------------------------------------------------- LES EPIS EN FILIGRANE ------------------------------------------------------------------------------------------------- Blanc translucide, en bas a droite du volet. Le hero du tableau de bord pose le meme motif avec le glyphe `fa-wheat-awn` ; ici il est dessine en SVG faute de Font Awesome sur ce layout (cf. la vue). Pose en `position: absolute` SOUS le contenu — le texte reste au premier plan sans avoir besoin d'un z-index sur chaque element. */ .exl-epis { position: absolute; right: -34px; bottom: -26px; width: min(58%, 380px); height: auto; fill: #fff; stroke: #fff; opacity: .13; pointer-events: none; z-index: 0; } .exl-hero > :not(.exl-epis) { position: relative; z-index: 1; } /* ⚠️ `align-self` EST INDISPENSABLE, PAS DECORATIF. `.exl-hero` est un conteneur flex en colonne : son `align-items` vaut `stretch` par defaut, et une image qui s'etire sur toute la largeur de la colonne voit son `width: auto` resolu a cette largeur. Mesure avant correction : rendu 547 x 54 px pour un fichier de 389 x 64 — un rapport de 10,1 au lieu de 6,1, soit 67 % d'etirement horizontal. Le mode mobile y echappait par hasard, sa regle `align-items: center` empechant l'etirement. ⚠️ `logo.naturalWidth > 0` ne dit QUE « le fichier est charge » : il faut comparer les RAPPORTS. */ .exl-logo { height: 54px; width: auto; align-self: flex-start; max-width: 100%; } /* ⚠️ `color` EST POSE EXPLICITEMENT, pas herite de `.exl-hero`. Le theme Velzon (`app.css`, chargee par `layout/login`) donne une couleur propre aux titres : une regle d'element bat l'heritage, et le titre ressortait sombre sur l'orange — constate en capture, pas suppose. */ .exl-hero h1 { margin: 0; font-size: clamp(26px, 3vw, 34px); font-weight: 700; line-height: 1.2; letter-spacing: -.01em; color: #fff; } .exl-hero p { margin: 0; font-size: 15.5px; line-height: 1.55; color: rgba(255, 255, 255, .90); max-width: 46ch; } /* Les trois reperes : ce que le producteur vient chercher. Pastilles de verre du bandeau extranet. */ .exl-points { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; } .exl-points li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 15px; font-size: 13.5px; font-weight: 500; border-radius: 999px; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .26); backdrop-filter: blur(3px); } .exl-points i { font-size: 15px; } /* ------------------------------------------------------------------------------------------------- LE VOLET FORMULAIRE ------------------------------------------------------------------------------------------------- */ .exl-form { display: flex; flex-direction: column; justify-content: center; padding: 48px clamp(24px, 5vw, 72px); background: var(--agd-surface); } .exl-box { width: 100%; max-width: 400px; margin: 0 auto; } .exl-box h2 { margin: 0 0 4px; font-size: 22px; font-weight: 700; color: var(--agd-text); } .exl-box .exl-sub { margin: 0 0 28px; font-size: 14px; color: var(--agd-mut); } .exl-champ { margin-bottom: 18px; } .exl-champ label { display: block; margin-bottom: 6px; font-size: 13.5px; font-weight: 500; color: var(--agd-text); } .exl-champ .exl-saisie { position: relative; display: flex; } .exl-champ input { width: 100%; padding: 12px 14px; font-size: 15px; color: var(--agd-text); background: var(--agd-surface); border: 1px solid var(--agd-border); border-radius: 10px; outline: 0; transition: border-color .12s, box-shadow .12s; } .exl-champ input::placeholder { color: var(--agd-soft); } .exl-champ input:focus { border-color: var(--agd-primary); box-shadow: 0 0 0 3px rgba(235, 114, 36, .16); } /* L'oeil : un vrai bouton, pose PAR-DESSUS le champ sans le retrecir. */ .exl-oeil { position: absolute; top: 0; right: 0; height: 100%; width: 44px; display: flex; align-items: center; justify-content: center; background: none; border: 0; color: var(--agd-soft); cursor: pointer; } .exl-oeil:hover { color: var(--agd-primary); } .exl-champ:has(.exl-oeil) input { padding-right: 46px; } .exl-ligne { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .exl-oubli { font-size: 13px; color: var(--agd-mut); text-decoration: none; } .exl-oubli:hover { color: var(--agd-primary); text-decoration: underline; } .exl-valider { width: 100%; margin-top: 8px; padding: 13px 18px; font-size: 15px; font-weight: 600; color: #fff; background: var(--agd-primary); border: 0; border-radius: 10px; cursor: pointer; transition: background .12s, box-shadow .12s; } .exl-valider:hover { background: var(--agd-primary-d); box-shadow: var(--agd-shadow); } .exl-valider:focus-visible { outline: 3px solid rgba(235, 114, 36, .35); outline-offset: 2px; } .exl-erreur { margin-bottom: 20px; padding: 11px 14px; font-size: 13.5px; color: var(--agd-danger); background: #fdecec; border: 1px solid #f6cccc; border-radius: 10px; } /* Confirmation de l'ecran « mot de passe oublie ». Meme boite que `.exl-erreur`, couleurs de la charte : les jetons `--agd-success*` viennent d'agri-dash.css, charge par les deux vues. */ .exl-succes { margin-bottom: 20px; padding: 11px 14px; font-size: 13.5px; color: var(--agd-success); background: var(--agd-success-soft); border: 1px solid #bfe0cd; border-radius: 10px; } /* « Retour a la connexion ». Meme discretion que le lien « Mot de passe oublie ? » d'en face — les deux ecrans se repondent, aucun des deux ne doit crier plus fort que son bouton. */ .exl-retour { margin: 18px 0 0; font-size: 13px; text-align: center; } .exl-retour a { color: var(--agd-mut); text-decoration: none; } .exl-retour a:hover { color: var(--agd-primary); text-decoration: underline; } .exl-pied { margin-top: 34px; font-size: 12.5px; color: var(--agd-soft); text-align: center; } /* ------------------------------------------------------------------------------------------------- SOUS 992 px : LE VOLET DEVIENT UN BANDEAU ------------------------------------------------------------------------------------------------- */ /* Deux colonnes sur un telephone donneraient deux moities inutilisables. Le volet orange se replie en en-tete court — la marque reste, la place va au formulaire. */ @media (max-width: 991.98px) { /* ⚠️ `grid-template-rows: auto 1fr` ET PAS SEULEMENT UNE COLONNE. Sans les rangees, les deux blocs se partageaient la hauteur de l'ecran : le bandeau faisait un tiers de la page pour un logo et un titre — constate en capture a 414 px. Il epouse desormais son contenu, le formulaire prend le reste. */ .exl-page { grid-template-columns: 1fr; grid-template-rows: auto 1fr; min-height: 100vh; } .exl-hero { gap: 12px; padding: 26px 24px 24px; text-align: center; align-items: center; } .exl-logo { align-self: center; } /* Ni halo ni epis : dans un bandeau de 130 px, le motif passe DERRIERE le logo et ne se lit plus comme un decor mais comme un accident — constate en capture a 414 px. */ .exl-hero::after, .exl-hero::before, .exl-epis { display: none; } .exl-hero h1 { font-size: 21px; } .exl-hero p, .exl-points { display: none; } /* l'argumentaire n'a pas sa place sur 414 px */ .exl-logo { height: 42px; } /* Le formulaire commence sous le bandeau au lieu d'etre centre dans le vide restant. */ .exl-form { justify-content: flex-start; padding: 34px 24px 48px; } }