/* Share panels (site pilote only, inc-pilote-partage.php). Theme tokens from app.css.
 * Mobile first: the <details> disclosure and every link already lay out at phone width, no
 * override needed for a wider screen except the AI row, which gets more room.
 * The native share icon is drawn here, never a copy of a system icon. */

.qp-panneau,.qp-lecture,.qp-fiche-outils,.qp-collection-bas{margin:16px 0}

.qp-panneau{border:1px solid var(--line);border-radius:calc(12px*var(--rk,1));background:var(--paper)}
.qp-titre{cursor:pointer;list-style:none;padding:12px 16px;font-weight:600;font-size:14.5px;color:var(--ink);display:flex;align-items:center;gap:8px;min-height:44px}
.qp-titre::-webkit-details-marker{display:none}
.qp-titre::marker{content:''}
.qp-titre::after{content:'';width:9px;height:9px;margin-left:auto;border-right:2px solid var(--ink-mute);border-bottom:2px solid var(--ink-mute);transform:rotate(-45deg);transition:transform .15s}
.qp-panneau[open] .qp-titre::after{transform:rotate(45deg)}

.qp-liste{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:4px 12px 12px;list-style:none}
.qp-liste li{margin:0}
.qp-lien{display:flex;align-items:center;gap:6px;min-height:40px;padding:8px 12px;border:1px solid var(--line);border-radius:calc(10px*var(--rk,1));background:var(--paper);color:var(--ink);text-decoration:none;font-size:13px;font-weight:500;cursor:pointer;font-family:inherit}
.qp-lien:hover,.qp-lien:focus-visible{background:var(--forest-2,#eef5f0);border-color:var(--forest,#1f6b52)}
.qp-ic{display:flex;color:var(--ink-soft)}
.qp-svg{display:block}
.qp-retour{margin:0 12px 12px;font-size:12.5px;color:var(--forest,#1f6b52);min-height:1em}

/* The native share sheet is offered ONLY on a touch screen (hover:none + coarse pointer):
 * resolved by the browser before first paint, so switching devices never shifts the layout. */
.qp-lien--natif{display:none}
@media (hover: none) and (pointer: coarse) {
  .qp-lien--natif{display:flex}
}
/* Its list item too: an empty item left a hole in the compact grid (lot menu-partage). */
.qp-liste li:has(> .qp-lien--natif){display:none}
@media (hover: none) and (pointer: coarse) {
  .qp-liste li:has(> .qp-lien--natif){display:list-item}
}
/* Messenger has no web address that shares a link from a computer (its desktop click only copied
 * the link and opened messenger.com, with an empty href in the page, audit 3 of 01/10/2026): it is
 * offered on a touch screen only, where pilote-partage.js opens the Messenger app. */
.qp-lien--messenger,.qp-liste li:has(> .qp-lien--messenger){display:none}
@media (hover: none) and (pointer: coarse) {
  .qp-lien--messenger{display:flex}
  .qp-liste li:has(> .qp-lien--messenger){display:list-item}
}

/* Fiche (lot menu-partage, 01/10/2026): ONE row of small pills, "Partager" (its networks drop
 * down under the pill), "M'envoyer par e-mail", and the niche's optional "send to someone close".
 * Theme tokens only: each site's palette recolours it. */
.qp-fiche-outils{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:14px 0}
.qp-panneau--compact{position:relative;border:0;border-radius:0;background:none}
.qp-panneau--compact > .qp-titre,.qp-envoi-moi{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:0 14px 0 11px;
  border:1px solid var(--line);border-radius:999px;background:var(--paper);color:var(--ink);text-decoration:none;
  font-size:13px;font-weight:600;line-height:1.1;white-space:nowrap;transition:border-color .15s,color .15s,background-color .15s}
.qp-panneau--compact > .qp-titre::after{width:6px;height:6px;margin:0 0 3px 2px;border-right-width:1.6px;border-bottom-width:1.6px;transform:rotate(45deg)}
.qp-panneau--compact[open] > .qp-titre::after{transform:rotate(225deg);margin:3px 0 0 2px}
.qp-panneau--compact > .qp-titre:hover,.qp-panneau--compact[open] > .qp-titre,.qp-envoi-moi:hover,.qp-envoi-moi:focus-visible{border-color:var(--forest,#1f6b52);color:var(--forest,#1f6b52)}
.qp-panneau--compact > .qp-titre:focus-visible{outline:2px solid var(--forest,#1f6b52);outline-offset:2px}
.qp-panneau--compact .qp-ic,.qp-envoi-moi .qp-ic{color:currentColor}
.qp-panneau--compact .qp-svg,.qp-envoi-moi .qp-svg{width:16px;height:16px}
/* The networks: a small drop-down under the pill, over the page (nothing below moves). */
.qp-panneau--compact .qp-deroulant{position:absolute;z-index:40;top:calc(100% + 6px);left:0;width:max-content;max-width:min(360px,calc(100vw - 32px));
  padding:8px;background:var(--paper);border:1px solid var(--line);border-radius:calc(12px*var(--rk,1));box-shadow:var(--shadow-sm,0 6px 20px rgba(0,0,0,.12))}
.qp-panneau--compact .qp-liste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:0}
.qp-panneau--compact .qp-lien{width:100%;border-color:transparent;background:var(--cream,var(--paper))}
.qp-panneau--compact .qp-retour{margin:6px 4px 0}
.qp-panneau--compact .qp-retour:empty{display:none}
/* A touch screen: 44px targets. */
@media (hover: none) and (pointer: coarse) {
  .qp-panneau--compact > .qp-titre,.qp-envoi-moi{min-height:44px}
  .qp-panneau--compact .qp-lien{min-height:44px}
}

/* Guide/Mag' article: "Resumer avec l'IA" then the share panel, both under the H1. */
.qp-ia{margin:10px 0 14px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.qp-ia-titre{margin:0;font-size:12.5px;font-weight:600;color:var(--ink-mute);text-transform:uppercase;letter-spacing:.02em}
.qp-ia-liste{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.qp-ia-b{display:flex;align-items:center;gap:6px;min-height:36px;padding:6px 12px;border:1px solid var(--line);border-radius:999px;color:var(--ink);text-decoration:none;font-size:12.5px;font-weight:500}
.qp-ia-b:hover,.qp-ia-b:focus-visible{border-color:var(--forest,#1f6b52);color:var(--forest,#1f6b52)}

.qp-collection-bas{max-width:520px}

@media (prefers-reduced-motion: reduce) {
  .qp-titre::after,.qp-lien,.qp-envoi-moi,.qp-ia-b{transition:none}
}