/* Magari Connect (console et espaces) — direction visuelle de la spec § 14 (maquettes validées le 28/10/2026). */

@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("polices/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url("polices/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url("polices/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Bricolage Grotesque"; font-weight: 500; font-display: swap; src: url("polices/bricolage-grotesque-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Bricolage Grotesque"; font-weight: 700; font-display: swap; src: url("polices/bricolage-grotesque-latin-700-normal.woff2") format("woff2"); }

:root {
  --fond: #F6F5F1;
  --carte: #FFFFFF;
  --bordure: #ECEAE4;
  --bordure-champ: #DCD9D1;
  --encre: #17183B;
  --encre-2: #4A4C6A;
  --encre-3: #6B6D85;
  --accent: #4F3FD9;
  --accent-fonce: #3A2DB0;
  --accent-pale: #EEECFD;
  --marine-2: #2A2C55;
  --marine-3: #22244A;
  --menthe: #E3F5EC; --menthe-texte: #11603F;
  --peche: #FDEBDD; --peche-texte: #8A3B0A;
  --ciel: #E2F0FB; --ciel-texte: #0F4C81;
  --beurre: #FBF3D5; --beurre-texte: #6B4E00;
  --rose: #FCE7EC; --rose-texte: #8C1D3B;
  --titres: "Bricolage Grotesque", system-ui, sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--fond); color: var(--encre); font-family: Inter, system-ui, sans-serif; font-size: 15px; line-height: 1.5; }
a { color: var(--accent); }
a:hover { color: var(--accent-fonce); }

.page { display: flex; flex-wrap: wrap; min-height: 100vh; }

/* Barre latérale marine (console Magari). */
.barre { flex: 1 1 232px; max-width: 256px; background: var(--encre); color: #E9E8F5; padding: 24px 16px; display: flex; flex-direction: column; gap: 4px; }
.barre-tete { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 0 8px 24px; }
.logo { height: 40px; width: auto; }
.pastille-console { font-size: 11px; padding: 3px 8px; border-radius: 999px; background: var(--marine-2); color: #D6D3FA; }
.lien { display: flex; align-items: center; gap: 10px; padding: 11px 12px; min-height: 44px; border-radius: 12px; color: #C9C7E4; text-decoration: none; font-size: 14px; }
.lien:hover { color: #FFFFFF; background: var(--marine-3); }
.lien.actif { background: var(--marine-2); color: #FFFFFF; font-weight: 500; }
.moi { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 14px; background: var(--marine-3); }
.moi-texte { display: flex; flex-direction: column; min-width: 0; }
.moi-nom { font-size: 13px; font-weight: 600; color: #FFFFFF; }
.moi-role { font-size: 12px; color: #B9B7DA; }

.contenu { flex: 999 1 560px; min-width: 0; padding: 36px 40px; display: flex; flex-direction: column; gap: 24px; }
.entete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.titre { margin: 0; font-family: var(--titres); font-weight: 700; font-size: 32px; letter-spacing: -0.02em; line-height: 1.15; }
.titre-section { margin: 0 0 4px; font-family: var(--titres); font-weight: 700; font-size: 20px; }
.sous-titre { margin: 0; color: var(--encre-2); }
.discret { color: var(--encre-3); font-size: 13px; }
.aide { color: var(--encre-3); font-size: 12px; }

.colonnes { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.colonne-principale { flex: 3 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.colonne-laterale { flex: 2 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }

.carte { background: var(--carte); border: 1px solid var(--bordure); border-radius: 24px; padding: 24px; }
.carte-large { max-width: 640px; }
.carte-tableau { padding: 8px 8px 12px; }
.vide { text-align: left; display: flex; flex-direction: column; gap: 6px; }
.vide-titre { margin: 0; font-family: var(--titres); font-weight: 700; font-size: 18px; }

.grille-clients { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.carte-client { display: flex; flex-direction: column; gap: 14px; padding: 22px; }
.client-tete { display: flex; align-items: center; gap: 12px; }
.client-noms { display: flex; flex-direction: column; min-width: 0; }
.client-nom { font-size: 17px; font-weight: 600; }
.tuile { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-family: var(--titres); font-weight: 700; font-size: 18px; }
.tuile-beurre { background: var(--beurre); color: var(--beurre-texte); }

.pastilles { display: flex; flex-wrap: wrap; gap: 6px; }
.pastille { font-size: 12px; font-weight: 500; padding: 4px 10px; border-radius: 999px; background: #F1F0EC; color: var(--encre-2); }
.pastille-bleue { background: var(--ciel); color: var(--ciel-texte); }
.pastille-indigo { background: var(--accent-pale); color: var(--accent-fonce); }
.etat-ok { color: var(--menthe-texte); font-weight: 500; }

.avatar { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px; }
.avatar-peche { background: var(--peche); color: var(--peche-texte); }
.avatar-bleu { background: var(--ciel); color: var(--ciel-texte); }
.personne { display: flex; align-items: center; gap: 10px; }
.personne-noms { display: flex; flex-direction: column; }

.defilement { overflow-x: auto; }
.tableau { width: 100%; border-collapse: collapse; min-width: 560px; font-size: 14px; }
.tableau th { text-align: left; padding: 12px 16px; font-size: 12px; font-weight: 600; color: var(--encre-3); }
.tableau td { padding: 12px 16px; border-top: 1px solid #F0EEE8; vertical-align: middle; }
.actions { display: flex; flex-wrap: wrap; gap: 6px; }
.actions form { margin: 0; }

.formulaire { display: flex; flex-direction: column; gap: 14px; }
.champ { display: flex; flex-direction: column; gap: 6px; border: none; margin: 0; padding: 0; }
.champ label, .champ legend { font-size: 13px; font-weight: 600; padding: 0; }
.champ input[type="text"], .champ input[type="email"], .champ input[type="password"] { min-height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--bordure-champ); font: inherit; font-size: 14px; color: var(--encre); background: #FFFFFF; }
.champ input:focus-visible, .bouton:focus-visible, .lien:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.choix { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 400; min-height: 32px; }
.choix input { width: 18px; height: 18px; accent-color: var(--accent); }

.bouton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: 999px; border: none; background: var(--accent); color: #FFFFFF; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; }
.bouton:hover { background: var(--accent-fonce); color: #FFFFFF; }
.bouton-secondaire { background: #FFFFFF; color: var(--encre); border: 1px solid var(--bordure-champ); }
.bouton-secondaire:hover { background: #F6F5F1; color: var(--encre); }
.bouton-danger { background: #FFFFFF; color: var(--rose-texte); border: 1px solid #E8B4C2; }
.bouton-danger:hover { background: var(--rose); color: var(--rose-texte); }
.bouton-petit { min-height: 36px; padding: 0 14px; font-size: 13px; }

.bandeau { margin: 0; padding: 14px 18px; border-radius: 16px; font-size: 14px; }
.bandeau-succes { background: var(--menthe); color: var(--menthe-texte); }
.bandeau-info { background: var(--ciel); color: var(--ciel-texte); }
.bandeau-alerte { background: var(--peche); color: var(--peche-texte); font-weight: 500; }

.journal { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.journal-ligne { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 12px 0; border-top: 1px solid #F0EEE8; }
.journal-ligne:first-child { border-top: none; }
.journal-texte { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.erreur { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }

@media (max-width: 720px) {
  .barre { max-width: none; }
  .contenu { padding: 24px 16px; }
  .titre { font-size: 26px; }
}

/* Sous-lot 1b : fiche client, opérations, accès. */
a.carte-client { text-decoration: none; color: var(--encre); }
a.carte-client:hover { border-color: #CFCBEF; }
.retour { font-size: 13px; text-decoration: none; }
.tuile-grande { width: 60px; height: 60px; flex: 0 0 60px; border-radius: 18px; font-size: 24px; }
.pastille-menthe { background: var(--menthe); color: var(--menthe-texte); }
.pastille-rose { background: var(--rose); color: var(--rose-texte); }
.pastille-peche { background: var(--peche); color: var(--peche-texte); }
.bouton-sombre { background: var(--encre); }
.bouton-sombre:hover { background: var(--marine-2); }
.titre-dans-tableau { padding: 14px 16px 6px; margin: 0; }
.operation { display: flex; flex-direction: column; gap: 14px; }
.etapes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.etape { display: flex; gap: 12px; align-items: flex-start; }
.etape-marque { width: 22px; height: 22px; flex: 0 0 22px; border-radius: 999px; margin-top: 1px; background: var(--menthe); border: 6px solid var(--menthe); box-sizing: border-box; }
.etape-fait .etape-marque { background: var(--menthe-texte); }
.etape-deja .etape-marque { background: #FFFFFF; border-color: var(--menthe); }
.etape-info .etape-marque { background: var(--ciel-texte); border-color: var(--ciel); }
.etape-echec .etape-marque { background: var(--rose-texte); border-color: var(--rose); }
.etape-encours .etape-marque { background: #FFFFFF; border: 3px solid var(--accent); }
.etape-texte { display: flex; flex-direction: column; }
.etape-nom { font-size: 14px; font-weight: 500; }
.sans-marge { margin: 0 0 10px; }
.details { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.details div { padding: 14px; border-radius: 16px; background: var(--fond); }
.details dt { font-size: 12px; color: var(--encre-3); }
.details dd { margin: 4px 0 0; font-weight: 500; overflow-wrap: anywhere; }
.carte-danger { border-color: #F2D3DB; }
.champ select, .champ input[type="date"] { min-height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--bordure-champ); font: inherit; font-size: 14px; color: var(--encre); background: #FFFFFF; }
.liste-simple { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }

/* Sous-lot 1c : versions et vagues. */
.version-courante { display: flex; flex-direction: column; gap: 4px; }
.version-numero { font-family: var(--titres); font-weight: 700; font-size: 28px; }
.case { width: 18px; height: 18px; accent-color: var(--accent); }
.bloc { display: block; }
.pied-tableau { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px 16px 6px; }
.bouton:disabled { opacity: 0.5; cursor: not-allowed; }
.pastille-beurre { background: var(--beurre); color: var(--beurre-texte); }
.liste-vagues { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.vague { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid #F0EEE8; }
.vague:first-child { border-top: none; padding-top: 0; }
.vague-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.vague-espaces { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.vague-espaces li { display: flex; flex-direction: column; }
.actions-version { margin-bottom: 14px; }

/* Sous-lot 1d : bilan de version (ce qui change, pour qui). */
.liste-changements { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; font-size: 14px; }
.changement { display: flex; flex-direction: column; gap: 6px; padding-top: 12px; border-top: 1px solid #F0EEE8; overflow-wrap: anywhere; }
.changement:first-child { border-top: none; padding-top: 0; }
.replie { margin-top: 14px; }
.replie summary { cursor: pointer; color: var(--encre-2); font-size: 14px; padding: 12px 0; }

/* Lot 2a : espaces clients (pied de la barre, langue, connexion). */
.visuellement-cache { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.barre-pied { display: flex; flex-direction: column; gap: 6px; padding-top: 10px; }
.langue { display: flex; gap: 8px; align-items: center; padding: 0 4px; }
.langue select { flex: 1; min-height: 36px; border-radius: 10px; border: 1px solid var(--marine-2); background: var(--marine-3); color: #FFFFFF; font: inherit; font-size: 13px; padding: 0 8px; }
.lien-bouton { width: 100%; border: none; background: none; font: inherit; font-size: 14px; cursor: pointer; text-align: left; }
.connexion { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; margin: 8vh auto 0; width: 100%; }
.connexion .bouton { min-width: 240px; }
.langues { margin: 4px 0 0; font-size: 13px; }

/* Lot 2b : comptes des clients (connexion, invitation, codes de secours, équipe). */
.formulaire-connexion { width: 100%; padding: 0; }
.separation { width: 100%; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; padding-top: 18px; border-top: 1px solid var(--bordure); }
.qr { width: 196px; height: 196px; padding: 8px; background: #FFFFFF; border: 1px solid var(--bordure); border-radius: 12px; }
.qr svg { width: 100%; height: 100%; display: block; }
.cle-totp { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.cle-totp code, .codes-secours code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 15px; letter-spacing: 0.04em; }
.codes-secours { list-style: none; margin: 0; padding: 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px 16px; width: 100%; background: var(--fond); border-radius: 12px; }

/* Équipe de l'espace : pastilles sur une ligne, actions d'un compte empilées. */
.tableau .pastille { white-space: nowrap; }
.tableau td .bouton { white-space: nowrap; }
.actions-compte { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.actions-compte form { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.grille-champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px 20px; align-items: start; }
.champ-case { justify-content: flex-end; min-height: 100%; }
.separation-haut { border-top: none; padding-top: 0; padding-bottom: 18px; border-bottom: 1px solid var(--bordure); }
.remplacer summary { cursor: pointer; color: var(--accent); font-size: 14px; }
.remplacer[open] summary { margin-bottom: 12px; }

/* Connexions : une tuile par éditeur. */
.editeurs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.editeur { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; height: 100%; text-decoration: none; color: var(--encre); }
.editeur-actif:hover { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-pale); color: var(--encre); }
.editeur-inactif { opacity: 0.55; }
.editeur-inactif .editeur-logo { filter: grayscale(1); }
.editeur-logo { width: 56px; height: 56px; border-radius: 14px; object-fit: contain; background: #FFFFFF; border: 1px solid var(--bordure); }
.editeur-nom { font-family: var(--titres); font-weight: 700; font-size: 16px; }
.editeur-etat { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.editeur-bientot { background: var(--fond); color: var(--encre-3); margin-top: auto; }

/* Tuiles des fonctionnalités (espace et console) */
.tuiles-fonctions { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.tuile-fonction { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; height: 100%; text-decoration: none; color: var(--encre); padding: 20px; }
a.tuile-fonction:hover { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-pale); color: var(--encre); }
.tuile-fonction-nom { font-family: var(--titres); font-weight: 700; font-size: 16px; line-height: 1.3; }
.tuile-fonction .pastille { margin-top: auto; }
.tuile-disponible { border-style: dashed; border-color: var(--bordure-champ); }
.icone-fonction { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; }
.icone-menthe { background: var(--menthe); color: var(--menthe-texte); }
.icone-violet { background: var(--accent-pale); color: var(--accent-fonce); }
.icone-beurre { background: var(--beurre); color: var(--beurre-texte); }
.icone-ciel { background: var(--ciel); color: var(--ciel-texte); }
.titre-avec-icone { display: flex; align-items: center; gap: 14px; }

/* Filtres d'une liste (puces et recherche, par simple formulaire GET) */
.filtres { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.puce { font-size: 13px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--bordure-champ); color: var(--encre-2); text-decoration: none; background: var(--carte); }
.puce:hover { border-color: var(--accent); color: var(--encre); }
.puce[aria-current="true"] { background: var(--encre); border-color: var(--encre); color: #FFFFFF; }
.filtres form { display: flex; gap: 8px; flex: 1 1 220px; }
.filtres input[type="search"] { flex: 1; min-width: 0; }

/* Onglets d'une fiche (liens, sans script) */
.onglets { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--bordure); }
.onglet { padding: 10px 14px; font-size: 14px; color: var(--encre-2); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.onglet:hover { color: var(--encre); }
.onglet[aria-current="page"] { color: var(--encre); font-weight: 600; border-bottom-color: var(--accent); }
.onglet .compte { color: var(--encre-3); font-weight: 400; margin-left: 4px; }
.liste-fonctionnalites { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.liste-fonctionnalites > li { display: flex; flex-direction: column; gap: 6px; padding-top: 14px; border-top: 1px solid var(--bordure); }
.liste-fonctionnalites > li:first-child { border-top: none; padding-top: 0; }
.entete-carte { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.liste-actions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.liste-actions > li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--fond); }
.chiffre { font-family: var(--titres); font-weight: 700; font-size: 22px; }