/* ═══════════════════════════════════════════════════════════════════
   LES POLICES, SERVIES PAR VOTRE SERVEUR

   Elles sont ici et non dans `wakabi.css` pour la raison qui a mis la
   barre et le pied de page ici : c'est la SEULE feuille servie sous les
   deux dessins. Déclarées là-bas, elles n'atteignaient pas les huit pages
   venues du guide — qui demandaient « Plus Jakarta Sans » à un navigateur
   à qui personne ne l'avait donnée, et rendaient donc dans la police du
   système. Mesuré au navigateur : le même mot occupait exactement la même
   largeur avec la pile demandée et avec `sans-serif`.

   Auto-hébergées, pas appelées chez Google. Trois raisons : elles
   s'affichent même si le CDN est lent ou bloqué, elles n'ajoutent pas un
   aller-retour vers un tiers sur une connexion 3G, et aucune adresse IP de
   visiteur ne part chez un tiers.

   `font-display: swap` : le texte s'affiche tout de suite dans la police
   système, puis bascule — plutôt qu'un écran vide le temps du chargement.
   ═══════════════════════════════════════════════════════════════════ */

@font-face{
  font-family:"Plus Jakarta Sans";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("polices/plus-jakarta-sans-latin-ext-400-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"Plus Jakarta Sans";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("polices/plus-jakarta-sans-latin-400-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Plus Jakarta Sans";
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url("polices/plus-jakarta-sans-latin-ext-500-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"Plus Jakarta Sans";
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url("polices/plus-jakarta-sans-latin-500-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Plus Jakarta Sans";
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url("polices/plus-jakarta-sans-latin-ext-600-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"Plus Jakarta Sans";
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url("polices/plus-jakarta-sans-latin-600-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Plus Jakarta Sans";
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url("polices/plus-jakarta-sans-latin-ext-700-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"Plus Jakarta Sans";
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url("polices/plus-jakarta-sans-latin-700-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Plus Jakarta Sans";
  font-style:normal;
  font-weight:800;
  font-display:swap;
  src:url("polices/plus-jakarta-sans-latin-ext-800-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"Plus Jakarta Sans";
  font-style:normal;
  font-weight:800;
  font-display:swap;
  src:url("polices/plus-jakarta-sans-latin-800-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============ Bricolage Grotesque, la police des badges ============
   Le moteur de rendu la demande pour chaque accroche — c'est la police de
   TITRAGE du produit. Elle n'était pourtant servie nulle part : le
   navigateur retombait en silence sur `system-ui`, et tous les badges
   sortaient dans la police du téléphone de l'invité plutôt que dans celle
   du décor. Un défaut qu'on ne voit pas, parce qu'il produit du texte
   correct — simplement pas le bon. */
@font-face{
  font-family:"Bricolage Grotesque";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("polices/bricolage-grotesque-latin-ext-400-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"Bricolage Grotesque";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("polices/bricolage-grotesque-latin-400-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Bricolage Grotesque";
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url("polices/bricolage-grotesque-latin-ext-700-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"Bricolage Grotesque";
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url("polices/bricolage-grotesque-latin-700-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Bricolage Grotesque";
  font-style:normal;
  font-weight:800;
  font-display:swap;
  src:url("polices/bricolage-grotesque-latin-ext-800-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"Bricolage Grotesque";
  font-style:normal;
  font-weight:800;
  font-display:swap;
  src:url("polices/bricolage-grotesque-latin-800-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* Charte Wakabi — valeurs réelles, extraites du site de production.
   Seul fichier de l'application qui porte des couleurs. */

/* ═══════════════════════════════════════════════════════════════════
   Le header partagé par le guide et par Boost.

   C'est la seule pièce que les deux sites ont en commun, et elle est
   servie sur TOUTES les pages — celles qui chargent la feuille du guide
   comme celles qui chargent celle de Boost. Elle ne peut donc s'appuyer
   sur les variables ni sur les classes d'aucune des deux : ses couleurs
   sont écrites en clair, et ses classes portent le préfixe `wk-`, qui
   n'existe nulle part ailleurs. Une collision de nom ici casserait un
   header sur la moitié du site sans qu'on sache lequel accuser.

   Les deux chartes se trouvent être la même — #2563EB, les mêmes gris,
   Plus Jakarta Sans — ce qui rend ce fichier court. Si elles divergeaient
   un jour, c'est ici qu'il faudrait trancher.
   ═══════════════════════════════════════════════════════════════════ */

.wk-tete{position:sticky;top:0;z-index:900;background:rgba(255,255,255,.96);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid #E2E8F0;padding:0 24px}
.wk-in{max-width:1200px;margin:0 auto;height:68px;display:flex;align-items:center;
  justify-content:space-between;gap:18px}

/* Le logo est le lien de retour à l'accueil, et le premier qu'on tente
   quand on s'est perdu. Mesuré à 30 px de haut, soit la hauteur de son
   image : on lui ajoute de quoi être visé sans le faire grandir. */
.wk-marque{flex:none;display:flex;align-items:center;text-decoration:none;
  padding:5px 0}
.wk-marque img{height:30px;width:auto;display:block}
.wk-marque-texte{font-weight:800;font-size:1.05rem;letter-spacing:-.03em;color:#0F172A}

/* ---------------- le menu ---------------- */

.wk-menu{flex-grow:1;display:flex;align-items:center;gap:2px;justify-content:center;
  list-style:none;margin:0;padding:0}
.wk-menu a,.wk-menu>li>button{font:inherit;font-size:14px;font-weight:500;color:#475569;
  padding:7px 12px;border-radius:6px;background:transparent;border:0;cursor:pointer;
  display:inline-flex;align-items:center;gap:5px;white-space:nowrap;text-decoration:none;
  transition:background .15s,color .15s}
.wk-menu a:hover,.wk-menu>li>button:hover{background:#EFF6FF;color:#2563EB}
.wk-menu a[aria-current],.wk-menu>li.wk-ici>button{font-weight:600;color:#2563EB;background:#EFF6FF}
.wk-menu :focus-visible{outline:2px solid #2563EB;outline-offset:2px}

/* ---------------- un déroulant, sans une ligne de script ----------------
   `details`/`summary` : il s'ouvre au clic et au clavier, il reste
   ouvrable si le script ne charge pas, et il se referme à l'échappement
   dans tous les navigateurs qui le gèrent. Le chevron tourne par CSS. */

.wk-grp{position:relative;list-style:none}
.wk-grp>summary{font-size:14px;font-weight:500;color:#475569;padding:7px 12px;
  border-radius:6px;cursor:pointer;display:inline-flex;align-items:center;gap:5px;
  white-space:nowrap;list-style:none;transition:background .15s,color .15s}
.wk-grp>summary::-webkit-details-marker{display:none}
.wk-grp>summary:hover{background:#EFF6FF;color:#2563EB}
.wk-grp[open]>summary{font-weight:600;color:#2563EB;background:#EFF6FF}
.wk-grp>summary:focus-visible{outline:2px solid #2563EB;outline-offset:2px}
.wk-grp .wk-chev{width:11px;height:11px;transition:transform .18s}
.wk-grp[open] .wk-chev{transform:rotate(180deg)}

.wk-volet{position:absolute;top:calc(100% + 8px);left:-6px;width:248px;background:#fff;
  border:1px solid #E2E8F0;border-radius:14px;
  box-shadow:0 20px 40px rgba(15,23,42,.1),0 8px 16px rgba(15,23,42,.06);
  padding:7px;display:flex;flex-direction:column;gap:1px;z-index:5}
.wk-volet a{display:flex;align-items:flex-start;gap:10px;padding:10px 11px;border-radius:9px;
  font-size:14px;font-weight:600;color:#0F172A;text-decoration:none}
.wk-volet a:hover{background:#F8FAFF}
.wk-volet svg{flex:none;margin-top:1px}
.wk-volet small{display:block;font-size:12px;font-weight:400;color:#475569;margin-top:1px}

/* ---------------- la droite : deux boutons et le compte ---------------- */

.wk-droite{flex:none;display:flex;align-items:center;gap:8px;position:relative}
.wk-b-out,.wk-b-pri{display:inline-flex;align-items:center;font-size:13px;font-weight:600;
  border-radius:10px;white-space:nowrap;text-decoration:none;transition:all .18s}
.wk-b-out{padding:7px 15px;color:#2563EB;background:transparent;border:1.5px solid #2563EB}
.wk-b-out:hover{background:#EFF6FF}
.wk-b-pri{padding:8px 16px;color:#fff;background:#2563EB;border:0;
  box-shadow:0 2px 8px rgba(37,99,235,.25)}
.wk-b-pri:hover{background:#1D4ED8;box-shadow:0 6px 20px rgba(37,99,235,.35)}

.wk-compte{position:relative;list-style:none}
.wk-compte>summary{display:inline-flex;align-items:center;gap:3px;padding:6px 7px;
  background:transparent;border:1.5px solid #E2E8F0;border-radius:10px;cursor:pointer;
  color:#0F172A;list-style:none}
.wk-compte>summary::-webkit-details-marker{display:none}
.wk-compte>summary:hover{border-color:#CBD5E1}
.wk-compte[open]>summary{background:#EFF6FF;border-color:#2563EB;color:#2563EB}
.wk-compte>summary:focus-visible{outline:2px solid #2563EB;outline-offset:2px}
/* Connecté : l'initiale remplace la silhouette, et le bouton s'arrondit. */
.wk-compte.wk-sien>summary{padding:4px 7px 4px 4px;border-radius:999px;gap:5px}
.wk-pastille{width:28px;height:28px;border-radius:999px;background:#2563EB;color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}

.wk-volet-u{position:absolute;top:calc(100% + 10px);right:0;width:258px;background:#fff;
  border:1px solid #E2E8F0;border-radius:16px;
  box-shadow:0 20px 40px rgba(15,23,42,.1),0 8px 16px rgba(15,23,42,.06);
  padding:8px;display:flex;flex-direction:column;gap:1px;z-index:6}
.wk-volet-u a,.wk-volet-u button{display:flex;align-items:center;gap:11px;padding:10px 12px;
  border:0;border-radius:10px;font:inherit;font-size:14px;font-weight:600;color:#0F172A;
  background:transparent;text-align:left;width:100%;cursor:pointer;text-decoration:none}
.wk-volet-u a:hover,.wk-volet-u button:hover{background:#F8FAFF}
.wk-volet-u form{margin:0}
.wk-volet-u svg{flex:none}
.wk-qui{padding:9px 12px 11px;border-bottom:1px solid #F1F5F9;margin-bottom:4px}
.wk-qui b{display:block;font-size:14px;color:#0F172A}
.wk-qui span{display:block;font-size:12px;color:#475569;margin-top:2px}
.wk-sep{border-top:1px solid #F1F5F9;margin:4px 0 2px}
.wk-nb{margin-left:auto;padding:1px 8px;border-radius:999px;background:#DC2626;color:#fff;
  font-size:12px;font-weight:700}
.wk-sortir{color:#B91C1C}

/* L'abonnement aux notifications, sous les deux portes du compte.
   Le filet qui l'en sépare est SA bordure, et non un élément à part : le
   jour où le script retire le bouton — navigateur sans notifications, ou
   permission déjà refusée — la ligne s'en va avec lui, au lieu de rester
   seule au bas d'un menu. */
.wk-volet-u .wk-push{align-items:flex-start;gap:11px;margin-top:5px;padding-top:13px;
  border-top:1px solid #F1F5F9}
.wk-volet-u .wk-push[hidden]{display:none}
.wk-volet-u .wk-push svg{margin-top:1px;color:#2563EB}
.wk-volet-u .wk-push b{display:block;font-weight:600}
.wk-volet-u .wk-push small{display:block;font-size:12px;font-weight:400;color:#475569;
  margin-top:2px;line-height:1.4}
/* Abonné : la cloche passe au vert de l'état acquis, comme partout ailleurs. */
.wk-volet-u .wk-push-ok svg{color:#0D9488}

/* ---------------- le hamburger, et le téléphone ---------------- */

.wk-burger{display:none;flex:none;list-style:none}
.wk-burger>summary{display:flex;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;padding:0 6px;background:transparent;border:0;cursor:pointer;
  list-style:none}
.wk-burger>summary::-webkit-details-marker{display:none}
.wk-burger>summary span{display:block;height:2px;background:#0F172A;border-radius:2px;
  transition:transform .25s,opacity .2s}
.wk-burger[open]>summary span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.wk-burger[open]>summary span:nth-child(2){opacity:0}
.wk-burger[open]>summary span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.wk-burger>summary:focus-visible{outline:2px solid #2563EB;outline-offset:2px}

@media (max-width:1080px){
  .wk-tete{padding:0 14px}
  .wk-in{height:60px;gap:10px}
  .wk-menu{display:none}
  .wk-burger{display:block}
  .wk-b-out{display:none}
  .wk-droite{gap:6px}

  /* Le bouton et la pastille du compte restent VISABLES AU DOIGT.
     Mesuré : à 7px/12px ils faisaient 30 px de haut — moins que la
     pulpe d'un pouce, et le seul bouton d'action de la barre. On
     descend la taille du texte, pas la surface à viser. */
  .wk-b-pri{padding:9px 13px;font-size:13px;min-height:38px}
  .wk-compte>summary{padding:8px 9px;min-height:38px}
  .wk-compte.wk-sien>summary{padding:4px 8px 4px 4px}

  /* Le volet déroule SOUS la barre, pleine largeur : un menu de 7 entrées
     en colonne ne tient pas dans une bulle de 248 px. */
  .wk-burger .wk-volet{position:fixed;top:60px;left:0;right:0;width:auto;
    border-radius:0;border-left:0;border-right:0;padding:8px 14px 18px;
    max-height:calc(100vh - 60px);overflow-y:auto}
  .wk-burger .wk-volet a{font-size:15px;padding:13px 12px}
  .wk-burger .wk-volet .wk-sous{padding-left:34px}
}

@media (max-width:520px){
  .wk-tete{padding:0 10px}
  /* Plus étroit, mais pas plus petit : c'est le libellé qui se resserre,
     la cible garde ses 38 px. */
  .wk-b-pri{padding:9px 11px;font-size:12.5px}
}

@media (prefers-reduced-motion:reduce){
  .wk-grp .wk-chev,.wk-burger>summary span,.wk-b-pri,.wk-b-out,.wk-menu a{transition:none}
}

/* ═══════════════════════════════════════════════════════════════════
   LE PIED DE PAGE DE LA VITRINE

   Il vient d'ici et non de `wakabi.css`, pour exactement la raison qui
   a mis la barre ici : c'est la seule feuille servie SOUS LES DEUX.

   Le même pied ferme désormais toutes les pages publiques — celles de
   Boost comme celles venues du guide. Tant qu'il vivait dans la feuille
   de Boost, il arrivait sur une page du guide sans une seule de ses
   règles : quatre colonnes de liens nues, empilées sous la page. Le
   défaut ne se voyait que sur ces pages-là, ce qui est la pire des
   façons de le découvrir.

   Les couleurs sont donc écrites EN CLAIR, comme celles de la barre :
   `var(--ink)` n'existe que dans une des deux feuilles, et une variable
   absente rend un fond transparent — un pied de page noir devenu blanc,
   avec son texte blanc dessus, donc illisible.

   La largeur, elle, s'aligne sur celle de la BARRE et non sur celle du
   contenu : le logo du haut et celui du bas partagent alors le même
   bord gauche, ce qui est la première chose que l'oeil vérifie.
   ═══════════════════════════════════════════════════════════════════ */

/* Pas de marge au-dessus : elle se voyait en BLANC.
   Chaque section de page finit déjà sur 48 à 96 px de rembourrage, et ces
   70 px s'y ajoutaient — invisibles sur un fond clair, mais francs dès que
   la dernière section porte sa couleur : une bande blanche entre le bleu
   des témoignages et le pied de page. L'air est maintenant DANS le pied,
   qui en a 70 de son côté. */
.pied-guide{background:#0F172A;color:rgba(255,255,255,.85);
  margin-top:0;padding:70px 24px 28px;border-top:0}
.pg-in{max-width:1200px;margin:0 auto}

/* La marque, puis QUATRE colonnes depuis la fusion : Boost a la sienne.
   Une colonne de plus qu'il n'y a de pistes fait passer la dernière à la
   ligne, seule, et le pied de page paraît cassé sans qu'on sache pourquoi. */
.pg-grille{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:40px;
  margin-bottom:56px}
.pg-grille>*{min-width:0}
/* `width:auto` n'est PAS décoratif : la balise porte maintenant ses
   dimensions réelles (128 px de large), et une hauteur fixée sans lui
   rendre sa largeur aplatit le logo. */
.pg-logo{height:30px;width:auto;margin-bottom:14px;
  /* Le logo est encré sombre : sur fond sombre il faut le retourner. */
  filter:brightness(0) invert(1);opacity:.95}
.pg-accroche{font-size:.875rem;color:rgba(255,255,255,.5);line-height:1.7;
  max-width:280px;margin:0 0 22px}
.pg-reseaux{display:flex;gap:8px}
.pg-soc{width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.08);
  display:inline-flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.6);transition:background .2s,color .2s;text-decoration:none}
.pg-soc:hover{background:rgba(255,255,255,.15);color:#fff}
.pg-col h2{font-family:"Plus Jakarta Sans","Segoe UI",system-ui,sans-serif;
  font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  color:rgba(255,255,255,.4);margin:0 0 16px}
.pg-liens{display:flex;flex-direction:column;gap:9px}
.pg-liens a{font-size:.82rem;color:rgba(255,255,255,.6);text-decoration:none;
  transition:color .2s}
.pg-liens a:hover{color:#fff;text-decoration:underline}
.pg-bas{display:flex;align-items:center;justify-content:space-between;
  padding-top:24px;border-top:1px solid rgba(255,255,255,.08);flex-wrap:wrap;gap:12px}
.pg-copy{font-size:.75rem;color:rgba(255,255,255,.35)}
.pg-legal{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.pg-legal a{font-size:.75rem;color:rgba(255,255,255,.35);text-decoration:none}
.pg-legal a:hover{color:rgba(255,255,255,.7);text-decoration:underline}
.pg-version{font-size:.75rem;color:rgba(255,255,255,.25)}

@media (max-width:900px){
  .pg-grille{grid-template-columns:1fr 1fr;gap:32px}
}
@media (max-width:620px){
  .pied-guide{padding:50px 16px 22px}
}
/* La barre se resserre à 10 px sous 520 : le pied la suit, pour que le
   logo du haut et celui du bas gardent le même bord gauche. */
@media (max-width:520px){
  .pied-guide{padding-left:10px;padding-right:10px}
}
@media (max-width:620px){
  .pg-grille{grid-template-columns:1fr;gap:30px;margin-bottom:34px}
  .pg-accroche{max-width:100%}
  .pg-bas{flex-direction:column;text-align:center;gap:10px}
  .pg-legal{justify-content:center}

  /* Le pied de page est le plan du site sur un téléphone : c'est par
     là qu'on retrouve « Partenaires » ou « CGU » quand le menu est
     refermé. Mesuré : ses liens faisaient 21 px de haut pour 13 px de
     texte — on vise à côté une fois sur trois. On leur donne de la
     hauteur et une taille qui se lit, sans toucher au pied des grands
     écrans, où la souris ne rate pas. */
  .pg-col h2{font-size:.8rem}
  .pg-liens{gap:2px}
  .pg-liens a{font-size:.9rem;padding:8px 0;display:block}
  .pg-legal{gap:6px 18px}
  .pg-legal a{font-size:.8rem;padding:7px 0;display:inline-block}
  .pg-copy,.pg-version{font-size:.8rem}
  /* Le logo du pied est lui aussi un retour à l'accueil. */
  .pied-guide a:has(>.pg-logo){display:inline-block;padding:5px 0}
}