@font-face{font-family:Gilroy;src:url(/assets/Gilroy-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Gilroy;src:url(/assets/Gilroy-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:#ededed;color:#111;font-family:Gilroy,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}
main{max-width:980px;margin:0 auto;padding:22px 16px 40px;display:flex;flex-direction:column;gap:14px}
section,.tete{background:#fff;border-radius:28px;box-shadow:0 1px 2px rgba(0,0,0,.04),0 10px 30px rgba(0,0,0,.05)}
.tete{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 22px}
.logo{height:26px;width:auto;display:block}
.badge{display:inline-flex;align-items:center;gap:8px;background:#111;color:#fff;font-weight:700;font-size:13px;padding:8px 12px;border-radius:999px;white-space:nowrap}
.badge i{width:0;height:0;border-left:8px solid #00c97b;border-top:5px solid transparent;border-bottom:5px solid transparent}
.intro{padding:26px 22px}
h1{font-weight:700;font-size:clamp(30px,6.4vw,54px);line-height:1.02;letter-spacing:-.03em}
.intro p{margin-top:12px;font-weight:500;font-size:17px;line-height:1.45;color:#3a3a3a;max-width:620px}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.badge{cursor:pointer}
[hidden]{display:none!important}
[data-lang=en] [data-l=fr],[data-lang=en] [data-l=es],[data-lang=fr] [data-l=en],[data-lang=fr] [data-l=es],[data-lang=es] [data-l=en],[data-lang=es] [data-l=fr]{display:none}
.intro{display:block}
.fr{color:#6e6e6e}
.langues{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}
.langue{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:22px 20px;border-radius:22px;background:#f4f4f4;font-weight:700;font-size:22px;letter-spacing:-.01em;text-align:left;box-shadow:inset 0 0 0 1.5px #dcdcdc;transition:transform .15s,box-shadow .15s}
.langue i{width:0;height:0;border-left:11px solid #00c97b;border-top:7px solid transparent;border-bottom:7px solid transparent;flex:none}
.langue.principal{background:#111;color:#fff;box-shadow:none}
.langue:active{transform:scale(.98)}
.langue:focus-visible,.lire:focus-visible,.badge:focus-visible{outline:3px solid #00c97b;outline-offset:3px}
.films{display:grid;grid-template-columns:1fr 1fr;gap:16px 14px;padding:0 22px 24px}
.film h3{margin-top:12px;font-weight:700;font-size:19px;letter-spacing:-.01em;line-height:1.15}
.legende{margin-top:4px;font-weight:500;font-size:14px;line-height:1.35;color:#6e6e6e}
.duree{display:inline-block;color:#111;font-weight:700;white-space:nowrap}
.duree:not(:empty)::before{content:"· "}
.cadre{position:relative;aspect-ratio:16/9;border-radius:20px;overflow:hidden;background:linear-gradient(100deg,#ec4899 0%,#f97316 100%);box-shadow:0 10px 26px rgba(0,0,0,.14)}
.cadre img,.cadre video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#111}
/* Plein écran (rotation téléphone, 28/10) : le film entier, sans rognage. */
.cadre video:fullscreen{object-fit:contain}
.cadre video:-webkit-full-screen{object-fit:contain}
.cadre video{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.lire{position:absolute;inset:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.play{width:62px;height:62px;border-radius:50%;background:rgba(17,17,17,.82);box-shadow:0 0 0 2px rgba(255,255,255,.7);position:relative;transition:transform .15s}
.play::after{content:"";position:absolute;left:25px;top:19px;border-left:19px solid #fff;border-top:12px solid transparent;border-bottom:12px solid transparent}
.lire:active .play{transform:scale(.94)}
.bientot{background:#111;color:#fff;font-weight:700;font-size:13px;padding:8px 12px;border-radius:999px}
.film.en-lecture .lire{display:none}
@media (max-aspect-ratio:1/1){.cadre{aspect-ratio:9/16}}
@media (max-width:640px){
  main{padding:16px 12px 32px}
  .tete{padding:16px 18px}.logo{height:22px}.badge{font-size:12px;padding:7px 10px}
  .intro{padding:22px 18px}.intro p{font-size:16px}
  .langues{grid-template-columns:1fr}
  .films{padding:0 14px 20px;gap:14px 12px}
  .film h3{font-size:16px}.legende{font-size:12.5px}
  .play{width:50px;height:50px}.play::after{left:20px;top:15px;border-left:15px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent}
}
/* Blocs de la page en ligne du 24/10 (iPhones, bandeau, hors ligne), repris tels quels sous les films. */
[data-ecran=langue] .suite{display:none}
.phones{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:22px}
figure{display:flex;flex-direction:column;align-items:center;text-align:center}
.iphone{width:100%;max-width:190px;padding:3px;border-radius:15.5%/7.2%;background:#1b1b1d;box-shadow:0 0 0 1.4px #9a9aa0,0 0 0 2.4px #3a3a3d,0 16px 34px rgba(0,0,0,.18)}
.iphone img{display:block;width:100%;height:auto;border-radius:14%/6.6%}
figcaption{margin-top:12px;font-weight:500;font-size:13.5px;line-height:1.35;color:#6e6e6e;max-width:190px}
figcaption b{display:block;color:#111;font-size:16px;margin-bottom:2px}
.band{background:linear-gradient(100deg,#ec4899 0%,#f97316 100%);color:#fff;padding:24px 22px}
.band h2{font-weight:700;font-size:30px;line-height:1.02;letter-spacing:-.02em}
.band p{margin-top:8px;font-weight:500;font-size:15px;opacity:.92}
.band ul{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.band li{font-weight:700;font-size:13px;padding:8px 11px;border-radius:999px;background:rgba(255,255,255,.18);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.band li.k{background:#fff;color:#111;box-shadow:none}
.offline{background:#111;color:#fff;display:flex;align-items:center;gap:16px;padding:22px}
.offline .ic{flex:none;width:52px;height:52px;border-radius:16px;background:#00c97b;display:flex;align-items:center;justify-content:center}
.offline .ic svg{width:28px;height:28px}
.offline h2{font-weight:700;font-size:22px}
.offline p{margin-top:5px;font-weight:500;font-size:14.5px;line-height:1.4;color:#c9c9c9}
@media (max-width:640px){.phones{grid-template-columns:repeat(2,1fr);gap:18px 12px;padding:18px 14px}}
/* Version sans films (body data-films="bientot") : accroche dédiée. */
body:not([data-films=bientot]) .sans-films,[data-films=bientot] .avec-films{display:none}
/* Film sans version verticale : en portrait, la carte garde le format 16:9 du film lu. */
@media (max-aspect-ratio:1/1){.film.paysage .cadre{aspect-ratio:16/9}}
/* Prise de rendez-vous (demande Mohamed 28/10 16:22) : quatre Taleeners, agenda dans un nouvel onglet. */
.rdv{background:#111;color:#fff;padding:26px 22px}
.rdv h2{font-weight:700;font-size:30px;line-height:1.02;letter-spacing:-.02em}
.rdv p{margin-top:8px;font-weight:500;font-size:15px;line-height:1.4;color:#c9c9c9}
.personnes{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:18px}
.personne{display:flex;align-items:center;gap:12px;padding:12px 14px 12px 12px;border-radius:20px;background:#fff;color:#111;text-decoration:none;transition:transform .15s,background .15s}
.personne:hover{background:#f1f1f1}
.personne:active{transform:scale(.97)}
.personne:focus-visible{outline:3px solid #00c97b;outline-offset:3px}
.mono{flex:none;width:40px;height:40px;border-radius:50%;background:#00c97b;color:#111;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:17px}
.nom{display:flex;flex-direction:column;flex:1;min-width:0}
.nom b{font-weight:700;font-size:17px;letter-spacing:-.01em}
.nom small{margin-top:1px;font-weight:500;font-size:13px;color:#6e6e6e}
.personne i{flex:none;width:0;height:0;border-left:8px solid #111;border-top:5px solid transparent;border-bottom:5px solid transparent}
@media (max-width:640px){.rdv{padding:22px 16px}.rdv h2{font-size:26px}.personnes{grid-template-columns:1fr 1fr;gap:8px}.personne{padding:10px 12px 10px 10px;gap:10px}.mono{width:36px;height:36px;font-size:15px}.nom b{font-size:16px}}
.phones.trois{grid-template-columns:repeat(3,1fr)}
@media (max-width:640px){.phones.trois{grid-template-columns:repeat(3,1fr);gap:12px 8px;padding:18px 12px}.phones.trois figcaption{font-size:12px}.phones.trois figcaption b{font-size:14px}}
/* Sélecteur de langue (28/10 16:23) : discret, en haut à droite, la langue active en noir. */
.choix-langue{display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:#f1f1f1}
.choix-langue button{min-width:38px;padding:7px 10px;border-radius:999px;font-weight:700;font-size:12.5px;letter-spacing:.02em;color:#6e6e6e;transition:background .15s,color .15s}
.choix-langue button[aria-pressed=true]{background:#111;color:#fff}
.choix-langue button:focus-visible{outline:3px solid #00c97b;outline-offset:2px}
@media (max-width:640px){.choix-langue button{min-width:34px;padding:6px 8px;font-size:12px}}

/* Refonte 31/10 : section « Un seul outil. Toute l'équipe. » (concept A) et carte de rendez-vous unique. */
.unifie{padding:28px 22px 26px}
.unifie-tete{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px 24px}
.unifie-tete h2{font-weight:700;font-size:34px;line-height:1.02;letter-spacing:-.025em;flex:1 1 320px}
.unifie-tete p{flex:1 1 100%;order:3;margin-top:-4px;font-weight:500;font-size:15px;line-height:1.4;color:#6e6e6e;max-width:520px}
.bascule{position:relative;display:inline-flex;padding:4px;border-radius:999px;background:#ececec;flex:none}
.bascule button{position:relative;z-index:1;border:0;background:transparent;font:inherit;font-weight:600;font-size:14px;color:#6e6e6e;padding:9px 16px;border-radius:999px;cursor:pointer;transition:color .25s}
.bascule button[aria-pressed=true]{color:#111;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.08),0 4px 12px rgba(0,0,0,.06)}
.bascule button:focus-visible{outline:3px solid #00c97b;outline-offset:2px}
.moments{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:22px}
.moment{display:flex;flex-direction:column;align-items:center;min-width:0}
.iphone.duo{position:relative;aspect-ratio:570/1239;height:auto}
.iphone.duo img{position:absolute;inset:3px;width:calc(100% - 6px);height:calc(100% - 6px);object-fit:cover;transition:opacity .45s ease,transform .45s ease}
.unifie[data-vue=cs] .iphone.duo .v-mgr,.unifie[data-vue=mgr] .iphone.duo .v-cs{opacity:0;transform:scale(.985)}
.fil{position:relative;width:100%;max-width:190px;height:22px;margin-top:10px;display:flex;align-items:center;gap:8px}
.fil-trait{position:relative;flex:1;height:2px;border-radius:2px;background:#e3e3e3;overflow:hidden}
.fil-trait::after{content:"";position:absolute;inset:0;background:#00c97b;transform:scaleX(0);transform-origin:left;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.unifie[data-vue=mgr] .fil-trait::after{transform:scaleX(1)}
.fil-txt{flex:none;font-size:11.5px;font-weight:600;color:#9a9a9a;letter-spacing:.01em}
.unifie[data-vue=mgr] .fil-txt{color:#00a86b}
.moment-txt{margin-top:6px;max-width:190px;width:100%;font-weight:500;font-size:13.5px;line-height:1.35;color:#6e6e6e}
.moment-txt b{display:block;color:#111;font-size:16px;margin-bottom:2px}
.moment-txt .num{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:#111;color:#fff;font-size:11px;font-weight:700;margin-bottom:6px}
.unifie[data-vue=cs] .moment-txt .v-mgr,.unifie[data-vue=mgr] .moment-txt .v-cs,.unifie[data-vue=cs] .fil-txt .v-mgr,.unifie[data-vue=mgr] .fil-txt .v-cs{display:none}
.moment-txt .v-cs,.moment-txt .v-mgr{display:block}
@media (max-width:640px){
  .unifie{padding:22px 0 20px}
  .unifie-tete{padding:0 16px}
  .unifie-tete h2{font-size:28px;flex-basis:100%}
  .bascule{order:4}
  .moments{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 16px 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .moments::-webkit-scrollbar{display:none}
  .moment{flex:0 0 62%;scroll-snap-align:center}
  .iphone.duo,.fil,.moment-txt{max-width:none}
}
@media (prefers-reduced-motion:reduce){.iphone.duo img,.fil-trait::after{transition:none}}
.rdv{display:flex;align-items:center;justify-content:space-between;gap:16px 24px;flex-wrap:wrap}
.rdv-txt{flex:1 1 300px}
.rdv-bouton{display:inline-flex;align-items:center;gap:12px;border:0;cursor:pointer;font:inherit;font-weight:700;font-size:16px;color:#111;background:#fff;padding:14px 18px 14px 22px;border-radius:999px;transition:transform .15s,background .15s}
.rdv-bouton:hover{background:#f1f1f1}.rdv-bouton:active{transform:scale(.97)}
.rdv-bouton:focus-visible{outline:3px solid #00c97b;outline-offset:3px}
.rdv-bouton i{width:0;height:0;border-left:8px solid #111;border-top:5px solid transparent;border-bottom:5px solid transparent}
.feuille-rdv{border:0;padding:0;margin:auto;width:min(720px,100vw);height:min(860px,92vh);max-width:100vw;max-height:100dvh;border-radius:24px;overflow:hidden;background:#fff;color:#111;box-shadow:0 30px 80px rgba(0,0,0,.35)}
.feuille-rdv[open]{display:flex;flex-direction:column}
.feuille-rdv::backdrop{background:rgba(0,0,0,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.feuille-tete{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px 12px 20px;border-bottom:1px solid #eee}
.feuille-tete h2{font-size:18px;font-weight:700;letter-spacing:-.01em}
.feuille-fermer{border:0;background:#f1f1f1;border-radius:999px;padding:8px 14px;font:inherit;font-weight:600;font-size:14px;cursor:pointer}
.feuille-rdv iframe{flex:1;width:100%;border:0;background:#fafafa}
.feuille-onglet{display:block;text-align:center;padding:12px;font-weight:600;font-size:14px;color:#00a86b;text-decoration:none;border-top:1px solid #eee}
@media (max-width:640px){.rdv-bouton{width:100%;justify-content:center}.feuille-rdv{width:100vw;height:100dvh;border-radius:0}}