/* ============================================================
   HEADER « À PROPOS » — iDevArt
   Reproduction fidèle du montage :
   · gauche  : eyebrow + nom + description lisible + bouton + signature
   · centre  : main robotique tenant le smartphone (image fournie),
               qui MONTE depuis le bas de l'écran au chargement
   · droite  : éditeur VS Code sombre en arrière-plan (code TypeScript
               décrivant le profil) + panneau TERMINAL en bas
   ============================================================ */
:root{
  --blue:#1296CC;
  --blue-royal:#2653E9;      /* bleu du "15 ans" sur le visuel */
  --blue-deep:#0A5A80;
  --ink:#101B2B;
  --muted:#5A6B7E;
  --line:#E6ECF2;

  --editor-bg:#0D1420;       /* fond éditeur */
  --editor-panel:#101A2A;
  --editor-line:#1C2B40;
  --c-key:#C586C0;           /* mots-clés  */
  --c-type:#4EC9B0;          /* types      */
  --c-var:#9CDCFE;           /* variables  */
  --c-str:#CE9178;           /* chaînes    */
  --c-com:#6A9955;           /* commentaires */
  --c-fn:#DCDCAA;
  --c-num:#B5CEA8;
  --c-punct:#D4D4D4;

  --display:'Sora',system-ui,sans-serif;
  --body:'Inter',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--body);color:var(--ink);background:#fff;overflow-x:clip}
img{display:block;max-width:100%}

.features-area .section-header {
    display: grid;
    gap: 20px 60px;
    grid-template-columns: 1fr 430px;
    align-items: center;
}

.idv-hand {
    height: min(80vh, 820px) !important;
}

.features-area .section-title {
    max-width: 670px;
    perspective: 400px;
            font-size: 46px;
        margin-top: 110px !important;
}

.has_text_move_anim > div{
    display: block;
    text-align: start;
    position: relative;
    translate: none;
    rotate: none;
    scale: none;
    transform-origin: 335px 23px;
    transform: translate3d(0px, 0px, 0px);
    opacity: 1;
}

.section-title span {
    background-image: url(../imgs/shape/img-s-53.webp);
    background-repeat: no-repeat;
    background-size: 100% 28px;
    background-position: bottom left;
}

@media only screen and (max-width: 1919px) {
    .features-area .features-wrapper-box {
        margin-top: 72px;
    }
}

.features-area .features-wrapper {
    display: grid;
    gap: 40px 30px;
    grid-template-columns: repeat(4, 1fr);
}

.features-area .feature-box {
    padding: unset !important;
}


.features-area-inner{
    padding-bottom: 120px !important;
}

.features-wrapper > div{
    translate: none;
    rotate: none;
    scale: none;
    transform: translate(0px, 0px);
    opacity: 1;
}

.show-light {
    display: inline-block;
}

.show-dark {
    display: none;
}

.features-area .feature-box .content {
    margin-top: 41px;
}

.features-area .feature-box .title {
    font-size: 24px;
    font-weight: 600;
}

.features-area .feature-box .text {
    margin-top: 16px;
    max-width: 250px;
}



.clients-area-inner {
    padding: 24px 0 !important;
}

/* ================= SECTION ================= */
.idv-hero{
  position:relative;
  min-height:100vh;
  overflow:hidden;
  display:flex;
  align-items:center;
}

/* ---------- Panneau éditeur (droite, arrière-plan) ---------- */
.idv-editor{
  position:absolute;top:0;right:0;bottom:0;
  width:52%;
  background:var(--editor-bg);
  font-family:var(--mono);
  font-size:13.5px;
  line-height:1.72;
  color:var(--c-punct);
  display:flex;flex-direction:column;
  box-shadow:-30px 0 60px -30px rgba(13,20,32,.35);
}

/* zone de code */
.ed-code {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    overflow: hidden;
    padding: 34px clamp(28px, 38.5vw, 419px) 26px 0;
}
/* la colonne de code est ancrée au bord droit du panneau,
   dans la zone jamais recouverte par la main du robot */
.ed-block{display:flex;flex:0 0 auto;max-width:100%}
.ed-lines div{white-space:pre;min-height:1.72em}
.ed-cursor{display:inline-block;width:8px;height:15px;background:#E8F1F8;vertical-align:-2px;margin-left:2px;animation:blink 1.05s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.ed-gutter{padding:0 16px 0 0;text-align:right;color:#3D5068;user-select:none;font-size:13px}
.ed-lines{white-space:pre;overflow:hidden}
.k{color:var(--c-key)} .t{color:var(--c-type)} .v{color:var(--c-var)}
.s{color:var(--c-str)} .c{color:var(--c-com)} .f{color:var(--c-fn)} .n{color:var(--c-num)}


/* voile de fondu côté gauche de l'éditeur pour l'intégration douce */
.idv-editor::before{content:"";position:absolute;top:0;bottom:0;left:0;width:120px;
  background:linear-gradient(90deg,rgba(255,255,255,.06),transparent);pointer-events:none}

/* ---------- Main robotique + smartphone (centre) ---------- */
.idv-hand{
  position:absolute;
  left:50%;bottom:0;
  transform:translateX(-65%);
  height:min(88vh,820px);
  width:auto;
  z-index:3;
  pointer-events:none;
  filter:drop-shadow(0 30px 50px rgba(13,20,32,.28));
  animation:riseUp 1.4s cubic-bezier(.16,.8,.24,1) both .15s;
}
@keyframes riseUp{
  from{transform:translateX(-65%) translateY(16%);opacity:0}
  to  {transform:translateX(-65%) translateY(0);  opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .idv-hand{animation:none}
  .ed-cursor{animation:none}
}

/* ---------- Colonne texte (gauche) ---------- */
.idv-copy{
  position:relative;z-index:4;
  width:min(46%,560px);
  padding:90px 24px 90px clamp(24px,7vw,110px);
}
.idv-eyebrow{font-size:14px;font-weight:500;color:var(--ink);letter-spacing:.01em;margin-bottom:14px}
.idv-copy h1{
  font-family:var(--display);font-weight:700;
  font-size:clamp(34px,3.6vw,52px);line-height:1.1;letter-spacing:-.015em;
  margin-bottom:26px;
}
.idv-lead{font-size:16.5px;color:#31435A;max-width:480px;margin-bottom:22px}
.idv-p{font-size:14.5px;line-height:1.85;color:var(--muted);max-width:470px;margin-bottom:36px}
.idv-btn{
  display:inline-block;font-family:var(--display);font-weight:600;font-size:15px;
  background:var(--blue);color:#fff;text-decoration:none;
  padding:16px 34px;border-radius:6px;
  box-shadow:0 14px 28px -12px rgba(18,150,204,.6);
  transition:transform .25s,box-shadow .25s,background .25s;
}
.idv-btn:hover{transform:translateY(-2px);background:var(--blue-deep);box-shadow:0 20px 34px -12px rgba(10,90,128,.55)}
.idv-actions{display:flex;align-items:center;gap:38px;flex-wrap:wrap}
.idv-sign{
  font-family:'Mr Dafoe',cursive;font-size:48px;color:#25313F;
  transform:rotate(-8deg);display:inline-block;
  line-height:1;opacity:.9;margin-top:6px;
}

/* ================= RESPONSIVE =================
   ≤1024px : le texte passe au-dessus, la main réduit,
   l'éditeur devient une bande pleine largeur derrière la main.
   ================================================ */
@media (max-width:1024px){
  .idv-hero{flex-direction:column;align-items:stretch;min-height:0}
  .idv-copy{width:100%;max-width:640px;padding:64px 24px 24px}
  .idv-sign{font-size:42px}
  .idv-editor{position:relative;width:100%;order:3;font-size:12.5px}
  .ed-code{max-height:340px}
  .idv-hand{
    position:relative;left:auto;bottom:auto;transform:none;
    order:2;height:auto;width:min(420px,80%);
    margin:0 auto -120px;
    animation-name:riseUpMobile;
  }
  @keyframes riseUpMobile{from{transform:translateY(60px);opacity:0}to{transform:none;opacity:1}}
  .idv-editor{padding-top:120px}
}
@media (max-width:560px){
  .idv-copy h1{font-size:32px}
  .idv-hand{margin-bottom:-90px}
  .idv-editor{padding-top:100px}
  .ed-lines,.ed-gutter{font-size:11.5px}
}