/* HUB SSE – mise en page du portail et de la connexion (charte dans /commun/charte.css) */
.connexion { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 18px; padding: 24px 20px; }
.connexion .carte { background: var(--blanc); border: 1px solid var(--grege); border-radius: var(--rayon); padding: 28px 24px; width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 18px; }
.connexion .logo { width: 190px; height: auto; align-self: center; }
.connexion h1 { font-size: 28px; }
.connexion .sous-titre { margin: 4px 0 0; color: var(--texte2); font-size: 16px; }
.connexion .aide { margin: 0; max-width: 420px; text-align: center; color: var(--texte2); font-size: 15px; }
.connexion .petit { font-size: 13px; }
.entete { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; background: var(--blanc); border-bottom: 1px solid var(--grege); }
.entete img { height: 38px; width: auto; display: block; }
.compte { display: flex; align-items: center; gap: 12px; }
.identite { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; }
.identite strong { font-size: 15px; }
.identite span { font-size: 13px; color: var(--texte2); }
.compte .bouton { min-height: 40px; font-size: 14px; padding: 0 14px; }
.compte .bouton-menu { display: none; }
.panneau { display: none; }
.bandeau { background: var(--nuit); color: var(--blanc); padding: 22px 20px; }
.bandeau .interieur { max-width: 1120px; margin: 0 auto; display: flex; flex-direction: column; gap: 6px; }
.bandeau small { color: var(--sable); text-transform: uppercase; letter-spacing: .06em; font-weight: 500; font-size: 13px; display: none; }
.bandeau h1 { font-size: 26px; }
.bandeau p { margin: 0; color: var(--grege); font-size: 15px; }
main.liste { max-width: 1120px; margin: 0 auto; padding: 20px; display: grid; grid-template-columns: 1fr; gap: 14px; }
.outil { display: flex; gap: 14px; align-items: flex-start; background: var(--blanc); border: 1px solid var(--grege); border-radius: var(--rayon); padding: 18px; text-decoration: none; color: var(--noir); }
a.outil:hover { border-color: var(--sable); }
.outil .puce { width: 48px; height: 48px; border-radius: 12px; background: var(--grege-clair); display: flex; align-items: center; justify-content: center; flex: none; }
.outil svg { width: 26px; height: 26px; stroke: var(--noir); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.outil .texte { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.outil .ligne { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.outil .nom { font-size: 19px; font-weight: 600; }
.outil .numero { font-size: 13px; color: var(--texte2); font-weight: 500; }
.outil .desc { font-size: 15px; line-height: 1.4; color: var(--texte2); }
.etiquette { align-self: flex-start; font-size: 13px; font-weight: 500; background: var(--grege); border-radius: 999px; padding: 3px 10px; }
.outil.bientot { background: transparent; border: 1.5px dashed var(--sable); }
.outil.bientot .puce { background: var(--grege); }
.outil.bientot svg { stroke: var(--texte2); }
.outil.bientot .nom { color: var(--texte2); }
.outil.bientot .etiquette { background: transparent; border: 1px solid var(--sable); color: var(--texte2); }
.vide { grid-column: 1 / -1; }
.pied { max-width: 1120px; margin: 0 auto; padding: 8px 20px 32px; text-align: center; color: var(--texte2); font-size: 14px; }
.pied a { font-weight: 600; }
.voile { position: fixed; inset: 0; background: rgba(17, 17, 17, .55); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 10; }
.voile .carte { background: var(--blanc); border-radius: var(--rayon); padding: 24px; width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 14px; }
.voile h2 { font-size: 22px; }
.voile .actions { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 719px) {
  .compte .bouton, .compte .identite { display: none; }
  .compte .bouton-menu { display: inline-flex; }
  .panneau.ouvert { display: flex; flex-direction: column; gap: 10px; padding: 14px 20px; background: var(--blanc); border-bottom: 1px solid var(--grege); }
  .panneau .identite { display: flex; align-items: flex-start; }
  .panneau .bouton { display: inline-flex; }
}
@media (min-width: 720px) {
  .entete { padding: 16px 40px; } .entete img { height: 44px; }
  .bandeau { padding: 56px 40px; } .bandeau small { display: block; } .bandeau h1 { font-size: 44px; } .bandeau p { font-size: 18px; max-width: 620px; }
  main.liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; padding: 40px; }
  .outil { padding: 24px; }
}
.formulaire { display: flex; flex-direction: column; gap: 18px; }
.aide-mdp { margin: 0; color: var(--texte2); }