/* Crop&Roll — feuille de style.
 *
 * Parti pris éditorial plutôt qu'administratif :
 *
 *  - Des titres très grands en serif (Fraunces), avec un interlignage serré
 *    et un interlettrage négatif. C'est ce contraste d'échelle qui fait la
 *    différence entre une page de documentation et une page de magazine.
 *  - Deux accents : un bleu froid pour les liens et l'interface, un ambre
 *    chaud pour les étiquettes et les chiffres. Le second reprend la teinte
 *    des bokeh, ce qui relie les visuels au reste.
 *  - Des sections numérotées, des étiquettes en capitales espacées, des
 *    filets fins : les codes de la mise en page imprimée.
 *
 * Contraintes tenues : tailles en rem, contrastes au-dessus de 4,5:1,
 * polices hébergées ici, mouvements coupés si le visiteur le demande.
 */

/* --- Polices (licence SIL Open Font) ------------------------------------ */
@font-face {
  font-family: 'Fraunces';
  src: url('polices/fraunces-latin.woff2') format('woff2');
  font-weight: 100 900; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
                 U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  src: url('polices/fraunces-latin-ext.woff2') format('woff2');
  font-weight: 100 900; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
                 U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  src: url('polices/inter-latin.woff2') format('woff2');
  font-weight: 100 900; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
                 U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  src: url('polices/inter-latin-ext.woff2') format('woff2');
  font-weight: 100 900; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
                 U+A720-A7FF;
}

:root {
  color-scheme: dark light;

  --bg: #07080c;
  --bg-elev: #101219;
  --bg-elev-2: #171a23;
  --border: #21252f;
  --border-clair: #2f3542;
  --text: #f2f4f8;
  --text-dim: #a5adbd;
  --text-faible: #6b7385;

  --froid: #7ba4ff;            /* liens, interface */
  --froid-doux: rgba(123, 164, 255, .12);
  --chaud: #ffb454;            /* étiquettes, chiffres, accents */
  --chaud-doux: rgba(255, 180, 84, .12);

  --btn-from: #2f6bf0;
  --btn-to: #1c46c4;

  --good: #45e0a0;
  --warn: #ffc45c;
  --bad: #ff7d7d;
  --good-bg: rgba(69, 224, 160, .08);
  --warn-bg: rgba(255, 196, 92, .08);
  --bad-bg: rgba(255, 125, 125, .08);

  --focus: #ffffff;
  --r-l: 22px;
  --r-m: 14px;
  --r-s: 9px;
  --ombre: 0 2px 6px rgba(0,0,0,.3), 0 14px 40px rgba(0,0,0,.36);
  --ombre-forte: 0 4px 10px rgba(0,0,0,.34), 0 28px 70px rgba(0,0,0,.5);

  --largeur: 74rem;
  --texte: 40rem;

  --titre: 'Fraunces', Georgia, 'Times New Roman', serif;
  --corps: 'Inter', -apple-system, 'Segoe UI', Roboto, Helvetica, sans-serif;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #fcfcfd;
    --bg-elev: #ffffff;
    --bg-elev-2: #f2f4f8;
    --border: #e4e8ef;
    --border-clair: #ccd3df;
    --text: #0e1016;
    --text-dim: #4e5665;
    --text-faible: #79808f;
    --froid: #1a48cf;
    --froid-doux: rgba(26, 72, 207, .07);
    --chaud: #a35a00;
    --chaud-doux: rgba(163, 90, 0, .08);
    --good: #067152;
    --warn: #8a5200;
    --bad: #bd2424;
    --good-bg: rgba(6, 113, 82, .06);
    --warn-bg: rgba(138, 82, 0, .06);
    --bad-bg: rgba(189, 36, 36, .05);
    --focus: #0e1016;
    --ombre: 0 1px 3px rgba(16,24,40,.06), 0 10px 28px rgba(16,24,40,.08);
    --ombre-forte: 0 3px 8px rgba(16,24,40,.08), 0 24px 60px rgba(16,24,40,.14);
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--corps);
  font-size: 100%;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--titre);
  font-weight: 600;
  letter-spacing: -.028em;
  line-height: 1.04;
}

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }

.skip-link {
  position: absolute; left: -9999px;
  background: var(--bg-elev); color: var(--text);
  padding: .8rem 1.2rem; border: 1px solid var(--border); z-index: 40;
}
.skip-link:focus { left: 0; top: 0; }

.contenu { max-width: var(--largeur); margin: 0 auto; padding: 0 1.5rem; }

/* --- Étiquette : petite capitale espacée, code de la mise en page imprimée */
.etiquette {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--corps);
  font-size: .72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .18em;
  color: var(--chaud);
  margin: 0 0 1rem;
}
.etiquette::before {
  content: ""; width: 1.6rem; height: 1px;
  background: currentColor; opacity: .6;
}

/* --- En-tête ------------------------------------------------------------ */
.entete {
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  position: sticky; top: 0; z-index: 30;
}
.entete__interieur {
  max-width: var(--largeur); margin: 0 auto;
  padding: .9rem 1.5rem;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.marque {
  font-family: var(--titre);
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: 1.35rem; font-weight: 700;
  color: var(--text); text-decoration: none; letter-spacing: -.035em;
}
.marque svg { color: var(--chaud); flex: 0 0 auto; }

.nav { display: flex; gap: .1rem; flex-wrap: wrap; }
.nav a {
  color: var(--text-dim); text-decoration: none;
  padding: .45rem .8rem; border-radius: 99px;
  font-size: .9rem; font-weight: 500;
  min-height: 2.4rem; display: inline-flex; align-items: center;
  transition: color .16s, background .16s;
}
.nav a:hover { color: var(--text); background: var(--bg-elev-2); }
.nav a[aria-current="page"] { color: var(--chaud); background: var(--chaud-doux); }

/* --- Fil d'Ariane ------------------------------------------------------- */
.fil {
  padding: 1.2rem 0 0;
  font-size: .8rem; color: var(--text-faible);
  display: flex; flex-wrap: wrap; gap: .45rem; align-items: center;
}
.fil a { color: var(--text-faible); text-decoration: none; }
.fil a:hover { color: var(--chaud); }
.fil__sep { opacity: .4; }
.fil [aria-current="page"] { color: var(--text-dim); }

/* --- Ouverture ---------------------------------------------------------- */
.hero { padding: 3.5rem 0 2.5rem; }
.hero h1 {
  font-size: clamp(2.6rem, 8vw, 5.2rem);
  margin: 0 0 1.3rem; max-width: 16ch;
}
.hero__accroche {
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  color: var(--text-dim); max-width: var(--texte); margin: 0 0 2.2rem;
}
.hero__actions { display: flex; gap: .9rem; flex-wrap: wrap; }

/* Accueil : image plein cadre, titre massif posé dessus. */
.hero--illustre {
  position: relative;
  min-height: min(84vh, 40rem);
  display: flex; align-items: flex-end;
  border-radius: var(--r-l); overflow: hidden;
  margin-top: 1.2rem; padding: clamp(2rem, 5vw, 4.5rem);
  box-shadow: var(--ombre-forte);
}
.hero--illustre img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero--illustre::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(4,5,8,.96) 8%,
              rgba(4,5,8,.7) 45%, rgba(4,5,8,.25) 100%);
}
.hero--illustre .hero__texte { position: relative; z-index: 1; max-width: 44rem; }
.hero--illustre h1 { color: #fff; font-size: clamp(2.6rem, 8.5vw, 5.4rem); }
.hero--illustre .hero__accroche { color: rgba(255,255,255,.86); }
.hero--illustre .etiquette { color: var(--chaud); }

/* Bandeau de rubrique. */
.banniere {
  position: relative; border-radius: var(--r-l); overflow: hidden;
  margin: 1.2rem 0 0; min-height: 15rem;
  display: flex; align-items: flex-end; box-shadow: var(--ombre);
}
.banniere img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.banniere__voile {
  position: relative; width: 100%;
  padding: clamp(2rem, 4vw, 3rem) clamp(1.4rem, 3vw, 2.4rem) clamp(1.6rem, 3vw, 2.2rem);
  background: linear-gradient(to top, rgba(4,5,8,.96) 10%,
              rgba(4,5,8,.6) 60%, transparent);
}
.banniere h1 { color: #fff; margin: 0 0 .6rem; font-size: clamp(2rem, 5.5vw, 3.4rem); max-width: 20ch; }
.banniere p { color: rgba(255,255,255,.82); margin: 0; max-width: 48ch; font-size: 1rem; }

/* --- Boutons ------------------------------------------------------------ */
.bouton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3.1rem; padding: .85rem 1.8rem;
  border: 0; border-radius: 99px;
  font-size: .97rem; font-weight: 600; font-family: var(--corps);
  text-decoration: none; cursor: pointer;
  transition: transform .14s, filter .16s, box-shadow .16s, border-color .16s;
}
.bouton--principal {
  color: #fff;
  background: linear-gradient(135deg, var(--btn-from), var(--btn-to));
  box-shadow: var(--ombre);
}
.bouton--principal:hover { filter: brightness(1.12); transform: translateY(-2px); box-shadow: var(--ombre-forte); }
.bouton--discret {
  color: var(--text); background: transparent;
  border: 1px solid var(--border-clair);
}
.bouton--discret:hover { border-color: var(--chaud); color: var(--chaud); }

/* --- Sections : numérotées, avec un chiffre en filigrane ---------------- */
.section {
  padding: 4rem 0;
  border-top: 1px solid var(--border);
  position: relative;
  counter-increment: section;
}
.section--premiere { border-top: 0; padding-top: 2rem; }
.section > h2::before {
  content: counter(section, decimal-leading-zero);
  display: block;
  font-family: var(--corps);
  font-size: .72rem; font-weight: 700;
  letter-spacing: .2em; color: var(--chaud);
  margin-bottom: .9rem;
}
main { counter-reset: section; }
.section h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); margin: 0 0 1rem; max-width: 22ch; }
.section h3 { font-size: 1.2rem; margin: 2.2rem 0 .6rem; }
.section p, .section ul, .section ol { max-width: var(--texte); }
.section p { color: var(--text-dim); }
.section p strong, .section li strong { color: var(--text); font-weight: 600; }
.section ul, .section ol { color: var(--text-dim); padding-left: 1.4rem; }
.section li { margin-bottom: .55rem; }

/* --- Cartes ------------------------------------------------------------- */
.cartes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.3rem; margin-top: 2rem;
}
.carte {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-m);
  padding: 1.6rem;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.carte:hover { border-color: var(--border-clair); transform: translateY(-3px); box-shadow: var(--ombre); }
.carte h3 { margin: 0 0 .6rem; font-size: 1.12rem; }
.carte h2 { font-size: 1.3rem; margin: 0 0 .6rem; max-width: none; }
.carte p { margin: 0; font-size: .94rem; color: var(--text-dim); max-width: none; }
.carte h2 a, .carte h3 a { color: var(--text); text-decoration: none; }
.carte h2 a:hover, .carte h3 a:hover { color: var(--chaud); }
.carte__meta {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .16em;
  color: var(--chaud); font-weight: 600; margin: 0 0 .6rem;
}
.carte--produit { border-color: var(--froid); background: var(--froid-doux); }

/* Carte illustrée : l'image occupe le haut et s'agrandit au survol. */
.carte--visuel { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.carte--visuel .carte__image { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.carte--visuel .carte__image img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s cubic-bezier(.2,.7,.3,1);
}
.carte--visuel:hover .carte__image img { transform: scale(1.06); }
.carte--visuel .carte__corps { padding: 1.4rem 1.5rem 1.6rem; }
.carte--visuel h3 { font-size: 1.25rem; }

.illu { width: 2.8rem; height: 2.8rem; display: block; margin-bottom: 1rem; color: var(--chaud); }

/* --- Grille magazine : une pièce maîtresse, des satellites -------------- */
.magazine { display: grid; gap: 1.3rem; margin-top: 2rem; }
@media (min-width: 54rem) {
  .magazine { grid-template-columns: 1.55fr 1fr; align-items: stretch; }
  .magazine__vedette { grid-row: span 2; }
  .magazine__vedette .carte__image { aspect-ratio: 4 / 3; }
  .magazine__vedette h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
}

/* --- Tableaux ----------------------------------------------------------- */
.tableau-cadre {
  overflow-x: auto; margin-top: 1.8rem;
  border: 1px solid var(--border); border-radius: var(--r-m);
  background: var(--bg-elev);
}
table { border-collapse: collapse; width: 100%; font-size: .93rem; min-width: 30rem; }
th, td { text-align: left; padding: .9rem 1.2rem; border-bottom: 1px solid var(--border); }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background .14s; }
tbody tr:hover { background: var(--bg-elev-2); }
thead th {
  color: var(--text-faible); font-weight: 600; font-size: .72rem;
  text-transform: uppercase; letter-spacing: .14em;
  background: var(--bg-elev-2);
}
td { color: var(--text-dim); }
td strong, th[scope="row"] { color: var(--text); font-weight: 600; }
caption {
  caption-side: bottom; text-align: left; color: var(--text-faible);
  font-size: .83rem; padding: .9rem 1.2rem; border-top: 1px solid var(--border);
}

/* --- Encarts : filet coloré à gauche ------------------------------------ */
.encart {
  border-radius: var(--r-m); padding: 1.5rem 1.7rem;
  margin: 2rem 0; border: 1px solid var(--border);
  border-left: 3px solid var(--border-clair);
  background: var(--bg-elev); max-width: var(--texte);
}
.encart h3 { margin-top: 0; font-size: 1.08rem; }
.encart p { margin-bottom: .7rem; }
.encart p:last-child { margin-bottom: 0; }
.encart--bien { border-left-color: var(--good); background: var(--good-bg); }
.encart--bien h3 { color: var(--good); }
.encart--attention { border-left-color: var(--warn); background: var(--warn-bg); }
.encart--attention h3 { color: var(--warn); }
.encart--bad { border-left-color: var(--bad); background: var(--bad-bg); }

/* --- Chiffres ----------------------------------------------------------- */
.preuve {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 1rem; margin-top: 2rem;
}
.preuve div {
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--r-m); padding: 1.5rem 1rem; text-align: center;
  transition: border-color .2s;
}
.preuve div:hover { border-color: var(--chaud); }
.preuve dt {
  color: var(--text-faible); font-size: .72rem; margin-bottom: .5rem;
  text-transform: uppercase; letter-spacing: .12em;
}
.preuve dd {
  margin: 0; font-family: var(--titre);
  font-size: 2.1rem; font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--text);
  letter-spacing: -.03em;
}
.preuve--compact { grid-template-columns: repeat(2, 1fr); gap: .7rem; }
.preuve--compact dd { font-size: 1.45rem; }
.preuve--compact div { padding: 1rem .7rem; }
.note { font-size: .85rem; color: var(--text-faible); margin-top: 1.1rem; }

/* --- Encadré produit ---------------------------------------------------- */
.encadre-produit {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 2.4rem; align-items: start; margin-top: 2rem;
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--r-l); padding: clamp(1.6rem, 3vw, 2.6rem);
  box-shadow: var(--ombre);
}
@media (max-width: 52rem) { .encadre-produit { grid-template-columns: 1fr; gap: 1.6rem; } }
.encadre-produit h3 { margin-top: 0; font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.liste-avantages { list-style: none; padding-left: 0; }
.liste-avantages li { padding-left: 1.8rem; position: relative; }
.liste-avantages li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: .5rem; height: .5rem; border-radius: 50%; background: var(--good);
}

/* --- Étapes ------------------------------------------------------------- */
.etapes-liste { counter-reset: etape; list-style: none; padding-left: 0; }
.etapes-liste li {
  counter-increment: etape; position: relative;
  padding-left: 3.2rem; margin-bottom: 1.4rem;
}
.etapes-liste li::before {
  content: counter(etape, decimal-leading-zero);
  position: absolute; left: 0; top: -.05em;
  font-family: var(--titre); font-size: 1.25rem; font-weight: 600;
  color: var(--chaud);
}

/* --- Glossaire ---------------------------------------------------------- */
.glossaire { margin: 0; }
.definition { padding: 1.5rem 0; border-bottom: 1px solid var(--border); }
.definition:last-child { border-bottom: 0; }
.definition dt {
  font-family: var(--titre); font-weight: 600; font-size: 1.25rem;
  margin-bottom: .5rem; color: var(--text); letter-spacing: -.02em;
}
.definition dd { margin: 0; color: var(--text-dim); max-width: var(--texte); }

/* --- Outils ------------------------------------------------------------- */
.depot {
  border: 2px dashed var(--border-clair); border-radius: var(--r-l);
  padding: 3.5rem 1.5rem; text-align: center; background: var(--bg-elev);
  transition: border-color .16s, background .16s;
}
.depot--actif { border-color: var(--chaud); background: var(--chaud-doux); }
.depot__titre {
  font-family: var(--titre); font-size: 1.5rem; font-weight: 600;
  margin: 0 0 1rem; color: var(--text); letter-spacing: -.02em;
}
.depot__note { font-size: .87rem; color: var(--text-faible); margin: 1rem 0 0; }
.depot label { cursor: pointer; }

.calculateur {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 1.2rem; align-items: end;
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--r-l); padding: clamp(1.4rem, 3vw, 2rem);
  box-shadow: var(--ombre);
}
.champ { display: flex; flex-direction: column; }
.champ label { font-size: .86rem; margin-bottom: .45rem; color: var(--text); font-weight: 500; }
.facultatif { color: var(--text-faible); font-weight: 400; }
.champ input, .champ select {
  min-height: 3.1rem; padding: .65rem .95rem;
  font-size: 1rem; font-family: var(--corps); color: var(--text);
  background: var(--bg-elev-2); border: 1px solid var(--border-clair);
  border-radius: var(--r-s);
}
.champ input:focus, .champ select:focus { border-color: var(--chaud); }
.calculateur .bouton { grid-column: 1 / -1; }
@media (min-width: 48rem) { .calculateur .bouton { grid-column: auto; } }

.resultat:empty { display: none; }
.resultat { margin-top: 1.8rem; }
.resultat__chiffre {
  font-family: var(--titre);
  font-size: clamp(2.6rem, 8vw, 3.8rem); font-weight: 600;
  line-height: 1; margin: .6rem 0 .8rem;
  font-variant-numeric: tabular-nums; color: var(--text);
  letter-spacing: -.035em;
}
.resultat table { min-width: 0; }

code {
  font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
  font-size: .86em; background: var(--bg-elev-2);
  border: 1px solid var(--border); border-radius: 6px; padding: .12rem .42rem;
}
a { color: var(--froid); text-underline-offset: .22em; }

/* --- Pied de page ------------------------------------------------------- */
.pied {
  border-top: 1px solid var(--border);
  margin-top: 5rem; padding: 3.5rem 0 4rem;
  background: var(--bg-elev);
}
.pied__interieur {
  max-width: var(--largeur); margin: 0 auto; padding: 0 1.5rem;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 2.4rem; align-items: start;
  color: var(--text-dim); font-size: .88rem;
}
.pied a { color: var(--text-dim); text-decoration: none; }
.pied a:hover { color: var(--chaud); }
.pied ul { list-style: none; padding: 0; margin: 0; }
.pied li { margin-bottom: .5rem; }
.pied__titre {
  font-family: var(--corps); font-weight: 600; color: var(--text-faible);
  margin: 0 0 .9rem; font-size: .72rem;
  text-transform: uppercase; letter-spacing: .16em;
}
.pied__marque { max-width: 17rem; }
.pied__marque strong {
  font-family: var(--titre); font-size: 1.3rem; color: var(--text);
  letter-spacing: -.03em;
}
.pied__note { color: var(--text-faible); font-size: .83rem; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap;
}

/* --- Apparition au défilement -------------------------------------------
   Discrète : un léger glissement vers le haut. Elle est désactivée pour qui
   demande moins de mouvement, et le contenu reste visible si le script ne
   s'exécute pas. */
.apparait { opacity: 0; transform: translateY(18px); }
.apparait--visible {
  opacity: 1; transform: none;
  transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .apparait { opacity: 1; transform: none; }
}

@media (forced-colors: active) {
  .bouton--principal { border: 1px solid ButtonText; }
  .carte, .encart, .tableau-cadre { border: 1px solid CanvasText; }
  .apparait { opacity: 1; transform: none; }
}