/* ==========================================================================
   Alive — la métamorphose du haut de page
   Un seul appareil qui change de forme :
     téléphone  → le client réserve sa table ;
     ordinateur → la réservation s'inscrit dans la soirée ;
     tablette   → l'équipe reçoit le plan, zones des chefs de rang ;
     les trois  → la tablette glisse, l'ordinateur et le téléphone la rejoignent ;
   puis tout se referme en téléphone, et la boucle repart.
   L'écran change de taille et d'arrondi ; chaque contenu a sa taille propre et
   reste centré : l'écran qui grandit le dévoile, celui qui rétrécit le rogne.
   La scène mesure 100 em de large (unités cqw). Déroulé : assets/js/morph.js.
   ========================================================================== */

.morph {
  --morph: cubic-bezier(.77, 0, .18, 1);
  --duree-morph: 1.35s;
  container-type: inline-size;
}
.morph.rev { transform: translateY(26px); transition-duration: 1.2s; }
.morph.rev.vu { transform: none; }
/* la scène prend la plus grande taille possible sans dépasser le bas de l'écran :
   sa hauteur (52 em) doit tenir sous le titre et les boutons (~ 420 px) */
.morph__scene { position: relative; height: 52em; font-size: max(5px, min(calc(100cqw / 100), calc((100svh - 420px) / 52))); }

/* ---------- Le haut de page : le titre centré, la métamorphose dessous, en grand ---------- */
.ouverture { padding: 96px 0 clamp(28px, 5vh, 56px); }
.ouverture__grille { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: clamp(18px, 3vh, 34px); }
.ouverture__texte { text-align: center; max-width: 1140px; }
.ouverture__titre { font-size: min(clamp(2.3rem, 4.3vw, 3.9rem), 7.6svh); line-height: .95; margin: 0 auto 18px; max-width: none; }
.ouverture__ligne { margin: 0 auto; max-width: 620px; }
.ouverture__actions { justify-content: center; margin-top: 24px; }
.morph { width: 100%; max-width: 1060px; }

/* ---------- Le halo, qui suit l'appareil ---------- */
.morph__halo {
  position: absolute; left: 50%; top: 46%; width: 70em; height: 46em; margin: -23em 0 0 -35em;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--g1) 55%, transparent), transparent);
  opacity: .55; transform: scale(.55);
  transition: transform 1.6s var(--morph), opacity 1.2s var(--morph), background 1.2s;
}
.morph[data-forme='mac'] .morph__halo { transform: scale(1.05); background: radial-gradient(closest-side, color-mix(in srgb, var(--g2) 50%, transparent), transparent); }
.morph[data-forme='ipad'] .morph__halo { transform: scale(.9); background: radial-gradient(closest-side, color-mix(in srgb, var(--g3) 38%, transparent), transparent); }
.morph[data-forme='trio'] .morph__halo { transform: scale(1.25); opacity: .7; }

/* ---------- L'appareil qui change de forme ---------- */
.morph__appareil {
  position: absolute; left: 50%; top: 50%; z-index: 3;
  transform: translate(-50%, -50%);
  transition: transform var(--duree-morph) var(--morph);
  will-change: transform;
}
.morph[data-forme='mac'] .morph__appareil { transform: translate(-50%, -52%); }
.morph[data-forme='trio'] .morph__appareil { transform: translate(-50%, -50%) translate(29em, 8.5em) scale(.5); }

.chassis {
  position: relative;
  padding: .8em; border-radius: 3.75em;
  background: #0A0A0D;
  box-shadow: inset 0 0 0 .12em #3A3A42, 0 0 0 .08em #050506, 0 3em 7em -2em rgba(0,0,0,.95);
  transition: padding var(--duree-morph) var(--morph), border-radius var(--duree-morph) var(--morph);
}
.morph__ecran {
  position: relative; overflow: hidden;
  width: 22em; height: 47.2em; border-radius: 2.95em;
  background: #07070A;
  transition: width var(--duree-morph) var(--morph), height var(--duree-morph) var(--morph), border-radius var(--duree-morph) var(--morph);
}
.morph__appareil .chassis { will-change: padding; }
/* ordinateur */
.morph[data-forme='mac'] .morph__appareil .chassis, .chassis--mac { padding: .75em .75em 1.05em; border-radius: 1.5em 1.5em .45em .45em; }
.morph[data-forme='mac'] .morph__appareil .morph__ecran, .chassis--mac .morph__ecran { width: 72em; height: 45em; border-radius: .6em; }
/* tablette */
.morph:is([data-forme='ipad'], [data-forme='trio']) .morph__appareil .chassis { padding: 1.3em; border-radius: 2.9em; }
.morph:is([data-forme='ipad'], [data-forme='trio']) .morph__appareil .morph__ecran { width: 58em; height: 40.6em; border-radius: 1.55em; }

/* les détails de chaque appareil apparaissent avec sa forme */
.chassis__ile, .chassis__encoche, .chassis__camera { position: absolute; left: 50%; z-index: 6; opacity: 0; transition: opacity .4s var(--doux); }
.chassis__ile { top: 1.6em; width: 6.6em; height: 1.9em; margin-left: -3.3em; border-radius: 1em; background: #000; }
.chassis__encoche { top: .75em; width: 9em; height: 1.1em; margin-left: -4.5em; border-radius: 0 0 .6em .6em; background: #0A0A0D; }
.chassis__camera { top: .42em; width: .48em; height: .48em; margin-left: -.24em; border-radius: 50%; background: #26262D; }
.morph[data-forme='tel'] .morph__appareil .chassis__ile, .chassis--tel .chassis__ile { opacity: 1; transition-delay: .6s; }
.morph[data-forme='mac'] .morph__appareil .chassis__encoche, .chassis--mac .chassis__encoche { opacity: 1; transition-delay: .6s; }
.morph:is([data-forme='ipad'], [data-forme='trio']) .morph__appareil .chassis__camera { opacity: 1; transition-delay: .6s; }

/* le socle de l'ordinateur se déploie sous l'écran */
.chassis__base {
  position: absolute; left: 50%; top: 100%; width: 86em; height: 1.55em; margin-left: -43em;
  border-radius: .15em .15em 1.4em 1.4em / .15em .15em 1.1em 1.1em;
  background: linear-gradient(#EDEDEF, #C4C4C9 35%, #8D8D93 80%, #6E6E74);
  box-shadow: 0 2.5em 3em -2em rgba(0,0,0,.9);
  transform: scale(.25, 0); transform-origin: 50% 0; opacity: 0;
  transition: transform .9s var(--morph), opacity .35s var(--doux);
}
.chassis__base span { position: absolute; top: 0; left: 50%; width: 13em; height: .5em; margin-left: -6.5em; border-radius: 0 0 .7em .7em; background: linear-gradient(#9E9EA4, #C6C6CB); }
.morph[data-forme='mac'] .morph__appareil .chassis__base, .morph__trio .chassis__base { transform: none; opacity: 1; transition-delay: .3s; }

/* ---------- Les contenus : un par forme, centrés, en fondu ---------- */
.couche {
  position: absolute; left: 50%; top: 50%;
  opacity: 0; transform: translate(-50%, -50%) scale(1.04);
  transition: opacity .5s var(--doux) .45s, transform 1s var(--morph);
}
.morph[data-forme='tel'] .morph__appareil .couche--tel,
.morph[data-forme='mac'] .morph__appareil .couche--mac,
.morph:is([data-forme='ipad'], [data-forme='trio']) .morph__appareil .couche--ipad,
.morph__trio .couche {
  opacity: 1; transform: translate(-50%, -50%);
  transition: opacity .6s var(--doux) .15s, transform 1.1s var(--morph);
}

.couche--tel { width: 22em; height: 47.2em; }
.couche__tel {
  position: absolute; left: 0; top: 0; width: 290px; height: 617px;
  transform: scale(var(--tk, .5)); transform-origin: 0 0;
  background: #07070A; color: #F1F0ED; font-size: 13px; overflow: hidden;
}
.tel-etat { position: absolute; left: 0; top: 0; width: 390px; height: 54px; z-index: 5; transform: scale(.7436); transform-origin: 0 0; }
.couche__tel .ecran { opacity: 1; transform: none; }
.couche__tel .choix__salle { top: 100px; bottom: 112px; }

.couche--mac { width: 72em; height: 45em; }
.couche--mac .app { font-size: .72em; width: 100em; height: 62.5em; }
.app--morph { grid-template-columns: 5.2em minmax(0, 1fr); }
.app--morph .app__principal { grid-template-rows: minmax(0, 1fr); }
.app--morph .app__page { grid-template-rows: auto minmax(0, 1fr); }
.app--morph .app__ligne { grid-template-columns: 2.1fr .7fr .5fr .8fr 1.25fr; }
.app--morph .app__ligne--tete { position: relative; z-index: 1; }

.couche--ipad { width: 58em; height: 40.6em; }
.couche--ipad .equipe { font-size: .94em; height: 100%; background: #fff; }

/* le reflet qui balaie l'écran à chaque transformation */
.morph__reflet {
  position: absolute; inset: -10%; z-index: 8; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.2) 50%, transparent 62%);
  transform: translateX(-110%);
}
.morph__reflet.balaye { animation: reflet 1.3s var(--morph); }
@keyframes reflet { from { transform: translateX(-110%); } to { transform: translateX(110%); } }

/* ---------- Les gestes, dans chaque contenu ---------- */
/* téléphone : la table s'allume, « Table réservée » */
.morph .i-table--choisie, .morph .i-banq--choisie { transition: fill .5s var(--doux); }
.morph:not(.m-choisie) .i-table--choisie.f-dessus { fill: #FFFFFF; }
.morph:not(.m-choisie) .i-table--choisie.f-avant { fill: #CFCED6; }
.morph:not(.m-choisie) .i-table--choisie.f-cote { fill: #ADACB6; }
.morph:not(.m-choisie) .i-banq--choisie.f-dessus { fill: #7A7A86; }
.morph:not(.m-choisie) .i-banq--choisie.f-avant { fill: #5E5E69; }
.morph:not(.m-choisie) .i-banq--choisie.f-cote { fill: #51515B; }
.morph .i-etiquette--choisie { opacity: 0; transition: opacity .4s var(--doux) .15s; }
.morph.m-choisie .i-etiquette--choisie { opacity: 1; }
.morph__doigt {
  position: absolute; left: 0; top: 0; z-index: 8; width: 42px; height: 42px; margin: -21px 0 0 -21px;
  border-radius: 50%; background: rgba(255,255,255,.55); box-shadow: 0 0 0 1px rgba(255,255,255,.5); opacity: 0; pointer-events: none;
}
.morph__doigt.tape { animation: doigt .65s cubic-bezier(.22, 1, .36, 1); }
@keyframes doigt { 0% { opacity: .95; transform: scale(.35); } 100% { opacity: 0; transform: scale(1.5); } }
.morph__reserve {
  position: absolute; left: 50%; top: 92px; z-index: 7;
  display: flex; align-items: center; gap: 6px; padding: 8px 14px 8px 10px; border-radius: 30px;
  background: #16A34A; color: #fff; font-size: 12px; font-weight: 700; white-space: nowrap;
  box-shadow: 0 10px 24px -8px rgba(0,0,0,.6);
  opacity: 0; transform: translate(-50%, -10px) scale(.94);
  transition: opacity .4s var(--doux), transform .6s cubic-bezier(.22, 1, .36, 1);
}
.morph__reserve svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.morph.m-reserve .morph__reserve { opacity: 1; transform: translate(-50%, 0); }

/* ordinateur : la réservation s'inscrit en tête de liste */
.morph__compte { position: relative; display: inline-flex; align-items: baseline; gap: .3em; font-size: 1.05em; color: var(--a-gris); margin-right: .6em; }
.morph__compte b { display: inline-block; color: var(--a-texte); font-size: 1.15em; font-variant-numeric: tabular-nums; transition: opacity .4s, transform .5s cubic-bezier(.22, 1, .36, 1); }
.morph__compte .c-apres { position: absolute; left: 0; color: var(--a-indigo); opacity: 0; transform: translateY(.5em); }
.morph.m-inscrite .morph__compte .c-avant { opacity: 0; transform: translateY(-.5em); }
.morph.m-inscrite .morph__compte .c-apres { opacity: 1; transform: none; transition-delay: .35s; }
.morph__lignes { --h: 3.6em; transform: translateY(calc(var(--h) * -1)); transition: transform .8s cubic-bezier(.22, 1, .36, 1); }
.morph.m-inscrite .morph__lignes { transform: none; }
.morph__nouvelle { opacity: 0; background: #FFF4E3; transition: opacity .5s var(--doux) .2s, background 1.8s var(--doux) 1.4s; }
.morph.m-inscrite .morph__nouvelle { opacity: 1; background: #fff; }
.morph.m-inscrite .couche--mac [data-t='M3'] .p-plateau { fill: #27272A; stroke: #27272A; transition-delay: .4s; }
.morph.m-inscrite .couche--mac [data-t='M3'] .p-num { fill: #fff; transition-delay: .4s; }
.morph [data-t='M6'] .p-plateau, .couche--ipad [data-t='M3'] .p-plateau { fill: #27272A; stroke: #27272A; }
.morph [data-t='M6'] .p-num, .couche--ipad [data-t='M3'] .p-num { fill: #fff; }

/* tablette : les zones des chefs de rang se posent l'une après l'autre */
.couche--ipad .p-zone, .couche--ipad .p-client { opacity: 0; transition: opacity .6s var(--doux); }
.morph.m-zones .couche--ipad .p-zone, .morph.m-zones .couche--ipad .p-client { opacity: 1; }
.morph.m-zones .couche--ipad .p-zone--sofiane, .morph.m-zones .couche--ipad [data-zone='sofiane'] .p-client { transition-delay: .3s; }
.morph.m-zones .couche--ipad .p-zone--ines, .morph.m-zones .couche--ipad [data-zone='ines'] .p-client { transition-delay: .6s; }
.morph__recu { opacity: 0; transform: translateY(-.4em); transition: opacity .4s var(--doux), transform .6s cubic-bezier(.22, 1, .36, 1); }
.morph.m-zones .morph__recu { opacity: 1; transform: none; transition-delay: 1s; }

/* ---------- Les trois ensemble ---------- */
.morph__trio {
  position: absolute; left: 50%; top: 50%; z-index: 2;
  opacity: 0; transform: translate(-50%, -50%) scale(.45);
  transition: transform var(--duree-morph) var(--morph), opacity .6s var(--doux);
  pointer-events: none;
}
.morph__trio--tel { z-index: 4; }
.morph[data-forme='trio'] .morph__trio--mac { opacity: 1; transform: translate(-50%, -50%) translate(-4em, -4.5em) scale(.72); transition-delay: .12s; }
.morph[data-forme='trio'] .morph__trio--tel { opacity: 1; transform: translate(-50%, -50%) translate(-33em, 8.5em) scale(.5); transition-delay: .24s; }
.chassis--tel .morph__ecran { width: 22em; height: 47.2em; border-radius: 2.95em; }
.morph__trio .morph__doigt { display: none; }

/* ---------- La légende : une ligne, discrète ---------- */
.morph__legende { position: absolute; left: 0; right: 0; bottom: -2.4em; margin: 0; display: grid; justify-items: center; font-size: max(12px, 1.35em); color: var(--gris); pointer-events: none; }
.morph__legende span { grid-area: 1 / 1; opacity: 0; transform: translateY(.5em); transition: opacity .5s var(--doux), transform .7s cubic-bezier(.22, 1, .36, 1); }
.morph[data-forme='tel'] [data-l='tel'], .morph[data-forme='mac'] [data-l='mac'],
.morph[data-forme='ipad'] [data-l='ipad'], .morph[data-forme='trio'] [data-l='trio'] { opacity: 1; transform: none; transition-delay: .5s; }
.morph[data-forme='trio'] [data-l='trio'] { color: var(--blanc); }

/* ---------- Ruptures ---------- */

@media (max-width: 640px) {
  .ouverture { padding-top: 96px; }
  .ouverture__texte { text-align: left; }
  .ouverture__titre { font-size: clamp(2.2rem, 10.5vw, 2.9rem); }
  .ouverture__actions { flex-direction: column; align-items: stretch; }
  .morph__scene { font-size: calc(100cqw / 80); height: 58em; }
  .morph[data-forme='trio'] .morph__appareil { transform: translate(-50%, -50%) translate(21em, 9em) scale(.5); }
  .morph[data-forme='trio'] .morph__trio--mac { transform: translate(-50%, -50%) translate(-3em, -6em) scale(.8); }
  .morph[data-forme='trio'] .morph__trio--tel { transform: translate(-50%, -50%) translate(-27em, 8em) scale(.5); }
  .morph .app__nav--icones { display: flex; }
  .morph__legende { bottom: -2em; }
}
@media (prefers-reduced-motion: reduce) {
  .morph *, .morph *::before { transition: none !important; animation: none !important; }
}

/* ---------- Le titre : une phrase fixe, un mot qui change ----------
   Les mots sont empilés dans la même case : la case prend la largeur du plus
   long, la phrase ne bouge donc pas. Le mot sortant monte, le suivant arrive
   par le bas ; un trait au dégradé se redessine dessous à chaque changement. */
.mot-change { position: relative; display: inline-grid; justify-items: center; vertical-align: bottom; padding-bottom: .08em; }
.mot-change__mot {
  grid-area: 1 / 1; white-space: nowrap;
  opacity: 0; transform: translateY(.55em); filter: blur(6px);
  transition: opacity .45s var(--doux), transform .7s var(--sortie), filter .5s var(--doux);
}
.mot-change__mot.actif { opacity: 1; transform: none; filter: none; }
.mot-change__mot.sorti { opacity: 0; transform: translateY(-.55em); filter: blur(6px); }
.mot-change__trait {
  position: absolute; left: 50%; bottom: 0; width: var(--l, 60%); height: .06em; margin-left: calc(var(--l, 60%) / -2);
  border-radius: 1em; background: var(--degrade);
  transform: scaleX(0); transform-origin: left; transition: transform .8s var(--sortie) .15s, width .6s var(--sortie), margin .6s var(--sortie);
}
.mot-change.trace .mot-change__trait { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .mot-change__mot, .mot-change__trait { transition: none; }
}

/* ---------- La relance : le téléphone du trio reçoit le message du club ---------- */
.morph__relance {
  position: absolute; left: 10px; right: 10px; top: 46px; z-index: 9;
  display: flex; gap: 9px; align-items: flex-start;
  padding: 11px 12px; border-radius: 16px;
  background: rgba(38, 38, 44, .92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 12px 30px -10px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.08);
  color: #F1F0ED; font-size: 13.5px; line-height: 1.3;
  opacity: 0; transform: translateY(-120%) scale(.96);
  transition: opacity .35s var(--doux), transform .7s cubic-bezier(.22, 1.2, .36, 1);
}
.morph__relance b { font-size: 13px; }
.morph__relance small { float: right; margin-left: 8px; font-size: 11px; color: rgba(255,255,255,.5); }
.morph__relance > span { flex: 1; }
.morph__relance-icone { flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: #25D366; }
.morph__relance-icone svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2; stroke-linejoin: round; }
.morph__relance > span b { display: block; }
.morph.m-relance .morph__trio .morph__relance { opacity: 1; transform: none; }
/* au moment de la relance, le téléphone passe un peu devant */
.morph.m-relance[data-forme='trio'] .morph__trio--tel { transform: translate(-50%, -50%) translate(-33em, 7em) scale(.58); transition-delay: 0s; }
.morph.m-relance .morph__trio--tel .morph__reserve { opacity: 0; }
@media (max-width: 640px) {
  .morph.m-relance[data-forme='trio'] .morph__trio--tel { transform: translate(-50%, -50%) translate(-27em, 6.5em) scale(.6); }
}
/* sur téléphone, le titre est aligné à gauche : le mot aussi */
@media (max-width: 640px) {
  .mot-change { justify-items: start; }
  .mot-change__trait { left: 0; margin-left: 0; }
}

/* ---------- L'élément clé de chaque étape, en grand ----------
   Un voile atténue les appareils ; une carte agrandie apparaît par-dessus,
   près de l'endroit de l'appareil dont elle parle (--fx, --fy : décalage
   depuis le centre de la scène). */
/* pendant qu'une carte est affichée, les appareils s'atténuent (pas de voile :
   il dessinerait un rectangle sur le fond) */
.morph__voile { display: none; }
.morph__appareil .chassis, .morph__appareil .chassis__base { transition: opacity .5s var(--doux), padding var(--duree-morph) var(--morph), border-radius var(--duree-morph) var(--morph), transform .9s var(--morph); }
.morph.m-focus .morph__appareil .chassis, .morph.m-focus[data-forme='mac'] .morph__appareil .chassis__base { opacity: .32; }
.morph.m-focus[data-forme='trio'] .morph__trio { opacity: .32; }
.focus {
  position: absolute; left: 50%; top: 50%; z-index: 10; pointer-events: none;
  display: flex; align-items: center; gap: 1.3em;
  padding: 1.4em 1.8em 1.4em 1.4em; border-radius: 1.2em;
  background: #fff; color: #18181B;
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif; font-size: 1.9em; line-height: 1.25;
  box-shadow: 0 2em 5em -1.5em rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.1), 0 0 6em -1em color-mix(in srgb, var(--g2) 55%, transparent);
  /* la carte naît petite sur l'élément dont elle parle (--sx, --sy), puis grandit
     jusqu'à sa place (--fx, --fy) ; les deux sont mesurés par morph.js */
  opacity: 0; transform: translate(-50%, -50%) translate(var(--sx, 0px), var(--sy, 0px)) scale(.22);
  transition: opacity .35s var(--doux), transform .9s cubic-bezier(.22, 1.15, .36, 1);
}
.focus.on { opacity: 1; transform: translate(-50%, -50%) translate(var(--fx, 0px), var(--fy, 0px)); }
.focus small { display: block; font-size: .72em; color: #6B6B74; }
.focus b { display: block; font-size: 1.15em; font-weight: 700; letter-spacing: -.02em; }
.focus em { display: block; font-style: normal; font-size: .78em; color: #52525B; margin-top: .15em; }
.focus__puce { flex-shrink: 0; width: 2.6em; height: 2.6em; border-radius: .7em; display: grid; place-items: center; color: #fff; }
.focus__puce svg { width: 1.4em; height: 1.4em; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.focus__puce--orange { background: #F59B3C; }
.focus__puce--vert { background: #16A34A; }
.focus__puce--vert svg { stroke-width: 3; }
/* la réservation, sortie de la liste et agrandie */
.focus--gerer { display: grid; gap: .6em; padding: 1.1em 1.3em; font-size: 1.75em; }
.focus__titre { display: flex !important; align-items: center; gap: .5em; font-weight: 600; }
.focus__titre > i { width: .6em; height: .6em; border-radius: 50%; background: #F59B3C; box-shadow: 0 0 0 .3em rgba(245,155,60,.25); }
.focus__ligne { display: flex; align-items: center; gap: 1em; white-space: nowrap; font-size: 1em; }
.focus__ligne .av { width: 2.2em; height: 2.2em; font-size: .75em; }
.focus__nom { display: flex; align-items: center; gap: .5em; }
.focus__nom b { font-size: 1.05em; }
.focus__ligne > b { font-size: 1em; }
.focus__ligne .pill { font-size: .85em; }
.focus__ligne > span:not(.pill):not(.focus__nom) { color: #52525B; }
.focus--briefer { display: grid; gap: .55em; padding: 1.2em 1.4em; font-size: 1.8em; }
.focus__titre-ok { width: 1.3em !important; height: 1.3em !important; display: grid; place-items: center; background: #16A34A !important; box-shadow: none !important; color: #fff; }
.focus__titre-ok svg { width: .8em; height: .8em; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; }
.focus__chef { display: flex; align-items: center; gap: .7em; min-width: 12em; }
.focus__chef .av { width: 1.9em; height: 1.9em; font-size: .7em; color: #fff; }
.focus__chef b { font-size: 1em; }
.focus__chef span { margin-left: auto; font-size: .85em; color: #6B6B74; }
/* la relance : la notification du téléphone, en grand */
.focus--relancer { width: 26em; align-items: flex-start; padding: 1.3em 1.5em; border-radius: 1.4em; background: rgba(245,245,247,.97); font-size: 2.1em; }
.focus__wa { flex-shrink: 0; width: 2.3em; height: 2.3em; border-radius: .6em; display: grid; place-items: center; background: #25D366; }
.focus__wa svg { width: 1.35em; height: 1.35em; fill: none; stroke: #fff; stroke-width: 2; stroke-linejoin: round; }
.focus--relancer small { margin-bottom: .25em; }
.focus--relancer small b { display: inline; font-size: 1em; color: #18181B; }
@media (max-width: 640px) {
  .focus { font-size: 2.6em; }
  .focus--gerer { font-size: 2.1em; }
  .focus--gerer .focus__ligne > span:nth-of-type(2), .focus--gerer .focus__ligne > span:nth-of-type(3), .focus--gerer .tag { display: none; }
  .focus--briefer { font-size: 2.3em; }
  .focus--relancer { width: auto; max-width: 60em; font-size: 2.6em; }
}
@media (prefers-reduced-motion: reduce) { .focus { transition: none; } }