/* CENTRE D'AIDE (24/10/2026) — pilule rouge foncé en bas à gauche, fenêtre en questions au-dessus.
   Aperçu validé : https://claude.ai/artifact/XSCGvdP5igpuDy9iCnBuwa ; chargé par _nav18.html (site de Romain seulement). */
#rp-aide{--ra-r:#A3161C;--ra-rf:#861116;--ra-encre:#1A2438;--ra-gris:#5B6474;--ra-pale:#8C93A1;--ra-filet:#DDE1E8;
  --ra-o:0 6px 18px -6px rgba(26,36,56,.28);--ra-o2:0 10px 24px -8px rgba(26,36,56,.38);--ra-f:Roboto,-apple-system,'Segoe UI',Arial,sans-serif;
  position:fixed;left:max(10px,env(safe-area-inset-left,0px));bottom:max(10px,env(safe-area-inset-bottom,0px));z-index:900;font:400 13px/1.45 var(--ra-f);color:var(--ra-encre);text-align:left}
#rp-aide *{box-sizing:border-box;font-family:var(--ra-f)!important;letter-spacing:0;text-transform:none}
#rp-aide svg{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
#rp-aide [hidden]{display:none!important}
#rp-aide button{margin:0;-webkit-appearance:none;appearance:none}
body.sheet-ouvert #rp-aide,html.sheet-ouvert #rp-aide{display:none!important}
@media print{#rp-aide{display:none!important}}

/* La pilule */
#rp-aide .ra-pil{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px 0 10px;border:0;border-radius:17px 9px 17px 17px;background:var(--ra-r);color:#fff;font:600 11.5px/1 var(--ra-f);cursor:pointer;box-shadow:0 10px 22px -10px rgba(120,15,20,.75);transition:transform .15s,box-shadow .15s,background .15s}
#rp-aide .ra-pil:hover{background:var(--ra-rf);transform:translateY(-1px);box-shadow:0 14px 26px -10px rgba(120,15,20,.85)}
#rp-aide .ra-pil svg{width:15px;height:15px}

/* La fenêtre */
#rp-aide .ra-fen{position:absolute;left:0;bottom:46px;width:390px;max-width:calc(100vw - 40px);height:min(580px,calc(100vh - 140px));height:min(580px,calc(100dvh - 140px));
  display:flex;flex-direction:column;background:#fff;border-radius:16px;box-shadow:0 24px 50px -20px rgba(26,36,56,.5),0 0 0 1px rgba(26,36,56,.06);overflow:hidden;animation:raOuvre .3s cubic-bezier(.2,.8,.2,1) both}
@keyframes raOuvre{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
#rp-aide .ra-tete{flex:none;position:relative;height:118px;padding:26px 64px 0 22px;background:var(--ra-r)}
#rp-aide .ra-tete h3{margin:0;font:700 18px/1.3 var(--ra-f);color:#fff}
#rp-aide .ra-x{position:absolute;top:16px;right:16px;width:34px;height:34px;padding:0;border:0;border-radius:50%;background:#fff;color:var(--ra-encre);display:grid;place-items:center;cursor:pointer;box-shadow:var(--ra-o);transition:transform .15s}
#rp-aide .ra-x:hover{transform:translateY(-1px)}
#rp-aide .ra-x svg{width:15px;height:15px;stroke-width:2.4}
#rp-aide .ra-corps{position:relative;z-index:1;flex:1;min-height:0;display:flex;flex-direction:column;margin:-52px 12px 12px;background:#fff;border-radius:12px;box-shadow:inset 0 0 0 1px var(--ra-filet),0 10px 24px -14px rgba(26,36,56,.35);overflow:hidden}
#rp-aide .ra-fil{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:16px 12px 10px;display:flex;flex-direction:column;gap:6px}
#rp-aide .m{max-width:84%;padding:10px 14px;border-radius:18px;font:400 13px/1.45 var(--ra-f);overflow-wrap:anywhere;white-space:pre-line;animation:raM .28s cubic-bezier(.2,.8,.2,1) both}
#rp-aide .m.bot{align-self:flex-start;background:#F1F3F6;color:var(--ra-encre);border-bottom-left-radius:6px}
#rp-aide .m.moi{align-self:flex-end;background:var(--ra-r);color:#fff;border-bottom-right-radius:6px;margin:4px 0 6px}
#rp-aide .m.err{align-self:flex-start;background:#FDECEC;color:#DC2626;border-bottom-left-radius:6px}
#rp-aide .m.info{align-self:flex-start;background:#F1F3F6;color:var(--ra-encre);border-bottom-left-radius:6px}
#rp-aide .m.ecrit{display:inline-flex;gap:4px;padding:13px 14px}
#rp-aide .m.ecrit i{width:6px;height:6px;border-radius:50%;background:var(--ra-pale);animation:raPt 1s infinite ease-in-out}
#rp-aide .m.ecrit i:nth-child(2){animation-delay:.15s}#rp-aide .m.ecrit i:nth-child(3){animation-delay:.3s}
@keyframes raPt{0%,80%,100%{opacity:.35;transform:none}40%{opacity:1;transform:translateY(-3px)}}
@keyframes raM{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
#rp-aide .ra-recap{align-self:stretch;margin:6px 0 4px;background:#F7F8FA;border-radius:12px;box-shadow:inset 0 0 0 1px #E6E9EE;padding:14px 16px}
#rp-aide .ra-recap h4{margin:0 0 8px;font:700 15px/1.3 var(--ra-f);color:var(--ra-encre)}
#rp-aide .ra-recap dl{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 14px}
#rp-aide .ra-recap dt{margin:0;font:400 12px/1.4 var(--ra-f);color:var(--ra-gris);white-space:nowrap}
#rp-aide .ra-recap dd{margin:0;font:500 12.5px/1.4 var(--ra-f);color:var(--ra-encre);overflow-wrap:anywhere;white-space:pre-line}

/* Où l'on répond */
#rp-aide .ra-sa{flex:none;padding:10px 12px 12px;background:#fff;border-top:1px solid #EDEEF0;display:grid;gap:8px;max-height:52%;overflow-y:auto}
#rp-aide .ra-sa:empty{display:none}
#rp-aide .puces{display:flex;flex-wrap:wrap;gap:8px}
#rp-aide .pu{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:0 15px;border:0;border-radius:50px;background:#fff;color:var(--ra-encre);font:600 13px/1.2 var(--ra-f);box-shadow:var(--ra-o);cursor:pointer;text-align:left;transition:transform .15s,box-shadow .15s}
#rp-aide .pu:hover{transform:translateY(-1px);box-shadow:var(--ra-o2)}
#rp-aide .pu svg{width:16px;height:16px;flex:none}
#rp-aide .pu.plein{background:var(--ra-r);color:#fff;box-shadow:0 8px 20px -10px rgba(120,15,20,.6)}
#rp-aide .pu.leger{box-shadow:none;background:transparent;color:var(--ra-gris);padding:0 8px}
#rp-aide .pu.leger:hover{color:var(--ra-encre);transform:none}
#rp-aide .deux{display:flex;gap:8px;flex-wrap:wrap}
#rp-aide .deux .pu{flex:1;justify-content:center}
#rp-aide .champ{display:flex;align-items:center;gap:6px;min-height:44px;margin:0;padding:3px 4px 3px 18px;border:0;border-radius:50px;background:#fff;box-shadow:var(--ra-o);transition:box-shadow .15s}
#rp-aide .champ:focus-within{box-shadow:var(--ra-o2)}
#rp-aide .champ.long{border-radius:22px;align-items:flex-end;padding:4px 4px 4px 18px}
#rp-aide .champ.ko{box-shadow:0 0 0 1.5px #DC2626,var(--ra-o)}
#rp-aide .champ input,#rp-aide .champ textarea{flex:1;min-width:0;width:auto;height:auto;margin:0;border:0!important;outline:0;background:none!important;box-shadow:none!important;border-radius:0;font:500 13px/1.45 var(--ra-f);color:var(--ra-encre);padding:9px 0}
#rp-aide .champ textarea{resize:none;min-height:66px;max-height:140px}
#rp-aide .champ ::placeholder{color:var(--ra-pale);opacity:1}
#rp-aide .ra-env{flex:none;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:var(--ra-r);color:#fff;display:grid;place-items:center;cursor:pointer;transition:transform .15s,opacity .15s}
#rp-aide .ra-env:hover{transform:translateX(2px)}
#rp-aide .ra-env[disabled]{opacity:.35;cursor:default;transform:none}
#rp-aide .ra-env svg{width:17px;height:17px;stroke-width:2.4}
#rp-aide .date{display:flex;align-items:center;gap:4px;flex:1;font:500 13px var(--ra-f);color:var(--ra-pale)}
#rp-aide .date input{flex:none;width:2.4em;text-align:center}
#rp-aide .date input.an{width:3.6em}
#rp-aide .date .nm{margin-right:6px}
/* L'envoi : l'arc marine du site, à gauche sous les boutons */
#rp-aide .ra-rond{width:28px;height:28px;margin:4px 0;color:var(--ra-r);animation:raTourne .9s linear infinite}
@keyframes raTourne{to{transform:rotate(360deg)}}

@media (max-width:560px){
  #rp-aide{left:8px;bottom:max(8px,env(safe-area-inset-bottom,0px))}
  #rp-aide .ra-fen{position:fixed;left:8px;right:8px;bottom:calc(52px + env(safe-area-inset-bottom,0px));width:auto;max-width:none;height:calc(100vh - 140px);height:calc(100dvh - 140px)}
}
/* Téléphone : la fenêtre se cale sur la partie visible de l'écran (visualViewport, centre-aide.js).
   Le haut et les questions restent en place, la zone de saisie suit le clavier. */
@media (max-width:560px){
  #rp-aide .ra-fen.ra-tel{position:fixed;left:8px;right:8px;bottom:auto;top:var(--ra-haut,8px);height:var(--ra-h,calc(100dvh - 70px));animation:none}
  #rp-aide .ra-fen.ra-tel.ra-clavier .ra-tete{height:96px;padding-top:18px}
  #rp-aide .ra-fen.ra-tel.ra-clavier .ra-corps{margin-top:-44px}
}
@media (prefers-reduced-motion:reduce){#rp-aide *{animation:none!important;transition:none!important}}
#rp-aide :focus-visible{outline:2px solid var(--ra-r);outline-offset:3px}