/*
 * Page « Notre cabinet » : la psychomotricité, le cercle des valeurs, le fonctionnement,
 * le parcours d'accompagnement et le règlement intérieur.
 */

@keyframes cemOrbit { to { transform: rotate(360deg); } }
@keyframes cemBreath { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }

/* ---------- Bandeau photo ---------- */

.cabinet-bandeau { position: relative; height: clamp(240px, 45vw, 460px); overflow: hidden; }
.cabinet-bandeau-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cabinet-bandeau-degrade {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(46, 42, 40, .5) 0, rgba(46, 42, 40, .25) 28%, rgba(46, 42, 40, 0) 55%);
}
.cabinet-bandeau-vague { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 80px; display: block; }

/* ---------- Qu'est-ce que la psychomotricité ? ---------- */

.psychomot { position: relative; padding: 56px 24px 40px; background: var(--creme); }
.psychomot-surtitre { font-family: Delius, sans-serif; font-size: 22px; color: #63615D; text-align: center; margin-bottom: 8px; }
.psychomot h1 {
  margin: 0 auto 40px; max-width: 1040px; font-family: Delius, sans-serif; font-weight: 700;
  font-size: clamp(32px, 8vw, 44px); line-height: 1.1; color: var(--turquoise); text-wrap: balance; text-align: center;
}
.psychomot-grille {
  max-width: 1040px; margin: 0 auto; position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 40px; align-items: center;
}
.psychomot-gauche { position: relative; padding: 24px clamp(0px, 4vw, 40px) 24px 0; }
.psychomot-cercle {
  position: absolute; right: -34px; top: -24px; width: 260px; height: 260px; border-radius: 50%; z-index: 0;
  background: conic-gradient(from 200deg, #FCE3EC, #EEF4DC, #DFF0EE, #FCE3EC); animation: cemBreath 7s ease-in-out infinite;
}
.psychomot-dessin { position: absolute; top: 194px; right: -10px; height: 120px; z-index: 2; pointer-events: none; }
.psychomot-carte {
  position: relative; z-index: 1; background: var(--creme-clair); color: var(--texte); border-radius: 24px;
  padding: 28px clamp(20px, 4vw, 34px); display: flex; flex-direction: column; gap: 18px; box-shadow: 0 10px 30px rgba(80, 60, 40, .1);
}
.psychomot-accroche { margin: 0; font-family: Delius, sans-serif; font-size: 23px; line-height: 1.3; color: var(--turquoise-fonce); text-wrap: pretty; }
.psychomot-textes { display: flex; flex-direction: column; gap: 18px; }
.psychomot-textes p { margin: 0; font-size: 16px; line-height: 1.7; text-wrap: pretty; }
.psychomot-textes .psychomot-resume {
  font-size: 17px; line-height: 1.6; font-weight: 600; color: var(--encre-fonce);
  padding-left: 16px; border-left: 3px solid var(--rose);
}

/* L'arche arc-en-ciel : la vidéo du cabinet, bordée de 3 traits fins (5 px) aux couleurs du logo.
   Elle est assez basse pour ne pas couper les titres incrustés dans la vidéo, en bas comme au milieu. */
.arche { width: 100%; max-width: 520px; margin: 0 auto; padding: 8px 6px 30px; }
.arche-bande { padding: 5px 5px 0; border-radius: 50% 50% 0 0 / 72% 72% 0 0; background: var(--turquoise); }
.arche-bande .arche-bande { background: var(--vert); }
.arche-bande .arche-bande .arche-bande { background: var(--rose); }
.arche-ecran {
  aspect-ratio: 16 / 9; overflow: hidden; isolation: isolate; background: #EFE6DA;
  border-radius: 50% 50% 0 0 / 72% 72% 0 0;
}
.arche-ecran video { width: 100%; height: 100%; object-fit: cover; display: block; }
.arche-socle {
  height: 14px; margin: 0 -14px; border-radius: 999px; background: #E6D9C8;
  box-shadow: 0 14px 24px -10px rgba(80, 60, 40, .35);
}
/* Côte à côte : l'arche occupe toute sa colonne et sa base est alignée sur celle de l'encadré
   (24 px : la marge sous l'encadré, dans .psychomot-gauche) */
@media (min-width: 700px) {
  .arche { align-self: end; max-width: none; padding-bottom: 0; margin-bottom: 24px; }
}
/* Grands écrans : la section s'élargit, l'encadré garde sa taille et l'arche prend toute la place à droite
   (à partir de 1090 px, la section dépasse 1040 px : pas de saut de taille au passage) */
@media (min-width: 1090px) {
  .psychomot-grille { max-width: 1200px; grid-template-columns: 500px minmax(0, 1fr); }
}

/* ---------- Le cercle des valeurs ---------- */

.valeurs {
  position: relative; padding: 112px 24px 120px;
  background: radial-gradient(circle at 4% 10%, rgba(247, 190, 212, .55), transparent 34%),
              radial-gradient(circle at 96% 92%, rgba(213, 226, 160, .55), transparent 34%), #FFFCF8;
}
.valeurs-vague-bas { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 72px; display: block; }
.valeurs-int { max-width: 1040px; margin: 0 auto; display: flex; flex-direction: column; gap: 32px; align-items: center; text-align: center; }
.valeurs h2, .cabinet-titres h2 {
  margin: 0; font-family: Delius, sans-serif; font-weight: 700; font-size: clamp(28px, 7vw, 34px);
  line-height: 1.2; color: var(--encre); text-wrap: balance;
}
.valeurs-sous-titre { margin: -16px 0 0; font-family: Delius, sans-serif; font-size: 20px; color: var(--framboise); }
.anneau-cadre { display: flex; justify-content: center; width: min(594px, 100%); }
.anneau { position: relative; width: min(680px, 100%); max-height: 100%; aspect-ratio: 1 / 1; margin: 8px auto 0; container-type: size; flex: none; }
.anneau-carre {
  position: absolute; left: 50%; top: 50%; width: min(100cqw, 100cqh); height: min(100cqw, 100cqh);
  transform: translate(-50%, -50%);
}
.anneau-orbite { position: absolute; inset: 6%; border-radius: 50%; border: 1.5px dashed #D9C9B4; }
/* Les 3 points de couleur qui tournent sur le pointillé */
.anneau-point { position: absolute; inset: 0; z-index: 1; pointer-events: none; animation: cemOrbit 18s linear infinite; }
.anneau-point span {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%); display: block;
  width: 14px; height: 14px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 4px #FFFCF8;
}
.anneau-schema {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 70%; height: 70%; object-fit: contain; display: block;
}
/* Une valeur prend la couleur du point qui passe dessus (voir notre-cabinet.js) */
.anneau-valeur {
  position: absolute; transform: translate(-50%, -50%); z-index: 2; white-space: nowrap;
  font-family: Delius, sans-serif; font-size: clamp(12px, 2.4cqw, 17px); color: var(--creme);
  background: var(--texte); padding: .55em 1em; border-radius: 999px; transition: background .35s ease;
}

/* ---------- Notre fonctionnement ---------- */

.fonctionnement { background: var(--beige); padding: 80px 24px 120px; position: relative; }
.fonctionnement-vague { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 80px; display: block; }
.cabinet-int { max-width: 1040px; margin: 0 auto; display: flex; flex-direction: column; gap: 40px; position: relative; }
.cabinet-titres { display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center; }
.fonctionnement-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 20px; }
.fonctionnement-carte {
  background: var(--creme-clair); border-radius: 20px; padding: 26px 24px; display: flex; flex-direction: column; gap: 16px;
  box-shadow: 0 8px 24px rgba(80, 60, 40, .07); border-top: 4px solid var(--c); transition: transform .3s;
}
.fonctionnement-carte:hover { transform: translateY(-5px); }
.fonctionnement-carte img { width: 64px; height: 64px; object-fit: contain; display: block; }
.fonctionnement-titre { font-family: Delius, sans-serif; font-size: 19px; color: var(--encre); line-height: 1.25; }
.fonctionnement-carte p { margin: 0; font-size: 15px; line-height: 1.6; }

/* La charte (05/11/2026, maquette « rosace » + anneau du médaillon) : un rond cerclé des quatre couleurs.
   Téléphone : une colonne, le rond entre la 2e et la 3e carte ; tablette : deux colonnes, le rond sur sa ligne ;
   960 px et plus : les quatre cartes, deux par deux, s'échancrent autour du rond. */
.fonctionnement-case { display: contents; }
.fonctionnement-grille--charte { grid-template-columns: minmax(0, 1fr); }
.charte-rond {
  justify-self: center; box-sizing: border-box; width: 300px; max-width: 100%; aspect-ratio: 1; padding: 11px; border: 0; border-radius: 50%; cursor: pointer;
  font: inherit; color: inherit; transition: transform .3s; filter: drop-shadow(0 10px 22px rgba(80, 60, 40, .14));
  background: conic-gradient(from -45deg, var(--rose) 0 23%, transparent 0 25%, var(--vert) 0 48%, transparent 0 50%,
    var(--turquoise) 0 73%, transparent 0 75%, var(--ocre) 0 98%, transparent 0);
}
.charte-rond:hover { transform: translateY(-4px); }
.charte-rond:focus-visible { outline: 3px solid var(--turquoise-fonce); outline-offset: 4px; }
.charte-rond-int {
  box-sizing: border-box; width: 100%; height: 100%; border-radius: 50%; background: var(--creme-clair); padding: 28px 36px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center;
}
.charte-picto { width: 54px; height: 54px; display: block; flex: none; }
.charte-rond-titre { font-family: Delius, sans-serif; font-weight: 700; font-size: 22px; line-height: 1.2; color: var(--encre); text-wrap: balance; }
.charte-rond-lire { font-weight: 600; font-size: 15px; color: var(--turquoise-fonce); }
.charte-rond:hover .charte-rond-lire { text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 600px) {
  .fonctionnement-grille--charte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fonctionnement-grille--charte .charte-rond { grid-column: 1 / -1; }
}
/* Les quatre cartes autour de la charte (05/11/2026, maquette D) : l'icône sur la ligne du titre, côté extérieur,
   à droite pour la colonne de droite, et le paragraphe dessous. Sous 720 px, le titre n'aurait plus la place à côté de l'icône
   (5 lignes à 600 px) : l'icône reste au-dessus du titre. */
@media (min-width: 720px) {
  .fonctionnement-grille--rosace .fonctionnement-carte { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: center; align-content: start; }
  .fonctionnement-grille--rosace .fonctionnement-carte img { grid-column: 1; grid-row: 1; }
  .fonctionnement-grille--rosace .fonctionnement-titre { grid-column: 2; grid-row: 1; text-wrap: balance; }
  .fonctionnement-grille--rosace .fonctionnement-carte p { grid-column: 1 / -1; }
  .fonctionnement-grille--rosace .fonctionnement-case--2 .fonctionnement-carte,
  .fonctionnement-grille--rosace .fonctionnement-case--4 .fonctionnement-carte { grid-template-columns: minmax(0, 1fr) 64px; }
  .fonctionnement-grille--rosace .fonctionnement-case--2 img,
  .fonctionnement-grille--rosace .fonctionnement-case--4 img { grid-column: 2; }
  .fonctionnement-grille--rosace .fonctionnement-case--2 .fonctionnement-titre,
  .fonctionnement-grille--rosace .fonctionnement-case--4 .fonctionnement-titre { grid-column: 1; }
  .fonctionnement-grille--rosace .fonctionnement-carte:not(:has(img)) .fonctionnement-titre { grid-column: 1 / -1; } /* carte sans icône */
}
/* Rosace : deux rangées de même hauteur, sinon le rond n'est plus au milieu des échancrures */
@media (min-width: 960px) {
  .fonctionnement-grille--rosace { position: relative; grid-auto-rows: 1fr; }
  .fonctionnement-grille--rosace .fonctionnement-case { display: block; filter: drop-shadow(0 8px 14px rgba(80, 60, 40, .08)); }
  .fonctionnement-grille--rosace .fonctionnement-carte { height: 100%; box-sizing: border-box; box-shadow: none; }
  /* 180 px côté rond : le texte reste à 26 px au moins de l'échancrure (mesuré ligne par ligne, 960 à 1440 px) */
  .fonctionnement-grille--rosace .fonctionnement-carte p { text-wrap: pretty; }
  .fonctionnement-grille--rosace .fonctionnement-case--1 .fonctionnement-carte { padding-right: 180px; -webkit-mask: radial-gradient(circle 168px at calc(100% + 10px) calc(100% + 10px), transparent 98%, #000); mask: radial-gradient(circle 168px at calc(100% + 10px) calc(100% + 10px), transparent 98%, #000); }
  .fonctionnement-grille--rosace .fonctionnement-case--2 .fonctionnement-carte { padding-left: 180px; -webkit-mask: radial-gradient(circle 168px at -10px calc(100% + 10px), transparent 98%, #000); mask: radial-gradient(circle 168px at -10px calc(100% + 10px), transparent 98%, #000); }
  .fonctionnement-grille--rosace .fonctionnement-case--3 .fonctionnement-carte { padding-right: 180px; align-content: end; -webkit-mask: radial-gradient(circle 168px at calc(100% + 10px) -10px, transparent 98%, #000); mask: radial-gradient(circle 168px at calc(100% + 10px) -10px, transparent 98%, #000); }
  .fonctionnement-grille--rosace .fonctionnement-case--4 .fonctionnement-carte { padding-left: 180px; align-content: end; -webkit-mask: radial-gradient(circle 168px at -10px -10px, transparent 98%, #000); mask: radial-gradient(circle 168px at -10px -10px, transparent 98%, #000); }
  .fonctionnement-grille--rosace .charte-rond { position: absolute; left: 50%; top: 50%; z-index: 1; margin: -150px 0 0 -150px; }
}

/* Fenêtre de la charte (même allure que celle des actualités de l'accueil) */
.charte-fenetre {
  border: none; padding: 0; background: var(--creme); color: inherit; border-radius: 22px;
  width: calc(100% - 48px); max-width: 720px; max-height: 90vh; overflow: auto; box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
}
.charte-fenetre::backdrop { background: rgba(46, 42, 40, .6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.charte-fenetre-fermer {
  position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; border-radius: 50%; border: none; z-index: 2;
  background: var(--creme); color: var(--encre-fonce); display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, .18); transition: all .2s;
}
.charte-fenetre-fermer:hover { background: var(--framboise); color: #fff; }
.charte-fenetre-tete { display: flex; gap: 18px; align-items: center; padding: 30px 70px 18px 32px; border-bottom: 1px solid #EADFD0; }
.charte-fenetre-tete .charte-picto { width: 64px; height: 64px; }
.charte-fenetre-surtitre { font-family: Delius, sans-serif; font-size: 16px; color: var(--turquoise); margin-bottom: 2px; }
.charte-fenetre h2 { margin: 0; font-family: Delius, sans-serif; font-weight: 700; font-size: 26px; line-height: 1.2; color: var(--encre-fonce); text-wrap: balance; }
.charte-fenetre-corps { padding: 22px 32px 34px; display: flex; flex-direction: column; gap: 14px; }
.charte-fenetre p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--texte); text-wrap: pretty; }
.charte-engagements { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 16px; }
/* Engagements (maquette « F » du 05/11/2026) : un dessin au trait en couleur, le titre dans l'écriture du menu.
   Patrick Hand est dessinée plus petite que Delius : 22,4 px = 20 px × 1,12. */
.charte-engagements li { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 14px; align-items: start; }
.charte-dessin { width: 42px; height: 42px; display: block; margin-top: 1px; color: var(--turquoise); }
.charte-engagements li:nth-child(3n + 1) .charte-dessin { color: var(--rose); }
.charte-engagements li:nth-child(3n + 2) .charte-dessin { color: var(--vert); }
.charte-engagements li:nth-child(6) .charte-dessin { color: var(--ocre); }
.charte-engagements h3 { margin: 4px 0 2px; font-family: 'Patrick Hand', cursive; font-weight: 400; font-size: 22.4px; line-height: 1.2; color: var(--encre-fonce); text-wrap: balance; }
.charte-engagements p { font-size: 15.5px; }
@media (max-width: 600px) {
  .charte-fenetre-tete { padding: 24px 66px 16px 22px; gap: 14px; }
  .charte-fenetre-tete .charte-picto { width: 48px; height: 48px; }
  .charte-fenetre h2 { font-size: 23px; }
  .charte-fenetre-corps { padding: 20px 22px 28px; }
}

/* ---------- Parcours d'accompagnement ---------- */

.parcours { background: #FFFFFF; padding: 40px 24px 56px; display: flex; flex-direction: column; gap: 24px; align-items: center; text-align: center; }
.parcours .cabinet-titres { gap: 8px; }

/* Le carrefour : la rencontre, un chemin, un panneau à trois directions (choix du 05/11/2026, piste C1).
   Téléphone : le dessin (312 × 384 px) puis, dessous, chaque direction et ses précisions.
   Ordinateur (768 px et plus) : la rencontre et le chemin à gauche, le poteau et ses trois planches
   à droite, chaque liste en face de sa planche. */
.chemin { position: relative; box-sizing: border-box; width: 312px; margin: 0 auto; padding-top: 392px; text-align: left; }
.chemin-sentier { position: absolute; left: 0; top: 0; overflow: visible; }
.chemin-sentier path { fill: none; stroke: #EFE4D3; stroke-width: 28; stroke-linecap: round; }
.chemin-sentier path.chemin-tirets { stroke: #fff; stroke-width: 2.5; stroke-dasharray: 10 9; }
.chemin-sentier--large { display: none; }
.chemin-sentier--etroit { width: 312px; height: 384px; }
.chemin-sol { position: absolute; left: 127px; top: 355px; width: 56px; height: 10px; border-radius: 50%; background: #E2D5C2; }
.chemin-poteau { position: absolute; left: 150px; top: 176px; width: 10px; height: 184px; border-radius: 4px; background: #A38668; }
.chemin-bonhomme { position: absolute; left: 48px; top: 290px; width: auto; height: 70px; pointer-events: none; }
.chemin-depart {
  position: absolute; left: 103px; top: 10px; width: 104px; height: 104px; margin: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; text-align: center; text-wrap: balance;
  background: #E93E84; color: #fff; font: 700 20px/1.12 Delius, sans-serif;
}
.chemin-directions { list-style: none; margin: 0; padding: 0 6px; display: grid; gap: 16px; }
.chemin-direction--1 { --c-panneau: #BAD48D; --c-point: #93B65A; --c-texte: #55701F; }
.chemin-direction--2 { --c-panneau: #A8DCD6; --c-point: #4FB3AB; --c-texte: #2C7772; }
.chemin-direction--3 { --c-panneau: #F6CD96; --c-point: #E3A350; --c-texte: #93570F; }
/* Planche en flèche vers la droite (vers la gauche : règles de chaque direction, plus bas).
   Sur téléphone, un texte long passe sur deux lignes dans la planche au lieu de sortir de l'écran. */
.chemin-panneau {
  position: absolute; box-sizing: border-box; width: max-content; min-height: 38px; display: flex; align-items: center; justify-content: center; text-align: center; line-height: 1.1;
  padding: 0 26px 0 12px; border-radius: 6px; background: var(--c-panneau); color: var(--encre); font: 16px Delius, sans-serif;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%);
}
.chemin-direction--1 .chemin-panneau { left: 152px; top: 183px; min-width: 142px; max-width: 160px; transform: rotate(-4deg); }
.chemin-direction--2 .chemin-panneau { right: 152px; top: 235px; min-width: 144px; max-width: 150px; transform: rotate(3deg); }
.chemin-direction--3 .chemin-panneau { left: 152px; top: 287px; min-width: 156px; max-width: 176px; transform: rotate(3deg); }
.chemin-direction--2 .chemin-panneau {
  padding: 0 12px 0 26px; clip-path: polygon(18px 0, 100% 0, 100% 100%, 18px 100%, 0 50%);
}
.chemin-titre { display: block; margin-bottom: 7px; font: 18px Delius, sans-serif; color: var(--encre); }
.chemin-titre::before {
  content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 8px; border-radius: 50%; background: var(--c-panneau);
}
.chemin-precisions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.chemin-precisions li { position: relative; padding-left: 16px; font-size: 14.5px; line-height: 1.35; color: var(--c-texte); text-wrap: balance; }
.chemin-precisions li::before {
  content: ""; position: absolute; left: 2px; top: .45em; width: 7px; height: 7px; border-radius: 50%; background: var(--c-point);
}
/* Très petits téléphones (moins de 360 px) : le dessin se réduit pour ne pas dépasser */
@media (max-width: 359px) {
  .chemin { zoom: .86; }
}
@media (min-width: 768px) {
  /* Le poteau suit la hauteur des listes ; la rencontre et le chemin (300 × 210 px) restent posés en bas à gauche */
  .chemin { width: 720px; min-height: 210px; padding: 6px 0 16px 300px; }
  .chemin-sentier--large { display: block; top: auto; bottom: 0; width: 300px; height: 210px; }
  .chemin-sentier--large path { stroke-width: 30; }
  .chemin-sentier--large path.chemin-tirets { stroke-width: 2.5; }
  .chemin-sentier--etroit { display: none; }
  .chemin-sol { left: 282px; top: auto; bottom: 1px; }
  .chemin-poteau { left: 305px; top: 0; bottom: 6px; height: auto; }
  .chemin-bonhomme { left: 191px; top: auto; bottom: 14px; height: 84px; }
  .chemin-depart { left: 32px; top: auto; bottom: 10px; width: 120px; height: 120px; font-size: 21px; }
  /* Une rangée par direction : planche | précisions ; les trois planches ont la même largeur (sous-grille) */
  .chemin-directions { padding: 0; grid-template-columns: minmax(172px, max-content) minmax(0, 1fr); gap: 16px; }
  .chemin-direction { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; }
  .chemin-titre { display: none; }
  .chemin-direction--1 .chemin-panneau, .chemin-direction--2 .chemin-panneau, .chemin-direction--3 .chemin-panneau {
    position: relative; left: auto; right: auto; top: auto; width: auto; min-width: 0; max-width: none; white-space: nowrap; padding: 0 30px 0 14px; font-size: 17px;
    clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%);
  }
  .chemin-direction--1 .chemin-panneau { transform: rotate(-4deg); }
  .chemin-direction--2 .chemin-panneau { transform: rotate(1.5deg); }
  .chemin-direction--3 .chemin-panneau { transform: rotate(3deg); }
}

/* ---------- Règlement intérieur ---------- */

/* Le bas de section est complété par la vague turquoise du bloc « Un renseignement ? » (commun/bas.php) */
.reglement { position: relative; padding: 80px 24px 48px; }
.reglement-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 20px; }
.reglement-point { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 8px; }
.reglement-picto { width: 100px; height: 100px; display: flex; align-items: center; justify-content: center; }
.reglement-picto img { width: 100%; height: 100%; object-fit: contain; display: block; }
.reglement-point p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--encre-fonce); }

@media (prefers-reduced-motion: reduce) {
  .anneau-point, .psychomot-cercle { animation: none; }
}