/*
 * Le site autour de l'outil : accueil, connexion, espace client, page d'un
 * prospect, pages légales. Toutes les couleurs, polices et rondeurs viennent
 * de la charte (/charte.css, voir public/chartes.mjs) ; les valeurs ci-dessous
 * ne servent que si elle ne se charge pas.
 */
:root{--ease:cubic-bezier(.23,1,.32,1);
--fond:#e7eae3;--papier:#f6f7f3;--encre:#1d2622;--doux:#55605a;--filet:#cfd5cc;--vert:#26332e;--sur-vert:#f2efe6;--vert-doux:#dfe5de;
--or:#f1cf5b;--sur-or:#1d2622;--rouge:#b3412c;--primaire:var(--vert);--second:var(--or);--sombre:#26332e;--sur-sombre:#f2efe6;--sombre-doux:rgb(242 239 230/.72);
--titres:system-ui,sans-serif;--texte:system-ui,sans-serif;--titre-graisse:700;--titre-espace:-.02em;--titre-casse:none;
--rayon:14px;--rayon-grand:22px;--rayon-btn:999px;color-scheme:light}
*,*::before,*::after{box-sizing:border-box}
body.site{margin:0;background:var(--fond);color:var(--encre);font:400 17px/1.6 var(--texte);-webkit-font-smoothing:antialiased}
a{color:var(--primaire)}
img,iframe{max-width:100%}
h1,h2{font-family:var(--titres);font-weight:var(--titre-graisse);letter-spacing:var(--titre-espace);text-transform:var(--titre-casse);text-wrap:balance}
h3{text-wrap:balance}
:focus-visible{outline:3px solid var(--second);outline-offset:2px}

/* ---------- le haut de page, qui porte la signature de la charte ---------- */
.s-scene{position:relative;isolation:isolate;overflow:hidden;color:var(--scene-encre,var(--encre));
  --scene-doux:var(--doux);--scene-btn:var(--primaire);--scene-sur-btn:var(--sur-vert);--scene-filet:var(--filet)}
.s-scene>*{position:relative;z-index:1}
.s-haut{display:flex;align-items:center;justify-content:space-between;gap:1rem;max-width:74rem;margin:0 auto;padding:1.1rem 1.25rem}
.s-marque{display:flex;align-items:center;gap:.55rem;font:var(--titre-graisse) 1.25rem var(--titres);letter-spacing:var(--titre-espace);text-transform:var(--titre-casse);color:inherit;text-decoration:none}
.s-logo{display:inline-block;width:26px;height:26px;border-radius:8px;background:var(--primaire) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M9 11h14M9 16h10M9 21h12' stroke='%23f3efe5' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center/100% no-repeat;vertical-align:-7px;flex:none}
.s-haut nav{display:flex;align-items:center;gap:1.3rem;font-weight:600;font-size:.95rem}
.s-haut nav a:not(.s-btn){color:inherit;text-decoration:none;opacity:.85}
.s-haut nav a:not(.s-btn):hover{opacity:1;text-decoration:underline;text-underline-offset:4px}
@media(max-width:560px){.s-haut nav a:not(.s-btn):first-child{display:none}.s-haut nav{gap:.8rem}}

/* ---------- les boutons ---------- */
.s-btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;border:2px solid currentColor;background:transparent;color:inherit;border-radius:var(--rayon-btn);padding:.55rem 1.15rem;font:700 .95rem var(--texte);text-decoration:none;cursor:pointer;transition:transform .18s var(--ease),background-color .2s,color .2s}
.s-btn:active{transform:scale(.97)}
@media(hover:hover) and (pointer:fine){.s-btn:hover{transform:translateY(-2px)}}
.s-btn-plein{background:var(--primaire);border-color:var(--primaire);color:var(--sur-vert)}
.s-scene .s-btn-plein{background:var(--scene-btn);border-color:var(--scene-btn);color:var(--scene-sur-btn)}
.s-btn-grand{padding:.9rem 1.55rem;font-size:1.05rem}
.s-btn:disabled{opacity:.5;pointer-events:none}

main{max-width:74rem;margin:0 auto;padding:0 1.25rem}
section{padding:4.5rem 0}
.s-section-titre{font-size:clamp(2rem,4.2vw,3rem);line-height:1.05;margin:0 0 1.6rem}
.s-chapo{font-size:1.15rem;color:var(--doux);max-width:36rem;margin:1.2rem 0 0}
.s-scene .s-chapo,.s-scene .s-rassure,.s-scene .s-pour{color:var(--scene-doux)}
.s-petit{font-size:.9rem;color:var(--doux);margin-top:1.2rem}

/* ---------- l'accueil ---------- */
.s-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center;max-width:74rem;margin:0 auto;padding:2.5rem 1.25rem 4.5rem}
@media(max-width:880px){.s-hero{grid-template-columns:1fr;padding-top:1rem}}
.s-hero h1{font-size:clamp(2.6rem,6.2vw,4.8rem);line-height:.98;margin:0}
.s-actions{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:2rem}
.s-rassure{font-size:.92rem;color:var(--doux);margin-top:1rem}
.s-telephone{justify-self:center;width:320px;height:650px;border-radius:46px;background:#121212;padding:10px;box-shadow:0 0 0 1px rgb(255 255 255/.12),0 40px 80px -30px rgb(0 0 0/.55);transform:rotate(2deg)}
.s-telephone iframe{width:100%;height:100%;border:0;border-radius:37px;background:#fff}
@media(max-width:880px){.s-telephone{transform:none;width:300px;height:580px}}
.s-hero-texte>*{animation:s-monte .8s var(--ease) both}
.s-hero-texte>:nth-child(2){animation-delay:.08s}.s-hero-texte>:nth-child(3){animation-delay:.16s}.s-hero-texte>:nth-child(4){animation-delay:.24s}
.s-telephone{animation:s-arrive 1s var(--ease) .15s both}
@keyframes s-monte{from{opacity:0;transform:translateY(16px)}}
@keyframes s-arrive{from{opacity:0;transform:translateY(40px) rotate(6deg)}}

.s-bande{display:flex;align-items:center;justify-content:space-between;gap:1rem 2rem;flex-wrap:wrap;padding:1.6rem 0;border-bottom:1px solid var(--filet)}
.s-bande p{margin:0;font-weight:600;color:var(--doux)}
.s-langues{display:flex;gap:.4rem}
.s-langues span{font-weight:800;font-size:.85rem;padding:.25rem .6rem;border-radius:var(--rayon-btn);border:1.5px solid var(--filet);color:var(--encre)}

.s-etapes ol{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
@media(max-width:820px){.s-etapes ol{grid-template-columns:1fr}}
.s-etapes li{position:relative;background:var(--papier);border:1px solid var(--filet);border-radius:var(--rayon-grand);padding:1.7rem 1.5rem}
.s-num{position:absolute;top:1.1rem;right:1.4rem;font:var(--titre-graisse) 2.6rem/1 var(--titres);color:var(--filet)}
.s-etapes svg,.s-fonctions svg{width:28px;height:28px;color:var(--primaire)}
.s-etapes h3{font-size:1.15rem;margin:.9rem 0 .4rem}
.s-etapes p{margin:0;color:var(--doux);font-size:.98rem}

.s-film{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:3.5rem;align-items:center}
@media(max-width:820px){.s-film{grid-template-columns:1fr;gap:2rem}}
.s-film-cadre{position:relative;width:100%;max-width:360px;aspect-ratio:9/16;justify-self:center;border-radius:var(--rayon-grand);overflow:hidden;background:var(--sombre);box-shadow:0 40px 80px -36px rgb(0 0 0/.55)}
.s-film-cadre #film-demo{position:absolute;inset:0}
.s-film-jouer{position:absolute;right:12px;bottom:12px;z-index:3;border:0;border-radius:var(--rayon-btn);background:rgb(255 255 255/.92);color:#161616;font:700 .85rem var(--texte);padding:.45rem .85rem;cursor:pointer}

.s-fonctions{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:3rem;align-items:start}
@media(max-width:820px){.s-fonctions{grid-template-columns:1fr;gap:1rem}}
.s-fonctions-tete{position:sticky;top:1.5rem}
@media(max-width:820px){.s-fonctions-tete{position:static}}
.s-fonctions ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 2rem}
@media(max-width:560px){.s-fonctions ul{grid-template-columns:1fr}}
.s-fonctions li{display:grid;grid-template-columns:auto 1fr;gap:.9rem;padding:1.3rem 0;border-top:1px solid var(--filet)}
.s-fonctions h3{margin:0 0 .3rem;font-size:1.05rem}
.s-fonctions p{margin:0;color:var(--doux);font-size:.95rem}

.s-chiffres{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:3rem;align-items:center;background:var(--sombre);color:var(--sur-sombre);
  border-radius:var(--rayon-grand);padding:3.5rem;margin:2rem 0}
@media(max-width:880px){.s-chiffres{grid-template-columns:1fr;padding:2.2rem 1.4rem}}
.s-chiffres .s-chapo,.s-chiffres .s-petit{color:var(--sombre-doux)}
.s-chiffres-demo{display:grid;gap:.8rem}
.s-matrice{width:100%;height:auto;background:rgb(255 255 255/.06);border-radius:var(--rayon);font:700 11px var(--texte)}
.s-matrice rect{opacity:.14}.s-matrice .q1{fill:#5fbf85}.s-matrice .q2{fill:#f1c24b}.s-matrice .q3{fill:#7aa2e8}.s-matrice .q4{fill:#e7735f}
.s-matrice text{fill:currentColor;opacity:.85}
.s-matrice circle{stroke:var(--sombre);stroke-width:2}.s-matrice .p1{fill:#5fbf85}.s-matrice .p2{fill:#f1c24b}.s-matrice .p3{fill:#7aa2e8}.s-matrice .p4{fill:#e7735f}
.s-conseil{display:grid;gap:.25rem;background:var(--papier);color:var(--encre);border:1px solid var(--filet);border-radius:var(--rayon);padding:.9rem 1.1rem;font-size:.92rem}
.s-conseil span{color:var(--doux)}

.s-tarifs{text-align:center}
.s-tarifs .s-section-titre .s-trait{margin-left:auto;margin-right:auto}
.s-tarifs .s-chapo{margin:-.6rem auto 2rem}
.s-bascule>input{position:absolute;opacity:0}
.s-bascule>label{display:inline-block;padding:.45rem 1.1rem;border:2px solid var(--encre);font-weight:700;cursor:pointer;font-size:.92rem}
.s-bascule>label[for=p-mois]{border-radius:var(--rayon-btn) 0 0 var(--rayon-btn)}
.s-bascule>label[for=p-an]{border-radius:0 var(--rayon-btn) var(--rayon-btn) 0;margin-left:-2px}
.s-bascule>input:checked+label{background:var(--encre);color:var(--fond)}
.s-bascule>input:focus-visible+label{outline:3px solid var(--second);outline-offset:2px}
.s-formules{display:grid;grid-template-columns:repeat(2,minmax(0,23rem));justify-content:center;gap:1.4rem;margin-top:2rem;text-align:left}
@media(max-width:760px){.s-formules{grid-template-columns:1fr}}
.s-formule{position:relative;background:var(--papier);border:1px solid var(--filet);border-radius:var(--rayon-grand);padding:1.9rem 1.7rem;display:flex;flex-direction:column}
.s-formule.vedette{border:2px solid var(--primaire)}
.s-etiquette{position:absolute;top:-.85rem;left:1.6rem;margin:0;background:var(--second);color:var(--sur-or);font-size:.78rem;font-weight:800;padding:.2rem .75rem;border-radius:var(--rayon-btn)}
.s-formule h3{margin:0;font:var(--titre-graisse) 1.6rem var(--titres);text-transform:var(--titre-casse)}
.s-prix{font:var(--titre-graisse) 2.7rem/1 var(--titres);margin:.8rem 0 .3rem}
.s-prix small{font:500 1rem var(--texte);color:var(--doux)}
.s-prix-note{font-size:.88rem;color:var(--doux);margin:0}
.s-formule ul{list-style:none;padding:0;margin:1.2rem 0 1.6rem;display:grid;gap:.55rem;flex:1}
.s-formule li{padding-left:1.6rem;position:relative}
.s-formule li::before{content:"";position:absolute;left:0;top:.45em;width:.9rem;height:.5rem;border-left:2.5px solid var(--primaire);border-bottom:2.5px solid var(--primaire);transform:rotate(-45deg)}
.s-formule .an{display:none}
#p-an:checked~.s-formules .an{display:inline}
#p-an:checked~.s-formules .mois{display:none}
.s-tarifs>.s-prix-note{margin-top:1.4rem}

.s-faq{max-width:48rem}
.s-faq details{border-bottom:1px solid var(--filet);padding:1.05rem 0}
.s-faq summary{font-weight:700;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem}
.s-faq summary::-webkit-details-marker{display:none}
.s-faq summary::after{content:"+";font:400 1.5rem/1 var(--texte);color:var(--primaire);transition:transform .25s var(--ease)}
.s-faq details[open] summary::after{transform:rotate(45deg)}
.s-faq p{color:var(--doux);margin:.7rem 0 0}
.s-final{text-align:center;padding-bottom:6rem}
.s-final h2{font-size:clamp(2.2rem,5vw,3.6rem);line-height:1;margin:0 0 1.6rem}

.s-pied{max-width:74rem;margin:0 auto;padding:2rem 1.25rem 3rem;border-top:1px solid var(--filet);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.88rem;color:var(--doux)}
.s-pied p{margin:0;display:flex;align-items:center;gap:.5rem}
.s-pied nav{display:flex;gap:1.2rem;flex-wrap:wrap}
.s-pied a{color:var(--doux)}

/* ---------- connexion ---------- */
.s-connexion{min-height:70vh;display:grid;place-items:center;padding:2.5rem 1.25rem}
.s-carte{width:100%;max-width:28rem;background:var(--papier);border:1px solid var(--filet);border-radius:var(--rayon-grand);padding:2.2rem 1.8rem;box-shadow:0 30px 60px -40px rgb(0 0 0/.35);animation:s-monte .6s var(--ease) both}
.s-carte h1{font-size:2.1rem;line-height:1.05;margin:0}
.s-carte .s-chapo{font-size:1rem;margin-top:.7rem}
.s-carte form{display:grid;gap:1rem;margin-top:1.5rem}
.s-carte label, .s-champ-resto{display:grid;gap:.35rem;font-weight:650;font-size:.9rem}
.s-carte input{font:inherit;font-size:1.05rem;padding:.75rem .9rem;border:1.5px solid var(--filet);border-radius:var(--rayon);background:#fff;color:#161616}
.s-carte input:focus{outline:none;border-color:var(--primaire);box-shadow:0 0 0 3px var(--vert-doux)}
.s-erreur{color:var(--rouge);font-weight:600;margin:0}
.s-ok{background:var(--vert-doux);color:var(--encre);padding:1rem;border-radius:var(--rayon);font-weight:600;margin:1.5rem 0 0}

.s-legal,.s-admin{max-width:46rem;padding-top:1.5rem;padding-bottom:4rem}
.s-legal h1,.s-admin h1{font-size:2.4rem;margin:.5rem 0 1rem}
.s-legal h2{font-size:1.3rem;margin:1.5rem 0 .5rem}
.s-admin{max-width:74rem}
.s-admin table{width:100%;border-collapse:collapse;font-size:.9rem;background:var(--papier)}
.s-admin th,.s-admin td{text-align:left;padding:.55rem .6rem;border-bottom:1px solid var(--filet);vertical-align:top}

/* ---------- la démo personnelle d'un prospect ---------- */
.s-dec-hero{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:3.5rem;align-items:center;max-width:74rem;margin:0 auto;padding:1.5rem 1.25rem 4rem}
@media(max-width:880px){.s-dec-hero{grid-template-columns:1fr;gap:2rem;padding-top:.5rem}}
.s-dec-film{display:grid;justify-items:center;gap:.7rem}
.s-dec-film .s-petit{color:var(--scene-doux)}
.s-dec-cadre{position:relative;width:100%;border-radius:var(--rayon-grand);overflow:hidden;background:var(--sombre);box-shadow:0 40px 80px -30px rgb(0 0 0/.55)}
.s-dec-9x16{max-width:380px;aspect-ratio:9/16}.s-dec-1x1{max-width:520px;aspect-ratio:1}.s-dec-16x9{aspect-ratio:16/9}
.s-dec-cadre #film{position:absolute;inset:0}
.s-dec-jouer{position:absolute;right:14px;bottom:14px;width:44px;height:44px;border-radius:50%;border:0;background:rgb(255 255 255/.92);color:#111;font-size:15px;cursor:pointer;z-index:5}
.s-pour{margin:0 0 .8rem;font-weight:700;color:var(--doux)}
.s-dec-texte h1{font-size:clamp(2.3rem,5vw,3.8rem);line-height:1;margin:0}
.s-dec-qr{display:flex;align-items:center;gap:1.2rem;margin-top:1.6rem;padding:1rem 1.2rem;background:var(--papier);color:var(--encre);border:1px solid var(--filet);border-radius:var(--rayon-grand);max-width:30rem}
.s-dec-qr>div{flex:none;width:120px;height:120px}.s-dec-qr svg{width:100%;height:100%;display:block}
.s-dec-qr p{margin:0;color:var(--doux)}.s-dec-qr b{color:var(--encre);font-size:1.1rem}
.s-dec-inclus .s-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));gap:1rem}
.s-dec-inclus article{background:var(--papier);border:1px solid var(--filet);border-radius:var(--rayon-grand);padding:1.3rem}
.s-dec-inclus article svg{width:28px;height:28px;color:var(--primaire)}
.s-dec-inclus h3{margin:.6rem 0 .3rem;font-size:1.05rem}.s-dec-inclus p{margin:0;color:var(--doux);font-size:.95rem}
.s-dec-contact{text-align:center}.s-dec-contact .s-chapo{margin:0 auto}.s-dec-contact .s-actions{justify-content:center}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ---------- se connecter avec Google ---------- */
.s-google{display:flex;align-items:center;justify-content:center;gap:.7rem;margin-top:1.5rem;padding:.85rem 1rem;border:1.5px solid #dadce0;border-radius:var(--rayon-btn);background:#fff;color:#1f1f1f;font:600 1rem var(--texte);text-decoration:none;transition:background-color .2s,box-shadow .2s}
.s-google:hover{background:#f7f8f8;box-shadow:0 1px 3px rgb(0 0 0/.12)}
.s-champ-resto{display:grid;gap:.35rem;font-weight:650;font-size:.9rem;margin-top:1.4rem}
.s-ou{display:flex;align-items:center;gap:.8rem;margin:1.3rem 0 0;color:var(--doux);font-size:.85rem}
.s-ou::before,.s-ou::after{content:"";flex:1;height:1px;background:var(--filet)}
.s-test{background:var(--vert-doux);padding:.6rem .8rem;border-radius:var(--rayon);color:var(--encre)}