/* Méthode : principe, détails « Concrètement » et « Votre participation » de l’accordéon. */

/* Encart de principe : la lavande de l’illustration, qui le suit à la même largeur. */
.approach-principle { width: 100%; max-width: 360px; margin-top: 32px; padding: 18px 20px; border: 1px solid #7059cb1f; border-radius: 14px; background: #ebe6f1; }
.approach-principle-title { font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--ink); text-wrap: balance; }
.approach-principle p + p { margin-top: 8px; font-size: 15px; line-height: 1.6; color: var(--body); text-wrap: pretty; }
.approach-principle + .method-art { width: 100%; max-width: 360px; margin-top: 16px; }

/* Jauge des lots de l’encart : le premier lot (Sandstone) d’abord, puis on étend.
   Pleine par défaut ; method-art.js la vide avant son entrée à l’écran. */
.principle-lots { display: flex; gap: 4px; margin-bottom: 14px; }
.principle-lots i { width: 22px; height: 6px; border-radius: 3px; background: var(--iris); box-shadow: inset 0 0 0 1px #7059cb59; }
.principle-lots i:first-child { background: var(--sand); box-shadow: none; }
.principle-lots.is-waiting i:not(:first-child) { background: transparent; }
@media (prefers-reduced-motion: no-preference) {
  .principle-lots i { transition: background-color var(--duration-ui) var(--ease-standard); }
  .principle-lots i:nth-child(2) { transition-delay: 240ms; }
  .principle-lots i:nth-child(3) { transition-delay: 380ms; }
  .principle-lots i:nth-child(4) { transition-delay: 520ms; }
}

/* Illustration de la méthode : les modules de verre profond de l’objet du héros. Ils
   passent de dispersés à rangés, puis forment l’escalier, puis la flèche complète
   (method-art.js). Sans JavaScript, la pose écrite dans le HTML est celle de l’étape 01.
   L’angle de vue est celui de l’objet du héros : l’épaisseur part en bas à gauche. */
.method-stage { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(calc(16deg + var(--tilt-x, 0deg))) rotateY(calc(22deg + var(--tilt-y, 0deg))); }
.method-stage i { position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 6px; transform-style: preserve-3d;
  transform: translate3d(var(--x, 0px), var(--y, 0px), 0) rotate(var(--r, 0deg)) scale(var(--s, 1)); }
/* L’opacité reste sur les deux faces : posée sur le conteneur 3D, elle l’aplatirait
   et l’épaisseur passerait devant la face de verre. */
.method-stage i::before, .method-stage i::after { content: ''; position: absolute; inset: 0; border-radius: inherit; opacity: var(--o, 1); }
.method-stage i::before { border: 1px solid #d6cef073; background: linear-gradient(145deg, #8f7ad6, #2a2148); box-shadow: inset 0 1px 0 #ffffff59; }
/* Épaisseur du verre, visible quand la scène s’incline. */
.method-stage i::after { background: #1a1530; transform: translateZ(-7px); }
.method-stage i.is-sand::before { background: linear-gradient(145deg, #f1b49e, #9a5a4a); }
.method-stage i.is-sand::after { background: #4a2b2e; }
/* Pose de départ écrite d’un coup (method-art.js) : rien ne se défait à l’écran. */
.method-stage.is-instant i, .method-stage.is-instant i::before, .method-stage.is-instant i::after { transition: none !important; }
@media (prefers-reduced-motion: no-preference) {
  .method-stage i { transition: transform 480ms var(--ease-standard) calc(var(--i, 0) * 30ms); }
  .method-stage i::before, .method-stage i::after { transition: opacity var(--duration-ui) var(--ease-standard) calc(var(--i, 0) * 30ms); }
  /* Un module interrompu repart aussitôt : le décalage ne vaut que pour un départ du repos. */
  .method-stage i.is-moving, .method-stage i.is-moving::before, .method-stage i.is-moving::after { transition-delay: 0ms; }
}
/* De 601 à 720 px, la figure passe sous le grand numéro au lieu de le toucher. */
@media (min-width: 601px) and (max-width: 720px) {
  .approach-principle + .method-art { height: 300px; }
  .method-shapes { top: 84px; }
}

/* Détails d’une étape : deux colonnes tant que le corps de l’étape le permet. */
.step-body { container: step-body / inline-size; }
.step-detail { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 20px 32px; margin-top: 24px; }
.step-detail-label { margin-bottom: 10px; font-size: 12px; font-weight: 600; line-height: 1.4; color: var(--deep); }
.step-detail-list { margin: 0; padding: 0; list-style: none; }
.step-detail-list li { position: relative; padding: 0 0 10px 18px; font-size: 15px; line-height: 1.55; color: var(--ink); text-wrap: pretty; }
.step-detail-list li:last-child { padding-bottom: 0; }
/* Le carré Iris de 6 px reprend la puce des étiquettes de section. */
.step-detail-list li::before { content: ''; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; background: var(--iris); }
.step-detail-group > p:not(.step-detail-label) { font-size: 15px; line-height: 1.6; color: var(--body); text-wrap: pretty; }

/* L’état choisi s’affiche dès le clic ; data-state est posé par accordion.js. */
.step[data-state="open"] summary { color: var(--depth); }
.step[data-state="closed"] summary { color: var(--ink); }
.step[data-state="open"] .step-number { color: var(--iris); }
.step[data-state="closed"] .step-number { color: var(--body); }
.step[data-state="open"] .step-toggle::after { transform: none; }
.step[data-state="closed"] .step-toggle::after { transform: rotate(90deg); }
@media (hover: hover) and (pointer: fine) {
  .step summary:hover .step-toggle::before, .step summary:hover .step-toggle::after { background: var(--iris); }
}
@media (prefers-reduced-motion: no-preference) {
  .step summary, .step-number { transition: color var(--duration-ui) var(--ease-standard); }
  .step-toggle::before, .step-toggle::after { transition: transform var(--duration-ui) var(--ease-standard), background-color var(--duration-feedback) var(--ease-standard); }
}

/* Couleurs forcées : le signe +/− est dessiné en fond, il prend la couleur du texte système (survol compris). */
@media (forced-colors: active) {
  .step-toggle::before, .step-toggle::after,
  .step summary:hover .step-toggle::before, .step summary:hover .step-toggle::after { background: CanvasText; }
}

@container step-body (max-width: 479px) {
  .step-detail { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 850px) {
  .step-detail { grid-template-columns: minmax(0, 1fr); }
  .approach-principle, .approach-principle + .method-art { max-width: none; }
}
@media (max-width: 600px) {
  .approach-principle { margin-top: 24px; }
  .step-detail-list li, .step-detail-group > p:not(.step-detail-label) { font-size: 16px; }
}

/* Impression : toutes les étapes ouvertes (accordion.js), sans trace d’animation. */
@media print {
  .step { height: auto !important; overflow: visible !important; }
  .step-body, .step-body * { opacity: 1 !important; translate: none !important; }
  .step-toggle { display: none; }
  /* L’impression aplatit toujours la 3D : l’épaisseur passerait devant la face. */
  .method-stage i::after { display: none; }
  .principle-lots.is-waiting i:not(:first-child) { background: var(--iris); }
  .step summary, .step-number { transition: none; }
  .approach-principle, .step-detail-group, .step-deliverable { break-inside: avoid; }
  /* Sans JavaScript, le contenu des étapes fermées s’imprime aussi (navigateurs récents). */
  .step::details-content { content-visibility: visible; }
}