/* correspondance.css — « La Conciergerie de la Maison », FUSION des trois pistes (Claude, 01/10/2026). FR, aperçu seulement.
   Un seul cérémonial en trois matières (BRIEF_FUSION.md) :
     Acte I « Le Seuil »   — le voile (piste C) : la nuit s'ouvre sur l'organza réel, l'enseigne se trace, le titre Bodoni ;
     Acte II « La Pierre » — la dalle de marbre vert gravée du monogramme d'or (piste A), la carte des attentions gravée ;
     Acte III « Votre lettre » — l'atelier de la piste B : questions à gauche, la lettre se compose sur le vergé au filigrane ;
     le geste — pli et sceau de cire (B), le voile monte et une lumière passe (C), le monogramme se trace en or (A) ;
     la confirmation — sur la pierre, la lettre scellée et la carte de remerciement.
   Une SCÈNE collante porte les trois matières sous le texte ; le défilement les fond l'une dans l'autre (le voile se lève
   sur la pierre, la pierre s'éteint sur la table) : aucun bloc ne succède à un autre. Variables posées par le module :
   --cc-t1 (le voile se lève, 0 → 1), --cc-t2 (la pierre s'efface sur la table, 0 → 1), --cc-entete (hauteur de l'en-tête).
   Palette Terrae : vert nuit, vert profond, ivoire, or de la pierre ; l'orange de référence pour le focus et les erreurs.
   Toutes les règles sont bornées à la page (body.page-correspondance:not(#cc) = body.page-correspondance:not(#cc)). Mouvement réduit : aucune scène
   animée, aucune vidéo, chaque acte porte son affiche fixe, états finaux directs. */

@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/CormorantGaramond-400-latin.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/CormorantGaramond-italic-400-600-latin.woff2") format("woff2"); font-weight: 400 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Bodoni Moda"; src: url("../fonts/BodoniModa-Roman-latin.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }

body.page-correspondance:not(#cc) {
  --cc-nuit: #071e18;
  --cc-nuit-profonde: #03100c;
  --cc-noir: #010604;
  --cc-vert: #063e32;
  --cc-ivoire: #f4f0e8;
  --cc-papier: #e7e1d4;
  --cc-encre: #0a261e;
  --cc-orange: #f37021;
  --cc-or: #d6b36f;
  --cc-or-pale: rgba(214, 179, 111, .34);
  --cc-filet: rgba(244, 240, 232, .44);
  --cc-filet-doux: rgba(244, 240, 232, .16);
  --cc-texte-doux: rgba(244, 240, 232, .8);
  --cc-italique: "Cormorant Garamond", "Terrae Times", Georgia, serif;
  --cc-titre: "Bodoni Moda", "Terrae Times", "Times New Roman", serif;
  --cc-marge: clamp(20px, 5.6vw, 96px);
  --cc-entete: 85px;
  --cc-scene-h: calc(100lvh - var(--cc-entete));
  --cc-lent: cubic-bezier(.22, .61, .18, 1);
  --cc-courbe: cubic-bezier(.22, .61, .2, 1);
  --cc-t1: 0;
  --cc-t2: 0;
  background: var(--cc-nuit-profonde);
}
body.page-correspondance:not(#cc) [hidden] { display: none !important; }
body.page-correspondance:not(#cc) .cc-visuellement-cache { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
body.page-correspondance:not(#cc) .cc-page {
  display: block;
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  color: var(--cc-ivoire);
  color-scheme: dark;
  background: var(--cc-nuit-profonde);
}
body.page-correspondance:not(#cc) .cc-page :where(h1, h2, h3, p) { max-width: none; }
body.page-correspondance:not(#cc) .cc-acte { position: relative; z-index: 1; }

/* Flèche fine, commune aux appels et aux boutons */
body.page-correspondance:not(#cc) .cc-fleche { position: relative; display: inline-block; flex: 0 0 auto; width: 30px; height: 1px; background: currentColor; transition: width .5s var(--cc-courbe); }
body.page-correspondance:not(#cc) .cc-fleche::after { content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
body.page-correspondance:not(#cc) .cc-fleche-retour { transform: scaleX(-1); }

/* ── La scène : trois matières, collées sous l'en-tête, fondues par le défilement ─────────────────────────────── */
body.page-correspondance:not(#cc) .cc-scene {
  position: sticky;
  top: var(--cc-entete);
  z-index: 0;
  height: var(--cc-scene-h);
  margin-bottom: calc(-1 * var(--cc-scene-h));
  overflow: hidden;
  pointer-events: none;
  contain: layout paint;
}
body.page-correspondance:not(#cc) .cc-plan { position: absolute; inset: 0; }
/* La table de la lettre (piste B) : le fond de toute la scène. */
body.page-correspondance:not(#cc) .cc-plan-table {
  background:
    radial-gradient(ellipse 70% 55% at 72% 18%, rgba(9, 70, 55, .55), transparent 72%),
    radial-gradient(ellipse 55% 60% at 4% 96%, rgba(6, 62, 50, .38), transparent 70%),
    linear-gradient(180deg, #08241d 0%, var(--cc-nuit) 60%);
}
/* La pierre (piste A) : elle sort de la nuit quand le voile se lève, s'éteint quand la lettre arrive, revient pour la
   confirmation. Son affiche n'est demandée qu'à l'approche de l'acte II (data-charge, posé par le module). */
body.page-correspondance:not(#cc) .cc-plan-pierre {
  background-color: #040b09;
  opacity: calc(min(1, var(--cc-t1) * 1.45) * (1 - var(--cc-t2)));
  transform: translate3d(0, calc((1 - min(1, var(--cc-t1) * 1.2)) * 3%), 0) scale(calc(1.035 - min(1, var(--cc-t1)) * .035));
  transform-origin: 50% 40%;
}
body.page-correspondance:not(#cc) .cc-plan-pierre[data-charge] { background: #040b09 url("conciergerie/pierre-paysage.webp") 50% 50% / cover no-repeat; }
body.page-correspondance:not(#cc) .cc-plan-pierre video,
body.page-correspondance:not(#cc) .cc-voile-ouverture video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.7s var(--cc-lent); pointer-events: none; }
body.page-correspondance:not(#cc) .cc-plan-pierre video[data-pret],
body.page-correspondance:not(#cc) .cc-voile-ouverture video[data-pret] { opacity: 1; }
body.page-correspondance:not(#cc) .cc-pierre-lumiere {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(2, 9, 7, .5) 0%, rgba(2, 9, 7, 0) 16%, rgba(2, 9, 7, 0) 78%, rgba(2, 9, 7, .55) 100%);
}
/* Le voile (piste C) : il se lève sur la pierre — un masque doux monte du bas, le plan s'élève et avance à peine. */
body.page-correspondance:not(#cc) .cc-plan-voile {
  opacity: calc(1 - var(--cc-t1) * .25);
  transform: translate3d(0, calc(var(--cc-t1) * -7%), 0) scale(calc(1 + var(--cc-t1) * .05));
  transform-origin: 50% 0;
  -webkit-mask-image: linear-gradient(to top, transparent calc(var(--cc-t1) * 145% - 45%), #000 calc(var(--cc-t1) * 145%));
  mask-image: linear-gradient(to top, transparent calc(var(--cc-t1) * 145% - 45%), #000 calc(var(--cc-t1) * 145%));
}
body.page-correspondance:not(#cc) .cc-voile-ouverture {
  position: absolute;
  inset: 0;
  background: var(--cc-noir) url("conciergerie/voile-nuit-1280.webp") 50% 50% / cover no-repeat;
  animation: cc-ouverture 2.6s ease-out both;
}
/* L'ombre garde le titre lisible quel que soit le pli du voile (piste C). */
body.page-correspondance:not(#cc) .cc-voile-ombre {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(1, 8, 6, .9) 0%, rgba(1, 8, 6, .72) 30%, rgba(1, 8, 6, .2) 58%, rgba(1, 8, 6, 0) 78%),
    linear-gradient(0deg, rgba(1, 8, 6, .78) 0%, rgba(1, 8, 6, 0) 42%),
    linear-gradient(180deg, rgba(1, 8, 6, .55) 0%, rgba(1, 8, 6, 0) 20%);
}
/* Bascule d'état (envoi, complément) : la matière change en fondu, jamais d'un coup. */
body.page-correspondance:not(#cc) .cc-scene[data-bascule] .cc-plan { transition: opacity .9s var(--cc-lent); }

/* ── Acte I · Le Seuil (piste C, telle quelle) ────────────────────────────────────────────────────────────────── */
body.page-correspondance:not(#cc) .cc-seuil { display: grid; min-height: calc(100svh - var(--cc-entete)); }
body.page-correspondance:not(#cc) .cc-seuil-corps {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 40px;
  min-height: 100%;
  padding: clamp(28px, 3.4vw, 44px) var(--cc-marge);
}
body.page-correspondance:not(#cc) .cc-fil { margin: 0; color: var(--cc-texte-doux); }
body.page-correspondance:not(#cc) .cc-fil a { color: var(--cc-ivoire); }
body.page-correspondance:not(#cc) .cc-seuil-texte { align-self: end; max-width: min(980px, 100%); padding-bottom: clamp(8px, 2vw, 24px); }
body.page-correspondance:not(#cc) .cc-surtitre {
  margin: 0 0 clamp(22px, 2.6vw, 34px);
  font: 400 11.5px/1.6 var(--tc-sans);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(244, 239, 230, .74);
}
body.page-correspondance:not(#cc) .cc-surtitre::before { content: ""; display: inline-block; width: 44px; height: 1px; margin-right: 18px; vertical-align: .32em; background: var(--cc-orange); }
body.page-correspondance:not(#cc) .cc-titre {
  margin: 0;
  font-family: var(--cc-titre);
  font-weight: 400;
  font-size: clamp(56px, 8.6vw, 140px);
  line-height: .9;
  letter-spacing: -.018em;
  color: var(--cc-ivoire);
  font-kerning: normal;
}
body.page-correspondance:not(#cc) .cc-titre-ligne { display: block; }
body.page-correspondance:not(#cc) .cc-titre-ligne-2 { padding-left: .52em; }
body.page-correspondance:not(#cc) .cc-accueil { margin: clamp(30px, 3.2vw, 46px) 0 0; max-width: 33em; font: 400 clamp(17px, 1.32vw, 20px)/1.62 var(--tc-sans); color: rgba(244, 239, 230, .86); }
body.page-correspondance:not(#cc) .cc-devise { margin: 16px 0 0; font: italic 400 clamp(21px, 1.7vw, 26px)/1.3 var(--cc-italique); color: rgba(244, 239, 230, .78); }
body.page-correspondance:not(#cc) .cc-seuil-pied { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
body.page-correspondance:not(#cc) .cc-descendre {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  min-height: 44px;
  font: 400 11.5px/1 var(--tc-sans);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(244, 239, 230, .86);
  text-decoration: none;
}
body.page-correspondance:not(#cc) .cc-descendre-filet { position: relative; width: 1px; height: 44px; background: var(--cc-filet-doux); overflow: hidden; }
body.page-correspondance:not(#cc) .cc-descendre-filet::after { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 40%; background: var(--cc-ivoire); }
/* Le filet ne court que pendant que le voile joue : « Suspendre le voile » l'arrête aussi (WCAG 2.2.2). */
body.page-correspondance:not(#cc) .cc-page[data-voile="joue"] .cc-descendre-filet::after { animation: cc-filet 2.8s var(--cc-lent) infinite; }
body.page-correspondance:not(#cc) .cc-descendre:is(:hover, :focus-visible) { color: var(--cc-ivoire); }
@keyframes cc-filet { from { transform: translateY(-100%); } to { transform: translateY(250%); } }
/* L'enseigne : le monogramme se trace dans la nuit, avant le titre. */
body.page-correspondance:not(#cc) .cc-enseigne { display: block; width: clamp(46px, 4.2vw, 62px); height: auto; aspect-ratio: 1; margin: 0 0 clamp(24px, 2.6vw, 34px) -4px; color: var(--cc-ivoire); overflow: visible; filter: drop-shadow(0 0 12px rgba(244, 239, 230, .28)); }
body.page-correspondance:not(#cc) .cc-enseigne path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: cc-trace 1.5s cubic-bezier(.45, 0, .2, 1) .35s forwards; }
body.page-correspondance:not(#cc) .cc-enseigne path:nth-child(2) { animation-duration: .9s; animation-delay: .95s; }
body.page-correspondance:not(#cc) .cc-enseigne path:nth-child(3) { animation-duration: .7s; animation-delay: 1.35s; }
body.page-correspondance:not(#cc) .cc-enseigne path:nth-child(4) { animation-duration: .7s; animation-delay: 1.48s; }
body.page-correspondance:not(#cc) .cc-enseigne path:nth-child(5) { animation-duration: .7s; animation-delay: 1.61s; }
/* Entrée cinématographique en CSS seul (opacité, transformation, flou : aucun décalage de mise en page). */
body.page-correspondance:not(#cc) .cc-entree { animation: cc-entree 1.9s var(--cc-lent) both; }
body.page-correspondance:not(#cc) .cc-titre-ligne.cc-entree { animation-name: cc-mise-au-point; animation-duration: 2.2s; }
body.page-correspondance:not(#cc) .cc-entree[data-ordre="0"] { animation-delay: 1.15s; }
body.page-correspondance:not(#cc) .cc-entree[data-ordre="1"] { animation-delay: 1.4s; }
body.page-correspondance:not(#cc) .cc-entree[data-ordre="2"] { animation-delay: 1.72s; }
body.page-correspondance:not(#cc) .cc-entree[data-ordre="3"] { animation-delay: 2.35s; }
body.page-correspondance:not(#cc) .cc-entree[data-ordre="4"] { animation-delay: 2.65s; }
body.page-correspondance:not(#cc) .cc-entree[data-ordre="5"] { animation-delay: 3s; }
@keyframes cc-trace { to { stroke-dashoffset: 0; } }
@keyframes cc-ouverture { from { opacity: 0; } to { opacity: 1; } }
@keyframes cc-entree { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes cc-mise-au-point { from { opacity: 0; transform: translateY(22px); filter: blur(10px); } 60% { filter: blur(0); } to { opacity: 1; transform: none; filter: blur(0); } }

/* Suspendre une boucle (WCAG 2.2.2) : le voile à l'arrivée, la lumière sur la pierre. */
body.page-correspondance:not(#cc) .cc-suspendre {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  margin: 0;
  padding: 0 18px;
  border: 1px solid var(--cc-filet);
  border-radius: 0;
  background: rgba(1, 8, 6, .35);
  font: 400 11px/1 var(--tc-sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(244, 239, 230, .86);
  cursor: pointer;
  transition: border-color .4s ease, color .4s ease;
}
body.page-correspondance:not(#cc) .cc-suspendre:hover { border-color: var(--cc-ivoire); color: var(--cc-ivoire); }
body.page-correspondance:not(#cc) .cc-suspendre-icone { position: relative; width: 9px; height: 11px; border-left: 1.5px solid currentColor; border-right: 1.5px solid currentColor; }
body.page-correspondance:not(#cc) .cc-suspendre[data-etat="suspendu"] .cc-suspendre-icone { width: 0; height: 0; border: 0; border-left: 9px solid currentColor; border-top: 5.5px solid transparent; border-bottom: 5.5px solid transparent; }
body.page-correspondance:not(#cc) .cc-suspendre-pierre { position: absolute; right: var(--cc-marge); bottom: clamp(18px, 3.4vh, 34px); }
body.page-correspondance:not(#cc) :is(.cc-suspendre, .cc-descendre, .cc-fil a):focus-visible { outline: 2px solid var(--cc-orange); outline-offset: 4px; }

/* ── Acte II · La Pierre : la carte des attentions gravée sur la dalle ─────────────────────────────────────────── */
body.page-correspondance:not(#cc) .cc-pierre {
  display: grid;
  align-items: center;
  min-height: calc(100svh - var(--cc-entete));
  padding: clamp(56px, 9vh, 104px) var(--cc-marge) clamp(84px, 12vh, 128px);
  box-sizing: border-box;
  scroll-margin-top: var(--cc-entete);
}
body.page-correspondance:not(#cc) .cc-gravure { position: relative; isolation: isolate; width: min(600px, 46vw); }
/* Voile d'ombre local, sous le texte seulement : le monogramme, à droite, reste intact. */
body.page-correspondance:not(#cc) .cc-gravure::before {
  content: "";
  position: absolute;
  inset: -16% -10% -16% -40%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(2, 9, 7, .84) 0%, rgba(2, 9, 7, .8) 58%, rgba(2, 9, 7, .5) 82%, rgba(2, 9, 7, 0) 100%);
}
body.page-correspondance:not(#cc) .cc-inscription {
  margin: 0 0 20px;
  font: 400 11.5px/1.5 var(--tc-sans);
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--cc-or);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .55), 0 1px 0 rgba(255, 236, 196, .1);
}
body.page-correspondance:not(#cc) .cc-pierre-titre {
  margin: 0 0 clamp(26px, 3.6vh, 40px);
  max-width: 13em;
  font: 300 clamp(36px, 3.5vw, 54px)/1.04 var(--tc-serif);
  letter-spacing: -.025em;
  color: var(--cc-ivoire);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .5), 0 1px 1px rgba(0, 0, 0, .45);
  text-wrap: balance;
  outline: 0;
}
/* Les filets gravés : un trait d'or pâle et son ombre, comme une taille dans la pierre. */
body.page-correspondance:not(#cc) .cc-attentions { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--cc-or-pale); box-shadow: 0 -1px 0 rgba(0, 0, 0, .45); }
body.page-correspondance:not(#cc) .cc-attentions > li { margin: 0; padding: 0; border-bottom: 1px solid var(--cc-or-pale); box-shadow: 0 1px 0 rgba(0, 0, 0, .45); }
body.page-correspondance:not(#cc) .cc-attention {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  display: grid;
  grid-template-columns: 3.1em minmax(0, 1fr) auto;
  column-gap: 10px;
  align-items: baseline;
  width: 100%;
  min-height: 64px;
  margin: 0;
  padding: clamp(13px, 1.8vh, 18px) 4px clamp(13px, 1.8vh, 18px) 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
body.page-correspondance:not(#cc) .cc-num {
  grid-row: 1 / span 2;
  font: 400 clamp(21px, 1.7vw, 25px)/1 var(--cc-titre);
  letter-spacing: .04em;
  background: linear-gradient(180deg, #f3dca6 0%, #d3ab66 55%, #a8803f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 -1px 0 rgba(0, 0, 0, .55)) drop-shadow(0 1px 0 rgba(255, 238, 200, .12));
}
body.page-correspondance:not(#cc) .cc-att-titre {
  font: 400 clamp(13px, 1vw, 14.5px)/1.4 var(--tc-sans);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cc-ivoire);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .55);
}
body.page-correspondance:not(#cc) .cc-att-phrase {
  grid-column: 2;
  margin-top: 5px;
  font: italic 400 clamp(17.5px, 1.36vw, 20px)/1.38 var(--cc-italique);
  color: var(--cc-texte-doux);
  text-wrap: pretty;
}
body.page-correspondance:not(#cc) .cc-att-geste {
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding-left: 12px;
  font: 400 10.5px/1 var(--tc-sans);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--cc-or);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity .7s var(--cc-lent), transform .7s var(--cc-lent);
}
body.page-correspondance:not(#cc) .cc-att-geste .cc-fleche { width: 22px; }
/* Une lumière d'or court sous l'attention survolée, comme la lampe du restaurateur sur une inscription. */
body.page-correspondance:not(#cc) .cc-attention::after {
  content: "";
  position: absolute;
  left: 3.1em;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, rgba(243, 220, 166, 0), rgba(243, 220, 166, .95) 30%, rgba(214, 179, 111, .6) 70%, rgba(214, 179, 111, 0));
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 1.1s var(--cc-lent);
}
body.page-correspondance:not(#cc) .cc-attention:is(:hover, :focus-visible, [aria-current="true"])::after { transform: scaleX(1); }
body.page-correspondance:not(#cc) .cc-attention:is(:hover, :focus-visible, [aria-current="true"]) .cc-att-geste { opacity: 1; transform: none; }
body.page-correspondance:not(#cc) .cc-attention:is(:hover, :focus-visible) .cc-num { filter: drop-shadow(0 0 10px rgba(243, 220, 166, .35)); }
body.page-correspondance:not(#cc) .cc-attention:focus-visible { outline: 2px solid var(--cc-orange); outline-offset: 4px; }
body.page-correspondance:not(#cc) .cc-avant { margin-top: clamp(24px, 3.4vh, 38px); max-width: 34em; }
body.page-correspondance:not(#cc) .cc-avant-titre { margin: 0 0 10px; font: 400 10.5px/1.4 var(--tc-sans); letter-spacing: .32em; text-transform: uppercase; color: var(--cc-or); }
body.page-correspondance:not(#cc) .cc-avant-liste { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
body.page-correspondance:not(#cc) .cc-avant-liste li { position: relative; margin: 0; padding-left: 20px; font: 400 13px/1.55 var(--tc-sans); color: rgba(244, 240, 232, .76); }
body.page-correspondance:not(#cc) .cc-avant-liste li::before { content: ""; position: absolute; left: 0; top: .78em; width: 9px; height: 1px; background: var(--cc-or); opacity: .8; }

/* ── Acte III · Votre lettre (l'atelier de la piste B) ──────────────────────────────────────────────────────── */
body.page-correspondance:not(#cc) .cc-atelier {
  display: grid;
  grid-template-columns: minmax(0, 500px) minmax(0, 600px);
  column-gap: clamp(48px, 6.4vw, 120px);
  justify-content: center;
  align-items: start;
  margin: 0;
  padding: clamp(36px, 5.5vh, 64px) var(--cc-marge) clamp(88px, 12vh, 132px);
  min-height: calc(100svh - var(--cc-entete));
  box-sizing: border-box;
  scroll-margin-top: var(--cc-entete);
}
body.page-correspondance:not(#cc) .cc-ecritoire { min-width: 0; }
/* La table et la feuille se lèvent à l'ouverture de l'acte : la lettre monte sur la table, l'écritoire suit. */
body.page-correspondance:not(#cc) .cc-atelier[data-entree] .cc-table { animation: cc-papier 1.8s var(--cc-lent) .3s both; }
body.page-correspondance:not(#cc) .cc-atelier[data-entree] .cc-ecritoire { animation: cc-lever 1.4s var(--cc-lent) .75s both; }
@keyframes cc-papier { from { opacity: 0; transform: translateY(80px) rotate(-.7deg); } 40% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes cc-lever { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
body.page-correspondance:not(#cc) .cc-progression {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  margin: 0 0 30px;
  padding: 0 0 16px;
  list-style: none;
  border-bottom: 1px solid var(--cc-filet-doux);
  font: 400 11px/1.5 var(--tc-sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(244, 240, 232, .66);
}
body.page-correspondance:not(#cc) .cc-progression li { display: inline-flex; align-items: baseline; gap: 10px; margin: 0; padding: 0; }
body.page-correspondance:not(#cc) .cc-progression-chiffre { font: 400 14px/1 var(--cc-titre); letter-spacing: 0; }
body.page-correspondance:not(#cc) .cc-progression li[aria-current="step"] { color: var(--cc-ivoire); }
body.page-correspondance:not(#cc) .cc-progression li[aria-current="step"] .cc-progression-chiffre { color: var(--cc-or); }
body.page-correspondance:not(#cc) .cc-progression li[data-fait] { color: rgba(244, 240, 232, .74); }
body.page-correspondance:not(#cc) .cc-attention-choisie {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  margin: 0 0 clamp(26px, 3.6vh, 40px);
  font: 400 15px/1.5 var(--tc-sans);
  color: var(--cc-texte-doux);
}
body.page-correspondance:not(#cc) .cc-attention-choisie-libelle { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: rgba(244, 240, 232, .62); }
body.page-correspondance:not(#cc) .cc-attention-choisie-nom { font: italic 400 21px/1.25 var(--cc-italique); color: var(--cc-ivoire); }
body.page-correspondance:not(#cc) .cc-mouvement-titre {
  margin: 0 0 14px;
  max-width: 24ch;
  font: 300 clamp(32px, 2.7vw, 42px)/1.08 var(--tc-serif);
  letter-spacing: -.025em;
  color: var(--cc-ivoire);
  outline: 0;
  text-wrap: balance;
}
body.page-correspondance:not(#cc) .cc-mouvement-aide { margin: 0 0 clamp(30px, 4vh, 44px); max-width: 34em; font: 400 16px/1.6 var(--tc-sans); color: var(--cc-texte-doux); }

/* liens et boutons secondaires */
body.page-correspondance:not(#cc) .cc-lien {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: 400 12px/1.2 var(--tc-sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cc-ivoire);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .5em;
  text-decoration-color: var(--cc-filet);
  cursor: pointer;
  transition: text-decoration-color .4s var(--cc-courbe);
}
body.page-correspondance:not(#cc) .cc-lien:hover { text-decoration-color: var(--cc-ivoire); }
body.page-correspondance:not(#cc) .cc-lien:focus-visible { outline: 2px solid var(--cc-orange); outline-offset: 4px; }

/* questions et puces */
body.page-correspondance:not(#cc) .cc-question { min-inline-size: 0; margin: 0 0 clamp(26px, 3.4vh, 36px); padding: 0; border: 0; }
body.page-correspondance:not(#cc) .cc-question-titre { float: none; margin: 0 0 14px; padding: 0; font: italic 400 clamp(21px, 1.6vw, 24px)/1.25 var(--cc-italique); color: var(--cc-ivoire); }
body.page-correspondance:not(#cc) .cc-question-titre .cc-facultatif { font: 400 13px/1 var(--tc-sans); font-style: normal; letter-spacing: .02em; color: rgba(244, 240, 232, .64); }
body.page-correspondance:not(#cc) .cc-choix { display: flex; flex-wrap: wrap; gap: 10px; }
body.page-correspondance:not(#cc) .cc-puce { position: relative; display: inline-flex; margin: 0; }
body.page-correspondance:not(#cc) .cc-puce input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
body.page-correspondance:not(#cc) .cc-puce span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 17px;
  box-sizing: border-box;
  border: 1px solid var(--cc-filet);
  font: 400 14.5px/1.25 var(--tc-sans);
  letter-spacing: .02em;
  color: var(--cc-ivoire);
  pointer-events: none;
  transition: background-color .45s var(--cc-courbe), border-color .45s var(--cc-courbe), color .45s var(--cc-courbe);
}
body.page-correspondance:not(#cc) .cc-puce:hover span { border-color: var(--cc-ivoire); }
body.page-correspondance:not(#cc) .cc-puce input:checked + span { background: var(--cc-ivoire); border-color: var(--cc-ivoire); color: var(--cc-nuit); }
body.page-correspondance:not(#cc) .cc-puce input:focus-visible + span { outline: 2px solid var(--cc-orange); outline-offset: 3px; }
body.page-correspondance:not(#cc) .cc-puce-discrete span { border-style: dashed; border-color: rgba(244, 240, 232, .3); color: rgba(244, 240, 232, .76); }
body.page-correspondance:not(#cc) .cc-question[data-attente] { display: none; }
body.page-correspondance:not(#cc) .cc-question-revele { animation: cc-lever .55s var(--cc-courbe) both; }
body.page-correspondance:not(#cc) .cc-cadre { margin: 0 0 clamp(26px, 3.4vh, 36px); max-width: 36em; padding-left: 18px; border-left: 1px solid var(--cc-or); font: italic 400 18px/1.5 var(--cc-italique); color: var(--cc-texte-doux); }

/* champs */
body.page-correspondance:not(#cc) .cc-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 3vh, 32px) 28px; margin: 0 0 clamp(26px, 3.4vh, 36px); }
body.page-correspondance:not(#cc) .cc-champ { min-width: 0; margin: 0 0 clamp(24px, 3vh, 32px); }
body.page-correspondance:not(#cc) .cc-grille .cc-champ { margin: 0; }
@supports (grid-template-rows: subgrid) {
  body.page-correspondance:not(#cc) .cc-grille .cc-champ { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
  body.page-correspondance:not(#cc) .cc-grille .cc-champ > .cc-libelle { align-self: end; }
}
body.page-correspondance:not(#cc) .cc-libelle { display: block; margin: 0 0 6px; font: 400 11.5px/1.5 var(--tc-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--cc-texte-doux); transition: color .4s var(--cc-courbe); }
body.page-correspondance:not(#cc) .cc-facultatif { letter-spacing: .02em; text-transform: none; color: rgba(244, 240, 232, .64); }
body.page-correspondance:not(#cc) .cc-champ:focus-within > .cc-libelle { color: var(--cc-ivoire); }
body.page-correspondance:not(#cc) .cc-saisie {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  margin: 0;
  padding: 6px 0 10px;
  box-sizing: border-box;
  border: 0;
  border-bottom: 1px solid var(--cc-filet);
  border-radius: 0;
  background: transparent;
  box-shadow: 0 1px 0 0 transparent;
  font: 400 clamp(19px, 1.4vw, 21px)/1.45 var(--tc-serif);
  color: var(--cc-ivoire);
  caret-color: var(--cc-orange);
  outline: 0;
  transition: border-color .4s var(--cc-courbe), box-shadow .4s var(--cc-courbe);
}
body.page-correspondance:not(#cc) .cc-saisie:hover { border-bottom-color: rgba(244, 240, 232, .7); }
body.page-correspondance:not(#cc) .cc-saisie:focus { border-bottom-color: var(--cc-orange); box-shadow: 0 1px 0 0 var(--cc-orange); }
body.page-correspondance:not(#cc) .cc-saisie[aria-invalid="true"] { border-bottom-color: var(--cc-orange); }
body.page-correspondance:not(#cc) .cc-saisie:-webkit-autofill,
body.page-correspondance:not(#cc) .cc-saisie:-webkit-autofill:focus { -webkit-text-fill-color: var(--cc-ivoire); box-shadow: 0 0 0 1000px var(--cc-nuit) inset; transition: background-color 99999s; }
body.page-correspondance:not(#cc) .cc-message {
  --cc-interligne: 1.6em;
  min-height: calc(var(--cc-interligne) * 9 + 16px);
  padding-top: 4px;
  line-height: var(--cc-interligne);
  resize: none;
  overflow: hidden;
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--cc-interligne) - 1px), var(--cc-filet-doux) calc(var(--cc-interligne) - 1px), var(--cc-filet-doux) var(--cc-interligne));
  background-position: 0 4px;
  background-attachment: local;
}
body.page-correspondance:not(#cc) .cc-aide { margin: 8px 0 0; max-width: 36em; font: 400 14px/1.55 var(--tc-sans); color: rgba(244, 240, 232, .74); }
body.page-correspondance:not(#cc) .cc-champ-message > .cc-aide:first-of-type { margin: 0 0 14px; font-size: 15px; }
body.page-correspondance:not(#cc) .cc-aide-discrete { font-size: 13px; color: rgba(244, 240, 232, .66); }
body.page-correspondance:not(#cc) .cc-aide[data-ton="limite"] { color: var(--cc-ivoire); }
body.page-correspondance:not(#cc) .cc-erreur { display: flex; gap: 10px; margin: 10px 0 0; font: 400 14px/1.5 var(--tc-sans); color: var(--cc-ivoire); }
body.page-correspondance:not(#cc) .cc-erreur::before { content: ""; flex: 0 0 14px; height: 1px; margin-top: .78em; background: var(--cc-orange); }
body.page-correspondance:not(#cc) .cc-reserve { margin: 0 0 clamp(26px, 3.4vh, 34px); max-width: 36em; padding-top: 16px; border-top: 1px solid var(--cc-filet-doux); font: 400 13.5px/1.6 var(--tc-sans); color: rgba(244, 240, 232, .7); }
body.page-correspondance:not(#cc) .cc-telephone { margin: 0 0 clamp(8px, 1vh, 12px); padding-left: 20px; border-left: 1px solid var(--cc-filet-doux); }
body.page-correspondance:not(#cc) .cc-piege { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* actions */
body.page-correspondance:not(#cc) .cc-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-top: clamp(30px, 4vh, 44px); }
body.page-correspondance:not(#cc) .cc-suite,
body.page-correspondance:not(#cc) .cc-sceller {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  min-height: 58px;
  margin: 0;
  padding: 0 26px 0 30px;
  border: 1px solid var(--cc-ivoire);
  border-radius: 0;
  background: var(--cc-ivoire);
  color: var(--cc-nuit);
  font: 400 12px/1 var(--tc-sans);
  letter-spacing: .24em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .45s var(--cc-courbe), color .45s var(--cc-courbe);
}
body.page-correspondance:not(#cc) .cc-suite:hover,
body.page-correspondance:not(#cc) .cc-sceller:hover { background: transparent; color: var(--cc-ivoire); }
body.page-correspondance:not(#cc) :is(.cc-suite, .cc-sceller, .cc-retour):focus-visible { outline: 2px solid var(--cc-orange); outline-offset: 4px; }
body.page-correspondance:not(#cc) :is(.cc-suite, .cc-sceller):is(:hover, :focus-visible) .cc-fleche { width: 40px; }
body.page-correspondance:not(#cc) .cc-sceller[aria-disabled="true"] { cursor: progress; }
body.page-correspondance:not(#cc) .cc-retour {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 44px;
  margin: 0;
  padding: 0 4px 0 0;
  border: 0;
  background: none;
  font: 400 11.5px/1 var(--tc-sans);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cc-texte-doux);
  cursor: pointer;
}
body.page-correspondance:not(#cc) .cc-retour:hover { color: var(--cc-ivoire); }
body.page-correspondance:not(#cc) .cc-retour .cc-fleche { width: 22px; }

/* ── La feuille : papier vergé, lumière derrière, filigrane (piste B) ─────────────────────────────────────────── */
body.page-correspondance:not(#cc) .cc-feuille {
  --lx: 50%;
  --ly: 42%;
  --lr: 300px;
  --li: 0;
  --fy: 44%;
  --fw: 60%;
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  color: var(--cc-encre);
  color-scheme: light;
  background: var(--cc-papier) url("conciergerie/papier-verge.webp") 0 0 / 640px 640px repeat;
  box-shadow: 0 0 0 .5px rgba(0, 0, 0, .25), 0 1px 1px rgba(0, 0, 0, .22), 0 16px 32px -14px rgba(0, 0, 0, .55), 0 54px 110px -38px rgba(0, 0, 0, .7);
}
body.page-correspondance:not(#cc) .cc-feuille::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(152deg, rgba(255, 252, 244, .2) 0%, rgba(255, 252, 244, 0) 42%, rgba(40, 30, 10, .045) 100%); }
body.page-correspondance:not(#cc) .cc-papier { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
body.page-correspondance:not(#cc) .cc-jour {
  position: absolute;
  inset: 0;
  opacity: var(--li);
  background: #f8f0db url("conciergerie/papier-jour.webp") 0 0 / 640px 640px repeat;
  -webkit-mask-image: radial-gradient(circle var(--lr) at var(--lx) var(--ly), #000 0%, rgba(0, 0, 0, .92) 18%, rgba(0, 0, 0, .7) 36%, rgba(0, 0, 0, .42) 56%, rgba(0, 0, 0, .17) 77%, transparent 100%);
  mask-image: radial-gradient(circle var(--lr) at var(--lx) var(--ly), #000 0%, rgba(0, 0, 0, .92) 18%, rgba(0, 0, 0, .7) 36%, rgba(0, 0, 0, .42) 56%, rgba(0, 0, 0, .17) 77%, transparent 100%);
}
body.page-correspondance:not(#cc) .cc-filigrane { position: absolute; left: 50%; top: var(--fy); width: var(--fw); aspect-ratio: 1; transform: translate(-50%, -50%); background: url("conciergerie/filigrane.webp") center / 100% 100% no-repeat; }
body.page-correspondance:not(#cc) .cc-feuille > :not(.cc-papier) { position: relative; z-index: 1; }
body.page-correspondance:not(#cc) .cc-entete { display: flex; flex-direction: column; align-items: center; text-align: center; color: var(--cc-vert); }
body.page-correspondance:not(#cc) .cc-monogramme { display: block; width: 42px; height: 42px; color: var(--cc-vert); filter: drop-shadow(0 .6px 0 rgba(255, 255, 255, .65)); }
body.page-correspondance:not(#cc) .cc-entete-nom { margin-top: 14px; margin-right: -.38em; font: 400 10.5px/1.2 var(--tc-sans); letter-spacing: .38em; text-transform: uppercase; text-shadow: 0 .6px 0 rgba(255, 255, 255, .6); }
body.page-correspondance:not(#cc) .cc-entete-service { position: relative; margin-top: 13px; padding-top: 13px; font: italic 400 16px/1.2 var(--cc-italique); letter-spacing: .01em; color: rgba(6, 62, 50, .92); }
body.page-correspondance:not(#cc) .cc-entete-service::before { content: ""; position: absolute; top: 0; left: 50%; width: 26px; height: 1px; margin-left: -13px; background: rgba(6, 62, 50, .45); }

/* La lettre qui se compose */
body.page-correspondance:not(#cc) .cc-table { position: sticky; top: calc(var(--cc-entete) + 28px); min-width: 0; }
body.page-correspondance:not(#cc) .cc-feuille-lettre {
  --lr: 360px;
  --fy: 380px;
  --fw: 66%;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: min(calc(100svh - var(--cc-entete) - 64px), 820px);
  max-height: calc(100svh - var(--cc-entete) - 64px);
  padding: clamp(36px, 4.4vh, 52px) clamp(34px, 4vw, 60px);
  overflow: hidden;
}
body.page-correspondance:not(#cc) .cc-feuille-lettre .cc-entete { flex: 0 0 auto; margin-bottom: clamp(24px, 3.4vh, 36px); }
body.page-correspondance:not(#cc) .cc-ecrit { flex: 1 1 auto; min-height: 0; overflow: hidden; scroll-behavior: smooth; font: italic 400 clamp(19px, 1.45vw, 21.5px)/1.56 var(--cc-italique); color: var(--cc-encre); overflow-wrap: anywhere; }
body.page-correspondance:not(#cc) .cc-ecrit[data-defile] { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 64px); mask-image: linear-gradient(to bottom, transparent 0, #000 64px); }
body.page-correspondance:not(#cc) .cc-ecrit p { margin: 0; }
body.page-correspondance:not(#cc) .cc-l-expediteur { margin: 0 0 16px !important; white-space: pre-line; font-size: .84em; line-height: 1.46; color: rgba(10, 38, 30, .8); }
body.page-correspondance:not(#cc) .cc-l-expediteur:empty { display: none; }
body.page-correspondance:not(#cc) .cc-l-destinataire { margin: 0 0 18px 52% !important; line-height: 1.4; }
body.page-correspondance:not(#cc) .cc-l-date { margin: 0 0 24px 52% !important; }
body.page-correspondance:not(#cc) .cc-l-date sup { font-size: .62em; line-height: 0; vertical-align: .55em; letter-spacing: .02em; }
body.page-correspondance:not(#cc) .cc-l-objet-libelle { font-style: normal; font-variant: small-caps; letter-spacing: .06em; font-weight: 500; }
body.page-correspondance:not(#cc) .cc-l-precisions { margin-top: 6px !important; color: rgba(10, 38, 30, .82); }
body.page-correspondance:not(#cc) .cc-l-precisions:empty { display: none; }
body.page-correspondance:not(#cc) .cc-l-appel { margin-top: 24px !important; }
body.page-correspondance:not(#cc) .cc-l-corps { margin-top: 12px !important; white-space: pre-wrap; text-indent: 0; }
body.page-correspondance:not(#cc) .cc-l-corps:empty::before { content: attr(data-vide); color: rgba(10, 38, 30, .38); }
body.page-correspondance:not(#cc) .cc-l-signature { margin-top: 30px !important; text-align: right; font-size: 1.24em; font-weight: 500; }
body.page-correspondance:not(#cc) .cc-l-signature:empty { display: none; }
body.page-correspondance:not(#cc) .cc-l-reponse { margin-top: 18px !important; text-align: right; font-size: .82em; color: rgba(10, 38, 30, .76); }
body.page-correspondance:not(#cc) .cc-l-reponse:empty { display: none; }
body.page-correspondance:not(#cc) .cc-encre { animation: cc-encre 1.1s var(--cc-courbe) both; }
@keyframes cc-encre { from { opacity: 0; filter: blur(1.4px); } 55% { opacity: .85; } to { opacity: 1; filter: blur(0); } }
body.page-correspondance:not(#cc) .cc-renouvelle { animation: cc-renouvelle .9s var(--cc-courbe) both; }
@keyframes cc-renouvelle { from { opacity: 0; } to { opacity: 1; } }
body.page-correspondance:not(#cc) .cc-mouvement.cc-entree-mvt { animation: cc-lever .55s var(--cc-courbe) both; }

/* La relecture : la lettre vient au centre */
body.page-correspondance:not(#cc) .cc-atelier[data-vue="relecture"] { grid-template-columns: minmax(0, 700px); }
body.page-correspondance:not(#cc) .cc-atelier[data-vue="relecture"] .cc-table { display: none; }
body.page-correspondance:not(#cc) .cc-relecture { text-align: center; }
body.page-correspondance:not(#cc) .cc-relecture :is(.cc-mouvement-titre, .cc-mouvement-aide) { margin-left: auto; margin-right: auto; }
body.page-correspondance:not(#cc) .cc-feuille-relue { max-height: none; min-height: 0; text-align: left; --fy: 360px; }
body.page-correspondance:not(#cc) .cc-feuille-relue .cc-ecrit { overflow: visible; -webkit-mask-image: none; mask-image: none; }
body.page-correspondance:not(#cc) .cc-relecture .cc-feuille-lettre { margin: 0 auto clamp(34px, 4.6vh, 48px); }
body.page-correspondance:not(#cc) .cc-modifier { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 30px; margin: 0 0 clamp(28px, 3.8vh, 40px); padding: 0; list-style: none; }
body.page-correspondance:not(#cc) .cc-modifier li { margin: 0; }
body.page-correspondance:not(#cc) .cc-relecture :is(.cc-case, .cc-reserve, .cc-confidentialite) { box-sizing: border-box; max-width: 560px; margin-left: auto; margin-right: auto; text-align: left; }
body.page-correspondance:not(#cc) .cc-case { display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 14px; align-items: start; margin-bottom: clamp(24px, 3.2vh, 32px); }
body.page-correspondance:not(#cc) .cc-case input { appearance: none; -webkit-appearance: none; display: grid; place-content: center; width: 24px; height: 24px; margin: 0; border: 1px solid var(--cc-ivoire); border-radius: 0; background: transparent; cursor: pointer; }
body.page-correspondance:not(#cc) .cc-case input::before { content: ""; width: 11px; height: 6px; border-left: 1.5px solid var(--cc-nuit); border-bottom: 1.5px solid var(--cc-nuit); transform: translateY(-2px) rotate(-45deg); opacity: 0; }
body.page-correspondance:not(#cc) .cc-case input:checked { background: var(--cc-ivoire); }
body.page-correspondance:not(#cc) .cc-case input:checked::before { opacity: 1; }
body.page-correspondance:not(#cc) .cc-case input:focus-visible { outline: 2px solid var(--cc-orange); outline-offset: 3px; }
body.page-correspondance:not(#cc) .cc-case label { align-self: center; font: 400 17px/1.4 var(--tc-sans); color: var(--cc-ivoire); cursor: pointer; }
body.page-correspondance:not(#cc) .cc-case .cc-aide { grid-column: 2; margin-top: 4px; }
body.page-correspondance:not(#cc) .cc-confidentialite { margin-bottom: 0; font: 400 13.5px/1.6 var(--tc-sans); color: rgba(244, 240, 232, .7); }
body.page-correspondance:not(#cc) .cc-confidentialite a { color: var(--cc-ivoire); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .28em; }
body.page-correspondance:not(#cc) .cc-confidentialite a:focus-visible { outline: 2px solid var(--cc-orange); outline-offset: 3px; }
body.page-correspondance:not(#cc) .cc-envoi { display: flex; flex-direction: column; align-items: center; margin-top: clamp(34px, 4.6vh, 48px); }
body.page-correspondance:not(#cc) .cc-etat { min-height: 1.6em; margin: 18px auto 0; max-width: 36em; font: 400 15px/1.6 var(--tc-sans); color: var(--cc-ivoire); }
body.page-correspondance:not(#cc) .cc-etat[data-ton="erreur"]::before { content: ""; display: inline-block; width: 14px; height: 1px; margin: 0 10px .3em 0; vertical-align: middle; background: var(--cc-orange); }
body.page-correspondance:not(#cc) .cc-actions-relecture { justify-content: center; margin-top: 10px; }
body.page-correspondance:not(#cc) .cc-sans-script { margin: 18px 0 0; font: 400 14px/1.5 var(--tc-sans); color: var(--cc-ivoire); }
body.page-correspondance:not(#cc) .cc-relecture > :not(.cc-feuille-lettre) { transition: opacity .6s var(--cc-courbe); }
body.page-correspondance:not(#cc) .cc-relecture[data-scelle] > :not(.cc-feuille-lettre) { opacity: 0; }
body.page-correspondance:not(#cc) .cc-relecture[data-scelle] > .cc-feuille-lettre { visibility: hidden; }

/* ── Le geste, 1 · le silence, le pli, la cire (mise en scène du 01/10 ; pli et sceau de la piste B) ──────────── */
/* Une scène fixe au-dessus de l'en-tête (z 160 > 100) : la nuit (tout ce qui n'est pas la lettre s'éteint, les bords plus
   que le centre), la caméra (approche, envol), le souffle (attente, pression du sceau, perspective des plis), la plieuse. */
body.page-correspondance:not(#cc) .cc-pliage { position: fixed; inset: 0; z-index: 160; overflow: hidden; pointer-events: none; }
body.page-correspondance:not(#cc) .cc-pliage-nuit {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: auto;
  background: radial-gradient(ellipse 70% 64% at 50% 47%, rgba(7, 27, 21, .95) 0%, rgba(3, 14, 11, .99) 52%, #010504 86%);
}
body.page-correspondance:not(#cc) .cc-pliage-bords { position: absolute; inset: 0; opacity: 0; background: radial-gradient(ellipse 88% 82% at 50% 50%, rgba(1, 5, 4, 0) 52%, rgba(1, 5, 4, .42) 100%); }
body.page-correspondance:not(#cc) .cc-camera, body.page-correspondance:not(#cc) .cc-souffle { position: absolute; inset: 0; transform-origin: 50% 50%; }
body.page-correspondance:not(#cc) .cc-souffle { perspective: 2400px; perspective-origin: 50% 46%; }
body.page-correspondance:not(#cc) .cc-plieuse { position: absolute; left: 0; top: 0; transform-origin: 0 0; transform-style: preserve-3d; }
body.page-correspondance:not(#cc) .cc-volet { position: absolute; left: 0; width: 100%; transform-style: preserve-3d; }
body.page-correspondance:not(#cc) .cc-volet-haut { top: 0; transform-origin: 50% 100%; }
body.page-correspondance:not(#cc) .cc-volet-bas { transform-origin: 50% 0; }
body.page-correspondance:not(#cc) .cc-face { position: absolute; inset: 0; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
body.page-correspondance:not(#cc) .cc-face > .cc-feuille { position: absolute; left: 0; box-shadow: none; }
body.page-correspondance:not(#cc) .cc-verso { transform: rotateX(180deg); background: #ece5d6 url("conciergerie/papier-verge.webp") 0 0 / 640px 640px repeat; box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .12); }
body.page-correspondance:not(#cc) .cc-ombre { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
body.page-correspondance:not(#cc) .cc-recto > .cc-ombre { background: linear-gradient(to bottom, rgba(18, 14, 6, .5), rgba(18, 14, 6, .22)); }
body.page-correspondance:not(#cc) .cc-volet-haut > .cc-recto > .cc-ombre { background: linear-gradient(to top, rgba(18, 14, 6, .5), rgba(18, 14, 6, .22)); }
body.page-correspondance:not(#cc) .cc-verso > .cc-ombre { background: rgba(18, 14, 6, .4); }
/* L'ombre portée du volet balaie le pli : elle naît sur la pliure et s'étend avec l'angle du volet. */
body.page-correspondance:not(#cc) .cc-portee { position: absolute; left: 0; right: 0; height: 100%; pointer-events: none; opacity: 0; transform: scaleY(0); }
body.page-correspondance:not(#cc) .cc-portee-bas { bottom: 0; transform-origin: 50% 100%; background: linear-gradient(to top, rgba(10, 8, 3, .5), rgba(10, 8, 3, .2) 42%, rgba(10, 8, 3, 0) 100%); }
body.page-correspondance:not(#cc) .cc-portee-haut { top: 0; transform-origin: 50% 0; background: linear-gradient(to bottom, rgba(10, 8, 3, .46), rgba(10, 8, 3, .16) 42%, rgba(10, 8, 3, 0) 100%); }
body.page-correspondance:not(#cc) .cc-paquet-ombre { position: absolute; left: 0; width: 100%; pointer-events: none; box-shadow: 0 2px 3px rgba(0, 0, 0, .3), 0 28px 56px -20px rgba(0, 0, 0, .78), 0 70px 120px -40px rgba(0, 0, 0, .55); opacity: 0; transform: translateZ(-1px); }
body.page-correspondance:not(#cc) .cc-cire { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) translateZ(4px); pointer-events: none; }
/* l'ombre de la matrice s'éteint avant le bord de l'image : aucun carré sur le papier */
body.page-correspondance:not(#cc) .cc-cire,
body.page-correspondance:not(#cc) .cc-pli img { -webkit-mask-image: radial-gradient(closest-side, #000 86%, rgba(0, 0, 0, .35) 94%, transparent 100%); mask-image: radial-gradient(closest-side, #000 86%, rgba(0, 0, 0, .35) 94%, transparent 100%); }
/* Si la réponse tarde : la phrase de l'état, sous l'enveloppe (doublon visuel de la zone role="status", masqué aux lecteurs). */
body.page-correspondance:not(#cc) .cc-geste-attente { position: absolute; left: 0; right: 0; margin: 0; padding: 0 var(--cc-marge); text-align: center; font: italic 400 clamp(17px, 1.35vw, 20px)/1.4 var(--cc-italique); letter-spacing: .01em; color: rgba(244, 240, 232, .76); opacity: 0; }
/* « Passer » : discret, toujours visible et focalisable pendant le cérémonial (Échap fait de même). */
body.page-correspondance:not(#cc) .cc-passer {
  appearance: none;
  -webkit-appearance: none;
  position: fixed;
  top: clamp(14px, 2.4vh, 24px);
  right: var(--cc-marge);
  z-index: 210;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 44px;
  margin: 0;
  padding: 0 4px 0 12px;
  border: 0;
  border-radius: 0;
  background: none;
  font: 400 11px/1 var(--tc-sans);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(244, 240, 232, .74);
  cursor: pointer;
  transition: color .4s var(--cc-courbe);
}
body.page-correspondance:not(#cc) .cc-passer-filet { width: 22px; height: 1px; background: currentColor; transition: width .45s var(--cc-courbe); }
body.page-correspondance:not(#cc) .cc-passer:hover { color: var(--cc-ivoire); }
body.page-correspondance:not(#cc) .cc-passer:is(:hover, :focus-visible) .cc-passer-filet { width: 32px; }
body.page-correspondance:not(#cc) .cc-passer:focus-visible { outline: 2px solid var(--cc-orange); outline-offset: 4px; }
/* Pendant le cérémonial, l'en-tête du site et la pastille du ciel s'éteignent (sous la nuit, puis sous la pierre) ; ils
   reviennent en fondu quand la carte est posée. */
body.page-correspondance:not(#cc)[data-cc-geste] .cc-pierre .cc-suspendre { visibility: hidden; }
/* Après une erreur de champ, l'atelier change de mouvement pendant qu'il est éteint, puis paraît (aucun décalage visible). */
body.page-correspondance:not(#cc) .cc-atelier[data-retour] { opacity: 0; }
body.page-correspondance:not(#cc) .cc-atelier:not([data-retour]) { transition: opacity .6s var(--cc-courbe); }
body.page-correspondance:not(#cc)[data-cc-geste] .sg-signature { visibility: hidden !important; }
body.page-correspondance:not(#cc)[data-cc-geste] :is(.tc-header, .tc-climate) { opacity: 0 !important; visibility: hidden !important; transition: opacity .6s var(--cc-courbe), visibility 0s linear .6s !important; }
body.page-correspondance:not(#cc)[data-cc-geste-retour] :is(.tc-header, .tc-climate) { transition: opacity .9s var(--cc-lent) !important; }

/* ── Le geste, 2 · l'envol, la lumière, l'or, la pierre (voile de C, or de A) ─────────────────────────────────── */
body.page-correspondance:not(#cc) .cc-geste { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; overflow: hidden; pointer-events: none; }
body.page-correspondance:not(#cc) .cc-geste-voile {
  position: absolute;
  inset: 0;
  background: var(--cc-noir) url("conciergerie/voile-nuit-1280.webp") 50% 50% / cover no-repeat;
  /* Le voile monte en balayage doux : le masque (trois hauteurs d'écran) glisse du bas vers le haut, le tissu en tête. */
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 40%, transparent 62%, transparent 100%);
  mask-image: linear-gradient(to top, #000 0%, #000 40%, transparent 62%, transparent 100%);
  -webkit-mask-size: 100% 300%;
  mask-size: 100% 300%;
  -webkit-mask-position: 0 0%;
  mask-position: 0 0%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
body.page-correspondance:not(#cc) .cc-geste-voile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 1; }
/* La nuit s'épaissit sur le voile, par les bords. */
body.page-correspondance:not(#cc) .cc-geste-nuit { position: absolute; inset: 0; opacity: 0; background: radial-gradient(ellipse 72% 68% at 50% 50%, rgba(1, 5, 4, .12) 0%, rgba(1, 5, 4, .5) 58%, rgba(1, 4, 3, .9) 100%); }
/* La lumière dorée éclot à travers le voile : un cœur chaud et un halo, en « écran » sur le tissu. */
body.page-correspondance:not(#cc) .cc-geste-lumiere {
  position: absolute;
  inset: -25%;
  opacity: 0;
  background: radial-gradient(closest-side, rgba(255, 204, 128, .88) 0%, rgba(250, 186, 104, .6) 12%, rgba(232, 160, 80, .3) 31%, rgba(200, 128, 56, .1) 55%, rgba(200, 128, 56, 0) 78%);
  mix-blend-mode: screen;
}
body.page-correspondance:not(#cc) .cc-geste-or { position: relative; width: clamp(140px, 25vmin, 260px); aspect-ratio: 1; transform-origin: 43.35% 50%; opacity: 0; }
body.page-correspondance:not(#cc) .cc-geste-or svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
body.page-correspondance:not(#cc) .cc-geste-monogramme { filter: drop-shadow(0 0 16px rgba(255, 206, 136, .55)); }
body.page-correspondance:not(#cc) .cc-or-traits path { stroke-dasharray: 1; stroke-dashoffset: 1; }
/* le reflet : un trait court et clair qui suit la plume */
body.page-correspondance:not(#cc) .cc-or-reflets path { stroke-dasharray: .08 2; stroke-dashoffset: .08; opacity: 0; }
/* le dernier miroitement : une copie claire du monogramme, découverte par une bande qui passe */
body.page-correspondance:not(#cc) .cc-geste-miroir {
  position: absolute;
  inset: 0;
  -webkit-mask-image: linear-gradient(105deg, transparent 0 41%, #000 50%, transparent 59% 100%);
  mask-image: linear-gradient(105deg, transparent 0 41%, #000 50%, transparent 59% 100%);
  -webkit-mask-size: 300% 100%;
  mask-size: 300% 100%;
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* ── La confirmation : sur la pierre, la lettre scellée et la carte de remerciement ─────────────────────────── */
body.page-correspondance:not(#cc) .cc-confirmation {
  display: grid;
  align-items: center;
  min-height: calc(100svh - var(--cc-entete));
  padding: clamp(40px, 6vh, 72px) var(--cc-marge) clamp(72px, 10vh, 112px);
  box-sizing: border-box;
  scroll-margin-top: var(--cc-entete);
}
body.page-correspondance:not(#cc) .cc-nature { position: relative; width: min(760px, 46vw); padding-top: 64px; }
body.page-correspondance:not(#cc) .cc-pli {
  --angle: -2.6;
  position: absolute;
  left: 0;
  top: 0;
  width: 48%;
  aspect-ratio: 2.0496;
  background: #ece5d6 url("conciergerie/papier-verge.webp") 0 0 / 640px 640px repeat;
  box-shadow: 0 0 0 .5px rgba(0, 0, 0, .25), 0 2px 3px rgba(0, 0, 0, .3), 0 26px 50px -20px rgba(0, 0, 0, .8);
  transform: rotate(calc(var(--angle) * 1deg));
}
body.page-correspondance:not(#cc) .cc-pli::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, .05), rgba(0, 0, 0, 0) 9%, rgba(0, 0, 0, 0) 91%, rgba(0, 0, 0, .06)); }
body.page-correspondance:not(#cc) .cc-pli::after { content: ""; position: absolute; left: 0; right: 0; top: 94.2%; bottom: 0; border-top: 1px solid rgba(70, 52, 22, .16); background: linear-gradient(to bottom, rgba(20, 14, 4, .1), rgba(20, 14, 4, .03)); }
body.page-correspondance:not(#cc) .cc-pli img { position: absolute; left: 50%; top: 50%; width: 34%; height: auto; transform: translate(-50%, -50%); }
body.page-correspondance:not(#cc) .cc-carte-merci {
  position: relative;
  z-index: 1;
  isolation: isolate;
  width: 59%;
  margin-left: 35%;
  box-sizing: border-box;
  padding: clamp(32px, 4vh, 48px) clamp(26px, 2.6vw, 40px) clamp(28px, 3.4vh, 38px);
  color: var(--cc-encre);
  color-scheme: light;
  background: #f3eee4 url("conciergerie/papier-velin.webp") 0 0 / 640px 640px repeat;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45), 0 0 0 .5px rgba(0, 0, 0, .3), 0 2px 2px rgba(0, 0, 0, .22), 0 30px 56px -22px rgba(0, 0, 0, .85);
  transform: rotate(.8deg);
}
body.page-correspondance:not(#cc) .cc-carte-merci .cc-papier { display: none; }
body.page-correspondance:not(#cc) .cc-carte-merci::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(6, 62, 50, .45); pointer-events: none; }
body.page-correspondance:not(#cc) .cc-carte-merci .cc-monogramme { width: 34px; height: 34px; margin: 0 0 22px; }
body.page-correspondance:not(#cc) .cc-merci { margin: 0 0 12px; font: italic 500 clamp(30px, 2.5vw, 38px)/1.1 var(--cc-italique); color: var(--cc-encre); outline: 0; }
body.page-correspondance:not(#cc) .cc-merci-texte { margin: 0 0 14px; font: italic 400 clamp(18.5px, 1.36vw, 20.5px)/1.48 var(--cc-italique); color: var(--cc-encre); }
body.page-correspondance:not(#cc) .cc-merci-precision { margin: 0 0 20px; font: 400 14px/1.55 var(--tc-sans); color: rgba(10, 38, 30, .82); }
body.page-correspondance:not(#cc) .cc-reference { display: block; margin: 0 0 20px; padding: 14px 0; border-top: 1px solid rgba(6, 62, 50, .2); border-bottom: 1px solid rgba(6, 62, 50, .2); }
body.page-correspondance:not(#cc) .cc-reference-ligne { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 0 0 8px; }
body.page-correspondance:not(#cc) .cc-reference-libelle { font: 400 10.5px/1.4 var(--tc-sans); letter-spacing: .26em; text-transform: uppercase; color: rgba(10, 38, 30, .72); }
body.page-correspondance:not(#cc) .cc-reference-code { font: 400 19px/1.2 var(--cc-titre); letter-spacing: .2em; color: var(--cc-vert); font-variant-numeric: lining-nums tabular-nums; }
body.page-correspondance:not(#cc) .cc-reference-aide { margin: 0; font: italic 400 17px/1.45 var(--cc-italique); color: rgba(10, 38, 30, .8); }
body.page-correspondance:not(#cc) .cc-merci-signature { margin: 0 0 18px; text-align: right; font: italic 500 19px/1.3 var(--cc-italique); color: var(--cc-vert); }
body.page-correspondance:not(#cc) .cc-merci-liens { display: flex; flex-wrap: wrap; gap: 0 26px; margin: 0; padding: 0; list-style: none; }
body.page-correspondance:not(#cc) .cc-merci-liens li { margin: 0; }
body.page-correspondance:not(#cc) .cc-carte-merci .cc-lien { color: var(--cc-encre); text-decoration-color: rgba(10, 38, 30, .4); font-size: 11px; }
body.page-correspondance:not(#cc) .cc-carte-merci .cc-lien:hover { text-decoration-color: var(--cc-encre); }
/* L'arrivée est jouée par le module (le geste, temps 8) : l'enveloppe et la carte attendent leur temps sous [data-pose]. */
body.page-correspondance:not(#cc) .cc-confirmation[data-pose] :is(.cc-pli, .cc-carte-merci) { opacity: 0; }
/* La référence vient en dernier, avec un miroitement d'or très discret (le temps du passage seulement). */
body.page-correspondance:not(#cc) .cc-reference-code[data-miroite] {
  background: linear-gradient(100deg, var(--cc-vert) 0 41%, #a07d40 46%, #e9d197 50%, #a07d40 54%, var(--cc-vert) 59% 100%) 100% 0 / 300% 100% no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ── Tablettes ─────────────────────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  body.page-correspondance:not(#cc) .cc-atelier { grid-template-columns: minmax(0, 460px) minmax(0, 520px); column-gap: 48px; }
  body.page-correspondance:not(#cc) .cc-pli { width: 44%; }
  body.page-correspondance:not(#cc) .cc-carte-merci { width: 66%; margin-left: 30%; }
}
@media (max-width: 1023px) {
  body.page-correspondance:not(#cc) .cc-atelier { display: flex; flex-direction: column; max-width: 680px; margin: 0 auto; }
  body.page-correspondance:not(#cc) .cc-ecritoire { display: contents; }
  body.page-correspondance:not(#cc) .cc-progression { order: 1; }
  body.page-correspondance:not(#cc) .cc-attention-choisie { order: 2; }
  body.page-correspondance:not(#cc) .cc-table { order: 3; position: relative; top: auto; margin: 0 0 clamp(32px, 4vh, 44px); }
  body.page-correspondance:not(#cc) .cc-mouvement, body.page-correspondance:not(#cc) .cc-ecritoire > noscript { order: 4; }
  body.page-correspondance:not(#cc) .cc-feuille-lettre { min-height: 0; max-height: 300px; --fy: 200px; }
  body.page-correspondance:not(#cc) .cc-feuille-relue { max-height: none; --fy: 330px; }
  body.page-correspondance:not(#cc) .cc-atelier[data-entree] .cc-ecritoire { animation: none; }
}
/* Écrans plus hauts que larges : les plans portrait ; la pierre est cadrée sur son monogramme (haut du plan). */
@media (max-aspect-ratio: 1/1) {
  body.page-correspondance:not(#cc) .cc-voile-ouverture, body.page-correspondance:not(#cc) .cc-geste-voile { background-image: url("conciergerie/voile-nuit-portrait.webp"); }
  body.page-correspondance:not(#cc) .cc-plan-pierre[data-charge] { background-image: url("conciergerie/pierre-portrait.webp"); background-position: 50% 0; }
  body.page-correspondance:not(#cc) .cc-plan-pierre video { object-position: 50% 0; }
  body.page-correspondance:not(#cc) .cc-voile-ombre {
    background:
      linear-gradient(0deg, rgba(1, 8, 6, .92) 0%, rgba(1, 8, 6, .76) 36%, rgba(1, 8, 6, .12) 66%, rgba(1, 8, 6, 0) 80%),
      linear-gradient(180deg, rgba(1, 8, 6, .6) 0%, rgba(1, 8, 6, 0) 18%);
  }
  /* La carte gravée sous le monogramme ; la confirmation aussi. */
  /* --cc-sous-gravure : bas du monogramme gravé à l'écran (posé par le module selon le cadrage réel de la pierre). */
  body.page-correspondance:not(#cc) .cc-pierre { align-items: start; padding-top: var(--cc-sous-gravure, calc(var(--cc-scene-h) * .43)); }
  body.page-correspondance:not(#cc) .cc-gravure { width: min(100%, 600px); }
  body.page-correspondance:not(#cc) .cc-gravure::before { inset: -6% -14% -4% -14%; background: linear-gradient(180deg, rgba(2, 9, 7, 0) 0%, rgba(2, 9, 7, .74) 9%, rgba(2, 9, 7, .78) 90%, rgba(2, 9, 7, 0) 100%); }
  body.page-correspondance:not(#cc) .cc-confirmation { align-items: start; padding-top: var(--cc-sous-gravure, calc(var(--cc-scene-h) * .43)); }
  body.page-correspondance:not(#cc) .cc-nature { width: min(100%, 560px); margin: 0 auto; padding-top: 52px; }
}

/* ── Téléphones ────────────────────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 700px) {
  body.page-correspondance:not(#cc) { --cc-entete: 65px; }
  body.page-correspondance:not(#cc) .cc-seuil-corps { gap: 28px; padding-top: 22px; padding-bottom: 22px; }
  body.page-correspondance:not(#cc) .cc-titre { font-size: clamp(40px, 11.4vw, 60px); line-height: .94; }
  body.page-correspondance:not(#cc) .cc-titre-ligne-2 { padding-left: .34em; }
  body.page-correspondance:not(#cc) .cc-surtitre { font-size: 10.5px; letter-spacing: .2em; }
  body.page-correspondance:not(#cc) .cc-surtitre::before { width: 24px; margin-right: 12px; }
  body.page-correspondance:not(#cc) .cc-accueil { margin-top: 24px; font-size: 16.5px; }
  body.page-correspondance:not(#cc) .cc-devise { font-size: 21px; }
  body.page-correspondance:not(#cc) .cc-suspendre { justify-content: center; width: 44px; padding: 0; }
  body.page-correspondance:not(#cc) .cc-suspendre-texte { display: none; }
  body.page-correspondance:not(#cc) .cc-enseigne { width: 42px; margin-bottom: 20px; }
  body.page-correspondance:not(#cc) .cc-pierre { padding-bottom: 96px; }
  body.page-correspondance:not(#cc) .cc-pierre-titre { font-size: clamp(31px, 8.4vw, 38px); }
  body.page-correspondance:not(#cc) .cc-attention { grid-template-columns: 2.6em minmax(0, 1fr); min-height: 72px; }
  body.page-correspondance:not(#cc) .cc-att-geste { display: none; }
  body.page-correspondance:not(#cc) .cc-att-titre { font-size: 12.5px; letter-spacing: .18em; }
  body.page-correspondance:not(#cc) .cc-att-phrase { font-size: 18px; }
  body.page-correspondance:not(#cc) .cc-suspendre-pierre { right: var(--cc-marge); bottom: 24px; }
  body.page-correspondance:not(#cc) .cc-atelier { padding: 28px var(--cc-marge) 72px; }
  body.page-correspondance:not(#cc) .cc-progression { gap: 6px 16px; font-size: 10px; letter-spacing: .16em; margin-bottom: 22px; }
  body.page-correspondance:not(#cc) .cc-table { margin-left: calc(-1 * var(--cc-marge)); margin-right: calc(-1 * var(--cc-marge)); }
  body.page-correspondance:not(#cc) .cc-feuille-lettre { max-height: 236px; padding: 22px 22px 20px; --lr: 240px; --fy: 170px; --fw: 74%; }
  body.page-correspondance:not(#cc) .cc-feuille-relue { --fy: 260px; }
  body.page-correspondance:not(#cc) .cc-feuille-lettre .cc-entete { margin-bottom: 16px; }
  body.page-correspondance:not(#cc) .cc-feuille-lettre .cc-monogramme { width: 30px; height: 30px; }
  body.page-correspondance:not(#cc) .cc-entete-nom { margin-top: 10px; font-size: 9px; }
  body.page-correspondance:not(#cc) .cc-entete-service { margin-top: 9px; padding-top: 9px; font-size: 14px; }
  body.page-correspondance:not(#cc) .cc-ecrit { font-size: 16.5px; line-height: 1.5; }
  body.page-correspondance:not(#cc) :is(.cc-l-destinataire, .cc-l-date) { margin-left: 40% !important; }
  body.page-correspondance:not(#cc) .cc-mouvement-titre { font-size: 31px; }
  body.page-correspondance:not(#cc) .cc-grille { grid-template-columns: minmax(0, 1fr); }
  body.page-correspondance:not(#cc) .cc-puce span { padding: 9px 14px; font-size: 14px; }
  body.page-correspondance:not(#cc) .cc-actions { flex-direction: column-reverse; align-items: stretch; }
  body.page-correspondance:not(#cc) :is(.cc-suite, .cc-sceller) { width: 100%; }
  body.page-correspondance:not(#cc) .cc-sceller { gap: 14px; padding: 0 18px 0 22px; font-size: 11.5px; letter-spacing: .14em; }
  body.page-correspondance:not(#cc) .cc-retour { justify-content: center; }
  body.page-correspondance:not(#cc) .cc-relecture .cc-feuille-lettre { margin-left: calc(-1 * var(--cc-marge)); margin-right: calc(-1 * var(--cc-marge)); width: auto; max-height: none; padding: 28px 22px 30px; }
  body.page-correspondance:not(#cc) .cc-relecture .cc-ecrit { font-size: 17.5px; }
  body.page-correspondance:not(#cc) .cc-confirmation { padding-bottom: 72px; }
  body.page-correspondance:not(#cc) .cc-passer { top: 10px; right: 10px; }
  body.page-correspondance:not(#cc) .cc-pli { width: 66%; }
  body.page-correspondance:not(#cc) .cc-carte-merci { width: 100%; margin-left: 0; margin-top: 64px; }
}

/* ── Préférences ───────────────────────────────────────────────────────────────────────────────────────────── */
/* Mouvement réduit : aucune scène animée ni vidéo ; chaque acte porte l'affiche fixe de sa matière ; états finaux. */
@media (prefers-reduced-motion: reduce) {
  body.page-correspondance:not(#cc) *, body.page-correspondance:not(#cc) *::before, body.page-correspondance:not(#cc) *::after { animation: none !important; transition: none !important; }
  body.page-correspondance:not(#cc) .cc-scene, body.page-correspondance:not(#cc) .cc-geste, body.page-correspondance:not(#cc) .cc-pliage, body.page-correspondance:not(#cc) .cc-passer { display: none !important; }
  body.page-correspondance:not(#cc) .cc-seuil { background: var(--cc-noir) url("conciergerie/voile-nuit-1280.webp") 50% 50% / cover no-repeat; }
  body.page-correspondance:not(#cc) .cc-seuil::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(1, 8, 6, .9) 0%, rgba(1, 8, 6, .72) 30%, rgba(1, 8, 6, .2) 58%, rgba(1, 8, 6, 0) 78%), linear-gradient(0deg, rgba(1, 8, 6, .78) 0%, rgba(1, 8, 6, 0) 42%); }
  body.page-correspondance:not(#cc) .cc-seuil-corps { position: relative; }
  body.page-correspondance:not(#cc) :is(.cc-pierre, .cc-confirmation) { background: #040b09 url("conciergerie/pierre-paysage.webp") 50% 50% / cover no-repeat; }
  body.page-correspondance:not(#cc) .cc-atelier { background: radial-gradient(ellipse 70% 55% at 72% 18%, rgba(9, 70, 55, .55), transparent 72%), linear-gradient(180deg, #08241d 0%, var(--cc-nuit) 60%); }
  body.page-correspondance:not(#cc) .cc-entree, body.page-correspondance:not(#cc) .cc-titre-ligne { opacity: 1 !important; transform: none !important; filter: none !important; }
  body.page-correspondance:not(#cc) .cc-enseigne path { stroke-dashoffset: 0 !important; }
  body.page-correspondance:not(#cc) .cc-ecrit { scroll-behavior: auto; }
}
@media (prefers-reduced-motion: reduce) and (max-aspect-ratio: 1/1) {
  body.page-correspondance:not(#cc) .cc-seuil { background-image: url("conciergerie/voile-nuit-portrait.webp"); }
  body.page-correspondance:not(#cc) :is(.cc-pierre, .cc-confirmation) { background-image: url("conciergerie/pierre-portrait.webp"); background-size: 100% auto; background-position: 50% 0; background-color: #040b09; }
}
@media (prefers-contrast: more) {
  body.page-correspondance:not(#cc) { --cc-filet: rgba(244, 240, 232, .85); --cc-filet-doux: rgba(244, 240, 232, .45); --cc-texte-doux: var(--cc-ivoire); }
  body.page-correspondance:not(#cc) :is(.cc-aide, .cc-facultatif, .cc-reserve, .cc-confidentialite, .cc-progression, .cc-avant-liste li, .cc-att-phrase) { color: var(--cc-ivoire); }
  body.page-correspondance:not(#cc) .cc-jour { display: none; }
  body.page-correspondance:not(#cc) .cc-gravure::before { background: rgba(2, 9, 7, .9); }
}
@media (forced-colors: active) {
  body.page-correspondance:not(#cc) .cc-scene, body.page-correspondance:not(#cc) .cc-geste { display: none; }
  body.page-correspondance:not(#cc) .cc-saisie { border-bottom: 1px solid CanvasText; }
  body.page-correspondance:not(#cc) .cc-reference-code[data-miroite] { background: none; -webkit-text-fill-color: currentColor; color: CanvasText; }
  body.page-correspondance:not(#cc) .cc-puce input:checked + span { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; }
  body.page-correspondance:not(#cc) .cc-case input:checked { forced-color-adjust: none; background: Highlight; border-color: Highlight; }
  body.page-correspondance:not(#cc) :is(.cc-suite, .cc-sceller, .cc-attention, .cc-suspendre, .cc-passer) { border: 1px solid ButtonText; }
  body.page-correspondance:not(#cc) .cc-num { color: CanvasText; background: none; }
  body.page-correspondance:not(#cc) .cc-papier { display: none; }
}
@media print {
  body.page-correspondance:not(#cc) .cc-scene, body.page-correspondance:not(#cc) .cc-geste, body.page-correspondance:not(#cc) .cc-suspendre { display: none; }
  body.page-correspondance:not(#cc) .cc-page { background: none; color: #000; }
  body.page-correspondance:not(#cc) .cc-feuille { box-shadow: none; }
}