*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}
img, picture, video, svg { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
ul, ol { list-style: none; padding: 0; }

:root {
  --bg:      #000000;
  --bg2:    #08090a;
  --c1:  #08090a;
  --c2:#111415;
  --ln:     rgba(255, 255, 255, .15);
  --ln2:   rgba(255, 255, 255, .26);

  --tx:  #eef2f1;
  --tx2: #a8b2b4;
  --tx3:   #9aa4a7;

  --z:      #14b981;
  --z-dark: #0b7d58;
  --z-ink:  #04120d;
  --z-glow: rgba(20, 185, 129, .28);

  --z-soft: rgba(20, 185, 129, .14);
  --z-line: rgba(20, 185, 129, .34);

  --w: 1500px;
  --pad: clamp(20px, 4.5vw, 60px);
  --r: 18px;
  --r2: 12px;
  --ease: cubic-bezier(.22, .8, .3, 1);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(760px 520px at 6% 0%, rgba(20, 185, 129, .13), transparent 62%),
    radial-gradient(680px 520px at 96% 12%, rgba(20, 185, 129, .07), transparent 60%),
    radial-gradient(900px 640px at 50% 104%, rgba(20, 185, 129, .09), transparent 66%);
}

body {
  background: var(--bg);
  color: var(--tx);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, h4 { line-height: 1.08; letter-spacing: -.025em; font-weight: 800; text-wrap: balance; }
p { text-wrap: pretty; }

.wrap { width: min(var(--w), 100% - var(--pad) * 2); margin-inline: auto; }
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--z); color: var(--z-ink); padding: 12px 20px; font-weight: 700;
}
.skip:focus { left: 0; }
:focus-visible { outline: 2px solid var(--z); outline-offset: 3px; }

.label {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .72rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--z);
}
.label::before { content: ""; width: 14px; height: 2px; background: currentColor; }

.hd {
  position: sticky; top: 0; z-index: 100;
  border-bottom: 1px solid transparent;
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
.hd.stuck {
  background: rgba(0, 0, 0, .9);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border-bottom-color: var(--ln);
}
.hd-in { display: flex; align-items: center; gap: 24px; height: 92px; }

.logo { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; }
.logo svg { width: 38px; height: 38px; flex: none; color: var(--z); }
.logo b {
  font-size: 1.2rem; font-weight: 800; letter-spacing: .17em; text-transform: uppercase;
}
.logo span {
  display: block; font-size: .64rem; letter-spacing: .3em; color: var(--tx3);
  font-weight: 700; text-transform: uppercase;
}

.nav { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.nav a {
  position: relative; text-decoration: none; color: var(--tx2);
  font-size: .87rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  padding: 12px 18px; transition: color .2s;
}
.nav a:hover, .nav a[aria-current] { color: var(--tx); }
.nav a[aria-current]::after {
  content: ""; position: absolute; left: 18px; right: 18px; bottom: 0; height: 2px;
  background: var(--z);
}
.lang {
  margin-left: 10px; display: inline-flex; align-items: center;
  border: 1px solid var(--ln); border-radius: 999px; overflow: hidden;
}
.lang a {
  padding: 8px 14px; font-size: .78rem; font-weight: 700; letter-spacing: .1em;
  text-decoration: none; color: var(--tx3); transition: color .2s, background .2s;
}
.lang a:hover { color: var(--tx); background: rgba(255, 255, 255, .06); }

.menu-btn {
  display: none; margin-left: auto; width: 44px; height: 44px; cursor: pointer;
  background: none; border: 1px solid var(--ln); border-radius: 14px; color: var(--tx);
  align-items: center; justify-content: center;
}
.menu-btn span { display: block; width: 18px; height: 2px; background: currentColor; position: relative; }
.menu-btn span::before, .menu-btn span::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor;
  transition: transform .25s var(--ease);
}
.menu-btn span::before { top: -6px; }
.menu-btn span::after { top: 6px; }
.menu-btn[aria-expanded="true"] span { background: transparent; }
.menu-btn[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 900px) {
  .menu-btn { display: inline-flex; }
  .nav {
    position: fixed; inset: 92px 0 auto; margin: 0; flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(0, 0, 0, .98);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--ln); padding: 10px var(--pad) 22px;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .22s var(--ease), transform .22s var(--ease), visibility 0s linear .22s;
  }
  .nav.open {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity .22s var(--ease), transform .22s var(--ease), visibility 0s;
  }
  .nav a { padding: 15px 2px; font-size: .95rem; border-bottom: 1px solid var(--ln); }
  .nav a[aria-current]::after { left: 2px; right: auto; width: 22px; bottom: 6px; }
  .lang { margin: 16px 0 0; align-self: flex-start; }
}

.btn {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 15px 28px; border: 1px solid var(--z); border-radius: 999px;
  background-color: var(--z); background-image: none; color: var(--z-ink);
  font-size: .82rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none;
  transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s, transform .2s var(--ease);
}
.btn { box-shadow: 0 8px 26px -12px var(--z-glow); }
.btn:hover { background-color: transparent; color: var(--z); box-shadow: 0 0 0 4px var(--z-glow); transform: translateY(-2px); }
.btn-ghost {
  background-color: transparent; color: var(--tx); border-color: var(--ln2);
}
.btn-ghost:hover { border-color: var(--tx); color: var(--tx); box-shadow: none; background-color: rgba(255,255,255,.05); }
.btn[aria-disabled="true"] {
  background-color: transparent; color: var(--tx3); border-color: var(--ln);
  cursor: default; box-shadow: none;
}

.hero {
  position: relative; min-height: min(74vh, 660px); display: flex; align-items: flex-end;
  padding: clamp(80px, 16vh, 160px) 0 clamp(40px, 7vh, 72px);
  border-bottom: 1px solid var(--ln);
  overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .95; }
@media (max-width: 900px) {
  .hero-bg img { object-position: 74% center; }
}

.hero-bg img, .gh-bg img { animation: drift 26s ease-in-out infinite alternate; will-change: transform; }
@keyframes drift {
  from { transform: scale(1.05); }
  to   { transform: scale(1.13) translate3d(-1.2%, -0.8%, 0); }
}
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to top, var(--bg) 1%, rgba(0, 0, 0,.2) 32%, transparent 68%),
    linear-gradient(to right, var(--bg) 0%, rgba(0, 0, 0,.62) 34%, transparent 68%);
}
.hero .wrap { position: relative; z-index: 1; }
.hero h1 { font-size: clamp(2.4rem, 6.4vw, 4.2rem); margin: 22px 0 0; letter-spacing: -.042em; font-weight: 900; }
.hi { color: var(--z); position: relative; white-space: nowrap; }
.hi::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .04em; height: .09em;
  background: var(--z); opacity: .3; border-radius: 999px;
}
.hero p.lede { max-width: 46ch; margin-top: 20px; font-size: clamp(1rem, 2vw, 1.18rem); color: var(--tx2); }
.hero .row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

.band { padding: clamp(58px, 9vw, 104px) 0; border-bottom: 1px solid var(--ln); }
.band-top { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 20px; margin-bottom: clamp(28px, 4vw, 46px); }
.band-top > div { flex: 1 1 420px; }
.band-top h1,
.band-top h2 { font-size: clamp(1.7rem, 3.8vw, 2.6rem); margin-top: 16px; }
.band-top p { color: var(--tx2); margin-top: 14px; max-width: 60ch; }
.more {
  text-decoration: none; color: var(--z); font-size: .78rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  border-bottom: 1px solid transparent; padding-bottom: 3px; transition: border-color .2s;
}
.more:hover { border-bottom-color: var(--z); }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 22px; }
.card {
  position: relative; display: block; text-decoration: none; overflow: hidden;
  border: 1px solid var(--ln); border-radius: var(--r);
  background: var(--c1);
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.card:hover {
  border-color: var(--z-line); transform: translateY(-5px);
  box-shadow: 0 26px 60px -30px rgba(0, 0, 0, .9), 0 0 44px -18px var(--z-glow);
}
/* Les jaquettes sont des cles d'affiche CARREES : une vignette carree les
   affiche en entier et au maximum, sans bande laterale ni rognage. */
.card-thumb { display: block; position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--c2); }
.card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s var(--ease), opacity .3s; opacity: .96; }
.card:hover .card-thumb img { transform: scale(1.055); opacity: 1; }
.card-thumb::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(16,20,22,.96) 2%, rgba(16,20,22,.28) 52%, transparent 100%);
}
.card-mark {
  position: absolute; left: 26px; bottom: 22px; z-index: 1;
  max-height: 62px; width: auto; filter: drop-shadow(0 6px 18px rgba(0,0,0,.6));
}
.card-txt { display: block; padding: 22px 26px 26px; border-top: 2px solid var(--gc, var(--z)); }
.card-meta {
  display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center;
  font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--tx3);
}
.card-txt p { color: var(--tx2); margin-top: 14px; font-size: .95rem; }
.card-go {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 18px;
  font-size: .76rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--tx);
}
.card-go svg { width: 15px; height: 15px; transition: transform .25s var(--ease); }
.card:hover .card-go svg { transform: translateX(4px); }

.pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--z);
  /* Fond opaque et non translucide : la pastille se pose aussi bien sur une
     illustration tres claire (SAJ) que sur une sombre. Avec l'ancien fond
     translucide, le vert tombait a 2,3:1 sur le bandeau de SAJ. */
  background: rgba(0, 0, 0, .82); border: 1px solid var(--z-line);
  border-radius: 999px; padding: 7px 14px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.pill i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: blip 2.6s var(--ease) infinite; }
@keyframes blip { 0%, 100% { opacity: 1; } 50% { opacity: .28; } }

.posts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 20px; }
.post {
  display: flex; flex-direction: column; padding: 26px 26px 28px;
  background: var(--c1); border: 1px solid var(--ln); border-radius: var(--r);
  border-left: 2px solid var(--z);
  transition: background .25s, border-color .25s;
}
.post:hover { background: var(--c2); border-color: var(--z-line); }
.post time {
  font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--tx3);
}
.post .tag {
  font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--z);
}
.post-top { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.post h2, .post h3 { font-size: 1.16rem; margin-top: 14px; }
.post p { color: var(--tx2); font-size: .95rem; margin-top: 12px; }
.posts-col .post { border-radius: var(--r); }
.posts-col { display: grid; gap: 18px; }

.gh {
  position: relative; display: flex; align-items: flex-end; overflow: hidden;
  min-height: min(70vh, 620px); padding: clamp(90px, 16vh, 170px) 0 clamp(34px, 6vh, 60px);
  border-bottom: 1px solid var(--ln);
}
.gh-bg { position: absolute; inset: 0; }
.gh-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .88; }
.gh-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to top, var(--bg) 1%, rgba(0, 0, 0,.22) 34%, transparent 70%),
    linear-gradient(to right, var(--bg) 0%, rgba(0, 0, 0,.78) 38%, transparent 72%);
}
.gh .wrap { position: relative; z-index: 1; }
.gh-mark { max-height: clamp(78px, 12vw, 128px); width: auto; margin-bottom: 24px; }
.gh-name {
  font-size: clamp(2.6rem, 7vw, 4.4rem); font-weight: 900; letter-spacing: -.04em;
  line-height: 1; margin-bottom: 22px;
}
.gh h1 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); font-weight: 700; letter-spacing: -.02em; }
.gh .row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; align-items: center; }
.gh .btn { gap: 11px; }

.gh-intro { max-width: 62ch; }
.gh-intro p { color: var(--tx2); font-size: clamp(1rem, 2vw, 1.12rem); }
.gh-intro p + p { margin-top: 18px; }

.trio { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 1px; background: var(--ln); border: 1px solid var(--ln); border-radius: var(--r); overflow: hidden; }
.trio article { background: var(--bg2); padding: 28px 26px 30px; }
.trio .n { font-size: .72rem; font-weight: 800; letter-spacing: .18em; color: var(--z); }
.trio h2, .trio h3 { font-size: 1.06rem; margin-top: 14px; }
.trio p { color: var(--tx2); font-size: .93rem; margin-top: 11px; }

.sheet { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: 1px; background: var(--ln); border: 1px solid var(--ln); border-radius: var(--r); overflow: hidden; }
.sheet div { background: var(--bg2); padding: 20px 22px 22px; }
.sheet dt { font-size: .68rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--tx3); }
.sheet dd { margin: 8px 0 0; font-size: 1rem; font-weight: 600; }

.media { display: grid; gap: 18px; grid-template-columns: 1fr; }
.media video, .media .shot {
  width: 100%; border: 1px solid var(--ln); border-radius: var(--r); background: #000;
}
.shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 18px; }

.qa { border-top: 1px solid var(--ln); }
.qa details { border-bottom: 1px solid var(--ln); }
.qa summary {
  display: flex; align-items: center; gap: 18px; cursor: pointer; list-style: none;
  padding: 22px 0; font-size: clamp(1rem, 2vw, 1.1rem); font-weight: 700; letter-spacing: -.01em;
  transition: color .2s;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--z); }
.qa summary::after {
  content: ""; margin-left: auto; flex: none; width: 11px; height: 11px;
  border-right: 2px solid var(--z); border-bottom: 2px solid var(--z);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .25s var(--ease);
}
.qa details[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.qa .a { padding: 0 42px 26px 0; color: var(--tx2); max-width: 78ch; }

.vals { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(248px, 100%), 1fr)); gap: 1px; background: var(--ln); border: 1px solid var(--ln); border-radius: var(--r); overflow: hidden; }
.vals article { background: var(--bg2); padding: 28px 26px 30px; }
.vals .n { font-size: .72rem; font-weight: 800; letter-spacing: .18em; color: var(--z); }
.vals h2, .vals h3 { font-size: 1.05rem; margin-top: 14px; }
.vals p { color: var(--tx2); font-size: .93rem; margin-top: 11px; }

.intro { font-size: clamp(1.05rem, 2.2vw, 1.3rem); max-width: 62ch; }
.body-txt { max-width: 68ch; margin-top: 24px; }
.body-txt p { color: var(--tx2); }
.body-txt p + p { margin-top: 18px; }

.ct { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(24px, 5vw, 60px); align-items: center; }
.ct h2 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); }
.ct p { color: var(--tx2); margin-top: 16px; max-width: 54ch; }
@media (max-width: 820px) { .ct { grid-template-columns: 1fr; } }

.ft { padding: clamp(46px, 7vw, 74px) 0 40px; }
.ft-cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 34px; }
.ft h2, .ft h4 {
  font-size: .7rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--tx3);
  margin-bottom: 16px;
}
.ft li + li { margin-top: 2px; }
.ft a {
  display: inline-block; padding: 6px 0;   /* zone de clic decente aussi a la souris */
  text-decoration: none; color: var(--tx2); font-size: .92rem; transition: color .2s;
}
.ft a:hover { color: var(--z); }
.ft-bot {
  margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--ln);
  color: var(--tx3); font-size: .82rem; display: flex; flex-wrap: wrap; gap: 8px 22px;
}
@media (max-width: 860px) { .ft-cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .ft-cols { grid-template-columns: 1fr; } }

.page-txt { max-width: 76ch; padding: clamp(46px, 8vw, 86px) 0 30px; }
.page-txt h1 { font-size: clamp(1.9rem, 4.6vw, 2.7rem); }
.page-txt h2 { font-size: 1.24rem; margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--ln); }
.page-txt h3 { font-size: 1.02rem; margin-top: 26px; }
.page-txt p, .page-txt li { color: var(--tx2); }
.page-txt p { margin-top: 15px; }
.page-txt ul { margin-top: 15px; padding-left: 20px; display: grid; gap: 9px; list-style: disc; }
.page-txt a { color: var(--z); }
.page-txt .updated { color: var(--tx3); font-size: .87rem; margin-top: 14px; }
.page-txt strong { color: var(--tx); }

.back {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 34px; padding: 10px 0;
  text-decoration: none;
  color: var(--tx2); font-size: .78rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
}
.back:hover { color: var(--tx); }

.js .fx { opacity: 0; transform: translateY(16px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
.js .fx.on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .fx { opacity: 1; transform: none; } }

/* =========================================================================
   Passe mobile. Le telephone est le premier ecran du site, pas une variante :
   la majorite des visiteurs d'un studio de jeux mobiles arrive de la.
   ========================================================================= */
@media (max-width: 700px) {

  /* 1. Le bandeau confisquait 74 % du premier ecran : le premier jeu
        n'apparaissait qu'apres 1,3 ecran de defilement. */
  .hero { min-height: 0; padding: clamp(56px, 12vh, 88px) 0 clamp(26px, 5vh, 40px); }
  .g-hero { min-height: 0; padding: clamp(72px, 15vh, 110px) 0 26px; }

  /* 2. Sections resserrees : les pages depassaient 6 000 px de haut. */
  .band { padding: clamp(38px, 8vw, 58px) 0; }
  .band-top { margin-bottom: clamp(22px, 5vw, 34px); }

  /* 3. Zones tactiles : 44 px minimum (les liens du pied faisaient 20 px). */
  .ft a { display: inline-block; padding: 12px 0; }
  .ft li + li { margin-top: 0; }
  .ft h2, .ft h4 { margin-bottom: 8px; }
  .back { padding: 14px 0; }
  .more { display: inline-block; padding: 12px 0; }
  .lang a { padding: 13px 20px; }

  /* 4. Les questions de la FAQ sont deja hautes ; on garde de l'air. */
  .qa summary { padding: 20px 0; }
}

/* Filet de securite tres petits ecrans (320 px) : une etiquette en capitales
   tres espacees est un mot insecable — « SPECIFICATIONS » faisait 311 px et
   debordait. On desserre plutot que de couper le mot en deux. */
@media (max-width: 380px) {
  .label { letter-spacing: .12em; font-size: .68rem; }
  .label::before { width: 10px; }
}

/* =========================================================================
   TITRES — ils doivent trancher franchement sur le reste.
   Le corps de texte reste en #eef2f1 ; les titres passent au blanc pur,
   plus gras et plus serrés, avec un léger halo sur les bandeaux pour les
   détacher de l'illustration.
   ========================================================================= */
h1, h2, h3, h4 { color: #ffffff; }

.band-top h1, .band-top h2 {
  font-size: clamp(1.9rem, 4.2vw, 3rem);
  font-weight: 900;
  letter-spacing: -.035em;
}

.hero h1 {
  font-weight: 900;
  letter-spacing: -.045em;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .55), 0 1px 3px rgba(0, 0, 0, .4);
}
.gh h1, .gh-name {
  color: #ffffff;
  text-shadow: 0 2px 26px rgba(0, 0, 0, .5), 0 1px 3px rgba(0, 0, 0, .35);
}

/* les intertitres des blocs : blancs et un cran plus gras */
.trio h3, .vals h3 { color: #ffffff; font-weight: 800; }
.qa summary { color: #ffffff; font-weight: 800; }

/* l'étiquette de section garde le vert, mais gagne en présence */
.label { font-size: .76rem; letter-spacing: .22em; }
.label::before { width: 22px; height: 2px; }


/* -------------------------------------------------------------------------
   Adresse de contact affichee en clair.
   Un lien mailto seul ne laisse rien a copier au visiteur dont le telephone
   n'a pas de logiciel de courrier configure : l'adresse doit etre lisible.
   ------------------------------------------------------------------------- */
.mail { color: var(--z); overflow-wrap: anywhere; }
.mail:hover { color: var(--tx); }
.ct-mail { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.ct-mail .mail { font-size: .95rem; text-decoration: none; padding: 10px 0; }

/* mention legale du responsable du traitement : exigee par le RGPD (art. 13),
   mais elle ne doit pas concurrencer l'adresse de contact juste au-dessus. */
.page-txt .rt { color: var(--tx3); font-size: .88rem; line-height: 1.65; margin-top: 10px; }


/* -------------------------------------------------------------------------
   Bloc de contact : une adresse et deux chaines, presentes comme trois
   moyens de nous joindre plutot que comme des liens ajoutes apres coup.
   Les icones sont dessinees ici : rien n'est charge chez Meta ni Google,
   le site continue donc de ne contacter aucun serveur tiers.
   ------------------------------------------------------------------------- */
.ct-links { display: grid; gap: 14px; justify-items: stretch; }

/* le bouton porte l'adresse : ni majuscules forcees ni lettres espacees,
   sans quoi une adresse devient illisible et deborde sur petit ecran. */

.ct-sep {
  display: flex; align-items: center; gap: 12px; margin-top: 6px;
  font-size: .72rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--tx3);
}
.ct-sep::after { content: ""; flex: 1; height: 1px; background: var(--ln); }

.ct-soc { display: grid; gap: 10px; }
.ct-soc a {
  display: flex; align-items: center; gap: 14px; padding: 12px 16px;
  border: 1px solid var(--ln); border-radius: var(--r2); text-decoration: none; color: var(--tx);
  transition: border-color .2s, background .2s, transform .2s var(--ease);
}
.ct-soc a:hover { border-color: var(--z-line); background: var(--z-soft); transform: translateY(-2px); }
.ct-soc svg { width: 22px; height: 22px; flex: none; color: var(--z); }
.ct-soc b  { display: block; font-size: .95rem; font-weight: 700; line-height: 1.3; }
.ct-soc em { display: block; font-style: normal; font-size: .82rem; color: var(--tx3); }


/* trait commun aux icones : contour dessine, pleins pour les details */
.ct-soc svg, .ft-soc svg { fill: none; stroke: currentColor; stroke-width: 1.7;
                           stroke-linejoin: round; stroke-linecap: round; }
.ct-soc .fill, .ft-soc .fill { fill: currentColor; stroke: none; }


/* ---- les deux chaines, dans le menu ----
   Elles partagent le cadre du selecteur de langue : un seul module [EN|IG|YT].
   Sans ce cadre, l'icone se reduit a un trait de 1,35 px perdu dans une barre
   noire -- techniquement contraste, visuellement absent. Le trait est aussi
   epaissi et la couleur portee au blanc du texte. */
.hd-end {
  display: inline-flex; align-items: center; margin-left: 10px;
  border: 1px solid var(--ln); border-radius: 999px; overflow: hidden;
}
.hd-end .lang { margin: 0; border: 0; border-radius: 0; }
.hd-soc { display: inline-flex; align-items: center; gap: 0; }
.hd-soc a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 36px; color: var(--tx);
  /* .nav a impose padding: 12px 18px a TOUT lien du menu, y compris ceux-ci :
     avec box-sizing: border-box il ne restait que 4 px de contenu et l'icone,
     element flex, s'y ecrasait en un point. */
  padding: 0;
  border-left: 1px solid var(--ln);
  transition: color .2s, background .2s;
}
.hd-soc a:hover { color: var(--z); background: rgba(255, 255, 255, .08); }
.hd-soc svg { width: 20px; height: 20px; flex: none; stroke-width: 2; }
@media (max-width: 900px) {
  .hd-end { margin: 16px 0 0; align-self: flex-start; }
  .hd-soc a { width: 48px; height: 44px; }
  .hd-soc a { padding: 0; }
  .hd-soc svg { width: 21px; height: 21px; }
}

/* ---- pastilles du pied de page ---- */
.ft-soc { display: flex; gap: 10px; margin-top: 20px; }
.ft-soc a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; padding: 0;
  border: 1px solid var(--ln); border-radius: 14px; color: var(--tx2);
  transition: color .2s, border-color .2s, background .2s;
}
.ft-soc a:hover { color: var(--z); border-color: var(--z-line); background: var(--z-soft); }
.ft-soc svg { width: 21px; height: 21px; }


/* trait commun a toutes les icones dessinees ici */
.ct-soc svg, .ft-soc svg, .hd-soc svg {
  fill: none; stroke: currentColor; stroke-linejoin: round; stroke-linecap: round;
}
.ct-soc svg, .ft-soc svg { stroke-width: 1.7; }
.ct-soc .fill, .ft-soc .fill, .hd-soc .fill { fill: currentColor; stroke: none; }

/* L'adresse est donnee en clair, sans lien : un mailto laisse sans reponse
   quiconque n'a pas de logiciel de courrier configure. « user-select: all »
   fait qu'un simple clic la selectionne entierement, prete a etre copiee,
   sans script ni bouton. */
.ct-adr {
  font-size: clamp(1.05rem, 2.4vw, 1.28rem); font-weight: 700; letter-spacing: -.01em;
  color: var(--z); margin: 0; overflow-wrap: anywhere;
  -webkit-user-select: all; user-select: all;
}
.ct-links .ct-sep:first-child { margin-top: 0; }