/* ========================================================================== ESPACE CANDIDAT -------------------------------------------------------------------------- Feuille dédiée, chargée uniquement sur /mon-espace/. Les jetons sont redéfinis ici, sur `.afc-esp`, plutôt qu'hérités : le shell de l'espace n'utilise pas header.php, donc ni le conteneur `#page.theme-dark` ni la feuille racine du thème ne le couvrent. Les valeurs reprennent celles du thème à l'identique — l'espace doit ressembler au site, pas s'en distinguer. Le mode sombre suit la même préférence que le reste du site (localStorage `afc_theme_pref`, recopiée en `data-theme` sur par le script anti-FOUC de espace/index.php). ========================================================================== */ .afc-esp { --esp-lateral: 264px; --esp-gouttiere: 22px; /* Jetons repris du thème — mode clair. Les valeurs sont celles réellement servies au navigateur (CSS additionnel du Personnaliseur), pas celles de style.css qui n'est pas mis en file d'attente. Les quatre familles que le site laisse indéfinies (rayons, ombres, anneau de focus, voile) sont posées ici. */ --afc-bg: #f7f4ef; --afc-surface: #fffdfa; --afc-surface-2: #f3eee4; --afc-input-bg: #f9f6f1; --afc-border: #e8e2d8; --afc-border-strong: #e0d9cd; --afc-text: #2a2521; --afc-text-muted: #6a6258; --afc-text-faint: #9a9085; --afc-overlay: rgba(30, 25, 20, .55); --afc-radius: 14px; --afc-radius-lg: 18px; --afc-radius-sm: 9px; --afc-shadow: 0 4px 18px rgba(60, 45, 30, .05); --afc-shadow-md: 0 8px 22px rgba(60, 45, 30, .07); --afc-shadow-lg: 0 12px 30px rgba(60, 45, 30, .08); /* Accent : hérité du Personnaliseur (`afc-customizer-vars`, toujours imprimé) pour que l'espace suive la couleur de marque au lieu de la figer. Le repli est la valeur active du site, pas celle du thème. */ --esp-accent: var(--afc-accent, #d4243b); --esp-accent-fond: var(--afc-accent-soft, #fce4e7); --afc-focus-ring: rgba(212, 36, 59, .26); /* Couleur du texte posé SUR un aplat d'accent. En clair, le rouge de marque est assez sombre pour du blanc (5,1:1). En sombre l'accent doit s'éclaircir pour rester lisible en texte, et un aplat clair réclame alors un texte sombre — d'où ce jeton plutôt qu'un #fff figé. */ --esp-sur-accent: #ffffff; /* Accent en TEXTE sur le fond doux : le rouge de marque n'y tient que 4,2:1, sous le seuil AA. On l'assombrit. Valeur de repli figée, puis dérivée de l'accent réel là où color-mix() existe — ainsi un changement de couleur de marque reste suivi. */ --esp-accent-texte: #b31c2f; /* Couleurs de statut — propres au suivi de candidature. Chaque teinte sert à la fois de texte sur son fond doux (étiquettes, compteurs, fil d'avancement) et d'aplat portant du blanc (pastilles, jauges). Les valeurs sont donc calées sur le pire des deux cas : le vert et le bleu d'origine ne tenaient que 4,2 et 4,0 sur leur fond doux, sous le seuil AA de 4,5. */ --esp-neutre: #6a6258; --esp-neutre-fond: #efeae1; --esp-info: #267180; --esp-info-fond: #dff1f5; --esp-succes: #3a7350; --esp-succes-fond: #e2f2e8; --esp-erreur: #b23b34; --esp-erreur-fond: #fbe6e3; background: var(--afc-bg); color: var(--afc-text); font-family: var(--afc-font-body); margin: 0; } /* Mode sombre — mêmes valeurs que #page.theme-dark côté site public. */ :root[data-theme="dark"] .afc-esp { --afc-bg: #131210; --afc-surface: #1e1c18; --afc-surface-2: #252320; --afc-input-bg: #252320; --afc-border: #2e2b26; --afc-border-strong: #3d3830; --afc-text: #ede7dc; --afc-text-muted: #a89f92; --afc-text-faint: #6b6459; --afc-focus-ring: rgba(232, 92, 107, .35); --afc-overlay: rgba(0, 0, 0, .70); --afc-shadow: 0 4px 18px rgba(0, 0, 0, .30); --afc-shadow-md: 0 8px 22px rgba(0, 0, 0, .40); --afc-shadow-lg: 0 12px 30px rgba(0, 0, 0, .50); /* En sombre l'accent de marque est trop dense pour du texte : on l'éclaircit plutôt que d'hériter, tout en restant sur la même teinte. L'aplat devenant clair, son texte passe au sombre (5,5:1). */ --esp-accent: #e85c6b; --esp-accent-fond: #331519; --esp-sur-accent: #1a1512; /* Sur fond sombre l'accent éclairci passe déjà AA : rien à corriger. */ --esp-accent-texte: #e85c6b; --esp-neutre: #a89f92; --esp-neutre-fond: #2a2721; --esp-info: #6cc2d4; --esp-info-fond: #14282d; --esp-succes: #7bc397; --esp-succes-fond: #16281d; --esp-erreur: #e8776c; --esp-erreur-fond: #2e1a18; } /* Dérivation de l'accent-texte quand le navigateur sait mélanger les couleurs : on garde le lien avec la couleur de marque du Personnaliseur au lieu de figer une teinte. Sans color-mix(), le repli ci-dessus tient. */ @supports (color: color-mix(in srgb, red 50%, black)) { .afc-esp { --esp-accent-texte: color-mix(in srgb, var(--esp-accent) 80%, #000); } :root[data-theme="dark"] .afc-esp { --esp-accent-texte: var(--esp-accent); } } .afc-esp *, .afc-esp *::before, .afc-esp *::after { box-sizing: border-box; } .afc-esp-visuellement-cache { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .afc-esp-skip { position: absolute; left: -9999px; z-index: 100; padding: 10px 16px; background: var(--afc-surface); border-radius: var(--afc-radius-sm); } .afc-esp-skip:focus { left: 12px; top: 12px; } /* ========================================================================== STRUCTURE ========================================================================== */ .afc-esp-shell { display: grid; grid-template-columns: var(--esp-lateral) minmax(0, 1fr); min-height: 100vh; } .afc-esp-principal { display: flex; flex-direction: column; min-width: 0; } .afc-esp-contenu { flex: 1; padding: 26px var(--esp-gouttiere) 72px; max-width: 1180px; width: 100%; } /* ========================================================================== BARRE LATÉRALE ========================================================================== */ .afc-esp-lateral { display: flex; flex-direction: column; gap: 22px; padding: 20px 16px; background: var(--afc-surface); border-right: 1px solid var(--afc-border); position: sticky; top: 0; height: 100vh; overflow-y: auto; } .afc-esp-lateral__haut { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; } .afc-esp-marque { display: flex; flex-direction: column; gap: 1px; padding: 4px 6px; text-decoration: none; color: inherit; } .afc-esp-marque__nom { font-family: var(--afc-font-display); font-weight: 700; font-size: 17px; letter-spacing: -0.01em; } .afc-esp-marque__sous { font-size: 12px; color: var(--afc-text-faint); } .afc-esp-lateral__fermer { display: none; border: 0; background: transparent; color: var(--afc-text-muted); padding: 6px; cursor: pointer; border-radius: var(--afc-radius-sm); } .afc-esp-nav { display: flex; flex-direction: column; gap: 6px; } .afc-esp-nav__titre { margin: 12px 8px 2px; font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--afc-text-faint); } .afc-esp-nav__titre:first-child { margin-top: 0; } .afc-esp-nav__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .afc-esp-nav__lien { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: var(--afc-radius-sm); color: var(--afc-text-muted); text-decoration: none; font-size: 14.5px; font-weight: 500; transition: background .15s ease, color .15s ease; } .afc-esp-nav__lien:hover { background: var(--afc-surface-2); color: var(--afc-text); } .afc-esp-nav__lien.est-actif { background: var(--esp-accent-fond); color: var(--esp-accent-texte); font-weight: 650; } .afc-esp-nav__lien .afc-esp-icone { flex: none; } .afc-esp-nav__compteur { margin-left: auto; min-width: 21px; padding: 1px 6px; border-radius: 999px; background: var(--afc-surface-2); font-size: 11.5px; font-weight: 700; text-align: center; color: var(--afc-text-muted); } .afc-esp-nav__lien.est-actif .afc-esp-nav__compteur { background: var(--esp-accent); color: var(--esp-sur-accent); } .afc-esp-lateral__bas { margin-top: auto; display: flex; flex-direction: column; gap: 12px; } .afc-esp-completion { display: flex; flex-direction: column; gap: 7px; padding: 12px; border-radius: var(--afc-radius); background: var(--afc-surface-2); border: 1px solid var(--afc-border); text-decoration: none; color: inherit; } .afc-esp-completion:hover { border-color: var(--afc-border-strong); } .afc-esp-completion__titre { font-size: 13px; font-weight: 650; } .afc-esp-completion__barre { height: 5px; border-radius: 999px; background: var(--afc-border); overflow: hidden; } .afc-esp-completion__barre > span { display: block; height: 100%; background: var(--esp-accent); border-radius: inherit; } .afc-esp-completion__valeur { font-size: 11.5px; color: var(--afc-text-faint); line-height: 1.4; } .afc-esp-compte { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--afc-radius); border: 1px solid var(--afc-border); } .afc-esp-compte__pastille { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--esp-accent-fond); color: var(--esp-accent-texte); font-weight: 700; font-size: 14px; } .afc-esp-compte__infos { min-width: 0; display: flex; flex-direction: column; } .afc-esp-compte__nom { font-size: 13.5px; font-weight: 650; } .afc-esp-compte__email { font-size: 11.5px; color: var(--afc-text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .afc-esp-compte__sortie { margin-left: auto; color: var(--afc-text-faint); padding: 5px; border-radius: var(--afc-radius-sm); line-height: 0; } .afc-esp-compte__sortie:hover { color: var(--esp-erreur); background: var(--esp-erreur-fond); } /* ========================================================================== EN-TÊTE DE LA ZONE DE TRAVAIL ========================================================================== */ .afc-esp-entete { display: flex; align-items: center; gap: 12px; padding: 14px var(--esp-gouttiere); background: var(--afc-surface); border-bottom: 1px solid var(--afc-border); position: sticky; top: 0; z-index: 20; } .afc-esp-entete__menu { display: none; border: 1px solid var(--afc-border); background: transparent; color: var(--afc-text); border-radius: var(--afc-radius-sm); padding: 7px; cursor: pointer; } .afc-esp-entete__titre { margin: 0; font-family: var(--afc-font-display); font-size: 20px; font-weight: 700; letter-spacing: -0.015em; } .afc-esp-entete__action { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: 999px; background: var(--esp-accent); color: var(--esp-sur-accent); text-decoration: none; font-size: 14px; font-weight: 600; white-space: nowrap; } .afc-esp-entete__action:hover { filter: brightness(1.06); } /* ========================================================================== ÉLÉMENTS COMMUNS ========================================================================== */ .afc-esp-bouton { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--afc-border-strong); background: var(--afc-surface); color: var(--afc-text); font-family: inherit; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; transition: background .15s ease, border-color .15s ease, opacity .15s ease; } .afc-esp-bouton:hover { background: var(--afc-surface-2); } .afc-esp-bouton--principal { background: var(--esp-accent); border-color: var(--esp-accent); color: var(--esp-sur-accent); } .afc-esp-bouton--principal:hover { background: var(--esp-accent); filter: brightness(1.06); } .afc-esp-bouton--large { width: 100%; padding: 12px 16px; } .afc-esp-bouton[disabled] { opacity: .6; cursor: default; } .afc-esp-bouton[disabled]:hover { filter: none; } .afc-esp-lien { color: var(--esp-accent); font-size: 13.5px; font-weight: 600; text-decoration: none; } .afc-esp-lien:hover { text-decoration: underline; } .afc-esp-bloc { background: var(--afc-surface); border: 1px solid var(--afc-border); border-radius: var(--afc-radius-lg); padding: 18px; margin-bottom: 18px; } .afc-esp-bloc__entete { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .afc-esp-bloc__titre { margin: 0; display: flex; align-items: center; gap: 8px; font-family: var(--afc-font-display); font-size: 16px; font-weight: 700; } .afc-esp-bloc__titre .afc-esp-icone { color: var(--afc-text-faint); } .afc-esp-bloc__note { margin-left: auto; font-size: 12.5px; color: var(--afc-text-faint); } .afc-esp-bloc__entete .afc-esp-lien { margin-left: auto; } .afc-esp-vide { margin: 0; padding: 22px 4px; color: var(--afc-text-faint); font-size: 14px; text-align: center; } .afc-esp-vide a { color: var(--esp-accent); } .afc-esp-aide { margin: 14px 2px 0; font-size: 12.5px; color: var(--afc-text-faint); } /* Bandeaux de message */ .afc-esp-message { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--afc-radius); margin-bottom: 18px; font-size: 14px; line-height: 1.45; } .afc-esp-message__icone { flex: none; line-height: 0; padding-top: 1px; } .afc-esp-message--succes { background: var(--esp-succes-fond); color: var(--esp-succes); } .afc-esp-message--erreur { background: var(--esp-erreur-fond); color: var(--esp-erreur); } .afc-esp-message--info { background: var(--esp-info-fond); color: var(--esp-info); } /* Jetons et étiquettes */ .afc-esp-jeton { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: .01em; } .afc-esp-jeton--neutre { color: var(--esp-neutre); background: var(--esp-neutre-fond); } .afc-esp-jeton--depassee { color: var(--esp-erreur); background: var(--esp-erreur-fond); } .afc-esp-etiquette { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 650; white-space: nowrap; } .afc-esp-etiquette--neutre { color: var(--esp-neutre); background: var(--esp-neutre-fond); } .afc-esp-etiquette--accent { color: var(--esp-accent-texte); background: var(--esp-accent-fond); } .afc-esp-etiquette--info { color: var(--esp-info); background: var(--esp-info-fond); } .afc-esp-etiquette--succes { color: var(--esp-succes); background: var(--esp-succes-fond); } .afc-esp-etiquette--erreur { color: var(--esp-erreur); background: var(--esp-erreur-fond); } /* ========================================================================== TABLEAU DE BORD ========================================================================== */ .afc-esp-bonjour { margin: 0 0 20px; font-family: var(--afc-font-display); font-size: 22px; font-weight: 700; letter-spacing: -0.02em; } .afc-esp-bonjour__sous { display: block; margin-top: 4px; font-family: var(--afc-font-body); font-size: 14.5px; font-weight: 400; color: var(--afc-text-muted); } .afc-esp-demarrage { background: var(--afc-surface); border: 1px solid var(--afc-border); border-radius: var(--afc-radius-lg); padding: 44px 28px; text-align: center; max-width: 560px; margin: 8px auto; } .afc-esp-demarrage__icone { display: inline-grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--esp-accent-fond); color: var(--esp-accent); margin-bottom: 14px; } .afc-esp-demarrage__titre { margin: 0 0 8px; font-family: var(--afc-font-display); font-size: 19px; font-weight: 700; } .afc-esp-demarrage__texte { margin: 0 0 20px; color: var(--afc-text-muted); font-size: 14.5px; line-height: 1.55; } .afc-esp-demarrage__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } /* Liste des urgences */ .afc-esp-urgences { list-style: none; margin: 0; padding: 0; } .afc-esp-urgence { display: flex; align-items: center; gap: 13px; padding: 12px 4px; border-top: 1px solid var(--afc-border); } .afc-esp-urgence:first-child { border-top: 0; padding-top: 2px; } .afc-esp-urgence__delai { flex: none; min-width: 62px; padding: 6px 8px; border-radius: var(--afc-radius-sm); background: var(--esp-neutre-fond); color: var(--esp-neutre); font-size: 12.5px; font-weight: 750; text-align: center; } .afc-esp-urgence.est-critique .afc-esp-urgence__delai { background: var(--esp-erreur-fond); color: var(--esp-erreur); } .afc-esp-urgence__corps { min-width: 0; flex: 1; } .afc-esp-urgence__titre { display: block; font-size: 14.5px; font-weight: 620; color: var(--afc-text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .afc-esp-urgence__titre:hover { color: var(--esp-accent); } .afc-esp-urgence__meta { font-size: 12.5px; color: var(--afc-text-faint); } /* Les deux motifs autres que l'échéance : ils appellent une action mais ne pressent pas, d'où un repère plus discret que le compte à rebours. */ .afc-esp-urgence--non_redige .afc-esp-urgence__delai { background: var(--esp-accent-fond, var(--afc-accent-soft)); color: var(--esp-accent, var(--afc-accent)); font-size: 11.5px; } .afc-esp-urgence--sans_reponse .afc-esp-urgence__delai { background: var(--afc-surface-2); color: var(--afc-text-muted); } /* Lien d'aide sous les écrans vides : présent, jamais concurrent des actions principales qui le précèdent. */ .afc-esp-demarrage__aide { margin: 14px 0 0; font-size: 13px; } .afc-esp-demarrage__aide a { color: var(--afc-text-faint); } .afc-esp-demarrage__aide a:hover { color: var(--esp-accent, var(--afc-accent)); } /* Consigne du kanban : le glisser-déposer n'existe qu'au pointeur fin. On interroge le pointeur, pas la largeur : une tablette large reste tactile, un petit portable reste équipé d'une souris. */ .afc-esp-aide--tactile { display: none; } @media (pointer: coarse) { .afc-esp-aide--souris { display: none; } .afc-esp-aide--tactile { display: inline; } } /* Compteur de quota, au-dessus de la grille de « Découvrir » */ .afc-esp-quota { margin: 0; font-size: 12.5px; color: var(--afc-text-faint); } .afc-esp-quota.est-atteint { color: var(--esp-erreur, var(--afc-accent)); font-weight: 600; } .afc-esp-quota a { margin-left: 6px; } /* Rappels annoncés dans la fiche de candidature */ .afc-esp-rappels { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; padding: 9px 12px; border-radius: var(--afc-radius-sm); background: var(--afc-surface-2); font-size: 13px; color: var(--afc-text-muted); } .afc-esp-rappels svg { flex: none; color: var(--afc-text-faint); } .afc-esp-rappels a { margin-left: 6px; } /* Tuiles de chiffres */ .afc-esp-chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 12px; margin-bottom: 18px; } .afc-esp-tuile { display: flex; flex-direction: column; gap: 2px; padding: 16px; background: var(--afc-surface); border: 1px solid var(--afc-border); border-radius: var(--afc-radius-lg); } .afc-esp-tuile__icone { color: var(--afc-text-faint); line-height: 0; margin-bottom: 6px; } .afc-esp-tuile__valeur { font-family: var(--afc-font-display); font-size: 30px; font-weight: 750; line-height: 1.05; letter-spacing: -0.03em; } .afc-esp-tuile__valeur small { font-size: 17px; font-weight: 700; margin-left: 1px; } .afc-esp-tuile__label { font-size: 13.5px; font-weight: 600; margin-top: 3px; } .afc-esp-tuile__note { font-size: 12px; color: var(--afc-text-faint); } .afc-esp-tuile--resultat .afc-esp-tuile__valeur { color: var(--esp-succes); } .afc-esp-colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; align-items: start; } .afc-esp-colonnes .afc-esp-bloc { margin-bottom: 0; } /* Répartition par statut */ .afc-esp-repartition { list-style: none; margin: 0; padding: 0; } .afc-esp-repartition a { display: grid; grid-template-columns: 96px 1fr 34px; align-items: center; gap: 11px; padding: 8px 4px; text-decoration: none; color: inherit; border-radius: var(--afc-radius-sm); } .afc-esp-repartition a:hover { background: var(--afc-surface-2); } .afc-esp-repartition__label { font-size: 13.5px; color: var(--afc-text-muted); } .afc-esp-repartition__barre { height: 7px; border-radius: 999px; background: var(--afc-surface-2); overflow: hidden; } .afc-esp-repartition__jauge { display: block; height: 100%; border-radius: inherit; } .afc-esp-repartition__jauge--neutre { background: var(--esp-neutre); } .afc-esp-repartition__jauge--accent { background: var(--esp-accent); } .afc-esp-repartition__jauge--info { background: var(--esp-info); } .afc-esp-repartition__jauge--succes { background: var(--esp-succes); } .afc-esp-repartition__jauge--erreur { background: var(--esp-erreur); } .afc-esp-repartition__valeur { font-size: 13.5px; font-weight: 700; text-align: right; } /* Fil d'activité */ .afc-esp-activite { list-style: none; margin: 0; padding: 0; } .afc-esp-activite__entree { display: flex; gap: 12px; padding: 10px 0 10px 2px; position: relative; } .afc-esp-activite__puce { flex: none; width: 9px; height: 9px; margin-top: 5px; border-radius: 50%; background: var(--esp-accent-fond); border: 2px solid var(--esp-accent); } .afc-esp-activite__texte { margin: 0; font-size: 13.5px; font-weight: 600; } .afc-esp-activite__detail { margin: 2px 0 0; font-size: 13px; } .afc-esp-activite__detail a { color: var(--esp-accent); text-decoration: none; } .afc-esp-activite__detail a:hover { text-decoration: underline; } .afc-esp-activite__transition { margin: 3px 0 0; font-size: 12px; color: var(--afc-text-muted); } .afc-esp-activite__quand { font-size: 11.5px; color: var(--afc-text-faint); } /* ========================================================================== BARRE D'OUTILS, FILTRES, ONGLETS ========================================================================== */ .afc-esp-outils { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; } .afc-esp-bascule { display: inline-flex; padding: 3px; gap: 2px; background: var(--afc-surface-2); border-radius: 999px; } .afc-esp-bascule__option { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--afc-text-muted); text-decoration: none; } .afc-esp-bascule__option.est-actif { background: var(--afc-surface); color: var(--afc-text); box-shadow: var(--afc-shadow); } .afc-esp-recherche { display: flex; gap: 7px; margin-left: auto; } .afc-esp-recherche input[type="search"] { min-width: 210px; padding: 9px 14px; border: 1px solid var(--afc-border-strong); border-radius: 999px; background: var(--afc-input-bg); color: var(--afc-text); font-family: inherit; font-size: 14px; } .afc-esp-recherche button { padding: 9px 15px; border: 0; border-radius: 999px; background: var(--afc-surface-2); color: var(--afc-text); font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; } .afc-esp-recherche button:hover { background: var(--afc-border); } .afc-esp-filtres { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; } .afc-esp-filtres--compact { margin-bottom: 0; } .afc-esp-puce { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--afc-border); background: var(--afc-surface); color: var(--afc-text-muted); font-size: 13.5px; font-weight: 600; text-decoration: none; } .afc-esp-puce:hover { border-color: var(--afc-border-strong); color: var(--afc-text); } .afc-esp-puce span { font-size: 11.5px; font-weight: 700; color: var(--afc-text-faint); } .afc-esp-puce.est-actif { background: var(--esp-accent); border-color: var(--esp-accent); color: var(--esp-sur-accent); } .afc-esp-puce.est-actif span { color: var(--esp-sur-accent); opacity: .78; } .afc-esp-onglets { display: flex; gap: 4px; border-bottom: 1px solid var(--afc-border); margin-bottom: 16px; } .afc-esp-onglet { padding: 10px 15px; font-size: 14.5px; font-weight: 600; color: var(--afc-text-muted); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; } .afc-esp-onglet:hover { color: var(--afc-text); } .afc-esp-onglet.est-actif { color: var(--esp-accent); border-bottom-color: var(--esp-accent); } /* ========================================================================== CARTES DE CANDIDATURE ========================================================================== */ .afc-esp-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(288px, 1fr)); gap: 14px; } .afc-esp-carte { display: flex; flex-direction: column; gap: 8px; padding: 15px; background: var(--afc-surface); border: 1px solid var(--afc-border); border-radius: var(--afc-radius-lg); transition: border-color .15s ease, box-shadow .15s ease, opacity .15s ease; } .afc-esp-carte:hover { border-color: var(--afc-border-strong); box-shadow: var(--afc-shadow); } .afc-esp-carte.est-en-cours { opacity: .55; pointer-events: none; } .afc-esp-carte.est-deplacee { opacity: .4; } .afc-esp-carte__haut { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .afc-esp-carte__retirer { border: 0; background: transparent; color: var(--afc-text-faint); padding: 4px; border-radius: var(--afc-radius-sm); cursor: pointer; line-height: 0; } .afc-esp-carte__retirer:hover { color: var(--esp-erreur); background: var(--esp-erreur-fond); } .afc-esp-carte__titre { margin: 0; font-family: var(--afc-font-display); font-size: 15.5px; font-weight: 680; line-height: 1.32; letter-spacing: -0.01em; } .afc-esp-carte__titre a { color: inherit; text-decoration: none; } .afc-esp-carte__titre a:hover { color: var(--esp-accent); } .afc-esp-carte__org { margin: 0; font-size: 13px; color: var(--afc-text-muted); } .afc-esp-carte__meta { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: 12.5px; color: var(--afc-text-faint); } .afc-esp-carte__meta .est-financement { color: var(--esp-succes); font-weight: 620; } .afc-esp-carte__bas { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--afc-border); } .afc-esp-select { display: inline-flex; align-items: center; gap: 6px; } .afc-esp-select__label { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--afc-text-faint); } .afc-esp-select select, .afc-esp-champ select { padding: 6px 10px; border: 1px solid var(--afc-border-strong); border-radius: var(--afc-radius-sm); background: var(--afc-input-bg); color: var(--afc-text); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; } .afc-esp-carte__notes-bouton { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: var(--afc-text-muted); font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 4px 6px; border-radius: var(--afc-radius-sm); } .afc-esp-carte__notes-bouton:hover { background: var(--afc-surface-2); color: var(--afc-text); } .afc-esp-carte__notes { display: flex; flex-direction: column; gap: 10px; padding-top: 10px; border-top: 1px solid var(--afc-border); } .afc-esp-carte__etat { margin: 0; min-height: 15px; font-size: 12px; color: var(--esp-succes); } .afc-esp-carte__etat.est-erreur { color: var(--esp-erreur); } /* ========================================================================== KANBAN ========================================================================== */ .afc-esp-kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(268px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 10px; } .afc-esp-colonne { display: flex; flex-direction: column; min-height: 220px; background: var(--afc-surface-2); border: 1px solid var(--afc-border); border-radius: var(--afc-radius-lg); } .afc-esp-colonne.est-survolee { border-color: var(--esp-accent); background: var(--esp-accent-fond); } .afc-esp-colonne__entete { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--afc-border); } .afc-esp-colonne__pastille { width: 8px; height: 8px; border-radius: 50%; flex: none; } .afc-esp-colonne__pastille--neutre { background: var(--esp-neutre); } .afc-esp-colonne__pastille--accent { background: var(--esp-accent); } .afc-esp-colonne__pastille--info { background: var(--esp-info); } .afc-esp-colonne__pastille--succes { background: var(--esp-succes); } .afc-esp-colonne__pastille--erreur { background: var(--esp-erreur); } .afc-esp-colonne__titre { margin: 0; font-size: 13.5px; font-weight: 700; } .afc-esp-colonne__compteur { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--afc-text-faint); background: var(--afc-surface); border-radius: 999px; padding: 2px 8px; } .afc-esp-colonne__corps { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 10px; } .afc-esp-colonne__vide { margin: auto 0; text-align: center; font-size: 12.5px; color: var(--afc-text-faint); } .afc-esp-carte--kanban { cursor: grab; } .afc-esp-carte--kanban:active { cursor: grabbing; } .afc-esp-carte--kanban .afc-esp-carte__titre { font-size: 14.5px; } /* ========================================================================== DÉCOUVRIR ========================================================================== */ .afc-esp-grille--decouvrir { margin-top: 16px; } .afc-esp-decouverte { display: flex; flex-direction: column; gap: 8px; padding: 15px; background: var(--afc-surface); border: 1px solid var(--afc-border); border-radius: var(--afc-radius-lg); transition: border-color .15s ease, box-shadow .15s ease; } .afc-esp-decouverte:hover { border-color: var(--afc-border-strong); box-shadow: var(--afc-shadow); } .afc-esp-decouverte.est-suivie { border-color: var(--esp-succes); } .afc-esp-decouverte__resume { margin: 0; font-size: 13px; line-height: 1.5; color: var(--afc-text-muted); } .afc-esp-decouverte__actions { display: flex; gap: 8px; margin-top: auto; padding-top: 12px; } .afc-esp-decouverte__actions .afc-esp-bouton { flex: 1; font-size: 13.5px; padding: 8px 12px; } .afc-esp-ajout[disabled] { background: var(--esp-succes-fond); border-color: var(--esp-succes-fond); color: var(--esp-succes); opacity: 1; } /* Opportunité déjà suivie : le bouton est devenu un lien vers le dossier. Il garde la teinte « acquis » de l'état désactivé qu'il remplace, mais reste cliquable — c'est précisément ce qui manquait. */ a.afc-esp-ajout { background: var(--esp-succes-fond); border-color: var(--esp-succes-fond); color: var(--esp-succes); } a.afc-esp-ajout:hover { filter: brightness(0.97); } .afc-esp-encart { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 16px 18px; margin: 16px 0 0; background: var(--esp-info-fond); border-radius: var(--afc-radius-lg); } .afc-esp-encart__icone { color: var(--esp-info); line-height: 0; flex: none; } .afc-esp-encart > div { flex: 1; min-width: 240px; } .afc-esp-encart__titre { margin: 0 0 3px; font-size: 14.5px; font-weight: 700; } .afc-esp-encart__texte { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--afc-text-muted); } .afc-esp-pagination { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 24px; } .afc-esp-pagination__etat { font-size: 13.5px; color: var(--afc-text-faint); } /* ========================================================================== FORMULAIRES ========================================================================== */ .afc-esp-formulaire { display: flex; flex-direction: column; gap: 14px; } .afc-esp-champ { display: flex; flex-direction: column; gap: 5px; } .afc-esp-champ__label { font-size: 12.5px; font-weight: 650; color: var(--afc-text-muted); } .afc-esp-champ__aide { font-size: 12px; color: var(--afc-text-faint); line-height: 1.45; } .afc-esp-champ input[type="text"], .afc-esp-champ input[type="email"], .afc-esp-champ input[type="password"], .afc-esp-champ input[type="date"], .afc-esp-champ textarea, .afc-esp-champ select { width: 100%; padding: 10px 13px; border: 1px solid var(--afc-border-strong); border-radius: var(--afc-radius-sm); background: var(--afc-input-bg); color: var(--afc-text); font-family: inherit; font-size: 14.5px; } .afc-esp-champ textarea { resize: vertical; line-height: 1.5; } .afc-esp-champ input:focus-visible, .afc-esp-champ textarea:focus-visible, .afc-esp-champ select:focus-visible, .afc-esp-recherche input:focus-visible { outline: 3px solid var(--afc-focus-ring); outline-offset: 1px; border-color: var(--esp-accent); } .afc-esp-champ input[disabled] { opacity: .65; cursor: not-allowed; } .afc-esp-duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; } .afc-esp-groupe { border: 0; margin: 16px 0 0; padding: 0; } .afc-esp-groupe legend { padding: 0; margin-bottom: 8px; } .afc-esp-cases { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px 12px; } .afc-esp-cases--ligne { display: flex; flex-wrap: wrap; gap: 8px 18px; } .afc-esp-case { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; line-height: 1.4; cursor: pointer; } .afc-esp-case input { margin-top: 2px; accent-color: var(--esp-accent); flex: none; } .afc-esp-case--conditions { font-size: 13.5px; } .afc-esp-case--conditions a { color: var(--esp-accent); } .afc-esp-bascule-champ { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; } .afc-esp-bascule-champ input { margin-top: 3px; accent-color: var(--esp-accent); flex: none; } .afc-esp-bascule-champ__titre { display: block; font-size: 14px; font-weight: 620; } .afc-esp-formulaire__rangee { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .afc-esp-formulaire__actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 4px; } /* Piège à robots — jamais visible, jamais focusable. */ .afc-esp-piege { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; } /* ========================================================================== ÉCRANS D'AUTHENTIFICATION ========================================================================== */ .afc-esp--auth { background: var(--afc-surface-2); } .afc-esp-auth { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 40px 20px; } .afc-esp-auth__marque { font-family: var(--afc-font-display); font-size: 20px; font-weight: 700; color: var(--afc-text); text-decoration: none; letter-spacing: -0.015em; } .afc-esp-auth__carte { width: 100%; max-width: 420px; padding: 28px; background: var(--afc-surface); border: 1px solid var(--afc-border); border-radius: var(--afc-radius-lg); box-shadow: var(--afc-shadow-md); } .afc-esp-auth__titre { margin: 0 0 6px; font-family: var(--afc-font-display); font-size: 22px; font-weight: 700; letter-spacing: -0.02em; } .afc-esp-auth__sous { margin: 0 0 20px; font-size: 14px; line-height: 1.5; color: var(--afc-text-muted); } .afc-esp-auth__bascule { margin: 18px 0 0; text-align: center; font-size: 13.5px; color: var(--afc-text-muted); } .afc-esp-auth__bascule a { color: var(--esp-accent); font-weight: 650; } .afc-esp-auth__retour { margin: 0; font-size: 13px; } .afc-esp-auth__retour a { color: var(--afc-text-faint); text-decoration: none; } .afc-esp-auth__retour a:hover { color: var(--afc-text); } /* ========================================================================== RESPONSIVE Sous 1024px la barre latérale devient un tiroir : à cette largeur, 264px fixes amputent trop la zone de travail, en particulier le kanban qui a besoin de toute la place disponible. ========================================================================== */ .afc-esp-voile { position: fixed; inset: 0; z-index: 40; background: var(--afc-overlay); } @media (max-width: 1024px) { .afc-esp-shell { grid-template-columns: minmax(0, 1fr); } .afc-esp-lateral { position: fixed; inset: 0 auto 0 0; z-index: 50; width: min(84vw, var(--esp-lateral)); transform: translateX(-100%); transition: transform .22s ease; box-shadow: var(--afc-shadow-lg); } .afc-esp-lateral.est-ouverte { transform: none; } .afc-esp-lateral__fermer { display: block; } .afc-esp-entete__menu { display: inline-flex; } } @media (prefers-reduced-motion: reduce) { .afc-esp-lateral { transition: none; } } @media (max-width: 680px) { .afc-esp { --esp-gouttiere: 14px; } .afc-esp-entete__action span { display: none; } .afc-esp-entete__action { padding: 9px 11px; } .afc-esp-entete__titre { font-size: 17px; } .afc-esp-recherche { margin-left: 0; width: 100%; } .afc-esp-recherche input[type="search"] { flex: 1; min-width: 0; } .afc-esp-bonjour { font-size: 19px; } .afc-esp-grille { grid-template-columns: minmax(0, 1fr); } .afc-esp-kanban { grid-auto-columns: minmax(240px, 84vw); } .afc-esp-auth__carte { padding: 22px 18px; } .afc-esp-repartition a { grid-template-columns: 84px 1fr 30px; } } /* ========================================================================== FIL D'AVANCEMENT ========================================================================== */ .afc-esp-fil { display: flex; list-style: none; margin: 0 0 20px; padding: 0; background: var(--afc-surface); border: 1px solid var(--afc-border); border-radius: var(--afc-radius-lg); overflow: hidden; } .afc-esp-fil__etape { flex: 1; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 13px 10px; font-size: 13.5px; font-weight: 600; color: var(--afc-text-faint); border-right: 1px solid var(--afc-border); min-width: 0; } .afc-esp-fil__etape:last-child { border-right: 0; } .afc-esp-fil__puce { flex: none; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid currentColor; font-size: 11.5px; font-weight: 700; line-height: 1; } .afc-esp-fil__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .afc-esp-fil__etape.est-faite { color: var(--esp-succes); } .afc-esp-fil__etape.est-faite .afc-esp-fil__puce { background: var(--esp-succes); border-color: var(--esp-succes); color: var(--afc-surface); } .afc-esp-fil__etape.est-active { color: var(--esp-accent-texte); background: var(--esp-accent-fond); } .afc-esp-fil__etape.est-active .afc-esp-fil__puce { background: var(--esp-accent); border-color: var(--esp-accent); color: var(--esp-sur-accent); } .afc-esp-fil__etape.est-acceptee { color: var(--esp-succes); background: var(--esp-succes-fond); } .afc-esp-fil__etape.est-acceptee .afc-esp-fil__puce { background: var(--esp-succes); border-color: var(--esp-succes); } .afc-esp-fil__etape.est-refusee { color: var(--esp-erreur); background: var(--esp-erreur-fond); } .afc-esp-fil__etape.est-refusee .afc-esp-fil__puce { background: var(--esp-erreur); border-color: var(--esp-erreur); } /* ========================================================================== EN-TETE DE DOSSIER ========================================================================== */ .afc-esp-retour { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 12px; font-size: 13.5px; font-weight: 600; color: var(--afc-text-muted); text-decoration: none; } .afc-esp-retour:hover { color: var(--esp-accent-texte); } .afc-esp-dossier { display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap; padding: 18px; margin-bottom: 14px; background: var(--afc-surface); border: 1px solid var(--afc-border); border-radius: var(--afc-radius-lg); } .afc-esp-dossier__principal { flex: 1; min-width: 260px; } .afc-esp-dossier__titre { margin: 0 0 7px; font-family: var(--afc-font-display); font-size: 19px; font-weight: 700; line-height: 1.3; letter-spacing: -0.015em; } .afc-esp-dossier__meta { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--afc-text-muted); } .afc-esp-dossier__meta li { display: inline-flex; align-items: center; gap: 8px; } .afc-esp-dossier__actions { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; } /* ========================================================================== REDACTION — SOMMAIRE + SECTIONS ========================================================================== */ .afc-esp-redaction { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 18px; align-items: start; } .afc-esp-sommaire { display: flex; flex-direction: column; gap: 12px; padding: 16px; background: var(--afc-surface); border: 1px solid var(--afc-border); border-radius: var(--afc-radius-lg); position: sticky; top: 78px; max-height: calc(100vh - 96px); overflow-y: auto; } .afc-esp-sommaire__entete { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .afc-esp-sommaire__titre { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--afc-text-faint); } .afc-esp-sommaire__compte { font-size: 12.5px; font-weight: 650; color: var(--afc-text-muted); } .afc-esp-sommaire__barre { height: 5px; border-radius: 999px; background: var(--afc-surface-2); overflow: hidden; } .afc-esp-sommaire__barre > span { display: block; height: 100%; background: var(--esp-succes); border-radius: inherit; transition: width .2s ease; } .afc-esp-sommaire__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; } .afc-esp-sommaire__liste a { display: flex; align-items: flex-start; gap: 9px; padding: 7px 8px; border-radius: var(--afc-radius-sm); font-size: 13px; line-height: 1.4; color: var(--afc-text-muted); text-decoration: none; } .afc-esp-sommaire__liste a:hover { background: var(--afc-surface-2); color: var(--afc-text); } .afc-esp-sommaire__puce { flex: none; width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; border: 1.5px solid var(--afc-border-strong); } .afc-esp-sommaire__liste li.est-repondue .afc-esp-sommaire__puce { background: var(--esp-succes); border-color: var(--esp-succes); } .afc-esp-sommaire__texte { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .afc-esp-sommaire__export { display: flex; flex-direction: column; gap: 6px; padding-top: 12px; border-top: 1px solid var(--afc-border); } .afc-esp-sommaire__export .afc-esp-bouton { justify-content: flex-start; } /* Export réservé à Premium : une explication courte au-dessus du bouton, et le rappel que le texte reste récupérable en dessous. */ .afc-esp-sommaire__export-note { margin: 0; font-size: 12px; line-height: 1.45; color: var(--afc-text-faint); } .afc-esp-bouton--premium { background: var(--esp-succes-fond, var(--afc-accent-soft)); border-color: transparent; color: var(--afc-accent); font-weight: 600; } .afc-esp-bouton--premium:hover { filter: brightness(0.97); } .afc-esp-sections { display: flex; flex-direction: column; gap: 14px; } .afc-esp-section { padding: 16px; background: var(--afc-surface); border: 1px solid var(--afc-border); border-radius: var(--afc-radius-lg); scroll-margin-top: 78px; } .afc-esp-section:focus-within { border-color: var(--afc-border-strong); } .afc-esp-section__entete { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 11px; } .afc-esp-section__rang { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--afc-surface-2); color: var(--afc-text-muted); font-size: 12px; font-weight: 700; } .afc-esp-section__titre { flex: 1; margin: 0; font-family: var(--afc-font-display); font-size: 15.5px; font-weight: 680; line-height: 1.4; min-width: 0; } .afc-esp-section__outils { display: flex; gap: 2px; flex: none; } .afc-esp-icone-bouton { display: inline-grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: var(--afc-radius-sm); background: transparent; color: var(--afc-text-faint); cursor: pointer; } .afc-esp-icone-bouton:hover { background: var(--afc-surface-2); color: var(--afc-text); } .afc-esp-icone-bouton[disabled] { opacity: .35; cursor: default; } .afc-esp-icone-bouton[disabled]:hover { background: transparent; color: var(--afc-text-faint); } .afc-esp-icone-bouton--danger:hover { background: var(--esp-erreur-fond); color: var(--esp-erreur); } .afc-esp-section__reponse { width: 100%; min-height: 150px; padding: 13px 15px; border: 1px solid var(--afc-border-strong); border-radius: var(--afc-radius); background: var(--afc-input-bg); color: var(--afc-text); font-family: inherit; font-size: 14.5px; line-height: 1.65; resize: vertical; } .afc-esp-section__reponse:focus-visible { outline: 3px solid var(--afc-focus-ring); outline-offset: 1px; border-color: var(--esp-accent); } .afc-esp-section__pied { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; } .afc-esp-compteur { font-size: 12.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--afc-surface-2); color: var(--afc-text-muted); } .afc-esp-compteur--bon { background: var(--esp-succes-fond); color: var(--esp-succes); } .afc-esp-compteur--depasse { background: var(--esp-erreur-fond); color: var(--esp-erreur); } .afc-esp-compteur--court { background: var(--esp-neutre-fond); color: var(--esp-neutre); } .afc-esp-section__etat { font-size: 12px; color: var(--esp-succes); min-height: 15px; } .afc-esp-section__etat.est-erreur { color: var(--esp-erreur); } .afc-esp-section__actions { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; } .afc-esp-bouton--fin { padding: 6px 12px; font-size: 12.5px; border-radius: 999px; } .afc-esp-ajout-section { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 16px; border: 1.5px dashed var(--afc-border-strong); border-radius: var(--afc-radius-lg); background: transparent; color: var(--afc-text-muted); font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; } .afc-esp-ajout-section:hover { border-color: var(--esp-accent); color: var(--esp-accent-texte); background: var(--afc-surface); } .afc-esp-carte__rediger { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--afc-text-muted); text-decoration: none; padding: 4px 8px; border-radius: var(--afc-radius-sm); } .afc-esp-carte__rediger:hover { background: var(--afc-surface-2); color: var(--esp-accent-texte); } /* ========================================================================== BIBLIOTHEQUE DE REPONSES ========================================================================== */ .afc-esp-intro { margin: 0 0 18px; max-width: 68ch; font-size: 14.5px; line-height: 1.6; color: var(--afc-text-muted); } .afc-esp-biblio { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 18px; align-items: start; } .afc-esp-biblio__rail { display: flex; flex-direction: column; gap: 12px; padding: 16px; background: var(--afc-surface); border: 1px solid var(--afc-border); border-radius: var(--afc-radius-lg); position: sticky; top: 78px; } .afc-esp-biblio__cats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; } .afc-esp-biblio__cats a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: var(--afc-radius-sm); font-size: 13.5px; color: var(--afc-text-muted); text-decoration: none; } .afc-esp-biblio__cats a:hover { background: var(--afc-surface-2); color: var(--afc-text); } .afc-esp-biblio__cats a.est-actif { background: var(--esp-accent-fond); color: var(--esp-accent-texte); font-weight: 650; } .afc-esp-biblio__compte { flex: none; min-width: 20px; padding: 1px 7px; border-radius: 999px; background: var(--afc-surface-2); font-size: 11.5px; font-weight: 700; text-align: center; } .afc-esp-biblio__compte.est-vide { opacity: .5; } .afc-esp-biblio__corps { display: flex; flex-direction: column; gap: 12px; } .afc-esp-biblio__enseigne { margin-bottom: 2px; } .afc-esp-biblio__desc { margin: 4px 0 0; font-size: 13.5px; color: var(--afc-text-muted); } .afc-esp-entree { padding: 16px; background: var(--afc-surface); border: 1px solid var(--afc-border); border-radius: var(--afc-radius-lg); } .afc-esp-entree__entete { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; } .afc-esp-entree__question { margin: 0 0 6px; font-family: var(--afc-font-display); font-size: 15px; font-weight: 680; line-height: 1.4; } .afc-esp-entree__reponse { margin: 0; font-size: 14px; line-height: 1.6; color: var(--afc-text-muted); white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; } .afc-esp-entree__pied { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--afc-border); font-size: 12px; color: var(--afc-text-faint); } .afc-esp-amorces { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .afc-esp-amorces li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--afc-border); border-radius: var(--afc-radius); font-size: 13.5px; line-height: 1.45; } /* ========================================================================== BOITES DE DIALOGUE ========================================================================== */ .afc-esp-dialogue { width: min(94vw, 480px); /* Le navigateur centre un modal via `margin: auto`, mais le reset global de main.css (`* { margin: 0 }`) l'écrase et la boîte se colle en haut à gauche. On le rétablit explicitement. */ margin: auto; padding: 0; border: 1px solid var(--afc-border); border-radius: var(--afc-radius-lg); background: var(--afc-surface); color: var(--afc-text); box-shadow: var(--afc-shadow-lg); } .afc-esp-dialogue--large { width: min(94vw, 620px); } .afc-esp-dialogue::backdrop { background: var(--afc-overlay); } .afc-esp-dialogue__corps { display: flex; flex-direction: column; gap: 14px; padding: 20px; max-height: 86vh; overflow-y: auto; } .afc-esp-dialogue__entete { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .afc-esp-dialogue__titre { margin: 0; font-family: var(--afc-font-display); font-size: 17px; font-weight: 700; } .afc-esp-dialogue__texte { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--afc-text-muted); } .afc-esp-dialogue__erreur { margin: 0; font-size: 13px; color: var(--esp-erreur); } .afc-esp-dialogue__erreur:empty { display: none; } .afc-esp-dialogue__pied { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; padding-top: 4px; } .afc-esp-biblio-choix { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; } .afc-esp-biblio-choix button { display: flex; flex-direction: column; gap: 3px; width: 100%; padding: 12px 14px; text-align: left; border: 1px solid var(--afc-border); border-radius: var(--afc-radius); background: transparent; color: inherit; font-family: inherit; cursor: pointer; } .afc-esp-biblio-choix button:hover { border-color: var(--esp-accent); background: var(--afc-surface-2); } .afc-esp-biblio-choix__cat { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--afc-text-faint); } .afc-esp-biblio-choix__question { font-size: 14px; font-weight: 650; line-height: 1.35; } .afc-esp-biblio-choix__extrait { font-size: 12.5px; line-height: 1.45; color: var(--afc-text-muted); } /* ========================================================================== RESPONSIVE — REDACTION ET BIBLIOTHEQUE ========================================================================== */ @media (max-width: 900px) { .afc-esp-redaction, .afc-esp-biblio { grid-template-columns: minmax(0, 1fr); } /* Le sommaire cesse d'etre collant : il passe au-dessus du contenu et n'a plus de hauteur propre a contraindre. */ .afc-esp-sommaire, .afc-esp-biblio__rail { position: static; max-height: none; } /* Sur un fil a quatre etapes, seul le libelle courant tient. */ .afc-esp-fil__label { display: none; } .afc-esp-fil__etape.est-active .afc-esp-fil__label { display: inline; } } @media (max-width: 680px) { .afc-esp-section__actions { margin-left: 0; width: 100%; } .afc-esp-dossier__actions { width: 100%; } .afc-esp-entree__pied { gap: 8px; } } @media print { .afc-esp-lateral, .afc-esp-entete, .afc-esp-sommaire, .afc-esp-section__outils, .afc-esp-section__actions, .afc-esp-retour { display: none; } .afc-esp-shell, .afc-esp-redaction { display: block; } } /* ========================================================================== CHECKLIST DE PREPARATION ========================================================================== */ .afc-esp-checklist__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .afc-esp-checklist__liste .afc-esp-case { font-size: 14px; } .afc-esp-checklist .afc-esp-section__etat { margin: 10px 0 0; } /* Pied du dialogue de retour : les deux reponses ont le meme poids visuel, on ne pousse pas l'utilisateur a declarer un envoi. */ .afc-esp-dialogue__pied--retour { justify-content: stretch; } .afc-esp-dialogue__pied--retour .afc-esp-bouton { flex: 1; } /* ========================================================================== PASSERELLES KLEVA CV Aucun composant nouveau : uniquement des variantes discretes des blocs existants. L'aide complementaire ne doit jamais peser autant que le dossier lui-meme. ========================================================================== */ /* Encadre d'outil : fond neutre au lieu du bleu d'information, reserve aux messages du produit. Un liseré d'accent suffit a le signaler. */ .afc-esp-encart--outil { background: var(--afc-surface-2); border-left: 3px solid var(--esp-accent); } .afc-esp-encart--outil .afc-esp-encart__icone { color: var(--esp-accent-texte); } /* Le bouton ne s'etire pas sur toute la largeur en desktop : c'est une proposition, pas l'action attendue. */ .afc-esp-encart--outil .afc-esp-bouton { flex: none; } /* Lien d'une ligne sous les cases concernees */ .afc-esp-kleva-discret { margin: 4px 0 0 26px; /* aligne sous le libelle, pas sous la case */ line-height: 1.45; } .afc-esp-kleva-discret a { color: var(--esp-accent-texte); font-weight: 600; text-decoration: none; } .afc-esp-kleva-discret a:hover { text-decoration: underline; } /* Liste du widget « Outils recommandes » */ .afc-esp-kleva-liste { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; color: var(--afc-text-muted); } .afc-esp-kleva-liste li { display: flex; align-items: baseline; gap: 8px; } .afc-esp-kleva-liste li::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--esp-accent); } @media (max-width: 680px) { /* En colonne, le bouton reprend toute la largeur : plus de cible et plus de lisibilite qu'un bouton isole a droite. */ .afc-esp-encart--outil .afc-esp-bouton { flex: 1 1 100%; justify-content: center; } .afc-esp-kleva-discret { margin-left: 0; } } /* ========================================================================== PREMIUM — dans l'espace candidat Variantes des composants existants uniquement : encart, bloc, etiquette. Rien de nouveau. ========================================================================== */ /* Invitation a passer Premium : meme forme que l'encart Kleva, teinte d'accent pour la distinguer d'une simple aide. */ .afc-esp-encart--premium { background: var(--esp-accent-fond); border-left: 3px solid var(--esp-accent); } .afc-esp-encart--premium .afc-esp-encart__icone { color: var(--esp-accent-texte); } .afc-esp-encart--premium .afc-esp-bouton { flex: none; } /* Fonctionnalite reservee : la carte garde le gabarit d'un widget du tableau de bord, en retrait. */ .afc-premium-verrou { border-style: dashed; } .afc-premium-verrou .afc-esp-bloc__note { padding: 2px 9px; border-radius: 999px; background: var(--esp-accent-fond); color: var(--esp-accent-texte); font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; } .afc-premium-verrou__action { margin-top: 14px; } /* Badge de plan, colle au nom du compte */ .afc-premium-badge { margin-left: 6px; font-size: 10.5px; padding: 1px 7px; vertical-align: middle; } @media (max-width: 680px) { .afc-esp-encart--premium .afc-esp-bouton { flex: 1 1 100%; justify-content: center; } } /* ========================================================================== PAGE DE REGLAGES (Mon profil) Reutilise la grille et le rail de la bibliotheque de reponses. Seules les differences propres aux reglages sont ecrites ici. ========================================================================== */ /* Le rail des reglages porte des icones, contrairement a celui des rubriques de la bibliotheque. */ .afc-esp-reglages .afc-esp-biblio__cats ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; } .afc-esp-reglages__lien { display: inline-flex; align-items: center; gap: 10px; } .afc-esp-reglages__lien .afc-esp-icone { flex: none; opacity: .75; } .afc-esp-reglages .est-actif .afc-esp-reglages__lien .afc-esp-icone { opacity: 1; } /* Resume en puces (date d'inscription, plan, quota) */ .afc-esp-reglages__resume { gap: 8px 16px; font-size: 13px; } .afc-esp-reglages__resume li { display: inline-flex; align-items: center; gap: 6px; } /* Le formulaire prend l'habillage d'un bloc : un seul cadre, pas deux. */ .afc-esp-reglages .afc-esp-formulaire.afc-esp-bloc { gap: 16px; } /* --- Historique des paiements --- */ .afc-esp-paiements { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .afc-esp-paiements li { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 11px 2px; border-top: 1px solid var(--afc-border); font-size: 13.5px; } .afc-esp-paiements li:first-child { border-top: 0; } .afc-esp-paiements__date { color: var(--afc-text-muted); min-width: 92px; } .afc-esp-paiements__montant { font-weight: 700; } .afc-esp-paiements .afc-esp-lien { margin-left: auto; } /* --- Apparence --- */ /* Le selecteur vient de l'en-tete public : dans l'espace il doit respirer davantage et ne pas s'etirer sur toute la largeur. */ .afc-esp-apparence { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--afc-surface-2); } .afc-esp-apparence .afc-theme-opt { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border: 0; border-radius: 999px; background: transparent; color: var(--afc-text-muted); font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; } .afc-esp-apparence .afc-theme-opt:hover { color: var(--afc-text); } .afc-esp-apparence .afc-theme-opt.is-active, .afc-esp-apparence .afc-theme-opt[aria-pressed="true"] { background: var(--afc-surface); color: var(--afc-text); box-shadow: var(--afc-shadow); } /* --- Zone dangereuse --- */ .afc-esp-danger { border-color: var(--esp-erreur); } .afc-esp-danger .afc-esp-bloc__titre { color: var(--esp-erreur); } .afc-esp-danger .afc-esp-bloc__titre .afc-esp-icone { color: var(--esp-erreur); } .afc-esp-danger__form { margin-top: 16px; } .afc-esp-bouton--danger { background: var(--esp-erreur); border-color: var(--esp-erreur); color: #fff; } .afc-esp-bouton--danger:hover { background: var(--esp-erreur); filter: brightness(1.06); } /* Desactive tant que la confirmation ne correspond pas : le bouton reste visible, mais visiblement hors d'atteinte. */ .afc-esp-bouton--danger[disabled] { background: transparent; border-color: var(--afc-border-strong); color: var(--afc-text-faint); cursor: not-allowed; } @media (max-width: 680px) { .afc-esp-apparence { display: flex; width: 100%; } .afc-esp-apparence .afc-theme-opt { flex: 1; justify-content: center; padding: 9px 8px; } .afc-esp-paiements li { gap: 8px; } .afc-esp-paiements .afc-esp-lien { margin-left: 0; } }