/* =====================================================
   CB Systems · Couche de polish
   Micro-interactions, transitions douces, finitions
   ===================================================== */

:root{
  /* Easing & durées calibrées */
  --ease-out: cubic-bezier(.22,1,.36,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --t-quick: .18s;
  --t-base: .32s;
  --t-slow: .55s;
}

/* ===== Smooth scroll global ===== */
html{scroll-behavior:smooth}

/* ===== Focus visible accessible ===== */
*:focus{outline:none}
*:focus-visible{
  outline:2px solid var(--brick);
  outline-offset:3px;
  border-radius:1px;
}
.btn:focus-visible,.nav-cta:focus-visible{
  outline-offset:4px;
}

/* ===== Body grain ===== */
body{transition:background-color var(--t-base) var(--ease-soft)}

/* ===== Reveal · easing plus doux ===== */
.reveal{
  opacity:0;transform:translateY(18px);
  transition:opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.reveal.is-shown{opacity:1;transform:none}

/* ===== Nav · underline animée + scrolled state ===== */
.nav{
  transition:padding var(--t-base) var(--ease-soft),
             background var(--t-base) var(--ease-soft),
             border-color var(--t-base) var(--ease-soft);
}
.nav.is-scrolled{padding:8px 20px}
.nav-logo{transition:transform var(--t-base) var(--ease-out)}
.nav-logo:hover{transform:translateX(-1px)}
.nav-logo .stamp{
  transition:transform var(--t-base) var(--ease-spring),
             background var(--t-base) var(--ease-soft);
}
.nav-logo:hover .stamp{transform:rotate(-4deg) scale(1.05);background:var(--brick-light)}

.nav-links a{
  position:relative;
  border-bottom:none !important;
  transition:color var(--t-base) var(--ease-soft);
}
.nav-links a::after{
  content:"";position:absolute;left:0;right:0;bottom:-4px;
  height:1px;background:var(--brick-light);
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--t-base) var(--ease-out);
}
.nav-links a:hover::after,
.nav-links a.is-current::after{transform:scaleX(1)}

.nav-cta{
  position:relative;overflow:hidden;
  transition:background var(--t-base) var(--ease-soft),
             color var(--t-base) var(--ease-soft),
             border-color var(--t-base) var(--ease-soft),
             transform var(--t-quick) var(--ease-soft);
}
.nav-cta:hover{transform:translateY(-1px)}
.nav-cta:active{transform:translateY(0)}

/* ===== Boutons · finitions ===== */
.btn{
  position:relative;overflow:hidden;
  transition:background var(--t-base) var(--ease-soft),
             color var(--t-base) var(--ease-soft),
             border-color var(--t-base) var(--ease-soft),
             transform var(--t-quick) var(--ease-soft),
             box-shadow var(--t-base) var(--ease-soft);
  will-change:transform;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0);transition-duration:.08s}
.btn-primary:hover{box-shadow:0 8px 24px -8px rgba(74,24,18,.4)}
.btn-ghost:hover{box-shadow:0 8px 24px -8px rgba(42,24,22,.3)}
.btn-ink:hover{box-shadow:0 8px 24px -8px rgba(42,24,22,.5)}
.btn .arr{transition:transform var(--t-base) var(--ease-spring)}
.btn:hover .arr{transform:translateX(5px)}

/* Link button */
.btn-link{position:relative}
.btn-link::after{
  content:"";position:absolute;left:0;right:0;bottom:6px;
  height:1px;background:currentColor;
  transform:scaleX(.4);transform-origin:left;
  transition:transform var(--t-base) var(--ease-out);
}
.btn-link:hover::after{transform:scaleX(1)}
.btn-link .arr{transition:transform var(--t-base) var(--ease-spring)}
.btn-link:hover .arr{transform:translateX(5px)}

/* ===== Eyebrow & kicker dot · pulse ===== */
.eyebrow-dot,.flow-dot,.flow-pulse{
  box-shadow:0 0 0 0 var(--brick-light);
  animation:pulse-dot 1.8s cubic-bezier(.4,0,.6,1) infinite;
}
@keyframes pulse-dot{
  0%,100%{box-shadow:0 0 0 0 rgba(196,100,81,.6);opacity:1}
  50%{box-shadow:0 0 0 6px rgba(196,100,81,0);opacity:.6}
}

/* ===== Hero text emphasis ===== */
.hero-h1 em{display:inline-block}

/* ===== Flow demo · finitions ===== */
.flow{transition:transform var(--t-base) var(--ease-soft),box-shadow var(--t-base) var(--ease-soft)}
.flow:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 0 var(--brick)}
.flow-node{transition:opacity var(--t-base) var(--ease-soft),background var(--t-base) var(--ease-soft);padding:12px 8px;margin:0 -8px;border-radius:2px}
.flow-node.active{background:rgba(196,100,81,.12)}
.flow-node:not(.done):not(.active){opacity:.5}
.flow-node-check{
  animation:check-pop .45s var(--ease-spring);
  transform-origin:center;
}
@keyframes check-pop{
  from{transform:scale(0);opacity:0}
  to{transform:scale(1);opacity:1}
}
.flow-edge{transition:background var(--t-base) var(--ease-soft),opacity var(--t-base) var(--ease-soft)}

/* ===== Live board · atelier en activité ===== */
.lb{
  background:var(--ink);color:var(--bg);
  border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);
  padding:0;font-family:var(--mono);overflow:hidden;
  position:relative;
}
.lb-head{
  display:flex;align-items:center;gap:14px;
  padding:14px 24px;
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--brick-light);
  border-bottom:1px solid rgba(236,228,216,.12);
}
.lb-head-dot{width:7px;height:7px;background:var(--brick-light);border-radius:50%;animation:pulse-dot 1.8s var(--ease-soft) infinite}
.lb-head-sep{flex:1;height:1px;background:rgba(236,228,216,.15)}
.lb-head-clock{color:var(--bg-2);letter-spacing:.16em}
.lb-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.lb-cell{
  padding:22px 24px;border-right:1px solid rgba(236,228,216,.1);
  display:flex;flex-direction:column;gap:8px;
  transition:background var(--t-base) var(--ease-soft);
  position:relative;overflow:hidden;
  animation:lb-cell-in .55s var(--ease-out) both;
}
@keyframes lb-cell-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.lb-cell:nth-child(2){animation-delay:.08s}
.lb-cell:nth-child(3){animation-delay:.16s}
.lb-cell:nth-child(4){animation-delay:.24s}
.lb-cell:last-child{border-right:none}
.lb-cell:hover{background:rgba(196,100,81,.08)}
.lb-cell-time{
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--brick-light);display:flex;align-items:center;gap:8px;
}
.lb-cell-time::before{content:"";width:6px;height:6px;background:var(--brick-light);display:inline-block}
.lb-cell-job{
  font-family:var(--grot);font-weight:500;font-size:17px;line-height:1.25;
  letter-spacing:-.015em;color:var(--bg);text-transform:none;
}
.lb-cell-client{
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(236,228,216,.72);
}
.lb-cell-status{
  position:absolute;top:18px;right:20px;font-size:9px;letter-spacing:.18em;
  text-transform:uppercase;font-weight:500;
}
.lb-cell-status.ok{color:var(--brick-light)}
.lb-cell-status.live{color:#c9b88a}
.lb-cell-status.live::after{content:"";display:inline-block;width:5px;height:5px;background:#c9b88a;margin-left:6px;animation:pulse-dot 1.2s var(--ease-soft) infinite;vertical-align:middle}
@media (max-width:900px){
  .lb-grid{grid-template-columns:1fr 1fr}
  .lb-cell{border-right:none;border-bottom:1px solid rgba(236,228,216,.1)}
  .lb-cell:nth-child(odd){border-right:1px solid rgba(236,228,216,.1)}
  .lb-cell:nth-last-child(-n+2){border-bottom:none}
}
@media (max-width:560px){
  .lb-grid{grid-template-columns:1fr}
  .lb-cell{border-right:none !important;border-bottom:1px solid rgba(236,228,216,.1)}
}

/* ===== Stats · trait brique animé ===== */
.stat{
  position:relative;
  transition:transform var(--t-base) var(--ease-soft);
}
.stat::before{
  content:"";position:absolute;left:0;right:0;top:-2px;
  height:2px;background:var(--brick);
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--t-slow) var(--ease-out);
}
.stat.is-shown::before,
.reveal.is-shown.stat::before{transform:scaleX(1)}
.stat:hover{transform:translateY(-2px)}

/* ===== Pains · meilleure transition ===== */
.pain{transition:padding-left .5s var(--ease-soft),background .6s var(--ease-soft),border-color .5s var(--ease-soft)}
.pain:hover{border-color:rgba(122,46,35,.5)}
.pain.is-flipped{border-color:rgba(36,100,60,.5)}

/* ===== Cards · coordonnées ===== */
.card{
  transition:transform var(--t-base) var(--ease-out),
             box-shadow var(--t-base) var(--ease-out),
             background var(--t-base) var(--ease-soft);
}
.card-cta{transition:gap var(--t-base) var(--ease-out)}
.card:hover .card-cta{gap:14px}
.card-list li{transition:padding-left var(--t-quick) var(--ease-soft)}
.card:hover .card-list li{padding-left:22px}

/* ===== Steps · animation barre brique ===== */
.step{transition:background var(--t-base) var(--ease-soft)}
.step::before{transition:width .7s var(--ease-out) !important}
.step-num{transition:background var(--t-base) var(--ease-soft),letter-spacing var(--t-base) var(--ease-out)}
.step:hover .step-num{letter-spacing:.22em}
.step-when{transition:color var(--t-base) var(--ease-soft)}
.step:hover .step-when{color:var(--brick-deep)}

/* ===== Video play · ripple ===== */
.video-play{
  transition:transform var(--t-base) var(--ease-spring),
             box-shadow var(--t-base) var(--ease-soft),
             background var(--t-base) var(--ease-soft);
}
.video-play::before,.video-play::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:1px solid var(--brick-light);
  animation:video-ripple 2.4s var(--ease-out) infinite;
}
.video-play::after{animation-delay:1.2s}
@keyframes video-ripple{
  0%{transform:scale(1);opacity:.6}
  100%{transform:scale(1.6);opacity:0}
}
.video:hover .video-play{box-shadow:0 0 60px rgba(196,100,81,.5)}

/* ===== FAQ · transition douce ===== */
.faq-row{transition:background var(--t-base) var(--ease-soft)}
.faq-row:hover{background:rgba(122,46,35,.04)}
.faq-q{transition:padding var(--t-base) var(--ease-out)}
.faq-row:hover .faq-q{padding-left:8px;padding-right:8px}
.faq-toggle{transition:transform var(--t-base) var(--ease-spring),color var(--t-base) var(--ease-soft)}
.faq-row.is-open .faq-toggle{transform:rotate(45deg);color:var(--brick-deep)}
.faq-row.is-open .faq-q{padding-left:8px;padding-right:8px}
.faq-a{transition:grid-template-rows .45s var(--ease-out)}
.faq-a > div{transition:padding var(--t-base) var(--ease-soft)}

/* Accordeon : "+" plutôt que la flèche qui tourne (plus lisible) */
.faq-row .faq-toggle{font-weight:300}

/* ===== CTA block · cercles qui pulsent ===== */
.cta-block::before{animation:cta-pulse 6s var(--ease-soft) infinite}
.cta-block::after{animation:cta-pulse 6s var(--ease-soft) infinite -3s}
.cta-ring{animation:cta-pulse 6s var(--ease-soft) infinite -1.5s}
@keyframes cta-pulse{
  0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.4}
  50%{transform:translate(-50%,-50%) scale(1.03);opacity:.55}
}

/* ===== Footer · liens ===== */
.foot a{
  position:relative;
  transition:color var(--t-base) var(--ease-soft),padding-left var(--t-quick) var(--ease-soft);
}
.foot ul a:hover{color:var(--brick-light);padding-left:6px}

/* ===== Page banner · entrée subtile ===== */
.page-banner{transition:background var(--t-base) var(--ease-soft)}

/* ===== Posts · finitions ===== */
.post{transition:transform var(--t-base) var(--ease-out),box-shadow var(--t-base) var(--ease-out),background var(--t-base) var(--ease-soft),border-color var(--t-base) var(--ease-soft)}
.post:hover{border-color:var(--brick)}
.post-cta{transition:gap var(--t-base) var(--ease-out),color var(--t-base) var(--ease-soft)}
.post:hover .post-cta{gap:14px;color:var(--brick-deep)}

/* ===== Timeline (méthode) ===== */
.tl-step{transition:padding-left var(--t-base) var(--ease-out),background var(--t-base) var(--ease-soft),border-color var(--t-base) var(--ease-soft)}
.tl-step:hover{border-color:var(--brick)}
.tl-deliv span{transition:background var(--t-base) var(--ease-soft),color var(--t-base) var(--ease-soft),transform var(--t-quick) var(--ease-soft)}
.tl-deliv span:not(:first-child):hover{background:var(--brick);color:var(--bg);transform:translateY(-1px)}

/* ===== Services pack · finitions ===== */
.svc-feats li{transition:padding-left var(--t-base) var(--ease-out),background var(--t-base) var(--ease-soft)}
.svc-feats li:hover{padding-left:14px;background:rgba(122,46,35,.04)}
.svc-feat-num{transition:transform var(--t-base) var(--ease-spring)}
.svc-feats li:hover .svc-feat-num{transform:translateX(4px) scale(1.1)}

/* ===== Calendrier mock · finitions ===== */
.cal-mock-day,.cal-mock-slot{
  transition:background var(--t-base) var(--ease-soft),
             color var(--t-base) var(--ease-soft),
             border-color var(--t-base) var(--ease-soft),
             transform var(--t-quick) var(--ease-soft);
}
.cal-mock-day:not(.is-off):hover,.cal-mock-slot:hover{transform:translateY(-2px)}
.cal-mock-slot:hover{box-shadow:0 4px 12px -4px rgba(122,46,35,.3)}

/* ===== Contact rows ===== */
.contact-row{transition:padding-left var(--t-base) var(--ease-out),background var(--t-base) var(--ease-soft)}
.contact-row:hover{padding-left:8px;background:rgba(122,46,35,.04)}
.contact-row-val a{transition:color var(--t-base) var(--ease-soft),border-color var(--t-base) var(--ease-soft)}
.contact-row-val a:hover{color:var(--brick-deep)}

/* ===== Selection brique partout ===== */
::selection{background:var(--brick);color:var(--bg);text-shadow:none}

/* ===== Scrollbar discret ===== */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--brick);border:2px solid var(--bg);border-radius:5px}
::-webkit-scrollbar-thumb:hover{background:var(--brick-deep)}

/* ===== Réduction du mouvement ===== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  /* Forcer la visibilité des éléments reveal en mode reduced-motion */
  .reveal{opacity:1 !important;transform:none !important}
}

/* ===== Typographie : ligature & details ===== */
body{
  font-feature-settings:'kern','liga','calt','ss01';
  text-rendering:optimizeLegibility;
}
.hero-h1,.h1,.h2,.h3,.cta-title,.tl-title,.step-title,.card-title,.post-title,.faq-q,.svc-feat-title,.contact-info h3,.svc-pack-meta h3,.pain-title{
  text-wrap:balance;
}
.hero-lede,.lede,.step-desc,.post-excerpt,.tl-desc,.card-soon-text,.contact-info p,.about-text,.svc-feat-desc{
  text-wrap:pretty;
}

/* ===== Logo stamp avec effet brick texture ===== */
.nav-logo .stamp,.foot-brand .stamp{
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.08) 0, transparent 50%),
    var(--brick);
  box-shadow:inset -1px -1px 0 rgba(0,0,0,.2),inset 1px 1px 0 rgba(255,255,255,.08);
}

/* ===== Ajouts : accessibilité & calendrier ===== */
.skip-link{position:absolute;left:-9999px;top:0;z-index:300;background:var(--ink);color:var(--bg);padding:10px 16px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;border-radius:0 0 8px 0}
.skip-link:focus{left:0}
button.cal-mock-day{background:none;border:0;font:inherit;color:inherit;cursor:pointer}
button.cal-mock-day:disabled{cursor:default}
.cal-month-nav{display:inline-flex;align-items:center;gap:8px}
.cal-nav-btn{background:none;border:0;font-family:inherit;font-size:15px;line-height:1;color:var(--brick);cursor:pointer;padding:0 4px}
.cal-nav-btn:disabled{opacity:.3;cursor:default}
.cv-submit:disabled{opacity:.6;cursor:wait}

/* Créneaux indisponibles (dispo temps réel) */
.ct-slot:disabled{cursor:not-allowed}
.ct-slot:disabled:hover{background:var(--bg);transform:none}
.ct-slot-off{opacity:.38}
.ct-slot-off .ct-slot-time{text-decoration:line-through 1.5px var(--brick)}
.ct-slots-full{margin:0 24px 14px;padding:12px 16px;border:1.5px solid var(--brick);background:rgba(122,46,35,.07);font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--brick)}
@media(max-width:560px){.ct-slots-full{margin:0 12px 12px}}

/* Microcopy parcours contact */
.ct-mins{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--soft);text-align:center;margin:0 0 18px}
/* Étape suivante après confirmation */
.cv-c-next-step{display:inline-block;margin-top:16px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#ece4d8;border:1.5px solid rgba(236,228,216,.5);padding:9px 14px;text-decoration:none;transition:background .2s,color .2s}
.cv-c-next-step:hover{background:#ece4d8;color:var(--brick)}

/* Disclaimers résultats (protection juridique) */
.roi-disclaimer{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;line-height:1.5;color:var(--soft);margin-top:12px;max-width:420px}
.roi-band .roi-disclaimer{color:rgba(236,228,216,.72)}

/* Carte « l'atelier en bref » (page L'atelier) */
.atelier-card{background:var(--ink);border:2px solid var(--ink);color:var(--bg);font-family:var(--mono)}
.atelier-card-head{display:flex;align-items:center;gap:8px;padding:13px 16px;border-bottom:1px solid rgba(236,228,216,.15);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--brick-light)}
.atelier-dot{width:8px;height:8px;border-radius:50%;background:var(--brick-light);animation:blink 1.4s infinite;flex-shrink:0}
.atelier-row{display:flex;justify-content:space-between;gap:16px;padding:12px 16px;border-bottom:1px solid rgba(236,228,216,.08);align-items:baseline}
.atelier-row:last-child{border-bottom:none}
.atelier-k{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:rgba(236,228,216,.72);white-space:nowrap}
.atelier-v{font-family:var(--grot);font-size:13.5px;font-weight:600;color:var(--bg);text-align:right;letter-spacing:-.01em}
@media(max-width:560px){.atelier-row{flex-direction:column;gap:3px}.atelier-v{text-align:left}}

/* Comment ça marche (home) */
.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;border-top:2px solid var(--ink);padding-top:30px}
.step3{display:flex;flex-direction:column;gap:10px;padding-right:18px}
.step3-num{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--brick);font-weight:500}
.step3-t{font-family:var(--grot);font-weight:700;font-size:20px;letter-spacing:-.02em;line-height:1.15}
.step3-d{font-size:14px;line-height:1.55;color:var(--ink-soft)}
@media(max-width:760px){.steps3{grid-template-columns:1fr;gap:26px}.step3{padding-right:0}}

/* Accessibilité : placeholders lisibles */
.cv-input::placeholder,.cf-input::placeholder,.cf-textarea::placeholder{color:var(--ink-mute);opacity:1}

/* Lecteurs d'écran uniquement */
.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}