/* Scène « articles de blog » : Lucie écrit dans l'éditeur de WordPress, publie,
   et l'article paraît sur son site, mis en page par lui. Le rideau de fin et
   le curseur viennent du kit.

   LE MINUTAGE, en pourcentages d'une boucle de 12 secondes :
      0 %  Chrome, l'éditeur de WordPress : un brouillon, sa photo déjà posée
    6,2 %  le curseur touche « Saisissez le titre »
    7,2 %  le titre se tape, deux lignes (jusqu'à 15,4 %)
   17,2 %  le texte se tape, trois lignes (jusqu'à 31,8 %)
   35,2 %  clic sur « Publier » ; le panneau glisse (35,5 à 36,9 %), la
           colonne d'écriture se décale pour lui laisser la place
   38,8 %  clic sur « Publier » dans le panneau : « … est maintenant en
           ligne », le bandeau « Publication mise en ligne. » (40 %)
   43,8 %  clic sur « Voir l'article » : un nouvel onglet, la roue (44,4 %)
   47,2 %  l'article paraît : photo en grand avec un lent recul (jusqu'à
           66 %), date, titre, texte et boutons qui montent l'un après l'autre
     60 %  le curseur survole « Réserver une table », puis s'en va (67 %)
     67 %  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 540. Chrome en occupe les 500 du haut, sans bouger ; la
   vue commence en (1, 65) : un point (x, y) de la vue tombe en
   (1 + x, 65 + y) dans la toile. La légende, fixe, de 508 à 534.

   LES CIBLES DU CURSEUR, CALCULÉES (centre de la cible moins (4, 2), tout
   est posé en absolu) :
     « Saisissez le titre »       vue (180, 77)  → toile (181, 142) → (177, 140)
     « Publier » de la barre      vue (467, 22)  → toile (468, 87)  → (464, 85)
     « Publier » du panneau       vue (454, 22)  → toile (455, 87)  → (451, 85)
     « Voir l'article »           vue (420, 172) → toile (421, 237) → (417, 235)
     « Réserver une table »       mesuré au banc (141,7 ; 395) → (138, 393) */
.fn-scene--blog {
  --sc-haut: 540px;
  /* WordPress, relevé sur un WordPress 6 en français. */
  --wp-bleu: #3858E9; --wp-bleu-fonce: #2145E6; --wp-ink: #1E1E1E; --wp-gris: #757575; --wp-invite: #8C8F94;
  /* Les filets, tous neutres. */
  --line-wp: #E0E0E0; --line-chrome: #E3E6EA; --line-site: #EDEDED; --line-leg: #E5E5E5;
  line-height: 1.35;
}
.fn-scene--blog svg { display: block; }
.fn-scene--blog i { font-style: normal; }

/* ═══ CHROME ══════════════════════════════════════════════════════════ */
.sc-blog-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);
}
.sc-blog-c-onglets { position: relative; flex: none; height: 30px; background: #DEE3EA; }
.sc-blog-c-onglet {
  position: absolute; top: 5px;
  display: flex; align-items: center; gap: 6px;
  width: 150px; height: 25px; padding: 0 8px 0 10px;
  border-radius: 8px 8px 0 0; background: #FFFFFF; color: #1F1F1F;
}
.sc-blog-c-onglet--1 { left: 8px; }
.sc-blog-c-onglet--2 { left: 160px; opacity: 0; }
.sc-blog-c-onglet > svg { width: 10px; height: 10px; flex: none; color: #474747; }
.sc-blog-c-favi { position: relative; width: 12px; height: 12px; flex: none; }
.sc-blog-c-favi i { position: absolute; inset: 0; }
.sc-blog-c-logo {
  display: grid; place-items: center;
  border-radius: 3px; background: #0A0A0A; color: #FFFFFF;
  font-size: 8px; font-weight: 800; line-height: 1;
}
.sc-blog-c-logo--2 { opacity: 0; }
/* La roue de chargement de Chrome : un arc bleu à la place de l'icône. */
.sc-blog-c-roue {
  border: 1.6px solid transparent; border-top-color: #0B57D0; border-right-color: #0B57D0;
  border-radius: 50%; opacity: 0;
}
.sc-blog-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-blog-c-plus { position: absolute; top: 9px; left: 176px; color: #474747; }
.sc-blog-c-plus svg { width: 12px; height: 12px; }
.sc-blog-fen { position: absolute; top: 0; right: 0; display: flex; height: 100%; }
.sc-blog-fen i { display: grid; place-items: center; width: 34px; height: 100%; color: #1F1F1F; }
.sc-blog-fen svg { width: 10px; height: 10px; }

.sc-blog-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-blog-c-outils > i { display: grid; place-items: center; width: 24px; height: 24px; }
.sc-blog-c-outils > i svg { width: 14px; height: 14px; }
.sc-blog-c-off { color: #C4C7C5; }
.sc-blog-c-outils > .sc-blog-c-profil svg { width: 16px; height: 16px; padding: 1px; border-radius: 50%; background: #E3E3E3; color: #5F6368; }
.sc-blog-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-blog-c-adresse > svg { width: 13px; height: 13px; flex: none; }
/* Les deux adresses, empilées au même endroit. */
.sc-blog-c-url { display: grid; flex: 1; min-width: 0; overflow: hidden; }
.sc-blog-c-url-t { grid-area: 1 / 1; overflow: hidden; }
.sc-blog-c-url-t--site { opacity: 0; }
.sc-blog-c-chemin { color: #5F6368; }
.sc-blog-c-etoile { margin-left: auto; }
.sc-blog-c-etoile svg { width: 13px; height: 13px; }

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

/* ═══ 1. L'ÉDITEUR DE WORDPRESS ═══════════════════════════════════════ */
.sc-blog-wp { position: absolute; inset: 0; z-index: 1; background: #FFFFFF; color: var(--wp-ink); }
.sc-blog-wp-tete { position: absolute; top: 0; left: 0; right: 0; height: 44px; border-bottom: 1px solid var(--line-wp); }
.sc-blog-wp-tete > span { position: absolute; }
/* En plein écran, WordPress met l'icône DU SITE en haut à gauche. */
.sc-blog-wp-site { top: 0; left: 0; display: grid; place-items: center; width: 44px; height: 44px; background: var(--wp-ink); }
.sc-blog-wp-site i {
  display: grid; place-items: center; width: 22px; height: 22px;
  border-radius: 4px; background: #FFFFFF; color: #0A0A0A;
  font-size: 0.6875rem; font-weight: 800; line-height: 1;
}
.sc-blog-wp-plus { top: 11px; left: 54px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 2px; background: var(--wp-bleu); color: #FFFFFF; }
.sc-blog-wp-plus svg { width: 12px; height: 12px; }
.sc-blog-wp-ic { top: 15px; width: 14px; height: 14px; color: var(--wp-ink); }
.sc-blog-wp-ic svg { width: 14px; height: 14px; }
.sc-blog-wp-ic--annuler  { left: 84px; }
.sc-blog-wp-ic--retablir { left: 106px; color: #BDBDBD; }
.sc-blog-wp-ic--liste    { left: 128px; }
.sc-blog-wp-ic--apercu   { left: 400px; }
.sc-blog-wp-ic--panneau  { left: 420px; }
.sc-blog-wp-ic--kebab    { left: 498px; }
.sc-blog-wp-doc {
  top: 11px; left: 152px; display: grid; place-items: center;
  width: 132px; height: 22px; border-radius: 2px; background: #F0F0F0;
  font-size: 0.46875rem; white-space: nowrap;
}
.sc-blog-wp-doc-t { grid-area: 1 / 1; }
.sc-blog-wp-doc-t--plein { opacity: 0; }
.sc-blog-wp-brouillon { top: 0; left: 296px; width: 96px; height: 44px; display: flex; align-items: center; justify-content: flex-end; font-size: 0.46875rem; color: var(--wp-gris); white-space: nowrap; }
.sc-blog-wp-publier {
  top: 11px; left: 442px; display: grid; place-items: center;
  width: 50px; height: 22px; border-radius: 2px;
  background: var(--wp-bleu); color: #FFFFFF; font-size: 0.5rem; font-weight: 500;
}

.sc-blog-wp-page { position: absolute; top: 44px; left: 0; right: 0; bottom: 20px; overflow: hidden; }
/* La colonne d'écriture : tout y est posé en absolu, le curseur vise juste. */
.sc-blog-wp-col { position: absolute; top: 20px; left: 109px; width: 300px; height: 292px; }
.sc-blog-wp-col > span { position: absolute; left: 0; }
.sc-blog-wp-invite { color: var(--wp-invite); white-space: nowrap; }
.sc-blog-wp-invite--titre { top: 0; font-size: 1.3125rem; font-weight: 500; line-height: 26px; letter-spacing: -.01em; }
.sc-blog-wp-invite--texte { top: 64px; font-size: 0.625rem; line-height: 15px; }
.sc-blog-wp-col > .sc-blog-wp-inserer {
  top: 63px; left: 284px; display: grid; place-items: center;
  width: 16px; height: 16px; border-radius: 2px; background: var(--wp-ink); color: #FFFFFF;
}
.sc-blog-wp-inserer svg { width: 10px; height: 10px; }
.sc-blog-wp-rang { display: block; white-space: nowrap; }
.sc-blog-wp-rang--t1 { top: 0; }
.sc-blog-wp-rang--t2 { top: 26px; }
.sc-blog-wp-rang--p1 { top: 64px; }
.sc-blog-wp-rang--p2 { top: 79px; }
.sc-blog-wp-rang--p3 { top: 94px; }
/* La frappe : la ligne s'ouvre par `max-width`, en paliers d'une lettre, et
   sa bordure droite fait le curseur de saisie. */
.sc-blog-wp-ligne {
  display: inline-block; vertical-align: top;
  max-width: 0; overflow: hidden; white-space: nowrap;
  border-right: 1.5px solid transparent;
}
.sc-blog-wp-ligne--t { font-size: 1.3125rem; font-weight: 500; line-height: 26px; letter-spacing: -.01em; }
.sc-blog-wp-ligne--p { font-size: 0.625rem; line-height: 15px; border-right-width: 1.2px; }
.sc-blog-wp-col > .sc-blog-wp-image { top: 122px; width: 300px; height: 170px; overflow: hidden; }
.sc-blog-wp-image img { display: block; width: 100%; height: 100%; object-fit: cover; }

.sc-blog-wp-snack {
  position: absolute; left: 12px; bottom: 10px;
  display: flex; align-items: center; gap: 14px;
  height: 26px; padding: 0 12px; border-radius: 2px;
  background: var(--wp-ink); color: #FFFFFF;
  font-size: 0.5rem; white-space: nowrap;
  opacity: 0; transform: translateY(8px);
}
.sc-blog-wp-snack span { display: flex; align-items: center; gap: 3px; text-decoration: underline; text-underline-offset: 2px; }
.sc-blog-wp-snack svg { width: 9px; height: 9px; }

.sc-blog-wp-pied {
  position: absolute; left: 0; right: 0; bottom: 0; height: 20px;
  display: grid; align-items: center; padding: 0 12px;
  border-top: 1px solid var(--line-wp);
  font-size: 0.46875rem; font-weight: 500;
}
.sc-blog-wp-pied-t { grid-area: 1 / 1; display: flex; align-items: center; gap: 3px; }
.sc-blog-wp-pied-t svg { width: 8px; height: 8px; color: var(--wp-gris); }
.sc-blog-wp-pied-t--1,
.sc-blog-wp-pied-t--2 { opacity: 0; }

/* ── Le panneau de publication ────────────────────────────────────── */
/* Son filet gauche est un fond d'un pixel, pas une bordure d'un seul côté. */
.sc-blog-wp-panneau {
  position: absolute; top: 0; right: 0; bottom: 0; z-index: 3; width: 196px;
  background: linear-gradient(var(--line-wp), var(--line-wp)) left top / 1px 100% no-repeat, #FFFFFF;
  transform: translateX(197px);
}
.sc-blog-wp-p { position: absolute; inset: 0; }
.sc-blog-wp-p > span { position: absolute; left: 12px; }
.sc-blog-wp-p--apres { opacity: 0; }
.sc-blog-wp-p-trait { left: 0; right: 0; height: 1px; background: var(--line-wp); }
.sc-blog-wp-p > .sc-blog-wp-p-trait { left: 0; }
.sc-blog-wp-p-trait--haut { top: 44px; }
.sc-blog-wp-p-trait--1 { top: 124px; }
.sc-blog-wp-p-trait--2 { top: 150px; }
.sc-blog-wp-p-trait--3 { top: 176px; }
.sc-blog-wp-p-trait--4 { top: 88px; }
.sc-blog-wp-p-annuler,
.sc-blog-wp-p-publier,
.sc-blog-wp-p-copier,
.sc-blog-wp-p-voir,
.sc-blog-wp-p-ajouter {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  border-radius: 2px; font-size: 0.46875rem; font-weight: 500; white-space: nowrap;
}
.sc-blog-wp-p-annuler { top: 11px; width: 62px; height: 22px; border: 1px solid var(--wp-bleu); color: var(--wp-bleu); }
.sc-blog-wp-p > .sc-blog-wp-p-publier { top: 11px; left: 80px; width: 104px; height: 22px; background: var(--wp-bleu); color: #FFFFFF; }
.sc-blog-wp-p-q { top: 58px; font-size: 0.5rem; font-weight: 600; line-height: 12px; white-space: nowrap; }
.sc-blog-wp-p-q--2 { top: 100px; }
.sc-blog-wp-p-sous { top: 74px; right: 12px; font-size: 0.4375rem; line-height: 11px; }
.sc-blog-wp-p-site { top: 94px; width: 172px; height: 22px; }
.sc-blog-wp-p-site i {
  position: absolute; top: 1px; left: 0; display: grid; place-items: center;
  width: 20px; height: 20px; border-radius: 3px; background: var(--wp-ink); color: #FFFFFF;
  font-size: 0.5625rem; font-weight: 800; line-height: 1;
}
.sc-blog-wp-p-site b { position: absolute; top: 1px; left: 28px; font-size: 0.5rem; font-weight: 500; line-height: 11px; }
.sc-blog-wp-p-site span { position: absolute; top: 12px; left: 28px; font-size: 0.4375rem; line-height: 10px; color: var(--wp-gris); }
.sc-blog-wp-p-ligne {
  right: 12px; height: 26px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 0.46875rem; white-space: nowrap;
}
.sc-blog-wp-p-ligne b { font-weight: 400; color: var(--wp-bleu); }
.sc-blog-wp-p-ligne svg { width: 10px; height: 10px; }
.sc-blog-wp-p-ligne--1 { top: 124px; }
.sc-blog-wp-p-ligne--2 { top: 150px; }
.sc-blog-wp-p > .sc-blog-wp-p-fermer { top: 15px; left: 170px; width: 14px; height: 14px; }
.sc-blog-wp-p-fermer svg { width: 14px; height: 14px; }
.sc-blog-wp-p-ok { top: 54px; right: 12px; font-size: 0.46875rem; line-height: 11.5px; }
.sc-blog-wp-p-ok u { color: var(--wp-bleu); text-underline-offset: 2px; }
.sc-blog-wp-p-lib { top: 116px; font-size: 0.40625rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; line-height: 10px; }
.sc-blog-wp-p-champ {
  top: 128px; width: 122px; height: 22px; padding: 0 6px; overflow: hidden;
  border-radius: 2px; background: #F0F0F0;
  font-size: 0.4375rem; line-height: 22px; white-space: nowrap; color: var(--wp-gris);
}
.sc-blog-wp-p > .sc-blog-wp-p-copier { top: 128px; left: 140px; width: 44px; height: 22px; border: 1px solid var(--wp-bleu); color: var(--wp-bleu); }
.sc-blog-wp-p-voir { top: 160px; width: 172px; height: 24px; background: var(--wp-bleu); color: #FFFFFF; }
.sc-blog-wp-p-voir svg { width: 9px; height: 9px; }
.sc-blog-wp-p-ajouter { top: 192px; width: 172px; height: 24px; border: 1px solid var(--wp-bleu); color: var(--wp-bleu); }

/* ═══ 2. L'ARTICLE SUR LE SITE ════════════════════════════════════════ */
.sc-blog-site { position: absolute; inset: 0; z-index: 2; background: #FFFFFF; visibility: hidden; }
.sc-blog-s-page { position: absolute; inset: 0; color: #0A0A0A; opacity: 0; }
.sc-blog-s-tete {
  display: flex; align-items: center; justify-content: space-between;
  height: 40px; padding: 0 20px;
  border-bottom: 1px solid var(--line-site);
}
.sc-blog-s-marque { font-size: 0.6875rem; font-weight: 800; letter-spacing: -.01em; }
.sc-blog-s-nav { display: flex; align-items: center; gap: 12px; font-size: 0.46875rem; font-weight: 500; color: #404040; }
.sc-blog-s-actif { font-weight: 700; color: #0A0A0A; text-decoration: underline; text-underline-offset: 3px; }
.sc-blog-s-resa { display: grid; place-items: center; height: 20px; padding: 0 9px; border-radius: 6px; background: #0A0A0A; color: #FFFFFF; font-weight: 700; }
.sc-blog-s-photo { display: block; height: 176px; overflow: hidden; }
.sc-blog-s-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; transform: scale(1.1); }
/* La colonne de lecture : tout est posé en absolu, le curseur vise juste. */
.sc-blog-s-col { position: absolute; top: 216px; left: 90px; width: 338px; height: 200px; }
.sc-blog-s-col > span { position: absolute; left: 0; opacity: 0; transform: translateY(10px); }
.sc-blog-s-kicker { top: 16px; font-size: 0.40625rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; line-height: 10px; color: #737373; white-space: nowrap; }
.sc-blog-s-h1 { top: 32px; width: 338px; font-size: 1.0625rem; font-weight: 800; line-height: 21px; letter-spacing: -.02em; white-space: nowrap; }
.sc-blog-s-texte { top: 61px; width: 338px; font-size: 0.5625rem; line-height: 14px; color: #404040; }
.sc-blog-s-boutons { top: 101px; display: flex; gap: 8px; }
.sc-blog-s-b1,
.sc-blog-s-b2 { display: grid; place-items: center; height: 26px; padding: 0 14px; border-radius: 7px; font-size: 0.5rem; font-weight: 700; white-space: nowrap; }
.sc-blog-s-b1 { background: #0A0A0A; color: #FFFFFF; }
.sc-blog-s-b2 { border: 1px solid #0A0A0A; }
.sc-blog-s-signe { top: 141px; width: 338px; padding-top: 10px; border-top: 1px dashed var(--line-site); font-size: 0.4375rem; line-height: 10px; color: #737373; }

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

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

.sc-blog-wp-invite--titre   { animation-name: sc-blog-invite-t; }
.sc-blog-wp-invite--texte,
.sc-blog-wp-col > .sc-blog-wp-inserer { animation-name: sc-blog-invite-p; }
.sc-blog-wp-ligne--t1       { animation-name: sc-blog-t1, sc-blog-ct1; }
.sc-blog-wp-ligne--t2       { animation-name: sc-blog-t2, sc-blog-ct2; }
.sc-blog-wp-ligne--p1       { animation-name: sc-blog-p1, sc-blog-cp1; }
.sc-blog-wp-ligne--p2       { animation-name: sc-blog-p2, sc-blog-cp2; }
.sc-blog-wp-ligne--p3       { animation-name: sc-blog-p3, sc-blog-cp3; }
.sc-blog-wp-doc-t--vide     { animation-name: sc-blog-doc-vide; }
.sc-blog-wp-doc-t--plein    { animation-name: sc-blog-doc-plein; }
.sc-blog-wp-pied-t--0       { animation-name: sc-blog-pied-0; }
.sc-blog-wp-pied-t--1       { animation-name: sc-blog-pied-1; }
.sc-blog-wp-pied-t--2       { animation-name: sc-blog-pied-2; }
.sc-blog-wp-publier         { animation-name: sc-blog-publier; }
.sc-blog-wp-brouillon       { animation-name: sc-blog-brouillon; }
.sc-blog-wp-panneau         { animation-name: sc-blog-panneau; }
.sc-blog-wp-col             { animation-name: sc-blog-col; }
.sc-blog-wp-p > .sc-blog-wp-p-publier { animation-name: sc-blog-publier-2; }
.sc-blog-wp-p--avant        { animation-name: sc-blog-p-avant; }
.sc-blog-wp-p--apres        { animation-name: sc-blog-p-apres; }
.sc-blog-wp-snack           { animation-name: sc-blog-snack; }
.sc-blog-wp-p-voir          { animation-name: sc-blog-voir; }

.sc-blog-c-onglet--1        { animation-name: sc-blog-onglet-1; }
.sc-blog-c-onglet--2        { animation-name: sc-blog-onglet-2; }
.sc-blog-c-plus             { animation-name: sc-blog-plus; }
.sc-blog-c-roue             { animation-name: sc-blog-roue; }
.sc-blog-c-logo--2          { animation-name: sc-blog-logo-2; }
.sc-blog-c-url-t--wp        { animation-name: sc-blog-url-wp; }
.sc-blog-c-url-t--site      { animation-name: sc-blog-url-site; }
.sc-blog-wp                 { animation-name: sc-blog-wp; }
.sc-blog-site               { animation-name: sc-blog-engage; }
.sc-blog-s-page             { animation-name: sc-blog-peinte; }
/* Le kit ne minute que les éléments dont une classe commence par « sc- » :
   la photo porte donc la sienne, sans quoi son recul ne jouait pas. */
.sc-blog-s-img              { animation-name: sc-blog-recul; }
.sc-blog-s-kicker           { animation-name: sc-blog-monte-1; }
.sc-blog-s-h1               { animation-name: sc-blog-monte-2; }
.sc-blog-s-texte            { animation-name: sc-blog-monte-3; }
.sc-blog-s-boutons          { animation-name: sc-blog-monte-4; }
.sc-blog-s-signe            { animation-name: sc-blog-monte-5; }
.sc-blog-s-b1               { animation-name: sc-blog-survol; }

.sc-blog-leg--a             { animation-name: sc-blog-leg-a; }
.sc-blog-leg--b             { animation-name: sc-blog-leg-b; }
.sc-blog-leg--c             { animation-name: sc-blog-leg-c; }

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

/* 1. ÉCRIRE ───────────────────────────────────────────────────────── */
@keyframes sc-blog-invite-t { 0%, 7% { opacity: 1; } 7.1%, 98.4% { opacity: 0; } 99.9%, 100% { opacity: 1; } }
@keyframes sc-blog-invite-p { 0%, 17% { opacity: 1; } 17.1%, 98.4% { opacity: 0; } 99.9%, 100% { opacity: 1; } }

/* La frappe, une lettre par palier. Les largeurs d'arrivée sont MESURÉES
   au banc, en Inter servie, plus 2 px. */
@keyframes sc-blog-t1 { 0%, 7.2% { max-width: 0; animation-timing-function: steps(23, end); } 12.6%, 98.4% { max-width: 220px; } 99.9%, 100% { max-width: 0; } }
@keyframes sc-blog-t2 { 0%, 13% { max-width: 0; animation-timing-function: steps(10, end); } 15.4%, 98.4% { max-width: 92px; } 99.9%, 100% { max-width: 0; } }
@keyframes sc-blog-p1 { 0%, 17.2% { max-width: 0; animation-timing-function: steps(42, end); } 22.4%, 98.4% { max-width: 196px; } 99.9%, 100% { max-width: 0; } }
@keyframes sc-blog-p2 { 0%, 22.8% { max-width: 0; animation-timing-function: steps(43, end); } 28%, 98.4% { max-width: 194px; } 99.9%, 100% { max-width: 0; } }
@keyframes sc-blog-p3 { 0%, 28.4% { max-width: 0; animation-timing-function: steps(34, end); } 31.8%, 98.4% { max-width: 168px; } 99.9%, 100% { max-width: 0; } }
/* Le curseur de saisie, sur la ligne qu'on tape ; il clignote au bout du
   texte en attendant « Publier ». */
@keyframes sc-blog-ct1 { 0%, 6.5% { border-right-color: transparent; } 6.6%, 12.8% { border-right-color: var(--wp-ink); } 12.9%, 100% { border-right-color: transparent; } }
@keyframes sc-blog-ct2 { 0%, 12.8% { border-right-color: transparent; } 12.9%, 16.4% { border-right-color: var(--wp-ink); } 16.5%, 100% { border-right-color: transparent; } }
@keyframes sc-blog-cp1 { 0%, 16.5% { border-right-color: transparent; } 16.6%, 22.6% { border-right-color: var(--wp-ink); } 22.7%, 100% { border-right-color: transparent; } }
@keyframes sc-blog-cp2 { 0%, 22.6% { border-right-color: transparent; } 22.7%, 28.2% { border-right-color: var(--wp-ink); } 28.3%, 100% { border-right-color: transparent; } }
@keyframes sc-blog-cp3 {
  0%, 28.2%    { border-right-color: transparent; }
  28.3%, 32.6% { border-right-color: var(--wp-ink); }
  32.7%, 33.5% { border-right-color: transparent; }
  33.6%, 34.4% { border-right-color: var(--wp-ink); }
  34.5%, 100%  { border-right-color: transparent; }
}
@keyframes sc-blog-doc-vide  { 0%, 12.7% { opacity: 1; } 12.8%, 98.4% { opacity: 0; } 99.9%, 100% { opacity: 1; } }
@keyframes sc-blog-doc-plein { 0%, 12.7% { opacity: 0; } 12.8%, 98.4% { opacity: 1; } 99.9%, 100% { opacity: 0; } }
@keyframes sc-blog-pied-0 { 0%, 6.3% { opacity: 1; } 6.4%, 98.4% { opacity: 0; } 99.9%, 100% { opacity: 1; } }
@keyframes sc-blog-pied-1 { 0%, 6.3% { opacity: 0; } 6.4%, 16.5% { opacity: 1; } 16.6%, 100% { opacity: 0; } }
@keyframes sc-blog-pied-2 { 0%, 16.5% { opacity: 0; } 16.6%, 98.4% { opacity: 1; } 99.9%, 100% { opacity: 0; } }

/* 2. PUBLIER ──────────────────────────────────────────────────────── */
@keyframes sc-blog-publier { 0%, 35.1% { background: var(--wp-bleu); } 35.2%, 35.6% { background: var(--wp-bleu-fonce); } 35.7%, 100% { background: var(--wp-bleu); } }
/* « Enregistrer le brouillon » s'efface sous le panneau, qui couvre la
   droite de la barre : sinon son début dépasserait, coupé. */
@keyframes sc-blog-brouillon { 0%, 35.4% { opacity: 1; } 35.8%, 98.4% { opacity: 0; } 99.9%, 100% { opacity: 1; } }
@keyframes sc-blog-panneau {
  0%, 35.5%    { transform: translateX(197px); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  36.9%, 98.4% { transform: none; }
  99.9%, 100%  { transform: translateX(197px); }
}
/* La colonne d'écriture glisse pour laisser la place au panneau, comme la
   zone d'édition de WordPress se resserre. */
@keyframes sc-blog-col {
  0%, 35.5%    { transform: none; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  36.9%, 98.4% { transform: translateX(-98px); }
  99.9%, 100%  { transform: none; }
}
@keyframes sc-blog-publier-2 { 0%, 38.7% { background: var(--wp-bleu); } 38.8%, 39.2% { background: var(--wp-bleu-fonce); } 39.3%, 100% { background: var(--wp-bleu); } }
@keyframes sc-blog-p-avant { 0%, 39.3% { opacity: 1; } 39.5%, 98.4% { opacity: 0; } 99.9%, 100% { opacity: 1; } }
@keyframes sc-blog-p-apres { 0%, 39.4% { opacity: 0; } 39.7%, 98.4% { opacity: 1; } 99.9%, 100% { opacity: 0; } }
@keyframes sc-blog-snack {
  0%, 40%      { opacity: 0; transform: translateY(8px); }
  40.8%, 98.4% { opacity: 1; transform: none; }
  99.9%, 100%  { opacity: 0; transform: translateY(8px); }
}
@keyframes sc-blog-voir { 0%, 43.7% { background: var(--wp-bleu); } 43.8%, 44.2% { background: var(--wp-bleu-fonce); } 44.3%, 100% { background: var(--wp-bleu); } }

/* 3. L'ARTICLE ────────────────────────────────────────────────────── */
/* « Voir l'article » ouvre un nouvel onglet, comme dans WordPress : il
   apparaît à droite du premier et prend la main. */
@keyframes sc-blog-onglet-1 {
  0%, 44.3%    { background: #FFFFFF; color: #1F1F1F; }
  44.4%, 98.4% { background: transparent; color: #474747; }
  99.9%, 100%  { background: #FFFFFF; color: #1F1F1F; }
}
@keyframes sc-blog-onglet-2 { 0%, 44.3% { opacity: 0; } 44.5%, 98.4% { opacity: 1; } 99.9%, 100% { opacity: 0; } }
@keyframes sc-blog-plus { 0%, 44.3% { transform: none; } 44.5%, 98.4% { transform: translateX(152px); } 99.9%, 100% { transform: none; } }
@keyframes sc-blog-roue {
  0%, 44.4%    { opacity: 0; transform: rotate(0); }
  44.5%        { opacity: 1; transform: rotate(0); animation-timing-function: linear; }
  46.9%        { opacity: 1; transform: rotate(420deg); }
  47%, 100%    { opacity: 0; transform: rotate(0); }
}
@keyframes sc-blog-logo-2 { 0%, 46.9% { opacity: 0; } 47%, 98.4% { opacity: 1; } 99.9%, 100% { opacity: 0; } }
@keyframes sc-blog-url-wp   { 0%, 44.3% { opacity: 1; } 44.4%, 98.4% { opacity: 0; } 99.9%, 100% { opacity: 1; } }
@keyframes sc-blog-url-site { 0%, 44.3% { opacity: 0; } 44.4%, 98.4% { opacity: 1; } 99.9%, 100% { opacity: 0; } }
/* L'éditeur reste dans son onglet : la vue devient blanche le temps du
   chargement, puis l'article est peint. */
@keyframes sc-blog-wp     { 0%, 44.4% { visibility: visible; } 44.5%, 98.4% { visibility: hidden; } 99.9%, 100% { visibility: visible; } }
@keyframes sc-blog-engage { 0%, 44.4% { visibility: hidden; } 44.5%, 98.4% { visibility: visible; } 99.9%, 100% { visibility: hidden; } }
@keyframes sc-blog-peinte { 0%, 47.1% { opacity: 0; } 47.2%, 98.4% { opacity: 1; } 99.9%, 100% { opacity: 0; } }
@keyframes sc-blog-recul {
  0%, 47.2%    { transform: scale(1.1); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  66%, 98.4%   { transform: none; }
  99.9%, 100%  { transform: scale(1.1); }
}
@keyframes sc-blog-monte-1 { 0%, 47.6% { opacity: 0; transform: translateY(10px); } 49.2%, 98.4% { opacity: 1; transform: none; } 99.9%, 100% { opacity: 0; transform: translateY(10px); } }
@keyframes sc-blog-monte-2 { 0%, 48% { opacity: 0; transform: translateY(10px); } 49.6%, 98.4% { opacity: 1; transform: none; } 99.9%, 100% { opacity: 0; transform: translateY(10px); } }
@keyframes sc-blog-monte-3 { 0%, 48.6% { opacity: 0; transform: translateY(10px); } 50.2%, 98.4% { opacity: 1; transform: none; } 99.9%, 100% { opacity: 0; transform: translateY(10px); } }
@keyframes sc-blog-monte-4 { 0%, 49.2% { opacity: 0; transform: translateY(10px); } 50.8%, 98.4% { opacity: 1; transform: none; } 99.9%, 100% { opacity: 0; transform: translateY(10px); } }
@keyframes sc-blog-monte-5 { 0%, 49.8% { opacity: 0; transform: translateY(10px); } 51.4%, 98.4% { opacity: 1; transform: none; } 99.9%, 100% { opacity: 0; transform: translateY(10px); } }
/* Le survol de « Réserver une table » : le bouton s'éclaircit un peu. */
@keyframes sc-blog-survol { 0%, 59.9% { background: #0A0A0A; } 60.2%, 64% { background: #333333; } 64.4%, 100% { background: #0A0A0A; } }

@keyframes sc-blog-leg-a { 0%, 38.8% { opacity: 1; } 39.4%, 98.4% { opacity: 0; } 99.9%, 100% { opacity: 1; } }
@keyframes sc-blog-leg-b { 0%, 39.4% { opacity: 0; } 40%, 46.6% { opacity: 1; } 47.2%, 100% { opacity: 0; } }
@keyframes sc-blog-leg-c { 0%, 47.2% { opacity: 0; } 47.8%, 98.4% { opacity: 1; } 99.9%, 100% { opacity: 0; } }

/* LE CURSEUR. Il touche le titre, s'écarte pendant la frappe (à droite de
   la colonne, sur aucun mot), clique « Publier » deux fois, puis « Voir
   l'article », attend la page, survole « Réserver une table » et s'en va. */
@keyframes sc-cur-blog {
  0%, 4%       { transform: translate(440px, 470px); opacity: 0; }
  5%           { transform: translate(330px, 300px); opacity: 1; }
  6%           { transform: translate(177px, 140px); opacity: 1; }
  6.2%         { transform: translate(177px, 140px) scale(.84); opacity: 1; }
  6.6%         { transform: translate(177px, 140px); opacity: 1; }
  8.4%, 33.4%  { transform: translate(446px, 300px); opacity: 1; }
  35%          { transform: translate(464px, 85px); opacity: 1; }
  35.2%        { transform: translate(464px, 85px) scale(.84); opacity: 1; }
  35.6%, 37.8% { transform: translate(464px, 85px); opacity: 1; }
  38.6%        { transform: translate(451px, 85px); opacity: 1; }
  38.8%        { transform: translate(451px, 85px) scale(.84); opacity: 1; }
  39.2%, 41.4% { transform: translate(451px, 85px); opacity: 1; }
  43.4%        { transform: translate(417px, 235px); opacity: 1; }
  43.8%        { transform: translate(417px, 235px) scale(.84); opacity: 1; }
  44.2%, 45%   { transform: translate(417px, 235px); opacity: 1; }
  47%, 57.4%   { transform: translate(430px, 470px); opacity: 1; }
  60%, 64%     { transform: translate(138px, 393px); opacity: 1; }
  67%, 98.4%   { transform: translate(300px, 470px); opacity: 0; }
  99.9%, 100%  { transform: translate(440px, 470px); opacity: 0; }
}
@keyframes sc-blog-onde {
  0%, 6.1%     { transform: scale(.4); opacity: 0; }
  6.2%         { transform: scale(.4); opacity: .9; }
  8.2%         { transform: scale(2.2); opacity: 0; }
  35.1%        { transform: scale(.4); opacity: 0; }
  35.2%        { transform: scale(.4); opacity: .9; }
  37.2%        { transform: scale(2.2); opacity: 0; }
  38.7%        { transform: scale(.4); opacity: 0; }
  38.8%        { transform: scale(.4); opacity: .9; }
  40.8%        { transform: scale(2.2); opacity: 0; }
  43.7%        { transform: scale(.4); opacity: 0; }
  43.8%        { transform: scale(.4); opacity: .9; }
  45.8%        { transform: scale(2.2); opacity: 0; }
  46%, 100%    { transform: scale(.4); opacity: 0; }
}

/* Moins de mouvement : l'état d'arrivée, l'article publié sur le site. */
@media (prefers-reduced-motion: reduce) {
  .sc-blog-wp { visibility: hidden; }
  .sc-blog-site { visibility: visible; }
  .sc-blog-s-page { opacity: 1; }
  .sc-blog-s-photo img { transform: none; }
  .sc-blog-s-col > span { opacity: 1; transform: none; }
  .sc-blog-c-onglet--1 { background: transparent; color: #474747; }
  .sc-blog-c-onglet--2,
  .sc-blog-c-logo--2,
  .sc-blog-c-url-t--site { opacity: 1; }
  .sc-blog-c-url-t--wp { opacity: 0; }
  .sc-blog-c-plus { transform: translateX(152px); }
  .sc-blog-leg--a { opacity: 0; }
  .sc-blog-leg--c { opacity: 1; }
}