/* Sur iOS, U+2197 est un caractere emoji : sans cela la fleche s'affiche
   en carre gris a fleche blanche au lieu du chevron fin. */
body, button, input, textarea { font-variant-emoji: text; }

*{box-sizing:border-box;margin:0;padding:0}
    html{scroll-behavior:smooth}
    body{background:#F6ECDD;color:#3A2A22;font-family:'Inter',sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
    ::selection{background:#C9714B;color:#fff}
    a{text-decoration:none;color:#C9714B}
    a:hover{color:#B5623F}
    summary::-webkit-details-marker{display:none}
    summary{list-style:none;cursor:pointer}
    @keyframes up{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}
    @keyframes introPop{0%{opacity:0;transform:scale(.55)}60%{opacity:1;transform:scale(1.06)}100%{opacity:1;transform:scale(1)}}
    @keyframes introFade{to{opacity:0;visibility:hidden}}
    @keyframes draw{to{stroke-dashoffset:0}}
    @keyframes track{from{opacity:0;letter-spacing:.62em;filter:blur(3px)}to{opacity:1;letter-spacing:.3em;filter:blur(0)}}
    @keyframes pulseDot{0%{box-shadow:0 0 0 0 rgba(201,113,75,.5)}70%{box-shadow:0 0 0 8px rgba(201,113,75,0)}100%{box-shadow:0 0 0 0 rgba(201,113,75,0)}}
    @keyframes wave{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
    @keyframes shine{0%{transform:translateX(-170%) skewX(-18deg)}55%,100%{transform:translateX(360%) skewX(-18deg)}}
    @keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
    @keyframes floatY2{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
    @keyframes glow{0%,100%{opacity:.5}50%{opacity:.9}}
    @keyframes phoneIn{from{opacity:0;transform:translateY(48px) scale(.94)}to{opacity:1;transform:translateY(0) scale(1)}}
    @keyframes msgIn{from{opacity:0;transform:translateY(16px) scale(.94)}to{opacity:1;transform:translateY(0) scale(1)}}
    @keyframes cardIn{from{opacity:0;transform:translateY(24px) scale(.88)}to{opacity:1;transform:translateY(0) scale(1)}}
    .stage .phone,.stage .msg,.stage .fcard,.stage .halo{opacity:0}
    .stage.in .phone{animation:phoneIn .85s cubic-bezier(.2,.8,.2,1) both}
    .stage.in .halo{animation:glow 7s ease-in-out .4s infinite;opacity:.5}
    .stage.in .msg{animation-name:msgIn;animation-duration:.5s;animation-timing-function:cubic-bezier(.2,.8,.2,1);animation-fill-mode:both}
    .pdfsh{position:absolute;top:0;left:0;width:45%;height:100%;background:linear-gradient(100deg,transparent,rgba(201,113,75,.16),transparent);transform:translateX(-180%) skewX(-16deg);pointer-events:none}
    .stage.in .pdfsh{animation:shine 1.5s ease-in-out 2s}
    .micb{animation:pulseDot 2.6s ease-out 2.9s infinite}
    .stage.in .fcard{animation-name:cardIn,floatY;animation-duration:.6s,7s;animation-timing-function:cubic-bezier(.2,.8,.2,1),ease-in-out;animation-fill-mode:both,none;animation-iteration-count:1,infinite}
    @keyframes emberUp{0%{transform:translate(0,0) scale(.7);opacity:0}12%{opacity:.85}100%{transform:translate(var(--dx,14px),-190px) scale(1.15);opacity:0}}
    @keyframes arrowFloat{0%,100%{transform:translate(0,0)}50%{transform:translate(3px,-3px)}}
    #introLogo{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;background:#F6ECDD;animation:introFade .55s ease 1.85s forwards}
    #prog{position:fixed;top:0;left:0;height:2px;width:0;z-index:60;background:linear-gradient(90deg,#C9714B,#E39A76,#5E8A78);box-shadow:0 0 12px rgba(201,113,75,.5);transition:width .12s linear}
    @keyframes sigDot{0%{opacity:0;transform:scale(0)}70%{opacity:1;transform:scale(1.3)}100%{opacity:1;transform:scale(1)}}
    .sig .d1{stroke-dasharray:178;stroke-dashoffset:178}
    .sig .d2{stroke-dasharray:259;stroke-dashoffset:259}
    .sig .dpt{transform-origin:200px 201px;opacity:0}
    .sig .ln{transform:scaleX(0);transform-origin:center;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
    .sig.go .ln{transform:scaleX(1)}
    .sig.go .d1{animation:draw .7s cubic-bezier(.3,.8,.3,1) .25s forwards}
    .sig.go .d2{animation:draw .85s cubic-bezier(.3,.8,.3,1) .5s forwards}
    .sig.go .dpt{animation:sigDot .55s cubic-bezier(.2,.8,.2,1) 1.25s forwards}
    .rv{opacity:0;transform:translateY(26px);transition:opacity .75s cubic-bezier(.2,.7,.2,1),transform .75s cubic-bezier(.2,.7,.2,1)}
    .rv.in{opacity:1;transform:translateY(0)}
    .navlinks > a:not(.ncta){position:relative;color:#7A5F51;transition:color .22s}
    .navlinks > a:not(.ncta):hover{color:#3A2A22}
    .navlinks > a:not(.ncta)::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1.5px;border-radius:2px;background:linear-gradient(90deg,#C9714B,#5E8A78);transform:scaleX(0);transform-origin:left;transition:transform .34s cubic-bezier(.2,.7,.2,1)}
    .navlinks > a:not(.ncta):hover::after{transform:scaleX(1)}
    .ncta{position:relative;font-family:'JetBrains Mono',monospace;font-size:13px;letter-spacing:.06em;color:#3A2A22;padding-bottom:4px;border-bottom:1.5px solid #C9714B;transition:color .2s,gap .2s}
    .ncta:hover{color:#C9714B}
    .navmark{transition:transform .55s cubic-bezier(.2,.7,.2,1)}
    a:hover > .navmark{transform:rotate(-12deg) scale(1.12)}
    .b1{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:11px;padding:18px 32px;background:#C9714B;color:#fff;border-radius:100px;font-weight:600;font-size:17px;transition:transform .16s cubic-bezier(.2,.7,.2,1),box-shadow .28s}
    .b1:hover{color:#fff;transform:translateY(-3px);box-shadow:0 18px 42px rgba(201,113,75,.42)}
    .b1:active{transform:scale(.96)}
    .b1 .sh{position:absolute;top:0;left:0;width:42%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:translateX(-170%) skewX(-18deg);pointer-events:none}
    .b1:hover .sh{animation:shine .9s ease-in-out}
    .b2{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:10px;padding:18px 28px;border:1px solid rgba(58,42,34,.2);border-radius:100px;font-weight:600;font-size:17px;color:#4A382E;transition:transform .16s cubic-bezier(.2,.7,.2,1),border-color .28s,box-shadow .28s}
    .b2::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(201,113,75,.14),rgba(94,138,120,.14));transform:translateY(101%);transition:transform .4s cubic-bezier(.2,.7,.2,1);pointer-events:none}
    .b2:hover::before{transform:translateY(0)}
    .b2:hover{color:#4A382E;transform:translateY(-3px);border-color:rgba(201,113,75,.55);box-shadow:0 14px 32px rgba(58,42,34,.1)}
    .b2:active{transform:scale(.96)}
    .b2 > *{position:relative}
    .b2 .gl{display:inline-block;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
    .b2:hover .gl{transform:translateX(5px)}
    .arw{display:inline-block;animation:arrowFloat 2.2s ease-in-out infinite}
    .wv span{display:block;width:3px;border-radius:2px;background:rgba(255,255,255,.85);animation:wave 1.1s ease-in-out infinite}
    .ember{position:absolute;bottom:0;width:5px;height:5px;border-radius:50%;background:radial-gradient(circle,#E39A76,#C9714B);filter:blur(.4px);animation:emberUp linear infinite;pointer-events:none}
    .fcard{position:absolute;z-index:3;display:flex;align-items:center;gap:12px;padding:14px 17px;border-radius:16px;background:rgba(255,255,255,.8);backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);border:1px solid rgba(255,255,255,.75);box-shadow:0 20px 46px rgba(58,42,34,.14);transition:box-shadow .3s}
    .fcard:hover{box-shadow:0 26px 58px rgba(58,42,34,.2)}
    .row{display:grid;grid-template-columns:64px 1fr 1.35fr;gap:34px;align-items:start;padding:34px 0;transition:padding-left .32s cubic-bezier(.2,.7,.2,1)}
    .row:hover{padding-left:14px}
    .row:hover .rn{color:#C9714B}
    .rn{font-family:'JetBrains Mono',monospace;font-size:13px;letter-spacing:.14em;color:#A88E7C;padding-top:7px;transition:color .28s}
    .row:hover .ric{transform:translateY(-3px) rotate(-7deg);border-color:rgba(201,113,75,.5)}
    .ric{transition:transform .38s cubic-bezier(.2,.7,.2,1),border-color .28s}
    .fnum{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;border:1px solid rgba(58,42,34,.2);font-family:'JetBrains Mono',monospace;font-size:12.5px;font-weight:600;letter-spacing:.06em;color:#A88E7C;flex-shrink:0;transition:color .3s,border-color .3s,background .3s,transform .34s cubic-bezier(.2,.7,.2,1)}
    .compris > div:hover .fnum{border-color:rgba(94,138,120,.6);background:rgba(94,138,120,.1);transform:scale(1.06)}
    .fbar{display:block;width:16px;height:1.5px;border-radius:2px;background:rgba(58,42,34,.22);transition:width .34s cubic-bezier(.2,.7,.2,1),background .3s}
    .compris > div:hover .fnum{color:#5E8A78}
    .compris > div:hover .fbar{width:32px;background:#5E8A78}
    .fq{border-top:1px solid rgba(58,42,34,.14)}
    .fq:last-child{border-bottom:1px solid rgba(58,42,34,.14)}
    .fq summary{transition:padding-left .28s cubic-bezier(.2,.7,.2,1),color .2s}
    .fq:hover summary{padding-left:14px}
    .fq[open] summary{padding-left:14px;color:#C9714B}
    .fq[open] .chev{transform:rotate(45deg);background:#C9714B;color:#fff;border-color:#C9714B}
    .fq[open] .fqa{animation:up .4s ease both}
    .chev{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;border:1px solid rgba(58,42,34,.18);color:#C9714B;font-size:16px;flex-shrink:0;transition:transform .32s cubic-bezier(.2,.7,.2,1),background .25s,color .25s,border-color .25s}
    .plist li{display:flex;align-items:center;gap:16px;padding:14px 0;border-bottom:1px solid rgba(58,42,34,.1);font-size:16.5px;color:#4A382E;transition:padding-left .3s cubic-bezier(.2,.7,.2,1)}
    .plist li:last-child{border-bottom:none}
    .plist li:hover{padding-left:8px}
    .pnum{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;border:1px solid rgba(58,42,34,.2);font-family:'JetBrains Mono',monospace;font-size:11.5px;font-weight:600;letter-spacing:.05em;color:#A88E7C;flex-shrink:0;transition:color .3s,border-color .3s,background .3s,transform .34s cubic-bezier(.2,.7,.2,1)}
    .plist li:hover .pnum{color:#5E8A78;border-color:rgba(94,138,120,.6);background:rgba(94,138,120,.1);transform:scale(1.07)}
    .tlist li{transition:transform .26s cubic-bezier(.2,.7,.2,1)}
    .tlist li:hover{transform:translateX(6px)}
    .tlist li > span:first-child{transition:transform .3s cubic-bezier(.2,.7,.2,1),background .26s,color .26s}
    .tlist li:hover > span:first-child{transform:rotate(-8deg) scale(1.14);background:#C9714B;color:#fff}
    .fnav a{position:relative;width:fit-content}
    .fnav a:hover{color:#fff}
    .fnav a[style*="#E08A5F"]:hover{color:#F0A987}
    .fnav a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:#E08A5F;transform:scaleX(0);transform-origin:left;transition:transform .32s cubic-bezier(.2,.7,.2,1)}
    .fnav a:hover::after{transform:scaleX(1)}
    .fcon{display:flex;align-items:center;gap:14px;padding:16px 18px;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:rgba(255,255,255,.04);transition:transform .25s,border-color .25s,background .25s}
    a.fcon:hover{transform:translateY(-3px);border-color:rgba(224,138,95,.5);background:rgba(255,255,255,.07)}
    .totop{color:#8A7E72;padding:8px 16px;border:1px solid rgba(255,255,255,.14);border-radius:100px;transition:color .2s,border-color .2s}
    .totop:hover{color:#F5ECDF;border-color:rgba(255,255,255,.4)}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  nav{padding:18px 28px !important}
  header#top{padding-left:28px !important;padding-right:28px !important}
  section{padding-left:28px !important;padding-right:28px !important}
  footer > div:last-child{padding-left:28px !important;padding-right:28px !important}
  .fcard{display:none !important}
}
@media (max-width:860px){
  nav{padding:14px 20px !important}
  header#top{padding-left:20px !important;padding-right:20px !important;min-height:auto !important;padding-top:64px !important;padding-bottom:64px !important}
  section{padding-left:20px !important;padding-right:20px !important;padding-top:64px !important}
  section[style*="background:#221E1B"] > div,footer > div:last-child{padding-left:20px !important;padding-right:20px !important}
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns:1fr 1.3fr"],
  [style*="grid-template-columns:.88fr 1.12fr"],
  [style*="grid-template-columns:repeat(3,1fr)"]{grid-template-columns:1fr !important;gap:26px !important}
  [style*="border-right:1px solid rgba(58,42,34,.12)"]{border-right:none !important;border-bottom:1px solid rgba(58,42,34,.12) !important}
  [style*="border-left:1px solid rgba(58,42,34,.1)"]{border-left:none !important;border-top:1px solid rgba(58,42,34,.1) !important}
  .row{grid-template-columns:1fr !important;gap:14px !important;padding:26px 0 !important}
  .rn{padding-top:0 !important}
  .row:hover,.plist li:hover,.fq:hover summary{padding-left:0 !important}
  .phone{width:100% !important;max-width:330px !important;border-radius:42px !important}
  .b1,.b2{width:100%;justify-content:center}
  .fqa{padding-right:14px !important}
  .tarifcard > div:first-of-type + div,.tarifcard [style*="padding:44px"]{padding:30px !important}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .rv,.stage .phone,.stage .msg,.stage .fcard,.stage .halo{opacity:1 !important;transform:none !important}
  #introLogo{display:none !important}
}