/* ==========================================================================
   Automaton — charte du site (v2)
   Couleurs strictement issues du logo : bleu (dégradé #50AAE3 → #2A377D),
   gris #656263, blanc. Mise en page inspirée d'Apple.
   ========================================================================== */

@font-face{
  font-family:"Inter"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Inter"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url("../fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  /* couleurs du logo */
  --blue-light:#50AAE3;
  --blue:#376AB6;
  --blue-dark:#2A377D;
  --grey:#656263;
  --white:#FFFFFF;
  --brand-gradient:linear-gradient(135deg,#50AAE3 0%,#376AB6 50%,#2A377D 100%);

  /* usages */
  --text:#1D1D1F;
  --text-2:var(--grey);
  --bg:#FFFFFF;
  --bg-alt:#F5F5F7;
  --bg-dark:#000000;
  --line:#D2D2D7;
  --card:#FFFFFF;
  --link:var(--blue);
  --link-hover:var(--blue-dark);

  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","Helvetica Neue",Helvetica,Arial,sans-serif;

  --nav-h:52px;
  --maxw:1180px;
  --radius:28px;
  --radius-s:18px;
  --ease:cubic-bezier(.28,.11,.32,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--nav-h) + 12px);}
html body{background-color:var(--bg);} /* prioritaire sur le fond imposé par l'éditeur visuel */
body{
  margin:0; color:var(--text); font-family:var(--font); font-size:17px; line-height:1.47;
  letter-spacing:-0.022em; font-weight:400; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility; overflow-x:clip;
}
img,video{max-width:100%; display:block;}
a{color:var(--link); text-decoration:none;}
a:hover{text-decoration:underline;}
h1,h2,h3,h4{font-family:var(--font-display); margin:0; font-weight:600; letter-spacing:-0.015em; color:inherit; text-wrap:balance;}
.tile-sub,.phero-sub,.section-head p,.caption,.statement p,.cta-band p{text-wrap:balance;}
.headline-copy,.statement blockquote{text-wrap:pretty;}
p{margin:0;}
button{font-family:inherit;}
.nowrap{white-space:nowrap;}
.visually-hidden{position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px;}

/* ---------- boutons : toujours la même paire, toujours sous le titre ---------- */
.ctas{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:22px;}
.ctas.left{justify-content:flex-start;}
.btn{
  display:inline-flex; align-items:center; justify-content:center; min-width:30px;
  padding:11px 21px; border-radius:980px; font-size:17px; line-height:1.18; font-weight:400;
  letter-spacing:-0.022em; border:1px solid var(--blue); transition:background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .35s var(--ease);
  white-space:nowrap; cursor:pointer;
}
.btn:hover{text-decoration:none;}
.btn-primary{background:var(--blue); color:#fff;}
.btn-primary:hover{background:var(--blue-dark); border-color:var(--blue-dark);}
.btn-secondary{background:transparent; color:var(--blue);}
.btn-secondary:hover{background:var(--blue); color:#fff;}
.on-dark .btn-secondary{color:#fff; border-color:#fff;}
.on-dark .btn-secondary:hover{background:#fff; color:var(--text);}
.btn-s{padding:5px 12px; font-size:12px; line-height:1.34;}
.link-more{font-size:17px; color:var(--link); white-space:nowrap;}
.link-more::after{content:" ›"; font-size:1.1em;}

/* ---------- barre de navigation ---------- */
.gnav{position:sticky; top:0; z-index:100; height:var(--nav-h); background:rgba(255,255,255,.96); border-bottom:1px solid rgba(0,0,0,.08);} /* pas de flou : trop coûteux au défilement */
.gnav-inner{max-width:1180px; height:100%; margin:0 auto; padding:0 22px; display:flex; align-items:center; gap:28px;}
.gnav-logo{display:flex; align-items:center; flex:0 0 auto;}
.gnav-logo img{height:24px; width:auto;}
.gnav-links{display:flex; align-items:center; gap:26px; margin:0 auto; font-size:13px; letter-spacing:-0.01em;}
.gnav-links > a, .gnav-drop > button{color:var(--text); opacity:.85; font-size:13px; background:none; border:0; padding:6px 0; cursor:pointer; display:inline-flex; align-items:center; gap:4px;}
.gnav-links > a:hover, .gnav-drop > button:hover{opacity:1; text-decoration:none;}
.gnav-links > a[aria-current="page"]{opacity:1; font-weight:600;}
.gnav-drop{position:relative;}
.gnav-drop svg{width:9px; height:9px; transition:transform .2s var(--ease);}
.gnav-drop-menu{position:absolute; top:100%; left:50%; transform:translateX(-50%); padding-top:12px; opacity:0; pointer-events:none; transition:opacity .18s var(--ease);}
.gnav-drop-menu ul{list-style:none; margin:0; padding:10px; background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:16px; box-shadow:0 18px 40px -18px rgba(0,0,0,.25); min-width:250px;}
.gnav-drop-menu li{margin:0;}
.gnav-drop-menu a{display:block; padding:8px 12px; border-radius:10px; color:var(--text); font-size:14px; white-space:nowrap;}
.gnav-drop-menu a:hover{background:var(--bg-alt); text-decoration:none;}
.gnav-drop:hover .gnav-drop-menu, .gnav-drop.open .gnav-drop-menu{opacity:1; pointer-events:auto;}
.gnav-drop:hover svg, .gnav-drop.open svg{transform:rotate(180deg);}
.gnav-cta{flex:0 0 auto;}
.gnav-menu-demo{display:none !important;}
.gnav-burger{display:none; width:40px; height:40px; margin-right:-10px; border:0; background:none; cursor:pointer; position:relative;}
.gnav-burger span{position:absolute; left:12px; width:16px; height:1.5px; background:var(--text); border-radius:2px; transition:transform .3s var(--ease), top .3s var(--ease);}
.gnav-burger span:nth-child(1){top:16px;} .gnav-burger span:nth-child(2){top:23px;}
.gnav.menu-open .gnav-burger span:nth-child(1){top:19.5px; transform:rotate(45deg);}
.gnav.menu-open .gnav-burger span:nth-child(2){top:19.5px; transform:rotate(-45deg);}
@media (max-width:980px){
  .gnav-links{display:none;}
  .gnav-burger{display:block;}
  .gnav-cta{margin-left:auto;}
  .gnav.menu-open{background:#fff;}
  .gnav.menu-open .gnav-links{display:flex; flex-direction:column; align-items:stretch; gap:0; position:fixed; top:var(--nav-h); left:0; right:0; bottom:0; margin:0;
    padding:18px 40px 40px; background:#fff; overflow-y:auto; overscroll-behavior:contain;}
  .gnav.menu-open .gnav-links > a, .gnav.menu-open .gnav-drop > button{font-size:28px; font-weight:600; letter-spacing:-0.015em; padding:8px 0; opacity:1; width:100%; justify-content:space-between;}
  .gnav.menu-open .gnav-drop svg{width:14px; height:14px;}
  .gnav.menu-open .gnav-drop-menu{position:static; transform:none; opacity:1; pointer-events:auto; padding:0; display:none;}
  .gnav.menu-open .gnav-drop.open .gnav-drop-menu{display:block;}
  .gnav.menu-open .gnav-drop-menu ul{border:0; box-shadow:none; padding:0 0 8px; min-width:0;}
  .gnav.menu-open .gnav-drop-menu a{font-size:17px; padding:8px 0; color:var(--text-2);}
  .gnav.menu-open .gnav-links > a.gnav-menu-demo{display:inline-flex !important; align-self:flex-start; width:auto; margin-top:28px; padding:12px 24px; font-size:17px; font-weight:400; letter-spacing:-0.022em; color:#fff; background:var(--blue); opacity:1; justify-content:center;}
}
@media (min-width:981px){ .gnav-drop-menu::before{content:""; position:absolute; left:0; right:0; top:-6px; height:18px;} }
html.menu-lock, html.menu-lock body{overflow:hidden;}

/* ---------- grandes bandes produits (accueil) ---------- */
.tile{position:relative; text-align:center; overflow:hidden; background:var(--bg);}
.tile + .tile{margin-top:12px;}
.tile.alt{background:var(--bg-alt);}
.tile.dark{background:var(--bg-dark); color:#fff;}
.tile-head{position:relative; z-index:2; padding:56px 22px 0;}
.tile-eyebrow{font-family:var(--font-display); font-size:21px; font-weight:600; letter-spacing:.009em; margin-bottom:6px; color:var(--text-2);}
.tile h2, .tile h1.tile-title{font-size:56px; line-height:1.07; letter-spacing:-0.005em; font-weight:600;}
.tile-sub{font-family:var(--font-display); font-size:28px; line-height:1.14; letter-spacing:.007em; font-weight:400; margin-top:6px;}
.tile.dark .tile-sub, .tile.dark .tile-eyebrow{color:#f5f5f7;}
.tile-media{position:relative; margin-top:40px;}

/* vedette : vidéo plein écran, titre en haut sur voile blanc */
.tile-hero{min-height:calc(100vh - var(--nav-h)); min-height:calc(100svh - var(--nav-h)); display:flex; flex-direction:column;}
.tile-hero .tile-bg{position:absolute; inset:0; z-index:0;}
.tile-hero .tile-bg video, .tile-hero .tile-bg img{width:100%; height:100%; object-fit:cover; object-position:50% 70%;}
.tile-hero .tile-bg::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,.92) 22%,rgba(255,255,255,.55) 40%,rgba(255,255,255,0) 58%);}
.tile-hero .tile-head{padding-top:64px;}
.tile-hero h1, .tile-hero h2{font-size:64px;}

/* capture logiciel dans un cadre d'écran */
.screen{max-width:980px; margin:0 auto; padding:0 22px;}
.screen-frame{background:#fff; border-radius:16px 16px 0 0; box-shadow:0 -1px 0 rgba(0,0,0,.04), 0 30px 80px -30px rgba(42,55,125,.35); overflow:hidden; border:1px solid rgba(0,0,0,.08); border-bottom:0;}
.screen-bar{height:30px; display:flex; align-items:center; gap:7px; padding:0 14px; background:#f5f5f7; border-bottom:1px solid rgba(0,0,0,.06);}
.screen-bar i{width:10px; height:10px; border-radius:50%; background:#d2d2d7;}
.screen-bar span{margin:0 auto; font-size:11px; color:var(--text-2); letter-spacing:0;}
.screen-frame img{width:100%; height:auto;}
.screen.full .screen-frame{border-radius:16px; border-bottom:1px solid rgba(0,0,0,.08);}

/* téléphone (application mobile) */
.phones{display:flex; justify-content:center; align-items:flex-end; gap:0; padding:0 22px;}
.phone{width:300px; border-radius:48px; padding:12px; background:#1d1d1f; box-shadow:0 40px 90px -40px rgba(42,55,125,.55), inset 0 0 0 2px #3a3a3c; margin-bottom:-60px;}
.phone-screen{border-radius:37px; overflow:hidden; background:#f5f5f7; height:560px; position:relative; font-size:13px; text-align:left; color:var(--text); letter-spacing:-0.01em;}
.phone-notch{position:absolute; top:10px; left:50%; transform:translateX(-50%); width:96px; height:28px; border-radius:20px; background:#1d1d1f; z-index:3;}
.app-top{padding:52px 18px 12px; background:#fff; border-bottom:1px solid #e8e8ed;}
.app-top-row{display:flex; align-items:center; justify-content:space-between;}
.app-top b{font-size:22px; font-weight:700; letter-spacing:-0.02em;}
.app-top small{display:block; color:var(--text-2); font-size:12px; margin-top:2px;}
.app-avatar{width:30px; height:30px; border-radius:50%; background:var(--brand-gradient);}
.app-list{padding:12px 12px 0; display:flex; flex-direction:column; gap:8px;}
.app-card{background:#fff; border-radius:14px; padding:11px 12px; display:flex; align-items:center; gap:10px; box-shadow:0 1px 0 rgba(0,0,0,.04);}
.app-plate{font-weight:700; font-size:12px; border:1.5px solid #1d1d1f; border-radius:5px; padding:2px 5px; letter-spacing:.02em;}
.app-card > div{flex:1; min-width:0;}
.app-card strong{display:block; font-size:13px; font-weight:600;}
.app-card > div span{display:block; font-size:11.5px; line-height:1.3; color:var(--text-2);}
.app-pill{font-size:10.5px; font-weight:600; padding:3px 8px; border-radius:20px; background:#e9f2fb; color:var(--blue); white-space:nowrap;}
.app-pill.ok{background:#eaf5ee; color:#2f7d4a;}
.app-quick{margin:12px 12px 0; border-radius:14px; padding:12px; text-align:center; color:#fff; font-weight:600; background:var(--brand-gradient); font-size:14px;}

/* My Spider : visuel de marque */
.brand-mark{display:flex; justify-content:center; padding:10px 22px 70px;}
.brand-mark img{width:min(260px,52vw); height:auto; filter:drop-shadow(0 30px 60px rgba(80,170,227,.35));}

/* ---------- sections génériques ---------- */
.section{padding:110px 0;}
.section.alt{background:var(--bg-alt);}
.section.dark{background:var(--bg-dark); color:#fff;}
.section-head{text-align:center; max-width:820px; margin:0 auto 56px; padding:0 22px;}
.section-head h2{font-size:48px; line-height:1.08;}
.section-head p{font-size:21px; line-height:1.38; color:var(--text-2); margin-top:14px; letter-spacing:.011em;}
.section.dark .section-head p{color:#a1a1a6;}

/* grand texte d'accroche façon Apple */
.headline-copy{max-width:980px; margin:0 auto; padding:0 22px; font-family:var(--font-display); font-size:32px; line-height:1.19; font-weight:600; letter-spacing:.004em; color:var(--text-2);}
.headline-copy strong{color:var(--text); font-weight:600;}

/* héros des pages produit / métier */
.phero{text-align:center; padding:70px 0 0; background:var(--bg); overflow:hidden;}
.phero-eyebrow{font-family:var(--font-display); font-size:24px; font-weight:600; letter-spacing:.009em; background:var(--brand-gradient); -webkit-background-clip:text; background-clip:text; color:transparent; display:inline-block; margin-bottom:10px;}
.phero h1{font-size:72px; line-height:1.05; letter-spacing:-0.015em; max-width:960px; margin:0 auto; padding:0 22px;}
.phero-sub{font-family:var(--font-display); font-size:24px; line-height:1.25; color:var(--text-2); max-width:760px; margin:18px auto 0; padding:0 22px; letter-spacing:.009em;}
.phero-media{margin-top:56px;}
.phero-media.photo{max-width:1180px; margin-left:auto; margin-right:auto; padding:0 22px;}
.phero-media.photo img{width:100%; height:auto; border-radius:var(--radius);}

/* galerie des points forts (défilement horizontal) */
.gallery{position:relative;}
.gallery-track{display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding:0 max(22px, calc((100vw - var(--maxw)) / 2 + 22px)); padding:0 max(22px, calc((100vw - var(--maxw)) / 2 + 22px)) 30px; scrollbar-width:none;}
.gallery-track::-webkit-scrollbar{display:none;}
.gcard{flex:0 0 min(372px,82vw); scroll-snap-align:start; background:#fff; border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column;}
.section.alt .gcard{background:#fff;}
.gcard figure{margin:0; aspect-ratio:4/5; overflow:hidden; background:var(--bg-alt);}
.gcard figure img{width:100%; height:100%; object-fit:cover;}
.gcard-body{padding:24px 26px 28px;}
.gcard-num{font-size:14px; font-weight:600; color:var(--blue); margin-bottom:6px;}
.gcard h3{font-size:24px; line-height:1.17; margin-bottom:8px;}
.gcard p{color:var(--text-2); font-size:17px;}
.gallery-nav{display:flex; justify-content:flex-end; gap:12px; max-width:var(--maxw); margin:0 auto; padding:0 22px;}
.gallery-nav button{width:40px; height:40px; border-radius:50%; border:0; background:#e8e8ed; color:var(--text); font-size:20px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;}
.gallery-nav button:hover{background:#d2d2d7;}
.gallery-nav button:disabled{opacity:.4; cursor:default;}

/* grille de fonctionnalités */
.bento{display:grid; grid-template-columns:repeat(6,1fr); gap:20px; max-width:var(--maxw); margin:0 auto; padding:0 22px;}
.bento-card{grid-column:span 2; background:#fff; border-radius:var(--radius); padding:36px 32px; display:flex; flex-direction:column; gap:10px; min-height:260px;}
.section:not(.alt) .bento-card{background:var(--bg-alt);}
.bento-card.wide{grid-column:span 3;}
.bento-card.full{grid-column:1 / -1;}
.bento-card h3{font-size:28px; line-height:1.14;}
.bento-card p{color:var(--text-2); font-size:17px;}
.bento-card .tag{align-self:flex-start; font-size:12px; font-weight:600; color:var(--blue); background:#e9f2fb; padding:4px 10px; border-radius:20px;}
.bento-card.photo{padding:0; overflow:hidden; min-height:320px; position:relative;}
.bento-card.photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.bento-icon{width:44px; height:44px; border-radius:12px; background:var(--brand-gradient); display:flex; align-items:center; justify-content:center; margin-bottom:6px;}
.bento-icon svg{width:22px; height:22px; stroke:#fff; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}

/* chiffres clés */
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; max-width:var(--maxw); margin:0 auto; padding:0 22px;}
.stat{background:var(--bg-alt); border-radius:var(--radius); padding:44px 32px; text-align:center;}
.section.alt .stat{background:#fff;}
.stat-n{font-family:var(--font-display); font-size:80px; line-height:1; font-weight:700; letter-spacing:-0.03em; background:var(--brand-gradient); -webkit-background-clip:text; background-clip:text; color:transparent; display:inline-block; padding-bottom:6px;}
.stat-t{margin-top:12px; font-size:19px; line-height:1.3; color:var(--text-2);}

/* bande pleine largeur photo + texte */
.feature-band{position:relative; background:#000; color:#fff; text-align:center; overflow:hidden;}
.feature-band .fb-head{padding:100px 22px 0; position:relative; z-index:2;}
.feature-band h2{font-size:56px; line-height:1.07;}
.feature-band p{font-size:21px; color:#a1a1a6; max-width:640px; margin:14px auto 0; line-height:1.38;}
.feature-band .fb-media{margin-top:50px;}
.feature-band .fb-media img{width:100%; max-height:620px; object-fit:cover;}

/* vidéo dans un cadre */
.video-frame{max-width:980px; margin:0 auto; padding:0 22px;}
.video-frame video{width:100%; border-radius:var(--radius); background:#000; aspect-ratio:16/9; object-fit:cover;}
.caption{max-width:640px; margin:22px auto 0; padding:0 22px; text-align:center; color:var(--text-2); font-size:17px;}

/* trio de cartes */
.trio{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; max-width:var(--maxw); margin:0 auto; padding:0 22px;}
.trio-card{background:var(--bg-alt); border-radius:var(--radius); padding:40px 32px; display:flex; flex-direction:column; gap:10px;}
.section.alt .trio-card{background:#fff;}
.trio-card h3{font-size:24px; line-height:1.17;}
.trio-card p{color:var(--text-2);}
.trio-card .link-more{margin-top:auto; padding-top:12px;}

/* comparatif */
.compare{display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:980px; margin:0 auto; padding:0 22px;}
.compare-col{border-radius:var(--radius); padding:40px 36px; background:#fff;}
.compare-col.us{background:var(--brand-gradient); color:#fff;}
.compare-col h3{font-size:14px; font-weight:600; letter-spacing:.02em; text-transform:uppercase; margin-bottom:20px; color:var(--text-2);}
.compare-col.us h3{color:rgba(255,255,255,.8);}
.compare-col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px;}
.compare-col li{display:flex; gap:12px; font-size:19px; line-height:1.3;}
.compare-col li::before{content:"–"; color:var(--text-2); flex:0 0 auto;}
.compare-col.us li::before{content:"✓"; color:#fff; font-weight:700;}

/* caractéristiques (My Robin) */
.specs{display:grid; grid-template-columns:repeat(4,1fr); gap:44px 30px; max-width:var(--maxw); margin:0 auto; padding:0 22px;}
.specs h3{font-size:19px; margin-bottom:12px; padding-top:16px; border-top:1px solid var(--line);}
.specs ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px;}
.specs li{font-size:15px; color:var(--text-2);}
.specs li em{font-style:normal; font-size:11px; font-weight:600; color:var(--blue); background:#e9f2fb; padding:2px 7px; border-radius:20px; margin-left:6px;}
.specs-note{max-width:var(--maxw); margin:40px auto 0; padding:0 22px; color:var(--text-2); font-size:14px; text-align:center;}

/* phrase qui change de mot */
.rotator{font-family:var(--font-display); font-size:56px; line-height:1.1; font-weight:600; text-align:center; padding:0 22px; letter-spacing:-0.01em;}
.rotator .word{background:var(--brand-gradient); -webkit-background-clip:text; background-clip:text; color:transparent; display:inline-block; transition:opacity .35s var(--ease), transform .35s var(--ease);}
.rotator .word.out{opacity:0; transform:translateY(12px);}

/* grande citation / affirmation */
.statement{text-align:center; padding:0 22px;}
.statement blockquote, .statement .big{margin:0 auto; max-width:900px; font-family:var(--font-display); font-size:48px; line-height:1.1; font-weight:600; letter-spacing:-0.01em;}
.statement .big + p{font-size:21px; color:var(--text-2); max-width:620px; margin:18px auto 0;}

/* parcours « du scan au logiciel » */
.flow{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; max-width:var(--maxw); margin:0 auto; padding:0 22px;}
.flow-step{background:#fff; border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column;}
.flow-step figure{margin:0; aspect-ratio:4/3; overflow:hidden; background:var(--bg-alt);}
.flow-step figure img{width:100%; height:100%; object-fit:cover;}
.flow-step figure.contain img{object-fit:cover; object-position:left top;}
.flow-step figure.top img{object-position:50% 28%;}
/* photo de la Jaguar : coin blanc en bas dans l'original, on cadre par le haut */
.crop-top img{object-position:50% 22%;}
.phero-media.photo.crop-top img{aspect-ratio:16/9; object-fit:cover;}
.flow-step div{padding:24px 26px 30px;}
.flow-step .gcard-num{margin-bottom:6px;}
.flow-step h3{font-size:22px; line-height:1.2; margin-bottom:6px;}
.flow-step p{color:var(--text-2);}

/* pour qui ? */
.who{display:grid; grid-template-columns:repeat(5,1fr); gap:14px; max-width:var(--maxw); margin:0 auto; padding:0 22px;}
.who a{background:#fff; border-radius:var(--radius-s); padding:24px 20px 22px; color:var(--text); display:flex; flex-direction:column; gap:14px; min-height:150px; transition:transform .3s var(--ease), box-shadow .3s var(--ease);}
.section:not(.alt) .who a{background:var(--bg-alt);}
.who a:hover{text-decoration:none; transform:translateY(-3px); box-shadow:0 20px 40px -24px rgba(42,55,125,.35);}
.who a h3{font-size:19px; line-height:1.2; overflow-wrap:break-word; hyphens:auto; -webkit-hyphens:auto;}
.who a span{margin-top:auto; color:var(--link); font-size:14px;}
.who a span::after{content:" ›";}

/* duo produits (pages métier) */
.duo{display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:var(--maxw); margin:0 auto; padding:0 22px;}
.duo-card{background:var(--bg-alt); border-radius:var(--radius); overflow:hidden; text-align:center; display:flex; flex-direction:column;}
.section.alt .duo-card{background:#fff;}
.duo-card .duo-head{padding:48px 30px 0;}
.duo-card h3{font-size:40px; line-height:1.1;}
.duo-card p{font-size:19px; color:var(--text-2); margin-top:8px;}
.duo-card .ctas{margin-top:18px;}
.duo-card figure{margin:36px 0 0; flex:1; display:flex; align-items:flex-end; justify-content:center; overflow:hidden; min-height:280px;}
.duo-card figure img{width:100%; height:100%; object-fit:cover; max-height:360px;}
.duo-card figure.shot{padding:0 30px;}
.duo-card figure.shot img{object-fit:cover; object-position:left top; border-radius:12px 12px 0 0; box-shadow:0 20px 50px -30px rgba(42,55,125,.5);}

/* formulaire de contact */
.contact{max-width:680px; margin:0 auto; padding:0 22px;}
.contact-form{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:8px;}
.contact-form .full{grid-column:1 / -1;}
.contact-form input, .contact-form textarea{width:100%; font:inherit; font-size:17px; color:var(--text); background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px 16px; letter-spacing:-0.022em; transition:border-color .2s, box-shadow .2s;}
.section:not(.alt) .contact-form input, .section:not(.alt) .contact-form textarea{background:var(--bg-alt); border-color:transparent;}
.contact-form input:focus, .contact-form textarea:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 4px rgba(55,106,182,.15);}
.contact-form textarea{resize:vertical; min-height:130px;}
.contact-form .ctas{grid-column:1 / -1; margin-top:8px;}
.contact-note{grid-column:1 / -1; text-align:center; font-size:14px; color:var(--text-2);}
.form-ok{display:none; text-align:center; padding:30px 0;}
.form-ok.show{display:block;}
.form-ok h3{font-size:32px; margin-bottom:10px;}
.form-ok p{color:var(--text-2); font-size:19px;}

/* bandeau d'appel final */
.cta-band{text-align:center; padding:110px 22px;}
.cta-band h2{font-size:48px; line-height:1.08; max-width:820px; margin:0 auto;}
.cta-band p{font-size:21px; color:var(--text-2); margin-top:12px;}

/* page texte (mentions légales) */
.legal{max-width:760px; margin:0 auto; padding:80px 22px 110px;}
.legal h1{font-size:48px; margin-bottom:8px;}
.legal .updated{color:var(--text-2); margin-bottom:48px;}
.legal h2{font-size:24px; margin:40px 0 12px;}
.legal p{color:#333336; margin-bottom:12px;}

/* ---------- pied de page ---------- */
.gfooter{background:var(--bg-alt); color:var(--text-2); font-size:12px; line-height:1.33; letter-spacing:-0.01em;}
.gfooter-inner{max-width:var(--maxw); margin:0 auto; padding:44px 22px 24px;}
.gfooter-top{display:flex; align-items:flex-start; justify-content:space-between; gap:40px; padding-bottom:28px; border-bottom:1px solid var(--line);}
.gfooter-brand img{width:132px; height:auto;}
.gfooter-brand p{margin-top:14px; max-width:260px; font-size:12px;}
.gfooter-cols{display:grid; grid-template-columns:repeat(3,minmax(150px,auto)); gap:30px 60px;}
.gfooter h3{font-size:12px; font-weight:600; color:var(--text); margin-bottom:10px; letter-spacing:-0.01em;}
.gfooter ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px;}
.gfooter a{color:var(--text-2);}
.gfooter a:hover{color:var(--text); text-decoration:underline;}
.gfooter-bottom{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; padding-top:16px;}
.gfooter-bottom p{font-size:12px;}

/* ---------- apparition douce au défilement ---------- */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform .9s var(--ease);}
.reveal.in{opacity:1; transform:none;}
@media (prefers-reduced-motion:reduce){ .reveal{opacity:1; transform:none; transition:none;} .rotator .word{transition:none;} }

/* vidéos d'ambiance : jamais de lecteur visible */
video[autoplay]::-webkit-media-controls, video[autoplay]::-webkit-media-controls-start-playback-button, video[autoplay]::-webkit-media-controls-overlay-play-button{display:none !important; -webkit-appearance:none; opacity:0;}

/* ---------- tablette ---------- */
@media (max-width:1068px){
  .tile h2, .tile h1.tile-title{font-size:48px;}
  .tile-hero h1, .tile-hero h2{font-size:56px;}
  .tile-sub{font-size:24px;}
  .phero h1{font-size:56px;}
  .section-head h2, .cta-band h2{font-size:40px;}
  .headline-copy{font-size:28px;}
  .who{grid-template-columns:repeat(3,1fr);}
  .bento-card, .bento-card.wide{grid-column:span 3;}
  .specs{grid-template-columns:repeat(3,1fr);}
  .rotator{font-size:44px;}
  .statement blockquote, .statement .big{font-size:40px;}
  .feature-band h2{font-size:48px;}
}

/* ---------- téléphone ---------- */
@media (max-width:734px){
  body{font-size:17px;}
  .tile + .tile{margin-top:10px;}
  .tile-head{padding-top:48px;}
  .tile-eyebrow{font-size:19px;}
  .tile h2, .tile h1.tile-title{font-size:40px;}
  .tile-hero h1, .tile-hero h2{font-size:44px;}
  .tile-sub{font-size:21px;}
  .tile-hero{min-height:0;}
  .tile-hero .tile-bg{order:2;}
  .tile-hero .tile-bg{position:relative; inset:auto; margin:30px 16px 16px; aspect-ratio:4/5; border-radius:28px; overflow:hidden; isolation:isolate; -webkit-mask-image:-webkit-radial-gradient(white,black);}
  .tile-hero .tile-bg::after{display:none;}
  .tile-hero .tile-bg video, .tile-hero .tile-bg img{object-position:47% 62%;}
  .btn{font-size:15px; padding:10px 18px;}
  .ctas{gap:12px; margin-top:18px;}
  .section{padding:80px 0;}
  .section-head{margin-bottom:40px;}
  .section-head h2, .cta-band h2{font-size:32px;}
  .section-head p, .cta-band p{font-size:19px;}
  .headline-copy{font-size:24px;}
  .phero{padding-top:48px;}
  .phero-eyebrow{font-size:19px;}
  .phero h1{font-size:40px;}
  .phero-sub{font-size:19px;}
  .phero-media{margin-top:40px;}
  .screen-bar{height:22px;} .screen-bar i{width:7px; height:7px;} .screen-bar span{display:none;}
  .phone{width:250px; border-radius:40px;} .phone-screen{height:470px; border-radius:30px;}
  .bento{grid-template-columns:1fr;} .bento-card, .bento-card.wide{grid-column:auto; min-height:0;}
  .bento-card.photo{min-height:260px;}
  .stats, .trio, .flow, .duo, .compare{grid-template-columns:1fr;}
  .stat-n{font-size:64px;}
  .who{grid-template-columns:1fr 1fr;}
  .who a{min-height:120px; padding:20px 16px;}
  .specs{grid-template-columns:1fr 1fr; gap:32px 20px;}
  .rotator{font-size:32px;}
  .statement blockquote, .statement .big{font-size:30px;}
  .feature-band h2{font-size:36px;} .feature-band .fb-head{padding-top:70px;}
  .duo-card h3{font-size:32px;}
  .contact-form{grid-template-columns:1fr;}
  .cta-band{padding:80px 22px;}
  .legal h1{font-size:36px;}
  .gfooter-top{flex-direction:column; gap:28px;}
  .gfooter-cols{grid-template-columns:1fr 1fr; gap:24px;}
  .gnav-cta .btn{padding:5px 11px;}
}
@media (max-width:600px){ .gnav-cta{display:none;} .gnav-burger{margin-left:auto;} }
@media (max-width:380px){ .who{gap:10px;} .who a{padding:18px 14px;} .who a h3{font-size:16px;} }

/* ==========================================================================
   Interrupteur clair / sombre
   ========================================================================== */
.theme-switch{flex:0 0 auto; border:0; background:none; padding:6px; cursor:pointer; display:flex; align-items:center;}
.theme-switch-track{position:relative; width:46px; height:26px; border-radius:26px; background:#e8e8ed; transition:background-color .3s var(--ease); display:block;}
.theme-switch-knob{position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .35s var(--ease), background-color .3s var(--ease); display:flex; align-items:center; justify-content:center;}
.theme-switch svg{width:12px; height:12px; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; position:absolute; transition:opacity .25s var(--ease);}
.theme-switch .ico-sun{stroke:#F2A31B; opacity:1;}
.theme-switch .ico-moon{stroke:#fff; opacity:0;}
.theme-switch:hover .theme-switch-track{background:#dcdce1;}
.theme-switch:focus-visible{outline:2px solid var(--blue); outline-offset:2px; border-radius:30px;}
[data-theme="dark"] .theme-switch-track{background:var(--blue);}
[data-theme="dark"] .theme-switch-knob{transform:translateX(20px); background:#1d1d1f;}
[data-theme="dark"] .theme-switch .ico-sun{opacity:0;}
[data-theme="dark"] .theme-switch .ico-moon{opacity:1;}
@media (max-width:980px){ .theme-switch{margin-left:auto;} .gnav-cta{margin-left:0;} }
@media (max-width:600px){ .gnav-burger{margin-left:4px;} }

/* logos selon le thème */
.logo-dark{display:none !important;}
[data-theme="dark"] .logo-light{display:none !important;}
[data-theme="dark"] .logo-dark{display:block !important;}

/* transition douce au changement de thème */
html.theme-anim, html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after{transition:background-color .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease) !important;}

/* ==========================================================================
   Thème sombre (mêmes couleurs de marque, fonds noirs façon Apple)
   ========================================================================== */
[data-theme="dark"]{
  color-scheme:dark;
  --text:#F5F5F7;
  --text-2:#A1A1A6;
  --bg:#000000;
  --bg-alt:#111113;
  --line:#38383D;
  --link:#50AAE3;
  --link-hover:#8CCBF0;
  --brand-gradient:linear-gradient(135deg,#8CCBF0 0%,#50AAE3 45%,#376AB6 100%);
  --card:#1D1D1F;
}
[data-theme="dark"] .gnav{background:rgba(0,0,0,.92); border-bottom-color:rgba(255,255,255,.1);}
[data-theme="dark"] .gnav-drop-menu ul{background:#1d1d1f; border-color:rgba(255,255,255,.1); box-shadow:0 18px 40px -18px rgba(0,0,0,.8);}
[data-theme="dark"] .gnav-drop-menu a:hover{background:#2c2c2e;}
@media (max-width:980px){
  [data-theme="dark"] .gnav.menu-open, [data-theme="dark"] .gnav.menu-open .gnav-links{background:#000;}
}
[data-theme="dark"] .btn-secondary{color:var(--blue-light); border-color:var(--blue-light);}
[data-theme="dark"] .btn-secondary:hover{background:var(--blue-light); color:#000;}
[data-theme="dark"] .tile-hero .tile-bg::after{background:linear-gradient(180deg,#000 0%,rgba(0,0,0,.9) 22%,rgba(0,0,0,.5) 40%,rgba(0,0,0,0) 58%);}
[data-theme="dark"] .tile.dark{background:#111113;}
[data-theme="dark"] .screen-frame{background:#1d1d1f; border-color:rgba(255,255,255,.12); box-shadow:0 30px 80px -30px rgba(80,170,227,.35);}
[data-theme="dark"] .screen-bar{background:#2c2c2e; border-bottom-color:rgba(255,255,255,.08);}
[data-theme="dark"] .screen-bar i{background:#48484a;}
[data-theme="dark"] .gcard, [data-theme="dark"] .section.alt .gcard,
[data-theme="dark"] .bento-card, [data-theme="dark"] .section:not(.alt) .bento-card,
[data-theme="dark"] .who a, [data-theme="dark"] .section:not(.alt) .who a,
[data-theme="dark"] .trio-card, [data-theme="dark"] .section.alt .trio-card,
[data-theme="dark"] .compare-col:not(.us), [data-theme="dark"] .flow-step,
[data-theme="dark"] .stat, [data-theme="dark"] .section.alt .stat,
[data-theme="dark"] .duo-card, [data-theme="dark"] .section.alt .duo-card{background:var(--card);}
[data-theme="dark"] .gcard figure, [data-theme="dark"] .flow-step figure{background:#2c2c2e;}
[data-theme="dark"] .bento-card .tag, [data-theme="dark"] .specs li em{background:rgba(80,170,227,.16); color:var(--blue-light);}
[data-theme="dark"] .gallery-nav button{background:#2c2c2e; color:var(--text);}
[data-theme="dark"] .gallery-nav button:hover{background:#3a3a3c;}
[data-theme="dark"] .contact-form input, [data-theme="dark"] .contact-form textarea,
[data-theme="dark"] .section:not(.alt) .contact-form input, [data-theme="dark"] .section:not(.alt) .contact-form textarea{background:#1d1d1f; border-color:#38383d; color:var(--text);}
[data-theme="dark"] .contact-form input::placeholder, [data-theme="dark"] .contact-form textarea::placeholder{color:#8e8e93;}
[data-theme="dark"] .legal p{color:#d2d2d7;}
[data-theme="dark"] .who a:hover{box-shadow:0 20px 40px -24px rgba(80,170,227,.35);}
[data-theme="dark"] .phone{box-shadow:0 40px 90px -40px rgba(80,170,227,.45), inset 0 0 0 2px #3a3a3c;}
[data-theme="dark"] .gfooter a:hover{color:var(--text);}

/* ==========================================================================
   Animations (reprises de la v1, adaptées) — transform / opacity uniquement
   ========================================================================== */
/* entrée du héros au chargement */
@keyframes rise{from{opacity:0; transform:translateY(24px);} to{opacity:1; transform:none;}}
.tile-hero .tile-head > *, .phero > h1, .phero > .phero-eyebrow, .phero > .phero-sub, .phero > .ctas{animation:rise 1s var(--ease) both;}
.tile-hero .tile-head > :nth-child(2), .phero > h1{animation-delay:.08s;}
.tile-hero .tile-head > :nth-child(3), .phero > .phero-sub{animation-delay:.18s;}
.phero > .ctas{animation-delay:.28s;}
.phero-media{animation:rise 1.2s .35s var(--ease) both;}

/* vidéo d'accueil épinglée : zoom + titre qui s'efface au défilement (ordinateur) */
.hero-scroll{position:relative;}
@media (min-width:735px){
  .hero-scroll{height:170vh;}
  .hero-scroll > .tile-hero{position:sticky; top:var(--nav-h); height:calc(100vh - var(--nav-h)); min-height:0;}
  .hero-scroll .tile-bg{will-change:transform; transform-origin:50% 60%;}
  .hero-scroll .tile-head{will-change:opacity, transform;}
}
.hero-scroll + .tile{margin-top:12px;}

/* texte d'accroche qui s'allume mot à mot */
.headline-copy .w{opacity:.18; transition:opacity .25s linear;}
.headline-copy.lit .w{opacity:1;}

/* grande phrase qui grossit (My Robin) */
.statement .big{will-change:transform, opacity;}

/* parcours : barre de progression */
.flow-progress{max-width:var(--maxw); margin:0 auto 26px; padding:0 22px;}
.flow-progress span{display:block; height:3px; border-radius:3px; background:var(--line); overflow:hidden;}
.flow-progress i{display:block; height:100%; width:0; background:var(--brand-gradient); border-radius:3px;}
@media (max-width:734px){ .flow-progress{display:none;} }

/* cartes : effet 3D au survol (souris uniquement) */
@media (hover:hover) and (pointer:fine){
  .tilt{transform-style:preserve-3d; will-change:transform;}
}
.zoom-in img{transform:scale(1.08); transition:transform 1.6s var(--ease);}
.zoom-in.in img{transform:none;}
.reveal.zoom-in{transform:none;}

@media (prefers-reduced-motion:reduce){
  .tile-hero .tile-head > *, .phero > *, .phero-media{animation:none;}
  .hero-scroll{height:auto;}
  .hero-scroll > .tile-hero{position:relative; top:auto;}
  .headline-copy .w{opacity:1;}
  .zoom-in img{transform:none;}
}