/* Aide « ? » réutilisable (20/10/2026, décision du fondateur : moins de texte à l'écran, le détail derrière un petit point d'interrogation).
   Mode d'emploi, à reprendre sur les autres pages :
     <div class="etiquette-aide"><label for="champ">Formule</label>
       <button type="button" class="aide-btn" aria-expanded="false" aria-controls="aide-champ" aria-label="Aide : Formule"><span aria-hidden="true">?</span></button></div>
     <div class="aide-contenu" id="aide-champ"> … le détail … </div>
   Le bouton va HORS de l'étiquette (sinon son « ? » entrerait dans le nom du champ). Le panneau s'ouvre au clic, au toucher, à Entrée ou Espace ; Échap le ferme.
   Sans JavaScript, le bouton n'existe pas et le texte reste affiché (js/aide-bulle.js pose la classe js-aide sur <html>).
   Ne mettre dans une aide que ce qui explique : jamais un prix, un HT/TTC, un échéancier, un engagement, un consentement, une case des CGV ni une mention obligatoire.
   Couleurs : variables de style.css (le mode sombre suit). */
.aide-btn { display: none; }
.js-aide .aide-btn {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  min-width: 44px; min-height: 44px; margin: -10px -6px -10px -2px; padding: 0;
  background: none; border: 0; border-radius: 50%; cursor: pointer; color: var(--marque-fonce); font: inherit; vertical-align: middle;
  -webkit-tap-highlight-color: transparent;
}
.aide-btn > span {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  width: 24px; height: 24px; border: 2px solid currentColor; border-radius: 50%;
  font-size: .85rem; font-weight: 700; line-height: 1;
}
.aide-btn[aria-expanded="true"] > span { background: var(--marque-fonce); color: var(--surface); }
.aide-btn:focus-visible { outline: 3px solid var(--marque); outline-offset: -3px; }
@media (hover: hover) { .aide-btn:hover > span { background: var(--marque-pale); } .aide-btn[aria-expanded="true"]:hover > span { background: var(--marque-fonce); } }

.aide-contenu {
  margin: 6px 0 14px; padding: 10px 12px; box-sizing: border-box; max-width: 100%;
  border: 1px solid var(--filet-fort); border-radius: 6px; background: var(--surface-2); color: var(--encre);
  font-size: .86rem; line-height: 1.5; overflow-wrap: anywhere;
}
.aide-contenu p { margin: 0 0 6px; }
.aide-contenu p:last-child, .aide-contenu ul:last-child { margin-bottom: 0; }
.aide-contenu ul { margin: 0 0 6px; padding-left: 1.2em; }
.js-aide .aide-contenu:not(.ouvert) { display: none; }

/* Étiquette + « ? » sur une ligne. */
.etiquette-aide { display: block; margin: 0 0 6px; }
.champ .etiquette-aide > label, .etiquette-aide > label, .etiquette-aide > legend { margin: 0; display: inline; }
/* « ? » à la fin d'une phrase d'introduction. */
.aide-ligne { display: inline; }
@media (forced-colors: active) { .aide-btn > span { border-color: ButtonText; } .aide-btn[aria-expanded="true"] > span { background: Highlight; color: HighlightText; } }

/* Option à la carte avec son « ? » (22/10/2026, page pilote gestion-email.html) : case + étiquette (nom, prix, demi-ligne) + « ? » ;
   l'étiquette enveloppe seulement le nom, le prix et la demi-ligne, le bouton « ? » reste hors de l'étiquette (sinon il entre dans le nom de la case). */
.opt-item--aide { grid-template-columns: 20px minmax(0, 1fr) auto; cursor: default; }
.opt-item--aide .opt-etiquette { grid-column: 2; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; cursor: pointer; }
.opt-item--aide .opt-etiquette .opt-desc { grid-column: 1 / -1; }
.opt-item--aide .aide-btn { grid-column: 3; grid-row: 1; align-self: start; margin-top: -12px; }
.opt-item--aide .aide-contenu { grid-column: 2 / -1; margin-bottom: 4px; }

/* Impression : le détail replié est imprimé (le texte n'est jamais perdu). */
@media print {
  .js-aide .aide-contenu:not(.ouvert) { display: block; }
  .aide-btn { display: none !important; }
}