/* ========================================================================== STRAWBERRY CREW — Reproduction fidèle du site strawberrycrew.com Thème clair. Rouge #DB3535 · Vert #86D629 · Gris #3B3838 Polices : Poppins (nav/titres) · Exo 2 (hero) · Montserrat · Open Sans ========================================================================== */ :root { --rouge: #db3535; --rouge-charte: #dc3434; --vert: #86d629; --gris-fonce: #323131; --gris-texte: #3b3838; --gris-clair: #f3f3f3; --blanc: #ffffff; --header-h: 92px; /* Outils de la DA minimaliste : le filet remplace les ombres et les contours de cartes, la sourdine porte les métadonnées. */ --filet: rgba(0, 0, 0, .1); --sourdine: #8a8a8a; /* Neutres de prose et variantes d'accent : ils etaient ecrits en dur des dizaines de fois, et le mode sombre devait les rattraper un par un. Passes en tokens, ils basculent tout seuls (voir le bloc MODE SOMBRE). */ --corps: #6b6b6b; /* prose secondaire */ --corps-fort: #333333; /* prose appuyee */ --rouge-fonce: #c22b2b; /* survol des pleins rouges */ --rouge-doux: #fff0f0; /* survol des pilules rouges */ color-scheme: light; } /* Le toggle de thème pose data-theme="dark" sur (script inline dans le , avant le premier rendu → aucun flash). Le mode sombre est un thème COMPLET : voir le grand bloc « MODE SOMBRE » en fin de feuille. */ .theme-toggle { display: inline-grid; place-items: center; flex: none; width: 34px; height: 34px; padding: 0; border: 1px solid var(--filet); border-radius: 50%; background: none; color: var(--gris-texte); cursor: pointer; transition: color .2s ease, border-color .2s ease, background .2s ease; } .theme-toggle:hover { color: var(--rouge); border-color: var(--rouge); } .theme-toggle .th-i { width: 18px; height: 18px; } /* Clair : on montre la lune (cliquer → sombre). Sombre : le soleil. */ .th-sun { display: none; } :root[data-theme="dark"] .th-moon { display: none; } :root[data-theme="dark"] .th-sun { display: block; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Open Sans', sans-serif; color: var(--gris-texte); background: var(--blanc); /* clip et pas hidden : hidden ferait du body un conteneur de défilement, ce qui désamorce tous les position:sticky de la page (frise Histoire). */ overflow-x: clip; -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } a { text-decoration: none; color: inherit; } :focus-visible { outline: 3px solid var(--vert); outline-offset: 2px; } .container { width: min(1200px, 92%); margin-inline: auto; } .skip-link { position: absolute; left: -9999px; top: 8px; z-index: 999; background: var(--rouge); color: #fff; padding: 10px 18px; border-radius: 36px; font-family: 'Poppins', sans-serif; font-weight: 600; } .skip-link:focus { left: 12px; } /* ========================================================================== HEADER — barre pilule blanche, bordure rouge, arrondi 36px ========================================================================== */ .site-header { position: fixed; top: 18px; left: 0; right: 0; z-index: 200; display: flex; justify-content: center; pointer-events: none; } .header-pill { pointer-events: auto; position: relative; /* ancre le menu déroulant mobile sur la pilule, pas sur le header pleine largeur */ display: flex; align-items: center; gap: 22px; background: var(--blanc); border: 2px solid var(--rouge); border-radius: 36px; padding: 8px 22px; box-shadow: 0 6px 24px rgba(0, 0, 0, .07); max-width: 94vw; } .header-pill .logo img { width: 34px; height: 34px; } .nav-menu { display: flex; align-items: center; list-style: none; } .nav-menu > li { position: relative; } .nav-menu > li > a { display: block; padding: 0 15px; font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 500; color: #000; line-height: 30px; white-space: nowrap; transition: color .2s ease; } .nav-menu > li > a:hover, .nav-menu > li.current > a { color: var(--vert); } /* Sous-menu "Autre" */ .nav-menu .has-sub > a::after { content: '▾'; font-size: 10px; margin-left: 6px; color: var(--rouge); } .sub-menu { position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%); min-width: 220px; list-style: none; background: var(--blanc); border: 2px solid var(--rouge); border-radius: 36px; padding: 14px 10px; opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease; } .nav-menu .has-sub:hover .sub-menu, .nav-menu .has-sub:focus-within .sub-menu { opacity: 1; visibility: visible; } .sub-menu a { display: block; padding: 8px 18px; text-align: center; font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 500; color: var(--gris-texte); transition: color .2s ease; } .sub-menu a:hover { color: var(--vert); } /* Voter — la seule action du site qui fait vraiment venir des joueurs. Elle vit dans la pilule, en vert : le rouge est déjà pris par l'accent de marque, et le vert est le survol du menu — l'oeil le connaît déjà. Le nav-menu passe en burger sous 1024px, donc ce bouton reste visible quand le menu se replie : c'est voulu, il ne doit pas dépendre du burger. */ .nav-voter { flex: none; display: inline-flex; align-items: center; gap: 6px; font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 600; color: #4f7d18; border: 1.5px solid var(--vert); border-radius: 36px; padding: 5px 13px; white-space: nowrap; transition: background-color .2s ease, color .2s ease; } .nav-voter span { font-size: 11px; color: var(--vert); transition: color .2s ease; } .nav-voter:hover { background: var(--vert); color: #1d2b0a; } .nav-voter:hover span { color: #1d2b0a; } @media (max-width: 640px) { /* Sur les très petits écrans la pilule déborde : on garde l'étoile seule. */ .nav-voter { padding: 5px 9px; } .nav-voter span + * , .nav-voter { font-size: 0; } .nav-voter span { font-size: 13px; } } /* Bouton "Copier l'IP" — pilule FIXE en bas de l'écran, comme sur le site réel */ .ip-container { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 300; display: inline-block; font-family: 'Arial', sans-serif; } .ip-text { background-color: white; border: 2px solid var(--rouge-charte); border-radius: 36px; color: var(--rouge-charte); cursor: pointer; font-size: 14px; font-weight: bold; padding: 5px 15px; position: relative; transition: all .2s ease; display: inline-block; white-space: nowrap; } .ip-text:hover { background-color: var(--rouge-doux); } .ip-text:active { transform: translateY(1px); } .copy-feedback { position: absolute; top: -25px; left: 50%; transform: translateX(-50%); background-color: rgba(0, 0, 0, .7); color: white; padding: 3px 6px; border-radius: 3px; font-size: 11px; opacity: 0; transition: opacity .3s ease; white-space: nowrap; pointer-events: none; } .copy-feedback.show { opacity: 1; } /* Burger mobile */ .burger { display: none; background: none; border: 0; cursor: pointer; padding: 6px; margin-left: auto; } .burger span { display: block; width: 24px; height: 3px; margin: 4px 0; background: var(--gris-texte); border-radius: 2px; transition: background .2s ease; } .burger:hover span { background: var(--vert); } @media (max-width: 1024px) { .burger { display: block; margin-left: 0; } /* Groupe le toggle avec le burger, à droite (le burger perd son auto). */ .theme-toggle { margin-left: auto; } .header-pill { width: 92vw; justify-content: space-between; gap: 12px; } .nav-menu { /* left/right à -2px : la bordure du menu s'aligne pile sur celle de la pilule (bordure 2px) */ position: absolute; top: calc(100% + 12px); left: -2px; right: -2px; flex-direction: column; align-items: stretch; background: var(--blanc); border: 2px solid var(--rouge); border-radius: 24px; padding: 14px; display: none; } .nav-menu.open { display: flex; } .nav-menu > li > a { padding: 10px 16px; line-height: 1.6; } .sub-menu { position: static; transform: none; opacity: 1; visibility: visible; border: 0; border-radius: 0; padding: 0 0 0 14px; min-width: 0; } .sub-menu a { text-align: left; padding: 8px 16px; } } /* ========================================================================== HERO — 3 NIVEAUX D'IMMERSION (home uniquement) Remplace l'ancien duo « slider three.js plein écran + hero » : chaque niveau tient le slider et le message sur un seul écran. Un seul niveau est affiché à la fois, le visiteur choisit via la pilule « Immersion ». 1 · Pioche — le monde est sous la page, le curseur mine les blocs 2 · Cylindre — carrousel 3D courbé, successeur CSS du slider three.js 3 · Bandeau — les builds défilent derrière le message (« Fusion ») Le message (.content-wrapper) est identique aux 3 : seul le décor change. ========================================================================== */ /* Sélecteur composé obligatoire : .minecraft-hero (display:flex, height:75vh) est déclaré plus bas dans cette feuille et, à spécificité égale, gagnerait → les 3 heros s'afficheraient empilés en permanence. */ .minecraft-hero.hero-im { display: none; height: auto; min-height: 100vh; min-height: 100dvh; } .minecraft-hero.hero-im.on { display: flex; } @keyframes defile { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ---------- 1 · PIOCHE ---------- Une couche de blocs blancs recouvre un build ; ceux que le curseur approche s'effacent puis repoussent. Le trou est aligné sur la grille, donc blocky — c'est ça qui dit « Minecraft », pas un masque rond. */ .hero-pioche { cursor: none; } .hero-pioche .content-wrapper { cursor: auto; } .pioche-monde { position: absolute; inset: 0; z-index: 0; } .pioche-monde img { width: 100%; height: 100%; object-fit: cover; } /* Le monde reste en sourdine derrière le message et se donne franchement sur les bords : le titre reste lisible où qu'on creuse. */ .pioche-sourdine { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(52% 44% at 50% 46%, rgba(255, 255, 255, .88) 24%, rgba(255, 255, 255, .1) 100%); } .pioche-surface { position: absolute; inset: 0; z-index: 2; display: grid; grid-template-columns: repeat(var(--cols), 1fr); grid-template-rows: repeat(var(--rows), 1fr); } .pioche-surface i { background: var(--blanc); transition: opacity .55s ease; } .hero-pioche .grid-overlay { z-index: 3; } /* Le viseur de bloc du jeu : il se cale sur le bloc visé, il ne flotte pas. */ .pioche-bloc { position: fixed; top: 0; left: 0; z-index: 8; border: 2px solid rgba(41, 41, 41, .7); pointer-events: none; opacity: 0; transition: opacity .25s ease, border-color .2s ease; } .pioche-bloc.vu { opacity: 1; } .pioche-bloc.creuse { border-color: var(--rouge); } .pioche-aide { position: absolute; left: 50%; transform: translateX(-50%); bottom: 12vh; z-index: 10; font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: #b3aca4; pointer-events: none; } /* ---------- 2 · CYLINDRE ---------- 9 faces sur un cylindre en CSS pur : même rotation courbée que l'ancien slider three.js, sans WebGL ni librairie. Message et carrousel sont EMPILÉS DANS LE FLUX et centrés ensemble. L'ancienne version collait le message en haut et le carrousel en absolute tout en bas, avec des tailles en pixels fixes : sur un grand écran (2545px de large) le vide explosait entre les deux et le carrousel restait un petit objet perdu. Ici tout dérive de --r, donc tout grandit avec l'écran. */ .minecraft-hero.hero-cylindre { /* Borné en vw ET en vh : le carrousel doit remplir l'écran large sans jamais déborder en hauteur sur un écran court. */ --r: clamp(240px, min(30vw, 42vh), 640px); flex-direction: column; align-items: center; justify-content: center; gap: clamp(16px, 3vh, 46px); padding-top: var(--header-h); /* dégage la pilule flottante du header */ } .hero-cylindre .content-wrapper { padding-top: 0; z-index: 10; } .cylindre-scene { position: relative; width: 100%; height: calc(var(--r) * 0.8); display: flex; justify-content: center; align-items: center; /* Perspective proportionnelle au rayon : le grossissement des faces avant reste le même (~×1,4) quelle que soit la taille de l'écran. */ perspective: calc(var(--r) * 3.5); /* Le point de fuite tombe au centre de la scène, donc à la hauteur de l'anneau : on regarde le cylindre de face. Sans ça on le voit d'en haut et on aperçoit sa paroi du fond en plus de celle de devant — l'intérieur du tonneau. */ pointer-events: none; } .cylindre-anneau { position: relative; /* 9 faces sur un cercle : largeur = 2·r·tan(180°/9) ≈ 0,73·r. Au-delà, elles se chevauchent (c'était le cas avant : 280px pour un rayon 340). */ width: calc(var(--r) * 0.73); height: calc(var(--r) * 0.46); transform-style: preserve-3d; animation: cylindreTourne 60s linear infinite; pointer-events: auto; } .cylindre-anneau:hover { animation-play-state: paused; } @keyframes cylindreTourne { from { transform: rotateX(-7deg) rotateY(0deg); } to { transform: rotateX(-7deg) rotateY(-360deg); } } .cylindre-anneau figure { position: absolute; inset: 0; transform: rotateY(var(--a)) translateZ(var(--r)); border-radius: 14px; overflow: hidden; box-shadow: 0 16px 38px rgba(29, 22, 18, .2); background: #eee; } .cylindre-anneau img { width: 100%; height: 100%; object-fit: cover; } /* Ne fond plus que le léger débord des faces inclinées : le carrousel étant centré dans le flux, il ne descend plus jusqu'au bas du hero. */ .cylindre-brume { position: absolute; left: 0; right: 0; bottom: 0; height: 10vh; z-index: 6; background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .92)); pointer-events: none; } /* Pas d'indice « survole pour figer » ici : le bas de l'écran est occupé par le carrousel, le texte y était illisible. Le survol reste découvrable. */ /* ---------- 3 · BANDEAU (« Fusion ») ---------- Le bandeau d'images passe DERRIÈRE le message au lieu d'occuper son propre écran : slider + hero sur un seul écran. Les images sont dupliquées dans le HTML → translateX(-50%) boucle sans raccord. */ /* Ce padding pousse le message au-dessus du bandeau (le bloc est centré verticalement). À 34vh il remontait trop haut et le tag « Serveur Créatif » venait frôler la pilule du header. */ .hero-fusion .content-wrapper { padding-bottom: 28vh; z-index: 10; } .fusion-bande { position: absolute; left: -4%; right: -4%; bottom: -3%; height: 48vh; z-index: 3; overflow: hidden; transform: rotate(-2deg); -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%); } .fusion-piste { display: flex; align-items: flex-end; gap: 22px; width: max-content; height: 100%; padding-right: 22px; animation: defile 70s linear infinite; } .fusion-bande:hover .fusion-piste { animation-play-state: paused; } .fusion-piste img { height: 82%; width: auto; flex: none; border-radius: 14px; box-shadow: 0 18px 40px rgba(29, 22, 18, .16); } .fusion-voile { position: absolute; inset: 0; z-index: 4; pointer-events: none; background: linear-gradient(180deg, #fff 6%, rgba(255, 255, 255, .92) 30%, rgba(255, 255, 255, .55) 52%, rgba(255, 255, 255, .06) 78%, transparent 100%); } /* Le bandeau déborde volontairement sous le bas du hero. Sans ce fondu, les images étaient tranchées net pile à la jointure avec la section suivante : là elles se dissolvent dans le blanc, qui devient celui de la section. */ .hero-fusion::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 18vh; z-index: 5; pointer-events: none; background: linear-gradient(180deg, transparent, var(--blanc) 82%); } /* ========================================================================== PILULE « IMMERSION » — même langage que la pilule IP. Fermée, c'est un bouton ; au survol (ou au focus clavier, ou au clic sur tactile) elle s'ouvre vers la gauche sur le réglage. ========================================================================== */ .immersion { position: fixed; right: 16px; bottom: 16px; z-index: 300; display: flex; align-items: center; background: #fff; border: 2px solid var(--rouge-charte); border-radius: 36px; padding: 5px 15px; font-family: 'Poppins', sans-serif; transition: background .2s ease; } .immersion:hover { background: var(--rouge-doux); } .immersion-btn { background: none; border: 0; padding: 0; cursor: pointer; color: var(--rouge-charte); font-family: 'Arial', sans-serif; font-size: 14px; font-weight: bold; white-space: nowrap; } .immersion-reglage { display: flex; align-items: center; gap: 10px; max-width: 0; opacity: 0; margin-right: 0; overflow: hidden; transition: max-width .35s ease, opacity .25s ease, margin-right .35s ease; } .immersion:hover .immersion-reglage, .immersion:focus-within .immersion-reglage, .immersion.ouverte .immersion-reglage { max-width: 200px; opacity: 1; margin-right: 12px; } .immersion-nom { font-size: 12px; font-weight: 600; color: var(--gris-texte); min-width: 62px; /* figé : le nom change sans faire sauter la pilule */ } .immersion-range { -webkit-appearance: none; appearance: none; width: 84px; height: 18px; background: none; cursor: pointer; flex: none; } .immersion-range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--rouge-charte) var(--fill, 0%), #e6e4e2 var(--fill, 0%)); } .immersion-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; border: 0; width: 13px; height: 13px; margin-top: -4.5px; border-radius: 50%; background: var(--rouge-charte); } .immersion-range::-moz-range-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--rouge-charte) var(--fill, 0%), #e6e4e2 var(--fill, 0%)); } .immersion-range::-moz-range-thumb { border: 0; width: 13px; height: 13px; border-radius: 50%; background: var(--rouge-charte); } @media (max-width: 640px) { /* La pilule IP occupe le bas au centre : on empile l'immersion au-dessus. */ .immersion { right: 50%; transform: translateX(50%); bottom: 60px; } .pioche-aide { display: none; } .cylindre-anneau { --r: 300px; width: 230px; height: 150px; } } @media (prefers-reduced-motion: reduce) { .cylindre-anneau, .fusion-piste { animation: none; } .pioche-surface i { transition: none; } } /* Bouton rouge plein (VOIR PLUS) */ .btn-rouge { display: inline-block; background: var(--rouge); color: #fff; font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; padding: 12px 30px; border-radius: 36px; border: 0; cursor: pointer; transition: background .25s ease, transform .25s ease; } .btn-rouge:hover { background: #b82006; transform: translateY(-2px); color: #fff; } /* ========================================================================== HERO (repris à l'identique du site — police Exo 2, particules, grille) ========================================================================== */ .minecraft-hero { position: relative; height: 75vh; width: 100%; overflow: hidden; color: var(--corps-fort); display: flex; align-items: center; justify-content: center; background-color: #ffffff; font-family: 'Exo 2', sans-serif; } .particles-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; overflow: hidden; } .particle { position: absolute; border-radius: 50%; pointer-events: none; } .particle.red { background: rgba(219, 53, 53, .3); } .particle.green { background: rgba(134, 214, 41, .3); } .grid-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(rgba(219, 53, 53, .03) 1px, transparent 1px), linear-gradient(90deg, rgba(134, 214, 41, .03) 1px, transparent 1px); background-size: 40px 40px; z-index: 1; perspective: 1000px; transform-style: preserve-3d; animation: gridMovement 60s linear infinite; } @keyframes gridMovement { 0% { background-position: 0 0; } 100% { background-position: 40px 40px; } } .floating-elements { position: absolute; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; z-index: 2; } .floating-element { position: absolute; border-radius: 4px; box-shadow: 0 0 20px rgba(219, 53, 53, .2); } .floating-element.red { background: rgba(219, 53, 53, .08); border: 1px solid rgba(219, 53, 53, .2); } .floating-element.green { background: rgba(134, 214, 41, .08); border: 1px solid rgba(134, 214, 41, .2); } .content-wrapper { position: relative; width: 100%; max-width: 1200px; z-index: 10; display: flex; flex-direction: column; align-items: center; padding: 20px; } .brand-tag { background: rgba(219, 53, 53, .1); border: 1px solid rgba(219, 53, 53, .3); padding: 6px 16px; border-radius: 20px; font-size: 14px; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 30px; color: var(--rouge); display: flex; align-items: center; transform: translateY(20px); opacity: 0; animation: fadeInUp 1s ease forwards .2s; } .brand-tag::before { content: ''; display: inline-block; width: 8px; height: 8px; background-color: var(--rouge); border-radius: 50%; margin-right: 10px; box-shadow: 0 0 10px var(--rouge); } .main-heading { /* Fluide plutot que par paliers : 2.8rem a 360px, 5rem au-dela de 1200px. Supprime les anciennes ruptures 768px et 992px, qui n'existaient que pour redescendre cette taille. */ font-size: clamp(2.8rem, 1.75rem + 4.6vw, 5rem); font-weight: 700; line-height: 1.1; margin-bottom: 20px; text-align: center; background: linear-gradient(90deg, var(--rouge), var(--vert)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; transform: translateY(20px); opacity: 0; animation: fadeInUp 1s ease forwards .4s; } .subtitle { font-size: clamp(1.1rem, 1rem + .42vw, 1.3rem); line-height: 1.6; color: #555; max-width: 600px; text-align: center; margin-bottom: 40px; font-weight: 300; transform: translateY(20px); opacity: 0; animation: fadeInUp 1s ease forwards .6s; } @keyframes fadeInUp { to { transform: translateY(0); opacity: 1; } } .cta-button { position: relative; border: none; background: linear-gradient(90deg, var(--rouge), var(--vert)); color: white; font-family: 'Exo 2', sans-serif; font-size: 1rem; font-weight: 600; padding: 14px 36px; border-radius: 30px; cursor: pointer; overflow: hidden; transition: all .3s ease; box-shadow: 0 10px 25px rgba(219, 53, 53, .3); transform: translateY(20px); opacity: 0; animation: fadeInUp 1s ease forwards .8s; display: flex; align-items: center; justify-content: center; z-index: 1; } .cta-button::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .2), transparent); transition: all .6s ease; z-index: -1; } .cta-button:hover { transform: translateY(-3px); box-shadow: 0 15px 30px rgba(219, 53, 53, .4); } .cta-button:hover::before { left: 100%; } .cta-button span { margin-left: 10px; font-size: 1.4rem; transition: transform .3s ease; } .cta-button:hover span { transform: translateX(3px); } /* ========================================================================== SECTIONS GÉNÉRIQUES ========================================================================== */ .section { padding: 80px 0; background: var(--blanc); } .section--gris { background: var(--gris-clair); } .section-title { font-family: 'Poppins', sans-serif; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem); font-weight: 700; text-align: center; color: var(--gris-fonce); margin-bottom: 12px; } .section-sub { text-align: center; color: var(--corps); max-width: 640px; margin: 0 auto 48px; line-height: 1.7; } /* Titre de page (pages internes) */ .page-header { padding: calc(var(--header-h) + 60px) 0 40px; text-align: center; background: var(--blanc); } .page-header h1 { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: clamp(2rem, 1.5rem + 2.4vw, 3rem); background: linear-gradient(90deg, var(--rouge), var(--vert)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 14px; } .page-header p { color: var(--corps); max-width: 680px; margin: 0 auto; line-height: 1.7; } /* ========================================================================== COMPARATEURS AVANT/APRÈS (Strawberry Textures) ========================================================================== */ .comparaisons { display: grid; gap: 30px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .comparaison { position: relative; overflow: hidden; border-radius: 10px; box-shadow: 0 12px 30px rgba(0, 0, 0, .12); aspect-ratio: 16 / 10; user-select: none; } .comparaison img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; } .comparaison .apres { clip-path: inset(0 0 0 var(--pos, 50%)); } .comparaison .handle { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 3px; background: #fff; transform: translateX(-50%); pointer-events: none; box-shadow: 0 0 10px rgba(0, 0, 0, .3); } .comparaison .handle::after { content: '⟷'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 36px; height: 36px; border-radius: 50%; background: var(--rouge); color: #fff; display: grid; place-items: center; font-size: 14px; } .comparaison input[type="range"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; } .comparaison .etiq { position: absolute; bottom: 10px; z-index: 2; background: rgba(0, 0, 0, .6); color: #fff; font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 600; padding: 5px 10px; border-radius: 20px; pointer-events: none; } .comparaison .etiq-avant { left: 10px; } .comparaison .etiq-apres { right: 10px; } /* ========================================================================== TIMELINE (reprise à l'identique du site) ========================================================================== */ .strawberry-timeline { padding: 40px 20px; border-radius: 1.5rem; position: relative; } .timeline-container { position: relative; max-width: 800px; margin: 0 auto; padding: 20px 0; } .marker-line { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 4px; height: 100%; background: #e74c3c; } .phase { display: flex; align-items: center; margin: 30px 0; position: relative; } .phase-left { justify-content: flex-start; } .phase-right { justify-content: flex-end; } .timeline-card { background: #ffffff; border-radius: 1rem; box-shadow: 0 8px 20px rgba(0, 0, 0, .1); padding: 20px; width: 45%; transform: skewY(-2deg) rotate(-1deg); transition: transform .3s; } .timeline-card h4 { margin: 0 0 10px; font-size: 1.2rem; color: #e74c3c; text-transform: uppercase; font-family: 'Poppins', sans-serif; } .timeline-card p { margin: 0; font-size: .95rem; color: var(--corps-fort); line-height: 1.4; } .timeline-card:hover { transform: skewY(0deg) rotate(0deg) scale(1.02); } @media (max-width: 640px) { .marker-line { left: 12px; } .phase, .phase-right { justify-content: flex-start; } .timeline-card { width: calc(100% - 40px); margin-left: 34px; } } /* ========================================================================== FAQ (accordéon dans un panneau gris arrondi, comme le site réel) ========================================================================== */ .faq-panel { background: #f1f1f1; border-radius: 26px; padding: 56px clamp(20px, 4vw, 48px) 44px; } .faq-panel .section-title { color: #000; margin-bottom: 44px; } .faq { margin: 0 auto; } .faq details { background: #fff; border: 0; border-radius: 22px; margin-bottom: 18px; overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, .05); } .faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 20px 26px; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 1rem; color: #1d1d1d; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: '+'; color: #555; font-weight: 300; font-size: 1.7rem; line-height: 1; flex: none; } .faq details[open] summary::after { content: '−'; color: var(--vert); font-weight: 600; } .faq details[open] summary { color: var(--rouge); } .faq .reponse { padding: 0 26px 22px; color: #5c5c5c; line-height: 1.7; } .faq .reponse a { color: var(--vert); font-weight: 600; } /* ========================================================================== CARTES (téléchargements, concours, dons…) ========================================================================== */ .grille { display: grid; gap: 26px; } .grille--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .grille--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .grille--4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .carte { background: #fff; border: 1px solid #ececec; border-radius: 14px; padding: 26px; box-shadow: 0 6px 20px rgba(0, 0, 0, .05); transition: transform .25s ease, box-shadow .25s ease; } .carte:hover { transform: translateY(-5px); box-shadow: 0 14px 34px rgba(0, 0, 0, .09); } .carte h3 { font-family: 'Poppins', sans-serif; color: var(--gris-fonce); margin-bottom: 10px; } .carte p { color: var(--corps); line-height: 1.65; margin-bottom: 14px; } .badge { display: inline-block; background: var(--rouge); color: #fff; font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; padding: 4px 12px; border-radius: 20px; margin-bottom: 12px; } .badge--vert { background: var(--vert); color: #123; } .badge--gris { background: #ececec; color: #666; } .meta { display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--sourdine); margin-bottom: 16px; } .note { color: #f0b429; font-weight: 600; } .btn-ligne { display: flex; gap: 10px; flex-wrap: wrap; } .btn-outline { display: inline-block; border: 2px solid var(--rouge); color: var(--rouge); background: #fff; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 14px; padding: 9px 22px; border-radius: 36px; cursor: pointer; transition: background .2s ease, color .2s ease; } .btn-outline:hover { background: var(--rouge); color: #fff; } /* Filtres (galerie, téléchargements, concours) */ .filtres { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 40px; } .filtres button { background: #fff; border: 1px solid #e0e0e0; border-radius: 36px; font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 500; color: var(--gris-texte); padding: 8px 22px; cursor: pointer; transition: all .2s ease; } .filtres button:hover { border-color: var(--vert); color: var(--vert); } .filtres button[aria-pressed="true"] { background: var(--rouge); border-color: var(--rouge); color: #fff; } /* ========================================================================== GALERIE + LIGHTBOX ========================================================================== */ .galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 22px; } .galerie figure { position: relative; overflow: hidden; border-radius: 12px; cursor: zoom-in; box-shadow: 0 8px 24px rgba(0, 0, 0, .08); background: #f6f6f6; } .galerie img { width: 100%; aspect-ratio: 16/10; object-fit: cover; transition: transform .4s ease; } .galerie figure:hover img { transform: scale(1.05); } .galerie figcaption { padding: 16px 18px; background: #fff; } .galerie figcaption strong { display: block; font-family: 'Poppins', sans-serif; color: var(--gris-fonce); margin-bottom: 6px; } .galerie figcaption span { font-size: 13px; color: var(--sourdine); display: block; } .galerie figure.cache { display: none; } .lightbox { position: fixed; inset: 0; z-index: 500; background: rgba(0, 0, 0, .92); display: none; align-items: center; justify-content: center; padding: 5vh 5vw; } .lightbox.ouverte { display: flex; } .lightbox img { max-width: 100%; max-height: 86vh; border-radius: 8px; } .lightbox button { position: absolute; background: rgba(255, 255, 255, .12); color: #fff; border: 0; width: 46px; height: 46px; border-radius: 50%; font-size: 20px; cursor: pointer; transition: background .2s ease; } .lightbox button:hover { background: var(--rouge); } .lb-close { top: 20px; right: 20px; } .lb-prev { left: 18px; top: 50%; transform: translateY(-50%); } .lb-next { right: 18px; top: 50%; transform: translateY(-50%); } /* ========================================================================== MEMBRES (grades + skins) ========================================================================== */ .grade { margin-bottom: 46px; } .grade h3 { font-family: 'Poppins', sans-serif; font-size: 1.35rem; color: var(--rouge); margin-bottom: 8px; } .grade > p { color: var(--corps); max-width: 720px; line-height: 1.7; margin-bottom: 22px; } .membres { display: flex; flex-wrap: wrap; gap: 18px; } .membre { background: #fff; border: 1px solid #ececec; border-radius: 14px; padding: 18px 16px; text-align: center; width: 150px; box-shadow: 0 6px 18px rgba(0, 0, 0, .05); transition: transform .25s ease; } .membre:hover { transform: translateY(-6px); } .membre img { height: 130px; width: auto; margin: 0 auto 12px; } .membre span { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 14px; color: var(--gris-fonce); } /* ========================================================================== COMMANDES UTILES (onglets + liste) ========================================================================== */ .onglets { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 40px; } .onglets button { background: #fff; border: 1px solid #e0e0e0; border-radius: 36px; font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 500; padding: 9px 24px; cursor: pointer; color: var(--gris-texte); transition: all .2s ease; } .onglets button[aria-selected="true"] { background: var(--rouge); border-color: var(--rouge); color: #fff; } .panneau { display: none; } .panneau.actif { display: block; } .panneau h3 { font-family: 'Poppins', sans-serif; color: var(--gris-fonce); margin: 32px 0 18px; font-size: 1.2rem; } .cmd { background: #fff; border: 1px solid #ececec; border-left: 4px solid var(--rouge); border-radius: 10px; padding: 18px 22px; margin-bottom: 12px; } .cmd code { font-family: 'Consolas', 'Courier New', monospace; color: var(--rouge); font-weight: 700; font-size: 15px; } .cmd p { color: var(--corps); margin: 6px 0; line-height: 1.6; } .cmd .usage { display: inline-block; background: #f6f6f6; border-radius: 6px; padding: 5px 10px; font-family: 'Consolas', monospace; font-size: 13px; color: #555; margin-top: 4px; } /* ========================================================================== CHARTE GRAPHIQUE ========================================================================== */ .couleurs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px; margin-bottom: 44px; } .couleur { border-radius: 12px; overflow: hidden; box-shadow: 0 6px 18px rgba(0, 0, 0, .07); } .couleur .pastille { height: 110px; } .couleur .info { background: #fff; padding: 14px; text-align: center; } .couleur .info strong { display: block; font-family: 'Poppins', sans-serif; font-size: 14px; color: var(--gris-fonce); } .couleur .info code { font-size: 13px; color: var(--sourdine); } .typos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; } .typo { background: #fff; border: 1px solid #ececec; border-radius: 12px; padding: 24px; text-align: center; } .typo .nom { font-size: 1.8rem; margin-bottom: 8px; color: var(--gris-fonce); } .typo p { color: var(--sourdine); font-size: 14px; } /* ========================================================================== CONTACT — DA minimaliste (issue de contact-lab.html, essai 06 « Comptoir ») À gauche on cherche (la FAQ filtre en direct), à droite on écrit. Quand aucune réponse ne colle, la question passe toute seule dans le message. Le minimalisme vient de la RETENUE : filets au lieu des ombres et des cartes, rouge réservé aux accents. Remplace l'ancien bloc .contact-grille / .form-champ / .form-2, qui n'était utilisé que par l'ancienne contact.html. ========================================================================== */ .ct-page { padding: calc(var(--header-h) + 70px) 0 110px; } .ct-surtitre { font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--sourdine); } .ct-titre { font-family: 'Poppins', sans-serif; font-weight: 500; font-size: clamp(2.1rem, 1.5rem + 2.2vw, 3.1rem); color: var(--gris-fonce); letter-spacing: -.015em; line-height: 1.1; margin-top: 12px; } /* Pas de dégradé rouge→vert ici : un point rouge après le mot suffit. */ .ct-titre b { font-weight: 600; color: var(--rouge); } .ct-chapo { color: var(--corps); line-height: 1.7; max-width: 560px; margin-top: 14px; } .ct-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 36px; padding: 12px 26px; font-family: 'Poppins', sans-serif; font-size: 13.5px; font-weight: 600; border: 0; cursor: pointer; transition: background .2s ease, transform .2s ease; } .ct-btn-plein { background: var(--rouge); color: #fff; } .ct-btn-plein:hover { background: var(--rouge-fonce); transform: translateY(-2px); color: #fff; } .ct-fl { display: inline-flex; align-items: center; gap: 8px; font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 600; color: var(--gris-fonce); background: none; border: 0; cursor: pointer; transition: color .2s ease, gap .2s ease; } .ct-fl:hover { color: var(--rouge); gap: 13px; } .ct-cache { display: none !important; } .ct-grille { display: grid; grid-template-columns: 1.05fr .95fr; gap: 72px; align-items: start; margin-top: 46px; } /* ---------- Colonne gauche : on cherche ---------- */ .ct-champ { position: relative; } .ct-champ input { width: 100%; border: 0; border-bottom: 2px solid var(--gris-fonce); background: none; padding: 0 34px 16px 0; font-family: 'Poppins', sans-serif; font-weight: 500; font-size: clamp(1.3rem, 1rem + 1.2vw, 2rem); color: var(--gris-fonce); letter-spacing: -.02em; transition: border-color .25s ease; } .ct-champ input:focus { outline: none; border-color: var(--rouge); } .ct-champ input::placeholder { color: #cfcfcf; } .ct-champ .ct-loupe { position: absolute; right: 2px; bottom: 18px; font-size: 1.2rem; color: var(--sourdine); pointer-events: none; } .ct-compte { font-size: 12.5px; color: var(--sourdine); margin-top: 14px; min-height: 19px; } .ct-compte b { color: var(--gris-texte); font-family: 'Poppins', sans-serif; } /* Ni panneau gris ni cartes blanches comme la FAQ de l'accueil : des filets. */ .ct-faq { margin-top: 22px; } .ct-faq details { border-top: 1px solid var(--filet); } .ct-faq details:last-of-type { border-bottom: 1px solid var(--filet); } .ct-faq details.ct-cache { display: none !important; } .ct-faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 1rem; color: var(--gris-fonce); transition: color .25s ease; } .ct-faq summary::-webkit-details-marker { display: none; } .ct-faq summary:hover { color: var(--rouge); } .ct-faq summary::after { content: '+'; color: var(--sourdine); font-weight: 400; font-size: 1.5rem; line-height: 1; flex: none; } .ct-faq details[open] summary { color: var(--rouge); } .ct-faq details[open] summary::after { content: '−'; color: var(--vert); font-weight: 600; } .ct-faq .ct-reponse { padding: 0 0 22px; color: var(--corps); line-height: 1.75; max-width: 620px; } .ct-faq .ct-reponse a { color: var(--vert); font-weight: 600; } .ct-lien-ecrire { margin-top: 26px; } /* ---------- Colonne droite : on écrit ---------- */ .ct-droite { padding-top: 4px; } .ct-droite > .ct-surtitre { display: block; margin-bottom: 22px; } .ct-form-champ { margin-bottom: 26px; } .ct-form-champ label { display: block; font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--sourdine); margin-bottom: 8px; } /* Ni carte, ni boîte : un filet sous le champ. */ .ct-form-champ input, .ct-form-champ textarea { width: 100%; border: 0; border-bottom: 1px solid var(--filet); background: none; padding: 8px 2px 12px; font-family: 'Open Sans', sans-serif; font-size: 15.5px; color: var(--gris-texte); transition: border-color .25s ease; } .ct-form-champ textarea { min-height: 110px; resize: vertical; line-height: 1.7; } .ct-form-champ input:focus, .ct-form-champ textarea:focus { outline: none; border-color: var(--rouge); } .ct-form-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; } /* Le message s'allume quand la question lui est passée : le seul signal du transfert, et il vit dans le rouge d'accent, pas dans une animation. */ .ct-msg.ct-eveille textarea { border-color: var(--rouge); } .ct-note { display: none; font-size: 12.5px; color: var(--sourdine); margin-top: 10px; } .ct-msg.ct-eveille .ct-note { display: block; } .ct-note b { color: var(--gris-texte); font-family: 'Poppins', sans-serif; font-weight: 600; } /* Le piège à robots : hors de l'écran plutôt que display:none, que certains robots savent repérer. Même convention que `.ps-pot`. */ .ct-pot { position: absolute; left: -9999px; } /* « obligatoire » : même traitement que sur la page « soumettre un projet ». */ .ct-oblig { font-style: normal; font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--rouge); margin-left: 6px; } /* Le retour d'envoi. Il ne s'affiche que quand il a quelque chose à dire — pas de zone vide réservée qui décalerait le bouton au chargement. */ .ct-retour { margin-top: 18px; font-size: 14.5px; line-height: 1.6; padding-left: 14px; border-left: 2px solid var(--filet); } .ct-retour-erreur { border-left-color: var(--rouge); color: var(--gris-texte); } .ct-retour a { color: var(--rouge); text-decoration: underline; text-underline-offset: 3px; } .ct-btn[disabled] { opacity: .55; cursor: progress; transform: none; } /* La confirmation remplace le formulaire : il n'y a plus rien à y faire, autant que la place serve au message. */ .ct-merci-titre { font-family: 'Poppins', sans-serif; font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 500; color: var(--gris-fonce); letter-spacing: -.02em; margin-bottom: 12px; } .ct-merci-titre b { color: var(--rouge); } .ct-merci-texte { font-size: 15.5px; line-height: 1.75; color: var(--gris-texte); max-width: 46ch; } .ct-merci-texte b { font-weight: 600; } .ct-merci-texte a { color: var(--rouge); text-decoration: underline; text-underline-offset: 3px; } /* ---------- Bento : où nous trouver ---------- Pas des cartes qui flottent (ombres + contours = le registre qu'on évite) : UN bloc, découpé par des filets. D'où gap:1px sur un fond filet — les tuiles blanches laissent voir la trame entre elles. */ .ct-bento { margin-top: 90px; } .ct-bento-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; } .ct-maille { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--filet); border: 1px solid var(--filet); border-radius: 22px; overflow: hidden; } .ct-tuile { position: relative; background: var(--blanc); padding: 26px; min-height: 138px; display: flex; flex-direction: column; gap: 5px; transition: background .25s ease; } .ct-tuile:hover { background: #fafafa; } .ct-t-nom { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 1.05rem; color: var(--gris-fonce); letter-spacing: -.01em; transition: color .25s ease; } a.ct-tuile:hover .ct-t-nom { color: var(--rouge); } .ct-t-sous { font-size: 12.5px; color: var(--sourdine); } .ct-t-fl { position: absolute; top: 24px; right: 24px; color: var(--sourdine); font-size: 13px; transition: color .25s ease, transform .25s ease; } a.ct-tuile:hover .ct-t-fl { color: var(--rouge); transform: translate(3px, -3px); } .ct-t-large { grid-column: span 2; } /* La tuile serveur : 2×2, la seule qui parle. Elle porte la signature. */ .ct-t-ip { grid-column: span 2; grid-row: span 2; justify-content: space-between; gap: 20px; } .ct-ip-titre { font-family: 'Poppins', sans-serif; font-weight: 500; font-size: clamp(1.35rem, 1.05rem + 1vw, 1.9rem); color: var(--gris-fonce); letter-spacing: -.02em; line-height: 1.15; margin-top: 10px; } .ct-ip-titre b { font-weight: 600; color: var(--rouge); } .ct-ip-bas { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } /* Écho de la pilule IP du site, en bouton : le d'origine ne répond pas au clavier, ici Entrée et Espace marchent gratuitement. */ .ct-ip-copie { position: relative; background: #fff; border: 2px solid var(--rouge-charte); border-radius: 36px; color: var(--rouge-charte); cursor: pointer; font-family: 'Poppins', sans-serif; font-size: 13.5px; font-weight: 700; padding: 7px 18px; white-space: nowrap; transition: background .2s ease; } .ct-ip-copie:hover { background: var(--rouge-doux); } .ct-ip-copie:active { transform: translateY(1px); } .ct-ip-ver { font-size: 12.5px; color: var(--sourdine); } /* Twitch porte deux chaînes : la tuile ne peut pas être un (pas de lien dans un lien), ce sont les chaînes qui le sont. */ .ct-t-chaines { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; } .ct-t-chaines a { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--filet); border-radius: 36px; padding: 7px 14px; font-family: 'Poppins', sans-serif; font-size: 12.5px; font-weight: 500; color: var(--gris-texte); transition: border-color .2s ease, color .2s ease; } .ct-t-chaines a:hover { border-color: var(--rouge); color: var(--rouge); } @media (max-width: 1024px) { .ct-page { padding: calc(var(--header-h) + 40px) 0 80px; } .ct-grille { grid-template-columns: 1fr; gap: 46px; } .ct-bento { margin-top: 60px; } .ct-maille { grid-template-columns: repeat(2, 1fr); } /* En 2 colonnes la tuile serveur prend la largeur, mais plus la hauteur double : elle n'a plus de voisine à côté de qui s'aligner. */ .ct-t-ip { grid-column: span 2; grid-row: span 1; } } @media (max-width: 640px) { .ct-form-2 { grid-template-columns: 1fr; gap: 20px; } .ct-maille { grid-template-columns: 1fr; } .ct-t-large, .ct-t-ip { grid-column: span 1; } } /* ========================================================================== DONS ========================================================================== */ .don-total { text-align: center; font-family: 'Poppins', sans-serif; font-size: 2.4rem; font-weight: 700; color: var(--vert); margin-bottom: 8px; } .don-jauge { max-width: 520px; margin: 0 auto 40px; height: 12px; background: #ececec; border-radius: 20px; overflow: hidden; } .don-jauge span { display: block; height: 100%; background: linear-gradient(90deg, var(--rouge), var(--vert)); } /* ========================================================================== PAGE TÉLÉCHARGEMENTS (styles repris du widget réel du site) ========================================================================== */ /* L'ancienne page Téléchargements (featured + cartes à ombre) a été remplacée par la version minimaliste — voir le bloc « TÉLÉCHARGEMENTS » plus bas. Tout son habillage (.page-dl, .featured-*, .download-*, .card-*, .filters) est parti avec elle ; seul .section-intro restait utilisé, par concours.html. L'ancienne page reste consultable dans « site - Copie ». */ .section-intro { max-width: 900px; font-size: 1.1rem; color: #666; margin-bottom: 3rem; } /* ========================================================================== FOOTER (fond blanc, reproduction fidèle) ========================================================================== */ .site-footer { background: #fff; padding: 70px 0 90px; margin-top: 40px; } .footer-grille { display: grid; gap: 40px; grid-template-columns: 2.2fr 1fr 1.3fr 1fr; } .footer-col h2 { font-family: 'Poppins', sans-serif; font-size: 1.1rem; font-weight: 700; color: #000; margin-bottom: 14px; } .footer-col h2.souligne { text-decoration: underline; } .footer-col p, .footer-col li { color: var(--corps-fort); font-size: 14px; line-height: 1.8; } .footer-col ul { list-style: none; } .footer-col a { color: var(--corps-fort); text-decoration: underline; transition: color .2s ease; } .footer-col a:hover { color: var(--vert); } .footer-marque h2 { color: var(--rouge); font-size: 1.15rem; margin-bottom: 6px; } .footer-marque > p { color: var(--corps-fort); } .disclaimer-box { border: 2px solid #000; border-radius: 12px; padding: 10px 16px 12px; margin: 22px 0 18px; max-width: 360px; } .disclaimer-box p { font-size: 12.5px; font-weight: 700; color: #000; line-height: 1.5; } .disclaimer-box .disc-titre { margin-bottom: 8px; } .footer-marque .credit { font-size: 12.5px; font-weight: 700; color: #000; } @media (max-width: 900px) { .footer-grille { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .footer-grille { grid-template-columns: 1fr; } } /* ========================================================================== TITRES DE PAGE avec barre rouge (Concours, Dons) ========================================================================== */ .page-simple { background: #fff; padding: calc(var(--header-h) + 50px) 0 4rem; } .titre-souligne { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: clamp(1.9rem, 1.4rem + 2vw, 2.6rem); color: #222; margin-bottom: 18px; } .titre-souligne::after { content: ''; display: block; width: 62px; height: 4px; background: var(--rouge); margin-top: 12px; border-radius: 2px; } .titre-souligne--centre { text-align: center; } .titre-souligne--centre::after { margin-left: auto; margin-right: auto; } /* ========================================================================== CONCOURS & ÉVÉNEMENTS — DA minimaliste (issue de concours-lab.html, 04 « Le prochain »). Remplace l'ancien bloc .event-* / .btn-resultats, qui n'était utilisé que par l'ancienne concours.html (.page-simple et .titre-souligne, eux, servent aussi à faire-un-don.html : on n'y touche pas). Parti pris : les 3 concours sont TERMINÉS et le dernier date de mars 2025. La page s'ouvre donc sur l'état vide, le dit franchement, et rend le passage sur Discord utile. Les filtres « En cours » / « À venir » de l'ancienne page ne sont pas repris : ils ne renvoyaient rien. ========================================================================== */ .cc-page { padding: calc(var(--header-h) + 70px) 0 110px; } .cc-surtitre { font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--sourdine); } .cc-titre { font-family: 'Poppins', sans-serif; font-weight: 500; font-size: clamp(2.1rem, 1.5rem + 2.2vw, 3.1rem); color: var(--gris-fonce); letter-spacing: -.015em; line-height: 1.1; margin-top: 12px; } .cc-titre b { font-weight: 600; color: var(--rouge); } .cc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 36px; padding: 12px 26px; font-family: 'Poppins', sans-serif; font-size: 13.5px; font-weight: 600; transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease; } .cc-btn-plein { background: var(--rouge); color: #fff; } .cc-btn-plein:hover { background: var(--rouge-fonce); transform: translateY(-2px); color: #fff; } .cc-btn-vide { border: 1px solid var(--filet); color: var(--gris-texte); } .cc-btn-vide:hover { border-color: var(--gris-fonce); } /* Le badge « Terminé » de l'ancienne page était un aplat gris. Ici un point et un mot : le statut est une information, pas une décoration. */ .cc-fini { display: inline-flex; align-items: center; gap: 7px; font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--sourdine); white-space: nowrap; } .cc-fini::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--sourdine); flex: none; } /* ---------- Le prochain : l'état vide, traité comme le sujet ---------- */ .cc-bloc { border: 1px solid var(--filet); border-radius: 26px; padding: clamp(30px, 5vw, 60px); margin-top: 46px; display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; } .cc-bloc h2 { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem); color: var(--gris-fonce); letter-spacing: -.025em; margin: 12px 0; } .cc-bloc > div > p { color: var(--corps); line-height: 1.75; max-width: 460px; } .cc-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; } /* Le dernier en date : la preuve que ça a existé, sinon l'état vide sonne mort. */ .cc-dernier { text-align: right; border-left: 1px solid var(--filet); padding-left: 40px; } .cc-dernier b { display: block; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 1.15rem; color: var(--gris-fonce); margin: 8px 0 4px; } .cc-dernier span { font-size: 12.5px; color: var(--sourdine); } /* ---------- L'archive et sa bascule ---------- */ .cc-archive { margin-top: 84px; } .cc-tete { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; margin-bottom: 8px; } .cc-outils { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .cc-vues { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--filet); border-radius: 36px; } .cc-vues button { display: grid; place-items: center; width: 32px; height: 30px; border: 0; border-radius: 36px; background: none; cursor: pointer; color: var(--sourdine); transition: background .2s ease, color .2s ease; } .cc-vues button svg { width: 15px; height: 15px; } .cc-vues button:hover { color: var(--gris-fonce); } .cc-vues button[aria-pressed="true"] { background: var(--rouge); color: #fff; } /* -------------------------------------------------------------------------- UN seul balisage (.cc-item), deux vues — même convention que .dl-item. C'est le conteneur qui décide (.cc-liste / .cc-grille). Les deux vues partagent les mêmes zones nommées : seule leur disposition change, donc elles ne peuvent pas diverger. -------------------------------------------------------------------------- */ .cc-item { position: relative; } .cc-n { font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 600; color: var(--sourdine); grid-area: n; } .cc-corps { grid-area: corps; } .cc-nom { font-family: 'Poppins', sans-serif; font-weight: 600; color: var(--gris-fonce); letter-spacing: -.015em; transition: color .25s ease; } .cc-desc { color: var(--corps); line-height: 1.65; } .cc-quand { grid-area: quand; font-family: 'Poppins', sans-serif; font-size: 12.5px; font-weight: 600; color: var(--gris-texte); } .cc-quand span { display: block; color: var(--sourdine); font-weight: 500; font-size: 12px; margin-top: 3px; } .cc-part { grid-area: part; font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 600; color: var(--gris-texte); white-space: nowrap; } /* Le pied n'existe qu'en vue grille, où il porte un filet continu. En liste, `display: contents` l'efface et ses deux enfants retombent dans la grille de la ligne, à leurs zones nommées — un seul balisage pour les deux vues. */ .cc-part span { color: var(--sourdine); font-weight: 500; font-size: 11.5px; } .cc-item .cc-fini { grid-area: fini; } .cc-res { grid-area: res; display: inline-flex; align-items: center; gap: 8px; font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 600; color: var(--gris-fonce); transition: color .2s ease, gap .2s ease; } .cc-res::after { content: '→'; } .cc-res:hover { color: var(--rouge); gap: 13px; } /* ---------- Vue LISTE ---------- */ .cc-liste { margin-top: 10px; } .cc-liste .cc-item { display: grid; grid-template-columns: 36px 1fr 180px 112px 92px 104px; grid-template-areas: "n corps quand part fini res"; align-items: center; gap: 20px; padding: 24px 0; border-top: 1px solid var(--filet); transition: padding-left .3s cubic-bezier(.2, .8, .2, 1); } .cc-liste .cc-item:last-of-type { border-bottom: 1px solid var(--filet); } .cc-liste .cc-item:hover { padding-left: 8px; } .cc-liste .cc-item:hover .cc-nom { color: var(--rouge); } .cc-liste .cc-pied { display: contents; } .cc-liste .cc-nom { font-size: 1.1rem; } .cc-liste .cc-desc { font-size: 13px; margin-top: 4px; } .cc-liste .cc-res { justify-self: end; } /* ---------- Vue GRILLE ---------- */ .cc-grille { margin-top: 10px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } /* Ni ombre ni fond : un filet, et le survol qui le fonce. */ .cc-grille .cc-item { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "n fini" "corps corps" "quand quand" "pied pied"; align-content: start; gap: 14px 12px; border: 1px solid var(--filet); border-radius: 20px; padding: 30px; transition: border-color .25s ease, transform .25s ease; } .cc-grille .cc-item:hover { border-color: var(--gris-fonce); transform: translateY(-3px); } .cc-grille .cc-item:hover .cc-nom { color: var(--rouge); } .cc-grille .cc-nom { font-size: 1.25rem; display: block; margin-bottom: 10px; } /* La description pousse le pied vers le bas : les 3 cartes s'alignent. */ .cc-grille .cc-corps { min-height: 118px; } .cc-grille .cc-quand { padding-top: 4px; } .cc-grille .cc-pied { grid-area: pied; display: flex; justify-content: space-between; align-items: center; gap: 14px; padding-top: 16px; border-top: 1px solid var(--filet); } @media (max-width: 1024px) { .cc-page { padding: calc(var(--header-h) + 40px) 0 80px; } .cc-bloc { grid-template-columns: 1fr; gap: 28px; } .cc-dernier { text-align: left; border-left: 0; border-top: 1px solid var(--filet); padding: 24px 0 0; } .cc-grille { grid-template-columns: 1fr; } .cc-grille .cc-corps { min-height: 0; } /* En liste, les colonnes fixes ne tiennent plus : on garde l'essentiel. */ .cc-liste .cc-item { grid-template-columns: 30px 1fr auto; grid-template-areas: "n corps corps" ". quand res"; align-items: start; gap: 12px; } .cc-liste .cc-part, .cc-liste .cc-fini { display: none; } } @media (max-width: 640px) { .cc-liste .cc-desc { display: none; } } /* ========================================================================== PANNEAUX GRIS (grades, donateurs, réseaux — motif Elementor du site) ========================================================================== */ /* .panneau-gris reste : faire-un-don.html s'en sert. En revanche l'habillage propre à l'ancienne page Membres (.badge-panneau, .bande-grade, .grade-bloc, .social-*) est parti avec elle — voir le bloc « PAGE MEMBRES » plus bas. L'ancienne page reste consultable dans « site - Copie ». */ .panneau-gris { background: #f3f3f3; border-radius: 22px; padding: 30px; } /* ========================================================================== PAGE FAIRE UN DON — DA minimaliste (issue de don-lab.html, 04 « La bande ») La ville en plein cadre : « c'est ça qu'on paie ». Remplace l'ancien bloc (.dons-*, .don-jauge-pleine, .don-pill, .btn-don, .bande-titre-rouge…), vérifié comme n'étant utilisé que par l'ancienne faire-un-don.html. .panneau-gris / .figure-joueur / .figures-liste sont CONSERVÉS : ce sont des composants génériques du site, même si plus personne ne s'en sert pour l'instant. .page-simple et .titre-souligne servent encore ailleurs. Ce qui a sauté au passage, et pourquoi : - `.don-jauge-pleine` était une jauge pleine à 100 % SANS objectif : elle ne mesurait rien. Le chiffre nu (327 €) est vrai et se suffit. - Le panneau « Donateurs » était décrit par la description du rôle Modérateur, copiée de membres.html. Elle ne parlait pas de dons. - Les donateurs étaient listés deux fois (pilules + figures). Une seule fois. ========================================================================== */ /* L'image démarre à y=0 et passe DERRIÈRE la pilule du header (fixe, 18→72px) : c'est voulu. Le dégradé blanc en bas la fond dans la page, et le titre vient mordre dessus. */ .dn-hero { position: relative; height: clamp(380px, 66vh, 660px); overflow: hidden; background: var(--gris-clair); } .dn-hero img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; } .dn-hero::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, #fff 0%, rgba(255, 255, 255, 0) 46%); } /* Le contenu remonte sur le fondu : sinon une bande blanche vide les sépare. */ .dn-sous { position: relative; z-index: 2; margin-top: -56px; padding-bottom: 100px; } .dn-surtitre { font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--sourdine); } .dn-titre { font-family: 'Poppins', sans-serif; font-weight: 500; font-size: clamp(2.1rem, 1.5rem + 2.2vw, 3.1rem); color: var(--gris-fonce); letter-spacing: -.015em; line-height: 1.1; margin-top: 12px; } .dn-titre b { font-weight: 600; color: var(--rouge); } .dn-duo { display: grid; grid-template-columns: 1.15fr .85fr; gap: 60px; align-items: start; margin-top: 40px; } .dn-duo p { color: var(--corps); line-height: 1.75; } .dn-duo p + p { margin-top: 12px; } .dn-duo p b { font-family: 'Poppins', sans-serif; font-weight: 600; color: var(--gris-texte); } .dn-cote { border-left: 1px solid var(--filet); padding-left: 40px; } .dn-cote .dn-surtitre { display: block; margin-bottom: 10px; } /* Le chiffre nu remplace la jauge : 327 €, c'est vrai, ça se suffit. Montant et devise d'un seul rouge : le chiffre est le sujet de la page, il ne se coupe pas en deux couleurs. Sélecteur descendant obligatoire : `.dn-duo p` est plus spécifique que `.dn-somme` seul et lui imposerait le gris des paragraphes. */ .dn-duo .dn-somme { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: clamp(2.6rem, 1.8rem + 3vw, 4.2rem); color: var(--rouge); letter-spacing: -.04em; line-height: .95; } /* Les 3 moyens de don : ni cartes ni ombres, des pilules filetées. */ .dn-moyens { display: flex; gap: 10px; flex-wrap: wrap; } .dn-moyen { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--filet); border-radius: 36px; padding: 11px 22px; font-family: 'Poppins', sans-serif; font-size: 13.5px; font-weight: 600; color: var(--gris-texte); transition: border-color .2s ease, color .2s ease; } .dn-moyen::after { content: '↗'; font-size: 11px; color: var(--sourdine); } .dn-moyen:hover { border-color: var(--rouge); color: var(--rouge); } .dn-moyen:hover::after { color: var(--rouge); } .dn-grade { display: inline-flex; align-items: center; gap: 9px; border: 1px solid var(--filet); border-radius: 36px; padding: 8px 16px; font-family: 'Poppins', sans-serif; font-size: 12.5px; font-weight: 600; color: var(--gris-texte); } .dn-grade::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--vert); flex: none; } /* Les skins : ~24 % de transparent de chaque côté font déjà l'écart — d'où le gap minuscule. L'air est dans le PNG, pas dans le CSS. */ .dn-gens-bloc { margin-top: 34px; padding-top: 30px; border-top: 1px solid var(--filet); } .dn-gens { display: flex; gap: 6px; flex-wrap: wrap; } .dn-gars { text-align: center; } .dn-gars img { height: 96px; width: auto; image-rendering: pixelated; margin-bottom: 8px; } .dn-gars span { display: block; font-family: 'Poppins', sans-serif; font-size: 12px; color: var(--gris-texte); } @media (max-width: 1024px) { .dn-hero { height: clamp(300px, 46vh, 420px); } .dn-duo { grid-template-columns: 1fr; gap: 34px; } .dn-cote { border-left: 0; border-top: 1px solid var(--filet); padding: 30px 0 0; } .dn-sous { padding-bottom: 70px; } } @media (max-width: 640px) { .dn-gars img { height: 74px; } } /* ========================================================================== COMPOSANTS GÉNÉRIQUES (plus utilisés depuis la refonte des pages, gardés : ce sont le vocabulaire du site, pas de la page de don) ========================================================================== */ .figures-liste { display: flex; flex-wrap: wrap; gap: 44px; justify-content: space-around; } .figures-liste--gauche { justify-content: flex-start; gap: 38px; padding-left: 10px; } .figure-joueur { text-align: center; } .figure-joueur img { height: 105px; width: auto; margin: 0 auto 12px; } .figure-joueur span { display: block; font-size: 14px; color: var(--corps-fort); } /* ========================================================================== HERO GALERIE — « Colonnes » (repris de hero-lab-2.html, variante 05) Trois colonnes de builds défilent à contre-courant sur la moitié droite ; le message garde toute la moitié gauche. Réutilise .grid-overlay, .brand-tag et .cta-button définis plus haut. ========================================================================== */ .hero-galerie { position: relative; overflow: hidden; min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: flex-start; background: var(--blanc); font-family: 'Exo 2', sans-serif; } /* Les colonnes débordent en haut et en bas, et le masque efface leurs extrémités : on ne doit jamais voir le raccord de la boucle. */ .hg-cols { position: absolute; top: -6vh; bottom: -6vh; right: 0; width: 52%; z-index: 3; display: flex; gap: 18px; padding: 0 3.5vw; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%); } .hg-col { flex: 1; } /* Chaque piste est doublée dans le HTML : translateY(-50%) boucle sans raccord */ .hg-col > div { animation: hgUp 46s linear infinite; } .hg-col--b > div { animation: hgDown 58s linear infinite; } .hg-col--c > div { animation-duration: 38s; } @keyframes hgUp { to { transform: translateY(-50%); } } @keyframes hgDown { from { transform: translateY(-50%); } to { transform: translateY(0); } } .hg-col img { width: 100%; aspect-ratio: 3 / 3.6; object-fit: cover; border-radius: 14px; margin-bottom: 18px; box-shadow: 0 12px 30px rgba(29, 22, 18, .12); } .hg-inner { position: relative; z-index: 10; width: 48%; padding: 0 3vw 0 6vw; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-height: 100dvh; } .hg-inner .brand-tag { margin-bottom: 26px; } .hg-titre { font-family: 'Exo 2', sans-serif; font-weight: 700; font-size: clamp(2.6rem, 5.6vw, 4.6rem); line-height: 1.06; letter-spacing: -.01em; color: var(--gris-fonce); text-wrap: balance; margin-bottom: 20px; transform: translateY(20px); opacity: 0; animation: fadeInUp 1s ease forwards .4s; } .hg-titre .grad { background: linear-gradient(92deg, var(--rouge), var(--vert)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .hg-sub { font-size: clamp(1rem, 1.3vw, 1.2rem); line-height: 1.7; color: #6a6560; max-width: 470px; margin-bottom: 34px; transform: translateY(20px); opacity: 0; animation: fadeInUp 1s ease forwards .6s; } .hg-actions { display: flex; gap: 14px; flex-wrap: wrap; transform: translateY(20px); opacity: 0; animation: fadeInUp 1s ease forwards .8s; } /* .cta-button porte déjà son propre fadeInUp : sans neutralisation, les deux animations se superposent et le bouton part de travers. */ .hg-actions .cta-button { display: inline-flex; align-items: center; animation: none; opacity: 1; transform: none; } .hg-ghost { display: inline-flex; align-items: center; color: var(--gris-fonce); font-family: 'Poppins', sans-serif; font-size: 14.5px; font-weight: 600; padding: 14px 30px; border-radius: 36px; background: rgba(255, 255, 255, .7); border: 1.5px solid rgba(41, 41, 41, .18); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: border-color .25s ease, transform .25s ease, color .25s ease; } .hg-ghost:hover { border-color: var(--rouge); color: var(--rouge); transform: translateY(-3px); } .hg-veil { display: none; } /* Le header est fixe : sans ça, l'ancre cale la cible sous la pilule. On vise la section entière et pas la grille seule, sinon on saute les filtres. */ #photos { scroll-margin-top: calc(var(--header-h) + 10px); } @media (max-width: 1024px) { /* Plus la place pour deux colonnes côte à côte : les builds repassent en fond très atténué et le message reprend tout l'écran. */ .hg-cols { width: 100%; opacity: .14; padding: 0 6vw; } .hg-inner { width: 100%; padding: 0 6vw; align-items: center; text-align: center; } .hg-sub { margin-left: auto; margin-right: auto; } .hg-actions { justify-content: center; } .hg-veil { display: block; position: absolute; inset: 0; z-index: 4; pointer-events: none; background: radial-gradient(80% 60% at 50% 50%, rgba(255, 255, 255, .75) 20%, transparent 100%); } } @media (max-width: 640px) { .hg-actions { width: 100%; } .hg-actions .cta-button, .hg-ghost { width: 100%; justify-content: center; } } /* ========================================================================== TÉLÉCHARGEMENTS — DA minimaliste (issue de dl-lab.html, variante 01) Le hero est propre à la page ; la liste/grille est partagée avec la section Téléchargements de l'accueil. Pas de carte à ombre : des filets, le rouge en accent, le vert en micro-signal (l'étoile). ========================================================================== */ /* ---------- Hero de la page ---------- */ .dl-hero { position: relative; overflow: hidden; background: var(--blanc); padding: calc(var(--header-h) + 80px) 0 70px; } .dl-hero .container { position: relative; z-index: 10; } .dl-h-grille { display: grid; grid-template-columns: 1.15fr .85fr; gap: 60px; align-items: center; } /* .brand-tag est en display:flex : sur l'accueil un parent centré la contraint, ici rien ne le fait — sans inline-flex elle s'étire sur toute la colonne. */ .dl-hero .brand-tag { display: inline-flex; margin-bottom: 24px; } .dl-h1 { font-family: 'Poppins', sans-serif; font-weight: 500; font-size: clamp(2.5rem, 1.7rem + 3.4vw, 4.6rem); line-height: 1.03; letter-spacing: -.03em; color: var(--gris-fonce); margin-bottom: 20px; transform: translateY(20px); opacity: 0; animation: fadeInUp 1s ease forwards .4s; } /* Un point rouge suffit : le dégradé rouge→vert sur un titre, c'est le tic qu'on cherche justement à enlever. */ .dl-h1 b { color: var(--rouge); font-weight: 500; } .dl-chapo { color: var(--corps); line-height: 1.75; max-width: 480px; margin-bottom: 32px; transform: translateY(20px); opacity: 0; animation: fadeInUp 1s ease forwards .6s; } .dl-h-actions { display: flex; gap: 12px; flex-wrap: wrap; transform: translateY(20px); opacity: 0; animation: fadeInUp 1s ease forwards .8s; } /* Le logo du modpack est la seule image « propre » du lot (les autres sont des captures ou des bannières à texte incrusté) : sa place est ici, en grand, pas recadrée dans une vignette de grille. */ .dl-h-vis { display: grid; place-items: center; } .dl-h-vis img { width: min(100%, 400px); filter: drop-shadow(0 30px 55px rgba(219, 53, 53, .2)); animation: dlFlotte 7s ease-in-out infinite; } @keyframes dlFlotte { 50% { transform: translateY(-14px); } } .dl-h-meta { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 70px; border-top: 1px solid var(--filet); } .dl-h-meta div { padding-top: 22px; } .dl-h-meta b { display: block; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 1.15rem; color: var(--gris-fonce); letter-spacing: -.01em; } .dl-h-meta span { display: block; margin-top: 4px; font-size: 11px; color: var(--sourdine); letter-spacing: .14em; text-transform: uppercase; font-family: 'Poppins', sans-serif; } .dl-corps { padding: 96px 0 110px; background: var(--blanc); scroll-margin-top: calc(var(--header-h) + 10px); } /* ---------- Vocabulaire commun ---------- */ .dl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; border-radius: 36px; padding: 13px 28px; font-family: 'Poppins', sans-serif; font-size: 13.5px; font-weight: 600; transition: background .2s, color .2s, border-color .2s, transform .2s; } .dl-btn-plein { background: var(--rouge); color: #fff; } .dl-btn-plein:hover { background: var(--rouge-fonce); transform: translateY(-2px); } .dl-btn-vide { border: 1px solid var(--filet); color: var(--gris-texte); } .dl-btn-vide:hover { border-color: var(--gris-fonce); } .dl-surtitre { font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--sourdine); margin-bottom: 10px; } .dl-titre2 { font-family: 'Poppins', sans-serif; font-weight: 500; font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.1rem); color: var(--gris-fonce); letter-spacing: -.02em; } /* Un point rouge suffit : le dégradé rouge→vert sur un titre est le tic qu'on cherche justement à enlever. */ .dl-titre2 b { color: var(--rouge); font-weight: 500; } .dl-tete { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap; } .dl-outils { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } /* Bascule liste / grille — même langage que les filtres, en plus discret */ .dl-vues { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--filet); border-radius: 36px; } .dl-vues button { width: 36px; height: 30px; border: 0; border-radius: 36px; background: none; display: grid; place-items: center; cursor: pointer; color: var(--sourdine); transition: background .2s, color .2s; } .dl-vues button svg { width: 15px; height: 15px; } .dl-vues button:hover { color: var(--gris-fonce); } .dl-vues button[aria-pressed="true"] { background: var(--rouge); color: #fff; } .dl-filtres { display: flex; gap: 8px; flex-wrap: wrap; } .dl-filtres button { border: 1px solid var(--filet); border-radius: 36px; background: #fff; padding: 8px 20px; cursor: pointer; white-space: nowrap; font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 500; color: var(--gris-texte); transition: border-color .2s, color .2s, background .2s; } .dl-filtres button:hover { border-color: var(--gris-fonce); } .dl-filtres button[aria-pressed="true"] { background: var(--rouge); border-color: var(--rouge); color: #fff; } .dl-fl { display: inline-flex; align-items: center; gap: 8px; font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 600; color: var(--gris-fonce); transition: color .2s, gap .2s; } .dl-fl:hover { color: var(--rouge); gap: 13px; } /* -------------------------------------------------------------------------- Le fichier : UN seul balisage (.dl-item), deux vues. C'est le conteneur qui décide — .dl-liste ou .dl-grille. Dupliquer le balisage par vue, c'est se garantir deux versions qui divergent au premier fichier ajouté. -------------------------------------------------------------------------- */ .dl-item { position: relative; } .dl-item.cache { display: none !important; } .dl-n { font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 600; color: var(--sourdine); } .dl-nom { font-family: 'Poppins', sans-serif; font-weight: 600; color: var(--gris-fonce); letter-spacing: -.01em; } .dl-desc { color: var(--sourdine); } .dl-ver { font-family: 'Poppins', sans-serif; font-size: 12.5px; font-weight: 600; } .dl-note { font-size: 12.5px; color: var(--sourdine); } .dl-note::before { content: '★'; color: var(--vert); margin-right: 4px; } .dl-media { position: relative; display: block; overflow: hidden; background: var(--gris-clair); } .dl-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .8, .2, 1); } /* modpack.webp est un logo, pas une capture : en `cover` il se fait recadrer */ .dl-media img.logo { object-fit: contain; padding: 9%; } .dl-tag { position: absolute; top: 12px; left: 12px; background: var(--rouge); color: #fff; border-radius: 36px; padding: 5px 13px; font-family: 'Poppins', sans-serif; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; } /* ---------- Vue LISTE ---------- */ .dl-liste { margin-top: 46px; position: relative; } .dl-liste .dl-item { display: grid; grid-template-columns: 40px 1.5fr 1fr 130px 150px; align-items: center; gap: 20px; padding: 26px 0; border-top: 1px solid var(--filet); transition: opacity .3s; } .dl-liste .dl-item:last-of-type { border-bottom: 1px solid var(--filet); } /* Tout s'efface sauf la ligne visée : c'est ce qui remplace le survol des cartes */ .dl-liste:hover .dl-item:not(:hover) { opacity: .38; } .dl-liste .dl-media, .dl-liste .dl-details { display: none; } .dl-liste .dl-nom { font-size: 1.28rem; transition: transform .4s cubic-bezier(.2, .8, .2, 1), color .3s; } .dl-liste .dl-item:hover .dl-nom { transform: translateX(12px); color: var(--rouge); } .dl-liste .dl-desc { font-size: 13px; } .dl-liste .dl-meta { display: grid; grid-template-columns: 62px auto; gap: 14px; align-items: baseline; } .dl-liste .dl-actions { justify-self: end; } .dl-liste .dl-tele { display: inline-flex; align-items: center; gap: 8px; font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 600; color: var(--gris-fonce); transition: color .2s, gap .2s; } .dl-liste .dl-tele::after { content: '→'; } .dl-liste .dl-tele:hover { color: var(--rouge); gap: 13px; } /* ---------- Vue GRILLE ---------- */ .dl-grille { margin-top: 46px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .dl-grille .dl-item { display: flex; flex-direction: column; border: 1px solid var(--filet); border-radius: 18px; overflow: hidden; transition: border-color .25s; } .dl-grille .dl-item:hover { border-color: rgba(0, 0, 0, .24); } .dl-grille .dl-item:hover .dl-media img { transform: scale(1.04); } .dl-grille .dl-n { display: none; } .dl-grille .dl-media { aspect-ratio: 16/10; } .dl-grille .dl-nom { font-size: 1.08rem; padding: 18px 18px 0; } .dl-grille .dl-desc { font-size: 13px; line-height: 1.6; padding: 6px 18px 0; } .dl-grille .dl-meta { display: flex; gap: 16px; padding: 14px 18px 0; margin-top: auto; } .dl-grille .dl-actions { display: flex; gap: 8px; padding: 16px 18px 18px; } .dl-grille .dl-tele, .dl-grille .dl-details { flex: 1; display: inline-flex; align-items: center; justify-content: center; border-radius: 36px; padding: 11px 16px; font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 600; transition: background .2s, color .2s, border-color .2s, transform .2s; } .dl-grille .dl-tele { background: var(--rouge); color: #fff; } .dl-grille .dl-tele:hover { background: var(--rouge-fonce); transform: translateY(-2px); } .dl-grille .dl-details { border: 1px solid var(--filet); color: var(--gris-texte); } .dl-grille .dl-details:hover { border-color: var(--gris-fonce); } /* L'aperçu vit hors du flux et traîne derrière le curseur (lerp dans main.js) */ .dl-vue { position: fixed; top: 0; left: 0; z-index: 150; width: 260px; aspect-ratio: 16/11; border-radius: 18px; overflow: hidden; pointer-events: none; opacity: 0; transform: translate(-50%, -50%) scale(.92); transition: opacity .3s, transform .45s cubic-bezier(.2, .8, .2, 1); box-shadow: 0 20px 50px rgba(0, 0, 0, .18); background: var(--gris-clair); } .dl-vue.on { opacity: 1; transform: translate(-50%, -50%) scale(1); } .dl-vue img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; } .dl-vue img.on { opacity: 1; visibility: visible; } /* modpack.webp est un logo, pas une capture : en `cover` il se fait recadrer */ .dl-vue img.logo { object-fit: contain; padding: 11%; } .dl-aide { border-top: 1px solid var(--filet); margin-top: 90px; padding-top: 26px; display: flex; justify-content: space-between; align-items: baseline; gap: 20px; flex-wrap: wrap; } @media (max-width: 1024px) { .dl-vue { display: none; } .dl-liste .dl-item { grid-template-columns: 30px 1fr auto; gap: 14px; } .dl-liste .dl-desc, .dl-liste .dl-meta { display: none; } .dl-grille { grid-template-columns: repeat(2, 1fr); gap: 20px; } .dl-h-grille { grid-template-columns: 1fr; gap: 40px; } .dl-h-vis { order: -1; } .dl-h-vis img { width: min(70%, 280px); } .dl-h-meta { grid-template-columns: repeat(2, 1fr); row-gap: 20px; margin-top: 50px; } } @media (max-width: 640px) { .dl-filtres { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; padding-bottom: 4px; } .dl-filtres::-webkit-scrollbar { display: none; } /* Padding aligné sur les filtres « top » de la galerie niv1 (.gx1-tag) */ .dl-filtres button { padding: 9px 18px; } .dl-outils { width: 100%; justify-content: space-between; } .dl-grille { grid-template-columns: 1fr; } .dl-hero { padding-top: calc(var(--header-h) + 40px); } .dl-corps { padding: 60px 0 80px; } .dl-h-actions { width: 100%; } .dl-h-actions .dl-btn { flex: 1; } } /* ---------- L'état vide des filtres ---------- Schematics, blueprints Axiom et mondes existent comme catégories AVANT d'avoir leurs fichiers : quand un filtre ne renvoie rien, ce bloc le dit franchement au lieu de laisser un trou (le piège « Véhicules » de l'ancienne galerie). Affiché/masqué par main.js via [hidden]. */ .dl-vide { border-top: 1px solid var(--filet); margin-top: 46px; padding: 72px 0; text-align: center; } .dl-vide-titre { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 1.15rem; color: var(--gris-fonce); letter-spacing: -.01em; } .dl-vide-note { margin: 10px auto 0; max-width: 460px; color: var(--sourdine); font-size: 13.5px; line-height: 1.75; } .dl-vide-note a { color: var(--rouge); } .dl-vide-note a:hover { text-decoration: underline; } /* ---------- Le pas-à-pas d'installation : « Jusqu'au spawn » ---------- Cinq étapes, du premier clic à « on se voit sur le serveur ». Les textes s'appuient sur ressources/commencer.html — la version détaillée. Colonne gauche épinglée, étapes en lignes filetées : le langage de la liste. */ .dl-guide { background: var(--blanc); padding: 96px 0 110px; border-top: 1px solid var(--filet); scroll-margin-top: calc(var(--header-h) + 10px); } .dl-g-grille { display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; align-items: start; } .dl-g-gauche { position: sticky; top: calc(var(--header-h) + 24px); } .dl-g-chapo { margin-top: 16px; color: var(--gris-texte); line-height: 1.75; max-width: 420px; } .dl-g-note { margin-top: 22px; color: var(--sourdine); font-size: 13.5px; line-height: 1.75; max-width: 420px; } .dl-g-etapes { list-style: none; } .dl-g-etapes li { display: grid; grid-template-columns: 44px 1fr; gap: 22px; padding: 28px 0; border-top: 1px solid var(--filet); } .dl-g-etapes li:last-child { border-bottom: 1px solid var(--filet); } .dl-g-n { font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 600; color: var(--sourdine); padding-top: 5px; } .dl-g-etapes h3 { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 1.15rem; color: var(--gris-fonce); letter-spacing: -.01em; margin-bottom: 8px; } .dl-g-etapes p { color: var(--gris-texte); line-height: 1.75; max-width: 560px; } .dl-g-etapes a { color: var(--rouge); } .dl-g-etapes a:hover { text-decoration: underline; } .dl-g-adresse { font-family: 'Poppins', sans-serif; font-weight: 600; } @media (max-width: 1024px) { .dl-g-grille { grid-template-columns: 1fr; gap: 40px; } .dl-g-gauche { position: static; } .dl-guide { padding: 60px 0 80px; } } /* ========================================================================== PAGE MEMBRES — DA minimaliste (essai A, hero « Défilé ») Le staff en rangées, les 7 grades de construction dessinés comme une échelle qu'on gravit. Pas de carte : des filets, le rouge en accent, et la couleur des grades réduite à une pastille — elle vient du jeu. ========================================================================== */ /* Vocabulaire minimaliste : le filet remplace ombres et cartes, le rouge est un accent, le vert un micro-signal. */ .mb-sur { font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--sourdine); } .mb-h1 { font-family: 'Poppins', sans-serif; font-weight: 500; font-size: clamp(2.4rem, 1.6rem + 3.2vw, 4.4rem); line-height: 1.04; letter-spacing: -.03em; color: var(--gris-fonce); margin: 18px 0 20px; } /* Un point rouge suffit : pas de dégradé rouge→vert sur le titre */ .mb-h1 b { color: var(--rouge); font-weight: 500; } .mb-h2 { font-family: 'Poppins', sans-serif; font-weight: 500; font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.1rem); color: var(--gris-fonce); letter-spacing: -.02em; } .mb-h2 b { color: var(--rouge); font-weight: 500; } .mb-chapo { color: var(--corps); line-height: 1.75; max-width: 520px; } .mb-hero { position: relative; overflow: hidden; padding: calc(var(--header-h) + 80px) 0 60px; } .mb-hero .container { position: relative; z-index: 10; } .mb-hero .brand-tag { display: inline-flex; margin: 0; } .mb-sec { padding: 90px 0; } .mb-tete { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap; margin-bottom: 44px; } .mb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; border-radius: 36px; padding: 13px 28px; font-family: 'Poppins', sans-serif; font-size: 13.5px; font-weight: 600; background: var(--rouge); color: #fff; transition: background .2s, transform .2s; } .mb-btn:hover { background: var(--rouge-fonce); transform: translateY(-2px); } .mb-fl { display: inline-flex; align-items: center; gap: 8px; font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 600; color: var(--gris-fonce); transition: color .2s, gap .2s; } .mb-fl:hover { color: var(--rouge); gap: 13px; } /* La pastille de couleur porte le grade : c'est la seule couleur admise hors rouge/vert, parce qu'elle vient du jeu. */ .mb-pastille { width: 9px; height: 9px; border-radius: 50%; flex: none; } .mb-nom { font-family: 'Poppins', sans-serif; font-weight: 600; color: var(--gris-fonce); letter-spacing: -.01em; } .mb-meta { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 60px; border-top: 1px solid var(--filet); } .mb-meta div { padding-top: 22px; } .mb-meta b { display: block; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 1.15rem; color: var(--gris-fonce); } .mb-meta span { display: block; margin-top: 4px; font-size: 11px; color: var(--sourdine); letter-spacing: .14em; text-transform: uppercase; font-family: 'Poppins', sans-serif; } /* Les skins Minecraft sont des pixel-art : jamais de lissage */ .mb-skin { image-rendering: pixelated; } .mb-reseaux { border-top: 1px solid var(--filet); padding-top: 26px; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; } .mb-rs { display: flex; gap: 8px; flex-wrap: wrap; } .mb-rs a { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--filet); border-radius: 36px; padding: 9px 16px; font-family: 'Poppins', sans-serif; font-size: 12.5px; font-weight: 500; color: var(--gris-texte); transition: border-color .2s, color .2s; } .mb-rs a svg { width: 14px; height: 14px; fill: currentColor; } .mb-rs a:hover { border-color: var(--rouge); color: var(--rouge); } @media (max-width: 900px) { .mb-hero { padding-top: calc(var(--header-h) + 40px); } .mb-sec { padding: 60px 0; } .mb-meta { grid-template-columns: 1fr 1fr; row-gap: 18px; } } .a-role { padding: 34px 0; border-top: 1px solid var(--filet); display: grid; grid-template-columns: 220px 1fr; gap: 40px; align-items: start; } .a-role:last-of-type { border-bottom: 1px solid var(--filet); } .a-role-tete { display: flex; align-items: center; gap: 10px; } .a-role h3 { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 1.15rem; color: var(--gris-fonce); } .a-role p { color: var(--sourdine); font-size: 13px; line-height: 1.7; margin-top: 10px; } .a-gens { display: flex; gap: 26px; flex-wrap: wrap; } .a-gars { text-align: center; } .a-gars img { height: 84px; width: auto; margin-bottom: 8px; } .a-gars span { display: block; font-size: 12px; color: var(--gris-texte); font-family: 'Poppins', sans-serif; } .a-ech { position: relative; padding-left: 46px; } .a-ech::before { content: ''; position: absolute; left: 5px; top: 12px; bottom: 12px; width: 1px; background: var(--filet); } .a-bar { position: relative; padding: 26px 0; } .a-bar + .a-bar { border-top: 1px solid var(--filet); } .a-bar .pt { position: absolute; left: -46px; top: 32px; width: 11px; height: 11px; border-radius: 50%; box-shadow: 0 0 0 4px var(--blanc); } .a-bar .n { font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 600; color: var(--sourdine); letter-spacing: .12em; } .a-bar h3 { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 1.3rem; color: var(--gris-fonce); letter-spacing: -.015em; margin: 6px 0 8px; } .a-bar p { color: var(--corps); line-height: 1.75; max-width: 620px; } @media (max-width: 900px) { .a-role { grid-template-columns: 1fr; gap: 20px; } .a-ech { padding-left: 30px; } .a-bar .pt { left: -30px; } } .h-bande { margin-top: 50px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); } /* Piste doublée dans le HTML : translateX(-50%) boucle sans raccord */ .h-piste { display: flex; gap: 30px; width: max-content; align-items: flex-end; animation: hDefile 44s linear infinite; } .h-bande:hover .h-piste { animation-play-state: paused; } @keyframes hDefile { to { transform: translateX(-50%); } } .h-piste img { height: 110px; width: auto; opacity: .9; transition: opacity .25s, transform .25s; } .h-piste img:hover { opacity: 1; transform: translateY(-8px); } @media (max-width: 900px) { .h-piste img { height: 76px; } .h-piste { gap: 18px; } } @media (prefers-reduced-motion: reduce) { .h-piste { animation: none; } } /* Réduction des animations */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .brand-tag, .main-heading, .subtitle, .cta-button { opacity: 1; transform: none; } .hg-titre, .hg-sub, .hg-actions { opacity: 1; transform: none; } .dl-h1, .dl-chapo, .dl-h-actions { opacity: 1; transform: none; } .dl-h-vis img { animation: none; } } /* ========================================================================== CHARTE GRAPHIQUE — « LE NUANCIER » La page se lit comme un nuancier d'imprimeur : la couleur n'est pas illustrée par une pastille posée à côté d'une légende, elle EST la surface, et la légende vit dedans. Préfixe ng-. ========================================================================== */ /* ---------- Hero : l'éventail ---------- Les lames sont empilées au même point et pivotent depuis leur base : c'est le geste d'un nuancier papier qu'on ouvre. L'angle de chaque lame est porté par --a, écrit dans le HTML ; au repos l'éventail n'est ouvert qu'à 38 %, il se déploie au survol. */ .ng-hero { position: relative; overflow: hidden; padding: calc(var(--header-h) + 80px) 0 0; } .ng-hero .container { position: relative; z-index: 10; } .ng-hero-grille { display: grid; grid-template-columns: 1fr 440px; gap: 60px; align-items: center; } .ng-h1 { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: clamp(2.3rem, 4.6vw, 3.8rem); line-height: 1.05; letter-spacing: -.035em; color: var(--gris-fonce); } .ng-h1 b { color: var(--rouge); } .ng-chapo { margin-top: 20px; max-width: 540px; color: var(--corps); line-height: 1.75; } .ng-eventail { position: relative; height: 420px; display: flex; align-items: flex-end; justify-content: center; } .ng-lame { position: absolute; bottom: 0; width: 56px; height: 290px; border-radius: 28px; transform-origin: 50% 100%; transform: rotate(calc(var(--a) * .38)); transition: transform .7s cubic-bezier(.22, 1, .36, 1); box-shadow: 0 10px 30px rgba(0, 0, 0, .1); } .ng-eventail:hover .ng-lame { transform: rotate(var(--a)); } /* Le blanc a besoin d'un filet, sinon la lame disparaît sur le fond. */ .ng-lame--filet { box-shadow: 0 10px 30px rgba(0, 0, 0, .1), inset 0 0 0 1px var(--filet); } .ng-eventail-socle { position: absolute; bottom: -20px; z-index: 20; width: 76px; height: 76px; border-radius: 50%; background: var(--blanc); border: 2px solid var(--rouge); display: grid; place-items: center; } .ng-eventail-socle img { width: 40px; height: 40px; } .ng-meta { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 70px; border-top: 1px solid var(--filet); } .ng-meta div { padding: 22px 0 0; } .ng-meta b { display: block; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 1.15rem; color: var(--gris-fonce); } .ng-meta span { display: block; margin-top: 4px; font-size: 11px; color: var(--sourdine); letter-spacing: .14em; text-transform: uppercase; font-family: 'Poppins', sans-serif; } /* ---------- Structure de section ---------- */ .ng-sec { padding: 100px 0; } .ng-sec--gris { background: var(--gris-clair); } .ng-tete { margin-bottom: 46px; max-width: 720px; } .ng-num { font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 600; color: var(--sourdine); letter-spacing: .16em; text-transform: uppercase; } .ng-h2 { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.15; letter-spacing: -.025em; color: var(--gris-fonce); margin-top: 10px; } .ng-h2 b { color: var(--rouge); } .ng-tete p { margin-top: 14px; color: var(--corps); line-height: 1.75; } .ng-sur { font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 600; color: var(--sourdine); letter-spacing: .14em; text-transform: uppercase; padding-bottom: 14px; border-bottom: 1px solid var(--filet); margin-bottom: 26px; } /* Une intertitre qui suit un bloc doit s'en décoller : les légendes de la grille précédente ont des hauteurs inégales et viendraient le toucher. */ * + .ng-sur { margin-top: 64px; } /* ---------- Le nuancier ---------- Chaque nuance est un bouton : cliquer copie l'hexa. La légende est dans la couleur, jamais en dessous — c'est ce qui sépare un nuancier d'une grille de pastilles. */ .ng-gamme { display: grid; grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); gap: 14px; } .ng-nuance { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 258px; padding: 20px; border: 0; border-radius: 16px; text-align: left; cursor: pointer; color: #fff; font-family: 'Poppins', sans-serif; transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s ease; } .ng-nuance:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0, 0, 0, .13); } /* Nuances claires : le texte blanc y serait illisible. */ .ng-nuance--clair { color: var(--gris-fonce); } .ng-nuance--bord { box-shadow: inset 0 0 0 1px var(--filet); } .ng-nuance--bord:hover { box-shadow: inset 0 0 0 1px var(--filet), 0 18px 40px rgba(0, 0, 0, .13); } .ng-nuance i { position: absolute; top: 18px; left: 20px; font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: .14em; opacity: .55; } .ng-nuance strong { display: block; font-size: 15px; font-weight: 600; letter-spacing: -.01em; } .ng-nuance code { display: block; margin-top: 3px; font-family: 'Poppins', sans-serif; font-size: 12.5px; font-weight: 500; letter-spacing: .06em; opacity: .72; } /* Le filet sous le nom reprend la couleur du texte : il ne tranche jamais, quelle que soit la nuance qui le porte. */ .ng-nuance em { display: block; margin-top: 12px; padding-top: 12px; border-top: 1px solid currentColor; font-style: normal; font-family: 'Open Sans', sans-serif; font-size: 11.5px; line-height: 1.55; opacity: .78; } .ng-copie { position: absolute; top: 16px; right: 18px; font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; opacity: 0; transition: opacity .2s ease; } .ng-nuance:hover .ng-copie { opacity: .6; } .ng-nuance.copie .ng-copie { opacity: 1; } /* Écart assumé entre la charte et le code du site. La page montre le système réel : quand les deux divergent, on le dit ici plutôt que de le maquiller. */ .ng-ecart { display: flex; gap: 12px; align-items: flex-start; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--filet); font-size: 12.5px; color: var(--sourdine); line-height: 1.7; max-width: 720px; } .ng-ecart::before { content: ''; flex: none; margin-top: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--rouge); } .ng-ecart b { font-family: 'Poppins', sans-serif; font-weight: 600; color: var(--gris-fonce); } /* ---------- La règle des deux mots ---------- */ .ng-regle { border: 1px solid var(--filet); border-radius: 20px; padding: clamp(30px, 5vw, 64px); text-align: center; background: var(--blanc); } .ng-mot { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: clamp(1.9rem, 6.6vw, 4.8rem); line-height: 1; letter-spacing: -.03em; } .ng-mot span:first-child { color: var(--vert); } .ng-mot span:last-child { color: var(--rouge-charte); } .ng-mot-sub { margin-top: 16px; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: clamp(.85rem, 1.5vw, 1.1rem); color: var(--gris-texte); } .ng-regle-notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 30px; margin-top: 54px; text-align: left; } .ng-regle-notes div { border-top: 1px solid var(--filet); padding-top: 18px; } .ng-regle-notes b { display: block; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 14px; color: var(--gris-fonce); } .ng-regle-notes p { margin-top: 7px; font-size: 13px; color: var(--sourdine); line-height: 1.65; } /* ---------- Typographie ---------- */ .ng-typo { border-top: 1px solid var(--filet); padding: 34px 0; display: grid; grid-template-columns: 200px 1fr; gap: 40px; align-items: baseline; } .ng-typo:last-of-type { border-bottom: 1px solid var(--filet); } .ng-typo-nom { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 1.15rem; color: var(--gris-fonce); } .ng-typo-role { margin-top: 6px; font-size: 12px; color: var(--sourdine); line-height: 1.6; } .ng-typo-spec { font-size: clamp(1.5rem, 3.6vw, 2.7rem); line-height: 1.25; color: var(--gris-fonce); letter-spacing: -.02em; } .ng-typo-jeu { margin-top: 10px; font-size: 12.5px; color: var(--sourdine); letter-spacing: .04em; } /* ---------- Logos ---------- */ .ng-logos { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; } .ng-logo-vue { aspect-ratio: 4 / 3; display: grid; place-items: center; padding: 34px; border-radius: 18px; } .ng-logo-vue img { max-height: 100%; width: auto; } .ng-logo-vue--blanc { background: var(--blanc); box-shadow: inset 0 0 0 1px var(--filet); } .ng-logo-vue--noir { background: #000; } .ng-logo-vue--charbon { background: #292929; } .ng-logo-vue--arc { background: linear-gradient(135deg, #e40303, #ff8c00, #ffed00, #008026, #004dff, #750787); } .ng-logo-vue--gris { background: var(--gris-clair); } .ng-logo figcaption { padding: 16px 4px 0; } .ng-logo figcaption strong { display: block; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 14px; color: var(--gris-fonce); } .ng-logo figcaption span { display: block; margin-top: 4px; font-size: 11.5px; color: var(--sourdine); line-height: 1.6; } /* Zone de protection : le cadre pointillé matérialise la marge minimale autour du logo, exprimée en hauteurs de sa pastille verte. */ .ng-garde { display: grid; grid-template-columns: 1fr 380px; gap: 60px; align-items: center; margin-top: 74px; } .ng-garde-vue { position: relative; aspect-ratio: 1; padding: 22%; background: var(--gris-clair); border-radius: 18px; display: grid; place-items: center; } .ng-garde-vue::before { content: ''; position: absolute; inset: 22%; border: 1px dashed var(--rouge); border-radius: 4px; } .ng-garde-vue img { width: 100%; height: auto; } .ng-garde-liste { list-style: none; } .ng-garde-liste li { border-top: 1px solid var(--filet); padding: 16px 0; font-size: 13.5px; color: var(--corps); line-height: 1.7; } .ng-garde-liste li:last-child { border-bottom: 1px solid var(--filet); } .ng-garde-liste li b { font-family: 'Poppins', sans-serif; color: var(--gris-fonce); font-weight: 600; } /* ---------- Cas & usage : la galerie d'assets ---------- */ /* Colonnes figées, pas d'auto-fit : les assets ont des ratios différents et l'auto-fit glissait à 3 colonnes sur les séries pensées en 2. */ .ng-cas { display: grid; gap: 22px; } .ng-cas--2 { grid-template-columns: repeat(2, 1fr); } .ng-cas--3 { grid-template-columns: repeat(3, 1fr); } .ng-piece-vue { overflow: hidden; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--filet); } .ng-piece-vue img { width: 100%; height: auto; transition: transform .5s cubic-bezier(.22, 1, .36, 1); } .ng-piece:hover .ng-piece-vue img { transform: scale(1.03); } .ng-piece figcaption { padding: 15px 2px 0; display: flex; justify-content: space-between; gap: 16px; align-items: baseline; } .ng-piece figcaption strong { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 13.5px; color: var(--gris-fonce); } .ng-piece figcaption span { font-size: 11px; color: var(--sourdine); letter-spacing: .08em; white-space: nowrap; font-family: 'Poppins', sans-serif; } .ng-piece p { padding: 6px 2px 0; font-size: 12.5px; color: var(--sourdine); line-height: 1.65; } /* Les bannières de listing sont minuscules et de formats très différents : les aligner sur une colonne à filets vaut mieux qu'une grille, qui les aurait toutes étirées à la même largeur. */ .ng-banniere { display: flex; align-items: center; justify-content: space-between; gap: 30px; border-top: 1px solid var(--filet); padding: 24px 0; flex-wrap: wrap; } .ng-banniere:last-of-type { border-bottom: 1px solid var(--filet); } .ng-banniere img { max-width: 100%; height: auto; border-radius: 3px; box-shadow: 0 4px 16px rgba(0, 0, 0, .1); } .ng-banniere-info { flex: 1; min-width: 210px; } .ng-banniere-info strong { display: block; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 14px; color: var(--gris-fonce); } .ng-banniere-info span { display: block; margin-top: 4px; font-size: 11px; color: var(--sourdine); letter-spacing: .1em; font-family: 'Poppins', sans-serif; } .ng-banniere-info p { margin-top: 8px; font-size: 12.5px; color: var(--sourdine); line-height: 1.6; max-width: 380px; } /* ---------- À faire / à ne pas faire ---------- Même langage que la FAQ de l'accueil : un panneau gris arrondi posé dans le blanc de la section, et non une bande grise pleine largeur. */ .ng-panneau { background: #f1f1f1; border-radius: 26px; padding: 56px clamp(20px, 4vw, 48px) 44px; } .ng-panneau .ng-tete { margin-bottom: 38px; } .ng-jugements { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; } /* Cartes blanches sur le gris, comme les details de la FAQ. Le filet coloré du haut suit l'arrondi : c'est lui qui annonce la colonne. */ .ng-jugement { background: #fff; border-radius: 22px; border-top: 3px solid; padding: 24px 26px 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, .05); } .ng-jugement--oui { border-top-color: var(--vert); } .ng-jugement--non { border-top-color: var(--rouge-charte); } /* Sur carte blanche, la dernière puce n'a plus besoin de son filet de bas. */ .ng-jugement li:last-child { border-bottom: 0; } .ng-jugement-tag { font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; } .ng-jugement--oui .ng-jugement-tag { color: #5ba31a; } .ng-jugement--non .ng-jugement-tag { color: var(--rouge-charte); } .ng-jugement ul { list-style: none; margin-top: 14px; } .ng-jugement li { font-size: 13px; color: var(--corps); line-height: 1.7; padding: 10px 0 10px 20px; position: relative; border-bottom: 1px solid var(--filet); } .ng-jugement li::before { position: absolute; left: 0; top: 10px; font-weight: 700; } .ng-jugement--oui li::before { content: '+'; color: var(--vert); } .ng-jugement--non li::before { content: '–'; color: var(--rouge-charte); } /* ---------- Fin de la charte ---------- */ .ng-fin { text-align: center; } .ng-fin .ng-tete { margin: 0 auto 32px; } .ng-fin p { margin-left: auto; margin-right: auto; } @media (max-width: 1024px) { .ng-hero-grille { grid-template-columns: 1fr; gap: 40px; } .ng-eventail { height: 340px; } .ng-garde { grid-template-columns: 1fr; gap: 34px; } .ng-garde-vue { max-width: 340px; } } @media (max-width: 900px) { .ng-cas--2, .ng-cas--3 { grid-template-columns: 1fr; } } @media (max-width: 640px) { .ng-hero { padding-top: calc(var(--header-h) + 40px); } .ng-sec { padding: 64px 0; } .ng-meta { grid-template-columns: 1fr 1fr; row-gap: 18px; } .ng-typo { grid-template-columns: 1fr; gap: 14px; } .ng-lame { width: 42px; height: 210px; } .ng-eventail { height: 270px; } /* Sans survol au doigt, l'éventail resterait fermé : on l'ouvre d'office, à 70 % pour qu'il tienne dans la largeur. */ .ng-lame { transform: rotate(calc(var(--a) * .7)); } } /* L'éventail reste lisible sans le geste : on le fige à demi ouvert. */ @media (prefers-reduced-motion: reduce) { .ng-lame, .ng-eventail:hover .ng-lame { transform: rotate(calc(var(--a) * .38)); transition: none; } } /* ========================================================================== GALERIE PHOTOS — 3 NIVEAUX D'IMMERSION Même système que le hero d'accueil : une pilule, un range 1→3, la classe .on qui bascille le niveau, le choix retenu d'une visite à l'autre. ⚠️ La pilule porte les IDs gal-immersion* et NON immersion* : le module d'immersion de main.js se garde sur #immersion et écrirait « Pioche / Cylindre / Bandeau » dans le nom, en plus d'écraser la clé de l'accueil. ⚠️ AUCUN NIVEAU NE RECADRE. Les 38 photos ont 12 ratios différents (7 sont carrées, 31 en paysage de 1.67 à 1.95) : chacune est posée à sa forme. L'ancienne page les forçait toutes en 16/10 et jetait 37 % de chaque image. Préfixe gx-. ========================================================================== */ .gx-niveau { display: none; } .gx-niveau.on { display: block; } .gx-hero { position: relative; overflow: hidden; padding: calc(var(--header-h) + 60px) 0 0; } .gx-hero .container { position: relative; z-index: 10; } .gx-surtitre { font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--sourdine); } .gx-titre { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.4rem); color: var(--gris-fonce); letter-spacing: -.035em; line-height: 1.05; margin-top: 14px; } .gx-titre b { color: var(--rouge); } .gx-chapo { color: var(--corps); line-height: 1.75; max-width: 580px; margin-top: 16px; } /* Les skins Minecraft sont du pixel-art : jamais de lissage. */ .gx-skin { image-rendering: pixelated; } /* Le marqueur d'écart : une légende qui ne décrit pas son image. */ .gx-ecart { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--rouge); vertical-align: middle; margin-left: 5px; flex: none; } /* ========================================================================== NIVEAU 1 — LA GRILLE Colonnes CSS plutôt que grille : c'est le seul moyen de laisser 12 ratios cohabiter sans en recadrer un seul. ========================================================================== */ .gx1-barre { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 32px; } .gx1-tags { display: flex; gap: 8px; flex-wrap: wrap; } .gx1-tag { border: 1px solid var(--filet); background: none; border-radius: 36px; padding: 9px 18px; cursor: pointer; font-family: 'Poppins', sans-serif; font-size: 12.5px; font-weight: 600; color: var(--gris-texte); transition: border-color .2s, color .2s, background .2s; } .gx1-tag:hover { border-color: var(--vert); color: var(--vert); } .gx1-tag[aria-pressed="true"] { background: var(--rouge); border-color: var(--rouge); color: #fff; } .gx1-tag b { opacity: .55; margin-left: 5px; font-weight: 600; } .gx1-vues { display: flex; gap: 2px; background: var(--gris-clair); padding: 4px; border-radius: 36px; } .gx1-vue { border: 0; background: none; border-radius: 36px; padding: 8px 16px; cursor: pointer; font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 600; color: var(--sourdine); transition: background .2s, color .2s; } .gx1-vue[aria-pressed="true"] { background: var(--blanc); color: var(--gris-fonce); } .gx1-lot[data-vue="grille"] { columns: 3; column-gap: 20px; } .gx1-lot[data-vue="liste"] { columns: 1; } .gx1-item { display: block; width: 100%; border: 0; background: none; padding: 0; text-align: left; cursor: pointer; break-inside: avoid; } .gx1-item.cache { display: none; } /* Un