/* ============================================================
   AVIS EN NOTE DE PAPIER — fiche Kit (10/11/2026)
   Maquette validée par Latifa : une vraie petite note de papier de coton
   (image créée avec ChatGPT, scotch sauge compris), l'emblème officiel
   brodé dessus, le texte de l'avis écrit PAR-DESSUS en vrai texte.
   - Aucune valeur de couleur en dur : tout vient de tokens.css.
   - Écriture : La Belle Aurore (auto-hébergée, SIL Open Font License).
   - 15/11/2026 : les notes défilent en bande continue, comme les marques
     de l'accueil (même mécanisme, home-defile.js), sur la fiche Kit ET sur
     l'accueil : tous les avis se lisent sans clic. Source unique :
     src/_data/avis.json -> outil_avis_defile.py. Chaque carte est la note
     validée (même image, même écriture) ; un avis long allonge seulement le
     papier uni, jamais le scotch ni l'emblème brodé.
     Sans JavaScript, la bande défile (CSS) ; mouvement réduit : notes posées.
   ============================================================ */
@font-face {
  font-family: "La Belle Aurore";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/la-belle-aurore-latin.woff2") format("woff2");
}

.avn { --avn-courbe: cubic-bezier(.22, .7, .25, 1); --avn-ressort: cubic-bezier(.3, 1.3, .5, 1);  overflow-x: clip; }
.avn .section-inner { display: grid; justify-items: center; gap: var(--pas-4); }
/* L'astérisque du titre est un pseudo-élément : le script d'animation des titres du site découpe le texte en mots masqués, ce qui effaçait un <sup> (hauteur de ligne nulle). */
.avn .section-heading h2::after { content: "*"; font-family: var(--serif); font-style: normal; font-weight: 400; font-size: .36em; vertical-align: 1.15em; margin-inline-start: .08em; color: var(--bordeaux); }

/* ----- la bande des avis : le mécanisme de la bande des marques (home-studio.css), appliqué aux notes -----
   La série est écrite deux fois : la piste glisse d'une demi-longueur puis recommence sans saut (chaque carte porte son écart à droite).
   Pause au survol, au doigt (data-defile-toucher), au clavier, hors écran et sur le bouton « Pause » ; vitesse fixée par home-defile.js. */
.avd { --note-l: clamp(280px, 84vw, 380px); --ecart: clamp(18px, 2.4vw, 32px);
  position: relative; width: 100%; min-width: 0; overflow: hidden; padding: 22px 0 30px; touch-action: pan-y;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.avd__piste { list-style: none; margin: 0; padding: 0; display: flex; align-items: flex-start; width: max-content; animation: avd-defile var(--defile-duree, 60s) linear infinite; will-change: transform; }
@keyframes avd-defile { to { transform: translate3d(-50%, 0, 0); } }
@media (hover: hover) and (pointer: fine) { .avd:hover .avd__piste { animation-play-state: paused; } }
.avd:focus-within .avd__piste, .avd.is-pause .avd__piste, .avd.is-touche .avd__piste, .avd.is-hors-ecran .avd__piste { animation-play-state: paused; }

/* la carte : sa largeur fait l'unité (cqw) de tout ce qu'elle contient */
.avd__carte { flex: none; width: var(--note-l); margin: 0 var(--ecart) 0 0; padding: 0; container-type: inline-size; }
/* La note est la vraie image validée (note-brodee.webp, 1122 x 1402), jamais redessinée :
   - le haut (scotch, lignes 0-270) et le bas (emblème brodé, lignes 962-1402) sont deux <img> de cette image, à leur proportion exacte, jamais étirés ;
   - entre les deux, le papier uni de la même image (lignes 270-962). Pour un avis court, il est à l'échelle 1:1 et la note est identique à l'originale ;
     pour un avis long, seul ce papier uni s'allonge, le scotch et l'emblème ne bougent pas.
   Fond de l'image ramené à l'ivoire de la page (#fcfaf6) : aucun cadre visible. */
.avd__note { position: relative; box-sizing: border-box; margin: 0; min-height: 124.96cqw; display: flex; flex-direction: column;
  padding: 28.24cqw 14.4cqw 39.96cqw; transform: rotate(var(--rot, -3deg)); transform-origin: 50% 35%; }
.avd__note::before { content: ""; position: absolute; left: 0; right: 0; top: calc(24.06cqw - 1px); bottom: calc(39.22cqw - 1px);
  background: url("/assets/avis/note-brodee.webp") no-repeat 0 38.03% / 100% 202.6%; }
.avd__papier { position: absolute; left: 0; width: 100%; max-width: none; object-fit: cover; pointer-events: none; user-select: none; }
.avd__papier--haut { top: 0; height: 24.06cqw; object-position: 50% 0; }
.avd__papier--bas { bottom: 0; height: 39.22cqw; object-position: 50% 100%; }
.avd__ecrit, .avd__sig { position: relative; }
.avd__ecrit { margin: 0 0 6cqw; }
.avd__ecrit p { margin: 0; font-family: "La Belle Aurore", cursive; font-size: clamp(1.15rem, 5.4vw, 1.7rem); font-size: 6.9cqw; line-height: 1.34; color: var(--ink); overflow-wrap: break-word; }
.avd__sig { margin-top: auto; display: flex; align-items: center; gap: 2cqw; white-space: nowrap; font-family: var(--sans); font-weight: 500; font-size: .62rem; font-size: 2.5cqw; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-soft); }
.avd__stars { display: inline-flex; gap: .5cqw; color: var(--bordeaux); }
.avd__stars svg { width: 3.3cqw; height: 3.3cqw; min-width: 9px; min-height: 9px; fill: currentColor; display: block; }

/* le bouton Pause créé par home-defile.js après la bande (mêmes valeurs que la bande des marques, pour la fiche Kit qui ne charge pas home-studio.css) */
.avd + .defile__ctl { display: flex; justify-content: center; margin-top: 4px; }
.avd + .defile__ctl .defile__pause { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: 99px; background: transparent; color: var(--ink-soft); font: 500 .74rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: color .3s var(--ease), border-color .3s var(--ease); }
.avd + .defile__ctl .defile__pause:hover { color: var(--bordeaux); border-color: var(--bordeaux); }
.avd + .defile__ctl .defile__pause-ico { width: 10px; height: 12px; background: linear-gradient(90deg, currentColor 0 36%, transparent 36% 64%, currentColor 64% 100%); }
.avd + .defile__ctl .defile__pause[aria-pressed="true"] .defile__pause-ico { background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }

/* mouvement réduit : rien ne bouge, les notes sont posées les unes sous les autres (ou côte à côte si la place le permet), sans les copies */
@media (prefers-reduced-motion: reduce) {
  .avd { overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .avd__piste { animation: none; width: auto; flex-wrap: wrap; justify-content: center; row-gap: var(--ecart); }
  .avd__carte { margin-inline: calc(var(--ecart) / 2); }
  .avd__carte[aria-hidden="true"] { display: none; }
}

/* l'accueil : la bande des avis entre les marques et les éditions */
.avis-home { padding: clamp(56px, 7vw, 110px) 0 clamp(40px, 5vw, 80px); }
.avis-home .h2::after { content: "*"; font-family: var(--serif); font-style: normal; font-weight: 400; font-size: .36em; vertical-align: 1.15em; margin-inline-start: .08em; color: var(--bordeaux); }
.avis-home__pied { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 10px; text-align: center; }
.avis-home__pied .avn__bas { margin-inline: auto; }

/* ----- l'astérisque : en petit ----- */
.avn__bas { margin: 0; max-width: 52ch; text-align: center; font-size: .66rem; line-height: 1.5; color: color-mix(in srgb, var(--ink-soft) 88%, transparent); }
.avn__bas b { font-weight: 500; font-size: .85em; color: var(--bordeaux); }