/* Le petit soleil conseiller (partials/conseiller, conseiller.js ; maquette validée par Manu le 14/11/2026).
   Tout est préfixé cs- : aucune classe partagée avec le site, sauf les cartes produits (.pcard) affichées dans la fenêtre.
   En bas à gauche, à la hauteur du bouton d'accessibilité (--a11y-bas, défini dans a11y.css). */
.cs[hidden],.cs-fenetre[hidden]{display:none}
.cs-defs{position:absolute;width:0;height:0;overflow:hidden}
.cs-soleil{position:fixed;z-index:74;left:max(14px,env(safe-area-inset-left,0px));bottom:calc(var(--a11y-bas,20px) + env(safe-area-inset-bottom,0px));
  width:92px;height:92px;padding:0;border:0;background:none;cursor:pointer;transition:transform .35s cubic-bezier(.3,1.4,.5,1),bottom .25s ease;
  filter:drop-shadow(0 8px 12px rgba(226,101,0,.28))}
.cs-soleil svg{display:block;width:100%;height:100%;overflow:visible}
.cs-soleil:focus-visible{outline:3px solid var(--orange);outline-offset:4px;border-radius:50%}
.cs-corps{animation:cs-flotte 3.2s ease-in-out infinite;transform-origin:60px 60px}
.cs-rayons{animation:cs-tourne 26s linear infinite;transform-origin:60px 60px}
.cs-yeux{animation:cs-cligne 5.3s infinite;transform-origin:60px 56px}
.cs-bras{transform-origin:90px 74px;animation:cs-salut 9s ease-in-out infinite}
.cs-soleil:hover .cs-bras,.cs-soleil.cs-coucou .cs-bras{animation:cs-salut-vite 1.1s ease-in-out 2}
.cs-soleil:hover{transform:scale(1.06) rotate(-3deg)}
.cs-tete .cs-corps,.cs-tete .cs-rayons,.cs-tete .cs-bras{animation:none}
@keyframes cs-flotte{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes cs-tourne{to{transform:rotate(360deg)}}
@keyframes cs-cligne{0%,46%,50%,100%{transform:scaleY(1)}48%{transform:scaleY(.08)}}
@keyframes cs-salut{0%,62%,100%{transform:rotate(0)}66%{transform:rotate(-38deg)}70%{transform:rotate(-12deg)}74%{transform:rotate(-38deg)}78%{transform:rotate(-12deg)}82%{transform:rotate(-34deg)}88%{transform:rotate(0)}}
@keyframes cs-salut-vite{0%,100%{transform:rotate(0)}25%{transform:rotate(-38deg)}50%{transform:rotate(-10deg)}75%{transform:rotate(-38deg)}}

/* Bulle d'accueil, une fois par visite */
.cs-bulle{position:fixed;z-index:74;left:calc(max(14px,env(safe-area-inset-left,0px)) + 98px);bottom:calc(var(--a11y-bas,20px) + 46px + env(safe-area-inset-bottom,0px));
  max-width:230px;background:#fff;color:var(--texte);border-radius:18px 18px 18px 4px;padding:10px 36px 10px 14px;font:600 15px/1.35 var(--corps);
  box-shadow:0 10px 30px -12px rgba(94,30,36,.45);opacity:0;transform:translateY(8px) scale(.96);transform-origin:0 100%;pointer-events:none;transition:opacity .3s,transform .3s}
.cs-bulle.cs-visible{opacity:1;transform:none;pointer-events:auto}
.cs-bulle-x{position:absolute;top:6px;right:6px;width:26px;height:26px;border:0;border-radius:50%;background:var(--creme);color:var(--texte-2);font-size:17px;line-height:1;cursor:pointer}

/* Fenêtre */
.cs-fenetre{position:fixed;z-index:86;left:max(14px,env(safe-area-inset-left,0px));bottom:calc(var(--a11y-bas,20px) + 104px + env(safe-area-inset-bottom,0px));
  width:min(380px,calc(100vw - 28px));max-height:min(620px,calc(100vh - var(--a11y-bas,20px) - 130px));display:flex;flex-direction:column;background:#fff;border-radius:22px;
  box-shadow:0 24px 60px -18px rgba(94,30,36,.55);overflow:hidden;opacity:0;transform:translateY(14px) scale(.97);transform-origin:20% 100%;
  transition:opacity .25s,transform .3s cubic-bezier(.3,1.3,.5,1)}
.cs-fenetre.cs-ouverte{opacity:1;transform:none}
.cs-tete{display:flex;align-items:center;gap:12px;padding:14px 14px 14px 16px;background:linear-gradient(160deg,#FFF6E4,var(--creme-2))}
.cs-tete svg{width:46px;height:46px;flex:none}
.cs-tete p{margin:0;font:800 17px/1.2 var(--titre);color:var(--bordeaux)}
.cs-tete small{display:block;font:500 13px var(--corps);color:var(--texte-2)}
.cs-fermer{margin-left:auto;flex:none;width:38px;height:38px;border:0;border-radius:50%;background:rgba(255,255,255,.85);color:var(--bordeaux);font-size:21px;line-height:1;cursor:pointer}
.cs-fermer:focus-visible,.cs-bulle-x:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.cs-contenu{padding:16px;overflow-y:auto;overscroll-behavior:contain}
.cs-message{background:var(--creme);border-radius:4px 16px 16px 16px;padding:12px 14px;margin:0 0 14px;font-size:15.5px;line-height:1.5}
.cs-etapes{display:flex;gap:4px;margin:0 0 12px}
.cs-etapes span{flex:1;height:4px;border-radius:2px;background:var(--creme-2)}
.cs-etapes span.cs-fait{background:var(--orange-clair)}
.cs-question{font:700 16px var(--titre);margin:0 0 10px;color:var(--texte)}
.cs-choix{display:grid;gap:8px}
.cs-choix button{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;text-align:left;padding:11px 14px;border:2px solid var(--creme-2);border-radius:14px;background:#fff;
  font:600 15px/1.3 var(--corps);color:var(--texte);cursor:pointer;transition:border-color .15s,background .15s}
.cs-choix button:hover{border-color:var(--orange-clair);background:#FFF9EE}
.cs-choix button:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.cs-icone{font-size:20px}
.cs-pied{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;margin-top:14px;font-size:14px}
.cs-lien{background:none;border:0;padding:4px 0;font:600 14px var(--corps);color:var(--bordeaux);text-decoration:underline;cursor:pointer}
.cs-attente{display:flex;align-items:baseline;gap:6px;color:var(--texte-2);font-size:15px;margin:6px 0 4px}
.cs-points{display:inline-flex;gap:4px}
.cs-points i{width:6px;height:6px;border-radius:50%;background:var(--orange-clair);animation:cs-point 1.2s ease-in-out infinite}
.cs-points i:nth-child(2){animation-delay:.15s}
.cs-points i:nth-child(3){animation-delay:.3s}
@keyframes cs-point{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}
/* Pendant la recherche, le soleil de l'en-tête tourne ses rayons plus vite */
.cs-cherche .cs-tete .cs-rayons{animation:cs-tourne 2.4s linear infinite}
/* Fenêtre ouverte : un seul soleil, celui de l'en-tête */
.cs-actif .cs-soleil{opacity:0;visibility:hidden;transform:scale(.6);transition:opacity .2s,transform .25s,visibility 0s .25s}
@media (min-width:761px){.cs-actif .cs-fenetre{bottom:calc(var(--a11y-bas,20px) + env(safe-area-inset-bottom,0px));max-height:min(660px,calc(100vh - var(--a11y-bas,20px) - 30px))}}
.cs-produit{margin:0 0 14px}
.cs-produit .pcard{width:auto;display:grid;grid-template-columns:96px 1fr;column-gap:12px;row-gap:3px;align-content:start;padding:10px 12px;border-radius:18px;
  box-shadow:0 12px 26px -18px rgba(128,44,51,.55);border:1px solid #F3E4C6}
.cs-produit .pcard:hover{transform:none}
.cs-produit .pcard>*{grid-column:2}
.cs-produit .pcard>.pic{grid-column:1;grid-row:1 / span 8;height:112px;margin:0;align-self:center}
.cs-produit .pic::before{width:84px;height:84px;bottom:18px}
.cs-produit .pic img{height:104px}
/* Pastilles posées en absolu : rattachées à la carte entière, pas à la colonne du texte */
.cs-produit .pcard>.pct,.cs-produit .pcard>.tag-new,.cs-produit .pcard>.pout,.cs-produit .pcard>.rank{grid-column:auto}
.cs-produit .pct{top:6px;left:6px;right:auto;width:42px;height:42px;font-size:12.5px}
.cs-produit .tag-new{top:8px;left:8px;padding:4px 7px;font-size:11px}
.cs-produit .pout{top:52px;left:60px;padding:5px 9px;font-size:12px}
.cs-produit .pname{font-size:16px}
.cs-produit .ptag{display:none}
.cs-produit .price{font-size:19px;padding-top:2px}
.cs-autres{display:block;width:100%;min-height:48px;margin:0 0 4px;padding:11px 14px;border:2px solid var(--orange-clair);border-radius:14px;background:#FFF9EE;
  font:700 15px/1.3 var(--corps);color:var(--bordeaux);cursor:pointer;transition:background .15s}
.cs-autres:hover{background:#FFF1D6}
.cs-autres:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.cs-pourquoi{margin:8px 2px 0;font-size:14.5px;line-height:1.45;color:var(--texte-3)}

.cs-fil{display:flex;flex-direction:column;gap:10px;margin:14px 0 0}
.cs-fil .cs-message{margin:0}
.cs-selection .cs-message{margin:0 0 12px}
.cs-selection .cs-produit:last-child{margin-bottom:0}
.cs-bulle-vous{align-self:flex-end;max-width:85%;background:var(--bordeaux);color:#fff;border-radius:16px 4px 16px 16px;padding:10px 14px;font-size:15px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}
.cs-question-libre{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:end;margin:14px 0 0}
.cs-question-libre .cs-question{grid-column:1 / -1;margin:0}
.cs-question-libre textarea,.cs-relais input,.cs-relais textarea{width:100%;box-sizing:border-box;border:2px solid var(--creme-2);border-radius:14px;padding:10px 12px;font:500 16px/1.4 var(--corps);color:var(--texte);background:#fff;resize:vertical}
.cs-question-libre textarea:focus,.cs-relais input:focus,.cs-relais textarea:focus{outline:3px solid var(--orange);outline-offset:1px;border-color:var(--orange-clair)}
.cs-envoyer{min-height:48px;padding:0 16px;border:0;border-radius:14px;background:var(--bordeaux);color:#fff;font:700 15px var(--corps);cursor:pointer}
.cs-envoyer:disabled{opacity:.6;cursor:wait}
.cs-envoyer:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.cs-relais{display:grid;gap:4px;margin:0}
.cs-relais label{font:700 14px var(--corps);color:var(--texte);margin-top:6px}
.cs-relais .cs-autres{margin-top:10px}
.cs-erreur{color:#B3261E;font-size:13.5px;min-height:0}
.cs-erreur:empty{display:none}
.cs-rgpd{font-size:13px;color:var(--texte-2);margin:8px 0 0}
.cs-piege{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.cs-message .cs-lien{margin-top:4px}

/* Bouton de l'encart « Besoin d'un conseil ? » (partials/conseil), montré seulement quand le soleil est là. Blanc sur orange. */
.conseil-soleil{display:inline-flex;align-items:center;gap:8px;margin-top:10px;min-height:44px;padding:0 18px;border:0;border-radius:999px;background:var(--orange);color:#fff;font:700 15px var(--corps);cursor:pointer}
.conseil-soleil[hidden]{display:none}
.conseil-soleil:hover{filter:brightness(1.05)}
.conseil-soleil:focus-visible{outline:3px solid var(--bordeaux);outline-offset:2px}

@media (max-width:760px){
  .cs-soleil{width:64px;height:64px}
  .cs-bulle{left:calc(max(14px,env(safe-area-inset-left,0px)) + 70px);bottom:calc(var(--a11y-bas,20px) + 30px + env(safe-area-inset-bottom,0px));max-width:200px;font-size:14px}
  /* En lisant vers le bas, le soleil se range à moitié contre le bord ; il revient dès qu'on remonte. */
  .cs-soleil.cs-range{transform:translateX(-58%) rotate(18deg)}
  /* La fenêtre devient un panneau qui monte du bas */
  .cs-fenetre{left:0;right:0;bottom:0;width:auto;max-height:88vh;max-height:88dvh;border-radius:22px 22px 0 0;transform:translateY(100%);padding-bottom:env(safe-area-inset-bottom,0px)}
  .cs-fenetre.cs-ouverte{transform:none}
}
@media (prefers-reduced-motion:reduce){
  .cs-corps,.cs-rayons,.cs-yeux,.cs-bras,.cs-soleil:hover .cs-bras,.cs-soleil.cs-coucou .cs-bras,.cs-cherche .cs-tete .cs-rayons,.cs-points i{animation:none}
  .cs-soleil,.cs-fenetre,.cs-bulle{transition:none}
}
@media print{.cs{display:none}}