/* Le Fil B0 — absolument aucune règle ne s'applique à l'interface classique. */
[data-interface="fil"] {
  --f-fond: #f5f3ee; --f-surface: #fffdfa; --f-surface-2: #f6f3ee;
  --f-encre: #17150f; --f-encre-2: #5c574e; --f-encre-3: #8f897e;
  --f-filet: rgba(23,21,15,.09); --f-preparer: #17549e; --f-vivre: #8b1d79; --f-cloturer: #5d4196;
  --f-attention: #b45309; --f-urgent: #b42318; --f-fait: #2f6b45;
  --f-sur-moment: #fffdfa; --f-vivre-texte: #8b1d79;
  --f-spring: cubic-bezier(.2,.9,.25,1);
  background: var(--f-fond); color: var(--f-encre);
}
[data-interface="fil"][data-theme="sombre"] {
  --f-fond: #171512; --f-surface: #201d19; --f-surface-2: #27231e;
  --f-encre: #ece5d8; --f-encre-2: #b4ab9b; --f-encre-3: #867e71;
  --f-filet: rgba(236,229,216,.11); --f-attention: #e7a35f; --f-urgent: #f0806f; --f-fait: #8cc49f; --f-vivre-texte: #d98bc9;
}
[data-interface="fil"] body { background: var(--f-fond); color: var(--f-encre); }
[data-interface="fil"] [data-header], [data-interface="fil"] [data-nav-bas] { display: none; }
[data-interface="fil"] [data-app] { padding: 78px 0 96px; min-width: 0; }
[data-interface="fil"] .f-coquille { color: var(--f-encre); font: 400 16px/1.5 Inter, system-ui, sans-serif; }
[data-interface="fil"] .f-coquille *, [data-interface="fil"] .f-page * { box-sizing: border-box; }
[data-interface="fil"] .f-top { position: fixed; inset: 0 0 auto; z-index: 55; padding: 10px 16px; min-height: 68px; display: flex; align-items: center; gap: 8px; background: var(--f-fond); border-bottom: 1px solid var(--f-filet); }
[data-interface="fil"] .f-top [data-fil-contexte] { margin-right: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-interface="fil"] .f-top [data-fil-contexte] { flex: 1; max-width: none; }
[data-interface="fil"] .f-top > .f-bouton:not([data-fil-contexte]) { flex: none; }
[data-interface="fil"] .f-avatar, [data-interface="fil"] [data-fil-retour] { width: 48px; height: 48px; padding: 0; display: inline-flex; justify-content: center; align-items: center; }
[data-interface="fil"] .f-avatar { border-radius: 50%; font-size: 16px; }
[data-interface="fil"] .f-bouton, [data-interface="fil"] .f-select { font: 500 14px/1.4 Inter, system-ui, sans-serif; background: var(--f-surface); color: var(--f-encre); border: 1px solid var(--f-filet); border-radius: 14px; min-height: 48px; padding: 10px 14px; cursor: pointer; }
[data-interface="fil"] .f-bouton:hover, [data-interface="fil"] .f-lien:hover { background: var(--f-surface-2); }
[data-interface="fil"] .f-bouton[aria-pressed="true"] { background: var(--f-encre); color: var(--f-fond); }
[data-interface="fil"] .f-lien { color: var(--f-encre); text-decoration: none; min-height: 48px; padding: 12px 4px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--f-filet); overflow-wrap: anywhere; font-size: 14px; }
[data-interface="fil"] .f-ico, [data-interface="fil"] .f-ico svg { width: 22px; height: 22px; flex: none; }
[data-interface="fil"] svg.ico { stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
[data-interface="fil"] .f-bottom { position: fixed; inset: auto 0 0; z-index: 55; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--f-surface); border-top: 1px solid var(--f-filet); padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)); }
[data-interface="fil"] .f-bottom .f-lien { flex-direction: column; gap: 4px; justify-content: center; border: 0; border-radius: 14px; min-height: 62px; padding: 8px 4px; font-size: 12px; }
[data-interface="fil"] .f-lien[aria-current="page"] { background: var(--f-surface-2); font-weight: 600; }
[data-interface="fil"] .f-sidebar { display: none; }
[data-interface="fil"] .f-page { position: relative; padding: 20px; max-width: 1280px; margin: 0 auto; color: var(--f-encre); font: 400 16px/1.5 Inter, system-ui, sans-serif; }
[data-interface="fil"] .f-titre { font: 400 30px/1.15 'Instrument Serif', Georgia, serif; margin: 0 0 10px; }
[data-interface="fil"] .f-sous { color: var(--f-encre-2); font: 400 14px/1.5 Inter, system-ui, sans-serif; margin: 0 0 12px; }
[data-interface="fil"] .f-fil-droite { display: none; }
[data-interface="fil"] .f-voile { position: fixed; inset: 0; z-index: 200; background: var(--f-filet); display: flex; align-items: flex-end; justify-content: center; padding: 14px; }
[data-interface="fil"] .f-feuille { background: var(--f-surface); border: 1px solid var(--f-filet); color: var(--f-encre); border-radius: 30px; padding: 22px; width: min(100%, 480px); max-height: calc(100dvh - 28px); overflow: auto; display: flex; flex-direction: column; gap: 8px; animation: f-feuille 380ms var(--f-spring); }
[data-interface="fil"] .f-feuille h2 { font: 600 24px/1.3 Inter, system-ui, sans-serif; margin: 8px 0; }
[data-interface="fil"] .f-feuille > .f-bouton:first-child { align-self: flex-end; }
[data-interface="fil"] .f-themes { display: flex; flex-wrap: wrap; gap: 6px; padding-block: 14px; }
[data-interface="fil"] .f-themes p { flex-basis: 100%; margin: 0; }
[data-interface="fil"] .f-label { font-size: 14px; }
[data-interface="fil"] :focus-visible { outline: 2px solid var(--f-encre); outline-offset: 3px; }
/* B0.2 — la plateforme visible : peu de texte, un pictogramme par fonction, couleur de moment seulement pour « en cours ». */
[data-interface="fil"] .f-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[data-interface="fil"] .f-chercher { width: 48px; padding: 0; display: inline-flex; justify-content: center; align-items: center; }
[data-interface="fil"] .f-barre { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 6px; }
[data-interface="fil"] .f-segments { display: inline-flex; flex: 0 1 auto; min-width: 0; gap: 4px; padding: 4px; background: var(--f-surface-2); border: 1px solid var(--f-filet); border-radius: 14px; }
[data-interface="fil"] .f-segment { display: inline-flex; align-items: center; justify-content: center; flex: 1 1 0; min-height: 44px; min-width: 0; padding: 0 16px; border-radius: 10px; white-space: nowrap; color: var(--f-encre-2); text-decoration: none; font: 500 14px/1 Inter, system-ui, sans-serif; }
[data-interface="fil"] .f-segment[aria-current="page"] { background: var(--f-encre); color: var(--f-fond); }
[data-interface="fil"] .f-creer { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px; border-radius: 14px; background: var(--f-encre); color: var(--f-fond); text-decoration: none; font: 600 14px/1 Inter, system-ui, sans-serif; }
[data-interface="fil"] .f-creer .f-ico, [data-interface="fil"] .f-creer .f-ico svg { width: 18px; height: 18px; }
/* Trois segments (Colo · ADL · Périscolaire) au téléphone : ils prennent la largeur, « Créer » devient le seul « + » (libellé en infobulle et lecteur d'écran). */
@media (max-width: 520px) {
  [data-interface="fil"] .f-segments { flex: 1 1 auto; }
  [data-interface="fil"] .f-segment { padding: 0 8px; font-size: 13px; }
  [data-interface="fil"] .f-creer { flex: 0 0 48px; justify-content: center; padding: 0; }
  [data-interface="fil"] .f-creer > span:not(.f-ico) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
[data-interface="fil"] .f-etiquette { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font: 600 14px/1.4 Inter, system-ui, sans-serif; color: var(--f-encre-2); }
[data-interface="fil"] .f-compte, [data-interface="fil"] .f-nombre { font: 500 14px/1 Inter, system-ui, sans-serif; color: var(--f-encre-2); }
[data-interface="fil"] .f-groupe-liste, [data-interface="fil"] .f-groupe-tuiles { margin: 24px 0 0; }
[data-interface="fil"] .f-vide { margin: 28px 0; color: var(--f-encre-2); }
[data-interface="fil"] .f-projet { display: flex; align-items: center; gap: 12px; min-height: 68px; padding: 12px 4px; border-bottom: 1px solid var(--f-filet); color: var(--f-encre); text-decoration: none; min-width: 0; }
[data-interface="fil"] .f-projet-texte { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
[data-interface="fil"] .f-projet strong { font: 600 16px/1.35 Inter, system-ui, sans-serif; overflow-wrap: anywhere; }
[data-interface="fil"] .f-projet .f-sous { margin: 0; overflow-wrap: anywhere; }
[data-interface="fil"] .f-projet--en_cours { background: var(--f-vivre); color: var(--f-sur-moment); border: 0; border-radius: 18px; padding: 14px 16px; margin: 4px 0 6px; }
[data-interface="fil"] .f-projet--en_cours .f-sous, [data-interface="fil"] .f-projet--en_cours .f-puce { color: var(--f-sur-moment); }
[data-interface="fil"] .f-projet--en_cours .f-puce { border-color: var(--f-sur-moment); }
[data-interface="fil"] .f-projet--faits strong { font-weight: 500; color: var(--f-encre-2); }
[data-interface="fil"] .f-coche, [data-interface="fil"] .f-coche svg { width: 20px; height: 20px; flex: none; color: var(--f-fait); }
[data-interface="fil"] .f-puce { flex: none; display: inline-block; font: 500 12px/1 Inter, system-ui, sans-serif; padding: 7px 10px; border: 1px solid var(--f-filet); border-radius: 99px; color: var(--f-encre-2); white-space: nowrap; }
[data-interface="fil"] .f-puce--cours { background: var(--f-vivre); border-color: var(--f-vivre); color: var(--f-sur-moment); }
[data-interface="fil"] .f-tete { margin: 0 0 18px; }
[data-interface="fil"] .f-tete .f-titre { margin: 0 0 8px; overflow-wrap: anywhere; }
[data-interface="fil"] .f-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; font: 400 14px/1.4 Inter, system-ui, sans-serif; color: var(--f-encre-2); }
[data-interface="fil"] .f-raccourcis, [data-interface="fil"] .f-tuiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
[data-interface="fil"] .f-tuile { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 14px; min-width: 0; background: var(--f-surface); border: 1px solid var(--f-filet); border-radius: 18px; color: var(--f-encre); text-decoration: none; font: 500 14px/1.25 Inter, system-ui, sans-serif; }
[data-interface="fil"] .f-tuile:hover { background: var(--f-surface-2); }
[data-interface="fil"] .f-tuile .f-court { min-width: 0; overflow-wrap: anywhere; }
[data-interface="fil"] .f-groupe-tuiles .f-etiquette { margin-bottom: 8px; }
[data-interface="fil"] .f-domaines-liste { margin-top: 26px; }
[data-interface="fil"] .f-ligne { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 8px 4px; border-bottom: 1px solid var(--f-filet); color: var(--f-encre); text-decoration: none; font: 500 16px/1.3 Inter, system-ui, sans-serif; }
[data-interface="fil"] .f-ligne:hover { background: var(--f-surface-2); }
[data-interface="fil"] .f-ligne .f-court { flex: 1; min-width: 0; overflow-wrap: anywhere; }
[data-interface="fil"] .f-chevron, [data-interface="fil"] .f-chevron svg { width: 18px; height: 18px; flex: none; color: var(--f-encre-3); }
[data-interface="fil"] .f-domaine { display: none; min-width: 0; }
[data-interface="fil"] .f-page--domaine .f-domaine[data-fil-actif] { display: block; }
[data-interface="fil"] .f-page--domaine .f-tete, [data-interface="fil"] .f-page--domaine .f-raccourcis, [data-interface="fil"] .f-page--domaine .f-domaines-liste { display: none; }
[data-interface="fil"] .f-zone { display: block; }
[data-interface="fil"] .f-titre-domaine { margin: 0 0 10px; }
[data-interface="fil"] .f-recents { display: none; }
/* Les composants actuels gardent leur DOM et leur thème : seuls les accents décoratifs de la nouvelle coquille sont neutralisés. */
[data-interface="fil"] [data-tete-page] .bande { background: var(--f-surface); color: var(--f-encre); }
[data-interface="fil"] [data-app] .c-volet { background: var(--f-surface); color: var(--f-encre); border-color: var(--f-filet); }
[data-interface="fil"] [data-app] .btn-primary { background: var(--f-encre); color: var(--f-fond); }
@keyframes f-feuille { from { opacity: 0; transform: translateY(14px); } }
@supports (transition-timing-function: linear(0, 1)) {
  [data-interface="fil"] { --f-spring: linear(0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%, 0.937 38.1%, 0.968 41.8%, 0.991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001 85.4%, 1); }
}
@media (min-width: 900px) {
  [data-interface="fil"] [data-app] { margin-left: 244px; padding: 86px 20px 40px; }
  [data-interface="fil"] .f-top { left: 244px; padding-inline: 28px; }
  [data-interface="fil"] .f-bottom { display: none; }
  [data-interface="fil"] .f-sidebar { display: flex; flex-direction: column; gap: 14px; position: fixed; inset: 0 auto 0 0; width: 244px; z-index: 60; background: var(--f-surface); padding: 22px 18px; border-right: 1px solid var(--f-filet); overflow-y: auto; }
  [data-interface="fil"] .f-sidebar > .f-lien:first-child { font-size: 18px; letter-spacing: .15em; font-weight: 600; }
  [data-interface="fil"] .f-navigation { display: grid; gap: 4px; }
  [data-interface="fil"] .f-navigation .f-lien { border: 0; border-radius: 14px; padding-inline: 12px; font-size: 16px; }
  [data-interface="fil"] .f-voile { align-items: center; }
  [data-interface="fil"] .f-page:has([data-fil-droite]) { padding-right: 340px; }
  [data-interface="fil"] .f-fil-droite { display: block; position: absolute; right: 0; top: 20px; width: 310px; border-left: 1px solid var(--f-filet); padding-left: 20px; }
  [data-interface="fil"] .f-fil-droite h2 { font: 400 30px/1.15 'Instrument Serif', Georgia, serif; }
  [data-interface="fil"] .f-accueil-droite { font-size: 14px; overflow-wrap: anywhere; }
  [data-interface="fil"] .f-accueil-droite .wrap { width: 100%; padding: 0; }
  [data-interface="fil"] .f-accueil-droite .titre-1 { font-size: 24px; }
  [data-interface="fil"] .f-accueil-droite .ac-volets, [data-interface="fil"] .f-accueil-droite .ac-grille, [data-interface="fil"] .f-accueil-droite .ac-sejours { display: block; }
  [data-interface="fil"] .f-accueil-droite .c-volet { padding: 14px 0; }
}
@media (min-width: 900px) and (max-width: 1199px) {
  [data-interface="fil"] .f-page:has([data-fil-droite]) { padding-right: 280px; }
  [data-interface="fil"] .f-fil-droite { width: 254px; }
}
@media (prefers-reduced-motion: reduce) {
  [data-interface="fil"] .f-feuille { animation: none; }
  [data-interface="fil"] *, [data-interface="fil"] *::before, [data-interface="fil"] *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; }
}
/* L'accueil historique est empilé dans sa colonne : ses grilles bureau pleine page ne doivent pas y garder leurs colonnes intrinsèques. */
@media (min-width: 900px) {
  [data-interface="fil"] .f-accueil-droite .tete-ligne,
  [data-interface="fil"] .f-accueil-droite .volet-corps,
  [data-interface="fil"] .f-accueil-droite .entrees,
  [data-interface="fil"] .f-accueil-droite .prio-liste,
  [data-interface="fil"] .f-accueil-droite .mission { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  [data-interface="fil"] .f-accueil-droite .tete-actions { align-items: flex-start; max-width: 100%; margin-top: 14px; }
  [data-interface="fil"] .f-accueil-droite .page-titre { font-size: 24px; line-height: 1.2; }
  [data-interface="fil"] .f-accueil-droite .volet-mot { font-size: 24px; line-height: 1.2; }
  [data-interface="fil"] .f-accueil-droite .volet-tete { position: static; }
  [data-interface="fil"] .f-accueil-droite .volet { padding-block: 20px; background: var(--f-surface); --texte: var(--f-encre); --texte-2: var(--f-encre-2); --texte-3: var(--f-encre-2); --ligne: var(--f-filet); --ligne-2: var(--f-filet); }
  [data-interface="fil"] .f-accueil-droite .mission-droite { grid-column: 1; justify-items: start; }
  [data-interface="fil"] .f-accueil-droite button,
  [data-interface="fil"] .f-accueil-droite .btn { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
}
[data-interface="fil"] [data-app] .c-btn-plein { background: var(--f-encre); color: var(--f-fond); border-color: var(--f-encre); }
@media (min-width: 900px) {
  [data-interface="fil"] .f-accueil-droite .pfc { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  [data-interface="fil"] .f-accueil-droite .pfc-bas { grid-column: 1; }
  [data-interface="fil"] .f-accueil-droite .pfc .volet-mot { font-size: 24px; }
  [data-interface="fil"] .f-accueil-droite .pfc-anneau-n b { font-family: Inter, system-ui, sans-serif; }
  [data-interface="fil"] .f-accueil-droite .c-btn { max-width: 100%; min-height: 48px; white-space: normal; }
}

/* B0.2 bureau : barre latérale réduite, raccourcis en une rangée, domaines en onglets, tuiles en grille souple. */
@media (min-width: 900px) {
  [data-interface="fil"] .f-top .f-chercher { display: none; }
  [data-interface="fil"] .f-sidebar > .f-lien:first-child { min-height: 48px; }
  [data-interface="fil"] .f-recents { display: flex; flex-direction: column; margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--f-filet); }
  [data-interface="fil"] .f-recents .f-lien { min-height: 44px; padding: 8px 12px; border: 0; border-radius: 12px; font-size: 14px; color: var(--f-encre-2); }
  [data-interface="fil"] .f-recents .f-lien::before { content: ''; width: 8px; height: 8px; flex: none; border-radius: 50%; background: transparent; }
  [data-interface="fil"] .f-recents .f-lien[data-fil-cours] { color: var(--f-encre); }
  [data-interface="fil"] .f-recents .f-lien[data-fil-cours]::before { background: var(--f-vivre-texte); }
  /* Séjours : les groupes côte à côte (En cours, À venir, Faits), la barre et l'état vide sur toute la largeur. */
  [data-interface="fil"] .f-page--liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); column-gap: 40px; align-content: start; }
  [data-interface="fil"] .f-page--liste > .f-barre, [data-interface="fil"] .f-page--liste > .f-vide { grid-column: 1 / -1; }
  [data-interface="fil"] .f-page--liste > .f-groupe-liste { margin-top: 28px; min-width: 0; }
  [data-interface="fil"] .f-raccourcis { grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 8px; }
  [data-interface="fil"] .f-tuile--haute { flex-direction: column; justify-content: center; gap: 8px; min-height: 92px; padding: 14px 4px; text-align: center; }
  [data-interface="fil"] .f-top [data-fil-contexte] { flex: 0 1 auto; max-width: 420px; }
  [data-interface="fil"] .f-tuiles { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
  [data-interface="fil"] .f-titre-domaine { display: none; }
  [data-interface="fil"] .f-zone { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 32px; align-items: start; margin-top: 32px; }
  [data-interface="fil"] .f-domaines-liste, [data-interface="fil"] .f-page--domaine .f-domaines-liste { display: block; margin-top: 0; }
  [data-interface="fil"] .f-domaines-liste .f-ligne { min-height: 48px; padding: 6px 12px; border-bottom: 0; border-radius: 12px; font-size: 14px; }
  [data-interface="fil"] .f-domaines-liste .f-ligne[aria-current="page"] { background: var(--f-surface-2); font-weight: 600; }
  [data-interface="fil"] .f-domaines-liste .f-chevron { display: none; }
  [data-interface="fil"] .f-domaines-liste .f-etiquette { padding-left: 12px; }
  [data-interface="fil"] .f-domaines { margin-top: 28px; }
  [data-interface="fil"] .f-domaine[data-fil-actif], [data-interface="fil"] .f-page--domaine .f-domaine[data-fil-actif] { display: block; }
  [data-interface="fil"] .f-page--domaine .f-tete { display: block; }
  [data-interface="fil"] .f-page--domaine .f-raccourcis { display: grid; }
  [data-interface="fil"] .f-lignes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); column-gap: 28px; }
}

/* Démarrage (index.html pose data-interface="fil" et data-demarrage avant le premier rendu) : la page statique de la plateforme (accueil classique, pied de page)
   reste cachée jusqu'à ce que la coque soit montée (Fil.finDemarrage) ; seul le chargement s'affiche, en jetons du Fil. Entête et navigation basse classiques sont déjà masqués plus haut. */
[data-interface="fil"][data-demarrage] [data-app] > :not(.app-loading) { visibility: hidden; }
[data-interface="fil"] .app-loading { color: var(--f-encre-2); }
[data-interface="fil"] .app-loading .load-row { font: 400 14px/1.4 Inter, system-ui, sans-serif; letter-spacing: 0; color: var(--f-encre-2); }
[data-interface="fil"] .app-loading .skel-card { background: var(--f-surface); border: 1px solid var(--f-filet); border-radius: 14px; }
[data-interface="fil"] .app-loading .skel { background-image: linear-gradient(90deg, var(--f-surface-2) 25%, var(--f-filet) 50%, var(--f-surface-2) 75%); }
/* La porte (connexion, landing) : même fond et même surface que le Fil, sans changer de teinte entre le premier rendu et l'écran de connexion. */
[data-interface="fil"] .auth-gate { background: var(--f-fond); color: var(--f-encre); }
[data-interface="fil"] .auth-card { background: var(--f-surface); border-color: var(--f-filet); box-shadow: none; }