/* === M2 (31/10/2026) : le téléphone sur l'accueil — A (duo du haut), B (« Sur place »), C (bande « Tout le dossier tient dans une main ») ===
   Téléphone dessiné à 390 × 844 px puis réduit par --k. Smartphone générique (pas de reproduction d'un modèle de marque).
   Écrans reconstitués d'après l'interface de Tracelia, dossier fictif : à remplacer par de vraies captures mobiles. */

.tel-box{--k:.5;display:block;position:relative;flex:none;width:calc(390px * var(--k));height:calc(844px * var(--k))}
.tel{position:absolute;left:0;top:0;width:390px;height:844px;box-sizing:border-box;transform:scale(var(--k));transform-origin:0 0;border-radius:64px;background:#1B1E23;padding:11px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,var(--f-text);color:#111827;text-align:left;line-height:1.4;letter-spacing:0;box-shadow:inset 0 0 0 1.5px #4A505A,inset 0 0 0 5px #121418,0 60px 100px -40px rgba(7,15,28,.55),0 24px 40px -20px rgba(7,15,28,.4)}
.tel>i{position:absolute;width:4px;border-radius:3px;background:#2C3139}
.tel>i.b1{left:-3px;top:176px;height:36px}
.tel>i.b2{left:-3px;top:232px;height:64px}
.tel>i.b3{right:-3px;top:252px;height:94px}
.tel span,.tel b,.tel small{display:block}
.tel svg{flex:none}
.tel-ecran{position:relative;width:100%;height:100%;box-sizing:border-box;border-radius:53px;overflow:hidden;background:#fff;display:flex;flex-direction:column;padding-top:44px}
.tel-ecran::before{content:"";position:absolute;top:14px;left:50%;margin-left:-6px;width:12px;height:12px;border-radius:50%;background:#0B0D10;box-shadow:0 0 0 2px #23272E;z-index:5}
.tel-ecran::after{content:"";position:absolute;bottom:9px;left:50%;margin-left:-66px;width:132px;height:5px;border-radius:3px;background:#111827;z-index:5}
.tel-ecran.sombre{background:#0B0D10;color:#F9FAFB}
.tel-ecran.sombre::after{background:#F3F4F6}

.t-nav{display:flex!important;justify-content:space-between;align-items:center;height:40px;padding:0 20px;font-size:15px;color:#4B5563}
.t-nav>span{display:flex!important;align-items:center;gap:6px}
.sombre .t-nav{padding:0 18px;height:44px}
.sombre .t-nav .a{color:#D1D5DB}
.sombre .t-nav .t{color:#fff;font-weight:600}
.sombre .t-nav .o{color:#FDBA74;font-weight:600}
.t-tete{padding:8px 20px 0}
.t-tete b{font-size:28px;line-height:1.15;font-weight:700;letter-spacing:-.02em;color:#111827}
.t-tete span{margin-top:4px;font-size:14px;color:#6B7280}
.t-carte{margin:16px 20px 0;border:1px solid #E5E7EB;border-radius:12px;background:#fff;overflow:hidden}
.t-carte-h{display:flex!important;align-items:center;gap:10px;padding:12px 14px;background:#F9FAFB;box-shadow:inset 3px 0 0 #F97316;border-bottom:1px solid #E5E7EB;font-size:15px;font-weight:600;color:#111827}
.t-corps{display:flex!important;flex-direction:column;gap:6px;padding:12px 14px 14px}
.t-lab{font-size:13px;font-weight:600;color:#111827}
.t-lab.m{margin-top:8px}
.t-lab i{font-style:normal;color:#DC2626}
.t-champ{display:flex!important;align-items:center;height:38px;box-sizing:border-box;padding:0 12px;border:1px solid #E5E7EB;border-radius:8px;font-size:14px;color:#374151}
.t-zone{padding:10px 12px 8px;border:1.5px solid #F97316;border-radius:8px;box-shadow:0 0 0 3px rgba(249,115,22,.14);font-size:14px;line-height:1.5;color:#374151}
.tel .t-caret{display:inline-block;width:2px;height:17px;margin-left:2px;vertical-align:-3px;background:#F97316}
.t-zone-b{display:flex!important;justify-content:space-between;align-items:center;margin-top:8px;font-size:12px;color:#6B7280}
.t-mic{display:flex!important;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:#FFF7ED;color:#EA580C}
.t-photos{padding:16px 20px 0}
.t-grille{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:8px}
.t-grille svg{display:block;width:100%;height:auto;border-radius:10px}
.t-plus{display:flex!important;align-items:center;justify-content:center;aspect-ratio:1;border:1.5px dashed #D1D5DB;border-radius:10px;color:#6B7280}
.t-dictee{display:flex!important;align-items:center;gap:14px;margin-top:auto;padding:14px 18px 30px;background:#fff;border-top:1px solid #E5E7EB;border-radius:22px 22px 0 0;box-shadow:0 -12px 30px -18px rgba(17,24,39,.35)}
.t-onde{display:flex!important;align-items:center;gap:3px;height:34px;flex:1}
.t-onde i{display:block;width:3px;border-radius:2px;background:#10233F;transform-origin:50% 50%}
.t-onde i.g{background:#9CA3AF}
.t-onde-t{margin-left:10px}
.t-onde-t b{font-size:13px;font-weight:600;color:#111827}
.t-onde-t small{font-size:12px;color:#6B7280}
.t-stop{display:flex!important;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background:#EA580C;box-shadow:0 0 0 6px rgba(234,88,12,.16)}
.t-stop::before{content:"";width:16px;height:16px;border-radius:4px;background:#fff}
.t-photo{display:block;width:100%;height:auto;margin-top:10px}
.t-loc{display:flex!important;align-items:center;gap:6px;padding:12px 18px 0;font-size:13px;color:#9CA3AF}
.t-outils{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:auto;padding:10px 24px 30px}
.t-outils>span{display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:4px;height:58px;border-radius:12px;color:#D1D5DB;font-size:11px}
.t-outils>span.on{background:#1F2329;color:#FDBA74}
.t-ok{display:flex!important;gap:10px;margin:16px 20px 0;padding:14px;border:1px solid #BBF7D0;border-radius:12px;background:#F0FDF4}
.t-ok b{font-size:15px;font-weight:600;color:#166534}
.t-ok small{margin-top:3px;font-size:13px;line-height:1.45;color:#15803D}
.t-bts{display:flex!important;gap:8px;padding:12px 20px 0}
.t-bts>span{display:flex!important;align-items:center;gap:6px;height:40px;padding:0 14px;border:1px solid #E5E7EB;border-radius:8px;background:#fff;font-size:14px;color:#111827}
.t-liste{margin:18px 20px 0;border:1px solid #E5E7EB;border-radius:12px;overflow:hidden}
.t-liste-h{display:flex!important;justify-content:space-between;padding:11px 14px;background:#F9FAFB;border-bottom:1px solid #E5E7EB;font-size:13px}
.t-liste-h b{font-weight:600;color:#111827}
.t-liste-h small{color:#6B7280}
.t-liste>span{display:flex!important;align-items:center;gap:10px;height:42px;padding:0 14px;border-top:1px solid #F3F4F6;font-size:14px;color:#374151}
.t-liste>span:nth-child(2){border-top:0}
.t-gen{margin-top:auto;padding:0 20px 34px}
.t-gen>span{display:flex!important;align-items:center;justify-content:center;gap:8px;height:54px;border-radius:14px;background:#10233F;color:#fff;font-size:16px;font-weight:600}
.t-gen small{margin-top:8px;text-align:center;font-size:12.5px;color:#6B7280}

@media (prefers-reduced-motion:no-preference){
  .tel .t-caret{animation:tcaret 1.05s steps(1) infinite}
  .t-onde i{animation:tonde 1.2s ease-in-out infinite}
  .t-onde i:nth-child(2n){animation-delay:-.3s}
  .t-onde i:nth-child(3n){animation-delay:-.65s}
  .t-onde i:nth-child(5n){animation-delay:-.9s}
}
@keyframes tcaret{50%{opacity:0}}
@keyframes tonde{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.45)}}

/* A. Accueil : le téléphone devant l'écran d'ordinateur */
.hero-visual .tel-hero{position:absolute;z-index:3;left:-44px;bottom:104px;pointer-events:none}
.hero-visual .tel-hero .tel-box{--k:.5}
.ecr3{display:flex;flex-wrap:wrap;gap:8px 22px;margin:22px 0 0;padding:14px 0 0;list-style:none;border-top:1px solid var(--line);font-size:14.5px;color:var(--ink-2)}
.ecr3 li{display:flex;align-items:center;gap:8px}
.ecr3 svg{width:18px;height:18px;flex:none}
.ecr3 li:last-child{font-weight:600;color:var(--ink)}

/* B. « Sur place » : le téléphone en main */
.sp-stage{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:48px 72px;align-items:center;margin-top:clamp(48px,6vw,84px)}
.sp-txt .chute{margin:0;padding-top:22px;border-top:1.5px solid var(--ink);font-family:var(--f-title);font-weight:600;font-size:clamp(28px,3vw,44px);line-height:1.1;letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.sp-txt .sp-dit{display:flex;align-items:center;gap:22px;margin-top:36px}
.sp-txt .sp-dit p{margin:0;font-family:var(--f-title);font-weight:600;font-size:clamp(22px,2vw,28px);line-height:1.2;color:var(--ink)}
.sp-txt .sp-dit .wave{height:56px}
.sp-txt .sp-note{margin:28px 0 0;max-width:30em;font-size:16px;line-height:1.6;color:var(--ink-2)}
.sp-tel{position:relative;width:460px;height:744px;display:flex;justify-content:center;align-items:flex-start}
.sp-arc{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sp-tel .tel-box{--k:.8;margin-top:36px}
.sp-card{position:absolute;left:-28px;top:430px;z-index:2;width:206px;padding:16px 18px;box-sizing:border-box;border-radius:14px;background:var(--white);border:1px solid var(--line);box-shadow:var(--shadow-tile)}
.sp-card .k{display:block;font-family:var(--f-mono);font-weight:500;font-size:12px;color:var(--ink-3)}
.sp-card .t{display:block;margin-top:6px;font-family:var(--f-title);font-weight:600;font-size:20px;line-height:1.2;color:var(--ink)}

/* C. Bande de nuit : tout le dossier tient dans une main */
.poche{position:relative;overflow:hidden}
.poche::before{content:"";position:absolute;left:50%;top:38%;width:1200px;height:900px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(242,140,78,.10),transparent 70%);pointer-events:none}
.poche .wrap{position:relative}
.poche .h2{max-width:14ch;margin:24px auto 0}
.poche .lead{max-width:34em;margin:26px auto 0;text-wrap:balance}
.poche-row{display:flex;justify-content:center;align-items:flex-end;gap:48px 56px;margin:clamp(56px,6vw,80px) 0 0;padding:0;list-style:none}
.poche-row li{display:flex;flex-direction:column;flex:none}
.poche-row .tel-box{--k:.7}
.poche-row li:nth-child(2){margin-bottom:40px}
.poche-row li:nth-child(2) .tel-box{--k:.82}
.poche-row .pc{margin-top:26px;padding-top:14px;border-top:1px solid rgba(255,255,255,.14);text-align:left}
.poche-row .pc .k{display:block;font-family:var(--f-mono);font-weight:500;font-size:12px;letter-spacing:.06em;color:var(--on-ink-3)}
.poche-row .pc .t{display:block;margin-top:6px;font-family:var(--f-title);font-weight:600;font-size:22px;color:#fff}
.poche-row .pc .x{display:block;margin-top:4px;font-size:15px;line-height:1.5;color:var(--on-ink-2)}
.poche-faits{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 40px;max-width:1000px;margin:clamp(48px,5vw,72px) auto 0;padding:26px 0 0;list-style:none;border-top:1px solid rgba(255,255,255,.14);font-size:15.5px;line-height:1.5;color:var(--on-ink-2)}
.poche-faits b{font-weight:600;color:#fff}
.poche .cta-block{display:flex;flex-direction:column;align-items:center;margin-top:36px}
.poche .cta-block .note{margin-top:14px;max-width:34em;font-size:14px;line-height:1.55;text-align:center}
.poche .fictif{margin:18px auto 0;text-align:center}

@media (max-width:1100px){
  .hero-visual .tel-hero{left:0;bottom:112px}
  .hero-visual .tel-hero .tel-box{--k:.42}
  .poche-row{gap:32px}
  .poche-row .tel-box{--k:.6}
  .poche-row li:nth-child(2) .tel-box{--k:.7}
}
@media (max-width:860px){
  .sp-stage{grid-template-columns:minmax(0,1fr);gap:40px}
  .sp-tel{width:100%;max-width:400px;height:auto;margin:0 auto;padding-bottom:12px}
  .sp-tel .tel-box{--k:.66;margin-top:20px}
  .sp-card{left:0;top:auto;bottom:36px;width:180px}
  .poche-row{justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;gap:24px;margin-inline:calc(50% - 50vw);padding:0 24px 10px;scrollbar-width:none}
  .poche-row::-webkit-scrollbar{display:none}
  .poche-row li{scroll-snap-align:center}
  .poche-row li:nth-child(2){margin-bottom:0}
  .poche-row .tel-box,.poche-row li:nth-child(2) .tel-box{--k:.6}
  .poche-row li{width:234px}
}
@media (max-width:560px){
  .hero-visual .tel-hero{left:-6px;bottom:124px}
  .hero-visual .tel-hero .tel-box{--k:.3}
  .sp-tel .tel-box{--k:.62}
  .sp-card{width:160px;padding:12px 14px}
  .sp-card .t{font-size:17px}
  .sp-txt .sp-dit{gap:14px}
  .ecr3{gap:8px 16px;font-size:14px}
}
@media print{.tel-hero,.sp-tel,.poche-row{display:none}}

/* === M3 (31/10/2026, 17 h) : retours de Pierre — chute centrée, scène du soir, autre vue sur la tablette === */

/* Chute « Plus de sinistres. Plus d'exigences. Pas plus d'heures. » centrée */
.sol-foot{text-align:center}

/* Tablette du haut : le chiffrage (menu latéral à gauche, sous le téléphone ; contenu lisible à droite) */
.hero .screen img.v12{width:100%;max-width:100%}

/* Le soir, il reste le rapport : la scène */
.soir-scene{position:relative;container-type:inline-size;width:min(1000px,100%);margin:clamp(40px,4vw,64px) auto 0}
.ss-stage{position:relative;height:46cqw}
.ss-stage::before{content:"";position:absolute;left:50%;top:44%;width:110cqw;height:72cqw;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(255,214,170,.20),rgba(242,140,78,.06) 55%,transparent 75%);pointer-events:none}
.ss-stage::after{content:"";position:absolute;left:4%;right:4%;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent)}
.ss-sheet{position:absolute;z-index:2;left:35cqw;top:1cqw;width:30cqw;aspect-ratio:1/1.414;box-sizing:border-box;padding:3.2cqw 3cqw;background:linear-gradient(175deg,#FFFDF7 0%,#F3EDE1 75%,#E6DECF);border-radius:2px;transform:rotate(-2deg);box-shadow:0 1px 0 rgba(0,0,0,.5),0 40px 60px -24px rgba(0,0,0,.85),0 0 120px -20px rgba(255,200,150,.35);text-align:left;font-family:var(--f-title);color:#5E574C}
.ss-sheet b{display:block;font-weight:600;font-size:2cqw;line-height:1.2;letter-spacing:-.01em;color:#3F3A33;margin-bottom:2.2cqw}
.ss-sheet .h{display:block;font-weight:600;font-size:1.3cqw;line-height:1.2;color:#5E574C;margin:1.7cqw 0 .2cqw}
.ss-sheet .h.off{color:#BDB4A5;margin-top:1.3cqw}
.ss-sheet i{display:block;height:.5cqw;border-radius:.25cqw;background:#D3CABA;margin-top:.8cqw;width:100%}
.ss-sheet i.s{width:58%}
.ss-sheet i.w1{background:#B5AA95}
.ss-sheet .tl{display:flex;align-items:center;gap:.35cqw;margin-top:.8cqw}
.ss-sheet .tl i{margin:0;width:44%;background:#B5AA95}
.ss-sheet em{display:block;flex:none;width:.2cqw;height:1.5cqw;background:#E8590C}
.ss-ph{position:absolute;z-index:1;width:15cqw;box-sizing:border-box;padding:.7cqw .7cqw 2.6cqw;background:#F7F4EE;border-radius:1px;box-shadow:0 18px 30px -14px rgba(0,0,0,.85);transform:rotate(var(--r))}
.ss-ph svg{display:block;width:100%;height:auto}
.ss-ph small{position:absolute;left:.9cqw;bottom:.75cqw;font-family:var(--f-mono);font-weight:500;font-size:1cqw;color:#7E776B}
.ss-clock{position:absolute;left:73cqw;top:2cqw;width:15cqw}
.ss-clock svg{display:block;width:100%;height:auto;overflow:visible}
.ss-h,.ss-m{transform-box:view-box;transform-origin:50px 50px}
.ss-h{transform:rotate(330deg)}
.ss-m{transform:rotate(0deg)}
.ss-cap{position:absolute;left:73cqw;top:20cqw;width:24cqw;text-align:left}
.ss-cap .k{display:block;font-family:var(--f-mono);font-weight:500;font-size:12px;letter-spacing:.06em;line-height:1.5;color:var(--on-ink-3)}
.ss-cap .t{display:block;margin-top:6px;font-family:var(--f-title);font-weight:600;font-size:clamp(40px,6cqw,68px);line-height:1;letter-spacing:-.03em;color:#fff}
.ss-cap .x{display:block;margin-top:8px;font-size:clamp(14px,1.6cqw,17px);line-height:1.45;color:var(--on-ink-2)}

@media (prefers-reduced-motion:no-preference){
  .js .soir-scene:not(.in) .ss-ph{opacity:0;transform:translateY(-4cqw) rotate(calc(var(--r) + 8deg))}
  .js .soir-scene:not(.in) .ss-h{transform:rotate(210deg)}
  .js .soir-scene:not(.in) .ss-sheet i.w1,.js .soir-scene:not(.in) .ss-sheet .tl i{width:0}
  .js .soir-scene:not(.in) .ss-cap{opacity:0}
  .js .soir-scene.in .ss-ph{animation:ssdrop .8s var(--ease) both}
  .js .soir-scene.in .ss-ph.p1{animation-delay:.35s}
  .js .soir-scene.in .ss-ph.p2{animation-delay:.55s}
  .js .soir-scene.in .ss-ph.p3{animation-delay:.75s}
  .js .soir-scene.in .ss-ph.p4{animation-delay:.95s}
  .js .soir-scene.in .ss-ph.p5{animation-delay:1.15s}
  .js .soir-scene.in .ss-h{animation:ssh 4.2s cubic-bezier(.45,0,.25,1) .9s both}
  .js .soir-scene.in .ss-m{animation:ssm 4.2s cubic-bezier(.45,0,.25,1) .9s both}
  .js .soir-scene.in .ss-sheet i.w1{animation:sswrite 1.8s ease-out 1.4s both}
  .js .soir-scene.in .ss-sheet .tl i{animation:sswrite 3.2s ease-out 3.2s both}
  .js .soir-scene.in .ss-cap{animation:fade .9s ease 4.4s both}
  .soir-scene .ss-sheet em{animation:ssblink 1.05s steps(1) infinite}
}
@keyframes ssdrop{from{opacity:0;transform:translateY(-4cqw) rotate(calc(var(--r) + 8deg))}to{opacity:1;transform:rotate(var(--r))}}
@keyframes ssh{from{transform:rotate(210deg)}to{transform:rotate(330deg)}}
@keyframes ssm{from{transform:rotate(0deg)}to{transform:rotate(1440deg)}}
@keyframes sswrite{from{width:0}}
@keyframes ssblink{50%{opacity:0}}

@media (max-width:560px){
  .hero-visual .tel-hero{left:auto;right:-6px}
  .ss-stage{height:112cqw}
  .ss-sheet{left:24cqw;top:30cqw;width:56cqw;padding:5.4cqw 5cqw}
  .ss-sheet b{font-size:3.6cqw;margin-bottom:3.4cqw}
  .ss-sheet .h{font-size:2.5cqw;margin:2.8cqw 0 .3cqw}
  .ss-sheet .h.off{margin-top:2.2cqw}
  .ss-sheet i{height:.9cqw;margin-top:1.4cqw;border-radius:.45cqw}
  .ss-sheet .tl{margin-top:1.4cqw;gap:.6cqw}
  .ss-sheet em{width:.4cqw;height:2.8cqw}
  .ss-ph{width:30cqw;padding:1.4cqw 1.4cqw 5cqw}
  .ss-ph small{font-size:2cqw;left:1.7cqw;bottom:1.5cqw}
  .ss-ph.p3,.ss-ph.p4{display:none}
  .ss-ph.p1{left:2cqw!important;top:4cqw!important}
  .ss-ph.p2{left:26cqw!important;top:1cqw!important}
  .ss-ph.p5{left:3cqw!important;top:66cqw!important}
  .ss-clock{left:68cqw;top:3cqw;width:27cqw}
  .ss-cap{position:static;width:auto;margin-top:26px;text-align:center}
  .ss-cap .t{font-size:56px}
}

/* === M4 (31/10/2026, 20 h 30) : vraies photos de terrain (Unsplash, Pexels — licences libres, usage commercial) à la place des dessins === */
.t-grille img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:10px}
.tel .t-photo-w{position:relative;display:block;margin-top:10px}
.t-photo-w img{display:block;width:100%;height:auto}
.t-photo-w .t-annot{position:absolute;inset:0;width:100%;height:100%}
.ss-ph img{display:block;width:100%;height:auto;aspect-ratio:5/4;object-fit:cover}