/* Généré par tools/build-wp.mjs : styles de toutes les versions des animations (chaque version a sa propre classe). */
/* ===== accueil-chatgpt/v1-original ===== */
/* accueil-chatgpt · v1-original — aucun style propre : utilise le socle des simulations de assets/css/blocks.css (ne pas modifier ce socle sans vérifier la v1). */

/* ===== accueil-chatgpt/v2-chatgpt ===== */
/* accueil-chatgpt · v2-chatgpt — habillage « façon ChatGPT » dans la charte.
   Même disposition que la v1 (logo, question, réponse en liste, champ de saisie). Tout est préfixé .csim
   pour ne jamais toucher aux autres simulations. Couleurs : uniquement les tokens de la charte. */

/* En-tête : logo officiel (fourni par Nathan) à la place du mot « ChatGPT » */
.csim .csim__brand { flex: none; }
.csim__logo { display: block; height: 26px; width: auto; }

/* Question : bulle grise pleine, sans bordure, comme dans ChatGPT */
.csim .csim__ask { display: block; border: 0; background: var(--color-surface); border-radius: 22px; padding: 12px 20px; line-height: 1.45; } /* bloc : le curseur suit le texte même sur 2 lignes */

/* Réponse : texte courant aéré, numéros discrets ; le n°1 reste mis en avant en pêche (D12) */
.csim .csim__answer { gap: 12px; font-size: 17px; line-height: 1.5; }
.csim .answer__num { font-weight: var(--font-weight-strong); color: var(--color-ink); }
.csim .answer__item--first .answer__num { color: var(--color-primary-deep); }
.csim .answer__tag { border-radius: var(--radius-pill); padding: 2px 9px; }

/* Champ de saisie : « + » à gauche, micro et bouton vocal rond à droite, ombre douce */
.csim .csim__input {
	display: flex; align-items: center; gap: 12px;
	padding: 8px 8px 8px 14px; min-height: 52px;
	border: 1px solid var(--color-line); border-radius: 28px;
	box-shadow: 0 1px 6px color-mix(in srgb, var(--color-ink) 12%, transparent);
	color: var(--color-muted);
}
.csim__placeholder { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 16px; }
.csim__icon { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--color-ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.csim__voice { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--color-primary); }
.csim__voice svg { width: 24px; height: 24px; fill: none; stroke: var(--color-base); stroke-width: 2.2; stroke-linecap: round; }

@media (max-width: 640px) {
	.csim__logo { height: 22px; }
	.csim .csim__answer { font-size: 15px; }
	.csim .csim__input { min-height: 46px; gap: 8px; padding: 6px 6px 6px 10px; }
	.csim__placeholder { font-size: 14px; }
	.csim__icon { width: 20px; height: 20px; }
	.csim__voice { width: 32px; height: 32px; }
}

/* ===== accueil-google/v1-original ===== */
/* accueil-google · v1-original — aucun style propre : utilise le socle des simulations de assets/css/blocks.css (ne pas modifier ce socle sans vérifier la v1). */

/* ===== accueil-google/v2-google ===== */
/* accueil-google · v2-google — habillage « façon Google » dans la charte.
   Même disposition que la v1 (barre logo + champ, 3 résultats). Tout est préfixé .gsim
   pour ne jamais toucher aux autres simulations. Couleurs : uniquement les tokens de la charte. */

/* Barre : logo officiel (fourni par Nathan) à la place du mot « Google » */
.gsim .gsim__brand { flex: none; }
.gsim__logo { display: block; height: 29px; width: auto; }

/* Champ de recherche : loupe à gauche, micro + appareil photo à droite, ombre douce */
.gsim .gsim__search {
	gap: 12px; padding: 0 16px; min-height: 48px;
	border: 1px solid var(--color-line);
	box-shadow: 0 1px 6px color-mix(in srgb, var(--color-ink) 16%, transparent);
	transition: box-shadow var(--duration-base);
}
.gsim:hover .gsim__search { box-shadow: 0 2px 10px color-mix(in srgb, var(--color-ink) 22%, transparent); }
.gsim__query { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; color: var(--color-ink); }
.gsim__tools { display: flex; align-items: center; gap: 14px; flex: none; }
.gsim__icon { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--color-muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Résultats : hiérarchie typographique d'une page de résultats (titre, ligne principale, détail) */
.gsim .gsim__result { padding: 14px 18px; }
.gsim .result__title { font-size: 20px; font-weight: var(--font-weight-medium); line-height: 1.3; color: var(--color-primary); }
.gsim .result--you .result__title { font-size: 20px; font-weight: var(--font-weight-strong); }
.gsim__line { font-size: 15px; color: var(--color-ink); line-height: 1.5; }
.gsim .result__meta { font-size: 14px; line-height: 1.5; }
.gsim .result__label { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }

@media (max-width: 640px) {
	.gsim__logo { height: 22px; }
	.gsim .gsim__search { gap: 8px; padding: 0 12px; min-height: 42px; }
	.gsim__tools { gap: 10px; }
	.gsim__icon { width: 18px; height: 18px; }
	.gsim .result__title, .gsim .result--you .result__title { font-size: 17px; }
	.gsim__line { font-size: 14px; }
	.gsim .result__meta { font-size: 13px; }
}
@media (max-width: 380px) {
	.gsim__tools svg:last-child { display: none; } /* place limitée : on garde la loupe et le micro */
}

/* ===== sea-gea-chatgpt/v1-original ===== */
/* sea-gea-chatgpt · v1-original — aucun style propre : utilise le socle des simulations de assets/css/blocks.css (ne pas modifier ce socle sans vérifier la v1). */

/* ===== sea-gea-chatgpt/v2-chatgpt ===== */
/* @use accueil-chatgpt/v2-chatgpt */
/* sea-gea-chatgpt · v2-chatgpt — même habillage « façon ChatGPT » que l'accueil (classes .csim, chargées par la ligne @use ci-dessus).
   Disposition et textes de la v1 inchangés : pas de champ de saisie (absent du wireframe SEA & GEA). */
.csim .answer__item--sponsored { border-radius: var(--radius-lg); padding: 12px 16px; }

/* ===== sea-google/v1-original ===== */
/* sea-google · v1-original — aucun style propre : utilise le socle des simulations de assets/css/blocks.css (ne pas modifier ce socle sans vérifier la v1). */

/* ===== sea-google/v2-google ===== */
/* @use accueil-google/v2-google */
/* sea-google · v2-google — même habillage « façon Google » que l'accueil (classes .gsim, chargées par la ligne @use ci-dessus).
   Disposition et textes de la v1 inchangés : annonce « Sponsorisé » en tête, deux résultats simples. */
.gsim .result__label--ad { font-size: 13px; letter-spacing: 0; text-transform: none; font-weight: var(--font-weight-heavy); color: var(--color-ink); }
.gsim .gsim__result--plain { font-size: 16px; color: var(--color-muted); }
@media (max-width: 640px) {
	.gsim .gsim__result--plain { font-size: 14px; }
}

/* ===== sea-youtube/v1-original ===== */
/* sea-youtube · v1-original — aucun style propre : utilise le socle des simulations de assets/css/blocks.css (ne pas modifier ce socle sans vérifier la v1). */

/* ===== sea-youtube/v2-youtube ===== */
/* sea-youtube · v2-youtube — habillage « façon YouTube » dans la charte.
   Même disposition et mêmes textes que la v1 (barre logo + recherche, vidéo sponsorisée, autre vidéo). Tout est préfixé .ysim.
   Couleurs : uniquement les tokens de la charte (pas le rouge YouTube, sauf dans le logo officiel). */

/* Barre : logo officiel (fourni par Nathan), champ + bouton loupe accolé, micro rond — comme la barre YouTube */
.ysim .ysim__brand { flex: none; }
.ysim__logo { display: block; height: 26px; width: auto; }
.ysim__box { flex: 1; min-width: 0; display: flex; align-items: stretch; }
.ysim .ysim__search { min-height: 44px; padding: 0 18px; border: 1px solid var(--color-line); border-right: 0; border-radius: var(--radius-pill) 0 0 var(--radius-pill); box-shadow: inset 0 1px 2px color-mix(in srgb, var(--color-ink) 10%, transparent); }
.ysim__query { min-width: 0; overflow: hidden; white-space: nowrap; color: var(--color-ink); }
.ysim__go { flex: none; width: 62px; display: grid; place-items: center; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: 0 var(--radius-pill) var(--radius-pill) 0; }
.ysim__mic { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--color-surface); }
.ysim__icon { width: 21px; height: 21px; fill: none; stroke: var(--color-ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Vidéo sponsorisée : bouton lecture arrondi (forme YouTube, couleur de la charte), chaîne avec avatar, bouton d'action plein */
.ysim .video-result__thumb { border-radius: var(--radius-md); }
.ysim .ysim__play { width: 52px; height: 36px; border-radius: 11px; background: var(--color-base); box-shadow: 0 4px 14px color-mix(in srgb, var(--color-primary-deep) 40%, transparent); }
.ysim .ysim__play svg { width: 18px; height: 18px; fill: var(--color-primary); margin-left: 2px; }
.ysim .video-result__info { gap: 6px; }
.ysim .result__label--ad { font-size: 13px; }
.ysim .video-result__title { font-size: 20px; font-weight: var(--font-weight-medium); color: var(--color-primary-deep); }
.ysim__channel { display: inline-flex; align-items: center; gap: 8px; }
.ysim__avatar { width: 22px; height: 22px; border-radius: 50%; background: var(--color-primary); flex: none; }
.ysim .ysim__cta { white-space: nowrap; border: 0; background: var(--color-primary); color: var(--color-base); padding: 7px 16px; }
.ysim .video-result--plain .video-result__thumb { border-radius: var(--radius-md); }

@media (max-width: 640px) {
	.ysim .mock__bar { gap: 10px; }
	.ysim__logo { height: 20px; }
	.ysim .ysim__search { min-height: 40px; padding: 0 12px; }
	.ysim__go { width: 44px; }
	.ysim__mic { display: none; } /* place limitée : on garde le champ et la loupe */
	.ysim__icon { width: 18px; height: 18px; }
	.ysim .ysim__play { width: 40px; height: 28px; border-radius: 9px; }
	.ysim .ysim__play svg { width: 14px; height: 14px; }
	.ysim .video-result__title { font-size: 16px; }
	.ysim__avatar { width: 18px; height: 18px; }
	.ysim .video-result { grid-template-columns: 104px 1fr; }
	.ysim .ysim__cta { padding: 5px 11px; font-size: 12.5px; }
}

/* ===== solutions-reception/v1-original ===== */
/* solutions-reception · v1-original — aucun style propre : utilise le socle des simulations de assets/css/blocks.css (ne pas modifier ce socle sans vérifier la v1). */