/* =====================================================================
   KENDO TAIKAI — PAGE DE PRÉSENTATION DU SITE (tâche 319, 01-10-2026)
   =====================================================================
   Charte de la plaquette commerciale (doc/plaquette/plaquette.css) portée
   à l'écran : beni #BC002D, kon #223A70, washi #F7F4EE ; polices LIVRÉES
   (app/vue/polices/polices.css : Source Sans 3, Noto Serif JP), aucune
   police web externe. Responsive : téléphone 375 px sans défilement
   horizontal, écran large plafonné à 1180 px de contenu.
   ===================================================================== */

:root {
  --beni: #BC002D;
  --beni-fonce: #8E0022;
  --rose: #FF4A6E;
  --rose-clair: #FF8BA0;
  --kon: #223A70;
  --kon-nuit: #16264D;
  --washi: #F7F4EE;
  --washi-2: #EFE9DE;
  --encre: #1E2330;
  --gris: #5B6272;
  --filet: #DDD5C6;
  --pr-sans: var(--kt-sans, "Source Sans 3", system-ui, sans-serif);
  --pr-serif: var(--kt-serif, "Source Serif 4", Georgia, serif);
  --pr-jp: "Noto Serif JP", var(--pr-serif);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body.pr {
  margin: 0;
  font-family: var(--pr-sans);
  font-size: 17px;
  line-height: 1.55;
  color: var(--encre);
  background: var(--washi);
  overflow-x: hidden;
}
.pr img { max-width: 100%; height: auto; display: block; }
.pr a { color: inherit; }
.pr b, .pr strong { font-weight: 700; color: var(--kon-nuit); }
.pr h1, .pr h2, .pr h3 { margin: 0; font-weight: 800; line-height: 1.1; color: var(--kon); }
.pr svg { flex: none; }

.pr-sauter { position: absolute; left: -9999px; top: 8px; z-index: 50; background: #fff; color: var(--kon); padding: 8px 14px; border-radius: 6px; }
.pr-sauter:focus { left: 12px; }

.pr-cadre { max-width: 1180px; margin: 0 auto; padding: 0 24px; position: relative; }

/* ---------- BOUTONS ---------- */
.pr-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 48px; padding: 11px 22px; border-radius: 10px;
  font: 700 16.5px/1.15 var(--pr-sans); text-decoration: none; letter-spacing: .01em;
  border: 2px solid transparent; transition: background-color .15s, border-color .15s, color .15s, transform .15s;
  white-space: nowrap;
}
.pr-btn svg { width: 19px; height: 19px; }
.pr-btn:hover { transform: translateY(-1px); }
.pr-btn:focus-visible, .pr-lien-pdf:focus-visible, .pr-marque:focus-visible, .pr-pied a:focus-visible { outline: 3px solid #FFC2CF; outline-offset: 2px; }
.pr .pr-btn-plein { background: var(--beni); color: #fff; border-color: var(--beni); }
.pr .pr-btn-plein:hover { background: var(--beni-fonce); border-color: var(--beni-fonce); }
.pr .pr-btn-blanc { background: #fff; color: var(--beni); border-color: #fff; }
.pr .pr-btn-blanc:hover { background: #FFF1F4; }
.pr .pr-btn-trait { background: transparent; color: var(--kon); border-color: var(--kon); }
.pr .pr-btn-trait-clair { background: transparent; color: #fff; border-color: rgba(255,255,255,.75); }
.pr .pr-btn-trait-clair:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.pr-btn-petit { min-height: 40px; padding: 8px 15px; font-size: 15px; border-radius: 9px; }
.pr-btn-petit svg { width: 17px; height: 17px; }
.pr-appels { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* ---------- BARRE DU HAUT ---------- */
.pr-barre {
  position: sticky; top: 0; z-index: 20;
  background: rgba(22, 38, 77, .97); color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 2px 12px rgba(0,0,0,.18);
}
.pr-barre-in { max-width: 1180px; margin: 0 auto; padding: 10px 24px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.pr-marque { display: flex; align-items: center; gap: 12px; text-decoration: none; color: #fff; min-width: 0; }
.pr-marque img { width: 40px; height: 40px; border-radius: 8px; }
.pr-marque-nom { font-weight: 800; letter-spacing: .26em; font-size: 17px; white-space: nowrap; }
.pr-jp { font-family: var(--pr-jp); font-weight: 400; letter-spacing: .12em; margin-left: 10px; font-size: 14px; color: rgba(255,255,255,.75); }
.pr-actions { display: flex; align-items: center; gap: 10px; }
.pr-lien-pdf { display: inline-flex; align-items: center; gap: 7px; color: rgba(255,255,255,.88); text-decoration: none; font-weight: 600; font-size: 15px; padding: 8px 6px; }
.pr-lien-pdf svg { width: 17px; height: 17px; }
.pr-lien-pdf:hover { color: #fff; text-decoration: underline; }

/* ---------- COUVERTURE ---------- */
.pr-hero { position: relative; overflow: hidden; background: var(--kon-nuit); color: #fff; padding: 64px 0 76px; }
.pr-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: var(--beni); }
.pr-hero-kanji {
  position: absolute; right: -30px; top: -10px; writing-mode: vertical-rl;
  font-family: var(--pr-jp); font-size: 210px; line-height: 1; letter-spacing: .04em;
  color: rgba(255,255,255,.045); pointer-events: none; user-select: none;
}
.pr-hero-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 48px; align-items: center; }
.pr-surtitre { margin: 0 0 12px; font-size: 13.5px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--beni); }
.pr-surtitre-clair { color: rgba(255,255,255,.66); }
.pr-surtitre-rose { color: #FF6F8A; }
.pr-hero h1 { color: #fff; font-size: 50px; line-height: 1.06; letter-spacing: -.015em; }
.pr-hero h1 em, .pr-nuit .pr-grand em { font-style: normal; color: var(--rose); }
.pr-promesse { font-size: 19.5px; line-height: 1.5; color: rgba(255,255,255,.84); margin: 22px 0 0; max-width: 36em; }
.pr-pour-qui { margin: 30px 0 0; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.55); }

.pr-scene { position: relative; padding: 0 70px 34px 0; }
.pr-pc {
  background: #0E1A36; border-radius: 12px; padding: 9px; border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
}
.pr-pc-barre { display: flex; gap: 6px; margin: 1px 0 8px 3px; }
.pr-pc-barre i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.25); display: block; }
.pr-pc img { border-radius: 5px; width: 100%; }
.pr-tel {
  position: absolute; right: 0; bottom: 0; width: 27%;
  background: #0B0F1A; border-radius: 22px; padding: 7px; border: 1.5px solid rgba(255,255,255,.2);
  box-shadow: 0 16px 44px rgba(0,0,0,.55);
}
.pr-tel img { border-radius: 16px; aspect-ratio: 480 / 664; object-fit: cover; object-position: top; width: 100%; }
.pr-gratuit {
  position: absolute; left: -26px; bottom: -6px; width: 118px; height: 118px; border-radius: 50%;
  background: var(--beni); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; transform: rotate(-9deg); border: 3px solid rgba(255,255,255,.92);
  box-shadow: 0 10px 28px rgba(0,0,0,.45);
}
.pr-gratuit b { color: #fff; font-size: 21px; font-weight: 900; letter-spacing: .04em; line-height: 1; }
.pr-gratuit span { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; margin-top: 5px; line-height: 1.25; }

/* ---------- SECTIONS ---------- */
.pr-section { padding: 84px 0; }
.pr-washi { background: var(--washi); }
.pr-blanc { background: #fff; }
.pr-nuit { background: var(--kon-nuit); color: #fff; }
.pr-grand { font-size: 40px; letter-spacing: -.01em; max-width: 22em; }
.pr-grand em { font-style: normal; color: var(--beni); }
.pr-nuit .pr-grand { color: #fff; }
.pr-chapo { font-size: 19.5px; color: var(--gris); margin: 16px 0 0; max-width: 40em; line-height: 1.5; }
.pr-nuit .pr-chapo { color: rgba(255,255,255,.78); }
.pr-nuit b { color: #fff; }

/* capture : cadre, ombre légère */
.pr-shot {
  margin: 0; overflow: hidden; border-radius: 10px; background: #fff;
  border: 1px solid rgba(34, 58, 112, .12);
  box-shadow: 0 2px 6px rgba(22, 38, 77, .08), 0 10px 28px rgba(22, 38, 77, .12);
}
.pr-shot img { width: 100%; }
.pr-shot-sombre { background: #121212; border-color: #000; }

ul.pr-points { list-style: none; margin: 0; padding: 0; }
ul.pr-points li { position: relative; padding-left: 22px; margin: 0 0 7px; }
ul.pr-points li::before { content: ""; position: absolute; left: 0; top: .52em; width: 9px; height: 9px; border-radius: 50%; background: var(--beni); }

/* ---------- PARCOURS ---------- */
.pr-etapes { list-style: none; margin: 46px 0 0; padding: 0; display: grid; gap: 56px; }
.pr-etape-tete { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 34px; align-items: start; margin-bottom: 20px; }
.pr-etape h3 { display: flex; align-items: center; gap: 14px; font-size: 25px; margin-bottom: 8px; }
.pr-etape-tete p { margin: 0; }
.pr-num {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 40px; height: 40px; border-radius: 50%; background: var(--beni); color: #fff;
  font-weight: 900; font-size: 20px;
}
.pr-rang { display: grid; grid-template-columns: minmax(0, 1.72fr) minmax(0, 1fr); gap: 24px; align-items: start; }

/* ---------- JOUR J ---------- */
.pr-grille-j { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 40px; margin-top: 44px; }
.pr-carte-j .pr-shot { border-color: rgba(255,255,255,.12); box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.pr-carte-j h3 { color: #fff; font-size: 21px; margin: 16px 0 6px; display: flex; align-items: center; gap: 10px; }
.pr-carte-j p { margin: 0; color: rgba(255,255,255,.8); }
.pr-picto { width: 24px; height: 24px; color: #FF6F8A; }
.pr-bande-j {
  display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 32px; align-items: center; margin-top: 46px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 26px;
}
.pr-bande-j h3 { color: #fff; font-size: 21px; margin: 0 0 4px; }
.pr-bande-j p { margin: 0 0 16px; color: rgba(255,255,255,.82); }
.pr-bande-j p:last-child { margin-bottom: 0; }
.pr-tel-mini { background: #0B0F1A; border-radius: 20px; padding: 6px; border: 1.5px solid rgba(255,255,255,.2); }
.pr-tel-mini img { border-radius: 15px; aspect-ratio: 480 / 480; object-fit: cover; object-position: 0 8%; width: 100%; }

/* ---------- HORS LIGNE ---------- */
.pr-schema { margin: 36px 0 0; background: #fff; border-radius: 14px; border: 1px solid var(--filet); padding: 22px 20px 16px; }
.pr-schema svg { display: block; width: 100%; height: auto; font-family: var(--pr-sans); }
.pr-trois { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 32px; }
.pr-bloc h3 { font-size: 21px; margin: 0 0 6px; }
.pr-bloc p { margin: 0; }

/* ---------- SÉCURITÉ ---------- */
.pr-tuiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 34px; }
.pr-tuile { background: var(--washi); border-radius: 14px; padding: 22px 22px 20px; border: 1px solid var(--filet); border-top: 5px solid var(--kon); }
.pr-ico { width: 42px; height: 42px; border-radius: 10px; background: var(--washi-2); display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.pr-ico svg { width: 24px; height: 24px; }
.pr-tuile h3 { font-size: 19px; margin: 0 0 6px; }
.pr-tuile p { margin: 0; font-size: 16px; }

/* ---------- ESSAYEZ ---------- */
.pr-chiffres { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 32px 0 0; }
.pr-chiffres li { background: #fff; border-radius: 12px; border: 1px solid var(--filet); padding: 16px 18px; }
.pr-chiffres b { display: block; font-size: 40px; font-weight: 900; color: var(--beni); line-height: 1; }
.pr-chiffres span { font-size: 15.5px; color: var(--gris); }
.pr-demo { margin-top: 30px; }
.pr-legende { font-size: 15px; color: var(--gris); margin: 12px 0 0; font-style: italic; font-family: var(--pr-serif); }
.pr-publics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 44px; }
.pr-public h3 { font-size: 21px; margin: 0 0 6px; padding-top: 12px; border-top: 4px solid var(--beni); }
.pr-public p { margin: 0; }

/* ---------- C'EST GRATUIT ---------- */
.pr-final { position: relative; overflow: hidden; background: var(--beni); color: #fff; padding: 70px 0 74px; }
.pr-final-kanji { position: absolute; right: 24px; top: 18px; font-family: var(--pr-jp); font-size: 120px; line-height: 1; color: rgba(255,255,255,.13); pointer-events: none; user-select: none; }
.pr-final-grille { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: end; }
.pr-final h2 { color: #fff; font-size: 54px; font-weight: 900; letter-spacing: .01em; line-height: 1; }
.pr-final-t { font-size: 20px; color: rgba(255,255,255,.93); margin: 16px 0 0; max-width: 34em; }
.pr-final .pr-btn-blanc { color: var(--beni); }
.pr-signature { display: flex; align-items: center; gap: 18px; }
.pr-signature img { width: 104px; height: 104px; }
.pr-signature-t { display: block; text-align: right; font-size: 15px; color: rgba(255,255,255,.88); line-height: 1.3; }
.pr-signature-t b { display: block; font-size: 22px; font-weight: 800; color: #fff; }
.pr-signature-t small { display: block; font-size: 14px; color: rgba(255,255,255,.8); }

/* ---------- PIED ---------- */
.pr-pied { background: var(--kon-nuit); color: rgba(255,255,255,.72); font-size: 15px; }
.pr-pied-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; padding-top: 22px; padding-bottom: 22px; }
.pr-pied-marque { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; letter-spacing: .2em; color: #fff; }
.pr-pied-marque img { width: 22px; height: 22px; border-radius: 4px; }
.pr .pr-pied a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* ================= ÉCRANS MOYENS ================= */
@media (max-width: 1020px) {
  .pr-hero-grille { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .pr-hero h1 { font-size: 44px; }
  .pr-scene { max-width: 720px; }
  .pr-tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .pr-etape-tete { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .pr-grille-j { grid-template-columns: minmax(0, 1fr); }
  .pr-trois, .pr-publics { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .pr-final-grille { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .pr-signature { justify-content: flex-end; flex-direction: row-reverse; }   /* rangée inversée : flex-end = à GAUCHE */
  .pr-signature-t { text-align: left; }
  .pr-lien-pdf span { display: none; }
}

/* ================= TÉLÉPHONE ================= */
@media (max-width: 600px) {
  body.pr { font-size: 16.5px; }
  .pr-cadre { padding: 0 16px; }
  .pr-barre-in { padding: 8px 12px; gap: 8px; }
  .pr-marque { gap: 8px; }
  .pr-marque img { width: 34px; height: 34px; }
  .pr-marque-nom { font-size: 14px; letter-spacing: .14em; }
  .pr-jp { display: none; }
  .pr-lien-pdf { display: none; }
  .pr-actions { gap: 6px; }
  /* Téléphone : « Créer un compte » est dans la couverture, juste dessous ; la barre
     garde la marque et « Se connecter » (mesuré : les deux boutons recouvraient la marque). */
  .pr-actions .pr-btn-trait-clair { display: none; }
  .pr-marque-nom { overflow: hidden; text-overflow: ellipsis; }
  .pr-btn-petit { min-height: 38px; padding: 7px 11px; font-size: 14px; }
  .pr-btn-petit svg { display: none; }
  .pr-hero { padding: 40px 0 56px; }
  .pr-hero-kanji { font-size: 130px; right: -24px; }
  .pr-hero h1 { font-size: 34px; }
  .pr-promesse { font-size: 17.5px; }
  .pr-appels { margin-top: 22px; }
  .pr-appels .pr-btn { flex: 1 1 100%; white-space: normal; text-align: center; }
  .pr-scene { padding: 0 34px 24px 0; }
  .pr-tel { width: 30%; border-radius: 14px; padding: 4px; }
  .pr-tel img { border-radius: 10px; }
  .pr-gratuit { width: 84px; height: 84px; left: -6px; bottom: -14px; border-width: 2px; }
  .pr-gratuit b { font-size: 15px; }
  .pr-gratuit span { font-size: 8px; margin-top: 3px; }
  .pr-section { padding: 56px 0; }
  .pr-grand { font-size: 29px; }
  .pr-chapo { font-size: 17.5px; }
  .pr-etapes { gap: 42px; margin-top: 34px; }
  .pr-etape h3 { font-size: 21px; gap: 11px; }
  .pr-num { width: 34px; height: 34px; font-size: 17px; }
  .pr-rang { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .pr-bande-j { grid-template-columns: minmax(0, 1fr); padding: 20px; gap: 20px; }
  .pr-tel-mini { width: 150px; }
  .pr-schema { padding: 12px 8px 8px; }
  .pr-tuiles { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .pr-chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .pr-chiffres b { font-size: 34px; }
  .pr-final { padding: 50px 0 54px; }
  .pr-final h2 { font-size: 40px; }
  .pr-final-kanji { font-size: 74px; right: 10px; top: 12px; }
  .pr-final-t { font-size: 17.5px; }
  .pr-signature img { width: 84px; height: 84px; }
  .pr-pied-in { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 360px) {
  .pr-marque-nom { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pr-btn { transition: none; }
  .pr-btn:hover { transform: none; }
}

/* Tâche 325 : bouton « Voir le déroulé complet (logigramme) » sous le chapeau du parcours. */
.pr-actions-parcours { margin: 22px 0 0; }
.pr .pr-btn-trait:hover { background: rgba(34,58,112,.07); }

/* Tâche 325 bis (retour user : « je ne vois pas l'accès au processus ») : le logigramme
   aussi dans la barre du haut, sous les boutons du haut de page et dans l'appel final. */
.pr-hero-lien { margin: 18px 0 0; }
.pr-hero-lien a { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 700; font-size: 16px; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255,255,255,.45); }
.pr-hero-lien a:hover { text-decoration-color: #fff; }
.pr-hero-lien a:focus-visible { outline: 3px solid #FFC2CF; outline-offset: 2px; }
.pr-hero-lien svg { width: 18px; height: 18px; color: #FF8BA0; }

/* Tâche 335 (retour user : « tout en haut, sur les boutons, il manque des bulles
   d'explication ») : bulle immédiate au survol ou au focus clavier, sous le bouton
   (barre du haut). Pas de bulle sur écran tactile (pas de survol). */
.pr-actions [data-bulle] { position: relative; }
.pr-actions [data-bulle]::after { content: attr(data-bulle); position: absolute; top: calc(100% + 10px); right: 0;
  width: max-content; max-width: 280px; white-space: normal; text-align: left; padding: 8px 11px; border-radius: 8px;
  background: #10172b; color: #fff; font-size: 13px; font-weight: 500; line-height: 1.4; letter-spacing: 0;
  box-shadow: 0 6px 18px rgba(0,0,0,.28); opacity: 0; visibility: hidden; transform: translateY(-3px);
  transition: opacity .12s, transform .12s, visibility .12s; pointer-events: none; z-index: 60; }
.pr-actions [data-bulle]:hover::after, .pr-actions [data-bulle]:focus-visible::after { opacity: 1; visibility: visible; transform: none; }
@media (hover: none) { .pr-actions [data-bulle]::after { display: none; } }

/* Audit externe du 01-10-2026 : à 390 px, le bouton « Votre compétition dans KENDO TAIKAI, étape par étape
   (logigramme) » (nowrap) faisait 586 px et toute la page défilait de côté. Tous les boutons de la page
   passent à la ligne et ne dépassent jamais leur conteneur. */
.pr .pr-btn { max-width: 100%; }
.pr .pr-btn-trait, .pr .pr-btn-trait-clair { white-space: normal; text-align: center; height: auto; line-height: 1.3; }
@media (max-width: 700px) { .pr .pr-btn { white-space: normal; text-align: center; height: auto; line-height: 1.3; } }
/* Une ancre (#pr-parcours…) ne passe plus sous la barre collante du haut. */
.pr [id] { scroll-margin-top: 84px; }
/* Tâche 355 : une expression entre guillemets ne se coupe jamais (Chrome coupait après « malgré l'espace insécable). */
.pr-insec { white-space: nowrap; }

/* Tâche 475 (05-10-2026) : « Vous avez déjà vos formulaires et vos contacts ? Ne refaites rien. » — en tête de la couverture. */
.pr-existant { display: inline-block; margin: 0 0 18px; padding: 10px 16px; border-radius: 12px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.28);
  border-left: 5px solid #ee7a2e; color: #fff; font-size: 16px; line-height: 1.45; max-width: 36em; }
.pr-existant b { color: #fff; }
.pr-existant span { color: rgba(255,255,255,.84); }
@media (max-width: 600px) { .pr-existant { font-size: 14.5px; padding: 8px 12px; margin-bottom: 14px; } }

/* Tâche 505 (06-10-2026) : sous-partie « Hébergement et repas » dans la section des stages ;
   frise des « Courriels par étape » dans la section des contacts. */
.pr .pr-sous-titre { font-size: 26px; margin: 52px 0 0; padding-top: 18px; border-top: 1px solid var(--filet); }
.pr-tuiles-suite { margin-top: 22px; }
.pr-schema-etapes { margin-top: 30px; }
.pr-schema-etapes svg { max-width: 860px; margin: 0 auto; }
@media (max-width: 600px) { .pr .pr-sous-titre { font-size: 21px; margin-top: 36px; } }.pr-etapes-liste { display: none; }
@media (max-width: 600px) {
  .pr-schema-etapes { display: none; }
  .pr-etapes-liste { display: block; list-style: none; margin: 24px 0 0; padding: 14px 16px; background: #fff; border: 1px solid var(--filet); border-radius: 14px; }
  .pr-etapes-liste li { position: relative; padding: 4px 0 4px 24px; font-size: 15.5px; color: var(--gris); }
  .pr-etapes-liste li::before { content: ""; position: absolute; left: 2px; top: 10px; width: 11px; height: 11px; border-radius: 50%; background: var(--kon); }
  .pr-etapes-liste li:first-child::before, .pr-etapes-liste li:last-child::before { background: var(--beni); }
  .pr-etapes-liste b { color: var(--kon); margin-right: 6px; }
}
/* =====================================================================
   Tâche 523 (06-10-2026) — nouvelle hiérarchie : trois piliers de même taille
   dès le 2e écran, bandeau « Hébergement et repas » pleine largeur, le commun
   une seule fois, la compétition en images repliée, la sécurité en une ligne.
   Couleurs des piliers (maquette validée) : compétition beni, stage vert,
   passage de grade violet ; hébergement : bandeau kon plein, filet or.
   ===================================================================== */
:root { --pr-vert: #2E7D5B; --pr-violet: #7A4FA0; --pr-or: #D9A521; }

/* Accroche plus courte : les piliers doivent arriver au 2e écran (1366 × 768). */
.pr-hero { padding: 30px 0 38px; }
.pr-hero .pr-surtitre { margin-bottom: 10px; }
.pr-hero .pr-existant { margin-bottom: 14px; font-size: 15px; padding: 8px 14px; }
.pr-hero h1 { font-size: 36px; line-height: 1.07; }
.pr-promesse { font-size: 17.5px; margin-top: 14px; }
.pr-hero .pr-appels { margin-top: 18px; }
.pr-pour-qui { margin-top: 14px; }
.pr-pastilles { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.pr-pastilles a { display: inline-block; color: #fff; text-decoration: none; font-weight: 700; font-size: 14.5px;
  border: 1.5px solid rgba(255,255,255,.4); border-radius: 999px; padding: 5px 14px; }
.pr-pastilles a:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.pr-pastilles a:focus-visible { outline: 3px solid #FFC2CF; outline-offset: 2px; }
.pr-pastilles a.pr-pastille-heb { border-color: var(--pr-or); }

/* ---------- TROIS PILIERS ---------- */
.pr-piliers-section { padding-top: 28px; }
.pr-piliers-section > .pr-cadre { max-width: 1320px; }
.pr .pr-piliers-section .pr-grand { font-size: 32px; max-width: none; }
.pr-piliers-section .pr-chapo { margin-top: 8px; font-size: 17px; max-width: 60em; }
.pr-piliers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 20px; }
.pr-pilier { background: #fff; border: 1px solid var(--filet); border-top: 7px solid var(--kon); border-radius: 14px;
  padding: 0 0 18px; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.pr-pilier > :not(.pr-pilier-shot) { margin-left: 20px; margin-right: 20px; }
.pr-p-comp { border-top-color: var(--beni); }
.pr-p-stage { border-top-color: var(--pr-vert); }
.pr-p-grade { border-top-color: var(--pr-violet); }
.pr-pilier-shot { margin: 0 0 10px; aspect-ratio: 16 / 5; overflow: hidden; background: var(--washi-2); border-bottom: 1px solid var(--filet); }
.pr-pilier-shot img { width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.pr-kj { display: block; font-size: 13px; color: var(--gris); letter-spacing: .08em; }
.pr .pr-pilier h3, .pr .pr-heb h3 { font-size: 26px; margin-top: 1px; margin-bottom: 1px; }
.pr .pr-p-comp h3 { color: var(--beni); }
.pr-acc { font-weight: 700; color: var(--beni); margin-top: 0; margin-bottom: 8px; font-size: 16px; }
.pr-p-stage .pr-acc { color: var(--pr-vert); }
.pr-p-grade .pr-acc { color: var(--pr-violet); }
.pr-pilier ul.pr-points { font-size: 14.5px; line-height: 1.38; margin-bottom: 10px; }
.pr-pilier ul.pr-points li { margin-bottom: 4px; padding-left: 16px; }
.pr-pilier ul.pr-points li::before { width: 7px; height: 7px; top: .55em; }
.pr-p-stage ul.pr-points li::before { background: var(--pr-vert); }
.pr-p-grade ul.pr-points li::before { background: var(--pr-violet); }
.pr-distingue { margin-top: auto; background: #EEF1F7; border-radius: 8px; padding: 7px 11px; font-size: 14px; color: var(--kon); line-height: 1.36; }
.pr-pilier .pr-distingue { margin-bottom: 0; }
.pr .pr-lien { margin-top: 10px; font-size: 14.5px; color: var(--beni); font-weight: 700; text-decoration: none; }
.pr .pr-lien:hover { text-decoration: underline; }
.pr-court { display: none; }

/* ---------- BANDEAU HÉBERGEMENT ET REPAS ---------- */
.pr-heb { margin-top: 22px; background: var(--kon); color: #fff; border-radius: 14px; border-top: 7px solid var(--pr-or);
  padding: 22px 24px 20px; box-shadow: 0 10px 30px rgba(22,38,77,.18); }
.pr-heb-tete { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 26px; align-items: start; }
.pr-heb .pr-kj { color: rgba(255,255,255,.7); }
.pr .pr-heb h3 { color: #fff; }
.pr-heb .pr-acc { color: #FFD36E; }
.pr-heb .pr-distingue { background: rgba(255,255,255,.1); color: #fff; margin-top: 10px; }
.pr .pr-heb b { color: #fff; }
.pr-heb-shot { margin: 0; border-radius: 10px; overflow: hidden; background: #fff; border: 1px solid rgba(255,255,255,.25); box-shadow: 0 8px 24px rgba(0,0,0,.3); }
.pr-heb-shot img { width: 100%; }
ul.pr-heb-points { columns: 2; column-gap: 34px; margin-top: 18px; font-size: 15px; line-height: 1.42; color: rgba(255,255,255,.9); }
ul.pr-heb-points li { break-inside: avoid; margin-bottom: 6px; padding-left: 18px; }
ul.pr-heb-points li::before { background: var(--pr-or); width: 7px; height: 7px; top: .55em; }

/* ---------- GÉRER SON CLUB (tâche 559) : même gabarit que l'hébergement, fond clair, filet beni ---------- */
.pr-club { margin-top: 0; background: #fff; color: var(--kon); border: 1px solid #E4E8F2; border-top: 7px solid var(--beni); box-shadow: 0 10px 30px rgba(22,38,77,.10); }
.pr-club .pr-kj { color: var(--beni); }
.pr .pr-club h3 { color: var(--kon); }
.pr-club .pr-acc { color: var(--beni); }
.pr .pr-club b { color: var(--kon); }
.pr-club .pr-club-txt { font-size: 15.5px; line-height: 1.5; margin: 8px 0 0; color: #2a2c42; }
.pr-club .pr-distingue { background: #FDEEF3; color: var(--kon); }
.pr-club .pr-heb-shot { border-color: #E4E8F2; box-shadow: 0 8px 24px rgba(22,38,77,.14); }
.pr-club ul.pr-heb-points { color: #2a2c42; }
.pr-club ul.pr-heb-points li::before { background: var(--beni); }
.pr-club-suivi { margin: 18px 0 0; border-radius: 10px; overflow: hidden; border: 1px solid #E4E8F2; box-shadow: 0 8px 24px rgba(22,38,77,.12); }
.pr-club-suivi img { width: 100%; display: block; }
.pr-club-suivi figcaption { font-size: 13.5px; color: var(--kon); background: #F4F6FB; padding: 7px 12px; }
.pr-pastilles a.pr-pastille-club { border-color: var(--beni); }
/* Tâche 574 (09-10-2026) : le club devient un pilier à part entière — titre de section, chapo, puis la carte. */
.pr-club-section .pr-club { margin-top: 22px; }
.pr-club-section .pr-chapo { max-width: 60em; }
.pr-club .pr-club-rentree { margin: 14px 0 0; }

/* ---------- POUR LES TROIS ---------- */
.pr-tuiles-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.pr-tuiles-4 .pr-tuile { padding: 18px 18px 16px; display: flex; flex-direction: column; }
.pr-tuiles-4 .pr-tuile h3 { font-size: 17.5px; }
.pr-tuiles-4 .pr-tuile p { font-size: 15px; }
.pr-pour { display: block; margin-top: auto; padding-top: 10px; font-size: 13px; color: var(--gris); font-weight: 600; }

/* ---------- LA COMPÉTITION EN IMAGES (repliée) ---------- */
.pr-replie { margin-top: 22px; }
.pr-replie > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 10px 20px;
  border-radius: 10px; background: var(--beni); color: #fff; font-weight: 700; font-size: 16.5px; }
.pr-replie > summary::-webkit-details-marker { display: none; }
.pr-replie > summary::before { content: "\25B8"; font-size: 15px; transition: transform .15s; }
.pr-replie[open] > summary::before { transform: rotate(90deg); }
.pr-replie > summary:focus-visible { outline: 3px solid #FFC2CF; outline-offset: 2px; }
.pr-replie-fermer { display: none; }
.pr-replie[open] .pr-replie-ouvrir { display: none; }
.pr-replie[open] .pr-replie-fermer { display: inline; }
.pr-images .pr-actions-parcours { margin-top: 18px; }

/* ---------- SÉRIEUX ET SÉCURITÉ : une ligne ---------- */
.pr-securite { background: #fff; border-top: 1px solid var(--filet); padding: 26px 0; }
.pr .pr-securite-t { font-size: 15px; letter-spacing: .2em; text-transform: uppercase; color: var(--beni); margin: 0 0 12px; }
.pr-securite-l { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.pr-securite-l li { background: var(--washi); border: 1px solid var(--filet); border-radius: 10px; padding: 9px 12px; font-size: 14.5px; line-height: 1.35; color: var(--gris); }
.pr-securite-l b { display: block; color: var(--kon); }

/* ---------- APPEL FINAL (démonstration fondue) ---------- */
.pr-final .pr-final-grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 36px; }
.pr-final-l { margin: 10px 0 0; font-size: 15.5px; color: rgba(255,255,255,.85); max-width: 36em; }
.pr-final-demo { margin: 0; border-radius: 10px; overflow: hidden; background: #fff; border: 2px solid rgba(255,255,255,.85); box-shadow: 0 12px 34px rgba(0,0,0,.3); }
.pr-final-demo img { width: 100%; }
.pr-final .pr-signature { justify-content: flex-end; margin-top: 26px; }

/* ---------- ONGLETS COLLANTS (téléphone seulement) ---------- */
.pr-onglets { display: none; }

@media (max-width: 1100px) {
  .pr-tuiles-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pr-securite-l { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1020px) {
  .pr-hero h1 { font-size: 36px; }
}
@media (max-width: 900px) {
  .pr-piliers { grid-template-columns: minmax(0, 1fr); }
  .pr-heb-tete { grid-template-columns: minmax(0, 1fr); }
  .pr-final .pr-final-grille { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .pr-hero { padding: 30px 0 40px; }
  .pr-hero h1 { font-size: 28px; }
  .pr-promesse { font-size: 16.5px; }
  .pr-pastilles a { font-size: 13.5px; padding: 4px 11px; }
  .pr-piliers-section { padding-top: 0; }
  .pr-onglets { display: grid; grid-template-columns: repeat(5, auto); justify-content: space-between; position: sticky; top: 54px; z-index: 15;
    background: #fff; border-bottom: 1px solid var(--filet); padding: 0 8px; margin-bottom: 26px; box-shadow: 0 2px 8px rgba(22,38,77,.08); }
  .pr .pr-onglets a { text-align: center; padding: 11px 4px 9px; font-size: 13.5px; font-weight: 700; color: var(--kon); text-decoration: none; border-bottom: 3px solid transparent; }
  .pr .pr-onglets a:nth-child(1) { border-bottom-color: var(--beni); }
  .pr .pr-onglets a:nth-child(2) { border-bottom-color: var(--pr-vert); }
  .pr .pr-onglets a:nth-child(3) { border-bottom-color: var(--pr-violet); }
  .pr .pr-onglets a:nth-child(4) { border-bottom-color: var(--pr-or); }
  .pr .pr-onglets a:nth-child(5) { border-bottom-color: var(--kon); }
  .pr .pr-piliers-section [id] { scroll-margin-top: 104px; }
  .pr-long { display: none; }
  .pr-court { display: inline; }
  .pr-pilier > :not(.pr-pilier-shot) { margin-left: 16px; margin-right: 16px; }
  .pr .pr-pilier h3, .pr .pr-heb h3 { font-size: 22px; }
  .pr-heb { padding: 18px 16px; }
  ul.pr-heb-points { columns: 1; }
  .pr-tuiles-4 { grid-template-columns: minmax(0, 1fr); }
  .pr-securite-l { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pr-replie > summary { width: 100%; justify-content: center; }
}

/* Jour J : les trois façons de faire (user 06-10-2026 : aucun matériel obligatoire) */
.pr-modes { list-style: none; padding: 0; margin: 36px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.pr-mode { border: 1px solid rgba(255,255,255,.18); border-radius: 10px; padding: 18px 20px; background: rgba(255,255,255,.04); }
.pr-mode p { margin: 0; color: rgba(255,255,255,.82); }
.pr-mode .pr-mode-nom { color: #fff; font-size: 19px; font-weight: 700; margin: 0 0 8px; display: flex; align-items: center; gap: 10px; }
.pr-modes-pied { margin: 16px 0 0; color: rgba(255,255,255,.78); }
.pr-sous-jourj { color: #fff; font-size: 22px; margin: 48px 0 0; }
.pr-sous-jourj + .pr-grille-j { margin-top: 20px; }
@media (max-width: 860px) {
  .pr-modes { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}

/* =====================================================================
   Tâche 857 (15-10-2026) — LE SITE WEB EN PAGES : menu standard, une page
   par entrée (app/lib/site_web.php). Le user : « un menu standard pour le
   site web me semble plus facile à lire pour l'utilisateur ».
   Menu sur UNE ligne à partir de 1300 px (mesuré au pire cas, police de
   repli Segoe UI : marque 207 + liens 657 + boutons 311 + écarts = 1 203 px
   pour 1 235 px utiles à 1300 px) ; en dessous, le bouton ☰ « Menu » déplie
   la liste sous la barre (script au nonce de la coque ; sans script, le menu
   reste affiché, sous la barre). Mêmes couleurs. Téléphone 375 px : aucun
   défilement latéral.
   ===================================================================== */

/* ---------- BARRE ET MENU ---------- */
/* Relecture du 15-10-2026 (D9) : à 1 440 px et plus, le nom japonais et l'espacement .26em reviennent ; avec la police de
   secours (Segoe UI, tant que Source Sans 3 n'est pas chargée), la barre demande 1 292 px (mesuré PIL) — plafonnée à
   1 320 px, elle n'en offrait que 1 272 et le menu débordait. Plafond 1 400 px : 1 352 px utiles (60 px de marge). Sous
   1 440 px, rien ne change (le nom japonais est masqué, la barre ne dépasse pas l'écran). */
.pr-barre-in { max-width: 1400px; }
.pr-nav { flex: 1 1 auto; display: flex; justify-content: center; min-width: 0; }
.pr-nav-liens { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 2px; }
.pr .pr-nav-liens a { display: block; position: relative; padding: 9px 8px; border-radius: 8px; color: rgba(255,255,255,.86);
  text-decoration: none; font-weight: 600; font-size: 15px; line-height: 1.2; white-space: nowrap; }
.pr .pr-nav-liens a:hover { color: #fff; background: rgba(255,255,255,.08); }
.pr .pr-nav-liens a:focus-visible { outline: 3px solid #FFC2CF; outline-offset: 1px; }
.pr .pr-nav-liens a[aria-current="page"] { color: #fff; }
.pr .pr-nav-liens a[aria-current="page"]::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 1px; height: 3px;
  border-radius: 2px; background: var(--rose); }
.pr-nav-acces { display: none; }
.pr-actions { flex: none; }
.pr-burger { display: none; align-items: center; gap: 7px; min-height: 40px; padding: 7px 12px; border-radius: 9px;
  border: 1.5px solid rgba(255,255,255,.55); background: transparent; color: #fff; font: 700 15px/1 var(--pr-sans); cursor: pointer; }
.pr-burger svg { width: 20px; height: 20px; }
.pr-burger:hover { background: rgba(255,255,255,.1); border-color: #fff; }
.pr-burger:focus-visible { outline: 3px solid #FFC2CF; outline-offset: 2px; }
.pr-burger .pr-burger-fermer { display: none; }
.pr-burger[aria-expanded="true"] .pr-burger-ouvrir { display: none; }
.pr-burger[aria-expanded="true"] .pr-burger-fermer { display: inline; }
@media (max-width: 1439px) {
  .pr-jp { display: none; }
  .pr-marque-nom { letter-spacing: .18em; }
}
@media (max-width: 1299px) {
  /* Le bouton est avant le menu dans la page (ordre du clavier) ; à l'écran : la marque, les accès, puis ☰ à droite. */
  .pr-burger { display: inline-flex; order: 3; }
  .pr-actions { order: 2; margin-left: auto; }
  .pr-nav { display: block; flex: none; }
  .pr-nav-liens { flex-direction: column; align-items: stretch; gap: 0; max-width: 640px; margin: 0 auto; padding: 6px 16px 14px; }
  .pr .pr-nav-liens a { padding: 13px 12px; font-size: 17px; border-radius: 0; border-bottom: 1px solid rgba(255,255,255,.08); }
  .pr .pr-nav-liens a[aria-current="page"] { background: rgba(255,255,255,.07); box-shadow: inset 4px 0 0 var(--rose); }
  .pr .pr-nav-liens a[aria-current="page"]::after { display: none; }
  .pr-js .pr-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--kon-nuit);
    border-top: 1px solid rgba(255,255,255,.12); box-shadow: 0 16px 30px rgba(0,0,0,.35);
    max-height: calc(100vh - 56px); overflow-y: auto; overscroll-behavior: contain; }
  .pr-js .pr-nav.pr-nav-ouvert { display: block; }
  /* Sans script : le menu reste affiché sous la barre (la barre ne colle plus en haut). */
  html:not(.pr-js) .pr-barre { position: static; }
  html:not(.pr-js) .pr-barre-in { flex-wrap: wrap; }
  html:not(.pr-js) .pr-nav { order: 4; flex: 1 1 100%; }
  html:not(.pr-js) .pr-nav-liens { flex-direction: row; flex-wrap: wrap; max-width: none; padding: 0; }
  html:not(.pr-js) .pr-burger { display: none; }
}
@media (max-width: 600px) {
  /* Téléphone : « Créer un compte » quitte la barre (règle d'avant) mais reste dans le menu déplié. */
  .pr-nav-acces { display: block; }
  .pr .pr-nav-acces a { color: #FF8BA0; font-weight: 700; }
  .pr-marque-nom { letter-spacing: .14em; }   /* la règle téléphone d'avant (le seuil 1439 px ci-dessus l'écrasait) */
}
@media (max-width: 480px) {
  .pr-burger { padding: 7px 9px; }
  .pr-burger-t { display: none; }
}

/* ---------- COUVERTURE D'UNE PAGE : une seule capture (pas de téléphone) ---------- */
.pr-scene.pr-scene-seule { padding: 0 0 34px 0; }
@media (max-width: 600px) { .pr-scene.pr-scene-seule { padding: 0 0 24px 0; } }

/* ---------- ACCUEIL : LES QUATRE ACTIVITÉS ---------- */
.pr-cadre-large { max-width: 1320px; }
.pr-activites-section { padding-top: 64px; }
.pr-piliers-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pr-p-club { border-top-color: var(--kon); }
.pr-p-club .pr-acc { color: var(--kon); }
.pr-p-club ul.pr-points li::before { background: var(--kon); }
.pr .pr-pilier .pr-carte-lien { margin-top: auto; padding-top: 10px; font-weight: 700; font-size: 15.5px; color: var(--beni); text-decoration: none; }
.pr .pr-p-stage .pr-carte-lien { color: var(--pr-vert); }
.pr .pr-p-grade .pr-carte-lien { color: var(--pr-violet); }
.pr .pr-p-club .pr-carte-lien { color: var(--kon); }
.pr .pr-pilier .pr-carte-lien:hover { text-decoration: underline; }
.pr .pr-pilier .pr-carte-lien:focus-visible { outline: 3px solid #FFC2CF; outline-offset: 2px; }
.pr-pilier ul.pr-points { margin-bottom: 4px; }
.pr-heb-ligne { margin: 18px 0 0; background: var(--kon); color: rgba(255,255,255,.9); border-radius: 12px; border-left: 6px solid var(--pr-or);
  padding: 12px 18px; font-size: 16px; line-height: 1.5; }
.pr .pr-heb-ligne b { color: #fff; }
.pr .pr-heb-ligne a { color: #FFD36E; font-weight: 700; text-decoration: none; white-space: nowrap; }
.pr .pr-heb-ligne a:hover { text-decoration: underline; }
@media (max-width: 1100px) { .pr-piliers-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .pr-piliers-4 { grid-template-columns: minmax(0, 1fr); } }

/* Une tuile peut finir par son lien (la tuile est une colonne : le lien descend en bas). */
.pr .pr-tuile .pr-lien { display: inline-block; margin-top: auto; padding-top: 10px; }
.pr .pr-tuile p .pr-lien { padding-top: 0; }

/* ---------- ACCUEIL : LE JOUR J EN IMAGES ---------- */
.pr-vitrine-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 30px; align-items: start; }
.pr-vitrine .pr-shot { border-color: rgba(255,255,255,.12); box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.pr-vitrine figcaption { background: #0E1A36; color: rgba(255,255,255,.86); font-size: 14px; font-weight: 600; padding: 8px 12px; }
@media (max-width: 820px) { .pr-vitrine-grille { grid-template-columns: minmax(0, 1fr); } }

/* ---------- PAGES : TUILES CÔTE À CÔTE, TEXTE + CAPTURE, POINTS SUR DEUX COLONNES ---------- */
.pr-deux { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 26px; }
.pr-deux.pr-trois-col { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pr-deux .pr-tuile { background: #fff; }
.pr-deux .pr-tuile h3 { font-size: 19px; }
.pr-blanc .pr-deux .pr-tuile { background: var(--washi); }
.pr-fonction-grille { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 34px; align-items: start; margin-top: 26px; }
.pr-fonction-grille .pr-shot { max-width: 560px; }
.pr-fonction-grille.pr-fonction-tel { grid-template-columns: minmax(0, 1fr) 180px; }
.pr-fonction-tel .pr-tel-mini { width: 180px; }
ul.pr-points-2col { columns: 2; column-gap: 40px; margin-top: 26px; }
ul.pr-points-2col li { break-inside: avoid; margin-bottom: 10px; }
.pr-marge-haut { margin-top: 26px; }
.pr .pr-heb .pr-heb-titre { font-size: 26px; color: #fff; margin: 1px 0; }
.pr-modes.pr-modes-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 26px; }
@media (max-width: 1100px) { .pr-deux { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .pr-deux.pr-trois-col { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 860px) { .pr-modes.pr-modes-2 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 820px) {
  .pr-fonction-grille, .pr-fonction-grille.pr-fonction-tel { grid-template-columns: minmax(0, 1fr); }
  ul.pr-points-2col { columns: 1; }
}
@media (max-width: 640px) { .pr-deux { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .pr .pr-heb .pr-heb-titre { font-size: 22px; } }

/* ---------- « POUR ALLER PLUS LOIN » : LES AUTRES PAGES ---------- */
.pr-suite-section { padding: 56px 0; }
.pr .pr-suite-titre { font-size: 24px; margin: 0 0 18px; }
.pr-suite { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.pr .pr-suite-carte { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: 12px; border: 1px solid var(--filet);
  border-left: 5px solid var(--beni); background: #fff; color: var(--encre); text-decoration: none; transition: transform .15s, box-shadow .15s; }
.pr-blanc .pr-suite-carte { background: var(--washi); }
.pr .pr-suite-carte b { color: var(--kon); font-size: 17px; }
.pr .pr-suite-carte span { font-size: 14.5px; color: var(--gris); line-height: 1.4; }
.pr .pr-suite-carte:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(22,38,77,.12); }
.pr .pr-suite-carte:focus-visible { outline: 3px solid #FFC2CF; outline-offset: 2px; }
@media (max-width: 600px) { .pr-suite-section { padding: 40px 0; } .pr .pr-suite-titre { font-size: 21px; } }

/* ---------- PIED : PLAN DU SITE ---------- */
.pr-pied-grille { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr) minmax(0, 1fr); gap: 24px 40px;
  padding-top: 34px; padding-bottom: 30px; align-items: start; }
.pr-pied-col p { margin: 10px 0 0; font-size: 14.5px; line-height: 1.5; }
.pr-pied-nav ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 28px; }
.pr-pied-nav li { margin: 0 0 8px; break-inside: avoid; }
.pr .pr-pied-nav a { color: rgba(255,255,255,.86); text-decoration: none; }
.pr .pr-pied-nav a:hover { color: #fff; text-decoration: underline; }
.pr .pr-pied-nav a[aria-current="page"] { color: #fff; font-weight: 700; }
.pr .pr-pied-nav a:focus-visible, .pr .pr-pied-acces a:focus-visible { outline: 3px solid #FFC2CF; outline-offset: 2px; }
.pr-pied-acces { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
@media (max-width: 820px) { .pr-pied-grille { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .pr-pied-nav ul { columns: 1; } }
@media (prefers-reduced-motion: reduce) { .pr .pr-suite-carte { transition: none; } .pr .pr-suite-carte:hover { transform: none; } }

/* ---------- PAGE DU CLUB : les liens vers les pages des événements, en bas de la tuile (relecture du 15-10-2026, D10) ---------- */
.pr .pr-tuile .pr-tuile-liens { margin-top: auto; padding-top: 10px; display: flex; flex-wrap: wrap; gap: 2px 14px; }

/* ---------- CIBLES TACTILES (relecture du 15-10-2026, D8) ----------
   Au téléphone, ou au doigt (écran tactile), les petites cibles font au moins 40 px de haut : pastilles « Aller à… »,
   liens du pied, « Se connecter » de la barre (38 px avant), liens des tuiles. À la souris, sur PC, rien ne change. */
@media (max-width: 600px), (pointer: coarse) {
  .pr-pastilles a { display: inline-flex; align-items: center; min-height: 40px; }
  .pr .pr-pied-nav a, .pr .pr-pied-acces a { display: inline-flex; align-items: center; min-height: 40px; }
  .pr-pied-nav li { margin-bottom: 2px; }
  .pr-pied-acces { gap: 2px; }
  .pr-btn-petit { min-height: 40px; }
  .pr .pr-tuile .pr-tuile-liens a { display: inline-flex; align-items: center; min-height: 40px; }   /* plus fort que « .pr .pr-tuile .pr-lien » */
}

/* Tâche 913 (user 17-10 : « quand on clique dans un champ, la fenêtre zoome avant, elle n'est plus circonscrite dans
   l'écran, il faut pincer ») : sur téléphone et tablette, un champ écrit en moins de 16 px déclenche le zoom automatique
   du navigateur (iPhone) au toucher. Tout champ de saisie fait 16 px sur un écran tactile, quelle que soit sa largeur,
   cases de grille en édition et éditeurs riches compris. */
@media (pointer: coarse) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),
  select, textarea, .dx-texteditor-input, [contenteditable="true"], .dx-htmleditor-content { font-size: 16px !important; }
}