/* ============================================================
   Deepak Ramguttee · Automatisation IA — atelier humain
   Papier crème, encre chaude, notes manuscrites.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,900;1,9..144,400;1,9..144,900&family=Caveat:wght@600&display=swap');

:root{
  --paper:#faf6ee;
  --paper-warm:#f3ecdf;
  --card:#fffdf8;
  --ink:#2c2519;
  --soft:#6b5f4d;
  --faint:#9a8e79;
  --line:#e2d8c6;
  --accent:#d9480f;
  --accent-warm:#e8590c;
  --ok:#2f7d4f;
  --step:clamp(1rem,.94rem + .3vw,1.1rem);
  --pad:clamp(1.25rem,4vw,3rem);
  --maxw:70rem;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--paper);color:var(--ink);
  font:400 var(--step)/1.75 Georgia,'Times New Roman',serif;
  -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(rgba(120,95,60,.055) 1px,transparent 1.4px);
  background-size:26px 26px;
}
img,svg{max-width:100%;display:block}
a{color:var(--accent)}
::selection{background:var(--accent);color:#fff}

.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
section{padding:clamp(3.5rem,7vw,6rem) 0;position:relative}

h1,h2,h3{
  font-family:'Fraunces',Georgia,serif;font-weight:900;
  letter-spacing:-.01em;line-height:1.08;text-wrap:balance;
}
h2{font-size:clamp(1.7rem,1.15rem + 2.2vw,2.6rem);margin-bottom:1.4rem}
h3{font-size:1.12rem;font-weight:600}
p{max-width:62ch}
em.mark{
  font-style:italic;color:var(--accent);
  background:linear-gradient(transparent 68%,rgba(232,89,12,.18) 68%);
}

/* --- annotations manuscrites -------------------------------- */
.hand{
  font-family:'Caveat',cursive;font-size:1.35rem;line-height:1.3;
  color:var(--accent);rotate:-1.5deg;display:inline-block;max-width:24ch;
}
.hand.quiet{color:var(--soft)}

/* --- kicker + index de section ------------------------------ */
.kicker{
  font-family:Georgia,serif;font-style:italic;font-size:.95rem;
  color:var(--soft);margin-bottom:1rem;display:flex;align-items:center;gap:.7rem;
}
.kicker::before{content:"";width:2.4rem;height:2px;background:var(--accent);flex:none;border-radius:2px}
.sec-idx{display:none}

/* --- séparateur couture ------------------------------------- */
.hazard{
  height:0;border:none;margin:0 auto;max-width:var(--maxw);
  border-top:2px dashed var(--line);
  position:relative;
}
.hazard::after{
  content:"✂";position:absolute;left:calc(var(--pad) - .4rem);top:-.85rem;
  color:var(--faint);font-size:1.05rem;background:var(--paper);padding:0 .3rem;
}

/* --- header -------------------------------------------------- */
.site-head{
  position:sticky;top:0;z-index:50;
  background:rgba(250,246,238,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.site-head .wrap{
  display:flex;align-items:center;gap:1.3rem;flex-wrap:wrap;
  padding-top:.8rem;padding-bottom:.8rem;
}
.brand{
  font-family:'Fraunces',Georgia,serif;font-weight:900;font-size:1.02rem;
  color:var(--ink);text-decoration:none;white-space:nowrap;letter-spacing:.01em;
}
.brand b{color:var(--accent)}
.site-head nav{display:flex;gap:1.2rem;flex-wrap:wrap;margin-left:auto}
.site-head nav a{
  font-family:Georgia,serif;font-size:.92rem;text-decoration:none;color:var(--soft);
  padding:.25rem 0;border-bottom:2px solid transparent;
}
.site-head nav a:hover{color:var(--ink)}
.site-head nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--accent)}

/* --- boutons ------------------------------------------------- */
.btn{
  display:inline-block;font-family:'Fraunces',Georgia,serif;font-weight:600;
  font-size:1rem;text-decoration:none;background:var(--accent);color:#fff;
  padding:.85rem 1.7rem;border:2px solid var(--accent);border-radius:999px;
  box-shadow:0 3px 0 rgba(120,50,10,.25);
  transition:transform .12s,box-shadow .12s,background .15s;
}
.btn:hover{background:var(--accent-warm);transform:translateY(-1px);box-shadow:0 4px 0 rgba(120,50,10,.25)}
.btn:active{transform:translateY(1px);box-shadow:0 1px 0 rgba(120,50,10,.25)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line);box-shadow:none}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent);background:transparent}
.btn.small{font-size:.88rem;padding:.5rem 1.1rem}
.btn-row{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:2rem;align-items:center}

/* --- hero ---------------------------------------------------- */
.hero{padding-top:clamp(2.8rem,6vw,5rem);overflow:hidden}
.hero h1{font-size:clamp(2.3rem,1.1rem + 4.8vw,4.4rem);max-width:19ch}
.hero .lede{
  max-width:56ch;margin:1.5rem 0 0;font-size:clamp(1.05rem,1rem + .4vw,1.25rem);
  color:var(--soft);
}
.reveal{opacity:0;transform:translateY(14px);animation:rise .7s cubic-bezier(.16,1,.3,1) forwards}
.reveal.d1{animation-delay:.08s}.reveal.d2{animation-delay:.18s}
.reveal.d3{animation-delay:.3s}.reveal.d4{animation-delay:.45s}
@keyframes rise{to{opacity:1;transform:none}}

/* --- schéma de flux : trois fiches papier -------------------- */
.flow{
  display:grid;grid-template-columns:1fr auto 1fr auto 1fr;
  gap:0;align-items:stretch;margin-top:3.2rem;
}
.flow-node{
  background:var(--card);border:1px solid var(--line);border-radius:6px;
  padding:1.5rem 1.3rem 1.3rem;position:relative;min-height:10rem;
  box-shadow:0 4px 14px rgba(90,70,40,.09);
}
.flow-node:nth-child(1){rotate:-.7deg}
.flow-node:nth-child(3){rotate:.5deg}
.flow-node:nth-child(5){rotate:-.4deg}
/* morceau de scotch */
.flow-node::before{
  content:"";position:absolute;top:-.65rem;left:50%;translate:-50% 0;
  width:5.5rem;height:1.25rem;rotate:-2deg;
  background:rgba(214,190,140,.4);border:1px solid rgba(180,150,100,.25);
}
.flow-node .tag{
  font-family:'Caveat',cursive;font-size:1.15rem;color:var(--faint);
  display:block;margin-bottom:.5rem;
}
.flow-node strong{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:1.02rem;display:block;margin-bottom:.4rem}
.flow-node p{font-size:.88rem;color:var(--soft);line-height:1.6}
.flow-link{
  width:clamp(1.7rem,4vw,3.6rem);position:relative;align-self:center;height:3rem;
}
.flow-link::before{
  content:"";position:absolute;left:0;right:8px;top:50%;height:2px;
  background:repeating-linear-gradient(90deg,var(--accent) 0 7px,transparent 7px 14px);
  animation:dashmove 1.2s linear infinite;
}
.flow-link::after{
  content:"";position:absolute;right:0;top:50%;translate:0 -50%;
  border:6px solid transparent;border-left-color:var(--accent);
}
@keyframes dashmove{to{background-position:14px 0}}
/* lignes manuscrites dans la fiche scan */
.scan-lines{display:grid;gap:.45rem;margin-top:.9rem}
.scan-lines i{
  display:block;height:5px;border-radius:3px;
  background:linear-gradient(90deg,var(--faint),transparent 92%);
  transform:rotate(-.6deg);opacity:.5;
}
.scan-lines i:nth-child(2){width:82%;transform:rotate(.8deg)}
.scan-lines i:nth-child(3){width:64%;transform:rotate(-.4deg)}
/* lignes propres en sortie */
.out-rows{display:grid;gap:.4rem;margin-top:.9rem;font-family:'Courier New',monospace;font-size:.72rem;font-weight:700}
.out-rows i{
  font-style:normal;display:flex;justify-content:space-between;gap:.6rem;
  border:1px solid var(--line);padding:.28rem .55rem;color:var(--soft);
  background:var(--paper);border-radius:3px;
}
.out-rows i b{color:var(--ok)}
.ai-core{
  margin-top:.9rem;display:inline-block;font-family:'Caveat',cursive;
  font-size:1.2rem;color:var(--accent);rotate:-1deg;
}

/* --- bandeau de chiffres ------------------------------------- */
.figures{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
  gap:1.1rem;margin-top:3.2rem;
}
.figures > div{
  background:var(--card);border:1px solid var(--line);border-radius:6px;
  padding:1.3rem 1.2rem;box-shadow:0 3px 10px rgba(90,70,40,.07);
}
.figures strong{
  display:block;font-family:'Fraunces',Georgia,serif;font-weight:900;
  font-size:clamp(1.5rem,1rem + 1.6vw,2.3rem);letter-spacing:-.02em;color:var(--ink);
}
.figures strong b{color:var(--accent);font-weight:900}
.figures small{color:var(--soft);font-size:.85rem;line-height:1.5;display:block;margin-top:.35rem}

/* --- liste problème ------------------------------------------ */
.problem li{
  list-style:none;padding:.9rem 0 .9rem 2.2rem;position:relative;
  color:var(--soft);border-bottom:1px dashed var(--line);max-width:60ch;
}
.problem li::before{
  content:"✗";position:absolute;left:.2rem;color:var(--accent);font-weight:700;
}
.problem li strong{color:var(--ink)}

/* --- étapes -------------------------------------------------- */
.steps{display:grid;gap:1rem;counter-reset:s}
.steps article{
  counter-increment:s;display:grid;grid-template-columns:4.2rem 1fr;
  background:var(--card);border:1px solid var(--line);border-radius:6px;
  box-shadow:0 3px 10px rgba(90,70,40,.07);
}
.steps article::before{
  content:counter(s) ".";font-family:'Fraunces',Georgia,serif;font-weight:900;
  font-size:1.9rem;padding:1.1rem 0 0 1.2rem;color:var(--accent);
}
.steps .body{padding:1.3rem 1.4rem 1.4rem .2rem}
.steps h3{margin-bottom:.35rem}
.steps p{color:var(--soft);font-size:.95rem}

/* --- cartes offres ------------------------------------------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(15.5rem,1fr));gap:1.4rem;align-items:stretch}
.card{
  position:relative;background:var(--card);border:1px solid var(--line);
  border-radius:8px;padding:1.8rem 1.5rem 1.6rem;display:flex;flex-direction:column;
  box-shadow:0 4px 14px rgba(90,70,40,.08);
}
.card::before{
  content:"";position:absolute;top:-.7rem;left:50%;translate:-50% 0;
  width:5rem;height:1.2rem;rotate:-2deg;
  background:rgba(214,190,140,.4);border:1px solid rgba(180,150,100,.25);
}
.card h3{font-size:1.15rem}
.card .price{
  font-family:'Fraunces',Georgia,serif;font-weight:900;font-size:1.7rem;
  margin:.7rem 0 .9rem;color:var(--ink);
}
.card .price small{font-size:.85rem;font-weight:400;color:var(--soft);font-family:Georgia,serif}
.card p{color:var(--soft);font-size:.93rem;flex-grow:1}
.card ul{list-style:none;margin-top:.9rem;font-size:.9rem;color:var(--soft)}
.card li{padding:.32rem 0 .32rem 1.4rem;position:relative}
.card li::before{content:"✓";position:absolute;left:0;color:var(--ok);font-weight:700}
.card.featured{border:2px solid var(--accent);rotate:-.5deg}
.card .flag{
  position:absolute;top:-1.1rem;right:.9rem;rotate:2deg;
  font-family:'Caveat',cursive;font-size:1.25rem;color:var(--accent);
}
.card .btn{margin-top:1.4rem;text-align:center}

/* --- tableau de résultats ------------------------------------ */
.data-table{
  width:100%;max-width:36rem;border-collapse:collapse;margin-top:1.8rem;
  font-size:.95rem;background:var(--card);border:1px solid var(--line);border-radius:6px;
  overflow:hidden;box-shadow:0 3px 10px rgba(90,70,40,.07);
}
.data-table td{padding:.8rem 1rem;border-bottom:1px dashed var(--line)}
.data-table tr:last-child td{border-bottom:none}
.data-table td:last-child{
  text-align:right;font-family:'Fraunces',Georgia,serif;font-weight:900;
  color:var(--accent);white-space:nowrap;
}

/* --- citation ------------------------------------------------ */
blockquote{
  border-left:3px solid var(--accent);padding:.4rem 0 .4rem 1.3rem;
  margin:2rem 0;font-size:1.15rem;font-style:italic;max-width:56ch;
}
blockquote footer{font-size:.85rem;color:var(--soft);margin-top:.5rem;font-style:normal}

/* --- avant / après ------------------------------------------- */
.ba{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:1.4rem;margin-top:2rem}
.ba > div{
  background:var(--card);border:1px solid var(--line);border-radius:6px;
  padding:1.5rem 1.4rem;box-shadow:0 3px 10px rgba(90,70,40,.07);
}
.ba .before{rotate:-.5deg}
.ba .after{rotate:.5deg}
.ba .tag{
  font-family:'Caveat',cursive;font-size:1.3rem;display:inline-block;margin-bottom:.8rem;
}
.ba .before .tag{color:var(--faint)}
.ba .after .tag{color:var(--ok)}
.ba ul{list-style:none;font-size:.92rem;color:var(--soft)}
.ba li{padding:.4rem 0;border-bottom:1px dashed var(--line)}
.ba li:last-child{border-bottom:none}
.ba .before li::before{content:"– ";color:var(--faint)}
.ba .after li::before{content:"+ ";color:var(--ok);font-weight:700}

/* --- garanties ----------------------------------------------- */
.guarantees{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1.4rem;margin-top:2rem}
.guarantees > div{border-left:3px solid var(--accent);padding:.2rem 0 .2rem 1.1rem}
.guarantees h3{margin-bottom:.3rem}
.guarantees p{font-size:.9rem;color:var(--soft)}

/* --- qui je suis --------------------------------------------- */
.about{background:var(--paper-warm);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.about-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:3rem;align-items:start}
.about p{color:var(--soft);margin-bottom:1rem}
.about p strong{color:var(--ink)}
.signature{font-family:'Caveat',cursive;font-size:2rem;color:var(--ink);rotate:-2deg;display:inline-block;margin-top:.5rem}
.about-aside{
  background:var(--card);border:1px solid var(--line);border-radius:6px;
  padding:1.5rem 1.4rem;rotate:1deg;box-shadow:0 4px 14px rgba(90,70,40,.09);
}
.about-aside h3{margin-bottom:.7rem}
.about-aside ul{list-style:none;font-size:.9rem;color:var(--soft)}
.about-aside li{padding:.35rem 0 .35rem 1.4rem;position:relative;border-bottom:1px dashed var(--line)}
.about-aside li:last-child{border-bottom:none}
.about-aside li::before{content:"✓";position:absolute;left:0;color:var(--ok);font-weight:700}

/* --- FAQ ----------------------------------------------------- */
.faq{max-width:46rem}
.faq details{
  background:var(--card);border:1px solid var(--line);border-radius:6px;
  margin-bottom:.7rem;box-shadow:0 2px 8px rgba(90,70,40,.06);
}
.faq summary{
  cursor:pointer;padding:1rem 1.2rem;font-family:'Fraunces',Georgia,serif;
  font-weight:600;font-size:1rem;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";color:var(--accent);font-size:1.25rem;flex:none;transition:rotate .2s;
}
.faq details[open] summary::after{rotate:45deg}
.faq details p{padding:0 1.2rem 1.1rem;color:var(--soft);font-size:.95rem}
.faq details[open]{border-color:var(--accent)}

/* --- formulaire ---------------------------------------------- */
form{max-width:38rem;display:grid;gap:1.1rem;margin-top:2rem}
label{font-size:.9rem;font-style:italic;color:var(--soft);display:grid;gap:.4rem}
input,textarea{
  font:inherit;font-style:normal;color:var(--ink);background:var(--card);
  border:1px solid var(--line);border-radius:6px;padding:.75rem .9rem;width:100%;
}
input:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:var(--accent)}
textarea{min-height:8.5rem;resize:vertical}
form .btn{justify-self:start;cursor:pointer}
.form-note{font-size:.85rem;color:var(--faint);max-width:38rem}
.hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}

/* --- contact ------------------------------------------------- */
.contact-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:3rem;align-items:start}
.contact-aside{
  background:var(--card);border:1px solid var(--line);border-radius:6px;
  padding:1.6rem 1.5rem;rotate:1deg;box-shadow:0 4px 14px rgba(90,70,40,.09);
}
.contact-aside h3{margin-bottom:.8rem}
.contact-aside p{font-size:.92rem;color:var(--soft);margin-bottom:1rem}
.contact-aside .mono{font-family:'Courier New',monospace;font-weight:700;font-size:.88rem;color:var(--ink);word-break:break-all}

/* --- bandes / CTA -------------------------------------------- */
.band{background:var(--paper-warm);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cta-final h2{max-width:24ch}
.cta-final p{color:var(--soft)}

/* --- footer -------------------------------------------------- */
footer.site-foot{border-top:1px solid var(--line);background:var(--paper-warm)}
footer.site-foot .wrap{
  padding-top:1.8rem;padding-bottom:2.2rem;display:grid;gap:.4rem;
  font-size:.85rem;color:var(--faint);font-style:italic;
}
footer.site-foot a{color:var(--soft);text-decoration:none}
footer.site-foot a:hover{color:var(--accent)}

/* --- responsive ---------------------------------------------- */
@media (max-width:56rem){
  .flow{grid-template-columns:1fr;gap:.4rem}
  .flow-node{rotate:0deg}
  .flow-link{width:auto;height:2.8rem;justify-self:center;min-width:2px}
  .flow-link::before{left:50%;right:auto;top:4px;bottom:12px;width:2px;height:auto;
    background:repeating-linear-gradient(180deg,var(--accent) 0 7px,transparent 7px 14px);
    animation:dashmove-v 1.2s linear infinite}
  .flow-link::after{right:auto;left:50%;top:auto;bottom:2px;translate:-50% 0;
    border:6px solid transparent;border-top-color:var(--accent)}
  .contact-grid,.about-grid{grid-template-columns:1fr}
  .card.featured,.ba .before,.ba .after,.about-aside,.contact-aside{rotate:0deg}
}
@keyframes dashmove-v{to{background-position:0 14px}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}