/* ══════════════ SILON — VERSION TÉLÉPHONE ══════════════
   Chargée uniquement sous 760 px (attribut media du <link>, voir commun.py).
   La version ordinateur ne lit jamais ce fichier : rien ici ne peut la casser.

   Principes retenus, 15 septembre 2026 (skill mobile-app-ui-design, articles
   de réussir-en.fr, Hostinger et Webyn, triés par Valentin et Claude) :
   · un site, pas une appli : navigation dans un menu en haut à droite
   · un seul bouton principal par écran
   · texte courant à 16 px, secondaire à 14 px, étiquettes à 12 px
   · cibles tactiles d'au moins 44 px, 48 px pour les boutons
   · pas de tableau à plusieurs colonnes : le comparatif passe en onglets
   · formulaires : 16 px dans les champs (pas de zoom iOS), bon clavier
   · espacements sur une grille de 4 et 8 px
   Écartés : AMP (Google ne le favorise plus), test Mobile-Friendly (retiré
   par Google fin 2023, remplacé par Lighthouse), Tailwind et Lucide (le site
   est statique, la CSP n'admet que ses propres fichiers), barre de recherche,
   carrousel de produits hors formules, favoris. */

html{scroll-padding-top:64px;-webkit-text-size-adjust:100%}
body{-webkit-tap-highlight-color:transparent}

/* ── Barre du haut : logo et compte, la navigation descend sous le pouce ── */
.bar{position:fixed;height:54px;padding:0 16px}
.bar-burger,.bar-nav{display:none!important}
.logo{font-size:20px}
.bar-compte{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;font-size:14px;font-weight:500}
.bar.dark .bar-compte{color:var(--t4)}
.bar.light .bar-compte{color:var(--t2)}

/* ── Menu en haut à droite, à côté du compte ── */
.bar-compte{margin-left:auto}
.bar-menu{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin:0 -8px 0 4px;
  border:0;border-radius:10px;background:transparent;cursor:pointer}
.bar.dark .bar-menu{color:var(--l0)}
.bar.light .bar-menu{color:var(--t0)}
.bar-menu svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.bar-menu .i-fermer{display:none}
.bar-menu[aria-expanded="true"] .i-ouvrir{display:none}
.bar-menu[aria-expanded="true"] .i-fermer{display:block}
.bar-menu:focus-visible{outline:2px solid var(--g-inv);outline-offset:2px}
.menu-mob{display:none;position:fixed;top:54px;left:0;right:0;z-index:890;padding:4px 20px 12px;
  background:var(--l0);border-bottom:1px solid var(--l3);box-shadow:0 16px 32px rgba(11,21,36,.14)}
.menu-mob.ouvert{display:block;animation:menu-in .18s ease-out}
@keyframes menu-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.menu-mob-l{display:flex;align-items:center;justify-content:space-between;min-height:56px;border-bottom:1px solid var(--l2);
  font-size:17px;font-weight:500;color:var(--t0)}
.menu-mob-l::after{content:'\203A';font-size:24px;line-height:1;color:var(--t3)}
.menu-mob-l:last-child{border-bottom:0}
.menu-mob-l--devis{color:var(--g1);font-weight:600}
.menu-mob-l:focus-visible{outline:2px solid var(--g1);outline-offset:-2px}
.sticky-cta{display:none!important}

/* Le pied de page passe au-dessus de la barre d'onglets */
.ft{padding:32px 20px calc(32px + env(safe-area-inset-bottom));flex-direction:column;align-items:flex-start;gap:16px}
.ft-logo{font-size:20px}
.ft-links{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;width:100%}
.ft-links a{display:flex;align-items:center;min-height:44px;font-size:14px;color:var(--t4);opacity:1}

/* Bandeau cookies : en bas, jamais en plein écran */
#cookie-banner{padding:16px 20px calc(16px + env(safe-area-inset-bottom));z-index:940;border-top:1px solid var(--l3)}
#cookie-banner .cb-in{gap:12px}
#cookie-banner p{font-size:13px;line-height:1.5}
#cookie-banner .cb-acts{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
#cookie-banner .cb-acts button{min-height:44px;padding:10px 12px;font-size:14px}

/* ── Rythme général ── */
section.sl,section.sl2,section.sd,section.sd2,.testi{padding:56px 20px}
.si.center{text-align:left}
.si.center .ss{margin:0}
.se{font-size:11px;margin-bottom:12px;justify-content:flex-start!important}
.st{font-size:32px;line-height:1.12;margin-bottom:12px}
.ss{font-size:16px;line-height:1.6;margin-bottom:32px}
.btn-g,.btn-oo{min-height:48px}

/* ── Accueil : le haut de page ── */
.hero{padding:80px 20px 40px;min-height:0}
.hero-inner{gap:32px}
.hero-label{margin-bottom:16px}
.hero h1{font-size:42px;line-height:1.08;margin-bottom:20px}
.hero-social{gap:12px;margin-bottom:20px}
.hs-av{width:32px;height:32px;font-size:11px}
.hs-txt{font-size:14px}
.hero-desc{font-size:17px;line-height:1.55;margin-bottom:20px}
.hero-proof{margin-bottom:24px;gap:8px}
.hero-proof .hp-row + .hp-row{display:none}
.hp-row{flex-direction:column;gap:8px}
.hp{font-size:15px;color:var(--t4)}
.hero-acts{flex-direction:column}
.hero-acts .btn-oo,.hero-acts .btn-g:not(.mob-voir){display:none}
.hero-acts .mob-voir{display:flex;align-items:center;justify-content:center;width:100%;min-height:52px;padding:16px 20px;font-size:16px}

/* Accueil : la méthode et les formules partent sur trois-formules.html ;
   la carte des tarifs n'est pas affichée sur téléphone */
.hero-aside,.hero ~ #s-methode,.hero ~ #s-pricing{display:none}
.price-card-dark{animation:none;min-width:0;padding:24px 16px 20px;border-radius:16px}
.pcd-stat{margin-bottom:16px;padding-bottom:16px}
.pcd-tiers{gap:8px;margin-bottom:16px}
.pcd-tier{min-height:64px;padding:12px 16px}
.pcd-tier-tag{font-size:12px;color:var(--t4)}
.pcd-foot{font-size:13px;padding-top:16px}

/* Chiffres clés en deux colonnes */
.stats-bar{padding:24px 20px}
.stats-inner{display:grid;grid-template-columns:1fr 1fr;gap:20px 16px}
.stat-sep{display:none}
.stat-item{font-size:14px;align-items:flex-start}
.stat-num{font-size:32px;margin-bottom:4px}

/* Point de départ */
.cg{gap:12px}
.cc{padding:24px 20px}
.cc-ul li{font-size:15px}

/* Méthode : une frise verticale, tout le texte reste visible */
.bg{display:block;position:relative;background:none;border:0;border-radius:0;overflow:visible}
.bg::before{content:'';position:absolute;left:19px;top:20px;bottom:44px;width:1px;background:var(--l3)}
.bc{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:16px;padding:0 0 24px;background:none}
.bc:hover{background:none}
.bc-ic{grid-row:1 / span 2;position:relative;z-index:1;display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;margin:0;border:1px solid var(--l3);border-radius:50%;background:var(--l0);font-size:16px}
.bc-t{font-size:17px;margin:8px 0 4px}
.bc-d{font-size:15px;line-height:1.55}

/* Engagements */
.testi-grid{margin-top:32px;gap:12px}
.tc-card{padding:24px 20px;gap:12px}
.gc-t{font-size:22px}
.gc-d{font-size:15px;line-height:1.6}

/* ── Les trois formules : on fait glisser, un sélecteur suit ── */
.fm-premiere{padding-top:88px}
.pg-seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:4px;margin:0 0 4px;background:var(--l2);border-radius:12px}
.pg-seg button{min-height:44px;border:0;border-radius:9px;background:transparent;color:var(--t2);font:600 14px/1 'Inter',sans-serif;transition:background .2s,color .2s}
.pg-seg button.on{background:var(--l0);color:var(--t0);box-shadow:0 1px 3px rgba(11,21,36,.12)}
.pg-seg button:focus-visible{outline:2px solid var(--g1);outline-offset:2px}
.pg{position:relative;display:flex;align-items:stretch;gap:12px;margin:0 -20px;padding:20px 28px 16px;
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.pg::-webkit-scrollbar{display:none}
.pc{flex:0 0 calc(100vw - 56px);padding:28px 20px 20px;scroll-snap-align:center}
.pc.star{transform:none}
.pc-tag{font-size:14px;margin-bottom:16px}
.pc-price{font-size:52px}
.pc-once{font-size:13px;line-height:1.5;margin-bottom:20px}
.pc-ul{gap:10px;margin-bottom:20px;padding-bottom:20px}
.pc-ul li{font-size:15px;line-height:1.45}
.btn-pc{display:block;text-align:center;min-height:50px;padding:15px}
.pc-note{font-size:12px}
/* Sur la carte sombre, l'échéancier et la note étaient à 50 % d'opacité : illisibles au soleil */
.pc.star .pc-once,.pc.star .pc-note{color:var(--t4);opacity:1}
.cta-note{font-size:13px;color:var(--t4);opacity:1}
#s-pricing .foot-note{font-size:14px;line-height:1.6;margin-top:24px!important}
/* Le lien vers le comparatif devient un vrai bouton, comme « Demander un devis » */
#s-pricing .foot-note a[href="formules.html"]{display:flex;align-items:center;justify-content:center;width:100%;min-height:52px;
  margin-top:16px;padding:14px 20px;border-radius:var(--r3);background:var(--g1);color:var(--l0)!important;
  font-size:16px;font-weight:600;text-decoration:none!important;transition:background .2s}
#s-pricing .foot-note a[href="formules.html"]:active{background:var(--g2)}
#s-pricing .foot-note a[href="formules.html"]:focus-visible{outline:2px solid var(--g1);outline-offset:3px}

/* Questions */
.faq{border-radius:12px}
.faq-q{min-height:56px;padding:16px 20px;font-size:16px;line-height:1.4}
.faq-a{padding:0 20px 20px;font-size:15px;line-height:1.65}

/* Dernier appel */
.ctaf .se{justify-content:center!important}
.cta-s .btn-g{display:flex;align-items:center;justify-content:center;width:100%;padding:16px 20px!important;font-size:16px!important}

/* ── Formules : le comparatif devient des onglets ── */
.fp-head{padding:80px 20px 40px}
.fp-head .st{font-size:34px;margin:0 0 12px}
.fp-lead{font-size:16px;margin:0}
.fp-cmp-wrap{margin:24px 0 0;padding:0;overflow:visible}
.fp-cmp{display:block;min-width:0;table-layout:auto}
.fp-cmp colgroup{display:none}
.fp-cmp thead{display:contents}
.fp-cmp tbody,.fp-cmp tr,.fp-cmp th,.fp-cmp td{display:block}

.fp-cmp .fp-noms{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:4px;
  position:sticky;top:62px;z-index:5;background:var(--l1);border-radius:14px;box-shadow:0 0 0 8px var(--l0)}
.fp-cmp .fp-noms th.fp-coin{display:none}
.fp-cmp .fp-noms th{position:static;top:auto;left:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:56px;padding:8px 4px;border:0;border-radius:10px;background:transparent;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;cursor:pointer;transition:background .2s}
.fp-noms th:focus-visible{outline:2px solid var(--g1);outline-offset:2px}
.fp-nm{font-size:16px}
.fp-px{margin-top:4px;font-size:13px}
.fp-px small{font-size:10px}
.fp-cmp[data-plan="1"] .fp-noms th:nth-child(2),
.fp-cmp[data-plan="2"] .fp-noms th:nth-child(3),
.fp-cmp[data-plan="3"] .fp-noms th:nth-child(4){background:var(--l0);box-shadow:0 1px 3px rgba(11,21,36,.14)}

/* Seule la colonne choisie reste affichée */
.fp-cmp[data-plan="1"] tr > td:not(:nth-child(2)),
.fp-cmp[data-plan="2"] tr > td:not(:nth-child(3)),
.fp-cmp[data-plan="3"] tr > td:not(:nth-child(4)){display:none}

.fp-cmp .fp-details td{padding:24px 0 8px;border:0;text-align:left}
.fp-pop{margin:0 0 12px}
.fp-pop--vide{display:none}
.fp-dur{font-size:14px;margin-bottom:8px}
.fp-pitch{max-width:none;margin:0 0 16px;font-size:16px;line-height:1.55}
.fp-btn{display:flex;align-items:center;justify-content:center;min-height:50px;padding:14px 20px;font-size:15px}

.fp-cmp tr.g th{padding:32px 0 8px;font-size:19px}
.fp-cmp tr.g th span{position:static}
.fp-cmp tbody tr:not(.g){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:16px;
  padding:14px 0;border-bottom:1px solid var(--l2)}
.fp-cmp tbody tr:not(.g) th,.fp-cmp tbody td{position:static;padding:0;border:0;background:none;box-shadow:none;font-size:15px;line-height:1.45}
.fp-cmp tbody tr:not(.g) th{font-weight:400;color:var(--t2)}
.fp-cmp tbody td{text-align:right;font-weight:500;color:var(--t0)}
.fp-cmp tbody tr:not(.g):hover th,.fp-cmp tbody tr:not(.g):hover td{background:none}
.fp-cmp-note{font-size:14px}

/* ── Demander un devis : le formulaire monte, les repères se resserrent ── */
.dv{padding:80px 20px 48px}
.dv-in{display:flex;flex-direction:column;gap:0}
.dv-txt{display:contents}
.dv-txt .se{order:1}
.dv-txt h1{order:2;font-size:36px;margin-bottom:12px}
.dv-lead{order:3;font-size:16px;margin-bottom:24px}
/* Les trois repères : une liste groupée à la manière d'iOS. Un seul bloc
   arrondi, la valeur à gauche, le titre et sa phrase à droite, un filet fin
   qui part de la colonne de texte. */
.dv-facts{order:4;display:block;margin:0 0 24px;padding:0;border:0;border-radius:16px;background:var(--l0);
  box-shadow:0 1px 2px rgba(11,21,36,.06);overflow:hidden}
.dv-facts li{position:relative;display:grid;grid-template-columns:72px minmax(0,1fr);column-gap:16px;align-items:center;
  padding:16px 20px;border:0}
.dv-facts li + li::before{content:'';position:absolute;top:0;left:108px;right:0;height:1px;background:var(--l2)}
.dv-facts .v{font-family:'Inter',system-ui,-apple-system,sans-serif;font-size:28px;font-weight:600;letter-spacing:-.02em;line-height:1;color:var(--t0)}
.dv-facts .v small{margin-left:3px;font-family:inherit;font-size:13px;font-weight:500;letter-spacing:0;color:var(--t2)}
.dv-facts .t{font-size:14px;line-height:1.4;color:var(--t2)}
.dv-facts .t b{display:block;margin-bottom:2px;font-size:16px;font-weight:600;color:var(--t0)}
.dv-form{order:5}
.dv-ask{order:6;padding-top:40px}
.dv-ask li{font-size:15px}
.dv-form .form-wrap{padding:24px 20px}
.dv-form h2{font-size:26px}
.dv-data{padding:48px 20px}
.dv-dl{grid-template-columns:1fr}

/* Champs : 16 px pour éviter le zoom automatique d'iOS, cibles de 48 px */
.field label{font-size:12px}
.field .hint,.field .err{font-size:14px}
.field input,.field select,.field textarea{min-height:48px;font-size:16px}
.field textarea{min-height:120px}
.field .check{font-size:15px}
.field .check input{width:22px;height:22px;margin-top:1px}
.btn-send{min-height:52px;font-size:16px}

/* Le moment qu'on retient : la demande est partie */
.form-ok{padding:28px 20px;text-align:left}
.form-ok b::before{content:'';display:block;width:48px;height:48px;margin-bottom:16px;border-radius:50%;
  background:var(--g1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/26px no-repeat;
  animation:ok-pop .45s cubic-bezier(.2,1.4,.4,1) both}
@keyframes ok-pop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}

/* ── Pages de lecture ── */
.hero[style]{padding:80px 20px 40px!important}
.legal{padding:80px 20px 48px}
.auth-grid{padding:80px 20px 48px}
.nf{padding:88px 20px 48px}
.nf h1{font-size:40px;line-height:1.1;margin-bottom:12px}
.nf .btn-row{flex-direction:column;margin-top:24px!important}
.nf .btn-row .btn-pc{display:flex!important;align-items:center;justify-content:center;width:100%!important;min-height:50px}

@media (prefers-reduced-motion:reduce){
  .pg-seg button,.fp-noms th{transition:none}
  .menu-mob.ouvert{animation:none}
  .pg{scroll-behavior:auto}
  .form-ok b::before{animation:none}
}