/* Safety Care — charte de l'application (ivoire, encre profonde, champagne, bronze). */
:root{
  --ivory:#FFFDF9; --cream:#F4F0E8; --ink:#17211F; --deep:#16221F; --muted:#5B6560; --line:#DED8CE; --soft-line:#ECE6DC;
  --nude:#EAD6C7; --champagne:#D7B48B; --bronze:#AA7652; --bronze-deep:#765039; --sage:#768D7E; --tab-off:#AEB8B2;
  --verdict:#F3EADF; --verdict-line:#E6D3BE; --ok-bg:#E3EBE5; --ok-ink:#2F4A3D; --alert-bg:#FFF4EE; --alert-line:#F0D6C8; --alert-ink:#7A2E1C;
  --display:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  --body:"Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
/* Ronan (11/10 à 17h49) : « le texte rétrécit, l'application ne tient plus dans l'écran ». Le téléphone ne retaille plus le texte,
   rien ne dépasse la largeur de l'écran, et les champs sont en 16 px (sinon l'iPhone zoome en les touchant et reste zoomé). */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{background:#EEE8DE;color:var(--ink);font:15px/1.45 var(--body);-webkit-font-smoothing:antialiased}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--deep)}
:focus-visible{outline:3px solid var(--bronze);outline-offset:2px}
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

.app{position:relative;max-width:480px;min-height:100%;margin:0 auto;background:var(--ivory);display:flex;flex-direction:column;overflow-x:clip}
@media (min-width:560px){.app{min-height:calc(100% - 32px);margin:16px auto;border-radius:28px;box-shadow:0 30px 80px rgba(16,24,22,.18);overflow:hidden}}
.view{flex:1;display:flex;flex-direction:column;gap:16px;padding:20px 18px 120px;padding-top:calc(20px + env(safe-area-inset-top,0px))}
.view.no-tab{padding-bottom:32px}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.serif{font-family:var(--display);font-weight:600;color:var(--deep);letter-spacing:-.01em;text-wrap:balance;margin:0}
.h1{font-size:32px;line-height:1.05}
.h2{margin:0;font-size:17px;font-weight:700;color:var(--deep)}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--bronze-deep)}
.muted{color:var(--muted)}
.small{font-size:13px}
.stack{display:flex;flex-direction:column;gap:12px}
.row{display:flex;align-items:center;gap:12px}
.wrap{display:flex;flex-wrap:wrap;gap:8px}
.card{padding:18px;border-radius:26px;background:#fff;border:1px solid var(--soft-line);display:flex;flex-direction:column;gap:12px}
.card.cream{background:var(--cream);border-color:transparent}
.card.dark{background:var(--deep);color:var(--ivory);border:none}
.card.dark .serif{color:var(--ivory)} .card.dark .eyebrow{color:var(--champagne)} .card.dark .muted{color:#C9D0CC}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:54px;padding:0 20px;border-radius:28px;border:none;background:var(--deep);color:var(--ivory);font-size:15px;font-weight:700;width:100%;text-decoration:none}
.btn.ghost{background:transparent;color:var(--deep);border:1px solid var(--deep)}
.btn.light{background:var(--ivory);color:var(--deep)}
.btn.small{min-height:42px;font-size:14px;width:auto}
.btn:disabled{background:#E8E3DA;color:var(--muted);cursor:default;border-color:transparent}
.link{background:none;border:none;padding:6px 0;font-size:14px;font-weight:700;color:var(--deep);text-decoration:underline;text-underline-offset:3px;text-align:left}
.icon-btn{flex:none;width:44px;height:44px;border-radius:22px;border:1px solid var(--line);background:#fff;color:var(--deep);display:flex;align-items:center;justify-content:center}
.chip{min-height:40px;padding:8px 16px;border-radius:20px;border:1px solid var(--line);background:#fff;color:var(--deep);font-size:14px;font-weight:600;text-align:left}
.chip[aria-pressed="true"]{background:var(--deep);border-color:var(--deep);color:var(--ivory)}
.pill{display:inline-flex;align-items:center;min-height:28px;padding:3px 12px;border-radius:14px;background:var(--cream);color:var(--deep);font-size:12.5px;font-weight:700}
.field{width:100%;min-height:52px;padding:14px 16px;border-radius:18px;border:1px solid var(--line);background:#fff;font-size:16px;min-width:0;max-width:100%}
input[type=date].field,input[type=time].field{-webkit-appearance:none;appearance:none;display:block}
input[type=date].field::-webkit-date-and-time-value{text-align:left;min-height:1.4em}
textarea.field{min-height:120px;resize:vertical;line-height:1.45}
label.check{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.4}
label.check input{width:22px;height:22px;margin:1px 0 0;accent-color:var(--deep);flex:none}
.logo{display:block;width:170px;height:auto}
.error{padding:12px 14px;border-radius:16px;background:var(--alert-bg);border:1px solid var(--alert-line);color:var(--alert-ink);font-size:14px}
.note{padding:12px 14px;border-radius:16px;background:var(--cream);font-size:13.5px;color:var(--muted)}

/* barre d'onglets */
.tabbar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(12px + env(safe-area-inset-bottom,0px));width:min(452px,calc(100% - 28px));height:68px;border-radius:34px;background:var(--deep);display:flex;align-items:center;justify-content:space-around;padding:0 6px;box-shadow:0 14px 34px rgba(22,34,31,.28);z-index:20}
.tab{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:56px;background:none;border:none;color:var(--tab-off);font-size:10.5px;font-weight:600;padding:4px 0;text-decoration:none}
.tab[aria-current="page"]{color:var(--ivory);font-weight:700}
.fab{width:66px;height:66px;margin-top:-38px;background:none;border:none;display:flex;align-items:center;justify-content:center;text-decoration:none}
.fab>span{width:58px;height:58px;border-radius:0 50% 50% 50%;transform:rotate(45deg);background:var(--ivory);border:1px solid var(--champagne);box-shadow:0 10px 24px rgba(22,34,31,.3);display:flex;align-items:center;justify-content:center}
.fab>span>span{transform:rotate(-45deg);display:flex;color:var(--deep)}

/* accueil */
.hello{font-size:34px;line-height:1.02}
.hero{display:flex;align-items:center;gap:16px;padding:20px;border-radius:28px;background:var(--deep);color:var(--ivory);border:none;text-align:left;width:100%;text-decoration:none}
.hero .eyebrow{color:var(--champagne)} .hero .serif{color:var(--ivory);font-size:28px;line-height:1.05}
.drop{flex:none;width:58px;height:58px;border-radius:0 50% 50% 50%;transform:rotate(45deg);background:var(--champagne);display:flex;align-items:center;justify-content:center}
.drop>span{transform:rotate(-45deg);display:flex;color:var(--deep)}
.ask{display:flex;align-items:center;gap:12px;min-height:60px;padding:0 10px;border-radius:30px;border:1px solid var(--line);background:#fff;color:var(--muted);text-align:left;width:100%;text-decoration:none}
.s-mark{flex:none;width:40px;height:40px;border-radius:20px;background:var(--deep);color:var(--ivory);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:22px;font-weight:600}
.progress{height:6px;border-radius:3px;background:rgba(255,253,249,.18);overflow:hidden}
.progress i{display:block;height:100%;background:var(--champagne);border-radius:3px}
.progress.light{background:var(--cream)} .progress.light i{background:var(--bronze)}
.item{display:flex;align-items:center;gap:12px;padding:12px;border-radius:20px;background:#fff;border:1px solid var(--soft-line);text-decoration:none;color:var(--ink);width:100%;text-align:left}
.item .th{flex:none;width:44px;height:44px;border-radius:14px;background:var(--cream);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--bronze-deep)}
.item .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.item .tx b{font-size:14.5px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.item .tx small{font-size:12.5px;color:var(--muted)}
.verdict-chip{flex:none;max-width:38%;padding:5px 9px;border-radius:10px;font-size:11px;font-weight:700;background:var(--verdict);color:var(--bronze-deep);text-align:center}

/* questions */
.qblock{display:flex;flex-direction:column;gap:10px}
.qtitle{font-size:16px;font-weight:700;color:var(--deep)}
.scale{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:4px}
.scale button{height:42px;border-radius:12px;border:1px solid var(--line);background:#fff;font-weight:700;font-size:13px;color:var(--deep);padding:0}
.scale button[aria-pressed="true"]{background:var(--deep);color:var(--ivory);border-color:var(--deep)}
.scale-labels{display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}
.footer-actions{position:sticky;bottom:0;display:flex;gap:10px;padding:12px 0 calc(8px + env(safe-area-inset-bottom,0px));background:linear-gradient(transparent,var(--ivory) 30%)}

/* scan */
.cam{position:relative;border-radius:28px;overflow:hidden;background:#0F1816;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;color:#D9DED9}
.cam video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.frame{position:relative;width:72%;height:46%;pointer-events:none}
.frame i{position:absolute;width:30px;height:30px;border-color:var(--champagne);border-style:solid;border-width:0}
.frame i:nth-child(1){top:0;left:0;border-top-width:3px;border-left-width:3px;border-top-left-radius:16px}
.frame i:nth-child(2){top:0;right:0;border-top-width:3px;border-right-width:3px;border-top-right-radius:16px}
.frame i:nth-child(3){bottom:0;left:0;border-bottom-width:3px;border-left-width:3px;border-bottom-left-radius:16px}
.frame i:nth-child(4){bottom:0;right:0;border-bottom-width:3px;border-right-width:3px;border-bottom-right-radius:16px}
.beam{position:absolute;left:14px;right:14px;top:50%;height:2px;background:var(--champagne);box-shadow:0 0 14px var(--champagne);animation:beam 2.4s ease-in-out infinite alternate}
@keyframes beam{from{transform:translateY(-40px)}to{transform:translateY(40px)}}
.cam .hint{position:absolute;bottom:12px;left:12px;right:12px;text-align:center;font-size:13px}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:24px;background:var(--cream)}
.seg button{min-height:42px;border-radius:20px;border:none;background:transparent;color:var(--deep);font-size:13.5px;font-weight:700}
.seg button[aria-pressed="true"]{background:var(--deep);color:var(--ivory)}

/* résultat */
.verdict{padding:20px;border-radius:26px;background:var(--verdict);border:1px solid var(--verdict-line);display:flex;flex-direction:column;gap:10px}
.verdict .serif{font-size:26px}
.why{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;line-height:1.45}
.why .ck{flex:none;margin-top:3px;width:18px;height:18px;border-radius:9px;background:var(--deep)}

/* SAFY */
.chat{display:flex;flex-direction:column;gap:12px;flex:1}
.me{align-self:flex-end;max-width:82%;padding:12px 14px;border-radius:20px 20px 6px 20px;background:var(--deep);color:var(--ivory);font-size:14.5px;line-height:1.45;white-space:pre-wrap}
.bot{align-self:flex-start;max-width:92%;padding:14px;border-radius:20px 20px 20px 6px;background:#fff;border:1px solid var(--soft-line);display:flex;flex-direction:column;gap:10px;font-size:14.5px;line-height:1.5}
.bot p{margin:0;white-space:pre-wrap}
.bot .relance{font-weight:700;color:var(--deep)}
.bot-sec{display:flex;flex-direction:column;gap:6px}
.bot-h{font-size:15px;font-weight:800;color:var(--deep);margin-top:2px}
.bot-ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:5px}
.bot-ul li{line-height:1.45}
.bot,.me,.bot p,.bot li{-webkit-user-select:text;user-select:text}
.me-wrap{align-self:flex-end;max-width:82%;display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.me-wrap .me{max-width:100%}
.msg-tools{display:flex;gap:14px;align-self:flex-start}
.me-wrap .msg-tools{align-self:flex-end}
.msg-tools button,.compose-tools button{padding:2px 0;border:0;background:none;font:700 12px/1.3 Manrope,system-ui,sans-serif;color:var(--muted);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.compose-tools{display:flex;gap:16px;padding:0 6px;flex-wrap:wrap;align-items:center}
.compose-ai{flex:1 1 100%;font:500 11px/1.35 Manrope,system-ui,sans-serif;color:var(--muted)}
.sources{display:flex;flex-direction:column;gap:4px;font-size:12.5px}
.sources a{color:var(--bronze-deep);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.typing{display:inline-flex;gap:5px;padding:4px 0}
.typing i{width:7px;height:7px;border-radius:4px;background:var(--bronze);animation:blink 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.25}40%{opacity:1}}
.composer{position:sticky;bottom:calc(88px + env(safe-area-inset-bottom,0px));display:flex;align-items:flex-end;gap:8px;padding:10px 0;background:linear-gradient(transparent,var(--ivory) 25%)}
.composer textarea{flex:1;min-width:0;min-height:52px;max-height:140px;padding:14px 18px;border-radius:26px;border:1px solid var(--line);background:#fff;font-size:16px;resize:none;line-height:1.4}
.round{flex:none;width:52px;height:52px;border-radius:26px;border:none;display:flex;align-items:center;justify-content:center;background:var(--deep);color:var(--ivory)}
.round.soft{background:var(--cream);color:var(--deep)}
.round.rec{background:var(--bronze);color:var(--ivory)}
.sugg{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.sugg::-webkit-scrollbar{display:none}
.sugg .chip{flex:none;min-height:34px;font-size:13px;padding:6px 12px}
/* Mes produits en photo, dans SAFY (Ronan, 21/10) : les photos s'ajoutent, chacune lue tout de suite. */
.safy-tray{display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:22px;background:#fff;border:1px solid var(--soft-line)}
.safy-tray .st-list{display:flex;flex-direction:column;gap:6px}
.st-item{display:grid;grid-template-columns:44px 1fr auto auto;align-items:center;gap:10px;min-height:52px}
.st-item img{width:44px;height:44px;border-radius:12px;object-fit:cover;background:var(--cream)}
.st-tx{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--deep);min-width:0;overflow-wrap:anywhere}
.st-tx .spinner{width:16px;height:16px;border-width:2px;flex:none}
.st-item.error .st-tx,.st-item.empty .st-tx{color:var(--alert-ink);font-weight:500}
.st-x{width:36px;height:36px;border-radius:18px;border:1px solid var(--line);background:#fff;font-size:18px;line-height:1;color:var(--muted)}
.chip.st-add{display:inline-flex;align-items:center;gap:6px;min-height:36px;font-size:13px;padding:6px 12px}
.chip.st-add span{width:18px;height:18px}
.intake .intake-ph{width:72px;height:72px;border-radius:16px;object-fit:cover;align-self:flex-start}
.intake .chip{font-size:14px}

/* mémoire / bilan */
.memo{padding:20px;border-radius:28px;background:var(--deep);color:var(--ivory);display:flex;flex-direction:column;gap:12px}
.memo .eyebrow{color:var(--champagne)}
dl.facts{margin:0;display:flex;flex-direction:column;gap:12px}
dl.facts div{display:flex;flex-direction:column;gap:2px}
dl.facts dt{font-size:12.5px;font-weight:700;color:var(--bronze-deep)}
dl.facts dd{margin:0;font-size:14.5px}
.steps{display:flex;flex-direction:column;gap:8px}
.step{display:flex;gap:12px;padding:12px;border-radius:18px;background:#fff;border:1px solid var(--soft-line)}
.step .n{flex:none;width:28px;height:28px;border-radius:14px;background:var(--cream);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:var(--deep)}
.step .tx{display:flex;flex-direction:column;gap:3px;font-size:14px}
.toast{position:fixed;left:50%;bottom:100px;transform:translateX(-50%);padding:12px 16px;border-radius:16px;background:var(--deep);color:var(--ivory);font-size:13.5px;font-weight:600;z-index:50;box-shadow:0 10px 24px rgba(22,34,31,.3);max-width:90%}
.spinner{width:22px;height:22px;border-radius:11px;border:3px solid var(--cream);border-top-color:var(--bronze);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.center{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px;flex:1}
.ronan{width:56px;height:56px;border-radius:18px;object-fit:cover;flex:none}
/* 06/10 : préparation, guides, routine en photo, dictée */
.ex{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:7px;font-size:14px;line-height:1.45}
.thumbs{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px}
.thumbs:empty{display:none}
.thumb{flex:none;width:96px;height:96px;object-fit:cover;border-radius:16px;border:1px solid var(--line);background:var(--cream)}
.prod{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:20px;background:#fff;border:1px solid var(--soft-line)}
.prod.doubt{border:2px solid #D28A4B;background:#FFFBF6}
.prod .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.prod .tx b{font-size:14.5px}
.prod .tx small{font-size:12.5px;color:var(--muted)}
.prod .field{min-height:46px;padding:10px 14px;border-radius:14px}
.num{flex:none;width:34px;height:34px;border-radius:12px;background:var(--cream);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--bronze-deep)}
.icon-btn.sm{width:36px;height:36px;border-radius:18px}
.btn.voice{width:auto;min-height:44px;padding:0 16px}
.btn.rec{background:var(--bronze);border-color:var(--bronze);color:var(--ivory)}
/* 06/10 soir : logo, pensée du jour, météo de peau, passeport, icônes */
.brandbar{display:flex;justify-content:center;padding-top:4px}
.brandbar img{height:58px;width:auto}
/* SAFY = la goutte officielle Safety Care (Ronan, 11/10). */
.s-drop{flex:none;width:22px;height:28px;display:inline-block;background:url(/brand/drop-mark-128.png?v=2) center/contain no-repeat}
.s-drop>span{display:none}
.s-drop.big{width:36px;height:46px}
.quote{padding:20px;border-radius:26px;background:linear-gradient(135deg,var(--cream),#fff);border:1px solid var(--soft-line);display:flex;flex-direction:column;gap:8px}
.quote .serif{font-size:23px;line-height:1.2}
.meteo-choices{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.meteo-choice{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 6px;border-radius:20px;border:1px solid var(--line);background:#fff;color:var(--deep);font-size:13px;font-weight:700}
.meteo-choice[aria-pressed="true"]{border-color:var(--deep);background:var(--deep);color:var(--ivory)}
.meteo-choice.comfortable svg{color:#C9922E}.meteo-choice.mixed svg{color:var(--sage)}.meteo-choice.uncomfortable svg{color:#5E7186}
.meteo-choice[aria-pressed="true"] svg{color:var(--champagne)}
.meteo-ic{flex:none;width:48px;height:48px;border-radius:24px;background:var(--cream);display:flex;align-items:center;justify-content:center}
.meteo-ic.comfortable{color:#C9922E}.meteo-ic.mixed{color:var(--sage)}.meteo-ic.uncomfortable{color:#5E7186}
details summary{cursor:pointer;font-weight:700;color:var(--deep)}
.item .th.ok{background:var(--ok-bg);color:var(--ok-ink)}
.verdict-row{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:18px;background:#fff;border:1px solid var(--soft-line)}
.verdict-row .dot{flex:none;width:12px;height:12px;border-radius:6px;margin-top:5px;background:#D9B44A}
.verdict-row.green .dot{background:#5C9A6E}.verdict-row.orange .dot{background:#D98A3D}.verdict-row.red .dot{background:#B8503B}.verdict-row.blue .dot{background:#4A74B0}
.verdict-row.grey .dot{background:#B9B2A7}
.verdict-row .tx{display:flex;flex-direction:column;gap:2px;min-width:0}
/* indice barrière et vigilances */
.barrier .score{font-size:52px;line-height:1}
.zone{display:inline-flex;align-items:center;min-height:28px;padding:3px 12px;border-radius:14px;font-size:12.5px;font-weight:700;background:var(--cream);color:var(--deep)}
.zone.green{background:#E3EFE6;color:#2F5A3D}.zone.yellow{background:#F7EDCB;color:#6B5310}.zone.orange{background:#F8E1CC;color:#7A4415}.zone.red{background:#F6D9D2;color:#7A2E1C}
.gauge{position:relative;height:12px;border-radius:6px;background:linear-gradient(90deg,#B8503B 0%,#D98A3D 40%,#D9B44A 60%,#5C9A6E 80%,#5C9A6E 100%)}
.gauge.rev{background:linear-gradient(90deg,#5C9A6E 0%,#5C9A6E 19%,#D9B44A 20%,#D9B44A 39%,#D98A3D 40%,#D98A3D 59%,#B8503B 60%,#B8503B 100%)}
.gauge i{position:absolute;top:-4px;width:14px;height:20px;border-radius:7px;background:var(--ivory);border:3px solid var(--deep);box-shadow:0 2px 6px rgba(22,34,31,.25)}
.bgauge{position:relative;height:12px;margin-top:4px;border-radius:6px;background:linear-gradient(90deg,#B8503B 0%,#D98A3D 40%,#D9B44A 60%,#5C9A6E 80%,#5C9A6E 100%)}
.bgauge i{position:absolute;top:-4px;width:14px;height:20px;border-radius:7px;background:var(--ivory);border:3px solid var(--deep);box-shadow:0 2px 6px rgba(22,34,31,.25)}
.bscale{display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted);font-weight:600;margin-top:-2px}
.tip{display:block;color:var(--ok-ink);margin-top:2px}
.vigilance{border-color:#E7D2B8}
.vig summary{padding:6px 0}

.inci{display:block;margin-top:2px;color:var(--muted,#5f6b66)}
.inci i{font-style:italic;color:var(--ink,#16221F)}
/* SAFY prend des nouvelles (10/10) : relance mise en valeur, sans alarmer. */
.card.followup{border:1.5px solid var(--champagne);background:linear-gradient(180deg,#FFFBF4,var(--ivory));animation:sc-rise .45s ease-out both}
@keyframes sc-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.card.followup{animation:none}}
/* Note pour les professionnels (10/10) : lisible au comptoir, agrandissable. */
.pro-note dl.facts dt{font-weight:700}
.pro-note.large{font-size:19px}
.pro-note.large .h2{font-size:26px}
/* Passeport (audit du 10/10) : sommaire, frises, quatre routines chiffrées, ordonnance imprimable. */
.toc{display:flex;gap:8px;overflow-x:auto;padding:2px 0 6px;scrollbar-width:none;position:sticky;top:0;z-index:5;background:var(--ivory)}
.toc::-webkit-scrollbar{display:none}
.toc .chip{white-space:nowrap;flex:0 0 auto}
.timeline{display:flex;flex-direction:column;gap:10px;border-left:2px solid var(--line);margin-left:6px;padding-left:14px}
.timeline .tl{display:flex;flex-direction:column;gap:2px;position:relative}
.timeline .tl::before{content:'';position:absolute;left:-21px;top:5px;width:12px;height:12px;border-radius:50%;background:var(--champagne);border:2px solid var(--ivory)}
.tiers4{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.tier4{display:flex;flex-direction:column;gap:2px;align-items:flex-start;text-align:left;padding:10px 12px;border-radius:14px;border:1px solid var(--line);background:#fff;font:inherit;color:inherit;cursor:pointer}
.tier4[aria-pressed="true"]{border-color:var(--deep);box-shadow:0 0 0 1px var(--deep)}
.tier4 b{font-size:18px}
.ordo h3{font-size:15px;margin:0 0 4px;text-transform:uppercase;letter-spacing:.04em}
.ordo ol,.ordo ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:4px}
.ordo-block{border-top:1px solid var(--line);padding-top:8px}
@media print{
  .tabbar,.no-print,.toc{display:none!important}
  body,main.view{background:#fff!important;padding:0!important}
  .ordo,.pro-note{box-shadow:none!important;border:none!important;font-size:12px}
  .ordo-block{break-inside:avoid}
  @page{margin:12mm}
}
[id^="p-"]{scroll-margin-top:64px}
/* Lire ma peau en photo (10/10) : cadrage, contrôle de lumière en direct, zooms. */
.cam.face{aspect-ratio:3/4}
.cam.face video{object-fit:contain}
.face-oval{position:absolute;border:3px solid rgba(255,253,249,.85);border-radius:50%;box-shadow:0 0 0 2000px rgba(15,24,22,.35);pointer-events:none}
.face-meter{position:absolute;left:12px;right:12px;bottom:12px;text-align:center;font-size:13px;font-weight:700;padding:8px 10px;border-radius:14px;background:rgba(15,24,22,.75);color:#fff}
.face-meter.ok{background:rgba(54,110,78,.9)}
.face-meter.warn{background:rgba(150,92,40,.92)}
.zoom-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.zoom-grid figure{margin:0;display:flex;flex-direction:column;gap:4px}
.zoom-grid img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px}
img.zoom{width:96px;height:96px;object-fit:cover;border-radius:14px;flex:0 0 auto}
label.check{display:flex;gap:10px;align-items:flex-start}
label.check input{margin-top:3px;width:18px;height:18px;flex:0 0 auto}
/* Accueil (10/10, 11h58) : la goutte de mémoire, « votre cas », six actions, ce qui vous concerne aujourd'hui. */
.memory-hero{align-items:center;gap:18px;padding:18px 20px}
.mdrop{width:74px;height:130px;flex:none;overflow:visible}
.mdrop-serum{mix-blend-mode:multiply;opacity:.72}
.mdrop-wave{fill:#D9B98F}
.mdrop-level{transform:translate(0,var(--lv));animation:mdrop-fill 1.6s cubic-bezier(.2,.7,.2,1) both}
.mdrop-wave{animation:mdrop-wave 6s linear infinite}
@keyframes mdrop-fill{from{transform:translate(0,490px)}to{transform:translate(0,var(--lv))}}
@keyframes mdrop-wave{from{transform:translateX(0)}to{transform:translateX(-172px)}}
.mh-pct{font-size:40px;line-height:1;color:var(--ivory)}
.mh-cta{align-self:flex-start;margin-top:6px;padding:8px 14px;border-radius:18px;background:var(--champagne);color:var(--deep);font-weight:700;font-size:14px}
.memory-hero .small span{color:inherit}
.case{display:flex;flex-direction:column;gap:8px}
.case-row{display:flex;flex-wrap:wrap;gap:8px}
.case-chip{display:inline-flex;align-items:center;min-height:38px;padding:6px 14px;border-radius:19px;background:#fff;border:1px solid var(--line);color:var(--deep);font-weight:600;font-size:14px;text-decoration:none}
.case-chip.goal{background:var(--nude);border-color:var(--nude)}
.case-chip.edit{background:transparent;border-style:dashed;color:var(--muted)}
.case-empty{display:block;padding:14px 16px;border-radius:20px;border:1px dashed var(--bronze);color:var(--bronze-deep);font-weight:600;text-decoration:none}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.tile{display:flex;flex-direction:column;gap:6px;padding:14px;min-height:118px;border-radius:22px;background:#fff;border:1px solid var(--soft-line);color:var(--ink);text-decoration:none;transition:transform .15s ease}
.tile:active{transform:scale(.97)}
.tile b{font-size:15px;line-height:1.2}
.tile .small{color:var(--muted)}
.tile-ic{width:40px;height:40px;border-radius:14px;background:var(--cream);display:flex;align-items:center;justify-content:center;color:var(--bronze-deep)}
.tile-ic .s-drop{transform:scale(.8)}
.tile.main{grid-column:1 / -1;min-height:auto;flex-direction:row;align-items:center;gap:14px;background:var(--champagne);border-color:var(--champagne)}
.tile.main .tile-ic{background:var(--deep);color:var(--champagne)}
.tile.main .small{color:var(--bronze-deep)}
.tile.main b{font-size:17px}
.tile-tx{display:flex;flex-direction:column;gap:4px}
.tile.main .tile-tx{flex:1}
.slides{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 2px 8px;margin:0 -2px;scrollbar-width:none}
.slides::-webkit-scrollbar{display:none}
.slides > .slide,.slides > .slide-wrap{flex:0 0 84%;scroll-snap-align:start}
.slide-wrap > .slide{height:100%}
.slides > .slide-wrap[hidden]{display:none}
@media (prefers-reduced-motion: reduce){.mdrop-level,.mdrop-wave{animation:none}.tile{transition:none}}
/* Vague « pépite » (10/10) : « Faire ma routine » en plein écran, la série, l'armoire, le comptoir. */
main.view.ritual-view{background:radial-gradient(120% 80% at 50% 0%,#24352F 0%,var(--deep) 60%);color:var(--ivory);min-height:100vh;padding-bottom:calc(28px + env(safe-area-inset-bottom,0px))}
.icon-btn.light{background:rgba(255,253,249,.08);border-color:rgba(255,253,249,.18);color:var(--ivory)}
.ritual-dots{display:flex;gap:6px}
.ritual-dots i{flex:1;height:4px;border-radius:2px;background:rgba(255,253,249,.16);transition:background .3s ease}
.ritual-dots i.done{background:var(--champagne)}
.ritual-dots i.now{background:linear-gradient(90deg,var(--champagne),rgba(215,180,139,.35))}
.ritual-step{display:flex;flex-direction:column;gap:12px;margin-top:6vh;animation:sc-rise .4s ease-out both}
.ritual-n{width:56px;height:56px;border-radius:50%;border:2px solid var(--champagne);color:var(--champagne);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:28px;font-weight:600}
.ritual-name{margin:0;font-size:18px;font-weight:700;color:var(--champagne)}
.ritual-how{margin:0;font-size:17px;line-height:1.5;color:#E7ECE9}
.btn.ritual-ok{min-height:64px;font-size:17px}
.ritual-end{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:4vh;text-align:center;animation:sc-rise .5s ease-out both}
.ritual-end .mdrop{width:120px;height:151px}
.ritual-streak{margin:0;padding:8px 16px;border-radius:20px;background:var(--champagne);color:var(--deep);font-weight:800;font-size:15px}
.meteo-choice.ritual-meteo{flex:1;background:rgba(255,253,249,.06);border-color:rgba(255,253,249,.18);color:var(--ivory)}
.card.cab{gap:10px;border-left:5px solid var(--line)}
.card.cab b{overflow-wrap:anywhere}
.cab-head{justify-content:space-between;gap:6px 8px;align-items:flex-start;flex-wrap:wrap}.cab-head>.stack{flex:1 1 170px;min-width:0}
.cab-dates{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;align-items:end}.cab-dates>label{min-width:0}
@media (max-width:370px){.cab-dates{grid-template-columns:minmax(0,1fr)}}
.card.cab.red{border-left-color:#C0533A}.card.cab.orange{border-left-color:#D28A4B}.card.cab.green{border-left-color:#6F9A7B}.card.cab.grey{border-left-color:var(--line)}
.zone.grey{background:#EEF0EE;color:var(--muted)}
.counter{position:fixed;inset:0;z-index:100;background:#fff;color:#111;overflow:auto;padding:calc(16px + env(safe-area-inset-top,0px)) 18px 32px;display:flex;flex-direction:column;gap:14px}
.counter .pro-note{border:none;padding:0;font-size:20px}
.counter .pro-note .h2{font-size:28px}
.counter dl.facts dd{font-size:20px}
@media (prefers-reduced-motion: reduce){.ritual-step,.ritual-end{animation:none}}
/* Pastilles des ingrédients (10/10, 16h24) */
.verdict-row.yellow .dot{background:#D9B44A}
.pdot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:-1px;background:#B9B2A7}
.pdot.green{background:#5C9A6E}.pdot.yellow{background:#D9B44A}.pdot.orange{background:#D98A3D}.pdot.red{background:#B8503B}
.pmix{display:flex;flex-wrap:wrap;align-items:center;gap:2px 14px}
.famd{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.famd>summary{cursor:pointer;list-style:none}
.famd>summary::-webkit-details-marker{display:none}
.famd>summary::after{content:' ›';color:var(--muted,#8a8478)}
.famd[open]>summary::after{content:' ⌄'}
.famd>*:not(summary){display:block;margin-top:4px}
/* Échanger avec un fondateur (10/10) : choix du canal, fil de conversation, pastille de réponse non lue. */
.choices{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.choice{display:flex;flex-direction:column;gap:4px;text-align:left;padding:12px;border:1.5px solid var(--line);border-radius:16px;background:var(--ivory)}
.choice[aria-pressed="true"]{border-color:var(--deep);background:var(--cream)}
.thread{display:flex;flex-direction:column;gap:8px}
.bubble{display:flex;flex-direction:column;gap:4px;max-width:88%;padding:10px 12px;border-radius:16px;white-space:pre-wrap}
.bubble.me{align-self:flex-end;background:var(--deep);color:var(--ivory);border-bottom-right-radius:4px}
.bubble.me .muted{color:var(--tab-off)}
.bubble.sc{align-self:flex-start;background:var(--cream);border:1px solid var(--soft-line);border-bottom-left-radius:4px}
.badge-dot{margin-left:auto;min-width:24px;height:24px;padding:0 7px;border-radius:12px;background:var(--bronze);color:var(--ivory);font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center}
.express{display:flex;flex-direction:column;gap:6px}
/* Skin Memory OS adaptatif (10/10) : phrase d'accueil personnelle de chaque écran. */
.intro{font-family:var(--display);font-size:20px;line-height:1.3;color:var(--bronze-deep)}
/* Mémoire des réactions (10/10) : le statut se lit aussi par un mot et un symbole, jamais par la couleur seule. */
.card.urgent{border:2px solid #9a3b2f;background:var(--alert-bg);color:var(--alert-ink)}
.card.alert-rx{border:2px solid #b34a32;background:#FFF1EC}
.card.alert-rx b{color:#7A2E1C}
.card.ok-rx{border:1.5px solid #9DB7A6;background:var(--ok-bg)}
.card.ok-rx b{color:var(--ok-ink)}
.card.muted{opacity:.6}
/* Mon mémo peau (10/10, 18h46) : la carte qu'on tend au comptoir. Une seule audace — le bandeau sombre et la routine en
   images — le reste reste sobre. Chaque partie a sa couleur de sens, toujours doublée d'un mot ou d'un symbole. */
.skinmemo{display:flex;flex-direction:column;gap:14px}
.memo-hero{background:var(--deep);color:var(--ivory);border-radius:26px;padding:22px 20px 18px;display:flex;flex-direction:column;gap:6px;position:relative;overflow:hidden}
.memo-hero::after{content:"";position:absolute;right:-60px;top:-60px;width:200px;height:200px;border-radius:50%;border:28px solid rgba(215,180,139,.16)}
.memo-kicker{font-size:13px;font-weight:700;color:var(--champagne)}
.memo-name{font-family:var(--display);font-size:44px;line-height:1;margin:0;color:var(--ivory)}
.memo-sub{margin:0;font-size:13px;color:#C9CFCB;max-width:30ch}
.memo-count{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.memo-count span{background:rgba(255,253,249,.1);border:1px solid rgba(215,180,139,.35);border-radius:999px;padding:5px 11px;font-size:13px;color:#E9E3D8}
.memo-count b{color:var(--champagne);font-size:15px}
.memo-sec{border-left:5px solid var(--line);padding:4px 0 4px 14px;display:flex;flex-direction:column;gap:8px}
.memo-sec h2{margin:0;font-size:17px;color:var(--deep)}
.memo-sec.t-alert{border-color:#B34A32}.memo-sec.t-alert h2{color:#7A2E1C}
.memo-sec.t-ok{border-color:#5E8A70}.memo-sec.t-ok h2{color:var(--ok-ink)}
.memo-sec.t-routine{border-color:var(--bronze)}
.memo-sec.t-actives{border-color:var(--champagne)}
.memo-sec.t-skin{border-color:#7D93B5}
.memo-sec.t-prefs{border-color:var(--sage)}
.memo-facts{margin:0;display:flex;flex-direction:column;gap:6px}
.memo-facts div{display:flex;flex-direction:column;gap:2px;padding-bottom:6px;border-bottom:1px solid var(--soft-line)}
.memo-facts div:last-child{border-bottom:none;padding-bottom:0}
.memo-facts dt{font-weight:700;font-size:14px}.memo-facts dd{margin:0;font-size:14px}
.memo-strip{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 10px;margin-right:-18px;padding-right:18px}
.memo-prod{margin:0;flex:0 0 108px;scroll-snap-align:start;display:flex;flex-direction:column;gap:6px}
.memo-pic{position:relative;width:108px;height:108px;border-radius:24px;overflow:hidden;display:grid;place-items:center;box-shadow:0 0 0 3px var(--ivory),0 0 0 6px var(--line)}
.memo-pic img{width:100%;height:100%;object-fit:cover}
.memo-pic>span:first-child{font-family:var(--display);font-size:46px;color:#fff}
.memo-prod.v-keep .memo-pic{box-shadow:0 0 0 3px var(--ivory),0 0 0 6px #5E8A70}
.memo-prod.v-pause .memo-pic{box-shadow:0 0 0 3px var(--ivory),0 0 0 6px #C7923E}
.memo-prod.v-stop .memo-pic{box-shadow:0 0 0 3px var(--ivory),0 0 0 6px #B34A32}
.memo-prod.v-check .memo-pic{box-shadow:0 0 0 3px var(--ivory),0 0 0 6px #9AA3A0}
.memo-badge{position:absolute;right:6px;bottom:6px;width:26px;height:26px;border-radius:50%;background:var(--ivory);color:var(--deep);display:grid;place-items:center;font-weight:800;font-size:14px}
.memo-prod figcaption{display:flex;flex-direction:column;font-size:12px;line-height:1.25}
.memo-prod figcaption b{font-size:13px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.memo-prod figcaption span{color:var(--muted)}
.memo-state{font-weight:700;color:var(--deep)!important}
.memo-shots{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.memo-shots figure{margin:0;display:flex;flex-direction:column;gap:4px}
.memo-shots img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:16px}
.memo-shots figcaption{font-size:12px;color:var(--muted)}
.memo-pills{display:flex;flex-wrap:wrap;gap:6px}
.mp{border-radius:999px;padding:6px 12px;font-size:13px;font-weight:700;border:1.5px solid}
.mp-red{background:#FFF1EC;border-color:#E2B3A6;color:#7A2E1C}
.mp-orange{background:#FFF6E6;border-color:#E8CFA0;color:#7A5418}
.mp-green{background:var(--ok-bg);border-color:#B9CDBF;color:var(--ok-ink)}
.memo-foot{font-size:12px;color:var(--muted);margin:0}
.memo-actions{display:flex;flex-direction:column;gap:10px}
.memo-how ol{margin:8px 0}
.counter .cm-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;flex:1;min-height:0}
.counter .cm-card{flex:0 0 100%;scroll-snap-align:center;overflow-y:auto;font-size:20px}
.counter .cm-card .memo-sec h2{font-size:26px}
.counter .cm-card .memo-facts dt,.counter .cm-card .memo-facts dd{font-size:19px}
.counter .cm-card .memo-prod{flex-basis:140px}.counter .cm-card .memo-pic{width:140px;height:140px}
.cm-dots{display:flex;gap:6px}.cm-dots i{width:8px;height:8px;border-radius:50%;background:var(--line)}.cm-dots i.on{background:var(--deep)}
@media print{
  .memo-hero{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .memo-strip{flex-wrap:wrap;overflow:visible}
  .memo-sec{break-inside:avoid}
  .memo-how,.memo-actions{display:none!important}
}
/* Ronan (10/10 à 20h09) : deux analyses, deux signes. Pastille ronde = passeport cutané ; losange violet = réaction déclarée. */
.pp-dot{display:inline-block;width:11px;height:11px;border-radius:50%;vertical-align:-1px;background:#B9B2A7;box-shadow:0 0 0 2px #fff}
.pp-dot.green{background:#5C9A6E}.pp-dot.yellow{background:#D9B44A}.pp-dot.orange{background:#D98A3D}.pp-dot.red{background:#B8503B}.pp-dot.grey{background:#B9B2A7}
.rx-badge{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;padding:3px 10px 3px 8px;border-radius:999px;background:#F2EBFA;border:1px solid #CDB8E6;color:#4F2A7A;font-size:12px;font-weight:700;line-height:1.4}
.rx-badge i{font-style:normal;color:#6B3FA0}
.rx-badge.joined{background:#6B3FA0;border-color:#6B3FA0;color:#fff}.rx-badge.joined i{color:#fff}
.verdict-row.has-rx{border-color:#CDB8E6;box-shadow:inset 4px 0 0 #6B3FA0}
.signals{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center}
details.legend{font-size:13px}details.legend summary{cursor:pointer;color:var(--muted);font-weight:600}
/* Verdict de la fiche produit (D-003) : couleur, symbole et libellé. */
.verdict .verdict-title{display:flex;align-items:center;gap:10px}
.verdict .v-ic{flex:none;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;font-family:system-ui,sans-serif;font-size:18px;font-weight:800;color:#fff;background:#9AA3A0}
.verdict.v-suitable{border-color:#9CC3A8;background:#EEF6F0}.verdict.v-suitable .v-ic{background:#4E8B62}
.verdict.v-adjust{border-color:#E3CF8E;background:#FBF6E6}.verdict.v-adjust .v-ic{background:#B8952E}
.verdict.v-later{border-color:#E8C39A;background:#FFF4E8}.verdict.v-later .v-ic{background:#C7782E}
.verdict.v-unsuitable{border:2px solid #C9806E;background:#FFF0EB}.verdict.v-unsuitable .v-ic{background:#B34A32}
.verdict.v-unknown{border-color:#CFCBC4;background:#F4F2EE}.verdict.v-unknown .v-ic{background:#8B918E}
/* Étape d'une routine à ne pas appliquer (C-003, D-001). */
.step.aside{opacity:.85}.step.aside .n{background:#B34A32;color:#fff}.step.aside s{color:var(--muted)}
.pill.aside-pill{background:#FFF0EB;border-color:#E2B3A6;color:#7A2E1C}
/* Mémo : anneau = passeport ; losange violet = réaction déclarée. */
.memo-prod.c-green .memo-pic{box-shadow:0 0 0 3px var(--ivory),0 0 0 6px #5E8A70}
.memo-prod.c-yellow .memo-pic{box-shadow:0 0 0 3px var(--ivory),0 0 0 6px #C9A73F}
.memo-prod.c-orange .memo-pic{box-shadow:0 0 0 3px var(--ivory),0 0 0 6px #C7923E}
.memo-prod.c-red .memo-pic{box-shadow:0 0 0 3px var(--ivory),0 0 0 6px #B34A32}
.memo-prod.c-grey .memo-pic{box-shadow:0 0 0 3px var(--ivory),0 0 0 6px #9AA3A0}
.memo-rx{position:absolute;left:6px;top:6px;width:24px;height:24px;border-radius:7px;background:#6B3FA0;color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;box-shadow:0 0 0 2px #fff}
.memo-state.rx{color:#4F2A7A;font-weight:700}
/* Routine guidée (fond sombre) : les cartes gardent un texte foncé lisible. */
.ritual-view .card, .ritual-view .card b, .ritual-view .card span, .ritual-view .card a{color:#1F2A26}
.ritual-view .card.alert-rx b{color:#7A2E1C}

/* Votre peau en un regard (Ronan, 11/10) : cinq repères, une couleur chacun, pour s'orienter d'un coup d'œil. */
:root{--c-type:#1F5C5A;--c-type-bg:#E4F0EE;--c-state:#9A5B0E;--c-state-bg:#FBF0DC;--c-barrier:#2E5B8A;--c-barrier-bg:#E7EEF7;--c-inflam:#A3475B;--c-inflam-bg:#F8E8EB;--c-goals:#4C6B4F;--c-goals-bg:#E8F0E6}
.glance{gap:10px}
.g-row{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:18px}
.g-dot{flex:none;width:12px;height:12px;margin-top:5px;border-radius:6px}
.g-tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.g-title{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.g-main{font-size:17px;line-height:1.25;color:var(--deep)}
.g-type{background:var(--c-type-bg)} .g-type .g-dot{background:var(--c-type)} .g-type .g-title{color:var(--c-type)}
.g-state{background:var(--c-state-bg)} .g-state .g-dot{background:var(--c-state)} .g-state .g-title{color:var(--c-state)}
.g-barrier{background:var(--c-barrier-bg)} .g-barrier .g-dot{background:var(--c-barrier)} .g-barrier .g-title{color:var(--c-barrier)}
.g-inflam{background:var(--c-inflam-bg)} .g-inflam .g-dot{background:var(--c-inflam)} .g-inflam .g-title{color:var(--c-inflam)}
.g-goals{background:var(--c-goals-bg)} .g-goals .g-dot{background:var(--c-goals)} .g-goals .g-title{color:var(--c-goals)}
.g-type .g-main{font-family:var(--display);font-size:24px;font-weight:600}
.step.morning-cleanse{opacity:.85;border-left:3px solid var(--c-state)}
/* « Votre routine, c'est fait ? » (Ronan, 11/10) : une question, trois réponses, comme un rappel de médicament. */
.ritual-ask{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:6vh;animation:sc-rise .5s ease-out both}
.ritual-ask .mdrop{width:110px;height:138px}
.btn.ghost-light{background:transparent;color:var(--ivory);border:1px solid rgba(255,253,249,.55);min-height:56px}
.ritual-list{color:#C9D0CC;font-size:14px}
.ritual-list summary{cursor:pointer;font-weight:700;color:var(--ivory);padding:8px 0}
.ritual-list ol{margin:6px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:4px}
.chip.ritual-chip{background:transparent;color:var(--ivory);border-color:rgba(255,253,249,.45);min-height:48px}
.chip.ritual-chip[aria-pressed="true"]{background:var(--ivory);color:var(--deep)}
@media (prefers-reduced-motion: reduce){.ritual-ask{animation:none}}
/* Armoire anti-gaspi (Ronan, 11/10) : la jauge se remplit comme une goutte de sérum. */
.gauge{height:10px;border-radius:5px;background:var(--cream);overflow:hidden}
.gauge i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,var(--champagne),var(--bronze))}
.pill.cab-pill{flex:none;font-size:12px}
.pill.cab-pill.green{background:var(--ok-bg);color:var(--ok-ink)} .pill.cab-pill.orange{background:#FBEBDD;color:#8A4B17} .pill.cab-pill.red{background:var(--alert-bg);color:var(--alert-ink)} .pill.cab-pill.grey{background:#EEF0EE;color:var(--muted)}
/* Quatre niveaux de prix d'un coup (Ronan, 11/10). */
.tier-row{display:flex;gap:10px;align-items:flex-start;padding:6px 0;border-radius:14px}
.tier-row .tier-name{flex:none;width:92px;font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--bronze-deep);padding-top:12px}
.tier-row.on{background:var(--cream);padding:6px 8px}
.tier-row.empty .small{padding-top:12px}
.small.suggest{color:var(--deep)}
/* Barre personnalisable (Ronan, 11/10) : appui long, les icônes tremblent, on range comme sur l'iPhone. */
.tabs-editor{position:fixed;inset:0;z-index:90;background:rgba(22,34,31,.45);display:flex;align-items:flex-end;justify-content:center;animation:sc-rise .25s ease-out both}
.tabs-editor .sheet{width:min(480px,100%);background:var(--ivory);border-radius:28px 28px 0 0;padding:20px 18px calc(24px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:12px}
.tabs-editor .slots{display:flex;justify-content:space-around;align-items:center;background:var(--deep);border-radius:30px;padding:10px 6px;touch-action:none}
.tabs-editor .slot{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:62px;padding:6px 4px;border-radius:16px;border:1px dashed transparent;background:none;color:var(--ivory);font-size:10.5px;font-weight:700;touch-action:none}
.tabs-editor .slot.on{border-color:var(--champagne);background:rgba(215,180,139,.18)}
.tabs-editor .slot-scan{width:44px;height:44px;border-radius:50%;background:var(--ivory);color:var(--deep);display:flex;align-items:center;justify-content:center}
.tabs-editor .shortcuts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tabs-editor .shortcut{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 6px;border-radius:18px;border:1px solid var(--line);background:#fff;color:var(--deep);font-size:12px;font-weight:700}
@keyframes jiggle{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}}
.tabs-editor .slot.jiggle{animation:jiggle .28s ease-in-out infinite}
.tabs-editor .slot.jiggle:nth-child(even){animation-delay:.14s}
.tab{-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}
@media (prefers-reduced-motion: reduce){.tabs-editor .slot.jiggle{animation:none}}
/* Accueil en trois familles (Ronan, 11/10) : Ma peau (sarcelle), Mes produits (ambre), Mon accompagnement (bleu). */
:root{--c-skin:#1F5C5A;--c-skin-bg:#E4F0EE;--c-prod:#9A5B0E;--c-prod-bg:#FBF0DC;--c-care:#2E5B8A;--c-care-bg:#E7EEF7}
.tgroup{display:flex;flex-direction:column;gap:10px}
.tgroup-title{margin:0;display:flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.tgroup-title i{width:10px;height:10px;border-radius:5px;display:inline-block}
.g-skin .tgroup-title{color:var(--c-skin)} .g-skin .tgroup-title i{background:var(--c-skin)} .g-skin .tile-ic{background:var(--c-skin-bg);color:var(--c-skin)} .g-skin .tile{border-top:3px solid var(--c-skin)}
.g-products .tgroup-title{color:var(--c-prod)} .g-products .tgroup-title i{background:var(--c-prod)} .g-products .tile-ic{background:var(--c-prod-bg);color:var(--c-prod)} .g-products .tile{border-top:3px solid var(--c-prod)}
.g-care .tgroup-title{color:var(--c-care)} .g-care .tgroup-title i{background:var(--c-care)} .g-care .tile-ic{background:var(--c-care-bg);color:var(--c-care)} .g-care .tile{border-top:3px solid var(--c-care)}
.tgroup .tile{min-height:104px}
.skin-strip{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px 14px;border-radius:18px;background:var(--c-skin-bg);text-decoration:none;color:var(--deep)}
.skin-strip .ss-type{font-family:var(--display);font-size:20px;font-weight:600;color:var(--c-skin)}
.skin-strip .ss-state{font-size:13px;font-weight:700;color:var(--c-state);background:var(--c-state-bg);padding:3px 10px;border-radius:12px}
.skin-strip .ss-go{margin-left:auto;font-size:13px;font-weight:800;color:var(--c-skin)}

/* Les fondateurs (photo fournie par Ronan le 11/10) */
.founders-hero{position:relative;margin:0;border-radius:26px;overflow:hidden;aspect-ratio:4/5;max-height:420px;background:var(--cream)}
.founders-hero img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 30%}
.founders-hero figcaption{position:absolute;left:0;right:0;bottom:0;padding:40px 18px 16px;background:linear-gradient(transparent,rgba(22,34,31,.78));color:var(--ivory);display:flex;flex-direction:column;gap:2px}
.founders-hero figcaption b{font-family:var(--display);font-size:26px;font-weight:600;line-height:1.1}
.founders-hero figcaption span{font-size:13px;opacity:.9}
a.chip{text-decoration:none;display:inline-flex;align-items:center}
/* V-096, V-097 : « Ma routine dans mon budget » (économiser ici, meilleure alternative). */
.plan-box{padding:10px 12px;border-radius:14px;background:var(--cream)}
.btn.upsell{white-space:normal;line-height:1.35}
/* V-103 (option A) : une action principale et deux raccourcis ; toutes les rubriques rangées plus bas. */
.shortcuts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.shortcut{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:12px 14px;border-radius:20px;background:#fff;border:1px solid var(--soft-line);color:var(--ink);text-decoration:none;transition:transform .15s ease}
.shortcut:active{transform:scale(.97)}
.shortcut .tile-ic{flex:0 0 auto}
.shortcut b{font-size:14px;line-height:1.2}
.shortcut .small{color:var(--muted)}
.shortcut .tile-tx{min-width:0}
details.all-tiles{border-top:1px solid var(--line);padding-top:12px}
details.all-tiles summary{display:flex;flex-direction:column;gap:2px;cursor:pointer;list-style:none;font-weight:800}
details.all-tiles summary::-webkit-details-marker{display:none}
details.all-tiles summary span:first-child::after{content:' ▾';color:var(--bronze-deep)}
details.all-tiles[open] summary span:first-child::after{content:' ▴'}
@media (prefers-reduced-motion: reduce){.shortcut{transition:none}}
/* Ronan (13/10) : les noms exacts de la liste INCI, repérables d'un coup d'œil ; surlignés quand ils sont dans les produits de la personne. */
.inci-names{display:inline-flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline;min-width:0}
.inci-name{font-weight:800;font-size:13px;letter-spacing:.03em;color:var(--deep);overflow-wrap:anywhere}
.inci-name.mine{background:var(--nude);border-radius:6px;padding:1px 6px}
.inci-mine{overflow-wrap:anywhere}
.inci-sep{color:var(--muted);font-weight:400}
.inci-item{display:inline-flex;gap:6px;align-items:baseline;min-width:0}
/* Bloc acné (13/10) : l'orientation vers un médecin se voit d'abord ; le moral, avec douceur. */
.card.alert{border:2px solid var(--alert-line);background:var(--alert-bg)}
.card.alert .eyebrow{color:var(--alert-ink)}
.card.soft{background:#F3EEF6;border-color:transparent}
.ritual-tip{display:block;margin-top:2px;opacity:.9}
.ritual-anim{display:block;margin-top:4px;padding:0;text-align:left}
/* Ronan (13/10) : l'histoire du fondateur, en ses mots. */
.founder-story{margin:0;padding:12px 16px;border-left:3px solid var(--champagne);background:var(--cream);border-radius:0 14px 14px 0}
.founder-story p{margin:0;font-family:var(--display);font-size:19px;line-height:1.3;color:var(--deep)}
.founder-story cite{display:block;margin-top:6px;font-style:normal;font-size:13px;color:var(--muted)}

/* ---------- La voix des utilisateurs (13/10) : aide, recherche, signalement, souci soudain, portes d'orientation ---------- */
.sheet-layer{position:fixed;inset:0;z-index:95;background:rgba(22,34,31,.45);display:flex;align-items:flex-end;justify-content:center;animation:sc-rise .22s ease-out both}
.sheet-layer .sheet{width:min(480px,100%);max-height:88vh;overflow:auto;background:var(--ivory);border-radius:28px 28px 0 0;padding:20px 18px calc(24px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:12px;box-shadow:0 -20px 60px rgba(16,24,22,.25)}
.help-fab{position:fixed;z-index:21;right:max(12px,calc(50% - 228px));bottom:calc(90px + env(safe-area-inset-bottom,0px));width:46px;height:46px;border-radius:50%;border:2px solid #fff;background:linear-gradient(135deg,#E9A27C,#C9704B);color:#fff;font-weight:800;font-size:22px;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 24px rgba(201,112,75,.38)}
.help-opt{display:flex;align-items:center;gap:14px;width:100%;padding:14px;border-radius:20px;border:1px solid var(--soft-line);background:#fff;color:var(--deep);text-align:left}
.help-opt .tile-tx{display:flex;flex-direction:column;gap:2px}
.help-opt .tile-tx .small{color:var(--muted)}
.help-ic{flex:none;width:42px;height:42px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:19px;color:#fff}
.help-opt.urgent .help-ic{background:linear-gradient(135deg,#E36B5B,#B4382B)}
.help-opt.doubt .help-ic{background:var(--deep);font-family:var(--display)}
.help-opt.search .help-ic{background:linear-gradient(135deg,#7FA392,#4E7565)}
.help-opt.idea .help-ic{background:linear-gradient(135deg,#E5C07B,#C08E3E)}
.help-opt.human .help-ic{background:linear-gradient(135deg,#B79BC9,#7C5B95)}
.help-opt.urgent{border-color:#F0C9C0;background:#FFF6F3}
.search-bar{display:flex;align-items:center;gap:10px;width:100%;min-height:50px;padding:0 16px;border-radius:25px;border:1px solid var(--line);background:#fff;color:var(--muted);font-size:14.5px;text-align:left;box-shadow:0 4px 14px rgba(22,34,31,.06)}
.search-ic{flex:none;width:30px;height:30px;border-radius:50%;background:var(--cream);color:var(--deep);display:flex;align-items:center;justify-content:center;font-weight:800}
.search-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:16px;background:#fff;border:1px solid var(--soft-line);text-decoration:none;color:var(--deep)}
.search-row .tile-tx{display:flex;flex-direction:column;gap:1px;min-width:0}
.search-row .small{color:var(--muted)}
.report-btn{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;padding:6px 0;border:none;background:none;color:var(--muted);font-size:12.5px;font-weight:700;text-decoration:underline;text-underline-offset:3px;text-align:left}
.report-btn>span{color:#C9704B;text-decoration:none}
.urgent-card{background:linear-gradient(160deg,#FFF1EC,#FFE3D8);border:1px solid #F3C7B6}
.urgent-card .h1{color:#7A2E1C}
.urgent-line{padding:10px 12px;border-radius:14px;background:#fff;font-size:13.5px;color:#7A2E1C}
.urgent-line a{color:#B4382B;font-weight:800}
.doors{gap:10px}
.door{display:flex;align-items:center;gap:12px;padding:12px;border-radius:18px;background:var(--cream);color:var(--deep);text-decoration:none}
.door .tile-tx{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.door .small{color:var(--muted)}
.door-ic{flex:none;width:38px;height:38px;border-radius:12px;background:#fff;color:#4A74B0;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px}
.door-go{flex:none;color:var(--bronze);font-weight:800}
details.more>summary{cursor:pointer;font-weight:700;font-size:14px;color:var(--deep);padding:8px 0}
.idea-hero{background:linear-gradient(160deg,#FBF3E2,#F3E3C2);border:none}
.chip.idea-aime[aria-pressed="true"]{background:#3F7A5E;border-color:#3F7A5E}
.chip.idea-aime_pas[aria-pressed="true"]{background:#B4382B;border-color:#B4382B}
.chip.idea-aimerait[aria-pressed="true"]{background:#C08E3E;border-color:#C08E3E}
.brand-mark{flex:none;width:34px;height:34px;border-radius:50%;background:var(--deep);color:var(--champagne);display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;letter-spacing:.04em;overflow:hidden}
.brand-mark img{width:100%;height:100%;object-fit:contain;background:#fff}
.view.souci-screen{gap:14px}
.brandbar{position:relative}
.bo-pill{position:absolute;right:0;top:-8px;padding:5px 9px;border-radius:12px;background:var(--deep);color:var(--champagne);font-size:11px;font-weight:800;text-decoration:none}
/* Ma routine de l'intérieur (13/10) */
.inner-hero{background:linear-gradient(160deg,#EAF3EC,#D6E8DB);border:none}
.inner-hero .h1{color:#24493A}
.inner-tabs{display:flex;gap:8px;flex-wrap:wrap}
.inner-tabs .chip{text-decoration:none}
.basic{display:flex;flex-direction:column;gap:2px;padding:12px;border-radius:16px;background:var(--cream)}
.nutrient{display:flex;flex-direction:column;gap:3px;padding:10px 12px;border-radius:14px;background:#F7F4EE}
.nutrient .ev{align-self:flex-start;font-size:11px;font-weight:800;padding:2px 8px;border-radius:10px;text-transform:uppercase;letter-spacing:.04em}
.ev-ok{background:#E3EBE5;color:#2F4A3D}.ev-mid{background:#FBF0D9;color:#7A5A16}.ev-low{background:#F3E6E1;color:#7A2E1C}
/* Le Cercle (13/10) */
.cercle-hero{background:linear-gradient(160deg,#F3ECF8,#E4D6EF);border:none}
.cercle-hero .h1{color:#4B3263}
.cercle-topics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.cercle-topics.mini{display:flex;flex-wrap:wrap;gap:6px}
.topic-chip{padding:6px 10px;border-radius:14px;background:#fff;border:1px solid var(--soft-line);font-size:12.5px;font-weight:700}
.topic-card{display:flex;flex-direction:column;gap:4px;padding:14px;border-radius:20px;background:#fff;border:1px solid var(--soft-line);text-decoration:none;color:var(--deep);min-width:0}
.topic-card b{font-size:14px;line-height:1.25}
.topic-emoji{font-size:26px}
.cercle-post{display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:20px;background:#fff;border:1px solid var(--soft-line);text-decoration:none;color:var(--deep)}
.cercle-post .cercle-post{margin-left:10px;background:var(--cream);border:none}
.cercle-post.founder{border:2px solid var(--champagne)}
.cercle-post.pending{opacity:.7;border-style:dashed}
.cercle-post.mini span:last-child{font-size:14px}
.like{border:none;background:none;padding:4px 0;font-weight:800;color:var(--muted)}
.like.on{color:#C9704B}
/* Photos de produits et logos (13/10) */
.pthumb{position:relative;flex:none;width:48px;height:48px;border-radius:14px;background:#fff;border:1px solid var(--soft-line);display:flex;align-items:center;justify-content:center;overflow:hidden}
.pthumb img{width:100%;height:100%;object-fit:contain;background:#fff}
.pthumb.no-photo{background:linear-gradient(150deg,#F7EFE5,#EAD9C6);border-color:transparent}
.pthumb.no-photo .brand-mark{width:30px;height:30px;font-size:11px}
.pthumb .pcat{position:absolute;right:3px;bottom:1px;font-size:11px;color:var(--bronze-deep)}
.pthumb .pbadge{position:absolute;left:-1px;top:-1px;min-width:18px;height:18px;padding:0 5px;border-radius:0 0 9px 0;background:var(--deep);color:var(--ivory);font-size:10.5px;font-weight:800;display:flex;align-items:center;justify-content:center}
.pthumb.big{width:112px;height:132px;border-radius:22px;box-shadow:0 10px 24px rgba(22,34,31,.10)}
.pthumb.big.no-photo .brand-mark{width:58px;height:58px;font-size:18px}
.pthumb.big .pcat{font-size:18px;right:8px;bottom:6px}
.pthumb .pcredit{position:absolute;left:0;right:0;bottom:0;padding:2px 4px;background:rgba(255,255,255,.85);font-size:8.5px;color:var(--muted);text-align:center}
.pthumb.loading{background:linear-gradient(100deg,#F7F2EC 30%,#EFE4D6 50%,#F7F2EC 70%);background-size:300% 100%;animation:pshine 1.4s ease-in-out infinite}
.pthumb.loading img{opacity:0}
@keyframes pshine{from{background-position:100% 0}to{background-position:0 0}}
@media (prefers-reduced-motion:reduce){.pthumb.loading{animation:none}}
.brand-mark.logo{background:#fff;border:1px solid var(--soft-line);padding:3px}
.brand-mark.big{width:56px;height:56px;font-size:16px}
.product-hero{display:flex;gap:16px;align-items:center;padding:14px;border-radius:26px;background:linear-gradient(160deg,#FFFFFF,#F4EDE3);border:1px solid var(--soft-line)}
.prod-row{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 8px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.prod-tile{flex:none;width:148px;scroll-snap-align:start;display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:18px;background:#fff;border:1px solid var(--soft-line);text-decoration:none;color:var(--deep)}
.prod-tile .pthumb{width:100%;height:96px;border-radius:12px}
.prod-tile .tile-tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.prod-tile b{font-size:13px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.prod-tile.mine{border:2px solid #9DC3A9}
.ask-safy{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:16px;background:var(--cream);color:var(--deep);text-decoration:none;font-size:13.5px;font-weight:700}
/* Mémo pour les pros : mes marques (13/10) */
.memo-brands{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.mb-col{display:flex;flex-direction:column;gap:6px;padding:10px;border-radius:16px}
.mb-col.ok{background:#EAF3EC}.mb-col.no{background:#FBECE8}
.mb{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px}
.mb .brand-mark{width:30px;height:30px}
/* Passeport : cases barrière et inflammation à la couleur de l'indice (13/10) */
.g-row.idx-green{background:#E3F1E7}.g-row.idx-green .g-dot{background:#3F8A5C}.g-row.idx-green .g-title{color:#2F5A3D}
.g-row.idx-yellow{background:#FBF2D2}.g-row.idx-yellow .g-dot{background:#D9A520}.g-row.idx-yellow .g-title{color:#6B5310}
.g-row.idx-orange{background:#FBE3CC}.g-row.idx-orange .g-dot{background:#E07A2E}.g-row.idx-orange .g-title{color:#7A4415}
.g-row.idx-red{background:#F8D9D1}.g-row.idx-red .g-dot{background:#C7402E}.g-row.idx-red .g-title{color:#7A2E1C}
.g-row.idx .g-dot{width:14px;height:14px;border-radius:7px;box-shadow:0 0 0 3px rgba(255,255,255,.7)}
.idx-chip{margin-left:8px;padding:1px 8px;border-radius:10px;background:rgba(255,255,255,.75);font-size:10.5px;font-weight:800;letter-spacing:.02em;text-transform:none}
.idx-card.idx-green{border-left:6px solid #3F8A5C}.idx-card.idx-yellow{border-left:6px solid #D9A520}.idx-card.idx-orange{border-left:6px solid #E07A2E}.idx-card.idx-red{border-left:6px solid #C7402E}
.pro-cta{display:flex;align-items:center;gap:12px;padding:14px;border-radius:22px;background:linear-gradient(135deg,#1F3A33,#16221F);color:var(--ivory);text-decoration:none;box-shadow:0 10px 24px rgba(22,34,31,.18)}
.pro-cta .small{color:#C9D0CC}
.pro-cta .tile-tx{display:flex;flex-direction:column;gap:2px;flex:1}
.pro-ic{flex:none;width:42px;height:42px;border-radius:14px;background:var(--champagne);color:var(--deep);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:800}
.pro-cta .door-go{color:var(--champagne)}
/* Installer l'application (13/10) */
.install-card{display:flex;flex-direction:row;align-items:center;gap:14px;background:var(--deep);color:var(--ivory);border:none}
.install-ic img{width:54px;height:54px;border-radius:14px;box-shadow:0 6px 16px rgba(0,0,0,.25)}
.install-hero{align-items:center;text-align:center;background:linear-gradient(160deg,#1F3A33,#16221F);color:var(--ivory);border:none}
.install-hero .h1{color:var(--ivory)} .install-hero .small{color:#D9DED9}
.install-big{width:84px;height:84px;border-radius:22px;box-shadow:0 10px 26px rgba(0,0,0,.3)}
.istep{display:flex;align-items:center;gap:12px;padding:14px;border-radius:20px;background:#fff;border:1px solid var(--soft-line)}
.istep .tile-tx{display:flex;flex-direction:column;gap:2px;flex:1}
.istep .small{color:var(--muted)}
.istep-n{flex:none;width:32px;height:32px;border-radius:50%;background:var(--deep);color:var(--champagne);display:flex;align-items:center;justify-content:center;font-weight:800}
.istep-ic{flex:none;font-size:22px;color:var(--bronze)}
/* ---------- Coup de jeune (13/10) : les rayons de la parapharmacie, une couleur par univers ---------- */
:root{--r-peau:#3F7A68;--r-peau-bg:#E2F0EA;--r-prod:#C9673E;--r-prod-bg:#FCE6DA;--r-miel:#B9832A;--r-miel-bg:#FBF0D6;--r-cercle:#7C5B95;--r-cercle-bg:#EFE6F6;--r-sos:#C7402E;--r-sos-bg:#FDE3DE;--r-pro:#16221F;--r-pro-bg:#EFE3CF}
.rayons{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 6px;margin:0 -18px;padding-left:18px;padding-right:18px;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.rayons::-webkit-scrollbar{display:none}
.rayon{flex:none;width:62px;display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;color:var(--deep);scroll-snap-align:start}
.rayon-ic{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid #fff;box-shadow:0 6px 16px rgba(22,34,31,.10);transition:transform .15s ease}
.rayon:active .rayon-ic{transform:scale(.94)}
.rayon-tx{font-size:11.5px;font-weight:700;line-height:1.15;text-align:center}
.r-glyph{font-size:24px;line-height:1}
.r-peau .rayon-ic{background:var(--r-peau-bg);color:var(--r-peau)}
.r-prod .rayon-ic{background:var(--r-prod-bg);color:var(--r-prod)}
.r-miel .rayon-ic{background:var(--r-miel-bg);color:var(--r-miel)}
.r-cercle .rayon-ic{background:var(--r-cercle-bg);color:var(--r-cercle)}
.r-sos .rayon-ic{background:var(--r-sos-bg);color:var(--r-sos)}
.r-pro .rayon-ic{background:var(--r-pro-bg);color:var(--r-pro)}
.r-safy .rayon-ic{background:var(--deep)}
.r-safy .s-drop{transform:scale(.9)}
@media (prefers-reduced-motion: reduce){.rayon-ic{transition:none}}
.shelf .prod-row{margin:0 -18px;padding-left:18px;padding-right:18px}
.shelf .prod-tile{width:132px;background:linear-gradient(180deg,#fff 60%,#FAF6F0)}
.cercle-teaser{flex-direction:row;align-items:center;gap:14px;background:linear-gradient(150deg,#F6F0FA,#EADFF3);border:none;text-decoration:none;color:var(--deep)}
.cercle-teaser .small{color:#5E4A72}
.cercle-dot{flex:none;width:46px;height:46px;border-radius:50%;background:var(--r-cercle);color:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:800}
/* Les familles de tuiles reprennent les couleurs des rayons */
:root{--c-skin:var(--r-peau);--c-skin-bg:var(--r-peau-bg);--c-prod:var(--r-prod);--c-prod-bg:var(--r-prod-bg);--c-care:var(--r-cercle);--c-care-bg:var(--r-cercle-bg)}
details.more-info{border-radius:14px}
details.more-info>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:14px;background:var(--cream);font-size:12.5px;font-weight:800;color:var(--deep)}
details.more-info>summary::-webkit-details-marker{display:none}
details.more-info>summary::after{content:'+';font-size:14px;color:var(--bronze)}
details.more-info[open]>summary::after{content:'–'}
.verif-hero{background:linear-gradient(160deg,#FFF3EA,#FCE6DA);border:none}
.verif-hero .h1{color:#7A3B1E}

/* Terminer ma mémoire de peau (Ronan, 13/10 à 22h03) */
.finish-mem{gap:10px;border:1.5px solid var(--champagne)}
.fm-row{display:flex;align-items:flex-start;gap:12px;padding:10px 12px;border-radius:14px;background:var(--cream);text-decoration:none;color:inherit}
.fm-gain{flex:none;min-width:50px;margin-top:2px;text-align:center;font-weight:800;font-size:14px;color:var(--deep);background:#fff;border-radius:10px;padding:6px 4px;border:1px solid var(--soft-line)}
.fm-cta{font-size:13.5px;font-weight:800;color:var(--bronze-deep);margin-top:2px}

/* Mode d'emploi Safety Care (Ronan, 13/10 à 22h03) */
.g-where{margin:0;font-size:14.5px}
.g-steps,.g-care{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:7px;font-size:14.5px;line-height:1.45}
.g-care{list-style:none;padding-left:0}
.g-care li{padding:8px 10px;border-radius:10px;background:var(--cream)}
.g-steps li.gl-care{color:var(--ink)}
.g-tag{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;background:#F3E3D3;color:var(--bronze-deep);font-size:11px;font-weight:800;vertical-align:1px}
.guide-card{gap:6px}
.guide-item summary{cursor:pointer;list-style:none}
.guide-item[open]{gap:10px}

/* Votre peau, aujourd'hui (Ronan, 13/10 à 22h03 : plus élégant, plus de mots) */
.case-card{display:flex;flex-direction:column;gap:8px;padding:16px 18px;border-radius:20px;background:linear-gradient(160deg,#FBF7F1,#F4EBDF);border:1px solid rgba(201,163,106,.35)}
.case-text{margin:0;font-size:21px;line-height:1.3;color:var(--deep)}
.case-sub{margin:0;font-size:14px;line-height:1.45;color:var(--ink)}
.case-sub span{color:var(--muted);font-weight:600}

/* Rayons au trait fin (Ronan, 13/10 à 22h03 : « trop gadget ») : un seul ton, rond ivoire, filet champagne. */
.rayon-ic{background:#FBF8F3!important;color:var(--deep)!important;border:1px solid rgba(201,163,106,.55);box-shadow:0 0 0 3px #fff,0 0 0 4px rgba(201,163,106,.22)}
.rayon-ic svg{width:25px;height:25px}
.r-safy .rayon-ic{background:var(--deep)!important;border-color:var(--deep)}
.r-s{font-size:27px;line-height:1;color:var(--ivory);font-weight:500;margin-top:-2px}
.rayon-tx{font-weight:600;letter-spacing:.01em;color:var(--deep)}

/* Pastilles rouges « comme une vraie appli » (Ronan, 13/10 à 22h03) */
.rbadge{display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;padding:0 5px;margin-left:6px;border-radius:999px;background:#E5372B;color:#fff;font-size:11.5px;font-weight:800;line-height:1;vertical-align:1px;box-shadow:0 1px 3px rgba(229,55,43,.35)}
.rbadge[hidden]{display:none}
.bo-pill{display:inline-flex;align-items:center}
.bo-pill .rbadge{position:absolute;top:-8px;right:-8px;margin:0;border:2px solid var(--ivory)}

/* Le vrai du faux (Ronan, 13/10 à 22h03) */
.vf-card{gap:8px}
.vf-pending{border:2px dashed #C9704B}
.vf-pill{display:inline-block;padding:4px 11px;border-radius:999px;font-size:12.5px;font-weight:800;letter-spacing:.02em}
.vf-vrai{background:#E3F0E6;color:#2F6B4F}
.vf-faux{background:#F8E1DD;color:#9A3B2F}
.vf-nuance{background:#F6ECD6;color:#8A6A1F}
.vf-inconnu{background:#ECEDEB;color:#5B6560}
.vf-claim{margin:0;font-size:20px;line-height:1.25;color:var(--deep)}

/* Aller plus loin : visio et conciergerie (Ronan, 13/10 à 23h35) */
.further-card{gap:10px;background:linear-gradient(160deg,#16221F,#24332E);color:var(--ivory);border:none}
.further-card .eyebrow{color:var(--champagne)}
.further-card .muted{color:#C9D0CC}
.further-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.further-opt{display:flex;flex-direction:column;gap:4px;padding:12px;border-radius:16px;background:rgba(255,255,255,.07);border:1px solid rgba(201,163,106,.35);color:var(--ivory);text-decoration:none}
.further-opt b{font-size:15px}
.further-opt .small{color:#D9DED9}
.further-opt.gold{border-color:var(--champagne)}
@media (max-width:360px){.further-row{grid-template-columns:1fr}}
.concierge-card{border:1.5px solid var(--champagne)}

.verdict-chip.searching{background:#F6ECD6;color:#8A6A1F}
/* Le mot de Ronan (14/10) : une citation sobre, filet champagne, texte en serif. */
.founder-word{background:var(--ivory);border-left:3px solid var(--champagne)}
.founder-word p:not(.eyebrow){font-family:var(--display);font-size:17px;line-height:1.45;color:var(--deep)}
.founder-word summary{cursor:pointer;list-style:none}
.founder-word summary::-webkit-details-marker{display:none}
.founder-word summary b::after{content:' ›';color:var(--bronze)}
.founder-word[open] summary b::after{content:' ⌄'}
/* Mémo pharmacie (14/10) : ingrédients en couleurs, comme le passeport (rouge, orange, jaune, vert), symbole et mot toujours présents. */
.memo-ingr{display:flex;flex-direction:column;gap:8px}
.mi-group{border-radius:14px;padding:10px 12px;border:1.5px solid;display:flex;flex-direction:column;gap:6px}
.mi-title{font-size:14px}
.mi-fam{margin:0;font-size:13px;line-height:1.45}
.mi-inci{color:var(--muted);letter-spacing:.01em}
.mi-red{background:#FFF1EC;border-color:#E2B3A6}.mi-red .mi-title{color:#7A2E1C}
.mi-orange{background:#FFF6E6;border-color:#E8CFA0}.mi-orange .mi-title{color:#7A5418}
.mi-yellow{background:#FFFBEA;border-color:#EADCA4}.mi-yellow .mi-title{color:#6B5A12}
.mi-green{background:var(--ok-bg);border-color:#B9CDBF}.mi-green .mi-title{color:var(--ok-ink)}
@media print{.mi-group{break-inside:avoid}}
/* Espace pro (Ronan, 14/10 à 10h41) : les professionnels soumettent leurs cas à Safety Care. */
.pro-hero{background:linear-gradient(160deg,var(--deep),#24443A)}
.pro-hero .h1{font-size:26px;line-height:1.12}
.pro-pill{display:inline-flex;align-items:center;min-height:26px;padding:3px 10px;border-radius:13px;font-size:12px;font-weight:700;background:var(--cream);color:var(--deep);flex:none}
.pro-pill.pro-ok{background:var(--ok-bg);color:var(--ok-ink)}
.pro-pill.pro-q{background:#FFF6E6;color:#7A5418}
.pro-pill.pro-wait{background:#F3EEF6;color:#5A3F6B}
.pro-pill.pro-orient,.pro-pill.pro-urgent{background:var(--alert-bg);color:var(--alert-ink)}
.pro-pill.pro-closed{background:#EEF0EE;color:var(--muted)}
.pro-case-row{gap:6px;padding:14px 16px}
.pro-text{min-height:190px;font-size:16px;line-height:1.5}
.pro-warn{margin:0;padding:8px 12px;border-radius:12px;background:#FFF6E6;color:#7A5418;font-weight:600}
.pro-thumbs{display:flex;gap:8px;flex-wrap:wrap}
.pro-thumbs:empty{display:none}
.pro-thumb{width:84px;height:84px;object-fit:cover;border-radius:12px;border:1px solid var(--soft-line)}
.pro-questions{border:1.5px solid var(--champagne);background:linear-gradient(180deg,#FFFBF4,var(--ivory))}
.pro-answer ul li{margin:2px 0}
.pro-red{color:#7A2E1C}
/* « Ce qu'il faut ajuster, et pourquoi » (Ronan, 14/10 à 13h14). */
.adjust-card{border:1.5px solid var(--champagne);background:linear-gradient(180deg,#FFFBF4,var(--ivory))}
.adjust-item{display:flex;gap:12px;align-items:flex-start}
.adjust-n{flex:none;width:26px;height:26px;border-radius:13px;background:var(--deep);color:var(--ivory);font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center;margin-top:1px}
.adjust-why{color:var(--bronze-deep)}
.interest-line{display:flex;flex-direction:column;gap:2px;padding-left:10px;border-left:3px solid var(--champagne)}
.chip.case-change{min-height:34px;padding:6px 14px;font-size:13px;background:var(--cream);border-color:transparent}
.feel-panel{margin-top:4px;padding-top:12px;border-top:1px solid var(--soft-line)}
/* 14/10 (Ronan, points 97-98) : une carte visible sans clic qui alterne « Ma peau » (le confort du jour) et « Dehors » (UV,
   température, ciel et précautions du jour). Elle s'arrête dès qu'on la touche. */
.duo{display:flex;flex-direction:column;gap:8px}
.duo-tabs{display:flex;gap:4px;align-self:flex-start;background:var(--cream);border:1px solid var(--soft-line);border-radius:999px;padding:4px}
.duo-tabs[hidden]{display:none}
.duo-tab{position:relative;overflow:hidden;border:0;background:transparent;color:var(--muted);font-weight:800;font-size:13px;padding:7px 16px;border-radius:999px;cursor:pointer}
.duo-tab.on{background:var(--deep);color:var(--ivory)}
.duo-tab i{position:absolute;left:12px;right:12px;bottom:3px;height:2px;border-radius:2px;transform:scaleX(0);transform-origin:left;background:var(--champagne)}
.duo.running .duo-tab.on i{animation:duoBar 6s linear forwards}
@keyframes duoBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.duo-stage{display:grid}
.duo-stage > .duo-face{grid-area:1/1;align-self:start;margin:0;transition:opacity .45s ease,transform .45s ease}
.duo-stage > .duo-face:not(.on){opacity:0;transform:translateX(16px) scale(.98);pointer-events:none;visibility:hidden;transition:opacity .45s ease,transform .45s ease,visibility 0s .45s}
.sky-face{background:linear-gradient(160deg,#E7F0F4 0%,#F6F4EE 55%,var(--ivory) 100%)}
.sky-face.preview{border:2px dashed #C9704B}
.sky-temp{display:block;font-size:46px;line-height:1.05;font-weight:300;letter-spacing:-.04em;color:var(--deep)}
.sky-src{display:block;margin-top:4px;font-size:11px;font-weight:500;color:var(--muted)}
.duo.running .sky-tip > span:first-child{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.sky-ic{flex:none;width:64px;height:64px;display:flex}
.sky-ic svg{overflow:visible}
.sky-ic .sk-sun{fill:#F2B84B}
.sky-ic .sk-rays line{stroke:#F2B84B;stroke-width:2.6;stroke-linecap:round}
.sky-ic .sk-rays{transform-box:fill-box;transform-origin:center;animation:skSpin 16s linear infinite}
.sky-ic .sk-cloud{fill:#fff;stroke:#9DB0BC;stroke-width:1.6;animation:skDrift 5s ease-in-out infinite alternate}
.sky-ic .sk-drops line{stroke:#4F86B5;stroke-width:2.4;stroke-linecap:round;animation:skFall 1.1s linear infinite}
.sky-ic .sk-drops line:nth-child(2){animation-delay:.35s}.sky-ic .sk-drops line:nth-child(3){animation-delay:.7s}
.sky-ic .sk-flakes circle{fill:#9FB9CE;animation:skFall 2.2s linear infinite}
.sky-ic .sk-flakes circle:nth-child(2){animation-delay:.7s}.sky-ic .sk-flakes circle:nth-child(3){animation-delay:1.4s}
.sky-ic .sk-bolt{fill:#E9B23C;animation:skBlink 2.4s ease-in-out infinite}
.sky-ic .sk-fog line{stroke:#A7B3B9;stroke-width:3;stroke-linecap:round;animation:skDrift 4s ease-in-out infinite alternate}
.sky-ic .sk-fog line:nth-child(2){animation-delay:-2s}
@keyframes skSpin{to{transform:rotate(360deg)}}
@keyframes skDrift{from{transform:translateX(-2px)}to{transform:translateX(2px)}}
@keyframes skFall{0%{transform:translateY(-3px);opacity:0}25%{opacity:1}100%{transform:translateY(4px);opacity:0}}
@keyframes skBlink{0%,70%,100%{opacity:1}80%{opacity:.25}}
.sky-badges{display:flex;flex-wrap:wrap;gap:6px}
.sky-badge{font-size:12px;font-weight:700;padding:5px 10px;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--deep)}
.sky-badge.uv-0{background:#E3F1E6;border-color:#B9D9C0;color:#2F6B3E}
.sky-badge.uv-1{background:#FFF3CC;border-color:#E8CF7A;color:#6E5100}
.sky-badge.uv-2{background:#FFE0C7;border-color:#F0B184;color:#8A4310}
.sky-badge.uv-3{background:#FBD5D0;border-color:#E89A90;color:#8E2A1E}
.sky-badge.uv-4{background:#EBDDF5;border-color:#C6A6E0;color:#5B2D82}
.sky-badge.dry{background:#FBF0DC;border-color:#EBCF9F;color:#8A5A12}
.sky-tip{display:block;margin:0;font-weight:700;font-size:14px;line-height:1.45;color:var(--deep);background:rgba(255,255,255,.8);border-left:3px solid var(--champagne);padding:9px 11px;border-radius:10px}
.sky-more summary{cursor:pointer;font-weight:700}
@media (prefers-reduced-motion: reduce){.sky-ic *{animation:none!important}.duo-stage > .duo-face,.duo-stage > .duo-face:not(.on){transition:none}.duo.running .duo-tab.on i{animation:none}}
.week{display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--soft-line);padding-top:10px}
.week-row{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.week-day{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 0;border-radius:12px;background:var(--cream);color:var(--muted)}
.week-day > span svg{width:20px;height:20px}
.week-day > i{width:20px;height:20px;display:flex;align-items:center;justify-content:center}
.week-day > i::after{content:"";width:6px;height:6px;border-radius:3px;background:var(--line)}
.week-day small{font-size:10px;font-weight:700}
.week-day.comfortable{color:#2F8A5F}.week-day.mixed{color:#D08A1E}.week-day.uncomfortable{color:#C9452F}
.week-day.today{outline:1.5px solid var(--champagne);background:#fff}
/* 14/10 (point 99) : « Mon suivi », les échéances J+7, J+14, J+28… */
.suivi-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(58px,1fr));gap:6px}
.suivi-step{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px;border-radius:14px;background:var(--cream);color:var(--muted);text-align:center}
.suivi-step b{font-size:13px;color:var(--deep)}
.suivi-step small{font-size:10.5px;line-height:1.25}
.suivi-step.done{background:#E3F1E6;color:#2F6B3E}
.suivi-step.due{background:var(--deep);color:var(--ivory)}.suivi-step.due b{color:var(--champagne)}
.suivi-step.passed{opacity:.55}
/* 14/10 (point 104) : découverte rapide */
.quick-choice{display:flex;flex-direction:column;gap:6px;padding:18px;border-radius:24px;border:1px solid var(--line);background:#fff;color:var(--deep);text-decoration:none}
.quick-choice.main{background:var(--deep);color:var(--ivory);border-color:var(--deep)}
.quick-choice b{font-size:20px;font-family:var(--display);font-weight:600}
.quick-choice .qc-tag{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--bronze)}
.quick-choice.main .qc-tag,.quick-choice.main .qc-go{color:var(--champagne)}
.quick-choice .qc-go{font-weight:800;font-size:14px;margin-top:4px}
.quick-dots{display:flex;gap:6px}.quick-dots i{flex:1;height:4px;border-radius:2px;background:var(--soft-line)}.quick-dots i.on{background:var(--bronze)}
.slides > .slide[hidden]{display:none}
/* Créneau de la visio payée (14/10) */
.rdv-slot{padding:12px 14px;border-radius:14px;background:#FBF7F0;border:1px solid var(--champagne)}
.rdv-when{font-size:18px;line-height:1.25}
.rdv-home b{font-size:17px}
/* Note du professionnel ou du référent (14/10) */
.pronote-text{margin:0;padding:10px 12px;border-left:3px solid var(--champagne);background:#FBF7F0;border-radius:0 12px 12px 0;font-size:15px;white-space:pre-wrap}
.note-line{display:flex;flex-direction:column;gap:4px;padding:8px 10px;border-radius:12px;background:#F6F3EE}
.note-line.note-new{background:#EEF3F0}.note-line.note-ok{background:#E3EBE5}.note-line.note-diff{background:#FBEFE6}
.note-line .btn{align-self:flex-start}

/* ---------- Accueil « à la Apple » (Ronan, 14/10, point 109 ; maquette validée à 20h22) ---------- */
.view.home-v2,.view.today-view{background:var(--cream)}
.app:has(.home-v2),.app:has(.today-view){background:var(--cream)}
.home-v2{gap:16px}
.hm-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.hm-hello{display:flex;flex-direction:column;gap:4px;min-width:0}
.hm-date-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hm-date{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#8A4F2A}
.hm-name{font-size:36px;line-height:1}
.hm-mem{display:flex;flex-direction:column;gap:1px;margin-top:4px;text-decoration:none;color:var(--ink)}
.hm-mem b{font-size:13px;font-weight:800}
.hm-mem span{font-size:12px;color:var(--muted)}
.hm-drop{flex:none;display:block;text-decoration:none}
.hm-drop .mdrop{width:70px;height:123px}
.hm-drop{display:flex;flex-direction:column;align-items:center;gap:2px;color:inherit}
.hm-drop-v{font-size:12px;line-height:1.1;text-align:center;color:var(--muted)}
.hm-drop-v b{font-size:18px;font-weight:600;color:var(--ink)}
.hm-drop-v small{display:block;font-size:11px}
.hm-drop .mdrop-wave{fill:#D9AC72}
.today-card{display:flex;align-items:center;gap:12px;background:#17211F;color:#FFFDF9;border-radius:22px;padding:12px 14px;text-decoration:none;box-shadow:0 8px 22px rgba(23,33,31,.14)}
.tc-ic{width:40px;height:40px;border-radius:12px;background:#B96E3E;display:grid;place-items:center;flex:none;color:#FFFDF9}
.tc-ic svg{width:22px;height:22px}
.tc-tx{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.tc-tx b{font-size:15px}
.tc-tx span{font-size:12px;color:#C9D1CC;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tc-go{display:flex;color:#E3AA66}.tc-go svg{width:20px;height:20px}
.skin-widget{display:grid;grid-template-columns:minmax(0,1fr);background:#FFFDF9;border-radius:24px;border:1px solid var(--soft-line);overflow:hidden}
.skin-widget.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.sw-peau{display:flex;flex-direction:column;gap:7px;padding:14px 14px 12px 16px;background:none;border:0;text-align:left;color:var(--ink)}
.skin-widget.two .sw-peau{border-right:1px solid var(--soft-line)}
.sw-k{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.sw-k.peau{color:#2F7A55}.sw-k.dehors{color:#A55F2E}
.sw-big{font-size:24px;line-height:1}
.sw-dots{display:flex;justify-content:space-between;max-width:230px}
.sw-day{display:flex;flex-direction:column;align-items:center;gap:3px}
.sw-day small{font-size:9.5px;font-weight:700;color:var(--muted)}
.sw-dot{display:inline-block;width:12px;height:12px;border-radius:50%;background:transparent;box-shadow:inset 0 0 0 1.5px #CFC7BA}
.sw-dot.ok{background:#2F8A5F;box-shadow:none}.sw-dot.mid{background:#E09A2D;box-shadow:none}.sw-dot.bad{background:#C9452F;box-shadow:none}
.sw-dot.today{box-shadow:0 0 0 2px #FFFDF9,0 0 0 3.5px #17211F}
.sw-dot.none.today{box-shadow:inset 0 0 0 1.5px #CFC7BA,0 0 0 2px #FFFDF9,0 0 0 3.5px #17211F}
.sw-dehors{display:flex;flex-direction:column;gap:6px;padding:14px 16px;text-decoration:none;color:var(--ink);min-width:0}
.sw-temp{display:flex;align-items:center;gap:8px}
.sw-temp .sky-ic svg{width:34px;height:34px}
.sw-temp b{font-size:28px;line-height:1}
.sw-uv{font-size:12px;font-weight:700}
.sw-tip{font-size:11.5px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sw-legend{grid-column:1/-1;display:flex;justify-content:center;flex-wrap:wrap;gap:6px 14px;padding:8px 12px;border-top:1px solid var(--soft-line);font-size:10.5px;font-weight:700;color:#3B4541}
.sw-legend span{display:flex;align-items:center;gap:5px}
.sw-legend .sw-dot{width:9px;height:9px}
.app-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));row-gap:18px;column-gap:10px;padding-top:4px}
.app-ic{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;background:none;border:0;padding:0;font:600 11px/1.15 var(--body);color:var(--ink);text-align:center;text-decoration:none;-webkit-tap-highlight-color:transparent}
.app-ic:active .app-sq{transform:scale(.92)}
.app-sq{width:62px;max-width:100%;aspect-ratio:1;border-radius:16px;display:grid;place-items:center;color:#FFFDF9;box-shadow:0 4px 12px rgba(23,33,31,.10);transition:transform .12s ease}
.app-sq svg{width:28px;height:28px}
.app-sq.folder{background:#E2DACE;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;padding:10px;box-shadow:inset 0 0 0 1px rgba(23,33,31,.05)}
.app-sq.folder i{width:100%;aspect-ratio:1;border-radius:6px}
.app-lb{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:100%}
.app-badge{position:absolute;top:-6px;left:calc(50% + 18px);min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:#B4382B;color:#FFFDF9;font:800 11px/20px var(--body);box-shadow:0 0 0 2px var(--cream)}
.sheet-layer.folder-layer{background:rgba(244,240,232,.62);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:20px}
.folder-title{font-size:32px;line-height:1;text-align:center}
.folder-panel{width:min(330px,100%);border-radius:34px;background:rgba(255,253,249,.94);box-shadow:0 18px 50px rgba(23,33,31,.16);padding:22px 18px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));row-gap:18px;column-gap:8px;animation:folderPop .22s cubic-bezier(.2,.8,.2,1) both}
.folder-close{color:var(--muted)}
@keyframes folderPop{from{transform:scale(.86);opacity:0}to{transform:none;opacity:1}}
.home-v2 .search-bar{border-radius:999px;min-height:46px;background:rgba(255,253,249,.8);box-shadow:none;justify-content:center;color:var(--muted)}
/* Aujourd'hui */
.today-view .later{background:#FFFDF9;border:1px solid var(--soft-line);border-radius:22px;overflow:hidden;display:flex;flex-direction:column}
.later-k{margin:0;padding:14px 16px 6px;color:var(--muted)}
.later-row{display:flex;align-items:center;gap:12px;padding:10px 16px;border-top:1px solid var(--soft-line);text-decoration:none;color:var(--ink)}
.later-row .app-sq{width:34px;border-radius:10px;box-shadow:none}
.later-row .app-sq svg{width:18px;height:18px}
.later-tx{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0}
.later-tx b{font-size:14px}
.later-tx span{font-size:12px;color:var(--muted)}
.later-go{display:flex;color:#B96E3E}.later-go svg{width:18px;height:18px}
/* Barre du bas : givrée et claire, le scan dans la goutte Safety Care (maquette du 14/10). */
.tabbar{background:rgba(255,253,249,.86);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 8px 30px rgba(23,33,31,.14);border:1px solid rgba(23,33,31,.06)}
.tab{color:#5B6560}
.tab[aria-current="page"]{color:#17211F;font-weight:800}
.fab>span{background:#B96E3E;border:0;box-shadow:0 8px 20px rgba(185,110,62,.42)}
.fab>span>span{color:#FFFDF9}
@media (prefers-reduced-motion:reduce){.folder-panel{animation:none}.app-sq{transition:none}}
/* Fiche produit allégée (point 109) : « Pour aller plus loin, si vous voulez », un sujet par ligne. */
.fold-group{background:#FFFDF9;border:1px solid var(--soft-line);border-radius:22px;overflow:hidden;display:flex;flex-direction:column}
.fold-k{margin:0;padding:14px 16px 8px;color:var(--muted)}
.fold{border-top:1px solid var(--soft-line)}
.fold>summary{display:flex;align-items:center;gap:12px;padding:13px 16px;font-weight:700;font-size:14.5px;cursor:pointer;list-style:none;min-height:48px}
.fold>summary::-webkit-details-marker{display:none}
.fold>summary>span:first-child{flex:1}
.fold-sign::before{content:"+";font-size:20px;line-height:1;color:#B96E3E;font-weight:600}
.fold[open]>.fold-sign::before,.fold[open]>summary .fold-sign::before{content:"−"}
.fold-body{display:flex;flex-direction:column;gap:10px;padding:0 12px 14px}
.fold-body>.card{box-shadow:none}
.hm-date-row .bo-pill{position:relative;top:auto;right:auto}
.hm-sync{font-size:11.5px;color:var(--muted)}
.app-lb{hyphens:manual}
.home-search{align-self:center;display:flex;align-items:center;gap:8px;min-height:44px;padding:0 22px;border-radius:999px;border:1px solid var(--line);background:rgba(255,253,249,.8);color:var(--muted);font-weight:700;font-size:14px}
.home-search .search-ic{display:flex}
.home-search .search-ic svg{width:18px;height:18px}
.sw-temp .sky-ic{width:36px;height:36px;flex:none;display:flex;align-items:center;justify-content:center}
/* Points 116 et 118 (14/10 à 21h45) : la barre du haut (date, back-office, espace pro) et la pensée du jour. */
.hm-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:-6px}
.hm-pills{display:flex;align-items:center;gap:8px}
.hm-pills .bo-pill{position:relative;top:auto;right:auto}
.pro-pill{position:relative;display:inline-flex;align-items:center;padding:5px 11px;border-radius:12px;background:#FFFDF9;border:1px solid var(--line);color:var(--ink);font-size:11px;font-weight:800;text-decoration:none}
.pro-pill .rbadge{position:absolute;top:-8px;right:-8px;margin:0;border:2px solid var(--cream)}
.quote-day{margin:0;padding:16px 18px;border-radius:22px;background:linear-gradient(135deg,#FBF4EA,#F3E7D6);border:1px solid #EADCC6;display:flex;flex-direction:column;gap:6px;text-align:center}
.qd-k{font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#8A4F2A}
.quote-day blockquote{margin:0;font-size:21px;line-height:1.2;color:var(--deep);font-style:italic;text-wrap:balance}
.quote-day figcaption{font-size:11px;color:var(--muted);font-weight:700;letter-spacing:.06em}
.pair-steps{margin:4px 0 6px;padding-left:22px;text-align:left;display:flex;flex-direction:column;gap:8px;font-size:14.5px}
.hm-top .hm-date{font-size:11px;letter-spacing:.1em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.hm-pills{flex:none}
.hm-pills .bo-pill,.pro-pill{white-space:nowrap}
/* Pages « à la iPhone » (point 112) : des cartes de catégories, chacune ouvre sa page. */
.page-sub{margin:-6px 0 0;color:var(--muted);font-size:14px;line-height:1.45}
.cat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.cat-card{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:14px;border-radius:20px;background:#FFFDF9;border:1px solid var(--soft-line);text-decoration:none;color:var(--ink);text-align:left;font:inherit;box-shadow:0 2px 10px rgba(23,33,31,.04);transition:transform .12s ease}
.cat-card:active{transform:scale(.97)}
.cat-card .app-sq{width:40px;border-radius:12px;box-shadow:none}
.cat-card .app-sq svg{width:22px;height:22px}
.cat-tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.cat-tx b{font-size:15px;line-height:1.2}
.cat-tx span{font-size:12px;color:var(--muted)}
.cat-card.t-alert{border:1.5px solid #E7B3A6;background:#FFF7F3}
.skinmemo.one h2:empty{display:none}
.skinmemo.one{padding-top:4px}
@media (prefers-reduced-motion:reduce){.cat-card{transition:none}}
/* Point 112 : toute l'application sur le même fond que l'accueil (cartes blanches sur fond crème, comme un iPhone). */
.app{background:var(--cream)}
.card.cream{background:#FBF6EE;border-color:#EFE3D2}
.why-fold>summary{font-size:12.5px;font-weight:700;color:#8A4F2A;cursor:pointer;list-style:none}
.why-fold>summary::-webkit-details-marker{display:none}
.why-fold>summary::after{content:" ›"}
.why-fold[open]>summary::after{content:" ˅"}
.why-fold>span{display:block;margin-top:4px}
/* Point 112, suite (14/10) : légende des pastilles en une ligne, conditions de la goutte repliées. */
.legend-row{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center}
.legend-row>span{display:inline-flex;align-items:center;gap:6px}
.drop-needs{width:100%}
.drop-needs>summary{font-size:13px;font-weight:700;color:var(--ivory);cursor:pointer;list-style:none;text-align:center}
.drop-needs>summary::-webkit-details-marker{display:none}
.drop-needs>summary::after{content:" ›";color:#E3AA66}
.drop-needs[open]>summary::after{content:" ⌄"}
/* ---------- SAFY, la goutte de sérum vivante (Ronan, 15/10, V-SAFY01) ---------- */
.safy{--s:56px;display:inline-block;flex:none;width:var(--s);height:calc(var(--s) * 1.25);padding:0;border:0;background:none;cursor:pointer;position:relative;-webkit-tap-highlight-color:transparent;vertical-align:middle}
span.safy{cursor:inherit}
.safy svg{width:100%;height:100%;display:block;overflow:visible}
.safy-shadow{fill:#17211F;opacity:.1;transform-origin:100px 244px;animation:safyShadow 4.2s ease-in-out infinite}
.safy-body{transform-origin:100px 240px;animation:safyFloat 4.2s ease-in-out infinite}
.safy-level{animation:safySlosh 4.2s ease-in-out infinite;transform-origin:100px 0}
.safy-wave{animation:safyWave 3.4s linear infinite}
.safy-wave2{animation:safyWave 5.2s linear infinite reverse;opacity:.55}
.safy-bub{opacity:0;animation:safyBub 4s ease-in infinite}
.safy-bub.b2{animation-delay:1.3s}.safy-bub.b3{animation-delay:2.6s}
.safy-bub.b4,.safy-bub.b5,.safy-bub.b6{display:none}.safy-bub.b4{animation-delay:.7s}.safy-bub.b5{animation-delay:2s}.safy-bub.b6{animation-delay:3.3s}
.safy-eye{transform-box:fill-box;transform-origin:center;animation:safyBlink 5.4s infinite}
.safy-look{animation:safyLook 11s ease-in-out infinite}
.safy-happy,.safy-wink,.safy-grin,.safy-o,.safy-talk,.safy-dots,.safy-spark,.safy-brows,.safy-flat,.safy-sad,.safy-sadbrows,.safy-sleepy{display:none}
.safy-dots{fill:#E2C59F}
.safy-spark{fill:#D9A35F}
/* Humeurs */
.safy.m-joie .safy-eye,.safy.m-joie .safy-smile{display:none}
.safy.m-joie .safy-happy,.safy.m-joie .safy-grin{display:inline}
.safy.m-clin .safy-eye.e-r{display:none}
.safy.m-clin .safy-wink{display:inline}
.safy.m-reflexion .safy-look{animation:none;transform:translate(-3px,-4px)}
.safy.m-reflexion .safy-smile{display:none}
.safy.m-reflexion .safy-o,.safy.m-reflexion .safy-dots{display:inline}
.safy.m-reflexion .safy-dots circle{animation:safyThink 1.4s ease-in-out infinite}
.safy.m-reflexion .safy-dots circle:nth-child(2){animation-delay:.2s}.safy.m-reflexion .safy-dots circle:nth-child(3){animation-delay:.4s}
.safy.m-douceur .safy-brows{display:inline}
.safy.m-douceur .safy-body{animation-duration:6s}
.safy.talking .safy-smile,.safy.talking .safy-grin,.safy.talking .safy-o{display:none}
.safy.talking .safy-talk{display:inline;transform-box:fill-box;transform-origin:center;animation:safyTalk .28s ease-in-out infinite alternate}
.safy.hop .safy-body{animation:safyHop .8s cubic-bezier(.3,1.5,.5,1)}
.safy.hop .safy-spark{display:inline;transform-box:fill-box;transform-origin:center;animation:safySpark 1.1s ease-out both}
.safy.still .safy-body,.safy.still .safy-shadow,.safy.still .safy-level{animation:none}
@keyframes safyFloat{0%,100%{transform:translateY(0) scale(1,1)}50%{transform:translateY(-7px) scale(1.018,.982)}}
@keyframes safyShadow{50%{transform:scaleX(.84);opacity:.05}}
@keyframes safySlosh{0%,100%{transform:rotate(0) translateY(0)}35%{transform:rotate(-3deg) translateY(-2px)}70%{transform:rotate(2deg) translateY(1px)}}
@keyframes safyWave{from{transform:translateX(0)}to{transform:translateX(-80px)}}
@keyframes safyBub{0%{opacity:0;transform:translateY(0)}15%{opacity:.85}100%{opacity:0;transform:translateY(-46px)}}
@keyframes safyBlink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.08)}}
@keyframes safyLook{0%,28%,100%{transform:translate(0,0)}34%,48%{transform:translate(-3.5px,-1px)}56%,70%{transform:translate(3.5px,0)}}
@keyframes safyTalk{from{transform:scaleY(.35)}to{transform:scaleY(1)}}
@keyframes safyThink{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes safyHop{0%{transform:none}25%{transform:translateY(-26px) scale(.95,1.06) rotate(-4deg)}55%{transform:translateY(0) scale(1.08,.92)}75%{transform:translateY(-6px) rotate(3deg)}100%{transform:none}}
@keyframes safySpark{0%{opacity:0;transform:scale(.4)}30%{opacity:1;transform:scale(1.1)}100%{opacity:0;transform:scale(1.25) translateY(-10px)}}
@media (prefers-reduced-motion: reduce){.safy *{animation:none!important}}
/* SAFY parle */
.safy-line{display:flex;align-items:flex-end;gap:10px}
.safy-line .safy{margin-bottom:-2px}
.safy-bubble{flex:1;min-width:0;position:relative;background:#FFFDF9;border:1px solid #EADFCF;border-radius:20px 20px 20px 6px;padding:10px 14px 11px;display:flex;flex-direction:column;gap:2px;text-decoration:none;color:inherit;box-shadow:0 6px 18px rgba(98,64,33,.06)}
.safy-bubble p{margin:0;font-size:14.5px;line-height:1.45;color:var(--ink,#17211F)}
.safy-bubble .typing{margin:4px 0}
.safy-name{font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#A0663A}
.safy-bubble.pop{animation:safyPop .45s cubic-bezier(.3,1.4,.5,1)}
@keyframes safyPop{from{transform:scale(.92) translateY(4px);opacity:.3}to{transform:none;opacity:1}}
@media (prefers-reduced-motion: reduce){.safy-bubble.pop{animation:none}}
/* SAFY dans les icônes et la barre du bas */
.app-sq.safy-sq{background:linear-gradient(160deg,#FFFDF9,#F2E3CF);display:grid;place-items:center;overflow:visible}
.app-sq.safy-sq .safy{--s:34px}
.tab .safy,.tabbar .safy{--s:24px}
.cat-card .app-sq.safy-sq .safy{--s:30px}
.bot-who{display:inline-flex;align-items:center;gap:6px}
.bot-who .safy{--s:20px}
.safy-top .row{align-items:center;gap:12px}
.safy-home{margin:2px 0}
.safy-home-b{gap:3px}
.safy-home-b .sh-hello{font:600 21px/1.1 'Cormorant Garamond',Georgia,serif;color:var(--ink,#17211F)}
.sh-today{display:flex;align-items:center;gap:6px;margin-top:4px;padding-top:7px;border-top:1px solid #F0E6D8;font-size:12.5px;font-weight:700;color:#8A4F2A}
.sh-today>span:first-child{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sh-go{width:16px;height:16px;flex:none;display:inline-grid}
.sh-go svg{width:16px;height:16px}
/* L'histoire de SAFY */
.story-hero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:14px 10px 18px;border-radius:28px;background:radial-gradient(120% 90% at 50% 0%,#FFF8EE 0%,#F6EADB 70%,#F1E1CC 100%);border:1px solid #EADFCF}
.story-quote{margin:0;font-style:italic;font-size:20px;line-height:1.25;color:#5B4433}
.story-ch>summary{display:flex;align-items:center;gap:12px;cursor:pointer;list-style:none}
.story-ch>summary::-webkit-details-marker{display:none}
.story-ch>summary::after{content:"+";margin-left:auto;color:#B96E3E;font-size:20px;font-weight:600}
.story-ch[open]>summary::after{content:"−"}
.story-n{width:28px;height:28px;border-radius:50%;background:#F4ECE1;display:grid;place-items:center;font-size:12.5px;font-weight:800;color:#8A4F2A;flex:none}
.story-pr{display:flex;gap:10px;align-items:flex-start}
.story-k{font:800 11px/1.6 Manrope,system-ui,sans-serif;color:#B96E3E;letter-spacing:.08em}
.story-founders{flex-direction:row;align-items:center;gap:12px}
.story-end{margin:6px 0 0;text-align:center;font-size:24px;line-height:1.2;color:#17211F}
.g-eyes{background:#EEF2F9} .g-eyes .g-dot{background:#4468A8} .g-eyes .g-title{color:#4468A8}
/* V-COHERENCE01 (16/10) : le barème de cohérence sous l’objectif */
.coh{display:flex;flex-direction:column;gap:4px;margin-top:8px;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.55);border-left:4px solid #3E7B5A}
.coh-chip{font-weight:700;font-size:14px;color:#2F6247}
.coh-a_nuancer{border-left-color:#B7832F} .coh-a_nuancer .coh-chip{color:#8A5F17}
.coh-pas_maintenant{border-left-color:#B5543F} .coh-pas_maintenant .coh-chip{color:#97412F}
/* V-AGE01 (16/10) : ce que l’âge change */
.g-age{background:#F3EEF6} .g-age .g-dot{background:#7A5A93} .g-age .g-title{color:#7A5A93}
/* Zone épinglée sur l'accueil (Ronan, 15/10) */
.zone-wrap{display:flex;flex-direction:column;gap:8px}
.zone-seg{display:flex;gap:4px;padding:3px;border-radius:999px;background:rgba(23,33,31,.05);align-self:flex-start;max-width:100%;overflow-x:auto}
.zone-tab{border:0;background:none;border-radius:999px;padding:6px 12px;font:700 12.5px Manrope,system-ui,sans-serif;color:#5B6560;display:inline-flex;align-items:center;gap:4px;white-space:nowrap;cursor:pointer}
.zone-tab[aria-selected="true"]{background:#FFFDF9;color:#17211F;box-shadow:0 2px 8px rgba(23,33,31,.1)}
.zone-tab.soon{opacity:.55}
.zone-tab small{font-size:9.5px;font-weight:700;color:#A0663A}
.sw-eyes{text-decoration:none;color:inherit;display:block}
.sw-eyes .sw-sub{display:block;font-size:13px;color:#5B6560;margin-top:2px}
.sw-big.eye-green{color:#2F7F5C}.sw-big.eye-yellow{color:#A87512}.sw-big.eye-orange{color:#C46A1E}.sw-big.eye-red{color:#C9452F}

/* Humeurs de SAFY pour l'humeur du jour (Ronan, 15/10) */
.safy.m-bof .safy-smile{display:none}.safy.m-bof .safy-flat{display:inline}
.safy.m-triste .safy-smile{display:none}.safy.m-triste .safy-sad,.safy.m-triste .safy-sadbrows{display:inline}.safy.m-triste .safy-body{animation-duration:6.5s}
.safy.m-fatigue .safy-eye,.safy.m-fatigue .safy-smile{display:none}.safy.m-fatigue .safy-sleepy,.safy.m-fatigue .safy-o{display:inline}.safy.m-fatigue .safy-body{animation-duration:7s}
.mood-card{background:#FFFDF9;border:1px solid #EADFCF;border-radius:24px;padding:14px 14px 12px;display:flex;flex-direction:column;gap:8px}
.mood-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.mood-head b{font:600 20px/1.1 'Cormorant Garamond',Georgia,serif}
.mood-k{font:800 11px/1 Manrope,system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#A0663A}
.mood-track{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:end;padding:4px 0 0}
.mood-track::before{content:"";position:absolute;left:10%;right:10%;top:calc(50% - 6px);height:4px;border-radius:999px;background:linear-gradient(90deg,#2F7F5C,#A8C46B,#E3AA66,#D98A5B,#9AA3B5);opacity:.35}
.mood-pick{position:relative;border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 0;cursor:pointer;min-height:64px;justify-content:flex-end;-webkit-tap-highlight-color:transparent}
.mood-pick small{font:700 10.5px Manrope,system-ui,sans-serif;color:#5B6560}
.mood-pick.on small{color:#17211F}
.mood-pick .safy{transition:transform .25s}
.mood-pick:not(.on) .safy{opacity:.78}
.mood-say{margin:0;font-size:13.5px;line-height:1.4;color:#3B4541}
.mood-say.pop{animation:safyPop .45s cubic-bezier(.3,1.4,.5,1)}
.comite-row{display:flex;gap:12px;align-items:flex-start}
.comite-row .app-sq{width:44px;height:44px;border-radius:12px;flex:none}
.comite-step{display:flex;gap:10px;align-items:baseline}
.comite-step b{width:22px;height:22px;border-radius:50%;background:#F4ECE1;color:#8A4F2A;display:inline-grid;place-items:center;font-size:11.5px;flex:none}
/* Mes conseils (Ronan, 15/10) */
.lv{display:inline-block;flex:none;padding:3px 8px;border-radius:999px;font:700 10.5px/1.3 Manrope,system-ui,sans-serif;white-space:nowrap}
.lv-solide{background:#E3F1E8;color:#1F6B47}.lv-modere{background:#FBEBD2;color:#8A5410}.lv-limite{background:#EDEFF2;color:#4A5560}.lv-aucune{background:#F9E1DC;color:#9C3524}
.tip-card b{font-size:15px;line-height:1.3}
.m-step{display:flex;gap:12px;align-items:flex-start;padding-top:10px;border-top:1px solid #F0E6D8}
.mf{flex:none;width:76px;height:88px;border-radius:14px;background:#FBF6EE;display:grid;place-items:center}
.mf svg{width:70px;height:82px}
.mf-head{fill:#FFFDF9;stroke:#CDBFAE;stroke-width:1.4}
.mf-line{fill:none;stroke:#B9A994;stroke-width:1.3;stroke-linecap:round}
.mf-arrow{fill:none;stroke:#B96E3E;stroke-width:2.4;stroke-linecap:round}
.mf-breath{fill:none;stroke:#4F9271;stroke-width:1.6}
.tips-list{padding:6px 14px}
.tip{border-bottom:1px solid #F0E6D8}
.tip:last-child{border-bottom:0}
.tip>summary{display:flex;align-items:center;gap:10px;padding:12px 0;cursor:pointer;list-style:none}
.tip>summary::-webkit-details-marker{display:none}
.tip>summary b{flex:1;font-size:14.5px;line-height:1.3}
.tip-n{width:24px;height:24px;border-radius:50%;background:#F4ECE1;color:#8A4F2A;display:grid;place-items:center;font:800 11.5px Manrope,system-ui,sans-serif;flex:none}
/* Accueil allégé (Ronan, 15/10 à 9h35) : la recherche en haut, l'humeur dans la bulle de SAFY, des blocs moins hauts,
   pour arriver vite aux applications. */
.home-v2{gap:12px}
.home-v2 .hm-name{font-size:32px}
.home-v2 .search-bar{min-height:44px;justify-content:flex-start;padding:0 14px;font-size:14px;white-space:nowrap;overflow:hidden}
.home-v2 .search-bar>span:last-child{overflow:hidden;text-overflow:ellipsis}
.home-v2 .zone-wrap{gap:6px}
.home-v2 .zone-tab{padding:5px 11px;font-size:12px}
.home-v2 .sw-peau{gap:4px;padding:10px 14px 8px}
.home-v2 .sw-big{font-size:21px}
.home-v2 .sw-legend{padding:5px 10px}
.home-v2 .sw-dehors{padding:10px 14px;gap:4px}
.safy-home-b .sh-hello{font-size:20px}
a.sh-today{text-decoration:none}
.help-opt.idea .help-ic svg{width:20px;height:20px}
/* Les deux fondateurs, à égalité (Ronan, 15/10 à 9h40 : « on ne parle pas assez de Paloma »). */
.founders-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.founder-card{background:#FFFDF9;border:1px solid #EADFCF;border-radius:22px;padding:16px 12px 14px;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.founder-card img{width:96px;height:96px;border-radius:50%;object-fit:cover;margin-bottom:6px;box-shadow:0 6px 16px rgba(98,64,33,.16)}
.founder-card small{font:800 10.5px/1 Manrope,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#A0663A}
.founder-card b{font-size:21px;line-height:1.1}
.founder-card span{font-size:12.5px;line-height:1.4;color:#4F5A55}
.founder-face{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none}
.way-row{display:flex;gap:12px;align-items:flex-start}
.way-n{flex:none;width:30px;height:30px;border-radius:50%;background:#F6EADB;color:#8A4F2A;font:800 12px/30px Manrope,system-ui,sans-serif;text-align:center}
.way-tx{display:flex;flex-direction:column;gap:2px;font-size:13.5px;line-height:1.4}
.way-tx span{color:#5B6560}
/* L'humeur du jour : une ligne claire dans la bulle de SAFY (Ronan, 15/10 à 9h54), les têtes en grand dans une feuille. */
.sh-mood{display:flex;align-items:center;gap:8px;width:100%;margin-top:6px;padding:6px 10px 6px 6px;border:1px solid #EADFCF;border-radius:16px;background:#FBF4EA;color:#17211F;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.sh-mood .safy{flex:none}
.sh-mood-q{flex:1;min-width:0;font:700 13px/1.25 Manrope,system-ui,sans-serif}
.sh-mood-q b{color:#8A4F2A}
.sh-mood-go{flex:none;padding:5px 10px;border-radius:999px;background:#17211F;color:#FFFDF9;font:800 11.5px/1 Manrope,system-ui,sans-serif}
.mood-sheet{margin-top:6px}
.mood-sheet .mood-pick{min-height:92px}
.mood-sheet .mood-pick small{font-size:12px}
/* Le « ? » un poil plus gros, avec quelques mots dessous (Ronan, 15/10 à 9h54). */
.help-fab{z-index:30;width:auto;height:auto;padding:0;border:0;background:none;box-shadow:none;border-radius:0;display:flex;flex-direction:column;align-items:center;gap:3px;bottom:calc(84px + env(safe-area-inset-bottom,0px))}
/* Ronan (16/10) : le « ? » s'efface quand on écrit ou quand il recouvre un bouton d'une barre fixée à l'écran. */
.help-fab{transition:opacity .18s ease,transform .18s ease}
.help-fab.hf-away,body:has(textarea:focus,input:focus,select:focus) .help-fab{opacity:0;transform:scale(.85);pointer-events:none}
/* Audit Codex B17 (23/10) : la place de la bulle « ? » est réservée en bas de page : le dernier bouton remonte au-dessus d'elle. */
body:has(.help-fab) main.view:not(.no-tab):not(.ritual-view){padding-bottom:calc(196px + env(safe-area-inset-bottom,0px))}
.hf-q{width:54px;height:54px;border-radius:50%;border:2px solid #fff;background:linear-gradient(135deg,#E9A27C,#C9704B);color:#fff;font:800 27px/1 Manrope,system-ui,sans-serif;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 24px rgba(201,112,75,.38)}
.hf-lb{padding:3px 8px;border-radius:999px;background:rgba(255,253,249,.94);border:1px solid #EADFCF;color:#8A4F2A;font:800 10px/1.15 Manrope,system-ui,sans-serif;text-align:center;box-shadow:0 4px 10px rgba(23,33,31,.08)}
.home-v2>.search-bar:last-child{margin-bottom:72px}
/* Accueil simplifié (Ronan, 15/10 à 15h) : une carte SAFY pleine largeur (humeurs nommées, question directe), une carte
   « Aujourd'hui » à quatre cases, puis « Que voulez-vous faire ? » en cartes claires. */
.safy-card{background:#FFFDF9;border:1px solid #EADFCF;border-radius:24px;padding:14px 14px 12px;display:flex;flex-direction:column;gap:8px;box-shadow:0 6px 18px rgba(98,64,33,.06)}
.safy-card.pop{animation:safyPop .45s cubic-bezier(.3,1.4,.5,1)}
.sc-head{display:flex;align-items:center;gap:10px}
.sc-who{display:flex;flex-direction:column;gap:1px;min-width:0}
.sc-hello{font:600 21px/1.1 'Cormorant Garamond',Georgia,serif;color:#17211F}
.sc-say{margin:0;font-size:14.5px;line-height:1.45;color:#17211F}
.sc-mood-box{background:#FBF4EA;border-radius:18px;padding:10px 8px 6px}
.sc-q{margin:0 0 4px 4px;font:800 13px/1.2 Manrope,system-ui,sans-serif;color:#17211F}
.sc-moods{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px}
.sc-mood{border:0;background:none;border-radius:14px;padding:4px 0 2px;display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;min-height:70px;justify-content:flex-end;-webkit-tap-highlight-color:transparent}
.sc-mood small{font:700 11px/1.1 Manrope,system-ui,sans-serif;color:#5B6560;white-space:nowrap}
.sc-mood .safy{transition:transform .2s,opacity .2s}
.sc-mood:not(.on) .safy{opacity:.85}
.sc-mood.on{background:#FFFDF9;box-shadow:0 2px 8px rgba(98,64,33,.12)}
.sc-mood.on small{color:#8A4F2A}
.sc-mood.on .safy{transform:scale(1.12)}
.sc-ask{display:flex;align-items:center;gap:8px;border:1px solid #E2D6C5;border-radius:999px;background:#fff;padding:4px 4px 4px 14px}
.sc-ask-in{flex:1;min-width:0;border:0;background:none;font:500 14.5px Manrope,system-ui,sans-serif;color:#17211F;outline:none;padding:8px 0}
.sc-send{flex:none;width:38px;height:38px;border-radius:50%;border:0;background:#17211F;color:#FFFDF9;display:grid;place-items:center}
.sc-send svg{width:18px;height:18px}
.today-card{background:#FFFDF9;border:1px solid var(--soft-line);border-radius:24px;padding:14px;display:flex;flex-direction:column;gap:8px}
.td-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.td-head b{font-size:22px;line-height:1}
.td-all{font:700 12.5px Manrope,system-ui,sans-serif;color:#8A4F2A;text-decoration:none}
.td-help{margin:-2px 0 2px;font-size:12px;color:#5B6560}
.td-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.td-slot{display:contents}
.td-tile{display:flex;align-items:center;gap:10px;min-height:62px;padding:10px;border-radius:16px;border:1px solid #EFE6D9;background:#FBF7F1;color:#17211F;text-decoration:none;text-align:left;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.td-tile:active{transform:scale(.97)}
.td-tile.now{border-color:#D9B48F;background:#FFF5EA}
.td-tile.st-ok{background:#EEF6F1;border-color:#CFE3D7}
.td-ic{flex:none;width:34px;height:34px;border-radius:11px;background:#17211F;color:#fff;display:grid;place-items:center}
.td-ic svg{width:19px;height:19px}
.td-tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.td-tx b{font:800 13px/1.15 Manrope,system-ui,sans-serif}
.td-st{font:700 12px/1.2 Manrope,system-ui,sans-serif;color:#8A4F2A;display:flex;flex-direction:column;gap:4px}
.td-st.st-ok{color:#2F7F5C}
.td-dots{display:flex;gap:4px}
.td-dots .sw-dot{width:8px;height:8px}
.td-dots .sw-dot.today{box-shadow:0 0 0 1.5px #FBF7F1,0 0 0 3px #17211F}
.td-dots .sw-dot.none.today{box-shadow:inset 0 0 0 1.5px #CFC7BA,0 0 0 1.5px #FBF7F1,0 0 0 3px #17211F}
.today-card .zone-seg{align-self:stretch;justify-content:space-between}
.today-card .zone-tab{flex:1;justify-content:center;padding:5px 6px;font-size:12px}
.td-safy{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:14px;background:#FFF1EA;color:#8A4F2A;font:800 12.5px Manrope,system-ui,sans-serif;text-decoration:none}
.td-safy>span:nth-child(2){flex:1}
.hm-sec{margin:4px 2px -2px;font:600 23px/1.1 'Cormorant Garamond',Georgia,serif}
.cat-card.t-wide{grid-column:1/-1;flex-direction:row;align-items:center;background:#FFF8EC;border-color:#EBD9B9}
.today-card{text-align:left}
.td-head{width:100%}
.td-help{text-align:left}
/* « Que voulez-vous faire ? » : des cartes basses, l'icône à gauche, qu'on fait défiler d'un pouce (Ronan : « comme une molette »). */
.home-v2 .cat-grid{gap:8px}
.home-v2 .cat-card{flex-direction:row;align-items:center;gap:10px;padding:11px 10px;min-height:64px}
.home-v2 .cat-card .app-sq{width:38px;height:38px;flex:none}
.home-v2 .cat-tx b{font-size:13.5px;line-height:1.2}
.home-v2 .cat-tx span{font-size:11.5px;line-height:1.3}
.td-help{align-self:flex-start}.td-head{align-self:stretch}
/* 15/10 (20h16) : les sources de chaque avis, repliées, lisibles */
.src-fold summary{font-size:12.5px;color:var(--muted,#6b6b6b)}
.src-fold a{color:inherit;text-decoration:underline;text-underline-offset:2px;font-weight:600}
/* 15/10 (20h16) : propositions à mon budget */
.prop-card .pthumb{flex:0 0 auto}
.liked-pill{background:var(--blush,#f6e3dc);color:var(--deep,#5a3b2e)}
.other-tiers>summary{font-weight:700}
/* 15/10 (20h16, Paloma) : « des gouttes de couleur avec un petit logo à l'intérieur, dans le même style que l'iPhone mais par
   des gouttes » : la goutte, symbole de Safety Care, remplace les carrés partout où il y a une icône d'application. */
:root{--drop-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 2C50 2 13 44 13 64a37 36 0 0 0 74 0C87 44 50 2 50 2Z'/%3E%3C/svg%3E")}
.app-sq,.cat-card .app-sq,.later-row .app-sq,.comite-row .app-sq,.home-v2 .cat-card .app-sq{border-radius:0;box-shadow:none;box-sizing:border-box;padding:0;-webkit-mask:var(--drop-mask) center/contain no-repeat;mask:var(--drop-mask) center/contain no-repeat}
.app-sq svg,.cat-card .app-sq svg,.later-row .app-sq svg,.home-v2 .cat-card .app-sq svg{width:42%;height:auto;aspect-ratio:1;max-width:30px;transform:translateY(32%)}
.app-sq.folder{padding:0;box-shadow:none;grid-template-columns:repeat(2,9px);grid-template-rows:repeat(2,9px);gap:2px;place-content:center;align-content:center;padding-top:14px}
.app-sq.folder i{border-radius:0;-webkit-mask:var(--drop-mask) center/contain no-repeat;mask:var(--drop-mask) center/contain no-repeat}
.app-sq.safy-sq,.cat-card .app-sq.safy-sq{-webkit-mask:none;mask:none;background:none;padding:0}
.tc-ic,.td-ic{border-radius:0;-webkit-mask:var(--drop-mask) center/contain no-repeat;mask:var(--drop-mask) center/contain no-repeat}
.tc-ic svg,.td-ic svg{transform:translateY(30%)}
.td-ic svg{width:15px;height:15px}
.tc-ic svg{width:17px;height:17px}

/* ---------- « Les produits » (Ronan, 16/10 à 11h46) : recherche immédiate, rayons, goutte de compatibilité ---------- */
.lp-view{gap:12px}
.lp-top{position:sticky;top:env(safe-area-inset-top,0px);z-index:6;display:flex;flex-direction:column;gap:10px;margin:0 -18px;padding:6px 18px 8px;transition:background-color .2s ease,box-shadow .2s ease}
/* Collée en haut pendant qu'on fait défiler : un voile flou derrière la recherche et les rayons. */
.lp-top.stuck{background:rgba(238,232,222,.92);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 10px 24px -18px rgba(22,34,31,.35)}
.lp-sentinel{height:1px;margin-bottom:-13px}
.lp-top.stuck::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:env(safe-area-inset-top,0px);background:inherit}
.lp-search{display:flex;align-items:center;gap:6px;min-height:56px;padding:0 6px 0 16px;border-radius:28px;background:#fff;border:1px solid var(--line);box-shadow:0 8px 24px rgba(22,34,31,.07)}
.lp-search:focus-within{border-color:var(--deep);box-shadow:0 0 0 3px rgba(22,34,31,.08),0 8px 24px rgba(22,34,31,.07)}
.lp-search .search-ic{display:flex;color:var(--muted)}
.lp-input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font-size:17px;padding:15px 2px;outline:none;-webkit-appearance:none;appearance:none}
.lp-input::placeholder{color:var(--muted);opacity:.85}
.lp-input::-webkit-search-cancel-button,.lp-input::-webkit-search-decoration{-webkit-appearance:none;display:none}
.lp-clear{flex:none;width:36px;height:36px;border:0;border-radius:18px;background:var(--cream);color:var(--muted);font-size:20px;line-height:1}
.lp-clear[hidden]{display:none}
.lp-scan{flex:none;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:22px;background:var(--deep);color:var(--ivory);text-decoration:none}
.lp-scan svg{width:20px;height:20px}
.lp-chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -18px;padding:0 18px 2px;scroll-padding:0 18px;-webkit-overflow-scrolling:touch}
.lp-chips::-webkit-scrollbar{display:none}
.lp-chip{flex:none;min-height:36px;padding:6px 14px;font-size:13.5px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.lp-n{font-size:11.5px;font-weight:800;opacity:.65;font-variant-numeric:tabular-nums}
.lp-count{margin:0 2px;font-size:12.5px;color:var(--muted);min-height:1.3em}
.lp-list{display:flex;flex-direction:column;gap:8px;transition:opacity .18s ease}
.lp-list.loading{opacity:.5}
.lp-row{display:flex;align-items:center;gap:4px;padding:4px 6px 4px 10px;border-radius:22px;background:#fff;border:1px solid var(--soft-line)}
.lp-main{flex:1;min-width:0;display:flex;align-items:center;gap:12px;padding:8px 0;border:0;background:transparent;color:var(--ink);text-align:left;font:inherit;cursor:pointer}
.lp-main .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.lp-main small{font-size:12px;font-weight:700;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp-main b{font-size:14.5px;line-height:1.25;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.lp-meta{font-size:11.5px;color:var(--muted)}
.lp-meta:empty{display:none}
.lp-meta.mine{color:var(--bronze-deep);font-weight:700}
.lp-add{flex:none;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:20px;border:1px solid var(--line);background:transparent;color:var(--deep);font-size:22px;font-weight:500;line-height:1;transition:transform .12s ease}
.lp-add:active{transform:scale(.9)}
/* La goutte de compatibilité : la goutte Safety Care, remplie à hauteur du pourcentage, de la couleur du verdict. */
.cd-slot{flex:none;display:flex}
.cdrop{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-width:64px;padding:5px 10px 5px 8px;border-radius:15px;background:var(--cd-bg);color:var(--cd-ink);font-size:13px;line-height:1}
.cdrop b{font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.01em;white-space:nowrap}
.cd-ic{flex:none;display:flex;width:12px;height:20px}
.cd-ic svg{width:100%;height:100%;overflow:visible}
.cd-shell{fill:none;stroke:currentColor;stroke-width:1.4;vector-effect:non-scaling-stroke}
.cd-fill{fill:currentColor;opacity:.9;animation:cd-rise .7s cubic-bezier(.2,.8,.2,1) both}
@keyframes cd-rise{from{transform:translateY(490px)}}
.cdrop.green{--cd-bg:#E2EFE6;--cd-ink:#2D6A4A}
.cdrop.blue{--cd-bg:#E0EAF4;--cd-ink:#2B5B86}
.cdrop.orange{--cd-bg:#F7E6D3;--cd-ink:#965519}
.cdrop.red{--cd-bg:#F6DEDA;--cd-ink:#9A2E21}
.cdrop.grey,.cdrop.wait{--cd-bg:var(--cream);--cd-ink:var(--muted)}
.cdrop.wait b{animation:cd-pulse 1.1s ease-in-out infinite}
@keyframes cd-pulse{50%{opacity:.3}}
.cdrop.big{min-width:0;padding:12px 16px 12px 14px;border-radius:22px;font-size:26px;gap:10px}
.cdrop.big .cd-ic{width:22px;height:36px}
.cmp-head{display:flex;align-items:center;gap:12px}
.cmp-head .tx{display:flex;flex-direction:column;min-width:0}
.cmp-head small{font-size:12px;font-weight:700;color:var(--muted)}
.cmp-hero{display:flex;align-items:center;gap:14px}
.cmp-hero>.cdrop{flex:none}
.cmp-title{font-family:var(--display);font-weight:600;font-size:22px;line-height:1.15;color:var(--deep)}
.cmp-sec{display:flex;flex-direction:column;gap:6px}
.cmp-sec .eyebrow{margin:0}
.cmp-sec ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px;font-size:14px}
.cmp-ask{padding:10px 12px;border-radius:14px;background:var(--cream);margin:0}
@media (prefers-reduced-motion:reduce){.cd-fill,.cdrop.wait b{animation:none}}

/* ---------- Le Livre de peau (V-LIVRE01, maquette validée le 15/10 à 8h22) : une page à la fois, on tourne en glissant ---------- */
.bk-view{gap:14px}
.bk-wrap{display:flex;justify-content:center;min-height:200px}
.bk{width:min(100%,430px);border-radius:8px;box-shadow:0 26px 50px rgba(40,26,14,.26),0 6px 14px rgba(40,26,14,.16);overflow:hidden;background:var(--bk-paper)}
.bk-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;outline:none}
.bk-track::-webkit-scrollbar{display:none}
.bk-page{position:relative;flex:0 0 100%;aspect-ratio:470/640;box-sizing:border-box;scroll-snap-align:start;scroll-snap-stop:always;overflow:hidden;padding:44px 36px;display:flex;flex-direction:column;gap:10px;background:var(--bk-paper);color:var(--bk-ink);text-align:var(--bk-align);font-family:var(--bk-body);font-size:var(--bk-size);line-height:1.58}
.bk-frame{position:absolute;inset:14px;border:1px solid var(--bk-line);pointer-events:none}
.bk-kick{margin:0;font:700 10px/1.2 var(--body);letter-spacing:.22em;text-transform:uppercase;color:var(--bk-accent)}
.bk-h{margin:0;font-family:var(--bk-display);font-weight:var(--bk-weight);font-size:30px;line-height:1.05;color:var(--bk-ink)}
.bk-num{font-family:var(--bk-display);font-size:66px;line-height:.8;color:var(--bk-accent)}
.bk-body{display:flex;flex-direction:column;gap:9px}
.bk-body p{margin:0}
.bk-note{margin:0;font-size:11px;line-height:1.45;color:var(--bk-soft);font-family:var(--body)}
.bk-empty{margin:auto 0;font-style:italic;color:var(--bk-soft)}
.bk-quote{margin:0;font-family:var(--bk-display);font-style:italic;font-size:18px;line-height:1.3;text-align:center}
.bk-sprig{position:absolute;width:96px;height:96px;color:var(--bk-accent);opacity:.65;pointer-events:none}
.bk-sprig.tr{right:8px;top:8px;width:74px;height:74px;opacity:.5}
.bk-sprig.bl{left:10px;bottom:10px;transform:rotate(180deg)}
.bk-sprig svg,.bk-art svg,.bk-crest svg,.bk-rule svg{width:100%;height:100%;display:block}
.bk-exlibris{justify-content:center;align-items:center;background:var(--bk-tint);gap:12px}
.bk-crest{position:absolute;width:62%;aspect-ratio:1;top:9%;left:19%;color:var(--bk-accent);opacity:.32}
.bk-own{margin:0;position:relative;font-family:var(--bk-display);font-style:italic;font-size:24px;line-height:1.2;text-align:center}
.bk-lead{margin:0;position:relative;max-width:250px;color:var(--bk-soft);text-align:center;font-size:12.5px}
.bk-exlibris .bk-kick{position:relative}
.bk-cover{padding:24px;background:var(--bk-cover);color:var(--bk-cover-ink)}
.bk-cover-frame{flex:1;display:flex;border:1px solid var(--bk-cover-ink);padding:5px}
.bk-cover-in{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:space-between;text-align:center;border:1px solid var(--bk-cover-ink);padding:30px 18px 24px}
.bk-brand{margin:0;font:700 10px/1 var(--body);letter-spacing:.34em;text-transform:uppercase}
.bk-cover-mid{display:flex;flex-direction:column;align-items:center;gap:12px}
.bk-drop-img{width:62px;height:108px;object-fit:contain}
.bk-title{margin:0;font-family:var(--bk-display);font-weight:var(--bk-weight);font-size:40px;line-height:1;color:var(--bk-cover-ink)}
.bk-for{margin:0;font-family:var(--bk-display);font-style:italic;font-size:21px;line-height:1.1}
.bk-cover-foot{display:flex;flex-direction:column;align-items:center;gap:6px}
.bk-cover-foot p{margin:0;font:600 9.5px/1.5 var(--body);letter-spacing:.14em;text-transform:uppercase}
.bk-rule{display:block;width:96px;height:10px;color:currentColor}
.bk-rule.big{width:120px;height:12px;margin:auto auto 0;color:var(--bk-accent)}
.bk-sign{margin-top:auto;display:flex;flex-direction:column;gap:2px;align-items:center}
.bk-st-moderne .bk-sign{align-items:flex-start}
.bk-sign span{font-family:var(--bk-display);font-style:italic;font-size:21px}
.bk-sign small{font:11px var(--body);color:var(--bk-soft)}
.bk-toc-list{display:flex;flex-direction:column}
.bk-toc-row{display:flex;align-items:baseline;gap:10px;padding:8px 0;border-bottom:1px solid var(--bk-line);text-align:left}
.bk-toc-n{width:28px;font-family:var(--bk-display);font-size:17px;color:var(--bk-accent)}
.bk-toc-t{flex:1;font-family:var(--bk-display);font-size:18px;line-height:1.15}
.bk-toc-p{font:11px var(--body);color:var(--bk-soft)}
.bk-toc .bk-note{margin-top:auto}
.bk-art{flex:1;display:grid;place-items:center;color:var(--bk-accent);min-height:0}
.bk-art svg{max-width:170px;max-height:100%}
.bk-rep{display:flex;gap:12px;padding:8px 0;border-bottom:1px solid var(--bk-line);text-align:left}
.bk-rep>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.bk-rep small,.bk-block small,.bk-safy small,.bk-moments small{font:700 9.5px/1.2 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--bk-soft)}
.bk-rep b{font-family:var(--bk-display);font-weight:var(--bk-weight);font-size:19px;line-height:1.1}
.bk-rep span{font-size:11.5px;line-height:1.4;color:var(--bk-soft)}
.bk-dot{flex:none;width:10px;height:10px;border-radius:50%;margin-top:5px}
.bk-dropcap::first-letter{font-family:var(--bk-display);font-size:42px;line-height:.8;float:left;margin:4px 7px 0 0;color:var(--bk-accent)}
.bk-moments{margin-top:auto;display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--bk-line);padding-top:10px;text-align:left}
.bk-moments>div{display:flex;flex-direction:column;gap:1px}
.bk-moments span{font-size:12px;line-height:1.35}
.bk-rits{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px}
.bk-rit{display:flex;flex-direction:column;gap:5px;text-align:left;min-width:0}
.bk-rit-h{font-family:var(--bk-display);font-weight:var(--bk-weight);font-size:19px;color:var(--bk-accent)}
.bk-step{display:flex;gap:10px;align-items:baseline}
.bk-step-n{flex:none;width:18px;height:18px;border-radius:50%;border:1px solid var(--bk-accent);color:var(--bk-accent);font:700 10px/16px var(--body);text-align:center}
.bk-step>div{display:flex;flex-direction:column;min-width:0}
.bk-step b{font-size:12px;line-height:1.25;font-family:var(--body)}
.bk-step span{font-size:10.5px;color:var(--bk-soft);line-height:1.3}
.bk-rituels .bk-note{margin-top:auto}
.bk-ing{display:flex;flex-direction:column;gap:4px;padding:10px 12px;border-radius:10px;background:var(--bk-tint);text-align:left}
.bk-ing-h{display:flex;align-items:center;gap:8px}
.bk-ing-h .bk-dot{margin:0}
.bk-ing-h b{font-family:var(--bk-display);font-size:17px;font-weight:var(--bk-weight)}
.bk-ing-l{margin:0;font:600 11.5px/1.4 var(--body)}
.bk-ing span{font-size:11px;line-height:1.4;color:var(--bk-soft)}
.bk-tip{display:flex;flex-direction:column;gap:1px;text-align:left}
.bk-tip b{font-family:var(--bk-display);font-weight:var(--bk-weight);font-size:17px}
.bk-tip span{font-size:11.5px;line-height:1.4;color:var(--bk-soft)}
.bk-massage{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;color:var(--bk-accent)}
.bk-massage>div{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}
.bk-massage svg{width:54px;height:54px}
.bk-face{stroke:var(--bk-line)}
.bk-massage small{font:10px/1.3 var(--body);color:var(--bk-soft)}
.bk-block{display:flex;flex-direction:column;gap:4px;padding:8px 0;border-bottom:1px solid var(--bk-line)}
.bk-block p{margin:0;font-size:12.5px}
.bk-safy{margin-top:auto;padding:12px 14px;border-radius:12px;background:var(--bk-tint);display:flex;flex-direction:column;gap:4px;text-align:left}
.bk-safy p{margin:0;font-family:var(--bk-display);font-style:italic;font-size:17px;line-height:1.25}
.bk-end{justify-content:center;align-items:center;gap:14px}
.bk-endline{margin:0;font-family:var(--bk-display);font-style:italic;font-size:26px;line-height:1.2;text-align:center}
.bk-end .bk-rule.big{margin:0 auto}
.bk-end .bk-note{text-align:center;max-width:280px}
.bk-st-moderne .bk-page{text-align:left}
.bk-st-moderne .bk-quote{text-align:left}
.bk-nav{display:flex;align-items:center;justify-content:center;gap:10px}
.bk-nav .icon-btn{font-size:22px;line-height:1}
.bk-dots{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;max-width:240px}
.bk-dot-btn{width:9px;height:9px;padding:0;border-radius:50%;border:0;background:var(--line)}
.bk-dot-btn[aria-current="true"]{background:var(--deep);transform:scale(1.25)}
.bk-opts{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.bk-opt{display:flex;align-items:center;gap:8px;min-height:48px;padding:8px 12px;border-radius:14px;border:1px solid var(--line);background:#fff;color:var(--ink);text-align:left;font:600 13px var(--body)}
.bk-opt[aria-pressed="true"]{border-color:var(--deep);box-shadow:0 0 0 2px var(--deep)}
.bk-opt>small{display:block;font-weight:500}
.bk-sw{flex:none;width:26px;height:26px;border-radius:8px;border:1px solid var(--line)}
.bk-aa{font-size:22px;line-height:1}
/* « Ma récompense » : le livre fermé, verrouillé */
.rw-book{position:relative;align-self:center;width:190px;aspect-ratio:3/4;margin:6px 0 4px}
.rw-cover{position:absolute;inset:0;border-radius:4px 10px 10px 4px;background:linear-gradient(105deg,#2A1E17 0,#3A2A21 9%,#4A372B 100%);color:#E3C08F;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:22px 14px;text-align:center;box-shadow:0 22px 40px rgba(40,26,14,.3),inset 6px 0 0 rgba(0,0,0,.18)}
.rw-cover small{font:700 9px/1 var(--body);letter-spacing:.3em;text-transform:uppercase}
.rw-cover b{font-family:var(--display);font-weight:600;font-size:28px;line-height:1}
.rw-cover i{font-family:var(--display);font-size:17px}
.rw-lock{position:absolute;right:-12px;bottom:28px;width:44px;height:44px;border-radius:22px;background:var(--ivory);display:grid;place-items:center;font-size:20px;box-shadow:0 6px 16px rgba(0,0,0,.18)}
.rw-pct{position:absolute;left:-14px;top:22px;padding:6px 10px;border-radius:14px;background:#16221F;color:#FFFDF9;font:800 13px var(--body);box-shadow:0 6px 16px rgba(0,0,0,.2)}
.rw-say{flex-direction:row;align-items:center;gap:12px}
.rw-safy{flex:none;display:flex}
.rw-bar{height:10px;border-radius:5px;background:var(--cream);overflow:hidden}
.rw-bar i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,#C08E3E,#A0602C)}
.rw-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:14px}
.rw-list li{display:flex;align-items:center;gap:10px}
.rw-tick{flex:none;width:20px;height:20px;border-radius:10px;border:1.5px solid var(--line);display:grid;place-items:center;font:800 11px var(--body);color:var(--ivory)}
.rw-tick.on{background:#2F7F5C;border-color:#2F7F5C}
/* Le PDF : chaque page du livre sur sa page A5, rien d'autre de l'application. */
@media print{
  @page{size:148mm 201mm;margin:0}
  html.bk-printing body{background:#fff}
  html.bk-printing body *{visibility:hidden}
  html.bk-printing .bk,html.bk-printing .bk *{visibility:visible}
  html.bk-printing .bk{position:absolute;left:0;top:0;width:148mm;box-shadow:none;border-radius:0}
  html.bk-printing .bk-track{display:block;overflow:visible}
  html.bk-printing .bk-page{width:148mm;height:201mm;aspect-ratio:auto;break-after:page;page-break-after:always;-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
/* ---------- « Ma routine » par étapes (16/10, à partir de Beauty Decoded) : le pourcentage, les étapes, les pistes ---------- */
.rt-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:999px;background:rgba(23,33,31,.06)}
.rt-tab{display:flex;align-items:center;justify-content:center;gap:8px;min-height:42px;border:0;border-radius:999px;background:none;color:var(--muted);font:700 14px var(--body);cursor:pointer;transition:background .18s,color .18s}
.rt-tab[aria-selected="true"]{background:var(--ivory);color:var(--deep);box-shadow:0 3px 10px rgba(23,33,31,.1)}
.rt-tic{display:flex;width:18px;height:18px}
.rt-tic svg{width:100%;height:100%}
.rt-box{gap:14px}
.rt-score{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:16px;padding:18px;border-radius:26px;background:var(--ivory);border:1px solid var(--soft-line);--rt-ink:var(--muted)}
.rt-score.green{--rt-ink:#2D6A4A}.rt-score.blue{--rt-ink:#2B5B86}.rt-score.orange{--rt-ink:#965519}.rt-score.red{--rt-ink:#9A2E21}
.rt-score>.cdrop{flex:none}
.rt-sc-tx{display:flex;flex-direction:column;gap:5px;min-width:0}
.rt-sc-k{font-size:13px;font-weight:700;color:var(--muted)}
.rt-sc-big{font:600 22px/1.15 var(--display);color:var(--ink)}
.rt-sc-steps{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);flex-wrap:wrap}
.rt-dots{display:inline-flex;gap:4px}
.rt-dots i{width:8px;height:8px;border-radius:50%;border:1.5px solid var(--rt-ink);opacity:.55}
.rt-dots i.on{background:var(--rt-ink);opacity:1}
.rt-after{align-self:flex-start;font-size:12.5px;padding:4px 10px;border-radius:999px;background:#E2EFE6;color:#2D6A4A}
.rt-go{align-self:flex-start;border:0;background:none;padding:2px 0;font:700 13px var(--body);color:var(--bronze-deep);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.rt-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.rt-step{position:relative;display:grid;grid-template-columns:30px 1fr;gap:10px;padding-bottom:14px}
.rt-step:not(:last-child)::before{content:"";position:absolute;left:14px;top:30px;bottom:0;width:1.5px;background:var(--line)}
.rt-n{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font:800 13px var(--body);color:var(--ivory);background:var(--deep);position:relative;z-index:1}
.rt-step.empty .rt-n{background:var(--ivory);color:var(--muted);border:1.5px dashed var(--muted)}
.rt-step.cleanse .rt-n{background:var(--cream);color:var(--muted)}
.rt-body{display:flex;flex-direction:column;gap:6px;min-width:0;padding-top:5px}
.rt-g{font-size:12.5px;font-weight:800;color:var(--bronze-deep)}
.rt-prod{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:20px;border:1px solid var(--soft-line);background:#fff;color:var(--ink);text-align:left;font:inherit;cursor:pointer;width:100%}
.rt-prod .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.rt-prod small{font-size:12px;font-weight:700;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rt-prod b{font-size:14.5px;line-height:1.25;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.rt-prod>.cdrop{flex:none}
.rt-q{font-size:11.5px;color:var(--muted)}
.rt-step.aside .rt-prod{opacity:.72}
.rt-step.aside .rt-prod b{text-decoration:line-through;text-decoration-thickness:1.5px}
.rt-choose{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 10px 10px 14px;border-radius:20px;border:1.5px dashed var(--line);background:transparent}
.rt-choose>span{display:flex;flex-direction:column;gap:1px;min-width:0}
.rt-choose b{font-size:14.5px;line-height:1.25}
.rt-have{font-size:12.5px;font-weight:700;color:var(--bronze-deep);text-decoration:underline;text-underline-offset:3px;align-self:flex-start;padding:2px 0}
.rt-choose .btn{flex:none}
.rt-tracks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.rt-track{display:flex;flex-direction:column;gap:6px;padding:13px 14px 13px 16px;border-radius:20px;background:#fff;border:1px solid var(--soft-line);border-left:4px solid var(--rt-k,var(--muted))}
.rt-track.red{--rt-k:#9A2E21}.rt-track.orange{--rt-k:#C07A35}.rt-track.sand{--rt-k:var(--bronze)}.rt-track.grey{--rt-k:var(--muted)}.rt-track.blue{--rt-k:#2B5B86}
.rt-tr-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.rt-tr-head b{font-size:14.5px;line-height:1.3}
.rt-gain{flex:none;font-size:12.5px;font-weight:800;padding:3px 9px;border-radius:999px;background:#E2EFE6;color:#2D6A4A;white-space:nowrap}
.rt-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
@media (max-width:340px){.rt-score{grid-template-columns:1fr}}
/* ---------- Une question à la fois (16/10, à partir de Beauty Decoded) et le résultat d'une étape ---------- */
.q1-head{display:flex;flex-direction:column;gap:3px}
.q1-count{font-size:12.5px;font-weight:800;color:var(--bronze-deep)}
.q1-step{font-size:13px;line-height:1.4;color:var(--muted)}
.q1-stage{display:flex;flex-direction:column;min-height:38vh}
.q1-stage .qtitle{font:600 26px/1.15 var(--display);color:var(--ink);margin:0}
.q1-stage .wrap{flex-direction:column;flex-wrap:nowrap;gap:8px}
.q1-stage .wrap .chip{width:100%;min-height:52px;padding:12px 18px;border-radius:18px;font-size:15px;line-height:1.3}
.q1-stage .scale button{min-height:48px}
.q1-in{animation:q1-in .28s cubic-bezier(.2,.8,.2,1)}
.q1-back{animation:q1-back .28s cubic-bezier(.2,.8,.2,1)}
@keyframes q1-in{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
@keyframes q1-back{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.q1-in,.q1-back{animation:none}}
.q1-nav{display:flex;flex-direction:column;gap:6px;align-items:stretch;width:100%}
.q1-hint{text-align:center}
.sr-card{padding:20px;border-radius:26px;background:var(--ivory);border:1px solid var(--soft-line);gap:10px}
.sr-k{margin:0;font-size:13px;font-weight:700;color:var(--muted)}
.sr-title{font-size:36px;line-height:1.05;margin:0}
.sr-state{display:flex;flex-direction:column;gap:3px;padding:11px 14px;border-radius:16px;background:var(--cream)}
.sr-state b{font-size:14.5px}
.sr-tip{color:var(--ok-ink);font-weight:700}
/* V-075 (15/10) : à quoi sert ce produit, sur son étape */
.fn-note{color:var(--bronze-deep);font-weight:600}
/* V-F03 (16/10) : les animations des bons gestes, dessinées et animées sans vidéo. */
.ga-player{display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:22px;background:#FFF8EE;border:1px solid #EADFCF}
.ga-stage{border-radius:16px;background:radial-gradient(120% 90% at 50% 10%,#FFFDF9 0%,#F6EADB 100%);overflow:hidden}
.ga-svg{display:block;width:100%;height:auto}
.ga-caption{margin:0;font-family:var(--display);font-size:22px;line-height:1.2;color:#3B2A1F;min-height:2.4em}
.ga-caption.in{animation:ga-cap .5s ease-out both}
.ga-bars{display:flex;gap:4px}
.ga-bar{flex:1;height:4px;border-radius:2px;background:#E6D9C8;overflow:hidden}
.ga-bar i{display:block;height:100%;width:0;background:#C98B5E}
.ga-bar.done i{width:100%}
.ga-bar.now i{width:50%}
.ga-bar.run i{animation:ga-bar linear forwards}
.ga-end{display:grid;gap:8px}
.ga-tip{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:14px;font-size:14px}
.ga-tip.no{background:#FFF1EC;border-left:4px solid #B4382B}
.ga-tip.ok{background:#EAF3EC;border-left:4px solid #3E7B5A}
.ga-circle{animation:ga-orbit 1.6s infinite linear;transform-box:fill-box;transform-origin:center}
.ga-press{animation:ga-press 1.8s infinite ease-in-out;transform-box:fill-box;transform-origin:center}
@keyframes ga-cap{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes ga-bar{from{width:0}to{width:100%}}
@keyframes ga-orbit{0%{transform:translate(6px,0)}25%{transform:translate(0,6px)}50%{transform:translate(-6px,0)}75%{transform:translate(0,-6px)}100%{transform:translate(6px,0)}}
@keyframes ga-press{0%,100%{transform:translateX(0) scale(1)}50%{transform:translateX(6px) scale(.96)}}
@keyframes ga-glow{0%,100%{opacity:0}50%{opacity:.55}}
@keyframes ga-glint{0%,100%{opacity:.3}50%{opacity:1}}
@keyframes ga-fall{0%{transform:translateY(-14px);opacity:0}20%{opacity:1}100%{transform:translateY(26px);opacity:0}}
@keyframes ga-pop{0%{transform:scale(.4);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes ga-draw{from{stroke-dashoffset:80}to{stroke-dashoffset:0}}
@keyframes ga-spin{to{transform:rotate(360deg)}}
@keyframes ga-mist{0%{transform:translate(0,0);opacity:0}30%{opacity:1}100%{transform:translate(24px,-6px);opacity:0}}
@keyframes ga-tap{0%,100%{transform:translateY(0);opacity:.35}40%{transform:translateY(3px) scale(.9);opacity:1}}
@keyframes ga-rub{0%,100%{transform:translateX(-14px)}50%{transform:translateX(14px)}}
@keyframes ga-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@media (prefers-reduced-motion: reduce){.ga-svg *,.ga-caption.in,.ga-bar.run i{animation:none!important}.ga-svg [opacity=".0"]{opacity:.5}}
/* V-122 (17/10) : un signe d'alerte pendant les questions de profil : le message se voit, sans affoler. */
.sr-state.sr-alert,.card.rt-alert{background:var(--alert-bg);border:1px solid var(--alert-line);color:var(--alert-ink)}
.sr-state.sr-alert b,.card.rt-alert b{color:var(--alert-ink)}
/* V-139 (17/10) : la petite phrase après un écran, en haut du suivant. */
.safy-line.echo-line{margin:2px 0 0}
/* V-QREV-04-CONTEXTE (17/10) : ce que le mode de vie change à une étape. */
.fn-note.life-note{border-left:2px solid var(--bronze,#B07A4F);padding-left:8px}
/* Ronan, 17/10 (q158, q250) : la correspondance à ses critères. */
.small.match-line{color:var(--deep)} .small.match-line.full b{color:var(--ok-ink)}

/* Safety Care Officine (21/10) : l'espace de la pharmacie pilote. Le parcours en huit étapes se lit comme un fil, de haut en bas. */
.ofc-hero{gap:8px}
.ofc-steps{list-style:none;counter-reset:ofc;margin:0;padding:0}
.ofc-steps li{counter-increment:ofc;position:relative;display:flex;flex-direction:column;gap:2px;padding:8px 0 14px 46px}
.ofc-steps li::before{content:counter(ofc);position:absolute;left:0;top:6px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:13px;border:1.5px solid var(--line);background:var(--ivory);color:var(--muted)}
.ofc-steps li.is-ready::before{background:var(--deep);border-color:var(--deep);color:var(--ivory)}
.ofc-steps li::after{content:'';position:absolute;left:15px;top:38px;bottom:-4px;width:1.5px;background:var(--soft-line)}
.ofc-steps li:last-child::after{display:none}
.ofc-on{color:var(--ok-ink);font-weight:700}
.ofc-person{display:flex;align-items:center;gap:12px}
.ofc-initial{width:36px;height:36px;border-radius:50%;background:var(--cream);color:var(--bronze-deep);display:grid;place-items:center;font-family:var(--display);font-size:20px;font-weight:700;flex:none}
.chip.ofc-range{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:5px 12px}
.ofc-x{font-size:17px;line-height:1;color:var(--muted)}
.ofc-link{display:block;padding:10px 12px;border-radius:12px;background:#fff;border:1px solid var(--line);font-size:13px;word-break:break-all;user-select:all;color:var(--deep)}
.ofc-choice{display:flex;flex-direction:column;gap:2px;text-decoration:none;color:inherit}
.ofc-qr{width:min(260px,70vw);padding:12px;border-radius:18px;background:#fff;border:1px solid var(--line)}
.ofc-qr svg{display:block;width:100%;height:auto}
.ofc-info{padding:12px 14px;border-radius:14px;background:var(--ivory);border:1px solid var(--line)}
.ofc-step{padding:10px 0;border-top:1px solid var(--soft-line)}
.ofc-pct{flex:none;font-size:12px;font-weight:800;padding:2px 9px;border-radius:10px;background:var(--cream);color:var(--deep)}
.ofc-pct.tone-green{background:var(--ok-bg);color:var(--ok-ink)}
.ofc-pct.tone-orange,.ofc-pct.tone-amber{background:#FFF6E6;color:#7A5418}
.ofc-pct.tone-red{background:var(--alert-bg);color:var(--alert-ink)}
.ofc-pct.tone-blue{background:#E7F1FB;color:#2E5B8A}
.ofc-alert{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:14px;background:var(--cream);color:inherit;text-decoration:none}
.ofc-alert:focus-visible{outline:2px solid var(--deep);outline-offset:2px}
.ofc-alert-i{flex:none;width:26px;height:26px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:14px;background:#fff;color:var(--deep)}
.ofc-alert-fin .ofc-alert-i{background:#F6E3C8;color:#7A4A12}
.ofc-alert-revoir .ofc-alert-i{background:#DCEBE4;color:#1F5A45}
.ofc-rdv-item{padding:12px 14px;border-radius:14px;background:var(--cream)}
.ofc-rdv{padding:2px 0 12px;border-bottom:1px solid var(--soft-line)}
.ofc-tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.ofc-tile{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:16px;background:var(--cream)}
.ofc-tile b{font-family:var(--display);font-size:30px;line-height:1;color:var(--deep)}
.ofc-bars{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;align-items:end;height:120px}
.ofc-bar{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:3px}
.ofc-bar i{display:block;width:100%;min-height:2px;border-radius:6px 6px 2px 2px;background:var(--bronze)}
.ofc-bar-n{font-size:11px;font-weight:800;color:var(--deep)}
.ofc-bar-l{font-size:10px;color:var(--muted);white-space:nowrap}

/* ---------- Espace pro officine sécurisé (22/10) : la porte d'entrée ---------- */
.pro-door-logo{display:flex;align-items:center;gap:12px;margin:8px 4px 4px}
.pro-door-logo img{width:37px;height:64px;object-fit:contain}
.pro-door-logo>span{display:flex;flex-direction:column;gap:3px}
.pro-door-logo b{font:600 20px/1 'Cormorant Garamond',Georgia,serif;letter-spacing:.16em;color:#A27A4E}
.pro-door-logo small{font:400 11px/1 var(--cg-sans,system-ui);letter-spacing:.08em;color:#6E6259}
.pro-door-card{gap:10px;margin-top:4px}
.pro-door-card .h2{margin:4px 0 0;font-size:15px}

/* Écriture au fil de l'eau (SAFY, 22/10) : le brouillon relu s'écrit dans la bulle ; la réponse finale le remplace. */
.safy-draft{white-space:pre-wrap;margin-top:8px;font-size:15px;line-height:1.55;color:inherit;animation:safy-draft-in .25s ease}
@keyframes safy-draft-in{from{opacity:.4}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.safy-draft{animation:none}}
/* Espace pro officine (V-BP-D19) : gamme mise en avant par la pharmacie. */
.ofc-featured{color:#8A6236;font-weight:600}
.ofc-star[aria-pressed="true"]{background:#F6E9D6;border-color:#C9A574;color:#6B4A27}
/* Ma routine idéale (Ronan, 23/10 à 15h18) : étape par étape, ce que vous avez, puis maintenant ou plus tard, et l'option premium. */
.ideal-step .ideal-n{flex:none;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--cream);color:var(--bronze-deep);font-weight:800;font-size:13px}
.ideal-step .ideal-title{font-size:17px}
.ideal-need{border-top:1px solid var(--line);padding-top:10px}
.ideal-st.green{background:var(--ok-bg);color:var(--ok-ink)}
.ideal-st.orange,.ideal-st.red{background:var(--alert-bg);color:var(--alert-ink)}
.ideal-st.yellow{background:var(--verdict);color:var(--bronze-deep)}
.ideal-opt.premium{border:1px solid var(--champagne);border-radius:16px;padding:8px}
.premium-pill{background:var(--champagne);color:#3B2618}
.ideal-cta{border:1px solid var(--champagne)}
/* Module 9 (Ronan, 23/10 à 15h18) : offres, carte de fidélité et tampons. */
.ofc-sub{font-size:17px;margin:6px 0 0}
.stamp-row{display:flex;flex-wrap:wrap;gap:6px}
.stamp{width:22px;height:22px;border-radius:50%;border:1.5px dashed var(--champagne);background:transparent}
.stamp.on{border-style:solid;border-color:var(--bronze);background:var(--bronze)}
.ofc-qr.small-qr{flex:none;width:96px;padding:6px;border-radius:12px}
.loyalty-card .card-no{font-size:22px;letter-spacing:.14em}
.card-input{text-transform:uppercase;letter-spacing:.12em}
.card-input::placeholder{text-transform:none;letter-spacing:normal}
/* Nouvelle adresse (24/10) : barre en haut de l'ancienne adresse, pour passer sur app.safety-care.fr sans se reconnecter. */
.move-bar{position:sticky;top:0;z-index:50;display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;justify-content:center;padding:10px 16px;background:#2b1d22;color:#fbf6f1;font-size:14px;line-height:1.35;text-align:center}
.move-bar .btn{background:#fbf6f1;color:#2b1d22;border:0}