/* Polish / glow up (04/10) : autres pages de la vitrine et parcours membre. Chargé APRÈS les styles existants de la page. */

/* =====================================================================================
   COMMUN (toutes les pages qui chargent ce fichier)
   ===================================================================================== */
/* focus clavier : un seul anneau, partout le même */
:where(a,button,summary,select,[tabindex]):focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:6px}
/* interligne minimal des titres : les jambages (g, p, q, j) ne touchent jamais la ligne suivante (retour Yoann) */
body.membre h1{line-height:1.08!important}
body.membre h2{line-height:1.12!important}
body.membre h3{line-height:1.2!important}

/* =====================================================================================
   VITRINE (body.membre.apercu-appli)
   ===================================================================================== */
/* en-tête de page aligné sur le contenu des sections (avant : 54 px plus à gauche) */
body.apercu-appli .phead-in{max-width:calc(1180px - 2*var(--edge))}
body.apercu-appli .phead .sub{margin-top:26px!important}

/* en-têtes de section : toujours numéro au-dessus, libellé, titre (avant : en ligne ou empilé selon la longueur du titre) */
body.apercu-appli .sec-head{flex-direction:column;align-items:flex-start;gap:10px}
body.apercu-appli .sec-head .lbl{display:block;margin-bottom:10px}

/* cartes : même réaction au survol partout */
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  body.apercu-appli :is(.coach,.tcard,.wcard,.ev,.pesee-etapes li){transition:transform .2s ease,box-shadow .2s ease}
  body.apercu-appli :is(.coach,.tcard,.wcard,.ev,.pesee-etapes li):hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(60,45,20,.10)}
  html[data-theme="obscur"] body.apercu-appli :is(.coach,.tcard,.wcard,.ev,.pesee-etapes li):hover{box-shadow:0 10px 28px rgba(0,0,0,.45)}
}

/* Résultats : la grande carte (photo + texte) n'a plus un grand vide à droite */
@media(min-width:761px){
  body.apercu-appli .tcard.feat .tbody{justify-content:center!important;gap:16px!important;padding:clamp(28px,3.6vw,52px)!important}
  body.apercu-appli .tcard.feat .tnum{font-size:clamp(44px,5vw,68px)!important}
  body.apercu-appli .tcard.feat .tframe{font:800 clamp(22px,2.2vw,28px)/1.25 Arial,Helvetica,sans-serif!important;letter-spacing:-.02em;max-width:22ch}
  body.apercu-appli .tcard.feat .tfoot{margin-top:18px}
}
body.apercu-appli .tcard.feat .tphoto{border-right:0!important}

/* Formules : étapes de la pesée et cartes « accompagnement » = mêmes cartes blanches que le reste */
body.apercu-appli .pesee-etapes li,body.apercu-appli .evol .ev{background:var(--carte);border:0;border-radius:var(--a-r,24px);box-shadow:var(--ombre)}
body.apercu-appli .pesee-etapes li{padding:22px 22px 22px 72px}
body.apercu-appli .pesee-etapes b{font-weight:800;color:var(--a-encre)}
body.apercu-appli .evol .ev{padding:clamp(22px,2.6vw,30px)}
body.apercu-appli .evol .ev h3{font:800 21px/1.2 Arial,Helvetica,sans-serif!important;letter-spacing:-.025em!important;text-transform:none!important;color:var(--a-encre)!important}
body.apercu-appli .pesee-rythme{border:0;border-radius:18px;background:var(--carte);box-shadow:var(--ombre);padding:16px 20px;position:relative;padding-left:24px}
body.apercu-appli .pesee-rythme::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:4px;border-radius:0 4px 4px 0;background:var(--brand)}

/* pages légales : le haut de la carte respire comme le bas, l'encadré d'intro prend toute la largeur */
body.apercu-appli .legal>:first-child,body.apercu-appli .legal>[hidden]:first-child+*{margin-top:0!important}
body.apercu-appli .legal>:last-child{margin-bottom:0!important}
body.apercu-appli .legal .intro,body.apercu-appli .legal>.note:first-child{max-width:none}

/* 404 : le texte ne colle plus aux jambages du titre ; liens en pilules comme le menu */
body.apercu-appli .e404 h1{margin-top:22px!important}
body.apercu-appli .e404 p{margin:26px auto 30px!important}
body.apercu-appli .e404 .qlinks a{border:0;background:var(--pilule);color:var(--a-encre);font:700 14px/1 Arial,Helvetica,sans-serif;padding:12px 18px;transition:background .2s,color .2s}
body.apercu-appli .e404 .qlinks a:hover{background:var(--actif);color:var(--actif-t)}

/* Contact : même anneau de focus que le parcours membre */
body.apercu-appli .cform :is(input,select,textarea):focus{box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 18%,transparent)}
body.apercu-appli .cform :is(input,select,textarea){min-height:52px}

/* =====================================================================================
   PARCOURS MEMBRE (body.membre sans apercu-appli) : connexion, inscription, choisir,
   bienvenue, questionnaire, précautions, récap
   ===================================================================================== */
body.membre:not(.apercu-appli){--pm-r:16px}

/* ---------- titres de page ---------- */
body.membre:not(.apercu-appli) .auth-card{max-width:440px}
body.membre:not(.apercu-appli) .auth-card h1{font-size:clamp(38px,4.4vw,52px)!important;letter-spacing:-.04em!important;margin-bottom:0}
body.membre:not(.apercu-appli) :is(.auth-card,.chhead) h1 .l2,body.membre:not(.apercu-appli) .bv h1 span{color:var(--brand)}
body.membre:not(.apercu-appli) .auth-card .sub{margin:16px 0 30px;font-size:16.5px;line-height:1.6;color:var(--gris)}
body.membre:not(.apercu-appli) .qintro h1{font-size:clamp(38px,5.4vw,56px)!important;letter-spacing:-.04em!important;margin-bottom:16px}
body.membre:not(.apercu-appli) .qintro p{font-size:15.5px;line-height:1.65}
body.membre:not(.apercu-appli) .chhead h1{font-size:clamp(40px,6vw,68px)!important;letter-spacing:-.045em!important}
body.membre:not(.apercu-appli) .chhead .sub{font-style:normal;font-family:Arial,Helvetica,sans-serif;color:var(--gris);line-height:1.55}
body.membre:not(.apercu-appli) .rwrap h1{font-size:clamp(38px,5vw,56px)!important;letter-spacing:-.04em!important;margin-bottom:14px}
body.membre:not(.apercu-appli) .bv h1{font-size:clamp(38px,6vw,60px)!important;letter-spacing:-.04em!important}

/* ---------- champs : une seule famille (hauteur, arrondi, bordure, focus) ---------- */
body.membre:not(.apercu-appli) :is(.auth-form input,.auth-form select,.qfield input,.qfield select,.qfield textarea,.pick-in){
  min-height:52px;border-radius:var(--pm-r)!important;border:1.5px solid var(--line)!important;background-color:var(--carte)!important;color:var(--ice);
  font:16px/1.35 Arial,Helvetica,sans-serif!important;padding:14px 16px!important;transition:border-color .2s,box-shadow .2s}
body.membre:not(.apercu-appli) .qfield textarea{min-height:120px;line-height:1.55!important}
body.membre:not(.apercu-appli) :is(.auth-form input,.auth-form select,.qfield input,.qfield select,.qfield textarea,.pick-in):hover{border-color:color-mix(in srgb,var(--brand) 40%,var(--line))!important}
body.membre:not(.apercu-appli) :is(.auth-form input,.auth-form select,.qfield input,.qfield select,.qfield textarea,.pick-in):focus{
  outline:none;border-color:var(--brand)!important;box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 18%,transparent)}
body.membre:not(.apercu-appli) .auth-form select,body.membre:not(.apercu-appli) .qfield select{padding-right:40px!important}
html[data-theme="obscur"] body.membre:not(.apercu-appli) :is(.auth-form select,.auth-form input[type=date],.qfield select){color-scheme:dark}
body.membre:not(.apercu-appli) :is(.auth-form,.qfield) input::placeholder{color:color-mix(in srgb,var(--gris) 70%,transparent)}
/* libellés : même voix que le formulaire de contact (gras, casse normale) */
body.membre:not(.apercu-appli) :is(.auth-form label:not(.pcase),.qfield>label){font:700 13.5px/1.3 Arial,Helvetica,sans-serif;letter-spacing:0;text-transform:none;color:var(--ice);gap:8px}
body.membre:not(.apercu-appli) .auth-form{gap:18px}
body.membre:not(.apercu-appli) .auth-form .btn,body.membre:not(.apercu-appli) .qnav .btn{min-height:54px;border-radius:999px;font:800 16px/1 Arial,Helvetica,sans-serif;letter-spacing:-.01em}
body.membre:not(.apercu-appli) .auth-alt{font-size:15px;line-height:1.5}
body.membre:not(.apercu-appli) .auth-msg{border-radius:14px}
/* case à cocher + bouton secondaire « Je suis concerné(e) » */
body.membre:not(.apercu-appli) label.pcase{min-height:52px;border-radius:14px;background:var(--carte);border:1.5px solid var(--line);padding:10px 14px}
body.membre:not(.apercu-appli) label.pcase:has(input:checked){border-color:var(--brand);background:color-mix(in srgb,var(--brand) 10%,var(--carte))}
body.membre:not(.apercu-appli) .pconc{min-height:50px;border:0;background:var(--pilule);color:var(--ice);font:700 15px/1 Arial,Helvetica,sans-serif;transition:background .2s}
body.membre:not(.apercu-appli) .pconc:hover{background:color-mix(in srgb,var(--pilule) 70%,var(--line))}

/* ---------- cartes : blanches, sans bordure, ombre douce (comme l'espace membre) ---------- */
body.membre:not(.apercu-appli) :is(.precau,.rbloc,.chafter,.chopt){background:var(--carte)!important;border:0!important;border-radius:24px!important;box-shadow:var(--ombre)}
body.membre:not(.apercu-appli) :is(.chafter,.chopt)::before{display:none}
body.membre:not(.apercu-appli) .precau{padding:24px 22px}
body.membre:not(.apercu-appli) .precau h2{font-size:24px!important;line-height:1.15!important;letter-spacing:-.03em!important;margin-bottom:10px}
body.membre:not(.apercu-appli) .rbloc{padding:clamp(22px,3.4vw,36px)!important;margin-bottom:18px}
body.membre:not(.apercu-appli) .rbloc h2{font-size:clamp(24px,2.6vw,30px)!important;margin-bottom:12px}
body.membre:not(.apercu-appli) .rbloc h3{font-size:17px!important;color:var(--blue)!important;margin:26px 0 10px!important;letter-spacing:-.02em!important}
body.membre:not(.apercu-appli) .rbloc li{margin:6px 0}
body.membre:not(.apercu-appli) .rtete h2{margin-top:8px}
body.membre:not(.apercu-appli) .rprix{font-weight:800;letter-spacing:-.03em}
body.membre:not(.apercu-appli) .monter{border:0;border-radius:18px;padding:16px 18px}
body.membre:not(.apercu-appli) .monter a{border:0;font:700 14px/1 Arial,Helvetica,sans-serif;padding:12px 16px}
body.membre:not(.apercu-appli) .rbtns .btn,body.membre:not(.apercu-appli) .rbtns .autre{min-height:56px}
body.membre:not(.apercu-appli) .rbtns .autre{border:0;background:var(--pilule);font-weight:700}
body.membre:not(.apercu-appli) .rbtns .autre:hover{background:var(--actif);color:var(--actif-t)}
body.membre:not(.apercu-appli) .demo{border-radius:14px}
body.membre:not(.apercu-appli) .coche{line-height:1.55}

/* ---------- Choisir : couleurs écrites en dur -> variables (le mode obscur les lisait en noir sur noir) ---------- */
body.membre:not(.apercu-appli) :is(.pd .whom b,.chafter .reassure b,.chhead .sub){color:var(--ice)}
body.membre:not(.apercu-appli) :is(.pd li,.steps3 p){color:var(--gris)}
body.membre:not(.apercu-appli) .steps3 p{font-size:14px;line-height:1.6}
body.membre:not(.apercu-appli) .steps3 .sn{font-weight:800;letter-spacing:-.03em}
body.membre:not(.apercu-appli) .chafter .reassure{font-size:13.5px}
body.membre:not(.apercu-appli) .optlede{font-size:15px;color:var(--gris)}
body.membre:not(.apercu-appli) .chopt h2,body.membre:not(.apercu-appli) .chafter h2{margin-top:10px}
body.membre:not(.apercu-appli) .opt-choix{border:0;background:var(--pilule);min-height:48px;display:flex;align-items:center;justify-content:center;font:700 15px/1 Arial,Helvetica,sans-serif}

/* ---------- Bienvenue : pastille ronde et vraie coche ---------- */
body.membre:not(.apercu-appli) .bv .mark{border:0;border-radius:50%;background:var(--p-bleu);width:72px;height:72px}
body.membre:not(.apercu-appli) .bv .mark::before{width:13px;height:24px;background:none;border:solid var(--blue);border-width:0 3px 3px 0;transform:translateY(-3px) rotate(45deg)}
body.membre:not(.apercu-appli) .bv .mark::after{display:none}
body.membre:not(.apercu-appli) .bv .who{margin-top:16px}
body.membre:not(.apercu-appli) .bv .sub{font-size:16.5px;margin-bottom:28px}
body.membre:not(.apercu-appli) .steps{background:var(--carte);border:0;border-radius:24px;box-shadow:var(--ombre);padding:28px 28px 10px}
body.membre:not(.apercu-appli) .steps li{font-size:15.5px}
body.membre:not(.apercu-appli) .bv-err{border-radius:14px}
html[data-theme="obscur"] body.membre:not(.apercu-appli) .bv-err,html[data-theme="obscur"] body.membre:not(.apercu-appli) .bv-err b{color:#F1D58A}

/* ---------- Questionnaire ---------- */
body.membre:not(.apercu-appli) .qstep{scroll-margin-top:130px}
body.membre:not(.apercu-appli) .qstep .qhint{font-size:14.5px;line-height:1.55;color:var(--gris);margin-bottom:26px}
body.membre:not(.apercu-appli) .qstep h2{margin-bottom:12px!important}
/* consignes intermédiaires (« Te sens-tu actuellement plutôt… ») : lisibles */
body.membre:not(.apercu-appli) #qform .qstep>p:not(.qhint):not(.qwarn),body.membre:not(.apercu-appli) .pick-note{font-size:14.5px;line-height:1.55;color:var(--gris)}
/* tuiles de choix : cartes blanches, même arrondi que les cartes de l'espace */
body.membre:not(.apercu-appli) .qcard{background:var(--carte);border:1.5px solid var(--line);border-radius:18px}
body.membre:not(.apercu-appli) .qcards.tuiles .qcard{min-height:128px}
@media(hover:hover){body.membre:not(.apercu-appli) .qcard:hover{border-color:color-mix(in srgb,var(--brand) 45%,var(--line))}}
body.membre:not(.apercu-appli) .qcard:has(input:checked){background:var(--pc);border-color:var(--bc)}
body.membre:not(.apercu-appli) .qcards.tuiles .qcard .tx{font-size:15px;line-height:1.35}
/* avertissements, enregistrement, fenêtre de confirmation : arrondis comme le reste, lisibles en obscur */
body.membre:not(.apercu-appli) .qwarn{border-radius:14px;font-size:13.5px;line-height:1.6;background:color-mix(in srgb,#f1c232 12%,var(--carte));border-color:color-mix(in srgb,#f1c232 45%,transparent)}
html[data-theme="obscur"] body.membre:not(.apercu-appli) .qwarn,html[data-theme="obscur"] body.membre:not(.apercu-appli) .qwarn b{color:#F1D58A}
body.membre:not(.apercu-appli) .qsave{border-radius:999px;background:var(--carte);font:700 12px/1 Arial,Helvetica,sans-serif;letter-spacing:0;padding:10px 16px;box-shadow:var(--ombre)}
body.membre:not(.apercu-appli) .qmodal-in{border-radius:28px;border:0;background:var(--carte);box-shadow:0 30px 70px rgba(0,0,0,.25)}
body.membre:not(.apercu-appli) .qmodal h3{font-size:26px!important}
body.membre:not(.apercu-appli) .qmodal .no{font:700 14px/1 Arial,Helvetica,sans-serif;letter-spacing:0;text-transform:none}
body.membre:not(.apercu-appli) .qerr{font-size:14px}
html[data-theme="obscur"] body.membre:not(.apercu-appli) :is(.qerr,.rmsg){color:#F1D58A}
body.membre:not(.apercu-appli) .chip{font-weight:700}
body.membre:not(.apercu-appli) .pick-sug{background:var(--carte);border-radius:16px}
body.membre:not(.apercu-appli) .pick-sug li{border-radius:10px}

/* ---------- mobile (390) ---------- */
@media(max-width:520px){
  body.membre:not(.apercu-appli) .auth-wrap{padding-top:96px}
  body.membre:not(.apercu-appli) .rbtns{flex-direction:column}
  body.membre:not(.apercu-appli) .rbtns :is(.btn,.autre){flex:0 0 auto;width:100%}
  body.membre:not(.apercu-appli) .steps{padding:22px 20px 6px}
  body.membre:not(.apercu-appli) .precau{padding:20px 18px}
}
@media(max-width:760px){
  body.apercu-appli .pesee-etapes li{padding:20px 20px 20px 68px}
}

/* Inscription : aide sous le mot de passe en texte normal, formule choisie en carte, note de bas lisible */
body.membre:not(.apercu-appli) .auth-form .fhint{font-weight:400;font-size:13px;line-height:1.5;color:var(--gris)}
body.membre:not(.apercu-appli) .auth-note{font-size:13px;line-height:1.55;color:var(--gris)}
body.membre:not(.apercu-appli) .choix{margin:0 0 28px;padding:14px 18px;border:0;border-radius:16px;background:var(--carte);box-shadow:var(--ombre);position:relative;line-height:1.5}
body.membre:not(.apercu-appli) .choix::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:4px;border-radius:0 4px 4px 0;background:var(--brand)}
body.membre:not(.apercu-appli) label.pcase{padding:8px 14px}

/* en-tête de page sur téléphone : plus de bande vide de 200 px au-dessus du titre */
@media(max-width:760px){
  body.apercu-appli .phead{min-height:0!important;padding-top:118px!important;padding-bottom:44px!important}
}
/* case à cocher sur un long texte (CGV) : la case s'aligne sur la première ligne */
body.membre:not(.apercu-appli) .qcards:not(.tuiles) .qcard{align-items:flex-start;line-height:1.5}
body.membre:not(.apercu-appli) .qcards:not(.tuiles) .qcard .dot{margin-top:1px}
body.membre:not(.apercu-appli) .opt-card:has(input:checked) .opt-choix{background:var(--brand);color:#111}
/* barre du haut du parcours : le lien de droite tient sur une ligne au téléphone */
@media(max-width:430px){
  body.membre:not(.apercu-appli) .qtop .back{white-space:nowrap;font-size:10px!important;letter-spacing:.1em!important}
}
@media(max-width:520px){body.membre:not(.apercu-appli) :is(.chopt,.chafter){padding:22px 16px!important}}

/* ===== barre du bas sur les pages du parcours membre (connexion, inscription, choisir, bienvenue…) : la même que la vitrine (Yoann 05/10) ===== */
.bas-membre{display:none}
@media(max-width:760px){
  body.membre .bas-membre{display:block;position:fixed;left:0;right:0;bottom:0;z-index:9998;background:var(--fond);border-top:1px solid var(--line);padding:0 10px env(safe-area-inset-bottom,0px)}
  body.membre .bas-membre .appbar{display:flex;justify-content:space-around;padding:6px 2px 8px}
  body.membre .bas-membre .appbar a{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:56px;padding:4px 0;font:600 10.5px/1 Arial,Helvetica,sans-serif;color:#6b6358;text-decoration:none}
  body.membre .bas-membre .appbar a[aria-current="page"]{color:#1466b8;font-weight:800}
  body.membre .bas-membre .appbar svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
  body.membre .bas-membre .appbar a:focus-visible{outline:3px solid #2E9BFF;outline-offset:3px}
  html[data-theme="obscur"] body.membre .bas-membre .appbar a{color:#AEB6C4}
  html[data-theme="obscur"] body.membre .bas-membre .appbar a[aria-current="page"]{color:#7cc0ff}
  body.membre:has(.bas-membre){padding-bottom:96px}
}

/* « au moins 12 semaines » au-dessus des cartes de formule (formules.html, choisir.html) — Damien 06/10 */
.reco-12{display:flex;align-items:center;gap:14px;width:fit-content;max-width:100%;margin:0 0 clamp(22px,3vw,34px);padding:12px 20px 12px 12px;border-radius:999px;
  background:var(--carte,#fff);box-shadow:var(--ombre,0 10px 28px rgba(17,17,17,.08));font:600 15.5px/1.4 Arial,Helvetica,sans-serif;color:var(--ice);text-align:left}
.reco-12 b{font-weight:800;color:var(--blue)}
.reco-ic{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:color-mix(in srgb,var(--brand) 14%,transparent)}
.reco-ic svg{width:22px;height:22px;fill:none;stroke:var(--blue);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
html[data-theme="obscur"] .reco-12{background:#111826;box-shadow:0 0 0 1px rgba(140,203,255,.14)}
html[data-theme="obscur"] .reco-12 b{color:#8CCBFF}
html[data-theme="obscur"] .reco-ic svg{stroke:#8CCBFF}
@media (max-width:600px){.reco-12{border-radius:20px;padding:12px 16px 12px 12px;font-size:14.5px}}
/* case « Je ne suis dans aucune de ces situations » (inscription, précautions) : la case garde 22 px, sans le cadre ni l'anneau
   des champs de saisie (étirée à 52 px avec un anneau bleu, elle semblait décalée et « se décocher » sur le Mac de Yoann, 07/10) */
label.pcase input[type=checkbox]{height:22px!important;min-height:0!important;max-height:22px!important;align-self:center!important;padding:0!important;border:0!important;border-radius:4px!important;background:none!important;box-shadow:none!important;-webkit-appearance:checkbox!important;appearance:auto!important}
label.pcase input[type=checkbox]:focus-visible{outline:2px solid var(--blue)!important;outline-offset:2px}