/* En-tete Propul, structure reprise de koul.io.
   ------------------------------------------------------------------------
   Ce qui est repris de koul.io : la geometrie et le comportement.
     - barre collante de 80 px, logo a gauche, entrees au centre, bouton plein
       a droite ; le panneau deroulant tombe sur toute la largeur de la fenetre,
       pas dans une bulle calee sous l'entree ;
     - deux formes de panneau : « detail » (rail d'expertises a gauche qui
       commande une liste au centre et une carte d'apercu a droite) et
       « colonnes » (2 a 4 colonnes de liens icone + intitule + description) ;
     - le bouton d'appel porte une plaque pleine decalee, qui s'ecarte au
       survol et disparait a l'appui.

   Ce qui ne l'est pas : les couleurs. koul.io tient sur un jaune de marque et
   six pastels bonbon. La charte Propul dit « le blanc est le territoire, la
   couleur est l'evenement » : les teintes ci-dessous sont donc une famille
   derivee des tokens Propul, pas les pastels de koul.io. Les valeurs koul.io
   sont notees en regard, pour qui voudrait basculer d'une ligne.

   Charge APRES propul-charte.css : cette couche remplace l'en-tete du gabarit
   Agenio, elle ne s'y ajoute pas.

   Toutes les tailles sont en pixels, et non dans l'echelle --fs-* de la charte.
   La raison a change : elle etait que le gabarit posait html { font-size: 10px }
   et que --fs-body (1rem) rendait donc 10 px. La racine est revenue a 16px en
   session 3, l'echelle de la charte est vivante, et ces valeurs pourraient s'y
   ecrire. On les garde en pixels parce qu'un bandeau de navigation se dimensionne
   sur sa hauteur de barre et sur la place disponible, pas sur une echelle
   editoriale : c'est le seul bloc du site dont les tailles ne sont pas du texte
   qu'on lit mais des reperes qu'on vise. Ecrire en pixels rend cette feuille
   insensible a la racine, quelle qu'elle devienne. */

:root {
  --pk-h: 80px;                 /* hauteur de barre, koul.io : h-20 */
  --pk-h-court: 64px;           /* sous 992 px */
  --pk-h-mention: 39px;         /* la barre haute : 38 px + son filet */
  --pk-pad: clamp(20px, 3.2vw, 40px);
  --pk-soft: color-mix(in srgb, var(--violet) 4%, var(--fond)); /* surface douce */
  --pk-ombre-barre: 0 1px 2px color-mix(in srgb, var(--encre) 6%, transparent), 0 1px 0 var(--filet);
  --pk-ombre-panneau: 0 18px 40px color-mix(in srgb, var(--encre) 10%, transparent), 0 2px 8px color-mix(in srgb, var(--encre) 5%, transparent);
  --pk-plaque: var(--encre);    /* la plaque du bouton (koul.io : --btn-plate) */

  /* Teintes des tuiles et des cartes d'apercu.

     koul.io en aligne six, tirees d'un nuancier bonbon qui lui est propre.
     La charte Propul interdit le bleu et ne connait que deux accents, le
     violet et l'orange du pole AI. Les quatre teintes ci-dessous sont donc
     DERIVEES des tokens existants, jamais saisies : un fond a 10-14 % du
     token sur blanc, et le token lui-meme pour l'encre. Consequence utile :
     une couleur de charte qui bouge entraine ses teintes avec elle, et le
     validateur ne voit aucun hexadecimal en dur. */
  --pk-tint-violet: color-mix(in srgb, var(--violet) 10%, var(--fond));
  --pk-tint-violet-ink: var(--violet);
  --pk-tint-sable: color-mix(in srgb, var(--attention) 14%, var(--fond));
  --pk-tint-sable-ink: var(--attention);
  --pk-tint-sauge: color-mix(in srgb, var(--ok) 13%, var(--fond));
  --pk-tint-sauge-ink: var(--ok);
  --pk-tint-argile: color-mix(in srgb, var(--orange-texte) 11%, var(--fond));
  --pk-tint-argile-ink: var(--orange-texte);
}

/* Une tuile lit sa teinte par attribut, jamais par une classe de couleur :
   changer la teinte d'une entree est une donnee, pas une regle CSS de plus. */
[data-teinte="violet"] { --pk-tint: var(--pk-tint-violet); --pk-ink: var(--pk-tint-violet-ink); }
[data-teinte="sauge"]  { --pk-tint: var(--pk-tint-sauge);  --pk-ink: var(--pk-tint-sauge-ink); }
[data-teinte="sable"]  { --pk-tint: var(--pk-tint-sable);  --pk-ink: var(--pk-tint-sable-ink); }
[data-teinte="argile"] { --pk-tint: var(--pk-tint-argile); --pk-ink: var(--pk-tint-argile-ink); }

/* ------------------------------------------------------------ 1. CHASSIS */

.pk-header {
  position: sticky;
  /* Le decalage negatif vaut la hauteur de la barre haute : celle-ci defile et
     sort, la barre de navigation seule reste collee. Sans lui, ce sont 119 px
     qui restent a l'ecran en permanence au lieu de 80. La rendre collante
     separement ne marcherait pas : un enfant collant ne tient que tant que son
     parent est a l'ecran, et .pk-header n'est pas plus haut que son contenu. */
  top: calc(-1 * var(--pk-h-mention));
  /* Le gabarit empile haut : discussion a 1000, retour-en-haut a 9811.
     L en-tete doit passer devant les deux, et rester sous le prechargeur
     (9999999), qui a le droit de tout couvrir au chargement. */
  z-index: 9900;
  width: 100%;
  background: var(--fond);
  box-shadow: var(--pk-ombre-barre);
}

/* Barre haute : conservee du gabarit (mention + selecteur de langue), mais
   elle defile. koul.io fait pareil : la barre collante est sous l'annonce. */
.pk-topbar {
  border-bottom: 1px solid var(--filet);
  background: var(--fond);
}

.pk-topbar__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 38px;
  padding: 8px var(--pk-pad);
}

.pk-topbar__texte {
  margin: 0;
  color: var(--texte-2);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-label);
  letter-spacing: .2em;
  text-align: center;
}

.pk-topbar__texte span { color: var(--accent); }

.pk-nav { position: relative; }

.pk-skip {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.pk-skip:focus {
  position: absolute;
  left: var(--pk-pad); top: 8px;
  z-index: 9930;
  width: auto; height: auto;
  margin: 0; padding: 8px 16px;
  clip: auto; overflow: visible;
  border-radius: var(--r-bouton);
  background: var(--accent);
  color: var(--fond);
  font-size: var(--fs-small);
  font-weight: 600;
}

.pk-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--pk-h);
  padding: 0 var(--pk-pad);
}

.pk-bar__left { display: flex; align-items: stretch; gap: 24px; height: 100%; }
.pk-bar__right { display: flex; align-items: center; gap: 12px; }

.pk-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}

/* --------------------------------------------------------- 2. LES ENTREES */

.pk-menu {
  display: none;               /* la barre d'entrees n'existe qu'a partir de 992 px */
  align-items: stretch;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pk-menu__item { position: relative; display: flex; align-items: stretch; }

/* Un lien et un declencheur sont le meme objet visuel : le second porte en plus
   un chevron. Le bouton est remis a plat, sinon le navigateur lui pose son
   fond et sa bordure. */
.pk-link {
  display: inline-flex;
  align-items: center;
  gap: 4.8px;
  height: 100%;
  padding: 0 14px;
  border: 0;
  background: none;
  color: var(--texte-2);
  font-family: var(--font-corps);
  font-size: var(--fs-small);
  font-weight: 500;
  /* 1,4 et non 1 : sous 1 200px, sept entrees de menu ne tiennent plus sur une
     ligne et « Realisations » se replie — deux lignes collees bord a bord.
     Cette feuille est chargee APRES propul-charte.css : le correctif doit
     vivre ici, une regle a specificite egale posee en amont ne s'applique
     pas. C'est la meme lecon que la section 7. */
  line-height: var(--lh-label);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--dur-rapide) var(--ease-out);
}

.pk-link:hover,
.pk-link:focus-visible { color: var(--accent); }

/* Entree ouverte ou page courante : l'accent, et le poids qui monte. Les deux
   etats sont le meme signal, il n'y a donc qu'une regle. */
.pk-link[aria-expanded="true"],
.pk-link[aria-current="page"],
.pk-menu__item.est-actif > .pk-link {
  color: var(--accent);
  font-weight: 600;
}

.pk-link__chevron {
  width: 15px; height: 15px;
  flex-shrink: 0;
  transition: transform var(--dur-base) var(--ease-out);
}

.pk-link[aria-expanded="true"] .pk-link__chevron { transform: rotate(180deg); }

/* La pastille de compte (koul.io la pose sur « Etudes de cas »). */
.pk-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px; height: 16px;
  margin-left: 2.4px;
  padding: 0 4px;
  transform: translateY(-.45em);
  border-radius: 50%;   /* un cercle, pas une pilule : la charte interdit la seconde */
  background: var(--erreur);
  color: var(--fond);
  font-size: var(--fs-label);
  font-weight: 800;
  line-height: 1;
}

/* ------------------------------------------------------------- 3. LE CTA */

/* Le bouton de koul.io : plaque pleine decalee de 2 px, qui s'ecarte a 4 px
   au survol pendant que le bouton avance d'un pixel, et se retracte a l'appui.
   Tout tient en box-shadow et translate : aucun pseudo-element a positionner. */
.pk-cta {
  display: none;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 20px;
  flex-shrink: 0;
  border: 1px solid transparent;
  border-radius: var(--r-bouton);
  background: var(--accent);
  box-shadow: 2px 2px 0 0 var(--pk-plaque);
  color: var(--fond);
  font-family: var(--font-corps);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition:
    transform var(--dur-rapide) var(--ease-out),
    box-shadow var(--dur-rapide) var(--ease-out),
    background-color var(--dur-rapide) var(--ease-out);
}

.pk-cta:hover,
.pk-cta:focus-visible {
  background: var(--accent-hover);
  color: var(--fond);
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 0 var(--pk-plaque);
}

.pk-cta:active {
  transform: translate(2px, 2px);
  box-shadow: none;
}

/* --------------------------------------------------- 4. BOUTON DU TIROIR */

.pk-burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border: 0;
  background: none;
  color: var(--encre);
  cursor: pointer;
}

.pk-burger svg { width: 24px; height: 24px; }

/* ---------------------------------------------------- 5. LE PANNEAU PLEIN */

/* Le panneau deroulant occupe toute la largeur de la fenetre et se detache du
   flux : il ne pousse jamais la page. Debordement cache sur l'enveloppe, pour
   que le panneau glisse depuis sous la barre sans se montrer au-dessus. */
.pk-viewport {
  position: absolute;
  top: 100%; right: 0; left: 0;
  z-index: 9901;
  overflow: hidden;
  padding-bottom: 40px;   /* la place que prend l'ombre du panneau */
  pointer-events: none;
}

.pk-panneau {
  pointer-events: auto;
  background: var(--fond);
  border-top: 1px solid var(--filet);
  box-shadow: var(--pk-ombre-panneau);
  opacity: 0;
  transform: translateY(-8px);
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);

  /* LE PANNEAU NE DEPASSE PLUS L'ECRAN. Mesure du 30/08/2026, panneau
     « Solutions », le plus haut des quatre :

       1920 x 1080 : 709px, tient          1440 x 900 : 725px, tient
       1366 x  768 : 791px, DEPASSE de 156px — 1 lien inatteignable
       1280 x  720 : 791px, DEPASSE de 204px — 2 liens inatteignables

     Un lien de menu qu'aucun geste ne peut atteindre n'existe pas. La borne se
     derive de la barre : le panneau s'ouvre juste sous elle, sa hauteur
     disponible est donc la fenetre moins la barre et sa mention, moins une
     garde de 16px pour que l'ombre reste visible. `dvh` et non `vh` : sur un
     portable, la barre d'adresse du navigateur mange la difference.

     `overflow-y: auto` plutot qu'une reduction de contenu : les 155 liens du
     mega-menu sont ce qui met 1 039 pages a deux clics de l'accueil — l'ANNEXE
     en fait un acquis a proteger. On ne coupe rien, on rend le reste
     atteignable. La zone reste utilisable au clavier parce qu'elle contient
     des liens focusables : c'est ce que demande le critere. */
  max-height: calc(100dvh - var(--pk-h) - var(--pk-h-mention) - 16px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.pk-panneau[hidden] { display: none; }
.pk-panneau.est-ouvert { opacity: 1; transform: translateY(0); }

/* L'intitule de colonne : capitales mono, comme tous les labels de la charte. */
.pk-eyebrow {
  margin: 0 0 20px;
  color: var(--texte-2);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
}

/* ------------------------------------------- 5a. PANNEAU « COLONNES » */

.pk-panneau--colonnes {
  display: grid;
  grid-template-columns: repeat(var(--pk-cols, 3), minmax(0, 1fr));
}

.pk-colonne {
  padding: 36px var(--pk-pad) 40px;
  border-left: 1px solid var(--filet);
}

.pk-colonne:first-child { border-left: 0; }

/* La derniere colonne de koul.io est posee sur une surface douce. C'est le
   seul aplat du panneau : il designe la colonne d'appoint. */
.pk-colonne--douce { background: var(--pk-soft); }

.pk-liste { margin: 0; padding: 0; list-style: none; }
.pk-liste > li + li { margin-top: 4px; }

.pk-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 10px 12px;
  margin-left: -12px;
  border-radius: var(--r-carte);
  text-decoration: none;
  transition: background-color var(--dur-rapide) var(--ease-out);
}

.pk-item:hover,
.pk-item:focus-visible { background: color-mix(in srgb, var(--encre) 4%, transparent); }

/* Une rangee qui porte une teinte s'allume dans SA couleur, pas dans le gris
   commun : la ligne et sa tuile se lisent alors d'un seul bloc. */
.pk-item[data-teinte]:hover,
.pk-item[data-teinte]:focus-visible {
  background: color-mix(in srgb, var(--pk-tint) 55%, transparent);
}

.pk-item[data-teinte]:hover .pk-item__label,
.pk-item[data-teinte]:focus-visible .pk-item__label { color: var(--pk-ink); }

.pk-item__label {
  display: block;
  color: var(--encre);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}

.pk-item:hover .pk-item__label,
.pk-item:focus-visible .pk-item__label { color: var(--accent); }

.pk-item__desc {
  display: block;
  margin-top: 2.4px;
  color: var(--texte-2);
  font-size: 13px;
  line-height: 1.45;
}

/* La tuile d'icone : carre arrondi, fond blanc cerne, ou teinte quand
   l'entree en porte une. */
.pk-tuile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px; height: 44px;
  border: 1px solid var(--filet);
  border-radius: var(--r-carte);
  background: var(--fond);
  color: var(--encre);
}

/* La tuile prend la teinte, qu'elle la porte elle-meme (le rail) ou qu'elle la
   herite de sa rangee (les colonnes). */
.pk-tuile[data-teinte],
[data-teinte] > .pk-tuile {
  border-color: transparent;
  background: var(--pk-tint);
  color: var(--pk-ink);
}

.pk-tuile svg { width: 20px; height: 20px; }

/* La tuile d'un logo de marque garde le fond blanc et son filet : c'est le
   logo qui porte la couleur, la tuile ne fait que l'encadrer. koul.io fait de
   meme, et pour la meme raison : un logo pose sur une teinte cesse d'etre le
   logo de son editeur. */
/* Le logo reste sur blanc, meme si sa rangee porte une teinte. */
.pk-tuile--logo,
[data-teinte] > .pk-tuile--logo {
  background: var(--fond);
  border-color: var(--filet);
  color: inherit;
}
.pk-tuile--logo img { width: 26px; height: 26px; object-fit: contain; }

/* Le mouvement au survol. Il ne se declenche que sur la ligne entiere : une
   tuile qui bouge quand on passe a cote d'elle est une nuisance, une tuile qui
   repond quand la ligne s'allume est une reponse. */
.pk-tuile {
  transition:
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}

.pk-item:hover .pk-tuile,
.pk-item:focus-visible .pk-tuile {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px color-mix(in srgb, var(--encre) 10%, transparent);
}

/* --------------------------------------------- 5b. PANNEAU « DETAIL » */

/* Trois zones : le rail commande, la liste suit, la carte illustre. Les deux
   zones de droite sont posees sur la surface douce, comme chez koul.io, ce qui
   fait lire le rail comme la colonne qui pilote. */
.pk-panneau--detail {
  display: grid;
  grid-template-columns: minmax(0, 34fr) minmax(0, 36fr) minmax(0, 30fr);
}

.pk-rail { padding: 36px var(--pk-pad) 40px; }

.pk-detail,
.pk-apercu {
  padding: 36px var(--pk-pad) 40px;
  background: var(--pk-soft);
}

.pk-detail { border-left: 1px solid var(--filet); }

/* Une entree du rail. C'est un bouton : elle commande l'affichage a droite.
   Le lien vers la page de l'expertise est la fleche, a l'extremite. */
.pk-rail__item {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 12px;
  margin-left: -12px;
  border: 0;
  border-radius: var(--r-carte);
  background: none;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--dur-rapide) var(--ease-out);
}

.pk-rail__item[aria-selected="true"] { background: color-mix(in srgb, var(--encre) 4%, transparent); }

.pk-rail__txt { flex: 1; min-width: 0; }

.pk-rail__label {
  display: block;
  color: var(--encre);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}

.pk-rail__desc {
  display: block;
  margin-top: 2.4px;
  color: var(--texte-2);
  font-size: 13px;
  line-height: 1.45;
}

/* La fleche n'apparait qu'a l'entree selectionnee : elle designe la sortie
   vers la page, pas un ornement pose sur chaque ligne. */
.pk-rail__go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 34px; height: 34px;
  border: 1px solid var(--filet);
  border-radius: 50%;
  background: var(--fond);
  color: var(--encre);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out), color var(--dur-rapide) var(--ease-out);
}

.pk-rail__item[aria-selected="true"] + .pk-rail__go { opacity: 1; }
.pk-rail__go:hover { color: var(--accent); }
.pk-rail__go svg { width: 15px; height: 15px; }

/* Le rail empile un bouton et un lien : ils se lisent comme une seule ligne. */
.pk-rail__ligne {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Les listes du centre et les cartes de droite : une seule est visible. */
.pk-detail__bloc[hidden],
.pk-carte[hidden] { display: none; }

.pk-detail__liste { margin: 0; padding: 0; list-style: none; }

.pk-detail__lien {
  display: block;
  padding: 18.4px 0;
  border-bottom: 1px solid var(--filet);
  color: var(--encre);
  font-size: 15px;
  line-height: 1.4;
  text-decoration: none;
  transition: color var(--dur-rapide) var(--ease-out);
}

.pk-detail__lien:hover,
.pk-detail__lien:focus-visible,
.pk-detail__lien[aria-current="true"] { color: var(--pk-ink, var(--accent)); }

/* La carte d'apercu. Sa teinte est celle de l'expertise qui la porte. */
.pk-carte {
  position: relative;
  padding: 24px;
  border-radius: var(--r-carte);
  background: var(--pk-tint, var(--pk-soft));
}

.pk-carte__go {
  position: absolute;
  top: 20px; right: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--fond);
  color: var(--encre);
  transition: color var(--dur-rapide) var(--ease-out);
}

.pk-carte__go:hover { color: var(--pk-ink, var(--accent)); }
.pk-carte__go svg { width: 15px; height: 15px; }

.pk-carte__titre {
  margin: 0 48px 12px 0;
  color: var(--encre);
  font-family: var(--font-corps);
  /* Le gabarit met toutes les tetes en capitales, avec un interlettrage
     negatif. La carte de koul.io est en casse de phrase : on le redit ici,
     sinon la regle groupee h1..h6 de style.css l'emporte. */
  text-transform: none;
  letter-spacing: normal;
  line-height: 1.3;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
}

.pk-carte__texte {
  margin: 0 0 20px;
  color: var(--encre);
  font-size: var(--fs-small);
  line-height: 1.5;
  /* Trois lignes, puis les points de suite : la carte annonce, la page dit. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pk-kpi { margin: 0; padding: 0; list-style: none; }
.pk-kpi > li + li { margin-top: 6.4px; }

.pk-kpi li {
  color: var(--encre);
  font-size: var(--fs-small);
  line-height: 1.4;
}

.pk-kpi b {
  margin-right: 5.6px;
  color: var(--pk-ink, var(--accent));
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 700;
}

/* ------------------------------------------------------- 6. LE TIROIR */

.pk-tiroir {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 9920;
  width: min(92vw, 420px);
  display: flex;
  flex-direction: column;
  background: var(--fond);
  box-shadow: var(--shadow-flottant);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--dur-lente) var(--ease-out), visibility var(--dur-lente);
}

.pk-tiroir.est-ouvert { transform: translateX(0); visibility: visible; }

.pk-voile {
  position: fixed;
  inset: 0;
  z-index: 9910;
  background: color-mix(in srgb, var(--encre) 38%, transparent);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-out), visibility var(--dur-base);
}

.pk-voile.est-ouvert { opacity: 1; visibility: visible; }

.pk-tiroir__tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 20px;
  min-height: var(--pk-h-court);
  border-bottom: 1px solid var(--filet);
}

.pk-tiroir__corps {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px 24px;
  overscroll-behavior: contain;
}

.pk-tiroir__pied { padding: 16px 20px 24px; border-top: 1px solid var(--filet); }
.pk-tiroir__pied .pk-cta { display: flex; width: 100%; }

.pk-tiroir__liste { margin: 0; padding: 0; list-style: none; }
.pk-tiroir__liste > li { border-bottom: 1px solid var(--filet); }

.pk-tiroir__entree,
.pk-tiroir__replier {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 15.2px 0;
  border: 0;
  background: none;
  color: var(--encre);
  font-family: var(--font-corps);
  font-size: var(--fs-body);
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.pk-tiroir__replier svg { width: 18px; height: 18px; transition: transform var(--dur-base) var(--ease-out); }
.pk-tiroir__replier[aria-expanded="true"] svg { transform: rotate(180deg); }
.pk-tiroir__replier[aria-expanded="true"] { color: var(--accent); }

.pk-tiroir__sous { margin: 0 0 12px; padding: 0 0 0 4px; list-style: none; }
.pk-tiroir__sous[hidden] { display: none; }
.pk-tiroir__sous > li > a {
  display: block;
  padding: 8.8px 0;
  color: var(--texte-2);
  font-size: var(--fs-small);
  line-height: 1.4;
  text-decoration: none;
}
.pk-tiroir__sous > li > a:hover { color: var(--accent); }
/* L'intitule de groupe porte le lien de la rubrique quand elle en a un : deux
   lignes pour le meme mot, c'etait la rubrique lue deux fois. */
.pk-tiroir__groupe > a {
  color: inherit;
  text-decoration: none;
}

.pk-tiroir__groupe > a:hover { color: var(--accent); }

.pk-tiroir__groupe {
  margin: 12px 0 4px;
  color: var(--encre);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
}

/* --------------------------------------------------------- 7. LES SEUILS */

/* 992 px : le seuil du gabarit Agenio, garde tel quel pour que la bascule
   barre / tiroir tombe au meme endroit que le reste du site. */
@media (min-width: 992px) {
  .pk-menu { display: flex; }
  .pk-cta { display: inline-flex; }
  .pk-burger { display: none; }
}

/* LA BANDE OU LA BARRE NE TIENT PAS : 992 a 1010 px.

   La barre complete — logo, sept entrees, bouton « Parlons-en » — a une
   largeur minimale intrinseque de 1 011px. La bascule tiroir -> barre tombe a
   992px. Entre les deux, la barre ne peut plus se comprimer et pousse la page,
   sur les 2 210 pages. Mesure sur l'accueil, avant correction :

     991px    0px de debordement   (tiroir, bouton masque)
     992px  +18px                  .pk-cta de x=894 a 1010
     1000px +11px                  .pk-cta jusqu'a 1011
     1010px  +1px                  .pk-cta jusqu'a 1011
     1011px   0px                  la fenetre a rattrape la barre

   Dix-neuf pixels de trop. Le seuil de 992px ne bouge pas — c'est celui du
   gabarit, et le reste du site s'y accroche. C'est la barre qu'on resserre, et
   seulement la ou elle ne tient pas : sept entrees a 8px de retrait au lieu de
   14 rendent 84px, le bouton et les intervalles le reste. Au-dela de 1060px —
   cinquante pixels apres le dernier point de casse — les valeurs d'origine
   reviennent, et le palier ne se voit pas : c'est de l'espacement entre
   entrees de menu, pas une position de bloc.

   Cette regle vit ICI et non dans propul-desktop.css : cette feuille est
   chargee en dernier, et `.pk-link { padding: 0 14px }` ci-dessus gagnerait a
   specificite egale contre une reparation posee en amont. */
@media (min-width: 992px) and (max-width: 1059.98px) {
  .pk-link { padding: 0 8px; }
  .pk-cta { padding: 0 14px; }
  .pk-bar { gap: 16px; }
  .pk-bar__left { gap: 16px; }
}

@media (max-width: 991.98px) {
  .pk-bar { height: var(--pk-h-court); }
  .pk-viewport { display: none; }
  .pk-topbar { display: none; }   /* comme le gabarit : la mention passe au tiroir */
  /* Plus de barre haute a faire sortir : la barre colle au bord. */
  :root { --pk-h-mention: 0px; }
}

/* Sous 1200 px la carte d'apercu n'a plus la largeur pour se lire : le
   panneau detail retombe sur deux zones et la carte s'efface. */
@media (max-width: 1199.98px) {
  .pk-panneau--detail { grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); }
  .pk-apercu { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pk-panneau,
  .pk-cta,
  .pk-tiroir,
  .pk-voile,
  .pk-link__chevron { transition: none; }
  .pk-cta:hover { transform: none; }
}