/* Polices communes auto-hébergées, présentes sur le serveur. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/inter-400-latin.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/inter-600-latin.woff2') format('woff2')}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/newsreader-500-latin.woff2') format('woff2')}
/* Espaces clients Rémy Kleit · V2 · charte V3 (bleu nuit, ivoire, bronze) */

/* Polices auto-hébergées · Newsreader et Inter, sous-ensembles latin et latin-ext.
   Fichiers dans assets/fonts/. Aucune ressource chargée depuis un domaine tiers. */

:root {
  --bg: #f4f0e8;
  --bg-2: #ede8de;
  --surface: #faf7f1;
  --line: rgba(14, 34, 51, 0.13);
  --line-strong: rgba(14, 34, 51, 0.28);
  --ink: #0e2233;
  --ink-2: #4c5b66;
  --ink-3: #7d8a93;
  --dark: #0e2233;
  --dark-2: #162c3d;
  /* Utilisée par la feuille partagée de la fenêtre de réservation. */
  --dark-line-strong: rgba(242, 239, 232, 0.28);
  --dark-line: rgba(242, 239, 232, 0.12);
  --dark-ink: #f2efe8;
  --dark-ink-2: #a8b3ba;
  --accent: #a77a55;
  --accent-light: #c9a184;
  --petrol: #31596a;
  --accent-soft: rgba(167, 122, 85, 0.14);
  --warn: #9a6a3c;
  --warn-soft: rgba(167, 122, 85, 0.12);
  --success: #2f6b52;
  --success-soft: rgba(47, 107, 82, 0.12);
  --font-display: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --max: 1240px;
  --gutter: clamp(20px, 4vw, 48px);
  --radius: 10px;
  --radius-sm: 6px;
  --section: clamp(52px, 7vw, 88px);
  --shadow-soft: 0 1px 2px rgba(14, 34, 51, 0.06), 0 14px 32px -20px rgba(14, 34, 51, 0.25);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

[hidden] {
  display: none !important;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-variation-settings: "opsz" 72;
  color: var(--ink);
  margin: 0 0 0.5em;
  letter-spacing: -0.012em;
}

h1 {
  max-width: 16ch;
  font-size: clamp(2.2rem, 4.4vw, 3.8rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
}

h2 {
  max-width: 20ch;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  line-height: 1.1;
}

h3 {
  font-size: 1.3rem;
  line-height: 1.28;
}

p {
  margin: 0 0 1em;
}

p:last-child {
  margin-bottom: 0;
}

.container {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Écran d'accès */

.access-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--dark);
}

.access-card {
  width: min(100%, 560px);
  padding: clamp(28px, 5vw, 48px);
  background: var(--bg);
  border-radius: 12px;
}

.access-card h1 {
  max-width: none;
  font-size: clamp(1.9rem, 4.6vw, 2.8rem);
}

.access-card p {
  color: var(--ink-2);
}

.access-form {
  display: grid;
  gap: 10px;
  margin-top: 28px;
}

.access-row {
  display: grid;
  gap: 10px;
}

@media (min-width: 560px) {
  .access-row {
    grid-template-columns: 1fr auto;
  }
}

.access-form input {
  font-family: var(--font-mono);
  letter-spacing: 0.12em;
}

.form-message {
  min-height: 1.4em;
  color: var(--warn);
  font-size: 0.9rem;
}

.security-note {
  margin-top: 16px;
  font-size: 0.85rem;
  color: var(--ink-3);
}

.security-note a {
  border-bottom: 1px solid var(--accent);
}

/* En-tête */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(244, 240, 232, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 76px;
}

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
  white-space: nowrap;
}

.brand .name {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 500;
}

.brand .desc {
  display: none;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/*
  LE NOM DU CLIENT DANS L EN-TETE MANGE 280 PIXELS, ET LE MENU LES CHERCHAIT.

  « ESPACE DE TRAVAIL · CAMILLE ROYER » s affichait des 700 px. A 1280 px, il laissait au menu
  trop peu de place pour ses sept entrees : « Les lives » arrivait coupe contre le bouton
  Messages, et « Revue » passait dessous.

  Ce sous-titre est decoratif : le client sait qui il est, et son prenom est deja en haut de
  chaque page. Le menu, lui, ne l est pas. Il reparait a 1500 px, quand il y a de la place pour
  les deux.
*/
@media (min-width: 1500px) {
  .brand .desc {
    display: inline;
  }
}

/*
  LA NAVIGATION EXISTE A TOUTES LES LARGEURS.

  Elle etait « display: none » en dessous de 1000 px, et rendue en flex au-dela. Sur telephone
  et sur tablette, l espace client n avait donc AUCUN menu : le logo, le bouton Messages, la
  deconnexion, et rien d autre. Un client entrait dans une page de son parcours et n en
  ressortait que par le logo, dont personne ne devine qu il ramene a l espace.

  A 1000 px exactement, le defaut s inversait : les sept entrees apparaissaient d un coup a
  cote du nom, du sous-titre et des deux boutons, et la page debordait en largeur.

  CE QUI REMPLACE : une bande qui defile. En dessous de 1200 px la navigation passe sur sa
  propre ligne, bord a bord, et defile horizontalement si elle est trop longue. Rien ne
  disparait, rien ne deborde, et « Mon espace » est en tete : la premiere entree est celle
  qu on voit sans faire defiler.
*/
/*
  LA BANDE DÉFILE À TOUTES LES LARGEURS, PAS SEULEMENT SUR TÉLÉPHONE.

  Le defilement n etait pose qu en dessous de 1200 px. Au-dessus, `min-width: 0` laissait la
  navigation se comprimer sous la taille de son contenu, qui debordait alors par-dessus le
  bouton « Messages » : a 1280 px, « Revue » passait sous le bouton, cliquable en apparence et
  inaccessible en pratique.

  Le banc l a vu, pas la capture : a l image, un chevauchement de quelques pixels ressemble a un
  espacement serre. Il a fallu mesurer `scrollWidth` contre `clientWidth`.

  Le defilement et son masque vivent donc ici, sur TOUTES les largeurs. Ce que le point de
  rupture decide, c est seulement la MISE EN PAGE : bande sur sa propre ligne en dessous de
  1200 px, en ligne avec le reste au-dessus.
*/
.nav {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
}

.nav::-webkit-scrollbar { display: none; }

.nav a {
  flex: none;
  white-space: nowrap;
  scroll-snap-align: start;
}

/*
  UN REMBOURRAGE DE FIN PLUS LARGE QUE LE MASQUE.

  Le degrade s applique en permanence, y compris arrive au bout de la bande : le faire
  disparaitre demanderait `animation-timeline: scroll()`, que trop peu de navigateurs
  comprennent, ou du JavaScript. C est donc ce rembourrage qui repond au probleme , la derniere
  entree finit entierement lisible, le degrade ne tombant plus que sur du vide. On ne fait pas
  disparaitre le masque : on fait en sorte qu il n ait plus rien a effacer.
*/
.nav { padding-right: 28px; }

@media (max-width: 1199px) {
  .header-inner {
    flex-wrap: wrap;
    row-gap: 0;
  }

  /*
    La marge negative fait sortir la bande des gouttieres du conteneur pour qu elle aille d un
    bord a l autre ; le rembourrage rend son inset a la premiere et a la derniere entree. Sans
    cela, une bande qui defile s arrete visuellement avant le bord et on ne comprend pas qu il
    reste quelque chose a droite.
  */
  /*
    LA BANDE PASSE À LA LIGNE AU LIEU DE DÉFILER.

    ELLE A DÉFILÉ PENDANT DEUX RÉVISIONS, ET CE N'ÉTAIT PAS LA BONNE RÉPONSE.

    Le probleme d origine etait reel : la derniere entree visible etait tranchee en plein milieu
    d un mot, « D… » pour « Debrief ». On ne lisait pas « il y en a d autres a droite », on
    lisait « cette page est cassee ». La reponse a ete un masque degrade, un calage au
    defilement et un rembourrage de fin : trois mecanismes pour rendre la coupure INTENTIONNELLE
    plutot que de la supprimer.

    Les contrôles sont passes au vert, et Rémy a relu la capture deux fois de suite pour dire la
    meme chose : on voit encore « Débrief » tronque a droite. Il a raison, et le desaccord ne
    portait pas sur la mesure. Un contrôle d absence de debordement prouve que rien ne deborde ;
    il ne prouve pas qu on comprenne qu il reste des entrees. Une entree a moitie effacee reste
    une entree a moitie effacee, et le lecteur ne sait pas s il doit faire defiler, cliquer, ou
    si la page a un defaut.

    Sous 1200 px, la bande passe donc a la ligne. Aucune entree n est jamais coupee, il n y a
    plus rien a deviner, et le prix est quelques pixels de hauteur. Le defilement reste en place
    au-dessus de 1200 px, ou il n a jamais coupe quoi que ce soit : c est la que `min-width: 0`
    laissait la navigation se comprimer par-dessus le bouton « Messages ».

    Aucun JavaScript : une navigation qui depend d un script est une navigation qui disparait le
    jour ou le script tombe.
  */
  .nav {
    order: 3;
    flex: 1 0 100%;
    flex-wrap: wrap;
    row-gap: 6px;
    /* Plus de defilement, donc plus de masque : il n y aurait que du vide a effacer. */
    overflow-x: visible;
    scroll-snap-type: none;
    -webkit-mask-image: none;
    mask-image: none;
    margin: 0 calc(var(--gutter) * -1);
    padding: 0 var(--gutter) 10px var(--gutter);
  }
}

/*
  LA NAVIGATION DOIT SE VOIR COMME UNE NAVIGATION.

  Les entrées étaient du texte gris, sans soulignement, sans cadre, sans changement au survol
  autre qu'un gris un peu plus foncé. Rien n'y ressemblait à quelque chose sur quoi on clique :
  on les lisait comme des titres, et l'entrée du programme passait inaperçue.

  La correction reste sobre, parce qu'une barre de navigation faite de gros boutons devient
  illisible dès la quatrième entrée. Trois signaux discrets suffisent :

    · un trait sous l'entrée dès le survol, qui dit « ceci est un lien » ;
    · un fond très léger au survol, qui donne une surface à la cible ;
    · l'encre pleine plutôt que le gris, dès qu'on approche.

  L'entrée de la page courante garde son filet couleur bronze : elle indique où l'on est, ce
  qui est une autre information que « ceci se clique ».
*/
.nav a {
  position: relative;
  padding: 9px 11px;
  border-radius: 6px;
  color: var(--ink-2);
  font-size: 0.9rem;
  font-weight: 500;
  transition: color 0.12s ease, background-color 0.12s ease;
}

.nav a::after {
  content: "";
  position: absolute;
  left: 11px;
  right: 11px;
  bottom: 5px;
  height: 1px;
  background: currentColor;
  opacity: 0;
  transition: opacity 0.12s ease;
}

.nav a:hover,
.nav a:focus-visible {
  color: var(--ink);
  background: rgba(14, 34, 51, 0.05);
}

.nav a:hover::after,
.nav a:focus-visible::after {
  opacity: 0.55;
}

.nav a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Boutons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 13px 22px;
  border: 1px solid transparent;
  border-radius: 6px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}

.btn-primary {
  background: var(--ink);
  color: var(--bg);
}

.btn-primary:hover {
  background: #1a3448;
}

.btn-secondary {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--ink);
}

.btn-secondary:hover {
  border-color: var(--ink);
}

.btn-sm {
  min-height: 40px;
  padding: 11px 16px;
  font-size: 0.9rem;
}

/* Hero */

.hero {
  padding: clamp(44px, 6vw, 80px) 0 clamp(36px, 5vw, 56px);
  border-bottom: 1px solid var(--line);
}

.hero-grid {
  display: grid;
  gap: 28px;
  align-items: end;
}

@media (min-width: 900px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
    gap: 56px;
  }
}

.lead {
  max-width: 640px;
  color: var(--ink-2);
  font-size: clamp(1.06rem, 1.5vw, 1.24rem);
  line-height: 1.55;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--accent);
  flex: none;
}

.hero-panel {
  padding: clamp(22px, 3vw, 32px);
  background: var(--dark);
  color: var(--dark-ink);
  border-radius: 12px;
}

.panel-label {
  display: block;
  margin-bottom: 12px;
  color: var(--accent-light);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.hero-panel p {
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.4;
}

/* Sections */

/*
  `padding-block`, ET SURTOUT PAS LE RACCOURCI `padding`.

  Cette regle s ecrivait « padding: var(--section) 0 ». Le raccourci pose les QUATRE cotes :
  il mettait donc aussi les cotes gauche et droit a zero. Or quarante pages de l espace
  ouvrent sur `<main class="container section">`, et `.container` porte la gouttiere
  (`padding: 0 var(--gutter)`). Cette ligne, ecrite plus bas dans le fichier et de meme poids,
  l ecrasait.

  RESULTAT, SUR TOUT ECRAN PLUS ETROIT QUE `--max` : plus une seule gouttiere. Les titres, les
  surtitres et les cartes touchaient le bord de l ecran, et la premiere lettre passait sous la
  courbure de la dalle. Au-dessus de `--max`, la marge automatique du conteneur recreait un
  espace : le defaut etait donc INVISIBLE sur l ecran ou l on developpe, et permanent sur le
  telephone ou l on lit.

  Aucun banc ne pouvait le voir : la page rendait le bon texte, dans le bon ordre, et
  `scrollWidth` n augmentait pas puisque rien ne depassait. Il a fallu mesurer la position
  gauche d un titre a 390 px pour que le zero apparaisse.

  `padding-block` ne touche que le haut et le bas. Les `<section class="section">` qui portent
  leur propre `.container` a l interieur ne changent pas : elles n avaient deja aucune
  gouttiere horizontale a perdre.
*/
.section {
  padding-block: var(--section);
}

.section + .section {
  border-top: 1px solid var(--line);
}

.section-head {
  max-width: 790px;
  margin-bottom: clamp(28px, 4vw, 46px);
}

.section-head p,
.text {
  max-width: 640px;
  color: var(--ink-2);
}

/* Cap six semaines */

.roadmap {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

@media (min-width: 640px) {
  .roadmap {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1000px) {
  .roadmap {
    grid-template-columns: repeat(6, 1fr);
  }
}

.roadmap label {
  display: grid;
  gap: 8px;
  align-content: start;
  min-height: 160px;
  padding: 20px 18px 22px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background 0.15s;
}

.roadmap label:hover {
  background: var(--surface);
}

.roadmap label:has(input:checked) {
  background: var(--surface);
  box-shadow: inset 0 3px 0 var(--accent);
}

.roadmap input {
  inline-size: 20px;
  block-size: 20px;
  accent-color: var(--ink);
}

.roadmap span {
  font-family: var(--font-display);
  color: var(--accent);
  font-size: 1.2rem;
}

.roadmap strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.25rem;
}

.roadmap em {
  color: var(--ink-2);
  font-size: 0.9rem;
  font-style: normal;
}

/* Modules */

.work-grid {
  display: grid;
  gap: 22px;
}

@media (min-width: 980px) {
  .work-grid {
    grid-template-columns: minmax(260px, 0.6fr) minmax(460px, 1fr);
    gap: 40px;
    align-items: start;
  }

  .work-grid .result-panel {
    grid-column: 2;
  }
}

.tool-panel,
.result-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.tool-panel {
  display: grid;
  gap: 18px;
  padding: clamp(20px, 3vw, 30px);
}

.field-row {
  display: grid;
  gap: 16px;
}

@media (min-width: 760px) {
  .field-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

label {
  display: grid;
  gap: 8px;
  color: var(--ink);
  font-weight: 600;
  font-size: 0.92rem;
}

input,
textarea,
select {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink);
  padding: 12px 13px;
  outline: none;
  font-weight: 400;
  font-size: 1rem;
}

textarea {
  min-height: 104px;
  resize: vertical;
}

.large-textarea {
  min-height: 210px;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.result-panel {
  min-height: 120px;
  padding: clamp(20px, 3vw, 30px);
  border-left: 3px solid var(--accent);
}

.result-panel:empty::before {
  content: "Le résultat apparaîtra ici.";
  color: var(--ink-3);
}

.result-panel h3 {
  margin-bottom: 10px;
}

.result-panel p {
  color: var(--ink-2);
}

.result-panel p strong {
  color: var(--ink);
}

.result-panel ul,
.result-panel ol {
  margin: 10px 0 14px;
  padding-left: 1.2rem;
  color: var(--ink-2);
}

.result-panel li {
  margin-bottom: 7px;
}

.status {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 6px 12px;
  margin-bottom: 12px;
  border-radius: 4px;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.status.good {
  background: var(--success-soft);
  color: var(--success);
}

.status.warn {
  background: var(--warn-soft);
  color: var(--warn);
}

.status.risk {
  background: rgba(14, 34, 51, 0.08);
  color: var(--ink);
}

.checklist label {
  grid-template-columns: 24px 1fr;
  align-items: start;
  gap: 12px;
  font-weight: 500;
  color: var(--ink-2);
  font-size: 0.97rem;
}

.checklist input {
  width: 20px;
  height: 20px;
  margin-top: 3px;
  accent-color: var(--ink);
}

/* Contacts */

.contact-form {
  display: grid;
  gap: 10px;
  margin-bottom: 22px;
}

@media (min-width: 980px) {
  .contact-form {
    grid-template-columns: 1fr 1fr 1.2fr 170px 1.2fr auto;
    align-items: end;
  }
}

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

table {
  width: 100%;
  min-width: 860px;
  border-collapse: collapse;
}

th,
td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
  font-size: 0.95rem;
}

th {
  background: var(--dark);
  color: var(--dark-ink);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

tbody tr:last-child td {
  border-bottom: 0;
}

.delete-btn {
  background: transparent;
  border: 0;
  color: var(--ink-3);
  font-size: 0.85rem;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
}

.delete-btn:hover {
  color: var(--warn);
  border-color: var(--warn);
}

/* Notes */

.notes-grid {
  display: grid;
  gap: 22px;
}

@media (min-width: 980px) {
  .notes-grid {
    grid-template-columns: minmax(260px, 0.6fr) minmax(460px, 1fr);
    gap: 40px;
    align-items: start;
  }
}

.notes-area textarea {
  min-height: 260px;
}

/* Pied de page */

.portal-footer {
  border-top: 1px solid var(--line);
  padding: 28px 0;
  font-size: 0.85rem;
  color: var(--ink-3);
}

.portal-footer .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
}

.portal-footer a {
  border-bottom: 1px solid var(--accent);
}

.checklist-items {
  display: grid;
  gap: 12px;
}

/* Travail à faire (fixé par Rémy, cochable par le client) */

.assigned {
  display: grid;
  border-top: 1px solid var(--line);
}

.assigned-item {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 14px;
  align-items: start;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  font-weight: 400;
  cursor: pointer;
}

.assigned-item input {
  width: 20px;
  height: 20px;
  margin-top: 4px;
  accent-color: var(--ink);
}

.assigned-item strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.2rem;
  color: var(--ink);
}

.assigned-item em {
  display: block;
  font-style: normal;
  color: var(--ink-2);
  font-size: 0.95rem;
  margin-top: 4px;
}

.assigned-item small {
  display: block;
  margin-top: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

.assigned-item:has(input:checked) strong {
  color: var(--ink-3);
  text-decoration: line-through;
  text-decoration-color: var(--accent);
}

/* Séances (lecture seule) */

.sessions {
  display: grid;
  gap: 18px;
}

.session {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(20px, 3vw, 30px);
}

.session-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 18px;
  margin-bottom: 12px;
}

.session-head h3 {
  margin: 0;
}

.session-date {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

.session ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
  color: var(--ink-2);
  font-size: 0.97rem;
}

.session li {
  padding-left: 20px;
  position: relative;
}

.session li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 10px;
  height: 1px;
  background: var(--accent);
}

.session-next {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 0.95rem;
}

.session-next strong {
  color: var(--ink);
}

.muted {
  color: var(--ink-3);
}

/* ---------- V2 : connexion, en-tête, administration ---------- */

.access-form label + input {
  margin-bottom: 4px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.inline-form {
  display: inline;
}

.save-state {
  font-size: 0.82rem;
  color: var(--ink-3);
}

.save-state.ok {
  color: var(--success);
}

.save-state.pending {
  color: var(--ink-3);
}

.save-state.error {
  color: var(--warn);
}

.callout-admin {
  border: 1px solid var(--accent);
  background: var(--surface);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-bottom: 28px;
  line-height: 1.7;
}

.callout-admin code,
code.mdp {
  font-family: var(--font-mono);
  background: var(--bg-2);
  padding: 2px 8px;
  border-radius: 4px;
}

code.mdp {
  font-size: 1.15rem;
  letter-spacing: 0.08em;
}

table.suivi th,
table.suivi td {
  white-space: nowrap;
}

table.suivi {
  min-width: 1000px;
}

.admin-grid {
  display: grid;
  gap: 18px;
}

@media (min-width: 900px) {
  .admin-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .admin-block-large {
    grid-column: 1 / -1;
  }
}

.admin-block {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(20px, 3vw, 28px);
}

.admin-block h2 {
  font-size: 1.35rem;
  margin-bottom: 12px;
}

.admin-list {
  display: grid;
  gap: 8px;
  color: var(--ink-2);
}

.admin-list li .coche {
  display: inline-block;
  width: 20px;
  color: var(--accent);
  font-weight: 600;
}

.admin-list li.fait {
  color: var(--ink-3);
  text-decoration: line-through;
  text-decoration-color: var(--accent);
}

.admin-dl {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 8px 16px;
  margin: 0;
  color: var(--ink-2);
}

.admin-dl dt {
  font-weight: 600;
  color: var(--ink);
}

.admin-dl dd {
  margin: 0;
}

.pre {
  white-space: pre-wrap;
  color: var(--ink-2);
}

.admin-form {
  max-width: 900px;
}

.install-steps {
  margin: 12px 0 0;
  padding-left: 20px;
  color: var(--ink-2);
  display: grid;
  gap: 8px;
}

.install-steps code {
  font-family: var(--font-mono);
  background: var(--bg-2);
  padding: 1px 6px;
  border-radius: 4px;
}

.small {
  font-size: 0.85rem;
}

main.section h1 {
  max-width: 24ch;
}

/* ---------- Lot 2 : parcours par semaines ---------- */

.crumbs {
  font-size: 0.9rem;
  color: var(--ink-3);
  margin-bottom: 14px;
}

.parcours-head {
  display: grid;
  gap: 28px;
  align-items: start;
  margin-bottom: clamp(32px, 4vw, 48px);
}

@media (min-width: 900px) {
  .parcours-head {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 48px;
  }
}

.progress-card {
  background: var(--dark);
  color: var(--dark-ink);
  border-radius: 12px;
  padding: 24px 26px;
  display: grid;
  gap: 8px;
}

.progress-num {
  font-family: var(--font-display);
  font-size: 3rem;
  line-height: 1;
}

.progress-num span {
  font-size: 1.3rem;
  color: var(--dark-ink-2);
}

.progress-label {
  color: var(--dark-ink-2);
  font-size: 0.9rem;
}

.progress-bar {
  display: block;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  margin: 8px 0 14px;
}

.progress-card .btn-primary {
  background: var(--dark-ink);
  color: var(--dark);
}

.semaines-grid {
  display: grid;
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 0;
}

@media (min-width: 640px) {
  .semaines-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1000px) {
  .semaines-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.semaine-card {
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}

.semaine-link {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 24px 20px;
  min-height: 190px;
  color: inherit;
}

.semaine-card h2 {
  font-size: 1.5rem;
  margin: 0;
  max-width: none;
}

.semaine-card p {
  color: var(--ink-2);
  font-size: 0.93rem;
  flex: 1;
}

.semaine-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.semaine-num {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.semaine-badge {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--bg-2);
  color: var(--ink-2);
}

.semaine-cta {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
}

.semaine-verrou {
  opacity: 0.62;
  background: var(--bg-2);
}

.semaine-ouverte,
.semaine-en-cours {
  border-color: var(--petrol);
  background: #eef4f6;
}

.semaine-ouverte .semaine-badge,
.semaine-en-cours .semaine-badge {
  background: var(--petrol);
  color: #fff;
}

.semaine-en-cours {
  box-shadow: 0 0 0 2px var(--petrol);
}

.semaine-terminee {
  border-color: var(--success);
}

.semaine-terminee .semaine-badge {
  background: var(--success-soft);
  color: var(--success);
}

.semaine-card:has(a.semaine-link):hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
}

/* Page semaine */

.stack {
  display: grid;
  gap: 8px;
}

.exercices {
  display: grid;
  gap: 28px;
}

.exercice {
  display: grid;
  gap: 16px;
}

@media (min-width: 980px) {
  .exercice {
    grid-template-columns: minmax(240px, 0.55fr) minmax(460px, 1fr);
    gap: 40px;
    align-items: start;
  }

  .exercice .result-panel {
    grid-column: 2;
  }
}

.exercice-head h3 {
  font-size: 1.5rem;
  margin-bottom: 8px;
}

.exercice .result-panel:empty {
  display: none;
}

.ressources {
  display: grid;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.termine-bloc {
  border-top: 1px solid var(--line);
}

.termine-toggle {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface);
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 500;
  cursor: pointer;
}

.termine-toggle input {
  width: 22px;
  height: 22px;
  accent-color: var(--success);
}

.termine-toggle:has(input:checked) {
  border-color: var(--success);
  background: var(--success-soft);
}

.semaine-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

/* Administration : suivi */

.suivi-list {
  display: grid;
  gap: 12px;
}

.suivi-row {
  display: grid;
  gap: 12px 24px;
  align-items: center;
  padding: 18px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
}

@media (min-width: 1000px) {
  .suivi-row {
    grid-template-columns: 220px 1fr auto 150px;
  }
}

.suivi-row.inactif {
  opacity: 0.55;
}

.suivi-nom {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--ink);
}

.suivi-semaines {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pastille {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  border: 1px solid transparent;
}

.pastille.gris {
  background: var(--bg-2);
  color: var(--ink-3);
  border-color: var(--line);
}

.pastille.bleu {
  background: var(--petrol);
  color: #fff;
}

.pastille.vert {
  background: var(--success);
  color: #fff;
}

.pastille.brouillon {
  border-style: dashed;
  border-color: var(--accent);
}

.pastille.courante {
  box-shadow: 0 0 0 2px var(--accent-soft), 0 0 0 3px var(--accent);
}

a.pastille:hover {
  filter: brightness(1.08);
}

.suivi-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 0.85rem;
  color: var(--ink-2);
}

.suivi-stats strong {
  color: var(--ink);
}

/* Administration : fiche client */

.h-section {
  font-size: 1.6rem;
  margin: 8px 0 16px;
}

.admin-semaines {
  display: grid;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.admin-semaine {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 10px 16px;
  align-items: center;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
}

@media (min-width: 800px) {
  .admin-semaine {
    grid-template-columns: 48px 1fr auto;
  }
}

.admin-semaine.courante {
  border-color: var(--accent);
}

.admin-semaine-body strong {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.15rem;
}

.admin-semaine-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.warn-text {
  color: var(--warn);
}

.ok-text {
  color: var(--success);
}

.stack-form {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
}

.stack-form .btn {
  justify-self: start;
}

/* Administration : semaine */

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 24px;
}

.tab {
  padding: 10px 14px;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink-2);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.tab.active {
  color: var(--ink);
  border-color: var(--accent);
}

.callout-admin.erreurs {
  border-color: var(--warn);
}

.callout-admin.erreurs ul {
  margin: 8px 0 0;
  padding-left: 20px;
  color: var(--ink-2);
}

.actions-cell {
  display: flex;
  gap: 12px;
  align-items: center;
}

.apercu-cadre {
  border: 2px dashed var(--accent);
  border-radius: 12px;
  overflow: hidden;
}

.apercu-bandeau {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  background: var(--accent-soft);
  font-size: 0.9rem;
  color: var(--ink);
}

.apercu .hero {
  padding-top: 32px;
}

.apercu .section {
  padding: 40px 0;
}

.apercu input:disabled,
.apercu textarea:disabled,
.apercu select:disabled {
  opacity: 0.85;
  background: var(--surface);
  color: var(--ink);
  cursor: default;
}

/* ---------- V4 : avancement des actions, repères de progression, lien nouvel accès ---------- */

.lien-acces {
  color: var(--ink);
  font-weight: 600;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 1px;
  transition: color 0.15s, border-color 0.15s;
}

.lien-acces:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.lien-acces:focus-visible,
.lien-acces:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
  border-radius: 3px;
}

@media (max-width: 480px) {
  .security-note .lien-acces {
    display: inline-block;
    padding: 4px 0;
  }
}

.reperes {
  display: flex;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 10px 0 16px;
}

.repere {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: rgba(242, 239, 232, 0.16);
}

.repere.ouvert {
  background: rgba(242, 239, 232, 0.34);
}

.repere.plein {
  background: var(--accent-light);
}

.actions-avancement {
  display: grid;
  gap: 6px;
  margin: 4px 0 10px;
}

.actions-texte {
  font-size: 0.85rem;
  color: var(--ink-2);
}

.actions-texte strong {
  color: var(--ink);
  font-weight: 600;
}

.actions-barre {
  display: block;
  width: 100%;
  height: 4px;
}

.semaine-card .actions-avancement {
  margin-top: auto;
}

.actions-avancement.compact {
  max-width: 320px;
  margin: 8px 0 0;
}

.travail-compteur {
  margin-top: 6px;
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--ink);
}

.travail-compteur.complet {
  color: var(--success);
}

.travail-compteur:empty {
  display: none;
}

/* ---------- V5 : messagerie, relances, rappels ---------- */

.nav-badge {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  margin-left: 7px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;
  vertical-align: middle;
}

.nav a[aria-current="page"] {
  color: var(--ink);
  box-shadow: inset 0 -2px 0 var(--accent);
}

.header-msg {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  color: var(--ink);
}

.header-msg:hover {
  border-color: var(--ink);
}

.header-msg .nav-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  margin: 0;
}

@media (min-width: 1000px) {
  .header-msg {
    display: none;
  }
}

.status.new-msg {
  background: var(--accent);
  color: #fff;
  margin-bottom: 0;
}

a.status.new-msg:hover {
  background: #8f6646;
}

.suivi-alerte {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

@media (min-width: 1000px) {
  .suivi-row {
    grid-template-columns: 220px 1fr auto 180px;
  }
}

.flash {
  padding: 14px 18px;
  margin: 0 0 24px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 0.95rem;
}

.flash-ok {
  border-color: var(--success);
  color: var(--success);
  background: var(--success-soft);
}

.flash-warn {
  border-color: var(--warn);
  color: var(--warn);
  background: var(--warn-soft);
}

.flash-erreur {
  border-color: var(--warn);
  color: var(--warn);
}

/* Mon parcours : alerte et bloc « Écrire à Rémy » */

.alerte-msg {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 10px 14px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--ink);
  font-weight: 600;
  font-size: 0.95rem;
}

.alerte-msg .nav-badge {
  margin: 0;
}

.alerte-msg-admin {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.alerte-msg-inline {
  font-weight: 600;
  color: var(--accent);
  font-size: 0.95rem;
}

.contact-remy {
  display: grid;
  gap: 20px;
  margin-top: clamp(36px, 5vw, 56px);
  padding: clamp(24px, 4vw, 40px);
  background: var(--dark);
  color: var(--dark-ink);
  border-radius: 12px;
}

.contact-remy h2,
.contact-remy .text {
  color: var(--dark-ink);
}

.contact-remy .text {
  color: var(--dark-ink-2);
}

.contact-remy .eyebrow {
  color: var(--accent-light);
}

.contact-remy .eyebrow::before {
  background: var(--accent-light);
}

.contact-remy-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.contact-remy .btn-primary {
  background: var(--dark-ink);
  color: var(--dark);
}

.contact-remy .alerte-msg-inline {
  color: var(--accent-light);
}

@media (min-width: 800px) {
  .contact-remy {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 40px;
  }
}

/* Fil de conversation */

.messagerie .section-head p {
  max-width: 640px;
}

.fil-bloc {
  max-width: 820px;
  margin-bottom: clamp(28px, 4vw, 40px);
}

.fil-vide {
  padding: 22px 24px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  color: var(--ink-2);
}

.fil {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 14px;
}

.msg {
  max-width: 88%;
  padding: 16px 18px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface);
}

.msg-client {
  justify-self: start;
  border-bottom-left-radius: 4px;
}

.msg-admin {
  justify-self: end;
  background: #eef4f6;
  border-color: rgba(49, 89, 106, 0.35);
  border-bottom-right-radius: 4px;
}

.msg-relance {
  background: var(--bg-2);
  border-color: var(--line);
}

.msg-nouveau {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.msg-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-bottom: 8px;
  font-size: 0.8rem;
  color: var(--ink-3);
}

.msg-auteur {
  font-weight: 600;
  color: var(--ink);
}

.msg-tag {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--bg-2);
  color: var(--ink-2);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.msg-tag-nouveau {
  background: var(--accent);
  color: #fff;
}

.msg-tag-echec {
  background: var(--warn-soft);
  color: var(--warn);
}

.msg-corps {
  color: var(--ink);
  line-height: 1.6;
  overflow-wrap: anywhere;
}

/* Formulaire d'envoi */

.msg-form {
  max-width: 820px;
  display: grid;
  gap: 10px;
  padding: clamp(18px, 3vw, 26px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.msg-form textarea {
  min-height: 150px;
}

.msg-form-row {
  display: grid;
  gap: 12px;
}

.msg-form-semaine {
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--ink-2);
}

.msg-form-semaine select {
  padding: 10px 12px;
}

@media (min-width: 640px) {
  .msg-form-row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }

  .msg {
    max-width: 78%;
  }
}

/* Liste des conversations (admin) */

.conv-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.conv-link {
  display: block;
  padding: 16px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.conv-link:hover {
  border-color: var(--ink);
  box-shadow: var(--shadow-soft);
}

.conv-nonlu .conv-link {
  border-color: var(--accent);
}

.conv.inactif {
  opacity: 0.6;
}

.conv-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-bottom: 6px;
}

.conv-nom {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--ink);
}

.conv-date {
  margin-left: auto;
  font-size: 0.82rem;
  color: var(--ink-3);
}

.conv-extrait {
  margin: 0;
  color: var(--ink-2);
  font-size: 0.93rem;
  overflow-wrap: anywhere;
}

.conv-auteur {
  font-weight: 600;
  color: var(--ink);
}

/* Fiche client : relances et rappels */

.h-sub {
  font-size: 1.1rem;
  margin: 18px 0 8px;
}

/*
  UNE LIGNE DE CARNET QUI NE TIENT PAS DOIT PASSER A LA LIGNE, PAS SORTIR DE L ECRAN.

  « display: flex » sans « flex-wrap » tient ses elements sur une seule ligne, quoi qu il en
  coute. Un contact nomme « Karim Benali » chez « Studio Yoga » debordait donc de dix pixels a
  375 px, et la page entiere se mettait a defiler de cote.

  CE DEFAUT ETAIT LA AVANT, ET IL ETAIT CACHE. Tant que `.section` ecrasait la gouttiere du
  conteneur, la ligne disposait de quarante pixels de plus : elle tenait de justesse, sur une
  page qui touchait les deux bords. Rendre la gouttiere l a donc revele, ce qui est la
  meilleure chose qui pouvait lui arriver : le nom du prochain client un peu long aurait
  produit le meme defilement, sans qu on sache pourquoi.

  Le sous-titre gris prend une ligne entiere : c est une legende, pas un morceau du nom.
*/
.check-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: 500;
}

.check-line > .muted {
  flex: 1 0 100%;
}

.check-line input {
  width: 20px;
  height: 20px;
  accent-color: var(--ink);
}

.mt-3 {
  margin-top: 36px;
}

.mt-1 {
  margin-top: 12px;
}

@media (max-width: 480px) {
  .msg {
    max-width: 100%;
  }

  .header-inner {
    gap: 10px;
  }

  .conv-date {
    margin-left: 0;
  }
}

/* ---------- V5.2 : messagerie côté client (bouton d'en-tête, accès flottant, panneau, conversation) ---------- */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Bouton Messages dans l'en-tête client */

.btn-messages {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 0 16px 0 13px;
  border: 1px solid var(--dark);
  border-radius: 6px;
  background: var(--dark);
  color: var(--dark-ink);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}

.btn-messages .icone-enveloppe {
  color: var(--accent-light);
  flex: none;
}

.btn-messages:hover {
  background: #1a3448;
  border-color: #1a3448;
}

.btn-messages:active {
  transform: translateY(1px);
}

.btn-messages:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
}

.btn-messages[aria-current="page"] {
  background: var(--dark-2);
  box-shadow: inset 0 -2px 0 var(--accent);
}

.btn-messages .nav-badge {
  margin-left: 2px;
  background: var(--accent);
  color: #fff;
}

@media (max-width: 479px) {
  .btn-messages {
    width: 44px;
    min-height: 44px;
    padding: 0;
    justify-content: center;
  }

  .btn-messages-texte {
    display: none;
  }

  .btn-messages .nav-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    margin: 0;
  }
}

/* Accès flottant : de la place en bas de page pour ne rien masquer */

body.avec-messagerie {
  padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
}

.rk-bulle {
  position: fixed;
  right: calc(20px + env(safe-area-inset-right, 0px));
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 20px 0 16px;
  border: 1px solid rgba(242, 239, 232, 0.14);
  border-radius: 999px;
  background: var(--dark);
  color: var(--dark-ink);
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 2px 4px rgba(14, 34, 51, 0.12), 0 16px 32px -12px rgba(14, 34, 51, 0.45);
  transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
}

.rk-bulle .icone-enveloppe {
  color: var(--accent-light);
  flex: none;
}

.rk-bulle:hover {
  background: #1a3448;
  box-shadow: 0 2px 4px rgba(14, 34, 51, 0.14), 0 18px 34px -12px rgba(14, 34, 51, 0.55);
}

.rk-bulle:active {
  transform: translateY(1px);
}

.rk-bulle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent), 0 16px 32px -12px rgba(14, 34, 51, 0.45);
}

.rk-bulle-texte-court {
  display: none;
}

.rk-bulle-badge {
  position: absolute;
  top: -6px;
  right: -4px;
  margin: 0;
  box-shadow: 0 0 0 2px var(--bg);
}

@media (max-width: 699px) {
  .rk-bulle {
    right: calc(14px + env(safe-area-inset-right, 0px));
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    min-height: 54px;
    min-width: 54px;
    padding: 0 18px 0 15px;
  }

  .rk-bulle-texte {
    display: none;
  }

  .rk-bulle-texte-court {
    display: inline;
  }
}

@media (max-width: 479px) {
  .rk-bulle {
    width: 54px;
    padding: 0;
    justify-content: center;
  }

  .rk-bulle-texte-court {
    display: none;
  }
}

/* Panneau de conversation */

html.rk-panneau-ouvert {
  overflow: hidden;
}

.rk-voile {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(14, 34, 51, 0.38);
}

.rk-panneau {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 51;
  display: flex;
  flex-direction: column;
  width: min(440px, 100vw);
  max-height: 100dvh;
  background: var(--bg);
  border-left: 1px solid var(--line);
  box-shadow: -18px 0 40px -24px rgba(14, 34, 51, 0.5);
  outline: none;
}

.rk-panneau.rk-anim {
  transform: translateX(24px);
  opacity: 0;
  transition: transform 0.18s ease-out, opacity 0.18s ease-out;
}

.rk-panneau.rk-anim.rk-visible {
  transform: none;
  opacity: 1;
}

.rk-panneau-tete {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px 12px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

.rk-panneau-titre {
  margin: 0;
  font-size: 1.35rem;
  flex: 1;
  max-width: none;
}

.rk-panneau-lien {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-2);
  border-bottom: 1px solid var(--accent);
  white-space: nowrap;
}

.rk-panneau-lien:hover {
  color: var(--ink);
}

.rk-fermer {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  flex: none;
}

.rk-fermer:hover {
  border-color: var(--ink);
}

.rk-fermer:focus-visible,
.rk-panneau-lien:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
  border-radius: 6px;
}

.rk-panneau-fil {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 16px 12px 20px;
  overscroll-behavior: contain;
}

.rk-panneau-fil:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.rk-panneau-form {
  display: grid;
  gap: 8px;
  padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px)) 20px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.rk-panneau-ligne,
.conv-composer-ligne {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.rk-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-2);
}

.rk-panneau-ligne select,
.conv-composer-ligne select {
  width: auto;
  max-width: 100%;
  padding: 8px 32px 8px 10px;
  font-size: 0.9rem;
}

.rk-panneau-form textarea {
  min-height: 92px;
  max-height: 40vh;
}

.rk-panneau-actions,
.conv-composer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.rk-etat {
  margin: 0;
  min-height: 1.2em;
  font-size: 0.85rem;
  line-height: 1.35;
}

.rk-etat-ok {
  color: var(--success);
}

.rk-etat-warn {
  color: var(--warn);
}

.rk-etat-erreur {
  color: var(--warn);
  font-weight: 600;
}

@media (max-width: 699px) {
  .rk-panneau {
    left: 0;
    width: auto;
    border-left: 0;
    height: 100dvh;
  }

  .rk-panneau.rk-anim {
    transform: translateY(16px);
  }

  .rk-panneau-tete {
    padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 10px 16px;
  }

  .rk-panneau-titre {
    font-size: 1.2rem;
  }

  .rk-panneau-fil {
    padding: 14px 12px 10px 16px;
  }

  .rk-panneau-form {
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)) 16px;
  }

  .rk-panneau-form textarea {
    min-height: 72px;
    max-height: 30vh;
  }
}

/* Conversation : bulles, séparateurs de jour */

.conv {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 14px;
}

.conv-jour {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0 2px;
  color: var(--ink-3);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.conv-jour::before,
.conv-jour::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.bulle {
  max-width: min(86%, 560px);
  display: grid;
  gap: 6px;
}

.bulle-corps {
  padding: 13px 16px;
  border-radius: 14px;
  line-height: 1.55;
  overflow-wrap: anywhere;
  font-size: 0.98rem;
}

.bulle-remy {
  justify-self: start;
}

.bulle-remy .bulle-corps {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-bottom-left-radius: 4px;
  color: var(--ink);
}

.bulle-moi {
  justify-self: end;
}

.bulle-moi .bulle-corps {
  background: var(--dark);
  color: var(--dark-ink);
  border-bottom-right-radius: 4px;
}

.bulle-moi .bulle-meta {
  justify-content: flex-end;
}

.bulle-relance .bulle-corps {
  background: var(--bg-2);
  border-left-color: var(--petrol);
}

.bulle-nouvelle .bulle-corps {
  box-shadow: 0 0 0 2px var(--accent-soft);
  border-color: var(--accent);
}

.bulle-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  padding: 0 4px;
  font-size: 0.78rem;
  color: var(--ink-3);
}

.bulle-auteur {
  font-weight: 600;
  color: var(--ink-2);
}

.bulle-semaine,
.bulle-etiquette {
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--bg-2);
  color: var(--ink-2);
  font-size: 0.72rem;
  font-weight: 600;
}

.bulle-etiquette-nouveau {
  background: var(--accent);
  color: #fff;
}

.conv-vide {
  padding: 20px 22px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  color: var(--ink-2);
  font-size: 0.95rem;
}

/* Page complète messages.php */

.conv-page {
  max-width: 860px;
  padding-top: clamp(28px, 4vw, 44px);
}

.conv-tete {
  margin-bottom: clamp(22px, 3vw, 32px);
}

.conv-tete h1 {
  max-width: 18ch;
}

.conv-zone {
  padding-bottom: 16px;
}

.conv-composer {
  position: sticky;
  bottom: 0;
  z-index: 5;
  margin-top: 8px;
  padding: 12px 0 calc(16px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to bottom, rgba(244, 240, 232, 0), var(--bg) 18px);
}

.conv-composer-inner {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}

.conv-composer textarea {
  min-height: 88px;
  max-height: 34vh;
}

.page-messagerie .portal-footer {
  margin-top: 12px;
}

@media (max-width: 479px) {
  .bulle {
    max-width: 94%;
  }

  .conv-composer-actions .btn {
    min-height: 42px;
    padding: 11px 18px;
  }
}

/* En-tête client sur petit écran : indicateur d'enregistrement, bouton Messages et Déconnexion tiennent sur 375 px */

@media (max-width: 479px) {
  body.avec-messagerie .header-actions,
  body.page-messagerie .header-actions {
    gap: 8px;
  }

  body.avec-messagerie .save-state,
  body.page-messagerie .save-state {
    font-size: 0.76rem;
  }

  body.avec-messagerie .header-actions .btn-sm,
  body.page-messagerie .header-actions .btn-sm {
    min-height: 40px;
    padding: 9px 10px;
    font-size: 0.84rem;
  }
}

/* ---------- V5.3 : activation du compte, page de bienvenue ---------- */

.regles-mdp {
  margin: 4px 0 0;
  padding: 0 0 0 18px;
  color: var(--ink-2);
  font-size: 0.88rem;
  line-height: 1.6;
}

.regles-mdp li::marker {
  color: var(--accent);
}

.access-card .lien-acces-mail {
  text-align: center;
}

.bienvenue .section-head {
  max-width: 640px;
}

/*
  L'ERREUR RENDUE CONTRE SON CHAMP · quatrième critère de réception du retour d'essai.

  Le message existe déjà en bandeau, tout en haut. Celui-ci est le même, posé à l'endroit où la
  réponse se corrige. Il se distingue du texte d'aide qui l'entoure par un filet à gauche : sur
  un écran qui pose huit questions, un paragraphe de plus en gris se lit comme une consigne,
  pas comme un refus.

  La marge du haut le décolle du champ précédent, celle du bas le colle au champ concerné :
  c'est ce rapprochement qui dit DE QUOI on parle, avant même qu'on ait lu la phrase.
*/
.champ-erreur {
  margin: 4px 0 12px;
  padding: 10px 14px;
  border-left: 3px solid var(--accent);
  border-radius: 0 6px 6px 0;
  background: var(--surface);
}

/* Le navigateur l'amène par l'ancre ; le contour dit qu'on est arrivé. */
.champ-erreur:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/*
  L'OEIL DU MOT DE PASSE · le bouton est posé PAR le script, jamais par le balisage.

  Sans JavaScript, `.champ-mdp` n'est qu'une boîte autour du champ : elle ne promet rien
  qu'elle ne puisse tenir. Le bouton se pose à droite, dans le champ, et la réserve à droite
  l'empêche de recouvrir le texte tapé.
*/
.champ-mdp {
  position: relative;
  display: block;
}

.champ-mdp input {
  width: 100%;
  padding-right: 92px;
}

.mdp-oeil {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink-2);
  font-size: 0.85rem;
  line-height: 1.2;
  cursor: pointer;
}

.mdp-oeil:hover,
.mdp-oeil:focus-visible {
  color: var(--ink);
  border-color: var(--ink-2);
}

.bienvenue-etape {
  max-width: 680px;
  padding: clamp(24px, 4vw, 40px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: 12px;
}

.bienvenue-etape h2 { margin-bottom: 12px; }
.bienvenue-etape p { margin-bottom: 24px; color: var(--ink-2); }

.reperes-bienvenue {
  display: grid;
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 0 0 clamp(28px, 4vw, 40px);
}

@media (min-width: 800px) {
  .reperes-bienvenue {
    grid-template-columns: repeat(3, 1fr);
  }
}

.reperes-bienvenue li {
  padding: 24px 24px 26px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: 12px;
}

.repere-num {
  display: block;
  margin-bottom: 10px;
  font-family: var(--font-display);
  font-size: 1.8rem;
  line-height: 1;
  color: var(--accent);
}

.reperes-bienvenue h2 {
  font-size: 1.4rem;
  margin-bottom: 8px;
  max-width: none;
}

.reperes-bienvenue p {
  color: var(--ink-2);
  font-size: 0.95rem;
}

.bienvenue-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.invitation-attente {
  margin: 10px 0 14px;
  padding: 12px 14px;
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  border-radius: 0 6px 6px 0;
  font-size: 0.92rem;
  color: var(--ink-2);
}

/* Liens juridiques du pied de page de l'espace */

.portal-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
}

.portal-legal a + a::before {
  content: "·";
  margin-right: 10px;
  color: var(--ink-3);
}

.portal-legal a {
  border-bottom: 1px solid var(--line-strong);
}

.portal-legal a:hover {
  border-bottom-color: var(--accent);
}

/* --------------------------------------------------------------------------
   Gestion des rendez-vous
   -------------------------------------------------------------------------- */

.rdv-agendas {
  margin: 0 0 18px;
  padding: 0;
  border: 0;
}

.rdv-agendas legend {
  padding: 0;
  margin-bottom: 6px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);
}

.rdv-agenda {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  padding: 9px 10px;
  margin-bottom: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
  line-height: 1.45;
}

.rdv-agenda:hover {
  border-color: var(--line-strong);
}

.rdv-agenda input {
  width: 16px;
  height: 16px;
  margin: 3px 0 0;
  padding: 0;
  background: none;
  accent-color: var(--accent);
}

.rdv-agenda code {
  font-size: 0.78rem;
  color: var(--ink-3);
  overflow-wrap: anywhere;
}

.rdv-admin-liste {
  display: grid;
  gap: 16px;
}

.rdv-admin {
  padding: 18px 20px 20px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.rdv-admin-annule {
  border-left-color: var(--line-strong);
  opacity: 0.65;
}

.rdv-admin-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
}

.rdv-admin-quand {
  margin: 0;
  font-size: 1.02rem;
}

.rdv-admin-quand strong::first-letter {
  text-transform: uppercase;
}

.rdv-admin-quoi {
  margin: 2px 0 0;
  color: var(--ink-3);
  font-size: 0.86rem;
}

.rdv-admin-fiche {
  display: grid;
  grid-template-columns: minmax(0, 150px) minmax(0, 1fr);
  gap: 4px 16px;
  margin: 14px 0 0;
  font-size: 0.9rem;
}

.rdv-admin-fiche dt {
  color: var(--ink-3);
}

.rdv-admin-fiche dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.rdv-admin-message {
  white-space: normal;
}

.rdv-admin-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 18px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.rdv-admin-deplacer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.rdv-admin-deplacer label {
  font-size: 0.86rem;
  color: var(--ink-3);
}

.rdv-admin-deplacer input[type="datetime-local"] {
  width: auto;
  font: inherit;
  font-size: 0.92rem;
  padding: 7px 10px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
}

.rdv-admin-annuler {
  color: var(--warn);
  border-color: var(--warn);
}

/* La libération d'une marque de synchronisation restée accrochée : même forme que le déplacement,
   parce que c'est le même geste, un mot à taper et un bouton. */
.rdv-admin-recuperer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.rdv-admin-recuperer label {
  font-size: 0.86rem;
  color: var(--ink-3);
}

.rdv-admin-recuperer input[type="text"] {
  width: auto;
  font: inherit;
  font-size: 0.92rem;
  padding: 7px 10px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
}

@media (max-width: 640px) {
  .rdv-admin-fiche {
    grid-template-columns: minmax(0, 1fr);
    gap: 0 0;
  }

  .rdv-admin-fiche dt {
    margin-top: 8px;
    font-size: 0.8rem;
  }

  .rdv-admin-deplacer,
  .rdv-admin-recuperer,
  .rdv-admin-actions {
    width: 100%;
  }

  .rdv-admin-deplacer input[type="datetime-local"],
  .rdv-admin-recuperer input[type="text"] {
    flex: 1;
    min-width: 0;
  }
}

/* --------------------------------------------------------------------------
   Prochain rendez-vous, dans l'espace du client
   -------------------------------------------------------------------------- */

.rdv-prochain {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  margin: 0 0 32px;
  padding: 22px 26px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.rdv-prochain-texte {
  min-width: 0;
}

.rdv-prochain h2 {
  margin: 6px 0 0;
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  color: var(--ink);
}

.rdv-prochain h2::first-letter {
  text-transform: uppercase;
}

.rdv-prochain-quoi {
  margin: 6px 0 0;
  color: var(--ink-2);
  font-size: 0.95rem;
}

.rdv-prochain-note {
  margin: 8px 0 0;
  color: var(--ink-3);
  font-size: 0.85rem;
}

.rdv-prochain-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
}

.rdv-prochain-lien {
  padding-bottom: 1px;
  border-bottom: 1px solid var(--accent);
  color: var(--ink-2);
  font-size: 0.9rem;
}

.rdv-prochain-lien:hover {
  color: var(--ink);
}

.rdv-prochain-vide {
  border-left-color: var(--line-strong);
}

.rdv-prochain-vide h2 {
  font-size: 1.15rem;
}

@media (max-width: 640px) {
  .rdv-prochain {
    padding: 18px 18px 20px;
  }

  .rdv-prochain-actions {
    width: 100%;
  }

  .rdv-prochain-actions .btn {
    width: 100%;
    text-align: center;
  }
}

/* Rattachement d'un rendez-vous à un compte client, côté administration */

.rdv-admin-rattacher {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.rdv-admin-rattacher label {
  font-size: 0.85rem;
  color: var(--ink-3);
}

.rdv-admin-rattacher select {
  max-width: 100%;
  font: inherit;
  font-size: 0.9rem;
  padding: 6px 10px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
}

/* ============================================================
   Tableau de bord commun · un compte, plusieurs offres
   ============================================================

   Ces classes existaient dans le HTML sans une seule regle ici. La page sortait donc en
   balisage nu : une liste a puces, des liens en texte brut, et le titre « Vos accompagnements »
   colle au bouton precedent. Rien ne le signalait, parce qu'aucun banc ne regarde a quoi une
   page ressemble : ils lisent son texte, et le texte etait juste.

   C'est la capture qui l'a montre, et c'est la seule chose qui pouvait le montrer. */

.tb-action {
  margin: 0 0 36px;
  padding: 24px 26px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
}

.tb-action h2 {
  margin: 0 0 8px;
  font-size: 1.5rem;
}

.tb-action p.text {
  margin: 0 0 18px;
  color: var(--ink-2);
}

.tb-action p:last-child {
  margin: 0;
}

.tb-offres {
  margin-top: 40px;
}

.tb-offres > h2 {
  margin: 0 0 16px;
  font-size: 1.35rem;
}

.tb-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

@media (min-width: 760px) {
  .tb-liste {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.tb-offre {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 20px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.tb-offre h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--ink);
}

.tb-offre p {
  margin: 0;
}

/* Une offre suspendue reste lisible : elle est mise en retrait, jamais effacee. Quelqu'un
   dont l'acces vient d'etre ferme doit lire pourquoi, pas constater une disparition. */
.tb-offre-suspendue {
  border-left: 3px solid var(--warn);
  background: var(--warn-soft);
}

.tb-offre-suspendue h3 {
  color: var(--ink-2);
}

.tb-offre-suspendue p.text {
  font-size: 0.92rem;
  color: var(--ink-2);
}

/* ------------------------------------------------------------
   Les autres formules · ce que le compte ne possede pas encore
   ------------------------------------------------------------

   VERROUILLEE N'EST PAS DESACTIVEE.

   Une carte grisee dit « ceci est en panne ». Ces quatre formules ne sont pas en panne :
   elles existent, elles sont a jour, et l'une d'elles est peut-etre la prochaine. Elles sont
   donc lisibles au meme contraste que le reste, et c'est le fond qui recule d'un cran, pas le
   texte. Aucune opacite reduite ici, jamais : elle emporterait aussi le bouton.

   La grille est celle des offres possedees, deliberement : les deux blocs se lisent comme une
   seule liste ou l'on voit d'un coup ce qu'on a et ce qu'on n'a pas. */

.tb-autres {
  margin-top: 44px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

.tb-autres > h2 {
  margin: 0 0 8px;
  font-size: 1.35rem;
}

.tb-autres > p.text {
  margin: 0 0 18px;
  max-width: 62ch;
  color: var(--ink-2);
}

.tb-offre-verrouillee {
  background: var(--bg);
  border-style: dashed;
  border-color: var(--line-strong);
}

/* Le prix se lit en un coup d'oeil ou il ne sert a rien. Il vient du catalogue et peut etre
   une phrase (« A partir de ... ») : pas de largeur fixe, pas de troncature. */
.tb-prix {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--ink);
}

/* Des faits, trois au plus, tires des capacites de l'offre. Une puce discrete construite au
   pseudo-element : `list-style` hors du flux du texte se decale des que la carte est etroite. */
.tb-apport {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}

.tb-apport li {
  position: relative;
  padding-left: 16px;
  font-size: 0.94rem;
  line-height: 1.5;
  color: var(--ink-2);
}

.tb-apport li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 1px;
  background: var(--accent);
}

/* La carte pousse son bouton en bas : deux cartes cote a cote dont les listes n'ont pas la
   meme longueur alignent quand meme leurs boutons. */
.tb-offre-verrouillee > p:last-child {
  margin-top: auto;
  padding-top: 4px;
}

/*
  UNE AUTRE OFFRE DU MEME COMPTE, ANNONCEE DEPUIS L ESPACE D ACCOMPAGNEMENT.

  Elle s affichait en petit texte gris au-dessus du titre. Quelqu un qui venait de payer et a
  qui l email disait « c est ajoute a votre espace » arrivait ici et ne trouvait pas ou aller.
  Un bloc, une phrase, un bouton : on ne fait pas chercher quelqu un dans son propre espace.
*/
.autre-offre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  margin: 0 0 1.75rem;
  padding: 1.1rem 1.3rem;
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface);
}

.autre-offre > div { flex: 1 1 320px; min-width: 0; }

.autre-offre-texte {
  margin: 0.35rem 0 0;
  color: var(--ink-2);
  line-height: 1.55;
}

.autre-offre .btn { flex: none; }