/* Espace confidentiel Scara 360 — mise en page. Couleurs, polices et rayons viennent de jetons.css. */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--police-ui); font-size: 14px; line-height: 1.5; color: var(--texte-fort); background: var(--fond-page); }
a { color: var(--texte-fort); text-underline-offset: 3px; }
h1 { margin: 0; font-size: 32px; line-height: 36px; font-weight: 800; letter-spacing: -0.02em; }
h2 { margin: 0; font-size: 18px; font-weight: 700; }
p { margin: 0; }
.surtitre { font-family: var(--police-etroite); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--texte-discret); }
.mono { font-family: var(--police-mono); }

/* entrée : panneau ardoise à gauche, formulaire à droite (planche connexion-bureau).
   Grille dans un conteneur et non sur <body> : un élément ajouté en fin de <body> par une
   extension du navigateur y créait une seconde rangée, et le panneau s'arrêtait avant le bas. */
.entree-cadre { min-height: 100vh; display: grid; grid-template-columns: 600px minmax(0, 1fr); }
/* Planche : logo en haut (196 px sous la marge), libellé de l'espace en bas, formulaire à 150 px. */
.entree-marque { position: relative; overflow: hidden; background: var(--ardoise-950); color: var(--ardoise-0); padding: 56px; display: flex; flex-direction: column; }
.entree-filigrane { position: absolute; right: -96px; bottom: -150px; width: 430px; opacity: .07; }
.entree-logo { position: relative; display: block; flex-shrink: 0; margin-top: 196px; width: 440px; max-width: 100%; height: auto; }
.entree-espace { position: relative; margin: auto 0 0; font-family: var(--police-etroite); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ardoise-400); }
.entree-principal { display: flex; flex-direction: column; align-items: center; padding: 150px 24px 32px; }
.entree-colonne { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 18px; }
.entree-colonne.large { max-width: 640px; }
.entree-pied { margin-top: auto; padding-top: 32px; font-size: 12px; color: var(--texte-discret); }
.entree-pied a { color: var(--texte-discret); }
.entete-formulaire { display: flex; flex-direction: column; gap: 4px; }
.formulaire { display: flex; flex-direction: column; gap: 18px; }
.champ { display: flex; flex-direction: column; gap: 6px; }
.champ label { font-size: 13px; font-weight: 600; }
.champ input, .champ select { height: 40px; width: 100%; padding: 0 12px; border: 1px solid var(--trait-fort); border-radius: 4px; background: var(--fond-surface); color: var(--texte-fort); font: inherit; font-size: 14px; }
.champ-code input { font-family: var(--police-mono); font-size: 22px; letter-spacing: .3em; text-align: center; height: 52px; }
input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.bouton-principal { height: 44px; padding: 0 18px; border: 0; border-radius: 4px; background: var(--action); color: var(--action-encre); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.bouton-principal:hover { background: var(--action-survol); }
.bouton-discret { background: none; border: 0; padding: 0; font: inherit; font-size: 13px; font-weight: 600; color: var(--texte-fort); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.note { font-size: 12px; color: var(--texte-discret); }
.note a { color: var(--texte-discret); }
.message { padding: 10px 12px; border-radius: 4px; font-size: 13px; }
.message-erreur { background: var(--critique-voile); color: var(--critique-texte); }
.message-info { background: var(--donnee-voile); color: var(--donnee-texte); }
.texte-engagement { max-height: 50vh; overflow-y: auto; padding: 16px 20px; border: 1px solid var(--trait); border-radius: 4px; background: var(--fond-surface); }
.texte-engagement p { margin: 0 0 12px; }
.case { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; }
.case input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--action); }
.actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }

/* intérieur */
body.interieur { min-height: 100vh; display: flex; flex-direction: column; padding-bottom: 36px; }
.tete { display: flex; align-items: center; gap: 16px; padding: 0 24px; height: 56px; background: var(--ardoise-950); color: var(--ardoise-0); }
.tete-logo { display: block; height: 26px; width: auto; }
.tete-espace { font-family: var(--police-etroite); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ardoise-400); }
.tete-nav { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.tete-nav form { margin: 0; }
.tete-nav a, .tete-nav button { color: var(--ardoise-100); font: inherit; font-size: 13px; font-weight: 600; text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; }
.tete-nav a:hover, .tete-nav button:hover { color: var(--ardoise-0); text-decoration: underline; }
.bandeau { padding: 8px 24px; background: var(--attention-voile); color: var(--attention-texte); font-size: 13px; font-weight: 600; }
.page { width: 100%; max-width: 1120px; margin: 0 auto; padding: 32px 24px; flex: 1; display: flex; flex-direction: column; gap: 24px; }
.page.page-large { max-width: none; padding: 16px 24px; }
.cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.carte { display: flex; flex-direction: column; gap: 8px; padding: 20px; border: 1px solid var(--trait); border-radius: 4px; background: var(--fond-surface); text-decoration: none; color: var(--texte-fort); }
.carte:hover { border-color: var(--trait-fort); box-shadow: var(--ombre-1); }
.carte-titre { font-size: 18px; font-weight: 700; }
.carte-description { color: var(--texte); }
.carte-date { margin-top: auto; font-family: var(--police-mono); font-size: 12px; color: var(--texte-discret); }
.pied { padding: 0 24px 12px; font-size: 12px; color: var(--texte-discret); }
.pied a { color: var(--texte-discret); }
.filigrane { position: fixed; left: 0; right: 0; bottom: 0; height: 36px; display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--texte-discret); background: var(--fond-page); border-top: 1px solid var(--trait); pointer-events: none; z-index: 10; }
.cadre-document { flex: 1; width: 100%; min-height: calc(100vh - 200px); border: 1px solid var(--trait); border-radius: 4px; background: var(--fond-surface); }

/* présentation */
.visionneuse { display: flex; flex-direction: column; gap: 12px; }
.diapo-cadre { aspect-ratio: 16 / 9; width: 100%; max-height: calc(100vh - 260px); margin: 0 auto; background: var(--fond-surface); border: 1px solid var(--trait); border-radius: 4px; overflow: hidden; }
.diapo-cadre img { width: 100%; height: 100%; object-fit: contain; display: block; user-select: none; }
.commandes { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }
.commandes button { height: 36px; min-width: 44px; padding: 0 14px; border: 1px solid var(--trait-fort); border-radius: 4px; background: var(--fond-surface); color: var(--texte-fort); font: inherit; font-weight: 600; cursor: pointer; }
.commandes button:disabled { opacity: .4; cursor: default; }
.compteur { font-family: var(--police-mono); font-size: 13px; color: var(--texte); min-width: 64px; text-align: center; }
.renvoi { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: 4px; background: var(--action); color: var(--action-encre); font-weight: 700; text-decoration: none; }
.renvoi[hidden] { display: none; }
.miniatures { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.miniatures button { flex: 0 0 auto; width: 120px; padding: 0; border: 2px solid transparent; border-radius: 3px; background: none; cursor: pointer; }
.miniatures button[aria-current="true"] { border-color: var(--action); }
.miniatures img { width: 100%; display: block; aspect-ratio: 16 / 9; object-fit: cover; }

/* administration */
.onglets-admin { display: flex; gap: 18px; flex-wrap: wrap; }
.onglets-admin a[aria-current="page"] { font-weight: 700; text-decoration: underline; }
.tableau { width: 100%; border-collapse: collapse; font-size: 13px; background: var(--fond-surface); }
.tableau th { text-align: left; font-family: var(--police-etroite); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--texte-discret); border-bottom: 1px solid var(--trait-fort); padding: 8px 10px; }
.tableau td { border-bottom: 1px solid var(--trait); padding: 8px 10px; vertical-align: top; }
.defilement { overflow-x: auto; }
.formulaire-ligne { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; align-items: end; }
.boutons-ligne { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.boutons-ligne form { margin: 0; display: flex; gap: 8px; align-items: center; }

/* téléphone */
@media (max-width: 900px) {
  .entree-cadre { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .entree-marque { padding: 24px 16px; }
  .entree-logo { width: 220px; margin-top: 0; }
  .entree-espace { margin-top: 14px; }
  .entree-filigrane { display: none; }
  .entree-principal { padding: 32px 16px 24px; }
  .tete { padding: 8px 16px; height: auto; min-height: 56px; flex-wrap: wrap; row-gap: 6px; }
  .tete-nav { gap: 14px; flex-wrap: wrap; }
  .tete-nav a, .tete-nav button { white-space: nowrap; }
  .tete-espace { display: none; }
  .bandeau, .pied { padding-left: 16px; padding-right: 16px; }
  .page, .page.page-large { padding: 20px 16px; }
  .miniatures { display: none; }
}

/* impression : rien ne sort, sauf l'attestation d'acceptation */
@media print {
  body:not(.imprimable) > * { display: none !important; }
  body:not(.imprimable)::after { content: "Document confidentiel : impression désactivée."; display: block; padding: 40px; font-size: 14px; }
  body.imprimable .tete, body.imprimable .filigrane, body.imprimable .pied, body.imprimable .onglets-admin, body.imprimable .sans-impression { display: none !important; }
}