/* Scène « développements spécifiques », v2 lisible du 24 septembre (Théo :
   « bonne idée mais illisible en l'état »). L'iPhone d'un client qui
   réserve une pinasse, en DEUX ÉCRANS écrits en grand : le bateau et le
   jour, puis la marée du jour et les départs ; la règle refuse 16 h. Puis
   le planning du loueur dans son back-office. Gestes à la courbe d'iOS,
   appuis de 150 ms, aucun changement en coupure. Le rideau de fin vient du
   kit ; son curseur reste éteint.

   LISIBILITÉ : rien sous 8,5 px à l'écran du téléphone (10 px sur la
   toile, le téléphone est à l'échelle 1,18), l'essentiel de 11 à 16 px.

   LE MINUTAGE, en pourcentages d'une boucle de 12 secondes :
      7 %  le doigt touche « Pinasse »
   11,2 %  il touche le jour ; l'écran 2 glisse en place (12,8 à 16,4 %)
   16,8 %  la courbe de la marée se dessine (jusqu'à 20,8 %), puis la ligne
           de la pinasse (21 %) et la fenêtre de la cale (22,4 %)
   24,2 %  les quatre départs apparaissent, deux sont grisés
   28,6 %  il tente 16 h : le créneau tremble, la bulle répond (jusqu'à 36 %)
   38,4 %  il prend 13 h 30 ; le bouton se précise
     43 %  il réserve : la feuille de confirmation monte
     53 %  glissement vers l'ordinateur du loueur (jusqu'à 58,5 %)
   60,6 %  la sortie s'inscrit dans le planning du ponton
     69 %  plus rien ne bouge ; fondu au blanc à 95 %, retour au début sous
           le blanc, entre 98,4 et 99,9 %

   LA TOILE : 520 x 612, ROGNÉE à ses bords (Chrome attend hors champ à
   droite). L'iPhone : 232 x 484 posé en (123, 6) à l'échelle 1,18 ; un
   point (x, y) de son écran tombe en (123 + (6 + x) x 1,18,
   6 + (6 + y) x 1,18). Les deux écrans de la page commencent à y = 30.
   Chrome : 520 x 570, sa vue commence en (1, 65). Légende de 584 à 610.

   LES CIBLES DU DOIGT, CALCULÉES (centre moins 10) :
     « Pinasse »       écran (110, 215) → toile (260, 267) → (250, 257)
     le 2e jour        écran (110, 324) → toile (260, 395) → (250, 385)
     16 h              écran (163, 332) → toile (322, 405) → (312, 395)
     13 h 30           écran (57, 332)  → toile (197, 405) → (187, 395)
     « Réserver »      écran (110, 380) → toile (260, 461) → (250, 451) */
.fn-scene--specifique {
  overflow: hidden;
  --sc-haut: 612px;
  --line: #E5E5E5; --line-ios: #D1D1D6; --line-chrome: #E3E6EA; --line-b: #EDEDED; --ios-bleu: #007AFF;
  line-height: 1.35;
}
.fn-scene--specifique svg { display: block; }
.fn-scene--specifique i { font-style: normal; }

/* ═══ L'IPHONE DU CLIENT ══════════════════════════════════════════════ */
.sc-spec-tel {
  position: absolute; top: 0; left: 0; z-index: 3;
  width: 232px; height: 484px; padding: 6px;
  border-radius: 36px; background: #0A0A0A;
  box-shadow: 0 16px 34px rgba(31, 36, 46, .22);
  transform-origin: 0 0;
  transform: translate(123px, 6px) scale(1.18);
}
.sc-spec-ecran { position: relative; height: 472px; overflow: hidden; border-radius: 30px; background: #FFFFFF; color: #0A0A0A; }
.sc-spec-ilot { position: absolute; top: 7px; left: 77px; z-index: 9; width: 66px; height: 19px; border-radius: 10px; background: #0A0A0A; }
.sc-spec-statut {
  position: absolute; top: 0; left: 0; right: 0; z-index: 8;
  display: flex; align-items: center; justify-content: space-between;
  height: 30px; margin: 0; padding: 2px 16px 0 26px;
  font-size: 0.625rem; line-height: 1; color: #000000;
}
.sc-spec-statut b { font-weight: 600; }
.sc-spec-statut-d { display: flex; align-items: center; gap: 4px; }
.sc-spec-reseau { display: flex; align-items: flex-end; gap: 1px; height: 8px; }
.sc-spec-reseau i { display: block; width: 2.5px; border-radius: 1px; background: currentColor; }
.sc-spec-reseau i:nth-child(1) { height: 3px; }
.sc-spec-reseau i:nth-child(2) { height: 4.5px; }
.sc-spec-reseau i:nth-child(3) { height: 6px; }
.sc-spec-reseau i:nth-child(4) { height: 8px; }
.sc-spec-wifi { width: 11px; height: 8px; }
.sc-spec-pile { display: block; width: 18px; height: 9px; padding: 1px; border: 1px solid rgba(31, 31, 31, .4); border-radius: 3px; }
.sc-spec-pile i { display: block; width: 78%; height: 100%; border-radius: 1.5px; background: currentColor; }
.sc-spec-maison { position: absolute; bottom: 6px; left: 70px; z-index: 9; width: 80px; height: 3.5px; border-radius: 2px; background: #0A0A0A; }

/* Les deux écrans, dans la même place : le second glisse par-dessus le
   premier, qui recule d'un tiers, comme une page qui pousse dans iOS. */
.sc-spec-page { position: absolute; top: 30px; left: 0; right: 0; bottom: 32px; overflow: hidden; background: #FFFFFF; }
.sc-spec-page--b { z-index: 2; transform: translateX(100%); box-shadow: -8px 0 24px rgba(31, 36, 46, .08); }
.sc-spec-page > span { position: absolute; }

/* ── Écran 1 : le bateau et le jour ───────────────────────────────── */
.sc-spec-p-tete { top: 0; left: 0; right: 0; height: 34px; padding: 0 12px; display: flex; align-items: center; justify-content: space-between; }
.sc-spec-p-tete b { font-size: 0.625rem; font-weight: 800; letter-spacing: -.01em; }
.sc-spec-p-tete svg { width: 15px; height: 15px; }
.sc-spec-p-une { top: 34px; left: 0; right: 0; height: 62px; overflow: hidden; }
.sc-spec-p-une-img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.sc-spec-p-une::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(10, 10, 10, 0) 25%, rgba(10, 10, 10, .6) 100%); }
.sc-spec-p-une span { position: absolute; left: 12px; bottom: 9px; z-index: 1; font-size: 1rem; font-weight: 800; letter-spacing: -.01em; line-height: 1; color: #FFFFFF; }
.sc-spec-lab { left: 12px; font-size: 0.5625rem; font-weight: 600; line-height: 12px; color: #737373; }
.sc-spec-lab--bateau { top: 106px; }
.sc-spec-lab--jour { top: 260px; }
.sc-spec-lab--depart { top: 220px; left: 10px; }

/* Les bateaux en lignes pleine largeur, les jours en grands boutons :
   des cases arrondies à 10 px, pleines en noir une fois choisies. */
.sc-spec-bat,
.sc-spec-jour,
.sc-spec-dep { border: 1px solid var(--line); border-radius: 10px; background: #FFFFFF; color: #0A0A0A; }
.sc-spec-bat { left: 10px; right: 10px; height: 38px; }
.sc-spec-bat--1 { top: 122px; }
.sc-spec-bat--2 { top: 166px; }
.sc-spec-bat--3 { top: 210px; }
.sc-spec-bat b { position: absolute; top: 11px; left: 12px; font-size: 0.6875rem; font-weight: 700; line-height: 14px; white-space: nowrap; }
.sc-spec-bat span { position: absolute; top: 12px; right: 12px; font-size: 0.5625rem; line-height: 12px; opacity: .6; white-space: nowrap; }
.sc-spec-jour { top: 276px; width: 62px; height: 36px; display: grid; place-items: center; font-size: 0.6875rem; font-weight: 700; white-space: nowrap; }
.sc-spec-jour--1 { left: 10px; }
.sc-spec-jour--2 { left: 79px; }
.sc-spec-jour--3 { left: 148px; }

/* ── Écran 2 : la marée du jour et les départs ────────────────────── */
.sc-spec-b-tete { top: 0; left: 0; right: 0; height: 36px; display: flex; align-items: center; gap: 4px; padding: 0 10px 0 6px; color: var(--ios-bleu); }
.sc-spec-b-tete svg { width: 15px; height: 15px; flex: none; }
.sc-spec-b-tete b { font-size: 0.6875rem; font-weight: 700; color: #0A0A0A; white-space: nowrap; }
.sc-spec-regle { top: 40px; left: 8px; right: 8px; height: 168px; border: 1px solid var(--line); border-radius: 14px; }
.sc-spec-regle > * { position: absolute; }
.sc-spec-r-titre { top: 10px; left: 12px; display: flex; align-items: center; gap: 5px; font-size: 0.625rem; font-weight: 700; line-height: 13px; white-space: nowrap; }
.sc-spec-r-titre svg { width: 13px; height: 13px; color: #3F7BFF; }
.sc-spec-r-stats { top: 25px; left: 12px; font-size: 0.53125rem; line-height: 11px; color: #737373; }
.sc-spec-graph { top: 42px; left: 7px; width: 188px; height: 86px; overflow: visible; }
.sc-spec-courbe { stroke-dasharray: 100; stroke-dashoffset: 100; }
.sc-spec-eau,
.sc-spec-seuil,
.sc-spec-fenetre { opacity: 0; }
.sc-spec-seuil { transform-box: fill-box; transform-origin: 0 50%; }
.sc-spec-fenetre { transform-box: fill-box; transform-origin: 50% 50%; }
/* L'étiquette de la ligne, sous elle à gauche : là où la courbe est basse,
   donc sans jamais la couvrir. */
.sc-spec-seuil-dit { top: 91px; left: 10px; padding: 1px 4px; border-radius: 4px; background: #FFFFFF; font-size: 0.53125rem; font-weight: 700; line-height: 11px; white-space: nowrap; opacity: 0; }
.sc-spec-fen-h { top: 132px; width: 46px; font-size: 0.5625rem; font-weight: 700; line-height: 12px; color: #2B5DD9; text-align: center; white-space: nowrap; opacity: 0; }
.sc-spec-fen-h--a { left: 34.9px; }
.sc-spec-fen-h--b { left: 136.8px; }
.sc-spec-axe { top: 149px; font-size: 0.53125rem; line-height: 11px; color: #737373; }
.sc-spec-axe--g { left: 12px; }
.sc-spec-axe--d { right: 12px; }

/* Les départs, en 2 x 2. */
.sc-spec-dep { width: 98px; height: 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; opacity: 0; }
.sc-spec-dep--1 { top: 236px; left: 8px; }
.sc-spec-dep--2 { top: 236px; left: 114px; }
.sc-spec-dep--3 { top: 282px; left: 8px; }
.sc-spec-dep--4 { top: 282px; left: 114px; }
.sc-spec-dep b { font-size: 0.6875rem; font-weight: 700; line-height: 14px; white-space: nowrap; }
.sc-spec-dep span { font-size: 0.53125rem; line-height: 11px; opacity: .65; white-space: nowrap; }
.sc-spec-dep--non { border-color: #EDEDED; background: #F5F5F5; color: #A3A3A3; }
.sc-spec-dep--non b { text-decoration: line-through; }

/* La bulle du refus, au-dessus du départ de 16 h. */
.sc-spec-bulle {
  top: 230px; right: 6px; width: 150px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px; background: #0A0A0A; color: #FFFFFF;
  box-shadow: 0 8px 20px rgba(31, 36, 46, .22);
  font-size: 0.5625rem; font-weight: 600; line-height: 13px; text-align: center;
  opacity: 0; transform-origin: 60% 100%;
}
.sc-spec-bouton {
  top: 332px; left: 8px; right: 8px; height: 36px;
  display: grid; place-items: center;
  border-radius: 10px; background: #D4D4D4; color: #FFFFFF;
  font-size: 0.6875rem; font-weight: 700;
}
.sc-spec-bt { grid-area: 1 / 1; white-space: nowrap; }
.sc-spec-bt--b { opacity: 0; }

/* La confirmation : un voile neutre, et la feuille qui monte du bas. */
.sc-spec-page > .sc-spec-voile { inset: 0; z-index: 4; background: rgba(10, 10, 10, .28); opacity: 0; }
.sc-spec-feuille {
  left: -1px; right: -1px; bottom: 0; z-index: 5; height: 196px;
  border-radius: 18px 18px 0 0; background: #FFFFFF;
  transform: translateY(100%);
}
.sc-spec-feuille > * { position: absolute; left: 14px; right: 14px; text-align: center; }
.sc-spec-f-coche { top: 22px; left: 50%; right: auto; width: 40px; height: 40px; margin-left: -20px; display: grid; place-items: center; border-radius: 50%; background: #E8F6EE; color: #15803D; }
.sc-spec-f-coche svg { width: 22px; height: 22px; stroke-width: 2; }
.sc-spec-f-titre { top: 72px; font-size: 0.9375rem; font-weight: 800; line-height: 18px; }
.sc-spec-f-quoi { top: 98px; font-size: 0.625rem; line-height: 14px; }
.sc-spec-f-note { top: 138px; font-size: 0.5625rem; line-height: 13px; color: #737373; }

/* La barre de Safari dans son état réduit. */
.sc-spec-s-mini {
  position: absolute; left: 0; right: 0; bottom: 0; height: 32px; padding-top: 6px;
  display: flex; justify-content: center;
  background: linear-gradient(var(--line-ios), var(--line-ios)) top / 100% 1px no-repeat, #F7F7F7;
  font-size: 0.53125rem; line-height: 11px; color: #1C1C1E;
}

/* ═══ CHROME : LE BACK-OFFICE DU LOUEUR ═══════════════════════════════ */
.sc-spec-chrome {
  position: absolute; top: 0; left: 0; z-index: 1;
  display: flex; flex-direction: column;
  width: 520px; height: 570px; overflow: hidden;
  border: 1px solid #C7CCD4; border-radius: 8px;
  background: #FFFFFF; color: #0A0A0A;
  box-shadow: 0 12px 30px rgba(31, 36, 46, .14);
  transform: translateX(560px);
}
.sc-spec-c-onglets { position: relative; flex: none; height: 30px; background: #DEE3EA; }
.sc-spec-c-onglet {
  position: absolute; top: 5px; left: 8px;
  display: flex; align-items: center; gap: 6px;
  width: 190px; height: 25px; padding: 0 8px 0 10px;
  border-radius: 8px 8px 0 0; background: #FFFFFF; color: #1F1F1F;
}
.sc-spec-c-onglet > svg { width: 10px; height: 10px; flex: none; color: #474747; }
.sc-spec-c-logo { display: grid; place-items: center; flex: none; width: 12px; height: 12px; border-radius: 3px; background: #0A0A0A; color: #FFFFFF; font-size: 8px; font-weight: 800; line-height: 1; }
.sc-spec-c-titre { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; font-size: 0.59375rem; }
.sc-spec-c-plus { position: absolute; top: 9px; left: 216px; color: #474747; }
.sc-spec-c-plus svg { width: 12px; height: 12px; }
.sc-spec-fen { position: absolute; top: 0; right: 0; display: flex; height: 100%; }
.sc-spec-fen i { display: grid; place-items: center; width: 34px; height: 100%; color: #1F1F1F; }
.sc-spec-fen svg { width: 10px; height: 10px; }
.sc-spec-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-spec-c-outils > i { display: grid; place-items: center; width: 24px; height: 24px; }
.sc-spec-c-outils > i svg { width: 14px; height: 14px; }
.sc-spec-c-off { color: #C4C7C5; }
.sc-spec-c-outils > .sc-spec-c-profil svg { width: 16px; height: 16px; padding: 1px; border-radius: 50%; background: #E3E3E3; color: #5F6368; }
.sc-spec-c-adresse {
  display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0;
  height: 26px; margin: 0 6px; padding: 0 10px;
  border-radius: 13px; background: #EDF1F7;
  font-size: 0.65625rem; color: #1F1F1F; white-space: nowrap;
}
.sc-spec-c-adresse > svg { width: 13px; height: 13px; flex: none; }
.sc-spec-c-chemin { color: #5F6368; }
.sc-spec-c-etoile { margin-left: auto; }
.sc-spec-c-etoile svg { width: 13px; height: 13px; }
.sc-spec-vue { position: relative; flex: 1; overflow: hidden; }
.sc-spec-vue > * { position: absolute; }

/* Le back-office du loueur : même dessin que celui de Chez Lucie, écrit
   plus gros pour rester lisible une fois la scène réduite. */
.sc-spec-b-barre { top: 0; left: 0; right: 0; height: 40px; border-bottom: 1px solid var(--line-b); }
.sc-spec-b-barre > * { position: absolute; }
.sc-spec-b-site { top: 0; left: 16px; display: flex; align-items: center; gap: 8px; height: 40px; font-size: 0.6875rem; font-weight: 800; }
.sc-spec-b-site i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: #0A0A0A; color: #FFFFFF; font-size: 0.6875rem; font-weight: 800; line-height: 1; }
.sc-spec-b-voir { top: 8px; left: 386px; display: flex; align-items: center; justify-content: center; gap: 4px; width: 84px; height: 24px; border: 1px solid #0A0A0A; border-radius: 7px; font-size: 0.5625rem; font-weight: 600; }
.sc-spec-b-voir svg { width: 9px; height: 9px; }
.sc-spec-b-avatar { top: 9px; left: 482px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, #3F7BFF, #5BC4E8); color: #FFFFFF; font-size: 0.625rem; font-weight: 700; line-height: 1; }
.sc-spec-b-menu {
  top: 40px; left: 0; bottom: 0; width: 124px; padding: 14px 10px;
  display: flex; flex-direction: column; gap: 4px;
  background: linear-gradient(#EDEDED, #EDEDED) right top / 1px 100% no-repeat, #FAFAFA;
}
.sc-spec-b-m { display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 10px; border-radius: 7px; font-size: 0.625rem; font-weight: 500; color: #404040; white-space: nowrap; }
.sc-spec-b-m svg { width: 13px; height: 13px; flex: none; opacity: .8; }
.sc-spec-b-m--actif { background: #0A0A0A; color: #FFFFFF; }
.sc-spec-pl-titre { top: 52px; left: 140px; font-size: 1.0625rem; font-weight: 800; letter-spacing: -.01em; line-height: 22px; }
.sc-spec-pl-date { top: 76px; left: 140px; font-size: 0.625rem; line-height: 13px; color: #737373; }
.sc-spec-pl-maree { top: 100px; left: 140px; width: 368px; height: 84px; border: 1px solid var(--line); border-radius: 12px; }
.sc-spec-pl-maree > * { position: absolute; }
.sc-spec-pl-m-dit { top: 11px; left: 14px; display: flex; align-items: center; gap: 5px; font-size: 0.5625rem; font-weight: 600; line-height: 12px; color: #737373; }
.sc-spec-pl-m-dit svg { width: 13px; height: 13px; color: #3F7BFF; }
.sc-spec-pl-m-h { top: 27px; left: 14px; font-size: 0.75rem; font-weight: 700; line-height: 15px; }
.sc-spec-pl-piste { top: 52px; left: 14px; right: 14px; height: 10px; border-radius: 5px; background: #EDEDED; }
.sc-spec-pl-fen { position: absolute; top: 0; bottom: 0; left: 27.08%; width: 54.17%; border-radius: 5px; background: #3F7BFF; }
.sc-spec-pl-borne { top: 66px; font-size: 0.5625rem; line-height: 11px; color: #737373; }
.sc-spec-pl-borne--g { left: 14px; }
.sc-spec-pl-borne--d { right: 14px; }
.sc-spec-pl-l { left: 140px; width: 368px; height: 50px; border: 1px solid var(--line); border-radius: 10px; background: #FFFFFF; }
.sc-spec-pl-l > * { position: absolute; white-space: nowrap; }
.sc-spec-pl-l--1 { top: 198px; }
.sc-spec-pl-l--2 { top: 256px; opacity: 0; }
.sc-spec-pl-l--3 { top: 314px; border-style: dashed; border-color: #D4D4D4; background: #FAFAFA; color: #A3A3A3; }
.sc-spec-pl-l b { top: 15px; left: 14px; font-size: 0.8125rem; font-weight: 800; line-height: 18px; }
.sc-spec-pl-qui { top: 8px; left: 92px; display: flex; align-items: center; gap: 5px; font-size: 0.75rem; font-weight: 700; line-height: 16px; }
.sc-spec-pl-qui svg { width: 13px; height: 13px; }
.sc-spec-pl-sous { top: 26px; left: 92px; font-size: 0.625rem; line-height: 13px; color: #737373; }
.sc-spec-pl-l--3 .sc-spec-pl-sous { color: #A3A3A3; }
.sc-spec-pl-l .sc-spec-pl-neuf { top: 15px; right: 14px; height: 20px; padding: 0 9px; display: grid; place-items: center; border-radius: 7px; background: #EAF1FF; color: #2B5DD9; font-size: 0.5625rem; font-weight: 700; }

/* ═══ LA LÉGENDE, fixe en bas de la toile ═════════════════════════════ */
.sc-spec-legende { position: absolute; top: 584px; left: 14px; right: 14px; z-index: 2; display: grid; height: 26px; margin: 0; }
.sc-spec-leg {
  grid-area: 1 / 1;
  display: flex; align-items: center; gap: 9px;
  font-size: 0.625rem; font-weight: 700; line-height: 1; color: #0A0A0A; white-space: nowrap;
  opacity: 0;
}
.sc-spec-leg--a { opacity: 1; }
.sc-spec-leg i { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border: 1px solid var(--line); border-radius: 8px; background: #FFFFFF; color: #525252; }
.sc-spec-leg i svg { width: 13px; height: 13px; }
.sc-spec-leg img { flex: none; width: 22px; height: 22px; margin: 0 2px; border-radius: 50%; }

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

/* Ce qui bouge en grand passe sur son propre calque : le navigateur le
   déplace sans le repeindre, et le glissement ne saccade pas. */
.sc-spec-tel,
.sc-spec-chrome,
.sc-spec-page,
.sc-spec-feuille { will-change: transform, opacity; }

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

.sc-spec-tel          { animation-name: sc-spec-tel; }
.sc-spec-chrome       { animation-name: sc-spec-chrome; }
.sc-spec-doigt        { animation-name: sc-spec-doigt; }
.sc-spec-bat--2       { animation-name: sc-spec-choix-bat; }
.sc-spec-jour--2      { animation-name: sc-spec-choix-jour; }
.sc-spec-page--a      { animation-name: sc-spec-page-a; }
.sc-spec-page--b      { animation-name: sc-spec-page-b; }
.sc-spec-courbe       { animation-name: sc-spec-courbe; }
.sc-spec-eau          { animation-name: sc-spec-eau; }
.sc-spec-seuil        { animation-name: sc-spec-seuil; }
.sc-spec-seuil-dit    { animation-name: sc-spec-seuil-dit; }
.sc-spec-fenetre      { animation-name: sc-spec-fenetre; }
.sc-spec-fen-h        { animation-name: sc-spec-fen-h; }
.sc-spec-dep          { animation-name: sc-spec-dep; }
.sc-spec-dep--3       { animation-name: sc-spec-dep, sc-spec-choix-dep; }
.sc-spec-dep--4       { animation-name: sc-spec-dep, sc-spec-tremble; }
.sc-spec-bulle        { animation-name: sc-spec-bulle; }
.sc-spec-bouton       { animation-name: sc-spec-bouton; }
.sc-spec-bt--a        { animation-name: sc-spec-bt-a; }
.sc-spec-bt--b        { animation-name: sc-spec-bt-b; }
.sc-spec-voile        { animation-name: sc-spec-voile; }
.sc-spec-feuille      { animation-name: sc-spec-feuille; }
.sc-spec-pl-l--2      { animation-name: sc-spec-pl-neuf; }

.sc-spec-leg--a       { animation-name: sc-spec-leg-a; }
.sc-spec-leg--b       { animation-name: sc-spec-leg-b; }
.sc-spec-leg--c       { animation-name: sc-spec-leg-c; }
.sc-spec-leg--d       { animation-name: sc-spec-leg-d; }
.sc-spec-leg--e       { animation-name: sc-spec-leg-e; }

/* ═══ LES MOUVEMENTS ══════════════════════════════════════════════════ */

/* LE GLISSEMENT FINAL : le téléphone part à gauche, Chrome arrive de la
   droite, en 660 ms, comme deux écrans côte à côte. */
@keyframes sc-spec-tel {
  0%, 53%      { transform: translate(123px, 6px) scale(1.18); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  58.5%, 98.4% { transform: translate(-440px, 6px) scale(1.18); }
  99.9%, 100%  { transform: translate(123px, 6px) scale(1.18); }
}
@keyframes sc-spec-chrome {
  0%, 53%      { transform: translateX(560px); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  58.5%, 98.4% { transform: none; }
  99.9%, 100%  { transform: translateX(560px); }
}

/* LE DOIGT : cinq touches. Il arrive en grandissant (courbe d'iOS),
   s'enfonce 100 ms, se relâche 100 ms, s'efface en s'élargissant. Entre
   deux touches, il change de place pendant qu'il est invisible. */
@keyframes sc-spec-doigt {
  0%, 4.6%     { transform: translate(249px, 256px) scale(.6); opacity: 0; animation-timing-function: cubic-bezier(.32, .72, 0, 1); }
  5.6%, 6.2%   { transform: translate(249px, 256px); opacity: 1; }
  7%           { transform: translate(249px, 256px) scale(.8); opacity: 1; }
  7.8%         { transform: translate(249px, 256px); opacity: 1; }
  9%           { transform: translate(249px, 256px) scale(1.1); opacity: 0; }
  9.4%         { transform: translate(249px, 384px) scale(.6); opacity: 0; animation-timing-function: cubic-bezier(.32, .72, 0, 1); }
  10.4%        { transform: translate(249px, 384px); opacity: 1; }
  11.2%        { transform: translate(249px, 384px) scale(.8); opacity: 1; }
  12%          { transform: translate(249px, 384px); opacity: 1; }
  13.2%        { transform: translate(249px, 384px) scale(1.1); opacity: 0; }
  26.8%        { transform: translate(311px, 394px) scale(.6); opacity: 0; animation-timing-function: cubic-bezier(.32, .72, 0, 1); }
  27.8%        { transform: translate(311px, 394px); opacity: 1; }
  28.6%        { transform: translate(311px, 394px) scale(.8); opacity: 1; }
  29.4%        { transform: translate(311px, 394px); opacity: 1; }
  30.6%        { transform: translate(311px, 394px) scale(1.1); opacity: 0; }
  36.6%        { transform: translate(186px, 394px) scale(.6); opacity: 0; animation-timing-function: cubic-bezier(.32, .72, 0, 1); }
  37.6%        { transform: translate(186px, 394px); opacity: 1; }
  38.4%        { transform: translate(186px, 394px) scale(.8); opacity: 1; }
  39.2%        { transform: translate(186px, 394px); opacity: 1; }
  40.4%        { transform: translate(186px, 394px) scale(1.1); opacity: 0; }
  41.2%        { transform: translate(249px, 450px) scale(.6); opacity: 0; animation-timing-function: cubic-bezier(.32, .72, 0, 1); }
  42.2%        { transform: translate(249px, 450px); opacity: 1; }
  43%          { transform: translate(249px, 450px) scale(.8); opacity: 1; }
  43.8%        { transform: translate(249px, 450px); opacity: 1; }
  45%, 100%    { transform: translate(249px, 450px) scale(1.1); opacity: 0; }
}

/* 1. LES CHOIX : la case passe au noir en fondu, au relâché du doigt. */
@keyframes sc-spec-choix-bat {
  0%, 7.4%     { background: #FFFFFF; border-color: #E5E5E5; color: #0A0A0A; }
  8.2%, 98.4%  { background: #0A0A0A; border-color: #0A0A0A; color: #FFFFFF; }
  99.9%, 100%  { background: #FFFFFF; border-color: #E5E5E5; color: #0A0A0A; }
}
@keyframes sc-spec-choix-jour {
  0%, 11.6%    { background: #FFFFFF; border-color: #E5E5E5; color: #0A0A0A; }
  12.4%, 98.4% { background: #0A0A0A; border-color: #0A0A0A; color: #FFFFFF; }
  99.9%, 100%  { background: #FFFFFF; border-color: #E5E5E5; color: #0A0A0A; }
}

/* 2. L'ÉCRAN SUIVANT pousse le premier, à la courbe d'iOS. */
@keyframes sc-spec-page-a {
  0%, 12.8%    { transform: none; animation-timing-function: cubic-bezier(.32, .72, 0, 1); }
  16.4%, 98.4% { transform: translateX(-30%); }
  99.9%, 100%  { transform: none; }
}
@keyframes sc-spec-page-b {
  0%, 12.8%    { transform: translateX(100%); animation-timing-function: cubic-bezier(.32, .72, 0, 1); }
  16.4%, 98.4% { transform: none; }
  99.9%, 100%  { transform: translateX(100%); }
}

/* 3. LA RÈGLE CALCULE : la courbe de la marée se dessine, la ligne de la
   pinasse se pose de gauche à droite, la fenêtre de la cale s'ouvre depuis
   son centre, ses deux heures s'inscrivent dessous. */
@keyframes sc-spec-courbe {
  0%, 16.8%    { stroke-dashoffset: 100; animation-timing-function: cubic-bezier(.45, 0, .25, 1); }
  20.8%, 98.4% { stroke-dashoffset: 0; }
  99.9%, 100%  { stroke-dashoffset: 100; }
}
@keyframes sc-spec-eau { 0%, 19.4% { opacity: 0; } 21.2%, 98.4% { opacity: 1; } 99.9%, 100% { opacity: 0; } }
@keyframes sc-spec-seuil {
  0%, 20.8%    { opacity: 0; transform: scaleX(0); animation-timing-function: cubic-bezier(.32, .72, 0, 1); }
  21.2%        { opacity: 1; transform: scaleX(.1); animation-timing-function: cubic-bezier(.32, .72, 0, 1); }
  22.6%, 98.4% { opacity: 1; transform: none; }
  99.9%, 100%  { opacity: 0; transform: scaleX(0); }
}
@keyframes sc-spec-seuil-dit { 0%, 21.8% { opacity: 0; } 22.8%, 98.4% { opacity: 1; } 99.9%, 100% { opacity: 0; } }
@keyframes sc-spec-fenetre {
  0%, 22.4%    { opacity: 0; transform: scaleX(.2); animation-timing-function: cubic-bezier(.32, .72, 0, 1); }
  24%, 98.4%   { opacity: 1; transform: none; }
  99.9%, 100%  { opacity: 0; transform: scaleX(.2); }
}
@keyframes sc-spec-fen-h { 0%, 23.4% { opacity: 0; } 24.4%, 98.4% { opacity: 1; } 99.9%, 100% { opacity: 0; } }
@keyframes sc-spec-dep {
  0%, 24.2%    { opacity: 0; transform: translateY(6px); animation-timing-function: cubic-bezier(.32, .72, 0, 1); }
  25.6%, 98.4% { opacity: 1; transform: none; }
  99.9%, 100%  { opacity: 0; transform: translateY(6px); }
}

/* 4. LA RÈGLE DIT NON : 16 h tremble au relâché, la bulle répond. */
@keyframes sc-spec-tremble {
  0%, 29.4%    { translate: 0 0; }
  29.8%        { translate: -4px 0; }
  30.2%        { translate: 4px 0; }
  30.6%        { translate: -3px 0; }
  31%          { translate: 2px 0; }
  31.4%, 100%  { translate: 0 0; }
}
@keyframes sc-spec-bulle {
  0%, 29.6%    { opacity: 0; transform: translateY(6px) scale(.94); animation-timing-function: cubic-bezier(.32, .72, 0, 1); }
  30.8%, 35.2% { opacity: 1; transform: none; }
  36.2%, 100%  { opacity: 0; transform: none; }
}
@keyframes sc-spec-choix-dep {
  0%, 38.8%    { background: #FFFFFF; border-color: #E5E5E5; color: #0A0A0A; }
  39.6%, 98.4% { background: #0A0A0A; border-color: #0A0A0A; color: #FFFFFF; }
  99.9%, 100%  { background: #FFFFFF; border-color: #E5E5E5; color: #0A0A0A; }
}
/* Le bouton : gris tant qu'aucun départ n'est choisi, noir ensuite ; son
   texte se précise (l'ancien sort, puis le nouveau entre), et il s'enfonce
   sous le doigt. */
@keyframes sc-spec-bouton {
  0%, 39%      { background: #D4D4D4; transform: none; }
  39.8%, 42.8% { background: #0A0A0A; transform: none; }
  43.2%        { background: #26272E; transform: scale(.97); }
  44%, 98.4%   { background: #0A0A0A; transform: none; }
  99.9%, 100%  { background: #D4D4D4; transform: none; }
}
@keyframes sc-spec-bt-a { 0%, 39.2% { opacity: 1; } 39.8%, 98.4% { opacity: 0; } 99.9%, 100% { opacity: 1; } }
@keyframes sc-spec-bt-b { 0%, 39.8% { opacity: 0; } 40.6%, 98.4% { opacity: 1; } 99.9%, 100% { opacity: 0; } }
@keyframes sc-spec-voile { 0%, 43.8% { opacity: 0; } 45.2%, 98.4% { opacity: 1; } 99.9%, 100% { opacity: 0; } }
@keyframes sc-spec-feuille {
  0%, 43.8%    { transform: translateY(100%); animation-timing-function: cubic-bezier(.32, .72, 0, 1); }
  46.6%, 98.4% { transform: none; }
  99.9%, 100%  { transform: translateY(100%); }
}

/* 5. LE PLANNING DU PONTON : la sortie s'inscrit, sur fond jaune pâle qui
   s'efface. */
@keyframes sc-spec-pl-neuf {
  0%, 60.6%    { opacity: 0; transform: translateY(8px); background: #FEF7E0; border-color: #F3D98B; animation-timing-function: cubic-bezier(.32, .72, 0, 1); }
  62.6%, 64%   { opacity: 1; transform: none; background: #FEF7E0; border-color: #F3D98B; }
  69%, 98.4%   { opacity: 1; transform: none; background: #FFFFFF; border-color: #E5E5E5; }
  99.9%, 100%  { opacity: 0; transform: translateY(8px); background: #FEF7E0; border-color: #F3D98B; }
}

/* La légende : l'ancienne sort, puis la nouvelle entre. */
@keyframes sc-spec-leg-a { 0%, 15.8% { opacity: 1; } 16.4%, 98.4% { opacity: 0; } 99.9%, 100% { opacity: 1; } }
@keyframes sc-spec-leg-b { 0%, 16.4% { opacity: 0; } 17.2%, 28.4% { opacity: 1; } 29%, 100% { opacity: 0; } }
@keyframes sc-spec-leg-c { 0%, 29% { opacity: 0; } 29.8%, 39% { opacity: 1; } 39.6%, 100% { opacity: 0; } }
@keyframes sc-spec-leg-d { 0%, 39.6% { opacity: 0; } 40.4%, 55.2% { opacity: 1; } 55.8%, 100% { opacity: 0; } }
@keyframes sc-spec-leg-e { 0%, 55.8% { opacity: 0; } 56.6%, 98.4% { opacity: 1; } 99.9%, 100% { opacity: 0; } }

/* Le curseur du kit reste éteint : c'est le doigt du client qui touche. */
@keyframes sc-cur-specifique { 0%, 100% { transform: translate(480px, 470px); opacity: 0; } }
@keyframes sc-spec-onde { 0%, 100% { transform: scale(.4); opacity: 0; } }

/* Moins de mouvement : l'état d'arrivée, le planning du loueur avec la
   sortie inscrite, et la légende de fin. */
@media (prefers-reduced-motion: reduce) {
  .sc-spec-tel { transform: translate(-440px, 6px) scale(1.18); }
  .sc-spec-chrome { transform: none; }
  .sc-spec-pl-l--2,
  .sc-spec-leg--e { opacity: 1; transform: none; }
  .sc-spec-leg--a { opacity: 0; }
}