/* =============================================================================
   MONTRER LE PRODUIT
   Le cahier (§ 10.4) dit que ce qui vend ce produit, c est de voir ce qu il
   tire d un vrai dossier. Une page qui le DECRIT au lieu de le MONTRER rate
   les deux : elle n est ni convaincante ni agreable a regarder.
   Les fragments ci-dessous sont du HTML, pas des images : nets a tout zoom,
   lisibles par un lecteur d ecran, et modifiables en une ligne.
   ========================================================================== */

.duo {
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

/* --- Le chassis commun des fragments de produit --- */

.piece {
  position: relative;
  background: var(--carte);
  border: 1px solid var(--trait);
  border-radius: 13px;
  box-shadow: 0 1px 2px rgba(18,23,31,.05), 0 24px 56px rgba(18,23,31,.10);
}

/* La pile derriere : suggere qu il y en a d autres */
.piece::before,
.piece::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--trait);
  border-radius: 13px;
  background: var(--carte);
  z-index: -1;
}
.piece::before { transform: translate(8px, 9px) rotate(.7deg); opacity: .55; }
.piece::after  { transform: translate(15px, 18px) rotate(1.4deg); opacity: .3; }

.piece__tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--trait);
  background: var(--papier-creux);
  border-radius: 13px 13px 0 0;
}

.piece__titre {
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--encre-douce);
}

.piece__corps { padding: 6px 0 10px; }

/* --- Le bordereau --- */

.bordereau__ligne {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 9px 18px;
  font-size: .93rem;
}
.bordereau__ligne + .bordereau__ligne { border-top: 1px solid var(--trait); }

.bordereau__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px; height: 26px;
  border-radius: 7px;
  background: var(--accent-pale);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: .86rem;
}

.bordereau__nom {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jeton {
  font-size: .72rem;
  font-weight: 500;
  padding: 2px 9px;
  border-radius: 99px;
  border: 1px solid var(--trait-fort);
  color: var(--encre-douce);
  white-space: nowrap;
}
.jeton--adverse { border-color: var(--alerte-trait); color: var(--alerte); }

.piece__pied {
  padding: 11px 18px 4px;
  border-top: 1px solid var(--trait);
  font-size: .87rem;
  color: var(--encre-douce);
}

/* --- La contradiction --- */

.confront { padding: 16px 18px; }

.confront__cote {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 11px;
  align-items: start;
  padding: 11px 0;
}
.confront__cote + .confront__cote { border-top: 1px dashed var(--trait-fort); }

.confront__cite {
  font-family: var(--serif);
  font-size: 1.02rem;
  line-height: 1.45;
  margin: 0 0 3px;
}
.confront__source { font-size: .83rem; color: var(--encre-douce); }

.verdict {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  margin: 14px -18px -16px;
  padding: 14px 18px;
  background: var(--alerte-pale);
  border-top: 1px solid var(--trait);
  border-radius: 0 0 13px 13px;
  font-size: .93rem;
}
.verdict strong { color: var(--alerte); }

/* --- L arbre d argumentation --- */

.arbre { padding: 14px 18px 18px; font-size: .93rem; }

.arbre__chef {
  font-family: var(--serif);
  font-size: 1.08rem;
  line-height: 1.35;
  margin-bottom: 10px;
}

.arbre__branche { padding-left: 16px; border-left: 2px solid var(--trait-fort); margin-left: 4px; }
.arbre__moyen { padding: 9px 0 4px 12px; position: relative; }
.arbre__moyen::before {
  content: ""; position: absolute; left: -2px; top: 19px;
  width: 10px; height: 2px; background: var(--trait-fort);
}
.arbre__etiquette {
  font-size: .73rem; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--encre-douce);
}
.arbre__preuves { list-style: none; margin: 6px 0 0; padding: 0 0 0 2px; }
.arbre__preuves li {
  display: flex; align-items: center; gap: 8px;
  padding: 3px 0; font-size: .88rem; color: var(--encre-douce);
}
.etat { font-size: .95em; }
.etat--ok { color: var(--accent); }
.etat--manque { color: var(--alerte); }

@media (max-width: 900px) {
  .duo { grid-template-columns: 1fr; }
  .piece::before, .piece::after { display: none; }
}

/* ---- Accueil de l'avocat (24/09/2026, soir) : les engagements, l'apercu des tarifs ---- */
.engagements { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.engagements li { position: relative; padding: 16px 18px 16px 44px; border: 1px solid var(--trait); border-radius: var(--rayon); background: var(--carte); color: var(--encre-douce); line-height: 1.5; }
.engagements li::before { content: ""; position: absolute; left: 18px; top: 22px; width: 10px; height: 10px; border-radius: 50%; background: var(--info); box-shadow: 0 0 0 4px var(--info-pale); }
.engagements strong { color: var(--encre); }

.apercu-prix { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 2rem; }
.apercu-prix__formule { display: flex; flex-direction: column; gap: 4px; padding: 20px; border: 1px solid var(--trait); border-radius: var(--rayon); background: var(--carte); }
.apercu-prix__formule--repere { border-color: color-mix(in srgb, var(--accent) 55%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent); }
.apercu-prix__nom { font-weight: 600; font-size: .95rem; }
.apercu-prix__montant { font-family: var(--serif); font-size: 2rem; line-height: 1.1; }
.apercu-prix__montant::after { content: " / mois"; font-family: var(--sans); font-size: .82rem; color: var(--encre-douce); }
.apercu-prix__quoi { color: var(--encre-douce); font-size: .88rem; line-height: 1.4; }
@media (max-width: 900px) { .apercu-prix { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .apercu-prix { grid-template-columns: 1fr; } }

/* =============================================================================
   LE BANDEAU VIVANT de l'accueil de l'avocat (25/09/2026) : sections/promesse.php.
   Une boucle de 10 s : les pieces arrivent, une ligne lumineuse les parcourt,
   deux pieces s'allument, une liaison les relie, une fiche releve la
   contradiction, puis le bordereau revient a son etat initial. Sobre : rien ne
   clignote, aucun texte ne defile. L'etat SANS animation (preference du
   visiteur) est l'etat le plus parlant : pieces reliees, fiche visible.
   ========================================================================== */

.hero--vivant { min-height: min(780px, 92vh); display: grid; align-items: center; }
.hero--vivant > .enveloppe { position: relative; z-index: 1; }
.hero--vivant .duo > * { min-width: 0; } /* les colonnes peuvent retrecir : rien ne deborde sur telephone */
/* Deux temps : « Toutes vos pieces. » puis, a la ligne, « Un dossier qui vous repond. » */
.hero--vivant .hero__promesse { max-width: 21ch; font-size: clamp(2.1rem, 4.1vw, 3.05rem); }
.hero__promesse-suite { display: block; text-wrap: balance; color: color-mix(in srgb, var(--encre) 78%, var(--accent)); }

/* ---- L'onde du logo, en fond, a peine visible, qui derive tres lentement ---- */
.hero__onde { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hero__onde svg { position: absolute; left: 0; top: 58%; width: 200%; height: 46%; transform: translateY(-50%); }
@media (prefers-reduced-motion: no-preference) { .hero__onde svg { animation: heroOnde 60s linear infinite; } }
@keyframes heroOnde { from { transform: translate(0, -50%); } to { transform: translate(-50%, -50%); } }
.hero__onde path { fill: none; stroke: var(--accent); stroke-width: 1.4; stroke-linecap: round; opacity: .16; }
.hero__onde path + path { opacity: .08; }

/* ---- Trois preuves rapides, sous les boutons : le chiffre, puis sa legende ---- */
.hero__preuves { display: grid; grid-template-columns: repeat(3, max-content); gap: 0; margin: 2rem 0 0; padding: 0; list-style: none; color: var(--encre-douce); font-size: .84rem; line-height: 1.3; }
.hero__preuves li { padding: 0 22px; }
.hero__preuves li:first-child { padding-left: 0; }
.hero__preuves li + li { border-left: 1px solid var(--trait-fort); }
.hero__preuves strong { display: block; margin-bottom: 2px; color: var(--encre); font-family: var(--serif); font-size: 1.55rem; font-weight: 500; line-height: 1.1; }

/* ---- La carte ---- */
/* Au survol, la carte se souleve et les feuilles de la pile s'ecartent un peu : le dossier se deplie. */
.hero-demo, .hero-espace, .contra { transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s ease; }
.hero-demo::before, .hero-demo::after, .hero-espace::before, .hero-espace::after, .contra::before, .contra::after { transition: transform .45s cubic-bezier(.2, .8, .2, 1), opacity .45s ease; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .hero-demo:hover, .hero-espace:hover, .contra:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(18,23,31,.06), 0 28px 64px rgba(18,23,31,.2); }
  .hero-demo:hover::before, .hero-espace:hover::before, .contra:hover::before { transform: translate(14px, 14px) rotate(2deg); opacity: .7; }
  .hero-demo:hover::after, .hero-espace:hover::after, .contra:hover::after { transform: translate(28px, 28px) rotate(4deg); opacity: .45; }
}
/* Finition : un en-tete de papier a peine teinte, un filet d'accent en haut, une ombre plus douce. */
.hero-demo, .hero-espace { box-shadow: 0 1px 2px rgba(18,23,31,.06), 0 18px 48px rgba(18,23,31,.16); }
.hero-demo .piece__tete, .hero-espace .piece__tete { position: relative; background: color-mix(in srgb, var(--papier-creux) 55%, var(--carte)); }
.hero-demo .piece__tete::before, .hero-espace .piece__tete::before { content: ""; position: absolute; left: 18px; right: 18px; top: 0; height: 2px; border-radius: 0 0 2px 2px; background: var(--accent); opacity: .7; }
.hero-demo .piece__titre, .hero-espace .piece__titre { color: var(--encre); letter-spacing: .08em; }
.hero-demo .bordereau__nom, .hero-espace .bordereau__nom { color: var(--encre); }
.hero-demo { margin: 0; overflow: visible; box-shadow: 0 1px 0 color-mix(in srgb, var(--trait) 65%, transparent), 0 34px 80px rgba(8, 16, 24, .25); }
.hero-demo::before { transform: translate(10px, 10px) rotate(.45deg); }
.hero-demo::after { transform: translate(18px, 19px) rotate(1deg); }
.hero-demo__etat { display: inline-flex; align-items: center; gap: 7px; font-size: .82rem; color: var(--encre-douce); }
.hero-demo__point { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-pale); }
.hero-demo__corps { position: relative; overflow: hidden; padding: 4px 0 6px; }
.hero-demo__ligne { position: relative; height: 46px; padding-top: 0; padding-bottom: 0; }

/* Etat de repos (et etat « sans animation ») : les deux pieces reliees. */
.hero-demo__ligne--reperee { background: color-mix(in srgb, var(--alerte-pale) 70%, transparent); }
.hero-demo__ligne--reperee .bordereau__num { background: var(--alerte-pale); color: var(--alerte); }
.hero-demo__liaison { position: absolute; left: 7px; top: 50%; width: 2px; height: 92px; border-radius: 2px; background: var(--alerte); transform-origin: top; }
.hero-demo__liaison::before, .hero-demo__liaison::after { content: ""; position: absolute; left: 0; width: 9px; height: 2px; border-radius: 2px; background: var(--alerte); }
.hero-demo__liaison::before { top: 0; }
.hero-demo__liaison::after { bottom: 0; }
.hero-demo__balayage { position: absolute; inset: 0; z-index: 1; opacity: 0; pointer-events: none; will-change: transform, opacity; }
.hero-demo__balayage::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--accent) 20%, var(--accent) 80%, transparent); box-shadow: 0 0 14px 3px color-mix(in srgb, var(--accent) 45%, transparent); }

.hero-demo__fiche { display: grid; gap: 3px; margin: 0 14px 14px; padding: 12px 14px; border: 1px solid var(--alerte-trait); border-left: 3px solid var(--alerte); border-radius: 8px; background: linear-gradient(180deg, color-mix(in srgb, var(--alerte-pale) 92%, #fff), var(--alerte-pale)); font-size: .88rem; line-height: 1.4; box-shadow: inset 0 1px 0 rgba(255,255,255,.58); }
.hero-demo__fiche-titre { display: inline-flex; align-items: center; gap: 7px; color: var(--alerte); font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.hero-demo__fiche-titre::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--alerte); box-shadow: 0 0 0 4px var(--alerte-pale); }
.hero-demo__fiche strong { color: var(--encre); font-weight: 600; }
.hero-demo__fiche-detail { color: var(--encre-douce); font-size: .82rem; }

/* ---- Le pilotage (assets/js/demo-vivante.js) ----
   Sans script, ou si le visiteur prefere reduire les animations, rien ne bouge :
   la carte montre son etat parlant. .est-vivante lance, en continu ;
   .est-hors-champ suspend. Pas de bouton pause ni d'arret apres quelques
   tours (decisions du cabinet, 25/09). */
.est-hors-champ *, .est-hors-champ *::before { animation-play-state: paused !important; }

/* ---- La boucle de l'avocat : les pieces arrivent UNE fois, puis l'analyse se rejoue (9 s). ---- */
@media (prefers-reduced-motion: no-preference) {
  .est-vivante .hero-demo__ligne { animation: demoEntree .6s ease-out backwards; animation-delay: calc(var(--i) * .22s); }
  .est-vivante .hero-demo__ligne--reperee { animation: demoEntree .6s ease-out backwards, demoRepere 9s ease-in-out 1.6s infinite backwards; animation-delay: calc(var(--i) * .22s), 1.6s; }
  .est-vivante .hero-demo__ligne--reperee .bordereau__num { animation: demoNumero 9s ease-in-out 1.6s infinite backwards; }
  .est-vivante .hero-demo__balayage { animation: demoBalayage 9s ease-in-out 1.6s infinite backwards; }
  .est-vivante .hero-demo__liaison { animation: demoLiaison 9s ease-in-out 1.6s infinite backwards; }
  .est-vivante .hero-demo__fiche { animation: demoFiche 9s ease-in-out 1.6s infinite backwards; }
  .est-vivante .hero-demo__point { animation: demoPoint 9s ease-in-out 1.6s infinite backwards; }
}
@keyframes demoEntree { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
/* 1. La ligne lumineuse parcourt le bordereau. */
@keyframes demoBalayage {
  0%, 5%   { opacity: 0; transform: translateY(0); }
  8%       { opacity: .9; transform: translateY(0); }
  30%      { opacity: .9; transform: translateY(calc(100% - 2px)); }
  33%, 100% { opacity: 0; transform: translateY(calc(100% - 2px)); }
}
/* 2. Deux pieces s'allument. */
@keyframes demoRepere {
  0%, 33%  { background: transparent; }
  38%, 80% { background: color-mix(in srgb, var(--alerte-pale) 70%, transparent); }
  88%, 100% { background: transparent; }
}
@keyframes demoNumero {
  0%, 33%  { background: var(--accent-pale); color: var(--accent); }
  38%, 80% { background: var(--alerte-pale); color: var(--alerte); }
  88%, 100% { background: var(--accent-pale); color: var(--accent); }
}
/* 3. La liaison se trace de l'une a l'autre. */
@keyframes demoLiaison {
  0%, 39%  { opacity: 0; transform: scaleY(0); }
  46%, 80% { opacity: 1; transform: scaleY(1); }
  88%, 100% { opacity: 0; transform: scaleY(1); }
}
/* 4. La fiche releve la contradiction ; 5. tout revient au bordereau. */
@keyframes demoFiche {
  0%, 46%  { opacity: 0; transform: translateY(8px); }
  53%, 80% { opacity: 1; transform: translateY(0); }
  88%, 100% { opacity: 0; transform: translateY(0); }
}
/* Le point d'etat : lecture, puis releve. */
@keyframes demoPoint {
  0%, 5%   { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-pale); }
  8%, 30%  { background: var(--accent-vif); box-shadow: 0 0 0 5px var(--accent-pale); }
  38%, 80% { background: var(--alerte); box-shadow: 0 0 0 3px var(--alerte-pale); }
  88%, 100% { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-pale); }
}

/* ---- Telephone : une carte compacte sous le texte ---- */
@media (max-width: 900px) {
  .hero--vivant { min-height: auto; }
  .hero-demo { max-width: 520px; }
}
@media (max-width: 560px) {
  .hero__preuves { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero__preuves li { padding: 0 12px; }
  .hero__preuves li:first-child { padding-left: 0; }
  .hero__preuves strong { font-size: 1.35rem; }
  .hero__onde svg { top: 40%; height: 160px; }
  .hero-demo .hero-demo__ligne:nth-child(-n+3) { display: none; } /* le balayage est le 1er enfant : lignes 1 et 2 masquees */
  .hero-demo__ligne { height: 42px; font-size: .86rem; }
  .hero-demo__liaison { height: 84px; }
  .hero-demo .jeton { display: none; }
  .hero-demo .bordereau__ligne { grid-template-columns: 34px 1fr; padding-left: 16px; padding-right: 14px; }
}
@media (max-width: 430px) {
  .hero__preuves { gap: 10px; }
  .hero__preuves li { padding: 10px 0 0; border-left: 0; border-top: 1px solid var(--trait-fort); }
  .hero__preuves li:first-child { padding-top: 0; border-top: 0; }
}

/* =============================================================================
   LE BANDEAU VIVANT de l'accueil du CLIENT (25/09/2026) : clients.php.
   Une boucle de 10 s, sur l'espace d'un client : les pieces demandees
   arrivent ; il en depose une (une barre se remplit) ; elle passe « recue » ;
   l'avancement du dossier progresse ; un message de son avocat arrive ; tout
   revient. L'etat SANS animation est l'etat apres le depot : piece recue,
   avancement a l'etape 2, message visible. L'accent est celui de la vitrine
   du client (ardoise).
   ========================================================================== */

.hero--client .hero__promesse-suite { color: var(--accent); }

.hero-espace { margin: 0; overflow: visible; }
.hero-espace__etat { font-size: .8rem; color: var(--encre-douce); font-variant-numeric: tabular-nums; }
.hero-espace__avancement { padding: 14px 18px 12px; border-bottom: 1px solid var(--trait); }
.hero-espace__etapes { display: grid; grid-template-columns: repeat(3, 1fr); margin-bottom: 8px; font-size: .78rem; color: var(--encre-douce); }
.hero-espace__etapes span:nth-child(2) { text-align: center; }
.hero-espace__etapes span:nth-child(3) { text-align: right; }
.hero-espace__etapes .est-fait { color: var(--accent); font-weight: 600; }
.hero-espace__etape-2 { color: var(--accent); font-weight: 600; }
.hero-espace__barre { position: relative; height: 6px; border-radius: 99px; background: var(--papier-creux); overflow: hidden; }
.hero-espace__remplissage { position: absolute; inset: 0 auto 0 0; width: 58%; border-radius: 99px; background: var(--accent); transform-origin: left; }
.hero-espace__sous-titre { margin: 0; padding: 12px 18px 4px; font-size: .74rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--encre-douce); }
.hero-espace__ligne { position: relative; height: 46px; padding-top: 0; padding-bottom: 0; grid-template-columns: 30px 1fr auto; }
.hero-espace__icone { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--accent-pale); color: var(--accent); }
.hero-espace__icone svg { width: 15px; height: 15px; }
.hero-espace__jetons { display: grid; justify-items: end; }
.hero-espace__jetons > * { grid-area: 1 / 1; }
.hero-espace__jeton-avant { opacity: 0; }
.jeton--recu { border-color: color-mix(in srgb, var(--accent) 45%, transparent); color: var(--accent); background: var(--accent-pale); }
.hero-espace__depot { position: absolute; left: 18px; right: 18px; bottom: 5px; height: 3px; border-radius: 3px; background: var(--accent); transform: scaleX(1); transform-origin: left; opacity: 0; }
.hero-espace__message { display: grid; gap: 3px; margin: 6px 14px 14px; padding: 12px 14px; border: 1px solid var(--trait); border-left: 3px solid var(--accent); border-radius: 10px; background: var(--accent-pale); font-size: .88rem; line-height: 1.45; }
.hero-espace__message-titre { color: var(--accent); font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.hero-espace__message q { color: var(--encre); quotes: "« " " »"; }

/* ---- La boucle du client : les pieces arrivent UNE fois, puis le depot se rejoue (9 s). ---- */
@media (prefers-reduced-motion: no-preference) {
  .est-vivante .hero-espace__ligne { animation: demoEntree .6s ease-out backwards; animation-delay: calc(var(--i) * .24s); }
  .est-vivante .hero-espace__ligne--depot { animation: demoEntree .6s ease-out backwards, espaceLigne 9s ease-in-out 1.4s infinite backwards; animation-delay: calc(var(--i) * .24s), 1.4s; }
  .est-vivante .hero-espace__depot { animation: espaceDepot 9s ease-in-out 1.4s infinite backwards; }
  .est-vivante .hero-espace__jeton-avant { animation: espaceAvant 9s ease-in-out 1.4s infinite backwards; }
  .est-vivante .hero-espace__jeton-apres { animation: espaceApres 9s ease-in-out 1.4s infinite backwards; }
  .est-vivante .hero-espace__remplissage { animation: espaceAvancement 9s ease-in-out 1.4s infinite backwards; }
  .est-vivante .hero-espace__etape-2 { animation: espaceEtape 9s ease-in-out 1.4s infinite backwards; }
  .est-vivante .hero-espace__message { animation: espaceMessage 9s ease-in-out 1.4s infinite backwards; }
}
/* 1. Le client depose la piece : sa ligne s'eclaire, une barre se remplit. */
@keyframes espaceLigne {
  0%, 6%   { background: transparent; }
  10%, 26% { background: color-mix(in srgb, var(--accent-pale) 80%, transparent); }
  34%, 100% { background: transparent; }
}
@keyframes espaceDepot {
  0%, 8%   { opacity: 0; transform: scaleX(0); }
  10%      { opacity: 1; transform: scaleX(0); }
  22%      { opacity: 1; transform: scaleX(1); }
  26%, 100% { opacity: 0; transform: scaleX(1); }
}
/* 2. « a deposer » devient « recu ». */
@keyframes espaceAvant {
  0%, 22%  { opacity: 1; }
  25%, 84% { opacity: 0; }
  90%, 100% { opacity: 1; }
}
@keyframes espaceApres {
  0%, 22%  { opacity: 0; }
  25%, 84% { opacity: 1; }
  90%, 100% { opacity: 0; }
}
/* 3. L'avancement du dossier passe a l'etape suivante. */
@keyframes espaceAvancement {
  0%, 27%  { transform: scaleX(.45); }
  36%, 84% { transform: scaleX(1); }
  92%, 100% { transform: scaleX(.45); }
}
@keyframes espaceEtape {
  0%, 29%  { color: var(--encre-douce); font-weight: 400; }
  35%, 84% { color: var(--accent); font-weight: 600; }
  91%, 100% { color: var(--encre-douce); font-weight: 400; }
}
/* 4. Un message de l'avocat arrive ; 5. tout revient. */
@keyframes espaceMessage {
  0%, 40%  { opacity: 0; transform: translateY(8px); }
  47%, 82% { opacity: 1; transform: translateY(0); }
  89%, 100% { opacity: 0; transform: translateY(0); }
}

@media (max-width: 900px) { .hero-espace { max-width: 520px; } }
@media (max-width: 560px) {
  /* L'en-tete tient sur une ligne : le titre et le bouton pause, sans la mention secondaire. */
  .hero-demo__etat, .hero-espace__etat { display: none; }
  .hero-demo .piece__titre, .hero-espace .piece__titre { font-size: .74rem; letter-spacing: .06em; }
  .hero-espace .jeton { font-size: .68rem; }
  .hero-espace__ligne { height: 44px; font-size: .86rem; }
  .hero-espace__etapes { font-size: .72rem; }
}

/* =============================================================================
   LA SCENE DE LA CONTRADICTION (accueil de l'avocat, 25/09/2026) :
   sections/accueil-contradiction.php. Jouee UNE fois a l'entree a l'ecran :
   la piece 3, la piece 5, les deux dates surlignees, l'ecart, le verdict.
   Etat de base = etat final (sans script, ou animations reduites).
   ========================================================================== */
.contra .confront__cote { position: relative; }
.contra__date { padding: 0 .12em; border-radius: 3px; color: inherit; background: linear-gradient(transparent 55%, color-mix(in srgb, var(--alerte) 26%, transparent) 55%) no-repeat 0 0 / 100% 100%; }
.contra__ecart { position: absolute; right: 0; top: 0; transform: translateY(-50%); padding: 2px 10px; border: 1px solid var(--alerte-trait); border-radius: 99px; background: var(--carte); color: var(--alerte); font-size: .74rem; font-weight: 600; white-space: nowrap; }

@media (prefers-reduced-motion: no-preference) {
  /* En attente de son entree a l'ecran : les elements de la scene sont caches. */
  .contra.est-prete .contra__cote, .contra.est-prete .contra__ecart, .contra.est-prete .contra__verdict { opacity: 0; }
  .contra.est-prete .contra__date { background-size: 0% 100%; }
  /* Puis la scene tourne en continu (9 s), suspendue hors de l'ecran. */
  .contra.est-jouee .contra__cote { animation: contraCote1 9s ease-out infinite both; }
  .contra.est-jouee .contra__cote--2 { animation-name: contraCote2; }
  .contra.est-jouee .contra__date { animation: contraDate1 9s ease-out infinite both; }
  .contra.est-jouee .contra__date--2 { animation-name: contraDate2; }
  .contra.est-jouee .contra__ecart { animation: contraEcart 9s cubic-bezier(.2, .9, .3, 1.3) infinite both; }
  .contra.est-jouee .contra__verdict { animation: contraVerdict 9s ease-out infinite both; }
  .contra.est-hors-champ * { animation-play-state: paused !important; }
}
/* 1. La piece 3, puis la piece 5. */
@keyframes contraCote1 {
  0%, 2%   { opacity: 0; transform: translateY(10px); }
  8%, 88%  { opacity: 1; transform: translateY(0); }
  95%, 100% { opacity: 0; transform: translateY(0); }
}
@keyframes contraCote2 {
  0%, 8%   { opacity: 0; transform: translateY(10px); }
  14%, 88% { opacity: 1; transform: translateY(0); }
  95%, 100% { opacity: 0; transform: translateY(0); }
}
/* 2. Les deux dates se surlignent. */
@keyframes contraDate1 {
  0%, 20%  { background-size: 0% 100%; }
  27%, 88% { background-size: 100% 100%; }
  95%, 100% { background-size: 0% 100%; }
}
@keyframes contraDate2 {
  0%, 26%  { background-size: 0% 100%; }
  33%, 88% { background-size: 100% 100%; }
  95%, 100% { background-size: 0% 100%; }
}
/* 3. L'ecart ; 4. le verdict ; puis la carte se vide doucement et recommence. */
@keyframes contraEcart {
  0%, 38%  { opacity: 0; transform: translateY(-50%) scale(.7); }
  43%, 88% { opacity: 1; transform: translateY(-50%) scale(1); }
  95%, 100% { opacity: 0; transform: translateY(-50%) scale(1); }
}
@keyframes contraVerdict {
  0%, 46%  { opacity: 0; transform: translateY(12px); }
  53%, 86% { opacity: 1; transform: translateY(0); }
  93%, 100% { opacity: 0; transform: translateY(0); }
}
/* La pile de feuilles de la carte doit passer au-dessus du fond de la section (sinon elle ne se voit pas). */
#preuve > .enveloppe { position: relative; z-index: 1; }

/* =============================================================================
   LES CARTES DES ACCUEILS, HARMONISEES (25/09/2026) : une icone, le titre, le
   texte, un lien en pied aligne d'une carte a l'autre ; au survol, la carte se
   souleve et un filet d'accent se dessine en haut.
   ========================================================================== */
.grille--accueil { align-items: stretch; }
/* Six cartes : trois colonnes, jamais une rangee a moitie vide (25/09). */
.grille--trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .grille--trois { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .grille--trois { grid-template-columns: minmax(0, 1fr); } }
.carte--accueil { position: relative; display: flex; flex-direction: column; padding: 28px 26px 24px; border-radius: 14px; overflow: hidden; transition: transform .4s cubic-bezier(.2, .8, .2, 1), box-shadow .4s ease, border-color .4s ease; }
.carte--accueil::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.carte__icone { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 20px; border-radius: 12px; background: var(--accent-pale); color: var(--accent); transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
.carte__icone svg { width: 22px; height: 22px; }
.carte--accueil h3 { margin-bottom: .5em; font-size: 1.12rem; }
.carte--accueil p { color: var(--encre-douce); }
.carte--accueil .carte__lien { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 18px; font-size: .92rem; font-weight: 600; text-decoration: none; }
.carte__lien span { transition: transform .3s ease; }
@media (hover: hover) {
  .carte--accueil:hover { transform: translateY(-5px); border-color: var(--trait-fort); box-shadow: 0 2px 4px rgba(18,23,31,.05), 0 22px 48px rgba(18,23,31,.12); }
  .carte--accueil:hover::before { transform: scaleX(1); }
  .carte--accueil:hover .carte__icone { transform: scale(1.06); }
  .carte--accueil:hover .carte__lien span { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .carte--accueil, .carte--accueil::before, .carte__icone, .carte__lien span { transition: none; }
  .carte--accueil:hover { transform: none; }
}

/* =============================================================================
   L'APPARITION A L'ARRIVEE (25/09/2026) : chaque groupe [data-apparition]
   apparait quand il arrive a l'ecran, ses elements l'un apres l'autre
   (assets/js/demo-vivante.js pose .apparition-prete sur la page, puis
   .est-visible sur le groupe). Sans script, ou animations reduites : tout est
   visible d'emblee. L'animation ne garde pas son etat final (fill backwards) :
   le survol des cartes reste libre ensuite.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .apparition-prete [data-apparition]:not(.est-visible) > * { opacity: 0; }
  .apparition-prete [data-apparition].est-visible > * { animation: apparition .7s cubic-bezier(.2, .8, .2, 1) backwards; }
  .apparition-prete [data-apparition].est-visible > :nth-child(2) { animation-delay: .12s; }
  .apparition-prete [data-apparition].est-visible > :nth-child(3) { animation-delay: .24s; }
  .apparition-prete [data-apparition].est-visible > :nth-child(4) { animation-delay: .36s; }
}
@keyframes apparition { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }

/* =============================================================================
   LA PAGE FONCTIONNALITES (25/09/2026) : produit.php. Un sommaire qui suit la
   lecture, six domaines alternes texte / illustration, des illustrations en
   HTML (bordereau, chronologie, arbre, echange, brouillon, echeances).
   ========================================================================== */

/* ---- Le sommaire, colle sous la barre ---- */
.sommaire { position: sticky; top: var(--haut-barre, 69px); z-index: 15; background: color-mix(in srgb, var(--papier) 90%, transparent); backdrop-filter: saturate(1.3) blur(10px); border-bottom: 1px solid var(--trait); }
.sommaire__int { display: flex; gap: 6px; overflow-x: auto; padding-top: 10px; padding-bottom: 10px; scrollbar-width: none; }
.sommaire__int::-webkit-scrollbar { display: none; }
.sommaire__lien { display: inline-flex; align-items: center; gap: 8px; flex: none; padding: 7px 14px; border-radius: 999px; color: var(--encre-douce); font-size: .88rem; font-weight: 500; text-decoration: none; white-space: nowrap; transition: background .2s ease, color .2s ease; }
.sommaire__lien span { font-variant-numeric: tabular-nums; font-size: .74rem; color: var(--accent); font-weight: 600; }
.sommaire__lien:hover { background: var(--papier-creux); color: var(--encre); }
.sommaire__lien[aria-current="true"] { background: var(--accent-pale); color: var(--encre); }
.fonction { scroll-margin-top: calc(var(--haut-barre, 69px) + 60px); }

/* ---- Un domaine ---- */
.fonction__numero { display: block; margin-bottom: 10px; color: var(--accent); font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.fonction__chapo { color: var(--encre-douce); font-size: 1.06rem; max-width: 50ch; }
.fonction__liste { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: 12px; }
.fonction__liste li { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start; line-height: 1.5; color: var(--encre-douce); }
.fonction__liste svg { width: 20px; height: 20px; margin-top: 2px; padding: 3px; border-radius: 50%; background: var(--accent-pale); color: var(--accent); }
.fonction__liste strong { color: var(--encre); font-weight: 600; }
@media (min-width: 901px) { .duo--inverse > :first-child { order: 2; } }

/* ---- Les illustrations ---- */
.mini { margin: 0; max-width: 520px; justify-self: center; width: 100%; }
.mini .bordereau__ligne { grid-template-columns: 42px 1fr auto; }
.mini__source { font-size: .72rem; font-weight: 600; padding: 2px 9px; border-radius: 99px; background: var(--papier-creux); color: var(--encre-douce); white-space: nowrap; }
.mini__source--adverse { background: var(--alerte-pale); color: var(--alerte); }
.mini__alerte { margin: 0 14px 14px; padding: 10px 12px; border-left: 3px solid var(--alerte); border-radius: 8px; background: var(--alerte-pale); font-size: .86rem; }
.mini__alerte strong { color: var(--alerte); }

.chrono { list-style: none; margin: 0; padding: 14px 18px 12px 18px; position: relative; }
.chrono::before { content: ""; position: absolute; left: 104px; top: 22px; bottom: 22px; width: 2px; background: var(--trait-fort); }
.chrono li { position: relative; display: grid; grid-template-columns: 78px 1fr; gap: 26px; padding: 7px 0; font-size: .9rem; line-height: 1.45; }
.chrono li::before { content: ""; position: absolute; left: 82px; top: 13px; width: 10px; height: 10px; border-radius: 50%; background: var(--carte); border: 2px solid var(--accent); }
.chrono time { color: var(--encre-douce); font-size: .8rem; font-variant-numeric: tabular-nums; padding-top: 2px; }
.chrono em { color: var(--encre-douce); font-style: normal; }
.chrono__ecart span { color: var(--alerte); }
.chrono li.chrono__ecart::before { border-color: var(--alerte); background: var(--alerte-pale); } /* sans !important : l'animation doit pouvoir la faire changer */

.echange__fil { display: grid; gap: 12px; padding: 16px; }
.echange__question { justify-self: end; max-width: 80%; margin: 0; padding: 10px 14px; border-radius: 14px 14px 4px 14px; background: var(--accent); color: var(--sur-accent); font-size: .9rem; }
.echange__reponse { max-width: 92%; padding: 12px 14px; border: 1px solid var(--trait); border-radius: 14px 14px 14px 4px; background: var(--papier); font-size: .9rem; line-height: 1.5; }
.echange__reponse p { margin: 0 0 .5em; }
.echange__sources { display: flex; flex-wrap: wrap; gap: 6px; margin: .7em 0 0 !important; }
.echange__sources span { padding: 2px 9px; border-radius: 99px; background: var(--accent-pale); color: var(--accent); font-size: .74rem; font-weight: 600; }

.doc__etat { font-size: .74rem; font-weight: 600; padding: 2px 9px; border-radius: 99px; background: var(--info-pale); color: var(--info); }
.doc__page { margin: 14px; padding: 18px 20px; border: 1px solid var(--trait); border-radius: 6px; background: var(--carte); box-shadow: 0 1px 2px rgba(18,23,31,.05); font-family: var(--serif); }
.doc__entete { margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--trait); font-family: var(--sans); font-size: .74rem; color: var(--encre-douce); }
.doc__titre { margin: 0 0 6px; font-weight: 600; }
.doc__texte { margin: 0; font-size: .95rem; line-height: 1.6; }
.doc__texte del { color: var(--alerte); text-decoration-thickness: 1.5px; }
.doc__texte ins { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.doc__note { margin: 12px 0 0; font-family: var(--sans); font-size: .76rem; color: var(--encre-douce); }

.delais { list-style: none; margin: 0; padding: 6px 0 10px; }
.delais li { display: grid; grid-template-columns: 52px 1fr auto; gap: 14px; align-items: center; padding: 10px 18px; font-size: .9rem; }
.delais li + li { border-top: 1px solid var(--trait); }
.delais__date { display: grid; justify-items: center; padding: 4px 0; border-radius: 9px; background: var(--accent-pale); color: var(--accent); font-size: .7rem; text-transform: uppercase; line-height: 1.1; }
.delais__date strong { font-family: var(--serif); font-size: 1.3rem; font-weight: 500; }
.delais__etat { font-size: .74rem; font-weight: 600; padding: 2px 9px; border-radius: 99px; border: 1px solid var(--trait-fort); color: var(--encre-douce); }
.delais__etat--alerte { border-color: var(--alerte-trait); color: var(--alerte); background: var(--alerte-pale); }

@media (max-width: 560px) {
  .mini .bordereau__ligne { grid-template-columns: 34px 1fr auto; padding-left: 14px; padding-right: 14px; }
  .chrono::before { left: 88px; } /* centre sur les points : 18 + 66 + 5 - 1 */
  .chrono li { grid-template-columns: 62px 1fr; gap: 22px; }
  .chrono li::before { left: 66px; }
}
.fonctions-intro > .enveloppe { position: relative; z-index: 1; }

/* =============================================================================
   LES SCENES DE LA PAGE FONCTIONNALITES (25/09/2026). Chaque illustration
   [data-demo-scene] attend l'ecran (.est-prete), puis tourne en continu, 9 s
   (.est-jouee), suspendue hors de l'ecran (.est-hors-champ). Ses elements
   .scene-el arrivent a leur etape (.scene-k0 a .scene-k9) et disparaissent
   tous ensemble a la fin du tour. Sans script ou animations reduites : l'etat
   final, complet et immobile. Au survol, la carte se deplie comme a l'accueil.
   ========================================================================== */
.fonction > .enveloppe { position: relative; z-index: 1; } /* la pile de feuilles passe au-dessus du fond de la section */
.mini { transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s ease; }
.mini::before, .mini::after { transition: transform .45s cubic-bezier(.2, .8, .2, 1), opacity .45s ease; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .mini:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(18,23,31,.06), 0 28px 64px rgba(18,23,31,.2); }
  .mini:hover::before { transform: translate(14px, 14px) rotate(2deg); opacity: .7; }
  .mini:hover::after { transform: translate(28px, 28px) rotate(4deg); opacity: .45; }
}
.echange__attente { display: none; }
/* L'assistant ecrit a la place ou viendra la reponse : les deux partagent la meme case. */
.echange__attente, .echange__reponse { grid-row: 2; grid-column: 1; }
.scene-trait { --trait-echelle: 1; }
@media (prefers-reduced-motion: no-preference) {
  .mini.est-prete .scene-el { opacity: 0; }
  .mini.est-prete.scene-trait::before, .mini.est-prete .scene-trait::before { transform: scaleY(0); }
  .mini.est-hors-champ *, .mini.est-hors-champ *::before { animation-play-state: paused !important; }
  .mini.est-jouee .echange__attente { display: inline-flex; gap: 4px; justify-self: start; margin: 0; padding: 12px 14px; border: 1px solid var(--trait); border-radius: 14px 14px 14px 4px; background: var(--papier); animation: sceneAttente 9s ease-out infinite both; }
  .mini.est-jouee .echange__attente i { width: 6px; height: 6px; border-radius: 50%; background: var(--encre-douce); animation: scenePoint 1.2s ease-in-out infinite; }
  .mini.est-jouee .echange__attente i:nth-child(2) { animation-delay: .15s; }
  .mini.est-jouee .echange__attente i:nth-child(3) { animation-delay: .3s; }
  .mini.est-jouee .scene-trait::before { transform-origin: top; animation: sceneTrait 9s ease-out infinite both; }
  .mini.est-jouee .chrono__ecart span { animation: sceneEcart 9s ease-in-out infinite both; }
  .mini.est-jouee .chrono__ecart::before { animation: sceneEcartPoint 9s ease-in-out infinite both; }
  .mini.est-jouee .doc__texte del { animation: sceneBarre 9s ease-in-out infinite both; }
  .mini.est-jouee .scene-alerte .delais__etat--alerte { animation: sceneAlerte 9s ease-in-out infinite both; }
  .mini.est-jouee .scene-manque .etat--manque { animation: sceneManque 9s ease-in-out infinite both; }
  .mini.est-jouee .scene-k0 { animation: sceneK0 9s ease-out infinite both; }
  .mini.est-jouee .scene-k1 { animation: sceneK1 9s ease-out infinite both; }
  .mini.est-jouee .scene-k2 { animation: sceneK2 9s ease-out infinite both; }
  .mini.est-jouee .scene-k3 { animation: sceneK3 9s ease-out infinite both; }
  .mini.est-jouee .scene-k4 { animation: sceneK4 9s ease-out infinite both; }
  .mini.est-jouee .scene-k5 { animation: sceneK5 9s ease-out infinite both; }
  .mini.est-jouee .scene-k6 { animation: sceneK6 9s ease-out infinite both; }
  .mini.est-jouee .scene-k7 { animation: sceneK7 9s ease-out infinite both; }
  .mini.est-jouee .scene-k8 { animation: sceneK8 9s ease-out infinite both; }
  .mini.est-jouee .scene-k9 { animation: sceneK9 9s ease-out infinite both; }
}
@keyframes sceneK0 { 0%, 3% { opacity: 0; transform: translateY(8px); } 8%, 86% { opacity: 1; transform: translateY(0); } 93%, 100% { opacity: 0; transform: translateY(0); } }
@keyframes sceneK1 { 0%, 10% { opacity: 0; transform: translateY(8px); } 15%, 86% { opacity: 1; transform: translateY(0); } 93%, 100% { opacity: 0; transform: translateY(0); } }
@keyframes sceneK2 { 0%, 17% { opacity: 0; transform: translateY(8px); } 22%, 86% { opacity: 1; transform: translateY(0); } 93%, 100% { opacity: 0; transform: translateY(0); } }
@keyframes sceneK3 { 0%, 24% { opacity: 0; transform: translateY(8px); } 29%, 86% { opacity: 1; transform: translateY(0); } 93%, 100% { opacity: 0; transform: translateY(0); } }
@keyframes sceneK4 { 0%, 31% { opacity: 0; transform: translateY(8px); } 36%, 86% { opacity: 1; transform: translateY(0); } 93%, 100% { opacity: 0; transform: translateY(0); } }
@keyframes sceneK5 { 0%, 38% { opacity: 0; transform: translateY(8px); } 43%, 86% { opacity: 1; transform: translateY(0); } 93%, 100% { opacity: 0; transform: translateY(0); } }
@keyframes sceneK6 { 0%, 45% { opacity: 0; transform: translateY(8px); } 50%, 86% { opacity: 1; transform: translateY(0); } 93%, 100% { opacity: 0; transform: translateY(0); } }
@keyframes sceneK7 { 0%, 52% { opacity: 0; transform: translateY(8px); } 57%, 86% { opacity: 1; transform: translateY(0); } 93%, 100% { opacity: 0; transform: translateY(0); } }
@keyframes sceneK8 { 0%, 59% { opacity: 0; transform: translateY(8px); } 64%, 86% { opacity: 1; transform: translateY(0); } 93%, 100% { opacity: 0; transform: translateY(0); } }
@keyframes sceneK9 { 0%, 66% { opacity: 0; transform: translateY(8px); } 71%, 86% { opacity: 1; transform: translateY(0); } 93%, 100% { opacity: 0; transform: translateY(0); } }
@keyframes sceneTrait { 0%, 5% { transform: scaleY(0); } 40%, 86% { transform: scaleY(1); } 93%, 100% { transform: scaleY(0); } }
/* L'ecart de dates vire au rouge une fois les deux faits poses. */
@keyframes sceneEcart { 0%, 38% { color: var(--encre); } 45%, 86% { color: var(--alerte); } 93%, 100% { color: var(--encre); } }
@keyframes sceneEcartPoint { 0%, 38% { border-color: var(--accent); background: var(--carte); } 45%, 86% { border-color: var(--alerte); background: var(--alerte-pale); } 93%, 100% { border-color: var(--accent); background: var(--carte); } }
/* L'ancienne date se barre, la nouvelle s'insere (etape 6). */
@keyframes sceneBarre { 0%, 30% { text-decoration-color: transparent; color: var(--encre); } 38%, 86% { text-decoration-color: var(--alerte); color: var(--alerte); } 93%, 100% { text-decoration-color: transparent; color: var(--encre); } }
/* L'assistant ecrit entre la question et la reponse. */
@keyframes sceneAttente { 0%, 8% { opacity: 0; } 11%, 22% { opacity: 1; } 24%, 100% { opacity: 0; } }
@keyframes scenePoint { 0%, 80%, 100% { transform: translateY(0); opacity: .35; } 40% { transform: translateY(-4px); opacity: .9; } }
/* L'alerte d'echeance s'allume, la piece manquante bat une fois. */
@keyframes sceneAlerte { 0%, 30% { box-shadow: 0 0 0 0 var(--alerte-trait); } 36% { box-shadow: 0 0 0 6px transparent; } 42% { box-shadow: 0 0 0 0 var(--alerte-trait); } 48%, 100% { box-shadow: 0 0 0 5px transparent; } }
@keyframes sceneManque { 0%, 50% { transform: scale(1); } 54% { transform: scale(1.25); } 58%, 100% { transform: scale(1); } }

/* ---- La recherche juridique (Fonctionnalites, 05, 25/09/2026) ---- */
.recherche__corps { display: grid; gap: 4px; padding: 16px 18px 18px; }
.recherche__requete { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px; padding: 10px 12px; border: 1px solid var(--trait-fort); border-radius: 12px; background: var(--papier); font-size: .9rem; }
.recherche__loupe { display: grid; place-items: center; color: var(--encre-douce); }
.recherche__loupe svg { width: 16px; height: 16px; }
.recherche__texte { flex: 1 1 auto; min-width: 0; }
.recherche__filtre { padding: 2px 9px; border-radius: 99px; background: var(--accent-pale); color: var(--accent); font-size: .74rem; font-weight: 600; white-space: nowrap; }
.recherche__resultat { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; padding: 10px 0; border-top: 1px solid var(--trait); }
.recherche__ref { margin: 0; color: var(--accent); font-family: var(--serif); font-size: 1rem; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent); text-underline-offset: 3px; }
.recherche__quoi { grid-column: 1; margin: 0; color: var(--encre-douce); font-size: .86rem; }
.recherche__resultat .jeton { grid-column: 2; grid-row: 1 / span 2; max-width: 150px; white-space: normal; text-align: center; }
.recherche__pied { margin: 0; padding-top: 10px; border-top: 1px solid var(--trait); color: var(--encre-douce); font-size: .84rem; }
@media (max-width: 560px) {
  .recherche__resultat { grid-template-columns: minmax(0, 1fr); }
  .recherche__resultat .jeton { grid-column: 1; grid-row: auto; justify-self: start; max-width: none; margin-top: 4px; }
}