/* ==========================================================================
   Folyo — feuille de styles unique.
   Direction visuelle arrêtée le 14/09/2026 : marine profond, turquoise,
   fonds bleu très clair. Une seule direction, pas de bascule clair/sombre.
   ========================================================================== */

:root {
  /* Fonds et surfaces */
  --fond:        #E9F3FC;
  --surface:     #FFFFFF;
  --surface-2:   #F4F9FF;
  --filet:       #DBE8F5;
  --filet-fort:  #BFD5EA;

  /* Texte */
  --encre:       #0B2F62;
  --encre-2:     #2D5083;
  --encre-3:     #4A6A93;   /* 26/09 : 6,1:1 sur blanc (avant #5E7EA6, 4,2:1) */
  --encre-4:     #5F7DA3;   /* 26/09 : 4,6:1 sur blanc (avant #8BA5C3, 2,5:1) */

  /* Accent */
  --accent:      #16D6C3;
  --accent-fonce:#0FBFAE;
  --sur-accent:  #04333A;

  /* Marine des aplats */
  --marine:      #0B2F62;
  --marine-clair:#154A8C;

  /* États */
  --succes:      #12996B;
  --alerte:      #A9720C;
  --erreur:      #C0392B;

  /* Formes */
  --r-champ:     11px;
  --r-carte:     16px;
  --r-fenetre:   20px;
  --r-puce:      999px;

  /* Ombres : diffuses et bleutées, jamais noires */
  --ombre-1:     0 1px 2px rgba(11, 47, 98, .05), 0 6px 18px rgba(11, 47, 98, .05);
  --ombre-2:     0 2px 6px rgba(11, 47, 98, .06), 0 18px 44px rgba(11, 47, 98, .09);
  --ombre-accent:0 10px 24px rgba(22, 214, 195, .28);

  --rail:        230px;   /* maquette : rail de 230 px */
  --max:         1140px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--encre);
  background: var(--fond);
  -webkit-font-smoothing: antialiased;
}

/* Halos bleus en haut à droite : la matière du fond. */
body.page-public,
body.page-auth {
  background:
    radial-gradient(60rem 40rem at 88% -12%, rgba(22, 214, 195, .16), transparent 60%),
    radial-gradient(52rem 36rem at 102% 8%, rgba(21, 74, 140, .16), transparent 62%),
    var(--fond);
  background-attachment: fixed;
}

img, svg { max-width: 100%; height: auto; }

h1, h2, h3 {
  font-weight: 800;
  letter-spacing: -.028em;
  line-height: 1.15;
  margin: 0 0 .5em;
  color: var(--encre);
}
h1 { font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3.1rem); }
h2 { font-size: clamp(1.45rem, 1.1rem + 1.4vw, 2.1rem); }
h3 { font-size: 1.12rem; }

p { margin: 0 0 1rem; }
a { color: var(--marine-clair); text-decoration: none; }
a:hover { text-decoration: underline; }

[hidden] { display: none !important; }

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

.eyebrow {
  font-size: .76rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--encre-3); margin: 0 0 .5rem;
}

.lede { font-size: 1.12rem; color: var(--encre-2); max-width: 44ch; }

/* --------------------------------------------------------------- boutons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .72rem 1.15rem;
  font: inherit; font-weight: 700; letter-spacing: -.01em;
  border: 1px solid transparent; border-radius: var(--r-champ);
  cursor: pointer; text-decoration: none;
  transition: transform .12s ease, box-shadow .18s ease, background .18s ease;
}
/* Dans l'espace client, les boutons suivent la maquette : 38 px de haut,
   13 px, coins à 11 px. Les pages publiques gardent leur gabarit plus généreux. */
.page-app .btn { padding: 8px 14px; font-size: 13px; line-height: 19.5px; border-radius: 11px; gap: 7px; }
.page-app .btn--lg { padding: 11px 18px; font-size: 14px; }
.page-app .btn--sm { padding: 5px 10px; font-size: 11.5px; }
.page-app .btn--ghost { border-color: var(--filet); box-shadow: none; }
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 3px solid rgba(22, 214, 195, .55); outline-offset: 2px; }

.btn--accent { background: var(--accent); color: var(--sur-accent); box-shadow: var(--ombre-accent); }
.btn--accent:hover { background: var(--accent-fonce); }

.btn--marine { background: var(--marine); color: #fff; box-shadow: var(--ombre-1); }
.btn--marine:hover { background: var(--marine-clair); }

.btn--ghost { background: var(--surface); color: var(--encre); border-color: var(--filet-fort); box-shadow: var(--ombre-1); }
.btn--ghost:hover { border-color: var(--encre-4); }

.btn--lg { padding: .92rem 1.5rem; font-size: 1.02rem; }
.btn--full { width: 100%; }
.btn--sm { padding: .45rem .8rem; font-size: .86rem; }

.btn[disabled], .btn[aria-busy="true"] { opacity: .6; pointer-events: none; }

/* ----------------------------------------------------------- en-tête site */

.site-head {
  display: flex; align-items: center; gap: 1.5rem;
  max-width: var(--max); margin: 0 auto;
  padding: 1.35rem clamp(1rem, 4vw, 2rem);
}
.site-head--compact { padding-bottom: .5rem; }

.brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--encre); font-weight: 800; }
.brand:hover { text-decoration: none; }
.brand__mark {
  display: grid; place-items: center;
  width: 2.1rem; height: 2.1rem; border-radius: 9px;
  background: var(--marine); color: var(--accent);
  font-weight: 800; font-size: 1.05rem;
}
.brand__name { letter-spacing: -.03em; font-size: 1.12rem; }
/* Logo Folyo (29/09) : image SVG à la place de la pastille « P » + nom. */
.brand__logo { display: block; height: 2.25rem; width: auto; }
.brand--rail .brand__logo--fonce { display: none; }
.site-foot__logo { display: block; height: 2rem; width: auto; margin-bottom: .35rem; }

/* Bandeau de la vitrine d'un client : son nom à gauche, et à droite une
   invitation discrète à ouvrir son propre espace. */
.site-head__nav { display: flex; align-items: center; gap: .6rem; margin-left: auto; flex-wrap: wrap; }
.site-head__dit { font-size: .84rem; color: var(--encre-3); font-weight: 600; }
@media (max-width: 860px) { .site-head__dit { display: none; } }
@media (max-width: 560px) {
  .site-head__nav { width: 100%; margin-left: 0; }
  .site-head { flex-wrap: wrap; row-gap: .8rem; }
}

.site-nav { display: flex; gap: 1.4rem; margin-left: auto; }
.site-nav a { color: var(--encre-2); font-weight: 600; font-size: .95rem; }
.site-head__actions { display: flex; gap: .6rem; align-items: center; }
.site-nav + .site-head__actions { margin-left: 0; }
.site-head--compact .site-nav { display: none; }
.site-head--compact .site-head__actions { margin-left: auto; }

/* ------------------------------------------------------------------- hero */

main { max-width: var(--max); margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2rem) 4rem; }

.hero {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center; padding: clamp(1.5rem, 4vw, 3.5rem) 0 clamp(2rem, 5vw, 4rem);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.6rem 0 1.8rem; }
.hero__points { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.hero__points li { position: relative; padding-left: 1.7rem; color: var(--encre-2); font-weight: 500; }
.hero__points li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: .7rem; height: .7rem; border-radius: var(--r-puce);
  background: var(--accent); box-shadow: 0 0 0 4px rgba(22, 214, 195, .18);
}
.hero__art svg { display: block; width: 100%; filter: drop-shadow(0 24px 48px rgba(11, 47, 98, .14)); }

/* ------------------------------------------------------------------ étapes */

.steps, .features, .faq, .cta { padding: clamp(2rem, 5vw, 3.5rem) 0; }
.steps h2, .features h2, .faq h2 { text-align: center; margin-bottom: 2rem; }

.steps__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; counter-reset: s;
}
.steps__list li {
  background: var(--surface); border: 1px solid var(--filet);
  border-radius: var(--r-carte); padding: 1.6rem 1.4rem 1.2rem;
  box-shadow: var(--ombre-1);
}
.steps__num {
  display: grid; place-items: center; width: 2.2rem; height: 2.2rem;
  border-radius: var(--r-puce); background: var(--fond); color: var(--marine);
  font-weight: 800; margin-bottom: .9rem;
}
.steps__list p, .features p, .faq p { color: var(--encre-2); margin: 0; }

/* --------------------------------------------------------------- fonctions */

.features__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.card {
  background: var(--surface); border: 1px solid var(--filet);
  border-radius: var(--r-carte); padding: 1.5rem 1.4rem;
  box-shadow: var(--ombre-1);
}
.card h3 { margin-bottom: .45rem; }

/* --------------------------------------------------------------------- FAQ */

.faq__list { display: grid; gap: .7rem; max-width: 46rem; margin: 0 auto; }
.faq details {
  background: var(--surface); border: 1px solid var(--filet);
  border-radius: var(--r-carte); padding: 1.1rem 1.3rem; box-shadow: var(--ombre-1);
}
.faq summary { font-weight: 700; cursor: pointer; letter-spacing: -.015em; }
.faq summary::marker { color: var(--accent); }
.faq details[open] summary { margin-bottom: .6rem; }

/* ---------------------------------------------------------------- appel final */

.cta {
  text-align: center; background: var(--surface);
  border: 1px solid var(--filet); border-radius: var(--r-fenetre);
  padding: clamp(2rem, 5vw, 3rem) 1.5rem; box-shadow: var(--ombre-2);
}
.cta p { color: var(--encre-2); max-width: 40ch; margin: 0 auto 1.6rem; }

/* ------------------------------------------------------------------ pied */

.site-foot {
  max-width: var(--max); margin: 0 auto;
  padding: 2rem clamp(1rem, 4vw, 2rem) 3rem;
  border-top: 1px solid var(--filet);
  display: grid; gap: 1.2rem;
}
.site-foot__brand { display: flex; align-items: center; gap: .8rem; }
.site-foot__brand p { margin: 0; color: var(--encre-3); font-size: .92rem; }
.site-foot__links { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.site-foot__links a { color: var(--encre-2); font-size: .92rem; }
.site-foot__legal { color: var(--encre-4); font-size: .85rem; margin: 0; }

/* ------------------------------------------------------- authentification */

.auth { display: grid; place-items: center; min-height: 68vh; padding-top: 1rem; }
.auth__card {
  width: min(28rem, 100%);
  background: var(--surface); border: 1px solid var(--filet);
  border-radius: var(--r-fenetre); padding: clamp(1.5rem, 4vw, 2.3rem);
  box-shadow: var(--ombre-2);
}
.auth__card h1 { font-size: 1.6rem; }
.auth__sub { color: var(--encre-3); font-size: .96rem; }
.auth__links { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.2rem; font-size: .92rem; }
/* Séance M : connexion avec Google, étape du code */
.btn-google {
  display: flex; align-items: center; justify-content: center; gap: .7rem; width: 100%;
  margin-top: 1.1rem; padding: .75rem 1rem; border: 1px solid var(--filet-fort); border-radius: var(--r-champ);
  background: var(--surface); color: var(--encre); font-weight: 700; font-size: .95rem;
  transition: border-color .15s, box-shadow .15s;
}
.btn-google:hover { text-decoration: none; border-color: var(--encre-4); box-shadow: var(--ombre-1); }
.btn-google svg { width: 1.2rem; height: 1.2rem; flex: none; }
.auth__ou {
  display: flex; align-items: center; gap: .8rem; margin: 1.1rem 0 .2rem;
  font-size: .8rem; color: var(--encre-4);
}
.auth__ou::before, .auth__ou::after { content: ""; flex: 1; height: 1px; background: var(--filet); }
.auth__google-qui { margin: .4rem 0 .2rem; font-size: .92rem; color: var(--encre-2); }
input.champ-code {
  font-size: 1.5rem; letter-spacing: .3em; text-align: center; font-variant-numeric: tabular-nums;
  font-weight: 700;
}
/* Écran Sécurité : QR de l'application, codes de secours */
.sec-etat { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; }
.sec-etat::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: var(--encre-4); }
.sec-etat--on { color: var(--succes); }
.sec-etat--on::before { background: var(--succes); }
.sec-qr { display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap; margin: .4rem 0 1rem; }
.sec-qr__img { width: 180px; height: 180px; flex: none; border: 1px solid var(--filet); border-radius: 12px; padding: 6px; background: #fff; }
.sec-qr__img svg { width: 100%; height: 100%; display: block; }
.sec-qr__txt { flex: 1; min-width: 12rem; font-size: .9rem; color: var(--encre-2); }
.sec-cle { font-family: ui-monospace, Menlo, monospace; font-size: .86rem; background: var(--surface-2);
           border: 1px solid var(--filet); border-radius: 8px; padding: .35rem .55rem; display: inline-block;
           word-break: break-all; user-select: all; }
.sec-codes { display: grid; grid-template-columns: repeat(2, 1fr); gap: .4rem .8rem; margin: .6rem 0 1rem;
             padding: .9rem 1rem; background: var(--surface-2); border: 1px solid var(--filet); border-radius: 12px;
             font-family: ui-monospace, Menlo, monospace; font-size: .95rem; }
.sec-propose { display: flex; gap: 1rem; align-items: flex-start; }
.sec-propose__ico { flex: none; width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center;
                    background: rgba(22, 214, 195, .14); color: var(--accent-fonce); }
.sec-propose__ico svg { width: 1.4rem; height: 1.4rem; }

label { display: block; font-weight: 700; font-size: .9rem; margin: 1.1rem 0 .4rem; }
label .hint { font-weight: 500; color: var(--encre-4); }

input[type="text"], input[type="email"], input[type="password"],
input[type="url"], input[type="tel"], input[type="search"],
input[type="date"], input[type="datetime-local"], input[type="time"],
input[type="number"], select, textarea {
  width: 100%; padding: .72rem .9rem;
  font: inherit; color: var(--encre);
  background: var(--surface-2);
  border: 1px solid var(--filet-fort); border-radius: var(--r-champ);
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(22, 214, 195, .18); background: var(--surface);
}
input::placeholder { color: var(--encre-4); }

/* Formulaires de l'espace client, au gabarit de la maquette : intitulés en
   petites capitales espacées, champs compacts sur fond bleu très clair. */
/* Un intitulé de champ, pas n'importe quel <label> : la zone de dépôt en est
   un aussi (elle ouvre le sélecteur de fichier) et n'a rien à voir avec ça. */
.page-app label:not(.depot) {
  font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--encre-4); margin: 16px 0 6px;
}
.page-app label.case {
  font-size: 13px; font-weight: 600; letter-spacing: normal; text-transform: none;
  color: var(--encre); display: flex; align-items: center; gap: 9px; margin: 14px 0 0;
}
.page-app label .hint { font-size: 10px; letter-spacing: 1.2px; }
/* Les champs de date et d'heure gardent le sélecteur natif du navigateur — il
   est bon, et personne ne le refait mieux. En revanche le champ lui-même
   arrivait en police système, aligné à gauche, avec une icône minuscule : on
   l'habille comme les autres et on agrandit sa pastille de calendrier. */
.page-app input[type="datetime-local"], .page-app input[type="date"], .page-app input[type="time"] {
  font-family: inherit; font-variant-numeric: tabular-nums; letter-spacing: .01em;
  color: var(--encre); cursor: pointer; padding-right: 8px;
}
.page-app input[type="datetime-local"]::-webkit-calendar-picker-indicator,
.page-app input[type="date"]::-webkit-calendar-picker-indicator,
.page-app input[type="time"]::-webkit-calendar-picker-indicator {
  width: 1.15rem; height: 1.15rem; padding: 3px; margin-left: .3rem;
  border-radius: 6px; opacity: .55; cursor: pointer;
}
.page-app input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
.page-app input[type="date"]::-webkit-calendar-picker-indicator:hover,
.page-app input[type="time"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1; background: var(--fond);
}
.page-app input[type="datetime-local"]::-webkit-datetime-edit,
.page-app input[type="date"]::-webkit-datetime-edit { padding: 0; }
.page-app input[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper { padding: 0; }
.page-app input[type="datetime-local"]:focus::-webkit-datetime-edit-hour-field,
.page-app input[type="datetime-local"]:focus::-webkit-datetime-edit-minute-field,
.page-app input[type="datetime-local"]:focus::-webkit-datetime-edit-day-field,
.page-app input[type="datetime-local"]:focus::-webkit-datetime-edit-month-field,
.page-app input[type="datetime-local"]:focus::-webkit-datetime-edit-year-field {
  border-radius: 4px;
}
.page-app input[type="datetime-local"]::-webkit-datetime-edit-hour-field:focus,
.page-app input[type="datetime-local"]::-webkit-datetime-edit-minute-field:focus,
.page-app input[type="datetime-local"]::-webkit-datetime-edit-day-field:focus,
.page-app input[type="datetime-local"]::-webkit-datetime-edit-month-field:focus,
.page-app input[type="datetime-local"]::-webkit-datetime-edit-year-field:focus,
.page-app input[type="date"]::-webkit-datetime-edit-day-field:focus,
.page-app input[type="date"]::-webkit-datetime-edit-month-field:focus,
.page-app input[type="date"]::-webkit-datetime-edit-year-field:focus {
  background: var(--accent); color: var(--sur-accent); outline: none;
}

.page-app input[type="text"], .page-app input[type="email"], .page-app input[type="password"],
.page-app input[type="url"], .page-app input[type="tel"], .page-app input[type="search"],
.page-app input[type="date"], .page-app input[type="datetime-local"], .page-app input[type="time"],
.page-app input[type="number"], .page-app select, .page-app textarea {
  padding: 9px 11px; font-size: 13px; border-radius: 8px;
  background: var(--fond); border-color: var(--filet);
}
.page-app .aide, .page-app .champs__aide { font-size: 11.5px; color: var(--encre-4); }

/* Deux colonnes, comme les écrans Vitrine et Paramètres de la maquette. */
.setgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 1000px) { .setgrid { grid-template-columns: 1fr; } }
.setgrid > * { min-width: 0; }
.setcol { display: flex; flex-direction: column; gap: 16px; }

/* Ligne à bascule : libellé à gauche, interrupteur à droite. */
.opt { display: flex; align-items: center; gap: 11px; padding: 9px 0; border-bottom: 1px solid var(--filet); }
/* Ligne de définition : intitulé à gauche, valeur à droite, un filet entre deux. */
.defrow {
  display: flex; align-items: baseline; gap: 16px; padding: 11px 0;
  border-bottom: 1px solid var(--filet);
}
.defrow:last-child { border-bottom: 0; }
.defrow__k { flex: none; width: 44%; font-size: 12.5px; color: var(--encre-3); }
.defrow__v { flex: 1; font-size: 13px; font-weight: 700; text-align: right; word-break: break-word; }
.opt:last-child { border-bottom: 0; }
.opt__l { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.opt__cv { width: 26px; aspect-ratio: 1 / 1.4142; flex: none; border-radius: 3px; overflow: hidden; background: var(--surface-2); }
.opt__cv img { width: 100%; height: 100%; object-fit: cover; display: block; }
.opt__cv--vide { display: grid; place-items: center; background: linear-gradient(150deg, #123A73, #0B2F62); }
.opt__cv .vignette__init { font-size: .7rem; }
.opt__l b { font-size: 13px; font-weight: 700; }
.opt__l span { font-size: 11.5px; color: var(--encre-4); }
/* « aussi par e-mail » : une case discrète sous l'intitulé, pas un champ. */
.page-app .opt__mail { margin: 5px 0 0; font-size: 11.5px; font-weight: 600; color: var(--encre-3); gap: 6px; }
.page-app .opt__mail input { width: 13px; height: 13px; }
.page-app .opt__mail:has(input:disabled) { opacity: .45; }
.sw {
  width: 36px; height: 20px; border-radius: 999px; background: var(--filet-fort);
  position: relative; transition: background .18s; flex: none; border: 0; cursor: pointer; padding: 0;
}
.sw::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  border-radius: 999px; background: #fff; transition: transform .18s;
}
.sw[aria-pressed="true"] { background: var(--accent); }
.sw[aria-pressed="true"]::after { transform: translateX(16px); }
/* Version courte, pour une ligne de tableau. */
.sw--xs { width: 28px; height: 16px; }
.sw--xs::after { width: 12px; height: 12px; }
.sw--xs[aria-pressed="true"]::after { transform: translateX(12px); }

.field-pass { position: relative; }
.field-pass input { padding-right: 5.4rem; }
.field-pass__eye {
  position: absolute; right: .4rem; top: 50%; transform: translateY(-50%);
  background: none; border: 0; padding: .35rem .5rem;
  font: inherit; font-size: .82rem; font-weight: 700; color: var(--encre-3); cursor: pointer;
}
form .btn { margin-top: 1.4rem; }

.alert {
  border-radius: var(--r-champ); padding: .8rem 1rem; margin: 1rem 0 0;
  font-size: .93rem; font-weight: 500;
  background: #FDECEA; color: var(--erreur); border: 1px solid #F5C6C0;
}
.alert--ok { background: #E7F7F0; color: var(--succes); border-color: #BCE7D4; }

/* Le retour d'une action. Posé hors de l'écran courant : enregistrer relance
   souvent le rendu de la vue, et un message placé dedans disparaissait avec
   elle. Il reste le temps d'être lu, s'arrête au survol, et se ferme. */
.flashs {
  position: fixed; z-index: 130; top: 1rem; right: 1rem;
  display: flex; flex-direction: column; gap: .6rem;
  width: min(25rem, calc(100vw - 2rem)); pointer-events: none;
}
.flash {
  pointer-events: auto; display: flex; align-items: flex-start; gap: .65rem;
  padding: .85rem 1rem; border-radius: 14px; font-size: .92rem; font-weight: 600;
  box-shadow: 0 20px 44px -22px rgba(11, 47, 98, .55);
  animation: flash-entre .28s cubic-bezier(.2, .8, .3, 1);
}
.flash--ok { background: #E7F7F0; color: var(--succes); border: 1px solid #BCE7D4; }
.flash--ko { background: #FDECEA; color: var(--erreur); border: 1px solid #F5C6C0; }
.flash--part { animation: flash-sort .22s ease forwards; }
@keyframes flash-entre {
  from { opacity: 0; transform: translateX(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes flash-sort {
  to { opacity: 0; transform: translateX(14px); }
}
.flash__p { display: grid; place-items: center; flex: none; width: 1.15rem; height: 1.15rem; margin-top: .05rem; }
.flash__p svg { width: 100%; height: 100%; }
.flash__txt { flex: 1; min-width: 0; line-height: 1.4; }
.flash__x {
  flex: none; border: 0; background: none; cursor: pointer; color: inherit;
  opacity: .5; font-size: 1.3rem; line-height: 1; padding: 0 .1rem;
}
.flash__x:hover { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .flash, .flash--part { animation: none; } }
@media (max-width: 620px) { .flashs { top: auto; bottom: 1rem; left: 1rem; right: 1rem; width: auto; } }

/* Infobulle immédiate : pas la seconde d'attente du `title` natif. */
.bulle {
  position: fixed; z-index: 120; pointer-events: none;
  max-width: 22rem; padding: .42rem .65rem; border-radius: 9px;
  background: var(--marine); color: #fff;
  font-size: .78rem; font-weight: 600; line-height: 1.4;
  box-shadow: 0 12px 28px -14px rgba(11, 47, 98, .7);
  opacity: 0; transition: opacity .1s;
}
.bulle--on { opacity: 1; }

.notice {
  background: var(--surface); border: 1px solid var(--filet);
  border-left: 4px solid var(--accent);
  border-radius: var(--r-champ); padding: 1rem 1.2rem; color: var(--encre-2);
}

.prose { max-width: 42rem; padding-top: 2rem; }

/* ================================================== espace client / admin */

body.page-app {
  background:
    radial-gradient(50rem 34rem at 92% -10%, rgba(22, 214, 195, .13), transparent 60%),
    var(--fond);
  background-attachment: fixed;
}

.shell { display: grid; grid-template-columns: var(--rail) 1fr; min-height: 100vh; }
.colonne { display: flex; flex-direction: column; min-width: 0; position: relative; }

/* Barre du haut de l'espace client, mesurée sur la maquette : 65 px, fond blanc,
   filet en bas, recherche à gauche plafonnée à 340 px. */
.topbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 13px 24px; background: var(--surface); border-bottom: 1px solid var(--filet);
}
.recherche {
  flex: 1; min-width: 180px; max-width: 340px;
  display: flex; align-items: center; gap: 8px;
  background: var(--surface-2); border: 1px solid transparent; border-radius: 11px; padding: 7px 11px;
  color: var(--encre-4);
}
.recherche:focus-within { border-color: var(--accent); }
.recherche input {
  background: none; border: 0; outline: none; width: 100%; font: inherit; font-size: 13px;
  color: var(--encre);
}
.recherche input::placeholder { color: var(--encre-4); }
.topbar .btn { margin-left: auto; }
.topbar .cloche + .btn { margin-left: 0; }

/* ------------------------------------------- notifications (séance J) */

.cloche {
  margin-left: auto; position: relative; flex: none;
  width: 36px; height: 36px; display: grid; place-items: center;
  border: 1px solid var(--filet); border-radius: 10px; background: var(--surface);
  color: var(--encre-2); cursor: pointer;
}
.cloche:hover { border-color: var(--filet-fort); color: var(--marine); }
.cloche svg { width: 18px; height: 18px; }
.cloche__pastille {
  position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 9px; background: var(--erreur, #C0392B); color: #fff;
  font-size: 10px; font-weight: 800; display: grid; place-items: center;
  border: 2px solid var(--surface);
}
.notifs {
  position: absolute; z-index: 60; right: 24px; top: 58px; width: min(380px, calc(100vw - 32px));
  background: var(--surface); border: 1px solid var(--filet); border-radius: 14px;
  box-shadow: 0 18px 44px rgba(11, 47, 98, .18); overflow: hidden;
}
.notifs__tete {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 12px 14px; border-bottom: 1px solid var(--filet);
}
.notifs__tete b { font-size: 13.5px; }
.notifs__vider {
  border: 0; background: none; padding: 0; cursor: pointer;
  font-size: 11.5px; font-weight: 700; color: var(--encre-3);
}
.notifs__vider:hover { color: var(--marine); text-decoration: underline; }
.notifs__liste { max-height: min(60vh, 420px); overflow: auto; }
.notifs__vide { margin: 0; padding: 18px 14px; font-size: 12.5px; color: var(--encre-3); }
.notif {
  width: 100%; display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: start;
  padding: 11px 14px; border: 0; border-bottom: 1px solid var(--filet);
  background: none; text-align: left; cursor: pointer;
}
.notif:last-child { border-bottom: 0; }
.notif:hover { background: var(--fond); }
.notif--neuve { background: #F3FBFA; }
.notif__picto {
  width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  background: var(--fond); color: var(--marine);
}
.notif__picto svg { width: 16px; height: 16px; }
.notif__txt { display: grid; gap: 2px; min-width: 0; }
.notif__txt b { font-size: 13px; line-height: 1.35; }
.notif__txt span { font-size: 12px; color: var(--encre-3); line-height: 1.4; }
.notif__quand { font-size: 11px !important; color: var(--encre-4) !important; }

.rail {
  position: sticky; top: 0; align-self: start; height: 100vh;
  display: flex; flex-direction: column; gap: 22px;
  padding: 20px 16px;
  background:
    radial-gradient(22rem 16rem at 20% 108%, rgba(22, 214, 195, .22), transparent 64%),
    linear-gradient(180deg, #0B3164, #08234A);
  color: #E6EFFA;
}
.brand--rail { color: #fff; padding: 0 .4rem; }
.brand--rail .brand__mark { background: rgba(255, 255, 255, .1); color: var(--accent); }

.rail__nav { display: grid; gap: 2px; margin-top: 0; }
.rail__group {
  font-size: 10px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase;
  color: rgba(230, 239, 250, .45); padding: 16px 11px 6px;
}
.rail__link {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 11px; border-radius: 10px;
  color: rgba(230, 239, 250, .82); font-weight: 700; font-size: 13.5px; line-height: 20.25px;
}
.rail__link:hover { background: rgba(255, 255, 255, .07); text-decoration: none; color: #fff; }
/* La page ouverte porte la pastille turquoise de la maquette, pas un simple voile. */
.rail__link[aria-current="page"] { background: var(--accent); color: var(--sur-accent); }
.rail__link[aria-current="page"] .rail__dot { background: var(--sur-accent); box-shadow: none; }
.rail__link[aria-current="page"] .rail__count { color: rgba(4, 51, 58, .7); }
.rail__dot { width: 7px; height: 7px; border-radius: var(--r-puce); background: rgba(255, 255, 255, .3); flex: none; }
.rail__count { margin-left: auto; font-size: 11.5px; color: rgba(230, 239, 250, .6); font-weight: 700; }

.rail__foot { margin-top: auto; border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 1rem; }
.rail__who { font-size: .88rem; color: rgba(230, 239, 250, .75); margin: 0 0 .1rem; }
.rail__who strong { color: #fff; display: block; font-size: .95rem; }
.rail__out {
  background: none; border: 0; padding: .5rem 0 0; margin: 0;
  font: inherit; font-size: .88rem; font-weight: 700; color: var(--accent); cursor: pointer;
}

/* .stage est un <main>, qui hérite de « max-width: var(--max); margin: 0 auto ».
   Dans une grille, des marges automatiques font qu'un élément se dimensionne à son
   contenu au lieu de remplir sa colonne : l'écran se rétrécissait à la largeur de ce
   qu'il affichait, et seules les pages portant une rangée d'indicateurs avaient l'air
   normales. width: 100% rend la colonne entière, le centrage restant assuré. */
/* Dans l'espace client, la colonne n'est pas bridée à --max : la maquette
   occupe toute la largeur restante après le rail. */
.stage { padding: 25px 24px 4rem; min-width: 0; width: 100%; }
.page-app .stage { max-width: none; }
/* Base typographique de la maquette : 14 px, interligne 1,5. Les pages publiques
   gardent leur 16 px, elles n'ont pas la même densité à tenir. */
.page-app { font-size: 14px; line-height: 1.5; }
.stage__head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; margin-bottom: 22px;
}
/* Titre d'écran de la maquette : 40 px, graisse 800, interlettrage serré. */
.stage__head h1 { font-size: 40px; line-height: 41.6px; letter-spacing: -1.12px; font-weight: 800; margin: 0; }
.stage__head .eyebrow { font-size: 10px; letter-spacing: 1.1px; line-height: 15px; margin: 0 0 3px; }
.stage__head p { font-size: 13.5px; line-height: 20.25px; color: var(--encre-3); margin: 5px 0 0; }
.stage__actions { display: flex; gap: .6rem; flex-wrap: wrap; }

/* Indicateurs : cartes blanches séparées, chiffre en 800 */
/* Indicateurs : mesures de la maquette — 16/18 de marge, coins à 16, pictogramme
   dans un rond turquoise pâle, valeur en 21 px. */
/* auto-fit laissait un vide à droite dès que le nombre de tuiles ne tombait
   pas juste (cinq tuiles sur une largeur qui en tient quatre). Des colonnes
   égales, en repliant par paliers, occupent toujours toute la ligne. */
.tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin-bottom: 22px; }
.tiles:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tiles:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tiles:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tiles:has(> :first-child:last-child)  { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 1320px) { .tiles, .tiles:has(> :nth-child(4):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 980px)  { .tiles, .tiles:has(> :nth-child(4):last-child), .tiles:has(> :nth-child(3):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .tiles, .tiles:has(> :nth-child(4):last-child), .tiles:has(> :nth-child(3):last-child), .tiles:has(> :nth-child(2):last-child) { grid-template-columns: minmax(0, 1fr); } }

/* Deux panneaux côte à côte : la courbe et la provenance, comme la maquette. */
.duo-stats { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1080px) { .duo-stats { grid-template-columns: minmax(0, 1fr); } }

/* Provenance des lecteurs (maquette, ligne 1326). */
.srcs { display: flex; flex-direction: column; gap: 12px; }
.src { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: baseline; }
.src__n { font-size: 12.5px; color: var(--encre-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.src__pct { font-size: 12px; color: var(--encre-3); font-variant-numeric: tabular-nums; }
.src .barre-fond { grid-column: 1 / -1; }
/* Temps de lecture par page : deux colonnes qui se lisent de haut en bas
   (le nombre de rangs est posé par app.js), une seule sur écran étroit. */
.srcs--pages { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px 36px; }
@media (min-width: 981px) {
  .srcs--pages { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(var(--rangs, 1), auto); grid-auto-flow: column; }
}
.srcs__suite { margin-top: 16px; }
.vtog--panneau { margin-left: 2px; }
.tile {
  background: var(--surface); border: 1px solid var(--filet);
  border-radius: 16px; padding: 16px 18px; box-shadow: none;
  display: grid; grid-template-columns: 44px 1fr; gap: 2px 14px; align-items: center;
}
/* Une tuile sans pictogramme ne doit pas laisser sa colonne de 44 px vide :
   l'intitulé s'y retrouvait coincé et se cassait sur trois lignes. */
.tile:not(:has(.tile__picto)) { grid-template-columns: 1fr; }
.tile__picto {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(22, 214, 195, .16); color: #0E8F84;
}
.tile__picto svg { width: 20px; height: 20px; }
.tile__corps { min-width: 0; }
.tile__label { font-size: 12px; font-weight: 500; letter-spacing: normal; text-transform: none; color: var(--encre-3); margin: 0 0 3px; }
.tile__value { font-size: 21px; font-weight: 800; letter-spacing: -.21px; line-height: 1.2; margin: 0; }
.tile__value--texte { font-size: 15px; line-height: 1.25; letter-spacing: -.15px; }
.tile__delta { font-size: 11.5px; font-weight: 600; color: var(--succes); margin: 3px 0 0; }
.tile__delta--flat { color: var(--encre-4); }

/* Intertitre de section, comme sur la maquette : filet, puis capitales espacées. */
.seclabel {
  font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--encre-4);
  border-top: 1px solid var(--filet); padding-top: 20px; margin: 4px 0 16px; font-weight: 700;
}

.panel {
  background: var(--surface); border: 1px solid var(--filet);
  border-radius: var(--r-carte); box-shadow: var(--ombre-1); overflow: hidden;
}
.panel__head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.3rem; border-bottom: 1px solid var(--filet);
}
.panel__head h2 { font-size: 1.05rem; margin: 0; }
.panel__body { padding: 1.3rem; }
.page-app .panel { border-radius: 16px; box-shadow: none; }
.page-app .panel__head { padding: 15px 18px; gap: 10px; }
.page-app .panel__head h2 { font-size: 15px; line-height: 23px; font-weight: 700; }
.page-app .panel__sous { font-size: 12px; color: var(--encre-3); font-weight: 600; margin-left: auto; }

/* --------------------------- menu contextuel et volet (maquette) --------- */

.kebab {
  width: 30px; height: 30px; flex: none; padding: 0; cursor: pointer;
  border: 1px solid var(--filet); border-radius: 10px; background: var(--surface);
  color: var(--encre-3); display: grid; place-items: center;
}
.kebab:hover, .kebab:focus-visible { border-color: var(--accent); color: var(--marine); }
.kebab svg { width: 15px; height: 15px; }

.menu {
  position: fixed; z-index: 95; min-width: 15rem; max-height: 80vh; overflow: auto;
  background: var(--surface); border: 1px solid var(--filet); border-radius: 14px;
  box-shadow: 0 22px 50px -18px rgba(11, 47, 98, .38); padding: 5px;
}
.menu button {
  display: flex; width: 100%; gap: 10px; align-items: center; padding: 8px 10px;
  border: 0; background: none; border-radius: 8px; cursor: pointer;
  font-size: 13px; font-weight: 600; text-align: left; color: var(--encre-2);
}
.menu button:hover, .menu button:focus-visible { background: var(--fond); color: var(--encre); }
.menu button.menu__danger { color: var(--erreur); }
.menu__sep { height: 1px; background: var(--filet); margin: 5px 2px; }
.menu__label {
  margin: 0; padding: 8px 10px 4px; font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; font-weight: 700; color: var(--encre-4);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.volet__fond {
  position: fixed; inset: 0; z-index: 90; background: rgba(11, 47, 98, .34);
  opacity: 0; transition: opacity .2s;
}
.volet__fond--ouvert { opacity: 1; }
.volet {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 91;
  width: min(26rem, 100%); background: var(--surface);
  border-left: 1px solid var(--filet); box-shadow: -24px 0 60px -30px rgba(11, 47, 98, .5);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .22s ease;
}
.volet--ouvert { transform: none; }
.volet__tete {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 16px; border-bottom: 1px solid var(--filet);
}
.volet__tete h3 { margin: 0; font-size: 15px; font-weight: 700; }
.volet__tete p { margin: 2px 0 0; font-size: 12px; color: var(--encre-3); }
.volet__tete .fen__x { margin-left: auto; }
.volet__corps { padding: 16px; overflow: auto; }
.volet .qr { margin: 0; }

.copiable { display: flex; gap: 6px; align-items: flex-start; }
.copiable input, .copiable textarea { flex: 1; min-width: 0; font-size: 12px; }
.copiable textarea { resize: vertical; }
.copiable .btn { flex: none; margin-top: 1px; }

/* Le réglage visé par le menu contextuel, souligné le temps qu'on le voie. */
.vise {
  animation: vise 1.8s ease;
  border-color: var(--accent) !important;
}
@keyframes vise {
  0%, 70% { box-shadow: 0 0 0 3px rgba(22, 214, 195, .3); }
  100%    { box-shadow: 0 0 0 0 rgba(22, 214, 195, 0); }
}

/* ------------------------------ cartes ou liste (maquette, ligne 1293) ---- */

.vtog {
  display: flex; gap: 3px; padding: 3px; margin-left: 12px;
  background: var(--fond); border-radius: 11px; flex: none;
}
.vtog button {
  width: 30px; height: 26px; border: 0; background: none; padding: 0; cursor: pointer;
  border-radius: 8px; display: grid; place-items: center; color: var(--encre-3);
}
.vtog button:hover { color: var(--marine); }
.vtog button[aria-pressed="true"] {
  background: #fff; color: var(--marine); box-shadow: 0 2px 6px -3px rgba(11, 47, 98, .45);
}

.listecat { display: flex; flex-direction: column; }
.lignecat {
  display: grid;
  grid-template-columns: 38px minmax(0, 2fr) minmax(0, .9fr) 100px 52px 62px 70px 96px 48px 186px;
  gap: 14px; align-items: start; padding: 11px 16px;
  border-bottom: 1px solid var(--filet); cursor: pointer; background: none;
}
.lignecat:last-child { border-bottom: none; }
.lignecat:hover { background: var(--fond); }
.lignecat--tete {
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700;
  color: var(--encre-4); background: var(--fond); white-space: nowrap; cursor: default;
}
.lignecat--tete:hover { background: var(--fond); }
.lignecat__cv {
  width: 38px; aspect-ratio: 1 / 1.4142; border-radius: 3px; overflow: hidden;
  align-self: center; display: block; position: relative; background: var(--surface-2);
}
.lignecat__cv img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lignecat__cv--vide {
  display: grid; place-items: center;
  background: linear-gradient(150deg, #123A73, #0B2F62);
}
.lignecat__cv--vide .lignecat__cv__init, .lignecat__cv .vignette__init { font-size: .8rem; }
.lignecat__titre { min-width: 0; align-self: center; }
.lignecat__titre b {
  display: block; font-size: 13.5px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lignecat__titre span {
  display: block; font-size: 11.5px; color: var(--encre-4);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lignecat__col {
  font-size: 12.5px; color: var(--encre-2); align-self: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lignecat__num {
  font-size: 12px; color: var(--encre-3); font-variant-numeric: tabular-nums;
  white-space: nowrap; align-self: center;
}
.lignecat__vit, .lignecat__etat { align-self: center; }
/* Chaque colonne a son titre, aligné à gauche au-dessus de sa valeur. */
.lignecat__etat { display: flex; align-items: center; white-space: nowrap; }
.lignecat__actions { display: flex; gap: 6px; justify-content: flex-end; align-items: center; align-self: center; }
.lignecat__replie { display: none; }

/* Sous 1260 px, les colonnes du milieu se replient en une ligne de résumé. */
@media (max-width: 1320px) {
  .lignecat {
    grid-template-columns: 38px minmax(0, 1fr) auto;
    grid-template-areas: "cv t a" ". m a";
    row-gap: 6px;
  }
  .lignecat__cv { grid-area: cv; }
  .lignecat__titre { grid-area: t; }
  .lignecat__actions { grid-area: a; }
  .lignecat__col, .lignecat__num, .lignecat__etat, .lignecat__vit { display: none; }
  .lignecat__replie { grid-area: m; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
  /* La ligne de résumé reprend justement ce que les colonnes viennent de cacher. */
  .lignecat__replie .lignecat__num { display: inline; }
  .lignecat--tete { display: none; }
}
@media (max-width: 620px) {
  .vtog { margin-left: 0; }
}
@media (max-width: 560px) {
  /* Les actions passent sous le titre : il gardait 80 px et se tronquait à dix
     lettres (« JARDILAND … ») alors que la carte était vide à droite (26/09). */
  .lignecat {
    grid-template-columns: 38px minmax(0, 1fr);
    grid-template-areas: "cv t" ". m" "a a";
  }
  .lignecat__titre b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; }
  .lignecat__actions { justify-content: flex-start; }
}

/* Tableau : colonnes réellement alignées (une seule grille pour toutes les lignes) */
.table { width: 100%; border-collapse: collapse; }
.table th {
  text-align: left; font-size: .74rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--encre-3);
  padding: .8rem 1.3rem; border-bottom: 1px solid var(--filet); white-space: nowrap;
}
.table td { padding: .95rem 1.3rem; border-bottom: 1px solid var(--filet); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--surface-2); }
/* L'intitulé suit l'alignement de sa colonne : un en-tête à gauche au-dessus
   de nombres alignés à droite, et plus rien ne se lit en colonne. */
.table__num { text-align: right; font-variant-numeric: tabular-nums; }
.table th.table__num { text-align: right; }
/* Une cellule qui ne contient qu'une barre de proportion doit rester centrée
   sur la ligne, quelle que soit la hauteur du texte à côté. */
.table td > .barre-fond { margin: 0; }

.chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .2rem .65rem; border-radius: var(--r-puce);
  font-size: .8rem; font-weight: 700;
  background: var(--fond); color: var(--encre-2);
}
.chip--on { background: #E7F7F0; color: var(--succes); }
.chip--draft { background: #FDF3E2; color: var(--alerte); }
.chip--off { background: var(--fond); color: var(--encre-3); }
/* Séance I : parution datée, pas encore visible du public. */
.chip--prog { background: #E9F1FC; color: var(--marine); }

/* État vide : ce que voit un compte neuf */
.empty {
  text-align: center; padding: clamp(2rem, 6vw, 4rem) 1.5rem;
  background: var(--surface); border: 1px dashed var(--filet-fort);
  border-radius: var(--r-fenetre); box-shadow: var(--ombre-1);
}
.empty__art { width: min(17rem, 70%); margin: 0 auto 1.4rem; display: block; }
.empty h2 { font-size: 1.4rem; }
.empty p { color: var(--encre-2); max-width: 44ch; margin: 0 auto 1.6rem; }
.empty__steps {
  list-style: none; margin: 2rem auto 0; padding: 0; max-width: 34rem;
  display: grid; gap: .6rem; text-align: left;
}
.empty__steps li {
  display: flex; gap: .8rem; align-items: baseline;
  background: var(--surface-2); border: 1px solid var(--filet);
  border-radius: var(--r-champ); padding: .8rem 1rem; color: var(--encre-2); font-size: .94rem;
}
.empty__steps b { color: var(--encre); font-weight: 800; }

.skeleton { background: linear-gradient(100deg, #EDF4FB 30%, #F7FBFF 50%, #EDF4FB 70%); background-size: 200% 100%; animation: sweep 1.3s linear infinite; border-radius: var(--r-carte); }
.skeleton--page { height: 18rem; }
@keyframes sweep { from { background-position: 200% 0; } to { background-position: -200% 0; } }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ------------------------------------------------------------- responsive */

@media (max-width: 900px) {
  .site-nav { display: none; }
  .site-head__actions { margin-left: auto; }
  .hero { grid-template-columns: 1fr; }
  .hero__art { order: -1; }
  .steps__list, .features__grid { grid-template-columns: 1fr 1fr; }
  .shell { grid-template-columns: 1fr; }
  .rail {
    position: static; height: auto; flex-direction: row; align-items: center;
    gap: .8rem; overflow-x: auto; padding: .9rem 1rem;
  }
  .rail__nav { display: flex; gap: .35rem; margin: 0; }
  .rail__group { display: none; }
  .rail__foot { margin: 0 0 0 auto; border: 0; padding: 0; }
  .rail__who { display: none; }
}

@media (max-width: 620px) {
  .site-nav { display: none; }
  .steps__list, .features__grid { grid-template-columns: 1fr; }
  .site-head { gap: .8rem; }
  .site-head__actions { margin-left: auto; }
  .site-head__actions .btn { padding: .5rem .75rem; font-size: .82rem; }   /* « Se connecter » reste visible (26/09) */
  .table { display: block; overflow-x: auto; }
  .auth__links { flex-direction: column; gap: .5rem; }
}

/* ==========================================================================
   Séance C — dépôt d'un PDF, couvertures, fiche d'un catalogue, liseuse.
   ========================================================================== */

/* ------------------------------------------------------------- fenêtre */

.modale {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center;
  padding: 1.2rem;
  background: rgba(11, 47, 98, .45);
  backdrop-filter: blur(3px);
  animation: paraitre .16s ease-out;
}
.modale__boite {
  background: var(--surface);
  border-radius: var(--r-fenetre);
  box-shadow: var(--ombre-2);
  width: min(34rem, 100%);
  max-height: min(88vh, 54rem);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.modale__boite--large { width: min(56rem, 100%); }
.modale__tete {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.3rem; border-bottom: 1px solid var(--filet);
}
.modale__tete h2 { margin: 0; font-size: 1.1rem; }
.modale__x {
  border: 0; background: none; cursor: pointer; font-size: 1rem;
  color: var(--encre-3); padding: .3rem .5rem; border-radius: var(--r-champ);
}
.modale__x:hover { background: var(--fond); color: var(--encre); }
.modale__corps { padding: 1.3rem; overflow: auto; }
.modale__pied {
  display: flex; justify-content: flex-end; gap: .6rem;
  padding: 1rem 1.3rem; border-top: 1px solid var(--filet); background: var(--surface-2);
}

@keyframes paraitre { from { opacity: 0 } to { opacity: 1 } }

/* --------------------------------------------------------------- dépôt */

/* Bandeau de dépôt en tête de la liste, comme sur la maquette : cadre en
   pointillé, texte à gauche, bouton à droite. */
.depot-bandeau {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  border: 1.5px dashed var(--filet-fort); border-radius: 16px; padding: 18px;
  background: var(--surface); margin: 0 0 22px; cursor: pointer;
}
.depot-bandeau:hover { border-color: var(--accent); background: #F6FEFD; }
.depot-bandeau svg { width: 22px; height: 22px; color: var(--accent); flex: none; }
.depot-bandeau__txt { flex: 1; min-width: 200px; }
.depot-bandeau__txt b { display: block; font-size: 13.5px; }
.depot-bandeau__txt span { font-size: 12px; color: var(--encre-3); }

.depot {
  display: block; text-align: center; cursor: pointer;
  border: 2px dashed var(--filet-fort); border-radius: var(--r-carte);
  background: var(--surface-2); padding: 2.2rem 1.2rem;
  transition: border-color .15s, background .15s;
  margin: 0;
}
.depot:hover, .depot--actif { border-color: var(--accent); background: #F0FCFA; }
.depot__input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.depot__art { margin-bottom: .6rem; }
.depot__titre { margin: 0; font-weight: 800; font-size: 1.02rem; letter-spacing: normal; text-transform: none; color: var(--encre); }
.depot__sous { margin: .2rem 0 0; color: var(--encre-3); font-size: .9rem; letter-spacing: normal; text-transform: none; }
.depot__etat { margin: .5rem 0 0; font-size: .9rem; color: var(--encre-3); text-align: center; }

.apercu { display: flex; gap: 1rem; align-items: center; margin-top: 1.1rem; }
.apercu__img {
  width: 5.6rem; flex: none; border-radius: 9px; overflow: hidden;
  border: 1px solid var(--filet); box-shadow: var(--ombre-1); background: #fff;
}
.apercu__img img { display: block; width: 100%; height: auto; }
.apercu__vide { display: flex; align-items: center; gap: .7rem; color: var(--encre-3); }
.apercu__vide p { margin: 0; font-size: .95rem; }
.apercu__nom { margin: 0; font-weight: 700; word-break: break-word; }
.apercu__ok { margin: .4rem 0 0; font-size: .86rem; font-weight: 700; color: var(--succes); }

.barre { height: 8px; border-radius: var(--r-puce); background: var(--fond); overflow: hidden; margin-top: 1.1rem; }
.barre__jauge { height: 100%; width: 0; background: var(--accent); transition: width .18s ease-out; }

.tourne {
  width: 1.1rem; height: 1.1rem; flex: none; display: inline-block;
  border: 2px solid var(--filet-fort); border-top-color: var(--accent);
  border-radius: 50%; animation: tourner .7s linear infinite;
}
@keyframes tourner { to { transform: rotate(360deg) } }

.champs { margin-top: .4rem; }
.champs__duo { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.case {
  display: flex; align-items: center; gap: .6rem;
  font-weight: 600; font-size: .95rem; margin: .9rem 0 0;
}
.case input { width: auto; margin: 0; }

/* -------------------------------------------------------- couvertures */

/* Cinq colonnes sur un 13 pouces, six au-delà : au lieu de laisser auto-fill
   étirer indéfiniment les cartes, on fixe le nombre de colonnes par palier —
   une couverture A4 de 400 px de large ne rend service à personne. */
.grille-cat {
  display: grid; gap: 18px; padding: 18px;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
}
@media (min-width: 1800px) { .grille-cat { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 2200px) { .grille-cat { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
.cartecat {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface); border-radius: 18px; border: 1px solid var(--filet);
  box-shadow: none; overflow: hidden; cursor: pointer;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.cartecat:hover, .cartecat:focus-visible { transform: translateY(-3px); box-shadow: var(--ombre-2); outline: none; }
.cartecat { border-radius: 18px; }
.cartecat:hover, .cartecat:focus-visible {
  transform: translateY(-3px); border-color: var(--filet-fort);
  box-shadow: 0 18px 34px -20px rgba(11, 47, 98, .42);
}
.cartecat__corps { padding: 15px 16px 4px; display: flex; flex-direction: column; gap: 5px; }
.cartecat__corps h3 {
  margin: 0; font-size: 14.5px; font-weight: 700; letter-spacing: -.015em; line-height: 1.28;
}
/* L'état se pose sur la couverture, en pastille claire — pas au-dessus du titre. */
.cartecat__haut {
  position: absolute; left: 12px; right: 12px; top: 12px; z-index: 2;
  display: flex; gap: .4rem; align-items: flex-start; pointer-events: none;
}
.cartecat__haut > * { pointer-events: auto; }
.cartecat__haut .kebab { margin-left: auto; }
.cartecat__haut .chip {
  background: rgba(255, 255, 255, .92); box-shadow: 0 4px 10px -6px rgba(11, 47, 98, .6);
  backdrop-filter: blur(6px);
}
.cartecat__meta { font-size: 12px; color: var(--encre-3); font-weight: 600; margin: 0; }
.cartecat__pied {
  margin-top: auto; padding: 12px 16px 14px; display: flex; flex-direction: column; align-items: stretch; gap: 10px;
}
.cartecat__chiffres { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cartecat__num { font-size: 11.5px; color: var(--encre-4); font-weight: 700; }
.cartecat__num + .cartecat__num::before { content: "·"; margin-right: 8px; color: var(--filet-fort); }
.cartecat { container-type: inline-size; }
/* Les trois boutons du pied restent sur une seule ligne, quelle que soit la
   largeur de la carte : sur une carte étroite, ils se resserrent. */
.cartecat__actions { display: flex; gap: 7px; align-items: center; justify-content: center; flex-wrap: nowrap; min-width: 0; }
.cartecat__actions > * { flex: none; white-space: nowrap; }
@container (max-width: 290px) {
  .cartecat__actions { gap: 4px; }
  .cartecat__actions .btn--sm { padding-left: .55rem; padding-right: .55rem; }
  .cartecat__actions .chip { padding-left: .45rem; padding-right: .45rem; }
}
/* Œil posé sur la couverture : ouvre la liseuse, à la place de l'ancienne pastille d'état. */
.oeil {
  width: 30px; height: 30px; flex: none; border-radius: 10px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .92); color: var(--marine); border: 1px solid var(--filet);
  box-shadow: 0 4px 10px -6px rgba(11, 47, 98, .6); backdrop-filter: blur(6px);
}
.oeil:hover, .oeil:focus-visible { border-color: var(--accent); color: var(--encre); outline: none; }
.oeil svg { width: 16px; height: 16px; }

.vignette, .cartecat__cover, .fiche__cover {
  display: block; background: var(--surface-2); position: relative;
  border-bottom: 1px solid var(--filet);
}
.cartecat__cover { aspect-ratio: 1 / 1.4142; }   /* A4 : un catalogue n'est pas en 3/4 */
/* `aspect-ratio` dit une hauteur préférée, il ne l'impose pas : une image plus
   haute que le cadre le faisait grandir, et la carte avec (cas Mecastock, une
   couverture en 1/2,1). En sortant l'image du flux, le cadre ne bouge plus. */
.cartecat__cover, .fiche__cover, .cartepub__cover { position: relative; overflow: hidden; }
.cartecat__cover img, .fiche__cover img, .cartepub__cover img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
.fiche__cover { aspect-ratio: 1 / 1.4142; border-radius: var(--r-carte) var(--r-carte) 0 0; overflow: hidden; }
.vignette--vide, .cartecat__cover--vide, .fiche__cover--vide {
  display: grid; place-items: center;
  background: linear-gradient(150deg, #123A73, #0B2F62);
}
.vignette__init { font-size: 2.4rem; font-weight: 800; color: rgba(255, 255, 255, .5); }

/* ------------------------------------------------ fiche d'un catalogue */

.fiche { display: grid; grid-template-columns: 20rem 1fr; gap: 1.3rem; align-items: start; }
.fiche__cote { display: grid; gap: 1.3rem; }
.fiche__principal { display: grid; gap: 1.3rem; min-width: 0; }
.tiles--mini { grid-template-columns: 1fr 1fr; gap: .7rem; margin-bottom: 1rem; }
.tiles--mini .tile { padding: .8rem .9rem; }
.tiles--mini .tile__value { font-size: 1.3rem; }

.champ-copie { display: flex; gap: .5rem; align-items: flex-start; }
.champ-copie .btn { flex: none; margin-top: 0; }
.champ-lien { font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; font-size: .84rem; }
.champ-prefixe { display: flex; align-items: center; gap: .4rem; }
.champ-prefixe span { color: var(--encre-3); font-size: .9rem; white-space: nowrap; }
.champs__pass { margin-top: .2rem; }

.qr { margin: 1.2rem 0 .4rem; text-align: center; }
.qr svg { width: 9.5rem; height: auto; border: 1px solid var(--filet); border-radius: 12px; padding: .4rem; background: #fff; }
.qr__actions { margin-top: .5rem; }

.btn--danger { color: var(--erreur); }
.btn--danger:hover { background: #FBEDEB; color: var(--erreur); }

@media (max-width: 1020px) {
  .fiche { grid-template-columns: 1fr; }
  .fiche__cover { aspect-ratio: 16 / 9; }
}
@media (max-width: 620px) {
  .champs__duo { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------- vitrine publique */

.grille-pub {
  display: grid; gap: 1.2rem;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
}
.cartepub {
  display: block; color: inherit; text-decoration: none;
  background: var(--surface); border: 1px solid var(--filet); border-radius: var(--r-carte);
  box-shadow: var(--ombre-1); overflow: hidden;
  transition: transform .14s, box-shadow .14s;
}
.cartepub:hover { transform: translateY(-3px); box-shadow: var(--ombre-2); text-decoration: none; }

/* ---------------------------------------------------------- collections
   Reprise de la maquette : une grille de cartes, chacune montrant une pile
   des vraies couvertures de la collection — pas un tableau. */
.colgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.colcard {
  position: relative; background: var(--surface); border: 1px solid var(--filet);
  border-radius: 16px; padding: 16px 18px; display: flex; flex-direction: column; gap: 14px;
  text-align: left; cursor: pointer; transition: transform .15s, box-shadow .15s, border-color .15s;
}
.colcard:hover, .colcard:focus-visible {
  transform: translateY(-3px); box-shadow: var(--ombre-2); border-color: var(--filet-fort); outline: none;
}
.colcard__pile { display: flex; align-items: flex-end; height: 97px; padding-top: 4px; }
.colcard__pile .colcard__cv {
  width: 66px; aspect-ratio: 1 / 1.4142; flex: none; border-radius: 5px; overflow: hidden;
  background: var(--surface-2); box-shadow: 0 10px 28px -14px rgba(11, 47, 98, .5);
}
.colcard__pile .colcard__cv + .colcard__cv { margin-left: -26px; }
.colcard__cv img { width: 100%; height: 100%; object-fit: cover; display: block; }
.colcard__cv--vide { display: grid; place-items: center; background: linear-gradient(150deg, #123A73, #0B2F62); }
.colcard__cv--vide span { font-size: 1.1rem; font-weight: 800; color: rgba(255, 255, 255, .5); }
.colcard__plus {
  align-self: flex-end; margin-left: 10px; font-size: 11.5px; line-height: 17.25px; font-weight: 700;
  color: var(--encre-3); background: var(--surface-2); border-radius: var(--r-puce); padding: 4px 9px;
}
.colcard__vide { font-size: 12px; color: var(--encre-4); align-self: center; }
.colcard h3 { margin: 0; font-size: 15px; line-height: 22.5px; letter-spacing: -.3px; font-weight: 800; }
.colcard__meta { margin: 0; font-size: 11px; line-height: 16.5px; font-weight: 600; color: var(--encre-3); }
.colcard__outils { position: absolute; top: .5rem; right: .5rem; display: flex; gap: .2rem; opacity: 0; transition: opacity .15s; }
.colcard:hover .colcard__outils, .colcard:focus-within .colcard__outils { opacity: 1; }
.colcard__outils button {
  border: 0; background: var(--surface-2); color: var(--encre-3); border-radius: var(--r-puce);
  width: 1.7rem; height: 1.7rem; display: grid; place-items: center; cursor: pointer; font-size: .8rem;
}
.colcard__outils button:hover { background: var(--fond); color: var(--encre); }

/* Filtres par collection au-dessus de la liste des catalogues. */
.filtres { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; margin: 0 0 16px; }
.filtres button {
  border: 1px solid var(--filet); background: var(--surface); color: var(--encre-3);
  border-radius: 999px; padding: 6px 13px; font-size: 12.5px; line-height: 19px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
}
.filtres button:hover { border-color: var(--filet-fort); color: var(--encre); }
.filtres button.on { background: var(--encre); border-color: var(--encre); color: var(--fond); }
.filtres button em { font-style: normal; opacity: .6; margin-left: .25em; }

.cartepub__cover { aspect-ratio: 1 / 1.4142; background: var(--surface-2); border-bottom: 1px solid var(--filet); }
.cartepub__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cartepub__cover--vide { display: grid; place-items: center; background: linear-gradient(150deg, #123A73, #0B2F62); }
.cartepub__corps { padding: .9rem 1rem 1.2rem; }
.cartepub__corps h3 { margin: 0; font-size: 1.02rem; line-height: 1.35; }

/* ================================================================ liseuse */

body.lecture { background: #08203F; overflow: hidden; }
body.lecture #vitrine { height: 100vh; height: 100dvh; }

.lis { display: flex; flex-direction: column; height: 100%; color: #E6EFFA; }

.lis__barre {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .55rem .8rem; background: #0B2F62; border-bottom: 1px solid rgba(255, 255, 255, .1);
  flex: none;
}
.lis__gauche, .lis__droite, .lis__centre { display: flex; align-items: center; gap: .25rem; }
.lis__gauche { min-width: 0; flex: 1; }
.lis__droite { flex: 1; justify-content: flex-end; }
/* Barre de la maquette : titre à gauche qui prend la place, outils à droite. */
.lis__outils { display: flex; align-items: center; gap: .25rem; flex: none; }
.lis__zoomval {
  width: 3.2rem; text-align: center; font-size: .76rem; font-weight: 700;
  color: rgba(230, 239, 250, .7); font-variant-numeric: tabular-nums;
}
.lis__partager {
  margin-left: .4rem; flex: none; border: 0; cursor: pointer;
  padding: .42rem .85rem; border-radius: 11px;
  background: var(--accent); color: var(--sur-accent);
  font-size: .8rem; font-weight: 800;
}
.lis__partager:hover { background: #31EFDD; }
.lis__titre { display: flex; flex-direction: column; min-width: 0; margin-left: .5rem; margin-right: auto; color: inherit; }
.lis__titre:hover { text-decoration: none; }
.lis__titre strong { font-size: .95rem; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lis__titre span { font-size: .78rem; color: rgba(230, 239, 250, .6); }

.lis__bouton {
  display: grid; place-items: center; width: 2.2rem; height: 2.2rem; flex: none;
  border: 0; background: none; color: #E6EFFA; border-radius: var(--r-champ); cursor: pointer;
}
.lis__bouton svg { width: 1.25rem; height: 1.25rem; }
.lis__bouton:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.lis__bouton:disabled { opacity: .3; cursor: default; }
.lis__indic {
  font-variant-numeric: tabular-nums; font-size: .88rem; font-weight: 700;
  min-width: 6.5rem; text-align: center; color: rgba(230, 239, 250, .85);
}

.lis__corps { display: flex; flex: 1; min-height: 0; }
.lis__vue {
  position: relative; flex: 1; min-width: 0; min-height: 0; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .8rem; padding: .9rem 3.6rem 1rem;
}

/* Barre de pages sous la planche (maquette, ligne 1575). */
.lis__pgnav {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  justify-content: center; flex: none;
}
.lis__edge {
  width: 2rem; height: 2rem; flex: none; padding: 0; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .28); border-radius: 11px;
  background: none; color: rgba(230, 239, 250, .7);
  display: grid; place-items: center;
}
.lis__edge svg { width: 1rem; height: 1rem; }
.lis__edge:hover:not(:disabled) { color: #fff; background: rgba(255, 255, 255, .1); }
.lis__edge:disabled { opacity: .3; cursor: default; }
.lis__jump {
  display: flex; align-items: center; gap: .35rem; white-space: nowrap; flex: none;
  border: 1px solid rgba(255, 255, 255, .28); border-radius: 11px;
  background: rgba(255, 255, 255, .06); padding: .2rem .7rem;
  justify-content: center; min-width: 4.6rem;
}
/* Sélecteur à deux classes : la règle générale des champs vise
   `input[type="number"]`, qui l'emporterait sur une classe seule. */
.lis__jump .lis__pgnum {
  width: 2.4rem; height: 1.5rem; flex: none;
  margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none;
  background: none; outline: none;
  color: #E6EFFA; font-size: .8rem; font-weight: 700; text-align: center;
  font-variant-numeric: tabular-nums; -moz-appearance: textfield;
}
.lis__pgnum::-webkit-outer-spin-button, .lis__pgnum::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.lis__pgtot { font-size: .8rem; color: rgba(230, 239, 250, .55); font-variant-numeric: tabular-nums; }
.lis__pglbl { font-size: .78rem; color: rgba(230, 239, 250, .55); margin-left: .4rem; }

.lis__scene {
  display: flex; gap: 8px; align-items: center; justify-content: center;
  width: 100%; flex: 1; min-height: 0;
}
.lis__scene--zoom { overflow: auto; align-items: flex-start; justify-content: flex-start; }
/* Agrandie, la page dépasse son cadre : sans cette ligne, max-width la rabotait en
   largeur alors que sa hauteur restait celle du zoom — le catalogue s'écrasait. */
.lis__scene--zoom .page__toile { max-width: none; }
.lis__scene { cursor: zoom-in; }
.lis__scene--zoom { cursor: zoom-out; }

.page { position: relative; line-height: 0; }
.page__toile {
  display: block; background: #fff; border-radius: 3px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .45);
  max-width: 100%;
}
.page__zones { position: absolute; inset: 0; pointer-events: none; }

.lis__fleche {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 2.75rem; height: 2.75rem; border-radius: 50%; cursor: pointer; padding: 0;
  border: 1.6px solid rgba(255, 255, 255, .35); background: transparent; color: #fff;
  display: grid; place-items: center; transition: opacity .15s, background .15s, border-color .15s;
}
.lis__fleche svg { width: 1.2rem; height: 1.2rem; }
/* Position de repli : placerFleches() les recale contre la planche. */
.lis__fleche--g { left: .6rem; }
.lis__fleche--d { right: .6rem; }
.lis__fleche:hover:not(:disabled) { background: rgba(255, 255, 255, .10); border-color: var(--accent); color: var(--accent); }
/* Comme la maquette : grisée, pas effacée — on voit qu'on est au bout. */
.lis__fleche:disabled { opacity: .3; cursor: default; }

.lis__chargement { position: absolute; display: grid; place-items: center; gap: .6rem; color: rgba(230, 239, 250, .8); }
.lis__chargement .tourne { border-color: rgba(255, 255, 255, .25); border-top-color: var(--accent); }
.lis__chargement p { margin: 0; font-size: .92rem; }

.lis__tiroir {
  width: 12.5rem; flex: none; overflow: auto; padding: .8rem .6rem 2rem;
  background: #071B35; border-right: 1px solid rgba(255, 255, 255, .08);
}
.lis__tiroir-titre {
  margin: 0 0 .7rem; font-size: .72rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(230, 239, 250, .45);
}
.lis__vignettes { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.lis__vig {
  border: 2px solid transparent; background: none; padding: 0; cursor: pointer;
  border-radius: 6px; display: grid; gap: .2rem; justify-items: center;
}
.lis__vig canvas {
  width: 100%; height: auto; background: #fff; border-radius: 3px; display: block;
  aspect-ratio: 3 / 4; object-fit: cover;
}
.lis__vig span { font-size: .72rem; color: rgba(230, 239, 250, .5); }
.lis__vig--ici { border-color: var(--accent); }
.lis__vig--ici span { color: var(--accent); }

.lis__collecte {
  position: absolute; left: 50%; bottom: 1.2rem; transform: translateX(-50%); z-index: 5;
  width: min(30rem, calc(100% - 2rem)); background: var(--surface); color: var(--encre);
  border-radius: var(--r-fenetre); box-shadow: var(--ombre-2); padding: 1.1rem 1.2rem;
}
.lis__collecte-titre { margin: 0 0 .7rem; font-weight: 800; }
.lis__collecte-ligne { display: flex; gap: .5rem; }
.lis__collecte-ligne input[type="email"] { margin: 0; }
.lis__collecte-ligne .btn { flex: none; }
.lis__collecte .case { font-size: .84rem; font-weight: 500; color: var(--encre-2); }
.lis__collecte-ok { margin: 0; font-weight: 700; color: var(--succes); }
/* La mention obligatoire : finalité, non-cession, désinscription, et le lien vers
   la politique. Discrète mais lisible — elle fait partie du consentement. */
.lis__collecte-fine {
  margin: .55rem 0 0; font-size: .76rem; line-height: 1.45; color: var(--encre-3, var(--encre-2));
}
.lis__collecte-fine a { color: inherit; text-decoration: underline; }
.lis__collecte-fine a:hover { color: var(--accent-fonce, var(--accent)); }
.lis__collecte-x {
  position: absolute; top: .5rem; right: .6rem; border: 0; background: none;
  color: var(--encre-4); cursor: pointer; font-size: .9rem;
}

/* ------- posée dans le demi-écran vide, comme la maquette (ligne 1591)
   Là, elle n'est plus un bandeau qui recouvre : c'est une page du cahier.
   Fond translucide sur le bleu de la liseuse, à la taille de la page en face. */
.page--collecte {
  display: grid; place-items: center; line-height: normal;
  align-self: stretch; padding: 1.5rem 0;
}
.lis__collecte--pose {
  position: relative; left: auto; bottom: auto; transform: none; width: min(26rem, 100%);
  background: rgba(255, 255, 255, .07); color: #E6EFFA;
  border: 1px solid rgba(255, 255, 255, .16); border-radius: 16px;
  box-shadow: none; padding: 1.2rem 1.3rem;
}
.lis__collecte--pose .lis__collecte-titre { font-size: 1rem; }
.lis__collecte--pose .lis__collecte-ligne { flex-direction: column; align-items: stretch; }
.lis__collecte--pose .lis__collecte-ligne .btn { width: 100%; }
.lis__collecte--pose input[type="email"] {
  background: rgba(8, 28, 58, .6); border-color: rgba(255, 255, 255, .22);
  color: #E6EFFA; border-radius: 10px;
}
.lis__collecte--pose input[type="email"]::placeholder { color: rgba(230, 239, 250, .45); }
.lis__collecte--pose .case,
.lis__collecte--pose .lis__collecte-fine { color: rgba(230, 239, 250, .72); }
.lis__collecte--pose .lis__collecte-x { color: rgba(230, 239, 250, .5); }
.lis__collecte--pose .lis__collecte-ok { color: var(--accent); }

/* ------- bande de vignettes (maquette, ligne 476) */
.lis__bande {
  display: flex; gap: 8px; flex: none; overflow-x: auto; overflow-y: hidden;
  padding: 10px 16px; border-top: 1px solid rgba(255, 255, 255, .10);
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .25) transparent;
}
.lis__bvig {
  flex: none; width: 42px; padding: 0; cursor: pointer; line-height: 0;
  border: 1px solid rgba(255, 255, 255, .22); border-radius: 4px; overflow: hidden;
  background: #FBFAF6; transition: border-color .15s, box-shadow .15s;
}
.lis__bvig:hover { border-color: rgba(255, 255, 255, .6); }
.lis__bvig--ici { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.lis__bvig-toile { display: block; width: 100%; height: auto; background: #fff; }
:root:fullscreen .lis__bande { display: none; }
@media (max-height: 560px) { .lis__bande { display: none; } }

/* ------- volet de partage, sur le côté (maquette, ligne 1735) */
.volet-fond {
  position: fixed; inset: 0; z-index: 90; background: rgba(4, 17, 38, .55);
  opacity: 0; transition: opacity .25s;
}
.volet-fond--ouvert { opacity: 1; }
.volet {
  position: fixed; z-index: 91; top: 0; right: 0; bottom: 0;
  width: min(27rem, calc(100% - 1.5rem)); display: flex; flex-direction: column;
  background: var(--surface); color: var(--encre);
  box-shadow: -18px 0 50px rgba(4, 17, 38, .35);
  transform: translateX(100%); transition: transform .26s cubic-bezier(.2, .8, .2, 1);
}
.volet--ouvert { transform: none; }
.volet__tete {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1.15rem 1.25rem 1rem; border-bottom: 1px solid var(--filet);
}
.volet__titres { min-width: 0; flex: 1; }
.volet__titres h2 { margin: 0; font-size: 1.05rem; line-height: 1.3; }
.volet__titres p { margin: .2rem 0 0; font-size: .82rem; color: var(--encre-3); }
.volet__x {
  flex: none; width: 2rem; height: 2rem; margin: -.2rem -.3rem 0 0; padding: 0;
  display: grid; place-items: center; border: 0; background: none; border-radius: 8px;
  color: var(--encre-3); cursor: pointer;
}
.volet__x svg { width: 1.1rem; height: 1.1rem; }
.volet__x:hover { background: var(--surface-2); color: var(--encre); }
.volet__corps { flex: 1; overflow-y: auto; padding: .4rem 1.25rem 1.5rem; }
.volet__sec { padding: 1rem 0 .2rem; }
.volet__eyebrow {
  margin: 0 0 .6rem; font-size: .68rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--encre-3);
}
.volet__lien {
  display: flex; align-items: center; gap: .5rem;
  border: 1px solid var(--filet-fort); border-radius: 12px; padding: .45rem .45rem .45rem .8rem;
}
.volet__url {
  flex: 1; min-width: 0; font-size: .82rem; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; user-select: all;
}
.volet__copier {
  flex: none; border: 1px solid var(--filet-fort); background: var(--surface);
  border-radius: 9px; padding: .38rem .75rem; font: inherit; font-size: .8rem; font-weight: 700;
  color: var(--encre); cursor: pointer;
}
.volet__copier:hover { border-color: var(--accent); }
.volet__copier:focus-visible, .volet__canal:focus-visible, .volet__natif:focus-visible, .volet__x:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.volet__copier:focus:not(:focus-visible) { outline: none; }
.volet__copier--ok { background: var(--accent); border-color: var(--accent); color: var(--sur-accent); }
.volet__case { display: flex; gap: .5rem; align-items: center; margin-top: .7rem; font-size: .84rem; color: var(--encre-2); cursor: pointer; }
.volet__case input { margin: 0; accent-color: var(--accent); }
.volet__canaux { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.volet__canal {
  display: flex; flex-direction: column; align-items: center; gap: .4rem;
  padding: .8rem .3rem .7rem; border: 1px solid var(--filet-fort); border-radius: 12px;
  background: var(--surface); font: inherit; font-size: .78rem; font-weight: 700;
  color: var(--encre); cursor: pointer; transition: border-color .15s, transform .15s;
}
.volet__canal:hover { border-color: var(--accent); transform: translateY(-1px); }
.volet__picto { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; }
.volet__picto svg { width: 100%; height: 100%; }
.volet__canal--mail .volet__picto, .volet__canal--sms .volet__picto {
  border-radius: 50%; background: #0B2F62; color: #fff; padding: .45rem;
}
.volet__canal--sms .volet__picto { background: #34C759; }
.volet__picto--clair { width: 1.4rem; height: 1.4rem; color: currentColor; }
.volet__natif {
  display: flex; align-items: center; justify-content: center; gap: .55rem; width: 100%;
  margin-top: .7rem; padding: .75rem 1rem; border: 0; border-radius: 12px;
  background: var(--accent); color: var(--sur-accent); font: inherit; font-size: .88rem; font-weight: 800;
  cursor: pointer; box-shadow: 0 8px 22px rgba(25, 227, 208, .28);
}
.volet__natif:hover { background: #31EFDD; }
.volet__gere {
  display: flex; align-items: center; gap: .7rem; padding: .75rem .85rem;
  border: 1px dashed var(--filet-fort); border-radius: 12px; color: var(--encre);
}
.volet__gere:hover { border-color: var(--accent); text-decoration: none; }
.volet__gere b { display: block; font-size: .86rem; }
.volet__gere small { display: block; font-size: .76rem; color: var(--encre-3); }

/* ------- partage depuis la liseuse (ancienne fenêtre, gardée pour mémoire) */
.lis__part-fond { position: fixed; inset: 0; z-index: 60; background: rgba(4, 17, 38, .6); }
.lis__part {
  position: fixed; z-index: 61; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(26rem, calc(100% - 2rem)); padding: 1.2rem 1.3rem;
  background: var(--surface); color: var(--encre);
  border-radius: var(--r-fenetre); box-shadow: var(--ombre-2);
}
.lis__part-tete { display: flex; align-items: center; gap: 1rem; }
.lis__part-tete b { font-size: 1rem; }
.lis__part-x {
  margin-left: auto; border: 0; background: none; cursor: pointer;
  font-size: 1.3rem; line-height: 1; color: var(--encre-3);
}
.lis__part-txt { margin: .25rem 0 1rem; font-size: .86rem; color: var(--encre-3); }
.lis__part-ligne { display: flex; gap: .5rem; }
.lis__part-ligne input { flex: 1; min-width: 0; margin: 0; font-size: .82rem; }
.lis__part-ligne .btn { flex: none; }

/* Pendant que le PDF s'ouvre, la couverture est déjà peinte : l'attente ne
   doit plus occuper tout l'écran, juste se signaler en bas. */
.lis__chargement--discret {
  top: auto; bottom: 4.5rem; background: rgba(4, 17, 38, .72);
  padding: .5rem .9rem; border-radius: 999px; grid-auto-flow: column;
}
.lis__chargement--discret p { font-size: .8rem; }

body.lecture--embed .lis__titre span { display: none; }

@media (max-width: 720px) {
  /* Les flèches chevauchaient la page : on réduit la page de leur largeur au
     lieu de les poser dessus. */
  .lis__vue { padding: .6rem .5rem .9rem; }
  .lis__scene { padding: 0 2.9rem; }
  .lis__fleche { width: 2.3rem; height: 2.3rem; border-width: 1.4px; }
  .lis__fleche svg { width: 1.05rem; height: 1.05rem; }
  .lis__bande { padding: 8px 12px; gap: 6px; }
  .lis__bvig { width: 34px; }
  .volet__canaux { gap: .4rem; }
  .lis__fleche--g { left: .15rem; }
  .lis__fleche--d { right: .15rem; }
  .lis__tiroir { position: absolute; z-index: 4; height: 100%; box-shadow: var(--ombre-2); }
  .lis__indic { min-width: 4.5rem; font-size: .8rem; }
  .lis__titre { display: none; }
  .lis__zoomval { display: none; }
  .lis__partager { padding: .38rem .7rem; font-size: .76rem; }
  .lis__pglbl { display: none; }
  /* Le bandeau ne doit pas recouvrir la barre de pages : il se pose au-dessus. */
  .lis__collecte:not(.lis__collecte--pose) { bottom: 3.9rem; }
}

/* ======================================================= zones cliquables
   Séance D. Deux familles : ce que voit le lecteur dans la liseuse (.zone,
   .sur) et l'éditeur de l'espace client (.zed). */

/* --------------------------------------------- repères vus par le lecteur */

.zone {
  position: absolute; pointer-events: auto; cursor: pointer;
  border: 0; padding: 0; background: rgba(22, 214, 195, .001);
  border-radius: 4px; display: block;
  box-shadow: inset 0 0 0 1px rgba(22, 214, 195, .38);
  transition: box-shadow .15s, background .15s;
}
.zone:hover, .zone:focus-visible {
  background: rgba(22, 214, 195, .16);
  box-shadow: inset 0 0 0 2px var(--accent), 0 6px 18px rgba(0, 0, 0, .25);
  outline: none;
}
/* Le repère permanent : discret, toujours là, jamais au milieu du dessin. */
.zone__picto {
  position: absolute; top: 4px; right: 4px;
  width: 1.15rem; height: 1.15rem; border-radius: var(--r-puce);
  display: grid; place-items: center;
  background: rgba(11, 47, 98, .78); color: var(--accent);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}
.zone__picto svg { width: .78rem; height: .78rem; }
/* Vidéo et QR code occupent toute la zone : ce qui est dessiné est ce qui se voit. */
.zone__plein {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 4%;
  pointer-events: none;
}
.zone__plein svg { width: 100%; height: 100%; max-width: 100%; max-height: 100%; display: block; }
.zone__plein--video svg { filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .45)); }
.zone__plein--qr {
  background: #fff; border-radius: 6px; padding: 5%;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
}
.zone--video, .zone--qr { box-shadow: none; }
.zone--video:hover, .zone--qr:hover { background: rgba(22, 214, 195, .12); }
.zone--video:hover .zone__plein--video svg { transform: scale(1.04); transition: transform .15s; }
.zone__bulle {
  position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%);
  background: rgba(7, 27, 53, .94); color: #fff; font-size: .74rem; line-height: 1.25;
  padding: .3rem .5rem; border-radius: 6px; white-space: nowrap; max-width: 16rem;
  overflow: hidden; text-overflow: ellipsis; opacity: 0; pointer-events: none;
  transition: opacity .15s;
}
.zone:hover .zone__bulle, .zone:focus-visible .zone__bulle { opacity: 1; }

.lis__bouton--gere { color: var(--accent); }

/* --------------------------------- fenêtre posée par-dessus la page lue */

.sur {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
  background: rgba(4, 12, 25, .78); padding: 1rem; backdrop-filter: blur(3px);
}
.sur__boite {
  background: var(--surface); color: var(--encre); border-radius: var(--r-fenetre);
  box-shadow: var(--ombre-2); width: min(56rem, 100%); max-height: 90vh; overflow: auto;
}
.sur__tete { display: flex; align-items: center; gap: 1rem; padding: .9rem 1.1rem .3rem; }
.sur__titre { margin: 0; font-weight: 800; }
.sur__x { margin-left: auto; border: 0; background: none; color: var(--encre-3); cursor: pointer; font-size: 1rem; }
.sur__corps { padding: .6rem 1.1rem 1.2rem; display: grid; justify-items: center; gap: .8rem; }
.sur__video { width: 100%; aspect-ratio: 16 / 9; }
.sur__video iframe { width: 100%; height: 100%; border-radius: var(--r-carte); }
.sur__qr { display: grid; place-items: center; }
.sur__qr svg { width: min(17rem, 60vw); height: auto; border-radius: 10px; }
.sur__legende { margin: 0; font-size: .82rem; color: var(--encre-3); word-break: break-all; text-align: center; }

/* ------------------------------------------------- éditeur (espace client) */

.zed__tete { display: flex; align-items: center; gap: 1rem; margin-bottom: .9rem; flex-wrap: wrap; }
.zed__aide { margin: 0; color: var(--encre-2); font-size: .94rem; }
.zed__tete .btn { margin-left: auto; }

.zed { display: grid; grid-template-columns: 8.6rem minmax(0, 1fr) 19rem; gap: 1rem; align-items: start; }

.zed__bande {
  background: var(--surface); border: 1px solid var(--filet); border-radius: var(--r-carte);
  padding: .7rem .6rem; max-height: 74vh; overflow: auto; box-shadow: var(--ombre-1);
}
.zed__vignettes { display: grid; gap: .5rem; }
.zed__vig {
  position: relative; border: 2px solid transparent; background: none; padding: 0; cursor: pointer;
  border-radius: 8px; display: grid; gap: .15rem; justify-items: center;
}
.zed__vig canvas {
  /* Pas de proportion imposée : la vignette garde celle de la page du PDF. */
  width: 100%; height: auto; display: block; background: #fff;
  border: 1px solid var(--filet); border-radius: 4px;
}
.zed__vig-num { font-size: .74rem; color: var(--encre-3); font-weight: 600; }
.zed__vig--ici { border-color: var(--accent); }
.zed__vig--ici .zed__vig-num { color: var(--marine); }
.zed__vig-compte {
  position: absolute; top: -.3rem; right: -.3rem; min-width: 1.15rem; height: 1.15rem;
  border-radius: var(--r-puce); background: var(--marine); color: #fff;
  font-size: .68rem; font-weight: 800; display: grid; place-items: center; padding: 0 .25rem;
}

.zed__scene {
  background: var(--surface-2); border: 1px solid var(--filet); border-radius: var(--r-carte);
  padding: 1rem; display: grid; place-items: center; min-height: 20rem; overflow: auto;
}
.zed__plaque { position: relative; line-height: 0; max-width: 100%; }
.zed__toile {
  display: block; max-width: 100%; background: #fff; border-radius: 3px;
  box-shadow: 0 6px 24px rgba(11, 47, 98, .16);
}
.zed__calque { position: absolute; inset: 0; cursor: crosshair; touch-action: none; }

.zed__zone {
  position: absolute; border-radius: 4px; cursor: move; touch-action: none;
  background: rgba(22, 214, 195, .16); box-shadow: inset 0 0 0 2px var(--accent-fonce);
}
.zed__zone--video { background: rgba(21, 74, 140, .16); box-shadow: inset 0 0 0 2px var(--marine-clair); }
.zed__zone--qr    { background: rgba(169, 114, 12, .14); box-shadow: inset 0 0 0 2px var(--alerte); }
.zed__zone--choisie { box-shadow: inset 0 0 0 2px var(--marine), 0 6px 18px rgba(11, 47, 98, .22); }
.zed__zone--revoir {
  background: rgba(192, 57, 43, .14); box-shadow: inset 0 0 0 2px var(--erreur);
}
.zed__picto {
  position: absolute; top: 3px; right: 3px; width: 1.1rem; height: 1.1rem;
  border-radius: var(--r-puce); background: var(--marine); color: var(--accent);
  display: grid; place-items: center;
}
.zed__picto svg { width: .75rem; height: .75rem; }
/* Une zone vidéo ou QR se dessine en plein cadre dans l'éditeur comme dans la
   liseuse : on place ce qu'on verra, pas un symbole de remplacement. */
.zed__zone .zone__plein { padding: 6%; }
.zed__zone--video, .zed__zone--qr { background: none; }

/* Choix du pictogramme d'une zone vidéo. */
.icones { display: flex; gap: 8px; flex-wrap: wrap; }
.icones__b {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 9px 10px; border: 1px solid var(--filet); border-radius: 11px;
  background: var(--surface); cursor: pointer; min-width: 4.6rem;
}
.icones__b:hover { border-color: var(--filet-fort); }
.icones__b.on { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(22, 214, 195, .25); }
.icones__dessin { width: 26px; height: 26px; display: grid; place-items: center; }
.icones__dessin svg { max-width: 100%; max-height: 100%; }
.icones__nom { font-size: 10.5px; font-weight: 700; color: var(--encre-3); }
.zed__poignee {
  position: absolute; right: -5px; bottom: -5px; width: 12px; height: 12px;
  border-radius: 3px; background: var(--surface); border: 2px solid var(--marine);
  cursor: nwse-resize;
}
/* Au doigt, une poignée de 12 px ne s'attrape pas : on l'agrandit sans changer
   le dessin sur écran tactile. */
@media (pointer: coarse) {
  .zed__poignee { right: -11px; bottom: -11px; width: 24px; height: 24px; border-radius: 6px; }
}
.zed__fantome {
  position: absolute; border-radius: 4px; background: rgba(22, 214, 195, .2);
  box-shadow: inset 0 0 0 2px var(--accent-fonce); pointer-events: none;
}

.zed__panneau { display: grid; gap: .8rem; }
.zed__bloc {
  background: var(--surface); border: 1px solid var(--filet); border-radius: var(--r-carte);
  padding: .9rem 1rem; box-shadow: var(--ombre-1);
}
.zed__bloc--revoir { border-color: rgba(192, 57, 43, .4); background: #FFF6F5; }
.zed__bloc-titre {
  margin: 0 0 .5rem; font-size: .74rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--encre-3);
}
.zed__nav { display: flex; gap: .4rem; }
.zed__nav .btn { flex: 1; }
.zed__liste { display: grid; gap: .4rem; }
.zed__item {
  display: flex; gap: .55rem; align-items: center; width: 100%; text-align: left;
  background: var(--surface-2); border: 1px solid var(--filet); border-radius: var(--r-champ);
  padding: .5rem .6rem; cursor: pointer; font: inherit; color: var(--encre);
}
.zed__item:hover { border-color: var(--encre-4); }
.zed__item--choisi { border-color: var(--marine); background: #fff; }
.zed__item--revoir { border-color: rgba(192, 57, 43, .35); background: #fff; }
.zed__item-picto {
  flex: none; width: 1.6rem; height: 1.6rem; border-radius: var(--r-puce);
  background: var(--marine); color: var(--accent); display: grid; place-items: center;
}
.zed__item-picto svg { width: .95rem; height: .95rem; }
.zed__item-txt { display: grid; min-width: 0; }
.zed__item-txt strong { font-size: .88rem; }
.zed__item-txt span {
  font-size: .76rem; color: var(--encre-3); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}

/* Sous 1020 px le panneau passe sous la page, en colonnes : on garde la liste
   des zones visible sans faire défiler tout l'écran. La page est bornée en
   hauteur pour qu'on voie toujours la page ET le panneau. */
@media (max-width: 1020px) {
  .zed { grid-template-columns: 6.8rem minmax(0, 1fr); }
  .zed__panneau {
    grid-column: 1 / -1;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    align-items: start;
  }
  .zed__toile { max-height: 62vh; width: auto; }
  .zed__bande { max-height: 62vh; }
}
@media (max-width: 620px) {
  .zed { grid-template-columns: minmax(0, 1fr); }
  .zed__bande { max-height: none; padding: .55rem; }
  .zed__vignettes { grid-auto-flow: column; grid-auto-columns: max-content; }
  .zed__vig canvas { height: 5rem; width: auto; }
  .zed__toile { max-height: 56vh; }
  .zed__tete .btn { margin-left: 0; }
  .zed__panneau { grid-template-columns: minmax(0, 1fr); }
  .zed__nav { flex-wrap: wrap; }
}

/* ==========================================================================
   Séance E — vitrine publique enrichie, statistiques, textes du site.
   ========================================================================== */

/* ----------------------------------------------------------- vitrine */

.vit { max-width: var(--max); margin: 0 auto; padding: 0 1.2rem 4rem; }

.vit-tete { padding: 2.6rem 0 1.4rem; }
.vit-tete h1 { font-size: clamp(1.9rem, 4vw, 2.7rem); letter-spacing: -.03em; margin: 0 0 .5rem; }
.vit-tete .lede { max-width: 60ch; margin: 0; }

.vit-barre {
  display: flex; align-items: center; flex-wrap: wrap; gap: .7rem;
  padding: .9rem 1rem; margin-bottom: 1.6rem;
  background: var(--surface); border: 1px solid var(--filet);
  border-radius: var(--r-carte); box-shadow: var(--ombre-1);
}
.vit-recherche {
  flex: 1 1 15rem; min-width: 12rem; margin: 0;
  padding: .62rem .9rem; font: inherit; color: var(--encre);
  background: var(--surface-2); border: 1px solid var(--filet); border-radius: var(--r-champ);
}
.vit-recherche:focus-visible { outline: 3px solid rgba(22, 214, 195, .45); outline-offset: 1px; }
.vit-puces { display: flex; flex-wrap: wrap; gap: .4rem; }
.vit-puce {
  padding: .42rem .82rem; font: inherit; font-size: .88rem; font-weight: 600;
  color: var(--encre-2); background: var(--surface-2);
  border: 1px solid var(--filet); border-radius: var(--r-puce); cursor: pointer;
}
.vit-puce:hover { border-color: var(--filet-fort); }
.vit-puce--active { background: var(--marine); border-color: var(--marine); color: #fff; }
.vit-tri {
  padding: .5rem .7rem; font: inherit; font-size: .9rem; color: var(--encre-2);
  background: var(--surface-2); border: 1px solid var(--filet); border-radius: var(--r-champ);
}
.vit-barre__compte { margin: 0 0 0 auto; font-size: .86rem; font-weight: 700; color: var(--encre-3); }

/* La une et la collecte côte à côte, en haut de page : c'est là que le
   visiteur regarde, et c'est là que l'invitation a une chance d'être lue. */
.vit-haut {
  display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
  gap: 1.2rem; align-items: start; margin-bottom: 1.8rem;
}
.vit-haut--seul { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 1000px) { .vit-haut { grid-template-columns: minmax(0, 1fr); } }

.vit-avant { margin-bottom: 0; }
.vit-avant .cartepub--grande {
  display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  align-items: stretch; overflow: hidden; border-radius: var(--r-carte);
}
/* La carte à la une garde la proportion A4 : sans elle, la couverture prenait
   la hauteur de la colonne de texte et se retrouvait rognée en son milieu. */
.cartepub--grande .cartepub__cover { aspect-ratio: 1 / 1.4142; align-self: start; border-bottom: 0; border-right: 1px solid var(--filet); }
.cartepub--grande .cartepub__corps { padding: 1.6rem 1.8rem; align-self: center; }
.cartepub--grande h3 { font-size: 1.5rem; letter-spacing: -.02em; margin: .5rem 0 0; }
.cartepub__desc { margin: .6rem 0 0; color: var(--encre-2); max-width: 55ch; }
.cartepub__bas { display: flex; align-items: center; gap: .6rem; margin-top: .9rem; }
.chip--avant { background: rgba(22, 214, 195, .18); color: #056B61; }

.vit-grille { padding: 0; }

.vit-inscription {
  margin-top: 2.6rem; padding: 1.7rem 1.8rem;
  background: var(--surface); border: 1px solid var(--filet);
  border-radius: var(--r-carte); box-shadow: var(--ombre-1);
}
.vit-inscription h2 { margin: 0 0 .9rem; font-size: 1.15rem; }
.vit-inscription .lis__collecte-ligne { max-width: 34rem; }
.vit-inscription .case { display: flex; gap: .5rem; align-items: flex-start; margin-top: .7rem; font-size: .86rem; color: var(--encre-2); }
/* En colonne, à côté de la une : pas de marge haute, champ et bouton empilés. */
.vit-inscription.vit-inscription--col { margin-top: 0; }
.vit-inscription--col .lis__collecte-ligne { flex-direction: column; align-items: stretch; max-width: none; }
.vit-inscription--col .lis__collecte-ligne .btn { width: 100%; }
.vit-inscription--col h2 { font-size: 1.05rem; }

@media (max-width: 720px) {
  .vit-avant .cartepub--grande { grid-template-columns: 1fr; }
  .cartepub--grande .cartepub__cover { aspect-ratio: 1 / 1.4142; border-right: 0; border-bottom: 1px solid var(--filet); }
  .vit-barre__compte { margin-left: 0; }
}

/* ------------------------------------------------------ statistiques */

.seg { display: inline-flex; padding: 3px; background: var(--surface-2); border: 1px solid var(--filet); border-radius: var(--r-puce); }
.seg button {
  padding: .38rem .8rem; font: inherit; font-size: .86rem; font-weight: 700;
  color: var(--encre-3); background: none; border: 0; border-radius: var(--r-puce); cursor: pointer;
}
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--encre); box-shadow: var(--ombre-1); }

.tile__delta--bas { color: var(--erreur); }

.courbe { display: flex; align-items: flex-end; gap: 2px; height: 12rem; padding: 1.3rem; }
/* max-width : sur une période de deux jours, des barres pleine largeur donnent
   l'impression d'un graphique cassé. Elles restent des barres. */
.courbe__jour { flex: 1 1 0; min-width: 2px; max-width: 2.6rem; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; gap: 1px; }
.courbe__vue { background: linear-gradient(180deg, #16D6C3, #0FBFAE); border-radius: 4px 4px 0 0; min-height: 2px; }
.courbe__page { background: rgba(11, 47, 98, .18); border-radius: 0 0 3px 3px; }
.courbe__jour:hover .courbe__vue { background: var(--marine); }
.courbe--sem .courbe__jour { max-width: 3.4rem; }
.courbe-legende { display: flex; gap: 1.2rem; padding: 0 1.3rem 1.1rem; font-size: .82rem; color: var(--encre-3); }
.courbe-legende span { display: inline-flex; align-items: center; gap: .4rem; }
.courbe-legende i { width: .7rem; height: .7rem; border-radius: 3px; display: inline-block; }

.barre-fond { position: relative; height: .55rem; background: var(--surface-2); border-radius: var(--r-puce); overflow: hidden; min-width: 6rem; }
.barre-part { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #16D6C3, #0FBFAE); border-radius: var(--r-puce); }

.stats-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 22px; }
.stats-tete .filtres { margin: 0; }
.page-app .stats-tete select {
  margin: 0; padding: 6px 13px; font: inherit; font-size: 12.5px; line-height: 19px; color: var(--encre-2);
  background: var(--surface); border: 1px solid var(--filet); border-radius: 999px; width: auto;
}
.stats-vide { padding: 2.4rem 1.3rem; text-align: center; color: var(--encre-3); }

/* ------------------------------------------------- textes du site (admin) */

.textes-groupe { padding: 1.3rem; border-bottom: 1px solid var(--filet); }
.textes-groupe:last-child { border-bottom: 0; }
.textes-groupe > h3 { margin: 0 0 .2rem; font-size: .96rem; }
.textes-groupe > p.lede { margin: 0 0 1rem; font-size: .88rem; }
.textes-duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 0 1.2rem; }

/* Retouches d'aplomb : un menu déroulant ne prend que la place qu'il lui faut,
   et « Page 12 » ne se coupe pas en deux lignes dans un tableau. */
.vit-tri, .stats-tete select { width: auto; max-width: 100%; }
.vit-tri { flex: none; }
.stats-tete select { min-width: 15rem; }
.table__page { white-space: nowrap; }

/* --------------------------------------------- inscrits et envoi (séance F) */
.table--inscrits .td-case { width: 2.6rem; padding-right: 0; }
.table--inscrits .td-case input { width: 1.05rem; height: 1.05rem; accent-color: var(--accent-fonce); cursor: pointer; }
.table .td-fin { text-align: right; white-space: nowrap; }
.aparte { font-size: .88rem; line-height: 1.55; color: var(--encre-3); margin: .5rem 0 0; }

.envoi { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.4rem; }
.envoi label { display: block; margin: .9rem 0 .35rem; font-weight: 600; font-size: .9rem; color: var(--encre-2); }
.envoi__reglages > label:first-child { margin-top: 0; }
.envoi__reglages select, .envoi__reglages input, .envoi__reglages textarea { width: 100%; }
.envoi__reglages .lede { font-size: .88rem; margin: 1rem 0 0; }
.apercu-mail {
  width: 100%; height: 26rem; border: 1px solid var(--filet); border-radius: var(--r-champ);
  background: var(--fond); display: block;
}
@media (max-width: 800px) {
  .envoi { grid-template-columns: 1fr; }
  .apercu-mail { height: 18rem; }
}

/* ======================================================= statistiques (maquette)
   Graphiques gradués : grille, échelle à gauche, dates en bas (maquette, lignes
   2282 et 2309). Le texte est dans le repère du SVG : il suit la largeur. */
.graphe-cadre { position: relative; }
.graphe { width: 100%; height: auto; display: block; overflow: visible; }
.graphe text { font-size: 9px; fill: var(--encre-4); font-variant-numeric: tabular-nums; }
.graphe__grille { stroke: #DCE8F4; stroke-width: 1; }
.graphe__aire { fill: #16D6C3; opacity: .16; }
.graphe__ligne { fill: none; stroke: #16D6C3; stroke-width: 2.1; stroke-linejoin: round; }
.graphe__point { fill: #16D6C3; }
.graphe__barre { fill: #16D6C3; opacity: .62; }
.graphe__barre--der { opacity: 1; }
.graphe text.graphe__der { fill: #0FBFAE; font-weight: 700; }
.graphe__cible, .graphe__cran rect { fill: transparent; cursor: crosshair; }
.graphe__cran line { stroke: #16D6C3; stroke-width: 1; opacity: 0; }
.graphe__cran circle { fill: #16D6C3; stroke: #fff; stroke-width: 1.6; opacity: 0; }
.graphe__cran:hover line { opacity: .45; }
.graphe__cran:hover circle { opacity: 1; }
.graphe__cible:hover { fill: rgba(11, 47, 98, .04); }

/* Six indicateurs sur trois colonnes, comme la fiche de la maquette. */
.tiles.tiles--six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1180px) { .tiles.tiles--six { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .tiles.tiles--six { grid-template-columns: minmax(0, 1fr); } }

/* En-tête d'un catalogue : sa couverture devant le titre. */
.stage__head--cv { align-items: flex-end; }
.stage__head--cv > div:nth-child(2) { flex: 1 1 18rem; min-width: 0; }
.stage__cv {
  width: 64px; aspect-ratio: 1 / 1.4142; flex: none; border-radius: 5px; overflow: hidden;
  background: linear-gradient(150deg, #123A73, #0B2F62); display: grid; place-items: center;
  box-shadow: 0 10px 22px -12px rgba(11, 47, 98, .55);
}
.stage__cv img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stage__cv span { color: #fff; font-weight: 800; font-size: 1.4rem; }
.stage__head--cv .stage__actions { align-items: center; }
.retour {
  display: flex; width: max-content; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600;
  color: var(--encre-3); margin: 0 0 8px; text-decoration: none;
}
.retour:hover { color: var(--encre); text-decoration: none; }

/* Une ligne par catalogue. */
.table-defile { overflow-x: auto; }
.table--stats th, .table--stats td { padding: 11px 18px; }
.table--stats th { font-size: 10px; letter-spacing: .1em; }
.table--stats td.table__num { font-size: 13px; font-weight: 700; color: var(--encre); }
.table__lien { cursor: pointer; }
.table__lien:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.table__barre { width: 18%; min-width: 7rem; }
.statcat { display: flex; align-items: center; gap: 12px; min-width: 14rem; }
.statcat__cv {
  width: 30px; aspect-ratio: 1 / 1.4142; flex: none; border-radius: 3px; overflow: hidden;
  background: var(--surface-2); display: grid; place-items: center;
}
.statcat__cv img { width: 100%; height: 100%; object-fit: cover; display: block; }
.statcat__cv--vide { background: linear-gradient(150deg, #123A73, #0B2F62); color: #fff; font-weight: 800; font-size: .75rem; }
.statcat__t { min-width: 0; display: flex; flex-direction: column; }
.statcat__t b { font-size: 13.5px; font-weight: 600; }
.statcat__t span { font-size: 11.5px; color: var(--encre-4); }
@media (max-width: 760px) { .table__barre { display: none; } }

.panel__body--def { padding-top: 4px; padding-bottom: 4px; }
.defrow__v--mono { font-weight: 600; font-size: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.defrow__fin { color: var(--encre-4); font-weight: 600; }
.panel__outils { display: flex; gap: 6px; }

/* ------- collecte sur téléphone : le panneau de la maquette (ligne 568 / 841)
   Sur une page seule, l'invitation n'a pas de demi-écran vide où se poser :
   elle garde le panneau translucide de la maquette, sur le bleu de la liseuse,
   typographie serrée — titre 14,5 px, champ 13 px, mentions 11 px. */
.lis__collecte:not(.lis__collecte--pose) {
  width: min(560px, calc(100% - 1.25rem)); padding: 16px 18px;
  background: rgba(9, 32, 66, .95); color: #E6EFFA;
  border: 1px solid rgba(255, 255, 255, .16); border-radius: 16px;
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .7);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.lis__collecte form { display: flex; flex-direction: column; gap: 11px; }
.lis__collecte .lis__collecte-titre { margin: 0; padding-right: 1.4rem; font-size: 14.5px; line-height: 1.3; font-weight: 700; }
.lis__collecte:not(.lis__collecte--pose) .lis__collecte-ligne { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.lis__collecte:not(.lis__collecte--pose) input[type="email"] {
  flex: 1 1 170px; min-width: 0; margin: 0; padding: 8px 11px; font-size: 13px; line-height: 1.4;
  background: rgba(8, 28, 58, .6); border: 1px solid rgba(255, 255, 255, .22); border-radius: 10px; color: #E6EFFA;
}
.lis__collecte:not(.lis__collecte--pose) input[type="email"]::placeholder { color: rgba(230, 239, 250, .45); }
.lis__collecte:not(.lis__collecte--pose) input[type="email"]:focus { border-color: var(--accent); outline: none; }
.lis__collecte:not(.lis__collecte--pose) .lis__collecte-ligne .btn { margin: 0; padding: 8px 14px; font-size: 13px; line-height: 1.4; border-radius: 10px; }
.lis__collecte .case {
  display: flex; gap: 9px; align-items: flex-start; margin: 0;
  font-size: 11.5px; line-height: 1.5; font-weight: 500;
}
.lis__collecte .case input { margin: 2px 0 0; width: auto; flex: none; accent-color: var(--accent); }
.lis__collecte .lis__collecte-fine { margin: 0; font-size: 11px; line-height: 1.5; }
.lis__collecte:not(.lis__collecte--pose) .case,
.lis__collecte:not(.lis__collecte--pose) .lis__collecte-fine { color: #A8C6E6; }
.lis__collecte:not(.lis__collecte--pose) .lis__collecte-fine a { color: var(--accent); text-decoration: none; }
.lis__collecte:not(.lis__collecte--pose) .lis__collecte-x { color: rgba(230, 239, 250, .55); top: .7rem; right: .8rem; }
.lis__collecte:not(.lis__collecte--pose) .lis__collecte-ok { color: var(--accent); }

/* Sur téléphone, le panneau ne recouvre pas la page : il prend place dans le
   flux, sous le catalogue et au-dessus des vignettes (maquette, ligne 1591),
   et la page se redimensionne pour lui laisser la place. */
.lis > .lis__collecte:not(.lis__collecte--pose) {
  position: relative; left: auto; bottom: auto; transform: none; z-index: 2;
  flex: none; margin: 0 auto 10px;
}
@media (max-width: 720px) { .lis > .lis__collecte:not(.lis__collecte--pose) { bottom: auto; } }

/* ==========================================================================
   Responsive téléphone et tablette — calé sur la maquette V8 (23/09/2026).
   Mesures relevées dans la maquette à 390 px de large ; mêmes paliers qu'elle :
   1240, 1000, 960, 760, 560 et 520 px.
   ========================================================================== */

/* La maquette pose « button{font:inherit} » : sans cela, les puces de filtre,
   la bascule cartes/liste et la cloche tombaient en Arial. */
button, input, select, textarea { font-family: inherit; }

@media (max-width: 960px) {
  /* La coquille passe en une colonne ; le rail marine devient la barre blanche
     de la maquette : le nom en haut, les écrans en pastilles dessous. */
  .shell { grid-template-columns: minmax(0, 1fr); }
  .rail {
    position: sticky; top: 0; z-index: 60; height: auto; align-self: auto;
    display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px;
    padding: 10px 18px; overflow: visible;
    background: #FFFFFF; color: var(--encre); border-bottom: 1px solid var(--filet);
  }
  .brand--rail { color: var(--encre); padding: 0; margin-right: auto; gap: 0; }
  .brand--rail .brand__mark { display: none; }
  .brand--rail .brand__logo--clair { display: none; }
  .brand--rail .brand__logo--fonce { display: block; height: 30px; }
  .brand--rail .brand__name { font-size: 20px; line-height: 30px; font-weight: 800; letter-spacing: -.4px; color: var(--encre); }
  .rail__nav {
    order: 3; flex: 0 1 auto; max-width: 100%; margin: 0;
    display: flex; gap: 2px; padding: 3px; flex-wrap: nowrap; overflow-x: auto;
    background: #EDF5FC; border-radius: 999px; scrollbar-width: none;
  }
  .rail__nav::-webkit-scrollbar { display: none; }
  .rail__group, .rail__dot, .rail__count { display: none; }
  .rail__link {
    flex: none; display: block; padding: 6px 13px; border-radius: 999px;
    font-size: 12.5px; line-height: 18.75px; font-weight: 600; letter-spacing: normal;
    color: var(--encre-3); background: transparent; white-space: nowrap;
  }
  .rail__link:hover { background: transparent; color: var(--encre); }
  .rail__link[aria-current="page"] {
    background: #FFFFFF; color: var(--marine); box-shadow: 0 2px 6px -3px rgba(11, 47, 98, .4);
  }
  /* Pied du rail : la déconnexion reste sur la ligne du nom, en lien discret. */
  .rail__foot { order: 2; margin: 0; border: 0; padding: 0 40px 0 0; display: flex; gap: 14px; align-items: center; }
  .rail__who { display: none; }
  .rail__out {
    padding: 0; font-size: 12.5px; line-height: 19px; font-weight: 600; color: #5E7EA6;
    text-decoration: none; white-space: nowrap;
  }
  .rail__out:hover { color: var(--encre); text-decoration: none; }
  /* La cloche rejoint la ligne du nom, à droite, sans changer sa hauteur. */
  .topbar .cloche {
    position: fixed; z-index: 61; top: 10px; right: 18px; width: 30px; height: 30px; margin: 0;
    border-radius: 10px;
  }
  .cloche svg { width: 16px; height: 16px; }
  .notifs { position: fixed; z-index: 62; top: 50px; right: 12px; left: auto; }

  /* Barre du haut : collante sous la barre blanche, comme la maquette. */
  .topbar { position: sticky; top: var(--haut-rail, 95px); z-index: 20; flex-wrap: nowrap; gap: 8px; padding: 13px 16px; }
  .recherche { max-width: none; min-width: 0; flex: 1 1 140px; }
  .topbar .btn { margin-left: 0; flex: none; }

  .stage { padding: 20px 16px 40px; }
  .stage__head { margin-bottom: 20px; }
  .stage__head h1 { font-size: clamp(25px, 7vw, 32px); line-height: 1.04; letter-spacing: -.028em; }
}

@media (max-width: 760px) {
  .rail { padding: 10px 12px; }
  .brand--rail .brand__name { font-size: 18px; line-height: 27px; letter-spacing: -.36px; }
  .topbar .cloche { top: 8.5px; right: 12px; }
  .notifs { top: 46px; }
}

@media (max-width: 560px) {
  /* Maquette : sous 560 px, tous les boutons passent à 9/13 px, petits compris. */
  .page-app .btn { padding: 9px 13px; }
  .page-app .btn--sm { padding: 9px 13px; font-size: 12px; line-height: 18px; }
  .stage__head { align-items: flex-start; }
}

/* La recherche de la barre du haut est une zone unique : le champ qu'elle
   contient ne doit pas reprendre le cadre et le fond des champs de formulaire. */
.page-app .recherche input[type="search"] {
  padding: 1px 2px; border: 0; border-radius: 0; background: none; box-shadow: none;
  font-size: 13px; line-height: 19.5px; height: auto;
}

@media (max-width: 960px) {
  .stage__head .eyebrow { margin: 0; }
  .stage__head p { margin-top: 4px; }
  .stage__actions { margin-left: auto; }
  .depot-bandeau { margin-bottom: 20px; }
  .filtres { margin-bottom: 20px; }
  .grille-cat { gap: 16px; padding: 16px; }
  /* Au doigt, pas de survol : les outils d'une collection restent visibles. */
  .colcard__outils { opacity: 1; }
}
@media (max-width: 760px) {
  .grille-cat { grid-template-columns: minmax(0, 1fr); }
  .tiles { gap: 16px; }
  .tile { padding: 13px 15px; }
  .tile__label { font-size: 12.5px; font-weight: 600; }
  .tile__value { font-size: 23px; letter-spacing: -.69px; }
  .tile__delta { font-size: 11.5px; font-weight: 700; }
  .colgrid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .cartecat__pied { gap: 8px; }
  .cartecat__actions { width: 100%; }
  .cartecat__actions > * { flex: 1 1 0; justify-content: center; text-align: center; }
}

/* Pastilles des cartes, au gabarit de la maquette : « Collecte e-mail » est un
   badge (11 px), l'état une pastille (11,5 px). */
.cartecat__badges { margin-top: 5px; display: flex; gap: 5px; flex-wrap: wrap; }
.cartecat__badges .chip { padding: 2px 8px; font-size: 11px; line-height: 16.5px; background: #D4F7F2; color: #0A6F64; }
.cartecat__actions .chip { padding: 3px 9px; font-size: 11.5px; line-height: 17.25px; }

/* Pile de couvertures des collections, exactement comme la maquette : 62 px,
   trois couvertures inclinées qui se déploient au survol. */
.colcard__pile { height: auto; min-height: 92px; padding-top: 4px; }
.colcard__pile .colcard__cv {
  width: 62px; border-radius: 4px; transform-origin: bottom center;
  box-shadow: 0 6px 14px -8px rgba(11, 47, 98, .65), 0 0 0 1px rgba(255, 255, 255, .55);
  transition: transform .3s cubic-bezier(.4, 0, .2, 1), margin .3s cubic-bezier(.4, 0, .2, 1);
}
.colcard__pile .colcard__cv:nth-child(1) { transform: rotate(-2.5deg); }
.colcard__pile .colcard__cv:nth-child(2) { transform: rotate(2deg) translateY(-2px) scale(.96); }
.colcard__pile .colcard__cv:nth-child(3) { transform: rotate(6deg) translateY(-4px) scale(.92); }
.colcard:hover .colcard__pile .colcard__cv { transform: rotate(0) translateY(-5px) scale(1); }
.colcard:hover .colcard__pile .colcard__cv + .colcard__cv { margin-left: -12px; }
.colcard__plus { margin-left: 14px; }
@media (max-width: 760px) {
  .tile { row-gap: 2px; }
  .tile__label { line-height: 18.75px; margin: 0 0 2px; }
  .tile__value { line-height: 34.5px; }
  .tile__delta { line-height: 17.25px; margin-top: 1px; }
}

.rail__link--bascule { display: none; }
@media (max-width: 960px) {
  .rail__link.rail__link--bascule { display: block; }
  .rail__foot a.rail__out { display: none; }
}
@media (max-width: 560px) {
  /* Boutons d'en-tête : la maquette les passe en pleine largeur quand ils forment
     une barre d'outils (Vitrine, Inscrits), les laisse à leur taille et à gauche
     sur les fiches, et à droite quand il n'y en a qu'un (Collections). */
  #app[data-vue="vitrine"] .stage__actions,
  #app[data-vue="inscrits"] .stage__actions { margin-left: 0; width: 100%; }
  #app[data-vue="vitrine"] .stage__actions .btn,
  #app[data-vue="inscrits"] .stage__actions .btn { flex: 1; justify-content: center; }
  #app[data-vue="statistiques"] .stage__actions,
  #app[data-vue="catalogue"] .stage__actions,
  #app[data-vue="contenus"] .stage__actions { margin-left: 0; width: 100%; }
  #app[data-vue="statistiques"] .stage__actions { gap: 8px; }
}
@media (max-width: 560px) {
  /* Fiche d'un catalogue : le retour d'abord, puis la couverture, puis le titre
     — la couverture passe au-dessus du texte, comme sur la maquette. */
  .stage__head--cv { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 0; justify-items: start; }
  .stage__head--cv > div:nth-child(2) { display: contents; }
  .stage__head--cv .retour { order: -2; margin: 0 0 8px; }
  .stage__head--cv .stage__cv { order: -1; margin-bottom: 16px; }
  .stage__head--cv .stage__actions { margin-top: 16px; }
}
.stage__actions .chip { padding: 3px 9px; font-size: 11.5px; line-height: 17.25px; }
@media (max-width: 960px) {
  /* Un bouton ne se casse jamais sur deux lignes (maquette : white-space nowrap). */
  .page-app .btn { white-space: nowrap; }
  .page-app .panel__head { flex-wrap: wrap; }
  .page-app .panel__head .chip, .page-app .panel__sous { white-space: nowrap; }
}
@media (max-width: 760px) {
  .tile__value.tile__value--texte { font-size: 15px; line-height: 22.5px; letter-spacing: -.15px; }
}
@media (max-width: 960px) {
  .page-app .panel__body { padding: 16px; }
}
@media (max-width: 760px) {
  .defrow { flex-wrap: wrap; gap: 12px; }
  .defrow__k { width: 44%; min-width: 130px; }
  .defrow__v { text-align: left; font-weight: 400; min-width: 0; }
  .defrow__v b, .defrow__v strong { font-weight: 600; }
}

/* Vitrine publique : le bouton « Feuilleter » des cartes, pleine largeur et en
   pilule, comme les tuiles de la maquette. */
.cartepub__bas:empty { display: none; }
.cartepub__lire { flex: 1; justify-content: center; border-radius: 999px; }
.page-vitrine .cartepub__corps .cartepub__lire { padding: 9px 13px; font-size: 12px; line-height: 18px; gap: 7px; }

@media (max-width: 760px) {
  /* Bandeau : le nom du client en serif 24 px (maquette .vit-nav .lo), les
     boutons du service en dessous, discrets. */
  .page-vitrine .site-head { padding: 14px 24px; gap: 14px; row-gap: 12px; flex-wrap: wrap; }
  .page-vitrine .site-head .brand { gap: 0; }
  .page-vitrine .site-head .brand__mark { display: none; }
  .page-vitrine .site-head .brand__name {
    font-family: 'Instrument Serif', Georgia, 'Times New Roman', serif; font-weight: 400;
    font-size: 24px; line-height: 36px; letter-spacing: normal;
  }
  .page-vitrine .site-head__nav { width: 100%; margin-left: 0; gap: 8px; }
  .page-vitrine .site-head__nav .btn { padding: 5px 10px; font-size: 12px; line-height: 18px; border-radius: 11px; }
  .page-vitrine { background: linear-gradient(180deg, #F6FBFF, #EAF4FD 40%, #EAF4FD); background-attachment: scroll; }
  .page-vitrine .site-head { max-width: none; background: #FFFFFF; border-bottom: 1px solid var(--filet); }

  /* En-tête de page (maquette .vit-hero, 34 px / 800). */
  .vit { padding: 0 24px 60px; }
  .vit-tete { padding: 34px 0 18px; }
  .vit-tete h1 { font-size: 34px; line-height: 1; letter-spacing: -.035em; margin: 14px 0 0; }
  .vit-tete .lede { font-size: 15px; line-height: 1.5; color: var(--encre-2); margin: 14px 0 0; }
  .vit-tete .tile__label { margin-top: 10px; }

  /* Recherche, collections, tri : à plat, les collections en puces de la maquette. */
  .vit-barre { padding: 22px 0; margin: 0; background: none; border: 0; box-shadow: none; border-radius: 0; gap: 12px 8px; }
  .vit-recherche { flex: 1 1 100%; min-width: 0; padding: 9px 11px; font-size: 13px; background: #FFFFFF; border-color: var(--filet); border-radius: 11px; }
  .vit-puces { gap: 7px; width: 100%; }
  .vit-puce {
    padding: 6px 13px; font-size: 12.5px; line-height: 19px; font-weight: 600;
    background: #FFFFFF; border-color: var(--filet); color: var(--encre-3);
  }
  .vit-puce--active { background: var(--accent); border-color: var(--accent); color: var(--sur-accent); font-weight: 700; }
  .vit-tri { padding: 6px 10px; font-size: 12.5px; border-radius: 11px; background: #FFFFFF; width: auto; }
  .vit-barre__compte { font-size: 12px; margin: 0 0 0 auto; }

  /* La une : couverture à gauche, texte à droite, pour ne pas occuper deux écrans. */
  .vit-haut { gap: 20px; margin-bottom: 20px; }
  .vit-avant .cartepub--grande { grid-template-columns: 118px minmax(0, 1fr); border-radius: 18px; }
  .cartepub--grande .cartepub__cover { border-bottom: 0; border-right: 1px solid var(--filet); }
  .cartepub--grande .cartepub__corps { padding: 14px; align-self: center; }
  .cartepub--grande h3 { font-size: 16px; line-height: 1.25; margin: 8px 0 0; }
  .cartepub--grande .cartepub__desc { font-size: 12.5px; line-height: 1.5; margin-top: 6px;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .cartepub--grande .chip--avant { padding: 2px 8px; font-size: 11px; }
  .cartepub--grande .cartepub__bas { margin-top: 10px; }
  .vit-inscription, .vit-inscription.vit-inscription--col { padding: 18px; border-radius: 18px; }
  .vit-inscription h2, .vit-inscription--col h2 { font-size: 14.5px; line-height: 1.3; }
  .vit-inscription input[type="email"] { padding: 9px 11px; font-size: 13px; }
  .vit-inscription .btn { padding: 9px 13px; font-size: 13px; }
  .vit-inscription .case { font-size: 11.5px; }

  /* Grille : deux tuiles par ligne (maquette .grid, minmax 150 px, 20 px). */
  .grille-pub { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 20px; }
  .grille-pub .cartepub {
    display: flex; flex-direction: column; gap: 12px; padding: 14px;
    border-radius: 18px; box-shadow: 0 2px 12px -8px rgba(11, 47, 98, .25);
  }
  .grille-pub .cartepub__cover { border-radius: 3px; border-bottom: 0; box-shadow: 0 1px 2px rgba(11, 47, 98, .07); }
  .grille-pub .cartepub__corps { padding: 0; display: flex; flex-direction: column; flex: 1; }
  .grille-pub .cartepub__corps h3 { font-size: 14px; line-height: 1.3; font-weight: 700; letter-spacing: -.01em; }
  .grille-pub .cartepub__corps .tile__label { font-size: 11px; line-height: 16.5px; font-weight: 600; margin: 10px 0 0 !important; }
  .grille-pub .cartepub__bas { margin-top: auto; padding-top: 14px; }
}
@media (max-width: 760px) {
  .cartepub--grande .cartepub__bas .btn { padding: 9px 13px; font-size: 12px; line-height: 18px; border-radius: 999px; }
}

/* ---------------------------------------------------------------- liseuse
   Téléphone (maquette .reader sous 760 px) : barre sur deux lignes avec le
   titre, planche posée en haut, flèches de 44 px à 16 px des bords et à 10 px
   de la page, barre de pages juste dessous, vignettes de 42 px en pied. */
@media (max-width: 760px) {
  .lis__barre { flex-wrap: wrap; justify-content: flex-start; gap: 7px; padding: 10px 12px; }
  .lis__barre > .lis__bouton:first-child { order: 0; }
  .lis__titre { display: flex; order: 1; flex: 1 1 calc(100% - 78px); min-width: 0; margin: 0; align-self: center; }
  .lis__titre strong { font-size: 13.5px; line-height: 20px; font-weight: 700; }
  .lis__titre span { display: none; }
  .lis__outils { display: contents; }
  .lis__outils > * { order: 3; }
  .lis__outils > :first-child { order: 2; }
  .lis__bouton { width: 32px; height: 32px; border-radius: 10px; border: 1px solid transparent; }
  .lis__bouton svg { width: 17px; height: 17px; }
  .lis__zoomval { display: block; width: 42px; text-align: left; font-size: 11.5px; line-height: 17px; font-weight: 400; color: #9CBCDD; }
  .lis__partager { margin-left: 0; padding: 6px 12px; font-size: 12.5px; line-height: 19px; font-weight: 700; border-radius: 11px; }

  .lis__vue { justify-content: flex-start; gap: 11px; padding: 14px 16px; }
  .lis__scene { flex: 0 1 auto; padding: 0 54px; align-items: flex-start; }
  .lis__scene--zoom { flex: 1; padding: 0; }
  .lis__fleche { width: 44px; height: 44px; border-width: 1.6px; }
  .lis__fleche svg { width: 16px; height: 16px; }
  .lis__fleche--g { left: 16px; }
  .lis__fleche--d { right: 16px; }

  .lis__bande { padding: 10px 12px; gap: 8px; }
  .lis__bvig { width: 42px; }
}

/* ------------------------------------------------ pages publiques, téléphone
   En-tête blanc de 69 px (maquette .lp-nav), gouttière de 24 px, échelle
   typographique de la landing de la maquette. Le contenu de la landing reste
   celui du site : seule sa mise en page suit la maquette. */
@media (max-width: 760px) {
  .page-public:not(.page-vitrine) .site-head,
  .page-auth .site-head {
    max-width: none; padding: 14px 24px; gap: 16px;
    background: #FFFFFF; border-bottom: 1px solid var(--filet);
  }
  .site-head .brand { gap: 9px; }
  .site-head .brand__mark { width: 30px; height: 30px; border-radius: 9px; font-size: 15px; }
  .site-head .brand__logo { height: 30px; }
  .site-head .brand__name { font-size: 20px; line-height: 30px; letter-spacing: -.4px; }
  .page-public:not(.page-vitrine) .site-head .btn,
  .page-auth .site-head .btn { padding: 9px 13px; font-size: 13px; line-height: 19.5px; border-radius: 11px; }

  .page-public main:not(.vit), .page-auth main { padding: 0 24px 44px; }
  .hero { gap: 34px; padding: 32px 0 24px; }
  .hero__art { order: 0; }
  .hero .eyebrow { font-size: 10px; letter-spacing: .11em; margin: 0; }
  .hero h1 { font-size: 42px; line-height: 1; letter-spacing: -.035em; margin: 16px 0 0; }
  .hero .lede { font-size: 16.5px; line-height: 1.6; color: var(--encre-2); margin: 20px 0 0; max-width: 46ch; }
  .hero__actions { gap: 10px; margin: 26px 0 20px; }
  .hero__actions .btn--lg { padding: 9px 13px; font-size: 14px; line-height: 21px; border-radius: 13px; }
  .hero__points { gap: 8px; font-size: 13.5px; }
  .hero__points li { padding-left: 1.5rem; }

  .steps, .features, .faq { padding: 58px 0 0; }
  .cta { margin-top: 58px; }
  .steps h2, .features h2, .faq h2, .cta h2 { font-size: 28px; line-height: 1.06; letter-spacing: -.025em; margin-bottom: 24px; }
  .steps__list, .features__grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .steps__list li, .features .card { border-radius: 20px; padding: 18px 20px 22px; }
  .steps__list li h3, .features .card h3 { font-size: 22px; line-height: 1.15; letter-spacing: -.025em; margin: 0 0 7px; }
  .steps__list p, .features p, .faq p { font-size: 13.5px; line-height: 1.6; }
  .faq details { border-radius: 16px; padding: 14px 16px; }
  .faq summary { font-size: 14.5px; }
  .cta { border-radius: 22px; padding: 40px 24px; }
  .cta p { font-size: 13.5px; }

  .site-foot { padding: 26px 24px; gap: 14px; font-size: 12.5px; margin-top: 0; }
  .site-foot__brand p, .site-foot__links a, .site-foot__legal { font-size: 12.5px; }
  .site-foot__links { gap: 10px 18px; }

  /* Connexion, inscription : la fenêtre de connexion de la maquette. */
  .auth { min-height: 0; padding: 24px 0 0; place-items: start stretch; }
  .auth__card { width: 100%; border-radius: 20px; padding: 18px 15px 15px; box-shadow: 0 30px 64px -26px rgba(7, 28, 60, .45); }
  .auth__card h1 { font-size: 21px; line-height: 24px; letter-spacing: -.02em; margin: 0; }
  .auth__sub { font-size: 12px; line-height: 18px; margin: 2px -15px 18px; padding: 0 15px 18px; border-bottom: 1px solid var(--filet); }
  .auth__card label { font-size: 10px; line-height: 15px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
                      color: var(--encre-3); margin: 13px 0 6px; }
  .auth__card form > label:first-child { margin-top: 0; }
  .auth__card input[type="text"], .auth__card input[type="email"], .auth__card input[type="password"],
  .auth__card input[type="url"], .auth__card input[type="tel"] {
    padding: 9px 11px; font-size: 13px; line-height: 19.5px; border-radius: 11px; background: #FFFFFF; border-color: var(--filet);
  }
  .auth__card input.champ-code { font-size: 20px; padding: 9px 11px; }
  .auth__card .btn { padding: 9px 13px; font-size: 13px; line-height: 19.5px; border-radius: 11px; margin-top: 18px; }
  .auth__card .btn-google { padding: 9px 13px; font-size: 13px; border-radius: 11px; }
  .auth__card .field-pass__eye { font-size: 11.5px; }
  .auth__links { margin-top: 14px; font-size: 12.5px; font-weight: 600; flex-direction: row; flex-wrap: wrap; gap: 8px 16px; }
  .auth__links a { color: var(--marine-clair); }
  .auth__ou { font-size: 11.5px; }
  .auth__card .case { font-size: 12.5px; text-transform: none; letter-spacing: normal; font-weight: 400; color: var(--encre-3); }
}
@media (max-width: 760px) {
  .page-auth main.auth { padding: 24px 16px 44px; }
}

.lignecat .chip { padding: 3px 9px; font-size: 11.5px; line-height: 17.25px; }

/* Bouton de fermeture du volet « Partager » de l'espace client : il n'avait
   aucun style et s'affichait en bouton natif encadré. Gabarit .icon-btn de la
   maquette : 30 px, sans cadre. */
.fen__x {
  flex: none; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 10px;
  background: none; color: var(--encre-3); font-size: 20px; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
}
.fen__x:hover { background: var(--surface-2); color: var(--encre); }

@media (max-width: 760px) {
  /* Fenêtres : 10 px de marge, 92 % de la hauteur, 15 px de marge intérieure. */
  .modale { padding: 10px; }
  .modale__boite, .modale__boite--large { width: 100%; max-height: 92vh; border-radius: 20px; }
  .modale__tete { padding: 18px 15px; }
  .modale__tete h2 { font-size: 21px; line-height: 1.15; letter-spacing: -.02em; }
  .modale__corps { padding: 18px 15px; }
  .modale__pied { padding: 14px 15px; flex-wrap: wrap; background: var(--surface); }
  /* Volets : pleine largeur, comme le tiroir de la maquette. */
  .volet { width: 100%; }
  .volet__tete { padding: 16px; }
  .volet__corps { padding: 16px; }
}
@media (max-width: 960px) {
  /* La barre du haut forme son propre plan : sans ce rang, la cloche qu'elle
     contient passait sous la barre blanche. Les deux barres ne se chevauchent pas. */
  .topbar { z-index: 61; }
}
@media (max-width: 960px) {
  .page-app .lede { font-size: 13.5px; line-height: 1.5; }
}
@media (max-width: 760px) {
  /* Pages légales : le texte courant de la maquette (.prose, 13,5 px). */
  .page-public main.prose { padding-top: 32px; }
  .prose h1 { font-size: 28px; line-height: 1.06; letter-spacing: -.025em; }
  .prose h2 { font-size: 19px; line-height: 1.2; margin: 26px 0 8px; }
  .prose h3 { font-size: 15px; }
  .prose p, .prose li { font-size: 13.5px; line-height: 1.65; color: var(--encre-2); }
  .prose ul, .prose ol { padding-left: 18px; }
  .prose li { margin-bottom: 4px; }
}

/* ---------------------------------------------------------------- liseuse
   Téléphone, révision du 24/09 (demande de Maxime) : le catalogue d'abord.
   Barre sur une ligne, plus de flèches latérales (celles du bas suffisent),
   vignettes rangées sous le bord et appelées d'un geste vers le haut,
   collecte en notification discrète en bas à droite. */
.lis { position: relative; }
.lis__poignee { display: none; }

@media (max-width: 760px) {
  .lis__barre { flex-wrap: nowrap; gap: 4px; padding: 8px 10px; }
  .lis__titre { order: 0; flex: 1 1 auto; margin: 0 0 0 2px; }
  .lis__outils { display: flex; gap: 2px; }
  .lis__outils > *, .lis__outils > :first-child { order: 0; }
  .lis__outils [aria-label="Dézoomer"], .lis__outils [aria-label="Zoomer"],
  .lis__outils [aria-label="Plein écran"], .lis__zoomval { display: none; }
  .lis__partager { margin-left: 4px; }

  .lis__fleche { display: none; }
  .lis__vue { justify-content: center; gap: 12px; padding: 10px 10px 14px; }
  .lis__scene { padding: 0; }

  .lis__bande {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 6;
    padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
    background: rgba(8, 32, 63, .97); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border-top: 1px solid rgba(255, 255, 255, .12);
    transform: translateY(100%); transition: transform .25s cubic-bezier(.2, .8, .2, 1);
  }
  .lis--vignettes .lis__bande { transform: none; }
  .lis__poignee {
    display: block; position: absolute; z-index: 7; left: 50%; bottom: env(safe-area-inset-bottom);
    width: 96px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer;
    transform: translateX(-50%); transition: transform .25s cubic-bezier(.2, .8, .2, 1);
  }
  .lis__poignee span { display: block; width: 40px; height: 4px; margin: 0 auto; border-radius: 2px; background: rgba(255, 255, 255, .38); }
  .lis--vignettes .lis__poignee { transform: translate(-50%, -86px); }
}
@media (max-width: 760px) and (max-height: 560px) { .lis__poignee { display: none; } }

/* Notification de collecte (lecture page à page). */
.lis__invite {
  position: absolute; z-index: 8; right: 12px; bottom: calc(14px + env(safe-area-inset-bottom));
  display: flex; align-items: center; max-width: min(290px, calc(100% - 24px));
  background: #0E3768; color: #EAF3FC; border: 1px solid rgba(255, 255, 255, .18); border-radius: 14px;
  box-shadow: 0 16px 32px -14px rgba(0, 0, 0, .75);
  animation: invite-monte .35s cubic-bezier(.2, .8, .2, 1);
}
.lis__invite[hidden] { display: none; }
.lis--vignettes .lis__invite { display: none; }
@keyframes invite-monte { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.lis__invite-ouvrir {
  display: flex; align-items: center; gap: 9px; min-width: 0; padding: 8px 2px 8px 9px;
  border: 0; background: none; color: inherit; cursor: pointer; text-align: left;
  font-size: 12.5px; line-height: 1.3; font-weight: 700;
}
.lis__invite-ico {
  width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: var(--sur-accent);
}
.lis__invite-txt { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.lis__invite-x {
  flex: none; width: 34px; height: 40px; padding: 0; border: 0; background: none; cursor: pointer;
  color: rgba(230, 239, 250, .55); font-size: 12px;
}
.lis__invite-x:hover { color: #fff; }

/* Le formulaire, dans un panneau qui monte du bas. */
.lis__feuille { position: fixed; inset: 0; z-index: 95; }
.lis__feuille-fond { position: absolute; inset: 0; background: rgba(4, 17, 38, .55); opacity: 0; transition: opacity .22s; }
.lis__feuille-boite {
  position: absolute; left: 0; right: 0; bottom: 0; max-height: 88vh; overflow: auto;
  padding: 10px 18px calc(22px + env(safe-area-inset-bottom));
  background: #0B2F62; color: #E6EFFA; border-radius: 20px 20px 0 0;
  box-shadow: 0 -18px 40px -18px rgba(0, 0, 0, .7);
  transform: translateY(100%); transition: transform .22s cubic-bezier(.2, .8, .2, 1);
}
.lis__feuille--ouverte .lis__feuille-fond { opacity: 1; }
.lis__feuille--ouverte .lis__feuille-boite { transform: none; }
.lis__feuille-poignee { display: block; width: 40px; height: 4px; margin: 0 auto 14px; border-radius: 2px; background: rgba(255, 255, 255, .3); }
.lis__feuille .lis__collecte,
.lis__feuille .lis__collecte:not(.lis__collecte--pose) {
  position: relative; left: auto; bottom: auto; transform: none; z-index: auto;
  width: auto; max-width: 560px; margin: 0 auto; padding: 0;
  background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
.lis__feuille .lis__collecte-x { top: -4px; right: 0; }
@media (max-width: 760px) { .lis { overflow: hidden; } }
@media (max-width: 760px) { .lis__invite { bottom: calc(30px + env(safe-area-inset-bottom)); } }

/* Liseuse, collecte — retouches du 24/09 après essai sur iPhone :
   la notification se pose en bas à droite de la page (plus sur les boutons),
   la croix la replie en une enveloppe alignée sur les boutons de page,
   le champ fait 16 px pour que Safari ne zoome pas, la croix du panneau
   s'écarte du bouton « Je m'inscris ». */
.page > .lis__invite {
  position: absolute; right: 10px; bottom: 10px; left: auto; top: auto;
  max-width: min(270px, calc(100% - 20px)); line-height: normal;
}
@media (max-width: 760px) { .page > .lis__invite { bottom: 10px; } }
.lis__pastille {
  position: absolute; z-index: 4; right: 10px; width: 32px; height: 32px; padding: 0;
  display: grid; place-items: center; cursor: pointer;
  border: 1px solid rgba(22, 214, 195, .55); border-radius: 11px;
  background: rgba(22, 214, 195, .14); color: var(--accent);
  animation: invite-monte .3s cubic-bezier(.2, .8, .2, 1);
}
.lis__pastille[hidden] { display: none; }
.lis__pastille:hover { background: var(--accent); color: var(--sur-accent); }

.lis__feuille-boite { box-sizing: border-box; overflow-x: hidden; }
.lis__feuille .lis__collecte .lis__collecte-titre { padding-right: 44px; }
.lis__feuille .lis__collecte:not(.lis__collecte--pose) .lis__collecte-x {
  position: absolute; top: -7px; right: -8px; width: 36px; height: 36px; padding: 0;
  display: grid; place-items: center; font-size: 14px; border-radius: 10px;
  color: rgba(230, 239, 250, .6);
}
.lis__feuille .lis__collecte:not(.lis__collecte--pose) .lis__collecte-x:hover { background: rgba(255, 255, 255, .08); color: #fff; }
/* Safari zoome sur tout champ de moins de 16 px : on s'en tient à 16. */
.lis__feuille .lis__collecte:not(.lis__collecte--pose) input[type="email"] { font-size: 16px; line-height: 1.3; }
.lis__feuille .lis__collecte:not(.lis__collecte--pose) .lis__collecte-ligne .btn { font-size: 14px; }

/* Liseuse, collecte sur ordinateur — 25/09 : l'invitation posée dans la
   demi-page se replie, par sa croix, en une enveloppe titrée à droite de la
   barre de pages ; un clic rouvre le formulaire dans une fenêtre centrée. */
.lis__pastille-txt { display: none; }
@media (min-width: 900px) {
  .lis__pastille { width: auto; max-width: 300px; gap: 8px; padding: 0 12px 0 10px; grid-auto-flow: column; }
  .lis__pastille-txt {
    display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
    font-size: 12.5px; font-weight: 700; line-height: 1;
  }
}
@media (min-width: 761px) {
  .lis__feuille-boite {
    left: 50%; right: auto; top: 50%; bottom: auto; width: min(560px, calc(100vw - 48px));
    padding: 26px 28px 24px; border-radius: 20px;
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .75);
    opacity: 0; transform: translate(-50%, calc(-50% + 18px));
    transition: transform .22s cubic-bezier(.2, .8, .2, 1), opacity .22s;
  }
  .lis__feuille--ouverte .lis__feuille-boite { opacity: 1; transform: translate(-50%, -50%); }
  .lis__feuille-poignee { display: none; }
}

/* Liseuse — notification « Recevoir le prochain catalogue » (24/09, demande de
   Maxime) : une seule ligne si le texte tient dans la largeur de la page ;
   sinon deux lignes équilibrées, la notification resserrée au plus juste par
   liseuse.js (classe --deux + largeur posée en ligne). */
.page > .lis__invite { max-width: calc(100% - 20px); }
.lis__invite .lis__invite-txt { white-space: nowrap; text-overflow: ellipsis; display: block; }
.lis__invite--deux .lis__invite-txt {
  white-space: normal; text-overflow: clip; display: -webkit-box;
  text-wrap: balance;
}

/* Cartes catalogue — les trois boutons du pied (état, Stats, Partager) au même
   gabarit que la pastille « En ligne » : pilule teintée, sans cadre ni ombre,
   même hauteur, même corps. */
.cartecat__actions .chip,
.page-app .cartecat__actions .btn,
.page-app .cartecat__actions .btn--sm {
  padding: 4px 11px; font-size: 11.5px; line-height: 17.25px; font-weight: 700;
  border: 1px solid transparent; border-radius: var(--r-puce); box-shadow: none;
}
.page-app .cartecat__actions .btn--ghost { background: #EDF2F9; color: var(--marine); }
.page-app .cartecat__actions .btn--ghost:hover { background: #DFE8F4; border-color: transparent; }
.page-app .cartecat__actions .btn--accent { background: #D4F7F2; color: #0A6F64; }
.page-app .cartecat__actions .btn--accent:hover { background: #B8F0E8; }
@container (max-width: 290px) {
  .cartecat__actions .chip,
  .page-app .cartecat__actions .btn--sm { padding-left: 8px; padding-right: 8px; }
}
@media (max-width: 560px) {
  .cartecat__actions .chip,
  .page-app .cartecat__actions .btn--sm { padding: 8px 11px; font-size: 12px; line-height: 18px; }
}

/* Liseuse — collecte dans le volet de partage (24/09), sous « AirDrop,
   Messages… ». Même consentement que l'invitation, au gabarit clair du volet. */
.volet__collecte { position: relative; padding: .9rem; border: 1px solid var(--filet-fort); border-radius: 12px; background: #F3F8FD; }
.volet__col-titre { margin: 0 0 .6rem; font-size: .92rem; font-weight: 800; color: var(--encre); }
.volet__col-ligne { display: flex; gap: .45rem; }
.volet__col-ligne input[type="email"] {
  flex: 1 1 auto; min-width: 0; padding: .62rem .75rem; border: 1px solid var(--filet-fort); border-radius: 10px;
  background: #fff; color: var(--encre); font: inherit; font-size: 16px;   /* 16 px : Safari ne zoome pas */
}
.volet__col-ligne input[type="email"]:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.volet__col-btn {
  flex: none; padding: .62rem .9rem; border: 0; border-radius: 10px; cursor: pointer;
  background: var(--marine); color: #fff; font: inherit; font-size: .86rem; font-weight: 800;
}
.volet__col-btn:hover { background: var(--marine-clair); }
.volet__col-btn[disabled] { opacity: .6; }
.volet__case--haut { align-items: flex-start; }
.volet__case--haut input { margin-top: .15rem; flex: none; }
.volet__col-fine { margin: .55rem 0 0; font-size: .74rem; line-height: 1.45; color: var(--encre-3); }
.volet__col-fine a { color: var(--encre-2); text-decoration: underline; }
.volet__col-err { margin: .5rem 0 0; font-size: .8rem; color: #B42318; }
.volet__col-err[hidden] { display: none; }
.volet__col-ok { margin: 0; font-size: .88rem; font-weight: 700; color: var(--succes); }

/* Inscrits — filtre par catalogue ou collection (24/09). */
.filtres-inscrits { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; padding: 0 20px 14px; }
.filtres-inscrits label { display: flex; flex-direction: column; gap: 4px; margin: 0; font-size: 11px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: var(--encre-3); }
.filtres-inscrits select { min-width: 200px; max-width: 100%; }
.filtres-inscrits .lede { margin: 0 0 6px; font-size: 12.5px; }
.sources-inscrit { display: flex; flex-direction: column; gap: 2px; }
.sources-inscrit small { color: var(--encre-3); font-size: 11.5px; }
.envoi__avert { margin: 0; padding: 10px 12px; border-radius: 10px; background: #FDF3E2; color: #8A5A00; font-size: 12.5px; line-height: 1.45; }
.envoi__avert[hidden] { display: none; }
.envoi__aide { margin: -2px 0 4px; color: var(--encre-3); font-size: 12.5px; line-height: 1.45; }
.envoi__aide[hidden] { display: none; }
@media (max-width: 560px) { .filtres-inscrits { padding: 0 14px 12px; } .filtres-inscrits select { min-width: 0; width: 100%; } .filtres-inscrits label { flex: 1 1 100%; } }
.volet__case--haut span { font-weight: 500; line-height: 1.4; }

/* Liseuse — aperçu d'un catalogue non public, réservé au propriétaire (24/09). */
.lis__apercu { flex: none; margin: 0; padding: 7px 14px; text-align: center; font-size: 12.5px; font-weight: 700;
  line-height: 1.35; background: #FDF3E2; color: #8A5A00; }

/* Fenêtre retenue (dépôt en cours) : un clic à côté la fait tressaillir au lieu de la fermer. */
@keyframes modale-tressaille { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-7px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(2px); } }
.modale__boite--retenue { animation: modale-tressaille .32s ease; }
@media (prefers-reduced-motion: reduce) { .modale__boite--retenue { animation: none; outline: 3px solid rgba(22, 214, 195, .55); } }

/* Paramètres — choix « Qui s'adresse aux lecteurs » (24/09). */
.case--choix { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; margin: 0 0 8px; border: 1px solid var(--filet); border-radius: 12px; cursor: pointer; }
.case--choix:has(input:checked) { border-color: var(--accent); background: #F0FCFA; }
.case--choix input { margin-top: 3px; flex: none; accent-color: var(--accent); }
.case--choix b { display: block; font-size: 13px; color: var(--encre); }
.case--choix small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.45; color: var(--encre-3); font-weight: 500; text-transform: none; letter-spacing: 0; }

/* Collections partagées (24/09). */
.chip--partage { background: #EEE9FB; color: #5B3FB0; }
.partages { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.partages__ligne { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; border: 1px solid var(--filet); border-radius: 10px; }
.partages__qui { flex: 1 1 180px; min-width: 0; }
.partages__qui b { display: block; font-size: 13px; color: var(--encre); overflow: hidden; text-overflow: ellipsis; }
.partages__qui small { display: block; font-size: 12px; color: var(--encre-3); }
.partages__inviter { display: flex; gap: 8px; }
.partages__inviter input { flex: 1 1 auto; min-width: 0; }
.colcard__outils button svg { display: block; margin: auto; }
@media (max-width: 560px) { .partages__inviter { flex-direction: column; } }
.partages__inviter .btn { white-space: nowrap; flex: none; }

/* Partage en bas des catalogues d'une collection (24/09). */
.panel--partage { margin-top: 18px; border-color: #D9CFF5; }
.panel--partage .panel__head h2::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: #7A5BD6; vertical-align: middle; }
.panel--partage .panel__body { max-width: 720px; }

/* ==========================================================================
   26/09/2026 — lisibilité et accessibilité (audit complet)
   ========================================================================== */

/* Safari (iPhone) zoome sur tout champ dont le texte fait moins de 16 px :
   on l'impose à tous les champs sous 760 px, pas seulement à la collecte. */
@media (max-width: 760px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea,
  .page-app .recherche input[type="search"] { font-size: 16px; }
}

/* Au doigt, les petites commandes gagnent une zone de 40 px (les dessins ne changent pas). */
@media (pointer: coarse) {
  .kebab, .fen__x, .volet__x, .modale__x, .lis__bouton, .lis__edge, .vtog button, .colcard__outils button, .oeil, .cloche {
    min-width: 40px; min-height: 40px;
  }
}

/* Focus clavier : un contour net partout, y compris sur les cartes et les
   commandes de la liseuse qui l'effaçaient. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent-fonce, #0FBFAE); outline-offset: 2px;
}
.cartecat:focus-visible, .colcard:focus-visible, .oeil:focus-visible, .lis__pgnum:focus-visible {
  outline: 2px solid var(--accent-fonce, #0FBFAE); outline-offset: 2px;
}

/* Impression : le contenu, sans l'habillage. */
@media print {
  .site-head, .site-foot, .btn, .rail, .topbar, .lis__barre, .lis__pied, .flashs, .notifs { display: none !important; }
  body { background: #fff !important; color: #000; }
  .prose, main { max-width: none; box-shadow: none; }
  .prose a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; color: #555; }
}

/* Erreur de la liseuse : deux boutons côte à côte. */
.lis__erreur-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ==========================================================================
   Séance O (30/09/2026) — accès protégé et domaine personnalisé
   ========================================================================== */
.champ-copie > input { flex: 1; min-width: 0; }
.acces-histo__liste { list-style: none; margin: .5rem 0 0; padding: 0; max-height: 14rem; overflow: auto;
                      border: 1px solid var(--filet); border-radius: 10px; }
.acces-histo__liste[hidden] { display: none; }
.acces-histo__liste li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 10px;
                         border-bottom: 1px solid var(--filet); font-size: 12.5px; word-break: break-all; }
.acces-histo__liste li:last-child { border-bottom: 0; }
.acces-recap { display: grid; gap: 8px; padding: 12px 14px; margin: 0 0 12px; background: var(--surface-2);
               border: 1px solid var(--filet); border-radius: 12px; }
.acces-recap > div { display: flex; align-items: baseline; gap: 12px; }
.acces-recap .tile__label { flex: none; width: 7.5rem; margin: 0; }
.acces-recap__v { font-size: 13px; font-weight: 700; color: var(--encre); word-break: break-all; }

/* Carte « Votre vitrine est accessible sur … » (retour de Maxime, 29/09). */
.dom-carte { display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin: 0 0 10px;
             border: 1px solid var(--filet); border-radius: 14px; background: var(--surface-2); }
.dom-carte__ico { flex: none; width: 2.6rem; height: 2.6rem; border-radius: 11px; display: grid; place-items: center;
                  background: rgba(22, 214, 195, .14); color: var(--accent-fonce); }
.dom-carte__ico svg { width: 1.35rem; height: 1.35rem; }
.dom-carte__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dom-carte__sur { font-size: 12.5px; color: var(--encre-3); }
.dom-carte__val { font-family: ui-monospace, Menlo, monospace; font-size: 15px; font-weight: 700; color: var(--encre);
                  text-decoration: none; word-break: break-all; display: inline-flex; align-items: center; gap: 6px; }
a.dom-carte__val:hover { color: var(--marine-clair); text-decoration: underline; }
.dom-carte__sortie { display: inline-flex; width: 15px; height: 15px; color: var(--encre-3); flex: none; }
.dom-carte__sortie svg { width: 100%; height: 100%; }
.dom-carte__note { font-size: 12px; color: var(--encre-3); margin-top: 2px; }
.dom-tete { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--filet);
            border-radius: 14px; background: var(--surface-2); margin: 0 0 14px; }
.dom-tete > div { flex: 1; min-width: 0; word-break: break-all; }
.dom-etape { margin: 0 0 14px; }
.dom-etape__t { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--encre-3); margin: 0 0 8px; }
.dom-dns { width: 100%; table-layout: fixed; }
.dom-dns th:first-child, .dom-dns td:first-child { width: 5.5rem; }
.dom-copie { display: flex; align-items: center; gap: 6px; min-width: 0; }
.dom-copie code { flex: 1; min-width: 0; font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; background: var(--surface);
                  border: 1px solid var(--filet); border-radius: 7px; padding: 4px 7px; word-break: break-all; user-select: all; }
.dom-actions { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 6px; }
@media (max-width: 560px) {
  .dom-dns thead { display: none; }
  .dom-dns, .dom-dns tbody, .dom-dns tr, .dom-dns td { display: block; width: 100% !important; }
  .dom-dns tr { padding: 8px 0; border-bottom: 1px solid var(--filet); }
  .dom-dns td { border: 0; padding: 3px 0; }
  .acces-recap > div { flex-direction: column; gap: 2px; }
}
.acces-mdp { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; }
.dom-plus { margin: 4px 0 0; }
.dom-plus > summary { cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--encre-3); padding: 4px 0; }
.dom-plus[open] > summary { margin-bottom: 6px; }
/* Une fenêtre passe devant tout (barre collante du téléphone à 61, volets à 90/91,
   menu à 95) ; seuls les messages flash et les infobulles restent au-dessus. */
.modale { z-index: 100; }

/* ================================================================ tarifs
   Séance Tarifs (30/09/2026) : grille de la landing, panneau « Formule » des
   Paramètres, fenêtre « Changer de formule », jauges, mention Folyo de la
   liseuse et de la vitrine. */

.tarifs { padding: clamp(2rem, 5vw, 3.5rem) 0; }
.tarifs h2 { text-align: center; margin-bottom: .6rem; }
.tarifs__intro, .tarifs__note { text-align: center; color: var(--encre-2); max-width: 46rem; margin: 0 auto 2rem; }
.tarifs__note { margin: 1.6rem auto 0; font-size: .92rem; color: var(--encre-3); }
.tarifs__grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; align-items: stretch; }
.tarif {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--filet); border-radius: var(--r-carte);
  padding: 1.6rem 1.4rem 1.4rem; box-shadow: var(--ombre-1);
}
.tarif--vedette { border: 2px solid var(--accent); box-shadow: var(--ombre-accent); }
.tarif__ruban {
  position: absolute; top: -.8rem; left: 50%; transform: translateX(-50%); white-space: nowrap;
  background: var(--accent); color: var(--sur-accent); font-weight: 800; font-size: .78rem;
  padding: .25rem .8rem; border-radius: var(--r-puce);
}
.tarif h3 { margin: 0 0 .5rem; }
.tarif__prix { margin: 0; color: var(--encre-2); }
.tarif__prix strong { font-size: 2.2rem; color: var(--marine); letter-spacing: -.03em; }
.tarif__an { margin: .2rem 0 1rem; font-size: .86rem; color: var(--encre-3); min-height: 1.2em; }
.tarif ul { list-style: none; padding: 0; margin: 0 0 1.3rem; display: grid; gap: .45rem; flex: 1; }
.tarif li { position: relative; padding-left: 1.4rem; color: var(--encre-2); font-size: .95rem; line-height: 1.4; }
.tarif li::before {
  content: ''; position: absolute; left: .1rem; top: .42em; width: .7rem; height: .38rem;
  border-left: 2px solid var(--accent-fonce); border-bottom: 2px solid var(--accent-fonce); transform: rotate(-45deg);
}
.tarif .btn { width: 100%; justify-content: center; }
@media (max-width: 960px) { .tarifs__grille { grid-template-columns: 1fr; max-width: 30rem; margin: 0 auto; } }

/* Jauges de consommation (Paramètres, Catalogues) */
.jauges { display: grid; gap: .8rem; margin: 4px 0 2px; }
.jauge__tete { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--encre-2); margin-bottom: 5px; }
.jauge__tete b { color: var(--encre); font-weight: 700; }
.jauge__barre { height: 7px; border-radius: 999px; background: var(--fond); overflow: hidden; }
.jauge__barre > span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.jauge--alerte .jauge__barre > span { background: #E0A526; }
.jauge--plein .jauge__barre > span { background: var(--erreur); }
.forfait-tete { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0 0 6px; }
.forfait-tete strong { font-size: 22px; color: var(--marine); letter-spacing: -.02em; }
.forfait-tete span { color: var(--encre-3); font-size: 14px; }
.forfait-alerte {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: #FFF6E3; border: 1px solid #F2D9A0; color: #6B4A06; border-radius: 12px;
  padding: 10px 14px; margin: 0 0 14px; font-size: 14px;
}
.forfait-alerte--plein { background: #FDECEA; border-color: #F3C1BB; color: #7A1F16; }
.rail__forfait { display: block; font-size: 12px; color: #7FE6DA; margin-top: 3px; text-decoration: none; }
.rail__forfait:hover { color: #fff; }
.filtres button:disabled { opacity: .4; cursor: not-allowed; }

/* Fenêtre « Changer de formule » */
.choix-periode { display: inline-flex; background: var(--fond); border-radius: 999px; padding: 3px; margin: 0 0 14px; }
.choix-periode button {
  border: 0; background: transparent; font: inherit; font-size: 14px; font-weight: 700; color: var(--encre-2);
  padding: 6px 14px; border-radius: 999px; cursor: pointer;
}
.choix-periode button[aria-pressed="true"] { background: var(--surface); color: var(--marine); box-shadow: var(--ombre-1); }
.choix-formules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.choix-formule {
  text-align: left; border: 1.5px solid var(--filet); background: var(--surface); border-radius: 14px;
  padding: 14px 14px 12px; cursor: pointer; font: inherit; color: inherit; display: flex; flex-direction: column; gap: 4px;
}
.choix-formule[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(22, 214, 195, .18); }
.choix-formule b { font-size: 16px; color: var(--marine); }
.choix-formule .choix-formule__prix { font-size: 20px; font-weight: 800; color: var(--encre); }
.choix-formule small { color: var(--encre-3); font-size: 12.5px; line-height: 1.35; }
.choix-formule__actuelle { font-size: 11px; font-weight: 800; text-transform: uppercase; color: var(--succes); letter-spacing: .04em; }
.choix-packs { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; flex-wrap: wrap; font-size: 14px; }
.choix-packs select { width: auto; }
.choix-total { margin: 14px 0 0; font-size: 15px; color: var(--encre-2); }
.choix-total b { color: var(--marine); }
@media (max-width: 760px) { .choix-formules { grid-template-columns: 1fr; } }

/* Admin : formule d'un espace */
.chip--gratuit { background: #EEF2F7; color: #4A6A93; }
.chip--folyo { background: #DDF8F4; color: #0B5D55; }
.chip--pro { background: #0B2F62; color: #fff; }
.chip--alerte { background: #FDECEA; color: #7A1F16; }

/* Mention Folyo dans la liseuse et sur la vitrine */
.folyo-mention {
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
  color: var(--encre-3); font-size: 12px; font-weight: 600; white-space: nowrap;
}
.folyo-mention:hover { color: var(--marine); }
.folyo-mention img { height: 14px; width: auto; display: block; }
.folyo-mention--discrete { opacity: .75; }
.lis__mention { position: absolute; left: 16px; bottom: 16px; z-index: 5; }
.lis__mention .folyo-mention { color: rgba(230, 239, 250, .62); }
.lis__mention .folyo-mention:hover { color: #fff; }
.lis--vignettes .lis__mention { display: none; }
.lecture--embed .lis__mention { bottom: 6px; }
.vit-mention { display: flex; justify-content: center; padding: 28px 0 36px; }
@media (max-width: 760px) {
  .lis__mention { left: 10px; bottom: 8px; }
  .lis__mention .folyo-mention { font-size: 11px; }
  .lis__mention .folyo-mention__plus { display: none; }
}

/* ============================================================ formats
   Séance P puis Q (30/09/2026) : la couverture prend le format du catalogue,
   comme sur Calaméo (A4 à la française ou à l'italienne, carré, dépliant).
   Seule limite : jamais plus haute qu'un A4 à la française de la même
   largeur (100cqw × 1,4142) ; au-delà, elle se rétrécit en largeur.
   Les cartes d'une même ligne s'alignent par le bas, titres à la même hauteur. */
.cartecat__cover, .fiche__cover, .cartepub__cover {
  aspect-ratio: auto; container-type: inline-size; overflow: visible;
  display: flex; justify-content: center; align-items: flex-end;
  background: none; border-bottom: 0;
}
.cartecat__cover img, .fiche__cover img, .cartepub__cover img {
  position: static; display: block; width: auto; height: auto;
  max-width: 100%; max-height: calc(100cqw * 1.4142);
  aspect-ratio: auto 1 / 1.4142;           /* avant chargement : la place d'un A4 */
  object-fit: contain;
}
/* L'image porte elle-même l'arrondi du haut de la carte quand elle en occupe la largeur. */
.cartecat__cover img { border-radius: 17px 17px 0 0; border-bottom: 1px solid var(--filet); }
.cartepub__cover img { border-bottom: 1px solid var(--filet); }
.fiche__cover img { border-bottom: 1px solid var(--filet); }
.cartecat__cover--vide, .fiche__cover--vide, .cartepub__cover--vide {
  aspect-ratio: 1 / 1.4142; display: grid; place-items: center;
  background: linear-gradient(150deg, #123A73, #0B2F62);
}
.grille-cat, .grille-pub { align-items: end; }
/* Titre sur deux lignes au plus, place réservée : les couvertures d'une ligne
   s'alignent par le bas, comme les titres. */
.cartecat__corps h3, .grille-pub .cartepub__corps h3 {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: calc(2em * 1.28);
}
.grille-pub .cartepub__corps .tile__label {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Petites vignettes (listes, statistiques, dossiers) : entières. */
.opt__cv img, .lignecat__cv img, .colcard__cv img, .stage__cv img, .statcat__cv img { object-fit: contain; }
/* Tiroir des pages de la liseuse : chaque vignette à la proportion de sa page. */
.lis__vig canvas { aspect-ratio: auto; object-fit: contain; }

/* Nombre de couvertures par ligne (séance Q) : selon la place réellement
   offerte à la grille (requête de conteneur, le rail ne compte pas), et, au
   large, 5 par ligne jusqu'à 5 catalogues, 6 au-delà (classe --six). */
.grille-boite, .vit-grille { container: grille / inline-size; }
.grille-cat, .grille-pub { --cols: 2; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); }
@container grille (min-width: 480px)  { .grille-cat, .grille-pub { --cols: 3; } }
@container grille (min-width: 640px)  { .grille-cat, .grille-pub { --cols: 4; } }
@container grille (min-width: 820px)  { .grille-cat, .grille-pub { --cols: 5; } }
@container grille (min-width: 1000px) { .grille--six { --cols: 6; } }
@media (max-width: 760px) { .grille-cat { --cols: 1; } }

/* ============================================ parcours de découverte
   01/10/2026 : liste « Premiers pas » en tête de l'écran Catalogues et
   visite en bulles à la première connexion (app.js, lib/decouverte.php). */
.pp { margin-bottom: 18px; }
.pp .panel__head { flex-wrap: wrap; }
.pp .panel__sous { margin-left: 0; margin-right: auto; }
.pp__x { width: 30px; height: 30px; }
.pp__barre { height: 5px; background: var(--surface-2); }
.pp__barre span { display: block; height: 100%; background: var(--accent); border-radius: 0 5px 5px 0; transition: width .4s ease; }
.pp__liste { list-style: none; margin: 0; padding: 6px 12px 10px; }
.pp__etape {
  display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 12px;
  padding: 11px 8px; border-top: 1px solid var(--filet); border-radius: 12px;
}
.pp__etape:first-child { border-top: 0; }
.pp__etape--ici { background: var(--surface-2); border-top-color: transparent; }
.pp__etape--ici + .pp__etape { border-top-color: transparent; }
.pp__coche {
  width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--filet-fort);
  display: grid; place-items: center; color: var(--sur-accent); background: var(--surface);
}
.pp__coche svg { width: 14px; height: 14px; }
.pp__etape--fait .pp__coche { background: var(--accent); border-color: var(--accent); }
.pp__etape--ici .pp__coche { border-color: var(--accent); }
.pp__txt { min-width: 0; }
.pp__txt b { display: block; font-size: 14px; line-height: 21px; }
.pp__txt span { display: block; font-size: 13px; line-height: 19px; color: var(--encre-3); }
.pp__etape--fait .pp__txt b { color: var(--encre-3); font-weight: 600; text-decoration: line-through; text-decoration-color: var(--filet-fort); }
.pp__etape .btn { white-space: nowrap; }
.pp__etape .btn[disabled] { opacity: .55; cursor: default; box-shadow: none; }
.pp__fini p { margin: 0 0 14px; color: var(--encre-2); font-size: 14px; }
.pp__actions { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 560px) {
  .pp__etape { grid-template-columns: 24px 1fr; }
  .pp__etape .btn { grid-column: 2; justify-self: start; }
}

.visite__voile { position: fixed; inset: 0; z-index: 200; }
.visite__trou {
  position: fixed; z-index: 201; pointer-events: none; border-radius: 12px;
  box-shadow: 0 0 0 9999px rgba(11, 47, 98, .55), 0 0 0 2px var(--accent);
  transition: left .25s ease, top .25s ease, width .25s ease, height .25s ease;
}
.visite__bulle {
  position: fixed; z-index: 202; width: min(340px, calc(100vw - 24px));
  background: var(--surface); border-radius: 16px; box-shadow: var(--ombre-2);
  padding: 16px 18px 14px; outline: none;
  transition: left .25s ease, top .25s ease;
}
.visite__bulle[data-cote="centre"] { width: min(400px, calc(100vw - 24px)); padding: 22px 22px 16px; }
.visite__pas { margin: 0; font-size: 12px; font-weight: 700; color: var(--encre-4); letter-spacing: .04em; }
.visite__bulle h3 { margin: 2px 0 6px; font-size: 17px; line-height: 24px; }
.visite__texte { margin: 0; font-size: 14px; line-height: 21px; color: var(--encre-2); }
.visite__actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
.visite__nav { display: flex; gap: 8px; }
.visite__passer {
  background: none; border: 0; padding: 4px 0; cursor: pointer; font: inherit;
  font-size: 13px; color: var(--encre-3); text-decoration: underline; text-underline-offset: 3px;
}
.visite__passer:hover { color: var(--encre); }
@media (prefers-reduced-motion: reduce) {
  .visite__trou, .visite__bulle, .pp__barre span { transition: none; }
}
/* Compte neuf : la liste des premiers pas remplace les trois étapes de l'écran vide. */
.pp ~ .empty .empty__steps { display: none; }
.cartepub--grande .cartepub__cover { aspect-ratio: auto; align-self: center; border-right: 0; }

/* Séance Q : « Les plus récents » à la hauteur exacte des puces (il lui
   manquait un pixel, et l'arrondi n'était pas le même). */
.vit-puce, .vit-tri { box-sizing: border-box; height: 38px; line-height: 20px; }
.vit-tri { padding-top: 0; padding-bottom: 0; border-radius: var(--r-puce); }
@media (max-width: 760px) {
  .vit-puce, .vit-tri { height: 33px; line-height: 19px; }
  .vit-tri { border-radius: var(--r-puce); }
}

/* Séance Q : bouton d'aide à gauche de la cloche, il relance la visite guidée. */
.topbar .aide-btn { margin-left: auto; }
.topbar .aide-btn + .cloche { margin-left: 0; }
@media (max-width: 960px) {
  .topbar .aide-btn { position: fixed; z-index: 61; top: 10px; right: 56px; width: 30px; height: 30px; margin: 0; border-radius: 10px; }
  .rail__foot { padding-right: 78px; }
}
@media (max-width: 760px) {
  .topbar .aide-btn { top: 8.5px; right: 50px; }
}
/* Séance Q : le dossier tient sur une ligne (les corps de carte ont tous la
   même hauteur, les couvertures restent alignées) ; à six par ligne, le pied
   se resserre pour que « En ligne · Stats · Partager » tienne. */
.cartecat__meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@container (max-width: 215px) {
  .cartecat__corps { padding-left: 12px; padding-right: 12px; }
  .cartecat__pied { padding-left: 8px; padding-right: 8px; }
  .cartecat__actions { gap: 3px; }
  .cartecat__actions .btn--sm, .cartecat__actions .chip { padding-left: .4rem; padding-right: .4rem; font-size: 11px; }
}

/* Séance Q : cartes de l'écran Catalogues épurées — couverture, titre, dossier.
   « En ligne · Stats · Partager » paraissent au survol, sur le bas de la
   couverture, sans cadre ; l'œil et le menu aussi. Écran tactile : tout reste visible. */
.cartecat__survol {
  position: absolute; left: 0; right: 0; bottom: 12px; z-index: 3;
  display: flex; justify-content: center; align-items: center; gap: 6px; flex-wrap: nowrap;
  opacity: 0; transform: translateY(6px); pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.cartecat__survol > * {
  flex: none; white-space: nowrap; box-shadow: 0 8px 18px -8px rgba(11, 47, 98, .6);
}
.cartecat__survol .chip--on { background: #E7F7F0; }
.cartecat__survol .chip, .cartecat__survol .btn--ghost { background-color: #FFFFFF; }
.cartecat__survol .chip--on { background-color: #E7F7F0; }
.cartecat__corps { padding-bottom: 16px; }
.cartecat__haut .oeil, .cartecat__haut .kebab { opacity: 0; transition: opacity .18s ease; }
.cartecat:hover .cartecat__survol, .cartecat:focus-within .cartecat__survol { opacity: 1; transform: none; pointer-events: auto; }
.cartecat:hover .cartecat__haut .oeil, .cartecat:hover .cartecat__haut .kebab,
.cartecat:focus-within .cartecat__haut .oeil, .cartecat:focus-within .cartecat__haut .kebab { opacity: 1; }
@container (max-width: 215px) {
  .cartecat__survol { gap: 3px; }
  .cartecat__survol .btn--sm, .cartecat__survol .chip { padding-left: .42rem; padding-right: .42rem; font-size: 11px; }
}
@media (hover: none) {
  .cartecat__survol { opacity: 1; transform: none; pointer-events: auto; }
  .cartecat__haut .oeil, .cartecat__haut .kebab { opacity: 1; }
}
.cartecat__survol > * { box-sizing: border-box; height: 30px; display: inline-flex; align-items: center; line-height: 1; }

/* Séance Q : copie en un clic (fiche du catalogue : adresse et lien court). */
.copie-ico {
  flex: none; width: 38px; height: 38px; display: grid; place-items: center; padding: 0;
  border: 1px solid var(--filet); border-radius: 10px; background: var(--surface); color: var(--encre-2); cursor: pointer;
}
.copie-ico:hover, .copie-ico:focus-visible { border-color: var(--accent); color: var(--marine); outline: none; }
.copie-ico svg { width: 17px; height: 17px; }
.copie-ico--ok { border-color: var(--accent); color: #056B61; background: rgba(22, 214, 195, .12); }
.champ-prefixe input.champ-lecture { background: #FFFFFF; border-style: dashed; color: var(--encre-2); cursor: text; }
/* Carte trop étroite pour les trois boutons (ils demandent ~215 px, statut « Dépublié »
   compris) : le statut s'efface, Stats et Partager restent. */
@container (max-width: 230px) {
  .cartecat__survol > .chip { display: none; }
}

/* Séance Q : carte à la Calaméo — titre sur une ligne (…), dossier, vues totales. */
.cartecat__corps h3 {
  display: block; -webkit-line-clamp: unset; min-height: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cartecat__vues { margin: 0; font-size: 12px; font-weight: 600; color: var(--encre-4); }
/* Lien court : du texte (pas un champ), l'icône de copie collée à droite. */
.lien-court { display: flex; align-items: center; gap: 10px; min-height: 38px; }
.lien-court__texte { font-size: .95rem; font-weight: 600; color: var(--encre); user-select: none; -webkit-user-select: none; }
/* Survol : trois boutons identiques — même police (celle de la puce, la plus petite), même arrondi. */
.cartecat__survol > .chip, .cartecat__survol > .btn {
  font-size: .8rem; font-weight: 700; letter-spacing: 0; border-radius: var(--r-puce);
  padding: 0 .75rem; height: 30px;
}
@container (max-width: 215px) {
  .cartecat__survol > .chip, .cartecat__survol > .btn { padding: 0 .5rem; font-size: 11px; }
}

/* Vitrine, carte « À la une » : la couverture respire dans sa colonne (marge,
   arrondi, ombre) au lieu d'être collée au bord gauche — surtout à l'italienne. */
.vit-avant .cartepub--grande { grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); }
.cartepub--grande .cartepub__cover { padding: 24px 0 24px 24px; align-self: center; justify-content: center; align-items: center; }
.cartepub--grande .cartepub__cover img {
  border: 0; border-radius: 8px; box-shadow: 0 12px 28px -14px rgba(11, 47, 98, .45);
}
@media (max-width: 720px) {
  .vit-avant .cartepub--grande { grid-template-columns: 1fr; }
  .cartepub--grande .cartepub__cover { padding: 18px 18px 0; }
}

/* =====================================================================
   Liseuse — téléphone tenu à l'horizontale et plein écran (04/10/2026,
   demande de Maxime). L'écran est large mais très bas (260 à 390 px) :
   barre sur une ligne avec le compteur de pages, plus de barre de pages
   (flèches sur les côtés, glissé, sommaire), la planche prend toute la
   hauteur. Ne s'applique pas à une liseuse intégrée (iframe).
   Plein écran sur téléphone : mode immersif (.lis--plein) ; catalogue à
   l'italienne sur téléphone tenu debout : tourné d'un quart de tour
   (.lis--pivot). Ordinateur et tablette inchangés. */
.lis__outils > .lis__indic { display: none; }
.lis__compteur, .lis__sortir { display: none; }
.lis__sortir svg { width: 18px; height: 18px; }
.lis__pastille--bas { top: auto; bottom: 10px; }

/* Téléphone debout : le bouton plein écran paraît pour un catalogue à l'italienne. */
@media (max-width: 760px) {
  .lis--paysage .lis__outils [aria-label="Plein écran"] { display: grid; }
}

@media (orientation: landscape) and (max-height: 520px) {
  body:not(.lecture--embed) .lis__barre {
    flex-wrap: nowrap; gap: 6px;
    padding: 3px max(10px, env(safe-area-inset-right)) 3px max(10px, env(safe-area-inset-left));
  }
  body:not(.lecture--embed) .lis__titre { display: flex; order: 0; flex: 1 1 auto; min-width: 0; margin: 0 0 0 4px; }
  body:not(.lecture--embed) .lis__titre strong { font-size: 13.5px; line-height: 20px; font-weight: 700; }
  body:not(.lecture--embed) .lis__titre span { display: none; }
  body:not(.lecture--embed) .lis__outils { display: flex; gap: 2px; }
  body:not(.lecture--embed) .lis__outils > *, body:not(.lecture--embed) .lis__outils > :first-child { order: 0; }
  body:not(.lecture--embed) .lis__outils [aria-label="Dézoomer"],
  body:not(.lecture--embed) .lis__outils [aria-label="Zoomer"],
  body:not(.lecture--embed) .lis__zoomval { display: none; }
  body:not(.lecture--embed) .lis__outils [aria-label="Plein écran"] { display: grid; }
  body:not(.lecture--embed) .lis__outils > .lis__indic {
    display: block; min-width: 0; margin-right: 6px; white-space: nowrap;
    font-size: 12px; line-height: 18px; font-weight: 600; color: #9CBCDD;
  }
  body:not(.lecture--embed) .lis__bouton { width: 34px; height: 34px; min-width: 34px; min-height: 34px; border-radius: 10px; }
  body:not(.lecture--embed) .lis__bouton svg { width: 18px; height: 18px; }
  body:not(.lecture--embed) .lis__partager { margin-left: 4px; padding: 5px 12px; font-size: 12.5px; line-height: 19px; font-weight: 700; }
  body:not(.lecture--embed) .lis__apercu { padding: 3px 14px; font-size: 11.5px; }

  body:not(.lecture--embed) .lis__corps { position: relative; }
  body:not(.lecture--embed) .lis__vue {
    justify-content: center; gap: 0;
    padding: 8px max(58px, env(safe-area-inset-right)) 8px max(58px, env(safe-area-inset-left));
  }
  body:not(.lecture--embed) .lis__scene { flex: 1; padding: 0; align-items: center; }
  body:not(.lecture--embed) .lis__scene--zoom { align-items: flex-start; }
  body:not(.lecture--embed) .lis__pgnav,
  body:not(.lecture--embed) .lis__bande,
  body:not(.lecture--embed) .lis__poignee { display: none; }
  body:not(.lecture--embed) .lis__fleche { display: grid; width: 40px; height: 40px; border-width: 1.6px; }
  body:not(.lecture--embed) .lis__fleche svg { width: 16px; height: 16px; }
  body:not(.lecture--embed) .lis__tiroir {
    position: absolute; z-index: 9; left: 0; top: 0; height: 100%; width: 11.5rem;
    padding-left: max(.6rem, env(safe-area-inset-left)); box-shadow: var(--ombre-2);
  }
  body:not(.lecture--embed) .lis__mention { left: max(10px, env(safe-area-inset-left)); bottom: 6px; }
  body:not(.lecture--embed) .lis__mention .folyo-mention { font-size: 11px; }
  body:not(.lecture--embed) .lis__mention .folyo-mention__plus { display: none; }
  body:not(.lecture--embed) .lis__chargement--discret { bottom: 10px; }
  /* Collecte : la notification dans la marge, en bas à droite ; le formulaire tient dans la hauteur. */
  body:not(.lecture--embed) .lis__vue > .lis__invite { right: max(12px, env(safe-area-inset-right)); bottom: 10px; max-width: 270px; }
  body:not(.lecture--embed) .lis__pastille { right: max(10px, env(safe-area-inset-right)); }
  body:not(.lecture--embed) .lis__feuille-boite {
    max-height: calc(100vh - 12px); max-height: calc(100dvh - 12px);
    padding-top: 14px; padding-bottom: 14px;
  }
  body:not(.lecture--embed) .lis__feuille .lis__collecte form { gap: 8px; }
}

/* ---- plein écran immersif */
.lis.lis--plein .lis__barre, .lis.lis--plein .lis__pgnav, .lis.lis--plein .lis__bande, .lis.lis--plein .lis__poignee,
.lis.lis--plein .lis__apercu, .lis.lis--plein .lis__invite, .lis.lis--plein .lis__pastille { display: none !important; }
.lis.lis--plein .lis__vue { justify-content: center; gap: 0; padding: 0; }
.lis.lis--plein .lis__scene { flex: 1; padding: 0; align-items: center; }
.lis.lis--plein .lis__scene--zoom { align-items: flex-start; }
.lis.lis--plein .page__toile { border-radius: 0; box-shadow: none; }
.lis.lis--plein .lis__fleche {
  display: grid; width: 40px; height: 40px;
  background: rgba(8, 32, 63, .6); border-color: rgba(255, 255, 255, .4);
}
.lis.lis--plein .lis__fleche svg { width: 16px; height: 16px; }
.lis.lis--plein .lis__fleche:disabled { opacity: 0; pointer-events: none; }
.lis.lis--plein .lis__sortir {
  display: grid; place-items: center; position: absolute; z-index: 9;
  top: max(8px, env(safe-area-inset-top)); right: max(8px, env(safe-area-inset-right));
  width: 38px; height: 38px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .35); background: rgba(8, 32, 63, .72); color: #fff;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.lis.lis--plein .lis__compteur {
  display: block; position: absolute; z-index: 8; left: 50%; transform: translateX(-50%);
  bottom: max(6px, env(safe-area-inset-bottom)); padding: 2px 9px; border-radius: 999px;
  background: rgba(8, 32, 63, .72); color: rgba(230, 239, 250, .9);
  font-size: 11.5px; line-height: 17px; font-weight: 700; font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.lis.lis--plein .lis__mention { bottom: 6px; }

/* ---- catalogue à l'italienne en plein écran sur un téléphone tenu debout :
   la liseuse entière est tournée d'un quart de tour et remplit l'écran. */
.lis--pivot {
  position: fixed; top: 0; left: 0; z-index: 80;
  width: 100vh; width: 100dvh; height: 100vw;
  transform-origin: 0 0; transform: translateX(100vw) rotate(90deg);
  background: #08203F;
}
.lis.lis--pivot .lis__vue { padding: 0 env(safe-area-inset-bottom) 0 env(safe-area-inset-top); }
.lis.lis--pivot .lis__sortir { top: 8px; right: max(8px, env(safe-area-inset-bottom)); }
.lis.lis--pivot .lis__compteur { bottom: 6px; }

/* =====================================================================
   Espace client et admin sur téléphone — révision du 04/10/2026 (demande
   de Maxime : menu, affichage).
   1. Menu : sous 960 px le rail est un tiroir (bouton à gauche de la barre),
      au lieu des pastilles qui défilaient à moitié cachées. La barre du haut
      tient sur une ligne et reste seule collée en haut de l'écran.
   2. Affichage : catalogues sur deux colonnes, indicateurs deux par ligne,
      filtres sur une ligne qui défile, listes resserrées.
   Ordinateur (au-delà de 960 px) : rien ne change. */
.menu-btn, .rail__fermer, .topbar__admin, .rail-voile { display: none; }
.topbar.topbar--admin { display: none; }

@media (max-width: 960px) {
  /* ---- le tiroir */
  .page-app .rail {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 96;
    width: min(300px, 86vw); height: auto; align-self: auto;
    display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 14px;
    padding: 14px max(14px, env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
    overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
    background:
      radial-gradient(22rem 16rem at 20% 108%, rgba(22, 214, 195, .22), transparent 64%),
      linear-gradient(180deg, #0B3164, #08234A);
    color: #E6EFFA; border: 0;
    transform: translateX(-104%); visibility: hidden;
    transition: transform .24s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .24s;
  }
  .page-app.menu-ouvert .rail {
    transform: none; visibility: visible; box-shadow: 0 0 60px rgba(4, 17, 38, .55);
    transition: transform .24s cubic-bezier(.2, .8, .2, 1), visibility 0s;
  }
  .page-app.menu-net .rail, .page-app.menu-net .rail-voile { transition: none; }
  .rail-voile {
    display: block; position: fixed; inset: 0; z-index: 95; background: rgba(4, 17, 38, .5);
    opacity: 0; pointer-events: none; transition: opacity .24s;
  }
  .menu-ouvert .rail-voile { opacity: 1; pointer-events: auto; }
  .page-app.menu-ouvert { overflow: hidden; }

  .page-app .rail .brand--rail { color: #fff; padding: 4px 6px; margin: 0 44px 0 0; align-self: flex-start; }
  .page-app .rail .brand--rail .brand__logo--clair { display: block; height: 34px; width: auto; }
  .page-app .rail .brand--rail .brand__logo--fonce { display: none; }
  .rail__fermer {
    display: grid; place-items: center; position: absolute; top: 12px; right: 10px;
    width: 40px; height: 40px; padding: 0; border: 0; border-radius: 10px; cursor: pointer;
    background: none; color: rgba(230, 239, 250, .75);
  }
  .rail__fermer:hover { background: rgba(255, 255, 255, .08); color: #fff; }
  .rail__fermer svg { width: 20px; height: 20px; }

  .page-app .rail__nav {
    order: 0; flex: none; max-width: none; margin: 0; padding: 0;
    display: grid; gap: 2px; overflow: visible; background: none; border-radius: 0;
  }
  .page-app .rail__group { display: block; padding: 14px 11px 6px; }
  .page-app .rail__dot { display: block; }
  .page-app .rail__count { display: block; }
  .page-app .rail__link {
    display: flex; align-items: center; gap: 9px; padding: 12px 11px; border-radius: 10px;
    font-size: 14.5px; line-height: 20px; font-weight: 700; letter-spacing: normal;
    color: rgba(230, 239, 250, .86); background: transparent; white-space: normal;
  }
  .page-app .rail__link:hover { background: rgba(255, 255, 255, .07); color: #fff; }
  .page-app .rail__link[aria-current="page"] { background: var(--accent); color: var(--sur-accent); box-shadow: none; }
  .page-app .rail__link.rail__link--bascule { display: none; }
  .page-app .rail__foot {
    order: 0; display: block; margin: auto 0 0; padding: 14px 8px 0;
    border-top: 1px solid rgba(255, 255, 255, .12);
  }
  .page-app .rail__who { display: block; font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
  .page-app .rail__out, .page-app .rail__foot a.rail__out {
    display: block; padding: 12px 0 2px; font-size: 14px; line-height: 20px; font-weight: 700;
    color: var(--accent); text-align: left; white-space: normal;
  }

  /* ---- la barre du haut : une ligne, collée en haut */
  .page-app .topbar, .page-app .topbar.topbar--admin {
    position: sticky; top: 0; z-index: 61; display: flex; flex-wrap: nowrap; align-items: center; gap: 8px;
    padding: 9px max(12px, env(safe-area-inset-right)) 9px max(12px, env(safe-area-inset-left));
  }
  .menu-btn {
    display: grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 0; margin-left: -4px;
    border: 0; border-radius: 10px; background: none; color: var(--marine); cursor: pointer;
  }
  .menu-btn:hover { background: var(--surface-2); }
  .menu-btn svg { width: 22px; height: 22px; }
  .page-app .recherche { flex: 1 1 auto; min-width: 0; max-width: none; padding: 9px 11px; }
  .page-app .topbar .cloche, .page-app .topbar .aide-btn {
    position: relative; top: auto; right: auto; z-index: auto; flex: none;
    width: 38px; height: 38px; margin: 0; border-radius: 10px;
  }
  .page-app .topbar .cloche svg { width: 17px; height: 17px; }
  .page-app .topbar .btn { margin-left: 0; flex: none; }
  .page-app .notifs { position: fixed; z-index: 62; top: 60px; right: 10px; left: auto; }
  /* Administration : pas de recherche ni de dépôt, la barre garde le menu et dit où l'on est. */
  .topbar--admin > :not(.menu-btn):not(.topbar__admin) { display: none !important; }
  .topbar--admin .topbar__admin { display: block; font-size: 15px; font-weight: 800; letter-spacing: -.01em; color: var(--marine); }
}
@media (max-width: 430px) {
  /* « Importer un PDF » devient « Importer » : le libellé complet reste dans la page (aria-label). */
  .page-app #import-btn { font-size: 0; gap: 0; }
  .page-app #import-btn::before { content: "Importer"; font-size: 12.5px; line-height: 18px; }
  .page-app .topbar { gap: 6px; }
}
@media (max-width: 360px) {
  /* Très petit écran : le « ? » s'efface (la visite se relance depuis Paramètres), la recherche respire. */
  .page-app .topbar .aide-btn { display: none; }
}

/* ---- affichage */
.cartecat__etat { display: none; }
@media (max-width: 760px) {
  /* Le dépôt se fait par « Importer », toujours visible dans la barre : le
     bandeau (glisser-déposer) n'a pas d'usage au doigt. */
  .page-app .depot-bandeau { display: none; }
  /* Catalogues : deux couvertures par ligne (une seule occupait tout l'écran). */
  .page-app .grille-cat { --cols: 2; gap: 12px; padding: 12px; }
  .page-app .cartecat__corps { padding: 11px 12px 13px; gap: 3px; }
  .page-app .cartecat__corps h3 { font-size: 13.5px; }
  .page-app .cartecat__haut { padding: 6px; }
  .page-app .cartecat__survol { bottom: 8px; }
}
@media (max-width: 350px) { .page-app .grille-cat { --cols: 1; } }
/* Carte étroite au doigt : l'état et « Partager » sur la couverture ; « Stats »
   reste dans le menu ⋮ et dans la fiche. */
@media (hover: none) {
  @container (max-width: 230px) {
    .cartecat__survol > .chip { display: inline-flex; }
    .cartecat__survol > .btn--ghost { display: none; }
  }
}
@media (max-width: 620px) {
  /* Indicateurs : deux par ligne, le dernier seul prend la largeur. */
  .page-app .tiles, .page-app .tiles.tiles--six,
  .page-app .tiles:has(> :nth-child(4):last-child),
  .page-app .tiles:has(> :nth-child(3):last-child),
  .page-app .tiles:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .page-app .tiles > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .page-app .tile { grid-template-columns: 34px minmax(0, 1fr); gap: 2px 10px; padding: 12px; border-radius: 14px; }
  .page-app .tile:not(:has(.tile__picto)) { grid-template-columns: minmax(0, 1fr); }
  .page-app .tile__picto { width: 34px; height: 34px; border-radius: 10px; }
  .page-app .tile__picto svg { width: 17px; height: 17px; }
  .page-app .tile__label { font-size: 12px; line-height: 16px; }
  .page-app .tile__value { font-size: 20px; line-height: 26px; }
  .page-app .tile__value.tile__value--texte { font-size: 13.5px; line-height: 18px; overflow-wrap: anywhere; }
  .page-app .tile__delta { font-size: 11px; line-height: 15px; }

  /* Inscrits : une fiche par adresse au lieu d'un tableau qui défile de côté. */
  .page-app .table--inscrits, .page-app .table--inscrits tbody { display: block; overflow: visible; }
  .page-app .table--inscrits thead { display: block; }
  .page-app .table--inscrits thead tr { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--filet); }
  .page-app .table--inscrits thead th { padding: 0; border: 0; }
  .page-app .table--inscrits thead th:nth-child(n+3) { display: none; }
  .page-app .table--inscrits tbody tr {
    display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; column-gap: 10px; row-gap: 2px;
    align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--filet);
  }
  .page-app .table--inscrits tbody tr:last-child { border-bottom: 0; }
  .page-app .table--inscrits tbody td { display: block; padding: 0; border: 0; min-width: 0; width: auto; }
  .page-app .table--inscrits tbody td.td-case { grid-column: 1; grid-row: 1 / span 3; align-self: start; padding-top: 2px; }
  .page-app .table--inscrits tbody td:nth-child(2) { grid-column: 2; grid-row: 1; font-size: 14px; font-weight: 700; color: var(--encre); overflow-wrap: anywhere; }
  .page-app .table--inscrits tbody td:nth-child(3) { grid-column: 2; grid-row: 2; font-size: 12px; color: var(--encre-3); }
  .page-app .table--inscrits tbody td:nth-child(3)::before { content: "Inscrit le "; }
  .page-app .table--inscrits tbody td:nth-child(4) { grid-column: 2; grid-row: 3; font-size: 12px; color: var(--encre-3); }
  .page-app .table--inscrits tbody td:nth-child(5) { grid-column: 3; grid-row: 1; justify-self: end; }
  .page-app .table--inscrits tbody td:nth-child(6) { grid-column: 3; grid-row: 2 / span 2; justify-self: end; align-self: end; text-align: right; }
  .page-app .table--inscrits tbody td[colspan] { grid-column: 1 / -1; }
  .page-app .table--inscrits .btn--sm { padding: 6px 10px; }
}
@media (max-width: 340px) {
  .page-app .tiles, .page-app .tiles.tiles--six,
  .page-app .tiles:has(> :nth-child(4):last-child),
  .page-app .tiles:has(> :nth-child(3):last-child),
  .page-app .tiles:has(> :nth-child(2):last-child) { grid-template-columns: minmax(0, 1fr); }
}
/* Téléphone couché : la barre ne reste pas collée, l'écran est trop bas. */
@media (max-width: 960px) and (orientation: landscape) and (max-height: 520px) {
  .page-app .topbar, .page-app .topbar.topbar--admin { position: static; }
}
@media (max-width: 760px) {
  /* Œil et menu des cartes : plus discrets sur une couverture de 160 px. */
  .page-app .cartecat__haut .oeil, .page-app .cartecat__haut .kebab { width: 34px; height: 34px; min-width: 34px; min-height: 34px; }
}
@media (max-width: 620px) {
  /* Statistiques par catalogue : le nom et les vues ; le détail s'ouvre d'un toucher sur la ligne. */
  .page-app .table-defile { overflow-x: visible; }
  .page-app .table.table--stats { display: table; width: 100%; overflow: visible; table-layout: fixed; }
  .page-app .table--stats th.table__num, .page-app .table--stats td.table__num { width: 86px; }
  .page-app .table--stats .statcat, .page-app .table--stats .statcat__t { min-width: 0; }
  .page-app .table--stats .statcat__t b { overflow-wrap: anywhere; }
  .page-app .table--stats th:nth-child(n+3), .page-app .table--stats td:nth-child(n+3) { display: none; }
  .page-app .table--stats th, .page-app .table--stats td { padding: 10px 14px; }
  .page-app .table--stats th.table__num { padding-right: 32px; }
  .page-app .table--stats td.table__num { white-space: nowrap; }
  .page-app .table--stats td.table__num::after { content: "›"; display: inline-block; width: 18px; text-align: right; color: var(--encre-4); font-weight: 500; font-size: 16px; line-height: 1; }
}
@media (max-width: 960px) {
  .page-app .table .chip { white-space: nowrap; }
}
@media (orientation: landscape) and (max-height: 520px) {
  /* Liseuse, téléphone couché : le volet de partage garde de la place pour son contenu. */
  body.lecture:not(.lecture--embed) .volet__tete { padding: 10px 16px; }
  body.lecture:not(.lecture--embed) .volet__corps { padding: 12px 16px; }
}

/* ------------------------------------------- site vitrine, téléphone (09/10)
   Sous 900 px le menu était masqué : plus aucun accès aux sections. L'en-tête
   de la landing (.site-head--menu, posé par publicHeader() quand il n'est pas
   compact) passe sur deux rangs — logo et boutons, puis le menu sur une seule
   ligne — et c'est ce second rang qui reste collé en haut au défilement :
   l'en-tête entier est collant, remonté de la hauteur de son premier rang
   (top: -var(--rang)), ce qui évite de sortir le menu de l'en-tête.
   Le seuil est à 960 px : entre 900 et 945 px, menu et boutons ne tenaient
   déjà plus sur un rang. Largeurs vérifiées de 320 à 960 px : le menu tient
   sur une ligne sans défilement (le défilement horizontal n'est qu'un filet
   de sécurité si un libellé s'allonge). */
@media (max-width: 960px) {
  .page-public .site-head.site-head--menu {
    --g: clamp(1rem, 4vw, 2rem);            /* la gouttière de <main> */
    --rang: 68px; --menu: 44px;
    display: grid; grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: var(--rang) var(--menu); align-items: center; gap: 0 10px;
    max-width: none; margin: 0; padding: 0;
    background: #FFFFFF; border-bottom: 1px solid var(--filet);
    position: sticky; top: calc(-1 * var(--rang)); z-index: 50;
  }
  .page-public .site-head--menu .brand { grid-area: 1 / 1; margin-left: max(var(--g), env(safe-area-inset-left)); }
  .page-public .site-head--menu .site-head__actions {
    grid-area: 1 / 2; justify-self: end; min-width: 0; gap: 8px;
    margin: 0 max(var(--g), env(safe-area-inset-right)) 0 0;
  }
  .page-public .site-head--menu .site-head__actions .btn { white-space: nowrap; }
  .page-public .site-head--menu .site-nav {
    grid-area: 2 / 1 / 3 / -1; display: flex; align-items: stretch; gap: 28px; margin: 0;
    height: var(--menu); border-top: 1px solid var(--filet);
    padding: 0 max(var(--g), env(safe-area-inset-right)) 0 max(var(--g), env(safe-area-inset-left));
    overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
    /* Son propre fond, au-dessus du rang des boutons : l'ombre turquoise du bouton
       ne déborde pas sur le menu une fois celui-ci collé. */
    position: relative; z-index: 1; background: #FFFFFF;
  }
  .page-public .site-head--menu .site-nav::-webkit-scrollbar { display: none; }
  .page-public .site-head--menu .site-nav a {
    flex: none; display: inline-flex; align-items: center; white-space: nowrap;
    font-size: 14px; line-height: 1; font-weight: 600; color: var(--encre-2);
  }
  .page-public .site-head--menu .site-nav a:hover { text-decoration: none; }
  /* Une ancre s'arrête sous le menu collé : le titre de la section vient une
     vingtaine de pixels sous la barre (la section porte déjà sa marge haute). */
  .page-public section[id] { scroll-margin-top: 30px; }
}
@media (max-width: 960px) and (hover: hover) {
  /* Pas de survol au doigt : l'entrée touchée resterait foncée après le défilement. */
  .page-public .site-head--menu .site-nav a:hover { color: var(--encre); }
}
@media (max-width: 960px) and (prefers-reduced-motion: no-preference) {
  :root:has(.site-head--menu) { scroll-behavior: smooth; }
}
@media (max-width: 900px) {
  /* Tablette debout : le texte d'abord, le dessin ensuite et à sa mesure
     (il passait en tête, sur toute la largeur). */
  .hero__art { order: 0; width: 100%; max-width: 30rem; margin: 0 auto; }
  /* Le dessin porte du vide en haut et en bas de son cadre (viewBox 420 × 340). */
  .hero__art svg { margin: -5% 0 -9%; }
}
/* Sous 760 px, les deux en-têtes publics partagent le gabarit du premier rang :
   celui qui porte le menu, et l'en-tête compact (connexion, pages légales, 404),
   dont les boutons passaient sous le logo. */
@media (max-width: 760px) {
  .page-public .site-head.site-head--menu { --g: 24px; --rang: 58px; }
  :is(.page-public, .page-auth) .site-head.site-head--compact {
    --g: 24px; --rang: 58px;
    flex-wrap: nowrap; gap: 10px; min-height: var(--rang);
    padding: 0 max(var(--g), env(safe-area-inset-right)) 0 max(var(--g), env(safe-area-inset-left));
  }
  :is(.page-public, .page-auth) :is(.site-head--menu, .site-head--compact) .brand { flex: none; }
  :is(.page-public, .page-auth) :is(.site-head--menu, .site-head--compact) .brand__logo { height: 30px; }
  :is(.page-public, .page-auth) :is(.site-head--menu, .site-head--compact) .site-head__actions .btn {
    padding: 8px 12px; font-size: 13px; line-height: 19.5px; border-radius: 11px; white-space: nowrap;
  }
  .page-public .site-head--menu .site-nav a { font-size: 13.5px; }
  .page-public section[id] { scroll-margin-top: 8px; }
}
@media (max-width: 480px) {
  /* Téléphone : les quatre entrées occupent la ligne, de bord à bord. */
  .page-public .site-head--menu .site-nav { justify-content: space-between; gap: 6px; }
  .page-public .site-head--menu .site-nav a { font-size: 13px; }
  /* « Se connecter » en simple lien : deux boutons pleins ne tiennent pas à côté du logo. */
  :is(.page-public, .page-auth) :is(.site-head--menu, .site-head--compact) .site-head__actions { gap: 4px; }
  :is(.page-public, .page-auth) :is(.site-head--menu, .site-head--compact) .site-head__actions .btn--ghost {
    background: none; border-color: transparent; box-shadow: none; padding: 8px; color: var(--encre-2);
  }
}
@media (max-width: 389px) {
  :is(.page-public, .page-auth) .site-head:is(.site-head--menu, .site-head--compact) { --rang: 54px; }
  :is(.page-public, .page-auth) :is(.site-head--menu, .site-head--compact) .brand__logo { height: 26px; }
  :is(.page-public, .page-auth) :is(.site-head--menu, .site-head--compact) .site-head__actions .btn { padding: 7px 10px; font-size: 12.5px; }
  :is(.page-public, .page-auth) :is(.site-head--menu, .site-head--compact) .site-head__actions .btn--ghost { padding: 7px 6px; }
}
@media (max-width: 359px) {
  :is(.page-public, .page-auth) .site-head:is(.site-head--menu, .site-head--compact) { --g: 16px; }
  .page-public .site-head--menu .site-nav a { font-size: 12.5px; }
}
@media (max-width: 339px) {
  :is(.page-public, .page-auth) .site-head:is(.site-head--menu, .site-head--compact) { --g: 14px; }
  :is(.page-public, .page-auth) :is(.site-head--menu, .site-head--compact) .brand__logo { height: 24px; }
  :is(.page-public, .page-auth) :is(.site-head--menu, .site-head--compact) .site-head__actions { gap: 2px; }
  :is(.page-public, .page-auth) :is(.site-head--menu, .site-head--compact) .site-head__actions .btn { padding: 7px 9px; font-size: 12px; }
  :is(.page-public, .page-auth) :is(.site-head--menu, .site-head--compact) .site-head__actions .btn--ghost { padding: 7px 5px; }
  .page-public .site-head--menu .site-nav a { font-size: 12px; }
}

/* Landing sur téléphone : ce que la revue du 09/10 a relevé. */
@media (max-width: 760px) {
  /* Titre : 42 px ne tient que sur un écran de 390 px ; en dessous il prenait six lignes. */
  .hero h1 { font-size: clamp(32px, 10.8vw, 42px); }
  .hero { padding-bottom: 8px; }
  .hero__actions .btn--lg { flex: 1 1 auto; justify-content: center; }

  /* Tarifs : la section avait gardé l'échelle de l'ordinateur. */
  .tarifs { padding: 58px 0 0; }
  .tarifs h2 { font-size: 28px; line-height: 1.06; letter-spacing: -.025em; margin-bottom: 12px; }
  .tarifs__intro { font-size: 13.5px; line-height: 1.6; margin-bottom: 28px; }
  .tarifs__grille { gap: 22px; max-width: none; }
  .tarif { border-radius: 20px; padding: 22px 20px 20px; }
  .tarif h3 { font-size: 22px; line-height: 1.15; letter-spacing: -.025em; margin: 0 0 6px; }
  .tarif__prix strong { font-size: 34px; }
  .tarif__prix span { font-size: 13.5px; }
  .tarif__an { font-size: 12.5px; margin: 2px 0 14px; }
  .tarif ul { gap: 7px; margin-bottom: 18px; }
  .tarif li { font-size: 13.5px; line-height: 1.45; padding-left: 22px; }
  .tarif .btn { padding: 11px 13px; font-size: 14px; line-height: 21px; border-radius: 13px; }
  .tarifs__note { font-size: 12.5px; line-height: 1.6; margin-top: 20px; }

  /* Questions : la seconde ligne d'une question s'aligne sur la première. */
  .faq summary { position: relative; list-style: none; padding-left: 20px; }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::before {
    content: ""; position: absolute; left: 1px; top: .42em;
    border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent var(--accent);
    transition: transform .15s ease;
  }
  .faq details[open] summary::before { transform: rotate(90deg); }
  .faq details p { padding-left: 20px; }
}

/* ------------------------------------------- pages du site vitrine (12/10)
   Fonctions, usages, tarifs, guide, FAQ, comparatif : lib/pages.php.
   Même matière que la landing (cartes blanches, filets bleutés, turquoise),
   un gabarit commun : fil d'Ariane, en-tête texte + dessin, encadré « En bref »,
   blocs texte / dessin alternés, questions, liens, appel final. */
.site-nav a[aria-current="page"] { color: var(--encre); box-shadow: inset 0 -2px 0 var(--accent); }
.card__lien { color: inherit; }
.card__lien:hover { color: var(--marine-clair); }
/* 13/10 : « .features p, .faq p { margin: 0 } » écrasait la marge : sélecteurs renforcés. */
.pg-suite, .steps .pg-suite, .features .pg-suite, .faq .pg-suite { text-align: center; margin: 2rem 0 0; font-weight: 700; font-size: .95rem; }
.tarifs .pg-suite { margin: 1.2rem 0 0; }

.pg .fil ol { list-style: none; margin: 0; padding: 1.1rem 0 0; display: flex; flex-wrap: wrap; gap: .35rem; font-size: .84rem; color: var(--encre-3); }
.pg .fil li + li::before { content: "›"; margin-right: .35rem; color: var(--encre-4); }
.pg .fil a { color: var(--encre-3); }
.pg .fil [aria-current] { color: var(--encre-2); font-weight: 600; }

.pg-hero {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center; padding: clamp(1.2rem, 3vw, 2.4rem) 0 clamp(1.5rem, 4vw, 2.8rem);
}
.pg-hero--seul { grid-template-columns: minmax(0, 46rem); }
.pg-hero h1 { font-size: clamp(1.9rem, 1.1rem + 2.3vw, 2.9rem); }
.pg-hero .lede { max-width: 48ch; }
.pg-hero .hero__actions { margin: 1.4rem 0 1rem; }
.pg-maj { font-size: .82rem; color: var(--encre-4); margin: 0; }

.pg-figure { margin: 0; }
.pg-figure .pg-svg { display: block; width: 100%; height: auto; border-radius: 18px; }
.pg-hero__art .pg-svg { filter: drop-shadow(0 24px 44px rgba(11, 47, 98, .16)); }
.pg-figure figcaption { font-size: .82rem; color: var(--encre-3); margin-top: .7rem; text-align: center; line-height: 1.45; }

.pg-resume {
  background: var(--surface); border: 1px solid var(--filet); border-left: 4px solid var(--accent);
  border-radius: var(--r-carte); padding: 1.2rem 1.4rem; box-shadow: var(--ombre-1);
  max-width: 56rem; margin: 0 auto clamp(1rem, 3vw, 2rem);
}
.pg-resume__titre { font-size: .76rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-fonce); margin: 0 0 .35rem; }
.pg-resume p:last-child { margin: 0; color: var(--encre-2); }

.pg-bloc { padding: clamp(1.6rem, 4vw, 3rem) 0; }
.pg-bloc__texte { max-width: 46rem; }
.pg-bloc:not(.pg-bloc--illu) .pg-bloc__texte { margin: 0 auto; }
.pg-bloc__texte p, .pg-bloc__texte li { color: var(--encre-2); }
.pg-bloc__texte code { background: var(--surface-2); border: 1px solid var(--filet); border-radius: 6px; padding: .05rem .35rem; font-size: .9em; }
.pg-bloc--illu { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.pg-bloc--inverse .pg-bloc__texte { order: 2; }
.pg-bloc--cartes > h2, .pg-bloc--table > h2, .pg-bloc--etapes > h2, .pg-liens > h2 { text-align: center; margin-bottom: 1.6rem; }

.pg-liste { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .6rem; }
.pg-liste li { position: relative; padding-left: 1.7rem; }
.pg-liste li::before {
  content: ""; position: absolute; left: 0; top: .55em; width: .7rem; height: .7rem; border-radius: var(--r-puce);
  background: var(--accent); box-shadow: 0 0 0 4px rgba(22, 214, 195, .18);
}

.pg-cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr)); gap: 1rem; }
.pg-cartes--liens { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .pg-cartes--liens { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pg-carte {
  display: grid; gap: .45rem; align-content: start;
  background: var(--surface); border: 1px solid var(--filet); border-radius: var(--r-carte);
  padding: 1.3rem 1.3rem 1.2rem; box-shadow: var(--ombre-1); color: var(--encre);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.pg-carte:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--ombre-2); border-color: var(--filet-fort); }
.pg-carte strong { font-size: 1.05rem; letter-spacing: -.015em; }
.pg-carte span:last-child { color: var(--encre-2); font-size: .93rem; line-height: 1.5; }
.pg-carte__picto {
  display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 12px;
  background: #E3FAF7; color: var(--accent-fonce); margin-bottom: .2rem;
}

.pg-table-boite { overflow-x: auto; border-radius: var(--r-carte); border: 1px solid var(--filet); background: var(--surface); box-shadow: var(--ombre-1); }
.pg-table { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 38rem; }
.pg-table th, .pg-table td { padding: .75rem .9rem; text-align: left; border-bottom: 1px solid var(--filet); vertical-align: top; }
.pg-table thead th { background: var(--surface-2); font-size: .86rem; color: var(--encre); white-space: nowrap; }
.pg-table thead small { display: block; font-weight: 600; color: var(--encre-3); font-size: .78rem; }
.pg-table tbody th { font-weight: 600; color: var(--encre); width: 30%; }
.pg-table td { color: var(--encre-2); }
.pg-table tbody tr:last-child > * { border-bottom: 0; }
.pg-table--comparatif { min-width: 52rem; }
.pg-table--comparatif tbody th { width: 16%; }
.pg-table .pg-table__folyo { background: rgba(22, 214, 195, .08); color: var(--encre); font-weight: 600; }
.pg-oui { color: var(--succes); font-weight: 700; }
.pg-non { color: var(--encre-4); }
.pg-note { font-size: .84rem; color: var(--encre-3); margin: .9rem auto 0; max-width: 56rem; text-align: center; line-height: 1.55; }

.pg-etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.pg-etape {
  background: var(--surface); border: 1px solid var(--filet); border-radius: var(--r-carte);
  padding: 1.5rem 1.4rem; box-shadow: var(--ombre-1); scroll-margin-top: 90px;
}
.pg-etape--illu { display: grid; grid-template-columns: 1.1fr .9fr; gap: 1.6rem; align-items: center; }
.pg-etape__texte p { color: var(--encre-2); margin: 0; }
.pg-etape h3 { margin-bottom: .4rem; }

.pg-faq h2 { text-align: center; }
.pg-liens { padding: clamp(1.6rem, 4vw, 3rem) 0 0; }
.pg .cta { margin-top: clamp(2rem, 5vw, 3.5rem); }

/* Pied : le plan du site, en trois colonnes. */
.site-foot__plan { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem 2rem; padding: .4rem 0 .8rem; }
.site-foot__titre { font-weight: 800; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; color: var(--encre); margin: 0 0 .5rem; }
.site-foot__plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.site-foot__plan a { color: var(--encre-2); font-size: .9rem; }

@media (max-width: 900px) {
  .pg-hero, .pg-bloc--illu, .pg-etape--illu { grid-template-columns: minmax(0, 1fr); }
  .pg-hero__art { max-width: 34rem; width: 100%; margin: 0 auto; }
  .pg-bloc--inverse .pg-bloc__texte { order: 0; }
  .pg-bloc__art, .pg-etape__art { max-width: 34rem; width: 100%; margin: 0 auto; }
}
@media (max-width: 760px) {
  .pg .fil ol { padding-top: 14px; font-size: 12px; }
  .pg-hero { padding: 18px 0 20px; gap: 26px; }
  .pg-hero .eyebrow { font-size: 10px; letter-spacing: .11em; margin: 0; }
  .pg-hero h1 { font-size: clamp(28px, 8.4vw, 36px); line-height: 1.06; letter-spacing: -.03em; margin: 14px 0 0; }
  .pg-hero .lede { font-size: 15.5px; line-height: 1.6; margin: 16px 0 0; }
  .pg-hero .hero__actions { margin: 22px 0 14px; }
  .pg-maj { font-size: 12px; }
  .pg-resume { padding: 16px 18px; border-radius: 16px; }
  .pg-resume p:last-child { font-size: 14px; line-height: 1.6; }
  .pg-bloc { padding: 34px 0 0; }
  .pg-bloc h2, .pg-liens h2, .pg-faq h2 { font-size: 24px; line-height: 1.1; letter-spacing: -.025em; margin-bottom: 14px; }
  .pg-bloc__texte p, .pg-bloc__texte li, .pg-etape__texte p { font-size: 14px; line-height: 1.65; }
  .pg-liste li { padding-left: 1.4rem; }
  .pg-liste li::before { width: .55rem; height: .55rem; top: .6em; }
  .pg-cartes { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .pg-carte { padding: 16px 18px; border-radius: 16px; }
  .pg-table { font-size: 13px; }
  .pg-etape { padding: 18px; border-radius: 16px; }
  .pg-etape h3 { font-size: 19px; }
  .pg-figure figcaption { font-size: 12px; }
  .pg-suite { font-size: 13.5px; line-height: 1.6; }
  .site-foot__plan { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-foot__plan > div:last-child { grid-column: 1 / -1; }
}

/* Bandeau de consentement (12/10) — pages publiques de Folyo seulement
   (consentement.js). Refuser et Accepter ont exactement le même poids. */
.bandeau-cookies {
  position: fixed; z-index: 200; left: 50%; bottom: 16px; transform: translateX(-50%);
  width: min(44rem, calc(100% - 24px)); display: flex; gap: 1rem; align-items: center;
  background: var(--surface); border: 1px solid var(--filet-fort); border-radius: var(--r-carte);
  padding: 1rem 1.1rem; box-shadow: var(--ombre-2);
}
.bandeau-cookies p { margin: 0; font-size: .88rem; line-height: 1.5; color: var(--encre-2); }
.bandeau-cookies__choix { display: flex; gap: .5rem; flex: none; }
.bandeau-cookies__choix .btn { min-width: 6.5rem; justify-content: center; }
@media (max-width: 620px) {
  .bandeau-cookies { flex-direction: column; align-items: stretch; bottom: 10px; padding: 14px; }
  .bandeau-cookies p { font-size: 13px; }
  .bandeau-cookies__choix .btn { flex: 1; }
}

/* Pages du site, lot 2 (13/10) : lien « En savoir plus » sous un bloc, blocs de l'accueil. */
.pg-plus { margin: .4rem 0 0; font-weight: 700; }
.pg-plus a { color: var(--marine-clair); }
.pg-bloc--accueil { padding: clamp(1.6rem, 4vw, 3rem) 0; }
.pg-bloc--accueil .eyebrow { margin-bottom: .4rem; }
.site-foot__plan { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 760px) {
  .pg-cartes--liens { grid-template-columns: minmax(0, 1fr); }
  .site-foot__plan { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-foot__plan > div:last-child { grid-column: auto; }
  .pg-bloc--accueil { padding: 40px 0 0; }
  .pg-bloc--accueil h2 { font-size: 26px; line-height: 1.1; letter-spacing: -.025em; }
}

/* ------------------------------------------------ héros de l'accueil : diapositives (14/10)
   Deux dessins (formulaire sur la liseuse, puis inscription → e-mail) superposés dans la même
   case de grille, en fondu toutes les 7 s. Pas de script : la landing n'en charge aucun.
   Survol = pause. Mouvement réduit : bascule sans fondu. */
.hero-diapos { display: grid; position: relative; }
.hero-diapo { grid-area: 1 / 1; animation: hero-diapo 14s infinite; }
.hero-diapo--2 { animation-delay: -7s; }
.hero-diapos:hover .hero-diapo { animation-play-state: paused; }
.hero__art .hero-svg { display: block; width: 100%; height: auto; filter: none; margin: 0; }
@keyframes hero-diapo {
  0%, 46% { opacity: 1; visibility: visible; }
  50%, 96% { opacity: 0; visibility: hidden; }
  100% { opacity: 1; visibility: visible; }
}
.hero-diapos__points { display: flex; justify-content: center; gap: 2px; margin-top: 8px; }
/* Chaque point est un bouton (label du bouton radio) : zone de clic de 32 px, pastille dessinée par ::before. */
.hero-diapos__points label { display: grid; place-items: center; min-width: 32px; height: 32px; cursor: pointer; border-radius: var(--r-puce); }
.hero-diapos__points label::before { content: ""; display: block; width: 8px; height: 8px; border-radius: var(--r-puce); background: var(--filet-fort); animation: hero-point 14s infinite; transition: width .25s, background .25s; }
.hero-diapos__points label:nth-child(2)::before { animation-delay: -7s; }
.hero-diapos__points label:hover::before { background: var(--encre-4); }
@keyframes hero-point {
  0%, 46% { width: 24px; background: var(--accent); }
  50%, 96% { width: 8px; background: var(--filet-fort); }
  100% { width: 24px; background: var(--accent); }
}
.hero-diapos:hover .hero-diapos__points label::before { animation-play-state: paused; }
.hero-diapos__choix { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.hero-diapos:has(.hero-diapos__choix:focus-visible) .hero-diapos__points label { outline: none; }
.hero-diapos:has(#hero-diapo-1:focus-visible) label[for="hero-diapo-1"],
.hero-diapos:has(#hero-diapo-2:focus-visible) label[for="hero-diapo-2"] { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Image choisie au clic : le défilement s'arrête sur elle. */
.hero-diapos:has(.hero-diapos__choix:checked) .hero-diapo { animation: none; opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s; }
.hero-diapos:has(.hero-diapos__choix:checked) .hero-diapos__points label::before { animation: none; width: 8px; background: var(--filet-fort); }
.hero-diapos:has(#hero-diapo-1:checked) .hero-diapo--1,
.hero-diapos:has(#hero-diapo-2:checked) .hero-diapo--2 { opacity: 1; visibility: visible; }
.hero-diapos:has(#hero-diapo-1:checked) label[for="hero-diapo-1"]::before,
.hero-diapos:has(#hero-diapo-2:checked) label[for="hero-diapo-2"]::before { width: 24px; background: var(--accent); }
/* Héros : animations dans les dessins (14/10). Image 1 seulement : l'adresse se tape lettre à lettre,
   « Je m'inscris » s'enfonce, la pastille « Inscription confirmée » apparaît. Image 2 : seuls les tirets de
   la flèche avancent. Même cycle de 14 s que les diapositives (scène jouée pendant les 7 s d'affichage).
   Saisie : un cache de la couleur du champ recule, par sauts, jusqu'au bord exact de chaque lettre
   (largeurs de « c », « ca », « cam »… mesurées en Plus Jakarta Sans 600 à 12 px) et le curseur le suit.
   L'état de base est l'état final : sans animation (mouvement réduit), le dessin est complet. */
.hero-svg .ha-anim { animation-duration: 14s; animation-iteration-count: infinite; animation-fill-mode: both; transform-box: fill-box; }
.hero-diapos:hover .ha-anim, .hero-diapos:hover .ha-fleche { animation-play-state: paused; }
/* Image choisie au clic : la scène se rejoue en boucle sur 7 s. */
.hero-diapos:has(.hero-diapos__choix:checked) .ha-anim { animation-duration: 7s; animation-delay: 0s; }
.ha-cache { transform-origin: right center; transform: scaleX(0.5009); animation-name: ha-saisie; animation-timing-function: step-end; }
@keyframes ha-saisie {
  0% { transform: scaleX(1); }
  5.0% { transform: scaleX(0.9690); }
  6.0% { transform: scaleX(0.9392); }
  7.0% { transform: scaleX(0.8914); }
  8.0% { transform: scaleX(0.8789); }
  9.0% { transform: scaleX(0.8664); }
  10.0% { transform: scaleX(0.8534); }
  11.0% { transform: scaleX(0.8220); }
  12.0% { transform: scaleX(0.7737); }
  13.0% { transform: scaleX(0.7427); }
  14.0% { transform: scaleX(0.7159); }
  15.0% { transform: scaleX(0.6845); }
  16.0% { transform: scaleX(0.6371); }
  17.0% { transform: scaleX(0.6022); }
  18.0% { transform: scaleX(0.5897); }
  19.0% { transform: scaleX(0.5578); }
  20.0% { transform: scaleX(0.5401); }
  21.0% { transform: scaleX(0.5194); }
  22.0% { transform: scaleX(0.5009); }
  100% { transform: scaleX(0.5009); }
}
.ha-curseur { opacity: 0; animation-name: ha-curseur; animation-timing-function: step-end; }
@keyframes ha-curseur {
  0% { transform: translateX(-115.8px); opacity: 1; }
  5.0% { transform: translateX(-108.6px); opacity: 1; }
  6.0% { transform: translateX(-101.7px); opacity: 1; }
  7.0% { transform: translateX(-90.6px); opacity: 1; }
  8.0% { transform: translateX(-87.7px); opacity: 1; }
  9.0% { transform: translateX(-84.8px); opacity: 1; }
  10.0% { transform: translateX(-81.8px); opacity: 1; }
  11.0% { transform: translateX(-74.5px); opacity: 1; }
  12.0% { transform: translateX(-63.3px); opacity: 1; }
  13.0% { transform: translateX(-56.1px); opacity: 1; }
  14.0% { transform: translateX(-49.9px); opacity: 1; }
  15.0% { transform: translateX(-42.6px); opacity: 1; }
  16.0% { transform: translateX(-31.6px); opacity: 1; }
  17.0% { transform: translateX(-23.5px); opacity: 1; }
  18.0% { transform: translateX(-20.6px); opacity: 1; }
  19.0% { transform: translateX(-13.2px); opacity: 1; }
  20.0% { transform: translateX(-9.1px); opacity: 1; }
  21.0% { transform: translateX(-4.3px); opacity: 1; }
  22.0% { transform: translateX(0.0px); opacity: 1; }
  24% { transform: none; opacity: 0; }
  25.5% { transform: none; opacity: 1; }
  27% { transform: none; opacity: 0; }
  100% { transform: none; opacity: 0; }
}
.ha-bouton { transform-origin: center; animation-name: ha-bouton; }
@keyframes ha-bouton {
  0%, 25% { transform: none; }
  26.5% { transform: scale(.94); }
  28%, 100% { transform: none; }
}
.ha-apparait { animation-name: ha-apparait; }
@keyframes ha-apparait {
  0%, 28% { opacity: 0; transform: translateY(12px); }
  32%, 100% { opacity: 1; transform: none; }
}
.ha-fleche { animation: ha-tirets .9s linear infinite; }
@keyframes ha-tirets { to { stroke-dashoffset: -12; } }
@media (prefers-reduced-motion: reduce) {
  .hero-svg .ha-anim, .hero-svg .ha-fleche { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-diapo, .hero-diapos__points label::before { animation-timing-function: steps(1, end); transition: none; }
}
@media (max-width: 900px) {
  .hero__art.hero-diapos { max-width: 32rem; }
}

/* ==========================================================================
   Annuaire public des catalogues (séance R, 14/10/2026) — lib/annuaire.php,
   annuaire.js. Maquettes validées le 14/10 : cartes blanches à couverture au
   format réel, pastilles « Nouveau » / « Plus que N jours », recherche sur
   toute la largeur au-dessus des secteurs.
   ========================================================================== */
.annu { max-width: var(--max); margin: 0 auto; padding: 0 1.2rem 3rem; }
.annu .fil ol { list-style: none; margin: 0; padding: 1.1rem 0 0; display: flex; flex-wrap: wrap; gap: .35rem; font-size: .84rem; color: var(--encre-3); }
.annu .fil li + li::before { content: "›"; margin-right: .35rem; color: var(--encre-4); }
.annu .fil a { color: var(--encre-3); }
.annu .fil [aria-current] { color: var(--encre-2); font-weight: 600; }

.annu-tete { padding: 1.3rem 0 1.2rem; }
.annu-tete h1 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.4rem); line-height: 1.12; letter-spacing: -.03em; margin: 0 0 .45rem; }
.annu-tete p { margin: 0; color: var(--encre-2); max-width: 62ch; }
.annu-tete--ter { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; }
.annu-ters { display: flex; gap: .3rem; background: var(--surface); border: 1px solid var(--filet); border-radius: var(--r-puce); padding: 4px; }
.annu-ters a { padding: .38rem .8rem; border-radius: var(--r-puce); font-size: .86rem; font-weight: 700; color: var(--encre-2); white-space: nowrap; }
.annu-ters a:hover { text-decoration: none; background: var(--surface-2); }
.annu-ters a[aria-current] { background: var(--marine); color: #fff; }

/* Recherche sur toute la largeur, puis les secteurs (retouche de Maxime). */
.annu-barre {
  display: grid; gap: .7rem; padding: .8rem; margin-bottom: 1.4rem;
  background: var(--surface); border: 1px solid var(--filet); border-radius: var(--r-carte); box-shadow: var(--ombre-1);
}
.annu-cherche {
  display: flex; align-items: center; gap: .55rem; margin: 0; padding: 0 .9rem;
  background: var(--surface-2); border: 1px solid var(--filet); border-radius: var(--r-champ); cursor: text;
}
.annu-cherche:focus-within { outline: 3px solid rgba(22, 214, 195, .45); outline-offset: 1px; }
.annu-cherche svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--encre-4); stroke-width: 2.2; stroke-linecap: round; }
.annu-cherche input { flex: 1; min-width: 0; border: 0; background: transparent; padding: .72rem 0; font: inherit; font-size: 16px; color: var(--encre); outline: none; box-shadow: none; margin: 0; }
.annu-puces { display: flex; flex-wrap: wrap; gap: .4rem; }
.annu-puce {
  display: inline-flex; align-items: center; gap: .35rem; padding: .38rem .78rem; font-size: .86rem; font-weight: 600;
  color: var(--encre-2); background: var(--surface-2); border: 1px solid var(--filet); border-radius: var(--r-puce); white-space: nowrap;
}
.annu-puce:hover { text-decoration: none; border-color: var(--filet-fort); }
.annu-puce small { font-size: .74rem; opacity: .7; font-variant-numeric: tabular-nums; }
.annu-puce--on { background: var(--marine); border-color: var(--marine); color: #fff; }

.annu-sec { margin-top: 1.6rem; }
.annu-sh { display: flex; align-items: baseline; justify-content: space-between; gap: .4rem 1rem; flex-wrap: wrap; margin: 0 0 .8rem; }
.annu-sh h2 { font-size: 1.2rem; letter-spacing: -.02em; margin: 0; }
.annu-sh small { font-size: .82rem; font-weight: 600; color: var(--encre-3); }
.annu-sh a { font-size: .86rem; font-weight: 700; color: var(--accent-fonce); }
.annu-vide { color: var(--encre-3); background: var(--surface); border: 1px dashed var(--filet-fort); border-radius: var(--r-carte); padding: 1rem 1.2rem; margin: 0; }

/* Grilles de cartes : 2 → 5 colonnes selon la place ; rangées qui défilent sur téléphone. */
.annu-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 1.1rem .9rem; align-items: stretch; }
.annu-grille--cinq { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.annu-rang { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 1.1rem .9rem; align-items: stretch; }

.annu-k {
  display: flex; flex-direction: column; min-width: 0; color: inherit;
  background: var(--surface); border: 1px solid var(--filet); border-radius: 14px; overflow: hidden;
  box-shadow: var(--ombre-1); transition: transform .14s, box-shadow .14s;
}
a.annu-k:hover { text-decoration: none; transform: translateY(-3px); box-shadow: var(--ombre-2); }
/* 18/10 : tous formats (A4, carré, italienne, dépliant) — la couverture est posée entière, centrée,
   avec son ombre, sur un présentoir de même taille pour toutes les cartes. */
.annu-k__cv { display: flex; align-items: center; justify-content: center; padding: 12px; aspect-ratio: 1 / 1.25;
  background: linear-gradient(180deg, #F3F7FC 0%, #E6EEF8 100%); border-bottom: 1px solid var(--filet); overflow: hidden; }
.annu-k__cv img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain;
  border-radius: 3px; box-shadow: 0 1px 2px rgba(11, 47, 98, .14), 0 8px 18px -6px rgba(11, 47, 98, .28); }
.annu-k__b { flex: 1; align-content: start; }
.annu-k__cv--vide { align-items: center; background: linear-gradient(150deg, #123A73, #0B2F62); }
.annu-k__cv--vide span { font-size: 1.8rem; font-weight: 800; color: rgba(255, 255, 255, .5); }
.annu-k__b { display: grid; gap: 1px; padding: .55rem .7rem .7rem; min-width: 0; }
.annu-pas {
  justify-self: start; margin-bottom: .2rem; font-size: .68rem; font-weight: 800; letter-spacing: .03em;
  border-radius: var(--r-puce); padding: .12rem .5rem; background: var(--surface-2); color: var(--encre-2);
}
.annu-pas--neuf { background: var(--accent); color: var(--sur-accent); }
.annu-pas--fin { background: #FBF1DC; color: #7A5208; }
.annu-k__e { font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--encre-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.annu-k__t { font-size: .9rem; font-weight: 700; line-height: 1.28; color: var(--encre); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(2em * 1.28); }
.annu-k__d { font-size: .78rem; font-weight: 600; color: var(--encre-4); margin-top: .1rem; }
.annu-k__x { font-weight: 700; color: var(--encre-3); white-space: nowrap; }
.annu-k--passe .annu-k__cv img { filter: saturate(.25) brightness(1.05); opacity: .7; }
.annu-k--passe { box-shadow: none; }

/* À la une */
.annu-une {
  display: grid; grid-template-columns: minmax(0, 210px) 1fr; overflow: hidden; margin-bottom: .4rem;
  background: var(--surface); border: 1px solid var(--filet); border-radius: var(--r-carte); box-shadow: var(--ombre-1);
}
.annu-une__cv { display: flex; align-items: center; justify-content: center; padding: 16px; background: linear-gradient(180deg, #F3F7FC 0%, #E6EEF8 100%); }
.annu-une__cv img { display: block; width: auto; height: auto; max-width: 100%; max-height: 420px;
  border-radius: 3px; box-shadow: 0 1px 2px rgba(11, 47, 98, .14), 0 10px 22px -8px rgba(11, 47, 98, .3); }
.annu-une__b { padding: 1.4rem 1.6rem; display: flex; flex-direction: column; gap: .45rem; justify-content: center; min-width: 0; }
.annu-une__b h2 { font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem); line-height: 1.18; margin: 0; }
.annu-une__b p { margin: 0; color: var(--encre-2); font-size: .95rem; }
.annu-une__b .btn { align-self: flex-start; margin-top: .3rem; }
.annu-une__tag { align-self: flex-start; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--encre-3); border: 1px solid var(--filet-fort); border-radius: 4px; padding: .05rem .4rem; }

.annu-pagin { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: center; margin-top: 1.4rem; }
.annu-pagin a { min-width: 2.4rem; text-align: center; padding: .45rem .7rem; border-radius: 10px; background: var(--surface); border: 1px solid var(--filet); font-weight: 700; color: var(--encre-2); }
.annu-pagin a[aria-current] { background: var(--marine); border-color: var(--marine); color: #fff; }

.annu-ensl { display: flex; flex-wrap: wrap; gap: .5rem; }
.annu-ensl a { display: inline-flex; align-items: center; gap: .5rem; padding: .25rem .8rem .25rem .25rem; background: var(--surface); border: 1px solid var(--filet); border-radius: var(--r-puce); font-size: .88rem; font-weight: 700; color: var(--encre); }
.annu-ensl a:hover { text-decoration: none; border-color: var(--filet-fort); }
.annu-ensl img, .annu-ensl i { width: 28px; height: 28px; border-radius: 50%; object-fit: contain; background: var(--surface-2); flex: none; }
.annu-ensl i { display: grid; place-items: center; font-style: normal; font-size: .68rem; font-weight: 800; color: #fff; background: var(--marine-clair); }

/* Accueil de l'annuaire : les territoires */
.annu-terrs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.annu-terr {
  display: flex; flex-direction: column; justify-content: space-between; gap: 1rem; min-height: 11rem; padding: 1.1rem 1.2rem;
  background: var(--surface); border: 1px solid var(--filet); border-radius: var(--r-carte); box-shadow: var(--ombre-1); color: inherit;
  transition: transform .14s, box-shadow .14s;
}
.annu-terr:hover { text-decoration: none; transform: translateY(-3px); box-shadow: var(--ombre-2); }
.annu-terr--on { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(22, 214, 195, .2); }
.annu-terr h2 { font-size: 1.35rem; margin: 0; }
.annu-terr p { margin: .15rem 0 0; color: var(--encre-2); font-size: .93rem; }
.annu-terr small { display: block; margin-top: .2rem; color: var(--encre-4); font-weight: 600; font-size: .8rem; }
.annu-terr__pile { display: flex; align-items: flex-end; min-height: 4.4rem; }
.annu-terr__pile img { width: 62px; height: auto; border-radius: 5px; box-shadow: 0 8px 18px -10px rgba(11, 47, 98, .7); background: #fff; }
.annu-terr__pile img + img { margin-left: -22px; }
.annu-memo { font-size: .85rem; color: var(--encre-3); margin: .8rem 0 0; }

/* Appel aux enseignes et classement */
.annu-cta {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1rem 2rem; margin-top: 2.4rem;
  padding: 1.4rem 1.6rem; background: var(--marine); color: #fff; border-radius: var(--r-carte);
}
.annu-cta h2 { color: #fff; font-size: 1.2rem; margin: 0 0 .25rem; }
.annu-cta p { margin: 0; color: #C9DBEE; font-size: .93rem; }
.annu-cta__a { display: flex; flex-wrap: wrap; gap: .6rem; }
.btn--blanc { background: #fff; color: var(--marine); border: 1px solid #fff; }
.btn--blanc:hover { background: var(--surface-2); color: var(--marine); }
.annu-classement { margin-top: 1.2rem; font-size: .88rem; color: var(--encre-3); }
.annu-classement summary { cursor: pointer; font-weight: 700; color: var(--encre-2); }
.annu-classement p { margin: .5rem 0 0; max-width: 80ch; }

/* Fiche d'une enseigne */
.annu-ens {
  display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: center; margin-top: 1.1rem; padding: 1.2rem 1.3rem;
  background: var(--surface); border: 1px solid var(--filet); border-radius: var(--r-carte); box-shadow: var(--ombre-1);
}
.annu-ens__logo { width: 72px; height: 72px; border-radius: 18px; overflow: hidden; display: grid; place-items: center; background: var(--marine-clair); }
.annu-ens__logo img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.annu-ens__logo span { font-size: 1.4rem; font-weight: 800; color: #fff; }
.annu-ens h1 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2rem); margin: 0; line-height: 1.15; letter-spacing: -.025em; }
.annu-ens__l { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin-top: .3rem; font-size: .88rem; color: var(--encre-2); }
.annu-ens__l a { font-weight: 700; }
.annu-ens__d { margin: .5rem 0 0; color: var(--encre-2); font-size: .93rem; max-width: 70ch; }
.annu-mag { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .5rem; margin-top: .8rem; }
.annu-mag div { display: flex; justify-content: space-between; gap: .8rem; padding: .55rem .8rem; background: var(--surface); border: 1px solid var(--filet); border-radius: 12px; font-size: .88rem; }
.annu-mag span { color: var(--encre-4); text-align: right; }

/* Pages en prose : publier, signaler */
.annu-deux { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.annu-carte { background: var(--surface); border: 1px solid var(--filet); border-radius: var(--r-carte); box-shadow: var(--ombre-1); padding: 1.3rem 1.4rem; }
.annu-carte h2 { font-size: 1.2rem; margin: 0 0 .6rem; }
.annu-carte ol { margin: 0 0 1rem; padding-left: 1.2rem; color: var(--encre-2); }
.annu-carte ol li { margin-bottom: .35rem; }
.annu-carte p { color: var(--encre-2); }
.annu-aide { font-size: .85rem; color: var(--encre-3); }
.annu-signal { max-width: 560px; margin: 1.2rem auto 0; }
.annu-signal h1 { font-size: 1.5rem; margin: 0 0 .3rem; }
.annu-signal form { display: grid; gap: .5rem; }
.annu-signal textarea, .annu-signal input[type="email"] { font-size: 16px; }
.annu-signal .btn { justify-self: start; margin-top: .5rem; }
.annu-motifs { border: 0; padding: 0; margin: .4rem 0; display: grid; gap: .35rem; }
.annu-motifs legend { font-weight: 700; margin-bottom: .3rem; }
.annu-piege { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* Accueil de folyo.fr : « Les catalogues du moment » */
.annu-accueil { max-width: var(--max); margin: 0 auto; padding: 48px 1.2rem 0; }
.annu-accueil .annu-sh h2 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem); }
.annu-accueil__p { margin: -.3rem 0 1rem; color: var(--encre-2); }

@media (max-width: 900px) {
  .annu-grille--cinq { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .annu-grille--cinq > :nth-child(n+4) { display: none; }
  .annu-terrs, .annu-deux { grid-template-columns: 1fr; }
  .annu-terr { min-height: 0; flex-direction: row; align-items: center; }
  .annu-cta { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .annu { padding: 0 16px 2.4rem; }
  .annu-accueil { padding: 36px 16px 0; }
  .annu-tete--ter { align-items: flex-start; }
  .annu-ters { width: 100%; }
  .annu-ters a { flex: 1; text-align: center; padding: .38rem .4rem; font-size: .82rem; }
  .annu-puces { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -.8rem; padding: 0 .8rem 2px; }
  .annu-puces::-webkit-scrollbar { display: none; }
  .annu-grille, .annu-grille--cinq { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem .7rem; }
  .annu-grille--cinq > :nth-child(n+4) { display: flex; }
  .annu-grille--cinq > :nth-child(n+5) { display: none; }
  /* Rangées qui défilent de côté sur téléphone (maquette). */
  .annu-rang { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 42%; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 4px; }
  .annu-rang::-webkit-scrollbar { display: none; }
  .annu-une { grid-template-columns: 38% 1fr; }
  .annu-une__b { padding: .9rem 1rem; gap: .3rem; }
  .annu-une__b p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: .85rem; }
  .annu-ens { grid-template-columns: auto 1fr; padding: 1rem; gap: .8rem; }
  .annu-ens__logo { width: 56px; height: 56px; border-radius: 14px; }
  .annu-cta { padding: 1.1rem 1.1rem; }
  .annu-cta__a .btn { flex: 1 1 auto; }
}

/* Liseuse ouverte depuis l'annuaire : lien de retour, bandeau de l'enseigne. */
.lis__retour { display: inline-flex; align-items: center; gap: .35rem; flex: none; order: -1; padding: .35rem .6rem; border-radius: 9px; color: var(--accent); font-weight: 700; font-size: .85rem; white-space: nowrap; }
.lis__retour:hover { text-decoration: none; background: rgba(255, 255, 255, .08); }
.lis__retour em { font-style: normal; }
.lis__annu {
  flex: none; display: flex; align-items: center; gap: .5rem 1.2rem; flex-wrap: wrap; padding: .5rem .9rem;
  background: #0B2F62; border-top: 1px solid rgba(255, 255, 255, .1); font-size: .82rem; color: rgba(230, 239, 250, .85);
}
.lis__annu a { color: #fff; }
.lis__annu-l { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.lis__annu-l a { font-weight: 700; }
.lis__annu-autres { display: flex; align-items: center; gap: .6rem; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.lis__annu-autres::-webkit-scrollbar { display: none; }
.lis__annu-aussi { flex: none; color: rgba(230, 239, 250, .65); }
.lis__annu-autres a { display: inline-flex; align-items: center; gap: .4rem; flex: none; font-weight: 700; white-space: nowrap; }
.lis__annu-autres img { width: 22px; height: 31px; object-fit: cover; border-radius: 3px; background: #fff; }
.lis__annu-sig { margin-left: auto; color: rgba(230, 239, 250, .6) !important; font-size: .76rem; }
.lis--plein .lis__annu, .lis--pivot .lis__annu, :root:fullscreen .lis__annu { display: none; }
@media (max-width: 760px) {
  .lis__retour { padding: .3rem .4rem; }
  .lis__retour em { display: none; }
  .lis__annu { padding: .4rem .7rem; gap: .3rem .8rem; }
  .lis__annu-aussi { display: none; }
}
@media (orientation: landscape) and (max-height: 520px) { body:not(.lecture--embed) .lis__annu { display: none; } }

/* Espace client : fiche de l'enseigne, case de la fiche du catalogue */
.annu-champ { margin-top: .9rem; }
.annu-champ > .label, .annu-bloc__det > .label { display: block; font-size: .86rem; font-weight: 700; color: var(--encre-2); margin: 0 0 .35rem; }
.cbxs { display: flex; flex-wrap: wrap; gap: .4rem; }
.cbx { display: inline-flex; align-items: center; gap: .4rem; margin: 0; padding: .32rem .75rem .32rem .55rem; border: 1px solid var(--filet); border-radius: var(--r-puce); font-size: .86rem; font-weight: 700; color: var(--encre-2); background: var(--surface); cursor: pointer; }
.cbx input { width: auto; margin: 0; accent-color: var(--accent); }
.cbx:has(input:checked) { border-color: var(--accent); background: rgba(22, 214, 195, .1); color: var(--encre); }
.annu-mags { display: grid; gap: .4rem; margin-bottom: .45rem; }
.annu-mags__l { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: .4rem; align-items: center; }
.annu-mags__l input { margin: 0; }
.annu-logo { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.annu-logo img, .annu-logo__vide { width: 56px; height: 56px; border-radius: 14px; object-fit: contain; background: var(--surface-2); border: 1px solid var(--filet); }
.annu-logo__vide { display: grid; place-items: center; font-weight: 800; color: #fff; background: var(--marine-clair); border: 0; }
.annu-logo label.btn { margin: 0; cursor: pointer; }
.annu-etat { margin: .7rem 0 0; padding: .6rem .8rem; border-radius: 12px; font-size: .86rem; line-height: 1.45; background: var(--surface-2); color: var(--encre-2); }
.annu-etat--att { background: #FBF1DC; color: #7A5208; }
.annu-etat--ok { background: #E3F6EE; color: #0C6E4C; }
.annu-etat--non { background: #FDECEA; color: #7A1F16; }
.annu-bloc { margin-top: 1.2rem; padding: .9rem 1rem 1rem; border: 1px solid var(--filet); border-radius: 14px; background: var(--surface-2); }
.annu-bloc .case { margin-top: .2rem; }
.annu-bloc__titre { margin: 0 0 .4rem; font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--encre-3); }
.annu-bloc__lien { color: var(--encre-4); font-weight: 600; }
.annu-bloc__det { margin-top: .7rem; }
@media (max-width: 620px) { .annu-mags__l { grid-template-columns: 1fr 1fr; } .annu-mags__l .btn { grid-column: 1 / -1; justify-self: start; } }

/* Administration → Annuaire */
.annu-onglets { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.annu-onglet { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .9rem; border-radius: var(--r-puce); border: 1px solid var(--filet); background: var(--surface); font: inherit; font-size: .88rem; font-weight: 700; color: var(--encre-2); cursor: pointer; }
.annu-onglet small { font-size: .75rem; opacity: .7; }
.annu-onglet--on { background: var(--marine); border-color: var(--marine); color: #fff; }
.annu-lg { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: .8rem; align-items: center; padding: .7rem 0; border-top: 1px solid var(--filet); }
.annu-lg:first-child { border-top: 0; }
.annu-lg--sig { grid-template-columns: minmax(0, 1fr) auto; }
.annu-lg--fait { opacity: .6; }
.annu-lg__cv { width: 48px; aspect-ratio: 1 / 1.4142; border-radius: 4px; overflow: hidden; background: var(--surface-2); display: grid; place-items: center; }
.annu-lg__cv img { width: 100%; height: 100%; object-fit: contain; }
.annu-lg__b { display: grid; gap: .15rem; min-width: 0; font-size: .86rem; color: var(--encre-3); }
.annu-lg__b b { font-size: .95rem; color: var(--encre); }
.annu-lg__b .chip { justify-self: start; margin-top: .2rem; }
.annu-lg__msg { color: var(--encre-2); font-style: italic; }
.annu-lg__a { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 760px) { .annu-lg { grid-template-columns: 48px minmax(0, 1fr); } .annu-lg__a { grid-column: 1 / -1; justify-content: flex-start; } }

/* 14/10 (séance R) : six entrées dans le menu du téléphone depuis « Catalogues ».
   Sous 430 px, « Questions » devient « FAQ » et l'écart se resserre : le menu
   tient toujours sur une ligne, sans défilement, jusqu'à 320 px. */
@media (max-width: 430px) {
  .page-public .site-head--menu .site-nav { gap: 4px; }
  .page-public .site-head--menu .site-nav a[data-court] { font-size: 0 !important; }
  .page-public .site-head--menu .site-nav a[data-court]::after { content: attr(data-court); font-size: 13px; }
}
@media (max-width: 389px) {
  .page-public .site-head--menu .site-nav a { font-size: 12.5px; }
  .page-public .site-head--menu .site-nav a[data-court]::after { font-size: 12.5px; }
}
@media (max-width: 359px) {
  .page-public .site-head--menu .site-nav a { font-size: 12px; }
  .page-public .site-head--menu .site-nav a[data-court]::after { font-size: 12px; }
}
@media (max-width: 339px) {
  .page-public .site-head--menu .site-nav a { font-size: 11.5px; }
  .page-public .site-head--menu .site-nav a[data-court]::after { font-size: 11.5px; }
}
/* Entre 961 et 1180 px, avec six entrées : menu resserré, boutons sur une ligne. */
@media (min-width: 961px) and (max-width: 1180px) {
  .site-head--menu .site-nav { gap: 1rem; }
  .site-head--menu .site-nav a { font-size: .9rem; }
  .site-head--menu .site-head__actions .btn { white-space: nowrap; }
}
/* Les cases de territoire et le bouton du logo sont des <label> : pas le gabarit des intitulés de champ. */
.page-app label.cbx, .page-app .annu-logo label.btn {
  margin: 0; text-transform: none; letter-spacing: normal; font-size: .86rem; color: var(--encre-2); line-height: 1.3;
}
.page-app label.cbx:has(input:checked) { color: var(--encre); }
.page-app .annu-logo label.btn { font-weight: 700; }
.annu-logo .aparte { flex-basis: 100%; margin: 0; }
.annu-champ > .label, .annu-bloc__det > .label { font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--encre-4); margin: 16px 0 6px; }
/* Téléphone : le bas de la liseuse appartient aux vignettes (geste vers le haut) ;
   le bandeau de l'enseigne passe juste sous la barre du haut. */
@media (max-width: 760px) {
  .lis > .lis__barre { order: -2; }
  .lis > .lis__annu { order: -1; border-top: 0; border-bottom: 1px solid rgba(255, 255, 255, .1); background: #0A2A56; }
}

/* ===================================================== CRM des enseignes (amorçage, 14/10/2026) */
.crm-filtres { display: flex; flex-wrap: wrap; gap: 8px; }
.crm-filtres input[type=search] { flex: 1 1 260px; min-width: 0; }
.crm-filtres select { flex: 0 1 auto; width: auto; }
.crm-table { overflow-x: auto; }
.crm-tr { cursor: pointer; }
.crm-tr:hover td { background: var(--fond); }
.crm-ref { font-variant-numeric: tabular-nums; color: var(--encre-3); white-space: nowrap; font-size: .85rem; }
.crm-statut { width: auto; min-width: 9.5rem; padding: 4px 8px; font-size: .85rem; }
.crm-dernier { max-width: 16rem; font-size: .88rem; }
.crm-reglages > summary { cursor: pointer; list-style: none; }
.crm-reglages > summary::-webkit-details-marker { display: none; }
.crm-sa { width: 100%; font-family: ui-monospace, Menlo, monospace; font-size: 12px; margin: .4rem 0; }
.crm-jeton { width: 100%; font-family: ui-monospace, Menlo, monospace; }
.crm-ligne-btn { display: flex; gap: 8px; margin-bottom: 1rem; }
.crm-tete { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 1rem; }
.crm-form { display: grid; gap: .6rem; }
.crm-champ { display: grid; gap: 4px; font-size: .85rem; color: var(--encre-3); }
.crm-champ input, .crm-champ textarea { width: 100%; }
.crm-h3 { font-size: 1rem; margin: 1.4rem 0 .5rem; }
.crm-cats, .crm-histo { margin: 0; padding-left: 1.1rem; font-size: .9rem; line-height: 1.6; }
.crm-histo { list-style: none; padding: 0; max-height: 14rem; overflow: auto; }
.crm-histo li { padding: 4px 0; border-bottom: 1px solid var(--filet); }
.crm-histo__d { color: var(--encre-3); margin-right: .5rem; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .crm-filtres select { flex: 1 1 45%; }
}

/* 15/10 : écran Annuaire de l'espace client — une seule enseigne ou agence (une fiche par dossier client). */
.annu-ecran { display: grid; gap: 18px; max-width: 920px; }
.annu-mode { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.page-app label.annu-mode__opt { display: flex; gap: .6rem; align-items: flex-start; margin: 0; padding: .8rem .9rem; border: 1px solid var(--filet); border-radius: 14px; background: var(--surface); cursor: pointer; text-transform: none; letter-spacing: normal; font-size: .9rem; color: var(--encre-2); line-height: 1.4; }
.annu-mode__opt input { width: auto; margin: .2rem 0 0; accent-color: var(--accent); flex: none; }
.annu-mode__opt span { display: grid; gap: .2rem; }
.annu-mode__opt b { color: var(--encre); font-size: .95rem; }
.annu-mode__opt small { font-size: .82rem; color: var(--encre-3); }
.page-app label.annu-mode__opt--on { border-color: var(--accent); background: rgba(22, 214, 195, .08); }
.annu-dossiers { margin-top: 1rem; }
.annu-dossiers > .label { display: block; font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--encre-4); margin: 0 0 6px; }
.annu-dossiers__l { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: .45rem; }
.annu-dossier { display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .8rem .35rem .4rem; border: 1px solid var(--filet); border-radius: var(--r-puce); background: var(--surface); font: inherit; font-size: .86rem; font-weight: 700; color: var(--encre-2); cursor: pointer; }
.annu-dossier img, .annu-dossier i { width: 22px; height: 22px; border-radius: 50%; object-fit: contain; background: var(--surface-2); flex: none; }
.annu-dossier i { display: grid; place-items: center; font-style: normal; font-size: 9px; font-weight: 800; color: #fff; background: var(--marine-clair); }
.annu-dossier small { font-size: .74rem; font-weight: 600; }
.annu-dossier__ok { color: var(--succes); }
.annu-dossier__vide { color: var(--alerte); }
.annu-dossier--espace { padding-left: .8rem; }
.annu-dossier--espace small { color: var(--encre-4); }
.annu-dossier--on { border-color: var(--marine); background: var(--marine); color: #fff; }
.annu-dossier--on small { color: rgba(255, 255, 255, .8); }
.annu-logo__img { display: inline-flex; }
.annu-logo__fichier { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; overflow: hidden; }
@media (max-width: 620px) { .annu-mode { grid-template-columns: 1fr; } }