/* =========================================================================
   LA BULLE — on visite un site d'exemple SANS quitter celui de Sitero
   -------------------------------------------------------------------------
   Demande de Thibault : « je veux pas que ça les ouvre, je veux qu'on reste
   sur mon site mais que ça ouvre une sorte de grosse bulle où on peut se
   déplacer dans le site tout en étant dans le mien. »

   Donc : un grand panneau qui se pose par-dessus la page, avec le site
   d'exemple dedans, entièrement navigable. On peut y défiler, cliquer sur
   les liens, changer de page — on est toujours sur sitero.

   DEUX CHOIX QUI COMPTENT
   1. Un bouton « Téléphone » bascule l'aperçu en format mobile. Ce n'est pas
      un gadget : c'est l'argument de vente le plus direct de Thibault. Le
      visiteur VOIT que le site s'adapte, il n'a pas à le croire sur parole.
   2. Le déclencheur reste un vrai lien vers le site d'exemple. Sans
      JavaScript, le lien s'ouvre normalement — on ne perd que la bulle,
      jamais l'accès. Une animation ne doit jamais être la seule chose qui
      rend un contenu accessible.
   ========================================================================= */

.bulle{
  position:fixed;inset:0;z-index:9995;
  display:grid;place-items:center;
  padding:clamp(10px,2.4vw,30px);
}
.bulle[hidden]{display:none}

/* Le fond sombre. Il ferme la bulle au clic. */
.bulle__fond{
  position:absolute;inset:0;
  background:rgba(12,12,14,.62);
  opacity:0;transition:opacity .38s var(--e);
  cursor:pointer;
}
.bulle.est-ouverte .bulle__fond{opacity:1}

.bulle__boite{
  position:relative;
  width:min(1180px,100%);height:min(880px,100%);
  display:flex;flex-direction:column;
  background:var(--white);
  border-radius:var(--r-xl);
  box-shadow:0 40px 120px -30px rgba(0,0,0,.5);
  overflow:hidden;
  /* La bulle arrive du fond, comme un objet qu'on approche. Opacité et
     transformation seulement : ce sont les deux propriétés que la carte
     graphique sait composer sans repeindre. */
  opacity:0;transform:translateY(14px) scale(.965);
  transition:opacity .38s var(--e),transform .46s var(--e-out);
}
.bulle.est-ouverte .bulle__boite{opacity:1;transform:none}

/* ---------- la barre du haut ---------- */
.bulle__barre{
  flex:0 0 auto;
  display:flex;align-items:center;gap:16px;
  padding:12px 14px 12px 20px;
  border-bottom:1px solid var(--line);
  background:var(--paper);
}
.bulle__t{
  margin:0;min-width:0;flex:1 1 auto;
  font-size:.95rem;font-weight:620;letter-spacing:-.02em;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.bulle__t small{
  display:block;font-weight:400;font-size:.76rem;color:var(--ink-3);
  letter-spacing:0;margin-top:1px;
}
.bulle__outils{display:flex;align-items:center;gap:10px;flex:0 0 auto}

/* Le sélecteur ordinateur / téléphone */
.bulle__format{
  display:flex;gap:2px;padding:3px;
  background:var(--white);border:1px solid var(--line);border-radius:999px;
}
.bulle__format button{
  appearance:none;border:0;cursor:pointer;
  padding:6px 14px;border-radius:999px;
  font:inherit;font-size:.78rem;font-weight:560;
  color:var(--ink-2);background:transparent;
  transition:background .3s var(--e),color .3s var(--e);
}
.bulle__format button[aria-pressed="true"]{background:var(--ink);color:#fff}
.bulle__format button:hover[aria-pressed="false"]{background:var(--paper)}

.bulle__x{
  appearance:none;border:1px solid var(--line);background:var(--white);
  width:44px;height:44px;border-radius:50%;cursor:pointer;flex:0 0 auto;
  display:grid;place-items:center;
  transition:background .3s var(--e),border-color .3s var(--e),transform .3s var(--e);
}
.bulle__x:hover{background:var(--paper);border-color:var(--ink-3);transform:rotate(90deg)}
.bulle__x svg{width:15px;height:15px;stroke:var(--ink);stroke-width:2;fill:none;stroke-linecap:round}

/* ---------- la scène ---------- */
.bulle__scene{
  flex:1 1 auto;min-height:0;
  display:grid;place-items:center;
  background:
    radial-gradient(120% 90% at 50% 0%,color-mix(in srgb,var(--tint) 7%,transparent),transparent 60%),
    var(--paper);
  padding:0;
  /* 🔴 AUCUNE transition ici. Animer `padding` fait recalculer toute la mise
     en page à chaque image — et comme il y a un site entier dans le cadre,
     c'est lui qu'on refait 60 fois par seconde. C'est la cause n°1 des
     saccades de la bascule Ordinateur / Téléphone. */
}
.bulle__ecran{
  position:relative;
  width:100%;height:100%;
  background:var(--white);
  overflow:hidden;
  /* Idem : ni width, ni height, ni box-shadow en transition. Le changement de
     taille est INSTANTANÉ (un seul recalcul), et c'est un fondu en opacité
     qui rend le passage doux — voir @keyframes bulle-bascule plus bas. */
}
.bulle__if{
  display:block;width:100%;height:100%;border:0;
  background:var(--white);
}

/* La vitre : le calque qui porte le site. On le révèle en fondu quand le
   site a fini d'arriver, jamais avant. */
.bulle__vitre{
  position:absolute;inset:0;
  opacity:0;
  transition:opacity .5s var(--e);
}
.bulle[data-etat="pret"] .bulle__vitre{opacity:1}

/* Format téléphone. On ne change QUE la taille de l'écran : le site à
   l'intérieur se réorganise tout seul, puisque c'est justement ce qu'on
   veut montrer. */
.bulle[data-format="mobile"] .bulle__scene{padding:22px 0}
.bulle[data-format="mobile"] .bulle__ecran{
  width:min(390px,92%);height:100%;
  border-radius:34px;
  box-shadow:0 0 0 9px #1d1d1f,0 26px 60px -20px rgba(0,0,0,.45);
}

/* Le passage d'un format à l'autre : la nouvelle taille est posée d'un coup,
   et l'écran revient en fondu. Opacité + transform uniquement : la carte
   graphique s'en charge seule, la mise en page n'est plus touchée. */
@keyframes bulle-bascule{
  from{opacity:.18;transform:scale(.988)}
  to  {opacity:1;  transform:none}
}
.bulle[data-bascule] .bulle__ecran{
  animation:bulle-bascule .4s var(--e-out) both;
}

/* ---------- l'attente ----------------------------------------------------
   Le site de Yoan pèse 5,5 Mo et fait de la 3D : entre le clic et l'image,
   il se passe forcément un moment. Avant, on voyait un rectangle blanc puis
   ça sautait. Maintenant on occupe ce moment.

   Trois précautions :
   • Le calque n'apparaît qu'après 220 ms. Les trois exemples légers arrivent
     avant : chez eux, aucun message ne clignote, le site est simplement là.
   • Le fantôme, c'est la capture de la carte sur laquelle on vient de
     cliquer. Elle est déjà dans le cache du navigateur : elle s'affiche
     instantanément et l'attente a la couleur du site qui arrive.
   • Le bloc de texte garde toujours la même hauteur (min-height + visibility)
     pour que les messages successifs ne fassent jamais bouger la page.
   ------------------------------------------------------------------------ */
.bulle__attente{
  position:absolute;inset:0;
  display:grid;place-items:center;
  background:var(--white);
  pointer-events:none;
  opacity:0;visibility:hidden;
  transition:opacity .34s var(--e),visibility 0s linear .34s;
}
.bulle[data-etat="charge"] .bulle__attente,
.bulle[data-etat="lent"]   .bulle__attente,
.bulle[data-etat="echec"]  .bulle__attente{
  opacity:1;visibility:visible;
  transition:opacity .34s var(--e) .22s,visibility 0s linear 0s;
}

/* La capture de la carte, très effacée : de la couleur, pas un leurre. */
.bulle__fantome{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:top center;
  opacity:.3;
}
/* En format téléphone, la capture est un plein écran d'ordinateur : elle
   n'aurait aucun sens dans un cadre de 390 px. */
.bulle[data-format="mobile"] .bulle__fantome{display:none}
/* Si ça a échoué, la capture s'efface encore : garder l'image du site sous
   un message qui dit « ça ne s'affiche pas » serait contradictoire. */
.bulle[data-etat="echec"] .bulle__fantome{opacity:.1}

/* Pas de panneau, pas d'encadré : juste le filet et deux lignes posés sur le
   fantôme. Un cadre blanc laisserait voir l'espace vide qu'on réserve pour
   les messages à venir. */
.bulle__patiente{
  position:relative;
  width:min(330px,84%);
  text-align:center;
}

/* Le filet : un trait fin, un segment turquoise qui va et vient. Rien ne
   tourne, rien ne clignote — et c'est un translateX, donc rien à repeindre. */
.bulle__jauge{
  display:block;width:170px;height:2px;margin:0 auto;
  border-radius:999px;background:var(--line);
  overflow:hidden;
}
.bulle__jauge i{
  display:block;width:38%;height:100%;
  border-radius:999px;background:var(--tint);
  transform:translateX(-100%);
  animation:bulle-va 1.55s var(--e) infinite alternate;
}
@keyframes bulle-va{
  from{transform:translateX(-100%)}
  to  {transform:translateX(263%)}   /* 100/38 - 1, le segment va bord à bord */
}
/* Quand ça a échoué, plus rien ne bouge : le filet devient un trait mort. */
.bulle[data-etat="echec"] .bulle__jauge i{
  animation:none;transform:none;width:100%;background:var(--line);
}

.bulle__mot{
  margin:16px 0 0;
  font-size:.86rem;font-weight:560;letter-spacing:-.01em;color:var(--ink);
}
.bulle__aide{
  margin:6px 0 0;min-height:2.6em;
  font-size:.78rem;line-height:1.45;color:var(--ink-3);
}

/* La sortie de secours. Toujours à sa place dans la mise en page (donc rien
   ne bouge quand elle apparaît), mais invisible et hors du clavier tant
   qu'on n'en a pas besoin. */
.bulle__sortie{
  display:inline-flex;align-items:center;gap:7px;
  margin-top:4px;padding:9px 16px;border-radius:999px;
  border:1px solid var(--line);background:var(--white);
  font-size:.79rem;font-weight:600;color:var(--tint);text-decoration:none;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .3s var(--e),visibility 0s linear .3s,
             border-color .3s var(--e);
}
.bulle[data-etat="lent"]  .bulle__sortie,
.bulle[data-etat="echec"] .bulle__sortie{
  opacity:1;visibility:visible;pointer-events:auto;
  transition:opacity .3s var(--e),visibility 0s linear 0s,
             border-color .3s var(--e);
}
.bulle__sortie:hover{border-color:var(--tint)}
.bulle__sortie:focus-visible{outline:2.5px solid var(--tint);outline-offset:3px}
.bulle__sortie::after{
  content:'';width:6px;height:6px;flex:0 0 auto;
  border-top:1.8px solid currentColor;border-right:1.8px solid currentColor;
  transform:rotate(45deg);
}

/* ---------- la mention du bas ---------- */
.bulle__note{
  flex:0 0 auto;margin:0;
  padding:10px 20px;
  border-top:1px solid var(--line);
  background:var(--white);
  font-size:.75rem;color:var(--ink-3);
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
}
.bulle__note::before{
  content:'';width:6px;height:6px;border-radius:50%;
  background:var(--tint);flex:0 0 auto;
}
.bulle__note a{color:var(--ink-2)}

/* Quand la bulle est ouverte, la page derrière ne défile plus. */
html.bulle-ouverte,html.bulle-ouverte body{overflow:hidden}

/* ---------- écrans étroits ---------- */
@media (max-width:720px){
  .bulle{padding:0}
  .bulle__boite{width:100%;height:100%;border-radius:0}
  /* 🔴 Les pages déclarent viewport-fit=cover : en plein écran sur iPhone,
     la barre du haut passerait sous l'horloge et la note du bas sous la
     barre de geste. On réserve la « zone sûre » que le système annonce. */
  .bulle__barre{padding-top:calc(10px + env(safe-area-inset-top))}
  .bulle__note{padding-bottom:calc(10px + env(safe-area-inset-bottom))}
  /* Sur un téléphone, montrer un « format téléphone » dans un téléphone
     n'a aucun sens : l'aperçu est déjà à cette taille. */
  .bulle__format{display:none}
  .bulle__barre{padding:10px 12px 10px 16px}
}

/* ---------- préférences système ---------- */
@media (prefers-reduced-motion:reduce){
  .bulle__fond,.bulle__boite,.bulle__ecran,.bulle__scene,
  .bulle__format button,.bulle__x,
  .bulle__vitre,.bulle__attente,.bulle__sortie{transition:none}
  .bulle__boite{transform:none}
  .bulle__x:hover{transform:none}
  /* Le segment turquoise ne fait plus l'aller-retour : c'est un trait posé,
     à peine appuyé. On reste informé sans que rien ne bouge. */
  .bulle__jauge i{animation:none;transform:none;width:100%;opacity:.5}
  .bulle[data-bascule] .bulle__ecran{animation:none}
  /* L'apparition du calque d'attente reste immédiate, sans retard : sans
     fondu, un retard donnerait juste un blanc plus long. */
  .bulle[data-etat="charge"] .bulle__attente,
  .bulle[data-etat="lent"]   .bulle__attente,
  .bulle[data-etat="echec"]  .bulle__attente{transition:none}
}


/* =========================================================================
   LES CARTES D'EXEMPLE — un vrai site miniature, pas une maquette grise
   -------------------------------------------------------------------------
   La page Exemples montrait trois rectangles gris dans un faux cadre de
   navigateur. Un artisan qui hésite se demande « concrètement, ça ressemble
   à quoi ? » : il n'avait pas la réponse.
   Chaque carte affiche maintenant le VRAI site de démonstration, en
   miniature et vivant, et l'ouvre en grand dans la bulle au clic.

   🔴 L'APERÇU EST UNE IMAGE, PLUS UN SITE VIVANT. Les quatre cartes
   faisaient tourner quatre sites complets EN MÊME TEMPS dans des cadres —
   dont celui de Yoan, qui fait de la 3D. La page saccadait pour cette
   seule raison. Ce sont maintenant des captures prises à 1280 px de large
   (91 Ko en tout au lieu de 6,7 Mo), et le vrai site n'est chargé qu'à
   l'ouverture de la bulle, c'est-à-dire seulement si on le demande.
   ========================================================================= */

.exd{position:relative;margin:0}
.exd__lien{
  display:block;text-decoration:none;color:inherit;
  transition:transform .5s var(--e-out);
}
.exd__lien:hover{transform:translateY(-4px)}

.exd__ecran{
  display:block;position:relative;
  border-radius:var(--r-m);overflow:hidden;
  background:#fff;border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(0,0,0,.04);
  transition:box-shadow .5s var(--e),border-color .4s ease;
}
.exd__lien:hover .exd__ecran{
  box-shadow:0 26px 54px -22px rgba(0,0,0,.3);
  border-color:rgba(0,146,181,.4);
  border-color:color-mix(in srgb,var(--tint) 40%,transparent);
}

/* La barre du faux navigateur : elle situe l'objet en une fraction de
   seconde, on comprend que c'est un site sans avoir à le lire. */
.exd__bar{
  display:flex;align-items:center;gap:6px;
  padding:9px 12px;background:var(--paper);
  border-bottom:1px solid var(--line);
}
.exd__bar i{width:8px;height:8px;border-radius:50%;background:var(--line);display:block}

.exd__vue{display:block;position:relative;overflow:hidden;aspect-ratio:16/12}
.exd__vue img{
  display:block;width:100%;height:100%;object-fit:cover;object-position:top center;
  background:#fff;
}
/* Un voile très léger au repos : la miniature reste un APERÇU, elle ne
   rivalise pas avec le vrai contenu de la page. Elle s'éclaircit au survol. */
.exd__vue::after{
  content:'';position:absolute;inset:0;
  background:rgba(245,245,247,.32);
  transition:opacity .45s var(--e);
}
.exd__lien:hover .exd__vue::after{opacity:0}

.exd__lien h3{margin:18px 0 0;font-size:1.12rem;font-weight:640;letter-spacing:-.025em}
.exd__lien p{margin:8px 0 0;color:var(--ink-2);font-size:.93rem;line-height:1.55}

.exd__pied{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px}
.exd__tag{
  display:inline-block;padding:5px 12px;border-radius:999px;
  background:var(--paper);border:1px solid var(--line);
  font-size:.74rem;font-weight:580;color:var(--ink-2);
}
.exd__go{
  display:inline-flex;align-items:center;gap:7px;
  font-size:.85rem;font-weight:600;color:var(--tint);
}
.exd__go::after{
  content:'';width:6px;height:6px;flex:0 0 auto;
  border-top:1.8px solid currentColor;border-right:1.8px solid currentColor;
  transform:rotate(45deg);
  transition:transform .35s var(--e-out);
}
.exd__lien:hover .exd__go::after{transform:rotate(45deg) translate(2px,-2px)}

.exd__lien:focus-visible{outline:2.5px solid var(--tint);outline-offset:6px;border-radius:var(--r-m)}

@media (prefers-reduced-motion:reduce){
  .exd__lien,.exd__ecran,.exd__vue::after,.exd__go::after{transition:none}
  .exd__lien:hover{transform:none}
}

/* ---------- la carte d'une réalisation RÉELLE ---------- */
/* Elle doit se distinguer au premier coup d'œil des trois démonstrations :
   c'est un vrai client, pas un exemple fictif. Un liseré turquoise et une
   étiquette suffisent — inutile d'en faire une carte à part. */
.exd--reel .exd__ecran{border-color:rgba(0,146,181,.45);
  border-color:color-mix(in srgb,var(--tint) 45%,transparent)}
.exd__reel{
  display:inline-block;vertical-align:middle;margin-left:9px;
  padding:3px 9px;border-radius:999px;
  background:var(--tint);color:#fff;
  font-size:.62rem;font-weight:650;letter-spacing:.1em;text-transform:uppercase;
}
.exd--reel .exd__tag{border-color:rgba(0,146,181,.4);
  border-color:color-mix(in srgb,var(--tint) 40%,transparent);color:var(--tint)}