/* Mon histoire : styles propres à la page (préfixe his-) */

/* ---------- Héros : portrait + citation ---------- */
.his-hero.page-hero.simple{padding-bottom:90px}
.his-hero .human2{margin-top:56px}
.his-hero .portrait2{width:100%;margin:0 auto}
.his-pin{position:absolute;top:16px;right:16px;display:inline-flex;align-items:center;gap:8px;padding:8px 13px 8px 9px;border-radius:999px;background:#17414A;color:#F3EDE4;font-size:13.5px;font-weight:600;box-shadow:0 12px 30px -14px rgba(15,49,56,.7)}
.his-pin i{width:9px;height:9px;border-radius:50%;background:#FFB020;box-shadow:0 0 0 0 rgba(255,176,32,.6)}
@media (prefers-reduced-motion:no-preference){.his-pin i{animation:hisPulse 2.2s ease-out infinite}}
@keyframes hisPulse{0%{box-shadow:0 0 0 0 rgba(255,176,32,.6)}80%,100%{box-shadow:0 0 0 10px rgba(255,176,32,0)}}
.his-hero .big-q{max-width:34em}

/* ---------- Mes soirées : avant / maintenant (brume) ---------- */
.his-eve{background:var(--mist);border-top:0}
.his-grid{display:grid;gap:48px;align-items:center;margin-top:48px}
@media (min-width:980px){.his-grid{grid-template-columns:1.1fr .9fr;gap:72px}}
.his-tasks{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.his-tasks li{position:relative;display:grid;grid-template-columns:62px 1fr auto;align-items:center;gap:14px;padding:16px 18px;border-radius:18px;background:#FFFAF3;border:1px solid var(--mist-line)}
.his-tasks time{font-family:var(--f-m);font-size:13px;color:var(--pet-txt)}
.his-tasks .t{position:relative;font-weight:600;font-size:16px;color:var(--t1);justify-self:start}
.his-tasks .t::after{content:"";position:absolute;left:-2px;right:-2px;top:52%;height:2px;border-radius:2px;background:#C8613B;transform:scaleX(var(--s,1));transform-origin:left}
.his-tasks .ok{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:999px;background:#17414A;color:#F3EDE4;font-size:12.5px;font-weight:600;white-space:nowrap}
.his-tasks .ok svg{color:#FFB020}
.his-tasks li.done .t{color:#7A7068}
.his-tasks .last{background:#17414A;border-color:#17414A}
.his-tasks .last time{color:#FFB020}
.his-tasks .last .t{color:#F3EDE4}
.his-tasks .last .t::after{display:none}
.his-tasks .last .ok{background:#FF6B2C;color:#1A0A04}
.his-tasks .last .ok svg{color:#1A0A04}
@media (max-width:520px){
  .his-tasks li{grid-template-columns:52px 1fr;padding:14px 14px}
  .his-tasks .ok{grid-column:2;justify-self:start}
  .his-tasks .t{font-size:15px}
}
/* état animé : rayures et pastilles qui arrivent une par une */
.his-tasks.js-anim li:not(.last) .t{--s:0}
.his-tasks.js-anim li .ok{opacity:0;transform:scale(.7)}
.his-tasks.js-anim li.last{opacity:0;transform:translateY(14px) scale(.97)}
.his-tasks.js-anim .t::after{transition:transform .5s ease-out}
.his-tasks.js-anim .ok{transition:opacity .35s,transform .45s cubic-bezier(.34,1.8,.64,1)}
.his-tasks.js-anim li.last{transition:opacity .5s,transform .6s cubic-bezier(.34,1.56,.64,1)}
.his-tasks.js-anim li.done .t{--s:1}
.his-tasks.js-anim li.done .ok{opacity:1;transform:none}
.his-tasks.js-anim li.last.done{opacity:1;transform:none}
.his-tasks li .t{transition:color .4s}
.his-ph{display:flex;flex-direction:column;align-items:center;gap:14px}
.his-ph .phone{max-width:310px;box-shadow:0 40px 90px -36px rgba(15,49,56,.55)}
.his-ex{font-family:var(--f-m);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--pet-txt);border:1px dashed rgba(23,65,74,.35);border-radius:6px;padding:3px 8px}
.his-sum{margin-top:6px;display:grid;gap:3px;font-size:12.5px}

/* ---------- Comment Sam est né (bande pétrole) ---------- */
.his-band{background:var(--pet);border-top:0}
.his-band h2{color:var(--pet-fg)}
.his-band .mute,.his-band .label{color:var(--pet-mute)}
.his-band .eyebrow i{background:#FFB020}
.his-tw{position:relative;margin-top:56px;--p:1}
.his-line{position:absolute;left:27px;top:28px;bottom:28px;width:3px;border-radius:3px;background:rgba(255,255,255,.14)}
.his-line i{position:absolute;inset:0;border-radius:3px;background:linear-gradient(180deg,#FF6B2C,#FFB020);transform-origin:top;transform:scaleY(var(--p))}
.his-steps{list-style:none;margin:0;padding:0;display:grid;gap:34px;position:relative}
.his-steps li{display:grid;grid-template-columns:56px 1fr;gap:4px 18px}
.his-dot{grid-row:span 3;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:#0F3138;color:var(--pet-mute);border:2px solid rgba(255,255,255,.18);font-family:var(--f-d);font-weight:700;font-size:19px;transition:background .4s,color .4s,border-color .4s,transform .5s cubic-bezier(.34,1.56,.64,1)}
.his-steps li.on .his-dot{background:#FFB020;border-color:#FFB020;color:#17414A;transform:scale(1.08)}
.his-steps li.you.on .his-dot{background:#FF6B2C;border-color:#FF6B2C;color:#1A0A04}
.his-when{font-family:var(--f-m);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#FFB020;padding-top:4px}
.his-steps b{font-family:var(--f-d);font-weight:600;font-size:22px;letter-spacing:-.025em;line-height:1.15;color:var(--pet-fg)}
.his-steps p{color:#D4E0DE;font-size:15px}
@media (min-width:900px){
  .his-line{left:28px;right:28px;top:27px;bottom:auto;width:auto;height:3px}
  .his-line i{transform-origin:left;transform:scaleX(var(--p));background:linear-gradient(90deg,#FF6B2C,#FFB020)}
  .his-steps{grid-template-columns:repeat(4,1fr);gap:26px}
  .his-steps li{grid-template-columns:1fr;gap:0}
  .his-dot{grid-row:auto;margin-bottom:22px}
  .his-steps b{margin:6px 0 8px}
}

/* ---------- Promesses ---------- */
.his-prom{background:var(--bg-alt)}
.his-prom .eng4{margin-top:44px}
@media (min-width:980px){.his-prom .eng4{grid-template-columns:repeat(4,1fr);gap:16px}}
.his-prom .eng4 li{padding:24px 22px 22px;border-radius:24px;transition:translate .35s cubic-bezier(.34,1.56,.64,1)}
.his-prom .eng4 li:hover{translate:0 -5px}
.his-prom .eng4 b{font-size:18px}
.his-prom .e-ic{width:46px;height:46px;border-radius:14px}
.his-prom .eng4 li:nth-child(4){background:#8C3B22;border-color:#8C3B22}
.his-prom .eng4 li:nth-child(4) b{color:#F6F4EE}
.his-prom .eng4 li:nth-child(4) > span:last-child{color:#EAD7C8}
.his-prom .eng4 li:nth-child(4) .e-ic{background:rgba(255,255,255,.14);color:#FFB020}
.his-sign{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:40px;padding:22px 24px;border-radius:24px;background:#FFFAF3;border:1px solid var(--line)}
.his-sign img{width:56px;height:56px;border-radius:50%;object-fit:cover}
.his-sign p{flex:1;min-width:220px;font-size:17px;color:var(--t1)}
.his-sign p span{display:block;font-size:14.5px;color:var(--t2);margin-top:2px}
@media (prefers-reduced-motion:reduce){.his-prom .eng4 li:hover{translate:none}}
.his-tasks li.last .t{color:#F3EDE4}
.his-steps li{align-content:start}

/* Mon histoire : CTA sous la citation + bandeau des gains */
.his-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:26px}
.his-cta span{font-size:14.5px;color:var(--t2)}
.his-gain{list-style:none;padding:0;margin:44px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.his-gain li{padding:30px 26px;border-radius:24px;display:flex;flex-direction:column;gap:12px}
.his-gain .g1{background:#FF6B2C;color:#140803}
.his-gain .g2{background:#17414A;color:#F3EDE4}
.his-gain .g3{background:#FFFAF3;border:1px solid var(--line-2)}
.his-gain .gk{font-family:var(--f-m);font-size:12px;letter-spacing:.12em;text-transform:uppercase;opacity:.75}
.his-gain b{font-family:var(--f-d);font-weight:700;font-size:clamp(24px,2.4vw,32px);letter-spacing:-.03em;line-height:1.05}
.his-gain p{font-size:16px;line-height:1.55;opacity:.88;margin:0}
@media (max-width:900px){.his-gain{grid-template-columns:1fr}}