/* Ads Expansion (11/10/2026) : uniquement les composants propres à cette page.
   Tout le reste (jetons, boutons, hero, sections, encarts, étapes, chat, prix, avis, FAQ, pied) vient de
   /web-expansion/assets/we.css et court.css, chargées avant : on n'y redéfinit aucun composant.
   Fonds blancs unis, dégradés et grille seulement sur les blocs sombres ou crème (goûts de Julien, 26/09). */

/* ---------- Le visuel du hero : grand, plein cadre, dans le noir du hero ---------- */
.hero-visuel { max-width: 1060px; margin: 52px auto 0; border-radius: var(--r-lg); overflow: hidden; border: 3px solid var(--yellow); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .7); }   /* bord jaune (Julien, 11/10) */
.hero-visuel img { width: 100%; }

/* ---------- Les phrases entendues (organique) : cartes à filet jaune, citation puis étiquette noire ---------- */
.douleurs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; list-style: none; }
.douleur { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; padding: 26px 24px; background: var(--white); border: 1.5px solid var(--yellow); border-radius: var(--r); box-shadow: var(--shadow); transition: opacity .5s ease-out, transform var(--transition); }
.douleur:hover { transform: translateY(-4px); }
.douleur-texte { font-size: 1.05rem; line-height: 1.6; color: var(--dark); }
.douleur-texte em { font-style: normal; font-weight: 700; background: linear-gradient(transparent 62%, var(--yellow-light) 62%); }
.douleur-label { align-self: flex-start; padding: 5px 12px; border-radius: var(--r-sm); background: var(--black); color: var(--yellow); font-size: .8rem; font-weight: 700; }

/* ---------- Les chiffres : grands nombres, la carte « mes pubs » en négatif ---------- */
.chiffres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; list-style: none; }
.chiffre { padding: 28px 22px; background: var(--white); border: 1.5px solid var(--yellow); border-radius: var(--r); box-shadow: var(--shadow); text-align: center; transition: opacity .5s ease-out, transform var(--transition); }
.chiffre:hover { transform: translateY(-4px); }
.chiffre-num { margin-bottom: 10px; font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 900; line-height: 1.15; color: var(--black); }
.chiffre p:last-child { font-size: .93rem; line-height: 1.6; color: var(--text); }
.chiffre--moi { background: var(--degrade-noir); border-color: var(--yellow); }
.chiffre--moi .chiffre-num { color: var(--yellow); }
.chiffre--moi p:last-child { color: #ddd; }
.chiffres-source { max-width: 760px; margin: 28px auto 0; font-size: .8rem; line-height: 1.6; color: var(--gray); text-align: center; }

/* ---------- Le parcours exemple (fictif) : la maquette, puis une phrase ---------- */
.maquette-exemple { max-width: 900px; margin: 44px auto 0; }
.maquette-exemple img { width: 100%; border-radius: var(--r); border: 1.5px solid var(--yellow); box-shadow: var(--shadow-lg); }
.maquette-exemple figcaption { margin-top: 12px; font-size: .88rem; font-style: italic; color: var(--gray); text-align: center; }
.citation { max-width: 680px; margin: 40px auto 0; padding: 26px 30px; border-radius: var(--r); background: var(--black); color: var(--white); text-align: center; }
.citation p { font-size: 1.15rem; font-weight: 700; line-height: 1.55; color: var(--yellow); }
.citation footer { margin-top: 10px; font-size: .88rem; color: #aaa; }

/* ---------- La méthode en parcours fléché (Julien, 11/10 : « des flèches, des pointillés, un truc plus sympa ») :
   5 étapes en ligne, reliées par un trait pointillé jaune et une pointe de flèche ; en colonne sous 1 024 px ---------- */
.parcours { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 30px; list-style: none; counter-reset: pas; }
.pas { position: relative; padding: 26px 14px 22px; border-radius: var(--r); background: var(--tint-yellow); border: 1px solid var(--tint-yellow-line); text-align: center; transition: opacity .5s ease-out, transform var(--transition); }
.pas:hover { transform: translateY(-4px); }
.pas:not(:last-child)::after { content: ""; position: absolute; top: 50px; left: calc(100% + 4px); width: 18px; border-top: 2px dashed var(--yellow); }
.pas:not(:last-child)::before { content: ""; position: absolute; top: 45px; left: calc(100% + 21px); border: 6px solid transparent; border-left: 8px solid var(--yellow); border-right: 0; }
.pas-ic { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--yellow); color: var(--black); }
.pas-ic .ic { width: 26px; height: 26px; }
.pas-num { display: block; margin: 12px 0 4px; font-size: .78rem; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--yellow); }
.pas-num::before { content: "Étape "; }
.pas h3 { margin-bottom: 8px; font-size: 1rem; font-weight: 800; color: var(--white); }
.pas p { font-size: .9rem; line-height: 1.6; color: #ddd; }

/* ---------- FAQ à flèche (règle JBC du 05/10/2026) : droite quand c'est fermé, bas quand c'est ouvert ---------- */
.faq--fleche summary::after { content: none; }
.faq-ic { flex-shrink: 0; width: 20px; height: 20px; color: var(--gray); transition: transform .38s cubic-bezier(.16, 1, .3, 1); }
.faq--fleche details[open] .faq-ic { transform: rotate(90deg); color: var(--black); }

/* ---------- Les avis en mosaïque (Julien, 11/10 : « un carré où rentrent tous les petits carrés, de tailles différentes ») :
   3 colonnes équilibrées par build.py, cartes à la hauteur de leur texte, la dernière de chaque colonne s'étire ---------- */
.avis-mosaique { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; max-width: 1100px; margin: 32px auto 0; text-align: left; }
.avis-colonne { display: flex; flex-direction: column; align-items: stretch; gap: 20px; list-style: none; }
.avis-lien { align-self: flex-start; margin-top: 10px; font-size: .95rem; font-weight: 700; color: var(--dark); text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 3px; text-underline-offset: 4px; }

/* Quadrillage 10 % plus présent sur les pages Ads Expansion (Julien, 15/10/2026 : « on les voit moins ») :
   jetons de we.css et vitrine.css multipliés par 1,1, sur ces pages seulement */
body[data-page="ads-expansion"] { --grille-trait: rgba(17, 17, 17, .066); --grille-trait-clair: rgba(255, 255, 255, .055);
    --v-grille-trait: rgba(17, 17, 17, .066); --v-grille-trait-clair: rgba(255, 255, 255, .055); }

/* Page des pubs version 2 (15/10/2026) : hero réduit au titre, l'Agent IA arrive aussitôt, sur un même fond sombre.
   3e et 4e passes (Julien) : l'illustration du hero bien visible, plus basse et centrée, en « fond d'univers » ; voile fort
   seulement derrière le titre ; halos bleus et jaunes ; quadrillage clair sur toute la zone ; grain de la banque à 12 % ; voiles sombres dégradés derrière le titre et le texte de l'agent, pas d'ombre sur le noir des pastilles jaunes. */
.zone-agent { position: relative; isolation: isolate; overflow: clip; background: #0b0b0b;
    /* 15/10/2026 (Julien, grand écran) : la zone remplit tout le premier écran, contenu centré, pour qu'on ne voie
       jamais le début du bloc suivant sous l'agent */
    min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }
.zone-agent::before { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
    background:
        radial-gradient(ellipse 45% 40% at 8% 55%, rgba(64, 120, 255, .22), transparent 70%),
        radial-gradient(ellipse 45% 40% at 94% 70%, rgba(64, 120, 255, .18), transparent 70%),
        radial-gradient(ellipse 50% 35% at 50% 8%, rgba(255, 214, 0, .10), transparent 70%),
        linear-gradient(180deg, rgba(11, 11, 11, .78) 0%, rgba(11, 11, 11, .45) 22%, rgba(11, 11, 11, .18) 45%, rgba(11, 11, 11, .30) 75%, #0b0b0b 100%),
        url("hero-pub.webp") center 62% / cover no-repeat; }
.zone-agent::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .12; mix-blend-mode: screen;
    background: url("grain-film-screen.webp") center / 600px repeat;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); }
/* le voile du titre s'éteint EXACTEMENT au bord haut et bas de la section (rayon vertical = 50 % pile depuis le
   centre) : avant, il était encore à ~40 % d'opacité au bas du hero et dessinait un trait au-dessus du chat (15/10/2026) */
.hero--court { padding: 44px var(--gutter) 36px; background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(8, 8, 8, .78), rgba(8, 8, 8, .42) 50%, rgba(8, 8, 8, .12) 80%, transparent 100%); }
.hero--court h1 { margin-bottom: 0; text-shadow: 0 2px 18px rgba(0, 0, 0, .55); }
.hero--court h1 .highlight { text-shadow: none; }
.sec--agent-direct { padding-top: 8px; background: transparent; }
.sec--agent-direct.grille::before { background-image: linear-gradient(var(--grille-trait-clair) 1px, transparent 1px), linear-gradient(90deg, var(--grille-trait-clair) 1px, transparent 1px); }
.sec--agent-direct .agent-scene { margin-top: 0; }
.sec--agent-direct .chat { color: var(--dark); }
.sec--agent-direct .chat-avis { color: #cfcabb; }

/* Dernier bloc + pied sur un même fond (15/10/2026, page des pubs V2) : un seul dégradé, plus de couture */
.zone-fin { position: relative; isolation: isolate; background:
    radial-gradient(ellipse 50% 35% at 12% 30%, rgba(255, 214, 0, .07), transparent 70%),
    radial-gradient(ellipse 45% 45% at 92% 65%, rgba(64, 120, 255, .12), transparent 70%),
    linear-gradient(180deg, #151515 0%, #0f0f0f 45%, #090909 100%); }
.zone-fin .final, .zone-fin .site-pied { background: transparent; }

/* ==========================================================================
   Paliers
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .faq-ic { transition: none; }
}

@media (max-width: 1024px) {
    .avis-mosaique { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
    .parcours { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin: 0 auto; gap: 40px; }
    .pas:not(:last-child)::after { top: calc(100% + 6px); left: 50%; width: 0; height: 20px; border-top: 0; border-left: 2px dashed var(--yellow); }
    .pas:not(:last-child)::before { top: calc(100% + 26px); left: calc(50% - 5px); border: 6px solid transparent; border-top: 8px solid var(--yellow); border-bottom: 0; }
    .douleurs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .zone-agent::before { background-position: 0 0, 0 0, 0 0, 0 0, 58% 70%;
        background-image: radial-gradient(ellipse 60% 30% at 0% 50%, rgba(64, 120, 255, .22), transparent 70%), radial-gradient(ellipse 60% 30% at 100% 72%, rgba(64, 120, 255, .18), transparent 70%), radial-gradient(ellipse 70% 25% at 50% 6%, rgba(255, 214, 0, .10), transparent 70%), linear-gradient(180deg, rgba(11, 11, 11, .78) 0%, rgba(11, 11, 11, .4) 20%, rgba(11, 11, 11, .2) 45%, rgba(11, 11, 11, .35) 78%, #0b0b0b 100%), url("hero-pub-768.webp"); }
    .hero--court { padding: 28px var(--gutter) 24px; }
    .hero--court .offer-name { margin-bottom: 12px; }
    .hero--court h1 { font-size: 1.6rem; line-height: 1.45; }
    .sec--agent-direct { padding-top: 4px; }
    .sec--agent-direct .chat { height: 580px; }   /* le message d'accueil se lit en entier, sans défiler, même à 320 px */
    .hero-visuel { margin-top: 40px; border-radius: var(--r); }
    .douleurs, .chiffres { grid-template-columns: minmax(0, 1fr); }
    .douleur { padding: 22px 20px; }
    .citation { padding: 22px 18px; }
    .citation p { font-size: 1.05rem; }
    /* raccourcis du chat tous visibles (Julien, 12/10/2026), au lieu du défilement horizontal de we.css ; en GRILLE DE 2
       depuis le 15/10 (Julien : empilés, ils prenaient la place du message de l'agent, qu'il fallait faire défiler) */
    .choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; overflow: visible; margin: 0 0 12px; padding: 0; }
    .choice { min-height: 48px; padding: 10px 12px; white-space: normal; text-align: center; line-height: 1.3; }
}