/* ==========================================================================
   Web Expansion V4 · la feuille commune
   (page de vente, générateur de maquette, cockpit de Julien ; l'espace
   client la charge aussi, puis sa propre feuille espace.css)

   23/09/2026, consigne de Julien : « quelque chose d'uniforme, avec le même
   style que les pages de vente de l'agent IA ». Les jetons, les sections, les
   cartes, la carte prix et les boutons reprennent EXACTEMENT ceux de
   agent-ia-complet.html (noir #111, jaune #FFD600, gris clair #F3F4F6,
   Inter 800/900, cartes à bord de 3 px qui s'allume en jaune au survol).

   Discipline CSS JBC : jetons en tête, une définition par composant, zéro
   !important hors prefers-reduced-motion, media queries regroupées en fin de
   feuille (un bloc par palier : 1024, 640).
   ========================================================================== */

/* ---------- Inter, auto-hébergée ---------- */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/inter-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/inter-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/inter-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/inter-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: swap; src: url('fonts/inter-latin-800-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 900; font-display: swap; src: url('fonts/inter-latin-900-normal.woff2') format('woff2'); }

/* ---------- Jetons ---------- */
:root {
    --yellow: #FFD600;
    --yellow-light: #FFF8D6;
    --yellow-dark: #E6C200;
    --black: #111111;
    --dark: #1A1A1A;
    --gray: #6B7280;
    --gray-light: #F3F4F6;
    --creme: #FBF7EA;        /* fonds de sections « gris » devenus crème légèrement jaune (Julien, 23/09 soir) */
    --line: #E5E7EB;
    --text: #555555;
    --white: #FFFFFF;
    --ok: #22A559;
    --danger: #C62828;

    --tint-yellow: rgba(255, 214, 0, .08);
    --tint-yellow-line: rgba(255, 214, 0, .3);
    --tint-white: rgba(255, 255, 255, .08);
    --tint-white-line: rgba(255, 255, 255, .15);

    --r-sm: 8px;
    --r: 16px;
    --r-lg: 24px;
    --r-pill: 999px;

    --shadow: 0 4px 24px rgba(0, 0, 0, .06);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, .1);

    --transition: .2s ease-out;
    --transition-lent: .6s cubic-bezier(.4, 0, .2, 1);
    --transition-carrousel: .9s cubic-bezier(.45, 0, .2, 1);   /* rotation fluide du hero (Julien, 23/09 soir) */
    --gutter: 20px;
    /* matière (Julien, 23/09 : « texture grille légère par moment, dégradés dans les noirs ») */
    --degrade-noir: radial-gradient(ellipse 60% 55% at 12% 8%, rgba(255, 214, 0, .08), transparent 70%), radial-gradient(ellipse 45% 70% at 100% 45%, rgba(64, 120, 255, .10), transparent 70%), radial-gradient(ellipse 55% 60% at 88% 100%, rgba(255, 214, 0, .045), transparent 70%), linear-gradient(160deg, #1d1d1d 0%, #111111 45%, #070707 100%);
    --grille-trait: rgba(17, 17, 17, .06);
    --papier: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .4 0 0 0 0 .3 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)' opacity='.09'/%3E%3C/svg%3E");
    --grille-trait-clair: rgba(255, 255, 255, .05);
}

/* ---------- Base ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { overscroll-behavior: none; overflow-x: hidden; scrollbar-gutter: stable; scroll-padding-top: 16px; }
body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; color: var(--black); background: var(--white); line-height: 1.6; overflow-x: clip; display: flex; flex-direction: column; min-height: 100dvh; -webkit-tap-highlight-color: transparent; }
main { flex: 1 0 auto; }
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
input, select, textarea { font: inherit; font-size: 16px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.br-mobile { display: none; }
.wrap { max-width: 1100px; margin: 0 auto; }
.wrap-md { max-width: 800px; margin: 0 auto; }

/* Bandeau « maquette de travail » (preview uniquement) */

/* ---------- Apparitions au scroll (reprises de agent-ia-complet) ---------- */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .5s ease-out, transform .5s ease-out; }
.reveal.visible { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: .08s; }
.reveal-delay-2 { transition-delay: .16s; }
.reveal-delay-3 { transition-delay: .24s; }
.hero-anim { opacity: 0; transform: translateY(30px); animation: heroFadeUp .45s cubic-bezier(.16, 1, .3, 1) forwards; }
.hero-anim-1 { animation-delay: .1s; }
.hero-anim-2 { animation-delay: .22s; }
.hero-anim-3 { animation-delay: .34s; }
.hero-anim-4 { animation-delay: .46s; }
@keyframes heroFadeUp { from { opacity: 0; transform: translateY(30px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes pop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
@keyframes pageIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }

/* ---------- Boutons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--yellow); color: var(--black); border: 2px solid var(--yellow); padding: 16px 34px; border-radius: var(--r-pill); font-size: 1.05rem; font-weight: 700; line-height: 1.3; text-align: center; text-decoration: none; transition: transform var(--transition), background var(--transition), border-color var(--transition), color var(--transition); }
.btn:hover { transform: translateY(-3px); }
.btn:disabled { opacity: .55; cursor: wait; transform: none; }
.btn-noir { background: var(--black); border-color: var(--black); color: var(--yellow); }
.btn-ghost { background: transparent; border-color: var(--black); color: var(--black); }
/* au survol, un bouton se soulève, sa couleur ne change jamais (Julien, 23/09) */
.btn-ghost:hover { background: transparent; color: var(--black); }
.btn-clair { background: transparent; border-color: var(--yellow); color: #fff; }
.btn-clair:hover { border-color: var(--yellow); color: #fff; }
.btn-sm { padding: 11px 22px; font-size: .95rem; }
.btn-big { padding: 18px 40px; font-size: 1.12rem; }
.link-btn { background: none; border: 0; padding: 6px 2px; font-size: .95rem; font-weight: 600; color: var(--black); text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.cta-note { display: block; margin-top: 14px; font-size: .88rem; font-style: italic; color: #999; }

/* ---------- Logo (barre du générateur) ---------- */
.tete-logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.02rem; line-height: 1.2; text-decoration: none; color: var(--black); }
.tete-logo img { width: 40px; height: 40px; flex-shrink: 0; }

/* ---------- Hero sombre ---------- */
.hero { position: relative; isolation: isolate; overflow-x: clip; background: var(--degrade-noir); color: #fff; padding: 76px var(--gutter) 72px; text-align: center; }
.offer-name { display: block; font-size: 1rem; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: var(--yellow); margin-bottom: 26px; }
.hero h1 { font-size: clamp(1.9rem, 4.6vw, 3.1rem); font-weight: 900; line-height: 1.55; max-width: 860px; margin: 0 auto 30px; }
.highlight { background: var(--yellow); color: var(--black); padding: 2px 14px; border-radius: 6px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hero-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 auto 30px; max-width: 820px; list-style: none; }
.hero-tag { background: var(--tint-white); border: 1px solid var(--tint-white-line); border-radius: var(--r-pill); padding: 8px 18px; font-size: .92rem; font-weight: 500; color: #ddd; }
.hero .subtitle { font-size: 1.15rem; line-height: 1.7; max-width: 660px; margin: 0 auto 34px; }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
/* Carrousel en profondeur (Julien, 23/09 : « fluide, que les cartes passent bien les unes par-dessus les autres ») :
   les cartes reculent dans l'espace au lieu de changer de calque, le navigateur les trie en continu,
   donc aucune bascule de premier plan. Cartes opaques, les voisines sont seulement assombries. */
.hero-carrousel { position: relative; max-width: 1080px; aspect-ratio: 1080 / 430; margin: 56px auto 0; }   /* 2D + z-index (23/09 soir) : en 3D, deux cartes se croisaient à la même profondeur et se mélangeaient */
.hc-item { position: absolute; top: 0; left: 50%; width: 56%; border-radius: var(--r); overflow: hidden; border: 1px solid var(--tint-white-line); box-shadow: 0 30px 80px rgba(0, 0, 0, .55); background: #EDEAE4; transform: translateX(-50%) scale(.61); opacity: 0; z-index: 1; cursor: pointer; transition: transform var(--transition-lent); }
/* Voile sombre des voisines : un calque dans la carte, jamais un filter (un filter aplatit la 3D sur Safari) */
.hc-item::after { content: ""; position: absolute; inset: 0; z-index: 2; background: var(--black); opacity: .5; pointer-events: none; }
/* Rotation en fondu (Julien, 26/09/2026 : « l'autre image passe par-dessus, ça ne tourne pas correctement, trouve quelque chose de plus fin et plus propre ») :
   les trois cartes ne bougent plus. Chacune empile toutes les images, et seule la visible (.on) change, en fondu enchaîné :
   plus aucune carte ne traverse ni ne passe devant une autre. La première image donne la hauteur, les autres se posent dessus. */
.hc-item img { display: block; width: 100%; height: auto; opacity: 0; transition: opacity var(--transition-carrousel), transform 1.6s cubic-bezier(.2, .7, .2, 1); }
.hc-item img + img { position: absolute; inset: 0; height: 100%; object-fit: cover; }
.hc-item img.on { opacity: 1; }
.hc-item[data-pos="0"] img { transform: scale(1.025); }
.hc-item[data-pos="0"] img.on { transform: scale(1); }   /* l'image qui arrive au centre se pose doucement */
.hc-item[data-pos="0"] { transform: translateX(-50%) scale(1); opacity: 1; z-index: 3; }
.hc-item[data-pos="0"]::after { opacity: 0; }
.hc-item[data-pos="0"]:hover { transform: translateX(-50%) translateY(-8px) scale(1); }   /* léger soulèvement au survol de la carte du milieu */
.hc-item[data-pos="1"] { transform: translateX(9%) scale(.745); opacity: 1; z-index: 2; }
.hc-item[data-pos="-1"] { transform: translateX(-109%) scale(.745); opacity: 1; z-index: 2; }
.hc-points { display: flex; justify-content: center; gap: 4px; margin-top: 14px; }
.hc-points button { width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.hc-points button::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--tint-white-line); transition: width var(--transition), background var(--transition); }
.hc-points button.is-on::before { width: 24px; border-radius: var(--r-pill); background: var(--yellow); }
.places { display: inline-block; padding: 7px 16px; border-radius: var(--r-pill); background: var(--black); color: var(--yellow); font-size: .92rem; font-weight: 700; line-height: 1.45; }
/* Places restantes (Julien, 23/09) : rectangle rouge, texte blanc, sous la ligne « Gratuit · … », détaché des boutons */
.hero-places { margin: 26px auto 0; border-radius: var(--r-sm); background: var(--danger); color: var(--white); }
.hero-caption { display: block; margin-top: 18px; font-size: .85rem; font-style: italic; color: #888; }

/* ---------- Sections ---------- */
.sec { padding: 80px var(--gutter); background: var(--white) var(--papier); }   /* texture papier légère sur les blancs */
.sec-gris { background: var(--creme) var(--papier); }
.sec-noir { position: relative; isolation: isolate; background: var(--degrade-noir); color: #fff; }
/* Grille légère, posée « par moment » (classe .grille sur la section), fondue sur les bords */
.grille { position: relative; isolation: isolate; }
.grille::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(var(--grille-trait) 1px, transparent 1px), linear-gradient(90deg, var(--grille-trait) 1px, transparent 1px); background-size: 44px 44px; background-position: center top; -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 45%, #000 20%, transparent 85%); mask-image: radial-gradient(ellipse 75% 70% at 50% 45%, #000 20%, transparent 85%); }
.hero.grille::before, .sec-noir.grille::before { background-image: linear-gradient(var(--grille-trait-clair) 1px, transparent 1px), linear-gradient(90deg, var(--grille-trait-clair) 1px, transparent 1px); }
.sec h2 { font-size: clamp(1.5rem, 3.5vw, 2.2rem); font-weight: 800; line-height: 1.3; text-align: center; margin-bottom: 16px; }
.sec h2 span { display: inline-block; margin-top: 8px; padding: 2px 12px; border-radius: 6px; background: var(--black); color: var(--yellow); }
.sec-noir h2 span { background: var(--yellow); color: var(--black); }
.intro { font-size: 1.1rem; font-style: italic; line-height: 1.6; color: var(--text); text-align: center; max-width: 680px; margin: 0 auto 48px; }
.sec-noir .intro { color: #bbb; }
.punch-wrap { text-align: center; }
.punch { display: inline-block; margin-top: 40px; padding: 18px 28px; border-radius: 14px; background: var(--black); color: var(--yellow); font-size: 1.12rem; font-weight: 800; line-height: 1.5; }

/* ---------- Pastille noire à texte jaune (étiquettes) ---------- */
/* La tuile jaune qui porte une icône Tabler, même geste que les pages de proposition (Julien, 23/09) */
/* L'encart « l'esprit, pas la copie » sous les maquettes : fond jaune, texte noir (Julien, 23/09) */
.note-esprit { max-width: 640px; margin: 0 auto 26px; padding: 14px 22px; border-radius: var(--r); background: var(--yellow); color: var(--black); font-weight: 600; line-height: 1.55; text-align: center; }
.ico-tuile { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px; border-radius: 13px; background: var(--yellow-light); color: var(--black); }
.ico-tuile .ic { width: 24px; height: 24px; }
.tag { display: inline-block; padding: 4px 11px; border-radius: var(--r-sm); background: var(--black); color: var(--yellow); font-size: .75rem; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; }

/* ---------- Étapes numérotées ---------- */
.etapes { display: grid; gap: 20px; max-width: 800px; margin: 0 auto; list-style: none; counter-reset: etape; }
.etape { display: flex; align-items: flex-start; gap: 20px; padding: 26px 28px; background: var(--white); border: 1.5px solid var(--yellow); border-radius: var(--r); box-shadow: var(--shadow); transition: opacity .5s ease-out, border-color var(--transition), transform var(--transition), box-shadow var(--transition); counter-increment: etape; }
.etape:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.etape::before { content: counter(etape); flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%; background: var(--yellow); color: var(--black); font-size: 1.2rem; font-weight: 900; display: grid; place-items: center; }
.etape-tete { display: flex; align-items: center; gap: 14px; margin: 2px 0 10px; }
.etape h3 { font-size: 1.1rem; font-weight: 700; line-height: 1.4; }
.etape p { font-size: .95rem; line-height: 1.6; color: var(--text); }
.etape .gratuit { display: inline-block; margin-top: 10px; padding: 3px 10px; border-radius: var(--r-sm); background: var(--yellow-light); color: var(--black); font-size: .75rem; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; }

/* ---------- Métiers (cartes à bord 3 px qui s'allume en jaune, comme agent-ia) ---------- */
.metiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; list-style: none; }
.metier { display: flex; flex-direction: column; justify-content: center; background: var(--white); border: 1.5px solid var(--yellow); box-shadow: var(--shadow); border-radius: var(--r); padding: 26px 22px; transition: opacity .5s ease-out, border-color var(--transition), transform var(--transition), box-shadow var(--transition); }
.metier:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.metier .ico-tuile { margin-bottom: 14px; }
.metier h3 { font-size: 1.1rem; font-weight: 800; margin-bottom: 6px; }
.metier p { font-size: .95rem; line-height: 1.6; color: var(--text); }
/* Les cartes métiers en négatif : fond noir, texte blanc, filet jaune (Julien, 23/09) */
.metiers-noir .metier { position: relative; isolation: isolate; overflow: hidden; background: var(--black) right center / cover no-repeat; color: var(--white); }
/* Fond qui illustre le métier, à peine présent (Julien, 24/09 : « des fonds légèrement présents illustrant les corps de métiers ») :
   voile noir plein à gauche sous le texte, qui laisse deviner la nature morte à droite. Images GPT Image, assets/metiers/. */
.metiers-noir .metier::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(17, 17, 17, .9) 22%, rgba(17, 17, 17, .5) 58%, rgba(17, 17, 17, .12) 100%); }   /* fonds plus visibles (Julien, 24/09) */
.metiers-noir .metier p { color: #ccc; }
.metiers-noir .ico-tuile { background: var(--yellow); }

/* ---------- Trois sites d'exemple (Julien, 23/09 soir) : carte à filet jaune, capture du haut du site,
   pastille « Exemple fictif », bouton qui se soulève sans ombre ni changement de couleur, maquette d'origine en dessous ---------- */
.exemples { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; list-style: none; }
.exemple { display: flex; flex-direction: column; gap: 12px; }
.exemple-carte { display: flex; flex-direction: column; flex: 1; background: var(--white); border: 2px solid var(--yellow); border-radius: 18px; padding: 12px 12px 18px; text-decoration: none; color: var(--black); transition: transform var(--transition); }
.exemple-carte:hover { transform: translateY(-4px); }
.exemple-shot { position: relative; border-radius: 10px; overflow: hidden; aspect-ratio: 8 / 5; background: var(--gray-light); }
.exemple-shot img, .exemple-shot video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.exemple-pastille { position: absolute; right: 10px; bottom: 10px; padding: 4px 10px; border-radius: var(--r-sm); background: var(--black); color: var(--yellow); font-size: .72rem; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; }
.exemple-tete { display: flex; align-items: center; gap: 12px; margin: 16px 6px 16px; }
.exemple-tete h3 { font-size: 1.1rem; font-weight: 800; line-height: 1.3; }
.exemple-tete p { font-size: .9rem; line-height: 1.45; color: var(--gray); }
.exemple-btn { align-self: center; margin-top: auto; }
.exemple-carte:hover .exemple-btn { transform: translateY(-3px); }
.exemple-maquette { display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; border: 2px solid var(--yellow); border-radius: var(--r); background: var(--yellow); text-decoration: none; color: var(--black); font-size: .85rem; line-height: 1.45; transition: transform var(--transition); }
.exemple-maquette:hover { transform: translateY(-2px); }
.exemple-maquette img { flex: 0 0 104px; width: 104px; border-radius: 6px; border: 1px solid var(--line); }
.exemple-maquette b { color: var(--black); }
.exemples-note { margin-top: 28px; font-size: .88rem; font-style: italic; color: var(--gray); text-align: center; }

/* ---------- Réalisations sur mesure (sites clients livrés) ---------- */
.reals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; list-style: none; }
.real { display: block; height: 100%; background: var(--white); border: 2px solid var(--yellow); border-radius: 18px; padding: 12px; text-decoration: none; color: var(--black); transition: transform var(--transition), box-shadow var(--transition); }
.real:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.reals > li:last-child:nth-child(3n + 1) { grid-column: 2; }   /* 7e site seul sur sa rangée : centré */
.real-shot { border-radius: 10px; overflow: hidden; aspect-ratio: 5 / 3; background: var(--gray-light); }
.real-shot img, .real-shot video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .4s ease-out; }
.real:hover .real-shot img, .real:hover .real-shot video { transform: scale(1.05); }
.real-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 14px 6px 2px; }
.real-tete h3 { font-size: 1.1rem; font-weight: 800; line-height: 1.3; }
.real-lien { flex-shrink: 0; padding: 4px 12px; border-radius: var(--r-pill); background: var(--yellow); font-size: .78rem; font-weight: 700; opacity: 0; transition: opacity var(--transition); }
.real:hover .real-lien { opacity: 1; }
.real p { margin: 0 6px 6px; font-size: .9rem; color: var(--gray); }

/* ---------- Qui fait ton site : Julien, photo sur fond jaune ---------- */
.julien { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 64px; align-items: center; }
.julien-photos { position: relative; display: grid; grid-template-columns: 1.15fr 1fr; grid-template-rows: auto auto; gap: 18px; }
.julien-photo { position: relative; margin: 0; overflow: hidden; border-radius: var(--r-lg); box-shadow: var(--shadow-lg); background: var(--white); transition: transform var(--transition-lent); }
.julien-photos:hover .julien-photo--main { transform: translate(-14px, 6px) rotate(-2deg); }
.julien-photos:hover .julien-photo--famille { transform: translate(14px, -12px) rotate(2deg); }
.julien-photos:hover .julien-photo--atelier { transform: translate(18px, 12px) rotate(1.5deg); }
.julien-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.julien-photo--main { grid-row: 1 / 3; aspect-ratio: 4 / 5.4; }
.julien-photo--famille { aspect-ratio: 4 / 3.4; }
.julien-photo--atelier { aspect-ratio: 4 / 4.2; }
.julien-photo--atelier img { object-position: center 20%; }
.julien-texte h2 { text-align: left; margin-bottom: 22px; }
.julien-texte p { font-size: 1.1rem; line-height: 1.7; color: var(--text); margin-bottom: 14px; }
.julien-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; list-style: none; }
.julien-tags li { padding: 8px 15px; border: 2px solid var(--yellow); border-radius: var(--r-pill); background: var(--black); color: var(--yellow); font-size: .9rem; font-weight: 700; }
.julien-appel { margin-top: 26px; border-radius: 12px; }
.julien-reseaux { margin-top: 30px; padding-top: 26px; border-top: 2px solid var(--line); }
.julien-reseaux p { margin-bottom: 16px; font-weight: 700; color: var(--black); }
.julien-reseaux ul { display: flex; flex-wrap: wrap; gap: 12px 22px; list-style: none; }
.julien-reseaux a { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; color: var(--black); font-weight: 700; text-decoration: none; transition: transform var(--transition); }
.julien-reseaux a:hover { transform: translateY(-2px); }
.julien-reseaux .rond { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--black); color: var(--white); }
.julien-reseaux .rond--ig { background: radial-gradient(circle at 30% 107%, #FDF497 0%, #FDF497 5%, #FD5949 45%, #D6249F 60%, #285AEB 90%); }
.julien-reseaux .rond--yt { background: linear-gradient(135deg, #FF4E45 0%, #FF0000 55%, #C4000A 100%); }
.julien-reseaux .rond--li { background: linear-gradient(135deg, #2E8BE6 0%, #0A66C2 55%, #004182 100%); }
.julien-reseaux svg { width: 26px; height: 26px; }

/* ---------- Carte prix (identique à agent-ia : noir, bord jaune 3 px) ---------- */
.prix-carte { max-width: 620px; margin: 0 auto; background: var(--black); color: #fff; border: 3px solid var(--yellow); border-radius: var(--r-lg); padding: 44px 36px; text-align: center; }
.prix-label { font-size: .9rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--yellow); margin-bottom: 10px; }
.prix-montant { font-size: clamp(2.4rem, 6vw, 3.2rem); font-weight: 900; line-height: 1.1; margin-bottom: 8px; }
.prix-montant small { font-size: .42em; font-weight: 700; color: #ccc; }
.prix-detail { font-size: 1rem; font-style: italic; color: #bbb; margin-bottom: 26px; }
.prix-liste { list-style: none; display: grid; gap: 12px; max-width: 440px; margin: 0 auto 30px; text-align: left; }
.prix-liste li { position: relative; padding-left: 32px; font-size: 1rem; line-height: 1.5; color: #eee; }
.prix-liste li::before { content: '✅'; position: absolute; left: 0; top: 0; }
.prix-temps { max-width: 480px; margin: 0 auto 28px; padding: 16px 20px; border-radius: 14px; background: var(--tint-yellow); border: 1px solid var(--tint-yellow-line); font-size: .93rem; line-height: 1.6; color: #eee; text-align: left; }
.prix-temps b { color: var(--yellow); }
.prix-note { max-width: 500px; margin: 22px auto 0; font-size: .85rem; line-height: 1.6; color: #999; }

/* ---------- Avis Google synchronisés (Julien, 24/09 : « comme pour mes clients ») ---------- */
.avis-g { margin-top: 64px; text-align: center; }
.avis-g-titre { font-size: 1.5rem; font-weight: 900; color: var(--dark); margin-bottom: 14px; }
.avis-g-note { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 8px 10px; padding: 10px 20px; border-radius: var(--r-pill); background: var(--black); color: var(--white); font-size: .95rem; font-weight: 600; text-decoration: none; transition: transform var(--transition); }
.avis-g-note:hover { transform: translateY(-2px); }
.avis-g-note strong { font-size: 1.15rem; font-weight: 900; color: var(--yellow); }
.avis-g-logo { display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center; border-radius: 50%; background: var(--yellow); color: var(--black); }
.avis-g-logo svg { width: 18px; height: 18px; }
.avis-etoiles { display: inline-flex; gap: 2px; color: var(--yellow); }
.avis-etoiles svg { width: 16px; height: 16px; }
.avis-g-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; max-width: 980px; margin: 32px auto 0; list-style: none; text-align: left; }
.avis-carte { display: flex; flex-direction: column; background: var(--white); border: 2px solid var(--yellow); border-radius: 18px; padding: 24px 24px 20px; }
.avis-carte-tete { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.avis-carte-tete > div { flex: 1; min-width: 0; }
.avis-initiale { display: inline-flex; flex-shrink: 0; width: 42px; height: 42px; align-items: center; justify-content: center; border-radius: 50%; background: var(--yellow); color: var(--black); font-size: 1.1rem; font-weight: 900; }
.avis-auteur { font-weight: 800; color: var(--dark); line-height: 1.3; }
.avis-date { font-size: .85rem; color: var(--gray); }
.avis-texte { font-size: 1rem; line-height: 1.65; color: var(--text); white-space: pre-line; }
.avis-texte.replie { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 7; overflow: hidden; }
.avis-plus { align-self: flex-start; margin-top: 10px; padding: 0; border: 0; background: none; font: inherit; 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; cursor: pointer; }

/* ---------- Mes valeurs, « Ce en quoi je crois » (Julien, 24/09) ---------- */
.valeurs { max-width: 1040px; margin: 56px auto 0; padding: 40px 40px 36px; background: var(--yellow-light); border: 3px solid var(--yellow); border-radius: var(--r-lg); text-align: center; }
.valeurs-grille { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 24px; align-items: stretch; text-align: left; }
.valeurs h3 { font-size: 1.5rem; font-weight: 900; color: var(--dark); margin-bottom: 28px; }
.valeurs h3 + .valeurs-intro { margin-top: -14px; margin-bottom: 28px; }
.valeurs-liste { list-style: none; display: grid; gap: 14px; }
.valeurs-liste li { display: flex; align-items: center; gap: 16px; padding: 18px 20px; background: var(--white); border: 1px solid var(--tint-yellow-line); border-radius: var(--r); box-shadow: var(--shadow); font-size: 1rem; line-height: 1.6; color: var(--text); }
.valeurs-liste-deux { grid-template-columns: repeat(2, minmax(0, 1fr)); text-align: left; }
.valeurs-liste strong { display: block; margin-bottom: 4px; font-weight: 800; color: var(--dark); }
.valeurs-ico { flex-shrink: 0; display: inline-flex; width: 52px; height: 52px; align-items: center; justify-content: center; border-radius: 50%; background: var(--yellow-light); font-size: 1.6rem; line-height: 1; }
.valeurs-photo { position: relative; min-height: 100%; border-radius: var(--r); overflow: hidden; background: var(--gray-light); }
.valeurs-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 64% 55%; }
.valeurs .punch { margin-top: 32px; }

/* ---------- Bloc sombre à encarts jaunes (limite du prix, suivi) ---------- */
.encarts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.encart { background: var(--tint-yellow); border: 1px solid var(--tint-yellow-line); border-radius: var(--r); padding: 22px 20px; transition: opacity .5s ease-out, transform var(--transition), border-color var(--transition); }
.encart:hover { transform: translateY(-4px); border-color: var(--yellow); }
.encart-tete { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.encart .ico-tuile { background: var(--yellow); }
.encart .tag { background: var(--yellow); color: var(--black); }
.encart h3 { font-size: 1.02rem; font-weight: 700; line-height: 1.4; color: var(--yellow); margin-bottom: 8px; }
.encart p { font-size: .92rem; line-height: 1.65; color: #ddd; }

/* ---------- Le chat de l'agent IA (même moteur que /agent-ia.html : landing-ia/app.js) ---------- */
.chat { max-width: 760px; margin: 0 auto; background: var(--white); border: 2px solid var(--yellow); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; height: 560px; overflow: hidden; text-align: left; }
.chat-header { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.mini-avatar { width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%; object-fit: cover; background: var(--yellow-light); }
.chat-title { min-width: 0; }
.chat-title h3 { font-size: 1.02rem; font-weight: 700; }
.chat-title p { font-size: .78rem; color: var(--gray); }
.dot { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--ok); vertical-align: 1px; }
.reset { margin-left: auto; flex-shrink: 0; width: 38px; height: 38px; border: 0; border-radius: 50%; background: none; color: var(--gray); display: grid; place-items: center; transition: background var(--transition); }
.reset:hover { background: var(--gray-light); color: var(--black); }
.reset svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.messages { flex: 1; min-height: 120px; overflow-y: auto; overscroll-behavior: contain; padding: 18px 22px 6px; scrollbar-width: thin; }
.msg { max-width: 86%; margin: 0 0 12px; font-size: 1rem; line-height: 1.5; overflow-wrap: anywhere; animation: pop .22s ease both; }
.msg .ligne { margin: 0 0 .8em; }
.msg .ligne:last-child { margin-bottom: 0; }
.msg .puce, .msg .num { padding-left: 1.05em; margin-bottom: .55em; }
.msg .puce { position: relative; }
.msg .puce::before { content: '-'; position: absolute; left: 0; top: 0; }
.msg .num { text-indent: -1.05em; }
.msg a { font-weight: 600; text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 3px; }
.msg.assistant { position: relative; margin-left: 38px; padding: 13px 17px; border-radius: 20px 20px 20px 6px; background: var(--yellow-light); }
.msg.assistant::before { content: ''; position: absolute; left: -38px; bottom: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--yellow-light) url('julien-mini.webp?v=4') center / cover; }
.msg.user { width: fit-content; margin-left: auto; text-align: right; padding: 12px 16px; border-radius: 20px 20px 6px 20px; background: var(--black); color: #fff; }
.msg.user a { color: #fff; }
.msg.typing { display: flex; align-items: center; gap: 5px; min-height: 44px; padding: 0 18px; }
.msg.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--yellow-dark); animation: blink 1.1s infinite; }
.msg.typing i:nth-child(2) { animation-delay: .18s; }
.msg.typing i:nth-child(3) { animation-delay: .36s; }
.msg.typing.outil { font-size: .8rem; font-style: italic; color: var(--gray); }
.carte-rdv { max-width: 86%; margin: 2px 0 14px 38px; padding: 14px 18px; border: 2px solid var(--yellow); border-radius: var(--r); background: var(--white); font-size: .95rem; line-height: 1.5; box-shadow: var(--shadow); }
.carte-rdv b { display: block; margin-bottom: 6px; font-size: .75rem; letter-spacing: 1.5px; text-transform: uppercase; }
.carte-rdv small { display: block; margin-top: 6px; font-size: .8rem; color: var(--gray); }
.chat-bottom { padding: 4px 22px 14px; }
.choices { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.choice { min-height: 42px; padding: 10px 16px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--white); font-size: .88rem; font-weight: 500; text-align: left; transition: background var(--transition), border-color var(--transition); animation: pop .22s ease both; }
.choice:hover { background: var(--yellow-light); border-color: var(--yellow-dark); }
.champ { display: flex; align-items: center; gap: 4px; padding: 5px; border: 1px solid var(--line); border-radius: var(--r); background: var(--white); transition: border-color var(--transition), box-shadow var(--transition); }
.champ:focus-within { border-color: var(--yellow-dark); box-shadow: 0 0 0 3px rgba(255, 214, 0, .28); }
.champ textarea { flex: 1; min-width: 0; max-height: 11em; padding: 10px 12px; border: 0; outline: none; background: transparent; resize: none; line-height: 1.45; color: var(--black); }
.voice-button { display: flex; align-items: center; justify-content: center; gap: 6px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--gray-light); transition: background var(--transition); }
.voice-button:hover { background: var(--yellow-light); }
.voice-button svg { width: 20px; height: 22px; fill: none; stroke: var(--black); stroke-width: 1.7; stroke-linecap: round; }
.voice-button[aria-pressed="true"] { width: auto; padding: 0 14px; border-radius: var(--r-pill); background: var(--yellow); }
.voice-button[aria-pressed="true"] svg { display: none; }
.voice-button[aria-pressed="true"] .wave { display: flex; }
.wave { display: none; align-items: center; gap: 3px; height: 18px; }
.wave i { width: 3px; height: 7px; border-radius: 3px; background: var(--black); animation: blink 1s infinite; }
.wave i:nth-child(2), .wave i:nth-child(4) { height: 12px; animation-delay: .15s; }
.wave i:nth-child(3) { height: 17px; animation-delay: .3s; }
#send { flex-shrink: 0; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--yellow); color: var(--black); display: grid; place-items: center; transition: background var(--transition); }
#send:hover { background: var(--yellow-dark); }
#send svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.voice-status { margin: 6px 4px 0; font-size: .75rem; line-height: 1.35; color: var(--gray); }
.voice-status:empty { display: none; }
.chat-mention { margin: 6px 4px 0; font-size: 11px; line-height: 1.4; color: var(--gray); text-align: center; }
.chat-mention a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
body.clavier .chat-mention { display: none; }   /* information RGPD + IA sous le chat (26/09/2026) ; masquée clavier ouvert */
dialog { width: min(480px, calc(100vw - 28px)); margin: auto; padding: 0; border: 0; border-radius: var(--r-lg); background: var(--white); color: var(--black); text-align: center; box-shadow: var(--shadow-lg); overflow: hidden; }
.maquette-popup { width: min(1100px, calc(100vw - 28px)); max-height: calc(100dvh - 40px); }
.maquette-popup .modal-scroll { max-height: calc(100dvh - 40px); overflow-y: auto; padding: 0; scrollbar-width: none; -ms-overflow-style: none; }
.maquette-popup .modal-scroll::-webkit-scrollbar { display: none; width: 0; }
.maquette-popup img { display: block; width: 100%; height: auto; }
.maquette-popup .icon-button { z-index: 2; background: var(--white); box-shadow: var(--shadow); }
dialog::backdrop { background: rgba(17, 17, 17, .5); }
dialog .modal-scroll { padding: 40px 28px 30px; }
dialog h2 { font-size: 1.6rem; font-weight: 800; line-height: 1.3; margin-bottom: 20px; }
dialog .icon-button { position: absolute; top: 10px; right: 12px; width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--gray-light); font-size: 1.3rem; }
dialog .primary { padding: 14px 28px; border: 0; border-radius: var(--r-pill); background: var(--yellow); font-weight: 700; }
.chat-avis { max-width: 760px; margin: 14px auto 0; font-size: .85rem; font-style: italic; color: var(--gray); text-align: center; }

/* ---------- La modale de l'appel de 15 min (Julien, 24/09/2026) ----------
   Le bouton « Réserver mon appel » de .doute (paiement.js) ET le bouton « Réserver un appel » de la page
   de vente (vente.js, 24/09/2026 : « quand je clique sur réserver un appel j'ai pas l'agent IA qui s'ouvre »)
   ouvrent CETTE modale, sur place : le vrai Agent IA du
   site (landing-ia/app.js, chargé à la première ouverture) prend le rendez-vous dans la
   conversation, avec l'amorce AMORCES_RDV['web-expansion'] posée par data-rdv sur <body>.
   Le chat est habillé plus haut (.chat, .messages, .choices, .champ) : on ne redéfinit ici
   que ce qui change dans la modale (le cadre disparaît, l'en-tête du chat aussi, la hauteur suit
   l'écran) et l'ascenseur devient invisible, comme sur toutes les modales JBC. */
.rdv-pop { width: min(720px, calc(100vw - 20px)); padding: 0; border: 0; border-radius: var(--r-lg); background: var(--white); color: var(--text); text-align: center; overflow: hidden; }
.rdv-pop::backdrop { background: rgba(17, 17, 17, .55); }
.rdv-pop-fermer { position: absolute; top: 12px; right: 14px; z-index: 2; width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--gray-light); font-size: 1.3rem; line-height: 1; color: var(--black); cursor: pointer; }
.rdv-pop-corps { display: flex; flex-direction: column; padding: 24px 22px 18px; }
.rdv-pop-titre { font-size: 1.05rem; font-weight: 800; line-height: 1.4; color: var(--black); }
.rdv-pop-dit { margin: 8px 0 16px; font-size: .84rem; line-height: 1.6; color: var(--gray); }
.rdv-pop .chat { max-width: none; height: min(520px, calc(100dvh - 230px)); border: 0; border-radius: var(--r); box-shadow: none; background: var(--yellow-light); }
.rdv-pop .chat-header { display: none; }
.rdv-pop .messages { scrollbar-width: none; -ms-overflow-style: none; }
.rdv-pop .messages::-webkit-scrollbar { display: none; width: 0; }
.rdv-pop .msg.assistant { background: var(--white); }
.rdv-pop .msg.assistant::before { background-color: var(--white); }
.rdv-pop-vitrine { margin-top: 12px; font-size: .8rem; line-height: 1.5; color: var(--gray); }

/* ---------- FAQ ---------- */
.faq { max-width: 720px; margin: 44px auto 0; }
/* FAQ : ouverture en douceur (vente.js) et filet jaune au survol, toujours (Julien, 23/09) */
.faq details { margin-bottom: 16px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--white); overflow: hidden; transition: opacity .5s ease-out, transform .5s ease-out, border-color var(--transition), box-shadow var(--transition); }
.faq details:hover, .faq details[open] { border-color: var(--yellow); box-shadow: var(--shadow); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 24px; font-weight: 700; cursor: pointer; list-style: none; outline: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; flex-shrink: 0; font-size: 1.3rem; font-weight: 300; color: #999; transition: transform .3s cubic-bezier(.16, 1, .3, 1); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 24px 20px; font-size: .95rem; line-height: 1.7; color: var(--text); }

/* ---------- Appel final + pied ---------- */
.final { text-align: center; }
.final h2 { font-size: clamp(1.6rem, 4vw, 2.5rem); font-weight: 900; max-width: 680px; margin: 0 auto 16px; }
.final .intro { margin-bottom: 32px; }
.pied { background: #000; color: #666; text-align: center; padding: 26px 24px calc(26px + env(safe-area-inset-bottom)); font-size: .85rem; }
.pied a { color: #888; text-decoration: none; margin: 0 9px; }
.pied a:hover { color: var(--yellow); }

/* ==========================================================================
   GÉNÉRATEUR DE MAQUETTE (maquette/index.html)
   ========================================================================== */
.gen { background: var(--gray-light); }
.gen-barre { position: sticky; top: 0; z-index: 40; background: var(--white); border-bottom: 1px solid rgba(0, 0, 0, .05); padding: 0 24px; }
.gen-barre-inner { max-width: 1100px; height: 64px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.gen-barre .tete-logo span { font-size: .95rem; }
.gen-retour { flex-shrink: 0; padding: 8px 14px; border: 1px solid var(--line); border-radius: var(--r-pill); font-size: .88rem; font-weight: 600; color: var(--black); text-decoration: none; transition: background var(--transition), border-color var(--transition); }
.gen-retour:hover { background: var(--gray-light); border-color: var(--black); }
.gen-retour-court { display: none; }
.points { display: flex; gap: 8px; }
.points span { width: 10px; height: 10px; border-radius: 50%; background: var(--line); transition: background var(--transition), width var(--transition); }
.points span.is-on { width: 28px; border-radius: var(--r-pill); background: var(--yellow); }
.points span.is-done { background: var(--black); }
.ecran { padding: 48px var(--gutter) 72px; min-height: calc(100dvh - 64px); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.ecran-hero { background: linear-gradient(135deg, var(--black) 0%, var(--dark) 100%); color: #fff; }
.ecran-hero h1 { font-size: clamp(1.9rem, 4.6vw, 3rem); font-weight: 900; line-height: 1.55; margin-bottom: 26px; }
.ecran-hero .subtitle { font-size: 1.12rem; line-height: 1.7; max-width: 620px; margin: 0 auto 30px; }
.ecran-hero .hero-tags { margin-bottom: 34px; }
.etape-gen { width: 100%; max-width: 760px; background: var(--white); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 40px 36px; animation: pageIn .35s cubic-bezier(.16, 1, .3, 1) both; }
.etape-gen-large { max-width: 1100px; }
.etape-gen h2 { font-size: clamp(1.4rem, 3.2vw, 2rem); font-weight: 800; line-height: 1.3; margin-bottom: 12px; }
.etape-num { display: inline-block; margin-bottom: 14px; }
/* Vérification du mail par code (générateur, 24/09/2026) */
.code-mail { display: grid; gap: 10px; justify-items: center; margin: 18px 0 6px; }
.code-mail .aide { margin-bottom: 4px; }
.code-mail input { width: min(260px, 100%); padding: 14px 16px; border: 2px solid var(--yellow-dark); border-radius: var(--r-sm); font-size: 1.5rem; font-weight: 800; letter-spacing: 6px; text-align: center; }
.aide { font-size: 1rem; line-height: 1.65; color: var(--text); max-width: 560px; margin: 0 auto 28px; }
.nav-gen { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }
.erreur { margin-top: 16px; font-size: .92rem; font-weight: 600; color: var(--danger); }
.fineprint { max-width: 560px; margin: 18px auto 0; font-size: .85rem; font-style: italic; line-height: 1.6; color: var(--gray); }
.fineprint--rouge { color: var(--danger); }   /* coût d'une maquette, étape 5 du générateur (Julien, 24/09) */

/* Choix sous forme de cartes (photos, couleurs, typo) */
.choix { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.choix-carte { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 150px; padding: 18px 14px; border: 3px solid var(--gray-light); border-radius: var(--r); background: var(--gray-light); cursor: pointer; text-align: center; transition: border-color var(--transition), background var(--transition); }
.choix-carte:hover { border-color: var(--yellow); }
.choix-carte.is-sel { border-color: var(--black); background: var(--yellow-light); }
.choix-carte.is-sel::after { content: '✓'; position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; border-radius: 50%; background: var(--black); color: var(--yellow); font-size: .85rem; font-weight: 800; display: grid; place-items: center; }
.choix-nom { font-size: .95rem; font-weight: 700; line-height: 1.3; }
.choix-note { font-size: .8rem; color: var(--gray); }
.choix-ico { font-size: 1.9rem; line-height: 1; }
.choix-carte input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.apercu { width: 100%; height: 120px; border-radius: 10px; object-fit: cover; }
.pastilles { display: flex; justify-content: center; gap: 4px; }
.pastilles span { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--white); box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); }
.miniature { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; }

/* Panneaux dépliés sous les cartes de couleurs */
.volet { margin-top: 22px; padding: 22px; border-radius: var(--r); background: var(--gray-light); }
.volet-aide { font-size: .93rem; line-height: 1.6; color: var(--text); margin-bottom: 16px; }
.volet .choix-carte { background: var(--white); border-color: var(--white); min-height: 96px; }
.volet .choix-carte.is-sel { background: var(--yellow-light); border-color: var(--black); }
.cadrage { position: relative; display: inline-block; max-width: 100%; touch-action: none; cursor: crosshair; user-select: none; }
.cadrage img { max-height: 340px; width: auto; border-radius: 10px; }
.cadre { position: absolute; border: 3px solid var(--yellow); border-radius: 6px; box-shadow: 0 0 0 9999px rgba(17, 17, 17, .45); pointer-events: none; }
.pastilles-choix { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 16px; }
.pastille { width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--white); box-shadow: 0 0 0 2px var(--black); transition: opacity var(--transition), transform var(--transition); }
.pastille.is-off { opacity: .25; transform: scale(.85); box-shadow: 0 0 0 1px var(--line); }
.couleurs-perso { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.couleur-slot { position: relative; }
.couleur-slot input { width: 64px; height: 64px; padding: 0; border: 3px solid var(--white); border-radius: 50%; box-shadow: 0 0 0 2px var(--black); background: none; cursor: pointer; }
.couleur-slot input::-webkit-color-swatch-wrapper { padding: 0; }
.couleur-slot input::-webkit-color-swatch { border: 0; border-radius: 50%; }
.couleur-suppr { position: absolute; top: -6px; right: -6px; width: 24px; height: 24px; border: 0; border-radius: 50%; background: var(--black); color: #fff; font-size: .7rem; }

/* Typographies : l'échantillon est rendu dans la vraie police */
.typo-ech { font-size: 2.2rem; line-height: 1.1; }
.sous-titre-gen { font-size: 1.2rem; font-weight: 800; margin: 34px 0 6px; }
.ico-trio { display: flex; gap: 8px; }
.ico-ech { width: 30px; height: 30px; }
.typo-editorial { font-family: 'Instrument Serif', Georgia, serif; }
.typo-expressif { font-family: 'Bricolage Grotesque', 'Inter', sans-serif; font-weight: 800; }
.typo-organique { font-family: 'Fraunces', Georgia, serif; font-weight: 600; }
.typo-essentiel { font-family: 'Poppins', 'Inter', sans-serif; font-weight: 600; }

/* Dictée : le texte s'écrit directement dans le champ (comme l'agent IA) */
.dictee { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.micro-btn { display: inline-flex; align-items: center; gap: 12px; padding: 16px 30px; border: 0; border-radius: var(--r-pill); background: var(--black); color: #fff; font-size: 1.02rem; font-weight: 700; transition: background var(--transition); }
.micro-btn::before { content: ''; width: 14px; height: 14px; border-radius: 50%; background: var(--yellow); }
.micro-btn.is-rec { background: var(--danger); }
.micro-btn.is-rec::before { background: #fff; animation: blink 1s infinite; }
.champ-texte { width: 100%; min-height: 170px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); line-height: 1.55; resize: none; }
.champ-texte:focus, .champs input:focus { outline: none; border-color: var(--yellow-dark); box-shadow: 0 0 0 3px rgba(255, 214, 0, .28); }
.champs { display: grid; gap: 12px; max-width: 420px; margin: 0 auto; }
.champs input { width: 100%; padding: 15px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); color: var(--black); }

/* Écran d'attente : carte noire à bord jaune */
.attente { width: 100%; max-width: 1100px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.attente-carte { background: var(--black); color: #fff; border: 3px solid var(--yellow); border-radius: var(--r-lg); padding: 34px 30px; text-align: left; }
.attente-carte h2 { font-size: clamp(1.3rem, 3vw, 1.8rem); font-weight: 800; margin-bottom: 18px; }
.pct { font-size: 3.4rem; font-weight: 900; line-height: 1; color: var(--yellow); }
.barre { height: 10px; margin: 14px 0 22px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .12); overflow: hidden; }
.barre i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--yellow); transition: width .25s linear; }
.suivi-etapes { list-style: none; display: grid; gap: 10px; }
.suivi-etapes li { display: flex; align-items: center; gap: 12px; font-size: .98rem; color: #888; }
.suivi-etapes li::before { content: ''; flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; border: 2px solid #555; }
.suivi-etapes li.is-cur { color: #fff; font-weight: 700; }
.suivi-etapes li.is-cur::before { border-color: var(--yellow); background: radial-gradient(circle, var(--yellow) 0 4px, transparent 5px); animation: blink 1.2s infinite; }
.suivi-etapes li.is-ok { color: #ddd; }
.suivi-etapes li.is-ok::before { border-color: var(--yellow); background: var(--yellow); }
.attente-cote { display: grid; gap: 20px; align-content: start; }
.encart-clair { background: var(--white); border: 3px solid transparent; border-radius: var(--r); padding: 24px 22px; text-align: left; }
.encart-clair .tag { margin-bottom: 12px; }
.encart-clair p { font-size: 1rem; line-height: 1.6; color: #333; transition: opacity .35s; }
.encart-clair p.is-fading { opacity: 0; }
.titre-revele { font-size: 1.5rem; font-weight: 900; line-height: 1.3; }
.galerie-attente { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.galerie-attente figure { background: var(--white); border-radius: 14px; padding: 10px; animation: pop .4s ease both; }
.galerie-attente figcaption { font-size: .85rem; font-weight: 700; margin-bottom: 8px; }
.galerie-attente img { border-radius: 8px; max-height: 360px; width: 100%; object-fit: cover; object-position: top; }

/* Résultats : les maquettes, puis la carte prix */
.maquettes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 8px; text-align: left; }
.maquette { display: flex; flex-direction: column; gap: 12px; background: var(--gray-light); border: 3px solid transparent; border-radius: 20px; padding: 14px; transition: border-color var(--transition); }
.maquette:hover { border-color: var(--yellow); }
.maquette.is-chosen { border-color: var(--black); background: var(--yellow-light); }
.maquette h3 { font-size: 1rem; font-weight: 800; }
.maquette-img { height: 440px; border-radius: 10px; overflow: hidden; cursor: zoom-in; background: var(--white); }
.maquette-img img { width: 100%; }
.maquette .btn { width: 100%; }
.lancer { width: 100%; max-width: 760px; margin-top: 36px; }
.lancer .prix-carte { max-width: none; }
.lancer-choisie { font-size: .95rem; color: #ddd; margin-bottom: 20px; }
.lancer-choisie b { color: var(--yellow); }

/* Visionneuse plein écran */
.visionneuse { position: fixed; inset: 0; z-index: 100; background: rgba(17, 17, 17, .88); overflow-y: auto; padding: 60px 16px; }
.visionneuse img { max-width: 980px; width: 100%; margin: 0 auto; border-radius: 12px; }
.visionneuse-fermer { position: fixed; top: 14px; right: 14px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--yellow); color: var(--black); font-size: 1.1rem; font-weight: 800; }

/* Utilitaire de masquage : déclaré APRÈS tous les composants, sinon un composant
   qui pose son propre display (.ecran en flex, .micro…) le bat à
   spécificité égale et l'élément « caché » reste affiché. */
.hidden { display: none; }

/* ==========================================================================
   Accessibilité : mouvement réduit
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .hc-item, .hc-item img { transition: none; }
    .reveal, .hero-anim, .etape-gen { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }
}

/* ==========================================================================
   Paliers (regroupés ici, un bloc par palier)
   ========================================================================== */
@media (max-width: 1024px) {
    .julien { grid-template-columns: 1fr; gap: 44px; }
    .julien-photos { max-width: 640px; width: 100%; margin: 0 auto; }
    .julien-texte { max-width: 680px; margin: 0 auto; }
    .metiers, .reals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .valeurs-grille { grid-template-columns: minmax(0, 1fr); }
    .valeurs-photo { order: -1; min-height: 0; aspect-ratio: 16 / 9; }
    .reals > li:last-child:nth-child(3n + 1) { grid-column: auto; }
    .reals > li:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 11px); }
    .exemples { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
    .encarts { grid-template-columns: 1fr; max-width: 640px; margin: 0 auto; }
    .maquettes { grid-template-columns: 1fr; }
    .maquette-img { height: 520px; }
    .attente { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .rdv-pop { width: calc(100vw - 14px); }
    .rdv-pop-corps { padding: 22px 14px 14px; }
    .rdv-pop .chat { height: min(520px, calc(100dvh - 210px)); }
    :root { --gutter: 16px; }
    .br-mobile { display: inline; }
    .br-desktop { display: none; }
    .hero { padding: 52px var(--gutter) 56px; }
    .offer-name { font-size: .8rem; letter-spacing: 2px; margin-bottom: 20px; }
    .hero h1 { font-size: 1.75rem; line-height: 1.6; }
    .highlight { padding: 2px 10px; }
    .hero-tag { font-size: .84rem; padding: 7px 14px; }
    .hero .subtitle { font-size: 1.02rem; }
    .btn-big { padding: 16px 22px; font-size: 1.02rem; }
    .hero-actions .btn { width: 100%; }
    .hero-carrousel { aspect-ratio: 3 / 2.1; margin-top: 40px; }
    .hc-item { width: 100%; }
    .hc-item[data-pos="1"], .hc-item[data-pos="-1"] { opacity: 0; }
    .sec { padding: 56px var(--gutter); }
    .intro { font-size: 1rem; margin-bottom: 32px; }
    .punch { font-size: 1rem; padding: 16px 20px; }
    .encarts { grid-template-columns: 1fr; }
    .metiers, .reals { grid-template-columns: 1fr; }
    .reals > li:last-child:nth-child(odd) { width: auto; justify-self: stretch; }
    .real-lien { display: none; }
    .julien { gap: 36px; }
    .julien-photos { gap: 10px; max-width: 520px; width: 100%; margin: 0 auto; }
    .julien-texte h2 { text-align: center; }
    .julien-texte p { font-size: 1.02rem; }
    .julien-tags { justify-content: center; }
    .julien-appel { display: flex; width: fit-content; margin-left: auto; margin-right: auto; }   /* Julien, 24/09 : « centre le bouton réserver un appel » */
    .julien-reseaux p { text-align: center; }
    .julien-reseaux ul { justify-content: center; gap: 10px 16px; }
    .julien-reseaux a { flex-direction: column; gap: 6px; font-size: .9rem; }
    .etape { flex-direction: column; gap: 4px; padding: 20px; }
    .etape::before { width: 36px; height: 36px; font-size: 1rem; }
    .prix-carte { padding: 32px 20px; border-radius: 20px; }
    .valeurs { margin-top: 40px; padding: 28px 16px; border-radius: 20px; }
    .valeurs-liste-deux { grid-template-columns: minmax(0, 1fr); }
    .valeurs-liste li { display: block; padding: 16px; }
    .valeurs-ico { width: 44px; height: 44px; margin-bottom: 10px; font-size: 1.35rem; }
    .valeurs-photo { aspect-ratio: 4 / 3; }
    .avis-g { margin-top: 48px; }
    .avis-g-note { border-radius: var(--r); padding: 12px 20px; }
    .avis-g-note > span:last-child { flex-basis: 100%; }
    .avis-g-liste { grid-template-columns: 1fr; gap: 18px; }
    .avis-carte { padding: 20px 18px 18px; }
    .prix-carte .btn { width: 100%; }
    .chat { height: 520px; border-radius: 20px; }
    .messages { padding: 14px 13px 4px; }
    .msg { font-size: .95rem; max-width: 92%; }
    .chat-bottom { padding: 4px 12px 12px; }
    .choices { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -12px 10px; padding: 2px 12px; }
    .choices::-webkit-scrollbar { display: none; }
    .choice { flex: 0 0 auto; white-space: nowrap; }
    .faq summary { padding: 18px; }
    .faq details p { padding: 0 18px 18px; }
    .ecran { padding: 32px var(--gutter) 48px; justify-content: flex-start; }
    .etape-gen { padding: 28px 18px; border-radius: 20px; }
    .choix { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .choix-carte { min-height: 128px; padding: 14px 10px; }
    .nav-gen .btn { flex: 1 1 100%; }
    .points span { width: 8px; height: 8px; }
    .points span.is-on { width: 20px; }
    .gen-barre { padding: 0 16px; }
    .gen-retour { padding: 7px 12px; font-size: .84rem; }
    .gen-retour-long { display: none; }
    .gen-retour-court { display: inline; }
    .gen-barre-inner:has(.points:not(.hidden)) .tete-logo span { display: none; }
    .attente-carte { padding: 26px 20px; }
    .pct { font-size: 2.6rem; }
    .galerie-attente { grid-template-columns: 1fr; }
    .maquette-img { height: 420px; }
}