/* ─────────────────────────────────────────────────────────────
   Etudia — fondation « Encre » partagée par les maquettes E1-E4.
   Langage visuel hérité de mondria.com (accueil Encre, juillet 2026) :
   dégradés nuit ton sur ton, grille 64 px + glints, cascade du héros,
   cartes verre à bordure lumineuse, alternance foncé ↔ pâle,
   trame-pixel aux frontières, motif points de grille.
   ───────────────────────────────────────────────────────────── */

:root {
  --nuit: #031d2a;
  --orange: #ff4200;
  --sarcelle: #195876;
  --pale: #dcf3f9;
  --encre-2: #0c3e5c; /* bas du dégradé encre-a */
  --encre-3: #0b3b57; /* haut du dégradé encre-b */
  --encre-4: #021826; /* bas du dégradé encre-b */
  --carte-nuit: #06283a;
  --font-corps: 'Hanken Grotesk', system-ui, sans-serif;
  --font-titres: 'Bricolage Grotesque', 'Hanken Grotesk', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--nuit);
  color: var(--pale);
  font-family: var(--font-corps);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 {
  font-family: var(--font-titres);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.022em;
  text-wrap: balance;
}
p { text-wrap: pretty; }
::selection { background: var(--orange); color: #fff; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 3px; }

.shell {
  margin-inline: auto;
  width: 100%;
  max-width: 80rem;
  padding-inline: clamp(1.25rem, 5vw, 3.5rem);
}

/* ── Fonds Encre ── */
.fond-encre-a { background: linear-gradient(180deg, #031d2a 0%, #0c3e5c 100%); }
.fond-encre-b { background: linear-gradient(180deg, #0b3b57 0%, #021826 100%); }
.fond-encre-c { background: linear-gradient(180deg, #052237 0%, #0d405f 55%, #031d2a 100%); }
.fond-nuit { background: var(--nuit); }
.fond-pale { background: var(--pale); color: var(--nuit); }
.fond-cta { background: linear-gradient(180deg, #031d2a 0%, #021826 60%, #031d2a 100%); }

.motif-points {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Crect width='3' height='3' fill='%23DCF3F9' fill-opacity='0.18'/%3E%3C/svg%3E");
  background-size: 64px 64px;
}
.motif-points-nuit {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Crect width='3' height='3' fill='%23031D2A' fill-opacity='0.16'/%3E%3C/svg%3E");
  background-size: 64px 64px;
}
/* Combinés : les points (longhand) écraseraient le dégradé (shorthand) —
   on superpose donc explicitement les deux couches. */
.fond-cta.motif-points {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Crect width='3' height='3' fill='%23DCF3F9' fill-opacity='0.18'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #031d2a 0%, #021826 60%, #031d2a 100%);
  background-size: 64px 64px, auto;
}

/* ── Grille 64 px + vignette (héros et CTA) ── */
.grille64 {
  position: absolute; inset: 0;
  opacity: 0.05;
  background-image:
    linear-gradient(var(--pale) 1px, transparent 1px),
    linear-gradient(90deg, var(--pale) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(95% 75% at 50% 38%, #000 25%, transparent 78%);
  mask-image: radial-gradient(95% 75% at 50% 38%, #000 25%, transparent 78%);
}
.grille64-nuit {
  background-image:
    linear-gradient(var(--nuit) 1px, transparent 1px),
    linear-gradient(90deg, var(--nuit) 1px, transparent 1px);
}
.vignette {
  position: absolute; inset: 0;
  background: radial-gradient(120% 95% at 50% 35%, transparent 45%, color-mix(in oklab, var(--nuit) 85%, transparent) 100%);
}

/* ── Aurora : halos en dérive lente ── */
@keyframes aurora-a {
  0%, 100% { transform: translate3d(0,0,0) scale(1); }
  33% { transform: translate3d(4rem,-3rem,0) scale(1.12); }
  66% { transform: translate3d(-3rem,2rem,0) scale(0.94); }
}
@keyframes aurora-b {
  0%, 100% { transform: translate3d(0,0,0) scale(1); }
  40% { transform: translate3d(-5rem,2.5rem,0) scale(1.08); }
  75% { transform: translate3d(3rem,-2rem,0) scale(0.96); }
}
.halo { position: absolute; border-radius: 9999px; pointer-events: none; }
.halo-sarcelle { background: color-mix(in oklab, var(--sarcelle) 32%, transparent); filter: blur(110px); animation: aurora-a 22s ease-in-out infinite; }
.halo-pale { background: color-mix(in oklab, var(--pale) 7%, transparent); filter: blur(100px); animation: aurora-b 26s ease-in-out infinite; }
.halo-orange { background: color-mix(in oklab, var(--orange) 10%, transparent); filter: blur(100px); }

/* ── Glints : segments lumineux le long des lignes de grille ── */
@keyframes glint-x {
  0% { transform: translateX(-30vw); opacity: 0; }
  8%, 80% { opacity: 1; }
  100% { transform: translateX(115vw); opacity: 0; }
}
@keyframes glint-y {
  0% { transform: translateY(-30vh); opacity: 0; }
  8%, 80% { opacity: 1; }
  100% { transform: translateY(110vh); opacity: 0; }
}
.glint-x {
  position: absolute; height: 1px; width: 11rem;
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--pale) 85%, transparent), transparent);
  animation: glint-x var(--dur, 9s) ease-in-out var(--in, 0ms) infinite;
}
.glint-y {
  position: absolute; width: 1px; height: 11rem;
  background: linear-gradient(180deg, transparent, color-mix(in oklab, var(--pale) 70%, transparent), transparent);
  animation: glint-y var(--dur, 11s) ease-in-out var(--in, 0ms) infinite;
}
.masque-radial {
  -webkit-mask-image: radial-gradient(95% 80% at 50% 55%, #000 25%, transparent 80%);
  mask-image: radial-gradient(95% 80% at 50% 55%, #000 25%, transparent 80%);
}

/* ── Surfaces de verre ── */
.glass {
  background: color-mix(in oklab, var(--pale) 5%, transparent);
  border: 1px solid color-mix(in oklab, var(--pale) 13%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.glass-clair {
  background: color-mix(in oklab, #ffffff 72%, transparent);
  border: 1px solid color-mix(in oklab, var(--nuit) 10%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* ── Bordure lumineuse en dégradé ── */
.lum-border { position: relative; }
.lum-border::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--pale) 38%, transparent),
    color-mix(in oklab, var(--pale) 7%, transparent) 38%,
    color-mix(in oklab, var(--sarcelle) 60%, transparent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.lum-border-clair::before {
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--nuit) 24%, transparent),
    color-mix(in oklab, var(--nuit) 6%, transparent) 38%,
    color-mix(in oklab, var(--sarcelle) 45%, transparent));
}

/* ── Glow suivi du pointeur ── */
[data-glow] { position: relative; }
[data-glow]::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%),
    var(--glow-couleur, color-mix(in oklab, var(--sarcelle) 38%, transparent)), transparent 65%);
  opacity: 0; transition: opacity 0.45s ease; pointer-events: none;
}
[data-glow]:hover::after { opacity: 1; }
.glow-clair { --glow-couleur: color-mix(in oklab, var(--nuit) 8%, transparent); }

/* ── Carte lumineuse (verre + bordure + glow) ── */
.carte {
  position: relative; border-radius: 16px; overflow: hidden;
  background: color-mix(in oklab, var(--pale) 5%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.carte:hover { transform: translateY(-4px); }
.carte-claire {
  background: #ffffff;
  box-shadow: 0 18px 50px -28px rgba(3, 29, 42, 0.35);
}

/* ── Révélation orchestrée par groupe ── */
[data-reveal-group] [data-rc] {
  opacity: 0; transform: translateY(26px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--i, 0) * 90ms);
}
[data-reveal-group].is-visible [data-rc] { opacity: 1; transform: none; }

/* ── Cascade d'entrée du héros ── */
@keyframes cascade-up {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: none; }
}
.cascade {
  opacity: 0;
  animation: cascade-up 0.9s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i, 0) * 90ms + var(--base, 0ms)) both;
}
.mot-wrap {
  display: inline-block; overflow: hidden; vertical-align: bottom;
  padding-bottom: 0.08em; margin-bottom: -0.08em;
}
@keyframes mot-up { from { transform: translateY(115%); } to { transform: translateY(0); } }
.mot {
  display: inline-block; transform: translateY(115%);
  animation: mot-up 0.85s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i, 0) * 70ms + 250ms) both;
}

/* ── Sortie du héros au défilement (dégradation silencieuse) ── */
@supports (animation-timeline: view()) {
  .hero-sortie { animation: hero-sortie linear both; animation-timeline: scroll(); animation-range: 0 85vh; }
  @keyframes hero-sortie { to { opacity: 0.1; transform: translateY(-3rem); } }
  .plx { animation: plx linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
  @keyframes plx {
    from { transform: translateY(var(--plx, 2.5rem)); }
    to { transform: translateY(calc(var(--plx, 2.5rem) * -1)); }
  }
}

/* ── Chevron d'invitation ── */
@keyframes chevron-bas {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50% { transform: translateY(6px); opacity: 1; }
}
.chevron-bas { animation: chevron-bas 2.2s ease-in-out infinite; }

/* ── Pulsation douce ── */
@keyframes pulse-doux {
  0%, 100% { opacity: var(--op, 0.2); }
  50% { opacity: calc(var(--op, 0.2) * 2); }
}
.pulse-doux { animation: pulse-doux 5s ease-in-out infinite; }

/* ── Compteurs ── */
[data-countup] { font-variant-numeric: tabular-nums; }

/* ── En-tête ── */
.entete {
  position: fixed; inset-inline: 0; top: 0; z-index: 50;
  transition: background 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
  border-bottom: 1px solid transparent;
}
.entete.is-scrolled {
  background: color-mix(in oklab, var(--nuit) 82%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom-color: color-mix(in oklab, var(--pale) 10%, transparent);
}
.entete-claire.is-scrolled {
  background: color-mix(in oklab, #fbfeff 85%, transparent);
  border-bottom-color: color-mix(in oklab, var(--nuit) 10%, transparent);
}
.entete-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding-block: 1.1rem;
}
.nav-liens { display: flex; align-items: center; gap: 2rem; }
.navlink { position: relative; font-size: 0.92rem; font-weight: 600; opacity: 0.82; transition: opacity 0.3s; }
.navlink:hover { opacity: 1; }
.navlink::after {
  content: ""; position: absolute; left: 0; bottom: -5px; height: 2px; width: 100%;
  transform: scaleX(0); transform-origin: left; background: var(--orange);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.navlink:hover::after, .navlink:focus-visible::after { transform: scaleX(1); }
@media (max-width: 860px) { .nav-liens .navlink { display: none; } }

/* ── Marque Etudia (mot-symbole + virgules orange + by Mondria) ── */
.marque { display: inline-flex; align-items: center; gap: 0.6rem; }
.marque-mot {
  font-family: var(--font-titres); font-weight: 800; font-size: 1.45rem;
  letter-spacing: -0.03em; line-height: 1;
}
.marque-by {
  font-size: 0.66rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.14em; opacity: 0.55; align-self: flex-end; padding-bottom: 0.18rem;
}

/* ── Boutons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  border-radius: 9999px; padding: 0.78rem 1.6rem;
  font-size: 0.92rem; font-weight: 700; letter-spacing: 0.01em;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s, background 0.3s, color 0.3s;
  cursor: pointer; border: 0;
}
.btn:hover { transform: translateY(-2px); }
.btn-orange {
  background: var(--orange); color: #fff;
  box-shadow: 0 10px 40px -10px rgba(255, 66, 0, 0.55);
}
.btn-orange:hover { box-shadow: 0 14px 44px -10px rgba(255, 66, 0, 0.7); }
.btn-verre {
  background: color-mix(in oklab, var(--pale) 5%, transparent);
  border: 1px solid color-mix(in oklab, var(--pale) 13%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  color: color-mix(in oklab, var(--pale) 85%, transparent);
}
.btn-verre:hover { color: var(--pale); border-color: color-mix(in oklab, var(--pale) 35%, transparent); }
.btn-nuit { background: var(--nuit); color: var(--pale); }
.fleche { transition: transform 0.3s; }
.btn:hover .fleche, .lien-fleche:hover .fleche { transform: translateX(4px); }

/* ── Pilule kicker ── */
.pilule {
  display: inline-flex; align-items: center; gap: 0.5rem;
  border-radius: 9999px; padding: 0.4rem 1rem;
  font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em;
}
.carre-orange { width: 8px; height: 8px; background: var(--orange); flex: none; }

/* ── Kicker de section ── */
.kicker {
  font-size: 0.74rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.18em; color: var(--orange);
}

/* ── Fenêtre Teams (démo produit) ── */
.teams {
  border-radius: 16px; overflow: hidden;
  font-size: 0.86rem; line-height: 1.55;
}
.teams-barre {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.8rem 1.1rem;
  border-bottom: 1px solid color-mix(in oklab, var(--pale) 10%, transparent);
  font-weight: 600; font-size: 0.82rem;
}
.teams-statut { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 500; font-size: 0.72rem; opacity: 0.6; }
.point-vert { width: 7px; height: 7px; border-radius: 9999px; background: #3ddc84; }
.teams-corps { display: flex; flex-direction: column; gap: 0.9rem; padding: 1.15rem; }
.bulle { border-radius: 12px; padding: 0.75rem 0.95rem; max-width: 92%; }
.bulle-user { align-self: flex-end; background: color-mix(in oklab, var(--sarcelle) 55%, var(--nuit)); }
.bulle-etudia { align-self: flex-start; background: color-mix(in oklab, var(--pale) 7%, transparent); border: 1px solid color-mix(in oklab, var(--pale) 12%, transparent); }
.bulle-nom { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.55; margin-bottom: 0.3rem; }
.bulle-clause {
  margin-top: 0.55rem; padding: 0.65rem 0.8rem; border-left: 2px solid var(--orange);
  background: color-mix(in oklab, var(--nuit) 55%, transparent);
  font-style: italic; font-size: 0.82rem;
}
.bulle-ref { margin-top: 0.55rem; font-size: 0.72rem; opacity: 0.6; }
.teams-saisie {
  display: flex; align-items: center; gap: 0.6rem;
  margin: 0 1.15rem 1.15rem; padding: 0.65rem 0.95rem; border-radius: 10px;
  background: color-mix(in oklab, var(--pale) 6%, transparent);
  border: 1px solid color-mix(in oklab, var(--pale) 12%, transparent);
  font-size: 0.8rem; opacity: 0.65;
}
.avatar {
  width: 30px; height: 30px; border-radius: 9999px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.68rem; font-weight: 700;
}
.avatar-mt { background: color-mix(in oklab, var(--sarcelle) 80%, var(--pale)); color: var(--nuit); }
.avatar-e { background: var(--orange); color: #fff; }

/* ── FAQ accordéon ── */
.faq-item { border-bottom: 1px solid color-mix(in oklab, var(--nuit) 12%, transparent); }
.faq-sombre .faq-item { border-bottom-color: color-mix(in oklab, var(--pale) 12%, transparent); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.3rem 0.2rem; cursor: pointer; list-style: none;
  font-family: var(--font-titres); font-weight: 600; font-size: 1.08rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-plus { flex: none; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); color: var(--orange); }
.faq-item[open] .faq-plus { transform: rotate(45deg); }
.faq-reponse { padding: 0 2.5rem 1.4rem 0.2rem; opacity: 0.78; font-size: 0.96rem; }

/* ── Photo fondue ── */
.fondu-bas img, img.fondu-bas {
  -webkit-mask-image: linear-gradient(180deg, #000 52%, transparent 99%);
  mask-image: linear-gradient(180deg, #000 52%, transparent 99%);
}
.fondu-radial img, img.fondu-radial {
  -webkit-mask-image: radial-gradient(85% 75% at 50% 40%, #000 22%, transparent 74%);
  mask-image: radial-gradient(85% 75% at 50% 40%, #000 22%, transparent 74%);
}

/* ── Pied de page ── */
.pied {
  border-top: 1px solid color-mix(in oklab, var(--pale) 10%, transparent);
  padding-block: 2.2rem; font-size: 0.84rem;
}
.pied-inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
}
.pied a { opacity: 0.7; transition: opacity 0.3s; }
.pied a:hover { opacity: 1; }

/* ── Utilitaires de mise en page ── */
.section-pad { padding-block: clamp(4rem, 9vw, 6.5rem); }
.grid-3 { display: grid; gap: 1.5rem; grid-template-columns: repeat(3, 1fr); }
.grid-2 { display: grid; gap: 1.5rem; grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .grid-3 { grid-template-columns: 1fr; } .grid-2 { grid-template-columns: 1fr; } }
.centre { text-align: center; }

/* ── Accessibilité : tout s'affiche, rien ne bouge ── */
@media (prefers-reduced-motion: reduce) {
  .halo-sarcelle, .halo-pale, .pulse-doux, .chevron-bas { animation: none !important; }
  .glint-x, .glint-y { display: none !important; }
  .cascade, .mot { animation: none !important; opacity: 1 !important; transform: none !important; }
  [data-reveal-group] [data-rc] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .plx, .hero-sortie { animation: none !important; }
  [data-glow]::after { display: none !important; }
}
.trame-a-pale {
  height: 36px;
  background-color: #DCF3F9;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http%3A//www.w3.org/2000/svg'%20width='12'%20height='12'%3E%3Crect%20x='0'%20y='0'%20width='6'%20height='6'%20fill='%230C3E5C'%20fill-opacity='0.8'/%3E%3Crect%20x='6'%20y='0'%20width='6'%20height='6'%20fill='%230C3E5C'%20fill-opacity='0.8'/%3E%3Crect%20x='0'%20y='6'%20width='6'%20height='6'%20fill='%230C3E5C'%20fill-opacity='0.8'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns='http%3A//www.w3.org/2000/svg'%20width='12'%20height='12'%3E%3Crect%20x='0'%20y='0'%20width='6'%20height='6'%20fill='%230C3E5C'%20fill-opacity='0.45'/%3E%3Crect%20x='6'%20y='6'%20width='6'%20height='6'%20fill='%230C3E5C'%20fill-opacity='0.45'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns='http%3A//www.w3.org/2000/svg'%20width='12'%20height='12'%3E%3Crect%20x='6'%20y='0'%20width='6'%20height='6'%20fill='%230C3E5C'%20fill-opacity='0.2'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: 0 0px, 0 12px, 0 24px;
  background-size: 12px 12px;
}
.trame-pale-b {
  height: 36px;
  background-color: #0B3B57;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http%3A//www.w3.org/2000/svg'%20width='12'%20height='12'%3E%3Crect%20x='0'%20y='0'%20width='6'%20height='6'%20fill='%23DCF3F9'%20fill-opacity='0.8'/%3E%3Crect%20x='6'%20y='0'%20width='6'%20height='6'%20fill='%23DCF3F9'%20fill-opacity='0.8'/%3E%3Crect%20x='0'%20y='6'%20width='6'%20height='6'%20fill='%23DCF3F9'%20fill-opacity='0.8'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns='http%3A//www.w3.org/2000/svg'%20width='12'%20height='12'%3E%3Crect%20x='0'%20y='0'%20width='6'%20height='6'%20fill='%23DCF3F9'%20fill-opacity='0.45'/%3E%3Crect%20x='6'%20y='6'%20width='6'%20height='6'%20fill='%23DCF3F9'%20fill-opacity='0.45'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns='http%3A//www.w3.org/2000/svg'%20width='12'%20height='12'%3E%3Crect%20x='6'%20y='0'%20width='6'%20height='6'%20fill='%23DCF3F9'%20fill-opacity='0.2'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: 0 0px, 0 12px, 0 24px;
  background-size: 12px 12px;
}
.trame-b-pale {
  height: 36px;
  background-color: #DCF3F9;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http%3A//www.w3.org/2000/svg'%20width='12'%20height='12'%3E%3Crect%20x='0'%20y='0'%20width='6'%20height='6'%20fill='%23021826'%20fill-opacity='0.8'/%3E%3Crect%20x='6'%20y='0'%20width='6'%20height='6'%20fill='%23021826'%20fill-opacity='0.8'/%3E%3Crect%20x='0'%20y='6'%20width='6'%20height='6'%20fill='%23021826'%20fill-opacity='0.8'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns='http%3A//www.w3.org/2000/svg'%20width='12'%20height='12'%3E%3Crect%20x='0'%20y='0'%20width='6'%20height='6'%20fill='%23021826'%20fill-opacity='0.45'/%3E%3Crect%20x='6'%20y='6'%20width='6'%20height='6'%20fill='%23021826'%20fill-opacity='0.45'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns='http%3A//www.w3.org/2000/svg'%20width='12'%20height='12'%3E%3Crect%20x='6'%20y='0'%20width='6'%20height='6'%20fill='%23021826'%20fill-opacity='0.2'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: 0 0px, 0 12px, 0 24px;
  background-size: 12px 12px;
}
.trame-pale-nuit {
  height: 36px;
  background-color: #031D2A;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http%3A//www.w3.org/2000/svg'%20width='12'%20height='12'%3E%3Crect%20x='0'%20y='0'%20width='6'%20height='6'%20fill='%23DCF3F9'%20fill-opacity='0.8'/%3E%3Crect%20x='6'%20y='0'%20width='6'%20height='6'%20fill='%23DCF3F9'%20fill-opacity='0.8'/%3E%3Crect%20x='0'%20y='6'%20width='6'%20height='6'%20fill='%23DCF3F9'%20fill-opacity='0.8'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns='http%3A//www.w3.org/2000/svg'%20width='12'%20height='12'%3E%3Crect%20x='0'%20y='0'%20width='6'%20height='6'%20fill='%23DCF3F9'%20fill-opacity='0.45'/%3E%3Crect%20x='6'%20y='6'%20width='6'%20height='6'%20fill='%23DCF3F9'%20fill-opacity='0.45'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns='http%3A//www.w3.org/2000/svg'%20width='12'%20height='12'%3E%3Crect%20x='6'%20y='0'%20width='6'%20height='6'%20fill='%23DCF3F9'%20fill-opacity='0.2'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: 0 0px, 0 12px, 0 24px;
  background-size: 12px 12px;
}