/* =====================================================================================
   MDR — direction artistique alignée sur l'Atelier (proposition du 17/10/2026).
   Chargé APRÈS style.css : ne fait que redéfinir les couleurs, la police et la forme des boutons.
   Deux thèmes : clair (par défaut, comme l'Atelier) et sombre (html[data-theme="sombre"]), choix gardé dans ce navigateur.
   ===================================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700&display=swap");

:root {
  color-scheme: light;
  --fond: #f4f4f5;            /* fond de page */
  --carte: #ffffff;           /* blocs */
  --carte-2: #f1f1f2;
  --encre: #151617;
  --encre-2: #6a6e73;
  --accent: #1f6fb2;          /* bleu de l'Atelier */
  --accent-fonce: #185a91;
  --ok: #2e9e4f;
  --alerte: #d9822b;
  --bord: #e3e4e6;
  --rouge-atelier: #ff4b2b;   /* signature : logo, actions à frais ou longues */
  --sur-encre: #ffffff;
  --ombre: 0 1px 2px rgba(21, 22, 23, .06), 0 4px 14px rgba(21, 22, 23, .06);
}
html[data-theme="sombre"] {
  color-scheme: dark;
  --fond: #14181e;
  --carte: #1c2129;
  --carte-2: #232934;
  --encre: #e6e9ee;
  --encre-2: #9aa3af;
  --accent: #5aa9e6;
  --accent-fonce: #7dbcec;
  --ok: #3ecf8e;
  --alerte: #e0873a;
  --bord: #2c333e;
  --sur-encre: #14181e;
  --ombre: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 18px rgba(0, 0, 0, .25);
}
html[data-theme="sombre"] .btn-noir, html[data-theme="sombre"] button.principal { background: var(--encre); color: var(--sur-encre); }

body { font-family: "Hanken Grotesk", "Segoe UI", system-ui, sans-serif; background: var(--fond); color: var(--encre); }
input, select, textarea, button { font-family: inherit; }

/* En-tête : logo à gauche, onglets en bulles au centre, actions et compte à droite (comme la barre de projet de l'Atelier) */
header { background: var(--carte); border-bottom: 1px solid var(--bord); padding: 10px 24px; gap: 18px; min-height: 64px; box-shadow: var(--ombre); }
header h1 { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.2px; margin: 0; white-space: nowrap; }
header h1 span { color: var(--rouge-atelier); }
nav { gap: 4px; background: var(--carte-2); border: 1px solid var(--bord); border-radius: 999px; padding: 4px; margin: 0 auto; }
nav a { padding: 7px 16px; border: 0; border-radius: 999px; font-size: 0.85rem; font-weight: 600; color: var(--encre-2); white-space: nowrap; }
nav a:hover { color: var(--encre); background: transparent; }
nav a.actif { color: var(--sur-encre); background: var(--encre); border: 0; }

/* Boutons : bulles, comme l'Atelier ; action principale pleine (encre), secondaire en contour */
button, .btn { border-radius: 999px; }
.btn-synchro { background: var(--carte); color: var(--encre); border: 1px solid var(--rouge-atelier); border-radius: 999px; padding: 7px 16px; font-weight: 600; box-shadow: var(--ombre); }
.btn-synchro:hover { background: var(--carte); color: var(--rouge-atelier); }
.btn-synchro.occupe { opacity: 1; color: var(--encre-2); border-color: var(--bord); cursor: progress;
  background: linear-gradient(90deg, var(--carte) 0%, var(--carte-2) 50%, var(--carte) 100%) 0 0 / 200% 100%; animation: mdr-attente 1.4s linear infinite; }
@keyframes mdr-attente { to { background-position: -200% 0; } }

.carte { background: var(--carte); border: 1px solid var(--bord); border-radius: 16px; box-shadow: var(--ombre); }
h2 { font-weight: 700; letter-spacing: -0.1px; }
input[type="search"], input[type="text"], input[type="email"], input[type="password"], input[type="number"], select, textarea {
  background: var(--carte); color: var(--encre); border: 1px solid var(--bord); border-radius: 12px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }

/* Bouton de thème, en bas à droite (même place que dans l'Atelier) */
.theme-mdr { position: fixed; right: 14px; bottom: 14px; z-index: 50; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--bord);
  background: var(--carte); color: var(--encre); box-shadow: var(--ombre); cursor: pointer; display: grid; place-items: center; padding: 0; }
.theme-mdr svg { width: 18px; height: 18px; }

/* Page Recherche : action principale pleine (encre, comme « Suivant » dans l'Atelier) ; effacer en contour ;
   les trois yeux gardent leur couleur (elle repère leurs colonnes dans le tableau), en pastilles arrondies */
main form button[type="submit"], main .barre-recherche > button:first-of-type, #rechercher { background: var(--encre); color: var(--sur-encre); border: 0; border-radius: 999px; font-weight: 600; }
main form button[type="submit"]:hover, #rechercher:hover { background: var(--encre); opacity: .88; }
.btn-reset { background: var(--carte); color: #DC6464; border: 1px solid #DC6464; border-radius: 999px; }
.btn-reset:hover { background: #DC6464; color: #fff; }
.btn-oeil { border-radius: 14px; box-shadow: var(--ombre); }
.compte button, #deconnexion { border: 1px solid var(--bord); border-radius: 999px; padding: 6px 14px; color: var(--encre); background: var(--carte); font-weight: 600; }
.compte button:hover, #deconnexion:hover { border-color: var(--encre); background: var(--carte); color: var(--encre); }
.compte span { color: var(--encre-2); font-size: .82rem; }
#reset.btn-reset { background: var(--carte); color: #DC6464; border: 1px solid #DC6464; }
#reset.btn-reset:hover { background: #DC6464; color: #fff; }

/* Paramètres : « Lancer toutes les connexions » et son suivi (ALGAM…, REXEL…) quittent le milieu de l'en-tête,
   où ils passaient par-dessus les onglets, pour une barre d'outils centrée juste sous l'en-tête */
header:has(.entete-actions) { flex-wrap: wrap; row-gap: 0; }
header .entete-actions { position: static; transform: none; order: 10; flex-basis: 100%; justify-content: center; padding: 10px 0 4px; border-top: 1px solid var(--bord); margin-top: 10px; }
header #synchro-msg { order: 11; flex-basis: 100%; text-align: center; margin: 0 0 8px; min-height: 1.2em; font-size: .82rem; color: var(--encre-2); }

/* Petits boutons gris des résultats (flèches, crayon, lien) et interrupteurs : teintes du thème au lieu du gris sombre fixe */
.resultats-plat .btn-fleche, .recherche .btn-petit, .resultats-plat .btn-lien-edit, .resultats-plat .btn-crayon { background: var(--carte-2); color: var(--encre); border: 1px solid var(--bord); }
.resultats-plat .btn-fleche:hover, .recherche .btn-petit:hover, .resultats-plat .btn-lien-edit:hover, .resultats-plat .btn-crayon:hover { background: var(--carte-2); border-color: var(--encre); color: var(--encre); }
.glissiere { background: #c9ccd1; }
html[data-theme="sombre"] .glissiere { background: #3a4552; }

/* Règle commune des boutons (comme l'Atelier) : action principale pleine en encre, outils en contour, effacer en contour rouge */
button { background: var(--encre); color: var(--sur-encre); border-radius: 999px; }
button:hover { background: var(--encre); opacity: .88; }
.btn-outil { background: var(--carte); color: var(--encre); border: 1px solid var(--bord); border-radius: 999px; }
.btn-outil:hover { background: var(--carte); border-color: var(--encre); opacity: 1; }
.btn-reset, #reset.btn-reset { background: var(--carte); color: #DC6464; border: 1px solid #DC6464; }
.btn-reset:hover, #reset.btn-reset:hover { background: #DC6464; color: #fff; opacity: 1; }
.btn-oeil:hover { opacity: .9; }
.theme-mdr, .theme-mdr:hover { background: var(--carte); color: var(--encre); opacity: 1; }
nav a:hover { opacity: 1; }
main .btn-petit, main button.btn-petit, .recherche .btn-petit { background: var(--carte); color: var(--encre); border: 1px solid var(--bord); border-radius: 999px; }
main .btn-petit:hover, .recherche .btn-petit:hover { border-color: var(--encre); opacity: 1; }
main button.btn-reset, main .recherche button.btn-reset { background: var(--carte); color: #DC6464; border: 1px solid #DC6464; }
main button.btn-reset:hover { background: #DC6464; color: #fff; opacity: 1; }

/* Onglets centrés sur la fenêtre (et donc sur « Lancer toutes les connexions »), quelle que soit la largeur du logo et du compte ;
   sur un écran étroit, ils reprennent leur place dans la ligne pour ne rien chevaucher */
header nav { position: absolute; left: 50%; top: 11px; transform: translateX(-50%); margin: 0; }
header .compte { margin-left: auto; }
/* l'adresse du compte ne s'affiche que sur grand écran : elle passerait sous les onglets centrés */
@media (max-width: 1799px) { header .compte span { display: none; } }
@media (max-width: 1250px) { header nav { position: static; transform: none; margin: 0 auto; } header nav a { padding: 7px 11px; } header .compte { margin-left: 0; } }