/* Composants de wp-apidae.io, extraits du haut de page validé le 30/09.
   Ne consomme que les variables de jetons.css : aucune couleur en dur (vérifié par
   design-system/verifier.py). Classes préfixées wpa- pour ne pas croiser Blocksy. */

/* Focus clavier commun : le bleu lien, décollé, lisible sur fond clair comme sur nuit. */
.wpa-bouton:focus-visible,
.edd-submit:focus-visible,
.wpa-lien:focus-visible,
.wpa-bascule:focus-visible,
.wpa-carte-fiche a:focus-visible {
  outline: 3px solid var(--wpa-lien);
  outline-offset: 3px;
}

/* Bouton plein — l'action principale, une seule par écran. Habille aussi le bouton d'EDD
   (.edd-submit : achat, paiement, renouvellement), à condition que ses couleurs restent vides
   dans les réglages d'EDD, qui les poseraient en !important. */
.wpa-bouton, .edd-submit {
  display: inline-flex; align-items: center; gap: var(--wpa-espace-20);
  background: var(--wpa-nuit); color: var(--wpa-surface);
  font: 600 var(--wpa-taille-m)/1 var(--wpa-police-texte);
  padding: 0.85em 1.4em; border: 0; border-radius: var(--wpa-rayon-bouton);
  text-decoration: none; cursor: pointer;
  transition: background-color var(--wpa-duree-courte), color var(--wpa-duree-courte);
}
/* Survol : le fond passe de nuit à l'orange abeille, libellé nuit (8,26:1) — variante C retenue par
   Pierre le 05/10 ; l'encre d'avant (1,1:1 avec le nuit) se lisait comme du noir. */
.wpa-bouton:hover, .edd-submit:hover { background: var(--wpa-orange); color: var(--wpa-nuit); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.22em; }

/* Lien d'action — l'action secondaire, à côté du bouton. */
.wpa-lien {
  color: var(--wpa-lien); font-weight: 600; text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--wpa-duree-courte);
}
.wpa-lien:hover { border-bottom-color: currentColor; }
.wpa-lien::after { content: " →"; }

/* Donnée — le seul emploi du mono : une version, un identifiant, une URL, un nom de fichier. */
.wpa-donnee { font-family: var(--wpa-police-mono); font-weight: 500; font-size: 0.92em; }

/* Titre de page. Le surlignage (mark) est réservé au titre du haut de l'accueil : une fois par
   page, jamais comme procédé d'écriture des autres titres (vérifié par verifier-rendu.js). */
.wpa-titre {
  margin: 0; font: 800 var(--wpa-taille-3xl)/var(--wpa-interligne-serre) var(--wpa-police-titre);
  color: var(--wpa-nuit); letter-spacing: -0.02em; text-wrap: balance;
}
.wpa-titre mark {
  background: linear-gradient(transparent 58%, var(--wpa-orange) 58%);
  color: inherit; padding: 0 0.1em;
}

/* Pastille de module — nomme une extension quand elle entre en jeu. Un seul signal : l'aplat. */
.wpa-pastille-module {
  display: inline-block;
  font: 600 var(--wpa-taille-s)/1.2 var(--wpa-police-texte);
  color: var(--wpa-nuit); background: var(--wpa-violet-pale);
  border-radius: var(--wpa-rayon-etiquette); padding: 0.35em 0.7em;
}

/* Bascule — deux états exclusifs (Hiver / Été, FR / EN). Un vrai bouton, aria-checked. */
.wpa-bascule {
  position: relative; display: inline-grid; grid-template-columns: 1fr 1fr;
  background: var(--wpa-violet-pale); border: 0; border-radius: var(--wpa-rayon-interrupteur);
  padding: 3px; cursor: pointer; font: 600 var(--wpa-taille-s)/1 var(--wpa-police-texte);
}
.wpa-bascule::before {
  content: ""; position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px);
  border-radius: var(--wpa-rayon-interrupteur); background: var(--wpa-nuit);
  transition: transform var(--wpa-duree-moyenne) var(--wpa-courbe-bascule);
}
.wpa-bascule[aria-checked="true"]::before { transform: translateX(100%); }
.wpa-bascule span {
  position: relative; padding: 0.55em 1.1em; text-align: center; color: var(--wpa-texte-discret);
  transition: color var(--wpa-duree-moyenne);
}
.wpa-bascule[aria-checked="false"] span:first-child,
.wpa-bascule[aria-checked="true"] span:last-child { color: var(--wpa-surface); }

/* Carte de fiche — une fiche Apidae dans un listing : catégorie, nom, commune, rien de plus. */
.wpa-carte-fiche {
  display: flex; flex-direction: column; background: var(--wpa-surface);
  border-radius: var(--wpa-rayon-carte); overflow: hidden; box-shadow: var(--wpa-ombre-carte);
  max-width: 100%;
}
.wpa-carte-fiche img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.wpa-carte-fiche .corps { display: grid; gap: var(--wpa-espace-10); padding: var(--wpa-espace-40); }
.wpa-carte-fiche .categorie {
  font: 600 var(--wpa-taille-s)/1.3 var(--wpa-police-texte); color: var(--wpa-texte-discret);
}
.wpa-carte-fiche h3 { margin: 0; font: 800 var(--wpa-taille-l)/var(--wpa-interligne-titre) var(--wpa-police-titre); color: var(--wpa-nuit); }
.wpa-carte-fiche h3 a { color: inherit; text-decoration: none; }
.wpa-carte-fiche .commune { font-size: var(--wpa-taille-s); color: var(--wpa-texte-second); }

/* Cadre navigateur — met en scène une page du site, jamais une capture nue. */
.wpa-navigateur {
  margin: 0; background: var(--wpa-surface); border-radius: var(--wpa-rayon-carte);
  box-shadow: var(--wpa-ombre-cadre); overflow: hidden; max-width: 100%;
}
.wpa-navigateur .barre {
  display: flex; align-items: center; gap: 6px; padding: 8px 12px;
  background: var(--wpa-violet-pale); border-bottom: 1px solid var(--wpa-trait);
}
.wpa-navigateur .barre i { width: 9px; height: 9px; border-radius: 50%; background: var(--wpa-violet-clair); display: block; }
.wpa-navigateur .barre span {
  margin-left: 10px; font: 500 var(--wpa-taille-xs)/1 var(--wpa-police-mono); color: var(--wpa-texte-discret);
  background: var(--wpa-surface); border-radius: var(--wpa-rayon-etiquette); padding: 5px 10px;
  flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.wpa-navigateur img { display: block; width: 100%; height: auto; }
/* Composé en blocs (bin/composer/) : la barre et l'image se touchent, sans l'écart de la mise en page. */
.wpa-navigateur > * { margin-block: 0; }

/* Cadre téléphone — la même page, en mobile. */
.wpa-telephone {
  margin: 0; background: var(--wpa-encre); border-radius: 26px; padding: 7px;
  box-shadow: var(--wpa-ombre-cadre); max-width: 100%;
}
.wpa-telephone .ecran { border-radius: 20px; overflow: hidden; aspect-ratio: 9 / 19; background: var(--wpa-surface); }
.wpa-telephone img { display: block; width: 100%; height: auto; }

/* Inserteur de blocs — l'interface WordPress reproduite : ses couleurs sont celles de WordPress. */
.wpa-inserteur {
  background: var(--wpa-surface); border-radius: 8px; box-shadow: var(--wpa-ombre-flottant);
  font: var(--wpa-taille-xs)/1.3 var(--wpa-police-texte); color: var(--wpa-wp-encre); max-width: 100%;
}
.wpa-inserteur .onglets { display: flex; gap: 12px; padding: 9px 12px 0; border-bottom: 1px solid var(--wpa-wp-trait); font-weight: 400; color: var(--wpa-wp-discret); }
.wpa-inserteur .onglets b { color: var(--wpa-wp-encre); font-weight: 600; padding-bottom: 7px; box-shadow: inset 0 -2px 0 var(--wpa-wp-accent); }
.wpa-inserteur .recherche { margin: 10px 12px 8px; background: var(--wpa-wp-champ); border-radius: 3px; padding: 6px 8px; }
.wpa-inserteur .categorie { padding: 0 12px 4px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; color: var(--wpa-wp-discret); text-transform: uppercase; }
.wpa-inserteur .grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 0 6px 8px; }
.wpa-inserteur .bloc { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 9px 2px 7px; border-radius: 4px; text-align: center; }
.wpa-inserteur .bloc svg { width: 20px; height: 20px; fill: var(--wpa-wp-encre); }
.wpa-inserteur .bloc.actif { background: var(--wpa-wp-survol); color: var(--wpa-wp-accent); box-shadow: inset 0 0 0 1.5px var(--wpa-wp-accent); }
.wpa-inserteur .bloc.actif svg { fill: var(--wpa-wp-accent); }

/* Bloc JSON — la donnée Apidae telle qu'elle arrive, avant d'être mise en page. */
.wpa-json {
  margin: 0; background: var(--wpa-nuit); color: var(--wpa-code-texte);
  font: 0.8rem/1.6 var(--wpa-police-mono); padding: var(--wpa-espace-40);
  border-radius: var(--wpa-rayon-carte); overflow-x: auto; white-space: pre; max-width: 100%;
}
.wpa-json .k { color: var(--wpa-orange); }

/* mascotte:debut — ce bloc est aussi embarqué dans design-system/mascotte/mascotte.svg (construire.py) */
/* Mascotte — l'abeille du logo, vectorielle. Trois états, posés par data-etat :
   repos (défaut), travail (import, synchronisation), content (un succès : un saut, une fois).
   Elle vit sur place : elle ne traverse jamais l'écran. */
.wpa-mascotte { display: block; width: 100%; max-width: 100%; height: auto; overflow: visible; }
.wpa-mascotte .m-ombre { fill: var(--wpa-violet-pale); transform-box: fill-box; transform-origin: 50% 50%; }
.wpa-mascotte .m-aile ellipse { fill: var(--wpa-violet-pale); stroke: var(--wpa-nuit); stroke-width: 0.3; }
.wpa-mascotte .m-aile-d ellipse { fill: var(--wpa-violet-clair); }
.wpa-mascotte .m-rayures { fill: var(--wpa-nuit); }
.wpa-mascotte .m-corps { fill: var(--wpa-orange); stroke: var(--wpa-nuit); stroke-width: 0.3; paint-order: stroke; }
/* Antennes redessinées en tiges (le tracé du logo découpé laissait une jointure qui s'ouvrait en
   pivotant) ; posées sous le corps, leur base reste cachée quelle que soit l'inclinaison. */
.wpa-mascotte .a-trait { fill: none; stroke: var(--wpa-nuit); stroke-width: 1.55; stroke-linecap: round; }
.wpa-mascotte .a-tige { fill: none; stroke: var(--wpa-orange); stroke-width: 1.25; stroke-linecap: round; }
.wpa-mascotte .a-bout-trait { fill: var(--wpa-nuit); }
.wpa-mascotte .a-bout { fill: var(--wpa-orange); }
/* Pivots en coordonnées du dessin (view-box) : la base de chaque antenne, l'attache de chaque aile. */
.wpa-mascotte .m-vol, .wpa-mascotte .m-aile, .wpa-mascotte .m-antenne { transform-box: view-box; }
.wpa-mascotte .m-vol { transform-origin: 9px 17.5px; animation: wpa-m-flotte 3.2s ease-in-out infinite alternate; }
.wpa-mascotte .m-ombre { animation: wpa-m-ombre 3.2s ease-in-out infinite alternate; }
.wpa-mascotte .m-aile-g { transform-origin: 3.6px 7.6px; animation: wpa-m-aile-g 1.6s ease-in-out infinite alternate; }
.wpa-mascotte .m-aile-d { transform-origin: 14.4px 7.6px; animation: wpa-m-aile-d 1.6s ease-in-out infinite alternate; }
.wpa-mascotte .m-antenne-g { transform-origin: 6.9px 4.4px; animation: wpa-m-antenne 2.8s ease-in-out infinite alternate; }
.wpa-mascotte .m-antenne-d { transform-origin: 11.1px 4.4px; animation: wpa-m-antenne 2.8s ease-in-out -1.4s infinite alternate-reverse; }
.wpa-mascotte[data-etat="travail"] .m-vol,
.wpa-mascotte[data-etat="travail"] .m-ombre { animation-duration: 0.9s; }
.wpa-mascotte[data-etat="travail"] .m-aile-g { animation: wpa-m-aile-g-vite 0.22s linear infinite alternate; }
.wpa-mascotte[data-etat="travail"] .m-aile-d { animation: wpa-m-aile-d-vite 0.22s linear infinite alternate; }
.wpa-mascotte[data-etat="travail"] .m-antenne { animation-duration: 0.9s; }
.wpa-mascotte[data-etat="content"] .m-vol { animation: wpa-m-saut 0.8s var(--wpa-courbe-sortie) 1, wpa-m-flotte 3.2s ease-in-out 0.8s infinite alternate; }
.wpa-mascotte[data-etat="content"] .m-ombre { animation: wpa-m-ombre-saut 0.8s var(--wpa-courbe-sortie) 1, wpa-m-ombre 3.2s ease-in-out 0.8s infinite alternate; }
.wpa-mascotte[data-etat="content"] .m-antenne-g { animation: wpa-m-antenne-joie-g 0.8s var(--wpa-courbe-sortie) 1, wpa-m-antenne 2.8s ease-in-out 0.8s infinite alternate; }
.wpa-mascotte[data-etat="content"] .m-antenne-d { animation: wpa-m-antenne-joie-d 0.8s var(--wpa-courbe-sortie) 1, wpa-m-antenne 2.8s ease-in-out 0.8s infinite alternate-reverse; }
@keyframes wpa-m-flotte { from { transform: translateY(0); } to { transform: translateY(-0.45px); } }
@keyframes wpa-m-ombre { from { transform: scaleX(1); opacity: 1; } to { transform: scaleX(0.9); opacity: 0.8; } }
@keyframes wpa-m-aile-g { from { transform: rotate(0deg); } to { transform: rotate(-9deg); } }
@keyframes wpa-m-aile-d { from { transform: rotate(0deg); } to { transform: rotate(9deg); } }
@keyframes wpa-m-aile-g-vite { from { transform: rotate(4deg); } to { transform: rotate(-16deg); } }
@keyframes wpa-m-aile-d-vite { from { transform: rotate(-4deg); } to { transform: rotate(16deg); } }
@keyframes wpa-m-antenne { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
@keyframes wpa-m-saut { 0% { transform: translateY(0) scale(1, 1); } 18% { transform: translateY(0) scale(1.06, 0.92); } 50% { transform: translateY(-2.6px) scale(0.97, 1.04); } 82% { transform: translateY(0) scale(1.04, 0.96); } 100% { transform: translateY(0) scale(1, 1); } }
@keyframes wpa-m-ombre-saut { 50% { transform: scaleX(0.6); opacity: 0.5; } }
@keyframes wpa-m-antenne-joie-g { 50% { transform: rotate(-18deg); } }
@keyframes wpa-m-antenne-joie-d { 50% { transform: rotate(18deg); } }
@media (prefers-reduced-motion: reduce) { .wpa-mascotte * { animation: none !important; } }
/* mascotte:fin */

/* Témoignage — une vraie personne, un vrai lieu : la photo n'est jamais une illustration. */
.wpa-temoignage { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); grid-template-rows: 1fr auto auto 1fr; grid-template-areas: "portrait ." "portrait citation" "portrait legende" "portrait ."; column-gap: var(--wpa-espace-50); row-gap: var(--wpa-espace-30); margin: 0; background: var(--wpa-surface); border: 1px solid var(--wpa-trait); border-radius: var(--wpa-rayon-carte); padding: var(--wpa-espace-50); max-width: 100%; }
.wpa-temoignage .portrait { grid-area: portrait; align-self: center; aspect-ratio: 4 / 5; border-radius: var(--wpa-rayon-carte); overflow: hidden; background: var(--wpa-violet-pale); display: grid; place-items: center; text-align: center; padding: var(--wpa-espace-30); }
.wpa-temoignage .portrait:has(img) { padding: 0; }
.wpa-temoignage .portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wpa-temoignage blockquote { grid-area: citation; margin: 0; font: 700 var(--wpa-taille-l)/var(--wpa-interligne-titre) var(--wpa-police-titre); color: var(--wpa-nuit); }
.wpa-temoignage figcaption { grid-area: legende; font-size: var(--wpa-taille-s); color: var(--wpa-texte-second); }
.wpa-temoignage figcaption b { color: var(--wpa-encre); }
.wpa-temoignage .credit { display: block; font: 400 var(--wpa-taille-s)/1.4 var(--wpa-police-texte); color: var(--wpa-texte-discret); margin-top: var(--wpa-espace-10); }
/* Photo — le terrain et les gens, en 3:2, couleurs naturelles. La légende dit où elle sert et
   son crédit ; une image générée le dit (« Image générée »), elle ne porte jamais un nom. */
.wpa-photo { margin: 0; display: grid; gap: var(--wpa-espace-20); }
.wpa-photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--wpa-rayon-carte); }
.wpa-photo figcaption { font-size: var(--wpa-taille-s); color: var(--wpa-texte-second); }
.wpa-photo .credit { display: block; color: var(--wpa-texte-discret); }
@media (max-width: 600px) { .wpa-temoignage { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "portrait" "citation" "legende"; } .wpa-temoignage .portrait { max-width: 200px; } }

@media (prefers-reduced-motion: reduce) {
  .wpa-bouton, .wpa-lien, .wpa-bascule::before, .wpa-bascule span { transition: none; }
}

/* ==========================================================================================
   Lot 2 — états et parcours (30/09). Chaque composant habille un rendu natif quand il en
   existe un (EDD, Software Licensing, Recurring, Gravity Forms, Fluent Support) : la classe
   native visée est dans docs/balisage-natif-parcours.md et sur la page de référence.
   ========================================================================================== */

/* Les composants du lot 2 se mesurent bordure comprise : un width: 100% avec du rembourrage
   déborderait de son conteneur (vu sur les cartes de module). */
:is(.wpa-alerte, .wpa-carte-tarif, .wpa-carte-module, .wpa-tableau, .wpa-champ, .wpa-tuile, .wpa-faq, .wpa-entete, .wpa-pied, .wpa-compteur) { box-sizing: border-box; }

.wpa-bouton-second:focus-visible, .wpa-champ :is(input, select, textarea):focus-visible,
.wpa-nav-compte a:focus-visible, .wpa-faq summary:focus-visible, .wpa-fil a:focus-visible,
.wpa-entete a:focus-visible, .wpa-entete button:focus-visible, .wpa-tuile a:focus-visible,
.wpa-carte-tarif a:focus-visible, .wpa-carte-module a:focus-visible, .wpa-alerte a:focus-visible,
.wpa-tableau a:focus-visible {
  outline: 3px solid var(--wpa-lien); outline-offset: 3px;
}

/* Statut — un état dit d'abord par son libellé, puis par sa teinte et sa marque (✓ ! × i –),
   pour qui ne distingue pas les couleurs. Rectangulaire, comme toutes les étiquettes. */
.wpa-statut {
  display: inline-flex; align-items: center; gap: 0.4em; white-space: nowrap;
  font: 600 var(--wpa-taille-s)/1.2 var(--wpa-police-texte);
  padding: 0.25em 0.6em; border-radius: var(--wpa-rayon-etiquette);
  color: var(--wpa-etat-neutre); background: var(--wpa-etat-neutre-fond);
}
.wpa-statut::before { content: "–"; font-weight: 700; }
.wpa-statut--succes { color: var(--wpa-etat-succes); background: var(--wpa-etat-succes-fond); }
.wpa-statut--succes::before { content: "✓"; }
.wpa-statut--attention { color: var(--wpa-etat-attention); background: var(--wpa-etat-attention-fond); }
.wpa-statut--attention::before { content: "!"; }
.wpa-statut--erreur { color: var(--wpa-etat-erreur); background: var(--wpa-etat-erreur-fond); }
.wpa-statut--erreur::before { content: "×"; }
.wpa-statut--info { color: var(--wpa-etat-info); background: var(--wpa-etat-info-fond); }
.wpa-statut--info::before { content: "i"; font-style: italic; font-family: var(--wpa-police-titre); }

/* Alerte — un message de parcours : titre, phrase, action facultative. Le fond pâle porte la
   teinte, la marque et le titre la disent. Pas de liseré de couleur (décision de Pierre, 30/09 :
   « ça fait très IA ») : un cadre fin et uniforme, de la teinte du fond. */
/* Habille les notices d'EDD : .edd-alert-success, -info, -warn (pas « warning »), -error.
   EDD en imprime certaines en <p> nu : les marges de paragraphe sont remplacées. */
.edd-alert { margin: 0 0 var(--wpa-espace-30); }
.wpa-alerte, .edd-alert {
  --ton: var(--wpa-etat-info); --ton-fond: var(--wpa-etat-info-fond); --ton-trait: var(--wpa-etat-info-trait);
  /* Pas de grille : la marque est posée dans la marge gauche, et le contenu s'écoule librement.
     Une notice d'EDD peut porter un texte nu, un paragraphe ou plusieurs erreurs à la suite. */
  position: relative; display: block;
  padding: var(--wpa-espace-30) var(--wpa-espace-40) var(--wpa-espace-30) calc(var(--wpa-espace-40) + 1.5em); max-width: 60ch;
  background: var(--ton-fond); border: 1px solid var(--ton-trait);
  border-radius: var(--wpa-rayon-etiquette); color: var(--wpa-encre); font-size: var(--wpa-taille-s);
}
.wpa-alerte > strong { display: block; }
:is(.wpa-alerte, .edd-alert) > p + p { margin-top: 0.4em; }
.wpa-alerte::before, .edd-alert::before { content: "i"; position: absolute; left: var(--wpa-espace-40); top: var(--wpa-espace-30); color: var(--ton); font: 800 var(--wpa-taille-m)/1.3 var(--wpa-police-titre); font-style: italic; }
:is(.wpa-alerte, .edd-alert) strong { color: var(--ton); font-weight: 700; }
:is(.wpa-alerte, .edd-alert) p { margin: 0; }
:is(.wpa-alerte, .edd-alert) a { color: var(--wpa-encre); font-weight: 600; }
.wpa-alerte--succes, .edd-alert-success { --ton: var(--wpa-etat-succes); --ton-fond: var(--wpa-etat-succes-fond); --ton-trait: var(--wpa-etat-succes-trait); }
.wpa-alerte--succes::before, .edd-alert-success::before { content: "✓"; font-style: normal; font-family: var(--wpa-police-texte); }
.wpa-alerte--attention, .edd-alert-warn { --ton: var(--wpa-etat-attention); --ton-fond: var(--wpa-etat-attention-fond); --ton-trait: var(--wpa-etat-attention-trait); }
.wpa-alerte--attention::before, .edd-alert-warn::before { content: "!"; font-style: normal; font-family: var(--wpa-police-texte); }
.wpa-alerte--erreur, .edd-alert-error { --ton: var(--wpa-etat-erreur); --ton-fond: var(--wpa-etat-erreur-fond); --ton-trait: var(--wpa-etat-erreur-trait); }
.wpa-alerte--info, .edd-alert-info { --ton: var(--wpa-etat-info); --ton-fond: var(--wpa-etat-info-fond); --ton-trait: var(--wpa-etat-info-trait); }
.wpa-alerte--erreur::before, .edd-alert-error::before { content: "×"; font-style: normal; font-family: var(--wpa-police-texte); }

/* Compteur d'activations — une licence = un site : « 1 / 1 » est l'information la plus
   demandée. La barre est décorative ; le texte dit tout. */
.wpa-compteur { display: grid; gap: 6px; min-width: 150px; font-size: var(--wpa-taille-s); color: var(--wpa-texte-second); }
.wpa-compteur b { font: 800 var(--wpa-taille-l)/1 var(--wpa-police-titre); color: var(--wpa-nuit); font-variant-numeric: tabular-nums; }
.wpa-compteur .barre { height: 6px; border-radius: var(--wpa-rayon-etiquette); background: var(--wpa-trait); overflow: hidden; }
.wpa-compteur .barre i { display: block; height: 100%; width: var(--part); background: var(--wpa-nuit); }
.wpa-compteur--limite .barre i { background: var(--wpa-etat-attention); }
.wpa-compteur--limite .note { color: var(--wpa-etat-attention); font-weight: 600; }
/* Le compteur natif de Software Licensing : « 2 / 5 » ou « 2 / Unlimited ». */
.edd-licenses__activation-data { display: inline-flex; align-items: baseline; gap: 0.25em; font: 800 var(--wpa-taille-l)/1 var(--wpa-police-titre); color: var(--wpa-nuit); font-variant-numeric: tabular-nums; }

/* Bouton secondaire — l'action d'à côté quand un lien ne suffit pas (Gérer, Annuler). */
.wpa-bouton-second {
  display: inline-flex; align-items: center; gap: var(--wpa-espace-20);
  font: 600 var(--wpa-taille-m)/1 var(--wpa-police-texte); color: var(--wpa-nuit);
  background: transparent; border: 1.5px solid var(--wpa-nuit); border-radius: var(--wpa-rayon-bouton);
  padding: calc(0.85em - 1.5px) calc(1.4em - 1.5px); text-decoration: none; cursor: pointer;
}
.wpa-bouton-second:hover { background: var(--wpa-violet-pale); box-shadow: inset 0 -3px 0 var(--wpa-orange); text-decoration: underline; text-underline-offset: 0.22em; }
/* Le bouton plein natif : sa couleur de survol vient du Customizer de Blocksy (theme/blocksy.json), mais
   une valeur déjà enregistrée en base l'emporte sur le défaut — la charte la pose donc aussi ici. */
body .wp-block-buttons .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover { background: var(--wpa-orange); color: var(--wpa-nuit); }
/* Le bouton contour natif suit le secondaire : Blocksy le remplirait de sa couleur de survol, l'orange
   du principal, et les deux actions ne se distingueraient plus. */
body .wp-block-buttons .wp-block-button.is-style-outline > .wp-block-button__link:hover {
  background: var(--wpa-violet-pale); color: var(--wpa-nuit); border-color: var(--wpa-nuit); box-shadow: inset 0 -3px 0 var(--wpa-orange);
}
/* Désactivé : l'attribut natif, ou aria-disabled pour un lien (EDD rend beaucoup de .edd-submit
   en <a>, que :disabled ne touche pas). Un lien aria-disabled doit aussi perdre son href. */
.wpa-bouton:disabled, .wpa-bouton-second:disabled, .edd-submit:disabled,
.wpa-bouton[aria-disabled="true"], .wpa-bouton-second[aria-disabled="true"], .edd-submit[aria-disabled="true"] {
  background: var(--wpa-trait); color: var(--wpa-texte-discret); border-color: var(--wpa-trait); cursor: not-allowed; text-decoration: none;
}

/* Carte tarif — un prix, ce qu'il couvre, une action. Le prix est HT et annuel, dit en toutes
   lettres. */
.wpa-carte-tarif {
  display: grid; gap: var(--wpa-espace-30); align-content: start; max-width: 340px; width: 100%;
  background: var(--wpa-surface); border: 1px solid var(--wpa-trait);
  border-radius: var(--wpa-rayon-carte); padding: var(--wpa-espace-50);
}
.wpa-carte-tarif > .visuel {
  display: block; width: calc(100% + 2 * var(--wpa-espace-50)); max-width: none; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  margin: calc(-1 * var(--wpa-espace-50)) calc(-1 * var(--wpa-espace-50)) var(--wpa-espace-20);
  border-radius: calc(var(--wpa-rayon-carte) - 1px) calc(var(--wpa-rayon-carte) - 1px) 0 0; background: var(--wpa-violet-pale);
}
.wpa-carte-tarif h3 { margin: 0; font: 800 var(--wpa-taille-xl)/var(--wpa-interligne-titre) var(--wpa-police-titre); color: var(--wpa-nuit); }
.wpa-carte-tarif .prix { margin: 0; color: var(--wpa-texte-second); font-size: var(--wpa-taille-s); }
.wpa-carte-tarif .prix b { font: 800 var(--wpa-taille-2xl)/1 var(--wpa-police-titre); color: var(--wpa-nuit); font-variant-numeric: tabular-nums; margin-right: 0.2em; }
.wpa-carte-tarif ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--wpa-espace-20); font-size: var(--wpa-taille-s); color: var(--wpa-encre); }
.wpa-carte-tarif li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.5em; }
.wpa-carte-tarif li::before { content: "✓"; color: var(--wpa-etat-succes); font-weight: 700; }
.wpa-carte-tarif .wpa-bouton { justify-content: center; }

/* Carte module — le visuel de la fiche d'extension (image à la une, déjà publiée), le nom, une
   phrase, le prix. Toute la carte mène à la fiche (lien étiré) : c'est le seul cas d'ombre
   « carte ». Ni étiquette ni couleur de famille : le visuel suffit à reconnaître le module. */
.wpa-carte-module {
  position: relative; display: grid; grid-template-rows: auto 1fr; width: 100%; max-width: 360px;
  background: var(--wpa-surface); border-radius: var(--wpa-rayon-carte); box-shadow: var(--wpa-ombre-carte);
}
.wpa-carte-module img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--wpa-rayon-carte) var(--wpa-rayon-carte) 0 0; }
.wpa-carte-module .corps { display: grid; gap: var(--wpa-espace-20); align-content: start; padding: var(--wpa-espace-40) var(--wpa-espace-50) var(--wpa-espace-50); }
.wpa-carte-module h3 { margin: 0; font: 800 var(--wpa-taille-l)/var(--wpa-interligne-titre) var(--wpa-police-titre); }
.wpa-carte-module h3 a { color: var(--wpa-nuit); text-decoration: none; }
.wpa-carte-module h3 a::after { content: ""; position: absolute; inset: 0; }
.wpa-carte-module:hover h3 a { text-decoration: underline; text-underline-offset: 0.18em; }
.wpa-carte-module p { margin: 0; font-size: var(--wpa-taille-s); color: var(--wpa-texte-second); }
.wpa-carte-module .prix { font-weight: 600; color: var(--wpa-encre); font-size: var(--wpa-taille-s); }

/* Tableau de données — commandes, licences, téléchargements. Sous 640 px de large, chaque
   ligne devient une fiche et chaque cellule s'annonce par son en-tête (data-label). */
.wpa-tableau { container-type: inline-size; width: 100%; }
.wpa-tableau table { width: 100%; min-width: 0; margin: 0; border-collapse: collapse; background: var(--wpa-surface); border: 1px solid var(--wpa-trait); border-radius: var(--wpa-rayon-carte); font-size: var(--wpa-taille-s); }
.wpa-tableau th { text-align: left; font: 600 var(--wpa-taille-s)/1.3 var(--wpa-police-texte); text-transform: none; letter-spacing: normal; color: var(--wpa-texte-discret); padding: var(--wpa-espace-30) var(--wpa-espace-40); border-bottom: 1px solid var(--wpa-trait); }
.wpa-tableau td { padding: var(--wpa-espace-30) var(--wpa-espace-40); border-bottom: 1px solid var(--wpa-trait); color: var(--wpa-encre); vertical-align: middle; overflow-wrap: anywhere; }
.wpa-tableau tr:last-child td { border-bottom: 0; }
.wpa-tableau td a { color: var(--wpa-lien); font-weight: 600; }
.wpa-tableau .vide { margin: 0; padding: var(--wpa-espace-50); background: var(--wpa-surface); border: 1px dashed var(--wpa-trait); border-radius: var(--wpa-rayon-carte); color: var(--wpa-texte-second); font-size: var(--wpa-taille-s); display: grid; gap: var(--wpa-espace-20); justify-items: start; }
@container (max-width: 640px) {
  .wpa-tableau thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .wpa-tableau table, .wpa-tableau tbody, .wpa-tableau tr, .wpa-tableau td { display: block; }
  .wpa-tableau table { border: 0; background: transparent; }
  .wpa-tableau tr { background: var(--wpa-surface); border: 1px solid var(--wpa-trait); border-radius: var(--wpa-rayon-carte); padding: var(--wpa-espace-20) 0; margin-bottom: var(--wpa-espace-30); }
  .wpa-tableau td { display: grid; grid-template-columns: minmax(6.5em, 35%) minmax(0, 1fr); gap: var(--wpa-espace-30); border: 0; padding: var(--wpa-espace-20) var(--wpa-espace-40); }
  .wpa-tableau td::before { content: attr(data-label); font-weight: 600; color: var(--wpa-texte-discret); }
}

/* Champs de formulaire — étiquette au-dessus, aide entre les deux, erreur en dessous.
   Le bord du champ passe 3:1 (texte discret) : un champ doit se voir sans le deviner. */
.wpa-champ { display: grid; gap: 6px; max-width: 420px; width: 100%; font-size: var(--wpa-taille-s); }
.wpa-champ label, .wpa-champ legend { font-weight: 600; color: var(--wpa-encre); }
.wpa-champ .requis { font-weight: 400; color: var(--wpa-texte-discret); }
.wpa-champ .aide { color: var(--wpa-texte-discret); margin: 0; }
.wpa-champ input:not([type="checkbox"]), .wpa-champ select, .wpa-champ textarea {
  font: 400 var(--wpa-taille-m)/1.4 var(--wpa-police-texte); color: var(--wpa-encre); background: var(--wpa-surface);
  border: 1px solid var(--wpa-texte-discret); border-radius: var(--wpa-rayon-bouton); padding: 0.6em 0.75em; width: 100%; box-sizing: border-box;
}
.wpa-champ input:disabled, .wpa-champ select:disabled { background: var(--wpa-violet-pale); color: var(--wpa-texte-discret); border-color: var(--wpa-trait); cursor: not-allowed; }
.wpa-champ [aria-invalid="true"] { border: 2px solid var(--wpa-etat-erreur); }
.wpa-champ .erreur { margin: 0; color: var(--wpa-etat-erreur); font-weight: 600; display: flex; gap: 0.4em; }
.wpa-champ .erreur::before { content: "×"; }
.wpa-champ--case { grid-template-columns: auto minmax(0, 1fr); align-items: start; column-gap: var(--wpa-espace-20); }
.wpa-champ--case input { width: 1.15em; height: 1.15em; margin: 0.15em 0 0; accent-color: var(--wpa-nuit); }
.wpa-champ--case label { font-weight: 400; }
.wpa-champ--case .aide { grid-column: 2; }

/* Navigation de l'espace client — un menu latéral simple (continuité avec le site, pas une
   « application »). La page courante porte aria-current : fond teinté et graisse, pas de trait. */
.wpa-nav-compte ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.wpa-nav-compte a { display: block; padding: 0.55em 0.8em; border-radius: var(--wpa-rayon-etiquette); color: var(--wpa-texte-second); text-decoration: none; font-size: var(--wpa-taille-s); }
.wpa-nav-compte a:hover { color: var(--wpa-nuit); text-decoration: underline; }
.wpa-nav-compte a[aria-current="page"] { background: var(--wpa-violet-pale); color: var(--wpa-nuit); font-weight: 700; }

/* Tuile du tableau de bord — une question, sa réponse, le geste qui suit. */
.wpa-tuile { display: grid; gap: var(--wpa-espace-20); align-content: start; background: var(--wpa-surface); border: 1px solid var(--wpa-trait); border-radius: var(--wpa-rayon-carte); padding: var(--wpa-espace-40) var(--wpa-espace-50); min-width: 0; }
.wpa-tuile h3 { margin: 0; font: 600 var(--wpa-taille-s)/1.3 var(--wpa-police-texte); color: var(--wpa-texte-discret); }
.wpa-tuile .valeur { margin: 0; font: 800 var(--wpa-taille-xl)/1.1 var(--wpa-police-titre); color: var(--wpa-nuit); }
.wpa-tuile p { margin: 0; font-size: var(--wpa-taille-s); color: var(--wpa-texte-second); }
.wpa-tuile > a { justify-self: start; color: var(--wpa-lien); font-weight: 600; font-size: var(--wpa-taille-s); }

/* Questions fréquentes — details/summary natifs : clavier et lecteur d'écran sans script. */
.wpa-faq { border-top: 1px solid var(--wpa-trait); max-width: 70ch; width: var(--theme-block-width, 100%); } /* la largeur de Blocksy garde la marge latérale sur téléphone */
.wpa-faq details { border-bottom: 1px solid var(--wpa-trait); }
.wpa-faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--wpa-espace-30); padding: var(--wpa-espace-30) 0; font-weight: 600; color: var(--wpa-nuit); }
.wpa-faq summary::-webkit-details-marker { display: none; }
.wpa-faq summary::after { content: "+"; font: 400 var(--wpa-taille-l)/1 var(--wpa-police-texte); color: var(--wpa-nuit); }
.wpa-faq details[open] summary::after { content: "–"; }
.wpa-faq details > div { padding: 0 0 var(--wpa-espace-40); color: var(--wpa-texte-second); font-size: var(--wpa-taille-s); }
.wpa-faq details > div p { margin: 0 0 var(--wpa-espace-20); }

/* Fil d'Ariane — liste ordonnée, séparateur décoratif, page courante non liée. */
.wpa-fil ol { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.3em 0.5em; font-size: var(--wpa-taille-s); color: var(--wpa-texte-discret); }
.wpa-fil li + li::before { content: "/"; content: "/" / ""; margin-right: 0.5em; color: var(--wpa-texte-discret); }
.wpa-fil a { color: var(--wpa-texte-second); }
.wpa-fil [aria-current="page"] { color: var(--wpa-encre); overflow-wrap: anywhere; }

/* En-tête du site — logo, menu, panier, compte, appel à l'action. Sous 760 px de large (de
   son conteneur), le menu se replie derrière un bouton ; le panneau s'ouvre dans le flux. */
.wpa-entete-boite { container-type: inline-size; width: 100%; }
.wpa-entete { display: flex; align-items: center; gap: var(--wpa-espace-40); flex-wrap: wrap; background: var(--wpa-surface); border-bottom: 1px solid var(--wpa-trait); padding: var(--wpa-espace-30) var(--wpa-espace-50); }
.wpa-entete .marque { display: inline-flex; align-items: center; gap: 8px; font: 800 var(--wpa-taille-l)/1 var(--wpa-police-titre); color: var(--wpa-nuit); text-decoration: none; margin-right: auto; }
.wpa-entete .marque svg { width: 22px; height: 24px; }
.wpa-entete .menu { display: flex; gap: var(--wpa-espace-40); }
.wpa-entete .menu ul { display: flex; gap: var(--wpa-espace-40); margin: 0; padding: 0; list-style: none; }
.wpa-entete .menu a { color: var(--wpa-encre); text-decoration: none; font-size: var(--wpa-taille-s); font-weight: 600; }
.wpa-entete .menu a:hover, .wpa-entete .outils a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.wpa-entete .outils { display: flex; align-items: center; gap: var(--wpa-espace-40); font-size: var(--wpa-taille-s); }
.wpa-entete .outils > a:not(.wpa-bouton) { color: var(--wpa-encre); font-weight: 600; text-decoration: none; }
.wpa-lecteur { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.wpa-entete .panier { position: relative; }
.wpa-entete .panier b { display: inline-block; min-width: 1.4em; margin-left: 0.3em; padding: 0.1em 0.35em; border-radius: var(--wpa-rayon-etiquette); background: var(--wpa-nuit); color: var(--wpa-surface); text-align: center; font-variant-numeric: tabular-nums; }
.wpa-entete .wpa-bouton { font-size: var(--wpa-taille-s); padding: 0.7em 1.1em; }
.wpa-entete .bouton-menu { display: none; font: 600 var(--wpa-taille-s)/1 var(--wpa-police-texte); color: var(--wpa-nuit); background: transparent; border: 1.5px solid var(--wpa-nuit); border-radius: var(--wpa-rayon-bouton); padding: 0.55em 0.9em; cursor: pointer; }
/* Entrées qui n'existent dans le menu qu'une fois l'en-tête replié (« Mon compte »). */
.wpa-entete .menu .seul-replie { display: none; }
@container (max-width: 760px) {
  .wpa-entete { gap: var(--wpa-espace-30); padding: var(--wpa-espace-30) var(--wpa-espace-40); }
  .wpa-entete .outils { order: 1; gap: var(--wpa-espace-30); }
  .wpa-entete .marque { font-size: var(--wpa-taille-m); }
  /* Le mot « Panier » reste pour les lecteurs d'écran ; à l'œil, la quantité suffit. */
  .wpa-entete .panier .mot { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .wpa-entete .menu .seul-replie { display: block; }
  .wpa-entete .bouton-menu { display: inline-flex; order: 2; }
  .wpa-entete .bouton-menu[hidden] { display: none; }
  .wpa-entete .menu { order: 3; flex-basis: 100%; }
  .wpa-entete .menu[hidden] { display: none; }
  .wpa-entete .menu ul { flex-direction: column; gap: 0; width: 100%; border-top: 1px solid var(--wpa-trait); }
  .wpa-entete .menu a { display: block; padding: var(--wpa-espace-30) 0; border-bottom: 1px solid var(--wpa-trait); }
  .wpa-entete .outils .compte, .wpa-entete .outils .wpa-bouton { display: none; }
}

/* Pied de page — fond nuit, trois colonnes de liens, mentions. */
.wpa-pied { background: var(--wpa-nuit); color: var(--wpa-surface); padding: var(--wpa-espace-60) var(--wpa-espace-50) var(--wpa-espace-50); display: grid; gap: var(--wpa-espace-50); width: 100%; box-sizing: border-box; }
.wpa-pied .colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--wpa-espace-50); }
.wpa-pied h3 { margin: 0 0 var(--wpa-espace-20); font: 800 var(--wpa-taille-m)/1.2 var(--wpa-police-titre); color: var(--wpa-surface); }
.wpa-pied ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--wpa-espace-20); font-size: var(--wpa-taille-s); }
.wpa-pied a { color: var(--wpa-surface); text-decoration: none; }
.wpa-pied a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.wpa-pied a:focus-visible { outline: 3px solid var(--wpa-orange); outline-offset: 3px; }
.wpa-pied .mentions { margin: 0; padding-top: var(--wpa-espace-40); border-top: 1px solid var(--wpa-texte-second); font-size: var(--wpa-taille-xs); color: var(--wpa-violet-pale); }

/* Pied : l'équipe en petit, sous l'accroche (avis de Pierre du 05/10, la section quitte l'accueil). */
.wpa-pied-equipe { display: grid; gap: var(--wpa-espace-20); margin-top: var(--wpa-espace-40); }
/* Le flux des blocs pose ses propres marges entre enfants : seule la grille espace. */
.wpa-pied-equipe > *, .wpa-pied-membre > * { margin-block: 0; }
.wpa-pied-equipe .wpa-pied-titre { margin-bottom: var(--wpa-espace-10); }
.wpa-pied-membre { display: flex; align-items: center; gap: var(--wpa-espace-20); }
.wpa-pied-membre .wp-block-image { margin: 0; flex: none; }
.wpa-pied-membre img { display: block; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--wpa-violet-pale); }
.wpa-pied-membre p { margin: 0; font-size: var(--wpa-taille-xs); line-height: 1.4; color: var(--wpa-violet-pale); }
.wpa-pied-membre strong { color: var(--wpa-surface); font-weight: 600; }

/* Menus de l'en-tête et du panneau mobile : le survol et la page en cours restent en violet nuit,
   signalés par un soulignement orange — l'écho du surlignage du titre (avis de Pierre du 05/10 : le
   bleu des liens n'était pas de la charte). La couleur vient de theme/blocksy-mise-en-page.json. */
#header .ct-menu-link:hover, #header li:hover > .ct-menu-link,
#header .current-menu-item > .ct-menu-link, #header .current-menu-ancestor > .ct-menu-link,
#offcanvas .ct-menu-link:hover, #offcanvas .current-menu-item > .ct-menu-link {
  text-decoration: underline; text-decoration-color: var(--wpa-orange);
  text-decoration-thickness: 3px; text-underline-offset: 7px;
}

/* Schibsted Grotesk a une espace étroite, que l'approche négative des titres resserre encore :
   « votre territoire » se lisait d'un bloc. Un peu d'air entre les mots, pas entre les lettres. */
:where(h1, h2, h3, h4, h5, h6, .wpa-titre) { word-spacing: 0.08em; }