/* =============================================================================
   SILENT OAK · POSTE DE PILOTAGE
   Parti pris « Atelier de nuit » : un livret de disque, la nuit, une seule lueur.
   La seule feuille de style du service (evenement/consultation.py) : la politique
   des pages n'admet ni style écrit dans le HTML, ni ressource d'ailleurs, ni police
   embarquée. L'emblème et les cernes sont des dessins posés dans chaque page ; ils
   prennent leurs couleurs ici.

   Sommaire
     1. La charte du groupe (à remplacer quand l'identité change)
     2. Les mesures (espacements, rayons, tailles de texte)
     3. Le socle (page, texte, focus)
     4. La scène, l'en-tête, les rubriques, le pied
     5. Les deux voix et les titres
     6. Les composants
     7. Les pages
     7 bis. Ce que le service ajoute à la maquette
     8. Les couleurs imposées (contraste élevé de Windows)
     9. Le mouvement
   Aucune couleur n'est écrite hors de la partie 1.
   ============================================================================= */


/* -----------------------------------------------------------------------------
   1. LA CHARTE DU GROUPE
   Douze couleurs, deux polices, la force du décor. Changer d'identité, c'est
   changer ce bloc, et rien d'autre.
   ----------------------------------------------------------------------------- */
:root {
  color-scheme: dark;

  --fond: #0c1516;            /* la nuit : le fond de toutes les pages */
  --fond-leve: #121e1f;       /* une feuille posée dessus : la lettre */
  --fond-creux: #081011;      /* un creux : les champs de saisie */
  --filet: #26393a;           /* les traits fins qui séparent */
  --filet-fort: #6d8280;      /* le contour des champs et des boutons */
  --texte: #ece6d9;           /* le papier : ce qui se lit */
  --texte-doux: #b7beb6;      /* la voix de l'outil, les notes */
  --texte-discret: #919c96;   /* les mentions */
  --lueur: #f0c674;           /* ce qui attend un geste, et rien d'autre */
  --lueur-diffuse: #f0c674;   /* la même, quand elle se répand autour d'un trait ou d'un bouton */
  --sur-lueur: #1a1203;       /* l'encre posée sur la lueur */

  --police-voix: Palatino, "Palatino Linotype", "Book Antiqua", P052, "URW Palladio L", "Noto Serif", Georgia, serif;
  --police-outil: "Helvetica Neue", Helvetica, "Nimbus Sans", "Liberation Sans", Arial, sans-serif;

  --ornement: #b7beb6;        /* le trait des cernes du décor, de l'emblème et de la lune */
  --ornement-force: 0.26;     /* 0 efface le décor */
}

/* La même charte, de jour : mêmes pages, autres valeurs. Le serveur pose la
   classe « jour » sur <html> quand le réglage « Apparence » le demande, ou
   « auto » pour suivre le téléphone. Sans classe, c'est la nuit pour tout le
   monde : c'est l'identité du groupe. */
.jour {
  color-scheme: light;
  --fond: #eceee8;
  --fond-leve: #f7f7f3;
  --fond-creux: #ffffff;
  --filet: #cdd4cb;
  --filet-fort: #74807a;
  --texte: #132021;
  --texte-doux: #3d4b49;
  --texte-discret: #586661;
  --lueur: #8a4a00;
  --lueur-diffuse: #dc9a32;
  --sur-lueur: #fff6e6;
  --ornement: #3d4b49;
  --ornement-force: 0.3;
}

@media (prefers-color-scheme: light) {
  .auto {
    color-scheme: light;
    --fond: #eceee8;
    --fond-leve: #f7f7f3;
    --fond-creux: #ffffff;
    --filet: #cdd4cb;
    --filet-fort: #74807a;
    --texte: #132021;
    --texte-doux: #3d4b49;
    --texte-discret: #586661;
    --lueur: #8a4a00;
    --lueur-diffuse: #dc9a32;
    --sur-lueur: #fff6e6;
    --ornement: #3d4b49;
    --ornement-force: 0.3;
  }
}

/* La même charte, pour qui a demandé plus de contraste à son appareil : les
   traits et les mentions se renforcent, rien d'autre ne change. */
@media (prefers-contrast: more) {
  :root {
    --filet: #4b6362;
    --filet-fort: #a3b3b0;
    --texte-doux: #d9ddd5;
    --texte-discret: #c3cac4;
  }

  .jour {
    --filet: #8b968f;
    --filet-fort: #4a5550;
    --texte-doux: #25302f;
    --texte-discret: #323e3b;
  }
}

@media (prefers-contrast: more) and (prefers-color-scheme: light) {
  .auto {
    --filet: #8b968f;
    --filet-fort: #4a5550;
    --texte-doux: #25302f;
    --texte-discret: #323e3b;
  }
}


/* -----------------------------------------------------------------------------
   2. LES MESURES
   ----------------------------------------------------------------------------- */
:root {
  /* Espacements : une gamme, pas de valeur libre. */
  --e1: 0.25rem;
  --e2: 0.5rem;
  --e3: 0.75rem;
  --e4: 1rem;
  --e5: 1.5rem;
  --e6: 2rem;
  --e7: 3rem;
  --e8: 4.5rem;
  --gouttiere: clamp(1.25rem, 5.5vw, 3.5rem);
  --largeur: 72rem;            /* largeur de la page sur grand écran */
  --mesure: 28em;              /* longueur d'une ligne de lecture : 70 à 76 signes, quel que soit le corps */

  /* Rayons : ce qui est rond se touche, ce qui est droit se lit. */
  --rayon-feuille: 0.25rem;
  --rayon-champ: 0.625rem;
  --rayon-rond: 62rem;

  /* Tailles de texte : 12, 13, 15, 16, 17, 18, 19, 21, 22, 24, 28, puis les titres de page. */
  --t-pastille: 0.75rem;       /* le compte dans la pastille des rubriques */
  --t-mention: 0.8125rem;      /* le nom des rubriques, au téléphone */
  --t-petit: 0.9375rem;        /* états, dates, villes */
  --t-outil: 1rem;             /* boutons, champs, notes */
  --t-texte: 1.0625rem;        /* le texte courant */
  --t-lecture: 1.125rem;       /* la lettre, les trouvailles */
  --t-voix: 1.1875rem;         /* la voix de l'outil en tête de page */
  --t-titre-3: 1.3125rem;      /* une nouvelle, une ligne de sommaire, le nom du groupe */
  --t-voix-large: 1.375rem;    /* la voix de l'outil en tête de page, sur grand écran */
  --t-appel: 1.5rem;           /* le titre en voix saturée, les numéros de la file */
  --t-titre-2: 1.75rem;        /* les titres de section */
  --t-suite: clamp(1.375rem, 1.15rem + 1vw, 1.875rem);              /* la phrase qui suit le titre : 22 à 30 */
  --t-titre-1: clamp(2.125rem, 1.35rem + 3.6vw, 4.25rem);           /* titre court : 34 à 68 */
  --t-titre-1-phrase: clamp(1.75rem, 1.2rem + 3.6vw, 3.375rem);     /* titre en phrase : 28 à 54 */
  --t-titre-1-moyen: clamp(1.875rem, 1.4rem + 2.2vw, 3.125rem);     /* titre long : 30 à 50 */

  --cible: 2.75rem;            /* 44 px : la plus petite chose qu'on touche */
  --barre: 4rem;               /* hauteur des rubriques, au téléphone */

  --halo: 0 0 0 1px color-mix(in srgb, var(--lueur) 45%, transparent),
          0 0.875rem 2.75rem -0.875rem color-mix(in srgb, var(--lueur-diffuse) 62%, transparent);
}


/* -----------------------------------------------------------------------------
   3. LE SOCLE
   ----------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: color-mix(in srgb, var(--lueur) 16%, transparent);
  accent-color: var(--lueur);
  caret-color: var(--lueur);
  /* Une barre tient à l'écran, en bas : rien de ce qui reçoit le focus ne passe dessous. */
  scroll-padding-top: var(--e5);
  scroll-padding-bottom: calc(var(--barre) + var(--e7));
}

body {
  margin: 0;
  background-color: var(--fond);
  color: var(--texte);
  font-family: var(--police-voix);
  font-size: var(--t-texte);
  line-height: 1.55;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
figure,
fieldset,
legend {
  margin: 0;
  padding: 0;
}

h1,
h2,
h3 {
  font-size: inherit;
  font-weight: inherit;
}

ul,
ol {
  list-style: none;
}

fieldset {
  min-width: 0;
  border: 0;
}

a {
  color: inherit;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

sup {
  font-size: 0.68em;
  line-height: 0;
}

::selection {
  background-color: color-mix(in srgb, var(--lueur) 32%, transparent);
}

:focus-visible {
  outline: 2px solid var(--lueur);
  outline-offset: 3px;
}

.hors-vue {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.evitement {
  position: absolute;
  z-index: 30;
  top: var(--e2);
  left: var(--gouttiere);
  display: inline-flex;
  align-items: center;
  min-height: var(--cible);
  padding: 0 var(--e5);
  border-radius: var(--rayon-rond);
  background-color: var(--texte);
  color: var(--fond);
  font: 600 var(--t-outil) / 1.2 var(--police-outil);
  text-decoration: none;
  transform: translateY(-300%);
}

.evitement:focus {
  transform: none;
}

/* Les pictogrammes : dessinés une fois en tête de page, repris par <use>. */
.pictos {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.picto {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* -----------------------------------------------------------------------------
   4. LA SCÈNE, L'EN-TÊTE, LES RUBRIQUES, LE PIED
   ----------------------------------------------------------------------------- */

/* La scène enferme le décor : rien ne dépasse de l'écran, rien n'est coupé par <body>. */
.scene {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;            /* pour les navigateurs qui ne connaissent pas « clip » */
  overflow: clip;
}

.decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.decor-anneaux {
  position: absolute;
  top: -10.75rem;
  right: -12.25rem;
  width: 25rem;
  height: 25rem;
  fill: none;
  stroke: var(--ornement);
  stroke-width: 1;
  opacity: var(--ornement-force);
}

.entete,
.page,
.pied {
  position: relative;
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e4);
  padding-block: var(--e3) var(--e2);
}

.marque {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-height: var(--cible);
  text-decoration: none;
}

.marque-embleme {
  flex: none;
  width: 1.875rem;
  height: 1.875rem;
  fill: none;
  stroke: var(--texte);
  stroke-width: 1.4;
}

.marque-embleme .marque-eclat {
  stroke: var(--lueur);
  stroke-width: 1.8;
  stroke-linecap: round;
}

.marque-nom {
  font-size: var(--t-titre-3);
  line-height: 1;
  letter-spacing: 0.01em;
}

.entete-date {
  font: 400 var(--t-petit) / 1.2 var(--police-outil);
  color: var(--texte-discret);
}

/* Les rubriques : en bas, sous le pouce, au téléphone ; dans l'en-tête sur grand écran. */
.nav {
  position: fixed;
  z-index: 20;
  inset: auto 0 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  border-top: 1px solid var(--filet);
  background-color: var(--fond);
}

/* Ce qui défile s'efface avant de passer sous les rubriques. */
.nav::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 100%;
  left: 0;
  height: var(--e6);
  margin-bottom: 1px;
  background-image: linear-gradient(to top, var(--fond), transparent);
  pointer-events: none;
}

.nav-liste {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 30rem;
  margin-inline: auto;
}

.nav-lien {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3125rem;
  min-height: var(--barre);
  padding: var(--e2) var(--e1);
  font: 500 var(--t-mention) / 1 var(--police-outil);
  letter-spacing: 0.01em;
  color: var(--texte-discret);
  text-decoration: none;
}

.nav-lien:focus-visible {
  outline-offset: -5px;
}

.nav-lien[aria-current] {
  color: var(--texte);
}

.nav-lien[aria-current]::before {
  content: "";
  position: absolute;
  top: -1px;
  left: calc(50% - 0.875rem);
  width: 1.75rem;
  height: 2px;
  background-color: var(--texte);
}

.nav-compte {
  position: absolute;
  top: 0.5625rem;
  left: calc(50% + 0.4375rem);
  min-width: 1.125rem;
  padding: 0 0.3125rem;
  border-radius: var(--rayon-rond);
  background-color: var(--lueur);
  color: var(--sur-lueur);
  font: 700 var(--t-pastille) / 1.125rem var(--police-outil);
  text-align: center;
}

.pied {
  margin-top: var(--e8);
  padding-block: var(--e5) calc(var(--barre) + var(--e6));
  border-top: 1px solid var(--filet);
  font: 400 var(--t-outil) / 1.5 var(--police-outil);
  color: var(--texte-discret);
}

.pied--sans-barre {
  padding-bottom: var(--e6);
}

.pied-etat {
  display: flex;
  align-items: flex-start;
  gap: var(--e2);
  max-width: var(--mesure);
}

.pied-etat .picto {
  margin-top: 0.125rem;
  color: var(--texte-doux);
}

@media (max-width: 59.99rem) {
  /* Sur la page d'un message, le pouce n'a qu'un geste : les rubriques s'effacent. */
  .nav--grand-ecran {
    display: none;
  }
}

@media (min-width: 60rem) {
  html {
    scroll-padding-bottom: var(--e5);
  }

  .entete {
    justify-content: flex-start;
    gap: var(--e5);
    padding-block: var(--e5) var(--e4);
  }

  .nav {
    position: static;
    margin-left: auto;
    padding: 0;
    border: 0;
    background: none;
  }

  .nav::before {
    display: none;
  }

  .nav-liste {
    display: flex;
    gap: var(--e5);
    max-width: none;
    margin: 0;
  }

  .nav-lien {
    flex-direction: row;
    gap: var(--e2);
    min-height: var(--cible);
    padding: 0 var(--e1);
    border-radius: var(--rayon-feuille);
    font-size: var(--t-outil);
    letter-spacing: 0;
  }

  .nav-lien:focus-visible {
    outline-offset: 3px;
  }

  .nav-lien .picto {
    display: none;
  }

  .nav-lien[aria-current]::before {
    top: auto;
    right: var(--e1);
    bottom: 0.4375rem;
    left: var(--e1);
    width: auto;
    height: 1px;
  }

  .nav-compte {
    position: static;
  }

  .decor-anneaux {
    top: -18.75rem;
    right: -17rem;
    width: 40rem;
    height: 40rem;
  }

  .pied {
    padding-bottom: var(--e7);
  }
}


/* -----------------------------------------------------------------------------
   5. LES DEUX VOIX ET LES TITRES
   La voix claire : l'outil rend compte, en italique.
   La voix saturée : ce qui attend ton geste, en gras, dans la lueur.
   ----------------------------------------------------------------------------- */
.voix {
  max-width: var(--mesure);
  font-style: italic;
  line-height: 1.45;
  color: var(--texte-doux);
  text-wrap: pretty;
}

.voix--tete {
  font-size: var(--t-voix);
}

.titre-page {
  max-width: 15em;
  font-size: var(--t-titre-1);
  line-height: 1.06;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

/* Un titre qui est une phrase : chaque membre de phrase tient sa ligne. */
.titre-page--phrase {
  max-width: none;
  font-size: var(--t-titre-1-phrase);
  line-height: 1.1;
  text-wrap: wrap;
}

.titre-ligne {
  display: block;
}

.titre-page--moyen {
  max-width: 18em;
  font-size: var(--t-titre-1-moyen);
  line-height: 1.1;
}

.ouverture {
  padding-block: var(--e4) var(--e2);
}

.ouverture > * + * {
  margin-top: var(--e3);
}

.ouverture-suite {
  font-size: var(--t-suite);
  font-style: italic;
  line-height: 1.2;
  text-wrap: balance;
}

.section {
  position: relative;
  margin-top: var(--e7);
  padding-top: var(--e5);
  border-top: 1px solid var(--filet);
}

.section > * + * {
  margin-top: var(--e4);
}

.section-titre {
  font-size: var(--t-titre-2);
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.section-titre + .voix {
  margin-top: var(--e2);
}

/* La section qui attend un geste : un trait de lumière, un titre en voix saturée. */
.section--appel {
  border-top: 2px solid var(--lueur);
}

.section--appel::before,
.section--appel::after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  height: 1.25rem;
  pointer-events: none;
}

.section--appel::before {
  top: 0;
  background-image: radial-gradient(ellipse 75% 100% at 22% 0%, color-mix(in srgb, var(--lueur-diffuse) 24%, transparent), transparent);
}

.section--appel::after {
  bottom: calc(100% + 2px);
  background-image: radial-gradient(ellipse 75% 100% at 22% 100%, color-mix(in srgb, var(--lueur-diffuse) 16%, transparent), transparent);
}

.section--appel .section-titre {
  font: 700 var(--t-appel) / 1.15 var(--police-outil);
  letter-spacing: -0.02em;
  color: var(--lueur);
}

.section-geste {
  display: grid;
  gap: var(--e3);
  margin-top: var(--e5);
}

.groupe-titre {
  margin-top: var(--e6);
  font: 600 var(--t-outil) / 1.3 var(--police-outil);
  color: var(--texte-doux);
}

.section-titre + .groupe-titre {
  margin-top: var(--e5);
}

.groupe-titre + .liste {
  margin-top: var(--e2);
}

/* Le compte d'une zone de la page des salles, après son nom : « 8 salles, 2 collectifs ». */
.groupe-compte {
  font-weight: 400;
  font-size: var(--t-petit);
  color: var(--texte-discret);
}

/* Les renvois aux zones de la page des salles : ils passent à la ligne sur un téléphone. */
.zones .lien {
  white-space: nowrap;
}

.renvoi {
  margin-top: var(--e7);
}

@media (min-width: 60rem) {
  .voix--tete {
    font-size: var(--t-voix-large);
  }

  .ouverture {
    padding-block: var(--e6) var(--e4);
  }

  .ouverture > * + * {
    margin-top: var(--e4);
  }

  .section {
    margin-top: var(--e8);
  }

  /* Deux pages en regard, comme un livret ouvert. */
  .deux-pages {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: var(--e8);
    align-items: start;
  }

  .deux-pages--bas {
    align-items: end;
  }

  .deux-pages > .ouverture + .section {
    margin-top: var(--e6);
  }
}


/* -----------------------------------------------------------------------------
   6. LES COMPOSANTS
   ----------------------------------------------------------------------------- */

/* --- Boutons : toujours ronds, toujours 44 px au moins --- */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  min-width: var(--cible);
  min-height: var(--cible);
  padding: var(--e2) 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--rayon-rond);
  background: none;
  font: 600 var(--t-outil) / 1.2 var(--police-outil);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

/* Le geste attendu : il n'y en a qu'un par écran. */
.bouton--lueur {
  min-height: 3.375rem;
  padding-inline: var(--e5);
  background-color: var(--lueur);
  color: var(--sur-lueur);
  box-shadow: var(--halo);
}

.bouton--lueur:hover {
  background-color: color-mix(in srgb, var(--lueur) 86%, var(--texte));
}

.bouton--lueur:focus-visible {
  outline-color: var(--texte);
}

.bouton--plein {
  min-height: 3rem;
  padding-inline: var(--e5);
  background-color: var(--texte);
  color: var(--fond);
}

.bouton--plein:hover {
  background-color: color-mix(in srgb, var(--texte) 88%, var(--fond));
}

.bouton--trait {
  border-color: var(--filet-fort);
  color: var(--texte);
}

.bouton--trait:hover {
  border-color: var(--texte);
}

.bouton--texte {
  padding-inline: var(--e3);
  font-weight: 500;
  color: var(--texte-doux);
  text-decoration: underline;
  text-decoration-color: var(--filet-fort);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}

.bouton--texte:hover {
  color: var(--texte);
  text-decoration-color: currentColor;
}

.bouton--large {
  width: 100%;
}

.bouton:active {
  transform: translateY(1px);
}

/* --- Liens --- */
/* Dans une phrase : une marge verticale porte la zone touchée à 24 px. */
.lien {
  padding-block: 0.25rem;
  color: var(--texte);
  text-decoration: underline;
  text-decoration-color: var(--filet-fort);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.lien:hover {
  text-decoration-color: currentColor;
}

/* Seul sur sa ligne : il dit où mène la suite. */
.lien-suite {
  display: inline-flex;
  align-items: center;
  min-height: var(--cible);
  font: 500 var(--t-outil) / 1.2 var(--police-outil);
  text-decoration: underline;
  text-decoration-color: var(--filet-fort);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}

.lien-suite:hover {
  text-decoration-color: currentColor;
}

/* --- États : un pictogramme et un mot, jamais la couleur seule --- */
.etat {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font: 500 var(--t-petit) / 1.25 var(--police-outil);
  color: var(--texte-doux);
}

.etat .picto {
  width: 1.125rem;
  height: 1.125rem;
}

.etat--oui {
  color: var(--texte);
}

.etat--non,
.etat--vide {
  color: var(--texte-discret);
}

.etat--lueur {
  font-weight: 700;
  color: var(--lueur);
}

.a-toi {
  font-weight: 700;
  color: var(--lueur);
}

/* --- Listes à filets --- */
.ligne {
  border-top: 1px solid var(--filet);
}

.liste--nue > .ligne:first-child {
  border-top: 0;
}

/* Une ligne qui mène quelque part : toute la ligne se touche. */
.ligne-lien {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr) 1.25rem;
  gap: 0 var(--e2);
  align-items: start;
  min-height: 4rem;
  padding-block: var(--e4);
  text-decoration: none;
}

.ligne-lien:focus-visible {
  outline-offset: 0;
}

.ligne-lien:active,
.sommaire-lien:active {
  background-color: color-mix(in srgb, var(--texte) 5%, transparent);
}

.ligne-rang {
  font-size: var(--t-appel);
  font-style: italic;
  line-height: 1.375rem;
  color: var(--lueur);
}

.ligne-titre {
  display: block;
  font: 600 var(--t-texte) / 1.3 var(--police-outil);
  letter-spacing: -0.005em;
}

.ligne-lien:hover .ligne-titre {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.ligne-voix {
  display: block;
  margin-top: var(--e1);
  font-size: var(--t-outil);
  font-style: italic;
  line-height: 1.4;
  color: var(--texte-doux);
}

.ligne-fleche {
  align-self: center;
  color: var(--lueur);
}

.ligne-gestes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  align-items: center;
  margin-top: var(--e3);
}

/* --- Sommaire : une ligne de livret, le nom, les points de conduite, où on en est --- */
.sommaire-lien {
  display: grid;
  grid-template-columns: auto minmax(1rem, 1fr) auto 1.125rem;
  gap: var(--e2);
  align-items: baseline;
  min-height: 3.5rem;
  padding-block: var(--e4);
  text-decoration: none;
}

.sommaire-lien:focus-visible {
  outline-offset: 0;
}

.sommaire-nom {
  font-size: var(--t-titre-3);
  line-height: 1.2;
}

.sommaire-points {
  align-self: end;
  height: 0.4em;
  margin-bottom: 0.3em;
  border-bottom: 1px dotted var(--filet-fort);
}

.sommaire-valeur {
  font: 400 var(--t-outil) / 1.3 var(--police-outil);
  color: var(--texte-doux);
  text-align: right;
}

.sommaire-lien .picto {
  align-self: center;
  width: 1.125rem;
  height: 1.125rem;
  color: var(--texte-discret);
}

.sommaire-lien:hover .sommaire-nom {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

/* --- Une nouvelle : ce qui est arrivé, écrit en grand --- */
.nouvelle {
  max-width: var(--mesure);
  font-size: var(--t-titre-3);
  line-height: 1.35;
  text-wrap: pretty;
}

/* --- Trouvaille : ce que l'outil a lu, cité tel quel --- */
.trouvaille {
  padding-block: var(--e4) var(--e5);
}

.trouvaille > * + * {
  margin-top: var(--e1);
}

.trouvaille-texte {
  max-width: var(--mesure);
  font-size: var(--t-lecture);
  line-height: 1.35;
}

.trouvaille > .ligne-gestes {
  margin-top: var(--e3);
}

/* --- Tâche : une action du groupe, et le bouton pour dire qu'elle est faite --- */
.tache {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--e3);
  align-items: center;
  padding-block: var(--e3);
}

.tache-nom {
  font: 500 var(--t-texte) / 1.35 var(--police-outil);
}

.tache--faite .tache-nom {
  color: var(--texte-discret);
}

.tache .etat {
  min-height: var(--cible);
}

.avancee {
  display: flex;
  align-items: center;
  gap: var(--e3);
  font: 400 var(--t-outil) / 1.35 var(--police-outil);
  color: var(--texte-doux);
}

.avancee-anneau {
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  fill: none;
  stroke-width: 2.5;
}

.avancee-fond {
  stroke: var(--filet);
}

.avancee-part {
  stroke: var(--texte);
  stroke-linecap: round;
}

/* --- Bloc repliable (<details>) : il marche sans script --- */
.repli-titre {
  display: flex;
  align-items: center;
  gap: var(--e2);
  min-height: var(--cible);
  font: 500 var(--t-outil) / 1.3 var(--police-outil);
  cursor: pointer;
  list-style: none;
}

.repli-titre::-webkit-details-marker {
  display: none;
}

.repli-titre .picto {
  width: 1.125rem;
  height: 1.125rem;
  color: var(--texte-discret);
}

.repli[open] > .repli-titre .picto {
  transform: rotate(90deg);
}

.repli-titre--bouton {
  justify-content: center;
  min-height: 3rem;
  padding: var(--e2) var(--e5);
  border: 1px solid var(--filet-fort);
  border-radius: var(--rayon-rond);
  font-weight: 600;
  text-align: center;
}

.repli-titre--bouton:hover {
  border-color: var(--texte);
}

.repli-corps {
  margin-top: var(--e4);
}

/* --- Journal : l'heure, puis ce que l'outil a fait --- */
.journal-ligne {
  display: grid;
  grid-template-columns: 6.25rem minmax(0, 1fr);
  gap: var(--e3);
  align-items: baseline;
  padding-block: var(--e3);
}

.journal-heure {
  font: 400 var(--t-petit) / 1.4 var(--police-outil);
  font-variant-numeric: tabular-nums;
  color: var(--texte-discret);
}

.journal-ligne .voix {
  color: var(--texte);
}

/* --- Formulaires --- */
.formulaire {
  display: grid;
  gap: var(--e5);
  max-width: 30rem;
}

.formulaire > .bouton {
  justify-self: start;
}

.champ {
  display: grid;
  gap: 0.375rem;
}

.champ-nom {
  font: 500 var(--t-outil) / 1.3 var(--police-outil);
}

.champ-saisie {
  width: 100%;
  min-height: 3rem;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--filet-fort);
  border-radius: var(--rayon-champ);
  background-color: var(--fond-creux);
  color: var(--texte);
  font: 400 var(--t-texte) / 1.4 var(--police-outil);
}

.champ-saisie:hover {
  border-color: var(--texte-doux);
}

.champ-saisie:focus-visible {
  outline-offset: 2px;
  border-color: var(--texte);
}

.champ-saisie--texte {
  min-height: 22rem;
  field-sizing: content;
  font-family: var(--police-voix);
  font-size: var(--t-lecture);
  line-height: 1.55;
  resize: vertical;
}

.champ-aide {
  font-size: var(--t-outil);
  font-style: italic;
  line-height: 1.4;
  color: var(--texte-doux);
}

/* Un choix parmi quelques-uns : des pastilles, un disque plein pour celle qui est prise. */
.choix {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
}

.choix .champ-nom {
  width: 100%;
  margin-bottom: 0.375rem;
}

.choix-option {
  position: relative;
  display: inline-flex;
}

.choix-case {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.choix-nom {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  min-height: var(--cible);
  padding: 0 var(--e4) 0 var(--e3);
  border: 1px solid var(--filet-fort);
  border-radius: var(--rayon-rond);
  font: 500 var(--t-outil) / 1.2 var(--police-outil);
  color: var(--texte-doux);
}

.choix-nom::before {
  content: "";
  width: 0.875rem;
  height: 0.875rem;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}

.choix-case:checked + .choix-nom {
  border-color: var(--texte);
  color: var(--texte);
}

.choix-case:checked + .choix-nom::before {
  background-color: currentColor;
  box-shadow: inset 0 0 0 2px var(--fond);
}

.choix-case:focus-visible + .choix-nom {
  outline: 2px solid var(--lueur);
  outline-offset: 3px;
}

/* --- La lettre : ce qui partira, mot pour mot --- */
.lettre {
  padding: var(--e5) var(--e4);
  border: 1px solid var(--filet);
  border-radius: var(--rayon-feuille);
  background-color: var(--fond-leve);
}

.lettre-titre {
  font: 500 var(--t-petit) / 1.3 var(--police-outil);
  color: var(--texte-discret);
}

.lettre-champs {
  display: grid;
  gap: var(--e3);
  margin-top: var(--e4);
  padding-bottom: var(--e5);
  border-bottom: 1px solid var(--filet);
}

.lettre-champ {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  gap: var(--e3);
  align-items: baseline;
}

.lettre-champ dt {
  font: 400 var(--t-petit) / 1.4 var(--police-outil);
  color: var(--texte-discret);
}

.lettre-champ dd {
  font: 600 var(--t-texte) / 1.35 var(--police-outil);
}

.lettre-note {
  display: block;
  margin-top: 0.125rem;
  font: italic 400 var(--t-outil) / 1.4 var(--police-voix);
  color: var(--texte-doux);
}

.lettre-texte {
  max-width: var(--mesure);
  margin-top: var(--e5);
  font-size: var(--t-lecture);
  line-height: 1.6;
}

.lettre-texte > * + * {
  margin-top: 1em;
}

.lettre-joint {
  max-width: var(--mesure);
  margin-top: var(--e5);
  padding-top: var(--e4);
  border-top: 1px solid var(--filet);
  font-size: var(--t-outil);
  font-style: italic;
  line-height: 1.45;
  color: var(--texte-doux);
}

/* --- La barre du geste : elle suit le pouce tant que la lettre se lit --- */
.barre {
  position: sticky;
  z-index: 10;
  bottom: 0;
  display: grid;
  gap: var(--e2);
  margin-inline: calc(var(--gouttiere) * -1);
  padding: var(--e3) var(--gouttiere) max(var(--e3), env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--filet);
  background-color: var(--fond);
}

.barre-rappel {
  font: 400 var(--t-petit) / 1.3 var(--police-outil);
  color: var(--texte-doux);
  text-align: center;
}

/* --- Étapes : une suite, donc des numéros --- */
.etapes {
  counter-reset: etape;
}

.etape {
  position: relative;
  padding: 0 0 var(--e6) 3.25rem;
  counter-increment: etape;
}

.etape:last-child {
  padding-bottom: 0;
}

.etape::before {
  content: counter(etape);
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 2.125rem;
  height: 2.125rem;
  border: 1.5px solid var(--filet-fort);
  border-radius: 50%;
  background-color: var(--fond);
  font: 500 var(--t-petit) / 1 var(--police-outil);
  color: var(--texte-doux);
}

.etape::after {
  content: "";
  position: absolute;
  top: 2.5rem;
  bottom: 0.375rem;
  left: 1.0625rem;
  width: 1px;
  background-color: var(--filet);
}

.etape:last-child::after {
  display: none;
}

.etape--lueur::before {
  border-color: var(--lueur);
  color: var(--lueur);
  font-weight: 700;
}

.etape > * + * {
  margin-top: var(--e1);
}

.etape-nom {
  padding-top: 0.25rem;
  font: 600 var(--t-lecture) / 1.3 var(--police-outil);
  letter-spacing: -0.005em;
}

.etape-date {
  font: 400 var(--t-outil) / 1.4 var(--police-outil);
}

.etape > .etat {
  display: flex;
  margin-top: var(--e2);
}

.etape > .ligne-gestes {
  margin-top: var(--e3);
}

/* --- Repères : un nom, une valeur, sur deux colonnes --- */
.reperes {
  display: grid;
  gap: var(--e2);
}

.repere {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: var(--e3);
  align-items: baseline;
  padding-top: var(--e2);
  border-top: 1px solid var(--filet);
}

.repere dt {
  font: 400 var(--t-petit) / 1.4 var(--police-outil);
  color: var(--texte-discret);
}

.repere dd {
  font: 500 var(--t-outil) / 1.4 var(--police-outil);
}

.repere-avant {
  display: block;
  font-weight: 400;
  color: var(--texte-discret);
}

/* --- Calendrier : la date, puis ce qui paraît --- */
.calendrier-ligne {
  display: grid;
  grid-template-columns: 6.25rem minmax(0, 1fr);
  gap: var(--e1) var(--e3);
  align-items: baseline;
  padding-block: var(--e4);
}

.calendrier-date {
  font: 400 var(--t-petit) / 1.4 var(--police-outil);
  font-variant-numeric: tabular-nums;
  color: var(--texte-discret);
}

.calendrier-nom {
  font: 600 var(--t-texte) / 1.3 var(--police-outil);
}

.calendrier-ligne > .ligne-voix,
.calendrier-ligne > .etat {
  grid-column: 2;
  margin-top: 0;
}

/* --- Lieu : son nom, sa ville, son état, ce que l'outil propose --- */
.lieu {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e2);
  padding-block: var(--e4) var(--e5);
}

.lieu-nom {
  font: 600 var(--t-texte) / 1.3 var(--police-outil);
  letter-spacing: -0.005em;
}

.lieu-ville {
  display: block;
  margin-top: 0.125rem;
  font-weight: 400;
  font-size: var(--t-petit);
  letter-spacing: 0;
  color: var(--texte-discret);
}

.lieu-etat {
  display: flex;
  flex-wrap: wrap;
  gap: 0.125rem var(--e2);
  align-items: center;
}

.lieu-quand {
  font: 400 var(--t-petit) / 1.25 var(--police-outil);
  color: var(--texte-discret);
}

.lieu > .ligne-voix {
  max-width: var(--mesure);
  margin-top: 0;
}

.lieu > .ligne-gestes {
  margin-top: var(--e1);
}

@media (min-width: 60rem) {
  .lieu {
    grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 6fr);
    gap: var(--e2) var(--e6);
    align-items: start;
  }

  .lieu-etat {
    flex-direction: column;
    align-items: flex-start;
    padding-top: 0.125rem;
  }

  .lieu-quand {
    padding-left: 1.5rem;
  }

  .lieu > .ligne-gestes {
    grid-column: 3;
  }

  .lettre {
    padding: var(--e7) var(--e7) var(--e6);
  }

  .lettre-champ {
    grid-template-columns: 4.5rem minmax(0, 1fr);
  }

  .barre {
    position: static;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
  }

  .barre-rappel {
    text-align: left;
  }
}


/* -----------------------------------------------------------------------------
   7. LES PAGES
   ----------------------------------------------------------------------------- */

/* --- Aujourd'hui --- */
.accueil > .ouverture {
  padding-bottom: 0;
}

.accueil > .section--appel {
  margin-top: var(--e6);
}

@media (min-width: 60rem) {
  /* Deux pages en regard : à gauche ce que l'outil rapporte, à droite ce qui attend. */
  .accueil {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-rows: auto auto auto 1fr;
    column-gap: var(--e8);
    align-items: start;
  }

  .accueil > .ouverture {
    grid-column: 1;
    grid-row: 1;
  }

  .accueil > .section--appel {
    grid-column: 2;
    grid-row: 1;
  }

  .accueil > .accueil-reponse {
    grid-column: 2;
    grid-row: 2;
  }

  .accueil > .accueil-suivi {
    grid-column: 1;
    grid-row: 2;
  }

  .accueil > .accueil-nouveau {
    grid-column: 1;
    grid-row: 3 / span 2;
  }

  .accueil > .accueil-groupe {
    grid-column: 2;
    grid-row: 3;
  }

  .accueil > .accueil-journal {
    grid-column: 2;
    grid-row: 4;
  }
}

/* --- Aujourd'hui, quand il n'y a rien : la lune prend la place --- */
.calme {
  display: grid;
  justify-items: center;
  gap: var(--e5);
  padding-block: var(--e5) var(--e2);
  text-align: center;
}

.calme-lune {
  width: 13rem;
  height: 13rem;
  fill: none;
  stroke: var(--ornement);
  stroke-width: 1;
  opacity: calc(var(--ornement-force) * 3.2);
}

.calme > .ouverture {
  padding: 0;
}

.calme .titre-page,
.calme .voix {
  margin-inline: auto;
}

@media (min-width: 60rem) {
  .calme {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    justify-items: start;
    column-gap: var(--e8);
    align-items: center;
    padding-block: var(--e7) var(--e5);
    text-align: left;
  }

  .calme-lune {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    width: 23rem;
    height: 23rem;
  }

  .calme > .ouverture {
    grid-column: 1;
    grid-row: 1;
  }

  .calme .titre-page,
  .calme .voix {
    margin-inline: 0;
  }
}

/* --- Un message à valider --- */
.fil {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: var(--e3);
  align-items: center;
}

.fil-lien {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 0.125rem;
  min-height: var(--cible);
  margin-left: -0.3125rem;
  padding-right: var(--e2);
  font: 500 var(--t-outil) / 1.2 var(--police-outil);
  color: var(--texte-doux);
  text-decoration: none;
}

.fil-lien--suite {
  justify-self: end;
  margin-right: -0.3125rem;
  margin-left: 0;
  padding-right: 0;
  padding-left: var(--e2);
}

.fil-lien:hover {
  color: var(--texte);
}

.fil-place {
  font: 400 var(--t-petit) / 1.2 var(--police-outil);
  font-variant-numeric: tabular-nums;
  color: var(--texte-discret);
}

.proposition > .ouverture {
  padding-top: var(--e2);
}

.proposition > .lettre {
  margin-top: var(--e5);
}

.proposition > .barre {
  margin-top: var(--e5);
}

.autres-gestes {
  display: grid;
  gap: var(--e2);
  margin-top: var(--e4);
}

.proposition-suite {
  margin-top: var(--e5);
}

@media (min-width: 60rem) {
  .proposition {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    grid-template-rows: auto auto auto 1fr;
    column-gap: var(--e8);
    align-items: start;
  }

  .proposition > .ouverture {
    grid-column: 1 / -1;
    padding-top: var(--e4);
  }

  .proposition > .lettre {
    grid-column: 1;
    grid-row: 2 / span 3;
    margin-top: var(--e6);
  }

  .proposition > .barre {
    grid-column: 2;
    grid-row: 2;
    margin-top: var(--e6);
  }

  .proposition > .autres-gestes {
    grid-column: 2;
    grid-row: 3;
  }

  .proposition > .proposition-suite {
    grid-column: 2;
    grid-row: 4;
  }
}

/* --- Une sortie --- */
.pochette {
  display: flex;
  align-items: center;
  gap: var(--e4);
  margin-top: var(--e5);
}

.pochette-dessin {
  flex: none;
  width: 10.25rem;
  height: 6.625rem;
  fill: none;
  stroke: var(--filet-fort);
  stroke-width: 1.2;
}

.pochette-vide {
  fill: var(--fond);
  stroke: var(--texte-doux);
  stroke-width: 1.4;
  stroke-dasharray: 5 6;
  stroke-linecap: round;
}

.pochette-eclat {
  stroke: var(--lueur);
  stroke-width: 2;
  stroke-linecap: round;
}

.pochette-legende {
  font: 400 var(--t-petit) / 1.4 var(--police-outil);
  color: var(--texte-discret);
}

.consequences-titre {
  margin-bottom: var(--e3);
  font: 600 var(--t-outil) / 1.3 var(--police-outil);
  color: var(--texte-doux);
}

@media (min-width: 60rem) {
  .pochette {
    flex-direction: column;
    align-items: flex-start;
    margin-top: 0;
    padding-bottom: var(--e4);
  }

  .pochette-dessin {
    width: 22.5rem;
    height: 14.5rem;
  }

  .sortie-retard {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: var(--e8);
    align-items: start;
  }

  .sortie-retard > * {
    grid-column: 1;
  }

  .sortie-retard > .consequences {
    grid-column: 2;
    grid-row: 1 / span 4;
    margin-top: 0;
  }

  .sortie-retard > .section-geste {
    display: flex;
    flex-wrap: wrap;
  }

  .sortie-retard > .section-geste > .bouton {
    width: auto;
  }
}

/* --- Réglages --- */
.reglage {
  display: grid;
  gap: var(--e5);
  margin-top: var(--e7);
  padding-top: var(--e5);
  border-top: 1px solid var(--filet);
}

.reglage-tete > * + * {
  margin-top: var(--e3);
}

/* L'arrêt général : un trait plein, pour le trouver sans chercher. */
.reglage--pause {
  border-top: 2px solid var(--texte);
}

@media (min-width: 60rem) {
  .reglage {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--e8);
    align-items: start;
    padding-top: var(--e6);
  }
}


/* -----------------------------------------------------------------------------
   7 bis. CE QUE LE SERVICE AJOUTE À LA MAQUETTE
   L'état de l'outil, les avis, les textes à copier, les vignettes, les cases :
   ce que les pages réelles montrent et que la maquette ne dessinait pas.
   ----------------------------------------------------------------------------- */

/* --- L'état de l'outil, dans l'en-tête : un point et un mot --- */
.entete-date {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
  text-align: right;
}

.entete-etat {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.125rem 0.5rem;
  border: 1px solid var(--filet-fort);
  border-radius: var(--rayon-rond);
  font: 500 var(--t-mention) / 1.3 var(--police-outil);
  color: var(--texte-doux);
  white-space: nowrap;
}

.entete-etat::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: currentColor;
}

.entete-etat--pause,
.entete-etat--arret {
  border-color: var(--lueur);
  color: var(--lueur);
  font-weight: 700;
}

@media (min-width: 60rem) {
  .entete-date {
    flex-direction: row;
    align-items: center;
    gap: var(--e3);
  }
}

/* --- Un avis : ce qui doit se voir sans être le geste attendu --- */
.avis {
  max-width: var(--mesure);
  margin-top: var(--e5);
  padding: var(--e3) var(--e4);
  border-left: 2px solid var(--filet-fort);
  font: 400 var(--t-outil) / 1.45 var(--police-outil);
  color: var(--texte-doux);
}

.avis--alerte {
  border-left-color: var(--lueur);
  color: var(--texte);
}

.avis > * + * {
  margin-top: var(--e2);
}

.avis .lien-suite {
  color: var(--texte);
}

/* Un passage resté à remplir dans un texte : il se voit, en lueur. */
mark,
.manque {
  background: none;
  color: var(--lueur);
  font-weight: 700;
}

/* Ce qui ne s'affiche jamais : le mot de passe du dossier de presse, à sa place dans la lettre. */
.masque {
  font-style: italic;
  color: var(--texte-doux);
}

/* --- Les textes prêts à coller, et leur bouton « Copier » --- */
.zone,
.calendrier {
  max-width: var(--mesure);
  margin: 0;
  padding: var(--e4);
  border: 1px solid var(--filet);
  border-radius: var(--rayon-feuille);
  background-color: var(--fond-creux);
  font: 400 var(--t-outil) / 1.55 var(--police-outil);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.copier {
  display: none;
}

.avec-script .copier {
  display: inline-flex;
}

html:not(.avec-script) .zone {
  -webkit-user-select: all;
  user-select: all;
}

/* Le champ invisible par lequel passe la copie quand le navigateur n'ouvre pas son presse-papiers. */
.hors-champ {
  position: fixed;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.texte-pret > .repli-corps > * + * {
  margin-top: var(--e3);
}

/* --- Une ligne simple d'une liste à filets : une source, un constat, une étape du résultat --- */
.ligne-simple {
  padding-block: var(--e3);
  font: 400 var(--t-outil) / 1.45 var(--police-outil);
}

.ligne-simple > * + * {
  margin-top: var(--e1);
}

.ligne-nom {
  display: block;
  font: 600 var(--t-texte) / 1.3 var(--police-outil);
}

.mention {
  font: 400 var(--t-outil) / 1.45 var(--police-outil);
  color: var(--texte-discret);
}

.trouvaille-source {
  font: 400 var(--t-petit) / 1.4 var(--police-outil);
  color: var(--texte-discret);
}

/* La distance d'un batteur au studio : ce qui range la liste, lisible d'un coup d'œil. */
.trouvaille-source .distance {
  font-weight: 700;
  color: var(--texte-doux);
}

.trouvaille-extrait {
  max-width: var(--mesure);
  font-size: var(--t-outil);
  font-style: italic;
  line-height: 1.45;
  color: var(--texte-doux);
}

/* --- Une action du groupe : son nom ouvre son mode d'emploi --- */
.tache {
  align-items: start;
}

.tache > .repli > .repli-titre {
  min-height: var(--cible);
  font: 500 var(--t-texte) / 1.35 var(--police-outil);
}

.tache .repli-corps > * + * {
  margin-top: var(--e3);
}

.tache .repli-corps ol {
  padding-left: var(--e5);
  list-style: decimal;
}

/* --- Les vignettes : visuels d'un kit, photos, logos, candidats --- */
.vignettes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: var(--e3);
}

.vignettes li {
  padding: var(--e2);
  border: 1px solid var(--filet);
  border-radius: var(--rayon-feuille);
  background-color: var(--fond-leve);
}

.vignettes a {
  display: block;
  min-height: var(--cible);
}

.vignettes img {
  display: block;
  width: 100%;
  height: 9.5rem;
  object-fit: contain;
}

.vignettes .legende,
.vignettes .numero,
.vignettes .sans-image {
  display: block;
  margin-top: var(--e2);
  font: 400 var(--t-petit) / 1.35 var(--police-outil);
  color: var(--texte-doux);
}

.vignettes .numero {
  font-weight: 700;
  color: var(--texte);
}

/* Un logo sombre ne se voit que sur un fond clair, un logo clair que sur un fond sombre. */
.vignettes .sur-fond-clair img {
  background-color: var(--texte);
}

.vignettes .sur-fond-sombre img {
  background-color: var(--fond-creux);
}

/* --- Les cases à cocher et les listes fermées --- */
.case {
  display: flex;
  align-items: center;
  gap: var(--e3);
  min-height: var(--cible);
  font: 500 var(--t-outil) / 1.3 var(--police-outil);
}

.case input {
  flex: none;
  width: 1.375rem;
  height: 1.375rem;
  margin: 0;
}

select.champ-saisie {
  cursor: pointer;
}

/* --- Ce que l'outil a répondu à une demande : une étape par ligne --- */
.resultat {
  display: grid;
  gap: var(--e2);
  max-width: var(--mesure);
  font: 400 var(--t-outil) / 1.45 var(--police-outil);
}

.resultat li {
  padding-left: var(--e4);
  border-left: 1px solid var(--filet-fort);
}

/* --- Les gestes d'une ligne, les uns sous les autres au téléphone --- */
.gestes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  align-items: center;
}

.gestes form {
  display: contents;
}

.pied-version {
  margin-top: var(--e4);
}

/* --- Le mot de bienvenue : il se ferme d'un geste, et ne revient plus sur cet appareil --- */
.bienvenue {
  max-width: var(--mesure);
  margin-top: var(--e3);
  padding: var(--e4) var(--e4) var(--e3);
  border: 1px solid var(--filet-fort);
  border-radius: var(--rayon-feuille);
  background-color: var(--fond-leve);
  font: 400 var(--t-outil) / 1.5 var(--police-outil);
}

.bienvenue > * + * {
  margin-top: var(--e2);
}

.bienvenue-titre {
  font: 600 var(--t-texte) / 1.3 var(--police-outil);
}

.fermer {
  display: none;
}

.avec-script .fermer {
  display: inline-flex;
}

.bienvenue-lue .bienvenue {
  display: none;
}

/* --- Comment ça marche : trois étapes, un grand dessin chacune --- */
.etapes-aide {
  margin-top: var(--e6);
}

.etape-aide {
  padding-left: 4.5rem;
}

.etape-aide::before {
  width: 3.25rem;
  height: 3.25rem;
  font-size: var(--t-texte);
}

.etape-aide::after {
  top: 3.75rem;
  left: 1.625rem;
}

.picto--grand {
  display: block;
  width: 2rem;
  height: 2rem;
  margin-bottom: var(--e2);
  color: var(--lueur);
}

.etape-aide .etape-nom {
  font-size: var(--t-titre-3);
}

/* Ce qui se lit comme une phrase garde le corps du texte et la mesure d'une ligne de lecture. */
.trouvaille-source,
.barre-rappel {
  font-size: var(--t-outil);
}

.etat--phrase {
  align-items: flex-start;
  max-width: var(--mesure);
  font-size: var(--t-outil);
  line-height: 1.4;
}

.etat--phrase .picto {
  margin-top: 0.0625rem;
}

.champ-aide,
.trouvaille-source,
.etape-date,
.ligne-voix,
.mention,
.repli-corps > ol,
.ligne-simple > p {
  max-width: var(--mesure);
}

/* Une police sans empattement tient plus de signes par ligne : sa mesure est plus courte. */
.champ-aide {
  display: block;
  max-width: 24em;
}

.champ-saisie--court {
  min-height: 8rem;
  font-family: var(--police-outil);
  font-size: var(--t-texte);
}

.lien-suite {
  min-width: var(--cible);
}


/* -----------------------------------------------------------------------------
   8. LES COULEURS IMPOSÉES
   Qui impose ses propres couleurs (contraste élevé de Windows) garde l'état des
   pastilles ; les lueurs décoratives s'effacent.
   ----------------------------------------------------------------------------- */
@media (forced-colors: active) {
  .choix-case:checked + .choix-nom {
    border-width: 2px;
  }

  .choix-case:checked + .choix-nom::before {
    forced-color-adjust: none;
    background-color: Highlight;
    box-shadow: none;
  }

  .section--appel::before,
  .section--appel::after,
  .nav::before {
    display: none;
  }
}


/* -----------------------------------------------------------------------------
   9. LE MOUVEMENT
   Un seul geste de mise en scène : la lueur s'allume à l'ouverture de la page.
   Rien ne bouge pour qui a demandé moins de mouvement.
   ----------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .bouton,
  .champ-saisie,
  .choix-nom,
  .repli-titre .picto {
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
  }

  .section--appel::before,
  .section--appel::after {
    animation: allumer 0.9s ease-out both;
  }

  @keyframes allumer {
    from {
      opacity: 0;
    }
  }
}

/* --- Nos modèles de messages : le nom, puis « réécrit le … » dessous --- */
.modele {
  padding-block: var(--e2);
}

.modele-nom {
  display: grid;
  gap: 0.125rem;
}

/* --- Notre annonce sur les réseaux : les visuels prêts à télécharger, le choix de la photo --- */
.posts-etat {
  margin-bottom: var(--e4);
}

.posts-visuels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  align-items: start;
  gap: var(--e4);
  margin-bottom: var(--e5);
}

.post-visuel {
  display: grid;
  gap: var(--e2);
}

.post-image {
  display: block;
}

/* Vignettes : l'image reste petite pour que les légendes à copier remontent ; un toucher l'ouvre en grand. */
.post-image img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: min(13rem, 38vh);
  border: 1px solid var(--filet);
  border-radius: var(--rayon-feuille);
  background-color: var(--fond-creux);
}

.post-legende {
  font: 400 var(--t-outil) / 1.35 var(--police-outil);
  color: var(--texte-doux);
}

.post-nom {
  display: block;
  font-weight: 700;
  color: var(--texte);
}

.choix-photo {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.choix-photo .champ-nom {
  margin-bottom: var(--e3);
}

.choix-photo .vignettes {
  grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
  gap: var(--e2);
}

.choix-photo .vignettes img {
  height: 5.5rem;
  object-fit: cover;
  border-radius: 2px;
}

.photo-choix {
  display: block;
  min-height: var(--cible);
  cursor: pointer;
}

.photo-choix input {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0 0 var(--e2);
  accent-color: var(--lueur);
}

/* La photo prise se voit sans compter sur la seule couleur : un cadre plus épais, et la case cochée. */
.choix-photo li:has(input:checked) {
  border-color: var(--lueur);
  box-shadow: 0 0 0 2px var(--lueur);
}

.choix-photo li:has(input:focus-visible) {
  outline: 2px solid var(--lueur);
  outline-offset: 3px;
}

.posts-publie {
  margin-bottom: var(--e3);
}

/* --- L'atelier de Claude : la case discrète de l'accueil, les faits cités d'un brouillon --- */
.atelier-case {
  margin-top: var(--e6);
  padding: var(--e4);
  border: 1px solid var(--filet);
  border-radius: var(--rayon-feuille);
  background-color: var(--fond-leve);
}

.atelier-titre {
  margin: 0 0 var(--e2);
  font: 700 var(--t-petit) / 1.3 var(--police-outil);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--texte-doux);
}

.atelier-formulaire .champ-saisie {
  width: 100%;
}

.atelier-geste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e2) var(--e3);
  margin-top: var(--e3);
}

.atelier-geste .champ-aide {
  flex: 1 1 12rem;
}

.atelier-suite {
  margin-top: var(--e3);
  font: 400 var(--t-petit) / 1.4 var(--police-outil);
  color: var(--texte-doux);
}

.atelier-suite .picto {
  width: 1rem;
  height: 1rem;
  margin-right: var(--e1);
  vertical-align: -0.15em;
}

.faits {
  display: grid;
  gap: var(--e2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.fait {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--e1) var(--e2);
  padding-top: var(--e2);
  border-top: 1px solid var(--filet);
}

.fait-genre {
  min-width: 4.5rem;
  font: 400 var(--t-petit) / 1.4 var(--police-outil);
  color: var(--texte-discret);
}

.fait .etat {
  margin-left: auto;
}

.fait--a-verifier {
  color: var(--lueur);
}

/* « Demande à Claude » : un post (le canevas) ou autre chose (une zone libre). Sans « :has », les deux se montrent. */
@supports selector(:has(*)) {
  .demande-libre {
    display: none;
  }
  form:has(input[name="genre"][value="libre"]:checked) .demande-libre {
    display: block;
  }
  form:has(input[name="genre"][value="libre"]:checked) .demande-post {
    display: none;
  }
}

.demande-libre textarea {
  width: 100%;
  min-height: 6rem;
  resize: vertical;
}

/* « D'où vient ce message » : au-dessus du texte d'un message à valider, ou d'une candidature. */
.origine {
  margin: var(--e4) 0;
  padding: var(--e3) var(--e4);
  border: 1px solid var(--filet);
  border-left: 3px solid var(--filet-fort);
  border-radius: var(--rayon-feuille);
  background-color: var(--fond-leve);
  overflow-wrap: anywhere;
}

.origine-titre {
  margin: 0 0 var(--e2);
  font: 700 var(--t-petit) / 1.3 var(--police-outil);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--texte-doux);
}

.origine-champs {
  display: grid;
  gap: var(--e1);
  margin: 0 0 var(--e2);
}

.origine-champ {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--e2);
}

.origine-champ dt {
  min-width: 7rem;
  color: var(--texte-doux);
}

.origine-champ dd {
  margin: 0;
}

.origine-liens {
  margin: var(--e2) 0 0;
}

.origine-texte {
  margin-top: var(--e2);
}

/* La tâche « Créer les alertes des sites d'annonces » : une ligne par site. */
.sites-alertes {
  display: grid;
  gap: var(--e3);
  margin: var(--e3) 0;
  padding: 0;
  list-style: none;
}

.site-alerte {
  padding: var(--e3);
  border: 1px solid var(--filet);
  border-radius: var(--rayon-feuille);
  overflow-wrap: anywhere;
}

.site-alerte > * + * {
  margin-top: var(--e2);
}

.site-alerte--fait {
  opacity: 0.8;
}

.site-alerte-nom {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e1) var(--e3);
  font-weight: 700;
}

.site-alerte-nom .lien-suite {
  font-weight: 400;
}

.site-alerte-adresse {
  font-weight: 700;
  overflow-wrap: anywhere;
}

.site-alerte-reglages {
  margin: 0;
  padding-left: 1.2rem;
  list-style: disc;
}

.site-alerte-reglages li + li {
  margin-top: var(--e1);
}

.site-alerte .bouton .picto {
  width: 1rem;
  height: 1rem;
  margin-right: var(--e1);
  vertical-align: -0.15em;
}

/* Nos pages : les liens du groupe en accès rapide, en bas de chaque page. */
.pied-liens {
  margin: 0 0 1rem;
}
.pied-liens-titre {
  margin: 0 0 0.4rem;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.8;
}
.pied-liens ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pied-liens a {
  display: inline-block;
  min-width: 44px;
  min-height: 44px;
  line-height: 44px;
  text-align: center;
}

/* Grands écrans : tout grandit d'un même pas (texte, champs, marges), et la page s'élargit, pour se lire de loin
   sans zoomer (demande d'Anthony, 20/10/2026, sur un écran de 2 500 px). Le téléphone n'est pas touché. */
@media (min-width: 90rem) {
  html {
    font-size: 112.5%;
  }
  :root {
    --largeur: 80rem;
    --mesure: 34em;
  }
}
@media (min-width: 120rem) {
  html {
    font-size: 125%;
  }
  :root {
    --largeur: 84rem;
    --mesure: 38em;
  }
}
@media (min-width: 150rem) {
  html {
    font-size: 137.5%;
  }
}

/* --- Zones repliables de la page des salles : le titre de zone (h3) sert de titre au repli --- */
.zone-repli {
  margin-top: var(--e5);
}

.zone-repli > .repli-titre .groupe-titre {
  margin: 0;
}

.zone-repli > .repli-corps {
  margin-top: var(--e2);
}

/* Le plan d'une longue page : « Aller à : … », sous le titre. */
.plan {
  margin-top: var(--e5);
  line-height: 2.75;
}

/* Le texte d'exemple d'un champ : lisible (le gris par défaut du navigateur n'a pas le contraste demandé). */
.champ-saisie::placeholder {
  color: var(--texte-discret);
  opacity: 1;
}

/* Au bureau, une ligne de liste ou une consigne ne dépasse pas une mesure confortable. */
.ligne-corps,
.site-alerte-reglages {
  max-width: 55ch;
}

/* À l'accueil, la demande à Claude se déplie sous la ligne des brouillons : un peu d'air entre les deux. */
.atelier-case > .repli {
  margin-top: var(--e3);
}

.ligne-voix {
  max-width: 48ch;
}

.sommaire-valeur {
  max-width: 44ch;
}