/* Scène « galerie et avis » : de vraies photos, dans Chrome et sur l'iPhone de
   Lucie (demande de Théo du 24 septembre). Le rideau de fin et le curseur
   viennent du kit.

   LE MINUTAGE, en pourcentages d'une boucle de 12 secondes :
      0 %  le site de Chez Lucie, arrêté sur sa photo d'accueil
      3 %  1. VOS CLIENTS REGARDENT : on descend jusqu'à la galerie (9,5 %)
     15 %  le curseur ouvre les huîtres : la vignette grandit jusqu'à la
           visionneuse (19,4 %), qui pose ses commandes (20 %)
     24 %  flèche suivante : la terrasse glisse à sa place (27,6 %)
     33 %  la croix : la terrasse revient dans sa vignette (37,4 %)
     40 %  2. VOUS AJOUTEZ UNE PHOTO : la fenêtre se range, le téléphone monte
   49,9 %  « Ajouter une photo » ; la pellicule monte (53,4 %)
   55,4 %  elle choisit le plateau, la coche bleue ; « Ajouter » à 57,5 %
     60 %  l'envoi avance, « En ligne sur le site » à 63,8 %
     64 %  dans la fenêtre, le plateau prend la première place, les autres
           glissent d'une case (67,8 %)
   67,7 %  3. L'AVIS ARRIVE : la notification tombe (69,4 %)
     71 %  le téléphone redescend, la fenêtre revient en grand (75 %)
   75,6 %  l'avis se pose en tête, la note passe de 4,6 à 4,7 (78,4 %) ;
           plus rien ne bouge ensuite
     95 %  fondu au blanc ; tout revient au début entre 98,4 et 99,9 %

   LA TOILE : 520 x 510, sans légende. La fenêtre de 0 à 500, sa vue de
   518 x 434 commence en (1, 65) ; rangée, elle est réduite à 68 % en (0, 80).
   Le téléphone de x 366 à 516, y 95 à 405, écran en (371, 100). */
.fn-scene--avis {
  --sc-haut: 510px;
  /* Les filets, tous neutres. */
  --line-chrome: #E3E6EA; --line-site: #EDEDED; --line-ios: #D1D1D6;
  --ios-bleu: #007AFF;
  --or: #F2A516;
  line-height: 1.35;
}
.fn-scene--avis svg { display: block; }
.fn-scene--avis p { margin: 0; }

/* ═══ CHROME ══════════════════════════════════════════════════════════ */
.sc-avis-chrome {
  position: absolute; top: 0; left: 0; z-index: 1;
  display: flex; flex-direction: column;
  width: 520px; height: 500px; overflow: hidden;
  border: 1px solid #C7CCD4; border-radius: 8px;
  background: #FFFFFF;
  box-shadow: 0 12px 30px rgba(31, 36, 46, .14);
  transform-origin: 0 0;
}
.sc-avis-c-onglets { position: relative; flex: none; height: 30px; background: #DEE3EA; }
.sc-avis-c-onglet {
  position: absolute; top: 5px; left: 8px;
  display: flex; align-items: center; gap: 6px;
  width: 170px; height: 25px; padding: 0 8px 0 10px;
  border-radius: 8px 8px 0 0; background: #FFFFFF; color: #1F1F1F;
}
.sc-avis-c-onglet > svg { width: 10px; height: 10px; flex: none; color: #474747; }
.sc-avis-c-favi i {
  display: grid; place-items: center; width: 12px; height: 12px;
  border-radius: 3px; background: #0A0A0A; color: #FFFFFF;
  font-size: 8px; font-weight: 800; font-style: normal; line-height: 1;
}
/* Chrome n'écrit pas « … » au bout d'un titre trop long : il l'efface en
   fondu. */
.sc-avis-c-titre {
  flex: 1; min-width: 0; overflow: hidden; white-space: nowrap;
  font-size: 0.59375rem;
  -webkit-mask-image: linear-gradient(90deg, #000 78%, transparent);
  mask-image: linear-gradient(90deg, #000 78%, transparent);
}
.sc-avis-c-plus { position: absolute; top: 9px; left: 188px; color: #474747; }
.sc-avis-c-plus svg { width: 12px; height: 12px; }
.sc-avis-fen { position: absolute; top: 0; right: 0; display: flex; height: 100%; }
.sc-avis-fen i { display: grid; place-items: center; width: 34px; height: 100%; color: #1F1F1F; }
.sc-avis-fen svg { width: 10px; height: 10px; }
.sc-avis-c-outils {
  display: flex; align-items: center; gap: 2px; flex: none;
  height: 34px; padding: 0 6px;
  border-bottom: 1px solid var(--line-chrome); color: #474747;
}
.sc-avis-c-outils > i { display: grid; place-items: center; width: 24px; height: 24px; }
.sc-avis-c-outils > i svg { width: 14px; height: 14px; }
.sc-avis-c-off { color: #C4C7C5; }
.sc-avis-c-outils > .sc-avis-c-profil svg { width: 16px; height: 16px; padding: 1px; border-radius: 50%; background: #E3E3E3; color: #5F6368; }
.sc-avis-c-adresse {
  display: flex; align-items: center; gap: 8px; flex: 1;
  height: 26px; margin: 0 6px; padding: 0 10px;
  border-radius: 13px; background: #EDF1F7;
  font-size: 0.65625rem; color: #1F1F1F; white-space: nowrap;
}
.sc-avis-c-adresse > svg { width: 13px; height: 13px; flex: none; }
.sc-avis-c-etoile { margin-left: auto; }
.sc-avis-c-etoile svg { width: 13px; height: 13px; }

.sc-avis-vue { position: relative; flex: 1; overflow: hidden; background: #FFFFFF; }

/* ═══ LE SITE DE CHEZ LUCIE ═══════════════════════════════════════════
   La page fait 655 de haut ; on la descend de 196, jusqu'à ce que la
   galerie et les avis tiennent ensemble dans la vue. */
.sc-avis-page { position: absolute; top: 0; left: 0; right: 0; padding-top: 44px; color: #0A0A0A; }
.sc-avis-tete {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  display: flex; align-items: center; justify-content: space-between;
  height: 44px; padding: 0 20px;
  border-bottom: 1px solid var(--line-site); background: #FFFFFF; color: #0A0A0A;
}
.sc-avis-marque { font-size: 0.8125rem; font-weight: 800; letter-spacing: -.01em; }
.sc-avis-nav { display: flex; align-items: center; gap: 14px; font-size: 0.5625rem; font-weight: 500; color: #525252; }
.sc-avis-nav b { font-weight: 700; color: #0A0A0A; }
.sc-avis-resa {
  display: grid; place-items: center;
  height: 26px; padding: 0 12px; border-radius: 7px;
  background: #0A0A0A; color: #FFFFFF; font-weight: 700;
}

/* L'accueil : la photo des cabanes, le voile neutre qui sert à lire le
   blanc, le titre. */
.sc-avis-une { position: relative; height: 190px; overflow: hidden; }
.sc-avis-une-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sc-avis-une::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(10, 10, 10, 0) 35%, rgba(10, 10, 10, .66) 100%);
}
.sc-avis-une-texte {
  position: absolute; left: 20px; bottom: 18px; z-index: 1;
  display: flex; flex-direction: column; gap: 5px; width: 320px; color: #FFFFFF;
}
.sc-avis-une-kicker { font-size: 0.46875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .88); }
.sc-avis-une-h1 { font-size: 1.375rem; font-weight: 800; line-height: 1.08; letter-spacing: -.02em; }

.sc-avis-galerie { padding: 18px 20px 0; }
.sc-avis-g-tete { display: flex; align-items: baseline; justify-content: space-between; height: 24px; }
.sc-avis-g-tete b,
.sc-avis-a-tete b { font-size: 0.9375rem; font-weight: 800; letter-spacing: -.01em; }
/* Les deux libellés sont empilés au même endroit et se relaient. */
.sc-avis-g-lien { position: relative; display: block; width: 104px; height: 14px; }
.sc-avis-g-n {
  position: absolute; right: 0; top: 0; white-space: nowrap;
  font-size: 0.5625rem; font-weight: 600; line-height: 14px;
  text-decoration: underline; text-underline-offset: 2px; color: #0A0A0A;
}
.sc-avis-g-n--ap { opacity: 0; }

/* LA GRILLE : 4 x 2 vignettes de 115 x 83, gouttière 6. Chaque vignette est
   posée à sa case, en absolu : quand le plateau arrive, chacune glisse d'une
   case (la quatrième passe à la ligne), et la huitième sort de l'aperçu. */
.sc-avis-grille { position: relative; height: 172px; margin-top: 10px; overflow: hidden; }
.sc-avis-tuile {
  position: absolute; top: 0; left: 0;
  width: 115px; height: 83px; overflow: hidden;
  border-radius: 8px; background: #EEF0F2;
}
.sc-avis-tuile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sc-avis-tuile--2 { left: 121px; }
.sc-avis-tuile--3 { left: 242px; }
.sc-avis-tuile--4 { left: 363px; }
.sc-avis-tuile--5 { top: 89px; }
.sc-avis-tuile--6 { top: 89px; left: 121px; }
.sc-avis-tuile--7 { top: 89px; left: 242px; }
.sc-avis-tuile--8 { top: 89px; left: 363px; }
.sc-avis-tuile--neuf { z-index: 1; opacity: 0; }
/* Le survol : la vignette fonce un peu sous le curseur. */
.sc-avis-survol { position: absolute; inset: 0; background: rgba(0, 0, 0, .2); opacity: 0; }

/* Les avis. */
.sc-avis-avis { margin-top: 18px; padding: 12px 20px; border-top: 1px dashed var(--line-site); }
.sc-avis-a-tete { display: flex; align-items: center; justify-content: space-between; height: 24px; }
.sc-avis-note { display: flex; align-items: center; gap: 7px; }
/* La note et le compte : deux valeurs empilées à la même place, des boîtes
   figées. Un chiffre qui change de largeur décalerait toute la ligne. */
.sc-avis-moy { position: relative; display: block; width: 26px; height: 20px; }
.sc-avis-n {
  position: absolute; left: 0; top: 0;
  font-size: 1rem; font-weight: 800; line-height: 20px;
  font-variant-numeric: tabular-nums;
}
.sc-avis-n--ap { opacity: 0; }
.sc-avis-combien { position: relative; display: block; width: 36px; height: 12px; }
.sc-avis-c {
  position: absolute; left: 0; top: 0; white-space: nowrap;
  font-size: 0.5625rem; line-height: 12px; color: #737373;
  font-variant-numeric: tabular-nums;
}
.sc-avis-c--ap { opacity: 0; }

.sc-avis-etoiles { position: relative; display: block; flex: none; width: 67px; height: 12px; }
.sc-avis-et { position: absolute; left: 0; top: 0; display: flex; gap: 2px; height: 12px; overflow: hidden; }
.sc-avis-et svg { flex: none; width: 12px; height: 12px; }
.sc-avis-et--vide  { color: #E4E4E4; }
.sc-avis-et--plein { width: var(--sc-part, 100%); color: var(--or); }
.sc-avis-etoiles--petit { width: 44px; height: 8px; }
.sc-avis-etoiles--petit .sc-avis-et { gap: 1px; height: 8px; }
.sc-avis-etoiles--petit .sc-avis-et svg { width: 8px; height: 8px; }

/* Deux cartes côte à côte. La nouvelle se pose à la première place, la
   deuxième sort par la droite de la rangée, qui est rognée. */
.sc-avis-cartes { position: relative; height: 80px; margin-top: 10px; overflow: hidden; }
.sc-avis-carte {
  position: absolute; top: 0; left: 0;
  display: flex; flex-direction: column; gap: 6px;
  width: 234px; height: 80px; padding: 10px 12px;
  border: 1px solid var(--line-site); border-radius: 10px; background: #FFFFFF;
}
.sc-avis-carte--helene { left: 244px; }
.sc-avis-carte--neuf { z-index: 1; opacity: 0; }
.sc-avis-carte-tete { display: flex; align-items: center; gap: 6px; height: 22px; }
.sc-avis-carte-init {
  flex: none; display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(135deg, #3F7BFF, #5BC4E8); color: #FFFFFF;
  font-size: 0.5625rem; font-weight: 800;
}
.sc-avis-carte-tete b { font-size: 0.5625rem; font-weight: 700; white-space: nowrap; }
.sc-avis-carte-quand { margin-left: auto; font-size: 0.5rem; color: #737373; white-space: nowrap; }
.sc-avis-carte-dit { display: block; height: 26px; overflow: hidden; font-size: 0.5625rem; line-height: 1.45; color: #525252; }

.sc-avis-pied { height: 40px; }

/* L'ascenseur de la vue : 434 x 434 / 655 = 288 de haut ; il descend de
   (434 - 288) x 196 / (655 - 434) = 129. */
.sc-avis-ascenseur {
  position: absolute; top: 0; right: 2px; z-index: 4;
  width: 3px; height: 288px; border-radius: 2px;
  background: #9A9A9A; opacity: .8;
}

/* ═══ LA VISIONNEUSE ══════════════════════════════════════════════════
   Les photos passent de leur vignette à leur place dans la visionneuse en
   changeant de BOÎTE (left, top, largeur, hauteur) avec `object-fit: cover` :
   le cadrage glisse sans saut de la vignette recadrée à la photo entière.
     huîtres (4:3)  424 x 318 en (47, 58)
     terrasse (3:2) 424 x 283 en (47, 75)
   Les flèches sont à 8 px des bords, la photo à 3 px des flèches. */
.sc-avis-lb { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.sc-avis-lb-fond { position: absolute; inset: 0; background: #000000; opacity: 0; }
.sc-avis-lb-photo { position: absolute; display: block; object-fit: cover; opacity: 0; }
.sc-avis-lb-photo--1 { left: 20px; top: 90px; width: 115px; height: 83px; border-radius: 8px; }
.sc-avis-lb-photo--2 { left: 565px; top: 75px; width: 424px; height: 283px; border-radius: 2px; }
.sc-avis-lb-ui { position: absolute; inset: 0; opacity: 0; color: #FFFFFF; }
.sc-avis-lb-compte { position: absolute; top: 15px; left: 16px; display: block; width: 60px; height: 16px; }
.sc-avis-lb-n {
  position: absolute; left: 0; top: 0; white-space: nowrap;
  font-size: 0.6875rem; font-weight: 500; line-height: 16px;
  font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .9);
}
.sc-avis-lb-n--2 { opacity: 0; }
.sc-avis-lb-outils { position: absolute; top: 8px; right: 8px; display: flex; gap: 2px; }
.sc-avis-lb-outils i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 7px; }
.sc-avis-lb-outils svg { width: 16px; height: 16px; }
.sc-avis-lb-fleche {
  position: absolute; top: 199px;
  display: grid; place-items: center; width: 36px; height: 36px;
  border-radius: 8px; background: rgba(255, 255, 255, .14);
}
.sc-avis-lb-fleche svg { width: 18px; height: 18px; }
.sc-avis-lb-fleche--prec { left: 8px; }
.sc-avis-lb-fleche--suiv { right: 8px; }
.sc-avis-lb-legende { position: absolute; left: 0; right: 0; bottom: 16px; display: block; height: 16px; }
.sc-avis-lb-l {
  position: absolute; left: 0; right: 0; top: 0; text-align: center; white-space: nowrap;
  font-size: 0.625rem; line-height: 16px; color: rgba(255, 255, 255, .88);
}
.sc-avis-lb-l--2 { opacity: 0; }

/* ═══ LE TÉLÉPHONE ════════════════════════════════════════════════════
   Sa boîte s'arrête à y 504 : il sort du bas de la fenêtre, pas du bas de
   la toile. */
.sc-avis-cadre-tel {
  position: absolute; top: 0; left: 0; z-index: 2;
  width: 520px; height: 504px; overflow: hidden; pointer-events: none;
}
.sc-avis-tel {
  position: absolute; top: 95px; left: 366px; z-index: 2;
  width: 150px; height: 310px; padding: 5px;
  border-radius: 26px; background: #0A0A0A;
  box-shadow: 0 14px 30px rgba(31, 36, 46, .2);
  visibility: hidden; transform: translateY(470px);
}
.sc-avis-ecran {
  position: relative; height: 300px; overflow: hidden;
  border-radius: 21px; background: #FFFFFF; color: #0A0A0A;
}
.sc-avis-ilot {
  position: absolute; top: 5px; left: 50px; z-index: 7;
  width: 40px; height: 11px; border-radius: 6px; background: #0A0A0A;
}
.sc-avis-statut {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  height: 20px; padding: 1px 12px 0 16px;
  background: #FFFFFF; font-size: 0.46875rem;
}
.sc-avis-statut b { font-weight: 700; }
.sc-avis-pile {
  display: block; width: 13px; height: 7px; padding: 1px;
  border: 1px solid rgba(10, 10, 10, .45); border-radius: 2.5px;
}
.sc-avis-pile i { display: block; width: 80%; height: 100%; border-radius: 1px; background: #0A0A0A; }

/* Sa page de gestion. Ses lignes sont des `span` en bloc et non des `p` :
   la remise à zéro des marges de `p`, plus précise, écrasait leur air. */
.sc-avis-t-page {
  position: absolute; top: 20px; left: 0; right: 0; bottom: 36px; overflow: hidden;
  display: flex; flex-direction: column;
  padding: 8px 10px 0; background: #FFFFFF;
}
.sc-avis-t-marque { display: flex; align-items: center; justify-content: space-between; height: 12px; font-size: 0.4375rem; }
.sc-avis-t-marque b { font-weight: 800; }
.sc-avis-t-marque span { color: #737373; }
.sc-avis-t-bonjour { display: block; margin-top: 8px; font-size: 0.6875rem; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; }
.sc-avis-t-compte { position: relative; display: block; flex: none; height: 10px; margin-top: 2px; }
.sc-avis-t-n { position: absolute; left: 0; top: 0; font-size: 0.4375rem; line-height: 10px; color: #737373; white-space: nowrap; }
.sc-avis-t-n--ap { opacity: 0; }
.sc-avis-t-ajouter {
  display: flex; align-items: center; justify-content: center; gap: 4px; flex: none;
  height: 28px; margin-top: 9px; border-radius: 7px;
  background: #0A0A0A; color: #FFFFFF; font-size: 0.5rem; font-weight: 700;
}
.sc-avis-t-ajouter svg { width: 9px; height: 9px; stroke-width: 1.8; }
/* La case de l'envoi : fermée au départ, 44 une fois ouverte (8 d'air et
   36 de carte). */
.sc-avis-t-case { display: block; flex: none; height: 0; overflow: hidden; }
.sc-avis-t-envoi {
  display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 7px; align-items: center;
  height: 36px; margin-top: 8px; padding: 2px 6px 2px 2px;
  border: 1px solid var(--line-site); border-radius: 8px;
}
.sc-avis-t-envoi img { display: block; width: 30px; height: 30px; border-radius: 6px; object-fit: cover; }
.sc-avis-t-etats { position: relative; display: block; height: 30px; }
.sc-avis-t-etat {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  font-size: 0.4375rem; white-space: nowrap;
}
.sc-avis-t-etat b { display: flex; align-items: center; gap: 3px; font-weight: 700; }
.sc-avis-t-etat--b { opacity: 0; }
.sc-avis-t-etat--b b { color: #15803D; }
.sc-avis-t-etat--b svg { width: 9px; height: 9px; stroke-width: 2; }
.sc-avis-t-etat--b span { color: #737373; }
.sc-avis-t-barre { display: block; height: 3px; overflow: hidden; border-radius: 2px; background: #E9E9EC; }
.sc-avis-t-barre-i { display: block; width: 0; height: 100%; background: var(--ios-bleu); }
.sc-avis-t-titre {
  display: block; flex: none; margin-top: 10px;
  font-size: 0.40625rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #737373;
}
.sc-avis-t-grille { display: block; flex: none; width: 120px; height: 79px; margin-top: 5px; border-radius: 3px; }

.sc-avis-safari {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  height: 36px; padding: 4px 7px 0;
  border-top: 1px solid var(--line-chrome);
  background: rgba(247, 247, 247, .92);
}
.sc-avis-safari-champ {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  height: 20px; padding: 0 7px; border-radius: 10px;
  background: #E4E4E9; font-size: 0.4375rem; color: #0A0A0A; white-space: nowrap;
}
.sc-avis-safari-champ b { font-weight: 600; }
.sc-avis-safari-champ small { font-size: .8em; }
.sc-avis-safari-champ svg { width: 8px; height: 8px; }
.sc-avis-maison {
  position: absolute; bottom: 3px; left: 47px; z-index: 7;
  width: 46px; height: 3px; border-radius: 2px; background: #0A0A0A;
}

/* Le sélecteur de photos d'iOS : une feuille qui monte, la page derrière
   s'assombrit. La pellicule est rangée de la plus ancienne à la plus
   récente : la photo qu'on vient de prendre est EN BAS À DROITE. */
.sc-avis-voile { position: absolute; inset: 0; z-index: 3; background: rgba(0, 0, 0, .3); opacity: 0; }
.sc-avis-feuille {
  position: absolute; left: 0; right: 0; top: 26px; bottom: 0; z-index: 4;
  border-radius: 11px 11px 0 0; background: #FFFFFF;
  transform: translateY(290px);
}
.sc-avis-f-barre {
  display: flex; align-items: center; justify-content: space-between;
  height: 30px; padding: 0 8px; font-size: 0.4375rem;
}
.sc-avis-f-bleu { color: var(--ios-bleu); }
.sc-avis-f-seg { display: flex; padding: 1px; border-radius: 5px; background: #E3E3E8; font-size: 0.40625rem; }
.sc-avis-f-seg b,
.sc-avis-f-seg span { display: block; padding: 2px 6px; border-radius: 4px; }
.sc-avis-f-seg b { font-weight: 600; background: #FFFFFF; box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.sc-avis-f-ajout { position: relative; display: block; width: 26px; height: 10px; }
.sc-avis-f-a { position: absolute; right: 0; top: 0; line-height: 10px; white-space: nowrap; }
.sc-avis-f-a--off { color: #B4B4B9; }
.sc-avis-f-a--on { font-weight: 700; color: var(--ios-bleu); opacity: 0; }
.sc-avis-f-grille { position: relative; display: block; width: 140px; height: 234px; }
.sc-avis-f-grille img { display: block; width: 140px; height: 234px; }
.sc-avis-f-coche {
  position: absolute; right: 3px; bottom: 3px;
  display: grid; place-items: center; width: 12px; height: 12px;
  border: 1px solid #FFFFFF; border-radius: 50%;
  background: var(--ios-bleu); color: #FFFFFF;
  opacity: 0; transform: scale(.4);
}
.sc-avis-f-coche svg { width: 8px; height: 8px; stroke-width: 2.2; }

/* La notification d'iOS, sous l'îlot. */
.sc-avis-notif {
  position: absolute; top: 22px; left: 5px; right: 5px; z-index: 6;
  display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 6px; align-items: start;
  padding: 7px 8px 8px 7px; border-radius: 12px;
  background: rgba(244, 244, 246, .97);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .18);
  opacity: 0; transform: translateY(-80px);
}
.sc-avis-notif-app {
  display: grid; place-items: center; width: 18px; height: 18px; border-radius: 5px;
  background: #0A0A0A; color: #FFFFFF; font-size: 0.5rem; font-weight: 800;
}
.sc-avis-notif-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: 0.40625rem; line-height: 1.35; }
.sc-avis-notif-l1 { display: flex; justify-content: space-between; gap: 4px; }
.sc-avis-notif-l1 b { font-weight: 700; }
.sc-avis-notif-l1 span { color: #737373; }
.sc-avis-notif-titre { font-weight: 700; }
.sc-avis-notif-dit { color: #333333; }

/* Le doigt : le rond gris des captures d'écran d'iPhone. */
.sc-avis-doigt {
  position: absolute; top: 0; left: 0; z-index: 3;
  width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .9);
  background: rgba(10, 10, 10, .24);
  opacity: 0; pointer-events: none;
}

/* ═══ LES NOMS D'ANIMATION ════════════════════════════════════════════ */
.sc-cur       { animation-name: sc-cur-avis; }
.sc-cur-onde  { animation-name: sc-avis-onde; }
.sc-fin       { animation-name: sc-conclure; }

.sc-avis-page        { animation-name: sc-avis-defile; }
.sc-avis-ascenseur   { animation-name: sc-avis-ascenseur; }
.sc-avis-survol      { animation-name: sc-avis-survol; }
.sc-avis-tuile--1    { animation-name: sc-avis-t1; }
.sc-avis-tuile--2    { animation-name: sc-avis-t2; }
.sc-avis-tuile--3    { animation-name: sc-avis-t3; }
.sc-avis-tuile--4    { animation-name: sc-avis-t4; }
.sc-avis-tuile--5    { animation-name: sc-avis-t5; }
.sc-avis-tuile--6    { animation-name: sc-avis-t6; }
.sc-avis-tuile--7    { animation-name: sc-avis-t7; }
.sc-avis-tuile--8    { animation-name: sc-avis-t8; }
.sc-avis-tuile--neuf { animation-name: sc-avis-tneuf; }
.sc-avis-g-n--av     { animation-name: sc-avis-g-av; }
.sc-avis-g-n--ap     { animation-name: sc-avis-g-ap; }

.sc-avis-lb-fond     { animation-name: sc-avis-lb-fond; }
.sc-avis-lb-photo--1 { animation-name: sc-avis-lb-p1; }
.sc-avis-lb-photo--2 { animation-name: sc-avis-lb-p2; }
.sc-avis-lb-ui       { animation-name: sc-avis-lb-ui; }
.sc-avis-lb-n--1,
.sc-avis-lb-l--1     { animation-name: sc-avis-lb-av; }
.sc-avis-lb-n--2,
.sc-avis-lb-l--2     { animation-name: sc-avis-lb-ap; }
.sc-avis-lb-fleche--suiv { animation-name: sc-avis-lb-suiv; }
.sc-avis-lb-fermer   { animation-name: sc-avis-lb-fermer; }

.sc-avis-chrome      { animation-name: sc-avis-ranger; }
.sc-avis-tel         { animation-name: sc-avis-tel; }
.sc-avis-doigt       { animation-name: sc-avis-doigt; }
.sc-avis-t-ajouter   { animation-name: sc-avis-t-appui; }
.sc-avis-voile       { animation-name: sc-avis-voile; }
.sc-avis-feuille     { animation-name: sc-avis-feuille; }
.sc-avis-f-coche     { animation-name: sc-avis-coche; }
.sc-avis-f-a--off    { animation-name: sc-avis-f-off; }
.sc-avis-f-a--on     { animation-name: sc-avis-f-on; }
.sc-avis-t-case      { animation-name: sc-avis-t-case; }
.sc-avis-t-barre-i  { animation-name: sc-avis-t-barre; }
.sc-avis-t-etat--a   { animation-name: sc-avis-t-etat-a; }
.sc-avis-t-etat--b   { animation-name: sc-avis-t-etat-b; }
.sc-avis-t-n--av     { animation-name: sc-avis-t-n-av; }
.sc-avis-t-n--ap     { animation-name: sc-avis-t-n-ap; }
.sc-avis-notif       { animation-name: sc-avis-notif; }

.sc-avis-carte--neuf   { animation-name: sc-avis-c-neuf; }
.sc-avis-carte--marc,
.sc-avis-carte--helene { animation-name: sc-avis-c-glisse; }
.sc-avis-n--av,
.sc-avis-c--av       { animation-name: sc-avis-note-av; }
.sc-avis-n--ap,
.sc-avis-c--ap       { animation-name: sc-avis-note-ap; }
.sc-avis-etoiles--moyenne .sc-avis-et--plein { animation-name: sc-avis-remplit; }


/* ═══ 1. VOS CLIENTS REGARDENT ════════════════════════════════════════ */

/* On descend de 196 jusqu'à la galerie, et l'ascenseur suit. */
@keyframes sc-avis-defile {
  0%, 3%       { transform: translateY(0); animation-timing-function: cubic-bezier(.45, 0, .2, 1); }
  9.5%, 98.4%  { transform: translateY(-196px); }
  99.9%, 100%  { transform: translateY(0); }
}
@keyframes sc-avis-ascenseur {
  0%, 3%       { transform: translateY(0); animation-timing-function: cubic-bezier(.45, 0, .2, 1); }
  9.5%, 98.4%  { transform: translateY(129px); }
  99.9%, 100%  { transform: translateY(0); }
}
@keyframes sc-avis-survol {
  0%, 12.6%    { opacity: 0; }
  13.2%, 15.2% { opacity: 1; }
  15.3%, 100%  { opacity: 0; }
}

/* La visionneuse. La vignette des huîtres s'efface à 15,4 % à l'instant où
   sa copie prend sa place, exactement à la même boîte : on ne voit qu'une
   photo qui grandit. Même chose au retour, pour la terrasse. */
@keyframes sc-avis-lb-fond {
  0%, 15.3%    { opacity: 0; }
  18%, 33.8%   { opacity: 1; }
  37%, 100%    { opacity: 0; }
}
@keyframes sc-avis-lb-p1 {
  0%, 15.3%    { left: 20px; top: 90px; width: 115px; height: 83px; border-radius: 8px; opacity: 0; }
  15.4%        { left: 20px; top: 90px; width: 115px; height: 83px; border-radius: 8px; opacity: 1; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  19.4%, 24.6% { left: 47px; top: 58px; width: 424px; height: 318px; border-radius: 2px; opacity: 1; animation-timing-function: cubic-bezier(.4, 0, .22, 1); }
  27.6%        { left: -471px; top: 58px; width: 424px; height: 318px; border-radius: 2px; opacity: 1; }
  27.7%, 98.4% { left: -471px; top: 58px; width: 424px; height: 318px; border-radius: 2px; opacity: 0; }
  99.9%, 100%  { left: 20px; top: 90px; width: 115px; height: 83px; border-radius: 8px; opacity: 0; }
}
@keyframes sc-avis-lb-p2 {
  0%, 24.5%    { left: 565px; top: 75px; width: 424px; height: 283px; border-radius: 2px; opacity: 0; }
  24.6%        { left: 565px; top: 75px; width: 424px; height: 283px; border-radius: 2px; opacity: 1; animation-timing-function: cubic-bezier(.4, 0, .22, 1); }
  27.6%, 33.6% { left: 47px; top: 75px; width: 424px; height: 283px; border-radius: 2px; opacity: 1; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  37.4%        { left: 141px; top: 90px; width: 115px; height: 83px; border-radius: 8px; opacity: 1; }
  37.5%, 98.4% { left: 141px; top: 90px; width: 115px; height: 83px; border-radius: 8px; opacity: 0; }
  99.9%, 100%  { left: 565px; top: 75px; width: 424px; height: 283px; border-radius: 2px; opacity: 0; }
}
@keyframes sc-avis-lb-ui {
  0%, 18.6%    { opacity: 0; }
  19.8%, 33.2% { opacity: 1; }
  33.9%, 100%  { opacity: 0; }
}
/* « 1 / 24 » devient « 2 / 24 », et la légende change, pendant que la
   terrasse glisse : l'une est partie avant que l'autre n'arrive. */
@keyframes sc-avis-lb-av {
  0%, 25.4%    { opacity: 1; }
  25.8%, 98.4% { opacity: 0; }
  99.9%, 100%  { opacity: 1; }
}
@keyframes sc-avis-lb-ap {
  0%, 26%      { opacity: 0; }
  26.4%, 98.4% { opacity: 1; }
  99.9%, 100%  { opacity: 0; }
}
/* L'appui sur la flèche, puis sur la croix : le bouton s'éclaire. */
@keyframes sc-avis-lb-suiv {
  0%, 23.9%    { background: rgba(255, 255, 255, .14); }
  24.1%, 24.6% { background: rgba(255, 255, 255, .3); }
  25%, 100%    { background: rgba(255, 255, 255, .14); }
}
@keyframes sc-avis-lb-fermer {
  0%, 32.7%    { background: rgba(255, 255, 255, 0); }
  32.9%, 33.3% { background: rgba(255, 255, 255, .22); }
  33.6%, 100%  { background: rgba(255, 255, 255, 0); }
}

/* LES VIGNETTES. Les deux premières s'effacent le temps de la visionneuse ;
   puis, à 64 %, toutes glissent d'une case pour faire place au plateau, en
   cascade de 0,2 %. La quatrième passe à la ligne ; la huitième sort de
   l'aperçu, derrière « Voir les 25 photos ». */
@keyframes sc-avis-t1 {
  0%, 15.3%    { opacity: 1; transform: none; }
  15.4%, 27.5% { opacity: 0; transform: none; }
  27.6%, 64%   { opacity: 1; transform: none; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  66.6%, 98.4% { opacity: 1; transform: translate(121px, 0); }
  99.9%, 100%  { opacity: 1; transform: none; }
}
@keyframes sc-avis-t2 {
  0%, 24.5%    { opacity: 1; transform: none; }
  24.6%, 37.4% { opacity: 0; transform: none; }
  37.5%, 64.2% { opacity: 1; transform: none; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  66.8%, 98.4% { opacity: 1; transform: translate(121px, 0); }
  99.9%, 100%  { opacity: 1; transform: none; }
}
@keyframes sc-avis-t3 {
  0%, 64.4%    { transform: none; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  67%, 98.4%   { transform: translate(121px, 0); }
  99.9%, 100%  { transform: none; }
}
@keyframes sc-avis-t4 {
  0%, 64.6%    { transform: none; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  67.2%, 98.4% { transform: translate(-363px, 89px); }
  99.9%, 100%  { transform: none; }
}
@keyframes sc-avis-t5 {
  0%, 64.8%    { transform: none; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  67.4%, 98.4% { transform: translate(121px, 0); }
  99.9%, 100%  { transform: none; }
}
@keyframes sc-avis-t6 {
  0%, 65%      { transform: none; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  67.6%, 98.4% { transform: translate(121px, 0); }
  99.9%, 100%  { transform: none; }
}
@keyframes sc-avis-t7 {
  0%, 65.2%    { transform: none; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  67.8%, 98.4% { transform: translate(121px, 0); }
  99.9%, 100%  { transform: none; }
}
@keyframes sc-avis-t8 {
  0%, 64.6%    { opacity: 1; transform: none; }
  65.8%, 98.4% { opacity: 0; transform: scale(.92); }
  99.9%, 100%  { opacity: 1; transform: none; }
}
/* Le plateau entre à la première case une fois qu'elle se libère. */
@keyframes sc-avis-tneuf {
  0%, 64.9%    { opacity: 0; transform: scale(.86); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  67.4%, 98.4% { opacity: 1; transform: none; }
  99.9%, 100%  { opacity: 0; transform: scale(.86); }
}
@keyframes sc-avis-g-av {
  0%, 65%      { opacity: 1; }
  65.6%, 98.4% { opacity: 0; }
  99.9%, 100%  { opacity: 1; }
}
@keyframes sc-avis-g-ap {
  0%, 65.8%    { opacity: 0; }
  66.4%, 98.4% { opacity: 1; }
  99.9%, 100%  { opacity: 0; }
}

/* ═══ 2. VOUS AJOUTEZ UNE PHOTO ═══════════════════════════════════════ */

/* La fenêtre se range à gauche pour faire place au téléphone, et revient
   en grand quand il redescend. */
@keyframes sc-avis-ranger {
  0%, 40%      { transform: none; }
  44.5%, 71%   { transform: translate(0, 80px) scale(.68); }
  75%, 98.4%   { transform: none; }
  99.9%, 100%  { transform: none; }
}
@keyframes sc-avis-tel {
  0%, 42.3%    { visibility: hidden; transform: translateY(470px); }
  42.4%        { visibility: visible; transform: translateY(470px); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  47%, 71%     { visibility: visible; transform: translateY(0); }
  74.4%        { visibility: visible; transform: translateY(470px); }
  74.5%, 100%  { visibility: hidden; transform: translateY(470px); }
}

/* LE DOIGT. Trois appuis, trois cibles CALCULÉES dans la toile (le rond de
   20 px s'y centre) : « Ajouter une photo » (441, 196), le plateau en bas à
   droite de la pellicule (488, 367), « Ajouter » (491, 141). Il n'est
   visible que pendant qu'il touche, comme sur une capture d'iPhone. */
@keyframes sc-avis-doigt {
  0%, 49.2%    { transform: translate(431px, 186px) scale(.6); opacity: 0; }
  49.6%        { transform: translate(431px, 186px); opacity: 1; }
  49.9%        { transform: translate(431px, 186px) scale(.8); opacity: 1; }
  50.2%        { transform: translate(431px, 186px); opacity: 1; }
  50.7%        { transform: translate(431px, 186px); opacity: 0; }
  54.6%        { transform: translate(478px, 357px) scale(.6); opacity: 0; }
  55%          { transform: translate(478px, 357px); opacity: 1; }
  55.3%        { transform: translate(478px, 357px) scale(.8); opacity: 1; }
  55.6%        { transform: translate(478px, 357px); opacity: 1; }
  56.1%        { transform: translate(478px, 357px); opacity: 0; }
  56.8%        { transform: translate(481px, 131px) scale(.6); opacity: 0; }
  57.2%        { transform: translate(481px, 131px); opacity: 1; }
  57.5%        { transform: translate(481px, 131px) scale(.8); opacity: 1; }
  57.8%        { transform: translate(481px, 131px); opacity: 1; }
  58.3%, 98.4% { transform: translate(481px, 131px); opacity: 0; }
  99.9%, 100%  { transform: translate(431px, 186px) scale(.6); opacity: 0; }
}
@keyframes sc-avis-t-appui {
  0%, 49.7%    { background: #0A0A0A; }
  49.9%, 50.3% { background: #3A3A3A; }
  50.6%, 100%  { background: #0A0A0A; }
}
@keyframes sc-avis-voile {
  0%, 50.6%    { opacity: 0; }
  51.8%, 58.2% { opacity: 1; }
  59.6%, 100%  { opacity: 0; }
}
@keyframes sc-avis-feuille {
  0%, 50.6%    { transform: translateY(290px); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  53.4%, 58.2% { transform: translateY(0); animation-timing-function: cubic-bezier(.5, 0, .75, 0); }
  60.2%, 98.4% { transform: translateY(290px); }
  99.9%, 100%  { transform: translateY(290px); }
}
@keyframes sc-avis-coche {
  0%, 55.3%    { opacity: 0; transform: scale(.4); animation-timing-function: cubic-bezier(.34, 1.4, .64, 1); }
  55.8%, 98.4% { opacity: 1; transform: none; }
  99.9%, 100%  { opacity: 0; transform: scale(.4); }
}
@keyframes sc-avis-f-off {
  0%, 55.3%    { opacity: 1; }
  55.5%, 98.4% { opacity: 0; }
  99.9%, 100%  { opacity: 1; }
}
@keyframes sc-avis-f-on {
  0%, 55.3%    { opacity: 0; }
  55.5%, 98.4% { opacity: 1; }
  99.9%, 100%  { opacity: 0; }
}

/* L'envoi : la case s'ouvre, la barre avance, puis « En ligne sur le site »
   et le compte passe à 25. */
@keyframes sc-avis-t-case {
  0%, 60.2%    { height: 0; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  61.4%, 98.4% { height: 44px; }
  99.9%, 100%  { height: 0; }
}
@keyframes sc-avis-t-barre {
  0%, 61.4%    { width: 0; animation-timing-function: cubic-bezier(.3, .1, .3, 1); }
  63.4%, 98.4% { width: 100%; }
  99.9%, 100%  { width: 0; }
}
@keyframes sc-avis-t-etat-a {
  0%, 63.4%    { opacity: 1; }
  63.7%, 98.4% { opacity: 0; }
  99.9%, 100%  { opacity: 1; }
}
@keyframes sc-avis-t-etat-b {
  0%, 63.8%    { opacity: 0; }
  64.2%, 98.4% { opacity: 1; }
  99.9%, 100%  { opacity: 0; }
}
@keyframes sc-avis-t-n-av {
  0%, 63.6%    { opacity: 1; }
  63.9%, 98.4% { opacity: 0; }
  99.9%, 100%  { opacity: 1; }
}
@keyframes sc-avis-t-n-ap {
  0%, 64%      { opacity: 0; }
  64.3%, 98.4% { opacity: 1; }
  99.9%, 100%  { opacity: 0; }
}

/* ═══ 3. L'AVIS ARRIVE, LA NOTE SUIT ══════════════════════════════════ */

/* La notification tombe, avec le léger rebond d'iOS. */
@keyframes sc-avis-notif {
  0%, 67.6%    { opacity: 0; transform: translateY(-80px); }
  67.7%        { opacity: 1; transform: translateY(-80px); animation-timing-function: cubic-bezier(.34, 1.3, .64, 1); }
  69.4%, 98.4% { opacity: 1; transform: translateY(0); }
  99.9%, 100%  { opacity: 0; transform: translateY(-80px); }
}

/* La fenêtre est revenue en grand à 75 % : l'avis de Camille se pose en
   tête, Marc passe à la deuxième place, Hélène sort par la droite. */
@keyframes sc-avis-c-glisse {
  0%, 75.6%    { transform: none; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  78.2%, 98.4% { transform: translateX(244px); }
  99.9%, 100%  { transform: none; }
}
@keyframes sc-avis-c-neuf {
  0%, 76.2%    { opacity: 0; transform: translateY(-8px); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  78.4%, 98.4% { opacity: 1; transform: none; }
  99.9%, 100%  { opacity: 0; transform: translateY(-8px); }
}
/* La note et le compte ne se croisent jamais : l'ancienne valeur est partie
   avant que la nouvelle n'arrive. */
@keyframes sc-avis-note-av {
  0%, 76.8%    { opacity: 1; }
  77.1%, 98.4% { opacity: 0; }
  99.9%, 100%  { opacity: 1; }
}
@keyframes sc-avis-note-ap {
  0%, 77.3%    { opacity: 0; }
  77.7%, 98.4% { opacity: 1; }
  99.9%, 100%  { opacity: 0; }
}
/* La barre d'étoiles suit le chiffre ; ses deux largeurs viennent du PHP. */
@keyframes sc-avis-remplit {
  0%, 76.8%    { width: var(--sc-part, 92.73%); }
  77.8%, 98.4% { width: var(--sc-apres, 93.33%); }
  99.9%, 100%  { width: var(--sc-part, 92.73%); }
}

/* LE CURSEUR. LES CIBLES SONT CALCULÉES dans le repère de la toile (la vue
   commence en (1, 65)), moins (4, 2), l'écart de la pointe :
     la vignette des huîtres : centre (78.5, 196.5) → (75, 195) ;
     la flèche suivante : centre (493, 282) → (489, 280) ;
     la croix : centre (496, 88) → (492, 86).
   Pendant la descente, il reste posé, comme une main sur la molette. Il
   s'en va avant que la fenêtre ne se range. */
@keyframes sc-cur-avis {
  0%, 1.9%     { transform: translate(430px, 470px); opacity: 0; }
  2.6%, 9.5%   { transform: translate(410px, 400px); opacity: 1; }
  13.4%, 14.6% { transform: translate(75px, 195px); }
  14.9%        { transform: translate(75px, 195px) scale(.84); }
  15.3%, 20.5% { transform: translate(75px, 195px); }
  23.4%, 23.8% { transform: translate(489px, 280px); }
  24.1%        { transform: translate(489px, 280px) scale(.84); }
  24.5%, 28.5% { transform: translate(489px, 280px); }
  32.2%, 32.6% { transform: translate(492px, 86px); }
  32.9%        { transform: translate(492px, 86px) scale(.84); }
  33.3%, 34.5% { transform: translate(492px, 86px); opacity: 1; }
  39%, 98.4%   { transform: translate(505px, 470px); opacity: 0; }
  99.9%, 100%  { transform: translate(430px, 470px); opacity: 0; }
}
/* Une onde par appui : les huîtres, la flèche, la croix. */
@keyframes sc-avis-onde {
  0%, 14.7%    { transform: scale(.4); opacity: 0; }
  14.9%        { transform: scale(.4); opacity: .9; }
  17.6%, 23.9% { transform: scale(2.2); opacity: 0; }
  24%          { transform: scale(.4); opacity: 0; }
  24.1%        { transform: scale(.4); opacity: .9; }
  26.8%, 32.7% { transform: scale(2.2); opacity: 0; }
  32.8%        { transform: scale(.4); opacity: 0; }
  32.9%        { transform: scale(.4); opacity: .9; }
  35.6%        { transform: scale(2.2); opacity: 0; }
  35.7%, 100%  { transform: scale(.4); opacity: 0; }
}

/* Moins de mouvement : l'état d'arrivée. La fenêtre en grand, la galerie
   avec le plateau en tête, l'avis de Camille et la note à 4,7. */
@media (prefers-reduced-motion: reduce) {
  .sc-avis-page { transform: translateY(-196px); }
  .sc-avis-ascenseur { transform: translateY(129px); }
  .sc-avis-tuile--1, .sc-avis-tuile--2, .sc-avis-tuile--3,
  .sc-avis-tuile--5, .sc-avis-tuile--6, .sc-avis-tuile--7 { transform: translate(121px, 0); }
  .sc-avis-tuile--4 { transform: translate(-363px, 89px); }
  .sc-avis-tuile--8 { opacity: 0; }
  .sc-avis-tuile--neuf { opacity: 1; }
  .sc-avis-g-n--av, .sc-avis-n--av, .sc-avis-c--av { opacity: 0; }
  .sc-avis-g-n--ap, .sc-avis-n--ap, .sc-avis-c--ap { opacity: 1; }
  .sc-avis-etoiles--moyenne .sc-avis-et--plein { width: var(--sc-apres, 93.33%); }
  .sc-avis-carte--marc, .sc-avis-carte--helene { transform: translateX(244px); }
  .sc-avis-carte--neuf { opacity: 1; }
}