/* ========================================================================== Movember Almaviva Santé Couche de design posée par-dessus Bootstrap 5.3. Charte : bleu Almaviva dominant, orange Almaviva en accent, blanc respirant. ========================================================================== */ @font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/anton-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; } :root { /* Bleus Almaviva */ --mo-blue-900: #001a3d; --mo-blue-800: #002754; --mo-blue-700: #003c87; /* bleu du logo */ --mo-blue-600: #0a4fa8; --mo-blue-400: #2e7bd6; --mo-blue-100: #d9e6f7; /* Orange Almaviva */ --mo-orange: #ef7d00; --mo-orange-2: #ff9e38; /* Neutres */ --mo-paper: #ffffff; --mo-cream: #f3f7fc; --mo-text: #14233c; --mo-muted: #5b6a84; --mo-line: rgba(255, 255, 255, .13); --mo-line-dark: rgba(0, 60, 135, .12); --mo-font-display: 'Anton', 'Arial Black', Impact, sans-serif; --mo-font-body: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --mo-radius: 18px; --mo-shadow: 0 18px 45px -22px rgba(0, 26, 61, .45); } /* --- Base ---------------------------------------------------------------- */ html { scroll-behavior: smooth; scroll-padding-top: 84px; /* Sur seul, le débordement horizontal reste scrollable via : il faut la règle sur les deux pour supprimer la barre du bas. */ overflow-x: hidden; } body { font-family: var(--mo-font-body); color: var(--mo-text); background: var(--mo-cream); -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* « hidden » fait de une boîte de défilement à lui seul, et position:sticky se cale alors sur cette boîte — qui ne défile jamais. La barre de navigation ne collait donc pas. « clip » coupe le débordement exactement pareil, mais sans créer de boîte de défilement : sticky retrouve la fenêtre pour repère. Les rubans continuent d'être rognés, la barre du bas ne revient pas, et « hidden » reste le repli pour les navigateurs qui ne connaissent pas encore « clip ». */ @supports (overflow: clip) { html, body { overflow-x: clip; } } ::selection { background: var(--mo-orange); color: #fff; } :focus-visible { outline: 3px solid var(--mo-orange); outline-offset: 3px; border-radius: 4px; } .display-font { font-family: var(--mo-font-display); font-weight: 400; letter-spacing: .01em; line-height: .95; text-transform: uppercase; } .eyebrow { display: inline-flex; align-items: center; gap: .6rem; font-size: .78rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--mo-orange); margin-bottom: 1rem; } .eyebrow::before { content: ''; flex: none; width: 30px; height: 3px; border-radius: 3px; background: var(--mo-orange); } /* Le trait devient une petite moustache. On se sert du PNG du héros comme masque : la couleur reste celle du libellé et l'image est déjà en cache. Les navigateurs sans mask-image gardent le trait. */ @supports ((mask-image: url('')) or (-webkit-mask-image: url(''))) { .eyebrow::before { /* 962 × 250 dans le fichier, soit un rapport de 3,85. */ width: 42px; height: 11px; border-radius: 0; background: currentColor; -webkit-mask: url('../../img/moustache-orange.png') no-repeat center / contain; mask: url('../../img/moustache-orange.png') no-repeat center / contain; } } .section { padding: clamp(3.5rem, 8vw, 7rem) 0; position: relative; } /* Sections « profondes » : bleu Almaviva, jamais du noir. */ .section--dark { background: linear-gradient(180deg, var(--mo-blue-900), var(--mo-blue-800)); color: #fff; } .section--paper { background: var(--mo-paper); } .section-title { font-size: clamp(2rem, 5.2vw, 3.5rem); /* Anton est très serré : sans cet écart, les accents des capitales (É de « ÉTABLISSEMENT ») viennent toucher la ligne précédente. */ line-height: 1.06; color: var(--mo-blue-700); } .section--dark .section-title { color: #fff; } .lead-muted { color: var(--mo-muted); font-size: 1.06rem; } .section--dark .lead-muted { color: rgba(255, 255, 255, .72); } /* --- Boutons ------------------------------------------------------------- */ .btn-mo { --bs-btn-color: #fff; --bs-btn-bg: var(--mo-orange); --bs-btn-border-color: var(--mo-orange); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #d96f00; --bs-btn-hover-border-color: #d96f00; --bs-btn-active-bg: #c46400; --bs-btn-active-border-color: #c46400; --bs-btn-disabled-bg: var(--mo-orange); --bs-btn-disabled-border-color: var(--mo-orange); font-weight: 650; letter-spacing: .01em; border-radius: 100px; padding: .78rem 1.6rem; box-shadow: 0 12px 28px -14px rgba(239, 125, 0, .95); transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease; } .btn-mo:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -14px rgba(239, 125, 0, .95); } .btn-blue { --bs-btn-color: #fff; --bs-btn-bg: var(--mo-blue-700); --bs-btn-border-color: var(--mo-blue-700); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--mo-blue-600); --bs-btn-hover-border-color: var(--mo-blue-600); font-weight: 640; border-radius: 100px; padding: .78rem 1.6rem; transition: transform .18s ease; } .btn-blue:hover { transform: translateY(-2px); } /* Bouton fantôme, posé sur les fonds bleus profonds. */ .btn-ghost { --bs-btn-color: #fff; --bs-btn-border-color: rgba(255, 255, 255, .38); --bs-btn-hover-color: var(--mo-blue-700); --bs-btn-hover-bg: #fff; --bs-btn-hover-border-color: #fff; --bs-btn-active-color: var(--mo-blue-700); --bs-btn-active-bg: #fff; font-weight: 620; border-radius: 100px; padding: .78rem 1.6rem; transition: transform .18s ease; } .btn-ghost:hover { transform: translateY(-2px); } /* Bouton discret sur fond clair. */ .btn-outline-ink { --bs-btn-color: var(--mo-blue-700); --bs-btn-border-color: rgba(0, 60, 135, .28); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--mo-blue-700); --bs-btn-hover-border-color: var(--mo-blue-700); border-radius: 100px; font-weight: 620; padding: .7rem 1.4rem; } /* --- Signature de marque -------------------------------------------------- */ .mo-brand { display: inline-flex; align-items: center; gap: .85rem; text-decoration: none; } .mo-brand img { height: 36px; width: auto; display: block; } /* --------------------------------------------------------------------------- Le mot « Movember » Movember est une marque déposée de la Movember Foundation : le mot se reprend tel quel, d'un seul tenant et en noir. Il ne se recolorise pas et ne se coupe pas en deux couleurs — d'où le intérieur ramené à la même encre que le reste. Sur les fonds sombres (pied de page, admin), la marque ne devient pas blanche : elle se pose sur une plaque claire, comme un logo appliqué sur un support foncé. Avant le 2026-09-09, la signature était bicolore : « Mo » en var(--mo-blue-700), « vember » en var(--mo-orange), et blanche en variante claire. Une copie des fichiers d'origine est dans .backup/2026-09-09_movember-noir/ si l'on veut revenir en arrière. --------------------------------------------------------------------------- */ .mo-brand-text { font-family: var(--mo-font-display); font-size: 1.4rem; letter-spacing: .04em; text-transform: uppercase; line-height: 1; color: #000; padding-left: .85rem; border-left: 1px solid var(--mo-line-dark); } .mo-brand-text span { color: inherit; } /* Variante posée sur les fonds bleus profonds (pied de page, admin) : la marque reste noire, c'est le fond qui s'éclaircit sous elle. La barre de séparation n'a plus lieu d'être, la plaque fait déjà la coupure. */ .mo-brand--light .mo-brand-text { background: #fff; padding: .45rem .8rem; border-left: 0; border-radius: 8px; } /* --- Navigation ---------------------------------------------------------- */ .mo-nav { background: rgba(255, 255, 255, .93); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--mo-line-dark); transition: background .25s ease, box-shadow .25s ease, padding-block .25s ease; padding-block: .5rem; } /* --------------------------------------------------------------------------- La barre qui se pose En haut de page, la barre fait partie du décor : haute, aérée, sans ombre. Passé le premier écran, elle se resserre et prend son ombre, puis ne bouge plus. Le mouvement est une transition, pas une arrivée par le haut : la barre est déjà collée quand le seuil est franchi, la faire sortir de l'écran pour l'y ramener se voyait comme un clignotement. Le seuil de sortie (60 px) est plus bas que celui d'entrée (140 px) : sans cet écart, une molette qui hésite autour du seuil ferait battre la barre à chaque cran. --------------------------------------------------------------------------- */ .mo-nav.is-pinned { background: rgba(255, 255, 255, .98); box-shadow: 0 14px 34px -22px rgba(0, 26, 61, .6); padding-block: .38rem; } /* Le logo et le nom se resserrent avec elle. */ .mo-nav .mo-brand img, .mo-nav .mo-brand-text { transition: height .25s ease, font-size .25s ease; } /* --------------------------------------------------------------------------- L'appel à l'action suit le même mouvement : il perd de la hauteur en même temps que la barre. C'est lui l'élément le plus haut de la barre — s'il gardait sa taille pleine, la barre posée se réduirait à un liseré de part et d'autre du bouton. En le resserrant plus que la barre, on garde la hauteur totale gagnée au défilement tout en lui rendant de l'air. Les dimensions vivent ici et non en classes utilitaires : une transition ne peut pas animer un px-3 qui ne bouge pas. --------------------------------------------------------------------------- */ .mo-nav__cta { padding: .55rem 1.15rem; font-size: .92rem; white-space: nowrap; transition: padding .25s ease, font-size .25s ease, transform .18s ease, box-shadow .18s ease, background-color .18s ease; } .mo-nav.is-pinned .mo-nav__cta { padding: .3rem .95rem; font-size: .84rem; box-shadow: 0 9px 22px -14px rgba(239, 125, 0, .95); } /* Page ouverte déjà défilée (une ancre, un retour arrière) : la barre est posée d'emblée, sans jouer la transition — on n'anime pas un changement d'état que personne n'a vu se produire. */ .mo-nav.is-instant, .mo-nav.is-instant .mo-brand img, .mo-nav.is-instant .mo-brand-text, .mo-nav.is-instant .mo-nav__cta { transition: none; } .mo-nav.is-pinned .mo-brand img { height: 30px; } .mo-nav.is-pinned .mo-brand-text { font-size: 1.2rem; } .mo-nav .nav-link { display: flex; align-items: center; gap: .45rem; color: var(--mo-blue-800); font-weight: 560; font-size: .95rem; padding: .5rem .95rem; border-radius: 100px; transition: color .16s ease, background .16s ease; } /* L'icône reste en retrait du libellé, et prend la couleur d'accent au survol : elle guide l'œil sans concurrencer le texte. */ .mo-nav .nav-link > .bi { font-size: 1rem; line-height: 1; color: var(--mo-blue-400); transition: color .16s ease; } .mo-nav .nav-link:hover, .mo-nav .nav-link:focus, .mo-nav .nav-link.active { color: var(--mo-blue-700); background: rgba(0, 60, 135, .07); } .mo-nav .nav-link:hover > .bi, .mo-nav .nav-link:focus > .bi, .mo-nav .nav-link.active > .bi { color: var(--mo-orange); } .mo-nav .navbar-toggler { border-color: var(--mo-line-dark); color: var(--mo-blue-700); padding: .4rem .6rem; } .mo-nav .navbar-toggler:focus { box-shadow: none; } @media (max-width: 991.98px) { .mo-nav .navbar-collapse { border-top: 1px solid var(--mo-line-dark); margin-top: .6rem; padding-top: .6rem; } } /* --- Héros --------------------------------------------------------------- */ .mo-hero { position: relative; background: linear-gradient(165deg, var(--mo-blue-800) 0%, var(--mo-blue-900) 55%, #00132e 100%); color: #fff; padding: clamp(3rem, 9vw, 6rem) 0 clamp(3rem, 7vw, 5rem); overflow: hidden; isolation: isolate; } /* --------------------------------------------------------------------------- Ruban de sensibilisation Motif récurrent du site : posé en filigrane sur le héros, le bandeau de chiffres, l'encart d'aide et le pied de page. Toujours décoratif, donc aria-hidden côté balisage et pointer-events désactivés ici. --------------------------------------------------------------------------- */ .mo-hero__ribbon, .gallery-hero__ribbon, .has-ribbon::before, .help-band::after, .mo-footer::before { background: url('../../img/ruban.webp') no-repeat center / contain; pointer-events: none; } /* --------------------------------------------------------------------------- Le ruban respire Même geste que la moustache du héros (.mo-stache) : le ruban monte un peu et s'incline, sans fin. Chaque exemplaire garde sa pose d'origine, d'où le passage par des variables — la rotation de base fait partie de la même propriété transform que l'animation, elle ne peut pas rester dans une règle à part. Les durées diffèrent d'un ruban à l'autre, et les délais sont négatifs : deux rubans visibles en même temps ne partent donc pas du même point du cycle et ne battent jamais ensemble. --------------------------------------------------------------------------- */ .mo-hero__ribbon, .gallery-hero__ribbon, .has-ribbon::before, .help-band::after, .mo-footer::before, .causes-ribbon, .slideshow__ribbon { --mo-ribbon-rot: 0deg; /* pose d'origine */ --mo-ribbon-flip: 1; /* -1 pour un ruban retourné */ --mo-ribbon-lift: -16px; /* hauteur du souffle */ --mo-ribbon-sway: 1.3deg; /* inclinaison ajoutée au sommet */ transform: rotate(var(--mo-ribbon-rot)) scaleX(var(--mo-ribbon-flip)); animation: mo-ribbon-drift var(--mo-ribbon-time, 14s) ease-in-out infinite; } @keyframes mo-ribbon-drift { 0%, 100% { transform: translate3d(0, 0, 0) rotate(var(--mo-ribbon-rot)) scaleX(var(--mo-ribbon-flip)); } 50% { transform: translate3d(0, var(--mo-ribbon-lift), 0) rotate(calc(var(--mo-ribbon-rot) + var(--mo-ribbon-sway))) scaleX(var(--mo-ribbon-flip)); } } .mo-hero__ribbon { position: absolute; z-index: -1; top: -10%; right: -2%; width: min(44vw, 560px); height: 120%; opacity: .17; --mo-ribbon-rot: 9deg; --mo-ribbon-time: 13s; animation-delay: -2s; } @media (max-width: 991.98px) { .mo-hero__ribbon { right: -26%; width: 86vw; opacity: .1; } } /* Sur fond clair, le ruban n'est plus un filigrane : il est affiché en plein, à côté du titre de la section « Les causes ». Comme on le voit vraiment, son souffle est plus court que celui des filigranes. */ .causes-ribbon { width: auto; height: clamp(190px, 21vw, 300px); filter: drop-shadow(0 18px 28px rgba(0, 60, 135, .2)); --mo-ribbon-rot: 7deg; --mo-ribbon-lift: -11px; --mo-ribbon-sway: 1.1deg; --mo-ribbon-time: 9s; } .has-ribbon { position: relative; overflow: hidden; } .has-ribbon::before { content: ''; position: absolute; left: -34px; top: -45%; width: 210px; height: 190%; opacity: .09; --mo-ribbon-rot: -13deg; --mo-ribbon-time: 17s; animation-delay: -6s; } .mo-hero__glow { position: absolute; inset: -30% -10% auto -10%; height: 130%; z-index: -3; background: radial-gradient(46% 40% at 20% 16%, rgba(239, 125, 0, .34), transparent 68%), radial-gradient(44% 42% at 84% 26%, rgba(46, 123, 214, .55), transparent 70%), radial-gradient(62% 52% at 50% 102%, rgba(255, 158, 56, .16), transparent 70%); pointer-events: none; } .mo-hero__grid { position: absolute; inset: 0; z-index: -2; background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(70% 60% at 50% 40%, #000 30%, transparent 100%); -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000 30%, transparent 100%); pointer-events: none; } .mo-badge { display: inline-flex; align-items: center; gap: .5rem; padding: .42rem 1rem .42rem .55rem; border: 1px solid var(--mo-line); background: rgba(255, 255, 255, .07); border-radius: 100px; font-size: .82rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .88); } .mo-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mo-orange); box-shadow: 0 0 0 4px rgba(239, 125, 0, .22); animation: mo-pulse 2.4s ease-in-out infinite; } @keyframes mo-pulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(239, 125, 0, .28); } 50% { box-shadow: 0 0 0 8px rgba(239, 125, 0, 0); } } .mo-hero__title { font-size: clamp(3.4rem, 15vw, 10.5rem); line-height: .82; margin: 1.4rem 0 0; background: linear-gradient(180deg, #fff 28%, #b9d3f2 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .mo-hero__year { font-family: var(--mo-font-display); font-size: clamp(1rem, 2.4vw, 1.6rem); color: var(--mo-orange-2); letter-spacing: .5em; text-transform: uppercase; margin-top: .9rem; } .mo-hero__tagline { font-size: clamp(1.05rem, 2.2vw, 1.35rem); color: rgba(255, 255, 255, .8); max-width: 46ch; } .mo-stache { /* Les boucles des extrémités ont besoin de place : en dessous d'environ 240 px de large, les ajours se referment visuellement. */ width: clamp(250px, 48vw, 540px); height: auto; display: block; filter: drop-shadow(0 10px 18px rgba(239, 125, 0, .3)); animation: mo-float 6s ease-in-out infinite; } @keyframes mo-float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-10px) rotate(-1.2deg); } } /* --- Compte à rebours ---------------------------------------------------- */ .mo-countdown { display: flex; gap: .6rem; flex-wrap: wrap; } .mo-count-box { background: rgba(255, 255, 255, .07); border: 1px solid var(--mo-line); border-radius: 14px; padding: .7rem 1rem; min-width: 78px; text-align: center; } .mo-count-box b { display: block; font-family: var(--mo-font-display); font-size: 1.9rem; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; } .mo-count-box span { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .55); } /* --- Bandeau défilant ---------------------------------------------------- */ .mo-marquee { background: var(--mo-orange); color: #fff; padding: .85rem 0; overflow: hidden; } /* La piste est un multiple exact du motif : l'animation la décale de 50 %, donc d'un nombre entier de groupes, et la boucle est invisible. Aucun padding ici, il fausserait ce calcul et ferait apparaître un décalage. */ .mo-marquee__track { display: flex; width: max-content; animation: mo-scroll var(--mo-marquee-duration, 34s) linear infinite; will-change: transform; } .mo-marquee__group { display: flex; align-items: center; gap: 3rem; padding-right: 3rem; flex: 0 0 auto; } .mo-marquee__group span { font-family: var(--mo-font-display); font-size: 1.1rem; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; } @keyframes mo-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* --- Mention légale de la campagne --------------------------------------- */ /* Une ligne de service, pas une section : elle se lit sans arrêter l'œil, juste sous le bandeau orange et avant que la page ne commence vraiment. */ .mo-legal { background: var(--mo-paper); border-bottom: 1px solid var(--mo-line-dark); padding: 1.1rem 0; } .mo-legal__text { max-width: 78ch; margin-inline: auto; text-align: center; font-size: .92rem; line-height: 1.55; color: var(--mo-muted); } /* --- Chiffres clés ------------------------------------------------------- */ .mo-fact { padding: 1.6rem 1.2rem; border-left: 1px solid var(--mo-line); height: 100%; } .mo-fact b { display: block; font-family: var(--mo-font-display); font-size: clamp(2.4rem, 6vw, 3.6rem); line-height: 1; color: var(--mo-orange-2); font-variant-numeric: tabular-nums; } .mo-fact span { display: block; margin-top: .55rem; color: rgba(255, 255, 255, .7); font-size: .95rem; max-width: 24ch; } /* --- Cartes « causes » --------------------------------------------------- */ .cause-card { background: var(--mo-paper); border: 1px solid var(--mo-line-dark); border-radius: var(--mo-radius); padding: 1.9rem 1.6rem; height: 100%; position: relative; overflow: hidden; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; } .cause-card::after { content: ''; position: absolute; inset: auto -40% -60% auto; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(0, 60, 135, .12), transparent 70%); opacity: 0; transition: opacity .3s ease; } .cause-card:hover { transform: translateY(-6px); box-shadow: var(--mo-shadow); border-color: rgba(0, 60, 135, .35); } .cause-card:hover::after { opacity: 1; } .cause-card__icon { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; font-size: 1.5rem; color: #fff; background: linear-gradient(135deg, var(--mo-blue-700), var(--mo-blue-400)); margin-bottom: 1.1rem; box-shadow: 0 12px 22px -12px rgba(0, 60, 135, .9); } .cause-card h3 { font-size: 1.18rem; font-weight: 700; margin-bottom: .55rem; color: var(--mo-blue-800); } .cause-card p { color: var(--mo-muted); font-size: .95rem; margin: 0; } .cause-card__tag { position: absolute; top: 1.4rem; right: 1.4rem; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #a35400; background: rgba(239, 125, 0, .14); border-radius: 100px; padding: .28rem .7rem; } /* --- Listes de conseils --------------------------------------------------- */ .checks { list-style: none; padding: 0; margin: 1.1rem 0 0; } .checks li { display: flex; gap: .55rem; align-items: flex-start; font-size: .89rem; line-height: 1.5; color: var(--mo-muted); margin-bottom: .5rem; } .checks li:last-child { margin-bottom: 0; } .checks i { color: var(--mo-orange); font-size: .95rem; line-height: 1.5; flex: 0 0 auto; } /* Encart d'aide : une touche de bleu au milieu d'une section blanche. */ .help-band { position: relative; overflow: hidden; margin-top: 3rem; background: linear-gradient(120deg, var(--mo-blue-800), var(--mo-blue-700)); color: #fff; border-radius: var(--mo-radius); padding: 1.6rem 1.8rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; } .help-band::after { content: ''; position: absolute; right: 12%; top: -60%; width: 120px; height: 240%; opacity: .2; --mo-ribbon-rot: 12deg; --mo-ribbon-time: 11s; animation-delay: -4s; } .help-band > * { position: relative; z-index: 1; } .help-band strong { display: block; font-size: 1.05rem; margin-bottom: .3rem; } .help-band span { color: rgba(255, 255, 255, .74); font-size: .94rem; max-width: 62ch; display: block; } /* --- Programme (timeline) ------------------------------------------------ */ .timeline { position: relative; margin-top: 2.5rem; } .timeline__item { position: relative; padding-left: 76px; padding-bottom: 2.1rem; } /* Le trait est découpé en segments d'une pastille à la suivante : il démarre sous l'icône et s'arrête avant la suivante, plutôt que de les traverser. --i (rang de l'étape) et --n (nb d'étapes - 1) viennent du gabarit et reproduisent le dégradé d'origine, de l'orange plein au presque effacé. */ .timeline__item::before { content: ''; position: absolute; left: 27px; top: 66px; bottom: 10px; width: 2px; background: var(--mo-orange); opacity: calc(1 - .8 * var(--i, 0) / var(--n, 1)); } .timeline__item:last-child { padding-bottom: 0; } .timeline__item:last-child::before { display: none; } .timeline__dot { position: absolute; left: 0; top: 0; z-index: 1; width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; font-size: 1.35rem; color: var(--mo-orange-2); background: rgba(255, 255, 255, .06); border: 1px solid var(--mo-line); } .timeline__date { font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--mo-orange-2); } .timeline__item h3 { font-size: 1.15rem; font-weight: 700; margin: .35rem 0 .4rem; color: #fff; } .timeline__item p { color: rgba(255, 255, 255, .68); margin: 0; max-width: 58ch; font-size: .96rem; } /* --- Étapes « participer » ----------------------------------------------- */ .step { display: flex; gap: 1rem; align-items: flex-start; } .step__num { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-family: var(--mo-font-display); font-size: 1.15rem; color: #fff; background: var(--mo-blue-700); } .step h4 { font-size: 1.02rem; font-weight: 700; margin-bottom: .25rem; color: var(--mo-blue-800); } .step p { color: var(--mo-muted); font-size: .93rem; margin: 0; } /* --- bootstrap-select : socle commun ------------------------------------- */ /* Sa feuille masque le sur sa div conteneur : sans ça, .form-select y dessinerait une seconde bordure et un second chevron autour du bouton. La largeur, elle, est reprise par data-width : la feuille de bootstrap-select impose 220 px avec un sélecteur à quatre classes, inutile de surenchérir. */ .bootstrap-select.form-select { display: block; height: auto; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; } /* Le menu est en position absolue : sans largeur imposée, il se dimensionne sur l'entrée la plus longue et déborde de l'écran sur mobile. */ .bootstrap-select > .dropdown-menu { width: 100%; } /* Sa feuille impose son propre halo de focus en !important (outline: 5px auto -webkit-focus-ring-color), qui jure avec le reste : à la souris on lui substitue l'anneau des autres champs, au clavier on garde un contour net. */ .bootstrap-select > .dropdown-toggle:focus:not(:focus-visible) { outline: none !important; } .bootstrap-select > .dropdown-toggle:focus-visible { outline: 2px solid var(--mo-orange) !important; outline-offset: 2px; } /* Le natif (repli sans JS) et au bouton posé par bootstrap-select : les deux doivent être indiscernables à l'œil. Attention : bootstrap-select recopie les classes du : color-scheme fait peindre sa croix d'effacement native en clair plutôt qu'en noir. */ color-scheme: dark; border: 1px solid rgba(255, 255, 255, .18); border-radius: 100px; background: rgba(255, 255, 255, .07); color: #fff; font-size: .88rem; padding: .42rem .95rem; } .gallery-filters .bootstrap-select .bs-searchbox .form-control::placeholder { color: rgba(255, 255, 255, .45); } .gallery-filters .bootstrap-select .bs-searchbox .form-control:focus { border-color: var(--mo-orange); background: rgba(255, 255, 255, .1); box-shadow: 0 0 0 .18rem rgba(239, 125, 0, .22); } .gallery-filters .bootstrap-select .no-results { margin: 0; padding: .5rem .6rem; border-radius: 12px; background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .62); font-size: .86rem; } /* Ascenseur discret quand la liste dépasse la hauteur affichée. */ .gallery-filters .bootstrap-select .inner { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .28) transparent; overscroll-behavior: contain; } .gallery-filters .bootstrap-select .inner::-webkit-scrollbar { width: 11px; } .gallery-filters .bootstrap-select .inner::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 100px; background-color: rgba(255, 255, 255, .26); background-clip: padding-box; } .gallery-filters .bootstrap-select .inner::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, .45); } /* Deux colonnes dès le mobile : on voit plus de moustaches d'un coup, quitte à resserrer les gouttières et la pastille de vote sur les petits écrans. */ .gallery { column-gap: 1rem; columns: 2; } @media (min-width: 768px) { .gallery { columns: 3; } } @media (min-width: 1200px) { .gallery { columns: 4; } } /* Au-delà, .container plafonne à 1320px : c'est la largeur utile maximale, donc le dernier palier. */ @media (min-width: 1400px) { .gallery { columns: 5; } } @media (max-width: 575.98px) { .gallery { column-gap: .55rem; } .gallery__item { margin-bottom: .55rem; border-radius: 10px; } .gallery__actions { top: .35rem; right: .35rem; gap: .25rem; } .gallery__like, .gallery__comment { gap: .25rem; padding: .24rem .45rem; font-size: .74rem; } .gallery__like i, .gallery__comment i { font-size: .82rem; } .gallery__meta { padding: 1.8rem .55rem .55rem; } .gallery__meta strong { font-size: .82rem; } .gallery__meta small { font-size: .72rem; } } .gallery__item { break-inside: avoid; margin-bottom: 1rem; position: relative; border-radius: 14px; overflow: hidden; background: rgba(255, 255, 255, .06); border: 1px solid var(--mo-line); display: block; width: 100%; transition: transform .22s ease, border-color .22s ease; } /* La photo agrandit, le cœur vote : deux boutons voisins plutôt qu'un bouton dans un bouton, que le HTML interdit. */ .gallery__open { display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left; } /* Bootstrap pose « cursor: pointer » sur tout bouton actif, avec une spécificité (0,1,1) qu'une simple classe ne bat pas. Le :not(:disabled) la rattrape : sans lui, la loupe d'agrandissement ne s'affiche jamais. */ .gallery__open:not(:disabled), .podium__item:not(:disabled) { cursor: zoom-in; } .gallery__item:hover { transform: translateY(-4px); border-color: rgba(255, 158, 56, .65); } .gallery__item img { width: 100%; height: auto; display: block; transition: transform .5s ease; } .gallery__item:hover img { transform: scale(1.04); } .gallery__meta { position: absolute; inset: auto 0 0 0; padding: 2.6rem .9rem .8rem; background: linear-gradient(180deg, transparent, rgba(0, 19, 46, .92)); color: #fff; opacity: 0; transform: translateY(8px); transition: opacity .22s ease, transform .22s ease; } .gallery__item:hover .gallery__meta, .gallery__open:focus-visible .gallery__meta { opacity: 1; transform: none; } .gallery__meta strong { display: block; font-size: .95rem; line-height: 1.25; } .gallery__meta small { color: rgba(255, 255, 255, .72); font-size: .8rem; } /* --- Le cœur (vote) et la bulle (commentaires) ---------------------------- */ /* Les deux pastilles voyagent ensemble, posées sur le coin de la photo. Le conteneur porte la position, les boutons ne portent que leur allure : le même couple se retrouve tel quel dans la visionneuse (.gallery__actions--lg). */ .gallery__actions { position: absolute; top: .6rem; right: .6rem; z-index: 2; display: flex; align-items: center; gap: .35rem; } .gallery__like, .gallery__comment, .gallery__share { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid rgba(255, 255, 255, .22); background: rgba(0, 19, 46, .58); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; border-radius: 100px; padding: .3rem .62rem; font-size: .82rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color .16s ease, border-color .16s ease, transform .16s ease; } .gallery__like:hover, .gallery__comment:hover, .gallery__share:hover { transform: scale(1.06); border-color: rgba(255, 158, 56, .7); } .gallery__like i, .gallery__comment i, .gallery__share i { font-size: .95rem; color: rgba(255, 255, 255, .8); transition: color .16s ease; } /* Le partage : une pastille ronde, sans compteur à afficher. */ .gallery__share { padding: .3rem .45rem; } /* Le temps que l'adresse soit copiée, la pastille passe au vert : la confirmation ne dépend pas seulement de l'infobulle. */ .gallery__share.is-copied { background: rgba(25, 135, 84, .85); border-color: rgba(25, 135, 84, .95); } .gallery__share.is-copied i { color: #fff; } .gallery__like.is-liked { background: var(--mo-orange); border-color: var(--mo-orange); } .gallery__like.is-liked i { color: #fff; } /* La bulle s'allume en bleu dès qu'un commentaire a été publié : d'un coup d'œil, on voit quelles photos font parler. */ .gallery__comment.has-comments { background: rgba(46, 123, 214, .82); border-color: rgba(46, 123, 214, .9); } .gallery__comment.has-comments i { color: #fff; } /* Petit battement au moment du clic. */ .gallery__like.is-pop i { animation: mo-heartbeat .42s ease; } @keyframes mo-heartbeat { 0% { transform: scale(1); } 35% { transform: scale(1.45); } 60% { transform: scale(.92); } 100% { transform: scale(1); } } /* --- Podium du concours --------------------------------------------------- */ .podium { border: 1px solid var(--mo-line); border-radius: var(--mo-radius); background: rgba(255, 255, 255, .05); padding: 1.1rem 1.2rem 1.3rem; margin-bottom: 1.8rem; } .podium__head { display: flex; align-items: center; gap: .55rem; font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--mo-orange-2); margin-bottom: 1rem; } .podium__list { display: grid; gap: .8rem; grid-template-columns: 1fr; } @media (min-width: 768px) { .podium__list { grid-template-columns: repeat(3, 1fr); } } /* La marche est un