/* Feuille de style commune de la version en ligne — prolongement de la charte du poste (contrat-inscription.html) :
   bleu #1e5a96, vert #4a9b4f, cartes à ombre portée, bandeaux de section à bordure gauche, boutons en dégradé, badges d'état.
   MOBILE D'ABORD : les règles de base sont écrites pour 380 px (colonne unique, tableaux en cartes, cibles tactiles ≥ 44 px,
   actions principales pleine largeur) ; les @media (min-width) élargissent pour 768 et 1280 px. Aucun script. */
:root { --bleu: #1e5a96; --bleu-fonce: #174a7c; --bleu-clair: #e3f2fd; --bleu-pale: #eef4fb; --vert: #4a9b4f; --vert-fonce: #2e7d32; --vert-clair: #f1f8e9;
  --rouge: #b3261e; --rouge-clair: #fdecea; --ambre: #e0a100; --ambre-clair: #fff8e1; --ambre-texte: #5a4500; --gris: #555; --gris-clair: #d7dde5; --fond-ligne: #f4f8fc; --texte: #1a1a1a;
  --ombre: 0 10px 40px rgba(0,0,0,.10); --ombre-petite: 0 4px 16px rgba(0,0,0,.08); --rayon: 12px; --tactile: 44px; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; overflow-x: hidden; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color: var(--texte); line-height: 1.5; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%) fixed; min-height: 100vh; display: flex; flex-direction: column; font-size: 15px; }
a { color: var(--bleu); }

/* ---- en-tête et menu (mobile : marque + utilisateur sur une ligne, menu défilant dessous) ---- */
.entete { background: linear-gradient(135deg, var(--bleu) 0%, #2a6cae 60%, var(--vert) 100%); color: #fff; box-shadow: 0 4px 18px rgba(30,90,150,.35); position: sticky; top: 0; z-index: 20; }
.entete-int { max-width: 1100px; margin: 0 auto; padding: 8px 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.marque { display: flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; min-height: var(--tactile); }
.marque-ico { width: 36px; height: 36px; border-radius: 10px; background: rgba(255,255,255,.18); display: grid; place-items: center; font-size: 19px; flex-shrink: 0; }
.marque strong { display: none; font-size: 16px; line-height: 1.1; }
@media (min-width: 480px) { .marque strong { display: block; } }
.marque small { display: none; font-size: 11px; opacity: .85; letter-spacing: .03em; text-transform: uppercase; }
.utilisateur { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-left: auto; }
.utilisateur .qui { background: rgba(255,255,255,.16); padding: 5px 10px; border-radius: 8px; max-width: 42vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.utilisateur .qui strong { display: block; font-size: 13px; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; }
.utilisateur .qui small { display: none; font-size: 11px; opacity: .9; }
.utilisateur form { margin: 0; }
.btn-sortie { background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.6); color: #fff; padding: 0 12px; min-height: 38px; border-radius: 8px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; }
.btn-sortie:hover { background: rgba(255,255,255,.3); }
.menu { display: flex; gap: 4px; order: 3; width: 100%; flex-wrap: nowrap; overflow-x: auto; padding: 2px 0 6px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.menu::-webkit-scrollbar { display: none; }
.menu a { color: #fff; text-decoration: none; font-weight: 600; font-size: 14px; padding: 0 12px; min-height: 40px; display: inline-flex; align-items: center; border-radius: 8px; border: 1px solid transparent; white-space: nowrap; }
.menu a:hover { background: rgba(255,255,255,.14); }
.menu a.actif { background: #fff; color: var(--bleu); box-shadow: 0 2px 8px rgba(0,0,0,.15); }

/* ---- contenu ---- */
.contenu { max-width: 1100px; width: 100%; margin: 0 auto; padding: 12px 12px 28px; flex: 1; }
.fil { font-size: 13px; color: var(--gris); margin: 0 0 10px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fil a { color: var(--bleu); text-decoration: none; font-weight: 600; padding: 4px 0; }
.fil a:hover { text-decoration: underline; }
.fil .sep { color: #999; }
.fil .ici { color: var(--texte); font-weight: 600; }
.retour { display: inline-flex; align-items: center; gap: 6px; margin: 14px 0 0; min-height: var(--tactile); color: var(--bleu); text-decoration: none; font-weight: 600; font-size: 14px; }
.retour:hover { text-decoration: underline; }
.carte { background: #fff; border-radius: var(--rayon); box-shadow: var(--ombre); padding: 18px 16px; margin: 0 0 16px; min-width: 0; max-width: 100%; }
.carte.etroite { max-width: 540px; margin-left: auto; margin-right: auto; }
.carte.accent { border-top: 5px solid var(--vert); }
h1 { color: var(--bleu); font-size: 21px; margin: 0 0 14px; padding-bottom: 10px; border-bottom: 3px solid var(--vert); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; line-height: 1.25; }
h1 small { font-size: 13px; color: #777; font-weight: normal; }
h1 .ico { font-size: 22px; }
h2, .section-titre { color: var(--bleu); font-size: 16px; font-weight: 700; margin: 20px 0 12px; padding: 8px 12px; background: linear-gradient(90deg, var(--bleu-clair) 0%, transparent 100%); border-left: 5px solid var(--vert); border-radius: 0 6px 6px 0; }
h2:first-child { margin-top: 0; }
.intro { color: var(--gris); font-size: 14px; margin: 0 0 16px; }
.aide-bas { font-size: 13px; color: var(--gris); margin-top: 16px; }
p { margin: 0 0 10px; }
code { background: #f1f3f6; padding: 1px 5px; border-radius: 4px; font-size: .92em; word-break: break-all; }
.vide { color: #999; }

/* ---- messages et états ---- */
.message { padding: 11px 12px; border-radius: 8px; margin: 0 0 16px; border-left: 5px solid var(--bleu); background: var(--bleu-pale); font-size: 14px; display: flex; gap: 10px; align-items: flex-start; }
.message::before { content: 'ℹ️'; }
.message.erreur { border-color: var(--rouge); background: var(--rouge-clair); color: #7a1a12; } .message.erreur::before { content: '⛔'; }
.message.warn { border-color: var(--ambre); background: var(--ambre-clair); color: var(--ambre-texte); } .message.warn::before { content: '⚠️'; }
.message.ok { border-color: var(--vert-fonce); background: #e8f5e9; color: #1b5e20; } .message.ok::before { content: '✅'; }
.message > div { flex: 1; min-width: 0; } .message ul { margin: 6px 0 0 16px; padding: 0; }
.etat-vide { text-align: center; padding: 30px 14px; color: var(--gris); border: 2px dashed var(--gris-clair); border-radius: 12px; background: #fafbfd; }
.etat-vide .ico { font-size: 36px; display: block; margin-bottom: 6px; }
.etat-vide strong { display: block; color: var(--bleu); font-size: 16px; margin-bottom: 4px; }
.etat-vide .btn { margin-top: 14px; }

/* ---- badges ---- */
.badge { display: inline-block; border-radius: 12px; padding: 2px 10px; font-size: 12px; font-weight: 700; background: var(--vert); color: #fff; white-space: nowrap; line-height: 1.5; }
.badge.warn { background: var(--ambre); color: #3a2d00; }
.badge.off { background: #e3e6ea; color: #555; }
.badge.info { background: var(--bleu); color: #fff; }
.badge.rouge { background: var(--rouge); color: #fff; }

/* ---- boutons : hiérarchie principale / secondaire / danger ; cibles tactiles ≥ 44 px ---- */
.btn, button { font-family: inherit; font-size: 15px; font-weight: 600; border-radius: 8px; padding: 0 16px; min-height: var(--tactile); cursor: pointer; border: 2px solid var(--bleu); background: #fff; color: var(--bleu); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; line-height: 1.3; transition: transform .15s, box-shadow .15s, background .15s; width: 100%; }
.btn:hover, button:hover { background: var(--bleu-pale); }
.btn-primaire, button.primaire { background: linear-gradient(135deg, var(--bleu) 0%, var(--vert) 100%); color: #fff; border: 0; min-height: 50px; font-size: 16px; box-shadow: 0 5px 18px rgba(30,90,150,.3); }
.btn-primaire:hover, button.primaire:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(30,90,150,.38); background: linear-gradient(135deg, var(--bleu-fonce) 0%, var(--vert-fonce) 100%); }
.btn-primaire:disabled, button.primaire:disabled { background: #b8c4d1; box-shadow: none; cursor: not-allowed; transform: none; }
.btn-petit, button.petit { min-height: 40px; font-size: 14px; border-width: 1px; padding: 0 12px; }
.btn-danger, button.danger { border: 1px solid #e0a9a5; color: var(--rouge); background: #fff; min-height: 40px; font-size: 14px; padding: 0 12px; }
.btn-danger:hover, button.danger:hover { background: var(--rouge-clair); }
.btn-discret, button.lien { border: 0; background: none; color: var(--bleu); padding: 4px 6px; text-decoration: underline; font-weight: 600; width: auto; min-height: 0; }
.actions-bas { display: flex; flex-direction: column; gap: 10px; margin: 18px 0 6px; }
.actions-bas form { margin: 0; display: flex; } .actions-bas form > * { flex: 1; }
.actions-bas .espace { display: none; }
.inline { display: inline; }

/* ---- formulaires : colonne unique ---- */
.champ { display: flex; flex-direction: column; gap: 4px; margin: 0 0 14px; font-size: 14px; font-weight: 600; color: #333; }
.champ > span { min-height: 21px; }
.champ small { color: #777; font-weight: normal; font-size: 12px; line-height: 1.35; }
.champ input, .champ select, .champ textarea { padding: 0 12px; min-height: var(--tactile); border: 2px solid #e0e0e0; border-radius: 8px; font-size: 16px; font-family: inherit; font-weight: normal; color: var(--texte); background: #fff; width: 100%; }
.champ textarea { padding: 10px 12px; min-height: 90px; }
.champ input:focus, .champ select:focus, .champ textarea:focus { border-color: var(--bleu); outline: none; box-shadow: 0 0 0 3px rgba(30,90,150,.12); }
.champ input[type=file] { padding: 8px; background: #fafbfd; min-height: 0; }
/* niveau « Autre » (liste déroulante des niveaux) : libellé libre + catégorie tarifaire ; masqué tant qu'un niveau de la liste est
   choisi, quand le navigateur connaît :has() — sinon le bloc reste visible (aucun script) */
.bloc-autre { padding: 10px 12px 0; border: 1px dashed #c9d3df; border-radius: 10px; margin: 0 0 14px; background: #fafbfd; }
.bloc-autre .champ > div { display: flex; flex-wrap: wrap; gap: 4px 0; font-weight: normal; }
@supports selector(:has(a)) { form:has(select[name=eleve_niveau] option:checked:not([value=autre])) .bloc-autre { display: none; } }
.champ.obligatoire > span::after { content: ' *'; color: var(--rouge); }
.grille-2 { display: grid; grid-template-columns: 1fr; gap: 0; }
.coche { display: flex; gap: 10px; align-items: flex-start; font-weight: normal; min-height: var(--tactile); }
.coche input { width: 22px; height: 22px; margin-top: 2px; flex-shrink: 0; }
.note-regle { background: var(--ambre-clair); border-left: 4px solid var(--ambre); color: var(--ambre-texte); padding: 8px 12px; border-radius: 6px; font-size: 13px; margin: 0 0 14px; }
.secret { font-family: Consolas, 'Courier New', monospace; font-size: 20px; letter-spacing: 1px; background: var(--ambre-clair); border: 2px dashed var(--ambre); padding: 14px; border-radius: 10px; text-align: center; margin: 14px 0; user-select: all; word-break: break-all; }

/* ---- tableaux : en cartes sur mobile (chaque cellule porte son intitulé data-l), en lignes dès 768 px ---- */
.defile { overflow-x: auto; }
.tableau { width: 100%; border-collapse: collapse; font-size: 14px; display: block; }
.tableau tbody { display: block; width: 100%; }
.tableau thead { display: none; }
.tableau tr { display: block; border: 1px solid #e6e9ee; border-radius: 10px; margin: 0 0 12px; padding: 6px 0; background: #fff; box-shadow: var(--ombre-petite); }
.tableau td { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 7px 12px; text-align: right; vertical-align: top; }
.tableau td > span { display: inline-block; }
.tableau td > small, .tableau td > span, .tableau td > code { min-width: 0; overflow-wrap: anywhere; }
.tableau td::before { content: attr(data-l); font-weight: 700; color: var(--bleu); text-align: left; flex: 0 0 38%; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; }
.tableau td:not([data-l])::before { display: none; }
.tableau td.actions { flex-wrap: wrap; justify-content: flex-start; gap: 8px; padding-top: 10px; border-top: 1px dashed #e6e9ee; margin-top: 4px; }
.tableau td.actions form, .tableau td.actions .btn { flex: 1 1 46%; display: flex; margin: 0; } .tableau td.actions form > * { flex: 1; } .tableau td.actions .badge { align-self: center; }
.tableau tr.inactif td { color: #999; }
.tableau tr.courante { border-color: var(--vert); background: var(--vert-clair); }
.tableau.fiche tr { border: 0; box-shadow: none; margin: 0; padding: 0; border-bottom: 1px solid #e6e9ee; border-radius: 0; }
.tableau.fiche th, .tableau.fiche td { display: block; text-align: left; padding: 6px 8px; }
.tableau.fiche th { color: #444; font-weight: 600; font-size: 13px; padding-bottom: 0; background: none; }
.tableau.fiche td::before { display: none; }
.liste { margin: 4px 0 0 18px; padding: 0; }

/* ---- accueil : cartes de choix ---- */
.grille-choix { display: grid; grid-template-columns: 1fr; gap: 14px; }
.carte-choix { display: flex; flex-direction: column; gap: 6px; padding: 18px; border: 3px solid var(--bleu); border-radius: 12px; text-decoration: none; color: var(--texte); background: #fff; box-shadow: var(--ombre-petite); transition: transform .15s, box-shadow .15s; position: relative; min-height: var(--tactile); }
.carte-choix .ico { font-size: 30px; }
.carte-choix strong { color: var(--bleu); font-size: 18px; }
.carte-choix span { font-size: 13px; color: var(--gris); }
.carte-choix .aller { margin-top: auto; padding-top: 8px; font-weight: 700; color: var(--bleu); font-size: 14px; }
a.carte-choix:hover, a.carte-choix:focus-visible { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,.16); outline: none; }
.carte-choix.verte { border-color: var(--vert); } .carte-choix.verte strong, .carte-choix.verte .aller { color: var(--vert-fonce); }
.carte-choix.inactif { border-color: var(--gris-clair); opacity: .75; background: #fafbfd; }
.carte-choix.inactif strong { color: #777; }
.accueil-entete { text-align: center; margin: 6px 0 18px; }
.accueil-entete h1 { justify-content: center; border: 0; padding: 0; font-size: 24px; margin-bottom: 4px; }
.accueil-entete .sous { color: var(--gris); font-size: 14px; }
.session-info { font-size: 12px; color: #777; text-align: center; margin-top: 18px; }

/* ---- entités ---- */
.logo { max-width: 180px; max-height: 90px; border: 1px solid #e6e9ee; border-radius: 6px; background: #fff; padding: 4px; }
.logo.mini { max-width: 56px; max-height: 36px; padding: 2px; }
.pastille { display: inline-block; width: 14px; height: 14px; border-radius: 50%; vertical-align: middle; border: 1px solid rgba(0,0,0,.15); }
.bandeau-structure { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px; background: var(--bleu-pale); border-left: 6px solid var(--couleur, var(--bleu)); margin: 0 0 16px; flex-wrap: wrap; }
.bandeau-structure .nom { font-size: 19px; font-weight: 800; color: var(--couleur, var(--bleu)); }
.bandeau-structure .detail { font-size: 13px; color: var(--gris); }
.diff-avant { color: #7a1a12; background: #fff4f3; border-radius: 4px; padding: 2px 4px; display: inline-block; }
.diff-apres { color: #1b5e20; background: #eef8ef; border-radius: 4px; padding: 2px 4px; display: inline-block; }

/* ---- contrats : saisie des matières, aperçu PDF ---- */
.matiere { display: grid; grid-template-columns: 1fr; gap: 0 12px; padding: 10px 12px; border: 1px solid var(--gris-clair); border-radius: 10px; margin: 0 0 10px; background: #fafbfd; }
.matiere.active { border-color: var(--vert); background: var(--vert-clair); }
.matiere .champ { margin-bottom: 6px; } .matiere .coche { margin: 0 0 4px; font-weight: 600; }
.coche.formule { padding: 10px 12px; border: 1px solid var(--gris-clair); border-radius: 10px; margin: 0 0 10px; background: #fafbfd; }
.coche.formule.active { border-color: var(--vert); background: var(--vert-clair); }
/* pages en images : toujours dans la largeur disponible (rapport A4 conservé) — minmax(0,1fr) et min-width:0 empêchent l'image de 1 191 px d'élargir la grille */
.pages-apercu { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin: 0 0 18px; max-width: 100%; }
.pages-apercu figure { margin: 0; min-width: 0; }
.pages-apercu img { max-width: 100%; width: 100%; height: auto; display: block; border: 1px solid var(--gris-clair); border-radius: 6px; box-shadow: var(--ombre-petite); background: #fff; }
.pages-apercu figcaption { text-align: center; font-size: 12px; color: var(--gris); margin-top: 4px; }
button.carte-choix { width: 100%; }
@media (min-width: 768px) { .matiere { grid-template-columns: 110px 1fr 160px; align-items: end; } .matiere .coche { min-height: 42px; margin-bottom: 14px; } }

/* ---- pied ---- */
.pied { text-align: center; color: #6b7280; font-size: 12px; padding: 16px; }

/* ================= 768 px et plus : deux colonnes, boutons à leur taille, cartes par deux ================= */
@media (min-width: 768px) {
  .contenu { padding: 18px 16px 30px; }
  .carte { padding: 24px 26px; border-radius: 14px; }
  h1 { font-size: 24px; } h1 .ico { font-size: 24px; } h2, .section-titre { font-size: 17px; }
  .btn, button { width: auto; min-height: 40px; font-size: 14px; }
  .btn-primaire, button.primaire { min-height: 46px; padding: 0 26px; font-size: 15px; }
  .btn-large { width: 100%; }
  .btn-petit, button.petit, .btn-danger, button.danger { min-height: 34px; font-size: 13px; padding: 0 10px; }
  .actions-bas { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .actions-bas form { display: inline-flex; } .actions-bas form > * { flex: none; }
  .actions-bas .espace { display: block; flex: 1; }
  .champ input, .champ select { min-height: 42px; font-size: 15px; }
  .grille-2 { grid-template-columns: 1fr 1fr; gap: 0 18px; align-items: start; }
  .grille-choix { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .accueil-entete h1 { font-size: 26px; }
}
/* ================= 1000 px et plus : en-tête sur une ligne, tableaux en lignes ================= */
@media (min-width: 1000px) {
  .entete-int { padding: 10px 18px; gap: 18px; flex-wrap: nowrap; }
  .marque small { display: block; }
  .menu { order: 0; width: auto; flex: 1; overflow: visible; padding: 0; flex-wrap: wrap; }
  .menu a { min-height: 38px; }
  .utilisateur { margin-left: 0; } .utilisateur .qui { max-width: none; } .utilisateur .qui small { display: block; }
  .tableau { display: table; } .tableau tbody { display: table-row-group; }
  .tableau thead { display: table-header-group; }
  .tableau tr { display: table-row; border: 0; box-shadow: none; margin: 0; padding: 0; background: none; border-radius: 0; }
  .tableau th { text-align: left; background: var(--bleu); color: #fff; padding: 10px; font-weight: 700; font-size: 13px; letter-spacing: .02em; }
  .tableau th:first-child { border-radius: 8px 0 0 0; } .tableau th:last-child { border-radius: 0 8px 0 0; }
  .tableau td { display: table-cell; padding: 10px; border-bottom: 1px solid #e6e9ee; text-align: left; }
  .tableau td::before { display: none; }
  .tableau tbody tr:nth-child(even) td { background: var(--fond-ligne); }
  .tableau tbody tr:hover td { background: var(--bleu-clair); }
  .tableau tr.courante td { background: var(--vert-clair) !important; }
  .tableau td.actions { white-space: nowrap; border-top: 0; margin: 0; padding-top: 10px; }
  .tableau td.actions form, .tableau td.actions .btn { display: inline-flex; margin: 0 4px 4px 0; flex: none; }
  .tableau.fiche tr { display: table-row; }
  .tableau.fiche th, .tableau.fiche td { display: table-cell; padding: 8px 10px; }
  .tableau.fiche th { background: #f4f6f9; width: 34%; border-radius: 0; }
  .tableau.fiche td { background: #fff !important; }
}
/* ================= 1280 px et plus : trois cartes par ligne, marges confortables ================= */
@media (min-width: 1200px) {
  .grille-choix { grid-template-columns: repeat(3, 1fr); }
  .contenu { padding: 22px 16px 34px; }
}

/* Connexion unique (lot SSO) : lien de retour vers l espace direction de Delta Web */
.retour-dw { color: #fff; text-decoration: none; font-weight: 600; font-size: 13px; padding: 0 10px; min-height: 38px; display: inline-flex; align-items: center; border-radius: 8px; border: 1px solid rgba(255,255,255,.6); white-space: nowrap; }
.retour-dw:hover { background: rgba(255,255,255,.18); }