/* ═══════════════════════════════════════════════════════
   MJ PRODUCTION
   Le bleu du logo vit dans l'encre, comme neutre, pour ne jamais
   entrer en concurrence avec lui-même. #006494 sert d'aplat, rare —
   deux emplois maximum par écran. Les cartes sont blanches comme la
   page : c'est le filet qui sépare, pas un écart de valeur.
   ═══════════════════════════════════════════════════════ */

:root{
  --paper:#fff;
  --ink:#0f1720;      /* sections sombres, texte principal */
  --ink-2:#18222c;
  --ash:#4a5561;      /* corps de texte */
  --mute:#67717e;     /* méta, légendes. Ne pas éclaircir. */
  --line:#e5e9ed;
  --sunk:#f4f6f8;

  /* Bleu vif de la marque — s'emploie en APLAT, texte encre par-dessus,
     exactement comme le vert du modèle. Le bleu profond du logo sert
     aux fonds pleins. */
  --accent:#00a6ef;
  --accent-2:#33b8f3;
  --brand:#006494;    /* bleu du logo */
  --brand-700:#00506f;

  /* Secondaires joyeux du modèle */
  --mint:#8fe3bd;
  --cyan:#3ec8f0;
  --blush:#f2cdcd;
  --lilac:#cbbcec;
  --sand:#f3dcbb;

  --r-sm:10px;
  --r:16px;
  --r-lg:24px;
  --r-xl:32px;

  --pad:clamp(20px,5vw,64px);
  --gap:clamp(16px,2vw,24px);
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scrollbar-gutter:stable}

body{
  margin:0;padding:10px;
  background:var(--paper);color:var(--ink);
  font:400 16px/1.6 'Inter',system-ui,-apple-system,sans-serif;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4{
  font-family:'Inter Tight','Inter',system-ui,sans-serif;
  font-weight:600;letter-spacing:-.035em;line-height:1.04;margin:0;
  text-wrap:balance;
}
p{margin:0}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}

::selection{background:var(--ink);color:var(--paper)}

.skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--ink);color:#fff;padding:12px 20px}
.skip:focus{left:0}

:where(a,button,summary,input,select,textarea):focus-visible{
  outline:2px solid var(--ink);outline-offset:3px;border-radius:4px;
}
.sec--dark :where(a,button):focus-visible,
.hero :where(a,button):focus-visible,
.phero :where(a,button):focus-visible{outline-color:#fff}

.wrap{max-width:1280px;margin-inline:auto;padding-inline:var(--pad)}

/* ═════════ MICRO-LABELS ═════════ */
.sec__label,.sec__num,.pill-badge,.tags span,.card__tag,.offer__kicker,
.offer__note,.form__note,.nav__lang,.reel__kicker,.phero__kicker,
.crumbs,.cta__note,.foot__col h4,.marquee__label,.row__idx,.step__num{
  font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
}

/* ═══════════════════════════════════════════════════════
   ANIMATIONS PARTAGÉES
   ═══════════════════════════════════════════════════════ */

/* Soulignement : entre par la gauche, sort par la droite. */
.ul{position:relative}
.ul::after{
  content:"";position:absolute;left:0;bottom:-3px;height:1px;width:100%;
  background:currentColor;transform:scaleX(0);transform-origin:100% 50%;
  transition:transform .4s var(--ease);
}
.ul:hover::after,.ul:focus-visible::after{transform:scaleX(1);transform-origin:0 50%}

/* Apparition : montée + flou qui se dissipe. Une seule physique partout. */
.reveal{
  opacity:0;transform:translateY(28px);filter:blur(12px);
  transition:opacity .75s var(--ease),transform 1s var(--ease),filter 1s var(--ease);
}
.reveal.in{opacity:1;transform:none;filter:blur(0)}

/* ═════════ RÉVÉLATION CHROMATIQUE ═════════
   Un dégradé découpé sur le texte balaie de gauche à droite : devant le
   front, le texte est transparent ; sur le front, les couleurs de la marque ;
   derrière, la couleur définitive. --sweep est enregistrée pour que le
   navigateur interpole en continu au lieu de sauter d'une étape à l'autre. */
@property --sweep{syntax:'<percentage>';inherits:false;initial-value:-14%}

/* Le titre monte en se défloutant ; c'est le mot-clé qui porte le balayage. */
.split{opacity:0;transform:translateY(24px);filter:blur(10px);
  transition:opacity .75s var(--ease),transform 1s var(--ease),filter 1s var(--ease)}
.split.in{opacity:1;transform:none;filter:blur(0)}

/* ═════════ MOT-CLÉ — le texte se dévoile en balayage ═════════
   Deux animations simultanées : le mot est découvert de gauche à droite
   (clip-path) pendant qu'une bande de couleurs court sur le front. Les deux
   bords du dégradé valent --fg, donc une fois découvert le texte est plein. */
.key{--fg:var(--ink);display:inline-block;padding-inline:.02em}
/* En attente : le mot n'est pas là du tout. Posé par script.js uniquement
   sur ce qui est encore hors écran, et toujours retiré à l'arrivée. */
.key.is-wait{clip-path:inset(-.3em 100% -.3em -.08em)}
.key.sweeping{
  background-image:linear-gradient(90deg,
    var(--fg) 0%,
    var(--fg) calc(var(--sweep) - 15%),
    #00a6ef calc(var(--sweep) - 8%),
    #3ec8f0 var(--sweep),
    #8fe3bd calc(var(--sweep) + 8%),
    var(--fg) calc(var(--sweep) + 15%),
    var(--fg) 100%);
  background-size:100% 100%;background-repeat:no-repeat;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  animation:
    sweep 1.15s cubic-bezier(.62,.02,.34,1) forwards,
    unveil 1.15s cubic-bezier(.62,.02,.34,1) forwards;
}
@keyframes sweep{from{--sweep:-15%}to{--sweep:115%}}
@keyframes unveil{
  from{clip-path:inset(-.25em 100% -.25em -.08em)}
  to{clip-path:inset(-.25em -.08em -.25em -.08em)}
}
.hero__title .key,.phero__title .key,.sec--dark .key,.intro__content .key{--fg:#fff}
.cta__inner .key{--fg:var(--ink)}

/* ═════════ MOT QUI TOURNE ═════════
   Tous les mots sont empilés dans la même cellule de grille : les copies
   invisibles réservent la largeur du plus long, donc la ligne ne saute pas
   quand le mot change. */
.rota{display:inline-grid;vertical-align:baseline;text-align:left}
.rota__size{grid-area:1/1;visibility:hidden;white-space:nowrap}
.rota__word{grid-area:1/1;justify-self:start;white-space:nowrap}

.count{font-variant-numeric:tabular-nums}

/* ═══════════════════════════════════════════════════════
   CURSEUR PERSONNALISÉ
   Actif seulement au pointeur précis : sur écran tactile le curseur natif
   n'existe pas et le masquer casserait la navigation.
   ═══════════════════════════════════════════════════════ */
@media (pointer:fine){
  /* !important et pseudo-éléments compris : les champs de formulaire et les
     boutons portent un curseur d'agent utilisateur qui repassait devant. */
  html.cur-on,html.cur-on *,
  html.cur-on *::before,html.cur-on *::after,
  html.cur-on select,html.cur-on input,html.cur-on textarea,
  html.cur-on button,html.cur-on a,html.cur-on summary,
  html.cur-on option,html.cur-on label{cursor:none!important}
}
.cur,.cur-label{position:fixed;top:0;left:0;pointer-events:none;opacity:0}
.cur{
  z-index:9999;width:22px;height:22px;
  transform:translate3d(-200px,-200px,0);
  will-change:transform;color:var(--accent);
  transition:opacity .25s var(--ease);
}
/* Le rétrécissement au survol se fait sur le SVG, PAS sur .cur.
   La propriété `scale` se compose par-dessus `transform` : appliquée ici,
   elle multipliait aussi la translation et déportait la flèche vers le coin
   haut-gauche, d'autant plus loin que le pointeur était à droite. */
.cur svg{
  display:block;width:100%;height:100%;
  transform-origin:0 0;
  transition:transform .25s var(--ease);
  filter:drop-shadow(0 1px 3px rgba(15,23,32,.35));
}
.cur.is-on{opacity:1}
.cur.is-over svg{transform:scale(.62)}

.cur-label{
  z-index:9998;
  background:var(--accent);color:var(--ink);
  padding:7px 13px;border-radius:9px;
  font-family:'Inter Tight',sans-serif;font-weight:500;font-size:12.5px;
  letter-spacing:-.01em;white-space:nowrap;
  box-shadow:0 6px 20px rgba(15,23,32,.22);
  transform:translate3d(-200px,-200px,0);
  will-change:transform;
  /* Aucune transition sur transform : l'étiquette colle au pointeur comme la
     flèche. Un retard, même de 160 ms, la faisait paraître décrochée dès
     qu'on déplaçait vite la souris. */
  transition:opacity .2s var(--ease);
}
.cur-label.is-on{opacity:1}

/* ═══════════════════════════════════════════════════════
   BOUTONS
   ═══════════════════════════════════════════════════════ */
.btn{
  --bg:var(--ink);--fg:var(--paper);--icobg:#fff;--icofg:var(--ink);--sweep:rgba(255,255,255,.26);
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;gap:14px;
  background:var(--bg);color:var(--fg);
  padding:8px 8px 8px 20px;border-radius:13px;
  font-family:'Inter Tight',sans-serif;font-weight:500;font-size:15px;letter-spacing:-.015em;
  white-space:nowrap;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .25s;
}
.btn > *{position:relative;z-index:1}
/* pastille carrée : la flèche pivote au survol, comme sur le modèle */
.btn .ico{
  display:grid;place-items:center;width:36px;height:36px;border-radius:9px;
  background:var(--icobg);color:var(--icofg);
  font-style:normal;font-size:15px;line-height:1;
  transition:transform .35s var(--ease);
}
.btn:hover .ico{transform:rotate(45deg)}
/* balayage lumineux */
.btn::after{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(90deg,transparent,var(--sweep),transparent);
  transform:translateX(-100%);transition:transform .75s var(--ease);
}
.btn:hover::after{transform:translateX(100%)}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(15,23,32,.16)}
.btn:active{transform:translateY(0)}

/* bleu vif + texte encre — le duo du modèle */
.btn--accent{--bg:var(--accent);--fg:var(--ink);--icobg:var(--ink);--icofg:var(--accent);--sweep:rgba(255,255,255,.45)}
.btn--accent:hover{--bg:var(--accent-2)}
.btn--dark{--bg:var(--ink);--fg:#fff;--icobg:var(--accent);--icofg:var(--ink)}
.btn--dark:hover{--bg:var(--ink-2)}
.btn--light{--bg:#fff;--fg:var(--ink);--icobg:var(--ink);--icofg:#fff;--sweep:rgba(15,23,32,.07)}
.btn--ghost{--bg:transparent;--fg:var(--ink);--sweep:rgba(15,23,32,.06);border:1px solid var(--line);padding:13px 22px}
.btn--ghost:hover{--bg:var(--sunk)}
.btn--sm{font-size:14px;padding:6px 6px 6px 17px;border-radius:11px}
.btn--sm .ico{width:30px;height:30px;border-radius:8px;font-size:13px}
.btn--full{width:100%;justify-content:space-between}

/* ═══════════════════════════════════════════════════════
   NAVIGATION
   ═══════════════════════════════════════════════════════ */
.nav{position:fixed;top:20px;left:0;right:0;z-index:100;padding-inline:clamp(14px,3vw,28px)}
.nav__inner{
  max-width:1280px;margin-inline:auto;
  display:flex;align-items:center;gap:20px;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(20px) saturate(1.4);
  border:1px solid var(--line);border-radius:16px;
  padding:9px 9px 9px 18px;
  box-shadow:0 4px 24px rgba(16,26,36,.07);
  transition:box-shadow .35s,background .35s;
}
.nav.is-stuck .nav__inner{background:rgba(255,255,255,.95);box-shadow:0 8px 30px rgba(16,26,36,.1)}

.logo{display:flex;align-items:center;gap:11px;flex:none}
.logo img{width:32px;height:32px;flex:none}
.logo__text{font-family:'Inter Tight',sans-serif;font-weight:600;font-size:16px;letter-spacing:-.03em;line-height:1.1}
.logo__text em{
  font-style:normal;font-weight:400;color:var(--mute);display:block;
  font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;margin-top:3px;
  font-family:ui-monospace,monospace;
}
.logo--light .logo__text{color:#fff}
.logo--light .logo__text em{color:#8996a3}

.nav__links{display:flex;gap:26px;margin-inline:auto}
.nav__links a{font-size:14.5px;color:var(--mute);padding:4px 0;transition:color .25s}
.nav__links a:hover{color:var(--ink)}
.nav__links a.is-active{color:var(--ink);font-weight:500}
.nav__links a.is-active::after{transform:scaleX(1);transform-origin:0 50%}

.nav__right{display:flex;align-items:center;gap:10px;flex:none}
.nav__lang{color:var(--mute)}

.burger{display:none;width:38px;height:38px;border-radius:10px;border:1px solid var(--line);place-items:center}
.burger span{display:block;width:15px;height:1px;background:var(--ink);transition:transform .3s var(--ease)}
.burger span+span{margin-top:4px}
.burger.is-on span:first-child{transform:translateY(2.5px) rotate(45deg)}
.burger.is-on span:last-child{transform:translateY(-2.5px) rotate(-45deg)}

/* ═══════════════════════════════════════════════════════
   INTRO — le cadre s'ouvre au défilement
   La marque apparaît d'abord dans une vignette, puis l'image s'ouvre en
   plein écran et le contenu du hero prend sa place. Les valeurs de départ
   sont des variables : script.js les lit pour rester d'accord avec le CSS.
   ═══════════════════════════════════════════════════════ */
.intro{--start-w:42;--start-h:58;--start-r:26;position:relative;margin-bottom:10px}
.intro__track{position:relative;height:235vh}
.intro__stage{position:sticky;top:0;height:100vh;overflow:hidden}
.intro__frame{
  position:absolute;inset:0;
  clip-path:inset(21% 29% 21% 29% round 26px);
  will-change:clip-path;
}
.intro__media{
  position:absolute;inset:0;
  background:var(--hero-img,url('img/hero.jpg')) center/cover no-repeat #bfe4fb;
  transform:scale(1.35);transform-origin:center;will-change:transform;
}
.intro__scrim{
  position:absolute;inset:0;opacity:0;pointer-events:none;
  background:
    radial-gradient(80% 72% at 50% 48%, rgba(9,18,26,.52), rgba(9,18,26,.26) 60%, rgba(9,18,26,.1) 100%),
    linear-gradient(rgba(9,18,26,.2), rgba(9,18,26,.2));
}
.intro__content{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:22px;padding:clamp(20px,5vw,52px);
  opacity:0;will-change:opacity,transform;
}
/* la marque : logo + nom, centrés sur toute la scène */
.intro__brand{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(14px,1.8vw,22px);
  pointer-events:none;will-change:opacity,transform;
}
.intro__brand img{width:clamp(52px,6.4vw,80px);height:auto}
/* La marque est posée sur la vignette : blanc. */
.intro__brand span{
  font-family:'Inter Tight',sans-serif;font-weight:600;
  font-size:clamp(21px,4.2vw,54px);letter-spacing:-.04em;line-height:1;color:#fff;
  text-shadow:0 2px 26px rgba(9,18,26,.45);
}

/* Nav masquée tant que l'intro n'est pas lancée (page d'accueil seulement). */
.nav{transition:opacity .45s var(--ease)}

/* Sans animation demandée : tout est ouvert d'emblée. */
@media (prefers-reduced-motion:reduce){
  .intro__track{height:auto}
  .intro__stage{position:relative;height:min(94vh,880px)}
  .intro__frame{clip-path:none}
  .intro__media{transform:none}
  .intro__scrim{opacity:1}
  .intro__content{opacity:1}
  .intro__brand,.intro__hint{display:none}
}

/* ═══════════════════════════════════════════════════════
   HERO — ACCUEIL
   ═══════════════════════════════════════════════════════ */
.hero{padding:0}
.hero__frame{
  position:relative;min-height:min(94vh,880px);
  border-radius:var(--r-xl);overflow:hidden;
  display:grid;place-items:center;isolation:isolate;
}
.hero__sky{
  position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(80% 72% at 50% 48%, rgba(9,18,26,.50), rgba(9,18,26,.24) 60%, rgba(9,18,26,0) 100%),
    linear-gradient(rgba(9,18,26,.24), rgba(9,18,26,.24)),
    var(--hero-img,url('img/hero.jpg')) center/cover no-repeat #bfe4fb;
}
.hero__body{
  position:relative;width:100%;max-width:1000px;
  padding:clamp(96px,13vh,132px) clamp(20px,5vw,44px);
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:24px;
}
.pill-badge{
  display:inline-flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.94);padding:6px 18px 6px 6px;border-radius:999px;
  color:var(--ink);font-size:10px;
}
/* Les pastilles gardent une couleur de fond : si une photo manque encore,
   on voit un rond plein plutôt qu'une image cassée. */
.faces{display:flex}
.faces i{
  width:26px;height:26px;border-radius:50%;border:2px solid #fff;
  margin-right:-9px;background:var(--accent);overflow:hidden;flex:none;
}
.faces i:nth-child(2){background:var(--mint)}
.faces i:nth-child(3){background:var(--brand);margin-right:0}
.faces img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}

.hero__title{font-size:clamp(38px,6.4vw,86px);max-width:17ch;color:#fff;
  text-shadow:0 2px 26px rgba(9,18,26,.4)}
.hero__lead{max-width:58ch;font-size:clamp(15px,1.25vw,17.5px);color:rgba(255,255,255,.92);
  line-height:1.62;text-shadow:0 1px 14px rgba(9,18,26,.5)}
.hero__cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:8px}

/* ═══════════════════════════════════════════════════════
   HERO — PAGES SERVICE
   ═══════════════════════════════════════════════════════ */
.phero{padding:0}
.phero__frame{
  position:relative;min-height:min(58vh,520px);
  border-radius:var(--r-xl);overflow:hidden;
  display:grid;place-items:center;
  background:var(--hero-page-img,url('img/hero-page.jpg')) center/cover no-repeat #cfe4ef;
}
/* voile bleu de marque : la photo reste lisible sous le texte blanc */
.phero__frame::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(78% 84% at 50% 52%, rgba(0,52,80,.68), rgba(0,52,80,.46) 62%, rgba(0,52,80,.28) 100%),
    linear-gradient(rgba(0,60,92,.34), rgba(0,60,92,.34));
}
.phero__body{
  position:relative;width:100%;max-width:940px;
  padding:clamp(124px,16vh,158px) clamp(20px,5vw,44px) clamp(54px,8vh,74px);
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px;
}
.phero__kicker{
  color:var(--ink);background:var(--accent);
  padding:7px 16px;border-radius:999px;
}
.phero__title{font-size:clamp(32px,4.8vw,58px);max-width:20ch;color:#fff}
.phero__lead{max-width:62ch;font-size:clamp(15px,1.2vw,17px);color:rgba(255,255,255,.9);line-height:1.64}
.phero__cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:6px}
.crumbs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;color:rgba(255,255,255,.76)}
.crumbs a:hover{color:#fff}

/* ═══════════════════════════════════════════════════════
   MARQUEE — libellé fixe, noms qui défilent
   ═══════════════════════════════════════════════════════ */
.marquee{padding:clamp(46px,6vw,72px) 0 clamp(28px,3.2vw,40px);border-bottom:1px solid var(--line)}
.marquee__label{display:block;text-align:center;color:var(--mute);letter-spacing:.24em}
.marquee__rows{margin-top:28px;display:grid;gap:2px}
/* Défilement : chaque piste avance de sa propre largeur + l'écart, si bien
   qu'elle se pose exactement là où était sa jumelle. L'écart vit sur le
   conteneur ET sur la piste pour que la couture ait le même pas que les items.
   script.js rallonge chaque piste jusqu'à couvrir la largeur visible — sans
   ça, deux pistes trop courtes laissent un trou sur la droite. */
.mrow{
  --mgap:clamp(30px,4vw,58px);
  display:flex;gap:var(--mgap);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
}
.mrow__track{display:flex;gap:var(--mgap);flex:none;animation:marquee 16s linear infinite}
.mrow--rev .mrow__track{animation-direction:reverse;animation-duration:21s}
.mrow:hover .mrow__track{animation-play-state:paused}
.mrow__set{display:flex;gap:var(--mgap);flex:none}
.mrow__set span,.mrow__set .mclient{
  display:flex;align-items:center;white-space:nowrap;padding:12px 0;
  font-family:'Inter Tight',sans-serif;font-size:clamp(17px,1.6vw,21px);font-weight:500;
  letter-spacing:-.02em;color:var(--mute);transition:color .3s;
}
.mrow__set span:hover,.mrow__set .mclient:hover{color:var(--ink)}

/* ═════════ FICHE CLIENT AU SURVOL ═════════
   Le bandeau se fige pendant l'ouverture : sans ça le nom continuerait de
   défiler sous la fiche et le bouton deviendrait impossible à viser. */
.marquee{position:relative}
/* Seule la ligne survolée s'arrête ; l'autre continue de défiler. */
.mrow.is-frozen .mrow__track{animation-play-state:paused}
.mcard{
  position:absolute;z-index:30;left:0;top:0;
  min-width:216px;max-width:280px;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:0 20px 48px rgba(15,23,32,.18);
  padding:18px 20px 20px;
  opacity:0;pointer-events:none;
  transform:translate(-50%,calc(-100% - 16px)) scale(.94);
  transform-origin:50% 100%;
  transition:opacity .22s var(--ease),transform .28s var(--ease);
}
.mcard.is-on{opacity:1;pointer-events:auto;transform:translate(-50%,calc(-100% - 16px)) scale(1)}
/* petite pointe sous la fiche */
.mcard::after{
  content:"";position:absolute;left:50%;bottom:-6px;translate:-50% 0;
  width:11px;height:11px;background:var(--paper);
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  rotate:45deg;
}
.mcard__head{display:flex;align-items:center;gap:10px}
.mcard__icon{
  display:grid;place-items:center;width:32px;height:32px;flex:none;
  border-radius:9px;background:var(--sunk);color:var(--ink);
}
.mcard__icon svg{width:17px;height:17px;fill:currentColor}
.mcard__name{font-family:'Inter Tight',sans-serif;font-weight:600;font-size:16px;letter-spacing:-.03em}
.mcard__subs{color:var(--mute);font-size:13px;margin-top:10px}
.mcard__subs[hidden]{display:none}
.mcard__cta{margin-top:16px;width:100%;justify-content:space-between}
@keyframes marquee{to{transform:translateX(calc(-100% - var(--mgap)))}}

/* ═══════════════════════════════════════════════════════
   SECTIONS
   ═══════════════════════════════════════════════════════ */
.sec{padding:clamp(64px,8vw,124px) 0}
.sec--sunk{background:var(--sunk);border-radius:var(--r-lg)}
.sec--dark{background:var(--ink);color:#fff;border-radius:var(--r-lg)}
.sec--dark h2,.sec--dark h3{color:#fff}

.sec__head{
  display:flex;justify-content:space-between;align-items:baseline;
  padding-bottom:16px;margin-bottom:clamp(30px,4vw,54px);
  border-bottom:1px solid var(--line);color:var(--mute);
}
.sec--dark .sec__head{border-color:#243039;color:#7f8f9c}
.sec__head--light{border-color:rgba(16,26,36,.18);color:#2c3f4b}

.sec__title{font-size:clamp(29px,4.2vw,54px)}
.lead{color:var(--ash);font-size:17px;line-height:1.68;max-width:48ch}
.sec--dark .lead{color:#aab6c0}
.sec__intro{margin-bottom:clamp(28px,4vw,48px)}

/* ═══════════════════════════════════════════════════════
   PRESTATIONS — trois offres, celle du milieu mise en avant
   Les cartes latérales rentrent légèrement et se réduisent, la centrale
   ressort : la hiérarchie se lit avant même d'avoir lu les titres.
   ═══════════════════════════════════════════════════════ */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);align-items:start}
.plan{
  position:relative;display:flex;flex-direction:column;
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:34px 28px 28px;
  opacity:0;transform:translateY(30px);filter:blur(12px);
  transition:opacity .7s var(--ease),transform 1s var(--ease),
             filter 1s var(--ease),box-shadow .4s var(--ease),border-color .3s;
}
.plan.in{opacity:1;filter:blur(0)}
.plans .plan:nth-child(1){transform-origin:right center}
.plans .plan:nth-child(3){transform-origin:left center}
.plan.in:nth-child(1){transform:translateX(16px) scale(.955)}
.plan.in:nth-child(3){transform:translateX(-16px) scale(.955)}
.plan.in:nth-child(2){transform:translateY(-18px)}
.plan:hover{box-shadow:0 22px 52px rgba(15,23,32,.1);border-color:#d3d9e0}

/* Carte mise en avant : un halo bleu qui respire, renforcé au survol.
   C'est le « ring » du composant d'origine, transposé en lueur diffuse. */
.plan--popular{
  border:2px solid var(--accent);z-index:2;
  box-shadow:0 0 0 5px rgba(0,166,239,.09),0 20px 48px rgba(0,166,239,.18);
  animation:planGlow 3.4s ease-in-out infinite;
}
.plan--popular:hover{
  box-shadow:0 0 0 8px rgba(0,166,239,.15),0 28px 66px rgba(0,166,239,.3);
  animation:none;
}
@keyframes planGlow{
  0%,100%{box-shadow:0 0 0 4px rgba(0,166,239,.07),0 18px 42px rgba(0,166,239,.14)}
  50%    {box-shadow:0 0 0 8px rgba(0,166,239,.14),0 24px 56px rgba(0,166,239,.26)}
}
.plan__badge{
  position:absolute;top:-2px;right:-2px;
  display:inline-flex;align-items:center;gap:6px;
  background:var(--accent);color:var(--ink);
  padding:8px 14px;border-radius:0 var(--r-lg) 0 14px;
  font-family:ui-monospace,monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
}
.plan__badge svg{width:13px;height:13px;fill:currentColor}

.plan__name{
  font-family:ui-monospace,monospace;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--mute);
}
.plan__title{font-size:clamp(23px,2.5vw,30px);margin-top:14px}
.plan__desc{color:var(--ash);font-size:14.5px;line-height:1.64;margin-top:12px}

.plan__list{margin-top:22px;padding-top:20px;border-top:1px solid var(--line);display:grid;gap:11px}
.plan__list li{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--ash);line-height:1.5}
.plan__list svg{flex:none;width:16px;height:16px;margin-top:2px;color:var(--accent)}

/* anneau au survol du bouton — le hover:ring-2 ring-offset-1 du composant */
.plan__cta{margin-top:auto;width:100%;justify-content:space-between}
.plan__cta:hover{
  box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--accent),
             0 0 22px rgba(0,166,239,.45),0 12px 28px rgba(15,23,32,.16);
}
.plan__spacer{margin-top:24px}
.plan__note{color:var(--mute);font-size:12.5px;line-height:1.55;margin-top:14px;text-align:center}

/* ═══════════════════════════════════════════════════════
   CARTES — blanches, séparées par un filet
   ═══════════════════════════════════════════════════════ */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.card{
  position:relative;background:var(--sunk);
  border:1px solid transparent;border-radius:var(--r);
  padding:28px 26px 26px;min-height:300px;
  display:flex;flex-direction:column;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),background .3s;
}
.card:hover{transform:translateY(-5px);background:#eef2f5;box-shadow:0 18px 42px rgba(15,23,32,.08)}
.card h3{font-size:22px;margin-top:auto;padding-top:44px}
.card p{color:var(--ash);font-size:14.5px;line-height:1.64;margin-top:12px}
.card__list{margin-top:20px;padding-top:18px;border-top:1px solid var(--line);display:grid;gap:8px}
.card__list li{font-size:13.5px;color:var(--ash);padding-left:16px;position:relative}
.card__list li::before{content:"";position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:50%;background:var(--accent)}

.card--fill{background:var(--ink);border-color:var(--ink);color:#fff}
/* .card:hover l'emportait sur .card--fill : la carte sombre virait au clair
   en gardant son texte blanc, donc illisible. */
.card--fill:hover{background:var(--ink-2);border-color:#2a3742}
.card--fill p{color:#aab6c0}
.card--fill .card__list{border-color:#243039}
.card--fill .card__list li{color:#c4ced6}
.card--fill .card__list li::before{background:var(--brand)}

.card__go{
  position:absolute;top:22px;right:22px;
  width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;background:#fff;color:var(--ink);
  /* anneau : sans lui, le rond blanc disparaît sur la carte gris clair */
  box-shadow:inset 0 0 0 1px var(--line);
  transition:transform .35s var(--ease),background .25s,color .25s,box-shadow .25s;
}
.card:hover .card__go{box-shadow:none}
.card__go i{font-style:normal;font-size:15px}
.card:hover .card__go{background:var(--accent);transform:rotate(45deg)}
.card--fill .card__go{background:var(--accent);color:var(--ink)}

.card__tag{
  position:absolute;top:26px;left:26px;
  background:var(--accent);color:var(--ink);
  padding:5px 12px;border-radius:999px;font-size:10px;
}
.card--fill .card__tag{background:var(--accent);color:var(--ink)}

/* ═══════════════════════════════════════════════════════
   LIGNES ÉDITORIALES
   ═══════════════════════════════════════════════════════ */
.rows{border-top:1px solid var(--line);counter-reset:r}
.sec--dark .rows{border-color:#243039}
.row{
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:clamp(18px,4vw,48px);
  padding:clamp(28px,3.6vw,46px) clamp(22px,2.6vw,36px);
  border-bottom:1px solid var(--line);
  transition:background .4s var(--ease);
}
.sec--dark .row{border-color:#243039}
/* rail coloré : court au repos, plein au survol */
.row::before{
  content:"";position:absolute;left:0;top:50%;translate:0 -50%;
  width:4px;height:22px;border-radius:0 4px 4px 0;
  background:var(--rail,var(--accent));
  transition:height .45s var(--ease);
}
.row:hover::before{height:100%}
.row:nth-child(5n+1){--rail:var(--accent)}
.row:nth-child(5n+2){--rail:var(--mint)}
.row:nth-child(5n+3){--rail:var(--cyan)}
.row:nth-child(5n+4){--rail:var(--lilac)}
.row:nth-child(5n+5){--rail:var(--sand)}
.row:hover{background:var(--sunk)}
.sec--dark .row:hover{background:#18242e}
/* grand numéro éditorial */
.row__idx{
  font-family:'Inter Tight',sans-serif;
  font-size:clamp(30px,3.4vw,46px);font-weight:600;
  letter-spacing:-.05em;text-transform:none;
  color:var(--line);line-height:1;
  transition:color .4s var(--ease),transform .4s var(--ease);
}
.sec--dark .row__idx{color:#2b3843}
.row:hover .row__idx{color:var(--rail);transform:translateY(-2px)}
.row__body h3{font-size:clamp(21px,2.5vw,30px)}
.row__body p{color:var(--ash);font-size:14.5px;line-height:1.66;margin-top:11px;max-width:60ch}
.sec--dark .row__body p{color:#aab6c0}
.row__go{
  flex:none;width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;font-size:16px;
  border:1px solid var(--line);color:var(--ink);
  transition:transform .4s var(--ease),background .25s,color .25s,border-color .25s;
}
.row__go i{font-style:normal}
.sec--dark .row__go{border-color:#2b3843;color:#fff}
.row:hover .row__go{background:var(--accent);border-color:var(--accent);color:var(--ink);transform:rotate(45deg)}

/* ═══════════════════════════════════════════════════════
   CHIFFRES — grille au filet
   ═══════════════════════════════════════════════════════ */
.about{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,76px);align-items:start}
.about__left{display:flex;flex-direction:column;gap:26px;align-items:flex-start}

.figures,.kpis{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
}
.kpis{grid-template-columns:repeat(4,1fr);margin-top:var(--gap)}
.figure,.kpi{background:var(--paper);padding:clamp(24px,3vw,36px)}
.kpi{padding:30px 24px;text-align:center}
.figure strong,.kpi strong{
  display:block;font-family:'Inter Tight',sans-serif;font-weight:600;
  letter-spacing:-.05em;line-height:1;color:var(--ink);
}
.figure strong{font-size:clamp(38px,5vw,60px)}
.kpi strong{font-size:clamp(30px,3.4vw,42px)}
.figure span,.kpi span{display:block;color:var(--mute);font-size:13.5px;margin-top:11px}

/* ═══════════════════════════════════════════════════════
   MÉTHODE
   ═══════════════════════════════════════════════════════ */
/* Méthode — quatre cartes, une couleur par étape */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.step{
  position:relative;overflow:hidden;display:block;
  background:var(--sunk);border-radius:var(--r);
  padding:32px 26px 28px;
  transition:transform .4s var(--ease),background .3s,box-shadow .4s var(--ease);
}
/* barre colorée qui se déploie au survol */
.step::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:var(--rail,var(--accent));
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .5s var(--ease);
}
.step:hover::before{transform:scaleX(1)}
.step:hover{transform:translateY(-6px);background:#eef2f5;box-shadow:0 18px 42px rgba(15,23,32,.09)}
.step:nth-child(4n+1){--rail:var(--accent)}
.step:nth-child(4n+2){--rail:var(--mint)}
.step:nth-child(4n+3){--rail:var(--cyan)}
.step:nth-child(4n+4){--rail:var(--lilac)}
.step__num{
  display:grid;place-items:center;width:48px;height:48px;border-radius:14px;
  background:var(--rail,var(--accent));color:var(--ink);
  font-family:'Inter Tight',sans-serif;font-size:17px;font-weight:600;
  letter-spacing:-.02em;text-transform:none;
  margin-bottom:26px;
  transition:transform .4s var(--ease);
}
.step:hover .step__num{transform:translateY(-2px) rotate(-4deg)}
.step h3{font-size:21px}
.step p{color:var(--ash);font-size:14px;margin-top:10px;line-height:1.64}

/* ═══════════════════════════════════════════════════════
   RÉALISATIONS
   ═══════════════════════════════════════════════════════ */
.jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(20px,3vw,32px)}
.jump a{padding:10px 20px;border-radius:10px;border:1px solid var(--line);
  background:var(--paper);font-size:14px;color:var(--ash);
  transition:background .25s,color .25s,border-color .25s}
.jump a:hover{background:var(--accent);color:var(--ink);border-color:var(--accent)}

.reel{margin-top:clamp(44px,6vw,76px);scroll-margin-top:110px}
.reel__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;
  padding-bottom:20px;margin-bottom:var(--gap);border-bottom:1px solid var(--line)}
.reel__kicker{color:var(--mute)}
.reel__head h3{font-size:clamp(23px,2.8vw,32px);margin-top:10px}
.reel__head p{color:var(--ash);font-size:14.5px;line-height:1.64;max-width:56ch;margin-top:11px}

.reel__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.vid{position:relative;aspect-ratio:9/16;border-radius:var(--r);overflow:hidden;background:var(--ink);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.vid:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(16,26,36,.16)}
.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.vid__ph{position:absolute;inset:0;display:grid;place-items:center;background:var(--ink);color:#3d4a56;font-size:26px}
.vid--manual{cursor:pointer}

.tags{display:flex;flex-wrap:wrap;gap:7px;margin:16px 0 0}
.tags span{border:1px solid var(--line);color:var(--mute);padding:6px 11px;border-radius:7px;
  font-family:ui-monospace,monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase}
.sec--dark .tags span{border-color:#243039;color:#8996a3}

/* ═══════════════════════════════════════════════════════
   OFFRE
   ═══════════════════════════════════════════════════════ */
.offer{display:grid;grid-template-columns:.9fr 1.3fr;gap:var(--gap)}
.offer__price{background:var(--ink);color:#fff;border-radius:var(--r);
  padding:clamp(30px,3.5vw,46px);display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.offer__kicker{color:#7f8f9c}
.offer__amount{display:flex;align-items:baseline;gap:8px}
.offer__amount strong{font-family:'Inter Tight',sans-serif;font-weight:600;
  font-size:clamp(48px,6vw,74px);letter-spacing:-.05em;line-height:.9}
.offer__amount span{color:#8996a3;font-size:16px}
.offer__price p{color:#aab6c0;font-size:14.5px;line-height:1.66}
.offer__note{color:#6d7d8b;font-size:10px}

.offer__list{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.offer__list li{background:var(--paper);padding:26px 24px;display:flex;flex-direction:column;gap:8px;transition:background .25s}
.offer__list li:hover{background:var(--sunk)}
.offer__list b{font-family:'Inter Tight',sans-serif;font-weight:600;font-size:17.5px;letter-spacing:-.03em}
.offer__list span{color:var(--ash);font-size:13.5px;line-height:1.6}

/* ═══════════════════════════════════════════════════════
   AVIS
   ═══════════════════════════════════════════════════════ */
.avis__head{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;flex-wrap:wrap}
.rating{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ash)}
.rating__stars{color:var(--ink);letter-spacing:2px;font-size:15px}

.rail{margin-top:clamp(28px,4vw,48px);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
/* Les avis sont dupliqués une fois par script.js : une période vaut donc
   la moitié de la piste, plus la moitié d'un écart pour la couture. */
.rail__track{display:flex;gap:var(--gap);padding-inline:var(--pad);animation:rail 34s linear infinite}
.rail:hover .rail__track{animation-play-state:paused}
@keyframes rail{to{transform:translateX(calc(-50% - var(--gap) / 2))}}

/* Cartes d'avis colorées, comme sur le modèle */
.quote{margin:0;flex:0 0 clamp(256px,25vw,322px);
  border-radius:var(--r);padding:28px 26px;
  display:flex;flex-direction:column;justify-content:space-between;gap:24px;min-height:236px;
  background:var(--sunk);color:var(--ink);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.quote:hover{transform:translateY(-5px);box-shadow:0 18px 42px rgba(15,23,32,.12)}
.quote blockquote{margin:0;font-family:'Inter Tight',sans-serif;font-size:17.5px;line-height:1.44;letter-spacing:-.02em}
.quote figcaption{display:flex;flex-direction:column;gap:2px;font-size:13px}
.quote figcaption b{font-weight:600}
.quote figcaption span{opacity:.66}
.quote:nth-child(6n+1){background:var(--blush)}
.quote:nth-child(6n+2){background:var(--lilac)}
.quote:nth-child(6n+3){background:#bcd9ef}
.quote:nth-child(6n+4){background:var(--mint)}
.quote:nth-child(6n+5){background:var(--sand)}
.quote:nth-child(6n+6){background:var(--ink);color:#fff}

/* ═══════════════════════════════════════════════════════
   COMPARATIF
   ═══════════════════════════════════════════════════════ */
.table-scroll{overflow-x:auto;border-radius:var(--r);border:1px solid #243039}
.compare{width:100%;min-width:660px;border-collapse:collapse;text-align:left}
.compare th,.compare td{padding:20px 22px;border-bottom:1px solid #243039;font-weight:400;font-size:14.5px}
.compare thead th{font-family:ui-monospace,monospace;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:#7f8f9c;background:#16222c}
.compare thead th.is-us{color:var(--ink);background:var(--accent)}
.compare tbody th{color:#e2e8ec;font-weight:500}
.compare tbody tr:last-child th,.compare tbody tr:last-child td{border-bottom:0}
.compare tbody tr:hover td,.compare tbody tr:hover th{background:#18242e}
.compare .yes,.compare .no{position:relative;padding-left:44px;color:#8996a3}
.compare .yes::before,.compare .no::before{content:"";position:absolute;left:22px;top:50%;translate:0 -50%;
  width:14px;height:14px;border-radius:50%}
.compare .yes{color:#eef2f5}
.compare .yes::before{background:var(--accent)}
.compare .no::before{background:#2c3841}
.compare td.yes{background:rgba(0,166,239,.07)}

/* ═══════════════════════════════════════════════════════
   FAQ
   ═══════════════════════════════════════════════════════ */
.faq{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap);align-items:start}
.qa{background:var(--sunk);border:1px solid transparent;border-radius:var(--r);padding:22px 24px;
  transition:background .3s,border-color .3s}
.qa[open]{background:var(--paper);border-color:var(--line)}
.qa summary{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;
  cursor:pointer;list-style:none;
  font-family:'Inter Tight',sans-serif;font-weight:500;font-size:17.5px;letter-spacing:-.025em;line-height:1.3}
.qa summary::-webkit-details-marker{display:none}
.qa summary i{flex:none;position:relative;width:24px;height:24px;border-radius:7px;
  background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);
  transition:transform .35s var(--ease),background .25s}
.qa summary i::before,.qa summary i::after{content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;
  background:var(--ink);border-radius:2px}
.qa summary i::before{width:9px;height:1.5px}
.qa summary i::after{width:1.5px;height:9px;transition:opacity .25s}
.qa[open] summary i{background:var(--accent);box-shadow:none;transform:rotate(90deg)}
.qa[open] summary i::after{opacity:0}
.qa p{color:var(--ash);font-size:14.5px;line-height:1.7;padding-top:14px;margin-top:14px;border-top:1px solid var(--line)}

.faq__foot{margin-top:var(--gap);background:var(--sunk);border-radius:var(--r);padding:clamp(24px,3vw,36px);
  display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.faq__foot p{font-family:'Inter Tight',sans-serif;font-size:20px;letter-spacing:-.03em}
.faq__btns{display:flex;gap:10px;flex-wrap:wrap}

/* ═══════════════════════════════════════════════════════
   PAGES LÉGALES
   ═══════════════════════════════════════════════════════ */
.prose{max-width:76ch;margin-inline:auto}
.prose__note{
  background:var(--sunk);border-left:3px solid var(--accent);
  border-radius:0 var(--r-sm) var(--r-sm) 0;padding:20px 24px;
  color:var(--ash);font-size:14.5px;line-height:1.7;
  margin-bottom:clamp(30px,4vw,46px);
}
.prose section{padding-top:clamp(30px,3.6vw,46px);border-top:1px solid var(--line)}
.prose section:first-of-type{padding-top:0;border-top:0}
.prose__num{
  display:block;font-family:ui-monospace,monospace;font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin-bottom:10px;
}
.prose h2{font-size:clamp(20px,2.3vw,27px)}
.prose p{color:var(--ash);font-size:15.5px;line-height:1.78;margin-top:14px}
.prose ul{margin-top:16px;display:grid;gap:9px}
.prose li{color:var(--ash);font-size:15.5px;line-height:1.7;padding-left:19px;position:relative}
.prose li::before{content:"";position:absolute;left:0;top:11px;width:5px;height:5px;border-radius:50%;background:var(--accent)}
.prose a{text-decoration:underline;text-underline-offset:3px}
.prose a:hover{color:var(--brand)}
.prose dl{margin-top:16px;display:grid;gap:10px}
.prose dt{font-weight:600;font-size:14px;color:var(--ink)}
.prose dd{margin:0;color:var(--ash);font-size:15.5px;line-height:1.7}

/* ═══════════════════════════════════════════════════════
   CONTACT
   ═══════════════════════════════════════════════════════ */
/* Contact — photo collines vertes */
.sec--sky{border-radius:var(--r-lg);
  background:linear-gradient(rgba(255,255,255,.42), rgba(255,255,255,.42)),
    url('img/hero-contact.jpg') center/cover no-repeat #cfe8fa}
.contact{display:grid;grid-template-columns:1.35fr 1fr;gap:var(--gap);align-items:start}
.form{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:clamp(24px,3vw,40px);
  display:grid;gap:14px;box-shadow:0 24px 60px rgba(16,26,36,.14)}
.form__title{font-size:clamp(24px,2.6vw,32px);margin-bottom:6px}
.field{display:grid;gap:6px}
.field>span{font-size:12.5px;color:var(--mute);font-weight:500}
.field input,.field select,.field textarea{
  font:inherit;font-size:15px;color:var(--ink);background:var(--sunk);
  border:1px solid transparent;border-radius:var(--r-sm);padding:13px 15px;width:100%;
  transition:border-color .2s,background .2s}
.field textarea{resize:vertical;min-height:104px}
.field input::placeholder,.field textarea::placeholder{color:#9aa5b0}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;background:#fff;border-color:var(--ink)}
.field select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 19px) 21px,calc(100% - 14px) 21px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form__note{color:var(--mute);text-align:center;margin-top:4px;font-size:10px}
.form__note.is-err{color:#a5271f}
.form__note.is-ok{color:#0f6b45}
.field input:user-invalid,.field textarea:user-invalid{border-color:#c98b84}

.side{display:grid;gap:var(--gap)}
.side__card{background:rgba(255,255,255,.92);backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.9);border-radius:var(--r);padding:26px}
.side__card h3{font-size:19px}
.side__card p{color:var(--ash);font-size:14px;line-height:1.6;margin-top:8px}
.side__contact{display:grid;gap:6px;background:var(--ink);border-radius:var(--r);padding:26px;color:#fff}
.side__contact a{font-family:'Inter Tight',sans-serif;font-size:18px;letter-spacing:-.03em}

/* ═══════════════════════════════════════════════════════
   CTA
   ═══════════════════════════════════════════════════════ */
/* Bandeau CTA — même photo collines que le contact */
.cta{border-radius:var(--r-lg);padding:clamp(56px,8vw,100px) 0;
  background:linear-gradient(rgba(255,255,255,.42), rgba(255,255,255,.42)),
    url('img/hero-contact.jpg') center/cover no-repeat #cfe8fa}
.cta__inner{max-width:820px;margin-inline:auto;padding-inline:var(--pad);
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px}
.cta__inner h2{font-size:clamp(27px,3.6vw,44px)}
.cta__inner p{color:#26414f;font-size:16.5px;line-height:1.66;max-width:56ch}
.cta__btns{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:4px}
.cta__note{color:#3d5c6c;margin-top:6px}

/* ═══════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════ */
.foot{padding-top:10px}
.foot__card{background:var(--ink);color:#fff;border-radius:var(--r-lg);padding:clamp(32px,4.5vw,64px)}
.foot__top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:clamp(24px,3vw,48px);
  padding-bottom:clamp(32px,4vw,54px);border-bottom:1px solid #243039}
.foot__brand{display:flex;flex-direction:column;align-items:flex-start;gap:20px;max-width:34ch}
.foot__brand p{color:#aab6c0;font-size:14.5px;line-height:1.6}
.foot__col{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.foot__col h4{color:#6d7d8b;font-weight:400;margin-bottom:4px}
.foot__col a,.foot__col span{color:#c4ced6;font-size:14.5px}
.foot__bar{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  padding-top:24px;color:#6d7d8b;font-size:12.5px}
.foot__bar nav{display:flex;gap:22px;flex-wrap:wrap}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════ */
@media (max-width:1080px){
  .cards{grid-template-columns:repeat(2,1fr)}
  /* à l'étroit, les décalages latéraux nuisent : tout revient sur une ligne droite */
  .plans{grid-template-columns:1fr}
  .plan.in:nth-child(1),.plan.in:nth-child(2),.plan.in:nth-child(3){transform:none}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .foot__top{grid-template-columns:1fr 1fr}
  .foot__brand{grid-column:1/-1}
}
@media (max-width:900px){
  .nav{top:8px}
  .nav__links{position:absolute;top:calc(100% + 8px);left:0;right:0;flex-direction:column;gap:0;
    background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:8px;
    box-shadow:0 18px 40px rgba(16,26,36,.14);display:none}
  .nav__links.is-open{display:flex}
  .nav__links a{padding:13px 14px;font-size:16px;border-bottom:1px solid var(--line)}
  .nav__links a:last-child{border-bottom:0}
  .nav__links a::after{display:none}
  .nav__lang{display:none}
  .burger{display:grid}
  .about,.offer,.contact{grid-template-columns:1fr}
  .reel__grid{grid-template-columns:repeat(3,1fr)}
  .faq{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:620px){
  body{padding:6px}
  .cards,.offer__list,.kpis,.field-row,.figures,.steps{grid-template-columns:1fr}
  .hero__frame{min-height:78vh;border-radius:var(--r-lg)}
  .hero__body{padding:110px 18px 54px;gap:18px}
  .hero__title{font-size:clamp(32px,9vw,44px)}
  /* vignette plus large sur mobile, sinon la marque n'y tient pas */
  .intro{--start-w:78;--start-h:44;--start-r:20}
  .intro__track{height:210vh}
  .phero__frame{min-height:auto;border-radius:var(--r-lg)}
  .phero__body{padding:104px 18px 50px;gap:15px}
  .phero__title{font-size:clamp(27px,7.5vw,35px)}
  .sec__title{font-size:clamp(26px,7.5vw,33px)}
  .card{min-height:auto}
  .card h3{padding-top:28px}
  .reel__grid{grid-template-columns:repeat(2,1fr)}
  .row{grid-template-columns:auto 1fr;gap:14px}
  .row__go{display:none}
  .faq__foot{flex-direction:column;align-items:flex-start}
  .foot__top{grid-template-columns:1fr}
  .mrow__set span{font-size:16px;padding:10px 22px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .plan--popular{animation:none}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .reveal,.split .word{opacity:1;transform:none;filter:none}
}
@media print{
  .nav,.marquee,.rail,.hero__sky{display:none}
  body{padding:0}
  .sec--dark,.foot__card,.phero__frame{background:#fff;color:#000}
}