/* Phaedra Juniors Academy : feuille de style du site.
   Chaque règle reprend à l'identique les styles des sources Claude Design
   (info/claude-design/*.dc.html), regroupés par composant.
   Polices hébergées sur le site, préparées par info/outils/polices.py (licence SIL OFL 1.1,
   textes dans assets/fonts/). */

/* ================================================================ polices */

/* Manrope variable : toutes les graisses dans un seul fichier, sous-ensemble latin. */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/assets/fonts/manrope-latin.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;
}

/* Newsreader italique, réservée à la baseline : graisse 400, taille optique de 15 à 20 px. */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/newsreader-italique-latin.woff2') format('woff2');
  unicode-range: U+0020-007E, U+00A0-00FF, U+2019, U+2026;
}

/* ================================================================ couleurs (phaedra-charte/tokens.css) */

:root {
  --pja-azur: #05A5E1;
  --pja-vert: #1FC45B;
  --pja-encre: #16181A;
  --pja-bleu-profond: #036D96;
  --pja-bleu-clair: #63CFF3;
  --pja-bleu-pale: #EDF6FA;
  --pja-noir: #101214;
  --pja-noir-pied: #17191C;
  --pja-gris-fond: #F6F8F9;
  --pja-blanc: #FFFFFF;
  --pja-texte: #545C63;
  --pja-texte-fort: #3F474D;
  --pja-texte-doux: #697176;
  --pja-bordure: #E3E8EB;
  --pja-bordure-bleue: #DCEAF1;
  --pja-filet: #EEF2F4;
  --pja-vert-fonce: #10743A;
  /* Focus clavier : anneau 2 px, décalé de 2 px, sur tous les éléments actionnables */
  --pja-focus-clair: #036D96;
  --pja-focus-sombre: #05A5E1;
  --pja-police: 'Manrope', system-ui, sans-serif;
  --pja-police-baseline: 'Newsreader', Georgia, serif;
}

/* ================================================================ base */

*, *::before, *::after { box-sizing: border-box; }
/* Ancres : la cible s'arrête sous l'en-tête fixe (66 px, filets compris), avec 16 px d'air. */
html { scroll-behavior: smooth; scroll-padding-top: 82px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--pja-gris-fond); color: var(--pja-encre); font-family: var(--pja-police); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
img, svg { display: block; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; }
a { color: var(--pja-bleu-profond); text-decoration: none; }
a:hover { color: var(--pja-azur); }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
[hidden] { display: none !important; }
/* <picture> n'existe pas dans les sources : il s'efface pour que l'image garde sa place,
   et ses <source> ne doivent pas devenir des éléments de grille ou de flex. */
picture { display: contents; }
source { display: none; }

/* Cadrage des photos : object-position des sources, puis choisi dans le code pour les
   photos posées depuis le 6 octobre 2026. */
.pja-pos-50-0 { object-position: 50% 0%; }
.pja-pos-50-15 { object-position: 50% 15%; }
.pja-pos-50-25 { object-position: 50% 25%; }
.pja-pos-50-30 { object-position: 50% 30%; }
.pja-pos-50-34 { object-position: 50% 34%; }
.pja-pos-50-38 { object-position: 50% 38%; }
.pja-pos-50-40 { object-position: 50% 40%; }
.pja-pos-40-50 { object-position: 40% 50%; }
.pja-pos-50-46 { object-position: 50% 46%; }
.pja-pos-50-50 { object-position: 50% 50%; }
.pja-pos-50-52 { object-position: 50% 52%; }
.pja-pos-50-45 { object-position: 50% 45%; }
.pja-pos-50-54 { object-position: 50% 54%; }
.pja-pos-50-55 { object-position: 50% 55%; }
.pja-pos-50-58 { object-position: 50% 58%; }
.pja-pos-50-70 { object-position: 50% 70%; }
.pja-pos-50-72 { object-position: 50% 72%; }
.pja-pos-58-42 { object-position: 58% 42%; }
.pja-pos-62-20 { object-position: 62% 20%; }
.pja-pos-62-46 { object-position: 62% 46%; }
.pja-pos-62-50 { object-position: 62% 50%; }
/* Cadrage propre aux écrans étroits (sous 820 px), en plus de la classe ordinaire, quand le cadre
   n'a pas la même forme sur téléphone et sur ordinateur (Pascal, 8 octobre) : bannière des
   Ateliers (6 octobre 2026), photos de section de Services et de Collectif. */
@media (max-width: 819.98px) {
  .pja-pos-etroit-50-20 { object-position: 50% 20%; }
  .pja-pos-etroit-50-30 { object-position: 50% 30%; }
  .pja-pos-etroit-50-40 { object-position: 50% 40%; }
}

/* ================================================================ lien d'évitement */

/* Hors de l'écran, il descend au premier passage de la touche Tab. */
.pja-evitement { position: fixed; left: 12px; top: -80px; z-index: 200; padding: 12px 18px; border-radius: 8px; background: var(--pja-noir); color: var(--pja-blanc); font-size: 15px; font-weight: 700; text-decoration: none; }
.pja-evitement:focus { top: 12px; outline: 2px solid var(--pja-azur); outline-offset: 2px; color: var(--pja-blanc); }
/* Anneau de focus commun (charte) : bleu profond sur fond clair, azur sur les fonds sombres
   (data-fond="sombre") et dans le pied de page. Les cibles en tabindex="-1" n'en ont pas. */
:focus-visible { outline: 2px solid var(--pja-focus-clair); outline-offset: 2px; }
[data-fond="sombre"] :focus-visible, footer :focus-visible { outline-color: var(--pja-focus-sombre); }
[tabindex="-1"]:focus { outline: none; }

/* ================================================================ en-tête */

.pja-entete { position: sticky; top: 0; z-index: 30; background: var(--pja-blanc); border-top: 3px solid var(--pja-azur); border-bottom: 1px solid var(--pja-bordure); }
.pja-entete-barre { width: min(100%, 120rem); margin: 0 auto; padding: 9px clamp(16px, 3vw, 64px); display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pja-logo { display: flex; flex: 0 0 auto; align-items: center; gap: 10px; text-decoration: none; }
.pja-logo img { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 10px; border: 1px solid var(--pja-bordure); }
.pja-logo-texte { flex: 0 0 auto; line-height: 1.14; white-space: nowrap; }
.pja-logo-nom { display: block; font-size: 13px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--pja-encre); }
.pja-logo-suite { display: block; font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--pja-texte-doux); }

/* Menu sur ordinateur */
.pja-nav { display: flex; flex: 0 1 auto; min-width: 0; flex-wrap: wrap; align-items: center; gap: 8px 15px; margin-left: 16px; }
.pja-nav-lien { display: inline-flex; align-items: center; padding: 3px 0; border-bottom: 2px solid transparent; color: #5A636A; font-size: 13px; font-weight: 600; white-space: nowrap; text-decoration: none; }
.pja-nav-lien[aria-current] { border-bottom-color: var(--pja-azur); color: var(--pja-encre); font-weight: 700; }
.pja-nav-lien:hover { color: var(--pja-encre); border-bottom-color: #C9D4DA; }
.pja-services { position: relative; display: inline-flex; flex: 0 0 auto; align-items: center; gap: 3px; }
.pja-sous-bouton { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex: 0 0 auto; border-radius: 5px; color: #5A636A; }
.pja-sous-bouton:hover { background: var(--pja-bleu-pale); color: var(--pja-bleu-profond); }
.pja-sous-menu { position: absolute; top: 100%; left: -10px; z-index: 40; display: none; flex-direction: column; min-width: 262px; padding: 15px 6px 6px; margin-top: -6px; background: var(--pja-blanc); border: 1px solid var(--pja-bordure); border-top: 2px solid var(--pja-azur); border-radius: 12px; box-shadow: 0 22px 40px -22px rgba(11,11,12,.42); background-clip: padding-box; }
.pja-services.ouvert > .pja-sous-menu,
html:not(.js) .pja-services:hover > .pja-sous-menu,
html:not(.js) .pja-services:focus-within > .pja-sous-menu { display: flex; }
.pja-sous-menu a { display: flex; align-items: center; min-height: 42px; padding: 0 12px; border-radius: 8px; color: var(--pja-texte-fort); font-size: 13.5px; font-weight: 600; line-height: 1.35; text-decoration: none; }
.pja-sous-menu a:hover { background: var(--pja-bleu-pale); color: var(--pja-bleu-profond); }

.pja-cta-entete { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; flex: 0 0 auto; margin-left: auto; padding: 0 16px; border-radius: 999px; background: var(--pja-noir); color: var(--pja-blanc); font-size: 13.5px; font-weight: 700; white-space: nowrap; text-decoration: none; }
.pja-cta-entete:hover { background: var(--pja-azur); color: var(--pja-blanc); }

/* Menu sur mobile : bouton et panneau */
.pja-menu-bouton { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 44px; height: 44px; flex: 0 0 auto; border-radius: 10px; border: 1px solid #DCE3E6; }
.pja-menu-bouton:hover { border-color: var(--pja-azur); }
.pja-menu-bouton span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--pja-encre); }
.pja-menu-bouton span:last-child { width: 12px; background: var(--pja-azur); }
.pja-panneau { background: var(--pja-blanc); box-shadow: 0 18px 30px -20px rgba(11,11,12,.3); }
.pja-panneau-nav { width: min(100%, 120rem); margin: 0 auto; padding: 6px clamp(16px, 4vw, 64px) 14px; display: flex; flex-direction: column; }
.pja-panneau-lien { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 0; border-bottom: 1px solid var(--pja-filet); color: var(--pja-texte-fort); font-size: 15px; font-weight: 600; text-decoration: none; }
.pja-panneau-lien:last-child { border-bottom: 0; }
/* Entrée active : soulignée comme sur ordinateur ; le petit tiret reste réservé à la baseline. */
.pja-panneau-lien[aria-current] { color: var(--pja-encre); font-weight: 800; text-decoration: underline; text-decoration-color: var(--pja-azur); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.pja-panneau-lien:hover { color: var(--pja-bleu-profond); }
.pja-panneau-services { display: flex; flex-direction: column; border-bottom: 1px solid var(--pja-filet); }
.pja-panneau-bouton { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 6px 0 12px; color: #5A636A; font-size: 13.5px; font-weight: 700; text-align: left; }
.pja-panneau-sous { display: flex; flex-direction: column; gap: 2px; padding: 0 0 12px 14px; border-left: 2px solid var(--pja-bordure); }
.pja-panneau-sous a { display: flex; align-items: center; min-height: 46px; padding: 0 10px; border-radius: 8px; color: var(--pja-texte-fort); font-size: 14.5px; font-weight: 600; line-height: 1.35; text-decoration: none; }
.pja-panneau-sous a:hover { background: #F1F4F5; color: var(--pja-bleu-profond); }
/* Avec JavaScript, panneau et liste des services restent fermés jusqu'à l'appui. */
html.js .pja-panneau:not(.ouvert),
html.js .pja-panneau-sous:not(.ouvert),
html:not(.js) .pja-menu-bouton { display: none; }

@media (min-width: 820px) {
  .pja-menu-bouton, .pja-panneau { display: none; }
}
@media (max-width: 819.98px) {
  .pja-nav { display: none; }
  /* Logo, bouton et menu sur une seule ligne : faute de place, le nom passe sur trois
     lignes, dans la hauteur du logo (« Le formulaire » de Contact et Merci est plus long
     que « Contact »). Essayé de 320 à 430 px, barre de 62 px partout. */
  .pja-entete-barre { flex-wrap: nowrap; }
  .pja-logo { flex: 0 1 auto; min-width: 0; }
  .pja-logo-texte { flex: 0 1 auto; min-width: 0; white-space: normal; }
}
@media (max-width: 359.98px) {
  .pja-entete-barre, .pja-logo { gap: 8px; }
  .pja-cta-entete { padding: 0 12px; }
}

/* ================================================================ mise en page commune */

.pja-conteneur { width: min(100%, 120rem); margin: 0 auto; padding: 0 clamp(16px, 4vw, 64px); }
.pja-section { padding: clamp(24px, 3vw, 40px) 0; }
.pja-fond-blanc { background: var(--pja-blanc); }
.pja-fond-gris { background: var(--pja-gris-fond); }
.pja-chapeau { max-width: 68rem; }
.pja-duo-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); gap: clamp(24px, 3vw, 48px); align-items: center; }
/* Photo avant le texte, à gauche sur ordinateur (alternance des photos, Pascal, 8 octobre). */
.pja-duo-photo-gauche > picture > img, .pja-duo-photo-gauche > img { order: -1; }

/* Titres de section */
.pja-h2 { font-family: var(--pja-police); font-weight: 700; font-size: clamp(27px, 3.8vw, 44px); line-height: 1.1; letter-spacing: -.015em; color: var(--pja-encre); margin: 0 0 14px; text-wrap: pretty; }
.pja-h2-grand { font-size: clamp(28px, 4vw, 46px); }
.pja-h2-histoire { font-size: clamp(26px, 3.4vw, 40px); line-height: 1.12; }
.pja-texte-intro { font-size: clamp(15px, 1.4vw, 17px); line-height: 1.68; color: var(--pja-texte); text-wrap: pretty; max-width: 68rem; }

/* Liens */
.pja-lien-texte { color: var(--pja-bleu-profond); text-decoration: underline; text-decoration-color: #A8B4BB; text-underline-offset: 2px; }
.pja-lien-texte:hover { color: var(--pja-azur); }
.pja-lien-fleche { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: auto; padding-top: 12px; font-size: 14px; font-weight: 700; text-decoration: none; }
.pja-lien-suite { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; color: var(--pja-bleu-profond); font-size: 15px; font-weight: 700; text-decoration: none; }
.pja-lien-suite:hover { color: var(--pja-azur); }
.pja-lien-suite-tarifs { margin-top: 6px; }

/* Boutons */
.pja-boutons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
/* Boutons côte à côte qui passent l'un sous l'autre : même longueur (Pascal, 14 octobre). Le groupe
   prend la largeur de ses boutons ; à l'étroit, toute la largeur, et chaque bouton s'allonge jusqu'au
   bout de sa ligne. Sur une seule ligne, rien ne change. */
.pja-boutons, .pja-boutons-accroche, .pja-recu-boutons { width: fit-content; max-width: 100%; }
:is(.pja-boutons, .pja-boutons-accroche, .pja-recu-boutons) > * { flex-grow: 1; }
.pja-bouton-principal { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px; border-radius: 8px; background: var(--pja-bleu-profond); color: var(--pja-blanc); font-size: 16px; font-weight: 700; text-decoration: none; }
.pja-bouton-principal:hover { background: var(--pja-azur); color: var(--pja-blanc); }
.pja-bouton-secondaire { display: inline-flex; align-items: center; gap: 10px; justify-content: center; min-height: 52px; padding: 0 22px; border-radius: 8px; border: 1px solid #C2D8E3; color: var(--pja-encre); font-size: 16px; font-weight: 600; text-decoration: none; }
/* Survol de tous les boutons d'action : azur plein, texte blanc (choix de Pascal du 7 octobre pour
   l'accueil, étendu à tout le site le 8 octobre). */
.pja-bouton-secondaire:hover { border-color: var(--pja-azur); background: var(--pja-azur); color: var(--pja-blanc); }
.pja-bouton-secondaire svg { flex: 0 0 auto; }

/* Photos de section */
.pja-photo-section { width: 100%; height: clamp(220px, 26vw, 320px); border-radius: 14px; display: block; object-fit: cover; }

/* Signature : petit tiret azur et baseline */
.pja-signature { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--pja-filet); }
.pja-tiret { display: block; width: 28px; height: 3px; flex: 0 0 auto; border-radius: 2px; background: var(--pja-azur); }
.pja-baseline { font-family: var(--pja-police-baseline); font-style: italic; font-size: clamp(15px, 1.5vw, 18px); line-height: 1.5; color: var(--pja-bleu-profond); }

/* ================================================================ accueil */

/* Bannière */
/* Essai du 7 octobre (Pascal) : texte centré verticalement dans le bandeau, au lieu d'être posé
   en bas, avec des marges égales en haut et en bas. */
.pja-accroche { position: relative; min-height: clamp(540px, 76vh, 780px); display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.pja-accroche-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Essai du 7 octobre (Pascal) : voile de gauche à droite, foncé sous la colonne de texte
   (68 rem après la marge, soit 72 rem depuis le bord du conteneur centré), puis plus léger
   jusqu'au bord droit. Départ à 70 % (Pascal), les paliers suivants baissés dans la même
   proportion, bord droit inchangé. Ancien voile : de bas en haut, de 95 % à 42 %. */
.pja-accroche-voile { --pja-accroche-bord: max(0px, (100% - 120rem) / 2); position: absolute; inset: 0; background: linear-gradient(90deg, rgba(9,10,11,.7) 0%, rgba(9,10,11,.64) calc(var(--pja-accroche-bord) + 40rem), rgba(9,10,11,.47) calc(var(--pja-accroche-bord) + 72rem), rgba(9,10,11,.2) 100%); }/* Essai du 7 octobre (Pascal) : sous 820 px, léger bord sombre autour du paragraphe et de la
   baseline (pas de la pastille, du titre ni des boutons), voile inchangé. */
@media (max-width: 819.98px) { .pja-accroche :is(.pja-accroche-texte, .pja-baseline-banniere) { text-shadow: 0 0 1px rgba(9,10,11,.95), 0 0 3px rgba(9,10,11,.8), 0 0 6px rgba(9,10,11,.5); } }
.pja-accroche-contenu { position: relative; width: min(100%, 120rem); margin: 0 auto; padding: clamp(28px, 4vw, 52px) clamp(16px, 4vw, 64px); }
.pja-accroche-colonne { max-width: 68rem; display: flex; flex-direction: column; gap: 15px; }
.pja-pastille-sombre { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0 8px; width: fit-content; padding: 7px 13px; border-radius: 999px; background: rgba(9,10,11,.62); font-size: clamp(12px, 1.15vw, 13.5px); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--pja-blanc); }
.pja-h1-accueil { font-family: var(--pja-police); font-weight: 800; font-size: clamp(35px, 5.4vw, 62px); line-height: 1.05; letter-spacing: -.02em; color: #FBFCFC; text-wrap: pretty; }
.pja-accroche-texte { font-size: clamp(15px, 1.5vw, 19px); line-height: 1.62; color: #FBFCFC; max-width: 68rem; text-wrap: pretty; }
.pja-baseline-banniere { display: flex; align-items: center; gap: 12px; font-family: var(--pja-police-baseline); font-style: italic; font-size: clamp(15px, 1.7vw, 20px); color: var(--pja-bleu-clair); }
.pja-tiret-banniere { display: block; width: 34px; height: 3px; border-radius: 2px; background: var(--pja-azur); flex: 0 0 auto; }
.pja-boutons-accroche { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.pja-bouton-clair { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px; border-radius: 8px; background: var(--pja-blanc); color: var(--pja-noir); font-size: 16px; font-weight: 700; text-decoration: none; }
.pja-bouton-clair:hover { background: var(--pja-azur); color: var(--pja-blanc); }
.pja-bouton-contour-clair { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 22px; border-radius: 8px; border: 1px solid rgba(251,252,252,.5); color: #FBFCFC; font-size: 16px; font-weight: 600; text-decoration: none; }
/* Même survol que le bouton voisin (Pascal, 7 octobre) : le voile blanc à 12 % ne se voyait pas sur la photo. */
.pja-bouton-contour-clair:hover { border-color: var(--pja-azur); background: var(--pja-azur); color: var(--pja-blanc); }

/* Repères sous la bannière (4 colonnes à partir de 1024 px, 2 à partir de 640 px) */
.pja-reperes { background: var(--pja-noir); border-bottom: 3px solid var(--pja-azur); }
.pja-reperes-conteneur { width: min(100%, 120rem); margin: 0 auto; }
.pja-reperes-grille { display: grid; gap: 1px; background: rgba(232,238,241,.16); grid-template-columns: repeat(1, 1fr); }
@media (min-width: 640px) { .pja-reperes-grille { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .pja-reperes-grille { grid-template-columns: repeat(4, 1fr); } }
.pja-repere { display: flex; flex-direction: column; align-items: center; padding: clamp(16px, 2.2vw, 26px) clamp(10px, 1.4vw, 16px); background: var(--pja-noir); text-align: center; }
.pja-repere-titre { font-family: var(--pja-police); font-weight: 700; font-size: clamp(21px, 2.6vw, 32px); line-height: 1.12; color: #FBFCFC; }
.pja-repere-legende { font-size: clamp(9.5px, .92vw, 11.5px); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #8FA8B4; margin-top: 6px; line-height: 1.45; text-wrap: pretty; }

/* Méthode */
/* Titre et paragraphe sur toute la largeur, les quatre points dessous : une colonne sur téléphone,
   deux dès 700 px, une rangée de quatre dès 1100 px, filet au-dessus de chaque point (Pascal,
   9 octobre : à côté des points, la colonne du titre restait à moitié vide). */
.pja-methode-grille { display: flex; flex-direction: column; gap: clamp(12px, 1.8vw, 22px); }
.pja-points { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: clamp(26px, 3.5vw, 56px); }
.pja-point { display: flex; gap: 13px; padding: 15px 0; border-bottom: 1px solid var(--pja-filet); }
.pja-point:last-child { border-bottom: 0; }
@media (min-width: 700px) {
  .pja-points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pja-point:nth-last-child(2) { border-bottom: 0; }
}
@media (min-width: 1100px) {
  .pja-points { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pja-point, .pja-point:nth-last-child(2) { border-bottom: 0; border-top: 1px solid var(--pja-filet); }
}
.pja-point-coche { flex: 0 0 auto; margin-top: 2px; }
.pja-point p { font-size: 15px; line-height: 1.55; color: #24282B; }
.pja-point strong { font-weight: 800; }

/* Cinq manières : grille 2 + 3 */
.pja-propose { display: grid; grid-template-columns: 1fr; gap: clamp(18px, 2.2vw, 28px); margin-top: clamp(28px, 4vw, 48px); }
@media (min-width: 640px) { .pja-propose { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Deux colonnes : la cinquième carte, seule sur sa ligne, en prend toute la largeur (Pascal, 14 octobre). */
@media (min-width: 640px) and (max-width: 1023.98px) { .pja-propose > article:nth-child(5):last-child { grid-column: 1 / -1; } }
@media (min-width: 1024px) {
  .pja-propose { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .pja-propose > article:nth-child(1), .pja-propose > article:nth-child(2) { grid-column: span 3; }
  .pja-propose > article:nth-child(3), .pja-propose > article:nth-child(4), .pja-propose > article:nth-child(5) { grid-column: span 2; }
}
.pja-carte { display: flex; flex-direction: column; background: var(--pja-gris-fond); border: 1px solid var(--pja-bordure); border-radius: 14px; overflow: hidden; }
.pja-carte-photo { width: 100%; height: clamp(180px, 20vw, 232px); display: block; object-fit: cover; }
.pja-carte-corps { display: flex; flex-direction: column; flex: 1 1 auto; padding: 18px 20px 22px; }
.pja-carte-titre { font-family: var(--pja-police); font-weight: 700; letter-spacing: -.01em; font-size: clamp(21px, 2.1vw, 26px); line-height: 1.2; color: var(--pja-encre); }
.pja-carte-texte { font-size: 14.5px; line-height: 1.65; color: var(--pja-texte); margin-top: 8px; text-wrap: pretty; max-width: 68rem; }

/* Ils m'ont fait confiance : titre, puis liens vers Facebook et les avis Google */
.pja-avis { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 40px; }
/* Résumés d'avis (Pascal, 8 octobre) : sans guillemets, ce ne sont pas des citations. Carrousel
   sur tous les écrans : quatre côte à côte sur ordinateur, deux rangées de deux sur tablette, un
   seul sur téléphone (Pascal, 9 octobre : quatre l'un sous l'autre, c'était trop), le début du
   suivant dépasse ; défilement au doigt, à la barre ou au clavier (liste focalisable), arrêt sur
   chaque colonne. */
.pja-temoignages { --pja-ecart-avis: 14px; flex: 1 0 100%; list-style: none; margin: 4px 0 6px; padding: 0 0 12px; display: grid; gap: var(--pja-ecart-avis);
  grid-auto-flow: column; grid-template-rows: auto; grid-auto-columns: 86%; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--pja-azur) transparent; border-radius: 12px; }
.pja-temoignage { scroll-snap-align: start; padding: 16px 18px; background: var(--pja-blanc); border: 1px solid var(--pja-bordure); border-radius: 12px; font-size: 15px; line-height: 1.55; font-weight: 500; color: var(--pja-encre); text-wrap: pretty; }
@media (min-width: 640px) { .pja-temoignages { grid-template-rows: repeat(2, auto); grid-auto-columns: calc((100% - var(--pja-ecart-avis)) / 2.15); } }
@media (min-width: 1100px) { .pja-temoignages { grid-template-rows: auto; grid-auto-columns: calc((100% - 4 * var(--pja-ecart-avis)) / 4.25); } }
/* Avec JavaScript, les flèches remplacent la barre de défilement, masquée (Pascal, 9 octobre) ;
   sans JavaScript, elle reste le moyen de faire défiler à la souris. */
.js .pja-temoignages { padding-bottom: 0; scrollbar-width: none; }
.js .pja-temoignages::-webkit-scrollbar { display: none; }
/* Flèches et pause, affichées par assets/js/temoignages.js (Pascal, 8 octobre) : petits boutons
   ronds, survol discret comme les autres boutons-icônes. */
.pja-temoignages-boutons { display: flex; gap: 8px; margin-left: auto; align-self: center; }
.pja-avis-bouton { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 999px; border: 1px solid #DCE3E6; background: var(--pja-blanc); color: var(--pja-encre); }
.pja-avis-bouton:hover { border-color: var(--pja-azur); color: var(--pja-bleu-profond); }
.pja-avis-bouton[aria-pressed="true"] .pja-icone-pause, .pja-avis-bouton[aria-pressed="false"] .pja-icone-lecture { display: none; }
.pja-avis-liens { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; font-size: 15px; line-height: 1.6; color: var(--pja-texte); }
.pja-avis-liens p { text-wrap: pretty; max-width: 68rem; }
/* Zone cliquable portée à 44 px de haut dans l'espace libre, sans rien déplacer (chantier 11) */

/* Tarifs */
/* Deux mentions, pas des boutons (Pascal, 8 octobre : les pavés pleins vert et noir ressemblaient
   trop à des boutons) : icône dans une pastille pâle, texte en gras, sans fond. Même forme pour
   « Première séance offerte » de Tarifs (Pascal, 9 octobre) et « Au centre du triangle Waterloo,
   Nivelles, Charleroi » de l'accueil, qui était une pastille bleu pâle (Pascal, 14 octobre). */
.pja-badges { display: flex; flex-wrap: wrap; gap: 12px 30px; margin-top: 22px; }
.pja-badge { display: flex; align-items: center; gap: 11px; }
.pja-badge svg { flex: 0 0 auto; box-sizing: content-box; padding: 7px; border-radius: 50%; }
.pja-badge span { font-size: 15px; font-weight: 700; color: var(--pja-encre); }
.pja-badge-vert svg { background: #E3F6EA; stroke: var(--pja-vert-fonce); }
.pja-badge-sombre svg { background: var(--pja-bleu-pale); stroke: var(--pja-bleu-profond); }
.pja-tarifs6 { display: grid; grid-template-columns: 1fr; align-items: stretch; gap: clamp(16px, 2vw, 24px); margin-top: clamp(24px, 3vw, 36px); }
@media (min-width: 700px) { .pja-tarifs6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .pja-tarifs6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pja-tarif { display: flex; flex-direction: column; height: 100%; background: var(--pja-blanc); border: 1px solid var(--pja-bordure); border-radius: 14px; padding: 18px 20px 20px; }
.pja-tarif-premium { border-color: var(--pja-bordure-bleue); }
.pja-tarif-etiquette { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--pja-bleu-profond); }
.pja-tarif-titre { font-family: var(--pja-police); font-weight: 700; letter-spacing: -.01em; font-size: 21px; line-height: 1.2; color: var(--pja-encre); text-wrap: pretty; }
.pja-prix-ligne { display: flex; align-items: baseline; gap: 8px; margin-top: 10px; }
.pja-prix { font-family: var(--pja-police); font-size: 30px; font-weight: 800; letter-spacing: -.02em; color: var(--pja-encre); }
.pja-prix-note { font-size: 13px; color: var(--pja-texte-doux); }
.pja-tarif-texte { font-size: 13.5px; line-height: 1.6; color: var(--pja-texte); margin-top: 8px; max-width: 68rem; text-wrap: pretty; }
.pja-tarifs-devis { margin-top: clamp(16px, 2vw, 24px); font-size: 14.5px; line-height: 1.6; color: #24282B; max-width: 68rem; text-wrap: pretty; }
.pja-tarifs-note { margin-top: 14px; font-size: 14px; line-height: 1.6; color: var(--pja-texte); max-width: 68rem; text-wrap: pretty; }

/* Zone de déplacement */

/* Invitation et Afterwouf */
.pja-bas-accueil { background: var(--pja-blanc); border-bottom: 3px solid var(--pja-vert); }
.pja-bas-conteneur { width: min(100%, 120rem); margin: 0 auto; padding: clamp(24px, 3vw, 40px) clamp(16px, 4vw, 64px); }
.pja-basbas { display: grid; grid-template-columns: 1fr; gap: clamp(20px, 2.6vw, 34px); align-items: stretch; }
@media (min-width: 1000px) { .pja-basbas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pja-invitation { display: flex; flex-direction: column; height: 100%; padding: clamp(28px, 3.6vw, 52px) clamp(22px, 3.4vw, 52px); background: var(--pja-blanc); border: 1px solid var(--pja-bordure-bleue); border-radius: 16px; }
.pja-h2-invitation { font-family: var(--pja-police); font-weight: 700; font-size: clamp(25px, 3vw, 38px); line-height: 1.1; letter-spacing: -.015em; color: var(--pja-encre); text-wrap: pretty; }
.pja-invitation-texte { font-size: clamp(15px, 1.4vw, 17.5px); line-height: 1.68; color: #4C575E; margin-top: 14px; max-width: 46rem; text-wrap: pretty; }
.pja-carte-afterwouf { display: flex; flex-direction: column; height: 100%; background: var(--pja-blanc); border: 1px solid #D6EEDF; border-radius: 16px; overflow: hidden; }
.pja-afterwouf-photo { width: 100%; height: clamp(150px, 16vw, 200px); display: block; object-fit: cover; }
.pja-afterwouf-corps { display: flex; flex-direction: column; flex: 1 1 auto; padding: clamp(22px, 2.8vw, 36px) clamp(22px, 3.4vw, 44px) clamp(24px, 3vw, 40px); }
.pja-h2-afterwouf { font-family: var(--pja-police); font-weight: 700; font-size: clamp(23px, 2.7vw, 33px); line-height: 1.12; letter-spacing: -.015em; color: var(--pja-encre); margin-top: 0; text-wrap: pretty; }
.pja-accroche-bleue { font-family: var(--pja-police); font-weight: 600; font-style: normal; font-size: clamp(15px, 1.5vw, 18px); line-height: 1.5; color: var(--pja-bleu-profond); margin-top: 10px; text-wrap: pretty; }
.pja-afterwouf-texte { font-size: clamp(14.5px, 1.35vw, 16.5px); line-height: 1.66; color: #4C575E; margin-top: 12px; text-wrap: pretty; }
/* Accueil sur téléphone, sous 820 px (essai de Pascal du 14 octobre) : la page de détail explique,
   l'accueil annonce. Masqués : le paragraphe du bandeau, l'introduction et le texte des cinq
   cartes (l'introduction redit ce que les cartes annoncent), le texte des
   tarifs, la phrase sur le module sur devis et la note sur les déplacements (détaillés sur
   Tarifs), la section des avis, la carte
   Afterwouf (présentée sur Collectif). Photos des cartes moins hautes. Le texte reste dans la page. */
@media (max-width: 819.98px) {
  .pja-accroche-texte, #prestations .pja-texte-intro, .pja-carte-texte, .pja-tarif-texte, .pja-tarifs-devis, .pja-tarifs-note, .pja-section-avis, .pja-carte-afterwouf { display: none; }
  /* Bandeau moins haut, puisque son paragraphe est masqué (Pascal, 14 octobre). */
  .pja-accroche { min-height: clamp(420px, 56vh, 560px); }
  /* Contenu aéré (Pascal, 14 octobre) : la pastille en haut, les boutons en bas, le titre et la
     baseline au milieu. */
  .pja-accroche-contenu { flex: 1 1 auto; display: flex; flex-direction: column; }
  .pja-accroche-colonne { flex: 1 1 auto; }
  .pja-accroche .pja-pastille-sombre { margin-bottom: auto; }
  .pja-accroche .pja-boutons-accroche { margin-top: auto; }
  /* Voile plus léger (Pascal, 14 octobre) : sur cette largeur, le dégradé ne quittait pas sa
     première partie, de 70 à 66 %. À 60 %, la baseline garde 5:1 sur les pixels les plus clairs
     (4,45:1 à 55 %, sous le seuil de 4,5:1). */
  .pja-accroche-voile { background: rgba(9,10,11,.6); }
  .pja-carte-photo { height: 130px; }
  /* Photo montrée en entière (chiot endormi, Pascal, 14 octobre) : le cadre de 220 px de haut, plus
     allongé que la photo, coupait le bout des oreilles. */
  .pja-photo-entiere-etroite { height: auto; aspect-ratio: 3 / 2; }
  /* Sans la bande grise des avis, les cartes et les tarifs, tous deux sur fond blanc, se suivent. */
  #tarifs { border-top: 1px solid var(--pja-filet); }
}

/* ================================================================ bannière des pages intérieures */

/* Bandeaux de haut de page, sous le menu, sauf celui de l'accueil (décisions de Pascal des 6 et
   7 octobre) : même structure et même hauteur partout, pages légales comprises. Une première
   ligne (la baseline, ou sa place vide), puis le titre et le sous-titre, aux mêmes police et taille
   sur toutes les pages. Chaque élément réserve la place du plus long des bandeaux, en lignes
   (--pja-lignes-…, réglées par largeur d'écran plus bas) : la hauteur ne dépend pas du texte.
   - Sous 1024 px, comme l'accueil : photo en fond, voile de gauche à droite partant de 70 %,
     texte centré verticalement. Hauteur d'au moins 45 % de la largeur, pour que la photo ne
     devienne pas une bande sur tablette ; sur téléphone, le texte suffit à la rendre presque
     carrée.
   - Dès 1024 px : texte sur fond noir uni, photo entière à sa droite, sans voile, aucun texte
     n'étant posé sur la photo. Une photo prise en largeur s'y lit, au format 2:1 à 4:1. */
.pja-banniere { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 45vw; background: var(--pja-noir); border-bottom: 3px solid var(--pja-azur); overflow: hidden; }
.pja-banniere-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pja-banniere-voile { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(9,10,11,.7) 0%, rgba(9,10,11,.64) 40rem, rgba(9,10,11,.47) 72rem, rgba(9,10,11,.2) 100%); }
.pja-banniere-contenu { --pja-lignes-haut: 1; --pja-lignes-titre: 1; --pja-lignes-chapeau: 2; position: relative; width: min(100%, 120rem); margin: 0 auto; padding: clamp(24px, 3vw, 40px) clamp(16px, 4vw, 64px) clamp(28px, 3.6vw, 44px); }
/* Première ligne : la baseline, sur une hauteur de ligne fixe. Plus aucun fil d'Ariane visible
   (Pascal, 8 octobre) ; le BreadcrumbList des données structurées reste. */
.pja-banniere-contenu > :first-child { line-height: 28px; min-height: calc(var(--pja-lignes-haut) * 28px); }
/* Sans première ligne (pages de Services & activités, fil d'Ariane retiré le 8 octobre, non
   remplacé) : sa place reste vide, pour que le titre et la hauteur soient ceux des autres. */
.pja-banniere-contenu > .pja-h1-titre:first-child { line-height: 1.06; min-height: calc(var(--pja-lignes-titre) * 1.06em); margin-top: calc(var(--pja-lignes-haut) * 28px + 16px); }
.pja-h1-titre { font-family: var(--pja-police); font-weight: 800; letter-spacing: -.02em; font-size: clamp(32px, 4.7vw, 58px); line-height: 1.06; color: #FBFCFC; margin-top: 16px; text-wrap: pretty; min-height: calc(var(--pja-lignes-titre) * 1.06em); }
.pja-titre-chapeau { font-size: clamp(15px, 1.5vw, 19px); line-height: 1.6; color: #FBFCFC; margin-top: 14px; max-width: 68rem; text-wrap: pretty; min-height: calc(var(--pja-lignes-chapeau) * 1.6em); }
/* Lignes à réserver sous 834 px : le plus long des onze bandeaux, mesuré tous les 2 px de 320
   à 2560 px (6 octobre 2026, info/outils/mesurer-bandeaux.mjs). À remesurer si un titre, un
   sous-titre ou un fil d'Ariane change. */
@media (max-width: 833.98px) { .pja-banniere-contenu { --pja-lignes-chapeau: 3; } }
@media (max-width: 657.98px) { .pja-banniere-contenu { --pja-lignes-titre: 2; } }
@media (max-width: 595.98px) { .pja-banniere-contenu { --pja-lignes-chapeau: 4; } }
@media (max-width: 513.98px) { .pja-banniere-contenu { --pja-lignes-haut: 2; } }
@media (max-width: 417.98px) { .pja-banniere-contenu { --pja-lignes-chapeau: 5; } }
@media (max-width: 381.98px) { .pja-banniere-contenu { --pja-lignes-titre: 3; } }
@media (max-width: 349.98px) { .pja-banniere-contenu { --pja-lignes-chapeau: 6; } }
/* Sur la photo, sous 1024 px : léger bord sombre autour de la baseline et du sous-titre, comme
   à l'accueil (la baseline restait à 4,3:1 sur les petits téléphones). */
/* Sur téléphone, le même voile que l'accueil, uniforme à 60 % (Pascal, 14 octobre) : sur cette largeur,
   le dégradé ne quittait pas sa première partie, de 70 à 64 %. Services à 64 % : sur sa photo plus
   claire, la baseline tombe à 4,0:1 à 60 % (seuil 4,5:1), 4,53:1 à 64 %. */
@media (max-width: 819.98px) {
  .pja-banniere-voile { background: rgba(9,10,11,.6); }
  .p-services .pja-banniere-voile { background: rgba(9,10,11,.64); }
}
@media (max-width: 1023.98px) { .pja-banniere :is(.pja-baseline-banniere, .pja-titre-chapeau) { text-shadow: 0 0 1px rgba(9,10,11,.95), 0 0 3px rgba(9,10,11,.8), 0 0 6px rgba(9,10,11,.5); } }

@media (min-width: 1024px) {
  /* Colonne de texte : ce qu'exigent le plus long des titres sur une ligne (18,95 fois sa taille)
     et un sous-titre de 182 signes sur trois lignes (plafond des sous-titres, l'ancien de
     Services : 81,6 em, soit 30,5 fois sa taille, marge des coupures comprise), moins 100 px au
     profit de la photo (Pascal, 7 octobre). Les sous-titres du 8 octobre (119 signes au plus)
     en prennent deux : la troisième ligne reste réservée, elle aère (Pascal, 8 octobre). La
     photo prend le reste, 60 rem (960 px) au plus, atteints vers 1844 px de large (Pascal,
     8 octobre), avec un fondu vers le noir sur son bord gauche. */
  .pja-banniere { min-height: 0; --pja-titre-bandeau: clamp(28px, calc(3vw - 2px), 46px);
    --pja-texte-bandeau: calc(max(calc(18.95 * var(--pja-titre-bandeau)), calc(30.5 * clamp(15px, 1.5vw, 19px))) - 100px);
    --pja-photo-gauche: max(calc(max(0px, (100% - 120rem) / 2) + clamp(16px, 4vw, 64px) + var(--pja-texte-bandeau) + 48px), calc(100% - 60rem)); }
  /* Largeur explicite : une image positionnée ne s'étire pas entre left et right. */
  .pja-banniere-photo { left: var(--pja-photo-gauche); width: calc(100% - var(--pja-photo-gauche));
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%); mask-image: linear-gradient(90deg, transparent, #000 22%); }
  .pja-banniere-voile { display: none; }
  .pja-banniere .pja-banniere-contenu { --pja-lignes-chapeau: 3; }
  .pja-banniere-contenu > * { max-width: var(--pja-texte-bandeau); }
  .pja-banniere .pja-h1-titre { font-size: var(--pja-titre-bandeau); }
}

/* ================================================================ services */

/* Photo et texte côte à côte à partir de 1000 px ; la photo passe au-dessus en dessous. */
.pja-sec-duo { display: grid; grid-template-columns: 1fr; gap: clamp(20px, 2.6vw, 34px); align-items: center; }
.pja-sec-media { position: relative; order: -1; align-self: stretch; width: 100%; height: clamp(240px, 52vw, 360px); border-radius: 16px; overflow: hidden; }
.pja-sec-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 1000px) {
  .pja-sec-duo { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); }
  .pja-sec-media { order: 0; height: 100%; }
  .pja-sec-duo-droite { grid-template-columns: minmax(0, 1.22fr) minmax(0, .78fr); }
  .pja-sec-duo-droite > .pja-sec-media { order: 2; }
  /* Section au texte court : la photo garde une hauteur minimale, pour un meilleur cadrage
     (« Pas de calendrier fixe », Les ateliers, Pascal, 8 octobre). */
  .pja-sec-media-haute { min-height: clamp(260px, 21vw, 340px); }
}
.pja-h2-sec { font-family: var(--pja-police); font-weight: 700; font-size: clamp(26px, 3.6vw, 42px); line-height: 1.1; letter-spacing: -.015em; color: var(--pja-encre); margin: 0; text-wrap: pretty; }
.pja-liste-sec { display: flex; flex-direction: column; gap: 10px; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--pja-filet); list-style: none; }
.pja-liste-sec li { display: flex; gap: 11px; font-size: 14.5px; line-height: 1.6; color: var(--pja-texte-fort); }
.pja-liste-sec strong { font-weight: 800; color: var(--pja-encre); }
.pja-point-liste { display: block; width: 6px; height: 6px; flex: 0 0 auto; margin-top: 9px; border-radius: 999px; background: var(--pja-azur); }
.pja-point-liste-haut { margin-top: 8px; }
.pja-liens-sec { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.pja-lien-sec { display: inline-flex; align-items: center; gap: 9px; min-height: 48px; margin-top: 20px; font-size: 15px; font-weight: 700; text-decoration: none; }
.pja-lien-sec-serre { min-height: 44px; margin-top: 6px; }
.pja-note-sec { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--pja-filet); font-size: 14.5px; line-height: 1.6; color: var(--pja-texte-fort); text-wrap: pretty; max-width: 68rem; }

/* Invitation : photo à côté à partir de 1000 px (à droite avec -droite), au-dessus en dessous. */
.pja-bas-vert { border-bottom: 3px solid var(--pja-vert); }
.pja-duo-invit { display: grid; grid-template-columns: 1fr; gap: clamp(20px, 2.6vw, 34px); align-items: stretch; }
.pja-duo-invit > picture > img, .pja-duo-invit > img { order: -1; }
@media (min-width: 1000px) {
  .pja-duo-invit { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); }
  .pja-duo-invit > picture > img, .pja-duo-invit > img { order: 0; }
  .pja-duo-invit-droite { grid-template-columns: minmax(0, 1.22fr) minmax(0, .78fr); }
  .pja-duo-invit-droite > picture > img, .pja-duo-invit-droite > img { order: 2; }
}
.pja-invit-photo { width: 100%; align-self: stretch; height: auto; min-height: clamp(190px, 18vw, 240px); max-height: clamp(220px, 34vw, 420px); border-radius: 16px; display: block; object-fit: cover; }
.pja-invit-carte { display: flex; flex-direction: column; height: 100%; padding: clamp(28px, 3.6vw, 52px) clamp(22px, 3.4vw, 52px); background: var(--pja-gris-fond); border: 1px solid var(--pja-bordure-bleue); border-radius: 16px; }

/* ================================================================ pages de module (éducation, comportement) */

.pja-section-grise { background: var(--pja-gris-fond); border-top: 1px solid var(--pja-filet); }
.pja-largeur-90 { max-width: 90rem; }

/* Déroulé en étapes numérotées */
.pja-etapes { margin: clamp(20px, 2.6vw, 30px) 0 0; padding: 0; }
.pja-etape { display: flex; gap: 16px; padding: 20px 0; border-top: 1px solid var(--pja-filet); list-style: none; }
.pja-etape-numero { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: 0 0 auto; border-radius: 999px; background: var(--pja-bleu-pale); color: var(--pja-bleu-profond); font-family: var(--pja-police); font-size: 17px; font-weight: 800; }
.pja-etape-corps { flex: 1 1 auto; }
.pja-h3-etape { font-size: 16.5px; font-weight: 800; line-height: 1.35; color: var(--pja-encre); }
.pja-etape-texte { font-size: 14.5px; line-height: 1.65; color: var(--pja-texte); margin-top: 6px; text-wrap: pretty; max-width: 68rem; }

/* Liste cochée */
.pja-acquis { margin: clamp(20px, 2.6vw, 30px) 0 0; padding: 0; }
.pja-acquis li { display: flex; gap: 12px; padding: 14px 0; border-top: 1px solid var(--pja-bordure); list-style: none; }
.pja-acquis svg { flex: 0 0 auto; margin-top: 3px; }
.pja-acquis span { flex: 1 1 auto; font-size: 15px; line-height: 1.6; color: #24282B; text-wrap: pretty; }

/* Pour qui, et pour qui pas */
.pja-pour-qui { display: grid; grid-template-columns: 1fr; gap: clamp(18px, 2.2vw, 26px); margin-top: clamp(22px, 2.8vw, 32px); }
/* Deux colonnes dès 652 px, où la grille les prenait d'elle-même (Pascal, 14 octobre) : la carte « Ce n'est
   pas pour vous si » ne se replie qu'en dessous, quand les cartes sont l'une sous l'autre. */
@media (min-width: 652px) { .pja-pour-qui { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pja-pour-qui-carte { padding: clamp(20px, 2.4vw, 26px); background: var(--pja-gris-fond); border: 1px solid var(--pja-bordure); border-radius: 14px; }
.pja-h3-pour-qui { display: flex; align-items: center; gap: 10px; font-family: var(--pja-police); font-weight: 700; letter-spacing: -.01em; font-size: clamp(20px, 2.1vw, 25px); line-height: 1.18; color: var(--pja-encre); }
.pja-liste-points { margin: 14px 0 0; padding: 0; }
.pja-liste-points li { display: flex; gap: 11px; padding: 12px 0; border-top: 1px solid var(--pja-bordure); list-style: none; }
.pja-liste-points li > span:last-child { flex: 1 1 auto; font-size: 14.5px; line-height: 1.6; color: var(--pja-texte-fort); text-wrap: pretty; }
.pja-point-liste-7 { display: block; width: 7px; height: 7px; flex: 0 0 auto; margin-top: 8px; border-radius: 999px; }
.pja-point-gris { background: #A8B4BB; }

/* Séance préparatoire, puis le module */
.pja-cartes-depart { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); gap: clamp(18px, 2.2vw, 26px); margin-top: clamp(22px, 2.8vw, 32px); align-items: stretch; }
.pja-carte-depart { display: flex; flex-direction: column; height: 100%; padding: clamp(20px, 2.4vw, 28px); background: var(--pja-gris-fond); border: 1px solid var(--pja-bordure); border-radius: 14px; }
.pja-h3-depart { font-family: var(--pja-police); font-weight: 700; letter-spacing: -.01em; font-size: clamp(21px, 2.3vw, 27px); line-height: 1.18; color: var(--pja-encre); margin-top: 8px; }
.pja-prix-depart { display: flex; align-items: baseline; gap: 8px; margin-top: 12px; }
.pja-prix-depart strong { font-family: var(--pja-police); font-size: 28px; font-weight: 800; letter-spacing: -.02em; color: var(--pja-encre); font-variant-numeric: tabular-nums; }
.pja-prix-depart span { font-size: 13.5px; color: var(--pja-texte-doux); }
.pja-texte-depart { font-size: 14.5px; line-height: 1.66; color: var(--pja-texte); margin-top: 12px; text-wrap: pretty; max-width: 68rem; }
.pja-texte-depart-espace { margin-bottom: 18px; }
.pja-bouton-sombre { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 50px; margin-top: auto; padding: 0 22px; border-radius: 8px; background: var(--pja-noir); color: var(--pja-blanc); font-size: 15px; font-weight: 700; text-decoration: none; }
.pja-bouton-sombre:hover { background: var(--pja-azur); color: var(--pja-blanc); }
.pja-formules { margin-top: 14px; border-top: 1px solid var(--pja-bordure); }
.pja-formule { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--pja-bordure); }
.pja-formule:last-child { border-bottom: 0; }
.pja-formule > span { font-size: 14.5px; color: var(--pja-texte-fort); }
.pja-formule-note { color: var(--pja-texte-doux); }
.pja-formule strong { flex: 0 0 auto; font-family: var(--pja-police); font-size: 17px; font-weight: 800; color: var(--pja-encre); font-variant-numeric: tabular-nums; }

/* Pourquoi un devis : texte et lignes de prix dans un encart blanc */
.pja-devis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); gap: clamp(22px, 3vw, 44px); align-items: center; padding: clamp(22px, 3vw, 36px); background: var(--pja-blanc); border: 1px solid var(--pja-bordure); border-radius: 14px; }
.pja-devis-lignes { display: flex; flex-direction: column; gap: 10px; }
.pja-devis-ligne { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 15px 18px; background: var(--pja-gris-fond); border-radius: 10px; }
.pja-devis-ligne span { font-size: 14.5px; line-height: 1.5; color: var(--pja-encre); }
.pja-devis-ligne strong { flex: 0 0 auto; font-family: var(--pja-police); font-size: 20px; font-weight: 800; color: var(--pja-encre); font-variant-numeric: tabular-nums; }
.pja-devis-ligne .pja-devis-mention { font-size: 16px; font-variant-numeric: normal; }
.pja-devis-note { font-size: 13.5px; line-height: 1.6; color: var(--pja-texte-doux); padding: 0 4px; max-width: 68rem; }

/* ================================================================ ateliers */

.pja-chapeau-page { max-width: 68rem; font-size: clamp(15px, 1.5vw, 18px); line-height: 1.7; color: var(--pja-texte-fort); text-wrap: pretty; }
.pja-section-ateliers { padding: clamp(24px, 3vw, 40px) 0 clamp(40px, 6vw, 72px); }

/* Cinq ateliers : grille 2 + 3 à partir de 1024 px, 2 colonnes à partir de 640 px */
.pja-ateliers { display: grid; grid-template-columns: 1fr; gap: clamp(16px, 2vw, 22px); }
@media (min-width: 640px) { .pja-ateliers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Deux colonnes : le cinquième atelier, seul sur sa ligne, en prend toute la largeur (Pascal, 14 octobre). */
@media (min-width: 640px) and (max-width: 1023.98px) { .pja-ateliers > article:nth-child(5):last-child { grid-column: 1 / -1; } }
.pja-atelier { display: flex; flex-direction: column; background: var(--pja-blanc); border: 1px solid var(--pja-bordure); border-radius: 14px; overflow: hidden; }
/* Plus haute sur grand écran pour un meilleur cadrage (Pascal, 8 octobre : 190 px au plus donnait
   une bande de 883 × 190 à 1920 px). */
.pja-atelier-photo { width: 100%; height: clamp(180px, 20vw, 340px); object-fit: cover; display: block; }
.pja-atelier-corps { display: flex; flex-direction: column; flex: 1 1 auto; padding: clamp(20px, 2.2vw, 26px); }
@media (min-width: 1024px) {
  .pja-ateliers { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .pja-ateliers > article:nth-child(1), .pja-ateliers > article:nth-child(2) { grid-column: span 3; }
  .pja-ateliers > article:nth-child(3), .pja-ateliers > article:nth-child(4), .pja-ateliers > article:nth-child(5) { grid-column: span 2; }
  /* La source prévoit des photos plus hautes pour ces deux cartes, mais le style en ligne
     de ses images l'emporte : elles gardent la hauteur commune. */
  .pja-ateliers > article:nth-child(1) > .pja-atelier-corps, .pja-ateliers > article:nth-child(2) > .pja-atelier-corps { max-width: 46rem; }
}
/* Titres en h2 (un atelier est une section de la page), à l'aspect des h3 de la source. */
.pja-h2-atelier { font-family: var(--pja-police); font-weight: 700; letter-spacing: -.01em; font-size: clamp(20px, 2.1vw, 25px); line-height: 1.2; color: var(--pja-encre); text-wrap: pretty; }
.pja-atelier-texte { font-size: 14.5px; line-height: 1.65; color: var(--pja-texte); margin-top: 8px; text-wrap: pretty; max-width: 68rem; }
.pja-atelier-accroche { font-family: var(--pja-police); font-weight: 500; font-size: clamp(15.5px, 1.6vw, 18px); line-height: 1.5; color: #24282B; margin-top: 12px; text-wrap: pretty; }
.pja-atelier-liste { display: flex; flex-direction: column; gap: 9px; margin: 14px 0 0; padding: 14px 0 0; border-top: 1px solid var(--pja-filet); list-style: none; }
.pja-atelier-liste li { display: flex; gap: 10px; font-size: 14px; line-height: 1.55; color: var(--pja-texte-fort); }
.pja-point-6 { display: block; width: 6px; height: 6px; flex: 0 0 auto; margin-top: 8px; border-radius: 999px; background: var(--pja-azur); }
.pja-lien-fleche-14 { padding-top: 14px; }

/* Pas de calendrier fixe */
.pja-calendrier { display: flex; flex-direction: column; gap: 12px; margin-top: clamp(18px, 2.2vw, 26px); max-width: 68rem; }
.pja-calendrier p { display: flex; gap: 12px; font-size: 15px; line-height: 1.66; color: var(--pja-texte-fort); max-width: 68rem; }
.pja-point-azur { background: var(--pja-azur); }

.pja-invit-carte-blanche { background: var(--pja-blanc); }

/* ================================================================ collectif */

.pja-encart-vert { display: flex; gap: 12px; margin-top: 18px; padding: 14px 16px; background: #EDF9F1; border-radius: 12px; font-size: 14.5px; line-height: 1.6; color: var(--pja-encre); max-width: 68rem; }
.pja-encart-vert svg { flex: 0 0 auto; margin-top: 2px; }
.pja-encart-vert strong { font-weight: 800; }
.pja-lien-simple { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; font-weight: 700; text-decoration: none; }
.pja-citation-sec { font-family: var(--pja-police); font-weight: 500; font-size: clamp(17px, 1.9vw, 21px); line-height: 1.5; color: #24282B; margin-top: 14px; text-wrap: pretty; max-width: 68rem; }
/* Lien de la couleur du texte, souligné comme les autres liens. */
.pja-lien-discret { color: inherit; text-decoration: underline; text-decoration-color: #A8B4BB; text-underline-offset: 2px; }

/* ================================================================ tarifs */

.pja-h2-sans-marge { margin-bottom: 0; }

/* Le principe : texte et deux étapes */
.pja-principe { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); gap: clamp(24px, 3vw, 46px); align-items: start; }
.pja-principe-etapes { display: flex; flex-direction: column; gap: 12px; }
.pja-principe-etape { display: flex; gap: 14px; padding: 18px 20px; background: var(--pja-blanc); border: 1px solid var(--pja-bordure); border-radius: 12px; }
.pja-principe-numero { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex: 0 0 auto; border-radius: 999px; background: var(--pja-bleu-pale); color: var(--pja-bleu-profond); font-family: var(--pja-police); font-size: 14px; font-weight: 800; }
.pja-principe-etape p { font-size: 14.5px; line-height: 1.6; color: var(--pja-texte-fort); max-width: 68rem; }
.pja-principe-etape strong { font-weight: 800; color: var(--pja-encre); }

/* Cartes de tarifs */
.pja-grille-tarifs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(292px, 100%), 1fr)); align-items: stretch; gap: clamp(18px, 2.2vw, 26px); margin-top: clamp(24px, 3.2vw, 38px); }
/* Les trois modules et le Parcours Premium : 2 + 2, une colonne sous 760 px */
.pja-grille-modules { grid-template-columns: 1fr; }
@media (min-width: 760px) { .pja-grille-modules { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Collectif, balades et ateliers : colonnes aux largeurs où la grille les prenait d'elle-même ; à deux
   colonnes, la troisième carte prend toute la largeur (Pascal, 14 octobre). */
.pja-grille-groupes { grid-template-columns: 1fr; }
@media (min-width: 656px) { .pja-grille-groupes { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pja-grille-groupes > :nth-child(3):last-child { grid-column: 1 / -1; } }
@media (min-width: 1000px) { .pja-grille-groupes { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pja-grille-groupes > :nth-child(3):last-child { grid-column: auto; } }
.pja-carte-tarif { display: flex; flex-direction: column; height: 100%; background: var(--pja-blanc); border: 1px solid var(--pja-bordure); border-radius: 14px; padding: clamp(20px, 2.4vw, 28px); }
.pja-carte-tarif-grise { background: var(--pja-gris-fond); }
.pja-h3-tarif { font-family: var(--pja-police); font-weight: 700; letter-spacing: -.01em; font-size: clamp(23px, 2.5vw, 29px); line-height: 1.16; color: var(--pja-encre); text-wrap: pretty; }
.pja-h3-groupe { font-family: var(--pja-police); font-weight: 700; letter-spacing: -.01em; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.16; color: var(--pja-encre); }
.pja-lignes-prix { margin-top: 16px; border-top: 1px solid var(--pja-filet); }
.pja-ligne-prix { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--pja-filet); }
.pja-ligne-prix:last-child { border-bottom: 0; }
.pja-ligne-prix > span { font-size: 14.5px; line-height: 1.5; color: var(--pja-texte-fort); }
.pja-ligne-prix strong { flex: 0 0 auto; font-family: var(--pja-police); font-size: 18px; font-weight: 800; color: var(--pja-encre); font-variant-numeric: tabular-nums; }
/* Variante des activités de groupe : filets plus marqués, lignes plus serrées */
.pja-lignes-prix-groupe { margin-top: 12px; border-top-color: var(--pja-bordure); }
.pja-lignes-prix-groupe .pja-ligne-prix { padding: 10px 0; border-bottom-color: var(--pja-bordure); }
.pja-lignes-prix-groupe .pja-ligne-prix:last-child { border-bottom: 0; }
.pja-lignes-prix-groupe .pja-ligne-prix > span { line-height: inherit; }
.pja-lignes-prix-groupe .pja-ligne-prix strong { font-size: 17px; }
.pja-note-grise { color: var(--pja-texte-doux); }
.pja-tarif-detail { font-size: 14px; line-height: 1.65; color: var(--pja-texte); margin-top: 14px; text-wrap: pretty; max-width: 68rem; }
/* Carte du Parcours Premium */
.pja-carte-premium { border-color: var(--pja-bordure-bleue); }
.pja-prix-premium { font-family: var(--pja-police); font-size: clamp(26px, 2.8vw, 32px); line-height: 1; font-weight: 800; color: var(--pja-encre); font-variant-numeric: tabular-nums; margin-top: 14px; }
.pja-premium-note { font-size: 14px; line-height: 1.5; color: var(--pja-texte-doux); margin-top: 8px; text-wrap: pretty; }
.pja-lignes-premium { margin-top: 14px; }
.pja-ligne-prix > .pja-ligne-duree { flex: 0 0 auto; font-size: 13.5px; font-weight: 700; color: #5A636A; }
.pja-tarif-sous-titre { font-size: 13.5px; line-height: 1.55; color: var(--pja-texte-doux); margin-top: 6px; }
.pja-tarif-note { font-size: 13.5px; line-height: 1.6; color: var(--pja-texte); margin-top: 10px; text-wrap: pretty; max-width: 68rem; }
.pja-encart-gris { display: flex; gap: 11px; margin-top: 12px; padding: 13px 15px; background: var(--pja-gris-fond); border-radius: 10px; font-size: 14px; line-height: 1.6; color: var(--pja-encre); max-width: 68rem; }
.pja-encart-gris svg, .pja-note-info svg { flex: 0 0 auto; margin-top: 2px; }
.pja-encart-gris strong { font-weight: 800; }
.pja-lien-fleche-10 { padding-top: 10px; }
/* Une information, sans cadre (Pascal, 9 octobre). */
.pja-note-info { display: flex; gap: 12px; margin-top: clamp(16px, 2vw, 22px); font-size: 14.5px; line-height: 1.6; color: var(--pja-texte-fort); max-width: 68rem; }
.pja-prix-depuis { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-top: 14px; padding: 12px 0; border-top: 1px solid var(--pja-bordure); border-bottom: 1px solid var(--pja-bordure); }
.pja-prix-depuis span { font-size: 14.5px; color: var(--pja-texte-fort); }
.pja-prix-depuis strong { flex: 0 0 auto; font-family: var(--pja-police); font-size: 20px; font-weight: 800; color: var(--pja-encre); font-variant-numeric: tabular-nums; }
.pja-atelier-liste-bordure { border-top-color: var(--pja-bordure); }

/* Photo pleine largeur entre deux sections */
.pja-photo-large { width: 100%; height: clamp(180px, 24vw, 320px); border-radius: 14px; object-fit: cover; display: block; }

/* Frais de déplacement */
.pja-deplacement { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: clamp(20px, 2.6vw, 36px); align-items: center; padding: clamp(22px, 3vw, 36px); background: var(--pja-blanc); border: 1px solid var(--pja-bordure); border-radius: 14px; }
.pja-h2-deplacement { font-family: var(--pja-police); font-weight: 700; letter-spacing: -.015em; font-size: clamp(24px, 3vw, 34px); line-height: 1.14; color: var(--pja-encre); margin: 0 0 12px; text-wrap: pretty; }
.pja-deplacement-texte { font-size: 15px; line-height: 1.68; color: var(--pja-texte); text-wrap: pretty; max-width: 68rem; }
.pja-devis-ligne-16 strong { font-size: 16px; }
.pja-devis-ligne .pja-montant-bleu { color: var(--pja-bleu-profond); font-variant-numeric: normal; }

/* Conditions : 1, 2 puis 3 colonnes */
.pja-conditions { display: grid; grid-template-columns: 1fr; align-items: stretch; gap: clamp(18px, 2.2vw, 26px); margin-top: clamp(24px, 3.2vw, 38px); }
@media (min-width: 700px) { .pja-conditions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .pja-conditions { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pja-condition { display: flex; flex-direction: column; height: 100%; background: var(--pja-gris-fond); border: 1px solid var(--pja-bordure); border-radius: 14px; padding: clamp(20px, 2.2vw, 26px); }
.pja-h3-condition { font-family: var(--pja-police); font-weight: 700; letter-spacing: -.01em; font-size: clamp(20px, 2.1vw, 25px); line-height: 1.18; color: var(--pja-encre); }
.pja-condition-points { display: flex; flex-direction: column; gap: 11px; margin-top: 14px; }
.pja-condition-points p { display: flex; gap: 11px; font-size: 14.5px; line-height: 1.6; color: var(--pja-texte-fort); max-width: 68rem; }
.pja-condition-texte { font-size: 14.5px; line-height: 1.65; color: var(--pja-texte-fort); margin-top: 14px; text-wrap: pretty; max-width: 68rem; }
.pja-condition-texte-doux { color: var(--pja-texte); }
/* Tarifs sur téléphone, sous 820 px (essai de Pascal du 14 octobre) : masqués, la note sous le
   Parcours Premium, le second encart « Sans limite de validité » (le premier reste) et le détail
   des ateliers (sur Les ateliers). La ligne de la séance préparatoire reste dans chaque carte.
   Le texte reste dans la page. */
@media (max-width: 819.98px) {
  .pja-note-info,
  #t-ateliers .pja-tarif-detail { display: none; }
}
/* Le second encart ne se masque que lorsque les cartes des modules sont l'une sous l'autre, sous 760 px :
   côte à côte, il rendait les deux cartes inégales (Pascal, 14 octobre). */
@media (max-width: 759.98px) { #t-renforcement .pja-encart-gris { display: none; } }
/* Blocs repliés sur téléphone (assets/js/repli.js, Pascal, 14 octobre) : le titre devient un bouton,
   avec un chevron qui se retourne à l'ouverture. Créé par le script sous 820 px seulement. */
.pja-repli-bouton { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; min-height: 44px; padding: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; color: inherit; text-align: left; cursor: pointer; }
.pja-repli-bouton::after { content: ""; flex: 0 0 auto; width: 9px; height: 9px; margin-right: 4px; border-right: 2px solid var(--pja-bleu-profond); border-bottom: 2px solid var(--pja-bleu-profond); transform: translateY(-3px) rotate(45deg); transition: transform .2s; }
.pja-repli-bouton[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
@media (prefers-reduced-motion: reduce) { .pja-repli-bouton::after { transition: none; } }
.pja-lignes-condition { margin-top: 14px; border-top: 1px solid var(--pja-bordure); }
.pja-ligne-condition { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--pja-bordure); }
.pja-ligne-condition:last-child { border-bottom: 0; }
.pja-ligne-condition span { font-size: 14.5px; color: var(--pja-texte-fort); }
.pja-ligne-condition strong { flex: 0 0 auto; font-size: 14.5px; font-weight: 800; color: var(--pja-encre); }
.pja-ligne-condition .pja-montant-bleu { color: var(--pja-bleu-profond); }

/* Invitation : photo et carte à parts égales à partir de 1000 px */
.pja-duo-egal { display: grid; grid-template-columns: 1fr; gap: clamp(20px, 2.6vw, 34px); align-items: stretch; }
@media (min-width: 1000px) { .pja-duo-egal { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pja-invit-photo-pleine { width: 100%; height: 100%; min-height: clamp(220px, 26vw, 320px); border-radius: 16px; display: block; object-fit: cover; }
/* Sur deux colonnes, la hauteur suit le texte voisin, pas la forme de la photo (Pascal, 8 octobre :
   à 1920 px, la photo étirait le texte de 375 à 656 px). */
@media (min-width: 1000px) { .pja-invit-photo-pleine { height: 0; min-height: 100%; } }

/* ================================================================ mon parcours */

/* La personne : portrait et présentation */
.pja-personne { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); gap: clamp(28px, 4vw, 56px); align-items: start; }
.pja-portrait-cadre { display: flex; flex-direction: column; gap: 12px; }
.pja-portrait { width: 100%; height: clamp(300px, 38vw, 480px); border-radius: 14px; object-fit: cover; display: block; }
.pja-h2-mb-6 { margin-bottom: 6px; }
.pja-nom { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; font-size: clamp(17px, 1.8vw, 21px); font-weight: 800; color: var(--pja-encre); }
.pja-fiche { margin-top: 26px; background: var(--pja-blanc); border: 1px solid var(--pja-bordure); border-radius: 14px; overflow: hidden; }
.pja-fiche-corps { display: flex; flex-direction: column; gap: 16px; padding: 20px; }
.pja-fiche-corps p { font-size: 15px; line-height: 1.68; color: #24282B; text-wrap: pretty; max-width: 68rem; }

/* Le chemin parcouru : cartes 3 + 2, empilées sous 900 px */
.pja-parcours-cartes { display: flex; flex-direction: column; gap: clamp(14px, 1.8vw, 20px); margin-top: clamp(20px, 2.6vw, 32px); }
.pja-parcours-3, .pja-parcours-2 { display: grid; grid-template-columns: 1fr; align-items: stretch; gap: clamp(14px, 1.8vw, 20px); }
@media (min-width: 900px) {
  .pja-parcours-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pja-parcours-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.pja-jalon-carte { display: flex; flex-direction: column; height: 100%; padding: clamp(16px, 2vw, 22px) clamp(18px, 2.2vw, 24px); background: var(--pja-blanc); border: 1px solid var(--pja-bordure); border-radius: 14px; }
.pja-h3-jalon { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-family: var(--pja-police); font-weight: 700; letter-spacing: -.01em; font-size: clamp(17px, 1.7vw, 20px); line-height: 1.25; color: var(--pja-encre); text-wrap: pretty; }
.pja-h3-jalon span { font-size: .8em; font-weight: 600; letter-spacing: 0; color: var(--pja-texte-doux); }
.pja-jalon-texte { font-size: 14.5px; line-height: 1.55; color: var(--pja-texte); margin-top: 6px; text-wrap: pretty; }
.pja-jalon-detail { font-size: 14px; line-height: 1.65; color: #24282B; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--pja-filet); text-wrap: pretty; }

/* Charte de déontologie : deux colonnes à partir de 900 px */
.pja-charte { column-count: 1; column-gap: clamp(32px, 4vw, 64px); margin: 20px 0 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .pja-charte { column-count: 2; } }
.pja-charte > li { break-inside: avoid; display: flex; gap: 14px; padding: 14px 0; border-top: 1px solid var(--pja-filet); font-size: 15.5px; line-height: 1.65; color: var(--pja-texte-fort); text-wrap: pretty; }
.pja-charte .pja-point-6 { margin-top: 10px; }
.pja-citation { max-width: 90rem; margin: 26px 0 0; padding: clamp(20px, 2.6vw, 30px) clamp(20px, 2.6vw, 32px); background: var(--pja-gris-fond); border-radius: 14px; }
/* Sur fond gris (charte de Mon parcours depuis le 25 octobre), la citation passe en blanc. */
.pja-fond-gris .pja-citation { background: var(--pja-blanc); }
/* Centrée sur grand écran (Pascal, 9 octobre). */
@media (min-width: 1000px) { .pja-citation { margin-left: auto; margin-right: auto; } }
.pja-citation blockquote { margin: 0; font-family: var(--pja-police); font-weight: 500; font-size: clamp(17px, 1.8vw, 21px); line-height: 1.55; color: #24282B; text-wrap: pretty; }
.pja-citation figcaption { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 14px; text-align: right; font-size: 13.5px; line-height: 1.5; color: var(--pja-texte-doux); }

/* Le récit */
.pja-recit-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: clamp(28px, 4vw, 64px); align-items: start; }
/* Sur téléphone, la photo de Phaedra avant son histoire, comme ailleurs la photo avant son texte :
   sans quoi, la charte repliée, elle suivait de près celle de l'invitation (Pascal, 14 octobre). */
@media (max-width: 819.98px) { .pja-recit-grille > .pja-portrait-cadre { order: -1; } }
.pja-recit { font-size: clamp(16px, 1.5vw, 18px); line-height: 1.72; color: var(--pja-texte-fort); text-wrap: pretty; max-width: 68rem; }
.pja-mt-22 { margin-top: 22px; }
.pja-recit-fin { margin-top: clamp(26px, 3.4vw, 40px); }
.pja-photo-recit { width: 100%; height: clamp(320px, 42vw, 560px); object-fit: cover; border-radius: 14px; display: block; }

/* Invitation : photo à la hauteur de la carte, bornée */
.pja-invit-photo-cadre { width: 100%; height: 100%; min-height: clamp(190px, 18vw, 240px); max-height: clamp(220px, 34vw, 420px); border-radius: 16px; display: block; object-fit: cover; }

/* ================================================================ contact et merci */

/* Les trois voies de contact */
.pja-voies-section { padding: clamp(24px, 3vw, 40px) 0 0; }
.pja-voies { display: grid; grid-template-columns: 1fr; gap: clamp(14px, 1.8vw, 22px); }
/* Colonnes aux largeurs où la grille les prenait d'elle-même ; à deux colonnes, la troisième voie
   prend toute la largeur (Pascal, 14 octobre). */
@media (min-width: 580px) { .pja-voies { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pja-voies > :nth-child(3):last-child { grid-column: 1 / -1; } }
@media (min-width: 876px) { .pja-voies { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pja-voies > :nth-child(3):last-child { grid-column: auto; } }
.pja-voie { display: flex; flex-direction: column; gap: 8px; padding: 22px 24px; background: var(--pja-blanc); border: 1px solid var(--pja-bordure); border-radius: 14px; text-decoration: none; }
.pja-voie:hover { border-color: var(--pja-azur); }
.pja-voie-icone { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; background: var(--pja-bleu-pale); }
.pja-voie-icone-claire { background: rgba(99,207,243,.16); }
.pja-voie-titre { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--pja-texte-doux); }
.pja-voie-valeur { font-family: var(--pja-police); font-weight: 800; font-size: clamp(21px, 2.2vw, 26px); line-height: 1.15; color: var(--pja-encre); }
.pja-voie-courriel { font-size: 15px; font-weight: 700; color: var(--pja-encre); overflow-wrap: anywhere; }
.pja-voie-texte { font-size: 13.5px; line-height: 1.55; color: var(--pja-texte); }

/* Formulaire et colonne de gauche : 1 / 1,4 à partir de 1000 px */
.pja-section-formulaire { padding: clamp(24px, 3vw, 40px) 0; border-bottom: 3px solid var(--pja-vert); }
.pja-duo-formulaire { display: grid; grid-template-columns: 1fr; gap: clamp(20px, 2.6vw, 34px); align-items: stretch; }
@media (min-width: 1000px) { .pja-duo-formulaire { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); } }
.pja-carte-blanche { background: var(--pja-blanc); border: 1px solid var(--pja-bordure-bleue); border-radius: 16px; padding: clamp(24px, 3.4vw, 46px) clamp(20px, 3vw, 46px); }
.pja-colonne-contact { display: flex; flex-direction: column; gap: 20px; height: 100%; }
/* height: auto, sinon l'attribut height de l'image (2667) devient sa hauteur CSS. */
/* La photo remplit la place que laisse le formulaire voisin, sans fixer la hauteur de la rangée
   (Pascal, 8 octobre : à 1920 px, elle étirait la colonne et laissait 215 px de blanc avant le
   bouton d'envoi). */
.pja-photo-contact { width: 100%; height: 0; flex: 1 1 0; min-height: clamp(240px, 24vw, 300px); border-radius: 12px; display: block; object-fit: cover; }
.pja-zone-contact { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px 18px; }
.pja-zone-contact svg { flex: 0 0 auto; }
.pja-zone-contact p { flex: 1 1 240px; font-size: clamp(15px, 1.4vw, 17px); line-height: 1.68; color: #4C575E; text-wrap: pretty; }
.pja-colonne-droite { display: flex; flex-direction: column; }
.pja-formulaire { display: flex; flex-direction: column; flex: 1 1 auto; }

/* Champs */
.pja-groupe { margin: 0 0 26px; padding: 0; border: 0; min-width: 0; }
.pja-groupe legend { padding: 0; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--pja-bleu-profond); }
.pja-choix { display: grid; grid-template-columns: 1fr; gap: 2px 18px; margin-top: 12px; }
@media (min-width: 520px) { .pja-choix { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pja-choix label { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.pja-choix-objet label { min-height: 48px; padding: 0 4px; font-size: 15px; color: #24282B; }
.pja-choix-objet label:hover { color: var(--pja-bleu-profond); }
.pja-choix-activite label { min-height: 46px; font-size: 14.5px; color: #24282B; }
.pja-formulaire input[type="radio"], .pja-formulaire input[type="checkbox"] { accent-color: var(--pja-azur); width: 18px; height: 18px; flex: 0 0 auto; margin: 0; cursor: pointer; }
/* Comme le « input { font: inherit } » de la source : la règle la moins spécifique, que .pja-saisie complète. */
:where(.pja-formulaire) input, :where(.pja-formulaire) textarea { font: inherit; color: inherit; }
/* Activités : visibles seulement quand « M'inscrire » est coché ; sans :has(), toujours visibles. */
.pja-inscription { margin-bottom: 26px; padding: 22px; background: var(--pja-gris-fond); border: 1px solid #D5E9F2; border-radius: 12px; }
.pja-inscription .pja-groupe { margin: 0; }
.pja-formulaire:has(input[name="objet"][value="inscription"]:not(:checked)) .pja-inscription { display: none; }
.pja-participants { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 16px; margin-top: 20px; }
.pja-champs { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 420px) { .pja-champs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pja-champ { display: flex; flex-direction: column; gap: 7px; }
.pja-champ-espace { margin-top: 16px; }
.pja-champ-libelle { font-size: 13.5px; font-weight: 700; color: #24282B; }
.pja-obligatoire { color: var(--pja-bleu-profond); }
.pja-saisie { width: 100%; min-height: 48px; padding: 0 14px; background: var(--pja-blanc); border: 1px solid #DCE3E6; border-radius: 8px; font-size: 15px; }
.pja-saisie-message { padding: 13px 14px; line-height: 1.6; resize: vertical; }
.pja-saisie:focus { border-color: var(--pja-azur); outline: 2px solid var(--pja-focus-clair); outline-offset: 2px; }
.pja-consentement { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--pja-filet); }
.pja-consentement label { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.pja-consentement input[type="checkbox"] { margin-top: 3px; }
.pja-consentement label span { font-size: 14.5px; line-height: 1.6; color: #24282B; }
.pja-lien-souligne { text-decoration: underline; }
.pja-envoi { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: auto; padding-top: 24px; }
.pja-bouton-envoi { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px; border-radius: 8px; background: var(--pja-noir); color: var(--pja-blanc); font-size: 16px; font-weight: 700; }
.pja-bouton-envoi:hover { background: var(--pja-azur); color: var(--pja-blanc); }
.pja-mention-obligatoire { font-size: 13px; color: var(--pja-texte-doux); }
.pja-mention-obligatoire .pja-obligatoire { font-weight: 700; }

/* Champ leurre : hors de l'écran, invisible pour les personnes, rempli par les robots */
.pja-leurre { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Messages du formulaire : bandeau en tête, puis message sous chaque champ en erreur */
.pja-bandeau-formulaire { display: flex; gap: 13px; margin-bottom: 20px; padding: 16px 18px; background: var(--pja-blanc); border: 1px solid var(--pja-bordure); border-radius: 12px; }
.pja-bandeau-formulaire svg { flex: 0 0 auto; margin-top: 2px; }
.pja-bandeau-formulaire p { font-size: 15px; line-height: 1.6; color: #24282B; max-width: 68rem; }
.pja-lien-gras { font-weight: 700; text-decoration: none; }
.pja-erreur-champ { display: flex; align-items: center; gap: 8px; padding: 9px 12px; background: var(--pja-gris-fond); border-radius: 6px; font-size: 13.5px; font-weight: 700; color: var(--pja-encre); }
.pja-erreur-champ-2 { margin-top: 2px; }
.pja-erreur-champ-10 { margin-top: 10px; }

/* Message reçu (page Merci) */
.pja-recu { display: flex; flex-direction: column; gap: 16px; padding: clamp(26px, 4vw, 40px); background: var(--pja-blanc); border: 1px solid #C7E9D6; border-radius: 14px; }
.pja-recu-icone { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 999px; background: #EDF9F1; }
.pja-h2-recu { font-family: var(--pja-police); font-weight: 700; letter-spacing: -.015em; font-size: clamp(24px, 3vw, 34px); line-height: 1.15; color: var(--pja-encre); }
.pja-recu-texte { font-size: clamp(15px, 1.4vw, 17px); line-height: 1.65; color: var(--pja-texte-fort); text-wrap: pretty; max-width: 68rem; }
.pja-recu-boutons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.pja-recu-principal { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border-radius: 8px; background: var(--pja-noir); color: var(--pja-blanc); font-size: 15px; font-weight: 700; text-decoration: none; }
.pja-recu-principal:hover { background: var(--pja-azur); color: var(--pja-blanc); }
.pja-recu-secondaire { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 20px; border-radius: 8px; border: 1px solid #DCE3E6; color: var(--pja-encre); font-size: 15px; font-weight: 600; text-decoration: none; }
.pja-recu-secondaire:hover { border-color: var(--pja-azur); background: var(--pja-azur); color: var(--pja-blanc); }

/* ================================================================ pages d'erreur (404, 500, 503) */

.pja-erreur { background: var(--pja-noir); border-bottom: 3px solid var(--pja-azur); }
.pja-erreur-conteneur { width: min(100%, 120rem); margin: 0 auto; padding: clamp(40px, 7vw, 96px) clamp(16px, 4vw, 64px); }
.pja-h1-erreur { font-family: var(--pja-police); font-weight: 800; letter-spacing: -.02em; font-size: clamp(32px, 5vw, 58px); line-height: 1.06; color: #FBFCFC; text-wrap: pretty; }
.pja-baseline-banniere + .pja-h1-erreur { margin-top: 18px; }
.pja-erreur-accroche { font-family: var(--pja-police); font-weight: 600; font-size: clamp(17px, 1.8vw, 22px); line-height: 1.45; color: var(--pja-bleu-clair); margin-top: 16px; max-width: 68rem; text-wrap: pretty; }
.pja-erreur-texte { font-size: clamp(15px, 1.5vw, 19px); line-height: 1.6; color: #C4CDD3; margin-top: 12px; max-width: 68rem; text-wrap: pretty; }
.pja-erreur-texte a { color: var(--pja-bleu-clair); font-weight: 700; text-decoration: underline; text-decoration-color: #5A636A; text-underline-offset: 2px; }
.pja-erreur-texte a:hover { color: #FBFCFC; }
.pja-erreur-liens { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; margin-top: clamp(24px, 3vw, 34px); }
.pja-bouton-bleu { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px; border-radius: 8px; background: var(--pja-bleu-profond); color: var(--pja-blanc); font-size: 16px; font-weight: 700; text-decoration: none; }
.pja-bouton-bleu:hover { background: var(--pja-azur); color: var(--pja-blanc); }
.pja-lien-clair { display: inline-flex; align-items: center; gap: 9px; min-height: 48px; color: #FBFCFC; font-size: 15px; font-weight: 700; text-decoration: none; }
.pja-lien-clair:hover { color: var(--pja-bleu-clair); }
/* Photo inédite des pages d'erreur (Pascal, 25 octobre 2026) : à gauche du texte sur ordinateur,
   comme la première photo de chaque page, au-dessus sur téléphone. */
.pja-erreur-duo { display: grid; gap: clamp(24px, 4vw, 56px); align-items: center; }
.pja-erreur-photo { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 16px; }
@media (min-width: 900px) {
  .pja-erreur-duo { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .pja-erreur-photo { aspect-ratio: 4 / 3; }
}

/* 500 et 503 : page statique, la bande sombre occupe la hauteur libre entre en-tête et pied */
.pja-statique { display: flex; flex-direction: column; min-height: 100vh; background: var(--pja-gris-fond); }
.pja-statique .pja-erreur { flex: 1 1 auto; display: flex; align-items: center; }
.pja-statique .pja-entete { position: static; }
.pja-entete-simple { width: min(100%, 120rem); margin: 0 auto; padding: 9px clamp(16px, 3vw, 64px); display: flex; align-items: center; min-height: 62px; }
.pja-pied-simple { width: min(100%, 120rem); margin: 0 auto; padding: clamp(22px, 2.6vw, 32px) clamp(16px, 4vw, 64px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 32px; }
.pja-pied-simple-contact { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; font-size: 14px; line-height: 1.5; }
.pja-pied-simple-droits { font-size: 12.5px; color: #7E8A91; }

/* ================================================================ pages de texte (mentions légales, confidentialité) */

/* Bandeau de titre sans photo : voir « bandeaux de haut de page ». */

/* Sections alternées */
.pja-section-blanche { background: var(--pja-blanc); border-top: 1px solid var(--pja-filet); }
.pja-h2-texte { font-family: var(--pja-police); font-weight: 700; letter-spacing: -.015em; font-size: clamp(24px, 3vw, 34px); line-height: 1.12; color: var(--pja-encre); text-wrap: pretty; }
.pja-texte { font-size: clamp(15px, 1.4vw, 16.5px); line-height: 1.7; color: var(--pja-texte-fort); text-wrap: pretty; max-width: 68rem; }
.pja-texte strong, .pja-puce strong { font-weight: 800; color: var(--pja-encre); }
.pja-mise-a-jour { font-size: 13.5px; line-height: 1.6; color: var(--pja-texte-doux); margin-top: 18px; }
/* Lien coloré sans changement au survol (couleur portée par le lien dans la source). */
.pja-lien-fixe, .pja-lien-fixe:hover { color: var(--pja-bleu-profond); }
/* Lien seul dans sa ligne de coordonnées : zone cliquable de 44 px, sans rien déplacer (chantier 11) */
dd > a:only-child { position: relative; }
dd > a:only-child::after { content: ""; position: absolute; inset: -12px 0; }

/* Marges hautes reprises des sources */
.pja-mt-10 { margin-top: 10px; }
.pja-mt-12 { margin-top: 12px; }
.pja-mt-14 { margin-top: 14px; }
.pja-mt-16 { margin-top: 16px; }
.pja-mt-18 { margin-top: 18px; }

/* Liste de définitions : deux colonnes à partir de 680 px */
.pja-legal { display: grid; grid-template-columns: 1fr; margin: clamp(16px, 2vw, 22px) 0 0; gap: 14px 30px; }
@media (min-width: 680px) { .pja-legal { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pja-legal dt { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--pja-texte-doux); }
.pja-legal dd { font-size: 15px; line-height: 1.6; color: var(--pja-encre); margin: 4px 0 0; }

/* Cartes de la confidentialité */
.pja-encarts { display: grid; grid-template-columns: 1fr; gap: clamp(16px, 2vw, 22px); margin-top: clamp(20px, 2.6vw, 30px); align-items: stretch; }
/* Colonnes aux largeurs où la grille les prenait d'elle-même ; à deux colonnes, le troisième encart
   prend toute la largeur (Pascal, 14 octobre). */
@media (min-width: 648px) { .pja-encarts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pja-encarts > :nth-child(3):last-child { grid-column: 1 / -1; } }
@media (min-width: 992px) { .pja-encarts { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pja-encarts > :nth-child(3):last-child { grid-column: auto; } }
.pja-encart { display: flex; flex-direction: column; height: 100%; padding: clamp(20px, 2.2vw, 26px); background: var(--pja-gris-fond); border: 1px solid var(--pja-bordure); border-radius: 14px; }
.pja-h3-encart { font-family: var(--pja-police); font-weight: 700; letter-spacing: -.01em; font-size: clamp(19px, 2vw, 23px); line-height: 1.2; color: var(--pja-encre); text-wrap: pretty; }
.pja-encart-precision { font-size: 14px; line-height: 1.6; color: var(--pja-texte); margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--pja-bordure); }
.pja-encart-precision strong { font-weight: 800; color: var(--pja-encre); }

/* Listes à puces de couleur */
.pja-puces { display: flex; flex-direction: column; gap: 12px; }
.pja-puces-espacees { margin-top: clamp(16px, 2vw, 22px); }
.pja-puce { display: flex; gap: 12px; font-size: clamp(15px, 1.4vw, 16.5px); line-height: 1.7; color: var(--pja-texte-fort); text-wrap: pretty; max-width: 68rem; }
.pja-point-puce { display: block; width: 7px; height: 7px; flex: 0 0 auto; margin-top: 9px; border-radius: 999px; background: var(--pja-azur); }
.pja-point-vert { background: var(--pja-vert); }

/* ================================================================ pied de page */

.pja-pied-page { background: var(--pja-noir-pied); color: #B9C3C9; }
.pja-pied-conteneur { width: min(100%, 120rem); margin: 0 auto; padding: clamp(24px, 3vw, 40px) clamp(16px, 4vw, 64px) 26px; }
.pja-pied { --pja-cols: 3; display: grid; grid-template-columns: 1fr; align-items: start; gap: clamp(26px, 3vw, 44px); }
@media (min-width: 640px) { .pja-pied { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .pja-pied { grid-template-columns: repeat(var(--pja-cols, 3), minmax(0, 1fr)); } }
.pja-pied-titre { font-size: 11px; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; color: #7E8A91; margin-bottom: 14px; }
.pja-pied-titre-plan { margin-bottom: 10px; }
.pja-pied-contact { display: flex; flex-direction: column; gap: 11px; font-size: 14px; line-height: 1.5; }
/* Le métier, en tête de la colonne « Me joindre » (Pascal, 25 octobre : le corps des pages le dit peu). */
.pja-pied-metier { margin: 0 0 4px; color: #E3E9EC; font-weight: 600; text-wrap: pretty; }
.pja-pied-ligne { display: flex; align-items: center; gap: 10px; }
.pja-pied-ligne svg { flex: 0 0 auto; }
.pja-pied-ligne a { color: #E3E9EC; font-weight: 700; text-decoration: none; }
.pja-pied-ligne a:hover { color: #FBFCFC; }
.pja-pied-adresse { align-items: flex-start; }
.pja-pied-adresse svg { margin-top: 3px; }
.pja-pied-note { color: #7E8A91; font-size: 12.5px; line-height: 1.5; }
.pja-pied-colonne-plan { grid-column: span 1; }
.pja-plan { display: grid; grid-template-columns: 1fr; gap: 0 clamp(18px, 2.2vw, 32px); }
@media (min-width: 420px) { .pja-plan { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pja-plan-fort { display: block; padding: 4px 0; color: #E3E9EC; font-size: 14px; font-weight: 700; text-decoration: none; }
.pja-plan-doux { display: block; padding: 4px 0; color: #B9C3C9; font-size: 14px; text-decoration: none; }
.pja-plan-fort:hover, .pja-plan-doux:hover { color: #FBFCFC; }
/* Page courante, comme dans le menu : soulignée en azur (Pascal, 8 octobre). */
.pja-plan-fort[aria-current], .pja-plan-doux[aria-current], .pja-pied-bas a[aria-current] { color: #FBFCFC; text-decoration: underline; text-decoration-color: var(--pja-azur); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.pja-reseaux { display: flex; gap: 10px; }
.pja-reseaux a { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 8px; border: 1px solid rgba(185,195,201,.28); color: #B9C3C9; text-decoration: none; }
.pja-reseaux a:hover { background: rgba(185,195,201,.12); color: #FBFCFC; }
.pja-pied-annonce { font-size: 12.5px; line-height: 1.55; color: #7E8A91; margin-top: 14px; }
.pja-pied-bas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: clamp(26px, 3.4vw, 44px); padding-top: 22px; border-top: 1px solid rgba(185,195,201,.2); font-size: 12.5px; color: #7E8A91; }
.pja-pied-bas img { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 8px; }
.pja-pied-signature { color: var(--pja-bleu-clair); }
.pja-pied-bas a { color: #9AA4AA; text-decoration: none; }
.pja-pied-bas a:hover, .pja-pied-cookies:hover { color: #FBFCFC; }
.pja-pied-cookies { color: #9AA4AA; font-size: 12.5px; text-align: left; }
/* Sans JavaScript, aucun cookie n'est déposé : le bouton qui rouvre le panneau disparaît. */
html:not(.js) .pja-pied-cookies { display: none; }
/* Sur téléphone (décision de Pascal du 2 octobre) : ni le plan du site, que le menu reprend,
   ni le petit logo de la barre du bas ; les liens restants ont 44 px de haut. */
@media (max-width: 819.98px) {
  .pja-pied-colonne-plan, .pja-pied-bas img { display: none; }
  .pja-pied-contact { gap: 0; }
  .pja-pied-ligne a, .pja-pied-bas a, .pja-pied-cookies { display: inline-flex; align-items: center; min-height: 44px; }
  .pja-pied-bas, .pja-pied-simple-contact { row-gap: 0; }
  /* La baseline sur sa propre ligne, sous le © (Pascal, 14 octobre). */
  .pja-pied-signature { display: block; }
}

/* ================================================================ cookies */

.pja-cookies-bandeau { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 0 clamp(10px, 2vw, 20px) clamp(10px, 2vw, 20px); }
.pja-cookies-carte { width: min(100%, 940px); margin: 0 auto; padding: clamp(18px, 2.4vw, 24px); background: var(--pja-blanc); border: 1px solid #DCE3E6; border-top: 3px solid var(--pja-azur); border-radius: 14px; box-shadow: 0 22px 50px -18px rgba(11,11,12,.45); }
.pja-cookies-message { display: flex; align-items: flex-start; gap: 14px; }
.pja-cookies-message svg { flex: 0 0 auto; }
.pja-cookies-titre { font-family: var(--pja-police); font-weight: 700; font-size: clamp(18px, 2vw, 22px); line-height: 1.24; color: var(--pja-encre); text-wrap: pretty; }
.pja-cookies-texte { font-size: 14.5px; line-height: 1.62; color: var(--pja-texte); margin-top: 8px; text-wrap: pretty; max-width: 68rem; }
.pja-cookies-boutons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.pja-cookies-boutons-panneau { margin-top: 20px; }
.pja-cookies-sombre { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; flex: 1 1 auto; padding: 0 20px; border-radius: 8px; background: var(--pja-noir); color: var(--pja-blanc); font-size: 14.5px; font-weight: 700; }
.pja-cookies-sombre:hover { background: var(--pja-azur); color: var(--pja-blanc); }
.pja-cookies-clair { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; flex: 1 1 auto; padding: 0 20px; border-radius: 8px; border: 1px solid #C9D4DA; background: var(--pja-blanc); color: var(--pja-encre); font-size: 14.5px; font-weight: 700; }
.pja-cookies-clair:hover { border-color: var(--pja-azur); background: var(--pja-azur); color: var(--pja-blanc); }
.pja-cookies-lien { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; flex: 0 1 auto; padding: 0 14px; border-radius: 8px; color: var(--pja-bleu-profond); font-size: 14px; font-weight: 700; text-decoration: underline; }
.pja-cookies-lien:hover { color: var(--pja-azur); }
.pja-cookies-fond { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: clamp(12px, 3vw, 32px); background: rgba(11,11,12,.62); }
.pja-cookies-panneau { width: min(100%, 620px); max-height: 92vh; overflow-y: auto; padding: clamp(22px, 3vw, 32px); background: var(--pja-blanc); border-radius: 16px; border-top: 3px solid var(--pja-azur); box-shadow: 0 30px 70px -20px rgba(11,11,12,.5); }
.pja-cookies-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.pja-cookies-h2 { font-family: var(--pja-police); font-weight: 700; font-size: clamp(23px, 2.8vw, 30px); line-height: 1.14; color: var(--pja-encre); text-wrap: pretty; }
.pja-cookies-fermer { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: 0 0 auto; border-radius: 999px; border: 1px solid #DCE3E6; color: var(--pja-encre); }
.pja-cookies-fermer:hover { border-color: var(--pja-azur); color: var(--pja-bleu-profond); }
.pja-cookies-intro { font-size: 14.5px; line-height: 1.64; color: var(--pja-texte); margin-top: 10px; text-wrap: pretty; max-width: 68rem; }
.pja-cookies-categories { margin-top: 18px; }
.pja-cookies-categorie { display: flex; gap: 14px; padding: 16px 0; border-top: 1px solid var(--pja-filet); }
.pja-cookies-coche { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex: 0 0 auto; margin-top: 2px; border-radius: 4px; background: #C9D4DA; color: var(--pja-blanc); }
.pja-cookies-case { margin-top: 2px; }
.pja-cookies-libelle { flex: 1 1 auto; cursor: pointer; }
.pja-cookies-fixe { cursor: default; }
.pja-cookies-nom { display: block; font-size: 14.5px; font-weight: 800; color: var(--pja-encre); }
.pja-cookies-precision { font-weight: 700; color: var(--pja-texte-doux); }
.pja-cookies-description { display: block; font-size: 13.5px; line-height: 1.6; color: var(--pja-texte); margin-top: 4px; }
.pja-cookies-outil { margin-top: 16px; font-size: 13.5px; line-height: 1.6; color: var(--pja-texte); max-width: 68rem; }
.pja-cookies-detail { font-size: 13px; line-height: 1.6; color: var(--pja-texte-doux); margin-top: 14px; max-width: 68rem; }
.pja-cookies-detail a { font-weight: 700; }