/* Les jetons avant tout le reste : un @import doit précéder toute règle. */
@import url("/folks-tokens.css");

/* ---------------------------------------------------------------------------
   Portail client Folks — habillage v2.

   Réplique de la maquette « Portail Folks v2 » (Claude Design) : chaque
   valeur ci-dessous — tailles, marges, filets, durées, courbes — est celle
   du composant source, ramenée aux jetons de folks-tokens.css quand ils
   portent la même valeur (--fond = --bg, --texte = --fg, --texte-attenue =
   --muted, --filet = --line, --notion-* = --s-*, --aplat-* = --a-*).

   Ce qui reste Notion : le contenu, la structure des pages, les vues des
   bases. Ce qui est charte : la barre, la colonne latérale, les signatures
   de bas de page, les gestes.
--------------------------------------------------------------------------- */

/* --- jetons propres à la v2, par thème ------------------------------------ */

:root {
  --e-out: cubic-bezier(.32, .72, 0, 1);   /* entrées, ouvertures */
  --e-io: cubic-bezier(.4, 0, .2, 1);      /* sorties, fermetures */
  --barre-h: 78px;

  --afficher-encre: block;       /* logo à l'encre : sur fond papier */
  --afficher-papier: none;
  --afficher-lune: block;        /* l'icône propose le thème opposé */
  --afficher-soleil: none;
  --boucle-filtre: invert(1);    /* la planche du logo qui tourne est dessinée en papier */
  --boucle-filtre-inv: none;
  --filtre-marque-client: brightness(0) saturate(0);
  --symbole-inverse: url("/images/folks-logo-icon-paper.svg");
  --texte-inverse-attenue: var(--folks-grey-soft);
}
@media (prefers-color-scheme: dark) {
  :root {
    --afficher-encre: none;
    --afficher-papier: block;
    --afficher-lune: none;
    --afficher-soleil: block;
    --boucle-filtre: none;
    --boucle-filtre-inv: invert(1);
    --filtre-marque-client: brightness(0) saturate(0) invert(1);
    --symbole-inverse: url("/images/folks-logo-icon.svg");
    --texte-inverse-attenue: var(--folks-grey-mid);
  }
}
html[data-theme="clair"] {
  --afficher-encre: block;
  --afficher-papier: none;
  --afficher-lune: block;
  --afficher-soleil: none;
  --boucle-filtre: invert(1);
  --boucle-filtre-inv: none;
  --filtre-marque-client: brightness(0) saturate(0);
  --symbole-inverse: url("/images/folks-logo-icon-paper.svg");
  --texte-inverse-attenue: var(--folks-grey-soft);
}
html[data-theme="sombre"] {
  --afficher-encre: none;
  --afficher-papier: block;
  --afficher-lune: none;
  --afficher-soleil: block;
  --boucle-filtre: none;
  --boucle-filtre-inv: invert(1);
  --filtre-marque-client: brightness(0) saturate(0) invert(1);
  --symbole-inverse: url("/images/folks-logo-icon.svg");
  --texte-inverse-attenue: var(--folks-grey-mid);
}

/* --- base ----------------------------------------------------------------- */

/* Pas de border-box global : le composant source mesure ses boîtes au
   contenu (une carte de 460 px + ses marges), sauf là où il dit le contraire
   — les champs, les boutons, et les colonnes marquées plus bas. */
input, textarea, select, button { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { margin: 0; padding: 0; }
body {
  min-height: 100vh;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--folks-font-core);
  font-size: 14px;
  font-weight: var(--folks-weight-medium);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  transition: background 420ms var(--e-io), color 420ms var(--e-io);
}

a { color: inherit; text-decoration: none; }
a:hover { color: inherit; }
input, textarea, button { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea { background: transparent; border-radius: 0; }
::placeholder { color: inherit; opacity: .62; }
*:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: var(--folks-weight-medium); }
p { margin: 0; }
svg { flex-shrink: 0; }

.fk-noscroll { scrollbar-width: none; }
.fk-noscroll::-webkit-scrollbar { width: 0; height: 0; display: none; }

.logo--sombre { display: var(--afficher-encre); }
.logo--clair { display: var(--afficher-papier); }

/* --- mouvements ------------------------------------------------------------ */

@keyframes fk-fade { from { opacity: 0; } }
@keyframes fk-rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes fk-bubble { from { opacity: 0; transform: translateY(6px); } }
@keyframes fk-sheet { from { transform: translateY(100%); } }
@keyframes fk-sheet-out { to { transform: translateY(100%); } }
@keyframes fk-enter { from { opacity: 0; transform: translateY(16px); } }
@keyframes fk-out { to { opacity: 0; } }
@keyframes fk-tourne { from { opacity: 0; transform: rotate(-80deg) scale(.55); } }
@keyframes fk-dial { from { opacity: 0; transform: translateY(10px) scale(.975); } }
@keyframes fk-toast-in { from { opacity: 0; transform: translate(-50%, 20px) scale(.96); } }
@keyframes fk-toast-out { to { opacity: 0; transform: translate(-50%, 12px); } }
@keyframes fk-bx { from { background-position-x: 0; } to { background-position-x: calc(var(--fkc) * -10); } }
@keyframes fk-by { from { background-position-y: 0; } to { background-position-y: calc(var(--fkc) * -6); } }
@keyframes fk-pop {
  0% { transform: scale(.7); opacity: 0; }
  55% { transform: scale(1.07); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Le logo qui tourne : 60 images en une planche 10×6, lue case par case —
   pas une rotation CSS. --fkc est la taille d'une case à l'écran. */
.boucle {
  --fkc: 88px;
  display: block;
  flex-shrink: 0;
  width: var(--fkc);
  height: var(--fkc);
  background-image: url("/images/boucle-sprite.png");
  background-size: calc(var(--fkc) * 10) calc(var(--fkc) * 6);
  filter: var(--boucle-filtre);
  animation: fk-bx .3s steps(10) infinite, fk-by 1.8s steps(6) infinite;
}
.boucle--inv { filter: var(--boucle-filtre-inv); }
.boucle--brut { filter: none; }

.libelle-attente {
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--texte-attenue);
}

/* L'amorce : plein écran, le temps que la page existe. */
.amorce {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--fond);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
}
.amorce--sortie { animation: fk-out 420ms var(--e-io) both; pointer-events: none; }

/* --- petits composants ------------------------------------------------------ */

.bouton-rond {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid transparent;
  border-radius: 100%;
  transition: border-color var(--folks-duration-fast) var(--folks-ease);
}
.bouton-rond:hover { border-color: var(--filet); }

.bascule-theme .icone-lune { display: var(--afficher-lune); }
.bascule-theme .icone-soleil { display: var(--afficher-soleil); }
.bascule-theme svg { animation: fk-tourne 420ms var(--e-out) both; }

/* Une étiquette : à contour pour un select (une Étape), pleine pour un
   Statut. La couleur vient de Notion, toujours. */
.etiquette {
  --c-texte: var(--notion-default);
  --c-aplat: var(--aplat-default);
  display: inline-block;
  max-width: 100%;
  padding: 3px 10px;
  border: 1px solid currentColor;
  border-radius: var(--folks-radius-pill);
  background: none;
  color: var(--c-texte);
  font-size: 12px;
  font-weight: var(--folks-weight-medium);
  line-height: 1.25;
  white-space: nowrap;
}
.etiquette--statut {
  padding: 4px 11px;
  border: 0;
  background: var(--c-aplat);
  color: var(--folks-ink);
}
.etiquette + .etiquette { margin-left: 6px; }
.etiquette--default { --c-texte: var(--notion-default); --c-aplat: var(--aplat-default); }
.etiquette--gray { --c-texte: var(--notion-gray); --c-aplat: var(--aplat-gray); }
.etiquette--brown { --c-texte: var(--notion-brown); --c-aplat: var(--aplat-brown); }
.etiquette--orange { --c-texte: var(--notion-orange); --c-aplat: var(--aplat-orange); }
.etiquette--yellow { --c-texte: var(--notion-yellow); --c-aplat: var(--aplat-yellow); }
.etiquette--green { --c-texte: var(--notion-green); --c-aplat: var(--aplat-green); }
.etiquette--blue { --c-texte: var(--notion-blue); --c-aplat: var(--aplat-blue); }
.etiquette--purple { --c-texte: var(--notion-purple); --c-aplat: var(--aplat-purple); }
.etiquette--pink { --c-texte: var(--notion-pink); --c-aplat: var(--aplat-pink); }
.etiquette--red { --c-texte: var(--notion-red); --c-aplat: var(--aplat-red); }
.etiquette--pop { animation: fk-pop 620ms var(--e-out) both; }

/* Une couleur de texte posée à la main dans Notion (pas un surlignage, qui
   devient une étiquette ci-dessus) : le texte reste noir partout ailleurs,
   ce passage suit la teinte exacte choisie dans Notion. */
.texte-couleur--gray { color: var(--notion-gray); }
.texte-couleur--brown { color: var(--notion-brown); }
.texte-couleur--orange { color: var(--notion-orange); }
.texte-couleur--yellow { color: var(--notion-yellow); }
.texte-couleur--green { color: var(--notion-green); }
.texte-couleur--blue { color: var(--notion-blue); }
.texte-couleur--purple { color: var(--notion-purple); }
.texte-couleur--pink { color: var(--notion-pink); }
.texte-couleur--red { color: var(--notion-red); }

/* Le compteur rond : « Retours 2 ». */
.compteur-pilule {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border: 1px solid var(--filet);
  border-radius: var(--folks-radius-pill);
  font-size: 12px;
  color: var(--texte-attenue);
  font-variant-numeric: tabular-nums;
}

/* --- barre du haut ---------------------------------------------------------- */

.barre {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--barre-h);
  padding: 0 34px;
  display: flex;
  align-items: center;
  gap: 22px;
  border-bottom: 1px solid var(--filet);
  background: var(--fond);
  transition: background 420ms var(--e-io);
}

.marque { display: flex; align-items: center; gap: 9px; }
.marque-symbole { position: relative; width: 24px; height: 24px; flex-shrink: 0; display: block; }
.marque-plat {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 220ms var(--e-io);
}
.marque-plat.logo--sombre { display: var(--afficher-encre); }
.marque-plat.logo--clair { display: var(--afficher-papier); }
.marque-relief {
  --fkc: 38px;
  position: absolute;
  inset: -7px;
  width: auto;
  height: auto;
  opacity: 0;
  animation: none;
  transition: opacity 220ms var(--e-io);
}
.marque:hover .marque-plat { opacity: 0; }
.marque:hover .marque-relief { opacity: 1; animation: fk-bx .3s steps(10) infinite, fk-by 1.8s steps(6) infinite; }
.marque-texte { height: 15px; width: auto; }

.barre-sep { height: 24px; width: 1px; background: var(--filet); flex-shrink: 0; }

.identite-client { display: flex; align-items: center; gap: 10px; min-width: 0; }
.logo-client { display: flex; align-items: center; }
/* Pas de filtre monochrome ici : l'icône posée par un client dans Notion est
   presque toujours une image pleine (un logo sur fond blanc, une photo), pas
   un détourage transparent — un filtre en silhouette peint alors tout le
   rectangle d'une seule couleur (constaté sur Atelier Galinier : un carré
   plein). Le logo garde ses couleurs réelles, comme dans Notion. */
.logo-client img { height: 20px; width: auto; display: block; border-radius: 3px; }
.logo-client--emoji { font-size: 15px; line-height: 1; }
.logo-client--initiales { display: none; }
.nom-client { font-size: 14px; font-weight: var(--folks-weight-bold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.barre-espace { font-size: 12px; letter-spacing: .1em; color: var(--texte-attenue); text-transform: uppercase; white-space: nowrap; }

.barre-droite { display: flex; margin-left: auto; gap: 13px; align-items: center; }
.contact-nom { font-size: 12px; white-space: nowrap; }
.avatar-contact {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 100%;
  border: 1px solid var(--filet);
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.avatar-contact img { width: 100%; height: 100%; object-fit: cover; }
.avatar-contact--emoji { font-size: 14px; }

/* --- accueil : colonne latérale + corps ------------------------------------ */

.accueil {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: stretch;
}

.laterale {
  box-sizing: border-box;
  padding: 40px 20px 24px 28px;
  border-right: 1px solid var(--filet);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 7px;
  min-height: calc(100vh - var(--barre-h));
  /* La largeur suit les intitulés venus de Notion : 228 px au moins, comme
     la maquette, puis la colonne s'élargit ; au-delà de 360 px, l'intitulé
     passe à la ligne plutôt que de manger le contenu. */
  min-width: 228px;
  max-width: 360px;
}
.laterale-surtitre {
  font-size: 12px;
  color: var(--texte-attenue);
  margin: 0 0 20px 10px;
  letter-spacing: .12em;
  font-weight: var(--folks-weight-bold);
  text-transform: uppercase;
}
.laterale-lien {
  box-sizing: border-box;
  display: flex;
  width: 100%;
  align-items: center;
  gap: 11px;
  text-align: left;
  padding: 12px 10px;
  font-size: 12px;
  overflow-wrap: break-word;
}
button.laterale-lien:hover, a.laterale-lien:hover { text-decoration: underline; text-underline-offset: 4px; }
span.laterale-lien { cursor: default; }

.laterale-signature { margin-top: auto; padding: 48px 10px 4px; }
.laterale-signature img { height: 44px; width: auto; margin-bottom: 24px; }
.laterale-signature p { font-size: 16px; line-height: 1.5; margin: 0; }
.laterale-signature em,
.editorial {
  font-family: var(--folks-font-editorial);
  font-weight: var(--folks-weight-bold);
  font-style: italic;
}
.laterale-signature em { font-size: 19px; }
.laterale-signature span { display: block; color: var(--texte-attenue); font-size: 12px; margin-top: 13px; }

.accueil-corps {
  box-sizing: border-box;
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  padding: 43px clamp(28px, 4vw, 72px) 22px;
  min-width: 0;
}

.accueil-intro { margin-bottom: 36px; animation: fk-enter 520ms var(--e-out) both; }
.accueil-intro > * { max-width: 850px; }
.accueil-intro .titre-1 { margin-top: 0; }
.accueil-intro p { max-width: 615px; font-size: 14px; line-height: 1.85; color: var(--texte-attenue); margin: 0; }
.accueil-intro p + p { margin-top: 10px; }

.accueil-section { margin-bottom: 44px; animation: fk-enter 520ms var(--e-out) var(--delai, 0ms) both; }
.section-entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}
.section-entete--outils { margin-bottom: 22px; }
.section-entete .titre-2 { font-weight: var(--folks-weight-medium); letter-spacing: -.01em; margin: 0; line-height: 1.3; }
.section-compte { font-size: 12px; color: var(--texte-attenue); margin-left: 9px; vertical-align: middle; font-weight: var(--folks-weight-medium); letter-spacing: 0; }
.section-outils { display: flex; align-items: center; gap: 14px; }

.accueil-section > p,
.accueil-section .carte p { font-size: 14px; line-height: 1.7; color: var(--texte-attenue); margin: 0 0 10px; }

.accueil-pied {
  margin-top: 65px;
  padding-top: 19px;
  border-top: 1px solid var(--filet);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: var(--texte-attenue);
  font-size: 12px;
}
.accueil-pied img { height: 16px; width: auto; }
.accueil-mention { margin-top: 18px; font-size: 12px; color: var(--texte-attenue); }

#erreur { color: var(--notion-red); font-size: 13px; margin: 0 0 20px; }
#vide { color: var(--texte-attenue); font-size: 14px; }

/* --- contenu Notion, commun ------------------------------------------------ */

.titre-1 {
  font-family: var(--folks-font-editorial);
  font-style: italic;
  font-weight: var(--folks-weight-bold);
  font-size: clamp(36px, 4vw, 60px);
  line-height: 1.07;
  letter-spacing: -.01em;
  margin: 40px 0 23px;
}
.titre-2 { font-size: 24px; font-weight: var(--folks-weight-medium); letter-spacing: -.01em; line-height: 1.3; margin: 28px 0 14px; }
.titre-3 {
  font-size: 12px;
  font-weight: var(--folks-weight-bold);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--texte);
  margin: 22px 0 10px;
}
.titre-4 { font-size: 14px; margin: 16px 0 6px; }

ul, ol { padding-left: 19px; margin: 12px 0; }
li { margin: 7px 0; }
hr { border: none; border-top: 1px solid var(--filet); margin: 28px 0; }

blockquote {
  border-left: 2px solid var(--texte);
  padding: 8px 18px;
  margin: 26px 0;
  font-family: var(--folks-font-editorial);
  font-style: italic;
  font-weight: var(--folks-weight-bold);
  font-size: 22px;
  line-height: 1.3;
}

/* Un encadré Notion : un rang, jamais une boîte. */
.carte { margin: 0 0 28px; }
.carte > :first-child { margin-top: 0; }
.carte > :last-child { margin-bottom: 0; }

/* Encadré 🔳 : la teinte du callout Notion, en aplat. */
.carte-pop { padding: 20px 24px; margin: 0 0 20px; color: var(--folks-ink); }
.carte-pop > :last-child { margin-bottom: 0; }
.carte-pop a { color: inherit; }
.carte-pop--default { background: var(--aplat-default); }
.carte-pop--gray { background: var(--aplat-gray); }
.carte-pop--brown { background: var(--aplat-brown); }
.carte-pop--orange { background: var(--aplat-orange); }
.carte-pop--yellow { background: var(--aplat-yellow); }
.carte-pop--green { background: var(--aplat-green); }
.carte-pop--blue { background: var(--aplat-blue); }
.carte-pop--purple { background: var(--aplat-purple); }
.carte-pop--pink { background: var(--aplat-pink); }
.carte-pop--red { background: var(--aplat-red); }

.colonnes {
  display: grid;
  grid-template-columns: repeat(var(--nb-colonnes, 2), minmax(0, 1fr));
  gap: 32px;
  margin-bottom: 20px;
}

/* Un mot surligné dans Notion : une pastille, cliquable si elle vise un média. */
.pastille {
  display: inline;
  padding: 1px 6px;
  border: none;
  border-radius: var(--folks-radius-pill);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  font: inherit;
  color: var(--folks-ink);
  background: var(--aplat-default);
}
.pastille--liee { cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.pastille--default { background: var(--aplat-default); }
.pastille--gray { background: var(--aplat-gray); }
.pastille--brown { background: var(--aplat-brown); }
.pastille--orange { background: var(--aplat-orange); }
.pastille--yellow { background: var(--aplat-yellow); }
.pastille--green { background: var(--aplat-green); }
.pastille--blue { background: var(--aplat-blue); }
.pastille--purple { background: var(--aplat-purple); }
.pastille--pink { background: var(--aplat-pink); }
.pastille--red { background: var(--aplat-red); }

.tache { margin: 0 0 6px; padding-left: 18px; position: relative; }
.tache::before {
  content: "";
  position: absolute; left: 0; top: .5em;
  width: 8px; height: 8px;
  border: 1px solid var(--filet);
}
.tache--faite { color: var(--texte-attenue); text-decoration: line-through; }
.tache--faite::before { background: currentColor; border-color: currentColor; }

.case-notion { display: inline-block; width: 8px; height: 8px; border: 1px solid var(--filet); }
.case-notion--cochee { background: currentColor; border-color: currentColor; }

/* Un fichier : une ligne à filet, icône à gauche, téléchargement à droite. */
.piece-jointe,
.lien-carte {
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--filet);
  padding: 18px 0;
  width: 100%;
  text-align: left;
  font-size: 14px;
  transition: color var(--folks-duration-fast) var(--folks-ease);
}
.piece-jointe:hover, .lien-carte:hover { color: var(--texte-attenue); }
.piece-jointe .piece-fin, .lien-carte .piece-fin { margin-left: auto; }

.depliant { border-top: 1px solid var(--filet); }
.depliant > summary {
  padding: 12px 0;
  cursor: pointer;
  list-style: none;
  display: flex; align-items: center; gap: 8px;
  font-weight: var(--folks-weight-bold);
}
.depliant > summary::-webkit-details-marker { display: none; }
.depliant > summary::before {
  content: "";
  border-left: 6px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform var(--folks-duration-fast) var(--folks-ease);
}
.depliant[open] > summary::before { transform: rotate(90deg); }
.depliant-corps { padding: 0 0 12px 16px; }

/* Une sous-page Notion posée dans le corps : une ligne à ouvrir. */
.rubrique {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  text-align: left;
  padding: 14px 0;
  border-bottom: 1px solid var(--filet);
  font-size: 14px;
  transition: color var(--folks-duration-fast) var(--folks-ease);
}
.rubrique:hover { color: var(--texte-attenue); }
.rubrique .piece-fin { margin-left: auto; }

.tableau-cadre { overflow-x: auto; margin: 0 0 20px; }
.tableau-notion { width: 100%; border-collapse: collapse; font-size: 14px; }
.tableau-notion th {
  padding: 9px 12px 9px 0;
  border-bottom: 1px solid var(--filet);
  text-align: left;
  font-size: 12px;
  font-weight: var(--folks-weight-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--texte-attenue);
  white-space: nowrap;
  vertical-align: bottom;
}
.tableau-notion td {
  padding: 14px 12px 14px 0;
  border-bottom: 1px solid var(--filet);
  vertical-align: middle;
  text-align: left;
}
.tableau-notion tr[tabindex] { cursor: pointer; transition: box-shadow 200ms var(--e-out); }
.tableau-notion tr[tabindex]:hover,
.tableau-notion tr[tabindex]:focus-visible { box-shadow: inset 0 0 0 1px var(--texte); outline: none; }

.cellule-titre { display: flex; flex-direction: column; gap: 3px; }
.cellule-titre-texte { font-size: 15px; }
.cellule-surtitre { font-size: 12px; color: var(--texte-attenue); letter-spacing: .09em; text-transform: uppercase; }
.cellule-texte { font-variant-numeric: tabular-nums; color: var(--texte-attenue); font-size: 13px; white-space: nowrap; }

/* --- bases Notion ---------------------------------------------------------- */

.base { margin: 0 0 20px; }
.base > .titre-2 { margin: 0 0 18px; }
.base .tableau-cadre { margin-bottom: 0; }
.base .tableau-notion { min-width: 560px; }
.base-contenu > .titre-3 { margin: 30px 0 10px; }
.base-contenu > .titre-3:first-child { margin-top: 0; }

/* Le nom d'un groupe de vue Notion : sous le Heading 3, au-dessus des
   en-têtes de colonnes — casse normale et repère plein pour ne pas se
   confondre avec eux. */
.groupe-titre {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: var(--folks-weight-bold);
  line-height: 1.3;
  color: var(--texte);
  margin: 34px 0 10px;
}
.groupe-titre::before { content: ""; width: 7px; height: 7px; background: currentColor; flex-shrink: 0; }
.groupe-compte { font-size: 12px; font-weight: var(--folks-weight-medium); color: var(--texte-attenue); }
.base-contenu > .groupe-titre:first-child { margin-top: 0; }

/* Les onglets d'une base : le sélecteur segmenté « Tableau / Cartes ». Ce
   sont les vues posées sur le bloc dans Notion, rien d'autre. */
.base-onglets {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--filet);
  border-radius: var(--folks-radius-pill);
}
.base > .base-onglets { margin: 0 0 18px; }
.base-onglet {
  padding: 5px 13px;
  border-radius: var(--folks-radius-pill);
  font-size: 12px;
  color: var(--texte-attenue);
  white-space: nowrap;
  transition: background var(--folks-duration) var(--folks-ease), color var(--folks-duration) var(--folks-ease);
}
.base-onglet--actif { background: var(--texte); color: var(--fond); }
.base-contenu--entree { animation: fk-fade var(--folks-duration) var(--folks-ease) both; }

/* Galerie : la carte projet. */
.galerie-notion {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 320px));
  gap: 20px;
}
.carte-galerie {
  display: block;
  width: 100%;
  min-width: 0;
  text-align: left;
  cursor: pointer;
  transition: transform 300ms var(--e-out);
}
.carte-galerie:hover { transform: translateY(-4px); }
.carte-galerie-banniere {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--filet);
  display: flex;
  align-items: flex-end;
  background: var(--texte);
  color: var(--fond);
}
.carte-galerie-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: url("/degrade-2-nb.png") center / cover no-repeat;
  transition: transform var(--folks-duration-slow) var(--folks-ease);
}
.carte-galerie:hover .carte-galerie-image { transform: scale(1.035); }
.carte-rond {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  border: 1px solid var(--folks-paper);
  color: var(--folks-paper);
  background: var(--folks-ink);
  z-index: 1;
}
.carte-version {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  padding: 2px 9px;
  border: 1px solid var(--folks-paper);
  border-radius: var(--folks-radius-pill);
  font-size: 12px;
  background: var(--folks-ink);
  color: var(--folks-paper);
}
.carte-lecture { left: 50%; top: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; }
.carte-lecture svg { margin-left: 2px; }
.carte-fleche { right: 10px; bottom: 10px; width: 28px; height: 28px; }
.carte-galerie-corps { padding: 14px 0 13px; border-bottom: 1px solid var(--filet); }
.carte-surtitre { display: block; font-size: 12px; color: var(--texte-attenue); letter-spacing: .09em; text-transform: uppercase; }
.carte-galerie-titre { font-size: 17px; font-weight: var(--folks-weight-medium); letter-spacing: -.01em; margin: 6px 0 13px; }
.carte-galerie-titre:first-child { margin-top: 0; }
.carte-galerie-titre:last-child { margin-bottom: 0; }
.carte-galerie-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.carte-galerie-meta .etiquette + .etiquette { margin-left: 0; }
.carte-galerie-meta-texte:last-child { margin-left: auto; }
.carte-galerie-meta-texte { font-size: 12px; color: var(--texte-attenue); font-variant-numeric: tabular-nums; }

/* Chronologie. */
.chrono-cadre { overflow-x: auto; margin-bottom: 20px; }
.chrono-notion { position: relative; min-width: 640px; }
.chrono-fleches { position: absolute; top: 0; left: 0; pointer-events: none; overflow: visible; }
.chrono-ligne { border-top: 1px solid var(--filet); cursor: pointer; transition: box-shadow 200ms var(--e-out); }
.chrono-ligne:hover, .chrono-ligne:focus-visible { box-shadow: inset 0 0 0 1px var(--texte); outline: none; }
.chrono-axe, .chrono-piste { position: relative; height: 36px; }
.chrono-axe span {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: var(--texte-attenue);
  white-space: nowrap;
  border-left: 1px solid var(--filet);
  padding-left: 6px;
}
.chrono-barre {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  min-width: 24px;
  height: 22px;
  line-height: 22px;
  border-radius: var(--folks-radius-pill);
  padding: 0 10px;
  color: var(--folks-ink);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chrono-sans-date { position: absolute; top: 50%; left: 0; transform: translateY(-50%); color: var(--texte-attenue); font-size: 13px; }

/* --- pages ouvertes : fiche projet et sous-page ----------------------------
   Des pages, pas des fenêtres : elles s'ouvrent sous la barre du haut, qui
   reste accessible. */

.page-ouverte {
  position: fixed;
  inset: var(--barre-h) 0 0 0;
  width: 100%;
  max-width: none;
  height: auto;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--fond);
  color: var(--texte);
  z-index: 30;
  overflow: hidden;
}
.page-ouverte[open] { display: flex; flex-direction: column; }
.page-ouverte.fermeture { animation: fk-out 200ms var(--e-io) both; }
.fiche[open] { animation: fk-enter 520ms var(--e-out) both; }
.fiche--rubrique { z-index: 32; overflow-y: auto; }
.fiche--rubrique[open] { display: block; animation: fk-rise var(--folks-duration) var(--folks-ease) both; }
body.page-ouverte-active { overflow: hidden; }

.fiche-barre {
  flex: none;
  display: flex;
  align-items: center;
  gap: 20px;
  height: 60px;
  padding: 0 32px;
  border-bottom: 1px solid var(--filet);
  font-size: 12px;
}
.fiche-retour {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--texte-attenue);
  white-space: nowrap;
  transition: color var(--folks-duration-fast) var(--folks-ease);
}
.fiche-retour:hover { color: var(--texte); }
.fiche-barre-sep { color: var(--filet); }
.fiche-ariane { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0; }
.fiche-barre-droite { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.fiche-version-tag { border: 1px solid var(--filet); padding: 2px 8px; font-size: 12px; border-radius: var(--folks-radius-pill); }
.fiche--rubrique .fiche-barre .bouton-rond { margin-left: auto; }

.fiche-charge {
  position: absolute;
  inset: 60px 0 0;
  z-index: 50;
  background: var(--fond);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
}
.fiche-charge .boucle { --fkc: 64px; }
.fiche-charge--sortie { animation: fk-out 280ms var(--e-io) both; pointer-events: none; }

.fiche-split { flex: 1 1 auto; display: flex; min-height: 620px; overflow: hidden; position: relative; }

.fiche-doc {
  box-sizing: border-box;
  width: 100%;
  flex-shrink: 0;
  min-width: 0;
  padding: 41px clamp(24px, 4vw, 65px) 24px;
  overflow: auto;
  transition: width 460ms var(--e-out);
}
.fiche--panneau-ouvert .fiche-doc { width: var(--doc-largeur, 62%); }
.fiche--glisse .fiche-doc, .fiche--glisse .fiche-panneau { transition: none; }

/* La largeur de lecture : sur un grand écran, titres et paragraphes restent
   dans une colonne centrée de 720 px ; les vidéos, bases et colonnes peuvent
   aller plus large (la vidéo reste bornée par la hauteur, voir le lecteur). */
.fiche-doc { --mesure: 720px; }
.fiche-entete,
.fiche-signature,
.fiche-contenu :is(p, ul, ol, blockquote, .titre-1, .titre-2, .titre-3, .titre-4, .tache, .depliant, .rubrique, .piece-jointe, .lien-carte, .carte, .carte-pop) {
  max-width: var(--mesure);
  margin-inline: auto;
}
.fiche-contenu .colonnes :is(p, ul, ol, blockquote, .titre-1, .titre-2, .titre-3, .titre-4, .tache) { margin-inline: 0; }
.fiche-entete { margin-bottom: 28px; }
.fiche-surtitre { font-size: 12px; color: var(--texte-attenue); letter-spacing: .12em; font-weight: var(--folks-weight-bold); text-transform: uppercase; }
.fiche-titre { font-size: clamp(28px, 3.4vw, 46px); line-height: 1.12; letter-spacing: -.02em; font-weight: var(--folks-weight-medium); margin: 13px 0; }
.fiche-meta { display: flex; align-items: center; gap: 12px; color: var(--texte-attenue); font-size: 12px; flex-wrap: wrap; }

.fiche-contenu p { margin-block: 12px; line-height: 1.85; font-size: 14px; color: var(--texte); }
.fiche-contenu ul, .fiche-contenu ol { font-size: 14px; color: var(--texte); }
.fiche-contenu .titre-2 { margin-block: 28px 14px; }
.fiche-contenu > :first-child, .fiche-contenu .categorie:first-child > :first-child { margin-top: 0; }
.fiche-contenu .pastille { color: var(--folks-ink); }
.sans-media { color: var(--texte-attenue); font-size: 13px; }

.fiche-signature {
  border-top: 1px solid var(--filet);
  margin-top: 36px;
  padding-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.fiche-signature img { height: 16px; width: auto; }
.fiche-signature span { color: var(--texte-attenue); font-size: 12px; }

/* Le média : légende en étiquette, format à côté, puis le lecteur. */
.media { margin: 27px auto 30px; scroll-margin-top: 24px; max-width: 100%; }
.media-legende { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.media-legende .etiquette {
  transition: color var(--folks-duration-slow) var(--folks-ease), background var(--folks-duration-slow) var(--folks-ease);
}
.media-legende .etiquette.etiquette--eclair { transition: none; background: var(--texte); color: var(--fond); border-color: var(--texte); }
.media-format { border: 1px solid var(--filet); padding: 3px 10px; border-radius: var(--folks-radius-pill); font-size: 12px; color: var(--texte-attenue); font-variant-numeric: tabular-nums; }
.media img { display: block; max-width: 100%; height: auto; max-height: 62vh; }
.media iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: none; background: var(--folks-ink); }
.media-indisponible { color: var(--texte-attenue); font-size: 13px; }

.lecteur { max-width: 100%; }
.lecteur-cadre { position: relative; background: var(--fond); line-height: 0; }
.lecteur-video {
  display: block;
  width: 100%;
  height: auto;
  background: var(--folks-ink);
  cursor: pointer;
}
.lecteur-jouer {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  border: 1px solid var(--folks-paper);
  color: var(--folks-paper);
  background: var(--folks-ink);
  animation: fk-fade var(--folks-duration-fast) var(--folks-ease) both;
}
.lecteur-jouer svg { margin-left: 3px; }
.lecteur-tampon {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: rgba(27, 27, 27, .5);
  animation: fk-fade 200ms var(--e-io) both;
  line-height: 1.5;
}
.lecteur-tampon .boucle { --fkc: 54px; filter: none; }
.lecteur-tampon .libelle-attente { color: var(--folks-paper); }

.lecteur-progression {
  height: 12px;
  cursor: pointer;
  margin-top: 5px;
  position: relative;
  display: flex;
  align-items: center;
  touch-action: none;
}
.lecteur-progression::before { content: ""; position: absolute; left: 0; right: 0; height: 3px; background: var(--filet); }
.lecteur-progression-rempli { position: absolute; left: 0; height: 3px; width: 0; background: var(--texte); }
.lecteur-progression-curseur { position: absolute; left: 0; width: 9px; height: 9px; background: var(--texte); transform: translateX(-4px); }

.lecteur-barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 6px 0 12px;
  border-bottom: 1px solid var(--filet);
}
.lecteur-gauche { display: flex; align-items: center; gap: 14px; }
.lecteur-lecture { display: flex; padding: 3px; }
.lecteur-temps { font-size: 12px; font-variant-numeric: tabular-nums; letter-spacing: .03em; }
.lecteur-temps-total { color: var(--texte-attenue); }
.lecteur-actions { display: flex; align-items: center; gap: 17px; }
.lecteur--etroit .lecteur-actions { gap: 12px; }
.lecteur-icone { display: flex; padding: 3px; color: var(--texte-attenue); transition: color var(--folks-duration-fast) var(--folks-ease); }
.lecteur-icone:hover { color: var(--texte); }
.lecteur-telecharger--occupe { opacity: .4; pointer-events: none; }
.lecteur-son { display: flex; align-items: center; gap: 6px; }
.lecteur-volume {
  position: relative;
  display: flex;
  align-items: center;
  width: 0;
  height: 12px;
  cursor: pointer;
  touch-action: none;
  opacity: 0;
  transition: width 240ms var(--e-out), opacity 240ms var(--e-out);
}
.lecteur-son:hover .lecteur-volume,
.lecteur-son:focus-within .lecteur-volume,
.lecteur-volume:active { width: 64px; opacity: 1; }
.lecteur-volume::before { content: ""; position: absolute; left: 0; right: 0; height: 3px; background: var(--filet); }
.lecteur-volume-rempli { position: absolute; left: 0; height: 3px; width: 0; background: var(--texte); }
.lecteur-volume-curseur { position: absolute; left: 0; width: 9px; height: 9px; background: var(--texte); transform: translateX(-4px); }
@media (hover: none) { .lecteur-volume { display: none; } }
.pilule-noire {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid var(--texte);
  border-radius: var(--folks-radius-pill);
  background: var(--texte);
  color: var(--fond);
  font-size: 12px;
  white-space: nowrap;
  transition: background var(--folks-duration) var(--folks-ease), color var(--folks-duration) var(--folks-ease);
}
.lecteur--etroit .lecteur-mentionner { padding: 7px 9px; }
.lecteur--etroit .lecteur-mentionner-libelle { display: none; }

.lecteur:fullscreen { display: flex; flex-direction: column; background: var(--folks-ink); color: var(--folks-paper); padding: 20px; width: 100% !important; }
.lecteur:fullscreen .lecteur-cadre { flex: 1 1 auto; min-height: 0; background: var(--folks-ink); }
.lecteur:fullscreen .lecteur-video { height: 100%; max-height: none; object-fit: contain; }

/* La poignée entre document et retours. */
.fiche-poignee {
  width: 9px;
  flex-shrink: 0;
  position: relative;
  cursor: default;
  touch-action: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid var(--filet);
  z-index: 2;
}
.fiche--panneau-ouvert .fiche-poignee { cursor: col-resize; }
.fiche-poignee span { height: 35px; width: 3px; background: var(--filet); transition: background var(--folks-duration-fast) var(--folks-ease); }
.fiche--glisse .fiche-poignee span, .fiche-poignee:focus-visible span { background: var(--texte); }
body.redimensionnement-actif, body.redimensionnement-actif * { cursor: col-resize !important; user-select: none !important; }

/* La bulle : ouvre et ferme le panneau Retours. */
.fiche-bulle {
  position: absolute;
  top: 16px;
  right: 24px;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 100%;
  border: 1px solid var(--filet);
  background: var(--fond);
  color: var(--texte);
  transition: background var(--folks-duration) var(--folks-ease), color var(--folks-duration) var(--folks-ease), border-color var(--folks-duration) var(--folks-ease);
}
.fiche--panneau-ouvert .fiche-bulle { border-color: var(--texte); background: var(--texte); color: var(--fond); }
.fiche-bulle .icone-masquer { display: none; }
.fiche--panneau-ouvert .fiche-bulle .icone-afficher { display: none; }
.fiche--panneau-ouvert .fiche-bulle .icone-masquer { display: block; }
.fiche-bulle-badge {
  box-sizing: border-box;
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: var(--folks-radius-pill);
  background: var(--aplat-orange);
  color: var(--folks-ink);
  font-size: 11px;
  line-height: 18px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.fiche--panneau-ouvert .fiche-bulle-badge { display: none; }

/* Le panneau Retours. */
.fiche-panneau {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 0%;
  height: 100%;
  background: var(--fond);
  overflow: hidden;
  opacity: 0;
  transition: opacity 460ms var(--e-out);
}
.fiche--panneau-ouvert .fiche-panneau { opacity: 1; }
.fiche--sans-panneau .fiche-poignee,
.fiche--sans-panneau .fiche-bulle,
.fiche--sans-panneau .fiche-panneau,
.fiche--sans-panneau .fiche-bouton-feuille { display: none; }
.fiche--sans-panneau .fiche-doc { width: 100% !important; }

.panneau-entete {
  flex: 0 0 auto;
  padding: 15px 20px 13px;
  border-bottom: 1px solid var(--filet);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-width: 420px;
}
.panneau-entete h2 { font-size: 19px; font-weight: var(--folks-weight-medium); display: flex; align-items: center; gap: 10px; letter-spacing: -.01em; }
.panneau-replier { display: none; }

.panneau-fil {
  box-sizing: border-box;
  flex: 1 1 auto;
  min-height: 60px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 26px 24px;
  min-width: 420px;
}

.retour-vide { padding: 45px 0; text-align: center; color: var(--texte-attenue); font-size: 12px; }
.retour-vide svg { margin: 0 auto 18px; display: block; }
.retour-vide span { font-size: 12px; display: block; margin-top: 7px; }

.retour-diviseur {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--texte-attenue);
  font-size: 12px;
  margin: 25px 0 20px;
  white-space: nowrap;
}
.retour-diviseur::before, .retour-diviseur::after { content: ""; height: 1px; background: var(--filet); flex: 1; }

.retour-ligne { display: flex; gap: 10px; margin: 16px 0; animation: fk-bubble var(--folks-duration) var(--folks-ease) both; }
.retour-avatar {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 100%;
  border: 1px solid var(--filet);
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.retour-avatar img { width: 100%; height: 100%; object-fit: cover; }
.retour-avatar--emoji { font-size: 14px; }
.retour-avatar--folks { background: var(--texte); border-color: var(--texte); }
.retour-avatar--folks::before {
  content: "";
  width: 14px;
  height: 14px;
  background: var(--symbole-inverse) center / contain no-repeat;
}

.retour-bulle { padding: 14px 14px 10px; min-width: 0; flex: 1; border: 1px solid var(--filet); }
.retour-bulle--equipe { background: var(--texte); color: var(--fond); border-color: var(--texte); }
.retour-bulle--validation { border-color: var(--notion-green); }
.retour-bulle-entete { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 8px; align-items: center; }
.retour-auteur { font-size: 12px; font-weight: var(--folks-weight-bold); }
.retour-vous { font-weight: var(--folks-weight-medium); font-size: 12px; color: var(--texte-attenue); }
.retour-supprimer { opacity: .6; display: flex; transition: opacity var(--folks-duration-fast) var(--folks-ease); }
.retour-supprimer:hover { opacity: 1; }
.retour-validation { display: flex; gap: 6px; align-items: center; color: var(--notion-green); font-size: 12px; margin-bottom: 5px; }
.retour-bulle p { font-size: 12px; line-height: 1.8; overflow-wrap: anywhere; margin: 0; }
.retour-bulle p + p { margin-top: 6px; }
.retour-bulle ul, .retour-bulle ol { font-size: 12px; margin: 6px 0; }
.retour-mention {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  border: 1px solid var(--filet);
  border-radius: var(--folks-radius-pill);
  padding: 3px 9px;
  font-size: 12px;
  line-height: 1.25;
  margin: 2px 4px 2px 0;
  max-width: 100%;
  vertical-align: middle;
  transition: border-color var(--folks-duration-fast) var(--folks-ease);
}
.retour-mention:hover { border-color: currentColor; }
.retour-mention--temps { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
span.retour-mention--temps:hover { border-color: var(--filet); }
.retour-bulle--equipe .retour-mention { border-color: var(--texte-inverse-attenue); }
.retour-bulle-pied { display: flex; justify-content: space-between; gap: 10px; color: var(--texte-attenue); font-size: 12px; margin-top: 14px; }
.retour-bulle--equipe .retour-bulle-pied,
.retour-bulle--equipe .retour-vous { color: var(--texte-inverse-attenue); }
.retour-bulle-version { border: 1px solid var(--filet); padding: 0 4px; }
.retour-bulle--equipe .retour-bulle-version { border-color: var(--texte-inverse-attenue); }

.panneau-pied { box-sizing: border-box; flex: 0 0 auto; padding: 16px 22px 15px; border-top: 1px solid var(--filet); min-width: 420px; }

.retour-actions { display: flex; gap: 10px; flex-wrap: nowrap; }
.pilule {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border: 1px solid var(--texte);
  border-radius: var(--folks-radius-pill);
  font-size: 13px;
  white-space: nowrap;
  transition: background var(--folks-duration) var(--folks-ease), color var(--folks-duration) var(--folks-ease), border-color var(--folks-duration) var(--folks-ease);
}
.pilule--pleine { background: var(--texte); color: var(--fond); }
.pilule--contour { border-color: var(--filet); background: transparent; color: var(--texte); }
.pilule--validee { border-color: var(--notion-green); color: var(--notion-green); }
.pilule:disabled { opacity: .38; cursor: not-allowed; }
.retour-phrase { color: var(--texte-attenue); font-size: 12px; margin: 12px 0 0; }

.retour-form { animation: fk-bubble var(--folks-duration) var(--folks-ease) both; }
.retour-form-entete { display: flex; align-items: center; gap: 9px; font-size: 12px; margin-bottom: 12px; color: var(--texte-attenue); }
.retour-form-entete .avatar-contact { width: 24px; height: 24px; color: var(--texte); }
.retour-form-entete b { font-weight: var(--folks-weight-medium); color: var(--texte); }
.retour-boite { border: 1px solid var(--filet); position: relative; }
.retour-boite textarea {
  display: block;
  width: 100%;
  height: 80px;
  min-height: 60px;
  max-height: 200px;
  resize: vertical;
  border: 0;
  padding: 12px;
  font-size: 12px;
}
.retour-boite textarea:focus { outline: none; }
.retour-boite-bas { display: flex; align-items: center; justify-content: space-between; padding: 9px 11px; gap: 6px; }
.retour-mentionner-video { display: flex; align-items: center; gap: 6px; font-size: 12px; transition: opacity var(--folks-duration-fast) var(--folks-ease); }
.retour-mentionner-video:hover { opacity: .7; }
.compteur-caracteres { font-size: 12px; color: var(--texte-attenue); font-variant-numeric: tabular-nums; }
.compteur-caracteres--alerte { color: var(--notion-red); }

.retour-picker {
  box-sizing: border-box;
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  border: 1px solid var(--texte);
  background: var(--fond);
  z-index: 4;
  animation: fk-fade var(--folks-duration-fast) var(--folks-ease) both;
}
.retour-picker input { width: 100%; padding: 11px 12px; font-size: 12px; border: 0; border-bottom: 1px solid var(--filet); }
.retour-picker input:focus { outline: none; }
.retour-picker-vide { padding: 14px 12px; margin: 0; font-size: 12px; color: var(--texte-attenue); }
.suggestion {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 9px;
  padding: 11px 12px;
  font-size: 12px;
  text-align: left;
}
.suggestion:hover, .suggestion--visee { background: var(--texte); color: var(--fond); }

.bouton-envoyer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 18px;
  margin-top: 12px;
  font-size: 12px;
  border: 1px solid var(--texte);
  background: var(--texte);
  color: var(--fond);
}
.bouton-envoyer:disabled { opacity: .38; cursor: not-allowed; }
.bouton-envoyer .boucle { --fkc: 24px; margin: -4px -2px -4px 0; filter: var(--boucle-filtre-inv); }
.retour-form-bas { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 11px; }
.retour-form-bas p { color: var(--texte-attenue); font-size: 12px; }
.lien-discret {
  color: var(--texte-attenue);
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
  transition: color var(--folks-duration-fast) var(--folks-ease);
}
.lien-discret:hover { color: var(--texte); }
#retour-erreur { color: var(--notion-red); font-size: 12px; margin: 10px 0 0; }

.fiche-bouton-feuille { display: none; }

/* La sous-page. */
.rubrique-page { max-width: 880px; margin: 0 auto; padding: 50px 30px; }
.rubrique-page .rubrique-titre {
  font-family: var(--folks-font-editorial);
  font-style: italic;
  font-weight: var(--folks-weight-bold);
  font-size: 40px;
  line-height: 1.1;
  margin: 0 0 30px;
}
.rubrique-page .fiche-contenu p { margin: 12px 0; line-height: 1.85; color: var(--texte); font-size: 14px; }
.rubrique-page .fiche-contenu ul,
.rubrique-page .fiche-contenu ol { color: var(--texte); font-size: 14px; }

/* --- notification et boîtes de dialogue ---------------------------------- */

.toast {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  border: 1px solid var(--filet);
  background: var(--texte);
  color: var(--fond);
  padding: 14px 20px;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  max-width: 90vw;
  animation: fk-toast-in 480ms var(--e-out) both;
}
.toast--sortie { animation: fk-toast-out 240ms var(--e-io) both; }

.boite {
  width: 460px;
  max-width: calc(100% - 40px);
  background: var(--fond);
  color: var(--texte);
  border: 1px solid var(--filet);
  padding: 26px;
  margin: auto;
}
.boite[open] { display: flex; flex-direction: column; gap: 22px; animation: fk-dial 420ms var(--e-out) both; }
.boite::backdrop { background: rgba(0, 0, 0, .55); animation: fk-fade var(--folks-duration-fast) var(--folks-ease) both; }
.boite h2 { font-size: 19px; font-weight: var(--folks-weight-medium); letter-spacing: -.01em; margin: 0 0 10px; }
.boite p { color: var(--texte-attenue); line-height: 1.8; font-size: 13px; margin: 0; }
.boite-actions { display: flex; justify-content: flex-end; gap: 12px; flex-wrap: wrap; }
.boite-annuler {
  padding: 11px 16px;
  border: 1px solid var(--filet);
  font-size: 13px;
  transition: border-color var(--folks-duration-fast) var(--folks-ease);
}
.boite-annuler:hover { border-color: var(--texte); }
.boite-confirmer {
  padding: 11px 16px;
  border: 1px solid var(--texte);
  background: var(--texte);
  color: var(--fond);
  font-size: 13px;
  transition: opacity var(--folks-duration-fast) var(--folks-ease);
}
.boite-confirmer:hover { opacity: .85; }
.boite-confirmer:disabled { opacity: .38; cursor: not-allowed; }

/* --- connexion ------------------------------------------------------------ */

.page-connexion { display: flex; flex-direction: column; min-height: 100vh; isolation: isolate; animation: fk-fade var(--folks-duration) var(--folks-ease) both; }
.connexion-entete { height: 108px; display: flex; align-items: center; justify-content: space-between; padding: 0 5vw; }
.connexion-entete .logo { height: 26px; width: auto; }
.connexion-scene {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 30px 20px 55px;
}
/* Le grain couvre toute la fenêtre, en-tête et pied compris. */
.connexion-grain {
  position: fixed;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: difference;
}
.connexion {
  width: 460px;
  max-width: 100%;
  border: 1px solid var(--filet);
  background: var(--fond);
  padding: 39px 40px 30px;
  position: relative;
  z-index: 1;
}
.connexion-surtitre { display: flex; align-items: center; gap: 9px; font-size: 12px; letter-spacing: .12em; font-weight: var(--folks-weight-bold); text-transform: uppercase; }
.connexion-surtitre img { height: 13px; width: auto; }
.connexion h1 { font-size: 30px; line-height: 1.16; letter-spacing: -.02em; font-weight: var(--folks-weight-medium); margin: 25px 0 17px; }
.connexion h1 em { font-family: var(--folks-font-editorial); font-weight: var(--folks-weight-bold); font-style: italic; font-size: 35px; letter-spacing: 0; }
.connexion .intro { color: var(--texte-attenue); font-size: 14px; line-height: 1.7; margin: 0 0 27px; }
.connexion label { font-size: 12px; font-weight: var(--folks-weight-bold); display: block; margin-bottom: 8px; }
.connexion input {
  width: 100%;
  height: 44px;
  padding: 12px 14px;
  font-size: 13px;
  border: 1px solid var(--filet);
  transition: border-color var(--folks-duration-fast) var(--folks-ease);
}
.connexion input:focus { border-color: var(--texte); outline: none; }
.connexion-ligne-code { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; }
.connexion-ligne-code .lien-discret { margin-bottom: 8px; }
.champ-code { position: relative; }
.champ-code input { padding-right: 44px; }
.champ-code button { position: absolute; right: 14px; top: 13px; color: var(--texte-attenue); display: flex; }
.champ-code button:hover { color: var(--texte); }
.champ-code .icone-cacher { display: none; }
.champ-code--visible .icone-voir { display: none; }
.champ-code--visible .icone-cacher { display: block; }
#avertissement { color: var(--notion-red); font-size: 12px; margin: 14px 0 0; animation: fk-fade var(--folks-duration-fast) var(--folks-ease) both; }
.connexion-entrer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 18px;
  margin-top: 24px;
  font-size: 14px;
  background: var(--texte);
  color: var(--fond);
  border: 1px solid var(--texte);
  transition: opacity var(--folks-duration-fast) var(--folks-ease);
}
.connexion-entrer:hover { opacity: .85; }
.connexion-entrer .boucle { --fkc: 26px; margin: -4px -3px -4px 0; filter: var(--boucle-filtre-inv); }
.connexion-note {
  position: absolute;
  left: 5vw;
  bottom: 45px;
  font-size: 12px;
  letter-spacing: .12em;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  color: var(--texte-attenue);
  text-transform: uppercase;
}
.connexion-pied { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 5vw; font-size: 12px; color: var(--texte-attenue); }
.connexion-pied span { display: flex; gap: 7px; align-items: center; }

/* Sur le grain pleine page, chaque élément de l'en-tête et du pied garde un
   aplat du fond pour rester lisible — même traitement que la carte. */
.connexion-entete .logo,
.connexion-entete .bascule-theme,
.connexion-pied span,
.connexion-note { background: var(--fond); }
.connexion-entete .logo { box-sizing: content-box; padding: 9px 16px; border-radius: var(--folks-radius-pill); }
.connexion-entete .bascule-theme { border-color: var(--filet); }
.connexion-pied span { padding: 7px 14px; color: var(--texte); border-radius: var(--folks-radius-pill); }
.connexion-note { padding: 14px 7px; color: var(--texte); border-radius: var(--folks-radius-pill); }

/* --- mobile ----------------------------------------------------------------
   Sous 900 px : la maquette en mode « Mobile ». Barre resserrée, colonne
   latérale couchée en rangée, fiche sur une seule colonne et retours en
   feuille remontante. */

@media (max-width: 900px) {
  :root { --barre-h: 65px; }

  .barre { padding: 0 17px; gap: 12px; }
  .barre-espace, .contact-nom, .barre-droite .avatar-contact { display: none; }

  .accueil { grid-template-columns: minmax(0, 1fr); }
  .laterale {
    flex-direction: row;
    align-items: center;
    padding: 14px 20px;
    border-right: none;
    border-bottom: 1px solid var(--filet);
    min-height: 0;
    min-width: 0;
    max-width: none;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 18px;
  }
  .laterale::-webkit-scrollbar { display: none; }
  .laterale-surtitre, .laterale-signature { display: none; }
  .laterale-lien { width: auto; white-space: nowrap; }
  .accueil-corps { padding: 27px 20px 20px; }
  .section-entete { flex-wrap: wrap; }
  .colonnes { grid-template-columns: minmax(0, 1fr); gap: 20px; }

  .page-ouverte { overflow-y: auto; }
  .page-ouverte[open] { display: block; }
  .fiche-barre { padding: 0 20px; }
  .fiche-barre-sep, .fiche-ariane, .fiche-version-tag { display: none; }

  .fiche-split { display: block; position: relative; overflow: visible; min-height: 0; }
  .fiche-doc, .fiche--panneau-ouvert .fiche-doc { width: 100%; padding: 32px 20px 95px; overflow: visible; }
  .fiche-poignee, .fiche-bulle { display: none; }

  .fiche-panneau {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 78vh;
    border-top: 1px solid var(--texte);
    z-index: 60;
    opacity: 1;
    transition: none;
  }
  .fiche--panneau-ouvert .fiche-panneau { display: flex; animation: fk-sheet 460ms var(--e-out) both; }
  .fiche--panneau-sortie .fiche-panneau { display: flex; animation: fk-sheet-out 320ms var(--e-io) both; }
  .panneau-entete, .panneau-fil, .panneau-pied { min-width: 0; }
  .panneau-replier { display: inline-flex; }
  .retour-actions { flex-wrap: wrap; }

  .fiche-bouton-feuille {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--fond);
    border-top: 1px solid var(--filet);
    padding: 17px 24px;
    gap: 10px;
    align-items: center;
    z-index: 50;
    font-size: 13px;
  }
  .fiche-bouton-feuille .chevron { margin-left: auto; transform: rotate(180deg); }

  .rubrique-page { padding: 32px 20px; }
  .rubrique-page .rubrique-titre { font-size: 32px; }
}

@media (max-width: 560px) {
  .connexion { box-sizing: border-box; padding: 32px 24px 26px; }
  .connexion-note { display: none; }
  .connexion-pied { flex-direction: column; align-items: flex-start; gap: 8px; }
}