/* TOUR 2 (20/09/2026) : ce fichier est commun aux propositions A, B, C.
   Chaque site garde ses couleurs par ses variables : --t2-fond, --t2-texte, --t2-accent, --t2-ligne, --t2-bouton, --t2-bouton-texte. */

/* 1. Le site qui se construit sous vos yeux : champ métier + puces + téléphone */
.t2-construit{display:grid;gap:14px;margin-top:18px;min-width:0;max-width:100%}
.t2-champ,.t2-puces{min-width:0;max-width:100%}
.t2-champ{display:flex;align-items:center;gap:10px;background:var(--t2-fond);border:1.5px solid var(--t2-ligne);border-radius:14px;padding:6px 6px 6px 16px;max-width:520px}
.t2-champ label{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--t2-texte);opacity:.7;white-space:nowrap}
.t2-champ input{flex:1 1 0;width:40px;min-width:0;border:0;background:transparent;font:inherit;font-size:16px;color:var(--t2-texte);padding:8px 4px;outline:0}
.t2-champ input::placeholder{color:var(--t2-texte);opacity:.45}
.t2-champ button{border:0;background:var(--t2-bouton);color:var(--t2-bouton-texte);border-radius:10px;padding:10px 14px;font:inherit;font-weight:700;cursor:pointer;white-space:nowrap}
.t2-puces{display:flex;flex-wrap:wrap;gap:8px}
.t2-puces button{border:1px solid var(--t2-ligne);background:transparent;color:var(--t2-texte);border-radius:999px;padding:7px 13px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:background .2s,color .2s,transform .2s;opacity:.85}
.t2-puces button:hover{transform:translateY(-1px);opacity:1}
.t2-puces button.on{background:var(--t2-accent);color:var(--t2-bouton-texte);border-color:var(--t2-accent);opacity:1}
.t2-ligne-prix{font-size:14px;color:var(--t2-texte);opacity:.8;margin:0}
.t2-ligne-prix b{opacity:1;font-weight:800}

/* le téléphone qui montre la maquette */
.t2-tel{position:relative;width:var(--t2-tel-l,230px);aspect-ratio:9/19.2;border-radius:calc(var(--t2-tel-l,230px)*.14);background:#111;padding:calc(var(--t2-tel-l,230px)*.03);box-shadow:0 30px 60px -24px rgba(0,0,0,.55),inset 0 0 0 2px #333;flex:none}
.t2-tel::before{content:"";position:absolute;top:calc(var(--t2-tel-l,230px)*.03);left:50%;transform:translateX(-50%);width:26%;height:5%;background:#111;border-radius:0 0 12px 12px;z-index:3}
.t2-tel .ecran{position:relative;width:100%;height:100%;border-radius:calc(var(--t2-tel-l,230px)*.11);overflow:hidden;background:#f6f3ec}
.t2-tel .ecran img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;transform:translateY(12px) scale(1.02);transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.t2-tel .ecran img.on{opacity:1;transform:none}
.t2-tel .etq{position:absolute;left:50%;bottom:6%;transform:translateX(-50%);background:rgba(17,17,17,.82);color:#fff;font-size:11px;font-weight:700;padding:6px 10px;border-radius:999px;white-space:nowrap;z-index:2;letter-spacing:.02em}
.t2-tel.tape .ecran{animation:t2-tape .6s cubic-bezier(.16,1,.3,1)}
@keyframes t2-tape{0%{transform:scale(.97)}60%{transform:scale(1.01)}100%{transform:none}}
/* le squelette qui se dessine avant l'image (« le site se construit ») */
.t2-tel .os{position:absolute;inset:0;padding:14% 8% 8%;display:grid;gap:6%;align-content:start;opacity:0;transition:opacity .3s}
.t2-tel .os span{display:block;height:6%;border-radius:6px;background:linear-gradient(90deg,#ddd8cc,#ece8de,#ddd8cc);background-size:200% 100%;animation:t2-os 1.1s linear infinite}
.t2-tel .os span:nth-child(1){height:30%;border-radius:10px}
.t2-tel .os span:nth-child(3){width:70%}
.t2-tel .os span:nth-child(4){width:45%}
.t2-tel.construit .os{opacity:1}
@keyframes t2-os{to{background-position:-200% 0}}

/* 2. la vidéo qui change : fondu */
.t2-video-fondu{transition:opacity .45s ease}
.t2-video-fondu.sombre{opacity:0}

/* 3. scroll-world : le défilement fait avancer la vidéo (site A) */
.t2-scrub.t2-scrub.t2-scrub{height:260svh;position:relative;padding:8px}
.t2-scrub.t2-scrub.t2-scrub>.cadre{position:sticky;top:8px;height:calc(100svh - 16px)}
.t2-scrub .t2-indice{position:absolute;left:50%;top:18px;transform:translateX(-50%);z-index:4;font-size:11px;letter-spacing:.2em;text-transform:uppercase;opacity:.75;display:flex;align-items:center;gap:8px;transition:opacity .4s}
.t2-scrub .t2-indice i{display:block;width:16px;height:26px;border:1.5px solid currentColor;border-radius:9px;position:relative}
.t2-scrub .t2-indice i::after{content:"";position:absolute;left:50%;top:5px;width:3px;height:6px;margin-left:-1.5px;border-radius:2px;background:currentColor;animation:t2-roue 1.4s ease-in-out infinite}
@keyframes t2-roue{0%{opacity:0;top:5px}40%{opacity:1}100%{opacity:0;top:15px}}
.t2-scrub.roule .t2-indice{opacity:0}
@media(max-width:899px){.t2-scrub.t2-scrub.t2-scrub{height:200svh}}

/* 4. la barre collée en bas (téléphone seulement) */
.t2-barre{position:fixed;left:10px;right:10px;bottom:10px;z-index:40;display:none;align-items:center;gap:10px;background:var(--t2-fond);color:var(--t2-texte);border:1px solid var(--t2-ligne);border-radius:16px;padding:8px 8px 8px 14px;box-shadow:0 20px 40px -20px rgba(0,0,0,.5);transform:translateY(120%);transition:transform .45s cubic-bezier(.16,1,.3,1)}
.t2-barre.vue{transform:none}
.t2-barre small{flex:1;font-size:12px;line-height:1.25}
.t2-barre small b{display:block;font-size:14px}
.t2-barre a{background:var(--t2-bouton);color:var(--t2-bouton-texte);border-radius:11px;padding:11px 14px;font-weight:800;font-size:14px;white-space:nowrap}
@media(max-width:899px){.t2-barre{display:flex}}

/* 5. titres qui se révèlent, chiffres qui comptent */
.rv{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}
.rv-t{overflow:hidden}
.rv-t>span{display:block;transform:translateY(110%);transition:transform .9s cubic-bezier(.16,1,.3,1)}
.rv-t.in>span{transform:none}
[data-compte]{font-variant-numeric:tabular-nums}

/* 6. le simulateur « combien coûte mon site » */
.t2-simu{color:var(--t2-texte);display:grid;gap:18px;border:1px solid var(--t2-ligne);border-radius:22px;padding:clamp(22px,3vw,34px);background:var(--t2-fond);margin-top:40px}
@media(min-width:900px){.t2-simu{grid-template-columns:1fr 1fr;gap:40px;align-items:center}}
.t2-simu h3{font-size:clamp(20px,2vw,26px);margin:0 0 14px}
.t2-choix{display:grid;gap:12px}
.t2-choix>div{display:grid;gap:8px}
.t2-choix small{font-size:12px;letter-spacing:.08em;text-transform:uppercase;opacity:.7}
.t2-seg{display:inline-flex;background:rgba(127,127,127,.12);border-radius:12px;padding:4px;gap:4px;flex-wrap:wrap}
.t2-seg button{border:0;background:transparent;color:var(--t2-texte);font:inherit;font-weight:700;font-size:14px;padding:9px 14px;border-radius:9px;cursor:pointer;opacity:.7}
.t2-seg button.on{background:var(--t2-bouton);color:var(--t2-bouton-texte);opacity:1}
.t2-resultat{display:grid;gap:10px;padding:22px;border-radius:16px;background:rgba(127,127,127,.08)}
.t2-resultat .ligne{display:flex;justify-content:space-between;gap:12px;align-items:baseline;font-size:15px;border-bottom:1px dashed var(--t2-ligne);padding-bottom:8px}
.t2-resultat .ligne b{font-size:clamp(22px,2.4vw,30px);font-weight:800;white-space:nowrap}
/* 30/09/2026 : « 12 mois, puis libre » forçait 381 px au téléphone (accueil à 401 px pour 390) ; il passe à la ligne, un peu plus petit */
.t2-resultat .ligne b[data-r="l3"]{white-space:normal;text-align:right;font-size:clamp(17px,1.8vw,22px)}
.t2-simu,.t2-simu>*{min-width:0}
.t2-resultat .ligne.total b{font-size:clamp(30px,3.4vw,44px);color:var(--t2-accent)}
.t2-resultat p{margin:0;font-size:13px;opacity:.75;line-height:1.4}

/* résultat du simulateur qui saute quand il change */
.t2-pop{animation:t2-pop .5s cubic-bezier(.16,1,.3,1)}
@keyframes t2-pop{0%{transform:translateY(8px);opacity:.3}100%{transform:none;opacity:1}}

/* 7. lumière douce qui bouge derrière le fond (B et C) */
.t2-lumiere{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.t2-lumiere i{position:absolute;width:70vmax;height:70vmax;border-radius:50%;filter:blur(90px);opacity:var(--t2-lum-op,.35);animation:t2-lum 26s ease-in-out infinite alternate}
.t2-lumiere i:nth-child(2){animation-duration:34s;animation-delay:-12s;width:55vmax;height:55vmax}
@keyframes t2-lum{0%{transform:translate(-20%,-30%) scale(1)}50%{transform:translate(30%,10%) scale(1.15)}100%{transform:translate(60%,45%) scale(.9)}}

/* 8. logo SVG dans la barre du menu */
.t2-logo{display:inline-flex;align-items:center;gap:8px;line-height:0}
.t2-logo svg{height:22px;width:auto;display:block}

@media(prefers-reduced-motion:reduce){.rv,.rv-t>span{opacity:1!important;transform:none!important;transition:none!important}.t2-lumiere i{animation:none}}

/* secousse générique (machine à sous de C) */
.t2-tape{animation:t2-tape .6s cubic-bezier(.16,1,.3,1)}

/* la section « Dites votre métier », juste sous le héros (décision du 20/09, 16 h) */
.t2-metier{display:grid;gap:28px;align-items:center;margin-top:40px}
@media(min-width:900px){.t2-metier{grid-template-columns:1.1fr auto;gap:64px}.t2-metier .t2-tel{--t2-tel-l:250px}}
@media(max-width:899px){.t2-metier .t2-tel{--t2-tel-l:190px;justify-self:center}}
.t2-metier .t2-construit{margin-top:0}
.t2-metier .t2-note{font-size:14px;opacity:.7;margin:0}