/* ---------- Interface « conciergerie » (Ronan, 21/10 à 23h05 et 23h38 : ses trois maquettes, « fidèle à 100 % ») ----------
   L'écran de la maquette fait 390 de large : chaque cote de l'accueil est en u (1/390 de la largeur), pour garder exactement
   les proportions sur tout téléphone. Le décor, la goutte de verre et le portrait viennent de ses maquettes (textes effacés).
   Tout est rangé sous html.ui2.cg : l'aurore et l'interface classique ne changent pas. */
html.ui2.cg{
  --u:calc(min(100vw, 480px) / 390);
  --cg-ink:#3A3029; --cg-ink2:#5A4E45; --cg-muted:#8A7C70; --cg-gold:#A27A4E; --cg-gold-d:#8A6238; --cg-gold-l:#E7D4B4;
  --cg-glass:linear-gradient(170deg,rgba(255,255,255,.8),rgba(250,245,239,.7)); --cg-line:rgba(255,255,255,.88); --cg-hair:rgba(150,116,76,.18);
  --cg-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 1px 0 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(200,178,150,.28),0 3px 4px rgba(140,108,74,.08),0 8px 18px rgba(140,108,74,.12);
  --cg-serif:'EB Garamond','Cormorant Garamond',Georgia,serif; --cg-sans:'Nunito Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ivory:#F6F1EA; --cream:#F1E9DD; --ink:#3A3029; --deep:#3A3029; --muted:#7C6D60; --line:#E4D8C7; --soft-line:#EEE5D8;
  --nude:#EAD9C4; --champagne:#D9BC8E; --bronze:#A27A50; --bronze-deep:#7E5C3B; --cyan:#8E6639;
  --sc-liq1:#FFF9EF; --sc-liq2:#F1DEBB; --sc-liq3:#D2AC74; --sc-liq-back:#F5E5C6; --sc-glow:#E6C897;
  --acc-a:#D3B184; --acc-b:#A47B4E; --acc-ink:#FFFFFF; --body:var(--cg-sans);
  color-scheme:light;
}
html.ui2.cg body{background:#F3EDE5;color:var(--cg-ink);font-family:var(--cg-sans)}
html.ui2.cg body::before{animation:none;inset:0;background:linear-gradient(180deg,#F5EFE7 0%,#F2EBE2 50%,#EFE7DC 100%)}
@media (min-width:560px){html.ui2.cg .app{box-shadow:0 30px 80px rgba(120,90,56,.18);border-color:rgba(255,255,255,.9)}}
html.ui2.cg a{color:var(--cyan)}
html.ui2.cg :focus-visible{outline-color:var(--cg-gold-d)}
html.ui2.cg .serif{font-family:var(--cg-serif);font-weight:400;letter-spacing:0;color:var(--cg-ink)}
html.ui2.cg .eyebrow{color:var(--cg-gold-d)}
html.ui2.cg.day .btn{background:linear-gradient(135deg,#C9A274,#A27648);color:#fff;box-shadow:0 8px 20px rgba(150,110,60,.24)}
html.ui2.cg.day .btn.ghost{background:rgba(255,255,255,.6);color:var(--cg-gold-d);border:1px solid var(--cg-hair);box-shadow:none}
html.ui2.cg.day .btn.light{background:rgba(255,255,255,.75);color:var(--cg-ink)}
html.ui2.cg.day .btn:disabled{background:#ECE4D8;color:var(--cg-muted);box-shadow:none}
html.ui2.cg.day .chip[aria-pressed="true"]{background:linear-gradient(135deg,#C9A274,#A27648);color:#fff;border-color:transparent}
html.ui2.cg.day .card{background:rgba(255,252,247,.8);border:1px solid var(--cg-line);box-shadow:var(--cg-shadow)}
/* 22/10 : les cartes sombres (espace pro, espace officine) gardent leur fond sombre : leur texte clair restait invisible. */
html.ui2.cg.day .card.dark{background:linear-gradient(150deg,#55432F,#2F2620);border:0;color:#FFFDF9}
html.ui2.cg.day .card.dark .eyebrow{color:#E6C99B}

/* ---------- Le haut (accueil et autres écrans) : le vrai logo, SAFETY CARE, la cloche ---------- */
.cg-top{position:relative;height:calc(64 * var(--u))}
.cg-brand{position:absolute;inset:0 calc(60 * var(--u)) 0 0;text-decoration:none}
/* Le vrai logo (Ronan, 22/10) : la goutte de sérum au SC noir, centrée sur le nom. */
.cg-logo{position:absolute;left:calc(27 * var(--u));top:calc(9.6 * var(--u));width:auto;height:calc(53 * var(--u));filter:drop-shadow(0 2px 5px rgba(140,100,54,.22))}
.cg-word{position:absolute;left:calc(70 * var(--u));top:calc(18.6 * var(--u));display:flex;flex-direction:column;gap:calc(5.2 * var(--u));white-space:nowrap}
.cg-word b{font:600 calc(23 * var(--u))/1 'Cormorant Garamond',Georgia,serif;letter-spacing:.13em;background:linear-gradient(100deg,#B58E5E 0%,#9A7046 45%,#C59E6C 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.cg-word small{font:400 calc(7.4 * var(--u))/1 var(--cg-sans);letter-spacing:.13em;text-transform:uppercase;color:#8A7766}
.cg-bell{position:absolute;left:calc(347 * var(--u));top:calc(20.6 * var(--u));width:calc(25 * var(--u));height:calc(26 * var(--u));display:flex;align-items:center;justify-content:center;color:#3E3631;text-decoration:none}
html.ui2.cg .cg-bell{color:#3E3631}
.cg-bell>span{display:flex}
.cg-bell svg{width:calc(23 * var(--u));height:calc(23 * var(--u))}
.cg-bell-dot{position:absolute;right:calc(1 * var(--u));top:calc(1.5 * var(--u));width:calc(6 * var(--u));height:calc(6 * var(--u));border-radius:50%;background:#E3A46B;box-shadow:0 0 0 1px rgba(255,255,255,.8)}

/* ---------- L'accueil : la scène de la maquette, au millimètre ---------- */
html.ui2.cg .view.cg-home{padding:env(safe-area-inset-top,0px) 0 calc(120 * var(--u) + env(safe-area-inset-bottom,0px));gap:0;background:linear-gradient(180deg,#F1EAE1 0,#E9DCCD calc(380 * var(--u)),#E4D3C3 calc(414 * var(--u)),#E6D6C7 calc(560 * var(--u)),#EADDCF calc(800 * var(--u)),#EFE6DB calc(1200 * var(--u)))}
.cg-scene{position:relative;height:calc(414.7 * var(--u));background:url(/images/cg/cg-accueil-scene.webp) center top/100% 100% no-repeat}
.cg-title{position:absolute;left:calc(23.4 * var(--u));top:calc(71.6 * var(--u));margin:0;font:400 calc(32.4 * var(--u))/1.2 var(--cg-serif);letter-spacing:-.003em;color:#33291F;white-space:nowrap}
.cg-sub{position:absolute;left:calc(23 * var(--u));top:calc(108.6 * var(--u));width:calc(300 * var(--u));margin:0;font:300 calc(13.2 * var(--u))/calc(15.4 * var(--u)) var(--cg-sans);letter-spacing:.03em;color:#4A4038;text-wrap:pretty}
.cg-sub.long{font-size:calc(12.4 * var(--u));line-height:calc(14.6 * var(--u));width:calc(330 * var(--u))}
/* La grande goutte. */
.cg-drop-home{left:calc(117.7 * var(--u));top:calc(145.2 * var(--u));width:calc(154 * var(--u));height:calc(224.9 * var(--u))}
.cg-drop{position:absolute;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transform-origin:50% 92%}
.cg-drop:focus-visible{outline:2px solid var(--cg-gold-d);outline-offset:4px;border-radius:40%}
.cg-drop-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.cg-liq{transform:translate(0,var(--lv))}
.cg-men{transform-box:fill-box;transform-origin:50% 50%;transform:scaleX(var(--sx))}
.cg-mono{opacity:.62;mix-blend-mode:multiply}
.cg-gl{fill:#D8B07A;opacity:0}
.cg-sweep{opacity:0}
.cg-num{position:absolute;left:0;right:0;top:calc(124.6 * var(--u));display:flex;flex-direction:column;align-items:center;pointer-events:none;color:#6B4B2A}
.cg-num b{font:400 calc(44 * var(--u))/1 'Cormorant Garamond',Georgia,serif;font-variant-numeric:lining-nums;font-feature-settings:'lnum' 1;letter-spacing:-.01em;color:#5E4024;text-shadow:0 0 calc(10 * var(--u)) rgba(255,250,240,.9),0 0 2px rgba(255,250,240,.9)}
.cg-num b small{font:400 .36em/1 var(--cg-sans);margin-left:.1em;letter-spacing:.02em;color:#7A5833}
.cg-num>span{font:600 calc(8.4 * var(--u))/calc(11.4 * var(--u)) var(--cg-sans);letter-spacing:.22em;text-transform:uppercase;color:#6E5236;text-shadow:0 0 6px rgba(255,250,240,.95)}
.cg-num>span:first-of-type{margin-top:calc(6.4 * var(--u))}
.cg-rings{position:absolute;left:50%;top:94%;width:0;height:0;pointer-events:none}
.cg-rings i{position:absolute;left:calc(-60 * var(--u));top:calc(-14 * var(--u));width:calc(120 * var(--u));height:calc(28 * var(--u));border-radius:50%;border:1.5px solid rgba(255,255,255,.95);opacity:0;box-shadow:0 0 10px rgba(255,236,200,.8)}
@media (prefers-reduced-motion:no-preference){
  .cg-liq{animation:cg-fill 2.2s cubic-bezier(.2,.7,.2,1) both}
  .cg-wave{animation:cg-wave 5s linear infinite}
  .cg-men{animation:cg-men 6s ease-in-out infinite}
  .cg-gl{animation:cg-gl var(--d) ease-in infinite;animation-delay:var(--dl)}
  .cg-sweep{animation:cg-sweep 7s ease-in-out 2.4s infinite}
  .cg-drop.splash{animation:cg-squish .7s cubic-bezier(.3,1.5,.5,1)}
  .cg-drop.splash .cg-men{animation:cg-slosh 1.2s cubic-bezier(.3,.6,.3,1)}
  .cg-drop.splash .cg-rings i{animation:cg-ring 1.4s ease-out both}
  .cg-drop.splash .cg-rings i:nth-child(2){animation-delay:.18s}
  .cg-drop.splash .cg-rings i:nth-child(3){animation-delay:.36s}
}
@keyframes cg-fill{from{transform:translate(0,380px)}to{transform:translate(0,var(--lv))}}
@keyframes cg-wave{from{transform:translateX(0)}to{transform:translateX(-125px)}}
@keyframes cg-men{0%,100%{transform:scaleX(var(--sx)) rotate(-1.6deg) translateY(-1px)}50%{transform:scaleX(var(--sx)) rotate(1.6deg) translateY(1px)}}
@keyframes cg-slosh{0%{transform:scaleX(var(--sx)) rotate(0)}18%{transform:scaleX(var(--sx)) rotate(-7deg) translateY(-3px)}40%{transform:scaleX(var(--sx)) rotate(5deg)}62%{transform:scaleX(var(--sx)) rotate(-2.5deg)}100%{transform:scaleX(var(--sx)) rotate(0)}}
@keyframes cg-gl{0%{transform:translate(0,0);opacity:0}15%{opacity:.9}85%{opacity:.6}100%{transform:translate(0,var(--rise));opacity:0}}
@keyframes cg-sweep{0%,100%{transform:rotate(18deg) translateX(0);opacity:0}10%{opacity:1}45%{transform:rotate(18deg) translateX(330px);opacity:0}}
@keyframes cg-squish{0%{transform:scale(1)}30%{transform:scale(1.035,.965)}62%{transform:scale(.985,1.015)}100%{transform:scale(1)}}
@keyframes cg-ring{0%{transform:scale(.4);opacity:.95}100%{transform:scale(1.9);opacity:0}}
/* L'état de la peau, à droite de la goutte. */
.cg-chip{position:absolute;left:calc(244 * var(--u));top:calc(162.6 * var(--u));width:calc(131.5 * var(--u));min-height:calc(60.4 * var(--u));padding:0 0 calc(6 * var(--u));border:0;border-radius:calc(13 * var(--u));text-align:left;cursor:pointer;font:inherit;
  background:rgba(250,245,239,.42);box-shadow:inset 0 0 0 1px rgba(255,255,255,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:var(--cg-ink)}
.cg-chip-top{display:flex;align-items:center;gap:calc(6.5 * var(--u));height:calc(22.6 * var(--u));padding:0 calc(8 * var(--u)) 0 calc(10.6 * var(--u));border-radius:calc(11.3 * var(--u));background:rgba(222,210,197,.72)}
.cg-chip-top b{font:400 calc(11.4 * var(--u))/1.15 var(--cg-sans);color:#3D332B;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cg-led{flex:none;width:calc(6.6 * var(--u));height:calc(6.6 * var(--u));border-radius:50%;background:#CDBBA4}
.cg-led.green{background:#7FA67C}.cg-led.yellow{background:#D2A955}.cg-led.orange{background:#D08A55}.cg-led.red{background:#C2695A}
.cg-chip-sub{display:flex;align-items:center;justify-content:space-between;gap:calc(4 * var(--u));padding:calc(7 * var(--u)) calc(7 * var(--u)) 0 calc(7.4 * var(--u));font:400 calc(8.6 * var(--u))/calc(10.6 * var(--u)) var(--cg-sans);color:#6B6057}
.cg-chip-chev{flex:none;display:flex;color:#6B6057}
.cg-chip-chev svg{width:calc(9 * var(--u));height:calc(9 * var(--u))}
/* Le parcours : Comprendre, Relier, Guider, Ajuster (sur l'anneau de lumière de la maquette). */
.cg-arc{position:absolute;inset:0;pointer-events:none}
.cg-step{position:absolute;left:calc(var(--x) * var(--u));top:calc(var(--y) * var(--u));width:0;height:0;pointer-events:auto;text-decoration:none;-webkit-tap-highlight-color:transparent}
.cg-node{position:absolute;display:block}
.cg-node svg{display:block;width:100%;height:100%;overflow:visible}
.cg-step .cg-node{left:calc(-9.6 * var(--u));top:calc(-17.6 * var(--u));width:calc(19.2 * var(--u));height:calc(28 * var(--u));filter:brightness(1.06) drop-shadow(0 1px 2px rgba(140,100,54,.28)) drop-shadow(0 0 calc(6 * var(--u)) rgba(255,248,232,1))}
.cg-step-lb{position:absolute;left:calc((var(--lx) - var(--x)) * var(--u));top:calc(17.6 * var(--u));transform:translateX(-50%);white-space:nowrap;font:600 calc(8.9 * var(--u))/1 var(--cg-sans);letter-spacing:.17em;text-transform:uppercase;color:#4A4037}
@media (prefers-reduced-motion:no-preference){.cg-step.now .cg-node{animation:cg-glow 3.6s ease-in-out infinite}}
@keyframes cg-glow{0%,100%{filter:brightness(1.06) drop-shadow(0 1px 2px rgba(140,100,54,.28)) drop-shadow(0 0 calc(6 * var(--u)) rgba(255,248,232,1))}50%{filter:brightness(1.12) drop-shadow(0 1px 2px rgba(140,100,54,.28)) drop-shadow(0 0 calc(13 * var(--u)) rgba(255,232,190,1))}}
/* ---------- Les six cartes ---------- */
.cg-tiles{display:grid;grid-template-columns:repeat(3,calc(118 * var(--u)));grid-auto-rows:calc(78 * var(--u));gap:calc(6 * var(--u));margin:calc(2.3 * var(--u)) 0 0 calc(12.3 * var(--u))}
.cg-tile{position:relative;display:block;border-radius:calc(13 * var(--u));text-align:center;text-decoration:none;color:var(--cg-ink);background:var(--cg-glass);box-shadow:var(--cg-shadow);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);-webkit-tap-highlight-color:transparent;transition:transform .15s ease}
html.ui2.cg .cg-tile{color:var(--cg-ink)}
.cg-tile:active{transform:scale(.97)}
.cg-tile-ic{position:absolute;left:0;right:0;top:calc(10.8 * var(--u));display:flex;justify-content:center;color:#A07548}
.cg-tile-ic svg{width:calc(24.5 * var(--u));height:calc(24.5 * var(--u));stroke-width:1.45}
.cg-tile b{position:absolute;left:calc(6 * var(--u));right:calc(6 * var(--u));top:calc(40.4 * var(--u));font:400 calc(11.5 * var(--u))/calc(13.3 * var(--u)) var(--cg-sans);color:#3A322C;white-space:nowrap}
.cg-tile-sub{position:absolute;left:0;right:0;top:calc(56 * var(--u));font:400 calc(9.3 * var(--u))/1 var(--cg-sans);color:#857A70}
.cg-tile-go{position:absolute;right:calc(7.6 * var(--u));top:calc(45 * var(--u));display:flex;color:#5E5249}
.cg-tile-go svg{width:calc(10 * var(--u));height:calc(10 * var(--u))}

/* ---------- Mon portrait skincare ---------- */
.cg-portrait{position:relative;display:block;height:calc(155.3 * var(--u));margin:calc(11.2 * var(--u)) calc(13.6 * var(--u)) 0;border-radius:calc(13 * var(--u));overflow:hidden;text-decoration:none;color:var(--cg-ink);
  background:url(/images/cg/cg-portrait-carte.webp) center/100% 100% no-repeat;box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),0 8px 20px rgba(140,108,74,.12)}
html.ui2.cg .cg-portrait{color:var(--cg-ink)}
.cg-portrait-own{position:absolute;right:0;top:0;width:62%;height:100%;object-fit:cover;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 42%);mask-image:linear-gradient(90deg,transparent 0,#000 42%)}
.cg-portrait-t{position:absolute;left:calc(19.4 * var(--u));top:calc(9.4 * var(--u));font:400 calc(22.4 * var(--u))/calc(24.2 * var(--u)) var(--cg-serif);color:#33291F}
.cg-portrait-rule{position:absolute;left:calc(19.8 * var(--u));top:calc(65.6 * var(--u));width:calc(14.8 * var(--u));height:1px;background:#A27A4E}
.cg-portrait-x{position:absolute;left:calc(19.6 * var(--u));top:calc(75 * var(--u));font:400 calc(11.5 * var(--u))/calc(14.2 * var(--u)) var(--cg-sans);color:#4A4038}
.cg-portrait-id{position:absolute;right:calc(12 * var(--u));bottom:calc(9 * var(--u));font:italic 400 calc(12 * var(--u))/1 var(--cg-serif);color:#FFF8EE;text-shadow:0 1px 6px rgba(70,40,20,.55)}
.cg-portrait-btn{position:absolute;left:calc(18.4 * var(--u));top:calc(112.3 * var(--u));display:flex;align-items:center;justify-content:center;gap:calc(9 * var(--u));width:calc(98.6 * var(--u));height:calc(30.8 * var(--u));border-radius:calc(15.4 * var(--u));background:rgba(255,252,248,.86);box-shadow:0 2px 8px rgba(140,108,74,.1);font:400 calc(11.8 * var(--u))/1 var(--cg-sans);color:#8C6238}
.cg-portrait-btn>span{display:flex}
.cg-portrait-btn svg{width:calc(10 * var(--u));height:calc(10 * var(--u))}

/* ---------- SAFY, la météo, la pensée du jour, les autres blocs ---------- */
html.ui2.cg .cg-home>.a-ask{margin:calc(1 * var(--u)) calc(11.7 * var(--u)) 0 calc(12.3 * var(--u))}
html.ui2.cg .cg-home>.a-ask+.cg-tiles{margin-top:calc(9 * var(--u))}
html.ui2.cg.day .a-ask{background:var(--cg-glass);border:0;box-shadow:var(--cg-shadow);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
html.ui2.cg.day .a-ask:focus-within{box-shadow:0 0 0 2px rgba(201,165,116,.4),var(--cg-shadow)}
html.ui2.cg.day .a-ask-in{color:var(--cg-ink);font-family:var(--cg-sans);font-weight:400}
html.ui2.cg.day .a-ask-in::placeholder{color:#8A7C70}
html.ui2.cg.day .a-ask-go{background:radial-gradient(circle at 50% 30%,#D4B080,#A47A4D 78%);color:#fff;box-shadow:0 4px 12px rgba(150,110,60,.28)}
.cg-meteo{position:relative;display:flex;align-items:flex-start;gap:calc(12 * var(--u));margin:calc(12 * var(--u)) calc(13.6 * var(--u)) 0;padding:calc(14 * var(--u)) calc(30 * var(--u)) calc(14 * var(--u)) calc(14 * var(--u));border-radius:calc(13 * var(--u));text-decoration:none;color:var(--cg-ink);background:var(--cg-glass);box-shadow:var(--cg-shadow);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
html.ui2.cg .cg-meteo{color:var(--cg-ink)}
.cg-meteo-ic{flex:none;display:flex;color:#A07548}
.cg-meteo-ic svg{width:calc(30 * var(--u));height:calc(30 * var(--u))}
.cg-meteo-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:calc(8 * var(--u));font:400 calc(12 * var(--u))/1.35 var(--cg-sans);color:var(--cg-ink2)}
.cg-meteo-main>b{font:400 calc(15 * var(--u))/1.2 var(--cg-sans);color:var(--cg-ink)}
.cg-meteo-top{display:flex;align-items:center;gap:calc(12 * var(--u))}
.cg-meteo-t{font:400 calc(34 * var(--u))/1 'Cormorant Garamond',Georgia,serif;font-variant-numeric:lining-nums;font-feature-settings:'lnum' 1;color:#5E4024}
.cg-meteo-top>span{display:flex;flex-direction:column;gap:2px}
.cg-meteo-top>span b{font:600 calc(13 * var(--u))/1.2 var(--cg-sans);color:var(--cg-ink)}
.cg-meteo-top>span small{font:400 calc(10.5 * var(--u))/1.2 var(--cg-sans);color:var(--cg-muted)}
.cg-meteo-facts{display:flex;flex-wrap:wrap;gap:calc(6 * var(--u)) calc(14 * var(--u))}
.cg-meteo-facts>span{display:flex;flex-direction:column;gap:1px}
.cg-meteo-facts small,.cg-meteo-tip small{font:600 calc(8.4 * var(--u))/1.2 var(--cg-sans);letter-spacing:.14em;text-transform:uppercase;color:#9A8471}
.cg-meteo-facts b{font:400 calc(12.5 * var(--u))/1.2 var(--cg-sans);color:var(--cg-ink)}
.cg-meteo-tip{display:flex;flex-direction:column;gap:3px;padding-top:calc(8 * var(--u));border-top:1px solid var(--cg-hair)}
.cg-meteo-tip>span{font:400 calc(12 * var(--u))/1.4 var(--cg-sans);color:var(--cg-ink2)}
.cg-meteo-go{position:absolute;right:calc(10 * var(--u));top:calc(20 * var(--u));display:flex;color:#5E5249}
.cg-meteo-go svg{width:calc(11 * var(--u));height:calc(11 * var(--u))}
.cg-thought{margin:calc(18 * var(--u)) calc(26 * var(--u)) calc(6 * var(--u));text-align:center;font:italic 400 calc(16 * var(--u))/1.4 var(--cg-serif);color:#6E5B4C;text-wrap:balance}
html.ui2.cg .cg-home>.a-hb-wrap{margin:calc(10 * var(--u)) calc(13.6 * var(--u)) 0}
.cg-link{align-self:center;margin:calc(14 * var(--u)) 0 0;border:0;background:none;padding:6px 10px;font:400 calc(12 * var(--u))/1 var(--cg-sans);color:var(--cg-gold-d);cursor:pointer}
.cg-pro{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;margin:calc(12 * var(--u)) 0 0}
html.ui2.cg .cg-pro .bo-pill,html.ui2.cg .cg-pro .pro-pill{position:relative;top:auto;right:auto;min-height:26px;padding:3px 11px;border-radius:13px;background:rgba(255,255,255,.62);border:1px solid var(--cg-hair);color:var(--cg-gold-d);font:600 11.5px/1 var(--cg-sans)}
.cg-pro{margin:calc(16 * var(--u)) 0 calc(6 * var(--u));gap:8px}
html.ui2.cg .cg-pro .pro-pill.cg-pro-ofc{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:6px 16px 6px 12px;border-radius:19px;background:var(--cg-glass);box-shadow:var(--cg-shadow);border:1px solid rgba(201,165,116,.45);color:var(--cg-ink);font:600 13px/1 var(--cg-sans);text-decoration:none}
.cg-pro-ofc>span[aria-hidden]{display:flex;color:var(--cg-gold-d)}
.cg-pro-ofc svg{width:17px;height:17px}
html.ui2.cg .cg-pro .bo-pill{display:inline-flex;align-items:center;min-height:38px;padding:6px 14px;border-radius:19px;text-decoration:none}

/* ---------- Les blocs, les lignes du profil, les autres écrans : verre clair, icônes or ---------- */
html.ui2.cg.day .a-tile,html.ui2.cg.day .a-wide,html.ui2.cg.day .m-tile{background:var(--cg-glass);color:var(--cg-ink);border:0;box-shadow:var(--cg-shadow)}
html.ui2.cg.day .a-tile .a-tile-ic,html.ui2.cg.day .a-wide .a-tile-ic,html.ui2.cg.day .m-tile .m-ic{background:rgba(244,234,218,.85);color:var(--cg-gold-d)}
html.ui2.cg.day .a-tile-sub,html.ui2.cg.day .a-wide .a-row-tx>span,html.ui2.cg.day .m-tx>span{color:var(--cg-muted)}
html.ui2.cg.day .a-tile b,html.ui2.cg.day .a-wide b{font-family:var(--cg-sans);font-weight:600;color:var(--cg-ink)}
html.ui2.cg.day .a-go,html.ui2.cg.day .a-tile-go{color:#9C8A79}
html.ui2.cg.day .a-row-ic{background:rgba(244,234,218,.85)!important;color:var(--cg-gold-d)!important;border-color:var(--cg-line)}
html.ui2.cg.day .a-glass{background:var(--cg-glass);border-color:var(--cg-line);box-shadow:var(--cg-shadow)}
html.ui2.cg.day .a-row{color:var(--cg-ink);border-bottom-color:var(--cg-hair)}
html.ui2.cg.day .a-row-tx>span{color:var(--cg-muted)}
html.ui2.cg.day .a-gh{font-family:var(--cg-serif);font-weight:400;font-size:22px;letter-spacing:0;text-transform:none;color:var(--cg-ink)}
html.ui2.cg.day .a-h1{font-family:var(--cg-serif);font-weight:400;font-size:34px;letter-spacing:0;color:var(--cg-ink)}
html.ui2.cg.day .a-sub{color:var(--cg-ink2)}
html.ui2.cg.day .a-portrait{background:linear-gradient(110deg,rgba(255,252,246,.95),rgba(238,222,198,.8));border-color:var(--cg-line);color:var(--cg-ink);box-shadow:var(--cg-shadow)}
html.ui2.cg.day .a-chips i{background:rgba(255,255,255,.75)!important;color:var(--cg-ink2)!important;border-color:var(--cg-hair)}
html.ui2.cg.day .a-hb-bar{background:rgba(255,252,247,.94);color:var(--cg-ink)}
html.ui2.cg.day .search-bar{background:var(--cg-glass);border-color:var(--cg-line);color:var(--cg-muted)}
html.ui2.cg.day .safy-card,html.ui2.cg.day .today-card,html.ui2.cg.day .quote-day{background:rgba(255,252,247,.78);border-color:var(--cg-line);box-shadow:var(--cg-shadow)}
html.ui2.cg.day .td-ic{background:linear-gradient(160deg,#DCC096,#A97F51)!important}
html.ui2.cg.day .td-tile{background:rgba(255,252,247,.7);border-color:var(--cg-hair)}
html.ui2.cg.day .td-safy{background:rgba(242,229,208,.75);color:var(--cg-gold-d)}
html.ui2.cg.day .sheet,html.ui2.cg.day .folder-panel{background:rgba(252,248,242,.97);border-color:var(--cg-line);color:var(--cg-ink)}
html.ui2.cg.day .sheet-layer{background:rgba(70,52,36,.24)}
html.ui2.cg.day .hf-q{background:radial-gradient(circle at 50% 30%,#D4B080,#A47A4D 78%);color:#fff;border:1.5px solid rgba(255,255,255,.9);box-shadow:0 8px 20px rgba(140,100,54,.3)}
html.ui2.cg.day .hf-lb{background:rgba(255,252,247,.95);border-color:var(--cg-hair);color:var(--cg-gold-d)}

/* ---------- La barre du bas de la maquette : pleine largeur, ivoire, le scan doré au centre ---------- */
html.ui2.cg.day .tabbar{left:0;right:0;bottom:0;transform:none;width:auto;max-width:480px;margin:0 auto;height:calc(58 * var(--u) + env(safe-area-inset-bottom,0px));padding:0 calc(10 * var(--u)) env(safe-area-inset-bottom,0px);align-items:flex-start;
  border:0;border-radius:calc(24 * var(--u)) calc(24 * var(--u)) 0 0;background:rgba(250,246,240,.97);box-shadow:0 -1px 0 rgba(255,255,255,.95),0 -8px 24px rgba(140,108,74,.12);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
html.ui2.cg.day .tab{flex:1;gap:calc(7 * var(--u));padding-top:calc(15 * var(--u));color:#4E443C;font:400 calc(10.4 * var(--u))/1 var(--cg-sans)}
html.ui2.cg.day .tab[aria-current="page"]{color:#9A6B3A;font-weight:600}
html.ui2.cg.day .tab[aria-current="page"]::after{display:none}
.cg-tab-ic{display:flex}
.cg-tab-ic svg{width:calc(21 * var(--u));height:calc(21 * var(--u))}
html.ui2.cg.day .a-fab{flex:1;gap:calc(5 * var(--u));margin-top:calc(-14 * var(--u));color:#4E443C;font:400 calc(11.2 * var(--u))/1 var(--cg-sans)}
html.ui2.cg.day .a-fab>.a-fab-ring{width:calc(54 * var(--u));height:calc(54 * var(--u));color:#fff;background:radial-gradient(circle at 50% 30%,#CDA676,#A87C4E 80%);border:0;
  box-shadow:0 0 0 calc(4 * var(--u)) #EFE6DA,0 0 0 calc(5 * var(--u)) rgba(255,255,255,.9),0 6px 16px rgba(140,100,54,.28);animation:none}
html.ui2.cg.day .a-fab-ring svg{width:calc(22 * var(--u));height:calc(22 * var(--u))}
html.ui2.cg.day .a-fab-lb{color:#4E443C;font:400 calc(10.4 * var(--u))/1 var(--cg-sans);margin-top:calc(4 * var(--u))}
html.ui2.cg.day .tab-badge{background:#C29A64;box-shadow:0 0 0 2px #fff}
html.ui2.cg.day .help-fab{bottom:calc(84 * var(--u) + env(safe-area-inset-bottom,0px))}
html.ui2.cg .cg-chip-top b.long{font-size:calc(10 * var(--u))}

/* ---------- Ma mémoire (maquette 2), au millimètre ---------- */
html.ui2.cg .view.cg-mem{padding:env(safe-area-inset-top,0px) 0 calc(120 * var(--u) + env(safe-area-inset-bottom,0px));gap:0;background:linear-gradient(180deg,#F1EAE1 0,#EDE3D8 calc(330 * var(--u)),#EADFD2 calc(900 * var(--u)),#EFE6DB 100%)}
html.ui2.cg .view.cg-mem>:not(.cg-mscene):not(.cg-mcard){margin-left:18px;margin-right:18px}
html.ui2.cg .view.cg-mem>.cg-mcard+:not(.cg-mcard){margin-top:calc(24 * var(--u))}
html.ui2.cg .view.cg-mem>:not(.cg-mscene):not(.cg-mcard)+:not(.cg-mscene):not(.cg-mcard){margin-top:16px}
.cg-mscene{position:relative;height:calc(327.2 * var(--u));background:url(/images/cg/cg-memoire-scene.webp) center top/100% 100% no-repeat}
.cg-mtitle{position:absolute;left:calc(23.6 * var(--u));top:calc(67.4 * var(--u));margin:0;font:400 calc(38 * var(--u))/1.2 var(--cg-serif);color:#33291F;white-space:nowrap}
.cg-msub{position:absolute;left:calc(24 * var(--u));top:calc(109.6 * var(--u));margin:0;font:300 calc(13.6 * var(--u))/calc(15.2 * var(--u)) var(--cg-sans);letter-spacing:.045em;color:#4A4038}
.cg-drop-mem{left:calc(239.7 * var(--u));top:calc(46.4 * var(--u));width:calc(119.5 * var(--u));height:calc(174.4 * var(--u))}
.cg-drop-mem .cg-num{top:calc(86 * var(--u))}
.cg-drop-mem .cg-num b{font-size:calc(40 * var(--u))}
.cg-drop-mem .cg-num b small{font:400 .62em/1 'Cormorant Garamond',Georgia,serif;margin-left:.02em;color:#5E4024}
.cg-drop-mem .cg-num>span{font-size:calc(8.6 * var(--u));line-height:calc(11 * var(--u))}
.cg-drop-mem .cg-num>span:first-of-type{margin-top:calc(0 * var(--u))}
.cg-drop-mem .cg-mono{display:none}
.cg-mline{position:absolute;left:0;right:0;top:calc(236.4 * var(--u));height:calc(80 * var(--u))}
.cg-mstep{position:absolute;left:calc((18.5 + var(--k) * 63.6) * var(--u));top:0;width:calc(37 * var(--u));height:calc(37 * var(--u));text-decoration:none}
.cg-mstep-ic{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:50%;border:1.3px solid #C29E72;background:rgba(255,252,247,.5);color:#8E6A40;box-shadow:0 0 calc(6 * var(--u)) rgba(255,246,232,.9)}
.cg-mstep-ic svg{width:calc(18 * var(--u));height:calc(18 * var(--u));stroke-width:1.5}
.cg-mstep-lb{position:absolute;left:50%;top:calc(43.4 * var(--u));transform:translateX(-50%);white-space:nowrap;text-align:center;font:400 calc(10.2 * var(--u))/calc(12.2 * var(--u)) var(--cg-sans);color:#3D352E}
.cg-mstep:not(:last-child)::after{content:"";position:absolute;left:calc(37 * var(--u));top:calc(18.4 * var(--u));width:calc(26.6 * var(--u));height:1px;background:linear-gradient(90deg,rgba(201,166,124,.6),rgba(201,166,124,.6))}
.cg-mstep:not(:last-child)::before{content:"";position:absolute;left:calc(48 * var(--u));top:calc(16.5 * var(--u));width:calc(4.4 * var(--u));height:calc(4.4 * var(--u));border-radius:50%;background:#EADBC8;border:1px solid rgba(201,166,124,.55);z-index:1}
.cg-mcard{position:relative;display:block;margin:calc(7 * var(--u)) 0 0 calc(11.1 * var(--u));width:calc(368.4 * var(--u));border-radius:calc(13 * var(--u));text-decoration:none;color:var(--cg-ink);background:var(--cg-glass);box-shadow:var(--cg-shadow);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
html.ui2.cg .cg-mcard,html.ui2.cg .cg-mcard a{color:var(--cg-ink);text-decoration:none}
.cg-mcard-t{position:absolute;display:flex;align-items:center;gap:calc(9 * var(--u));font:400 calc(20.6 * var(--u))/1.2 var(--cg-serif);color:#33291F;white-space:nowrap}
.cg-mcard-t>span{display:flex;color:#8C6238}
.cg-mcard-t svg{width:calc(13 * var(--u));height:calc(13 * var(--u));stroke-width:1.6}
.cg-mcard-s{position:absolute;font:400 calc(11.4 * var(--u))/calc(13.6 * var(--u)) var(--cg-sans);letter-spacing:.01em;color:#5E534A}
.cg-pass{margin-top:0;height:calc(131 * var(--u))}
.cg-pass-face{position:absolute;left:calc(4.9 * var(--u));top:calc(6.8 * var(--u));width:calc(101 * var(--u));height:calc(118.3 * var(--u));object-fit:cover;border-radius:calc(9 * var(--u)) 0 0 calc(9 * var(--u));-webkit-mask-image:linear-gradient(90deg,#000 76%,transparent);mask-image:linear-gradient(90deg,#000 76%,transparent)}
.cg-pass .cg-mcard-t{left:calc(125.1 * var(--u));top:calc(8.4 * var(--u))}
.cg-pass .cg-mcard-s{left:calc(124.5 * var(--u));top:calc(34.4 * var(--u))}
.cg-pass-chips{position:absolute;left:calc(124.5 * var(--u));top:calc(58.2 * var(--u));width:calc(226 * var(--u));max-height:calc(62 * var(--u));overflow:hidden;display:flex;flex-wrap:wrap;gap:calc(5 * var(--u)) calc(6 * var(--u))}
.cg-pass-chips i{display:inline-flex;align-items:center;gap:calc(7 * var(--u));max-width:calc(150 * var(--u));height:calc(28.3 * var(--u));padding:0 calc(12 * var(--u)) 0 calc(11 * var(--u));border-radius:calc(14.2 * var(--u));overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:400 calc(11.2 * var(--u))/1 var(--cg-sans);font-style:normal;color:#3D332B;background:rgba(248,243,237,.85);box-shadow:inset 0 0 0 1px rgba(255,255,255,.9),0 1px 3px rgba(140,108,74,.1)}
.cg-pass-chips i>span{flex:none;width:calc(9 * var(--u));height:calc(9 * var(--u));border-radius:50%}
.cg-pass-go{position:absolute;right:calc(14 * var(--u));top:calc(64 * var(--u));display:flex;color:#8C6238}
.cg-pass-go svg{width:calc(12 * var(--u));height:calc(12 * var(--u))}
.cg-fil{height:calc(92 * var(--u))}
.cg-fil-ic{position:absolute;left:calc(12.3 * var(--u));top:calc(20.3 * var(--u));width:calc(51.5 * var(--u));height:calc(51.5 * var(--u));display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(238,227,212,.85);color:#9C7445}
.cg-fil-ic svg{width:calc(21 * var(--u));height:calc(21 * var(--u))}
.cg-fil .cg-mcard-t{left:calc(77.6 * var(--u));top:calc(8.6 * var(--u))}
.cg-fil .cg-mcard-s{left:calc(77.6 * var(--u));top:calc(34.4 * var(--u))}
.cg-fil-bar{position:absolute;left:calc(77.6 * var(--u));top:calc(70.6 * var(--u));width:calc(121.4 * var(--u));height:calc(6 * var(--u));border-radius:calc(3 * var(--u));background:rgba(235,224,210,.9);box-shadow:inset 0 0 0 1px rgba(255,255,255,.8)}
.cg-fil-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#C9A274,#A87C4E)}
.cg-fil-n{position:absolute;left:calc(215 * var(--u));top:calc(68.6 * var(--u));font:400 calc(11.4 * var(--u))/1 var(--cg-sans);color:#7A5A3A}
.cg-fil-btn{position:absolute;left:calc(253.2 * var(--u));top:calc(45.6 * var(--u));width:calc(103.8 * var(--u));height:calc(34.8 * var(--u));display:flex;align-items:center;justify-content:center;gap:calc(9 * var(--u));border-radius:calc(17.4 * var(--u));
  background:linear-gradient(180deg,#C9A577,#A47A4D);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 4px 10px rgba(140,100,54,.25);font:400 calc(12.8 * var(--u))/1 var(--cg-sans);color:#fff}
.cg-fil-btn>span{display:flex}
.cg-fil-btn svg{width:calc(11 * var(--u));height:calc(11 * var(--u));stroke-width:1.6}
.cg-evo{margin-top:calc(7.8 * var(--u));height:calc(160.2 * var(--u))}
.cg-evo .cg-mcard-t{left:calc(16 * var(--u));top:calc(8.4 * var(--u))}
.cg-evo .cg-mcard-s{left:calc(16 * var(--u));top:calc(34.4 * var(--u))}
.cg-evo-row{position:absolute;left:calc(15.4 * var(--u));top:calc(56.7 * var(--u));right:0;height:calc(95 * var(--u))}
.cg-evo-ph{position:absolute;top:0;width:calc(78.3 * var(--u));height:calc(78.3 * var(--u));text-decoration:none}
.cg-evo-ph:nth-child(1){left:0}.cg-evo-ph:nth-child(2){left:calc(86.4 * var(--u))}.cg-evo-ph:nth-child(3){left:calc(172.8 * var(--u))}
.cg-evo-ph img{display:block;width:100%;height:100%;object-fit:cover;border-radius:calc(8 * var(--u))}
.cg-evo-ph small{position:absolute;left:calc(2 * var(--u));top:calc(84.4 * var(--u));font:400 calc(10.2 * var(--u))/1 var(--cg-sans);color:#4E443C;white-space:nowrap}
.cg-evo-ph.empty{display:flex;align-items:center;justify-content:center;border-radius:calc(8 * var(--u));background:rgba(240,231,219,.7);box-shadow:inset 0 0 0 1px rgba(255,255,255,.8);color:#C3AC90}
.cg-evo-ph.empty>span{display:flex}
.cg-evo-ph.empty svg{width:calc(24 * var(--u));height:calc(24 * var(--u))}
.cg-evo-ph.empty small{color:#9C8A79}
.cg-evo-add{position:absolute;left:calc(260.6 * var(--u));top:0;width:calc(77 * var(--u));height:calc(92.4 * var(--u));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(6 * var(--u));border-radius:calc(9 * var(--u));border:1.2px dashed rgba(176,150,120,.5);text-decoration:none;color:#4E443C;text-align:center}
.cg-evo-add>span{display:flex;color:#4E443C}
.cg-evo-add svg{width:calc(24 * var(--u));height:calc(24 * var(--u))}
.cg-evo-add small{font:400 calc(11.4 * var(--u))/calc(13.6 * var(--u)) var(--cg-sans)}
.cg-rase{margin-top:calc(6.8 * var(--u));height:calc(51.1 * var(--u))}
.cg-rase-ic{position:absolute;left:calc(12.5 * var(--u));top:calc(7.6 * var(--u));width:calc(36 * var(--u));height:calc(36 * var(--u));display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(238,227,212,.85);color:#9C7445}
.cg-rase-ic svg{width:calc(19 * var(--u));height:calc(19 * var(--u))}
.cg-rase b{position:absolute;left:calc(61.6 * var(--u));top:calc(9.8 * var(--u));font:400 calc(16.6 * var(--u))/1.2 var(--cg-serif);color:#33291F}
.cg-rase>span:not(.cg-rase-ic):not(.cg-rase-go){position:absolute;left:calc(61.6 * var(--u));top:calc(29.6 * var(--u));font:400 calc(11 * var(--u))/1 var(--cg-sans);color:#5E534A}
.cg-rase-go{position:absolute;right:calc(16 * var(--u));top:calc(19.5 * var(--u));display:flex;color:#8C6238}
.cg-rase-go svg{width:calc(12 * var(--u));height:calc(12 * var(--u))}
/* La barre du bas sur Ma mémoire : le rond doré passe sur « Mémoire » (maquette 2). */
html.ui2.cg.day .tab.cg-on{margin-top:calc(-14 * var(--u));padding-top:0;gap:calc(5 * var(--u));color:#4E443C;font-weight:400}
html.ui2.cg.day .tab.cg-on .cg-tab-ic{width:calc(54 * var(--u));height:calc(54 * var(--u));align-items:center;justify-content:center;border-radius:50%;color:#fff;background:radial-gradient(circle at 50% 30%,#CDA676,#A87C4E 80%);box-shadow:0 0 0 calc(4 * var(--u)) #EFE6DA,0 0 0 calc(5 * var(--u)) rgba(255,255,255,.9),0 6px 16px rgba(140,100,54,.28)}
html.ui2.cg.day .tab.cg-on .cg-tab-ic svg{width:calc(23 * var(--u));height:calc(23 * var(--u))}
html.ui2.cg.day .a-fab.cg-off{margin-top:0;padding-top:calc(15 * var(--u));gap:calc(7 * var(--u))}
html.ui2.cg.day .a-fab.cg-off>.a-fab-ring{width:auto;height:auto;background:none;box-shadow:none;color:#4E443C}
html.ui2.cg.day .a-fab.cg-off>.a-fab-ring svg{width:calc(21 * var(--u));height:calc(21 * var(--u));stroke-width:1.35}
html.ui2.cg.day .a-fab.cg-off .a-fab-lb{margin-top:0}
html.ui2.cg.day .a-fab.cg-off>.a-fab-ring>span{color:#4E443C}

/* ---------- SC·MATCH (maquette 3), au millimètre ---------- */
html.ui2.cg .view.cg-matchv{padding:env(safe-area-inset-top,0px) 0 calc(120 * var(--u) + env(safe-area-inset-bottom,0px));gap:16px;background:linear-gradient(180deg,#F2ECE4 0,#EEE5DA calc(390 * var(--u)),#EBE0D3 calc(800 * var(--u)),#EFE6DB 100%)}
html.ui2.cg .view.cg-matchv>:not(.cg-match){margin-left:18px;margin-right:18px}
html.ui2.cg .view:not(.cg-home):not(.cg-mem):not(.cg-matchv) .cg-top{margin:-12px -18px 0}
.cg-match{display:flex;flex-direction:column}
.cg-match-head{position:relative;height:calc(383.7 * var(--u));background:url(/images/cg/cg-match-scene.webp) center top/100% auto no-repeat}
.cg-match-t{position:absolute;left:calc(23.4 * var(--u));top:calc(70.6 * var(--u));margin:0;font:400 calc(31 * var(--u))/1.2 var(--cg-serif);letter-spacing:.01em;color:#33291F;white-space:nowrap}
.cg-match-s{position:absolute;left:calc(24.6 * var(--u));top:calc(106.6 * var(--u));margin:0;font:300 calc(13.9 * var(--u))/1.2 var(--cg-sans);letter-spacing:.035em;color:#4A4038;white-space:nowrap}
.cg-mframe{position:absolute;left:calc(20 * var(--u));top:calc(134.1 * var(--u));width:calc(237.2 * var(--u));height:calc(249.6 * var(--u));border-radius:calc(14 * var(--u));overflow:hidden;
  background:radial-gradient(120% 80% at 50% 30%,#FBF7F1,#EADFD1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),0 8px 22px rgba(140,108,74,.16)}
.cg-mframe .pthumb{position:absolute;inset:0;width:100%!important;height:100%!important;border-radius:0;background:transparent;box-shadow:none;display:flex;align-items:center;justify-content:center}
.cg-mframe .pthumb img{width:78%;height:78%;object-fit:contain;mix-blend-mode:multiply;filter:drop-shadow(0 10px 14px rgba(120,90,60,.18))}
.cg-mframe .pthumb .pcredit,.cg-mframe .pthumb small{display:none}
.cg-cn{position:absolute;width:calc(26 * var(--u));height:calc(26 * var(--u));border:0 solid rgba(255,255,255,.95);filter:drop-shadow(0 0 2px rgba(120,90,60,.25))}
.cg-cn.tl{left:calc(13 * var(--u));top:calc(13 * var(--u));border-left-width:calc(2.6 * var(--u));border-top-width:calc(2.6 * var(--u));border-top-left-radius:calc(7 * var(--u))}
.cg-cn.tr{right:calc(13 * var(--u));top:calc(13 * var(--u));border-right-width:calc(2.6 * var(--u));border-top-width:calc(2.6 * var(--u));border-top-right-radius:calc(7 * var(--u))}
.cg-cn.bl{left:calc(13 * var(--u));bottom:calc(13 * var(--u));border-left-width:calc(2.6 * var(--u));border-bottom-width:calc(2.6 * var(--u));border-bottom-left-radius:calc(7 * var(--u))}
.cg-cn.br{right:calc(13 * var(--u));bottom:calc(13 * var(--u));border-right-width:calc(2.6 * var(--u));border-bottom-width:calc(2.6 * var(--u));border-bottom-right-radius:calc(7 * var(--u))}
.cg-mframe-pill{position:absolute;left:50%;bottom:calc(16 * var(--u));transform:translateX(-50%);display:flex;align-items:center;gap:calc(7 * var(--u));max-width:calc(190 * var(--u));height:calc(30 * var(--u));padding:0 calc(14 * var(--u)) 0 calc(8 * var(--u));border-radius:calc(15 * var(--u));
  background:rgba(252,248,243,.88);box-shadow:0 2px 10px rgba(120,90,60,.15);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font:400 calc(11.6 * var(--u))/1 var(--cg-sans);color:#3D332B;white-space:nowrap}
.cg-mframe-pill>span:last-child{overflow:hidden;text-overflow:ellipsis}
.cg-mframe-ok{flex:none;display:flex;width:calc(17 * var(--u));height:calc(17 * var(--u));align-items:center;justify-content:center;border-radius:50%;border:1.5px solid #C9A274;color:#A27648}
.cg-mframe-ok svg{width:calc(11 * var(--u));height:calc(11 * var(--u))}
.cg-ring{position:absolute;left:calc(268.9 * var(--u));top:calc(166.8 * var(--u));width:calc(106 * var(--u));height:calc(106 * var(--u));padding:0;border:0;background:none;cursor:pointer;color:var(--cg-ink)}
.cg-ring-svg{position:absolute;inset:0}
.cg-ring-svg svg{width:100%;height:100%;transform:rotate(-90deg)}
.cg-ring-bg{fill:none;stroke:#E8DFD3;stroke-width:5}
.cg-ring-on{fill:none;stroke:#8DB582;stroke-width:5;stroke-linecap:round;transition:stroke-dasharray 1.4s cubic-bezier(.2,.7,.2,1)}
.cg-ring-tx{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-top:calc(2 * var(--u))}
.cg-ring-tx b{font:400 calc(41 * var(--u))/1 'Cormorant Garamond',Georgia,serif;font-variant-numeric:lining-nums;font-feature-settings:'lnum' 1;color:#33291F;margin-bottom:calc(5 * var(--u))}
.cg-ring-tx b small{font-size:.7em}
.cg-ring-tx>span{font:400 calc(9.6 * var(--u))/calc(11.6 * var(--u)) var(--cg-sans);letter-spacing:.14em;text-transform:uppercase;color:#4E443C}
.cg-ring-i{position:absolute;left:calc(358.6 * var(--u));top:calc(256.6 * var(--u));display:flex;color:#5E5249;pointer-events:none}
.cg-ring-i svg{width:calc(17 * var(--u));height:calc(17 * var(--u))}
.cg-verdict-pill{position:absolute;left:calc(266.4 * var(--u));top:calc(283.6 * var(--u));width:calc(110 * var(--u));min-height:calc(40 * var(--u));display:flex;align-items:center;gap:calc(7 * var(--u));padding:calc(5 * var(--u)) calc(8 * var(--u)) calc(5 * var(--u)) calc(10 * var(--u));border-radius:calc(10 * var(--u));
  background:rgba(229,236,220,.92);font:400 calc(10.3 * var(--u))/calc(12.8 * var(--u)) var(--cg-sans);color:#4E5A45}
.cg-verdict-pill>span:first-child{flex:none;display:flex}
.cg-verdict-pill svg{width:calc(15 * var(--u));height:calc(15 * var(--u))}
.cg-verdict-pill.green{background:rgba(229,237,221,.95);color:#4E5C44}
.cg-verdict-pill.orange{background:rgba(250,233,212,.95);color:#7E4E1C}
.cg-verdict-pill.red{background:rgba(247,224,219,.95);color:#8A2F25}
.cg-verdict-pill.grey{background:rgba(236,230,222,.92);color:#5E534A}
.cg-mtiles{display:grid;grid-template-columns:calc(179.3 * var(--u)) calc(179.7 * var(--u));column-gap:calc(7.1 * var(--u));row-gap:calc(6.5 * var(--u));margin:calc(9.8 * var(--u)) 0 0 calc(12.3 * var(--u))}
.cg-mt{position:relative;display:block;height:calc(58.5 * var(--u));padding:0;border:0;border-radius:calc(11 * var(--u));text-align:left;cursor:pointer;font:inherit;color:var(--cg-ink);background:var(--cg-glass);box-shadow:var(--cg-shadow);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.cg-mt.t3,.cg-mt.t4{height:calc(62.2 * var(--u))}
.cg-mt.t5{grid-column:1/-1;height:calc(49 * var(--u))}
.cg-mt.t6{grid-column:1/-1;height:calc(66.8 * var(--u));margin-top:calc(2.8 * var(--u));background:linear-gradient(100deg,rgba(246,229,206,.95),rgba(243,226,204,.8));box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 4px 12px rgba(140,108,74,.1)}
.cg-mt-ic{position:absolute;left:calc(14 * var(--u));top:50%;transform:translateY(-50%);display:flex;color:#9A7246}
.cg-mt-ic svg{width:calc(23 * var(--u));height:calc(23 * var(--u));stroke-width:1.35}
.cg-mt b{position:absolute;left:calc(49.3 * var(--u));top:calc(10.4 * var(--u));font:400 calc(12.2 * var(--u))/1.2 var(--cg-sans);color:#33291F;white-space:nowrap}
.cg-mt.t3 b,.cg-mt.t4 b{top:calc(10.6 * var(--u))}
.cg-mt.t6 b{top:calc(11 * var(--u));left:calc(47.4 * var(--u));font:400 calc(16.6 * var(--u))/1.2 var(--cg-serif)}
.cg-mt-s{position:absolute;left:calc(49.3 * var(--u));right:calc(26 * var(--u));top:calc(27 * var(--u));display:flex;align-items:center;gap:calc(6 * var(--u));font:400 calc(10.4 * var(--u))/calc(12.4 * var(--u)) var(--cg-sans);color:#6B5F55}
.cg-mt.t1 .cg-mt-s{display:block}
.cg-mt.t3 .cg-mt-s,.cg-mt.t4 .cg-mt-s{top:calc(31 * var(--u))}
.cg-mt.t5 .cg-mt-s{top:calc(26 * var(--u))}
.cg-mt.t6 .cg-mt-s{display:block;left:calc(47.4 * var(--u));top:calc(32 * var(--u));overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.cg-mt.t6 .cg-mt-ic{left:calc(13 * var(--u));top:calc(13 * var(--u));transform:none}
.cg-mt.t6 .cg-mt-ic svg{width:calc(26 * var(--u));height:calc(26 * var(--u))}
.cg-mdot{flex:none;width:calc(8 * var(--u));height:calc(8 * var(--u));border-radius:50%}
.cg-mt-go{position:absolute;right:calc(12 * var(--u));top:50%;transform:translateY(-50%);display:flex;color:#5E5249}
.cg-mt-go svg{width:calc(11 * var(--u));height:calc(11 * var(--u))}
.cg-mcount{display:grid;grid-template-columns:repeat(3,1fr);height:calc(54.8 * var(--u));margin:calc(7.7 * var(--u)) calc(11.7 * var(--u)) 0 calc(12.3 * var(--u));border-radius:calc(11 * var(--u));background:var(--cg-glass);box-shadow:var(--cg-shadow)}
.cg-mcount>span{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(4 * var(--u))}
.cg-mcount>span+span{box-shadow:inset 1px 0 0 rgba(170,150,128,.3)}
.cg-mcount>span>span{display:flex;align-items:center;gap:calc(8 * var(--u))}
.cg-mcount i{display:flex;align-items:center;justify-content:center;width:calc(20 * var(--u));height:calc(20 * var(--u));border-radius:50%;color:#fff;font:600 calc(12 * var(--u))/1 var(--cg-sans);font-style:normal}
.cg-mcount i svg{width:calc(13 * var(--u));height:calc(13 * var(--u));stroke-width:2.2}
.cg-mcount i.ok{background:radial-gradient(circle at 40% 35%,#86B178,#5F9050)}
.cg-mcount i.pru{background:radial-gradient(circle at 40% 35%,#EDBE5E,#D9A03C)}
.cg-mcount i.bad{background:radial-gradient(circle at 40% 35%,#E0605A,#C83F3A);font-size:calc(11 * var(--u))}
.cg-mcount b{font:600 calc(17.4 * var(--u))/1 var(--cg-sans);color:#3A3029}
.cg-mcount b.bad{color:#B23A33}
.cg-mcount small{font:400 calc(10.4 * var(--u))/1 var(--cg-sans);color:#4E443C}
.cg-mbtns{display:flex;gap:calc(9.9 * var(--u));margin:calc(9.9 * var(--u)) 0 0 calc(16 * var(--u))}
.cg-mb{display:flex;align-items:center;justify-content:center;gap:calc(10 * var(--u));height:calc(37.3 * var(--u));border-radius:calc(11 * var(--u));cursor:pointer;font:400 calc(12.6 * var(--u))/1 var(--cg-sans)}
.cg-mb>span{display:flex}
.cg-mb.gold{width:calc(190.4 * var(--u));border:0;color:#fff;background:linear-gradient(180deg,#C9A577,#A47A4D);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 4px 10px rgba(140,100,54,.25)}
.cg-mb.gold svg{width:calc(20 * var(--u));height:calc(20 * var(--u))}
.cg-mb.line{width:calc(160.8 * var(--u));border:1.2px solid #B48C5E;background:rgba(255,252,248,.5);color:#8C6238}
.cg-mb.line svg{width:calc(11 * var(--u));height:calc(11 * var(--u))}
.cg-mframe .pthumb .pcat,.cg-mframe .pthumb .pbadge{display:none}
.cg-mframe .pthumb.no-photo .brandmark,.cg-mframe .pthumb.no-photo>span:first-child{transform:scale(1.25);filter:sepia(.4) saturate(.8)}
html.ui2.cg .view:not(.cg-home):not(.cg-mem):not(.cg-matchv) .cg-top{margin:-12px -18px 0}
/* Les pastilles de couleur des autres écrans (routine, dossiers) passent en or. */
html.ui2.cg.day .tc-ic,html.ui2.cg.day .app-sq:not(.safy-sq):not(.folder){background:linear-gradient(160deg,#DCC096,#A97F51)!important}

/* ---------- La goutte en lévitation (Ronan, 22/10 à 0h33 : « comme celle du site innovation.safety-care.fr ») ---------- */
.cg-aura{position:absolute;left:-34%;right:-34%;top:18%;bottom:-8%;z-index:0;pointer-events:none;border-radius:50%;background:radial-gradient(closest-side at 50% 70%,rgba(255,236,206,.7),rgba(255,228,196,.22) 62%,rgba(255,228,196,0));filter:blur(6px)}
.cg-pool{position:absolute;left:6%;right:6%;bottom:-4%;height:17%;z-index:0;pointer-events:none;border-radius:50%;background:radial-gradient(closest-side,rgba(255,251,242,.98),rgba(255,242,220,.7) 55%,rgba(255,242,220,0));filter:blur(1.5px)}
.cg-float{position:absolute;inset:0;z-index:1;display:block}
.cg-tilt{position:absolute;inset:0;display:block;transform:translate3d(var(--tx,0px),var(--ty,0px),0) rotate(var(--tr,0deg));transition:transform .65s cubic-bezier(.2,.7,.2,1)}
.cg-refr{position:absolute;left:30%;top:38%;width:32%;height:30%;border-radius:48%;pointer-events:none;background:linear-gradient(125deg,transparent 15%,rgba(255,248,232,0) 30%,rgba(255,250,236,.55) 47%,rgba(255,248,232,0) 66%);filter:blur(5px);mix-blend-mode:screen;opacity:.5}
.cg-rings{z-index:2}
@media (prefers-reduced-motion:no-preference){
  .cg-float{animation:cg-lev 7.6s ease-in-out infinite}
  .cg-aura{animation:cg-aura 9s ease-in-out infinite}
  .cg-pool{animation:cg-pool 7.6s ease-in-out infinite}
  .cg-refr{animation:cg-refr 8s ease-in-out infinite}
}
@keyframes cg-lev{0%,100%{transform:translate3d(0,calc(1.5 * var(--u)),0)}50%{transform:translate3d(0,calc(-7.5 * var(--u)),0)}}
@keyframes cg-aura{0%,100%{opacity:.65;transform:scale(.95)}50%{opacity:1;transform:scale(1.05)}}
@keyframes cg-pool{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(.86)}}
@keyframes cg-refr{0%,100%{transform:translate(-5px,5px) rotate(-13deg);opacity:.35}50%{transform:translate(6px,-8px) rotate(10deg);opacity:.8}}

/* ---------- La météo : le ciel du moment, vivant (Ronan, 22/10 à 0h33 : « à la Apple… qu'il change et qu'il soit dynamique ») ---------- */
.cg-meteo{overflow:hidden;isolation:isolate;color:#fff;box-shadow:0 8px 22px rgba(60,80,110,.22)}
html.ui2.cg .cg-meteo{color:#fff}
.cg-meteo>:not(.cg-sky){position:relative;z-index:1}
.cg-meteo-go{position:absolute!important}
.cg-meteo .cg-meteo-ic,.cg-meteo .cg-meteo-go{color:#fff}
.cg-meteo .cg-meteo-main,.cg-meteo .cg-meteo-main>b,.cg-meteo .cg-meteo-top>span b,.cg-meteo .cg-meteo-facts b,.cg-meteo .cg-meteo-tip>span,.cg-meteo .cg-meteo-t{color:#fff;text-shadow:0 1px 3px rgba(20,30,50,.25)}
.cg-meteo .cg-meteo-top>span small,.cg-meteo .cg-meteo-facts small,.cg-meteo .cg-meteo-tip small{color:rgba(255,255,255,.82)}
.cg-meteo .cg-meteo-tip{border-top-color:rgba(255,255,255,.35)}
.cg-sky{position:absolute;inset:0;z-index:0;overflow:hidden;border-radius:inherit;background:linear-gradient(180deg,#3E8FD6 0%,#6CB2EA 60%,#9ACDF2 100%);transition:background .6s}
.cg-sky i{position:absolute;display:block;pointer-events:none;opacity:0}
.cg-meteo .sk-sun{right:-12%;top:-30%;width:60%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,250,220,1) 0 12%,rgba(255,236,170,.75) 24%,rgba(255,226,150,.25) 46%,rgba(255,226,150,0) 66%)}
.cg-meteo .sk-c1,.cg-meteo .sk-c2,.cg-meteo .sk-c3{width:70%;height:60%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.95),rgba(255,255,255,.6) 45%,rgba(255,255,255,0));filter:blur(3px)}
.cg-meteo .sk-c1{left:-20%;top:-8%}.cg-meteo .sk-c2{left:35%;top:22%;width:80%}.cg-meteo .sk-c3{left:-10%;top:55%;width:90%}
.cg-meteo .sk-rain{inset:-40% 0 0 0;background:repeating-linear-gradient(104deg,rgba(255,255,255,0) 0 9px,rgba(225,238,255,.35) 9px 10px,rgba(255,255,255,0) 10px 22px)}
.cg-meteo .sk-flash{inset:0;background:rgba(255,255,255,.85)}
.cg-meteo .sk-stars{inset:0;background:radial-gradient(1.2px 1.2px at 12% 22%,#fff,transparent),radial-gradient(1px 1px at 28% 64%,#fff,transparent),radial-gradient(1.4px 1.4px at 46% 18%,#fff,transparent),radial-gradient(1px 1px at 63% 48%,#fff,transparent),radial-gradient(1.3px 1.3px at 78% 26%,#fff,transparent),radial-gradient(1px 1px at 88% 70%,#fff,transparent),radial-gradient(1.1px 1.1px at 36% 86%,#fff,transparent),radial-gradient(1px 1px at 92% 12%,#fff,transparent)}
.cg-meteo.sky-sun .sk-sun{opacity:1}
.cg-meteo.sky-cloudsun .cg-sky{background:linear-gradient(180deg,#4F95D3 0%,#7DB6E4 60%,#A9D0EE 100%)}
.cg-meteo.sky-cloudsun .sk-sun{opacity:.85}.cg-meteo.sky-cloudsun .sk-c1,.sky-cloudsun .sk-c2{opacity:.85}
.cg-meteo.sky-cloud .cg-sky,.cg-meteo.sky-fog .cg-sky{background:linear-gradient(180deg,#8D9AA9 0%,#AEB8C3 60%,#C9D0D7 100%)}
.cg-meteo.sky-cloud .sk-c1,.cg-meteo.sky-cloud .sk-c2,.cg-meteo.sky-cloud .sk-c3{opacity:.75}
.cg-meteo.sky-fog .sk-c1,.cg-meteo.sky-fog .sk-c2,.cg-meteo.sky-fog .sk-c3{opacity:.9;filter:blur(8px)}
.cg-meteo.sky-rain .cg-sky{background:linear-gradient(180deg,#5D6875 0%,#7C8793 60%,#98A2AD 100%)}
.cg-meteo.sky-rain .sk-c1,.cg-meteo.sky-rain .sk-c2{opacity:.4}.cg-meteo.sky-rain .sk-rain{opacity:.9}
.cg-meteo.sky-storm .cg-sky{background:linear-gradient(180deg,#363E4B 0%,#4F5866 60%,#6A7380 100%)}
.cg-meteo.sky-storm .sk-c1,.cg-meteo.sky-storm .sk-c2{opacity:.3}.cg-meteo.sky-storm .sk-rain{opacity:1}
.cg-meteo.sky-snow .cg-sky{background:linear-gradient(180deg,#9AAABB 0%,#BBC6D1 60%,#D8DEE5 100%)}
.cg-meteo.sky-snow .sk-rain{opacity:.9;background:radial-gradient(2px 2px at 10% 20%,#fff,transparent),radial-gradient(2px 2px at 30% 60%,#fff,transparent),radial-gradient(1.6px 1.6px at 50% 30%,#fff,transparent),radial-gradient(2px 2px at 70% 70%,#fff,transparent),radial-gradient(1.6px 1.6px at 90% 40%,#fff,transparent);background-size:100% 50%}
.cg-meteo.night .cg-sky{background:linear-gradient(180deg,#141D3A 0%,#24335E 60%,#33467A 100%)}
.cg-meteo.night .sk-sun{opacity:0}.cg-meteo.night .sk-stars{opacity:.9}
.cg-meteo.night.sky-cloud .cg-sky,.cg-meteo.night.sky-cloudsun .cg-sky,.cg-meteo.night.sky-fog .cg-sky{background:linear-gradient(180deg,#232B3E 0%,#3A445C 60%,#4E5873 100%)}
.cg-meteo.night.sky-cloud .sk-c1,.cg-meteo.night.sky-cloud .sk-c2,.cg-meteo.night.sky-cloud .sk-c3,.cg-meteo.night.sky-cloudsun .sk-c1,.cg-meteo.night.sky-cloudsun .sk-c2{opacity:.28}
.cg-meteo.night.sky-rain .cg-sky,.cg-meteo.night.sky-storm .cg-sky{background:linear-gradient(180deg,#1E2430 0%,#313946 60%,#454E5C 100%)}
@media (prefers-reduced-motion:no-preference){
  .cg-meteo .sk-sun{animation:sk-sun 9s ease-in-out infinite}
  .cg-meteo .sk-c1{animation:sk-drift 38s linear infinite}.cg-meteo .sk-c2{animation:sk-drift 52s linear infinite reverse}.cg-meteo .sk-c3{animation:sk-drift 46s linear infinite;animation-delay:-20s}
  .cg-meteo .sk-rain{animation:sk-rain .7s linear infinite}
  .cg-meteo.sky-snow .sk-rain{animation:sk-snow 6s linear infinite}
  .cg-meteo.sky-storm .sk-flash{animation:sk-flash 7s linear infinite}
  .cg-meteo.night .sk-stars{animation:sk-twinkle 4s ease-in-out infinite}
}
@keyframes sk-sun{0%,100%{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.08);filter:brightness(1.08)}}
@keyframes sk-drift{0%{transform:translateX(-12%)}50%{transform:translateX(12%)}100%{transform:translateX(-12%)}}
@keyframes sk-rain{from{transform:translateY(0)}to{transform:translateY(40%)}}
@keyframes sk-snow{from{background-position:0 0,0 0,0 0,0 0,0 0}to{background-position:8px 100%,-6px 100%,4px 100%,-8px 100%,6px 100%}}
@keyframes sk-flash{0%,88%,92%,96%,100%{opacity:0}90%,94%{opacity:.75}}
@keyframes sk-twinkle{0%,100%{opacity:.9}50%{opacity:.55}}
/* Audit (23/10, H22) : « C’est fait ? » garde son fond sombre en Conciergerie, sinon le titre ivoire disparaît sur le fond clair. */
html.ui2.cg main.view.ritual-view{background:radial-gradient(120% 80% at 50% 0%,#5A4733 0%,#2F2620 62%);color:#F6F1EA}
/* Ma routine idéale (Ronan, 23/10 à 15h18) : accessible tout de suite, sous « Mon Portrait Skincare ». */
.cg-ideal{position:relative;display:flex;align-items:center;gap:calc(10 * var(--u));margin:calc(8 * var(--u)) calc(13.6 * var(--u)) 0;padding:calc(10 * var(--u)) calc(28 * var(--u)) calc(10 * var(--u)) calc(12 * var(--u));border-radius:calc(13 * var(--u));text-decoration:none;color:var(--cg-ink);background:var(--cg-glass);box-shadow:var(--cg-shadow);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);-webkit-tap-highlight-color:transparent}
.cg-ideal .cg-ideal-ic{position:static;flex:none}
.cg-ideal-tx{display:flex;flex-direction:column;gap:calc(2 * var(--u));min-width:0}
.cg-ideal-tx b{font:400 calc(13.5 * var(--u))/1.2 var(--cg-sans);color:#3A322C}
.cg-ideal-tx span{font:400 calc(10 * var(--u))/1.25 var(--cg-sans);color:#857A70}
.cg-ideal .cg-ideal-go{top:50%;transform:translateY(-50%)}