/* ==================================================================
POWER HEALTH — COUCHE « COQUILLE » (shell)
À charger APRÈS styles.css. Ne modifie aucun contenu : uniquement
le fond, l'en-tête, le rail de navigation (grand écran) et le dock
flottant (mobile). Le basculement se fait à 760 px.
================================================================== */
/* ---------- fond hachuré encre, identique à toutes les tailles d'écran ---------- */
body.ph-grain{
background-color:var(--bg);
background-image:
radial-gradient(ellipse 860px 500px at 94% -12%, rgba(249,115,22,.22), transparent 62%),
repeating-linear-gradient(128deg, rgba(255,255,255,.045) 0 1px, transparent 1px 11px),
radial-gradient(ellipse 700px 460px at -10% 104%, rgba(74,102,66,.18), transparent 62%);
background-size:auto, auto, auto;
background-repeat:no-repeat, repeat, no-repeat;
}
/* le rail et #app-root sont regroupés dans .ph-shell par le script */
.ph-shell{ max-width:900px; margin:0 auto; }
.ph-rail{ display:none; }
.ph-dock{ display:none; }
.ph-bell{
position:relative; width:38px; height:38px; border-radius:12px;
background:var(--bone-50); border:1.5px solid var(--line);
display:flex; align-items:center; justify-content:center;
color:var(--ink2); cursor:pointer;
transition:border-color .14s, color .14s, transform .14s;
}
.ph-bell:hover{ border-color:var(--ember-400); color:var(--ink); transform:translateY(-1px); }
.ph-bell i{
position:absolute; top:6px; right:7px; width:8px; height:8px; border-radius:99px;
background:var(--ember-400); box-shadow:0 0 0 2px var(--bg);
}
/* ==================================================================
GRAND ÉCRAN (≥ 761 px) — site classique : en-tête collé + rail
================================================================== */
@media (min-width:761px){
body{ padding:0 0 60px; }
.appbar{
position:sticky; top:0; z-index:40;
max-width:none; margin:0 0 0; height:68px; padding:0 40px;
background:rgba(20,18,9,.72); backdrop-filter:blur(14px);
border-bottom:1.5px solid var(--line);
flex-wrap:nowrap; gap:26px;
}
.appbar .brand p{ display:none; } /* la baseline passe dans le rail */
.appbar-actions{ margin-left:auto; }
.ph-shell{
max-width:1240px; margin:0 auto; padding:28px 40px 0;
display:grid; grid-template-columns:232px minmax(0,1fr); gap:32px; align-items:start;
}
.hub-wrap{ max-width:none; margin:0; min-width:0; }
/* séances à venir : grille fixe plutôt qu'un scroll horizontal, plus
lisible sur un écran large */
.upcoming-row{ display:grid; grid-template-columns:repeat(auto-fill, minmax(148px, 1fr)); overflow-x:visible; padding:2px 2px 4px; }
/* accueil client : deux colonnes — la séance du jour à gauche, motivation
/ nutrition / suivi empilés à droite ; « mon calendrier » et « mes
programmes » repassent en pleine largeur en dessous. Les blocs
restent dans le même ordre dans le code pour que le mobile (qui ignore
cette grille) les empile exactement comme avant.
Une seule rangée "hero side" (au lieu de 3 rangées partagées entre les
deux colonnes) : chaque colonne est un flex-column autonome (.hero-col,
.side-col) dont la hauteur suit son propre contenu. Avec 3 rangées
partagées, dès que l'une des deux colonnes était plus haute que l'autre
(ex. hero + repas du jour vs motiv+nutri+stats), la grille étirait les
3 rangées pour l'accueillir et — comme align-items:start ne stretch pas
les items — chaque section de la colonne la plus courte se retrouvait
avec un vide sous elle : soit sous le hero (jour de repos), soit entre
motiv/nutri/stats (jour d'entraînement + repas du jour). Une seule
rangée par colonne supprime ces écarts internes ; il ne peut plus rester
qu'un espace en bas de la colonne la plus courte, jamais entre ses
sections. */
.home-grid{
display:grid; gap:20px; align-items:start;
grid-template-columns:1.55fr 1fr;
grid-template-areas:
"hero side"
"upcoming upcoming"
"programs programs";
}
.home-grid > .hero-col{ grid-area:hero; display:flex; flex-direction:column; gap:20px; }
.home-grid > .hero-col > .hero-today{ margin-bottom:0; }
.home-grid > .side-col{ grid-area:side; display:flex; flex-direction:column; gap:20px; }
.home-grid > .home-upcoming{ grid-area:upcoming; }
.home-grid > .home-programs{ grid-area:programs; }
/* .motiv-card ne s'étire plus à height:100% : depuis que motiv/nutri/stats
vivent dans .side-col (flex-column), sa hauteur suit son propre contenu,
comme les deux autres — plus de rangée de grille partagée à combler. */
/* nutrition/suivi sportif/repas du jour : leur espacement vertical vient du
gap du flex-column parent (.side-col / .hero-col), pas de la marge par
défaut de .sect-head — sinon le titre ne s'aligne plus avec le haut du
bloc précédent. En mobile .sect-head garde sa marge normale, voir styles.css. */
.home-grid > .side-col > .home-nutri > .sect-head,
.home-grid > .side-col > .home-stats > .sect-head,
.home-grid > .side-col > .home-nutristats > .sect-head,
.home-grid > .hero-col > .home-todaymeals > .sect-head{ margin-top:0; }
/* pas de rail à afficher (déconnecté / écran de connexion) : une seule
colonne pleine largeur, sans le vide qu'aurait laissé un rail vide */
.ph-shell.ph-no-rail{ grid-template-columns:minmax(0,1fr); max-width:none; padding:0; }
.ph-shell.ph-no-rail .ph-rail{ display:none; }
.ph-rail{
display:flex; flex-direction:column; gap:4px;
position:sticky; top:96px; align-self:start;
}
.ph-rail-title{
font-size:9.5px; letter-spacing:1.3px; text-transform:uppercase;
color:var(--ink3); font-weight:800; padding:4px 12px 8px;
}
.ph-rail-title + .ph-rail-title{ padding-top:16px; }
.ph-navlink{
display:flex; align-items:center; gap:10px; width:100%; text-align:left;
padding:10px 12px; border:none; background:transparent; border-radius:12px;
font-family:inherit; font-size:12.5px; font-weight:700; color:var(--ink2); cursor:pointer;
transition:background .14s, color .14s, transform .14s;
}
.ph-navlink:hover{ background:var(--bone-200); color:var(--ink); transform:translateX(2px); }
.ph-navlink.on{ background:var(--dark); color:#fff; }
.ph-navlink.on svg{ color:var(--ember-400); }
.ph-navlink svg{ flex-shrink:0; }
.ph-navlink .count{
margin-left:auto; min-width:20px; height:20px; border-radius:99px;
background:var(--red); color:#fff; font-family:var(--font-mono);
font-size:10.5px; font-weight:700; display:flex; align-items:center; justify-content:center; padding:0 5px;
}
.ph-rail-baseline{
font-size:10.5px; line-height:1.55; color:var(--ink3); font-weight:500;
padding:16px 12px 0; border-top:1px solid var(--line2); margin-top:16px;
}
}
/* ==================================================================
SURFACES ENCRE — universel (mobile ET desktop, même thème sombre)
Composants qui codaient une couleur claire en dur plutôt que de
suivre les variables de palette : réécrits une fois pour toutes les
tailles d'écran plutôt que seulement sous 760px.
================================================================== */
.appbar .logo{ background:var(--ember-400); }
.appbar .logo span{ color:#141209; }
.modal{ background:#1F1B12; color:var(--ink); }
.modal-foot{ background:rgba(255,255,255,.03); }
.search-box input, .field input, .field select, .field textarea,
.login-field input,
.chat-input-row textarea{
background:rgba(255,255,255,.06); color:var(--ink); border-color:var(--line);
}
.field input:focus, .field select:focus, .field textarea:focus,
.search-box input:focus, .login-field input:focus, .chat-input-row textarea:focus{
border-color:var(--ember-400); background:rgba(255,255,255,.08);
box-shadow:0 0 0 3px rgba(249,115,22,.28);
}
.btn-primary{ background:rgba(255,255,255,.10); color:#fff; }
.btn-primary:hover{ background:rgba(255,255,255,.16); }
.chip.checked, .seg button.on{ background:var(--ember-400); color:#141209; }
.ex-row select, .ex-row input, .row select, .row input{
background:rgba(255,255,255,.06); color:var(--ink); border-color:var(--line);
}
/* la fiche imprimable garde la palette papier à toutes les tailles d'écran */
.sheet{
--ink:#141209; --ink2:#57503F; --ink3:#7A7160;
--card:#FFFFFF; --line:#E2D9C5; --line2:#EDE6D6; --dark:#141209;
--bone-50:#FFFDF8; --bone-100:#FAF7F0; --bone-200:#F4EFE4; --bone-300:#EDE6D6; --bone-400:#E2D9C5;
--lime-soft:#EDF1E8; --lime-line:#DCE4D3; --lime-deep:#3A5234; --moss-500:#3A5234;
--amber-100:#FBEBCC; --rust-100:#F8DED9; --slate-100:#DFE8ED; --clay-100:#F6E2DB; --clay-500:#9C4028;
--data-track:#EDE6D6;
color:#141209;
}
/* ==================================================================
MOBILE (≤ 760 px) — mise en page uniquement : dock flottant, en-tête
compact. Le thème (couleurs) est désormais identique à toutes les
tailles d'écran — voir la section « surfaces encre » ci-dessus.
================================================================== */
@media (max-width:760px){
body{ padding:0 16px calc(104px + env(safe-area-inset-bottom, 0px)); }
/* pas de dock à afficher (déconnecté / écran de connexion) : pas besoin
de réserver de la place en bas de l'écran */
body.ph-no-nav{ padding-bottom:0; }
/* en-tête compact collé, en verre */
.appbar{
position:sticky; top:0; z-index:40;
margin:0 -16px 14px; padding:12px 16px;
background:rgba(20,18,9,.72); backdrop-filter:blur(18px) saturate(1.4);
border-bottom:1px solid rgba(255,255,255,.10);
flex-direction:row; align-items:center;
}
.appbar .brand{ flex:1; min-width:0; }
.appbar .brand p{ display:none; }
.appbar-actions{ width:auto; margin-left:auto; gap:8px; flex-wrap:nowrap; }
.appbar-actions .chat-btn{ display:none; } /* repris par le dock (« Coach ») */
.appbar-actions .btn-soft{ padding:9px 12px; font-size:10px; }
/* le badge d'identité garde l'avatar seul */
.appbar-actions .who-badge .name,
.appbar-actions .who-badge .role{ display:none; }
.appbar-actions .who-badge .avatar{ width:34px; height:34px; border-radius:11px; background:rgba(255,255,255,.10); color:var(--ember-400); }
/* le sélecteur Vue client / Vue coach reste accessible, en pastille compacte */
.appbar-actions #view-seg{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.12); border-radius:999px; padding:2px; }
.appbar-actions #view-seg button{ padding:7px 11px; font-size:9.5px; border-radius:999px; }
.appbar-actions #view-seg button.on{ background:var(--ember-400); color:#141209; }
/* dock flottant */
.ph-dock{
display:flex; position:fixed; z-index:50;
left:22px; right:22px; bottom:calc(16px + env(safe-area-inset-bottom, 0px));
height:64px; border-radius:999px; padding:0 8px; gap:4px;
align-items:center; justify-content:space-between;
background:rgba(20,18,9,.76); backdrop-filter:blur(22px) saturate(1.5);
border:1px solid rgba(255,255,255,.12);
box-shadow:0 18px 40px -14px rgba(0,0,0,.6);
}
.ph-dockbtn{
position:relative;
flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
padding:8px 0; border:none; background:transparent; border-radius:999px;
font-family:inherit; color:rgba(250,247,240,.66); cursor:pointer;
transition:color .14s, transform .14s, background .14s;
}
.ph-dockbtn:active{ transform:scale(.94); }
.ph-dockbtn span{ font-size:9px; font-weight:750; }
.ph-dockbtn .count{
position:absolute; top:4px; right:calc(50% - 20px);
min-width:15px; height:15px; border-radius:99px;
background:var(--red); color:#fff; font-family:var(--font-mono); font-size:9px; font-weight:700;
display:flex; align-items:center; justify-content:center; padding:0 4px;
}
.ph-dockbtn.on .count{ position:static; right:auto; background:#141209; color:var(--ember-400); }
.ph-dockbtn.on{
flex:0 0 auto; flex-direction:row; gap:8px; padding:11px 15px;
background:var(--ember-400); color:#141209;
}
.ph-dockbtn.on span{ font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; }
/* le bouton collé « Démarrer la séance » passe au-dessus du dock */
.sticky-cta{ bottom:calc(88px + env(safe-area-inset-bottom, 0px)); }
}