/* DansAssist — feuille de style commune */

/* ---------------------------------------------------------------
   CHARTE GRAPHIQUE — refonte du 4 novembre 2026 (étape 1 : habillage)
   L'encre et le papier des logos DansAssist et Sébastien Labergère,
   l'or, le bleu et le rouge de la tour DJ Eiffel.
   Les anciens noms (--rose, --rose-fonce, --rose-clair) sont gardés
   et redirigés : timing.css, circulaire.css et les styles écrits dans
   les pages continuent de fonctionner sans être retouchés.
   --------------------------------------------------------------- */
@font-face{font-family:"Bodoni Moda"; src:url("/polices/bodoni-moda.woff") format("woff");
  font-weight:400 900; font-style:normal; font-display:swap}
@font-face{font-family:"Source Sans 3"; src:url("/polices/source-sans-3.woff") format("woff");
  font-weight:200 900; font-style:normal; font-display:swap}
@font-face{font-family:"Source Sans 3"; src:url("/polices/source-sans-3-italique.woff") format("woff");
  font-weight:200 900; font-style:italic; font-display:swap}

:root{
  /* Neutres */
  --encre:#16161A; --graphite:#3E3F3C; --gris:#5F605B; --gris-clair:#B5B4AC;
  --papier:#FAF8F4; --fond:var(--papier); --blanc:#fff;
  --ligne:#DEDDD6; --perle:#E0E1E3; --voile:#F2F0EA;
  /* Accent unique : l'or de la tour */
  --or:#E8A63D; --or-texte:#8A5A10; --or-clair:#FBF0DC; --or-voile:#FEF8EE;
  /* Couleurs de service (repérage seulement, jamais pour un état) */
  --bleu:#469CC6; --rouge-eiffel:#D83024; --service:var(--encre);
  /* États */
  --bleu-texte:#1D6690; --bleu-clair:#E4F1F8;
  --vert:#276B43; --vert-fonce:#1E5233; --vert-clair:#E6F2EA;
  --rouge:#AF2A1F; --rouge-fonce:#8E2219; --rouge-clair:#FBE9E6; --rouge-filet:#E7B8B1;
  /* Anciens noms, redirigés */
  --rose:var(--encre); --rose-fonce:var(--graphite); --rose-clair:var(--or-clair);
  /* Typographie */
  --police-titre:"Bodoni Moda","Bodoni 72","Didot","Bodoni MT",Georgia,serif;
  --police-texte:"Source Sans 3","Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  --rayon:8px;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--fond); color:var(--encre);
  font:16px/1.55 var(--police-texte);
}

/* Bandeau */
.bandeau{
  background:var(--blanc); color:var(--encre); padding:10px 20px;
  border-top:4px solid var(--service); border-bottom:1px solid var(--ligne);
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}
.marque{color:var(--encre); text-decoration:none; font-family:var(--police-titre); font-weight:600; font-size:21px; letter-spacing:-.01em}
/* 11/11/2026 (étape 1b) : l'emblème du logo — les deux danseurs — devant le nom.
   Posé par la feuille de style seule : aucune page n'est modifiée. */
.marque{display:inline-flex; align-items:center}
.marque::before{content:""; flex:none; width:63px; height:42px; margin-right:10px;
  background:url("/marque/dansassist-embleme.svg") left center / contain no-repeat}
@media (max-width:420px){ .marque::before{width:51px; height:34px; margin-right:8px} }
.marque span{color:var(--or-texte)}
/* Logo de l'organisation cliente, à côté de la marque DansAssist.
   Hauteur imposée, largeur libre : un logo large ne pousse pas le
   menu hors de l'écran, un logo haut ne déforme pas le bandeau. */
.logo-bandeau{height:26px; width:auto; max-width:140px; object-fit:contain; margin-left:12px;
  background:#fff; border-radius:4px; padding:2px 4px}
.logo-apercu{max-width:100%; max-height:180px; height:auto; display:block;
  border:1px solid var(--ligne); border-radius:8px; padding:10px; background:#fff}
input[type=file].fichier{display:block; width:100%; margin:0; font-size:15px; padding:10px 0}
textarea.lien-acces{display:block; width:100%; box-sizing:border-box; font-family:inherit;
  font-size:14px; line-height:1.5; padding:12px; border:1px solid var(--ligne);
  border-radius:8px; background:var(--blanc); resize:vertical; word-break:break-all}
textarea.lien-acces:focus{outline:2px solid var(--or-texte); outline-offset:1px; border-color:var(--encre)}
.bandeau nav{margin-left:auto; display:flex; align-items:center; gap:14px; font-size:15px}
.bandeau .qui{color:var(--gris)}
.bandeau nav a{color:var(--encre); text-decoration:none; border-bottom:1px solid var(--ligne)}
.bandeau nav a:hover{border-bottom-color:var(--or)}

/* Page */
.page{max-width:720px; margin:0 auto; padding:28px 16px 60px}
h1{font-family:var(--police-titre); font-weight:600; font-size:28px; line-height:1.2; margin:0 0 6px; letter-spacing:-.01em}
h2{font-family:var(--police-titre); font-weight:600; font-size:20px; line-height:1.3; margin:28px 0 12px}
.sous{color:var(--gris); margin:0 0 24px}

/* Cartes */
.carte{
  background:var(--blanc); border:1px solid var(--ligne);
  border-radius:var(--rayon); padding:20px; margin-bottom:16px;
}

/* Formulaires */
label{display:block; font-weight:600; margin:14px 0 5px; font-size:15px}
input[type=text], input[type=email], input[type=password],
input[type=date], input[type=time], select{
  width:100%; padding:11px 12px; border:1px solid var(--ligne);
  border-radius:8px; font:inherit; background:#fff;
}
select{appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--gris) 50%),linear-gradient(135deg,var(--gris) 50%,transparent 50%); background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%; background-size:5px 5px,5px 5px; background-repeat:no-repeat}
input:focus, select:focus{outline:2px solid var(--or-texte); outline-offset:1px; border-color:var(--encre)}
.aide{color:var(--gris); font-size:14px; margin:5px 0 0}
button{
  margin-top:20px; background:var(--encre); color:var(--papier); border:0;
  border-radius:8px; padding:12px 20px; font:inherit; font-weight:600;
  cursor:pointer; width:100%;
}
button:hover{background:var(--graphite)}
button:focus-visible, a:focus-visible, summary:focus-visible{outline:3px solid var(--or); outline-offset:2px}

/* Messages */
.message{border-radius:8px; padding:12px 14px; margin:0 0 18px; font-size:15px}
.message.ok{background:var(--vert-clair); color:var(--vert)}
.message.erreur{background:var(--rouge-clair); color:var(--rouge)}
.message.info{background:var(--bleu-clair); color:var(--bleu-texte)}

/* Listes de services */
.service{
  display:flex; align-items:center; gap:12px; padding:12px 0;
  border-bottom:1px solid var(--ligne);
}
.service:last-child{border-bottom:0}
.service .nom{font-weight:600}
.etiquette{
  margin-left:auto; font-size:13px; font-weight:600;
  padding:3px 10px; border-radius:999px;
}
.etiquette.actif{background:var(--vert-clair); color:var(--vert)}
.etiquette.inactif{background:var(--ligne); color:var(--gris)}
/* Ce qui a changé depuis la dernière visite d'un membre (§ 6.9).
   Une teinte à part : ni « tout va bien », ni « inactif ». */
.etiquette.neuf{background:var(--or-clair); color:var(--or-texte); font-weight:700}

/* Tableau simple */
table{width:100%; border-collapse:collapse; font-size:15px}
th{text-align:left; font-size:13px; color:var(--gris); font-weight:600;
   padding:8px; border-bottom:1px solid var(--ligne)}
td{padding:8px; border-bottom:1px solid var(--ligne)}

.pied{color:var(--gris); font-size:14px; text-align:center; padding:0 16px 32px}

@media (max-width:480px){
  .page{padding:20px 14px 48px}
  h1{font-size:23px}
}

/* Édition : pastille de couleur d'un groupe */
.pastille{
  display:inline-block; width:11px; height:11px; border-radius:3px;
  margin-right:7px; vertical-align:baseline; border:1px solid rgba(0,0,0,.12);
}

/* Planning des cours collectifs */
.defilant{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 -4px; padding:0 4px}

/* Écrans à tableau : c'est la PAGE qui s'élargit, pas le tableau.
   -----------------------------------------------------------------
   Première tentative, le 7 octobre : élargir le seul bloc défilant.
   Résultat, le tableau sortait de la carte blanche qui le contient et
   débordait des deux côtés. La leçon est simple : on n'élargit pas un
   contenu sans élargir son contenant.
   Ici, une page qui contient un tableau large passe de 720 à 1240 px,
   et ses cartes s'élargissent avec elle. Les pages de texte gardent
   leur largeur de lecture.
   La sélection se fait sur la présence d'un bloc défilant : les dix
   écrans à tableau en bénéficient sans qu'aucun n'ait à se déclarer.
   Un navigateur qui ne connaîtrait pas « :has » ignore la règle et
   retrouve l'affichage d'avant — étroit, mais jamais cassé.
   Les écrans du timing sont exclus : leur <main> porte « timing ». */
@media (min-width: 1000px) {
  .page:not(.timing):has(.defilant){ max-width: 1240px; }
}
table.planning{min-width:640px; font-size:13px}
table.planning td{vertical-align:top; padding:5px 6px}
table.planning td.heure{white-space:nowrap; color:var(--gris); font-variant-numeric:tabular-nums}
.seance{
  display:block; border-radius:6px; padding:4px 7px; margin-bottom:4px;
  font-size:12px; font-weight:600; line-height:1.3;
}
.seance:last-child{margin-bottom:0}

/* Inscriptions : barre de filtres */
.filtres{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:14px}
.filtres input[type=text]{flex:1 1 180px; width:auto; margin:0}
.filtres select{flex:0 1 240px; width:auto; margin:0}
.filtres button{width:auto; margin:0; padding:11px 18px}

/* Inscriptions : tableau des dossiers */
table.dossiers{min-width:860px; font-size:14px}
table.dossiers td{vertical-align:top}
table.dossiers .petit{font-size:13px; color:var(--gris); line-height:1.5}
table.dossiers .seance{display:inline-block; margin:0 4px 4px 0}

/* Console d'arbitrage */
.petit{font-size:13px; color:var(--gris)}
tr.choisi td{background:var(--rose-clair)}
.ligne{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  padding:12px 0; border-bottom:1px solid var(--ligne);
}
.ligne:last-child{border-bottom:0}
.ligne p{margin:0; flex:1 1 100%}
.ligne input[type=text], .ligne select{flex:1 1 200px; width:auto; margin:0}
.ligne button{width:auto; margin:0; padding:10px 16px}
button.discret{background:var(--blanc); color:var(--encre); border:1px solid var(--encre)}
button.discret:hover{background:var(--voile)}

/* Réattribution des séances collectives */
h3{font-size:15px; margin:22px 0 8px; color:var(--gris);
   text-transform:uppercase; letter-spacing:.04em}
.carte ul{margin:6px 0 0; padding-left:20px}
.carte li{margin-bottom:4px}

/* ---------------------------------------------------------------
   Menus du bandeau — refonte du 5 octobre 2026
   Mécanisme natif du navigateur (details/summary) : aucun JavaScript,
   fonctionne au doigt comme à la souris, et reste accessible au
   clavier.
   --------------------------------------------------------------- */
.menu{position:relative}
.menu > summary{
  list-style:none; cursor:pointer; color:var(--encre); font-size:15px; font-weight:600;
  border-bottom:1px solid var(--ligne); user-select:none;
}
.menu > summary::-webkit-details-marker{display:none}
.menu > summary::after{content:" ▾"; opacity:.7}
.menu[open] > summary::after{content:" ▴"}
.menu > .panneau{
  position:absolute; right:0; top:calc(100% + 10px); z-index:20;
  min-width:220px; background:var(--blanc); color:var(--encre);
  border:1px solid var(--ligne); border-radius:var(--rayon);
  padding:10px 0; box-shadow:0 10px 30px rgba(22,22,26,.16);
}
.menu > .panneau a{
  display:block; padding:9px 16px; color:var(--encre);
  text-decoration:none; font-size:15px; border:0;
}
.menu > .panneau a:hover{background:var(--or-clair); color:var(--encre)}
.menu > .panneau .groupe{
  margin:10px 16px 4px; font-size:12px; font-weight:600; color:var(--gris);
  text-transform:uppercase; letter-spacing:.05em;
}
.menu > .panneau .groupe:first-child{margin-top:0}

/* Lien d'ouverture d'un service, sur la page d'accueil */
.bouton-lien{
  margin-left:12px; background:var(--encre); color:var(--papier); text-decoration:none;
  border-radius:8px; padding:7px 14px; font-size:14px; font-weight:600;
  white-space:nowrap;
}
.bouton-lien:hover{background:var(--graphite)}
.service .etiquette{margin-left:auto}


/* ---------------------------------------------------------------
   Bandeau commun — refonte, étape 2 (4 novembre 2026)
   Les quatre gabarits écrivent le même bandeau (gabarit.php,
   da_bandeau) et lui donnent le service en attribut : la couleur
   du filet et de la pastille en découle directement.
   --------------------------------------------------------------- */
.bandeau[data-service="stages"]{--service:var(--bleu)}
.bandeau[data-service="timing"],
.bandeau[data-service="verification"]{--service:var(--or)}
.bandeau[data-service="circulaire"],
.bandeau[data-service="socle"]{--service:var(--encre)}

/* Le menu du service s'ouvre vers la droite, depuis la gauche du bandeau. */
.bandeau > .menu-service > .panneau{left:0; right:auto}
.bandeau .lien-service{color:var(--encre); text-decoration:none; font-weight:600; font-size:15px;
  border-bottom:1px solid var(--ligne)}
.menu-service > summary::before, .bandeau .lien-service::before{
  content:""; display:inline-block; width:9px; height:9px; border-radius:50%;
  background:var(--service); margin-right:8px; vertical-align:1px;
}
/* Un menu long (les écrans du planificateur) défile dans son panneau. */
.menu > .panneau{max-height:calc(100vh - 110px); overflow-y:auto}

/* Le dossier ouvert : un repère, pas un bouton. */
.bandeau .contexte{
  color:var(--encre); text-decoration:none; font-weight:600; font-size:15px;
  max-width:28ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  padding-left:14px; border-left:1px solid var(--ligne);
}
.bandeau .contexte:hover{text-decoration:underline; text-decoration-color:var(--or)}

/* Le menu personnel garde le poids du texte courant. */
.menu-compte > summary{font-weight:400}

/* ---------------------------------------------------------------
   Onglets du planificateur — refonte, étape 3 (5 novembre 2026)
   Une barre de cinq onglets sous le bandeau, puis les écrans de
   l'onglet ouvert en pastilles. L'onglet actif est souligné d'or :
   c'est le seul or de la barre.
   --------------------------------------------------------------- */
.onglets{background:var(--blanc); border-bottom:1px solid var(--ligne); padding:0 20px}
.onglets-rang{display:flex; gap:4px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none}
.onglets-rang::-webkit-scrollbar{display:none}
.onglets a{
  flex:none; padding:12px 12px 10px; font-size:15px; color:var(--graphite);
  text-decoration:none; border-bottom:3px solid transparent; white-space:nowrap;
}
.onglets a:hover{color:var(--encre); border-bottom-color:var(--ligne)}
.onglets a.actif{color:var(--encre); font-weight:700; border-bottom-color:var(--or)}

/* Les sous-onglets s'alignent sur la colonne de la page : même largeur
   que .page (720 px, ou 1240 px quand la page porte un tableau large). */
.sous-onglets{display:flex; flex-wrap:wrap; gap:6px; padding:16px 16px 0; max-width:720px; margin:0 auto}
@media (min-width:1000px){
  body:has(.page:not(.timing) .defilant) .sous-onglets{max-width:1240px}
}
.sous-onglets a{
  font-size:14px; padding:6px 12px; border-radius:999px; border:1px solid var(--ligne);
  background:var(--blanc); color:var(--graphite); text-decoration:none; white-space:nowrap;
}
.sous-onglets a:hover{border-color:var(--encre); color:var(--encre)}
.sous-onglets a.actif{background:var(--encre); border-color:var(--encre); color:var(--papier)}

/* Les onglets de la console « Retoucher le timing » prennent le même
   aspect que les sous-onglets du planificateur (sans effet tant que la
   console n'est pas déposée). */
.page .onglets-retouche li{background:var(--blanc); color:var(--graphite)}
.page .onglets-retouche li.actif{background:var(--encre); border-color:var(--encre); color:var(--papier)}
.page .onglets-retouche li.bientot{background:transparent; border-style:dashed; color:var(--gris)}

/* ---------------------------------------------------------------
   États et vue d'ensemble — refonte, étape 4a (9 novembre 2026)
   Six états, un seul vocabulaire pour tous les services (charte) :
   à faire, en cours, à vérifier, bloquant, prêt, publié. Toujours un
   mot avec la couleur : la couleur seule ne dit rien.
   --------------------------------------------------------------- */
.etat{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600;
  padding:3px 10px; border-radius:999px; white-space:nowrap; line-height:1.4}
.etat::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor}
.etat.afaire{background:var(--voile); color:var(--gris)}
.etat.cours{background:var(--bleu-clair); color:var(--bleu-texte)}
.etat.verif{background:var(--or-clair); color:var(--or-texte)}
.etat.bloq{background:var(--rouge-clair); color:var(--rouge)}
.etat.ok{background:var(--vert-clair); color:var(--vert)}
.etat.pub{background:var(--encre); color:var(--papier)}

/* Les quatre phases : une rangée de cartes reliées, la première qui
   reste à faire est éclairée d'or. */
ol.phases{list-style:none; margin:18px 0; padding:0; display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr)); background:var(--blanc);
  border:1px solid var(--ligne); border-radius:var(--rayon); overflow:hidden}
ol.phases li{border-right:1px solid var(--ligne); min-width:0}
ol.phases li:last-child{border-right:0}
ol.phases a{display:flex; flex-direction:column; align-items:flex-start; gap:6px; height:100%;
  padding:14px 14px 16px; color:var(--encre); text-decoration:none}
ol.phases a:hover{background:var(--voile)}
.phase-num{font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--gris)}
.phase-detail{font-size:13.5px; color:var(--graphite)}
ol.phases li.courante a{background:var(--or-clair); box-shadow:inset 0 -3px 0 var(--or)}
@media (max-width:700px){
  ol.phases{grid-template-columns:1fr 1fr}
  ol.phases li:nth-child(2){border-right:0}
  ol.phases li:nth-child(-n+2){border-bottom:1px solid var(--ligne)}
}

/* Le choix du stage en cours (edition_barre, sur tous les écrans du
   planificateur) : le bouton reprend sa taille, la flèche du menu ne
   recouvre plus le nom du stage. */
.carte > form[method="get"] button.discret{width:auto; margin-top:0}
.carte > form[method="get"] select{padding-right:34px}

/* La prochaine étape : un seul bloc à l'encre, une seule action. */
.action-suivante{display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  background:var(--encre); color:var(--papier); border-radius:var(--rayon); padding:16px 18px; margin:0 0 18px}
.action-suivante > div{flex:1 1 260px; display:flex; flex-direction:column; gap:3px}
.action-surtitre{font-size:11.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--or)}
.action-suivante strong{font-family:var(--police-titre); font-weight:600; font-size:21px}
.action-suivante span:not(.action-surtitre){font-size:14px; opacity:.85}
.action-suivante .bouton-lien{margin-left:0; background:var(--or); color:var(--encre); font-weight:700}
.action-suivante .bouton-lien:hover{background:var(--or); filter:brightness(1.08)}

/* Les points d'attention : état, phrase, lien. */
ul.points{list-style:none; margin:0; padding:0}
ul.points li{display:flex; align-items:baseline; gap:12px; padding:10px 0; border-bottom:1px solid var(--ligne); font-size:15px}
ul.points li:last-child{border-bottom:0}
.points-texte{flex:1; min-width:0}
ul.points li a{white-space:nowrap; font-weight:600}
@media (max-width:600px){ ul.points li{flex-wrap:wrap} }

/* ---------------------------------------------------------------
   Inscriptions, vue « Dossiers » — refonte, étape 4b (9 novembre 2026)
   Sur grand écran, la fiche d'un stagiaire s'ouvre à droite de la liste
   et reste visible en faisant défiler ; sur téléphone et tablette, elle
   reste au-dessus de la liste, comme avant.
   --------------------------------------------------------------- */
@media (min-width:1200px){
  .dossiers-fiche.avec-fiche{display:grid; grid-template-columns:minmax(0,1fr) 440px; gap:18px; align-items:start}
  .dossiers-fiche.avec-fiche > #fiche{grid-column:2; grid-row:1; position:sticky; top:12px;
    max-height:calc(100vh - 24px); overflow-y:auto; margin:0}
  .dossiers-fiche.avec-fiche > .suivi{grid-column:1; grid-row:1; margin:0}
  /* Dans la fiche étroite, les tableaux de coordonnées passent à la ligne. */
  .dossiers-fiche.avec-fiche > #fiche table{font-size:14px}
}

/* ---------------------------------------------------------------
   Zone sensible — refonte, étape 4d (10 novembre 2026)
   Les gestes qu'on ne rattrape pas (effacer un dossier, annuler une
   publication) : toujours en bas de page, repliés, cernés de rouge, et
   confirmés par un mot à saisir. Le bouton ne ressemble à aucun autre.
   --------------------------------------------------------------- */
details.zone-sensible{border:1px dashed var(--rouge-filet); background:var(--blanc); margin-top:36px}
details.zone-sensible > summary{cursor:pointer; color:var(--graphite)}
details.zone-sensible[open]{background:var(--rouge-clair); border-style:solid}
.zone-sensible-titre{display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--rouge); margin-right:8px}
.zone-sensible button.danger{
  width:auto; background:var(--blanc); color:var(--rouge); border:1px solid var(--rouge); font-weight:700}
.zone-sensible button.danger:hover{background:var(--rouge); color:var(--blanc)}
/* 11/11/2026 (étape 4e) : une page de confirmation (timing, circulaire) — la zone, déjà ouverte. */
.carte.zone-sensible:not(details){border:1px solid var(--rouge-filet); background:var(--rouge-clair)}
.zone-sensible .lien-suppr{font-weight:600}

/* Sur téléphone, le panneau occupe toute la largeur utile */
@media (max-width:600px){
  .menu > .panneau{position:static; min-width:0; margin:8px 0; box-shadow:none; max-height:none}
  .bandeau .contexte{max-width:100%; border-left:0; padding-left:0}
  /* Un menu ouvert prend toute la ligne : le reste du bandeau ne se
     retrouve pas centré à côté d'un long panneau. */
  .bandeau .menu[open]{flex-basis:100%}
  .onglets{padding:0 8px}
  .onglets a{padding:11px 9px 9px; font-size:14.5px}
  /* Les cinq onglets ne tiennent pas sur un téléphone : la barre défile,
     et son bord droit s'estompe pour le montrer. */
  .onglets-rang{-webkit-mask-image:linear-gradient(to right,#000 82%,transparent);
                mask-image:linear-gradient(to right,#000 82%,transparent)}
  .sous-onglets{padding:12px 14px 0}
  .bandeau nav{gap:10px}
}

/* Impression — la version de secours pour le lieu du stage (Q25).
   -----------------------------------------------------------------
   Aucune bibliothèque à installer : le navigateur sait déjà produire
   un PDF, à condition qu'on lui donne une page faite pour le papier.
   On retire donc le bandeau, les formulaires et les boutons, qui n'ont
   aucun sens imprimés, et l'on empêche une carte d'être coupée en deux
   par un saut de page. */
/* ---------------------------------------------------------------
   Impression — refonte du 8 octobre 2026
   Le planning d'un membre sortait sur sept pages : chaque cours
   occupait trois lignes (l'heure, le titre, l'étiquette renvoyée à la
   ligne), et « break-inside: avoid » poussait toute journée qui ne
   tenait plus en bas de feuille sur la suivante, en laissant du blanc.
   Ici on fait l'inverse : un cours = une ligne, les cartes perdent
   leurs bordures et leurs marges, et tout ce qui sert à AGIR (menus,
   formulaires, boutons, propositions à répondre) disparaît — sur
   papier, on ne clique pas. Le planning d'une semaine tient alors sur
   une feuille.
   --------------------------------------------------------------- */
/* Journal des opérations : le détail d'une ligne peut être long
   (un filtre, une liste). Il se replie dans sa cellule plutôt que
   d'élargir la table et de forcer un défilement horizontal. */
td.detail{white-space:normal; overflow-wrap:anywhere; max-width:46ch}

@media print {
  @page{margin:12mm 12mm 10mm}
  body{background:#fff; color:#000; padding:0; font:9.5pt/1.32 "Segoe UI",system-ui,Helvetica,Arial,sans-serif}
  .page{max-width:none; padding:0}
  .bandeau, .pied, .menu, .onglets, .sous-onglets, .sans-impression, form, button, .bouton-lien{display:none !important}

  /* Les cartes ne sont plus des boîtes : un simple filet les sépare. */
  .carte{break-inside:avoid; page-break-inside:avoid;
         background:none; border:0; border-top:.5pt solid #bbb; border-radius:0;
         box-shadow:none; margin:0; padding:5px 0 3px}
  .carte:first-of-type{border-top:0}

  h1{font-size:14pt; margin:0 0 2px}
  h2{font-size:10.5pt; margin:0 0 3px !important}
  h3{font-size:8.5pt; margin:5px 0 2px}
  .sous{margin:0 0 6px}
  .sous, .aide, .petit{font-size:8pt; color:#333}
  p{margin:0 0 2px}
  .message{border:0; background:none !important; color:#000 !important;
           font-size:8.5pt; font-style:italic; padding:0; margin:0 0 4px}

  /* UN COURS = UNE LIGNE. Le retour à la ligne entre l'heure et le
     titre disparaît, et l'étiquette redevient du texte à la suite. */
  .ligne{display:block; padding:1px 0; border-bottom:0}
  .ligne br{display:none}
  .ligne p{margin:0}
  .ligne .petit{color:#000}
  .etiquette{display:inline; margin:0 0 0 5px; padding:0;
             border:0 !important; border-radius:0;
             background:none !important; color:#000 !important;
             font-size:8pt; font-weight:400}
  .etiquette::before{content:"\00b7\00a0"}
  .etiquette.neuf{font-weight:700}

  table{font-size:8.5pt}
  th, td{padding:2px 6px}
  a{color:#000; text-decoration:none}
  .defilant{overflow:visible}
  table.dossiers, table.planning{min-width:0; width:100%}
}

/* ---------------------------------------------------------------
   Présentation du stage — 11 novembre 2026
   La saisie (écran de l'édition) et l'affichage, en haut du formulaire
   public d'inscription : une carte sobre, filet d'or à gauche, comme
   un mot d'accueil de l'organisateur.
   --------------------------------------------------------------- */
textarea.saisie-texte{display:block; width:100%; box-sizing:border-box; padding:11px 12px;
  border:1px solid var(--ligne); border-radius:8px; font:inherit; background:#fff;
  resize:vertical; min-height:9em}
textarea.saisie-texte:focus{outline:2px solid var(--or-texte); outline-offset:1px; border-color:var(--encre)}
.carte.presentation-stage{border-left:4px solid var(--or); background:var(--or-voile); line-height:1.55}
.presentation-stage p{margin:0 0 10px}
.presentation-stage p:last-child{margin-bottom:0}

/* ---------------------------------------------------------------
   Espaces du stagiaire et du professeur sur téléphone — refonte,
   étape 5b (11 novembre 2026)
   Les cours particuliers en or, les séances collectives en encre ;
   une pastille par jour ; trois rubriques en bas de l'écran du
   stagiaire. Le script ne fait que masquer : à l'impression, tout
   réapparaît.
   --------------------------------------------------------------- */
.ligne.cours-particulier, .ligne.cours-collectif{padding-left:12px; border-left:3px solid var(--encre)}
.ligne.cours-particulier{border-left-color:var(--or)}
.etiquette.particulier{background:var(--or-clair); color:var(--or-texte)}
.etiquette.collectif{background:var(--encre); color:var(--papier)}
/* Deux étiquettes à la suite (« Particulier », « modifié ») restent côte à côte. */
.carte.jour .ligne .etiquette ~ .etiquette, .rubrique .ligne .etiquette ~ .etiquette{margin-left:0}
/* Une étiquette dans un titre garde la police du texte et tient sur une ligne. */
.rubrique h2 .etiquette, .page h2 > .etiquette.neuf{font-family:var(--police-texte); font-size:13px;
  vertical-align:middle; white-space:nowrap}

.rubrique[hidden], .carte.jour[hidden]{display:none}

.jours-onglets{display:flex; gap:6px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  position:sticky; top:0; z-index:5; background:var(--fond); padding:8px 0 10px; margin:0 0 6px}
.jours-onglets::-webkit-scrollbar{display:none}
.jours-onglets a{flex:0 0 auto; padding:8px 14px; border:1px solid var(--ligne); border-radius:999px;
  background:var(--blanc); color:var(--graphite); text-decoration:none; font-size:15px; font-weight:600; white-space:nowrap}
.jours-onglets a:hover{border-color:var(--encre); color:var(--encre)}
.jours-onglets a.actif{background:var(--encre); border-color:var(--encre); color:var(--papier)}

.rubriques{display:flex; gap:6px; margin:4px 0 16px}
.rubriques a{display:flex; align-items:center; gap:7px; padding:8px 15px; border:1px solid var(--ligne);
  border-radius:999px; background:var(--blanc); color:var(--graphite); text-decoration:none; font-weight:600}
.rubriques a:hover{border-color:var(--encre); color:var(--encre)}
.rubriques a.actif{background:var(--encre); border-color:var(--encre); color:var(--papier)}
.rubrique-icone{display:inline-flex}
.rubrique-icone svg{width:19px; height:19px}

/* Ce qui a changé depuis la dernière visite : un point d'or. */
.jours-onglets a.neuf::after, .rubriques a.neuf > span:last-child::after{
  content:""; display:inline-block; width:7px; height:7px; margin-left:6px; border-radius:50%;
  background:var(--or); vertical-align:middle}

@media (max-width:700px){
  /* Les rubriques en bas de l'écran, à portée de pouce. */
  .rubriques{position:fixed; left:0; right:0; bottom:0; z-index:40; margin:0; gap:0;
    display:grid; grid-auto-flow:column; grid-auto-columns:1fr;
    background:var(--blanc); border-top:1px solid var(--ligne);
    padding:0 0 env(safe-area-inset-bottom); box-shadow:0 -4px 14px rgba(26,26,26,.06)}
  .rubriques a{flex-direction:column; gap:3px; border:0; border-radius:0; padding:9px 4px 8px;
    background:none; font-size:12.5px; color:var(--gris); border-top:3px solid transparent}
  .rubriques a.actif{background:none; color:var(--encre); border-top-color:var(--or)}
  .rubrique-icone svg{width:22px; height:22px}
  .page:has(.rubriques){padding-bottom:96px}
  .page:has(.rubriques) ~ .pied{padding-bottom:96px}
}

@media print {
  .rubrique[hidden], .carte.jour[hidden]{display:block !important}
  .ligne.cours-particulier, .ligne.cours-collectif{border-left:0; padding-left:0}
}

/* ---------------------------------------------------------------
   Le logo du client en tête — refonte, étape 5c (11 novembre 2026)
   Sur les pages des stagiaires et des professeurs, et sur le
   formulaire d'inscription : le logo de l'organisateur du stage prend
   la place de la marque DansAssist, qui passe en pied de page.
   --------------------------------------------------------------- */
.logo-client{display:inline-flex; align-items:center; line-height:0}
.logo-client img{display:block; height:44px; width:auto; max-width:220px; object-fit:contain}
@media (max-width:600px){ .logo-client img{height:38px; max-width:170px} }
/* À l'impression, le bandeau reste masqué : la feuille du 8 octobre ne change pas. */