/* Infra Society, la page « About » (notre page Society, adresse gardée : P-77 ; refonte, bloc B3, construit en avance
   sur la branche refonte-b1).

   Le dessin est celui de Maël (v8/about.html ; assets/site.css, refinement.css, identity.css), repris à la main, avec
   les valeurs FINALES de sa cascade (ses trois feuilles se surchargent jusqu'à six fois : chaque règle ci-dessous dit ce
   que la maquette montre, pas l'une de ses couches). Toutes les règles sont portées par body.ch-society (aucune règle
   nue, P-42) ; ses noms de classes sont gardés, sauf .section → .volet et .ecto → .ecto-fixe (P-89). La charpente
   (commun/styles/charpente.css) porte l'en-tête, le pied, les boutons, l'en-tête de section et ses « oreilles », la
   fenêtre décorative, la bande d'appel et l'apparition douce.

   Différences avec la maquette, et leurs raisons (refonte/DECISIONS-A-CONSIGNER.md, P-97 ; la page de comparaison les
   liste) :
   - Oracle → Switzer, graisse 550 (P-85) : titre, « infra brief. » et citation ;
   - fenêtre « La Bibliothèque » : nos contenus et leurs photos, les mêmes que sur l'accueil (« Chiffrer un projet »,
     « Faire parler vos rapports ») ; ses couvertures retouchées sont écartées (aucune provenance, DEC-96) ;
   - photos des métiers : les originaux CC0 vérifiés à la source (retouches écartées, P-52, P-71) ;
   - fenêtres flottantes et diaporama : ils bougent comme chez Maël, avec un bouton pause chacun (le dessin du bouton
     pause de ses démonstrations), s'arrêtent hors de l'écran et restent fixes sous « mouvement réduit » (P-97) ;
   - paragraphe d'ouverture et légende à peine plus foncés, pour 4,5 pour 1 au pire pixel (principe 14).
   Aucune ressource d'un autre site : les images viennent de images/ (registre images/LICENCES.md) ; photos des métiers et
   deux fonds en copies allégées (B9 : 1 120 et 1 600 px, la taille qu'il faut aux écrans haute densité ; le fond sable
   reste entier, sa grande fenêtre en demande 2 090). */

/* ------------------------------------------------------------------ sections (.section de Maël) */
body.ch-society .volet { padding-top: 124px; padding-bottom: 20px; }
@media (min-width: 1440px) { body.ch-society .volet { padding-top: 140px; } }   /* avant les règles des blocs, comme chez Maël */
body.ch-society .ecto-fixe { height: auto; object-fit: contain; aspect-ratio: 320 / 284; }

/* ------------------------------------------------------------------ fond de scène et ouverture */
body.ch-society .about-stage { position: relative; isolation: isolate; }
body.ch-society .about-stage::before {
  content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; opacity: .72;
  background: linear-gradient(112deg, #cdd7f1 0%, #e5e4ed 40%, #ede5df 66%, #efd8be 100%);
  -webkit-mask-image: linear-gradient(transparent 0%, #000 19%, #000 43%, transparent 94%);
          mask-image: linear-gradient(transparent 0%, #000 19%, #000 43%, transparent 94%);
}
body.ch-society .about-opening { position: relative; isolation: isolate; max-width: 1224px; padding-top: 145px; text-align: center; }
body.ch-society .about-opening h1 {
  max-width: 800px; margin: 0 auto 26px; font: 550 clamp(43px, 4.9vw, 68px)/1.065 var(--ch-switzer);
  letter-spacing: -.053em; color: var(--ch-encre); text-wrap: balance;
}
body.ch-society .about-opening > p { max-width: 660px; margin: auto; font-size: 17px; line-height: 1.7; color: #636468; text-wrap: pretty; }   /* #68696d chez Maël : 4,40 pour 1 au pixel le plus sombre de la scène ; ici 4,6 */
body.ch-society .about-opening > .button { margin-top: 27px; border-radius: 30px; }

/* ------------------------------------------------------------------ composition : trois fenêtres autour d'un disque */
body.ch-society .about-product { padding-top: 8px; }
body.ch-society .orbite-cadre { position: relative; }
body.ch-society .product-orbit { position: relative; isolation: isolate; container-type: inline-size; height: clamp(370px, 45vw, 540px); overflow: hidden; }
body.ch-society .orbit-disc {
  position: absolute; top: 4%; left: 26%; width: 48%; aspect-ratio: 1; border-radius: 50%;
  background: url(../../../images/fonds/fond-sable-bleu-aube.jpg) center / cover;
}
body.ch-society .orbit-ring {
  position: absolute; top: 1%; left: 21%; width: 58%; aspect-ratio: 1; border: 1px solid #c2c7d47a; border-radius: 50%;
  transform: rotateX(58deg) rotate(-23deg);
}
body.ch-society .orbit-ring::before { content: ""; position: absolute; top: 13%; left: 13%; width: 11px; height: 11px; border-radius: 50%; background: var(--ch-orange); }
body.ch-society .orbit-window {
  position: absolute; overflow: hidden; background: #fff; border: 1px solid #dddee5; border-radius: 12px;
  box-shadow: 0 14px 30px #242c4b12; text-align: left;
}
body.ch-society .orbit-library { left: 26%; top: 15%; z-index: 2; width: 48%; transform: rotate(-3deg); }
body.ch-society .orbit-library-body { padding: 26px; }
body.ch-society .orbit-library h3 { margin: 13px 0 19px; font-size: clamp(22px, 3.2cqw, 39px); line-height: 1.1; letter-spacing: -.04em; }
body.ch-society .orbit-guides { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
body.ch-society .orbit-guides > div { overflow: hidden; border: 1px solid #e6e7ec; border-radius: 7px; }
body.ch-society .orbit-guides img { display: block; width: 100%; height: clamp(70px, 10cqw, 122px); object-fit: cover; }
body.ch-society .orbit-guides span { display: block; padding: 11px; font-size: 11px; }
body.ch-society .orbit-brief { left: 5%; top: 33%; z-index: 1; width: 26%; transform: rotate(-9deg); }
body.ch-society .orbit-brief > div + div { padding: 23px; background: url(../../../images/fonds/fond-turquoise-vert-aube-1600.jpg) center / cover; }
body.ch-society .orbit-brief-title { font: 550 clamp(26px, 4.7cqw, 57px)/.95 var(--ch-switzer); letter-spacing: -.06em; }
body.ch-society .orbit-brief p { margin-top: 18px; font-size: 11px; line-height: 1.55; color: #293f3f; }
body.ch-society .orbit-brief i { display: block; width: 87%; height: 3px; margin-top: 17px; background: #304a4a25; }
body.ch-society .orbit-brief i + i { width: 63%; margin-top: 8px; }
body.ch-society .orbit-kit { right: 3%; top: 47%; z-index: 3; width: 31%; transform: rotate(7deg); }
body.ch-society .orbit-kit > div + div { padding: 24px; }
body.ch-society .orbit-kit h3 { margin-bottom: 15px; font-size: 26px; letter-spacing: -.04em; }
body.ch-society .orbit-kit p {
  display: flex; align-items: center; gap: 9px; margin-top: 9px; padding: 10px; border-radius: 5px;
  background: #f6f5f1; font-size: 11px; color: #4c5056;
}
body.ch-society .orbit-kit svg { width: 13px; height: 13px; color: var(--ch-orange-texte); }
@keyframes orbit-library { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-8px) rotate(-2deg); } }
@keyframes orbit-brief { 0%, 100% { transform: translateY(0) rotate(-9deg); } 50% { transform: translateY(6px) rotate(-7deg); } }
@keyframes orbit-kit { 0%, 100% { transform: translateY(0) rotate(7deg); } 50% { transform: translateY(-6px) rotate(5deg); } }
/* elles ne flottent que sous la classe .anime, posée par commun/scripts/pages/society.js une fois l'observateur et le
   bouton pause en place : sans script, les fenêtres restent fixes (relecture des étapes 11 à 14, R-1) */
body.ch-society .product-orbit.anime .orbit-library { animation: orbit-library 8s ease-in-out infinite; }
body.ch-society .product-orbit.anime .orbit-brief { animation: orbit-brief 8s ease-in-out infinite; }
body.ch-society .product-orbit.anime .orbit-kit { animation: orbit-kit 8s ease-in-out infinite; }
/* arrêtées par le même script : bouton pause, hors de l'écran, page cachée (après les règles ci-dessus, même poids) */
body.ch-society .product-orbit.est-arrete .orbit-window { animation-play-state: paused; }
body.ch-society .about-product-caption {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 23px 0; border-block: 1px solid var(--ch-filet);
  font-size: 14px; text-align: center; color: #6e7074;   /* #737579 chez Maël : 4,31 pour 1 sur le papier ; ici 4,63 */
}
body.ch-society .about-product-caption span + span { border-left: 1px solid var(--ch-filet); }

/* les boutons pause : le dessin du bouton pause des démonstrations de Maël (product-demos.css, .pd-pause), hors des
   zones « image » pour que les lecteurs d'écran le lisent ; cachés sans script et sous « mouvement réduit » */
body.ch-society .pause-rond {
  position: absolute; right: 3%; bottom: 14px; z-index: 6; display: grid; place-items: center; width: 30px; height: 30px;
  padding: 0; border: 1px solid #ffffffa3; border-radius: 50%; background: #ffffffd9; color: #414b56;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 2px 8px #23334b0d;
}
body.ch-society .orbite-cadre .pause-rond { top: 14px; bottom: auto; }   /* en haut à droite : hors des trois fenêtres à toutes les largeurs (relecture, R-9) */
body.ch-society .vision-frame .pause-rond { right: 16px; bottom: 16px; }
body.ch-society .pause-rond[hidden] { display: none; }
body.ch-society .pause-rond svg { display: block; width: 10px; height: 10px; }
body.ch-society .lecture-symbole, body.ch-society .est-en-pause .pause-symbole { display: none; }
body.ch-society .est-en-pause .lecture-symbole { display: inline; }

/* ------------------------------------------------------------------ vision */
body.ch-society .vision-story { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; padding-top: 96px; }
body.ch-society .vision-frame { position: relative; min-width: 0; }
body.ch-society .vision-photo { position: relative; height: 540px; overflow: hidden; border-radius: 22px; }
body.ch-society .vision-photo .vision-slide {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 55% center;
  opacity: 0; transition: opacity 1.15s;
}
body.ch-society .vision-photo .vision-slide.is-active { opacity: 1; }
body.ch-society .vision-story-copy h2 { margin: 0 0 28px; font-size: 46px; line-height: 1.13; letter-spacing: -.045em; }
body.ch-society .vision-story-copy > p { max-width: 475px; font-size: 16px; line-height: 1.75; }
body.ch-society .vision-story-copy > p + p { margin-top: 19px; }
body.ch-society .vision-story blockquote {
  margin: 30px 0 0; padding-left: 22px; border-left: 2px solid var(--ch-orange);
  font: 550 25px/1.3 var(--ch-switzer); letter-spacing: -.03em;
}

/* ------------------------------------------------------------------ trois principes */
body.ch-society .about-principles, body.ch-society .about-audiences { padding-top: 96px; }
body.ch-society .principle-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
body.ch-society .principle-grid article {
  overflow: hidden; padding: 28px; border: 1px solid #e7e7e2; border-radius: 18px; background: #fff;
  transition: border-color .3s, transform .3s;
}
body.ch-society .principle-grid article:hover { border-color: #b9bcc8; transform: translateY(-4px); }
body.ch-society .principle-illustration {
  position: relative; display: grid; place-items: center; overflow: hidden; height: 150px; margin: -28px -28px 25px;
  background: url(../../../images/fonds/fond-bleu-violet-voile-1600.jpg) center / cover;
}
body.ch-society .principle-grid article:nth-child(2) .principle-illustration { background-image: url(../../../images/fonds/fond-sable-bleu-aube.jpg); }
body.ch-society .principle-grid article:nth-child(3) .principle-illustration { background-image: url(../../../images/fonds/fond-turquoise-vert-aube-1600.jpg); }
body.ch-society .principle-illustration > .principle-ecto { display: block; width: 85px; height: auto; transform: rotate(-7deg); transition: transform .4s var(--ch-courbe); }
body.ch-society .principle-grid article:nth-child(2) .principle-ecto { transform: rotate(5deg); }
body.ch-society .principle-grid article:nth-child(3) .principle-ecto { transform: rotate(-4deg); }
body.ch-society .principle-grid article:hover .principle-ecto { transform: rotate(0deg) translateY(-4px); }
body.ch-society .principle-grid h3 { margin: 0 0 15px; font-size: 26px; line-height: 1.15; }
body.ch-society .principle-grid p { font-size: 14px; line-height: 1.75; }
/* l'entrée douce de Maël sur About et Rejoindre : 16 px en 0,7 s (28 px en 0,85 s ailleurs) */
.js-motion body.ch-society [data-reveal] { transform: translateY(16px); transition-duration: .7s; transition-delay: 0s; }
.js-motion body.ch-society [data-reveal].is-visible { transform: none; }
.js-motion body.ch-society .about-principles article:nth-child(2), .js-motion body.ch-society .about-audiences article:nth-child(2n) { transition-delay: .08s; }
.js-motion body.ch-society .about-principles article:nth-child(3) { transition-delay: .16s; }

/* ------------------------------------------------------------------ quatre métiers */
body.ch-society .audience-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
body.ch-society .audience-grid article {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 36%; grid-template-rows: auto auto; gap: 20px 25px;
  align-content: center; overflow: hidden; min-height: 230px; padding: 34px 0 34px 30px; border: 1px solid #eeede9; border-radius: 18px;
  background: #fff; transition: background .4s, border-color .4s;
}
body.ch-society .audience-grid article:hover { background: #fdfdfb; border-color: #d4d6dc; }
body.ch-society .audience-grid h3 { grid-area: 1 / 1; align-self: end; margin: 0; font-size: 26px; line-height: 1.2; }
body.ch-society .audience-grid p { grid-area: 2 / 1; max-width: 360px; margin: 0; font-size: 14px; line-height: 1.65; }
body.ch-society .audience-image {
  position: absolute; inset: 0 0 0 auto; overflow: hidden; width: 36%; height: 100%; margin: 0; padding: 0; background: #e6e9f1;
}
body.ch-society .audience-image::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(145deg, #667dd520, transparent 55%, #e79c4b18);
}
body.ch-society .audience-image img {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .7s var(--ch-courbe);
}
body.ch-society .audience-grid article:hover img { transform: scale(1.04); }

/* ------------------------------------------------------------------ paliers de Maël */
@media (max-width: 1000px) {
  body.ch-society .about-opening h1 { font-size: 54px; }
  body.ch-society .product-orbit { height: 450px; }
  body.ch-society .orbit-brief { left: 3%; width: 28%; }
  body.ch-society .orbit-library { left: 25%; width: 50%; }
  body.ch-society .orbit-library-body { padding: 20px; }
  body.ch-society .orbit-kit { right: 1%; width: 33%; }
  body.ch-society .orbit-kit > div + div { padding: 19px; }
  body.ch-society .orbit-kit h3 { font-size: 23px; }
  body.ch-society .orbit-kit p { font-size: 10px; }
  body.ch-society .vision-story { gap: 42px; }
  body.ch-society .vision-photo { height: 490px; }
  body.ch-society .vision-story-copy h2 { font-size: 38px; }
  body.ch-society .vision-story-copy > p { font-size: 15px; }
  body.ch-society .principle-grid { gap: 15px; }
  body.ch-society .principle-grid article { padding: 24px; }
  body.ch-society .principle-illustration { margin: -24px -24px 24px; }
  body.ch-society .principle-grid h3 { font-size: 23px; }
  body.ch-society .principle-grid p { font-size: 13px; }
  body.ch-society .audience-grid article { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 18px; min-height: 256px; padding: 0 26px 28px; }
  body.ch-society .audience-grid h3 { grid-area: 2 / 1; font-size: 25px; }
  body.ch-society .audience-grid p { grid-area: 3 / 1; }
  body.ch-society .audience-image { position: relative; inset: auto; grid-area: 1 / 1; justify-self: stretch; width: auto; height: 180px; margin: 0 -26px 5px; }
  body.ch-society .audience-image img { height: 180px; }
}
@media (max-width: 809px) {
  body.ch-society .volet { padding-top: 90px; }
  body.ch-society .product-orbit { height: 395px; }
  body.ch-society .orbit-kit p { padding: 7px; font-size: 9px; }
  body.ch-society .orbit-kit h3 { font-size: 20px; }
  body.ch-society .orbit-brief > div + div { padding: 18px; }
  body.ch-society .orbit-brief p { font-size: 9px; }
  body.ch-society .orbit-library-body { padding: 17px; }
  body.ch-society .orbit-guides span { padding: 8px; font-size: 9px; }
  body.ch-society .about-opening h1 { font-size: 47px; }
  body.ch-society .about-opening > p { max-width: 580px; font-size: 16px; }
  body.ch-society .about-product-caption { gap: 12px; font-size: 12px; }
  body.ch-society .vision-story { gap: 30px; padding-top: 75px; }
  body.ch-society .vision-photo { height: 480px; }
  body.ch-society .vision-story-copy h2 { font-size: 33px; }
  body.ch-society .vision-story-copy > p { font-size: 14px; }
  body.ch-society .vision-story blockquote { font-size: 22px; }
  body.ch-society .about-principles, body.ch-society .about-audiences { padding-top: 75px; }
  body.ch-society .principle-grid article { padding: 21px; }
  body.ch-society .principle-illustration { height: 120px; margin: -21px -21px 22px; }
  body.ch-society .principle-grid h3 { font-size: 22px; }
}
@media (max-width: 760px) {
  body.ch-society .about-opening { padding-top: 120px; }
  body.ch-society .about-product { padding-top: 0; }
}
@media (max-width: 600px) {
  body.ch-society .volet { padding-top: 75px; padding-bottom: 0; }
  body.ch-society .about-stage::before { opacity: .52; }
  body.ch-society .about-opening { text-align: left; }
  body.ch-society .about-opening h1 { margin: 0 0 22px; font-size: 41px; line-height: 1.07; text-wrap: pretty; }
  body.ch-society .about-opening > p { margin: 0; font-size: 15px; }
  body.ch-society .about-opening > .button { margin-top: 24px; }
  body.ch-society .about-product { width: 100%; }
  body.ch-society .product-orbit { max-width: 520px; height: 350px; margin: auto; }
  body.ch-society .orbite-cadre { max-width: 520px; margin-inline: auto; }   /* le bouton pause se place dans la composition */
  body.ch-society .orbit-disc { left: 12%; top: 8%; width: 76%; }
  body.ch-society .orbit-ring { left: 5%; top: 12%; width: 90%; }
  body.ch-society .orbit-library { left: 21%; top: 16%; width: 64%; }
  body.ch-society .orbit-library-body { padding: 15px; }
  body.ch-society .orbit-library h3 { margin: 11px 0 16px; font-size: 25px; }
  body.ch-society .orbit-guides { gap: 8px; }
  body.ch-society .orbit-guides img { height: 63px; }
  body.ch-society .orbit-guides span { padding: 8px 5px; font-size: 7px; }
  body.ch-society .orbit-brief { left: -4%; top: 33%; width: 31%; }
  body.ch-society .orbit-brief > div + div { padding: 12px; }
  body.ch-society .orbit-brief-title { font-size: 32px; }
  body.ch-society .orbit-brief p { margin-top: 11px; font-size: 7px; }
  body.ch-society .orbit-brief i { margin-top: 11px; }
  body.ch-society .orbit-kit { right: 1%; top: 61%; width: 46%; }
  body.ch-society .orbit-kit > div + div { padding: 13px; }
  body.ch-society .orbit-kit h3 { margin-bottom: 9px; font-size: 18px; }
  body.ch-society .orbit-kit p { gap: 5px; margin-top: 6px; padding: 6px; font-size: 7px; }
  body.ch-society .orbit-kit svg { flex-shrink: 0; width: 9px; height: 9px; }
  body.ch-society .about-product-caption { grid-template-columns: 1fr; gap: 11px; width: calc(100% - 40px); margin: auto; padding: 21px 0; font-size: 13px; text-align: left; }
  body.ch-society .about-product-caption span + span { border: 0; }
  body.ch-society .vision-story { grid-template-columns: 1fr; gap: 30px; padding-top: 58px; }
  body.ch-society .vision-photo { height: 300px; }
  body.ch-society .vision-story-copy h2 { margin: 0 0 24px; font-size: 36px; }
  body.ch-society .vision-story-copy > p { font-size: 15px; }
  body.ch-society .vision-story blockquote { margin-top: 25px; font-size: 25px; }
  body.ch-society .about-principles, body.ch-society .about-audiences { padding-top: 65px; }
  body.ch-society .principle-grid { grid-template-columns: 1fr; gap: 19px; }
  body.ch-society .principle-grid article { padding: 25px; }
  body.ch-society .principle-illustration { height: 132px; margin: -25px -25px 24px; }
  body.ch-society .principle-grid h3 { font-size: 28px; }
  body.ch-society .principle-grid p { font-size: 14px; }
  body.ch-society .audience-grid { grid-template-columns: 1fr; }
}
@media (max-width: 360px) {
  body.ch-society .about-opening h1 { font-size: 36px; }
  body.ch-society .orbit-library h3 { font-size: 22px; }
  body.ch-society .product-orbit { height: 330px; }
}

/* ------------------------------------------------------------------ « mouvement réduit » : rien ne bouge */
@media (prefers-reduced-motion: reduce) {
  body.ch-society .orbit-window, body.ch-society .product-orbit.anime .orbit-window { animation: none; }
  body.ch-society .vision-photo .vision-slide, body.ch-society .principle-grid article, body.ch-society .principle-illustration > .principle-ecto,
  body.ch-society .audience-image img { transition: none; }
  body.ch-society .principle-grid article:hover, body.ch-society .principle-grid article:hover .principle-ecto,
  body.ch-society .audience-grid article:hover img { transform: none; }
}