/* Version courte de Web Expansion (26/09/2026 au soir) : uniquement ce qui est propre a cette page.
   Les composants .pu-* sont repris a l'identique de /page-unique/assets/pu.css (meme composant, meme definition) :
   la modale .pu-grand sert ici a montrer les six sites d'exemple.
   Tout le reste vient de ../assets/we.css : on n'y redefinit aucun composant. */

/* ---------- Animations des pages d'exemple : un bouton qui ouvre l'animation en grand ---------- */
.pu-agrandir { width: 100%; padding: 0; border: 0; cursor: zoom-in; text-align: left; }
.pu-loupe { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--black); color: var(--yellow); transition: transform var(--transition); }
.pu-loupe svg { width: 18px; height: 18px; }
.pu-agrandir:hover .pu-loupe { transform: translateY(-2px); }
.pu-agrandir:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }

/* ---------- La modale « en grand » (pattern modale JBC : croix fixe hors de la zone qui défile, scroll invisible) ---------- */
.pu-grand { width: min(1180px, calc(100vw - 28px)); max-height: calc(100dvh - 40px); background: var(--black); color: #fff; }
.pu-grand .modal-scroll { max-height: calc(100dvh - 40px); overflow-y: auto; padding: 22px 22px 26px; scrollbar-width: none; -ms-overflow-style: none; }
.pu-grand .modal-scroll::-webkit-scrollbar { display: none; width: 0; }
.pu-grand .icon-button { z-index: 2; display: grid; place-items: center; background: var(--white); color: var(--black); box-shadow: var(--shadow); }
.pu-grand .icon-button svg { width: 18px; height: 18px; }
.pu-grand-titre { margin: 4px 52px 16px; font-weight: 800; font-size: 1.05rem; line-height: 1.4; text-align: center; }
.pu-grand video { display: block; width: 100%; height: auto; border-radius: var(--r); background: #000; aspect-ratio: 8 / 5; }
.pu-grand-lien { margin-top: 20px; }

/* ---------- L'Agent IA mis en avant : un halo jaune tres fondu derriere le chat ---------- */
.agent-scene { position: relative; isolation: isolate; max-width: 860px; margin: 40px auto 0; }
.agent-scene::before { content: ""; position: absolute; inset: -70px 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 48% 40% at 50% 55%, var(--tint-yellow-line), var(--tint-yellow) 50%, transparent 78%); }





/* ---------- La modale des exemples : deux groupes, une page puis cinq pages ---------- */
.ex-groupe { margin: 6px 0 16px; color: var(--yellow); font-size: 1.1rem; font-weight: 800; text-align: center; }
.exemples + .ex-groupe { margin-top: 38px; }

/* ---------- Les avis Google : ici ils ouvrent leur propre section (sur la page longue, ils suivaient les réalisations,
   d'où la marge haute de .avis-g dans we.css). Julien, 26/09 soir : « trop d'espace, un peu plus rapproché ». ---------- */
.sec > .wrap > #avis-google { margin-top: 0; }

/* ---------- La mention 🔒 sous le chat : même taille que .chat-avis, un peu plus bas (Julien, 26/09 soir) ---------- */
#chatAvis { margin-top: 26px; }

/* ---------- Le bouton ＋ des photos, à gauche du champ (même gabarit que le micro) et les vignettes des photos envoyées ---------- */
.photo-button { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--gray-light); transition: transform var(--transition); }
.photo-button:hover { transform: translateY(-1px); }
.photo-button:disabled { opacity: .45; cursor: default; transform: none; }
.photo-button svg { width: 21px; height: 21px; fill: none; stroke: var(--black); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.msg-photos { display: flex; gap: 8px; padding: 8px; }
.msg-photos figure { position: relative; width: 76px; height: 76px; border-radius: var(--r-sm); overflow: hidden; }
.msg-photos img { width: 100%; height: 100%; object-fit: cover; display: block; }
.msg-photos span { position: absolute; top: 4px; left: 4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--r-pill); background: var(--yellow); color: var(--black); font-size: .72rem; font-weight: 800; line-height: 20px; text-align: center; }

/* ---------- Paliers ---------- */
@media (max-width: 640px) {
    .pu-grand .modal-scroll { padding: 16px 12px 20px; }
    .pu-grand-titre { margin: 6px 48px 14px; font-size: .98rem; }
    .photo-button { width: 36px; height: 36px; }
    .photo-button svg { width: 19px; height: 19px; }
}