/* ============================================================================
   ayoubtrhaiti.fr — chapitres.css
   ----------------------------------------------------------------------------
   Mise en page propre à chaque chapitre, d'après les planches desktop (1440 ×
   900), tablette (834) et mobile (390) de la maquette du 17/10/2026.
   Règle du parcours horizontal : au-dessus de 1024 px, chaque chapitre tient
   dans la hauteur de l'écran ; les grilles utilisent minmax(0, 1fr) et le corps
   peut défiler verticalement en dernier recours (navigation.css).
   Ordre : 1 accueil · 2 lives · 3 communauté · 4 setup · 5 parcours ·
           6 soutenir · 7 contact.
   ========================================================================== */

/* =========================== 1. ACCUEIL ==================================== */
/* Tout est centré, sans visuel à droite (demande d'Ayoub du 18/10) ; la mascotte
   garde ses trois autres apparitions (Discord, contact, 404). */
.accueil__marque { display: flex; align-items: center; gap: 12px; justify-content: center; }
.accueil__marque .marque__nom { font-size: 18px; }
.accueil__grille { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; text-align: center; }
.accueil__texte { display: flex; flex-direction: column; align-items: center; gap: 18px; width: 100%; max-width: 560px; min-width: 0; }
.accueil__statut { align-self: center; }
.accueil__accroche { font-size: 18px; line-height: var(--il-corps); color: var(--texte-2); max-width: 520px; text-wrap: balance; }
.accueil__plateformes { width: 100%; max-width: 470px; margin-top: 4px; text-align: left; }
.accueil__decouvrir { margin-top: 6px; }
.accueil .titre-display { font-size: clamp(60px, 7.8vw, 112px); }
.accueil__plateformes .ligne-lien { min-height: 52px; }

@media (min-width: 1024px) {
  .accueil__marque { display: none; }
  .accueil__grille { flex: 1; }
}
@media (max-width: 719px) {
  .accueil__accroche { font-size: 17px; }
  .accueil__decouvrir { align-self: stretch; }
}

/* =========================== 2. MES LIVES =================================== */
/* Lecteur Twitch en façade (mosaïque des dernières jaquettes Steam), horaires du
   planning Twitch à droite, et les six derniers jeux joués en jaquettes 2:3,
   chacune renvoyant vers Instant Gaming avec le lien affilié. */
.lives__grille { display: flex; flex-direction: column; gap: var(--e4); }
.lives__twitch { min-height: 220px; }
.lives__twitch .cadre__image { aspect-ratio: 16 / 9; }
.lives__mosaique {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; overflow: hidden; position: relative;
}
.lives__mosaique img { width: 100%; height: 100%; object-fit: cover; opacity: .55; filter: saturate(.85); display: block; }
.lives__mosaique::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(27, 21, 50, .55), rgba(27, 21, 50, .25) 40%, rgba(27, 21, 50, .75)); }
.facade__lecture {
  position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; z-index: 1;
  border-radius: 50%; border: 2px solid var(--sur-photo); color: var(--sur-photo);
  background: rgba(15, 14, 13, .5); display: flex; align-items: center; justify-content: center;
  transition: transform .4s cubic-bezier(.2, 1.4, .4, 1), background var(--d-micro) var(--courbe), border-color var(--d-micro) var(--courbe);
}
.facade__lecture:hover { transform: scale(1.08); background: var(--sceau); border-color: var(--sceau); }
.facade__lecture svg { width: 26px; height: 26px; margin-left: 4px; }
.lives__twitch .cadre__coin { z-index: 1; }
.lives__twitch iframe { position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); border: 0; border-radius: var(--r-m); z-index: 2; }
.lives__twitch[data-charge] .cadre__image, .lives__twitch[data-charge] .facade__lecture, .lives__twitch[data-charge] .cadre__coin { display: none; }
.lives__horaires { display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.lives__horaires .mini { margin-top: 14px; color: var(--etiquette); }
.lives__horaires-vide { display: flex; flex-direction: column; gap: 6px; padding-top: 6px; }
.lives__horaires-vide strong { font-family: var(--police-titre); font-weight: 700; font-size: var(--t-h3); line-height: 1.25; color: var(--texte); text-wrap: balance; }
.lives__horaires-vide span { font-size: var(--t-petit); color: var(--texte-2); }
.lives__horaires-note[hidden] { display: none; }
.horaire__titre { color: var(--texte-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lives__jeux { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.lives__liste-jeux { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; flex: 1; min-height: 0; }
.jeu {
  position: relative; display: block; overflow: hidden; min-width: 0; min-height: 0;
  border-radius: var(--r-m); border: 1px solid var(--tuile-bordure); background: var(--reserve); color: var(--sur-photo);
  aspect-ratio: 2 / 3;
  transition: transform var(--d-micro) var(--courbe), border-color var(--d-micro) var(--courbe), box-shadow var(--d-micro) var(--courbe);
}
a.jeu:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: 0 18px 40px rgba(10, 6, 20, .45); }
.jeu__visuel { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.jeu__legende {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 44px 12px 12px; display: flex; flex-direction: column; gap: 8px;
  background: var(--voile-photo);
}
.jeu__nom { font-family: var(--police-titre); font-size: 17px; font-weight: 700; line-height: 1.2; color: var(--sur-photo); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-shadow: 0 2px 12px rgba(10, 6, 20, .6); }
.jeu__pilules { display: flex; flex-wrap: wrap; gap: 5px; }
.pilule {
  display: inline-flex; align-items: center; min-height: 22px; padding: 0 9px; border-radius: var(--r-rond);
  background: rgba(242, 238, 247, .14); border: 1px solid rgba(242, 238, 247, .22); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-family: var(--police-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--sur-photo); white-space: nowrap;
}
.jeu__note { font-family: var(--police-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--sur-photo-2); }
.jeu__ig {
  position: absolute; right: 8px; top: 8px; padding: 4px 8px; border-radius: var(--r-rond);
  background: rgba(15, 14, 13, .55); font-family: var(--police-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--sur-photo);
  opacity: 0; transform: translateY(-4px); transition: opacity var(--d-micro) var(--courbe), transform var(--d-micro) var(--courbe);
}
a.jeu:hover .jeu__ig, a.jeu:focus-visible .jeu__ig { opacity: 1; transform: none; }
.lives__videos { display: flex; flex-direction: column; gap: 12px; }
.lives__videos[hidden] { display: none; }
.lives__liste-videos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.video { min-height: 0; }
.video .cadre__image { aspect-ratio: 16 / 9; }
.video iframe { position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); border: 0; border-radius: var(--r-m); }
.video[data-charge] .cadre__image, .video[data-charge] .facade__lecture, .video[data-charge] .cadre__legende { display: none; }

@media (min-width: 1024px) {
  /* Lecteur à gauche, jeux à droite (3 × 2), horaires en bandeau dessous */
  .lives__grille {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr) minmax(0, .36fr);
    grid-auto-rows: minmax(0, auto); gap: var(--e4);
  }
  .lives__twitch { grid-column: 1 / 8; grid-row: 1; min-height: 0; }
  .lives__twitch .cadre__image { aspect-ratio: auto; height: 100%; }
  .lives__jeux { grid-column: 8 / 13; grid-row: 1; min-height: 0; }
  .lives__liste-jeux { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .jeu { aspect-ratio: auto; height: 100%; }
  .lives__horaires { grid-column: 1 / 13; grid-row: 2; flex-direction: column; justify-content: center; gap: 12px; padding: 18px 28px; min-height: 0; }
  .lives__liste-horaires { display: flex; flex: 1; min-width: 0; gap: var(--e5); align-items: center; }
  .lives__liste-horaires .horaire { padding: 0 0 0 var(--e4); border-bottom: 0; flex: 1; min-width: 0; flex-direction: column; align-items: flex-start; gap: 4px; border-left: 1px solid var(--filet-faible); }
  .lives__liste-horaires .horaire__jour { width: auto; font-size: 22px; }
  .lives__liste-horaires .horaire__heure { margin-left: 0; }
  .lives__horaires-vide { padding-top: 0; flex: 1; }
  .lives__horaires .mini { margin-top: 0; flex: none; max-width: 240px; text-align: right; }
  .lives__videos { grid-column: 1 / 13; }
}
@media (min-width: 720px) and (max-width: 1023px) {
  .lives__grille { display: grid; grid-template-columns: 1fr 260px; gap: var(--e4); }
  .lives__twitch { height: 320px; } .lives__twitch .cadre__image { aspect-ratio: auto; height: 100%; }
  .lives__horaires { padding: 22px; border-radius: var(--r-l); border: 1px solid var(--tuile-bordure); background: var(--tuile); }
  .lives__jeux, .lives__videos { grid-column: 1 / -1; }
  .lives__liste-jeux { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
  .jeu__nom { font-size: 14px; }
}
@media (max-width: 719px) {
  .lives__twitch .cadre__image { height: 190px; aspect-ratio: auto; }
  .lives__mosaique { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lives__mosaique img:nth-child(n+9) { display: none; }
  .facade__lecture { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
  .lives__mention-facade { display: none; }
  .lives__horaires { padding: 18px; border-radius: var(--r-l); border: 1px solid var(--tuile-bordure); background: var(--tuile); }
  .lives__liste-jeux { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .jeu__legende { padding: 24px 8px 8px; gap: 5px; }
  .jeu__nom { font-size: 12px; }
  .jeu__pilules .pilule:nth-child(2) { display: none; }
  .pilule { min-height: 18px; padding: 0 6px; font-size: 9px; }
  .envahisseur { width: 22px !important; }
  .lives__liste-videos { grid-template-columns: 1fr; }
}

/* Dernière carte : « + N autres » ouvre la bibliothèque. Même silhouette que les jaquettes :
   une mini-mosaïque des quatre jeux suivants, voilée, et le nombre par-dessus. */
.jeu--plus { display: block; width: 100%; color: var(--sur-photo); cursor: pointer; padding: 0; font: inherit; text-align: center; }
.jeu--plus:hover { border-color: var(--accent); transform: translateY(-4px); box-shadow: 0 18px 40px rgba(10, 6, 20, .45); }
.jeu__mini-mosaique { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.jeu__mini-mosaique img { width: 100%; height: 100%; object-fit: cover; opacity: .35; filter: saturate(.7) blur(1px); transition: opacity var(--d-micro) var(--courbe); }
.jeu--plus:hover .jeu__mini-mosaique img { opacity: .5; }
.jeu__mini-mosaique::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(27, 21, 50, .35), rgba(27, 21, 50, .8)); }
.jeu__plus-contenu { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 12px; }
.jeu__plus-nombre { font-family: var(--police-titre); font-weight: 800; font-size: clamp(32px, 3vw, 48px); line-height: 1; color: var(--sur-photo); text-shadow: 0 2px 16px rgba(10, 6, 20, .6); }
.jeu__plus-texte { font-family: var(--police-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--sur-photo-2); }
.jeu__plus-appel { margin-top: 10px; padding: 6px 10px; border-radius: var(--r-rond); border: 1px solid rgba(242, 238, 247, .3); color: var(--sur-photo); }

/* Planning vide : des envahisseurs pixelisés flottent dans le bloc (uniquement tant qu'il n'y a rien),
   et un point qui bat devant le message. Tout disparaît dès qu'un planning existe. */
.lives__horaires { position: relative; overflow: hidden; }
.attente { position: static; display: flex; align-items: center; justify-content: flex-start; }
.attente__ciel { position: absolute; inset: 44px 0 0 0; pointer-events: none; overflow: hidden; }   /* sous l'étiquette « Horaires du dojo » */
/* Les monstres se baladent de gauche à droite et reviennent, en douceur, avec un léger flottement.
   Chaque lutin a sa position de départ, son amplitude (--amp), sa durée et son décalage. */
.envahisseur { position: absolute; width: 34px; height: auto; fill: var(--accent); opacity: .38; will-change: transform; animation: balade var(--duree, 24s) ease-in-out infinite alternate var(--retard, 0s); }
.envahisseur--1  { top: 12%; left: 6%;  width: 36px; --amp: 22vw; --duree: 26s; }
.envahisseur--2  { top: 58%; left: 14%; width: 26px; --amp: 16vw; --duree: 31s; --retard: -8s; fill: var(--accent-2); }
.envahisseur--3  { top: 30%; left: 48%; width: 40px; --amp: 26vw; --duree: 34s; --retard: -20s; }
.envahisseur--4  { top: 72%; left: 60%; width: 30px; --amp: 18vw; --duree: 28s; --retard: -4s; fill: var(--texte); opacity: .22; }
.envahisseur--5  { top: 18%; left: 70%; width: 32px; --amp: 14vw; --duree: 23s; --retard: -15s; }
.envahisseur--6  { top: 46%; left: 24%; width: 28px; --amp: 24vw; --duree: 36s; --retard: -27s; fill: var(--accent-2); }
.envahisseur--7  { top: 8%;  left: 36%; width: 24px; --amp: 20vw; --duree: 29s; --retard: -11s; fill: var(--texte); opacity: .2; }
.envahisseur--8  { top: 66%; left: 82%; width: 34px; --amp: 10vw; --duree: 25s; --retard: -2s; }
.envahisseur--9  { top: 38%; left: 86%; width: 22px; --amp: 8vw;  --duree: 21s; --retard: -17s; fill: var(--accent-2); opacity: .3; }
.envahisseur--10 { top: 80%; left: 40%; width: 30px; --amp: 20vw; --duree: 33s; --retard: -30s; fill: var(--texte); opacity: .22; }
@keyframes balade {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(calc(var(--amp) * .25), -7px); }
  50%  { transform: translate(calc(var(--amp) * .5), 0); }
  75%  { transform: translate(calc(var(--amp) * .75), 7px); }
  100% { transform: translate(var(--amp), 0); }
}
.attente__texte { position: relative; display: flex; flex-direction: column; gap: 6px; margin-right: auto; }
.attente__point { display: inline-block; width: 10px; height: 10px; margin-right: 12px; border-radius: 50%; background: var(--accent-2); vertical-align: middle; box-shadow: 0 0 0 0 rgba(217, 70, 143, .6); animation: attente-bat 2.2s ease-out infinite; }
@keyframes attente-bat { 0% { box-shadow: 0 0 0 0 rgba(217, 70, 143, .6); } 70% { box-shadow: 0 0 0 12px rgba(217, 70, 143, 0); } 100% { box-shadow: 0 0 0 0 rgba(217, 70, 143, 0); } }
@media (prefers-reduced-motion: reduce) { .envahisseur, .attente__point { animation: none; } }

/* Fenêtres « Ma bibliothèque » et « Tout le setup » */
.fenetre { border: 0; padding: 0; margin: 0; background: transparent; max-width: none; max-height: none; color: var(--texte); }
.fenetre[open] { position: fixed; inset: 0; width: auto; height: auto; display: flex; align-items: center; justify-content: center; }   /* panneau parfaitement centré */
.fenetre::backdrop { background: rgba(10, 6, 20, .72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.fenetre__panneau {
  box-sizing: border-box; width: min(1180px, calc(100vw - 48px)); height: min(820px, calc(100vh - 48px)); margin: 0;
  display: flex; flex-direction: column; gap: var(--e4); padding: var(--e5) var(--e6);
  border-radius: var(--r-xl); border: 1px solid var(--tuile-bordure); background: var(--fond-a); background-image: var(--fond);
  box-shadow: 0 40px 120px rgba(10, 6, 20, .6);
}
.fenetre[open] .fenetre__panneau { animation: fenetre-entree .45s var(--courbe-revele) both; }
@keyframes fenetre-entree { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
.fenetre__tete { display: flex; align-items: center; gap: var(--e4); flex-wrap: wrap; }
.fenetre__tete > div { display: flex; flex-direction: column; gap: 6px; margin-right: auto; }
.fenetre__compte { color: var(--etiquette); font-weight: 500; font-size: .7em; }
.fenetre__recherche { position: relative; display: inline-flex; align-items: center; }
.fenetre__recherche input {
  width: min(320px, 60vw); padding: 10px 40px 10px 14px; border-radius: var(--r-m); border: 1px solid var(--champ-bordure); background: var(--champ); color: var(--texte); font-size: 15px;
}
.fenetre__recherche input::-webkit-search-cancel-button, .fenetre__recherche input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }   /* on a notre propre croix */
.fenetre__recherche input:focus-visible { outline: none; border-color: var(--accent); }
.recherche__effacer { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 50%; color: var(--etiquette); font-size: 12px; display: flex; align-items: center; justify-content: center; }
.recherche__effacer:hover, .recherche__effacer:focus-visible { color: var(--texte); background: var(--tuile-survol); }
.fenetre__fermer { width: var(--cible); height: var(--cible); border-radius: var(--r-m); border: 1px solid var(--bouton-contour); color: var(--texte); font-size: 16px; display: flex; align-items: center; justify-content: center; }
.fenetre__fermer:hover { border-color: var(--accent); background: var(--tuile-survol); }
.fenetre__mention { letter-spacing: .08em; text-transform: none; }
.fenetre__grille {
  flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; padding: 4px 4px 12px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; align-content: start;
}
.fenetre__grille .jeu { aspect-ratio: 2 / 3; height: auto; }
.fenetre__grille .jeu__nom { font-size: 13px; }
.fenetre__vide { color: var(--texte-2); }
.fenetre__grille--setup { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.fenetre__grille--setup .produit { height: 100%; }
.fenetre__grille--setup .produit__visuel { aspect-ratio: 4 / 3; }
.fenetre__grille--setup .produit__legende { align-items: center; text-align: center; padding: 10px 6px 4px; }
.fenetre__grille--setup .produit__legende .cadre__nom { font-size: 13px; min-height: 2.5em; }
@media (max-width: 719px) {
  .fenetre__panneau { width: calc(100vw - 16px); height: calc(100vh - 16px); margin: 0; padding: var(--e4); gap: var(--e3); }
  .fenetre__grille { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
  .fenetre__recherche { order: 3; width: 100%; } .fenetre__recherche input { width: 100%; }
  .fenetre__mention { display: none; }
}

/* Visionneuse : image en grand sur voile sombre, flèches rondes, légende + compteur en bas */
.visionneuse { border: 0; padding: 0; margin: 0; background: transparent; max-width: none; max-height: none; color: var(--sur-photo); }
.visionneuse[open] { position: fixed; inset: 0; width: auto; height: auto; display: flex; align-items: center; justify-content: center; }
.visionneuse::backdrop { background: rgba(10, 6, 20, .9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.visionneuse__scene { position: relative; box-sizing: border-box; margin: 0; width: 100vw; height: 100vh; padding: 72px 90px 84px; display: flex; align-items: center; justify-content: center; }
.visionneuse__image { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: var(--r-l); border: 1px solid rgba(242, 238, 247, .18); box-shadow: 0 40px 120px rgba(10, 6, 20, .7); background: var(--reserve); }
.visionneuse[open] .visionneuse__image { animation: fenetre-entree .35s var(--courbe-revele) both; }
.visionneuse__bouton { position: absolute; z-index: 1; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(242, 238, 247, .25); background: rgba(27, 21, 50, .6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--sur-photo); font-family: var(--police-mono); font-size: 18px; display: flex; align-items: center; justify-content: center; transition: border-color var(--d-micro) var(--courbe), background var(--d-micro) var(--courbe); }
.visionneuse__bouton:hover, .visionneuse__bouton:focus-visible { border-color: var(--accent-2); background: rgba(27, 21, 50, .85); outline: none; }
.visionneuse__fermer { top: 18px; right: 18px; }
.visionneuse__prec { left: 20px; top: 50%; transform: translateY(-50%); }
.visionneuse__suiv { right: 20px; top: 50%; transform: translateY(-50%); }
.visionneuse__legende { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; gap: 14px; align-items: center; white-space: nowrap; font-family: var(--police-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; background: rgba(27, 21, 50, .62); padding: 8px 14px; border-radius: var(--r-rond); border: 1px solid rgba(242, 238, 247, .18); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.visionneuse__compteur { color: var(--sur-photo-2); }
.scene__bouton { display: block; width: 100%; padding: 0; border-radius: var(--r-m); overflow: hidden; cursor: zoom-in; }
.scene--verticale .scene__bouton { height: 100%; }
.scene__bouton:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
@media (max-width: 719px) {
  .visionneuse__scene { padding: 64px 12px 96px; }
  .visionneuse__prec { left: 14px; top: auto; bottom: 16px; transform: none; }
  .visionneuse__suiv { right: 14px; top: auto; bottom: 16px; transform: none; }
  .visionneuse__legende { bottom: 24px; max-width: calc(100vw - 150px); white-space: normal; text-align: center; }
}

/* =========================== 3. COMMUNAUTÉ ================================== */
/* À la Apple : la carte du serveur au centre, quatre cartes « scène » autour, parfaitement symétriques.
   Chaque scène = dégradé de la palette + pictogramme vectoriel, remplacée par une capture dès qu'elle existe. */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips[hidden] { display: none; }
.chip { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: var(--r-rond); border: 1px solid var(--tuile-bordure); background: var(--tuile); font-size: 12px; color: var(--texte-2); white-space: nowrap; }
.tuile { position: relative; overflow: hidden; }

.communaute__grille { display: flex; flex-direction: column; gap: var(--e4); }
.communaute__serveur { position: relative; overflow: hidden; gap: 14px; padding: 28px; min-height: 320px; align-items: center; text-align: center; }
.communaute__ours { display: none; }
.communaute__serveur-tete { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.communaute__serveur-tete > div { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.communaute__icone { width: 88px; height: 88px; border-radius: 26px; flex: none; box-shadow: 0 16px 40px rgba(10, 6, 20, .45); background: var(--tuile); }
.communaute__nom { font-family: var(--police-titre); font-weight: 800; font-size: clamp(36px, 3.4vw, 52px); line-height: .95; }
.communaute__serveur p { position: relative; font-size: 15px; line-height: 1.6; max-width: 380px; color: var(--texte-2); text-wrap: balance; }
.communaute__badges { position: relative; justify-content: center; }
.communaute__avatars { position: relative; display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; }
.avatar { position: relative; width: 34px; height: 34px; border-radius: 50%; overflow: hidden; background: var(--tuile); border: 1px solid var(--tuile-bordure); }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar::after { content: ""; position: absolute; right: 1px; bottom: 1px; width: 9px; height: 9px; border-radius: 50%; background: var(--en-ligne); border: 2px solid var(--fond-a); }
.avatar--idle::after { background: #f0b232; } .avatar--dnd::after { background: #f23f43; }
.avatar--plus { display: flex; align-items: center; justify-content: center; font-family: var(--police-mono); font-size: 10px; color: var(--etiquette); }
.avatar--plus::after { display: none; }
.communaute__vocaux { position: relative; display: flex; flex-direction: column; gap: 4px; align-items: center; }
.vocal { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--texte-2); }
.vocal__nom { font-weight: 500; color: var(--texte); }
.communaute__evenement-ligne { position: relative; font-size: 14px; color: var(--texte-2); }
.communaute__evenement-ligne strong { color: var(--texte); }
.communaute__bas { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 10px; }
.communaute__chiffres { display: flex; gap: 22px; flex-wrap: wrap; justify-content: center; font-size: 14px; color: var(--texte-2); }
.communaute__chiffre { display: inline-flex; align-items: center; gap: 8px; }
.communaute__chiffre strong { font-family: var(--police-titre); font-size: 26px; font-weight: 700; color: var(--texte); font-variant-numeric: tabular-nums; }

.communaute__salons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
/* Salons : tuiles au fond standard du thème (pas de plaque violette qui resterait sombre en mode clair),
   seulement deux halos d'accent très légers + le pictogramme dessiné. Texte aux couleurs du thème. */
.salon { justify-content: flex-end; min-height: 190px; gap: 8px; padding: 20px; color: var(--texte); }
.salon > .etiquette { position: absolute; left: 20px; top: 18px; z-index: 1; color: var(--etiquette); }   /* suit le thème (plus de blanc sur photo) */
.salon__fond { position: absolute; inset: 0; z-index: 0; }
.salon__fond img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--courbe); }
.salon:hover .salon__fond img { transform: scale(1.04); }
.salon__fond--scene::before { content: ""; position: absolute; inset: 0; background: var(--scene); opacity: .9; }
:root[data-mode="clair"] .salon__fond--scene::before { opacity: .5; }
.salon__fond--bulles  { --scene: radial-gradient(70% 90% at 15% 10%, rgba(124, 77, 255, .28), transparent 60%), radial-gradient(60% 70% at 95% 100%, rgba(217, 70, 143, .16), transparent 60%); }
.salon__fond--epees   { --scene: radial-gradient(70% 90% at 90% 10%, rgba(217, 70, 143, .22), transparent 60%), radial-gradient(60% 70% at 5% 100%, rgba(124, 77, 255, .22), transparent 60%); }
.salon__fond--clip    { --scene: radial-gradient(70% 90% at 10% 100%, rgba(196, 181, 253, .2), transparent 60%), radial-gradient(60% 70% at 100% 0%, rgba(124, 77, 255, .26), transparent 60%); }
.salon__fond--manette { --scene: radial-gradient(70% 90% at 100% 90%, rgba(124, 77, 255, .26), transparent 60%), radial-gradient(60% 70% at 0% 0%, rgba(217, 70, 143, .14), transparent 60%); }
.salon__picto { position: absolute; right: 6%; top: 50%; width: 46%; max-width: 190px; height: auto; transform: translateY(-58%); color: var(--accent); opacity: .85; filter: drop-shadow(0 18px 30px rgba(10, 6, 20, .25)); transition: transform 1.2s var(--courbe); }
.salon:hover .salon__picto { transform: translateY(-58%) scale(1.04) rotate(-2deg); }
/* Voile de lisibilité : seulement sur un salon illustré par une vraie image */
.salon__fond:not(.salon__fond--scene)::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(27, 21, 50, .2) 0%, rgba(27, 21, 50, 0) 40%, rgba(27, 21, 50, .82) 100%); }
.salon__fond:not(.salon__fond--scene) ~ .salon__texte, .salon__fond:not(.salon__fond--scene) ~ .salon__texte p { color: var(--sur-photo); }
.salon__texte { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 6px; max-width: 70%; }
.salon .titre-tuile { color: var(--texte); }
.salon p { color: var(--texte-2); font-size: 13px; line-height: var(--il-petit); }

@media (min-width: 1024px) {
  .communaute__grille {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(0, auto); gap: 14px;
  }
  .communaute__salons { display: contents; }
  .communaute__salons > :nth-child(1) { grid-column: 1 / 5; grid-row: 1; }
  .communaute__salons > :nth-child(2) { grid-column: 9 / 13; grid-row: 1; }
  .communaute__salons > :nth-child(3) { grid-column: 1 / 5; grid-row: 2; }
  .communaute__salons > :nth-child(4) { grid-column: 9 / 13; grid-row: 2; }
  .communaute__serveur { grid-column: 5 / 9; grid-row: 1 / 3; min-height: 0; justify-content: center; padding: 28px 24px; }
  .salon { min-height: 0; }
  .salon__texte { max-width: 72%; }
}
@media (min-width: 720px) and (max-width: 1023px) {
  .communaute__grille { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e4); }
  .communaute__serveur { grid-column: 1 / -1; }
  .communaute__salons { grid-column: 1 / -1; gap: 12px; }
  .communaute__ours { width: 320px; height: 320px; }
}
@media (max-width: 719px) {
  .communaute__serveur { padding: 24px 18px; min-height: 0; }
  .communaute__icone { width: 64px; height: 64px; border-radius: 18px; }
  .communaute__nom { font-size: 38px; }
  .communaute__ours { width: 260px; height: 260px; }
  .communaute__salons { grid-template-columns: 1fr; }
  .salon { min-height: 160px; }
  .salon__texte { max-width: 100%; }
  .salon__picto { width: 30%; right: 4%; top: 36%; opacity: .5; }
  .salon p { display: none; }
}

/* =========================== 4. MON SETUP =================================== */
.setup__tete-droite { display: flex; align-items: center; gap: var(--e4); margin-left: auto; }
.setup__amazon { min-height: 40px; padding: 0 18px; }
.setup__amazon img { max-height: 24px; }
.setup__amazon[hidden] { display: none; }
/* La photo d'ensemble au centre, les composants autour : 2 colonnes à gauche, 2 à droite, 2 lignes */
.setup__bento { display: flex; flex-direction: column; gap: 12px; }
.setup__vue { margin: 0; }
.setup__vue .cadre__image { aspect-ratio: 16 / 9; }
.setup__vue .cadre__legende .numero { color: var(--sur-photo-2); }
.setup__grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.produit { min-width: 0; display: flex; flex-direction: column; color: var(--texte); }
.produit__visuel { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; border-radius: var(--r-m); overflow: hidden; aspect-ratio: 4 / 3; }   /* produits détourés avec contour blanc : pas de plaque, ils flottent sur la tuile */
.produit__visuel img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 10px 22px rgba(10, 6, 20, .45)); transition: transform .8s var(--courbe); }
a.produit:hover .produit__visuel img { transform: scale(1.04); }
.produit__legende { display: flex; flex-direction: column; gap: 3px; padding: 10px 6px 2px; }
.produit__legende .cadre__nom { color: var(--texte); font-size: 13px; line-height: 1.25; min-height: 2.5em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.produit__note { font-style: normal; font-size: 12px; color: var(--etiquette); }
/* Tuiles sans image : pilule du type en haut, nom en bas */
.produit--texte { justify-content: space-between; gap: 10px; padding: 16px 18px; min-height: 0; }
.produit__haut { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.produit__type { background: rgba(196, 181, 253, .12); border-color: rgba(196, 181, 253, .35); color: var(--accent); font-family: var(--police-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
:root[data-mode="clair"] .produit__type { background: rgba(90, 61, 216, .08); border-color: rgba(90, 61, 216, .3); }
.produit--texte .cadre__nom { color: var(--texte); font-size: 15px; line-height: 1.25; }
.setup__mention { color: var(--texte-2); font-family: var(--police-texte); font-size: 13px; letter-spacing: 0; max-width: 60ch; }
.setup__mention-legale { display: block; margin-top: 4px; font-family: var(--police-mono); font-size: 10px; letter-spacing: .06em; color: var(--etiquette); }
.produit[hidden] { display: none; }
.setup__pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e3); flex: none; }

@media (min-width: 1024px) {
  /* Bento inspiré des planches Apple (documentation/reference-bento-apple.avif) : une rangée de quatre cartes
     horizontales en haut, la photo d'ensemble 16:9 en grand au centre sur trois lignes, une carte haute et une
     petite de chaque côté. Libellés courts, centrés. */
  .setup__bento {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: minmax(104px, .8fr) repeat(3, minmax(0, 1fr)) minmax(104px, .8fr);
    gap: 12px; flex: 1; min-height: 0;
  }
  .setup__vue { grid-column: 3 / 11; grid-row: 2 / 5; min-height: 0; }
  /* Quatre cartes horizontales sous la photo, côtés : carte haute (lignes 2-4) + petite horizontale (ligne 5) */
  .setup__grille > :nth-child(9) { grid-column: 3 / 5; grid-row: 5; } .setup__grille > :nth-child(10) { grid-column: 5 / 7; grid-row: 5; }
  .setup__grille > :nth-child(11) { grid-column: 7 / 9; grid-row: 5; } .setup__grille > :nth-child(12) { grid-column: 9 / 11; grid-row: 5; }
  .setup__vue .cadre__image { aspect-ratio: auto; height: 100%; }
  .setup__grille { display: contents; }
  .setup__grille > :nth-child(n+13) { display: none; }   /* le bento montre 12 produits, le reste est dans la fenêtre « Tout le setup » */
  .setup__grille > :nth-child(1) { grid-column: 1 / 4; grid-row: 1; }
  .setup__grille > :nth-child(2) { grid-column: 4 / 7; grid-row: 1; }
  .setup__grille > :nth-child(3) { grid-column: 7 / 10; grid-row: 1; }
  .setup__grille > :nth-child(4) { grid-column: 10 / 13; grid-row: 1; }
  .setup__grille > :nth-child(5) { grid-column: 1 / 3; grid-row: 2 / 5; }
  .setup__grille > :nth-child(6) { grid-column: 1 / 3; grid-row: 5; }
  .setup__grille > :nth-child(7) { grid-column: 11 / 13; grid-row: 2 / 5; }
  .setup__grille > :nth-child(8) { grid-column: 11 / 13; grid-row: 5; }
  .produit { padding: 8px; }
  .produit__visuel { aspect-ratio: auto; }
  .cadre .produit__legende { align-items: center; text-align: center; padding: 8px 4px 2px; }
  .produit__legende .cadre__nom { font-size: 13px; line-height: 1.25; min-height: 0; -webkit-line-clamp: 2; }
  .numero__kanji { display: none; }
  /* Rangée du haut et petites cartes des côtés : photo carrée à gauche, nom à droite */
  .setup__grille > .cadre:nth-child(-n+4), .setup__grille > .cadre:nth-child(6), .setup__grille > .cadre:nth-child(8), .setup__grille > .cadre:nth-child(n+9) { flex-direction: row; align-items: center; gap: 10px; }
  .produit--texte { padding: 14px 16px; gap: 8px; }
  .produit--texte .cadre__nom { font-size: 14px; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .setup__grille > .produit--texte:nth-child(5) .cadre__nom, .setup__grille > .produit--texte:nth-child(7) .cadre__nom { font-size: 18px; }
  .setup__grille > .produit--texte:nth-child(6) .cadre__nom, .setup__grille > .produit--texte:nth-child(8) .cadre__nom { font-size: 13px; }
  .setup__grille > :nth-child(n+9) .numero, .setup__grille > :nth-child(6) .numero, .setup__grille > :nth-child(8) .numero { display: none; }
  .setup__grille > .produit--texte:nth-child(6) .numero, .setup__grille > .produit--texte:nth-child(8) .numero { display: none; }
  .setup__grille > :nth-child(-n+4) .produit__visuel, .setup__grille > :nth-child(6) .produit__visuel, .setup__grille > :nth-child(8) .produit__visuel, .setup__grille > :nth-child(n+9) .produit__visuel { flex: none; height: 100%; aspect-ratio: 1; }
  .setup__grille > :nth-child(6) .produit__visuel, .setup__grille > :nth-child(8) .produit__visuel, .setup__grille > :nth-child(n+9) .produit__visuel { height: 80%; }   /* petites cartes : image plus discrète, place au nom */
  .setup__grille > :nth-child(-n+4) .produit__legende, .setup__grille > :nth-child(6) .produit__legende, .setup__grille > :nth-child(8) .produit__legende, .setup__grille > :nth-child(n+9) .produit__legende { align-items: flex-start; text-align: left; padding: 0 4px 0 0; min-width: 0; }
  .setup__grille > :nth-child(-n+4) .produit__legende .cadre__nom { font-size: 14px; }
  .setup__grille > :nth-child(n+9) .produit__legende .cadre__nom { font-size: 12px; line-height: 1.2; -webkit-line-clamp: 3; }
  /* Petites cartes des côtés : étroites, nom seul sur deux lignes */
  .setup__grille > :nth-child(6) .produit__legende .cadre__nom, .setup__grille > :nth-child(8) .produit__legende .cadre__nom { font-size: 12px; line-height: 1.2; -webkit-line-clamp: 3; }
  .setup__grille > :nth-child(6) .numero, .setup__grille > :nth-child(8) .numero { display: none; }
  /* Cartes hautes des côtés : photo en haut, nom centré dessous */
  .setup__grille > :nth-child(5) .produit__legende .cadre__nom, .setup__grille > :nth-child(7) .produit__legende .cadre__nom { font-size: 15px; }
}
@media (min-width: 720px) and (max-width: 1023px) {
  .setup__grille { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
}
@media (max-width: 719px) {
  .produit__visuel { aspect-ratio: 1; }
  .setup__tete-droite { margin-left: 0; }
}

/* Kanji en filigrane dans une tuile : contour fin, jamais rempli */
.tuile__filigrane { position: absolute; right: -8px; bottom: -30px; font-size: 120px; font-weight: 800; line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--filigrane); pointer-events: none; z-index: 0; }
/* =========================== 5. PARCOURS ===================================== */
/* Variante C (bento à images nettes) : trois colonnes 25 / 37,5 / 37,5, chacune empile des tuiles.
   MODE83 = une tuile texte haute (chiffres + sigles des formations) ; WEBECO = capture du site, nette, au-dessus
   de la tuile texte ; Stream = mosaïque (scène de jeu + début en paysage, Twitch vertical sur toute la hauteur)
   au-dessus de la tuile texte. Les vignettes ouvrent la fenêtre « Mes scènes ». Frise des années au-dessus. */
.parcours__frise { position: relative; height: 56px; margin: 0 0 4px; }
.frise__an { position: absolute; left: var(--x); top: 0; transform: translateX(-50%); font-family: var(--police-mono); font-size: 10px; letter-spacing: .12em; color: var(--etiquette); }
.frise__an::after { content: ""; position: absolute; left: 50%; top: 16px; width: 1px; height: 36px; background: var(--filet-faible); }
.frise__an:first-child { transform: none; }
.frise__an:first-child::after { left: 0; }
.frise__barre { position: absolute; left: var(--x); width: var(--l); top: calc(20px + var(--rang) * 11px); height: 7px; border-radius: var(--r-rond); background: var(--accent); opacity: .5; }
.frise__barre--principal { opacity: .9; }
.frise__barre--nouveau { background: var(--accent-2); opacity: .9; }
.frise__barre span { position: absolute; opacity: 0; }

.parcours__blocs { display: flex; flex-direction: column; gap: 12px; }
.colonne { display: flex; flex-direction: column; gap: 12px; min-width: 0; min-height: 0; }
.bloc { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 10px; flex: 0 0 auto; padding: 20px 22px; }
.colonne > .bloc:only-child { flex: 1 1 auto; min-height: 0; }
/* Les tuiles image gardent leur format tant qu'il y a la place, puis se réduisent (recadrage) pour que la tuile texte reste entière */
.bloc__tete { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.bloc__periode { font-family: var(--police-mono); font-size: 11px; letter-spacing: .12em; color: var(--etiquette); white-space: nowrap; }
.bloc > p { font-size: 14px; max-width: 46ch; }
.bloc__chiffres { display: flex; gap: 24px; flex-wrap: wrap; padding: 4px 0 2px; }
.chiffre { display: flex; flex-direction: column; gap: 2px; }
.chiffre strong { font-family: var(--police-titre); font-weight: 800; font-size: clamp(28px, 2.6vw, 40px); line-height: 1; font-variant-numeric: tabular-nums; color: var(--texte); }
.chiffre span { font-family: var(--police-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--etiquette); }
.bloc__activites { display: flex; flex-direction: column; gap: 8px; }
.bloc__activite { display: flex; flex-direction: column; gap: 1px; font-size: 12px; line-height: 1.35; }
.bloc__activite strong { font-family: var(--police-titre); font-size: 15px; font-weight: 700; color: var(--texte); }
.bloc__activite span { color: var(--texte-2); }
.bloc__formations { gap: 5px; margin-top: 2px; }
.chip--mono { font-family: var(--police-mono); font-size: 10px; letter-spacing: .08em; min-height: 24px; padding: 0 8px; }
.bloc__pied { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; padding-top: 6px; }
.bloc__pied:empty { display: none; }
.bloc__scenes-bouton { font-family: var(--police-mono); font-size: var(--t-etiquette); letter-spacing: var(--esp-rail); text-transform: uppercase; color: var(--accent-2-texte); padding: 0; }
.bloc__scenes-bouton:hover { color: var(--texte); }
.bloc .tuile__filigrane { font-size: 150px; right: -4%; bottom: -10%; }
.bloc--nouveau { border-color: var(--partenaire-bordure); }

/* Tuiles image : la capture s'affiche entière et nette, légende en badge dans le coin */
.bloc__image { position: relative; display: block; padding: 0; overflow: hidden; aspect-ratio: 2 / 1; flex: 1 1 auto; min-height: 120px; background: var(--reserve); }
.bloc__image img, .mosaique__scene img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--courbe); }
.bloc__image:hover img, .mosaique__scene:hover img { transform: scale(1.03); }
.bloc__legende { position: absolute; left: 10px; bottom: 10px; z-index: 1; font-family: var(--police-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--sur-photo); background: rgba(27, 21, 50, .62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); padding: 5px 9px; border-radius: var(--r-rond); border: 1px solid rgba(242, 238, 247, .18); pointer-events: none; white-space: nowrap; }
.bloc__mosaique { display: grid; grid-template-columns: 1.58fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; aspect-ratio: 1.44; flex: 1 1 auto; min-height: 160px; }
.mosaique__scene { position: relative; overflow: hidden; border-radius: var(--r-l); border: 1px solid var(--tuile-bordure); background: var(--reserve); padding: 0; cursor: zoom-in; min-height: 0; transition: border-color var(--d-micro) var(--courbe); }
.mosaique__scene:hover, .mosaique__scene:focus-visible { border-color: var(--accent-2); }
.mosaique__scene--verticale { grid-column: 2; grid-row: 1 / 3; }
.mosaique__scene--verticale img { object-position: center top; }
.mosaique__scene .bloc__legende { left: 8px; bottom: 8px; font-size: 9px; padding: 4px 7px; }

.fenetre__grille--scenes { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); grid-auto-flow: dense; gap: 14px; }
.scene { display: flex; flex-direction: column; gap: 8px; }
.scene--verticale { grid-row: span 2; }
.scene__image { width: 100%; border-radius: var(--r-m); border: 1px solid var(--cadre-bordure); aspect-ratio: 16 / 9; object-fit: cover; }
.scene--verticale .scene__image { aspect-ratio: 9 / 16; height: 100%; }
.scene__legende { letter-spacing: .14em; }

@media (min-width: 1024px) {
  .parcours .titre-chapitre { font-size: clamp(32px, 3.2vw, 46px); white-space: nowrap; }
  .parcours .chapitre__note { max-width: 360px; }
  .parcours__blocs { display: grid; grid-template-columns: 2fr 3fr 3fr; gap: var(--e4); flex: 1; min-height: 0; }
  .colonne { gap: var(--e4); }
  .bloc--principal > .titre-tuile { font-size: clamp(26px, 2.2vw, 34px); }
  .bloc--principal .bloc__activite strong { font-size: 16px; }
}
@media (min-width: 720px) and (max-width: 1023px) {
  .parcours__blocs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .colonne:first-child { grid-column: 1 / -1; order: 1; }
  .colonne:first-child .bloc { min-height: 0; }
}
@media (max-width: 719px) {
  .parcours__frise { height: 64px; }
  .frise__an:nth-child(even) { opacity: 0; }
  .bloc { padding: 18px; }
  .colonne:first-child { order: 1; }
}

/* =========================== 6. ME SOUTENIR ================================= */
/* Maquette « variante 3 » (maquette_test/me-soutenir-variante3.html, 17/10). Desktop : colonne d'intro 440 px à gauche
   (accroche Mincho 44, texte, trois chiffres, mascotte + mention légale en pied), pile à droite : bande Instant Gaming
   (logo 150 · texte · carrousel 260), coupon Hostinger + carte Elementor côte à côte, bande Amazon, bande collab.
   Chaque tuile porte sa teinte de marque (--marque) : bordure, dégradé, bouton. */
.soutenir__corps { display: flex; flex-direction: column; gap: var(--e5); }
.soutenir__intro { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.soutenir__accroche { margin: 0; font-size: clamp(32px, 3vw, 44px); font-weight: 800; line-height: 1.05; color: var(--texte); }
.soutenir__texte { margin: 0; font-size: 16px; line-height: 1.65; color: var(--texte-2); max-width: 380px; }
.soutenir__chiffres { display: flex; flex-wrap: wrap; gap: 18px 36px; margin: 0; padding-top: 6px; }
.soutenir__chiffre { display: flex; flex-direction: column; gap: 4px; }
.soutenir__chiffre dt { font-size: 40px; font-weight: 800; line-height: 1; color: var(--texte); }
.soutenir__chiffre dd { margin: 0; font-size: 12px; line-height: 1.4; color: var(--etiquette); }
.soutenir__chiffre--accent dt { color: var(--accent); }
.soutenir__pied { margin-top: auto; display: flex; align-items: flex-end; gap: 16px; }
.soutenir__ours { width: 150px; height: 150px; object-fit: contain; flex: none; filter: var(--ours-ombre); }
.soutenir__mention { margin: 0 0 18px; font-family: var(--police-mono); font-size: 10px; letter-spacing: .06em; line-height: 1.6; color: var(--etiquette); }
.soutenir__pile { display: flex; flex-direction: column; gap: 14px; min-width: 0; min-height: 0; }
.soutenir__duo { display: grid; grid-template-columns: 1fr; gap: 14px; min-height: 0; }

.partenaire { position: relative; overflow: hidden; gap: 8px; padding: 20px 24px; min-width: 0; color: var(--texte); }
.partenaire--marque { border-color: color-mix(in srgb, var(--marque) 60%, transparent); background: linear-gradient(160deg, color-mix(in srgb, var(--marque) 34%, transparent), transparent 70%), var(--tuile); }
a.partenaire--marque:hover { background: linear-gradient(160deg, color-mix(in srgb, var(--marque) 42%, transparent), transparent 70%), var(--tuile-survol); color: var(--texte); }
:root[data-mode="clair"] .partenaire--marque { background: linear-gradient(160deg, color-mix(in srgb, var(--marque) 14%, transparent), transparent 70%), var(--tuile); }
:root[data-mode="clair"] a.partenaire--marque:hover { background: linear-gradient(160deg, color-mix(in srgb, var(--marque) 20%, transparent), transparent 70%), var(--tuile-survol); }
.partenaire__ligne { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.partenaire .logo { height: 44px; min-height: 0; padding: 0 14px; flex: none; }
.partenaire .logo img { max-height: 26px; }
.logo--blanche, :root[data-mode="clair"] .logo.logo--blanche:not(.logo--clair) { background: #ffffff; border-color: rgba(0, 0, 0, .06); }
.logo--marque, :root[data-mode="clair"] .logo.logo--marque:not(.logo--clair) { background: var(--marque); border-color: transparent; }
.partenaire__numero { min-width: 0; font-family: var(--police-mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: color-mix(in srgb, var(--marque, var(--accent)) 55%, var(--texte)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.partenaire .logo--nu { height: 44px; padding: 0; background: transparent; border-color: transparent; } .partenaire .logo--nu img { height: 44px; max-height: 44px; }
.partenaire__titre { font-family: var(--police-titre); font-weight: 800; font-size: 26px; line-height: 1.1; color: var(--texte); }
.partenaire__accent { color: var(--accent); }
.partenaire p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--texte-2); }
.partenaire__texte { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.partenaire__actions { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.bouton--marque { background: var(--marque, var(--bouton)); color: var(--marque-texte, #ffffff); border-color: transparent; min-height: 42px; padding: 0 20px; font-size: 14px; }
.bouton--marque:hover { background: color-mix(in srgb, var(--marque, var(--bouton)) 84%, #ffffff); color: var(--marque-texte, #ffffff); }
.partenaire .bouton { align-self: flex-start; }
.bouton--pointille { border-style: dashed; min-height: 40px; font-size: 14px; }
/* Bande Instant Gaming : logo · texte · cadre visuel */
.partenaire--bande { display: grid; grid-template-columns: 150px minmax(0, 1fr) 260px; align-items: center; gap: 22px; padding: 0 22px; background: linear-gradient(90deg, color-mix(in srgb, var(--marque) 30%, transparent), transparent 60%), var(--tuile); }
:root[data-mode="clair"] .partenaire--bande { background: linear-gradient(90deg, color-mix(in srgb, var(--marque) 14%, transparent), transparent 60%), var(--tuile); }
.partenaire--bande .logo { width: 150px; height: 56px; box-sizing: border-box; }
.partenaire--bande .logo img { max-height: 34px; }
.partenaire--bande .partenaire__texte { padding: 16px 0; }
.partenaire--bande .partenaire__titre { font-size: 22px; white-space: nowrap; }
.partenaire--bande .bouton { min-height: 40px; }
.partenaire__jeux { display: none; }   /* grille des promos Instant Gaming : desktop seulement (voir fin de fichier) */
.partenaire__cadre { position: relative; display: block; align-self: stretch; margin: 10px 0; border-radius: var(--r-m); overflow: hidden; border: 1px solid var(--tuile-bordure); background: #120d1f; min-height: 120px; }
.carrousel > .carrousel__visuel { position: absolute; inset: 0; margin: 0; width: 100%; height: 100%; opacity: 0; animation: carrousel calc(var(--n) * 6s) linear infinite both; animation-delay: calc(var(--i) * 6s); }
.carrousel__visuel img { width: 100%; height: 100%; object-fit: cover; object-position: 14% center; }
.carrousel__legende { position: absolute; left: 10px; bottom: 10px; max-width: calc(100% - 20px); display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 6px; background: var(--marque, var(--accent)); color: var(--marque-texte, #ffffff); font-family: var(--police-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes carrousel { 0% { opacity: 0; transform: scale(1.04); } 3% { opacity: 1; } 16% { opacity: 1; } 19% { opacity: 0; transform: scale(1); } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .carrousel > .carrousel__visuel { animation: none; } .carrousel > .carrousel__visuel:first-child { opacity: 1; } }
/* Coupon Hostinger : deux encoches latérales découpées au masque */
.partenaire--coupon { padding: 20px 28px; border-color: color-mix(in srgb, var(--marque) 85%, transparent); background: linear-gradient(160deg, color-mix(in srgb, var(--marque) 42%, transparent), transparent 70%), var(--tuile);
  -webkit-mask: radial-gradient(circle at 0 50%, #0000 17px, #000 18px), radial-gradient(circle at 100% 50%, #0000 17px, #000 18px); -webkit-mask-composite: source-in;
  mask: radial-gradient(circle at 0 50%, #0000 17px, #000 18px), radial-gradient(circle at 100% 50%, #0000 17px, #000 18px); mask-composite: intersect; }
:root[data-mode="clair"] .partenaire--coupon { background: linear-gradient(160deg, color-mix(in srgb, var(--marque) 16%, transparent), transparent 70%), var(--tuile); }
.partenaire--coupon .partenaire__accent { color: color-mix(in srgb, var(--marque) 35%, #ffffff); }
:root[data-mode="clair"] .partenaire--coupon .partenaire__accent { color: var(--marque); }
.partenaire--coupon .code { flex: none; gap: 6px; font-size: 15px; letter-spacing: .12em; padding: 4px 4px 4px 12px; white-space: nowrap; }
.partenaire--coupon .partenaire__actions .bouton { flex: 1 1 auto; padding: 0 14px; white-space: nowrap; }   /* passe sous le code plutôt que de se casser */
.code__copier--marque, .code__copier--marque:hover { background: var(--marque); color: #ffffff; border-color: transparent; min-height: 34px; }
/* Carte Elementor */
.partenaire--carte { padding: 20px 24px; }
.partenaire--carte .bouton { margin-top: auto; }
/* Bandes Amazon et collab : logo · texte · fin */
.partenaire--ligne, .partenaire--collab { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; align-items: center; gap: 22px; padding: 12px 22px; }
.partenaire--ligne .logo, .partenaire--collab .logo { width: 150px; box-sizing: border-box; }
.partenaire--ligne.partenaire--marque { background: linear-gradient(90deg, color-mix(in srgb, var(--marque-2, var(--marque)) 90%, transparent), transparent 60%), var(--tuile); border-color: color-mix(in srgb, var(--marque) 50%, transparent); }
:root[data-mode="clair"] .partenaire--ligne.partenaire--marque { background: linear-gradient(90deg, color-mix(in srgb, var(--marque) 14%, transparent), transparent 60%), var(--tuile); }
.partenaire--ligne .partenaire__texte, .partenaire--collab .partenaire__texte { gap: 3px; }
.partenaire--ligne .partenaire__titre, .partenaire--collab .partenaire__titre { font-size: 18px; line-height: 1.2; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.partenaire--ligne p { font-size: 12px; }
.partenaire__fin { display: flex; align-items: center; gap: 10px; }
.partenaire__vignettes { display: flex; gap: 6px; }
.partenaire__vignette { box-sizing: border-box; width: 40px; height: 40px; border-radius: 8px; padding: 4px; background: color-mix(in srgb, var(--texte) 8%, transparent); border: 1px solid var(--tuile-bordure); display: flex; align-items: center; justify-content: center; }
.partenaire__vignette img { max-width: 100%; max-height: 100%; object-fit: contain; }
.partenaire--ligne .bouton { min-height: 40px; }
.partenaire--collab { border-style: dashed; border-color: color-mix(in srgb, var(--texte) 26%, transparent); background: transparent; }
.partenaire--collab .partenaire__numero { color: var(--etiquette); }
.partenaire--collab .partenaire__titre { color: var(--texte-2); }
.logo--vide, :root[data-mode="clair"] .logo--vide { background: transparent; border: 1px dashed color-mix(in srgb, var(--texte) 30%, transparent); font-family: var(--police-mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--etiquette); }

@media (min-width: 1024px) {
  /* Hostinger / Elementor à leur taille naturelle (compacts) : c'est Instant Gaming qui prend la hauteur libre */
  .soutenir__pile > * { min-height: 0; }
  .soutenir__duo .partenaire { justify-content: center; }
  .soutenir__duo .partenaire p { display: none; }   /* rangée de 1/4 : logo, rubrique, titre, action */
  .soutenir__duo .partenaire { padding: 16px 20px; gap: 6px; }
  .soutenir__duo .partenaire--coupon { padding: 16px 28px; }
  .soutenir__duo .partenaire__titre { font-size: 19px; line-height: 1.2; }
  .soutenir__duo .partenaire p { font-size: 12px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .soutenir__duo .partenaire .logo { height: 36px; } .soutenir__duo .partenaire .logo img { max-height: 22px; }
  .soutenir__duo .partenaire .logo--nu, .soutenir__duo .partenaire .logo--nu img { height: 36px; max-height: 36px; }
  .soutenir__duo .partenaire__actions, .soutenir__duo .partenaire--carte .bouton { margin-top: 4px; }
  .soutenir__duo .bouton, .soutenir__duo .partenaire__actions .bouton { min-height: 36px; font-size: 13px; }
  .soutenir__duo .partenaire--coupon .code { font-size: 13px; } .soutenir__duo .code__copier { min-height: 30px; }
  .partenaire--bande .partenaire__titre { font-size: 24px; white-space: normal; }
  .partenaire--bande .partenaire__texte { min-width: 0; }
  /* Affiche entière en 2:1, largeur déduite de la hauteur de la bande (unités de conteneur), plafonnée à 45 % */
  .partenaire--bande .carrousel__visuel img { object-position: center; }
  .soutenir__duo .partenaire__actions { flex-wrap: nowrap; }
  .soutenir__duo .partenaire--coupon .partenaire__actions .bouton { padding: 0 12px; }
}
@media (min-width: 720px) and (max-width: 1023px) {
  .soutenir__duo { grid-template-columns: 1fr 1fr; }
  .soutenir__pied { margin-top: 0; }
}
@media (max-width: 1023px) {
  .partenaire--bande { grid-template-columns: 1fr; padding: 18px; gap: 14px; }
  .partenaire--bande .partenaire__texte { padding: 0; }
  .partenaire--bande .partenaire__titre { white-space: normal; }
  .partenaire__cadre { order: -1; margin: 0; aspect-ratio: 2 / 1; }
  .partenaire--ligne, .partenaire--collab { grid-template-columns: 1fr; gap: 12px; padding: 18px; }
  .soutenir__pied { margin-top: 0; }
}
@media (max-width: 719px) {
  .soutenir__chiffres { gap: 16px 24px; }
  .soutenir__chiffre dt { font-size: 32px; }
  .soutenir__ours { width: 96px; height: 96px; }
  .partenaire--coupon { padding: 20px 24px; }
  .partenaire__actions .bouton, .partenaire .bouton { align-self: stretch; }
  .partenaire__fin { flex-wrap: wrap; } .partenaire__fin .bouton { flex: 1; }
}

/* =========================== 7. ME CONTACTER ================================= */
/* Refonte du 17/10 : accueil (accroche, délai, trois canaux directs) · formulaire en
   « lettre » (liseré par avion, sceau 礼, mascotte qui dépasse, sujets en pastilles qui
   remplissent l'objet, compteur de caractères) · pied de site sur toute la largeur. */
.contact__corps { display: flex; flex-direction: column; gap: var(--e5); }
.contact__accueil { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.contact__accroche { margin: 0; font-size: clamp(32px, 3vw, 44px); font-weight: 800; line-height: 1.08; color: var(--texte); text-wrap: balance; }
.contact__accroche em { font-style: normal; color: var(--accent); }
.contact__texte { margin: 0; font-size: 16px; line-height: 1.65; color: var(--texte-2); max-width: 400px; }
.contact__delai {
  display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; margin: 0; padding: 7px 14px 7px 12px;
  border: 1px solid var(--filet); border-radius: 999px; font-family: var(--police-mono); font-size: var(--t-etiquette);
  letter-spacing: .14em; text-transform: uppercase; color: var(--etiquette);
}
.contact__pastille { width: 8px; height: 8px; border-radius: 50%; background: #3ddc97; box-shadow: 0 0 0 0 rgba(61, 220, 151, .5); animation: contact-pouls 2.4s ease-out infinite; }
@keyframes contact-pouls { 70% { box-shadow: 0 0 0 8px rgba(61, 220, 151, 0); } 100% { box-shadow: 0 0 0 0 rgba(61, 220, 151, 0); } }
@media (prefers-reduced-motion: reduce) { .contact__pastille { animation: none; } }

.contact__canaux { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.canal {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 12px 12px 12px 14px;
  border: 1px solid var(--tuile-bordure); border-radius: var(--r-m); background: var(--tuile);
  transition: border-color var(--d-micro) var(--courbe), background-color var(--d-micro) var(--courbe);
}
.canal:hover { border-color: var(--accent); background: var(--tuile-survol); }
.canal__icone { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.canal--discord .canal__icone { color: #fff; background: #5865f2; }
.canal__icone svg { width: 22px; height: 22px; }
.canal__texte { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.canal__valeur { font-size: 16px; color: var(--texte); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.canal__action {
  min-height: 34px; padding: 0 12px; display: inline-flex; align-items: center; border-radius: 8px; border: 1px solid var(--champ-bordure);
  background: transparent; color: var(--texte); font-family: var(--police-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
  transition: border-color var(--d-micro) var(--courbe), color var(--d-micro) var(--courbe);
}
.canal__action:hover { border-color: var(--accent); color: var(--accent); }
.canal__action[data-copie] { background: var(--accent); border-color: var(--accent); color: var(--sur-bouton); }

/* La lettre */
.contact__lettre {
  position: relative; display: flex; flex-direction: column; gap: 16px; padding: 30px 30px 24px; min-width: 0;
  border: 1px solid var(--cadre-bordure); border-radius: var(--r-l); background: var(--tuile);
  isolation: isolate;
}
.contact__lettre::before {   /* liseré « par avion » */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; border-radius: var(--r-l) var(--r-l) 0 0;
  background: repeating-linear-gradient(-45deg, var(--sceau) 0 14px, transparent 14px 22px, var(--accent-2) 22px 36px, transparent 36px 44px);
  opacity: .85;
}
.contact__mascotte { display: none; }   /* mascotte en grand à côté de la bulle : desktop seulement (voir fin de fichier) */
.contact__ours {
  position: absolute; z-index: -1; right: 96px; top: -42px; width: 92px; height: auto;
  clip-path: inset(0 0 calc(100% - 44px) 0); pointer-events: none;
}
.lettre__sceau { position: absolute; right: 22px; top: -18px; width: 52px; height: 52px; font-size: 22px; transform: rotate(-8deg); box-shadow: var(--sceau-ombre); }
.lettre__entete { display: flex; align-items: baseline; gap: 18px; padding-right: 150px; padding-bottom: 12px; border-bottom: 1px dashed var(--filet); }
.lettre__destinataire { font-family: var(--police-titre); font-size: 17px; color: var(--texte); }
.lettre__destinataire .etiquette { margin-right: 6px; }
.lettre__sujets { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.lettre__sujets legend { padding: 0; margin-bottom: 8px; }
.sujets { display: flex; flex-wrap: wrap; gap: 8px; }
.sujet {
  min-height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--champ-bordure); background: var(--champ);
  color: var(--texte-2); font: inherit; font-size: 13px; cursor: pointer;
  transition: border-color var(--d-micro) var(--courbe), background-color var(--d-micro) var(--courbe), color var(--d-micro) var(--courbe);
}
.sujet:hover { border-color: var(--accent); color: var(--texte); }
.sujet { display: inline-flex; align-items: center; position: relative; }
.sujet input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }   /* radio natif, invisible : la pastille fait office de case */
.sujet:has(input:checked) { background: var(--sceau); border-color: var(--sceau); color: var(--sur-sceau); }
.sujet:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.lettre__sujets[data-invalide] .sujet { border-color: var(--erreur); }
.lettre__obligatoire { color: var(--texte-3); }
.formulaire__champs { display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.formulaire__deux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.champ input::placeholder, .champ textarea::placeholder { color: var(--texte-3); opacity: .8; }
.champ--message label { display: flex; justify-content: space-between; gap: 12px; }
.champ__compteur { color: var(--texte-3); letter-spacing: .08em; }
.champ__compteur[data-plein] { color: var(--erreur); }
.formulaire__pied { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.formulaire__rgpd { margin: 0; max-width: 420px; font-size: 12px; line-height: 1.5; color: var(--etiquette); }
.formulaire__pied .bouton { flex: none; min-width: 150px; }
.formulaire__retour { margin: 0; font-size: var(--t-petit); color: var(--texte-2); }
.formulaire__retour[data-type="erreur"] { color: var(--erreur); }
.formulaire__retour:empty { display: none; }
.formulaire__merci { display: none; flex-direction: column; align-items: flex-start; gap: 14px; padding: 24px 0; }
.formulaire__merci p { margin: 0; color: var(--texte-2); max-width: 420px; }
.contact__lettre[data-etat="envoye"] .formulaire__champs, .contact__lettre[data-etat="envoye"] .formulaire__pied { display: none; }
.contact__lettre[data-etat="envoye"] .formulaire__merci { display: flex; }
.bouton[aria-busy="true"] { opacity: .6; pointer-events: none; }

/* Pied de site */
.contact__pied { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; padding-top: 18px; border-top: 1px solid var(--filet); }
.contact__reseaux { display: flex; gap: 8px; }
.reseau {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--filet); color: var(--etiquette);
  transition: color var(--d-micro) var(--courbe), border-color var(--d-micro) var(--courbe), transform var(--d-micro) var(--courbe);
}
.reseau svg { width: 18px; height: 18px; }
.reseau:hover { color: var(--texte); border-color: var(--accent); transform: translateY(-2px); }
.contact__legal { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.contact__legal a, .contact__copyright {
  font-family: var(--police-mono); font-size: var(--t-etiquette); letter-spacing: .12em; text-transform: uppercase; color: var(--etiquette);
  transition: color var(--d-micro) var(--courbe);
}
.contact__legal a:hover { color: var(--texte); }
.contact__copyright { margin-left: auto; color: var(--texte-3); }

@media (min-width: 1024px) {
  .contact__lettre { margin-top: 44px; }   /* place pour la mascotte et le sceau qui dépassent */
  .contact__lettre .formulaire__champs { flex: 1; }
  .contact__lettre .champ--message { flex: 1; min-height: 0; }
  .contact__lettre .champ--message textarea { flex: 1; min-height: 90px; resize: none; }
}
@media (min-width: 720px) and (max-width: 1023px) {
  .contact__lettre { margin-top: 44px; }
}
@media (max-width: 719px) {
  .contact__lettre { margin-top: 40px; padding: 26px 18px 20px; }
  .lettre__entete { padding-right: 0; flex-direction: column; gap: 4px; }
  .contact__ours { right: 78px; }
  .formulaire__deux { grid-template-columns: 1fr; }
  .formulaire__pied { flex-direction: column; align-items: stretch; }
  .contact__pied { flex-direction: column; align-items: flex-start; }
  .contact__copyright { margin-left: 0; }
}
@media (min-width: 1024px) and (max-height: 800px) {
  .contact__accroche { font-size: 32px; }
  .contact__accueil { gap: 14px; }
  .contact__texte { font-size: 14px; line-height: 1.5; }
  .canal { padding: 8px 10px; } .canal__icone { width: 38px; height: 38px; } .canal { grid-template-columns: 38px minmax(0, 1fr) auto; }
  .contact__lettre { margin-top: 44px; padding: 22px 24px 18px; gap: 10px; }
  .contact__lettre .formulaire__champs { gap: 10px; }
  .lettre__entete { padding-bottom: 8px; }
  .lettre__sujets legend { display: none; }
  .sujet { min-height: 30px; font-size: 12px; }
  .champ input, .champ textarea { padding: 9px 14px; }
  .contact__lettre .champ--message textarea { min-height: 60px; }
  .formulaire__rgpd { font-size: 11px; }
  .contact__pied { padding-top: 12px; }
  .reseau { width: 34px; height: 34px; }
}

/* ---- Écrans larges mais peu hauts (1280 × 720, 1366 × 768) : on resserre ------------- */
@media (min-width: 1024px) and (max-height: 800px) {
  .setup__grille > :nth-child(n+9) { display: none; }   /* écrans bas : pas de rangée sous la photo, elle garderait son format */
  .setup__grille > :nth-child(5), .setup__grille > :nth-child(7) { grid-row: 2 / 4; }
  .setup__grille > :nth-child(6), .setup__grille > :nth-child(8) { grid-row: 4; }
  .setup__bento { grid-template-rows: minmax(100px, .8fr) repeat(3, minmax(0, 1fr)); }
  .setup__vue { grid-row: 2 / 5; }
  .produit--texte { padding: 10px 14px; gap: 6px; }
  .produit--texte .cadre__nom { font-size: 13px; line-height: 1.2; }
  .setup__grille > .produit--texte:nth-child(5) .cadre__nom, .setup__grille > .produit--texte:nth-child(7) .cadre__nom { font-size: 15px; }
  .produit__type { min-height: 22px; font-size: 9px; }
  .chapitre { padding-top: var(--e5); padding-bottom: calc(var(--barre-h) + var(--barre-marge) + var(--e3)); gap: var(--e3); }
  .titre-chapitre { font-size: 36px; }
  .chapitre__note { font-size: 13px; }
  .chapitre__corps { gap: var(--e3); }
  .tuile { padding: 18px; }
  .bloc, .bloc--principal { padding: 14px 16px; gap: 6px; }
  .colonne { gap: 10px; }
  .bloc__mosaique { gap: 8px; }
  .chip--mono { min-height: 20px; font-size: 9px; padding: 0 6px; }
  .bloc__chiffres { gap: 16px; padding: 0; } .chiffre strong { font-size: 24px; }
  .bloc > p { font-size: 12px; }
  .bloc__activites { gap: 4px; }
  .bloc__activite { font-size: 11px; }
  .bloc__activite strong { font-size: 13px; }
  .bloc--principal > .titre-tuile { font-size: 24px; }
  .bloc__pied { padding-top: 2px; }
  .parcours__frise { display: none; }   /* écrans bas : la place va aux images, les périodes restent dans les tuiles */
  .soutenir__accroche { font-size: 32px; } .soutenir__intro { gap: 14px; } .soutenir__texte { font-size: 14px; line-height: 1.5; }
  .soutenir__chiffre dt { font-size: 30px; } .soutenir__ours { width: 104px; height: 104px; }
  .partenaire__titre { font-size: 20px; } .partenaire--bande .partenaire__titre { font-size: 19px; }
  .partenaire--bande .partenaire__texte { padding: 10px 0; gap: 4px; } .partenaire--bande p { display: none; }
  .soutenir__pile { gap: 10px; } .soutenir__duo { gap: 10px; }
  .soutenir__duo .partenaire__numero { display: none; } .soutenir__duo .partenaire { padding: 10px 18px; gap: 6px; } .soutenir__duo .partenaire--coupon { padding: 10px 26px; }
  .soutenir__duo .partenaire__titre { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .soutenir__duo .partenaire .logo, .soutenir__duo .partenaire .logo--nu img { height: 30px; max-height: 30px; }
  .partenaire { padding: 14px 18px; gap: 6px; } .partenaire--coupon { padding: 14px 24px; }
  .soutenir__duo .partenaire p { display: none; }   /* écrans bas : logo, titre et action suffisent */
  .soutenir__duo .partenaire__titre { font-size: 17px; }
  .soutenir__duo .partenaire--coupon .code { font-size: 12px; letter-spacing: .08em; padding: 3px 3px 3px 8px; } .soutenir__duo .code__copier { padding: 0 8px; font-size: 9px; }
  .partenaire p { font-size: 12px; line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .partenaire--ligne, .partenaire--collab { padding: 8px 18px; } .partenaire--ligne .partenaire__titre, .partenaire--collab .partenaire__titre { font-size: 16px; }
  .partenaire .logo { height: 38px; } .partenaire--bande .logo { height: 48px; }
  .bouton--marque, .partenaire .bouton { min-height: 36px; }
  .partenaire--ligne, .partenaire--collab { grid-template-columns: 120px minmax(0, 1fr) auto; gap: 16px; }
  .partenaire--ligne .logo, .partenaire--collab .logo { width: 120px; height: 34px; } .partenaire--ligne .logo img { max-height: 20px; }
  .partenaire__vignettes { display: none; }
  .partenaire--ligne .partenaire__titre, .partenaire--collab .partenaire__titre { -webkit-line-clamp: 1; }
  .partenaire--coupon .code { font-size: 13px; } .partenaire .logo--nu, .partenaire .logo--nu img { height: 36px; max-height: 36px; }
  .partenaire--grande .partenaire__nom { font-size: 30px; }
  .champ input, .champ textarea { padding: 10px 14px; }
  .champ textarea { min-height: 80px; }
  .accueil__plateformes .ligne-lien { min-height: 46px; font-size: 16px; }
  .accueil .titre-display { font-size: clamp(60px, 12vh, 112px); }
  .accueil__grille { gap: 14px; } .accueil__texte { gap: 14px; }
  .lives__grille, .communaute__grille, .soutenir__grille, .parcours__activites, .setup__grille { gap: 12px; }
}

/* ---- Soutenir : quatre rangées égales (17/10) — règles finales, après les blocs génériques ------------- */
@media (min-width: 1024px) {
  .soutenir__duo .partenaire p { display: none; }
  .partenaire--ligne .bouton, .partenaire--collab .bouton, .partenaire--ligne .partenaire__fin { align-self: center; }
  .partenaire--ligne .partenaire__titre, .partenaire--collab .partenaire__titre { -webkit-line-clamp: 1; }
  .partenaire--bande .partenaire__texte { justify-content: center; }
  .partenaire--bande p { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}
@media (min-width: 1024px) and (max-height: 800px) {
  .partenaire--bande { padding-top: 0; padding-bottom: 0; }
  .partenaire--bande .partenaire__numero, .partenaire--bande p { display: none; }
  .partenaire--bande .partenaire__titre { font-size: 20px; }
  .partenaire--bande .partenaire__texte { gap: 8px; padding: 0; }
  .partenaire--bande .logo { width: 130px; height: 44px; }
  .partenaire--bande { grid-template-columns: 130px minmax(0, 1fr) auto; gap: 18px; }
  .soutenir__duo .partenaire__titre { font-size: 16px; white-space: normal; overflow: visible; }
}
/* ---- Soutenir 40/60 (17/10) : pile plus étroite, bande IG et duo compactés ---- */
@media (min-width: 1024px) {
  .partenaire--bande { grid-template-columns: 130px minmax(0, 1fr) auto; gap: 18px; }
  .partenaire--bande .logo { width: 130px; height: 48px; }
  .partenaire--bande p { display: none; }
  .partenaire--bande .partenaire__titre { font-size: 22px; }
  .partenaire--bande .partenaire__texte { gap: 8px; padding: 0; }
  .partenaire--bande .partenaire__cadre { width: min(calc((100cqh - 20px) * 2), 40cqw); }
  .soutenir__duo .partenaire__numero { display: none; }
  .soutenir__duo .partenaire__titre { font-size: 17px; }
  .soutenir__duo .partenaire .logo, .soutenir__duo .partenaire .logo--nu, .soutenir__duo .partenaire .logo--nu img { height: 30px; max-height: 30px; }
}

/* =========================== AJUSTEMENTS RESPONSIVE (20/10) ======================
   Corrections relevées en captures à 360, 390, 768, 1024 × 768 et 1280 × 600. */

/* Planning vide : les envahisseurs passent derrière le message, jamais dessus */
.attente__texte { z-index: 1; }

/* Tablette 720–1023 */
@media (min-width: 720px) and (max-width: 1023px) {
  .setup__tete-droite { margin-left: 0; }
  .lives__liste-jeux { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }   /* 6 colonnes : pilules coupées */
  .jeu__nom { font-size: 16px; }
  .lives__mention-facade { display: none; }   /* chevauchait le sceau du lecteur */
}

/* Desktop étroit 1024–1279 (parcours horizontal, chaque chapitre tient dans l'écran) */
@media (min-width: 1024px) and (max-width: 1279px) {
  .lives__mention-facade { display: none; }
  /* Communauté : le pictogramme passe en haut à droite, plus discret, au lieu de couvrir le texte */
  .salon__picto, .salon:hover .salon__picto { width: 30%; max-width: 110px; top: 16px; right: 16px; transform: none; opacity: .55; }
  .salon__texte { max-width: 100%; }
  /* Setup : petites cartes des côtés trop étroites pour image + nom côte à côte → image au-dessus, nom dessous */
  .setup__grille > .cadre:nth-child(6), .setup__grille > .cadre:nth-child(8) { flex-direction: column; align-items: stretch; gap: 4px; }
  .setup__grille > :nth-child(6) .produit__visuel, .setup__grille > :nth-child(8) .produit__visuel { flex: 1 1 auto; height: auto; min-height: 0; aspect-ratio: auto; }
  .setup__grille > :nth-child(6) .produit__legende, .setup__grille > :nth-child(8) .produit__legende { align-items: center; text-align: center; padding: 0; }
  .setup__grille > :nth-child(6) .produit__legende .cadre__nom, .setup__grille > :nth-child(8) .produit__legende .cadre__nom { font-size: 11px; -webkit-line-clamp: 1; }
}

/* Écrans bas en horizontal (≤ 720 px de haut) : l'accueil débordait (statut et bouton coupés) */
@media (min-width: 1024px) and (max-height: 720px) {
  .accueil__grille { gap: 12px; }
  .accueil__texte { gap: 10px; }
  .accueil .titre-display { font-size: clamp(52px, 10vh, 96px); }
  .accueil__accroche { font-size: 16px; }
  .accueil__plateformes .ligne-lien { min-height: 38px; }
  .accueil__decouvrir { margin-top: 0; }
}

/* Petits téléphones (< 420 px) : jaquettes sur deux colonnes, les noms restent lisibles */
@media (max-width: 419px) {
  .lives__liste-jeux { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .jeu__nom { font-size: 14px; }
}

/* ============================================================================
   6. ME SOUTENIR · disposition desktop « Vitrine IG » (choisie par Ayoub le 20/10) :
   bandeau d'intro de A ; Instant Gaming en grand (8/12, deux rangées) avec ses six jeux en promo ;
   Hostinger puis Elementor empilés à droite ; Amazon sous Instant Gaming, collab à droite ; mention en pied.
   ========================================================================== */
@media (min-width: 1024px) {
  .soutenir .soutenir__corps { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto minmax(0, 1fr) minmax(0, 1fr) minmax(0, .8fr) auto; gap: 14px 18px; }   /* rangée du bas plus haute (demande du 20/10) */
  .soutenir .soutenir__intro, .soutenir .soutenir__pile, .soutenir .soutenir__duo { display: contents; }
  html.horizontal .soutenir .soutenir__duo > * {
    opacity: 0; transform: scale(.96); filter: blur(6px);
    transition: opacity var(--d-revele) ease var(--delai), transform calc(var(--d-revele) + 100ms) var(--courbe-revele) var(--delai), filter var(--d-revele) ease var(--delai);
    --delai: calc(var(--revele-depart) + var(--revele-pas) * 2);
  }
  html.horizontal .chapitre--courant.soutenir .soutenir__duo > * { opacity: 1; transform: none; filter: none; }

  /* Bandeau d'intro (comme A) */
  .soutenir .soutenir__accroche { grid-column: 1 / 5; grid-row: 1; align-self: center; font-size: clamp(28px, 2.6vw, 40px); }
  .soutenir .soutenir__texte { grid-column: 5 / 9; grid-row: 1; align-self: center; max-width: none; font-size: 14px; line-height: 1.6; }
  .soutenir .soutenir__chiffres { grid-column: 9 / 13; grid-row: 1; align-self: center; justify-content: flex-end; flex-wrap: nowrap; gap: 20px; padding: 0; }
  .soutenir .soutenir__chiffre dt { font-size: clamp(28px, 2.4vw, 34px); white-space: nowrap; }
  .soutenir .soutenir__pied { grid-column: 1 / 13; grid-row: 5; margin: 0; }
  .soutenir .soutenir__ours { display: none; }
  .soutenir .soutenir__mention { margin: 0; }

  /* Instant Gaming : en-tête (logo · rubrique, titre, texte · bouton), puis la grille de promos */
  .soutenir .partenaire--bande {
    grid-column: 1 / 9; grid-row: 2 / 4; container-type: normal;
    display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 16px 20px; align-items: center; padding: 20px 22px 22px;
    background: linear-gradient(160deg, color-mix(in srgb, var(--marque) 30%, transparent), transparent 65%), var(--tuile);
  }
  .soutenir .partenaire--bande .logo { grid-column: 1; grid-row: 1; width: 150px; }
  .soutenir .partenaire--bande .partenaire__texte { grid-column: 2; grid-row: 1; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px; row-gap: 4px; align-items: center; }
  .soutenir .partenaire--bande .partenaire__texte > * { grid-column: 1; }
  .soutenir .partenaire--bande .partenaire__titre { font-size: clamp(22px, 2vw, 28px); white-space: normal; }
  .soutenir .partenaire--bande .partenaire__texte p { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
  .soutenir .partenaire--bande .partenaire__texte .bouton { grid-column: 2; grid-row: 1 / 4; align-self: center; }
  .soutenir .partenaire--bande .partenaire__cadre { display: none; }
  /* Les affiches gardent leur format 2:1 (titre et prix sont imprimés dessus) : chaque case de la grille 3 × 2
     contient l'affiche entière, réduite pour tenir (jamais recadrée). */
  .soutenir .partenaire__jeux {
    grid-column: 1 / -1; grid-row: 2; align-self: stretch; min-height: 0;
    display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr));
  }
  .promo { min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: center; }
  .promo img {
    display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; aspect-ratio: 2 / 1;
    border-radius: var(--r-m); border: 1px solid var(--tuile-bordure); background: #120d1f;
    transition: transform .8s var(--courbe), border-color var(--d-micro) var(--courbe);
  }
  .promo:hover img { transform: scale(1.025); border-color: var(--marque); }   /* chaque affiche zoome seule, au survol */
  .promo__legende { display: none; }

  /* Colonne de droite : Hostinger puis Elementor, compactes et centrées */
  .soutenir .partenaire--coupon { grid-column: 9 / 13; grid-row: 2; }
  .soutenir .partenaire--carte { grid-column: 9 / 13; grid-row: 3; }
  .soutenir .soutenir__duo .partenaire { justify-content: center; gap: 8px; padding: 18px 24px; }
  .soutenir .soutenir__duo .partenaire--coupon { padding: 18px 30px; }
  .soutenir .soutenir__duo .partenaire__titre { font-size: 22px; line-height: 1.15; }
  .soutenir .soutenir__duo .partenaire p { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 12px; }
  .soutenir .soutenir__duo .partenaire__actions { flex-wrap: nowrap; margin-top: 6px; }
  .soutenir .partenaire--coupon .partenaire__actions .bouton { flex: 1 1 auto; padding: 0 12px; }
  .soutenir .soutenir__duo .partenaire--carte .bouton { margin-top: 6px; }

  /* Bas : Amazon sous Instant Gaming (vignettes gardées), collab fine à droite */
  .soutenir .partenaire--ligne { grid-column: 1 / 9; grid-row: 4; grid-template-columns: 140px minmax(0, 1fr) auto; gap: 18px; padding: 12px 20px; }
  .soutenir .partenaire--ligne .logo { width: 140px; }
  .soutenir .partenaire--collab { grid-column: 9 / 13; grid-row: 4; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; padding: 12px 20px; }
  .soutenir .partenaire--collab .logo--vide { display: none; }
  .soutenir .partenaire--collab .partenaire__titre { font-size: 15px; }
  .soutenir .partenaire--collab .bouton { min-height: 36px; padding: 0 14px; font-size: 13px; }
  /* Rangée du bas agrandie : Amazon plus présente (logo, titre, vignettes), collab en pile verticale avec son « logo à venir » */
  .soutenir .partenaire--ligne { grid-template-columns: 170px minmax(0, 1fr) auto; gap: 22px; padding: 16px 24px; }
  .soutenir .partenaire--ligne .logo { width: 170px; height: 56px; }
  .soutenir .partenaire--ligne .partenaire__titre { font-size: 22px; }
  .soutenir .partenaire--ligne p { font-size: 13px; }
  .soutenir .partenaire__vignette { width: 54px; height: 54px; border-radius: 10px; }
  .soutenir .partenaire--collab { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 10px; padding: 16px 22px; }
  .soutenir .partenaire--collab .partenaire__titre { font-size: 18px; -webkit-line-clamp: 2; }
  .soutenir .partenaire--collab .partenaire__texte { max-width: 100%; }
  .soutenir .soutenir__pile .partenaire--ligne .partenaire__titre { white-space: normal; font-size: 20px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  /* Écrans bas : la rangée du bas reprend un peu moins, Hostinger et Elementor sans description */
  @media (max-height: 800px) {
    .soutenir .soutenir__corps { grid-template-rows: auto minmax(0, 1fr) minmax(0, 1fr) minmax(0, .6fr) auto; }
    .soutenir .soutenir__duo .partenaire { padding-top: 12px; padding-bottom: 12px; gap: 6px; }
    .soutenir .soutenir__duo .partenaire p { display: none; }
    .soutenir .soutenir__duo .partenaire__titre { font-size: 20px; }
    .soutenir .soutenir__duo .partenaire .logo, .soutenir .soutenir__duo .partenaire .logo--nu, .soutenir .soutenir__duo .partenaire .logo--nu img { height: 32px; max-height: 32px; }
    .soutenir .partenaire--ligne, .soutenir .partenaire--collab { padding-top: 10px; padding-bottom: 10px; }
    .soutenir .partenaire--collab { gap: 6px; }
    .soutenir .partenaire--collab .partenaire__titre { font-size: 16px; }
    .soutenir .partenaire--collab .partenaire__numero { display: none; }
    .soutenir .partenaire--ligne p { display: none; }
    .soutenir .soutenir__pile .partenaire--ligne .partenaire__titre { font-size: 18px; }
  }
}

/* Desktop étroit 1024–1279 : colonne de droite élargie (le code et le bouton Hostinger tiennent côte à côte),
   chiffres de l'intro plus larges */
@media (min-width: 1024px) and (max-width: 1279px) {
  .soutenir .partenaire--bande, .soutenir .partenaire--ligne { grid-column: 1 / 8; }
  .soutenir .partenaire--coupon, .soutenir .partenaire--carte, .soutenir .partenaire--collab { grid-column: 8 / 13; }
  .soutenir .soutenir__texte { grid-column: 5 / 9; font-size: 13px; line-height: 1.5; }
  .soutenir .soutenir__chiffres { grid-column: 9 / 13; gap: 14px; }
  .soutenir .soutenir__chiffre dd { font-size: 11px; }
  .soutenir .soutenir__duo .partenaire--coupon { padding-left: 26px; padding-right: 26px; }
}

/* ============================================================================
   7. ME CONTACTER · disposition desktop « La bulle » (choisie par Ayoub le 20/10) : la mascotte en grand,
   l'accroche dans une bulle de BD, texte et délai à côté, canaux compacts dessous ; la lettre à droite.
   ========================================================================== */
@media (min-width: 1024px) {
  /* Colonne de gauche : bulle (accroche), mascotte + texte + délai, canaux ; la lettre à droite */
  .contact .contact__corps { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr) auto; gap: 18px 30px; }
  .contact .contact__accueil {
    grid-column: 1 / 6; grid-row: 1; min-height: 0;
    display: grid; grid-template-columns: 140px minmax(0, 1fr); grid-template-rows: auto auto auto auto; gap: 0 20px; align-content: center;
  }
  .contact .contact__accroche {
    grid-column: 1 / -1; grid-row: 1; position: relative; justify-self: start; margin-bottom: 26px;
    padding: 18px 24px; border-radius: var(--r-l); border: 1px solid var(--tuile-bordure); background: var(--tuile);
    font-size: clamp(26px, 2.3vw, 36px);
  }
  .contact .contact__accroche::after {   /* queue de la bulle, vers la mascotte */
    content: ""; position: absolute; left: 64px; bottom: -13px; width: 24px; height: 24px; transform: rotate(45deg);
    border-right: 1px solid var(--tuile-bordure); border-bottom: 1px solid var(--tuile-bordure);
    background: var(--fond-a); background: color-mix(in srgb, var(--tuile) 100%, var(--fond-a));
  }
  .contact .contact__mascotte { display: block; grid-column: 1; grid-row: 2 / 4; width: 140px; height: auto; align-self: start; filter: var(--ours-ombre); }
  .contact .contact__texte { grid-column: 2; grid-row: 2; align-self: end; font-size: 15px; }
  .contact .contact__delai { grid-column: 2; grid-row: 3; align-self: start; margin-top: 14px; }
  .contact .contact__canaux { grid-column: 1 / -1; grid-row: 4; margin-top: 16px; gap: 8px; }
  .contact .canal { padding: 8px 10px 8px 12px; grid-template-columns: 38px minmax(0, 1fr) auto; }
  .contact .canal__icone { width: 38px; height: 38px; }
  .contact .contact__lettre { grid-column: 6 / 13; grid-row: 1; }
  .contact .contact__ours { display: none; }   /* la mascotte est déjà en grand à gauche */
  .contact .contact__pied { grid-column: 1 / 13; grid-row: 2; }
}
@media (min-width: 1024px) and (max-height: 800px) {
  .contact .contact__accueil { grid-template-columns: 96px minmax(0, 1fr); }
  .contact .contact__mascotte { width: 96px; }
  .contact .canal { padding: 5px 8px 5px 10px; } .contact .canal__icone { width: 32px; height: 32px; } .contact .canal { grid-template-columns: 32px minmax(0, 1fr) auto; }
  .contact .canal__texte .etiquette { display: none; }
  .contact .contact__accroche { margin-bottom: 18px; padding: 12px 18px; font-size: 26px; }
  .contact .contact__texte { font-size: 13px; }
  .contact .contact__canaux { margin-top: 12px; gap: 8px; }
}