@charset "UTF-8";
/* ══════════════════════════════════════════════════════════════════
   LE MUR D AVIS DU FOURNISSEUR — le style, et rien d autre.

   POURQUOI CE FICHIER EXISTE A PART : socle.css sert aussi aux 45
   fiches produit, accueil.css appartient a l accueil, et d autres
   sessions y travaillent en meme temps. Un bloc qui vient s ajouter
   sous la banniere n a pas besoin d entrer dans leurs fichiers pour
   vivre. Il est charge APRES eux : a specificite egale, c est lui qui
   tranche sur ce qui lui appartient.

   POURQUOI LES CARTES SONT EN PAPIER CREME SUR FOND NUIT : ces phrases
   ne sont pas de nous, et cela doit se VOIR avant meme d etre lu. Le
   reste de la page est sombre et sature ; ces cartes claires ont l air
   de coupures rapportees d ailleurs — ce qu elles sont exactement.

   CE QUE LE PROPRIETAIRE A DEMANDE, MOT POUR MOT : « des cartes
   rectangulaires de la meme longueur chacune, qui remplissent de
   gauche a droite toute la section, et qui defilent [...] avec leur
   nom bien bien, la date etc, qui defilent lentement de droite a
   gauche, avec comme sur la banniere des fleches a gauche et a
   droite. » Tout ce fichier decoule de cette phrase :
     · MEME LONGUEUR — largeur fixe identique (--avisf-w) ;
     · MEME HAUTEUR — `align-items:stretch`, pas une hauteur ecrite :
       la ligne prend la hauteur de la plus haute carte et toutes s y
       ajustent. C est ce qui permet a une carte depliee (« Lire la
       suite ») de grandir sans jamais rompre l alignement — elles
       grandissent toutes ensemble, il n y a rien a recalculer ;
     · TOUTE LA SECTION — le cadre ressort de la gouttiere du
       conteneur par une marge negative exactement egale a elle
       (--avisf-marge, la meme variable des deux cotes : deux nombres
       ecrits separement finissent toujours par diverger) ;
     · QUI DEFILENT — avis-mur.js pousse scrollLeft image par image ;
     · LES FLECHES — ce sont celles du socle, pas les notres. On ne
       les redessine pas, on les rentre de quelques pixels parce que
       la bande touche maintenant les bords.

   ET LE TEXTE COUPE N EST PAS DU TEXTE CACHE : la coupure a cinq
   lignes est mecanique (`line-clamp`), et le script mesure carte par
   carte si elle a VRAIMENT mordu. Si oui, et seulement si oui, un
   bouton « Lire la suite » parait. Un avis tronque sans moyen de le
   lire en entier serait un mensonge par omission ; un bouton pose sur
   un texte deja entier serait un mensonge tout court.

   POURQUOI RIEN N EST CACHE DERRIERE UN SURVOL : le navigateur de
   verification pilote une souris meme en mode telephone, donc il
   declenche des :hover qu un doigt ne declenchera jamais. Tout survol
   vit ici dans @media (hover:hover) and (pointer:fine) et n ajoute
   qu un relief — aucune information n y est enfermee.

   LE GLISSEMENT A LA MAIN N EST PAS ECRIT ICI : la bande porte AUSSI
   la classe .avis-mur__grille, que socle.js connait deja (doigt,
   souris maintenue, inertie, deux fleches sur grand ecran). Les
   proprietes de defilement sont malgre tout redeclarees ci-dessous :
   la bande doit se tirer meme si le socle change sous nos pieds.

   CE QUI A DISPARU ET NE DOIT PAS REVENIR : `scroll-snap-type`. Le
   ruban avance d une trentaine de pixels par seconde, en continu ; un
   aimant de calage le ramenerait sur un point d ancrage a chaque
   image, et le defilement deviendrait un tremblement.

   CE QU IL NE FAUT JAMAIS ECRIRE ICI : le nom du marchand. Ni en
   clair, ni dans un chemin, ni dans un commentaire.
   ══════════════════════════════════════════════════════════════════ */

/* Le mur ne parait que lorsque le script a peint au moins une carte —
   c est avis-mur.js qui retire cet attribut. Un titre « avis » suivi
   d un vide ferait plus de mal que pas de mur du tout. */
.avisf[hidden]{display:none}

.avisf{
  position:relative;
  background:var(--nuit,#120D0A);
  border-top:1px solid var(--b10,rgba(var(--laine),.10));
  padding:clamp(38px,6.5vh,84px) 0 clamp(30px,5vh,66px);

  /* ══ LES MESURES DU MUR, TOUTES ICI ══
     Une seule ligne a changer pour retailler les cartes, et le script
     n en connait aucune : il mesure ce que le navigateur a calcule. Un
     nombre ecrit des deux cotes finit toujours par diverger. */
  --avisf-marge:clamp(18px,5vw,56px); /* la gouttiere du conteneur    */
  --avisf-w:clamp(288px,84vw,432px);  /* largeur d une carte          */
  --avisf-gap:clamp(13px,1.4vw,20px); /* l air entre deux cartes      */
  --avisf-p:clamp(18px,1.6vw,24px);   /* la marge interieure          */
  --avisf-h:200px;                    /* un plancher, pas une consigne*/
  --avisf-l:5;                        /* lignes avant la coupure      */
  --avisf-voile:clamp(20px,4vw,56px); /* le fondu aux deux bords      */
  --avisf-et:15px;                    /* la hauteur d une etoile      */
  /* LA DUREE D UN TOUR DE RUBAN. 90 s est la valeur d origine, ecrite
     dans presse.css ; elle est reprise ici pour pouvoir etre RALENTIE
     sur petit ecran sans toucher a ce fichier-la (voir le dernier bloc
     de cette feuille). Ce n est pas une vitesse : c est le temps que
     met le motif de 40 cartes a passer en entier. Plus l ecran est
     etroit, plus la meme vitesse en pixels parait rapide — d ou trois
     valeurs, pas une. */
  --avisf-defile:90s;
}
/* Une lueur tiede en haut a gauche, pour que le bloc ne soit pas un
   rectangle noir coince entre deux blocs satures. Elle ne prend aucun
   clic : sans pointer-events:none elle avalerait le geste de tirer. */
.avisf::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(112% 78% at 4% 0%,
             rgba(240,168,48,.11),transparent 60%);
}
.avisf__d{
  position:relative;z-index:1;
  max-width:1320px;margin:0 auto;
  padding-left:var(--avisf-marge);padding-right:var(--avisf-marge);
}

/* ══ L EN-TETE : UN TITRE, UNE NOTE, ET C EST TOUT ══
   18/08 : « met juste avis du fournisseur c est tout, simplement, pas
   de detail ». La tete tenait cinq blocs de texte — etiquette doree,
   titre sur deux lignes, aveu de quatre lignes, ligne « chiffre de la
   plateforme, pas le notre », releve maison avec la ventilation des
   etoiles. Il en reste deux elements : le titre et la note.

   POURQUOI UNE SEULE LIGNE, ET DEUX CHIFFRES SEULEMENT : trois lignes
   d explication sous un titre d avis ne rassurent pas, elles alertent.
   Le titre porte la provenance (« du fournisseur »), la ligne porte la
   note et le nombre — les deux du MEME fichier, donc de la meme base :
   c est la seule chose qui doit rester surveillee ici (un 4,8 colle a
   un total qui n est pas le sien fait un chiffre faux dont chaque
   moitie est vraie — le piege qui avait deja coute une relecture).

   LA TETE EST UNE SEULE LIGNE QUAND ELLE TIENT : titre a gauche, note
   a droite, sur la meme ligne de base. En dessous de sa place, elle
   passe en deux lignes toute seule — aucun point de rupture ecrit. */
.avisf__tete{
  display:flex;flex-wrap:wrap;align-items:baseline;
  justify-content:space-between;
  gap:10px clamp(20px,4vw,56px);
  margin-bottom:clamp(20px,3.2vh,32px);
}

/* Le titre est declare en entier ici plutot que d emprunter
   .titre-rayon : d autres sessions ecrivent dans les feuilles
   communes, et ce bloc doit garder sa tete quoi qu il arrive la-bas.
   Pas d inclinaison — la maison a retire skewX de tous ses titres :
   une police penchee a la main est une police deformee. */
.avisf__h{
  margin:0;
  font-family:var(--f-titre,ui-serif,serif);
  font-size:clamp(1.7rem,3.8vw,2.8rem);line-height:1.08;
  letter-spacing:-.004em;color:var(--encre,#fff);
}

/* LA NOTE. Aucun chiffre n est ecrit dans la page : avis-mur.js les lit
   dans le fichier d avis, pour qu aucun ne puisse vieillir sans qu on
   le voie.

   LE CONTRASTE EST MESURE, PAS ESTIME : releve au navigateur, en
   couleurs CALCULEES et aplaties sur le fond reel #120D0A, cette ligne
   tenait deja 6,47:1 a .56 — elle passe a .72 parce qu elle n est plus
   une note de bas de page, c est le seul chiffre du bloc.

   PAS D ETOILES DESSINEES ICI, ET C EST UN CHOIX D HONNETETE : cinq
   etoiles pleines pour une moyenne de 4,8 arrondissent vers le haut a
   l oeil, et une note se lit exactement ou elle ne se lit pas.

   ET LA LIGNE RESTE EN FLUX NORMAL, PAS EN FLEX : l espace entre le
   nombre et « sur 5 » doit etre un VRAI espace, dans le texte. Un
   ecart de flex ne se lit pas — a la voix comme au copier-coller, la
   ligne dirait « 4,8sur 5 ». */
.avisf__chiffres{
  margin:0;
  font-family:var(--f-mono,ui-monospace,monospace);
  font-size:.8rem;line-height:1.5;letter-spacing:.06em;
  text-transform:uppercase;
  color:rgba(var(--laine),.72);
}
.avisf__chiffres b{
  color:var(--or-clair,#FFE0A3);
  font-family:var(--f-titre,ui-serif,serif);
  font-size:1.9rem;line-height:1;letter-spacing:0;font-weight:600;
}

/* ══ LE CADRE ══
   .avisf__cadre est le parent direct de la bande, et il ne contient
   QU elle : socle.js le transforme en .bande-cadre et y depose ses
   deux fleches, centrees sur la hauteur du cadre. S il contenait aussi
   le titre ou l invite, les fleches descendraient d autant.

   ET SON position:relative EST VITAL, pas decoratif : dans socle.css,
   la regle `.bande-cadre{position:relative}` est precedee d un
   commentaire ouvert par `\*` au lieu de `/*`. Le selecteur avale donc
   tout le commentaire, devient invalide, et la regle entiere est jetee
   par le navigateur. Les fleches, en position:absolute, se
   raccrocheraient alors au premier ancetre positionne — .avisf__d, qui
   fait toute la hauteur du bloc : elles atterriraient a mi-hauteur du
   titre. C est cette ligne-ci qui les tient a leur place.

   LES MARGES NEGATIVES SONT LA DEMANDE, PAS UN EFFET : « qui
   remplissent de gauche a droite toute la section ». Elles valent
   exactement la gouttiere de .avisf__d, donc le cadre retombe sur le
   bord de la BOITE du conteneur — jamais au-dela. C est ce qui les
   rend sures : une pleine largeur ecrite en 100vw deborderait de la
   largeur de la barre de defilement et ferait glisser toute la page
   sur l horizontale. */
.avisf__cadre{
  position:relative;
  margin-left:calc(-1 * var(--avisf-marge));
  margin-right:calc(-1 * var(--avisf-marge));
}
/* Les fleches du socle sont posees a -6px du cadre : la ou le cadre
   s arretait a la gouttiere, elles mordaient joliment dessus. Le cadre
   touche maintenant le bord de l ecran, et -6px les mettrait donc
   a moitie dehors. On les rentre — c est la seule chose qu on leur
   change, elles restent celles du socle, memes rondeurs, meme voile,
   meme apparition. */
.avisf__cadre .bande-fleche--g{left:clamp(8px,1.6vw,22px)}
.avisf__cadre .bande-fleche--d{right:clamp(8px,1.6vw,22px)}

/* ══ LA BANDE ══
   LA CARTE 1 COUPÉE À GAUCHE (relevé du 17/08 : x = -23 px, même sur
   PC). Vérifié ligne à ligne ICI avant d écrire : la marge négative de
   .avisf__cadre vaut EXACTEMENT la gouttière de .avisf__d (même
   variable des deux côtés), et le padding-gauche de la bande — le
   voile, jamais sous 20 px — garde la carte 1 entière au repos. La
   géométrie de ce fichier ne produit donc aucun x négatif. Le -23
   mesuré vient de la peau journal : #avisfBande.p-marquise
   (presse.css) TRANSLATE la bande en continu, et dès les premières
   secondes la carte 1 sort par la gauche — à corriger dans les
   fichiers presse.* (autre chantier), pas ici.
   Ce fichier ferme quand même les deux portes qui lui appartiennent,
   dans le bloc ci-dessous :
   · scroll-snap-type:none — la bande porte AUSSI .avis-mur__grille,
     et socle.css lui donne `x mandatory` : exactement ce que l en-tête
     de ce fichier déclare interdit (« ne doit pas revenir »), revenu
     par la seconde classe. Aucune carte ne porte de snap-align
     aujourd hui, mais qu une seule en reçoive un et le calage
     recollerait la bande n importe où après chaque glissement ;
   · scroll-padding-left = le voile — tout défilement programmé
     (flèches du socle, scrollBy) repose la carte visée APRÈS le
     fondu du bord, jamais dessous. Ni l un ni l autre ne touche au
     défilement lui-même : le doigt, l inertie et les flèches écrivent
     scrollLeft, qui reste libre. */
.avisf__bande{
  scroll-snap-type:none;
  scroll-padding-left:var(--avisf-voile);
  display:flex;
  /* stretch, et c est LA regle qui fait tout le travail : la ligne
     prend la hauteur de la plus haute carte, toutes les autres s y
     etirent. L egalite n a donc rien a calculer. */
  align-items:stretch;
  gap:var(--avisf-gap);
  overflow-x:auto;overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  /* Le doigt garde son comportement natif : horizontal = la bande
     glisse, vertical = la page defile. `pan-y` interdirait justement
     le geste pour lequel la bande existe. (socle.js repose la valeur
     en ligne, par-dessus toute feuille gardee en cache.) */
  touch-action:auto;
  scrollbar-width:none;
  /* AUCUN scroll-snap : le ruban ecrit scrollLeft a chaque image, un
     aimant de calage le tirerait en arriere soixante fois par seconde.
     AUCUN scroll-behavior:smooth non plus, pour la meme raison — les
     fleches du socle demandent leur douceur en JS (behavior:'smooth'),
     ce qui prime sur cette declaration et n est donc pas perdu. */
  scroll-behavior:auto;
  /* Le haut et le bas laissent passer le relief des cartes et leur
     leger soulevement au survol — sans ces 12 et 26 px,
     overflow-y:hidden les couperait net.
     A GAUCHE, LA MARGE VAUT EXACTEMENT LE VOILE, et ce n est pas de
     l esthetique : au repos la premiere carte commence donc la ou le
     fondu se termine. Sans elle, la carte 1 paraitrait deja palie au
     chargement — on croirait en avoir rate une avant elle. */
  padding:12px 0 26px var(--avisf-voile);
}
/* LA MEME CHOSE A DROITE, MAIS EN FAUX ELEMENT, PAS EN PADDING : dans
   un conteneur qui defile, la marge interieure de FIN n est pas
   comptee dans la zone defilable par tous les navigateurs — la
   derniere carte se retrouve collee au bord chez les uns, aeree chez
   les autres. Un dernier element de flex, lui, est compte partout.
   Il ne porte aucun texte et n entre pas dans bande.children : le
   raccord du ruban se mesure sur les cartes, il n en sait rien. */
.avisf__bande::after{content:"";flex:0 0 var(--avisf-voile)}
.avisf__bande::-webkit-scrollbar{display:none}
/* La bande se defile aussi aux fleches du clavier, donc elle est
   atteignable au clavier — et cela doit se voir. */
.avisf__bande:focus-visible{
  outline:2px solid var(--or,#F0A830);outline-offset:4px;border-radius:16px;
}

/* LE FONDU DES DEUX BORDS n est pose QUE lorsque la bande deborde
   vraiment (.avisf--tirable, posee par le script apres mesure) : sur
   une bande qui tient en entier, un bord qui palit annoncerait une
   suite qui n existe pas. Le fondu de gauche ne mord sur rien tant
   qu on n a pas defile — voir la marge interieure ci-dessus. */
.avisf--tirable .avisf__bande{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--avisf-voile),
                     #000 calc(100% - var(--avisf-voile)),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 var(--avisf-voile),
                     #000 calc(100% - var(--avisf-voile)),transparent 100%);
}

/* ══ UNE CARTE ══
   Rectangle en longueur : 432 px de large pour ~225 de haut sur grand
   ecran. Largeur FIXE et identique pour toutes — c est elle qui, avec
   le stretch, donne la regularite demandee. */
.avisf__c{
  position:relative;
  flex:0 0 var(--avisf-w);width:var(--avisf-w);
  min-height:var(--avisf-h);
  display:flex;flex-direction:column;
  margin:0;padding:var(--avisf-p);
  border-radius:20px;
  /* Du papier, pas un aplat : la lumiere descend du coin haut gauche,
     le bas se rechauffe legerement. Un degrade fige ne coute qu une
     peinture, une seule fois — rien ici ne s anime. */
  background:linear-gradient(163deg,#FFFDF8 0%,var(--creme,#FCF6EC) 44%,#F5EDDE 100%);
  color:#241A12;
  /* Trois reliefs, et un seul bouge. Ceux-ci sont l ombre au repos, le
     cerne interieur et le filet de lumiere du haut ; l ombre profonde
     du survol vit dans ::before et ne fait varier que son opacite —
     animer une box-shadow, c est la redessiner a chaque image sur
     toute la surface. */
  box-shadow:0 14px 30px -26px rgba(0,0,0,.92),
             inset 0 1px 0 rgba(var(--laine),.75),
             inset 0 0 0 1px rgba(36,26,18,.06);
  transition:transform 300ms var(--e-sortie,cubic-bezier(.22,1,.36,1));
}
/* L ombre profonde, prete a etre revelee. inset:0 + z-index:-1 : elle
   se peint DERRIERE le fond creme de la carte, dans le contexte
   d empilement de .avisf__d (position:relative + z-index:1) — donc
   jamais derriere la section elle-meme, ou elle disparaitrait. */
.avisf__c::before{
  content:"";position:absolute;inset:0;z-index:-1;
  border-radius:inherit;pointer-events:none;
  box-shadow:0 28px 48px -26px rgba(0,0,0,1);
  opacity:0;transition:opacity 300ms var(--e-doux,ease);
}
/* Le filet dore du bord haut : le seul ornement porte par la carte
   elle-meme, et il ne coute rien — un degrade fige sur deux pixels de
   haut. Au survol il ne change QUE d opacite. */
.avisf__c::after{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  border-radius:20px 20px 0 0;pointer-events:none;
  background:linear-gradient(90deg,var(--or,#F0A830),rgba(240,168,48,0) 74%);
  opacity:.62;transition:opacity 300ms var(--e-doux,ease);
}

/* ══ L EN-TETE DE LA CARTE : LE NOM D ABORD ══
   Le proprietaire : « avec leur nom bien bien, la date etc ». Le nom
   passe donc en tete, en serif, a taille de titre ; la date le suit ;
   les etoiles tiennent le coin droit. C est un <figcaption>, et il est
   PREMIER enfant du <figure> : la legende d une citation a le droit de
   la preceder, et un lecteur d ecran annonce ainsi qui parle avant de
   lire ce qui est dit. */
.avisf__hd{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;gap:0 13px;
  padding-bottom:14px;
  border-bottom:1px solid rgba(36,26,18,.13);
}
/* LE GUILLEMET FERMANT, EN FILIGRANE. Un signe de ponctuation, pas un
   dessin d etre anime : la regle de la maison interdit les seconds,
   jamais les premiers. Il est pose en absolu, donc il n entre PAS dans
   la grille de l en-tete — un pseudo-element positionne cesse d etre
   un element de grille. Ecrit en echappement \201D plutot qu en clair :
   un caractere hors ASCII dans une feuille servie sans en-tete de
   jeu de caracteres devient deux hieroglyphes.
   Il est assez pale pour ne rien voler au texte : mesure sur le papier
   creme, le texte de l avis garde 12,9:1 la ou le guillemet passe
   dessous. */
.avisf__hd::after{
  content:"\201D";position:absolute;z-index:0;
  right:calc(var(--avisf-p) - 4px);bottom:-6px;
  font-family:var(--f-titre,ui-serif,serif);
  font-size:clamp(66px,7vw,92px);line-height:.7;
  color:var(--or-fonce,#A96F14);opacity:.11;
  pointer-events:none;user-select:none;
}
/* Le monogramme : UNE LETTRE dans un disque. Pas une silhouette, pas
   un buste, pas un avatar dessine — la regle de la maison interdit
   tout etre anime dessine, et une initiale n en est pas un. */
.avisf__mono{
  width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;
  font-family:var(--f-titre,ui-serif,serif);font-size:1.06rem;font-weight:600;
  line-height:1;color:#7E5210;
  background:linear-gradient(150deg,rgba(240,168,48,.30),rgba(240,168,48,.11));
  box-shadow:inset 0 0 0 1px rgba(169,111,20,.30);
}
.avisf__id{min-width:0;display:flex;flex-direction:column;gap:4px}
/* AUCUNE troncature sur le nom : un prenom coupe est une information
   perdue. S il est long, il passe a la ligne et la carte grandit — et
   comme elles s etirent toutes ensemble, l alignement tient. */
.avisf__n{
  font-family:var(--f-titre,ui-serif,serif);
  font-size:1.06rem;line-height:1.2;font-weight:600;
  letter-spacing:.002em;color:#1E1610;overflow-wrap:break-word;
}
/* La date porte la classe que le script lui donne — pas <time> : une
   date ecrite « 22 juillet 2026 » n est pas une valeur machine, et un
   <time> sans datetime valide est un balisage faux.

   ELLE EST GRISE, PAS EFFACEE. La date est ce qui rend un avis
   verifiable : sans elle, « les 40 plus recents, dans l ordre » est une
   affirmation que le visiteur doit croire sur parole. Mesuree sur le
   papier creme #FCF6EC, elle etait a 3,77:1 pour 11 px — sous les
   4,5:1. Portee a .72, soit 5,20:1. */
.avisf__dt{
  font-family:var(--f-mono,ui-monospace,monospace);
  font-size:.655rem;letter-spacing:.09em;text-transform:uppercase;
  line-height:1.2;color:rgba(36,26,18,.72);
}

/* Les cinq etoiles tiennent maintenant dans UN dessin, pas cinq : sur
   quatre-vingts cartes, cinq images par carte faisaient quatre cents
   objets a peindre pour un telephone d entree de gamme. Le rapport du
   viewBox est 128 sur 24, d ou la largeur — ecrite en calcul et non en
   `auto`, pour que la place soit reservee avant meme le dessin. */
.avisf__et{line-height:0}
.avisf__et svg{
  display:block;
  height:var(--avisf-et);width:calc(var(--avisf-et) * 16 / 3);
}
.avisf__et .p{fill:#B8791A}          /* etoile pleine */
.avisf__et .v{fill:rgba(36,26,18,.16)}/* etoile vide  */

/* ══ LE TEXTE ══
   Coupe a cinq lignes, jamais reecrit. `pre-line` garde les retours a
   la ligne ecrits par le client : les ecraser serait deja une
   retouche, et ils comptent comme des lignes dans la coupure.
   z-index:1 : le texte passe au-dessus du guillemet en filigrane. */
.avisf__t{
  position:relative;z-index:1;
  margin:14px 0 0;
  font-size:.95rem;line-height:1.6;color:rgba(36,26,18,.88);
  white-space:pre-line;overflow-wrap:break-word;
  display:-webkit-box;-webkit-box-orient:vertical;
  -webkit-line-clamp:var(--avisf-l);line-clamp:var(--avisf-l);
  overflow:hidden;
}
/* Depliee : plus aucune coupure. La carte grandit, la ligne entiere
   grandit avec elle, les hauteurs restent egales. */
.avisf__c.est-ouvert .avisf__t{
  display:block;overflow:visible;
  -webkit-line-clamp:unset;line-clamp:unset;
}

/* ══ « LIRE LA SUITE » ══
   Pose par le script UNIQUEMENT sur les cartes ou la coupure a
   vraiment mordu (.avisf__c--long). Invisible partout ailleurs.
   `margin-top:auto` le colle au bas de la carte : comme toutes les
   cartes ont la hauteur de la plus haute, les boutons se retrouvent
   sur une meme ligne au lieu de flotter chacun a sa hauteur. */
.avisf__plus{
  display:none;position:relative;z-index:1;
  align-self:flex-start;margin:12px 0 0;padding:0;
  border:0;background:none;cursor:pointer;
  font-family:var(--f-mono,ui-monospace,monospace);
  font-size:.695rem;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;color:#7E5210;
  box-shadow:0 1px 0 rgba(126,82,16,.42);
  transition:color 180ms var(--e-doux,ease),box-shadow 180ms var(--e-doux,ease);
}
.avisf__c--long > .avisf__plus{display:inline-flex;align-items:center;gap:7px;margin-top:auto}
/* La cible fait 44 px de haut sans que le mot en fasse 44 : la zone
   sensible deborde en haut et en bas, invisible. */
.avisf__plus::after{
  content:"";position:absolute;left:-10px;right:-10px;
  top:50%;height:44px;transform:translateY(-50%);
}
.avisf__plus span{font-size:.9em;transition:transform 180ms var(--e-sortie,ease)}
.avisf__plus:focus-visible{outline:2px solid #7E5210;outline-offset:5px;border-radius:3px}
/* Une carte ouverte remet sa fleche a l endroit : elle ne promet plus
   une suite, elle propose de refermer. */
.avisf__c.est-ouvert .avisf__plus span{transform:rotate(180deg)}

/* ══ L INVITE A TIRER ══
   Elle ne parait que si la bande deborde VRAIMENT : c est avis-mur.js
   qui pose .avisf--tirable apres mesure. Promettre un geste impossible
   est une facon de mentir, meme petite.

   ET ELLE DOIT SE LIRE, sinon elle ne promet rien du tout : sous 861 px
   les fleches sont cachees, cette phrase est alors le SEUL indice qu il
   reste 39 avis derriere le bord de l ecran. Mesuree a 3,54:1 sur
   #120D0A pour 11 px — le plus mauvais contraste du bloc. Portee a .58,
   soit 6,86:1. */
.avisf__glisse{
  display:none;margin:2px 0 0;
  font-family:var(--f-mono,ui-monospace,monospace);
  font-size:.71rem;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(var(--laine),.58);
}
.avisf--tirable .avisf__glisse{display:block}

/* ══ L ENTREE DES CARTES ══
   Commandee par le temps, jamais par un observateur : une carte que
   l on ne voit pas apparaitre est une carte perdue. Le retard est
   plafonne a neuf crans, sinon la quarantieme entrerait deux secondes
   apres la premiere.

   `backwards` ET NON `both`, ET C EST UN VRAI PIEGE : avec `both`,
   l etat final de l animation reste applique pour toujours et prend le
   pas sur les declarations normales — le transform:translateY(-6px) du
   survol n aurait donc AUCUN effet une fois l entree terminee. En
   `backwards`, l animation ne retient que son etat de depart pendant
   le delai, puis rend la main au CSS ordinaire. */
@keyframes avisfMonte{
  from{opacity:0;transform:translateY(16px)}
  to  {opacity:1;transform:none}
}
.avisf__c{
  animation:avisfMonte 500ms var(--e-sortie,cubic-bezier(.22,1,.36,1)) backwards;
  animation-delay:calc(min(var(--i,0),9) * 46ms);
}
/* Les copies du ruban n entrent pas en scene : elles n ont jamais ete
   absentes, elles ne sont que le meme mur remis bout a bout. Les faire
   monter, c est allumer quatre-vingts animations pour rien. */
.avisf__c--bis{animation:none}

@media(hover:hover) and (pointer:fine){
  .avisf__c:hover{transform:translateY(-6px)}
  .avisf__c:hover::before{opacity:1}
  .avisf__c:hover::after{opacity:1}
  .avisf__plus:hover{color:#603F0B;box-shadow:0 1px 0 rgba(96,63,11,.9)}
  .avisf__plus:hover span{transform:translateX(3px)}
  .avisf__c.est-ouvert .avisf__plus:hover span{transform:rotate(180deg)}
}
/* Le clavier a droit au meme relief que la souris : sans cette regle,
   la carte dont le bouton vient d etre atteint au clavier serait la
   seule a ne rien montrer. */
.avisf__c:focus-within{transform:translateY(-6px)}
.avisf__c:focus-within::before{opacity:1}
.avisf__c:focus-within::after{opacity:1}

@media(prefers-reduced-motion:reduce) and (min-width:999999px) /* desarme 17/08 : data-calme est le seul interrupteur */{
  .avisf__c,.avisf__c::before,.avisf__c::after,
  .avisf__plus,.avisf__plus span{
    animation:none;transition:none;
  }
}
/* Le bouton « Reduire les animations » du pied de page : meme regle.
   On coupe le MOUVEMENT, jamais le CONTENU — les cartes restent la,
   lisibles, et la bande se tire toujours a la main. */
html[data-calme="1"] .avisf__c,
html[data-calme="1"] .avisf__c::before,
html[data-calme="1"] .avisf__c::after,
html[data-calme="1"] .avisf__plus,
html[data-calme="1"] .avisf__plus span{animation:none;transition:none}

/* ══ TELEPHONE ══
   Les etoiles quittent le coin droit et passent sous l identite : sur
   288 px de large elles volaient au nom la moitie de sa place, et un
   nom qui passe a la ligne fait grandir les quarante cartes d un coup. */
@media(max-width:600px){
  .avisf__hd{grid-template-columns:auto minmax(0,1fr);row-gap:12px}
  .avisf__et{grid-column:1 / -1}
  .avisf__n{font-size:1rem}
  .avisf__hd::after{bottom:-2px;opacity:.09}
  /* La note repasse sous le titre : cote a cote sur 320 px, le nombre
     d avis se casserait en deux lignes derriere le « 4,8 ». */
  .avisf__tete{display:block}
  .avisf__chiffres{margin-top:10px}
}

/* ══════════════════════════════════════════════════════════════════
   ══ LE RUBAN QUI TOURNE : POURQUOI IL LAISSAIT UN BLANC ══
   presse.js met la bande en marquise : il DOUBLE les cartes
   (cloneNode) et presse.css translate la bande de 0 a -50 % en
   90 secondes. La boucle n est sans couture que si la moitie de la
   largeur tombe EXACTEMENT sur le debut de la copie — au pixel.

   ➊ LA CAUSE DU BLANC, ET ELLE N ETAIT PAS DANS LA GEOMETRIE DES
     CARTES. presse.css porte, 34 lignes plus haut que sa marquise :
       #avisFournisseur .avisf__bande,#avisfBande{max-width:100%}
     pose le 17/08 pour empecher la bande (26 822 px) d elargir le
     document. Ce plafond ANNULE le `width:max-content` de la marquise :
     la bande retombe a la largeur du cadre, ses 80 cartes la debordent
     — et `overflow-x:auto` (plus haut dans ce fichier) les COUPE au
     bord de cette boite.
     Des lors, `translate3d(-50%)` ne vaut plus la moitie du ruban mais
     la moitie du CADRE : environ 660 px sur un ecran de bureau. La
     boite entiere glisse donc vers la gauche en laissant derriere elle,
     a droite, un vide qui grandit jusqu a 660 px avant de sauter d un
     coup au bout des 90 secondes. C est le defaut signale, mot pour
     mot : « au bout d un moment ils se decalent trop a gauche, ça
     laisse un blanc ». Le plafond est leve ici pour la seule marquise,
     et ce qu il protegeait est rendu autrement : c est le CADRE qui
     coupe le ruban, au pixel ou son fondu s arrete. Le document ne
     s elargit donc pas davantage qu avant.

   ➋ ET LA GEOMETRIE, ENSUITE, DOIT TOMBER JUSTE.
   LE COMPTE, FAIT A LA MAIN AVANT D ECRIRE (w = largeur d une carte,
   g = l ecart, v = --avisf-voile) :
     periode reelle du motif  = 40 cartes + 40 ecarts   = 40w + 40g
     largeur de la bande      = v (marge interieure gauche)
                              + 80w + 79g               (les 80 cartes)
                              + g + v                   (l ecart et le
                                faux element ::after de fin de bande)
                              = 80w + 80g + 2v
     la moitie de cette largeur = 40w + 40g + v
   La translation depassait donc la periode de v — soit jusqu a 56 px
   (clamp(20px,4vw,56px)) : une fois le plafond leve, le ruban aurait
   encore saute de ces 56 px a chaque tour. Ce n est pas le blanc
   signale — c est le defaut qu on aurait trouve juste apres l avoir
   repare, et il ne se voit qu au bout d un cycle entier.

   LES DEUX PIECES EN TROP SONT ICI, DANS CE FICHIER, ET ELLES SE
   RETIRENT ICI — sans toucher a presse.* :
   · la marge interieure gauche (le voile au repos) : la marquise a son
     propre fondu, porte par le CADRE immobile (.p-marquise-cadre) ;
   · le faux element de fin : il garde sa raison d etre (l ecart de fin
     que les navigateurs ne comptent pas tous dans un conteneur qui
     defile) mais passe a une largeur NULLE. L ecart qui le precede,
     lui, reste — et c est justement lui qui manquait :
     80w + 79g + g = 80w + 80g, dont la moitie vaut 40w + 40g, la
     periode exacte. Reste nul : 0 px de decalage par tour.

   ET LE MASQUE DE LA BANDE EST COUPE. `.avisf--tirable .avisf__bande`
   pose un fondu sur la BANDE ; un masque porte par un element qui se
   translate voyage AVEC lui — les deux bords de fondu s en vont donc
   se promener au milieu du ruban et y effacent des cartes entieres.
   Sous marquise, le fondu est celui du cadre, et lui seul. */
/* Le plafond de presse.css est pose par un SELECTEUR D IDENTIFIANT
   (1,1,0) : aucune pile de classes ne le battra jamais. Il faut donc
   passer par l identifiant nous aussi, avec une classe de plus —
   (1,2,0) — et seulement sous marquise : hors marquise, le plafond
   garde tout son sens. */
.avisf #avisfBande.p-marquise{max-width:none}
/* Ce que le plafond protegeait, le cadre le rend : il coupe le ruban a
   sa propre largeur, exactement la ou son fondu s eteint. Sans lui, un
   ruban de 26 000 px passerait sous les marges de l ecran large, la ou
   le masque du cadre ne l atteint plus. */
.avisf .avisf__cadre.p-marquise-cadre{overflow:hidden}
.avisf .avisf__bande.p-marquise{
  padding-left:0;
  -webkit-mask-image:none;
          mask-image:none;
}
.avisf .avisf__bande.p-marquise::after{flex-basis:0}
/* Un ruban qui avance tout seul n a pas a demander qu on le tire : la
   phrase promettrait un geste que `width:max-content` a rendu
   impossible (plus rien ne deborde, donc plus rien ne se defile). */
.avisf__cadre.p-marquise-cadre + .avisf__glisse{display:none}

/* ══════════════════════════════════════════════════════════════════
   ══ LE TELEPHONE : TROP VITE, TROP GRANDES, IMPOSSIBLE A TOUCHER ══
   Trois defauts signales le 18/08, mot pour mot : « sur mobile les avis
   vont trop vite, sont trop grands, on peut pas cliquer dessus pour
   lire les avis ». Ce sont TROIS defauts, pas un, et ils se reparent
   separement. Tout ce qui suit est mesure avant d etre ecrit.

   ➊ TROP VITE — ET LA VITESSE N AVAIT PAS CHANGE.
   Le ruban avance a la meme allure partout : 40 cartes + 40 ecarts
   passent en 90 s. Ce qui change avec l ecran, c est le TEMPS QU UNE
   CARTE MET A LE TRAVERSER — et c est ce temps-la que l oeil lit comme
   « la vitesse ». Releve, cartes de presse.css (min(320px,78vw)) :
       1320 px : 148 px/s — une carte traverse l ecran en 8,9 s
        414 px : 148 px/s —                                  2,8 s
        375 px : 136 px/s —                                  2,8 s
        320 px : 117 px/s —                                  2,7 s
   Trois fois plus rapide a l oeil sur un telephone, sans qu une seule
   ligne de code ne dise « plus vite ». On ne ralentit donc pas « un
   peu » : on rend la TRAVERSEE egale a celle du bureau (~9 s), ce qui
   demande 280 s sous 600 px et 150 s entre 600 et 900 px.
   Rien n est touche dans presse.css : sa duree y est ecrite dans le
   raccourci `animation` (specificite 1,1,0) ; on repose ici la seule
   longue main `animation-duration` avec une classe de plus (1,2,0) —
   apres specificite, une longue main forte bat un raccourci faible,
   propriete par propriete. Le reste du raccourci (le nom, le linear,
   l infinite) reste celui de presse.css, intact.

   ➋ TROP GRANDES — 78 % DE L ECRAN, C EST UNE CARTE PLEIN CADRE.
   A 375 px la carte fait 292 px ; il reste 69 px, dont 20 avales par le
   fondu du cadre : on devine 49 px de la suivante, deja palis. Une
   bande dont on ne voit qu une carte n a pas l air d une bande, elle a
   l air d un bloc — et on ne pense pas a tirer ce qui ne depasse pas.
   Elle passe a 70 % (min(70vw,290px)) : a 375 px, 262 px de carte et
   79 px de la suivante EN CLAIR, apres le fondu. C est ce bout de carte
   qui fait tirer. Le texte perd 26 px de large ; la marge interieure
   passe de 18 a 16 px pour lui en rendre 4.

   ➌ ON NE PEUT PAS CLIQUER — LE PLUS GRAVE, ET LE PLUS SIMPLE.
   Un bouton porte par un element en `transform` continu est une cible
   qui fuit sous le doigt : a 136 px/s, les ~200 ms qu il faut pour
   viser et poser le doigt deplacent « Lire la suite » de 27 px, soit
   plus que sa propre hauteur. Deux reparations, aucune cachee derriere
   un survol (le doigt ne survole pas) :
   · LE RUBAN SE FIGE DES QUE LE DOIGT SE POSE (.est-tenu, posee par
     avis-mur.js sur pointerdown) et TANT QU UN AVIS EST OUVERT
     (.est-fige). La cible s arrete avant meme que le doigt ne se leve —
     donc le clic tombe forcement la ou il visait ;
   · LA CIBLE DEVIENT LA CARTE ENTIERE (avis-mur.js), et le bouton
     lui-meme s etale sur toute la largeur : sa zone sensible passe de
     ~130 x 44 px a ~262 x 56 px. Le mot ecrit ne grossit pas, seule la
     surface qui l ecoute.
   Rien n est cache, rien n est retire : le bouton reste ecrit, il dit
   toujours la meme chose, et le texte des avis n a pas bouge d un
   caractere. ══════════════════════════════════════════════════════ */

/* ➊ La duree, reprise a la seule fin de pouvoir la changer. */
.avisf #avisfBande.p-marquise{animation-duration:var(--avisf-defile,90s)}

/* ➌ LE GEL. Deux causes, deux classes, jamais melangees : un doigt
   pose se leve, un avis ouvert se referme — si la meme classe portait
   les deux, lever le doigt relancerait le ruban sous un avis qu on est
   en train de lire. `animation-play-state` seul : l animation garde sa
   position exacte et repart d ou elle s est arretee, sans saut.
   Il faut battre le raccourci `animation` de presse.css (1,1,0), qui
   remet play-state a `running` : (1,3,0) ici. */
.avisf #avisfBande.p-marquise.est-tenu,
.avisf #avisfBande.p-marquise.est-fige{animation-play-state:paused}

/* Entre 600 et 900 px (tablette debout, grand telephone couche) la
   carte vaut encore 320 px : la traversee tombe a 5,2 s. 150 s la
   remet a 8,6 s — la meme que le bureau. */
@media(max-width:900px){
  .avisf{--avisf-defile:150s}
}

@media(max-width:600px){
  .avisf{
    --avisf-defile:280s;        /* traversee ~9,5 s, comme le bureau  */
    --avisf-w:min(70vw,290px);  /* 78 % -> 70 % : la suivante depasse */
    --avisf-p:16px;             /* rendus au texte, qui a maigri      */
  }
  /* Sous marquise, la largeur vient de presse.css
     (`#avisfBande.p-marquise .avisf__c`, 1,2,0) : il faut 1,3,0 pour la
     reprendre. Hors marquise, `.avisf__c` lit deja --avisf-w tout seul —
     les deux chemins tombent donc sur la MEME mesure, ce qui est tout
     l interet de passer par la variable. */
  .avisf #avisfBande.p-marquise .avisf__c{width:var(--avisf-w)}

  /* Le bouton prend toute la largeur du texte : c est la seule facon
     d avoir une zone sensible large sans grossir un seul mot. Le filet
     qui le souligne (box-shadow, deja la) devient alors une ligne de
     pied de carte — il ne s ajoute rien, il s etire. */
  .avisf__c--long > .avisf__plus{
    align-self:stretch;justify-content:flex-start;padding:10px 0 2px;
  }
  /* 56 px de haut sur toute la largeur de la carte, invisibles. La
     zone deborde de la marge interieure des deux cotes — c est
     --avisf-p qui la commande, donc elle suit la carte si elle change. */
  .avisf__plus::after{
    left:calc(-1 * var(--avisf-p));right:calc(-1 * var(--avisf-p));
    height:56px;
  }
}