/* ==========================================================================
   JustiComm · accueil v4 · section 7 « Un audit offert pour savoir où agir en premier » · v5 (Octave, 14/10/2026, à valider par Raoudha)
   Demande de Raoudha : toute la section sur le vert habituel ; le document « JustiComm · Audit de visibilité » inchangé ;
   « Exemple illustratif de constat » refait en vrai bloc moitié-moitié.
   - Fond : pétrole (#0A393A, comme « Comment apparaître dans ces recherches ? » et l’appel final), une lumière or très douce
     derrière le rapport. Titres et chapô en crème (10,5:1), texte courant en crème 88 % (8,5:1), puces en cuivre clair (4,5:1).
   - Le rapport (.rapport, balisage et règles de css/accueil-v4.css) : rien ne change, sauf son ombre, plus sombre sur le vert ;
     au téléphone seulement (sous 40em), la page se resserre un peu et les deux feuilles de dessous se décalent moins,
     pour ne plus être coupées par le bord de l’écran.
   - L’exemple : deux moitiés jointes. « Constat » sur papier (encre 14,3:1), « Priorité » sur pétrole 900, plus sombre que
     la section (1,45:1) et tenue par un double filet or (filet extérieur 3,8:1 sur le vert de la section, filet intérieur fin),
     couronnée d’un filet or plein (crème 15,3:1, or 10,3:1). Au raccord, une pastille cuivre avec une flèche, à cheval sur la
     séparation (tournée vers le bas quand les moitiés s’empilent, sous 56em ; entre 40 et 56em, texte à gauche et dessin à
     droite dans chaque moitié). Sous chaque texte, un petit dessin au trait, décoratif (aria-hidden) : une seule page où tout
     s’empile, une loupe qui cherche ; puis une carte par service, celle qu’on cherche en avant.
     « Constat » et « Priorité » sont lus par les lecteurs d’écran (WCAG 1.3.1) ; leur point et leur filet sont des pseudo-éléments.
   - L’étiquette « Exemple illustratif de constat » (signal de conformité : ce n’est pas un vrai client) : centrée au-dessus du bloc,
     cadre en pointillés or, capitales 15 px en or clair (9,2:1), un filet de chaque côté.
   - Bouton : .btn-plaque .btn--grand, version pour fond sombre (pas de .sur-clair : plaque or, texte pétrole 7,1:1).
   Tailles (comme accueil-v4.css) : corps 17 px au téléphone, 18 px dès 640 px ; h2 .titre-section 30 → 44 px ;
   « Constat » et « Priorité » 22 → 26 px ; phrase de priorité 26 → 34 px ; étiquette 15 px.
   Mouvement : l’état final est l’état par défaut. Sous html.anime-v4 seulement (posée par js/accueil-v4.js si le mouvement
   est permis), une seule lecture quand js/theme.js pose .est-visible sur l’exemple : le filet or se trace, la pastille se pose,
   la flèche glisse, la loupe passe sur la page, la bonne carte se lève. Rien en boucle ; rien sous prefers-reduced-motion.
   Préfixe : audit5. Dépend de css/theme.css, css/boutons.css et css/accueil-v4.css (.titre-section, .chapo, .rapport).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. La section sur le vert
   -------------------------------------------------------------------------- */
.audit5 {
  --audit5-texte: rgba(238, 234, 225, 0.88);                 /* 8,5:1 sur pétrole */
  --audit5-filet: rgba(224, 189, 142, 0.24);
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(44rem 32rem at 84% 22%, rgba(224, 189, 142, 0.075), rgba(224, 189, 142, 0) 70%),
    var(--petrole);
}

.audit5__grille { display: grid; gap: clamp(56px, 6vw, 96px); align-items: center; }
@media (min-width: 64em) { .audit5__grille { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } }

.audit5__texte { max-width: var(--mesure); }
.audit5__texte .titre-section { margin-bottom: 1.6rem; }
.audit5__texte .chapo { margin-bottom: 1.2em; color: var(--creme); }
.audit5__texte > p:not(.chapo) { color: var(--audit5-texte); }

.audit5__liste { display: grid; gap: 0.8rem; margin-top: 1.1rem; color: var(--audit5-texte); }
.audit5__liste li { position: relative; padding-left: 1.75rem; }
/* puce : un petit losange cuivre clair, la lumière en haut à gauche (même famille que les points de la page) */
.audit5__liste li::before {
  content: "";
  position: absolute;
  left: 0.2rem;
  top: 0.62em;
  width: 7px;
  height: 7px;
  rotate: 45deg;
  background: radial-gradient(circle at 35% 35%, #F6D3BA, var(--cuivre-clair) 55%, var(--cuivre));
  box-shadow: 0 0 0 3px rgba(208, 138, 94, 0.14);
}

/* Le rapport : inchangé. Seule son ombre change : sur le vert, l’ombre « encre » de la page claire ne se voyait plus. */
.audit5 .rapport__feuille {
  box-shadow: 0 2.75rem 4rem -2.25rem rgba(0, 0, 0, 0.55), 0 0.5rem 1.25rem -0.75rem rgba(0, 0, 0, 0.3);
}
/* Au téléphone seulement : les deux feuilles de dessous débordaient du bord droit (coupées, très visibles sur le vert).
   La page garde son dessin ; elle se resserre un peu et les feuilles se décalent moins, pour tenir dans l’écran. */
@media (max-width: 39.99em) {
  .audit5 .rapport { max-width: calc(100% - 2.5rem); }
  .audit5 .rapport__feuille--fond2 { rotate: 3.5deg; translate: 10px 8px; }
  .audit5 .rapport__feuille--fond1 { rotate: -2deg; translate: -7px 5px; }
}

/* --------------------------------------------------------------------------
   2. L’exemple : l’étiquette, puis les deux moitiés
   -------------------------------------------------------------------------- */
.audit5-ex {
  --audit5-ex-pad: clamp(28px, 4.4vw, 64px);
  --audit5-ex-pastille: 52px;
  margin-top: clamp(72px, 7.5vw, 120px);
}
@media (min-width: 56em) { .audit5-ex { --audit5-ex-pastille: 60px; } }

/* L’étiquette, centrée, un filet de chaque côté : elle coiffe le bloc, on ne peut pas la manquer */
.audit5-ex__etiquette {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 28px);
  margin: 0 0 clamp(28px, 3vw, 40px);
}
.audit5-ex__etiquette::before,
.audit5-ex__etiquette::after {
  content: "";
  flex: 1 1 0;
  min-width: 1.25rem;
  height: 1px;
  background: linear-gradient(90deg, rgba(224, 189, 142, 0), rgba(224, 189, 142, 0.42));
}
.audit5-ex__etiquette::after { background: linear-gradient(90deg, rgba(224, 189, 142, 0.42), rgba(224, 189, 142, 0)); }
.audit5-ex__etiquette span {
  flex: 0 1 auto;
  display: inline-block;
  padding: 0.55rem 1.1rem 0.6rem;
  border: 1px dashed rgba(224, 189, 142, 0.62);
  border-radius: var(--rayon);
  font: 500 0.9375rem / 1.4 var(--f-texte);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  text-wrap: balance;                                         /* au téléphone : « Exemple illustratif / de constat » */
  color: var(--or-clair);                                     /* 9,2:1 sur pétrole */
}
/* au téléphone, l’étiquette passe sur deux lignes : plus de filets de côté (ils ne seraient que des bouts) */
@media (max-width: 29.99em) {
  .audit5-ex__etiquette { justify-content: center; }
  .audit5-ex__etiquette::before,
  .audit5-ex__etiquette::after { display: none; }
}
.audit5-ex__etiquette span::before {               /* le point suit le premier mot, même sur deux lignes */
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 0.75rem;
  vertical-align: 0.2em;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #F6D3BA, var(--cuivre-clair) 55%, var(--cuivre));
}

/* Les deux moitiés, jointes. La troisième piste (ou rangée) mesure 0 : la pastille y est posée, à cheval. */
.audit5-ex__duo {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 0 auto;
  border-radius: 4px;
  box-shadow: 0 3rem 5rem -3.25rem rgba(0, 0, 0, 0.7), 0 1rem 2rem -1.5rem rgba(0, 0, 0, 0.35);
}
@media (min-width: 56em) {
  .audit5-ex__duo { grid-template-columns: minmax(0, 1fr) 0 minmax(0, 1fr); grid-template-rows: auto; }
}

.audit5-ex__moitie {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--audit5-ex-pad);
}
/* Constat : la page claire */
.audit5-ex__moitie--constat {
  border-radius: 4px 4px 0 0;
  background: linear-gradient(165deg, #FBF8F2 0%, var(--papier) 45%, var(--creme) 100%);
  color: var(--encre);
  padding-bottom: calc(var(--audit5-ex-pad) + var(--audit5-ex-pastille) * 0.35);
}
/* Priorité : le pétrole le plus profond (900), plus sombre que la section (1,45:1), et surtout tenu par un double filet or,
   comme le cartouche de la charte : filet extérieur 3,8:1 sur le vert de la section, filet intérieur fin à 8 px.
   Un filet or plein de 2 px le couronne (7,1:1), la lumière vient du raccord. */
.audit5-ex__moitie--priorite {
  border-radius: 0 0 4px 4px;
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(224, 189, 142, 0.12), rgba(224, 189, 142, 0) 70%),
    var(--petrole-900);
  box-shadow: inset 0 0 0 1px rgba(224, 189, 142, 0.7);
  color: var(--creme);
  padding-top: calc(var(--audit5-ex-pad) + var(--audit5-ex-pastille) * 0.35);
}
.audit5-ex__moitie--priorite::after {                /* le filet intérieur du double filet */
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(224, 189, 142, 0.16);
  border-radius: 2px;
  pointer-events: none;
}
.audit5-ex__moitie--priorite::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  background: linear-gradient(90deg, var(--or-400), var(--or-clair) 50%, var(--or-400));
  transform-origin: left;
}
@media (min-width: 56em) {
  .audit5-ex__moitie--constat { border-radius: 4px 0 0 4px; padding-bottom: var(--audit5-ex-pad); padding-right: calc(var(--audit5-ex-pad) + var(--audit5-ex-pastille) * 0.35); }
  .audit5-ex__moitie--priorite { border-radius: 0 4px 4px 0; padding-top: var(--audit5-ex-pad); padding-left: calc(var(--audit5-ex-pad) + var(--audit5-ex-pastille) * 0.35);
    background:
      radial-gradient(70% 80% at 0% 50%, rgba(224, 189, 142, 0.12), rgba(224, 189, 142, 0) 70%),
      var(--petrole-900); }
  .audit5-ex__moitie--priorite::before { inset: 0 0 auto; }
}
/* au téléphone, le filet or ferme le bloc en bas ; sur ordinateur, il le couronne en haut, à droite */

/* « Constat », « Priorité » : un point cuivre, le mot en italique, un filet qui court jusqu’au bord */
.audit5-ex__marque {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: clamp(14px, 1.4vw, 20px);
  font: italic 500 clamp(1.375rem, 1.25rem + 0.4vw, 1.625rem) / 1.2 var(--f-titre);
}
.audit5-ex__marque::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
}
.audit5-ex__marque::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
}
.audit5-ex__moitie--constat .audit5-ex__marque { color: var(--petrole); }                       /* 10,5:1 sur crème */
.audit5-ex__moitie--constat .audit5-ex__marque::before {
  background: radial-gradient(circle at 35% 35%, #F3C7A6, var(--cuivre) 55%, var(--cuivre-fonce));
  box-shadow: 0 0 0 4px rgba(176, 99, 57, 0.12);
}
.audit5-ex__moitie--constat .audit5-ex__marque::after { background: linear-gradient(90deg, rgba(156, 121, 82, 0.45), rgba(156, 121, 82, 0.08)); }
.audit5-ex__moitie--priorite .audit5-ex__marque { color: var(--or); }                         /* 8,6:1 sur pétrole profond */
.audit5-ex__moitie--priorite .audit5-ex__marque::before {
  background: radial-gradient(circle at 35% 35%, #F6D3BA, var(--cuivre-clair) 55%, var(--cuivre));
  box-shadow: 0 0 0 4px rgba(208, 138, 94, 0.14), 0 0 14px 1px rgba(208, 138, 94, 0.35);
}
.audit5-ex__moitie--priorite .audit5-ex__marque::after { background: linear-gradient(90deg, rgba(224, 189, 142, 0.4), rgba(224, 189, 142, 0.06)); }

.audit5-ex__texte { max-width: 31rem; margin-bottom: clamp(28px, 3vw, 44px); }
.audit5-ex__moitie--constat .audit5-ex__texte { font-size: var(--t-corps); line-height: 1.6; color: var(--encre); }   /* 14,3:1 */
.audit5-ex__moitie--priorite .audit5-ex__texte {
  max-width: 17em;
  font: 500 clamp(1.625rem, 1.3rem + 1vw, 2.125rem) / 1.2 var(--f-titre);
  letter-spacing: -0.005em;
  color: var(--creme);                                                                         /* 12,7:1 */
  text-wrap: balance;
}

/* La pastille du raccord : cuivre, flèche crème, un anneau or fin autour */
.audit5-ex__raccord {
  position: relative;
  z-index: 2;
  width: 0;
  height: 0;
  justify-self: center;
  align-self: center;
}
.audit5-ex__pastille {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: var(--audit5-ex-pastille);
  height: var(--audit5-ex-pastille);
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #E7A27A, var(--cuivre) 58%, var(--cuivre-fonce));
  box-shadow:
    0 0 0 5px rgba(176, 99, 57, 0.16),
    0 14px 26px -10px rgba(2, 24, 24, 0.75),
    inset 0 1px 0 rgba(255, 236, 220, 0.35);
}
.audit5-ex__pastille::before {                    /* anneau or, 8 px au-delà : il dessine la pastille sur les deux fonds */
  content: "";
  position: absolute;
  inset: -8px;
  border: 1px solid rgba(224, 189, 142, 0.7);
  border-radius: 50%;
}
.audit5-ex__pastille svg {
  --audit5-fleche-x: 0px;
  --audit5-fleche-y: 0px;
  width: 44%;
  height: 44%;
  fill: none;
  stroke: #FFF8F2;                                /* 4,3:1 sur le cuivre */
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  rotate: 90deg;                                  /* moitiés empilées : la flèche descend */
}
@media (min-width: 56em) { .audit5-ex__pastille svg { rotate: none; } }

/* --------------------------------------------------------------------------
   3. Les deux dessins au trait (décoratifs, aria-hidden) : tout en em, l’em suit la taille de la moitié
   -------------------------------------------------------------------------- */
.audit5-ex__scene {
  position: relative;
  display: block;
  width: 17em;
  max-width: 100%;
  height: 8.6em;
  margin-top: auto;                               /* les deux dessins s’alignent en bas des moitiés */
  font-size: 0.875rem;                            /* 14 px au téléphone */
  line-height: 0;
  pointer-events: none;
  user-select: none;
}
@media (min-width: 40em) { .audit5-ex__scene { font-size: 1rem; } }
@media (min-width: 64em) { .audit5-ex__scene { font-size: 1.125rem; } }         /* 18 px : le dessin occupe mieux sa moitié */
.audit5-ex__scene i,
.audit5-ex__scene b,
.audit5-ex__scene em { display: block; font-style: normal; }

/* Constat : une seule longue page, quatre blocs identiques empilés (le bas s’efface : la page continue), une loupe qui cherche */
.audit5-ex__page {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  align-content: start;
  gap: 0.62em;
  width: 13.2em;
  height: 100%;
  padding: 0.85em 0.95em 0;
  overflow: hidden;
  border: 1px solid #E2DACB;
  border-bottom: 0;
  border-radius: 0.35em 0.35em 0 0;
  background: #FFFDF9;
  box-shadow: 0 1.2em 1.8em -1.2em rgba(23, 36, 37, 0.28);
  -webkit-mask-image: linear-gradient(180deg, #000 58%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 58%, transparent 100%);
}
.audit5-ex__page-tete {
  height: 0.5em;
  margin-bottom: 0.15em;
  border-bottom: 1px solid #EEE7DA;
  box-sizing: content-box;
  padding-bottom: 0.45em;
  background: linear-gradient(90deg, var(--petrole) 0 2.4em, transparent 2.4em) 0 0 / 100% 0.5em no-repeat;
}
.audit5-ex__bloc { display: grid; gap: 0.28em; }
.audit5-ex__bloc b { width: 46%; height: 0.36em; border-radius: 0.2em; background: #CFC4B0; }
.audit5-ex__bloc i { width: 100%; height: 0.26em; border-radius: 0.2em; background: #E9E2D6; }
.audit5-ex__bloc i + i { width: 74%; }
.audit5-ex__loupe {
  position: absolute;
  left: 8.9em;
  top: 1.7em;
  width: 4.4em;
  height: 4.4em;
  overflow: visible;
  fill: none;
  stroke: var(--cuivre);
  stroke-width: 2.4;
  stroke-linecap: round;
  filter: drop-shadow(0 0.35em 0.5em rgba(23, 36, 37, 0.18));
}
.audit5-ex__loupe circle { fill: rgba(255, 253, 249, 0.55); }
.audit5-ex__loupe .audit5-ex__loupe-reflet { stroke: rgba(176, 99, 57, 0.4); stroke-width: 1.6; }

/* Priorité : une carte par service ; celle qu’on cherche se lève, filet or et point cuivre */
.audit5-ex__scene--priorite {
  display: grid;
  grid-template-columns: repeat(3, 4.9em);
  align-items: end;
  gap: 0.75em;
}
.audit5-ex__carte {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.34em;
  height: 6.8em;
  padding: 0.8em 0.75em;
  border: 1px solid rgba(224, 189, 142, 0.3);
  border-radius: 0.35em;
  background: rgba(238, 234, 225, 0.035);
}
.audit5-ex__carte b { width: 72%; height: 0.38em; margin-bottom: 0.3em; border-radius: 0.2em; background: rgba(224, 189, 142, 0.55); }
.audit5-ex__carte i { width: 100%; height: 0.24em; border-radius: 0.2em; background: rgba(238, 234, 225, 0.2); }
.audit5-ex__carte i + i { width: 66%; }
.audit5-ex__carte--choisie {
  translate: 0 -0.9em;
  border-color: var(--or);
  background: linear-gradient(180deg, rgba(224, 189, 142, 0.16), rgba(224, 189, 142, 0.05));
  box-shadow: 0 1.1em 1.4em -1em rgba(0, 0, 0, 0.6);
}
.audit5-ex__carte--choisie b { background: var(--or); }
.audit5-ex__carte--choisie i { background: rgba(238, 234, 225, 0.42); }
.audit5-ex__carte em {
  position: absolute;
  right: -0.42em;
  top: -0.42em;
  width: 0.84em;
  height: 0.84em;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #F6D3BA, var(--cuivre-clair) 55%, var(--cuivre));
  box-shadow: 0 0 0 0.25em rgba(208, 138, 94, 0.18), 0 0 0.9em 0.1em rgba(208, 138, 94, 0.45);
}

/* Tablette (640 à 895 px) : les moitiés restent empilées, mais chacune pose son texte à gauche et son dessin à droite,
   pour ne pas laisser la moitié droite vide. */
@media (min-width: 40em) and (max-width: 55.99em) {
  .audit5-ex__moitie {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "marque marque" "texte scene";
    column-gap: clamp(32px, 5vw, 56px);
    align-items: center;
  }
  .audit5-ex__marque { grid-area: marque; }
  .audit5-ex__texte { grid-area: texte; margin-bottom: 0; }
  .audit5-ex__scene { grid-area: scene; margin-top: 0; font-size: 0.875rem; }
}

/* --------------------------------------------------------------------------
   4. La phrase de fin et le bouton, centrés
   -------------------------------------------------------------------------- */
.audit5__fin { display: grid; justify-items: center; gap: 30px; margin-top: clamp(64px, 6.5vw, 104px); text-align: center; }
.audit5__phrase {
  max-width: 44ch;
  font: italic 500 clamp(1.375rem, 1.2rem + 0.7vw, 1.875rem) / 1.3 var(--f-titre);
  color: var(--creme);                                        /* 10,5:1 */
  text-wrap: balance;
}

/* --------------------------------------------------------------------------
   5. Mouvement : une seule lecture à l’arrivée de l’exemple (html.anime-v4 + .est-visible). Sinon : l’état final ci-dessus.
   -------------------------------------------------------------------------- */
/* Départ (avant .est-visible) : posé sans transition, pour qu’il soit en place quand la page pose html.anime-v4.
   Arrivée : les transitions et leurs retards sont portés par l’état .est-visible ; les valeurs finales sont celles des parties 2 et 3. */
.anime-v4 .audit5-ex:not(.est-visible) .audit5-ex__moitie--priorite::before { transform: scaleX(0); }
.anime-v4 .audit5-ex.est-visible .audit5-ex__moitie--priorite::before { transition: transform 1.1s var(--ease-sortie) 0.35s; }

.anime-v4 .audit5-ex:not(.est-visible) .audit5-ex__pastille { scale: 0.4; opacity: 0; }
.anime-v4 .audit5-ex.est-visible .audit5-ex__pastille { transition: scale 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s, opacity 0.4s ease 0.5s; }
.anime-v4 .audit5-ex:not(.est-visible) .audit5-ex__pastille svg { translate: 0 -5px; opacity: 0; }
@media (min-width: 56em) { .anime-v4 .audit5-ex:not(.est-visible) .audit5-ex__pastille svg { translate: -5px 0; } }
.anime-v4 .audit5-ex.est-visible .audit5-ex__pastille svg { transition: translate 0.6s var(--ease-sortie) 0.85s, opacity 0.4s ease 0.85s; }

.anime-v4 .audit5-ex:not(.est-visible) .audit5-ex__loupe { translate: -5.6em 0.9em; opacity: 0; }
.anime-v4 .audit5-ex.est-visible .audit5-ex__loupe { transition: translate 1.8s var(--ease-douce) 0.6s, opacity 0.5s ease 0.6s; }

.anime-v4 .audit5-ex:not(.est-visible) .audit5-ex__carte--choisie {
  translate: none;
  border-color: rgba(224, 189, 142, 0.3);
  background: rgba(238, 234, 225, 0.035);
  box-shadow: none;
}
.anime-v4 .audit5-ex:not(.est-visible) .audit5-ex__carte--choisie b { background: rgba(224, 189, 142, 0.55); }
.anime-v4 .audit5-ex:not(.est-visible) .audit5-ex__carte--choisie i { background: rgba(238, 234, 225, 0.2); }
.anime-v4 .audit5-ex.est-visible .audit5-ex__carte--choisie,
.anime-v4 .audit5-ex.est-visible .audit5-ex__carte--choisie b,
.anime-v4 .audit5-ex.est-visible .audit5-ex__carte--choisie i { transition: translate 0.8s var(--ease-sortie) 1.25s, border-color 0.6s ease 1.25s, background 0.6s ease 1.25s, box-shadow 0.8s ease 1.25s; }
.anime-v4 .audit5-ex:not(.est-visible) .audit5-ex__carte em { scale: 0; }
.anime-v4 .audit5-ex.est-visible .audit5-ex__carte em { transition: scale 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1.75s; }

@media (prefers-reduced-motion: reduce) {
  .audit5-ex *,
  .audit5-ex *::before,
  .audit5-ex *::after { transition: none !important; }
}

/* --------------------------------------------------------------------------
   6. Contraste élevé, impression
   -------------------------------------------------------------------------- */
@media (forced-colors: active) {
  .audit5-ex__moitie { border: 1px solid CanvasText; }
  .audit5-ex__etiquette span { border-color: CanvasText; }
  .audit5-ex__pastille { background: Canvas; border: 1px solid CanvasText; }
  .audit5-ex__pastille svg { stroke: CanvasText; }
  .audit5-ex__scene { display: none; }
}
@media print {
  .audit5, .audit5-ex__moitie { background: none !important; color: #000 !important; box-shadow: none !important; }
  .audit5-ex__moitie { border: 1px solid #999; }
  .audit5-ex__scene, .audit5-ex__raccord { display: none; }
}