/* ═══ LE BLOC DES AVIS — UN SEUL FICHIER POUR LES QUATRE PAGES (15.10) ══════════════════════════
   Le bloc vivait en QUATRE copies (index-fr/de et avis-fr/de) : son style, son HTML et son script
   étaient recopiés. Toute adaptation se faisait donc quatre fois. Il est réuni ici.

   LES DEUX TAILLES. L'accueil porte le bloc GRAND, la page des avis le porte PLUS PETIT (demande
   Romano, 14.10). La différence tient en quatre valeurs : le conteneur de la page des avis reçoit
   la classe `av-compact`, et c'est tout — le reste du fichier est commun.

   ⚠️ Les variables `--primary`, `--dark`, `--light` et `--gray` sont définies par chaque page ;
   ce fichier ne les redéfinit pas. */

/* ── LA GRILLE : les cartes à gauche, la note à droite ──────────────────────────────────────────
   ⚠️ C'est l'ORDRE DU DOCUMENT qui place les deux colonnes. Un `order` s'y ajoutait et jouait
   CONTRE lui — la note se retrouvait à gauche (défaut constaté par Romano, 14.10). */
/* ⚠️ 900 px, comme `.av-acc` EN DESSOUS (demande Romano, 16.10) : le bord GAUCHE du carrousel et le
   bord DROIT des deux box se posent ainsi PILE sur ceux de l'accordéon du bas. La grille prenait
   toute la largeur de la section (968 px) et les trois blocs se répondaient de travers. */
.av-grille { display:grid; grid-template-columns:1fr 250px; gap:1.5rem; align-items:stretch;
             max-width:900px; margin:0 auto; }
.av-grille > * { min-width:0; }
.av-grille > *:last-child { display:flex; flex-direction:column; }

.av-note { background:#f1f5f9; border:1px solid #e2e8f0; border-radius:8px; padding:1.75rem 1.25rem; text-align:center; }
.av-note .av-chiffre { font-size:2.6rem; font-weight:800; line-height:1; color:var(--primary); }
.av-note .av-sur { font-size:1rem; font-weight:400; opacity:.7; }
.av-note .av-etoiles { color:#f59e0b; font-size:1.2rem; letter-spacing:2px; margin-top:.4rem; }
.av-note .av-compte { font-size:.85rem; color:var(--primary); opacity:.85; margin-top:.5rem; }

/* ── LA LIGNE D'INTÉGRITÉ ET LE BOUTON ──────────────────────────────────────────────────────────
   ⚠️ EMPILÉS ET CENTRÉS (demande Romano, 16.10) : le bloc se lit SOUS le box de la note moyenne, à SA
   largeur. La phrase et le bouton étaient sur un même rang — la phrase à gauche, le bouton à droite,
   poussé au bord par `margin-left:auto` ; ils sont maintenant l'un sous l'autre, au centre.
   ⚠️ `p.av-integrale` et non `.av-integrale` : `.av-compact .av-integrale` (marge nulle) l'emporterait
   à spécificité égale, et la phrase resterait collée au bouton. */
.av-info { margin-top:1.25rem; background:#fff; border:1px solid #e2e8f0; border-radius:8px;
           padding:1rem 1.25rem; text-align:center; }
.av-info p.av-integrale { margin:0 0 .9rem 0; }
/* ⚠️ PAS de `white-space:nowrap` (demande Romano, 16.10) : l'allemand dit « Bewertung abgeben »,
   plus long que le français, et un texte insécable ne pouvait que SORTIR des 250 px. */
.av-info .av-btn { margin:0; padding:.7rem .9rem; }
.av-integrale { font-size:.8rem; color:var(--gray); margin:0 0 1rem 0; }
.av-btn { display:inline-block; text-align:center; background:var(--primary); color:#fff; padding:.7rem 1.4rem;
          border-radius:6px; text-decoration:none; font-weight:700; font-size:.95rem; }
.av-btn:hover { background:#1d4ed8; }

/* ── LA PILE DES CARTES ─────────────────────────────────────────────────────────────────────────
   Les cartes se CHEVAUCHENT pour donner une pile. ⚠️ C'est cette disposition qui ne tient pas sur
   un téléphone — voir le palier de 600 px en fin de fichier. */
.av-cadre { position:relative; height:100%; }   /* plus de rembourrage : la carte commence au bord */
.av-pile { display:flex; align-items:stretch; height:100%; }
.av-pile > * { flex:0 0 70%; min-width:0; box-sizing:border-box; }
.av-pile > * + * { margin-left:-55%; }
.av-pile > *:nth-child(1) { z-index:3; }
.av-pile > *:nth-child(2) { z-index:2; }
.av-pile > *:nth-child(3) { z-index:1; }

/* ── LA CARTE ───────────────────────────────────────────────────────────────────────────────────
   ⚠️ 320 : la hauteur d'une carte SANS réponse, la plus fréquente. Réserver pour la réponse
   rendrait toutes les cartes hautes pour un cas rare. Une carte qui PORTE une réponse est donc
   plus haute — c'est du contenu en plus, pas un défaut.
   ⚠️ La hauteur du haut de carte ne se déduit pas du contenu : autrement c'est la police, ou une
   réponse, qui décide de la taille, et le bloc grandit sous les yeux du visiteur (leçon L-0112). */
.av-carte { background:#fff; border:1px solid #e2e8f0; border-radius:10px; padding:1.25rem 1.4rem;
            box-shadow:0 6px 14px -4px rgba(15,23,42,.20); display:flex; flex-direction:column;
            min-height:320px; }
.av-haut { min-height:128px; }
.av-tete { display:flex; align-items:center; gap:.75rem; }
.av-photo { width:42px; height:42px; border-radius:50%; flex:0 0 42px; overflow:hidden;
            background:#f1f5f9; display:flex; align-items:center; justify-content:center;
            color:var(--primary); font-weight:700; border:1px solid #e2e8f0; }
.av-photo img { width:100%; height:100%; object-fit:cover; display:block; }
.av-qui { flex:1; min-width:0; }
.av-auteur { font-weight:700; font-size:.97rem; }
.av-meta { font-size:.78rem; color:#94a3b8; }
.av-etoiles-mini { color:#f59e0b; font-size:.85rem; letter-spacing:1px; }
.av-etoile-vide { opacity:.28; }

.av-sous { display:flex; align-items:flex-start; gap:.75rem; margin-top:.5rem; min-height:42px; }
.av-sous .av-fiche { flex:1 1 auto; min-width:0; }
.av-sous .av-service { flex:0 0 auto; margin-left:auto; }
.av-fiche { display:inline-block; font-size:.82rem; font-weight:700; color:var(--primary); text-decoration:none; }
.av-fiche:hover { text-decoration:underline; }
.av-service { display:inline-block; font-size:.75rem; font-weight:700; color:var(--primary);
              background:#f1f5f9; border:1px solid #e2e8f0; border-radius:999px; padding:.15rem .65rem; }

.av-titre { font-weight:700; margin-top:.7rem; color:var(--dark); line-height:1.35;
            display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.av-texte { margin:.7rem 0 0 0; color:#334155; font-size:.94rem;
            display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.av-suite { display:inline-block; margin-top:.35rem; font-size:.85rem; font-weight:700;
            color:var(--primary); text-decoration:none; }
.av-suite:hover { text-decoration:underline; }
/* ⚠️ `align-self:flex-start` est indispensable : la carte est une COLONNE flex, donc le bouton
   s'étirait sur toute la largeur et son texte se centrait — le défaut d'un `<button>`. */
button.av-suite { align-self:flex-start; text-align:left; background:none; border:none; padding:0;
                  cursor:pointer; font-family:inherit; }

.av-reponse { margin-top:.9rem; padding:.7rem .9rem; background:var(--light); border-left:3px solid var(--primary);
              border-radius:4px; font-size:.88rem; color:#334155; }
.av-reponse span { font-weight:700; color:var(--primary); display:block; margin-bottom:.2rem; }
.av-reponse-texte { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* La mention de traduction — UNE SEULE pour le bloc, posée sous la réponse, petite, grise et
   discrète : c'est la forme qu'elle avait avant, quand le bloc vivait dans la page. */
/* ⚠️ `text-align:left` EXPLICITE (23.10.2026) : la mention héritait du centrage de certains
   conteneurs et pas d'autres — le même texte se lisait centré ici, à gauche là. Une mention de
   traduction s'aligne sur le texte qu'elle accompagne. */
.av-traduction { margin-top:.4rem; font-size:.75rem; font-style:italic; color:var(--gray);
                 text-align:left; align-self:flex-start; margin-right:auto; width:auto; }

/* L'AVIS ET LA RÉPONSE DANS LEUR LANGUE D'ORIGINE (demande Romano, 17.10.2026) : un lien discret —
   il se lit comme un lien (bleu de marque, souligné au survol) et se comporte comme une commande
   (`<button>`, donc atteignable au clavier). ⚠️ Il n'apparaît QUE lorsque la porte a envoyé
   l'original : la page ne propose jamais un lien qui ne mène nulle part.
   ⚠️ MÊME TAILLE ET MÊME ITALIQUE QUE LA MENTION (demande Romano, 17.10.2026) : il suit la ligne
   qu'il prolonge au lieu de crier à côté d'elle. La COULEUR, elle, reste le bleu de marque — c'est
   ce qui le distingue d'un texte : sans cela, un lien gris ne se lirait pas comme un lien.
   ⚠️ DEUX EMPLACEMENTS, ET C'EST VOULU (17.10.2026) : celle de l'AVIS reste sous la mention, à la
   fin du bloc ; celle de la RÉPONSE vit DANS le cadre gris de la réponse, sous son texte — l'avis
   et la réponse peuvent venir de deux langues différentes, et chacune se lit là où elle agit.
   ⚠️ `block` + `width:fit-content`, ET NON `inline-block` : elle suit le bouton « …afficher plus »,
   qui est lui aussi `inline-block` — les deux se collaient alors sur la même ligne, sans même un
   espace (« …afficher plusVoir l'original de la réponse »). Elle prend donc sa propre ligne, sans
   étendre pour autant sa zone cliquable à toute la largeur. */
.av-bascule { display:block; width:fit-content; margin-top:.2rem; padding:0; background:none;
              border:0; font-family:inherit; font-size:.75rem; font-style:italic; color:#2563eb;
              text-decoration:none; cursor:pointer; }
.av-bascule:hover { text-decoration:underline; }
/* ⚠️ `display:block` PLUS BAS dans `.av-cachee` ne suffit pas à décider : à spécificité égale, c'est
   l'ORDRE qui tranche, et un déplacement de l'un ou de l'autre casserait le masquage sans rien dire.
   On l'écrit donc pour de bon, avec deux classes. LES DEUX bascules de la carte attendent là,
   cachées, que « …afficher plus » les découvre (demande Romano, 17.10.2026) : celle de l'avis sous
   son texte, celle de la réponse dans son cadre. */
.av-bascule.av-cachee { display:none; }

.av-pied { display:flex; justify-content:flex-end; margin-top:auto; padding-top:.9rem; }
.av-like { display:inline-flex; align-items:center; gap:.4rem; background:none; border:1px solid #e2e8f0;
           border-radius:999px; padding:.25rem .75rem; cursor:pointer; font-family:inherit;
           font-size:.82rem; color:#94a3b8; }
.av-like:hover { border-color:#fda4af; }
.av-like.aime { color:#e11d48; border-color:#fecdd3; background:#fff1f2; font-weight:700; }

/* La carte « voir tous les avis » — elle ferme la pile. Sur l'accueil, un LIEN vers la page des
   avis ; sur la page des avis, un BOUTON qui ouvre l'accordéon — d'où `font-family` et `cursor`,
   que le bouton n'hérite PAS de lui-même. */
.av-tous { display:flex; align-items:center; justify-content:flex-end; background:#f1f5f9;
           border:1px dashed #93c5fd; border-radius:10px; text-decoration:none; color:var(--primary);
           font-family:inherit; cursor:pointer; font-weight:700; padding:1.1rem .9rem; }
.av-tous span { writing-mode:vertical-rl; transform:rotate(180deg); display:inline-block;
                font-size:.88rem; letter-spacing:.04em; }
.av-tous:hover { background:#e2e8f0; }      /* ⚠️ le MÊME survol que l'accordéon des avis */

.av-fleche { position:absolute; top:82px; width:44px; height:44px; border-radius:50%; border:1px solid #e2e8f0;
             background:#fff; color:var(--primary); font-size:1.8rem; font-weight:700; line-height:0;
             cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:5;
             box-shadow:0 4px 12px -2px rgba(15,23,42,.24); transition:background .15s ease; }
.av-fleche:hover:not(:disabled) { background:#f1f5f9; }
.av-fleche:disabled { color:#cbd5e1; cursor:default; }
.av-fleche.gauche { left:-22px; }
.av-fleche.droite { right:-22px; }
.av-vide-ligne { font-size:.85rem; color:var(--gray); text-align:center; }

/* ═══ LA PAGE DES AVIS — LE BLOC PLUS PETIT ═════════════════════════════════════════════════════
   Le conteneur y reçoit la classe `av-compact` : les cartes sont plus basses, le texte tient sur
   deux lignes, et « …afficher plus » déplie SUR PLACE au lieu de renvoyer ailleurs — on est déjà
   sur la page des avis, il n'y a nulle part ailleurs où renvoyer (demande Romano, 14.10).
   ⚠️ Une hauteur FIXE et non un minimum : l'allemand écrit plus long que le français, donc un
   minimum laissait les cartes allemandes PLUS HAUTES. Figée, elle est la même partout. */
.av-compact .av-carte { min-height:258px; }
/* ⚠️ HAUTEUR FIXE RETIRÉE (23.10.2026) : `height:124px` + `overflow:hidden` coupait la SECONDE
   ligne du lien de la fiche en plein milieu du texte (constat Romano). Un nom d'établissement long
   passe sur deux lignes : la carte doit grandir de cette ligne, pas la rogner. Le texte de l'avis,
   lui, reste borné par son `line-clamp`. */
.av-compact .av-haut { min-height:124px; height:auto; }
.av-compact .av-texte { height:3.2em; -webkit-line-clamp:2; }
.av-compact .av-integrale { margin:0; }

/* Le chip : la réponse est CACHÉE, et ce bouton la découvre. */
.av-cachee { display:none; }
.av-chip { align-self:flex-start; margin-top:.6rem; background:#f1f5f9; border:1px solid #e2e8f0;
           border-radius:999px; padding:.2rem .7rem; font-family:inherit; font-size:.78rem;
           font-weight:700; color:var(--primary); cursor:pointer; }
.av-chip:hover { background:#e2e8f0; }

/* ── L'ACCORDÉON — le patron de la FAQ, repris tel quel ─────────────────────────────────────────
   ⚠️ EXACTEMENT le style de la FAQ (`.legal-accordion`) : en-tête BLANC, texte foncé `#1e293b`,
   survol `#f8fafc`/`#2563eb`, et pas de triangle. Une seconde façon de dessiner un accordéon
   ferait deux maisons pour la même chose (demande Romano, 14.10). */
/* ⚠️ La barre est passée au BLEU CLAIR de la box de la note moyenne (`#f1f5f9`, demande Romano,
   16.10) : le survol descend d'un cran (`#e2e8f0`) pour rester lisible. */
.av-acc { max-width:900px; margin:2rem auto 1rem auto; background:#f1f5f9; border:1px solid #e2e8f0;
          border-radius:8px; box-shadow:0 2px 4px rgba(0,0,0,.02); overflow:hidden; transition:all .2s ease; }
.av-acc summary { font-family:'Comfortaa',sans-serif; font-weight:700; font-size:1.1rem; color:#1e293b;
                  padding:1.25rem 1.5rem; cursor:pointer; background-color:#f1f5f9; user-select:none;
                  outline:none; list-style:none; }
.av-acc summary::-webkit-details-marker { display:none; }
.av-acc summary:hover { background-color:#e2e8f0; color:#2563eb; }
.av-acc-grille { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:1rem;
                 padding:1.5rem; border-top:1px solid #e2e8f0; }
.av-mini { border:1px solid #e2e8f0; border-radius:8px; padding:.9rem 1rem; background:#fff; }
.av-mini .av-texte { height:auto; -webkit-line-clamp:3; margin-top:.45rem; font-size:.88rem; }

/* ── LA FENÊTRE — l'avis entier s'ouvre PAR-DESSUS la page ──────────────────────────────────────
   Pour que les cartes de la grille gardent toutes la même taille (demande Romano, 14.10). */
.av-modale { display:none; position:fixed; top:0; right:0; bottom:0; left:0; background:rgba(15,23,42,.55);
             z-index:50; padding:1.5rem; overflow-y:auto; }
/* ⚠️ `align-items:center` centrait verticalement : une fenêtre plus haute que l'écran laissait son
   HAUT hors du cadre, inatteignable même en défilant (constat Romano, 23.10.2026). On part du haut. */
.av-modale.ouverte { display:flex; align-items:flex-start; justify-content:center; }
.av-fenetre { position:relative; background:#fff; border-radius:10px; max-width:640px; width:100%; padding:1.5rem;
              box-shadow:0 18px 40px -12px rgba(15,23,42,.5); }
.av-fenetre .av-texte { height:auto; overflow:visible; display:block; -webkit-line-clamp:unset; }
/* ⚠️ LA RÉPONSE AUSSI, et pour la même raison (17.10.2026) : la fenêtre montre l'avis ENTIER, donc
   la réponse entière. Sans cette ligne, la réponse y serait coupée à deux lignes comme dans la
   carte — et la bascule de l'original viendrait se coller au texte, faute de bloc où se poser. */
.av-fenetre .av-reponse-texte { height:auto; overflow:visible; display:block; -webkit-line-clamp:unset; }
/* ⚠️ Le X est POSÉ SUR LE COIN de la fenêtre (`position:absolute`, il dépasse de 14 px) : il ne
   prend plus de place dans la carte, et il ne peut plus se confondre avec la page. Rouge plein sur
   fond blanc, cerclé de blanc pour se détacher des deux — « comme le X des fenêtres Windows »
   (demande Romano, 15.10). Le liseré blanc le rend lisible même par-dessus un texte. */
.av-fermer { position:absolute; top:-14px; right:-14px; float:none; width:36px; height:36px;
             border-radius:50%; border:2px solid #ffffff; background:#dc3545; color:#ffffff;
             font-family:inherit; font-size:1.25rem; font-weight:700; line-height:1;
             cursor:pointer; padding:0; display:flex; align-items:center; justify-content:center;
             box-shadow:0 4px 12px -2px rgba(15,23,42,.45); }
.av-fermer:hover { background:#b91c1c; }
.av-fermer:focus-visible { outline:3px solid #2563eb; outline-offset:2px; }

/* ═══ LE PALIER ÉTROIT ══════════════════════════════════════════════════════════════════════════
   Sous 760 px, la note passe SOUS les cartes : la grille n'a plus qu'une colonne.

   ⚠️ Et sous 600 px, la PILE doit s'empiler. Mesuré le 15.10 dans un cadre de 390 px : trois cartes
   de 220 px de large et 509 px de haut, décalées de 47 px les unes sur les autres — illisibles.
   C'était le défaut que Romano décrivait par « les cartes sont complètement décalées sur petits
   écrans ». Le chevauchement venait de `margin-left:-55%`.
   Les flèches ‹ ›, qui servaient à faire défiler la pile horizontalement, n'ont plus de sens :
   elles se placent SOUS la dernière carte, centrées, et continuent de commander l'affichage. */
@media (max-width:760px) {
  .av-grille { grid-template-columns:1fr; }
}
@media (max-width:600px) {
  .av-cadre { padding:0 22px; }
  .av-pile { display:block; height:auto; }
  .av-pile > * { flex:none; }
  .av-pile > * + * { margin-left:0; margin-top:1rem; }
  .av-carte, .av-compact .av-carte { min-height:0; }
  /* Une seule carte à la fois sur un téléphone : trois cartes empilées feraient un bloc de mille
     pixels de haut, que le visiteur devrait traverser avant d'atteindre le bas de la page. */
  .av-pile > *:nth-child(n+2) { display:none; }
  /* ⚠️ Les flèches restent SUR LES BORDS de la carte, à sa MI-HAUTEUR — comme sur un grand écran.
     Les poser sous la pile les faisait descendre DANS le bloc de la note : mesuré le 15.10, elles
     tombaient 36 px à l'intérieur (constat de Romano : « superposées au box de la note moyenne et
     bien trop bas par rapport aux cartes d'avis »). */
  .av-fleche { top:50%; transform:translateY(-50%); }
  .av-fleche.gauche { left:0; }
  .av-fleche.droite { right:0; }
  /* Le lien de la fiche s'étale sur TOUTE LA LARGEUR de la carte, et le chip du service passe
     DESSOUS. Côte à côte sur une carte étroite, le lien était coupé net (demande Romano, 15.10). */
  .av-sous { flex-direction:column; align-items:stretch; gap:.4rem; }
  .av-sous .av-service { margin-left:0; align-self:flex-start; }
}


/* ⚠️ !important (23.10.2026) : CHAQUE page d avis porte ses propres <style>, et certains centrent la carte sur petit ecran. La mention de traduction suit le texte qu elle accompagne : a gauche, toujours, et quelle que soit la page. */
.av-traduction, .av-traduction * { text-align:left !important; align-self:flex-start !important; margin-right:auto !important; }