/* Visuels produits fournis à la main + corrections de profondeur (axe z).
 *
 * Ce fichier est chargé APRÈS fig-assets.css : chaque règle ici écrase celle
 * générée pour la même classe. Avantage : rien à modifier dans
 * Components.bundle.js, donc ces corrections survivent à un ré-export du .fig.
 *
 * Pour ajouter un visuel :
 *   1. copier l'image dans assets/ avec un nom parlant
 *   2. repérer la classe fig-asset-… de l'emplacement à remplacer
 *   3. vérifier que la classe n'est utilisée QU'UNE fois dans le bundle :
 *        grep -c 'fig-asset-XXXX"' Components.bundle.js
 *      si elle sert plusieurs fois, ajouter un [style*="…"] pour ne viser
 *      que la bonne instance (voir les cas Combo plus bas)
 *   4. ajouter la règle ci-dessous, en notant le visuel d'origine en commentaire
 *
 * `contain` (au lieu du `cover` généré) garantit que le produit n'est jamais
 * rogné, quel que soit le rapport hauteur/largeur de l'image fournie.
 */


/* ---------------------------------------------------------------- */
/* Remplacements de visuels                                          */
/* ---------------------------------------------------------------- */

/* Mobiles — fiche « XIAOMI Redmi A7 Pro / 129€ ».
   D'origine : un Motorola edge 60 Fusion.
   Léger balancement gauche/droite (±3°) autour du centre. Pas de transform
   inline sur cette instance -> l'animation s'applique sans !important. */
.fig-asset-5bd670845e7ec725 {
  background: url(./assets/xiaomi-redmi-a7-pro.png) center / contain no-repeat;
  transform-origin: center;
  animation: or-sway 1.5s ease-in-out infinite alternate;
}
/* (keyframe or-sway + garde reduced-motion regroupés dans la section
   « Balancement » en bas de fichier, avec les autres éléments animés.) */

/* Mobiles — emplacement 502×502 (left 735 / top 1341).
   D'origine : un Redmi Note 15 Pro. */
.fig-asset-08614cd5fad58192 {
  background: url(./assets/bogota-basic-pack.png) center / contain no-repeat;
}

/* Mobiles — emplacement 223×528 (left 33 / top 3808). */
.fig-asset-07abe81059e43af0 {
  background: url(./assets/milos-basic-pack.png) center / contain no-repeat;
}

/* Mobiles — emplacement 790×790 (matrix ty 5209). */
.fig-asset-7028ccd9c8132a99 {
  background: url(./assets/redmi-note-15-pro.png) center / contain no-repeat;
}

/* Accessoires — emplacement 912×464 (left 522 / top 8819). */
.fig-asset-13a18350eb201865 {
  background: url(./assets/rayban-meta-wayfarer.png) center / contain no-repeat;
}

/* Forfaits — affiche Cheat_Code fournie par le client, dans son propre
   emplacement depuis la note 10 du bundle. Elle occupait auparavant celui du
   MERCH 03c8531ff8c4054a, qu'elle masquait : ce dernier reprend son visuel
   d'origine (bandeau « Ma box, c'est la base ») via fig-assets.css.

   Visuel « vitrophanie » 2000×1253 (paysage). L'emplacement a été recalé sur son
   ratio, 1512×947, donc `contain` ne laisse aucune bande. Il remplace l'affiche
   portrait 330×714 (assets/cheat-code-18-26.jpg, conservée mais inutilisée). */
.or-affiche-cheatcode {
  background: url(./assets/cheat-code-vitrophanie.jpg) center / contain no-repeat;
}

/* Forfaits — bandeau « La montre qui rassure / Ti Watch 39€ » du PDF. Le visuel
   fait 1512×846, exactement le gabarit de l'emplacement : `contain` ne laisse
   aucune bande. Son emplacement a depuis été supprimé du bundle (note 12 bis) ;
   la règle reste pour le jour où le bandeau revient. */
.or-merch-tiwatch {
  background: url(./assets/ti-watch.jpg) center / contain no-repeat;
}

/* Forfaits — 2e diapo du carrousel « Le Ti Forfait » : affiche générique fournie
   par le client (« Un Ti Forfait, un grand pas », source 43×24 en 2000×1116),
   ré-encodée à 1512×844, exactement le gabarit de l'emplacement (note 13 du
   bundle) : `contain` ne laisse aucune bande. Variante mobile dans
   mobile-assets.css. Remplace fig-asset-f33b28d6403e2abc, dont la règle
   subsiste dans fig-assets.css sans plus servir. */
.or-tiforfait-generique {
  background: url(./assets/ti-forfait-generique.webp) center / contain no-repeat;
}

/* Combo — bandeau 1388×232 (left 64 / top 1483) : on reprend le visuel du
   bandeau 7c947b1cf7bc394e (1391×232, même gabarit) à la place du sien. */
.fig-asset-5ad2ce8961f0d6e8 {
  background: url(./assets/7c947b1cf7bc394e.png) center / contain no-repeat;
}

/* Forfaits — emplacement 1512×1111 (top 6612), bandeau Box 5G. Visuel fourni
   par le client (source : PMCPJT006121-09-…-CHEAT-CODE-18-26_PORTAIL, 1000×666)
   à la place du MERCH « Ma box, c'est la base » d'origine (396×291).

   `contain` et non le `cover` généré : le visuel est en 3:2 (1,502) alors que
   l'emplacement est en 1,361, donc `cover` rognerait environ 9 % de la largeur
   — inacceptable sur un merch qui porte du texte. En `contain` l'image occupe
   toute la largeur et laisse ~105px de fond de page répartis en haut et en bas.
   Pour supprimer ces bandes il faudrait recaler la hauteur de l'emplacement sur
   1007px, comme cela a été fait pour l'affiche Cheat_Code juste au-dessus. */
.fig-asset-03c8531ff8c4054a {
  background: url(./assets/box-5g-portail.jpg) center / contain no-repeat;
}

/* Accessoires — emplacement 363×363 (left 1038 / top 10699), bloc « Rentrée
   maline : le 4ème accessoire à 1€ ou 19€ ». */
.fig-asset-e30cc31d76efdc9a {
  background: url(./assets/cable-charge.png) center / contain no-repeat;
}

/* Combo — emplacement 699×699 (matrix ty 469).
   ATTENTION : cette classe sert AUSSI au décor de la page Accueil (450×450).
   On discrimine sur la largeur, propre à l'instance Combo.

   Piège : ne pas discriminer sur une valeur de matrix. Le navigateur réécrit
   l'attribut style en arrondissant à 6 chiffres significatifs (2941.403
   devient 2941.4), donc un sélecteur calé sur la valeur du .fig ne matche pas.
   Les largeurs/hauteurs, elles, sont reproduites telles quelles. */
.fig-asset-06e325ae3dbe73c3[style*="698.544px"] {
  background: url(./assets/redmi-note-15-pro.png) center / contain no-repeat;
}

/* Accueil — emplacement 450×450 dans la carte « Notre sélection de mobiles ».
   Même classe que le Combo ci-dessus : on discrimine ici sur 450.048px. */
.fig-asset-06e325ae3dbe73c3[style*="450.048px"] {
  background: url(./assets/xiaomi-redmi-a7-pro.png) center / contain no-repeat;
}

/* Combo — les 3 pastilles « programme » (une grande 251×237 + deux petites
   147×139), toutes portées par la même classe. Image fournie 417×279 (paysage) :
   `contain` la montre entière sans déformation. Surcharge le sprite d'origine
   (fig-assets.css) — variante mobile assortie dans mobile-assets.css. */
.fig-asset-011f393be62ff56b-6bfcfbce {
  background: url(./assets/programme-re.png) center / contain no-repeat;
}

/* Internet — bandeau héros « 410€ d'avantages » (image fournie, 1512×1011). */
.fig-asset-37d5a4f1c387566a {
  background: url(./assets/internet-portail.jpg) center / cover no-repeat;
}

/* Internet — 2e bloc « Votre maison passe au Wifi 7 » (visuel MERCH Livebox 7,
   2000×1117 pour un emplacement 1524×851 : même rapport à 0,02% près, donc
   `contain` ne laisse aucune bande). L'emplacement était resté un placeholder
   vidéo : on neutralise le style videoslot (fond, cadre pointillé, bouton play)
   et on y met l'image.

   ATTENTION au sélecteur : app.js enveloppe ce slot dans un <a class="or-cta">
   (lien Boutique Internet) et remet alors le slot à top:0 — la règle calée sur
   `.or-videoslot[style*="top: 1594px"]` ne matchait donc plus rien et le bloc
   affichait le placeholder. C'est désormais le lien qui porte top:1594px. On
   garde les deux sélecteurs pour rester bon avant comme après l'enveloppe. */
.or-videoslot[style*="top: 1594px"],
.or-cta[style*="top: 1594px"] > .or-videoslot {
  background: url(./assets/internet-livebox7-merch.png) center / contain no-repeat !important;
}
.or-videoslot[style*="top: 1594px"]::before,
.or-videoslot[style*="top: 1594px"]::after,
.or-cta[style*="top: 1594px"] > .or-videoslot::before,
.or-cta[style*="top: 1594px"] > .or-videoslot::after {
  display: none !important;
}

/* Internet — une 2e image (c376, 1512×1127) était superposée SOUS le héros et
   débordait un peu de ses bords. On la retire (usage unique -> display:none). */
.fig-asset-c376b3bc3e2ab632 {
  display: none;
}

/* Accueil — carte « Nos forfaits pour toute la famille ».
   D'origine : un smartphone Samsung (c893…) et une montre enfant vtech
   (3a6b…) posés de biais dans la pastille de cercles concentriques.
   Remplacés par une seule photo de famille, déjà détourée en rond.

   Le smartphone porte le nouveau visuel, la montre est retirée. Les deux
   éléments ont un style inline (position + matrice de rotation) : il faut
   donc `!important` pour les recadrer. La photo est centrée sur la pastille
   (cercle 741×741 à 722/1259, centre 1092,5 / 1629,5) ; sa boîte de 560px
   laisse apparaître le rond de 500px (le fichier a 5,3 % de marge
   transparente de chaque côté) à l'intérieur des cercles orange.

   app.js regroupe ensuite les éléments de la carte d'après leur centre :
   celui de la photo tombe bien dans la carte, et la montre masquée (boîte
   de taille nulle) est ignorée.

   ROTATION : la photo tourne comme les autres visuels de l'accueil (voir la
   section « rotation légère et rapide » en bas de fichier). Le montage est
   particulier ici, parce que l'élément porte une matrice de rotation Figma en
   style inline qu'il faut neutraliser :

     - le `transform: none !important` d'origine a été RETIRÉ de cette règle.
       Un !important l'emporte sur une animation, la photo serait donc restée
       figée ; c'est l'animation qui annule désormais la matrice inline, une
       animation battant les déclarations normales, style inline compris.
     - `transform-origin` est forcé au centre : l'inline vaut `0 0` (repère
       Figma), la photo pivoterait autour de son coin haut gauche.
     - le `transform: none !important` réapparaît dans le bloc
       prefers-reduced-motion en bas de fichier, où l'animation est coupée :
       sans lui, la matrice inline reprendrait la main et décalerait la photo
       hors de la pastille. */
.fig-asset-c893338796b8d91a {
  background: url(./assets/famille-forfaits.png) center / contain no-repeat;
  left: 812px !important;
  top: 1349px !important;
  width: 560px !important;
  height: 560px !important;
  transform-origin: center !important;
  animation: or-spin .85s ease-in-out -0.85s infinite alternate;
}
.fig-asset-3a6bc380184ca906-109c6b50 {
  display: none;
}


/* ---------------------------------------------------------------- */
/* Corrections de profondeur (axe z)                                 */
/* ---------------------------------------------------------------- */
/* Dans l'export Figma, le décor (cercles concentriques) est déclaré APRÈS
 * le produit, donc il le recouvre. Plutôt que de réordonner le bundle,
 * on remonte le produit avec un z-index.
 *
 * Sans danger pour l'en-tête : .or-framescale porte un transform, ce qui crée
 * un contexte d'empilement — ces z-index restent confinés au cadre Figma et
 * ne peuvent jamais passer devant le header (z-index 500).
 */

/* Accessoires — SAMSUNG Galaxy Buds3 FE : le produit passe devant les
   cercles concentriques (conteneur left 503 / top 3005). */
.fig-asset-ce3174d6c3e2c696-c6f13d53 {
  z-index: 5;
}

/* Accessoires — « Un accessoire à 1€ » : la boîte cadeau passe au premier plan
   (elle était masquée par le panneau orange). D'origine : un AirTag. */
.fig-asset-a91b431c08cbd889 {
  background: url(./assets/boite-cadeau.png) center / contain no-repeat;
  z-index: 5;
}

/* Combo — le mobile passe devant les cercles concentriques.
   ATTENTION : cette classe sert AUSSI sur la page Mobiles (left 28 / top 7593).
   L'instance Combo est la seule à porter un transform : c'est le discriminant
   le plus robuste ici (aucun nombre susceptible d'être arrondi). */
.fig-asset-d60804b24f3f0a3a[style*="matrix"] {
  z-index: 5;
}

/* Accessoires — le « = » de l'offre groupée était déclaré AVANT sa pastille
   orange, qui le masquait entièrement (on ne voyait qu'un disque vide). */
#app span[style*="top: 11509px"] {
  z-index: 5;
}

/* Accessoires — bouton « Achetez ». Le texte est bien devant sa pastille, mais
   l'ensemble était recouvert par le visuel de protection d'écran
   (fig-asset-fc2f89af5862af49, 1399×842, fond blanc opaque) déclaré juste après.
   On remonte la pastille ET le texte : ne remonter que le texte laisserait un
   libellé blanc flottant sur l'image. */
#app div[style*="top: 10526px"],
#app span[style*="top: 10533px"] {
  z-index: 5;
}


/* ---------------------------------------------------------------- */
/* Interactions au survol                                            */
/* ---------------------------------------------------------------- */

/* Boutons « Découvrir ici » : léger zoom au survol. Les 27 exemplaires du
   site partagent tous cette classe (le libellé est dans le bitmap), et aucun
   ne porte de transform inline — un simple scale au survol s'applique donc
   partout sans rien écraser. z-index au survol pour que le bouton agrandi
   passe au-dessus de ses voisins au lieu d'être rogné. */
.fig-asset-e34ea1d72d61b46d {
  transition: transform .2s ease;
  cursor: pointer;
}
.fig-asset-e34ea1d72d61b46d:hover {
  transform: scale(1.08);
  z-index: 15;
}

/* Pastilles RDV : accessoires, combos, mobiles techno et les 3 iPhone
   reconditionnés (page mobiles) reçoivent la classe .or-rdv depuis app.js et
   pointent vers la prise de RDV. Visuel « Voir en boutique » fourni par le
   client (2026-07), appliqué sur les 3 pages — ici en desktop, et sur mobile
   dans mobile-assets.css (qui ré-affirme l'image après le swap des visuels m/).
   On ne remplace QUE l'image de fond (le center/cover reste) ; la double classe
   l'emporte sur la règle partagée sans !important. L'ancien visuel « RDV en
   boutique » (assets/voir-en-boutique.png) n'est plus référencé. */
.fig-asset-e34ea1d72d61b46d.or-rdv {
  background-image: url(./assets/voir-en-boutique-2026.png);
}


/* ---------------------------------------------------------------- */
/* Divers                                                            */
/* ---------------------------------------------------------------- */

/* Mobiles — dossier « 1 » de la 1re section (fig-asset-345c3b10bc488c48,
   294×265). Son conteneur d'export Figma est un flex effondré à 331×20 en
   overflow:hidden : il ne laissait dépasser qu'un liseré du dossier. On rend
   le conteneur visible pour révéler le dossier entier, au premier plan.
   top:3395 est unique dans tout le bundle -> cible sans ambiguïté.
   !important indispensable : overflow:hidden est en style INLINE et
   l'emporterait sinon sur une règle externe (z-index passe sans, faute de
   concurrent inline). */
#app div[style*="top: 3395px"] {
  overflow: visible !important;
  z-index: 6;
}

/* Accueil — dossier décoratif du coin haut gauche (cf. maquette). Même asset
   que sur les autres pages mais crop plus grand (541×489). À l'export Figma il
   était placé hors écran (wrapper -283/-194, overflow:hidden) donc invisible.
   On le révèle et on le repositionne pour qu'il dépasse du coin, rogné par le
   bord gauche du cadre. top:-194 unique -> cible le bon wrapper.
   !important car left/top/overflow sont en style inline. */
#app div[style*="top: -194px"] {
  overflow: visible !important;
  left: -300px !important;
  top: -110px !important;
  transform: scale(0.72);          /* réduit le dossier (demandé) */
  transform-origin: top left;
  z-index: 8;
}


/* ================================================================ */
/* Balancement gauche/droite (±3°, 1.5s, alternate)                 */
/* ---------------------------------------------------------------- */
/* Les éléments à transform:matrix (rotation+position Figma) gardent */
/* leur place : chaque keyframe encadre leur matrix d'origine par un */
/* translate(centre)->rotate->translate(-centre). Les éléments sans   */
/* matrix tournent autour de leur centre (origine par défaut).        */
/* Bloc généré depuis Components.bundle.js (voir scratchpad).          */
/* Décalages négatifs = désynchronisation des éléments co-visibles.   */
/* ================================================================ */

@keyframes or-sway{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}

@keyframes or-sway-m1{from{transform:translate(530.02px,3107.70px) rotate(-3deg) translate(-530.02px,-3107.70px) matrix(0.984,-0.179,0.179,0.984,120.333,2609.499)}to{transform:translate(530.02px,3107.70px) rotate(3deg) translate(-530.02px,-3107.70px) matrix(0.984,-0.179,0.179,0.984,120.333,2609.499)}}
.fig-asset-bb56912dd51de4fb-46035770{animation:or-sway-m1 1.5s ease-in-out -0.4s infinite alternate}
@keyframes or-sway-m2{from{transform:translate(982.05px,5950.89px) rotate(-3deg) translate(-982.05px,-5950.89px) matrix(0.992,0.127,-0.127,0.992,640.464,5509)}to{transform:translate(982.05px,5950.89px) rotate(3deg) translate(-982.05px,-5950.89px) matrix(0.992,0.127,-0.127,0.992,640.464,5509)}}
.fig-asset-7028ccd9c8132a99{animation:or-sway-m2 1.5s ease-in-out -0.8s infinite alternate}
@keyframes or-sway-m3{from{transform:translate(428.50px,9708.04px) rotate(-3deg) translate(-428.50px,-9708.04px) matrix(0.985,-0.172,0.172,0.985,3.083,9344.094)}to{transform:translate(428.50px,9708.04px) rotate(3deg) translate(-428.50px,-9708.04px) matrix(0.985,-0.172,0.172,0.985,3.083,9344.094)}}
.fig-asset-785539f4b694622a-b40651f7{animation:or-sway-m3 1.5s ease-in-out -0.3s infinite alternate}
@keyframes or-sway-m4{from{transform:translate(520.21px,868.35px) rotate(-3deg) translate(-520.21px,-868.35px) matrix(0.987,0.161,-0.161,0.987,222.080,454)}to{transform:translate(520.21px,868.35px) rotate(3deg) translate(-520.21px,-868.35px) matrix(0.987,0.161,-0.161,0.987,222.080,454)}}
.fig-asset-052c3d67f301a4b3[style*="721.857px"]{animation:or-sway-m4 1.5s ease-in-out 0s infinite alternate}
@keyframes or-sway-m5{from{transform:translate(984.90px,3392.59px) rotate(-3deg) translate(-984.90px,-3392.59px) matrix(0.953,0.304,-0.304,0.953,795.197,2929)}to{transform:translate(984.90px,3392.59px) rotate(3deg) translate(-984.90px,-3392.59px) matrix(0.953,0.304,-0.304,0.953,795.197,2929)}}
.fig-asset-ce3174d6c3e2c696-c6f13d53{animation:or-sway-m5 1.5s ease-in-out -0.5s infinite alternate}
@keyframes or-sway-m6{from{transform:translate(1008.10px,895.11px) rotate(-3deg) translate(-1008.10px,-895.11px) matrix(0.967,0.253,-0.253,0.967,758.717,469)}to{transform:translate(1008.10px,895.11px) rotate(3deg) translate(-1008.10px,-895.11px) matrix(0.967,0.253,-0.253,0.967,758.717,469)}}
.fig-asset-06e325ae3dbe73c3[style*="698.544px"]{animation:or-sway-m6 1.5s ease-in-out 0s infinite alternate}
@keyframes or-sway-m7{from{transform:translate(425.05px,3175.75px) rotate(-3deg) translate(-425.05px,-3175.75px) matrix(0.955,-0.296,0.296,0.955,120,2941.403)}to{transform:translate(425.05px,3175.75px) rotate(3deg) translate(-425.05px,-3175.75px) matrix(0.955,-0.296,0.296,0.955,120,2941.403)}}
.fig-asset-d60804b24f3f0a3a[style*="matrix"]{animation:or-sway-m7 1.5s ease-in-out -0.6s infinite alternate}
@keyframes or-sway-m8{from{transform:translate(1148.47px,4538.08px) rotate(-3deg) translate(-1148.47px,-4538.08px) matrix(0.983,0.183,-0.183,0.983,978.344,4189)}to{transform:translate(1148.47px,4538.08px) rotate(3deg) translate(-1148.47px,-4538.08px) matrix(0.983,0.183,-0.183,0.983,978.344,4189)}}
.fig-asset-71f3557fdd790d20[style*="462.344px"]{animation:or-sway-m8 1.5s ease-in-out 0s infinite alternate}
@keyframes or-sway-m9{from{transform:translate(968.66px,4732.78px) rotate(-3deg) translate(-968.66px,-4732.78px) matrix(0.995,-0.098,0.098,0.995,789,4538.206)}to{transform:translate(968.66px,4732.78px) rotate(3deg) translate(-968.66px,-4732.78px) matrix(0.995,-0.098,0.098,0.995,789,4538.206)}}
.fig-asset-c1b627339d252f23[style*="422.567px"][style*="matrix"]{animation:or-sway-m9 1.5s ease-in-out -0.5s infinite alternate}

/* pos-directe : rotation autour du centre (origine par defaut) */
.fig-asset-356ebbfb5a77b79d-c9da8ab8{transform-origin:center;animation:or-sway 1.5s ease-in-out -0.7s infinite alternate}
.fig-asset-4b20c06b2b7adb47{transform-origin:center;animation:or-sway 1.5s ease-in-out -0.3s infinite alternate}
.fig-asset-47598c1a1bb3bbeb[style*="top: 813px"]{transform-origin:center;animation:or-sway 1.5s ease-in-out -0.7s infinite alternate}
.fig-asset-ce3174d6c3e2c696{transform-origin:center;animation:or-sway 1.5s ease-in-out 0s infinite alternate}

@media (prefers-reduced-motion: reduce){
  .fig-asset-bb56912dd51de4fb-46035770,
  .fig-asset-7028ccd9c8132a99,
  .fig-asset-785539f4b694622a-b40651f7,
  .fig-asset-052c3d67f301a4b3[style*="721.857px"],
  .fig-asset-ce3174d6c3e2c696-c6f13d53,
  .fig-asset-06e325ae3dbe73c3[style*="698.544px"],
  .fig-asset-d60804b24f3f0a3a[style*="matrix"],
  .fig-asset-71f3557fdd790d20[style*="462.344px"],
  .fig-asset-c1b627339d252f23[style*="422.567px"][style*="matrix"],
  .fig-asset-356ebbfb5a77b79d-c9da8ab8,
  .fig-asset-4b20c06b2b7adb47,
  .fig-asset-47598c1a1bb3bbeb[style*="top: 813px"],
  .fig-asset-ce3174d6c3e2c696,
  .fig-asset-5bd670845e7ec725 { animation: none !important; }
}


/* Combo — produit ce3174d6c3e2c696 (430×609) au premier plan (demandé). */
.fig-asset-ce3174d6c3e2c696 {
  z-index: 5;
}


/* Accessoires — « Le 4ème accessoire à 1€ » : chaque produit (image + libellé)
   et chaque « + » apparaît en cascade gauche->droite (délai posé en JS) pour
   montrer que ça s'additionne. État de départ masqué + léger glissé depuis la
   gauche ; .is-in (ajouté au scroll) ramène à la position finale. */
.or-add-item{
  opacity: 0;
  transform: translateX(-34px) scale(0.9);
  transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.3,1);
  will-change: opacity, transform;
}
.or-add-item.is-in{ opacity: 1; transform: none; }


/* Lien enveloppant les pastilles « Découvrir ici » (voir app.js) : léger zoom
   au survol, appliqué à la pastille elle-même pour que l'effet soit visible. */
.or-cta{ display: block; border-radius: 30px; }
.or-cta > .fig-asset-e34ea1d72d61b46d{ transition: transform .2s ease; }
.or-cta:hover > .fig-asset-e34ea1d72d61b46d,
.or-cta:focus-visible > .fig-asset-e34ea1d72d61b46d{ transform: scale(1.06); }
.or-cta:focus-visible{ outline: 3px solid rgb(0,0,0); outline-offset: 4px; }

/* Bandeau discret « En savoir plus » posé en bas de la diapo vidéo SmarTeen
   (app.js, page forfaits). La tuile garde sa lecture au clic ; ce lien mène à
   la page Smarteen. Tailles en px design (le cadre est mis à l'échelle par
   relayout). Il se peint au-dessus de l'affiche ; il capte ses propres clics
   (stopPropagation côté JS) pour ne pas lancer la vidéo. */
.or-ensavoirplus{
  position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%);
  display: inline-flex; align-items: center;
  padding: 13px 30px; border-radius: 999px;
  background: rgba(0,0,0,0.55); color: rgb(255,255,255);
  font-family: "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 700; font-size: 26px; line-height: 1; letter-spacing: .2px;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background .2s ease;
}
.or-ensavoirplus:hover,
.or-ensavoirplus:focus-visible{ background: rgba(0,0,0,0.72); }
.or-ensavoirplus:focus-visible{ outline: 3px solid rgb(255,121,0); outline-offset: 3px; }

/* ---- Battement des pastilles « Découvrir ici » -----------------------------
   Un appel au clic, pas un clignotant : le battement occupe le dernier tiers
   d'un cycle de 3,4 s et la pastille reste immobile le reste du temps. Deux
   gestes simultanés, une pression légère de la pastille et un halo orange qui
   s'écarte, c'est-à-dire le vocabulaire d'un bouton qu'on effleure.

   La classe .or-pulse et le décalage --pulse-d sont posés par app.js à l'entrée
   dans l'écran : les pastilles d'une même page ne battent donc pas à
   l'unisson — un mur de pastilles synchronisées serait insupportable. */
@keyframes or-cta-pulse{
  0%,66%,100%{ transform: scale(1); }
  76%{ transform: scale(1.055); }
  88%{ transform: scale(0.994); }
}
@keyframes or-cta-halo{
  0%,66%{ box-shadow: 0 0 0 0 rgba(255,121,0,.45); }
  90%,100%{ box-shadow: 0 0 0 22px rgba(255,121,0,0); }
}
.or-cta.or-pulse > .fig-asset-e34ea1d72d61b46d{
  animation: or-cta-pulse 3.4s ease-in-out var(--pulse-d,0s) infinite;
}
/* Le halo est porté par un pseudo-élément du lien : il se dessine EN DEHORS de
   la boîte (box-shadow à écartement croissant), il ne recouvre donc jamais le
   libellé de la pastille. */
.or-cta.or-pulse::after{
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none;
  animation: or-cta-halo 3.4s ease-out var(--pulse-d,0s) infinite;
}
/* Au survol et au clavier, le battement s'efface : le zoom ci-dessus reprend
   la main. Sans ce `animation:none`, l'animation l'emporterait sur la simple
   déclaration `transform` et le survol resterait sans effet. */
.or-cta:hover > .fig-asset-e34ea1d72d61b46d,
.or-cta:focus-visible > .fig-asset-e34ea1d72d61b46d{ animation: none; }
.or-cta:hover::after,
.or-cta:focus-visible::after{ animation: none; }

@media (prefers-reduced-motion: reduce){
  .or-cta > .fig-asset-e34ea1d72d61b46d{ transition: none; animation: none; }
  .or-cta.or-pulse::after{ animation: none; }
}

@media (prefers-reduced-motion: reduce){
  .or-add-item{ opacity: 1; transform: none; transition: none; }
}


/* ================================================================ */
/* Section « Les forfaits KomZot » (Components.bundle.js, note 11)   */
/* ---------------------------------------------------------------- */
/* Tout est en pixels de MAQUETTE : ces blocs vivent dans le cadre de */
/* 1512px que .or-framescale met à l'échelle de l'écran. On écrit     */
/* donc comme sur un écran de 1512px — aucune media query ici, le     */
/* transform:scale() s'en charge, exactement comme pour les bandeaux  */
/* d'origine.                                                         */
/*                                                                    */
/* La palette du document client (orange d'impression, violet, gris, vert    */
/* d'eau, jaune) est ramenée à celle du site : orange rgb(255,121,0), noir,  */
/* et le beige rgb(245,240,232) du fond de page — les cartes ne sont pas des */
/* rectangles blancs posés sur la page, elles sont DÉCOUPÉES dedans, comme   */
/* les pastilles « Découvrir ici » et les bandeaux du reste du site.         */
/* ================================================================ */

/* L'écart de 48px sous la rangée n'est pas décoratif : les auréoles des cartes
   débordent de 30px sous leur bordure sans occuper de place dans la mise en
   page (ce sont des box-shadow). En deçà, la barre noire les recouvrirait. */
.or-komzot-diapo{
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 48px;
}

/* `stretch` : les 3 cartes prennent la hauteur de la plus haute (celle
   qui porte la flèche d'évolution). Sans ça, une carte plus courte
   remonterait ses blocs de prix et la lecture en colonnes serait perdue.
   La gouttière de 84px loge les auréoles des deux cartes voisines (2 x 30px)
   sans qu'elles se touchent. */
.or-komzot-rangee{ display: flex; align-items: stretch; gap: 84px; }

/* ---- L'auréole concentrique ------------------------------------------------
   C'est la signature graphique du site : chaque pastille « Découvrir ici »
   (fig-asset-e34ea1d72d61b46d), chaque bandeau KomZot (7c947b1cf7bc394e) et le
   cadre décoratif (7dd09b8477e2b613) sont cernés de traits orange concentriques
   qui s'épaississent et s'opacifient en se rapprochant de la forme.

   Relevé sur ces trois bitmaps : rgb(255,121,0) à 25 / 50 / 75 / 100 %
   d'opacité, traits de 1 à 5px, écartés d'une dizaine de pixels.

   Reproduit ici en `box-shadow` plutôt qu'en image : la chaîne épouse le rayon
   de la carte, suit sa hauteur quelle qu'elle soit, et ne crénelle jamais quel
   que soit le facteur d'échelle du cadre. Chaque trait est précédé d'un anneau
   couleur fond, qui masque le trait suivant : les ombres se peignent de la
   première à la dernière, la première étant au-dessus. */
.or-komzot-carte{
  position: relative;                 /* repère de l'étiquette « Ti Forfait » */
  display: flex; flex-direction: column; align-items: center;
  width: 400px; padding: 24px;
  background: rgb(245,240,232);       /* le fond de la page, pas du blanc */
  border: 5px solid rgb(255,121,0);
  border-radius: 28px;                /* écrase les 30px hérités de .or-cta */
  color: rgb(0,0,0);
  font-family: "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 700; text-align: center; line-height: 1.2;
  box-shadow:
    0 0 0  7px rgb(245,240,232),
    0 0 0 11px rgba(255,121,0,.75),
    0 0 0 18px rgb(245,240,232),
    0 0 0 21px rgba(255,121,0,.50),
    0 0 0 28px rgb(245,240,232),
    0 0 0 30px rgba(255,121,0,.28);
  /* Le zoom au survol passe par --fx-zoom et non par un `transform` propre :
     la carte porte .or-fx à vie (voir app.js), et deux règles `transform`
     sur le même élément s'écraseraient. Même montage que .or-cardzoom. */
  transition: transform .28s cubic-bezier(.22,.61,.36,1), box-shadow .28s ease;
}
/* Au survol l'auréole s'allume — même vocabulaire que le battement des
   pastilles « Découvrir ici » (halo orange qui s'écarte), en réversible. */
.or-komzot-carte:hover,
.or-komzot-carte:focus-visible{
  --fx-zoom: 1.03;
  box-shadow:
    0 0 0  7px rgb(245,240,232),
    0 0 0 11px rgba(255,121,0,1),
    0 0 0 18px rgb(245,240,232),
    0 0 0 21px rgba(255,121,0,.80),
    0 0 0 28px rgb(245,240,232),
    0 0 0 31px rgba(255,121,0,.55);
}
/* les <b>/<i> ne servent qu'à séparer les deux lignes d'un même bloc */
.or-komzot-carte i{ font-style: normal; }

.or-komzot-go{
  font-size: 72px; line-height: 1; color: rgb(255,121,0); margin-bottom: 14px;
}
/* « 5Go à 20Go » est trois fois plus long que « 30Go » : à 72px il passerait
   sur deux lignes. La classe est posée par komzotCarte() d'après la longueur
   du libellé — un futur forfait au nom long en bénéficiera sans retouche. */
.or-komzot-go-long{ font-size: 52px; }

/* Flèche d'évolution des données. Dessinée en CSS et non importée en image :
   elle suit l'échelle du cadre sans jamais crénéler. */
.or-komzot-evo{
  display: block; width: 100%;
  font-size: 18px; font-weight: 400; margin-bottom: 16px;
}
.or-komzot-fleche{
  display: block; position: relative;
  width: 300px; height: 4px; margin: 0 auto 8px;
  background: rgb(0,0,0);
}
.or-komzot-fleche::after{
  content: ""; position: absolute; right: -2px; top: 50%;
  transform: translateY(-50%);
  border: 11px solid transparent; border-right: 0; border-left: 18px solid rgb(0,0,0);
}

.or-komzot-specs{
  font-size: 28px; line-height: 1.35;
  white-space: pre-line;              /* une ligne par entrée de la table */
  margin-bottom: 18px;
}
.or-komzot-noeng{ font-size: 22px; font-weight: 400; margin-bottom: 18px; }

/* Le bandeau violet du document devient une pastille noire à libellé blanc :
   c'est la forme des onglets du header et le noir des badges « Déjà client
   mobile » du site. */
.or-komzot-badge{
  display: block; width: 100%; padding: 13px 8px;
  margin-top: auto; margin-bottom: 16px;
  background: rgb(0,0,0); color: #fff; border-radius: 22px;
}
.or-komzot-badge b{ display: block; font-size: 24px; line-height: 1.15; }
.or-komzot-badge i{ display: block; font-size: 17px; line-height: 1.25; margin-top: 3px; }

/* Prix de référence : le gris du document n'existe pas dans la charte du site.
   Un simple voile noir suffit à le mettre au second plan derrière le tarif
   Orange Avantage, qui est le seul aplat orange de la carte. */
.or-komzot-std{
  display: block; width: 100%; padding: 12px 8px; margin-bottom: 14px;
  background: rgba(0,0,0,.07); border-radius: 22px;
  font-size: 40px; line-height: 1.2;
}
/* Plaquage du bas de carte. Le bandeau noir porte la marge automatique quand
   il existe ; la 1Go n'en a pas (« Sans engagement » suit directement les
   caractéristiques, comme sur le document), c'est donc son bloc de prix qui
   prend le relais. Sélecteur sur le frère précédent, et non `auto` sur les
   deux : deux marges automatiques dans la même carte se partageraient
   l'espace libre et décrocheraient les blocs l'un de l'autre.
   Résultat : les deux blocs de prix sont au même niveau sur les 3 cartes
   d'une rangée — c'est ce qui la fait lire comme un tableau comparatif. */
.or-komzot-carte > :not(.or-komzot-badge) + .or-komzot-std{ margin-top: auto; }
.or-komzot-std i{ font-size: 22px; }

.or-komzot-adv{
  display: block; width: 100%; padding: 15px 8px;
  background: rgb(255,121,0); color: #fff; border-radius: 22px;
}
.or-komzot-adv i{ display: block; font-size: 22px; line-height: 1.25; }
.or-komzot-adv b{ display: block; font-size: 44px; line-height: 1.25; }
/* « * » (SMS/MMS illimités) et « ** » (avec Orange avantage) grossis sur les
   cartes KomZot, à la demande du client (2026-07). Portée limitée aux cartes :
   la classe .or-sup (0.42em) sert de renvoi partout ailleurs sur le site. Le
   « ** » est désormais collé en exposant à « avec Orange avantage » (voir
   komzotCarte, le <sup> est passé DANS le <i>). */
.or-komzot-specs .or-sup{ font-size: .72em; }
.or-komzot-adv .or-sup{ font-size: .95em; }

/* Étiquette « Ti Forfait » : le post-it jaune du document devient une pastille
   noire, la forme que le site donne partout à ses accroches (« Déjà client
   mobile », onglets, sommaire). Posée en travers du coin haut droit, elle
   déborde dans la gouttière sans jamais atteindre la carte voisine — aucun
   z-index à arbitrer. Elle se balance comme les visuels produits du site
   (cf. @keyframes or-sway plus haut), autour de son inclinaison propre. */
.or-komzot-sticker{
  position: absolute; right: -22px; top: -34px; z-index: 2;
  padding: 9px 22px; white-space: nowrap; border-radius: 24px;
  background: rgb(0,0,0); color: #fff;
  font-size: 28px; line-height: 1.2;
  transform: rotate(-9deg); transform-origin: center;
  animation: or-komzot-sway 2.4s ease-in-out infinite alternate;
}
@keyframes or-komzot-sway{ from{ transform: rotate(-11deg) } to{ transform: rotate(-6deg) } }

/* Barre de rappel sous chaque rangée : 3 cartes de 400 + 2 gouttières de 84.
   Même pastille noire que les entrées du sommaire, pour la même raison. */
.or-komzot-tarifs{
  width: 1368px; padding: 14px 0; border-radius: 30px;
  background: rgb(0,0,0); color: #fff;
  font-family: "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 700; font-size: 26px; line-height: 1.2; text-align: center;
}

/* Mobile : 2 forfaits par écran (voir app.js, « KomZot : 2 forfaits par écran »).
   Une diapo = un écran ; à 3 cartes de 400px elles retombent à ~100px réels sous
   l'échelle mobile. On repasse à 3 diapos de 2 cartes ÉLARGIES : regrouper seul
   ne change rien à leur taille, c'est la largeur de carte qui les agrandit.
   2×640 + gouttière 84 = 1364px ≈ la barre « Tarifs mensuels » (1368px), donc
   l'alignement d'origine est conservé. La classe .or-komzot-duo n'est posée que
   sous 820px par app.js ; le garde @media évite tout élargissement en desktop
   si la classe subsistait. */
@media (max-width: 820px){
  .or-komzot-duo .or-komzot-carte{ width: 640px; }
}

@media (prefers-reduced-motion: reduce){
  .or-komzot-carte{ transition: none; }
  .or-komzot-sticker{ animation: none; }
}

/* ---- Battement des fonds décoratifs ---------------------------------------
   Battement rapide et continu (demandé), cycle propre plutôt qu'un partage de
   @keyframes or-cta-pulse : un fond de 1000px et une pastille de 226px
   n'appellent ni la même amplitude ni la même cadence, et les garder séparés
   évite qu'un réglage de l'un déforme l'autre.

   Les sélecteurs sont écrits en négatif (`:not`) plutôt qu'en listant chaque
   gabarit : ces classes servent à une douzaine d'emplacements, presque tous
   concernés, et deux exclusions se relisent mieux qu'une dizaine d'inclusions.

     29a87b1a6c630dcb -> tous sauf les deux 741×741, qui sont la pastille de
                         cercles concentriques de la carte « famille » (Accueil)
                         et doivent rester fixes derrière la photo détourée.
     7dd09b8477e2b613 -> les 830×830 et 951×951 ; les deux 676×676 restent
                         immobiles (non demandés).
     fb908d497dffc0eb et sa variante -ea7b79fa -> un seul emplacement chacun,
                         donc aucun discriminant nécessaire. */
@keyframes or-bg-pulse{
  0%,100%{ transform: scale(1); }
  50%    { transform: scale(1.035); }
}
.fig-asset-29a87b1a6c630dcb:not([style*="741px"]),
.fig-asset-7dd09b8477e2b613:not([style*="676px"]),
.fig-asset-fb908d497dffc0eb,
.fig-asset-fb908d497dffc0eb-ea7b79fa{
  transform-origin: center;
  animation: or-bg-pulse 1.1s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce){
  .fig-asset-29a87b1a6c630dcb:not([style*="741px"]),
  .fig-asset-7dd09b8477e2b613:not([style*="676px"]),
  .fig-asset-fb908d497dffc0eb,
  .fig-asset-fb908d497dffc0eb-ea7b79fa{ animation: none; }
}

/* ---- Clignotement des pastilles de remise (« 40€ », « jusqu'à 100€ ») ------
   Un vrai blink coupe l'opacité, donc le montant devient illisible une partie
   du temps — exactement ce qu'il ne faut pas sur un prix. Ici l'opacité n'est
   jamais touchée : c'est la LUMINOSITÉ qui monte brièvement, doublée d'un halo
   orange et d'un très léger grossissement. L'oeil lit un éclat, mais le
   contenu reste net et lisible à tout instant.

   Rythme : deux éclats rapprochés (78% et 92%) puis l'immobilité sur les deux
   premiers tiers du cycle — c'est l'irrégularité qui accroche le regard, un
   battement régulier se fond dans le décor au bout de quelques secondes.

   Les deux classes ne servent qu'à ces pastilles de remise (3 emplacements
   chacune, tous concernés), donc pas de discriminant de gabarit. */
@keyframes or-badge-blink{
  0%,70%,100%{ filter: brightness(1) drop-shadow(0 0 0 rgba(255,121,0,0)); transform: scale(1); }
  78%        { filter: brightness(1.35) drop-shadow(0 0 14px rgba(255,121,0,.75)); transform: scale(1.06); }
  85%        { filter: brightness(1) drop-shadow(0 0 0 rgba(255,121,0,0)); transform: scale(1); }
  92%        { filter: brightness(1.3) drop-shadow(0 0 10px rgba(255,121,0,.6)); transform: scale(1.035); }
}
.fig-asset-ce0666f60008e921,
.fig-asset-b6360984a22e71e8{
  transform-origin: center;
  animation: or-badge-blink 2.6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce){
  .fig-asset-ce0666f60008e921,
  .fig-asset-b6360984a22e71e8{ animation: none; }
}

/* ---- Clignotement de la carte KomZot « 5Go à 20Go » ------------------------
   Même principe que le blink des pastilles de remise plus haut : jamais
   d'opacité, sinon les tarifs deviennent illisibles par intermittence. Ici
   c'est l'AURÉOLE de la carte qui s'allume — les six anneaux du box-shadow
   passent à pleine opacité et s'écartent d'un cran — donc rien ne bouge dans
   le contenu, le texte reste net en permanence.

   Pas de `transform` non plus, et c'est impératif : la carte porte .or-fx à
   vie (apparition + parallaxe, app.css), qui possède déjà le transform de
   l'élément. Une seconde règle transform l'écraserait et ferait sauter la
   carte au défilement — c'est aussi pourquoi le zoom au survol passe par
   --fx-zoom (voir .or-komzot-carte:hover plus haut).

   Rythme repris de or-badge-blink : deux éclats rapprochés en fin de cycle
   puis l'immobilité, l'irrégularité accrochant l'oeil mieux qu'un battement
   régulier. La cadence est volontairement plus lente (3,2s) que celle des
   pastilles : c'est un bloc de 400px, un éclat trop fréquent y devient
   fatigant à lire.

   Le sélecteur vise l'aria-label, seul discriminant stable entre les six
   cartes — la classe .or-komzot-go-long, elle, dépend de la longueur du
   libellé et s'appliquerait à un futur forfait au nom long. */
@keyframes or-komzot-blink{
  0%,70%,100%{
    box-shadow:
      0 0 0  7px rgb(245,240,232),
      0 0 0 11px rgba(255,121,0,.75),
      0 0 0 18px rgb(245,240,232),
      0 0 0 21px rgba(255,121,0,.50),
      0 0 0 28px rgb(245,240,232),
      0 0 0 30px rgba(255,121,0,.28);
  }
  78%{
    box-shadow:
      0 0 0  7px rgb(245,240,232),
      0 0 0 13px rgba(255,121,0,1),
      0 0 0 18px rgb(245,240,232),
      0 0 0 23px rgba(255,121,0,.90),
      0 0 0 28px rgb(245,240,232),
      0 0 0 34px rgba(255,121,0,.65);
  }
  85%{
    box-shadow:
      0 0 0  7px rgb(245,240,232),
      0 0 0 11px rgba(255,121,0,.75),
      0 0 0 18px rgb(245,240,232),
      0 0 0 21px rgba(255,121,0,.50),
      0 0 0 28px rgb(245,240,232),
      0 0 0 30px rgba(255,121,0,.28);
  }
  92%{
    box-shadow:
      0 0 0  7px rgb(245,240,232),
      0 0 0 12px rgba(255,121,0,1),
      0 0 0 18px rgb(245,240,232),
      0 0 0 22px rgba(255,121,0,.85),
      0 0 0 28px rgb(245,240,232),
      0 0 0 32px rgba(255,121,0,.55);
  }
}
.or-komzot-carte[aria-label*="5Go à 20Go"]{
  animation: or-komzot-blink 3.2s ease-in-out infinite;
}
/* Au survol le clignotement s'efface : l'auréole du :hover reprend la main.
   Sans ce `animation:none`, l'animation l'emporterait sur la déclaration
   box-shadow du survol, qui resterait donc sans effet. */
.or-komzot-carte[aria-label*="5Go à 20Go"]:hover,
.or-komzot-carte[aria-label*="5Go à 20Go"]:focus-visible{
  animation: none;
}

@media (prefers-reduced-motion: reduce){
  .or-komzot-carte[aria-label*="5Go à 20Go"]{ animation: none; }
}

/* ================================================================ */
/* Accueil — rotation légère et rapide des produits                 */
/* ---------------------------------------------------------------- */
/* Même montage que la section « Balancement » plus haut, mais plus  */
/* nerveux (±3° en 0,85s au lieu de 1,5s), comme demandé.            */
/*                                                                   */
/* PÉRIMÈTRE : uniquement les appareils et visuels produits de la    */
/* page d'accueil. Les FONDS restent immobiles, comme demandé :      */
/*   - 7dd09b8477e2b613 (deux cadres 676×676) : cadre décoratif      */
/*   - 29a87b1a6c630dcb (deux pastilles 741×741) : cercles           */
/*     concentriques servant de fond aux cartes                      */
/* Ces deux classes battent déjà via or-bg-pulse pour certaines      */
/* instances ; les faire aussi tourner cumulerait deux `transform`   */
/* sur le même élément, dont un seul survivrait.                     */
/*                                                                   */
/* Chaque sélecteur est discriminé par une dimension propre à        */
/* l'instance Accueil : ces classes servent aussi aux autres pages   */
/* (345c3b10bc488c48 à neuf endroits), qui ne doivent pas bouger.    */
/* Piège documenté plus haut : discriminer sur width/height, jamais  */
/* sur une valeur de matrix — le navigateur les arrondit.            */
/*                                                                   */
/* Les éléments à transform:matrix gardent leur place : le keyframe  */
/* encadre leur matrice d'origine par translate(centre) -> rotate -> */
/* translate(-centre), le centre étant calculé en appliquant la      */
/* matrice au milieu de la boîte. Les délais négatifs désynchronisent*/
/* des voisins visibles ensemble.                                    */
/* ================================================================ */

/* -- appareils positionnés par matrice ---------------------------- */
@keyframes or-spin-a1{from{transform:translate(1262.70px,651.60px) rotate(-3deg) translate(-1262.70px,-651.60px) matrix(1,0.013,-0.013,1,1136.411,479.981)}to{transform:translate(1262.70px,651.60px) rotate(3deg) translate(-1262.70px,-651.60px) matrix(1,0.013,-0.013,1,1136.411,479.981)}}
.fig-asset-c1b627339d252f23[style*="256.998px"]{animation:or-spin-a1 .85s ease-in-out -0.10s infinite alternate}

@keyframes or-spin-a2{from{transform:translate(336.10px,666.34px) rotate(-3deg) translate(-336.10px,-666.34px) matrix(0.973,-0.233,0.233,0.973,64.718,499.82)}to{transform:translate(336.10px,666.34px) rotate(3deg) translate(-336.10px,-666.34px) matrix(0.973,-0.233,0.233,0.973,64.718,499.82)}}
.fig-asset-06e325ae3dbe73c3[style*="450.048px"]{animation:or-spin-a2 .85s ease-in-out -0.45s infinite alternate}

@keyframes or-spin-a3{from{transform:translate(463.23px,671.66px) rotate(-3deg) translate(-463.23px,-671.66px) matrix(0.993,0.119,-0.119,0.993,246.9,396.426)}to{transform:translate(463.23px,671.66px) rotate(3deg) translate(-463.23px,-671.66px) matrix(0.993,0.119,-0.119,0.993,246.9,396.426)}}
.fig-asset-bb56912dd51de4fb-15edc61f{animation:or-spin-a3 .85s ease-in-out -0.25s infinite alternate}

@keyframes or-spin-a4{from{transform:translate(435.26px,802.26px) rotate(-3deg) translate(-435.26px,-802.26px) matrix(0.974,0.228,-0.228,0.974,346.196,596)}to{transform:translate(435.26px,802.26px) rotate(3deg) translate(-435.26px,-802.26px) matrix(0.974,0.228,-0.228,0.974,346.196,596)}}
.fig-asset-71f3557fdd790d20[style*="267.365px"]{animation:or-spin-a4 .85s ease-in-out -0.60s infinite alternate}

@keyframes or-spin-a5{from{transform:translate(1011.93px,684.74px) rotate(-3deg) translate(-1011.93px,-684.74px) matrix(0.987,0.161,-0.161,0.987,854.712,466.228)}to{transform:translate(1011.93px,684.74px) rotate(3deg) translate(-1011.93px,-684.74px) matrix(0.987,0.161,-0.161,0.987,854.712,466.228)}}
.fig-asset-052c3d67f301a4b3[style*="380.684px"]{animation:or-spin-a5 .85s ease-in-out -0.35s infinite alternate}

/* Le dossier décoratif du coin haut gauche : son WRAPPER porte déjà un
   scale(0.72) (voir la règle #app div[style*="top: -194px"] plus haut), les
   deux transforms sont sur des éléments distincts et ne se marchent pas
   dessus. C'est du décor et non un appareil — retirer cette règle si on
   préfère le laisser fixe. */
@keyframes or-spin-a6{from{transform:translate(319.46px,298.38px) rotate(-3deg) translate(-319.46px,-298.38px) matrix(0.985,0.175,-0.175,0.985,95.475,10)}to{transform:translate(319.46px,298.38px) rotate(3deg) translate(-319.46px,-298.38px) matrix(0.985,0.175,-0.175,0.985,95.475,10)}}
.fig-asset-345c3b10bc488c48[style*="541.732px"]{animation:or-spin-a6 .85s ease-in-out -0.70s infinite alternate}

/* -- appareils positionnés directement : rotation autour du centre - */
@keyframes or-spin{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}
.fig-asset-356ebbfb5a77b79d-d4dd711b{transform-origin:center;animation:or-spin .85s ease-in-out -0.15s infinite alternate}
.fig-asset-f9ee286f4e3a1ef3{transform-origin:center;animation:or-spin .85s ease-in-out -0.55s infinite alternate}
.fig-asset-37851fe0a4689c2c{transform-origin:center;animation:or-spin .85s ease-in-out -0.30s infinite alternate}

@media (prefers-reduced-motion: reduce){
  .fig-asset-c1b627339d252f23[style*="256.998px"],
  .fig-asset-06e325ae3dbe73c3[style*="450.048px"],
  .fig-asset-bb56912dd51de4fb-15edc61f,
  .fig-asset-71f3557fdd790d20[style*="267.365px"],
  .fig-asset-052c3d67f301a4b3[style*="380.684px"],
  .fig-asset-345c3b10bc488c48[style*="541.732px"],
  .fig-asset-356ebbfb5a77b79d-d4dd711b,
  .fig-asset-f9ee286f4e3a1ef3,
  .fig-asset-37851fe0a4689c2c,
  .fig-asset-c893338796b8d91a { animation: none !important; }
  /* Voir le commentaire de la règle .fig-asset-c893338796b8d91a plus haut :
     l'animation coupée, il faut re-neutraliser la matrice inline, sinon la
     photo de famille ressort de la pastille. */
  .fig-asset-c893338796b8d91a { transform: none !important; }
}

/* ---- Clignotement du bandeau « Tarif mobile attractif » --------------------
   Même principe que les autres blinks du fichier : l'opacité n'est jamais
   touchée, c'est la luminosité du bandeau violet et un halo de sa propre
   teinte qui montent le temps d'un éclat. Le libellé reste lisible en
   permanence.

   La cadence est calée sur celle de la carte (3,2s, mêmes temps forts à 78% et
   92%) : le bandeau et l'auréole s'allument ENSEMBLE. Deux clignotements
   désynchronisés sur le même bloc se concurrenceraient et donneraient une
   impression de bug plutôt que d'insistance.

   Portée : le badge de la seule carte « 5Go à 20Go », celle qui clignote déjà.
   Le libellé « Tarif mobile attractif » est partagé avec la carte 30Go, d'où
   le passage par l'aria-label de la carte parente plutôt que par le texte. */
@keyframes or-komzot-badge-blink{
  0%,70%,100%{ filter: brightness(1); box-shadow: 0 0 0 0 rgba(128,113,179,0); transform: scale(1); }
  78%        { filter: brightness(1.28); box-shadow: 0 0 16px 2px rgba(128,113,179,.85); transform: scale(1.04); }
  85%        { filter: brightness(1); box-shadow: 0 0 0 0 rgba(128,113,179,0); transform: scale(1); }
  92%        { filter: brightness(1.22); box-shadow: 0 0 12px 1px rgba(128,113,179,.7); transform: scale(1.025); }
}
.or-komzot-carte[aria-label*="5Go à 20Go"] .or-komzot-badge{
  animation: or-komzot-badge-blink 3.2s ease-in-out infinite;
}
/* Au survol, le clignotement s'efface comme celui de la carte : c'est
   l'auréole du :hover qui prend le relais. */
.or-komzot-carte[aria-label*="5Go à 20Go"]:hover .or-komzot-badge,
.or-komzot-carte[aria-label*="5Go à 20Go"]:focus-visible .or-komzot-badge{
  animation: none;
}

@media (prefers-reduced-motion: reduce){
  .or-komzot-carte[aria-label*="5Go à 20Go"] .or-komzot-badge{ animation: none; }
}