/* La Tour de Linge : feuille de style. Aucune dépendance externe, polices système. */
:root {
  --fond: #f4f9fa;
  --fond-2: #e6f1f3;
  --surface: #ffffff;
  --encre: #333739;           /* anthracite du logo */
  --encre-2: #4a5154;
  --discret: #5d676b;
  --trait: #d3e2e6;
  --eau: #0a7480;             /* accent : texte et boutons (contraste AA) */
  --eau-vif: #29b6c8;         /* décor seulement */
  --eau-doux: #d5eef2;
  --libre: #1c7a45; --libre-doux: #d9f0e2;
  --termine: #8a5200; --termine-doux: #fdecc8;
  --hs: #5d676b; --hs-doux: #e4eaec;
  --sur-bouton: #ffffff;
  --bande: #333739; --bande-encre: #f1f6f7;
  --bandeau: #e3f1f4; --bandeau-2: #f4f9fa;
  --ombre: 0 1px 2px rgb(51 55 57 / .08), 0 6px 16px -8px rgb(10 116 128 / .22);
  --rayon: 14px;
  --titre: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --sans: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --largeur: 760px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fond: #121a1d; --fond-2: #182226; --surface: #1c282c;
    --encre: #e6eef0; --encre-2: #c3d0d4; --discret: #9fb0b5; --trait: #2e3f45;
    --eau: #5cc8d6; --eau-vif: #5cc8d6; --eau-doux: #153940;
    --libre: #6fd69a; --libre-doux: #153a26;
    --termine: #f3bf63; --termine-doux: #3d2f12;
    --hs: #a3b2b7; --hs-doux: #263338;
    --sur-bouton: #0e1619;
    --bande: #0c1315; --bande-encre: #e6eef0;
    --bandeau: #1a2f35; --bandeau-2: #121a1d;
    --ombre: 0 1px 2px rgb(0 0 0 / .4), 0 8px 18px -8px rgb(0 0 0 / .6);
  }
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth;  }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body { margin: 0; background: var(--fond); color: var(--encre); font: 16px/1.45 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3 { font-family: var(--titre); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; margin: 0 0 .5em; text-wrap: balance; }
h1 { font-size: 1.25rem; }
h2 { font-size: 1.1rem; }
h3 { font-size: 1rem; }
:focus-visible { outline: 3px solid var(--eau); outline-offset: 3px; border-radius: 8px; }
.evitement { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--encre); color: var(--fond); padding: .6em 1em; border-radius: 10px; }
.evitement:focus { left: 8px; }
.conteneur { width: min(100% - 32px, var(--largeur)); margin-inline: auto; }
.visuellement-cache { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }

/* Boutons (404) */
.bouton { display: inline-flex; align-items: center; gap: .5em; font: 700 1rem/1 var(--titre); padding: .9em 1.3em; border-radius: 999px; text-decoration: none; border: 2px solid transparent; }
.bouton-plein { background: var(--eau); color: var(--sur-bouton); }

/* En-tête : fine bande d'accent, fond teinté, logo affirmé, sous-titre */
.entete { position: relative; background: linear-gradient(180deg, var(--bandeau), var(--bandeau-2)); border-bottom: 1px solid var(--trait); }
.entete::before { content: ""; display: block; height: 4px; background: linear-gradient(90deg, var(--eau-vif), var(--eau) 55%, var(--encre)); }
.entete .conteneur { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 58px; position: relative; }
.entete .conteneur.sous { display: block; min-height: 0; padding-bottom: .75rem; margin-top: -.15rem; }
.entete h1 { margin: 0; font-size: 1.12rem; line-height: 1.25; }
.entete .h1-a { display: block; color: var(--encre); }
.entete .h1-b { display: block; margin-top: .1rem; font: 600 .9rem/1.3 var(--sans); letter-spacing: 0; color: var(--encre-2); }
.entete .h1-sep { display: none; }
@media (min-width: 640px) {
  .entete .h1-a, .entete .h1-b { display: inline; }
  .entete .h1-sep { display: inline; color: var(--eau); }
  .entete h1 { font-size: 1.2rem; }
  .entete .h1-b { font-size: 1.05rem; }
  .marque img { height: 40px !important; }
}
.marque { display: inline-flex; align-items: center; text-decoration: none; line-height: 0; flex: none; min-width: 0; }
.marque img { height: 32px; width: auto; max-width: 100%; }
.lien, .note a { color: var(--eau); text-underline-offset: 3px; }
.lien svg { display: inline-block; width: .8em; height: .8em; margin-left: .2em; vertical-align: -.05em; }
.etiquette { display: inline-block; font: 800 .75rem/1 var(--titre); letter-spacing: .14em; text-transform: uppercase; color: var(--eau); margin-bottom: .6rem; }
.note { font-size: .9rem; color: var(--discret); border-left: 3px solid var(--eau-vif); padding-left: .8rem; }

main { padding-top: .9rem; }
.titre-page { margin: 0 0 .6rem; font-size: 1rem; font-weight: 700; color: var(--encre-2); }
main > *:not(.page-simple) { width: min(100% - 32px, var(--largeur)); margin-inline: auto; }

/* Occupation : résumé + tuiles */
.panneau { background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); box-shadow: var(--ombre); padding: .8rem; min-width: 0; }
.panneau-tete { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; margin-bottom: .4rem; }
.badge-demo { font: 700 .68rem/1 var(--titre); letter-spacing: .08em; text-transform: uppercase; color: var(--termine); background: var(--termine-doux); padding: .4em .65em; border-radius: 999px; }
.maj { margin-left: auto; font-size: .78rem; color: var(--discret); }
.resume { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .7rem; }
.pastille { --c: var(--libre); --c-doux: var(--libre-doux); flex: 1 1 8.5rem; margin: 0; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--c) 35%, var(--trait)); background: linear-gradient(135deg, var(--c-doux), color-mix(in srgb, var(--c-doux) 55%, var(--surface))); color: var(--c); padding: .45rem .7rem; min-width: 0; }
.pastille.complet { --c: var(--termine); --c-doux: var(--termine-doux); }
.pastille-vis { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .1rem .55rem; }
.pastille-vis .lib { grid-column: 1 / -1; }
.pastille-ico { width: 1.9rem; height: 1.9rem; flex: none; stroke: currentColor; }
.chiffre { justify-self: start; font: 800 2.1rem/1 var(--titre); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.chiffre small { font-size: 1.1rem; font-weight: 700; opacity: .75; letter-spacing: 0; }
.lib { font: 800 .85rem/1.15 var(--titre); min-width: 0; }
.resume-hs { margin: 0; flex-basis: 100%; font-size: .82rem; color: var(--hs); }
.machines { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
@media (min-width: 560px) { .machines { grid-template-columns: repeat(6, 1fr); } }
.machine { --c: var(--libre); background: linear-gradient(180deg, color-mix(in srgb, var(--c) 13%, var(--surface)), color-mix(in srgb, var(--c) 5%, var(--surface))); border: 1px solid color-mix(in srgb, var(--c) 40%, var(--trait)); border-radius: 12px; box-shadow: 0 1px 2px rgb(0 0 0 / .08), 0 4px 10px -6px color-mix(in srgb, var(--c) 55%, transparent); padding: .5rem .3rem .55rem; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.machine.etat-en_cours { --c: var(--eau); }
.machine.etat-termine { --c: var(--termine); }
.machine.etat-hors_service { --c: var(--hs); box-shadow: none; }
.machine-visuel { width: 3.4rem; height: 3.4rem; }
.hublot { width: 100%; height: 100%; color: var(--c); }
.hublot .anneau-fond { fill: none; stroke: color-mix(in srgb, var(--c) 20%, transparent); stroke-width: 3.2; }
.hublot .anneau { fill: none; stroke: var(--c); stroke-width: 3.2; stroke-linecap: round; }
.hublot .verre { fill: color-mix(in srgb, var(--c) 16%, var(--surface)); stroke: color-mix(in srgb, var(--c) 55%, transparent); stroke-width: 1.2; }
.hublot .tambour { fill: none; stroke: var(--c); stroke-width: 2; stroke-linecap: round; transform-origin: 24px 24px; }
.hublot .tambour circle { fill: var(--c); stroke: none; }
.hublot .croix { stroke: var(--c); stroke-width: 2.4; stroke-linecap: round; fill: none; }
.etat-hors_service .hublot .tambour { opacity: .35; }
.etat-en_cours .hublot .tambour { animation: tourne 5s linear infinite; }
@keyframes tourne { to { transform: rotate(360deg); } }
.machine-nom { margin: .3rem 0 0; font-size: .8rem; line-height: 1.2; overflow-wrap: anywhere; }
.machine-etat { display: flex; align-items: center; justify-content: center; gap: .3rem; margin: .2rem 0 0; font: 800 .8rem/1.2 var(--titre); color: var(--c); }
.puce { width: .55rem; height: .55rem; border-radius: 50%; background: var(--c); flex: none; }
.machine.etat-termine .puce { border-radius: 2px; }
.machine.etat-hors_service .puce { background: transparent; border: 2px solid var(--c); }
.machine-info { margin: .1rem 0 0; font-size: .74rem; line-height: 1.25; color: var(--encre-2); }
.machine-info:empty { display: none; }
.legende { list-style: none; display: flex; flex-wrap: wrap; gap: .2rem .9rem; padding: 0; margin: .6rem 0 0; font-size: .75rem; color: var(--discret); }
.legende li { --c: var(--libre); display: inline-flex; align-items: center; gap: .3rem; }
.legende .etat-en_cours { --c: var(--eau); } .legende .etat-termine { --c: var(--termine); } .legende .etat-hors_service { --c: var(--hs); }
.legende .puce { width: .5rem; height: .5rem; }
.note-demo { margin-top: .4rem; margin-bottom: 0; font-size: .75rem; color: var(--discret); }

/* Affluence repliable */
.aff { margin-top: .6rem; border-top: 1px solid var(--trait); padding-top: .5rem; }
.aff summary { cursor: pointer; font: 700 .85rem/1.3 var(--titre); color: var(--encre-2); padding: .25rem 0; }
.aff-choix { display: inline-flex; gap: 3px; padding: 3px; background: var(--fond-2); border-radius: 999px; margin: .5rem 0; }
.aff-bouton { font: 700 .78rem/1 var(--titre); padding: .55em .9em; border-radius: 999px; border: 0; background: transparent; color: var(--encre-2); cursor: pointer; }
.aff-bouton[aria-pressed="true"] { background: var(--surface); color: var(--encre); box-shadow: 0 1px 3px rgb(0 0 0 / .2); }
.aff-graphe { min-width: 0; }
.aff-barres { display: flex; align-items: flex-end; gap: 3px; height: 70px; border-bottom: 2px solid var(--trait); }
.aff-barre { flex: 1; min-width: 0; border-radius: 3px 3px 0 0; background: var(--eau-doux); }
.aff-barre.moyenne { background: color-mix(in srgb, var(--eau) 55%, var(--eau-doux)); }
.aff-barre.forte { background: var(--eau); }
.aff-barre.maintenant { outline: 2px solid var(--encre); outline-offset: 1px; }
.aff-heures { display: flex; gap: 3px; margin-top: .25rem; font-size: .68rem; color: var(--discret); }
.aff-heures span { flex: 1; min-width: 0; text-align: center; white-space: nowrap; }
.aff-note { font-size: .75rem; color: var(--discret); margin: .5rem 0 0; }

/* Infos pratiques : petites cartes à icônes */
.infos { margin-top: 1rem; }
.infos h2 { margin: 0 0 .5rem; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--eau); }
.cartes-infos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
@media (min-width: 640px) { .cartes-infos { grid-template-columns: repeat(3, 1fr); } .carte-info.large, .carte-info:last-child { grid-column: span 2; } .carte-info.pleine { grid-column: auto; } .carte-info.pleine:last-child { grid-column: span 2; } }
.carte-info { display: flex; align-items: flex-start; gap: .55rem; padding: .55rem .6rem; background: var(--surface); border: 1px solid var(--trait); border-radius: 12px; box-shadow: var(--ombre); min-width: 0; }
.carte-info.large, .carte-info.pleine { grid-column: span 2; }
.carte-info .ico { flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 9px; background: var(--eau-doux); color: var(--eau); }
.carte-info .ico svg { width: 1.15rem; height: 1.15rem; }
.carte-info .corps { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.carte-info .etq { font-size: .72rem; color: var(--discret); line-height: 1.2; }
.carte-info .val { font-size: .88rem; line-height: 1.3; overflow-wrap: anywhere; }
.carte-info .val .lien { white-space: normal; }
.carte-info.large .val .lien { margin-left: .4rem; white-space: nowrap; }
.bientot { display: inline-block; font: 700 .7rem/1 var(--titre); letter-spacing: .06em; text-transform: uppercase; background: var(--eau-doux); color: var(--eau); padding: .4em .7em; border-radius: 999px; }

/* Pied de page : mentions légales, copyright, société du groupe */
.pied { margin-top: 1.4rem; padding: 1rem 0 1.6rem; border-top: 1px solid var(--trait); background: var(--bandeau-2); color: var(--discret); font-size: .85rem; }
.pied .conteneur { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.2rem; }
.pied-liens { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; }
.pied a { color: var(--encre-2); text-underline-offset: 3px; }
.pied a:hover { color: var(--encre); }
.pied .pied-ment { font-weight: 700; color: var(--eau); }
.pied-copy { margin-left: auto; }
.pied-groupe { flex-basis: 100%; display: flex; align-items: center; gap: 14px; padding-top: 14px; margin-top: 4px; border-top: 1px solid var(--trait); font-size: .82rem; color: var(--discret); text-decoration: none; }
.pied .pied-groupe:hover { text-decoration: none; color: var(--encre); }
.pied-groupe img { height: 34px; width: auto; display: block; }

/* Pages simples (mentions légales, 404) */
.page-simple { padding: 1.4rem 0 3rem; }
.page-simple .conteneur { max-width: 44rem; }
.page-simple h1 { font-size: 1.6rem; }
.page-simple h2 { font-size: 1.15rem; margin-top: 1.6rem; }
.page-simple ul { padding-left: 1.2rem; }
.page-simple li { margin-bottom: .35rem; }
.page-simple a:not(.bouton) { color: var(--eau); text-underline-offset: 3px; }
.chapo { color: var(--encre-2); }
.erreur { text-align: center; }
.erreur .conteneur { display: grid; justify-items: center; }
.note-langue { padding: .8em 1em; border-left: 3px solid var(--discret); background: var(--fond-2); border-radius: 6px; font-size: .9rem; }
.erreur-langues { margin-top: 1.4rem; font-size: .9rem; color: var(--discret); }
.erreur-langues span { display: inline-block; margin: 0 .6em; }

/* Sélecteur de langue à drapeaux */
.langues { position: relative; display: block; font: 500 .92rem/1.3 var(--sans); }
.langues-bouton { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 1px solid var(--trait); background: transparent; color: var(--encre); cursor: pointer; }
.langues-bouton:hover, .langues-bouton[aria-expanded="true"] { border-color: var(--discret); background: var(--fond-2); }
.langues img { display: block; width: 22px; height: 22px; flex: none; border-radius: 50%; box-shadow: 0 0 0 1px rgb(0 0 0 / .12); }
.langues-menu { display: none; position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; min-width: 176px; margin: 0; padding: 6px; list-style: none; background: var(--surface); color: var(--encre); border: 1px solid var(--trait); border-radius: 12px; box-shadow: 0 12px 32px -8px rgb(0 0 0 / .28); }
.langues.ouvert .langues-menu { display: block; }
@media (scripting: none) { .langues:hover .langues-menu, .langues:focus-within .langues-menu { display: block; } }
.langues-menu li { margin: 0; padding: 0; }
.langues-menu a { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 10px; border-radius: 8px; color: var(--encre); text-decoration: none; white-space: nowrap; }
.langues-menu a:hover { background: var(--fond-2); }
.langues-menu a[aria-current] { font-weight: 600; background: var(--fond-2); }
.langues-menu a[aria-current]::after { content: "✓"; margin-left: auto; padding-left: 12px; color: var(--discret); }