/* sonnette.app : feuille partagée par la page d'accueil, les pages satellites et les pages légales.
   Marque Sonnette, pas de marque blanche ici. Daltonisme : pas d'opposition rouge et vert, couleurs franches, étiquettes écrites. */
@font-face{font-family:"Atkinson Hyperlegible";src:url("/assets/fonts/atkinson-hyperlegible-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url("/assets/fonts/atkinson-hyperlegible-400i.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url("/assets/fonts/atkinson-hyperlegible-700.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Bricolage Grotesque";src:url("/assets/fonts/bricolage-grotesque-700.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Young Serif";src:url("/assets/fonts/young-serif-400.woff2") format("woff2");font-weight:400;font-display:swap}

:root{
  --s-papier:#F3EEE4;--s-papier-2:#E7E0D3;--s-ticket:#FBF8F2;--s-encre:#1D1A16;--s-encre-2:#3E3933;--s-gris:#5B554C;
  --s-filet:#CFC6B6;--s-pointille:#B9AE9B;--s-cobalt:#2741C6;--s-sur-cobalt:#FFFFFF;--s-nuit-texte:#E3DCCF;
  /* Le cobalt en texte (titres, liens, focus) et en aplat (boutons) se séparent en mode sombre ;
     la « nuit » est le fond des sections foncées, qui le restent dans les deux modes. */
  --s-cobalt-texte:#2741C6;--s-champ-fond:#FFFFFF;--s-nuit:#1D1A16;--s-nuit-papier:#F3EEE4;
  --s-titre:"Bricolage Grotesque",system-ui,sans-serif;--s-texte:"Atkinson Hyperlegible",system-ui,sans-serif;
  --s-marge:clamp(20px,5vw,64px);--s-large:1240px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--s-papier);color:var(--s-encre);font:400 17px/1.5 var(--s-texte)}
a{color:var(--s-encre);font-weight:700;text-underline-offset:.15em}
a:hover{color:var(--s-cobalt-texte)}
:focus-visible{outline:3px solid var(--s-cobalt-texte);outline-offset:3px}
img{max-width:100%;display:block}
.s-boite{max-width:var(--s-large);margin:0 auto;padding-inline:var(--s-marge)}
.s-surtitre{font-weight:700;font-size:13px;letter-spacing:.07em;text-transform:uppercase;color:var(--s-gris)}
.s-h1{margin:0;font:700 clamp(40px,6.2vw,84px)/.98 var(--s-titre);letter-spacing:-.025em;text-wrap:balance}
.s-h1 em{font-style:normal;color:var(--s-cobalt-texte)}
.s-h2{margin:0;font:700 clamp(32px,4.2vw,56px)/1.02 var(--s-titre);letter-spacing:-.02em;text-wrap:balance}
.s-h3{margin:0;font:700 clamp(24px,2.6vw,34px)/1.1 var(--s-titre)}
.s-chapo{margin:0;font-size:clamp(17px,1.6vw,21px);line-height:1.45;color:var(--s-encre-2);max-width:34em;text-wrap:pretty}
p{text-wrap:pretty}
.s-bouton{min-height:56px;display:inline-flex;align-items:center;justify-content:center;padding:0 24px;border-radius:14px;border:0;background:var(--s-cobalt);color:var(--s-sur-cobalt);font:700 17px var(--s-texte);text-decoration:none;cursor:pointer}
.s-bouton:hover{color:var(--s-sur-cobalt);background:#1F35A8}
.s-bouton--trait{background:none;color:var(--s-encre);border:2px solid var(--s-encre);min-height:52px}
.s-bouton--trait:hover{background:var(--s-encre);color:var(--s-papier)}
.s-lien{min-height:44px;display:inline-flex;align-items:center}
.s-tampon{align-self:flex-start;font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border:1.5px solid currentColor;border-radius:999px}
.s-photo{background:var(--s-papier-2);border-radius:20px;overflow:hidden}
.s-photo img{width:100%;height:100%;object-fit:cover}

/* En-tête */
.s-tete{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;padding-block:16px}
.s-marque{display:flex;align-items:center;gap:8px;font:700 24px var(--s-titre);text-decoration:none;min-height:44px}
.s-marque svg{width:26px;height:26px;stroke:var(--s-cobalt-texte)}
.s-tete__cta{margin-left:auto;order:2;min-height:44px;display:flex;align-items:center;padding:0 18px;border-radius:999px;background:var(--s-encre);color:var(--s-papier);font-size:15px;text-decoration:none}
.s-tete__cta:hover{color:var(--s-sur-cobalt);background:var(--s-cobalt)}
.s-nav{order:3;flex:1 1 520px;display:flex;gap:4px;overflow-x:auto}
.s-nav a{flex:none;min-height:44px;display:flex;align-items:center;padding:0 12px;font-weight:400;font-size:16px;text-decoration:none}
@media (min-width:1000px){.s-nav{order:1;flex:0 1 auto;margin-left:auto}.s-tete__cta{margin-left:0}}

/* Héros */
.s-heros{display:flex;flex-wrap:wrap;gap:clamp(28px,5vw,72px);align-items:center;padding-block:clamp(16px,4vw,56px) clamp(48px,7vw,104px)}
.s-heros__texte{flex:1 1 520px;display:flex;flex-direction:column;gap:18px;min-width:0}
.s-heros__actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:6px}
.s-heros__demo{flex:1 1 380px;display:flex;flex-direction:column;align-items:center;gap:18px;min-width:0}
/* Le téléphone de démonstration utilise les classes et variables de l'app (sonnette-app.css), dans un cadre */
.s-telephone{width:min(320px,100%);border-radius:34px;border:8px solid var(--s-nuit);overflow:hidden;box-shadow:0 30px 60px -30px rgb(29 26 22 / .5)}
/* Pages métier : le téléphone joue la boucle du métier (vidéo de l'app, toujours en clair, comme la démonstration). */
.s-telephone--video{line-height:0;background:#F3EEE4}
.s-boucle{display:block;width:100%;height:auto;aspect-ratio:608 / 1316;background:#F3EEE4}
.s-demo__legende{margin:0;font-size:14px;line-height:1.4;color:var(--s-gris);text-align:center}
.s-reglages{width:min(420px,100%);padding:16px;border:1.5px solid var(--s-filet);border-radius:18px;background:var(--s-ticket);display:flex;flex-direction:column;gap:14px}
.s-reglages fieldset{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.s-reglages legend,.s-reglages label{font-size:14px;font-weight:700;padding:0}
.s-choix{display:flex;flex-wrap:wrap;gap:6px}
.s-choix--3{display:grid;grid-template-columns:repeat(3,1fr)}
.s-choix input{position:absolute;opacity:0;pointer-events:none}
.s-choix label{min-height:44px;display:flex;align-items:center;justify-content:center;gap:8px;padding:0 14px;border-radius:12px;border:1.5px solid var(--s-filet);background:var(--s-champ-fond);font-size:15px;cursor:pointer}
.s-choix input:checked+label{border:2.5px solid var(--s-encre);background:var(--s-encre);color:var(--s-papier)}
.s-choix input:focus-visible+label{outline:3px solid var(--s-cobalt-texte);outline-offset:2px}
.s-choix--teintes label{border-radius:999px;padding-left:8px}
.s-choix--teintes input:checked+label{background:var(--s-champ-fond);color:var(--s-encre)}
.s-teinte{width:26px;height:26px;border-radius:999px}
.s-teinte--pinede{background:#2F5233}.s-teinte--lagune{background:#17605F}.s-teinte--terracotta{background:#9A4A21}
.s-champ{height:48px;border-radius:12px;border:1.5px solid var(--s-encre);background:var(--s-champ-fond);padding:0 14px;font:400 17px var(--s-texte);color:var(--s-encre);width:100%}

/* Étapes */
.s-etapes{display:flex;flex-direction:column;gap:clamp(36px,5vw,72px);padding-bottom:clamp(56px,8vw,120px)}
.s-etape{display:flex;flex-wrap:wrap;gap:clamp(20px,4vw,64px);align-items:center}
.s-etape:nth-child(odd of .s-etape){flex-wrap:wrap-reverse;flex-direction:row-reverse}
.s-etape__texte{flex:1 1 420px;display:flex;flex-direction:column;gap:12px;min-width:0}
.s-etape__num{font:700 15px var(--s-titre);color:var(--s-cobalt-texte)}
.s-etape__texte p{margin:0;max-width:32em}
.s-etape__visuel{flex:1 1 420px;min-width:0;display:flex;justify-content:center}
.s-etape__visuel .s-photo{width:100%;aspect-ratio:4/3}
.s-encart{max-width:32em;padding:14px 16px;border-radius:14px;background:var(--s-papier-2)}

/* Référence */
.s-ref__photo{height:clamp(260px,42vw,600px);background:var(--s-papier-2)}
.s-ref__photo img{width:100%;height:100%;object-fit:cover}
.s-ref__boite{display:flex;justify-content:flex-end;padding-bottom:clamp(56px,8vw,120px)}
.s-ref__carte{margin-top:clamp(-140px,-9vw,-48px);position:relative;flex:0 1 560px;background:var(--s-ticket);border-radius:20px;padding:clamp(20px,3vw,36px);box-shadow:0 24px 50px -28px rgb(29 26 22 / .45);display:flex;flex-direction:column;gap:14px}
.s-ref__carte p{margin:0}
.s-ref__carte .s-h2{font-size:clamp(28px,3.4vw,44px)}

/* L'addition */
/* Métiers : le bloc de l'accueil qui mène aux pages par métier, et ces pages (bin/pages-metiers.py). */
.s-metiers{display:flex;flex-direction:column;gap:clamp(20px,3vw,32px);padding-bottom:clamp(56px,8vw,120px)}
.s-metiers__liste{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:14px}
.s-metiers__liste a{display:flex;flex-direction:column;gap:6px;padding:20px 22px;border-radius:18px;border:1.5px solid var(--s-filet);background:var(--s-ticket);color:var(--s-encre);text-decoration:none;font-weight:400;transition:border-color .2s,transform .2s}
.s-metiers__liste a:hover{border-color:var(--s-encre);transform:translateY(-2px)}
.s-metiers__liste b{font:700 22px/1.15 var(--s-titre)}
.s-metiers__liste span{font-size:15px;line-height:1.4;color:var(--s-encre-2)}
.s-metier{display:flex;flex-direction:column;gap:clamp(20px,3vw,32px);padding-block:clamp(48px,7vw,104px)}
.s-metier__liste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:clamp(14px,2vw,22px)}
.s-metier__liste li{display:flex;flex-direction:column;gap:12px;padding:20px 22px;border-radius:18px;border:1.5px solid var(--s-filet);background:var(--s-ticket);line-height:1.45;color:var(--s-encre-2)}
.s-metier__liste b{font:700 20px/1.2 var(--s-titre);color:var(--s-encre)}
/* Chaque rubrique porte le pictogramme de l'app (lu dans SvgIcon.php par le générateur) et un extrait de ce qu'elle affiche, en papier comme le téléphone de démonstration. */
.s-metier__tete{display:flex;align-items:center;gap:14px}
.s-metier__picto{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:14px;border:1.5px solid var(--s-cobalt-texte);color:var(--s-cobalt-texte)}
.s-metier__svg{width:24px;height:24px}
.s-metier__texte{flex:1}
.s-metier__exemple{display:flex;flex-direction:column;gap:7px;padding-top:14px;border-top:1.5px dashed var(--s-pointille)}
.s-metier__dans{font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--s-gris)}
.s-metier__ligne{display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:12px;background:var(--s-champ-fond);border:1px solid var(--s-filet);color:var(--s-encre);font-size:15px;font-weight:700;line-height:1.3;box-shadow:0 8px 16px -12px rgb(0 0 0 / .4)}
.s-metier__ligne .s-metier__svg{flex:none;width:20px;height:20px;color:var(--s-cobalt-texte)}
.s-metier__geste{margin:0;max-width:40em;font-size:clamp(17px,1.6vw,20px);color:var(--s-encre-2)}
.s-tarif-court{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px;padding-block:clamp(40px,6vw,88px);border-top:1.5px solid var(--s-filet)}
.s-tarif-court>div{display:flex;flex-direction:column;gap:12px;max-width:40em}
@media (prefers-reduced-motion: reduce){.s-metiers__liste a{transition:none}.s-metiers__liste a:hover{transform:none}}

/* Côté gérant : les vrais écrans de l'espace gérant, en cadre de téléphone ; en défilement horizontal sur téléphone. */
.s-gerant{padding-bottom:clamp(56px,8vw,120px)}
.s-gerant__tete{max-width:46em;display:flex;flex-direction:column;gap:14px;margin-bottom:clamp(28px,4vw,48px)}
.s-gerant__ecrans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,32px);align-items:start}
.s-gerant__ecran{margin:0;display:flex;flex-direction:column;gap:14px}
.s-gerant__cadre{border-radius:26px;overflow:hidden;border:7px solid var(--s-nuit);background:var(--s-papier-2);box-shadow:0 24px 50px -28px rgb(29 26 22 / .45)}
.s-gerant__cadre img{width:100%;height:auto}
.s-gerant__ecran figcaption{font-size:16px;line-height:1.45;color:var(--s-encre-2);max-width:24em}
.s-gerant__ecran figcaption b{display:block;margin-bottom:4px;color:var(--s-encre);font:700 20px/1.2 var(--s-titre)}
@media (max-width:820px){
  .s-gerant__ecrans{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(76vw,300px);overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(-1 * var(--s-marge));padding:0 var(--s-marge) 14px;scroll-padding-inline:var(--s-marge)}
  .s-gerant__ecran{scroll-snap-align:start}
}
.s-addition{background:var(--s-papier-2)}
.s-addition__boite{display:flex;flex-wrap:wrap;gap:clamp(32px,5vw,80px);align-items:flex-start;padding-block:clamp(56px,8vw,120px)}
.s-addition__texte{flex:1 1 440px;display:flex;flex-direction:column;gap:18px;min-width:0}
.s-addition__phrase{margin:0;font-size:clamp(19px,2vw,26px);line-height:1.35;max-width:22em}
.s-bascule{display:inline-flex;align-self:flex-start;padding:4px;border-radius:999px;background:var(--s-ticket);border:1.5px solid var(--s-filet);gap:4px}
.s-bascule input{position:absolute;opacity:0}
.s-bascule label{min-height:44px;display:flex;align-items:center;padding:0 20px;border-radius:999px;font-weight:700;cursor:pointer}
.s-bascule input:checked+label{background:var(--s-encre);color:var(--s-papier)}
.s-bascule input:focus-visible+label{outline:3px solid var(--s-cobalt-texte)}
.s-ticket{flex:1 1 420px;max-width:480px;background:var(--s-ticket);border-radius:6px;padding:clamp(22px,3vw,36px);box-shadow:0 24px 50px -30px rgb(29 26 22 / .45);display:flex;flex-direction:column;gap:4px}
.s-ticket__marque{text-align:center;font:700 24px var(--s-titre)}
.s-ticket__sous{text-align:center;font-size:13px;letter-spacing:.07em;text-transform:uppercase;color:var(--s-gris);padding-bottom:14px;border-bottom:1.5px dashed var(--s-pointille)}
.s-ticket dl{margin:0}
.s-ticket dl div{display:flex;align-items:baseline;gap:8px;padding:9px 0;font-size:16px}
.s-ticket dl div::after{content:"";order:1;flex:1;min-width:12px;border-bottom:2px dotted var(--s-pointille);transform:translateY(-4px)}
.s-ticket dt{order:0}.s-ticket dd{order:2;margin:0;font-weight:700}
.s-ticket__total{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:14px 0 6px;border-top:2px solid var(--s-encre);margin-top:6px;font:700 20px var(--s-titre)}
.s-ticket__total b{font-size:clamp(24px,2.6vw,30px)}
.s-ticket__note{margin:0;font-size:15px;line-height:1.45;color:var(--s-encre-2)}
.s-ticket__engagement{margin:12px 0 0;padding:12px 14px;border:1.5px solid var(--s-encre);border-radius:10px;font-weight:700;font-size:16px}
.s-ticket .s-bouton{margin-top:16px}
/* Bascule mois / année sans script : :has() ; sans prise en charge, le mensuel reste affiché et l'annuel est dit dans la note */
.s-annuel{display:none}
.s-addition:has(#facture-annuel:checked) .s-annuel{display:revert}
.s-addition:has(#facture-annuel:checked) .s-mensuel{display:none}

/* Questions */
.s-questions{display:flex;flex-wrap:wrap;gap:clamp(24px,5vw,80px);align-items:flex-start;padding-block:clamp(56px,8vw,120px)}
.s-questions .s-h2{flex:1 1 320px}
.s-faq{flex:2 1 520px;min-width:0;border-top:2px solid var(--s-encre)}
.s-faq details{border-bottom:1.5px solid var(--s-filet)}
.s-faq summary{min-height:60px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;cursor:pointer;list-style:none;font:italic 400 clamp(17px,1.6vw,20px)/1.35 var(--s-texte)}
.s-faq summary::-webkit-details-marker{display:none}
.s-faq summary::after{content:"+";flex:none;width:32px;height:32px;border-radius:999px;border:1.5px solid var(--s-encre);display:grid;place-items:center;font:700 18px/1 system-ui}
.s-faq details[open] summary::after{content:"−"}
.s-faq p{margin:0;padding:0 48px 18px 0;color:var(--s-encre-2)}

/* Contact */
.s-contact{background:var(--s-nuit);color:var(--s-nuit-papier)}
.s-contact a{color:var(--s-nuit-papier)}
.s-contact__boite{max-width:var(--s-large);margin:0 auto;display:flex;flex-wrap:wrap-reverse}
.s-contact__texte{flex:1 1 480px;padding:clamp(48px,7vw,104px) var(--s-marge);display:flex;flex-direction:column;gap:18px;min-width:0}
.s-contact__texte p{margin:0;max-width:30em;color:var(--s-nuit-texte)}
.s-contact__tel{font:700 clamp(30px,3.6vw,44px)/1 var(--s-titre);text-decoration:none;min-height:44px;display:flex;align-items:center}
.s-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;max-width:560px}
.s-form label{display:flex;flex-direction:column;gap:6px;font-weight:700;font-size:15px}
.s-form .s-large{grid-column:1/-1}
.s-form input,.s-form select,.s-form textarea{min-height:48px;border-radius:12px;border:0;background:var(--s-ticket);padding:0 14px;font:400 17px var(--s-texte);color:var(--s-encre)}
.s-form textarea{padding-block:12px;resize:vertical}
.s-form small{font-weight:400}
.s-contact .s-bouton{align-self:flex-start;background:var(--s-papier);color:var(--s-encre)}
.s-contact .s-bouton:hover{background:#FFFFFF;color:#1D1A16}
.s-contact__photo{flex:1 1 380px;min-height:clamp(240px,36vw,620px);background:#2C2822}
.s-contact__photo img{width:100%;height:100%;object-fit:cover}

/* Pied */
.s-pied{display:flex;flex-direction:column;gap:16px;padding-block:40px 48px}
.s-pied__devise{font-style:italic;font-size:19px;margin:0}
.s-pied nav{display:flex;flex-wrap:wrap;gap:0 20px}
.s-pied nav a{min-height:44px;display:flex;align-items:center;font-size:15px}

/* Pages légales et satellites : même feuille */
.s-texte-long{max-width:720px;margin:0 auto;padding:clamp(32px,6vw,80px) var(--s-marge)}
.s-texte-long h1{font:700 clamp(32px,4.2vw,52px)/1.05 var(--s-titre);margin:0 0 16px}
.s-texte-long h2{font:700 24px/1.2 var(--s-titre);margin:40px 0 10px}

/* Aucun élément n'est caché en attendant une animation ; le mouvement est un bonus */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .s-etape__visuel{animation:s-monte linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
    @keyframes s-monte{from{transform:translateY(24px)}to{transform:none}}
  }
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.s-nu{border:0;margin:0;padding:0}
/* Téléphone de démonstration : mêmes variables --sn-* que l'app, réglées par les boutons radio */
.s-demo{--sn-primary:#17605F;--sn-primary-soft:#DDEBE8;--sn-primary-ink:#17605F;--sn-on-primary:#FFFFFF;--sn-bg:#FAF5EC;--sn-surface:#FFFFFF;--sn-text:#1A2222;--sn-muted:#4F5858;--sn-border:#E2DACB;--sn-drapeau:#1E7A3C}
.s-demo:has(#t-pinede:checked){--sn-primary:#2F5233;--sn-primary-soft:#E4EBE1;--sn-primary-ink:#2F5233;--sn-bg:#F7F6EE;--sn-text:#1C211B;--sn-muted:#535A51;--sn-border:#DCDCCF}
.s-demo:has(#t-terracotta:checked){--sn-primary:#9A4A21;--sn-primary-soft:#F4E3D7;--sn-primary-ink:#9A4A21;--sn-bg:#FDF6EF;--sn-text:#2A1D16;--sn-muted:#5D4F47;--sn-border:#EADACB}
/* Une activité à la fois dans le téléphone de démonstration (CSS seul, sans script). */
.s-demo:not(:has(#a-restaurant:checked)) .s-pour-restaurant,.s-demo:not(:has(#a-hotel:checked)) .s-pour-hotel,.s-demo:not(:has(#a-camping:checked)) .s-pour-camping{display:none}
.s-telephone{background:var(--sn-bg);color:var(--sn-text);transition:background-color .2s}
.s-demo__tete{background:var(--sn-primary);color:var(--sn-on-primary);padding:22px 16px 40px}
.s-demo__nom{margin:0;font:400 26px/1.05 "Young Serif",Georgia,serif;overflow-wrap:anywhere}
.s-demo__lieu{margin:4px 0 0;font-size:14px}
.s-demo__jour{margin:-22px 10px 22px;position:relative;background:var(--sn-surface);border-radius:16px;padding:12px 14px;box-shadow:0 8px 20px -10px rgb(0 0 0 / .3);display:flex;flex-direction:column;gap:10px;min-height:14.2em}
.s-demo__jourtete{display:flex;justify-content:space-between;align-items:baseline}
.s-demo__jourtete b{font:400 18px "Young Serif",Georgia,serif}
.s-demo__jourtete span,.s-demo__detail{font-size:13px;color:var(--sn-muted)}
.s-demo__ligne{display:flex;gap:12px;align-items:center;border-top:1px solid var(--sn-border);padding-top:10px}
.s-demo__ligne b{display:block;font-size:16px}
.s-demo__drapeau{width:34px;height:38px;flex:none}
.s-demo__drapeau rect{fill:var(--sn-text)}
.s-demo__drapeau path{fill:var(--sn-drapeau);stroke:var(--sn-text);stroke-width:3}
.s-demo__heure{font-size:13px;font-weight:700;color:var(--sn-primary-ink)}
.s-demo__pastille{width:34px;height:34px;border-radius:10px;background:var(--sn-primary-soft);color:var(--sn-primary-ink);display:grid;place-items:center;flex:none}
.s-demo__pastille svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
@media (prefers-reduced-motion:reduce){.s-telephone{transition:none}}
/* Hauteur du bloc « Aujourd'hui » tenue à celle du restaurant, la plus haute : sans elle, les réglages sautaient à chaque changement d'activité. */
/* Mode vitrine de la démo (accueil.js) : l'appui joué sur un réglage, et les lignes du téléphone qui entrent à chaque changement d'activité. Rien n'est caché hors de l'animation. */
@media (prefers-reduced-motion:no-preference){
  .s-choix label.is-touche{animation:s-appui .65s ease-out}
  .s-demo__ligne{animation:s-ligne .45s ease-out both}
  .s-champ.is-auto{border-color:var(--s-cobalt-texte);box-shadow:0 0 0 1.5px var(--s-cobalt-texte)}
}
@keyframes s-appui{0%{transform:scale(1);box-shadow:0 0 0 0 var(--s-cobalt-texte)}35%{transform:scale(.94)}100%{transform:scale(1);box-shadow:0 0 0 12px transparent}}
@keyframes s-ligne{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Compléments d'intégration (10/10/2026) */
.s-evitement{position:absolute;left:-9999px;top:8px;z-index:50;padding:10px 16px;border-radius:10px;background:var(--s-encre);color:var(--s-papier)}
.s-evitement:focus{left:8px;color:var(--s-papier)}
picture{display:contents}
.s-piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.contact__statut{margin:0;font-weight:700}
.contact__statut:empty{display:none}
.contact__statut.est-erreur{color:#FFB4A8}
.s-photo--haut img{object-position:top}

/* Comparatifs et migration (bin/pages-comparatifs.py, 13/10/2026). Tableau lisible sans couleur : chaque valeur est écrite
   (« Oui », « Non », « Non précisé »). Au téléphone, chaque ligne devient une carte dont chaque cellule porte son en-tête (data-th) : aucun défilement horizontal. */
.s-compare{display:flex;flex-direction:column;gap:clamp(18px,2.6vw,28px);padding-block:clamp(40px,6vw,88px)}
.s-compare+.s-compare{padding-top:0}
.s-compare__intro{margin:0;max-width:46em;font-size:clamp(17px,1.6vw,20px);color:var(--s-encre-2)}
.s-compare .s-encart{max-width:46em}
.s-compare .s-encart p{margin:0}
.s-compare__moi ul{margin:10px 0 0;padding-left:1.2em}
.s-tableau{width:100%;border-collapse:separate;border-spacing:0;background:var(--s-ticket);border:1.5px solid var(--s-filet);border-radius:18px;overflow:hidden;font-size:15px;line-height:1.45;color:var(--s-encre-2)}
.s-tableau caption{caption-side:top;text-align:left;padding:0 0 12px;font-size:15px;font-weight:700;color:var(--s-encre)}
.s-tableau th,.s-tableau td{padding:14px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--s-filet)}
.s-tableau tbody tr:last-child>*{border-bottom:0}
.s-tableau thead th{background:var(--s-papier-2);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--s-encre)}
.s-tableau tbody th{font:700 18px/1.2 var(--s-titre);color:var(--s-encre)}
.s-tableau tbody th .s-tampon{display:inline-block;margin-top:6px;font-family:var(--s-texte);color:var(--s-cobalt-texte)}
.s-tableau__nom{display:block}
.s-tableau--calcul td:last-child{font-weight:700;color:var(--s-encre)}
@media (max-width:900px){
  .s-tableau,.s-tableau tbody,.s-tableau tr,.s-tableau th,.s-tableau td{display:block}
  .s-tableau{background:none;border:0;border-radius:0;overflow:visible}
  .s-tableau caption{display:block}
  .s-tableau thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .s-tableau tbody{display:flex;flex-direction:column;gap:14px}
  .s-tableau tr{padding:6px 18px;border:1.5px solid var(--s-filet);border-radius:18px;background:var(--s-ticket)}
  .s-tableau tbody th{padding:14px 0 10px}
  .s-tableau td{display:grid;grid-template-columns:minmax(0,9.5em) minmax(0,1fr);gap:12px;padding:10px 0}
  .s-tableau td::before{content:attr(data-th);font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--s-gris)}
  .s-tableau tbody tr:last-child>*{border-bottom:1px solid var(--s-filet)}
  .s-tableau tbody tr>:last-child{border-bottom:0}
}
@media (max-width:520px){.s-tableau td{grid-template-columns:none;gap:3px}}
.s-mention{margin:0;max-width:52em;font-size:14px;line-height:1.5;color:var(--s-gris)}
.s-sources{max-width:60em;font-size:14px;line-height:1.5;color:var(--s-gris)}
.s-sources p{margin:0}
.s-sources ul{margin:6px 0 0;padding-left:1.2em}
.s-sources a{font-weight:400;color:var(--s-gris);overflow-wrap:anywhere}
.s-pourquoi{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:clamp(16px,2.4vw,28px)}
.s-pourquoi__carte{display:flex;flex-direction:column;gap:12px;padding:clamp(20px,3vw,32px);border-radius:18px;border:1.5px solid var(--s-encre);background:var(--s-ticket)}
.s-pourquoi__carte--autre{border-style:dashed;border-color:var(--s-pointille);background:none}
.s-pourquoi__carte ul{margin:0;padding-left:1.2em;display:flex;flex-direction:column;gap:10px;color:var(--s-encre-2)}
.s-pas{list-style:none;margin:0;padding:0;counter-reset:pas;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:clamp(14px,2vw,22px)}
.s-pas li{counter-increment:pas;display:flex;flex-direction:column;gap:8px;padding:20px 22px;border-radius:18px;border:1.5px solid var(--s-filet);background:var(--s-ticket);color:var(--s-encre-2);line-height:1.45}
.s-pas li::before{content:"Étape " counter(pas);font:700 15px var(--s-titre);color:var(--s-cobalt-texte)}
.s-pas b{font:700 20px/1.2 var(--s-titre);color:var(--s-encre)}
.s-heros+.s-compare{padding-top:0}
.s-compare>ul:not([class]){margin:0;padding-left:1.2em;max-width:46em;display:flex;flex-direction:column;gap:10px;font-size:clamp(17px,1.5vw,19px);color:var(--s-encre-2)}

/* Pages métier, au téléphone : « Créer mon app / Appeler » en bas, une fois le bouton du premier écran dépassé
   (barre-bas.js). Reprise de la barre de l'accueil. Cachée tant que la bannière des cookies est ouverte. */
.s-barre-bas{position:fixed;z-index:20;left:0;right:0;bottom:0;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:8px;padding:8px var(--s-marge) max(8px,env(safe-area-inset-bottom));background:var(--s-papier);border-top:1.5px solid var(--s-filet);box-shadow:0 -8px 20px -16px rgb(29 26 22 / .5);transform:translateY(110%);visibility:hidden;transition:transform .26s cubic-bezier(.16,1,.3,1),visibility 0s linear .26s}
.s-barre-bas[hidden]{display:none}
.s-barre-bas.est-visible{transform:none;visibility:visible;transition:transform .26s cubic-bezier(.16,1,.3,1),visibility 0s}
html.sn-cookies-ouverte .s-barre-bas{transform:translateY(110%);visibility:hidden}
.s-barre-bas .s-bouton{min-height:48px;padding:0 16px;gap:8px}
.s-barre-bas svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:767.98px){.s-avec-barre .s-pied{padding-bottom:calc(48px + 72px)}}
@media (min-width:768px){.s-barre-bas{display:none}}
@media (prefers-reduced-motion:reduce){.s-barre-bas,.s-barre-bas.est-visible{transition:none}}

/* Promesse de l'annonce sous le titre du héros (style du chapo, plus petit), note courte sous les autres boutons
   « Créer mon app », ligne des saisonniers près du prix. Au téléphone, le premier écran laisse le bouton du héros
   au-dessus de la bannière des cookies : la ligne des métiers de l'en-tête et le surtitre ne s'affichent qu'à partir de 768 px (pages métier seules, classe s-avec-barre). */
.s-promesse{margin:0;font-size:clamp(15px,1.3vw,17px);line-height:1.45;color:var(--s-encre-2);max-width:34em;text-wrap:pretty}
.s-tarif-court__action{display:flex;flex-direction:column;gap:8px}
.s-note-bouton{margin:0;font-size:14px;line-height:1.4;color:var(--s-gris)}
.s-saisonnier{margin:0;font-size:clamp(16px,1.5vw,18px);line-height:1.45;color:var(--s-encre-2)}
@media (max-width:767.98px){.s-avec-barre .s-tete .s-nav,.s-avec-barre .s-heros .s-surtitre{display:none}}