/* ══════════════════════════════════════════════════════════════
   PICBOIS47 — PAGE CRÉATION DE SITES WEB (23 sept. 2026).
   Chargée par cette page seulement. precision47.css donne la base et les
   révélations [data-rv] ; pages.css donne l'en-tête de page, la bande
   noire, l'appel compact et le pied.

   LE GESTE DE LA PAGE : le CADRAGE. Automatisations montre une matière
   qui change d'état, Applications la continuité terrain ↔ bureau,
   Municipalités une demande qui circule. Ici, des fragments dispersés se
   posent sur une grille et forment une page finie. Le même mouvement se
   rejoue à l'écran 2 : quatre réponses éparses rejoignent une seule
   colonne de lecture.

   L'état final est l'état par défaut : sans JavaScript et en mouvement
   réduit, la composition est déjà cadrée. L'animation ne fait que partir
   de plus loin.

   Plancher du corps de texte : 1 rem (16 px). Les seules tailles plus
   petites sont les étiquettes et annotations mono (--t-annot, --t-label),
   qui ne portent jamais de phrase à lire.

   Le rouge : le joint de l'action dans la composition du héros, le nœud
   de mise en service, et rien d'autre. Chaque marque rouge porte aussi
   un mot et une forme distincte — le sens ne tient jamais à la couleur.
   ══════════════════════════════════════════════════════════════ */

.sw-zone { padding: var(--sp-8) 0; }
.sw-zone + .sw-zone:not(.bande-noire) { border-top: 1px solid var(--pg-filet); }
.sw-zone > .cadre-section { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sp-3); row-gap: var(--sp-5); align-items: start; }

.sw-tete { grid-column: 1 / span 5; display: grid; gap: var(--sp-3); align-content: start; }
.sw-tete-large { grid-column: 1 / span 8; }
.sw-tete h2 { font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.04; letter-spacing: -0.035em; text-wrap: balance; }
.sw-intro { max-width: 54ch; font-size: var(--t-lead); line-height: 1.55; }
.bande-noire .sw-intro { color: var(--text); }

.sw-micro { margin: 0; font-family: var(--f-mono); font-size: var(--t-annot); letter-spacing: 0.1em; text-transform: uppercase; color: var(--pg-sourdine); }
.sw-note { margin: var(--sp-3) 0 0; font-size: 1rem; line-height: 1.5; color: var(--pg-sourdine); max-width: 46ch; }
.bande-noire .sw-note { color: var(--muted); }

.sw-fermeture {
  grid-column: 1 / span 8; margin: 0; padding-top: var(--sp-4);
  border-top: 1px solid var(--pg-filet); max-width: 64ch;
  font-size: var(--t-lead); line-height: 1.5; color: var(--pg-encre);
}
.sw-fermeture .lien-mono { margin-left: 0.4em; }


/* ═══ ÉCRAN 1 — LE HÉROS ═══════════════════════════════════════
   Le titre prend toute la largeur ; sous lui, à gauche la lecture, à
   droite la composition qui se cadre. Le titre de cette page est une
   phrase de dix mots : la capitalisation de `tete-geante` la rendrait
   illisible, elle est donc désactivée ici, la taille restant géante. */

.sw-hero { padding: var(--sp-7) 0 var(--sp-6); }
.sw-hero .cadre-section { align-items: start; row-gap: 0; }
.sw-hero .label:first-child { grid-row: 1; }
.sw-hero .fil-entree { grid-row: 2; margin-top: var(--sp-2); }
.sw-hero h1 {
  grid-column: 1 / span 6; grid-row: 3; margin-top: var(--sp-4);
  text-transform: none; font-size: clamp(2.1rem, 3.6vw, 3.5rem);
  line-height: 1.03; letter-spacing: -0.04em; max-width: 16ch;
}
.sw-hero .page-chapo { grid-column: 1 / span 5; grid-row: 4; margin-top: var(--sp-3); max-width: 44ch; }
.sw-micro-hero { grid-column: 1 / span 5; grid-row: 5; margin-top: var(--sp-5); padding-top: var(--sp-3); border-top: 1px solid var(--pg-filet); line-height: 1.8; }
.sw-hero-appel { grid-column: 1 / span 5; grid-row: 6; margin: var(--sp-4) 0 0; }

/* ── LA DÉMONSTRATION : une vraie page, en grand ────────────────
   C'est la vitrine de notre capacité de design. Elle saigne jusqu'au
   bord du cadre, elle est posée sur le noir de la marque, et sa
   typographie est à l'échelle d'un vrai héros — un petit fil de fer
   gris dirait exactement le contraire de ce que la page vend. */
.sw-page {
  grid-column: 7 / -1; grid-row: 3 / span 4; position: relative; align-self: start;
  margin: var(--sp-3) calc(-1 * var(--marge-cadre)) 0 0;
  width: calc(100% + var(--marge-cadre));
  display: grid; gap: var(--sp-2);
}
.sw-page-vue {
  position: relative; display: grid; align-content: start;
  background: var(--canvas); color: var(--text);
  padding: clamp(18px, 1.8vw, 26px) clamp(20px, 2.4vw, 34px) clamp(28px, 3vw, 44px);
  min-height: clamp(380px, 46vw, 560px);
}
.sw-coin { position: absolute; width: 16px; height: 16px; }
.sw-coin-hg { left: -8px; top: -8px; border-left: 1px solid var(--pg-encre); border-top: 1px solid var(--pg-encre); }
.sw-page-legende { font-size: 0.9375rem; line-height: 1.5; color: var(--pg-sourdine); max-width: 52ch; }
.sw-page-legende .label { display: block; margin-bottom: 4px; }

/* le rail de la page démontrée : une marque, trois entrées, un appel */
.sw-page-rail { display: flex; align-items: center; gap: var(--sp-3); padding-bottom: clamp(24px, 3vw, 48px); border-bottom: 1px solid var(--ligne-ivoire); }
.sw-page-marque { width: 38px; height: 12px; background: var(--ink); }
.sw-page-nav { display: flex; gap: 14px; margin-left: auto; }
.sw-page-nav i { width: 30px; height: 6px; background: var(--ligne-ivoire-forte); }
.sw-page-appel { width: 62px; height: 20px; border: 1px solid var(--ligne-ivoire-forte); }

.sw-page-corps { display: grid; gap: clamp(14px, 1.6vw, 22px); padding-top: clamp(28px, 3.4vw, 52px); justify-items: start; }
.sw-frag { position: relative; display: block; }
.sw-frag-etiquette { font-family: var(--f-mono); font-size: var(--t-annot); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.sw-frag-titre b { display: block; font-size: clamp(1.7rem, 3.3vw, 3.1rem); font-weight: 700; line-height: 1.02; letter-spacing: -0.04em; color: var(--ink); }
.sw-frag-message em { display: block; font-style: normal; font-size: clamp(0.9375rem, 1.1vw, 1.0625rem); line-height: 1.55; color: var(--text); max-width: 42ch; }
.sw-frag-preuve { display: grid; gap: 10px; width: min(100%, 300px); margin-top: clamp(8px, 1.4vw, 20px); padding-top: 14px; border-top: 1px solid var(--ligne-ivoire); }
.sw-preuve-l { display: flex; align-items: center; gap: 12px; }
.sw-preuve-l i { width: 7px; height: 7px; flex: none; border: 1px solid var(--ligne-ivoire-forte); }
.sw-preuve-l u { flex: 1; height: 1px; background: var(--ligne-ivoire-forte); text-decoration: none; }
.sw-preuve-l u.sw-demi { flex: 0 0 58%; }
.sw-bouton {
  display: inline-flex; align-items: center; gap: 0.6em; min-height: 48px; padding: 0 22px 0 18px;
  font-family: var(--f-mono); font-size: 0.9375rem; font-weight: 500;
  color: var(--canvas); background: var(--ink);
}
.sw-bouton s { width: 8px; height: 8px; background: var(--red); text-decoration: none; }

/* Le cadrage. Chaque fragment part hors axe et se pose. La série finit
   à 1,5 s : au-delà, le visiteur attend au lieu de lire. */
html[data-motion="on"] .sw-frag { opacity: 0; transition: opacity 700ms var(--ease-out), transform 820ms var(--ease-out); }
html[data-motion="on"] .sw-frag-etiquette { transform: translate(-22px, 10px); }
html[data-motion="on"] .sw-frag-titre { transform: translate(-30px, 16px); }
html[data-motion="on"] .sw-frag-message { transform: translate(34px, 12px); }
html[data-motion="on"] .sw-frag-action { transform: translate(26px, 24px); }
html[data-motion="on"] .sw-frag-preuve { transform: translate(-20px, 24px); }
html[data-motion="on"] .sw-page-rail, html[data-motion="on"] .sw-coin { opacity: 0; transition: opacity 600ms var(--ease-out) 1000ms; }
html[data-motion="on"].pret .sw-frag { opacity: 1; transform: none; }
html[data-motion="on"].pret .sw-frag-etiquette { transition-delay: 200ms; }
html[data-motion="on"].pret .sw-frag-titre { transition-delay: 320ms; }
html[data-motion="on"].pret .sw-frag-message { transition-delay: 470ms; }
html[data-motion="on"].pret .sw-frag-action { transition-delay: 610ms; }
html[data-motion="on"].pret .sw-frag-preuve { transition-delay: 740ms; }
html[data-motion="on"].pret .sw-page-rail, html[data-motion="on"].pret .sw-coin { opacity: 1; }


/* ═══ ÉCRAN 2 — LES QUATRE RÉPONSES ════════════════════════════
   Elles sont suspendues à des hauteurs différentes et descendent toutes
   vers la même colonne de lecture : la page se forme en descendant. */

.sw-reponses { grid-column: 1 / -1; position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sp-3); row-gap: var(--sp-5); padding-top: var(--sp-5); --pas: calc((100% + var(--sp-3)) / 12); }
/* La colonne de lecture : tout aboutit là. Elle commence au bord gauche
   de la 9e colonne et porte son nom en mono. */
.sw-colonne { position: absolute; left: calc(var(--pas) * 8); top: 0; bottom: var(--sp-3); width: 1px; background: var(--pg-filet-fort); }
.sw-colonne b { position: absolute; left: 14px; top: 0; font-family: var(--f-mono); font-size: var(--t-annot); font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pg-sourdine); white-space: nowrap; }
.sw-reponse { position: relative; display: grid; gap: 10px; align-content: start; padding-top: 16px; border-top: 1px solid var(--pg-filet-fort); }
.sw-r1 { grid-column: 1 / span 4; }
.sw-r2 { grid-column: 2 / span 4; }
.sw-r3 { grid-column: 3 / span 4; }
.sw-r4 { grid-column: 4 / span 4; }
/* Le filet part du bord DROIT du bloc et rejoint la colonne : il ne
   traverse jamais un mot. */
/* `--st` : un pas de grille MESURÉ SUR LE BLOC (4 colonnes de large), pas
   sur le conteneur — un pourcentage dans une propriété personnalisée se
   résout sur l'élément qui s'en sert, et non sur celui qui la déclare. */
.sw-descente { position: absolute; left: 100%; top: -1px; height: 1px; background: var(--pg-filet-fort); transform-origin: left center; --st: calc((100% + var(--sp-3)) / 4); }
.sw-r1 .sw-descente { width: calc(var(--st) * 4 + var(--sp-3)); }
.sw-r2 .sw-descente { width: calc(var(--st) * 3 + var(--sp-3)); }
.sw-r3 .sw-descente { width: calc(var(--st) * 2 + var(--sp-3)); }
.sw-r4 .sw-descente { width: calc(var(--st) * 1 + var(--sp-3)); }
/* L'action suivante est le seul point rouge de l'écran, et il porte aussi
   une forme : un carré plein, plus grand que le filet. */
.sw-r4 .sw-descente::after { content: ""; position: absolute; right: -4px; top: -4px; width: 9px; height: 9px; background: var(--red); }
.sw-r4 { border-top-color: var(--pg-encre); }
.sw-question { margin: 0; font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--pg-sourdine); }
.sw-reponse h3 { margin: 0; font-size: 1.25rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; }
.sw-reponse p:last-child { margin: 0; font-size: 1rem; line-height: 1.55; max-width: 38ch; }

html[data-motion="on"] .sw-reponses .sw-descente { transform: scaleX(0); transition: transform var(--dur-draw) var(--ease-out); }
html[data-motion="on"] .sw-reponses.vu .sw-descente { transform: none; }
html[data-motion="on"] .sw-r1 .sw-descente { transition-delay: 120ms; }
html[data-motion="on"] .sw-r2 .sw-descente { transition-delay: 260ms; }
html[data-motion="on"] .sw-r3 .sw-descente { transition-delay: 400ms; }
html[data-motion="on"] .sw-r4 .sw-descente { transition-delay: 540ms; }


/* ═══ ÉCRAN 3 — LA PRESTATION (BANDE NOIRE) ════════════════════ */

.sw-moments { grid-column: 1 / -1; position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--sp-3); margin: 0; padding: var(--sp-5) 0 0; list-style: none; }
.sw-moments-fil { position: absolute; left: 0; right: 0; top: calc(var(--sp-5) + 5px); height: 1px; background: var(--ligne-ivoire-forte); }
.sw-moment { position: relative; display: grid; gap: 10px; align-content: start; padding-top: var(--sp-3); }
.sw-noeud { position: absolute; left: 0; top: 0; width: 11px; height: 11px; border: 1px solid var(--ligne-ivoire-forte); background: var(--canvas); }
.sw-noeud-rouge { width: 13px; height: 13px; border-color: var(--red); background: var(--red); }
.sw-moment b { font-size: 1.0625rem; font-weight: 600; color: var(--ink); line-height: 1.25; }
.sw-moment p { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--text); }
.sw-moment-fin b { color: var(--ink); }

html[data-motion="on"] .sw-moments .sw-moment { opacity: 0; transform: translateY(18px); transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out); }
html[data-motion="on"] .sw-moments.vu .sw-moment { opacity: 1; transform: none; }
html[data-motion="on"] .sw-moments.vu .sw-moment:nth-child(2) { transition-delay: 0ms; }
html[data-motion="on"] .sw-moments.vu .sw-moment:nth-child(3) { transition-delay: var(--stagger); }
html[data-motion="on"] .sw-moments.vu .sw-moment:nth-child(4) { transition-delay: calc(var(--stagger) * 2); }
html[data-motion="on"] .sw-moments.vu .sw-moment:nth-child(5) { transition-delay: calc(var(--stagger) * 3); }
html[data-motion="on"] .sw-moments.vu .sw-moment:nth-child(6) { transition-delay: calc(var(--stagger) * 4); }

.sw-portee { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-5); row-gap: var(--sp-4); padding-top: var(--sp-5); border-top: 1px solid var(--ligne-ivoire); }
.sw-portee-col { display: grid; gap: var(--sp-2); align-content: start; }
.sw-liste { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; }
.sw-liste li { position: relative; padding: 12px 0 12px 26px; font-size: 1rem; line-height: 1.5; color: var(--text); border-bottom: 1px solid var(--ligne-ivoire); }
.sw-liste li::before { content: ""; position: absolute; left: 0; top: 19px; width: 9px; height: 9px; }
.sw-liste-pleine li::before { background: var(--ink); }
.sw-liste-creuse li::before { border: 1px solid var(--ligne-ivoire-forte); }

.sw-boutique { grid-column: 1 / span 8; padding-top: var(--sp-5); border-top: 1px solid var(--ligne-ivoire); display: grid; gap: var(--sp-2); }
.sw-boutique p:last-child { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--text); max-width: 68ch; }


/* ═══ ÉCRAN 4 — DEUX SITES EN LIGNE ════════════════════════════
   Une seule ligne d'horizon partagée, légende sous l'image : la
   composition de l'accueil (légendes sur un axe vertical) n'est pas
   reprise. */

/* ═══ ÉCRAN 2 — DEUX PAGES, LE MÊME MÉTIER ════════════════════
   Deux pages composées en HTML et en filets, à l'échelle : celle qui
   n'a rien décidé, et la même une fois le message arrêté. La seconde
   est plus haute, plus large et posée un cran plus bas — la comparaison
   ne se fait pas entre deux vignettes égales, elle se lit.
   Aucune image, aucune capture, aucun nom d'entreprise. */

.sw-paire { grid-column: 1 / -1; position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sp-3); align-items: start; }
.sw-cas { margin: 0; display: grid; gap: var(--sp-3); align-content: start; }
.sw-cas-avant { grid-column: 1 / span 5; }
.sw-cas-apres { grid-column: 7 / -1; margin-top: var(--sp-6); }

.sw-cas-vue {
  position: relative; display: grid; align-content: start; gap: 14px;
  padding: 18px 22px 26px; border: 1px solid var(--pg-filet-fort); background: #f7f5f1;
}
.sw-cas-apres .sw-cas-vue { gap: 16px; padding: 20px 26px 30px; border-color: var(--pg-encre); background: #faf9f6; }

/* le rail de la page démontrée */
.sw-cas-rail { display: flex; align-items: center; gap: 10px; padding-bottom: 18px; border-bottom: 1px solid var(--pg-filet); }
.sw-cas-rail i { width: 30px; height: 9px; background: var(--pg-filet-fort); }
.sw-cas-rail b { width: 24px; height: 5px; background: var(--pg-filet); }
.sw-cas-rail b:nth-of-type(1) { margin-left: auto; }
.sw-cas-appel { width: 46px !important; height: 16px !important; background: none !important; border: 1px solid var(--pg-encre); }

.sw-cas-etiquette { font-family: var(--f-mono); font-size: var(--t-annot); letter-spacing: 0.14em; text-transform: uppercase; color: var(--pg-sourdine); }
.sw-cas-titre { font-size: 1.125rem; font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; color: var(--pg-sourdine); }
.sw-cas-titre-fort { font-size: clamp(1.3rem, 1.9vw, 1.75rem); font-weight: 700; line-height: 1.08; letter-spacing: -0.035em; color: var(--pg-encre); max-width: 18ch; }

.sw-cas-texte { display: grid; gap: 7px; }
.sw-cas-texte u, .sw-cas-preuve u { height: 4px; background: var(--pg-filet); text-decoration: none; }
.sw-court { width: 58%; }

/* les trois blocs interchangeables : le défaut le plus courant */
.sw-cas-blocs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 4px; }
.sw-cas-blocs s { display: block; height: 52px; border: 1px solid var(--pg-filet); text-decoration: none; }

/* deux actions qui se disputent la page */
.sw-cas-actions { display: flex; gap: 10px; margin-top: 6px; }
.sw-cas-actions em {
  font-style: normal; font-family: var(--f-mono); font-size: 0.8125rem; color: var(--pg-sourdine);
  padding: 9px 14px; border: 1px solid var(--pg-filet-fort);
}

/* une seule action, et elle porte le joint */
.sw-cas-action {
  justify-self: start; display: inline-flex; align-items: center; gap: 0.6em;
  min-height: 42px; padding: 0 18px 0 14px; margin-top: 4px;
  font-family: var(--f-mono); font-size: 0.875rem; font-weight: 500;
  color: var(--pg-ivoire); background: var(--pg-encre);
}
.sw-cas-action s { width: 8px; height: 8px; background: var(--red); text-decoration: none; }
.sw-cas-preuve { display: grid; gap: 7px; margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--pg-filet); }
.sw-cas-preuve u { background: var(--pg-filet-fort); }

.sw-cas figcaption { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding-top: 14px; border-top: 1px solid var(--pg-filet-fort); }
.sw-cas figcaption > * { grid-column: 1; }
.sw-cas-apres figcaption { border-top-color: var(--pg-encre); }
.sw-cas figcaption .label { color: var(--pg-sourdine); }
.sw-cas-apres figcaption .label { color: var(--pg-encre); }
.sw-cas-lecture { font-size: 1rem; line-height: 1.55; max-width: 42ch; }

/* la bascule : un filet qui traverse la gouttière d'une page à l'autre */
.sw-bascule { position: absolute; left: calc((100% + var(--sp-3)) / 12 * 5); top: 110px; width: calc((100% + var(--sp-3)) / 12 * 2); height: 1px; background: var(--pg-filet-fort); }
.sw-bascule i { position: absolute; right: -2px; top: -5px; width: 11px; height: 11px; background: var(--pg-encre); }

html[data-motion="on"] .sw-paire .sw-cas { opacity: 0; transform: translateY(20px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
html[data-motion="on"] .sw-paire.vu .sw-cas { opacity: 1; transform: none; }
html[data-motion="on"] .sw-paire.vu .sw-cas-apres { transition-delay: 260ms; }
html[data-motion="on"] .sw-paire .sw-bascule { transform: scaleX(0); transform-origin: left center; transition: transform var(--dur-draw) var(--ease-out) 420ms; }
html[data-motion="on"] .sw-paire.vu .sw-bascule { transform: none; }


/* ═══ ÉCRAN 5 — LE MANDAT ══════════════════════════════════════
   Trois moments en escalier : chacun un cran plus bas et plus à droite.
   Aucune frise numérotée. */

.sw-etapes { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sp-3); row-gap: var(--sp-5); }
.sw-etape { display: grid; gap: var(--sp-2); align-content: start; padding-top: var(--sp-4); border-top: 1px solid var(--pg-filet-fort); }
.sw-etape:nth-child(1) { grid-column: 1 / span 5; }
.sw-etape:nth-child(2) { grid-column: 4 / span 5; margin-top: var(--sp-4); }
.sw-etape:nth-child(3) { grid-column: 7 / span 5; margin-top: var(--sp-6); }
.sw-etape h3 { margin: 0; font-size: 1.375rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.025em; }
.sw-etape p { margin: 0; font-size: 1rem; line-height: 1.6; max-width: 46ch; }
.sw-livrable { padding-top: var(--sp-2); border-top: 1px solid var(--pg-filet); color: var(--pg-encre); }
.sw-livrable .label { display: block; margin-bottom: 4px; }
.sw-etape-fin .sw-livrable { border-top-color: var(--red); }


/* ═══ LES QUESTIONS ════════════════════════════════════════════ */

.sw-faq { grid-column: 1 / span 8; display: grid; gap: 0; }
.sw-faq details { border-top: 1px solid var(--pg-filet-fort); }
.sw-faq details:last-child { border-bottom: 1px solid var(--pg-filet-fort); }
.sw-faq summary {
  display: flex; gap: 16px; align-items: center; min-height: 60px; padding: 14px 0;
  font-size: 1.0625rem; font-weight: 600; color: var(--pg-encre); cursor: pointer; list-style: none;
}
.sw-faq summary::-webkit-details-marker { display: none; }
.sw-faq summary::before { content: ""; flex: none; width: 10px; height: 10px; border: 1px solid var(--pg-filet-fort); transition: background var(--dur) var(--ease); }
.sw-faq details[open] summary::before { background: var(--pg-encre); border-color: var(--pg-encre); }
.sw-faq details p { margin: 0 0 var(--sp-3) 26px; font-size: 1rem; line-height: 1.6; max-width: 62ch; }


/* ═══ L'APPEL ══════════════════════════════════════════════════ */

.sw-appel-note { grid-column: 1 / span 7; margin-top: var(--sp-2) !important; font-family: var(--f-mono); font-size: var(--t-small); color: var(--pg-sourdine); }


/* ═══ TABLETTE ═════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .sw-hero h1 { grid-column: 1 / -1; }
  .sw-hero .page-chapo, .sw-micro-hero, .sw-hero-appel { grid-column: 1 / span 6; }
  .sw-hero h1 { font-size: clamp(2.1rem, 4.4vw, 3rem); }
  .sw-page { grid-column: 1 / -1; grid-row: auto; margin-top: var(--sp-5); }
  .sw-moments { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--sp-4); }
  .sw-moments-fil { display: none; }
  .sw-moment { padding-top: var(--sp-4); }
  .sw-reponses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sw-colonne { display: none; }
  .sw-r1, .sw-r2, .sw-r3, .sw-r4 { grid-column: auto; }
  .sw-descente { display: none; }
  .sw-etape:nth-child(1), .sw-etape:nth-child(2), .sw-etape:nth-child(3) { grid-column: 1 / span 8; margin-top: 0; }
  .sw-cas-avant { grid-column: 1 / span 6; }
  .sw-cas-apres { grid-column: 7 / -1; margin-top: var(--sp-5); }
  .sw-tete, .sw-tete-large, .sw-fermeture, .sw-faq, .sw-boutique { grid-column: 1 / -1; }
}

/* ═══ TÉLÉPHONE ════════════════════════════════════════════════ */
@media (max-width: 860px) {
  .sw-zone { padding: var(--sp-6) 0; }
  .sw-zone > .cadre-section { grid-template-columns: 1fr; row-gap: var(--sp-4); }
  .sw-tete, .sw-tete-large { grid-column: auto; }
  .sw-hero { padding: var(--sp-5) 0 var(--sp-4); }
  .sw-hero .cadre-section { grid-template-columns: 1fr; }
  .sw-hero h1, .sw-hero .page-chapo, .sw-micro-hero, .sw-hero-appel, .sw-page { grid-column: auto; grid-row: auto; max-width: none; }
  .sw-hero h1 { font-size: clamp(2rem, 8.4vw, 2.7rem); margin-top: var(--sp-3); }
  .sw-page-vue { min-height: 0; padding: 18px 20px 28px; }
  .sw-frag-message em { max-width: none; }
  .sw-frag-preuve { width: 100%; }
  .sw-reponses, .sw-paire, .sw-portee, .sw-moments, .sw-etapes { grid-template-columns: 1fr; row-gap: var(--sp-5); }
  .sw-cas-avant, .sw-cas-apres { grid-column: auto; margin-top: 0; }
  .sw-bascule { display: none; }
  .sw-cas-lecture { max-width: none; }
  .sw-moment { padding-top: var(--sp-3); border-top: 1px solid var(--ligne-ivoire); }
  .sw-moment:first-of-type { border-top: 0; }
  .sw-etape:nth-child(1), .sw-etape:nth-child(2), .sw-etape:nth-child(3) { grid-column: auto; }
  .sw-fermeture, .sw-faq, .sw-boutique, .sw-appel-note { grid-column: auto; }
  .sw-reponse p:last-child, .sw-site-desc, .sw-etape p { max-width: none; }
}

/* ═══ MOUVEMENT RÉDUIT ═════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .sw-frag, .sw-page-rail, .sw-coin, .sw-moment { opacity: 1 !important; transform: none !important; }
  .sw-descente { transform: none !important; }
  .sw-site-cadre { clip-path: none !important; }
}