/* Allonia — le style commun du site (v60).
   Deux thèmes : sombre (par défaut) et clair. Le halo vit toujours sur une scène noire :
   tout ce qui porte la classe .tone-dark garde les couleurs sombres, même en thème clair. */
@font-face{font-family:'Geist';font-style:normal;font-weight:100 900;font-display:swap;src:url(/polices/geist-v1.woff2) format('woff2')}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:100 900;font-display:swap;src:url(/polices/geist-mono-v1.woff2) format('woff2')}

/* ---------- les couleurs : sombre ---------- */
:root,
:root[data-theme="light"] .tone-dark,
:root[data-theme="light"] .nav.on-dark{
  --bg:#111113; --bg0:#000000; --bg2:#1A1A1D;        /* v67 g : la page en noir profond ; les bandes « scène » (film, appel, démo) en noir absolu */
  --t1:#F5F5F7; --t2:#E5E5EA; --t3:#C7C7CC; --t4:#AEAEB2; --t5:#8E8E93; --t6:#3A3A3C;
  --f1:rgba(255,255,255,.05); --f2:rgba(255,255,255,.08); --f3:rgba(255,255,255,.12); --f4:rgba(255,255,255,.16);
  --r1:rgba(255,255,255,.07); --r2:rgba(255,255,255,.1); --r3:rgba(255,255,255,.16);
  --hl:rgba(255,255,255,.1); --hl2:rgba(255,255,255,.2);
  --card-bg:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.025));
  --card-sh:inset 0 1px 0 rgba(255,255,255,.09),0 0 0 1px rgba(255,255,255,.07);
  --cardhi-bg:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.035));
  --cardhi-sh:inset 0 1px 0 rgba(255,255,255,.22),0 0 0 1px rgba(255,255,255,.16),0 30px 80px -30px rgba(255,255,255,.18);
  /* le bouton principal (verre blanc) et le bouton secondaire (verre sombre) */
  --b1-bg:linear-gradient(180deg,#FFFFFF 0%,#F4F5F7 38%,#E3E5E9 72%,#D2D5DB 100%); --b1-fg:#0B0B0D;
  --b1-sh:inset 0 1.5px 0 #FFFFFF,inset 0 12px 16px -12px #FFFFFF,inset 0 -12px 18px -10px rgba(100,108,122,.42),inset 0 -2px 3px rgba(255,255,255,.75),0 0 0 .5px rgba(255,255,255,.4),0 18px 38px -10px rgba(0,0,0,.9),0 3px 8px rgba(0,0,0,.6),0 0 34px rgba(255,255,255,.09);
  --b1-pl:rgba(255,255,255,1); --b1-plo:.6;
  --b2-bg:radial-gradient(22px 2.5px at 24% 1px,rgba(255,255,255,.95),rgba(255,255,255,0)),radial-gradient(5px 5px at 24% 1px,rgba(255,255,255,1),rgba(255,255,255,0)),radial-gradient(64% 8px at 50% calc(100% - 1px),rgba(255,255,255,.34),transparent),linear-gradient(180deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,.04) 48%,rgba(255,255,255,.08) 100%);
  --b2-fg:#FFFFFF;
  --b2-sh:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -12px 18px -12px rgba(255,255,255,.16),0 18px 38px -10px rgba(0,0,0,.9),0 3px 8px rgba(0,0,0,.6);
  --rim1:rgba(255,255,255,.95); --rim2:rgba(255,255,255,.4); --rim3:rgba(255,255,255,.42); --rim4:rgba(255,255,255,.85);
  --rimc1:rgba(255,255,255,.62); --rimc2:rgba(255,255,255,.26); --rimc3:rgba(158,161,169,.58); --rimc4:rgba(255,255,255,.18);
  --pl:rgba(255,255,255,.30);
  --bar-bg:rgba(14,14,17,.58); --sheet-bg:rgba(16,16,19,.975);
  --in-bg:rgba(255,255,255,.06); --in-bg2:rgba(255,255,255,.09); --in-sh:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px rgba(255,255,255,.1); --in-focus:rgba(255,255,255,.75); --ph:#636366;
  --silver:linear-gradient(180deg,#FFFFFF 0%,#E9EAED 42%,#9EA1A9 100%);
  --focus:#FFFFFF; --mky-bg:#FFFFFF; --mky-fg:#000000;
  --chip:linear-gradient(180deg,#FFFFFF,#E3E5E9); --chip-fg:#0B0B0D; --chip-sh:inset 0 1px 0 #FFFFFF,0 4px 14px rgba(0,0,0,.5);
  --shade:rgba(0,0,0,.6); --beam:#FFFFFF;
  color-scheme:dark;
}
/* ---------- les couleurs : clair (verre, argent, blanc doux) ---------- */
:root[data-theme="light"]{
  --bg:#EDEDF0; --bg0:#FFFFFF; --bg2:#FFFFFF;        /* v67 g : la page en gris doux ; les bandes « scène » en blanc pur ; les cartes en blanc */
  --t1:#1D1D1F; --t2:#2C2C2E; --t3:#3A3A3C; --t4:#6E6E73; --t5:#86868B; --t6:#D2D2D7;
  --f1:rgba(0,0,0,.035); --f2:rgba(0,0,0,.05); --f3:rgba(0,0,0,.08); --f4:rgba(0,0,0,.11);
  --r1:rgba(0,0,0,.06); --r2:rgba(0,0,0,.09); --r3:rgba(0,0,0,.14);
  --hl:rgba(255,255,255,.9); --hl2:#FFFFFF;
  --card-bg:#FFFFFF;
  --card-sh:0 0 0 1px rgba(0,0,0,.05),0 1px 2px rgba(0,0,0,.04),0 22px 48px -28px rgba(0,0,0,.22);
  --cardhi-bg:#FFFFFF;
  --cardhi-sh:0 0 0 1px rgba(0,0,0,.07),0 2px 4px rgba(0,0,0,.04),0 36px 84px -36px rgba(0,0,0,.34);
  --b1-bg:linear-gradient(180deg,#3B3B40 0%,#1D1D1F 46%,#0B0B0D 100%); --b1-fg:#FFFFFF;
  --b1-sh:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -10px 16px -12px rgba(255,255,255,.2),0 0 0 .5px rgba(0,0,0,.7),0 16px 32px -14px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.2);
  --b1-pl:rgba(255,255,255,.55); --b1-plo:.35;
  --b2-bg:linear-gradient(180deg,rgba(255,255,255,.98) 0%,rgba(250,250,252,.86) 100%);
  --b2-fg:#1D1D1F;
  --b2-sh:inset 0 1px 0 #FFFFFF,0 0 0 1px rgba(0,0,0,.08),0 12px 26px -14px rgba(0,0,0,.28),0 1px 3px rgba(0,0,0,.08);
  --rim1:rgba(255,255,255,1); --rim2:rgba(255,255,255,.5); --rim3:rgba(0,0,0,.06); --rim4:rgba(0,0,0,.1);
  --rimc1:rgba(255,255,255,.9); --rimc2:rgba(0,0,0,.05); --rimc3:rgba(110,112,120,.28); --rimc4:rgba(0,0,0,.04);
  --pl:rgba(255,255,255,.8);
  --bar-bg:rgba(250,250,252,.74); --sheet-bg:rgba(250,250,252,.975);
  --in-bg:#FFFFFF; --in-bg2:#FFFFFF; --in-sh:0 0 0 1px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.04); --in-focus:#1D1D1F; --ph:#AEAEB2;
  --silver:linear-gradient(180deg,#1D1D1F 0%,#3A3A3F 55%,#6E6E73 100%);
  --focus:#1D1D1F; --mky-bg:#1D1D1F; --mky-fg:#FFFFFF;
  --chip:linear-gradient(180deg,#2C2C30,#0B0B0D); --chip-fg:#FFFFFF; --chip-sh:inset 0 1px 0 rgba(255,255,255,.25),0 4px 12px rgba(0,0,0,.25);
  --shade:rgba(0,0,0,.12); --beam:#1D1D1F;
  color-scheme:light;
}
:root{
  --green:#30D158; --red:#FF453A; --amber:#FFB340;
  --sans:'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --ios:-apple-system,'SF Pro Text','Geist',system-ui,sans-serif;
  --sa:0deg;
  --lg1:#FFFFFF; --lg2:#9EA1A9; /* la couleur du halo : Cristal */
  /* anciens noms, encore lus par la fenêtre de la démo (appel.js) et le bandeau des cookies (mesure.js) */
  --fg:var(--t1); --fg2:var(--t5); --fg3:var(--t6); --line:var(--r1); --line2:var(--r2);
  --text:var(--t1); --text2:var(--t3); --muted:var(--t5); --accent:var(--t1); --on-accent:var(--bg); --accent-soft:var(--f2);
  --surface:var(--bg2); --surface2:var(--f2); --line3:var(--r3); --line-strong:var(--r3);
}
*{box-sizing:border-box}
/* v67 g : un seul passage : le film du haut (l'accueil) sur le fond pur, là où l'anneau brille ; toute la suite sur le fond doux */
.pure{background:var(--bg0)}
html{background:var(--bg);-webkit-text-size-adjust:100%;scroll-padding-top:96px}
body{margin:0;background:var(--bg);color:var(--t1);font-family:var(--sans);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
.tone-dark{color:var(--t1)}
a{color:inherit;text-decoration:none}
p,h1,h2,h3,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
img,video,canvas{max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
.in{width:min(1100px,100%);margin:0 auto;padding-left:max(22px,env(safe-area-inset-left,0px));padding-right:max(22px,env(safe-area-inset-right,0px))}
section{position:relative}
.silver{background:var(--silver);-webkit-background-clip:text;background-clip:text;color:transparent}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.skip{position:fixed;left:16px;top:-80px;z-index:100;padding:12px 18px;border-radius:999px;background:var(--t1);color:var(--bg);font-weight:600}
.skip:focus{top:calc(16px + env(safe-area-inset-top,0px))}
[hidden]{display:none!important}

/* ---------- le verre liquide ---------- */
.gl{--mx:26%;--my:-12%;position:relative;isolation:isolate}
.gl::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:radial-gradient(150px 80px at var(--mx) var(--my),var(--pl),transparent 70%);transition:opacity .35s ease}
.gl::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.25px;pointer-events:none;z-index:-1;
  background:
    linear-gradient(165deg,var(--rim1) 0%,var(--rim2) 16%,transparent 40%,transparent 64%,var(--rim3) 88%,var(--rim4) 100%),
    conic-gradient(from calc(210deg + var(--sa)),var(--rimc1),var(--rimc2),var(--rimc3),var(--rimc4),var(--rimc1));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.gl-w{color:var(--b1-fg);background:var(--b1-bg);box-shadow:var(--b1-sh)}
.gl-w::before{background:radial-gradient(150px 80px at var(--mx) var(--my),var(--b1-pl),transparent 70%);opacity:var(--b1-plo)}
.gl-d{color:var(--b2-fg);background:var(--b2-bg);box-shadow:var(--b2-sh);-webkit-backdrop-filter:blur(18px) saturate(190%);backdrop-filter:blur(18px) saturate(190%)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;height:60px;padding:0 30px;border:0;border-radius:999px;cursor:pointer;
  font:600 17px/1 var(--sans);letter-spacing:-.012em;white-space:nowrap;-webkit-tap-highlight-color:transparent;
  transition:transform .55s cubic-bezier(.25,1.6,.45,1),translate .7s cubic-bezier(.2,.9,.25,1.15),filter .3s ease}
.btn.lensed{padding-left:9px;padding-right:28px}
.btn:hover{transform:translateY(-1px);filter:brightness(1.07)}
.btn:active{transform:scale(.965);transition-duration:.12s}
.btn.sm{height:42px;padding:0 18px;font-size:14.5px;gap:8px}
.btn.md{height:52px;padding:0 24px;font-size:16px}
.btn.wide{width:100%}
/* la lentille : une petite pastille de verre ronde dans le bouton */
.lens{position:relative;flex:0 0 auto;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#FFFFFF;
  background:radial-gradient(120% 120% at 30% 18%,#50535B 0%,#1A1B1F 42%,#050506 100%);
  box-shadow:inset 0 1px 1.5px rgba(255,255,255,.55),inset 0 -3px 6px rgba(255,255,255,.10),0 3px 8px rgba(0,0,0,.35)}
.lens::before{content:"";position:absolute;inset:-1px;border-radius:50%;padding:2.2px;
  background:conic-gradient(from calc(20deg + var(--sa)),#FFFFFF,var(--lg1),var(--lg2),#FFFFFF,var(--lg1),#FFFFFF);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.lens::after{content:"";position:absolute;left:15%;top:7%;width:48%;height:28%;border-radius:50%;transform:rotate(-18deg);
  background:radial-gradient(closest-side,rgba(255,255,255,.75),rgba(255,255,255,0))}
.lens svg{position:relative;z-index:1}
.gl-d .lens{background:radial-gradient(120% 120% at 30% 18%,#5A5D66 0%,#26272C 50%,#0E0E10 100%)}
:root[data-theme="light"] .gl-w .lens{background:radial-gradient(120% 120% at 30% 18%,#FFFFFF 0%,#E3E5E9 55%,#B8BBC2 100%);color:#0B0B0D}
:root[data-theme="light"] .tone-dark .gl-w .lens{background:radial-gradient(120% 120% at 30% 18%,#50535B 0%,#1A1B1F 42%,#050506 100%);color:#FFFFFF}
.ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.tag{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 15px;border-radius:999px;font-size:14px;font-weight:550;color:var(--t3);
  background:var(--f1);box-shadow:inset 0 1px 0 var(--hl),0 0 0 1px var(--r1)}
.tag i{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green)}

/* ---------- la barre du haut ---------- */
.nav{position:fixed;z-index:20;left:0;right:0;top:calc(12px + env(safe-area-inset-top,0px));display:flex;flex-direction:column;align-items:center;padding:0 max(12px,env(safe-area-inset-left,0px));color:var(--t1);pointer-events:none}
/* la barre reçoit les clics ; le reste de la boîte (le menu replié du téléphone) les laisse passer vers la page */
html.js .nav{animation:navIn 1s cubic-bezier(.2,.8,.2,1) .05s both}
@keyframes navIn{from{opacity:0;transform:translateY(-14px)}}
.bar{pointer-events:auto;display:flex;align-items:center;gap:6px;width:min(1100px,100%);height:58px;padding:0 8px 0 12px;border-radius:999px;background-color:var(--bar-bg);transition:background-color .45s ease,color .45s ease}
.bar.refract{backdrop-filter:url(#lens-bar) blur(5px) saturate(180%)}
.brand{display:flex;align-items:center;gap:10px;font-weight:650;font-size:18px;letter-spacing:-.02em;margin-right:auto;flex:0 0 auto}
.brand i,.mark{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;flex:0 0 auto;
  background:radial-gradient(120% 100% at 30% 12%,#34353B 0%,#111114 60%,#050506 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 0 0 1px rgba(255,255,255,.12),0 3px 10px rgba(0,0,0,.25)}
.brand svg,.mark svg{filter:drop-shadow(0 0 6px color-mix(in srgb,var(--lg2) 55%,transparent))}
.links{display:flex;gap:2px;margin-right:auto}
.links a{font-size:14px;color:var(--t4);padding:9px 12px;border-radius:999px;transition:color .2s ease}
.links a:hover,.links a[aria-current]{color:var(--t1)}
.nav-r{display:flex;align-items:center;gap:6px}
.nav .icon{width:42px;padding:0}
/* le thème : le soleil en sombre (pour passer en clair), la lune en clair */
.thm .ic-moon{display:none}
:root[data-theme="light"] .thm .ic-sun{display:none}
:root[data-theme="light"] .thm .ic-moon{display:block}
.menu-b{display:none}
.sheet{display:none}
.seg2{display:inline-flex;padding:4px;border-radius:999px;background:var(--f2);box-shadow:inset 0 0 0 1px var(--r1)}
.seg2 button{height:36px;padding:0 14px;border:0;border-radius:999px;background:transparent;color:var(--t4);font-size:14.5px;font-weight:600;cursor:pointer;transition:background-color .3s ease,color .3s ease}
.seg2 button[aria-pressed="true"]{background:var(--chip);color:var(--chip-fg);box-shadow:var(--chip-sh)}
@media (max-width:980px){
  .links,.nav .call{display:none}
  .menu-b{display:inline-flex}
  /* le menu du téléphone : les pages, puis la démo et le rappel, puis l'espace client et l'apparence */
  .sheet{display:flex;flex-direction:column;gap:4px;width:min(1100px,100%);max-height:calc(100svh - 96px - env(safe-area-inset-top,0px));overflow:auto;margin-top:8px;padding:12px;border-radius:30px;background-color:var(--sheet-bg);
    opacity:0;transform:translateY(-10px) scale(.98);transform-origin:top center;pointer-events:none;visibility:hidden;
    transition:opacity .3s ease,transform .45s cubic-bezier(.2,.9,.25,1.1),visibility 0s .45s}
  .nav.open .sheet{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition:opacity .3s ease,transform .45s cubic-bezier(.2,.9,.25,1.1)}
  .sh-links{display:flex;flex-direction:column}
  .sh-links a{display:flex;align-items:center;justify-content:space-between;min-height:56px;padding:0 16px;border-radius:18px;font-size:23px;font-weight:620;letter-spacing:-.025em;color:var(--t1);transition:background-color .2s ease}
  .sh-links a::after{content:"";width:8px;height:8px;margin-right:4px;border-top:2px solid var(--t5);border-right:2px solid var(--t5);transform:rotate(45deg)}
  .sh-links a[aria-current]{background:var(--f1)}
  .sh-links a:hover,.sh-links a:focus-visible{background:var(--f2)}
  .sh-acts{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;padding:10px 4px 12px}
  .sh-acts .btn{width:100%;height:50px;padding:0 12px;font-size:15.5px}
  .sh-row{display:flex;align-items:center;gap:12px;min-height:54px;padding:0 10px 0 16px;border-top:1px solid var(--r1);font-size:17px;font-weight:550;color:var(--t2)}
  .sh-row svg{color:var(--t4)}
  .thm-row{justify-content:space-between}
  .nav.open .sheet>*{animation:shIn .55s cubic-bezier(.2,.8,.2,1) both}
  .nav.open .sheet>*:nth-child(2){animation-delay:.05s}.nav.open .sheet>*:nth-child(3){animation-delay:.1s}.nav.open .sheet>*:nth-child(4){animation-delay:.14s}
  .nav.open .sh-links a{animation:shIn .55s cubic-bezier(.2,.8,.2,1) both}
  .nav.open .sh-links a:nth-child(2){animation-delay:.03s}.nav.open .sh-links a:nth-child(3){animation-delay:.06s}.nav.open .sh-links a:nth-child(4){animation-delay:.09s}
  .nav .thm{display:none}
}
@keyframes shIn{from{opacity:0;transform:translateY(-8px)}}
@media (max-width:420px){.nav .esp{display:none}.bar{padding-left:10px}.brand{font-size:17px;gap:8px}}

/* ---------- les titres et les blocs ---------- */
.h2{font-size:clamp(42px,5.6vw,80px);font-weight:650;letter-spacing:-.04em;line-height:1.02;text-wrap:balance;color:var(--t1)}
.h2 .g{color:var(--t5)}
.h2.sm{font-size:clamp(36px,4.4vw,60px)}
.lead{margin-top:22px;font-size:clamp(19px,1.8vw,23px);line-height:1.45;color:var(--t5);text-wrap:balance}
.blk{padding:170px 0}
.center{text-align:center}
.center .lead{margin-left:auto;margin-right:auto;max-width:720px}
.dim{color:var(--t5)}
.fine{font-size:14px;color:var(--t5);line-height:1.5}
.card{position:relative;border-radius:30px;background:var(--card-bg);box-shadow:var(--card-sh)}
.card.hi{background:var(--cardhi-bg);box-shadow:var(--cardhi-sh)}
.chk{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;flex:0 0 auto;background:var(--f3);color:var(--t1)}
.ticks{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 20px;font-size:14px;color:var(--t4)}
.ticks span{display:inline-flex;align-items:center;gap:7px}
.ticks svg{color:var(--green)}

/* ---------- les apparitions ---------- */
/* les blocs montent doucement ; seuls les textes sortent aussi d'un léger flou (léger à calculer, net sur les grandes cartes) */
/* v67 g : les apparitions au défilement ne concernent plus que les titres (mot à mot) : le reste est là, simplement. Un site fait main ne fait pas monter chaque paragraphe. */
html.js .rv{opacity:1;transform:none;filter:none}
html.js .h2.rv:not(.split){opacity:0;transform:translate3d(0,24px,0);transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform 1s cubic-bezier(.2,.8,.2,1)}
html.js .h2.rv.is-in{opacity:1;transform:none}
html.js .h2.split.rv{opacity:1;transform:none;filter:none;transition:none}
.h2 .w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .02em .12em;margin:0 -.02em -.12em}
html.js .h2.split .w>span{display:inline-block;transform:translateY(108%);transition:transform 1.05s cubic-bezier(.2,.8,.2,1)}
html.js .h2.split.is-in .w>span{transform:none}
.shine{background-image:linear-gradient(105deg,rgba(255,255,255,0) 42%,rgba(255,255,255,.95) 50%,rgba(255,255,255,0) 58%),var(--silver);
  background-size:300% 100%,100% 100%;background-repeat:no-repeat;background-position:130% 0,0 0;-webkit-background-clip:text;background-clip:text;color:transparent}
html.js .shine.go{animation:sweep 1.8s cubic-bezier(.4,0,.2,1) .2s both}
@keyframes sweep{from{background-position:130% 0,0 0}to{background-position:-30% 0,0 0}}
@keyframes lineUp{from{transform:translateY(105%)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(22px);filter:blur(6px)}}

/* ---------- la conversation (bulles qui s'écrivent) ---------- */
.chat{display:flex;flex-direction:column;gap:12px;text-align:left;font-family:var(--ios)}
.msg{max-width:84%;padding:13px 18px;border-radius:24px;font-size:17.5px;line-height:1.35;transition:opacity .5s ease,transform .6s cubic-bezier(.2,.9,.25,1.1)}
.msg small{display:block;font-size:12.5px;font-weight:600;margin-bottom:3px;opacity:.6}
.msg.him{align-self:flex-start;border-bottom-left-radius:8px}
.msg.her{align-self:flex-end;border-bottom-right-radius:8px}
.msg .dots{display:none;gap:5px;align-items:center;height:23px;padding:0 4px}
.msg .dots i{width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.45;animation:dot 1.1s ease-in-out infinite}
.msg .dots i:nth-child(2){animation-delay:.15s}.msg .dots i:nth-child(3){animation-delay:.3s}
@keyframes dot{30%{transform:translateY(-5px);opacity:.95}60%{transform:none;opacity:.45}}
.chat.a .msg{opacity:0;transform:translateY(18px) scale(.94);transform-origin:left bottom}
.chat.a .msg.her{transform-origin:right bottom}
.chat.a .msg.ty,.chat.a .msg.on{opacity:1;transform:none}
.msg.ty .dots{display:flex}.msg.ty .tx,.msg.ty small{display:none}
/* en clair, le client parle dans une bulle grise, comme sur un téléphone */
:root[data-theme="light"] .msg.him:not(.tone-dark *){background:#E9E9EB;box-shadow:none;color:#1D1D1F;-webkit-backdrop-filter:none;backdrop-filter:none}
:root[data-theme="light"] .msg.him:not(.tone-dark *)::before,:root[data-theme="light"] .msg.him:not(.tone-dark *)::after{display:none}

/* ---------- les formulaires ---------- */
.form{display:flex;flex-direction:column;gap:16px;padding:30px;border-radius:32px;text-align:left}
.f{display:flex;flex-direction:column;gap:8px}
.f label,.f legend{font-size:14.5px;font-weight:550;color:var(--t3);padding:0}
.f input,.f select,.f textarea{width:100%;min-height:54px;padding:14px 16px;border-radius:16px;border:0;outline:0;font-size:17px;color:var(--t1);
  background:var(--in-bg);box-shadow:var(--in-sh);transition:box-shadow .2s ease,background-color .2s ease;-webkit-appearance:none;appearance:none}
.f textarea{min-height:120px;resize:vertical;line-height:1.45}
.f select{padding-right:44px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238E8E93' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}
.f select option{background:var(--bg2);color:var(--t1)}
.f input::placeholder,.f textarea::placeholder{color:var(--ph)}
.f input:focus,.f select:focus,.f textarea:focus{background-color:var(--in-bg2);box-shadow:inset 0 1px 0 var(--hl),0 0 0 2px var(--in-focus)}
.f input:user-invalid,.f textarea:user-invalid{box-shadow:0 0 0 2px rgba(255,69,58,.8)}
fieldset.f{border:0;margin:0;padding:0;min-width:0}
.form .ok-line{font-size:13.5px;color:var(--t5);line-height:1.5}
.check-l{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;color:var(--t3);line-height:1.45;cursor:pointer}
.check-l input{appearance:none;-webkit-appearance:none;flex:0 0 auto;width:22px;height:22px;margin:0;border-radius:7px;background:var(--f2);box-shadow:inset 0 0 0 1px var(--r3);display:grid;place-items:center;cursor:pointer}
.check-l input:checked{background:var(--t1)}
.check-l input:checked::after{content:"";width:10px;height:6px;border-left:2.5px solid var(--bg);border-bottom:2.5px solid var(--bg);transform:translateY(-1px) rotate(-45deg)}

/* ---------- les questions fréquentes ---------- */
.faq-list{display:flex;flex-direction:column;gap:12px;text-align:left}
.faq-list details{border-radius:24px;background:var(--card-bg);box-shadow:var(--card-sh);overflow:hidden}
.faq-list summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:16px;padding:22px 24px;font-size:19px;font-weight:600;letter-spacing:-.015em;line-height:1.35}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"";flex:0 0 auto;margin-left:auto;width:30px;height:30px;border-radius:50%;background-color:var(--f2);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238E8E93' stroke-width='2.8' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");background-position:center;background-size:14px;background-repeat:no-repeat;
  transition:transform .45s cubic-bezier(.2,.9,.25,1.2),background-color .2s ease}
.faq-list details[open]:not(.closing) summary::after{transform:rotate(45deg);background-color:var(--f4)}
.faq-list details p{padding:0 24px 24px;font-size:17px;line-height:1.6;color:var(--t4);max-width:760px}
/* v68 b : la réponse qui s'allume à l'ouverture, puis se calme */
.faq-list details.lit{animation:faq-lit 1.4s ease-out}
@keyframes faq-lit{0%{box-shadow:var(--card-sh),0 0 0 1px var(--faq-g1),0 0 36px var(--faq-g2)}100%{box-shadow:var(--card-sh)}}
.faq-list details.lit p{animation:faq-txt 1.5s ease-out}
@keyframes faq-txt{0%{color:var(--t1)}100%{color:var(--t4)}}
:root{--faq-g1:rgba(255,255,255,.38);--faq-g2:rgba(255,255,255,.14)}
:root[data-theme="light"]{--faq-g1:rgba(0,0,0,.1);--faq-g2:rgba(0,0,0,.08)}
.faq-list details a,.lk{color:var(--t1);text-decoration:underline;text-decoration-color:var(--r3);text-underline-offset:3px}

/* ---------- le bas de page ---------- */
.foot{padding:34px 0 calc(30px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--r1);color:var(--t5);font-size:14px}
.foot .in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px}
.foot .fb{display:flex;align-items:center;gap:12px;color:var(--t1);font-weight:650;font-size:17px;letter-spacing:-.02em}
.foot .cp{font-size:13px;color:var(--t5)}
.foot nav{flex-basis:100%;display:flex;flex-wrap:wrap;gap:8px 20px}
.foot nav a{color:var(--t4);transition:color .2s ease}
.foot nav a:hover{color:var(--t1)}
@media (max-width:760px){.foot{padding-top:24px}.foot .in{gap:12px 16px}.foot nav{gap:5px 15px;font-size:13.5px}}

/* ---------- confort ---------- */
@media (max-width:640px){
  .ctas{flex-direction:column;align-items:stretch;width:min(340px,100%);margin-left:auto;margin-right:auto}
  .btn{height:58px}
  .btn.sm{height:42px}
  .blk{padding:110px 0}
  .form{padding:22px}
  .msg{font-size:16.5px}
  .faq-list summary{font-size:17.5px;padding:19px 18px}
  .faq-list details p{padding:0 18px 20px;font-size:16px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html.js .rv{opacity:1;transform:none;filter:none}}
@media (prefers-reduced-transparency:reduce){.gl-d,.bar.refract,.sheet{-webkit-backdrop-filter:none;backdrop-filter:none}.gl-d{background:var(--bg2)}}

/* le bouton du menu (téléphone) : deux traits qui deviennent une croix */
.mi{position:relative;width:18px;height:12px;display:block}
.mi i{position:absolute;left:0;right:0;height:2px;border-radius:2px;background:currentColor;transition:transform .45s cubic-bezier(.2,.9,.25,1.2),top .3s ease}
.mi i:first-child{top:2px}.mi i:last-child{top:8px}
.nav.open .mi i:first-child{top:5px;transform:rotate(45deg)}
.nav.open .mi i:last-child{top:5px;transform:rotate(-45deg)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
/* changer de thème : le nouveau thème s'étend en cercle depuis le bouton (navigateurs récents), sinon un fondu bref */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-old(root){z-index:1}::view-transition-new(root){z-index:2}
/* v68 d : d'une page à l'autre, un voile de lumière : l'ancienne page s'efface, la nouvelle arrive éclairée puis se pose (navigateurs récents ; ailleurs, rien) */
@view-transition{navigation:auto;types:nav}
html:active-view-transition-type(nav)::view-transition-old(root){animation:vt-out .3s ease both}
html:active-view-transition-type(nav)::view-transition-new(root){animation:vt-in .7s cubic-bezier(.2,.8,.2,1) both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;filter:brightness(1.6)}55%{filter:brightness(1.12)}to{opacity:1;filter:brightness(1)}}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}
/* changer de thème : un fondu bref, sans clignotement */
html.thm-go,html.thm-go *,html.thm-go *::before,html.thm-go *::after{transition:background-color .5s ease,color .5s ease,box-shadow .5s ease,border-color .5s ease,fill .5s ease!important}

/* =====================================================================================
   Finition (v64) : boutons capsules à surface mate, barre du haut épurée. Tout le site.
   ===================================================================================== */
:root,:root[data-theme="light"] .tone-dark,:root[data-theme="light"] .nav.on-dark{
  --mb1:#F5F5F7; --mb1-fg:#0B0B0D; --mb1-h:#FFFFFF;
  --mb2:#26262A; --mb2-fg:#F5F5F7; --mb2-h:#313136; --mb2-line:rgba(255,255,255,.08);
  --bar2:rgba(12,12,15,.84); --bar-line:rgba(255,255,255,.09)}
:root[data-theme="light"]{
  --mb1:#1D1D1F; --mb1-fg:#FFFFFF; --mb1-h:#000000;
  --mb2:#FFFFFF; --mb2-fg:#1D1D1F; --mb2-h:#F2F2F4; --mb2-line:rgba(0,0,0,.12);
  --bar2:rgba(250,250,252,.84); --bar-line:rgba(0,0,0,.08)}
.btn.gl-w{background:var(--mb1);color:var(--mb1-fg);box-shadow:0 1px 2px rgba(0,0,0,.22)}
.btn.gl-d{background:var(--mb2);color:var(--mb2-fg);box-shadow:inset 0 0 0 1px var(--mb2-line);-webkit-backdrop-filter:none;backdrop-filter:none}
.btn.gl::before,.btn.gl::after{display:none}
.btn{height:48px;padding:0 24px;gap:10px;font-size:16px;translate:none!important;
  transition:background-color .2s ease,transform .2s cubic-bezier(.2,.8,.2,1)}
.btn.md{height:44px;padding:0 20px;font-size:15px}
.btn.sm{height:36px;padding:0 15px;font-size:14px;gap:7px}
.btn:hover{transform:none;filter:none}
.btn.gl-w:hover{background:var(--mb1-h)}
.btn.gl-d:hover{background:var(--mb2-h)}
.btn:active{transform:scale(.97)}
.btn:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
@media (max-width:640px){.btn{height:50px}.btn.md{height:46px}.btn.sm{height:38px}}
@media (prefers-reduced-motion:reduce){.btn{transition:none}}

/* la barre du haut : mate, un filet fin, des icônes nues */
.bar{height:54px;padding:0 8px 0 11px;background-color:var(--bar2);box-shadow:inset 0 0 0 1px var(--bar-line);
  -webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%)}
.bar.refract{-webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%)}
.bar.gl-d{background-image:none}
.bar.gl::before,.bar.gl::after{display:none}
.brand{font-size:17px;gap:9px}
.brand i{width:32px;height:32px;border-radius:10px}
.links a{font-size:14.5px}
.nav .btn.icon{width:38px;height:38px;padding:0;background:transparent;box-shadow:none;color:var(--t1)}
.nav .btn.icon:hover{background:var(--f2)}
@media (prefers-reduced-transparency:reduce){.bar,.bar.refract{-webkit-backdrop-filter:none;backdrop-filter:none;background-color:var(--bg2)}}

/* =====================================================================================
   Version 65 : le bleu des actions (comme « Acheter » chez Apple), les filets de séparation,
   les bulles mates façon Messages, le sur-titre et le titre en dégradé. Tout le site.
   ===================================================================================== */
:root,:root[data-theme="light"] .tone-dark{
  --act:#0071E3; --act-h:#0077ED; --act-fg:#FFFFFF; --link:#2997FF;
  --hair:#38383B; --bub:#26262A; --bub-fg:#F5F5F7; --pill:#1D1D1F; --pill-line:rgba(255,255,255,.06);
  --tgrad:linear-gradient(90deg,#F5F5F7 0%,#D5DEEA 42%,#91AACB 100%)}
:root[data-theme="light"]{
  --link:#0066CC; --hair:#D2D2D7; --bub:#E9E9EB; --bub-fg:#1D1D1F; --pill:#FFFFFF; --pill-line:rgba(0,0,0,.08);
  --tgrad:linear-gradient(90deg,#1B3650 0%,#2C5378 48%,#5D84AC 100%)}

/* le bouton bleu : choisir, commencer, voir les tarifs */
.btn.act{background:var(--act);color:var(--act-fg);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.btn.act::before,.btn.act::after{display:none}
.btn.act:hover{background:var(--act-h)}
/* un lien bleu avec sa petite flèche ou son triangle, comme « Regarder le film » */
.lnk{display:inline-flex;align-items:center;gap:7px;color:var(--link);font-size:clamp(17px,1.5vw,21px);font-weight:500;letter-spacing:-.01em;text-decoration:none}
.lnk svg{flex:0 0 auto}
.lnk:hover{text-decoration:underline;text-underline-offset:.18em}

/* le filet gris qui sépare deux parties, à la largeur du contenu */
.sep{display:block;height:0;margin:0 auto;border:0;border-top:1px solid var(--hair);width:min(980px,calc(100% - 2 * max(22px,env(safe-area-inset-left,0px))))}

/* le sur-titre et le titre en dégradé (« Continuité / Encore meilleurs ensemble. ») */
.eyb2{display:block;margin:0 0 14px;font-size:clamp(19px,1.7vw,24px);font-weight:600;letter-spacing:-.015em;color:var(--t1)}
.tgrad{background:var(--tgrad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;padding-bottom:.06em}
@media (forced-colors:active){.tgrad{background:none;color:CanvasText;-webkit-text-fill-color:CanvasText}}

/* les bulles de conversation : mates, comme dans Messages (le client en gris, Allonia en bleu) */
.msg.gl::before,.msg.gl::after{display:none}
.msg.him,.msg.him.gl-d,:root[data-theme="light"] .msg.him:not(.tone-dark *){background:var(--bub);color:var(--bub-fg);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.msg.her,.msg.her.gl-w{background:var(--act);color:#FFFFFF;box-shadow:none}
.msg small{opacity:.62}
.msg.her small{opacity:.78}
.msg{border-radius:22px}
.msg.him{border-bottom-left-radius:6px}.msg.her{border-bottom-right-radius:6px}

/* ---------- v66 : le bouton d'appel de la démo (accueil, pages métiers) ----------
   Rond et vert, comme le bouton pour décrocher d'un téléphone : on comprend tout de suite qu'on va appeler. */
.callb{display:inline-flex;flex-direction:column;align-items:center;gap:10px;color:var(--t1);text-decoration:none;-webkit-tap-highlight-color:transparent}
.cb-i{position:relative;display:grid;place-items:center;width:78px;height:78px;border-radius:50%;color:#FFFFFF;
  background:linear-gradient(180deg,#45E070 0%,#2BBE52 100%);box-shadow:inset 0 1.5px 0 rgba(255,255,255,.5),inset 0 -10px 14px -10px rgba(0,60,20,.45),0 18px 40px -14px rgba(48,209,88,.6);
  transition:transform .45s cubic-bezier(.25,1.6,.45,1),filter .2s ease}
.cb-i .ph{position:relative;width:32px;height:32px}
.cb-i::before,.cb-i::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 2px rgba(48,209,88,.55);opacity:0;animation:cbw 2.8s cubic-bezier(.2,.6,.3,1) infinite}
.cb-i::after{animation-delay:1s}
@keyframes cbw{0%{opacity:.85;transform:scale(1)}80%,100%{opacity:0;transform:scale(1.8)}}
.callb:hover .cb-i{transform:scale(1.05);filter:brightness(1.06)}
.callb:active .cb-i{transform:scale(.95);transition-duration:.12s}
.callb:focus-visible{outline:none}.callb:focus-visible .cb-i{outline:2px solid var(--focus);outline-offset:5px}
.cb-l{font-size:16px;font-weight:600;letter-spacing:-.01em}
@media (prefers-reduced-motion:reduce){.cb-i::before,.cb-i::after{animation:none}.cb-i{transition:none}}

/* =====================================================================================
   Version 66 : la qualité d'Apple, pas son look.
   Les boutons d'action reprennent la couleur d'Allonia (argent en sombre, noir en clair), le vert reste pour appeler,
   le lien « Regarder le film » n'est plus bleu, et le titre en dégradé devient « argent » : la matière de l'anneau,
   éclairée d'en haut, avec la lumière qui le traverse une fois quand il arrive.
   ===================================================================================== */
.btn.act{background:var(--mb1);color:var(--mb1-fg);box-shadow:0 1px 2px rgba(0,0,0,.22)}
.btn.act:hover{background:var(--mb1-h)}
.lnk{color:var(--t1)}
.lnk svg{color:var(--t4);transition:color .2s ease}
.lnk:hover svg{color:var(--t1)}
:root,:root[data-theme="light"] .tone-dark{
  --tgrad:linear-gradient(180deg,#FFFFFF 0%,#F2F4F8 28%,#C2C9D4 60%,#8D96A5 84%,#B9C0CB 100%); --tsheen:rgba(255,255,255,.95);
  --call:linear-gradient(180deg,#45E070 0%,#2BBE52 100%); --call-fg:#03200D}
:root[data-theme="light"]{
  --tgrad:linear-gradient(180deg,#6F7581 0%,#33363D 36%,#0E0F11 68%,#30333A 100%); --tsheen:rgba(150,170,205,.95)}
.tgrad{background-image:linear-gradient(100deg,transparent 0%,transparent 40%,var(--tsheen) 50%,transparent 60%,transparent 100%),var(--tgrad);
  background-size:300% 100%,100% 100%;background-position:100% 0,0 0;background-repeat:no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone}
html.js .is-in .tgrad{animation:tsheen 2.6s cubic-bezier(.4,0,.2,1) .55s both}
@keyframes tsheen{from{background-position:100% 0,0 0}to{background-position:0% 0,0 0}}

/* ---------- v67 : d'une page à l'autre sans écran blanc ; la barre du haut reste en place (Chrome, Safari 18.2 et plus) ---------- */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  .nav .bar{view-transition-name:al-nav}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.34s;animation-timing-function:cubic-bezier(.4,0,.2,1)}
  ::view-transition-group(al-nav){animation-duration:.34s}
}